/*
 * WooCommerce Theme Styles — Absolute 3D
 * Scoped to .woocommerce, .woocommerce-page, .woo-* only — does NOT affect static pages.
 *
 * ─── EDIT COLOURS HERE ───────────────────────────────────────────────────────
 */

/* WooCommerce icon font — required for star ratings (p.stars) and .star-rating spans.
   woocommerce_enqueue_styles is cleared in woo-functions.php so we declare it here. */
@font-face {
  font-family: WooCommerce;
  src:
    url("../../../plugins/woocommerce/assets/fonts/WooCommerce.woff2")
      format("woff2"),
    url("../../../plugins/woocommerce/assets/fonts/WooCommerce.woff")
      format("woff"),
    url("../../../plugins/woocommerce/assets/fonts/WooCommerce.ttf")
      format("truetype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: star;
  src:
    url("../../../plugins/woocommerce/assets/fonts/WooCommerce.woff2")
      format("woff2"),
    url("../../../plugins/woocommerce/assets/fonts/WooCommerce.woff")
      format("woff"),
    url("../../../plugins/woocommerce/assets/fonts/WooCommerce.ttf")
      format("truetype");
  font-weight: 400;
  font-style: normal;
}
:root {
  --woo-primary: #e4491d; /* brand orange — buttons, accents, links    */
  --woo-primary-dark: #c73d18; /* darker orange for active/focus states     */
  --woo-bg: #ffffff; /* main content area background              */
  --woo-card-bg: #f8f8f8; /* cards, sidebars, checkout sections        */
  --woo-card-bg-alt: #f2f2f2; /* table headers, payment box, cart header   */
  --woo-image-bg: transparent; /* product image placeholder background    */
  --woo-border: #e5e5e5; /* section/table borders                     */
  --woo-border-mid: #dddddd; /* input & widget borders                    */
  --woo-heading: #202020; /* h1-h4, strong labels, cart totals         */
  --woo-text: #555555; /* body paragraphs, table cell text          */
  --woo-text-mid: #444444; /* form labels                               */
  --woo-text-muted: #666666; /* meta, review links, muted info            */
  --woo-text-dark: #333333; /* base font inside WC context               */
  --woo-white: #ffffff; /* text on coloured/dark surfaces (buttons)  */
  --woo-hero-bg: var(
    --mainbg,
    #323232
  ); /* breadcrumb banner bg (uses theme var) */
  --woo-hero-text: #ffffff; /* text colour on the dark hero banner       */
  --woo-hero-border: #3a3a3a; /* hero bottom border                        */
  --woo-success: #4caf50; /* stock in-stock, thank-you message         */
  --woo-error: #da0030; /* error notices, out-of-stock               */
}
.chr_content {
  background: none;
}
/* ─────────────────────────────────────────────────────────────────────────── */

/* =========================================================
   SERVICE HEADER — WooCommerce page override
   Transparent over the dark hero banner; darkens on hover or scroll
   (.header-dark class toggled by chr_woo_header_scroll_js in woo-functions.php).
   ========================================================= */

.woocommerce header,
.woocommerce-page header {
  background-color: transparent;
  transition: background-color 0.3s ease;
}

/* Sticky scroll state — needs higher specificity than the transparent rule above */
.woocommerce header.header-sticky,
.woocommerce-page header.header-sticky {
  background-color: #323232;
}

/* Nav links inside the service header on WC pages.
   .woocommerce a { color: var(--woo-primary) } (line 2713) has higher specificity
   than .nav-link { color: #fff } from service-style.css, turning all nav text orange.
   Restore white and keep the orange hover from service-style.css. */
.woocommerce header .nav-link,
.woocommerce-page header .nav-link {
  color: #ffffff !important;
}
.woocommerce header .nav-link:hover,
.woocommerce-page header .nav-link:hover {
  color: var(--woo-primary) !important;
}
/* Contact button: .theme-btn on the <li> provides the orange background.
   Explicitly re-state every property so nothing from woocommerce-style.css
   can inadvertently strip padding/background from the nav <li>. */
.woocommerce header .theme-btn,
.woocommerce-page header .theme-btn {
  background-color: #e4491d !important;
  border: 1px solid #e4491d !important;
  padding: 11px 20px !important;
  display: inline-block !important;
}
.woocommerce header .theme-btn:hover,
.woocommerce-page header .theme-btn:hover {
  background-color: #ffffff !important;
  border-color: #ffffff !important;
}
/* nav-link inside contact button stays white (orange bg); orange on hover (white bg) */
.woocommerce header .contact-btn .nav-link,
.woocommerce-page header .contact-btn .nav-link {
  color: #ffffff !important;
  padding: 0 !important;
}
.woocommerce header .contact-btn:hover .nav-link,
.woocommerce-page header .contact-btn:hover .nav-link {
  color: #e4491d !important;
}

/* =========================================================
   RESET / BASE
   ========================================================= */

.woocommerce,
.woocommerce-page {
  color: var(--woo-text-dark);
  font-family: "Lato", sans-serif;
  font-size: 16px;
  line-height: 26px;
  background-color: var(--woo-bg);
}

/* =========================================================
   KILL THEME editorstyles.scss OVERRIDES ON ALL WC LIST ITEMS
   editorstyles.scss:197 applies .chr_content ul li {
       padding-left: 45px; margin-bottom: 20px; position: relative; }
   and ::before with bullet.svg — override both to zero on WC pages.
   ========================================================= */

/* 1. Reset the li element itself
   Intentionally excludes header ul li — the service header's .theme-btn/.contact-btn
   <li> elements need their own padding and background preserved. */
.woo-products-grid li,
ul.products li,
.woo-product-card,
.woo-filter-cats li,
.woo-filter-block ul li,
.woocommerce-pagination ul li,
.woo-page-wrapper ul li,
.woocommerce .woo-shop-row ul li,
.woocommerce-page .woo-shop-row ul li,
.woocommerce main ul li,
.woocommerce-page main ul li,
.woocommerce .chr_content ul li,
.woocommerce-page .chr_content ul li {
  padding-left: 0 !important;
  margin-bottom: 0 !important;
  position: relative !important; /* keep for badge/absolute children */
  list-style: none !important;
}

/* 2. Kill the ::before bullet icon */
.woo-page-wrapper ul li::before,
.woo-shop-hero ul li::before,
.woo-filter-cats li::before,
.woo-filter-block ul li::before,
.woo-products-grid li::before,
.products li::before,
.woocommerce-pagination ul li::before,
.woocommerce ul.products li::before,
.woocommerce-checkout ul li::before,
.woocommerce-cart ul li::before,
.woocommerce-account ul li::before {
  display: none !important;
  content: none !important;
  background-image: none !important;
  width: 0 !important;
  height: 0 !important;
  position: static !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* =========================================================
   SHOP HERO BANNER
   ========================================================= */

.woo-shop-hero {
  background-color: #e4491d0d !important; /* brand orange ~5% opacity */
  /*
   * Fixed service header height = padding-top(12) + logo(40) + padding-bottom(12) = 64px
   * Breathing room above text = 20px
   * padding-top  = 64 + 20 = 84px  (non-logged-in visitors)
   * padding-bottom = 20px (equal breathing room below text)
   * min-height = header(64) + gap-top(20) + typical-row(40) + gap-bottom(20) = 144px
   * Flexbox vertically centres the row within the remaining space.
   */
  display: flex;
  align-items: center;
  min-height: 144px;
  padding: 100px 0 20px;
  border: none;
  outline: none;
}

/* Logged-in users see the WP admin bar (32 px) which pushes the fixed
   header down, so we add those 32 px to keep the hero content clear. */
.logged-in .woo-shop-hero {
  padding-top: 116px; /* 32 (admin bar) + 64 (header) + 20 (gap) */
}

/* Title LEFT — breadcrumb RIGHT, vertically centred */
.woo-hero-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.woo-hero-title-area {
  flex: 1;
  text-align: left;
}

.woo-hero-breadcrumb-area {
  flex-shrink: 0;
  text-align: right;
  padding-bottom: 0;
}

/* Title */
.woo-shop-hero__title {
  color: var(--woo-heading) !important;
  font-family: "Lato", sans-serif !important;
  font-size: 32px !important;
  font-weight: 900 !important;
  text-transform: capitalize !important;
  letter-spacing: 0.02em;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.15;
}

@media (max-width: 767px) {
  .woo-shop-hero {
    padding: 70px 0 20px;
    min-height: 100px;
  }
  .woo-hero-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .woo-hero-breadcrumb-area {
    text-align: left;
  }
  .woo-shop-hero__title {
    font-size: 26px !important;
  }
}

/* =========================================================
   BREADCRUMB
   ========================================================= */

.woocommerce-breadcrumb,
.woocommerce nav.woocommerce-breadcrumb {
  font-size: 16px;
  font-family: "Lato", sans-serif;
  color: var(--woo-text-muted);
  margin: 0;
  padding: 0;
  display: block;
  line-height: 1.4;
}

.woocommerce-breadcrumb a,
.woocommerce nav.woocommerce-breadcrumb a {
  color: var(--woo-text-muted);
  text-decoration: none;
  transition: color 0.2s;
}

.woocommerce-breadcrumb a:hover {
  color: var(--woo-primary);
}

.woocommerce-breadcrumb .breadcrumb-current {
  color: var(--woo-heading);
  font-weight: 600;
}

@media (max-width: 768px) {
  .woocommerce-breadcrumb,
  .woocommerce nav.woocommerce-breadcrumb {
    white-space: normal;
    font-size: 12px;
  }
}

/* =========================================================
   HEADER — dark background on pages without a hero section
   (product, cart, checkout, my-account, order-received)
   ========================================================= */

body.single-product header,
body.woocommerce-cart header,
body.woocommerce-checkout header,
body.woocommerce-account header,
body.woocommerce-order-received header {
  background-color: #323232;
}

/* WooCommerce uses <header> for address-card titles — reset site-header styles */
body.woocommerce-account .woocommerce-MyAccount-content header,
body.woocommerce-page .woocommerce-MyAccount-content header {
  position: static !important;
  background: transparent !important;
  background-color: transparent !important;
  z-index: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  transition: none !important;
  box-shadow: none !important;
}

/* =========================================================
   PAGE WRAPPER
   ========================================================= */

.woo-page-wrapper {
  background: var(--woo-bg);
  padding: 80px 0;
  min-height: 60vh;
  overflow-x: clip; /* clip instead of hidden — hidden breaks position:sticky on child elements */
}
/* Match .py-80 responsive breakpoints from service-style.css */
@media only screen and (max-width: 1536px) {
  .woo-page-wrapper {
    padding: 70px 0;
  }
}
@media only screen and (max-width: 1024px) {
  .woo-page-wrapper {
    padding: 60px 0;
  }
}
@media only screen and (max-width: 767px) {
  .woo-page-wrapper {
    padding: 50px 0;
  }
}

/* No-hero pages: fixed header (64px) overlaps the wrapper top, so add
   the header height to padding-top to restore the standard visual gap. */
body.single-product .woo-page-wrapper,
body.woocommerce-cart .woo-page-wrapper,
body.woocommerce-checkout .woo-page-wrapper,
body.woocommerce-account .woo-page-wrapper,
body.woocommerce-order-received .woo-page-wrapper {
  padding-top: 152px; /* 80px section gap + 72px laptop header */
  min-height: 0; /* short-content states (login-required, guest-verify) shouldn't create excess bottom space */
}
@media only screen and (max-width: 1536px) {
  body.single-product .woo-page-wrapper,
  body.woocommerce-cart .woo-page-wrapper,
  body.woocommerce-checkout .woo-page-wrapper,
  body.woocommerce-account .woo-page-wrapper,
  body.woocommerce-order-received .woo-page-wrapper {
    padding-top: 142px; /* 70px section gap + 72px laptop header */
  }
}
@media only screen and (max-width: 1024px) {
  body.single-product .woo-page-wrapper,
  body.woocommerce-cart .woo-page-wrapper,
  body.woocommerce-checkout .woo-page-wrapper,
  body.woocommerce-account .woo-page-wrapper,
  body.woocommerce-order-received .woo-page-wrapper {
    padding-top: 124px; /* 60px section gap + 64px tablet header */
  }
}
@media only screen and (max-width: 767px) {
  body.single-product .woo-page-wrapper,
  body.woocommerce-cart .woo-page-wrapper,
  body.woocommerce-checkout .woo-page-wrapper,
  body.woocommerce-account .woo-page-wrapper,
  body.woocommerce-order-received .woo-page-wrapper {
    padding-top: 110px; /* 50px section gap + 60px mobile header */
  }
}

.woo-content-container {
  width: 100%;
  margin: 0 auto;
  padding: 0 0.75rem;
  box-sizing: border-box;
}
@media (min-width: 576px) {
  .woo-content-container {
    max-width: 540px;
  }
}
@media (min-width: 768px) {
  .woo-content-container {
    max-width: 720px;
  }
}
@media (min-width: 992px) {
  .woo-content-container {
    max-width: 960px;
  }
}
@media (min-width: 1200px) {
  .woo-content-container {
    max-width: 1140px;
  }
}
@media (min-width: 1400px) {
  .woo-content-container {
    max-width: 1320px;
  }
}

/* =========================================================
   SHOP ROW — force flex two-column layout (col-3 + col-9)
   Overrides Bootstrap float AND any theme container flex/grid
   so the layout is guaranteed regardless of Bootstrap version.
   ========================================================= */

.woo-shop-row {
  display: flex !important;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0;
}

.woo-shop-filter-col {
  flex: 0 0 25%;
  max-width: 25%;
  padding-right: 30px;
  padding-top: 4px;
  box-sizing: border-box;
  position: sticky;
  top: 90px; /* clear the sticky header */
  align-self: flex-start;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
}

.woo-shop-products-col {
  flex: 0 0 75%;
  max-width: 75%;
  min-width: 0; /* prevent flex child overflow */
  box-sizing: border-box;
}

/* Mobile filter toggle button — visible only on mobile */
.woo-mobile-filter-toggle {
  display: none;
}
@media (max-width: 991px) {
  .woo-shop-filter-col {
    flex: 0 0 100%;
    max-width: 100%;
    padding-right: 0;
    margin-bottom: 16px;
    position: static;
    max-height: none;
    overflow-y: visible;
  }
  .woo-shop-products-col {
    flex: 0 0 100%;
    max-width: 100%;
  }
  /* Show/hide filter toggle button on mobile */
  .woo-mobile-filter-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: 1px solid var(--woo-border);
    padding: 8px 16px;
    font-family: "Lato", sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--woo-heading);
    cursor: pointer;
    width: 100%;
    margin-bottom: 12px;
    border-radius: 4px;
  }
  .woo-mobile-filter-toggle__icon {
    margin-left: auto;
    font-size: 1rem;
    color: var(--woo-text-muted);
  }
  /* Sidebar body hidden on mobile until toggled */
  .woo-filter-sidebar.is-collapsed .woo-filter-sidebar__header,
  .woo-filter-sidebar.is-collapsed .woo-filter-sidebar__rule,
  .woo-filter-sidebar.is-collapsed .woo-filter-block,
  .woo-filter-sidebar.is-collapsed .woo-filter-clear,
  .woo-filter-sidebar.is-collapsed .woo-filter-clear--disabled {
    display: none !important;
  }
  /* Hide the sidebar's own "Filter by" heading — the mobile toggle button already shows it */
  .woo-filter-sidebar__heading {
    display: none !important;
  }
}

/* =========================================================
   FILTER SIDEBAR
   ========================================================= */

.woo-filter-sidebar {
  font-family: "Lato", sans-serif;
}

.woo-filter-sidebar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.woo-filter-sidebar__heading {
  font-family: "Lato", sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--woo-heading);
  margin: 0;
  letter-spacing: 0.01em;
}

.woo-filter-sidebar__rule {
  display: block;
  height: 1px;
  background: var(--woo-border);
  margin-bottom: 0;
}

/* Collapsible filter block */
.woo-filter-block {
  margin-bottom: 0;
}

.woo-filter-block__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  padding: 12px 0; /* zero left/right so label aligns with items */
  margin: 0;
  font-family: "Lato", sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--woo-heading);
  cursor: pointer;
  text-align: left;
  line-height: 1.3;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
  outline: none;
  box-shadow: none;
}

.woo-filter-block__label {
  flex: 1;
}

.woo-filter-block__icon {
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1;
  color: var(--woo-text-muted);
  transition: transform 0.2s;
  flex-shrink: 0;
}

.woo-filter-block__body {
  overflow: hidden;
  transition: max-height 0.25s ease;
}

.woo-filter-block--closed .woo-filter-block__body {
  max-height: 0 !important;
}

.woo-filter-block--closed .woo-filter-block__icon {
  content: "+";
}

/* Category list */
.woo-filter-cats {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}

.woo-filter-cats li {
  margin: 0;
  padding: 0;
}

.woo-filter-cats a {
  display: block;
  padding: 5px 0;
  font-family: "Lato", sans-serif;
  font-size: 16px;
  color: var(--woo-text) !important;
  text-decoration: none !important;
  transition: color 0.2s;
  line-height: 1.5;
}

.woo-filter-cats a:hover,
.woo-filter-cats a.is-active {
  color: var(--woo-primary) !important;
}

.woo-filter-cats a.is-active {
  font-weight: 700;
}

/* ── Nuke any plugin-injected bordered elements inside filter cat items ──
   Plugins sometimes append <a class="button"> or <span> with border/bg
   from our global .woo-btn / .button rules — reset everything back to
   invisible or plain text so no orange boxes appear between links. */
.woo-filter-cats li > *:not(a):not(ul) {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}

.woo-filter-cats li a.button,
.woo-filter-cats li a[class*="button"],
.woo-filter-sidebar a.button,
.woo-filter-sidebar a[class*="button"] {
  /* Strip button appearance — treat as plain text link */
  border: none !important;
  outline: none !important;
  background: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  height: auto !important;
  line-height: 1.5 !important;
  padding: 5px 0 !important;
  min-width: 0 !important;
  width: auto !important;
  display: block !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  color: var(--woo-text) !important;
}

/* WooCommerce layered nav widget inside sidebar */
.woo-filter-block .woocommerce-widget-layered-nav-list,
.woo-filter-block .product-categories {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}

.woo-filter-block .woocommerce-widget-layered-nav-list li,
.woo-filter-block .product-categories li {
  padding: 0;
  margin: 0;
  border: none;
}

.woo-filter-block .woocommerce-widget-layered-nav-list li a,
.woo-filter-block .product-categories li a {
  display: block;
  padding: 5px 0;
  font-size: 0.875rem;
  color: var(--woo-text);
  text-decoration: none;
  transition: color 0.2s;
}

.woo-filter-block .woocommerce-widget-layered-nav-list li a:hover,
.woo-filter-block .product-categories li a:hover,
.woo-filter-block .woocommerce-widget-layered-nav-list li.chosen a,
.woo-filter-block .product-categories li.current-cat a {
  color: var(--woo-primary);
}

.woo-filter-block .count {
  color: var(--woo-text-muted);
  font-size: 0.8125rem;
}

/* Price filter widget */
.woo-filter-block .price_slider_wrapper {
  padding-bottom: 16px;
}

.woo-filter-block .price_slider_amount .button {
  height: 36px;
  line-height: 34px;
  padding: 0 14px;
  font-size: 0.75rem;
}

/* Active filters */
.woo-filter-block .woocommerce-widget-layered-nav-filters ul {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
}

.woo-filter-block .woocommerce-widget-layered-nav-filters li a {
  color: var(--woo-primary);
  font-size: 0.8125rem;
}

/* ── Attribute checkbox list ───────────────────────────────────────────── */
.woo-filter-checkboxes {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}

.woo-filter-checkboxes li {
  padding: 0 !important;
  margin: 0 0 4px !important;
}

/* Each row: [checkbox] [label] on one line — matches category filter style */
.woo-filter-check {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer;
  font-family: "Lato", sans-serif;
  font-size: 16px;
  color: var(--woo-text);
  line-height: 1.5;
  text-transform: none !important;
  text-decoration: none !important;
  user-select: none;
  padding: 5px 0; /* match .woo-filter-cats a vertical rhythm */
}

/* Visually hide native checkbox but keep it in flow for :checked selector */
.woo-filter-check input[type="checkbox"] {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none;
}

/* Custom 16×16 checkbox square */
.woo-filter-check__mark {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  width: 15px !important;
  height: 15px !important;
  border: 1px solid var(--woo-border-mid) !important;
  background: #ffffff !important;
  transition:
    border-color 0.2s,
    background-color 0.2s;
  box-sizing: border-box !important;
}

/* Checked state — orange fill */
.woo-filter-check input[type="checkbox"]:checked ~ .woo-filter-check__mark {
  background-color: var(--woo-primary) !important;
  border-color: var(--woo-primary) !important;
}

/* White tick */
.woo-filter-check
  input[type="checkbox"]:checked
  ~ .woo-filter-check__mark::after {
  content: "" !important;
  display: block !important;
  width: 4px !important;
  height: 7px !important;
  border: 2px solid #ffffff !important;
  border-top: none !important;
  border-left: none !important;
  transform: rotate(45deg) translateY(-1px) !important;
}

.woo-filter-check:hover .woo-filter-check__mark {
  border-color: var(--woo-primary) !important;
}

/* Label text — identical styling to .woo-filter-cats a (category anchor items) */
.woo-filter-check__label {
  flex: 1;
  font-family: "Lato", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--woo-text) !important;
  text-transform: none !important;
  text-decoration: none !important;
  letter-spacing: 0 !important;
  transition: color 0.2s;
}

