/*
   SONDOCCI ATHLETICS — DESIGN SYSTEM
   All custom styles go in this file only

   TABLE OF CONTENTS
   ─────────────────────────────────────
    1. Tokens
    2. Global
    3. Buttons
    4. Header & Navigation
    5. Dropdown
    6. Announcement Bar
    7. Logo
    8. Hero Section
    9. Trending Now
   10. Shop by Activity
   11. Shop Page — Price
   12. Single Product
   13. Cart Page
   14. Checkout Page
   15. Footer
   16. Mobile Breakpoints
*/

/* ══════════════════════════════════════
   1. TOKENS
══════════════════════════════════════ */
:root {
  --color-white:        #FFFFFF;
  --color-black:        #000000;
  --color-bg:           #FFFFFF;
  --color-bg-soft:      #F5F5F5;
  --color-text-primary: #111111;
  --color-text-muted:   #6B6B6B;
  --color-border:       #E8E8E8;
  --btn-primary-bg:     #111111;
  --btn-primary-text:   #FFFFFF;

  --font-sans:  'DM Sans', sans-serif;
  --font-serif: 'Cormorant Garamond', serif;

  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-lg:   18px;
  --text-xl:   24px;
  --text-2xl:  32px;
  --text-3xl:  48px;
  --text-hero: 64px;
}

/* ══════════════════════════════════════
   2. GLOBAL
══════════════════════════════════════ */
body,
#ajax-content-wrap,
.container-wrap {
  background: var(--color-bg) !important;
}

body {
  font-family: var(--font-sans) !important;
  font-size: var(--text-base);
  color: var(--color-text-primary);
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0.01em;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans) !important;
  font-weight: 500;
  letter-spacing: -0.01em;
}

*, *::before, *::after {
  border-radius: 0 !important;
}

/* ══════════════════════════════════════
   3. BUTTONS
══════════════════════════════════════ */
.nectar-button,
.woocommerce a.button,
.woocommerce button.button,
input[type="submit"] {
  font-family: var(--font-sans) !important;
  font-size: var(--text-xs) !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  background: var(--btn-primary-bg) !important;
  color: var(--btn-primary-text) !important;
  border: 1px solid var(--color-black) !important;
  padding: 14px 32px !important;
  box-shadow: none !important;
}

/* ══════════════════════════════════════
   4. HEADER & NAVIGATION
══════════════════════════════════════ */
#header-outer {
  background: var(--color-white) !important;
  border-bottom: 1px solid var(--color-border) !important;
  box-shadow: none !important;
}

/* Hide hamburger on desktop */
@media (min-width: 768px) {
  .slide-out-widget-area-toggle.mobile-icon {
    display: none !important;
  }
}

/* ── Nav links ── */
#header-outer nav ul.sf-menu > li > a {
  font-family: var(--font-sans) !important;
  font-size: var(--text-sm) !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--color-text-primary) !important;
  position: relative !important;
  transition: color 0.3s ease !important;
}

/* Hover underline */
#header-outer nav ul.sf-menu > li > a::after {
  content: '' !important;
  position: absolute !important;
  bottom: -2px !important;
  left: 0 !important;
  width: 0 !important;
  height: 1px !important;
  background: currentColor !important;
  transition: width 0.3s ease !important;
}

#header-outer nav ul.sf-menu > li > a:hover::after,
#header-outer nav ul.sf-menu > li.current-menu-item > a::after {
  width: 100% !important;
}

/* ── Right side icon buttons ── */
#header-outer nav ul.buttons > li > div > a {
  color: var(--color-text-primary) !important;
  transition: opacity 0.3s ease !important;
}

#header-outer nav ul.buttons > li > div > a:hover {
  opacity: 0.6 !important;
}

/* ── Cart ── */
#header-outer .cart-menu-wrap a {
  color: var(--color-text-primary) !important;
}

#header-outer .cart-menu-wrap .cart-wrap span {
  font-family: var(--font-sans) !important;
  font-size: 9px !important;
  font-weight: 500 !important;
}

