:root{--af-ink:#252525;--af-accent:#F47C20;--af-accent-text:#B85A0E;--af-muted:#6F6F6B;--af-border:#E6E6E2}

/* ---- Nav: uppercase, centred, orange active underline ---- */
.ast-below-header-wrap .main-header-menu,.ast-builder-menu-1 .main-header-menu{justify-content:center}
.main-header-menu > .menu-item > .menu-link{text-transform:uppercase;letter-spacing:.11em;font-weight:700;font-size:13px;position:relative}
.main-header-menu > .menu-item > .menu-link::after{content:"";position:absolute;left:1em;right:1em;bottom:.5em;height:2px;background:var(--af-accent);transform:scaleX(0);transform-origin:left;transition:transform .22s cubic-bezier(.22,.61,.36,1)}
.main-header-menu > .menu-item > .menu-link:hover::after,.main-header-menu > .current-menu-item > .menu-link::after,.main-header-menu > .current_page_item > .menu-link::after{transform:scaleX(1)}
.main-header-menu > .current-menu-item > .menu-link,.main-header-menu > .current_page_item > .menu-link{color:var(--af-accent) !important}

/* SALE badge */
.main-header-menu > .nav-sale > .menu-link > .menu-text::after{content:"UP TO 40%";display:inline-block;margin-left:9px;vertical-align:middle;background:var(--af-accent);color:#fff;font-size:9px;font-weight:800;letter-spacing:.08em;padding:3px 7px;border-radius:4px;line-height:1}

/* ---- Home: transparent overlay header over the hero ---- */
body.home #masthead{position:absolute;top:0;left:0;right:0;width:100%;z-index:99;background:rgba(255,255,255,0) !important;transition:background .3s cubic-bezier(.22,.61,.36,1),box-shadow .25s ease}
body.home.af-nav-fixed #masthead{position:fixed}
body.home #masthead .ast-main-header-wrap,
body.home #masthead .main-header-bar,
body.home #masthead .ast-below-header-wrap,
body.home #masthead .ast-below-header-bar{background:transparent !important;border-bottom:0}
body.home #masthead .ast-below-header-wrap{border-top:1px solid rgba(255,255,255,.2)}
body.home #masthead .site-title a,
body.home #masthead .main-header-menu > .menu-item > .menu-link,
body.home #masthead .ast-header-account-wrap,
body.home #masthead .ast-addon-cart-wrap,
body.home #masthead .ast-search-menu-icon a{color:#fff !important}
body.home #masthead .ast-icon svg,
body.home #masthead .ast-header-account-wrap svg,
body.home #masthead .ast-addon-cart-wrap svg,
body.home #masthead .ast-search-icon svg{fill:#fff !important;color:#fff !important}
body.home #masthead .ast-search-menu-icon .search-field{color:#fff}
body.home #masthead .ast-search-menu-icon .search-field::placeholder{color:rgba(255,255,255,.7)}

/* solid white on hover or once scrolled */
body.home #masthead:hover,
body.home #masthead:focus-within,
body.home #masthead.af-solid{background:#FFFFFF !important;box-shadow:0 2px 10px rgba(37,37,37,.07)}
body.home #masthead:hover .ast-below-header-wrap,
body.home #masthead:focus-within .ast-below-header-wrap,
body.home #masthead.af-solid .ast-below-header-wrap{border-top-color:var(--af-border)}
body.home #masthead:hover .site-title a,
body.home #masthead:hover .main-header-menu > .menu-item > .menu-link,
body.home #masthead:hover .ast-header-account-wrap,
body.home #masthead:hover .ast-addon-cart-wrap,
body.home #masthead:hover .ast-search-menu-icon a,
body.home #masthead.af-solid .site-title a,
body.home #masthead.af-solid .main-header-menu > .menu-item > .menu-link,
body.home #masthead.af-solid .ast-header-account-wrap,
body.home #masthead.af-solid .ast-addon-cart-wrap,
body.home #masthead.af-solid .ast-search-menu-icon a{color:var(--af-ink) !important}
body.home #masthead:hover .ast-icon svg,
body.home #masthead:hover .ast-header-account-wrap svg,
body.home #masthead:hover .ast-addon-cart-wrap svg,
body.home #masthead.af-solid .ast-icon svg,
body.home #masthead.af-solid .ast-header-account-wrap svg,
body.home #masthead.af-solid .ast-addon-cart-wrap svg{fill:var(--af-ink) !important;color:var(--af-ink) !important}
body.home #masthead:hover .main-header-menu > .current-menu-item > .menu-link,
body.home #masthead.af-solid .main-header-menu > .current-menu-item > .menu-link{color:var(--af-accent) !important}

/* SEARCH label next to the icon, desktop only */
@media (min-width:922px){
  body #masthead .ast-search-menu-icon.slide-search::after{content:"SEARCH";margin-left:8px;font-size:12px;font-weight:700;letter-spacing:.12em;color:inherit;white-space:nowrap}
}

/* Non-home pages keep a solid white header */
body:not(.home) #masthead{background:#FFFFFF}

/* ---- Stack the primary row: centred logo, nav centred on its own line ----
   Astra lays this row out with CSS grid (.ast-builder-grid-row), so the
   override has to be grid-based, not flex. ---- */
@media (min-width:922px){
  #ast-desktop-header .ast-builder-grid-row{
    grid-template-columns:1fr !important;
    grid-template-areas:none !important;
    row-gap:0;
    justify-items:center;
    align-items:center;
  }
  #ast-desktop-header .site-header-primary-section-left{
    grid-row:1; width:auto; justify-content:center; padding:6px 0 2px;
  }
  #ast-desktop-header .site-header-primary-section-right{
    grid-row:2; width:100%; justify-content:center;
    margin-top:10px; padding-top:4px;
    border-top:1px solid var(--af-border);
  }
  body.home #ast-desktop-header .site-header-primary-section-right{
    border-top-color:rgba(255,255,255,.2);
  }
  body.home #masthead:hover .site-header-primary-section-right,
  body.home #masthead.af-solid .site-header-primary-section-right{
    border-top-color:var(--af-border);
  }
  #ast-desktop-header .ast-builder-menu-1,
  #ast-desktop-header .ast-main-header-bar-alignment,
  #ast-desktop-header .main-header-bar-navigation,
  #ast-desktop-header .site-navigation{ width:100%; }
  #ast-desktop-header .main-navigation{ width:100%; justify-content:center; display:flex; }
  #ast-desktop-header .main-header-menu{ justify-content:center; width:100%; }
  #ast-desktop-header .ast-primary-header-bar{ padding-top:10px; padding-bottom:0; }
}