/* Checked: orange + bold, mirrors .woo-filter-cats a.is-active */
.woo-filter-check
  input[type="checkbox"]:checked
  ~ .woo-filter-check__mark
  ~ .woo-filter-check__label {
  color: var(--woo-primary) !important;
  font-weight: 700;
}

/* Clear filters link */
.woo-filter-clear {
  display: inline-block;
  flex-shrink: 0;
  font-family: "Lato", sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--woo-primary);
  text-decoration: none;
  transition: color 0.2s;
  white-space: nowrap;
}

.woo-filter-clear:hover {
  color: var(--woo-primary-dark);
}

/* Disabled state — always visible but non-interactive until a filter is applied */
.woo-filter-clear--disabled {
  color: var(--woo-text-muted);
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Suppress ALL wishlist / compare plugin icons site-wide on WC pages ──── */
/* Covers YITH WooCommerce Wishlist, TI Wishlist, and similar plugins.       */
.woocommerce-page .yith-wcwl-add-to-wishlist,
.woocommerce-page [class*="yith-wcwl"],
.woocommerce-page .tinvwl_add_to_wishlist_button,
.woocommerce-page [class*="tinvwl"],
.woocommerce-page .add_to_wishlist,
.woo-products-grid .yith-wcwl-add-to-wishlist,
.woo-products-grid [class*="yith-wcwl"],
.products .yith-wcwl-add-to-wishlist,
.products [class*="yith-wcwl"] {
  display: none !important;
}

/* Hide stray images / SVGs injected into filter links or pagination by plugins */
.woo-filter-sidebar img,
.woo-filter-sidebar svg,
.woo-filter-cats img,
.woo-filter-cats svg,
.woocommerce-pagination a img,
.woocommerce-pagination a svg {
  display: none !important;
}

/* =========================================================
   SHOP CONTROLS
   ========================================================= */

.woo-shop-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 28px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--woo-border);
}

.woocommerce-result-count {
  color: var(--woo-heading);
  font-size: 16px;
  font-weight: 700;
  margin: 0 !important;
}

.woocommerce-ordering {
  position: relative;
}

.woocommerce-ordering select,
.woocommerce-ordering .orderby {
  background: var(--woo-white);
  color: var(--woo-heading) !important;
  border: 1px solid var(--woo-border-mid) !important;
  font-family: "Lato", sans-serif;
  font-size: 16px;
  line-height: 20px;
  padding: 11px 42px 11px 20px;
  outline: none;
  cursor: pointer;
  transition: border-color 0.3s;
  -webkit-appearance: none;
  appearance: none;
  min-width: 180px;
  border-radius: 3px;
}

.woocommerce-ordering::after {
  content: "";
  display: block;
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid var(--woo-text-muted);
  pointer-events: none;
}

.woocommerce-ordering select:focus {
  border-color: var(--woo-primary);
}

.woocommerce-ordering select option {
  color: #202020;
  background: #ffffff;
}

/* =========================================================
   PRODUCT GRID
   ========================================================= */

