/* ============================================================
   Cho Cho Industry (CCI) — Our Brands page styles
   Loads AFTER css/styles.css and reuses its tokens/components:
   .wrap .section .eyebrow .center-head .h2 .lead-center .btn .chip
   .link-arrow .ic .brand-cards .bcard
   All font-size values are even px per site convention.
   ============================================================ */

/* ============================================================
   BREADCRUMB — no white bar; blends straight into the tinted
   hero section that follows it
   ============================================================ */
.crumbs{background:var(--tint)}
.crumbs__inner{display:flex;align-items:center;gap:8px;height:48px;
  font-family:"DM Sans",sans-serif;font-size:14px;white-space:nowrap;overflow:hidden}
.crumbs a{color:var(--ink-soft);font-weight:500;flex:none;transition:.15s}
.crumbs a:hover{color:var(--cci-blue)}
.crumbs__sep{color:var(--silver);flex:none}
.crumbs__current{color:var(--cci-blue);font-weight:600;min-width:0;
  overflow:hidden;text-overflow:ellipsis}

/* ============================================================
   OVERVIEW CARDS — pack + bowl product-shot composition
   overrides the shared .bcard styling from styles.css, scoped
   to this page's #brands section only
   ============================================================ */
.brands .bcard{background:#fff;justify-content:flex-start}
.brands .bcard::after{display:none}

.bcard__stage{position:relative;height:280px;overflow:hidden;background:var(--tint)}
.bcard__photo{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.brands .bcard:hover .bcard__photo{transform:scale(1.05)}

/* ============================================================
   BRAND DEEP-DIVE — product stage (left/right) + copy
   ============================================================ */
.bshow{position:relative;overflow:hidden}
.bshow--gold{--brand:var(--gold)}
.bshow--blue{--brand:var(--cci-blue)}
.bshow__grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.bshow--rev .bshow__grid{grid-template-columns:1fr 1fr}
.bshow--rev .bshow__media{order:2}
.bshow--rev .bshow__text{order:1}

.bshow__tag{display:inline-flex;align-items:center;gap:8px;font-family:"DM Sans",sans-serif;
  font-weight:600;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--brand);background:color-mix(in srgb,var(--brand) 12%,#fff);
  padding:6px 14px;border-radius:100px;margin-bottom:14px}
.bshow__text .eyebrow{margin-bottom:12px}
.bshow__text h2{margin-bottom:18px}
.bshow__text p{color:var(--ink-soft);font-size:16px;line-height:1.75;margin:0 0 20px}
.bshow__meta{display:flex;flex-wrap:wrap;gap:28px;padding:20px 0;margin-bottom:24px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.bshow__meta-item{display:flex;flex-direction:column;gap:2px}
.bshow__meta-num{font-family:"DM Sans",sans-serif;font-weight:700;font-size:24px;color:var(--brand)}
.bshow__meta-lbl{font-size:13px;color:var(--ink-soft)}
.bshow__actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:20px}
.bshow--gold .btn--primary{background:var(--gold)}
.bshow--gold .btn--primary:hover{background:#a8871f}
.bshow--gold .link-arrow{color:var(--gold)}
.bshow--gold .link-arrow::after{background:var(--gold)}

/* product stage — the pack sits alone on a soft tinted panel */
.bshow__media{position:relative}
.pstage{position:relative;border-radius:var(--r);overflow:hidden;min-height:420px;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 30% 24%,color-mix(in srgb,var(--brand) 14%,#fff),var(--tint) 72%);
  box-shadow:var(--shadow-sm);border:1px solid var(--line)}
.pstage__pack{position:relative;z-index:1;max-width:58%;max-height:80%;
  object-fit:contain;filter:drop-shadow(0 22px 26px rgba(21,21,27,.2));
  transition:opacity .25s ease,transform .25s ease}
/* full-photo flavours (no isolated pack render) — framed as a soft photo card instead */
.pstage__pack.is-photo{max-width:74%;max-height:84%;object-fit:cover;aspect-ratio:1/1;
  border-radius:var(--r-sm);box-shadow:0 16px 30px -10px rgba(21,21,27,.3);filter:none}

/* badge — soft-edged square + bowl, floats fully above the stage box (a sibling
   of .pstage, so its overflow:hidden never clips it), anchored at the corner.
   The tile is drawn in CSS (it replaced a starburst PNG), so it stays crisp at
   every size and both brands share the identical shape. */
.pstage__badge{position:absolute;top:-38px;z-index:5;
  width:clamp(96px,10vw,118px);aspect-ratio:1;height:auto;pointer-events:none;
  border-radius:24%;
  background:linear-gradient(148deg,#f3bc55 0%,#e8ad43 52%,#d99a2b 100%);
  box-shadow:0 16px 30px -10px rgba(21,21,27,.30),
             inset 0 1px 0 rgba(255,255,255,.45)}
.pstage__badge--gold{left:-22px}
.pstage__badge--blue{right:-22px}
/* bowl rides inside the tile, with a light wobble */
.pstage__badge-dish{position:absolute;inset:0;margin:auto;width:72%;height:72%;object-fit:contain;
  filter:drop-shadow(0 6px 10px rgba(21,21,27,.22));
  transform-origin:50% 85%;animation:dishWobble 3.6s ease-in-out infinite}
@keyframes dishWobble{
  0%,100%{transform:rotate(0deg)}
  25%{transform:rotate(-4deg)}
  75%{transform:rotate(4deg)}
}
.pstage__cap{position:absolute;left:20px;bottom:20px;z-index:3;background:#fff;
  border-radius:100px;padding:8px 16px;box-shadow:var(--shadow-sm);
  font-family:"DM Sans",sans-serif;font-weight:600;font-size:13px;color:var(--brand)}

/* thumbnail strip — click to swap the stage image */
.pthumbs{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.pthumb{flex:none;width:64px;height:64px;border-radius:12px;border:2px solid var(--line);
  background:#fff;padding:6px;cursor:pointer;transition:.18s ease;display:flex;
  align-items:center;justify-content:center;overflow:hidden}
.pthumb img{max-width:100%;max-height:100%;object-fit:contain}
.pthumb[data-photo="true"] img{width:100%;height:100%;object-fit:cover;border-radius:6px}
.pthumb:hover{border-color:var(--brand)}
.pthumb.is-active{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 18%,transparent)}

/* ============================================================
   CTA STRIP — closing call to action
   ============================================================ */
.brandscta{background:var(--cci-blue);color:#fff;text-align:center}
.brandscta .eyebrow{color:var(--gold-soft)}
.brandscta h2{color:#fff}
.brandscta p{color:rgba(255,255,255,.82);max-width:620px;margin:0 auto 34px;font-size:18px}
.brandscta__actions{display:flex;justify-content:center;gap:16px;flex-wrap:wrap}

/* ============================================================
   RESPONSIVE — same breakpoints as styles.css
   ============================================================ */
@media (max-width:1100px){
  /* .bshow--rev .bshow__grid is more specific than .bshow__grid, so the
     reversed (Shin Shin) section has to be named here too — otherwise it
     stayed a 2-column grid on phones while Cho's Kitchen stacked */
  .bshow__grid,
  .bshow--rev .bshow__grid{grid-template-columns:1fr;gap:40px}
  .bshow--rev .bshow__media,.bshow--rev .bshow__text{order:initial}
}
@media (max-width:720px){
  .pstage{min-height:320px}
  .bcard__stage{height:220px}
  .bshow__meta{gap:20px}
  .brandscta p{font-size:16px}
  .brandscta__actions{flex-direction:column;align-items:stretch}
  .brandscta__actions .btn{width:100%}
  /* keep the badge inside the page gutter on small screens */
  .pstage__badge{top:-26px}
  .pstage__badge--gold{left:-12px}
  .pstage__badge--blue{right:-12px}
}