/* ============================================================================
   cw-brands.css — "Shop by brand" under the homepage hero (js/cw-brands.js) + the brand bar on /menu/ (js/cw-menu.js)
   2026-10-19.1. The shared base (the reel's mechanics, the same on every store) comes first; this store's own skin
   is at the end. Colours and type come from the store's tokens (css/<store>.css): transform/opacity only, reduced
   motion honoured, 44px+ targets, visible focus.
   ============================================================================ */
.cwb{--cwb-w:216px;--cwb-gap:16px;--cwb-pad-top:16px;--cwb-pad-bottom:18px;position:relative;overflow:hidden}
@media (max-width:640px){.cwb{--cwb-w:164px;--cwb-gap:12px}}
.cwb[hidden]{display:none!important}
.cwb .section-head{margin-bottom:18px}
.cwb-sub{max-width:62ch}
.cwb-rail{position:relative;max-width:1360px;margin:0 auto}

/* the row: a native horizontal scroller (swipe / wheel / Tab all work); js/cw-brands.js glides it */
.cwb-stage{overflow-x:auto;overflow-y:hidden;scroll-behavior:auto;scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100% - 24px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100% - 24px),transparent 100%)}
.cwb-stage::-webkit-scrollbar{display:none}
.cwb-track{display:flex;gap:var(--cwb-gap);list-style:none;margin:0;padding:var(--cwb-pad-top) 36px var(--cwb-pad-bottom);width:max-content;position:relative}   /* 36px ends: the first and last tile sit clear of the faded edges */
.cwb-fits .cwb-track{margin:0 auto}
.cwb-fits .cwb-stage{-webkit-mask-image:none;mask-image:none}
.cwb-item{flex:0 0 auto;width:var(--cwb-w);margin:0;padding:0;position:relative}

.cwb-tile{position:relative;display:flex;flex-direction:column;height:100%;text-decoration:none;color:inherit;
  transition:transform var(--cw-base,280ms) var(--cw-ease,ease),box-shadow var(--cw-base,280ms) ease,border-color var(--cw-fast,180ms) ease,background-color var(--cw-fast,180ms) ease}
.cwb-tile:focus-visible{outline:3px solid var(--cw-focus,currentColor);outline-offset:3px}
@media (hover:hover) and (pointer:fine){.cwb-tile:hover{transform:translateY(-3px)}}

/* photos: square, cross-fading (opacity only) */
.cwb-pics{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;background:#fff}
.cwb-pics img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .3s ease}
.cwb-pics img.on{opacity:1}
/* a brand without photos (and every edible / drink brand): its name, set large */
.cwb-mono{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;padding:14px;text-align:center}
.cwb-mono-t{display:block;line-height:1;overflow-wrap:anywhere;font-size:clamp(1.65rem,1.4rem + .8vw,2.15rem)}
.cwb-mono-t.cwb-long{font-size:clamp(1.25rem,1.1rem + .5vw,1.55rem)}
.cwb-mono-t.cwb-short{font-size:clamp(2.2rem,1.8rem + 1.2vw,2.9rem)}
.cwb-mono-g{font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}

.cwb-body{display:flex;flex-direction:column;gap:.25rem;padding:.75rem .9rem .9rem;flex:1 1 auto}
.cwb-name{display:block;font-family:var(--cw-font-display);font-weight:var(--cw-display-weight,700);line-height:1.05;overflow-wrap:anywhere;font-size:1.2rem}
.cwb-meta{display:block;font-size:.8rem;line-height:1.35}
.cwb-cta{display:block;margin-top:auto;padding-top:.4rem;font-weight:700;font-size:.82rem}

/* controls: ‹ pause › */
.cwb-ctrls{display:flex;justify-content:center;gap:10px;margin:4px 0 0}
.cwb-ctrls[hidden],.cwb-btn[hidden]{display:none!important}
.cwb-btn{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;cursor:pointer;font:inherit;padding:0;
  background:transparent;color:inherit;border:1px solid currentColor;transition:background-color var(--cw-fast,180ms) ease,border-color var(--cw-fast,180ms) ease,opacity var(--cw-fast,180ms) ease}
.cwb-btn:focus-visible{outline:3px solid var(--cw-focus,currentColor);outline-offset:3px}
.cwb-btn[aria-disabled="true"]{opacity:.35;cursor:default}
.cwb-btn svg{width:18px;height:18px;display:block}
.cwb-btn .cwb-i-play{display:none}
.cwb-paused .cwb-btn .cwb-i-play{display:block}
.cwb-paused .cwb-btn .cwb-i-pause{display:none}
.cwb .vape-note.cwb-vape{margin:18px 0 0}