.woo-products-grid,
ul.products {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Inside col-md-9 the container is narrower; 2 cols on medium screens */
@media (max-width: 1100px) and (min-width: 992px) {
  .woo-products-grid,
  ul.products {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Tablet: 2 columns */
@media (max-width: 991px) and (min-width: 576px) {
  .woo-products-grid,
  ul.products {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

/* Mobile: single column */
@media (max-width: 575px) {
  .woo-products-grid,
  ul.products {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* ── Product card content scaling ─────────────────────────────────────────
   Tablet (576-991px): 2-col narrow cards — reduce card internals.
   Mobile (≤575px): 1-col full-width — only tighten controls, keep card sizes.
   ─────────────────────────────────────────────────────────────────────── */

/* Controls bar — scale down on all small screens */
@media (max-width: 991px) {
  .woo-shop-controls {
    margin-bottom: 16px;
    gap: 8px;
  }

  .woocommerce-result-count {
    font-size: 13px;
  }

  .woocommerce-ordering select,
  .woocommerce-ordering .orderby {
    font-size: 13px !important;
    padding: 8px 36px 8px 12px !important;
    min-width: 0;
  }
}

/* Tablet 2-col cards — scale down card content to fit narrow columns */
@media (max-width: 991px) and (min-width: 576px) {
  .woo-product-card__body {
    padding: 10px 10px 12px;
  }

  .woo-product-card__title {
    font-size: 13px;
    line-height: 18px;
    margin-bottom: 6px;
  }

  .woo-product-card__price {
    font-size: 13px;
    margin-bottom: 10px;
  }

  .woo-product-card__price del {
    font-size: 11px;
  }

  .woo-product-card__actions {
    gap: 6px;
  }

  .woo-product-card__actions .woo-btn,
  .woo-product-card__actions a.button,
  .woo-product-card__actions button.button {
    font-size: 11px !important;
    padding: 8px 6px !important;
    line-height: 16px !important;
    letter-spacing: 0.04em !important;
  }
}

/* =========================================================
   PRODUCT CARD
   ========================================================= */

.woo-product-card {
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 0;
  position: relative;
  list-style: none;
  overflow: hidden;
  transition: border-color 0.25s;
}

.woo-product-card:hover {
  border-color: #c8c8c8;
}

.woo-product-card__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.woo-product-card__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: #cc0000;
  color: var(--woo-white);
  font-size: 0.75rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  z-index: 2;
}

.woo-product-card__image-link {
  display: block;
  overflow: hidden;
}

/* Image area — square aspect ratio so the entire 1:1 product photo is visible */
.woo-product-card__image {
  width: 100%;
  aspect-ratio: 1 / 1; /* matches WooCommerce thumbnail dimensions */
  overflow: hidden;
  background: #ffffff;
  display: block;
  flex-shrink: 0;
}

.woo-product-card__img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain; /* show full image — no cropping */
  object-position: center;
  display: block;
  transition: transform 0.35s ease;
}

.single-product .chr_content form textarea {
  background: none !important;
  margin-bottom: 10px !important;
}

.woo-product-card:hover .woo-product-card__img {
  transform: scale(1.06);
}

.woo-product-card__body {
  padding: 16px 16px 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0;
  text-align: left !important;
  align-items: flex-start;
}

.woo-product-card__title {
  font-family: "Lato", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
  margin: 0 0 8px;
  text-align: left !important;
  text-transform: capitalize !important;
  width: 100%;
}

.woo-product-card__title a {
  color: var(--woo-heading) !important; /* override global WC link orange */
  text-decoration: none !important;
  transition: color 0.3s;
}

.woo-product-card__title a:hover {
  color: var(--woo-primary) !important;
}

.woo-product-card__divider {
  display: none;
}

.woo-product-card__price {
  font-size: 20px;
  font-weight: 700;
  color: var(--woo-primary);
  margin: 0 0 14px;
  text-align: left !important;
  width: 100%;
}

.woo-product-card__price del {
  color: var(--woo-text-muted);
  font-size: 1rem;
  font-weight: 400;
}

.woo-product-card__price del .woocommerce-Price-amount {
  color: var(--woo-text-muted);
}

.woo-product-card__price ins {
  text-decoration: none;
  color: var(--woo-primary);
}

/* Buttons — stacked, full-width, centred in the card body */
.woo-product-card__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto; /* keeps buttons at card bottom across equal-height rows */
  padding-top: 0;
  width: 100%; /* stretch to card width */
  align-items: stretch;
}

.woo-product-card__actions .woo-btn,
.woo-product-card__actions a.button,
.woo-product-card__actions button.button {
  display: block;
  width: 100%;
  height: auto;
  line-height: 20px;
  font-size: 16px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: 0.03em !important;
  padding: 11px 20px !important;
  text-align: center !important;
  text-decoration: none !important;
  /* .woocommerce a { color: var(--woo-primary) } has specificity 11 > .woo-btn alone (10).
     !important here ensures card buttons always render dark regardless of that global rule. */
  color: var(--woo-heading) !important;
  border-color: var(--woo-border-mid) !important;
  cursor: pointer !important;
}

.woo-product-card__actions .woo-btn:hover,
.woo-product-card__actions a.button:hover,
.woo-product-card__actions button.button:hover {
  background-color: var(--woo-primary) !important;
  border-color: var(--woo-primary) !important;
  color: #ffffff !important;
}

/* =========================================================
   BUTTONS
   ========================================================= */

.woo-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .button {
  display: inline-block;
  height: 46px;
  width: auto;
  line-height: 44px;
  padding: 0 24px;
  border: 1px solid var(--woo-border-mid);
  background-color: transparent;
  font-family: "Lato", sans-serif;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--woo-heading);
  text-align: center;
  text-transform: uppercase;
  text-decoration: none !important;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition:
    background-color 0.25s,
    color 0.25s,
    border-color 0.25s;
  white-space: nowrap;
  box-sizing: border-box;
  border-radius: 0;
}

.woo-btn:hover,
.woo-btn:focus,
.woocommerce a.button:hover,
.woocommerce a.button:focus,
.woocommerce button.button:hover,
.woocommerce button.button:focus,
.woocommerce input.button:hover,
.woocommerce input.button:focus,
.woocommerce #respond input#submit:hover,
.woocommerce #respond input#submit:focus,
.woocommerce .button:hover,
.woocommerce .button:focus {
  background-color: var(--woo-primary) !important;
  border-color: var(--woo-primary) !important;
  color: #ffffff !important;
  text-decoration: none !important;
}

.woo-btn--outline {
  background: transparent;
}

.woo-btn--sm {
  height: 40px;
  line-height: 38px;
  padding: 0 18px;
  font-size: 0.75rem;
}

.woo-add-to-cart-btn {
  flex: 1;
}

.woo-view-btn {
  flex: 1;
}

.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt {
  background-color: var(--woo-primary);
  color: var(--woo-white);
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit.alt:hover {
  background-color: transparent;
  color: var(--woo-primary);
}

/* ── Single product Add to Cart — match Contact button exactly ──────────────
   Contact button: 16px / 700 / padding 11px 20px / line-height 20px (h=44px)
   The base .woocommerce .button rule sets height:46px / font-size:0.8125rem.
   Override here with higher specificity to match the header Contact button.
   ─────────────────────────────────────────────────────────────────────────── */
.woocommerce div.product button.single_add_to_cart_button,
.woocommerce div.product input.single_add_to_cart_button {
  height: auto !important;
  line-height: 20px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  padding: 11px 20px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  border-color: var(--woo-primary) !important;
}

/* =========================================================
   STAR RATINGS
   ========================================================= */

/* Full star-rating CSS — woocommerce.css is dequeued so we replicate it here.
   Uses the WooCommerce icon font declared via @font-face at top of this file.
   \e021 = empty star, \e020 = filled star */
.woocommerce .star-rating {
  font-family: WooCommerce;
  font-size: 0.9rem;
  overflow: hidden;
  position: relative;
  height: 1em;
  line-height: 1em;
  width: 5.4em;
  display: inline-block;
  vertical-align: middle;
}

.woocommerce .star-rating::before {
  content: "sssss";
  color: #ccc;
  float: left;
  top: 0;
  left: 0;
  position: absolute;
  font-family: WooCommerce;
}

.woocommerce .star-rating span {
  overflow: hidden;
  float: left;
  top: 0;
  left: 0;
  position: absolute;
  padding-top: 1.5em;
}

.woocommerce .star-rating span::before {
  content: "SSSSS";
  top: 0;
  left: 0;
  position: absolute;
  font-family: WooCommerce;
  color: var(--woo-primary);
}

.woo-product-card__rating {
  line-height: 1;
}

/* =========================================================
   PAGINATION
   ========================================================= */

/* Kill wishlist/plugin icons injected into pagination links */
.woocommerce-pagination a img,
.woocommerce-pagination a svg,
.woocommerce-pagination .yith-wcwl-add-to-wishlist,
.woocommerce-pagination .yith-wcwl-add-button {
  display: none !important;
}

.woocommerce-pagination,
.woocommerce nav.woocommerce-pagination {
  margin-top: 50px;
  text-align: center;
}

.woocommerce-pagination ul,
.woocommerce nav.woocommerce-pagination ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

/* Prev / Next get wider text links, numbers get square boxes */
.woocommerce-pagination ul li:first-child a,
.woocommerce-pagination ul li:last-child a,
.woocommerce nav.woocommerce-pagination ul li:first-child a,
.woocommerce nav.woocommerce-pagination ul li:last-child a {
  width: auto;
  padding: 0 14px;
}

.woocommerce-pagination ul li a,
.woocommerce-pagination ul li span,
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  display: block;
  min-width: 44px;
  height: 44px;
  line-height: 42px;
  text-align: center;
  border: 1px solid var(--woo-border-mid);
  color: var(--woo-heading);
  font-family: "Lato", sans-serif;
  font-size: 16px;
  text-decoration: none;
  transition: all 0.3s;
}

.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li a:hover {
  border-color: var(--woo-primary);
  color: var(--woo-primary);
}

.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li span.current {
  border-color: var(--woo-primary);
  background: var(--woo-primary);
  color: var(--woo-white);
}

/* =========================================================
   NO PRODUCTS
   ========================================================= */

.woo-no-products {
  text-align: center;
  padding: 60px 20px;
}

.woo-no-products p {
  color: var(--woo-text);
  font-size: 1.125rem;
  margin-bottom: 24px;
}

/* =========================================================
   SINGLE PRODUCT PAGE
   ========================================================= */

/* Reset WooCommerce default float layout — we control it via .woo-product-layout */
.woocommerce div.product {
  display: block;
}

/* ── Two-column row ───────────────────────────────────────── */
.woo-product-layout {
  display: flex;
  gap: 50px;
  align-items: flex-start;
}

.woo-product-gallery-col {
  flex: 0 0 60%;
  max-width: 60%;
  position: sticky;
  top: 100px; /* offset below sticky header */
  align-self: flex-start;
}

.woo-product-summary-col {
  flex: 1;
  min-width: 0;
  overflow-x: hidden;
}

/* Sale badge lives inside the gallery column, so position it over the image */
.woo-product-gallery-col span.onsale {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
}

/* Full-width section below the two columns (upsells / related only — tabs moved to summary col) */
.woo-product-below {
  overflow: hidden;
}

/* Tabs inside the summary column — meta's padding-bottom:24px handles the space above the border. */
.woo-product-summary-col .woocommerce-tabs {
  margin-top: 0;
  border-top: 1px solid var(--woo-border);
  padding-top: 24px;
}

/* ── Tablet (901px–1024px) ─────────────────────────────────── */
@media (min-width: 901px) and (max-width: 1024px) {
  .woo-product-layout {
    gap: 32px !important;
  }
  .woo-product-gallery-col {
    flex: 0 0 55% !important;
    max-width: 55% !important;
    top: 80px;
  }
  .woo-product-summary-col {
    flex: 1 !important;
  }
  /* Thumbnails — slightly smaller on tablet */
  .woocommerce-product-gallery .flex-control-nav {
    gap: 14px !important;
  }
  .woocommerce-product-gallery .flex-control-nav li {
    width: 76px !important;
    height: 76px !important;
  }
}

/* ── Mobile + small tablets (≤900px) — iPad Mini, iPad Air 4, iPad Pro 11,
      Galaxy Tab S7 all get the single-column stacked layout ─────────────── */
@media (max-width: 900px) {
  /* Force column stacking — gallery above, summary below */
  .woo-product-layout {
    flex-direction: column !important;
    gap: 0 !important;
  }
  .woo-product-gallery-col {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    position: relative !important;
    top: auto !important;
  }
  .woo-product-summary-col {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 16px 0 0 !important;
  }

  /* Thumbnails — 2-row wrap grid on mobile (avoids horizontal scroll issues) */
  .woocommerce-product-gallery .flex-control-nav {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    gap: 8px !important;
    margin-top: 12px !important;
  }
  .woocommerce-product-gallery .flex-control-nav li {
    flex: 0 0 calc(20% - 7px) !important;
    width: calc(20% - 7px) !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    max-width: 68px !important;
  }

  /* Summary spacing on mobile */
  .woocommerce div.product div.summary {
    gap: 12px;
  }

  /* Tabs on mobile */
  .woocommerce div.product .woocommerce-tabs ul.tabs li a {
    padding: 10px 16px;
  }
  .woocommerce div.product .woocommerce-tabs ul.tabs li:first-child a {
    padding-left: 0;
  }

  /* Review form — full width inputs */
  #reviews #review_form input[type="text"],
  #reviews #review_form input[type="email"],
  #reviews #review_form textarea {
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ── Gallery image ─────────────────────────────────────────── */
.woo-product-gallery-col .woocommerce-product-gallery__image img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid #e0e0e0 !important;
}


/* ── Summary ────────────────────────────────────────────────── */
.woocommerce div.product div.summary {
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-x: hidden;
}

.woo-product-title {
  font-family: "Lato", sans-serif !important;
  font-size: 26px !important;
  font-weight: 600 !important;
  color: var(--woo-heading) !important;
  line-height: 35px !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  margin: 0 !important;
}

.woo-single__rating {
  display: flex;
  align-items: center;
  gap: 10px;
}

.woo-single__review-link {
  color: var(--woo-text-muted);
  font-size: 1rem;
  text-decoration: none;
  transition: color 0.3s;
}

.woo-single__review-link:hover {
  color: var(--woo-primary);
}

.woo-single__price {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--woo-primary);
  line-height: 1.2;
}

.woo-single__price del {
  color: var(--woo-text-muted);
  font-size: 0.9rem;
  font-weight: 400;
}

.woo-single__price ins {
  text-decoration: none;
}

.woo-single__short-description {
  color: var(--woo-text);
  font-size: 1rem;
  line-height: 1.7;
  /* gap:16px on parent + margin-top:8px = 24px above the border */
  margin-top: 8px;
  border-top: 1px solid var(--woo-border);
  padding-top: 24px;
}

.woo-single__short-description p {
  margin: 0;
}

.woo-single__meta {
  /* gap:16px on parent + margin-top:8px = 24px above the border */
  margin-top: 8px;
  border-top: 1px solid var(--woo-border);
  padding-top: 24px;
  padding-bottom: 24px; /* mirrors the 24px on the tabs side below */
  font-size: 1rem;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.woo-meta-item,
.woo-single__meta .posted_in {
  font-size: 1rem;
  font-weight: 700;
  color: var(--woo-heading);
}

/* Value portion — reset to normal weight and muted color */
.woo-meta-item .sku {
  font-weight: 400;
  color: var(--woo-text-muted);
}

.woo-meta-item a,
.woo-single__meta .posted_in a {
  font-weight: 400;
  color: var(--woo-primary);
  text-decoration: none;
}

.woo-meta-item a:hover,
.woo-single__meta .posted_in a:hover {
  color: var(--woo-heading);
}

.woocommerce div.product form.cart {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* Variation form stacks vertically: attribute table on top, qty+button below */
.woocommerce div.product form.variations_form.cart {
  display: block;
  overflow-x: hidden;
}

.woocommerce div.product form.cart .quantity {
  display: flex;
  align-items: stretch;
}

.woocommerce div.product .stock {
  font-size: 1rem;
  font-weight: 700;
}

.woocommerce div.product p.stock.in-stock {
  color: var(--woo-success);
}

.woocommerce div.product p.stock.out-of-stock {
  color: var(--woo-primary);
}

/* Product Tabs */
.woocommerce div.product .woocommerce-tabs {
  margin-top: 0;
  margin-bottom: 40px;
}
@media only screen and (max-width: 1024px) {
  .woocommerce div.product .woocommerce-tabs {
    margin-bottom: 24px;
  }
}
@media only screen and (max-width: 767px) {
  .woocommerce div.product .woocommerce-tabs {
    margin-bottom: 16px;
  }
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  border-bottom: 1px solid var(--woo-border);
  gap: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
  margin: 0;
  padding: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  display: block;
  padding: 12px 24px;
  font-family: "Lato", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  text-transform: capitalize;
  letter-spacing: 0;
  color: var(--woo-text-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition:
    color 0.3s,
    border-color 0.3s;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li:first-child a {
  padding-left: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
  color: var(--woo-primary);
  border-bottom-color: var(--woo-primary);
}

.woocommerce div.product .woocommerce-tabs .panel {
  color: var(--woo-text);
  line-height: 1.7;
}

.woocommerce div.product .woocommerce-tabs .panel h2 {
  display: none;
}

/* ── Additional Information tab — shop_attributes table ────────
   Theme JS wraps ALL tables in .table-wrapper so styles.css rules
   (.table-wrapper table { min-width:725px; border:1px solid #b9b9b9 }
    .table-wrapper table th/td { padding:15px; min-width:105px })
   hit .shop_attributes too — override them here. */

.woocommerce div.product .shop_attributes {
  width: 100% !important;
  min-width: 0 !important;
  border-collapse: collapse !important;
  border: none !important;
}

.woocommerce div.product .shop_attributes tr:first-child th,
.woocommerce div.product .shop_attributes tr:first-child td {
  border-top: 1px solid var(--woo-border) !important;
}

.woocommerce div.product .shop_attributes th,
.woocommerce div.product .shop_attributes td {
  padding: 10px 16px !important;
  min-width: 0 !important;
  border: none !important;
  border-bottom: 1px solid var(--woo-border) !important;
  vertical-align: top !important;
  text-align: left !important;
}

.woocommerce
  div.product
  .shop_attributes
  th.woocommerce-product-attributes-item__label {
  font-family: "Lato", sans-serif;
  font-size: 1rem;
  font-weight: 700 !important;
  color: var(--woo-heading) !important;
  width: 35%;
  white-space: nowrap;
}

.woocommerce
  div.product
  .shop_attributes
  td.woocommerce-product-attributes-item__value {
  font-family: "Lato", sans-serif;
  font-size: 1rem;
  color: var(--woo-text) !important;
}

.woocommerce
  div.product
  .shop_attributes
  td.woocommerce-product-attributes-item__value
  p {
  margin: 0 !important;
}

/* Related, Upsells & Cross-sells — total spacing matches py-80 per breakpoint,
   split evenly between margin-top (gap above border) and padding-top (gap below border) */
.woo-related-products,
.woo-upsells,
section.related.products,
section.upsells.products,
section.woo-cross-sells {
  margin-top: 40px;
  border-top: 1px solid var(--woo-border);
  padding-top: 40px;
}
@media only screen and (max-width: 1536px) {
  .woo-related-products,
  .woo-upsells,
  section.related.products,
  section.upsells.products,
  section.woo-cross-sells {
    margin-top: 35px;
    padding-top: 35px;
  }
}
@media only screen and (max-width: 1024px) {
  .woo-related-products,
  .woo-upsells,
  section.related.products,
  section.upsells.products,
  section.woo-cross-sells {
    margin-top: 30px;
    padding-top: 30px;
  }
  .woo-product-gallery-col {
    top: 80px;
  }
}
@media only screen and (max-width: 767px) {
  .woo-related-products,
  .woo-upsells,
  section.related.products,
  section.upsells.products,
  section.woo-cross-sells {
    margin-top: 25px;
    padding-top: 25px;
  }
}

/* 4-column grid for related/upsell/cross-sell — WooCommerce outputs
   columns-4 class; since we dequeue woocommerce.css we add it here. */
section.related ul.products,
section.upsells ul.products,
section.woo-cross-sells ul.products,
ul.products.columns-4 {
  grid-template-columns: repeat(4, 1fr) !important;
}

@media (max-width: 900px) {
  section.related ul.products,
  section.upsells ul.products,
  section.woo-cross-sells ul.products,
  ul.products.columns-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 480px) {
  section.related ul.products,
  section.upsells ul.products,
  section.woo-cross-sells ul.products,
  ul.products.columns-4 {
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   VARIATION PRODUCT — attribute table & swatches
   ========================================================= */

/* ── Kill horizontal scrollbar ────────────────────────────────
   page.scss: .table-wrapper { overflow-y:auto } forces overflow-x:auto.
   Override hard so the variation table never causes a scrollbar. */
.woocommerce div.product form.variations_form .table-wrapper {
  overflow: hidden !important;
  max-width: 100% !important;
}

/* Override styles.css: .table-wrapper table { min-width:725px; border:1px solid #b9b9b9 }
   Override woocommerce.css: form.cart table { border-width:0 0 1px } */
.woocommerce div.product form.variations_form .table-wrapper table.variations,
.woocommerce div.product form.cart.variations_form table.variations {
  min-width: 0 !important;
  border: none !important;
  border-bottom: none !important;
  border-collapse: collapse !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Override styles.css: .table-wrapper table th/td { min-width:105px; padding:15px } */
.woocommerce
  div.product
  form.variations_form
  .table-wrapper
  table.variations
  th,
.woocommerce
  div.product
  form.variations_form
  .table-wrapper
  table.variations
  td {
  min-width: 0 !important;
  padding: 0 !important;
  border: none !important;
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Stack each attribute block vertically */
.woocommerce div.product form.variations_form table.variations tbody,
.woocommerce div.product form.variations_form table.variations tr {
  display: block !important;
  width: 100% !important;
}

.woocommerce
  div.product
  form.variations_form
  table.variations
  tr:not(:last-child) {
  margin-bottom: 20px !important;
}

/* Label row: th.label is block, both children inline — they flow side-by-side naturally.
   Flex caused the selected-value span to get pushed to the far right. */
.woocommerce
  div.product
  form.variations_form
  .table-wrapper
  table.variations
  .label {
  display: block !important;
  margin-bottom: 8px !important;
}

.woocommerce div.product form.variations_form table.variations .label label {
  font-family: "Lato", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  text-transform: capitalize;
  letter-spacing: 0;
  color: var(--woo-text-mid);
  line-height: 1.4;
  display: inline !important;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
}

/* Plugin's selected-value indicator e.g. ": Jeep" — flows inline right after label */
.woo-selected-variation-item-name {
  font-family: "Lato", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--woo-heading);
  text-transform: none;
  letter-spacing: normal;
  line-height: 1.4;
  display: inline !important;
  float: none !important;
  position: static !important;
  width: auto !important;
  margin: 0 !important;
}

.woocommerce div.product form.variations_form table.variations select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--woo-border-mid);
  font-family: "Lato", sans-serif;
  font-size: 1rem;
  color: var(--woo-text-dark);
  background: var(--woo-bg);
  cursor: pointer;
}

.woocommerce div.product form.variations_form table.variations select:focus {
  outline: none;
  border-color: var(--woo-primary);
}

/* "Clear" reset link — matches .woo-filter-clear style from shop filter sidebar */
.woocommerce div.product form.variations_form .reset_variations {
  display: inline-block;
  font-family: "Lato", sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--woo-primary);
  text-decoration: none;
  margin-top: 6px;
  transition: color 0.2s;
}

.woocommerce div.product form.variations_form .reset_variations::after {
  content: " \00D7";
}

.woocommerce div.product form.variations_form .reset_variations:hover {
  color: var(--woo-primary-dark);
}

/* ── Selected variation info: price, description, stock, qty, button ── */
.woocommerce div.product form.variations_form .single_variation_wrap {
  margin-top: 4px;
  width: 100% !important;
  display: block !important;
}

/* Variation container — block, border-top separator, NO orange/grey border */
.woocommerce
  div.product
  form.variations_form
  .woocommerce-variation.single.variation {
  display: block !important;
  float: none !important;
  width: 100% !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: none !important;
  border-top: 1px solid var(--woo-border) !important;
  padding-top: 14px !important;
  margin-bottom: 14px !important;
}

/* Variation price — block, no float, no border.
   Also target via .single_variation_wrap for stronger specificity cascade. */
.woocommerce div.product form.variations_form .woocommerce-variation-price,
.single_variation_wrap .woocommerce-variation-price {
  display: block !important;
  float: none !important;
  width: 100% !important;
  border: none !important;
  outline: none !important;
  background: none !important;
  padding: 0 !important;
  margin-bottom: 6px !important;
  box-shadow: none !important;
}
.woocommerce
  div.product
  form.variations_form
  .woocommerce-variation-price
  .price {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: var(--woo-primary) !important;
  line-height: 1.2 !important;
}
.woocommerce
  div.product
  form.variations_form
  .woocommerce-variation-price
  .price
  del {
  color: var(--woo-text-muted) !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  margin-right: 4px !important;
}
.woocommerce
  div.product
  form.variations_form
  .woocommerce-variation-price
  .price
  del
  .woocommerce-Price-amount {
  color: var(--woo-text-muted) !important;
}
.woocommerce
  div.product
  form.variations_form
  .woocommerce-variation-price
  .price
  ins {
  text-decoration: none !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: var(--woo-primary) !important;
}

/* Variation description — block below price, no float, no border */
.woocommerce
  div.product
  form.variations_form
  .woocommerce-variation-description,
.single_variation_wrap .woocommerce-variation-description {
  display: block !important;
  float: none !important;
  width: 100% !important;
  font-family: "Lato", sans-serif;
  font-size: 0.875rem;
  color: var(--woo-text);
  line-height: 1.6;
  margin-top: 0 !important;
  margin-bottom: 26px !important;
  border: none !important;
  outline: none !important;
  background: none !important;
  padding: 0 !important;
}
.woocommerce
  div.product
  form.variations_form
  .woocommerce-variation-description
  p,
.single_variation_wrap .woocommerce-variation-description p {
  margin: 0;
}

/* Stock availability — override forms.scss: .chr_content form p:nth-of-type(1) { height:0 }
   that rule zeroes out the in-stock paragraph height. */
.woocommerce
  div.product
  form.variations_form
  .woocommerce-variation-availability,
.single_variation_wrap .woocommerce-variation-availability {
  display: block !important;
  width: 100% !important;
  margin-bottom: 10px !important;
}
.woocommerce
  div.product
  form.variations_form
  .woocommerce-variation-availability
  p,
.single_variation_wrap .woocommerce-variation-availability p {
  height: auto !important;
  display: block !important;
  margin: 0 !important;
  font-family: "Lato", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
}
.woocommerce div.product .woocommerce-variation-availability p.stock.in-stock {
  color: var(--woo-success) !important;
}
.woocommerce
  div.product
  .woocommerce-variation-availability
  p.stock.out-of-stock {
  color: var(--woo-error) !important;
}

/* Quantity + add-to-cart row */
.woocommerce div.product form.variations_form .variations_button {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  float: none !important;
}

/* ── Button-type swatches (text labels e.g. "Jeep", "2025") ─── */
/* 10px gap between each swatch via the flex wrapper.
   padding-left: 2px so the button box-shadow isn't clipped by table-wrapper overflow:hidden */
.woo-variation-swatches .variable-items-wrapper {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 2px 0 2px 2px !important;
}

/* Hide plugin tooltip arrow + tooltip text on swatch buttons —
   button text is already visible so tooltips add clutter */
.woo-variation-swatches .variable-items-wrapper .variable-item::before,
.woo-variation-swatches .variable-items-wrapper .variable-item::after,
.woo-variation-swatches .variable-items-wrapper [data-wvstooltip]::before,
.woo-variation-swatches .variable-items-wrapper [data-wvstooltip]::after {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.woo-variation-swatches
  .variable-items-wrapper
  .variable-item.button-variable-item {
  width: auto !important;
  min-width: 44px !important;
  height: auto !important;
  min-height: 36px !important;
  padding: 6px 14px !important;
  font-size: 1rem !important;
  line-height: 1.3 !important;
  border: 2px solid transparent !important;
  border-radius: 2px !important;
  margin: 0 !important;
}

/* Selected variant button — orange border + orange text, no fill */
.woo-variation-swatches
  .variable-items-wrapper
  .variable-item.button-variable-item.selected {
  border: 2px solid var(--woo-primary) !important;
  color: var(--woo-primary) !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Hover on unselected variant buttons — same as selected state */
.woo-variation-swatches
  .variable-items-wrapper
  .variable-item.button-variable-item:not(.selected):hover {
  border: 2px solid var(--woo-primary) !important;
  color: var(--woo-primary) !important;
  background: transparent !important;
  box-shadow: none !important;
}
.woo-variation-swatches
  .variable-items-wrapper
  .variable-item:not(.radio-variable-item) {
  margin: 0 !important;
}

.woo-section-title {
  font-family: "Lato", sans-serif;
  font-size: 1.125rem !important;
  font-weight: 700;
  color: var(--woo-heading);
  text-transform: capitalize;
  letter-spacing: 0;
  margin: 0 0 24px !important;
  line-height: 1.4 !important;
}

/* =========================================================
   SALE FLASH
   ========================================================= */

.woocommerce span.onsale {
  position: absolute;
  top: 12px;
  left: 12px;
  right: auto;
  z-index: 2;
  background: #cc0000;
  color: var(--woo-white);
  font-family: "Lato", sans-serif;
  font-size: 0.75rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  min-height: auto;
  min-width: auto;
  padding: 4px 10px;
  border-radius: 0;
  line-height: 1.5;
}

/* =========================================================
   INPUTS & FORMS
   ========================================================= */

.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="number"],
.woocommerce input[type="password"],
.woocommerce input[type="search"],
.woocommerce select,
.woocommerce textarea,
.woo-input {
  background: var(--woo-bg);
  color: var(--woo-text-dark);
  border: 1px solid var(--woo-border-mid);
  font-family: "Lato", sans-serif;
  font-size: 0.9375rem;
  padding: 12px 16px;
  width: 100%;
  outline: none;
  transition: border-color 0.3s;
  border-radius: 0;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}

.woocommerce input[type="text"]:focus,
.woocommerce input[type="email"]:focus,
.woocommerce input[type="tel"]:focus,
.woocommerce input[type="number"]:focus,
.woocommerce input[type="password"]:focus,
.woocommerce select:focus,
.woocommerce textarea:focus,
.woo-input:focus {
  border-color: var(--woo-primary);
}

.woocommerce input[type="text"]::placeholder,
.woocommerce input[type="email"]::placeholder,
.woocommerce input[type="tel"]::placeholder,
.woocommerce input[type="number"]::placeholder,
.woocommerce input[type="password"]::placeholder,
.woocommerce textarea::placeholder,
.woo-input::placeholder {
  color: var(--woo-text-muted);
}

.woocommerce .quantity input.qty {
  width: 52px;
  height: 44px;
  text-align: center;
  padding: 0 6px;
  background: var(--woo-bg);
  color: var(--woo-heading);
  border: 1px solid var(--woo-border-mid);
  border-left: none;
  border-right: none;
  font-family: "Lato", sans-serif;
  font-size: 1rem;
  box-sizing: border-box;
  -moz-appearance: textfield;
  vertical-align: middle;
}
.woocommerce .quantity input.qty::-webkit-inner-spin-button,
.woocommerce .quantity input.qty::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* +/- quantity buttons */
.woo-qty-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 44px;
  background: var(--woo-bg);
  border: 1px solid var(--woo-border-mid);
  color: var(--woo-heading);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition:
    background-color 0.2s,
    color 0.2s;
  padding: 0;
  flex-shrink: 0;
}
.woo-qty-btn:hover {
  background-color: var(--woo-primary);
  border-color: var(--woo-primary);
  color: #fff;
}
.woo-qty-minus {
  border-radius: 2px 0 0 2px;
}
.woo-qty-plus {
  border-radius: 0 2px 2px 0;
}
.woo-qty-plus:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

.woocommerce label {
  color: var(--woo-text-mid);
  font-family: "Lato", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  text-transform: capitalize;
  letter-spacing: 0;
  display: block;
  margin-bottom: 6px;
}

.woocommerce form .form-row {
  margin-bottom: 20px;
}

.woocommerce form .form-row label abbr,
.woocommerce form .form-row label .required,
.woocommerce-checkout label abbr,
.woocommerce-checkout label .required,
.woocommerce-checkout .form-row label abbr,
.woocommerce-checkout .form-row label .required {
  color: var(--woo-error) !important;
  border: none !important;
  text-decoration: none !important;
}

/* "Billing details" sub-heading inside the form (WC-generated, below section title) */
.woocommerce-billing-fields > h3 {
  display: none;
}

/* Order notes — now in its own card; no extra top margin needed */
.woocommerce-additional-fields {
  margin-top: 0;
}

/* Notes section: last card in the left column — no bottom margin */
.woo-notes-section {
  margin-bottom: 0 !important;
}

.woocommerce-additional-fields > h3 {
  display: none;
}

.woocommerce-additional-fields .form-row label {
  font-weight: 700 !important;
  color: var(--woo-heading) !important;
  font-size: 1rem !important;
  margin-bottom: 6px !important;
  text-transform: capitalize !important;
}

/* Shipping address form — smooth slide transition via WooCommerce JS */
.shipping_address {
  margin-top: 20px;
}

/* "Ship to a different address?" — keep visible; contains the toggle checkbox */
.woocommerce-shipping-fields > h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--woo-text);
  margin-bottom: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.woocommerce-shipping-fields > h3 label {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer;
  font-weight: 700 !important;
  font-size: 15px;
  margin-bottom: 0 !important;
}

/* Checkout coupon form — flex row: input grows, button auto-width */
.checkout_coupon.woocommerce-form-coupon {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  background: var(--woo-card-bg);
  border: 1px solid var(--woo-border);
  padding: 16px 20px;
  margin-bottom: 16px;
}

/* Hide the WC intro paragraph ("Enter your coupon code if you have one.") */
.checkout_coupon > p:not(.form-row) {
  display: none;
}

.checkout_coupon .form-row-first {
  flex: 1 !important;
  min-width: 0;
  float: none !important;
  width: auto !important;
  clear: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
}

.checkout_coupon .form-row-last {
  flex-shrink: 0;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
}

.checkout_coupon .form-row-first input.input-text {
  width: 100% !important;
  height: 44px !important;
  padding: 0 16px !important;
}

.checkout_coupon .form-row-last button[name="apply_coupon"] br {
  display: none;
}

.checkout_coupon .form-row-last button[name="apply_coupon"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: 44px !important;
  background-color: var(--woo-primary) !important;
  border: 1px solid var(--woo-primary) !important;
  color: #ffffff !important;
  font-family: "Lato", sans-serif !important;
  font-size: 16px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  text-transform: capitalize !important;
  letter-spacing: 0 !important;
  padding: 0 20px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease !important;
}

.checkout_coupon .form-row-last button[name="apply_coupon"]:hover {
  background-color: var(--woo-primary-dark) !important;
  border-color: var(--woo-primary-dark) !important;
  color: #ffffff !important;
}

.checkout_coupon .clear {
  display: none;
}

/* Applied coupon tags — shown below the coupon toggle */
/* Applied coupons — lives inside form.checkout_coupon,
   spans full row in the flex container, separated by a top border */
.woo-checkout-applied-coupons br {
  display: none;
}

.checkout_coupon .woo-checkout-applied-coupons {
  flex-basis: 100%;
  padding-top: 12px;
  border-top: 1px solid var(--woo-border);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.checkout_coupon
  .woo-checkout-applied-coupons:not(:has(.woo-coupon-code-pill)) {
  display: none;
}

/* Pills inside the applied section sit inline — no top margin needed */
.checkout_coupon .woo-checkout-applied-coupons .woo-coupon-code-pill {
  margin-top: 0;
}

/* × button inside checkout pills — match order-review pill's muted color */
.woo-coupon-code-pill a.woo-checkout-ajax-remove-coupon {
  color: var(--woo-text-muted);
  text-decoration: none !important;
  font-size: 1rem;
  line-height: 1;
  font-weight: 400;
}

.woo-checkout-applied-label {
  font-family: "Lato", sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--woo-heading);
}

/* Coupon error/success inline notice */
.woo-checkout-coupon-result {
  display: none;
  flex-basis: 100%;
  font-family: "Lato", sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  margin-top: 8px;
  padding: 0;
  border: none;
  background: transparent;
  color: #b81c1c;
}

.woo-checkout-coupon-result.is-success {
  color: var(--woo-success);
}

/* Payment section — remove any inner horizontal scrollbar */
#payment {
  overflow-x: hidden;
}

/* Checkout form — exact match of cart coupon input style */
.woocommerce-checkout .woocommerce-input-wrapper {
  display: block !important;
  width: 100% !important;
}

/* Labels — var(--woo-heading) #202020, 16px, bold */
.woocommerce-checkout label,
.woocommerce-checkout .form-row label {
  color: var(--woo-heading) !important;
  font-family: "Lato", sans-serif !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  text-transform: capitalize !important;
  display: block !important;
  margin-bottom: 6px !important;
}

/* Checkbox labels — flex row with 8px gap to match payment radio spacing */
.woocommerce-checkout .form-row label.woocommerce-form__label-for-checkbox,
.woocommerce-checkout label.woocommerce-form__label-for-checkbox {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer;
  margin-bottom: 0 !important;
  text-transform: none !important;
  font-weight: 700 !important;
}

/* Hide WooCommerce-injected <br> tags inside checkbox labels */
.woocommerce-checkout .woocommerce-form__label-for-checkbox br,
.woocommerce-shipping-fields > h3 br {
  display: none;
}

/* Text inputs — height 44px, padding 0 16px: matches cart coupon input */
.woocommerce-checkout input.input-text {
  background: var(--woo-bg) !important;
  color: var(--woo-text-dark) !important;
  border: 1px solid var(--woo-border-mid) !important;
  font-family: "Lato", sans-serif !important;
  font-size: 0.9375rem !important;
  height: 44px !important;
  line-height: 44px !important;
  padding: 0 16px !important;
  width: 100% !important;
  outline: none !important;
  border-radius: 0 !important;
  box-sizing: border-box !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  transition: border-color 0.3s !important;
}

/* Select — height 44px with explicit vertical padding reset for cross-browser consistency */
.woocommerce-checkout select {
  background: var(--woo-bg) !important;
  color: var(--woo-text-dark) !important;
  border: 1px solid var(--woo-border-mid) !important;
  font-family: "Lato", sans-serif !important;
  font-size: 0.9375rem !important;
  height: 44px !important;
  padding: 0 36px 0 16px !important;
  margin: 0 !important;
  width: 100% !important;
  outline: none !important;
  border-radius: 0 !important;
  box-sizing: border-box !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  transition: border-color 0.3s !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  cursor: pointer !important;
}

/* ─── Select2 — WooCommerce replaces Country/State native selects with select2 ─── */
/* Applies to checkout, account billing/shipping edit, and any other WooCommerce page */
.woocommerce-checkout .select2-container,
.woocommerce-account .select2-container,
.woocommerce-page .select2-container {
  width: 100% !important;
}

.woocommerce-checkout .select2-container .select2-selection--single,
.woocommerce-account .select2-container .select2-selection--single,
.woocommerce-page .select2-container .select2-selection--single {
  height: 44px !important;
  border: 1px solid var(--woo-border-mid) !important;
  border-radius: 0 !important;
  background-color: var(--woo-bg) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  outline: none !important;
  box-shadow: none !important;
}

.woocommerce-checkout
  .select2-container
  .select2-selection--single
  .select2-selection__rendered,
.woocommerce-account
  .select2-container
  .select2-selection--single
  .select2-selection__rendered,
.woocommerce-page
  .select2-container
  .select2-selection--single
  .select2-selection__rendered {
  color: var(--woo-text-dark) !important;
  font-family: "Lato", sans-serif !important;
  font-size: 0.9375rem !important;
  line-height: 44px !important;
  padding-left: 16px !important;
  padding-right: 36px !important;
}

.woocommerce-checkout
  .select2-container
  .select2-selection--single
  .select2-selection__arrow,
.woocommerce-account
  .select2-container
  .select2-selection--single
  .select2-selection__arrow,
.woocommerce-page
  .select2-container
  .select2-selection--single
  .select2-selection__arrow {
  display: none !important;
}

.woocommerce-checkout .select2-container--open .select2-selection--single,
.woocommerce-checkout .select2-container--focus .select2-selection--single,
.woocommerce-account .select2-container--open .select2-selection--single,
.woocommerce-account .select2-container--focus .select2-selection--single,
.woocommerce-page .select2-container--open .select2-selection--single,
.woocommerce-page .select2-container--focus .select2-selection--single {
  border-color: var(--woo-primary) !important;
  box-shadow: none !important;
  outline: none !important;
}

.woocommerce-checkout .select2-dropdown,
.woocommerce-account .select2-dropdown,
.woocommerce-page .select2-dropdown {
  border: 1px solid var(--woo-border-mid) !important;
  border-radius: 0 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

.woocommerce-checkout .select2-results__option,
.woocommerce-account .select2-results__option,
.woocommerce-page .select2-results__option {
  font-family: "Lato", sans-serif !important;
  font-size: 0.9375rem !important;
  padding: 8px 16px !important;
  color: var(--woo-text-dark) !important;
}

/* Hover/keyboard-navigate highlight */
.woocommerce-checkout .select2-results__option--highlighted,
.woocommerce-checkout .select2-results__option--highlighted[aria-selected],
.woocommerce-checkout .select2-results__option--highlighted[data-selected],
.woocommerce-account .select2-results__option--highlighted,
.woocommerce-account .select2-results__option--highlighted[aria-selected],
.woocommerce-account .select2-results__option--highlighted[data-selected],
.woocommerce-page .select2-results__option--highlighted,
.woocommerce-page .select2-results__option--highlighted[aria-selected],
.woocommerce-page .select2-results__option--highlighted[data-selected] {
  background-color: #3875d7 !important;
  color: #fff !important;
}

/* Currently selected option shown in open list */
.woocommerce-checkout .select2-results__option[aria-selected="true"],
.woocommerce-account .select2-results__option[aria-selected="true"],
.woocommerce-page .select2-results__option[aria-selected="true"] {
  background-color: #3875d7 !important;
  color: #fff !important;
}

.woocommerce-checkout .select2-search--dropdown .select2-search__field,
.woocommerce-account .select2-search--dropdown .select2-search__field,
.woocommerce-page .select2-search--dropdown .select2-search__field {
  border: 1px solid var(--woo-border-mid) !important;
  border-radius: 0 !important;
  padding: 8px 12px !important;
  font-family: "Lato", sans-serif !important;
  font-size: 0.9375rem !important;
  outline: none !important;
}

.woocommerce-checkout .select2-search--dropdown .select2-search__field:focus,
.woocommerce-account .select2-search--dropdown .select2-search__field:focus,
.woocommerce-page .select2-search--dropdown .select2-search__field:focus {
  border-color: var(--woo-primary) !important;
  outline: none !important;
}

/* woocommerce-invalid — style Select2 trigger to match text input invalid state */
.woocommerce-checkout
  .form-row.woocommerce-invalid
  .select2-container
  .select2-selection--single,
.woocommerce-account
  .form-row.woocommerce-invalid
  .select2-container
  .select2-selection--single {
  border-color: #b81c1c !important;
}

/* When invalid field is open/focused, show orange (consistent with valid open state) */
.woocommerce-checkout
  .form-row.woocommerce-invalid
  .select2-container--open
  .select2-selection--single,
.woocommerce-checkout
  .form-row.woocommerce-invalid
  .select2-container--focus
  .select2-selection--single,
.woocommerce-account
  .form-row.woocommerce-invalid
  .select2-container--open
  .select2-selection--single,
.woocommerce-account
  .form-row.woocommerce-invalid
  .select2-container--focus
  .select2-selection--single {
  border-color: var(--woo-primary) !important;
}

/* Textarea — auto height, vertical padding */
.woocommerce-checkout textarea {
  background: var(--woo-bg) !important;
  color: var(--woo-text-dark) !important;
  border: 1px solid var(--woo-border-mid) !important;
  font-family: "Lato", sans-serif !important;
  font-size: 0.9375rem !important;
  height: auto !important;
  min-height: 120px !important;
  padding: 12px 16px !important;
  width: 100% !important;
  outline: none !important;
  border-radius: 0 !important;
  box-sizing: border-box !important;
  transition: border-color 0.3s !important;
  resize: vertical !important;
}

.woocommerce-checkout input.input-text:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus {
  border-color: var(--woo-primary) !important;
  box-shadow: none !important;
  outline: none !important;
}

.woocommerce-checkout input.input-text::placeholder,
.woocommerce-checkout textarea::placeholder {
  color: var(--woo-text-muted) !important;
}

.woocommerce-checkout .woocommerce-billing-fields__field-wrapper {
  display: contents;
}

/* =========================================================
   NOTICES
   ========================================================= */

.woocommerce-message,
.woocommerce-info {
  background: var(--woo-card-bg);
  color: var(--woo-heading);
  font-family: "Lato", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  padding: 14px 20px;
  margin-bottom: 24px;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.woocommerce-info {
  border-top: none;
}

ul.woocommerce-error,
.woocommerce-error {
  background: var(--woo-card-bg) !important;
  background-color: var(--woo-card-bg) !important;
  border: none !important;
  box-shadow: none !important;
  padding: 14px 20px !important;
  color: var(--woo-heading) !important;
  font-family: "Lato", sans-serif !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  /* Icon (ul::before) + li sit side-by-side as flex siblings */
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  margin-bottom: 24px !important;
  list-style: none !important;
  border-radius: 0 !important;
}

/* Info icon on the ul — direct flex sibling of li, so li gets a properly constrained width */
ul.woocommerce-error::before,
.woocommerce-error::before {
  content: "" !important;
  display: block !important;
  flex-shrink: 0 !important;
  width: 20px !important;
  height: 20px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23202020' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
}

/* li fills remaining space beside the icon; block display so text wraps naturally */
ul.woocommerce-error li,
.woocommerce-error li {
  flex: 1 1 0 !important;
  display: block !important;
  overflow: hidden !important; /* contain the floated button */
  color: var(--woo-heading) !important;
  font-size: 1rem !important;
  font-family: "Lato", sans-serif !important;
  font-weight: 700 !important;
  list-style: none !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}

/* Kill li::before — icon is now on ul::before */
ul.woocommerce-error li::before,
.woocommerce-error li::before {
  content: none !important;
  display: none !important;
}

/* Desktop: center icon vertically; li becomes grid so text and button both center */
@media (min-width: 576px) {
  ul.woocommerce-error,
  .woocommerce-error {
    align-items: center !important;
  }

  ul.woocommerce-error li,
  .woocommerce-error li {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    align-items: center !important;
    column-gap: 16px !important;
    overflow: visible !important;
  }

  .woocommerce-error a.button,
  .woocommerce-error .button {
    float: none !important;
    margin-left: 0 !important;
  }
}

.woocommerce-message a.button,
.woocommerce-message .button {
  height: auto !important;
  line-height: 20px !important;
  padding: 11px 20px !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  background-color: var(--woo-primary) !important;
  border-color: var(--woo-primary) !important;
  color: #ffffff !important;
  text-transform: none !important;
}

.woocommerce-message a.button:hover,
.woocommerce-message .button:hover {
  background-color: #fff !important;
  color: var(--woo-primary) !important;
  border-color: var(--woo-primary) !important;
}

/* Error notice "View cart" button — same orange as success, floated right inside block li */
.woocommerce-error a.button,
.woocommerce-error .button {
  height: auto !important;
  line-height: 20px !important;
  padding: 11px 20px !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  background-color: var(--woo-primary) !important;
  border-color: var(--woo-primary) !important;
  color: #ffffff !important;
  text-transform: none !important;
  white-space: nowrap !important;
  float: right !important;
  margin-left: 12px !important;
}

.woocommerce-error a.button:hover,
.woocommerce-error .button:hover {
  background-color: #fff !important;
  color: var(--woo-primary) !important;
  border-color: var(--woo-primary) !important;
}

.woocommerce-message a,
.woocommerce-info a,
.woocommerce-error a {
  color: var(--woo-primary);
  text-decoration: none;
}

/* Error notice — mobile: button on own line below text, natural width, left-aligned */
@media (max-width: 575px) {
  .woocommerce-error a.button,
  .woocommerce-error .button {
    float: none !important;
    display: block !important;
    width: fit-content !important;
    margin-left: 0 !important;
    margin-top: 10px !important;
  }
}

/* =========================================================
   CART PAGE
   ========================================================= */

.woo-cart-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 40px;
  align-items: start;
}

@media (max-width: 1000px) {
  .woo-cart-layout {
    grid-template-columns: 1fr;
  }
}

.woo-cart-header {
  display: grid;
  grid-template-columns: 3fr 1fr 1fr 1fr 40px;
  gap: 12px;
  padding: 12px 16px;
  background: var(--woo-card-bg-alt);
}

@media (max-width: 600px) {
  .woo-cart-header {
    display: none;
  }
}

.woo-cart-col {
  font-family: "Lato", sans-serif;
  font-size: 16px;
  font-weight: 900;
  text-transform: capitalize;
  letter-spacing: 0.06em;
  color: var(--woo-heading);
}

.woo-cart-items {
  border: none;
}

.woo-cart-row {
  display: grid;
  grid-template-columns: 3fr 1fr 1fr 1fr 40px;
  gap: 12px;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid var(--woo-border);
  transition: background 0.2s;
}

/* Keep price/qty/subtotal/remove top-aligned when product col is tall */
.woo-cart-col--price,
.woo-cart-col--qty,
.woo-cart-col--total,
.woo-cart-col--remove {
  align-self: center;
}

/* Quantity cell — flex so +/- buttons sit inline */
.woo-cart-col--qty .quantity {
  display: flex;
  align-items: center;
}

/* Font size for price/subtotal data cells only (not the header row) */
.woo-cart-row .woo-cart-col--price,
.woo-cart-row .woo-cart-col--total {
  font-size: 1rem;
  font-family: "Lato", sans-serif;
  font-weight: 600;
}

.woo-cart-row:hover {
  background: var(--woo-card-bg);
}

@media (max-width: 600px) {
  .woo-cart-row {
    grid-template-columns: 1fr;
    position: relative;
    padding-right: 52px; /* reserve space for the pinned × button */
  }

  /* Label each data column with its heading */
  .woo-cart-col::before {
    content: attr(data-title) ": ";
    display: block;
    font-weight: 700;
    color: var(--woo-heading);
    text-transform: capitalize;
    font-size: 1rem;
    margin-bottom: 4px;
  }

  /* Product and remove columns need no label */
  .woo-cart-col--product::before,
  .woo-cart-col--remove::before {
    display: none;
  }

  /* Pin the × button to the top-right of the card */
  .woo-cart-col--remove {
    position: absolute;
    top: 16px;
    right: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.woo-cart-product-info {
  display: flex;
  align-items: center;
  gap: 16px;
}

.woo-cart-thumb {
  flex-shrink: 0;
  width: 70px;
  height: 70px;
  background: var(--woo-image-bg);
  overflow: hidden;
  box-shadow: 0 0 0 1px #e0e0e0;
}

.woo-cart-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.woo-cart-product-name {
  display: block;
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* !important needed — .woocommerce a (line ~3354) has same specificity but loads later */
.woo-cart-product-name a {
  color: var(--woo-heading) !important;
  text-decoration: none;
  font-weight: 700;
  font-size: 16px !important;
  line-height: 1.4;
  text-transform: none !important;
  letter-spacing: normal !important;
  transition: color 0.3s;
}

.woo-cart-product-name a:hover {
  color: var(--woo-primary) !important;
}

/* Variation meta (Vehicle Manufacturer: Jeep, Vehicle Year: 2025) — one line per attribute */
.woo-cart-product-details .variation {
  margin: 6px 0 0;
  padding: 0;
}

.woo-cart-product-details .variation dt,
.woo-cart-product-details .variation dd {
  display: inline;
  font-size: 0.8125rem;
  color: var(--woo-text-muted);
  font-weight: 400;
  text-transform: none !important;
  letter-spacing: normal !important;
  margin: 0;
  padding: 0;
}

/* The <p> inside dt/dd needs to be inline too */
.woo-cart-product-details .variation dt p,
.woo-cart-product-details .variation dd p {
  display: inline;
  margin: 0;
  color: var(--woo-heading) !important;
}

/* Line break after each dd value so each attribute is on its own line */
.woo-cart-product-details .variation dd::after {
  content: "\A";
  white-space: pre;
}

/* Price column — dark heading color; Subtotal column keeps orange */
.woo-cart-col--price .woocommerce-Price-amount {
  color: var(--woo-heading) !important;
  font-weight: 600;
  font-size: 16px;
}
.woo-cart-col--total .woocommerce-Price-amount {
  color: var(--woo-primary);
  font-weight: 600;
  font-size: 16px;
}

.woo-cart-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: transparent;
  border: 1px solid var(--woo-border-mid);
  color: var(--woo-text-muted);
  font-size: 1.25rem;
  line-height: 1;
  text-decoration: none;
  transition: all 0.3s;
}

.woo-cart-remove:hover {
  border-color: var(--woo-primary);
  color: var(--woo-primary);
}

.woo-cart-actions-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 12px;
  padding: 20px 16px;
  border-top: 1px solid var(--woo-border);
  margin-top: 10px;
}

/* Cart sidebar — stacks coupon box above cart totals */
.woo-cart-sidebar {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ── Sidebar coupon box ───────────────────────────── */
.woo-cart-coupon-box {
  background: var(--woo-card-bg);
  border: 1px solid var(--woo-border);
  border-bottom: none;
  padding: 16px 20px;
}

.woo-cart-coupon-box__title {
  font-family: "Lato", sans-serif;
  font-size: 16px;
  font-weight: 900;
  text-transform: capitalize;
  letter-spacing: 0.06em;
  color: var(--woo-heading);
  margin: 0 0 10px;
}

.woo-cart-coupon-box__row {
  display: flex;
  gap: 10px;
  align-items: center;
}

.woo-cart-coupon-box__row .woo-input {
  flex: 1;
  min-width: 0;
  height: 44px !important;
  padding: 0 16px !important;
  box-sizing: border-box !important;
}

@media (max-width: 480px) {
  .woo-cart-coupon-box__row button[name="apply_coupon"],
  .woo-cart-coupon-box__row .woo-btn {
    font-size: 14px !important;
    padding: 0 12px !important;
  }
}

/* Cart totals box */
.woocommerce .cart_totals {
  background: var(--woo-card-bg);
  border: 1px solid var(--woo-border);
  padding: 24px;
  overflow: hidden;
}

.woocommerce .cart_totals h2 {
  font-family: "Lato", sans-serif;
  font-size: 1rem;
  font-weight: 900;
  color: var(--woo-heading);
  text-transform: capitalize;
  letter-spacing: 0.06em;
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--woo-border);
}

/* Force table to never overflow its container; strip WooCommerce border box */
.woocommerce .cart_totals table,
.woocommerce .cart_totals .shop_table {
  width: 100% !important;
  min-width: 0 !important;
  border-collapse: collapse;
  table-layout: fixed;
  border: none !important;
}

.woocommerce .cart_totals table th,
.woocommerce .cart_totals table td {
  padding: 12px 0;
  border: none !important;
  border-bottom: 1px solid var(--woo-border) !important;
  font-family: "Lato", sans-serif;
  color: var(--woo-text);
  font-size: 1rem;
  overflow: hidden;
  word-break: break-word;
}

.woocommerce .cart_totals table th {
  font-weight: 700;
  text-transform: capitalize;
  letter-spacing: 0.04em;
  font-size: 1rem;
  color: var(--woo-heading);
  width: 50%;
}

.woocommerce .cart_totals table td {
  text-align: right;
  width: 50%;
}

.woocommerce .cart_totals .order-total th,
.woocommerce .cart_totals .order-total td {
  color: var(--woo-heading);
  font-size: 1rem;
  font-weight: 900;
  border-bottom: none;
  padding-top: 14px;
}

.woocommerce .cart_totals .order-total td .amount,
.woocommerce .cart_totals .cart-subtotal td .amount {
  color: var(--woo-primary);
  font-weight: 700;
}

/* Subtotal, Discount, Shipping and Total row labels — normal weight to match their values */
.woocommerce .cart_totals .cart-subtotal th,
.woocommerce .cart_totals .cart-discount th,
.woocommerce .cart_totals .shipping th,
.woocommerce .cart_totals .order-total th {
  font-weight: 400;
}

.woocommerce .cart_totals .cart-discount td .amount {
  font-weight: 700;
}

/* Price aligns with the coupon pill (line 2 of th), not the "Discount" label (line 1) */
.woocommerce .cart_totals .cart-discount td,
.woocommerce-checkout-review-order table tfoot .cart-discount td {
  vertical-align: bottom;
}

/* Shipping row — right-aligned list of shipping options + destination */
.woocommerce .cart_totals .shipping td {
  text-align: right;
  vertical-align: top;
}

.woocommerce .cart_totals .shipping td #shipping_method {
  list-style: none;
  margin: 0;
  padding: 0;
}

.woocommerce .cart_totals .shipping td #shipping_method li {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 6px;
}

.woocommerce .cart_totals .shipping td #shipping_method li:last-child {
  margin-bottom: 0;
}

.woocommerce .cart_totals .shipping td #shipping_method input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 2px solid var(--woo-border);
  border-radius: 50%;
  flex-shrink: 0;
  cursor: pointer;
  position: relative;
  order: 1;
  margin: 0;
}

.woocommerce
  .cart_totals
  .shipping
  td
  #shipping_method
  input[type="radio"]:checked {
  border-color: var(--woo-primary);
  background: radial-gradient(circle, var(--woo-primary) 45%, transparent 45%);
}

.woocommerce .cart_totals .shipping td #shipping_method label {
  order: 0;
  cursor: pointer;
  color: var(--woo-heading);
  font-size: 1rem;
  font-weight: 400;
  font-style: normal;
  font-family: "Lato", sans-serif;
  line-height: 1.4;
  margin: 0;
}

.woocommerce .cart_totals .shipping td #shipping_method label .amount {
  color: var(--woo-primary);
  font-weight: 700;
}