/* Logo lockup: 48px square mark + wordmark set in the heading face */
.site-branding.ast-site-identity{ display:flex; align-items:center; gap:12px; padding:0; }
#ast-desktop-header .custom-logo-link img,
#ast-mobile-header .custom-logo-link img{ width:44px; height:44px; max-height:44px; }
.ast-site-title-wrap .site-title{ margin:0; line-height:1; }
.ast-site-title-wrap .site-title a{
  font-family:"Plus Jakarta Sans",sans-serif;
  font-weight:800;
  font-size:26px;
  letter-spacing:-.02em;
  text-transform:uppercase;
  line-height:1;
}
.ast-site-title-wrap .site-description{
  font-family:Inter,sans-serif;
  font-size:9px;
  font-weight:700;
  letter-spacing:.24em;
  text-transform:uppercase;
  margin:3px 0 0;
  opacity:.72;
}
body.home #masthead .ast-site-title-wrap .site-title a,
body.home #masthead .ast-site-title-wrap .site-description{ color:#fff !important; }
body.home #masthead:hover .ast-site-title-wrap .site-title a,
body.home #masthead.af-solid .ast-site-title-wrap .site-title a{ color:var(--af-ink) !important; }
body.home #masthead:hover .ast-site-title-wrap .site-description,
body.home #masthead.af-solid .ast-site-title-wrap .site-description{ color:var(--af-muted) !important; }

/* Never sit underneath the WordPress admin bar */
body.admin-bar.home #masthead{ top:32px; }
@media screen and (max-width:782px){
  body.admin-bar.home #masthead{ top:46px; }
}

/* Menu spacing so the row breathes */
#ast-desktop-header .main-header-menu > .menu-item > .menu-link{
  padding-left:16px; padding-right:16px; padding-top:14px; padding-bottom:16px;
}

/* ---- Search (left) + wishlist/account/cart (right) ---- */
#affan-hdr-extras[hidden]{ display:none; }
#ast-desktop-header .ast-primary-header-bar{ position:relative; }
.affan-hdr-left,.affan-hdr-right{ position:absolute; top:22px; display:flex; align-items:center; }
.affan-hdr-left{ left:26px; }
.affan-hdr-right{ right:26px; gap:22px; }

.affan-hdr-search{ display:flex; align-items:center; gap:8px; }
.affan-hdr-search__btn{
  background:none; border:0; padding:0; cursor:pointer; color:inherit;
  display:grid; place-items:center;
}
.affan-hdr-search__btn svg{ width:20px; height:20px; }
.affan-hdr-search input[type=search]{
  background:none; border:0; outline:none; width:118px; padding:0;
  font-family:Inter,sans-serif; font-size:12px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:inherit;
}
.affan-hdr-search input[type=search]::placeholder{ color:inherit; opacity:.75; }

