/**
 * ============================================================
 * TYREROOM DIRECT - CLEAN MASTER STYLESHEET v10
 * ============================================================
 * 
 * Complete unified stylesheet with fixed cart and checkout sections.
 * This file replaces nt-enhancements.css entirely.
 * 
 * SECTIONS:
 * 1. Variables
 * 2. Homepage Hero
 * 3. Homepage Sections
 * 4. Modals
 * 5. WooCommerce Cart (lines ~400+)
 * 6. WooCommerce Checkout (lines ~900+)
 * 7. Brands Section
 * 8. Find a Fitter Page
 * 9. Utilities
 * 
 * ============================================================
 */

/* ============================================================
 * 1. CSS VARIABLES
 * ============================================================ */
:root {
  --nt-primary: #1e3a5f;
  --nt-primary-hover: #2d4a70;
  --nt-secondary: #f5a623;
  --nt-secondary-hover: #e09000;
  --nt-success: #10b981;
  --nt-success-hover: #059669;
  --nt-text: #1e3a5f;
  --nt-text-muted: #6b7280;
  --nt-border: #e5e7eb;
  --nt-bg: #f9fafb;
  --nt-bg-alt: #f5f7fa;
  --nt-white: #ffffff;
  --nt-radius: 14px;
  --nt-radius-lg: 20px;
  --nt-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  --nt-shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.15);

  /* Kadence overrides */
  --global-palette1: #1e3a5f;
  --global-palette2: #2d4a70;
  --global-palette4: #1e3a5f;
}

/* ============================================================
 * 2. HOMEPAGE HERO
 * ============================================================ */

#nt-hero {
  display: grid !important;
  grid-template-columns: 1fr 440px !important;
  gap: 50px !important;
  align-items: center !important;
  background: linear-gradient(
    135deg,
    var(--nt-primary) 0%,
    var(--nt-primary-hover) 100%
  ) !important;
  padding: 60px 40px !important;
  min-height: 500px !important;
}

#nt-hero .nt-hero-left {
  color: var(--nt-white) !important;
}

#nt-hero .nt-hero-left h1 {
  font-size: 42px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  margin: 0 0 16px 0 !important;
  color: var(--nt-white) !important;
}

#nt-hero .nt-hero-left > p {
  font-size: 18px !important;
  color: rgba(255, 255, 255, 0.85) !important;
  margin: 0 0 32px 0 !important;
  line-height: 1.5 !important;
}

#nt-hero .nt-hero-services {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
}

#nt-hero .nt-hero-service {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: var(--nt-radius) !important;
  padding: 20px 16px !important;
  text-align: center !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

#nt-hero .nt-hero-service:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  transform: translateY(-2px) !important;
}

#nt-hero .nt-hero-service-icon {
  font-size: 28px !important;
  margin-bottom: 8px !important;
}

#nt-hero .nt-hero-service-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--nt-white) !important;
  line-height: 1.3 !important;
}

/* Search widget in hero */
#nt-search-widget {
  background: var(--nt-white) !important;
  border-radius: var(--nt-radius-lg) !important;
  padding: 28px !important;
  box-shadow: var(--nt-shadow-lg) !important;
}

#nt-search-widget .nt-search-title {
  font-size: 20px !important;
  font-weight: 900 !important;
  color: var(--nt-primary) !important;
  margin: 0 0 6px 0 !important;
  text-align: center !important;
}

#nt-search-widget .nt-search-sub {
  font-size: 14px !important;
  color: var(--nt-text-muted) !important;
  margin: 0 0 20px 0 !important;
  text-align: center !important;
}

/* Hero responsive */
@media (max-width: 991px) {
  #nt-hero {
    display: flex !important;
    flex-direction: column !important;
    padding: 40px 20px !important;
    min-height: auto !important;
    align-items: center !important;
  }
  /* Make .nt-hero-left transparent so children become direct flex items */
  #nt-hero .nt-hero-left {
    display: contents !important;
  }
  /* H1 first */
  #nt-hero .nt-hero-left h1 {
    order: 1 !important;
    font-size: 32px !important;
    text-align: center !important;
    width: 100% !important;
    margin-bottom: 12px !important;
  }
  /* Paragraph second */
  #nt-hero .nt-hero-left > p {
    order: 2 !important;
    text-align: center !important;
    width: 100% !important;
    margin-bottom: 24px !important;
  }
  /* Search card third */
  #nt-hero .nt-reg-card {
    order: 3 !important;
    width: 100% !important;
    max-width: 440px !important;
    margin: 0 auto 24px !important;
  }
  /* Services LAST (after card) */
  #nt-hero .nt-hero-services {
    order: 4 !important;
    width: 100% !important;
    max-width: 440px !important;
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 600px) {
  #nt-hero .nt-hero-services {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
 * 3. HOMEPAGE SECTIONS
 * ============================================================ */

.nt-section {
  padding: 60px 20px !important;
}

.nt-section-title {
  font-size: 28px !important;
  font-weight: 900 !important;
  color: var(--nt-primary) !important;
  text-align: center !important;
  margin: 0 0 12px 0 !important;
}

.nt-section-sub {
  font-size: 16px !important;
  color: var(--nt-text-muted) !important;
  text-align: center !important;
  margin: 0 0 40px 0 !important;
  max-width: 600px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* How it works */
.nt-steps-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 24px !important;
  max-width: 1000px !important;
  margin: 0 auto !important;
}

.nt-step-card {
  text-align: center !important;
  padding: 24px !important;
}

.nt-step-number {
  width: 48px !important;
  height: 48px !important;
  background: var(--nt-primary) !important;
  color: var(--nt-white) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  margin: 0 auto 16px !important;
}

.nt-step-title {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: var(--nt-primary) !important;
  margin: 0 0 8px 0 !important;
}

.nt-step-desc {
  font-size: 14px !important;
  color: var(--nt-text-muted) !important;
  line-height: 1.5 !important;
}

@media (max-width: 768px) {
  .nt-steps-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 480px) {
  .nt-steps-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
 * 4. MODALS
 * ============================================================ */

#nt-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(4px) !important;
}

#nt-modal[hidden] {
  display: none !important;
}

.nt-modal-card {
  width: min(480px, 90vw) !important;
  background: var(--nt-white) !important;
  border-radius: 16px !important;
  padding: 28px !important;
  box-shadow: var(--nt-shadow-lg) !important;
  text-align: center !important;
}

.nt-modal-title {
  font-size: 20px !important;
  font-weight: 900 !important;
  color: var(--nt-primary) !important;
  margin: 0 0 10px 0 !important;
}

.nt-modal-body {
  font-size: 15px !important;
  color: var(--nt-text-muted) !important;
  margin: 0 0 20px 0 !important;
}

.nt-modal .nt-btn,
.nt-modal-ok {
  display: inline-block !important;
  padding: 14px 32px !important;
  background: var(--nt-primary) !important;
  color: var(--nt-white) !important;
  border: none !important;
  border-radius: 10px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}

/* ============================================================
 * 5. WOOCOMMERCE CART
 * ============================================================ */

/* Hide entry-hero on cart/checkout */
body.woocommerce-cart .entry-hero,
body.woocommerce-cart section.entry-hero,
body.woocommerce-cart .page-hero-section,
body.woocommerce-cart section.page-hero-section,
body.woocommerce-cart .entry-hero-container-inner,
body.woocommerce-checkout .entry-hero,
body.woocommerce-checkout section.entry-hero,
body.woocommerce-checkout .page-hero-section,
body.woocommerce-checkout section.page-hero-section,
body.woocommerce-checkout .entry-hero-container-inner {
  display: none !important;
  min-height: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.woocommerce-cart #primary.content-area,
body.woocommerce-checkout #primary.content-area {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Page wrapper */
body.woocommerce-cart .woocommerce {
  max-width: 1160px !important;
  margin: 0 auto !important;
  padding: 32px 24px !important;
}

/* Mobile cart - override base styles */
@media screen and (max-width: 768px) {
  body.woocommerce-cart .woocommerce {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 12px !important;
  }
}

/* Notices */
body.woocommerce-cart .woocommerce-notices-wrapper {
  margin-bottom: 16px !important;
}

body.woocommerce-cart .woocommerce-error,
body.woocommerce-cart .woocommerce-message,
body.woocommerce-cart .woocommerce-info {
  border-radius: 10px !important;
  border: none !important;
  padding: 14px 20px !important;
  margin-bottom: 0 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  list-style: none !important;
}

body.woocommerce-cart .woocommerce-error {
  background: #fef2f2 !important;
  border-left: 4px solid #ef4444 !important;
  color: #991b1b !important;
}

body.woocommerce-cart .woocommerce-message {
  background: #f0fdf4 !important;
  border-left: 4px solid var(--nt-success) !important;
  color: #166534 !important;
}

body.woocommerce-cart .woocommerce-info {
  background: #eff6ff !important;
  border-left: 4px solid var(--nt-primary) !important;
  color: var(--nt-primary) !important;
}

/* Two-column layout */
body.woocommerce-cart .kadence-woo-cart-form-wrap {
  display: flex !important;
  align-items: flex-start !important;
  gap: 24px !important;
}

/* Left panel - Cart form */
body.woocommerce-cart form.woocommerce-cart-form {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  background: var(--nt-white) !important;
  border-radius: 16px !important;
  border: none !important;
  box-shadow:
    0 1px 4px rgba(0, 0, 0, 0.06),
    0 8px 24px rgba(30, 58, 95, 0.07) !important;
  overflow: hidden !important;
  padding: 0 !important;
}

/* Cart Summary heading */
body.woocommerce-cart div.cart-summary {
  padding: 20px 24px 16px !important;
  text-align: center !important;
  border-bottom: 1px solid var(--nt-border) !important;
}

body.woocommerce-cart div.cart-summary h2 {
  font-size: 18px !important;
  font-weight: 900 !important;
  color: var(--nt-primary) !important;
  margin: 0 !important;
  padding: 0 !important;
  letter-spacing: -0.2px !important;
  border: none !important;
}

/* Cart table */
body.woocommerce-cart table.shop_table {
  width: 100% !important;
  border: none !important;
  border-collapse: collapse !important;
  table-layout: auto !important;
}

/* Header row */
body.woocommerce-cart table.shop_table thead tr {
  background: var(--nt-bg) !important;
}

body.woocommerce-cart table.shop_table th {
  color: #1E3A5F !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  padding: 10px 14px !important;
  border: none !important;
  border-bottom: 1px solid var(--nt-border) !important;
  white-space: nowrap !important;
}

/* All body cells */
body.woocommerce-cart table.shop_table td {
  padding: 18px 14px !important;
  border: none !important;
  vertical-align: top !important;
}

body.woocommerce-cart table.shop_table tbody tr.cart_item:last-child td {
  border-bottom: none !important;
}

/* Hide native product-remove column */
body.woocommerce-cart th.product-remove,
body.woocommerce-cart td.product-remove {
  display: none !important;
  width: 0 !important;
  padding: 0 !important;
}

/* Thumbnail cell */
body.woocommerce-cart td.product-thumbnail {
  width: 100px !important;
  padding: 18px 10px 18px 18px !important;
  vertical-align: top !important;
}

body.woocommerce-cart td.product-thumbnail .nt-thumb-wrap {
  position: relative !important;
  display: inline-block !important;
  width: 80px !important;
  height: 80px !important;
  flex-shrink: 0 !important;
}

body.woocommerce-cart td.product-thumbnail img {
  width: 80px !important;
  height: 80px !important;
  object-fit: contain !important;
  border-radius: 10px !important;
  background: var(--nt-bg) !important;
  padding: 4px !important;
  display: block !important;
}

/* Remove overlay on thumbnail */
body.woocommerce-cart a.remove.nt-remove-overlay,
body.woocommerce-cart .nt-thumb-wrap a.remove {
  position: absolute !important;
  top: -6px !important;
  right: -6px !important;
  width: 22px !important;
  height: 22px !important;
  background: #ef4444 !important;
  color: #fff !important;
  border-radius: 50% !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 5px rgba(239, 68, 68, 0.45) !important;
  transition: transform 0.15s !important;
  z-index: 4 !important;
}

body.woocommerce-cart a.remove.nt-remove-overlay:hover {
  transform: scale(1.18) !important;
  background: #dc2626 !important;
}

/* Product name cell */
body.woocommerce-cart td.product-name {
  vertical-align: top !important;
  padding-top: 20px !important;
}

/* Tyre name */
body.woocommerce-cart td.product-name > strong,
body.woocommerce-cart td.product-name strong:first-child {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: var(--nt-primary) !important;
  display: inline !important;
  line-height: 1.3 !important;
}

/* ── CHANGE BUTTON - Properly styled pill ── */
body.woocommerce-cart .nt-change-tyre-link,
body.woocommerce-cart td.product-name .nt-change-tyre-link,
body.woocommerce-cart a.nt-change-tyre-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin-left: 10px !important;
  padding: 6px 12px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--nt-primary) !important;
  text-decoration: none !important;
  background: var(--nt-bg) !important;
  border: 1.5px solid var(--nt-border) !important;
  border-radius: 20px !important;
  transition: all 0.2s ease !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}

body.woocommerce-cart .nt-change-tyre-link:hover,
body.woocommerce-cart td.product-name .nt-change-tyre-link:hover,
body.woocommerce-cart a.nt-change-tyre-link:hover {
  background: var(--nt-primary) !important;
  color: var(--nt-white) !important;
  border-color: var(--nt-primary) !important;
}

body.woocommerce-cart .nt-change-tyre-link svg {
  width: 11px !important;
  height: 11px !important;
  flex-shrink: 0 !important;
}

/* ── dl.variation - CRITICAL FIX ──
   WooCommerce uses float:left which breaks layout.
   We completely override with a clean flexbox approach. */

body.woocommerce-cart td.product-name dl.variation,
.woocommerce-cart td.product-name dl.variation,
.woocommerce td.product-name dl.variation {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  margin: 16px 0 0 0 !important;
  padding: 16px 0 0 0 !important;
  border-top: 1px solid var(--nt-border) !important;
  list-style: none !important;
}

/* Override WooCommerce float styles */
body.woocommerce-cart td.product-name dl.variation dt,
.woocommerce-cart td.product-name dl.variation dt,
.woocommerce td.product-name dl.variation dt {
  float: none !important;
  clear: none !important;
  display: block !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  color: var(--nt-primary) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  margin: 0 0 2px 0 !important;
  padding: 0 !important;
  line-height: 1.2 !important;
}

body.woocommerce-cart td.product-name dl.variation dd,
.woocommerce-cart td.product-name dl.variation dd,
.woocommerce td.product-name dl.variation dd {
  float: none !important;
  display: block !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #374151 !important;
  margin: 0 0 14px 0 !important;
  padding: 0 !important;
  line-height: 1.4 !important;
}

body.woocommerce-cart td.product-name dl.variation dd:last-of-type,
.woocommerce-cart td.product-name dl.variation dd:last-of-type,
.woocommerce td.product-name dl.variation dd:last-of-type {
  margin-bottom: 0 !important;
}

body.woocommerce-cart td.product-name dl.variation dd p,
.woocommerce-cart td.product-name dl.variation dd p,
.woocommerce td.product-name dl.variation dd p {
  margin: 0 !important;
  padding: 0 !important;
  display: inline !important;
}

body.woocommerce-cart td.product-name dl.variation dd strong,
.woocommerce-cart td.product-name dl.variation dd strong,
.woocommerce td.product-name dl.variation dd strong {
  font-weight: 700 !important;
  color: var(--nt-primary) !important;
}

/* Postcode styling */
body.woocommerce-cart td.product-name dl.variation dd small,
.woocommerce-cart td.product-name dl.variation dd small,
.woocommerce td.product-name dl.variation dd small {
  display: block !important;
  font-size: 12px !important;
  color: var(--nt-text-muted) !important;
  margin-top: 2px !important;
  padding-left: 0 !important;
  font-weight: 500 !important;
}

/* Price / Qty / Subtotal cells */
body.woocommerce-cart td.product-price,
body.woocommerce-cart td.product-quantity,
body.woocommerce-cart td.product-subtotal {
  vertical-align: top !important;
  padding-top: 24px !important;
  white-space: nowrap !important;
}

body.woocommerce-cart td.product-price {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--nt-primary) !important;
}

body.woocommerce-cart td.product-subtotal {
  font-size: 15px !important;
  font-weight: 900 !important;
  color: var(--nt-primary) !important;
  text-align: right !important;
}

/* Quantity stepper */
.quantity.nt-qty-ready {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.quantity.nt-qty-ready input.qty {
  width: 48px !important;
  text-align: center !important;
  border-radius: 8px !important;
  border: 1.5px solid var(--nt-border) !important;
  height: 36px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--nt-primary) !important;
}

.nt-qty-btn {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  border: 1.5px solid var(--nt-border) !important;
  background: var(--nt-white) !important;
  color: var(--nt-primary) !important;
  font-weight: 900 !important;
  font-size: 16px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition:
    background 0.15s,
    border-color 0.15s !important;
}

.nt-qty-btn:hover {
  background: #f0f4f8 !important;
  border-color: var(--nt-primary) !important;
}

.nt-qty-btn:disabled {
  opacity: 0.38 !important;
  cursor: not-allowed !important;
}

/* Actions row (coupon + update) */
body.woocommerce-cart td.actions {
  background: var(--nt-bg) !important;
  padding: 14px 18px !important;
  border-top: 1px solid var(--nt-border) !important;
  border-bottom: none !important;
  vertical-align: middle !important;
}

body.woocommerce-cart .coupon {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

body.woocommerce-cart .coupon label {
  display: none !important;
}

body.woocommerce-cart .coupon input#coupon_code {
  width: 160px !important;
  height: 38px !important;
  border: 1.5px solid var(--nt-border) !important;
  border-radius: 8px !important;
  padding: 0 12px !important;
  font-size: 13px !important;
  background: var(--nt-white) !important;
}

body.woocommerce-cart .coupon .button,
body.woocommerce-cart .coupon button.button {
  height: 38px !important;
  padding: 0 14px !important;
  background: var(--nt-primary) !important;
  color: var(--nt-white) !important;
  border: none !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
}

body.woocommerce-cart button[name="update_cart"] {
  height: 38px !important;
  padding: 0 14px !important;
  background: transparent !important;
  color: var(--nt-text-muted) !important;
  border: 1.5px solid var(--nt-border) !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  float: right !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Right panel - Cart Totals */
body.woocommerce-cart .cart-collaterals {
  flex: 0 0 340px !important;
  width: 340px !important;
  min-width: 300px !important;
  max-width: 340px !important;
  position: sticky !important;
  top: 80px !important;
}

body.woocommerce-cart .cart_totals {
  background: var(--nt-white) !important;
  border-radius: 16px !important;
  border: none !important;
  box-shadow:
    0 1px 4px rgba(0, 0, 0, 0.06),
    0 8px 24px rgba(30, 58, 95, 0.07) !important;
  overflow: hidden !important;
}

body.woocommerce-cart .cart_totals h2 {
  font-size: 13px !important;
  font-weight: 900 !important;
  color: var(--nt-white) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.7px !important;
  padding: 14px 20px !important;
  margin: 0 !important;
  background: var(--nt-primary) !important;
  border: none !important;
  white-space: nowrap !important;
}

body.woocommerce-cart .cart_totals table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 0 !important;
}

body.woocommerce-cart .cart_totals table th,
body.woocommerce-cart .cart_totals table td {
  padding: 10px 14px !important;
  border: none !important;
  border-bottom: 1px solid var(--nt-border) !important;
  background: none !important;
}

.woocommerce-cart .cart-collaterals .cart_totals table small, .woocommerce-checkout .cart-collaterals .cart_totals table small, #add_payment_method .cart-collaterals .cart_totals table small{
	color: #1E3A5F !important;
	opacity:1 !important;
	font-weight:600 !important;
}

body.woocommerce-cart .cart_totals table th {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #1E3A5F !important;
  text-align: left !important;
}

body.woocommerce-cart .cart_totals table td {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--nt-primary) !important;
  text-align: right !important;
}

/* Total row */
body.woocommerce-cart .cart_totals tr.order-total th,
body.woocommerce-cart .cart_totals tr.order-total td {
  font-size: 17px !important;
  font-weight: 900 !important;
  color: var(--nt-primary) !important;
  border-bottom: none !important;
  border-top: 2px solid var(--nt-primary) !important;
  padding: 16px 14px !important;
  background: rgba(30, 58, 95, 0.03) !important;
}

/* Hide WC native fee rows — NT services display is handled by
   nt_display_cart_services_comprehensive (rows with × remove buttons).
   Fees still exist for total calculation; only the table rows are hidden. */
body.woocommerce-cart .cart_totals tr.fee {
  display: none !important;
}

/* Proceed to checkout button */
body.woocommerce-cart .wc-proceed-to-checkout {
  padding: 0 14px 14px !important;
}

body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 50px !important;
  padding: 14px 20px !important;
  background: var(--nt-primary) !important;
  color: var(--nt-white) !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  letter-spacing: 0.6px !important;
  transition: background 0.2s !important;
  box-sizing: border-box !important;
}

body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
  background: var(--nt-primary-hover) !important;
}

/* ── SERVICE ROWS in cart table ── */
tr.cart_item.nt-service-row {
  background: #f8fafc !important;
}

tr.cart_item.nt-service-row td {
  padding: 12px 14px !important;
  border-bottom: 1px solid var(--nt-border) !important;
  vertical-align: middle !important;
}

tr.cart_item.nt-service-row td.product-thumbnail {
  width: 60px !important;
  padding: 12px 8px 12px 18px !important;
}

tr.cart_item.nt-service-row td.product-name {
  padding-top: 12px !important;
}

.nt-service-row__name {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

.nt-service-row__icon {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  border-radius: 8px !important;
  background: rgba(30, 58, 95, 0.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  color: var(--nt-primary) !important;
}

.nt-service-row__icon svg {
  width: 16px !important;
  height: 16px !important;
}

.nt-service-row__label {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--nt-primary) !important;
}

.nt-service-row__badge {
  font-size: 9px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
  color: var(--nt-text-muted) !important;
  background: rgba(30, 58, 95, 0.06) !important;
  border-radius: 4px !important;
  padding: 3px 8px !important;
}

.nt-service-row__badge.nt-free-badge {
  background: rgba(16, 185, 129, 0.1) !important;
  color: var(--nt-success) !important;
}

.nt-service-row__price {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: var(--nt-primary) !important;
}

.nt-service-row__price.nt-free {
  color: var(--nt-success) !important;
}

.nt-service-row__remove {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--nt-text-muted) !important;
  background: var(--nt-white) !important;
  border: 1px solid var(--nt-border) !important;
  border-radius: 6px !important;
  padding: 4px 10px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  text-decoration: none !important;
  margin-left: 12px !important;
}

.nt-service-row__remove:hover {
  color: #dc2626 !important;
  border-color: #dc2626 !important;
  background: #fef2f2 !important;
}

.nt-service-row__remove svg {
  width: 10px !important;
  height: 10px !important;
}

/* ── EXTRAS SECTION (below cart) ── */
.nt-cart-extras-wrap {
  margin-top: 24px !important;
}

.nt-extras-section {
  background: var(--nt-white) !important;
  border: 1px solid var(--nt-border) !important;
  border-radius: 16px !important;
  padding: 28px !important;
  margin-bottom: 16px !important;
}

.nt-extras-title {
  font-size: 20px !important;
  font-weight: 900 !important;
  color: var(--nt-primary) !important;
  margin: 0 0 8px 0 !important;
  border: none !important;
  padding: 0 !important;
}

.nt-extras-sub {
  color: var(--nt-text-muted) !important;
  font-size: 14px !important;
  margin: 0 0 20px 0 !important;
  line-height: 1.5 !important;
}

.nt-extras-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  gap: 14px !important;
}