/* ══════════════════════════════════════
   5. DROPDOWN
══════════════════════════════════════ */
#header-outer nav ul.sf-menu ul.sub-menu li:hover > a span.menu-title-text,
#header-outer nav ul.sf-menu ul.sub-menu li:hover > a {
  color: #FFFFFF !important;
}

#header-outer nav ul.sf-menu ul.sub-menu li:hover {
  background: #111111 !important;
}

/* ══════════════════════════════════════
   6. ANNOUNCEMENT BAR
══════════════════════════════════════ */
#header-secondary-outer {
  background: #BCAB70 !important;
  border-bottom: none !important;
  overflow: hidden !important;
  max-height: 80px !important;
  transition: max-height 0.4s ease, opacity 0.4s ease !important;
  opacity: 1 !important;
}

#header-secondary-outer.bar-hidden {
  max-height: 0 !important;
  opacity: 0 !important;
}

#header-secondary-outer .nectar-center-text {
  font-family: var(--font-sans) !important;
  font-size: var(--text-xs) !important;
  font-weight: 500 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: var(--color-white) !important;
}

/* ══════════════════════════════════════
   7. LOGO
══════════════════════════════════════ */
#header-outer #logo img {
  transform: scale(2) !important;
  transform-origin: center center !important;
}

/* ══════════════════════════════════════
   8. HERO SECTION
══════════════════════════════════════ */
.hero-heading {
  font-family: var(--font-serif) !important;
  font-size: var(--text-hero) !important;
  font-weight: 300 !important;
  color: #FFFFFF !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  margin-bottom: 20px !important;
}

.hero-sub {
  font-family: var(--font-sans) !important;
  font-size: var(--text-sm) !important;
  font-weight: 300 !important;
  color: rgba(255,255,255,0.8) !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  margin-bottom: 40px !important;
}

/* ── Hero Button ── */
.full-width-section .nectar-button,
.full-width-section a.nectar-button {
  background: transparent !important;
  color: #FFFFFF !important;
  border: 1px solid #FFFFFF !important;
  font-size: var(--text-xs) !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  padding: 14px 40px !important;
  box-shadow: none !important;
}

.full-width-section .nectar-button:hover,
.full-width-section a.nectar-button:hover {
  background: #FFFFFF !important;
  color: #111111 !important;
}

/* ══════════════════════════════════════
   9. TRENDING NOW
   Row ID confirmed from HTML: fws_6a0b1055ee8df
   Stable anchor: .full-width-content.vc_row-o-content-top:has(.img-with-aniamtion-wrap)
   NOTE: WPBakery misspells the class as "img-with-aniamtion-wrap" — intentional
══════════════════════════════════════ */

