/*
Theme Name: AFFAN Perfumes
Theme URI: https://affanperfumes.com
Author: AFFAN Perfumes
Description: A fast, responsive one-page luxury theme for AFFAN Perfumes.
Version: 3.1.0
Text Domain: affan-perfumes
*/

:root{
  --black:#080705;
  --ink:#211a14;
  --cream:#f3eee5;
  --warm-white:#fffaf0;
  --gold:#c79a4b;
  --gold-light:#e5bd73;
  --muted:#bcb2a3;
  --line:rgba(201,157,79,.58);
  --shell:1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{margin:0;background:var(--black);color:var(--warm-white);font-family:"Helvetica Neue",Arial,sans-serif;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
body.menu-open{overflow:hidden}
a{color:inherit;text-decoration:none}
img,svg{display:block}
button{font:inherit}
.site-shell{width:min(calc(100% - 96px),var(--shell));margin-inline:auto}
.section-label{margin:0 0 12px;text-transform:uppercase;letter-spacing:.28em;font-size:.72rem;color:var(--gold)}
h1,h2,h3{font-family:Georgia,"Times New Roman",serif;font-weight:400}

.site-header{position:fixed;top:0;left:0;right:0;z-index:50;background:rgba(7,6,4,.94);border-bottom:1px solid rgba(255,255,255,.09)}
.admin-bar .site-header{top:32px}
html{scroll-padding-top:110px}
@media(max-width:782px){.admin-bar .site-header{top:46px}}
@media(max-width:600px){#wpadminbar{position:fixed}}
.nav-shell{height:102px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:28px}
.nav-links{display:flex;align-items:center;gap:36px;font-family:Georgia,"Times New Roman",serif;font-size:.85rem;color:#e5ddd1}
.nav-links a{position:relative;white-space:nowrap;transition:color .2s}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:-24px;height:1px;background:var(--gold);transition:right .25s}
.nav-links a:hover,.nav-links a:focus-visible,.nav-links a.active{color:var(--gold-light)}
.nav-links a.active::after,.nav-links a:hover::after{right:62%}
.brand{place-self:center;position:relative;z-index:2}
.brand img{width:94px;height:94px;object-fit:contain}
.whatsapp-outline,.gold-button{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:1px solid var(--gold);border-radius:999px;min-height:48px;padding:0 25px;color:#f5d597;font-family:Georgia,"Times New Roman",serif;letter-spacing:.03em;transition:background-color .2s,color .2s,transform .2s}
.whatsapp-outline svg,.gold-button svg{width:20px;height:20px;fill:currentColor}
.header-chat{justify-self:end}
.whatsapp-outline:hover,.gold-button:hover{background:var(--gold);color:#120e09;transform:translateY(-2px)}
.menu-toggle,.mobile-navigation{display:none}

.hero{position:relative;min-height:720px;height:100svh;display:flex;align-items:center;background:#0c0906 url("assets/images/hero-affan.webp") center/cover no-repeat;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,3,2,.84) 0%,rgba(5,4,3,.67) 34%,rgba(5,4,3,.12) 62%,rgba(3,2,1,.05) 100%)}
.hero::after{content:"";position:absolute;inset:auto 0 0;height:130px;background:linear-gradient(transparent,rgba(5,4,3,.38));pointer-events:none}
.hero-content{position:relative;z-index:1;padding-top:86px}
.kicker{margin:0 0 14px;color:var(--gold-light);text-transform:uppercase;letter-spacing:.25em;font-size:.68rem}
.hero h1{font-size:clamp(4rem,7.3vw,7.2rem);line-height:.86;letter-spacing:-.025em;margin:0 0 28px;text-transform:uppercase;text-shadow:0 6px 32px rgba(0,0,0,.28)}
.hero-subtitle{margin:0 0 34px;text-transform:uppercase;letter-spacing:.22em;font-size:.81rem;line-height:1.75;color:#eee4d7}
.gold-button{min-height:48px;padding-inline:28px;text-transform:uppercase;letter-spacing:.18em;font-family:"Helvetica Neue",Arial,sans-serif;font-size:.69rem;font-weight:500}
.gold-button span{font-size:1.15rem;margin-top:-4px}

.about-section{display:grid;grid-template-columns:56% 44%;min-height:600px;background:var(--cream);color:var(--ink)}
.about-copy{padding:72px clamp(48px,8vw,120px) 72px max(48px,calc((100vw - var(--shell))/2));align-self:center}
.about-copy h2{font-size:clamp(2.65rem,4.1vw,4.45rem);line-height:1.05;margin:0 0 28px;letter-spacing:-.025em}
.about-copy p:not(.section-label){max-width:670px;margin:0 0 14px;color:#4a433c;font-size:.96rem;line-height:1.55}
.about-visual{position:relative;min-height:600px;background:url("assets/images/about-ajman.webp") center/cover no-repeat}
.about-visual::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(242,229,209,.04),rgba(133,94,48,.18))}
.about-motto{position:absolute;z-index:1;right:7%;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:7px;color:#9b713c;font-family:Georgia,"Times New Roman",serif;font-size:1.1rem;text-transform:uppercase;letter-spacing:.28em;text-align:center;text-shadow:0 1px 8px rgba(255,244,223,.5)}
.about-motto i{display:block;width:42px;height:1px;margin:12px auto 0;background:#a67636}

.launch-section{position:relative;min-height:370px;display:grid;place-items:center;text-align:center;background:#080604 url("assets/images/launching-soon.webp") center/cover no-repeat;overflow:hidden}
.launch-section::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,3,2,.06),rgba(4,3,2,.38) 28%,rgba(4,3,2,.4) 72%,rgba(4,3,2,.06))}
.launch-content{position:relative;z-index:1;padding:62px 24px;max-width:760px}
.launch-content h2{font-size:clamp(3rem,5.1vw,5rem);line-height:1;margin:0;color:#f7ead8}
.launch-content p:not(.section-label){margin:16px 0 21px;color:#ddd2c1;font-family:Georgia,"Times New Roman",serif;letter-spacing:.035em}
.ornament{display:flex;align-items:center;justify-content:center;gap:36px;margin:17px 0 8px}
.ornament i{display:block;width:36px;height:1px;background:var(--gold)}
.ornament i:nth-child(2){width:16px}
.gold-button.compact{min-height:43px;padding-inline:26px}

.features{display:grid;grid-template-columns:repeat(4,1fr);background:var(--cream);color:var(--ink);padding:40px max(32px,calc((100vw - var(--shell))/2))}
.feature{text-align:center;padding:8px 28px 16px;border-right:1px solid rgba(75,55,34,.1)}
.feature:last-child{border-right:0}
.feature svg{width:52px;height:52px;margin:0 auto 12px;fill:none;stroke:#c18c3d;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round}
.feature h3{margin:0 0 8px;text-transform:uppercase;letter-spacing:.16em;font-family:"Helvetica Neue",Arial,sans-serif;font-size:.72rem;font-weight:500}
.feature p{margin:0;color:#5a5148;font-family:Georgia,"Times New Roman",serif;font-size:.78rem;line-height:1.5}

.contact-section{position:relative;background:#070604 url("assets/images/contact-texture.webp") center/cover no-repeat}
.contact-section::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,3,2,.38),rgba(3,3,2,.42) 60%,rgba(3,3,2,.08));pointer-events:none}
.contact-grid,.footer{position:relative;z-index:1}
.contact-grid{display:grid;grid-template-columns:1.25fr .9fr .55fr;gap:70px;align-items:center;padding-top:68px;padding-bottom:54px}
.contact-intro h2{font-size:clamp(2.5rem,4vw,4.15rem);line-height:1;margin:0 0 18px}
.contact-intro>p:not(.section-label){max-width:560px;margin:0 0 25px;color:#d1c8bb}
.contact-details{display:grid;gap:17px}
.contact-details p{display:flex;align-items:flex-start;gap:13px;margin:0;color:#eee4d4;font-family:Georgia,"Times New Roman",serif}
.contact-details small{display:block;color:#999084;font-family:"Helvetica Neue",Arial,sans-serif;font-size:.7rem}
.detail-icon{width:22px;color:var(--gold-light);font-size:1.2rem;line-height:1.3;text-align:center}
.contact-motto{color:#d3a85b;text-transform:uppercase;letter-spacing:.21em;text-align:center;font-family:Georgia,"Times New Roman",serif;font-size:1rem;line-height:1.9}
.footer{min-height:64px;border-top:1px solid rgba(255,255,255,.17);display:flex;align-items:center;justify-content:space-between;color:#9f968a;text-transform:uppercase;letter-spacing:.11em;font-size:.61rem}
.footer>div{display:flex;align-items:center;gap:20px}
.footer i{width:1px;height:16px;background:#9a7a45}
.footer>div:first-child span:first-child{color:var(--gold)}
.footer>div:last-child a:last-child{color:var(--gold);font-size:1.1rem}

.whatsapp-float{position:fixed;right:24px;bottom:24px;z-index:70;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:#25d366;color:#fff;border:3px solid rgba(255,255,255,.82);box-shadow:0 12px 32px rgba(0,0,0,.34);transition:transform .2s,box-shadow .2s}
.whatsapp-float svg{width:35px;height:35px;fill:currentColor}
.whatsapp-float:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 16px 38px rgba(0,0,0,.42)}

.reveal{opacity:1;transform:none;transition:opacity .65s ease,transform .65s ease}
.reveal.is-visible{opacity:1;transform:none}

@media (max-width:1080px){
  .site-shell{width:min(calc(100% - 48px),var(--shell))}
  .nav-links{gap:22px}.header-chat{padding-inline:18px}.about-copy{padding-left:48px;padding-right:48px}.features{padding-inline:24px}.contact-grid{gap:35px}
}

@media (max-width:820px){
  html{scroll-padding-top:76px}.site-shell{width:min(calc(100% - 36px),var(--shell))}
  .nav-shell{height:78px;display:flex;justify-content:space-between}.nav-left,.header-chat{display:none}.brand{margin:0}.brand img{width:72px;height:72px}
  .menu-toggle{display:flex;width:44px;height:44px;padding:11px 9px;border:0;background:transparent;flex-direction:column;justify-content:center;gap:5px;position:relative;z-index:2}
  .menu-toggle span{display:block;width:25px;height:1px;background:#f1e8dc;transition:transform .2s,opacity .2s}
  .menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
  .menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  .mobile-navigation{position:fixed;inset:0;display:flex;visibility:hidden;opacity:0;pointer-events:none;background:rgba(7,6,4,.98);align-items:center;justify-content:center;flex-direction:column;gap:25px;font-family:Georgia,"Times New Roman",serif;font-size:1.35rem;transition:opacity .2s,visibility .2s}
  .mobile-navigation.is-open{visibility:visible;opacity:1;pointer-events:auto}
  .hero{min-height:700px;height:100svh;background-position:61% center}.hero::before{background:linear-gradient(90deg,rgba(3,3,2,.87),rgba(3,3,2,.64) 52%,rgba(3,3,2,.12))}
  .hero-content{padding-top:76px}.hero h1{font-size:clamp(3.6rem,13vw,5.4rem)}
  .about-section{grid-template-columns:1fr}.about-copy{padding:64px 36px}.about-visual{min-height:540px}
  .features{grid-template-columns:repeat(2,1fr);padding:30px 20px}.feature{padding:25px 12px}.feature:nth-child(2){border-right:0}.feature:nth-child(-n+2){border-bottom:1px solid rgba(75,55,34,.1)}
  .contact-grid{grid-template-columns:1fr 1fr;padding-top:58px}.contact-motto{grid-column:1/-1;text-align:left}.footer{padding:16px 0}
}

@media (max-width:540px){
  .site-shell{width:min(calc(100% - 30px),var(--shell))}
  .hero{min-height:690px;background-position:67% center}.hero::before{background:linear-gradient(90deg,rgba(3,3,2,.9),rgba(3,3,2,.61) 70%,rgba(3,3,2,.16))}
  .kicker{display:none}.hero h1{font-size:3.7rem}.hero-subtitle{font-size:.66rem;letter-spacing:.17em}.gold-button{padding-inline:22px}
  .about-copy{padding:58px 24px}.about-copy h2{font-size:2.65rem}.about-copy p:not(.section-label){font-size:.9rem}
  .about-visual{min-height:480px}.about-motto{right:4%;font-size:.84rem}
  .launch-section{min-height:410px;background-position:center}.launch-content p:not(.section-label) br{display:none}
  .features{grid-template-columns:1fr}.feature{border-right:0;border-bottom:1px solid rgba(75,55,34,.1)!important}.feature:last-child{border-bottom:0!important}
  .contact-grid{grid-template-columns:1fr;gap:38px;padding-bottom:45px}.contact-motto{font-size:.88rem}.footer{align-items:flex-start;gap:16px}.footer>div:first-child{flex-wrap:wrap;gap:10px}.footer i{display:none}
  .whatsapp-float{right:17px;bottom:17px;width:56px;height:56px}
}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}*{animation-duration:.01ms!important;animation-iteration-count:1!important}}