/* ==========================================================================
   SEGNO — Design System
   Timeless, elegant, simple, classy. Neutral linen ground, deep bottle-green
   signature, muted brass accent. Serif display (Fraunces) + humanist sans
   (Work Sans) for the mix of formal & everyday the brand stands for.
   ========================================================================== */

:root {
  --canvas: #FFFFFF;
  --canvas-alt: #F7F3EE;
  --canvas-alt2: #FAF8F4;
  --ink: #1A1A1A;
  --ink-soft: #6B6558;
  --signature: #1A1A1A;
  --signature-dark: #000000;
  --brass: #A67C52;
  --brass-light: #C8B08A;
  --clay: #B5654A;
  --line: #EDE5D7;
  --white: #FFFFFF;

  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --container: 1240px;
  --radius: 3px;
  --radius-lg: 16px;
  --shadow-soft: 0 8px 24px -12px rgba(212,185,138,0.25);
  --shadow-card: 0 18px 40px -22px rgba(28,33,24,0.14);
  --shadow-lift: 0 26px 60px -24px rgba(28,33,24,0.22);

  /* ---------------- Brand Color Collection (reference tokens) ----------------
     Ditambahkan sebagai token warna tambahan untuk dipakai di fitur baru
     (mis. Shop by Color Theme, admin color picker, dsb). Variable di atas
     (--canvas, --ink, --brass, dst.) TIDAK diubah supaya tampilan yang sudah
     ada tetap sama persis. */

  /* 01. Core Neutral Palette (Foundation) */
  --c-white: #FFFFFF; --c-ivory: #F7F4EC; --c-cream: #F2E9D8; --c-beige: #DCCBB0;
  --c-taupe: #B8A897; --c-mocha: #8E7866; --c-charcoal: #3A3A3C; --c-black: #111111;

  /* 02. Accent Green Palette */
  --c-sage: #A7B89D; --c-olive: #7AB45C; --c-sea-green: #5FAF9D; --c-forest: #2E4D3A; --c-emerald: #1E7A6B;

  /* 03. Accent Blue Palette */
  --c-sky-blue: #B9D4E8; --c-powder-blue: #A5C4E6; --c-dusty-blue: #7FA1C3; --c-navy: #1E2A44; --c-steel-blue: #6D7F8F;

  /* 04. Accent Pink Palette */
  --c-blush: #D7B6B6; --c-dusty-pink: #D7B6B6; --c-mauve: #C98DA0; --c-rose: #B76E79; --c-berry: #8E4B5E;

  /* 05. Accent Brown Palette */
  --c-caramel: #D6A77A; --c-camel: #C18F5B; --c-cocoa: #7D5A4A; --c-chocolate: #6D4738; --c-dark-brown: #3E2C23;

  /* 06. Accent Yellow & Gold Palette */
  --c-butter: #FFF2B2; --c-mustard: #D9A017; --c-honey: #E3B562; --c-champagne: #E8D5B7; --c-gold: #D4AF37;

  /* 07. Metallic Palette (Jewelry) — Core Palette, Metal */
  --c-silver: #C0C0C0; --c-white-gold: #E6E6E6; --c-yellow-gold: #D4AF37; --c-rose-gold: #E0B7A1; --c-champagne-gold: #F8F8F0;

  /* 08. Gemstone Color Palette (Jewelry) — Accent Palette, Gemstone */
  --c-pearl: #F8F8F0; --c-crystal: #E6E6E6; --c-smoky-quartz: #7A6A5E; --c-amethyst: #7D5BA6; --c-sapphire: #1F4E79; --c-ruby: #8B1E3F; --c-gemstone-emerald: #2E7D5B;
  --c-mist-grey: #BDBDBD; --c-onyx: #0D0D0D;

  /* 09. Collection Palette (by mood theme) */
  --theme-earth-1: #F2E9D8; --theme-earth-2: #E6D6B8; --theme-earth-3: #C8B6A0; --theme-earth-4: #7AB45C; --theme-earth-5: #8B5E4A;
  --theme-ocean-1: #B7D4F0; --theme-ocean-2: #A5C4E6; --theme-ocean-3: #5A6C7D; --theme-ocean-4: #1E2A44; --theme-ocean-5: #FFFFFF;
  --theme-bloom-1: #F4C7CE; --theme-bloom-2: #E8A7B2; --theme-bloom-3: #C98DA0; --theme-bloom-4: #F2E9D8; --theme-bloom-5: #EAD7B8;
  --theme-desert-1: #D6A77A; --theme-desert-2: #C18F5B; --theme-desert-3: #A68B74; --theme-desert-4: #6D4738; --theme-desert-5: #3E2C23;
  --theme-midnight-1: #111111; --theme-midnight-2: #3A3A3C; --theme-midnight-3: #5A6C7D; --theme-midnight-4: #D4AF37; --theme-midnight-5: #E6E666;

  /* 10. Seasonal Palette (Fashion + Jewelry) */
  --season-spring-f1: #E6DFF5; --season-spring-f2: #FFF2B2; --season-spring-f3: #CDE8D6; --season-spring-f4: #F6D6E0; --season-spring-f5: #D8E8F5;
  --season-spring-j1: #A3D977; --season-spring-j2: #9ED7D7; --season-spring-j3: #F7C6D7; --season-spring-j4: #E6E6FA; --season-spring-j5: #F4F4EC;

  --season-summer-f1: #FF8A73; --season-summer-f2: #4DB8B6; --season-summer-f3: #EBDCC1; --season-summer-f4: #7FB3D5; --season-summer-f5: #D3C6EA;
  --season-summer-j1: #FF8FA3; --season-summer-j2: #40BFC1; --season-summer-j3: #87CEEB; --season-summer-j4: #D1D1D1; --season-summer-j5: #F7D358;

  --season-autumn-f1: #C65D3A; --season-autumn-f2: #E07A5F; --season-autumn-f3: #D9A017; --season-autumn-f4: #2F4F2F; --season-autumn-f5: #6B4F3B;
  --season-autumn-j1: #8E1B1B; --season-autumn-j2: #B8860B; --season-autumn-j3: #D1A15E; --season-autumn-j4: #6E4E3E; --season-autumn-j5: #FFB000;

  --season-winter-f1: #800020; --season-winter-f2: #B5D8FF; --season-winter-f3: #5C2D5C; --season-winter-f4: #A6A6AB; --season-winter-f5: #0C0C0C;
  --season-winter-j1: #0F1E7A; --season-winter-j2: #2B2B2B; --season-winter-j3: #B3002D; --season-winter-j4: #F5F5F5; --season-winter-j5: #111111;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background-color: #FFFFFF;
  /* Putih clean, gradasi & vignette sangat halus (bukan pattern dekoratif
     berulang) -- whitespace sendiri yang jadi "dekorasi", sesuai arahan
     quiet luxury: 1) gradasi nyaris putih buat kedalaman halus, 2) vignette
     emas & signature tipis yang nempel viewport (fixed) di pojok atas &
     bawah -- kesan "boutique spotlight" tanpa menutupi putihnya jadi
     kuning/krem. */
  background-image:
    linear-gradient(180deg, #FFFFFF 0%, #FEFDFB 55%, #FCFAF6 100%),
    radial-gradient(ellipse 1300px 680px at 50% -6%, rgba(184,148,100,0.10) 0%, transparent 62%),
    radial-gradient(ellipse 1100px 620px at 50% 106%, rgba(26,26,26,0.045) 0%, transparent 62%);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size: 100% 100%, 100vw 100vh, 100vw 100vh;
  background-position: center, center top, center bottom;
  background-attachment: scroll, fixed, fixed;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

/* Faint fixed depth blobs — glow emas & signature hijau tua yang sangat
   tipis, cukup buat kesan "boutique spotlight" tanpa bikin dasar putih
   kelihatan kuning/krem dari jauh. */
body::before,
body::after {
  content: "";
  position: fixed;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(110px);
  opacity: 0.45;
}
body::before {
  width: 46vw; height: 46vw; max-width: 660px; max-height: 660px;
  top: -16vw; right: -14vw;
  background: radial-gradient(circle, rgba(212,175,55,0.14) 0%, rgba(166,130,79,0.10) 45%, transparent 72%);
}
body::after {
  width: 40vw; height: 40vw; max-width: 580px; max-height: 580px;
  bottom: 6vh; left: -16vw;
  background: radial-gradient(circle, rgba(35,48,31,0.09) 0%, transparent 72%);
}
.site-header, main, .site-footer { position: relative; z-index: 1; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass);
  font-weight: 600;
  position: relative;
  padding-bottom: 12px;
}
.eyebrow::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 42px;
  height: 1px;
  background: linear-gradient(90deg, var(--brass-light), transparent);
}
.eyebrow.no-line { padding-bottom: 0; }
.eyebrow.no-line::after { display: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 0.4em;
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(2.4rem, 4vw, 3.6rem); font-weight: 500; }
h2 { font-size: clamp(1.7rem, 2.6vw, 2.3rem); font-weight: 500; }
h3 { font-size: 1.3rem; }

p { margin: 0 0 1em; color: var(--ink-soft); }

