/* =====================================================================
   Essenza Royale Perfumes — storefront design system
   Palette taken from the brand images: ivory, champagne, gold, charcoal.
   One file for the whole public site (the admin has its own CSS).
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Jost:wght@300;400;500;600&display=swap');

:root{
  --ivory:#FAF6EE;        /* page background — warm marble ivory from the brand image */
  --ivory-2:#F3EADC;      /* soft sections — sand/travertine */
  --champagne:#E8D8BF;    /* accents, borders on cream */
  --sand:#D9C49C;
  --gold:#C6A45A;         /* primary brand gold (logo) */
  --gold-dark:#A4823A;
  --gold-light:#E6CF97;
  --charcoal:#3A2E22;     /* deep bronze-brown: headings, topbar, footer */
  --ink:#3F352B;          /* body text */
  --muted:#7E7267;
  --line:#E9DECD;
  --white:#FFFFFF;
  --ok:#2E7D5B;
  --warn:#B7791F;
  --danger:#B3423A;
  --radius:4px;
  --radius-lg:10px;
  --shadow:0 10px 30px rgba(43,41,38,.07);
  --shadow-lg:0 24px 60px rgba(43,41,38,.14);
  --serif:'Cormorant Garamond','Garamond','Times New Roman',serif;
  --sans:'Jost','Helvetica Neue',Arial,sans-serif;
  --max:1240px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--sans);font-weight:300;font-size:16px;color:var(--ink);background:var(--ivory);line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;color:var(--charcoal);line-height:1.15;margin:0 0 .45em;letter-spacing:.01em}
