/* =====================================================================
   BAS PRODUCT DETAIL PAGE styles
   Depends on: bas.css
   Nav/Footer are managed separately. JS is in bas-product-detail.js.
   ===================================================================== */


/* =====================================================================
   TOP-LEVEL BLOCK MARKERS
   These classes exist as scope markers only — no own styles.
   (Children inherit via .bas-product-page wrapper.)
   ===================================================================== */
.bas-pd-main,
.bas-pd-intro,
.bas-pd-customize,
.bas-pd-reviews,
.bas-pd-cta,
.bas-pd-trust {
  /* no own styles; classes used for scoping and section labeling */
}


/* =====================================================================
   NAV — Pixel-perfect Nike structure
   Top bar (black) → Main bar (white, logo left, links center, icons right) → Promo bar (light gray)
===================================================================== */


/* 1. Top utility bar */


/* 2. Main nav bar */

/* Logo — left */


/* Center links */


/* Right icons */


/* Search box — Nike style inline */


/* 3. Promo bar — Nike style light gray */
.bas-promo-bar {
  background:var(--bas-gray-bg);
  text-align:center;
  padding:10px 24px;
  border-bottom:1px solid var(--bas-gray-border);
}
.bas-promo-bar p {
  font-size:13px;font-weight:500;color:var(--bas-black);
  line-height:1.4;
}
.bas-promo-bar a {text-decoration:underline;text-underline-offset:2px;}


@media(max-width:600px){
  /* topbar display:none removed */
}

/* =====================================================================
   HERO — Nike style: full-bleed dark photo, text bottom-center, two CTA pills
===================================================================== */
.bas-hero {
  position:relative;
  width:100%;
  height:70vh;
  min-height:500px;
  max-height:780px;
  background:var(--bas-black);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  padding-bottom:60px;
}
/* Background image layer */
.bas-hero-bg {
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 120% 60% at 50% 30%, rgba(30,35,45,0.3) 0%, transparent 70%),
    linear-gradient(to bottom, rgba(0,0,0,0) 50%, rgba(0,0,0,0.65) 100%),
    #111;
}
/* Atmospheric diagonal light beam — Nike energy */
.bas-hero-light {
  position:absolute;
  top:-20%;right:-10%;
  width:70%;height:140%;
  background:linear-gradient(135deg, rgba(255,255,255,0.03) 0%, transparent 50%);
  pointer-events:none;
}
/* Grid texture */
.bas-slide {position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease;}
.bas-slide-active {opacity:1 !important;}
  position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,
255,
255,
0.025) 1px,
transparent 1px),
linear-gradient(90deg,
rgba(255,
255,
255,
0.025) 1px,
transparent 1px);
  background-size:100px 100px;
}
/* Jersey silhouettes floating in background */
.bas-hero-silhouette {
  position:absolute;
  pointer-events:none;
}
.bas-hero-silhouette-left {
  left:8%;top:50%;transform:translateY(-50%);
  opacity:0.07;
}
.bas-hero-silhouette-right {
  right:8%;top:50%;transform:translateY(-50%);
  opacity:0.05;
}
/* Hero text — bottom center, Nike placement */
.bas-hero-text {
  position:relative;z-index:2;
  text-align:left;
  padding:0 48px 0 68px;
  max-width:800px;
  margin-top:-80px;
  margin-right:auto;
  margin-left:0;
}
.bas-hero-h1 {
  font-family:var(--bas-font-display);
  font-size:clamp(56px,5.5vw,88px);
  font-weight:900;
  line-height:0.88;
  letter-spacing:-0.03em;
  color:var(--bas-white);
  text-transform:uppercase;
  margin-bottom:20px;
}
.bas-hero-sub {
  font-size:15px;font-weight:300;
  color:rgba(255,255,255,0.65);
  margin-bottom:32px;
  letter-spacing:0.01em;
}
/* CTA pills — Nike style pill buttons */
.bas-hero-btns {
  display:flex;gap:12px;justify-content:center;flex-wrap:wrap;
}
.bas-pill-white {
  background:var(--bas-white);color:var(--bas-black);
  font-size:14px;font-weight:600;letter-spacing:0.01em;
  padding:14px 28px;border-radius:40px;
  transition:background 0.15s;display:inline-block;
}
.bas-pill-white:hover {background:#e8e8e8;}
.bas-pill-outline {
  background:rgba(255,255,255,0.15);
  color:var(--bas-white);
  border:1px solid rgba(255,255,255,0.5);
  font-size:14px;font-weight:500;
  padding:13px 28px;border-radius:40px;
  transition:background 0.15s,border-color 0.15s;display:inline-block;
  backdrop-filter:blur(4px);
}
.bas-pill-outline:hover {background:rgba(255,255,255,0.25);border-color:rgba(255,255,255,0.8);}

@media(max-width:768px){
  .bas-hero {height:75vw !important;min-height:420px !important;max-height:560px !important;padding-bottom:32px !important;}
  
}

/* =====================================================================
   SHARED
===================================================================== */
.bas-container {max-width:1280px;margin:0 auto;padding:0 48px;}
@media(max-width:768px){.bas-container {padding:0 20px;}}
@media(min-width:2560px){.bas-container {max-width:1800px;}}

.bas-section-tag {font-size:10px;letter-spacing:0.22em;text-transform:uppercase;color:var(--bas-gray-text);margin-bottom:20px;display:flex;align-items:center;gap:12px;}
.bas-section-tag::before {content:'';display:inline-block;width:24px;height:1px;background:var(--bas-gray-border);}
.bas-section-h2 {font-family:var(--bas-font-display);font-size:clamp(36px,4vw,56px);font-weight:800;line-height:1.0;letter-spacing:-0.01em;text-transform:uppercase;margin-bottom:32px;}

/* =====================================================================
   POSITIONING
===================================================================== */
.bas-positioning {background:var(--bas-white);padding:80px 0;}
.bas-positioning-grid {display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
.bas-positioning-body {font-size:16px;font-weight:300;color:var(--bas-gray-text);line-height:1.8;margin-bottom:28px;}
.bas-positioning-list {list-style:none;display:flex;flex-direction:column;gap:14px;}
.bas-positioning-list li {display:flex;align-items:flex-start;gap:14px;font-size:15px;color:var(--bas-black);line-height:1.5;font-weight:300;}
.bas-list-dot {width:5px;height:5px;border-radius:50%;background:var(--bas-gray-meta);margin-top:9px;flex-shrink:0;}
.bas-positioning-visual {background:var(--bas-dark);border-radius:12px;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;overflow:hidden;}
@media(max-width:768px){.bas-positioning-grid {grid-template-columns:1fr;gap:40px;}}

/* =====================================================================
   FEATURES
===================================================================== */
.bas-features {padding:120px 0;background:var(--bas-gray-bg);}
.bas-features-header {text-align:center;margin-bottom:72px;}
.bas-features-grid {display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--bas-gray-border);border:1px solid var(--bas-gray-border);}
.bas-feature-card {background:var(--bas-gray-bg);padding:48px 36px;}
.bas-feature-icon-wrap {width:48px;height:48px;margin-bottom:28px;}
.bas-feature-title {font-family:var(--bas-font-display);font-size:21px;font-weight:700;text-transform:uppercase;letter-spacing:0.04em;margin-bottom:14px;line-height:1.1;}
.bas-feature-body {font-size:14px;color:var(--bas-gray-text);line-height:1.75;font-weight:300;}
@media(max-width:1024px){.bas-features-grid {grid-template-columns:repeat(2,1fr);}}
@media(max-width:640px){.bas-features-grid {grid-template-columns:1fr;}}

/* =====================================================================
   WHO
===================================================================== */
.bas-who {padding:120px 0;background:var(--bas-black);}
.bas-who .bas-section-tag {color:rgba(255,255,255,0.4);}
.bas-who .bas-section-tag::before {background:rgba(255,255,255,0.15);}
.bas-who .bas-section-h2 {color:var(--bas-white);}
.bas-who-grid {display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,0.08);margin-top:64px;}
.bas-who-card {background:var(--bas-black);padding:40px 32px;transition:background 0.2s;}
.bas-who-card:hover {background:#1a1a1a;}
.bas-who-icon-wrap {width:52px;height:52px;border:1px solid rgba(255,255,255,0.15);display:flex;align-items:center;justify-content:center;margin-bottom:24px;}
.bas-who-title {font-family:var(--bas-font-display);font-size:20px;font-weight:700;text-transform:uppercase;letter-spacing:0.04em;color:var(--bas-white);margin-bottom:14px;}
.bas-who-body {font-size:14px;color:rgba(255,255,255,0.5);line-height:1.75;font-weight:300;}
@media(max-width:1024px){.bas-who-grid {grid-template-columns:repeat(2,1fr);}}
@media(max-width:640px){.bas-who-grid {grid-template-columns:1fr;}}

/* =====================================================================
   STATS
===================================================================== */
.bas-stats {padding:80px 0;background:var(--bas-gray-bg);border-top:1px solid var(--bas-gray-border);border-bottom:1px solid var(--bas-gray-border);}
.bas-stats-grid {display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--bas-gray-border);}
.bas-stat-item {padding:40px 32px;border-right:1px solid var(--bas-gray-border);text-align:center;}
.bas-stat-item:last-child {border-right:none;}
.bas-stat-num {font-family:var(--bas-font-display);font-size:clamp(40px,4vw,64px);font-weight:900;letter-spacing:-0.02em;line-height:1;margin-bottom:8px;color:var(--bas-black);}
.bas-stat-label {font-size:12px;color:var(--bas-gray-text);letter-spacing:0.06em;text-transform:uppercase;}
@media(max-width:768px){.bas-stats-grid {grid-template-columns:repeat(2,1fr);}.bas-stat-item {border-right:none;border-bottom:1px solid var(--bas-gray-border);}}