/* ---------------- Buttons ---------------- */
.btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 30px;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease, color .25s ease;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -14px rgba(28,33,24,0.4);
}
.btn:active { transform: translateY(-1px); }
.btn::after {
  content: '';
  position: absolute;
  top: 0; left: -60%;
  width: 35%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.55), transparent);
  transform: skewX(-20deg);
  transition: left .55s ease;
  pointer-events: none;
}
.btn:hover::after { left: 130%; }
.btn-primary { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn-primary:hover { background: linear-gradient(90deg, var(--brass-light), var(--brass)); border-color: var(--brass); color: var(--ink); }
.btn-outline { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn-outline:hover { background: linear-gradient(90deg, var(--brass-light), var(--brass)); border-color: var(--brass); color: var(--ink); }
.btn-block { width: 100%; }
.btn:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }

/* ---------------- Preloader (layar loading logo) ---------------- */
.site-preloader {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  background: var(--canvas);
  opacity: 1; transition: opacity .5s ease;
}
.site-preloader.is-hidden { opacity: 0; pointer-events: none; }
.preloader-logo { width: 132px; height: 132px; object-fit: contain; animation: preloaderPulse 1.4s ease-in-out infinite; }
.preloader-wordmark {
  font-family: var(--font-display); font-size: 40px; font-weight: 600; color: var(--signature);
  letter-spacing: 0.02em; animation: preloaderPulse 1.4s ease-in-out infinite;
}
.preloader-bar { width: 120px; height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; display: block; }
.preloader-bar-fill {
  display: block; width: 40%; height: 100%; background: var(--brass);
  animation: preloaderSlide 1.1s ease-in-out infinite;
}
@keyframes preloaderPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.7; transform: scale(0.96); } }
@keyframes preloaderSlide { 0% { transform: translateX(-120%); } 100% { transform: translateX(360%); } }
@media (prefers-reduced-motion: reduce) {
  .preloader-logo, .preloader-wordmark, .preloader-bar-fill { animation: none; }
}
@media (max-width: 480px) {
  .preloader-logo { width: 100px; height: 100px; }
  .preloader-wordmark { font-size: 32px; }
}

/* ---------------- Header ---------------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(0,0,0,0.05);
  transition: border-color .3s ease;
}
.site-header.is-scrolled { border-bottom-color: var(--line); }
.header-bar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: nowrap; gap: 20px;
  padding: 17px 40px;
  max-width: 1240px; margin: 0 auto;
  position: relative;
  transition: padding .2s ease;
}
@media (min-width: 981px) {
  .header-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
  .header-bar .logo { justify-self: start; }
  .header-bar .main-nav { justify-self: center; }
  .header-bar .header-actions { justify-self: end; }
}
.logo {
  font-family: var(--font-display);
  font-size: 23px; font-weight: 600; letter-spacing: 0.02em;
  color: var(--signature);
  display: flex; align-items: center; gap: 10px;
}
.logo-mark { width: 30px; height: 30px; object-fit: contain; display: block; }
/* Kalau file logo yang di-upload admin backgroundnya putih solid (bukan PNG
   transparan), mix-blend-mode:multiply bikin bagian putih itu otomatis
   "menyatu"/transparan terhadap background terang di belakangnya (header
   normal & header yang sudah di-scroll) -- jadi biarpun logo aslinya bukan
   file transparan, kotak putihnya tidak lagi kelihatan di sini. Ini TIDAK
   dipasang di footer (background gelap) ataupun header-overlay yang belum
   discroll (background foto, kadang gelap kadang terang) karena di kondisi
   gelap trik ini bisa malah bikin garis logo ikut hampir tak terlihat --
   utk 2 konteks itu tetap pakai treatment lama (kartu putih di footer,
   invert+drop-shadow di header-overlay) yang lebih aman di background gelap. */
.site-header:not(.header-overlay) .logo-mark,
.site-header.header-overlay.is-scrolled .logo-mark {
  mix-blend-mode: multiply;
}
/* CATATAN JUJUR (update setelah 2x percobaan): mix-blend-mode TERBUKTI gak
   bisa diandalkan buat 2 konteks background gelap/foto (footer & navbar
   transparan di atas hero) -- di navbar kotaknya tetap kelihatan (header
   overlay posisinya "absolute" yang bikin browser gak bisa nge-blend logo
   tembus ke foto hero di belakangnya), dan di footer malah kebalik: garis
   logo yang warnanya gelap jadi "ketelan" background footer yang juga gelap
   (gelap ketemu gelap = nyaris gak kelihatan). Jadi utk 2 konteks itu,
   dipakai badge bulat kecil semi-transparan yang DIJAMIN selalu kelihatan
   apa pun warna di belakangnya -- bukan kotak putih polos, tapi badge bulat
   halus (kayak emblem/segel), jadi keliatan disengaja bukan bug.
   Solusi yang BENERAN menghilangkan background sepenuhnya di semua kondisi:
   upload ulang logo sebagai PNG transparan dengan warna garis TERANG
   (emas/putih), lewat Admin > Pengaturan -- itu satu-satunya cara yang
   pasti berhasil, CSS sudah mentok di titik ini. */
.site-footer .logo-mark,
.site-header.header-overlay .logo-mark {
  background: rgba(255,255,255,0.92);
  border-radius: 8px;
  padding: 4px;
  box-sizing: border-box;
}
.main-nav { display: flex; align-items: center; gap: 32px; }
.main-nav a {
  position: relative;
  font-size: 12px; letter-spacing: 0.09em; text-transform: uppercase;
  font-weight: 500; color: var(--ink); white-space: nowrap;
  padding-bottom: 4px; border-bottom: 1px solid transparent;
  opacity: 0.82; transition: opacity .25s ease, color .25s ease;
}
.main-nav a:hover, .main-nav a.active { opacity: 1; }
.main-nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--brass); transform: scaleX(0); transform-origin: center;
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.main-nav a:hover::after, .main-nav a.active::after { transform: scaleX(1); }
.main-nav a:hover, .main-nav a.active { color: var(--signature); }
.main-nav a.nav-highlight { color: var(--brass); opacity: 1; }
.main-nav a.nav-highlight:hover { color: var(--ink); }
.header-actions { display: flex; align-items: center; gap: 22px; flex-shrink: 0; }
/* Language switcher & ikon (akun/wishlist/keranjang): flat & minimal --
   sengaja TANPA background/border/pill, biar navbar terasa "quiet luxury"
   (less UI) bukan kumpulan tombol kayak dashboard/SaaS. Interaksi cuma
   lewat perubahan opacity/warna, bukan bentuk kotak/pill yang berubah. */
.lang-switch {
  display: flex; align-items: center; gap: 6px; font-size: 11.5px; letter-spacing: 0.04em; font-weight: 600;
  white-space: nowrap;
}
.lang-switch .lang-opt { opacity: 0.5; transition: opacity .25s ease; }
.lang-switch .lang-opt.active { opacity: 1; text-decoration: none; }
.lang-switch .lang-opt:not(.active):hover { opacity: 0.85; }
.lang-switch .lang-sep { display: inline; opacity: 0.35; font-size: 10px; }
.icon-link {
  position: relative; font-size: 11.5px; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 600;
  white-space: nowrap; display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 0; background: none; border: none; opacity: 0.75;
  transition: opacity .25s ease, color .25s ease;
}
.icon-link:hover, .icon-link:active, .icon-link:focus-visible {
  opacity: 1; color: var(--brass);
}
.cart-text-link:hover { color: var(--brass); }
.cart-text-link { display: inline-flex; align-items: center; }
.cart-icon { flex-shrink: 0; }
.cart-label { margin-right: 2px; }
.cart-badge {
  position: absolute; top: -8px; right: -10px;
  background: var(--clay); color: var(--white);
  font-size: 10px; min-width: 18px; height: 18px; border-radius: 50%;
  display: none; align-items: center; justify-content: center;
}
.nav-toggle {
  display: none;
  background: var(--canvas-alt2, #FAF8F4); border: 1px solid var(--line); border-radius: 999px;
  font-size: 18px; cursor: pointer; color: var(--ink); padding: 7px 12px;
  transition: background .2s ease, border-color .2s ease, opacity .2s ease;
}
.nav-toggle:hover, .nav-toggle:active, .nav-toggle:focus-visible {
  background: transparent; border-color: transparent;
}
.nav-close { display: none; }
.nav-overlay { display: none; }

/* ---------------- Dropdown "Koleksi" di navbar ---------------- */
.nav-dropdown { position: relative; }
.nav-dropdown-toggle {
  background: none; border: none; padding: 0; margin: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
  font: inherit; font-size: 12.5px; letter-spacing: 0.05em; text-transform: uppercase;
  font-weight: 500; color: var(--ink); position: relative; padding-bottom: 4px;
  border-bottom: 1px solid transparent;
}
.nav-dropdown-toggle svg { transition: transform .2s ease; flex-shrink: 0; }
.nav-dropdown-toggle::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--brass); transform: scaleX(0); transform-origin: center;
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.nav-dropdown-toggle:hover::after, .nav-dropdown-toggle.active::after { transform: scaleX(1); }
.nav-dropdown-toggle:hover, .nav-dropdown-toggle.active { color: var(--signature); }
.nav-dropdown.is-open .nav-dropdown-toggle svg { transform: rotate(180deg); }
.nav-dropdown-menu {
  position: absolute; top: calc(100% + 16px); left: 50%; transform: translateX(-50%) translateY(-6px);
  width: max-content; min-width: 100%; background: var(--canvas-alt2); border: 1px solid var(--line);
  border-top: 2px solid var(--brass); border-radius: var(--radius);
  box-shadow: var(--shadow-lift); padding: 8px; z-index: 50;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .22s ease-out, transform .22s ease-out, visibility .22s ease-out;
}
.nav-dropdown.is-open .nav-dropdown-menu {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.nav-dropdown-menu a {
  display: block; padding: 9px 14px; font-size: 13px; color: var(--ink); white-space: nowrap;
  border-radius: 4px; letter-spacing: 0.01em;
}
.nav-dropdown-menu a:hover { background: var(--canvas-alt); color: var(--signature); }

/* Di tampilan overlay (transparan di atas hero), tombol dropdown ikut putih
   seperti link lain, tapi isi menu-nya (dropdown panel) tetap kartu putih
   solid dengan teks gelap supaya selalu terbaca di atas foto apapun. */
.site-header.header-overlay .nav-dropdown-toggle { color: var(--white); }
.site-header.header-overlay .nav-dropdown-toggle::after { background: var(--brass-light); }
.site-header.header-overlay .nav-dropdown-toggle:hover,
.site-header.header-overlay .nav-dropdown-toggle.active { color: var(--white); }
.site-header.header-overlay.is-scrolled .nav-dropdown-toggle { color: var(--signature); }

/* ---------------- Header overlay (homepage only): transparent over the hero,
   text-only, gains a background on hover or once the page is scrolled — the
   "Ralph Lauren" nav treatment. ---------------- */
.site-header.header-overlay {
  position: absolute;
  top: 0; left: 0; right: 0;
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
}
.site-header.header-overlay .logo,
.site-header.header-overlay .main-nav a,
.site-header.header-overlay .icon-link,
.site-header.header-overlay .nav-toggle,
.site-header.header-overlay .lang-switch {
  color: var(--white);
  text-shadow: 0 1px 4px rgba(0,0,0,0.45);
}
.site-header.header-overlay .nav-toggle {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.32);
}
.site-header.header-overlay .icon-link:hover,
.site-header.header-overlay .icon-link:active,
.site-header.header-overlay .icon-link:focus-visible {
  opacity: 1; color: var(--brass-light);
}
.site-header.header-overlay .nav-toggle:hover,
.site-header.header-overlay .nav-toggle:active,
.site-header.header-overlay .nav-toggle:focus-visible {
  background: transparent; border-color: transparent;
}
/* Logo overlay sekarang pakai badge bulat (lihat rule .site-footer
   .logo-mark, .site-header.header-overlay .logo-mark di atas) -- mix-blend-
   mode di sini TERBUKTI gak jalan karena header-overlay posisinya absolute
   (browser gak bisa nge-blend logo tembus ke foto hero di belakangnya). */
