/* ─── SHARED STYLES ── Pehrawa Boutique ─── */
/* Used by both index.html (landing page) and product pages. */

/* ─── CUSTOM PROPERTIES ─── */
:root{
  --ink:#3a2a17;--ink-soft:#6b553a;
  --gold:#b8892f;--gold-deep:#8a6420;--gold-light:#d9b76b;
  --teal:#1f6b7a;--teal-deep:#164e59;
  --green-deep:#1d4028;--green-mid:#2a5a3a;
  --cream:#faf4e6;--parchment:#f5ead0;--parchment-warm:#f3e7cc;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Inter',system-ui,-apple-system,sans-serif;
  --bg-m-maxh:65;--bg-m-scale:1.15;--bg-m-x:0;--bg-m-y:90;
  --bg-d-width:52;--bg-d-scale:1.2;--bg-d-x:0;--bg-d-y:80;
}

/* ─── BASE RESET ─── */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:88px;background:var(--parchment)}
body{font-family:var(--sans);color:var(--ink);line-height:1.55;min-height:100vh;background:transparent;-webkit-font-smoothing:antialiased}
.nav,main,footer,.hero-cta,.scroll-cue{position:relative}
main,footer{z-index:1}
img{display:block;max-width:100%}
a{color:var(--teal-deep);text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;letter-spacing:0.3px;color:var(--ink)}

/* ─── BACKGROUND ARTWORK ─── */
.bg-stage{position:fixed;inset:0;z-index:0;background:radial-gradient(circle at 8% 18%,rgba(184,137,47,0.18) 0%,transparent 28%),radial-gradient(circle at 92% 22%,rgba(184,137,47,0.18) 0%,transparent 28%),radial-gradient(circle at 6% 82%,rgba(184,137,47,0.14) 0%,transparent 30%),radial-gradient(circle at 94% 78%,rgba(184,137,47,0.14) 0%,transparent 30%),linear-gradient(180deg,rgba(184,137,47,0.06) 0%,rgba(184,137,47,0.02) 40%,rgba(184,137,47,0) 60%),var(--parchment);overflow:hidden}
.bg-stage .art-wrap{position:absolute;top:0;left:50%;transform:translateX(-50%);width:clamp(30vw,calc(var(--bg-d-width)*1vw),95vw);max-width:1100px;height:100%;overflow:hidden}
.bg-stage img,.bg-stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center top;transform:translate(calc(var(--bg-d-x)*1px),calc(var(--bg-d-y)*1px)) scale(var(--bg-d-scale));transform-origin:center top;transition:transform .2s cubic-bezier(.2,.7,.2,1)}
.bg-stage video{display:none}
.bg-stage video.is-loaded{display:block}
.bg-stage [data-variant="mobile"]{display:none}
.bg-stage [data-variant="desktop"]{display:block}
.bg-stage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:60%;background:linear-gradient(180deg,rgba(245,234,208,0) 0%,rgba(245,234,208,0.30) 25%,rgba(245,234,208,0.78) 60%,rgba(245,234,208,1) 100%)}

/* ─── STICKY NAV ─── */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:0.85rem 2.5rem;background:rgba(245,234,208,0.94);backdrop-filter:saturate(1.2) blur(10px);-webkit-backdrop-filter:saturate(1.2) blur(10px);box-shadow:0 2px 14px rgba(58,42,23,0.10);border-bottom:1px solid rgba(184,137,47,0.35)}
.brand{display:flex;align-items:center;gap:0.7rem;font-family:var(--serif);color:var(--ink);text-shadow:0 1px 0 rgba(255,255,255,0.6)}
.brand-mark{width:38px;height:38px;border-radius:999px;border:2px solid var(--cream);box-shadow:0 0 0 1.5px var(--gold-deep),0 4px 10px rgba(58,42,23,0.25);object-fit:cover;background:var(--parchment)}
.brand-name{font-size:1.4rem;font-weight:600;letter-spacing:1px}
.brand-name em{font-style:italic;font-weight:500;color:var(--gold-deep)}
.nav-links{display:flex;align-items:center;gap:2rem;list-style:none}
.nav-links a{font-family:var(--sans);font-size:0.78rem;font-weight:600;letter-spacing:1.8px;text-transform:uppercase;color:var(--ink);padding:0.4rem 0;position:relative;transition:color 0.2s;text-shadow:0 1px 0 rgba(255,255,255,0.5)}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1.5px;background:var(--gold-deep);transform:scaleX(0);transform-origin:center;transition:transform 0.3s ease}
.nav-links a:hover,.nav-links a.is-active{color:var(--gold-deep)}
.nav-links a:hover::after,.nav-links a.is-active::after{transform:scaleX(1)}
.nav-cta{display:flex;align-items:center;gap:0.5rem;font-family:var(--sans);font-size:0.72rem;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--cream);background:linear-gradient(180deg,var(--green-mid) 0%,var(--green-deep) 100%);border:1px solid var(--gold);border-radius:999px;padding:0.6rem 1.1rem;box-shadow:0 0 0 1px rgba(184,137,47,0.25),0 4px 10px rgba(29,64,40,0.25);transition:transform 0.2s,filter 0.2s}
.nav-cta:hover{transform:translateY(-1px);filter:brightness(1.12)}
.nav-cta svg{width:14px;height:14px}
.nav-toggle{display:none;width:38px;height:38px;align-items:center;justify-content:center;border-radius:8px;color:var(--ink)}
.nav-toggle svg{width:22px;height:22px}

