/*
 Theme Name:   Frontline Workwear Child
 Theme URI:    https://frontlineworkwearusa.com
 Description:  Hello Elementor child theme for Frontline Workwear USA. Industrial, mobile-first design system (Oswald + Open Sans) with WooCommerce styling. Built by Loudbaby.
 Author:       Loudbaby
 Author URI:   https://loudbaby.com
 Template:     hello-elementor
 Version:      2.0.10
 Text Domain:  fww-child
*/

/* =============================================================
   FRONTLINE WORKWEAR USA - CHILD THEME v2.0
   Design: Industrial / Masculine / Mobile-First
   Fonts:  Oswald (headings) + Open Sans (body)
   Fonts are loaded via wp_enqueue_style in functions.php
   (no @import here - it blocks render and double-loads).
   ============================================================= */

/* =============================================================
   CSS CUSTOM PROPERTIES
   ============================================================= */
:root {
  --fww-navy:          #152233;
  --fww-navy-mid:      #1B2D42;
  --fww-navy-light:    #243650;
  --fww-navy-card:     #1E3148;
  --fww-navy-hover:    #253D56;
  --fww-red:           #C0392B;
  --fww-red-hover:     #A93226;
  --fww-red-light:     rgba(192, 57, 43, 0.15);
  --fww-blue:          #2563A8;
  --fww-blue-light:    rgba(37, 99, 168, 0.20);
  --fww-blue-nav:      #5B9BD5;
  --fww-gold:          #C8922A;
  --fww-gold-light:    rgba(200, 146, 42, 0.15);
  --fww-text:          #FFFFFF;
  --fww-text-muted:    rgba(255, 255, 255, 0.65);
  --fww-text-faint:    rgba(255, 255, 255, 0.35);
  --fww-border:        rgba(255, 255, 255, 0.08);
  --fww-border-med:    rgba(255, 255, 255, 0.15);
  --fww-border-str:    rgba(255, 255, 255, 0.28);
  --fww-font-display:  'Oswald', sans-serif;
  --fww-font-body:     'Open Sans', sans-serif;
  --fww-radius:        8px;
  --fww-radius-lg:     14px;
  --fww-tap:           52px;
  --fww-shadow:        0 4px 24px rgba(0, 0, 0, 0.3);
  --fww-shadow-lg:     0 8px 48px rgba(0, 0, 0, 0.5);
  --fww-max-w:         1200px;
}

/* =============================================================
   GLOBAL BASE
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--fww-font-body);
  background-color: var(--fww-navy);
  color: var(--fww-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Interior / product pages use white bg */
body.fww-page-product,
body.fww-interior {
  background-color: #ffffff;
  color: #111111;
}

/* =============================================================
   TYPOGRAPHY
   ============================================================= */
h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
  font-family: var(--fww-font-display) !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 1.1;
  color: var(--fww-text);
  font-weight: 700;
}

body.fww-interior h1,
body.fww-interior h2,
body.fww-interior h3,
body.fww-interior h4 { color: #111; }

body.fww-interior p {
  color: #5b6b7d;
}
body.fww-interior a {
  color: var(--fww-navy);
}
body.fww-interior a:hover {
  color: var(--fww-red);
}

h1 { font-size: clamp(36px, 9vw, 72px); }
h2 { font-size: clamp(26px, 5vw, 44px); }
h3 { font-size: clamp(20px, 3.5vw, 28px); }
h4 { font-size: clamp(17px, 2.5vw, 22px); }

p {
  font-family: var(--fww-font-body);
  color: var(--fww-text-muted);
  font-size: 15px;
  line-height: 1.65;
}

a { color: var(--fww-text); text-decoration: none; }
a:hover { color: var(--fww-red); }

/* =============================================================
   HEADER / NAVIGATION
   Nav height: 195px default, 140px when .scrolled (via JS)
   Logo height: 175px default, 125px when .scrolled
   ============================================================= */
.site-header,
.elementor-location-header {
  background: var(--fww-navy-mid) !important;
  border-bottom: 3px solid var(--fww-red) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 200 !important;
  transition: background 0.25s ease !important;
}

/* Nav inner - tall header */
.site-header .elementor-container,
.elementor-location-header .elementor-container {
  min-height: 195px !important;
  transition: min-height 0.25s ease !important;
}

/* Scrolled state */
.site-header.scrolled .elementor-container,
.elementor-location-header.scrolled .elementor-container {
  min-height: 140px !important;
}

/* Logo */
.site-header .elementor-widget-image img,
.elementor-location-header .elementor-widget-image img,
.site-logo img {
  height: 175px !important;
  width: auto !important;
  mix-blend-mode: lighten !important;
  opacity: 1 !important;
  visibility: visible !important;
  transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  will-change: height !important;
}

.site-header.scrolled .elementor-widget-image img,
.elementor-location-header.scrolled .elementor-widget-image img,
.site-header.scrolled .site-logo img {
  height: 125px !important;
}

/* Nav links (legacy Nav Menu) */
.elementor-nav-menu a.elementor-item,
.e-n-menu-item-anchor {
  font-family: var(--fww-font-display) !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: var(--fww-text-muted) !important;
  height: 195px !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 18px !important;
  transition: color 0.15s, height 0.25s ease !important;
  border-bottom: 3px solid transparent !important;
  margin-bottom: -3px !important;
}

/* Elementor Pro Mega Menu top-level items */
.fww-mega-nav .e-n-menu-title,
.fww-mega-nav .e-n-menu-title-container {
  font-family: var(--fww-font-display) !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  color: var(--fww-text-muted) !important;
  height: 195px !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 12px !important;
  transition: color 0.15s, height 0.25s ease !important;
  border-bottom: 3px solid transparent !important;
  margin-bottom: -3px !important;
  background: transparent !important;
  box-shadow: none !important;
  white-space: nowrap !important;
  width: auto !important;
  max-width: none !important;
}
.fww-mega-nav .e-n-menu-title-text {
  font: inherit !important;
  color: inherit !important;
  letter-spacing: inherit !important;
  text-transform: inherit !important;
  white-space: nowrap !important;
}
.site-header.scrolled .elementor-nav-menu a.elementor-item,
.elementor-location-header.scrolled .elementor-nav-menu a.elementor-item,
.site-header.scrolled .fww-mega-nav .e-n-menu-title,
.elementor-location-header.scrolled .fww-mega-nav .e-n-menu-title,
.site-header.scrolled .fww-mega-nav .e-n-menu-title-container,
.elementor-location-header.scrolled .fww-mega-nav .e-n-menu-title-container {
  height: 140px !important;
}
.fww-mega-nav .e-n-menu-title:hover,
.fww-mega-nav .e-n-menu-item[aria-expanded="true"] .e-n-menu-title,
.fww-mega-nav .e-n-menu-item.e-current .e-n-menu-title {
  color: var(--fww-text) !important;
}
.fww-mega-nav .e-n-menu-dropdown-icon {
  color: var(--fww-red) !important;
  margin-left: 6px !important;
}
.fww-mega-nav .e-n-menu-dropdown-icon svg {
  width: 10px !important;
  height: 10px !important;
  fill: currentColor !important;
}
.fww-mega-nav .e-n-menu-heading {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  width: 100% !important;
}
.fww-mega-nav .e-n-menu-item {
  display: flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  width: auto !important;
}
@media (min-width: 1025px) {
  /* Give the mega-nav column more room so Home..About stay on one line. */
  .fww-header-sec > .elementor-container > .elementor-column:nth-child(1),
  .elementor-location-header > .elementor-container > .elementor-column:nth-child(1) {
    width: 22% !important;
  }
  .fww-header-sec > .elementor-container > .elementor-column:nth-child(2),
  .elementor-location-header > .elementor-container > .elementor-column:nth-child(2) {
    width: 56% !important;
  }
  .fww-header-sec > .elementor-container > .elementor-column:nth-child(3),
  .elementor-location-header > .elementor-container > .elementor-column:nth-child(3) {
    width: 22% !important;
  }
}

/* On scroll, hard-swap shield logo <-> text wordmark. No opacity crossfade:
   overlapping logos (plus mix-blend-mode: lighten) were ghosting and fluttering
   whenever .scrolled toggled near the threshold. */
.site-header .elementor-widget-image,
.elementor-location-header .elementor-widget-image {
  position: relative !important;
}
.site-header .elementor-widget-image::after,
.elementor-location-header .elementor-widget-image::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  z-index: 1;
  width: 300px;
  height: 70px;
  transform: translateY(-50%);
  background: url("../../uploads/2026/06/frontline_workwear_usa_text_only_alpha.png") left center / auto 70px no-repeat;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: none;
}
.site-header.scrolled .elementor-widget-image::after,
.elementor-location-header.scrolled .elementor-widget-image::after {
  opacity: 1;
  visibility: visible;
}
body .site-header.scrolled .elementor-widget-image img,
body .elementor-location-header.scrolled .elementor-widget-image img {
  opacity: 0 !important;
  visibility: hidden !important;
  transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Remove header column padding when scrolled so the bar tightens to ~140px */
.site-header.scrolled .elementor-widget-wrap.elementor-element-populated,
.elementor-location-header.scrolled .elementor-widget-wrap.elementor-element-populated {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.elementor-nav-menu a.elementor-item:hover,
.elementor-nav-menu a.elementor-item.elementor-item-active {
  color: var(--fww-text) !important;
  border-bottom-color: transparent !important;
}

/* Dropdown */
.elementor-nav-menu .sub-menu {
  background: var(--fww-navy-card) !important;
  border: 1px solid var(--fww-border-med) !important;
  border-radius: var(--fww-radius) !important;
  box-shadow: var(--fww-shadow-lg) !important;
}
.elementor-nav-menu .sub-menu a {
  font-family: var(--fww-font-display) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: var(--fww-text-muted) !important;
  min-height: 48px !important;
  padding: 0 18px !important;
  border-bottom: 1px solid var(--fww-border) !important;
  height: auto !important;
}
.elementor-nav-menu .sub-menu a:hover {
  background: rgba(255,255,255,0.05) !important;
  color: #fff !important;
}

/* Desktop: anchor the dropdown just beneath the nav label instead of at the
   bottom of the tall (195px) header item. The label is vertically centered,
   so 50% always lands on the text in both normal and scrolled states. A red
   top edge + squared top corners visually tie the panel to the header. */
@media (min-width: 1025px) {
  /* Selector specificity must exceed Elementor's own
     ".elementor-nav-menu--layout-horizontal .elementor-nav-menu > li ul"
     (which forces top:100% !important), so we qualify it further. */
  .elementor-nav-menu--layout-horizontal .elementor-nav-menu > li.menu-item-has-children > ul.sub-menu {
    top: calc(50% + 24px) !important;
    margin-top: 0 !important;
    border-top: 3px solid var(--fww-red) !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
  }

  /* Elementor Pro Mega Menu panel */
  .fww-mega-nav .e-n-menu-content {
    top: calc(50% + 24px) !important;
    margin-top: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    width: auto !important;
    min-width: 720px !important;
    max-width: min(920px, 92vw) !important;
  }
  .fww-mega-nav .e-n-menu-content > .e-con,
  .fww-mega-nav .fww-mega-dropdown {
    background: var(--fww-navy-card) !important;
    border: 1px solid var(--fww-border-med) !important;
    border-top: 3px solid var(--fww-red) !important;
    border-radius: 0 0 var(--fww-radius) var(--fww-radius) !important;
    box-shadow: var(--fww-shadow-lg) !important;
    padding: 28px 32px !important;
    width: auto !important;
    max-width: 100% !important;
  }
}

/* Mega panel: Features | Industry | Brands (single row) */
.fww-mega-panel {
  display: grid !important;
  grid-template-columns: minmax(160px, 1fr) minmax(180px, 1.1fr) minmax(260px, 1.6fr) !important;
  gap: 28px 36px !important;
  align-items: start !important;
  width: 100% !important;
}
.fww-mega-col {
  position: relative !important;
  min-width: 0 !important;
}
.fww-mega-col--industry,
.fww-mega-col--brands {
  padding-left: 28px !important;
  border-left: 1px solid rgba(255, 255, 255, 0.12) !important;
}
.fww-mega-heading {
  font-family: var(--fww-font-display) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: #fff !important;
  margin: 0 0 14px !important;
  line-height: 1.2 !important;
}
.fww-mega-link {
  display: block !important;
  font-family: var(--fww-font-display) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.4px !important;
  text-transform: none !important;
  color: var(--fww-text-muted) !important;
  text-decoration: none !important;
  padding: 5px 0 !important;
  line-height: 1.35 !important;
  transition: color 0.15s ease !important;
}
.fww-mega-link:hover {
  color: #fff !important;
}
.fww-mega-brands {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0 24px !important;
}
.fww-mega-brands-col {
  min-width: 0 !important;
}
.fww-mega-panel-widget .elementor-widget-container,
.fww-mega-panel-widget .elementor-widget-container > div {
  margin: 0 !important;
  padding: 0 !important;
}

/* Mobile hamburger */
.elementor-menu-toggle {
  min-height: var(--fww-tap) !important;
  min-width: var(--fww-tap) !important;
  color: var(--fww-text) !important;
  border: 1px solid var(--fww-border-med) !important;
  border-radius: var(--fww-radius) !important;
}

/* Mobile dropdown panel */
.elementor-nav-menu--dropdown.elementor-nav-menu__container {
  background: var(--fww-navy-card) !important;
  border-top: 1px solid var(--fww-border) !important;
}
.elementor-nav-menu--dropdown a.elementor-item {
  border-bottom: 1px solid var(--fww-border) !important;
  font-size: 20px !important;
  min-height: 60px !important;
  height: auto !important;
  display: flex !important;
  align-items: center !important;
}

/* =============================================================
   BUTTONS
   ============================================================= */
.elementor-button,
.elementor-button-wrapper .elementor-button,
button[type="submit"],
.woocommerce a.button,
.woocommerce button.button {
  font-family: var(--fww-font-display) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  min-height: var(--fww-tap) !important;
  border-radius: var(--fww-radius) !important;
  cursor: pointer !important;
  transition: background 0.15s, transform 0.1s !important;
  border: none !important;
  /* Center the label vertically + horizontally inside the min-height box.
     Without this, Elementor pins the text to the top of the taller button. */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}
.elementor-button:active { transform: translateY(1px) !important; }

/* Primary - red */
.elementor-button.fww-btn-primary,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce input.button.alt {
  background: var(--fww-red) !important;
  color: #fff !important;
  padding: 0 36px !important;
}
.elementor-button.fww-btn-primary:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
  background: var(--fww-red-hover) !important;
  transform: translateY(-1px) !important;
}

/* Secondary - solid navy card (matches trusted-brands buttons), bright white text */
.elementor-button.fww-btn-secondary {
  background: var(--fww-navy-card) !important;
  color: #ffffff !important;
  border: 1px solid var(--fww-border-med) !important;
  padding: 0 32px !important;
}
.elementor-button.fww-btn-secondary:hover {
  background: var(--fww-navy-light) !important;
  border-color: var(--fww-border-str) !important;
}

/* White - for red backgrounds */
.elementor-button.fww-btn-white {
  background: #ffffff !important;
  color: var(--fww-red) !important;
  padding: 0 44px !important;
}
.elementor-button.fww-btn-white:hover {
  background: #f0f0f0 !important;
  transform: translateY(-1px) !important;
}

/* -------------------------------------------------------------
   Elementor widget-wrapper bridges.
   Elementor adds a widget's "CSS Classes" (Advanced tab) to the
   widget WRAPPER, not the inner <a>. These selectors let a content
   manager simply type fww-btn-primary / fww-btn-secondary /
   fww-btn-white into CSS Classes and have it style the button.
   ------------------------------------------------------------- */
.fww-btn-primary .elementor-button {
  background: var(--fww-red) !important;
  color: #fff !important;
  padding: 0 36px !important;
}
.fww-btn-primary .elementor-button:hover {
  background: var(--fww-red-hover) !important;
  transform: translateY(-1px) !important;
}
.fww-btn-secondary .elementor-button {
  background: var(--fww-navy-card) !important;
  color: #ffffff !important;
  border: 1px solid var(--fww-border-med) !important;
  padding: 0 32px !important;
}
.fww-btn-secondary .elementor-button:hover {
  background: var(--fww-navy-light) !important;
  border-color: var(--fww-border-str) !important;
}
.fww-btn-white .elementor-button {
  background: #ffffff !important;
  color: var(--fww-red) !important;
  padding: 0 44px !important;
}
.fww-btn-white .elementor-button:hover {
  background: #f0f0f0 !important;
  transform: translateY(-1px) !important;
}

/* =============================================================
   SECTION BACKGROUNDS
   ============================================================= */
.fww-section-dark  { background-color: var(--fww-navy) !important; }
.fww-section-mid   { background-color: var(--fww-navy-mid) !important; }
.fww-section-card  { background-color: var(--fww-navy-card) !important; }
.fww-section-red   { background-color: var(--fww-red) !important; }
.fww-section-white { background-color: #ffffff !important; }

/* Diagonal texture overlay */
.fww-texture::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -45deg, transparent, transparent 30px,
    rgba(255,255,255,0.012) 30px,
    rgba(255,255,255,0.012) 32px
  );
  pointer-events: none;
  z-index: 0;
}
.fww-red-top    { border-top: 4px solid var(--fww-red) !important; }
.fww-red-bottom { border-bottom: 4px solid var(--fww-red) !important; }