.site-header.header-overlay .lang-switch .lang-opt:not(.active):hover { opacity: 0.85; }
.site-header.header-overlay .main-nav a::after { background: var(--brass-light); }
.site-header.header-overlay .main-nav a:hover,
.site-header.header-overlay .main-nav a.active { color: var(--white); }

/* Bug: link di dalam panel dropdown "KOLEKSI" (Terbaru/Wanita/Pria) ikut
   kena aturan warna putih di atas -- padahal panelnya sendiri kartu putih
   solid, jadi teksnya jadi putih di atas putih (gak kebaca). Override
   supaya isi panel SELALU teks gelap, apapun state header-nya. */
.site-header.header-overlay .nav-dropdown-menu a { color: var(--ink); text-shadow: none; }
.site-header.header-overlay .nav-dropdown-menu a:hover,
.site-header.header-overlay .nav-dropdown-menu a.active { background: var(--canvas-alt); color: var(--signature); }

/* Background appears once the page is ACTUALLY scrolled -- sengaja TIDAK
   dipicu oleh :hover lagi, karena di layar sentuh (HP/tablet) sentuhan pada
   navbar suka "disimulasikan" browser sebagai hover, sehingga bg tiba-tiba
   berubah solid padahal user cuma menyentuh, bukan scroll beneran. Sekarang
   background overlay tetap transparan (teks tetap kontras di warna khusus)
   selama masih di tampilan awal (belum discroll), baru berubah solid begitu
   halaman betul-betul discroll. */
.site-header.header-overlay.is-scrolled {
  position: fixed;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(6px);
  border-bottom-color: var(--line);
  box-shadow: 0 8px 24px -12px rgba(28,33,24,0.18);
}
.site-header.header-overlay.is-scrolled .logo,
.site-header.header-overlay.is-scrolled .main-nav a,
.site-header.header-overlay.is-scrolled .icon-link,
.site-header.header-overlay.is-scrolled .nav-toggle,
.site-header.header-overlay.is-scrolled .lang-switch {
  color: var(--signature);
  text-shadow: none;
}
.site-header.header-overlay.is-scrolled .nav-toggle {
  background: var(--canvas-alt2, #FAF8F4); border-color: var(--line);
}
.site-header.header-overlay.is-scrolled .main-nav a:hover,
.site-header.header-overlay.is-scrolled .main-nav a.active {
  color: var(--signature);
}
.site-header.header-overlay.is-scrolled .logo-mark { filter: none; }

/* Motif shimmer emas tipis yang lewat perlahan di garis bawah navbar selama
   tampilan awal (transparan) -- kesan mewah/elegan tanpa mengganggu
   keterbacaan teks. Berhenti otomatis begitu halaman discroll. */
.site-header.header-overlay:not(.is-scrolled)::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(232,214,175,0) 35%, rgba(232,214,175,0.85) 50%, rgba(232,214,175,0) 65%, transparent 100%);
  background-size: 200% 100%;
  animation: navShimmer 5.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes navShimmer {
  0% { background-position: 140% 0; opacity: 0; }
  15% { opacity: 1; }
  50% { background-position: -40% 0; }
  65% { opacity: 1; }
  100% { background-position: -140% 0; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .site-header.header-overlay::after { animation: none; display: none; }
}

/* Once actually scrolled, keep it pinned (fixed) so it stays reachable. */
.site-header.header-overlay.is-scrolled { position: fixed; }

@media (max-width: 860px) {
  .nav-toggle {
    display: flex; align-items: center; justify-content: center;
    background: var(--canvas-alt2, #FAF8F4); border: 1px solid var(--line); border-radius: 999px;
    font-size: 18px; cursor: pointer; color: var(--ink); padding: 7px 12px;
  }
  .nav-toggle:hover, .nav-toggle:active, .nav-toggle:focus-visible { background: transparent; border-color: transparent; }

  .account-icon-link { display: none; }
  .nav-account-link {
    display: block !important; margin-top: 18px; padding-top: 18px !important;
    border-top: 1px solid var(--line); border-bottom: none !important;
    font-size: 12px !important; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--ink-soft) !important; font-weight: 500 !important;
  }

  /* FIX: backdrop-filter / transform di .site-header bikin elemen
     position:fixed di dalamnya (drawer menu) "terkurung" di tinggi header
     alih-alih memenuhi layar -> menu kelihatan kepotong/aneh di HP.
     Di mobile blur header dimatikan supaya drawer fixed mengacu ke layar. */
  .site-header,
  .site-header.is-scrolled,
  .site-header.header-overlay,
  .site-header.header-overlay.is-scrolled {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    transform: none !important;
    filter: none !important;
    z-index: 200;
  }
  .site-header:not(.header-overlay) { background: #fff; }

  /* Drawer navigasi FULL-SCREEN (bukan panel sempit dari kanan) -- gaya
     editorial: tipografi serif besar, whitespace lega, gak padat kayak
     daftar menu dashboard/app. */
  .main-nav {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: fixed; top: 0; right: 0; bottom: 0; left: 0;
    width: 100%; height: 100vh; height: 100dvh; max-width: 100vw;
    background: var(--white);
    box-shadow: none;
    transform: translateX(100%);
    transition: transform .4s cubic-bezier(.4,0,.2,1);
    z-index: 210; overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 76px 28px 36px;
    justify-content: flex-start;
  }
  .main-nav.nav-open { transform: translateX(0); }
  .main-nav a, .main-nav .nav-dropdown-toggle { color: var(--ink) !important; }

  .main-nav a {
    padding: 14px 0; border-bottom: 1px solid var(--line);
    font-family: var(--font-display); font-size: clamp(19px, 5.4vw, 23px) !important; font-weight: 500 !important;
    letter-spacing: 0.01em !important; text-transform: none !important;
  }
  .main-nav .nav-dropdown { width: 100%; }
  .main-nav .nav-dropdown-toggle {
    width: 100%; justify-content: space-between; padding: 14px 0;
    border-bottom: 1px solid var(--line);
    font-family: var(--font-display); font-size: clamp(19px, 5.4vw, 23px); font-weight: 500;
    letter-spacing: 0.01em; text-transform: none;
  }
  .main-nav .nav-dropdown-toggle::after { display: none; }
  .main-nav .nav-dropdown-menu {
    position: static; transform: none; box-shadow: none; border: none; border-radius: 0;
    opacity: 1; visibility: visible; pointer-events: none;
    max-height: 0; overflow: hidden; padding: 0; background: none;
    transition: max-height .3s ease;
  }
  .main-nav .nav-dropdown-menu,
  .main-nav .nav-dropdown.is-open .nav-dropdown-menu {
    left: auto; top: auto; width: 100%; min-width: 0;
    transform: none !important; /* kalahkan translateX(-50%) milik dropdown desktop */
  }
  .main-nav .nav-dropdown.is-open .nav-dropdown-menu {
    max-height: 400px; pointer-events: auto; padding: 4px 0 8px;
  }
  .main-nav .nav-dropdown-menu a {
    padding: 10px 0 10px 16px; border-bottom: none;
    font-size: 15px !important; color: var(--ink-soft) !important;
  }

  /* Tombol X buat nutup panel, nempel di pojok kanan atas */
  .nav-close {
    display: flex; align-items: center; justify-content: center;
    position: absolute; top: 16px; right: 16px;
    width: 40px; height: 40px; border-radius: 50%;
    background: none; border: none; color: var(--ink);
    cursor: pointer; transition: background .15s ease;
  }
  .nav-close:hover { background: var(--canvas-alt); }

  /* Overlay gak diperlukan lagi -- drawer sekarang full-screen sendiri */
  .nav-overlay { display: none !important; }
}

/* ---------------- Hero (full-bleed editorial overlay) ---------------- */
.hero {
  position: relative;
  height: 100vh;
  min-height: 560px;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.hero-media {
  position: absolute; top: -60px; left: 0; right: 0; bottom: -60px; z-index: 0;
  background: linear-gradient(155deg, var(--signature) 0%, #35452C 55%, var(--brass) 130%);
}
.hero-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.hero-media video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(26,26,26,0.86) 0%, rgba(26,26,26,0.62) 38%, rgba(26,26,26,0.22) 66%, rgba(26,26,26,0.05) 84%);
}
.hero-grid {
  position: relative; z-index: 2;
  width: 100%;
}
/* Posisi vertikal teks hero -- diatur admin lewat Pengaturan > Konten
   Homepage (dropdown "Posisi Teks Hero"). Default "bawah": ~65-75% dari
   tinggi hero, lower-left, gaya editorial quiet-luxury -- foto/model tetap
   fokus utama, teks cuma aksen kecil di sudut, gak menutupi badan/wajah. */
.hero-pos-bottom { align-items: flex-end; padding-bottom: 15vh; }
.hero-pos-center { align-items: center; padding-bottom: 0; }
.hero-pos-top { align-items: flex-start; padding-top: 16vh; }
.hero-text {
  margin: 0; margin-left: 8vw;
  max-width: 440px;
  text-align: left;
}
.hero-slide.is-active .hero-text { animation: hero-text-in .8s cubic-bezier(.16,.8,.3,1) .3s both; }
@keyframes hero-text-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .hero-slide.is-active .hero-text { animation: none; }
}
.hero-mark {
  font-family: var(--font-display); font-size: 14px; font-weight: 600; letter-spacing: 0.3em;
  color: rgba(255,255,255,0.88); margin-bottom: 16px;
}
.hero h1 {
  max-width: 100%; color: var(--white); margin: 0 0 24px;
  font-size: clamp(1.85rem, 3vw, 3.15rem); font-weight: 500; line-height: 1.22;
}
.hero-actions { display: flex; margin-top: 0; }
.hero-cta {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-body); font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--white); padding-bottom: 4px;
  border-bottom: 1px solid rgba(255,255,255,0.55);
  transition: border-color .3s ease, color .3s ease, gap .3s ease;
}
.hero-cta::after { content: '→'; font-size: 13px; transition: transform .3s ease; }
.hero-cta:hover { color: var(--brass-light); border-color: var(--brass-light); gap: 13px; }
@media (max-width: 860px) {
  .hero-text { margin-left: 6vw; max-width: 78vw; }
  .hero h1 { font-size: clamp(1.5rem, 6vw, 2rem); }
}

