/* ============================================================
   VERDENT — Shared Design System
   verdent.pk · Ancient Wisdom, Modern Ritual
   ============================================================ */

/* ── TOKENS ── */
:root {
  --ivory:        #FAF8F4;
  --ivory-mid:    #F2EDE4;
  --ivory-deep:   #EDE8DF;
  --ivory-darker: #E4DDD3;
  --charcoal:     #1E1C18;
  --charcoal-mid: #2C2A24;
  --charcoal-lt:  #3D3A34;
  --gold:         #C4A96B;
  --gold-light:   #D4BC8A;
  --gold-dark:    #A08848;
  --muted:        #6B6760;
  --muted-light:  #9B8B6E;
  --border:       rgba(196,169,107,0.2);
  --border-dark:  rgba(196,169,107,0.4);
  --red:          #B03030;
  --green:        #3A7A3A;

  --pad-x:      clamp(1.25rem, 5vw, 5rem);
  --pad-y:      clamp(3rem, 7vw, 6rem);
  --text-xs:    clamp(0.625rem,  1.8vw, 0.6875rem);
  --text-sm:    clamp(0.75rem,   2vw,   0.8125rem);
  --text-base:  clamp(0.8125rem, 2.2vw, 0.9375rem);
  --text-lg:    clamp(1rem,      2.5vw, 1.125rem);
  --text-sec:   clamp(1.75rem,   4vw,   2.5rem);
  --text-hero:  clamp(2.25rem,   6vw,   3.875rem);
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { font-family: 'Jost', sans-serif; background: var(--ivory); color: var(--charcoal); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { text-decoration: none; color: inherit; }
button, input, select, textarea { font-family: inherit; }
ul { list-style: none; }

/* ── SKIP LINK ── */
.skip-link { position: absolute; top: -100px; left: 1rem; z-index: 9999; background: var(--charcoal); color: var(--ivory); padding: 8px 16px; font-size: var(--text-xs); letter-spacing: 0.14em; transition: top 0.2s; }
.skip-link:focus { top: 1rem; }

/* ── ANNOUNCEMENT ── */
.announcement { background: var(--charcoal); color: var(--gold-light); text-align: center; padding: 9px var(--pad-x); font-size: var(--text-xs); letter-spacing: 0.18em; font-weight: 300; }

/* ── SITE NAV ── */
.site-nav { background: var(--ivory); border-bottom: 0.5px solid var(--border-dark); padding: 0 var(--pad-x); display: flex; align-items: center; justify-content: space-between; height: 64px; position: sticky; top: 0; z-index: 200; }
.nav-left { display: flex; align-items: center; }
.nav-links { display: flex; gap: 2.5rem; }
.nav-links a { font-size: var(--text-xs); letter-spacing: 0.18em; color: var(--muted); font-weight: 400; transition: color 0.25s; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--charcoal); }
.nav-logo { font-family: 'Cormorant Garamond', serif; font-size: clamp(17px,3vw,22px); letter-spacing: 0.3em; font-weight: 400; color: var(--charcoal); position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; }
.nav-right { display: flex; align-items: center; gap: clamp(0.6rem,1.5vw,1.2rem); }
.nav-icon-btn { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; color: var(--muted); transition: color 0.25s; position: relative; }
.nav-icon-btn:hover, .nav-icon-btn:focus-visible { color: var(--charcoal); outline: none; }
.nav-icon-btn svg { width: 19px; height: 19px; pointer-events: none; }
.cart-badge { position: absolute; top: 6px; right: 6px; width: 15px; height: 15px; background: var(--gold); border-radius: 50%; font-size: 8px; color: var(--charcoal); display: flex; align-items: center; justify-content: center; font-weight: 500; opacity: 0; transition: opacity 0.2s; pointer-events: none; }
.cart-badge.show { opacity: 1; }
.currency-pill { background: var(--charcoal); color: var(--gold-light); font-size: var(--text-xs); padding: 5px 12px; letter-spacing: 0.14em; cursor: pointer; transition: background 0.25s; border: none; height: 32px; white-space: nowrap; }
.currency-pill:hover { background: var(--charcoal-lt); }

/* hamburger */
.hamburger { display: none; flex-direction: column; gap: 5px; width: 44px; height: 44px; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; }
.hamburger span { display: block; width: 22px; height: 1.5px; background: var(--charcoal); transition: transform 0.3s, opacity 0.3s; transform-origin: center; }
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* mobile drawer */
.nav-drawer { position: fixed; inset: 0; background: var(--ivory); z-index: 190; transform: translateX(-100%); transition: transform 0.35s cubic-bezier(0.4,0,0.2,1); overflow-y: auto; padding: 80px var(--pad-x) 3rem; display: flex; flex-direction: column; }
.nav-drawer[aria-hidden="false"] { transform: translateX(0); }
.nav-drawer a { display: block; font-family: 'Cormorant Garamond', serif; font-size: clamp(1.75rem,6vw,2.25rem); font-style: italic; color: var(--charcoal); padding: 0.85rem 0; border-bottom: 0.5px solid var(--border); font-weight: 300; transition: color 0.2s; }
.nav-drawer a:hover { color: var(--gold-dark); }
.nav-drawer-secondary { margin-top: 2rem; display: flex; flex-direction: column; gap: 0.5rem; }
.nav-drawer-secondary a { font-family: 'Jost', sans-serif; font-size: var(--text-sm); font-style: normal; letter-spacing: 0.12em; color: var(--muted); border-bottom: none; padding: 0.4rem 0; }
.drawer-currency-row { display: flex; gap: 10px; margin-top: 2rem; flex-wrap: wrap; }
.drawer-currency-row button { font-size: var(--text-xs); letter-spacing: 0.12em; color: var(--muted); background: none; border: 0.5px solid var(--border-dark); padding: 7px 14px; cursor: pointer; font-family: 'Jost', sans-serif; transition: all 0.2s; min-height: 36px; }
.drawer-currency-row button:hover, .drawer-currency-row button.active { background: var(--charcoal); color: var(--ivory); border-color: var(--charcoal); }

/* ── CART OVERLAY + DRAWER ── */
.cart-overlay { position: fixed; inset: 0; background: rgba(30,28,24,0.6); z-index: 300; opacity: 0; pointer-events: none; transition: opacity 0.3s; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.cart-overlay.open { opacity: 1; pointer-events: auto; }
.cart-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 100vw); background: var(--ivory); z-index: 310; transform: translateX(110%); transition: transform 0.35s cubic-bezier(0.4,0,0.2,1); display: flex; flex-direction: column; box-shadow: -12px 0 48px rgba(0,0,0,0.14); }
.cart-drawer.open { transform: translateX(0); }
.cart-head { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: 1.25rem var(--pad-x); border-bottom: 0.5px solid var(--border); }
.cart-head-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(18px,3vw,22px); font-style: italic; font-weight: 300; color: var(--charcoal); }
.cart-head-count { font-size: var(--text-xs); color: var(--muted-light); font-weight: 300; letter-spacing: 0.1em; }
.cart-close-btn { width: 44px; height: 44px; background: none; border: none; cursor: pointer; font-size: 24px; color: var(--muted); display: flex; align-items: center; justify-content: center; transition: color 0.2s; line-height: 1; }
.cart-close-btn:hover { color: var(--charcoal); }
.cart-body { flex: 1; overflow-y: auto; padding: 1.5rem var(--pad-x); overscroll-behavior: contain; }
.cart-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4rem 0; gap: 12px; text-align: center; }
.cart-empty svg { width: 36px; height: 36px; color: var(--border-dark); }
.cart-empty p { font-size: var(--text-sm); color: var(--muted); font-weight: 300; }
.cart-empty a { margin-top: 8px; }
.cart-items-list { display: flex; flex-direction: column; gap: 1.5rem; }