.affan-tools{ display:flex; align-items:center; gap:20px; }
.affan-tool{ display:flex; align-items:center; gap:9px; text-decoration:none; color:inherit; }
.affan-tool__ico{ position:relative; display:grid; place-items:center; }
.affan-tool__svg{ width:21px; height:21px; }
.affan-tool__count{
  position:absolute; top:-7px; right:-9px; min-width:17px; height:17px; padding:0 4px;
  border-radius:9px; background:var(--af-accent); color:#fff;
  font-family:Inter,sans-serif; font-size:10px; font-weight:800;
  display:grid; place-items:center; line-height:1;
}
.affan-tool__txt{ display:flex; flex-direction:column; line-height:1.15; }
.affan-tool__txt small{ font-family:Inter,sans-serif; font-size:10px; letter-spacing:.06em; opacity:.72; }
.affan-tool__txt strong{ font-family:Inter,sans-serif; font-size:12.5px; font-weight:700; }
@media (max-width:1300px){ .affan-tool__txt{ display:none; } .affan-hdr-right{ gap:16px; } }
@media (max-width:921px){ .affan-hdr-left,.affan-hdr-right{ display:none; } }

/* colour states, matching the rest of the header */
body.home .affan-hdr-left,
body.home .affan-hdr-right{ color:#fff; }
body:not(.home) .affan-hdr-left,
body:not(.home) .affan-hdr-right{ color:var(--af-ink); }
body.home #masthead:hover ~ * .affan-hdr-left{ color:var(--af-ink); }
body.home .ast-primary-header-bar:hover .affan-hdr-left,
body.home .ast-primary-header-bar:hover .affan-hdr-right,
body.home #masthead.af-solid .affan-hdr-left,
body.home #masthead.af-solid .affan-hdr-right{ color:var(--af-ink); }
.affan-tool:hover{ color:var(--af-accent); }

/* ==========================================================================
   Overrides: the theme/Elementor button and link styles leak into the header
   tools, so these are deliberately forced.
   ========================================================================== */

/* Search submit must be a bare icon, not a themed button */
.affan-hdr-search__btn,
.affan-hdr-search__btn:hover,
.affan-hdr-search__btn:focus,
.affan-hdr-search__btn:active{
  background:transparent !important;
  background-image:none !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  margin:0 !important;
  min-width:0 !important;
  min-height:0 !important;
  width:22px !important;
  height:22px !important;
  line-height:1 !important;
  color:inherit !important;
}
.affan-hdr-search input[type=search]{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  height:auto !important;
  min-height:0 !important;
  padding:0 !important;
  margin:0 !important;
}

/* Tools take the header colour, never the accent link colour */
.affan-tool,
.affan-tool *,
.affan-tool small,
.affan-tool strong,
.affan-tool .woocommerce-Price-amount,
.affan-tool .woocommerce-Price-currencySymbol{
  color:inherit !important;
  text-decoration:none !important;
}
.affan-tool:hover,
.affan-tool:hover *{ color:var(--af-accent) !important; }
.affan-tool__count,
.affan-tool:hover .affan-tool__count{
  color:#fff !important;
  background:var(--af-accent) !important;
}

/* Vertically centre the cluster on the logo row, and clear the admin bar */
.affan-hdr-left,
.affan-hdr-right{ top:38px; transform:translateY(-50%); }
body.admin-bar.home #masthead{ top:32px !important; }
@media screen and (max-width:782px){
  body.admin-bar.home #masthead{ top:46px !important; }
}

/* A little more room so the labels are not cramped */
.affan-hdr-right{ gap:26px; }
.affan-tool{ gap:10px; }
.affan-tool__txt small{ font-size:10.5px; opacity:.7; }
.affan-tool__txt strong{ font-size:13px; }
.affan-hdr-search{ gap:10px; }
.affan-hdr-search input[type=search]{ width:110px; }

/* ==========================================================================
   Header / hero separation, matching the static build:
   a hairline between the logo row and the nav row, and another below the
   whole header so the nav reads as its own band over the hero.
   ========================================================================== */

body.home #masthead{ border-bottom:1px solid rgba(255,255,255,.22); }
body.home #masthead:hover,
body.home #masthead.af-solid{ border-bottom-color:var(--af-border); }
body:not(.home) #masthead{ border-bottom:1px solid var(--af-border); }

/* the row divider should read clearly, not hairline-faint */
@media (min-width:922px){
  body.home #ast-desktop-header .site-header-primary-section-right{
    border-top:1px solid rgba(255,255,255,.22);
  }
  #ast-desktop-header .site-header-primary-section-right{
    margin-top:12px; padding-top:0;
  }
}