/* ---- Multi-slide mechanics layered on top of the .hero styles above ----
   (.hero-slider / .hero-slide / .hero-slide.is-active didefinisikan lengkap
   di hero.css -- dulu ada salinan sebagian di sini juga, sudah dibuang
   karena redundan) */
.hero-slide-photo { position: absolute; inset: -2% -2% -2% -2%; overflow: hidden; }
.hero-slide-photo img, .hero-slide-photo video {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1.06); transition: transform 7s ease-out;
  filter: brightness(1.1);
}
.hero-slide.is-active .hero-slide-photo img,
.hero-slide.is-active .hero-slide-photo video { transform: scale(1); }
.single-slide .hero-slide-photo img, .single-slide .hero-slide-photo video { transition: none; transform: scale(1); }
@media (prefers-reduced-motion: reduce) {
  .hero-slide-photo img, .hero-slide-photo video { transition: none; transform: none; }
}
@media (max-width: 860px) {
  .hero { height: auto; min-height: 0; padding: 120px 0 70px; }
  .hero-scrim { background: linear-gradient(190deg, rgba(26,26,26,0.9) 10%, rgba(26,26,26,0.55) 55%, rgba(26,26,26,0.25) 100%); }
}

/* ---------------- Numbered feature strip (below hero) ---------------- */
.features-numbered { padding: 84px 0 70px; }
.features-numbered-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px;
}
.feature-num {
  padding-top: 26px; border-top: 1px solid var(--line); position: relative;
}
.feature-num .num {
  display: block; font-family: var(--font-display); font-weight: 500;
  font-size: 15px; color: var(--brass); margin-bottom: 18px; letter-spacing: 0.04em;
}
.feature-num h3 { margin-bottom: 10px; }
.feature-num p { font-size: 14.5px; margin-bottom: 0; }
@media (max-width: 860px) {
  .features-numbered-grid { grid-template-columns: 1fr; gap: 30px; }
  .features-numbered { padding: 56px 0 40px; }
}

/* ---------------- Capsule strip (signature element) ---------------- */
.capsule {
  padding: 80px 0;
  border-bottom: 1px solid var(--line);
}
.capsule-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 40px; gap: 24px; }
.capsule-head p { max-width: 420px; margin: 0; }
.capsule-strip {
  display: flex; flex-wrap: wrap; gap: 4px 4px; align-items: center;
  padding: 10px 4px 18px;
}
.capsule-piece {
  flex: 0 0 200px; aspect-ratio: 3/4;
  background: var(--canvas-alt); border: 1px solid var(--line);
  border-radius: 18px;
  display: flex; align-items: flex-end; padding: 18px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 14px 30px -20px rgba(28,33,24,0.18);
  transition: transform .35s cubic-bezier(.4,0,.2,1), box-shadow .35s ease, border-color .35s ease;
}
.capsule-piece:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 44px -18px rgba(28,33,24,0.28);
  border-color: var(--brass-light);
}
.capsule-piece.capsule-result:not(.has-photo) {
  background: linear-gradient(155deg, var(--signature) 0%, #2b2b2b 100%);
  border-color: var(--signature);
}
.capsule-piece.capsule-result:not(.has-photo) span { color: #fff; }
.capsule-piece .piece-photo {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; z-index: 0;
  transition: transform .5s ease;
}
.capsule-piece:hover .piece-photo { transform: scale(1.05); }
.capsule-piece.has-photo span {
  position: relative; z-index: 1;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.capsule-piece.has-photo::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(0deg, rgba(26,26,26,0.6), transparent 60%);
}
.capsule-piece::before {
  content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(232,214,175,0); transition: box-shadow .35s ease;
}
.capsule-piece:hover::before { box-shadow: inset 0 0 0 1px rgba(232,214,175,0.55); }
.capsule-piece span {
  position: relative; z-index: 1;
  font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  font-weight: 600; color: var(--ink);
}
.capsule-plus {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 17px; color: var(--brass);
  background: var(--canvas); border: 1px solid var(--brass-light);
  box-shadow: 0 4px 14px -6px rgba(184,148,100,0.5);
}

/* ---------------- Section tint alternation (scroll variation) ---------------- */
.section-tint {
  background: var(--canvas-alt); position: relative; z-index: 1;
  box-shadow: inset 0 1px 0 var(--line), inset 0 -1px 0 var(--line);
}

/* ---------------- Category tiles (editorial redesign) ---------------- */
.categories { padding: 100px 0; }
.section-editorial { background: #FAF7F2; position: relative; z-index: 1; }
.section-head-editorial { align-items: flex-start; margin-bottom: 56px; }
.section-head-editorial h2 { margin: 10px 0 16px; }
.section-subtitle { max-width: 480px; color: var(--ink-soft); font-size: 15px; line-height: 1.7; margin: 0; }
.view-all-link {
  flex-shrink: 0; font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600;
  color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 3px; white-space: nowrap;
  transition: color .3s ease, border-color .3s ease, gap .3s ease;
  display: inline-flex; align-items: center; gap: 6px;
}
.view-all-link:hover { color: var(--brass); border-color: var(--brass); gap: 10px; }

.category-grid { display: grid; grid-template-columns: 1.86fr 1fr; grid-template-rows: repeat(2, 1fr); gap: 28px; }
.category-grid a:first-child { grid-row: 1 / 3; }
.category-tile {
  aspect-ratio: 3/4; border-radius: 20px; overflow: hidden;
  position: relative; background: var(--canvas-alt); border: none;
  display: flex; align-items: flex-end;
  box-shadow: 0 4px 20px rgba(28,33,24,0.06);
  transition: box-shadow .4s ease, transform .4s ease;
}
.category-tile:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -20px rgba(28,33,24,0.28); }
.category-tile .tile-photo {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; z-index: 0;
  filter: saturate(0.85) contrast(1.02);
  transition: transform .9s cubic-bezier(.16,.8,.3,1);
}
.category-tile:hover .tile-photo { transform: scale(1.07); }
/* Overlay gradasi gelap -- makin pekat pas hover, biar teks tetap kebaca dan
   ada kesan "spotlight" halus ke kartu yang lagi disorot. */
.category-tile::before {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(0deg, rgba(20,22,16,0.75) 0%, rgba(20,22,16,0.15) 55%, rgba(20,22,16,0.05) 100%);
  transition: background .4s ease;
  pointer-events: none;
}
.category-tile:hover::before { background: linear-gradient(0deg, rgba(20,22,16,0.85) 0%, rgba(20,22,16,0.3) 60%, rgba(20,22,16,0.1) 100%); }
.tile-num {
  position: absolute; top: 22px; left: 24px; z-index: 2;
  font-family: var(--font-display); font-size: 13px; letter-spacing: 0.1em;
  color: rgba(255,255,255,0.75);
}
.category-tile .tile-inner {
  position: relative; z-index: 2;
  padding: 30px 28px; width: 100%;
  transition: transform .4s ease;
}
.category-tile:hover .tile-inner { transform: translateY(-6px); }
.category-tile h3 { color: var(--white); margin: 0 0 6px; font-size: 1.6rem; }
.category-tile .tile-inner p { color: rgba(255,255,255,0.8); font-size: 13.5px; margin: 0; max-width: 85%; }
.tile-arrow {
  position: absolute; bottom: 30px; right: 28px; z-index: 2;
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.5);
  display: flex; align-items: center; justify-content: center; color: var(--white);
  opacity: 0; transform: translateY(6px);
  transition: opacity .4s ease, transform .4s ease, background .3s ease, border-color .3s ease;
}
.category-tile:hover .tile-arrow { opacity: 1; transform: translateY(0); }
.tile-arrow:hover, .category-tile:hover .tile-arrow:hover { background: var(--white); color: var(--ink); }

@media (max-width: 980px) and (min-width: 861px) {
  .category-grid { grid-template-columns: 1fr 1fr; grid-template-rows: none; }
  .category-grid a:first-child { grid-row: auto; grid-column: 1 / 3; }
}
@media (max-width: 860px) {
  .category-grid { grid-template-columns: 1fr; grid-template-rows: none; gap: 18px; }
  .category-grid a:first-child { grid-row: auto; grid-column: auto; }
  .section-head-editorial { flex-direction: column; align-items: flex-start; gap: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .category-tile, .category-tile .tile-photo, .category-tile::before, .category-tile .tile-inner, .tile-arrow { transition: none; }
  .category-tile:hover { transform: none; }
  .category-tile:hover .tile-photo { transform: none; }
  .category-tile:hover .tile-inner { transform: none; }
  .tile-arrow { opacity: 1; transform: none; }
}

/* ---------------- Product grid ---------------- */
.section-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 32px; gap: 20px; }
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px 32px; }
@media (max-width: 1020px) { .product-grid { grid-template-columns: repeat(3, 1fr); gap: 32px 24px; } }
@media (max-width: 700px) { .product-grid { grid-template-columns: repeat(2, 1fr); gap: 18px 14px; } }

