/* ============================================================
   KOOCHOI — CSS PATCH
   Fixes: hero spacing, FSE title overlap, loyalty background,
   page layout, TT4 overrides, global polish
   ============================================================ */

/* ============================================================
   1. FSE GLOBAL OVERRIDES — strip TT4 defaults
   ============================================================ */

/* Remove TT4's default white background */
body,
.wp-site-blocks,
.wp-block-group,
.entry-content,
.wp-block-post-content {
  background-color: var(--kc-black) !important;
}

/* Remove TT4 default content padding that pushes content down */
.wp-block-post-content {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
}

/* Remove TT4 default max-width constraint on content */
.wp-block-post-content > * {
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ============================================================
   2. FSE PAGE TITLE BLOCK — style + spacing fixes
   ============================================================ */

/* The FSE template renders a post title block above the_content */
.wp-block-post-title {
  font-family: var(--kc-font-display) !important;
  font-weight: 800 !important;
  font-size: clamp(2.5rem, 6vw, 5rem) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  color: var(--kc-white) !important;
  text-align: center !important;
  padding: 3rem 2rem 2rem !important;
  margin: 0 !important;
  line-height: 1.05 !important;
  background: var(--kc-black) !important;
}

/* Hide the title block on homepage — front-page has its own hero h1 */
.home .wp-block-post-title,
.page-template-front-page .wp-block-post-title {
  display: none !important;
}

/* Breadcrumb area above title */
.woocommerce-breadcrumb {
  margin: 0 !important;
  padding: 0 !important;
  display: block;
}

/* ============================================================
   3. HOMEPAGE HERO — spacing & full-width fix
   ============================================================ */

/* Hero section — ensure it fills properly with no top gap */
.kc-hero {
  margin-top: 0 !important;
  width: 100vw !important;
  max-width: 100vw !important;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

/* Homepage: remove the default page title padding on front page */
.home .wp-block-post-title {
  display: none !important;
}

/* Ensure homepage content has zero top padding */
.home .wp-block-post-content,
.home .entry-content {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* ============================================================
   4. LOYALTY PROGRAM — fix checkerboard pattern rendering
   Replaced repeating-conic-gradient (poor browser support)
   with a CSS-only dot pattern
   ============================================================ */

/* The checkerboard was using repeating-conic-gradient which 
   renders as a solid block in some browsers.
   We patch it with a safe SVG-based approach via pseudo-element */
.kc-loyalty-pattern {
  position: absolute;
  top: 0;
  right: 0;
  width: 280px;
  height: 280px;
  opacity: 0.12;
  background-image:
    linear-gradient(45deg, var(--kc-teal) 25%, transparent 25%),
    linear-gradient(-45deg, var(--kc-teal) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--kc-teal) 75%),
    linear-gradient(-45deg, transparent 75%, var(--kc-teal) 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  pointer-events: none;
}

/* Override the inline repeating-conic-gradient on loyalty sections */
/* This targets any element using repeating-conic-gradient inline */
[style*="repeating-conic-gradient"] {
  background-image:
    linear-gradient(45deg, var(--kc-teal) 25%, transparent 25%),
    linear-gradient(-45deg, var(--kc-teal) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--kc-teal) 75%),
    linear-gradient(-45deg, transparent 75%, var(--kc-teal) 75%) !important;
  background-size: 20px 20px !important;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px !important;
  opacity: 0.08 !important;
}

/* ============================================================
   5. ABOUT US PAGE — spacing between title and content
   ============================================================ */

.page-id-27 .wp-block-post-title,    /* About Us */
.page-id-29 .wp-block-post-title,    /* Contact Us */
.page-id-31 .wp-block-post-title {   /* Loyalty Program */
  padding-bottom: 0 !important;
}

/* Injected HTML content sections — ensure full width */
.wp-block-post-content .wp-block-html,
.entry-content .wp-block-html {
  width: 100% !important;
  max-width: 100% !important;
}

.wp-block-post-content section,
.entry-content section {
  width: 100%;
}

/* ============================================================
   6. HEADER — refined spacing & logo
   ============================================================ */

/* Ensure header sticks with correct z-index over all content */
.kc-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  background-color: var(--kc-black) !important;
  border-bottom: 1px solid var(--kc-dark-border) !important;
}

/* KC text logo styling */
.kc-logo,
.kc-logo a {
  font-family: var(--kc-font-display) !important;
  font-size: 1.8rem !important;
  font-weight: 800 !important;
  color: var(--kc-teal) !important;
  text-decoration: none !important;
  letter-spacing: 0.05em;
  line-height: 1;
}

/* Remove TT4's default site-header if it renders */
.wp-block-template-part[data-type="header"] + .wp-block-post-content {
  margin-top: 0;
}

/* ============================================================
   7. CONTACT FORM 7 — dark theme styling
   ============================================================ */

.wpcf7-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.wpcf7-form label {
  font-family: var(--kc-font-display) !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--kc-light-gray) !important;
  display: block;
  margin-bottom: 0.35rem;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea {
  background-color: var(--kc-dark) !important;
  border: 1px solid var(--kc-dark-border) !important;
  color: var(--kc-white) !important;
  font-family: var(--kc-font-body) !important;
  font-size: 0.9rem !important;
  padding: 0.75rem 1rem !important;
  width: 100% !important;
  border-radius: 0 !important;
  transition: border-color var(--kc-transition);
}

.wpcf7-form input:focus,
.wpcf7-form textarea:focus {
  border-color: var(--kc-teal) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(0,200,180,0.1) !important;
}

.wpcf7-form textarea {
  min-height: 120px;
  resize: vertical;
}

.wpcf7-form input[type="submit"] {
  background-color: var(--kc-teal) !important;
  color: var(--kc-black) !important;
  font-family: var(--kc-font-display) !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  border: none !important;
  padding: 0.85rem 2.5rem !important;
  cursor: pointer !important;
  border-radius: 0 !important;
  transition: background-color var(--kc-transition) !important;
  align-self: flex-start;
}

.wpcf7-form input[type="submit"]:hover {
  background-color: var(--kc-teal-dark) !important;
  color: var(--kc-white) !important;
}

.wpcf7-response-output {
  font-family: var(--kc-font-display) !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.08em !important;
  padding: 0.75rem 1rem !important;
  border-radius: 0 !important;
  margin-top: 0.5rem !important;
}

/* ============================================================
   8. WP-ADMIN BAR OFFSET — prevent header overlap
   ============================================================ */

.admin-bar .kc-header {
  top: 32px !important;
}

@media (max-width: 782px) {
  .admin-bar .kc-header {
    top: 46px !important;
  }
}

/* ============================================================
   9. HOMEPAGE SECTIONS — full-width breakout
   ============================================================ */

/* All injected sections need to break out of FSE content width */
.wp-block-post-content > .wp-block-html > section,
.wp-block-post-content > .wp-block-html > div {
  width: 100vw !important;
  max-width: 100vw !important;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  box-sizing: border-box;
}

/* But inner containers stay constrained */
.wp-block-post-content .kc-container,
.entry-content .kc-container {
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}

/* ============================================================
   10. GENERAL PAGE CONTENT AREA — TT4 conflict fixes
   ============================================================ */

/* TT4 sometimes adds unwanted padding to the content area */
.wp-block-post-content .alignfull,
.wp-block-post-content .alignwide {
  max-width: none !important;
  width: 100% !important;
}

/* Remove default paragraph margin from TT4 in block content */
.wp-block-post-content p:last-child {
  margin-bottom: 0;
}

/* Fix TT4 default link colour in content areas */
.wp-block-post-content a:not(.kc-btn):not(.kc-btn--outline) {
  color: var(--kc-teal);
  text-decoration: none;
}

.wp-block-post-content a:not(.kc-btn):not(.kc-btn--outline):hover {
  color: var(--kc-teal-light);
}

/* ============================================================
   11. SHOP / WOOCOMMERCE — additional polish
   ============================================================ */

/* No results found text */
.woocommerce-no-products-found,
.wc-no-products-found {
  text-align: center;
  padding: 4rem 2rem;
  font-family: var(--kc-font-display);
  font-size: 1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kc-mid-gray);
}

/* WooCommerce notices dark theme */
.woocommerce-info {
  background: var(--kc-dark-card) !important;
  border-left: 4px solid var(--kc-teal) !important;
  color: var(--kc-white) !important;
  border-radius: 0 !important;
}

/* Shipping notice */
.woocommerce-shipping-destination {
  color: var(--kc-mid-gray);
  font-size: 0.85rem;
}

/* ============================================================
   12. MY ACCOUNT PAGE — WooCommerce dashboard
   ============================================================ */

.woocommerce-MyAccount-navigation {
  background: var(--kc-dark-card);
  border: 1px solid var(--kc-dark-border);
  padding: 1rem 0;
  margin-bottom: 2rem;
}

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

.woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 0.65rem 1.5rem;
  font-family: var(--kc-font-display) !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--kc-light-gray) !important;
  border-bottom: 1px solid var(--kc-dark-border);
  transition: color var(--kc-transition), background-color var(--kc-transition);
}

.woocommerce-MyAccount-navigation li:last-child a {
  border-bottom: none;
}

.woocommerce-MyAccount-navigation li a:hover,
.woocommerce-MyAccount-navigation li.is-active a {
  color: var(--kc-teal) !important;
  background-color: rgba(0,200,180,0.05);
}

.woocommerce-MyAccount-content {
  color: var(--kc-light-gray) !important;
  font-size: 0.9rem;
  line-height: 1.7;
}

.woocommerce-MyAccount-content strong {
  color: var(--kc-white);
}

/* ============================================================
   13. RESPONSIVE PATCHES
   ============================================================ */