/* =====================================================================
   PROCESS
===================================================================== */
.bas-process {padding:120px 0;background:var(--bas-white);}
.bas-process-header {margin-bottom:72px;}
.bas-process-steps {display:grid;grid-template-columns:repeat(6,1fr);position:relative;}
.bas-process-steps::before {content:'';position:absolute;top:27px;left:28px;right:28px;height:1px;background:var(--bas-gray-border);z-index:0;}
.bas-step {position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 8px;}
.bas-step-num {width:54px;height:54px;border-radius:50%;background:var(--bas-white);border:1px solid var(--bas-gray-border);display:flex;align-items:center;justify-content:center;font-family:var(--bas-font-display);font-size:16px;font-weight:700;margin-bottom:20px;}
.bas-step-title {font-family:var(--bas-font-display);font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:10px;}
.bas-step-body {font-size:13px;color:var(--bas-gray-text);line-height:1.65;font-weight:300;}
@media(max-width:1024px){.bas-process-steps {grid-template-columns:repeat(3,1fr);gap:40px;}.bas-process-steps::before {display:none;}}
@media(max-width:640px){.bas-process-steps {grid-template-columns:1fr;}}

/* =====================================================================
   CUSTOMIZE
===================================================================== */
.bas-customize {padding:120px 0;background:var(--bas-gray-bg);}
.bas-customize .bas-section-tag {color:var(--bas-gray-text);}
.bas-customize .bas-section-tag::before {background:var(--bas-gray-border);}
.bas-customize .bas-section-h2 {color:var(--bas-black);}
.bas-customize-grid {display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start;margin-top:64px;}
.bas-customize-desc {font-size:16px;font-weight:300;color:var(--bas-gray-text);line-height:1.8;margin-bottom:36px;}
.bas-customize-items {display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--bas-gray-border);}
.bas-customize-item {background:var(--bas-white);padding:24px;border-top:2px solid transparent;transition:border-color 0.2s;}
.bas-customize-item:hover {border-top-color:var(--bas-black);}
.bas-customize-item-title {font-size:13px;font-weight:500;color:var(--bas-black);margin-bottom:4px;}
.bas-customize-item-sub {font-size:12px;color:rgba(255,255,255,0.4);font-weight:300;}
.bas-customize-visual {aspect-ratio:3/4;background:var(--bas-gray-border);display:flex;align-items:center;justify-content:center;position:relative;}
@media(max-width:768px){.bas-customize-grid {grid-template-columns:1fr;gap:40px;}.bas-customize-items {grid-template-columns:1fr;}}