.product-card { display: block; }
.product-thumb {
  aspect-ratio: 3/4; background: var(--canvas-alt); border: none;
  border-radius: 2px; overflow: hidden; position: relative; margin-bottom: 12px;
  box-shadow: none; transition: none;
}
.product-thumb img {
  width: 100%; height: 100%; object-fit: cover; object-position: top center;
  transition: transform .6s cubic-bezier(.16,.8,.3,1);
}
.thumb-img-main, .thumb-img-hover { position: absolute; inset: 0; transition: transform .6s cubic-bezier(.16,.8,.3,1), opacity .5s ease; }
.thumb-img-hover { opacity: 0; }
.product-card:hover .thumb-img-main { opacity: 0; }
.product-card:hover .thumb-img-hover { opacity: 1; }
.product-card:hover .product-thumb img { transform: scale(1.03); }
.product-card:hover .product-title { color: var(--signature); }
@media (prefers-reduced-motion: reduce) {
  .product-thumb img { transition: none; }
  .product-card:hover .product-thumb img { transform: none; }
}
.wishlist-btn {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.9); border: 1px solid transparent;
  box-shadow: 0 2px 8px -3px rgba(28,33,24,0.18);
  cursor: pointer; padding: 0; opacity: 0;
  transition: background .2s ease, border-color .2s ease, transform .2s ease, opacity .2s ease, box-shadow .2s ease;
}
.wishlist-btn svg { width: 15px; height: 15px; stroke: var(--ink); fill: none; stroke-width: 1.6; transition: fill .2s ease, stroke .2s ease; }
.wishlist-btn:hover { transform: scale(1.1); border-color: var(--brass-light); opacity: 1; }
.product-card:hover .wishlist-btn { opacity: 1; box-shadow: var(--shadow-soft); }
.wishlist-btn.is-active { opacity: 1; border-color: rgba(181,101,74,0.25); }
.wishlist-btn.is-active svg { fill: var(--clay); stroke: var(--clay); }
.wishlist-btn.pop { animation: wishlistPop .45s cubic-bezier(.34,1.56,.64,1); }
@media (hover: none) {
  .wishlist-btn { opacity: 0.95; }
}
@keyframes wishlistPop {
  0% { transform: scale(1); }
  35% { transform: scale(1.35); }
  60% { transform: scale(0.9); }
  100% { transform: scale(1); }
}
.wishlist-badge {
  position: absolute; top: -8px; right: -10px;
  background: var(--clay); color: var(--white);
  font-size: 10px; min-width: 18px; height: 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}

.badge {
  position: absolute; top: 10px; left: 10px;
  background: var(--signature); color: var(--white);
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 5px 9px; border-radius: 2px; font-weight: 600;
}
.badge.new { background: var(--clay); }
.product-type { font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); opacity: 0.75; margin-bottom: 4px; }
.product-title { font-family: var(--font-display); font-size: 16.5px; font-weight: 500; margin-bottom: 5px; transition: color .2s ease; }
.product-price { font-size: 13px; color: var(--ink-soft); display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.product-price .compare { text-decoration: line-through; margin-right: 6px; opacity: 0.55; }
.product-price:has(.compare) { color: var(--brass); font-weight: 600; }
.product-price::after {
  content: "→"; opacity: 0; transform: translateX(-4px); color: var(--brass);
  transition: opacity .25s ease, transform .25s ease;
}
.product-card:hover .product-price::after { opacity: 1; transform: translateX(0); }

/* ---------------- Filters ---------------- */
.listing-layout { display: grid; grid-template-columns: 220px 1fr; gap: 44px; padding: 50px 0 100px; }
.filters { align-self: start; position: sticky; top: 110px; }
.filters-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.filters-head h4 { margin: 0; }
.filter-reset { font-size: 11.5px; color: var(--clay); text-decoration: underline; white-space: nowrap; }
.filters h4 { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 14px; color: var(--ink-soft); }
.filter-list { list-style: none; padding: 0; margin: 0 0 30px; }
.filter-list li { margin-bottom: 9px; }
.filter-list a { font-size: 14px; color: var(--ink-soft); }
.filter-list a.active, .filter-list a:hover { color: var(--signature); font-weight: 600; }
.active-filter-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: -8px 0 22px; }
.filter-chip {
  font-size: 12.5px; color: var(--signature); background: var(--canvas-alt);
  border: 1px solid var(--line); border-radius: 20px; padding: 5px 12px;
  display: inline-flex; align-items: center; gap: 6px; transition: background .15s ease;
}
.filter-chip:hover { background: var(--line); }
.sort-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 26px; flex-wrap: wrap; gap: 10px; }
.sort-bar-form { display: flex; gap: 8px; flex-wrap: wrap; }
.sort-bar select {
  font-family: var(--font-body); border: 1px solid var(--line); background: var(--white);
  padding: 9px 12px; font-size: 13px; border-radius: var(--radius);
}
@media (max-width: 860px) { .listing-layout { grid-template-columns: 1fr; } .filters { position: static; } }

.pagination { display: flex; gap: 8px; justify-content: center; margin-top: 50px; }
.pagination a, .pagination span {
  min-width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: var(--radius); font-size: 13px;
}
.pagination .active { background: var(--signature); color: var(--white); border-color: var(--signature); }

/* ---------------- Product detail ---------------- */
.pd-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; padding: 50px 0 100px; }
.pd-gallery-main { aspect-ratio: 4/5; max-width: 460px; margin: 0 auto 12px; background: var(--canvas-alt); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; cursor: zoom-in; }
.pd-gallery-main img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
@media (max-width: 860px) { .pd-gallery-main { max-width: 100%; } }
.pd-thumbs { display: flex; gap: 10px; max-width: 460px; margin: 0 auto; justify-content: center; flex-wrap: wrap; }
.pd-thumbs .t { width: 76px; aspect-ratio: 3/4; background: var(--canvas-alt); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; cursor: pointer; }
.pd-thumbs .t img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.pd-info .eyebrow { margin-bottom: 10px; }
.pd-price { font-size: 20px; margin-bottom: 22px; color: var(--ink); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pd-price .compare { text-decoration: line-through; font-size: 15px; color: var(--ink-soft); opacity: 0.7; font-weight: 400; }
.pd-price:has(.compare) { color: var(--brass); }
.pd-block { margin-bottom: 26px; }
.pd-block label { display: block; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; margin-bottom: 10px; color: var(--ink-soft); }
.swatches { display: flex; gap: 10px; flex-wrap: wrap; }
.swatch {
  border: 1px solid var(--line); background: var(--white); padding: 9px 16px;
  border-radius: var(--radius); font-size: 13px; cursor: pointer;
}
.swatch input { display: none; }
.swatch:has(input:checked) { border-color: var(--signature); background: var(--signature); color: var(--white); }
.swatch.is-active { border-color: var(--signature); background: var(--signature); color: var(--white); }
.qty-row { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.qty-row input { width: 64px; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius); font-family: var(--font-body); text-align: center; }
.pd-desc { border-top: 1px solid var(--line); padding-top: 24px; margin-top: 8px; }
.pd-desc dt { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); margin-top: 14px; }
.pd-desc dd { margin: 4px 0 0; }
@media (max-width: 860px) { .pd-layout { grid-template-columns: 1fr; gap: 34px; } }

/* ---------------- Cart & Checkout ---------------- */
.cart-heading { padding: 56px 0 8px; }
.cart-heading .eyebrow { margin-bottom: 10px; }
.cart-heading h1 { font-size: clamp(1.9rem, 3vw, 2.4rem); margin-bottom: 0; }
.cart-layout { display: grid; grid-template-columns: 1fr 380px; gap: 46px; padding: 30px 0 110px; align-items: start; }
.cart-panel {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft); padding: 8px 28px; position: relative; overflow: hidden;
}
.cart-panel::before, .summary-box::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--brass-light), var(--brass) 45%, var(--signature) 130%);
}
@keyframes cartRowIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.cart-row {
  display: grid; grid-template-columns: 84px 1fr auto auto auto; gap: 20px; align-items: center;
  padding: 22px 14px; margin: 0 -14px; border-bottom: 1px solid var(--line); border-radius: var(--radius);
  transition: background .25s ease;
  animation: cartRowIn .45s ease backwards;
}
.cart-panel .cart-row:nth-child(1) { animation-delay: .03s; }
.cart-panel .cart-row:nth-child(2) { animation-delay: .08s; }
.cart-panel .cart-row:nth-child(3) { animation-delay: .13s; }
.cart-panel .cart-row:nth-child(n+4) { animation-delay: .18s; }
.cart-row:hover { background: var(--canvas-alt2); }
.cart-panel .cart-row:last-child { border-bottom: none; }
.cart-row img { width: 84px; aspect-ratio: 3/4; object-fit: cover; object-position: top center; border-radius: var(--radius); border: 1px solid var(--line); transition: transform .35s ease; }
.cart-row:hover img { transform: scale(1.04); }
.cart-meta .name { font-weight: 500; margin-bottom: 5px; font-size: 15px; }
.cart-meta .opt { font-size: 13px; color: var(--ink-soft); }
.cart-meta .opt.price-line { color: var(--ink); font-weight: 500; margin-top: 4px; }
.remove-form { display: inline-flex; margin: 0; padding: 0; }
.remove-link { color: var(--ink-soft); border: 1px solid var(--line); border-radius: 50%; background: none; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease; }
.remove-link:hover { color: var(--clay); border-color: var(--clay); background: var(--canvas-alt); transform: scale(1.06); }
.remove-link:disabled { opacity: .5; cursor: not-allowed; }

