/* Btwins theme — direction B (bold mono + orange).
   Loaded AFTER styles.css and only re-points the shared custom properties, so
   the two storefronts stay one codebase: no forked components, no forked CSS. */
:root{
  --brand:#FF5A1F;
  --brand-dk:#e04a12;
  --brand-ink:#c23f0e;
  --brand-soft:#ffede5;
  --on-brand:#FFFFFF;

  --navy:#111318;
  --navy-2:#1b1e25;
  --gold:#FF5A1F;

  --bg:#FFFFFF;
  --surface:#F6F5F3;
  --surface-2:#efedea;
  --ink:#111318;
  --muted:#6F6A63;
  --line:#E6E4E0;
}

/* The nav strip is solid ink on Btwins (Vintage keeps it light) — the black bar
   is what makes the mono+orange direction read at a glance. */
.nav{ background:#111318; border-bottom:0; }
.nav__link{ color:#c9ccd2; }
.nav__link:hover{ color:#fff; }
.nav__link--shop{ background:#FF5A1F; color:#fff; }
.nav__link--shop:hover{ background:#e04a12; color:#fff; }
.nav__cta{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,.34); }
.nav__cta:hover{ background:#FF5A1F; border-color:#FF5A1F; color:#fff; }
.nav .ico{ stroke:currentColor; }

/* Hero: Btwins leads with the products, not with a studio photo. */
.hero{ background:#111318; }
.hero::after{ display:none; }
.hero__eyebrow{ color:#FF5A1F; }

/* Slide/dot mechanics live in styles.css (shared with Vintage). Btwins only
   recolours the active dot to its accent. */
.hero__dot.is-active{ background:#FF5A1F; }

/* ============================================================================
   Btwins home. Vintage's home tells a studio's story; this one gets a shopper to
   the right shelf in as few decisions as possible. It does NOT talk down to that
   shopper: the catalogue is picked for people early in their setup, but the copy
   never says so — no "for beginners", no shop-by-budget row (owner, 19 Aug 2026).
   ========================================================================== */
.bhero{ background:#111318; color:#fff; padding:56px 0 64px; position:relative; overflow:hidden; }
/* พื้นหลังเปลี่ยนตามสินค้าที่กำลังโชว์ใน Product Hero — ทุกชั้นซ้อนกันแล้วเฟดด้วย opacity
   ภาพจึงไม่กระตุกตอนสลับ และไม่ต้องโหลดใหม่ระหว่างหมุน */
.bhero__bgs{ position:absolute; inset:0; z-index:0; }
.bhero__bg{
  position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:0; transition:opacity .8s ease;
}
.bhero__bg.is-active{ opacity:1; }
/* ม่านทึบด้านซ้ายให้โลโก้กับปุ่มอ่านออก แล้วค่อยจางไปทางขวาให้เห็นภาพสินค้า */
.bhero__scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(17,19,24,.97) 0%,  rgba(17,19,24,.93) 32%,
                           rgba(17,19,24,.70) 62%, rgba(17,19,24,.42) 100%),
    linear-gradient(180deg, rgba(17,19,24,.55) 0%, rgba(17,19,24,0) 26%);
}
.bhero__inner{ position:relative; z-index:2; }
@media (prefers-reduced-motion: reduce){ .bhero__bg{ transition:none; } }
.bhero__inner{ display:grid; grid-template-columns:1fr 380px; gap:56px; align-items:center; }
/* the two shops share an owner, so the Btwins home opens on a Btwins x Vintage
   lockup. Both marks are sized by HEIGHT, not width — their aspect ratios differ
   (3.125 vs 3.0) and matching widths would leave one visibly taller. */
.bhero__lockup{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.bhero__logo{ height:clamp(40px,4.6vw,58px); width:auto; display:block; }
.bhero__x{ font-size:clamp(16px,1.7vw,21px); color:rgba(255,255,255,.42); }
.bhero__title{ margin-top:26px; font-size:clamp(30px,3.6vw,46px); line-height:1.28; font-weight:700; }
.bhero__actions{ margin-top:28px; display:flex; flex-wrap:wrap; gap:12px; }
.btn--lg{ padding:15px 30px; font-size:16px; }
/* the card is a white panel inside a dark band — stop .bhero's white text
   colour cascading into it, or the product name is white-on-white */
.bhero__card{ margin:0; color:var(--ink); }
.bhero__card .hero__pname{ margin-top:14px; color:var(--ink); }
.bhero__card .hero__price{ margin:10px 0 16px; }
@media (max-width:900px){
  .bhero{ padding:38px 0 44px; }
  /* จอแคบ การ์ดสินค้าลงมาอยู่ใต้โลโก้ ม่านจึงต้องไล่จากบนลงล่างแทนซ้ายไปขวา */
  .bhero__scrim{ background:linear-gradient(180deg, rgba(17,19,24,.94) 0%, rgba(17,19,24,.86) 45%,
                                                    rgba(17,19,24,.72) 100%); }
  .bhero__inner{ grid-template-columns:1fr; gap:34px; }
  .bhero__lockup{ gap:14px; }
  .bhero__logo{ height:clamp(34px,8vw,46px); }
}

.section--tight{ padding-top:44px; padding-bottom:44px; }
.section__foot{ margin-top:28px; text-align:center; }
.btn--ghost{
  background:transparent; color:var(--ink); border:2px solid var(--line);
  padding:13px 26px; font-weight:600;
}
.btn--ghost:hover{ border-color:#FF5A1F; color:#FF5A1F; }

/* Btwins headings sit left-aligned and plain — no eyebrow labels, one size step */
.bhero + .section .section__title, .section__title{ letter-spacing:-.01em; }