@media (max-width: 768px) {
  /* Homepage hero text size on mobile */
  .kc-hero h1 {
    font-size: clamp(2.5rem, 10vw, 4rem) !important;
  }

  /* Product tiles 2-col on mobile */
  [style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* About/loyalty two-col to single on mobile */
  [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Benefit cards full width on mobile */
  [style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* Contact two-col to single on mobile */
  [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Hero padding on mobile */
  .kc-hero > div {
    padding: 3rem 1.5rem !important;
  }

  /* Section padding on mobile */
  section[style*="padding:5rem 2rem"],
  section[style*="padding:4rem 2rem"] {
    padding: 3rem 1rem !important;
  }
}

@media (max-width: 480px) {
  /* Stack CTA buttons on small screens */
  .kc-hero [style*="display:flex;gap:1rem"] {
    flex-direction: column !important;
  }

  .kc-btn {
    text-align: center !important;
    width: 100% !important;
  }

  /* WP admin bar adjustment */
  .admin-bar .kc-header {
    top: 46px !important;
  }
}

/* ============================================================
   PATCH 2 — Loyalty checkerboard via CSS ::before
   ============================================================ */

.kc-loyalty-hero-section::before,
.kc-home-loyalty-section::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 280px;
  height: 280px;
  background-image:
    linear-gradient(45deg, #00c8b4 25%, transparent 25%),
    linear-gradient(-45deg, #00c8b4 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #00c8b4 75%),
    linear-gradient(-45deg, transparent 75%, #00c8b4 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
}

.kc-home-loyalty-section::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 200px;
  height: 200px;
  background-image:
    linear-gradient(45deg, #00c8b4 25%, transparent 25%),
    linear-gradient(-45deg, #00c8b4 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #00c8b4 75%),
    linear-gradient(-45deg, transparent 75%, #00c8b4 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
}

/* Ensure text content stays above the pattern */
.kc-loyalty-hero-section > *,
.kc-home-loyalty-section > * {
  position: relative;
  z-index: 1;
}

/* ============================================================
   PATCH 3 — Full-width sections on all pages
   FSE constrains content to ~650px by default in TT4
   We need to override this for all our injected sections
   ============================================================ */

/* Remove TT4's default content width constraint */
.wp-block-post-content {
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* The wp:html block wrapper */
.wp-block-html {
  max-width: none !important;
  width: 100% !important;
}

/* All sections inside injected HTML */
.wp-block-html section {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box;
}

/* ============================================================
   PATCH 4 — Homepage hero vertical centering
   Remove default TT4 spacing above first block
   ============================================================ */

/* TT4 adds margin-top to the first block inside post content */
.home .wp-block-post-content > *:first-child,
.home .entry-content > *:first-child,
.home .wp-block-html:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Hero section itself — tighten vertical spacing */
.kc-hero {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* ============================================================
   PATCH 5 — 1920px wide screen support
   Ensure content looks good on large monitors
   ============================================================ */

/* Wider container for large screens */
@media (min-width: 1600px) {
  .kc-container,
  .kc-header__inner,
  .kc-footer__inner,
  .kc-footer__bottom {
    max-width: 1600px;
  }

  .kc-shop-layout {
    max-width: 1600px;
  }

  .kc-single-product {
    max-width: 1600px;
  }
}

/* Large screens — hero text scales up */
@media (min-width: 1600px) {
  .kc-hero h1 {
    font-size: 7rem !important;
  }
}

/* ============================================================
   PATCH 6 — Shop page layout on large screens
   ============================================================ */

/* Sidebar stays proportional on large screens */
@media (min-width: 1400px) {
  .kc-shop-layout {
    grid-template-columns: 280px 1fr;
    gap: 3rem;
    padding: 2rem 3rem;
  }
}

/* Product grid — 4 columns on very wide screens */
@media (min-width: 1400px) {
  .kc-product-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ============================================================
   PATCH 7 — WooCommerce info notice styling
   ============================================================ */

.woocommerce-info::before {
  color: var(--kc-teal) !important;
}

/* No products message */
.woocommerce-no-products-found p,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  color: var(--kc-white) !important;
}

/* ============================================================
   PATCH 8 — Remove TT4 default page header padding/margin
   that causes blank space above hero on homepage
   ============================================================ */

/* TT4 template wrapper */
.wp-block-template-part {
  display: block;
}

/* Remove any default margin from the page content area */
.page .entry-content,
.page .wp-block-post-content {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Specifically for homepage */
.home .entry-content,
.home .wp-block-post-content {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Remove TT4 default "has-global-padding" spacing */
.has-global-padding {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.is-layout-constrained.wp-block-post-content {
  padding: 0 !important;
}

/* ============================================================
   PATCH 9 — Single product page full-width fix
   Remove white side columns
   ============================================================ */

/* Single product page — force full black background */
.single-product,
.single-product #page,
.single-product .site-content,
.single-product main,
.woocommerce-page main {
  background-color: var(--kc-black) !important;
}

/* Remove any white padding/margin around product content */
.single-product .wp-block-post-content,
.single-product .entry-content {
  background-color: var(--kc-black) !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
}

/* Fix product name colour */
.single-product h1.product_title,
.product_title {
  color: var(--kc-white) !important;
  font-family: var(--kc-font-display) !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
}

/* Fix the kc-single-product__top grid on single product */
.kc-single-product__top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  margin-bottom: 3rem;
}

@media (max-width: 768px) {
  .kc-single-product__top {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* ============================================================
   PATCH 10 — Category sidebar duplicate fix
   Hide duplicate category entries with same name
   ============================================================ */

/* Style the "Wet Apply" sub-items properly */
.kc-sidebar__cat-list .children {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

/* ============================================================
   PATCH 11 — Mini cart drawer z-index fix
   Prevent it from auto-showing
   ============================================================ */

.kc-cart-drawer {
  right: -420px !important;
}

.kc-cart-drawer.is-open {
  right: 0 !important;
}

/* ============================================================
   PATCH 12 — WooCommerce variation price update
   ============================================================ */

/* Price display in variation */
.woocommerce-variation-price .price,
.single-product .price {
  font-family: var(--kc-font-display) !important;
  font-size: 2.5rem !important;
  font-weight: 800 !important;
  color: var(--kc-white) !important;
}

/* Fix select dropdown arrow colour */
.single-product select {
  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='%2300c8b4' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem !important;
}

/* ============================================================
   WOOCOMMERCE MY ACCOUNT — Full Dark Theme
   ============================================================ */

/* Page wrapper */
.woocommerce-account .woocommerce {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 2rem;
  align-items: start;
}

/* Navigation sidebar */
.woocommerce-MyAccount-navigation {
  background: var(--kc-dark-card) !important;
  border: 1px solid var(--kc-dark-border) !important;
  padding: 0 !important;
  position: sticky;
  top: calc(var(--kc-header-h) + 1rem);
}

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

.woocommerce-MyAccount-navigation ul li {
  border-bottom: 1px solid var(--kc-dark-border);
}

.woocommerce-MyAccount-navigation ul li:last-child {
  border-bottom: none;
}

.woocommerce-MyAccount-navigation ul li a {
  display: block !important;
  padding: 0.85rem 1.25rem !important;
  font-family: var(--kc-font-display) !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--kc-light-gray) !important;
  text-decoration: none !important;
  transition: color var(--kc-transition), background-color var(--kc-transition), padding-left var(--kc-transition) !important;
}

.woocommerce-MyAccount-navigation ul li a:hover,
.woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--active a {
  color: var(--kc-teal) !important;
  background-color: rgba(0,200,180,0.05) !important;
  padding-left: 1.75rem !important;
}

/* Content area */
.woocommerce-MyAccount-content {
  background: var(--kc-dark-card) !important;
  border: 1px solid var(--kc-dark-border) !important;
  padding: 2rem !important;
  color: var(--kc-light-gray) !important;
  min-height: 400px;
}

.woocommerce-MyAccount-content p {
  color: var(--kc-light-gray) !important;
  font-size: 0.9rem;
  line-height: 1.7;
}

.woocommerce-MyAccount-content strong {
  color: var(--kc-white) !important;
}

.woocommerce-MyAccount-content a {
  color: var(--kc-teal) !important;
}

/* Account section headings */
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
  font-family: var(--kc-font-display) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--kc-white) !important;
  margin-bottom: 1.5rem !important;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--kc-dark-border);
}

/* Orders table */
.woocommerce-orders-table,
.woocommerce-table {
  width: 100% !important;
  border-collapse: collapse !important;
  background: var(--kc-dark) !important;
}

.woocommerce-orders-table th,
.woocommerce-table th {
  background: var(--kc-dark) !important;
  color: var(--kc-teal) !important;
  font-family: var(--kc-font-display) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  padding: 0.85rem 1rem !important;
  border: 1px solid var(--kc-dark-border) !important;
  text-align: left !important;
}

.woocommerce-orders-table td,
.woocommerce-table td {
  padding: 0.85rem 1rem !important;
  border: 1px solid var(--kc-dark-border) !important;
  color: var(--kc-light-gray) !important;
  font-size: 0.85rem !important;
  vertical-align: middle !important;
  background: var(--kc-dark-card) !important;
}

.woocommerce-orders-table tbody tr:hover td {
  background: rgba(0,200,180,0.03) !important;
}

/* Order status badges */
.woocommerce-order-status {
  font-family: var(--kc-font-display) !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 0.25rem 0.6rem !important;
  border-radius: 2px !important;
}

.wc-processing { background: rgba(0,200,180,0.15) !important; color: var(--kc-teal) !important; }
.wc-completed  { background: rgba(0,150,100,0.15) !important; color: #00b87a !important; }
.wc-pending    { background: rgba(255,180,0,0.15) !important; color: #ffb400 !important; }
.wc-cancelled  { background: rgba(255,60,60,0.15) !important; color: #ff4444 !important; }

/* Account details form */
.woocommerce-EditAccountForm fieldset {
  border: 1px solid var(--kc-dark-border) !important;
  padding: 1.5rem !important;
  margin-bottom: 1.5rem !important;
  background: var(--kc-dark) !important;
}

.woocommerce-EditAccountForm legend {
  font-family: var(--kc-font-display) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--kc-teal) !important;
  padding: 0 0.5rem !important;
}

/* Form fields in account */
.woocommerce-account .woocommerce-form-row,
.woocommerce-account .form-row {
  margin-bottom: 1.25rem !important;
}

.woocommerce-account .woocommerce-form-row label,
.woocommerce-account .form-row label {
  font-family: var(--kc-font-display) !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--kc-light-gray) !important;
  margin-bottom: 0.4rem !important;
  display: block !important;
}

.woocommerce-account input[type="text"],
.woocommerce-account input[type="email"],
.woocommerce-account input[type="password"],
.woocommerce-account input[type="tel"],
.woocommerce-account select,
.woocommerce-account textarea {
  background-color: var(--kc-dark) !important;
  border: 1px solid var(--kc-dark-border) !important;
  color: var(--kc-white) !important;
  font-family: var(--kc-font-body) !important;
  font-size: 0.9rem !important;
  padding: 0.7rem 1rem !important;
  width: 100% !important;
  border-radius: 0 !important;
  transition: border-color var(--kc-transition) !important;
}

.woocommerce-account input:focus,
.woocommerce-account select:focus,
.woocommerce-account textarea:focus {
  border-color: var(--kc-teal) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(0,200,180,0.1) !important;
}

/* Address cards */
.woocommerce-address-fields,
.woocommerce-addresses .woocommerce-Address {
  background: var(--kc-dark) !important;
  border: 1px solid var(--kc-dark-border) !important;
  padding: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}

.woocommerce-Address-title h3 {
  color: var(--kc-teal) !important;
  font-family: var(--kc-font-display) !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  margin-bottom: 1rem !important;
}

/* View order / action buttons in account */
.woocommerce-MyAccount-content .button,
.woocommerce-MyAccount-content a.button {
  background-color: var(--kc-teal) !important;
  color: var(--kc-black) !important;
  font-family: var(--kc-font-display) !important;
  font-weight: 700 !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0.5rem 1.25rem !important;
  text-decoration: none !important;
  display: inline-block !important;
  transition: background-color var(--kc-transition) !important;
}

.woocommerce-MyAccount-content .button:hover,
.woocommerce-MyAccount-content a.button:hover {
  background-color: var(--kc-teal-dark) !important;
  color: var(--kc-white) !important;
}

/* Mobile account layout */
@media (max-width: 768px) {
  .woocommerce-account .woocommerce {
    grid-template-columns: 1fr !important;
    padding: 1rem !important;
  }

  .woocommerce-MyAccount-navigation {
    position: static !important;
  }
}

/* ============================================================
   ULTIMATE MEMBER — Login & Register Pages
   Dark theme override
   ============================================================ */

/* UM form container */
.um-outerbox,
.um .um-form {
  background: var(--kc-dark-card) !important;
  border: 1px solid var(--kc-dark-border) !important;
  border-radius: 0 !important;
  padding: 2.5rem !important;
  max-width: 480px !important;
  margin: 3rem auto !important;
  box-shadow: none !important;
}

/* UM form heading */
.um-login .um-header,
.um-register .um-header {
  display: none !important;
}

/* UM field labels */
.um .um-field-label label {
  font-family: var(--kc-font-display) !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--kc-light-gray) !important;
}

/* UM inputs */
.um .um-field-area input,
.um .um-field-area select,
.um .um-field-area textarea {
  background: var(--kc-dark) !important;
  border: 1px solid var(--kc-dark-border) !important;
  border-radius: 0 !important;
  color: var(--kc-white) !important;
  font-family: var(--kc-font-body) !important;
  font-size: 0.9rem !important;
  padding: 0.7rem 1rem !important;
  height: auto !important;
  line-height: 1.5 !important;
}

.um .um-field-area input:focus,
.um .um-field-area select:focus {
  border-color: var(--kc-teal) !important;
  box-shadow: 0 0 0 2px rgba(0,200,180,0.1) !important;
  outline: none !important;
}

/* UM submit button */
.um .um-button,
.um input[type="submit"] {
  background: var(--kc-teal) !important;
  color: var(--kc-black) !important;
  font-family: var(--kc-font-display) !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0.85rem 2rem !important;
  width: 100% !important;
  cursor: pointer !important;
  transition: background-color var(--kc-transition) !important;
  margin-top: 0.5rem !important;
}

.um .um-button:hover,
.um input[type="submit"]:hover {
  background: var(--kc-teal-dark) !important;
  color: var(--kc-white) !important;
}

/* UM links (forgot password etc) */
.um .um-alt-link a,
.um .um-notice a,
.um a {
  color: var(--kc-teal) !important;
  font-family: var(--kc-font-display) !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.06em !important;
}

/* UM notice messages */
.um .um-notice {
  background: var(--kc-dark) !important;
  border-left: 3px solid var(--kc-teal) !important;
  color: var(--kc-light-gray) !important;
  border-radius: 0 !important;
  padding: 1rem !important;
  font-size: 0.85rem !important;
  margin-bottom: 1rem !important;
}

/* UM error messages */
.um .um-field-error {
  color: #fff !important;
  background: #dd5454 !important;
  font-size: 0.75rem !important;
  font-family: var(--kc-font-display) !important;
  letter-spacing: 0.05em !important;
}

/* UM profile avatar */
.um .um-profile-photo {
  border: 2px solid var(--kc-teal) !important;
}

/* Pending approval message */
.um-notice.um-notice-warning,
.um-account-pending {
  background: rgba(255,180,0,0.1) !important;
  border-left: 3px solid #ffb400 !important;
  color: var(--kc-light-gray) !important;
  padding: 1rem 1.25rem !important;
  font-size: 0.85rem !important;
  margin: 1rem 0 !important;
}

/* ============================================================
   LOGIN PAGE — Custom heading above UM form
   ============================================================ */

.page-id-login-page .wp-block-post-title,
.um-page-login .wp-block-post-title {
  text-align: center !important;
  padding-bottom: 0 !important;
}

/* ============================================================
   REGISTER PAGE — B2B context note
   ============================================================ */

.um-register .um-form::before {
  content: 'Merchant Registration — Admin approval required after email verification.';
  display: block;
  font-family: var(--kc-font-display);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kc-teal);
  text-align: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--kc-dark-border);
}

/* ============================================================
   CART PAGE — Dark Theme
   ============================================================ */

.woocommerce-cart .woocommerce {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

/* Cart table */
.woocommerce-cart-form table.cart {
  background: var(--kc-dark-card) !important;
  border: 1px solid var(--kc-dark-border) !important;
  border-collapse: collapse !important;
  width: 100%;
}

.woocommerce-cart-form table.cart th {
  background: var(--kc-dark) !important;
  color: var(--kc-teal) !important;
  font-family: var(--kc-font-display) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  padding: 1rem !important;
  border: 1px solid var(--kc-dark-border) !important;
}

.woocommerce-cart-form table.cart td {
  padding: 1rem !important;
  border: 1px solid var(--kc-dark-border) !important;
  color: var(--kc-white) !important;
  vertical-align: middle !important;
  background: var(--kc-dark-card) !important;
}

/* Product image in cart */
.woocommerce-cart-form table.cart td.product-thumbnail img {
  width: 80px !important;
  height: 80px !important;
  object-fit: cover !important;
  border: 1px solid var(--kc-dark-border) !important;
}

/* Product name in cart */
.woocommerce-cart-form table.cart td.product-name a {
  font-family: var(--kc-font-display) !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--kc-white) !important;
}

/* Product price in cart */
.woocommerce-cart-form table.cart td.product-price,
.woocommerce-cart-form table.cart td.product-subtotal {
  font-family: var(--kc-font-display) !important;
  font-weight: 700 !important;
  color: var(--kc-teal) !important;
}

/* Remove item button */
.woocommerce-cart-form table.cart td.product-remove a.remove {
  color: var(--kc-mid-gray) !important;
  font-size: 1.2rem !important;
  transition: color var(--kc-transition) !important;
}

.woocommerce-cart-form table.cart td.product-remove a.remove:hover {
  color: #ff4444 !important;
  background: none !important;
}

/* Cart quantity input */
.woocommerce-cart-form table.cart .quantity input.qty {
  background: var(--kc-dark) !important;
  border: 1px solid var(--kc-dark-border) !important;
  color: var(--kc-white) !important;
  text-align: center !important;
  width: 60px !important;
  padding: 0.5rem !important;
  font-family: var(--kc-font-display) !important;
  font-weight: 700 !important;
}

/* Update cart / coupon row */
.woocommerce-cart-form .actions {
  background: var(--kc-dark) !important;
  border: 1px solid var(--kc-dark-border) !important;
  padding: 1rem !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.woocommerce-cart-form .coupon input[type="text"] {
  background: var(--kc-dark-card) !important;
  border: 1px solid var(--kc-dark-border) !important;
  color: var(--kc-white) !important;
  padding: 0.65rem 1rem !important;
  font-family: var(--kc-font-display) !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.06em !important;
  border-radius: 0 !important;
}

/* Cart totals box */
.cart_totals {
  background: var(--kc-dark-card) !important;
  border: 1px solid var(--kc-dark-border) !important;
  padding: 1.5rem !important;
}

.cart_totals h2 {
  font-family: var(--kc-font-display) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--kc-white) !important;
  margin-bottom: 1.25rem !important;
  padding-bottom: 0.75rem !important;
  border-bottom: 1px solid var(--kc-dark-border) !important;
}

.cart_totals table {
  width: 100%;
  border-collapse: collapse;
}

.cart_totals table th {
  font-family: var(--kc-font-display) !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--kc-mid-gray) !important;
  padding: 0.75rem 0 !important;
  border-bottom: 1px solid var(--kc-dark-border) !important;
  text-align: left !important;
  font-weight: 600 !important;
}

.cart_totals table td {
  padding: 0.75rem 0 !important;
  border-bottom: 1px solid var(--kc-dark-border) !important;
  color: var(--kc-white) !important;
  text-align: right !important;
}

.cart_totals .order-total th,
.cart_totals .order-total td {
  color: var(--kc-teal) !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  border-bottom: none !important;
}

.wc-proceed-to-checkout .checkout-button {
  background: var(--kc-teal) !important;
  color: var(--kc-black) !important;
  font-family: var(--kc-font-display) !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 1rem 2rem !important;
  width: 100% !important;
  text-align: center !important;
  display: block !important;
  margin-top: 1rem !important;
  transition: background-color var(--kc-transition) !important;
}

.wc-proceed-to-checkout .checkout-button:hover {
  background: var(--kc-teal-dark) !important;
  color: var(--kc-white) !important;
}

/* Empty cart */
.cart-empty {
  font-family: var(--kc-font-display) !important;
  font-size: 1rem !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--kc-mid-gray) !important;
  text-align: center !important;
  padding: 4rem 2rem !important;
}

.return-to-shop .button {
  margin-top: 1rem !important;
}

/* ============================================================
   CHECKOUT PAGE — Dark Theme
   ============================================================ */

.woocommerce-checkout .woocommerce {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

/* Checkout layout */
.woocommerce-checkout #customer_details {
  float: none !important;
  width: 100% !important;
  margin-bottom: 2rem !important;
}

.woocommerce-checkout #order_review_heading,
.woocommerce-checkout #order_review {
  float: none !important;
  width: 100% !important;
}

/* Use CSS grid for checkout layout */
.woocommerce-checkout form.checkout {
  display: grid !important;
  grid-template-columns: 1fr 420px !important;
  gap: 2rem !important;
  align-items: start !important;
}

.woocommerce-checkout form.checkout #customer_details {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

.woocommerce-checkout form.checkout #order_review_heading {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

.woocommerce-checkout form.checkout #order_review {
  grid-column: 2 !important;
  grid-row: 1 !important;
  margin-top: 2.5rem !important;
}

/* Checkout section boxes */
.woocommerce-billing-fields,
.woocommerce-shipping-fields,
.woocommerce-additional-fields {
  background: var(--kc-dark-card) !important;
  border: 1px solid var(--kc-dark-border) !important;
  padding: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}

.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3,
#order_review_heading {
  font-family: var(--kc-font-display) !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: var(--kc-teal) !important;
  margin-bottom: 1.25rem !important;
  padding-bottom: 0.75rem !important;
  border-bottom: 1px solid var(--kc-dark-border) !important;
}

/* Checkout form fields */
.woocommerce-checkout .form-row label {
  font-family: var(--kc-font-display) !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--kc-light-gray) !important;
  margin-bottom: 0.4rem !important;
  display: block !important;
}

.woocommerce-checkout .form-row input,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea {
  background: var(--kc-dark) !important;
  border: 1px solid var(--kc-dark-border) !important;
  color: var(--kc-white) !important;
  font-family: var(--kc-font-body) !important;
  font-size: 0.9rem !important;
  padding: 0.7rem 1rem !important;
  border-radius: 0 !important;
  width: 100% !important;
}

.woocommerce-checkout .form-row input:focus,
.woocommerce-checkout .form-row select:focus {
  border-color: var(--kc-teal) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(0,200,180,0.1) !important;
}

/* Order review box */
#order_review {
  background: var(--kc-dark-card) !important;
  border: 1px solid var(--kc-dark-border) !important;
  padding: 1.5rem !important;
  position: sticky !important;
  top: calc(var(--kc-header-h) + 1rem) !important;
}

/* Order items table */
table.woocommerce-checkout-review-order-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
}

table.woocommerce-checkout-review-order-table th {
  font-family: var(--kc-font-display) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--kc-teal) !important;
  padding: 0.75rem 0 !important;
  border-bottom: 1px solid var(--kc-dark-border) !important;
  text-align: left !important;
}

table.woocommerce-checkout-review-order-table td {
  padding: 0.75rem 0 !important;
  border-bottom: 1px solid var(--kc-dark-border) !important;
  color: var(--kc-light-gray) !important;
  font-size: 0.85rem !important;
}

table.woocommerce-checkout-review-order-table .order-total td,
table.woocommerce-checkout-review-order-table .order-total th {
  color: var(--kc-teal) !important;
  font-family: var(--kc-font-display) !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  border-bottom: none !important;
}

/* Payment section */
#payment {
  background: var(--kc-dark) !important;
  border: 1px solid var(--kc-dark-border) !important;
  padding: 1.5rem !important;
  margin-top: 1rem !important;
}

#payment .payment_methods {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 1.5rem !important;
}

#payment .payment_methods li {
  padding: 0.75rem 0 !important;
  border-bottom: 1px solid var(--kc-dark-border) !important;
}

#payment .payment_methods li label {
  font-family: var(--kc-font-display) !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--kc-white) !important;
  cursor: pointer !important;
}

#payment .payment_box {
  background: var(--kc-dark-card) !important;
  border: 1px solid var(--kc-dark-border) !important;
  padding: 1rem !important;
  margin-top: 0.75rem !important;
  color: var(--kc-mid-gray) !important;
  font-size: 0.85rem !important;
}

/* Place order button */
#place_order {
  background: var(--kc-teal) !important;
  color: var(--kc-black) !important;
  font-family: var(--kc-font-display) !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 1.1rem 2rem !important;
  width: 100% !important;
  cursor: pointer !important;
  transition: background-color var(--kc-transition) !important;
  margin-top: 1rem !important;
}

#place_order:hover {
  background: var(--kc-teal-dark) !important;
  color: var(--kc-white) !important;
}

/* Checkout on mobile */
@media (max-width: 900px) {
  .woocommerce-checkout form.checkout {
    grid-template-columns: 1fr !important;
  }
  .woocommerce-checkout form.checkout #order_review_heading,
  .woocommerce-checkout form.checkout #order_review {
    grid-column: 1 !important;
  }
  #order_review {
    position: static !important;
  }
}

/* ============================================================
   PATCH 13 — Hide page titles on UM + WooCommerce pages
   (REGISTER, LOGIN, CART, CHECKOUT page H1 titles)
   ============================================================ */

/* Hide "REGISTER" page title */
body:has(.um-register) h1.entry-title,
body:has(.um-register) .entry-title,
body:has(.um-register) .wp-block-post-title {
  display: none !important;
}

/* Hide "LOGIN" page title */
body:has(.um-login) h1.entry-title,
body:has(.um-login) .entry-title,
body:has(.um-login) .wp-block-post-title {
  display: none !important;
}

/* Hide "CART" page title */
.woocommerce-cart h1.entry-title,
.woocommerce-cart .entry-title,
.woocommerce-cart .wp-block-post-title {
  display: none !important;
}

/* Hide "CHECKOUT" page title */
.woocommerce-checkout h1.entry-title,
.woocommerce-checkout .entry-title,
.woocommerce-checkout .wp-block-post-title {
  display: none !important;
}

/* ============================================================
   PATCH 14 — WooCommerce error & notice messages
   ============================================================ */

.woocommerce-error {
  background: rgba(255, 60, 60, 0.08) !important;
  border-left: 4px solid #ff4444 !important;
  color: var(--kc-white) !important;
  list-style: none !important;
  padding: 1rem 1.5rem !important;
  margin-bottom: 1.5rem !important;
  border-radius: 0 !important;
}

.woocommerce-error li {
  font-family: var(--kc-font-display) !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.05em !important;
  color: var(--kc-white) !important;
}

.woocommerce-message {
  background: rgba(0, 200, 180, 0.08) !important;
  border-left: 4px solid var(--kc-teal) !important;
  color: var(--kc-white) !important;
  padding: 1rem 1.5rem !important;
  margin-bottom: 1.5rem !important;
  border-radius: 0 !important;
}

.woocommerce-message a.button {
  background: transparent !important;
  color: var(--kc-teal) !important;
  border: 1px solid var(--kc-teal) !important;
  padding: 0.45rem 1rem !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.1em !important;
  font-family: var(--kc-font-display) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  margin-right: 1rem !important;
}

.woocommerce-message a.button:hover {
  background: var(--kc-teal) !important;
  color: var(--kc-black) !important;
}

/* ============================================================
   PATCH 15 — Empty cart page styling
   ============================================================ */

/* Empty cart sad face emoji & message */
.woocommerce-cart .cart-empty {
  font-family: var(--kc-font-display) !important;
  font-size: 1rem !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--kc-mid-gray) !important;
  text-align: center !important;
  padding: 3rem 2rem 1rem !important;
}

.return-to-shop {
  text-align: center;
  padding-bottom: 3rem;
}

.return-to-shop .button {
  background: transparent !important;
  color: var(--kc-teal) !important;
  border: 1px solid var(--kc-teal) !important;
  padding: 0.75rem 2rem !important;
  font-family: var(--kc-font-display) !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  display: inline-block !important;
  transition: all var(--kc-transition) !important;
}

.return-to-shop .button:hover {
  background: var(--kc-teal) !important;
  color: var(--kc-black) !important;
}

/* ============================================================
   PATCH 16 — Variable product: force SIZE label visible
   Ensure variation select is always prominent
   ============================================================ */

.single-product .variations_form .variations {
  width: 100% !important;
  margin-bottom: 1.5rem !important;
}

.single-product .variations_form .variations td,
.single-product .variations_form .variations th {
  padding: 0.5rem 0 !important;
  border: none !important;
  background: transparent !important;
}

.single-product .variations_form .variations td.label {
  width: auto !important;
  padding-right: 1rem !important;
  white-space: nowrap !important;
}

.single-product .variations_form .variations td.label label {
  font-family: var(--kc-font-display) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: var(--kc-mid-gray) !important;
}

.single-product .variations_form .variations td.value select {
  background: var(--kc-dark-card) !important;
  border: 1px solid var(--kc-dark-border) !important;
  color: var(--kc-white) !important;
  font-family: var(--kc-font-display) !important;
  font-size: 0.85rem !important;
  padding: 0.65rem 2.5rem 0.65rem 1rem !important;
  min-width: 200px !important;
  border-radius: 0 !important;
  cursor: pointer !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='%2300c8b4' stroke-width='2' fill='none'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 1rem center !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

.single-product .variations_form .variations td.value select:focus {
  border-color: var(--kc-teal) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(0,200,180,0.1) !important;
}

/* Reset variation link */
.single-product .reset_variations {
  font-family: var(--kc-font-display) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.08em !important;
  color: var(--kc-mid-gray) !important;
  text-decoration: underline !important;
  margin-left: 0.5rem !important;
}

/* ============================================================
   PATCH 17 — Login to purchase notice (B2B gate)
   ============================================================ */

.kc-login-notice {
  background: rgba(0, 200, 180, 0.06) !important;
  border: 1px solid var(--kc-teal) !important;
  padding: 1.25rem 1.5rem !important;
  margin-top: 1.5rem !important;
}

.kc-login-notice p {
  font-family: var(--kc-font-display) !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.06em !important;
  color: var(--kc-light-gray) !important;
  margin: 0 !important;
}

.kc-login-notice a {
  color: var(--kc-teal) !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
}

/* Product card — "Login to see price" link */
.kc-product-card__price--hidden,
a.kc-product-card__price--hidden {
  font-family: var(--kc-font-display) !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--kc-teal) !important;
  text-decoration: none !important;
  border-bottom: 1px solid var(--kc-teal) !important;
  padding-bottom: 1px !important;
}

.kc-product-card__price--hidden:hover {
  color: var(--kc-teal-light) !important;
}

/* ============================================================
   PATCH 18 — Cart quantity column: fix +/- button overlap
   ============================================================ */

/* Give the quantity column enough room */
.woocommerce-cart-form table.cart td.product-quantity {
  min-width: 120px !important;
  white-space: nowrap !important;
}

/* Quantity wrapper — use flex so input + buttons sit side by side */
.woocommerce-cart-form table.cart td.product-quantity .quantity {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  width: auto !important;
}

/* The number input itself */
.woocommerce-cart-form table.cart td.product-quantity .quantity input.qty {
  width: 48px !important;
  min-width: 48px !important;
  text-align: center !important;
  padding: 0.45rem 0.25rem !important;
  border-left: none !important;
  border-right: none !important;
  border-radius: 0 !important;
  background: var(--kc-dark-card) !important;
  color: var(--kc-white) !important;
  border-top: 1px solid var(--kc-dark-border) !important;
  border-bottom: 1px solid var(--kc-dark-border) !important;
  font-family: var(--kc-font-display) !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  -moz-appearance: textfield !important;
  appearance: textfield !important;
}

