/* Regal Parfumes homepage: hero, "The Collection" line-up, campaign band, house notes, private list.
   Colours and fonts come from the :root tokens in index.html (--black, --paper, --paper-2, --stone,
   --gold-*, --serif, --sans). The shared header/footer are NOT styled here (site-chrome.css owns them). */

#collection,#homeBand,#shop,#discoveryWrap,#faq{scroll-margin-top:84px}

/* ---------- shared buttons ---------- */
.hbtn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 24px;border-radius:40px;
  font-family:var(--sans);font-size:12px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;line-height:1.2;
  text-align:center;cursor:pointer;border:1px solid transparent;transition:background .3s,color .3s,border-color .3s}
.hbtn-gold{background:var(--gold);color:#1a1207}
.hbtn-gold:hover{background:#f2ede2;color:#1a1207}
.hbtn-ghost{border-color:rgba(242,237,226,.55);color:#f7f2e7;background:transparent}
.hbtn-ghost:hover{background:#f7f2e7;color:#14110D;border-color:#f7f2e7}
.hbtn-dark{background:var(--black);color:#f2ede2}
.hbtn-dark:hover{background:#2a2418}
.hbtn-line{border-color:var(--ink);color:var(--ink);background:transparent}
.hbtn-line:hover{background:var(--ink);color:#f2ede2}
.hbtn:focus-visible{outline:2px solid var(--gold-2);outline-offset:3px}
.hlink{display:inline-flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:inherit;border-bottom:1px solid currentColor;padding-bottom:3px;background:none;border-top:0;border-left:0;border-right:0;cursor:pointer;font-family:var(--sans)}
.hlink:hover{color:var(--gold-3)}

/* ---------- composed line-up (fallback while campaign pictures are missing) ----------
   White studio packshots multiplied onto a stone ground, so the white disappears and the bottles stand alone. */
.lineup{display:flex;align-items:center;justify-content:center;gap:clamp(4px,1vw,18px);width:100%;height:100%}
.lineup span{flex:1 1 0;min-width:0;max-width:200px;display:block}
.lineup img{display:block;width:100%;height:auto;aspect-ratio:.38;object-fit:cover;mix-blend-mode:multiply}

/* ---------- 1. hero ---------- */
.hh{position:relative;padding:0;background:var(--black);color:#f7f2e7;overflow:hidden;isolation:isolate}
.hh-media{position:relative;width:100%;aspect-ratio:2560/1097;max-height:min(82vh,860px);min-height:340px;background:var(--black)}
.hh-media picture,.hh-media > picture > img{display:block;width:100%;height:100%}
.hh-media > picture > img{object-fit:cover;object-position:50% 50%}
.hh-media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(12,11,9,.8) 0%,rgba(12,11,9,.55) 22%,rgba(12,11,9,.12) 40%,rgba(12,11,9,0) 50%)}
.hh-lineup{display:none}
.hh-copy{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  padding:32px 0 32px clamp(24px,5.5vw,112px);pointer-events:none}
.hh-copy > *{pointer-events:auto;width:min(31vw,560px)}
.hh .eyebrow{color:var(--gold-1)}
.hh h1{font-family:var(--serif);font-weight:500;font-size:clamp(38px,3.7vw,76px);line-height:1.04;margin:18px 0 18px;letter-spacing:-.005em}
.hh h1 em{font-style:italic;font-weight:500;background:var(--gold);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.06em}
.hh-sub{font-size:clamp(15px,1.1vw,18px);line-height:1.6;color:#d9d2c4;max-width:30ch}
.hh-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
/* Copy over the top instead of the left (set data-copy="top" on the hero if the final picture needs it) */
.hh[data-copy="top"] .hh-copy{justify-content:flex-start;align-items:center;text-align:center;padding:clamp(28px,4vw,64px) 24px 0}
.hh[data-copy="top"] .hh-copy > *{width:min(760px,100%)}
.hh[data-copy="top"] .hh-sub{margin:0 auto}
.hh[data-copy="top"] .hh-ctas{justify-content:center}
.hh[data-copy="top"] .hh-media::after{background:linear-gradient(180deg,rgba(12,11,9,.78) 0%,rgba(12,11,9,.35) 30%,rgba(12,11,9,0) 48%)}

/* composed fallback: stone ground, six packshots in the right-hand band, dark type */
.hh.is-composed{background:var(--stone);color:var(--ink)}
.hh.is-composed .hh-media{background:var(--stone)}
.hh.is-composed .hh-media > picture{display:none}
.hh.is-composed .hh-media::after{display:none}
.hh.is-composed .hh-lineup{display:block;position:absolute;top:7%;bottom:5%;left:37%;right:4%}
.hh.is-composed .eyebrow{color:var(--gold-ink)}
.hh.is-composed h1 em{background:none;color:var(--gold-ink)}
.hh.is-composed .hh-sub{color:#4a453c}
.hh.is-composed .hbtn-gold{background:var(--black);color:#f2ede2}
.hh.is-composed .hbtn-gold:hover{background:#2a2418}
.hh.is-composed .hbtn-ghost{border-color:var(--ink);color:var(--ink)}
.hh.is-composed .hbtn-ghost:hover{background:var(--ink);color:#f2ede2}
.hh.is-composed[data-copy="top"] .hh-lineup{top:44%;left:6%;right:6%}

/* tablet: whole 21:9 picture, copy beneath it */
@media (max-width:1023px){
  .hh-media{max-height:none;min-height:0}
  .hh-media::after,.hh[data-copy="top"] .hh-media::after{display:none}
  .hh-copy,.hh[data-copy="top"] .hh-copy{position:static;align-items:center;text-align:center;padding:40px 24px 52px}
  .hh-copy > *,.hh[data-copy="top"] .hh-copy > *{width:min(620px,100%)}
  .hh-sub{margin:0 auto}
  .hh-ctas{justify-content:center}
  .hh.is-composed .hh-lineup,.hh.is-composed[data-copy="top"] .hh-lineup{top:8%;bottom:6%;left:5%;right:5%}
}
/* phone: 4:5 picture with the headline over its top half; buttons under the picture */
@media (max-width:640px){
  .hh{display:grid;grid-template-columns:minmax(0,1fr)}
  .hh-media{grid-area:1/1;aspect-ratio:1080/1350}
  .hh-media::after{display:block;background:linear-gradient(180deg,rgba(12,11,9,.82) 0%,rgba(12,11,9,.5) 26%,rgba(12,11,9,0) 46%)}
  .hh[data-copy="top"] .hh-media::after{display:block}
  .hh-copy,.hh[data-copy="top"] .hh-copy{display:contents}
  .hh-copy > *{width:auto}
  .hh-text{grid-area:1/1;align-self:start;z-index:1;text-align:center;padding:28px 20px 0}
  .hh h1{font-size:clamp(32px,9.2vw,42px);margin:12px 0 10px}
  .hh-sub{font-size:15px;max-width:26ch}
  .hh-ctas{grid-area:2/1;flex-direction:column;align-items:stretch;gap:10px;margin:0;padding:20px 20px 30px;background:var(--black)}
  .hh-ctas .hbtn{width:100%}
  .hh.is-composed .hh-ctas{background:var(--stone)}
  .hh.is-composed .hh-lineup,.hh.is-composed[data-copy="top"] .hh-lineup{top:47%;bottom:5%;left:4%;right:4%}
}

/* ---------- 2. the collection ---------- */
.hc{background:var(--paper);padding-block:clamp(64px,8vw,120px) clamp(56px,7vw,104px)}
.hsec-head{text-align:center;max-width:640px;margin:0 auto clamp(36px,4.4vw,64px);padding:0 24px}
.hsec-head h2{font-family:var(--serif);font-weight:500;font-size:clamp(30px,3.4vw,48px);line-height:1.1;margin-top:14px}
.hsec-head p{color:var(--muted);margin-top:14px;font-size:15px}
.hc-row{list-style:none;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(14px,1.7vw,32px);
  max-width:1440px;margin:0 auto;padding:0 clamp(16px,3vw,48px)}
.hc-loading{grid-column:1/-1;text-align:center;color:var(--muted)}
.hc-item{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0}
.hc-img{display:block;width:100%;aspect-ratio:3/4;background:#fff;overflow:hidden}
.hc-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.hc-item:hover .hc-img img{transform:scale(1.045)}
.hc-aud{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);margin-top:18px}
.hc-name{font-family:var(--serif);font-weight:500;font-size:clamp(19px,1.55vw,25px);line-height:1.2;margin-top:6px}
.hc-name a{color:inherit}
.hc-name a::after{content:"";position:absolute;inset:0;z-index:1}
.hc-name a:focus-visible{outline:none}
.hc-item:has(.hc-name a:focus-visible){outline:2px solid var(--gold-2);outline-offset:6px;border-radius:2px}
.hc-rating{font-size:11px;color:var(--gold-3);letter-spacing:.08em;margin-top:4px}
.hc-rating span{color:var(--muted);letter-spacing:0}
.hc-notes{font-size:13px;line-height:1.55;color:var(--muted);margin-top:8px;max-width:26ch;flex-grow:1}
.hc-price{font-family:var(--serif);font-size:18px;color:var(--ink);margin-top:10px}
.hc-price s{color:var(--muted);font-size:14px;margin-left:6px}
.hc-price .hc-size{font-family:var(--sans);font-size:11px;letter-spacing:.14em;color:var(--muted);margin-left:6px;text-transform:uppercase}
.hc-buy{position:relative;z-index:2;margin-top:12px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);
  background:none;border:0;border-bottom:1px solid var(--gold-2);padding:4px 0 3px;cursor:pointer;font-family:var(--sans)}
.hc-buy:hover{color:var(--gold-3)}
.hc-oos{position:relative;z-index:2;margin-top:12px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.hc-oos button{font:inherit;letter-spacing:inherit;text-transform:inherit;background:none;border:0;border-bottom:1px solid var(--line);color:var(--ink);cursor:pointer;margin-left:6px;padding:0 0 2px}
.hc-foot{text-align:center;margin-top:clamp(40px,5vw,64px);display:flex;gap:26px;justify-content:center;flex-wrap:wrap;padding:0 16px}
@media (max-width:1023px){.hc-row{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:48px}}
@media (max-width:640px){
  .hh .eyebrow,.hsec-head .eyebrow,.hb .eyebrow,.hl .eyebrow{letter-spacing:.24em}
  .hc-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;row-gap:40px}
  .hc-aud{margin-top:14px;letter-spacing:.2em}
  .hc-notes{font-size:12.5px}
}

/* ---------- 3. campaign band (four variants) ---------- */
.hb{position:relative;padding:0;background:var(--black);color:#efe9dd;overflow:hidden}
.hb[data-variant="season"],.hb[data-variant="spin"],.hb[data-variant="discovery"]{background:var(--paper-2);color:var(--ink)}
.hb[hidden]{display:none}
.hb-media{position:relative;width:100%;aspect-ratio:2560/1097;max-height:min(80vh,820px);background:inherit}
.hb-media > img{display:block;width:100%;height:100%;object-fit:cover}
.hb-lineup{display:none}
.hb-media.is-composed{background:var(--stone)}
.hb-media.is-composed > img{display:none}
.hb-media.is-composed .hb-lineup{display:block;position:absolute;inset:8% 6% 6%}
.hb-copy{text-align:center;max-width:680px;margin:0 auto;padding:clamp(44px,5.5vw,80px) 24px clamp(56px,7vw,100px)}
.hb-copy.is-top{padding-bottom:clamp(32px,4vw,56px)}
.hb .eyebrow{color:var(--gold-1)}
.hb[data-variant="season"] .eyebrow,.hb[data-variant="spin"] .eyebrow,.hb[data-variant="discovery"] .eyebrow{color:var(--gold-ink)}
.hb h2{font-family:var(--serif);font-weight:500;font-size:clamp(30px,3.6vw,52px);line-height:1.08;margin:14px 0 16px}
.hb-copy p{font-size:16px;line-height:1.7;color:#c9c2b5;max-width:52ch;margin:0 auto}
.hb[data-variant="season"] .hb-copy p,.hb[data-variant="spin"] .hb-copy p,.hb[data-variant="discovery"] .hb-copy p{color:#5d574c}
.hb-ctas{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 26px;margin-top:30px}
.hb .hbtn-ghost{border-color:rgba(242,237,226,.55)}

/* season / campaign tiles */
.hs-row{list-style:none;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(12px,1.4vw,24px);max-width:1440px;margin:0 auto;padding:0 clamp(16px,3vw,48px) clamp(64px,7vw,104px)}
.hs-row.n4{grid-template-columns:repeat(4,minmax(0,1fr));max-width:1180px}
.hs-row.n5{grid-template-columns:repeat(5,minmax(0,1fr))}
.hs-item a{display:block;color:inherit;text-align:center}
.hs-img{display:block;aspect-ratio:4/5;overflow:hidden;background:var(--stone)}
.hs-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.hs-img.is-fallback{background:#fff}
.hs-item a:hover .hs-img img{transform:scale(1.04)}
.hs-name{display:block;font-family:var(--serif);font-size:19px;margin-top:14px}
.hs-cta{display:inline-block;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-top:4px;border-bottom:1px solid transparent}
.hs-item a:hover .hs-cta{color:var(--ink);border-bottom-color:var(--gold-2)}
@media (max-width:1023px){.hs-row,.hs-row.n4,.hs-row.n5{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.hs-row,.hs-row.n4,.hs-row.n5{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* 360° turns */
.sp-row{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(210px,40vw),1fr));gap:clamp(12px,1.6vw,28px);
  max-width:1280px;margin:0 auto;padding:0 clamp(16px,3vw,48px)}
.sp-row.n1{max-width:420px}.sp-row.n2{max-width:760px}.sp-row.n3{max-width:1000px}
.sp-item{position:relative;text-align:center}
.sp-stage{display:block;aspect-ratio:1/1;background:var(--stone);overflow:hidden}
.sp-stage video,.sp-stage img{display:block;width:100%;height:100%;object-fit:cover}
.sp-stage img.is-packshot{mix-blend-mode:multiply;object-fit:contain}
.sp-item a{color:inherit}
.sp-item a::after{content:"";position:absolute;inset:0}
.sp-item:has(a:focus-visible){outline:2px solid var(--gold-2);outline-offset:6px}
.sp-item a:focus-visible{outline:none}
.sp-name{display:block;font-family:var(--serif);font-size:20px;margin-top:14px}
.sp-notes{display:block;font-size:12.5px;color:var(--muted);margin-top:4px}
.sp-tools{text-align:center;padding:28px 16px clamp(64px,7vw,104px)}
@media (max-width:640px){.sp-row{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- 4. the house ---------- */
.hn{background:var(--paper);padding-block:clamp(64px,8vw,112px)}
.hn-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,64px);max-width:1080px;margin:0 auto;padding:0 24px;list-style:none}
.hn-grid li{text-align:center;padding-top:26px;border-top:1px solid var(--gold-2)}
.hn-grid h3{font-family:var(--serif);font-weight:500;font-size:clamp(21px,1.8vw,26px);margin-bottom:10px}
.hn-grid p{color:var(--muted);font-size:14.5px;line-height:1.7;max-width:34ch;margin:0 auto}
.hn-grid a{display:inline-block;margin-top:14px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-ink);border-bottom:1px solid rgba(166,124,30,.4);padding-bottom:2px}
.hn-grid a:hover{color:var(--ink)}
@media (max-width:760px){.hn-grid{grid-template-columns:1fr;max-width:420px}}

/* ---------- 7. the private list (sits directly on the black footer) ---------- */
.hl{background:var(--black);color:#efe9dd;text-align:center;padding:clamp(56px,7vw,96px) 0 clamp(48px,6vw,80px);margin:0}
.hl .eyebrow{color:var(--gold-1)}
.hl h2{font-family:var(--serif);font-weight:500;color:#f7f2e7;font-size:clamp(28px,3.4vw,44px);margin:14px 0 12px}
.hl p{color:#a8a196;font-size:15px;max-width:46ch;margin:0 auto}
.hl-form{display:flex;max-width:460px;margin:28px auto 0;border:1px solid rgba(201,162,74,.4);border-radius:40px;overflow:hidden;background:rgba(255,255,255,.02)}
.hl-form:focus-within{border-color:var(--gold-2)}
.hl-form input{flex:1;min-width:0;background:transparent;border:0;padding:15px 22px;color:#f7f2e7;font-family:var(--sans);font-size:14px;outline:none}
.hl-form input::placeholder{color:#8f887c}
.hl-form button{background:var(--gold);border:0;color:#1a1207;padding:0 26px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;font-weight:500;font-family:var(--sans)}
.hl-form button:disabled{opacity:.6;cursor:default}
.hl-form button:focus-visible{outline:2px solid #f7f2e7;outline-offset:-4px}
.hl-msg{min-height:1.6em;margin-top:14px!important;font-size:13px!important}

/* ---------- set / gift visuals in "Discovery & Gifting" ---------- */
.tile .set-visual{position:absolute;inset:0;background:var(--stone);display:flex;align-items:center;justify-content:center;padding:10% 6%}
.tile .set-visual .lineup span{max-width:120px}
.tile .gift-visual{position:absolute;inset:0;display:grid;place-items:center;background:var(--paper-2)}
.gift-visual .gc{width:64%;aspect-ratio:1.586;border-radius:12px;background:linear-gradient(135deg,#1d1810,#0C0B09 60%);color:#E7C982;
  display:flex;flex-direction:column;justify-content:space-between;padding:7% 8%;box-shadow:0 18px 40px -22px rgba(12,11,9,.7)}
.gift-visual .gc b{font-family:var(--serif);font-weight:500;font-size:clamp(18px,2vw,26px);letter-spacing:.02em}
.gift-visual .gc span{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:#c9c2b5}

@media (prefers-reduced-motion: reduce){
  .hc-item:hover .hc-img img,.hs-item a:hover .hs-img img{transform:none}
}

/* ---------- phones: no text under 12px, and the small text links get a ~44px touch area ----------
   The touch area is an invisible ::before, so the links look exactly as before. */
@media (max-width:640px){
  .hc-aud,.hc-rating,.hc-price .hc-size,.hc-buy,.hc-oos,.hs-cta,.hn-grid a,.gift-visual .gc span{font-size:12px}
  .hc-buy,.hc-oos button,.hlink,.hn-grid a{position:relative}
  .hc-buy::before,.hc-oos button::before,.hlink::before,.hn-grid a::before{content:"";position:absolute;inset:-12px -10px}
}