/** Shopify CDN: Minification failed

Line 208:0 Unexpected "}"

**/
/* ============================================
   PERFORMATIVE STICKY HEADER VARIABLES
   ============================================ */
:root {
  /* Dimensions */
  --header-height-hero: 439px;
  --header-height-sticky: 80px;
  
  --logo-size-hero: 75px;
  --logo-size-sticky: 45px;
  
  --circle-text-size: 260px;
  
  /* Colors & Transitions */
  --text-white: #FFFFFF;
  --header-bg-sticky: rgba(0, 0, 0, 0.9);
  --transition-main: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

@media screen and (max-width: 768px) {
  :root {
    --header-height-hero: 320px;
    --header-height-sticky: 70px;
    --logo-size-hero: 100px;
    --circle-text-size: 180px;
  }
}

/* ============================================
   BASE HEADER (HERO STATE)
   ============================================ */
.performative-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height-hero);
  z-index: 1000;
  overflow: hidden;
  transition: var(--transition-main);
  
  /* Background Logic */
  background-image: url('{{ "ps-background.jpg" | asset_url }}') !important;
  background-size: cover;
  background-position: center center !important;
  background-repeat: no-repeat;
  border-bottom: 2px solid #000;
}

/* KILLER: Force all nested theme wrappers to be invisible */
.performative-header *, 
.header-wrapper, 
.logo-area, 
.header-nav {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.header-container {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 1400px;
  margin: 0 auto;
}

/* ============================================
   LOGO AREA & CIRCULAR TEXT
   ============================================ */
.logo-area {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Perfectly centered on hero image */
  width: var(--circle-text-size);
  height: var(--circle-text-size);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: var(--transition-main);
}

.header-logo-link {
  width: var(--logo-size-hero);
  height: auto;
  z-index: 10;
  transition: var(--transition-main);
}

.header-logo-img {
  width: 100%;
  height: auto;
  display: block;
}

.circular-text-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 1;
  transition: opacity 0.4s ease;
}

/* Force Circular Text to be White */
.circular-text-content svg textPath,
.circular-text-content svg text {
  fill: var(--text-white) !important;
}

/* ============================================
   NAVIGATION (HERO STATE)
   ============================================ */
.header-nav {
  position: absolute;
  bottom: 50px; /* Pinned below the logo area */
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  transition: var(--transition-main);
}

.header-nav-list {
  display: flex;
  gap: 3rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.header-nav-link {
  color: var(--text-white) !important;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.1rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

/* ============================================
   SCROLLED STATE (.is-scrolled)
   ============================================ */

/* 1. Header Shrinks & Darkens for Legibility */
.is-scrolled.performative-header {
  height: var(--header-height-sticky) !important;
  background-image: none !important; /* Hide model image on scroll */
  background-color: var(--header-bg-sticky) !important;
}

/* 2. Logo Area remains centered but smaller */
.is-scrolled .logo-area {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--logo-size-sticky);
  height: var(--header-height-sticky);
}

/* 3. Logo Image Shrinks */
.is-scrolled .header-logo-link {
  width: var(--logo-size-sticky);
}

/* 4. Circular Text Fades Out (Does not shrink) */
.is-scrolled .circular-text-wrapper {
  opacity: 0;
  visibility: hidden;
}

/* 5. Navigation Shifts to the Left */
.is-scrolled .header-nav {
  bottom: auto;
  top: 50%;
  left: 4rem; /* Slide to the left side */
  transform: translateY(-50%);
}

.is-scrolled .header-nav-link {
  font-size: 0.9rem; /* Slightly smaller for the bar */
}

/* Force the main content to start exactly at the bottom of the header */
main#MainContent { 
  padding-top: var(--header-height-hero) !important; 
  margin: 0 !important;
  display: block !important;
}

/* This targets the product grid wrapper and kills all internal air */
.product-grid-section { 
  padding-top: 0 !important; 
  margin-top: 0 !important;
  border-top: none !important;
}

/* Removes hidden margins from the first element in the grid */
#MainContent > :first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
}

/* --- 1. MOBILE VARIABLES OVERRIDE --- */
@media screen and (max-width: 768px) {
  :root {
    --header-height-hero: 320px;
    --header-height-sticky: 70px;
    --logo-size-hero: 70px;      /* Hero size on mobile */
    --logo-size-sticky: 35px;    /* Scrolled size on mobile */
    --circle-text-size: 160px;
  }
  
  /* Force the logo image to respect the variable on mobile */
  .header-logo-link {
    width: var(--logo-size-hero) !important;
  }
}

/* --- 2. SCROLLED STATE FORCE --- */
.is-scrolled .header-logo-link {
  width: var(--logo-size-sticky) !important; /* Forces the shrink */
}

/* Ensure the image inside stays 100% of the link wrapper */
.is-scrolled .header-logo-img {
  width: 100% !important;
  height: auto !important;
}