.qty-stepper { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
.qty-stepper button {
  width: 32px; height: 34px; border: none; background: var(--canvas-alt); color: var(--ink);
  font-size: 15px; cursor: pointer; transition: background .2s ease, color .2s ease;
}
.qty-stepper button:hover { background: var(--brass); color: var(--white); }
.qty-stepper input {
  width: 42px; height: 34px; border: none; border-left: 1px solid var(--line); border-right: 1px solid var(--line);
  text-align: center; font-family: var(--font-body); font-size: 14px; -moz-appearance: textfield; appearance: textfield;
}
.qty-stepper input::-webkit-outer-spin-button, .qty-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cart-line-total { font-weight: 600; font-size: 15px; min-width: 96px; text-align: right; }

.summary-box {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 30px; box-shadow: var(--shadow-card); position: sticky; top: 110px; overflow: hidden;
}
.summary-box h3 { margin-bottom: 20px; }
.summary-row { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 12px; color: var(--ink-soft); }
.summary-row.total { font-size: 18px; color: var(--ink); font-weight: 600; border-top: 1px solid var(--line); padding-top: 16px; margin-top: 4px; }
.summary-row.total span:last-child { color: var(--brass); }
.summary-note { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-soft); margin-top: 16px; }
@media (max-width: 860px) {
  .cart-layout { grid-template-columns: 1fr; }
  .cart-panel { padding: 4px 18px; }
  .summary-box { position: static; }
}

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-field { margin-bottom: 18px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { display: block; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; margin-bottom: 8px; color: var(--ink-soft); }
.form-field input, .form-field select, .form-field textarea {
  width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius);
  font-family: var(--font-body); font-size: 14px; background: var(--white);
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: 2px solid var(--brass); outline-offset: 1px; }
/* Chrome/Edge otomatis kasih background biru muda ke input yang keisi dari
   autofill (email/password tersimpan browser) -- ini nabrak warna form
   yang lain (putih/krem). Dipaksa tetap pakai warna normal situs. */
.form-field input:-webkit-autofill,
.form-field input:-webkit-autofill:hover,
.form-field input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink);
  transition: background-color 5000s ease-in-out 0s;
  box-shadow: 0 0 0px 1000px var(--white) inset;
}
.radio-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 10px; display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.radio-card:has(input:checked) { border-color: var(--signature); background: var(--canvas-alt); }
.radio-card small { display: block; color: var(--ink-soft); }