/* Astra stretches .menu-link to the row height, which pushed the active
   underline far below the text. Pin the link to its own content box. */
@media (min-width:922px){
  #ast-desktop-header .main-header-menu > .menu-item{
    display:flex; align-items:center;
  }
  #ast-desktop-header .main-header-menu > .menu-item > .menu-link{
    display:inline-flex; align-items:center;
    height:auto; line-height:1.2;
    padding:15px 16px 15px;
  }
  #ast-desktop-header .main-header-menu > .menu-item > .menu-link::after{
    left:16px; right:16px; bottom:8px; height:3px;
  }
}

/* ==========================================================================
   Final pass: icon-only tools, full-bleed row dividers.
   ========================================================================== */

/* Tools are icons only on desktop; labels are noise at this size */
.affan-tool__txt{ display:none !important; }
.affan-hdr-right{ gap:30px !important; }
.affan-tool__svg{ width:24px !important; height:24px !important; }
.affan-tool__count{ top:-8px; right:-10px; }
/* Reorder to account, wishlist, cart (shortcode emits wishlist first) */
.affan-hdr-right .affan-tools{ display:flex; }
.affan-hdr-right .affan-tool:nth-child(1){ order:2; }
.affan-hdr-right .affan-tool:nth-child(2){ order:1; }
.affan-hdr-right .affan-tool:nth-child(3){ order:3; }

/* Search label sizing to sit with the icon */
.affan-hdr-search__btn{ width:24px !important; height:24px !important; }
.affan-hdr-search__btn svg{ width:23px; height:23px; }
.affan-hdr-search input[type=search]{ font-size:13px; letter-spacing:.16em; width:96px; }

/* Divider between the logo row and the nav row spans the whole viewport */
@media (min-width:922px){
  #ast-desktop-header .site-header-primary-section-right{
    justify-self:stretch;
    width:100vw;
    max-width:100vw;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    padding-left:calc(50vw - 50%);
    padding-right:calc(50vw - 50%);
    box-sizing:border-box;
  }
  #ast-desktop-header .ast-builder-grid-row{ overflow:visible; }
  #ast-desktop-header .site-primary-header-wrap{ overflow:visible; }
}

/* ==========================================================================
   Trust cards: flat on a hairline, lifting only on hover with a shadow
   tinted to the ground (never pure black), per the design system.
   ========================================================================== */
.affan-trust-card{
  transition:border-color .2s cubic-bezier(.22,.61,.36,1),
             transform .2s cubic-bezier(.22,.61,.36,1),
             box-shadow .2s cubic-bezier(.22,.61,.36,1);
}
.affan-trust-card:hover{
  border-color:var(--af-accent) !important;
  transform:translateY(-4px);
  box-shadow:0 8px 26px rgba(37,37,37,.09);
}
.affan-trust-card .elementor-icon-box-title{ margin-block-start:0; }

/* Force the 4-across row. Elementor writes width:100% onto child containers,
   which makes each card claim a full row. */
.affan-trust-card{
  width:auto !important;
  max-width:none !important;
}
@media (min-width:1025px){
  .affan-trust-card{ flex:0 0 calc(25% - 16.5px) !important; }
}
@media (min-width:768px) and (max-width:1024px){
  .affan-trust-card{ flex:0 0 calc(50% - 11px) !important; padding:22px 20px 24px !important; }
}
@media (max-width:767px){
  .affan-trust-card{ flex:0 0 100% !important; padding:22px 20px 24px !important; }
}
/* the icon tile should not stretch to the card width */
.affan-trust-card .elementor-icon-box-icon{ display:flex; }
.affan-trust-card .elementor-icon{ align-self:flex-start; }

/* ==========================================================================
   Navigation hover colour
   The nav had an orange underline on hover but no hover colour for the text
   itself, so Astra's default link blue was coming through underneath.
   ========================================================================== */
.main-header-menu > .menu-item > .menu-link:hover,
.main-header-menu > .menu-item > .menu-link:focus-visible,
.main-header-menu > .menu-item:hover > .menu-link,
.main-header-menu > .menu-item:focus-within > .menu-link{
	color:var(--af-accent) !important;
}

/* Dropdown items. */
.main-header-menu .sub-menu .menu-link:hover,
.main-header-menu .sub-menu .menu-item:hover > .menu-link,
.main-header-menu .sub-menu .menu-link:focus-visible{
	color:var(--af-accent) !important;
}

