/* ============================================================
   HEADER
   ============================================================ */
.sky-header{
  position:fixed; top:0; left:0; right:0; z-index:900;
  background:var(--c-navy-900);
  border-bottom:1px solid transparent;
  transition:background var(--dur) var(--ease), height var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease), top var(--dur) var(--ease);
}
/* When a logged-in user has the WP admin toolbar showing, it's also
   fixed at top:0 and sits above our header (higher z-index), which
   would otherwise clip the top of our fixed header behind it. WP
   exposes the toolbar's current height (32px desktop, 46px on the
   mobile/narrow breakpoint) as this custom property, so we just push
   our header down by exactly that amount instead of hardcoding it. */
body.admin-bar .sky-header{
  top: var(--wp-admin--admin-bar--height, 32px);
}
body.sky-transparent-header:not(.sky-scrolled) .sky-header{
  background:linear-gradient(to bottom, rgba(10,18,39,.65), transparent);
}
.sky-header.is-scrolled{
  box-shadow:0 8px 30px -14px rgba(0,0,0,.5);
  border-bottom-color:var(--c-border-dark);
}
.sky-header__bar{
  display:grid;
  grid-template-columns:auto auto 1fr auto;
  align-items:center;
  gap:var(--sp-4);
  height:var(--header-h);
  transition:height var(--dur) var(--ease);
}
.sky-header.is-scrolled .sky-header__bar{height:var(--header-h-scrolled);}
body{padding-top:var(--header-h);}
@media (max-width:900px){ body{padding-top:76px;} .sky-header__bar{height:76px;grid-template-columns:auto 1fr auto;} }

.sky-hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;width:34px;height:34px;}
.sky-hamburger span{display:block;width:100%;height:2px;background:#fff;transition:transform .3s var(--ease), opacity .3s var(--ease);}
@media (max-width:900px){ .sky-hamburger{display:flex;} }

.sky-logo{display:inline-flex;align-items:center;}
/* Specificity note: WooCommerce's own stylesheet ships
   `.woocommerce img, .woocommerce-page img { height:auto; max-width:100% }`
   which is (0,1,1) — one class + one element. Our old `.sky-logo__img`
   rule was only (0,1,0), so on every WooCommerce-templated page (shop,
   cart, and — critically — every single product page, where body gets
   the `woocommerce` class) that core rule won and the logo rendered at
   its native 1200×896 size instead of our intended height. Scoping the
   selector under `.sky-logo` bumps us to (0,2,0), which now wins
   regardless of load order. */
.sky-logo .sky-logo__img{height:52px;width:auto;transition:height var(--dur) var(--ease);max-width:none;}
.sky-header.is-scrolled .sky-logo .sky-logo__img{height:40px;}
@media (max-width:900px){ .sky-logo .sky-logo__img{height:38px;} }

.sky-nav{justify-self:center;}
.sky-nav > ul{display:flex;align-items:center;gap:var(--sp-4);}
.sky-nav a{
  font-size:var(--fs-nav);font-weight:600;letter-spacing:var(--ls-nav);text-transform:uppercase;
  color:#fff;padding:.5rem 0;position:relative;
}
.sky-nav a::after{content:'';position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--c-cyan);transform:scaleX(0);transition:transform .3s var(--ease);}
.sky-nav a:hover::after{transform:scaleX(1);}
.sky-nav__customise > a{color:var(--c-cyan);font-weight:800;}
@media (max-width:900px){ .sky-nav{display:none;} }