.nt-extra-item {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 18px !important;
  background: var(--nt-bg) !important;
  border: 2px solid var(--nt-border) !important;
  border-radius: 14px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.nt-extra-item:hover {
  border-color: var(--nt-primary) !important;
  background: var(--nt-white) !important;
}

.nt-extra-item.nt-added {
  border-color: var(--nt-success) !important;
  background: #f0fdf4 !important;
  opacity: 0.7 !important;
  pointer-events: none !important;
}

.nt-extra-name {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 12px !important;
}

.nt-extra-name strong {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: var(--nt-primary) !important;
  line-height: 1.3 !important;
}

.nt-extra-price {
  font-weight: 800 !important;
  color: var(--nt-success) !important;
  font-size: 14px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

.nt-extra-price.nt-free {
  color: var(--nt-success) !important;
}

.nt-extra-desc {
  font-size: 13px !important;
  color: var(--nt-text-muted) !important;
  line-height: 1.4 !important;
}

.nt-extra-add-row {
  margin-top: 8px !important;
}

.nt-extra-add-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 36px !important;
  padding: 0 18px !important;
  background: var(--nt-primary) !important;
  color: var(--nt-white) !important;
  border: none !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: background 0.15s !important;
}

.nt-extra-add-btn:hover {
  background: var(--nt-primary-hover) !important;
}

/* Warranty section */
.nt-warranty-section {
  background: #eff6ff !important;
  border: 1px solid #93c5fd !important;
  border-radius: 14px !important;
  padding: 22px !important;
  margin-bottom: 16px !important;
}

.nt-warranty-header {
  display: flex !important;
  align-items: flex-start !important;
  gap: 16px !important;
}

.nt-warranty-icon {
  font-size: 32px !important;
  flex-shrink: 0 !important;
}

.nt-warranty-content {
  flex: 1 !important;
}

.nt-warranty-title {
  font-size: 17px !important;
  font-weight: 900 !important;
  color: var(--nt-primary) !important;
  margin: 0 0 6px 0 !important;
}

.nt-warranty-desc {
  font-size: 14px !important;
  color: var(--nt-text-muted) !important;
  margin: 0 0 14px 0 !important;
  line-height: 1.5 !important;
}

.nt-warranty-check {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

.nt-warranty-btn {
  height: 40px !important;
  padding: 0 22px !important;
  font-size: 14px !important;
  background: var(--nt-primary) !important;
  color: var(--nt-white) !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}

.nt-warranty-price {
  font-weight: 900 !important;
  color: var(--nt-success) !important;
  font-size: 16px !important;
}

/* Cart Responsive - Tablet */
@media (max-width: 991px) {
  body.woocommerce-cart .kadence-woo-cart-form-wrap {
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  body.woocommerce-cart form.woocommerce-cart-form {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
  }
  body.woocommerce-cart .cart-collaterals {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
  }
}

/* ============================================================
 * 6. WOOCOMMERCE CHECKOUT (Blocks)
 * ============================================================
 * CONSOLIDATED v14 - Single source of truth for checkout styles
 * ============================================================ */

/* Hide entry-hero */
body.woocommerce-checkout .entry-hero,
body.woocommerce-checkout section.entry-hero,
body.woocommerce-checkout .page-hero-section,
body.woocommerce-checkout section.page-hero-section,
body.woocommerce-checkout .entry-hero-container-inner,
body.woocommerce-checkout .hero-section-overlay,
body.woocommerce-checkout .entry-header {
  display: none !important;
  min-height: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.woocommerce-checkout #primary.content-area {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

body.woocommerce-checkout .woocommerce {
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Hide price breakdown */
.nt-order-breakdown {
  display: none !important;
}

/**
 * ============================================================
 * CHECKOUT LAYOUT - FINAL FIX
 * ============================================================
 * 
 * IN nt-enhancements.css:
 * 1. DELETE lines 1782 to end of file (all the v15/v16 patches)
 * 2. REPLACE lines 1206-1581 (checkout section) with this code
 * 
 * ============================================================
 */

/* ── Grid Layout ── */
.wc-block-checkout,
.wc-block-components-sidebar-layout.wc-block-checkout {
  --wc-blocks-checkout-sidebar-width: 380px !important;
}

html body.woocommerce-checkout .wc-block-components-sidebar-layout,
body.woocommerce-checkout .wc-block-components-sidebar-layout,
.wc-block-components-sidebar-layout {
  display: grid !important;
  grid-template-columns: 1fr 380px !important;
  gap: 20px !important;
  align-items: flex-start !important;
  max-width: 860px !important;
  margin: 20px auto !important;
  padding: 0 16px !important;
  box-sizing: border-box !important;
}

/* Left column */
.wc-block-components-sidebar-layout > .wc-block-components-main {
  min-width: 0 !important;
  max-width: none !important;
  grid-column: 1 !important;
}

/* Right column - Sidebar */
html body.woocommerce-checkout .wc-block-components-sidebar,
body.woocommerce-checkout .wc-block-components-sidebar,
.wc-block-components-sidebar {
  grid-column: 2 !important;
  width: 380px !important;
  min-width: 360px !important;
  max-width: 380px !important;
  position: sticky !important;
  top: 20px !important;
  align-self: flex-start !important;
}

/* Order summary card */
.wc-block-components-sidebar__inner,
.wc-block-checkout__sidebar > * {
  background: var(--nt-white, #ffffff) !important;
  border-radius: 14px !important;
  border: none !important;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.06),
    0 6px 20px rgba(30, 58, 95, 0.07) !important;
  overflow: hidden !important;
}

/* Order summary header */
.wc-block-components-checkout-order-summary__title
  .wc-block-components-panel__button,
.wc-block-components-order-summary__button {
  background: var(--nt-primary, #1e3a5f) !important;
  color: var(--nt-white, #ffffff) !important;
  border: none !important;
  padding: 14px 18px !important;
  width: 100% !important;
  cursor: pointer !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.wc-block-components-checkout-order-summary__title
  .wc-block-components-panel__button-title,
.wc-block-components-order-summary__button
  .wc-block-components-panel__button-title {
  font-size: 12px !important;
  font-weight: 900 !important;
  color: var(--nt-white, #ffffff) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

/* Order summary content */
.wc-block-components-checkout-order-summary__content {
  padding: 16px !important;
}

/* ── ORDER SUMMARY ITEM ── */
.wc-block-components-order-summary-item {
  display: grid !important;
  grid-template-columns: 60px 1fr !important;
  grid-template-rows: auto auto !important;
  gap: 6px 12px !important;
  align-items: start !important;
  padding: 14px 0 !important;
  border-bottom: 1px solid var(--nt-border, #e5e7eb) !important;
}

.wc-block-components-order-summary-item:last-child {
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

/* Image container */
.wc-block-components-order-summary-item__image {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  position: relative !important;
  width: 60px !important;
  height: 60px !important;
  background: var(--nt-bg, #f3f4f6) !important;
  border-radius: 10px !important;
  padding: 5px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

.wc-block-components-order-summary-item__image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  border-radius: 6px !important;
}

/* Quantity badge */
.wc-block-components-order-summary-item__quantity {
  position: absolute !important;
  top: -5px !important;
  right: -5px !important;
  width: 20px !important;
  height: 20px !important;
  background: var(--nt-primary, #1e3a5f) !important;
  color: var(--nt-white, #ffffff) !important;
  border-radius: 50% !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 5px rgba(30, 58, 95, 0.3) !important;
  z-index: 2 !important;
}

/* Description area */
.wc-block-components-order-summary-item__description {
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  min-width: 0 !important;
}

/* Name + price row */
.wc-block-components-order-summary-item__description > div:first-child {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 10px !important;
}

/* Product name */
.wc-block-components-product-name {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--nt-primary, #1e3a5f) !important;
  line-height: 1.3 !important;
  flex: 1 !important;
  word-break: normal !important;
}

/* Prices */
.wc-block-components-order-summary-item__total-price {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: var(--nt-primary, #1e3a5f) !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

.wc-block-components-order-summary-item__individual-prices {
  font-size: 11px !important;
  color: var(--nt-text-muted, #6b7280) !important;
}

/* ── PRODUCT DETAILS - LEFT ALIGNED, STACKED ── */
.wc-block-components-product-metadata {
  grid-column: 2 !important;
  grid-row: 2 !important;
  margin-top: 6px !important;
  padding-top: 8px !important;
  border-top: 1px solid #f3f4f6 !important;
}

.wc-block-components-product-details {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.wc-block-components-product-details__item {
  display: block !important;
  margin-bottom: 6px !important;
  padding-bottom: 6px !important;
  border-bottom: 1px solid #f8f8f8 !important;
}

.wc-block-components-product-details__item:last-child {
  border-bottom: none !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.wc-block-components-product-details__name {
  display: block !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  color: #888 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 2px !important;
}

.wc-block-components-product-details__value {
  display: block !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #1e3a5f !important;
  text-align: left !important;
  line-height: 1.35 !important;
}

/* ── TOTALS ── */
.wc-block-components-totals-wrapper {
  padding: 0 16px !important;
}

.wc-block-components-totals-item {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 8px 0 !important;
  border-bottom: 1px solid #f3f4f6 !important;
}

.wc-block-components-totals-item:last-child {
  border-bottom: none !important;
}

.wc-block-components-totals-item__label {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--nt-text-muted, #6b7280) !important;
}

.wc-block-components-totals-item__value {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--nt-primary, #1e3a5f) !important;
}

/* Total row */
.wc-block-components-totals-footer-item {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 14px 16px !important;
  margin: 10px 0 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background: rgba(30, 58, 95, 0.04) !important;
  border-top: 2px solid var(--nt-primary, #1e3a5f) !important;
}

.wc-block-components-totals-footer-item
  .wc-block-components-totals-item__label {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: var(--nt-primary, #1e3a5f) !important;
}

.wc-block-components-totals-footer-item
  .wc-block-components-totals-item__value {
  font-size: 20px !important;
  font-weight: 900 !important;
  color: var(--nt-primary, #1e3a5f) !important;
}

/* Coupon section - clean */
.wc-block-components-totals-coupon {
  border: none !important;
  margin: 0 !important;
  padding: 10px 0 !important;
}

.wc-block-components-panel {
  border: none !important;
}

.wc-block-components-panel__button {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* ── STEP CARDS ── */
.wc-block-components-checkout-step {
  background: var(--nt-white, #ffffff) !important;
  border-radius: 12px !important;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.04),
    0 4px 12px rgba(30, 58, 95, 0.04) !important;
  padding: 18px 20px !important;
  margin-bottom: 12px !important;
}

.wc-block-components-checkout-step__title {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: var(--nt-primary, #1e3a5f) !important;
  margin: 0 0 6px 0 !important;
}

.wc-block-components-checkout-step__description {
  font-size: 13px !important;
  color: var(--nt-text-muted, #6b7280) !important;
  margin: 0 !important;
}

/* Form fields */
.wc-block-components-text-input input,
.wc-block-components-textarea textarea {
  border: 1.5px solid var(--nt-border, #e5e7eb) !important;
  border-radius: 8px !important;
  padding: 12px 14px !important;
  font-size: 14px !important;
  transition:
    border-color 0.2s,
    box-shadow 0.2s !important;
}

.wc-block-components-text-input input:focus,
.wc-block-components-textarea textarea:focus {
  border-color: var(--nt-primary, #1e3a5f) !important;
  box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.1) !important;
  outline: none !important;
}

/* ── CHECKOUT ACTIONS - PLACE ORDER & RETURN ── */
.wc-block-checkout__actions {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin-top: 20px !important;
  padding-top: 16px !important;
  border-top: 1px solid var(--nt-border, #e5e7eb) !important;
}

.wc-block-checkout__actions_row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  width: 100% !important;
}

/* Return to cart link */
.wc-block-components-checkout-return-to-cart-button,
a[href*="cart"] {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--nt-primary, #1e3a5f) !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

.wc-block-components-checkout-return-to-cart-button:hover {
  text-decoration: underline !important;
}

/* Place order button */
.wc-block-components-checkout-place-order-button {
  background: var(--nt-success, #10b981) !important;
  color: var(--nt-white, #ffffff) !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 14px 28px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  flex-shrink: 0 !important;
}

.wc-block-components-checkout-place-order-button:hover {
  background: var(--nt-success-hover, #059669) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
}

/* ── CHECKOUT RESPONSIVE ── */
@media (max-width: 860px) {
  html body.woocommerce-checkout .wc-block-components-sidebar-layout,
  body.woocommerce-checkout .wc-block-components-sidebar-layout,
  .wc-block-components-sidebar-layout {
    grid-template-columns: 1fr !important;
    max-width: 480px !important;
    gap: 16px !important;
  }

  html body.woocommerce-checkout .wc-block-components-sidebar,
  body.woocommerce-checkout .wc-block-components-sidebar,
  .wc-block-components-sidebar {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    position: static !important;
    order: -1 !important;
  }

  .wc-block-checkout__actions,
  .wc-block-checkout__actions_row {
    flex-direction: column !important;
    gap: 12px !important;
  }

  .wc-block-components-checkout-place-order-button {
    width: 100% !important;
    order: -1 !important;
  }
}
/* ============================================================
 * 7. BRANDS SECTION
 * ============================================================ */

.nt-brands-container {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 20px !important;
  padding: 40px 0 !important;
}

.nt-brand-logo {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
  background: var(--nt-white, #ffffff) !important;
  border-radius: var(--nt-radius, 14px) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  transition:
    transform 0.2s,
    box-shadow 0.2s !important;
}

.nt-brand-logo:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

.nt-brand-logo img {
  max-height: 40px !important;
  width: auto !important;
  object-fit: contain !important;
}

@media (max-width: 991px) {
  .nt-brands-container {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

@media (max-width: 768px) {
  .nt-brands-container {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 480px) {
  .nt-brands-container {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ============================================================
 * 8. FIND A FITTER - QUANTITY INPUT STYLING
 * ============================================================ */

/* Hide the "Qty" label that appears next to buttons */
.nt-qty-hint,
span.nt-qty-hint,
.nt-qty-wrap > span.nt-qty-hint {
  display: none !important;
  visibility: hidden !important;
  position: absolute !important;
  left: -9999px !important;
}

/* Quantity wrapper */
.nt-qty-wrap {
  display: inline-flex !important;
  align-items: stretch !important;
  border: 2px solid var(--nt-border, #e5e7eb) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  background: var(--nt-white, #ffffff) !important;
  height: 40px !important;
  gap: 0 !important;
}

/* Plus/Minus buttons */
.nt-qty-wrap .nt-qty-btn,
button.nt-qty-btn.nt-qty-minus,
button.nt-qty-btn.nt-qty-plus {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: var(--nt-bg, #f9fafb) !important;
  border: none !important;
  border-radius: 0 !important;
  color: var(--nt-primary, #1e3a5f) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.15s ease !important;
}

.nt-qty-wrap .nt-qty-btn:hover {
  background: var(--nt-primary, #1e3a5f) !important;
  color: var(--nt-white, #ffffff) !important;
}

.nt-qty-wrap .nt-qty-btn:disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
}

/* Input field */
.nt-qty-wrap .nt-qty-input,
input.nt-qty-input[type="number"] {
  width: 48px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  border-left: 1px solid var(--nt-border, #e5e7eb) !important;
  border-right: 1px solid var(--nt-border, #e5e7eb) !important;
  border-radius: 0 !important;
  text-align: center !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--nt-primary, #1e3a5f) !important;
  background: var(--nt-white, #ffffff) !important;
  -moz-appearance: textfield !important;
}

.nt-qty-wrap .nt-qty-input::-webkit-outer-spin-button,
.nt-qty-wrap .nt-qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

/* ============================================================
 * 9. CART TOTALS - SERVICES WITH REMOVE BUTTONS
 * ============================================================ */

.nt-svc-row th {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

.nt-svc-name {
  font-weight: 600 !important;
  color: var(--nt-primary, #1e3a5f) !important;
  font-size: 13px !important;
}

.nt-svc-rm {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  padding: 0 !important;
  background: #fee2e2 !important;
  border: none !important;
  border-radius: 4px !important;
  color: #dc2626 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  flex-shrink: 0 !important;
}

.nt-svc-rm:hover {
  background: #dc2626 !important;
  color: #ffffff !important;
}

/* ============================================================
 * 10. UTILITIES
 * ============================================================ */

.nt-hidden {
  display: none !important;
}

.nt-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/**
 * ============================================================
 * NT FINAL FIXES - CSS PATCH
 * ============================================================
 * 
 * APPEND TO END OF nt-enhancements.css
 * 
 * FIXES:
 * 1. Find-a-fitter: Green border on selected services
 * 2. Checkout: Wider layout, better button spacing
 * 
 * ============================================================
 */

/* ============================================================
 * 1. FIND-A-FITTER - SELECTED SERVICE GREEN BORDER
 * ============================================================ */

/* Selected state for services on find-a-fitter page */
.nt-extra-item.selected {
  border-color: #10b981 !important;
  border-width: 3px !important;
  background: #ecfdf5 !important;
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.15) !important;
  position: relative !important;
}

/* Checkmark badge for selected state */
.nt-extra-item.selected::after {
  content: "✓" !important;
  position: absolute !important;
  top: -10px !important;
  right: -10px !important;
  width: 26px !important;
  height: 26px !important;
  background: #10b981 !important;
  color: #ffffff !important;
  border-radius: 50% !important;
  font-size: 14px !important;
  font-weight: bold !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.4) !important;
  z-index: 10 !important;
}

/* ============================================================
 * 2. CHECKOUT - WIDER LAYOUT (override cramped 380px)
 * ============================================================ */

/* Main grid - wider */
html body.woocommerce-checkout .wc-block-components-sidebar-layout,
body.woocommerce-checkout .wc-block-components-sidebar-layout,
.wc-block-components-sidebar-layout.wc-block-checkout.is-large,
.wc-block-components-sidebar-layout.wc-block-checkout,
.wc-block-components-sidebar-layout {
  display: grid !important;
  grid-template-columns: 1fr 420px !important;
  gap: 40px !important;
  align-items: flex-start !important;
  max-width: 1040px !important;
  margin: 24px auto !important;
  padding: 0 32px !important;
  box-sizing: border-box !important;
}

/* Sidebar wider */
html body.woocommerce-checkout .wc-block-components-sidebar,
body.woocommerce-checkout .wc-block-components-sidebar,
.wc-block-components-sidebar {
  width: 420px !important;
  min-width: 400px !important;
  max-width: 420px !important;
}

/* Main content area */
html body.woocommerce-checkout .wc-block-components-main,
body.woocommerce-checkout .wc-block-components-main,
.wc-block-components-main {
  min-width: 0 !important;
  max-width: none !important;
}

/* ============================================================
 * 3. CHECKOUT ACTIONS - PLACE ORDER & RETURN TO CART
 * ============================================================ */

/* Actions container - horizontal layout with space between */
.wc-block-checkout__actions,
.wp-block-woocommerce-checkout-actions-block {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 32px !important;
  margin-top: 28px !important;
  padding-top: 24px !important;
  border-top: 1px solid #e5e7eb !important;
  flex-wrap: nowrap !important;
}

/* The inner row */
.wc-block-checkout__actions_row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 32px !important;
  width: 100% !important;
  flex-wrap: nowrap !important;
}

/* Return to cart link - LEFT side */
.wc-block-components-checkout-return-to-cart-button {
  order: 1 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #1e3a5f !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  white-space: nowrap !important;
  padding: 14px 0 !important;
  flex-shrink: 0 !important;
}

.wc-block-components-checkout-return-to-cart-button:hover {
  color: #2d4a70 !important;
  text-decoration: underline !important;
}

/* Place order button - RIGHT side */
.wc-block-components-checkout-place-order-button {
  order: 2 !important;
  background: #10b981 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 16px 36px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  min-width: 200px !important;
  flex-shrink: 0 !important;
}

.wc-block-components-checkout-place-order-button:hover {
  background: #059669 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35) !important;
}

/* ============================================================
 * 4. CART TOTALS - SERVICE ROWS (unified styling)
 * ============================================================ */

.nt-service-row {
  border-bottom: 1px solid #f3f4f6 !important;
}

.nt-service-row th,
.nt-svc-row th {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 12px 0 !important;
  font-weight: normal !important;
}

.nt-service-row td,
.nt-svc-row td {
  text-align: right !important;
  font-weight: 600 !important;
  color: #1e3a5f !important;
  padding: 12px 0 !important;
}

/* ============================================================
 * 5. RESPONSIVE ADJUSTMENTS
 * ============================================================ */

@media (max-width: 960px) {
  html body.woocommerce-checkout .wc-block-components-sidebar-layout,
  body.woocommerce-checkout .wc-block-components-sidebar-layout,
  .wc-block-components-sidebar-layout.wc-block-checkout,
  .wc-block-components-sidebar-layout {
    grid-template-columns: 1fr !important;
    max-width: 560px !important;
    gap: 24px !important;
    padding: 0 20px !important;
  }

  html body.woocommerce-checkout .wc-block-components-sidebar,
  body.woocommerce-checkout .wc-block-components-sidebar,
  .wc-block-components-sidebar {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    position: static !important;
    order: -1 !important;
  }

  .wc-block-checkout__actions,
  .wc-block-checkout__actions_row {
    flex-direction: column-reverse !important;
    gap: 16px !important;
    align-items: stretch !important;
  }

  .wc-block-components-checkout-place-order-button {
    width: 100% !important;
    min-width: 0 !important;
  }

  .wc-block-components-checkout-return-to-cart-button {
    justify-content: center !important;
  }
}

/**
 * ============================================================
 * NT COMPREHENSIVE FIX - CSS
 * ============================================================
 * 
 * APPEND TO END OF nt-enhancements.css
 * 
 * This uses higher specificity to override WooCommerce's CSS
 * 
 * ============================================================
 */

/* ============================================================
 * 1. CHECKOUT LAYOUT - OVERRIDE WOOCOMMERCE WIDTH: 65%
 * ============================================================ */

/* Main column - override WooCommerce's width: 65% */
html
  body.woocommerce-checkout
  .wc-block-components-sidebar-layout
  .wc-block-components-main,
body.woocommerce-checkout
  .wc-block-components-sidebar-layout
  .wc-block-components-main,
.wc-block-components-sidebar-layout.wc-block-checkout .wc-block-components-main,
.wc-block-components-sidebar-layout .wc-block-checkout__main,
.wc-block-components-main.wc-block-checkout__main {
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  flex: 1 !important;
  padding-right: 0 !important;
}

/* Sidebar - override WooCommerce's width: 35% */
html
  body.woocommerce-checkout
  .wc-block-components-sidebar-layout
  .wc-block-components-sidebar,
body.woocommerce-checkout
  .wc-block-components-sidebar-layout
  .wc-block-components-sidebar,
.wc-block-components-sidebar-layout.wc-block-checkout
  .wc-block-components-sidebar,
.wc-block-components-sidebar.wc-block-checkout__sidebar {
  width: 380px !important;
  min-width: 360px !important;
  max-width: 400px !important;
  flex: none !important;
}

/* The main grid layout */
html
  body.woocommerce-checkout
  .wc-block-components-sidebar-layout.wc-block-checkout,
body.woocommerce-checkout .wc-block-components-sidebar-layout.wc-block-checkout,
.wc-block-components-sidebar-layout.wc-block-checkout.is-large {
  display: grid !important;
  grid-template-columns: 1fr 380px !important;
  gap: 32px !important;
  max-width: 900px !important;
  margin: 24px auto !important;
  padding: 0 24px !important;
  box-sizing: border-box !important;
  align-items: flex-start !important;
}

/* ============================================================
 * 2. CHECKOUT ACTIONS - FIX OVERLAP
 * ============================================================ */

/* Actions container */
html body .wc-block-checkout__actions,
body .wc-block-checkout__actions,
.wp-block-woocommerce-checkout-actions-block {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
  margin-top: 24px !important;
  padding-top: 20px !important;
  border-top: 1px solid #e5e7eb !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
}

/* Inner row */
html body .wc-block-checkout__actions_row,
body .wc-block-checkout__actions_row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
  width: 100% !important;
  flex-wrap: nowrap !important;
}

/* Return to cart - remove the arrow causing overlap */
html body .wc-block-components-checkout-return-to-cart-button,
body .wc-block-components-checkout-return-to-cart-button,
.wc-block-components-checkout-return-to-cart-button {
  order: 1 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #1e3a5f !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
  padding: 12px 16px !important;
  background: transparent !important;
  border: 2px solid #e5e7eb !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
  flex-shrink: 0 !important;
}

html body .wc-block-components-checkout-return-to-cart-button:hover,
body .wc-block-components-checkout-return-to-cart-button:hover {
  border-color: #1e3a5f !important;
  background: #f9fafb !important;
  color: #1e3a5f !important;
  text-decoration: none !important;
}

/* Hide the SVG arrow that causes overlap */
.wc-block-components-checkout-return-to-cart-button svg {
  display: none !important;
}

/* Place order button */
html body .wc-block-components-checkout-place-order-button,
body .wc-block-components-checkout-place-order-button,
.wc-block-components-checkout-place-order-button {
  order: 2 !important;
  background: #10b981 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 14px 28px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  min-width: 160px !important;
  flex-shrink: 0 !important;
}

html body .wc-block-components-checkout-place-order-button:hover,
body .wc-block-components-checkout-place-order-button:hover {
  background: #059669 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
}

/* ============================================================
 * 3. CART TOTALS - SERVICE ROW STYLING
 * ============================================================ */

/* Service rows with remove button */
.cart_totals table tr.nt-service-row th,
.cart_totals table tr.nt-svc-row th,
tr.nt-service-row th,
tr.nt-svc-row th {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 10px 0 !important;
  font-weight: 400 !important;
  background: transparent !important;
}

/* Service name */
.nt-service-row .nt-service-name,
.nt-svc-row .nt-svc-name,
.nt-service-name,
.nt-svc-name {
  font-weight: 600 !important;
  color: #1e3a5f !important;
  font-size: 14px !important;
}

/* Remove button - unified style */
.nt-service-row .nt-service-remove,
.nt-svc-row .nt-svc-rm,
.nt-service-remove,
.nt-svc-rm,
.nt-remove-service-btn,
button.nt-remove-service-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  padding: 0 !important;
  margin: 0 0 0 8px !important;
  background: #fee2e2 !important;
  border: none !important;
  border-radius: 50% !important;
  color: #dc2626 !important;
  font-size: 14px !important;
  font-weight: bold !important;
  line-height: 1 !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
  flex-shrink: 0 !important;
}

.nt-service-row .nt-service-remove:hover,
.nt-svc-row .nt-svc-rm:hover,
.nt-service-remove:hover,
.nt-svc-rm:hover,
.nt-remove-service-btn:hover,
button.nt-remove-service-btn:hover {
  background: #dc2626 !important;
  color: #fff !important;
}

/* Hide SVG inside remove button, use text × instead */
.nt-svc-rm svg,
.nt-service-remove svg {
  display: none !important;
}

/* ============================================================
 * 4. FIND-A-FITTER - SELECTED SERVICE GREEN BORDER
 * ============================================================ */

.nt-extra-item.selected {
  border-color: #10b981 !important;
  border-width: 3px !important;
  background: #ecfdf5 !important;
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.15) !important;
  position: relative !important;
}

.nt-extra-item.selected::after {
  content: "✓" !important;
  position: absolute !important;
  top: -10px !important;
  right: -10px !important;
  width: 26px !important;
  height: 26px !important;
  background: #10b981 !important;
  color: #ffffff !important;
  border-radius: 50% !important;
  font-size: 14px !important;
  font-weight: bold !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.4) !important;
  z-index: 10 !important;
}

/* ============================================================
 * 5. RESPONSIVE
 * ============================================================ */

@media (max-width: 900px) {
  html
    body.woocommerce-checkout
    .wc-block-components-sidebar-layout.wc-block-checkout,
  body.woocommerce-checkout
    .wc-block-components-sidebar-layout.wc-block-checkout,
  .wc-block-components-sidebar-layout.wc-block-checkout.is-large {
    display: flex !important;
    flex-direction: column !important;
    max-width: 520px !important;
    gap: 20px !important;
  }

  html
    body.woocommerce-checkout
    .wc-block-components-sidebar-layout
    .wc-block-components-main,
  .wc-block-components-main.wc-block-checkout__main {
    width: 100% !important;
    order: 2 !important;
  }

  html
    body.woocommerce-checkout
    .wc-block-components-sidebar-layout
    .wc-block-components-sidebar,
  .wc-block-components-sidebar.wc-block-checkout__sidebar {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    order: 1 !important;
  }

  html body .wc-block-checkout__actions,
  html body .wc-block-checkout__actions_row {
    flex-direction: column-reverse !important;
    gap: 12px !important;
  }

  html body .wc-block-components-checkout-place-order-button {
    width: 100% !important;
    min-width: 0 !important;
  }

  html body .wc-block-components-checkout-return-to-cart-button {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* ============================================================
 * FIX 1: CART TOTALS - SERVICE ROW ALIGNMENT
 * ============================================================
 *
 * Problem: tr.nt-service-row th uses `display: flex` which collapses
 * the table-cell to content width → narrow label + tiny contained border.
 * Fix: restore full-width table-cell behaviour while keeping flexbox
 * for the inner content alignment.
 * ============================================================ */

/* Force th to fill the full column width (table-cell semantics) */
.cart_totals table tr.nt-service-row th,
.cart_totals table tr.nt-svc-row th,
tr.nt-service-row th,
tr.nt-svc-row th {
  display: table-cell !important; /* restore table-cell so border/width is correct */
  width: 100% !important;
  padding: 12px 18px !important; /* match standard .cart_totals th padding */
  vertical-align: middle !important;
  border-bottom: 1px solid var(--nt-border, #e5e7eb) !important;
  background: transparent !important;
}

/* Use an inner wrapper for the flex layout (name ↔ remove button) */
.cart_totals table tr.nt-service-row th > *,
tr.nt-service-row th > * {
  display: inline !important;
}

/* Replace the th-level flex with a flex container inside it */
.nt-service-name-wrap,
.cart_totals tr.nt-service-row th .nt-service-name-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  width: 100% !important;
}

/* Price td - match standard padding */
.cart_totals table tr.nt-service-row td,
.cart_totals table tr.nt-svc-row td,
tr.nt-service-row td,
tr.nt-svc-row td {
  padding: 12px 18px !important;
  text-align: right !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--nt-primary, #1e3a5f) !important;
  border-bottom: 1px solid var(--nt-border, #e5e7eb) !important;
  background: transparent !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
}

/* Service name text */
.nt-service-row .nt-service-name,
.nt-service-name {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--nt-primary, #1e3a5f) !important;
  flex: 1 !important;
}

/* Remove button — keep existing pill style, just ensure it sits inline */
.nt-service-row .nt-service-remove,
.nt-service-remove,
.nt-remove-service-btn,
button.nt-remove-service-btn {
  flex-shrink: 0 !important;
  margin-left: auto !important;
}

/* ============================================================
 * FIX 2: CHECKOUT - REMOVE EXCESS SPACING
 * ============================================================
 *
 * Problem: Kadence's entry-content / article.page wrapper adds
 * significant padding around the WooCommerce blocks checkout,
 * creating the double whitespace (outer beige → inner white card
 * gap). The grid also has a generous top margin.
 * ============================================================ */

/* Strip padding from Kadence page wrappers on checkout */
body.woocommerce-checkout .entry-content,
body.woocommerce-checkout .entry-content.wp-block-post-content,
body.woocommerce-checkout article.page,
body.woocommerce-checkout .page-layout-default .content-area,
body.woocommerce-checkout #content .entry-content,
body.woocommerce-checkout .wp-block-post-content {
  padding: 0 !important;
  margin: 0 !important;
}

body.woocommerce-checkout #primary,
body.woocommerce-checkout #primary.site-main,
body.woocommerce-checkout .site-main,
body.woocommerce-checkout #content,
body.woocommerce-checkout #main {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
}

/* Reduce checkout grid top margin and tighten padding */
html
  body.woocommerce-checkout
  .wc-block-components-sidebar-layout.wc-block-checkout,
body.woocommerce-checkout .wc-block-components-sidebar-layout.wc-block-checkout,
.wc-block-components-sidebar-layout.wc-block-checkout.is-large {
  margin: 12px auto 32px !important; /* was 24px top */
  padding: 0 16px !important; /* was 0 24px */
}

/* Also target the non-is-large variant */
html body.woocommerce-checkout .wc-block-components-sidebar-layout,
body.woocommerce-checkout .wc-block-components-sidebar-layout {
  margin: 12px auto 32px !important;
  padding: 0 16px !important;
}

/* ============================================================
 * FIX A: CHECKOUT — STRIP ALL KADENCE WRAPPER SPACING
 * ============================================================
 *
 * Kadence wraps checkout in:
 *   #primary.content-area > article.type-page > .entry-content
 * Each layer can contribute padding/margin. Also the WooCommerce
 * block renders with class `alignwide` which Gutenberg/Kadence
 * gives negative side margins to break out of the content column
 * — that can create a top shift.  We zero everything here with
 * high-specificity `html body` prefix so it beats Kadence's own
 * !important rules.
 * ============================================================ */

/* Outer site structure */
html body.woocommerce-checkout #primary,
html body.woocommerce-checkout #primary.content-area,
html body.woocommerce-checkout .site-main,
html body.woocommerce-checkout #main,
html body.woocommerce-checkout #content {
  padding: 0 !important;
  margin: 0 !important;
}

/* Article and entry wrappers */
html body.woocommerce-checkout article,
html body.woocommerce-checkout article.type-page,
html body.woocommerce-checkout .entry-content,
html body.woocommerce-checkout .entry-content.wp-block-post-content,
html body.woocommerce-checkout .wp-block-post-content,
html body.woocommerce-checkout .post-content {
  padding: 0 !important;
  margin: 0 !important;
}

/* The WooCommerce blocks checkout div itself (alignwide adds margin) */
html body.woocommerce-checkout .wp-block-woocommerce-checkout,
html body.woocommerce-checkout .wc-block-checkout,
html body.woocommerce-checkout .woocommerce {
  margin: 0 !important;
  padding: 0 !important;
  max-width: 100% !important;
}

/* The two-column grid — tight top margin, sensible padding */
html
  body.woocommerce-checkout
  .wc-block-components-sidebar-layout.wc-block-checkout.is-large,
html
  body.woocommerce-checkout
  .wc-block-components-sidebar-layout.wc-block-checkout,
html body.woocommerce-checkout .wc-block-components-sidebar-layout,
body.woocommerce-checkout .wc-block-components-sidebar-layout {
  margin: 0 auto 40px !important; /* was 24px top */
  padding: 24px 24px 0 !important; /* top breathing room only from grid itself */
}

/* ============================================================
 * FIX B: CHECKOUT INPUTS — PROPER FLOATING LABELS
 * ============================================================
 *
 * WooCommerce Blocks renders inputs as:
 *   <div class="wc-block-components-text-input">
 *     <input placeholder=" " />      ← space placeholder is key
 *     <label>Field name</label>
 *   </div>
 *
 * The label sits ABSOLUTELY inside the input.  With only 12px
 * padding on the input the floating label and the typed text
 * occupy the same vertical space → overlap.
 *
 * Fix strategy:
 *   1. Increase input top-padding to 22px so typed text clears
 *      the floated mini-label that sits at top: 6px.
 *   2. Resting state: label centered vertically (placeholder shown).
 *   3. Active/filled state: label shrinks & moves to top-left.
 *   4. Override WC's red default label color — only actual error
 *      messages (the separate .wc-block-components-validation-error
 *      element) should be red.
 * ============================================================ */

/* Wrapper must be relative for absolute label */
.wc-block-components-text-input,
.wc-block-components-textarea {
  position: relative !important;
}

/* ── INPUT BASE ── */
.wc-block-components-text-input input,
.wc-block-components-text-input select,
.wc-block-components-textarea textarea {
  display: block !important;
  width: 100% !important;
  padding: 22px 14px 8px !important; /* 22px top creates room for floated label */
  height: auto !important;
  min-height: 54px !important;
  border: 1.5px solid var(--nt-border, #e5e7eb) !important;
  border-radius: 8px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--nt-primary, #1e3a5f) !important;
  background: #fff !important;
  box-sizing: border-box !important;
  transition:
    border-color 0.2s,
    box-shadow 0.2s !important;
  outline: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

.wc-block-components-text-input input:focus,
.wc-block-components-textarea textarea:focus {
  border-color: var(--nt-primary, #1e3a5f) !important;
  box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.1) !important;
}

/* ── LABEL — RESTING (centered in the input, looks like placeholder) ── */
.wc-block-components-text-input label,
.wc-block-components-textarea label {
  position: absolute !important;
  left: 15px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #9ca3af !important; /* light gray — clearly a placeholder */
  pointer-events: none !important;
  transition:
    top 0.15s ease,
    transform 0.15s ease,
    font-size 0.15s ease,
    color 0.15s ease,
    font-weight 0.15s ease !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  max-width: calc(100% - 28px) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 1 !important;
}

/* ── LABEL — ACTIVE / FILLED (floated to top-left corner) ── */
/* When input is focused */
.wc-block-components-text-input input:focus + label,
.wc-block-components-textarea textarea:focus + label,
/* When input has a value (placeholder-shown trick — WC uses a space as placeholder) */
.wc-block-components-text-input input:not(:placeholder-shown) + label,
.wc-block-components-textarea textarea:not(:placeholder-shown) + label,
/* WC Blocks also adds .is-active class via JS */
.wc-block-components-text-input.is-active label,
.wc-block-components-textarea.is-active label {
  top: 8px !important;
  transform: translateY(0) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  color: #6b7280 !important; /* muted gray — not red */
  letter-spacing: 0.3px !important;
  text-transform: uppercase !important;
}

/* Focused state label gets primary color */
.wc-block-components-text-input input:focus + label,
.wc-block-components-textarea textarea:focus + label {
  color: var(--nt-primary, #1e3a5f) !important;
}

/* ── ERROR STATE ── */
/* Input border turns red on error, label stays gray (the separate
   validation error message below is already red — no need for label to be) */
.wc-block-components-text-input.has-error input,
.wc-block-components-text-input--has-error input {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}

/* Keep the floated label gray even in error state */
.wc-block-components-text-input.has-error input:not(:placeholder-shown) + label,
.wc-block-components-text-input--has-error
  input:not(:placeholder-shown)
  + label,
.wc-block-components-text-input.has-error input:focus + label,
.wc-block-components-text-input--has-error input:focus + label {
  color: #6b7280 !important;
}

/* Resting label in error state — keep muted, NOT red */
.wc-block-components-text-input.has-error label,
.wc-block-components-text-input--has-error label {
  color: #9ca3af !important;
}

/* The validation error MESSAGE beneath the field stays red */
.wc-block-components-validation-error p,
.wc-block-components-text-input ~ .wc-block-components-validation-error {
  color: #ef4444 !important;
  font-size: 12px !important;
  margin-top: 4px !important;
}

/* ── COUNTRY/REGION SELECT ── */
/* WC Blocks renders the country as a <select> not a text-input,
   so it doesn't have a floating label — give it consistent styling */
.wc-block-components-country-input .wc-block-components-select select,
.wc-block-components-select select {
  padding: 14px 36px 14px 14px !important;
  height: 54px !important;
  border: 1.5px solid var(--nt-border, #e5e7eb) !important;
  border-radius: 8px !important;
  font-size: 15px !important;
  color: var(--nt-primary, #1e3a5f) !important;
  background: #fff !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
}

.wc-block-components-country-input .wc-block-components-select select:focus,
.wc-block-components-select select:focus {
  border-color: var(--nt-primary, #1e3a5f) !important;
  box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.1) !important;
  outline: none !important;
}

/* Country label — no floating needed, render above */
.wc-block-components-country-input label,
.wc-block-components-select label {
  display: block !important;
  position: static !important;
  transform: none !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #6b7280 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
  margin-bottom: 6px !important;
}

/* ============================================================
 * MOBILE FIX 1: entry-content-wrap — strip Kadence padding
 * on cart + checkout pages at ALL breakpoints
 * ============================================================
 * Kadence's global inline stylesheet applies:
 *   .entry-content-wrap { padding: 2rem }
 *   @media (max-width:1024px) { padding: 2rem }
 *   @media (max-width:767px)  { padding: 1.5rem }
 * We need to zero this specifically on commerce pages.
 * ============================================================ */

body.woocommerce-cart .entry-content-wrap,
body.woocommerce-checkout .entry-content-wrap,
body.woocommerce-cart .entry-content,
body.woocommerce-checkout .entry-content,
body.woocommerce-cart .entry-content-wrap .entry-content,
body.woocommerce-checkout .entry-content-wrap .entry-content {
  padding: 0 !important;
  margin: 0 !important;
}

@media (max-width: 1024px) {
  body.woocommerce-cart .entry-content-wrap,
  body.woocommerce-checkout .entry-content-wrap,
  body.woocommerce-cart .entry-content,
  body.woocommerce-checkout .entry-content {
    padding: 0 !important;
    margin: 0 !important;
  }
}

@media (max-width: 767px) {
  body.woocommerce-cart .entry-content-wrap,
  body.woocommerce-checkout .entry-content-wrap,
  body.woocommerce-cart .entry-content,
  body.woocommerce-checkout .entry-content,
  body.woocommerce-cart .single-content,
  body.woocommerce-checkout .single-content {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ============================================================
 * MOBILE FIX 2: CHECKOUT — is-mobile sidebar (WC Blocks)
 * ============================================================
 * When WC Blocks detects a mobile viewport it adds .is-mobile
 * to .wc-block-components-sidebar-layout.  In this mode it
 * renders the Order Summary as a collapsible drawer/panel at
 * the TOP of the page (single-column stacked).
 *
 * Our existing rules force display:grid / 420px sidebar width
 * with !important — that breaks WC Blocks' own mobile JS
 * entirely, making the sidebar panel appear as an undismissable
 * full-height white overlay.
 *
 * Fix: when .is-mobile is present, fully hand control back to
 * WC Blocks and only clean up cosmetics we still want.
 * ============================================================ */

/* Reset grid to single column for mobile */
html body.woocommerce-checkout .wc-block-components-sidebar-layout.is-mobile,
body.woocommerce-checkout .wc-block-components-sidebar-layout.is-mobile,
.wc-block-components-sidebar-layout.is-mobile {
  display: block !important; /* let WC Blocks manage its own flex/block */
  grid-template-columns: unset !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
}

/* Release sidebar width constraints on mobile */
html
  body.woocommerce-checkout
  .wc-block-components-sidebar-layout.is-mobile
  .wc-block-components-sidebar,
body.woocommerce-checkout
  .wc-block-components-sidebar-layout.is-mobile
  .wc-block-components-sidebar,
.wc-block-components-sidebar-layout.is-mobile .wc-block-components-sidebar {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  position: static !important; /* don't fight WC Blocks sticky drawer */
  grid-column: unset !important;
}

/* Release main column on mobile */
html
  body.woocommerce-checkout
  .wc-block-components-sidebar-layout.is-mobile
  .wc-block-components-main,
.wc-block-components-sidebar-layout.is-mobile .wc-block-components-main {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding: 0 !important;
  grid-column: unset !important;
}

/* The inner form on mobile needs side padding */
.wc-block-components-sidebar-layout.is-mobile .wc-block-components-form,
.wc-block-components-sidebar-layout.is-mobile .wc-block-checkout__form {
  padding: 0 8px !important;
}

/* Order summary title bar (the toggle) — mobile */
.wc-block-components-sidebar-layout.is-mobile
  .wc-block-components-checkout-order-summary__title,
.wc-block-components-sidebar-layout.is-mobile
  .wc-block-components-panel__button {
  background: var(--nt-primary, #1e3a5f) !important;
  color: #fff !important;
  padding: 12px 16px !important;
  width: 100% !important;
  cursor: pointer !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  border: none !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

/* The expanded order summary content panel on mobile */
.wc-block-components-sidebar-layout.is-mobile
  .wc-block-components-checkout-order-summary__content {
  padding: 12px 16px !important;
  background: #fff !important;
  border-bottom: 1px solid var(--nt-border, #e5e7eb) !important;
}

/* Step cards padding on mobile - REDUCED */
.wc-block-components-sidebar-layout.is-mobile
  .wc-block-components-checkout-step {
  border-radius: 8px !important;
  margin: 8px 4px !important;
  padding: 12px 8px !important;
}

/* Checkout step title on mobile */
.wc-block-components-sidebar-layout.is-mobile
  .wc-block-components-checkout-step__title {
  padding: 10px 8px !important;
  font-size: 13px !important;
}

/* Checkout step description on mobile */
.wc-block-components-sidebar-layout.is-mobile
  .wc-block-components-checkout-step__description {
  font-size: 13px !important;
  padding: 0 8px !important;
  margin-bottom: 12px !important;
}

/* Checkout step content on mobile - FULL WIDTH */
.wc-block-components-sidebar-layout.is-mobile
  .wc-block-components-checkout-step__content {
  padding: 0 4px 14px !important;
  width: 100% !important;
}

/* Form inputs on mobile - FULL WIDTH */
.wc-block-components-sidebar-layout.is-mobile
  .wc-block-components-text-input {
  margin-bottom: 12px !important;
  width: 100% !important;
}

/* Address form grid on mobile - SINGLE COLUMN */
.wc-block-components-sidebar-layout.is-mobile
  .wc-block-components-address-form {
  display: block !important;
  width: 100% !important;
}

.wc-block-components-sidebar-layout.is-mobile
  .wc-block-components-address-form > div {
  width: 100% !important;
  max-width: 100% !important;
  margin-bottom: 12px !important;
}

/* Hide country field on mobile too */
.wc-block-components-sidebar-layout.is-mobile
  .wc-block-components-address-form__country,
.wc-block-components-sidebar-layout.is-mobile
  .wc-block-components-country-input {
  display: none !important;
}

/* Actions row on mobile — stack vertically */
.wc-block-components-sidebar-layout.is-mobile .wc-block-checkout__actions,
.wc-block-components-sidebar-layout.is-mobile .wc-block-checkout__actions_row {
  flex-direction: column-reverse !important;
  gap: 10px !important;
  padding: 16px !important;
  margin-top: 0 !important;
}

.wc-block-components-sidebar-layout.is-mobile
  .wc-block-components-checkout-place-order-button {
  width: 100% !important;
  min-width: 0 !important;
}

.wc-block-components-sidebar-layout.is-mobile
  .wc-block-components-checkout-return-to-cart-button {
  width: 100% !important;
  justify-content: center !important;
  border: 1.5px solid var(--nt-border, #e5e7eb) !important;
  border-radius: 8px !important;
  padding: 12px !important;
}

/* ============================================================
 * MOBILE FIX 3: CART — Update cart button + actions row
 * ============================================================
 * WooCommerce at max-width:719px forces td.actions buttons to
 * display:block; width:100%.  Our float:right on update_cart
 * fights this.  On mobile, stack coupon + update vertically
 * and make both buttons full-width.
 * ============================================================ */

@media (max-width: 767px) {
  /* td.actions — switch to vertical stack */
  body.woocommerce-cart td.actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: 14px 16px !important;
    align-items: stretch !important;
  }

  /* Coupon row — full width */
  body.woocommerce-cart .coupon {
    display: flex !important;
    width: 100% !important;
    gap: 8px !important;
  }

  body.woocommerce-cart .coupon input#coupon_code {
    flex: 1 !important;
    width: auto !important;
  }

  body.woocommerce-cart .coupon .button,
  body.woocommerce-cart .coupon button.button {
    flex-shrink: 0 !important;
    width: auto !important;
  }

  /* Update cart — full width, undo float */
  body.woocommerce-cart button[name="update_cart"] {
    float: none !important;
    width: 100% !important;
    height: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1.5px solid var(--nt-border, #e5e7eb) !important;
    background: transparent !important;
    color: var(--nt-text-muted, #6b7280) !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
  }

  body.woocommerce-cart button[name="update_cart"]:not(:disabled):hover {
    border-color: var(--nt-primary, #1e3a5f) !important;
    color: var(--nt-primary, #1e3a5f) !important;
  }

  /* Disabled update cart — clearly muted */
  body.woocommerce-cart button[name="update_cart"]:disabled {
    opacity: 0.35 !important;
    cursor: not-allowed !important;
  }

  /* Cart totals sticky → static on mobile */
  body.woocommerce-cart .cart-collaterals {
    position: static !important;
    width: 100% !important;
    max-width: none !important;
    flex: none !important;
  }
}

/* ============================================================
 * CHECKOUT DESIGN ENHANCEMENT + COUNTRY FIELD FIX
 * Append to end of nt-enhancements.css
 * ============================================================ */

/* ── 1. PAGE BACKGROUND ── */
/* Give the page a warm off-white so white cards float above it */

body.woocommerce-checkout {
  background-color: #f0f2f5 !important;
}

body.woocommerce-checkout .content-container.site-container,
body.woocommerce-checkout .content-wrap,
body.woocommerce-checkout #primary.content-area,
body.woocommerce-checkout .site-main,
body.woocommerce-checkout #main {
  background: transparent !important;
}

/* ── 2. CHECKOUT CONTAINER PADDING ── */
/* Restore subtle top breathing room that Kadence keeps stealing */

body.woocommerce-checkout .wc-block-components-sidebar-layout:not(.is-mobile) {
  margin-top: 24px !important;
  margin-bottom: 40px !important;
}

/* ── 3. STEP CARDS — ELEVATED DESIGN ── */
/* Stronger card appearance so steps feel purposeful, not floaty on white */

.wc-block-components-checkout-step {
  background: #ffffff !important;
  border-radius: 14px !important;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.06),
    0 6px 18px rgba(30, 58, 95, 0.08) !important;
  padding: 0 !important; /* reset — we control padding per zone */
  margin-bottom: 14px !important;
  overflow: visible !important; /* NEVER clip — needed for select dropdowns */
  border: 1px solid rgba(30, 58, 95, 0.07) !important;
}

/* Step heading zone — dark header strip */
.wc-block-components-checkout-step__heading {
  background: linear-gradient(135deg, #1e3a5f 0%, #254d80 100%) !important;
  border-radius: 13px 13px 0 0 !important;
  padding: 14px 20px !important;
  margin: 0 !important;
}

.wc-block-components-checkout-step__title {
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin: 0 !important;
  letter-spacing: 0.3px !important;
  text-transform: uppercase !important;
}

/* Step container (description + form fields) */
.wc-block-components-checkout-step__container {
  padding: 20px 20px 16px !important;
}

.wc-block-components-checkout-step__description {
  font-size: 13px !important;
  color: #6b7280 !important;
  margin: 0 0 16px 0 !important;
  line-height: 1.5 !important;
}

/* ── 4. ADDRESS FORM — FIX COUNTRY DROPDOWN OVERLAP ── */
/* WC Blocks renders the address form as a 2-col grid.
   The country select must never be clipped, and must
   have enough bottom gap before the name row below. */

.wc-block-components-address-form {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px 14px !important;
  overflow: visible !important;
}

/* Full-width fields */
.wc-block-components-address-form__country,
.wc-block-components-address-form__address_1,
.wc-block-components-address-form__address_2,
.wc-block-components-address-form__address_2-toggle,
.wc-block-components-address-form__address_2-hidden-input,
.wc-block-components-address-form__city,
.wc-block-components-address-form__phone {
  grid-column: 1 / -1 !important;
}

/* Half-width pairs */
.wc-block-components-address-form__first_name,
.wc-block-components-address-form__state {
  grid-column: 1 !important;
}

.wc-block-components-address-form__last_name,
.wc-block-components-address-form__postcode {
  grid-column: 2 !important;
}

/* ── Country select field - HIDE COMPLETELY (UK only site) ── */
.wc-block-components-address-form__country,
.wc-block-components-country-input,
.wc-blocks-components-select.wc-blocks-components-country-select,
div.wc-block-components-address-form__country,
div[class*="country-input"],
.wc-block-components-address-form > .wc-block-components-address-form__country,
.wc-block-components-address-form__country-input {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Style the select container like a proper input field */
.wc-blocks-components-select__container {
  display: flex !important;
  flex-direction: column !important;
  border: 1.5px solid #e5e7eb !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  padding: 0 !important;
  transition:
    border-color 0.2s,
    box-shadow 0.2s !important;
}

.wc-blocks-components-select__container:focus-within {
  border-color: #1e3a5f !important;
  box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.1) !important;
}

/* Label above the select */
.wc-blocks-components-select__label {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
  color: #9ca3af !important;
  padding: 8px 12px 0 !important;
  line-height: 1 !important;
  display: block !important;
}

/* The native select element */
.wc-blocks-components-select__select {
  appearance: none !important;
  -webkit-appearance: none !important;
  border: none !important;
  background: transparent !important;
  padding: 4px 40px 10px 12px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #111827 !important;
  cursor: pointer !important;
  width: 100% !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Custom chevron overlay (replaces WC's SVG) */
.wc-blocks-components-select__expand {
  position: absolute !important;
  right: 12px !important;
  bottom: 10px !important;
  pointer-events: none !important;
  color: #6b7280 !important;
}

/* ── 5. TEXT INPUT FIELDS ── */
/* Elevated floating label style with compact label on top */

.wc-block-components-text-input {
  position: relative !important;
  overflow: visible !important;
}

.wc-block-components-text-input input {
  width: 100% !important;
  border: 1.5px solid #e5e7eb !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  padding: 22px 12px 8px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #111827 !important;
  transition:
    border-color 0.2s,
    box-shadow 0.2s !important;
  box-sizing: border-box !important;
  height: 54px !important;
}

.wc-block-components-text-input input:focus {
  border-color: #1e3a5f !important;
  box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.1) !important;
  outline: none !important;
}

/* Label resting inside field — looks like placeholder */
.wc-block-components-text-input label {
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 14px !important;
  color: #9ca3af !important;
  pointer-events: none !important;
  transition: all 0.18s ease !important;
  white-space: nowrap !important;
  font-weight: 400 !important;
  line-height: 1 !important;
}

/* Label floated when input has content or is focused */
.wc-block-components-text-input input:focus ~ label,
.wc-block-components-text-input input:not(:placeholder-shown) ~ label,
.wc-block-components-text-input.is-active label {
  top: 10px !important;
  transform: none !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
  color: #9ca3af !important;
}

.wc-block-components-text-input input:focus ~ label {
  color: #1e3a5f !important;
}

/* Reset red validation label color — only border should go red */
.wc-block-components-text-input input[aria-invalid="true"] ~ label {
  color: #9ca3af !important;
}

.wc-block-components-text-input input[aria-invalid="true"] {
  border-color: #ef4444 !important;
}

/* ── 6. ORDER SUMMARY SIDEBAR — RICHER LOOK ── */

/* The card shell — already has box-shadow; reset overflow to visible */
.wc-block-components-sidebar__inner,
.wc-block-checkout__sidebar > * {
  overflow: visible !important; /* was hidden — caused dropdown clip */
  border-radius: 14px !important;
  border: 1px solid rgba(30, 58, 95, 0.08) !important;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.06),
    0 8px 24px rgba(30, 58, 95, 0.09) !important;
}

/* Order summary toggle header */
.wc-block-components-checkout-order-summary__title {
  border-radius: 13px 13px 0 0 !important;
  overflow: hidden !important;
}

/* Coupon/discount panel */
.wc-block-components-totals-coupon {
  padding: 12px 16px !important;
  border-top: 1px solid #f0f2f5 !important;
}

/* Subtotal / Total rows */
.wc-block-components-totals-item {
  padding: 10px 16px !important;
  border-top: 1px solid #f0f2f5 !important;
}

.wc-block-components-totals-item:first-child {
  border-top: none !important;
}

.wc-block-components-totals-item__label {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #6b7280 !important;
}

.wc-block-components-totals-item__value {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #111827 !important;
}

/* Total row — highlight */
.wc-block-components-totals-footer-item {
  background: white !important;
  border-top: 2px solid #e5e7eb !important;
  border-radius: 0 0 13px 13px !important;
  padding: 14px 0px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

.wc-block-components-totals-footer-item
  .wc-block-components-totals-item__label {
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #1e3a5f !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
}

.wc-block-components-totals-footer-item
  .wc-block-components-totals-item__value {
  font-size: 18px !important;
  font-weight: 900 !important;
  color: #1e3a5f !important;
}

/* ── 7. GUEST CHECKOUT NOTICE ── */
.wc-block-checkout__guest-checkout-notice {
  background: #eff6ff !important;
  border: 1px solid #bfdbfe !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  margin: 8px 0 16px !important;
  font-size: 13px !important;
  color: #1e40af !important;
}

.wc-block-checkout__guest-checkout-notice a {
  color: #1e3a5f !important;
  font-weight: 700 !important;
}

/* ── 8. PAYMENT STEP ── */
.wc-block-checkout__payment-method {
  overflow: visible !important;
}

/* Payment method container */
.wc-block-components-payment-method-label {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #111827 !important;
}

/* ── 9. PLACE ORDER BUTTON ── */
/* Already green; make more prominent with gradient + depth */
.wc-block-components-checkout-place-order-button {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3) !important;
  border-radius: 10px !important;
  padding: 15px 28px !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  transition: all 0.2s !important;
}

.wc-block-components-checkout-place-order-button:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4) !important;
  transform: translateY(-1px) !important;
}

/* ── 10. TERMS / ORDER NOTES SECTIONS ── */
.wc-block-checkout__terms {
  padding: 14px 20px !important;
  font-size: 13px !important;
  color: #6b7280 !important;
}

/* ── 11. MOBILE — entry-content-wrap spacing fix ── */
/* These override Kadence's inline CSS which uses * in selector to win specificity */

@media (max-width: 1024px) {
  body.woocommerce-checkout .entry-content-wrap {
    padding: 0 !important;
    margin: 0 !important;
  }
  body.woocommerce-checkout .entry-content.single-content {
    padding: 0 !important;
  }
}

@media (max-width: 767px) {
  body.woocommerce-checkout .entry-content-wrap {
    padding: 0 !important;
  }
}

/* ============================================================
 * APPEND TO: nt-enhancements.css
 * ============================================================ */

/* ── 1. HIDE GUEST CHECKOUT NOTICE ──────────────────────────
   Hides the "You are currently checking out as a guest" banner
   injected by WooCommerce Blocks — it overlaps inputs on mobile
   and provides no useful action for customers.               */

#wc-guest-checkout-notice,
.wc-block-checkout__guest-checkout-notice,
p.wc-block-checkout__guest-checkout-notice,
#contact ~ .wc-block-checkout__guest-checkout-notice {
  display: none !important;
}

/* ── 2. BRAND GROUP BADGE IN CART + CHECKOUT ─────────────────
   Rendered via the woocommerce_get_item_data PHP hook below.
   Shown in cart item meta and checkout order summary.        */

.nt-brand-group-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  vertical-align: middle;
}

.nt-brand-group-badge.nt-bg-budget {
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}
.nt-brand-group-badge.nt-bg-midrange {
  background: #fff7ed;
  color: #9a3412;
  border: 1px solid #fed7aa;
}
.nt-brand-group-badge.nt-bg-premium {
  background: #f3e8ff;
  color: #6b21a8;
  border: 1px solid #d8b4fe;
}

/* ============================================================
 * EU TYRE LABEL BADGES + FITTING DATE AVAILABILITY
 * Add to: page-find-a-fitter__10_.php  <style> block
 * (or to nt-enhancements.css)
 * ============================================================ */

/* ── EU Label badge group ── */
.nt-eu-labels {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}

/* Each badge = circle + icon side by side */
.nt-eu-badge {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* The coloured circle with the letter/number */
.nt-eu-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 15px;
  font-weight: 900;
  color: #ffffff;
  flex-shrink: 0;
  border: 2px solid rgba(0, 0, 0, 0.12);
}

/* EU rating colour scale: A=dark green → G=red */
.eu-a {
  background: #00873e;
}
.eu-b {
  background: #4cad49;
}
.eu-c {
  background: #aacf36;
  color: #333;
}
.eu-d {
  background: #f8d12b;
  color: #333;
}
.eu-e {
  background: #f5a623;
  color: #333;
}
.eu-f {
  background: #e8441e;
}
.eu-g {
  background: #c0392b;
}
.nt-eu-noise {
  background: #1e3a5f;
}

/* The small icon beside the circle */
.nt-eu-icon {
  color: #9ca3af;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nt-eu-icon svg {
  width: 18px;
  height: 18px;
}

/* ── Inline badges (runflat, lead time) next to size ── */
.nt-inline-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  vertical-align: middle;
}

.nt-runflat-badge {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}

.nt-lead-badge {
  background: #fff7ed;
  color: #c2410c;
  border: 1px solid #fed7aa;
}

/* ── Fitting date availability row ── */
.nt-fitting-date {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-top: 10px;
  font-size: 13px;
  color: #374151;
  line-height: 1.45;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 8px 10px;
}

.nt-fitting-date strong {
  color: #1e3a5f;
}

.nt-fitting-icon {
  width: 15px;
  height: 15px;
  color: #1e3a5f;
  flex-shrink: 0;
  margin-top: 1px;
}

/* ── Service type label in CTA column ── */
.nt-service-type {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #9ca3af;
  margin-bottom: 4px;
}

/* ── Remove the old badges block (brand_group pill) from fitter page ──
   The category header already shows Budget / Mid-Range / Premium
   so we suppress the pill inside the card body on this page only.     */
.page-template-page-find-a-fitter
  .nt-category-tyres
  .nt-badges
  .nt-badge.budget,
.page-template-page-find-a-fitter
  .nt-category-tyres
  .nt-badges
  .nt-badge.midrange,
.page-template-page-find-a-fitter
  .nt-category-tyres
  .nt-badges
  .nt-badge.premium {
  display: none !important;
}

/* ── Mobile responsive for EU labels ── */
@media (max-width: 640px) {
  .nt-eu-labels {
    gap: 8px;
  }
  .nt-eu-circle {
    width: 30px;
    height: 30px;
    font-size: 13px;
  }
  .nt-fitting-date {
    font-size: 12px;
    padding: 6px 8px;
  }
}

/* ============================================================
 * FIX: Oversized calendar icon in .nt-fitting-date
 * Append to nt-enhancements.css  (or add to the <style> block
 * in page-find-a-fitter__11_.php)
 * ============================================================
 *
 * Root cause: the <svg> has no width/height attributes, only a
 * viewBox. Some browsers then render it at 300×150 (the default
 * "replaced element" intrinsic size) and the CSS class alone
 * isn't enough to constrain it.
 * ============================================================ */

/* Force the icon SVG to stay small no matter what */
.nt-fitting-date .nt-fitting-icon,
.nt-fitting-date svg {
  width: 15px !important;
  height: 15px !important;
  min-width: 15px !important;
  min-height: 15px !important;
  max-width: 15px !important;
  max-height: 15px !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
  vertical-align: middle !important;
  overflow: hidden !important;
}

/* Also constrain ALL other SVGs in tyre cards so nothing else blows up */
.nt-eu-icon svg,
.nt-card svg {
  max-width: 24px !important;
  max-height: 24px !important;
  overflow: hidden !important;
}

/* ============================================================
 * APPEND TO: nt-enhancements.css
 *
 * Fixes:
 *  1. Email address field full-width (was spanning only 1 of 2 cols)
 *  2. Guest checkout notice — hide properly with higher specificity
 *  3. Mobile white/blue overlay — snackbar WC Blocks bug fix
 * ============================================================ */

/* ── FIX 1: EMAIL ADDRESS — FULL WIDTH ───────────────────────
   The contact info step renders its form as the same grid as
   the billing address form.  The email field class was missing
   from the full-width list, so it landed in the left column
   with an empty right column beside it.                       */

.wc-block-components-address-form__email {
  grid-column: 1 / -1 !important;
}

/* Also target the email input wrapper one level up, in case
   WC Blocks wraps it differently in the contact step         */
#contact .wc-block-components-text-input,
#contact .wc-block-components-address-form > div:first-child {
  grid-column: 1 / -1 !important;
}

/* ── FIX 2: GUEST CHECKOUT NOTICE ───────────────────────────
   Previous rule used low-specificity selector that conflicts
   with the styling rule earlier in the file. This rule wins
   with body.woocommerce-checkout prefix + !important.
   Also forces grid-column span so it can never appear beside
   the email field even if display isn't overridden.          */

body.woocommerce-checkout #wc-guest-checkout-notice,
body.woocommerce-checkout .wc-block-checkout__guest-checkout-notice,
body.woocommerce-checkout p.wc-block-checkout__guest-checkout-notice {
  display: none !important;
  grid-column: 1 / -1 !important;
  order: 99 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}

/* ── FIX 3: MOBILE SNACKBAR / WHITE OVERLAY ─────────────────
   WC Blocks ships with this CSS at ≤782px:
     .wc-block-components-notices__snackbar {
       position: fixed; top: 10px; left: 0;
     }
   It does NOT reset `right: 24px` that was set in the desktop
   rule, so the snackbar spans left:0 → right:24px = nearly
   full viewport width.  With any child content (even empty
   divs), this creates a large covering rectangle that blocks
   all checkout interaction.

   Fix: on mobile, pin it as a small toast at the bottom of
   the screen, width auto, max reasonable width.             */

@media (max-width: 782px) {
  /* Override WC Blocks' broken mobile snackbar positioning */
  .wc-block-components-notices__snackbar,
  .wc-block-components-notice-snackbar-list,
  .wc-block-components-notices__snackbar.wc-block-components-notice-snackbar-list {
    position: fixed !important;
    top: auto !important;
    bottom: 16px !important;
    left: 16px !important;
    right: 16px !important;
    width: auto !important;
    max-width: calc(100vw - 32px) !important;
    min-height: 0 !important;
    height: auto !important;
    pointer-events: none !important;
    z-index: 99999 !important;

    /* If it has no content, ensure it collapses to nothing */
    empty-cells: hide !important;
  }

  /* If the snackbar list is empty, collapse it entirely */
  .wc-block-components-notices__snackbar:empty,
  .wc-block-components-notice-snackbar-list:empty {
    display: none !important;
  }

  /* Individual toast items inside the snackbar */
  .wc-block-components-notices__snackbar li,
  .wc-block-components-notice-snackbar-list li {
    pointer-events: auto !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* Belt-and-braces: also hide if empty on all viewports */
.wc-block-components-notices__snackbar:empty,
.wc-block-components-notice-snackbar-list:empty {
  display: none !important;
  height: 0 !important;
  overflow: hidden !important;
}
/* ============================================================
 * APPEND TO: nt-enhancements.css
 *
 * On mobile, collapse the 2-column address form grid to 1 column
 * so First Name, Last Name, State, Postcode each get a full row.
 * ============================================================ */

@media (max-width: 600px) {
  /* Switch the form from 2-col to 1-col */
  .wc-block-components-address-form {
    grid-template-columns: 1fr !important;
  }

  /* All half-width fields now span the single full-width column */
  .wc-block-components-address-form__first_name,
  .wc-block-components-address-form__last_name,
  .wc-block-components-address-form__state,
  .wc-block-components-address-form__postcode {
    grid-column: 1 / -1 !important;
  }
}

/* ============================================================
 * HOMEPAGE HERO RESTORE PATCH
 * ============================================================
 * APPEND TO: nt-enhancements-new.css
 *
 * Root cause of the regression:
 *
 * 1. The new CSS renamed `.nt-reg-card`  →  `#nt-search-widget`
 *    and `.nt-service-icon` / `h3` / `p`  →  `.nt-hero-service-icon`
 *    / `.nt-hero-service-title` — but home.html still uses the
 *    OLD class names.  This block re-targets the correct selectors.
 *
 * 2. The entire form CSS (yellow plate, Search button, step 1/2
 *    visibility, vehicle summary, postcode, See Prices, manual
 *    size selects, trust list, error states) was dropped entirely
 *    from the new file.  All of it is restored here.
 *
 * Do NOT change home.html or functions.php — they are correct.
 * ============================================================ */

/* ── Hero right: white search card ─────────────────────────── */

#nt-hero .nt-reg-card {
  background: var(--nt-white) !important;
  border-radius: var(--nt-radius-lg) !important;
  padding: 32px 28px !important;
  max-width: 440px !important;
  width: 100% !important;
  box-shadow: var(--nt-shadow-lg) !important;
}

#nt-hero .nt-hero-title {
  color: var(--nt-primary) !important;
  font-size: 24px !important;
  font-weight: 900 !important;
  margin: 0 0 6px 0 !important;
  text-align: center !important;
}

#nt-hero .nt-hero-sub {
  color: var(--nt-text-muted) !important;
  font-size: 14px !important;
  margin: 0 0 20px 0 !important;
  text-align: center !important;
}

/* ── Service icons in hero: correct target ──────────────────── */
/* home.html uses .nt-service-icon and h3 / p inside .nt-hero-service */

#nt-hero .nt-hero-service .nt-service-icon {
  width: 48px !important;
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255, 255, 255, 0.15) !important;
  border-radius: 12px !important;
  margin-bottom: 12px !important;
}

#nt-hero .nt-hero-service .nt-service-icon svg {
  width: 26px !important;
  height: 26px !important;
  color: var(--nt-white) !important;
}

#nt-hero .nt-hero-service h3 {
  color: var(--nt-white) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  margin: 0 0 6px 0 !important;
}

#nt-hero .nt-hero-service p {
  color: rgba(255, 255, 255, 0.75) !important;
  font-size: 12px !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}

/* ── Step visibility (CSS-controlled, JS overrides with inline styles) ── */

#nt-hero #nt-reg-form {
  display: block !important;
}

#nt-hero #nt-reg-form[data-step="1"] .nt-step-1 {
  display: block !important;
}
#nt-hero #nt-reg-form[data-step="1"] .nt-step-2 {
  display: none !important;
}
#nt-hero #nt-reg-form[data-step="2"] .nt-step-1 {
  display: none !important;
}
#nt-hero #nt-reg-form[data-step="2"] .nt-step-2 {
  display: block !important;
}

/* Default on load (JS sets inline style, CSS is a safe fallback) */
#nt-hero .nt-step-1 {
  display: block !important;
}
#nt-hero .nt-step-2 {
  display: none !important;
}

#nt-hero .nt-input-wrap {
  margin-bottom: 12px !important;
}

/* ── Registration input — UK yellow plate style ─────────────── */

#nt-hero #nt-reg {
  width: 100% !important;
  height: 60px !important;
  padding: 0 20px !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  font-family: "Arial Black", "Helvetica Neue", sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: 3px !important;
  text-align: center !important;
  border: 3px solid #f7dc6f !important;
  border-radius: 10px !important;
  background: #f7dc6f !important;
  color: #000 !important;
  box-sizing: border-box !important;
}

#nt-hero #nt-reg::placeholder {
  color: #666 !important;
  font-size: 16px !important;
  letter-spacing: 1px !important;
}

#nt-hero #nt-reg:focus {
  outline: none !important;
  border-color: var(--nt-primary) !important;
  box-shadow: 0 0 0 4px rgba(30, 58, 95, 0.15) !important;
}

/* ── Search button (ENTER REG / Search step 1) ──────────────── */

#nt-hero .nt-btn.nt-action--search,
#nt-hero #nt-search-btn {
  display: flex !important;
  width: 100% !important;
  height: 56px !important;
  padding: 0 24px !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  background: var(--nt-secondary) !important;
  color: #111 !important;
  border: none !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  box-shadow: 0 4px 14px rgba(245, 166, 35, 0.35) !important;
  transition: all 0.2s ease !important;
}

#nt-hero .nt-btn.nt-action--search:hover,
#nt-hero #nt-search-btn:hover {
  background: var(--nt-secondary-hover, #e09000) !important;
  transform: translateY(-2px) !important;
}

/* ── Step 2: Vehicle summary box ────────────────────────────── */

#nt-hero .nt-vehicle-summary {
  background: #f0fdf4 !important;
  border: 1px solid #bbf7d0 !important;
  border-radius: 12px !important;
  padding: 16px !important;
  margin-bottom: 16px !important;
  text-align: left !important;
}

#nt-hero .nt-vehicle-line {
  display: block !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--nt-primary) !important;
  margin-bottom: 4px !important;
}

#nt-hero .nt-vehicle-sizes {
  display: block !important;
  font-size: 13px !important;
  color: var(--nt-text-muted) !important;
  margin-bottom: 10px !important;
}

#nt-hero .nt-change-vehicle {
  background: none !important;
  border: none !important;
  color: var(--nt-primary) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
  cursor: pointer !important;
  padding: 0 !important;
}

/* ── Step 2: Size display box ───────────────────────────────── */

#nt-hero .nt-size-ro-wrap,
#nt-hero #nt-size-ro-wrap {
  background: var(--nt-bg) !important;
  border: 1px solid var(--nt-border) !important;
  border-radius: 10px !important;
  padding: 14px 16px !important;
  margin-bottom: 12px !important;
}

#nt-hero #nt-size-readonly {
  width: 100% !important;
  border: none !important;
  background: transparent !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--nt-primary) !important;
}

/* ── Step 2: Manual size hint ───────────────────────────────── */

#nt-hero .nt-manual-size-section,
#nt-hero #nt-manual-size-wrap {
  margin-bottom: 16px !important;
}

#nt-hero .nt-size-hint {
  display: flex !important;
  gap: 12px !important;
  background: #fffbeb !important;
  border: 1px solid #fde68a !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  margin-bottom: 12px !important;
}

#nt-hero .nt-hint-icon {
  font-size: 20px !important;
  flex-shrink: 0 !important;
}

#nt-hero .nt-hint-text {
  font-size: 13px !important;
  color: #92400e !important;
}

#nt-hero .nt-hint-text strong {
  display: block !important;
  margin-bottom: 2px !important;
  color: #78350f !important;
}

#nt-hero .nt-hint-text p {
  margin: 0 !important;
}

#nt-hero .nt-btn-manual-toggle {
  display: block !important;
  width: 100% !important;
  padding: 12px 16px !important;
  background: var(--nt-bg) !important;
  border: 1px solid var(--nt-border) !important;
  border-radius: 8px !important;
  color: var(--nt-primary) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-align: center !important;
  cursor: pointer !important;
  text-decoration: none !important;
}

#nt-hero .nt-btn-manual-toggle:hover {
  background: #e5e7eb !important;
}

/* Manual axle/size selects */
#nt-hero #nt-axle-size-wrap select,
#nt-hero #nt-size-select-wrap select,
#nt-hero .nt-manual-grid select {
  width: 100% !important;
  height: 50px !important;
  padding: 0 40px 0 16px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  border: 2px solid #e5e7eb !important;
  border-radius: 12px !important;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5l5 5 5-5' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center !important;
  background-size: 20px !important;
  color: #1e3a5f !important;
  cursor: pointer !important;
  margin-bottom: 12px !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}

#nt-hero #nt-axle-size-wrap select:hover,
#nt-hero #nt-size-select-wrap select:hover,
#nt-hero .nt-manual-grid select:hover {
  border-color: #1e3a5f !important;
}

#nt-hero #nt-axle-size-wrap select:focus,
#nt-hero #nt-size-select-wrap select:focus,
#nt-hero .nt-manual-grid select:focus {
  outline: none !important;
  border-color: #1e3a5f !important;
  box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.1) !important;
}

/* ── Step 2: Postcode input ─────────────────────────────────── */

/* Force postcode wrap visible only in step 2 */
#nt-hero #nt-reg-form[data-step="1"] #nt-postcode-wrap {
  display: none !important;
}

#nt-hero #nt-reg-form[data-step="2"] #nt-postcode-wrap {
  display: block !important;
  margin-bottom: 16px !important;
}

#nt-hero #nt-postcode-wrap {
  margin-bottom: 16px !important;
}

#nt-hero #nt-postcode {
  width: 100% !important;
  height: 56px !important;
  padding: 0 16px !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  text-align: center !important;
  border: 2px solid var(--nt-border) !important;
  border-radius: 10px !important;
  background: var(--nt-white) !important;
  color: var(--nt-primary) !important;
  box-sizing: border-box !important;
}

#nt-hero #nt-postcode:focus {
  border-color: var(--nt-primary) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.1) !important;
}

#nt-hero #nt-postcode::placeholder {
  color: #9ca3af !important;
  font-size: 14px !important;
  letter-spacing: 1px !important;
}

#nt-hero #nt-pc-hint {
  display: block !important;
  font-size: 12px !important;
  color: var(--nt-success) !important;
  margin-top: 6px !important;
  font-weight: 600 !important;
  text-align: center !important;
}

