:root{
  --bg:#ffffff; --surface:#faf9f7; --ink:#1a1a1a; --muted:#6b7280;
  --brand:#c59d5f; --brand-2:#a67c37; --chip:#f3f4f6; --border:#ececec;
  --radius:12px; --shadow:0 8px 24px rgba(0,0,0,.06); --focus:2px solid #1118271a;
}
*{ box-sizing:border-box }
html,body{ height:100% }
body{ margin:0; font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Inter,Arial; color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale }
.container{ max-width:1240px; margin:0 auto; padding:0 16px }

/* ===== Header ===== */
.site-header{ position:sticky; top:0; z-index:1100; background:var(--bg); border-bottom:1px solid var(--border) }
.top{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; padding:10px 0; gap:8px }
.brand{ justify-self:center; text-decoration:none; color:inherit; text-align:center; line-height:1 }
.logo{ font:700 clamp(26px,5vw,40px)/1.05 "Bodoni Moda","Didot",serif; letter-spacing:.14em; text-transform:uppercase }
.tag{ font-size:12px; letter-spacing:.28em; text-transform:uppercase; color:var(--muted) }
.actions{ display:flex; gap:8px }
.icon-btn{ width:40px;height:40px;border-radius:999px;display:inline-grid;place-items:center;border:1px solid var(--border);background:#fff;cursor:pointer;transition:box-shadow .2s ease, transform .15s ease }
.icon-btn:hover{ box-shadow:0 4px 12px rgba(0,0,0,.08) }
.icon-btn:active{ transform:translateY(1px) }
.icon-btn:focus-visible{ outline:var(--focus) }
.icon{ width:22px;height:22px;stroke:#111;fill:none;stroke-width:1.8 }
.badge{ position:relative; display:inline-grid; place-items:center; min-width:18px; height:18px; padding:0 5px; border-radius:9px; font-size:11px; font-weight:700; color:#fff; background:#111; translate:12px -12px }

/* Primary nav */
.navwrap{ background:#fff; border-top:1px solid var(--border); border-bottom:1px solid var(--border) }
.nav{ display:flex; align-items:center; gap:4px; padding:8px 0 }
.nav a{ font-weight:600; color:#2b2b2b; text-decoration:none; padding:10px 12px; border-radius:10px }
.nav a:hover{ background:var(--chip) }
.spacer{ flex:1 }
.chip{ background:var(--surface); color:#444; padding:6px 10px; border-radius:999px; font-size:12px; border:1px solid var(--border) }

/* Mobile popover */
.hamburger{ display:none }
.mobile-popover{ position:fixed; left:0; right:0; top:var(--pop-top,0); z-index:1000; background:#fff; border-bottom:1px solid var(--border); box-shadow:0 14px 28px rgba(0,0,0,.08); transform:translateY(-100%); transition:transform .22s ease; pointer-events:none }
.mobile-popover.open{ transform:translateY(0); pointer-events:auto }
.mobile-row{ display:flex; gap:8px; padding:12px 14px; overflow-x:auto; -webkit-overflow-scrolling:touch; white-space:nowrap }
.mobile-row a{ color:var(--ink); background:var(--surface); border:1px solid var(--border); padding:10px 12px; border-radius:999px; text-decoration:none; font-weight:600; flex:0 0 auto }
@media (max-width:900px){ .hamburger{ display:inline-grid } .nav{ display:none } }
@media (max-width:520px){ .tag{ display:none } }

/* ===== Main / Hero ===== */
main{ padding:28px 16px }
.hero-wrap{ max-width:1240px; margin:0 auto }
.hero-banner{ position:relative; width:100%; height:50vh; min-height:360px; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); background:#ddd; display:flex; align-items:center; justify-content:center; isolation:isolate }
.hero-bg{ position:absolute; inset:0; background:url("images/Earing\ 1\ A.png") center/cover no-repeat; transform:scale(1.02) }
.hero-overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.35)) }
.hero-content{ position:relative; z-index:1; color:#fff; text-align:center; padding:0 20px; max-width:720px }
.hero-content h1{ font-family:"Bodoni Moda","Didot",serif; font-size:clamp(28px,4.6vw,54px); letter-spacing:.06em; text-transform:uppercase; margin:0 0 12px }
.hero-content p{ font-size:16px; line-height:1.7; color:#f6f6f6; margin:0 0 22px }
.cta-btn{ display:inline-block; background:var(--brand); color:#fff; padding:10px 22px; border-radius:999px; font-weight:700; text-decoration:none; transition:transform .18s ease, background .18s ease, box-shadow .18s ease; box-shadow:0 6px 16px rgba(197,157,95,.28) }
.cta-btn:hover{ background:var(--brand-2); transform:translateY(-1px) }
.cta-btn:focus-visible{ outline:var(--focus) }
@media (prefers-reduced-motion:no-preference){
  .hero-bg{ animation:slow-zoom 12s ease-in-out both }
  @keyframes slow-zoom{ from{ transform:scale(1.02) } to{ transform:scale(1.07) } }
}

/* ===== Categories ===== */
.categories{ text-align:center; padding:60px 16px 70px; background:var(--surface); border-top:1px solid var(--border) }
.cat-heading{ font-family:"Bodoni Moda","Didot",serif; font-size:clamp(24px,4vw,34px); margin:0 0 28px; letter-spacing:.04em; color:var(--ink) }
.cat-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(120px,1fr)); gap:26px; justify-items:center; max-width:900px; margin:0 auto }
.cat-item{ text-decoration:none; color:var(--ink); transition: transform .18s ease, color .18s ease }
.cat-item img{ width:104px; height:104px; border-radius:50%; object-fit:cover; background:#f6f6f6; box-shadow:0 4px 10px rgba(0,0,0,.06); border:2px solid var(--border); transition: transform .18s ease, border-color .18s ease }
.cat-item span{ display:block; margin-top:10px; font-weight:600; font-size:15px }
.cat-item:hover img{ transform:scale(1.06); border-color:var(--brand) }
.cat-item:hover span{ color:var(--brand-2) }
@media (max-width:768px){
  .hero-banner{ height:42vh; min-height:300px; border-radius:10px }
  .hero-content h1{ font-size:28px }
  .hero-content p{ font-size:15px; margin-bottom:18px }
  .cta-btn{ padding:10px 18px; font-size:15px }
}
@media (max-width:600px){ .cat-grid{ gap:18px } .cat-item img{ width:90px; height:90px } }

/* ===== Products ===== */
.products{ padding:60px 0 90px }
.products-head{ display:flex; align-items:flex-end; gap:12px; margin:0 0 18px }
.products-head h2{ font-family:"Bodoni Moda","Didot",serif; font-size:clamp(22px,4vw,30px); margin:0 }
.products-head .view-all{ margin-left:auto; text-decoration:none; font-weight:600; color:#333 }
.products-head .view-all:hover{ text-decoration:underline }
.product-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px }
@media (max-width:1000px){ .product-grid{ grid-template-columns:repeat(3,1fr) } }
@media (max-width:700px){
  /* edge-to-edge tiles on mobile */
  .product-grid{ grid-template-columns:repeat(2,1fr); gap:16px; margin-inline:-16px }
}
@media (max-width:420px){ .product-grid{ grid-template-columns:1fr; margin-inline:-16px } }

.product-card{ background:#fff; border:1px solid var(--border); border-radius:0; box-shadow:var(--shadow); overflow:hidden; cursor:pointer }
.card-media{ position:relative; background:#f7f7f7; overflow:hidden }
/* full-bleed cover image inside card */
.card-media img{ width:100%; height:100%; display:block; object-fit:cover; aspect-ratio:1/1; transition:transform .25s ease }
.product-card:hover .card-media img{ transform:scale(1.03) }
.card-actions{ position:absolute; right:10px; top:10px; display:flex; flex-direction:column; gap:10px; opacity:0; transform:translateY(-6px); transition:.2s ease; pointer-events:none }
.product-card:hover .card-actions{ opacity:1; transform:translateY(0); pointer-events:auto }
.act-btn{ width:38px;height:38px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--border);background:#fff;cursor:pointer;box-shadow:0 6px 14px rgba(0,0,0,.08) }
.act-btn svg{ width:20px; height:20px; fill:none; stroke:#222; stroke-width:1.6 }
.act-btn.wish.active svg path{ fill:#e11d48; stroke:#e11d48 }

.add-btn{ width:100%; background:#111; color:#fff; border:0; padding:14px 12px; font-weight:700; letter-spacing:.06em; cursor:pointer }
.add-btn:hover{ filter:brightness(1.05) }
.p-title{ font-size:15px; margin:14px 12px 4px; text-align:center; font-weight:600 }
.p-price{ font-size:16px; margin:0 12px 16px; text-align:center; color:#333 }

/* ===== Quick View ===== */
.qv{ position:fixed; inset:0; background:rgba(0,0,0,.46); display:none; place-items:center; z-index:1200 }
.qv.open{ display:grid }
.qv-dialog{ width:min(920px,92vw); background:#fff; border-radius:16px; overflow:hidden; display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--border); box-shadow:0 20px 60px rgba(0,0,0,.25); position:relative }
@media (max-width:760px){ .qv-dialog{ grid-template-columns:1fr } }
.qv-media{ background:#f7f7f7; display:grid; place-items:center }
.qv-media img{ max-width:100%; height:auto; display:block; object-fit:contain }
.qv-info{ padding:18px }
.qv-title{ margin:0 0 8px; font-size:20px }
.qv-price{ margin:0 0 16px; font-size:18px; color:#333 }
.qv-add{ background:#111; color:#fff; border:0; padding:12px 16px; border-radius:10px; font-weight:700; cursor:pointer }
.qv-close{ position:absolute; top:10px; right:12px; width:36px; height:36px; border-radius:50%; border:1px solid var(--border); background:#fff; cursor:pointer; font-size:22px; line-height:1 }

/* ===== Search panel ===== */
.search-panel{ position:fixed; left:0; right:0; top:var(--pop-top,0); z-index:1001; background:#fff; border-bottom:1px solid var(--border); box-shadow:0 12px 28px rgba(0,0,0,.1); transform:translateY(-100%); transition:transform .22s ease; pointer-events:none }
.search-panel.open{ transform:translateY(0); pointer-events:auto }
.search-inner{ display:flex; align-items:center; gap:10px; padding:12px 16px; max-width:1240px; margin:0 auto }
.search-input{ flex:1; height:44px; border:1px solid var(--border); border-radius:999px; padding:0 16px 0 44px; font-size:15px; outline:none; background:#fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="%23666" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>') no-repeat 14px center }
.search-input:focus{ border-color:#d9d9d9; box-shadow:0 0 0 4px rgba(0,0,0,.03) }
.search-close{ height:40px; padding:0 12px; border-radius:10px; border:1px solid var(--border); background:#fff; cursor:pointer }
.search-suggest{ max-width:1240px; margin:8px auto 12px; padding:0 16px 12px; display:flex; gap:8px; flex-wrap:wrap }
.suggest-chip{ border:1px solid var(--border); background:var(--surface); padding:8px 12px; border-radius:999px; font-size:13px; cursor:pointer }

/* Prevent body scroll when overlays are open */
.body-lock{ overflow:hidden }

/* ===== Footer ===== */
.site-footer{ background:#0a0a0a; color:#f5f5f5; padding:64px 16px 0; border-top:1px solid #1c1c1c }
.footer-container{ display:grid; grid-template-columns:repeat(12,1fr); gap:28px; max-width:1240px; margin:0 auto 28px }
.footer-brand{ grid-column:span 4 }
.footer-links{ grid-column:span 2 }
.footer-newsletter{ grid-column:span 4 }
.footer-logo{ font-family:"Bodoni Moda","Didot",serif; font-size:30px; text-transform:uppercase; letter-spacing:.14em; margin:0 0 6px; color:#f9f9f9 }
.footer-tag{ font-size:13px; text-transform:uppercase; letter-spacing:.24em; color:#d1d5db; margin-bottom:16px }
.footer-social{ display:flex; gap:10px; flex-wrap:wrap }
.footer-social a{ display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:#1f1f1f; border:1px solid #2c2c2c; transition:background .2s ease, transform .2s ease }
.footer-social a:hover{ background:var(--brand); transform:translateY(-2px) }
.footer-social svg{ width:20px; height:20px; fill:#f3f3f3 }
.footer-links h3,.footer-newsletter h3{ font-size:16px; margin:0 0 12px; font-weight:700; color:#fff }
.footer-links ul{ list-style:none; padding:0; margin:0 }
.footer-links li{ margin:8px 0 }
.footer-links a{ color:#d1d5db; text-decoration:none; font-size:14px; transition:color .2s ease }
.footer-links a:hover{ color:var(--brand) }
.footer-newsletter p{ font-size:14px; color:#b3b3b3; margin:0 0 12px }
.newsletter-form{ display:flex; align-items:center; gap:8px; flex-wrap:nowrap; width:100%; max-width:520px }
.newsletter-form input{ flex:1; min-width:0; padding:12px 14px; border-radius:999px; border:1px solid #333; background:#1a1a1a; color:#fff; font-size:14px }
.newsletter-form input::placeholder{ color:#777 }
.newsletter-form button{ flex-shrink:0; background:var(--brand); color:#fff; border:0; border-radius:999px; padding:12px 18px; cursor:pointer; font-weight:700; transition:background .2s ease }
.newsletter-form button:hover{ background:var(--brand-2) }
.footer-bottom{ border-top:1px solid #1c1c1c; text-align:center; padding:18px 0; font-size:13px; color:#a3a3a3 }
.footer-bottom p{ margin:4px 0 }
@media (max-width:900px){
  .footer-container{ grid-template-columns:repeat(6,1fr) }
  .footer-brand{ grid-column:span 6 }
  .footer-links{ grid-column:span 3 }
  .footer-newsletter{ grid-column:span 6 }
}
@media (max-width:600px){
  .footer-container{ grid-template-columns:repeat(4,1fr); gap:22px; margin-bottom:18px }
  .footer-brand,.footer-links,.footer-newsletter{ grid-column:1 / -1 }
  .footer-logo{ font-size:26px }
  .footer-social a{ width:44px; height:44px }
  .newsletter-form{ max-width:100%; flex-direction:column; align-items:stretch; gap:10px }
  .newsletter-form button{ width:100% }
  .footer-bottom{ padding:16px 0 }
}

/* ===== PDP (product.html) ===== */
.pdp-wrap{ max-width:1240px; margin:0 auto; padding:28px 16px 80px }
.breadcrumb{ font-size:14px; color:#6b7280; margin-bottom:12px }
.breadcrumb a{ color:#444; text-decoration:none }
.pdp{ display:grid; grid-template-columns:1.2fr 1fr; gap:24px }
@media (max-width:900px){ .pdp{ grid-template-columns:1fr } }
.pdp-gallery{ background:#fff; border:1px solid var(--border); border-radius:14px; padding:10px; box-shadow:var(--shadow); display:grid; grid-template-columns:90px 1fr; gap:10px }
@media (max-width:700px){ .pdp-gallery{ grid-template-columns:1fr } }
.thumbs{ display:grid; gap:8px; align-content:start }
.thumb{ border:1px solid var(--border); border-radius:10px; overflow:hidden; background:#f7f7f7; cursor:pointer }
.thumb img{ width:100%; height:100%; object-fit:cover; display:block; aspect-ratio:1/1 }
.thumb.active{ outline:2px solid var(--brand) }
.main-media{ background:#f7f7f7; border:1px solid var(--border); border-radius:12px; display:grid; place-items:center; overflow:hidden }
.main-media img{ width:100%; height:auto; object-fit:contain }
.pdp-info{ background:#fff; border:1px solid var(--border); border-radius:14px; padding:16px; box-shadow:var(--shadow) }
.pdp-title{ font-family:"Bodoni Moda","Didot",serif; margin:0 0 6px; font-size:clamp(20px,3.6vw,30px) }
.pdp-price{ font-size:20px; font-weight:800; margin:0 0 12px }
.pdp-desc{ color:#444; line-height:1.7 }
.pdp-cta{ display:flex; gap:10px; margin:16px 0 }
.btn-primary{ background:#111; color:#fff; border:0; padding:12px 16px; border-radius:12px; font-weight:700; cursor:pointer }
.btn-wish{ border:1px solid var(--border); background:#fff; padding:12px 16px; border-radius:12px; font-weight:700; cursor:pointer }
.pdp-panel{ background:var(--surface); border:1px solid var(--border); padding:12px 14px; border-radius:12px; margin-top:14px }
.sticky-bar{ position:fixed; left:0; right:0; bottom:0; background:#fff; border-top:1px solid var(--border); box-shadow:0 -8px 24px rgba(0,0,0,.06); display:none; z-index:1200 }
.sticky-inner{ max-width:1240px; margin:0 auto; padding:10px 12px; display:flex; align-items:center; gap:12px }
.sticky-title{ font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.sticky-price{ font-weight:800; margin-left:auto }
.sticky-btn{ background:#111; color:#fff; border:0; padding:12px 16px; border-radius:12px; font-weight:700; cursor:pointer }
@media (max-width:900px){ .sticky-bar{ display:block } }

/* ===== PDP — Mobile slider & full-bleed on mobile ===== */
@media (max-width:700px){
  /* remove side padding so images touch screen edges */
  .pdp-wrap{ padding-left:0; padding-right:0 }
  /* hide desktop gallery pieces */
  .pdp-gallery{ padding:0; border:none; box-shadow:none; background:transparent }
  .thumbs{ display:none }
  .main-media{ display:none }
  /* slider that fills width */
  .pdp-slider{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; scroll-snap-type:x mandatory; border:0; border-radius:0; background:#000 }
  .pdp-track{ display:flex }
  .pdp-slide{ flex:0 0 100%; scroll-snap-align:center; display:grid; place-items:center; background:#000 }
  .pdp-slide img{ width:100%; height:100%; object-fit:cover; aspect-ratio:1/1; display:block }
  .pdp-dots{ display:flex; justify-content:center; gap:6px; margin:10px 0 0 }
  .pdp-dot{ width:8px; height:8px; border-radius:50%; background:#d1d5db; border:0; padding:0 }
  .pdp-dot[aria-current="true"]{ background:#111 }
}

/* ===== Add-to-cart feedback + Toast ===== */
.added-feedback{ pointer-events:none; opacity:.9 }
.btn-primary.added,.add-btn.added,.sticky-btn.added{ background:#16a34a !important; border-color:#16a34a !important; transform:translateY(-1px) }
.btn-primary.added::after,.add-btn.added::after,.sticky-btn.added::after{ content:" ✓"; font-weight:800 }
@keyframes bump{ 0%{transform:scale(1)} 20%{transform:scale(1.25)} 60%{transform:scale(.92)} 100%{transform:scale(1)} }
.badge.bump{ animation:bump 450ms ease }
.toast-wrap{ position:fixed; inset:auto 16px 16px auto; z-index:1300; display:grid; gap:8px }
@media (max-width:640px){ .toast-wrap{ left:16px; right:16px; bottom:16px } }
.toast{ background:#111; color:#fff; border-radius:12px; box-shadow:0 12px 28px rgba(0,0,0,.18); padding:12px 14px; display:flex; align-items:center; gap:10px; border:1px solid #1f1f1f; opacity:0; transform:translateY(6px); transition:opacity .2s ease, transform .2s ease }
.toast.show{ opacity:1; transform:translateY(0) }
.toast .t-img{ width:38px; height:38px; border-radius:8px; overflow:hidden; background:#f5f5f5; border:1px solid var(--border); display:grid; place-items:center }
.toast .t-img img{ width:100%; height:100%; object-fit:cover }
.toast .t-text{ font-size:14px; line-height:1.35 }
.toast .t-actions{ margin-left:auto; display:flex; gap:8px }
.toast .t-btn{ background:#fff; color:#111; border:0; border-radius:999px; padding:8px 12px; font-weight:700; cursor:pointer }
.toast .t-btn.secondary{ background:transparent; color:#fff; border:1px solid #2e2e2e }

.subscribe-popup {
  position: fixed;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #111;
  color: #fff;
  padding: 16px 26px;
  border-radius: 12px;
  opacity: 0;
  pointer-events: none;
  z-index: 3000;
  font-size: 15px;
  transition: opacity 0.4s ease;
}
.subscribe-popup.show { opacity: 1; }