/* Coff & Co 2026 - SHOP area: shop page (shop.html), category archives (blends.html, gear.html,
   shop-style grid). Breakpoints are the demo's own: shop 768/480, blends rows 900. */

/* ---- Shared type (common.jsx Kick / Head / Hand) ---- */
.cc-kick{font-family:var(--font-mono);font-weight:500;font-size:18px;letter-spacing:.04em;text-transform:uppercase}
.cc-head{margin:0;font-family:var(--font-display);font-weight:800;font-size:var(--head-size,clamp(44px,8vw,120px));line-height:.95;letter-spacing:-0.05em;text-transform:uppercase;text-wrap:balance}
.cc-head__line{display:block}
.cc-head a{color:inherit}
.cc-hand{margin:0;font-family:var(--font-hand);font-size:19px;line-height:1.4}
/* Editor copy (WYSIWYG) renders as paragraphs inside these blocks: no extra margins. */
.cc-hand p,.cc-brow__desc p{margin:0}
.cc-hand p+p,.cc-brow__desc p+p,.cc-hand ul,.cc-hand ol,.cc-brow__desc ul,.cc-brow__desc ol{margin-top:.6em}
.cc-hand a,.cc-brow__desc a{color:inherit;text-decoration:underline}
.cc-shop-hero__intro{max-width:640px;margin:18px auto 0}
.cc-shop-notices{padding-top:16px;padding-bottom:16px}

@keyframes ccShopRise{from{transform:translate3d(0,var(--rise,30px),0)}to{transform:none}}

/* =========================================================================
   SHOP (shop.html)
   ====================================================================== */
