/* CAÉLOR House 1.9 — house layer: approved tweaks, perfume page and the 3D fragrance pyramid. */
/* CAÉLOR House 1.9. Montserrat throughout; Cormorant Garamond kept for print. */
:root{--gold:#B8944F;--font-serif:var(--font)}
.card-line,.editorial-signoff,.perfume-portrait-line,.scent-stage-when{font-style:normal!important}
/* T1 top band + header hairline */
.top-band{background:#141414!important;color:#F6F3EE!important}
.top-band a{color:#F6F3EE!important;letter-spacing:.22em}
.top-band a span{color:#B8944F}
/* T2 hero: gold hairline frame + lockup; heading stays as it is */
.hero{position:relative}
.hero .slide:first-child .hero-copy .eyebrow{display:none}
.hero-lockup{display:block;width:170px;margin:0 auto 16px}
/* T3 + T7 two-column opening: small lockup left, text across the rest */
.catalogue .collection-intro,.luxury-page .collection-intro{max-width:none!important;display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:64px;align-items:center;padding:34px 0 30px!important;margin:10px 0 40px!important}
.collection-intro .house-lockup{grid-column:1;grid-row:1;width:100%;max-width:260px;height:auto;margin:0}
.collection-intro>p:last-child{grid-column:2;grid-row:1;max-width:none!important;margin:0!important}
.house-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media(max-width:760px){.catalogue .collection-intro,.luxury-page .collection-intro{grid-template-columns:1fr;gap:22px}.collection-intro .house-lockup{max-width:200px}.collection-intro>p:last-child{grid-column:1;grid-row:2}}
/* T5 home dividers with the monogram */
.house-divider{display:flex;align-items:center;gap:26px;margin:84px 0 0}
.house-divider::before,.house-divider::after{content:"";flex:1;height:1px;background:rgba(184,148,79,.45)}
.house-divider img{width:40px;height:auto}
/* T10 footer: charcoal, gold headings, gold rule, gold Composition */
.site-footer{background:#141414!important;color:#CFC9BF}
.site-footer a,.site-footer small{color:#CFC9BF!important}
.site-footer .footer-column h2{color:#B8944F!important}
.site-footer .footer-bottom{border-top:1px solid #B8944F!important}
.footer-composition{display:block;width:240px;margin-top:28px}
.footer-line{color:#B8944F;font-size:13px;letter-spacing:.06em;margin-top:18px}
@media(max-width:760px){.site-footer .footer-brand{display:block!important;text-align:left}.footer-line{text-align:left}}
@media(max-width:760px){.site-footer .footer-brand .footer-line{text-align:left!important;max-width:none!important;width:auto!important;margin-top:14px}}

/* Perfume page */
/* Product page text, reorganised — proposal only. Montserrat throughout. */
.perfume-page .product-description .product-spec,.perfume-page .product-description .perfume-tags,.perfume-page .product-description .availability{display:none}
.perfume-page .product-description h1{margin:10px 0 0}
.perfume-page .perfume-portrait-line{font-size:17px!important;line-height:1.6!important;color:var(--ink);max-width:34ch;margin:14px 0 30px!important}
.pd-details{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #B8944F;margin:0 0 30px}
.pd-details div{padding:14px 0;border-bottom:1px solid var(--line)}
.pd-details div:nth-child(odd){padding-right:20px}
.pd-details dt{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 5px}
.pd-details dd{margin:0;font-size:14px;color:var(--ink);display:flex;align-items:center;gap:8px}
.pd-details i{width:10px;height:10px;border-radius:50%;display:inline-block;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.pd-cta{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.pd-cta .pd-btn{display:inline-block;background:#141414;color:#F6F3EE;font-size:11px;letter-spacing:.16em;text-transform:uppercase;padding:15px 26px;text-decoration:none}
.pd-cta span{font-size:12px;color:var(--muted)}
.perfume-page .product-description .text-link{display:none}
.perfume-page .product-detail{align-items:center!important}
.perfume-page .product-description{max-width:470px}
.pd-story{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:64px;border-top:1px solid var(--line);margin-top:70px;padding-top:44px}
.pd-story .eyebrow{margin:0 0 12px}
.pd-story h2{font-size:24px!important;font-weight:400;line-height:1.35;margin:0}
.pd-story .pd-story-text p{font-size:15px;line-height:1.9;color:var(--ink);margin:0 0 18px;max-width:none}
.perfume-page .scent-occasion{display:none}
@media(max-width:760px){.pd-story{grid-template-columns:1fr;gap:18px;margin-top:40px}}

.perfume-page .scent-pyramid::before{display:none}

/* 3D fragrance pyramid */
.p3{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:60px;align-items:center;margin-top:36px}
.p3-svg{width:100%;max-width:480px;justify-self:center;overflow:visible}
.p3 .tier{cursor:pointer;outline:none}

/* three fixed shades: top lightest, heart, base deepest */
.p3 .tier[data-t="top"] .lf{fill:#EFE3C8}.p3 .tier[data-t="top"] .rf{fill:#DCCBA5}
.p3 .tier[data-t="heart"] .lf{fill:#D6B77C}.p3 .tier[data-t="heart"] .rf{fill:#BF9E5E}
.p3 .tier[data-t="base"] .lf{fill:#B08C48}.p3 .tier[data-t="base"] .rf{fill:#93733A}
.p3 .edge{fill:none;stroke:#fffefc;stroke-width:1;opacity:.85}
.p3 .tier{opacity:.72}
.p3[data-sel="top"] .tier[data-t="top"],.p3[data-sel="heart"] .tier[data-t="heart"],.p3[data-sel="base"] .tier[data-t="base"]{opacity:1}
.p3 .tier:hover{opacity:.9}
.p3 .tier:focus-visible polygon{stroke:#141414;stroke-width:1.4}
.p3-svg text{text-anchor:middle;pointer-events:none;font-family:var(--font,Montserrat),sans-serif}
.p3-svg .lbl{font-size:9.5px;letter-spacing:.22em;font-weight:600;fill:#B8944F}
.p3-svg .nt{font-size:12.5px;font-weight:500;fill:#141414}

.p3-panel{border-top:1px solid #B8944F;padding-top:24px}
.p3-count{font-size:12px;letter-spacing:.08em;margin:0 0 20px}.p3-count b{font-weight:500}.p3-count span{color:var(--muted)}
.p3-k{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#B8944F;font-weight:600;margin:0 0 8px}
.p3-notes{font-size:24px!important;font-weight:400;line-height:1.35;margin:0;color:#141414}
.p3-when{font-size:12px;color:var(--muted);margin:10px 0 16px}
.p3-desc{font-size:14px;line-height:1.9;color:var(--muted);max-width:42ch;margin:0}
.p3-list{display:none}
.p3-row{all:unset;box-sizing:border-box;display:grid;gap:3px;width:100%;padding:14px 0;border-top:1px solid var(--line);cursor:pointer}
.p3-row:last-child{border-bottom:1px solid var(--line)}
.p3-row .k{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:600}.p3-row .v{font-size:15px;color:#141414}.p3-row .d{font-size:12.5px;line-height:1.7;color:var(--muted)}
.p3[data-sel="top"] .p3-row[data-t="top"],.p3[data-sel="heart"] .p3-row[data-t="heart"],.p3[data-sel="base"] .p3-row[data-t="base"]{border-top-color:#B8944F}
.p3[data-sel="top"] .p3-row[data-t="top"] .k,.p3[data-sel="heart"] .p3-row[data-t="heart"] .k,.p3[data-sel="base"] .p3-row[data-t="base"] .k{color:#B8944F}
.p3-row:focus-visible{outline:2px solid #B8944F;outline-offset:3px}
@media(max-width:760px){.p3{grid-template-columns:1fr;gap:18px}.p3-panel{display:none}.p3-list{display:block}.p3-svg{max-width:360px}.p3-svg .lbl{font-size:10.5px}.p3-svg .nt{font-size:14px}}
@media(prefers-reduced-motion:reduce){.p3 .tier,.p3 .tier polygon,.p3-svg text{transition:none}}
.perfume-page .scent-journey-heading h2{font-size:28px}

.p3 .tier[data-t="base"] text{fill:#fffefc}.p3 .tier[data-t="base"] .lbl{fill:#F3E6C6}
.p3 .tier[data-t="heart"] .lbl{fill:#6b5226}
/* mobile: the whole notes section centred on the pyramid's axis */
@media(max-width:760px){
 .perfume-page .scent-journey-heading{text-align:center}
 .perfume-page .scent-journey-heading p{margin-left:auto;margin-right:auto;max-width:32ch}
 .p3-svg{margin:0 auto;display:block}
 .p3-row{justify-items:center;text-align:center;padding:16px 0}
 .p3-row .d{max-width:30ch}
 .perfume-page .scent-reading-note{text-align:center;margin-left:auto;margin-right:auto;max-width:34ch}
}

/* until the pyramid is drawn, keep the fallback out of sight */
.js .perfume-page .scent-journey-body{visibility:hidden}

/* 1.9.1 — header, hero, cards, dividers */
/* header: a soft shadow instead of a line */
.site-header{border-bottom:0;box-shadow:0 6px 16px -8px rgba(20,20,20,.14)}
/* hero: white and edge to edge, no frame */
/* the slider keeps its place in the middle; only its white background runs to both edges */
.home-page .hero{border-radius:0;background:#fff;box-shadow:0 0 0 100vmax #fff;clip-path:inset(0 -100vmax)}
.home-page .hero .slide,.home-page .hero [data-slide]{background:#fff}
/* Collection cards: names larger, every name on one line across the row, text centred */
.card-copy{display:flex;flex-direction:column;align-items:center;min-height:206px;padding-top:18px}
.card-copy .story-link{padding-top:10px}
.card-copy h3,.product-name{font-size:17px;letter-spacing:.12em}
.product-card .card-line{font-size:12.5px;margin:8px auto 4px;text-align:center;max-width:30ch}
.card-copy .story-link{margin-top:auto}
@media(max-width:760px){.card-copy{min-height:178px;padding:14px 10px 26px}.card-copy h3,.product-name{font-size:14px;letter-spacing:.1em}.product-card .card-line{font-size:11.5px}}
/* home: the gold C divider replaces the plain line beneath it */
.house-divider + .home-house{border-top:0;padding-top:48px}
.house-divider + .home-section{margin-top:48px}
@media(max-width:760px){.product-grid .product-card{aspect-ratio:auto}.product-grid .product-art{flex:none;height:62vw;max-height:300px;padding-top:18px}}
/* names and lines centred on every card, Collection and Luxury alike */
.card-copy,.luxury-card-copy{text-align:center}
.luxury-card .card-line{margin-left:auto;margin-right:auto;text-align:center}
/* 1.9.3 — beneath the slider: a fine dotted gold rule with seven graduated dots at its centre */
.hero-dots{display:flex;justify-content:center;align-items:center;gap:14px;margin:36px auto 0;height:10px;background:radial-gradient(circle,rgba(184,148,79,.55) 1px,transparent 1.4px) left center/10px 6px repeat-x}
.hero-dots i{display:block;border-radius:50%;background:#B8944F;box-shadow:0 0 0 10px var(--paper,#fffefc)}
.hero-dots i:nth-child(1){margin-left:auto}.hero-dots i:nth-child(7){margin-right:auto}
.hero-dots i:nth-child(1),.hero-dots i:nth-child(7){width:3.5px;height:3.5px;opacity:.5}
.hero-dots i:nth-child(2),.hero-dots i:nth-child(6){width:4.5px;height:4.5px;opacity:.7}
.hero-dots i:nth-child(3),.hero-dots i:nth-child(5){width:5.5px;height:5.5px;opacity:.88}
.hero-dots i:nth-child(4){width:8px;height:8px}
@media(max-width:760px){.hero-dots{margin-top:26px;gap:11px}}
/* 1.9.4 — studio product pictures: on the cards and the perfume pages the picture fills its frame */
.product-art--studio{padding:0}
.product-art--studio>.product-studio,.product-portrait--studio>.product-studio{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.product-art--studio>.product-studio{transition:transform .65s ease}
.product-card:hover .product-art--studio>.product-studio{transform:scale(1.025)}
/* narrower screens: the picture keeps a proportion that always shows the whole bottle */
@media(max-width:1250px){.product-grid .product-card--studio{aspect-ratio:auto}.product-grid .product-art--studio{flex:none;aspect-ratio:1/1.1}}
@media(max-width:760px){.product-grid .product-art--studio{height:62vw;max-height:none;aspect-ratio:auto;padding-top:0}}
@media(max-width:359px){.product-grid .product-art--studio{height:auto;aspect-ratio:1.1/1}}
@media(prefers-reduced-motion:reduce){.product-card:hover .product-art--studio>.product-studio{transform:none}}

/* 1.9.5: Luxury on the moulded bottle, Atelier */
.luxury-controls .gender-filters{display:flex;gap:8px;flex-wrap:wrap}
.home-discovery--atelier .home-discovery-image img{aspect-ratio:3/2;object-fit:cover}
.luxury-range-footer>p{max-width:640px}
/* three cards on the home page: Luxury, Atelier, Anthology */
@media(min-width:1001px){.home-discoveries{grid-template-columns:repeat(3,minmax(0,1fr))}.home-discovery-copy h2{font-size:22px}.home-discovery-copy>p:not(.eyebrow){font-size:13px}}
