/* ═══════════════════════════════════════════
   PHONE & VAPE GALAXY: "Oud Majlis" theme layer
   Deep maroon, warm gold and cream, arch shapes.
   Loaded last on every customer page.
═══════════════════════════════════════════ */
:root{
  --oud-maroon:#3A0E14;
  --oud-maroon-2:#5A1C24;
  --oud-maroon-3:#2B0A0F;
  --oud-gold:#D9A957;
  --oud-gold-deep:#7A5419;
  --oud-cream:#F5ECDD;
  --oud-cream-2:#EADBC4;
  --oud-sand:#D6BE97;
  --oud-ink:#2B1A12;
}

html,body{background:var(--oud-cream)!important;color:var(--oud-ink);}
body{font-family:'Jost',sans-serif;}
body::before{background:none!important;}
h1,h2,h3,.sec-title,.hero-title,.type-heading,.product-name,.nav-logo,.footer-logo{font-family:'Marcellus',serif!important;font-weight:400!important;letter-spacing:0.5px;}
::selection{background:var(--oud-gold);color:var(--oud-maroon);}

/* ── Buttons: pill shapes */
.btn-primary,.btn-outline,.add-cart-btn,.auth-btn,.dir-btn,.filter-btn,.nav-loyalty,.checkout-btn,
.pe-save,.pe-cancel,.settings-btn,.modal-confirm,.modal-cancel,.logout-btn,.edit-profile-btn,.discount-apply{border-radius:999px!important;}
.btn-primary,.dir-btn{background:var(--oud-gold)!important;color:var(--oud-maroon)!important;font-weight:600!important;}
.btn-primary:hover,.dir-btn:hover{background:#E6BC72!important;}
.add-cart-btn,.auth-btn,.checkout-btn,.modal-confirm:not(.danger){background:var(--oud-maroon)!important;color:var(--oud-cream)!important;border:none!important;}
.add-cart-btn:hover,.auth-btn:hover,.checkout-btn:hover{background:var(--oud-maroon-2)!important;}
.product-badge,.cart-badge{background:var(--oud-gold)!important;color:var(--oud-maroon)!important;border-radius:999px;}
.search-input,.sort-select,.discount-inp,.pe-inp,.auth-card input{border-radius:14px!important;}

/* ── Navigation */
nav{background:var(--oud-maroon)!important;border-bottom:1px solid rgba(217,169,87,0.25)!important;}
.nav-logo{color:var(--oud-cream)!important;letter-spacing:4px;}
.nav-links a{color:var(--oud-cream)!important;}
.nav-loyalty{background:var(--oud-gold)!important;color:var(--oud-maroon)!important;border-color:var(--oud-gold)!important;font-weight:600;}

/* ── Hero: maroon majlis with a gold arch */
section.hero{background:var(--oud-maroon)!important;overflow:hidden;box-shadow:0 -8px 0 var(--oud-maroon);}
/* Arch is drawn around the hero text block itself, so the text always sits inside it */
section.hero > div:not(.scroll-hint){position:relative;z-index:1;}
section.hero > div:not(.scroll-hint)::before{content:"";position:absolute;z-index:-1;left:50%;transform:translateX(-50%);top:-150px;bottom:-100vh;width:calc(100% + 160px);max-width:94vw;border:2px solid rgba(217,169,87,0.45);border-bottom:none;border-radius:999px 999px 0 0;pointer-events:none;}
section.hero > div:not(.scroll-hint)::after{content:"";position:absolute;z-index:-2;left:50%;transform:translateX(-50%);top:-122px;bottom:-100vh;width:calc(100% + 110px);max-width:86vw;background:rgba(90,28,36,0.55);border-radius:999px 999px 0 0;pointer-events:none;}
.hero-eyebrow{color:var(--oud-gold)!important;}
.hero-title{color:var(--oud-cream)!important;}
.hero-title em{color:var(--oud-gold)!important;}
.hero-sub{color:#E9D9C2!important;}
section.hero .btn-outline{color:var(--oud-cream)!important;border-color:#A0707A!important;}
section.hero .btn-outline:hover{border-color:var(--oud-gold)!important;background:rgba(217,169,87,0.08)!important;}
.scroll-hint{color:#E9D9C2!important;}

/* ── Gold ribbon */
.marquee-wrap{background:var(--oud-gold)!important;border:none!important;}
.marquee-track span{color:var(--oud-maroon)!important;opacity:1!important;font-weight:600;}

/* ── Sections */
.sec-eyebrow{color:var(--oud-gold-deep)!important;}
.sec-title,.type-heading{color:var(--oud-maroon)!important;}
.products-section,.map-section{background:var(--oud-cream)!important;}
.divider{background:var(--oud-gold)!important;}
.filter-btn.active,.filter-btn:hover{background:var(--oud-maroon)!important;color:var(--oud-cream)!important;border-color:var(--oud-maroon)!important;}

/* ── Product cards: arch (mehrab) frames */
.product-card{background:transparent!important;border:none!important;overflow:visible!important;}
.product-card:hover{box-shadow:none!important;transform:translateY(-6px);}
.product-img{border-radius:150px 150px 0 0!important;background:var(--oud-cream-2)!important;border:1px solid var(--oud-sand);overflow:hidden!important;}
.product-body{text-align:center;padding:18px 8px 6px!important;}
.product-meta{justify-content:center!important;gap:10px;}
.product-name{color:var(--oud-maroon)!important;font-size:1.3rem!important;}
.wishlist-btn{border-radius:999px!important;background:rgba(245,236,221,0.92)!important;border-color:var(--oud-sand)!important;}

/* Handmade oil cards and size pills */
.hm-card{border-radius:24px!important;background:#FBF5EA!important;border-color:var(--oud-sand)!important;overflow:hidden;}
.hm-img{border-radius:120px 120px 0 0!important;margin:12px 12px 0;background:var(--oud-cream-2)!important;overflow:hidden;}
.hm-tab{border-radius:999px!important;}
.hm-btn{border-radius:999px!important;background:var(--oud-maroon)!important;color:var(--oud-cream)!important;border:none!important;}
.hm-btn:hover{background:var(--oud-maroon-2)!important;}
.hm-badge{border-radius:999px!important;background:var(--oud-gold)!important;color:var(--oud-maroon)!important;}
.hm-opt{border-radius:14px!important;}
.hm-opt.selected{background:var(--oud-maroon)!important;color:var(--oud-cream)!important;border-color:var(--oud-maroon)!important;}
.size-opt{border-radius:14px!important;}

/* ── Loyalty band */
.loyalty-section{background:var(--oud-maroon)!important;border-top:none!important;border-bottom:none!important;}
.loyalty-section .btn-outline{color:var(--oud-cream)!important;border-color:#A0707A!important;}

/* ── Info cards, footer, basket */
.info-card{background:var(--oud-cream-2)!important;border-radius:24px;border-color:var(--oud-sand)!important;}
.map-frame{border-radius:24px;}
footer{background:var(--oud-maroon-3)!important;border-top:none!important;}
.footer-logo{color:var(--oud-gold)!important;}
.cart-sidebar{background:var(--oud-cream)!important;}

/* ── Login, register, forgot */
.auth-card{background:#FBF5EA!important;border:1px solid var(--oud-sand)!important;border-radius:28px!important;box-shadow:0 24px 60px rgba(58,14,20,0.12)!important;}
.auth-logo{font-family:'Marcellus',serif!important;color:var(--oud-maroon)!important;}
.auth-title{color:var(--oud-maroon)!important;}

/* ── Customer dashboard */
.topbar-logo{font-family:'Marcellus',serif!important;color:var(--oud-maroon)!important;}
.stat-card,.card-block,.profile-card,.lb-card,.settings-section{border-radius:24px!important;background:#FBF5EA!important;border-color:var(--oud-sand)!important;}
.stamp{border-radius:999px!important;}
.stamp.active{background:var(--oud-maroon)!important;border-color:var(--oud-gold)!important;color:var(--oud-gold)!important;}
.welcome h1{color:var(--oud-maroon)!important;}
.deal{border-radius:18px!important;}


/* ── Small fixes */
.share-btn-sm,.share-btn{background:transparent!important;border:1px solid var(--oud-sand)!important;color:var(--oud-maroon)!important;border-radius:999px!important;}
.share-btn-sm:hover,.share-btn:hover{border-color:var(--oud-maroon)!important;}
.stamp{border-color:var(--oud-sand)!important;}
@media (max-width:640px){
  .nav-logo{font-size:0.95rem!important;letter-spacing:2px!important;line-height:1.2;}
  .nav-links{gap:12px!important;}
  .nav-links a:not(.nav-loyalty):not(:first-child){display:none;}
  .nav-loyalty{padding:8px 14px!important;}
}

/* Labels and wishlist sit inside the arch, not in its clipped corners */
.product-badge,.hm-badge{top:auto!important;bottom:12px!important;left:50%!important;right:auto!important;transform:translateX(-50%);white-space:nowrap;z-index:2;}
.product-img .wishlist-btn,.hm-img .wishlist-btn{top:auto!important;bottom:10px!important;right:14px!important;}

/* Keep the hero text comfortably inside the arch on narrow screens, and no sideways scroll */
html{overflow-x:hidden;}
section.hero > div:not(.scroll-hint){max-width:calc(94vw - 56px);box-sizing:border-box;}
@media (max-width:640px){
  .hero-eyebrow{letter-spacing:3px!important;font-size:0.58rem!important;}
}

/* True arch shape on every screen width (wide phone cards were getting a flat top) */
.product-img{max-width:300px;margin:0 auto;border-radius:999px 999px 0 0!important;}
.hm-img{max-width:300px;margin:12px auto 0!important;border-radius:999px 999px 0 0!important;}
.nav-loyalty{white-space:nowrap;}

/* Staff login page: maroon card on a deep maroon ground */
html:has(body.admin-login),body.admin-login{background:var(--oud-maroon-3)!important;}
body.admin-login .card{border-radius:28px!important;border-color:rgba(217,169,87,0.35)!important;box-shadow:0 30px 80px rgba(0,0,0,0.35)!important;}
body.admin-login h1{color:var(--oud-gold)!important;}
body.admin-login input{border-radius:14px!important;background:rgba(245,236,221,0.08)!important;color:var(--oud-cream)!important;border:1px solid rgba(217,169,87,0.35)!important;}
body.admin-login input::placeholder{color:#D6BE97;}

/* ── Cookie banner: a readable card, not a dark strip */
.cookie-banner{left:50%!important;right:auto!important;bottom:18px!important;width:min(760px,calc(100% - 24px));transform:translate(-50%,140%)!important;background:var(--oud-maroon)!important;border:1px solid rgba(217,169,87,0.35)!important;border-radius:22px;box-shadow:0 18px 50px rgba(0,0,0,0.35);padding:18px 22px!important;gap:12px 14px!important;}
.cookie-banner.show{transform:translate(-50%,0)!important;}
.cookie-text{color:#F0E4D0!important;font-size:0.86rem!important;flex:1 1 320px;}
.cookie-text a{color:var(--oud-gold)!important;text-decoration:underline!important;}
.cookie-accept{background:var(--oud-gold)!important;color:var(--oud-maroon)!important;border-radius:999px!important;padding:12px 24px!important;font-size:0.78rem!important;}
.cookie-decline{color:var(--oud-cream)!important;border:1px solid #A0707A!important;border-radius:999px!important;padding:12px 20px!important;font-size:0.78rem!important;}
.cookie-decline:hover{border-color:var(--oud-gold)!important;}

/* ── Footer */
.footer-copy{color:rgba(233,217,194,0.7)!important;font-size:0.75rem!important;}
.footer-copy a{color:var(--oud-gold);text-decoration:none;}
.footer-links a{color:rgba(245,236,221,0.82)!important;}
.footer-links a:hover{color:var(--oud-gold)!important;}
.wa-float{box-shadow:0 10px 30px rgba(0,0,0,0.25);}

@keyframes pgFadeIn{from{opacity:0}to{opacity:1}}