.cc-shop-hero{background:var(--cream);padding:clamp(36px,5vw,84px) 0 clamp(40px,5vw,68px);text-align:center}
.cc-shop-hero__title{margin:0;font-family:var(--font-display);font-weight:800;font-size:clamp(26px,calc((100vw - 48px) * .105),145px);line-height:.95;letter-spacing:-0.05em;text-transform:uppercase;text-wrap:balance;color:#000;white-space:nowrap;animation:ccShopRise .7s var(--ease-expo) both}
.cc-shop-tabs{display:flex;justify-content:center}
.cc-shop-tabs__row{display:flex}
.cc-shop-tabs--desk{margin-top:clamp(26px,3vw,44px)}
.cc-shop-tabs--mob{display:none}

.cc-shop-sec{padding:clamp(72px,9vw,128px) 0;color:#000}
.cc-shop-sec--blends{background:var(--amber)}
.cc-shop-sec--origins{background:var(--pink);color:var(--cream)}
.cc-shop-sec--gear{background:var(--blue);color:var(--cream)}
.cc-shop-sec--extras{background:var(--red);color:var(--cream)}
.cc-shop-sec--empty{background:var(--cream)}
.cc-shop-sec__title{margin:0 0 clamp(46px,6vw,88px)}
.cc-shop-empty{font:400 18px/1.3 var(--font-mono);text-align:center}

.cc-shop-grid{display:grid;grid-template-columns:repeat(3,1fr);column-gap:20px;row-gap:clamp(40px,4vw,64px)}
.cc-shop-grid--blends{grid-template-columns:1fr 1fr;column-gap:clamp(56px,16vw,256px);row-gap:clamp(72px,8vw,128px)}
.cc-shop-grid--gear,.cc-shop-grid--extras{column-gap:clamp(20px,2.4vw,40px);row-gap:clamp(44px,4.5vw,72px)}

@media (max-width:768px){
  .cc-shop-hero__title{font-size:80px;white-space:normal}
  .cc-shop-tabs--desk{display:none}
  /* Sticky filter bar under the sticky mobile nav (56px); transparent bar, solid tabs. */
  .cc-shop-tabs--mob{display:flex;position:sticky;top:calc(var(--cc-ab,0px) + 56px);z-index:90;padding:10px 0 40px}
  .cc-shop-grid{grid-template-columns:repeat(2,1fr)}
  .cc-shop-grid.cc-shop-grid--blends{grid-template-columns:1fr}
}
@media (max-width:480px){
  .cc-shop-hero__title{font-size:52px}
  .cc-shop-grid{grid-template-columns:1fr}
}

/* =========================================================================
   CATEGORY ARCHIVES (blends.html, gear.html)
   ====================================================================== */
.cc-arch-intro{max-width:1240px;margin:0 auto;padding:40px 24px;color:#000}
.cc-arch-intro--gear{padding-bottom:36px}
.cc-arch-intro__title{margin:12px 0 10px}

/* Blend rows: colour panel + cream panel, alternating (stacked at 900). */
.cc-brow{display:grid;grid-template-columns:1fr 1fr;max-width:1240px;margin:0 auto 26px;padding:0 24px}
.cc-brow__panel{background:var(--br-bg);color:var(--br-fg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:36px 24px}
.cc-brow--flip .cc-brow__panel{order:1}
.cc-brow__moodsub{font-family:var(--font-hand);font-size:16px;align-self:flex-start;transform:rotate(-2deg)}
.cc-brow__img{display:block;width:min(66%,340px)}
.cc-brow__img img{display:block;width:100%;height:auto}
.cc-brow__body{background:var(--cream);color:#000;padding:34px 30px;display:flex;flex-direction:column;gap:14px;justify-content:center}
.cc-brow__title{--head-size:clamp(34px,4.5vw,58px)}
.cc-brow__desc{margin:0;font-family:var(--font-mono);font-weight:500;font-size:14px;line-height:1.55;text-wrap:pretty}
.cc-brow__notes{display:flex;flex-wrap:wrap;gap:6px}
.cc-brow__notes span{font-family:var(--font-hand);font-size:16px;padding:0 2px}
.cc-brow__qa-label{font-family:var(--font-mono);font-weight:700;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:rgba(0,0,0,.55);margin-bottom:8px}
.cc-brow__sizes{display:flex;flex-wrap:wrap;gap:8px}
.cc-brow__size{display:inline-flex;align-items:center;background:var(--cream);color:#000;padding:9px 13px;font-family:var(--font-mono);font-weight:600;font-size:12px;line-height:1;letter-spacing:1.4px;text-transform:uppercase;white-space:nowrap;border:none;border-radius:0;cursor:pointer;box-shadow:inset 0 0 0 1px #000}
.cc-brow__size:hover{background:#000;color:var(--cream)}
.cc-brow__size[aria-busy="true"]{opacity:.5;cursor:progress}
.cc-brow__size:disabled{opacity:.35;cursor:not-allowed;background:var(--cream);color:#000}
.cc-brow__err{margin:8px 0 0;font:500 12px/1.3 var(--font-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--red)}
@media (max-width:900px){
  .cc-brow{grid-template-columns:1fr}
  .cc-brow--flip .cc-brow__panel{order:0}
}

.cc-arch-origins{max-width:1240px;margin:0 auto;padding:42px 24px 56px;color:#000}
.cc-arch-origins__title{--head-size:clamp(38px,5.5vw,76px);margin:12px 0 8px}
.cc-arch-origins .cc-hand{margin-bottom:24px}
.cc-arch-origins__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.cc-blends__gap{height:6px}

.cc-arch-grid{max-width:1240px;margin:0 auto;padding:0 24px 60px;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}
.cc-blends .cc-arch-grid{padding-top:16px;padding-bottom:16px}

.cc-gear-cta{background:var(--blue);color:var(--cream);padding:52px 24px}
.cc-gear-cta__in{max-width:1240px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px}
.cc-gear-cta__txt{font-size:20px;color:var(--cream);max-width:560px}

@media (prefers-reduced-motion:reduce){
  .cc-shop-hero__title{animation:none}
}