/* =====================================================================
   FIT
===================================================================== */
.bas-fit {padding:120px 0;background:var(--bas-gray-bg);overflow:hidden;}
.bas-fit-grid {display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;margin-top:64px;}
.bas-fit-panels {display:flex;flex-direction:column;gap:2px;}
.bas-fit-panel {border:1px solid var(--bas-gray-border);padding:36px;position:relative;overflow:hidden;}
.bas-fit-panel-num {font-family:var(--bas-font-display);font-size:64px;font-weight:900;color:var(--bas-gray-bg);line-height:1;position:absolute;top:20px;right:24px;pointer-events:none;}
.bas-fit-panel-title {font-family:var(--bas-font-display);font-size:22px;font-weight:800;text-transform:uppercase;letter-spacing:0.04em;margin-bottom:16px;}
.bas-fit-panel-body {font-size:15px;color:var(--bas-gray-text);line-height:1.75;font-weight:300;}
.bas-fit-img {overflow:hidden;aspect-ratio:3/4;background:#f0f0f0;}
.bas-fit-img img {width:100%;height:100%;object-fit:cover;object-position:top center;}
@media(max-width:768px){.bas-fit-grid {grid-template-columns:1fr;gap:40px;}}

/* =====================================================================
   TESTIMONIALS
===================================================================== */
.bas-testimonials {padding:120px 0;background:var(--bas-white);}
.bas-testimonials-header {text-align:center;margin-bottom:64px;}
.bas-testimonials-grid {display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.bas-testimonial-card {background:var(--bas-gray-bg);padding:44px;border-left:3px solid var(--bas-black);}
.bas-testimonial-stars {font-size:13px;color:var(--bas-black);letter-spacing:4px;margin-bottom:20px;}
.bas-testimonial-text {font-size:17px;font-weight:300;line-height:1.75;color:var(--bas-dark);margin-bottom:28px;font-style:italic;}
.bas-testimonial-source {font-size:12px;font-weight:500;color:var(--bas-gray-text);text-transform:uppercase;letter-spacing:0.08em;}
@media(max-width:768px){.bas-testimonials-grid {grid-template-columns:1fr;}}

/* =====================================================================
   GALLERY — WHITE background (Nike product list style)
   Clean white, 4-col grid, borderless cards, filter tabs
===================================================================== */
.bas-gallery {
  padding:80px 0 100px;
  background:var(--bas-white);
}
.bas-gallery-header {
  display:flex;align-items:flex-end;justify-content:space-between;
  margin-bottom:40px;
  gap:24px;
}
.bas-gallery-h2 {
  font-family:var(--bas-font-display);
  font-size:clamp(32px,3.5vw,48px);
  font-weight:800;line-height:1.0;
  letter-spacing:-0.01em;text-transform:uppercase;
  margin-bottom:10px;
}
.bas-gallery-subtitle {
  font-size:15px;font-weight:300;color:var(--bas-gray-text);
  max-width:520px;line-height:1.7;
}
.bas-gallery-view-all {
  display:flex;align-items:center;gap:6px;
  font-size:13px;font-weight:600;
  color:var(--bas-black);
  white-space:nowrap;flex-shrink:0;
  text-decoration:underline;text-underline-offset:3px;
  transition:opacity 0.2s;
}
.bas-gallery-view-all:hover {opacity:0.5;}

/* Filter tabs — Nike style, underline active */
.bas-gallery-filters {
  display:flex;gap:0;
  border-bottom:1px solid var(--bas-gray-border);
  margin-bottom:40px;
  overflow-x:auto;
  scrollbar-width:none;
}
.bas-gallery-filters::-webkit-scrollbar {display:none;}
.bas-gallery-filter {
  font-size:14px;font-weight:400;
  color:var(--bas-gray-text);
  padding:14px 18px;
  border:none;border-bottom:2px solid transparent;
  background:none;
  cursor:pointer;
  transition:color 0.15s,border-color 0.15s;
  white-space:nowrap;
  font-family:var(--bas-font-body);
}
.bas-gallery-filter.active {color:var(--bas-black);font-weight:600;border-bottom-color:var(--bas-black);}
.bas-gallery-filter:hover:not(.active) {color:var(--bas-black);}

/* Product grid — 4 cols, white bg, generous spacing */
.bas-product-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
  margin-bottom:56px;
}

/* Product card — Nike style */
.bas-product-card {
  cursor:pointer;
}
.bas-product-img {
  background:var(--bas-gray-bg);
  aspect-ratio:1/1;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  margin-bottom:16px;
  position:relative;
}
.bas-product-img img {
  width:100%;height:100%;object-fit:cover;
  transition:transform 0.4s ease;
}
.bas-product-card:hover .bas-product-img img {transform:scale(1.04);}
.bas-product-img-svg {
  width:68%;height:68%;
  transition:transform 0.4s ease;
}
.bas-product-card:hover .bas-product-img-svg {transform:scale(1.06);}

/* Color swatches */
.bas-swatch-row {display:flex;align-items:center;gap:6px;margin-bottom:8px;}
.bas-swatch {
  width:16px;height:16px;border-radius:50%;
  border:1px solid rgba(0,0,0,0.1);flex-shrink:0;
}
.bas-color-count {font-size:12px;color:var(--bas-gray-text);margin-left:4px;}

.bas-product-name {
  font-size:15px;font-weight:600;color:var(--bas-black);
  margin-bottom:3px;line-height:1.3;
}
.bas-product-type {
  font-size:14px;font-weight:300;color:var(--bas-gray-text);
  margin-bottom:8px;
}
/* "Customize" — appears on hover like Nike "Quick Add" */
.bas-product-customize {
  display:inline-block;
  font-size:13px;font-weight:500;color:var(--bas-black);
  text-decoration:underline;text-underline-offset:2px;
  opacity:0;transform:translateY(4px);
  transition:opacity 0.2s,transform 0.2s;
}
.bas-product-card:hover .bas-product-customize {opacity:1;transform:translateY(0);}

/* Gallery CTA */
.bas-gallery-footer {text-align:center;}
.bas-btn-dark-pill {
  display:inline-block;
  background:var(--bas-black);color:var(--bas-white);
  font-size:14px;font-weight:600;
  padding:15px 40px;border-radius:40px;
  transition:background 0.15s;
}
.bas-btn-dark-pill:hover {background:#333;}

@media(max-width:1024px){.bas-product-grid {grid-template-columns:repeat(3,1fr);gap:20px;}}
@media(max-width:768px){
  .bas-gallery-header {flex-direction:column;align-items:flex-start;}
  .bas-product-grid {grid-template-columns:repeat(2,1fr);gap:16px;}
}
@media(max-width:400px){.bas-product-grid {grid-template-columns:1fr;}}

/* =====================================================================
   PRICING
===================================================================== */
.bas-pricing {padding:100px 0;background:var(--bas-black);}
.bas-pricing .bas-section-tag {color:rgba(255,255,255,0.4);}
.bas-pricing .bas-section-tag::before {background:rgba(255,255,255,0.15);}
.bas-pricing .bas-section-h2 {color:var(--bas-white);}
.bas-pricing-grid {display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px;background:rgba(255,255,255,0.08);margin-top:64px;margin-bottom:40px;}
.bas-price-item {background:var(--bas-black);padding:36px 32px;display:flex;align-items:flex-start;gap:20px;}
.bas-price-bullet {width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,0.4);margin-top:10px;flex-shrink:0;}
.bas-price-text {font-size:15px;color:rgba(255,255,255,0.5);line-height:1.65;font-weight:300;}
.bas-price-text strong {color:var(--bas-white);font-weight:500;display:block;margin-bottom:4px;font-size:16px;}
.bas-pricing-cta {text-align:center;}
.bas-btn-white-pill {display:inline-block;background:var(--bas-white);color:var(--bas-black);font-size:14px;font-weight:600;padding:14px 40px;border-radius:40px;transition:background 0.15s;}
.bas-btn-white-pill:hover {background:#e8e8e8;}
@media(max-width:768px){.bas-pricing-grid {grid-template-columns:1fr;}}

/* =====================================================================
   FAQ
===================================================================== */
.bas-faq {padding:120px 0;background:var(--bas-white);}
.bas-faq-header {margin-bottom:64px;}
.bas-faq-grid {display:grid;grid-template-columns:1fr 1fr;gap:0 2px;}
.bas-faq-item {border-top:1px solid var(--bas-gray-border);overflow:hidden;}
.bas-faq-item:nth-last-child(-n+2) {border-bottom:1px solid var(--bas-gray-border);}
.bas-faq-btn {width:100%;background:none;border:none;cursor:pointer;padding:24px 4px;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;text-align:left;font-family:var(--bas-font-body);color:var(--bas-black);-webkit-appearance:none;appearance:none;}
.bas-faq-q {font-family:var(--bas-font-display);font-size:17px;font-weight:700;text-transform:uppercase;letter-spacing:0.02em;color:var(--bas-black);line-height:1.2;}
.bas-faq-ico {flex-shrink:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center;transition:transform 0.25s;color:var(--bas-black);}
.bas-faq-ico svg {width:14px;height:14px;stroke:var(--bas-black) !important;}
.bas-faq-body {max-height:0;overflow:hidden;transition:max-height 0.35s ease;}
.bas-faq-body-inner {padding-bottom:20px;font-size:14px;color:var(--bas-gray-text);line-height:1.75;font-weight:300;}
.bas-faq-item.open .bas-faq-ico {transform:rotate(180deg);}
.bas-faq-item.open .bas-faq-body {max-height:400px;}
@media(max-width:768px){.bas-faq-grid {grid-template-columns:1fr;}}

/* =====================================================================
   BOTTOM CTA
===================================================================== */
.bas-cta {padding:140px 24px;background:var(--bas-black);text-align:center;position:relative;overflow:hidden;}
.bas-cta-grid {position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,0.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.018) 1px,transparent 1px);background-size:64px 64px;}
.bas-cta-h2 {font-family:var(--bas-font-display);font-size:clamp(40px,6vw,88px);font-weight:900;text-transform:uppercase;color:var(--bas-white);line-height:0.95;letter-spacing:-0.01em;margin-bottom:24px;position:relative;z-index:1;}
.bas-cta-h2 em {display:block;font-style:normal;color:rgba(255,255,255,0.4);}
.bas-cta-body {font-size:16px;font-weight:300;color:rgba(255,255,255,0.45);max-width:480px;margin:0 auto 44px;line-height:1.75;position:relative;z-index:1;}
.bas-cta-btns {display:flex;gap:12px;justify-content:center;flex-wrap:wrap;position:relative;z-index:1;}
.bas-cta-btn-white {background:var(--bas-white);color:var(--bas-black);font-size:14px;font-weight:600;padding:14px 28px;border-radius:40px;transition:background 0.15s;display:inline-block;}
.bas-cta-btn-white:hover {background:#e8e8e8;}
.bas-cta-btn-ghost {background:transparent;color:rgba(255,255,255,0.6);font-size:14px;font-weight:500;padding:13px 28px;border-radius:40px;border:1px solid rgba(255,255,255,0.2);transition:all 0.15s;display:inline-block;}
.bas-cta-btn-ghost:hover {border-color:rgba(255,255,255,0.5);color:var(--bas-white);}

/* =====================================================================
   FOOTER — Nike style: WHITE background, multi-column links,
   thin dividers, bottom 3-col utility links
===================================================================== */
.bas-footer {
  background:var(--bas-white);
  color:var(--bas-black);
  border-top:1px solid var(--bas-gray-border);
}

/* Main columns section */
.bas-footer-main {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:40px;
  padding:56px 48px 48px;
  border-bottom:1px solid var(--bas-gray-border);
}
.bas-footer-col-title {
  font-size:14px;font-weight:700;
  color:var(--bas-black);
  margin-bottom:20px;
  letter-spacing:0.01em;
}
.bas-footer-links {list-style:none;display:flex;flex-direction:column;gap:12px;}
.bas-footer-links a {
  font-size:14px;font-weight:300;
  color:var(--bas-gray-text);
  transition:color 0.15s;
}
.bas-footer-links a:hover {color:var(--bas-black);text-decoration:underline;text-underline-offset:2px;}

/* Social icons */
.bas-footer-social {display:flex;gap:12px;margin-top:24px;}
.bas-footer-social a {
  width:36px;height:36px;
  border:1px solid var(--bas-gray-border);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  transition:border-color 0.15s;color:var(--bas-black);
}
.bas-footer-social a:hover {border-color:var(--bas-black);}
.bas-footer-social a svg {width:15px;height:15px;}

/* Divider + bottom utility bar */
.bas-footer-utility {
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  padding:40px 48px;
  border-bottom:1px solid var(--bas-gray-border);
  gap:40px;
}
.bas-footer-utility-col-title {
  font-size:14px;font-weight:700;
  color:var(--bas-black);margin-bottom:16px;
}
.bas-footer-utility-links {list-style:none;display:flex;flex-direction:column;gap:10px;}
.bas-footer-utility-links a {font-size:13px;color:var(--bas-gray-text);transition:color 0.15s;}
.bas-footer-utility-links a:hover {color:var(--bas-black);text-decoration:underline;text-underline-offset:2px;}

/* Bottom legal bar */
.bas-footer-legal-bar {
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 48px;
  flex-wrap:wrap;gap:12px;
}
.bas-footer-logo-wrap {
  display:flex;align-items:center;gap:16px;
}
.bas-footer-logo-wrap img {height:20px;width:auto;filter:brightness(0);}
.bas-footer-logo-text {font-family:var(--bas-font-display);font-size:15px;font-weight:900;text-transform:uppercase;letter-spacing:0.08em;}
.bas-footer-legal-links {display:flex;align-items:center;gap:20px;flex-wrap:wrap;}
.bas-footer-legal-links a {font-size:12px;color:var(--bas-gray-text);transition:color 0.15s;}
.bas-footer-legal-links a:hover {color:var(--bas-black);}
.bas-footer-region {
  display:flex;align-items:center;gap:6px;
  font-size:13px;color:var(--bas-gray-text);
}
.bas-footer-region svg {width:14px;height:14px;}

@media(max-width:1024px){.bas-footer-main {grid-template-columns:repeat(3,1fr);}.bas-footer-utility {grid-template-columns:1fr;gap:24px;}}
@media(max-width:768px){
  .bas-footer-main {grid-template-columns:repeat(2,1fr);gap:28px;padding:40px 20px;}
  .bas-footer-utility {padding:32px 20px;}
  .bas-footer-legal-bar {padding:16px 20px;flex-direction:column;align-items:flex-start;}
}

/* ── MOBILE HAMBURGER ── */


/* ── MOBILE DRAWER ── */


/* ── GLOBAL MOBILE FIXES ── */

@media(max-width:768px){

  /* Features: sticky 2-col → single col */
  .bas-features #features > .bas-container > div,
.bas-product-page section#features .bas-container > div {
    grid-template-columns:1fr !important;
    gap:40px !important;
  }
  .bas-product-page section#features .bas-container > div > div:first-child {
    position:static !important;
  }

  /* Hero */
  .bas-hero {
    min-height:60vw;
    padding-bottom:40px;
  }

  /* Fit images 2-col → 1-col */
  .bas-fit .bas-container > div[style*="grid-template-columns:1fr 1fr"][style*="margin-top:48px"] {
    grid-template-columns:1fr !important;
  }
  .bas-fit .bas-container > div[style*="grid-template-columns:1fr 1fr"][style*="margin-top:2px"] {
    grid-template-columns:1fr !important;
  }

  /* WHO 2×2 → 1-col */
  section[style*="Built for Every"] .bas-container > div[style*="grid-template-columns:1fr 1fr"],
