/* ==========================================================
   MERINA — MIDNIGHT GOLD
   Design rationale:
   - Midnight navy connects directly to the supplied round logo.
   - Champagne gold is used sparingly for emphasis, keeping the site
     premium rather than ornamental.
   - The 1085×1451 target density is interpreted as editorial rhythm:
     large focal product moments + compact supporting modules.
   ========================================================== */

:root {
  --navy: #081a36;
  --navy-2: #0d2347;
  --gold: #d7b368;
  --gold-soft: #ead3a0;
  --ivory: #f5f0e6;
  --paper: #fbf8f2;
  --ink: #10141b;
  --muted: #6b7280;
  --line: rgba(16, 20, 27, .12);
  --shadow: 0 28px 70px rgba(8, 26, 54, .13);
  --radius-xl: 38px;
  --radius-lg: 28px;
  --radius-md: 20px;
  --content: min(1180px, calc(100vw - 40px));
  --header-h: 88px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 10% 0%, rgba(215, 179, 104, .12), transparent 30%),
    var(--paper);
  font-family: "Noto Sans Thai", "DM Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
}
body.sheet-open { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, select { font: inherit; }
button { cursor: pointer; }

.page-shell { min-height: 100vh; overflow: clip; }
.section-frame { width: var(--content); margin-inline: auto; }

.site-header {
  position: sticky;
  top: 14px;
  z-index: 50;
  width: var(--content);
  min-height: 70px;
  margin: 14px auto 0;
  padding: 10px 12px 10px 14px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  align-items: center;
  border: 1px solid rgba(255,255,255,.58);
  border-radius: 999px;
  background: rgba(251, 248, 242, .76);
  backdrop-filter: blur(18px);
  box-shadow: 0 12px 36px rgba(8, 26, 54, .08);
}

.brand { display: inline-flex; align-items: center; gap: 11px; min-width: 156px; }
.brand img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px rgba(215,179,104,.35); }
.brand-wordmark { font-family: "Playfair Display", serif; font-size: 1.05rem; letter-spacing: .16em; }
.desktop-nav { justify-self: center; display: flex; gap: 24px; font-size: .84rem; color: #344054; }
.desktop-nav a { transition: color .25s ease, transform .25s ease; }
.desktop-nav a:hover { color: var(--navy); transform: translateY(-1px); }
.header-actions { display: flex; align-items: center; gap: 8px; }
.lang-toggle, .bag-button {
  border: 0;
  border-radius: 999px;
  background: transparent;
  padding: 10px 13px;
  color: var(--navy);
}
.lang-toggle { font-size: .78rem; letter-spacing: .08em; }
.lang-toggle .lang-active { font-weight: 700; }
.lang-toggle .slash { opacity: .35; padding-inline: 3px; }
.bag-button { display: inline-flex; align-items: center; gap: 8px; background: var(--navy); color: white; padding-inline: 16px; }
.bag-count { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--gold); color: var(--navy); font-weight: 700; font-size: .75rem; }