/* ── 1. Outer row: padding ── */
.full-width-content.vc_row-o-content-top:has(.img-with-aniamtion-wrap) {
  padding-top: 60px !important;
  padding-bottom: 60px !important;
  padding-left: 30px !important;
  padding-right: 30px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* ── 2. Inner col-wrap: full width, zero gutters ── */
.full-width-content.vc_row-o-content-top:has(.img-with-aniamtion-wrap) .row_col_wrap_12 {
  display: flex !important;
  flex-direction: column !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* ── 3. "Trending Now" heading column (vc_col-sm-12) ── */
.full-width-content.vc_row-o-content-top:has(.img-with-aniamtion-wrap) .vc_col-sm-12.wpb_column {
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
}

.full-width-content.vc_row-o-content-top:has(.img-with-aniamtion-wrap) .vc_col-sm-12.wpb_column .wpb_wrapper,
.full-width-content.vc_row-o-content-top:has(.img-with-aniamtion-wrap) .vc_col-sm-12.wpb_column .wpb_text_column,
.full-width-content.vc_row-o-content-top:has(.img-with-aniamtion-wrap) .vc_col-sm-12.wpb_column .wpb_text_column .wpb_wrapper {
  width: 100% !important;
  text-align: center !important;
}

.full-width-content.vc_row-o-content-top:has(.img-with-aniamtion-wrap) .vc_col-sm-12.wpb_column .wpb_text_column p,
.full-width-content.vc_row-o-content-top:has(.img-with-aniamtion-wrap) .vc_col-sm-12.wpb_column .wpb_text_column h2,
.full-width-content.vc_row-o-content-top:has(.img-with-aniamtion-wrap) .vc_col-sm-12.wpb_column .wpb_text_column h3 {
  font-family: var(--font-sans) !important;
  font-size: var(--text-lg) !important;
  font-weight: 400 !important;
  letter-spacing: 0.25em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  color: var(--color-text-muted) !important;
  margin: 0 0 32px 0 !important;
  padding: 0 !important;
  display: block !important;
  width: 100% !important;
}

/* ── 4. Image columns row: flex, full-bleed, gap via column padding ── */
.full-width-content.vc_row-o-content-top:has(.img-with-aniamtion-wrap) .row_col_wrap_12 {
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  margin-left: -5px !important;
  margin-right: -5px !important;
  width: calc(100% + 10px) !important;
  max-width: calc(100% + 10px) !important;
}

/* The heading span_12 must stay full-width on its own row */
.full-width-content.vc_row-o-content-top:has(.img-with-aniamtion-wrap) .vc_col-sm-12.wpb_column {
  flex: 0 0 100% !important;
  order: 0 !important;
}

/* ── 5. Each image column (vc_col-sm-3): 25%, small horizontal gap ── */
.full-width-content.vc_row-o-content-top:has(.img-with-aniamtion-wrap) .vc_col-sm-3.wpb_column {
  flex: 0 0 25% !important;
  width: 25% !important;
  max-width: 25% !important;
  min-width: 0 !important;
  padding: 5px !important;
  margin: 0 !important;
  float: none !important;
  box-sizing: border-box !important;
  order: 1 !important;
}

.full-width-content.vc_row-o-content-top:has(.img-with-aniamtion-wrap) .vc_col-sm-3.wpb_column .wpb_wrapper {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}

/* ── 6. Image wrapper: ratio, overflow clips the hover scale ── */
.full-width-content.vc_row-o-content-top:has(.img-with-aniamtion-wrap) .img-with-aniamtion-wrap {
  width: 95% !important;
  margin: 0 auto !important;
  aspect-ratio: 3 / 4 !important;
  overflow: hidden !important;
  display: block !important;
  position: relative !important;
}

.full-width-content.vc_row-o-content-top:has(.img-with-aniamtion-wrap) .img-with-aniamtion-wrap .inner,
.full-width-content.vc_row-o-content-top:has(.img-with-aniamtion-wrap) .img-with-aniamtion-wrap .hover-wrap,
.full-width-content.vc_row-o-content-top:has(.img-with-aniamtion-wrap) .img-with-aniamtion-wrap .hover-wrap-inner {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

/* ── 7. Image: full bleed cover with smooth hover scale ── */
.full-width-content.vc_row-o-content-top:has(.img-with-aniamtion-wrap) .img-with-animation {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
  transition: transform 0.5s ease !important;
  transform-origin: center center !important;
}

.full-width-content.vc_row-o-content-top:has(.img-with-aniamtion-wrap) .vc_col-sm-3.wpb_column:hover .img-with-animation {
  transform: scale(1.04) !important;
}

/* ── 8. Category label: centered under each image ── */
.full-width-content.vc_row-o-content-top:has(.img-with-aniamtion-wrap) .vc_col-sm-3.wpb_column .wpb_text_column,
.full-width-content.vc_row-o-content-top:has(.img-with-aniamtion-wrap) .vc_col-sm-3.wpb_column .wpb_text_column .wpb_wrapper {
  text-align: center !important;
  width: 100% !important;
}

.full-width-content.vc_row-o-content-top:has(.img-with-aniamtion-wrap) .vc_col-sm-3.wpb_column .wpb_text_column p {
  font-family: var(--font-sans) !important;
  font-size: var(--text-sm) !important;
  font-weight: 400 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  color: var(--color-text-primary) !important;
  margin: 14px 0 0 !important;
  padding: 0 !important;
  display: block !important;
  width: 100% !important;
}

/* ══════════════════════════════════════
   10. SHOP BY ACTIVITY
══════════════════════════════════════ */
.activity-strip {
  width: 100% !important;
  padding: 40px 0 !important;
  overflow: hidden !important;
}

.activity-track {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 0 !important;
}

.activity-tile {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-decoration: none !important;
  gap: 12px !important;
  padding: 0 8px !important;
}

.activity-img-wrap {
  width: 100% !important;
  aspect-ratio: 3 / 4 !important;
  overflow: hidden !important;
}

.activity-img-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.5s ease !important;
}

.activity-tile:hover .activity-img-wrap img {
  transform: scale(1.04) !important;
}

.activity-label {
  font-family: var(--font-sans) !important;
  font-size: var(--text-xs) !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--color-text-primary) !important;
  text-align: center !important;
}

.activity-heading {
  font-family: var(--font-sans) !important;
  font-weight: 400 !important;
  letter-spacing: 0.25em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  color: var(--color-text-muted) !important;
  margin-bottom: 32px !important;
  padding: 0 !important;
  font-size: var(--text-lg) !important;
}

/* ══════════════════════════════════════
   11. SHOP PAGE — PRICE
══════════════════════════════════════ */
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .price span,
.woocommerce ul.products li.product .price bdi,
.woocommerce ul.products li.product .price .woocommerce-Price-amount {
  font-family: var(--font-sans) !important;
  font-size: var(--text-sm) !important;
  font-weight: 300 !important;
  color: #9B9B9B !important;
  letter-spacing: 0.05em !important;
}

/* ══════════════════════════════════════
   12. SINGLE PRODUCT
══════════════════════════════════════ */

/* ── Product title ── */
.woocommerce.single-product .product_title {
  font-family: var(--font-sans) !important;
  font-size: var(--text-xl) !important;
  font-weight: 300 !important;
  letter-spacing: 0.01em !important;
  color: var(--color-text-primary) !important;
  line-height: 1.3 !important;
  margin-bottom: 8px !important;
}

/* ── Price ── */
.woocommerce.single-product p.price,
.woocommerce.single-product span.price,
.woocommerce.single-product .price .woocommerce-Price-amount {
  font-family: var(--font-sans) !important;
  font-size: var(--text-sm) !important;
  font-weight: 300 !important;
  color: #9B9B9B !important;
}

/* ── Short description ── */
.woocommerce.single-product .woocommerce-product-details__short-description p {
  font-family: var(--font-sans) !important;
  font-size: var(--text-sm) !important;
  font-weight: 300 !important;
  color: var(--color-text-muted) !important;
  line-height: 1.7 !important;
}

/* ── Quantity buttons — square, no shadow ── */
.woocommerce.single-product .quantity .minus,
.woocommerce.single-product .quantity .plus {
  border-radius: 0 !important;
  box-shadow: none !important;
  border: 1px solid var(--color-border) !important;
  background: transparent !important;
  font-family: var(--font-sans) !important;
}

.woocommerce.single-product .quantity input.qty {
  border-radius: 0 !important;
  box-shadow: none !important;
  border: 1px solid var(--color-border) !important;
  font-family: var(--font-sans) !important;
}

/* ── Add to cart button ── */
.woocommerce.single-product .single_add_to_cart_button {
  width: 100% !important;
  display: block !important;
  text-align: center !important;
  background: var(--color-black) !important;
  color: var(--color-white) !important;
  font-family: var(--font-sans) !important;
  font-size: var(--text-base) !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 18px 32px !important;
  border: none !important;
  box-shadow: none !important;
}

.woocommerce.single-product .single_add_to_cart_button:hover {
  background: #333333 !important;
}

/* ── Hide category ── */
.woocommerce.single-product .posted_in {
  display: none !important;
}

/* ── Breadcrumb ── */
.woocommerce-breadcrumb,
.woocommerce-breadcrumb a {
  font-family: var(--font-sans) !important;
  font-size: var(--text-xs) !important;
  color: var(--color-text-muted) !important;
}

/* ── Related products heading ── */
.woocommerce.single-product .related h2 {
  font-family: var(--font-sans) !important;
  font-size: var(--text-sm) !important;
  font-weight: 400 !important;
  letter-spacing: 0.25em !important;
  text-transform: uppercase !important;
  color: var(--color-text-muted) !important;
}

/* ══════════════════════════════════════
   13. CART PAGE
══════════════════════════════════════ */

/* ── Table headers ── */
.woocommerce-cart table.cart th {
  font-family: var(--font-sans) !important;
  font-size: var(--text-xs) !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--color-text-muted) !important;
  border-bottom: 1px solid var(--color-border) !important;
}