.bas-container div[style*="grid-template-columns:1fr 1fr;gap:2px;background:var(--bas-gray-border)"] {
    grid-template-columns:1fr !important;
  }

  /* Stats split → stack */
  .bas-product-page section[style*="background:var(--bas-black)"] > div[style*="grid-template-columns:1fr 1fr;min-height"] {
    grid-template-columns:1fr !important;
  }
  .bas-product-page section[style*="background:var(--bas-black)"] div[style*="grid-template-columns:1fr 1fr;border-left"] {
    grid-template-columns:1fr 1fr !important;
  }

  /* Testimonials 2×2 → 1-col */
  .bas-testimonials .bas-container > div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns:1fr !important;
  }

  /* Customize left/right → stack */
  .bas-customize .bas-container > div[style*="grid-template-columns:1fr 1fr;gap:2px"] {
    grid-template-columns:1fr !important;
  }

  /* Features list left/right → stack */
  .bas-features .bas-container > div[style*="grid-template-columns:1fr 1.6fr"] {
    grid-template-columns:1fr !important;
    gap:40px !important;
  }

  /* Positioning grid */
  .bas-positioning-grid {grid-template-columns:1fr !important;}

  /* Section headers 1fr 2fr → 1fr */
  .bas-container > div[style*="grid-template-columns:1fr 2fr"] {
    grid-template-columns:1fr !important;
    gap:16px !important;
  }

  /* WHO section header */
  .bas-product-page section[style*="background:var(--bas-gray-bg)"] .bas-container > div[style*="grid-template-columns:1fr 2fr"] {
    grid-template-columns:1fr !important;
    gap:16px !important;
  }

  /* WHO cards 2×2 → 1-col */
  div[style*="grid-template-columns:repeat(4,
1fr)"],
.bas-product-page div[style*="grid-template-columns:repeat(4,
1fr)"] {
    grid-template-columns:1fr 1fr !important;
  }

  /* Pricing 3-col → 1-col */
  .bas-pricing-grid {grid-template-columns:1fr !important;} .bas-pricing .bas-container > div[style*="grid-template-columns:1fr 2fr"] {grid-template-columns:1fr !important;gap:40px !important;}

  /* Footer utility */
  .bas-footer-utility {grid-template-columns:1fr !important;}

  /* Footer legal bar */
  .bas-footer-legal-bar {
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:12px !important;
  }
  .bas-footer-logo-wrap {flex-direction:column !important;align-items:flex-start !important;gap:12px !important;}

  /* CTA section padding */
  .bas-bottom-cta,
.bas-cta {padding:80px 20px !important;}

  /* Section padding reduction */
  .bas-features,
.bas-process,
.bas-positioning,
.bas-testimonials,
.bas-customize,
.bas-fit,
.bas-pricing,
.bas-faq {
    padding-top:72px !important;
    padding-bottom:72px !important;
  }
  section[style*="padding:100px 0"] {padding:72px 0 !important;}

  /* WHO cards bottom tag */
  .bas-product-page div[style*="padding-top:24px;border-top:1px solid var(--bas-gray-border)"] span[style*="font-size:12px"] {
    font-size:11px !important;
  }

  /* Stats 2×2 numbers — smaller on mobile */
  .bas-product-page div[style*="font-size:72px;font-weight:900"] {
    font-size:52px !important;
  }

  /* Topbar — hide on very small */
  .bas-promo-bar p {font-size:11px;}
}

@media(max-width:480px){
  /* Product gallery → 2-col still ok, just tighter */
  .bas-product-grid {grid-template-columns:1fr 1fr !important;gap:12px !important;}

  /* WHO 2×2 → 1-col on very small */
  .bas-product-page section[style*="background:var(--bas-gray-bg)"] div[style*="grid-template-columns:1fr 1fr;gap:2px"] {
    grid-template-columns:1fr !important;
  }

  /* Features 4-row stays 1-col */
  .bas-features .bas-container div[style*="grid-template-columns:56px 1fr"] {
    gap:20px !important;
  }

  /* Fit text cards */
  .bas-fit .bas-container > div[style*="grid-template-columns:1fr 1fr"][style*="margin-top:2px"] {
    grid-template-columns:1fr !important;
  }

  /* Testimonials padding smaller */
  .bas-product-page div[style*="padding:48px 44px"] {
    padding:32px 24px !important;
  }

  /* Hero H1 smaller */
  .bas-hero-h1 {font-size:28px !important;line-height:1.0 !important;}
  .bas-section-h2 {font-size:32px !important;}
}