/* =============================================================
   HERO SECTION
   Full-width background image with left-to-right gradient overlay
   Set background image via Elementor section background settings
   ============================================================= */
.fww-hero {
  position: relative;
  overflow: hidden;
  min-height: 480px;
  display: flex;
  align-items: center;
}
/* The hero image is driven by the Elementor section background (Home page,
   section ca6d094: cover, center). Do NOT hardcode a background-image on a
   ::before here, it would paint over and hide the Elementor image.
   This ::before re-applies the old brightness/saturation treatment to ONLY the
   photo (backdrop-filter), with no hardcoded URL, so it survives image swaps. */
.fww-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  backdrop-filter: brightness(1.2) saturate(1.05);
  -webkit-backdrop-filter: brightness(1.2) saturate(1.05);
  pointer-events: none;
}

/* "Get these boots!" hero link, sat over the boot on the right, styled as a
   text link with a left-pointing arrow rather than a solid button.
   The text column is only 64% wide; make it (and its wrap) static so the link
   anchors to the full-width container and can reach the right side / the boot. */
.fww-hero-col,
.fww-hero-col .elementor-widget-wrap {
  position: static !important;
}
.fww-hero-product-link {
  position: absolute !important;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: auto !important;
  margin: 0 !important;
}
.fww-hero-product-link .elementor-button,
.fww-hero-product-link .elementor-button:visited {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  color: #fff !important;
  font-family: var(--fww-font-display) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.65);
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
}
.fww-hero-product-link .elementor-button-text::before {
  content: "\2190 ";
  white-space: pre;
}
.fww-hero-product-link .elementor-button:hover,
.fww-hero-product-link .elementor-button:focus {
  background: transparent !important;
  color: var(--fww-red) !important;
}
.fww-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(15, 25, 40, 0.55) 0%,
    rgba(15, 25, 40, 0.38) 55%,
    rgba(15, 25, 40, 0.12) 100%
  );
  pointer-events: none;
  z-index: 0;
}
.fww-hero .elementor-container { position: relative; z-index: 1; }
.fww-hero-border {
  height: 4px;
  background: linear-gradient(90deg, var(--fww-red) 0%, var(--fww-blue) 60%, transparent 100%);
}

.fww-hero-headline {
  font-family: var(--fww-font-display);
  font-size: clamp(44px, 9vw, 82px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 1.0;
  color: #fff;
  margin-bottom: 8px;
}
.fww-hero-headline .accent { color: var(--fww-red); }
.fww-hero-headline .elementor-heading-title { color: #FFFFFF !important; }

.fww-hero-tagline {
  font-family: var(--fww-font-display);
  font-size: clamp(15px, 2.5vw, 20px);
  font-weight: 400;
  color: var(--fww-text-muted);
  letter-spacing: 4px;
  text-transform: uppercase;
  margin-bottom: 36px;
}

.fww-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--fww-red-light);
  border: 1px solid rgba(192, 57, 43, 0.35);
  border-radius: 999px;
  padding: 6px 18px;
  font-family: var(--fww-font-display);
  font-size: 12px;
  font-weight: 600;
  color: #FF8C7A;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 20px;
}

/* =============================================================
   SECTION EYEBROW LABELS
   White muted - not red
   ============================================================= */
.fww-eyebrow-label,
.section-eyebrow {
  font-family: var(--fww-font-display) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: var(--fww-text-muted) !important;
  margin-bottom: 10px !important;
}

/* =============================================================
   BRAND STRIP (logo row)
   ============================================================= */
.fww-brand-strip {
  background: var(--fww-navy-card);
  border-top: 1px solid var(--fww-border);
  border-bottom: 1px solid var(--fww-border);
  padding: 20px 16px;
}
/*
 * Desktop: one centered flex row with a fixed gap (not stretched 1fr columns).
 * Logos share the same 400x167 PNG canvas; negative margins collapse transparent
 * padding so visual marks space evenly (DC/Volcom sit inward, Frye between neighbors).
 * Mobile/tablet: wrapped centered cluster (previous preferred layout), not 2 tall columns.
 */
.fww-brand-logos {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 18px 26px !important;
  width: 100% !important;
  max-width: 920px !important;
  margin: 0 auto !important;
  padding: 10px 20px 6px !important;
  text-align: center !important;
  box-sizing: border-box !important;
}
.fww-brand-logo {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: auto !important;
  height: 42px !important;
  padding: 0 !important;
  margin: 0 !important;
  opacity: 0.9;
  text-decoration: none !important;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.fww-brand-logo img {
  display: block !important;
  width: auto !important;
  height: 32px !important;
  max-width: none !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  object-fit: contain !important;
  object-position: center center !important;
  filter: none;
}
.fww-brand-logo:hover {
  opacity: 1;
  transform: translateY(-1px);
}
/* Collapse empty PNG canvas (measured ink bounds at natural 400x167). */
.fww-brand-logo img[alt="DC"] {
  margin-left: 0 !important;
  margin-right: -42px !important;
}
.fww-brand-logo img[alt="Florsheim"] {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.fww-brand-logo img[alt="Frye Supply"] {
  margin-left: 6px !important;
  margin-right: -34px !important;
}
.fww-brand-logo img[alt="Grabbers"],
.fww-brand-logo img[alt="Iron Age"],
.fww-brand-logo img[alt="Knapp"],
.fww-brand-logo img[alt="Reebok"],
.fww-brand-logo img[alt="Rockport Works"] {
  margin-left: 0 !important;
  margin-right: -12px !important;
}
.fww-brand-logo img[alt="Roxy at Work"] {
  margin-left: 0 !important;
  margin-right: -44px !important;
}
.fww-brand-logo img[alt="Volcom"] {
  margin-left: 0 !important;
  margin-right: -18px !important;
}
@media (min-width: 1100px) {
  .fww-brand-logos {
    flex-wrap: nowrap !important;
    gap: 28px !important;
    max-width: 980px !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
  .fww-brand-logo {
    height: 40px !important;
  }
  .fww-brand-logo img {
    height: 30px !important;
  }
  .fww-brand-logo img[alt="DC"] {
    margin-right: -40px !important;
  }
  .fww-brand-logo img[alt="Frye Supply"] {
    margin-left: 8px !important;
    margin-right: -32px !important;
  }
  .fww-brand-logo img[alt="Grabbers"],
  .fww-brand-logo img[alt="Iron Age"],
  .fww-brand-logo img[alt="Knapp"],
  .fww-brand-logo img[alt="Reebok"],
  .fww-brand-logo img[alt="Rockport Works"] {
    margin-right: -11px !important;
  }
  .fww-brand-logo img[alt="Roxy at Work"] {
    margin-right: -42px !important;
  }
  .fww-brand-logo img[alt="Volcom"] {
    margin-right: -17px !important;
  }
}
/* Text fallback if a logo file is missing */
.fww-brand-pill {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0 20px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--fww-border-med);
  border-radius: var(--fww-radius);
  font-family: var(--fww-font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--fww-text-muted);
  cursor: pointer;
  transition: all 0.15s;
  text-decoration: none;
}
.fww-brand-pill:hover {
  background: rgba(255,255,255,0.1);
  color: #fff;
  border-color: var(--fww-border-str);
}
@media (max-width: 767px) {
  .fww-brand-logos {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 16px 20px !important;
    max-width: 100% !important;
    padding: 8px 12px 4px !important;
  }
  .fww-brand-logo {
    height: 36px !important;
    width: auto !important;
  }
  .fww-brand-logo img {
    height: 28px !important;
    /* Soften canvas collapse on small screens so the wrap cluster stays airy. */
    margin-left: 0 !important;
    margin-right: -8px !important;
  }
  .fww-brand-logo img[alt="Florsheim"] {
    margin-right: 0 !important;
  }
  .fww-brand-logo img[alt="DC"],
  .fww-brand-logo img[alt="Frye Supply"],
  .fww-brand-logo img[alt="Roxy at Work"] {
    margin-right: -18px !important;
  }
  .fww-brand-logo img[alt="Frye Supply"] {
    margin-left: 0 !important;
  }
}

/* =============================================================
   CATEGORY CARDS - Photo background style
   ============================================================= */
.fww-category-card {
  background: var(--fww-navy-card);
  border: 1px solid var(--fww-border);
  border-radius: var(--fww-radius-lg);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  display: block;
  text-decoration: none;
  min-height: 200px;
  transition: border-color 0.2s, transform 0.15s;
}
.fww-category-card:hover { border-color: var(--fww-red); transform: translateY(-2px); }

/* Photo background variant */
.fww-category-card.cat-photo .cat-photo-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.4s ease;
}
.fww-category-card.cat-photo:hover .cat-photo-bg { transform: scale(1.04); }
.fww-category-card.cat-photo .cat-photo-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(14,22,36,0.88) 0%, rgba(14,22,36,0.3) 60%, transparent 100%);
}

.fww-category-card .cat-stripe {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px; background: var(--fww-red); z-index: 3;
}
.fww-category-card .cat-content {
  position: relative; z-index: 2;
  padding: 24px 20px 20px 24px;
  height: 100%; display: flex;
  flex-direction: column; justify-content: flex-end;
}
.fww-category-card .cat-name {
  font-family: var(--fww-font-display);
  font-size: 20px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px;
  color: #fff; line-height: 1.1;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}
.fww-category-card .cat-count {
  font-size: 12px; color: var(--fww-text-faint);
  margin-top: 4px; font-weight: 600;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}

/* =============================================================
   WOOCOMMERCE - Product Cards
   ============================================================= */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  background: var(--fww-navy-card) !important;
  border: 1px solid var(--fww-border) !important;
  border-radius: var(--fww-radius-lg) !important;
  overflow: hidden !important;
  transition: border-color 0.2s, transform 0.15s !important;
  padding: 0 !important;
}
.woocommerce ul.products li.product:hover {
  border-color: var(--fww-border-med) !important;
  transform: translateY(-2px) !important;
}

/* Breathing room above/below the shop + archive listings (between the header
   and content, and between the pagination and footer). Scoped to listing
   pages so single-product layouts are untouched. */
.post-type-archive-product .site-main,
.tax-product_cat .site-main,
.tax-product_brand .site-main {
  padding-top: clamp(32px, 4vw, 56px) !important;
  padding-bottom: clamp(40px, 6vw, 80px) !important;
}