/* ─── PRODUCT CARD (single source of truth — image area always 3:4) ─── */
.product-card{flex:0 0 auto;width:230px;height:auto;background:linear-gradient(180deg,#fdf6e3 0%,#f0e2c2 100%);border:1px solid var(--gold-light);border-radius:14px;padding:0.85rem;display:flex;flex-direction:column;position:relative;box-shadow:inset 0 0 0 1px rgba(255,255,255,0.5),0 6px 18px rgba(58,42,23,0.18);transform:rotate(var(--tilt,-1.2deg));transition:transform 0.4s ease,box-shadow 0.4s ease}
.product-card:nth-child(2n){--tilt:1.4deg}
.product-card:nth-child(3n){--tilt:-0.6deg}
.product-card:nth-child(5n){--tilt:0.9deg}
.product-card:hover{transform:rotate(0deg) translateY(-6px) scale(1.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.6),0 16px 32px rgba(58,42,23,0.28);z-index:3}
.heart-btn{position:absolute;top:0.75rem;right:0.75rem;width:30px;height:30px;background:rgba(255,255,255,0.7);border-radius:999px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(184,137,47,0.35);color:var(--gold-deep);z-index:2}
.heart-btn svg{width:15px;height:15px}
.product-image{aspect-ratio:4/5;width:100%;border-radius:8px;background:rgba(255,255,255,0.35);display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.product-image img{width:100%;height:100%;object-fit:cover;border-radius:8px;transition:opacity 0.3s ease}
.product-image .swap-dots{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);display:flex;gap:4px;pointer-events:none}
.product-image .swap-dots span{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,0.5)}
.product-image .swap-dots span.active{background:rgba(255,255,255,0.95)}
.placeholder-mark{font-family:var(--serif);font-size:2.4rem;color:rgba(184,137,47,0.45);letter-spacing:4px;user-select:none}
.product-foot{margin-top:0.75rem;text-align:center}
.product-name{font-family:var(--serif);font-size:0.95rem;color:var(--ink-soft);margin-bottom:0.2rem;font-style:italic;min-height:1.1em}
.product-price{font-family:var(--sans);font-weight:500;font-size:0.92rem;color:var(--ink);margin-bottom:0.5rem;letter-spacing:-0.005em;font-variant-numeric:tabular-nums lining-nums}
.card-stars{display:flex;align-items:center;justify-content:center;gap:1px;margin:0.15rem 0 0.1rem}
.card-stars svg{flex-shrink:0}
.card-stars-count{font-family:var(--sans);font-size:0.65rem;color:var(--ink-soft);margin-left:3px;letter-spacing:0}
.add-cart{width:100%;background:linear-gradient(180deg,var(--green-mid) 0%,var(--green-deep) 100%);color:var(--cream);border:1px solid var(--gold);border-radius:8px;padding:0.5rem;font-size:0.72rem;font-weight:600;letter-spacing:1.5px;text-transform:uppercase}

/* ─── BUTTONS ─── */
.btn{display:inline-flex;align-items:center;gap:0.5rem;font-family:var(--sans);font-size:0.78rem;font-weight:600;letter-spacing:1.8px;text-transform:uppercase;border-radius:999px;padding:0.85rem 1.5rem;transition:transform 0.2s,filter 0.2s,box-shadow 0.2s}
.btn-primary{color:var(--cream);background:linear-gradient(180deg,var(--green-mid) 0%,var(--green-deep) 100%);border:1px solid var(--gold);box-shadow:0 0 0 1px rgba(184,137,47,0.25),0 6px 14px rgba(29,64,40,0.28)}
.btn-primary:hover{transform:translateY(-2px);filter:brightness(1.12)}
.btn-secondary{color:var(--ink);background:rgba(255,255,255,0.55);border:1px solid var(--gold-deep)}
.btn-secondary:hover{background:#fff;color:var(--gold-deep)}
.btn svg{width:14px;height:14px}
.wa-btn{display:inline-flex;align-items:center;gap:0.7rem;font-family:var(--sans);font-size:0.95rem;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:#fff;background:linear-gradient(180deg,#26d367 0%,#128c7e 100%);border:1px solid #0e6e60;border-radius:999px;padding:1.1rem 2rem;box-shadow:inset 0 0 0 1px rgba(255,255,255,0.25),0 8px 22px rgba(18,140,126,0.4);transition:transform 0.25s,filter 0.25s}
.wa-btn:hover{transform:translateY(-2px) scale(1.02);filter:brightness(1.08);color:#fff}
.wa-btn svg{width:22px;height:22px}

/* ─── FOOTER ─── */
footer{text-align:center;padding:2.5rem 1rem 1.5rem;color:var(--ink-soft);font-size:0.78rem;letter-spacing:1.5px;background:linear-gradient(180deg,rgba(245,234,208,0.85) 0%,rgba(245,234,208,0.95) 100%);border-top:1px solid rgba(184,137,47,0.25)}
footer .bilingual{font-family:var(--serif);font-style:italic;font-size:1rem;letter-spacing:0.5px;color:var(--ink);margin-bottom:0.4rem}

/* ─── MULTI-COLUMN FOOTER ─── */
.site-footer{padding:3rem 2rem 1.5rem;background:linear-gradient(180deg,rgba(245,234,208,0.85) 0%,rgba(245,234,208,0.95) 100%);border-top:1px solid rgba(184,137,47,0.25);color:var(--ink-soft);font-size:0.78rem;letter-spacing:1.5px}
.footer-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;max-width:800px;margin:0 auto 2rem}
.footer-col{display:flex;flex-direction:column;gap:0.4rem}
.footer-col h4{font-family:var(--sans);font-size:0.68rem;font-weight:600;letter-spacing:2.5px;text-transform:uppercase;color:var(--gold-deep);margin-bottom:0.4rem}
.footer-col a{font-family:var(--sans);font-size:0.82rem;color:var(--ink-soft);transition:color 0.2s;letter-spacing:0.5px}
.footer-col a:hover{color:var(--gold-deep)}
.footer-bottom{text-align:center}
.footer-bottom .bilingual{font-family:var(--serif);font-style:italic;font-size:1rem;letter-spacing:0.5px;color:var(--ink);margin-bottom:0.4rem}
@media(max-width:720px){.footer-cols{grid-template-columns:1fr 1fr;gap:1.5rem}.site-footer{padding:2rem 1.25rem 1.25rem}}
@media(max-width:400px){.footer-cols{grid-template-columns:1fr;gap:1.25rem}}

/* ─── MOBILE DRAWER ─── */
.mobile-drawer{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(245,234,208,0.98);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.75rem;transform:translateY(-100%);transition:transform 0.4s cubic-bezier(.6,.05,.2,1)}
.mobile-drawer.is-open{transform:translateY(0)}
.mobile-drawer a{font-family:var(--serif);font-size:1.6rem;color:var(--ink);letter-spacing:0.5px}
.mobile-drawer a em{color:var(--gold-deep);font-weight:500}
.mobile-drawer-close{position:absolute;top:1rem;right:1.25rem;width:40px;height:40px;border-radius:999px;display:flex;align-items:center;justify-content:center;color:var(--ink)}
.mobile-drawer-close svg{width:24px;height:24px}

/* ─── RESPONSIVE (shared elements only) ─── */
@media(max-width:1080px){.nav{padding:0.75rem 1.25rem;gap:0.6rem}.nav-links{gap:1.1rem}.nav-links a{font-size:0.7rem;letter-spacing:1.2px;padding:0.3rem 0}.brand-name{font-size:1.05rem;letter-spacing:0.5px}.brand-mark{width:32px;height:32px;font-size:1.05rem}.nav-cta{font-size:0.66rem;padding:0.5rem 0.85rem;letter-spacing:1px}.nav-cta svg{width:12px;height:12px}}
@media(max-width:940px){.brand-name{display:none}}
@media(max-width:900px){.nav{padding:0.7rem 1rem;gap:0.5rem}.nav-links{gap:0.85rem}.nav-links a{font-size:0.66rem;letter-spacing:1px;padding:0.3rem 0}.brand-mark{width:30px;height:30px;font-size:1.05rem}.nav-cta{font-size:0.62rem;padding:0.45rem 0.75rem;letter-spacing:0.8px}.nav-cta svg{width:11px;height:11px}}
@media(max-width:720px){.footer-cols{grid-template-columns:1fr;gap:1.5rem;text-align:center}.site-footer{padding:2rem 1rem 1.25rem}.bg-stage .art-wrap{width:100%;height:auto;max-height:calc(var(--bg-m-maxh)*1vh);top:0}.bg-stage [data-variant="desktop"]{display:none}.bg-stage [data-variant="mobile"]{display:block;position:relative;inset:auto;width:100%;height:auto;max-height:calc(var(--bg-m-maxh)*1vh);object-fit:contain;object-position:center top;transform:translate(calc(var(--bg-m-x)*1px),calc(var(--bg-m-y)*1px)) scale(var(--bg-m-scale));transform-origin:center top}.nav{padding:0.55rem 0.75rem;gap:0.4rem;justify-content:space-between}.brand-name{display:none}.nav-links{display:none}.nav-toggle{display:flex}.nav-cta span{display:none}.nav-cta{padding:0.45rem 0.55rem}.nav-cta svg{width:13px;height:13px}.product-card{width:240px;height:auto;padding:0.7rem}.product-price{font-size:0.85rem}.add-cart{font-size:0.7rem;padding:0.5rem}footer{padding:2rem 1rem 1.25rem}.wa-btn{font-size:0.85rem;padding:0.95rem 1.5rem}}

/* ─── REDUCED MOTION ─── */
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ─── FREE-SHIPPING ANNOUNCEMENT BAR (universal — injected by shared.js) ─── */
.ship-bar{position:relative;z-index:5;display:flex;align-items:center;justify-content:center;gap:0.5rem;padding:0.5rem 1rem;background:linear-gradient(90deg,#1d4028 0%,#2a5a3a 100%);color:#fdf6e3;font-family:var(--sans);font-size:0.74rem;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;text-align:center;border-bottom:1px solid var(--gold-deep)}
.ship-bar svg{width:14px;height:14px;color:var(--gold);flex:0 0 14px}
.ship-bar .sb-sep{opacity:0.5}
.ship-bar .sb-toggle{margin-left:auto;background:rgba(253,246,227,0.15);color:#fdf6e3;border:1px solid rgba(253,246,227,0.35);border-radius:999px;padding:0.2rem 0.65rem;font:inherit;letter-spacing:1.2px;cursor:pointer;transition:background 0.15s,transform 0.15s}
.ship-bar .sb-toggle:hover{background:rgba(253,246,227,0.28);transform:translateY(-1px)}
.ship-bar .sb-toggle:active{transform:translateY(0)}
@media(max-width:600px){.ship-bar{font-size:0.66rem;letter-spacing:1.1px;padding:0.45rem 0.75rem;gap:0.4rem}.ship-bar .sb-sep,.ship-bar .sb-extra{display:none}.ship-bar .sb-toggle{padding:0.18rem 0.55rem;font-size:0.62rem}}

/* ─── SECTION (shared layout container) ─── */
.section{position:relative;z-index:2;padding:5rem 1.5rem;background:transparent}
@media(max-width:720px){.section{padding:3.5rem 1rem}}

/* ─── MARQUEE + TESTIMONIALS (shared so PDPs reuse the homepage carousel) ─── */
.marquee{position:relative;overflow:hidden;padding:1.5rem 0 2rem}
.marquee-track{display:flex;gap:1.5rem;width:max-content;will-change:transform}
.testimonials-rows{display:flex;flex-direction:column;gap:0.5rem}
.testimonials .marquee{padding:0.5rem 0;contain:layout paint}
.testimonials .marquee-track{gap:0.9rem;will-change:transform;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);-webkit-perspective:1000;perspective:1000}
.quote-link{flex:0 0 auto;display:block;text-decoration:none;color:inherit;transition:transform 0.2s}
.quote-link:hover{transform:translateY(-2px)}
.quote-link:hover .quote-card{box-shadow:inset 0 0 0 1px rgba(255,255,255,0.6),0 12px 28px rgba(58,42,23,0.20)}
.quote-card{flex:0 0 auto;width:300px;height:340px;box-sizing:border-box;background:linear-gradient(180deg,rgba(253,246,227,0.92) 0%,rgba(243,231,204,0.92) 100%);border:1px solid var(--gold-light);border-radius:14px;padding:1rem 1.1rem 0.9rem;box-shadow:inset 0 0 0 1px rgba(255,255,255,0.55),0 8px 22px rgba(58,42,23,0.14);position:relative;transform:rotate(var(--qtilt,-0.6deg)) translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden;display:flex;flex-direction:column;gap:0.55rem;overflow:hidden;contain:layout paint}
.quote-card:nth-child(2n){--qtilt:0.8deg}
.quote-card:nth-child(3n){--qtilt:-1.1deg}
.quote-card .qmark{font-family:var(--serif);font-style:italic;font-size:2rem;line-height:0.6;color:var(--gold);opacity:0.6;margin-bottom:-0.3rem;flex:0 0 auto}
.quote-card .body{font-family:var(--serif);font-style:italic;font-size:0.94rem;line-height:1.4;color:var(--ink);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;flex:1 1 auto;min-height:0}
.quote-card .qphoto + .qmark + .body,.quote-card .qphoto ~ .body{-webkit-line-clamp:2}
.quote-foot{display:flex;align-items:center;gap:0.65rem;border-top:1px dashed rgba(184,137,47,0.35);padding-top:0.65rem;flex:0 0 auto;margin-top:auto}
.qavatar{width:34px;height:34px;border-radius:999px;background:radial-gradient(circle at 35% 35%,#d9b76b 0%,#b8892f 60%,#8a6420 100%);color:#fdf3d0;font-family:var(--serif);font-style:italic;font-weight:600;display:flex;align-items:center;justify-content:center;font-size:0.95rem;flex:0 0 34px;border:1.5px solid var(--cream);box-shadow:0 0 0 1px var(--gold-deep)}
.qmeta{display:flex;flex-direction:column;line-height:1.2;min-width:0;flex:1 1 auto}
.qname{font-family:var(--serif);font-weight:600;font-size:0.92rem;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qwhere{font-size:0.66rem;letter-spacing:1.4px;text-transform:uppercase;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stars{color:var(--gold-deep);font-size:0.78rem;letter-spacing:1.5px;margin-left:auto;flex:0 0 auto}
.quote-card .qphoto{width:100%;height:120px;border-radius:10px;overflow:hidden;flex:0 0 120px}
.quote-card .qphoto img{width:100%;height:100%;object-fit:cover}
.quote-card .verified{display:inline-flex;align-items:center;gap:0.25rem;font-family:var(--sans);font-size:0.6rem;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--green-deep);background:rgba(42,90,58,0.10);border-radius:999px;padding:0.15rem 0.5rem;margin-top:0.15rem}
.quote-card .verified svg{width:11px;height:11px}
@media(max-width:720px){
  .testimonials .marquee{padding:0.3rem 0}
  .testimonials-rows{gap:0.35rem}
  .testimonials .marquee-track{gap:0.6rem}
  .testimonials .quote-card{transform:rotate(0deg) translateZ(0);width:185px;height:230px;padding:0.7rem 0.8rem;gap:0.4rem;border-radius:11px}
  .testimonials .quote-card .qmark{font-size:1.5rem;margin-bottom:-0.2rem}
  .testimonials .quote-card .body{font-size:0.78rem;line-height:1.35;-webkit-line-clamp:4}
  .testimonials .quote-card .qphoto{height:78px;flex:0 0 78px;border-radius:8px}
  .testimonials .quote-card .qphoto ~ .body,.testimonials .quote-card .qphoto + .qmark + .body{-webkit-line-clamp:2}
  .testimonials .quote-foot{gap:0.45rem;padding-top:0.5rem}
  .testimonials .qavatar{width:26px;height:26px;flex:0 0 26px;font-size:0.8rem;border-width:1px}
  .testimonials .qname{font-size:0.78rem}
  .testimonials .qwhere{font-size:0.55rem;letter-spacing:0.9px}
  .testimonials .stars{font-size:0.66rem;letter-spacing:1px}
}