/* ── See Prices button ──────────────────────────────────────── */

#nt-hero .nt-btn.nt-action--price,
#nt-hero #nt-price-btn,
#nt-hero #nt-size-search {
  display: flex !important;
  width: 100% !important;
  height: 56px !important;
  background: var(--nt-success) !important;
  color: var(--nt-white) !important;
  border: none !important;
  border-radius: 10px !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  cursor: pointer !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35) !important;
  transition: all 0.2s ease !important;
}

#nt-hero .nt-btn.nt-action--price:hover:not(:disabled),
#nt-hero #nt-price-btn:hover:not(:disabled),
#nt-hero #nt-size-search:hover:not(:disabled) {
  background: var(--nt-success-hover) !important;
  transform: translateY(-2px) !important;
}

#nt-hero .nt-btn.nt-action--price:disabled,
#nt-hero #nt-price-btn:disabled,
#nt-hero #nt-size-search:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

/* ── "Know your tyre size?" toggle link ─────────────────────── */

#nt-hero .nt-help {
  text-align: center !important;
  margin-top: 16px !important;
}

#nt-hero .nt-link {
  display: inline-block !important;
  color: var(--nt-primary) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  padding: 10px 18px !important;
  background: var(--nt-bg) !important;
  border-radius: 8px !important;
  transition: background 0.15s ease !important;
}