.woocommerce .cart_totals .shipping td .woocommerce-shipping-destination {
  display: none;
}

/* Proceed to Checkout — match Contact header button */
.woocommerce .wc-proceed-to-checkout {
  margin-top: 20px;
}

.woocommerce .wc-proceed-to-checkout a.checkout-button,
.woocommerce .wc-proceed-to-checkout a.checkout-button:visited {
  display: block;
  width: 100%;
  text-align: center;
  background: var(--woo-primary) !important;
  color: #fff !important;
  border-color: var(--woo-primary) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: 0.03em !important;
  height: auto !important;
  line-height: 20px !important;
  padding: 11px 24px !important;
  transition:
    background 0.25s,
    border-color 0.25s !important;
}

.woocommerce .wc-proceed-to-checkout a.checkout-button:hover {
  background: var(--woo-primary-dark) !important;
  border-color: var(--woo-primary-dark) !important;
  color: #fff !important;
}

/* Apply Coupon button — match Contact header button, equal height with input */
.woo-cart-coupon-box__row button[name="apply_coupon"],
.woo-cart-coupon-box__row .woo-btn {
  background-color: var(--woo-primary) !important;
  border-color: var(--woo-primary) !important;
  color: #fff !important;
  text-transform: capitalize !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
  height: 44px !important;
  line-height: 1 !important;
  padding: 0 18px !important;
  box-sizing: border-box !important;
  white-space: nowrap;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.woo-cart-coupon-box__row button[name="apply_coupon"]:hover,
.woo-cart-coupon-box__row .woo-btn:hover {
  background-color: var(--woo-primary-dark) !important;
  border-color: var(--woo-primary-dark) !important;
}

/* Hide Update Cart button — cart auto-updates via JS */
.woo-cart-actions-row {
  display: none !important;
}

/* AJAX cart update: dim items while updating */
.woo-cart-items.woo-cart-updating {
  opacity: 0.5;
  pointer-events: none;
  transition: opacity 0.2s;
}

/* Temporary cart update notice */
.woo-cart-update-notice {
  margin-bottom: 16px;
}

/* Inline coupon feedback — sits below the coupon input row */
.woo-coupon-msg {
  display: none;
  font-family: "Lato", sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  margin-top: 8px;
  line-height: 1.4;
}
.woo-coupon-msg.is-error {
  display: block;
  color: #b81c1c !important;
}
.woo-coupon-msg.is-success {
  display: block;
  color: var(--woo-success);
}

/* Red border on the coupon input when there's an error */
#coupon_code.woo-input--error {
  border-color: #b81c1c !important;
  outline: none;
}

/* Coupon display in Cart Totals — "Discount" label + code pill in <th> */
.woo-coupon-code-pill {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 20px;
  padding: 3px 8px 3px 10px;
  font-family: "Lato", sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--woo-heading);
  line-height: 1;
}
.woo-coupon-code-pill a.woocommerce-remove-coupon {
  color: var(--woo-text-muted);
  text-decoration: none !important;
  font-size: 1rem;
  line-height: 1;
  font-weight: 400;
}