/* Remove browser spinner arrows from number input */
.woocommerce-cart-form table.cart td.product-quantity .quantity input.qty::-webkit-outer-spin-button,
.woocommerce-cart-form table.cart td.product-quantity .quantity input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

/* +/- buttons (added by WooCommerce quantity JS or theme) */
.woocommerce-cart-form table.cart td.product-quantity .quantity .qty-minus,
.woocommerce-cart-form table.cart td.product-quantity .quantity .qty-plus,
.woocommerce-cart-form table.cart td.product-quantity .quantity button.minus,
.woocommerce-cart-form table.cart td.product-quantity .quantity button.plus {
  width: 32px !important;
  height: 36px !important;
  background: var(--kc-dark) !important;
  border: 1px solid var(--kc-dark-border) !important;
  color: var(--kc-white) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  line-height: 1 !important;
  transition: background-color var(--kc-transition), color var(--kc-transition) !important;
  flex-shrink: 0 !important;
}

.woocommerce-cart-form table.cart td.product-quantity .quantity .qty-minus,
.woocommerce-cart-form table.cart td.product-quantity .quantity button.minus {
  border-radius: 0 !important;
  border-right: none !important;
}

.woocommerce-cart-form table.cart td.product-quantity .quantity .qty-plus,
.woocommerce-cart-form table.cart td.product-quantity .quantity button.plus {
  border-radius: 0 !important;
  border-left: none !important;
}

.woocommerce-cart-form table.cart td.product-quantity .quantity .qty-minus:hover,
.woocommerce-cart-form table.cart td.product-quantity .quantity button.minus:hover,
.woocommerce-cart-form table.cart td.product-quantity .quantity .qty-plus:hover,
.woocommerce-cart-form table.cart td.product-quantity .quantity button.plus:hover {
  background: var(--kc-teal) !important;
  color: var(--kc-black) !important;
  border-color: var(--kc-teal) !important;
}

/* Also fix quantity on single product page */
.single-product form.cart .quantity {
  display: flex !important;
  align-items: center !important;
}

.single-product form.cart .quantity input.qty {
  width: 56px !important;
  text-align: center !important;
  border-left: none !important;
  border-right: none !important;
  -moz-appearance: textfield !important;
}

.single-product form.cart .quantity input.qty::-webkit-outer-spin-button,
.single-product form.cart .quantity input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}

/* ============================================================
   PATCH 19 — Remove number input spinner arrows globally
   ============================================================ */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}
input[type="number"] {
  -moz-appearance: textfield !important;
  appearance: textfield !important;
}

/* ============================================================
   PATCH 20 — UM Register/Login button — force teal style
   ============================================================ */

/* Primary submit button (REGISTER) */
.um .um-button,
.um input[type="submit"].um-button,
.um button[type="submit"],
div.um .um-button {
  background-color: var(--kc-teal) !important;
  color: var(--kc-black) !important;
  font-family: var(--kc-font-display) !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0.9rem 2rem !important;
  cursor: pointer !important;
  transition: background-color var(--kc-transition) !important;
  width: auto !important;
  display: inline-block !important;
  text-align: center !important;
  box-shadow: none !important;
  outline: none !important;
}

.um .um-button:hover,
.um input[type="submit"].um-button:hover,
div.um .um-button:hover {
  background-color: var(--kc-teal-dark) !important;
  color: var(--kc-white) !important;
}

/* Login secondary button (outline style) */
.um .um-alt-link .um-button,
.um a.um-button.um-alt,
.um-login-fields .um-button[name="um-login"],
a[href*="login"].um-button,
.um .um-button.um-alt {
  background-color: transparent !important;
  color: var(--kc-teal) !important;
  border: 1px solid var(--kc-teal) !important;
  box-sizing: border-box !important;
  min-width: 160px !important;
  height: 48px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.85rem !important;
}

.um .um-button.um-alt:hover {
  background-color: var(--kc-teal) !important;
  color: var(--kc-black) !important;
}

/* Force override UM's inline background styles on buttons */
.um [style*="background"] .um-button,
.um-outerbox .um-button {
  background-color: var(--kc-teal) !important;
}

/* Upload button in UM form (photo of shop) */
.um .um-field-type_file .um-field-upload-btn,
.um .um-profile-photo-img,
.um button.um-field-upload-btn {
  background-color: var(--kc-teal) !important;
  color: var(--kc-black) !important;
  font-family: var(--kc-font-display) !important;
  font-weight: 700 !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0.75rem 1.5rem !important;
  cursor: pointer !important;
}

/* ============================================================
   PATCH 21 — qty input: hide browser default number arrows
   more specific selectors to override browser defaults
   ============================================================ */
.qty::-webkit-outer-spin-button,
.qty::-webkit-inner-spin-button,
input.qty::-webkit-outer-spin-button,
input.qty::-webkit-inner-spin-button,
.kc-quantity input::-webkit-outer-spin-button,
.kc-quantity input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  appearance: none !important;
  margin: 0 !important;
  display: none !important;
}

.qty,
input.qty,
.kc-quantity input {
  -moz-appearance: textfield !important;
  appearance: textfield !important;
}

   WOOCOMMERCE MY ACCOUNT — Full Dark Theme
   ============================================================ */

/* Page wrapper */
.woocommerce-account .woocommerce {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 2rem;
  align-items: start;
}

/* Navigation sidebar */
.woocommerce-MyAccount-navigation {
  background: var(--kc-dark-card) !important;
  border: 1px solid var(--kc-dark-border) !important;
  padding: 0 !important;
  position: sticky;
  top: calc(var(--kc-header-h) + 1rem);
}

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

.woocommerce-MyAccount-navigation ul li {
  border-bottom: 1px solid var(--kc-dark-border);
}

.woocommerce-MyAccount-navigation ul li:last-child {
  border-bottom: none;
}

.woocommerce-MyAccount-navigation ul li a {
  display: block !important;
  padding: 0.85rem 1.25rem !important;
  font-family: var(--kc-font-display) !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--kc-light-gray) !important;
  text-decoration: none !important;
  transition: color var(--kc-transition), background-color var(--kc-transition), padding-left var(--kc-transition) !important;
}

.woocommerce-MyAccount-navigation ul li a:hover,
.woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--active a {
  color: var(--kc-teal) !important;
  background-color: rgba(0,200,180,0.05) !important;
  padding-left: 1.75rem !important;
}

/* Content area */
.woocommerce-MyAccount-content {
  background: var(--kc-dark-card) !important;
  border: 1px solid var(--kc-dark-border) !important;
  padding: 2rem !important;
  color: var(--kc-light-gray) !important;
  min-height: 400px;
}

.woocommerce-MyAccount-content p {
  color: var(--kc-light-gray) !important;
  font-size: 0.9rem;
  line-height: 1.7;
}

.woocommerce-MyAccount-content strong {
  color: var(--kc-white) !important;
}

.woocommerce-MyAccount-content a {
  color: var(--kc-teal) !important;
}

/* Account section headings */
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
  font-family: var(--kc-font-display) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--kc-white) !important;
  margin-bottom: 1.5rem !important;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--kc-dark-border);
}

/* Orders table */
.woocommerce-orders-table,
.woocommerce-table {
  width: 100% !important;
  border-collapse: collapse !important;
  background: var(--kc-dark) !important;
}

.woocommerce-orders-table th,
.woocommerce-table th {
  background: var(--kc-dark) !important;
  color: var(--kc-teal) !important;
  font-family: var(--kc-font-display) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  padding: 0.85rem 1rem !important;
  border: 1px solid var(--kc-dark-border) !important;
  text-align: left !important;
}

.woocommerce-orders-table td,
.woocommerce-table td {
  padding: 0.85rem 1rem !important;
  border: 1px solid var(--kc-dark-border) !important;
  color: var(--kc-light-gray) !important;
  font-size: 0.85rem !important;
  vertical-align: middle !important;
  background: var(--kc-dark-card) !important;
}

.woocommerce-orders-table tbody tr:hover td {
  background: rgba(0,200,180,0.03) !important;
}

/* Order status badges */
.woocommerce-order-status {
  font-family: var(--kc-font-display) !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 0.25rem 0.6rem !important;
  border-radius: 2px !important;
}

.wc-processing { background: rgba(0,200,180,0.15) !important; color: var(--kc-teal) !important; }
.wc-completed  { background: rgba(0,150,100,0.15) !important; color: #00b87a !important; }
.wc-pending    { background: rgba(255,180,0,0.15) !important; color: #ffb400 !important; }
.wc-cancelled  { background: rgba(255,60,60,0.15) !important; color: #ff4444 !important; }

/* Account details form */
.woocommerce-EditAccountForm fieldset {
  border: 1px solid var(--kc-dark-border) !important;
  padding: 1.5rem !important;
  margin-bottom: 1.5rem !important;
  background: var(--kc-dark) !important;
}

.woocommerce-EditAccountForm legend {
  font-family: var(--kc-font-display) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--kc-teal) !important;
  padding: 0 0.5rem !important;
}

/* Form fields in account */
.woocommerce-account .woocommerce-form-row,
.woocommerce-account .form-row {
  margin-bottom: 1.25rem !important;
}

.woocommerce-account .woocommerce-form-row label,
.woocommerce-account .form-row label {
  font-family: var(--kc-font-display) !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--kc-light-gray) !important;
  margin-bottom: 0.4rem !important;
  display: block !important;
}

.woocommerce-account input[type="text"],
.woocommerce-account input[type="email"],
.woocommerce-account input[type="password"],
.woocommerce-account input[type="tel"],
.woocommerce-account select,
.woocommerce-account textarea {
  background-color: var(--kc-dark) !important;
  border: 1px solid var(--kc-dark-border) !important;
  color: var(--kc-white) !important;
  font-family: var(--kc-font-body) !important;
  font-size: 0.9rem !important;
  padding: 0.7rem 1rem !important;
  width: 100% !important;
  border-radius: 0 !important;
  transition: border-color var(--kc-transition) !important;
}

.woocommerce-account input:focus,
.woocommerce-account select:focus,
.woocommerce-account textarea:focus {
  border-color: var(--kc-teal) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(0,200,180,0.1) !important;
}

/* Address cards */
.woocommerce-address-fields,
.woocommerce-addresses .woocommerce-Address {
  background: var(--kc-dark) !important;
  border: 1px solid var(--kc-dark-border) !important;
  padding: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}

.woocommerce-Address-title h3 {
  color: var(--kc-teal) !important;
  font-family: var(--kc-font-display) !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  margin-bottom: 1rem !important;
}

/* View order / action buttons in account */
.woocommerce-MyAccount-content .button,
.woocommerce-MyAccount-content a.button {
  background-color: var(--kc-teal) !important;
  color: var(--kc-black) !important;
  font-family: var(--kc-font-display) !important;
  font-weight: 700 !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0.5rem 1.25rem !important;
  text-decoration: none !important;
  display: inline-block !important;
  transition: background-color var(--kc-transition) !important;
}

.woocommerce-MyAccount-content .button:hover,
.woocommerce-MyAccount-content a.button:hover {
  background-color: var(--kc-teal-dark) !important;
  color: var(--kc-white) !important;
}

/* Mobile account layout */
@media (max-width: 768px) {
  .woocommerce-account .woocommerce {
    grid-template-columns: 1fr !important;
    padding: 1rem !important;
  }

  .woocommerce-MyAccount-navigation {
    position: static !important;
  }
}

/* ============================================================
   ULTIMATE MEMBER — Login & Register Pages
   Dark theme override
   ============================================================ */

/* UM form container */
.um-outerbox,
.um .um-form {
  background: var(--kc-dark-card) !important;
  border: 1px solid var(--kc-dark-border) !important;
  border-radius: 0 !important;
  padding: 2.5rem !important;
  max-width: 480px !important;
  margin: 3rem auto !important;
  box-shadow: none !important;
}

/* UM form heading */
.um-login .um-header,
.um-register .um-header {
  display: none !important;
}

/* UM field labels */
.um .um-field-label label {
  font-family: var(--kc-font-display) !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--kc-light-gray) !important;
}

/* UM inputs */
.um .um-field-area input,
.um .um-field-area select,
.um .um-field-area textarea {
  background: var(--kc-dark) !important;
  border: 1px solid var(--kc-dark-border) !important;
  border-radius: 0 !important;
  color: var(--kc-white) !important;
  font-family: var(--kc-font-body) !important;
  font-size: 0.9rem !important;
  padding: 0.7rem 1rem !important;
  height: auto !important;
  line-height: 1.5 !important;
}

.um .um-field-area input:focus,
.um .um-field-area select:focus {
  border-color: var(--kc-teal) !important;
  box-shadow: 0 0 0 2px rgba(0,200,180,0.1) !important;
  outline: none !important;
}

/* UM submit button */
.um .um-button,
.um input[type="submit"] {
  background: var(--kc-teal) !important;
  color: var(--kc-black) !important;
  font-family: var(--kc-font-display) !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0.85rem 2rem !important;
  width: 100% !important;
  cursor: pointer !important;
  transition: background-color var(--kc-transition) !important;
  margin-top: 0.5rem !important;
}

.um .um-button:hover,
.um input[type="submit"]:hover {
  background: var(--kc-teal-dark) !important;
  color: var(--kc-white) !important;
}

/* UM links (forgot password etc) */
.um .um-alt-link a,
.um .um-notice a,
.um a {
  color: var(--kc-teal) !important;
  font-family: var(--kc-font-display) !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.06em !important;
}

/* UM notice messages */
.um .um-notice {
  background: var(--kc-dark) !important;
  border-left: 3px solid var(--kc-teal) !important;
  color: var(--kc-light-gray) !important;
  border-radius: 0 !important;
  padding: 1rem !important;
  font-size: 0.85rem !important;
  margin-bottom: 1rem !important;
}

/* UM error messages */
.um .um-field-error {
  color: #fff !important;
  background: #dd5454 !important;
  font-size: 0.75rem !important;
  font-family: var(--kc-font-display) !important;
  letter-spacing: 0.05em !important;
}

/* UM profile avatar */
.um .um-profile-photo {
  border: 2px solid var(--kc-teal) !important;
}

/* Pending approval message */
.um-notice.um-notice-warning,
.um-account-pending {
  background: rgba(255,180,0,0.1) !important;
  border-left: 3px solid #ffb400 !important;
  color: var(--kc-light-gray) !important;
  padding: 1rem 1.25rem !important;
  font-size: 0.85rem !important;
  margin: 1rem 0 !important;
}

/* ============================================================
   LOGIN PAGE — Custom heading above UM form
   ============================================================ */

.page-id-login-page .wp-block-post-title,
.um-page-login .wp-block-post-title {
  text-align: center !important;
  padding-bottom: 0 !important;
}

/* ============================================================
   REGISTER PAGE — B2B context note
   ============================================================ */

.um-register .um-form::before {
  content: 'Merchant Registration — Admin approval required after email verification.';
  display: block;
  font-family: var(--kc-font-display);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kc-teal);
  text-align: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--kc-dark-border);
}

/* ============================================================
   CART PAGE — Dark Theme
   ============================================================ */

.woocommerce-cart .woocommerce {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

/* Cart table */
.woocommerce-cart-form table.cart {
  background: var(--kc-dark-card) !important;
  border: 1px solid var(--kc-dark-border) !important;
  border-collapse: collapse !important;
  width: 100%;
}

.woocommerce-cart-form table.cart th {
  background: var(--kc-dark) !important;
  color: var(--kc-teal) !important;
  font-family: var(--kc-font-display) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  padding: 1rem !important;
  border: 1px solid var(--kc-dark-border) !important;
}

.woocommerce-cart-form table.cart td {
  padding: 1rem !important;
  border: 1px solid var(--kc-dark-border) !important;
  color: var(--kc-white) !important;
  vertical-align: middle !important;
  background: var(--kc-dark-card) !important;
}

/* Product image in cart */
.woocommerce-cart-form table.cart td.product-thumbnail img {
  width: 80px !important;
  height: 80px !important;
  object-fit: cover !important;
  border: 1px solid var(--kc-dark-border) !important;
}

/* Product name in cart */
.woocommerce-cart-form table.cart td.product-name a {
  font-family: var(--kc-font-display) !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--kc-white) !important;
}

/* Product price in cart */
.woocommerce-cart-form table.cart td.product-price,
.woocommerce-cart-form table.cart td.product-subtotal {
  font-family: var(--kc-font-display) !important;
  font-weight: 700 !important;
  color: var(--kc-teal) !important;
}

/* Remove item button */
.woocommerce-cart-form table.cart td.product-remove a.remove {
  color: var(--kc-mid-gray) !important;
  font-size: 1.2rem !important;
  transition: color var(--kc-transition) !important;
}

.woocommerce-cart-form table.cart td.product-remove a.remove:hover {
  color: #ff4444 !important;
  background: none !important;
}

/* Cart quantity input */
.woocommerce-cart-form table.cart .quantity input.qty {
  background: var(--kc-dark) !important;
  border: 1px solid var(--kc-dark-border) !important;
  color: var(--kc-white) !important;
  text-align: center !important;
  width: 60px !important;
  padding: 0.5rem !important;
  font-family: var(--kc-font-display) !important;
  font-weight: 700 !important;
}

/* Update cart / coupon row */
.woocommerce-cart-form .actions {
  background: var(--kc-dark) !important;
  border: 1px solid var(--kc-dark-border) !important;
  padding: 1rem !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.woocommerce-cart-form .coupon input[type="text"] {
  background: var(--kc-dark-card) !important;
  border: 1px solid var(--kc-dark-border) !important;
  color: var(--kc-white) !important;
  padding: 0.65rem 1rem !important;
  font-family: var(--kc-font-display) !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.06em !important;
  border-radius: 0 !important;
}

/* Cart totals box */
.cart_totals {
  background: var(--kc-dark-card) !important;
  border: 1px solid var(--kc-dark-border) !important;
  padding: 1.5rem !important;
}

.cart_totals h2 {
  font-family: var(--kc-font-display) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--kc-white) !important;
  margin-bottom: 1.25rem !important;
  padding-bottom: 0.75rem !important;
  border-bottom: 1px solid var(--kc-dark-border) !important;
}

.cart_totals table {
  width: 100%;
  border-collapse: collapse;
}

.cart_totals table th {
  font-family: var(--kc-font-display) !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--kc-mid-gray) !important;
  padding: 0.75rem 0 !important;
  border-bottom: 1px solid var(--kc-dark-border) !important;
  text-align: left !important;
  font-weight: 600 !important;
}

.cart_totals table td {
  padding: 0.75rem 0 !important;
  border-bottom: 1px solid var(--kc-dark-border) !important;
  color: var(--kc-white) !important;
  text-align: right !important;
}

.cart_totals .order-total th,
.cart_totals .order-total td {
  color: var(--kc-teal) !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  border-bottom: none !important;
}

.wc-proceed-to-checkout .checkout-button {
  background: var(--kc-teal) !important;
  color: var(--kc-black) !important;
  font-family: var(--kc-font-display) !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 1rem 2rem !important;
  width: 100% !important;
  text-align: center !important;
  display: block !important;
  margin-top: 1rem !important;
  transition: background-color var(--kc-transition) !important;
}

.wc-proceed-to-checkout .checkout-button:hover {
  background: var(--kc-teal-dark) !important;
  color: var(--kc-white) !important;
}

/* Empty cart */
.cart-empty {
  font-family: var(--kc-font-display) !important;
  font-size: 1rem !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--kc-mid-gray) !important;
  text-align: center !important;
  padding: 4rem 2rem !important;
}

.return-to-shop .button {
  margin-top: 1rem !important;
}

/* ============================================================
   CHECKOUT PAGE — Dark Theme
   ============================================================ */

.woocommerce-checkout .woocommerce {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

/* Checkout layout */
.woocommerce-checkout #customer_details {
  float: none !important;
  width: 100% !important;
  margin-bottom: 2rem !important;
}

.woocommerce-checkout #order_review_heading,
.woocommerce-checkout #order_review {
  float: none !important;
  width: 100% !important;
}

/* Use CSS grid for checkout layout */
.woocommerce-checkout form.checkout {
  display: grid !important;
  grid-template-columns: 1fr 420px !important;
  gap: 2rem !important;
  align-items: start !important;
}

.woocommerce-checkout form.checkout #customer_details {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

.woocommerce-checkout form.checkout #order_review_heading {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

.woocommerce-checkout form.checkout #order_review {
  grid-column: 2 !important;
  grid-row: 1 !important;
  margin-top: 2.5rem !important;
}

/* Checkout section boxes */
.woocommerce-billing-fields,
.woocommerce-shipping-fields,
.woocommerce-additional-fields {
  background: var(--kc-dark-card) !important;
  border: 1px solid var(--kc-dark-border) !important;
  padding: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}

