/* ============================================================
   Layout
   Page wrappers, sections, grids and structural spacing.
   ============================================================ */

.page{
  display:none;
  min-height:100vh;
  padding-top:68px;
}

.page.active{
  display:block;
}

.section{
  padding:90px 52px;
  max-width:1320px;
  margin:0 auto;
}

.sec-label{
  font-size:0.6rem;
  letter-spacing:0.32em;
  text-transform:uppercase;
  color:var(--red);
  margin-bottom:14px;
  display:flex;
  align-items:center;
  gap:12px;
}

.sec-label::before{
  content:'';
  width:26px;
  height:1px;
  background:var(--red);
}

.sec-label.gold{
  color:var(--gold3);
}

.sec-label.gold::before{
  background:var(--gold3);
}

.sec-title{
  font-family:var(--serif);
  font-size:clamp(1.8rem,2.8vw,2.8rem);
  font-weight:300;
  line-height:1.15;
  margin-bottom:12px;
  color:var(--text);
}

.sec-title em{
  font-style:italic;
  color:var(--gold3);
}

.sec-title .r{
  color:var(--red);
}

.sec-sub{
  font-size:0.82rem;
  line-height:2;
  color:var(--text3);
  max-width:520px;
  margin-bottom:52px;
}

.hero-wrap{
  display:flex;
  flex-direction:column;
}

.hero{
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:55% 45%;
  min-height:0;
  height:calc(100vh - 110px);
  background:var(--bg);
}

.hero-left{
  padding:36px 56px 72px 52px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  position:relative;
  z-index:2;
}

.hero-eyebrow{
  font-size:0.66rem;
  letter-spacing:0.34em;
  text-transform:uppercase;
  color:var(--red);
  margin-bottom:22px;
  display:flex;
  align-items:center;
  gap:14px;
}

.hero-eyebrow::before{
  content:'';
  width:28px;
  height:1px;
  background:var(--red);
}

h1.hero-title{
  font-family:var(--title);
  font-size:clamp(3rem,5.5vw,5.2rem);
  font-weight:400;
  line-height:1.02;
  color:var(--text);
  margin-bottom:4px;
}

h1.hero-title .r{
  color:var(--red);
}

.hero-tagline{
  font-family:var(--serif);
  font-size:1.3rem;
  font-style:italic;
  color:var(--muted);
  margin-bottom:28px;
  letter-spacing:0.04em;
}

.hero-desc{
  font-size:0.86rem;
  line-height:2.1;
  color:var(--text3);
  max-width:440px;
  margin-bottom:44px;
}

.hero-desc strong{
  color:var(--text);
}

.hero-ctas{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:44px;
}

.hero-trust{
  display:flex;
  gap:28px;
  flex-wrap:wrap;
}

.trust-item{
  display:flex;
  align-items:baseline;
  gap:8px;
}

.trust-num{
  font-family:var(--serif);
  font-size:1.8rem;
  color:var(--red);
  font-weight:300;
  line-height:1;
}

.trust-label{
  font-size:0.6rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--muted);
  line-height:1.5;
}

.site-footer{
  background:var(--footer-bg);
  color:var(--footer-text);
  border-top:1px solid var(--footer-border-color);
}

.footer-inner{
  max-width:1320px;
  margin:0 auto;
  padding:38px 52px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
}

.footer-brand{
  color:#fff;
  font-family:var(--serif);
  font-size:1.2rem;
}

.footer-links{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
}

.footer-links a{
  color:var(--footer-text);
  text-decoration:none;
  font-size:0.68rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
}

.footer-links a:hover{
  color:#fff;
}

.footer-copy{
  font-size:0.68rem;
}