.woocommerce .cross-sells h2 {
  font-family: "Lato", sans-serif;
  font-size: 1.125rem !important;
  font-weight: 700;
  color: var(--woo-heading);
  text-transform: capitalize;
  letter-spacing: 0;
  margin: 40px 0 20px;
}

/* =========================================================
   CHECKOUT PAGE
   ========================================================= */

.woo-checkout-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  column-gap: 40px;
  align-items: start;
}

@media (max-width: 1000px) {
  .woo-checkout-layout {
    grid-template-columns: 1fr;
    row-gap: 24px;
  }
}

.woo-checkout-section {
  background: var(--woo-card-bg);
  border: 1px solid var(--woo-border);
  padding: 24px;
  margin-bottom: 24px;
}

.woo-checkout-section:last-of-type {
  margin-bottom: 0;
}

/* Suppress WooCommerce-injected empty <p> tags everywhere in checkout */
.woo-checkout-left > p:empty,
.woo-checkout-right > p:empty,
.woo-checkout-form > p:empty,
.woo-checkout-section p:empty,
.woocommerce-checkout p:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Remove bottom margin from last form-row inside checkout cards */
.woo-checkout-section .form-row:last-child,
.woo-checkout-section .form-row:last-of-type {
  margin-bottom: 0 !important;
}

/* Create an account checkbox — spacing fix */
.woocommerce-checkout .create-account {
  margin-top: 16px !important;
  margin-bottom: 0 !important;
}

/* Order Notes textarea — remove WC default bottom margin */
.woocommerce-checkout .form-row.notes {
  margin-bottom: 0 !important;
}

/* Pre-form notices (login/coupon toggles) — contained to left column, no extra top gap */
.woo-checkout-pre-form {
  margin-bottom: 0;
}

/* Accordion toggle cards — single card wrapping header + collapsible form */
.woo-checkout-pre-toggle {
  background: var(--woo-card-bg);
  border: 1px solid var(--woo-border);
  margin-bottom: 12px;
}

.woo-checkout-pre-toggle__header {
  padding: 16px 24px;
}

.woo-checkout-pre-toggle__notice {
  margin: 0;
  font-family: "Lato", sans-serif;
  font-size: 0.9375rem;
  color: var(--woo-text);
  line-height: 1.4;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.woo-checkout-pre-toggle__notice a.showlogin,
.woo-checkout-pre-toggle__notice a.showcoupon {
  color: var(--woo-primary);
  font-weight: 700;
  text-decoration: none;
}

.woo-checkout-pre-toggle__notice a:hover {
  text-decoration: underline;
}

/* Login form inside accordion — top separator only, no outer card */
.woo-checkout-pre-form form.login {
  border-top: 1px solid var(--woo-border);
  padding: 20px 24px;
  margin-bottom: 0;
}

/* Coupon form inside accordion — override standalone card styles */
.woo-checkout-pre-toggle .checkout_coupon.woocommerce-form-coupon {
  border: none;
  border-top: 1px solid var(--woo-border);
  background: transparent;
  margin-bottom: 0;
  padding: 16px 24px;
}

/* Reset browser default <p> margins inside login form */
.woo-checkout-pre-form form.login p,
.woo-checkout-pre-form form.login .form-row {
  margin-top: 0;
}

/* Description paragraph at top */
.woo-checkout-pre-form form.login > p:first-of-type {
  margin-bottom: 16px;
}

/* Full-width stacked fields — match billing form row gap (20px) */
.woo-checkout-pre-form form.login .form-row-first,
.woo-checkout-pre-form form.login .form-row-last,
.woo-checkout-pre-form form.login .woo-login-field {
  width: 100% !important;
  float: none !important;
  clear: both !important;
  margin-right: 0 !important;
  margin-bottom: 20px !important;
}

/* All other form rows — match billing 20px gap */
.woo-checkout-pre-form form.login .form-row {
  margin-bottom: 20px;
}

/* Hide clearfix divs, WooCommerce-injected <br> tags, and rogue output */
.woo-checkout-pre-form form.login div.clear,
.woo-checkout-pre-form form.login #password-strength-result,
.woo-checkout-pre-form form.login br,
.woo-checkout-pre-form .woo-login-actions br {
  display: none;
}

/* Password wrapper — relative so the eye button positions inside the field */
.woo-checkout-pre-form form.login span.password-input {
  position: relative;
  display: block;
}

/* Push input text away from the eye button */
.woo-checkout-pre-form form.login span.password-input input.input-text {
  padding-right: 48px !important;
}

/* Eye button — sits on the right edge of the password input */
.woo-checkout-pre-form form.login .show-password-input {
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 44px !important;
  height: 44px !important;
  border: none !important;
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 18px 18px !important;
  cursor: pointer !important;
  padding: 0 !important;
  font-size: 0 !important; /* hide any fallback text/icon font character */
  color: transparent !important;
  /* Eye-open SVG */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Eye-slash when password is revealed (WooCommerce adds class "display-password") */
.woo-checkout-pre-form form.login .show-password-input.display-password {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E") !important;
}

/* WooCommerce's own ::after icon-font content — suppress it */
.woo-checkout-pre-form form.login .show-password-input::after {
  content: none !important;
}

/* AJAX login inline error — sits below the Login button row */
.woo-checkout-pre-form form.login .woo-login-ajax-error {
  color: #b81c1c;
  font-family: "Lato", sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  margin-top: 12px;
  margin-bottom: 0;
  line-height: 1.4;
}

/* Remember Me row */
.woo-checkout-pre-form form.login .woo-login-remember {
  margin-bottom: 16px;
}

.woo-checkout-pre-form form.login .woocommerce-form-login__rememberme {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer;
  margin-bottom: 0 !important;
}

/* Login button + Lost your password — single flex row, tightly coupled */
.woo-checkout-pre-form form.login .woo-login-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 0;
}

/* Lost your password link */
.woo-checkout-pre-form form.login .lost_password_link {
  color: var(--woo-primary);
  text-decoration: none;
  font-size: 16px;
  font-weight: 700;
  font-family: "Lato", sans-serif;
  line-height: 44px; /* vertically centred against the 44px Login button */
}
.woo-checkout-pre-form form.login .lost_password_link:hover {
  text-decoration: underline;
}

/* Login button — identical style to Apply Coupon */
.woo-checkout-pre-form form.login button[name="login"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: 44px !important;
  background-color: var(--woo-primary) !important;
  border: 1px solid var(--woo-primary) !important;
  color: #ffffff !important;
  font-family: "Lato", sans-serif !important;
  font-size: 16px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  text-transform: capitalize !important;
  letter-spacing: 0 !important;
  padding: 0 20px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  border-radius: 0 !important;
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease !important;
}

.woo-checkout-pre-form form.login button[name="login"]:hover {
  background-color: var(--woo-primary-dark) !important;
  border-color: var(--woo-primary-dark) !important;
  color: #ffffff !important;
}

.woo-checkout-section__title {
  font-family: "Lato", sans-serif;
  font-size: 1.125rem;
  font-weight: 900;
  color: var(--woo-heading);
  text-transform: capitalize;
  letter-spacing: 0.06em;
  margin: 0 0 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--woo-border);
}

.woocommerce .col2-set .col-1,
.woocommerce .col2-set .col-2 {
  float: none;
  width: 100%;
}

.woocommerce form .form-row-first,
.woocommerce form .form-row-last {
  width: 48%;
  float: left;
}

.woocommerce form .form-row-first {
  clear: left;
  margin-right: 4%;
}

@media (max-width: 600px) {
  .woocommerce form .form-row-first,
  .woocommerce form .form-row-last {
    width: 100%;
    float: none;
    margin-right: 0;
  }
}

/* Order review wrapper — kill all horizontal overflow/scrollbars */
.woocommerce-checkout-review-order,
.woocommerce-checkout-review-order table,
#payment,
#payment ul.wc_payment_methods,
#payment .payment_methods {
  overflow-x: hidden !important;
  max-width: 100% !important;
}

/* Override page.scss: .table-wrapper table { min-width:725px; border:1px solid #b9b9b9 }
   That rule causes the order review table to overflow the 360px right column. */
.woocommerce-checkout-review-order .table-wrapper table {
  min-width: 0 !important;
  border: none !important;
}

/* ── Order review table ──────────────────────────────────────────────── */
.woocommerce-checkout-review-order
  table.woocommerce-checkout-review-order-table {
  width: 100% !important;
  border-collapse: collapse !important;
  table-layout: fixed !important;
}

/* Right column: 45% gives tfoot/shipping rows enough room, left column fills the rest */
.woocommerce-checkout-review-order table thead th.product-total,
.woocommerce-checkout-review-order table tbody td.product-total,
.woocommerce-checkout-review-order table tfoot td {
  width: 45%;
}

/* thead — PRODUCT | SUBTOTAL headers */
.woocommerce-checkout-review-order table thead th {
  font-family: "Lato", sans-serif;
  font-size: 1rem;
  font-weight: 900;
  text-transform: capitalize;
  letter-spacing: 0.04em;
  color: var(--woo-heading);
  padding: 0 0 10px;
  border-bottom: 2px solid var(--woo-border);
}

.woocommerce-checkout-review-order table thead th.product-name {
  text-align: left;
}

.woocommerce-checkout-review-order table thead th.product-total {
  text-align: right;
}

/* tbody — product rows */
.woocommerce-checkout-review-order table tbody td {
  font-family: "Lato", sans-serif;
  font-size: 1rem;
  color: var(--woo-heading);
  padding: 10px 0;
  border-bottom: 1px solid var(--woo-border);
  vertical-align: top;
  overflow: hidden;
  word-break: break-word;
}

.woocommerce-checkout-review-order table tbody td.product-name {
  text-align: left;
  padding-right: 12px;
}

/* Variation meta (e.g. Vehicle Manufacturer: Jeep) — mirror cart style: inline dt+dd, one line per attribute */
.woocommerce-checkout-review-order table tbody td.product-name .variation {
  margin: 4px 0 0;
  padding: 0;
}

.woocommerce-checkout-review-order table tbody td.product-name .variation dt,
.woocommerce-checkout-review-order table tbody td.product-name .variation dd {
  display: inline;
  font-size: 0.8125rem;
  color: var(--woo-text-muted);
  font-weight: 400;
  margin: 0;
  padding: 0;
}

.woocommerce-checkout-review-order table tbody td.product-name .variation dt p,
.woocommerce-checkout-review-order table tbody td.product-name .variation dd p {
  display: inline;
  margin: 0;
  color: var(--woo-heading) !important;
}

.woocommerce-checkout-review-order
  table
  tbody
  td.product-name
  .variation
  dd::after {
  content: "\A";
  white-space: pre;
}

.woocommerce-checkout-review-order table tbody td.product-total {
  text-align: right;
  color: var(--woo-primary);
  font-weight: 700;
}

/* tfoot — standard table layout, columns align with tbody */
.woocommerce-checkout-review-order table tfoot th,
.woocommerce-checkout-review-order table tfoot td {
  font-family: "Lato", sans-serif;
  font-size: 1rem;
  color: var(--woo-text);
  padding: 12px 0;
  border-bottom: 1px solid var(--woo-border);
  vertical-align: middle;
  word-break: break-word;
}

.woocommerce-checkout-review-order table tfoot th {
  font-weight: 400;
  color: var(--woo-heading);
  text-align: left;
  text-transform: capitalize;
  letter-spacing: 0.04em;
}

.woocommerce-checkout-review-order table tfoot td {
  text-align: right;
}

/* All tfoot amounts — orange + bold */
.woocommerce-checkout-review-order table tfoot td .amount,
.woocommerce-checkout-review-order table tfoot td .woocommerce-Price-amount {
  color: var(--woo-primary);
  font-weight: 700;
}

/* Total row — bolder, no border */
.woocommerce-checkout-review-order table tfoot .order-total th,
.woocommerce-checkout-review-order table tfoot .order-total td {
  border-bottom: none;
  font-weight: 900;
  font-size: 1rem;
  color: var(--woo-heading);
  padding-top: 14px;
}

/* Coupon pill inside discount row */
.woocommerce-checkout-review-order
  table
  tfoot
  .cart-discount
  .woo-coupon-code-pill {
  margin-top: 0;
}

/* Shipping row — top-align th since td has multiple option lines */
.woocommerce-checkout-review-order table tfoot .shipping th,
.woocommerce-checkout-review-order table tfoot .shipping td {
  vertical-align: top;
}

.woocommerce-checkout-review-order table tfoot .shipping td #shipping_method {
  list-style: none;
  margin: 0;
  padding: 0;
}

.woocommerce-checkout-review-order
  table
  tfoot
  .shipping
  td
  #shipping_method
  li {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 6px;
}

.woocommerce-checkout-review-order
  table
  tfoot
  .shipping
  td
  #shipping_method
  li:last-child {
  margin-bottom: 0;
}

.woocommerce-checkout-review-order
  table
  tfoot
  .shipping
  td
  #shipping_method
  input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 2px solid var(--woo-border);
  border-radius: 50%;
  flex-shrink: 0;
  cursor: pointer;
  order: 1;
  margin: 0;
}

.woocommerce-checkout-review-order
  table
  tfoot
  .shipping
  td
  #shipping_method
  input[type="radio"]:checked {
  border-color: var(--woo-primary);
  background: radial-gradient(circle, var(--woo-primary) 45%, transparent 45%);
}

.woocommerce-checkout-review-order
  table
  tfoot
  .shipping
  td
  #shipping_method
  label {
  order: 0;
  cursor: pointer;
  color: var(--woo-heading) !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-family: "Lato", sans-serif !important;
  line-height: 1.4 !important;
  text-transform: none !important;
  margin: 0;
}

.woocommerce-checkout-review-order
  table
  tfoot
  .shipping
  td
  #shipping_method
  label
  .amount {
  color: var(--woo-primary);
  font-weight: 700;
}

.woocommerce-checkout-review-order
  table
  tfoot
  .shipping
  td
  .woocommerce-shipping-destination {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--woo-text-muted, #888);
  text-align: right;
}

/* Payment section */
#payment,
#order_review,
.woocommerce-checkout-payment {
  overflow-x: hidden !important;
}

#payment {
  background: transparent;
}

#payment .payment_methods {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  border: none;
}

#payment .payment_methods li {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 0;
  border-bottom: 1px solid var(--woo-border);
}

#payment .payment_methods li:last-child {
  border-bottom: none;
}

/* WC wraps the label in a <p> — make it a proper flex item */
#payment .payment_methods li > p {
  flex: 1;
  margin: 0;
  min-width: 0;
}

/* Hide the empty <p> WC inserts right after the radio */
#payment .payment_methods li > p:empty {
  display: none;
}

#payment .payment_methods li input[type="radio"] {
  accent-color: var(--woo-primary);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin: 0;
  cursor: pointer;
}

#payment .payment_methods li label {
  color: var(--woo-heading);
  font-family: "Lato", sans-serif;
  font-size: 1rem;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 600;
  cursor: pointer;
  display: flex !important;
  align-items: center;
  gap: 10px;
  margin: 0 !important;
}

/* Remove the <br> WC injects before the payment method label text */
#payment .payment_methods li label br {
  display: none;
}

/* Payment description box — full row below the radio+label */
#payment .payment_box {
  flex-basis: 100%;
  margin-left: 24px;
  background: var(--woo-card-bg-alt);
  border: 1px solid var(--woo-border);
  padding: 14px 16px;
  margin-top: 4px;
  font-family: "Lato", sans-serif;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--woo-text);
  border-radius: 0;
}

/* Place Order — exact match of header Contact button */
#payment .place-order {
  margin-top: 24px;
  margin-bottom: 0 !important;
}

#payment .place-order #place_order {
  display: block;
  width: 100%;
  text-align: center;
  background-color: var(--woo-primary);
  border: 1px solid var(--woo-primary);
  color: #ffffff;
  font-family: "Lato", sans-serif;
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
  text-transform: capitalize;
  letter-spacing: 0;
  padding: 14px 20px;
  height: auto;
  cursor: pointer;
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease;
}

#payment .place-order #place_order:hover {
  background-color: #ffffff;
  border-color: #ffffff;
  color: var(--woo-primary);
}

#order_comments {
  height: 100px;
  resize: vertical;
}

/* =========================================================
   MY ACCOUNT PAGE
   ========================================================= */

.woocommerce-account .woo-page-wrapper {
  padding-top: 60px;
}

.woocommerce-MyAccount-navigation {
  background: var(--woo-card-bg);
  border: 1px solid var(--woo-border);
  padding: 0;
}

.woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.woocommerce-MyAccount-navigation ul li a {
  display: block;
  padding: 12px 24px;
  color: var(--woo-text-mid);
  font-family: "Lato", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  text-transform: capitalize;
  letter-spacing: 0;
  text-decoration: none;
  transition:
    color 0.3s,
    background 0.3s;
  border-left: 2px solid transparent;
}

.woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-MyAccount-navigation ul li a:hover {
  color: var(--woo-primary);
  border-left-color: var(--woo-primary);
  background: color-mix(in srgb, var(--woo-primary) 8%, transparent);
}

.woocommerce-MyAccount-content {
  background: var(--woo-card-bg);
  border: 1px solid var(--woo-border);
  padding: 24px;
  margin-bottom: 0;
}

/* Logout section — inside dashboard content box, separated by a border line */
.woo-dashboard-logout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 20px -30px -30px;
  padding: 20px 30px;
  border-top: 1px solid var(--woo-border);
}

@media (max-width: 768px) {
  .woo-dashboard-logout {
    margin: 16px -16px -16px;
    padding: 16px;
  }
}

.woo-dashboard-logout__text {
  margin: 0 !important;
  font-family: "Lato", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: #202020 !important;
  line-height: 44px;
}

.woo-dashboard-logout__btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 44px !important;
  padding: 0 24px !important;
  background-color: var(--woo-primary) !important;
  border: 1px solid var(--woo-primary) !important;
  color: #ffffff !important;
  font-family: "Lato", sans-serif !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  text-transform: capitalize !important;
  text-decoration: none !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  transition: background-color 0.3s ease, border-color 0.3s ease !important;
}

.woo-dashboard-logout__btn:hover {
  background-color: var(--woo-primary-dark) !important;
  border-color: var(--woo-primary-dark) !important;
  color: #ffffff !important;
}

.woocommerce-account .woocommerce {
  display: grid;
  grid-template-columns: 220px 1fr;
  column-gap: 30px;
  row-gap: 8px;
  align-items: start;
}

@media (max-width: 768px) {
  .woocommerce-account .woocommerce {
    grid-template-columns: 1fr;
  }
  .woocommerce-MyAccount-content {
    padding: 16px;
  }

  /* Horizontal tab bar on tablet/mobile */
  .woocommerce-MyAccount-navigation {
    border-bottom: none;
    overflow: hidden;
  }
  .woocommerce-MyAccount-navigation ul {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    white-space: nowrap;
    border-bottom: 2px solid var(--woo-border);
  }
  .woocommerce-MyAccount-navigation ul::-webkit-scrollbar {
    display: none;
  }
  .woocommerce-MyAccount-navigation ul li {
    flex-shrink: 0;
  }
  .woocommerce-MyAccount-navigation ul li a {
    display: inline-block;
    padding: 10px 16px;
    font-size: 0.875rem;
    border-left: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
  }
  .woocommerce-MyAccount-navigation ul li.is-active a,
  .woocommerce-MyAccount-navigation ul li a:hover {
    border-left-color: transparent;
    border-bottom-color: var(--woo-primary);
    background: color-mix(in srgb, var(--woo-primary) 6%, transparent);
  }
}

@media (max-width: 576px) {
  .woocommerce-MyAccount-content {
    padding: 12px;
  }
  .woocommerce-MyAccount-navigation ul li a {
    padding: 10px 12px;
    font-size: 0.8125rem;
  }
}

/* =========================================================
   MY-ACCOUNT — LOGGED-IN PAGES
   Dashboard · Orders · Downloads · Addresses · Account Details
   ========================================================= */

/* ── All buttons inside account content — solid orange fill ── */
.woocommerce-account .woocommerce-MyAccount-content a.button,
.woocommerce-account .woocommerce-MyAccount-content button.button,
.woocommerce-account .woocommerce-MyAccount-content input.button,
.woocommerce-account .woocommerce-MyAccount-content .button {
  background-color: var(--woo-primary) !important;
  border-color: var(--woo-primary) !important;
  color: #fff !important;
  text-decoration: none !important;
}

.woocommerce-account .woocommerce-MyAccount-content a.button:hover,
.woocommerce-account .woocommerce-MyAccount-content button.button:hover,
.woocommerce-account .woocommerce-MyAccount-content input.button:hover,
.woocommerce-account .woocommerce-MyAccount-content .button:hover {
  background-color: var(--woo-primary) !important;
  border-color: var(--woo-primary) !important;
  color: #fff !important;
}

/* ── Content typography ────────────────────────────────── */
.woocommerce-MyAccount-content > p,
.woocommerce-MyAccount-content > div > p {
  font-family: "Lato", sans-serif;
  font-size: 1rem;
  color: var(--woo-text);
  line-height: 1.6;
  margin-bottom: 16px;
}

.woocommerce-MyAccount-content > p:last-child,
.woocommerce-MyAccount-content > div > p:last-child {
  margin-bottom: 0;
}

.woocommerce-MyAccount-content p a,
.woocommerce-MyAccount-content td a {
  color: var(--woo-primary);
  font-weight: 600;
  text-decoration: none;
}

.woocommerce-MyAccount-content p a:hover,
.woocommerce-MyAccount-content td a:hover {
  text-decoration: underline;
}