/* "Skip the brand list" (shown on keyboard focus only) */
.cwb-skip{position:absolute;left:16px;top:6px;z-index:5;padding:.6rem .95rem;border-radius:10px;background:var(--cw-bg-2,#fff);color:var(--cw-ink,#111);
  border:2px solid var(--cw-focus,#111);font-weight:700;text-decoration:none;opacity:0;transform:translateY(-140%);pointer-events:none}
.cwb-skip:focus,.cwb-skip:focus-visible{opacity:1;transform:none;pointer-events:auto;outline:none}
#cwb-after{display:block;height:0;outline:none}

@media (prefers-reduced-motion:reduce){.cwb-tile,.cwb-pics img,.cwb-btn{transition:none!important}.cwb-tile:hover{transform:none!important}}

/* /menu/?brand=<slug>: the brand in use above the grid, one tap to show every brand again (js/cw-menu.js) */
.cw-brandbar{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin:2px 0 14px}
.cw-brandbar[hidden]{display:none!important}
.cw-bb-label{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--cw-ink-3,#666)}
.cw-bb-name{font-family:var(--cw-font-display);font-weight:var(--cw-display-weight,700);font-size:1.2rem;line-height:1.1;color:var(--cw-ink,#111)}
.cw-bb-x{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:var(--cw-r-btn,999px);border:1px solid var(--cw-line,#ccc);
  background:var(--cw-bg-2,#fff);color:var(--cw-ink,#111);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.cw-bb-x:hover{border-color:var(--cw-ink,#111)}
.cw-bb-x:focus-visible{outline:3px solid var(--cw-focus,#111);outline-offset:2px}

/* ---- this store's skin — Weed Delivery Irvine: "the plan". Parcels on a planner's grid, joined by the dashed route,
   each with a violet pin: the same language as the hero's village plan. ---- */
.cwb--plan{--cwb-pad-top:24px;background-color:var(--cw-bg);
  background-image:linear-gradient(rgba(31,59,53,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(31,59,53,.06) 1px,transparent 1px);
  background-size:40px 40px;background-position:center top;border-top:1px solid var(--cw-line);border-bottom:1px solid var(--cw-line)}
.cwb--plan .cwb-track::before{content:"";position:absolute;left:0;right:0;top:calc(var(--cwb-pad-top) + 11px + (var(--cwb-w) - 22px) / 2);border-top:2px dashed var(--cw-euca);opacity:.8}
.cwb--plan .cwb-tile{background:var(--cw-bg-2);border:1px solid var(--cw-line);border-radius:var(--cw-r-card);padding:10px;box-shadow:0 1px 0 rgba(22,33,31,.05)}
.cwb--plan .cwb-tile::before{content:"";position:absolute;z-index:2;top:-7px;left:20px;width:14px;height:14px;border-radius:50%;background:var(--cw-accent);
  box-shadow:0 0 0 4px var(--cw-bg-2),0 0 0 5px var(--cw-line)}
.cwb--plan .cwb-pics{border-radius:calc(var(--cw-r-card) - 8px);background:#F8F9F7}
.cwb--plan .cwb-body{padding:.8rem .3rem .25rem;gap:.3rem}
.cwb--plan .cwb-name{color:var(--cw-brand);font-size:1.22rem;font-weight:600;letter-spacing:-.015em}
.cwb--plan .cwb-meta{color:var(--cw-ink-3);font-size:.7rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase}
.cwb--plan .cwb-cta{color:var(--cw-accent);font-weight:600}
@media (hover:hover) and (pointer:fine){.cwb--plan .cwb-tile:hover{border-color:var(--cw-accent);box-shadow:var(--cw-shadow)}}
.cwb--plan .cwb-mono{background-color:var(--cw-brand-soft);background-image:linear-gradient(rgba(31,59,53,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(31,59,53,.08) 1px,transparent 1px);background-size:16px 16px}
.cwb--plan .cwb-mono-t{color:var(--cw-brand);font-family:var(--cw-font-display);font-weight:600;letter-spacing:-.03em}
.cwb--plan .cwb-mono-g{color:var(--cw-ink-2)}
.cwb--plan .cwb-btn{color:var(--cw-brand);border-color:var(--cw-line);background:var(--cw-bg-2)}
.cwb--plan .cwb-btn:hover{border-color:var(--cw-brand)}
.cw-brandbar .cw-bb-name{color:var(--cw-brand)}