/* ============================================================
   Shin Shin — brand page
   Inherits navbar / footer / .wrap / .btn / .eyebrow from styles.css.
   This file styles only the Shin Shin sections, recoloured to CCI
   blue with minimal hairlines (no ornate/traditional borders).
   ============================================================ */

:root{
  --ss-navy:#1f1a6e;          /* deep brand navy (= --cci-blue) */
  --ss-navy-700:#2a2496;
  --ss-blue:#3f7fd6;          /* light corporate blue */
  --ss-blue-300:#7fb0e6;
  --ss-blue-50:#eef1fb;       /* soft blue card surface */
  --ss-sky:#eaf2fc;           /* soft page tint */
  --ss-line:rgba(31,26,110,.12);
  --ss-line-blue:rgba(63,127,214,.45);
  --ss-shadow:0 24px 50px -28px rgba(31,26,110,.5);
}

/* ============================================================
   HERO — full-bleed image + elegant caption (right-aligned)
   Breadcrumb is overlaid inside the hero (no separate bar).
   ============================================================ */
.sshero{position:relative;height:calc(100vh - var(--nav-h));min-height:540px;
  overflow:hidden;background:var(--ss-navy)}
.sshero__bg{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:35% 60%;transform:scale(1.08)}
/* dark side sits on the RIGHT, behind the right-placed content panel (like the homepage hero) */
.sshero__veil{position:absolute;inset:0;z-index:1;
  background:linear-gradient(270deg,rgba(20,17,70,.9) 0%,rgba(20,17,70,.6) 34%,rgba(20,17,70,.14) 60%,rgba(31,26,110,0) 82%)}
/* thin scrim along the top edge so the overlaid breadcrumb stays legible
   over the brighter left side of the photo */
.sshero__scrim{position:absolute;top:0;left:0;right:0;height:130px;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,17,70,.5) 0%,rgba(20,17,70,0) 100%)}

/* breadcrumb — overlaid top-left inside the hero */
.sshero__crumbs{position:absolute;top:0;left:0;right:0;z-index:4}
.sshero__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;
  text-shadow:0 1px 10px rgba(20,17,70,.55)}
.sshero__crumbs-inner a{color:rgba(255,255,255,.82);font-weight:500;flex:none;transition:.15s}
.sshero__crumbs-inner a:hover{color:var(--cci-yellow)}
.sshero__crumbs-sep{color:rgba(255,255,255,.5);flex:none}
.sshero__crumbs-current{color:#fff;font-weight:600;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* full-width band inside the page margins; the content PANEL is pushed to the
   right (align-items:flex-end) while its text stays left-aligned — mirrors the
   homepage hero (.hero__inner{justify-content:flex-end} + .hero__panel-inner) */
.sshero__caption{position:absolute;z-index:3;inset:0;padding:0 var(--pad);color:#fff;
  max-width:var(--wrap);margin:0 auto;width:100%;
  display:flex;flex-direction:column;justify-content:center;align-items:flex-end}
.sshero__panel{max-width:560px;text-align:left}
/* logo sits directly on the image (no box), enlarged, with a soft shadow */
.sshero__logo{display:block;margin-bottom:20px;
  filter:drop-shadow(0 6px 20px rgba(20,17,70,.65))}
/* SS-outline.png carries a lot of transparent padding — its lettering fills
   only ~91% of the width and ~34% of the height. Sizing by height therefore
   rendered a tiny mark; crop to the artwork with a content-ratio frame and
   size by width instead. Scaled off the old mark: the previous box was
   clamp(68px,9vw,104px) tall on a 1.25 ratio, so 2.3125x that height used as
   a width lands on ~1.85x the old logo at every breakpoint. */
.sshero__logo img{display:block;width:clamp(157px,20.8vw,240px);height:auto;
  aspect-ratio:34/10;object-fit:cover;object-position:center}
.sshero__eyebrow{display:block;font-family:"DM Sans",sans-serif;font-weight:600;font-size:14px;
  letter-spacing:.3em;text-transform:uppercase;color:var(--ss-blue-300);margin-bottom:16px}
.sshero__rules{display:flex;align-items:center;gap:18px}
.sshero__rules span{width:46px;height:1px;background:var(--ss-blue-300);opacity:.85}
/* the cap is 60, not 62: the headline is authored as three lines (see .ln) and
   its longest — "instant rice vermicelli" — measures 568px at 62px, 8px wider
   than the 560px panel, which would drop it to a fourth line. */
.sshero__tag{font-family:"DM Sans",sans-serif;font-weight:700;
  font-size:clamp(30px,5vw,60px);letter-spacing:-.02em;line-height:1.06;margin:18px 0 0;
  color:#fff;text-shadow:0 2px 20px rgba(20,17,70,.6)}
.sshero__hl{color:var(--cci-yellow)}
.sshero__lede{max-width:440px;margin:18px 0 0;font-size:clamp(15px,1.4vw,17px);
  line-height:1.7;color:rgba(255,255,255,.9)}
.sshero__cta{margin-top:28px}
.sshero__scroll{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--ss-blue-300)}
.sshero__scroll svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;
  animation:ss-bob 1.8s ease-in-out infinite}