.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
  font-family: "Lato", sans-serif;
  font-size: 1.125rem;
  font-weight: 900;
  color: var(--woo-heading);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--woo-border);
}

/* ── Orders table ──────────────────────────────────────── */
/* Remove outer border injected by parent theme's page.scss (.table-wrapper table) */
.woocommerce-account .table-wrapper table.woocommerce-orders-table {
  border: none !important;
}

.woocommerce-account .woocommerce-orders-table {
  width: 100%;
  border-collapse: collapse;
  font-family: "Lato", sans-serif;
  font-size: 0.9375rem;
}

.woocommerce-account .woocommerce-orders-table thead th {
  padding: 12px 16px;
  text-align: left;
  font-size: 1rem;
  font-weight: 700;
  text-transform: capitalize;
  letter-spacing: 0;
  color: var(--woo-heading);
  border-bottom: 2px solid var(--woo-border);
  background: transparent;
  white-space: nowrap;
}

/* tbody th (order number uses th[scope=row]) + td share the same base styles */
.woocommerce-account .woocommerce-orders-table tbody td,
.woocommerce-account .woocommerce-orders-table tbody th {
  padding: 14px 16px !important;
  border-bottom: 1px solid var(--woo-border) !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  color: var(--woo-heading);
  font-family: "Lato", sans-serif;
  font-size: 1rem;
  font-weight: normal;
  vertical-align: middle;
  text-align: left;
}

.woocommerce-account .woocommerce-orders-table tbody tr:last-child td,
.woocommerce-account .woocommerce-orders-table tbody tr:last-child th {
  border-bottom: none !important;
}

/* Row hover effect removed per user request */

/* Suppress parent theme's a:focus { border: 1px solid #e4491d } on table links */
.woocommerce-account .woocommerce-orders-table td a,
.woocommerce-account .woocommerce-orders-table td a:hover,
.woocommerce-account .woocommerce-orders-table td a:focus,
.woocommerce-account .woocommerce-orders-table td a:focus-visible,
.woocommerce-account .woocommerce-orders-table td a:active,
.woocommerce-account .woocommerce-orders-table th a,
.woocommerce-account .woocommerce-orders-table th a:hover,
.woocommerce-account .woocommerce-orders-table th a:focus,
.woocommerce-account .woocommerce-orders-table th a:focus-visible,
.woocommerce-account .woocommerce-orders-table th a:active {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* Order number link */
.woocommerce-account .woocommerce-orders-table__cell-order-number a {
  color: var(--woo-primary);
  font-weight: 700;
  text-decoration: none;
}

.woocommerce-account .woocommerce-orders-table__cell-order-total .woocommerce-Price-amount {
  font-weight: 700;
}

.woocommerce-account .woocommerce-orders-table__cell-order-number a:hover {
  text-decoration: underline;
}

/* ── Order status badges ───────────────────────────────── */
.woocommerce-account .woocommerce-orders-table mark.order-status {
  display: inline-block;
  padding: 3px 10px;
  font-family: "Lato", sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 3px;
  background: var(--woo-bg);
  color: var(--woo-heading);
}

.woocommerce-account mark.order-status.status-processing {
  background: #dbeeff;
  color: #1a5cb0;
}
.woocommerce-account mark.order-status.status-completed {
  background: #dcf5e3;
  color: #1a7431;
}
.woocommerce-account mark.order-status.status-pending {
  background: #fff8e1;
  color: #7a5800;
}
.woocommerce-account mark.order-status.status-on-hold {
  background: #fff3cd;
  color: #7a5800;
}
.woocommerce-account mark.order-status.status-cancelled {
  background: #fdecea;
  color: #b81c1c;
}
.woocommerce-account mark.order-status.status-refunded {
  background: #f3e8ff;
  color: #6a3ea1;
}
.woocommerce-account mark.order-status.status-failed {
  background: #fdecea;
  color: #b81c1c;
}

/* ── Actions column: VIEW button — solid orange fill ── */
.woocommerce-account .woocommerce-orders-table__cell-order-actions .button,
.woocommerce-account .woocommerce-orders-table__cell-order-actions a.button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 44px !important;
  line-height: 20px !important;
  padding: 0 20px !important;
  font-family: "Lato", sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  text-transform: capitalize !important;
  letter-spacing: 0 !important;
  background: var(--woo-primary) !important;
  border: 1px solid var(--woo-primary) !important;
  color: #fff !important;
  text-decoration: none !important;
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease !important;
  white-space: nowrap !important;
  border-radius: 0 !important;
  cursor: pointer !important;
}

.woocommerce-account .woocommerce-orders-table__cell-order-actions .button:hover,
.woocommerce-account .woocommerce-orders-table__cell-order-actions .button:focus,
.woocommerce-account .woocommerce-orders-table__cell-order-actions .button:focus-visible,
.woocommerce-account .woocommerce-orders-table__cell-order-actions .button:active,
.woocommerce-account .woocommerce-orders-table__cell-order-actions a.button:hover,
.woocommerce-account .woocommerce-orders-table__cell-order-actions a.button:focus,
.woocommerce-account .woocommerce-orders-table__cell-order-actions a.button:focus-visible,
.woocommerce-account .woocommerce-orders-table__cell-order-actions a.button:active {
  background: var(--woo-primary) !important;
  border: 1px solid var(--woo-primary) !important;
  color: #fff !important;
  outline: none !important;
  box-shadow: none !important;
}

/* ── Orders table — responsive stacked card layout ──────── */
@media (max-width: 900px) {
  /* Kill parent theme min-width that forces horizontal overflow */
  .woocommerce-account .table-wrapper table.woocommerce-orders-table {
    min-width: 0 !important;
  }

  /* Hide column header row */
  .woocommerce-account .woocommerce-orders-table thead {
    display: none !important;
  }

  /* Each row becomes a card block */
  .woocommerce-account .woocommerce-orders-table tbody tr {
    display: block !important;
    padding: 6px 0 !important;
    border-bottom: 1px solid var(--woo-border) !important;
  }
  .woocommerce-account .woocommerce-orders-table tbody tr:last-child {
    border-bottom: none !important;
  }

  /* Each cell = label on left, all value content grouped on right */
  .woocommerce-account .woocommerce-orders-table tbody td,
  .woocommerce-account .woocommerce-orders-table tbody th {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 6px 16px !important;
    border-bottom: none !important;
  }

  /* Column label — margin-right: auto pushes ALL remaining content to the right as one group */
  .woocommerce-account .woocommerce-orders-table tbody td::before,
  .woocommerce-account .woocommerce-orders-table tbody th::before {
    content: attr(data-title);
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--woo-heading);
    text-align: left;
    flex-shrink: 0;
    margin-right: auto;
    padding-right: 16px;
  }

  /* Actions cell: buttons wrap and align right */
  /* Add space between price amount and "for X items" text — stripped in flex context */
  .woocommerce-account .woocommerce-orders-table__cell-order-total .woocommerce-Price-amount {
    margin-right: 4px;
  }

  .woocommerce-account .woocommerce-orders-table__cell-order-actions {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .woocommerce-account .woocommerce-orders-table__cell-order-actions a.button,
  .woocommerce-account .woocommerce-orders-table__cell-order-actions .button {
    height: 36px !important;
    padding: 0 14px !important;
    font-size: 0.875rem !important;
  }
}

/* ── Strip default notice box styles inside account content ─────── */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message {
  padding: 0 !important;
  margin-bottom: 16px !important;
  background: transparent !important;
  border-top: none !important;
  border-left: none !important;
  box-shadow: none !important;
}

.woocommerce-account
  .woocommerce-MyAccount-content
  .woocommerce-info:last-child,
.woocommerce-account
  .woocommerce-MyAccount-content
  .woocommerce-message:last-child {
  margin-bottom: 0 !important;
}

/* ── Info / message notice buttons ─────────────────────── */
/* "Confirm email" and similar notice buttons inside account content */
.woocommerce-account
  .woocommerce-MyAccount-content
  .woocommerce-message
  a.button,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info a.button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 44px !important;
  line-height: 20px !important;
  padding: 0 20px !important;
  font-family: "Lato", sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  text-transform: capitalize !important;
  letter-spacing: 0 !important;
  background: var(--woo-primary) !important;
  border: 1px solid var(--woo-primary) !important;
  color: #fff !important;
  text-decoration: none !important;
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease !important;
  white-space: nowrap !important;
  float: none !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message a.button:hover,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message a.button:focus,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message a.button:focus-visible,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info a.button:hover,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info a.button:focus,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info a.button:focus-visible {
  background: var(--woo-primary) !important;
  border: 1px solid var(--woo-primary) !important;
  color: #fff !important;
  outline: none !important;
  box-shadow: none !important;
}

/* ── Downloads: empty state browse button ──────────────── */
.woocommerce-account .woocommerce-MyAccount-content .wc-forward {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 44px !important;
  padding: 0 24px !important;
  background-color: var(--woo-primary) !important;
  border: 1px solid var(--woo-primary) !important;
  color: #fff !important;
  font-family: "Lato", sans-serif !important;
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background-color 0.2s !important;
  box-sizing: border-box !important;
  border-radius: 0 !important;
  line-height: 1 !important;
}

.woocommerce-account .woocommerce-MyAccount-content .wc-forward:hover {
  background-color: var(--woo-primary-dark) !important;
  border-color: var(--woo-primary-dark) !important;
  color: #fff !important;
}

/* ── My Account Addresses page ─────────────────────────── */
/* WooCommerce uses .woocommerce-Addresses on the addresses list */
.woocommerce-MyAccount-content .woocommerce-Addresses {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 0;
}

@media (max-width: 900px) {
  .woocommerce-MyAccount-content .woocommerce-Addresses {
    grid-template-columns: 1fr;
  }
}

.woocommerce-MyAccount-content .woocommerce-Address {
  padding: 24px;
  border: 1px solid var(--woo-border);
  background: var(--woo-card-bg);
}

/* WooCommerce overrides header { padding:0; margin:0 } with (0,2,2) specificity+!important.
   Use (0,3,2) to win: body.woocommerce-account + .woocommerce-MyAccount-content + header.woocommerce-Address-title */
body.woocommerce-account .woocommerce-MyAccount-content header.woocommerce-Address-title,
.woocommerce-MyAccount-content .woocommerce-Address-title {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-top: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 12px !important;
  margin-top: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 12px !important;
  border-bottom: 1px solid var(--woo-border) !important;
  background-color: transparent !important;
  box-shadow: none !important;
  position: static !important;
}

/* Template uses h2 (not h3) — "Billing address" / "Shipping address" */
.woocommerce-MyAccount-content .woocommerce-Address-title h2 {
  font-family: "Lato", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--woo-heading);
  text-transform: capitalize !important;
  letter-spacing: 0;
  margin: 0;
  padding: 0;
  border: none;
}

/* Edit link — plain orange text, no border box, matches "Lost your password?" style */
.woocommerce-MyAccount-content .woocommerce-Address-title .edit,
.woocommerce-MyAccount-content .woocommerce-Address-title .edit:link,
.woocommerce-MyAccount-content .woocommerce-Address-title .edit:visited,
.woocommerce-MyAccount-content .woocommerce-Address-title .edit:hover,
.woocommerce-MyAccount-content .woocommerce-Address-title .edit:focus,
.woocommerce-MyAccount-content .woocommerce-Address-title .edit:focus-visible,
.woocommerce-MyAccount-content .woocommerce-Address-title .edit:active {
  font-family: "Lato", sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  font-style: normal;
  color: var(--woo-primary) !important;
  text-decoration: none !important;
  text-transform: capitalize;
  letter-spacing: 0;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: none !important;
  padding: 0;
  transition: opacity 0.2s;
}

.woocommerce-MyAccount-content .woocommerce-Address-title .edit:hover {
  opacity: 0.75;
  text-decoration: underline !important;
}

/* Pencil icon + "Edit" label — inline flex */
.woocommerce-MyAccount-content .woocommerce-Address-title .woo-address-edit-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
}
.woocommerce-MyAccount-content .woocommerce-Address-title .woo-address-edit-btn svg {
  flex-shrink: 0;
}

.woocommerce-MyAccount-content .woocommerce-Address address {
  font-family: "Lato", sans-serif;
  font-size: 1rem;
  color: var(--woo-text);
  line-height: 1.75;
  font-style: normal;
}

.woocommerce-MyAccount-content .woocommerce-Address p {
  font-family: "Lato", sans-serif;
  font-size: 0.9375rem;
  color: var(--woo-text-mid);
  font-style: italic;
  margin: 0;
}

/* ── Edit Billing/Shipping Address form ────────────────── */
/* Edit-address page title — capitalize ("Billing Address" / "Shipping Address") */
h2 .woo-edit-address-title {
  text-transform: capitalize !important;
}

.woocommerce-address-fields .woocommerce-form-row,
.woocommerce-address-fields .form-row {
  margin-bottom: 16px;
}

.woocommerce-address-fields label {
  display: block;
  font-family: "Lato", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--woo-heading);
  margin-bottom: 5px;
}

.woocommerce-address-fields label .required {
  color: var(--woo-primary);
  margin-left: 2px;
}

.woocommerce-address-fields input.input-text,
.woocommerce-address-fields select {
  display: block;
  width: 100%;
  height: 44px;
  padding: 0 14px;
  font-family: "Lato", sans-serif;
  font-size: 1rem;
  color: var(--woo-heading);
  background: var(--woo-bg);
  border: 1px solid var(--woo-border-mid);
  border-radius: 0;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.2s;
  -webkit-appearance: none;
  appearance: none;
}

.woocommerce-address-fields input.input-text:focus,
.woocommerce-address-fields select:focus {
  border-color: var(--woo-primary);
  box-shadow: none;
}

/* Save Address button */
.woocommerce-address-fields .button[name="save_address"],
.woocommerce-address-fields button[type="submit"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 44px !important;
  padding: 0 28px !important;
  background-color: var(--woo-primary) !important;
  border: none !important;
  color: #fff !important;
  font-family: "Lato", sans-serif !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  cursor: pointer !important;
  transition: background-color 0.2s !important;
  border-radius: 0 !important;
  line-height: 1 !important;
}

.woocommerce-address-fields .button[name="save_address"]:hover,
.woocommerce-address-fields button[type="submit"]:hover {
  background-color: var(--woo-primary-dark) !important;
  color: #fff !important;
}

/* ── Account Details form ──────────────────────────────── */
.woocommerce-EditAccountForm.edit-account .woocommerce-form-row,
.woocommerce-EditAccountForm.edit-account .form-row {
  margin-bottom: 20px;
}

.woocommerce-EditAccountForm.edit-account label,
.woocommerce-EditAccountForm.edit-account .woocommerce-form-row label {
  display: block;
  font-family: "Lato", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--woo-heading);
  margin-bottom: 5px;
}

.woocommerce-EditAccountForm.edit-account label .required,
.woocommerce-EditAccountForm.edit-account label abbr {
  color: var(--woo-primary);
  margin-left: 2px;
  text-decoration: none;
}

.woocommerce-EditAccountForm.edit-account input.input-text,
.woocommerce-EditAccountForm.edit-account input.woocommerce-Input {
  display: block;
  width: 100%;
  height: 44px;
  padding: 0 14px;
  font-family: "Lato", sans-serif;
  font-size: 1rem;
  color: var(--woo-heading);
  background: var(--woo-bg);
  border: 1px solid var(--woo-border-mid);
  border-radius: 0;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.2s;
  -webkit-appearance: none;
  appearance: none;
}

.woocommerce-EditAccountForm.edit-account input.input-text:focus,
.woocommerce-EditAccountForm.edit-account input.woocommerce-Input:focus {
  border-color: var(--woo-primary);
  box-shadow: none;
  outline: none;
}

.woocommerce-EditAccountForm.edit-account input.input-text::placeholder,
.woocommerce-EditAccountForm.edit-account input.woocommerce-Input::placeholder {
  color: var(--woo-text-mid);
  font-weight: 400;
}

/* First name / Last name side-by-side */
.woocommerce-EditAccountForm .form-row-first,
.woocommerce-EditAccountForm .form-row-last {
  display: inline-block;
  width: calc(50% - 10px);
  vertical-align: top;
}

.woocommerce-EditAccountForm .form-row-first {
  margin-right: 20px;
}

@media (max-width: 600px) {
  .woocommerce-EditAccountForm .form-row-first,
  .woocommerce-EditAccountForm .form-row-last {
    width: 100%;
    display: block;
    margin-right: 0;
  }
}

/* Password change fieldset */
.woocommerce-EditAccountForm fieldset {
  border: 1px solid var(--woo-border);
  padding: 24px;
  margin: 24px 0 20px;
}

.woocommerce-EditAccountForm fieldset legend {
  font-family: "Lato", sans-serif;
  font-size: 1rem;
  font-weight: 900;
  color: var(--woo-heading);
  text-transform: capitalize;
  letter-spacing: 0;
  padding: 0 8px 0 0;
}

.woocommerce-EditAccountForm fieldset .woocommerce-form-row {
  margin-bottom: 20px;
}

.woocommerce-EditAccountForm fieldset .woocommerce-form-row:last-child {
  margin-bottom: 0;
}

/* WC's native show-password button in account details */
.woocommerce-EditAccountForm span.password-input {
  position: relative;
  display: block;
}

.woocommerce-EditAccountForm span.password-input input.input-text {
  padding-right: 44px !important;
}

.woocommerce-EditAccountForm .show-password-input {
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
  width: 44px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: pointer !important;
  font-size: 0 !important;
  color: transparent !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 18px 18px !important;
  box-shadow: none !important;
}

.woocommerce-EditAccountForm .show-password-input.display-password {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E") !important;
}

.woocommerce-EditAccountForm .show-password-input::after {
  content: none !important;
}

/* Password strength meter — same style as login/reset-password page */
.woocommerce-EditAccountForm .woocommerce-password-strength {
  margin-top: 6px;
  padding: 0;
  background: none !important;
  border: none !important;
  font-family: "Lato", sans-serif;
  font-size: 0.9375rem;
  font-weight: 700;
  text-align: left;
}

.woocommerce-EditAccountForm .woocommerce-password-strength.short,
.woocommerce-EditAccountForm .woocommerce-password-strength.bad {
  color: #b81c1c;
}
.woocommerce-EditAccountForm .woocommerce-password-strength.good {
  color: #7a5800;
}
.woocommerce-EditAccountForm .woocommerce-password-strength.strong {
  color: #1a7431;
}

.woocommerce-EditAccountForm .woocommerce-password-hint {
  display: block;
  margin-top: 6px;
  font-family: "Lato", sans-serif;
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--woo-heading);
  text-align: left;
  line-height: 1.5;
}

/* Save Changes button */
.woocommerce-EditAccountForm .woocommerce-Button--savechanges,
.woocommerce-EditAccountForm button[name="save_account_details"],
.woocommerce-EditAccountForm button[type="submit"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 44px !important;
  padding: 0 28px !important;
  background-color: var(--woo-primary) !important;
  border: none !important;
  color: #fff !important;
  font-family: "Lato", sans-serif !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  cursor: pointer !important;
  transition: background-color 0.2s !important;
  border-radius: 0 !important;
  line-height: 1 !important;
  width: auto !important;
}

.woocommerce-EditAccountForm .woocommerce-Button--savechanges:hover,
.woocommerce-EditAccountForm button[name="save_account_details"]:hover,
.woocommerce-EditAccountForm button[type="submit"]:hover {
  background-color: var(--woo-primary-dark) !important;
  color: #fff !important;
}

/* ── Addresses page: Edit link in column title ─────────── */
.woocommerce-column__title a.edit {
  float: right;
  font-family: "Lato", sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--woo-primary) !important;
  text-decoration: none !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.woocommerce-column__title a.edit:hover {
  text-decoration: underline !important;
}

/* =========================================================
   MY-ACCOUNT LOGIN / REGISTER PAGE
   ========================================================= */

/* Two-card wrapper — side by side on desktop, stacked on mobile */
/* Full-width layout override for login/register page (no sidebar) */
body.woocommerce-login-page .woocommerce-MyAccount-navigation {
  display: none !important;
}

body.woocommerce-login-page .woocommerce {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  grid-template-columns: unset !important;
  gap: 0 !important;
}

body.woocommerce-login-page .woocommerce-MyAccount-content {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start !important;
}

body.woocommerce-login-page .woo-page-wrapper {
  min-height: 0;
}

.woo-login-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
}

.woo-login-wrap .woo-lost-password-card {
  width: 100%;
  max-width: 560px;
  text-align: center;
}

/* Remember me row */
.woo-login-remember {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  text-align: left;
  margin-bottom: 20px;
}

.woo-login-remember .woocommerce-form__label-for-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "Lato", sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--woo-heading);
  cursor: pointer;
}

.woo-login-remember .woocommerce-form__input-checkbox {
  width: 16px;
  height: 16px;
  accent-color: var(--woo-primary);
  flex-shrink: 0;
}

.woo-login-forgot-link {
  font-family: "Lato", sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--woo-primary) !important;
  text-decoration: none !important;
  white-space: nowrap;
}

.woo-login-forgot-link:hover {
  text-decoration: underline !important;
}

/* Password auto-generate note */
.woo-register-note {
  font-family: "Lato", sans-serif;
  font-size: 0.875rem;
  color: var(--woo-text-mid);
  text-align: left;
  margin-bottom: 20px;
  line-height: 1.5;
}