@media(max-width:360px){
  .bas-product-grid {grid-template-columns:1fr !important;}
  .bas-footer-main {grid-template-columns:1fr !important;}
}

@media(max-width:768px){
  .bas-hero {
    height:auto !important;
    min-height:auto !important;
    max-height:none !important;
    flex-direction:column !important;
    justify-content:flex-start !important;
    padding-bottom:0 !important;
  }
  /* Image area - fixed height on mobile, no text overlap */
  /* Hero image area on mobile */
  .bas-product-page #bas-hero-slides {
    position:relative !important;
    height:62vw !important;
    min-height:240px !important;
    max-height:340px !important;
    width:100% !important;
    inset:auto !important;
    display:block !important;
    overflow:hidden;
  }
  .bas-product-page #bas-hero-slides .bas-slide {
    position:absolute !important;
    inset:0 !important;
    height:100% !important;
  }
  .bas-product-page #bas-hero-slides .bas-slide img {
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center 20% !important;
  }
  /* Hide overlay on mobile - not needed when text is separate */
  .bas-hero > div[style*="linear-gradient"] {
    display:none !important;
  }
  /* Text block sits below image on solid black */
  .bas-hero-text {
    position:relative !important;
    z-index:2 !important;
    margin-top:0 !important;
    background:var(--bas-black) !important;
    width:100% !important;
    max-width:100% !important;
    padding:32px 24px 40px !important;
    text-align:center !important;
  }
  .bas-hero-eyebrow {justify-content:center !important;}
  .bas-hero-btns {justify-content:center !important;}
  .bas-hero-h1 {
    font-size:clamp(32px,8vw,48px) !important;
    margin-bottom:16px !important;
  }
  .bas-hero-h1 em {color:rgba(255,255,255,0.5) !important;}
  .bas-hero-sub {font-size:14px !important;margin-bottom:28px !important;}
  .bas-hero-eyebrow {justify-content:center !important;}
  .bas-hero-btns {justify-content:center !important;}
  /* Hide grid and light effects on mobile */
  .bas-hero-grid,
.bas-hero-light {display:none !important;}
}
@media(max-width:480px){
  .bas-hero > img {height:62vw !important;min-height:220px !important;}
  .bas-hero-h1 {font-size:32px !important;}
}

/* Prevent horizontal overflow */
@media(max-width:768px){
  .bas-container {overflow:hidden;}
  img {max-width:100%;}
  div[style*="grid-template-columns"] {max-width:100%;}
  .bas-hero > img {max-width:100%;width:100% !important;}
  /* Fix fit images overflow */
  .bas-product-page section[style*="background:var(--bas-gray-bg)"] > .bas-container > div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns:1fr !important;
    overflow:hidden;
  }

  /* Nav actions on mobile */
  
  
}

/* ── Testimonials mobile: single card per view ── */
@media(max-width:768px){
  .bas-product-page #test-track {
    display:flex !important;
  }
  .bas-product-page .test-card {
    min-width:100% !important;
    padding:32px 24px !important;
  }
}

/* ── Trust Bar mobile: 1 col stack ── */
@media(max-width:768px){
  /* Trust bar grid → single column */
  .bas-product-page div[style*="grid-template-columns:repeat(5,
1fr)"] {
    grid-template-columns:1fr 1fr !important;
    gap:0 !important;
  }
}
@media(max-width:480px){
  .bas-product-page div[style*="grid-template-columns:repeat(5,
1fr)"] {
    grid-template-columns:1fr !important;
  }
  /* Trust bar items padding */
  .bas-product-page div[style*="grid-template-columns:repeat(5,
1fr)"] > div {
    border-right:none !important;
    border-bottom:1px solid var(--bas-gray-border) !important;
    padding:20px 16px !important;
  }
}

/* ── Footer mobile ── */
@media(max-width:768px){
  .bas-product-page footer > div:first-of-type {
    grid-template-columns:1fr !important;
    padding:40px 24px 32px !important;
  }
  .bas-product-page footer > div:first-of-type > div:first-child {
    padding-right:0 !important;
    border-right:none !important;
    border-bottom:1px solid var(--bas-gray-border) !important;
    padding-bottom:32px !important;
    margin-bottom:8px !important;
  }
  .bas-product-page footer > div:first-of-type > div:not(:first-child) {
    padding-left:0 !important;
    padding-top:24px !important;
    padding-bottom:24px !important;
    border-bottom:1px solid var(--bas-gray-border) !important;
  }
  .bas-product-page footer > div:first-of-type > div:last-child {
    border-bottom:none !important;
  }
  .bas-product-page footer > div:last-of-type {
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:8px !important;
    padding:16px 24px !important;
  }
}

/* ── FIT section mobile ── */
@media(max-width:768px){
  /* Each fit card: stack image on top, text below */
  div[style*="grid-template-columns:1fr 1fr;gap:2px;margin-top:48px"],
.bas-product-page div[style*="grid-template-columns:1fr 1fr;gap:2px;margin-top:2px"] {
    grid-template-columns:1fr !important;
  }
  /* Big & Tall: on mobile, swap order so image comes first */
  .bas-product-page div[style*="grid-template-columns:1fr 1fr;gap:2px;margin-top:2px"] > div:first-child {
    order:2 !important;
  }
  .bas-product-page div[style*="grid-template-columns:1fr 1fr;gap:2px;margin-top:2px"] > div:last-child {
    order:1 !important;
  }
  /* Image aspect ratio on mobile - less tall */
  .bas-product-page div[style*="aspect-ratio:4/3"] {
    aspect-ratio:3/2 !important;
  }
  /* Text padding smaller on mobile */
  .bas-product-page div[style*="padding:48px 44px;display:flex;flex-direction:column;justify-content:center"] {
    padding:28px 24px !important;
  }
}

/* ── Stats section mobile ── */
@media(max-width:768px){
  .bas-product-page #bas-stats-section > div:first-child {
    grid-template-columns:1fr !important;
    min-height:auto !important;
  }
  .bas-product-page #bas-stats-section > div:first-child > div:first-child {
    min-height:260px !important;
    height:56vw !important;
    position:relative !important;
  }
  .bas-product-page #bas-stats-section > div:first-child > div:first-child img {
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
  }
  .bas-product-page #bas-stats-section > div:first-child > div:last-child {
    border-left:none !important;
    border-top:1px solid rgba(255,255,255,0.08) !important;
  }
}

/* ═══════════ PRODUCT DETAIL PAGE ═══════════ */

/* Breadcrumb */
.bas-breadcrumb {
  padding:16px 0;
  font-size:12px;
  color:var(--bas-gray-text);
  display:flex;align-items:center;gap:6px;
  border-bottom:1px solid var(--bas-gray-border);
  margin-bottom:40px;
}
.bas-breadcrumb a {color:var(--bas-gray-text);text-decoration:none;}
.bas-breadcrumb a:hover {color:var(--bas-black);}
.bas-breadcrumb span {color:var(--bas-gray-text);}

/* Main layout: left images + right info */
.bas-pd-layout {
  display:grid;
  grid-template-columns:1fr 480px;
  gap:64px;
  align-items:start;
}

/* Left: image gallery */
.bas-pd-gallery {
  display:grid;
  grid-template-columns:80px 1fr;
  gap:12px;
  position:sticky;
  top:80px;
}
.bas-pd-thumbs {
  display:flex;
  flex-direction:column;
  gap:8px;
}
.bas-pd-thumb {
  aspect-ratio:1/1;
  background:var(--bas-gray-bg);
  cursor:pointer;
  border:2px solid transparent;
  overflow:hidden;
  transition:border-color 0.15s;
}
.bas-pd-thumb.active {border-color:var(--bas-black);}
.bas-pd-thumb img {width:100%;height:100%;object-fit:cover;}
.bas-pd-main-img {
  aspect-ratio:1/1;
  background:var(--bas-gray-bg);
  overflow:hidden;
  position:relative;
}
.bas-pd-main-img img {
  width:100%;height:100%;
  object-fit:cover;
  object-position:top center;
  transition:opacity 0.3s;
}