.sky-nav__has-mega{position:relative;}
.sky-mega{
  position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);
  width:min(760px, 90vw);
  background:var(--c-navy-800);
  border:1px solid var(--c-border-dark);
  border-radius:var(--radius-m);
  padding:var(--sp-4);
  opacity:0;pointer-events:none;
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  box-shadow:0 30px 60px -20px rgba(0,0,0,.6);
}
.sky-nav__has-mega:hover .sky-mega,
.sky-nav__has-mega:focus-within .sky-mega{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0);}
.sky-mega__inner{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4);padding-inline:0;}
.sky-mega__label{display:block;font-size:var(--fs-small);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--c-cyan);margin-bottom:var(--sp-2);}
.sky-mega__links ul{display:flex;flex-direction:column;gap:.6rem;}
.sky-mega__links a{color:rgba(255,255,255,.85);font-size:.95rem;text-transform:none;letter-spacing:0;font-weight:500;}
.sky-mega__links a:hover{color:#fff;}
.sky-mega__promo{
  display:flex;flex-direction:column;gap:.4rem;justify-content:center;
  background:var(--grad-brand);border-radius:var(--radius-m);padding:var(--sp-3);
  color:#fff;
}
.sky-mega__promo-eyebrow{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;opacity:.85;}
.sky-mega__promo-title{font-family:var(--font-display);font-size:1.35rem;text-transform:uppercase;line-height:1.1;}
.sky-mega__promo .btn-text{color:#fff;width:max-content;}

.sky-header__actions{justify-self:end;display:flex;align-items:center;gap:.25rem;}
.sky-header__actions .btn-icon{color:#fff;width:2.4rem;height:2.4rem;}
.sky-header__actions svg{width:20px;height:20px;}
.sky-cart-icon{position:relative;}
.sky-cart-count{
  position:absolute;top:2px;right:2px;min-width:16px;height:16px;padding:0 3px;border-radius:50%;
  background:var(--c-purple);color:#fff;font-size:.6rem;line-height:16px;text-align:center;font-weight:700;
}
.sky-cart-count:empty,.sky-cart-count[data-cart-count="0"]{display:none;}

.sky-search-panel{
  max-height:0;overflow:hidden;background:var(--c-navy-800);
  transition:max-height var(--dur) var(--ease);
}
.sky-search-panel.is-open{max-height:120px;}
.sky-search-form{display:flex;align-items:center;gap:var(--sp-2);max-width:var(--container);margin-inline:auto;padding:var(--sp-3) var(--sp-4);}
.sky-search-form input{flex:1;background:none;border:none;border-bottom:1px solid var(--c-border-dark);color:#fff;padding:.5rem 0;font-size:1.1rem;}
.sky-search-form input::placeholder{color:rgba(255,255,255,.5);}
.sky-search-form .btn-text{color:#fff;}

/* ============================================================
   MOBILE NAV
   ============================================================ */
.sky-mobile-nav{
  position:fixed;top:0;right:0;bottom:0;width:min(380px, 88vw);
  background:var(--c-navy-900);color:#fff;z-index:1100;
  transform:translateX(100%);transition:transform .4s var(--ease);
  overflow-y:auto;
}
.sky-mobile-nav.is-open{transform:translateX(0);}
.sky-mobile-nav__scroll{padding:var(--sp-3);}
.sky-mobile-nav__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp-3);}
.sky-mobile-nav__header .btn-icon{color:#fff;}
.sky-mobile-nav__cta{margin-bottom:var(--sp-4);}
.sky-mobile-nav__list > li{border-top:1px solid var(--c-border-dark);}
.sky-mobile-nav__list > li > a{display:block;padding:1.1rem 0;font-weight:600;letter-spacing:.04em;text-transform:uppercase;font-size:.95rem;}
.sky-mobile-nav__expand{display:flex;align-items:center;justify-content:space-between;width:100%;padding:1.1rem 0;font-weight:600;letter-spacing:.04em;text-transform:uppercase;font-size:.95rem;color:#fff;}
.sky-mobile-nav__expand svg{width:18px;height:18px;transition:transform .3s var(--ease);}
.sky-mobile-nav__expand[aria-expanded="true"] svg{transform:rotate(180deg);}
.sky-mobile-nav__sub{max-height:0;overflow:hidden;transition:max-height .35s var(--ease);}
.sky-mobile-nav__sub.is-open{max-height:400px;}
.sky-mobile-nav__sub li a{display:block;padding:.6rem 0 .6rem 1rem;color:rgba(255,255,255,.75);font-size:.9rem;}
.sky-mobile-nav__backdrop{
  position:fixed;inset:0;background:rgba(10,18,39,.55);z-index:1050;
  opacity:0;pointer-events:none;transition:opacity .4s var(--ease);
}
.sky-mobile-nav__backdrop.is-open{opacity:1;pointer-events:auto;}
body.sky-nav-open{overflow:hidden;}

/* ============================================================
   FOOTER
   ============================================================ */
.sky-footer{background:var(--c-navy-900);color:#fff;}
.sky-footer__cta{padding-block:var(--sp-7);text-align:center;border-bottom:1px solid var(--c-border-dark);}
.sky-footer__cta h2{margin-bottom:var(--sp-2);}
.sky-footer__cta .lede{max-width:640px;margin-inline:auto;margin-bottom:var(--sp-3);}
.sky-footer__cta-actions{display:flex;gap:var(--sp-2);justify-content:center;flex-wrap:wrap;}

.sky-footer__main{
  padding-block:var(--sp-6);
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1.3fr;gap:var(--sp-4);
}
.sky-footer__col h4{color:#fff;margin-bottom:var(--sp-2);font-size:.85rem;letter-spacing:.08em;}
.sky-footer__col ul{display:flex;flex-direction:column;gap:.65rem;}
.sky-footer__col a{color:rgba(255,255,255,.68);font-size:.92rem;}
.sky-footer__col a:hover{color:#fff;}
.sky-footer__brand p{color:rgba(255,255,255,.6);font-size:.92rem;margin-block:var(--sp-2);}
.sky-logo .sky-logo__img--footer{height:44px;max-width:none;}
.sky-social{display:flex;flex-direction:row;gap:var(--sp-2);}
.sky-social a{text-transform:uppercase;font-size:.72rem;letter-spacing:.08em;border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:2px;}
.sky-newsletter-form{display:flex;gap:.5rem;margin-top:var(--sp-2);flex-wrap:wrap;}
.sky-newsletter-form input{flex:1;min-width:140px;background:rgba(255,255,255,.06);border:1px solid var(--c-border-dark);color:#fff;padding:.85rem 1rem;border-radius:var(--radius-s);}
.sky-newsletter-form input::placeholder{color:rgba(255,255,255,.5);}
.sky-newsletter-form .btn{padding:.85rem 1.4rem;}

.sky-footer__bottom{
  border-top:1px solid var(--c-border-dark);padding-block:var(--sp-3);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--sp-2);
  font-size:.8rem;color:rgba(255,255,255,.55);
}
.sky-footer__bottom ul{display:flex;gap:var(--sp-3);}
.sky-footer__bottom a:hover{color:#fff;}

@media (max-width:1024px){
  .sky-footer__main{grid-template-columns:1fr 1fr;}
  .sky-footer__brand{grid-column:1 / -1;}
}
@media (max-width:600px){
  .sky-footer__main{grid-template-columns:1fr;}
  .sky-footer__bottom{flex-direction:column;text-align:center;}
}

/* ============================================================
   BREADCRUMBS
   ============================================================ */
.sky-breadcrumbs{font-size:.8rem;color:var(--c-muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:var(--sp-3);}
.sky-breadcrumbs a{color:var(--c-muted);}
.sky-breadcrumbs a:hover{color:var(--c-navy-900);}
.sky-breadcrumbs .crumb-sep{margin-inline:.5em;opacity:.5;}