/* ============================================================================
   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 — CallWeed: "speed dial". Every brand a contact card on the speed-dial list, cobalt on
   cream with a coral slot number, the coiled cord under the row (the hero phone). ---- */
.cwb--dial{--cwb-pad-top:20px;--cwb-pad-bottom:26px;background:var(--cw-cream-2);border-top:2px solid var(--cw-cream-3);border-bottom:2px solid var(--cw-cream-3)}
.cwb--dial h2{color:var(--cw-cobalt)}
.cwb--dial .cwb-head .cord{margin-top:10px;max-width:520px}
.cwb--dial .cwb-track{counter-reset:cwb-dial}
.cwb--dial .cwb-item{counter-increment:cwb-dial}
.cwb--dial .cwb-item:not([data-cwb-clone]) + [data-cwb-clone]{counter-reset:cwb-dial}
.cwb--dial .cwb-tile{background:#fff;border:2px solid var(--cw-cobalt);border-radius:22px;padding:10px;box-shadow:5px 6px 0 var(--cw-cobalt)}
.cwb--dial .cwb-tile::before{content:counter(cwb-dial);content:counter(cwb-dial) / "";position:absolute;z-index:2;top:-12px;left:-10px;min-width:34px;height:34px;padding:0 7px;
  border-radius:999px;border:2px solid #fff;box-sizing:border-box;background:var(--cw-cobalt-2);color:#fff;font-family:var(--cw-font-display);font-weight:700;font-size:16px;line-height:30px;text-align:center}
@media (hover:hover) and (pointer:fine){.cwb--dial .cwb-tile:hover{box-shadow:8px 9px 0 var(--cw-coral);border-color:var(--cw-cobalt-2)}}
.cwb--dial .cwb-tile:focus-visible{outline:3px solid var(--cw-coral);outline-offset:4px}
.cwb--dial .cwb-pics{border-radius:14px;background:#fff}
.cwb--dial .cwb-body{padding:.75rem .35rem .2rem;gap:.28rem}
.cwb--dial .cwb-name{font-variation-settings:var(--cw-display-settings);font-weight:700;color:var(--cw-cobalt);font-size:1.32rem;letter-spacing:-.01em}
.cwb--dial .cwb-meta{color:var(--cw-ink-2);font-size:.82rem}
.cwb--dial .cwb-cta{color:var(--cw-cobalt-2);font-size:.84rem}
.cwb--dial .cwb-mono{background:var(--cw-cobalt);padding:16px}
.cwb--dial .cwb-mono-t{color:var(--cw-cream-2);font-family:var(--cw-font-display);font-variation-settings:var(--cw-display-settings);font-weight:700}
.cwb--dial .cwb-mono-g{color:var(--cw-peach)}
.cwb--dial .cwb-cord{display:block;width:auto;margin:0 36px;height:14px}
.cwb--dial .cwb-btn{color:var(--cw-cobalt);border:2px solid var(--cw-cobalt);background:#fff}
.cwb--dial .cwb-btn:hover{background:var(--cw-cobalt-soft)}
.cwb--dial .cwb-btn:focus-visible{outline-color:var(--cw-coral)}
.cwb--dial .cwb-skip{border-color:var(--cw-cobalt);color:var(--cw-cobalt)}
.cw-brandbar .cw-bb-name{color:var(--cw-cobalt);font-variation-settings:var(--cw-display-settings)}
.cw-brandbar .cw-bb-x{border:2px solid var(--cw-line);background:var(--cw-cream-2);border-radius:999px}
.cw-brandbar .cw-bb-x:focus-visible{outline-color:var(--cw-coral)}