.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3,
#order_review_heading {
  font-family: var(--kc-font-display) !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: var(--kc-teal) !important;
  margin-bottom: 1.25rem !important;
  padding-bottom: 0.75rem !important;
  border-bottom: 1px solid var(--kc-dark-border) !important;
}

/* Checkout form fields */
.woocommerce-checkout .form-row label {
  font-family: var(--kc-font-display) !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--kc-light-gray) !important;
  margin-bottom: 0.4rem !important;
  display: block !important;
}

.woocommerce-checkout .form-row input,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea {
  background: var(--kc-dark) !important;
  border: 1px solid var(--kc-dark-border) !important;
  color: var(--kc-white) !important;
  font-family: var(--kc-font-body) !important;
  font-size: 0.9rem !important;
  padding: 0.7rem 1rem !important;
  border-radius: 0 !important;
  width: 100% !important;
}

.woocommerce-checkout .form-row input:focus,
.woocommerce-checkout .form-row select:focus {
  border-color: var(--kc-teal) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(0,200,180,0.1) !important;
}

/* Order review box */
#order_review {
  background: var(--kc-dark-card) !important;
  border: 1px solid var(--kc-dark-border) !important;
  padding: 1.5rem !important;
  position: sticky !important;
  top: calc(var(--kc-header-h) + 1rem) !important;
}

/* Order items table */
table.woocommerce-checkout-review-order-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
}

table.woocommerce-checkout-review-order-table th {
  font-family: var(--kc-font-display) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--kc-teal) !important;
  padding: 0.75rem 0 !important;
  border-bottom: 1px solid var(--kc-dark-border) !important;
  text-align: left !important;
}

table.woocommerce-checkout-review-order-table td {
  padding: 0.75rem 0 !important;
  border-bottom: 1px solid var(--kc-dark-border) !important;
  color: var(--kc-light-gray) !important;
  font-size: 0.85rem !important;
}

table.woocommerce-checkout-review-order-table .order-total td,
table.woocommerce-checkout-review-order-table .order-total th {
  color: var(--kc-teal) !important;
  font-family: var(--kc-font-display) !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  border-bottom: none !important;
}

/* Payment section */
#payment {
  background: var(--kc-dark) !important;
  border: 1px solid var(--kc-dark-border) !important;
  padding: 1.5rem !important;
  margin-top: 1rem !important;
}

#payment .payment_methods {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 1.5rem !important;
}

#payment .payment_methods li {
  padding: 0.75rem 0 !important;
  border-bottom: 1px solid var(--kc-dark-border) !important;
}

#payment .payment_methods li label {
  font-family: var(--kc-font-display) !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--kc-white) !important;
  cursor: pointer !important;
}

#payment .payment_box {
  background: var(--kc-dark-card) !important;
  border: 1px solid var(--kc-dark-border) !important;
  padding: 1rem !important;
  margin-top: 0.75rem !important;
  color: var(--kc-mid-gray) !important;
  font-size: 0.85rem !important;
}

/* Place order button */
#place_order {
  background: var(--kc-teal) !important;
  color: var(--kc-black) !important;
  font-family: var(--kc-font-display) !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 1.1rem 2rem !important;
  width: 100% !important;
  cursor: pointer !important;
  transition: background-color var(--kc-transition) !important;
  margin-top: 1rem !important;
}

#place_order:hover {
  background: var(--kc-teal-dark) !important;
  color: var(--kc-white) !important;
}

/* Checkout on mobile */
@media (max-width: 900px) {
  .woocommerce-checkout form.checkout {
    grid-template-columns: 1fr !important;
  }
  .woocommerce-checkout form.checkout #order_review_heading,
  .woocommerce-checkout form.checkout #order_review {
    grid-column: 1 !important;
  }
  #order_review {
    position: static !important;
  }
}

/* ============================================================
   PATCH 22 — Homepage Hero Section
   Centered text + full-width car image layout
   ============================================================ */

.kc-hero-section {
  background: #000;
  width: 100%;
  overflow: hidden;
  padding: 0 !important;
  margin: 0 !important;
}

.kc-hero-section > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 3.5rem 1.5rem 0;
  background: radial-gradient(ellipse 70% 55% at 50% 0%, #0d4a38 0%, #000 70%);
}

.kc-hero-section picture {
  display: block;
  width: 100%;
}

.kc-hero-section picture img,
.kc-hero-img {
  display: block !important;
  width: 100% !important;
  max-width: 1200px !important;
  height: auto !important;
  margin: 0 auto !important;
  animation: kcHeroFloat 6s ease-in-out infinite;
}

@keyframes kcHeroFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}

@media (max-width: 768px) {
  .kc-hero-section > div {
    padding: 2.5rem 1rem 0;
  }
  .kc-hero-section picture img,
  .kc-hero-img {
    animation: kcHeroFloatMobile 6s ease-in-out infinite;
  }
  @keyframes kcHeroFloatMobile {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-6px); }
  }
}

/* Remove any TT4/FSE default padding that pushes hero down */
.home .kc-hero-section {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ============================================================
   PATCH 23 — Homepage Hero full-bleed fix
   Force hero section to break out of FSE content constraints
   ============================================================ */

/* Break the hero completely out of any max-width wrapper */
.home .kc-homepage,
.page-template-front-page .kc-homepage {
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* Target the hero section — first section inside kc-homepage */
.kc-homepage > section:first-of-type {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* The inner div with text + image */
.kc-homepage > section:first-of-type > div {
  width: 100% !important;
  max-width: 100% !important;
  padding: 3.5rem 1.5rem 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  background: radial-gradient(ellipse 70% 55% at 50% 0%, #0d4a38 0%, #000 70%) !important;
}

/* Hero image — full width, no constraints */
.kc-homepage > section:first-of-type picture,
.kc-homepage > section:first-of-type picture img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 !important;
}

/* Hero heading */
.kc-homepage > section:first-of-type h1 {
  font-family: var(--kc-font-display) !important;
  font-size: clamp(3rem, 8vw, 6rem) !important;
  font-weight: 800 !important;
  font-style: italic !important;
  line-height: 0.9 !important;
  color: #fff !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  margin: 0 0 2.5rem 0 !important;
  text-align: center !important;
}

/* Hero eyebrow text */
.kc-homepage > section:first-of-type p:first-of-type {
  font-size: clamp(0.6rem, 1.4vw, 0.8rem) !important;
  letter-spacing: 0.22em !important;
  color: rgba(255,255,255,0.55) !important;
  text-transform: uppercase !important;
  font-weight: 400 !important;
  margin: 0 0 0.8rem 0 !important;
  text-align: center !important;
}

/* Floating animation */
.kc-homepage > section:first-of-type picture img {
  animation: kcHeroFloat 6s ease-in-out infinite !important;
}

@keyframes kcHeroFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}

@media (max-width: 768px) {
  .kc-homepage > section:first-of-type > div {
    padding: 2.5rem 1rem 0 !important;
  }
  .kc-homepage > section:first-of-type h1 {
    font-size: clamp(2.5rem, 13vw, 3.5rem) !important;
    margin-bottom: 1.5rem !important;
  }
}

/* ============================================================
   PATCH 24 — New Homepage Design (koochoi-updated.html)
   All styles prefixed with kc- to avoid conflicts
   ============================================================ */

  *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

  

  html { scroll-behavior: smooth; }

  body {
    background: #050f0d;
    color: var(--white);
    font-family: 'Barlow', sans-serif;
    overflow-x: hidden;
    cursor: none;
  }

  /* CUSTOM CURSOR */
  .kc-cursor {
    width: 10px; height: 10px;
    background: var(--teal);
    border-radius: 50%;
    position: fixed;
    top: 0; left: 0;
    pointer-events: none;
    z-index: 9999;
    transition: transform 0.1s ease;
    mix-blend-mode: difference;
  }
  .kc-cursor-ring {
    width: 36px; height: 36px;
    border: 1px solid rgba(0,200,180,0.5);
    border-radius: 50%;
    position: fixed;
    top: 0; left: 0;
    pointer-events: none;
    z-index: 9998;
    transition: transform 0.15s ease, width 0.3s, height 0.3s;
  }
  .kc-cursor-ring.kc-hovering { width: 60px; height: 60px; border-color: var(--teal); }

  /* HERO */
.kc-hero-v2 {
    height: 100vh;
    position: relative;
    display: flex; align-items: flex-end;
    overflow: hidden;
  }
  .kc-hero-v2-bg {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: none;
    transition: none;
  }
  .kc-hero-v2-bg.loaded { transform: none; }

  .kc-hero-v2-lines {
    position: absolute; inset: 0; pointer-events: none;
    background-image: repeating-linear-gradient(
      90deg, transparent, transparent 120px,
      rgba(0,200,180,0.04) 120px, rgba(0,200,180,0.04) 121px
    );
  }

  .kc-hero-v2-content {
    position: relative; z-index: 2;
    padding: 0 48px 80px;
    max-width: 900px;
    align-self: flex-end;
    margin-bottom: 0;
  }
  .kc-hero-v2-eyebrow {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 12px;
    letter-spacing: 6px;
    text-transform: uppercase;
    color: var(--teal);
    margin-bottom: 20px;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeUp 0.8s ease 0.3s forwards;
  }
  .kc-hero-v2-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(48px, 7vw, 100px);
    line-height: 0.92;
    letter-spacing: 2px;
    opacity: 0;
    transform: translateY(40px);
    animation: fadeUp 0.9s ease 0.5s forwards;
  }
  .kc-hero-v2-title em {
    font-style: normal;
    color: var(--teal);
    -webkit-text-stroke: 0px;
  }
  .kc-hero-v2-title .kc-outline {
    -webkit-text-stroke: 1px rgba(0,200,180,0.5);
    color: transparent;
  }
  .kc-hero-v2-sub {
    font-size: 15px;
    font-weight: 300;
    color: rgba(245,243,239,0.6);
    margin-top: 24px;
    max-width: 400px;
    line-height: 1.7;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeUp 0.8s ease 0.8s forwards;
  }
  .kc-hero-v2-buttons {
    display: flex; gap: 16px; margin-top: 40px;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeUp 0.8s ease 1s forwards;
  }
  .kc-btn-v2-primary {
    background: var(--teal);
    color: #000;
    padding: 14px 36px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.3s;
  }
  .kc-btn-v2-primary:hover { background: #009d8c; transform: translateY(-2px); }
  .kc-btn-v2-ghost {
    border: 1px solid rgba(245,243,239,0.3);
    color: #fff;
    padding: 14px 36px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.3s;
  }
  .kc-btn-v2-ghost:hover { border-color: #fff; color: #fff; transform: translateY(-2px); }

  .kc-hero-v2-scroll {
    position: absolute; bottom: 40px; right: 48px;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    opacity: 0;
    animation: fadeUp 0.8s ease 1.4s forwards;
  }
  .kc-hero-v2-scroll span {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: rgba(245,243,239,0.4);
    writing-mode: vertical-rl;
  }
  .kc-scroll-line {
    width: 1px; height: 60px;
    background: linear-gradient(to bottom, rgba(0,200,180,0.8), transparent);
    animation: scrollPulse 2s ease infinite;
  }
  @keyframes scrollPulse {
    0% { transform: scaleY(0); transform-origin: top; }
    50% { transform: scaleY(1); transform-origin: top; }
    51% { transform: scaleY(1); transform-origin: bottom; }
    100% { transform: scaleY(0); transform-origin: bottom; }
  }

  .kc-hero-v2-badge {
    position: absolute; top: 50%; right: 48px;
    transform: translateY(-50%);
    width: 100px; height: 100px;
    border: 1px solid rgba(0,200,180,0.4);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    text-align: center;
    opacity: 0;
    animation: fadeUp 0.8s ease 1.2s forwards, rotateSpin 20s linear infinite;
  }
  .kc-hero-v2-badge span {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--silver);
    line-height: 1.4;
  }
  @keyframes rotateSpin {
    from { transform: translateY(-50%) rotate(0deg); }
    to { transform: translateY(-50%) rotate(360deg); }
  }

  @keyframes fadeUp {
    to { opacity: 1; transform: translateY(0); }
  }

  /* MARQUEE */
  .kc-marquee-strip {
    background: var(--teal);
    padding: 14px 0;
    overflow: hidden;
    white-space: nowrap;
  }
  .kc-marquee-inner {
    display: inline-flex;
    animation: marquee 20s linear infinite;
  }
  .kc-marquee-inner span {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--white);
    padding: 0 40px;
  }
  .kc-marquee-inner span.kc-dot { color: rgba(255,255,255,0.4); padding: 0 4px; }
  @keyframes marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }

  /* SECTION BASE */
  section { position: relative; }

  /* PRODUCTS SECTION */
  .kc-products-v2 {
    padding: 120px 48px;
    background: #091412;
  }
  .kc-section-label {
    color: #00e8d0 !important;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px;
    letter-spacing: 6px;
    text-transform: uppercase;
    color: var(--teal);
    margin-bottom: 16px;
  }
  .kc-section-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(48px, 6vw, 80px);
    line-height: 1;
    letter-spacing: 2px;
    margin-bottom: 64px;
  }
  .kc-section-title .kc-outline {
    -webkit-text-stroke: 1px rgba(245,243,239,0.2);
    color: transparent;
  }

  .kc-products-grid-v2 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
  }
  .kc-product-card-v2 {
    position: relative;
    aspect-ratio: 3/4;
    overflow: hidden;
    cursor: none;
  }
  .kc-product-card-bg {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center right;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .kc-product-card-v2:hover .kc-product-card-bg { transform: scale(1.08); }
  .kc-product-card-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(10,10,10,0.95) 0%, rgba(10,10,10,0.2) 60%, transparent 100%);
    transition: background 0.3s;
  }
  .kc-product-card-v2:hover .kc-product-card-overlay {
    background: linear-gradient(to top, rgba(10,10,10,0.98) 0%, rgba(10,10,10,0.4) 60%, rgba(0,200,180,0.1) 100%);
  }
  .kc-product-card-content {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 32px 24px;
  }
  .kc-product-tag {
    display: inline-block;
    background: var(--teal);
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    padding: 4px 10px;
    margin-bottom: 12px;
  }
  .kc-product-name {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 28px;
    letter-spacing: 2px;
    line-height: 1;
    margin-bottom: 8px;
  }
  .kc-product-desc {
    font-size: 12px;
    color: rgba(245,243,239,0.5);
    letter-spacing: 1px;
    font-weight: 300;
    margin-bottom: 20px;
  }
  .kc-product-arrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 12px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--teal);
    text-decoration: none;
    transform: translateX(-8px);
    opacity: 0;
    transition: all 0.3s;
  }
  .kc-product-card-v2:hover .kc-product-arrow { transform: translateX(0); opacity: 1; }
  .kc-product-arrow::after { content: '→'; font-size: 16px; }

  /* BESTSELLERS */
  .kc-bestsellers-v2 {
    padding: 120px 0;
    background: #050f0d;
    overflow: hidden;
  }
  .kc-bestsellers-v2-header {
    padding: 0 48px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 56px;
  }
  .kc-carousel-controls { display: flex; gap: 12px; }
  .kc-carousel-btn {
    width: 48px; height: 48px;
    border: 1px solid rgba(245,243,239,0.2);
    background: none;
    color: var(--white);
    font-size: 18px;
    cursor: none;
    transition: all 0.3s;
    display: flex; align-items: center; justify-content: center;
  }
  .kc-carousel-btn:hover { border-color: var(--teal); color: var(--teal); }

  .kc-carousel-track {
    display: flex;
    gap: 2px;
    padding: 0 48px;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .kc-bs-card {
    flex: 0 0 280px;
    background: #161618;
    padding: 32px;
    position: relative;
    overflow: hidden;
    transition: background 0.3s;
    cursor: none;
  }
  .kc-bs-card:hover { background: #1c1c1f; }
  .kc-bs-card-accent {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--teal);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
  }
  .kc-bs-card:hover .kc-bs-card-accent { transform: scaleX(1); }
  .kc-bs-color-swatch {
    width: 48px; height: 48px;
    border-radius: 50%;
    margin-bottom: 24px;
    position: relative;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  }
  .kc-bs-color-swatch::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1px solid rgba(245,243,239,0.1);
  }
  .kc-bs-product-name {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 8px;
  }
  .kc-bs-product-code {
    font-size: 12px;
    color: rgba(245,243,239,0.3);
    letter-spacing: 2px;
    font-family: 'Barlow Condensed', sans-serif;
    margin-bottom: 24px;
  }
  .kc-bs-login-tag {
    font-size: 11px;
    color: rgba(245,243,239,0.4);
    letter-spacing: 2px;
    font-family: 'Barlow Condensed', sans-serif;
    text-transform: uppercase;
    border: 1px solid rgba(245,243,239,0.1);
    padding: 6px 12px;
    display: inline-block;
  }
  .kc-bs-num {
    position: absolute;
    bottom: 32px; right: 32px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 64px;
    color: rgba(245,243,239,0.04);
    line-height: 1;
  }

  /* FEATURE / DIFFERENCE */
  .kc-difference-v2 {
    padding: 120px 48px;
    background: var(--white);
    color: var(--black);
    position: relative;
    overflow: hidden;
  }
  .kc-difference-v2::before {
    content: 'KOOCHOI';
    position: absolute;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 220px;
    color: rgba(10,10,10,0.04);
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    pointer-events: none;
    letter-spacing: 10px;
  }
  .kc-difference-v2 .kc-section-label {
    color: #00e8d0 !important; color: var(--teal); }
  .kc-difference-v2 .kc-section-title { color: var(--black); }
  .kc-difference-v2 .kc-section-title .kc-outline {
    -webkit-text-stroke: 1px rgba(10,10,10,0.15);
  }
  .kc-diff-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;
    margin-top: 80px;
  }
  .kc-diff-item {
    position: relative;
    padding-top: 32px;
  }
  .kc-diff-item::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 40px; height: 2px;
    background: var(--teal);
  }
  .kc-diff-number {
    color: #00c8b4 !important;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 72px;
    line-height: 1;
    color: rgba(10,10,10,0.08);
    margin-bottom: -20px;
    display: block;
  }
  .kc-diff-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 32px;
    letter-spacing: 2px;
    color: var(--black);
    margin-bottom: 16px;
  }
  .kc-diff-text {
    font-size: 14px;
    line-height: 1.8;
    color: rgba(10,10,10,0.55);
    font-weight: 300;
  }

  /* COLOUR CARD CTA */
  .kc-colour-cta-v2 {
    padding: 0;
    min-height: 70vh;
    display: flex;
    position: relative;
    overflow: hidden;
  }
  .kc-colour-cta-v2-left {
    flex: 1;
    background: #091412;
    padding: 100px 64px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 1;
  }
  .kc-colour-cta-v2-right {
    flex: 1;
    position: relative;
    overflow: hidden;
  }
  .kc-colour-cta-v2-right-bg {
    position: absolute; inset: 0;
    background: url('https://koochoicarwrap.com/wp-content/uploads/2026/05/koochoi-hero-mobile-800x333-1.jpg') center/cover no-repeat;
    transition: transform 0.6s ease;
  }
  .kc-colour-cta-v2:hover .kc-colour-cta-v2-right-bg { transform: scale(1.04); }
  .kc-colour-cta-v2-right-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to right, var(--dark) 0%, transparent 40%);
  }
  .kc-swatches {
    display: flex; gap: 12px; margin-bottom: 40px; flex-wrap: wrap;
  }
  .kc-swatch {
    width: 32px; height: 32px;
    border-radius: 50%;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
    border: 2px solid rgba(255,255,255,0.08);
    transition: transform 0.2s;
    cursor: none;
  }
  .kc-swatch:hover { transform: scale(1.2); }
  .kc-exclusive-tag {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 10px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 12px;
  }
  .kc-cta-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(48px, 5vw, 72px);
    line-height: 1;
    letter-spacing: 2px;
    margin-bottom: 24px;
  }
  .kc-cta-title .kc-teal-text { color: var(--teal); }
  .kc-cta-subtitle {
    font-size: 14px;
    color: rgba(245,243,239,0.5);
    line-height: 1.8;
    font-weight: 300;
    max-width: 360px;
    margin-bottom: 40px;
  }

  /* REGISTER BANNER */
  .kc-register-banner-v2 {
    padding: 100px 48px;
    background: var(--teal);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
  }
  .kc-register-banner-v2::before {
    content: '';
    position: absolute; inset: 0;
    background-image: repeating-linear-gradient(
      45deg, transparent, transparent 20px,
      rgba(255,255,255,0.03) 20px, rgba(255,255,255,0.03) 21px
    );
  }
  .kc-register-banner-v2-text { position: relative; }
  .kc-register-banner-v2-text h2 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(42px, 5vw, 68px);
    letter-spacing: 2px;
    line-height: 1;
    margin-bottom: 16px;
  }
  .kc-register-banner-v2-text p {
    font-size: 15px;
    font-weight: 300;
    color: rgba(245,243,239,0.75);
    max-width: 400px;
    line-height: 1.7;
  }
  .kc-btn-white {
    background: var(--white);
    color: var(--teal);
    padding: 16px 48px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    position: relative;
    transition: all 0.3s;
    flex-shrink: 0;
  }
  .kc-btn-white:hover { transform: translateY(-3px); box-shadow: 0 20px 40px rgba(0,0,0,0.3); }

  /* FOOTER */
  footer {
    background: #091412;
    padding: 80px 48px 40px;
    border-top: 1px solid rgba(245,243,239,0.06);
  }
  .footer-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 60px;
    border-bottom: 1px solid rgba(245,243,239,0.06);
    gap: 48px;
    flex-wrap: wrap;
  }
  .footer-brand { max-width: 280px; }
  .footer-logo {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 32px;
    letter-spacing: 4px;
    color: var(--white);
    margin-bottom: 16px;
  }
  .footer-logo span { color: var(--teal); }
  .footer-tagline {
    font-size: 13px;
    color: rgba(245,243,239,0.4);
    line-height: 1.7;
    font-weight: 300;
    font-style: italic;
  }
  .footer-col h4 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: rgba(245,243,239,0.4);
    margin-bottom: 20px;
  }
  .footer-col ul { list-style: none; }
  .footer-col ul li { margin-bottom: 12px; }
  .footer-col ul a {
    font-size: 14px;
    color: rgba(245,243,239,0.6);
    text-decoration: none;
    transition: color 0.2s;
    font-weight: 300;
  }
  .footer-col ul a:hover { color: var(--white); }
  .footer-socials { display: flex; gap: 16px; }
  .social-link {
    width: 40px; height: 40px;
    border: 1px solid rgba(245,243,239,0.15);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
    color: rgba(245,243,239,0.5);
    text-decoration: none;
    transition: all 0.3s;
  }
  .social-link:hover { border-color: var(--teal); color: var(--teal); }
  .footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 40px;
    flex-wrap: wrap;
    gap: 16px;
  }
  .footer-copy {
    font-size: 12px;
    color: rgba(245,243,239,0.3);
    letter-spacing: 2px;
    font-family: 'Barlow Condensed', sans-serif;
    text-transform: uppercase;
  }

  /* SCROLL REVEAL */
  .kc-reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
  }
  .kc-reveal.kc-visible { opacity: 1; transform: translateY(0); }
  .kc-reveal-delay-1 { transition-delay: 0.1s; }
  .kc-reveal-delay-2 { transition-delay: 0.2s; }
  .kc-reveal-delay-3 { transition-delay: 0.3s; }
  .kc-reveal-delay-4 { transition-delay: 0.4s; }

  /* STATS BAR */
  .kc-stats-bar {
    background: #091f1a;
    border-top: 1px solid rgba(0,200,180,0.15);
    border-bottom: 1px solid rgba(0,200,180,0.15);
    display: flex;
  }
  .kc-stat-item {
    flex: 1;
    padding: 40px 32px;
    border-right: 1px solid rgba(245,243,239,0.06);
    text-align: center;
    transition: background 0.3s;
  }
  .kc-stat-item:last-child { border-right: none; }
  .kc-stat-item:hover { background: rgba(0,200,180,0.1); }
  .kc-stat-number {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 52px;
    color: #ffffff;
    letter-spacing: 2px;
    line-height: 1;
    display: block;
    text-shadow: none;
  }
  .kc-stat-number span { color: var(--teal); }
  .kc-stat-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: rgba(245,243,239,0.7);
    margin-top: 8px;
    display: block;
  }

  