.hero {
  min-height: 820px;
  padding: 66px 0 38px;
  display: grid;
  grid-template-columns: .88fr 1.12fr;
  gap: 54px;
  align-items: center;
}
.hero-copy { padding: 48px 0 42px; position: relative; z-index: 2; }
.eyebrow { margin: 0 0 14px; color: var(--navy); font-family: "DM Sans", sans-serif; font-size: .73rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.eyebrow.light { color: var(--gold-soft); }
.hero h1, .section-heading h2, .trade-copy h2, .finder-intro h2, .contact-card h2 {
  margin: 0;
  font-family: "Playfair Display", "Noto Sans Thai", serif;
  font-weight: 600;
  line-height: .98;
  color: var(--navy);
}
.hero h1 { font-size: clamp(4.2rem, 7vw, 7.4rem); letter-spacing: -.055em; }
.hero h1 span, .hero h1 em { display: block; }
.hero h1 em { color: var(--gold); font-style: normal; margin-left: 16%; }
.hero-text { max-width: 610px; margin: 28px 0 0; color: #485467; font-size: 1.03rem; line-height: 1.8; }
.hero-cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.btn { min-height: 50px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 999px; padding: 0 22px; font-size: .85rem; font-weight: 700; letter-spacing: .03em; transition: transform .25s ease, box-shadow .25s ease, background .25s ease; }
.btn:hover { transform: translateY(-2px); }
.btn-gold { background: var(--gold); color: var(--navy); box-shadow: 0 13px 30px rgba(215, 179, 104, .28); }
.btn-ghost { border-color: rgba(8,26,54,.18); color: var(--navy); background: rgba(255,255,255,.42); }
.btn-ivory { background: var(--ivory); color: var(--navy); }
.btn.full { width: 100%; }
.hero-metrics { margin-top: 54px; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
.hero-metrics div { padding-top: 14px; border-top: 1px solid var(--line); }
.hero-metrics strong, .hero-metrics span { display: block; }
.hero-metrics strong { color: var(--navy); font-family: "DM Sans", sans-serif; }
.hero-metrics span { margin-top: 5px; color: var(--muted); font-size: .78rem; }

.hero-stage { position: relative; min-height: 670px; }
.hero-image-wrap {
  position: absolute;
  inset: 36px 0 12px 54px;
  border-radius: 48% 48% 30px 30px / 30% 30% 28px 28px;
  overflow: hidden;
  background: #e7ded0;
  box-shadow: var(--shadow);
}
.hero-image-wrap::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg,transparent 52%,rgba(8,26,54,.16)); pointer-events:none; }
.hero-image-wrap img { width: 100%; height: 100%; object-fit: contain; object-position:center; image-rendering:auto; }
.stage-card { position: absolute; right: -18px; bottom: 62px; width: 255px; padding: 20px; border-radius: 22px; background: rgba(8,26,54,.93); color: white; box-shadow: 0 28px 60px rgba(8,26,54,.25); backdrop-filter: blur(12px); }
.stage-card span, .stage-card strong, .stage-card b { display:block; }
.stage-card span { color: var(--gold-soft); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
.stage-card strong { margin-top: 8px; font-family: "Playfair Display",serif; font-size: 1.35rem; font-weight: 500; }
.stage-card b { margin-top: 10px; color: var(--gold); }
.stage-index { position: absolute; top: 0; right: 28px; font: 700 .8rem/1 "DM Sans",sans-serif; letter-spacing:.15em; color:var(--navy); }
.stage-orbit { position:absolute; border: 1px solid rgba(215,179,104,.55); border-radius:50%; pointer-events:none; }
.orbit-a { width:130px; height:130px; left:10px; top:150px; }
.orbit-b { width:56px; height:56px; left:46px; top:187px; background: rgba(215,179,104,.08); }

.section-heading { padding: 36px 0 24px; display:flex; justify-content:space-between; gap:30px; align-items:end; }
.section-heading.compact { padding-top: 12px; }
.section-heading h2, .trade-copy h2, .finder-intro h2, .contact-card h2 { font-size: clamp(2.6rem, 4.4vw, 5rem); letter-spacing:-.04em; }
.section-heading > p { max-width:460px; margin:0 0 6px; color:var(--muted); line-height:1.7; }

.category-section { padding: 14px 0 70px; }
.category-rail { display:flex; gap:14px; overflow-x:auto; scrollbar-width:none; scroll-snap-type:x proximity; padding-bottom:8px; }
.category-rail::-webkit-scrollbar { display:none; }
.category-card { flex: 0 0 188px; height: 245px; position:relative; overflow:hidden; scroll-snap-align:start; border-radius:28px; background:#ddd; border:0; padding:0; color:white; text-align:left; }
.category-card img { width:100%; height:100%; object-fit:cover; object-position:center; transition: transform .45s ease; image-rendering:auto; }
.category-card::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 48%,rgba(8,26,54,.72)); }
.category-card span { position:absolute; z-index:2; left:16px; bottom:14px; font-weight:600; }
.category-card:hover img { transform:scale(1.05); }

.collection-section { padding: 24px 0 80px; }
.product-grid { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:18px; }
.product-card { grid-column:span 4; border-radius:28px; overflow:hidden; background:rgba(255,255,255,.76); border:1px solid rgba(8,26,54,.08); box-shadow:0 12px 32px rgba(8,26,54,.06); }
.product-card:nth-child(5n+1) { grid-column:span 7; }
.product-card:nth-child(5n+2) { grid-column:span 5; }
.product-media { aspect-ratio: 1 / 1; overflow:hidden; background:#f7f4ed; position:relative; }
.product-media img { width:100%; height:100%; object-fit:contain; object-position:center; transition: transform .45s ease; image-rendering:auto; }
.product-card:hover .product-media img { transform:scale(1.035); }
.product-badge { position:absolute; top:12px; left:12px; z-index:2; padding:8px 10px; border-radius:999px; background:rgba(245,240,230,.92); color:var(--navy); font-size:.7rem; font-weight:700; }
.product-body { padding:18px; }
.product-meta { display:flex; justify-content:space-between; gap:20px; align-items:start; }
.product-meta small { display:block; color:var(--muted); text-transform:uppercase; letter-spacing:.09em; font-size:.68rem; }
.product-meta h3 { margin:5px 0 0; font-size:1.04rem; color:var(--navy); }
.product-price { font-weight:800; color:var(--navy); white-space:nowrap; }
.product-actions { display:flex; gap:8px; margin-top:16px; }
.product-actions select { flex:1; min-width:0; border:1px solid var(--line); border-radius:999px; background:white; padding:0 12px; }
.product-actions button { flex:1.1; border:0; border-radius:999px; min-height:42px; background:var(--navy); color:white; font-weight:700; }

.trade-desk { padding: 50px 0 90px; }
.trade-panel { position:relative; overflow:hidden; border-radius:var(--radius-xl); background:var(--navy); color:white; padding:56px; display:grid; grid-template-columns:.9fr 1.1fr; gap:46px; box-shadow:var(--shadow); }
.trade-panel::before { content:""; position:absolute; width:420px; height:420px; border:1px solid rgba(215,179,104,.24); border-radius:50%; right:-120px; top:-160px; }
.trade-copy h2 { color:white; }
.trade-copy p:not(.eyebrow) { margin:22px 0 28px; color:#c7d0dc; line-height:1.8; }
.trade-services { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; align-items:stretch; }
.trade-services article { padding:22px 18px; border:1px solid rgba(255,255,255,.14); border-radius:24px; background:rgba(255,255,255,.05); backdrop-filter:blur(8px); }
.trade-services span { color:var(--gold); font:700 .75rem/1 "DM Sans",sans-serif; letter-spacing:.12em; }
.trade-services h3 { margin:30px 0 8px; font-size:1rem; }
.trade-services p { margin:0; color:#afbac9; font-size:.82rem; line-height:1.6; }

.finder-section { padding: 10px 0 90px; }
.finder-card { border-radius:var(--radius-xl); background:linear-gradient(135deg,#f1e8da,#fbf8f2); padding:44px; display:grid; grid-template-columns:1fr 1.05fr; gap:42px; border:1px solid rgba(8,26,54,.08); }
.finder-intro p:not(.eyebrow) { color:var(--muted); max-width:520px; line-height:1.8; }
.finder-controls { display:grid; grid-template-columns:1fr 1fr; gap:14px; align-content:center; }
.finder-controls label { display:grid; gap:7px; color:#475467; font-size:.78rem; }
.finder-controls select { min-height:50px; border:1px solid rgba(8,26,54,.12); border-radius:16px; background:white; padding:0 14px; color:var(--navy); }
.text-button { border:0; background:transparent; color:var(--navy); text-decoration:underline; }

.contact-section { padding: 8px 0 70px; }
.contact-grid { display:grid; grid-template-columns:.82fr 1.18fr; border-radius:var(--radius-xl); overflow:hidden; min-height:560px; box-shadow:var(--shadow); }
.contact-card { background:var(--navy); color:white; padding:54px; }
.contact-card h2 { color:white; }
.contact-lead { margin:20px 0 34px; color:#bfc9d6; line-height:1.8; }
.contact-list { display:grid; gap:12px; }
.contact-list a, .contact-list > div { display:grid; gap:4px; padding:14px 0; border-top:1px solid rgba(255,255,255,.14); }
.contact-list span { color:var(--gold-soft); font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; }
.contact-list strong { font-weight:500; line-height:1.5; }
.map-card { position:relative; min-height:100%; background:#d9d7d1; }
.map-card iframe { width:100%; height:100%; min-height:560px; border:0; filter:saturate(.65) contrast(1.04); }
.map-caption { position:absolute; left:20px; right:20px; bottom:20px; display:flex; justify-content:space-between; gap:16px; padding:14px 16px; border-radius:18px; background:rgba(245,240,230,.92); color:var(--navy); backdrop-filter:blur(12px); font-size:.8rem; }

.site-footer { padding:50px 0 70px; display:grid; grid-template-columns:1fr auto; gap:30px; align-items:end; border-top:1px solid var(--line); }
.footer-wordmark { font-family:"Playfair Display",serif; font-size:clamp(4rem,11vw,9rem); line-height:.8; letter-spacing:-.04em; color:var(--navy); }
.footer-meta { text-align:right; color:var(--muted); font-size:.8rem; line-height:1.7; }

/* Bottom sheet is kept as a single high-priority interaction surface: clear, touch-safe, and always tied to live cart totals. */
.sheet-backdrop { position:fixed; inset:0; z-index:80; background:rgba(3,11,24,.48); backdrop-filter:blur(4px); }
.cart-sheet { position:fixed; left:50%; bottom:0; z-index:90; width:min(760px,100%); max-height:min(82vh,780px); transform:translate(-50%,110%); transition:transform .38s cubic-bezier(.22,.85,.32,1); background:var(--paper); border-radius:32px 32px 0 0; box-shadow:0 -28px 80px rgba(8,26,54,.25); padding:10px 20px max(20px,env(safe-area-inset-bottom)); display:grid; grid-template-rows:auto auto minmax(0,1fr) auto; }
.cart-sheet.open { transform:translate(-50%,0); }
.sheet-handle { width:52px; height:5px; border-radius:999px; background:#d5d1ca; margin:3px auto 12px; }
.cart-head { display:flex; justify-content:space-between; gap:20px; align-items:center; padding:0 4px 10px; }
.cart-head h2 { margin:0; color:var(--navy); }
.icon-button { width:42px; height:42px; border:0; border-radius:50%; background:white; color:var(--navy); font-size:1.5rem; }
.cart-items { overflow:auto; display:grid; gap:10px; padding:4px; }
.cart-item { display:grid; grid-template-columns:74px 1fr auto; gap:12px; align-items:center; padding:10px; border-radius:18px; background:white; border:1px solid rgba(8,26,54,.08); }
.cart-item img { width:74px; height:74px; border-radius:14px; object-fit:cover; }
.cart-item h4 { margin:0 0 3px; font-size:.92rem; color:var(--navy); }
.cart-item p { margin:0; color:var(--muted); font-size:.74rem; }
.qty-control { display:flex; align-items:center; gap:8px; margin-top:8px; }
.qty-control button { width:26px; height:26px; border-radius:50%; border:1px solid var(--line); background:white; }
.remove-item { margin-top:7px; border:0; background:transparent; padding:0; color:#9d4a4a; font-size:.72rem; }
.cart-item-price { font-weight:800; color:var(--navy); }
.cart-empty { padding:40px 0; text-align:center; color:var(--muted); }
.cart-summary { padding:14px 4px 0; border-top:1px solid var(--line); }
.cart-summary > div { display:flex; justify-content:space-between; margin-bottom:12px; color:var(--navy); }
.microcopy { margin:8px 0 0; text-align:center; color:var(--muted); font-size:.7rem; }
.toast { position:fixed; left:50%; bottom:30px; z-index:120; transform:translate(-50%,30px); opacity:0; pointer-events:none; background:var(--navy); color:white; padding:12px 16px; border-radius:999px; transition:.25s ease; font-size:.8rem; box-shadow:var(--shadow); }
.toast.show { transform:translate(-50%,0); opacity:1; }

.reveal { opacity:0; transform:translateY(22px); transition:opacity .75s ease,transform .75s ease; }
.reveal.visible { opacity:1; transform:none; }

@media (max-width: 980px) {
  :root { --content:min(100% - 28px, 860px); }
  .desktop-nav { display:none; }
  .site-header { grid-template-columns:1fr auto; }
  .hero { grid-template-columns:1fr; min-height:auto; padding-top:44px; }
  .hero-copy { padding-bottom:0; }
  .hero-stage { min-height:620px; }
  .trade-panel, .finder-card, .contact-grid { grid-template-columns:1fr; }
  .trade-services { grid-template-columns:repeat(3,1fr); }
  .map-card iframe { min-height:430px; }
  .site-footer { grid-template-columns:1fr; }
  .footer-meta { text-align:left; }
}

@media (max-width: 700px) {
  :root { --content:calc(100% - 20px); }
  .site-header { top:8px; margin-top:8px; padding:8px 9px; min-height:62px; }
  .brand img { width:42px; height:42px; }
  .brand-wordmark { display:none; }
  .lang-toggle { padding-inline:8px; }
  .bag-button { padding-inline:13px; }
  .hero { padding-top:26px; gap:22px; }
  .hero h1 { font-size:clamp(3.5rem,18vw,5.8rem); }
  .hero h1 em { margin-left:8%; }
  .hero-text { font-size:.95rem; }
  .hero-metrics { margin-top:34px; gap:9px; }
  .hero-metrics span { font-size:.67rem; }
  .hero-stage { min-height:500px; }
  .hero-image-wrap { inset:16px 0 10px 22px; border-radius:42% 42% 26px 26px / 26% 26% 24px 24px; }
  .stage-card { right:8px; bottom:28px; width:220px; }
  .stage-index { right:10px; }
  .section-heading { align-items:start; flex-direction:column; gap:10px; padding-top:24px; }
  .section-heading h2, .trade-copy h2, .finder-intro h2, .contact-card h2 { font-size:clamp(2.5rem,13vw,4rem); }
  .category-card { flex-basis:152px; height:205px; }
  .product-grid { grid-template-columns:1fr 1fr; gap:10px; }
  .product-card, .product-card:nth-child(5n+1), .product-card:nth-child(5n+2) { grid-column:auto; border-radius:20px; }
  .product-body { padding:12px; }
  .product-meta { display:grid; gap:8px; }
  .product-actions { display:grid; }
  .product-actions select, .product-actions button { min-height:40px; }
  .trade-panel, .finder-card, .contact-card { padding:28px 22px; border-radius:28px; }
  .trade-services { grid-template-columns:1fr; }
  .finder-controls { grid-template-columns:1fr; }
  .contact-grid { border-radius:28px; }
  .map-caption { flex-direction:column; gap:4px; }
  .footer-wordmark { font-size:23vw; }
  .cart-sheet { border-radius:26px 26px 0 0; }
  .cart-item { grid-template-columns:62px 1fr; }
  .cart-item img { width:62px; height:62px; }
  .cart-item-price { grid-column:2; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation:none !important; transition-duration:.01ms !important; }
  .reveal { opacity:1; transform:none; }
}