/* ============================================================
   I'M SPECIAL — Fine Jewelry  |  Shared Stylesheet
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --ink:#0d0d0d;
  --ivory:#f9f7f4;
  --warm:#f2ede6;
  --gold:#b8965a;
  --gold-light:#d4b07a;
  --gold-pale:#f0e6d3;
  --steel:#888;
  --border:rgba(0,0,0,0.08);
  --font-serif:'Cormorant Garamond',Georgia,serif;
  --font-sans:'Jost',sans-serif;
}
html{scroll-behavior:smooth}
body{font-family:var(--font-sans);background:var(--ivory);color:var(--ink);font-weight:300;line-height:1.6;overflow-x:hidden}

/* ── HEADER ── */
.site-header{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(249,247,244,0.95);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.topbar{background:var(--ink);color:var(--gold-light);text-align:center;padding:10px 20px;font-size:11px;letter-spacing:.25em;text-transform:uppercase}
.nav{display:flex;justify-content:space-between;align-items:center;padding:18px 5%;max-width:1440px;margin:0 auto}
.logo{font-family:var(--font-serif);font-size:22px;font-weight:400;letter-spacing:.08em;color:var(--ink);text-decoration:none}
.logo em{font-style:italic;color:var(--gold)}
.nav-links{display:flex;gap:36px;list-style:none}
.nav-links a{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--steel);text-decoration:none;transition:color .25s}
.nav-links a:hover,.nav-links a.active{color:var(--ink)}
.nav-right{display:flex;gap:20px;align-items:center}
.nav-icon{background:none;border:none;cursor:pointer;padding:4px;color:var(--steel);transition:color .25s}
.nav-icon:hover{color:var(--ink)}
.nav-icon svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.5}
.cart-wrap{position:relative}
.cart-badge{position:absolute;top:-6px;right:-6px;background:var(--gold);color:#fff;font-size:9px;width:16px;height:16px;border-radius:50%;display:none;align-items:center;justify-content:center;font-weight:500}

/* ── HERO ── */
.hero{padding:160px 5% 100px;max-width:1440px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.hero-label{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:24px}
.hero-title{font-family:var(--font-serif);font-size:clamp(52px,6vw,88px);font-weight:300;line-height:1.05;margin-bottom:28px}
.hero-title em{font-style:italic;color:var(--gold)}
.hero-sub{color:var(--steel);font-size:15px;font-weight:300;line-height:1.8;max-width:380px;margin-bottom:40px}

/* ── BUTTONS ── */
.btn-primary{display:inline-block;background:var(--ink);color:var(--ivory);padding:16px 40px;font-size:11px;letter-spacing:.25em;text-transform:uppercase;text-decoration:none;transition:all .3s;cursor:pointer;border:none;font-family:var(--font-sans)}
.btn-primary:hover{background:var(--gold)}
.btn-outline{display:inline-block;border:1px solid var(--ink);color:var(--ink);padding:15px 40px;font-size:11px;letter-spacing:.25em;text-transform:uppercase;text-decoration:none;transition:all .3s;cursor:pointer;background:none;font-family:var(--font-sans)}
.btn-outline:hover{background:var(--ink);color:var(--ivory)}

/* ── HERO IMAGE ── */
.hero-img-wrap{position:relative}
.hero-img-wrap img{width:100%;height:540px;object-fit:cover;display:block}
.hero-tag{position:absolute;bottom:30px;left:30px;background:rgba(249,247,244,0.95);padding:16px 20px;font-size:11px;letter-spacing:.1em}
.hero-tag strong{display:block;font-size:14px;font-weight:500;margin-bottom:2px}

/* ── MARQUEE ── */
.marquee-bar{background:var(--ink);color:var(--gold-light);padding:14px 0;overflow:hidden;white-space:nowrap}
.marquee-inner{display:inline-flex;animation:marquee-scroll 22s linear infinite}
.marquee-item{font-size:11px;letter-spacing:.3em;text-transform:uppercase;padding:0 40px}
.marquee-dot{color:var(--gold)}
@keyframes marquee-scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ── SECTION ── */
.section{padding:100px 5%;max-width:1440px;margin:0 auto}
.section-header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:60px}
.section-label{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.section-title{font-family:var(--font-serif);font-size:clamp(32px,4vw,52px);font-weight:300;line-height:1.1}
.section-link{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--steel);text-decoration:none;border-bottom:1px solid var(--border);padding-bottom:2px;transition:all .25s}
.section-link:hover{color:var(--ink);border-color:var(--ink)}

/* ── PAGE HERO (non-home) ── */
.page-hero{background:var(--warm);padding:140px 5% 60px;text-align:center}
.page-hero-label{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.page-hero-title{font-family:var(--font-serif);font-size:clamp(40px,6vw,80px);font-weight:300}
.page-hero-title em{font-style:italic;color:var(--gold)}

/* ── CATEGORY HERO (full-bleed dark image + text overlay) ── */
.cat-hero{position:relative;height:92vh;overflow:hidden;margin-top:68px}
.cat-hero-bg{position:absolute;inset:0}
.cat-hero-bg img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.04)}
.cat-hero-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(13,13,13,.88) 30%,rgba(13,13,13,.1) 100%)}
.cat-hero-content{position:absolute;bottom:0;left:0;right:0;z-index:2;padding:0 5% 80px}
.cat-hero-label{font-size:11px;letter-spacing:.35em;text-transform:uppercase;color:var(--gold);margin-bottom:20px}
.cat-hero-title{font-family:var(--font-serif);font-size:clamp(52px,7vw,110px);font-weight:300;line-height:1;color:var(--ivory);margin-bottom:24px}
.cat-hero-title em{font-style:italic;color:var(--gold-light)}
.cat-hero-sub{font-size:15px;color:rgba(249,247,244,.6);max-width:540px;line-height:1.9;letter-spacing:.02em}
@media(max-width:768px){.cat-hero{height:80vh}.cat-hero-title{font-size:48px}}