/* ── FSE OVERRIDES for new homepage ── */
.home main#main,
.home #main { padding: 0 !important; margin: 0 !important; }
.home .kc-hero-v2,
.home .kc-marquee-strip,
.home .kc-stats-bar,
.home .kc-products-v2,
.home .kc-bestsellers-v2,
.home .kc-difference-v2,
.home .kc-colour-cta-v2,
.home .kc-register-banner-v2 {
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}



/* ── Critical display fixes ── */
.wp-block-html { display: contents !important; }
.wp-block-post-content > .wp-block-html > section,
.wp-block-post-content > .wp-block-html > div {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}
.kc-hero-v2 { height: 100vh !important; }
.kc-product-card-bg {
  position: absolute !important; inset: 0 !important;
  background-size: cover !important;
  background-position: center right !important;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}
.kc-product-card-v2:hover .kc-product-card-bg { transform: scale(1.08) !important; }

/* ── TEAL BOOST ── */
  

  /* Ambient teal glow on sections */
  .services, .kc-bestsellers-v2, .kc-difference-v2 {
    background: linear-gradient(180deg, #050f0d 0%, #07100e 100%) !important;
    position: relative;
  }
  .services::before, .kc-difference-v2::before {
    content: '';
    position: absolute;
    top: 0; left: 50%; transform: translateX(-50%);
    width: 60%; height: 1px;
    background: linear-gradient(to right, transparent, rgba(0,200,180,0.4), transparent);
    pointer-events: none;
  }

  /* Teal glow on product/service cards */
  .kc-product-card-v2:hover, .kc-bs-card:hover {
    box-shadow: 0 0 30px rgba(0,200,180,0.15), 0 8px 32px rgba(0,0,0,0.6) !important;
    border-color: rgba(0,200,180,0.5) !important;
  }

  /* Section titles outline — teal */
  .kc-outline {
    -webkit-text-stroke: 1px rgba(0,200,180,0.55) !important;
    color: transparent !important;
  }

  /* Colour CTA section — deep teal bg */
  .kc-colour-cta-v2 {
    background: linear-gradient(135deg, #040d0b 0%, #071a16 50%, #040d0b 100%) !important;
  }

  /* Register banner — teal gradient */
  .kc-register-banner-v2 {
    background: linear-gradient(135deg, #0a3830 0%, #041f1a 100%) !important;
    border-top: 1px solid rgba(0,200,180,0.2) !important;
  }

  /* Footer — teal tinted */
  footer {
    background: #030a09 !important;
    border-top: 1px solid rgba(0,200,180,0.15) !important;
  }
  footer h4 { color: var(--teal) !important; }

  /* Nav links hover */
  .nav-links a:hover { color: var(--teal) !important; }

  /* Scrollbar teal */
  ::-webkit-scrollbar-thumb { background: var(--teal-dark) !important; }
  ::-webkit-scrollbar { width: 4px; background: #050f0d; }

  /* Ghost button hover — teal border */
  .kc-btn-v2-ghost:hover { border-color: #fff !important; color: #fff !important; transform: translateY(-2px) !important; }

  /* Hero scroll indicator */
  .kc-scroll-line {
    background: linear-gradient(to bottom, var(--teal), transparent) !important;
  }

  /* Diff items left border accent */
  .kc-diff-item { border-left: 2px solid rgba(0,200,180,0.25) !important; padding-left: 24px; }
  .kc-diff-item:hover { border-left-color: var(--teal) !important; }

  /* Number badges */
  .kc-diff-number, .kc-bs-num { color: rgba(0,200,180,0.25) !important; }
  .kc-diff-item:hover .kc-diff-number { color: var(--teal) !important; }


  /* ══════════════════════════════════════
     MOBILE RESPONSIVE — max-width: 768px
     ══════════════════════════════════════ */
  @media (max-width: 768px) {
    body { cursor: auto; }
    .cursor, .kc-cursor-ring { display: none; }

    /* Nav */
    nav { padding: 16px 20px; }
    .nav-links { display: none; }
    .nav-logo { font-size: 22px; }

    /* Hero */
    .kc-hero-v2 { height: 100svh; align-items: flex-end; }
    .kc-hero-v2-content { padding: 0 20px 60px; }
    .kc-hero-v2-title { font-size: clamp(52px, 14vw, 80px); }
    .kc-hero-v2-sub { font-size: 13px; max-width: 100%; }
    .kc-hero-v2-buttons { flex-direction: column; gap: 12px; }
    .kc-hero-v2-buttons a { text-align: center; }
    .kc-hero-v2-badge { display: none; }
    .kc-hero-v2-scroll { right: 20px; bottom: 30px; }

    /* Marquee */
    .kc-marquee-inner span { font-size: 11px; padding: 0 20px; }

    /* Stats bar */
    .kc-stats-bar { flex-wrap: wrap; }
    .kc-stat-item { flex: 1 1 50%; border-right: none; border-bottom: 1px solid rgba(245,243,239,0.06); padding: 28px 16px; }
    .kc-stat-number { font-size: 40px; }

    /* Products */
    .kc-products-v2 { padding: 60px 20px; }
    .kc-products-grid-v2 { grid-template-columns: 1fr 1fr; gap: 2px; }
    .kc-product-name { font-size: 22px; }

    /* Bestsellers */
    .kc-bestsellers-v2 { padding: 60px 0; }
    .kc-bestsellers-v2-header { padding: 0 20px; flex-direction: column; align-items: flex-start; gap: 20px; margin-bottom: 32px; }
    .kc-carousel-track { padding: 0 20px; }
    .kc-bs-card { flex: 0 0 240px; padding: 24px; }

    /* Why Koochoi */
    .kc-difference-v2 { padding: 60px 20px; }
    .kc-diff-grid { grid-template-columns: 1fr; gap: 32px; margin-top: 40px; }
    .kc-diff-title { font-size: 26px; }
    .kc-difference-v2::before { font-size: 80px; }

    /* Colour CTA */
    .kc-colour-cta-v2 { flex-direction: column; min-height: auto; }
    .kc-colour-cta-v2-left { padding: 60px 20px; }
    .kc-colour-cta-v2-right { min-height: 280px; }
    .kc-cta-title { font-size: 48px; }

    /* Register Banner */
    .kc-register-banner-v2 { flex-direction: column; padding: 60px 20px; text-align: center; }
    .kc-register-banner-v2-text h2 { font-size: 38px; }
    .kc-register-banner-v2-text p { margin: 0 auto; }

    /* Footer */
    footer { padding: 48px 20px 32px; }
    .footer-top { flex-direction: column; gap: 32px; }
    .footer-brand { max-width: 100%; }
    .footer-bottom { flex-direction: column; text-align: center; gap: 8px; }

    /* Section titles */
    .kc-section-title { font-size: 40px; margin-bottom: 40px; }
  }

  /* Hamburger menu for mobile */
  .kc-nav-hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 4px;
  }
  .kc-nav-hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--white);
    transition: all 0.3s;
  }
  @media (max-width: 768px) {
    .kc-nav-hamburger { display: flex; }
    .nav-cta { display: none; }
  }

  /* Mobile nav drawer */
  .kc-nav-drawer {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(5,15,13,0.98);
    z-index: 200;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
  }
  .kc-nav-drawer.open { display: flex; }
  .kc-nav-drawer a {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 42px;
    letter-spacing: 4px;
    color: var(--white);
    text-decoration: none;
    transition: color 0.2s;
  }
  .kc-nav-drawer a:hover { color: var(--teal); }
  .kc-nav-drawer-close {
    position: absolute;
    top: 20px; right: 24px;
    background: none;
    border: none;
    color: var(--white);
    font-size: 32px;
    cursor: pointer;
  }



/* ============================================================
   PATCH 25 — Below-hero sections visibility fixes
   ============================================================ */

/* Marquee strip */
.kc-marquee-strip {
  background: #00c8b4 !important;
  padding: 14px 0 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  display: block !important;
  width: 100% !important;
}
.kc-marquee-inner {
  display: inline-flex !important;
  animation: kcMarquee 20s linear infinite !important;
}
.kc-marquee-inner span {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 4px !important;
  text-transform: uppercase !important;
  color: #fff !important;
  padding: 0 40px !important;
}
.kc-dot { color: rgba(255,255,255,0.4) !important; padding: 0 4px !important; }
@keyframes kcMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Stats bar */
.kc-stats-bar {
  background: #091412 !important;
  border-top: 1px solid rgba(0,200,180,0.2) !important;
  border-bottom: 1px solid rgba(0,200,180,0.2) !important;
  display: flex !important;
  width: 100% !important;
}
.kc-stat-item {
  flex: 1 !important;
  padding: 40px 32px !important;
  text-align: center !important;
  border-right: 1px solid rgba(255,255,255,0.06) !important;
}
.kc-stat-item:last-child { border-right: none !important; }
.kc-stat-number {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 52px !important;
  color: #fff !important;
  letter-spacing: 2px !important;
  line-height: 1 !important;
  display: block !important;
}
.kc-stat-number span { color: #00c8b4 !important; }
.kc-stat-label {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 11px !important;
  letter-spacing: 4px !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.5) !important;
  margin-top: 8px !important;
  display: block !important;
}

/* Products section */
.kc-products-v2 {
  padding: 80px 48px !important;
  background: #091412 !important;
  display: block !important;
  width: 100% !important;
}
.kc-section-label {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 11px !important;
  letter-spacing: 6px !important;
  text-transform: uppercase !important;
  color: #00c8b4 !important;
  margin-bottom: 16px !important;
  display: block !important;
}
.kc-section-title {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: clamp(48px, 6vw, 80px) !important;
  line-height: 1 !important;
  letter-spacing: 2px !important;
  margin-bottom: 48px !important;
  color: #fff !important;
  display: block !important;
}
.kc-products-grid-v2 {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 2px !important;
}
.kc-product-card-v2 {
  position: relative !important;
  aspect-ratio: 3/4 !important;
  overflow: hidden !important;
  display: block !important;
  text-decoration: none !important;
  background: #161618 !important;
}
.kc-product-tag {
  display: inline-block !important;
  background: #00c8b4 !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  padding: 4px 10px !important;
  margin-bottom: 12px !important;
  color: #000 !important;
}
.kc-product-name {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 28px !important;
  letter-spacing: 2px !important;
  color: #fff !important;
  margin-bottom: 8px !important;
}
.kc-product-desc {
  font-size: 12px !important;
  color: rgba(245,243,239,0.5) !important;
  margin-bottom: 20px !important;
}
.kc-product-card-content {
  position: absolute !important;
  bottom: 0; left: 0; right: 0 !important;
  padding: 32px 24px !important;
  z-index: 2 !important;
}
.kc-product-card-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(to top, rgba(10,10,10,0.95) 0%, rgba(10,10,10,0.2) 60%, transparent 100%) !important;
  z-index: 1 !important;
}
.kc-product-arrow {
  display: inline-flex !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 12px !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: #00c8b4 !important;
  text-decoration: none !important;
}

/* Bestsellers */
.kc-bestsellers-v2 {
  padding: 80px 0 !important;
  background: #050f0d !important;
  width: 100% !important;
  display: block !important;
}
.kc-bestsellers-header {
  padding: 0 48px !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  margin-bottom: 40px !important;
}
.kc-carousel-track {
  display: flex !important;
  gap: 2px !important;
  padding: 0 48px !important;
  transition: transform 0.5s ease !important;
}
.kc-bs-card {
  flex: 0 0 280px !important;
  background: #161618 !important;
  padding: 32px !important;
  position: relative !important;
  overflow: hidden !important;
}
.kc-bs-color-swatch {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  margin-bottom: 24px !important;
}
.kc-bs-product-name {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #fff !important;
  margin-bottom: 8px !important;
}
.kc-bs-product-code {
  font-size: 12px !important;
  color: rgba(255,255,255,0.3) !important;
  margin-bottom: 24px !important;
}
.kc-bs-login-tag {
  font-size: 11px !important;
  color: rgba(255,255,255,0.4) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  padding: 6px 12px !important;
  display: inline-block !important;
}
.kc-bs-num {
  position: absolute !important;
  bottom: 32px; right: 32px !important;
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 64px !important;
  color: rgba(255,255,255,0.04) !important;
}
.kc-bs-card-accent {
  position: absolute !important;
  top: 0; left: 0; right: 0 !important;
  height: 3px !important;
  background: #00c8b4 !important;
  transform: scaleX(0) !important;
  transform-origin: left !important;
  transition: transform 0.4s ease !important;
}
.kc-bs-card:hover .kc-bs-card-accent { transform: scaleX(1) !important; }
.kc-carousel-btn {
  width: 48px; height: 48px !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  background: none !important;
  color: #fff !important;
  font-size: 18px !important;
  cursor: pointer !important;
  transition: all 0.3s !important;
}
.kc-carousel-btn:hover { border-color: #00c8b4 !important; color: #00c8b4 !important; }

/* Why Koochoi */
.kc-difference-v2 {
  padding: 80px 48px !important;
  background: #f5f3ef !important;
  color: #0a0a0a !important;
  display: block !important;
  width: 100% !important;
}
.kc-diff-grid {
  display: grid !important;
  grid-template-columns: repeat(3,1fr) !important;
  gap: 48px !important;
  margin-top: 60px !important;
}
.kc-diff-title {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 32px !important;
  letter-spacing: 2px !important;
  color: #0a0a0a !important;
  margin-bottom: 16px !important;
}
.kc-diff-text {
  font-size: 14px !important;
  line-height: 1.8 !important;
  color: rgba(10,10,10,0.6) !important;
}
.kc-diff-number {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 72px !important;
  color: rgba(0,200,180,0.2) !important;
  line-height: 1 !important;
  display: block !important;
  margin-bottom: -20px !important;
}

/* Colour CTA */
.kc-colour-cta-v2 {
  display: flex !important;
  min-height: 60vh !important;
  width: 100% !important;
}
.kc-colour-cta-left {
  flex: 1 !important;
  background: #091412 !important;
  padding: 80px 64px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}
.kc-colour-cta-right {
  flex: 1 !important;
  position: relative !important;
  overflow: hidden !important;
  min-height: 400px !important;
}
.kc-colour-cta-right-bg {
  position: absolute !important;
  inset: 0 !important;
  background-size: cover !important;
  background-position: center !important;
}
.kc-colour-cta-right-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(to right, #091412 0%, transparent 40%) !important;
}
.kc-cta-title {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: clamp(48px, 5vw, 72px) !important;
  line-height: 1 !important;
  color: #fff !important;
  margin-bottom: 24px !important;
}
.kc-teal-text { color: #00c8b4 !important; }
.kc-cta-subtitle {
  font-size: 14px !important;
  color: rgba(255,255,255,0.5) !important;
  line-height: 1.8 !important;
  max-width: 360px !important;
  margin-bottom: 32px !important;
}
.kc-exclusive-tag {
  font-size: 10px !important;
  letter-spacing: 4px !important;
  text-transform: uppercase !important;
  color: #c9a84c !important;
  margin-bottom: 12px !important;
  display: block !important;
}
.kc-swatches {
  display: flex !important;
  gap: 12px !important;
  margin-bottom: 32px !important;
  flex-wrap: wrap !important;
}
.kc-swatch {
  width: 32px; height: 32px !important;
  border-radius: 50% !important;
  border: 2px solid rgba(255,255,255,0.1) !important;
  transition: transform 0.2s !important;
}

/* Register banner */
.kc-register-banner-v2 {
  padding: 80px 48px !important;
  background: linear-gradient(135deg, #0a3830 0%, #041f1a 100%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 40px !important;
  width: 100% !important;
  border-top: 1px solid rgba(0,200,180,0.2) !important;
}
.kc-register-banner-text h2 {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: clamp(42px, 5vw, 68px) !important;
  color: #fff !important;
  margin-bottom: 16px !important;
}
.kc-register-banner-text p {
  font-size: 15px !important;
  color: rgba(255,255,255,0.7) !important;
  max-width: 400px !important;
  line-height: 1.7 !important;
}
.kc-btn-white {
  background: #fff !important;
  color: #00c8b4 !important;
  padding: 16px 48px !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
.kc-btn-v2-primary {
  background: #00c8b4 !important;
  color: #000 !important;
  padding: 14px 36px !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  display: inline-block !important;
}
.kc-btn-v2-ghost {
  border: 1px solid rgba(255,255,255,0.3) !important;
  color: #fff !important;
  padding: 14px 36px !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  display: inline-block !important;
}

/* Scroll reveal */
.kc-reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; }
.kc-reveal.kc-visible { opacity: 1 !important; transform: translateY(0) !important; }
.kc-reveal-d1 { transition-delay: 0.1s !important; }
.kc-reveal-d2 { transition-delay: 0.2s !important; }
.kc-reveal-d3 { transition-delay: 0.3s !important; }

/* Mobile */
@media (max-width: 768px) {
  .kc-products-grid-v2 { grid-template-columns: 1fr 1fr !important; }
  .kc-diff-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .kc-colour-cta-v2 { flex-direction: column !important; }
  .kc-colour-cta-left { padding: 48px 20px !important; }
  .kc-colour-cta-right { min-height: 280px !important; }
  .kc-register-banner-v2 { flex-direction: column !important; padding: 48px 20px !important; text-align: center !important; }
  .kc-bestsellers-header { flex-direction: column !important; padding: 0 20px !important; gap: 16px !important; }
  .kc-carousel-track { padding: 0 20px !important; }
  .kc-bs-card { flex: 0 0 240px !important; }
  .kc-products-v2 { padding: 48px 20px !important; }
  .kc-difference-v2 { padding: 48px 20px !important; }
  .kc-stat-item { flex: 1 1 50% !important; }
}

/* ============================================================
   PATCH 26 — Hero eyebrow/buttons + section fixes
   ============================================================ */

/* Hero eyebrow text */
.kc-hero-v2-eyebrow {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 12px !important;
  letter-spacing: 6px !important;
  text-transform: uppercase !important;
  color: #00c8b4 !important;
  margin-bottom: 20px !important;
  display: block !important;
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

/* Hero buttons */
.kc-hero-v2-buttons {
  display: flex !important;
  gap: 16px !important;
  margin-top: 40px !important;
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  flex-wrap: wrap !important;
}

/* Hero sub text */
.kc-hero-v2-sub {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  display: block !important;
}

/* Remove fadeUp animation from hero elements since inject doesn't trigger it */
.kc-hero-v2-eyebrow,
.kc-hero-v2-title,
.kc-hero-v2-sub,
.kc-hero-v2-buttons,
.kc-hero-v2-badge,
.kc-hero-v2-scroll {
  animation: none !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Why Koochoi — dark background NOT white */
.kc-difference-v2 {
  background: #f5f3ef !important;
  padding: 80px 48px !important;
}

/* Products — remove extra gap */
.kc-products-v2 {
  padding: 80px 48px 60px !important;
}
.kc-section-title {
  margin-bottom: 40px !important;
}

/* Colour CTA right image */
.kc-colour-cta-right {
  flex: 1 !important;
  position: relative !important;
  overflow: hidden !important;
  min-height: 500px !important;
  background: #0d2e28 !important;
}
.kc-colour-cta-right-bg {
  position: absolute !important;
  inset: 0 !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* ============================================================
   PATCH 27 — Header overlay + hero layout matching HTML design
   ============================================================ */

/* ── HEADER: overlay on hero, transparent bg ── */
.kc-header {
  position: fixed !important;
  top: 0; left: 0; right: 0 !important;
  z-index: 100 !important;
  background: transparent !important;
  border-bottom: none !important;
  box-shadow: none !important;
}
.kc-header::before {
  display: none !important;
}
.kc-header__inner {
  position: relative !important;
  z-index: 1 !important;
  padding: 24px 48px !important;
  max-width: 100% !important;
}

/* Logo — Bebas Neue style like HTML */
.kc-logo {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 28px !important;
  letter-spacing: 4px !important;
  color: #f5f3ef !important;
  text-decoration: none !important;
}
.kc-logo span { color: #00c8b4 !important; }

/* Nav links */
.kc-nav__list a {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 13px !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: rgba(245,243,239,0.7) !important;
  text-decoration: none !important;
}
.kc-nav__list a:hover { color: #fff !important; }

/* Right side: auth + cart */
.kc-auth-link__name,
.kc-cart-icon {
  color: rgba(245,243,239,0.7) !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 13px !important;
  letter-spacing: 2px !important;
}
.kc-auth-link__name:hover,
.kc-cart-icon:hover { color: #fff !important; }

/* Header scrolled — add subtle bg */
.kc-header.scrolled {
  background: rgba(5,15,13,0.95) !important;
  backdrop-filter: blur(10px) !important;
}

/* ── HERO: match HTML exactly ── */
.kc-hero-v2 {
  height: 100vh !important;
  position: relative !important;
  display: flex !important;
  align-items: flex-end !important;
  overflow: hidden !important;
}
.kc-hero-v2-content {
  position: relative !important;
  z-index: 2 !important;
  padding: 0 48px 80px !important;
  max-width: 900px !important;
}
.kc-hero-v2-eyebrow {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 12px !important;
  letter-spacing: 6px !important;
  text-transform: uppercase !important;
  color: #00c8b4 !important;
  margin-bottom: 20px !important;
  display: block !important;
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}
.kc-hero-v2-title {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: clamp(64px, 8vw, 112px) !important;
  line-height: 0.92 !important;
  letter-spacing: 2px !important;
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  color: #fff !important;
}
.kc-hero-v2-title em {
  font-style: normal !important;
  color: #00c8b4 !important;
}
.kc-hero-v2-title .kc-outline {
  -webkit-text-stroke: 1px rgba(0,200,180,0.5) !important;
  color: transparent !important;
}
.kc-hero-v2-sub {
  font-size: 15px !important;
  font-weight: 300 !important;
  color: rgba(255,255,255,0.92) !important;
  text-shadow: 0 1px 6px rgba(0,0,0,0.6) !important;
  margin-top: 24px !important;
  max-width: 400px !important;
  line-height: 1.7 !important;
  display: block !important;
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}
.kc-hero-v2-buttons {
  display: flex !important;
  gap: 16px !important;
  margin-top: 40px !important;
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  flex-wrap: wrap !important;
}

/* Hero badge */
.kc-hero-v2-badge {
  position: absolute !important;
  top: 50%; right: 48px !important;
  transform: translateY(-50%) !important;
  width: 100px; height: 100px !important;
  border: 1px solid rgba(0,200,180,0.4) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  opacity: 1 !important;
  animation: kcRotateSpin 20s linear infinite !important;
}
.kc-hero-v2-badge span {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 10px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: rgba(245,243,239,0.6) !important;
  line-height: 1.4 !important;
}
@keyframes kcRotateSpin {
  from { transform: translateY(-50%) rotate(0deg); }
  to   { transform: translateY(-50%) rotate(360deg); }
}

/* Scroll indicator */
.kc-hero-v2-scroll {
  position: absolute !important;
  bottom: 40px; right: 48px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  opacity: 1 !important;
}
.kc-hero-v2-scroll span {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 11px !important;
  letter-spacing: 4px !important;
  text-transform: uppercase !important;
  color: rgba(245,243,239,0.4) !important;
  writing-mode: vertical-rl !important;
}
.kc-scroll-line {
  width: 1px !important;
  height: 60px !important;
  background: linear-gradient(to bottom, #00c8b4, transparent) !important;
  animation: kcScrollPulse 2s ease infinite !important;
}
@keyframes kcScrollPulse {
  0%   { transform: scaleY(0); transform-origin: top; }
  50%  { transform: scaleY(1); transform-origin: top; }
  51%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ── MARQUEE: slower ── */
.kc-marquee-inner {
  animation: kcMarquee 40s linear infinite !important;
}

/* Mobile header */
@media (max-width: 768px) {
  .kc-header__inner { padding: 16px 20px !important; }
  .kc-hero-v2-content { padding: 0 20px 60px !important; }
  .kc-hero-v2-badge { display: none !important; }
  .kc-hero-v2-scroll { right: 20px !important; }
}

/* ============================================================
   PATCH 28 — Logo, bestsellers redesign, difference contrast,
               remove badge, colour card image
   ============================================================ */

/* ── HEADER LOGO: use image ── */
.kc-logo {
  display: block !important;
  line-height: 0 !important;
}
.kc-logo img {
  height: 36px !important;
  width: auto !important;
  display: block !important;
}
/* Hide text KC span if logo image loads */
.kc-logo span { display: none !important; }

/* ── REMOVE hero badge (Pro Grade Film circle) ── */
.kc-hero-v2-badge { display: none !important; }

/* ── KOOCHOI DIFFERENCE: title contrast fix ── */
.kc-difference-v2 .kc-section-title {
  color: #0a0a0a !important;
  -webkit-text-stroke: 0 !important;
}
.kc-difference-v2 .kc-section-title .kc-outline {
  -webkit-text-stroke: 2px #00c8b4 !important;
  color: transparent !important;
}
/* "THE KOOCHOI" part needs to be dark visible */
.kc-difference-v2 .kc-section-title {
  text-shadow: none !important;
}

/* ── BESTSELLERS: redesigned with bigger product images ── */
.kc-bestsellers-v2 {
  padding: 80px 48px !important;
  background: #050f0d !important;
}
.kc-bestsellers-header {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  margin-bottom: 48px !important;
  padding: 0 !important;
}
/* Override carousel to a grid instead */
.kc-carousel-track {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
  padding: 0 !important;
  transform: none !important;
  overflow: visible !important;
}
.kc-bs-card {
  flex: none !important;
  width: auto !important;
  background: #0d1f1a !important;
  border: 1px solid rgba(0,200,180,0.1) !important;
  padding: 0 !important;
  position: relative !important;
  overflow: hidden !important;
  transition: border-color 0.3s, transform 0.3s !important;
  cursor: pointer !important;
}
.kc-bs-card:hover {
  border-color: rgba(0,200,180,0.5) !important;
  transform: translateY(-4px) !important;
}
/* Big colour swatch — top half of card */
.kc-bs-color-swatch {
  width: 100% !important;
  height: 180px !important;
  border-radius: 0 !important;
  margin: 0 !important;
  display: block !important;
  background-size: cover !important;
  background-position: center !important;
}
/* Card content below swatch */
.kc-bs-card-info {
  padding: 20px 24px !important;
}
.kc-bs-product-name {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: #fff !important;
  margin-bottom: 4px !important;
}
.kc-bs-product-code {
  font-size: 11px !important;
  color: rgba(255,255,255,0.35) !important;
  letter-spacing: 2px !important;
  margin-bottom: 16px !important;
}
.kc-bs-login-tag {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 11px !important;
  color: #00c8b4 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  border: 1px solid rgba(0,200,180,0.3) !important;
  padding: 6px 12px !important;
  display: inline-block !important;
  background: none !important;
}
.kc-bs-num {
  position: absolute !important;
  top: 12px; right: 16px !important;
  bottom: auto !important;
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 28px !important;
  color: rgba(255,255,255,0.15) !important;
  line-height: 1 !important;
}
.kc-bs-card-accent {
  position: absolute !important;
  top: 0; left: 0; right: 0 !important;
  height: 3px !important;
  background: linear-gradient(to right, #00c8b4, #00f0dc) !important;
  transform: scaleX(0) !important;
  transform-origin: left !important;
  transition: transform 0.4s ease !important;
}
.kc-bs-card:hover .kc-bs-card-accent { transform: scaleX(1) !important; }

/* Hide carousel prev/next buttons since we use grid now */
.kc-carousel-controls { display: none !important; }

/* ── COLOUR CARD: update right image ── */
.kc-colour-cta-right-bg {
  background-image: url('https://koochoicarwrap.com/wp-content/uploads/2026/05/Colour-Card-Sample_Homepage.jpg') !important;
  background-size: cover !important;
  background-position: center !important;
}

/* Mobile bestsellers */
@media (max-width: 768px) {
  .kc-carousel-track {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .kc-bs-color-swatch { height: 120px !important; }
  .kc-bestsellers-v2 { padding: 48px 20px !important; }
}
@media (max-width: 480px) {
  .kc-carousel-track { grid-template-columns: 1fr !important; }
}

/* ============================================================
   PATCH 29 — Hero image sharper, remove eyebrow, bigger logo,
               bestsellers Option A redesign, fix card bg colour
   ============================================================ */

/* ── Use 2048px hero image for sharpness ── */
.kc-hero-v2-bg {
  background-image: url('https://koochoicarwrap.com/wp-content/uploads/2026/05/koochoi-range-rover.png') !important;
  background-size: cover !important;
  background-position: center center !important;
}

/* ── Remove eyebrow "Premium Automotive Film" ── */
.kc-hero-v2-eyebrow { display: none !important; }

/* ── Bigger logo ── */
.kc-logo img { height: 48px !important; }

/* ── BESTSELLERS: Option A — horizontal scroll, dark cards, no green ── */
.kc-bestsellers-v2 {
  padding: 80px 0 80px 48px !important;
  background: #060e0c !important;
  overflow: hidden !important;
}
.kc-bestsellers-header {
  padding: 0 48px 0 0 !important;
  margin-bottom: 48px !important;
}
.kc-carousel-controls { display: flex !important; }

/* Reset grid back to flex carousel */
.kc-carousel-track {
  display: flex !important;
  grid-template-columns: none !important;
  gap: 16px !important;
  padding: 0 48px 24px 0 !important;
  overflow-x: auto !important;
  scroll-snap-type: x mandatory !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}
.kc-carousel-track::-webkit-scrollbar { display: none !important; }

.kc-bs-card {
  flex: 0 0 260px !important;
  width: 260px !important;
  background: #0a0a0a !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 0 !important;
  padding: 0 !important;
  position: relative !important;
  overflow: hidden !important;
  scroll-snap-align: start !important;
  transition: border-color 0.3s, transform 0.3s !important;
  cursor: pointer !important;
  display: block !important;
}
.kc-bs-card:hover {
  border-color: rgba(0,200,180,0.6) !important;
  transform: translateY(-6px) !important;
  background: #0a0a0a !important;
}

/* Big product image — top portion */
.kc-bs-color-swatch {
  width: 100% !important;
  height: 200px !important;
  border-radius: 0 !important;
  margin: 0 !important;
  display: block !important;
  background-size: cover !important;
  background-position: center !important;
  position: relative !important;
}

/* Card body */
.kc-bs-card-info {
  padding: 20px 20px 24px !important;
  background: #0a0a0a !important;
  position: relative !important;
}
.kc-bs-product-name {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: #fff !important;
  margin-bottom: 4px !important;
  line-height: 1.2 !important;
}
.kc-bs-product-code {
  font-size: 10px !important;
  color: rgba(255,255,255,0.3) !important;
  letter-spacing: 3px !important;
  margin-bottom: 16px !important;
  display: block !important;
  font-family: 'Barlow Condensed', sans-serif !important;
}
.kc-bs-login-tag {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #00c8b4 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  border: 1px solid rgba(0,200,180,0.35) !important;
  padding: 6px 14px !important;
  display: inline-block !important;
  background: rgba(0,200,180,0.05) !important;
  transition: background 0.2s !important;
}
.kc-bs-card:hover .kc-bs-login-tag {
  background: rgba(0,200,180,0.12) !important;
}

/* Number watermark */
.kc-bs-num {
  position: absolute !important;
  top: 12px !important;
  right: 16px !important;
  bottom: auto !important;
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 52px !important;
  color: rgba(255,255,255,0.06) !important;
  line-height: 1 !important;
}

/* Top accent bar */
.kc-bs-card-accent {
  position: absolute !important;
  top: 0; left: 0; right: 0 !important;
  height: 2px !important;
  background: linear-gradient(to right, #00c8b4, #00e8d0) !important;
  transform: scaleX(0) !important;
  transform-origin: left !important;
  transition: transform 0.35s ease !important;
  z-index: 2 !important;
}
.kc-bs-card:hover .kc-bs-card-accent { transform: scaleX(1) !important; }

/* Carousel nav buttons */
.kc-carousel-controls {
  display: flex !important;
  gap: 8px !important;
}
.kc-carousel-btn {
  width: 44px; height: 44px !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  background: rgba(255,255,255,0.03) !important;
  color: rgba(255,255,255,0.6) !important;
  font-size: 16px !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.kc-carousel-btn:hover {
  border-color: #00c8b4 !important;
  color: #00c8b4 !important;
  background: rgba(0,200,180,0.05) !important;
}

/* Mobile */
@media (max-width: 768px) {
  .kc-bestsellers-v2 { padding: 48px 0 48px 20px !important; }
  .kc-bs-card { flex: 0 0 220px !important; width: 220px !important; }
  .kc-bs-color-swatch { height: 150px !important; }
}

/* ============================================================
   PATCH 30 — Fix card white bg, hero full res, card format
   ============================================================ */

/* Hero — use full 2816px original */
.kc-hero-v2-bg {
  background-image: url('https://koochoicarwrap.com/wp-content/uploads/2026/05/koochoi-range-rover.png') !important;
}

/* Bestseller cards — pure dark, no white */
.kc-bs-card,
.kc-bs-card * {
  background-color: #0a0a0a !important;
}
.kc-bs-card {
  border: 1px solid rgba(255,255,255,0.08) !important;
}
.kc-bs-color-swatch {
  background-color: #111 !important;
  background-origin: border-box !important;
  object-fit: cover !important;
}
/* FIXED patch53: was display:none, now show our intentional product img */
.kc-bs-card img,
.kc-bs-card .attachment-woocommerce_thumbnail,
.kc-bs-card .wp-post-image {
  display: block !important;
}
.kc-bs-card-info,
.kc-bs-card-info * {
  background: transparent !important;
  color: inherit !important;
}

/* ============================================================
   PATCH 31 — Clean bestsellers + products, no CSS conflicts
   ============================================================ */

/* ── BESTSELLERS: clean dark card, WC image shows properly ── */
.kc-bestsellers-v2 {
  padding: 80px 48px !important;
  background: #060e0c !important;
}
.kc-bestsellers-header {
  padding: 0 !important;
  margin-bottom: 48px !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
}
.kc-carousel-track {
  display: flex !important;
  gap: 16px !important;
  padding: 0 0 16px 0 !important;
  overflow-x: auto !important;
  scroll-snap-type: x mandatory !important;
  scrollbar-width: none !important;
  transform: none !important;
}
.kc-carousel-track::-webkit-scrollbar { display: none !important; }
.kc-carousel-controls { display: flex !important; gap: 8px !important; }

/* Card reset — pure dark, no green, no white */
.kc-bs-card {
  flex: 0 0 260px !important;
  width: 260px !important;
  background: #0f0f0f !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 0 !important;
  padding: 0 !important;
  position: relative !important;
  overflow: hidden !important;
  scroll-snap-align: start !important;
  transition: border-color 0.3s, transform 0.3s !important;
  display: flex !important;
  flex-direction: column !important;
}
.kc-bs-card:hover {
  border-color: rgba(0,200,180,0.5) !important;
  transform: translateY(-4px) !important;
}
.kc-bs-card > * { background: transparent !important; }

/* Colour swatch = big square product image */
.kc-bs-color-swatch {
  width: 100% !important;
  height: 220px !important;
  border-radius: 0 !important;
  margin: 0 !important;
  display: block !important;
  background-size: cover !important;
  background-position: center !important;
  flex-shrink: 0 !important;
}

/* Card info area */
.kc-bs-card-info {
  padding: 18px 20px 20px !important;
  background: #0f0f0f !important;
  flex: 1 !important;
}
.kc-bs-product-name {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: #fff !important;
  margin-bottom: 4px !important;
  line-height: 1.3 !important;
}
.kc-bs-product-code {
  font-size: 10px !important;
  color: rgba(255,255,255,0.3) !important;
  letter-spacing: 3px !important;
  margin-bottom: 14px !important;
  display: block !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  text-transform: uppercase !important;
}
.kc-bs-login-tag {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #00c8b4 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  border: 1px solid rgba(0,200,180,0.3) !important;
  padding: 5px 12px !important;
  display: inline-block !important;
  background: transparent !important;
}
.kc-bs-num {
  position: absolute !important;
  bottom: 16px; right: 16px !important;
  top: auto !important;
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 48px !important;
  color: rgba(255,255,255,0.05) !important;
  line-height: 1 !important;
}
.kc-bs-card-accent {
  position: absolute !important;
  top: 0; left: 0; right: 0 !important;
  height: 2px !important;
  background: #00c8b4 !important;
  transform: scaleX(0) !important;
  transform-origin: left !important;
  transition: transform 0.35s !important;
}
.kc-bs-card:hover .kc-bs-card-accent { transform: scaleX(1) !important; }

/* ── PRODUCTS GRID: fix image display ── */
.kc-products-grid-v2 {
  display: grid !important;
  grid-template-columns: repeat(4,1fr) !important;
  gap: 3px !important;
}
.kc-product-card-v2 {
  position: relative !important;
  aspect-ratio: 3/4 !important;
  overflow: hidden !important;
  display: block !important;
  text-decoration: none !important;
  background: #111 !important;
  cursor: pointer !important;
}
.kc-product-card-bg {
  position: absolute !important;
  inset: 0 !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  transition: transform 0.6s ease !important;
  width: 100% !important;
  height: 100% !important;
}
.kc-product-card-v2:hover .kc-product-card-bg {
  transform: scale(1.06) !important;
}
.kc-product-card-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.15) 55%, transparent 100%) !important;
  z-index: 1 !important;
}
.kc-product-card-content {
  position: absolute !important;
  bottom: 0; left: 0; right: 0 !important;
  padding: 28px 20px !important;
  z-index: 2 !important;
}
.kc-product-tag {
  display: inline-block !important;
  background: #00c8b4 !important;
  color: #000 !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  padding: 3px 10px !important;
  margin-bottom: 10px !important;
}
.kc-product-name {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 26px !important;
  letter-spacing: 2px !important;
  color: #fff !important;
  margin-bottom: 6px !important;
  display: block !important;
}
.kc-product-desc {
  font-size: 12px !important;
  color: rgba(255,255,255,0.5) !important;
  margin-bottom: 14px !important;
  display: block !important;
}
.kc-product-arrow {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 12px !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: #00c8b4 !important;
  display: inline-block !important;
  opacity: 0 !important;
  transform: translateX(-8px) !important;
  transition: all 0.3s !important;
}
.kc-product-card-v2:hover .kc-product-arrow {
  opacity: 1 !important;
  transform: translateX(0) !important;
}

/* Mobile */
@media (max-width: 768px) {
  .kc-products-grid-v2 { grid-template-columns: 1fr 1fr !important; }
  .kc-bestsellers-v2 { padding: 48px 20px !important; }
  .kc-bs-card { flex: 0 0 220px !important; width: 220px !important; }
  .kc-bs-color-swatch { height: 160px !important; }
}

/* ============================================================
   PATCH 32 — Fix bestseller image display + hero mobile blur
              + card breathing room
   ============================================================ */

/* Hero — serve correct size per screen */
.kc-hero-v2-bg {
  background-image: url('https://koochoicarwrap.com/wp-content/uploads/2026/05/koochoi-range-rover.png') !important;
  background-size: cover !important;
  background-position: center 30% !important;
}
@media (max-width: 768px) {
  .kc-hero-v2-bg {
    background-image: url('https://koochoicarwrap.com/wp-content/uploads/2026/05/koochoi-range-rover.png') !important;
    background-position: 70% center !important;
  }
}

/* Bestseller swatch — make it a proper image container */
.kc-bs-color-swatch {
  width: 100% !important;
  height: 220px !important;
  border-radius: 0 !important;
  display: block !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-color: #1a1a1a !important;
  margin: 0 !important;
  /* Remove the circle border that was hiding the image */
  border: none !important;
  box-shadow: none !important;
}
/* Remove the circular ::after ring */
.kc-bs-color-swatch::after {
  display: none !important;
  content: none !important;
}

/* Card top padding for breathing room */
.kc-bs-card {
  padding-top: 0 !important;
}
.kc-bs-card-info {
  padding: 20px 20px 24px !important;
}

/* Add top padding inside card above the image */
.kc-bs-color-swatch {
  margin-top: 0 !important;
}
/* Space at top of card before image */
.kc-bs-card::before {
  content: '' !important;
  display: block !important;
  height: 0 !important;
}

/* ============================================================
   FINAL OVERRIDE — Bestsellers + Hero image (wins over all)
   ============================================================ */

/* Hero image — sharp per device */
html body .kc-hero-v2-bg {
  background-image: url('https://koochoicarwrap.com/wp-content/uploads/2026/05/koochoi-range-rover.png') !important;
  background-size: cover !important;
  background-position: center 30% !important;
  border-radius: 0 !important;
}
@media (max-width: 768px) {
  html body .kc-hero-v2-bg {
    background-image: url('https://koochoicarwrap.com/wp-content/uploads/2026/05/koochoi-range-rover.png') !important;
    background-position: 65% center !important;
  }
}

/* Swatch — RECTANGLE not circle, full image */
html body .kc-bs-color-swatch,
html body .kc-bs-color-swatch::before,
html body .kc-bs-color-swatch::after {
  all: unset !important;
}
html body .kc-bs-color-swatch {
  display: block !important;
  width: 100% !important;
  height: 200px !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-color: #1a1a1a !important;
  position: relative !important;
  flex-shrink: 0 !important;
}

/* Card layout */
html body .kc-bs-card {
  flex: 0 0 260px !important;
  width: 260px !important;
  background: #111 !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  transition: border-color 0.3s, transform 0.3s !important;
}
html body .kc-bs-card:hover {
  border-color: rgba(0,200,180,0.55) !important;
  transform: translateY(-5px) !important;
}

/* Card info — breathing room */
html body .kc-bs-card-info {
  padding: 20px 20px 24px !important;
  background: #111 !important;
  flex: 1 !important;
}
html body .kc-bs-product-name {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: #fff !important;
  margin: 0 0 4px !important;
  line-height: 1.3 !important;
}
html body .kc-bs-product-code {
  display: block !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 10px !important;
  color: rgba(255,255,255,0.3) !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  margin: 0 0 16px !important;
}
html body .kc-bs-login-tag {
  display: inline-block !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: #00c8b4 !important;
  border: 1px solid rgba(0,200,180,0.3) !important;
  padding: 5px 12px !important;
  background: transparent !important;
  border-radius: 0 !important;
}
html body .kc-bs-num {
  position: absolute !important;
  bottom: 20px !important;
  right: 16px !important;
  top: auto !important;
  left: auto !important;
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 48px !important;
  color: rgba(255,255,255,0.05) !important;
  line-height: 1 !important;
  pointer-events: none !important;
}
html body .kc-bs-card-accent {
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 2px !important;
  background: #00c8b4 !important;
  transform: scaleX(0) !important;
  transform-origin: left !important;
  transition: transform 0.35s !important;
  border-radius: 0 !important;
}
html body .kc-bs-card:hover .kc-bs-card-accent {
  transform: scaleX(1) !important;
}

/* Carousel track */
html body .kc-carousel-track {
  display: flex !important;
  gap: 16px !important;
  padding: 0 0 8px !important;
  overflow-x: auto !important;
  scroll-snap-type: x mandatory !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
}
html body .kc-carousel-track::-webkit-scrollbar { display: none !important; }

@media (max-width: 768px) {
  html body .kc-bs-card { flex: 0 0 220px !important; width: 220px !important; }
  html body .kc-bs-color-swatch { height: 160px !important; }
}

/* ============================================================
   PATCH 33 — Single hero image all devices + swatch bg fix
   ============================================================ */
html body .kc-hero-v2-bg {
  background-image: url('https://koochoicarwrap.com/wp-content/uploads/2026/05/koochoi-range-rover.png') !important;
  background-size: cover !important;
  background-position: center 30% !important;
}
@media (max-width: 768px) {
  html body .kc-hero-v2-bg {
    background-image: url('https://koochoicarwrap.com/wp-content/uploads/2026/05/koochoi-range-rover.png') !important;
    background-position: 65% center !important;
  }
}
/* Ensure inline background-image on swatch isn't overridden */
html body .kc-bs-color-swatch[style] {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  border-radius: 0 !important;
  height: 200px !important;
  width: 100% !important;
  display: block !important;
}

/* ============================================================
   PATCH 34 — Mobile hero blur fix
   Problem: landscape image stretched in portrait viewport
   Fix: use same 2816x1536, position to show car body
   ============================================================ */
html body .kc-hero-v2-bg {
  background-image: url('https://koochoicarwrap.com/wp-content/uploads/2026/05/koochoi-range-rover.png') !important;
  background-size: cover !important;
  background-position: 60% center !important;
}
/* On mobile portrait: anchor to centre-right so car body shows */
@media (max-width: 768px) {
  html body .kc-hero-v2-bg {
    background-image: url('https://koochoicarwrap.com/wp-content/uploads/2026/05/koochoi-range-rover.png') !important;
    background-size: 250% !important;
    background-position: 55% 40% !important;
  }
}
@media (max-width: 480px) {
  html body .kc-hero-v2-bg {
    background-size: 300% !important;
    background-position: 55% 45% !important;
  }
}

/* ============================================================
   PATCH 35 — Remove scale(1.05) blur from hero, no parallax scale
   ============================================================ */
html body .kc-hero-v2-bg,
html body .kc-hero-v2-bg.loaded {
  transform: none !important;
  transition: none !important;
}

/* ============================================================
   PATCH 36 — Final fix: don't unset inline bg on swatch,
               fix front-page.php scale was the hero blur cause
   ============================================================ */

/* Override the all:unset that was wiping background-image */
html body .kc-bs-color-swatch,
html body .kc-bs-color-swatch::before,
html body .kc-bs-color-swatch::after {
  border-radius: 0 !important;
  box-shadow: none !important;
  border: none !important;
  content: none !important;
}
html body .kc-bs-color-swatch::before,
html body .kc-bs-color-swatch::after {
  display: none !important;
}
html body .kc-bs-color-swatch {
  display: block !important;
  width: 100% !important;
  height: 200px !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-color: #1a1a1a !important;
  position: relative !important;
  flex-shrink: 0 !important;
  /* Do NOT reset background-image — let inline style provide it */
}

/* ============================================================
   PATCH 37 — Force hero full viewport height + PNG image
   ============================================================ */
section.kc-hero-v2,
.kc-hero-v2 {
  height: 100vh !important;
  height: 100dvh !important;
  min-height: 600px !important;
  width: 100% !important;
  position: relative !important;
  display: flex !important;
  align-items: flex-end !important;
  overflow: hidden !important;
}
html body .kc-hero-v2-bg,
html body #kcHeroBg {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-size: cover !important;
  background-position: 60% center !important;
  background-repeat: no-repeat !important;
  transform: none !important;
  transition: none !important;
  border-radius: 0 !important;
}
@media (max-width: 768px) {
  html body .kc-hero-v2-bg,
  html body #kcHeroBg {
    background-position: 65% center !important;
  }
}

/* ============================================================
   PATCH 38 — Emergency hero fallback directly in CSS
   ============================================================ */
html body #kcHeroBg,
html body .kc-hero-v2-bg {
  background-image: url('https://koochoicarwrap.com/wp-content/uploads/2026/05/koochoi-range-rover.png') !important;
  background-size: cover !important;
  background-position: 60% center !important;
  transform: none !important;
  transition: none !important;
}

/* ============================================================
   PATCH 39 — Hero text position, cart visibility, mobile nav
   ============================================================ */

/* 1. Hero text — push down more on desktop */
.kc-hero-v2-content {
  padding: 0 48px 120px !important;
}

/* 2. Hide cart for non-logged-in visitors */
body:not(.logged-in) .kc-cart-icon,
body:not(.logged-in) .kc-cart-trigger,
body:not(.logged-in) .kc-cart-count {
  display: none !important;
}

/* 3. Mobile header — hamburger on right, logo on left */
.kc-header__inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
.kc-nav-toggle {
  order: 3 !important;
  margin-left: auto !important;
}
.kc-logo { order: 1 !important; }
.kc-header__right { order: 2 !important; margin-left: auto !important; }

@media (max-width: 768px) {
  .kc-header__right { display: none !important; }
  .kc-nav-toggle { display: flex !important; order: 3 !important; }
  /* Cart visible on mobile only for logged in */
  body.logged-in .kc-cart-icon { display: flex !important; order: 2 !important; }
}

/* 4. Mobile nav — slide from RIGHT, full screen, proper z-index */
.kc-mobile-nav-overlay {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,0.5) !important;
  z-index: 998 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.3s !important;
}
.kc-mobile-nav-overlay.is-open {
  opacity: 1 !important;
  pointer-events: all !important;
}

/* Nav drawer — comes from right */
.kc-nav {
  position: fixed !important;
  top: 0 !important;
  right: -100% !important;
  width: 75% !important;
  max-width: 320px !important;
  height: 100vh !important;
  height: 100dvh !important;
  background: #050f0d !important;
  z-index: 999 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: 60px 40px !important;
  transition: right 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  overflow-y: auto !important;
}
.kc-nav.is-open {
  right: 0 !important;
}
.kc-nav__list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.kc-nav__list li a {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 36px !important;
  letter-spacing: 3px !important;
  color: #fff !important;
  text-decoration: none !important;
  display: block !important;
  padding: 8px 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  transition: color 0.2s, padding-left 0.2s !important;
  pointer-events: all !important;
  cursor: pointer !important;
}
.kc-nav__list li a:hover {
  color: #00c8b4 !important;
  padding-left: 8px !important;
}

/* Desktop nav — horizontal */
@media (min-width: 769px) {
  .kc-nav {
    position: static !important;
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    padding: 0 !important;
    flex-direction: row !important;
    justify-content: center !important;
    transition: none !important;
    right: auto !important;
  }
  .kc-nav__list {
    flex-direction: row !important;
    gap: 32px !important;
  }
  .kc-nav__list li a {
    font-family: 'Barlow Condensed', sans-serif !important;
    font-size: 13px !important;
    letter-spacing: 3px !important;
    padding: 0 !important;
    border-bottom: none !important;
  }
  .kc-nav-toggle { display: none !important; }
}

/* Close button inside nav */
.kc-nav-close {
  position: absolute !important;
  top: 20px !important;
  right: 20px !important;
  background: none !important;
  border: none !important;
  color: #fff !important;
  font-size: 28px !important;
  cursor: pointer !important;
  line-height: 1 !important;
  z-index: 1000 !important;
}

/* ============================================================
   PATCH 40 — Bestseller images: target [style] attribute
               to ensure inline bg-image is never overridden
   ============================================================ */

/* Remove all:unset — it wipes inline background-image */
html body .kc-bs-color-swatch {
  all: revert !important;
  display: block !important;
  width: 100% !important;
  height: 200px !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  background-color: #1a1a1a !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
/* Pseudo elements — kill the circle ring */
html body .kc-bs-color-swatch::before,
html body .kc-bs-color-swatch::after {
  display: none !important;
  content: none !important;
}

@media (max-width: 768px) {
  html body .kc-bs-color-swatch { height: 160px !important; }
}

/* ============================================================
   PATCH 41 — COMPLETE REWRITE: header, hero, mobile nav,
               bestseller images
   ============================================================ */

/* ── HEADER: fixed transparent overlay ── */
.kc-header {
  position: fixed !important;
  top: 0; left: 0; right: 0 !important;
  z-index: 100 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-bottom: none !important;
  transition: background 0.3s !important;
}
.kc-header.scrolled {
  background: rgba(5,15,13,0.97) !important;
  backdrop-filter: blur(10px) !important;
}

/* Header inner: logo left, nav centre, right side right */
.kc-header__inner {
  display: flex !important;
  align-items: center !important;
  padding: 20px 48px !important;
  gap: 32px !important;
  max-width: 100% !important;
  position: relative !important;
}
.kc-logo {
  flex-shrink: 0 !important;
  order: 1 !important;
  display: flex !important;
  align-items: center !important;
  z-index: 2 !important;
}
.kc-logo img { height: 40px !important; width: auto !important; }
.kc-logo span { display: none !important; }

/* Desktop nav — centred */
.kc-nav {
  order: 2 !important;
  flex: 1 !important;
  display: flex !important;
  justify-content: center !important;
  /* Reset mobile styles */
  position: static !important;
  height: auto !important;
  width: auto !important;
  background: transparent !important;
  padding: 0 !important;
  right: auto !important;
  top: auto !important;
  transform: none !important;
  transition: none !important;
  overflow: visible !important;
  flex-direction: row !important;
}
.kc-nav__list {
  display: flex !important;
  flex-direction: row !important;
  gap: 32px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  align-items: center !important;
}
.kc-nav__list li a {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.75) !important;
  text-decoration: none !important;
  transition: color 0.2s !important;
  border-bottom: none !important;
  padding: 0 !important;
  display: block !important;
  pointer-events: all !important;
}
.kc-nav__list li a:hover { color: #00c8b4 !important; }

/* Right side */
.kc-header__right {
  order: 3 !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 24px !important;
  margin-left: auto !important;
}

/* Hamburger — hidden on desktop */
.kc-nav-toggle {
  display: none !important;
  order: 4 !important;
}
/* Close button — hidden on desktop */
.kc-nav-close { display: none !important; }

/* ── MOBILE ── */
@media (max-width: 768px) {
  .kc-header__inner {
    padding: 16px 20px !important;
    justify-content: space-between !important;
  }

  /* Hide desktop nav and right side */
  .kc-nav { display: none !important; }
  .kc-header__right { display: none !important; }

  /* Show hamburger on right */
  .kc-nav-toggle {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    padding: 4px !important;
    z-index: 101 !important;
    order: 3 !important;
    margin-left: auto !important;
  }
  .kc-nav-toggle span {
    display: block !important;
    width: 24px !important;
    height: 2px !important;
    background: #fff !important;
    transition: all 0.3s !important;
  }

  /* Mobile nav drawer — slides from RIGHT */
  .kc-nav.is-open {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    width: 75vw !important;
    max-width: 300px !important;
    height: 100dvh !important;
    background: #050f0d !important;
    z-index: 999 !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: 60px 32px 40px !important;
    box-shadow: -8px 0 32px rgba(0,0,0,0.6) !important;
    overflow-y: auto !important;
  }
  .kc-nav.is-open .kc-nav__list {
    flex-direction: column !important;
    gap: 0 !important;
    align-items: flex-start !important;
  }
  .kc-nav.is-open .kc-nav__list li {
    width: 100% !important;
  }
  .kc-nav.is-open .kc-nav__list li a {
    font-family: 'Bebas Neue', sans-serif !important;
    font-size: 32px !important;
    letter-spacing: 3px !important;
    color: #fff !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    display: block !important;
    width: 100% !important;
    pointer-events: all !important;
    cursor: pointer !important;
  }
  .kc-nav.is-open .kc-nav__list li a:hover { color: #00c8b4 !important; }

  /* Close button inside mobile nav */
  .kc-nav.is-open .kc-nav-close {
    display: block !important;
    position: absolute !important;
    top: 20px !important;
    right: 20px !important;
    background: none !important;
    border: none !important;
    color: #fff !important;
    font-size: 24px !important;
    cursor: pointer !important;
    z-index: 1000 !important;
    line-height: 1 !important;
    pointer-events: all !important;
  }
}

/* Overlay — covers page when nav open, LEFT side only */
.kc-mobile-nav-overlay {
  display: none !important;
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,0.6) !important;
  z-index: 998 !important;
  cursor: pointer !important;
}
.kc-mobile-nav-overlay.is-open {
  display: block !important;
}

/* ── HERO: text position fix ── */
.kc-hero-v2 {
  height: 100vh !important;
  height: 100dvh !important;
  min-height: 600px !important;
  position: relative !important;
  display: flex !important;
  align-items: flex-end !important;
  overflow: hidden !important;
}
.kc-hero-v2-content {
  position: relative !important;
  z-index: 2 !important;
  padding: 0 48px 80px !important;
  max-width: 800px !important;
}
@media (max-width: 768px) {
  .kc-hero-v2-content {
    padding: 0 20px 60px !important;
  }
  .kc-hero-v2-title {
    font-size: clamp(48px, 12vw, 80px) !important;
  }
}

/* ── BESTSELLER IMAGES: use <img> tag instead of background ── */
.kc-bs-color-swatch {
  width: 100% !important;
  height: 200px !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  background: #1a1a1a !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  overflow: hidden !important;
  position: relative !important;
  flex-shrink: 0 !important;
}
.kc-bs-color-swatch::before,
.kc-bs-color-swatch::after {
  display: none !important;
  content: none !important;
}
/* Make cards clickable */
.kc-bs-card {
  cursor: pointer !important;
  pointer-events: all !important;
}
.kc-bs-card a {
  display: block !important;
  text-decoration: none !important;
  color: inherit !important;
  pointer-events: all !important;
}

/* ============================================================
   PATCH 42 — FINAL: nav clickable, header logo fixed,
               hero title position, bestseller images
   ============================================================ */

/* ── HEADER: logo left, nav links centre ── */
.kc-header__inner {
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  align-items: center !important;
  padding: 20px 48px !important;
  gap: 0 !important;
}
.kc-logo {
  grid-column: 1 !important;
  display: flex !important;
  align-items: center !important;
  order: unset !important;
  margin-left: 0 !important;
  flex-shrink: unset !important;
}
.kc-logo img { height: 40px !important; width: auto !important; }
.kc-nav {
  grid-column: 2 !important;
  display: flex !important;
  justify-content: center !important;
  position: static !important;
  background: transparent !important;
  height: auto !important;
  width: auto !important;
  padding: 0 !important;
  flex-direction: row !important;
  order: unset !important;
  flex: unset !important;
}
.kc-nav__list {
  display: flex !important;
  flex-direction: row !important;
  gap: 36px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.kc-nav__list li a {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.75) !important;
  text-decoration: none !important;
  border-bottom: none !important;
  padding: 0 !important;
}
.kc-header__right {
  grid-column: 3 !important;
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
  order: unset !important;
  margin-left: 0 !important;
}
.kc-nav-toggle { display: none !important; }
.kc-nav-close { display: none !important; }

/* ── MOBILE ── */
@media (max-width: 768px) {
  .kc-header__inner {
    display: flex !important;
    justify-content: space-between !important;
    padding: 16px 20px !important;
  }
  .kc-nav { display: none !important; }
  .kc-header__right { display: none !important; }
  .kc-nav-toggle {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    padding: 4px !important;
    z-index: 1001 !important;
  }
  .kc-nav-toggle span {
    display: block !important;
    width: 24px !important;
    height: 2px !important;
    background: #fff !important;
  }

  /* Nav open state */
  .kc-nav.is-open {
    display: flex !important;
    position: fixed !important;
    inset: 0 0 0 auto !important;
    width: 80vw !important;
    max-width: 280px !important;
    height: 100% !important;
    background: #050f0d !important;
    z-index: 1000 !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    padding: 80px 32px 40px !important;
    box-shadow: -4px 0 24px rgba(0,0,0,0.7) !important;
    pointer-events: all !important;
  }
  .kc-nav.is-open .kc-nav__list {
    flex-direction: column !important;
    gap: 0 !important;
    width: 100% !important;
  }
  .kc-nav.is-open .kc-nav__list li {
    width: 100% !important;
    display: block !important;
  }
  /* THE KEY FIX — links must be clickable */
  .kc-nav.is-open .kc-nav__list li a {
    font-family: 'Bebas Neue', sans-serif !important;
    font-size: 28px !important;
    letter-spacing: 2px !important;
    color: #fff !important;
    display: block !important;
    padding: 16px 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
    text-decoration: none !important;
    pointer-events: all !important;
    cursor: pointer !important;
    position: relative !important;
    z-index: 1002 !important;
    -webkit-tap-highlight-color: rgba(0,200,180,0.2) !important;
  }
  .kc-nav.is-open .kc-nav__list li a:active { color: #00c8b4 !important; }

  /* Close button */
  .kc-nav.is-open .kc-nav-close {
    display: block !important;
    position: absolute !important;
    top: 20px !important;
    right: 20px !important;
    background: none !important;
    border: none !important;
    color: #fff !important;
    font-size: 28px !important;
    cursor: pointer !important;
    pointer-events: all !important;
    z-index: 1003 !important;
    line-height: 1 !important;
    padding: 8px !important;
  }
}

/* Overlay — only covers the LEFT side, nav is on RIGHT */
.kc-mobile-nav-overlay {
  display: none !important;
}
.kc-mobile-nav-overlay.is-open {
  display: block !important;
  position: fixed !important;
  top: 0 !important; left: 0 !important;
  /* Only cover left portion, not the nav drawer */
  right: 80vw !important;
  max-right: calc(100% - 280px) !important;
  bottom: 0 !important;
  background: rgba(0,0,0,0.55) !important;
  z-index: 999 !important;
  pointer-events: all !important;
}

/* ── HERO: fix title spacing ── */
.kc-hero-v2 {
  padding-top: 0 !important;
}
.kc-hero-v2-content {
  padding: 0 48px 80px !important;
}
@media (max-width: 768px) {
  .kc-hero-v2-content { padding: 0 20px 60px !important; }
  .kc-hero-v2-title { font-size: 13vw !important; line-height: 0.92 !important; }
}

/* ── BESTSELLER: img tag approach ── */
.kc-bs-color-swatch {
  display: block !important;
  width: 100% !important;
  height: 200px !important;
  overflow: hidden !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  flex-shrink: 0 !important;
  background: #1a1a1a !important;
  position: relative !important;
}
.kc-bs-color-swatch::before,
.kc-bs-color-swatch::after { display: none !important; content: none !important; }
.kc-bs-color-swatch img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}
@media (max-width: 768px) {
  .kc-bs-color-swatch { height: 160px !important; }
}

/* ============================================================
   PATCH 43 — Header logo constrain + nuclear nav fix
   ============================================================ */

/* Constrain logo so it doesn't eat nav space */
.kc-logo {
  max-width: 120px !important;
  flex-shrink: 0 !important;
}
.kc-logo img {
  height: 50px !important;
  width: 50px !important;
  max-width: 120px !important;
  object-fit: contain !important;
}

/* Header grid - 3 equal-ish columns */
.kc-header__inner {
  display: grid !important;
  grid-template-columns: 140px 1fr auto !important;
  align-items: center !important;
  padding: 18px 40px !important;
  gap: 16px !important;
}

/* Nav perfectly centred in middle column */
.kc-nav {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  position: static !important;
  background: transparent !important;
  padding: 0 !important;
  height: auto !important;
  width: 100% !important;
}
.kc-nav__list {
  display: flex !important;
  flex-direction: row !important;
  gap: 28px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  align-items: center !important;
}
.kc-nav__list > li > a {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.8) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  display: block !important;
}
.kc-header__right {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 16px !important;
  white-space: nowrap !important;
}
.kc-nav-toggle { display: none !important; }

/* ── MOBILE: stack logo + hamburger ── */
@media (max-width: 900px) {
  .kc-header__inner {
    grid-template-columns: auto auto !important;
    justify-content: space-between !important;
    padding: 14px 20px !important;
  }
  .kc-nav { display: none !important; }
  .kc-header__right { display: none !important; }
  .kc-nav-toggle {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    padding: 6px !important;
    z-index: 1001 !important;
  }
  .kc-nav-toggle span {
    display: block !important;
    width: 22px !important;
    height: 2px !important;
    background: #fff !important;
    border-radius: 1px !important;
  }
  .kc-nav.is-open {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: min(75vw, 280px) !important;
    height: 100% !important;
    background: #050f0d !important;
    z-index: 1000 !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    padding: 72px 28px 40px !important;
    box-shadow: -4px 0 32px rgba(0,0,0,0.8) !important;
  }
  .kc-nav.is-open .kc-nav__list {
    flex-direction: column !important;
    gap: 0 !important;
    align-items: flex-start !important;
    width: 100% !important;
  }
  .kc-nav.is-open .kc-nav__list li {
    width: 100% !important;
  }
  .kc-nav.is-open .kc-nav__list li a {
    font-family: 'Bebas Neue', sans-serif !important;
    font-size: 30px !important;
    letter-spacing: 2px !important;
    color: #fff !important;
    display: block !important;
    width: 100% !important;
    padding: 14px 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
    text-decoration: none !important;
    position: relative !important;
    z-index: 1002 !important;
    pointer-events: all !important;
    -webkit-tap-highlight-color: rgba(0,200,180,0.3) !important;
    cursor: pointer !important;
  }
  .kc-nav.is-open .kc-nav-close {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    width: 36px !important;
    height: 36px !important;
    background: rgba(255,255,255,0.08) !important;
    border: none !important;
    border-radius: 50% !important;
    color: #fff !important;
    font-size: 18px !important;
    cursor: pointer !important;
    z-index: 1003 !important;
    pointer-events: all !important;
  }
}

/* Overlay — just dims the non-nav area */
.kc-mobile-nav-overlay {
  display: none !important;
}
.kc-mobile-nav-overlay.is-open {
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,0.5) !important;
  z-index: 999 !important;
  pointer-events: all !important;
}

/* ============================================================
   PATCH 44 — Transparent header homepage only, hero text,
               logged-in header state
   ============================================================ */

/* Transparent header on homepage only */
.home .kc-header {
  background: transparent !important;
}
.home .kc-header.scrolled {
  background: rgba(5,15,13,0.97) !important;
  backdrop-filter: blur(10px) !important;
}
/* All other pages — solid dark header */
body:not(.home) .kc-header {
  background: rgba(5,15,13,0.97) !important;
  backdrop-filter: blur(10px) !important;
  border-bottom: 1px solid rgba(0,200,180,0.1) !important;
}

/* Hero content pushed lower */
.kc-hero-v2-content {
  padding: 0 48px 100px !important;
  align-self: flex-end !important;
}
@media (max-width: 768px) {
  .kc-hero-v2-content { padding: 0 24px 72px !important; }
}

/* Logged-in: show user email + cart in header */
body.logged-in .kc-auth-link__name {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 12px !important;
  letter-spacing: 1px !important;
  color: rgba(255,255,255,0.7) !important;
  text-decoration: none !important;
  max-width: 180px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
body.logged-in .kc-cart-icon {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  color: rgba(255,255,255,0.8) !important;
  text-decoration: none !important;
  position: relative !important;
}
body.logged-in .kc-cart-count {
  background: #00c8b4 !important;
  color: #000 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: absolute !important;
  top: -6px !important;
  right: -6px !important;
}

/* Non-logged-in: show Login/Register only */
body:not(.logged-in) .kc-cart-icon { display: none !important; }
body:not(.logged-in) .kc-auth-link__name { display: none !important; }

/* ============================================================
   PATCH 51 — DEFINITIVE FIX: hero title spacing, mobile hamburger
   ============================================================ */

/* ── HERO: align-items flex-end means content sits at bottom.
   We control distance from bottom via padding-bottom.
   At 1920px the header is ~76px, title block ~400px, so we need
   more breathing room above the buttons row.
   Use a min() clamp so it scales with viewport height. ── */
.kc-hero-v2-content {
  padding: 0 48px clamp(100px, 10vh, 160px) !important;
  align-self: flex-end !important;
  width: 100% !important;
  max-width: 860px !important;
}

/* ── MOBILE HAMBURGER FIX ──
   The header inner is a 3-col grid on desktop (logo | nav | right).
   On mobile we switch to flex space-between with 2 visible items:
   logo (order 1) and hamburger (order 2). Right side and nav are hidden.
   The hamburger kc-nav-toggle MUST be visible — override every prior rule. ── */
@media (max-width: 900px) {
  .kc-header__inner {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 14px 20px !important;
    gap: 0 !important;
    grid-template-columns: unset !important;
  }
  .kc-logo {
    order: 1 !important;
    flex-shrink: 0 !important;
    max-width: unset !important;
  }
  .kc-nav {
    display: none !important;
    order: 2 !important;
  }
  .kc-header__right {
    display: none !important;
    order: 3 !important;
  }
  .kc-nav-toggle {
    order: 4 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    padding: 8px !important;
    z-index: 1001 !important;
    flex-shrink: 0 !important;
    /* Make absolutely sure it's visible */
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: all !important;
    width: auto !important;
    height: auto !important;
  }
  .kc-nav-toggle span {
    display: block !important;
    width: 24px !important;
    height: 2px !important;
    background: #fff !important;
    border-radius: 1px !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  /* Hero title font size on mobile/tablet */
  .kc-hero-v2-content {
    padding: 0 24px clamp(72px, 8vh, 110px) !important;
    max-width: 100% !important;
  }
  .kc-hero-v2-title {
    font-size: clamp(56px, 15vw, 96px) !important;
    line-height: 0.92 !important;
  }
}

/* ============================================================
   PATCH 52 — Bestseller swatch: no more inline style,
               img tag is the only image source now.
               front-page.php updated to use <img> + woocommerce_single.
   ============================================================ */

/* ── Swatch base: fallback dark bg ── */
html body .kc-bs-color-swatch {
  display: block !important;
  width: 100% !important;
  height: 220px !important;
  overflow: hidden !important;
  position: relative !important;
  background-color: #111 !important;
  border-radius: 0 !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
}
/* ── Swatch WITH inline style (background-image from PHP):
   DO NOT override background-image — let it show.
   Just enforce size, position, no radius. ── */
html body .kc-bs-color-swatch[style] {
  display: block !important;
  width: 100% !important;
  height: 220px !important;
  overflow: hidden !important;
  position: relative !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  border-radius: 0 !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
}
html body .kc-bs-color-swatch::before,
html body .kc-bs-color-swatch::after {
  display: none !important;
  content: none !important;
}
/* ── Swatch with <img> tag (new PHP after upload) ── */
html body .kc-bs-color-swatch img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 0 !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
}
@media (max-width: 768px) {
  html body .kc-bs-color-swatch,
  html body .kc-bs-color-swatch[style] {
    height: 180px !important;
  }
}

/* ============================================================
   PATCH 53 — DEFINITIVE bestseller image fix.
   Root cause found: patch ~30 had ".kc-bs-card img { display:none !important }"
   to kill WC thumbnails. This also hides our intentional <img> in the swatch.
   Fix: un-hide img inside the swatch specifically.
   ============================================================ */

/* 1. UN-HIDE the product image inside the swatch */
html body .kc-bs-color-swatch img,
html body .kc-bs-color-swatch > img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
  border-radius: 0 !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  flex-shrink: 0 !important;
}

/* 2. Swatch container — proper rectangle, dark fallback */
html body .kc-bs-color-swatch {
  display: block !important;
  width: 100% !important;
  height: 220px !important;
  overflow: hidden !important;
  position: relative !important;
  background-color: #111 !important;
  background-image: none !important;
  border-radius: 0 !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
}
html body .kc-bs-color-swatch::before,
html body .kc-bs-color-swatch::after {
  display: none !important;
  content: none !important;
}

/* 3. Make sure kc-bs-card * wildcard doesn't paint over the img */
html body .kc-bs-color-swatch img {
  background-color: transparent !important;
}

@media (max-width: 900px) {
  html body .kc-bs-color-swatch { height: 180px !important; }
}
@media (max-width: 480px) {
  html body .kc-bs-color-swatch { height: 150px !important; }
}

/* ============================================================
   BEST SELLER SECTION — FINAL FIX
   Place at the very bottom of patch.css
   ============================================================ */

/* 1. Section & Header Layout */
.kc-bestsellers-v2 {
  padding: 80px 0 80px 48px !important;
  background: #060e0c !important;
  width: 100% !important;
  overflow: hidden !important;
}
.kc-bestsellers-header {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  padding: 0 48px 0 0 !important;
  margin-bottom: 48px !important;
}

/* 2. Horizontal Scroll Track */
.kc-carousel-track {
  display: flex !important;
  gap: 16px !important;
  padding: 0 48px 24px 0 !important;
  overflow-x: auto !important;
  scroll-snap-type: x mandatory !important;
  scrollbar-width: none !important;
}
.kc-carousel-track::-webkit-scrollbar { 
  display: none !important; 
}

/* 3. Product Card Base */
.kc-bs-card {
  flex: 0 0 260px !important;
  width: 260px !important;
  background: #0a0a0a !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  scroll-snap-align: start !important;
  transition: border-color 0.3s, transform 0.3s !important;
  cursor: pointer !important;
  text-decoration: none !important;
}
.kc-bs-card:hover {
  border-color: rgba(0,200,180,0.6) !important;
  transform: translateY(-6px) !important;
}
.kc-bs-card-accent {
  position: absolute !important;
  top: 0; left: 0; right: 0 !important;
  height: 2px !important;
  background: linear-gradient(to right, #00c8b4, #00e8d0) !important;
  transform: scaleX(0) !important;
  transform-origin: left !important;
  transition: transform 0.35s ease !important;
  z-index: 2 !important;
}
.kc-bs-card:hover .kc-bs-card-accent { 
  transform: scaleX(1) !important; 
}

/* 4. DEFINITIVE IMAGE FIX (For Inline Backgrounds) */
html body .kc-bs-color-swatch {
  display: block !important;
  width: 100% !important;
  height: 220px !important;
  overflow: hidden !important;
  position: relative !important;
  /* We removed the background-image: none rule so your image can show! */
  border-radius: 0 !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
}

/* Make sure the inline background fits perfectly */
html body .kc-bs-color-swatch[style] {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* Hide the old circular rings */
html body .kc-bs-color-swatch::before,
html body .kc-bs-color-swatch::after {
  display: none !important;
  content: none !important;
}

/* 5. Card Typography & Info Area */
.kc-bs-card-info {
  padding: 20px 20px 24px !important;
  background: #0a0a0a !important;
  flex: 1 !important;
}
.kc-bs-product-name {
  font-family: var(--kc-font-display, 'Barlow Condensed', sans-serif) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  color: #fff !important;
  margin-bottom: 4px !important;
}
.kc-bs-product-code {
  font-family: var(--kc-font-display, 'Barlow Condensed', sans-serif) !important;
  font-size: 10px !important;
  color: rgba(255,255,255,0.3) !important;
  letter-spacing: 3px !important;
  margin-bottom: 16px !important;
  display: block !important;
}
.kc-bs-login-tag {
  font-family: var(--kc-font-display, 'Barlow Condensed', sans-serif) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #00c8b4 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  border: 1px solid rgba(0,200,180,0.35) !important;
  padding: 6px 14px !important;
  display: inline-block !important;
  background: rgba(0,200,180,0.05) !important;
  transition: background 0.2s !important;
}
.kc-bs-card:hover .kc-bs-login-tag {
  background: rgba(0,200,180,0.12) !important;
}
.kc-bs-num {
  position: absolute !important;
  top: 12px !important;
  right: 16px !important;
  font-family: var(--kc-font-display, 'Bebas Neue', sans-serif) !important;
  font-size: 52px !important;
  color: rgba(255,255,255,0.06) !important;
  line-height: 1 !important;
}

/* 6. Mobile Responsiveness */
@media (max-width: 768px) {
  .kc-bestsellers-v2 { padding: 48px 0 48px 20px !important; }
  .kc-bs-card { flex: 0 0 220px !important; width: 220px !important; }
  html body .kc-bs-color-swatch { height: 180px !important; }
}
@media (max-width: 480px) {
  html body .kc-bs-color-swatch { height: 150px !important; }
}

/* ============================================================
   PATCH 53 — DEFINITIVE header layout (ID-scoped to beat every
   prior class-only !important rule regardless of file position)

   Desktop: logo far left | nav + profile/cart grouped at far right
   Mobile:  [hamburger][search] —— [logo centred] —— [profile][cart]
   ============================================================ */

/* Hide the mobile-only left group (hamburger) on desktop */
#kc-header .kc-header__left { display: none !important; }

/* ── DESKTOP ── */
#kc-header .kc-header__inner {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center !important;
  justify-content: flex-start !important;
}
#kc-header .kc-logo {
  order: 1 !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}
#kc-header .kc-nav {
  order: 2 !important;
  flex: 0 1 auto !important;
  margin-left: auto !important;
  justify-content: flex-end !important;
  position: static !important;
}
#kc-header .kc-header__right {
  order: 3 !important;
  margin-left: 28px !important;
  flex-shrink: 0 !important;
}

/* Auth icon — no text label, just the people icon, on every breakpoint */
#kc-header .kc-auth-link { display: flex !important; }
#kc-header .kc-auth-link__login,
#kc-header .kc-auth-link__name { gap: 0 !important; }
#kc-header .kc-auth-link__login span,
#kc-header .kc-auth-link__name span { display: none !important; }

/* ── MOBILE: hamburger left | logo centred | profile+cart right ── */
@media (max-width: 768px) {
  #kc-header .kc-header__inner {
    display: grid !important;
    grid-template-columns: 76px 1fr 76px !important;
    align-items: center !important;
    padding: 14px 20px !important;
  }
  #kc-header .kc-header__left {
    display: flex !important;
    align-items: center !important;
    grid-column: 1 !important;
    justify-self: start !important;
  }
  #kc-header .kc-nav-toggle {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    padding: 0 !important;
    width: 24px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
  }
  #kc-header .kc-nav-toggle span {
    display: block !important;
    width: 100% !important;
    height: 2px !important;
    background: #fff !important;
  }
  #kc-header .kc-logo {
    grid-column: 2 !important;
    justify-self: center !important;
    margin: 0 !important;
  }
  #kc-header .kc-nav { display: none !important; }
  #kc-header .kc-nav.is-open { display: flex !important; }
  #kc-header .kc-header__right {
    grid-column: 3 !important;
    justify-self: end !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    margin-left: 0 !important;
  }
}

/* Full-screen grey overlay behind the mobile nav drawer — reinforced
   with a high-specificity selector so no legacy rule can hide it */
html body .kc-mobile-nav-overlay {
  display: none !important;
}
html body .kc-mobile-nav-overlay.is-open {
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0.6) !important;
  z-index: 1050 !important;
  pointer-events: all !important;
}
html body #kc-nav.is-open {
  z-index: 1060 !important;
}