/* Right: product info */
.bas-pd-info {padding-top:4px;}
.bas-pd-tag {
  font-size:11px;font-weight:600;
  letter-spacing:0.14em;text-transform:uppercase;
  color:var(--bas-gray-text);margin-bottom:12px;
}
.bas-pd-title {
  font-family:var(--bas-font-display);
  font-size:clamp(24px,2vw,32px);
  font-weight:900;text-transform:uppercase;
  line-height:1.0;letter-spacing:-0.01em;
  color:var(--bas-black);margin-bottom:16px;
}
.bas-pd-subtitle {
  font-size:15px;font-weight:300;
  color:var(--bas-gray-text);line-height:1.75;
  margin-bottom:28px;
}
.bas-pd-custom-list {
  list-style:none;
  display:flex;flex-direction:column;gap:10px;
  margin-bottom:28px;
  padding:24px;
  background:var(--bas-gray-bg);
}
.bas-pd-custom-list li {
  display:flex;align-items:flex-start;gap:10px;
  font-size:14px;font-weight:300;color:var(--bas-black);line-height:1.5;
}
.bas-pd-custom-list li::before {
  content:"✔";
  font-size:12px;color:var(--bas-black);
  font-weight:700;flex-shrink:0;margin-top:1px;
}
.bas-pd-moq {
  font-size:13px;font-weight:600;
  color:var(--bas-black);margin-bottom:28px;
  padding:14px 16px;
  border:1px solid var(--bas-black);
  display:inline-block;
  letter-spacing:0.03em;
}
/* CTA buttons */
.bas-pd-btns {display:flex;flex-direction:column;gap:10px;margin-bottom:32px;}
.bas-pd-btn-primary {
  display:block;width:100%;
  background:var(--bas-black);color:var(--bas-white);
  font-size:14px;font-weight:700;
  letter-spacing:0.06em;text-transform:uppercase;
  padding:18px 24px;text-align:center;
  text-decoration:none;border:none;cursor:pointer;
  transition:background 0.15s;font-family:var(--bas-font-body);
}
.bas-pd-btn-primary:hover {background:#333;}
.bas-pd-btn-secondary {
  display:block;width:100%;
  background:var(--bas-white);color:var(--bas-black);
  font-size:14px;font-weight:600;
  letter-spacing:0.06em;text-transform:uppercase;
  padding:17px 24px;text-align:center;
  text-decoration:none;border:1px solid var(--bas-black);cursor:pointer;
  transition:all 0.15s;font-family:var(--bas-font-body);
}
.bas-pd-btn-secondary:hover {background:var(--bas-black);color:var(--bas-white);}

/* Accordion sections */
.bas-pd-accordion {border-top:1px solid var(--bas-gray-border);}
.bas-pd-acc-item {border-bottom:1px solid var(--bas-gray-border);}
.bas-pd-acc-btn {
  width:100%;display:flex;align-items:center;
  justify-content:space-between;
  padding:18px 0;
  background:none;border:none;cursor:pointer;
  font-family:var(--bas-font-display);
  font-size:16px;font-weight:700;
  text-transform:uppercase;letter-spacing:0.04em;
  color:var(--bas-black);text-align:left;
  -webkit-appearance:none;
}
.bas-pd-acc-icon {
  width:20px;height:20px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  transition:transform 0.25s;
}
.bas-pd-acc-item.open .bas-pd-acc-icon {transform:rotate(45deg);}
.bas-pd-acc-body {
  max-height:0;overflow:hidden;
  transition:max-height 0.4s ease;
}
.bas-pd-acc-body-inner {
  padding-bottom:20px;
  font-size:14px;font-weight:300;
  color:var(--bas-gray-text);line-height:1.8;
}
.bas-pd-acc-body-inner ul {list-style:none;display:flex;flex-direction:column;gap:8px;}
.bas-pd-acc-body-inner li {display:flex;align-items:flex-start;gap:10px;}
.bas-pd-acc-body-inner li::before {content:"—";flex-shrink:0;color:var(--bas-gray-text);}
/* max-height controlled by JS */

/* Timeline */
.bas-timeline {display:flex;flex-direction:column;gap:16px;}
.bas-timeline-item {display:flex;align-items:flex-start;gap:14px;}
.bas-timeline-icon {font-size:18px;flex-shrink:0;margin-top:1px;}
.bas-timeline-text strong {font-size:13px;font-weight:600;color:var(--bas-black);display:block;}
.bas-timeline-text span {font-size:13px;font-weight:300;color:var(--bas-gray-text);}

/* Related products */


/* Mobile */
@media(max-width:900px){
  .bas-pd-layout {grid-template-columns:1fr;gap:0;}
  .bas-pd-gallery {position:static;grid-template-columns:1fr;gap:8px;}
  .bas-pd-thumbs {flex-direction:row;overflow-x:auto;gap:6px;}
  .bas-pd-thumb {width:64px;min-width:64px;height:64px;}
  .bas-pd-info {padding:24px 0;}
  
}
@media(max-width:480px){
  .bas-pd-title {font-size:28px;}
  
}

@media(max-width:768px){
  .bas-product-page div[style*="grid-template-columns:1fr 1fr;gap:64px"] {
    grid-template-columns:1fr !important;
    gap:32px !important;
  }
  .bas-product-page div[style*="grid-template-columns:1fr 1fr;gap:2px;background:var(--bas-gray-border)"] {
    grid-template-columns:1fr 1fr !important;
  }
}

@media(max-width:900px){
  .bas-pd-gallery {
    grid-template-columns:1fr !important;
    gap:0 !important;
    position:static !important;
  }
  /* Main image first on mobile */
  .bas-pd-main-img {
    order:1;
    position:relative;
  }
  /* Prev/Next arrow buttons */
  .bas-pd-arrows {
    display:flex !important;
  }
  /* Thumbs below on mobile */
  .bas-pd-thumbs {
    order:2;
    flex-direction:row !important;
    overflow-x:auto;
    gap:6px !important;
    padding:10px 0;
    scrollbar-width:none;
    justify-content:center;
  }
  .bas-pd-thumbs::-webkit-scrollbar {display:none;}
  .bas-pd-thumb {
    width:56px !important;
    min-width:56px !important;
    height:56px !important;
  }
}
@media(min-width:901px){
  .bas-pd-arrows {display:none !important;}
}

@media(max-width:900px){
  /* CTA padding reset on mobile */
  div[style*="padding:80px 48px 80px 148px"] {padding:48px 24px !important;flex-direction:column !important;gap:24px !important;}
  /* Main layout stack */
  .bas-pd-layout {grid-template-columns:1fr !important;gap:0 !important;}
  /* Accordion body */
  
  /* Reviews track: single card on mobile */
  #pd-reviews-track > div {flex:0 0 calc(100% - 2px) !important;min-width:260px !important;}
  /* Related grid 2col */
  
  /* Bottom CTA stack */
  .bas-product-page div[style*="padding:80px 48px 80px 98px"] {
    padding:48px 24px !important;
    flex-direction:column !important;gap:24px !important;
  }
}
@media(max-width:480px){
  .bas-pd-title {font-size:24px !important;}
  .bas-pd-btn-primary,
.bas-pd-btn-secondary {font-size:13px !important;padding:15px !important;}
}

@media(max-width:768px){
  div[style*="grid-template-columns:1fr 1fr;gap:64px"] {grid-template-columns:1fr !important;gap:32px !important;}
  div[style*="grid-template-columns:1fr 2fr;gap:64px"] {grid-template-columns:1fr !important;gap:32px !important;}
}

/* =====================================================================
   INLINE-EXTRACTED STYLES FROM product-detail.html
   Grouped by top-level block (main/intro/customize/reviews/related/cta/trust).
   ===================================================================== */


/* --- bas-pd-main (15 classes) --- */
.bas-pd-main-x1 {
  background:var(--bas-white);
  padding-bottom:80px;
}
.bas-pd-main-x2 {
  color:var(--bas-black);
}
.bas-pd-main-x3 {
  width:100%;
  height:100%;
  background:#e0e0e0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:9px;
  color:#aaa;
}
.bas-pd-main-x4 {
  width:100%;
  height:100%;
  background:#e5e5e5;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:9px;
  color:#aaa;
}
.bas-pd-main-x5 {
  width:100%;
  height:100%;
  background:#e8e8e8;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:9px;
  color:#aaa;
}
.bas-pd-main-x6 {
  width:100%;
  height:100%;
  background:#ebebeb;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:9px;
  color:#aaa;
}
.bas-pd-main-x7 {
  width:100%;
  height:100%;
  background:#ededed;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:9px;
  color:#aaa;
}
.bas-pd-main-x8 {
  position:relative;
}
.bas-pd-main-x9 {
  display:none;
  position:absolute;
  inset:0;
  z-index:10;
  pointer-events:none;
  align-items:center;
  justify-content:space-between;
  padding:0 12px;
}
.bas-pd-main-x10 {
  width:36px;
  height:36px;
  background:rgba(255,255,255,0.9);
  border:none;
  border-radius:50%;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:all;
  box-shadow:0 2px 8px rgba(0,0,0,0.15);
  -webkit-appearance:none;
}
.bas-pd-main-x11 {
  width:100%;
  height:100%;
  background:#e0e0e0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.bas-pd-main-x12 {
  font-size:11px;
  letter-spacing:0.15em;
  text-transform:uppercase;
  color:#aaa;
}
.bas-pd-main-x13 {
  font-size:12px;
  color:#bbb;
  font-weight:300;
}
.bas-pd-main-x14 {
  font-size:10px;
  color:#ccc;
}
.bas-pd-main-x15 {
  margin-bottom:12px;
}

/* --- bas-pd-intro (7 classes) --- */
.bas-pd-intro-x1 {
  background:var(--bas-white);
  padding:72px 0;
  border-top:1px solid var(--bas-gray-border);
}
.bas-pd-intro-x2 {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  align-items:start;
}
.bas-pd-intro-x3 {
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(28px,3vw,40px);
  font-weight:900;
  text-transform:uppercase;
  line-height:0.95;
  color:var(--bas-black);
  margin-bottom:24px;
}
.bas-pd-intro-x4 {
  font-size:15px;
  font-weight:300;
  color:var(--bas-gray-text);
  line-height:1.8;
  margin-bottom:16px;
}
.bas-pd-intro-x5 {
  font-size:15px;
  font-weight:300;
  color:var(--bas-gray-text);
  line-height:1.8;
}
.bas-pd-intro-x6 {
  aspect-ratio:1/1;
  background:var(--bas-gray-bg);
  display:flex;
  align-items:center;
  justify-content:center;
}
.bas-pd-intro-x7 {
  font-size:11px;
  color:#aaa;
  letter-spacing:0.1em;
  text-transform:uppercase;
}

/* --- bas-pd-customize (8 classes) --- */
.bas-pd-customize-x1 {
  background:var(--bas-gray-bg);
  padding:72px 0;
  border-top:1px solid var(--bas-gray-border);
}
.bas-pd-customize-x2 {
  font-size:15px;
  font-weight:300;
  color:var(--bas-gray-text);
  line-height:1.8;
  margin-bottom:24px;
}
.bas-pd-customize-x3 {
  display:inline-block;
  background:var(--bas-black);
  color:var(--bas-white);
  font-size:13px;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  padding:16px 32px;
  text-decoration:none;
  transition:background 0.15s;
}
.bas-pd-customize-x4 {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2px;
  background:var(--bas-gray-border);
}
.bas-pd-customize-x5 {
  background:var(--bas-white);
  padding:24px 20px;
}
.bas-pd-customize-x6 {
  font-size:11px;
  font-weight:700;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--bas-black);
  margin-bottom:8px;
}
.bas-pd-customize-x7 {
  font-size:13px;
  font-weight:300;
  color:var(--bas-gray-text);
  line-height:1.6;
}
.bas-pd-customize-x8 {
  background:var(--bas-white);
  padding:24px 20px;
  grid-column:span 2;
}