/* Outer left/right inset matches the Elementor Products default column gap
   (20px). Prefer the Elementor widget container so result-count + grid share
   the same inset; fall back to ul.products for classic WC loops/shortcodes. */
.elementor-widget-woocommerce-products .elementor-widget-container {
  padding-left: 20px !important;
  padding-right: 20px !important;
  box-sizing: border-box;
}
.woocommerce ul.products,
.woocommerce-page ul.products,
.elementor-wc-products ul.products,
.elementor-products-grid ul.products {
  padding-left: 20px !important;
  padding-right: 20px !important;
  box-sizing: border-box;
}
/* Prevent double inset when both the widget container and ul.products match. */
.elementor-widget-woocommerce-products .elementor-widget-container ul.products {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Uniform white image tile. Product PNGs vary (some transparent, some with a
   baked-in white background); a white tile + contained fit makes every
   thumbnail consistent regardless of the source image. */
.woocommerce ul.products li.product img.attachment-woocommerce_thumbnail,
.woocommerce ul.products li.product img.wp-post-image {
  background-color: #fff !important;
  padding: 12px !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: contain !important;
  margin-bottom: 0 !important;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--fww-font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--fww-text) !important;
  padding: 12px 14px 4px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.woocommerce ul.products li.product .brand {
  font-family: var(--fww-font-display) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  color: var(--fww-text-faint) !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  padding: 12px 14px 0 !important;
  display: block;
}

/* Brand band above the thumbnail, linked to the brand archive.
   Steel blue sampled from Kait's mockup (#3E5977). Output by
   fww_loop_brand_band() in functions.php (section 19). Not scoped to
   .woocommerce: the ldby-product-filter grid has no such wrapper. */
ul.products li.product .fww-brand-band {
  display: block;
  background: #3E5977;
  color: #fff !important;
  font-family: var(--fww-font-display) !important;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  line-height: 1.2;
  transition: background 0.15s;
  /* Rounded top corners (site radius token) and a 12px tuck beneath the
     white image tile so its rounded top corners reveal band blue instead
     of the page background. The image paints over the overlap because it
     comes later in the DOM. */
  border-radius: var(--fww-radius) var(--fww-radius) 0 0;
  padding: 8px 10px 20px;
  margin-bottom: -12px;
}
ul.products li.product a.fww-brand-band:hover {
  background: #48688A;
}

.woocommerce ul.products li.product .price {
  font-family: var(--fww-font-display) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--fww-text) !important;
  padding: 4px 14px !important;
}
.woocommerce ul.products li.product .price del {
  color: var(--fww-text-faint) !important;
  font-size: 15px !important;
}
.woocommerce ul.products li.product .price ins {
  color: var(--fww-red) !important;
  text-decoration: none !important;
}

.woocommerce ul.products li.product .button {
  background: var(--fww-red) !important;
  color: #fff !important;
  font-family: var(--fww-font-display) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  border-radius: var(--fww-radius) !important;
  min-height: 48px !important;
  margin: 8px 14px 14px !important;
  width: calc(100% - 28px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
  transition: background 0.15s !important;
}
.woocommerce ul.products li.product .button:hover {
  background: var(--fww-red-hover) !important;
}

.woocommerce ul.products li.product .onsale {
  background: var(--fww-red) !important;
  font-family: var(--fww-font-display) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  border-radius: 4px !important;
  min-height: auto !important;
  min-width: auto !important;
  padding: 4px 10px !important;
  line-height: 1 !important;
}

/* =============================================================
   WOOCOMMERCE - Single Product Page
   ============================================================= */
.woocommerce div.product .product_title {
  font-family: var(--fww-font-display) !important;
  font-size: clamp(28px, 5vw, 48px) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  color: #111 !important;
}

.woocommerce div.product .price {
  font-family: var(--fww-font-display) !important;
  font-size: 36px !important;
  font-weight: 700 !important;
  color: #111 !important;
}

.woocommerce div.product form.cart .single_add_to_cart_button {
  background: var(--fww-red) !important;
  color: #fff !important;
  font-family: var(--fww-font-display) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  min-height: var(--fww-tap) !important;
  border-radius: var(--fww-radius) !important;
  border: none !important;
  padding: 0 40px !important;
  transition: background 0.15s !important;
}
.woocommerce div.product form.cart .single_add_to_cart_button:hover {
  background: var(--fww-red-hover) !important;
}

/* Size/variation selects */
.woocommerce div.product form.cart .variations select {
  font-family: var(--fww-font-display) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #111 !important;
  background: #fff !important;
  border: 2px solid #ddd !important;
  border-radius: var(--fww-radius) !important;
  min-height: var(--fww-tap) !important;
  padding: 0 14px !important;
}

.woocommerce .quantity input.qty {
  font-family: var(--fww-font-display) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #111 !important;
  background: #fff !important;
  border: 2px solid #ddd !important;
  border-radius: var(--fww-radius) !important;
  min-height: var(--fww-tap) !important;
  min-width: 70px !important;
  text-align: center !important;
}

/* Product tabs - navigation hidden (description content only) */
.woocommerce div.product .woocommerce-tabs ul.tabs { display: none !important; }

/* =============================================================
   WOOCOMMERCE - Forms & Inputs
   ============================================================= */
.woocommerce input,
.woocommerce select,
.woocommerce textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="search"],
select, textarea {
  font-family: var(--fww-font-body) !important;
  font-size: 15px !important;
  border: 1px solid #ddd !important;
  border-radius: var(--fww-radius) !important;
  min-height: var(--fww-tap) !important;
  padding: 0 14px !important;
  outline: none !important;
  transition: border-color 0.15s !important;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--fww-red) !important;
}

/* =============================================================
   GRAVITY FORMS - Fields + Submit
   Normalize Orbital theme controls so phone (type=tel) and
   selects match text/email height, border, and padding.
   ============================================================= */
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="number"],
.gform_wrapper input[type="url"] {
  font-family: var(--fww-font-body) !important;
  font-size: 15px !important;
  color: #111 !important;
  background-color: #fff !important;
  border: 1px solid #ddd !important;
  border-radius: var(--fww-radius) !important;
  min-height: var(--fww-tap) !important;
  height: var(--fww-tap) !important;
  padding: 0 14px !important;
  outline: none !important;
  box-shadow: none !important;
  line-height: normal !important;
}
.gform_wrapper {
  /* Keep Orbital's select math in sync with our taller tap target.
     Orbital centers <select> text via line-height == control height
     and padding-y: 0; breaking that pair floats the label high. */
  --gf-ctrl-size: var(--fww-tap);
  --gf-ctrl-size-md: var(--fww-tap);
  --gf-ctrl-line-height: var(--fww-tap);
  --gf-ctrl-padding-y: 0;
}
.gform_wrapper select,
.gform_wrapper .gfield_select {
  font-family: var(--fww-font-body) !important;
  font-size: 15px !important;
  color: #111 !important;
  background-color: #fff !important;
  border: 1px solid #ddd !important;
  border-radius: var(--fww-radius) !important;
  height: var(--fww-tap) !important;
  min-height: var(--fww-tap) !important;
  padding: 0 40px 0 14px !important;
  line-height: var(--fww-tap) !important;
  outline: none !important;
  box-shadow: none !important;
}
.gform_wrapper textarea {
  font-family: var(--fww-font-body) !important;
  font-size: 15px !important;
  color: #111 !important;
  background-color: #fff !important;
  border: 1px solid #ddd !important;
  border-radius: var(--fww-radius) !important;
  min-height: 140px !important;
  height: auto !important;
  padding: 14px !important;
  outline: none !important;
  box-shadow: none !important;
}
.gform_wrapper input[type="text"]:focus,
.gform_wrapper input[type="email"]:focus,
.gform_wrapper input[type="tel"]:focus,
.gform_wrapper input[type="number"]:focus,
.gform_wrapper input[type="url"]:focus,
.gform_wrapper select:focus,
.gform_wrapper .gfield_select:focus,
.gform_wrapper textarea:focus {
  border-color: var(--fww-red) !important;
  box-shadow: none !important;
}
.gform_wrapper button.gform_button,
.gform_wrapper input[type="submit"] {
  background: var(--fww-red) !important;
  border-color: var(--fww-red) !important;
  color: #fff !important;
  transition: background 0.15s !important;
}
.gform_wrapper button.gform_button:hover,
.gform_wrapper button.gform_button:focus,
.gform_wrapper input[type="submit"]:hover,
.gform_wrapper input[type="submit"]:focus {
  background: var(--fww-red-hover) !important;
  border-color: var(--fww-red-hover) !important;
}

/* Confirmation / thank-you copy sits on navy; Orbital defaults to dark text. */
.gform_confirmation_wrapper,
.gform_confirmation_message,
.gform_confirmation_message * {
  color: #fff !important;
}

/* =============================================================
   WHY CARDS (We Work Like You Do)
   Section uses a background image - overlay is applied inline
   ============================================================= */
.fww-why-card {
  background: var(--fww-navy-card);
  border: 1px solid var(--fww-border);
  border-radius: var(--fww-radius-lg);
  padding: 28px 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
  max-width: 340px;
  margin: 0 auto;
}
.fww-why-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--fww-red);
  transform: scaleX(0);
  transition: transform 0.25s ease;
  transform-origin: left;
}
.fww-why-card:hover::before { transform: scaleX(1); }
.fww-why-card .why-icon { font-size: 40px; display: block; margin-bottom: 12px; }
.fww-why-card .why-title {
  font-family: var(--fww-font-display);
  font-size: 16px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--fww-text); margin-bottom: 8px;
}
.fww-why-card .why-desc {
  font-size: 13px; color: var(--fww-text-muted); line-height: 1.55;
}

/* Why section - 2 cards centered */
.fww-why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  max-width: 720px;
  margin: 0 auto;
}

/* Why section background overlay
   Apply CSS class fww-why-section to the Elementor section
   Set background image in Elementor, overlay via ::before */
.fww-why-section {
  position: relative;
  overflow: hidden;
}
.fww-why-section::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(21,34,51,0.46) 0%, rgba(21,34,51,0.38) 100%);
  pointer-events: none;
  z-index: 0;
}
.fww-why-section .elementor-container { position: relative; z-index: 1; }

/* =============================================================
   TESTIMONIAL CARDS
   ============================================================= */
.fww-testi-card {
  background: var(--fww-navy-card);
  border: 1px solid var(--fww-border);
  border-radius: var(--fww-radius-lg);
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
}
.fww-testi-stars { color: var(--fww-gold); font-size: 18px; letter-spacing: 2px; margin-bottom: 12px; }
.fww-testi-text {
  font-size: 14px; color: var(--fww-text-muted);
  line-height: 1.7; font-style: italic; margin-bottom: 16px; flex: 1;
}
.fww-testi-author {
  font-family: var(--fww-font-display);
  font-size: 14px; font-weight: 700;
  text-transform: uppercase; color: var(--fww-text);
}
.fww-testi-role { font-size: 12px; color: var(--fww-text-faint); }

/* =============================================================
   CTA BAND
   ============================================================= */
.fww-cta-band {
  background: var(--fww-red);
  padding: 72px 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.fww-cta-band::before {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    -55deg, transparent, transparent 18px,
    rgba(0,0,0,0.07) 18px, rgba(0,0,0,0.07) 19px
  );
}
.fww-cta-band h2 { color: #fff !important; position: relative; z-index: 1; }
.fww-cta-band p { color: rgba(255,255,255,0.85) !important; position: relative; z-index: 1; }
.fww-cta-band .elementor-button-wrapper { position: relative; z-index: 1; }

/* =============================================================
   HOMEPAGE HIGHLIGHT STRIP (Elementor HTML widget)
   CSS lives here so it cannot be stripped/lost when Elementor
   caches HTML widgets or after DB pulls without uploads CSS.
   ============================================================= */
.flww-highlight-section {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.flww-highlight-card {
  position: relative;
  flex: 1 1 33.333%;
  min-width: 280px;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  text-decoration: none;
  display: block;
  color: #fff;
}
.flww-highlight-card img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  transition: transform 0.4s ease;
}
.flww-highlight-card:hover img {
  transform: scale(1.04);
}
.flww-highlight-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 30px 24px 26px;
  background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.4) 60%, rgba(0,0,0,0) 100%);
  box-sizing: border-box;
}
.flww-highlight-overlay h3 {
  font-family: inherit;
  color: #fff;
  margin: 0 0 8px;
  font-size: 1.5rem;
  line-height: 1.2;
  text-transform: uppercase;
}
.flww-highlight-overlay p {
  font-family: inherit;
  color: #f1f1f1;
  margin: 0 0 4px;
  font-size: 1rem;
  line-height: 1.4;
}
.flww-highlight-overlay .flww-view-shoe {
  font-weight: 600;
  text-decoration: underline;
}
@media (max-width: 768px) {
  .flww-highlight-card {
    flex: 1 1 100%;
    aspect-ratio: 1 / 1;
  }
}

/* =============================================================
   FEATURED PRODUCTS SECTION - White background
   ============================================================= */
.fww-featured-section {
  background: #ffffff !important;
  position: relative;
  z-index: 1;
}
.fww-featured-section .elementor-heading-title { color: var(--fww-navy-mid) !important; }
.fww-featured-section .fww-eyebrow-label { color: var(--fww-navy-mid) !important; }

/* Match the Shop by Job row width. Elementor's classic section caps at its
   1152px content width and the default column gap adds another 10px inset,
   so both are overridden here. */