/* ── Product name ── */
.woocommerce-cart table.cart td.product-name a {
  font-family: var(--font-sans) !important;
  font-size: var(--text-sm) !important;
  font-weight: 400 !important;
  color: var(--color-text-primary) !important;
}

/* ── Price & total ── */
.woocommerce-cart table.cart td.product-price,
.woocommerce-cart table.cart td.product-subtotal {
  font-family: var(--font-sans) !important;
  font-size: var(--text-sm) !important;
  font-weight: 300 !important;
  color: #9B9B9B !important;
}

/* ── Quantity buttons — square, no shadow ── */
.woocommerce-cart .quantity .minus,
.woocommerce-cart .quantity .plus {
  border-radius: 0 !important;
  box-shadow: none !important;
  border: 1px solid var(--color-border) !important;
  background: transparent !important;
  font-family: var(--font-sans) !important;
  width: 32px !important;
  height: 32px !important;
}

.woocommerce-cart .quantity input.qty {
  border-radius: 0 !important;
  box-shadow: none !important;
  border: 1px solid var(--color-border) !important;
  font-family: var(--font-sans) !important;
  height: 32px !important;
}

/* ── Cart totals box ── */
.woocommerce-cart .cart_totals h2 {
  font-family: var(--font-sans) !important;
  font-size: var(--text-xs) !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--color-text-muted) !important;
}