#nt-hero .nt-link:hover {
  background: #e5e7eb !important;
}

/* ── Trust points list ──────────────────────────────────────── */

#nt-hero .nt-trust {
  list-style: none !important;
  margin: 24px 0 0 0 !important;
  padding: 18px 0 0 0 !important;
  border-top: 1px solid var(--nt-border) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

#nt-hero .nt-trust li {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  color: var(--nt-text-muted) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

#nt-hero .nt-trust li::before {
  content: "✓" !important;
  color: var(--nt-success) !important;
  font-weight: 900 !important;
  font-size: 14px !important;
}

/* ── Manual size form (second form, "Know your tyre size") ───── */

#nt-hero #nt-size-form {
  display: none !important;
}

#nt-hero .nt-reg-card.nt-show-size #nt-reg-form {
  display: none !important;
}

#nt-hero .nt-reg-card.nt-show-size #nt-size-form {
  display: block !important;
}

#nt-hero #nt-size-form select {
  width: 100% !important;
  height: 52px !important;
  padding: 0 16px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  border: 2px solid var(--nt-border) !important;
  border-radius: 10px !important;
  background: var(--nt-white) !important;
  color: var(--nt-primary) !important;
  margin-bottom: 12px !important;
  cursor: pointer !important;
}

#nt-hero #nt-size-form select:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