.payment-detail-box { background: var(--canvas-alt); border: 1px dashed var(--line); border-radius: var(--radius); padding: 16px 18px; margin: -2px 0 18px; }
.form-reminder {
  font-size: 13px; color: var(--ink-soft); background: var(--canvas-alt);
  border-radius: var(--radius); padding: 10px 14px; margin: -4px 0 20px;
}
.checkout-reminder {
  font-size: 13.5px; line-height: 1.5; color: #6b4a1d; background: #fdf3e2;
  border: 1px solid #f0dbb0; border-radius: var(--radius); padding: 14px 16px; margin: 24px 0 18px;
}
.upload-proof-box {
  position: relative; border: 2px dashed var(--line); border-radius: var(--radius-lg);
  background: var(--canvas-alt); padding: 26px 20px; text-align: center; transition: border-color .2s ease;
  min-height: 120px; display: flex; align-items: center; justify-content: center;
}
.upload-proof-box:hover { border-color: var(--brass); }
.upload-proof-box input[type="file"] {
  position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 2;
}
.upload-proof-placeholder span { display: block; font-size: 14px; color: var(--ink); margin-bottom: 4px; }
.upload-proof-placeholder small { color: var(--ink-soft); }
.upload-proof-box img#uploadProofPreview { max-width: 100%; max-height: 220px; border-radius: 4px; object-fit: contain; }
.payment-detail-row { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: 14px; }
.payment-detail-row span { color: var(--ink-soft); }
.payment-detail-note { font-size: 13px; color: var(--ink-soft); margin: 0; }
.payment-qris-img { display: block; width: 100%; max-width: 220px; margin: 0 auto; border-radius: 4px; background: #fff; padding: 10px; }

/* ---------------- Nota (checkout success receipt) ---------------- */
.nota-wrap { max-width: 620px; padding: 80px 0 110px; }
.nota-card {
  position: relative; overflow: hidden;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift); padding: 50px 44px 40px;
}
.nota-accent { position: absolute; top: 0; left: 0; right: 0; height: 5px; background: linear-gradient(90deg, var(--brass), var(--signature)); }
.nota-head { text-align: center; margin-bottom: 26px; }
.nota-emblem {
  width: 52px; height: 52px; margin: 0 auto 18px; border-radius: 50%;
  border: 1px solid var(--signature); display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 21px; font-weight: 600; color: var(--signature);
  overflow: hidden;
}
.nota-emblem img { width: 100%; height: 100%; object-fit: contain; padding: 8px; box-sizing: border-box; }
.nota-head .eyebrow { justify-content: center; padding-bottom: 0; }
.nota-head .eyebrow::after { display: none; }
.nota-head h1 { font-size: 1.85rem; margin: 12px 0 12px; }
.nota-head p { max-width: 420px; margin: 0 auto; font-size: 14.5px; }
.nota-meta-row {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 16px 2px; border-top: 1px dashed var(--line); border-bottom: 1px dashed var(--line);
}
.nota-meta-row > div { display: flex; flex-direction: column; gap: 4px; }
.nota-meta-row > div:last-child { align-items: flex-end; text-align: right; }
.nota-meta-row span { font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.nota-meta-row strong { font-family: var(--font-display); font-size: 14.5px; color: var(--ink); }
.nota-divider { border-top: 1px dashed var(--line); margin: 22px 0; }
.nota-items { display: flex; flex-direction: column; gap: 13px; }
.nota-item-row { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--ink); }
.nota-item-row.muted { color: var(--ink-soft); font-size: 13.5px; }
.nota-item-qty { color: var(--ink-soft); font-size: 12.5px; }
.nota-total-row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--font-display); font-size: 21px; font-weight: 600; color: var(--signature);
  margin-bottom: 26px;
}
.nota-payment-box { margin-bottom: 22px; }
.nota-whatsapp-box { margin-bottom: 22px; text-align: center; }
.btn-whatsapp {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; padding: 14px 20px; border-radius: var(--radius);
  background: #25D366; color: var(--white); font-size: 13.5px; font-weight: 600;
  letter-spacing: 0.03em; text-transform: uppercase; border: 1px solid #25D366;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.btn-whatsapp:hover { background: #1EBE5B; border-color: #1EBE5B; }
.btn-whatsapp svg { flex-shrink: 0; }
.nota-whatsapp-note { margin: 10px 0 0; font-size: 12.5px; color: var(--ink-soft); }
.nota-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.nota-actions .btn { flex: 1; }
@media (max-width: 600px) {
  .nota-wrap { padding: 56px 0 70px; }
  .nota-card { padding: 34px 22px 30px; }
  .nota-actions .btn { flex: 1 1 100%; }
}

.empty-state { text-align: center; padding: 100px 20px 120px; max-width: 480px; margin: 0 auto; }
.empty-state .empty-icon {
  width: 64px; height: 64px; margin: 0 auto 26px; border-radius: 50%;
  background: var(--canvas-alt); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
}
.empty-state h2 { margin-bottom: 12px; }
.empty-state .btn { margin-top: 10px; }

/* ---------------- Alerts ---------------- */
.alert { padding: 14px 18px; border-radius: var(--radius); font-size: 14px; margin-bottom: 24px; }
.alert-success { background: #E4EBDD; color: var(--signature-dark); border: 1px solid #C4D3B4; }
.alert-error { background: #F3E1DB; color: #7A3222; border: 1px solid #E2BBAE; }

/* ---------------- Toast notifications ----------------
   Stacked, auto-dismissing notification "pills" that replace the browser's
   native alert() and the old static banner-only flash messages. Driven by
   segnoToast() in main.js. Shared across storefront + admin. */
.toast-stack {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
  z-index: 9999; display: flex; flex-direction: column-reverse; gap: 10px;
  align-items: center; max-width: 92vw; pointer-events: none;
}
.toast-msg {
  display: flex; align-items: center; gap: 10px; pointer-events: auto;
  background: var(--signature-dark); color: #fff; padding: 13px 20px; border-radius: 999px;
  font-size: 13.5px; font-weight: 500; box-shadow: 0 14px 34px rgba(0,0,0,0.28);
  opacity: 0; transform: translateY(14px) scale(.98); transition: opacity .28s ease, transform .28s ease;
  max-width: min(420px, 90vw); text-align: left; line-height: 1.4;
}
.toast-msg.show { opacity: 1; transform: translateY(0) scale(1); }
.toast-msg .toast-icon { flex-shrink: 0; width: 18px; height: 18px; display: flex; }
.toast-msg .toast-close {
  flex-shrink: 0; margin-left: 4px; opacity: .55; cursor: pointer; font-size: 15px;
  line-height: 1; padding: 2px; transition: opacity .15s ease;
}
.toast-msg .toast-close:hover { opacity: 1; }
.toast-msg.toast-success { background: #23301F; }
.toast-msg.toast-success .toast-icon { color: #8FD19E; }
.toast-msg.toast-error { background: #4A2018; }
.toast-msg.toast-error .toast-icon { color: #E8A594; }
.toast-msg.toast-info { background: var(--signature-dark); }
.toast-msg.toast-info .toast-icon { color: #C8B08A; }

/* ---------------- Confirm modal ----------------
   Replaces native window.confirm() with an in-brand dialog. Built/controlled
   by segnoConfirm() in main.js; markup is injected at call time. */
.confirm-modal-overlay {
  position: fixed; inset: 0; z-index: 9998; background: rgba(20,18,14,0.55);
  backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center;
  padding: 20px; opacity: 0; transition: opacity .18s ease;
}
.confirm-modal-overlay.show { opacity: 1; }
.confirm-modal-box {
  background: #fff; border-radius: 10px; padding: 26px 26px 22px; width: 100%; max-width: 400px;
  box-shadow: 0 30px 70px -20px rgba(0,0,0,0.4); transform: translateY(10px) scale(.98);
  transition: transform .18s ease;
}
.confirm-modal-overlay.show .confirm-modal-box { transform: translateY(0) scale(1); }
.confirm-modal-title { font-family: var(--font-display); font-size: 1.15rem; color: var(--ink); margin-bottom: 10px; }
.confirm-modal-text { font-size: 13.5px; color: var(--ink-soft); line-height: 1.6; margin-bottom: 22px; }
.confirm-modal-actions { display: flex; gap: 10px; justify-content: flex-end; }
.confirm-modal-actions button {
  font-family: var(--font-body); font-size: 13.5px; font-weight: 600; padding: 10px 18px;
  border-radius: 6px; cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.confirm-modal-cancel { background: transparent; border: 1px solid var(--line); color: var(--ink-soft); }
.confirm-modal-cancel:hover { border-color: var(--ink-soft); color: var(--ink); }
.confirm-modal-ok { background: var(--ink); border: 1px solid var(--ink); color: #fff; }
.confirm-modal-ok:hover { background: var(--signature-dark); }
.confirm-modal-ok.is-danger { background: var(--clay); border-color: var(--clay); }
.confirm-modal-ok.is-danger:hover { background: #9C5039; border-color: #9C5039; }

/* ---------------- Footer ---------------- */
.site-footer {
  background: linear-gradient(165deg, var(--signature-dark) 0%, var(--signature) 55%, #1B2416 100%);
  color: var(--white); padding: 70px 0 32px; margin-top: 0;
  border-top: 1px solid rgba(199,168,118,0.35);
  box-shadow: inset 0 1px 0 rgba(199,168,118,0.15);
}
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 40px; margin-bottom: 50px; }
.footer-brand { max-width: 320px; }
.site-footer h4 { color: var(--brass-light); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 18px; font-family: var(--font-body); }
.site-footer .logo { color: var(--white); margin-bottom: 12px; }
.site-footer p { color: rgba(255,255,255,0.62); font-size: 14px; line-height: 1.7; }
.footer-social-label { display: block; color: var(--brass-light); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; margin: 22px 0 12px; font-family: var(--font-body); }
.footer-social-icons { list-style: none; display: flex; flex-wrap: wrap; gap: 12px; padding: 0; margin: 0; }
.footer-social-icons a { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.25); color: rgba(255,255,255,0.85); transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease; }
.footer-social-icons a:hover { background: var(--brass-light, #C9A876); border-color: var(--brass-light, #C9A876); color: #1c2118; transform: translateY(-2px); }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 11px; }
.footer-links a { color: rgba(255,255,255,0.72); font-size: 14px; transition: color 0.2s ease, padding-left 0.2s ease; }
.footer-links a:hover { color: var(--brass-light); padding-left: 3px; }
.footer-bottom {
  border-top: 1px solid rgba(199,168,118,0.22); padding-top: 26px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 12px;
  letter-spacing: 0.03em; color: rgba(255,255,255,0.45);
}
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; max-width: 420px; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } .footer-brand { max-width: 100%; } }

/* ---------------- Breadcrumb ---------------- */
.breadcrumb { font-size: 13px; color: var(--ink-soft); padding: 20px 0 0; }
.breadcrumb a:hover { color: var(--signature); }

/* ==========================================================================
   RESPONSIVE — HP kecil (≤ 480px)
   Breakpoint tablet (860px) sudah ada di atas; blok ini menghaluskan tampilan
   di layar HP yang lebih sempit (iPhone SE, Android kecil, dst) tanpa mengubah
   layout/komponen yang sudah ada di ukuran lebih besar.
   ========================================================================== */
@media (max-width: 640px) {
  /* Header-bar & header-actions masih pakai gap "desktop" (24px/20px) yang
     bikin logo + lang switch + tombol menu + link cart gampang dempet/
     kepotong di HP. Perkecil gap dan ringkas cart jadi ikon+badge saja. */
  .header-bar { gap: 10px; }
  .header-actions { gap: 12px; }
  .lang-switch { font-size: 11px; gap: 4px; }
  .cart-text-link .cart-label,
  .cart-text-link .cart-count { display: none; }
  .cart-icon { margin-right: 0; }
  .cart-badge { display: flex; }
}

@media (max-width: 480px) {
  .wrap { padding: 0 18px; }
  .header-bar { padding: 16px 18px; gap: 8px; }
  .logo { font-size: 21px; }
  .logo-mark { width: 28px; height: 28px; }
  .header-actions { gap: 10px; }

  h1 { font-size: clamp(1.9rem, 8vw, 2.4rem); }
  h2 { font-size: clamp(1.4rem, 6vw, 1.8rem); }

  .hero { padding: 108px 0 7vh; }

  .category-grid { gap: 14px; }
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 14px 10px; }

  /* Baris produk di keranjang: dari 4 kolom sejajar jadi ditumpuk supaya
     tidak kepotong/kepepet di layar sempit. */
  .cart-row {
    grid-template-columns: 72px 1fr auto;
    grid-template-areas:
      "img meta remove"
      "img qty qty"
      "img total total";
    row-gap: 8px;
  }
  .cart-row img { grid-area: img; width: 72px; }
  .cart-meta { grid-area: meta; }
  .cart-row form.cart-qty { grid-area: qty; }
  .cart-line-total { grid-area: total; text-align: left; }
  .cart-row .remove-form { grid-area: remove; justify-self: end; align-self: start; }
  .cart-panel { padding: 4px 14px; }
  .summary-box { padding: 22px; }

  /* Form checkout: 2 kolom jadi 1 kolom supaya input tidak sempit. */
  .form-grid { grid-template-columns: 1fr; }
  .form-field.full { grid-column: 1; }

  .footer-grid { grid-template-columns: 1fr; gap: 30px; text-align: left; }
  .footer-bottom { flex-direction: column; gap: 8px; text-align: left; }

  .empty-state { padding: 70px 16px 90px; }
}

/* ==========================================================================
   ADDITIONS — product listing/detail polish, cart trust row, checkout thumbs
   ========================================================================== */

/* ---------------- Sort selects — custom arrow, nicer focus ---------------- */
.sort-bar select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding-right: 30px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%234E5245' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat; background-position: right 11px center; background-size: 11px;
  cursor: pointer; transition: border-color .2s ease;
}
.sort-bar select:hover { border-color: var(--brass); }
.sort-bar select:focus { outline: 2px solid var(--brass); outline-offset: 1px; }

/* ---------------- Product gallery — active thumb + zoom cursor ---------------- */
.pd-thumbs .t.active { border-color: var(--signature); box-shadow: 0 0 0 1px var(--signature); }

/* ---------------- Lightbox ---------------- */
.lightbox-overlay {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(28,33,24,0.92);
  display: flex; align-items: center; justify-content: center; padding: 30px;
  opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
.lightbox-overlay.open { opacity: 1; pointer-events: auto; }
.lightbox-overlay img { max-width: min(90vw, 760px); max-height: 88vh; object-fit: contain; border-radius: var(--radius); box-shadow: var(--shadow-lift); }
.lightbox-close {
  position: absolute; top: 22px; right: 26px; width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.3); color: #fff;
  font-size: 22px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .2s ease;
}
.lightbox-close:hover { background: rgba(255,255,255,0.22); }

/* ---------------- Product info accordion ---------------- */
.pd-accordion { border-top: 1px solid var(--line); margin-top: 8px; }
.pd-accordion-item { border-bottom: 1px solid var(--line); }
.pd-accordion-trigger {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  background: none; border: none; padding: 17px 2px; text-align: left; cursor: pointer;
  font-family: var(--font-body); font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase;
  font-weight: 600; color: var(--ink);
}
.pd-accordion-trigger .chev { color: var(--brass); font-size: 17px; transition: transform .25s ease; }
.pd-accordion-item.open .pd-accordion-trigger .chev { transform: rotate(45deg); }
.pd-accordion-panel { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.pd-accordion-panel-inner { padding: 0 2px 18px; font-size: 14px; color: var(--ink-soft); line-height: 1.7; }
.pd-meta-line { font-size: 12px; color: var(--ink-soft); margin-top: 16px; }

/* ---------------- Color swatch dot ---------------- */
.swatch.has-dot { display: inline-flex; align-items: center; gap: 7px; }
.swatch-dot { width: 13px; height: 13px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.15); flex-shrink: 0; }

/* ---------------- Recently viewed ---------------- */
.recently-viewed { padding: 10px 0 40px; }

/* ---------------- Cart summary — trust row ---------------- */
.trust-row { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.trust-row .ti { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-soft); }
.trust-row svg { flex-shrink: 0; color: var(--brass); }

/* ---------------- Checkout summary — line-item thumbnail ---------------- */
.summary-row.has-thumb { align-items: center; gap: 10px; }
.summary-row-thumb { width: 40px; height: 50px; object-fit: cover; object-position: top center; border-radius: 2px; border: 1px solid var(--line); flex-shrink: 0; }
.summary-row-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.summary-row-info .n { font-size: 13px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.summary-row-info .q { font-size: 11.5px; color: var(--ink-soft); }

@media (max-width: 480px) {
  .trust-row { gap: 12px; }
}
/* ---------------- Scroll reveal (fade + slide masuk saat kelihatan layar) ---------------- */
.reveal, .reveal-stagger { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.16,.8,.3,1); }
.reveal.is-visible, .reveal-stagger.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-stagger { opacity: 1; transform: none; transition: none; }
}

/* ---------------- Akun pelanggan (dashboard/profil/alamat/riwayat) ---------------- */
.account-wrap { display: grid; grid-template-columns: 200px 1fr; gap: 40px; max-width: 1000px; margin: 0 auto; padding: 48px 24px 100px; }
.account-nav { display: flex; flex-direction: column; gap: 2px; border-right: 1px solid var(--line); padding-right: 24px; }
.account-nav a { padding: 10px 12px; border-radius: 6px; font-size: 13.5px; color: var(--ink-soft); }
.account-nav a.active, .account-nav a:hover { background: var(--canvas-alt2, #FAF8F4); color: var(--ink); }
.account-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; margin-bottom: 16px; }
.account-order-row { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.account-order-row:last-child { border-bottom: none; }
@media (max-width: 760px) {
  .account-wrap { grid-template-columns: 1fr; }
  .account-nav { flex-direction: row; flex-wrap: wrap; border-right: none; border-bottom: 1px solid var(--line); padding-right: 0; padding-bottom: 12px; }
}

/* ---------------- Halaman Masuk/Daftar Akun (split-screen editorial) ---------------- */
.auth-split { display: grid; grid-template-columns: 1fr 1fr; min-height: 88vh; }
.auth-visual { position: relative; overflow: hidden; background: var(--canvas-alt); height: 100%; min-height: 88vh; }
.auth-visual img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.auth-visual::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(20,22,16,0.55) 0%, rgba(20,22,16,0.05) 45%);
}
.auth-visual-caption {
  position: absolute; left: 40px; bottom: 40px; z-index: 2; color: var(--white); max-width: 320px;
}
.auth-visual-caption .eyebrow { color: var(--brass-light); }
.auth-visual-caption h2 { color: var(--white); font-size: 1.6rem; margin: 8px 0 0; }
.auth-form-col {
  display: flex; align-items: center; justify-content: center; padding: 60px 24px; height: 100%; min-height: 88vh;
  position: relative; overflow: hidden;
  background: var(--canvas-alt2, #FAF8F4);
}
.auth-form-col::before {
  content: 'S';
  position: absolute; z-index: 0; pointer-events: none;
  font-family: var(--font-display); font-style: italic; font-weight: 600;
  font-size: 62vh; line-height: 1; color: transparent;
  -webkit-text-stroke: 1px rgba(166,124,82,0.10);
  right: -8%; bottom: -14%;
}
.auth-form-inner { position: relative; z-index: 1; width: 100%; max-width: 380px; }
.auth-form-inner .eyebrow { margin-bottom: 10px; }
.auth-form-inner h1 { font-size: 2.1rem; margin: 0 0 32px; }
.auth-form-inner .form-field { margin-bottom: 20px; }
.auth-form-inner .form-field label { letter-spacing: 0.08em; font-size: 11.5px; }
.auth-visual-caption { animation: auth-caption-in 1s cubic-bezier(.16,.8,.3,1) .2s both; }
.auth-form-inner { animation: auth-caption-in 0.9s cubic-bezier(.16,.8,.3,1) .1s both; }
@keyframes auth-caption-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .auth-visual-caption, .auth-form-inner { animation: none; }
}
.auth-form-inner .btn {
  width: 100%; margin-top: 10px;
  background: var(--ink); color: var(--white); border-color: var(--ink);
}
.auth-form-inner .btn:hover { background: var(--brass); border-color: var(--brass); color: var(--ink); }
.auth-switch { margin-top: 24px; font-size: 13.5px; color: var(--ink-soft); text-align: center; }
.auth-switch a { color: var(--signature); font-weight: 600; border-bottom: 1px solid var(--brass-light); padding-bottom: 1px; }
@media (max-width: 860px) {
  .auth-split { grid-template-columns: 1fr; height: auto; min-height: 0; }
  .auth-visual { display: none; }
  .auth-form-col { padding: 48px 24px 80px; height: auto; min-height: 0; }
  .auth-form-col::before { font-size: 40vh; opacity: 0.6; }
}
.account-form .btn { margin-top: 4px; }

/* ---------------- Editorial Split (Women/Men, dua campaign bersisian) ---------------- */
.editorial-split { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--white); }
.editorial-split-panel {
  position: relative; display: block; aspect-ratio: 4/5; overflow: hidden;
  background: var(--canvas-alt);
}
.editorial-split-panel img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .9s cubic-bezier(.16,.8,.3,1);
}
.editorial-split-panel:hover img { transform: scale(1.04); }
.editorial-split-panel::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(0deg, rgba(20,22,16,0.6) 0%, rgba(20,22,16,0) 45%);
  pointer-events: none;
}
.editorial-split-copy { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 32px; }
.editorial-split-copy .eyebrow { color: rgba(255,255,255,0.85); letter-spacing: 0.3em; font-size: 11px; }
.editorial-split-copy h3 {
  color: var(--white); font-size: clamp(1.5rem, 2.4vw, 2rem); margin: 10px 0 16px; font-weight: 500;
}
@media (max-width: 860px) {
  .editorial-split { grid-template-columns: 1fr; }
  .editorial-split-panel { aspect-ratio: 3/4; }
}

/* ---------------- Featured Collection (satu visual besar) ---------------- */
.featured-collection { position: relative; overflow: hidden; }
.featured-collection-media { position: relative; aspect-ratio: 21/9; min-height: 420px; overflow: hidden; }
.featured-collection-media img { width: 100%; height: 100%; object-fit: cover; }
.featured-collection-media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(20,22,16,0.65) 0%, rgba(20,22,16,0.05) 55%);
}
.featured-collection-copy {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 56px 8vw; text-align: center;
}
.featured-collection-copy .eyebrow { color: rgba(255,255,255,0.85); justify-content: center; margin: 0 auto 14px; display: inline-block; }
.featured-collection-copy h2 { color: var(--white); margin: 0 auto 12px; max-width: 560px; }
.featured-collection-copy p { color: rgba(255,255,255,0.82); max-width: 460px; margin: 0 auto 22px; }
.featured-collection-copy .hero-cta { justify-content: center; }
@media (max-width: 860px) {
  .featured-collection-media { aspect-ratio: 3/4; min-height: 0; }
  .featured-collection-copy { padding: 40px 24px; }
}

/* ---------------- Brand Statement (minimal, whitespace besar) ---------------- */
.brand-statement { padding: 130px 0; text-align: center; background: var(--white); }
.brand-statement .wrap { max-width: 720px; }
.brand-statement h2 {
  font-size: clamp(1.8rem, 3.4vw, 3rem); line-height: 1.35; font-weight: 500; margin: 0;
}
@media (max-width: 860px) { .brand-statement { padding: 80px 0; } }

/* ---------------- Final Campaign (sebelum footer) ---------------- */
.final-campaign { position: relative; overflow: hidden; }
.final-campaign-media { position: relative; aspect-ratio: 16/7; min-height: 380px; overflow: hidden; }
.final-campaign-media img { width: 100%; height: 100%; object-fit: cover; }
.final-campaign-media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(20,22,16,0.55) 0%, rgba(20,22,16,0.05) 60%);
}
.final-campaign-copy {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 50px 8vw; text-align: center;
}
.final-campaign-copy h2 { color: var(--white); margin: 0 0 18px; }
.final-campaign-copy .hero-cta { justify-content: center; }
@media (max-width: 860px) {
  .final-campaign-media { aspect-ratio: 3/4; min-height: 0; }
  .final-campaign-copy { padding: 36px 24px; }
}

