/* ============================================================================
   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 Redlands: "the crate labels". Each brand a citrus-crate label with a double
   rule, an arched window and a ribbon, laid on the grove (the hero label). ---- */
.cwb--crate{--cwb-w:206px;color:var(--wdr-cream);background-color:var(--wdr-grove);
  background-image:radial-gradient(120% 80% at 50% 0%,rgba(255,251,242,.07),transparent 70%),repeating-linear-gradient(180deg,rgba(0,0,0,.1) 0 2px,transparent 2px 64px)}
@media (max-width:640px){.cwb--crate{--cwb-w:162px}}
.cwb--crate .muted,.cwb--crate .cwb-sub{color:rgba(255,251,242,.85)}
.cwb--crate .eyebrow{color:#FFC48C}   /* a light orange: the site's orange eyebrow is 3.4:1 on the grove, this is 6:1 */
.cwb--crate .cwb-tile{background:var(--wdr-cream);border-radius:6px;padding:9px;color:var(--cw-ink);
  box-shadow:inset 0 0 0 2px var(--cw-brand),inset 0 0 0 5px var(--wdr-cream),inset 0 0 0 6px var(--cw-brand),0 14px 28px -14px rgba(0,0,0,.6)}
@media (hover:hover) and (pointer:fine){.cwb--crate .cwb-tile:hover{box-shadow:inset 0 0 0 2px var(--cw-accent),inset 0 0 0 5px var(--wdr-cream),inset 0 0 0 6px var(--cw-accent),0 20px 36px -16px rgba(0,0,0,.7)}}
.cwb--crate .cwb-tile:focus-visible{outline-color:var(--wdr-orange)}
.cwb--crate .cwb-pics{border-radius:999px 999px 4px 4px;border:2px solid var(--cw-brand);background:#fff}
.cwb--crate .cwb-body{align-items:center;text-align:center;padding:.65rem .35rem .45rem;gap:.4rem}
.cwb--crate .cwb-name{color:var(--cw-brand);font-weight:400;font-size:1.3rem;text-transform:uppercase;letter-spacing:.01em;line-height:1.02}
.cwb--crate .cwb-meta{background:var(--cw-brand);color:var(--wdr-cream);font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:.3rem 1rem;
  clip-path:polygon(0 0,100% 0,calc(100% - 7px) 50%,100% 100%,0 100%,7px 50%)}
@media (max-width:640px){.cwb--crate .cwb-meta{white-space:nowrap;font-size:.58rem;letter-spacing:.05em;padding:.3rem .75rem}}
.cwb--crate .cwb-cta{color:var(--wdr-grove);font-weight:800;font-size:.78rem}
.cwb--crate .cwb-mono{background:repeating-conic-gradient(from -90deg at 50% 105%,#FCE1C4 0 6deg,#FFF6E8 6deg 12deg)}
.cwb--crate .cwb-mono-t{color:var(--cw-brand);font-family:var(--cw-font-display);font-weight:400;text-transform:uppercase;letter-spacing:.01em;text-shadow:2px 2px 0 var(--wdr-cream)}
.cwb--crate .cwb-mono-g{color:var(--wdr-grove)}
.cwb--crate .cwb-btn{color:var(--wdr-cream);border-color:rgba(255,251,242,.6)}
.cwb--crate .cwb-btn:hover{background:rgba(255,251,242,.12)}
.cwb--crate .cwb-btn:focus-visible{outline-color:var(--wdr-orange)}
.cwb--crate .vape-note{background:rgba(255,251,242,.08);color:rgba(255,251,242,.9);border-left-color:var(--wdr-orange)}
.cwb--crate .vape-note-h{color:var(--wdr-cream)}
.cw-brandbar .cw-bb-name{color:var(--cw-brand);text-transform:uppercase;font-weight:400}