#nt-hero #nt-size-postcode {
  width: 100% !important;
  height: 52px !important;
  padding: 0 16px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  border: 2px solid var(--nt-border) !important;
  border-radius: 10px !important;
  background: var(--nt-white) !important;
  color: var(--nt-primary) !important;
  box-sizing: border-box !important;
}

/* ── Error message ──────────────────────────────────────────── */

#nt-hero .nt-error {
  background: rgba(239, 68, 68, 0.1) !important;
  border: 1px solid #fca5a5 !important;
  color: #b91c1c !important;
  padding: 12px !important;
  border-radius: 8px !important;
  margin-top: 12px !important;
  font-size: 13px !important;
  text-align: center !important;
}

#nt-hero .nt-error[hidden] {
  display: none !important;
}

/* ── Hero responsive ────────────────────────────────────────── */

@media (max-width: 991px) {
  #nt-hero .nt-hero-left {
    text-align: center !important;
  }

  #nt-hero .nt-hero-services {
    grid-template-columns: repeat(3, 1fr) !important;
    max-width: 420px !important;
    margin: 0 auto !important;
  }

  #nt-hero .nt-reg-card {
    max-width: 100% !important;
    margin: 0 auto !important;
  }
}

@media (max-width: 600px) {
  #nt-hero .nt-hero-services {
    grid-template-columns: 1fr !important;
    max-width: 260px !important;
  }
}

/* ── Homepage sections: aliases for old class names ─────────── */
/* new CSS uses .nt-section-title / .nt-section-sub;
   home.html uses .nt-head h2 / .nt-sub — keep both working     */

.nt-head {
  text-align: center !important;
  margin-bottom: 40px !important;
}

.nt-head h2 {
  font-size: 32px !important;
  font-weight: 900 !important;
  color: var(--nt-primary) !important;
  margin: 0 0 10px 0 !important;
}

.nt-sub {
  font-size: 16px !important;
  color: var(--nt-text-muted) !important;
  margin: 0 !important;
}

/* Services card grid */
.nt-card-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
}

.nt-card-grid > a.nt-card,
.nt-section.nt-services .nt-card {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  background: var(--nt-white) !important;
  border: 1px solid var(--nt-border) !important;
  border-radius: 16px !important;
  padding: 28px 24px !important;
  text-decoration: none !important;
  color: var(--nt-text) !important;
  box-shadow: var(--nt-shadow) !important;
  transition: all 0.2s ease !important;
  grid-template-columns: unset !important;
}

.nt-card-grid > a.nt-card:hover,
.nt-section.nt-services .nt-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.1) !important;
  border-color: var(--nt-primary) !important;
}

.nt-card-grid .nt-icon,
.nt-section.nt-services .nt-icon {
  width: 56px !important;
  height: 56px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(30, 58, 95, 0.08) !important;
  color: var(--nt-primary) !important;
  border-radius: 14px !important;
  margin-bottom: 8px !important;
}

.nt-card-grid .nt-icon svg,
.nt-section.nt-services .nt-icon svg {
  width: 28px !important;
  height: 28px !important;
}

.nt-section.nt-services .nt-card h3 {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: var(--nt-primary) !important;
  margin: 0 !important;
}

.nt-section.nt-services .nt-card p {
  font-size: 14px !important;
  color: var(--nt-text-muted) !important;
  margin: 0 !important;
  line-height: 1.5 !important;
}

.nt-section.nt-services .nt-cta {
  margin-top: auto !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--nt-primary) !important;
}

/* How It Works — old .nt-steps / .nt-step / .nt-step-num */
.nt-steps {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 30px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.nt-step {
  text-align: center !important;
  padding: 24px 16px !important;
}

.nt-step-num {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 48px !important;
  height: 48px !important;
  background: var(--nt-primary) !important;
  color: var(--nt-white) !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  border-radius: 50% !important;
  margin-bottom: 16px !important;
}

.nt-step h3 {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: var(--nt-primary) !important;
  margin: 0 0 10px 0 !important;
}

.nt-step p {
  font-size: 14px !important;
  color: var(--nt-text-muted) !important;
  margin: 0 !important;
  line-height: 1.5 !important;
}

/* About section */
.nt-about-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 60px !important;
  align-items: center !important;
}

.nt-about-text h2 {
  font-size: 32px !important;
  font-weight: 900 !important;
  color: var(--nt-primary) !important;
  margin: 0 0 20px 0 !important;
}

.nt-about-text p {
  font-size: 16px !important;
  color: var(--nt-text-muted) !important;
  line-height: 1.6 !important;
  margin: 0 0 20px 0 !important;
}

.nt-bullets {
  list-style: none !important;
  margin: 0 0 24px 0 !important;
  padding: 0 !important;
}

.nt-bullets li {
  position: relative !important;
  padding-left: 28px !important;
  margin-bottom: 12px !important;
  font-size: 15px !important;
  color: var(--nt-text) !important;
}

.nt-bullets li::before {
  content: "✓" !important;
  position: absolute !important;
  left: 0 !important;
  color: var(--nt-success) !important;
  font-weight: 900 !important;
}

.nt-btn-outline {
  display: inline-flex !important;
  align-items: center !important;
  padding: 14px 28px !important;
  border: 2px solid var(--nt-primary) !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: var(--nt-primary) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.nt-btn-outline:hover {
  background: var(--nt-primary) !important;
  color: var(--nt-white) !important;
}

/* Section responsive */
@media (max-width: 991px) {
  .nt-card-grid {
    grid-template-columns: 1fr !important;
    max-width: 400px !important;
    margin: 0 auto !important;
  }

  .nt-steps {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .nt-about-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
    text-align: center !important;
  }
}

@media (max-width: 600px) {
  .nt-steps {
    grid-template-columns: 1fr !important;
    max-width: 320px !important;
    margin: 0 auto !important;
  }
}

/* ── Loading backdrop & modal ───────────────────────────────── */

.nt-backdrop,
#nt-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  display: grid !important;
  place-items: center !important;
  background: rgba(14, 20, 26, 0.6) !important;
  backdrop-filter: blur(3px) !important;
}

.nt-backdrop[hidden],
#nt-backdrop[hidden] {
  display: none !important;
}

.nt-loader {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 16px !important;
  background: var(--nt-white) !important;
  padding: 32px 40px !important;
  border-radius: 16px !important;
  box-shadow: var(--nt-shadow-lg) !important;
}

.nt-tyre {
  width: 64px !important;
  height: 64px !important;
  color: var(--nt-primary) !important;
  animation: nt-spin 1s linear infinite !important;
}

@keyframes nt-spin {
  to {
    transform: rotate(360deg);
  }
}

.nt-loader-text {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--nt-primary) !important;
}

.nt-modal,
#nt-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 100000 !important;
  display: grid !important;
  place-items: center !important;
  background: rgba(14, 20, 26, 0.5) !important;
}

.nt-modal[hidden],
#nt-modal[hidden] {
  display: none !important;
}

.nt-modal-card {
  width: min(480px, 90vw) !important;
  background: var(--nt-white) !important;
  border-radius: 16px !important;
  padding: 28px !important;
  box-shadow: var(--nt-shadow-lg) !important;
  text-align: center !important;
}

.nt-modal-title {
  font-size: 20px !important;
  font-weight: 900 !important;
  color: var(--nt-primary) !important;
  margin: 0 0 10px 0 !important;
}

.nt-modal-body {
  font-size: 15px !important;
  color: var(--nt-text-muted) !important;
  margin: 0 0 20px 0 !important;
}

.nt-modal .nt-btn,
.nt-modal-ok {
  display: inline-block !important;
  padding: 14px 32px !important;
  background: var(--nt-primary) !important;
  color: var(--nt-white) !important;
  border: none !important;
  border-radius: 10px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}

/* ============================================================
 * BRANDS + ABOUT SECTION RESTORE PATCH
 * ============================================================
 * APPEND TO: nt-enhancements-new.css  (after previous patch)
 *
 * Root cause:
 *  - [nt_brands] shortcode outputs <ul class="nt-brand-grid ...">
 *    with <li> → <a> → <img> children.  The new CSS renamed these
 *    to .nt-brands-container / .nt-brand-logo which matches nothing.
 *    This patch re-targets the actual rendered HTML.
 *
 *  - .nt-section.nt-about / .nt-about-grid / .nt-container /
 *    .nt-bullets / .nt-btn-outline were all missing from the new
 *    file (they were included in homepage-restore-patch.css but
 *    we add them here too as belt-and-braces in case that wasn't
 *    applied yet).
 * ============================================================ */

/* ── Brands section wrapper ─────────────────────────────────── */

.nt-brands-section,
.nt-section.nt-brands {
  padding: 50px 20px !important;
  background: var(--nt-bg-alt, #f5f7fa) !important;
}

/* ── Brand grid — matches shortcode output ──────────────────── */
/* [nt_brands] outputs: <ul class="nt-brand-grid nt-cols-6"> */

.nt-brand-grid {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 20px !important;
  list-style: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
  max-width: 1200px !important;
}

.nt-brand-grid li {
  list-style: none !important;
}

.nt-brand-grid a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--nt-white, #ffffff) !important;
  border: 1px solid var(--nt-border, #e5e7eb) !important;
  border-radius: 12px !important;
  padding: 16px !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
}

.nt-brand-grid a:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08) !important;
  border-color: var(--nt-primary, #1e3a5f) !important;
}

.nt-brand-grid img {
  width: 100% !important;
  height: 60px !important;
  object-fit: contain !important;
  filter: grayscale(30%) !important;
  transition: filter 0.2s ease !important;
}

.nt-brand-grid a:hover img {
  filter: grayscale(0%) !important;
}

/* Column count overrides when shortcode passes nt-cols-N */
.nt-brand-grid.nt-cols-4 {
  grid-template-columns: repeat(4, 1fr) !important;
}
.nt-brand-grid.nt-cols-3 {
  grid-template-columns: repeat(3, 1fr) !important;
}
.nt-brand-grid.nt-cols-2 {
  grid-template-columns: repeat(2, 1fr) !important;
}