.woocommerce-cart .cart_totals table th,
.woocommerce-cart .cart_totals table td {
  font-family: var(--font-sans) !important;
  font-size: var(--text-sm) !important;
  font-weight: 300 !important;
  color: var(--color-text-primary) !important;
}

/* ── Estimated total ── */
.woocommerce-cart .cart_totals .order-total th,
.woocommerce-cart .cart_totals .order-total td,
.woocommerce-cart .cart_totals .order-total .woocommerce-Price-amount {
  font-family: var(--font-sans) !important;
  font-size: var(--text-base) !important;
  font-weight: 500 !important;
  color: var(--color-text-primary) !important;
}

/* ── Proceed to checkout button ── */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
  font-family: var(--font-sans) !important;
  font-size: var(--text-sm) !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  background: var(--color-black) !important;
  color: var(--color-white) !important;
  border: none !important;
  box-shadow: none !important;
  padding: 18px 32px !important;
  display: block !important;
  text-align: center !important;
  width: 100% !important;
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
  background: #333333 !important;
  color: var(--color-white) !important;
}

/* ── Coupon section ── */
.woocommerce-cart .coupon input,
.woocommerce-cart .coupon button {
  font-family: var(--font-sans) !important;
  font-size: var(--text-xs) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* ── Coupon block ── */
.wc-block-components-totals-coupon .wc-block-components-panel__button {
  font-family: var(--font-sans) !important;
  font-size: var(--text-xs) !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--color-text-primary) !important;
}

.wc-block-components-totals-coupon__input input {
  font-family: var(--font-sans) !important;
  font-size: var(--text-sm) !important;
  border-radius: 0 !important;
  border: 1px solid var(--color-border) !important;
  box-shadow: none !important;
  color: var(--color-text-primary) !important;
}

.wc-block-components-totals-coupon__input label {
  font-family: var(--font-sans) !important;
  font-size: var(--text-xs) !important;
  color: var(--color-text-muted) !important;
}