/* Varian .hero-cta buat dipakai di atas background terang (bukan foto gelap) */
.hero-cta-ink { color: var(--ink); border-bottom-color: rgba(0,0,0,0.35); }
.hero-cta-ink:hover { color: var(--brass); border-color: var(--brass); }

/* ---------------- Capsule Editorial (heading di atas 2 foto Kerja/Santai) ---------------- */
.capsule-editorial-head { text-align: center; padding-top: 90px; padding-bottom: 40px; }
.capsule-editorial-head h2 { margin: 10px auto 0; max-width: 560px; }
.capsule-editorial-cta { text-align: center; padding-top: 36px; padding-bottom: 90px; }
.capsule-editorial-cta .hero-cta { justify-content: center; }
@media (max-width: 860px) {
  .capsule-editorial-head { padding-top: 56px; padding-bottom: 28px; }
  .capsule-editorial-cta { padding-top: 28px; padding-bottom: 56px; }
}

/* ---------------- Tab Unggulan/Terbaru (gabungan, ganti panel tanpa reload) ---------------- */
.product-tabs { display: flex; gap: 28px; align-items: baseline; }
.product-tab {
  background: none; border: none; padding: 0 0 6px; cursor: pointer;
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 500;
  color: var(--ink-soft); opacity: 0.55;
  border-bottom: 2px solid transparent;
  transition: opacity .25s ease, color .25s ease, border-color .25s ease;
}
.product-tab:hover { opacity: 0.85; }
.product-tab.is-active { color: var(--ink); opacity: 1; border-bottom-color: var(--brass); }
.product-tab-panel:not(.is-active) { display: none; }