/* cart item */
.cart-item { display: grid; grid-template-columns: 76px 1fr; gap: 1rem; position: relative; }
.ci-img { width: 76px; height: 95px; background: var(--ivory-mid); border: 0.5px solid var(--border); overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.ci-img img { width: 100%; height: 100%; object-fit: cover; }
.ci-body { display: flex; flex-direction: column; gap: 3px; padding-top: 2px; }
.ci-name { font-family: 'Cormorant Garamond', serif; font-size: 15px; font-style: italic; color: var(--charcoal); font-weight: 400; line-height: 1.3; }
.ci-variant { font-size: 10px; color: var(--muted-light); font-weight: 300; letter-spacing: 0.1em; }
.ci-price { font-size: var(--text-sm); font-weight: 400; color: var(--charcoal); margin-top: 2px; }
.ci-controls { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 8px; }
.ci-qty { display: flex; align-items: center; border: 0.5px solid var(--border-dark); height: 32px; }
.ci-qty button { width: 32px; height: 32px; background: none; border: none; cursor: pointer; font-size: 16px; color: var(--muted); display: flex; align-items: center; justify-content: center; transition: color 0.2s; }
.ci-qty button:hover { color: var(--charcoal); }
.ci-qty span { width: 30px; text-align: center; font-size: var(--text-sm); color: var(--charcoal); }
.ci-remove { font-size: 10px; color: var(--muted-light); background: none; border: none; cursor: pointer; letter-spacing: 0.1em; font-family: 'Jost', sans-serif; transition: color 0.2s; padding: 4px 0; }
.ci-remove:hover { color: var(--red); }

/* cart footer */
.cart-foot { flex-shrink: 0; padding: 1.25rem var(--pad-x) clamp(1.5rem,4vw,2.5rem); border-top: 0.5px solid var(--border); }
.cart-totals { margin-bottom: 1rem; }
.cart-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; }
.cart-row-label { font-size: var(--text-xs); color: var(--muted); font-weight: 300; letter-spacing: 0.1em; }
.cart-row-val { font-size: var(--text-sm); color: var(--charcoal); font-weight: 400; }
.cart-row.total .cart-row-label { font-size: var(--text-sm); color: var(--charcoal); font-weight: 400; letter-spacing: 0.12em; }
.cart-row.total .cart-row-val { font-size: clamp(17px,2.5vw,19px); font-weight: 400; }
.cart-free-shipping { font-size: 10px; color: var(--green); font-weight: 300; letter-spacing: 0.08em; margin-bottom: 1rem; display: flex; align-items: center; gap: 5px; }
.cart-free-shipping svg { width: 11px; height: 11px; }
.cart-shipping-bar { height: 2px; background: var(--border); border-radius: 2px; margin-bottom: 1rem; overflow: hidden; }
.cart-shipping-bar-fill { height: 100%; background: var(--gold); border-radius: 2px; transition: width 0.4s; }
.cart-shipping-msg { font-size: 10px; color: var(--muted-light); font-weight: 300; text-align: center; margin-bottom: 1rem; letter-spacing: 0.08em; }
.btn-checkout { width: 100%; background: var(--charcoal); color: var(--ivory); border: none; padding: 16px; font-size: var(--text-xs); letter-spacing: 0.2em; cursor: pointer; transition: background 0.25s; font-family: 'Jost', sans-serif; font-weight: 400; min-height: 52px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.btn-checkout:hover { background: var(--charcoal-lt); }
.btn-checkout svg { width: 14px; height: 14px; }
.cart-continue-btn { width: 100%; background: none; border: 0.5px solid var(--border-dark); color: var(--muted); padding: 12px; font-size: var(--text-xs); letter-spacing: 0.14em; cursor: pointer; font-family: 'Jost', sans-serif; margin-top: 8px; transition: all 0.2s; min-height: 44px; }
.cart-continue-btn:hover { border-color: var(--charcoal); color: var(--charcoal); }
.cart-trust { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 14px; flex-wrap: wrap; }
.cart-trust-item { display: flex; align-items: center; gap: 4px; font-size: 9px; letter-spacing: 0.1em; color: var(--muted-light); font-weight: 300; }
.cart-trust-item svg { width: 11px; height: 11px; color: var(--gold); }
.cart-also-like { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 0.5px solid var(--border); }
.cart-also-label { font-size: 9px; letter-spacing: 0.2em; color: var(--muted-light); font-weight: 300; text-transform: uppercase; margin-bottom: 1rem; }
.cart-also-items { display: flex; gap: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
.cart-also-item { flex-shrink: 0; width: 100px; cursor: pointer; }
.cart-also-img { width: 100px; height: 120px; background: var(--ivory-mid); border: 0.5px solid var(--border); margin-bottom: 6px; display: flex; align-items: center; justify-content: center; }
.cart-also-name { font-size: 10px; color: var(--charcoal); line-height: 1.3; font-family: 'Cormorant Garamond', serif; font-style: italic; }
.cart-also-price { font-size: 9.5px; color: var(--muted-light); margin-top: 2px; }

/* ── BUTTONS ── */
.btn-primary { background: var(--charcoal); color: var(--ivory); padding: 14px 32px; font-size: var(--text-xs); letter-spacing: 0.18em; border: none; cursor: pointer; font-family: 'Jost', sans-serif; font-weight: 400; transition: background 0.25s; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; }
.btn-primary:hover { background: var(--charcoal-lt); }
.btn-outline { background: transparent; color: var(--charcoal); padding: 13px 28px; font-size: var(--text-xs); letter-spacing: 0.18em; border: 0.5px solid var(--charcoal); cursor: pointer; font-family: 'Jost', sans-serif; font-weight: 400; transition: all 0.25s; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; }
.btn-outline:hover { background: var(--charcoal); color: var(--ivory); }
.btn-gold { background: transparent; color: var(--gold); border: 0.5px solid var(--gold); padding: 13px 28px; font-size: var(--text-xs); letter-spacing: 0.18em; cursor: pointer; font-family: 'Jost', sans-serif; font-weight: 300; transition: all 0.25s; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; }
.btn-gold:hover { background: var(--gold); color: var(--charcoal); }

/* ── LOCATION BAR ── */
.location-bar { background: var(--ivory-deep); border-top: 0.5px solid var(--border); border-bottom: 0.5px solid var(--border); padding: 11px var(--pad-x); display: flex; align-items: center; gap: 10px; font-size: var(--text-xs); color: var(--muted); font-weight: 300; flex-wrap: wrap; row-gap: 6px; }
.loc-dot { width: 7px; height: 7px; min-width: 7px; background: var(--gold); border-radius: 50%; }
.currency-switches { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: var(--text-xs); color: var(--muted-light); flex-wrap: wrap; }
.currency-switches button { color: var(--gold); background: none; border: none; cursor: pointer; transition: color 0.2s; letter-spacing: 0.08em; font-family: 'Jost', sans-serif; font-size: var(--text-xs); padding: 4px 2px; min-height: 32px; }
.currency-switches button:hover { color: var(--gold-dark); }

/* ── SECTION HELPERS ── */
.section-label { font-size: var(--text-xs); letter-spacing: 0.22em; color: var(--muted-light); font-weight: 300; margin-bottom: 6px; text-transform: uppercase; }
.section-title { font-family: 'Cormorant Garamond', serif; font-size: var(--text-sec); font-weight: 300; font-style: italic; color: var(--charcoal); line-height: 1.15; }
.gold-line { width: 36px; height: 1px; background: var(--gold); flex-shrink: 0; }
.eyebrow-row { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.eyebrow-text { font-size: var(--text-xs); letter-spacing: 0.22em; color: var(--muted-light); font-weight: 300; }

/* ── PRODUCT CARD ── */
.product-card { background: var(--ivory); border: 0.5px solid rgba(196,169,107,0.25); transition: border-color 0.3s; cursor: pointer; position: relative; }
.product-card:hover { border-color: var(--gold); }
.product-card:hover .pci { transform: scale(1.03); }
.product-img-wrap { overflow: hidden; position: relative; aspect-ratio: 4/5; display: flex; align-items: center; justify-content: center; }
.pci { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; transition: transform 0.5s ease; }
.pci img { width: 100%; height: 100%; object-fit: cover; }
.pi-accent { position: absolute; top: 12px; right: 12px; width: 7px; height: 7px; background: var(--gold); border-radius: 50%; }
.pi-badge { position: absolute; top: 12px; left: 12px; font-size: 8px; letter-spacing: 0.16em; padding: 4px 10px; z-index: 2; }
.pi-badge.hero-badge { background: var(--charcoal); color: var(--gold-light); }
.pi-badge.new-badge { background: var(--gold); color: var(--charcoal); }
.product-card-body { padding: clamp(0.875rem,2.5vw,1.1rem) clamp(0.9rem,2.5vw,1.3rem); }
.pc-cat { font-size: 9px; letter-spacing: 0.2em; color: var(--muted-light); font-weight: 300; margin-bottom: 4px; text-transform: uppercase; }
.pc-name { font-family: 'Cormorant Garamond', serif; font-size: clamp(15px,2.5vw,17px); font-style: italic; color: var(--charcoal); margin-bottom: 5px; font-weight: 400; line-height: 1.3; }
.pc-desc { font-size: var(--text-xs); color: var(--muted); line-height: 1.7; margin-bottom: 12px; font-weight: 300; }
.pc-footer { display: flex; align-items: center; justify-content: space-between; border-top: 0.5px solid var(--border); padding-top: 10px; gap: 6px; }
.pc-price { font-size: clamp(13px,2vw,14px); font-weight: 400; color: var(--charcoal); letter-spacing: 0.03em; line-height: 1.2; }
.pc-price-sub { font-size: 9.5px; color: var(--muted-light); font-weight: 300; margin-top: 1px; }
.pc-add { font-size: 10px; letter-spacing: 0.13em; color: var(--charcoal); background: none; border: none; cursor: pointer; font-family: 'Jost', sans-serif; font-weight: 400; transition: color 0.2s; padding: 6px 0; white-space: nowrap; min-height: 36px; }
.pc-add:hover { color: var(--gold-dark); }

/* ── BREADCRUMB ── */
.breadcrumb { display: flex; align-items: center; gap: 7px; font-size: var(--text-xs); letter-spacing: 0.12em; color: var(--muted-light); font-weight: 300; padding: 11px var(--pad-x); background: var(--ivory-deep); border-bottom: 0.5px solid var(--border); flex-wrap: wrap; }
.breadcrumb a { color: var(--muted-light); transition: color 0.2s; }
.breadcrumb a:hover { color: var(--charcoal); }

/* ── TOAST ── */
.toast-bar { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%) translateY(12px); background: var(--charcoal); color: var(--ivory); padding: 11px 22px; font-size: var(--text-xs); letter-spacing: 0.14em; font-weight: 300; opacity: 0; transition: opacity 0.3s, transform 0.3s; z-index: 600; pointer-events: none; white-space: nowrap; display: flex; align-items: center; gap: 8px; max-width: calc(100vw - 2rem); }
.toast-bar.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast-bar svg { width: 14px; height: 14px; color: var(--gold); flex-shrink: 0; }

/* ── FOOTER ── */
.site-footer { background: #171614; padding: clamp(2.5rem,5vw,4rem) var(--pad-x) clamp(1.5rem,3vw,3rem); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: clamp(1.5rem,4vw,3rem); padding-bottom: clamp(2rem,4vw,3rem); border-bottom: 0.5px solid rgba(255,255,255,0.06); margin-bottom: clamp(1.25rem,2.5vw,2rem); }
.footer-logo { font-family: 'Cormorant Garamond', serif; font-size: clamp(16px,2.5vw,20px); letter-spacing: 0.3em; color: #E8E0D0; margin-bottom: 0.9rem; font-weight: 400; }
.footer-tagline { font-size: var(--text-xs); color: var(--muted); line-height: 1.85; font-weight: 300; margin-bottom: 1.25rem; }
.footer-currencies { display: flex; gap: 0.9rem; flex-wrap: wrap; }
.footer-currency { font-size: 10px; color: var(--muted); font-weight: 300; letter-spacing: 0.06em; }
.footer-currency strong { color: var(--gold); font-weight: 400; }
.footer-col-title { font-size: 9px; letter-spacing: 0.22em; color: var(--muted-light); font-weight: 300; margin-bottom: 1.1rem; text-transform: uppercase; }
.footer-link { display: block; font-size: var(--text-sm); color: var(--muted); margin-bottom: 8px; font-weight: 300; transition: color 0.2s; }
.footer-link:hover { color: #E8E0D0; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; font-size: 10px; color: var(--muted); font-weight: 300; flex-wrap: wrap; gap: 8px; }

/* placeholder visuals */
.ph-text { font-size: 9.5px; letter-spacing: 0.14em; color: var(--muted-light); font-weight: 300; text-align: center; }

/* ── ANIMATIONS ── */
@keyframes fadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
.anim-up   { animation: fadeUp 0.85s ease both; }
.anim-up-2 { animation: fadeUp 0.85s 0.12s ease both; }
.anim-up-3 { animation: fadeUp 0.85s 0.24s ease both; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }

/* ── RESPONSIVE BREAKPOINTS ── */
@media (max-width: 860px) { .nav-links { display: none; } .hamburger { display: flex; } }
@media (max-width: 700px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px) { .footer-grid { grid-template-columns: 1fr; } }