/* Mobile: stack cards, full width */
@media (max-width: 767px) {
  .woo-login-wrap--two-col {
    flex-direction: column;
    align-items: center;
  }
  .woo-login-wrap .woo-lost-password-card {
    max-width: 100%;
  }
  .woo-login-remember {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* Hide WooCommerce injected show-password button on both login/register cards */
.woo-login-card .show-password-input,
.woo-login-card .woocommerce-password-strength,
.woo-login-card .woocommerce-password-hint,
.woo-register-card .show-password-input,
.woo-register-card .woocommerce-password-strength,
.woo-register-card .woocommerce-password-hint {
  display: none !important;
}

/* Password eye toggle inside login and register forms */
.woo-login-card .woo-pw-wrap,
.woo-register-card .woo-pw-wrap {
  position: relative;
  display: block;
}
.woo-login-card .woo-pw-wrap .input-text,
.woo-register-card .woo-pw-wrap .input-text {
  padding-right: 44px !important;
}
.woo-login-card .woo-pw-toggle,
.woo-register-card .woo-pw-toggle {
  position: absolute;
  right: 0;
  top: 0;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: #888;
  display: flex;
  align-items: center;
  justify-content: center;
}
.woo-login-card .woo-pw-toggle:hover,
.woo-register-card .woo-pw-toggle:hover {
  color: var(--woo-primary);
}

/* switch-form button base reset */
.woo-switch-form-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

/* Lost your password — below login button, left-aligned */
.woo-login-forgot-below {
  display: block;
  margin-top: 12px;
  text-align: left;
  font-family: "Lato", sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
}

/* Divider — primary colour */
.woo-login-divider {
  border: none;
  border-top: 1.5px solid var(--woo-primary);
  margin: 20px 0;
}

/* "Don't have an account?" label — left-aligned */
.woo-login-register-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: "Lato", sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--woo-heading);
  margin: 0;
}

/* Create Account — outlined button matching login button height */
.woo-login-register-link {
  display: inline;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  color: var(--woo-primary) !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
  cursor: pointer;
  transition: color 0.2s;
}
.woo-login-register-link:hover {
  color: var(--woo-primary-dark) !important;
  text-decoration: underline !important;
}

/* =========================================================
   LOST PASSWORD PAGE
   ========================================================= */

/* Lost-password endpoint: no sidebar, card centred on page */
body.woocommerce-lost-password .woocommerce-MyAccount-navigation {
  display: none;
}

/* .woocommerce-account is on <body>, so target .woocommerce directly */
body.woocommerce-lost-password .woocommerce {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  grid-template-columns: unset !important;
  gap: 0 !important;
}

body.woocommerce-lost-password .woocommerce-MyAccount-content {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 40px 20px !important;
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start !important;
}

body.woocommerce-lost-password .woo-page-wrapper {
  min-height: 0;
}

.woo-lost-password-card {
  background: var(--woo-card-bg);
  border: 1px solid var(--woo-border);
  padding: 48px 56px;
  width: 100%;
  max-width: 600px;
  text-align: center;
  margin: 0 auto;
  box-sizing: border-box;
}

/* Notices inside the lost-password card — full width, left-aligned text */
.woo-lost-password-card .woocommerce-error,
.woo-lost-password-card .woocommerce-message,
.woo-lost-password-card .woocommerce-info {
  width: 100% !important;
  text-align: left !important;
  margin-bottom: 20px !important;
}

/* AJAX inline feedback below the actions row */
.woo-lost-password-feedback {
  margin-top: 14px;
  font-family: "Lato", sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  text-align: left;
  line-height: 1.5;
}

.woo-lost-password-feedback.is-error {
  color: #b81c1c;
}

.woo-lost-password-feedback.is-success {
  color: var(--woo-success);
}

.woo-lost-password-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--woo-primary) 10%, transparent);
  color: var(--woo-primary);
  margin: 0 auto 20px;
}

.woo-lost-password-title {
  font-family: "Lato", sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--woo-heading);
  margin: 0 0 10px;
}

.woo-lost-password-desc {
  font-family: "Lato", sans-serif;
  font-size: 1rem;
  color: var(--woo-text-mid);
  line-height: 1.6;
  margin: 0 0 28px;
}

.woo-lost-password-field {
  text-align: left;
  margin-bottom: 20px;
}

.woo-lost-password-field label {
  display: block;
  font-family: "Lato", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--woo-heading);
  margin-bottom: 6px;
}

.woo-lost-password-field label .required {
  color: var(--woo-primary);
  margin-left: 2px;
}

.woo-lost-password-field input.input-text {
  display: block;
  width: 100%;
  height: 44px;
  padding: 0 14px;
  font-family: "Lato", sans-serif;
  font-size: 1rem;
  color: var(--woo-heading);
  background: var(--woo-bg);
  border: 1px solid var(--woo-border-mid);
  border-radius: 0;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.2s;
}

.woo-lost-password-field input.input-text:focus {
  border-color: var(--woo-primary);
}

.woo-lost-password-actions {
  display: block;
  margin-top: 4px;
}

.woo-lost-password-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 44px !important;
  min-height: 0 !important;
  max-height: 44px !important;
  padding: 0 28px !important;
  box-sizing: border-box !important;
  line-height: 44px !important;
  background-color: var(--woo-primary) !important;
  border: none !important;
  color: #fff !important;
  font-family: "Lato", sans-serif !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s;
  flex-shrink: 0;
}

.woo-lost-password-btn:hover {
  background-color: color-mix(in srgb, var(--woo-primary) 85%, #000) !important;
}

.woo-lost-password-back-link {
  display: inline-flex;
  align-items: center;
  font-family: "Lato", sans-serif;
  font-size: 1rem;
  font-weight: 700 !important;
  color: var(--woo-primary) !important;
  text-decoration: none !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  white-space: nowrap;
}

.woo-lost-password-back-link span {
  text-decoration: none;
  transition: text-decoration 0.2s;
}

.woo-lost-password-back-link:hover span {
  text-decoration: underline;
}

@media (max-width: 575px) {
  .woo-lost-password-card {
    padding: 32px 24px;
  }
  .woo-lost-password-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .woo-lost-password-btn {
    width: 100%;
    justify-content: center;
  }
}

/* =========================================================
   PRODUCT IMAGE GALLERY
   ========================================================= */

.woocommerce-product-gallery {
  position: relative;
}

.woocommerce-product-gallery .woocommerce-product-gallery__wrapper {
  background: var(--woo-image-bg);
  box-shadow: 0 0 0 1px #e0e0e0;
}

.woocommerce-product-gallery .woocommerce-product-gallery__image {
  display: block;
}

.woocommerce-product-gallery .woocommerce-product-gallery__image img {
  width: 100%;
  height: auto;
  display: block;
}

.woocommerce-product-gallery .flex-control-nav {
  list-style: none !important;
  counter-reset: none !important;
  margin: 20px 0 0;
  padding: 0;
  display: flex;
  gap: 20px;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.woocommerce-product-gallery .flex-control-nav::-webkit-scrollbar {
  display: none;
}

.woocommerce-product-gallery .flex-control-nav li {
  width: 90px;
  height: 90px;
  overflow: hidden;
  border: 1px solid #e0e0e0;
  cursor: pointer;
  transition: border-color 0.3s;
  padding-left: 0 !important;
  margin-bottom: 0 !important;
  list-style: none !important;
}

/* Kill any ::before numbering the theme injects */
.woocommerce-product-gallery .flex-control-nav li::before {
  display: none !important;
  content: none !important;
}

/* flex-active is on the <img>, not the <li> — use outline so it renders over the image */
.woocommerce-product-gallery .flex-control-nav li img.flex-active {
  outline: 2px solid #e4491d !important;
  outline-offset: -2px;
}
.woocommerce-product-gallery .flex-control-nav li:hover {
  border: 2px solid #e4491d !important;
}

.woocommerce-product-gallery .flex-control-nav li img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.woocommerce-product-gallery .woocommerce-product-gallery__trigger,
.woocommerce-product-gallery .woocommerce-product-gallery__trigger:hover {
  display: none;
}

/* =========================================================
   REVIEWS
   ========================================================= */

#reviews {
  color: var(--woo-text);
}

#reviews h2 {
  font-family: "Lato", sans-serif;
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--woo-heading);
  text-transform: capitalize;
  letter-spacing: 0;
  margin-bottom: 20px;
}
/* "Be The First To Review…" / "Add A Review" sub-title — match label size */
#reviews #reply-title {
  font-family: "Lato", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--woo-heading);
  text-transform: capitalize;
  letter-spacing: 0;
  margin-bottom: 16px;
}

/* Reviews list — stacked vertically, no numbers, no floats */
.woocommerce ol.commentlist {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 30px !important;
  display: block !important;
}
.woocommerce ol.commentlist li {
  list-style: none !important;
  padding: 16px 0 0 !important;
  margin: 0 !important;
  display: block !important;
  float: none !important;
  width: 100% !important;
  clear: both !important;
}
.woocommerce ol.commentlist li::before {
  content: none !important;
  display: none !important;
}
.woocommerce ol.commentlist li::marker {
  display: none !important;
  content: none !important;
}

/* Review item row */
.woocommerce-Reviews .comment_container {
  display: flex;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--woo-border);
  align-items: flex-start;
}

/* Reviewer avatar — hidden so review text starts flush from the left */
.woocommerce-Reviews .comment_container img.avatar {
  display: none !important;
}

/* Comment text wrapper */
.woocommerce-Reviews .comment-text {
  flex: 1;
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  margin: 0 !important;
}

/* Star rating inside a review */
.woocommerce-Reviews .comment-text .star-rating {
  margin-bottom: 6px;
}

/* Reviewer name / date meta line */
.woocommerce-Reviews .comment-text p.meta {
  font-size: 1rem;
  color: var(--woo-text-muted);
  margin-bottom: 8px;
}

.woocommerce-Reviews .comment-text p.meta strong {
  color: var(--woo-heading);
  font-weight: 700;
}

.woocommerce-Reviews .description p {
  font-size: 1rem;
  color: var(--woo-text);
  margin: 0;
}

/* "Add a review" form wrapper */
#reviews #review_form_wrapper {
  margin-top: 16px;
  padding-top: 0;
  border-top: none;
}

/* WooCommerce outputs an <hr> before the form — hide it to avoid double divider */
#reviews #review_form_wrapper > hr,
#reviews > hr {
  display: none !important;
}

/* Hide the <select id="rating"> fallback — WooCommerce normally hides this via its
   own woocommerce.css but that file is dequeued, so we hide it here. */
.woocommerce #rating {
  display: none !important;
}

/* Star picker in the review form — WooCommerce icon-font stars.
   Chromatix forms.scss sets .chr_content form p:nth-of-type(1) { height:0; margin:0 }
   which collapses p.stars — override with !important. */
.woocommerce #reviews p.stars {
  clear: both;
  height: auto !important;
  margin: 0 0 16px !important;
  padding: 0 !important;
  border: none !important;
  overflow: visible !important;
  background: none !important;
  line-height: 1 !important;
}
.woocommerce #reviews p.stars a {
  position: relative;
  width: 1em;
  height: 1em;
  text-indent: -999em !important;
  display: inline-block;
  text-decoration: none;
  font-size: 30px;
  overflow: visible;
  color: transparent;
}
.woocommerce #reviews p.stars a::before {
  display: block !important;
  position: absolute;
  top: 0;
  left: 0;
  width: 1em;
  height: 1em;
  line-height: 1;
  font-family: WooCommerce !important;
  content: "s";
  text-indent: 0;
  color: var(--woo-primary);
}
/* Hover: fill all stars up to and including hovered, empty those after */
.woocommerce #reviews p.stars:hover a::before {
  content: "S";
  color: var(--woo-primary);
}
.woocommerce #reviews p.stars a:hover ~ a::before {
  content: "s";
}
/* Selected state (after click): fill up to active, empty after */
.woocommerce #reviews p.stars.selected a.active::before {
  content: "S";
}
.woocommerce #reviews p.stars.selected a.active ~ a::before {
  content: "s";
}
.woocommerce #reviews p.stars.selected a:not(.active)::before {
  content: "S";
}
/* ARIA-based selection (newer WooCommerce) */
.woocommerce #reviews p.stars a[aria-checked="true"]::before {
  content: "S";
  color: var(--woo-primary);
}
.woocommerce #reviews p.stars a[aria-checked="true"] ~ a::before {
  content: "s";
}

/* Review form field spacing */
/* Consistent 16px gap between every form field group */
#reviews #review_form p,
#reviews #review_form .comment-form-rating,
#reviews #review_form .comment-form-comment,
#reviews #review_form .comment-form-author,
#reviews #review_form .comment-form-email,
#reviews #review_form .comment-form-cookies-consent {
  margin-bottom: 16px !important;
}
#reviews #review_form .form-submit {
  margin-top: 8px;
  margin-bottom: 0;
}

/* Hide the "email will not be published" note — it's noise in this layout */
#reviews .comment-notes {
  display: none;
}

/* Submit button — orange filled, matches Contact header button */
#reviews #review_form .form-submit input#submit {
  background-color: var(--woo-primary) !important;
  border-color: var(--woo-primary) !important;
  color: #fff !important;
  text-transform: capitalize !important;
  font-size: 16px !important;
  height: auto !important;
  line-height: 20px !important;
  padding: 11px 20px !important;
}
#reviews #review_form .form-submit input#submit:hover,
#reviews #review_form .form-submit input#submit:focus {
  background-color: var(--woo-primary-dark) !important;
  border-color: var(--woo-primary-dark) !important;
  color: #fff !important;
}

/* Review textarea — Chromatix form styles can override text color; force dark text */
#reviews #review_form #comment {
  color: var(--woo-text-dark) !important;
}

/* Chromatix sets .chr_content form label { float:left; width:100%; margin-top:20px }
   which makes the "Your Rating" label take full width with top margin — reset it. */
#reviews #review_form label {
  float: none !important;
  width: auto !important;
  margin-top: 0 !important;
  margin-bottom: 8px !important;
  display: block !important;
  font-size: 16px !important;
}

/* Checkbox + save-info label inline */
#reviews #review_form #commentform p.comment-form-cookies-consent {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 16px !important;
}
#reviews
  #review_form
  #commentform
  p.comment-form-cookies-consent
  input[type="checkbox"] {
  flex-shrink: 0 !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  cursor: pointer;
}
#reviews #review_form #commentform p.comment-form-cookies-consent label {
  display: block !important;
  float: none !important;
  width: auto !important;
  flex: 1 !important;
  font-size: 16px !important;
  margin: 0 !important;
  line-height: 1.4 !important;
  cursor: pointer;
}

/* Each review: star rating above the meta/text */
.woocommerce-Reviews .comment-text .star-rating {
  display: block;
  margin-bottom: 8px;
}

/* Review item: bottom border separates each review cleanly */
.woocommerce-Reviews .comment_container {
  padding: 24px 0;
}

/* Space between reviews section and the "Add A Review" form */
#reviews #review_form_wrapper {
  margin-top: 16px;
}

/* =========================================================
   HEADER CART ICON
   ========================================================= */

/* Cart nav item */
.woo-cart-nav-item {
  display: inline-flex !important;
  align-items: center !important;
}

/* Wrapper — sized exactly to the icon; badge positions relative to this */
.woo-cart-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

.woo-cart-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  text-decoration: none !important;
  transition: color 0.3s;
  line-height: 1;
}

.woo-cart-icon:hover {
  color: var(--woo-primary) !important;
}

.woo-cart-icon svg {
  display: block;
  width: 24px;
  height: 24px;
}

/* Badge overlaid at top-right of the 24×24 bag icon */
.woo-cart-icon__count {
  position: absolute;
  top: -6px;
  right: -8px;
  background: var(--woo-primary);
  color: #ffffff;
  font-family: "Lato", sans-serif;
  font-size: 10px;
  font-weight: 700;
  min-width: 17px;
  height: 17px;
  padding: 6px 6px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-sizing: border-box;
  pointer-events: none;
  z-index: 1;
}

/* Account icon — same colour/hover treatment as cart icon */
.woocommerce .woo-account-icon,
.woocommerce-page .woo-account-icon {
  color: var(--white) !important;
}
.woocommerce .woo-account-icon:hover,
.woocommerce-page .woo-account-icon:hover {
  color: var(--woo-primary) !important;
}

/* =========================================================
   MINI CART / WIDGET
   ========================================================= */

.woocommerce .widget_shopping_cart .cart_list,
.woocommerce.widget_shopping_cart .cart_list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.woocommerce .widget_shopping_cart .cart_list li,
.woocommerce.widget_shopping_cart .cart_list li {
  padding: 10px 0;
  border-bottom: 1px solid var(--woo-border);
}

.woocommerce .widget_shopping_cart_content .total,
.woocommerce.widget_shopping_cart .total {
  padding: 12px 0;
  color: var(--woo-heading);
  font-weight: 700;
}

.woocommerce .widget_shopping_cart_content .total .amount {
  color: var(--woo-primary);
}

/* =========================================================
   PRICE HTML
   ========================================================= */

.woocommerce .price,
.woocommerce .amount {
  color: var(--woo-primary);
}

.woocommerce del .amount {
  color: var(--woo-text-muted);
}

/* =========================================================
   TYPOGRAPHY INSIDE WC
   ========================================================= */

.woocommerce h1,
.woocommerce h2,
.woocommerce h3,
.woocommerce h4,
.woocommerce-page h1,
.woocommerce-page h2,
.woocommerce-page h3,
.woocommerce-page h4 {
  font-family: "Lato", sans-serif;
  color: var(--woo-heading);
}

.woocommerce p,
.woocommerce-page p {
  color: var(--woo-heading);
}

/* Footer p elements must not inherit the WooCommerce heading colour.
   Specificity (0,2,1) beats the rule above (0,1,1). */
/* Footer — restore white70 text colour overridden by .woocommerce p rule */
.woocommerce footer p,
.woocommerce-page footer p,
.woocommerce .footer-wrapper p,
.woocommerce-page .footer-wrapper p {
  color: inherit;
}

.woocommerce footer p.white70-txt,
.woocommerce-page footer p.white70-txt,
.woocommerce .footer-wrapper p.white70-txt,
.woocommerce-page .footer-wrapper p.white70-txt {
  color: var(--white70);
}

/* Hero — restore correct text colours inside .hero on WooCommerce pages.
   .woocommerce p (0,1,1) beats .white70-txt (0,1,0); bump with .hero scope. */
.woocommerce .hero p,
.woocommerce-page .hero p {
  color: inherit;
}

.woocommerce .hero p.white70-txt,
.woocommerce-page .hero p.white70-txt {
  color: var(--white70);
}

/* All text inside the hero that lacks an explicit colour class should be white */
.woocommerce section.hero,
.woocommerce-page section.hero {
  color: #ffffff;
}

.woocommerce a,
.woocommerce-page a {
  color: var(--woo-primary);
  transition: color 0.3s;
  cursor: pointer;
}

.woocommerce a:hover,
.woocommerce-page a:hover {
  color: var(--woo-heading);
  cursor: pointer;
}

/* Pointer cursor on all WC interactive elements */
.woocommerce button,
.woocommerce-page button,
.woocommerce input[type="submit"],
.woocommerce-page input[type="submit"],
.woocommerce .button,
.woocommerce-page .button,
.woocommerce .woo-btn,
.woocommerce-page .woo-btn,
.woocommerce label,
.woocommerce-page label,
.woo-filter-cat-link,
.woo-filter-block__toggle,
.woo-mobile-filter-toggle,
.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li a {
  cursor: pointer;
}

/* =========================================================
   ORDER CONFIRMATION PAGE
   ========================================================= */

.woocommerce-order {
  color: var(--woo-text);
}

/* "Order Received" page heading — mirrors .hero h1 scale from responsive.css */
.woo-thankyou-heading {
  font-family: "Lato", sans-serif;
  font-size: 60px;
  font-weight: 700;
  line-height: 66px;
  color: var(--woo-heading);
  margin: 0 0 28px;
}
@media only screen and (max-width: 1536px) {
  .woo-thankyou-heading {
    font-size: 50px;
    line-height: 56px;
  }
}
@media only screen and (max-width: 1366px) {
  .woo-thankyou-heading {
    font-size: 44px;
    line-height: 50px;
  }
}
@media only screen and (max-width: 1024px) {
  .woo-thankyou-heading {
    font-size: 40px;
    line-height: 46px;
  }
}
@media only screen and (max-width: 767px) {
  .woo-thankyou-heading {
    font-size: 34px;
    line-height: 40px;
    margin-bottom: 20px;
  }
}
@media only screen and (max-width: 360px) {
  .woo-thankyou-heading {
    font-size: 32px;
  }
}

/* PayPal transaction details block (thank-you page) */
.woo-paypal-transaction-details {
  margin: 0 0 24px;
  padding: 24px 28px;
  background: var(--woo-card-bg);
  border: 1px solid var(--woo-border);
  border-radius: 6px;
}
.woo-paypal-transaction-title {
  font-family: "Lato", sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--woo-heading);
  margin: 0 0 14px;
}
.woo-paypal-transaction-table {
  width: 100%;
  border-collapse: collapse;
}
.woo-paypal-transaction-table th,
.woo-paypal-transaction-table td {
  padding: 8px 0;
  font-family: "Lato", sans-serif;
  font-size: 0.9375rem;
  color: var(--woo-text);
  text-align: left;
  border-bottom: 1px solid var(--woo-border);
  vertical-align: top;
}
.woo-paypal-transaction-table tr:last-child th,
.woo-paypal-transaction-table tr:last-child td {
  border-bottom: none;
}
.woo-paypal-transaction-table th {
  font-weight: 700;
  color: var(--woo-heading);
  width: 180px;
  padding-right: 16px;
}
.woo-paypal-transaction-table td code {
  font-family: monospace;
  font-size: 0.9375rem;
  color: var(--woo-text-dark);
  background: none;
  padding: 0;
}