.wc-block-components-totals-coupon__button {
  font-family: var(--font-sans) !important;
  font-size: var(--text-xs) !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  background: #000000 !important;
  color: #FFFFFF !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: none !important;
  padding: 12px 20px !important;
}

.wc-block-components-totals-coupon__button:hover {
  background: #333333 !important;
}

/* Force white text in all states — button starts aria-disabled/disabled while input
   is empty; WooCommerce Blocks + wp-element-button disabled styles grey out the text */
.wc-block-components-totals-coupon__button,
.wc-block-components-totals-coupon__button.wp-element-button,
.wc-block-components-totals-coupon__button:disabled,
.wc-block-components-totals-coupon__button[aria-disabled="true"],
.wc-block-components-totals-coupon__button.wp-element-button:disabled,
.wc-block-components-totals-coupon__button.wp-element-button[aria-disabled="true"] {
  color: #FFFFFF !important;
  opacity: 1 !important;
}

.wc-block-components-totals-coupon__button .wc-block-components-button__text,
.wc-block-components-totals-coupon__button:disabled .wc-block-components-button__text,
.wc-block-components-totals-coupon__button[aria-disabled="true"] .wc-block-components-button__text,
.wc-block-components-totals-coupon__button span,
.wc-block-components-totals-coupon__button div {
  color: #FFFFFF !important;
}

/* ══════════════════════════════════════
   14. CHECKOUT PAGE
══════════════════════════════════════ */

/* ── Global block font override ── */
.wp-block-woocommerce-checkout,
.wp-block-woocommerce-checkout * {
  font-family: var(--font-sans) !important;
}

/* ── Section headings ── */
.wc-block-components-title,
.wp-block-woocommerce-checkout h2,
.wp-block-woocommerce-checkout h3 {
  font-size: var(--text-sm) !important;
  font-weight: 500 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--color-text-muted) !important;
}

/* ── Form inputs ── */
.wc-block-components-text-input input,
.wc-block-components-select select,
.wc-block-components-country-input input,
.wc-block-components-address-form input,
.wc-block-components-address-form select {
  border: 1px solid var(--color-border) !important;
  box-shadow: none !important;
  font-family: var(--font-sans) !important;
  font-size: var(--text-sm) !important;
  color: var(--color-text-primary) !important;
}

/* ── Input labels ── */
.wc-block-components-text-input label,
.wc-block-components-select label {
  font-family: var(--font-sans) !important;
  font-size: var(--text-xs) !important;
  color: var(--color-text-muted) !important;
}

/* ── Checkbox label ── */
.wc-block-components-checkbox__label {
  font-family: var(--font-sans) !important;
  font-size: var(--text-sm) !important;
  color: var(--color-text-primary) !important;
}

/* ── Shipping option ── */
.wc-block-components-radio-control__label,
.wc-block-components-radio-control__description {
  font-family: var(--font-sans) !important;
  font-size: var(--text-sm) !important;
  color: var(--color-text-primary) !important;
}

.wc-block-components-radio-control-accordion-option {
  border: 1px solid var(--color-border) !important;
  box-shadow: none !important;
}

/* ── Order summary ── */
.wc-block-components-order-summary-item__description,
.wc-block-components-order-summary-item__individual-prices {
  font-size: var(--text-xs) !important;
  color: var(--color-text-muted) !important;
}

.wc-block-components-totals-item__label,
.wc-block-components-totals-item__value {
  font-size: var(--text-sm) !important;
  font-weight: 300 !important;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-size: var(--text-base) !important;
  font-weight: 500 !important;
  color: var(--color-text-primary) !important;
}

/* ── Place order button ── */
.wc-block-components-checkout-place-order-button {
  font-family: var(--font-sans) !important;
  font-size: var(--text-sm) !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  background: #000000 !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
  border: none !important;
}

.wc-block-components-checkout-place-order-button:hover {
  background: #333333 !important;
}