.fww-featured-section > .elementor-container {
  max-width: var(--fww-max-w) !important;
}
.fww-featured-section .elementor-widget-wrap {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Grid instead of WooCommerce's percentage floats: equal columns, and every
   card in a row gets the same height even when a product title wraps. */
.fww-featured-section ul.products {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
  width: 100%;
  max-width: var(--fww-max-w);
  margin: 0 auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* WooCommerce's float clearfix would otherwise occupy two grid cells. */
.fww-featured-section ul.products::before,
.fww-featured-section ul.products::after {
  display: none !important;
}
.fww-featured-section ul.products li.product {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}
/* Keeps the CTAs on one line across the row if a title still wraps. */
.fww-featured-section ul.products li.product .button {
  margin-top: auto !important;
}

@media (max-width: 1024px) {
  .fww-featured-section ul.products {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
  }
}

@media (max-width: 767px) {
  /* 2x2 grid on mobile: show 4 featured shoes, hide the 5th orphan slot */
  .fww-featured-section ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
}

@media (max-width: 1024px) {
  /* The 4-up and 2x2 layouts both drop the 5th card rather than orphan it. */
  .fww-featured-section ul.products li.product:nth-child(n+5) {
    display: none !important;
  }
}

/* =============================================================
   PROMO BAND (Product pages)
   ============================================================= */
.fww-promo-band {
  background: var(--fww-navy);
  padding: 56px 24px;
  position: relative;
  overflow: hidden;
}
.fww-promo-band::before {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    -55deg, transparent, transparent 18px,
    rgba(255,255,255,0.03) 18px, rgba(255,255,255,0.03) 19px
  );
}
.fww-promo-code {
  background: rgba(255,255,255,0.08);
  border: 2px dashed rgba(255,255,255,0.25);
  border-radius: var(--fww-radius);
  padding: 12px 24px;
  font-family: var(--fww-font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 4px;
  color: #fff;
  display: inline-block;
}

/* =============================================================
   BREADCRUMB
   ============================================================= */
.fww-breadcrumb {
  background: #f5f5f5;
  border-bottom: 1px solid #e5e5e5;
  padding: 12px 0;
}
.fww-breadcrumb a { color: #666; font-size: 13px; }
.fww-breadcrumb a:hover { color: var(--fww-red); }

/* =============================================================
   PRODUCT PAGE LAYOUT
   ============================================================= */
.fww-product-page { background: #ffffff; padding: 40px 0; }

/* Variation buttons (size, color) */
.fww-size-btn {
  min-width: 56px; height: 48px; padding: 0 10px;
  border: 2px solid #ddd; border-radius: var(--fww-radius);
  background: #fff; font-family: var(--fww-font-display);
  font-size: 15px; font-weight: 600; color: #444;
  cursor: pointer; transition: all .15s;
}
.fww-size-btn:hover { border-color: #999; color: #111; }
.fww-size-btn.active { background: var(--fww-navy); border-color: var(--fww-navy); color: #fff; }
.fww-size-btn.out { opacity: .35; cursor: not-allowed; text-decoration: line-through; }

.fww-color-swatch {
  width: 36px; height: 36px; border-radius: 50%;
  border: 3px solid transparent; cursor: pointer;
  transition: outline-color .15s; outline: 2px solid transparent; outline-offset: 2px;
}
.fww-color-swatch:hover { outline-color: #aaa; }
.fww-color-swatch.active { outline-color: var(--fww-red); border-color: #fff; }

/* =============================================================
   FOOTER
   ============================================================= */
.site-footer,
.elementor-location-footer {
  background: var(--fww-navy-card) !important;
  border-top: 3px solid var(--fww-red) !important;
}
.site-footer p, .elementor-location-footer p { color: var(--fww-text-faint) !important; font-size: 13px !important; }
.site-footer a, .elementor-location-footer a { color: var(--fww-text-muted) !important; font-size: 14px !important; transition: color 0.15s !important; }
.site-footer a:hover, .elementor-location-footer a:hover { color: var(--fww-text) !important; }
.site-footer .widget-title, .elementor-location-footer .widget-title {
  font-family: var(--fww-font-display) !important;
  font-size: 12px !important; font-weight: 600 !important;
  color: var(--fww-text-faint) !important; text-transform: uppercase !important;
  letter-spacing: 2.5px !important; margin-bottom: 12px !important;
}

/* Footer logo - prevent squeeze/distort on narrow columns */
.elementor-location-footer .elementor-widget-image img,
.elementor-location-footer .elementor-widget-html img[alt="Frontline Workwear USA"],
.site-footer .site-logo img {
  width: auto !important;
  height: auto !important;
  max-height: 150px !important;
  max-width: 100% !important;
  object-fit: contain !important;
  mix-blend-mode: lighten !important;
}

/* Footer bottom bar: vertically align copyright + Proudly American */
.elementor-location-footer .elementor-widget-html > div:last-child {
  align-items: center !important;
}
.elementor-location-footer .elementor-widget-html > div:last-child > span {
  display: inline-flex !important;
  align-items: center !important;
}

@media (max-width: 767px) {
  .elementor-location-footer .fww-footer-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 16px 12px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    align-items: start !important;
  }
  .elementor-location-footer .fww-footer-col-industries {
    display: none !important;
  }
  .elementor-location-footer .fww-footer-brand {
    max-width: none !important;
    min-width: 0 !important;
  }
  .elementor-location-footer .fww-footer-brand p {
    display: none !important;
  }
  .elementor-location-footer .elementor-widget-html img[alt="Frontline Workwear USA"] {
    max-height: 175px !important;
    max-width: 100% !important;
  }
  .elementor-location-footer .fww-footer-col-company,
  .elementor-location-footer .fww-footer-col-support {
    min-width: 0 !important;
  }
  .elementor-location-footer .fww-footer-col-company a,
  .elementor-location-footer .fww-footer-col-support a {
    font-size: 15px !important;
    padding: 6px 0 !important;
    line-height: 1.35 !important;
  }
  .elementor-location-footer .fww-footer-col-company > div:first-child,
  .elementor-location-footer .fww-footer-col-support > div:first-child {
    font-size: 13px !important;
    margin-bottom: 14px !important;
  }
}

/* =============================================================
   SCROLLBAR
   ============================================================= */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.22); }

/* =============================================================
   UTILITY CLASSES
   ============================================================= */
.fww-text-red   { color: var(--fww-red) !important; }
.fww-text-muted { color: var(--fww-text-muted) !important; }
.fww-text-faint { color: var(--fww-text-faint) !important; }
.fww-text-navy  { color: var(--fww-navy) !important; }
.fww-bg-navy    { background-color: var(--fww-navy) !important; }
.fww-bg-mid     { background-color: var(--fww-navy-mid) !important; }
.fww-bg-card    { background-color: var(--fww-navy-card) !important; }
.fww-bg-white   { background-color: #ffffff !important; }
.fww-border-red { border-top: 3px solid var(--fww-red) !important; }
.fww-uppercase  { text-transform: uppercase !important; font-family: var(--fww-font-display) !important; }

/* =============================================================
   STICKY NAV SHRINK - .scrolled added by JS
   ============================================================= */
.site-header { transition: background 0.25s ease !important; }
.elementor-location-header .elementor-widget-image img {
  transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* =============================================================
   MOBILE + TABLET RESPONSIVE (header, hero through 1024px)
   ============================================================= */
@media (max-width: 1024px) {
  /* --- Header: logo left | Menu + Cart action cluster right --- */
  .elementor-location-header {
    position: sticky !important;
  }

  .fww-header-sec > .elementor-container,
  .elementor-location-header > .elementor-container {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-height: 72px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    gap: 0 !important;
  }

  .elementor-location-header.scrolled > .elementor-container {
    min-height: 60px !important;
  }

  .fww-header-sec > .elementor-container > .elementor-column,
  .elementor-location-header > .elementor-container > .elementor-column {
    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    align-self: center !important;
  }

  .fww-header-sec > .elementor-container > .elementor-column:first-child,
  .elementor-location-header > .elementor-container > .elementor-column:first-child {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .fww-header-sec > .elementor-container > .elementor-column:nth-child(2),
  .elementor-location-header > .elementor-container > .elementor-column:nth-child(2),
  .elementor-location-header > .elementor-container > .elementor-column:nth-child(3) {
    flex: 0 0 auto !important;
  }

  .fww-header-sec .elementor-column > .elementor-widget-wrap,
  .elementor-location-header .elementor-column > .elementor-widget-wrap,
  .elementor-location-header > .elementor-container > .elementor-column > .elementor-element-populated {
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
  }

  .elementor-location-header .elementor-widget-image img {
    height: 72px !important;
  }

  .elementor-location-header.scrolled .elementor-widget-image img {
    height: 56px !important;
  }

  /* Keep the text wordmark swap on mobile. Previously ::after was display:none
     while the shield stayed visibility:hidden on scroll, so the logo vanished. */
  .elementor-location-header .elementor-widget-image::after {
    display: block !important;
    width: 180px !important;
    height: 36px !important;
    background-size: auto 36px !important;
  }

  body .elementor-location-header.scrolled .elementor-widget-image img {
    opacity: 0 !important;
    visibility: hidden !important;
  }

  .elementor-location-header.scrolled .elementor-widget-image::after {
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Only the toggle lives in the header bar; links open in the full-width panel */
  .elementor-location-header .elementor-nav-menu--main {
    display: none !important;
  }

  .elementor-location-header .elementor-nav-menu a.elementor-item {
    height: auto !important;
  }

  .elementor-location-header .elementor-widget-nav-menu,
  .elementor-location-header .elementor-widget-nav-menu .elementor-widget-container,
  .elementor-location-header .elementor-widget-n-menu,
  .elementor-location-header .elementor-widget-n-menu .elementor-widget-container,
  .elementor-location-header .elementor-widget-woocommerce-menu-cart,
  .elementor-location-header .elementor-widget-woocommerce-menu-cart .elementor-widget-container,
  .elementor-location-header .elementor-menu-cart__toggle {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Mega Menu: hide desktop heading in the bar; use the burger toggle */
  .elementor-location-header .fww-mega-nav .e-n-menu-heading {
    display: none !important;
  }
  .elementor-location-header .fww-mega-nav .e-n-menu-title,
  .elementor-location-header .fww-mega-nav .e-n-menu-title-container {
    height: auto !important;
    min-height: 52px !important;
    width: 100% !important;
    padding: 14px 20px !important;
    margin: 0 !important;
    border-bottom: 1px solid var(--fww-border) !important;
    font-size: 18px !important;
    justify-content: space-between !important;
  }
  .elementor-location-header .fww-mega-nav .e-n-menu-content {
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 0 8px !important;
  }
  .elementor-location-header .fww-mega-nav .e-n-menu-content > .e-con,
  .elementor-location-header .fww-mega-nav .fww-mega-dropdown {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 12px 12px !important;
  }
  .elementor-location-header .fww-mega-panel {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  .elementor-location-header .fww-mega-col--industry,
  .elementor-location-header .fww-mega-col--brands {
    padding-left: 0 !important;
    border-left: 0 !important;
    padding-top: 12px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  }
  .elementor-location-header .fww-mega-brands {
    grid-template-columns: 1fr 1fr !important;
  }

  .fww-header-sec .elementor-menu-toggle,
  .elementor-location-header .elementor-menu-toggle,
  .fww-header-sec .e-n-menu-toggle,
  .elementor-location-header .e-n-menu-toggle {
    margin: 0 8px 0 0 !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    min-width: auto !important;
    width: auto !important;
    padding: 0 18px !important;
    color: #fff !important;
    border: 1px solid var(--fww-border-str) !important;
    border-radius: var(--fww-radius) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: var(--fww-font-display) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    background: transparent !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
  }

  .fww-header-sec .elementor-menu-toggle i,
  .fww-header-sec .elementor-menu-toggle svg,
  .fww-header-sec .elementor-menu-toggle .e-font-icon-svg,
  .elementor-location-header .elementor-menu-toggle i,
  .elementor-location-header .elementor-menu-toggle svg,
  .elementor-location-header .elementor-menu-toggle .e-font-icon-svg,
  .fww-header-sec .e-n-menu-toggle .e-n-menu-toggle-icon,
  .elementor-location-header .e-n-menu-toggle .e-n-menu-toggle-icon,
  .fww-header-sec .e-n-menu-toggle svg,
  .elementor-location-header .e-n-menu-toggle svg {
    display: none !important;
  }

  .fww-header-sec .elementor-menu-toggle::after,
  .elementor-location-header .elementor-menu-toggle::after,
  .fww-header-sec .e-n-menu-toggle::after,
  .elementor-location-header .e-n-menu-toggle::after {
    content: "Menu";
    color: #fff !important;
    line-height: 1 !important;
  }

  .fww-header-sec .elementor-menu-toggle.elementor-active::after,
  .elementor-location-header .elementor-menu-toggle.elementor-active::after,
  .fww-header-sec .e-n-menu-toggle[aria-expanded="true"]::after,
  .elementor-location-header .e-n-menu-toggle[aria-expanded="true"]::after {
    content: "Close";
  }

  .fww-header-sec .elementor-menu-toggle:hover,
  .elementor-location-header .elementor-menu-toggle:hover,
  .fww-header-sec .e-n-menu-toggle:hover,
  .elementor-location-header .e-n-menu-toggle:hover {
    border-color: #fff !important;
    color: #fff !important;
  }

  .elementor-location-header .fww-nav-util,
  .elementor-location-header .elementor-menu-cart__toggle .elementor-button {
    min-width: 44px !important;
    min-height: 48px !important;
    max-height: none !important;
    height: auto !important;
    padding: 2px 6px !important;
    gap: 3px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    line-height: 1 !important;
  }
  .elementor-location-header .fww-nav-util__label,
  .elementor-location-header .elementor-menu-cart__toggle .elementor-button::after {
    font-size: 10px !important;
    letter-spacing: 1px !important;
  }

  .fww-nav-actions > .elementor-widget-wrap,
  .fww-nav-actions > .elementor-column-wrap > .elementor-widget-wrap {
    justify-content: flex-end !important;
    gap: 2px !important;
    align-items: center !important;
  }

  /* Full-width mobile menu panel (concept .mobile-menu) */
  .elementor-location-header .elementor-nav-menu--dropdown.elementor-nav-menu__container,
  .elementor-location-header .fww-mega-nav .e-n-menu-wrapper {
    position: fixed !important;
    top: var(--fww-mobile-header-h, 72px) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border-top: 1px solid var(--fww-border) !important;
    background: var(--fww-navy-mid) !important;
    z-index: 198 !important;
    max-height: calc(100dvh - var(--fww-mobile-header-h, 72px)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35) !important;
  }
  .elementor-location-header .fww-mega-nav .e-n-menu-wrapper .e-n-menu-heading {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
  }

  body.fww-mobile-menu-open {
    overflow: hidden !important;
  }

  body.fww-mobile-menu-open .elementor-location-header {
    z-index: 200 !important;
  }

  body.fww-mobile-menu-open::after {
    content: "";
    position: fixed;
    top: var(--fww-mobile-header-h, 72px);
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 25, 40, 0.55);
    z-index: 197;
    pointer-events: none;
  }

  .elementor-location-header .elementor-nav-menu--dropdown .elementor-nav-menu {
    width: 100% !important;
    padding: 8px 0 16px !important;
  }

  .elementor-location-header .elementor-nav-menu--dropdown .elementor-nav-menu > li {
    width: 100% !important;
  }

  .elementor-location-header .elementor-nav-menu--dropdown a.elementor-item {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 52px !important;
    height: auto !important;
    padding: 0 24px !important;
    font-family: var(--fww-font-display) !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    color: var(--fww-text-muted) !important;
    background: transparent !important;
    border-bottom: 1px solid var(--fww-border) !important;
    border-radius: 0 !important;
  }

  .elementor-location-header .elementor-nav-menu--dropdown > .elementor-nav-menu > li > a.elementor-item:hover,
  .elementor-location-header .elementor-nav-menu--dropdown > .elementor-nav-menu > li > a.elementor-item:focus {
    background: rgba(255, 255, 255, 0.04) !important;
    color: #fff !important;
  }

  .elementor-location-header .elementor-nav-menu--dropdown a.elementor-item.elementor-item-active {
    background: transparent !important;
    color: #fff !important;
  }

  .elementor-location-header .elementor-nav-menu--dropdown .menu-item-has-children > a.elementor-item {
    padding-right: 52px !important;
  }

  .elementor-location-header .elementor-nav-menu--dropdown .menu-item-has-children > a.highlighted {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border-left: 3px solid var(--fww-red) !important;
    padding-left: 21px !important;
  }

  /* Collapsed by default; Elementor SmartMenus toggles visibility via inline display */
  .elementor-location-header .elementor-nav-menu--dropdown .sub-menu {
    position: static !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: rgba(0, 0, 0, 0.2) !important;
  }

  .elementor-location-header .elementor-nav-menu--dropdown .sub-menu a.elementor-item {
    padding-left: 36px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    min-height: 46px !important;
    letter-spacing: 0.5px !important;
    color: rgba(255, 255, 255, 0.72) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  }

  .elementor-location-header .elementor-nav-menu--dropdown .sub-menu a.elementor-item:hover,
  .elementor-location-header .elementor-nav-menu--dropdown .sub-menu a.elementor-item:focus {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.05) !important;
  }

  .elementor-location-header .elementor-nav-menu--dropdown .sub-arrow {
    position: absolute !important;
    right: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    color: #fff !important;
    fill: #fff !important;
    transition: transform 0.2s ease !important;
  }

  .elementor-location-header .elementor-nav-menu--dropdown .menu-item-has-children > a.highlighted .sub-arrow {
    transform: translateY(-50%) rotate(180deg) !important;
  }

  /* --- Hero: tighter padding, compact CTAs, boot callout over image --- */
  .fww-hero.elementor-section {
    padding-top: 48px !important;
    padding-bottom: 56px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    min-height: auto !important;
  }

  .fww-hero-headline .elementor-heading-title {
    font-size: clamp(34px, 9.5vw, 44px) !important;
    line-height: 1.05 !important;
  }

  .fww-hero-tagline {
    margin-top: 8px !important;
    margin-bottom: 24px !important;
  }

  .fww-hero-tagline .elementor-heading-title {
    font-size: 13px !important;
    letter-spacing: 2px !important;
  }

  .fww-hero .elementor-widget-button {
    width: auto !important;
    flex: 0 0 auto !important;
  }

  .fww-hero-col > .elementor-widget-wrap > .elementor-widget-button,
  .fww-hero-col > .elementor-column-wrap > .elementor-widget-wrap > .elementor-widget-button {
    width: auto !important;
  }

  .fww-hero .fww-btn-primary {
    margin-right: 10px !important;
    margin-bottom: 0 !important;
  }

  .fww-hero .fww-btn-primary .elementor-button,
  .fww-hero .fww-btn-secondary .elementor-button {
    width: auto !important;
    min-height: 44px !important;
    height: 44px !important;
    font-size: 14px !important;
    padding: 0 20px !important;
    letter-spacing: 1.5px !important;
  }

  .fww-hero .elementor-button {
    min-height: 44px !important;
    height: 44px !important;
  }

  /* Anchor boot callout to the hero photo, not the text stack */
  .fww-hero > .elementor-container {
    position: static !important;
  }

  .fww-hero-product-link {
    position: absolute !important;
    right: 10px !important;
    top: 62% !important;
    transform: translateY(-50%) !important;
    width: auto !important;
    max-width: 42% !important;
    margin: 0 !important;
    z-index: 5 !important;
  }

  .fww-hero-product-link .elementor-button {
    font-size: 13px !important;
    justify-content: flex-end !important;
    text-align: right !important;
    line-height: 1.2 !important;
  }
}

@media (max-width: 767px) {
  /* --- General mobile --- */
  .woocommerce ul.products li.product .button {
    min-height: 52px !important;
    font-size: 16px !important;
  }

  .fww-why-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
}

@media (min-width: 640px) and (max-width: 1024px) {
  .fww-hero-product-link {
    top: 58% !important;
    right: 16px !important;
    max-width: 36% !important;
  }
}

@media (min-width: 768px) {
  .fww-hero { min-height: 480px; }
}

@media (min-width: 1024px) {
  .fww-hero { min-height: 540px; }
}

/* =============================================================
   NATIVE WIDGET BRIDGES
   These let the design system be built with STANDARD (codeless)
   Elementor widgets - Heading, Text, Icon Box, columns - by
   styling the inner Elementor markup when a design-system class
   is added in the widget's Advanced > CSS Classes field.
   A content manager only needs to add the class, no code.
   ============================================================= */

/* Keep hero CTA labels on one line */
.fww-hero .elementor-button { white-space: nowrap; }

/* Hero column: force a wrapping flex row so full-width widgets (eyebrow,
   headings, tagline, badges) each take their own line, while the two
   auto-width CTA buttons share one line side by side. */
.fww-hero-col > .elementor-widget-wrap,
.fww-hero-col > .elementor-column-wrap > .elementor-widget-wrap {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}
.fww-hero-col > .elementor-widget-wrap > .elementor-element,
.fww-hero-col > .elementor-column-wrap > .elementor-widget-wrap > .elementor-element {
  width: 100%;
}
/* Hero CTA row: both buttons same height, vertically aligned to each other. */
.fww-hero .elementor-widget-button {
  width: auto !important;
  align-self: center !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.fww-hero .elementor-button {
  height: var(--fww-tap) !important;
  min-height: var(--fww-tap) !important;
}
.fww-hero .fww-btn-primary { margin-right: 14px; }

/* Section titles ("FIND YOUR GEAR", etc.) - white, not the Elementor accent. */
.fww-sec-title .elementor-heading-title {
  color: #fff !important;
  font-family: var(--fww-font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.fww-why-section .fww-sec-title .elementor-heading-title,
.fww-sale-section .fww-sec-title .elementor-heading-title { color: #fff !important; }
/* White "Featured Boots" section: title is navy, not white-on-white. */
.fww-featured-section .fww-sec-title .elementor-heading-title { color: var(--fww-navy-mid) !important; }

/* Nav: concept marks the active page by color only - no underline pointer. */
.fww-header-sec .elementor-nav-menu .elementor-item::after,
.fww-header-sec .elementor-nav-menu .elementor-item::before { display: none !important; opacity: 0 !important; }

/* --- Hero copy as native Heading widgets --- */
.fww-hero-headline .elementor-heading-title {
  font-family: var(--fww-font-display);
  font-size: clamp(44px, 9vw, 82px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 1.0 !important;
  color: #fff;
}
/* Tight vertical rhythm to match the concept hero (single h1 with <br>).
   The two headline lines are separate widgets, so kill the inter-widget
   spacing and rebuild the exact margins the concept uses. */
.fww-eyebrow-pill { margin-bottom: 18px !important; }
.fww-hero-headline { margin-top: 0 !important; margin-bottom: 0 !important; }
.fww-hero-tagline { margin-top: 10px !important; margin-bottom: 32px !important; }
.fww-hero-tagline .elementor-heading-title {
  font-family: var(--fww-font-display);
  font-size: clamp(15px, 2.5vw, 20px);
  font-weight: 400;
  color: var(--fww-text-muted);
  letter-spacing: 4px;
  text-transform: uppercase;
  line-height: 1.2 !important;
}

/* --- Section eyebrow as a native Heading widget --- */
.fww-eyebrow-label .elementor-heading-title,
.section-eyebrow .elementor-heading-title {
  font-family: var(--fww-font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--fww-text-muted);
}
.fww-featured-section .fww-eyebrow-label .elementor-heading-title {
  color: var(--fww-navy-mid);
}

/* --- Hero pill eyebrow as a native Heading widget --- */
.fww-eyebrow-pill .elementor-heading-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--fww-navy-card);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--fww-radius);
  padding: 6px 18px;
  font-family: var(--fww-font-display);
  font-size: 12px;
  font-weight: 600;
  color: #FFFFFF;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* =============================================================
   SHOP BY JOB — section header + card grid (mockup layout)
   Cards rendered via [fww_job_cards] shortcode in functions.php
   ============================================================= */
/* Elementor flex container (614f1c8): e-con-inner defaults to height:100%
   which can collapse the grid and let the last card bleed into the next
   section on mobile. Force natural height and document flow. */
.fww-jobs-section.e-con,
.fww-jobs-section.e-con > .e-con-inner,
.fww-jobs-section > .elementor-container {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}
.fww-jobs-section.e-con > .e-con-inner {
  max-width: var(--fww-max-w) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  flex-grow: 0 !important;
  align-self: stretch !important;
}
.fww-jobs-section > .elementor-container {
  max-width: var(--fww-max-w) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.fww-jobs-section .elementor-widget-html {
  width: 100% !important;
  height: auto !important;
  flex: 0 0 auto !important;
  align-self: stretch !important;
}
.fww-jobs-section .fww-categories-header > .elementor-widget-wrap,
.fww-jobs-section .fww-categories-header > .elementor-element-populated {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  padding: 0 !important;
}
.fww-jobs-section .fww-eyebrow-label {
  margin-bottom: 10px !important;
}
.fww-jobs-section .fww-eyebrow-label .elementor-heading-title {
  font-size: 12px;
  letter-spacing: 3px;
  color: var(--fww-text-muted) !important;
}
.fww-jobs-section .fww-sec-title {
  margin: 0 !important;
}
.fww-jobs-section .fww-sec-title .elementor-heading-title {
  font-size: clamp(36px, 5vw, 52px) !important;
  line-height: 1.05 !important;
  letter-spacing: 0.5px !important;
  text-align: center !important;
}
.fww-jobs-section .fww-sec-subtitle {
  margin-top: 14px !important;
  margin-bottom: 44px !important;
}
.fww-jobs-section .fww-sec-subtitle p {
  font-size: 16px !important;
  line-height: 1.5 !important;
}

/* HTML widget wrapper for job cards shortcode */
.fww-jobs-section .elementor-widget-html .elementor-widget-container,
.fww-jobs-section .elementor-widget-html > .fww-job-cards {
  margin: 0 !important;
  padding: 0 !important;
  height: auto !important;
}

/* Card grid */
.fww-jobs-section .fww-job-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-flow: row;
  grid-auto-rows: auto;
  align-content: start;
  gap: 18px;
  width: 100%;
  max-width: var(--fww-max-w);
  margin: 0 auto;
  position: relative;
}

/* Single card */
.fww-jobs-section .fww-job-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: auto;
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: #152233;
  transition: transform 0.15s ease;
}
.fww-jobs-section .fww-job-card:hover {
  transform: translateY(-2px);
}

/* Image band — 3:2 photos, full frame, no crop (matches 1024×683 sources) */
.fww-jobs-section .fww-job-card__media {
  position: relative;
  aspect-ratio: 1024 / 683;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 16px 16px;
  box-sizing: border-box;
  background-color: #152233;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.fww-jobs-section .fww-job-card__media::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to top,
    rgba(14, 22, 36, 0.65) 0%,
    rgba(14, 22, 36, 0.12) 40%,
    transparent 70%
  );
  pointer-events: none;
}
.fww-jobs-section .fww-job-card__title {
  position: relative;
  z-index: 2;
  font-family: var(--fww-font-display);
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  line-height: 1.12;
  color: #fff;
  text-align: center;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  margin: 0;
  width: 100%;
}

/* White caption band (~20%) */
.fww-jobs-section .fww-job-card__caption {
  flex-shrink: 0;
  background: #fff;
  padding: 15px 12px;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.fww-jobs-section .fww-job-card__caption p {
  margin: 0;
  font-family: var(--fww-font-body);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--fww-navy-mid);
  text-align: center;
}

@media (max-width: 1024px) {
  .fww-jobs-section .fww-job-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .fww-jobs-section .fww-sec-subtitle {
    margin-bottom: 32px !important;
  }
}

@media (max-width: 767px) {
  .fww-jobs-section .fww-job-cards {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .fww-jobs-section .fww-job-card__title {
    font-size: 18px;
  }
}

/* Shop by Job section subtitle (shared). */
.fww-sec-subtitle,
.fww-sec-subtitle .elementor-widget-container,
.fww-sec-subtitle p {
  text-align: center !important;
}
.fww-sec-subtitle .elementor-widget-container {
  max-width: 560px;
  margin-left: auto !important;
  margin-right: auto !important;
}
.fww-sec-subtitle p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--fww-text-muted) !important;
  margin: 0 !important;
}
.fww-categories-header > .elementor-widget-wrap > .fww-sec-title,
.fww-categories-header > .elementor-element-populated > .fww-sec-title {
  margin-bottom: 0 !important;
}

/* --- Why cards as native Icon Box widgets --- */
.fww-why-iconbox {
  position: relative;
}
.fww-why-iconbox .fww-why-iconbox-hit {
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: var(--fww-radius-lg);
}
.fww-why-iconbox .elementor-icon-box-wrapper {
  background: var(--fww-navy-card);
  border: 1px solid var(--fww-border);
  border-radius: var(--fww-radius-lg);
  padding: 28px 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
  height: 100%;
  cursor: pointer;
}
.fww-why-iconbox .elementor-icon-box-wrapper::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--fww-red);
  transform: scaleX(0);
  transition: transform 0.25s ease;
  transform-origin: left;
}
.fww-why-iconbox:hover .elementor-icon-box-wrapper::before { transform: scaleX(1); }
.fww-why-iconbox .elementor-icon-box-icon { margin-bottom: 12px; }
.fww-why-iconbox .elementor-icon,
.fww-why-iconbox .elementor-icon i { color: var(--fww-red) !important; font-size: 40px !important; }
.fww-why-iconbox .elementor-icon-box-title,
.fww-why-iconbox .elementor-icon-box-title span,
.fww-why-iconbox .elementor-icon-box-title a {
  font-family: var(--fww-font-display) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px;
  color: var(--fww-text) !important;
  text-decoration: none !important;
  margin-bottom: 8px;
}
.fww-why-iconbox .elementor-icon-box-description {
  font-family: var(--fww-font-body) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--fww-text-muted) !important;
  line-height: 1.55;
}

/* =============================================================
   NAV MENU POINTER - force brand red (Elementor's global kit
   accent defaults to green, which leaked into the underline).
   ============================================================= */
.elementor-nav-menu .elementor-item::after,
.elementor-nav-menu .elementor-item::before,
.elementor-nav-menu--main .elementor-item::after,
.elementor-nav-menu--main .elementor-item::before {
  background-color: var(--fww-red) !important;
}
.elementor-nav-menu .elementor-item.elementor-item-active,
.elementor-nav-menu .elementor-item:hover {
  color: #fff !important;
}

/* =============================================================
   BRAND STRIP - label + pills inline on one centered row
   ============================================================= */
/* Label above logos so the logo grid can use full strip width. */
.fww-brand-row > .elementor-widget-wrap,
.fww-brand-row > .elementor-column-wrap > .elementor-widget-wrap {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.fww-brand-row > .elementor-widget-wrap > .elementor-element,
.fww-brand-row > .elementor-column-wrap > .elementor-widget-wrap > .elementor-element {
  width: 100% !important;
  margin-bottom: 0 !important;
}
.fww-brand-strip-label {
  text-align: center !important;
}
.fww-brand-strip-label .elementor-heading-title {
  padding-right: 0;
  text-align: center !important;
}
.fww-brand-row .elementor-widget-html,
.fww-brand-row .elementor-widget-html .elementor-widget-container {
  width: 100% !important;
}

/* =============================================================
   HEADER ACTIONS - Account + Cart utility icons (white line style)
   ============================================================= */
.fww-nav-actions > .elementor-widget-wrap,
.fww-nav-actions > .elementor-column-wrap > .elementor-widget-wrap {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}
.fww-nav-actions > .elementor-widget-wrap > .elementor-element,
.fww-nav-actions > .elementor-column-wrap > .elementor-widget-wrap > .elementor-element {
  width: auto;
  margin-bottom: 0 !important;
}

/* Hide the nav search magnifying glass for now (client request). */
.fww-nav-icon-btn { display: none !important; }

/* Shared Account / Cart utility control */
.fww-nav-actions .fww-nav-util,
.fww-nav-actions .elementor-menu-cart__toggle .elementor-button {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  min-width: 52px !important;
  min-height: 56px !important;
  padding: 4px 8px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
  color: rgba(255, 255, 255, 0.88) !important;
  transition: color 0.15s ease !important;
}
.fww-nav-actions .fww-nav-util:hover,
.fww-nav-actions .elementor-menu-cart__toggle .elementor-button:hover {
  color: #fff !important;
  background: transparent !important;
}

.fww-nav-actions .fww-nav-util__glyph {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 26px !important;
  height: 26px !important;
  line-height: 0 !important;
}
.fww-nav-actions .fww-nav-util__icon {
  width: 24px !important;
  height: 24px !important;
  display: block !important;
  color: currentColor !important;
  stroke: currentColor !important;
  fill: none !important;
}

.fww-nav-actions .fww-nav-util__label,
.fww-nav-actions .elementor-menu-cart__toggle .elementor-button::after {
  font-family: var(--fww-font-display) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  color: currentColor !important;
}

/* Account label is in the markup; Cart label via ::after */
.fww-nav-actions .elementor-menu-cart__toggle .elementor-button::after {
  content: "Cart";
  margin: 0 !important;
  order: 3;
}

/* Cart: hide price/subtotal text; keep icon + injected label */
.fww-nav-actions .elementor-menu-cart__subtotal,
.fww-nav-actions .elementor-menu-cart__toggle .elementor-button-text,
.fww-nav-actions .elementor-menu-cart__toggle .elementor-button .elementor-button-text {
  display: none !important;
}
.fww-nav-actions .elementor-menu-cart__toggle .elementor-button-icon {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 26px !important;
  height: 26px !important;
  margin: 0 !important;
  order: 1 !important;
  color: currentColor !important;
}
.fww-nav-actions .elementor-menu-cart__toggle .elementor-button-icon svg,
.fww-nav-actions .elementor-menu-cart__toggle .elementor-button-icon i {
  width: 24px !important;
  height: 24px !important;
  color: currentColor !important;
  fill: currentColor !important;
}
.fww-nav-actions .elementor-menu-cart__toggle .elementor-screen-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
}

/* Red count badge on cart icon */
.fww-nav-actions .elementor-menu-cart__toggle .elementor-button-icon-qty {
  position: absolute !important;
  top: -6px !important;
  right: -8px !important;
  min-width: 16px !important;
  height: 16px !important;
  padding: 0 4px !important;
  border-radius: 999px !important;
  background: var(--fww-red) !important;
  color: #fff !important;
  font-family: var(--fww-font-display) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  line-height: 16px !important;
  text-align: center !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.fww-nav-actions .elementor-menu-cart__toggle .elementor-button-icon-qty[data-counter="0"] {
  display: none !important;
}

/* =============================================================
   CART SLIDE-OUT PANEL (Elementor Menu Cart / WooCommerce mini-cart)
   The panel surface stays WHITE by request; every UI element inside
   follows the brand (navy ink, Oswald headings, red checkout). The
   site's global white text would be invisible here, so ink is locked.
   ============================================================= */
.elementor-menu-cart__main {
  --cart-ink: var(--fww-navy, #152233);
  --cart-muted: #5b6b7d;
  --cart-line: rgba(21, 34, 51, .12);
  background: #ffffff !important;
  color: var(--cart-ink) !important;
  font-family: var(--fww-font-body) !important;
}

/* Close (X) */
.elementor-menu-cart__close-button,
.elementor-menu-cart__close-button-custom {
  color: var(--fww-navy) !important;
}
.elementor-menu-cart__close-button:hover,
.elementor-menu-cart__close-button-custom:hover {
  color: var(--fww-red) !important;
}

/* Product rows */
.elementor-menu-cart__product {
  border-bottom: 1px solid var(--cart-line) !important;
}
.elementor-menu-cart__product-name a,
.elementor-menu-cart__product-name {
  font-family: var(--fww-font-display) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  letter-spacing: .3px !important;
  text-transform: uppercase !important;
  color: var(--fww-navy) !important;
}
.elementor-menu-cart__product-name a:hover {
  color: var(--fww-red) !important;
}

/* Remove item (x) */
.elementor-menu-cart__product a.remove,
.elementor-menu-cart__product .remove_from_cart_button,
.woocommerce-mini-cart-item a.remove {
  color: var(--cart-muted) !important;
  background: transparent !important;
}
.elementor-menu-cart__product a.remove:hover,
.elementor-menu-cart__product .remove_from_cart_button:hover,
.woocommerce-mini-cart-item a.remove:hover {
  color: var(--fww-red) !important;
  background: transparent !important;
}

/* Variation meta (Color / Size / Width) */
.elementor-menu-cart__product .variation,
.elementor-menu-cart__product .variation dt,
.elementor-menu-cart__product .variation dd {
  font-family: var(--fww-font-body) !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  color: var(--cart-muted) !important;
}
.elementor-menu-cart__product .variation dt { font-weight: 600 !important; }
.elementor-menu-cart__product .variation p { margin: 0 !important; }

/* Quantity / price */
.elementor-menu-cart__product-price,
.elementor-menu-cart__product-price .product-quantity,
.elementor-menu-cart__product .quantity {
  font-family: var(--fww-font-body) !important;
  font-weight: 600 !important;
  color: var(--fww-navy) !important;
}

/* Subtotal */
.elementor-menu-cart__subtotal,
.woocommerce-mini-cart__total {
  font-family: var(--fww-font-display) !important;
  font-weight: 600 !important;
  color: var(--fww-navy) !important;
  border-top: 1px solid var(--cart-line) !important;
}
.elementor-menu-cart__subtotal .woocommerce-Price-amount,
.woocommerce-mini-cart__total .woocommerce-Price-amount {
  color: var(--fww-navy) !important;
}

/* Footer buttons. They are .elementor-button, so they inherit the base
   Oswald/uppercase/radius rules; here we just set the brand colors:
   View Cart = navy outline (secondary), Checkout = red (primary). */
.elementor-menu-cart__footer-buttons a.elementor-button {
  letter-spacing: 1.5px !important;
  border-radius: var(--fww-radius) !important;
}
.elementor-menu-cart__footer-buttons a.elementor-button--view-cart {
  background: #ffffff !important;
  color: var(--fww-navy) !important;
  border: 1px solid var(--fww-navy) !important;
}
.elementor-menu-cart__footer-buttons a.elementor-button--view-cart:hover {
  background: var(--fww-navy) !important;
  border-color: var(--fww-navy) !important;
  color: #ffffff !important;
}
.elementor-menu-cart__footer-buttons a.elementor-button--checkout {
  background: var(--fww-red) !important;
  color: #ffffff !important;
  border: 1px solid var(--fww-red) !important;
}
.elementor-menu-cart__footer-buttons a.elementor-button--checkout:hover {
  background: var(--fww-red-hover) !important;
  border-color: var(--fww-red-hover) !important;
  color: #ffffff !important;
}

/* Empty-cart message */
.woocommerce-mini-cart__empty-message {
  font-family: var(--fww-font-body) !important;
  color: var(--cart-muted) !important;
}

/* Section eyebrows ("SHOP BY CATEGORY" etc.) - muted white, never accent. */
.fww-eyebrow-label .elementor-heading-title,
.section-eyebrow .elementor-heading-title {
  color: var(--fww-text-muted) !important;
}
.fww-featured-section .fww-eyebrow-label .elementor-heading-title {
  color: var(--fww-navy-mid) !important;
}

/* Bag icon spacing inside the primary hero button */
.fww-hero .elementor-button .elementor-button-icon { margin-right: 8px; }

/* =============================================================
   SINGLE PRODUCT TEMPLATE (matches concept-preview/product.html)
   Native Woo widgets + Variation Swatches plugin markup.
   ============================================================= */

/* White canvas + dark default text inside the single-product body */
.single-product .elementor-location-single { background: #ffffff; }
.single-product .elementor-location-single,
.single-product .elementor-location-single p,
.single-product .elementor-location-single li,
.single-product .elementor-location-single td {
  color: #111;
}
/* Default headings on the white canvas read dark (global theme makes them white) */
.single-product .elementor-location-single h1,
.single-product .elementor-location-single h2,
.single-product .elementor-location-single h3,
.single-product .elementor-location-single h4 {
  color: #111 !important;
}

/* Breadcrumb */
.fww-breadcrumb-sec .woocommerce-breadcrumb,
.fww-breadcrumb .woocommerce-breadcrumb {
  font-family: var(--fww-font-body) !important;
  font-size: 13px !important;
  color: #666 !important;
  margin: 0 !important;
}
.fww-breadcrumb-sec .woocommerce-breadcrumb a { color: #666 !important; }
.fww-breadcrumb-sec .woocommerce-breadcrumb a:hover { color: var(--fww-red) !important; }

/* Product main: align gallery + info, comfortable column gap */
.fww-product-main .elementor-container { align-items: flex-start !important; }

/* Brand eyebrow above the title */
.fww-brand-tag .elementor-heading-title {
  font-family: var(--fww-font-display) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: var(--fww-blue) !important;
}
.fww-brand-tag { margin-bottom: 2px !important; }
.fww-product-title { margin-bottom: 6px !important; }
.fww-product-title .product_title { line-height: 1.1 !important; margin: 0 !important; }

/* Rating: gold stars + muted count */
.fww-rating .star-rating { color: var(--fww-gold) !important; font-size: 18px !important; }
.fww-rating .star-rating span::before,
.fww-rating .star-rating::before { color: var(--fww-gold) !important; }
.fww-rating .woocommerce-review-link { color: #666 !important; font-size: 13px !important; }

/* Price row with rule lines, current bold + struck "was" */
.fww-price { padding: 16px 0 !important; border-top: 1px solid #eee; border-bottom: 1px solid #eee; }
.fww-price .price { font-family: var(--fww-font-display) !important; font-weight: 700 !important; color: #111 !important; font-size: 34px !important; line-height: 1 !important; }
.fww-price .price ins { text-decoration: none !important; color: #111 !important; }
.fww-price .price del { color: #999 !important; font-weight: 400 !important; font-size: 20px !important; opacity: 1 !important; margin-left: 6px; }

/* Variation rows: uppercase Oswald labels */
.fww-atc table.variations { border: none !important; margin: 0 0 16px !important; }
.fww-atc table.variations td { padding: 6px 0 !important; border: none !important; background: none !important; }
.fww-atc table.variations th.label label {
  font-family: var(--fww-font-display) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: #444 !important;
}
.fww-atc .reset_variations { font-size: 12px; color: var(--fww-red) !important; }

/* Color swatches = perfect circles (force square at every layer: li, contents, span) */
.woo-variation-swatches .variable-items-wrapper .color-variable-item {
  width: 40px !important; height: 40px !important; min-width: 40px !important;
  border: 3px solid transparent !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  outline: 2px solid transparent;
  outline-offset: 2px;
  padding: 0 !important;
  margin: 0 10px 6px 0 !important;
  overflow: hidden;
  transition: outline-color .15s;
}
.woo-variation-swatches .variable-items-wrapper .color-variable-item .variable-item-contents,
.woo-variation-swatches .variable-items-wrapper .color-variable-item .variable-item-span,
.woo-variation-swatches .variable-items-wrapper .color-variable-item .variable-item-span-color {
  width: 100% !important; height: 100% !important;
  min-width: 0 !important;
  border-radius: 50% !important;
  display: block !important;
  margin: 0 !important;
}
.woo-variation-swatches .variable-items-wrapper .color-variable-item:hover { outline-color: #aaa !important; }
.woo-variation-swatches .variable-items-wrapper .color-variable-item.selected { outline-color: var(--fww-red) !important; border-color: #fff !important; }

/* Size + Width swatches = button grid */
.woo-variation-swatches .variable-items-wrapper .button-variable-item {
  min-width: 56px !important; height: 48px !important;
  margin: 0 8px 8px 0 !important;
  border: 2px solid #ddd !important;
  border-radius: var(--fww-radius) !important;
  background: #fff !important;
  box-shadow: none !important;
  padding: 0 !important;
  transition: all .15s;
}
.woo-variation-swatches .variable-items-wrapper .button-variable-item .variable-item-span {
  font-family: var(--fww-font-display) !important;
  font-size: 15px !important; font-weight: 600 !important;
  color: #444 !important; padding: 0 12px !important; line-height: 44px !important;
}
.woo-variation-swatches .variable-items-wrapper .button-variable-item:hover { border-color: #999 !important; }
.woo-variation-swatches .variable-items-wrapper .button-variable-item:hover .variable-item-span { color: #111 !important; }
.woo-variation-swatches .variable-items-wrapper .button-variable-item.selected { background: var(--fww-navy) !important; border-color: var(--fww-navy) !important; }
.woo-variation-swatches .variable-items-wrapper .button-variable-item.selected .variable-item-span { color: #fff !important; }
.woo-variation-swatches .variable-items-wrapper li.disabled,
.woo-variation-swatches .variable-items-wrapper li.button-variable-item.disabled {
  opacity: .35 !important; cursor: not-allowed !important;
}
.woo-variation-swatches .variable-items-wrapper li.button-variable-item.disabled .variable-item-span { text-decoration: line-through !important; }

/* Add-to-cart row: qty + button side by side */
.fww-atc .quantity { margin-right: 12px !important; }
.fww-atc .woocommerce-variation-add-to-cart { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 12px; }
.fww-atc .woocommerce-variation-add-to-cart .button { flex: 1 1 auto !important; }

/* Trust badges: inline, red checks, small dark text */
.fww-trust .elementor-icon-list-items { display: flex !important; flex-wrap: wrap !important; gap: 8px 18px !important; margin-top: 4px; }
.fww-trust .elementor-icon-list-item { margin: 0 !important; padding: 0 !important; }
.fww-trust .elementor-icon-list-text { color: #555 !important; font-size: 12px !important; font-weight: 600 !important; }
.fww-trust .elementor-icon-list-icon { color: var(--fww-red) !important; }
.fww-trust .elementor-icon-list-icon svg, .fww-trust .elementor-icon-list-icon i { fill: var(--fww-red) !important; color: var(--fww-red) !important; }

/* Tabs - navigation hidden (only description content remains) */
.woocommerce div.product .woocommerce-tabs ul.tabs,
.fww-tabs .woocommerce-tabs ul.tabs { display: none !important; }
.fww-tabs .woocommerce-Tabs-panel p, .fww-tabs .woocommerce-Tabs-panel li { color: #555 !important; line-height: 1.75 !important; }
.fww-tabs table.shop_attributes td, .fww-tabs table.shop_attributes th { color: #444 !important; }
.fww-tabs table.shop_attributes th { font-weight: 700 !important; color: #111 !important; }

/* Promo band - .single-product prefix keeps these above the white-canvas heading rule */
.fww-promo { position: relative; overflow: hidden; }
.fww-promo::before {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(-55deg, transparent, transparent 18px, rgba(255,255,255,0.03) 18px, rgba(255,255,255,0.03) 19px);
  pointer-events: none;
}
.fww-promo > .elementor-container { position: relative; z-index: 1; align-items: center !important; display: flex !important; }
.fww-promo .elementor-element { z-index: 1; }
.fww-promo .fww-promo-right { display: flex !important; align-items: center !important; }
.single-product .fww-promo .fww-promo-eyebrow .elementor-heading-title {
  font-family: var(--fww-font-display) !important;
  font-size: 11px !important; font-weight: 600 !important;
  letter-spacing: 3px !important; text-transform: uppercase !important;
  color: rgba(255,255,255,0.5) !important;
}
.single-product .fww-promo .fww-promo-headline .elementor-heading-title {
  font-family: var(--fww-font-display) !important;
  font-size: clamp(28px, 4vw, 44px) !important; font-weight: 700 !important;
  text-transform: uppercase !important; line-height: 1.05 !important;
  color: #ffffff !important; margin: 6px 0 10px !important;
}
.single-product .fww-promo .fww-promo-headline .fww-promo-accent { color: var(--fww-red) !important; }
.single-product .fww-promo .fww-promo-sub p,
.single-product .fww-promo .fww-promo-sub { color: rgba(255,255,255,0.65) !important; font-size: 15px !important; margin: 0 !important; }

/* Right column: code + button on one row, expires note beneath */
.fww-promo .fww-promo-right > .elementor-widget-wrap,
.fww-promo .fww-promo-right > .elementor-element-populated > .elementor-widget-wrap {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  height: 100% !important;
  align-content: center !important;
}
.fww-promo .fww-promo-right .fww-promo-code,
.fww-promo .fww-promo-right .fww-promo-btn { width: auto !important; flex: 0 0 auto !important; }
.fww-promo .fww-promo-right .fww-promo-expires { flex: 0 0 100% !important; width: 100% !important; }

.single-product .fww-promo .fww-promo-code .elementor-heading-title {
  display: inline-block !important;
  background: rgba(255,255,255,0.08) !important;
  border: 2px dashed rgba(255,255,255,0.25) !important;
  border-radius: var(--fww-radius) !important;
  padding: 12px 24px !important;
  font-family: var(--fww-font-display) !important;
  font-size: 22px !important; font-weight: 700 !important;
  letter-spacing: 4px !important; color: #fff !important;
}
.fww-promo .fww-promo-btn .elementor-button {
  background: var(--fww-red) !important; color: #fff !important;
  font-family: var(--fww-font-display) !important;
  font-size: 17px !important; font-weight: 700 !important;
  letter-spacing: 2px !important; text-transform: uppercase !important;
  min-height: var(--fww-tap) !important; border-radius: var(--fww-radius) !important;
  padding: 0 32px !important;
}
.fww-promo .fww-promo-btn .elementor-button:hover { background: var(--fww-red-hover) !important; }
.single-product .fww-promo .fww-promo-expires p,
.single-product .fww-promo .fww-promo-expires { color: rgba(255,255,255,0.4) !important; font-size: 12px !important; letter-spacing: 1px !important; margin: 0 !important; }

/* Related products heading */
.fww-related-title .elementor-heading-title {
  font-family: var(--fww-font-display) !important;
  font-size: clamp(24px, 4vw, 36px) !important; font-weight: 700 !important;
  text-transform: uppercase !important; letter-spacing: 1px !important;
  color: #111 !important; margin-bottom: 24px !important;
}
.fww-related-sec { background: #ffffff !important; }

/* About page Vimeo embed (matches production landing rounded player) */
.fww-video-wrapper {
  position: relative;
  max-width: 900px;
  margin: 28px auto;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  background: #000;
}
.fww-video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
}
.fww-video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
@media (max-width: 767px) {
  .fww-video-wrapper {
    border-radius: 8px;
  }
}

/* =============================================================
   CART PAGE (WooCommerce Cart Block) - white workspace
   Header stays navy. Page body is light via body.fww-interior.
   ============================================================= */
body.woocommerce-cart .site-main,
body.woocommerce-cart .entry-content,
body.woocommerce-cart .wp-block-woocommerce-cart {
  background: #ffffff !important;
  color: var(--fww-navy) !important;
}

body.woocommerce-cart .wp-block-woocommerce-cart {
  --cart-ink: var(--fww-navy, #152233);
  --cart-muted: #5b6b7d;
  --cart-line: rgba(21, 34, 51, 0.12);
  --cart-panel: #f6f8fa;
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(28px, 4vw, 56px) 20px clamp(48px, 6vw, 80px) !important;
}

/* Kill Woo empty-cart sad-face icon treatment */
body.woocommerce-cart .with-empty-cart-icon::before,
body.woocommerce-cart .wc-block-cart__empty-cart__title::before,
body.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title::before {
  content: none !important;
  display: none !important;
}

/* ----- Empty cart ----- */
body.woocommerce-cart .wp-block-woocommerce-empty-cart-block {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  min-height: 42vh;
  padding: 48px 20px !important;
  gap: 12px;
}

body.woocommerce-cart .fww-empty-cart-title,
body.woocommerce-cart .wp-block-woocommerce-empty-cart-block h2 {
  font-family: var(--fww-font-display) !important;
  font-size: clamp(28px, 4vw, 40px) !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: var(--fww-navy) !important;
  margin: 0 0 8px !important;
}

body.woocommerce-cart .fww-empty-cart-copy {
  font-family: var(--fww-font-body) !important;
  font-size: 16px !important;
  color: var(--cart-muted) !important;
  margin: 0 0 20px !important;
  max-width: 36ch;
}

body.woocommerce-cart .fww-empty-cart-cta .wp-block-button__link,
body.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wp-block-button__link {
  font-family: var(--fww-font-display) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  background: var(--fww-red) !important;
  color: #ffffff !important;
  border: 1px solid var(--fww-red) !important;
  border-radius: var(--fww-radius) !important;
  padding: 14px 28px !important;
  text-decoration: none !important;
}

body.woocommerce-cart .fww-empty-cart-cta .wp-block-button__link:hover,
body.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wp-block-button__link:hover {
  background: var(--fww-red-hover) !important;
  border-color: var(--fww-red-hover) !important;
  color: #ffffff !important;
}

/* ----- Filled cart: typography / ink ----- */
body.woocommerce-cart .wp-block-woocommerce-cart a {
  color: var(--fww-navy);
}
body.woocommerce-cart .wp-block-woocommerce-cart a:hover {
  color: var(--fww-red);
}

body.woocommerce-cart .wc-block-cart-items,
body.woocommerce-cart .wc-block-cart-items th,
body.woocommerce-cart .wc-block-cart-items td,
body.woocommerce-cart .wc-block-components-product-name,
body.woocommerce-cart .wc-block-components-product-price,
body.woocommerce-cart .wc-block-components-product-metadata,
body.woocommerce-cart .wc-block-components-totals-item,
body.woocommerce-cart .wc-block-components-totals-item__label,
body.woocommerce-cart .wc-block-components-totals-item__value,
body.woocommerce-cart .wc-block-components-product-details__name,
body.woocommerce-cart .wc-block-components-product-details__value {
  color: var(--fww-navy) !important;
  border-color: var(--cart-line) !important;
}

body.woocommerce-cart .wc-block-components-product-name {
  font-family: var(--fww-font-display) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
  text-decoration: none !important;
}

body.woocommerce-cart .wc-block-components-product-metadata,
body.woocommerce-cart .wc-block-components-product-details {
  color: var(--cart-muted) !important;
  font-size: 13px !important;
}

body.woocommerce-cart .wc-block-cart-items__header,
body.woocommerce-cart .wc-block-cart-items__row {
  border-bottom: 1px solid var(--cart-line) !important;
}

/* Quantity steppers */
body.woocommerce-cart .wc-block-components-quantity-selector {
  border: 1px solid var(--cart-line) !important;
  border-radius: var(--fww-radius) !important;
  background: #fff !important;
  overflow: hidden;
}
body.woocommerce-cart .wc-block-components-quantity-selector__button,
body.woocommerce-cart .wc-block-components-quantity-selector__input {
  color: var(--fww-navy) !important;
  background: #fff !important;
  border: 0 !important;
  font-weight: 600 !important;
}
body.woocommerce-cart .wc-block-components-quantity-selector__button:hover {
  background: var(--cart-panel) !important;
  color: var(--fww-red) !important;
}

/* Remove item */
body.woocommerce-cart .wc-block-cart-item__remove-link {
  color: var(--cart-muted) !important;
  text-decoration: none !important;
  font-size: 13px !important;
}
body.woocommerce-cart .wc-block-cart-item__remove-link:hover {
  color: var(--fww-red) !important;
}

/* Totals panel */
body.woocommerce-cart .wp-block-woocommerce-cart-totals-block,
body.woocommerce-cart .wc-block-cart__sidebar {
  background: var(--cart-panel) !important;
  border: 1px solid var(--cart-line) !important;
  border-radius: var(--fww-radius-lg) !important;
  padding: 20px !important;
}

body.woocommerce-cart .wc-block-cart__totals-title,
body.woocommerce-cart .wp-block-woocommerce-cart-order-summary-heading-block,
body.woocommerce-cart .wc-block-components-totals-wrapper {
  color: var(--fww-navy) !important;
  font-family: var(--fww-font-display) !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
}

body.woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
body.woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-family: var(--fww-font-display) !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: var(--fww-navy) !important;
}

/* Coupon */
body.woocommerce-cart .wc-block-components-totals-coupon__button,
body.woocommerce-cart .wc-block-components-panel__button {
  color: var(--fww-navy) !important;
}
body.woocommerce-cart .wc-block-components-text-input input,
body.woocommerce-cart .wc-block-components-totals-coupon__form input {
  border: 1px solid var(--cart-line) !important;
  border-radius: var(--fww-radius) !important;
  color: var(--fww-navy) !important;
  background: #fff !important;
}

/* Express pay breathing room */
body.woocommerce-cart .wp-block-woocommerce-cart-express-payment-block,
body.woocommerce-cart .wc-block-components-express-payment {
  margin: 16px 0 !important;
}

/* Proceed to checkout - brand primary */
body.woocommerce-cart .wc-block-cart__submit-button,
body.woocommerce-cart .wp-block-woocommerce-proceed-to-checkout-block .wc-block-components-button,
body.woocommerce-cart a.wc-block-components-checkout-button,
body.woocommerce-cart .wc-block-components-checkout-place-order-button {
  font-family: var(--fww-font-display) !important;
  font-weight: 600 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  background: var(--fww-red) !important;
  color: #ffffff !important;
  border: 1px solid var(--fww-red) !important;
  border-radius: var(--fww-radius) !important;
  min-height: 52px !important;
  width: 100% !important;
  justify-content: center !important;
}

body.woocommerce-cart .wc-block-cart__submit-button:hover,
body.woocommerce-cart .wp-block-woocommerce-proceed-to-checkout-block .wc-block-components-button:hover,
body.woocommerce-cart a.wc-block-components-checkout-button:hover {
  background: var(--fww-red-hover) !important;
  border-color: var(--fww-red-hover) !important;
  color: #ffffff !important;
}

/* Checkout page: same white workspace baseline */
body.woocommerce-checkout .site-main,
body.woocommerce-checkout .entry-content {
  background: #ffffff !important;
  color: var(--fww-navy) !important;
}
body.woocommerce-checkout .site-main {
  padding: clamp(28px, 4vw, 56px) 20px clamp(48px, 6vw, 80px);
}

/* ----- Checkout/cart blocks: floating-label fields ----- */
/* The global input rules force `padding: 0 14px`, which makes the
   floating label overlap the typed value. Restore Woo blocks' own
   metrics (16px 12px resting, 24px 9px 8px once the label floats);
   these win over the globals via higher specificity. */
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="password"],
.wc-block-components-text-input input[type="number"],
.wc-block-components-text-input input[type="url"] {
  padding: 16px 12px !important;
  min-height: 50px !important;
  color: var(--fww-navy) !important;
}
.wc-block-components-text-input.is-active input[type="text"],
.wc-block-components-text-input.is-active input[type="email"],
.wc-block-components-text-input.is-active input[type="tel"],
.wc-block-components-text-input.is-active input[type="password"],
.wc-block-components-text-input.is-active input[type="number"],
.wc-block-components-text-input.is-active input[type="url"] {
  padding: 24px 9px 8px !important;
}
.wc-blocks-components-select .wc-blocks-components-select__select {
  padding: 16px 9px 0 !important;
  min-height: 50px !important;
  color: var(--fww-navy) !important;
}

/* ----- Checkout/cart blocks: primary buttons (Place Order, coupon
   Apply) - brand red instead of the block theme default ----- */
body.woocommerce-checkout .wc-block-components-button.contained,
body.woocommerce-checkout .wc-block-components-totals-coupon__button,
body.woocommerce-cart .wc-block-components-totals-coupon__button {
  font-family: var(--fww-font-display) !important;
  font-weight: 600 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  background: var(--fww-red) !important;
  color: #ffffff !important;
  border: 1px solid var(--fww-red) !important;
  border-radius: var(--fww-radius) !important;
  transition: background 0.15s !important;
}
body.woocommerce-checkout .wc-block-components-button.contained:hover,
body.woocommerce-checkout .wc-block-components-button.contained:focus,
body.woocommerce-checkout .wc-block-components-totals-coupon__button:hover,
body.woocommerce-checkout .wc-block-components-totals-coupon__button:focus,
body.woocommerce-cart .wc-block-components-totals-coupon__button:hover,
body.woocommerce-cart .wc-block-components-totals-coupon__button:focus {
  background: var(--fww-red-hover) !important;
  border-color: var(--fww-red-hover) !important;
  color: #ffffff !important;
}

/* =============================================================
   MY ACCOUNT AREA
   White interior page (body.fww-account also carries .fww-interior
   for the base white bg + dark text). Tames the global display
   heading sizes and styles the WooCommerce account nav/content.
   ============================================================= */

/* Breathing room below the fixed header and above the footer */
body.fww-account .site-main,
body.fww-account main {
  padding: 56px 20px 88px;
}

body.fww-account .woocommerce {
  max-width: var(--fww-max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

/* The shortcode's first child is a (usually empty) notices wrapper; span it
   across both columns so the nav + content pair stays side by side. */
body.fww-account .woocommerce > .woocommerce-notices-wrapper {
  grid-column: 1 / -1;
}

body.fww-account .woocommerce > .woocommerce-notices-wrapper:empty {
  display: none;
}

body.fww-account .woocommerce-MyAccount-navigation {
  grid-column: 1;
}

body.fww-account .woocommerce-MyAccount-content {
  grid-column: 2;
}

/* Neutralize WooCommerce's float layout (30% / 68% widths) inside the grid */
body.fww-account .woocommerce-MyAccount-navigation,
body.fww-account .woocommerce-MyAccount-content {
  width: 100%;
  float: none;
}

/* When logged out the page is just the login form: single column */
body.fww-account .woocommerce:not(:has(.woocommerce-MyAccount-navigation)) {
  display: block;
  max-width: 520px;
}

/* ---------- Account navigation ---------- */
body.fww-account .woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid #e3e7ec;
  border-radius: var(--fww-radius);
  overflow: hidden;
  background: #f7f8fa;
}

body.fww-account .woocommerce-MyAccount-navigation li {
  margin: 0;
  border-bottom: 1px solid #e3e7ec;
}

body.fww-account .woocommerce-MyAccount-navigation li:last-child {
  border-bottom: 0;
}

body.fww-account .woocommerce-MyAccount-navigation a {
  display: block;
  padding: 13px 18px;
  font-family: var(--fww-font-display);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--fww-navy);
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}

body.fww-account .woocommerce-MyAccount-navigation a:hover {
  background: #eef1f5;
  color: var(--fww-red);
}

body.fww-account .woocommerce-MyAccount-navigation li.is-active a {
  background: var(--fww-navy);
  color: #fff;
  box-shadow: inset 3px 0 0 var(--fww-red);
}

/* ---------- Content column ---------- */
body.fww-account .woocommerce-MyAccount-content {
  font-size: 15px;
  color: #33404e;
}

body.fww-account .woocommerce-MyAccount-content p {
  color: #33404e;
}

body.fww-account .woocommerce-MyAccount-content a {
  color: var(--fww-red);
}

body.fww-account .woocommerce-MyAccount-content a:hover {
  color: var(--fww-red-hover);
}

/* Tame the display-size headings (e.g. Billing / Shipping Address) */
body.fww-account .woocommerce h2,
body.fww-account .woocommerce h3,
body.fww-account .woocommerce legend {
  font-size: 20px;
  letter-spacing: .5px;
  color: var(--fww-navy);
  margin: 0 0 14px;
}

body.fww-account .woocommerce-Addresses {
  width: 100%;
}

body.fww-account .woocommerce-Address-title {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 8px;
}

body.fww-account .woocommerce-Address-title h2 {
  margin: 0;
}

body.fww-account .woocommerce-Address-title .edit {
  font-size: 13px;
  white-space: nowrap;
}

body.fww-account address {
  font-style: normal;
  color: #33404e;
  line-height: 1.7;
}

/* ---------- Buttons ---------- */
body.fww-account .woocommerce a.button,
body.fww-account .woocommerce button.button,
body.fww-account .woocommerce input[type="submit"],
body.fww-account .woocommerce .woocommerce-Button {
  background: var(--fww-red);
  color: #fff;
  border: 0;
  border-radius: 6px;
  padding: 11px 22px;
  font-family: var(--fww-font-display);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s ease;
}

body.fww-account .woocommerce a.button:hover,
body.fww-account .woocommerce button.button:hover,
body.fww-account .woocommerce input[type="submit"]:hover,
body.fww-account .woocommerce .woocommerce-Button:hover {
  background: var(--fww-red-hover);
  color: #fff;
}

/* ---------- Forms (account details, address edit, login) ---------- */
body.fww-account .woocommerce input.input-text,
body.fww-account .woocommerce select,
body.fww-account .woocommerce textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ccd3db;
  border-radius: 6px;
  font-family: var(--fww-font-body);
  font-size: 15px;
  color: #111;
  background: #fff;
  box-sizing: border-box;
}

body.fww-account .woocommerce input.input-text:focus,
body.fww-account .woocommerce select:focus,
body.fww-account .woocommerce textarea:focus {
  outline: 2px solid var(--fww-navy-light);
  outline-offset: 0;
  border-color: var(--fww-navy-light);
}

body.fww-account .woocommerce form .form-row label {
  color: var(--fww-navy);
  font-weight: 600;
  font-size: 14px;
}

/* ---------- Orders table ---------- */
body.fww-account table.woocommerce-orders-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

body.fww-account table.woocommerce-orders-table th,
body.fww-account table.woocommerce-orders-table td {
  padding: 12px 14px;
  border-bottom: 1px solid #e3e7ec;
  text-align: left;
  color: #33404e;
}

body.fww-account table.woocommerce-orders-table thead th {
  font-family: var(--fww-font-display);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 13px;
  color: var(--fww-navy);
  border-bottom: 2px solid var(--fww-navy);
}

/* ---------- Notices on white ---------- */
body.fww-account .woocommerce-message,
body.fww-account .woocommerce-info,
body.fww-account .woocommerce-error {
  background: #f7f8fa;
  border: 1px solid #e3e7ec;
  border-left: 4px solid var(--fww-navy);
  border-radius: 6px;
  color: #33404e;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: space-between;
  flex-wrap: wrap;
}

body.fww-account .woocommerce-error {
  border-left-color: var(--fww-red);
}

/* ---------- Mobile ---------- */
@media (max-width: 782px) {
  body.fww-account .woocommerce {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  body.fww-account .woocommerce-MyAccount-navigation,
  body.fww-account .woocommerce-MyAccount-content {
    grid-column: 1;
  }

  body.fww-account .site-main,
  body.fww-account main {
    padding: 32px 16px 56px;
  }
}

/* =============================================================
   SHOP LISTING PAGES (Shop All / Men / Women)
   Elementor atomic flexbox (.e-0e7e837) sets max-width:1200px but
   does not set margin-inline:auto, so on wide viewports the grid
   pins left. Hero title container also ships with 0 horizontal
   padding. Force a centered column + matching header inset.
   ============================================================= */
body.page-id-18713 .e-0e7e837,
body.page-id-18721 .e-0e7e837,
body.page-id-18727 .e-0e7e837 {
  max-width: var(--fww-max-w) !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box;
  padding-left: 20px !important;
  padding-right: 20px !important;
}

body.page-id-18713 .elementor-element-2259f8c > .e-con-inner,
body.page-id-18721 .elementor-element-2259f8c > .e-con-inner,
body.page-id-18727 .elementor-element-2259f8c > .e-con-inner {
  max-width: var(--fww-max-w) !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  box-sizing: border-box;
}

body.page-id-18713 .elementor-element-2259f8c .elementor-heading-title,
body.page-id-18721 .elementor-element-2259f8c .elementor-heading-title,
body.page-id-18727 .elementor-element-2259f8c .elementor-heading-title {
  font-family: var(--fww-font-display) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  color: #fff !important;
}

/* Men / Women heroes were saved without the Shop All banner image.
   Apply the same cover treatment so the page header matches. */
body.page-id-18721 .elementor-element-2259f8c,
body.page-id-18727 .elementor-element-2259f8c {
  background-color: #0d1520 !important;
  background-image:
    linear-gradient(124deg, rgba(0, 0, 0, 0.79) 18%, rgba(0, 0, 0, 0.49) 80%),
    url("/wp-content/uploads/2026/07/shop-header.jpg") !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

/* Avoid double horizontal inset: parent flexbox now owns the 20px pad. */
body.page-id-18713 .e-0e7e837 .ldby-pf,
body.page-id-18721 .e-0e7e837 .ldby-pf,
body.page-id-18727 .e-0e7e837 .ldby-pf {
  padding-left: 0;
  padding-right: 0;
  max-width: none;
}