/* Brands responsive */
@media (max-width: 991px) {
  .nt-brand-grid,
  .nt-brand-grid.nt-cols-6 {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

@media (max-width: 768px) {
  .nt-brand-grid,
  .nt-brand-grid.nt-cols-6,
  .nt-brand-grid.nt-cols-4 {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 480px) {
  .nt-brand-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  .nt-brand-grid img {
    height: 50px !important;
  }
}

/* ── About section ──────────────────────────────────────────── */

.nt-section.nt-about {
  background: var(--nt-bg-alt, #f5f7fa) !important;
}

.nt-container {
  max-width: 1200px !important;
  margin: 0 auto !important;
}

.nt-about-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 60px !important;
  align-items: center !important;
}

.nt-about-text h2 {
  font-size: 32px !important;
  font-weight: 900 !important;
  color: var(--nt-primary, #1e3a5f) !important;
  margin: 0 0 20px 0 !important;
}

.nt-about-text p {
  font-size: 16px !important;
  color: var(--nt-text-muted, #6b7280) !important;
  line-height: 1.6 !important;
  margin: 0 0 20px 0 !important;
}

.nt-bullets {
  list-style: none !important;
  margin: 0 0 24px 0 !important;
  padding: 0 !important;
}

.nt-bullets li {
  position: relative !important;
  padding-left: 28px !important;
  margin-bottom: 12px !important;
  font-size: 15px !important;
  color: var(--nt-text, #1e3a5f) !important;
}

.nt-bullets li::before {
  content: "✓" !important;
  position: absolute !important;
  left: 0 !important;
  color: var(--nt-success, #10b981) !important;
  font-weight: 900 !important;
}

/* About image from [nt_about_media] shortcode */
.nt-about-media img,
.nt-about-img img {
  width: 100% !important;
  height: auto !important;
  border-radius: 16px !important;
  display: block !important;
}

/* About + brands responsive */
@media (max-width: 991px) {
  .nt-about-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
    text-align: center !important;
  }

  .nt-bullets li {
    text-align: left !important;
  }
}

/* ============================================================
 * APPEND TO: nt-enhancements-new.css
 *
 * Hide "Know your tyre size?" link when a vehicle has been
 * found (step 2). In step 2 the user already has a vehicle
 * and can use "Select size manually instead" button instead.
 * ============================================================ */

/* Hide the "Know your tyre size?" help link in step 2 */
#nt-hero #nt-reg-form[data-step="2"] .nt-help,
#nt-hero #nt-reg-form[data-step="2"] #nt-link-size {
  display: none !important;
}

/* Keep it visible in step 1 */
#nt-hero #nt-reg-form[data-step="1"] .nt-help {
  display: block !important;
}

/* ============================================================
 * APPEND TO: nt-enhancements-new.css
 *
 * Restores the find-a-fitter progress step pills to their
 * original horizontal flex / pill style.
 *
 * Root cause: the new file applies display:grid with 4 equal
 * columns to ALL .nt-steps — but on the find-a-fitter page
 * .nt-steps is a horizontal progress bar of pill-shaped steps,
 * not a "How it Works" homepage grid.  The old file scoped
 * these rules under .nt-results-wrap to keep them separate.
 * ============================================================ */

/* ── Override the grid back to flex for find-a-fitter only ─── */
.nt-results-wrap .nt-steps {
  display: flex !important;
  flex-direction: row !important;
  gap: 10px !important;
  margin: 0 0 24px 0 !important;
  padding: 0 !important;
  list-style: none !important;
  flex-wrap: wrap !important;
  grid-template-columns: unset !important; /* cancel grid */
}

/* ── Individual step pill ───────────────────────────────────── */
.nt-results-wrap .nt-step {
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.3px !important;
  padding: 10px 20px !important;
  border-radius: 999px !important;
  border: 2px solid var(--nt-border, #e5e7eb) !important;
  color: var(--nt-text-muted, #6b7280) !important;
  background: var(--nt-white, #ffffff) !important;
  white-space: nowrap !important;
  transition: all 0.15s ease !important;
  /* cancel any grid/number styles inherited from homepage rules */
  text-align: left !important;
}

/* ── Active step — dark navy outline + subtle fill ──────────── */
.nt-results-wrap .nt-step.active {
  border-color: var(--nt-primary, #1e3a5f) !important;
  color: var(--nt-primary, #1e3a5f) !important;
  background: rgba(30, 58, 95, 0.05) !important;
}

/* ── Completed step — green tint ───────────────────────────── */
.nt-results-wrap .nt-step.done {
  border-color: #bbf7d0 !important;
  background: #f0fdf4 !important;
  color: #166534 !important;
}

/* ── Hide the circle number that homepage step styling adds ─── */
.nt-results-wrap .nt-step .nt-step-num,
.nt-results-wrap .nt-step .nt-step-number {
  display: none !important;
}

/* ── Mobile: allow pills to wrap onto two rows ──────────────── */
@media (max-width: 600px) {
  .nt-results-wrap .nt-steps {
    gap: 8px !important;
  }

  .nt-results-wrap .nt-step {
    font-size: 12px !important;
    padding: 8px 14px !important;
  }
}

/* ============================================================
 * PATCH: Homepage + Find-a-Fitter improvements  2026-03-01
 * ============================================================ */

/* ── 1. Mobile: reg card above hero-left ────────────────────────
   On ≤991px flip the two-column grid so .nt-reg-card (the search
   card) appears FIRST and .nt-hero-left (headline + services)
   appears BELOW it, keeping desktop unchanged.               */

@media (max-width: 991px) {
  #nt-hero {
    display: flex !important;
    flex-direction: column !important;
  }

  /* Card comes first visually */
  #nt-hero .nt-reg-card {
    order: 1 !important;
    width: 100% !important;
    max-width: 480px !important;
    margin: 0 auto !important;
  }

  /* Left (headline + services) goes below */
  #nt-hero .nt-hero-left {
    order: 2 !important;
    text-align: center !important;
  }
}

/* ── 2. Vehicle summary card — make tyre sizes more prominent ──
   Increase font sizes, add a clear separator row, and make the
   tyre size the most eye-catching element in the green card.  */

#nt-hero .nt-vehicle-summary {
  background: #f0fdf4 !important;
  border: 2px solid #6ee7b7 !important; /* stronger green border */
  border-radius: 12px !important;
  padding: 16px !important;
  margin-bottom: 16px !important;
  text-align: left !important;
}

/* Vehicle name + reg — slightly de-emphasised */
#nt-hero .nt-vehicle-line {
  display: block !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #166534 !important; /* dark green */
  margin-bottom: 8px !important;
}

/* Tyre sizes — BIG and bold, the hero of this card */
#nt-hero .nt-vehicle-sizes {
  display: block !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  color: var(--nt-primary, #1e3a5f) !important;
  letter-spacing: 0.4px !important;
  margin-bottom: 12px !important;
  padding: 10px 0 10px !important;
  border-top: 1px solid #bbf7d0 !important;
  border-bottom: 1px solid #bbf7d0 !important;
}

/* "Change tyre" link */
#nt-hero .nt-change-vehicle {
  background: none !important;
  border: none !important;
  color: #15803d !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin-top: 4px !important;
  display: inline-block !important;
}

/* ── 3. Fix: nt-size-postcode placeholder invisible ────────────
   Kadence's global input rule sets color:var(--global-palette4)
   which also bleeds into ::placeholder, making it invisible.
   Override explicitly for both postcode inputs in the card.   */

#nt-hero #nt-size-postcode {
  color: var(--nt-primary, #1e3a5f) !important;
  background: #fff !important;
  text-align: center !important;
  letter-spacing: 1px !important;
}

#nt-hero #nt-size-postcode::placeholder {
  color: #9ca3af !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  letter-spacing: 0.5px !important;
  text-transform: none !important;
  opacity: 1 !important;
}

#nt-hero #nt-postcode::placeholder {
  color: #9ca3af !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  letter-spacing: 0.5px !important;
  text-transform: none !important;
  opacity: 1 !important;
}

/* ── find-a-fitter: tyre size hero treatment ────────────────────
   .nt-tyre-size-hero is added to the <p class="nt-sub"> that we
   swapped to appear ABOVE .nt-title in steps 3 and 4.         */

.nt-tyre-size-hero {
  font-size: 20px !important;
  font-weight: 900 !important;
  color: var(--nt-primary, #1e3a5f) !important;
  letter-spacing: 0.5px !important;
  margin: 0 0 4px 0 !important;
  line-height: 1.2 !important;
}

/* Soften the title below it */
.nt-tyre-size-hero + .nt-title {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--nt-text-muted, #6b7280) !important;
  margin: 0 0 8px 0 !important;
}

/* ============================================================
 * WC BLOCKS CHECKOUT — order summary product price hiding
 * The per-tyre price (£46.79) and item subtotal (£93.58) shown
 * inside the product card are replaced by the fee rows below.
 * ============================================================ */
.wc-block-components-order-summary-item .wc-block-components-product-price,
.wc-block-components-order-summary-item .wc-block-formatted-money-amount,
.wc-block-components-order-summary-item__individual-prices {
  display: none !important;
}

/* ============================================================
 * CART TOTALS — Mobile responsive table fix
 * WooCommerce adds td::before { content: attr(data-title) ": " }
 * on small screens. Our custom rows have th labels already so
 * suppress the ::before on our rows and force single-row layout.
 * ============================================================ */
@media (max-width: 768px) {
  /* Suppress the "data-title: " pseudo-content on our rows */
  .cart_totals tr.nt-service-row td::before,
  .cart_totals tr.nt-breakdown-row td::before {
    display: none !important;
    content: "" !important;
    float: none !important;
  }

  /* Keep th and td side-by-side (table-cell) not stacked (block) */
  .cart_totals tr.nt-service-row,
  .cart_totals tr.nt-breakdown-row {
    display: table-row !important;
  }
  .cart_totals tr.nt-service-row th,
  .cart_totals tr.nt-breakdown-row th {
    display: table-cell !important;
    float: none !important;
    width: auto !important;
    padding-right: 8px !important;
  }
  .cart_totals tr.nt-service-row td,
  .cart_totals tr.nt-breakdown-row td {
    display: table-cell !important;
    float: none !important;
    text-align: right !important;
    width: auto !important;
  }
}

/* ============================================================
 * HOMEPAGE v2 — Services, How-It-Works, About
 * Matches About/Contact/FAQ visual language
 * ============================================================ */

/* ── Shared tokens ── */
.nt-section-badge {
  display: inline-block !important;
  background: rgba(245, 158, 11, 0.12) !important;
  border: 1px solid rgba(245, 158, 11, 0.35) !important;
  color: #f59e0b !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  padding: 5px 16px !important;
  border-radius: 100px !important;
  margin-bottom: 16px !important;
}
.nt-badge-gold {
  background: rgba(245, 158, 11, 0.18) !important;
  border-color: rgba(245, 158, 11, 0.5) !important;
  color: #fbbf24 !important;
}
.nt-head-v2 {
  text-align: center !important;
  margin-bottom: 52px !important;
}
.nt-head-v2 h2 {
  font-size: clamp(28px, 4vw, 48px) !important;
  font-weight: 800 !important;
  color: #1e3a5f !important;
  line-height: 1.15 !important;
  margin: 0 0 14px 0 !important;
}
.nt-sub-v2 {
  font-size: 17px !important;
  color: #64748b !important;
  max-width: 560px !important;
  margin: 0 auto !important;
  line-height: 1.65 !important;
}
.nt-gold {
  color: #f59e0b !important;
}

/* ── Services v2 ── */
.nt-section.nt-services-v2,
.nt-services-v2 {
  padding: 80px 0 !important;
  background: #f8fafc !important;
}
.nt-services-grid-v2 {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
  margin-bottom: 40px !important;
}

.nt-svc-card {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  background: #fff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 20px !important;
  padding: 32px 28px !important;
  text-decoration: none !important;
  color: #1e293b !important;
  position: relative !important;
  overflow: hidden !important;
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    border-color 0.22s ease !important;
  /* animate in */
  opacity: 0 !important;
  transform: translateY(24px) !important;
  animation: nt-fadeup 0.5s ease forwards !important;
  animation-delay: var(--card-delay, 0ms) !important;
}
.nt-svc-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 20px 48px rgba(30, 58, 95, 0.13) !important;
  border-color: #1e3a5f !important;
}
.nt-svc-card::before {
  content: "" !important;
  position: absolute !important;
  top: 0;
  left: 0;
  right: 0 !important;
  height: 3px !important;
  background: #e2e8f0 !important;
  border-radius: 3px 3px 0 0 !important;
  transition: background 0.22s !important;
}
.nt-svc-card:hover::before {
  background: #1e3a5f !important;
}

.nt-svc-card--featured {
  border-color: #1e3a5f !important;
  background: #1e3a5f !important;
  color: #fff !important;
}
.nt-svc-card--featured::before {
  background: #f59e0b !important;
}
.nt-svc-card--featured:hover {
  border-color: #f59e0b !important;
  box-shadow: 0 20px 48px rgba(30, 58, 95, 0.3) !important;
}
.nt-svc-card--featured .nt-svc-desc,
.nt-svc-card--featured .nt-svc-features span {
  color: rgba(255, 255, 255, 0.75) !important;
}
.nt-svc-card--featured .nt-svc-title {
  color: #fff !important;
}
.nt-svc-card--featured .nt-svc-num {
  color: rgba(255, 255, 255, 0.25) !important;
}
.nt-svc-card--featured .nt-svc-cta {
  color: #f59e0b !important;
}
.nt-svc-card--featured .nt-svc-icon-wrap {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #f59e0b !important;
}

.nt-svc-popular {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  background: #f59e0b !important;
  color: #1e3a5f !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  padding: 4px 10px !important;
  border-radius: 100px !important;
}

.nt-svc-icon-wrap {
  width: 60px !important;
  height: 60px !important;
  border-radius: 16px !important;
  background: rgba(30, 58, 95, 0.08) !important;
  color: #1e3a5f !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.nt-svc-num {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  color: #94a3b8 !important;
  text-transform: uppercase !important;
}

.nt-svc-title {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #1e3a5f !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}

.nt-svc-desc {
  font-size: 14px !important;
  color: #64748b !important;
  line-height: 1.65 !important;
  margin: 0 !important;
  flex: 1 !important;
}

.nt-svc-features {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}
.nt-svc-features span {
  font-size: 13px !important;
  color: #475569 !important;
  font-weight: 600 !important;
}

.nt-svc-cta {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #1e3a5f !important;
  margin-top: 4px !important;
}
.nt-svc-arrow {
  transition: transform 0.2s !important;
}
.nt-svc-card:hover .nt-svc-arrow {
  transform: translateX(4px) !important;
}

.nt-services-cta-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 20px !important;
  flex-wrap: wrap !important;
  background: rgba(30, 58, 95, 0.04) !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  padding: 20px 28px !important;
}
.nt-services-cta-bar p {
  margin: 0 !important;
  font-size: 15px !important;
  color: #64748b !important;
  font-weight: 500 !important;
}
.nt-btn-pill-outline {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  border: 2px solid #1e3a5f !important;
  color: #1e3a5f !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  padding: 10px 24px !important;
  border-radius: 100px !important;
  text-decoration: none !important;
  transition: all 0.2s !important;
  white-space: nowrap !important;
}
.nt-btn-pill-outline:hover {
  background: #1e3a5f !important;
  color: #fff !important;
}

/* ── How It Works v2 ── */
.nt-section.nt-how-v2,
.nt-how-v2 {
  padding: 80px 0 !important;
  background: #1e3a5f !important;
  position: relative !important;
  overflow: hidden !important;
}
.nt-how-v2::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(
    ellipse at 80% 30%,
    rgba(245, 158, 11, 0.1) 0%,
    transparent 60%
  ) !important;
  pointer-events: none !important;
}

.nt-steps-v2 {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 0 !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
}

.nt-step-v2 {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}

.nt-step-num-v2 {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  background: #f59e0b !important;
  color: #1e3a5f !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  z-index: 2 !important;
  position: relative !important;
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.2) !important;
}

.nt-step-connector {
  position: absolute !important;
  top: 24px !important;
  left: calc(50% + 24px) !important;
  right: calc(-50% + 24px) !important;
  height: 2px !important;
  background: rgba(245, 158, 11, 0.3) !important;
  z-index: 1 !important;
}
.nt-step-v2:last-child .nt-step-connector {
  display: none !important;
}

.nt-step-body {
  padding: 20px 16px 0 !important;
  flex: 1 !important;
}

.nt-step-icon {
  font-size: 28px !important;
  margin-bottom: 10px !important;
  display: block !important;
}

.nt-step-v2 h3 {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #fff !important;
  margin: 0 0 8px 0 !important;
  line-height: 1.3 !important;
}

