/* ==========================================================
   Kenza Fragrances — section styles
   These rules used to be printed as an inline <style> block by
   functions.php. Keeping them in a real stylesheet means they
   are cached by WordPress and are also picked up by the static
   build, which only links CSS files.
   ========================================================== */

/* wp_nav_menu renders a <ul> inside .nav__links — restore flex row behaviour */
.nav__links > ul{display:flex;gap:inherit;margin:0;padding:0;list-style:none}
.nav__links > ul > li{margin:0}
/* keep all product images uniform — same height box, contained, centered */
.product__media{height:420px;min-height:360px;display:grid;place-items:center}
.product__media img{height:auto;width:auto;max-height:340px;max-width:290px;object-fit:contain;display:block;margin:0 auto;filter:drop-shadow(0 26px 30px rgba(0,0,0,.65));transition:transform .8s var(--ease)}
/* uniform title size across every product card */
.product h3{font:500 27px/1.1 var(--serif);margin:0;color:#fff;letter-spacing:-.01em}
/* WooCommerce shop page heading */
.woocommerce-page .page-title,.woocommerce-page .woocommerce-products-header__title{font-family:var(--serif);font-weight:500;font-size:clamp(30px,5vw,52px);letter-spacing:-.01em;line-height:1.02;color:#fff;margin:0 0 12px}

/* ---------- parallax / stagnant background section (middle of page) ---------- */
/* Middle section: background stays stagnant while content scrolls over it */
.bg-parallax{position:relative;height:100svh;min-height:700px;overflow:hidden;background:var(--bg)}
.bg-parallax__image{position:absolute;inset:0;z-index:1;background-size:cover;background-position:center;background-attachment:fixed;opacity:0.22;filter:grayscale(100%) contrast(1.15);will-change:transform}
.bg-parallax__image::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 50% 40%,rgba(0,0,0,.35),rgba(0,0,0,.85) 70%,rgba(0,0,0,.98))}
.bg-parallax__content{position:relative;z-index:3;height:100%;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:clamp(40px,8vw,120px) clamp(20px,5vw,60px);color:var(--ink)}
.bg-parallax__eyebrow{font:500 11px/1 var(--sans);letter-spacing:.4em;text-transform:uppercase;color:var(--gold);margin:0 0 16px}
.bg-parallax__title{font-family:var(--serif);font-weight:500;font-size:clamp(34px,6vw,64px);letter-spacing:-.02em;line-height:1.05;color:#fff;margin:0 0 22px;max-width:62ch}
.bg-parallax__title em{font-style:italic;font-weight:400;color:var(--gold-2)}
.bg-parallax__divider{width:1px;height:clamp(120px,20vh,220px);background:linear-gradient(to bottom,transparent,var(--gold),transparent);margin:30px 0;opacity:0.5}
.bg-parallax__note{font-family:var(--sans);font-size:clamp(14px,1.4vw,18px);color:var(--muted);max-width:48ch;line-height:1.7}
@media (max-width:980px){.bg-parallax__image{background-attachment:scroll}}

/* ---------- scroll-reveal square spaces (Kenza background) ---------- */
.reveal-scroll{position:relative;height:210vh;background:var(--bg)}
.reveal-scroll__sticky{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--bg)}
.reveal-scroll__frame{position:absolute;inset:0;margin:0;overflow:hidden;transform:translateZ(0);will-change:clip-path}
.reveal-scroll__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.12);will-change:transform}
.reveal-scroll__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,5,5,0) 25%,rgba(5,5,5,.72) 100%);opacity:0;pointer-events:none;will-change:opacity}
.reveal-scroll__caption{position:absolute;left:clamp(22px,6vw,92px);bottom:clamp(44px,12vh,120px);z-index:3;max-width:min(620px,82vw);text-align:left;will-change:opacity,transform}
.reveal-scroll__caption .eyebrow{margin:0 0 14px}
.reveal-scroll__caption .title{font-family:var(--serif);font-weight:500;font-size:clamp(32px,5vw,60px);line-height:1.04;letter-spacing:-.02em;color:#fff;margin:0 0 16px}
.reveal-scroll__caption .title em{font-style:italic;font-weight:400;color:var(--gold-2)}
.reveal-scroll__caption .body{color:rgba(255,255,255,.78);max-width:46ch;margin:0;font-size:clamp(14px,1.3vw,17px);line-height:1.7}
/* No JS: show the image full-bleed with its caption. */
.has-js .reveal-scroll__frame{clip-path:inset(calc((100svh - 46vmin)/2) calc((100vw - 46vmin)/2) round 2px);-webkit-clip-path:inset(calc((100svh - 46vmin)/2) calc((100vw - 46vmin)/2) round 2px)}
.has-js .reveal-scroll__caption{opacity:0}
@media (max-width:980px){
  .reveal-scroll{height:180vh}
  .reveal-scroll__caption{bottom:clamp(36px,9vh,80px)}
}
@media (prefers-reduced-motion:reduce){
  .reveal-scroll{height:100svh}
  .reveal-scroll__frame,.has-js .reveal-scroll__frame{clip-path:none;-webkit-clip-path:none}
  .reveal-scroll__img{transform:none}
  .reveal-scroll__caption,.has-js .reveal-scroll__caption{opacity:1}
  .reveal-scroll__shade{opacity:.55}
}

/* ---------- size tiles (consistent, clickable — matches reference) ---------- */
.product__info{display:flex;flex-direction:column;gap:14px}
.product .tag{font:500 10.5px/1 var(--sans);letter-spacing:.32em;text-transform:uppercase;color:var(--gold);margin:0 0 2px}
.product h3{font:500 30px/1.1 var(--serif);margin:0;color:#fff;letter-spacing:-.01em}
.product .desc{color:var(--muted);font-size:15px;margin:0;line-height:1.6}
.product__row{display:flex;flex-direction:column;gap:12px;margin:18px 0 0;padding-top:0;border-top:none}
.product .price{font:500 24px/1 var(--serif);color:var(--gold-2)}
.product__sizes{display:flex;gap:12px;margin:0;padding-top:0;border-top:none;flex-wrap:wrap}
.size-tile{display:inline-flex;align-items:center;justify-content:center;min-width:48px;height:48px;border:1px solid rgba(255,255,255,.12);border-radius:50%;background:transparent;color:rgba(255,255,255,.55);font:500 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:border-color .3s,color .3s,background .3s,box-shadow .3s;padding:0}
.size-tile:hover{border-color:var(--gold);color:var(--gold-2)}
.size-tile--selected{border-color:var(--gold);color:var(--gold-2);background:rgba(232,200,130,.06);box-shadow:0 0 20px -10px rgba(232,200,130,.45)}
.size-tile:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.product .btn.btn--ghost{width:100%;margin-top:6px;padding:14px 0;font-size:12px;letter-spacing:.3em;text-transform:uppercase}