/* --- bas-pd-reviews (13 classes) --- */
.bas-pd-reviews-x1 {
  background:var(--bas-gray-bg);
  padding:80px 0;
  border-top:1px solid var(--bas-gray-border);
}
.bas-pd-reviews-x2 {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:40px;
  flex-wrap:wrap;
  gap:16px;
}
.bas-pd-reviews-x3 {
  display:flex;
  gap:8px;
}
.bas-pd-reviews-x4 {
  width:40px;
  height:40px;
  border:1px solid var(--bas-gray-border);
  background:var(--bas-white);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  -webkit-appearance:none;
}
.bas-pd-reviews-x5 {
  display:flex;
  gap:2px;
  overflow:hidden;
  background:var(--bas-gray-border);
}
.bas-pd-reviews-x6 {
  flex:0 0 calc(50% - 1px);
  min-width:280px;
  background:var(--bas-white);
  padding:36px 32px;
  box-sizing:border-box;
}
.bas-pd-reviews-x7 {
  font-size:13px;
  letter-spacing:3px;
  color:var(--bas-black);
  margin-bottom:16px;
}
.bas-pd-reviews-x8 {
  font-size:15px;
  font-weight:300;
  line-height:1.8;
  color:var(--bas-black);
  font-style:italic;
  margin-bottom:24px;
}
.bas-pd-reviews-x9 {
  display:flex;
  align-items:center;
  gap:12px;
  padding-top:18px;
  border-top:1px solid var(--bas-gray-border);
}
.bas-pd-reviews-x10 {
  width:38px;
  height:38px;
  border-radius:50%;
  background:var(--bas-gray-bg);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.bas-pd-reviews-x11 {
  font-size:13px;
  font-weight:600;
  color:var(--bas-black);
}
.bas-pd-reviews-x12 {
  font-size:11px;
  color:var(--bas-gray-text);
}
.bas-pd-reviews-x13 {
  font-size:11px;
  color:var(--bas-gray-text);
  margin-top:12px;
}

/* --- bas-pd-related (7 classes) --- */


/* --- bas-pd-cta (6 classes) --- */
.bas-pd-cta-x1 {
  background:var(--bas-black);
  padding:80px 48px 80px 148px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
  flex-wrap:wrap;
}
.bas-pd-cta-x2 {
  font-family:var(--bas-font-display);
  font-size:clamp(28px,3vw,48px);
  font-weight:900;
  text-transform:uppercase;
  color:var(--bas-white);
  line-height:0.95;
  margin-bottom:16px;
}
.bas-pd-cta-x3 {
  font-size:14px;
  font-weight:300;
  color:rgba(255,255,255,0.55);
  max-width:480px;
  line-height:1.75;
}
.bas-pd-cta-x4 {
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:240px;
}
.bas-pd-cta-x5 {
  display:block;
  background:var(--bas-white);
  color:var(--bas-black);
  font-size:14px;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  padding:18px 32px;
  text-align:center;
  text-decoration:none;
  transition:opacity 0.15s;
}
.bas-pd-cta-x6 {
  display:block;
  background:transparent;
  color:rgba(255,255,255,0.65);
  border:1px solid rgba(255,255,255,0.25);
  font-size:14px;
  font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
  padding:17px 32px;
  text-align:center;
  text-decoration:none;
  transition:all 0.15s;
}

/* --- bas-pd-trust (8 classes) --- */
.bas-pd-trust-x1 {
  background:var(--bas-gray-bg);
  border-top:1px solid var(--bas-gray-border);
  border-bottom:1px solid var(--bas-gray-border);
}
.bas-pd-trust-x2 {
  max-width:1280px;
  margin:0 auto;
  padding:0 48px;
  display:grid;
  grid-template-columns:repeat(5,1fr);
}
.bas-pd-trust-x3 {
  display:flex;
  align-items:center;
  gap:14px;
  padding:28px 24px 28px 0;
  border-right:1px solid var(--bas-gray-border);
}
.bas-pd-trust-x4 {
  width:40px;
  height:40px;
  background:var(--bas-black);
  border-radius:2px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.bas-pd-trust-x5 {
  font-size:13px;
  font-weight:600;
  color:var(--bas-black);
  margin-bottom:2px;
}
.bas-pd-trust-x6 {
  font-size:12px;
  font-weight:300;
  color:var(--bas-gray-text);
}
.bas-pd-trust-x7 {
  display:flex;
  align-items:center;
  gap:14px;
  padding:28px 24px;
  border-right:1px solid var(--bas-gray-border);
}
.bas-pd-trust-x8 {
  display:flex;
  align-items:center;
  gap:14px;
  padding:28px 0 28px 24px;
}

/* =====================================================================
   RESPONSIVE RULES restored from [style*=] patterns
   (inline styles were extracted to classes, so attribute selectors no longer match)
   ===================================================================== */

@media(max-width:768px) {
  .bas-pd-customize-x4,
.bas-pd-intro-x2,
.bas-pd-trust-x2 {
    max-width:100%;
  }
}
@media(max-width:480px) {
  .bas-pd-trust-x2 {
    grid-template-columns:1fr !important;
  }
}
@media(max-width:768px) {
  .bas-pd-intro-x2 {
    grid-template-columns:1fr !important;
    gap:32px !important;
  }
}
@media(max-width:768px) {
  .bas-pd-customize-x4 {
    grid-template-columns:1fr 1fr !important;
  }
}
@media(max-width:768px) {
  .bas-pd-intro-x2 {
    grid-template-columns:1fr !important;
    gap:32px !important;
  }
}


/* =====================================================================
   QUOTE MODAL POPUP
   Opens when user clicks [data-bas-action="open-quote"]
   ===================================================================== */

.bas-pd-quote-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 10000;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 48px 16px;
  overflow-y: auto;
}

.bas-pd-quote-modal.open {
  display: flex;
  animation: bas-pd-modal-fade 0.2s ease-out;
}

@keyframes bas-pd-modal-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.bas-pd-quote-modal-inner {
  background: var(--bas-white);
  width: 100%;
  max-width: 640px;
  padding: 48px 40px 40px;
  position: relative;
  animation: bas-pd-modal-slide 0.25s ease-out;
  margin: auto;
}

@keyframes bas-pd-modal-slide {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.bas-pd-quote-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--bas-gray-text);
  transition: color 0.15s;
  padding: 0;
}