@keyframes ss-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

/* ============================================================
   OUR PRODUCTS — white band, pack + prepared bowl carousel
   ============================================================ */
.ssprods{padding:90px 0 88px;background:#fff;color:var(--ss-navy);position:relative;overflow:hidden}
.ssprods__head{text-align:center;max-width:860px;margin:0 auto 40px;position:relative;z-index:1}
.ssprods__head .eyebrow{display:inline-block;margin-bottom:14px}
.ssprods__title{font-family:"DM Sans",sans-serif;font-weight:700;
  font-size:clamp(28px,3vw,46px);color:var(--ss-navy);margin:0 0 12px;
  letter-spacing:-.02em;line-height:1.2}
.ssprods__lede{font-size:16px;color:var(--ink-soft);margin:0 auto;line-height:1.7;max-width:620px}

.ssprods__viewport{position:relative}
/* soft white fade at the left/right edges of the centred carousel track */
.ssprods__viewport::before,.ssprods__viewport::after{content:"";position:absolute;top:0;bottom:0;
  width:clamp(56px,9vw,160px);z-index:3;pointer-events:none}
.ssprods__viewport::before{left:max(0px, calc(50% - (var(--wrap) / 2)));
  background:linear-gradient(90deg,#fff 8%,rgba(255,255,255,0))}
.ssprods__viewport::after{right:max(0px, calc(50% - (var(--wrap) / 2)));
  background:linear-gradient(270deg,#fff 8%,rgba(255,255,255,0))}

.ssprods__arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:52px;height:52px;border-radius:999px;background:var(--ss-navy);
  border:1px solid var(--ss-navy);color:#fff;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;transition:.18s ease;
  box-shadow:0 12px 28px -12px rgba(31,26,110,.5)}
.ssprods__arrow--prev{left:max(8px, calc(50% - (var(--wrap) / 2) - 40px - 52px))}
.ssprods__arrow--next{right:max(8px, calc(50% - (var(--wrap) / 2) - 40px - 52px))}
.ssprods__arrow:hover{background:var(--ss-blue);border-color:var(--ss-blue)}
.ssprods__arrow svg{width:18px;height:18px}

.ssprods__row{max-width:var(--wrap);margin:0 auto;
  display:flex;flex-wrap:nowrap;gap:44px;overflow-x:auto;overflow-y:hidden;
  padding:300px 0 10px;cursor:grab;
  -webkit-user-select:none;user-select:none;touch-action:pan-x;
  scrollbar-width:none;overscroll-behavior-x:contain}
.ssprods__row::-webkit-scrollbar{display:none;height:0}
.ssprods__row.is-grabbing{cursor:grabbing}

/* card sized so ONE product sits centred with neighbours peeking evenly */
.prod{flex:0 0 clamp(300px,60%,620px);display:flex}
.prod__frame{position:relative;width:100%;background:var(--ss-blue-50);
  border:1px solid var(--ss-line-blue);border-radius:22px;padding:148px 30px 34px;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  transition:box-shadow .3s ease,transform .3s ease,border-color .3s ease}
.prod:hover .prod__frame{box-shadow:var(--ss-shadow);transform:translateY(-4px);border-color:var(--ss-blue)}
.prod__media{position:relative;width:100%;height:400px;
  margin-top:-494px;margin-bottom:8px;
  display:flex;align-items:flex-end;justify-content:center}
.prod__media img{object-fit:contain;object-position:center bottom;
  filter:drop-shadow(0 26px 34px rgba(31,26,110,.24)) drop-shadow(0 8px 14px rgba(31,26,110,.14));
  transition:transform .5s ease}
/* Every pack / bowl named assets/images/burst-*.png is re-cut onto a shared canvas
   (1180x920 landscape sachet · 920x1180 upright sachet · 900x680 bowl) with
   the artwork covering the SAME area, so a fixed box per role makes all eight
   cards identical in size. Widths are % of .prod__media, so they scale with
   the card instead of fighting max-height caps.
   --tall is 45% = 74% / 1.2826 (landscape height) x 0.7797 (portrait ratio),
   i.e. the upright pack is exactly as tall as a landscape one.
   74% / 60% match chos-kitchen.css so both brand carousels render the artwork
   at the same size; the % keep every card identical within this page. */
.prod__pack{width:74%;aspect-ratio:1180/920;height:auto;max-height:none;
  position:relative;z-index:1}
.prod__pack--tall{width:45%;aspect-ratio:920/1180}
.prod__bowl{width:60%;aspect-ratio:900/680;height:auto;max-width:none;
  margin-left:-20%;position:relative;z-index:2}
.prod:hover .prod__pack{transform:translateY(-6px) scale(1.03)}
.prod:hover .prod__bowl{transform:translateY(-6px) rotate(-2deg)}

.prod__body{display:flex;flex-direction:column;align-items:center;gap:8px}
.prod__tag{font-family:"DM Sans",sans-serif;font-weight:600;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ss-blue);
  padding:6px 14px;border:1px solid var(--ss-line-blue);border-radius:999px}
.prod__name{font-family:"DM Sans",sans-serif;font-weight:700;font-size:28px;
  color:var(--ss-navy);margin:0;letter-spacing:-.02em}
.prod__sub{font-size:13px;color:var(--ink-soft);margin:0 0 8px;letter-spacing:.01em}
.prod__cta{margin-top:14px;background:var(--ss-navy);color:#fff;
  border-radius:999px;padding:14px 28px;border:2px solid var(--ss-navy);
  box-shadow:0 10px 24px -8px rgba(31,26,110,.3);font-size:15px}
.prod__cta:hover{background:var(--ss-blue);border-color:var(--ss-blue);transform:translateY(-2px)}

/* ============================================================
   OUR BRAND · SHIN SHIN — abstract ribbon reveal
   ============================================================ */
.ssbrand{position:relative;background:var(--ss-sky);overflow:hidden;
  min-height:clamp(560px,76vh,820px);display:flex;align-items:center}
.ssbrand__art{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.ssbrand__ribbon{filter:drop-shadow(0 22px 44px rgba(31,26,110,.22))}
.ssbrand::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46%;z-index:2;
  pointer-events:none;background:linear-gradient(180deg,
    rgba(234,242,252,0) 0%,rgba(234,242,252,.86) 50%,var(--ss-sky) 84%)}
.ssbrand__copy{position:relative;z-index:3;width:100%;max-width:var(--wrap);margin:0 auto;
  padding:0 var(--pad);text-align:left}
.ssbrand__copy .eyebrow{display:inline-block;margin-bottom:20px}
.ssbrand__title{font-family:"DM Sans",sans-serif;font-weight:700;
  font-size:clamp(34px,5vw,64px);color:var(--ss-navy);
  line-height:1.06;letter-spacing:-.025em;margin:0}
.ssbrand__sub{font-size:clamp(16px,1.6vw,20px);color:var(--ss-navy-700);
  margin:18px 0 0;max-width:520px;line-height:1.6;font-weight:500}
.ssbrand__desc{font-size:clamp(13px,1.1vw,15px);color:var(--ink-soft);
  margin:12px 0 0;max-width:480px;line-height:1.7}
.ssbrand__actions{margin-top:26px}
.ssbrand__mobimg{display:none}

/* ============================================================
   PRODUCT CATEGORIES — minimal-line cards over a navy band
   ============================================================ */
.sscats{position:relative;background:
  radial-gradient(120% 130% at 50% 0%, var(--ss-navy-700) 0%, var(--ss-navy) 60%);
  padding:clamp(56px,7vw,88px) 0 clamp(64px,8vw,96px)}
.sscats__head{max-width:660px;margin:0 auto 34px;text-align:center}
.sscats__head .eyebrow{display:block;margin-bottom:10px;color:var(--ss-blue-300)}
.sscats__title{font-family:"DM Sans",sans-serif;font-weight:700;color:#fff;
  font-size:clamp(26px,3.6vw,42px);margin:0 0 12px;line-height:1.12;letter-spacing:-.02em}
.sscats__lede{margin:0;font-size:16px;line-height:1.7;color:rgba(255,255,255,.78)}

.sscats__viewport{position:relative;max-width:min(1160px,var(--wrap));margin:0 auto;padding:0 var(--pad)}
.sscats__arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:46px;height:46px;
  border-radius:50%;border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.08);
  color:#fff;cursor:pointer;display:grid;place-items:center;transition:.18s ease}
.sscats__arrow:hover{background:#fff;color:var(--ss-navy);border-color:#fff}
.sscats__arrow svg{width:18px;height:18px}
.sscats__arrow--prev{left:-4px}
.sscats__arrow--next{right:-4px}

.sscats__row{display:flex;align-items:stretch;gap:22px;overflow-x:auto;
  padding:8px 4px 14px;scrollbar-width:none;cursor:grab;
  overscroll-behavior-x:contain;touch-action:pan-x;
  /* fade the cards to transparent at both edges so they melt into the navy
     background — a soft blue fade that scales with the viewport */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 clamp(28px,6vw,80px),
    #000 calc(100% - clamp(28px,6vw,80px)),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 clamp(28px,6vw,80px),
    #000 calc(100% - clamp(28px,6vw,80px)),transparent 100%)}
.sscats__row::-webkit-scrollbar{display:none;height:0}
.sscats__row.is-grabbing{cursor:grabbing}

.scap{flex:0 0 clamp(240px,30%,290px);display:flex;flex-direction:column;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);
  border-radius:18px;overflow:hidden;transition:.22s ease}
.scap:hover{border-color:var(--ss-blue-300);background:rgba(255,255,255,.09);transform:translateY(-4px)}
.scap__media{height:190px;display:flex;align-items:center;justify-content:center;
  padding:22px;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,0))}
.scap__media img{max-height:100%;width:auto;object-fit:contain;
  filter:drop-shadow(0 16px 22px rgba(0,0,0,.4))}
.scap__caption{padding:22px 24px 26px;border-top:1px solid rgba(255,255,255,.14)}
.scap__num{display:block;font-family:"DM Sans",sans-serif;font-weight:600;font-size:12px;
  letter-spacing:.16em;color:var(--ss-blue-300);margin-bottom:6px}
.scap__caption h3{margin:0 0 8px;font-family:"DM Sans",sans-serif;font-weight:700;font-size:19px;
  color:#fff;line-height:1.25;letter-spacing:-.01em}
.scap__caption p{margin:0;font-size:14px;line-height:1.6;color:rgba(255,255,255,.72)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:720px){
  /* the desktop crop centres the bowl; on a phone that puts white noodles
     straight under white type, so slide it to the chopsticks and slate */
  .sshero__bg{object-position:50% center}
  .sshero__veil{background:linear-gradient(180deg,rgba(20,17,70,.35) 0%,rgba(20,17,70,.62) 44%,rgba(20,17,70,.86) 100%)}
  .sshero__logo{margin-bottom:16px}
  .sshero__tag{font-size:clamp(26px,8vw,40px)}
  .sshero__lede{font-size:15px}
  .sshero__cta{margin-top:22px}
  .sshero__scroll{display:none}

  .ssprods{padding:64px 0}
  .ssprods__lede{font-size:15px}
  /* 131px matches chos-kitchen.css — the previous 156px left a 25px gap between
     the artwork and the tag/name block that the other brand's card doesn't have */
  .prod__frame{padding:131px 22px 30px}
  /* absolute so the bursting pack photo floats free of the text block below */
  .prod__media{position:absolute;top:0;left:0;right:0;height:131px;margin:0;
    display:flex;align-items:flex-end;justify-content:center}
  /* pack/bowl widths are % of the card, so they already scale down here — the
     desktop ratios carry over unchanged (chos-kitchen.css keeps 74% at both
     sizes too). Only the overlap tightens on the narrower card. */
  .prod__bowl{margin-left:-27.5%}
  .ssprods__row{padding-top:100px;gap:26px}
  .ssprods__arrow{width:44px;height:44px}
  .prod__name{font-size:24px}
  /* reserve two lines for the sub so the CTA locks to the same spot on every
     card (based on the taller, 2-line cards) regardless of sub length */
  .prod__sub{min-height:42px}

  .ssbrand{display:block;min-height:0;padding:72px 0 62px}
  .ssbrand__art,.ssbrand::after{display:none}
  .ssbrand__mobimg{display:block;width:min(84%,380px);height:auto;margin:0 auto}
  .ssbrand__copy{padding:28px var(--pad) 8px;text-align:center}
  .ssbrand__copy .eyebrow{margin-bottom:14px}
  .ssbrand__sub,.ssbrand__desc{margin-left:auto;margin-right:auto}

  .sscats{padding:48px 0 56px}
  .sscats__lede{font-size:15px}
  .sscats__arrow{display:none}
  .sscats__row{gap:16px;padding:6px 2px 12px}
  .scap{flex-basis:78%}
}
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto}
  .sshero__scroll svg{animation:none}
}