/* CRITICAL: #kc-nav is a CHILD of .kc-header. Since .kc-header has its
   own position+z-index, it creates a stacking context that traps any
   z-index set on its children — #kc-nav's z-index:1060 above can never
   beat the overlay (a sibling of .kc-header) unless .kc-header itself
   also outranks the overlay's z-index. This is what made the nav menu
   unclickable (overlay sat on top, intercepting every tap). */
html body .kc-header {
  z-index: 1070 !important;
}

/* ============================================================
   Ultimate Member login form — centre the Login/Register
   buttons as an equal pair instead of UM's default float
   layout (.um-left / .um-right floated apart).
   ============================================================ */
/* Works for BOTH .um-login and .um-register (and any other UM form) —
   target whatever element directly wraps the .um-left/.um-right pair,
   regardless of its own class name. */
.um *:has(> .um-left):has(> .um-right) {
  text-align: center !important;
}
.um-login .um-col-alt > .um-field {
  text-align: left !important;
  margin-bottom: 18px !important;
}
.um .um-left,
.um .um-right {
  float: none !important;
  display: inline-block !important;
  width: auto !important;
  vertical-align: middle !important;
  margin: 0 8px !important;
  padding: 0 !important;
  border: none !important;
  line-height: 0 !important;
}
.um .um-button {
  box-sizing: border-box !important;
  min-width: 160px !important;
  height: 48px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  vertical-align: middle !important;
}