.bas-pd-quote-modal-close:hover {
  color: var(--bas-black);
}

.bas-pd-quote-modal-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.95;
  color: var(--bas-black);
  margin: 0 0 10px;
}

.bas-pd-quote-modal-sub {
  font-size: 14px;
  font-weight: 300;
  color: var(--bas-gray-text);
  line-height: 1.6;
  margin: 0 0 28px;
}

.bas-pd-quote-modal-form {
  /* Fluent Forms renders inside here */
}

/* Mobile: full-screen modal, smaller padding */
@media(max-width: 600px) {
  .bas-pd-quote-modal {
    padding: 0;
  }
  .bas-pd-quote-modal-inner {
    padding: 56px 24px 32px;
    min-height: 100vh;
    max-width: 100%;
  }
}


/* =====================================================================
   CONTENT BLOCK 7 — Product Features
   5 checkmark items + MOQ tag
   (MOQ tag .bas-pd-moq already defined above; just add wrapper styles)
   ===================================================================== */

.bas-pd-features {
  background: var(--bas-gray-bg);
  padding: 28px 32px;
  margin: 20px 0;
}

.bas-pd-features-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
}

.bas-pd-features-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 6px 0;
  font-size: 14px;
  font-weight: 400;
  color: var(--bas-black);
  line-height: 1.5;
}

.bas-pd-features-check {
  color: var(--bas-black);
  flex-shrink: 0;
  margin-top: 2px;
}

/* MOQ text inside the tag */
.bas-pd-moq-text {
  font-size: 14px;
  font-weight: 700;
  color: var(--bas-black);
  text-transform: none;
}

/* Mobile */
@media(max-width: 600px) {
  .bas-pd-features {
    padding: 20px 20px;
  }
  .bas-pd-features-item {
    font-size: 13px;
  }
}


/* =====================================================================
   BLOCKSY / WP LAYOUT OVERRIDE
   Content Blocks are wrapped in .entry-content.is-layout-constrained
   which applies max-width and margin:auto to all children.
   We override these to ensure our layout renders correctly.
   ===================================================================== */

.entry-content.is-layout-constrained .bas-pd-features,
.entry-content.is-layout-constrained .bas-pd-features-list,
.entry-content.is-layout-constrained .bas-pd-features-item,
.entry-content.is-layout-constrained .bas-pd-moq,
.entry-content.is-layout-constrained .bas-pd-btns,
.entry-content.is-layout-constrained .bas-pd-btn-primary,
.entry-content.is-layout-constrained .bas-pd-btn-secondary {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Also override for accordion and other Content Blocks */
.entry-content.is-layout-constrained .bas-pd-accordion,
.entry-content.is-layout-constrained .bas-pd-acc-item,
.entry-content.is-layout-constrained .bas-pd-acc-btn,
.entry-content.is-layout-constrained .bas-pd-acc-body,
.entry-content.is-layout-constrained .bas-pd-quote-modal-inner {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Force features list to display correctly */
.entry-content .bas-pd-features-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 24px !important;
}

.entry-content .bas-pd-features-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 6px 0 !important;
}

/* Force buttons to display as block */
.entry-content .bas-pd-btn-primary,
.entry-content .bas-pd-btn-secondary {
  display: block !important;
  text-align: center !important;
  text-decoration: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
}


/* =====================================================================
   NUCLEAR OVERRIDE — Content Blocks inside WC product summary
   
   Problem: Blocksy/WP Core's .entry-content .is-layout-constrained 
   and main.min.css apply default list-style, margin, padding to our
   elements. Even !important on simple class selectors gets overridden.
   
   Solution: Use attribute selectors + class for maximum specificity
   while keeping the code readable.
   ===================================================================== */

div[class*="bas-pd-features"] {
  background: var(--bas-gray-bg, #f5f5f5) !important;
  padding: 28px 32px !important;
  margin: 20px 0 !important;
  max-width: none !important;
}

ul[class*="bas-pd-features-list"] {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 24px !important;
  max-width: none !important;
}

li[class*="bas-pd-features-item"] {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 6px 0 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: var(--bas-black, #111) !important;
  line-height: 1.5 !important;
  list-style: none !important;
  margin: 0 !important;
  max-width: none !important;
}

li[class*="bas-pd-features-item"]::marker {
  content: none !important;
  display: none !important;
}

svg[class*="bas-pd-features-check"] {
  color: var(--bas-black, #111) !important;
  flex-shrink: 0 !important;
  margin-top: 2px !important;
  width: 20px !important;
  height: 20px !important;
}

div[class*="bas-pd-moq"] {
  display: inline-block !important;
  border: 2px solid var(--bas-black, #111) !important;
  padding: 10px 20px !important;
  margin: 0 0 20px !important;
  max-width: none !important;
}

span[class*="bas-pd-moq-text"] {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--bas-black, #111) !important;
}

div[class*="bas-pd-btns"] {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  max-width: none !important;
}

a[class*="bas-pd-btn-primary"] {
  display: block !important;
  width: 100% !important;
  background: var(--bas-black, #111) !important;
  color: var(--bas-white, #fff) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 18px 24px !important;
  text-align: center !important;
  text-decoration: none !important;
  border: none !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  font-family: var(--bas-font-body, 'Sora', sans-serif) !important;
}

a[class*="bas-pd-btn-primary"]:hover {
  background: #333 !important;
}

a[class*="bas-pd-btn-secondary"] {
  display: block !important;
  width: 100% !important;
  background: var(--bas-white, #fff) !important;
  color: var(--bas-black, #111) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 14px 24px !important;
  text-align: center !important;
  text-decoration: none !important;
  border: 2px solid var(--bas-black, #111) !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  font-family: var(--bas-font-body, 'Sora', sans-serif) !important;
}

a[class*="bas-pd-btn-secondary"]:hover {
  background: var(--bas-gray-bg, #f5f5f5) !important;
}