/* Full-width green success banner */
/* Works whether the p is inside .woocommerce-order (normal flow) or not (login-required flow) */
body.woocommerce-order-received .woocommerce-thankyou-order-received {
  display: flex;
  align-items: center;
  gap: 14px;
  background-color: var(--woo-success);
  color: #ffffff;
  font-family: "Lato", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  padding: 18px 24px;
  margin-bottom: 32px;
}

body.woocommerce-order-received .woocommerce-thankyou-order-received::before {
  content: "";
  display: inline-flex;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 10px;
}

@media (max-width: 576px) {
  body.woocommerce-order-received .woocommerce-thankyou-order-received {
    font-size: 0.8125rem;
    gap: 10px;
    padding: 14px 16px;
  }
  body.woocommerce-order-received .woocommerce-thankyou-order-received::before {
    width: 16px;
    height: 16px;
    background-size: 9px 7px;
  }
}

/* Connected order overview bar with vertical dividers */
/* Scope to ul only — the table also has class "order_details" and must not get display:flex */
.woocommerce-order ul.order_details {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  background: var(--woo-card-bg);
}

.woocommerce-order ul.order_details li {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  border-right: 1px solid var(--woo-border);
  margin: 0 0 0 16px;
  padding: 12px 16px;
  font-family: "Lato", sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: capitalize;
  letter-spacing: 0.04em;
  color: var(--woo-text-muted);
  text-align: left;
  overflow-wrap: break-word;
  word-break: break-word;
}

.woocommerce-order ul.order_details li:last-child {
  border-right: none;
}

@media (max-width: 1199px) {
  .woocommerce-order ul.order_details li {
    flex: 0 0 calc(50% - 16px);
    margin: 0 0 0 16px;
    padding: 12px 16px;
    border-right: none;
    border-bottom: 1px solid var(--woo-border);
  }
  .woocommerce-order ul.order_details li:last-child,
  .woocommerce-order ul.order_details li:nth-last-child(2):nth-child(odd) {
    border-bottom: none;
  }
}
@media (max-width: 576px) {
  .woocommerce-order ul.order_details {
    border: 1px solid var(--woo-border);
  }
  .woocommerce-order ul.order_details li {
    flex: 0 0 calc(100% - 16px);
    margin: 0 0 0 16px;
    padding: 10px 12px;
    border-right: none;
  }
}

/* =========================================================
   MOBILE FIXES — content padding + cart/hamburger layout
   ========================================================= */

/* 1. Content side padding on mobile — increase to 16px for better touch margins */
@media (max-width: 991px) {
  .woo-content-container {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* 2. Cart icon / hamburger separation
   service-style.css positions .hamburger with position:absolute relative
   to the navbar, which causes it to sit on top of the cart icon in
   .woo-mobile-nav-right. Fix: contain the hamburger inside its button. */
.woocommerce header .navbar-toggler,
.woocommerce-page header .navbar-toggler {
  position: relative;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}
.woocommerce header .hamburger,
.woocommerce-page header .hamburger {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
/* Re-centre the three lines within the now-contained hamburger block */
.woocommerce header .hamburger .icon,
.woocommerce-page header .hamburger .icon {
  top: 19px !important; /* vertically centred inside 40px button */
}
/* Icon spacing is now set globally in service-style.css (gap: 12px on .woo-mobile-nav-right) */

.woocommerce-order ul.order_details li strong {
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--woo-heading);
  text-transform: none;
  letter-spacing: 0;
  margin-top: 0;
}

/* =========================================================
   THANK YOU PAGE — order table + customer details
   ========================================================= */

/* Payment gateway notices ("Pay with cash upon delivery." etc.) */
.woocommerce-order-pay-intro,
.woocommerce-order .woocommerce-bacs-bank-details {
  font-family: "Lato", sans-serif;
  font-size: 1rem;
  color: var(--woo-text);
  margin-bottom: 16px;
}

/* Plain <p> output by payment gateways on the thank-you page */
.woocommerce-order > p:not(.woocommerce-notice) {
  font-family: "Lato", sans-serif;
  font-size: 1rem;
  color: var(--woo-text);
  margin: 32px 0 8px;
}

/* Section spacing */
.woocommerce-order-details {
  margin-bottom: 32px;
  background: var(--woo-card-bg);
  border: 1px solid var(--woo-border);
  padding: 24px;
}

.woocommerce-customer-details {
  margin-bottom: 0;
}

/* Section headings — match checkout card title style */
.woocommerce-order-details__title,
.woocommerce-column__title {
  font-family: "Lato", sans-serif;
  font-size: 1.125rem;
  font-weight: 900;
  color: var(--woo-heading);
  text-transform: capitalize !important;
  letter-spacing: 0.06em;
  margin: 0 0 20px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--woo-border);
}

/* ---- Order items table ---- */
/* styles.css sets .table-wrapper { overflow-y:auto } and .table-wrapper table { min-width:725px }
   which forces a horizontal scroll on mobile. Override both for the order-details context. */
.woocommerce-order-details .table-wrapper {
  width: 100%;
  overflow: visible !important;
}

table.woocommerce-table--order-details {
  width: 100%;
  min-width: 0 !important; /* reset styles.css min-width: 725px */
  border: none !important; /* reset styles.css border: 1px solid #b9b9b9 */
  border-collapse: collapse;
  font-family: "Lato", sans-serif;
  font-size: 1rem;
  background: var(--woo-card-bg);
}

/* Column widths */
table.woocommerce-table--order-details .product-name {
  width: 70%;
}
table.woocommerce-table--order-details .product-total {
  width: 30%;
}

/* Header */
table.woocommerce-table--order-details thead th {
  padding: 13px 24px;
  font-weight: 900;
  font-size: 1rem;
  text-transform: capitalize;
  letter-spacing: 0.06em;
  color: var(--woo-heading);
  background: var(--woo-bg);
  border-bottom: 2px solid var(--woo-border);
  text-align: left;
}

table.woocommerce-table--order-details thead th.product-total {
  text-align: right;
}

/* Body rows */
table.woocommerce-table--order-details tbody td {
  padding: 16px 24px;
  color: var(--woo-text);
  border-bottom: 1px solid var(--woo-border);
  vertical-align: top;
}

table.woocommerce-table--order-details tbody td.product-total {
  text-align: right;
  color: var(--woo-primary);
  font-weight: 600;
}

/* Product name link */
table.woocommerce-table--order-details .product-name a {
  color: var(--woo-text-dark);
  font-weight: 600;
  text-decoration: none;
}

table.woocommerce-table--order-details .product-name a:hover {
  color: var(--woo-primary);
}

/* Product meta / variations */
table.woocommerce-table--order-details .wc-item-meta,
table.woocommerce-table--order-details dl.variation {
  font-size: 0.8125rem;
  color: var(--woo-text-muted);
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}

/* Each meta row — set color here so the ": value" text node also inherits it */
table.woocommerce-table--order-details .wc-item-meta li {
  margin: 2px 0;
  padding: 0;
  font-family: "Lato", sans-serif;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--woo-text-muted) !important;
}

/* wc-item-meta: label (strong) — muted gray */
table.woocommerce-table--order-details .wc-item-meta li strong.wc-item-meta-label {
  display: inline;
  font-family: "Lato", sans-serif;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--woo-text-muted) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  margin: 0;
  padding: 0;
}

/* wc-item-meta: value (p) — dark heading color, matching cart */
table.woocommerce-table--order-details .wc-item-meta li p {
  display: inline;
  font-family: "Lato", sans-serif;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--woo-heading) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  margin: 0;
  padding: 0;
}

/* dl.variation: inline dt + dd with line-break after each pair */
table.woocommerce-table--order-details dl.variation dt,
table.woocommerce-table--order-details dl.variation dd {
  display: inline;
  font-family: "Lato", sans-serif;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--woo-text-muted);
  text-transform: none !important;
  letter-spacing: normal !important;
  margin: 2px 0;
  padding: 0;
}

table.woocommerce-table--order-details dl.variation dd {
  margin-left: 4px;
}

table.woocommerce-table--order-details dl.variation dd::after {
  content: "\A";
  white-space: pre;
}

/* Footer totals — separator from body */
table.woocommerce-table--order-details tfoot {
  border-top: 2px solid var(--woo-border);
}

table.woocommerce-table--order-details tfoot tr th,
table.woocommerce-table--order-details tfoot tr td {
  padding: 12px 24px;
  font-size: 1rem;
  color: var(--woo-text);
  border-bottom: 1px solid var(--woo-border);
}

table.woocommerce-table--order-details tfoot tr:last-child th,
table.woocommerce-table--order-details tfoot tr:last-child td {
  border-bottom: none;
}

table.woocommerce-table--order-details tfoot tr th {
  font-weight: 900;
  text-align: left;
  color: var(--woo-heading);
}

table.woocommerce-table--order-details tfoot tr td {
  text-align: right;
  font-weight: 600;
  color: var(--woo-primary);
}

/* Highlight the grand total row */
table.woocommerce-table--order-details tfoot .order-total th,
table.woocommerce-table--order-details tfoot .order-total td {
  font-weight: 800;
  font-size: 1rem;
  border-top: 2px solid var(--woo-border);
  color: var(--woo-heading);
}

table.woocommerce-table--order-details tfoot .order-total td {
  color: var(--woo-primary);
}

/* Non-monetary tfoot cells (Payment method, Note) */
table.woocommerce-table--order-details tfoot .woocommerce-Price-amount {
  color: var(--woo-primary);
}

/* Reset styles.css: .table-wrapper table th, .table-wrapper table td { min-width:105px; padding:15px } */
.woocommerce-order-details .table-wrapper table th,
.woocommerce-order-details .table-wrapper table td {
  min-width: 0 !important;
}

.woocommerce-order-details .table-wrapper table tfoot tr:last-child th,
.woocommerce-order-details .table-wrapper table tfoot tr:last-child td {
  padding-bottom: 0 !important;
}

/* ---- Order-details responsive — tablet ---- */
@media (max-width: 767px) {
  .woocommerce-order-details {
    padding: 20px 16px;
  }
}

/* ---- Order-details responsive — mobile: stacked flex rows ---- */
@media (max-width: 575px) {
  /* Remove card horizontal padding so cells can own the 16px left offset,
     matching the overview card where li's are also at 16px from the border. */
  .woocommerce-order-details {
    padding-left: 0;
    padding-right: 0;
  }
  .woocommerce-order-details__title {
    padding-left: 16px;
    padding-right: 16px;
  }

  table.woocommerce-table--order-details thead {
    display: none;
  }
  table.woocommerce-table--order-details,
  table.woocommerce-table--order-details tbody,
  table.woocommerce-table--order-details tfoot,
  table.woocommerce-table--order-details tr {
    display: block;
    width: 100%;
  }
  table.woocommerce-table--order-details tfoot {
    border-top: none;
  }
  table.woocommerce-table--order-details tbody tr,
  table.woocommerce-table--order-details tfoot tr {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 8px;
    border-bottom: 1px solid var(--woo-border);
  }
  table.woocommerce-table--order-details tfoot tr:last-child {
    border-bottom: none;
  }
  table.woocommerce-table--order-details tbody td,
  table.woocommerce-table--order-details tfoot th,
  table.woocommerce-table--order-details tfoot td {
    display: block;
    padding: 10px 16px !important;
    width: auto;
    min-width: 0 !important;
    font-size: 0.9375rem;
    border-bottom: none !important;
  }

  /* Product name: take remaining space, allow long names to wrap */
  table.woocommerce-table--order-details tbody td.product-name {
    flex: 1 1 auto;
    word-break: break-word;
    overflow-wrap: break-word;
  }

  /* Price column: shrink to content, amounts never wrap */
  table.woocommerce-table--order-details tbody td.product-total {
    flex: 0 0 auto;
    text-align: right !important;
    white-space: nowrap;
  }

  /* tfoot label (th): fixed to its natural content width, never wraps */
  table.woocommerce-table--order-details tfoot th {
    flex: 0 0 auto;
    white-space: nowrap;
    font-weight: 700;
  }

  /* tfoot value (td): takes remaining space, right-aligned
     base rule tfoot tr td { text-align:left } has specificity (0,0,1,4) — !important overrides it */
  table.woocommerce-table--order-details tfoot td {
    flex: 1 1 auto;
    text-align: right !important;
    word-break: break-word;
    overflow-wrap: break-word;
  }

  /* Order total row: move the 2px top accent to the row, not individual cells */
  table.woocommerce-table--order-details tfoot .order-total {
    border-top: 2px solid var(--woo-border);
    border-bottom: none;
  }
  table.woocommerce-table--order-details tfoot .order-total th,
  table.woocommerce-table--order-details tfoot .order-total td {
    border-top: none !important;
  }
}

/* ---- Customer addresses ---- */
.woocommerce-columns--addresses {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 8px;
}

@media (max-width: 767px) {
  .woocommerce-columns--addresses {
    grid-template-columns: 1fr;
  }
}

.woocommerce-column {
  background: var(--woo-card-bg);
  border: 1px solid var(--woo-border);
  padding: 24px;
}

.woocommerce-column .woocommerce-column__title {
  border-bottom-color: var(--woo-border);
  margin-bottom: 16px;
  padding-bottom: 12px;
}

.woocommerce-column address {
  font-family: "Lato", sans-serif;
  font-size: 1rem;
  color: var(--woo-text);
  line-height: 1.8;
  font-style: normal;
}

.woocommerce-column address p {
  margin: 0;
  font-size: 1rem;
  color: var(--woo-text);
}

/* =========================================================
   UTILITIES
   ========================================================= */

.woocommerce .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.woocommerce-page .woocommerce-notices-wrapper:empty {
  display: none;
}

/* Checkout form top notices wrapper — space below when errors are present */
.woo-checkout-form > .woocommerce-notices-wrapper:not(:empty) {
  margin-bottom: 24px;
}

/* WooCommerce prepends errors directly into the form — make them span full width */
.woo-checkout-form > .woocommerce-NoticeGroup-checkout {
  margin-bottom: 16px;
}

/* Invalid field — red border */
.woocommerce-checkout .form-row.woocommerce-invalid input.input-text,
.woocommerce-checkout .form-row.woocommerce-invalid select,
.woocommerce-checkout .form-row.woocommerce-invalid textarea,
.woocommerce-account .form-row.woocommerce-invalid input.input-text,
.woocommerce-account .form-row.woocommerce-invalid select,
.woocommerce-account .form-row.woocommerce-invalid textarea {
  border-color: #b81c1c !important;
}

/* Inline field error message */
.woocommerce-checkout .woo-field-error,
.woocommerce-account .woo-field-error {
  display: block;
  color: #b81c1c;
  font-family: "Lato", sans-serif;
  font-size: 0.8125rem;
  font-weight: 500;
  margin-top: 5px;
  line-height: 1.4;
}

.woocommerce-checkout .woo-field-error:empty,
.woocommerce-account .woo-field-error:empty {
  display: none;
}

/* WooCommerce native server-side inline error (checkout show_inline_errors) */
.woocommerce-checkout .checkout-inline-error-message {
  display: block;
  color: #b81c1c;
  font-family: "Lato", sans-serif;
  font-size: 0.8125rem;
  font-weight: 500;
  margin-top: 5px;
  line-height: 1.4;
}

/* Red border on inputs WooCommerce marks aria-invalid via show_inline_errors */
.woocommerce-checkout .form-row input.input-text[aria-invalid="true"],
.woocommerce-checkout .form-row select[aria-invalid="true"],
.woocommerce-checkout .form-row textarea[aria-invalid="true"] {
  border-color: #b81c1c !important;
}

.woocommerce-cart .cart-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--woo-text);
  font-size: 1.125rem;
}

.woocommerce-cart p.return-to-shop {
  text-align: center;
  margin-top: 16px;
}

.woo-page-wrapper:has(.woo-empty-cart) {
  min-height: unset;
}

.woo-empty-cart {
  text-align: center;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.woo-empty-cart p {
  font-size: 1rem;
  color: var(--woo-heading);
}

.woo-empty-cart .woo-btn {
  height: 44px;
  line-height: 42px;
  font-size: 16px;
  text-transform: none;
}

.woocommerce input[type="checkbox"],
.woocommerce input[type="radio"] {
  accent-color: var(--woo-primary);
  width: auto;
}

/* =========================================================
   ORDER-RECEIVED — login form (login-required / guest-verify state)
   Mirrors .woo-checkout-pre-form form.login styles without the checkout scope
   ========================================================= */
body.woocommerce-order-received .woocommerce-form-login {
  background: var(--woo-card-bg);
  border: 1px solid var(--woo-border);
  padding: 24px;
  margin-top: 20px;
}

body.woocommerce-order-received .woocommerce-form-login p,
body.woocommerce-order-received .woocommerce-form-login .form-row {
  margin-top: 0;
  margin-bottom: 20px;
}

body.woocommerce-order-received .woocommerce-form-login .form-row-first,
body.woocommerce-order-received .woocommerce-form-login .form-row-last {
  width: 100% !important;
  float: none !important;
  clear: both !important;
  margin-right: 0 !important;
}

body.woocommerce-order-received .woocommerce-form-login div.clear,
body.woocommerce-order-received .woocommerce-form-login br {
  display: none;
}

body.woocommerce-order-received .woocommerce-form-login span.password-input {
  position: relative;
  display: block;
}

body.woocommerce-order-received
  .woocommerce-form-login
  span.password-input
  input.input-text {
  padding-right: 48px !important;
}

body.woocommerce-order-received .woocommerce-form-login .show-password-input {
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 44px !important;
  height: 44px !important;
  border: none !important;
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 18px 18px !important;
  cursor: pointer !important;
  padding: 0 !important;
  font-size: 0 !important;
  color: transparent !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") !important;
  box-shadow: none !important;
}

body.woocommerce-order-received
  .woocommerce-form-login
  .show-password-input.display-password {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E") !important;
}

body.woocommerce-order-received
  .woocommerce-form-login
  .show-password-input::after {
  content: none !important;
}

body.woocommerce-order-received
  .woocommerce-form-login
  .woocommerce-form-login__rememberme {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer;
  margin-bottom: 0 !important;
}

body.woocommerce-order-received .woocommerce-form-login .lost_password {
  margin-top: 12px;
  margin-bottom: 0;
}

body.woocommerce-order-received .woocommerce-form-login .lost_password a {
  color: var(--woo-primary);
  font-family: "Lato", sans-serif;
  font-size: 0.9375rem;
  font-weight: 700;
  text-decoration: none;
}

body.woocommerce-order-received .woocommerce-form-login .lost_password a:hover {
  text-decoration: underline;
}

body.woocommerce-order-received .woocommerce-form-login button[name="login"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 44px !important;
  background-color: var(--woo-primary) !important;
  border: 1px solid var(--woo-primary) !important;
  color: #ffffff !important;
  font-family: "Lato", sans-serif !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  text-transform: capitalize !important;
  letter-spacing: 0 !important;
  padding: 0 24px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  border-radius: 0 !important;
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease !important;
}

body.woocommerce-order-received
  .woocommerce-form-login
  button[name="login"]:hover {
  background-color: var(--woo-primary-dark) !important;
  border-color: var(--woo-primary-dark) !important;
  color: #ffffff !important;
}

/* =========================================================
   MOBILE HEADER — dark background on WC pages ≤991px
   The transparent rule above covers all viewports so that
   the header fades in over the hero on desktop. On mobile
   there is no hero scroll effect, so force the dark shade
   that responsive.css already uses for static pages.
   ========================================================= */
@media (max-width: 991px) {
  .woocommerce header,
  .woocommerce-page header {
    background-color: var(--mute) !important;
  }
}

@media (max-width: 768px) {
  .woocommerce-result-count {
    font-size: 16px;
  }

  .woocommerce-ordering select,
  .woocommerce-ordering .orderby {
    font-size: 16px !important;
  }
}

/* Registration password field — eye toggle inside the input */
.woo-checkout-form span.password-input {
  position: relative;
  display: block;
}

.woo-checkout-form span.password-input input.input-text {
  padding-right: 48px !important;
}

.woo-checkout-form .show-password-input {
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 44px !important;
  height: 44px !important;
  border: none !important;
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 18px 18px !important;
  cursor: pointer !important;
  padding: 0 !important;
  font-size: 0 !important;
  color: transparent !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") !important;
  box-shadow: none !important;
  outline: none !important;
}

.woo-checkout-form .show-password-input.display-password {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E") !important;
}

.woo-checkout-form .show-password-input::after {
  content: none !important;
}

/* Password strength result — remove WooCommerce's bordered box, style as inline text */
#password_strength,
#password-strength-result,
.woocommerce-password-strength {
  display: block !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 5px 0 0 !important;
  margin: 0 !important;
  font-family: "Lato", sans-serif !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  color: var(--woo-text-muted) !important;
}

#password_strength.short,
#password_strength.bad,
#password-strength-result.short,
#password-strength-result.bad,
.woocommerce-password-strength.short,
.woocommerce-password-strength.bad {
  color: #b81c1c !important;
}

#password_strength.good,
#password-strength-result.good,
.woocommerce-password-strength.good {
  color: #d97706 !important;
}

#password_strength.strong,
#password-strength-result.strong,
.woocommerce-password-strength.strong {
  color: #16a34a !important;
}

/* Password hint — subtle muted text below strength */
.woocommerce-password-hint {
  display: block;
  font-family: "Lato", sans-serif;
  font-size: 0.8125rem;
  color: var(--woo-text-muted);
  line-height: 1.5;
  margin-top: 4px;
}


/* Dashboard logout bar — remove WooCommerce top spacing and divider */
.woo-dashboard-logout {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}