/* ============================================================
   skin-layout-b structural styles (PROTOTYPE).
   On approval this becomes skins/skin-layout-b/assets/css/skin.css,
   enqueued AFTER the base "coway" stylesheet in the skin functions.php.
   Uses ONLY base tokens (--accent, --ink, --bg, --surface, --r-card...).
   Brand (colors/type/logo) stays in base; this file changes STRUCTURE only.
   ============================================================ */

/* ---------- Home: full-viewport hero ---------- */
.hero-b{position:relative;min-height:min(90vh,860px);display:grid;place-items:center;
  text-align:center;overflow:hidden;isolation:isolate;}
.hero-b__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;}
.hero-b::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(6,22,34,.50) 0%,rgba(6,22,34,.74) 100%);}
.hero-b__content{max-width:780px;padding:128px 24px 104px;color:#fff;}
.hero-b__content .h-display{color:#fff;}
.hero-b__content .lead{color:rgba(255,255,255,.88);margin-inline:auto;}
.hero-b .hero-actions{justify-content:center;}
.scroll-cue{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);
  color:rgba(255,255,255,.85);font-size:1.7rem;line-height:1;animation:cueBob 1.8s ease-in-out infinite;}
@keyframes cueBob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,9px)}}

/* ---------- Interior page hero (category / product family) ---------- */
.page-hero-b{position:relative;display:flex;align-items:center;min-height:min(62vh,540px);
  overflow:hidden;isolation:isolate;}
.page-hero-b__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;}
.page-hero-b::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(6,22,34,.84) 0%,rgba(6,22,34,.56) 46%,rgba(6,22,34,.12) 100%);}
.page-hero-b .wrap{width:100%;}
.page-hero-b__content{max-width:620px;color:#fff;padding-block:clamp(40px,6vw,72px);}
.page-hero-b__content h1{color:#fff;font-size:clamp(2rem,3.6vw,3.05rem);font-weight:800;
  line-height:1.08;margin:10px 0 14px;max-width:16ch;}
.page-hero-b__content .lead{color:rgba(255,255,255,.88);}

/* ---------- Trust strip (replaces floating stats panel) ---------- */
.trust-strip{background:var(--surface);border-bottom:1px solid var(--line);}
.trust-strip .wrap{display:flex;flex-wrap:wrap;gap:20px 32px;justify-content:space-between;padding-block:26px;}
.trust-item{display:flex;align-items:center;gap:14px;flex:1 1 210px;}
.trust-item i{font-size:1.55rem;color:var(--accent);background:var(--accent-soft);
  width:50px;height:50px;display:grid;place-items:center;border-radius:14px;flex:none;}
.trust-item strong{display:block;font-size:1.2rem;color:var(--ink);line-height:1.05;}
.trust-item span{font-size:.84rem;color:var(--ink-2);line-height:1.25;display:block;margin-top:2px;}

/* ---------- Showcase band (home categories + category featured model) ---------- */
.showcase-band{padding-block:clamp(56px,7.5vw,108px);}
.showcase-band.band--alt{background:var(--surface);border-block:1px solid var(--line);}
.band-inner{display:grid;grid-template-columns:0.92fr 1.08fr;gap:clamp(28px,4vw,60px);align-items:center;}
.band--flip .band-media{order:2;}
.band-media{position:relative;border-radius:var(--r-card);overflow:hidden;aspect-ratio:4/3.2;
  box-shadow:0 24px 60px -28px rgba(7,28,42,.45);}
.band-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease;}
.showcase-band:hover .band-media img{transform:scale(1.03);}
.band-media .band-chip{position:absolute;left:16px;top:16px;background:rgba(255,255,255,.92);
  color:var(--accent-strong);font-weight:700;font-size:.78rem;padding:7px 14px;border-radius:999px;
  backdrop-filter:blur(4px);}
.band-body .h-section{margin:0 0 10px;}
.band-meta{font-weight:650;color:var(--accent);margin:0 0 18px;}
.band-meta .sep{color:var(--line);margin-inline:8px;}
.band-products{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));
  gap:16px;margin:22px 0 26px;}
.band-products .product-card .product-body{padding:14px 14px 16px;}
.band-products .product-card h3{font-size:1.02rem;}
.band-products .product-card .product-body p{display:none;} /* compact cards in band */
.band-actions{display:flex;gap:12px;flex-wrap:wrap;}

/* ---------- Product top, immersive (single-product page) ---------- */
.pd-hero-b{background:var(--surface);border-bottom:1px solid var(--line);
  padding-block:clamp(24px,3.5vw,44px);}
.pd-hero-b .pd-info{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-card);
  padding:clamp(22px,3vw,32px);box-shadow:0 26px 64px -38px rgba(7,28,42,.5);
  align-self:start;position:sticky;top:88px;}

/* ---------- Section-dot scroll nav (home only) ---------- */
.section-dots{position:fixed;right:18px;top:50%;transform:translateY(-50%);z-index:60;
  display:flex;flex-direction:column;gap:13px;}
.section-dots a{position:relative;width:11px;height:11px;border-radius:999px;
  background:rgba(16,34,46,.22);transition:transform .2s,background .2s;}
.section-dots a:hover,.section-dots a.is-active{background:var(--accent);transform:scale(1.25);}
.section-dots a::after{content:attr(data-label);position:absolute;right:22px;top:50%;
  transform:translateY(-50%);white-space:nowrap;background:var(--ink);color:#fff;
  font-size:.72rem;font-weight:600;padding:4px 9px;border-radius:7px;opacity:0;pointer-events:none;
  transition:opacity .18s;}
.section-dots a:hover::after{opacity:1;}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .section-dots{display:none;}
  .band-inner{grid-template-columns:1fr;gap:28px;}
  .band--flip .band-media{order:0;}
  .band-media{aspect-ratio:16/10;}
  .pd-hero-b .pd-info{position:static;}
}
@media (prefers-reduced-motion:reduce){
  .scroll-cue{animation:none;}
  .showcase-band:hover .band-media img{transform:none;}
}