/* ── Add coupon ── */
.wc-block-components-totals-coupon .wc-block-components-panel__button {
  font-family: var(--font-sans) !important;
  font-size: var(--text-xs) !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

/* ── Terms text ── */
.wc-block-checkout__terms {
  font-size: var(--text-xs) !important;
  color: var(--color-text-muted) !important;
}

/* ── Return to cart link ── */
.wc-block-components-checkout-return-to-cart-button {
  font-family: var(--font-sans) !important;
  font-size: var(--text-xs) !important;
  letter-spacing: 0.08em !important;
  color: var(--color-text-muted) !important;
}

/* ══════════════════════════════════════
   15. FOOTER
══════════════════════════════════════ */
#footer-outer {
  background: #111111 !important;
}

#footer-outer,
#footer-outer p,
#footer-outer h4,
#footer-outer a,
#footer-outer li {
  color: var(--color-white) !important;
  font-family: var(--font-sans) !important;
}

/* ── Widget area ── */
#footer-widgets {
  padding: 80px 0 60px !important;
}

/* ── Brand statement — Footer 1 ── */
#footer-widgets .col.span_4:first-child .widget h4 {
  font-family: var(--font-serif) !important;
  font-size: var(--text-xl) !important;
  font-weight: 300 !important;
  letter-spacing: 0.02em !important;
  line-height: 1.4 !important;
  color: var(--color-white) !important;
  font-style: italic !important;
  margin: 0 !important;
}

/* ── Nav links — Footer 2 ── */
#footer-widgets .col.span_4:nth-child(2) .widget ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

#footer-widgets .col.span_4:nth-child(2) .widget ul li {
  margin-bottom: 12px !important;
}

#footer-widgets .col.span_4:nth-child(2) .widget ul li a {
  font-family: var(--font-sans) !important;
  font-size: var(--text-xs) !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.6) !important;
  text-decoration: none !important;
  transition: color 0.3s ease !important;
}

#footer-widgets .col.span_4:nth-child(2) .widget ul li a:hover {
  color: var(--color-white) !important;
}

/* ── Newsletter — Footer 3 ── */
.footer-newsletter {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.footer-newsletter-heading {
  font-family: var(--font-sans) !important;
  font-size: var(--text-xs) !important;
  font-weight: 500 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--color-white) !important;
  margin: 0 !important;
}

.footer-newsletter-sub {
  font-family: var(--font-sans) !important;
  font-size: var(--text-xs) !important;
  font-weight: 300 !important;
  color: rgba(255,255,255,0.5) !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

.footer-newsletter-form {
  display: flex !important;
  gap: 0 !important;
  margin-top: 8px !important;
}

.footer-newsletter-input {
  flex: 1 !important;
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  border-right: none !important;
  padding: 12px 16px !important;
  font-family: var(--font-sans) !important;
  font-size: var(--text-xs) !important;
  color: var(--color-white) !important;
  outline: none !important;
  letter-spacing: 0.05em !important;
}

.footer-newsletter-input::placeholder {
  color: rgba(255,255,255,0.35) !important;
}

.footer-newsletter-input:focus {
  border-color: rgba(255,255,255,0.5) !important;
}

.footer-newsletter-btn {
  background: var(--color-white) !important;
  color: var(--color-black) !important;
  border: 1px solid var(--color-white) !important;
  padding: 12px 20px !important;
  font-family: var(--font-sans) !important;
  font-size: var(--text-xs) !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: background 0.3s ease, color 0.3s ease !important;
}

.footer-newsletter-btn:hover {
  background: transparent !important;
  color: var(--color-white) !important;
}

/* ── Copyright bar ── */
#copyright {
  border-top: 1px solid rgba(255,255,255,0.1) !important;
  padding: 24px 0 !important;
}

#copyright p {
  font-family: var(--font-sans) !important;
  font-size: var(--text-xs) !important;
  font-weight: 400 !important;
  letter-spacing: 0.08em !important;
  color: rgba(255,255,255,0.4) !important;
  margin: 0 !important;
}

/* ── Social icons ── */
#copyright ul.social {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 24px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

