/* ============================================================================
   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 — Weedyy Delivers: "the line". Every brand a stop on the OC (magenta) to IE (violet) line,
   in night colours: round station markers on the line, the names under them (the hero's transit map). ---- */
.cwb--line{--cwb-w:180px;--cwb-gap:22px;--cwb-pad-top:14px;color:#fff;
  background:radial-gradient(120% 140% at 0% 0%,#3D1559 0%,var(--wyy-plum) 52%,#1B0829 100%)}
@media (max-width:640px){.cwb--line{--cwb-w:146px;--cwb-gap:16px}}
.cwb--line .muted,.cwb--line .cwb-sub{color:rgba(255,255,255,.8)}
.cwb--line .cwb-track::before{content:"";position:absolute;left:0;right:0;height:8px;border-radius:4px;top:calc(var(--cwb-pad-top) + (var(--cwb-w) - 20px) / 2 - 4px);
  background:linear-gradient(90deg,var(--wyy-oc),var(--wyy-ie) 50%,var(--wyy-oc));background-size:1200px 100%;background-repeat:repeat-x}
.cwb--line .cwb-tile{align-items:center;text-align:center;color:#fff}
.cwb--line .cwb-pics{width:calc(100% - 20px);margin:0 auto;border-radius:50%;border:6px solid #fff;background:#fff;
  box-shadow:0 0 0 4px var(--wyy-plum),0 18px 36px -14px rgba(0,0,0,.7)}
@media (hover:hover) and (pointer:fine){.cwb--line .cwb-tile:hover .cwb-pics{box-shadow:0 0 0 4px var(--wyy-oc),0 18px 36px -14px rgba(0,0,0,.7)}}
.cwb--line .cwb-tile:focus-visible{outline-color:#fff}
.cwb--line .cwb-body{align-items:center;padding:.85rem .2rem 0;gap:.3rem}
.cwb--line .cwb-name{font-weight:700;font-size:1rem;letter-spacing:-.01em;line-height:1.15;color:#fff}
.cwb--line .cwb-meta{color:#E6D6FB;font-weight:600;font-size:.76rem}
.cwb--line .cwb-cta{color:#F7A6D0;font-size:.78rem;margin-top:.3rem;padding-top:0}
.cwb--line .cwb-mono{background:linear-gradient(135deg,var(--wyy-oc),var(--wyy-ie));padding:18px}
.cwb--line .cwb-mono-t{color:#fff;font-family:var(--cw-font-display);font-weight:700;letter-spacing:-.02em;font-size:1.2rem}
.cwb--line .cwb-mono-t.cwb-short{font-size:1.55rem}
.cwb--line .cwb-mono-t.cwb-long{font-size:.95rem}
.cwb--line .cwb-mono-g{color:rgba(255,255,255,.9)}
.cwb--line .cwb-btn{color:#fff;border-color:rgba(255,255,255,.55)}
.cwb--line .cwb-btn:hover{background:rgba(255,255,255,.12)}
.cwb--line .cwb-btn:focus-visible{outline-color:#fff}
.cwb--line .vape-note{background:rgba(255,255,255,.07);color:rgba(255,255,255,.86);border-left-color:var(--wyy-oc)}
.cwb--line .vape-note-h{color:#fff}
.cw-brandbar .cw-bb-name{color:var(--wyy-plum)}