/* ── PRODUCT GRID ── */
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.product-card{cursor:pointer}
.product-card:hover .product-img img{transform:scale(1.04)}
.product-img{overflow:hidden;background:var(--warm);margin-bottom:20px;position:relative;aspect-ratio:3/4}
.product-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease;display:block}
.product-badge-wrap{position:absolute;top:16px;left:16px;display:flex;flex-direction:column;gap:6px}
.badge{font-size:10px;letter-spacing:.15em;text-transform:uppercase;padding:5px 10px;display:inline-block}
.badge-new{background:var(--ink);color:var(--ivory)}
.badge-sale{background:var(--gold);color:#fff}
.product-actions{position:absolute;bottom:16px;right:16px;display:flex;flex-direction:column;gap:8px;opacity:0;transition:opacity .3s}
.product-card:hover .product-actions{opacity:1}
.action-btn{width:40px;height:40px;background:var(--ivory);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s}
.action-btn:hover{background:var(--gold)}
.action-btn:hover svg{stroke:#fff}
.action-btn svg{width:16px;height:16px;stroke:var(--ink);fill:none;stroke-width:1.5}
.product-meta{padding:0 4px}
.product-name{font-family:var(--font-serif);font-size:20px;font-weight:400;margin-bottom:6px;line-height:1.2}
.product-variant{font-size:11px;letter-spacing:.1em;color:var(--steel);margin-bottom:10px}
.product-price{display:flex;align-items:center;gap:12px}
.price-current{font-family:var(--font-serif);font-size:18px;color:var(--ink)}
.price-original{font-size:14px;color:var(--steel);text-decoration:line-through}
.price-save{font-size:10px;letter-spacing:.1em;color:var(--gold);background:var(--gold-pale);padding:3px 8px}
.color-swatches{display:flex;gap:6px;margin-top:10px}
.swatch{width:16px;height:16px;border-radius:50%;cursor:pointer;border:1px solid transparent;transition:all .2s}
.swatch:hover,.swatch.active{border-color:var(--ink);transform:scale(1.2)}
.swatch-gold{background:linear-gradient(135deg,#d4b07a,#b8965a)}
.swatch-silver{background:linear-gradient(135deg,#d0d0d0,#a8a8a8)}

/* ── FEATURED PRODUCT ── */
.featured-product{background:var(--warm);display:grid;grid-template-columns:1fr 1fr;min-height:600px}
.fp-gallery{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.fp-img{overflow:hidden}
.fp-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s}
.fp-img:hover img{transform:scale(1.03)}
.fp-img:first-child{grid-row:span 2}
.fp-info{padding:60px 60px;display:flex;flex-direction:column;justify-content:center}
.fp-label{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.fp-title{font-family:var(--font-serif);font-size:clamp(28px,3vw,44px);font-weight:300;line-height:1.15;margin-bottom:16px}
.fp-price-row{display:flex;align-items:center;gap:16px;margin-bottom:24px}
.fp-price{font-family:var(--font-serif);font-size:28px}
.fp-orig{font-size:16px;color:var(--steel);text-decoration:line-through}
.fp-desc{color:var(--steel);font-size:14px;line-height:1.9;margin-bottom:32px;max-width:380px}
.fp-colors{margin-bottom:28px}
.fp-colors-label{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--steel);margin-bottom:10px}
.fp-color-opts{display:flex;gap:10px}
.fp-color-btn{padding:8px 18px;font-size:11px;letter-spacing:.1em;border:1px solid var(--border);background:none;cursor:pointer;transition:all .25s;font-family:var(--font-sans);color:var(--ink)}
.fp-color-btn.active,.fp-color-btn:hover{border-color:var(--ink);background:var(--ink);color:var(--ivory)}
.fp-btns{display:flex;gap:12px;flex-wrap:wrap}
.qty-box{display:flex;align-items:center;border:1px solid var(--border)}
.qty-btn{width:40px;height:48px;background:none;border:none;font-size:18px;cursor:pointer;color:var(--ink);transition:background .2s}
.qty-btn:hover{background:var(--warm)}
.qty-val{width:40px;text-align:center;font-size:15px}

/* ── PROMO BAND ── */
.promo-band{background:var(--ink);padding:80px 5%;text-align:center}
.promo-band-title{font-family:var(--font-serif);font-size:clamp(28px,4vw,52px);font-weight:300;color:var(--ivory);margin-bottom:12px}
.promo-band-title em{font-style:italic;color:var(--gold-light)}
.promo-code-pill{display:inline-block;border:1px solid var(--gold);color:var(--gold);padding:12px 32px;font-size:13px;letter-spacing:.25em;text-transform:uppercase;margin:20px 0}
.promo-sub{color:rgba(249,247,244,.5);font-size:13px;letter-spacing:.1em}

/* ── TRUST BADGES ── */
.trust-row{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--border);border-left:1px solid var(--border)}
.trust-item{border-right:1px solid var(--border);border-bottom:1px solid var(--border);padding:40px 30px;text-align:center}
.trust-icon{width:36px;height:36px;margin:0 auto 16px;stroke:var(--gold);fill:none;stroke-width:1.2}
.trust-name{font-family:var(--font-serif);font-size:17px;margin-bottom:6px}
.trust-desc{font-size:12px;color:var(--steel);letter-spacing:.03em}

/* ── FOOTER ── */
footer{background:var(--ink);color:var(--ivory);padding:80px 5% 40px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:60px;max-width:1440px;margin:0 auto 60px;padding-bottom:60px;border-bottom:1px solid rgba(255,255,255,.08)}
.footer-brand{font-family:var(--font-serif);font-size:26px;font-weight:300;color:var(--ivory);margin-bottom:16px}
.footer-brand em{font-style:italic;color:var(--gold-light)}
.footer-tagline{font-size:13px;color:rgba(255,255,255,.4);line-height:1.8;max-width:240px}
.footer-heading{font-size:11px;letter-spacing:.25em;text-transform:uppercase;color:var(--gold-light);margin-bottom:20px}
.footer-links{list-style:none;display:flex;flex-direction:column;gap:10px}
.footer-links a{font-size:13px;color:rgba(255,255,255,.4);text-decoration:none;transition:color .25s}
.footer-links a:hover{color:var(--ivory)}
.footer-bottom{max-width:1440px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;font-size:12px;color:rgba(255,255,255,.3)}

/* ── CART DRAWER ── */
.drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:200;opacity:0;visibility:hidden;transition:all .3s}
.drawer-overlay.open{opacity:1;visibility:visible}
.cart-drawer{position:fixed;top:0;right:-480px;width:480px;height:100vh;background:var(--ivory);z-index:201;transition:right .4s cubic-bezier(.25,.46,.45,.94);display:flex;flex-direction:column;overflow:hidden}
.cart-drawer.open{right:0}
.drawer-head{padding:32px 36px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}
.drawer-title{font-family:var(--font-serif);font-size:24px;font-weight:400}
.close-btn{background:none;border:none;cursor:pointer;font-size:20px;color:var(--steel);padding:4px}
.drawer-body{flex:1;overflow-y:auto;padding:30px 36px}
.cart-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:200px;text-align:center;color:var(--steel)}
.cart-empty-icon{font-family:var(--font-serif);font-size:60px;opacity:.2;margin-bottom:16px}
.drawer-foot{padding:24px 36px;border-top:1px solid var(--border);background:var(--warm)}
.drawer-total{display:flex;justify-content:space-between;margin-bottom:20px;font-size:14px}
.drawer-total-price{font-family:var(--font-serif);font-size:26px;color:var(--gold)}

/* ── TOAST ── */
.toast{position:fixed;bottom:40px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--ink);color:var(--ivory);padding:14px 28px;font-size:12px;letter-spacing:.1em;opacity:0;transition:all .4s;z-index:300;pointer-events:none;white-space:nowrap}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── EARRINGS GALLERY ── */
.earrings-mosaic{display:grid;grid-template-columns:1fr 1fr;gap:3px}
.earrings-mosaic .mosaic-2{display:grid;grid-template-columns:1fr 1fr;gap:3px}
.mosaic-img{overflow:hidden;aspect-ratio:1}
.mosaic-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.mosaic-img:hover img{transform:scale(1.04)}
.earring-info-row{display:grid;grid-template-columns:1fr 1fr;gap:3px;margin-top:3px}
.earring-info{padding:32px 28px;background:var(--ivory)}

/* ── CHECKOUT ── */
.checkout-wrap{display:grid;grid-template-columns:1fr 1fr;gap:80px;max-width:1300px;margin:0 auto;padding:140px 5% 80px}
.checkout-form-col{}
.order-summary-col{position:sticky;top:120px;height:fit-content}
.form-section{margin-bottom:40px}
.form-section-title{font-family:var(--font-serif);font-size:22px;font-weight:400;margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid var(--border)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.field-row.full{grid-template-columns:1fr}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--steel)}
.field input,.field select{padding:14px 16px;border:1px solid var(--border);background:var(--ivory);font-family:var(--font-sans);font-size:14px;color:var(--ink);outline:none;transition:border-color .2s;-webkit-appearance:none}
.field input:focus,.field select:focus{border-color:var(--ink)}
.coupon-row{display:flex;gap:10px;margin-bottom:16px}
.coupon-row input{flex:1;padding:14px 16px;border:1px solid var(--border);background:var(--ivory);font-family:var(--font-sans);font-size:13px;outline:none;letter-spacing:.1em;text-transform:uppercase}
.coupon-row input:focus{border-color:var(--gold)}
.order-summary{background:var(--warm);padding:36px}
.order-summary-title{font-family:var(--font-serif);font-size:22px;font-weight:400;margin-bottom:28px}
.order-item{display:flex;gap:16px;margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid var(--border)}
.order-item:last-of-type{border-bottom:none}
.order-item-img{width:64px;height:64px;background:var(--ivory);flex-shrink:0;overflow:hidden}
.order-item-img img{width:100%;height:100%;object-fit:cover}
.order-item-name{font-family:var(--font-serif);font-size:16px}
.order-item-variant{font-size:11px;color:var(--steel);letter-spacing:.05em;margin-top:2px}
.order-item-price{font-family:var(--font-serif);font-size:16px;color:var(--gold);margin-left:auto;flex-shrink:0}
.order-totals{margin-top:20px;padding-top:20px;border-top:1px solid var(--border)}
.total-line{display:flex;justify-content:space-between;font-size:13px;color:var(--steel);margin-bottom:8px}
.total-line.grand{font-family:var(--font-serif);font-size:22px;color:var(--ink);margin-top:16px;padding-top:16px;border-top:1px solid var(--border)}
.total-line.discount{color:var(--gold)}
.confirm-banner{background:var(--warm);border:1px solid var(--gold);padding:40px;text-align:center;margin-top:40px}
.confirm-icon{font-family:var(--font-serif);font-size:48px;color:var(--gold);margin-bottom:12px}
.confirm-title{font-family:var(--font-serif);font-size:28px;font-weight:400;margin-bottom:8px}
.confirm-sub{font-size:13px;color:var(--steel)}

/* ── RESPONSIVE ── */
@media(max-width:1024px){
  .product-grid{grid-template-columns:repeat(2,1fr)}
  .hero{grid-template-columns:1fr;gap:40px;padding-top:130px}
  .hero-img-wrap img{height:400px}
  .featured-product{grid-template-columns:1fr}
  .fp-info{padding:40px}
  .trust-row{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr;gap:40px}
  .checkout-wrap{grid-template-columns:1fr;gap:40px}
  .order-summary-col{position:static}
}
@media(max-width:768px){
  .nav-links{display:none}
  .product-grid{grid-template-columns:repeat(2,1fr) !important;gap:16px}
  .product-name{font-size:15px}
  .product-variant{font-size:10px}
  .price-current{font-size:15px}
  .price-original{font-size:12px}
  .price-save{display:none}
  .product-actions{opacity:1}
  .trust-row{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr}
  .fp-gallery{grid-template-columns:1fr}
  .fp-img:first-child{grid-row:span 1}
  .cart-drawer{width:100%;right:-100%}
  .hero-title{font-size:42px}
  .earrings-mosaic{grid-template-columns:1fr}
  .earring-info-row{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr}
  .section-header{flex-direction:column;align-items:flex-start;gap:20px}
  .filter-bar{flex-wrap:wrap;overflow-x:unset;-webkit-overflow-scrolling:unset;gap:8px;padding-bottom:0;scrollbar-width:unset;margin-bottom:0 !important}
  .filter-bar::-webkit-scrollbar{display:none}
  .filter-btn{white-space:nowrap;flex-shrink:0;padding:10px 18px;flex:1;min-width:calc(33.33% - 8px);text-align:center}
  .section{padding:60px 4%}
}