#search-btn:hover,
.theme-toggle:hover,
#basket-btn:hover{background:transparent!important;color:var(--red)!important}
html.cream #search-btn:hover,
html.cream .theme-toggle:hover,
html.cream #basket-btn:hover,
html.aathaar-dark #search-btn:hover,
html.aathaar-dark .theme-toggle:hover,
html.aathaar-dark #basket-btn:hover{color:var(--gold)!important}
#search-btn,
.theme-toggle{width:auto!important;height:auto!important;min-width:0!important;padding:8px!important}
#basket-btn{padding:8px 6px!important}
#basket-count{box-shadow:0 0 0 2px var(--nav-bg)!important}

/* Announcement marquee */
.top-announcement-bar{margin-top:68px!important;height:46px!important;position:relative!important;z-index:150!important;overflow:hidden!important;display:block!important;white-space:nowrap!important;padding:0!important;background:var(--red)!important;color:#fff!important;border-top:none!important;border-bottom:1px solid rgba(0,0,0,0.08)!important}
.top-announcement-bar.aathaar-announcement,
html.cream .top-announcement-bar,
html.aathaar-dark .top-announcement-bar{background:#0B0B0B!important;color:var(--gold2)!important;border-bottom:1px solid rgba(201,169,110,0.24)!important}
.top-announcement-track{display:inline-flex!important;align-items:center!important;gap:64px!important;height:46px!important;min-width:max-content!important;padding-left:100%!important;animation:gift3dMarquee 24s linear infinite!important;font-size:.72rem!important;letter-spacing:.18em!important;text-transform:uppercase!important}
.top-announcement-track span{position:static!important;opacity:1!important;transform:none!important;display:inline-block!important}
.top-announcement-track span::after{content:"·";margin-left:64px;opacity:.45}
@keyframes gift3dMarquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@media(max-width:960px){.top-announcement-bar{margin-top:56px!important;height:44px!important;top:auto!important;left:auto!important;right:auto!important}.top-announcement-track{height:44px!important;gap:44px!important;font-size:.62rem!important;letter-spacing:.15em!important;animation:gift3dMarquee 24s linear infinite!important;white-space:nowrap!important}.top-announcement-track span::after{margin-left:44px}}

/* Homepage red stats banner */
.home-stats-strip,
.home-stats-strip.home-stats-compact,
section.home-stats-strip,
.home-stats-banner,
.stats-banner,
.red-stats-banner{padding:18px 24px!important;min-height:0!important;background:var(--red);color:#fff}
.home-stats-strip .home-stats-inner a{border-bottom:none!important;display:inline-block!important;width:auto!important;color:#fff!important;text-decoration:none}
.home-stats-inner a:hover{color:#fff!important;opacity:.82}
@media(min-width:961px){.home-stats-strip .home-stats-inner,.home-stats-strip.home-stats-compact .home-stats-inner,.home-stats-banner .stats-grid,.stats-banner .stats-grid,.red-stats-banner .stats-grid{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:center!important;gap:0!important;flex-wrap:nowrap!important;max-width:1200px!important;margin:0 auto!important}.home-stats-strip .home-stats-inner div,.home-stats-strip .home-stats-inner a,.home-stats-banner .stat-item,.stats-banner .stat-item,.red-stats-banner .stat-item{font-size:.68rem!important;line-height:1.3!important;letter-spacing:.13em!important;margin:0!important;white-space:nowrap!important;color:#fff!important;text-transform:uppercase;padding:0 24px!important}.home-stats-strip .home-stats-inner div+div,.home-stats-strip .home-stats-inner div+a{border-left:1px solid rgba(255,255,255,0.3)!important}}
@media(max-width:960px){.home-stats-strip .home-stats-inner,.home-stats-strip.home-stats-compact .home-stats-inner,.home-stats-banner .stats-grid,.stats-banner .stats-grid,.red-stats-banner .stats-grid{gap:8px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;text-align:center!important}.home-stats-strip .home-stats-inner div,.home-stats-strip .home-stats-inner a,.home-stats-banner .stat-item,.stats-banner .stat-item,.red-stats-banner .stat-item{font-size:.65rem!important;line-height:1.4!important;letter-spacing:.13em!important;margin:0!important;color:#fff!important;text-transform:uppercase!important;width:100%!important;text-align:center!important}.home-stats-strip .home-stats-inner a.stats-rating{border-top:none!important;padding-top:0!important;margin-top:0!important}}

/* Search suggestions */
#search-dropdown.open{display:block!important}
@media(max-width:700px){#search-wrap{position:static!important}#search-dropdown{position:absolute!important;left:16px!important;right:16px!important;top:calc(100% + 8px)!important;width:auto!important;max-width:none!important}}

/* Product cards/previews: hide dispatch countdown outside detail pages */
.prod-card .dispatch-countdown,
.aath-card .dispatch-countdown,
.shop-grid .dispatch-countdown,
.prod-grid .dispatch-countdown,
.aath-grid .dispatch-countdown,
.collection-card-wrap .dispatch-countdown,
section .prod-card .dispatch-countdown,
section .aath-card .dispatch-countdown,
.hero .dispatch-countdown{display:none!important}
.product-urgency,
.product-dispatch-note{display:none!important}

/* AATHAAR styling */
html.cream .btn-red,
html.aathaar-dark .btn-red{background:#0b0b0b!important;color:var(--gold2)!important;border:1px solid rgba(201,169,110,.45)!important}
html.cream .btn-red:hover,
html.aathaar-dark .btn-red:hover{background:var(--gold3)!important;color:#fff!important;border-color:var(--gold)!important}
html.cream #persistent-basket-bar,
html.aathaar-dark #persistent-basket-bar,
html.cream .persistent-basket-bar,
html.aathaar-dark .persistent-basket-bar{background:#9A7A45!important;border-top:1px solid rgba(0,0,0,.28)!important;box-shadow:0 -4px 24px rgba(0,0,0,.18)!important}
html.cream #persistent-basket-bar #pbb-count,
html.aathaar-dark #persistent-basket-bar #pbb-count{color:rgba(0,0,0,.62)!important}
html.cream #persistent-basket-bar #pbb-total,
html.aathaar-dark #persistent-basket-bar #pbb-total,
html.cream #persistent-basket-bar a,
html.aathaar-dark #persistent-basket-bar a{color:#050505!important}
html.cream #persistent-basket-bar .persistent-basket-cta,
html.aathaar-dark #persistent-basket-bar .persistent-basket-cta,
html.cream #persistent-basket-bar a > div:last-child,
html.aathaar-dark #persistent-basket-bar a > div:last-child{background:#050505!important;border:1px solid rgba(5,5,5,.35)!important}
html.cream #persistent-basket-bar .persistent-basket-cta span,
html.aathaar-dark #persistent-basket-bar .persistent-basket-cta span,
html.cream #persistent-basket-bar a > div:last-child span,
html.aathaar-dark #persistent-basket-bar a > div:last-child span{color:#D8BC7A!important}
html body a[href="/aathaar/99-names-of-allah/"],
html body a[href="/aathaar/99-names-of-allah"],
html body a[href*="99-names-of-allah"],
html body .aathaar-view-99-btn,
html body .view-99-names-btn,
html body a[href*="99-names-of-allah"]:hover,
html body .aathaar-view-99-btn:hover,
html body .view-99-names-btn:hover{background:#B08A44!important;background-color:#B08A44!important;color:#050505!important;border-color:#B08A44!important;box-shadow:none!important}
html body a[href*="99-names-of-allah"] *,
html body a[href*="99-names-of-allah"]:hover *,
html body .aathaar-view-99-btn *,
html body .view-99-names-btn *{color:#050505!important}
@media(max-width:600px){.aathaar-99-layout{padding-left:20px!important;padding-right:20px!important}.aathaar-99-visual{margin-top:18px!important;margin-bottom:26px!important}.aathaar-99-visual-label,.aathaar-99-visual-caption{font-size:.52rem!important;line-height:1.7!important}.aathaar-99-description{margin-top:0!important}}

/* Product personalisation accordion and long forms */
.order-form-header,
.js-order-form-header{cursor:pointer!important;position:relative!important;z-index:20!important;pointer-events:auto!important;user-select:none!important}
.order-form-header *,
.js-order-form-header *{pointer-events:none!important}
.order-form-header[role="button"]:focus{outline:2px solid var(--red);outline-offset:2px}
.order-form-body.open{display:block!important;visibility:visible!important;opacity:1!important;height:auto!important;max-height:none!important}
.order-form-wrap,
.order-form-body,
.dynamic-personalisation-rows{overflow:visible!important;max-height:none!important}
.ofi[type="number"]{-moz-appearance:textfield;font-size:16px!important}
.ofi[type="number"]::-webkit-outer-spin-button,
.ofi[type="number"]::-webkit-inner-spin-button{margin:0}
.g3d-dynamic-qty,
#prod-qty{font-size:16px!important}
.btn-add-basket{cursor:pointer!important;pointer-events:auto!important}
.product-start-price{border-left:2px solid var(--red);padding-left:16px}
.inline-order-total,
.order-total-block{margin:16px 0 12px!important;background:var(--surface);border:1px solid var(--border);padding:14px 16px}
.inline-order-total .price-big,
.inline-order-total #product-order-total,
.order-total-block .price-big,
#product-order-total{color:var(--red)!important}

/* Modals/popups */
.modal-overlay{z-index:900!important}
.modal-overlay.open{display:flex!important;align-items:flex-start!important;overflow-y:auto!important;padding-top:18px!important;padding-bottom:60px!important}
.modal{overflow:visible!important;max-height:none!important;margin-top:20px!important;margin-bottom:60px!important}
.fs,select.fs{position:relative;z-index:2;pointer-events:auto!important;-webkit-appearance:menulist!important;appearance:auto!important}
.modal-rows-container{max-height:none!important;overflow:visible!important}
.odyn-item,.dyn-item{break-inside:avoid}
@media(max-width:700px){.modal-overlay.open{padding:12px!important}.modal{width:100%!important;max-width:100%!important;padding:24px 16px!important;box-sizing:border-box!important}.dyn-item,.odyn-item{padding:12px!important;box-sizing:border-box!important}.dyn-item .ofi,.dyn-item .ofs,.dyn-item .ofta,.odyn-item .ofi,.odyn-item .ofs,.odyn-item .ofta{width:100%!important;box-sizing:border-box!important}}

/* Basket page personalisation and actions */
.basket-item,
.basket-item-actions{position:relative!important}
.basket-item-link{color:var(--text);text-decoration:none;position:relative!important;z-index:30!important;pointer-events:auto!important}
.basket-item-link:hover{color:var(--red);text-decoration:underline}
.basket-item-details{display:block!important}
.basket-personalisation-table{margin-top:12px!important;border:1px solid var(--border)!important;background:var(--surface2)!important;overflow:hidden!important}
.basket-personalisation-table.gift3d{border-left:3px solid var(--red)!important}
.basket-personalisation-table.aathaar{border-left:3px solid var(--gold3,#B08A44)!important}
.basket-personalisation-table table{width:100%!important;border-collapse:collapse!important}
.basket-personalisation-table th,
.basket-personalisation-table td{padding:9px 10px!important;border-bottom:1px solid var(--border)!important;font-size:.72rem!important;line-height:1.5!important;text-align:left!important;vertical-align:top!important}
.basket-personalisation-table th{width:34%!important;font-size:.55rem!important;letter-spacing:.14em!important;text-transform:uppercase!important;color:var(--muted)!important;font-weight:600!important}
.basket-detail-empty{padding:10px;color:var(--muted);font-size:.72rem}
.basket-customise-btn{display:inline-block!important;margin-top:10px!important;border:1px solid var(--red)!important;color:var(--red)!important;background:transparent!important;padding:8px 12px!important;text-decoration:none!important;font-size:.6rem!important;letter-spacing:.16em!important;text-transform:uppercase!important;position:relative!important;z-index:30!important;pointer-events:auto!important}
.basket-item-aathaar .basket-customise-btn,
.basket-personalisation-table.aathaar + .basket-item-actions .basket-customise-btn{border-color:var(--gold3,#B08A44)!important;color:var(--gold3,#B08A44)!important}
@media(max-width:700px){#basket-actions{display:block!important}#basket-actions > div{display:flex!important;flex-direction:column!important}#basket-page-items{order:1}#basket-summary{order:2;width:100%!important;min-width:0!important}.summary-box{width:100%!important}.basket-item-header{flex-direction:column!important;align-items:flex-start!important;gap:10px!important}.basket-personalisation-table{width:100%!important;overflow-x:auto!important}.basket-personalisation-table th,.basket-personalisation-table td{display:table-cell!important;width:auto!important;box-sizing:border-box!important}.basket-personalisation-table th{width:34%!important}.basket-customise-btn{width:100%!important;text-align:center!important;box-sizing:border-box!important;padding:12px!important;display:block!important}}


/* ── WISHLIST ── */

/* Mobile burger menu */
.mobile-menu-toggle{display:none;background:transparent;border:0;padding:8px;min-width:40px;height:44px;align-items:center;justify-content:center;flex-direction:column;gap:5px;cursor:pointer;color:var(--nav-text)}
.mobile-menu-toggle span{display:block;width:22px;height:2px;background:currentColor;border-radius:2px;transition:transform .2s,opacity .2s}
.mobile-menu-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.mobile-menu-toggle.open span:nth-child(2){opacity:0}
.mobile-menu-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-menu-panel{display:none}
@media(max-width:960px){
  #nav{justify-content:flex-start;gap:10px;padding:0 12px;height:56px}
  .mobile-menu-toggle{display:inline-flex;flex:0 0 auto}
  .nav-logo-link{flex:0 0 auto}
  .nav-logo-link img{height:34px!important}
  .nav-end{margin-left:auto;gap:6px}
  .nav-action-label{display:none!important}
  #wishlist-nav-btn,#basket-btn{gap:0!important;padding:8px!important;min-width:36px!important;justify-content:center!important}
  #wishlist-count,#basket-count{top:0!important;right:0!important}
  .mobile-menu-panel{position:absolute;top:56px;left:10px;right:10px;display:none;background:var(--nav-bg);border:1px solid var(--nav-border);box-shadow:0 12px 34px rgba(0,0,0,.22);backdrop-filter:blur(16px);z-index:260;padding:8px 0}
  .mobile-menu-panel.open{display:block}
  .mobile-menu-panel a,.mobile-menu-panel button{display:flex;width:100%;align-items:center;justify-content:flex-start;padding:14px 18px;background:transparent;border:0;border-bottom:1px solid var(--border);color:var(--nav-text);text-decoration:none;font-family:var(--sans);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;text-align:left;cursor:pointer;min-height:0}
  .mobile-menu-panel a:last-child{border-bottom:0}
  .mobile-menu-panel a:hover,.mobile-menu-panel button:hover,.mobile-menu-panel a.active{color:var(--red);background:rgba(186,24,18,.06)}
  html.cream .mobile-menu-panel a:hover,html.cream .mobile-menu-panel button:hover,html.cream .mobile-menu-panel a.active,html.aathaar-dark .mobile-menu-panel a:hover,html.aathaar-dark .mobile-menu-panel button:hover,html.aathaar-dark .mobile-menu-panel a.active{color:var(--gold);background:rgba(201,169,110,.08)}
}


/* Mobile burger menu visibility fix */
.mobile-menu-panel[hidden]{display:none!important}
.mobile-menu-panel{display:none!important}
@media(max-width:960px){
  .mobile-menu-toggle{display:inline-flex!important}
  .mobile-menu-panel.open{display:block!important}
}
@media(min-width:961px){
  .mobile-menu-toggle,.mobile-menu-panel{display:none!important}
}