h1{font-size:clamp(34px,4.6vw,56px)}
h2{font-size:clamp(28px,3.4vw,42px)}
h3{font-size:22px}
h4{font-size:13px;font-family:var(--sans);font-weight:500;letter-spacing:.2em;text-transform:uppercase}
p{margin:0 0 1em}
a{color:var(--charcoal);text-decoration:none;transition:color .15s}
a:hover{color:var(--gold-dark)}
img{max-width:100%;display:block}
strong,b{font-weight:500}
body{overflow-x:clip}   /* guard: no element may ever make the page wider than the window */
.container{max-width:var(--max);margin:0 auto;padding:0 24px}
.muted{color:var(--muted)}
.center{text-align:center}
.hide{display:none!important}
.eyebrow{font-family:var(--sans);font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-dark);font-weight:500;margin-bottom:12px;text-align:center}
.eyebrow.left{text-align:left}
.sub{max-width:640px;margin:0 auto 34px;text-align:center;color:var(--muted);font-size:17px}
.section{padding:72px 0}
.section.tight{padding:44px 0}
.section.alt{background:var(--ivory-2)}
.section.dark{background:var(--charcoal);color:#EDE4D6}
.section.dark h2,.section.dark h3{color:#FAF6F0}
.section.dark .eyebrow{color:var(--gold-light)}
.section h2.center,.section > .container > h2{text-align:center}
.divider{width:56px;height:1px;background:var(--gold);margin:0 auto 26px;position:relative}
.divider:after{content:"✦";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--ivory);color:var(--gold);font-size:11px;padding:0 8px}
.section.alt .divider:after{background:var(--ivory-2)}

/* ---- top bar ---- */
.topbar{background:var(--charcoal);color:#E8DCC8;font-size:12px;letter-spacing:.14em;text-transform:uppercase;text-align:center;padding:9px 14px;font-weight:400}
.topbar strong{color:var(--gold-light)}
.launch-preview{background:var(--ivory-2);color:var(--gold-dark);text-align:center;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;padding:5px 12px;font-weight:500;border-bottom:1px solid var(--line)}

/* ---- header ---- */
.site-header{position:sticky;top:0;z-index:40;background:rgba(250,246,240,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
/* the nav has 11 categories + language + account + bag: it needs more room than the 1240px text column,
   and it must never be wider than the window (that used to push the BAG button off the right edge). */
.site-header .container{max-width:1760px}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;height:88px;min-width:0;max-width:100%}
.brand{display:block;flex:0 0 auto}
.brand img{height:74px;width:auto}
.menu{display:flex;flex:1 1 auto;min-width:0;justify-content:center;gap:2px;align-items:center;list-style:none;margin:0;padding:0}
.menu > li > a{display:inline-block;color:var(--charcoal);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:400;padding:10px 10px;position:relative;white-space:nowrap}
.menu > li > a:after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:1px;background:var(--gold);transform:scaleX(0);transition:transform .2s}
.menu > li > a:hover:after,.menu > li > a.is-active:after{transform:scaleX(1)}
.menu > li > a:hover{color:var(--gold-dark)}
.nav-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.account-link{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;padding:10px 12px;color:var(--charcoal);white-space:nowrap}
.account-link:hover{color:var(--gold-dark)}
.cart-link{position:relative;display:inline-flex;align-items:center;gap:8px;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ivory);background:var(--charcoal);padding:11px 18px;border:1px solid var(--charcoal);white-space:nowrap;transition:.18s}
.cart-link:hover{background:var(--gold-dark);border-color:var(--gold-dark);color:#fff}
.cart-count{background:var(--gold);color:var(--charcoal);font-size:11px;font-weight:500;min-width:20px;height:20px;border-radius:20px;display:inline-flex;align-items:center;justify-content:center;padding:0 6px}
.lang-toggle{background:transparent;border:1px solid var(--line);color:var(--charcoal);font-family:var(--sans);font-size:12px;letter-spacing:.08em;padding:9px 12px;cursor:pointer;white-space:nowrap}
.burger{display:none;background:none;border:0;font-size:26px;color:var(--charcoal);cursor:pointer;padding:6px 8px;line-height:1}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--sans);font-weight:500;font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;border:1px solid var(--charcoal);border-radius:0;padding:15px 30px;cursor:pointer;transition:.18s;text-decoration:none;background:var(--charcoal);color:var(--ivory);line-height:1.2}
.btn:hover{background:var(--gold-dark);border-color:var(--gold-dark);color:#fff;text-decoration:none}
.btn-primary{background:var(--gold);color:#fff;border-color:var(--gold)}
.btn-primary:hover{background:var(--gold-dark);border-color:var(--gold-dark)}
.btn-gold,.btn-cyan{background:var(--gold);border-color:var(--gold);color:var(--charcoal)}
.btn-gold:hover,.btn-cyan:hover{background:var(--gold-dark);border-color:var(--gold-dark);color:#fff}
.btn-ghost{background:transparent;color:var(--charcoal);border-color:var(--charcoal)}
.btn-ghost:hover{background:var(--charcoal);color:var(--ivory)}
.btn-light{background:transparent;color:#FAF6F0;border-color:#FAF6F0}
.btn-light:hover{background:#FAF6F0;color:var(--charcoal)}
.btn-block{width:100%}
.btn-sm{padding:11px 18px;font-size:11.5px;letter-spacing:.16em}
.btn-danger{background:transparent;color:var(--danger);border-color:#E5C1BD}
.btn-danger:hover{background:var(--danger);border-color:var(--danger);color:#fff}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn[disabled]:hover{background:var(--charcoal);border-color:var(--charcoal);color:var(--ivory)}

/* ---- hero ---- */
.hero-banner{position:relative;background:#EFE4D4;line-height:0}
.hero-banner img{width:100%;height:auto;display:block}
.hero-banner .hero-cta{position:absolute;left:0;right:0;bottom:6%;display:flex;justify-content:center;gap:14px;line-height:1.3}
.hero-pillars{background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.hero-pillars .container{display:grid;grid-template-columns:repeat(4,1fr)}
.pillar{display:flex;flex-direction:column;align-items:center;text-align:center;padding:26px 16px;border-right:1px solid var(--line)}
.pillar:last-child{border-right:0}
.pillar svg{width:30px;height:30px;stroke:var(--gold-dark);fill:none;stroke-width:1.3;margin-bottom:10px}
.pillar b{font-weight:500;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--charcoal)}
.pillar small{color:var(--muted);font-size:13px;margin-top:3px}
.hero{background:var(--ivory-2);text-align:center}
.hero .container{max-width:820px}
.hero h1{margin-bottom:14px}
.hero p{font-size:18px;color:var(--muted);max-width:620px;margin:0 auto 26px}
.hero-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.pill{display:inline-block;font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-dark);border:1px solid var(--gold);padding:6px 14px;margin-bottom:18px}

/* ---- category tiles ---- */
.cat-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.cat-tile{position:relative;display:block;overflow:hidden;background:var(--white);border:1px solid var(--line)}
.cat-tile img{aspect-ratio:4/5;width:100%;object-fit:cover;transition:transform .6s ease}
.cat-tile:hover img{transform:scale(1.05)}
.cat-tile span{display:block;text-align:center;padding:14px 8px;font-family:var(--serif);font-size:21px;color:var(--charcoal);background:var(--white);border-top:1px solid var(--line)}
.cat-tile:hover span{color:var(--gold-dark)}

/* ---- product grid / card ---- */
.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px 22px}
.card{background:var(--white);border:1px solid var(--line);display:flex;flex-direction:column;position:relative;transition:.25s;overflow:hidden}
.card:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px);border-color:var(--champagne)}
.card .thumb{display:block;position:relative;aspect-ratio:1/1;background:var(--ivory-2);overflow:hidden}
.card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.card:hover .thumb img{transform:scale(1.06)}
.badge{position:absolute;top:12px;left:12px;background:var(--charcoal);color:var(--ivory);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;padding:5px 10px;font-weight:500;z-index:2}
.badge.sale{background:var(--gold);color:var(--charcoal)}
.badge.out{background:#EDE6DC;color:var(--muted)}
.badge.bogo{background:var(--gold-dark);color:#fff}
.card .body{padding:16px 18px 20px;display:flex;flex-direction:column;gap:4px;flex:1}
.card .cat{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-dark);font-weight:500}
.card h3{font-size:19px;margin:0;line-height:1.25}
.card h3 a{color:var(--charcoal)}
.card h3 a:hover{color:var(--gold-dark)}
.card .card-sub{font-size:13px;color:var(--muted);margin:0}
.card .price{margin-top:6px;font-size:16px;color:var(--charcoal)}
.card .btn{margin-top:12px}
.price-now{color:var(--charcoal);font-weight:500}
.price-was{color:var(--muted);text-decoration:line-through;font-size:.85em;margin-left:6px}
.scarcity{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;letter-spacing:.06em;color:var(--warn);margin-top:4px}
.scarcity .dot{width:6px;height:6px;border-radius:50%;background:var(--warn)}

/* ---- qty stepper ---- */
.qty{display:inline-flex;align-items:center;border:1px solid var(--charcoal);height:48px}
.qty button{width:44px;height:100%;border:0;background:transparent;font-size:18px;cursor:pointer;color:var(--charcoal);font-family:var(--sans)}
.qty button:hover{background:var(--ivory-2)}
.qty input{width:52px;height:100%;border:0;border-left:1px solid var(--line);border-right:1px solid var(--line);text-align:center;font-family:var(--sans);font-size:15px;background:#fff;color:var(--charcoal)}
.qty input:focus{outline:none}

/* ---- page head ---- */
.page-head{background:var(--ivory-2);border-bottom:1px solid var(--line);padding:44px 0 36px;text-align:center}
.page-head h1{margin:0 0 6px}
.page-head .crumb{margin-bottom:10px}
.page-head p{max-width:640px;margin:8px auto 0;color:var(--muted)}
.crumb{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.crumb a{color:var(--muted)}
.crumb a:hover{color:var(--gold-dark)}

/* ---- shop layout ---- */
.shop-wrap{display:grid;grid-template-columns:230px 1fr;gap:40px;align-items:start}
.filters{position:sticky;top:104px}
.filters h4{margin:0 0 12px;color:var(--charcoal)}
.filters a{display:block;padding:9px 0;border-bottom:1px solid var(--line);font-size:14px;color:var(--ink);transition:.15s}
.filters a:hover,.filters a.active{color:var(--gold-dark);padding-left:6px}
.filters a.active{font-weight:500}
.shop-tools{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:18px}
.shop-tools #count{margin:0;font-size:13px;letter-spacing:.06em}

/* ---- forms ---- */
.field{margin-bottom:16px}
.field label{display:block;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--charcoal);margin-bottom:6px;font-weight:500}
input,select,textarea{font-family:var(--sans);font-size:15px;color:var(--ink)}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=search],input[type=tel],input:not([type]),select,textarea,.field input,.field select,.field textarea{width:100%;padding:13px 14px;border:1px solid var(--line);background:#fff;border-radius:0;transition:border-color .15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold)}
input[type=checkbox],input[type=radio]{width:auto;accent-color:var(--gold-dark)}
select.field,input.field,textarea.field{margin:0}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-msg{margin:10px 0 0;font-size:14px;min-height:18px}
.form-msg.error{color:var(--danger)}
.form-msg.ok{color:var(--ok)}
.spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---- product detail ---- */
.pd{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:start;margin-top:22px}
.gallery-main{background:var(--white);border:1px solid var(--line);aspect-ratio:1/1;overflow:hidden;position:relative}
.gallery-main img{width:100%;height:100%;object-fit:cover}
.gallery-thumbs{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}
.gallery-thumbs img{width:76px;height:76px;object-fit:cover;border:1px solid var(--line);cursor:pointer;opacity:.75;transition:.15s}
.gallery-thumbs img:hover,.gallery-thumbs img.on{opacity:1;border-color:var(--gold)}
.pd-info .cat{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-dark);font-weight:500}
.pd-info h1{font-size:clamp(30px,3.4vw,44px);margin:8px 0 10px}
.pd-info .price{font-size:24px;font-family:var(--serif);margin-bottom:14px}
.pd-desc{font-size:17px;color:var(--ink);max-width:560px}
.pd-stock{font-size:13px;letter-spacing:.06em;margin:0 0 16px}
.pd-stock .ok{color:var(--ok)}.pd-stock .bad{color:var(--danger)}
.buybar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:14px 0 18px}
.buybar .btn{height:48px;padding:0 34px}
.spec-list{list-style:none;padding:0;margin:22px 0 0;border-top:1px solid var(--line)}
.spec-list li{display:grid;grid-template-columns:150px 1fr;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.spec-list li strong{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:500;padding-top:2px}
.pd-care{margin-top:20px;background:var(--ivory-2);padding:16px 18px;border-left:2px solid var(--gold)}
.pd-care strong{display:block;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:4px;color:var(--charcoal)}
.pd-care p{margin:0;font-size:14px;color:var(--ink)}
.trust-row{list-style:none;padding:0;margin:20px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.trust-row li{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--charcoal);border:1px solid var(--champagne);background:#fff;padding:7px 12px}
.trust-row li:before{content:"✦ ";color:var(--gold)}

/* ---- notices ---- */
.notice{border:1px solid var(--line);padding:16px 18px;font-size:14px;background:#fff}
.notice-warn{background:#FBF3E4;border-color:#EBD7B0;color:#7A5A16}
.notice-info{background:var(--ivory-2);border-color:var(--champagne);color:var(--ink)}
.research-banner{display:none}

/* ---- tables / cart ---- */
.tbl{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line)}
.tbl th{text-align:left;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:500;padding:14px 16px;border-bottom:1px solid var(--line);background:var(--ivory-2)}
.tbl td{padding:16px;border-bottom:1px solid var(--line);vertical-align:middle;font-size:15px}
.tbl tr:last-child td{border-bottom:0}
.cart-layout{display:grid;grid-template-columns:1.6fr .9fr;gap:34px;align-items:start}
.cart-thumb{width:64px;height:64px;object-fit:cover;border:1px solid var(--line);flex:0 0 auto}
.summary{background:#fff;border:1px solid var(--line);padding:26px;position:sticky;top:104px}
.summary h3{font-size:22px;margin-bottom:14px}
.summary .row{display:flex;justify-content:space-between;padding:8px 0;font-size:14.5px;border-bottom:1px dashed var(--line)}
.summary .row.total{border-bottom:0;font-family:var(--serif);font-size:22px;color:var(--charcoal);padding-top:14px}
.discount-row{color:var(--ok)}
.coupon-box{display:flex;gap:8px;margin-top:12px}
.coupon-box input{flex:1;min-width:0}
.save-cart-box{margin-top:16px;padding:16px;border:1px solid var(--champagne);background:var(--ivory-2)}
.empty{text-align:center;padding:70px 20px;color:var(--muted)}
.empty h2{margin-bottom:8px}

/* ---- panels / account ---- */
.panel{background:#fff;border:1px solid var(--line);padding:26px;margin-bottom:22px;max-width:100%;box-sizing:border-box}
.panel h3{margin-bottom:14px}
.auth-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;max-width:960px;margin:0 auto}
.account-layout{display:grid;grid-template-columns:1fr 1.3fr;gap:28px;align-items:start}
.opt-list{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.opt{display:flex;align-items:center;gap:12px;border:1px solid var(--line);padding:14px 16px;cursor:pointer;transition:.15s;background:#fff}
.opt:hover{border-color:var(--gold)}
.opt:has(input:checked){border-color:var(--gold-dark);background:var(--ivory-2)}
.opt-main{flex:1;display:flex;flex-direction:column;gap:2px;font-size:14.5px}
.opt-price{font-weight:500;color:var(--charcoal)}
.opt-disabled{opacity:.5;cursor:not-allowed}
.order-card{border:1px solid var(--line);padding:16px 18px;margin-bottom:12px;font-size:14px;background:#fff}
.order-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.status-pill{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#7A5A16;background:#FBF3E4;border:1px solid #EBD7B0;padding:3px 10px}
.tag{display:inline-block;font-size:11px;letter-spacing:.08em;padding:3px 9px;border:1px solid var(--line)}

/* ---- reviews ---- */
.stars{color:var(--gold);letter-spacing:2px;font-size:18px}
.review{border:1px solid var(--line);background:#fff;padding:20px 22px;margin-bottom:12px}
.review .who{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:8px}
.rev-summary{display:flex;align-items:center;gap:16px;padding:18px 0;border-bottom:1px solid var(--line);margin-bottom:18px}
.rev-summary .big{font-family:var(--serif);font-size:48px;line-height:1;color:var(--charcoal)}

/* ---- story / split ---- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.split img{width:100%;aspect-ratio:4/5;object-fit:cover;border:1px solid var(--line)}
.split h2{text-align:left}
.split .eyebrow{text-align:left}
.split .lead{font-family:var(--serif);font-size:26px;line-height:1.35;color:var(--charcoal);font-style:italic;margin-bottom:16px}
.points{list-style:none;padding:0;margin:20px 0 26px;display:grid;gap:14px}
.points li{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:start}
.points li b{font-family:var(--serif);font-size:22px;color:var(--gold-dark);font-weight:500;line-height:1}
.points li strong{display:block;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--charcoal)}
.points li small{color:var(--muted);font-size:14px}

/* ---- newsletter ---- */
.newsletter{background:var(--charcoal);color:#EDE4D6;text-align:center}
.newsletter h2{color:#FAF6F0}
.newsletter p{color:#C9BDAA;max-width:520px;margin:0 auto 22px}
.nl-form{display:flex;gap:0;max-width:520px;margin:0 auto}
.nl-form input{flex:1;padding:15px 16px;border:1px solid #5C554C;background:#3A3733;color:#fff;border-right:0}
.nl-form input::placeholder{color:#9A9084}
.nl-form .btn{border-color:var(--gold);background:var(--gold);color:var(--charcoal)}
.nl-form .btn:hover{background:var(--gold-light);border-color:var(--gold-light)}
#nlMsg{margin-top:10px;font-size:13.5px;min-height:18px}

/* ---- FAQ ---- */
.faq-list{max-width:820px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--line);padding:6px 0}
.faq-item summary{cursor:pointer;font-family:var(--serif);font-size:21px;color:var(--charcoal);padding:12px 0;list-style:none;display:flex;justify-content:space-between;align-items:center}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:after{content:"+";color:var(--gold-dark);font-size:24px;font-family:var(--sans);font-weight:300}
.faq-item[open] summary:after{content:"–"}
.faq-item p{color:var(--ink);padding-bottom:12px;margin:0;font-size:15px}

/* ---- footer ---- */
.site-footer{background:var(--charcoal);color:#C9BDAA;margin-top:60px}
.newsletter + #up-footer .site-footer,.section.alt + #up-footer .site-footer{margin-top:0}
.footer-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px;padding:60px 24px 40px}
.footer-brand p{font-size:14px;max-width:320px;color:#B6AA98;margin-top:14px}
.footer-logo{width:200px;height:auto}
.site-footer h4{color:#FAF6F0;margin-bottom:14px}
.site-footer a{display:block;color:#C9BDAA;font-size:14px;padding:5px 0}
.site-footer a:hover{color:var(--gold-light)}
.footer-brand a{display:inline}
.copyright{border-top:1px solid rgba(255,255,255,.1);padding:20px 24px;text-align:center;font-size:12.5px;letter-spacing:.08em;color:#9A9084}
.copyright strong{color:var(--gold-light)}
.disclaimer-block{display:none}

/* ---- legal ---- */
.legal{background:#fff;border:1px solid var(--line);padding:44px 48px;max-width:900px;margin:0 auto}
.legal h1{font-size:26px;margin:34px 0 10px;padding-top:6px}
.legal h1:first-child{margin-top:0}
.legal h2{font-size:22px;margin-top:26px}
.legal p,.legal li{font-size:15px}

/* ---- toast / floating cart / social ---- */
.toast{position:fixed;bottom:24px;right:24px;background:var(--charcoal);color:#FAF6F0;padding:14px 20px;box-shadow:var(--shadow-lg);font-size:14px;z-index:80;opacity:0;transform:translateY(12px);transition:.25s;display:flex;align-items:center;gap:10px;border-left:3px solid var(--gold)}
.toast.show{opacity:1;transform:translateY(0)}
.cart-fab{position:fixed;right:22px;bottom:22px;z-index:60;width:58px;height:58px;border-radius:50%;background:var(--charcoal);color:var(--ivory);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-lg);transition:.18s}
.cart-fab:hover{background:var(--gold-dark);color:#fff}
.cart-fab .cart-count{position:absolute;top:-4px;right:-4px}
.wa-fab{position:fixed;right:22px;bottom:92px;z-index:60;width:58px;height:58px;border-radius:50%;background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-lg);transition:.18s}
.wa-fab:hover{background:#1EBE5B;color:#fff;transform:translateY(-2px)}
.wa-fab svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.6}
.social-row{display:flex;gap:10px;justify-content:center;margin-top:18px}
.social-row a,.social-row span{width:38px;height:38px;border:1px solid rgba(255,255,255,.18);display:inline-flex;align-items:center;justify-content:center;color:#EDE4D6;transition:.15s;padding:0}
.social-row a:hover{border-color:var(--gold);color:var(--gold-light)}
.social-row .off{opacity:.3}
.social-row svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.6}

/* ---- responsive ---- */
/* header: the row has 11 categories + language + account + bag. It is tightened in steps and
   turns into the menu button before it could ever run past the right edge of the window.
   The steps are sized for PORTUGUESE, whose labels are the longest. */
@media (max-width:1800px){
  .menu{gap:0}
  .menu > li > a{padding:10px 7px;letter-spacing:.10em;font-size:12px}
  .lang-toggle{font-size:11.5px;padding:9px 10px}
  .account-link{padding:10px 8px}
}
@media (max-width:1620px){
  .menu > li > a{padding:10px 5px;letter-spacing:.04em;font-size:11px}
  .lang-toggle{font-size:11px;padding:8px 8px;letter-spacing:.02em}
  .account-link{padding:10px 4px}
  .account-link span{display:none}
  .cart-link{padding:10px 14px;letter-spacing:.12em}
  .brand img{height:64px}
}
/* below this width the categories no longer fit on one line: use the menu button */
@media (max-width:1180px){
  .product-grid{grid-template-columns:repeat(3,1fr)}
  .cat-grid{grid-template-columns:repeat(3,1fr)}
  .burger{display:inline-block;order:0;padding:6px 4px}
  .brand{order:1;margin-right:auto}
  .brand img{height:74px}
  .nav-actions{order:2}
  .menu{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;background:var(--ivory);border-bottom:1px solid var(--line);padding:8px 0 14px;box-shadow:var(--shadow-lg)}
  .menu.open{display:flex}
  .menu > li > a{display:block;padding:13px 24px;font-size:13px;letter-spacing:.14em}
  .menu > li > a:after{display:none}
  .lang-toggle{font-size:11px;padding:8px 10px}
  .account-link{padding:10px 8px}
  .account-link span{display:none}
}
@media (max-width:980px){
  .nav{height:74px}
  .brand img{height:52px}
  .nav{gap:8px}
  .lang-toggle{font-size:10.5px;padding:7px 8px;letter-spacing:.02em}
  .cart-link{padding:9px 10px;font-size:11px;gap:5px}
  .account-link{padding:8px 6px}
  .hero-pillars .container{grid-template-columns:repeat(2,1fr);padding:0}
  .pillar{border-bottom:1px solid var(--line)}
  .pillar:nth-child(2n){border-right:0}
  .shop-wrap{grid-template-columns:1fr;gap:18px}
  .filters{position:static;display:flex;gap:8px;flex-wrap:wrap}
  .filters h4{display:none}
  .filters a{border:1px solid var(--line);padding:8px 14px;background:#fff;font-size:13px}
  .filters a.active{border-color:var(--gold-dark);color:var(--gold-dark);padding-left:14px}
  .filters a:hover{padding-left:14px}
  .filters select{width:100%}
  .pd{grid-template-columns:1fr;gap:28px}
  .cart-layout{grid-template-columns:1fr}
  .summary{position:static}
  .split{grid-template-columns:1fr;gap:28px}
  .footer-top{grid-template-columns:1fr 1fr;padding:44px 24px 30px}
  .auth-grid,.account-layout{grid-template-columns:1fr}
  .section{padding:52px 0}
}
@media (max-width:640px){
  body{font-size:15px}
  .container{padding:0 16px}
  .product-grid{grid-template-columns:repeat(2,1fr);gap:16px 12px}
  .cat-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .card .body{padding:12px 12px 14px}
  .card h3{font-size:16px}
  .grid-2{grid-template-columns:1fr}
  .topbar{font-size:10.5px;letter-spacing:.08em;padding:8px 10px}
  .hero-banner .hero-cta{position:static;padding:14px 16px;background:var(--ivory-2);flex-direction:column}
  .hero-banner .hero-cta .btn{width:100%;background:var(--gold);color:#fff;border-color:var(--gold)}
  .brand-strip span{font-size:16px}
  .quiz-opts a{flex:1 1 45%;text-align:center}
  .perf{grid-template-columns:1fr 1fr}
  .footer-top{grid-template-columns:1fr;gap:22px}
  .buybar .btn{flex:1}
  .spec-list li{grid-template-columns:1fr;gap:2px}
  .legal{padding:26px 20px}
  .nl-form{flex-direction:column}
  .nl-form input{border-right:1px solid #5C554C}
  h1{font-size:32px}
  .page-head{padding:30px 0 26px}
  .cart-fab{width:52px;height:52px;right:14px;bottom:14px}
  .wa-fab{width:52px;height:52px;right:14px;bottom:76px}
  .toast{left:14px;right:14px;bottom:80px}
}
/* small phones: the header row still has to fit (the language toggle is the widest piece) */
@media (max-width:430px){
  .nav{gap:4px}
  .brand img{height:44px}
  .lang-toggle{font-size:9.5px;padding:6px 6px}
  .cart-link{padding:9px 9px;font-size:10.5px;gap:4px;letter-spacing:.10em}
  .account-link{padding:8px 2px}
  .burger{padding:6px 2px;font-size:24px}
}
@media print{.site-header,.site-footer,.cart-fab,.wa-fab,.toast,.topbar{display:none}}


/* ===== Fragrance page components (Fragrantica-style) ===== */
.pd-family{font-family:var(--serif);font-size:19px;font-style:italic;color:var(--gold-dark);margin:-6px 0 10px}
.pd-h{font-size:12px;font-family:var(--sans);font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--charcoal);margin:26px 0 10px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 10px}
.chip{display:inline-block;font-size:11.5px;letter-spacing:.06em;color:var(--charcoal);background:var(--ivory-2);border:1px solid var(--champagne);padding:4px 10px;border-radius:20px;white-space:nowrap}
.card .chips{margin:0 0 8px}
.card .chip{font-size:10.5px;padding:3px 8px}
.accords{display:grid;gap:5px;max-width:520px}
.accord{position:relative;height:28px;background:var(--ivory-2);border-radius:2px;overflow:hidden}
.accord:before{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--w,60%);background:linear-gradient(90deg,var(--gold) 0%,var(--gold-light) 100%);opacity:.9}
.accord span{position:relative;display:block;line-height:28px;padding:0 12px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--charcoal);font-weight:500}
.pyramid{display:grid;gap:14px;max-width:640px;margin:4px 0 8px}
.tier{border-left:2px solid var(--gold);padding:2px 0 2px 14px}
.tier h4{margin:0 0 6px;font-size:11px;letter-spacing:.22em;color:var(--gold-dark)}
.notes{display:flex;flex-wrap:wrap;gap:6px}
.note{display:inline-flex;align-items:center;gap:6px;font-family:var(--serif);font-size:16px;color:var(--charcoal);background:#fff;border:1px solid var(--line);padding:5px 12px;border-radius:2px}
.note:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--gold);opacity:.8}
.perf{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin:18px 0 6px}
.perf-item{background:#fff;border:1px solid var(--line);padding:12px 14px;border-top:2px solid var(--gold)}
.perf-item .k{display:block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.perf-item .v{font-family:var(--serif);font-size:18px;color:var(--charcoal)}
/* home: brand strip + editorial */
.brand-strip{padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff}
.brand-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px 16px;text-align:center}
.brand-strip span{font-family:var(--serif);font-size:20px;letter-spacing:.08em;color:var(--muted);white-space:nowrap}
@media (max-width:980px){.brand-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.brand-grid{grid-template-columns:repeat(2,1fr)}.brand-strip span{font-size:15px}}
.hero-tag{font-family:var(--sans);font-size:12px;letter-spacing:.34em;text-transform:uppercase;color:var(--gold-dark);margin-bottom:8px}
.hero-banner .hero-cta .btn{background:rgba(250,246,238,.92);color:var(--charcoal);border-color:var(--gold)}
.hero-banner .hero-cta .btn:hover{background:var(--gold);color:#fff}
.quiz-band{background:var(--charcoal);color:#EDE4D6}
.quiz-band .container{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center}
.quiz-band h2{color:#FAF6EE}
.quiz-opts{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.quiz-opts a{display:flex;align-items:center;justify-content:center;text-align:center;min-height:52px;border:1px solid var(--gold);color:var(--gold-light);padding:10px 12px;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase}
.quiz-opts a:hover{background:var(--gold);color:#fff}
@media (max-width:820px){.quiz-band .container{grid-template-columns:1fr}.quiz-opts{grid-template-columns:repeat(2,1fr)}}

/* ===== Curated selections / Royale Club / Journal ===== */
.cur-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.cur-tile{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);overflow:hidden;transition:.25s}
.cur-tile:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px);border-color:var(--champagne)}
.cur-tile img{aspect-ratio:1/1;width:100%;object-fit:cover;background:var(--ivory-2)}
.cur-tile div{padding:16px 18px 20px;border-top:1px solid var(--line)}
.cur-k{display:block;font-family:var(--serif);font-size:21px;color:var(--charcoal);margin-bottom:4px}
.cur-p{display:block;font-size:13.5px;color:var(--muted);line-height:1.5}
.club-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.club-card{background:#fff;border:1px solid var(--line);border-top:2px solid var(--gold);padding:28px 26px 24px;position:relative}
.club-card .club-n{font-family:var(--serif);font-size:34px;color:var(--gold);line-height:1;display:block;margin-bottom:10px}
.club-card h3{font-size:22px;margin-bottom:8px}
.club-card p{color:var(--muted);font-size:14.5px;min-height:88px}
.club-card a{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-dark);font-weight:500}
.jr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.jr-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);overflow:hidden;transition:.25s}
.jr-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px)}
.jr-card img{aspect-ratio:4/3;width:100%;object-fit:cover;background:var(--ivory-2)}
.jr-card div{padding:18px 20px 22px}
.jr-card .cat{display:block;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-dark);margin-bottom:6px}
.jr-card h3{font-size:20px;line-height:1.25;margin-bottom:8px}
.jr-card p{color:var(--muted);font-size:14px;margin:0}
@media (max-width:980px){.cur-grid{grid-template-columns:repeat(2,1fr)}.club-grid{grid-template-columns:1fr}.jr-grid{grid-template-columns:1fr}.cat-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.cur-grid{grid-template-columns:1fr 1fr;gap:12px}.cur-tile div{padding:12px}.cur-k{font-size:17px}.cat-grid{grid-template-columns:repeat(2,1fr)}}