.nt-step-v2 p {
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.65) !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}
.nt-step-v2 p strong {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* ── About v2 ── */
.nt-section.nt-about-v2,
.nt-about-v2 {
  padding: 80px 0 !important;
  background: #fff !important;
}

.nt-about-grid-v2 {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 72px !important;
  align-items: center !important;
}

.nt-about-text-v2 h2 {
  font-size: clamp(30px, 4vw, 48px) !important;
  font-weight: 800 !important;
  color: #1e3a5f !important;
  line-height: 1.15 !important;
  margin: 0 0 20px 0 !important;
}

.nt-about-intro {
  font-size: 16px !important;
  color: #64748b !important;
  line-height: 1.75 !important;
  margin: 0 0 28px 0 !important;
}

.nt-bullets-v2 {
  list-style: none !important;
  margin: 0 0 32px 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}
.nt-bullets-v2 li {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  font-size: 15px !important;
  color: #334155 !important;
  line-height: 1.5 !important;
}
.nt-bullet-check {
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  background: rgba(16, 185, 129, 0.12) !important;
  color: #10b981 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  margin-top: 1px !important;
}

.nt-about-ctas {
  display: flex !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

.nt-btn-pill-navy {
  display: inline-flex !important;
  align-items: center !important;
  background: #1e3a5f !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  padding: 13px 28px !important;
  border-radius: 100px !important;
  text-decoration: none !important;
  transition: all 0.2s !important;
  white-space: nowrap !important;
}
.nt-btn-pill-navy:hover {
  background: #152d4a !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(30, 58, 95, 0.3) !important;
}

.nt-btn-pill-outline-navy {
  display: inline-flex !important;
  align-items: center !important;
  background: transparent !important;
  border: 2px solid #1e3a5f !important;
  color: #1e3a5f !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  padding: 11px 26px !important;
  border-radius: 100px !important;
  text-decoration: none !important;
  transition: all 0.2s !important;
  white-space: nowrap !important;
}
.nt-btn-pill-outline-navy:hover {
  background: #1e3a5f !important;
  color: #fff !important;
}

/* About visual side */
.nt-about-visual {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.nt-about-media-card {
  position: relative !important;
  width: 360px !important;
  height: 360px !important;
  max-width: 100% !important;
}

.nt-about-tyre-graphic {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.nt-tyre-hero-svg {
  width: 280px !important;
  height: 280px !important;
  animation: nt-tyre-spin 18s linear infinite !important;
  filter: drop-shadow(0 16px 40px rgba(30, 58, 95, 0.25)) !important;
}

@keyframes nt-tyre-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.nt-about-stat {
  position: absolute !important;
  background: #fff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 14px !important;
  padding: 12px 16px !important;
  box-shadow: 0 4px 16px rgba(30, 58, 95, 0.1) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  min-width: 88px !important;
  animation: nt-stat-float 3s ease-in-out infinite alternate !important;
}
.nt-about-stat strong {
  font-size: 18px !important;
  font-weight: 900 !important;
  color: #1e3a5f !important;
  line-height: 1 !important;
  display: block !important;
}
.nt-about-stat span {
  font-size: 11px !important;
  color: #64748b !important;
  line-height: 1.3 !important;
  margin-top: 4px !important;
  display: block !important;
}
.nt-about-stat--tl {
  top: 10px;
  left: -10px;
  animation-delay: 0s !important;
}
.nt-about-stat--tr {
  top: 10px;
  right: -10px;
  animation-delay: 0.8s !important;
}
.nt-about-stat--bl {
  bottom: 10px;
  left: -10px;
  animation-delay: 1.6s !important;
}
.nt-about-stat--br {
  bottom: 10px;
  right: -10px;
  animation-delay: 0.4s !important;
}

@keyframes nt-stat-float {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-6px);
  }
}

/* Shared animation */
@keyframes nt-fadeup {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── RESPONSIVE ── */
@media (max-width: 991px) {
  .nt-services-grid-v2 {
    grid-template-columns: 1fr !important;
    max-width: 460px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .nt-steps-v2 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 32px !important;
  }
  .nt-step-connector {
    display: none !important;
  }
  .nt-about-grid-v2 {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
  }
  .nt-about-visual {
    order: -1 !important;
  }
  .nt-about-media-card {
    width: 300px !important;
    height: 300px !important;
  }
  .nt-tyre-hero-svg {
    width: 220px !important;
    height: 220px !important;
  }
  .nt-about-stat--tl,
  .nt-about-stat--tr,
  .nt-about-stat--bl,
  .nt-about-stat--br {
    padding: 8px 12px !important;
    min-width: 72px !important;
  }
  .nt-about-stat strong {
    font-size: 14px !important;
  }
}

@media (max-width: 600px) {
  .nt-steps-v2 {
    grid-template-columns: 1fr !important;
    max-width: 320px !important;
    margin: 0 auto !important;
  }
  .nt-services-cta-bar {
    flex-direction: column !important;
    text-align: center !important;
  }
  .nt-about-ctas {
    flex-direction: column !important;
  }
  .nt-about-media-card {
    width: 260px !important;
    height: 260px !important;
  }
  .nt-tyre-hero-svg {
    width: 180px !important;
    height: 180px !important;
  }
  .nt-about-stat {
    display: none !important;
  }
  .nt-section.nt-services-v2,
  .nt-services-v2,
  .nt-section.nt-how-v2,
  .nt-how-v2,
  .nt-section.nt-about-v2,
  .nt-about-v2 {
    padding: 60px 0 !important;
  }
}

/* ============================================================
 * WARRANTY CARD — Mobile overflow fix (find-a-fitter + cart)
 * ============================================================ */
@media (max-width: 600px) {
  .nt-warranty-section {
    padding: 14px !important;
    margin-bottom: 12px !important;
    overflow: hidden !important;
  }
  .nt-warranty-header {
    flex-direction: column !important;
    gap: 10px !important;
    align-items: flex-start !important;
  }
  .nt-warranty-icon {
    font-size: 24px !important;
  }
  .nt-warranty-content {
    width: 100% !important;
    min-width: 0 !important;
  }
  .nt-warranty-title {
    font-size: 15px !important;
  }
  .nt-warranty-desc {
    font-size: 13px !important;
  }
  .nt-warranty-check {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .nt-warranty-btn {
    padding: 0 14px !important;
    font-size: 13px !important;
    height: 34px !important;
  }
  /* Warranty radio buttons in find-a-fitter */
  .nt-warranty-radios {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .nt-warranty-radio-label {
    min-width: 0 !important;
    width: 100% !important;
    padding: 10px 12px !important;
    flex-wrap: nowrap !important;
  }
  .nt-warranty-radio-btn {
    font-size: 13px !important;
  }
  .nt-warranty-price {
    white-space: normal !important;
    font-size: 12px !important;
    flex-shrink: 0 !important;
  }
  /* Extra services grid - single col */
  .nt-extras-grid {
    grid-template-columns: 1fr !important;
  }
  .nt-cart-extras-wrap {
    overflow: hidden !important;
  }
}

/* ============================================================
 * CART TOTALS — Subtotal + Total rows full width on mobile
 * Covers tr.cart-subtotal and tr.order-total.
 * Kills WC responsive table td::before pseudo-element that
 * injects "data-title: " text causing double labels.
 * ============================================================ */
@media (max-width: 768px) {
  /* Table fills its container */
  body.woocommerce-cart .cart_totals,
  body.woocommerce-cart .cart_totals table {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Both rows become full-width flex */
  body.woocommerce-cart tr.cart-subtotal,
  body.woocommerce-cart tr.order-total {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  body.woocommerce-cart tr.cart-subtotal th,
  body.woocommerce-cart tr.cart-subtotal td,
  body.woocommerce-cart tr.order-total th,
  body.woocommerce-cart tr.order-total td {
    display: inline-flex !important;
    width: auto !important;
    float: none !important;
    box-sizing: border-box !important;
  }

  /* Kill td::before that injects "Subtotal: " / "Total: " duplicate text */
  .woocommerce-cart
    .shop_table.shop_table_responsive
    tr.cart-subtotal
    td::before,
  .woocommerce-cart
    .shop_table.shop_table_responsive
    tr.cart-subtotal
    th::before,
  .woocommerce-cart .shop_table.shop_table_responsive tr.order-total td::before,
  .woocommerce-cart .shop_table.shop_table_responsive tr.order-total th::before,
  body.woocommerce-cart tr.cart-subtotal td::before,
  body.woocommerce-cart tr.cart-subtotal th::before,
  body.woocommerce-cart tr.order-total td::before,
  body.woocommerce-cart tr.order-total th::before {
    content: none !important;
    display: none !important;
    float: none !important;
  }
}
/**
 * ============================================================
 * TYREROOM DIRECT - COMPREHENSIVE FIXES v4
 * ============================================================
 * 
 * FIXES INCLUDED:
 * 1. Cart: Service row remove button placement (next to service name)
 * 2. Cart: Hide tr.fee rows (duplicate services)
 * 3. Checkout Desktop: Hide native VAT row (appears before fees)
 * 4. Checkout Mobile: Hide duplicate order summary
 * 5. Checkout Mobile: Fix border issues on cards
 * 6. Checkout: Ensure VAT appears after fees
 * 
 * INSTRUCTIONS:
 * 1. In nt-enhancements.css, DELETE everything from line 5830 to end
 * 2. Add this CSS at the end of the file
 * 
 * ============================================================
 */

/* ============================================================
 * 1. CART: HIDE WC NATIVE FEE ROWS
 * ============================================================ */

body.woocommerce-cart .cart_totals tr.fee,
body.woocommerce-cart .cart_totals table tr.fee,
.woocommerce-cart .cart_totals tr.fee {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  opacity: 0 !important;
  position: absolute !important;
  left: -9999px !important;
}

body.woocommerce-cart .cart_totals tr.fee *,
.woocommerce-cart .cart_totals tr.fee * {
  display: none !important;
  height: 0 !important;
  padding: 0 !important;
}

/* ============================================================
 * 2. CART: SERVICE ROW STYLING - Button next to name
 * ============================================================ */

/* Desktop service rows */
body.woocommerce-cart .cart_totals tr.nt-service-row {
  display: table-row !important;
}

body.woocommerce-cart .cart_totals tr.nt-service-row th {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  padding: 10px 14px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  font-size: 13px !important;
  color: #1e3a5f !important;
}

body.woocommerce-cart .cart_totals tr.nt-service-row th .nt-service-name {
  order: 1 !important;
  flex: 0 0 auto !important;
}

body.woocommerce-cart .cart_totals tr.nt-service-row th .nt-service-remove {
  order: 2 !important;
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #ef4444 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 50% !important;
  font-size: 14px !important;
  font-weight: bold !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

body.woocommerce-cart
  .cart_totals
  tr.nt-service-row
  th
  .nt-service-remove:hover {
  background: #dc2626 !important;
  transform: scale(1.1) !important;
}

body.woocommerce-cart .cart_totals tr.nt-service-row td {
  padding: 10px 14px !important;
  text-align: right !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #1e3a5f !important;
}

/* ============================================================
 * 3. CART MOBILE: Full width rows with proper layout
 * ============================================================ */

@media screen and (max-width: 768px) {
  /* Hide fee rows on mobile too */
  body.woocommerce-cart .cart_totals tr.fee,
  body.woocommerce-cart tr.fee {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    left: -9999px !important;
  }

  /* Container */
  body.woocommerce-cart .cart_totals,
  body.woocommerce-cart .cart_totals table.shop_table {
    width: 100% !important;
  }

  body.woocommerce-cart .cart_totals table.shop_table tbody {
    display: block !important;
    width: 100% !important;
  }

  /* SUBTOTAL ROW */
  body.woocommerce-cart .cart_totals tr.cart-subtotal {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    padding: 12px 16px !important;
    border-bottom: 1px solid #e5e7eb !important;
    box-sizing: border-box !important;
  }

  body.woocommerce-cart .cart_totals tr.cart-subtotal th,
  body.woocommerce-cart .cart_totals tr.cart-subtotal td {
    display: block !important;
    width: auto !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    float: none !important;
  }

  body.woocommerce-cart .cart_totals tr.cart-subtotal th {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #6b7280 !important;
  }

  body.woocommerce-cart .cart_totals tr.cart-subtotal td {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #1e3a5f !important;
  }

  /* SERVICE ROWS - Name and × button on same line */
  body.woocommerce-cart .cart_totals tr.nt-service-row {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    padding: 10px 16px !important;
    border-bottom: 1px solid #e5e7eb !important;
    box-sizing: border-box !important;
  }

  body.woocommerce-cart .cart_totals tr.nt-service-row th {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    flex: 1 1 auto !important;
    width: auto !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #1e3a5f !important;
    text-transform: uppercase !important;
  }

  body.woocommerce-cart .cart_totals tr.nt-service-row th .nt-service-name {
    order: 1 !important;
  }

  body.woocommerce-cart .cart_totals tr.nt-service-row th .nt-service-remove {
    order: 2 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #ef4444 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 50% !important;
    font-size: 14px !important;
    font-weight: bold !important;
    cursor: pointer !important;
  }

  body.woocommerce-cart .cart_totals tr.nt-service-row td {
    display: block !important;
    flex: 0 0 auto !important;
    width: auto !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #1e3a5f !important;
  }

  /* VAT ROW */
  body.woocommerce-cart .cart_totals tr.nt-breakdown-row,
  body.woocommerce-cart .cart_totals tr.nt-breakdown-vat {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    padding: 10px 16px !important;
    border-bottom: 1px solid #e5e7eb !important;
    box-sizing: border-box !important;
  }

  body.woocommerce-cart .cart_totals tr.nt-breakdown-row th,
  body.woocommerce-cart .cart_totals tr.nt-breakdown-row td,
  body.woocommerce-cart .cart_totals tr.nt-breakdown-vat th,
  body.woocommerce-cart .cart_totals tr.nt-breakdown-vat td {
    display: block !important;
    width: auto !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
  }

  body.woocommerce-cart .cart_totals tr.nt-breakdown-row th,
  body.woocommerce-cart .cart_totals tr.nt-breakdown-vat th {
    font-size: 13px !important;
    color: #64748b !important;
  }

  body.woocommerce-cart .cart_totals tr.nt-breakdown-row td,
  body.woocommerce-cart .cart_totals tr.nt-breakdown-vat td {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #64748b !important;
  }

  /* TOTAL ROW */
  body.woocommerce-cart .cart_totals tr.order-total {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    padding: 14px 16px !important;
    border-top: 2px solid #1e3a5f !important;
    border-bottom: none !important;
    background: rgba(30, 58, 95, 0.03) !important;
    box-sizing: border-box !important;
  }

  body.woocommerce-cart .cart_totals tr.order-total th,
  body.woocommerce-cart .cart_totals tr.order-total td {
    display: block !important;
    width: auto !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
  }

  body.woocommerce-cart .cart_totals tr.order-total th {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #1e3a5f !important;
  }

  body.woocommerce-cart .cart_totals tr.order-total td {
    font-size: 18px !important;
    font-weight: 900 !important;
    color: #1e3a5f !important;
  }

  /* Kill ::before pseudo-elements */
  body.woocommerce-cart .cart_totals tr td::before,
  body.woocommerce-cart .cart_totals tr th::before {
    content: none !important;
    display: none !important;
  }
}

/* ============================================================
 * 4. CHECKOUT: Hide native VAT/Tax rows (they appear before fees)
 * ============================================================ */

/* Hide native WC tax component */
.wc-block-components-totals-taxes,
.wp-block-woocommerce-checkout-order-summary-totals-block
  .wc-block-components-totals-taxes {
  display: none !important;
}

/* Hide wrapper containing taxes */
.wc-block-components-totals-wrapper:has(.wc-block-components-totals-taxes) {
  display: none !important;
}

/* ============================================================
 * 5. CHECKOUT MOBILE: Hide duplicate order summary in main area
 * The collapsible header summary is shown, hide the inline one
 * ============================================================ */

/* On mobile, WC Blocks shows order summary TWICE:
   1. In the collapsible sidebar header (keep this)
   2. In the main content area below (hide this duplicate)
   
   The sidebar one has proper VAT ordering from our JS.
   The main area one gets VAT injected too early. */

@media screen and (max-width: 699px) {
  /* Hide the second order summary in main content on mobile */
  .wc-block-components-sidebar-layout.is-mobile
    .wc-block-components-main
    .wp-block-woocommerce-checkout-order-summary-block {
    display: none !important;
  }
}

/* ============================================================
 * 6. CHECKOUT MOBILE: Fix border issues
 * ============================================================ */

@media screen and (max-width: 768px) {
  /* Remove stray borders on checkout cards */
  body.woocommerce-checkout .wc-block-components-sidebar-layout.is-mobile,
  body.woocommerce-checkout .wc-block-checkout.is-mobile {
    border: none !important;
  }

  /* Fix billing address card borders */
  body.woocommerce-checkout
    .wp-block-woocommerce-checkout-billing-address-block,
  body.woocommerce-checkout .wc-block-checkout__billing-fields {
    border: none !important;
    box-shadow: none !important;
  }

  /* Fix payment options borders */
  body.woocommerce-checkout .wp-block-woocommerce-checkout-payment-block,
  body.woocommerce-checkout .wc-block-checkout__payment-method {
    border: none !important;
  }

  /* Fix contact info card */
  body.woocommerce-checkout
    .wp-block-woocommerce-checkout-contact-information-block {
    border: none !important;
  }

  /* Remove borders from fieldsets */
  body.woocommerce-checkout fieldset {
    border: none !important;
  }

  /* Clean up the step containers */
  body.woocommerce-checkout .wc-block-components-checkout-step {
    border: none !important;
    border-bottom: 1px solid #e5e7eb !important;
    padding-bottom: 20px !important;
    margin-bottom: 20px !important;
  }

  body.woocommerce-checkout .wc-block-components-checkout-step:last-child {
    border-bottom: none !important;
  }

  /* Fix footer borders */
  body.woocommerce-checkout footer,
  body.woocommerce-checkout .site-footer {
    border-top: none !important;
  }

  /* Remove any ::before or ::after borders */
  body.woocommerce-checkout .wc-block-components-checkout-step::before,
  body.woocommerce-checkout .wc-block-components-checkout-step::after {
    border: none !important;
    display: none !important;
  }
}

/* ============================================================
 * 7. CHECKOUT: Style our injected VAT row
 * ============================================================ */

.nt-vat-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 12px 0 !important;
}

.nt-vat-row .wc-block-components-totals-item__label {
  flex: 1 !important;
  color: #64748b !important;
  font-weight: 400 !important;
  font-size: 14px !important;
}

.nt-vat-row .wc-block-components-totals-item__value,
.nt-vat-row .wc-block-formatted-money-amount {
  color: #1e3a5f !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}

.nt-vat-wrapper {
  padding: 0 !important;
  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* Style for the nt-injected class (used in second summary) */
.nt-injected {
  display: none !important;
}

/**
 * ============================================================
 * ORDER SUMMARY EXPANDED BY DEFAULT - Add to nt-enhancements.css
 * ============================================================
 * 
 * Add this CSS at the very END of nt-enhancements.css
 * 
 * ============================================================
 */

/* ============================================================
 * CHECKOUT: ORDER SUMMARY EXPANDED BY DEFAULT
 * ============================================================ */

/* Force the order summary content to always be visible */
.wc-block-components-checkout-order-summary__content {
  display: block !important;
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Override any hidden state */
.wc-block-components-checkout-order-summary__content[hidden],
.wc-block-components-checkout-order-summary__content[aria-hidden="true"] {
  display: block !important;
  visibility: visible !important;
}

/* Mobile specific */
@media screen and (max-width: 699px) {
  /* Ensure content is visible on mobile */
  .wc-block-components-checkout-order-summary__content {
    display: block !important;
    max-height: 9999px !important;
    overflow: visible !important;
  }

  /* Rotate the arrow to indicate expanded state */
  .wc-block-components-checkout-order-summary__title svg,
  .wc-block-components-checkout-order-summary__button svg {
    transform: rotate(180deg) !important;
  }

  /* Ensure the summary block itself is visible */
  .wp-block-woocommerce-checkout-order-summary-block {
    display: block !important;
  }
}

/**
 * ============================================================
 * TYREROOM DIRECT - CSS FIXES v7
 * ============================================================
 * 
 * FIXES:
 * 1. VAT row alignment in checkout order summary
 * 2. Cart collaterals cut off / overflow issue
 * 
 * Add this to the END of nt-enhancements.css
 * 
 * ============================================================
 */

/* ============================================================
 * 1. CHECKOUT: VAT ROW ALIGNMENT
 * Match the styling of other totals items
 * ============================================================ */

/* VAT wrapper - match other wrappers */
.nt-vat-wrapper {
  padding: 0 !important;
  border-top: none !important;
}

/* VAT row - match other totals items exactly */
.nt-vat-row.wc-block-components-totals-item {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  padding: 16px 0 !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
}

/* VAT label - match other labels */
.nt-vat-row .wc-block-components-totals-item__label {
  flex: 1 1 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: rgb(30, 58, 95) !important;
  line-height: 1.5 !important;
  text-align: left !important;
}

/* VAT value - match other values */
.nt-vat-row .wc-block-components-totals-item__value {
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: right !important;
}

.nt-vat-row .wc-block-formatted-money-amount {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: rgb(30, 58, 95) !important;
  line-height: 1.5 !important;
}

/* Mobile checkout VAT row */
@media screen and (max-width: 699px) {
  .nt-vat-wrapper {
    padding: 0 16px !important;
  }

  .nt-vat-row.wc-block-components-totals-item {
    padding: 12px 0 !important;
  }
}

/* ============================================================
 * 2. CART PAGE: Fix cart-collaterals overflow
 * The issue is overflow: hidden on .cart_totals
 * ============================================================ */

/* Override the overflow hidden that's cutting off content */
body.woocommerce-cart .cart_totals {
  overflow: visible !important;
}

/* Make cart-collaterals wider to fit content */
body.woocommerce-cart .cart-collaterals {
  flex: 0 0 380px !important;
  width: 380px !important;
  min-width: 340px !important;
  max-width: 400px !important;
}

/* Ensure table doesn't overflow */
body.woocommerce-cart .cart_totals table.shop_table {
  width: 100% !important;
  table-layout: fixed !important;
}

/* Fix column widths */
body.woocommerce-cart .cart_totals table.shop_table th {
  width: 60% !important;
  text-align: left !important;
}

body.woocommerce-cart .cart_totals table.shop_table td {
  width: 40% !important;
  text-align: right !important;
}

/* Ensure service row content doesn't overflow */
body.woocommerce-cart .cart_totals tr.nt-service-row th {
  overflow: visible !important;
  white-space: normal !important;
  word-wrap: break-word !important;
}

/* Mobile: full width */
@media screen and (max-width: 768px) {
  body.woocommerce-cart .cart-collaterals {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}

/**
 * ============================================================
 * TYREROOM DIRECT - CHECKOUT FIXES v8
 * ============================================================
 * 
 * FIXES:
 * 1. Hide old nt-injected VAT row (duplicate)
 * 2. VAT row alignment to match other totals items exactly
 * 3. Header overlap with sticky sidebar on desktop
 * 
 * Add this to the END of nt-enhancements.css
 * 
 * ============================================================
 */

/* ============================================================
 * 1. HIDE OLD NT-INJECTED VAT ROW (DUPLICATE)
 * ============================================================ */

.nt-injected,
div.nt-injected,
.wc-block-components-totals-wrapper.nt-injected,
.wp-block-woocommerce-checkout-order-summary-fee-block.nt-injected,
.wc-block-components-totals-item.nt-injected,
.wc-block-components-totals-wrapper:has(> .nt-injected) {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  left: -9999px !important;
}

/* ============================================================
 * 2. VAT ROW ALIGNMENT - Match WooCommerce exactly
 * The key is matching the exact padding and structure
 * ============================================================ */

/* Remove any borders/padding from wrapper */
.nt-vat-wrapper.wc-block-components-totals-wrapper {
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
}

/* VAT row - copy exact styles from other .wc-block-components-totals-item */
.nt-vat-row.wc-block-components-totals-item {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  width: 100% !important;
  padding: 16px 0 !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
  box-sizing: border-box !important;
}

/* VAT label - match .wc-block-components-totals-item__label exactly */
.nt-vat-row .wc-block-components-totals-item__label {
  display: block !important;
  flex-grow: 1 !important;
  max-width: max-content !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: inherit !important;
  font-size: 0.875em !important;
  font-weight: 400 !important;
  line-height: 1.375 !important;
  color: inherit !important;
  text-transform: none !important;
}

/* VAT value container - match .wc-block-components-totals-item__value */
.nt-vat-row .wc-block-components-totals-item__value {
  display: block !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: inherit !important;
  font-weight: 600 !important;
  text-align: right !important;
}

/* VAT amount - match .wc-block-formatted-money-amount */
.nt-vat-row .wc-block-formatted-money-amount {
  font-family: inherit !important;
  font-size: 0.875em !important;
  font-weight: 600 !important;
  line-height: 1.375 !important;
  color: inherit !important;
}

/* ============================================================
 * 3. HEADER OVERLAP FIX - Sticky sidebar under header
 * The header is ~124px fixed. Sidebar needs top offset.
 * ============================================================ */

/* Desktop: offset sticky sidebar below fixed header */
@media screen and (min-width: 700px) {
  /* Target the sidebar that becomes sticky */
  body.woocommerce-checkout .wc-block-checkout__sidebar.is-sticky,
  .wc-block-components-sidebar-layout.wc-block-checkout
    .wc-block-checkout__sidebar.is-sticky,
  .wc-block-checkout__sidebar.is-sticky {
    top: 140px !important;
  }

  /* Also add padding to the main checkout container */
  body.woocommerce-checkout
    .wc-block-components-sidebar-layout.wc-block-checkout {
    padding-top: 20px !important;
  }

  /* Ensure sidebar doesn't overflow viewport */
  body.woocommerce-checkout .wc-block-checkout__sidebar {
    max-height: calc(100vh - 160px) !important;
    overflow-y: auto !important;
  }
}

/* Larger screens adjustment */
@media screen and (min-width: 1024px) {
  body.woocommerce-checkout .wc-block-checkout__sidebar.is-sticky {
    top: 130px !important;
  }
}

/* ============================================================
 * 4. ENSURE TOTALS LAYOUT CONSISTENCY
 * ============================================================ */

/* All totals items should have consistent styling */
.wp-block-woocommerce-checkout-order-summary-totals-block
  .wc-block-components-totals-item {
  padding: 16px 0 !important;
}

/* Fee items specifically */
.wc-block-components-totals-fees {
  padding: 16px 0 !important;
}

/* END OF CHECKOUT FIXES v8 */
/* END OF COMPREHENSIVE FIXES */

/**
 * ============================================================
 * TYREROOM DIRECT - FIXES v9
 * ============================================================
 * 
 * FIXES:
 * 1. Checkout VAT row alignment (uses exact WC styles)
 * 2. Cart service row double borders
 * 3. Cart service X button styling
 * 
 * Add this to the END of nt-enhancements.css
 * 
 * ============================================================
 */

/* ============================================================
 * 1. CHECKOUT: VAT ROW ALIGNMENT
 * Use exact same CSS as WooCommerce's native totals items
 * ============================================================ */

/* VAT wrapper should match fee wrappers */
.nt-vat-wrapper.wc-block-components-totals-wrapper {
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  border-top: 1px solid hsla(0, 0%, 7%, 0.11) !important;
  padding-bottom: 0 !important;
}

/* VAT row - exact copy of .wc-block-components-totals-item */
.nt-vat-row.wc-block-components-totals-item {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 16px 0 !important;
  box-sizing: border-box !important;
  border: none !important;
  background: none !important;
}

/* VAT label - exact copy of .wc-block-components-totals-item__label */
.nt-vat-row .wc-block-components-totals-item__label {
  flex-grow: 1 !important;
  flex-shrink: 0 !important;
  max-width: max-content !important;
  font-size: 0.875em !important;
  line-height: 1.375 !important;
  margin: 0 !important;
  padding: 0 !important;
  color: inherit !important;
  font-weight: normal !important;
}

/* VAT value - exact copy of money amount + value */
.nt-vat-row .wc-block-components-totals-item__value,
.nt-vat-row .wc-block-formatted-money-amount {
  flex-shrink: 0 !important;
  font-weight: 600 !important;
  font-size: 0.875em !important;
  line-height: 1.375 !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: right !important;
  color: inherit !important;
}

/* ============================================================
 * 2. CART: SERVICE ROW - FIX DOUBLE BORDERS
 * Remove duplicate borders from service rows
 * ============================================================ */

/* Remove border from th when td already has it */
body.woocommerce-cart .cart_totals table tr.nt-service-row th {
  border-bottom: none !important;
}

/* Only td should have the border */
body.woocommerce-cart .cart_totals table tr.nt-service-row td {
}

/* Last service row before VAT - no border */
body.woocommerce-cart .cart_totals table tr.nt-service-row:last-of-type td,
body.woocommerce-cart .cart_totals table tr.nt-service-row:last-of-type th {
  border-bottom: none !important;
}

/* VAT breakdown row border */
body.woocommerce-cart .cart_totals table tr.nt-breakdown-vat th,
body.woocommerce-cart .cart_totals table tr.nt-breakdown-vat td {
  border-bottom: none !important;
}

/* ============================================================
 * 3. CART: SERVICE X BUTTON - IMPROVED STYLING
 * Cleaner, more visible remove button
 * ============================================================ */

/* Reset the service row th to use flexbox properly */
body.woocommerce-cart .cart_totals table tr.nt-service-row th {
  display: table-cell !important;
  vertical-align: middle !important;
  padding: 12px 16px !important;
}

/* Inner flex container for name + button */
body.woocommerce-cart .cart_totals tr.nt-service-row th > span.nt-service-name,
body.woocommerce-cart .cart_totals tr.nt-service-row th .nt-service-name {
  display: inline-block !important;
  vertical-align: middle !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--nt-primary, #1e3a5f) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
}

/* X button styling - small red circle */
body.woocommerce-cart
  .cart_totals
  tr.nt-service-row
  th
  button.nt-service-remove,
body.woocommerce-cart .cart_totals tr.nt-service-row th .nt-service-remove,
body.woocommerce-cart .nt-service-remove {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  padding: 0 !important;
  margin-left: 8px !important;
  background: #ef4444 !important;
  border: none !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  vertical-align: middle !important;
  font-size: 12px !important;
  font-weight: bold !important;
  color: #fff !important;
  line-height: 1 !important;
  transition:
    background-color 0.2s ease,
    transform 0.15s ease !important;
}

body.woocommerce-cart .nt-service-remove:hover {
  background: #dc2626 !important;
  transform: scale(1.1) !important;
}

/* X icon inside the button */
body.woocommerce-cart .nt-service-remove::before {
  content: "×" !important;
  font-size: 14px !important;
  font-weight: bold !important;
  line-height: 1 !important;
}

/* Hide any SVG inside (if present) */
body.woocommerce-cart .nt-service-remove svg {
  display: none !important;
}

/* ============================================================
 * 4. CART: GENERAL SERVICE ROW CLEANUP
 * ============================================================ */

/* Ensure consistent row height */
body.woocommerce-cart .cart_totals table tr.nt-service-row {
  height: auto !important;
}

/* Price cell alignment */
body.woocommerce-cart .cart_totals table tr.nt-service-row td {
  text-align: right !important;
  padding: 12px 16px !important;
  font-weight: 700 !important;
  color: var(--nt-primary, #1e3a5f) !important;
  vertical-align: middle !important;
}

/* ============================================================
 * 5. CHECKOUT: STICKY SIDEBAR - HEADER OFFSET
 * ============================================================ */

@media screen and (min-width: 700px) {
  body.woocommerce-checkout .wc-block-checkout__sidebar.is-sticky,
  .wc-block-checkout__sidebar.is-sticky {
    top: 140px !important;
  }
}

/* END OF FIXES v9 */

/**
 * ============================================================
 * TYREROOM DIRECT - TARGETED FIXES v10
 * ============================================================
 * 
 * FIXES:
 * 1. Cart: Remove duplicate X button (::before was adding second ×)
 * 2. Checkout: VAT row padding override (checkout.css adds 16px padding)
 * 
 * Add this to the END of nt-enhancements.css
 * 
 * ============================================================
 */

/* ============================================================
 * 1. CART: FIX DOUBLE X BUTTON
 * The button already has "x" content, remove the ::before
 * ============================================================ */

/* Remove the ::before pseudo-element that was adding a duplicate × */
body.woocommerce-cart .nt-service-remove::before,
body.woocommerce-cart .cart_totals .nt-service-remove::before,
body.woocommerce-cart button.nt-service-remove::before {
  content: none !important;
  display: none !important;
}

/* Style the button itself (it already contains "x" text) */
body.woocommerce-cart
  .cart_totals
  tr.nt-service-row
  th
  button.nt-service-remove,
body.woocommerce-cart .nt-service-remove,
body.woocommerce-cart button.nt-service-remove {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  padding: 0 !important;
  margin-left: 8px !important;
  background: #ef4444 !important;
  border: none !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  vertical-align: middle !important;
  font-size: 12px !important;
  font-weight: bold !important;
  color: #fff !important;
  line-height: 1 !important;
  text-align: center !important;
  transition:
    background-color 0.2s ease,
    transform 0.15s ease !important;
}

body.woocommerce-cart .nt-service-remove:hover,
body.woocommerce-cart button.nt-service-remove:hover {
  background: #dc2626 !important;
  transform: scale(1.1) !important;
}

/* ============================================================
 * 2. CHECKOUT: VAT ROW PADDING FIX
 * checkout.css adds padding-left/right: 16px which misaligns VAT
 * We need to remove this padding to match other rows
 * ============================================================ */

/* Override the checkout.css padding on the VAT row */
.wc-block-components-sidebar .nt-vat-row.wc-block-components-totals-item,
.wc-block-checkout__sidebar .nt-vat-row.wc-block-components-totals-item,
div.nt-vat-row.wc-block-components-totals-item {
  padding-left: 16px !important;
  padding-right: 16px !important;
  padding-top: 16px !important;
  padding-bottom: 16px !important;
  margin: 0 !important;
}

/* Also ensure the wrapper has no extra padding */
.nt-vat-wrapper.wc-block-components-totals-wrapper {
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  border-top: 1px solid hsla(0, 0%, 7%, 0.11) !important;
}

/* Match the exact structure of other totals items */
.nt-vat-row .wc-block-components-totals-item__label {
  flex-grow: 1 !important;
  font-size: 0.875em !important;
  line-height: 1.375 !important;
  font-weight: normal !important;
  padding: 0 !important;
  margin: 0 !important;
}

.nt-vat-row .wc-block-components-totals-item__value,
.nt-vat-row .wc-block-formatted-money-amount {
  font-size: 0.875em !important;
  font-weight: 600 !important;
  line-height: 1.375 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* END OF TARGETED FIXES v10 */

/**
 * ============================================================
 * TYREROOM DIRECT - CART PAGE CLEANUP v1
 * ============================================================
 * 
 * FIXES:
 * 1. Hide redundant services section on cart (can restore later)
 * 2. Style for "Back to Booking" button
 * 3. General cart improvements
 * 
 * Add this to the END of nt-enhancements.css
 * 
 * ============================================================
 */

/* ============================================================
 * 1. HIDE SERVICE REMOVE BUTTONS ON CART
 * The user already selected services in step 3
 * Services still show in totals, but can't be removed from cart
 * Hidden (not removed) so it can be restored if needed
 * ============================================================ */

/* Option A: Hide only the remove buttons (services still visible, just not removable) */
body.woocommerce-cart .cart_totals .nt-service-remove,
body.woocommerce-cart .cart_totals button.nt-service-remove,
body.woocommerce-cart .cart_totals .nt-warranty-remove {
  display: none !important;
  visibility: hidden !important;
}

/* OR Option B: Hide entire service rows (uncomment if you want services completely hidden) */
/*
body.woocommerce-cart .cart_totals tr.nt-service-row,
body.woocommerce-cart .cart_totals tr.nt-warranty-row {
  display: none !important;
}
*/

/* Hide any "Add Services" sections that might exist */
body.woocommerce-cart .nt-services-section,
body.woocommerce-cart .nt-cart-services,
body.woocommerce-cart .cart-services-wrapper,
body.woocommerce-cart [class*="services-selection"],
body.woocommerce-cart .woocommerce-cart-form ~ .nt-services,
body.woocommerce-cart #nt-cart-services,
body.woocommerce-cart .nt-add-services-section {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Hide any "Add extras" buttons if present */
body.woocommerce-cart .add-extras-btn,
body.woocommerce-cart .nt-add-services-btn {
  display: none !important;
}

/* ============================================================
 * 2. BACK TO BOOKING BUTTON
 * Add a styled button to return to the booking flow
 * ============================================================ */

.nt-cart-back-btn,
.nt-back-to-booking {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: var(--nt-white, #ffffff);
  color: var(--nt-primary, #1e3a5f);
  border: 2px solid var(--nt-primary, #1e3a5f);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  transition: all 0.15s ease;
  cursor: pointer;
}

.nt-cart-back-btn:hover,
.nt-back-to-booking:hover {
  background: var(--nt-primary, #1e3a5f);
  color: var(--nt-white, #ffffff);
}

.nt-cart-back-btn svg,
.nt-back-to-booking svg {
  width: 16px;
  height: 16px;
}

/* ============================================================
 * 3. CART ACTIONS ROW - IMPROVED LAYOUT
 * Better spacing between back button and proceed to checkout
 * ============================================================ */

body.woocommerce-cart .cart-actions-row,
body.woocommerce-cart .nt-cart-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
  flex-wrap: wrap;
}

/* On mobile, stack the buttons */
@media (max-width: 600px) {
  body.woocommerce-cart .cart-actions-row,
  body.woocommerce-cart .nt-cart-actions {
    flex-direction: column;
  }

  body.woocommerce-cart .nt-cart-back-btn,
  body.woocommerce-cart .nt-back-to-booking {
    width: 100%;
    justify-content: center;
  }
}

/* ============================================================
 * 4. CART TOTALS - KEEP CLEAN
 * Ensure the totals section is clean and readable
 * ============================================================ */

/* Cart totals header stays clean */
body.woocommerce-cart .cart_totals h2 {
  font-size: 16px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--nt-white, #ffffff);
  background: var(--nt-primary, #1e3a5f);
  padding: 14px 18px;
  margin: 0;
  border-radius: 12px 12px 0 0;
}

/* Selected extras shown as simple text, not editable */
body.woocommerce-cart .cart_totals .nt-selected-extras-summary {
  font-size: 13px;
  color: var(--nt-text-muted, #6b7280);
  padding: 8px 18px;
  background: var(--nt-bg, #f9fafb);
  border-bottom: 1px solid var(--nt-border, #e5e7eb);
}

/* END OF CART CLEANUP v1 */
/**
 * ============================================================
 * TYREROOM DIRECT - TARGETED FIXES v10
 * ============================================================
 * 
 * FIXES:
 * 1. Cart: Remove duplicate X button (::before was adding second ×)
 * 2. Checkout: VAT row padding override (checkout.css adds 16px padding)
 * 
 * Add this to the END of nt-enhancements.css
 * 
 * ============================================================
 */

/* ============================================================
 * 1. CART: FIX DOUBLE X BUTTON
 * The button already has "x" content, remove the ::before
 * ============================================================ */

/* Remove the ::before pseudo-element that was adding a duplicate × */
body.woocommerce-cart .nt-service-remove::before,
body.woocommerce-cart .cart_totals .nt-service-remove::before,
body.woocommerce-cart button.nt-service-remove::before {
  content: none !important;
  display: none !important;
}

/* Style the button itself (it already contains "x" text) */
body.woocommerce-cart
  .cart_totals
  tr.nt-service-row
  th
  button.nt-service-remove,
body.woocommerce-cart .nt-service-remove,
body.woocommerce-cart button.nt-service-remove {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  padding: 0 !important;
  margin-left: 8px !important;
  background: #ef4444 !important;
  border: none !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  vertical-align: middle !important;
  font-size: 12px !important;
  font-weight: bold !important;
  color: #fff !important;
  line-height: 1 !important;
  text-align: center !important;
  transition:
    background-color 0.2s ease,
    transform 0.15s ease !important;
}

body.woocommerce-cart .nt-service-remove:hover,
body.woocommerce-cart button.nt-service-remove:hover {
  background: #dc2626 !important;
  transform: scale(1.1) !important;
}

/* ============================================================
 * 2. CHECKOUT: VAT ROW PADDING FIX
 * checkout.css adds padding-left/right: 16px which misaligns VAT
 * We need to remove this padding to match other rows
 * ============================================================ */

/* Override the checkout.css padding on the VAT row */
.wc-block-components-sidebar .nt-vat-row.wc-block-components-totals-item,
.wc-block-checkout__sidebar .nt-vat-row.wc-block-components-totals-item,
div.nt-vat-row.wc-block-components-totals-item {
  padding-left: 16px !important;
  padding-right: 16px !important;
  padding-top: 16px !important;
  padding-bottom: 16px !important;
  margin: 0 !important;
}

/* Also ensure the wrapper has no extra padding */
.nt-vat-wrapper.wc-block-components-totals-wrapper {
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  border-top: 1px solid hsla(0, 0%, 7%, 0.11) !important;
}

/* Match the exact structure of other totals items */
.nt-vat-row .wc-block-components-totals-item__label {
  flex-grow: 1 !important;
  font-size: 0.875em !important;
  line-height: 1.375 !important;
  font-weight: normal !important;
  padding: 0 !important;
  margin: 0 !important;
}

.nt-vat-row .wc-block-components-totals-item__value,
.nt-vat-row .wc-block-formatted-money-amount {
  font-size: 0.875em !important;
  font-weight: 600 !important;
  line-height: 1.375 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* END OF TARGETED FIXES v10 */
/* ============================================================
 * ACCORDION UI - FIND A FITTER PAGE
 * Override Kadence global button styles for accordion toggles
 * ============================================================ */

/* Reset Kadence button styles on accordion toggle */
.nt-results-wrap .nt-accordion .nt-accordion-section button.nt-accordion-toggle,
.nt-accordion button.nt-accordion-toggle,
button.nt-accordion-toggle,
.nt-accordion-toggle {
  all: unset !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  width: 100% !important;
  padding: 20px 24px !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: none !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  text-align: left !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
  color: inherit !important;
  font-size: inherit !important;
  font-weight: normal !important;
  line-height: normal !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  text-decoration: none !important;
  margin: 0 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

.nt-results-wrap
  .nt-accordion
  .nt-accordion-section
  button.nt-accordion-toggle:hover,
.nt-accordion button.nt-accordion-toggle:hover,
button.nt-accordion-toggle:hover,
.nt-accordion-toggle:hover {
  background: #f9fafb !important;
  background-color: #f9fafb !important;
  box-shadow: none !important;
  transform: none !important;
  color: inherit !important;
}

.nt-results-wrap
  .nt-accordion
  .nt-accordion-section
  button.nt-accordion-toggle:focus,
.nt-accordion button.nt-accordion-toggle:focus,
button.nt-accordion-toggle:focus,
.nt-accordion-toggle:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* Accordion section container */
.nt-accordion {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.nt-accordion-section {
  background: #ffffff !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
  border: 1px solid #e5e7eb !important;
  overflow: hidden !important;
}

/* Service icon boxes */
.nt-service-icon-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  max-width: 52px !important;
  min-height: 52px !important;
  max-height: 52px !important;
  border-radius: 14px !important;
  flex-shrink: 0 !important;
  color: #ffffff !important;
  overflow: hidden !important;
}

.nt-service-icon-wrap.station {
  background: #1e3a5f !important;
}
.nt-service-icon-wrap.mobile {
  background: #0f766e !important;
}
.nt-service-icon-wrap.mail {
  background: #7c3aed !important;
}

.nt-service-icon-wrap svg {
  width: 26px !important;
  height: 26px !important;
  max-width: 26px !important;
  max-height: 26px !important;
  flex-shrink: 0 !important;
}

/* Accordion info text */
.nt-accordion-info {
  flex: 1 !important;
  min-width: 0 !important;
}

.nt-accordion-title {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

.nt-accordion-title h3 {
  font-size: 17px !important;
  font-weight: 800 !important;
  color: #1e3a5f !important;
  margin: 0 !important;
}

.nt-fitter-count {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #6b7280 !important;
  background: #f9fafb !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
}

.nt-accordion-desc {
  font-size: 14px !important;
  color: #6b7280 !important;
  margin: 4px 0 0 0 !important;
}

/* Chevron arrow */
.nt-accordion-chevron {
  width: 24px !important;
  height: 24px !important;
  max-width: 24px !important;
  max-height: 24px !important;
  color: #6b7280 !important;
  transition: transform 0.2s ease !important;
  flex-shrink: 0 !important;
}

.nt-accordion-section.is-open .nt-accordion-chevron {
  transform: rotate(180deg) !important;
}

/* Accordion body */
.nt-accordion-body {
  display: none !important;
  border-top: 1px solid #e5e7eb !important;
}

.nt-accordion-section.is-open .nt-accordion-body {
  display: block !important;
}

/* Fitter list */
.nt-fitter-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  display: block !important;
}

/* Fitter item - the list item row */
li.nt-fitter-item,
.nt-fitter-list li,
.nt-fitter-list > li,
.nt-fitter-item {
  list-style: none !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 16px 24px !important;
  border-bottom: 1px solid #e5e7eb !important;
  transition: background 0.15s ease !important;
  background: #ffffff !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.nt-fitter-item:last-child {
  border-bottom: none !important;
}

.nt-fitter-item:hover {
  background: rgba(30, 58, 95, 0.02) !important;
}

.nt-fitter-item.no-stock {
  opacity: 0.6 !important;
}

/* Fitter info - takes remaining space */
.nt-fitter-info,
div.nt-fitter-info,
.nt-fitter-item > .nt-fitter-info,
.nt-fitter-item div.nt-fitter-info {
  flex: 1 1 auto !important;
  flex-grow: 1 !important;
  flex-shrink: 1 !important;
  flex-basis: auto !important;
  min-width: 100px !important;
  width: auto !important;
  max-width: none !important;
  display: block !important;
  overflow: hidden !important;
}

/* Fitter name */
.nt-fitter-name,
h4.nt-fitter-name,
.nt-fitter-info h4,
.nt-fitter-info .nt-fitter-name {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #1e3a5f !important;
  margin: 0 0 4px 0 !important;
  display: block !important;
  width: 100% !important;
}

/* Fitter address */
.nt-fitter-address,
p.nt-fitter-address,
.nt-fitter-info p,
.nt-fitter-info .nt-fitter-address {
  font-size: 13px !important;
  color: #6b7280 !important;
  margin: 0 0 8px 0 !important;
  display: block !important;
  width: 100% !important;
}

.nt-fitter-features {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-top: 8px !important;
}

.nt-fitter-feature {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #10b981 !important;
  background: #ecfdf5 !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
}

/* Stock badges */
.nt-stock-badge {
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
}

.nt-stock-badge.in-stock {
  color: #166534 !important;
  background: #dcfce7 !important;
}

.nt-stock-badge.no-stock {
  color: #9a3412 !important;
  background: #fed7aa !important;
}

/* Book button */
.nt-fitter-item .nt-book-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: #1e3a5f !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 10px 18px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
  cursor: pointer !important;
  transition:
    background 0.15s ease,
    transform 0.15s ease !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

.nt-fitter-item .nt-book-btn:hover {
  background: #2d4a70 !important;
  transform: translateY(-1px) !important;
  color: #ffffff !important;
}

.nt-fitter-item .nt-book-btn.disabled {
  background: #10b981 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.nt-fitter-item .nt-book-btn svg {
  width: 14px !important;
  height: 14px !important;
  max-width: 14px !important;
  max-height: 14px !important;
}

/* No stock warning banner */
.nt-no-stock-banner {
  background: #fef3c7 !important;
  border: 1px solid #f59e0b !important;
  padding: 20px !important;
  border-radius: 14px !important;
  margin-bottom: 24px !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 16px !important;
}

.nt-no-stock-banner svg {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  max-width: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;
  color: #d97706 !important;
  flex-shrink: 0 !important;
  margin-top: 2px !important;
}

.nt-no-stock-banner h3 {
  margin: 0 0 6px 0 !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #92400e !important;
}

.nt-no-stock-banner p {
  margin: 0 !important;
  font-size: 14px !important;
  color: #a16207 !important;
  line-height: 1.5 !important;
}

.nt-no-stock-banner a {
  color: #92400e !important;
  font-weight: 700 !important;
}

/* Empty state */
.nt-empty-state {
  padding: 32px 24px !important;
  text-align: center !important;
  color: #6b7280 !important;
  font-size: 14px !important;
}

/* Mobile responsive - scoped to accordion only */
@media (max-width: 600px) {
  .nt-results-wrap .nt-accordion button.nt-accordion-toggle,
  .nt-accordion button.nt-accordion-toggle,
  button.nt-accordion-toggle,
  .nt-accordion-toggle {
    padding: 16px !important;
    gap: 12px !important;
  }

  .nt-service-icon-wrap {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    border-radius: 10px !important;
  }

  .nt-service-icon-wrap svg {
    width: 22px !important;
    height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
  }

  .nt-accordion-title h3 {
    font-size: 15px !important;
  }

  .nt-accordion-desc {
    display: none !important;
  }

  /* Accordion fitter items only - NOT tab panels */
  .nt-accordion li.nt-fitter-item,
  .nt-accordion .nt-fitter-item {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 16px !important;
    gap: 12px !important;
  }

  .nt-accordion .nt-fitter-info,
  .nt-accordion div.nt-fitter-info {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
  }

  .nt-accordion .nt-fitter-item .nt-book-btn {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* END ACCORDION UI STYLES */

/* ============================================================
 * FITTER INFO FIX - Force proper flex layout
 * ============================================================ */

/* Force the fitter list to be a proper container */
.nt-accordion-body .nt-fitter-list,
.nt-fitter-list {
  display: block !important;
  width: 100% !important;
}

/* Force each fitter item to be a proper flex row */
.nt-accordion-body .nt-fitter-list .nt-fitter-item,
.nt-fitter-list .nt-fitter-item,
.nt-fitter-list li.nt-fitter-item,
li.nt-fitter-item {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Force fitter-info to take available space */
.nt-fitter-item > div.nt-fitter-info,
.nt-fitter-item .nt-fitter-info,
div.nt-fitter-info {
  display: block !important;
  flex: 1 1 0% !important;
  flex-grow: 1 !important;
  width: 0 !important;
  min-width: 0 !important;
}

/* Force button to not grow */
.nt-fitter-item > a.nt-book-btn,
.nt-fitter-item .nt-book-btn,
a.nt-book-btn {
  flex: 0 0 auto !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
}

/* CRITICAL FIX: Force fitter-info to have width */
.nt-fitter-item > .nt-fitter-info,
li.nt-fitter-item > .nt-fitter-info,
.nt-fitter-list li > .nt-fitter-info {
  flex: 1 1 auto !important;
  min-width: 150px !important;
  width: calc(100% - 160px) !important;
}

@media (max-width: 768px) {
  /* Accordion fitter info only */
  .nt-accordion .nt-fitter-item > .nt-fitter-info,
  .nt-accordion li.nt-fitter-item > .nt-fitter-info,
  .nt-accordion .nt-fitter-list li > .nt-fitter-info {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }
}

/* ============================================================
 * MOBILE CHECKOUT & CART FIXES
 * ============================================================ */

/* Fix cart form overflow on mobile */
@media (max-width: 768px) {
  /* AGGRESSIVE RESET - Fix cart shifted to right */
  body.woocommerce-cart {
    overflow-x: hidden !important;
  }
  
  body.woocommerce-cart .site-container,
  body.woocommerce-cart .site-main,
  body.woocommerce-cart .content-container,
  body.woocommerce-cart .content-wrap,
  body.woocommerce-cart #primary,
  body.woocommerce-cart #primary.content-area,
  body.woocommerce-cart .entry-content-wrap,
  body.woocommerce-cart .entry-content,
  body.woocommerce-cart .single-content,
  body.woocommerce-cart article,
  body.woocommerce-cart article.page {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow-x: hidden !important;
  }
  
  /* Main WooCommerce wrapper - small padding */
  body.woocommerce-cart .woocommerce {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 12px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }
  
  /* Cart form wrapper - remove flex, use block */
  body.woocommerce-cart .kadence-woo-cart-form-wrap {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
  
  /* Cart form itself */
  body.woocommerce-cart form.woocommerce-cart-form {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  
  /* Cart collaterals (totals section) */
  body.woocommerce-cart .cart-collaterals,
  body.woocommerce-cart .cart_totals {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /* Shop table */
  body.woocommerce-cart table.shop_table,
  body.woocommerce-cart .shop_table {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
    box-sizing: border-box !important;
  }

  body.woocommerce-cart .shop_table td,
  body.woocommerce-cart .shop_table th {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
  
  /* Coupon input full width */
  body.woocommerce-cart .coupon {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
  }
  
  body.woocommerce-cart .coupon input[type="text"] {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  body.woocommerce-cart .coupon button {
    width: 100% !important;
  }

  /* Global reset for all cart children */
  body.woocommerce-cart .woocommerce *,
  body.woocommerce-cart .kadence-woo-cart-form-wrap * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Cart summary box */
  body.woocommerce-cart div.cart-summary {
    padding: 12px !important;
  }
  
  /* Quantity controls */
  body.woocommerce-cart .quantity {
    min-width: 80px !important;
  }
  
  /* Actions row */
  body.woocommerce-cart .actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: 12px !important;
    width: 100% !important;
  }
  
  body.woocommerce-cart .actions button {
    width: 100% !important;
  }
  
  /* MOBILE CHECKOUT - Full width fields */
  body.woocommerce-checkout .woocommerce,
  body.woocommerce-checkout .entry-content {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  body.woocommerce-checkout .wc-block-checkout,
  body.woocommerce-checkout .wp-block-woocommerce-checkout {
    padding: 0 8px !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* Checkout form wrapper full width */
  body.woocommerce-checkout .wc-block-components-main,
  body.woocommerce-checkout .wc-block-checkout__main {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }
  
  /* Form fields full width on mobile */
  body.woocommerce-checkout .wc-block-components-text-input,
  body.woocommerce-checkout .wc-block-components-address-form > div,
  body.woocommerce-checkout .wc-block-components-checkout-step__content > div {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* Address form grid - single column on mobile */
  body.woocommerce-checkout .wc-block-components-address-form {
    display: block !important;
    width: 100% !important;
  }
  
  /* Hide country field on mobile */
  body.woocommerce-checkout .wc-block-components-address-form__country,
  body.woocommerce-checkout .wc-block-components-country-input,
  body.woocommerce-checkout div[class*="country"] {
    display: none !important;
  }
  
  /* Reduce header area padding */
  body.woocommerce-checkout .entry-hero,
  body.woocommerce-checkout .page-hero-section {
    padding: 16px !important;
    min-height: auto !important;
  }
}

/* ============================================================
 * CHECKOUT LAYOUT IMPROVEMENTS
 * ============================================================ */

/* Hide country dropdown - always UK */
.wc-block-components-country-input,
.wc-block-components-address-form__country,
.wc-block-components-address-form__country-input,
.wc-blocks-components-select.wc-blocks-components-country-select,
div.wc-block-components-address-form__country,
div[class*="country-input"],
#billing_country_field,
#shipping_country_field,
.woocommerce-billing-fields .form-row.address-field.validate-country,
.woocommerce-shipping-fields .form-row.address-field.validate-country {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* FIX: Hide address card completely when in editing mode */
.wc-block-components-address-address-wrapper.is-editing
  .wc-block-components-address-card-wrapper {
  display: none !important;
}

/* Improved label styling - less opaque */
.wc-block-components-text-input label,
.wc-block-components-address-form label,
.wc-block-checkout label,
.woocommerce-checkout label {
  color: var(--nt-text, #374151) !important;
  opacity: 1 !important;
  font-weight: 500 !important;
  font-size: 13px !important;
}

/* Floating labels when focused/filled */
.wc-block-components-text-input.is-active label,
.wc-block-components-text-input.has-value label {
  color: var(--nt-primary, #1e3a5f) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}

/* Input field styling improvements */
.wc-block-components-text-input input,
.wc-block-components-text-input textarea,
.wc-block-components-address-form input,
.wc-block-components-address-form textarea,
.wc-block-components-address-form select {
  border: 1.5px solid #d1d5db !important;
  border-radius: 10px !important;
  padding: 14px 16px !important;
  font-size: 15px !important;
  color: var(--nt-text, #1f2937) !important;
  background: #fff !important;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease !important;
}

.wc-block-components-text-input input:focus,
.wc-block-components-text-input textarea:focus,
.wc-block-components-address-form input:focus,
.wc-block-components-address-form select:focus {
  border-color: var(--nt-primary, #1e3a5f) !important;
  box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.1) !important;
  outline: none !important;
}

/* Address card styling - only when NOT editing (card is visible) */
.wc-block-components-address-address-wrapper:not(.is-editing)
  .wc-block-components-address-card-wrapper {
  display: block !important;
  position: relative !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.wc-block-components-address-card,
.wc-block-components-address-address-wrapper:not(.is-editing)
  .wc-block-components-address-card {
  border: 1.5px solid #e5e7eb !important;
  border-radius: 12px !important;
  padding: 16px !important;
  padding-right: 100px !important; /* Space for edit button */
  background: #f9fafb !important;
  position: relative !important;
}

/* Address text styling */
.wc-block-components-address-card address {
  font-style: normal !important;
  color: var(--nt-text, #374151) !important;
  line-height: 1.6 !important;
  font-size: 14px !important;
}

/* Edit button styling */
.wc-block-components-address-card__edit,
span.wc-block-components-address-card__edit,
button.wc-block-components-address-card__edit {
  position: absolute !important;
  top: 50% !important;
  right: 12px !important;
  transform: translateY(-50%) !important;
  padding: 8px 14px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--nt-primary, #1e3a5f) !important;
  background: #fff !important;
  border: 1.5px solid var(--nt-primary, #1e3a5f) !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
}

.wc-block-components-address-card__edit:hover {
  background: var(--nt-primary, #1e3a5f) !important;
  color: #fff !important;
}

/* Checkout section headers */
.wc-block-checkout__contact-fields h3,
.wc-block-checkout__billing-fields h3,
.wc-block-checkout__shipping-fields h3,
.wc-block-checkout__payment-method h3,
.wc-block-components-checkout-step__heading {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #fff !important;
  background: var(--nt-primary, #1e3a5f) !important;
  padding: 12px 16px !important;
  border-radius: 10px 10px 0 0 !important;
  margin: 0 !important;
}

/* Checkout step container */
.wc-block-components-checkout-step {
  border: 1.5px solid #e5e7eb !important;
  border-radius: 12px !important;
  margin-bottom: 20px !important;
  overflow: hidden !important;
}

.wc-block-components-checkout-step__content {
  padding: 20px 16px !important;
}

/* Mobile checkout improvements */
@media (max-width: 768px) {
  .wc-block-components-address-card {
    padding-right: 16px !important;
  }

  .wc-block-components-address-card__edit {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    transform: none !important;
    margin-top: 12px !important;
    display: inline-block !important;
  }

  .wc-block-components-text-input input,
  .wc-block-components-address-form input {
    padding: 12px 14px !important;
    font-size: 16px !important; /* Prevents iOS zoom on focus */
  }

  .wc-block-components-checkout-step__content {
    padding: 16px 12px !important;
  }
}

/* ============================================================
 * WARRANTY SECTION - REQUIRE SELECTION STATE
 * ============================================================ */

/* Style unselected state - subtle prompt */
.nt-warranty-radios .nt-warranty-radio-label:not(.active) {
  opacity: 0.85 !important;
}

.nt-warranty-radios .nt-warranty-radio-label:not(.active):hover {
  opacity: 1 !important;
  transform: translateY(-1px) !important;
}

/* When no selection made, add subtle hint */
.nt-warranty-section:has(input[name="nt_warranty_choice"]:not(:checked))
  .nt-warranty-title::after {
  content: " (please select)" !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  color: #f59e0b !important;
}

/* ============================================================
 * TAB PANEL FITTER ITEMS - OVERRIDE CONFLICTING STYLES
 * ============================================================ */

/* Desktop: Ensure tab panel fitter items stay in row layout with features below */
.nt-fitter-panel .nt-fitter-item,
.nt-fitter-panel li.nt-fitter-item {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px 16px !important;
}

.nt-fitter-panel .nt-fitter-info {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: none !important;
  order: 1 !important;
}

.nt-fitter-panel .nt-book-btn,
.nt-fitter-panel a.nt-book-btn,
.nt-fitter-panel .nt-fitter-item .nt-book-btn {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: fit-content !important;
  order: 2 !important;
}

.nt-fitter-panel .nt-fitter-features {
  order: 3 !important;
  width: 100% !important;
  flex-basis: 100% !important;
}

/* Mobile only for tab panels */
@media (max-width: 600px) {
  .nt-fitter-panel .nt-fitter-item,
  .nt-fitter-panel li.nt-fitter-item {
    flex-wrap: wrap !important;
    padding: 16px !important;
    gap: 12px !important;
  }
  
  .nt-fitter-panel .nt-fitter-info {
    flex: 1 1 100% !important;
    width: 100% !important;
    order: 1 !important;
  }
  
  /* Features BEFORE button on mobile */
  .nt-fitter-panel .nt-fitter-features {
    order: 2 !important;
    width: 100% !important;
    flex-basis: 100% !important;
    margin-bottom: 8px !important;
  }
  
  /* Button LAST on mobile - full width */
  .nt-fitter-panel .nt-book-btn,
  .nt-fitter-panel a.nt-book-btn,
  .nt-fitter-panel span.nt-book-btn,
  .nt-fitter-panel .nt-fitter-item .nt-book-btn {
    order: 3 !important;
    width: 100% !important;
    max-width: 100% !important;
    flex-basis: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }
}

/* ============================================================
 * FITTING INCLUDED BADGE
 * ============================================================ */
.nt-fitting-included {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  padding: 4px 10px;
  background: linear-gradient(135deg, #dcfce7 0%, #f0fdf4 100%);
  border: 1px solid #bbf7d0;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  color: #166534;
  white-space: nowrap;
}

.nt-fitting-included svg {
  flex-shrink: 0;
}