/* Same again for the two states the home page header can be in, where the
   ink colour is forced with !important and would otherwise win. */
body.home #masthead:hover .main-header-menu > .menu-item > .menu-link:hover,
body.home #masthead:hover .main-header-menu > .menu-item:hover > .menu-link,
body.home #masthead.af-solid .main-header-menu > .menu-item > .menu-link:hover,
body.home #masthead.af-solid .main-header-menu > .menu-item:hover > .menu-link{
	color:var(--af-accent) !important;
}

/* Header tool icons pick up the same blue by default. */
#masthead .ast-header-account-wrap a:hover,
#masthead .ast-addon-cart-wrap a:hover,
#masthead .ast-search-menu-icon a:hover,
#masthead .affan-tools a:hover,
body.home #masthead:hover .affan-tools a:hover,
body.home #masthead.af-solid .affan-tools a:hover{
	color:var(--af-accent) !important;
}

/* Mobile off-canvas menu. */
.ast-mobile-popup-drawer .main-header-menu .menu-link:hover,
.ast-mobile-popup-drawer .main-header-menu .menu-item:hover > .menu-link{
	color:var(--af-accent) !important;
}

/* ==========================================================================
   Header scale
   Everything in the primary bar was sized for a large, loud header. Scaled
   down roughly 15% so the bar reads as a quiet frame around the page rather
   than competing with the hero. Selectors mirror the originals above so they
   win on source order without needing !important.
   ========================================================================== */

/* Logo mark */
#ast-desktop-header .custom-logo-link img,
#ast-mobile-header .custom-logo-link img{
	width:36px;
	height:36px;
	max-height:36px;
}

/* Wordmark and tagline */
.ast-site-title-wrap .site-title a{
	font-size:21px;
	letter-spacing:-.015em;
}
.ast-site-title-wrap .site-description{
	font-size:8px;
	letter-spacing:.22em;
	margin:2px 0 0;
	opacity:.66;
}

/* Search cluster */
.affan-hdr-search{ gap:7px; }
.affan-hdr-search__btn svg{ width:17px; height:17px; }
.affan-hdr-search input[type=search]{
	width:92px;
	font-size:10.5px;
	letter-spacing:.14em;
}

/* Account, wishlist, cart */
.affan-tools{ gap:16px; }
.affan-tool{ gap:8px; }
.affan-tool__svg{ width:18px; height:18px; }
.affan-tool__count{
	top:-6px;
	right:-8px;
	min-width:15px;
	height:15px;
	border-radius:8px;
	font-size:9px;
}
.affan-tool__txt small{ font-size:9px; }
.affan-tool__txt strong{ font-size:11.5px; }

/* Bar padding and the absolute clusters that sit in it */
#ast-desktop-header .ast-primary-header-bar{
	padding-top:8px;
	padding-bottom:0;
}
.affan-hdr-left,
.affan-hdr-right{ top:18px; }
.affan-hdr-left{ left:24px; }
.affan-hdr-right{ right:24px; gap:18px; }

/* Nav row */
.main-header-menu > .menu-item > .menu-link{
	font-size:12px;
	letter-spacing:.1em;
}
.main-header-menu > .nav-sale > .menu-link > .menu-text::after{
	font-size:8px;
	padding:3px 6px;
	margin-left:8px;
}

@media (max-width:1300px){
	.affan-hdr-right{ gap:14px; }
}

/* ==========================================================================
   Header cluster alignment
   Reverted to the original fixed offset at the client's request. The flex
   layout attempt and the calc(50%) centring are both removed; backups are
   affan-header.css.preflexrevert.bak and affan-header.php.preflex.bak.
   ========================================================================== */
.affan-hdr-left,
.affan-hdr-right{ top:18px; transform:none; }

/* ==========================================================================
   Logo to wordmark spacing

   The gap was coming from two places: the 12px flex gap set above, plus
   Astra's own `.ast-logo-title-inline .site-logo-img { padding-right: 1em }`,
   which adds roughly another 16px. Tightening only the gap would have left
   most of the space in place.
   ========================================================================== */
.ast-logo-title-inline .site-logo-img,
#ast-desktop-header .site-logo-img,
#ast-mobile-header .site-logo-img{
	padding-right:0;
}

.site-branding.ast-site-identity{
	gap:9px;
}

/* The tagline sits under a wordmark that starts closer in now, so its
   tracking gets a touch less pull to the right. */
.ast-site-title-wrap .site-description{
	letter-spacing:.2em;
}

@media (max-width:921px){
	.site-branding.ast-site-identity{ gap:8px; }
}