#copyright ul.social li a {
  color: rgba(255,255,255,0.4) !important;
  font-size: 16px !important;
  transition: color 0.3s ease !important;
  text-decoration: none !important;
}

#copyright ul.social li a:hover {
  color: var(--color-white) !important;
}

/* ══════════════════════════════════════
   16. MOBILE BREAKPOINTS
══════════════════════════════════════ */
@media (max-width: 767px) {

  /* ── Shop by Activity ── */
  .activity-strip {
    padding: 20px 0 !important;
  }

  .activity-heading {
    display: none !important;
  }

  .activity-track {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 12px !important;
    padding: 0 16px !important;
    scrollbar-width: none !important;
  }

  .activity-track::-webkit-scrollbar {
    display: none !important;
  }

  .activity-tile {
    flex: 0 0 140px !important;
    scroll-snap-align: start !important;
    padding: 0 !important;
  }

  /* ── Row reorder: Shop by Activity above hero only ──
     We cannot use fws_ IDs — they change on every save.
     Instead: make .row a flex column, then use :has() to target only
     the row that contains .activity-strip and pull it to order:0.
     Hero (.full-width-section) goes to order:1.
     Everything else stays at the default order:2. */
  .container.main-content > .row {
    display: flex !important;
    flex-direction: column !important;
  }

  /* Hero — second */
  .container.main-content > .row > .full-width-section {
    order: 1 !important;
  }

  /* All non-hero rows — third by default (natural order preserved among them) */
  .container.main-content > .row > .full-width-content {
    order: 2 !important;
  }

  /* Shop by Activity row specifically — first, overrides the rule above */
  .container.main-content > .row > .wpb_row:has(.activity-strip) {
    order: 0 !important;
  }

  /* ── Trending Now — mobile 2×2 grid ── */
  .full-width-content.vc_row-o-content-top:has(.img-with-aniamtion-wrap) {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  .full-width-content.vc_row-o-content-top:has(.img-with-aniamtion-wrap) .vc_col-sm-3.wpb_column {
    flex: 0 0 50% !important;
    width: 50% !important;
    max-width: 50% !important;
    padding: 5px !important;
  }

  /* ── Footer ── */
  #footer-widgets {
    padding: 60px 0 40px !important;
  }

  #footer-widgets .col.span_4 {
    width: 100% !important;
    margin-bottom: 40px !important;
  }

  #copyright ul.social {
    justify-content: flex-start !important;
    margin-top: 16px !important;
  }

  .footer-newsletter-form {
    flex-direction: column !important;
  }

  .footer-newsletter-input {
    border-right: 1px solid rgba(255,255,255,0.2) !important;
    border-bottom: none !important;
  }

  .footer-newsletter-btn {
    width: 100% !important;
  }

  /* ── Hero text clip fix ── */
  .hero-heading {
    font-size: var(--text-3xl) !important;
    overflow: visible !important;
  }

  /* ── Related products — 2 column mobile ── */
  .woocommerce.single-product .related ul.products.columns-4 {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
  }

  .woocommerce.single-product .related ul.products.columns-4 li.product {
    flex: 0 0 calc(50% - 8px) !important;
    width: calc(50% - 8px) !important;
    max-width: calc(50% - 8px) !important;
    float: none !important;
    clear: none !important;
    margin: 0 8px 16px 0 !important;
  }

  .woocommerce.single-product .related ul.products.columns-4 li.product:nth-child(2n) {
    margin-right: 0 !important;
  }

  .woocommerce.single-product .related ul.products.columns-4 li.product.first {
    clear: none !important;
    float: none !important;
  }

  /* ── Hide Uncategorized breadcrumb ── */
  .woocommerce-breadcrumb {
    display: none !important;
  }

  /* ── Cart product name overflow fix ── */
  .wc-block-cart-item__wrap {
    flex-wrap: wrap !important;
  }

  .wc-block-cart-item__product {
    flex: 1 1 100% !important;
  }

  /* ── Cart image size ── */
  .wc-block-cart-item__image {
    width: 80px !important;
    min-width: 80px !important;
  }
}