/*
 * Steel Fabrication Perth — WooCommerce Styles
 * /wp-content/themes/hello-theme-child-master/woocommerce.css
 *
 * Works alongside child theme WooCommerce template overrides in:
 *   /woocommerce/archive-product.php
 *   /woocommerce/content-product.php
 *   /woocommerce/loop/add-to-cart.php
 *
 * Sections:
 *   1.  Global resets
 *   2.  Breadcrumb
 *   3.  Shop header banner
 *   4.  Shop toolbar
 *   5.  Shop layout (sidebar + grid)
 *   6.  Sidebar filters
 *   7.  Product cards
 *   8.  Pagination
 *   9.  Single product page
 *  10.  Product tabs
 *  11.  Related products
 *  12.  Cart page
 *  13.  Mini-cart / cart drawer
 *  14.  Checkout
 *  15.  WooCommerce notices
 *  16.  Account pages
 *  17.  Responsive
 */


/* =========================================================================
   1. GLOBAL RESETS
   ========================================================================= */

.woocommerce-page h1.page-title,
.woocommerce h1.page-title {
  display: none; /* hide default "Shop" title — we use .shop-header */
}

/* Reset color on sfp buttons only */
button.sfp-door-quote-btn,
button.sfp-qty-btn {
  color: white;
}

body.woocommerce,
body.woocommerce-page {
  background: var(--g50);
}


/* =========================================================================
   2. BREADCRUMB
   ========================================================================= */

.woocommerce-breadcrumb {
  font-size: 12px;
  color: var(--textlight);
  margin: 0;
  padding: 10px 24px;
  background: var(--white);
  border-bottom: 1px solid var(--g200);
  display: block;
  width: 100%;
  box-sizing: border-box;
}
.woocommerce-breadcrumb a {
  color: var(--orange);
  font-weight: 600;
}
/* WC wraps breadcrumb in .woocommerce — remove any inherited padding */
.woocommerce nav.woocommerce-breadcrumb,
nav.woocommerce-breadcrumb {
  padding: 10px 24px !important;
  margin: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  background: var(--white) !important;
  border-bottom: 1px solid var(--g200) !important;
  font-size: 12px !important;
}


/* =========================================================================
   3. SHOP HEADER BANNER
   ========================================================================= */

.shop-header {
  background: var(--steel);
  padding: 36px 0;
  position: relative;
  overflow: hidden;
}
.shop-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 48px 48px;
}
.shop-header-in {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
}
.shop-header h1 {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(28px, 4vw, 44px);
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: .02em;
  margin-bottom: 8px;
}
.shop-header h1 span {
  color: var(--orange);
}
.shop-header p {
  font-size: 14px;
  color: rgba(255,255,255,.6);
  max-width: 640px;
  margin: 0;
}


/* =========================================================================
   4. SHOP TOOLBAR
   ========================================================================= */

.shop-toolbar {
  background: var(--white);
  border-bottom: 1px solid var(--g200);
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  max-width: 100%;
}
.result-count {
  font-size: 13px;
  color: var(--textlight);
  margin: 0;
}
.result-count strong {
  color: var(--steel);
}
.sort-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sort-wrap select,
.woocommerce-ordering select {
  padding: 7px 32px 7px 12px;
  border: 1px solid var(--g200);
  border-radius: var(--r);
  font-size: 13px;
  color: var(--steel);
  background: var(--white);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7A8D' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  font-family: var(--font-body);
}
/* Hide WC's default ordering wrapper label */
.woocommerce-ordering {
  margin: 0;
  float: none;
}


/* =========================================================================
   5. SHOP LAYOUT
   ========================================================================= */

.shop-layout {
  max-width: var(--max);
  margin: 0 auto;
  padding: 24px;
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 24px;
  align-items: start;
}

/* Ensure main content area starts from the correct column */
.shop-layout > main {
  min-width: 0; /* prevent grid blowout */
  width: 100%;
}

.shop-layout > aside {
  min-width: 0;
}


/* =========================================================================
   6. SIDEBAR FILTERS
   ========================================================================= */

.sidebar {
  background: var(--white);
  border: 1px solid var(--g200);
  border-radius: 4px;
  position: sticky;
  top: 80px;
  align-self: start;
}
.sidebar-section {
  border-bottom: 1px solid var(--g100);
  padding: 18px 16px;
}
.sidebar-section:last-child {
  border-bottom: none;
}
.sidebar-title {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--steel);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.sidebar-title svg {
  width: 13px;
  height: 13px;
  stroke: var(--orange);
  fill: none;
  stroke-width: 2.5;
  flex-shrink: 0;
}
.thickness-btns {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.thick-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 13px;
  border: 1.5px solid var(--g200);
  border-radius: var(--r);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  color: var(--textmid);
  background: var(--white);
  transition: border-color .15s, color .15s, background .15s;
  text-decoration: none;
  cursor: pointer;
}
.thick-btn:hover,
.thick-btn.active {
  border-color: var(--orange);
  color: var(--orange);
  background: rgba(224,78,10,.04);
}
.thick-tag {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 2px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.thick-tag.popular {
  background: rgba(224,78,10,.12);
  color: var(--orange);
}
.thick-tag.stock {
  background: var(--green-bg);
  color: var(--green);
}
.clear-btn {
  display: block;
  width: 100%;
  padding: 9px;
  border: 1px solid var(--g200);
  border-radius: var(--r);
  background: var(--white);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--textlight);
  cursor: pointer;
  transition: border-color .15s, color .15s;
  text-align: center;
  text-decoration: none;
}
.clear-btn:hover {
  border-color: var(--orange);
  color: var(--orange);
}


/* =========================================================================
   7. PRODUCT CARDS — bold industrial, depth + motion
   ========================================================================= */

/* Grid */
.woocommerce ul.products,
body.woocommerce ul.products,
body.woocommerce-page ul.products {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 22px !important;
  align-items: stretch !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
  clear: both !important;
  width: 100% !important;
}

/* Kill the ::before pseudo-element WC injects — it creates a ghost grid slot */
.woocommerce ul.products::before,
body.woocommerce ul.products::before,
body.woocommerce-page ul.products::before,
.woocommerce ul.products::after,
body.woocommerce ul.products::after {
  display: none !important;
  content: none !important;
}

/* Card — resting elevation + top accent bar that sweeps in on hover */
.woocommerce ul.products li.product,
body.woocommerce ul.products li.product {
  position: relative !important;
  background: var(--white) !important;
  border: 1.5px solid var(--g200) !important;
  border-radius: 4px !important;
  box-shadow: var(--shadow-sm) !important;
  overflow: hidden !important;
  transition: border-color .4s var(--ease-out), box-shadow .4s var(--ease-out), transform .4s var(--ease-out) !important;
  display: flex !important;
  flex-direction: column !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  width: auto !important;
  cursor: pointer;
  will-change: transform;
}
.woocommerce ul.products li.product::before,
body.woocommerce ul.products li.product::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, var(--orange), var(--orange-light)) !important;
  transform: scaleX(0) !important;
  transform-origin: left center !important;
  transition: transform .4s var(--ease-out) !important;
  z-index: 3 !important;
}
.woocommerce ul.products li.product:hover,
body.woocommerce ul.products li.product:hover {
  border-color: var(--orange) !important;
  box-shadow: var(--shadow-lg) !important;
  transform: translateY(-8px) !important;
}
.woocommerce ul.products li.product:hover::before,
body.woocommerce ul.products li.product:hover::before {
  transform: scaleX(1) !important;
}
.woocommerce ul.products li.product:active,
body.woocommerce ul.products li.product:active {
  transform: translateY(-4px) !important;
  transition-duration: .15s !important;
}
.woocommerce ul.products li.product.featured {
  border-color: var(--orange) !important;
}

/* Image wrap — chamfered (cut) top-left corner, rivet detail, hover overlay CTA */
.card-img-wrap {
  position: relative;
  overflow: hidden;
  background: #E8E5DF;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  clip-path: polygon(18px 0, 100% 0, 100% 100%, 0 100%, 0 18px);
}
.card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s var(--ease-out);
}
.woocommerce ul.products li.product:hover .card-img-wrap img {
  transform: scale(1.08);
}
.card-img-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-img-placeholder svg {
  width: 64px;
  height: 64px;
}
/* Rivet dot sitting in the chamfered corner */
.card-img-wrap::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--steel);
  opacity: .35;
  z-index: 2;
  transition: opacity .3s, background .3s;
}
.woocommerce ul.products li.product:hover .card-img-wrap::before {
  background: var(--orange);
  opacity: .9;
}
/* Gradient overlay + "View Details" hint, fades in on hover */
.card-img-wrap::after {
  content: 'VIEW DETAILS  \2192';
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 14px;
  background: linear-gradient(to top, rgba(17,29,44,.82) 0%, rgba(17,29,44,0) 55%);
  color: var(--white);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .14em;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-out);
  pointer-events: none;
}
.woocommerce ul.products li.product:hover .card-img-wrap::after {
  opacity: 1;
  transform: translateY(0);
}

/* Badges — angled industrial tag shape */
.card-badge-wrap {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  z-index: 2;
}
.badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 10px 4px 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: normal;
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
  clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}
.badge-stock   { background: var(--green);  color: var(--white); }
.badge-popular { background: var(--orange); color: var(--white); }
.badge-fire    { background: var(--steel);  color: var(--white); }
/* Pulsing dot on the in-stock badge */
.badge-stock::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 0 0 0 rgba(255,255,255,.7);
  animation: sfp-badge-pulse 2s var(--ease-out) infinite;
  flex-shrink: 0;
}
@keyframes sfp-badge-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,.55); }
  70%  { box-shadow: 0 0 0 5px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}

/* Card link — no underline */
.prod-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* Card body */
.card-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* SKU — technical/monospace tag */
.card-sku {
  font-family: 'Courier New', Courier, monospace;
  font-size: 10px;
  color: var(--g400);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

/* Title */
.card-title {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 18px;
  color: var(--steel);
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: 1.1;
  margin: 0 0 6px;
  transition: color .2s;
}
.card-title a {
  color: var(--steel);
  text-decoration: none;
}
.card-title a:hover {
  color: var(--orange);
}

/* Short description */
.card-desc {
  font-size: 12px;
  color: var(--textlight);
  line-height: 1.55;
  margin-bottom: 12px;
}

/* Specs grid — dark technical "readout" cells */
.card-specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  margin-bottom: 14px;
  min-height: 120px !important;
  max-height: 120px !important;
  overflow: hidden !important;
}
.card-specs--empty {
  visibility: hidden;
}
.cs {
  background: var(--g50);
  border-left: 2px solid var(--g200);
  border-radius: 0 2px 2px 0;
  padding: 6px 8px;
  transition: border-color .3s, background .3s;
  overflow: hidden;
}
.woocommerce ul.products li.product:hover .cs {
  border-left-color: var(--orange);
  background: #FBF3EE;
}
.cs-label {
  font-size: 9px;
  color: var(--g400);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: 2px;
}
.cs-val {
  font-family: 'Courier New', Courier, monospace;
  font-weight: 700;
  font-size: 12px;
  color: var(--steel);
  letter-spacing: .01em;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Price */
.card-price {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin-bottom: 14px;
  margin-top: auto;
  flex-wrap: wrap;
  position: relative;
  padding-top: 10px;
  border-top: 1px dashed var(--g200);
}
.price-from {
  font-size: 10px;
  color: var(--textlight);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.price-amt {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 25px;
  color: var(--steel);
  line-height: 1;
}
.price-amt .woocommerce-Price-amount {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 25px;
  color: var(--steel);
}
.price-amt .woocommerce-Price-currencySymbol {
  font-size: 16px;
}
.price-unit {
  font-size: 11px;
  color: var(--textlight);
}
.price-gst {
  font-size: 10px;
  color: var(--g400);
}
.price-por {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 13px;
  color: var(--textlight);
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* Buttons */
.card-actions {
  display: flex;
  gap: 8px;
  margin-top: auto;
}
.btn-details {
  flex: 1;
  padding: 10px 8px;
  border-radius: var(--r);
  border: 1.5px solid var(--g200);
  background: var(--white);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--steel);
  text-align: center;
  transition: border-color .2s, color .2s, background .2s, transform .2s;
  text-decoration: none;
  display: block;
  cursor: pointer;
}
.btn-details:hover {
  border-color: var(--steel);
  background: var(--steel);
  color: var(--white);
  transform: translateY(-1px);
}
.btn-details:active {
  transform: translateY(0) scale(.98);
}
.btn-select,
.card-actions a.button,
.card-actions .button,
.card-actions a.add_to_cart_button,
.card-actions a.product_type_simple {
  flex: 2;
  padding: 10px 8px;
  border-radius: var(--r);
  background: linear-gradient(180deg, var(--orange-hover) 0%, var(--orange) 100%) !important;
  color: var(--white) !important;
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  border: none !important;
  text-align: center !important;
  box-shadow: 0 2px 6px rgba(224,78,10,.25) !important;
  transition: box-shadow .25s var(--ease-out), transform .25s var(--ease-out), background .2s !important;
  text-decoration: none !important;
  display: block !important;
  cursor: pointer !important;
  line-height: 1.4 !important;
}
.btn-select:hover,
.card-actions a.button:hover,
.card-actions .button:hover,
.card-actions a.add_to_cart_button:hover {
  background: linear-gradient(180deg, var(--orange-light) 0%, var(--orange-hover) 100%) !important;
  color: var(--white) !important;
  box-shadow: var(--shadow-glow) !important;
  transform: translateY(-2px) !important;
}
.btn-select:active,
.card-actions a.button:active,
.card-actions .button:active {
  transform: translateY(0) scale(.98) !important;
  box-shadow: 0 2px 6px rgba(224,78,10,.25) !important;
}

/* Fix WooCommerce notices wrapper taking up a grid slot */
.woocommerce ul.products > .woocommerce-notices-wrapper {
  display: none !important;
}

/* Also target any other non-li elements inside ul.products */
.woocommerce ul.products > *:not(li) {
  display: none !important;
}

/* Show notices wrapper only when it has content */
.woocommerce ul.products .woocommerce-notices-wrapper:not(:empty) {
  display: block !important;
  grid-column: 1 / -1 !important;
}

/* Hide WC's default injected elements we don't use */
.woocommerce ul.products li.product .woocommerce-loop-product__link,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product > .price,
.woocommerce ul.products li.product > a.button,
.woocommerce ul.products li.product .star-rating {
  display: none !important;
}


/* =========================================================================
   8. PAGINATION
   ========================================================================= */

.woocommerce nav.woocommerce-pagination {
  margin-top: 40px;
  text-align: center;
}
.woocommerce nav.woocommerce-pagination ul {
  display: inline-flex;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1.5px solid var(--g200);
  border-radius: var(--r);
  font-weight: 700;
  font-size: 13px;
  color: var(--steel);
  transition: border-color .15s, background .15s, color .15s;
}
.woocommerce nav.woocommerce-pagination ul li a:hover {
  border-color: var(--orange);
  color: var(--orange);
}
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--white);
}


/* =========================================================================
   9. SINGLE PRODUCT PAGE
   ========================================================================= */

.woocommerce div.product {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
  max-width: var(--max);
  margin: 0 auto;
  padding: 40px 24px;
}

/* Gallery */
.woocommerce div.product .woocommerce-product-gallery {
  background: #E8E5DF;
  border-radius: 4px;
  overflow: hidden;
  position: sticky;
  top: 90px;
}
.woocommerce div.product .woocommerce-product-gallery__image img {
  width: 100%;
  object-fit: cover;
  display: block;
}
.woocommerce div.product .flex-control-thumbs {
  display: flex;
  gap: 6px;
  padding: 10px;
  background: rgba(0,0,0,.06);
  list-style: none;
  margin: 0;
}
.woocommerce div.product .flex-control-thumbs li {
  width: 60px;
  height: 45px;
  border-radius: 2px;
  border: 2px solid transparent;
  overflow: hidden;
  cursor: pointer;
  transition: border-color .15s;
}
.woocommerce div.product .flex-control-thumbs li img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.woocommerce div.product .flex-control-thumbs li.flex-active-slide,
.woocommerce div.product .flex-control-thumbs li:hover {
  border-color: var(--orange);
}

/* Summary */
.woocommerce div.product .summary {
  padding: 0;
}
.woocommerce div.product .sku_wrapper {
  font-size: 11px;
  color: var(--g400);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 6px;
  display: block;
}
.woocommerce div.product .product_title {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(22px, 3vw, 32px);
  color: var(--steel);
  text-transform: uppercase;
  line-height: 1.05;
  margin-bottom: 8px;
}
.woocommerce div.product .woocommerce-product-rating {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
.woocommerce div.product .woocommerce-product-details__short-description {
  font-size: 14px;
  color: var(--textlight);
  line-height: 1.72;
  margin-bottom: 20px;
}

/* Price */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 30px;
  color: var(--orange);
  margin-bottom: 18px;
  display: block;
}

/* Variation selectors */
.woocommerce div.product form.cart .variations {
  display: table;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 10px;
  margin-bottom: 16px;
  border: none;
}
.woocommerce div.product form.cart .variations td,
.woocommerce div.product form.cart .variations th {
  padding: 0;
  border: none;
  vertical-align: middle;
}
.woocommerce div.product form.cart .variations .label {
  width: 110px;
  padding-right: 16px;
  white-space: nowrap;
}
.woocommerce div.product form.cart .variations .label label {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--steel);
}
.woocommerce div.product form.cart .variations .value select {
  padding: 13px 36px 13px 14px;
  border: 1.5px solid var(--g200);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--steel);
  background: var(--white);
  width: 100%;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7A8D' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  font-family: var(--font-body);
}
.woocommerce div.product form.cart .variations .value select:hover {
  border-color: var(--steel);
}
.woocommerce div.product form.cart .variations .value select:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(224,78,10,.1);
  outline: none;
}

/* Quantity */
.woocommerce div.product form.cart .quantity {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--g200);
  border-radius: var(--r);
  width: fit-content;
  overflow: hidden;
  margin-right: 10px;
}
.woocommerce div.product form.cart .quantity input.qty {
  width: 50px;
  height: 46px;
  border: none;
  border-left: 1px solid var(--g200);
  border-right: 1px solid var(--g200);
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--steel);
  font-family: var(--font-body);
  padding: 0;
  -moz-appearance: textfield;
}
.woocommerce div.product form.cart .quantity input.qty::-webkit-outer-spin-button,
.woocommerce div.product form.cart .quantity input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

/* Add to cart */
.woocommerce div.product form.cart {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}
.woocommerce div.product form.cart .single_add_to_cart_button,
.woocommerce button.button.alt {
  flex: 1;
  padding: 14px 20px;
  background: var(--orange);
  color: var(--white);
  border: none;
  border-radius: var(--r);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s;
  text-align: center;
}
.woocommerce div.product form.cart .single_add_to_cart_button:hover,
.woocommerce button.button.alt:hover {
  background: var(--orange-hover);
  color: var(--white);
}


/* =========================================================================
   10. PRODUCT TABS
   ========================================================================= */

.woocommerce div.product .woocommerce-tabs {
  grid-column: 1 / -1;
  border-top: 1px solid var(--g100);
  margin-top: 40px;
}

/* Kill any leftover jQuery UI / default tab widget background states —
   nothing in our own CSS ever set pink, this neutralizes it at the source
   regardless of where it's coming from. */
.woocommerce div.product .woocommerce-tabs ul.tabs,
.woocommerce div.product .woocommerce-tabs ul.tabs li,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active,
.woocommerce div.product .woocommerce-tabs ul.tabs li a,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:focus,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:visited {
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border-image: none !important;
}

/* ── Pill-style tabs ── */
.woocommerce div.product .woocommerce-tabs ul.tabs {
  display: flex !important;
  gap: 6px !important;
  border-bottom: 1.5px solid var(--g200) !important;
  padding: 0 0 12px !important;
  margin: 0 0 4px !important;
  list-style: none !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  padding: 10px 20px !important;
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: var(--textlight) !important;
  display: block !important;
  border: 1.5px solid var(--g200) !important;
  border-radius: 999px !important;
  margin: 0 !important;
  transition: color .2s var(--ease-out), border-color .2s var(--ease-out), background .2s var(--ease-out) !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
  color: var(--steel) !important;
  border-color: var(--steel) !important;
  background: var(--g50) !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--white) !important;
  background: linear-gradient(180deg, var(--orange-hover) 0%, var(--orange) 100%) !important;
  border-color: var(--orange) !important;
}

.woocommerce div.product .woocommerce-tabs .panel {
  padding: 28px 0 !important;
  font-size: 14px !important;
  color: var(--textlight) !important;
  line-height: 1.72 !important;
}

/* ── Specifications table — refined, zebra-striped, rounded container ── */
.woocommerce div.product .shop_attributes {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: 1.5px solid var(--g200) !important;
  border-radius: 6px !important;
  overflow: hidden !important;
}
.woocommerce div.product .shop_attributes tr {
  border-bottom: 1px solid var(--g100) !important;
  transition: background .15s !important;
}
.woocommerce div.product .shop_attributes tr:last-child {
  border-bottom: none !important;
}
.woocommerce div.product .shop_attributes tr:nth-child(even) {
  background: var(--g50) !important;
}
.woocommerce div.product .shop_attributes tr:hover {
  background: #FBF3EE !important;
}
.woocommerce div.product .shop_attributes th {
  font-family: var(--font-head) !important;
  font-weight: 800 !important;
  color: var(--steel) !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  padding: 13px 20px !important;
  width: 180px !important;
  background: none !important;
  text-align: left !important;
  border: none !important;
  border-right: 1px solid var(--g100) !important;
}
.woocommerce div.product .shop_attributes td {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--textmid) !important;
  padding: 13px 20px !important;
  border: none !important;
}


/* =========================================================================
   11. RELATED PRODUCTS
   ========================================================================= */

.woocommerce .related.products,
.woocommerce .upsells.products {
  grid-column: 1 / -1;
  margin-top: 60px;
  padding-top: 40px;
  border-top: 1px solid var(--g100);
}
.woocommerce .related.products h2,
.woocommerce .upsells.products h2 {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(22px, 3vw, 32px);
  color: var(--steel);
  text-transform: uppercase;
  margin-bottom: 24px;
}


/* =========================================================================
   12. CART PAGE
   ========================================================================= */

.sfp-cart-wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 40px 24px;
}

/* Fix CART title alignment */
.woocommerce-cart h1.page-title,
.woocommerce-cart .entry-title {
  max-width: var(--max) !important;
  margin: 0 auto 0 !important;
  padding: 32px 24px 0 !important;
  display: block !important;
  font-family: var(--font-head) !important;
  font-weight: 900 !important;
  font-size: clamp(28px, 4vw, 44px) !important;
  color: var(--steel) !important;
  text-transform: uppercase !important;
}

/* ── Empty cart ── */
.sfp-cart-empty {
  text-align: center;
  padding: 80px 24px;
  background: var(--white);
  border: 1px solid var(--g200);
  border-radius: 4px;
}
.sfp-cart-empty-icon {
  color: var(--g200);
  margin-bottom: 20px;
}
.sfp-cart-empty h2 {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 28px;
  text-transform: uppercase;
  color: var(--steel);
  margin-bottom: 12px;
}
.sfp-cart-empty p {
  color: var(--textlight);
  font-size: 15px;
  margin-bottom: 28px;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}

/* ── Cart header ── */
.sfp-cart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
  flex-wrap: wrap;
  gap: 12px;
}
.sfp-cart-header h2 {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(22px, 3vw, 32px);
  text-transform: uppercase;
  color: var(--steel);
  margin: 0;
}
.sfp-cart-continue {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--textlight);
  text-decoration: none;
  transition: color .15s;
}
.sfp-cart-continue:hover {
  color: var(--orange);
}

/* ── Two column grid ── */
.sfp-cart-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 28px;
  align-items: start;
}

/* ── Cart items column ── */
.sfp-cart-items {
  background: var(--white);
  border: 1px solid var(--g200);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,.05);
}

/* Column headers */
.sfp-cart-col-heads {
  display: grid;
  grid-template-columns: 100px 1fr 120px 44px;
  gap: 16px;
  padding: 14px 24px;
  background: var(--steel);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  align-items: center;
}

/* Individual cart item row */
.sfp-cart-item {
  display: grid;
  grid-template-columns: 100px 1fr 120px 44px;
  gap: 16px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--g100);
  align-items: center;
  transition: background .15s;
}
.sfp-cart-item:hover {
  background: var(--g50);
}
.sfp-cart-item:last-of-type {
  border-bottom: none;
}

.sfp-cart-item-img img {
  width: 90px;
  height: 90px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--g200);
  display: block;
  background: var(--g50);
}

.sfp-cart-item-info {
  min-width: 0;
}

.sfp-cart-item-name {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--steel);
  margin-bottom: 4px;
  line-height: 1.3;
}
.sfp-cart-item-name a {
  color: var(--steel);
  text-decoration: none;
  transition: color .15s;
}
.sfp-cart-item-name a:hover {
  color: var(--orange);
}
.sfp-cart-item-sku {
  font-size: 10px;
  color: var(--g400);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-top: 3px;
}
.sfp-cart-item-price {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 15px;
  color: var(--steel);
  margin-top: 6px;
}
.sfp-cart-item-subtotal {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 16px;
  color: var(--orange);
  text-align: right;
}

/* Qty stepper */
.sfp-cart-item-qty .quantity {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
}
.sfp-cart-item-qty .qty {
  width: 56px;
  padding: 9px;
  border: 1.5px solid var(--g200);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  color: var(--steel);
  font-family: var(--font-body);
  transition: border-color .15s;
}
.sfp-cart-item-qty .qty:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(224,78,10,.1);
  outline: none;
}

.sfp-cart-item-info {
  min-width: 0;
}

.sfp-cart-item-name {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--steel);
  margin-bottom: 4px;
  line-height: 1.2;
}
.sfp-cart-item-name a {
  color: var(--steel);
  text-decoration: none;
  transition: color .15s;
}
.sfp-cart-item-name a:hover {
  color: var(--orange);
}
.sfp-cart-item-sku {
  font-size: 10px;
  color: var(--g400);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-top: 4px;
}

/* Price and subtotal combined into info area on mobile */
.sfp-cart-item-price {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 13px;
  color: var(--textlight);
  margin-top: 4px;
}

/* Qty and subtotal shown in the grid */
.sfp-cart-item-qty .quantity {
  display: flex;
  align-items: center;
  gap: 6px;
}
.sfp-cart-item-qty .qty {
  width: 55px;
  padding: 8px;
  border: 1.5px solid var(--g200);
  border-radius: var(--r);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  color: var(--steel);
  font-family: var(--font-body);
}
.sfp-cart-item-qty .qty:focus {
  border-color: var(--orange);
  outline: none;
}

/* Hide separate subtotal column — show price in info */
.sfp-cart-item-subtotal {
  display: none;
}


.sfp-cart-item-name {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--steel);
  margin-bottom: 4px;
}
.sfp-cart-item-name a {
  color: var(--steel);
  text-decoration: none;
  transition: color .15s;
}
.sfp-cart-item-name a:hover {
  color: var(--orange);
}
.sfp-cart-item-sku {
  font-size: 10px;
  color: var(--g400);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-top: 4px;
}

.sfp-cart-item-price,
.sfp-cart-item-subtotal {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 16px;
  color: var(--steel);
}
.sfp-cart-item-subtotal {
  color: var(--orange);
}

/* Quantity input */
.sfp-cart-item-qty .quantity {
  display: flex;
  align-items: center;
}
.sfp-cart-item-qty .qty {
  width: 60px;
  padding: 8px;
  border: 1.5px solid var(--g200);
  border-radius: var(--r);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  color: var(--steel);
  font-family: var(--font-body);
}
.sfp-cart-item-qty .qty:focus {
  border-color: var(--orange);
  outline: none;
}

/* Remove button */
.sfp-remove-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--g50);
  color: var(--g400);
  text-decoration: none;
  transition: background .15s, color .15s;
}
.sfp-remove-item:hover {
  background: var(--orange);
  color: var(--white);
}

/* Cart actions row */
.sfp-cart-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: var(--g50);
  border-top: 1px solid var(--g100);
  gap: 12px;
  flex-wrap: wrap;
}
.sfp-coupon {
  display: flex;
  gap: 8px;
  align-items: center;
  flex: 1;
}
.sfp-coupon-input {
  padding: 10px 14px;
  border: 1.5px solid var(--g200);
  border-radius: var(--r);
  font-size: 13px;
  font-family: var(--font-body);
  color: var(--steel);
  width: 200px;
  transition: border-color .15s;
}
.sfp-coupon-input:focus {
  border-color: var(--orange);
  outline: none;
}
.sfp-btn-outline {
  padding: 10px 20px;
  background: var(--white);
  color: var(--steel);
  border: 1.5px solid var(--g200);
  border-radius: var(--r);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
  text-decoration: none;
  display: inline-block;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
.sfp-btn-outline:hover {
  border-color: var(--orange);
  color: var(--orange);
  background: var(--white);
}
.sfp-btn-outline:active,
.sfp-btn-outline:focus,
.sfp-btn-outline:focus-visible {
  border-color: var(--orange);
  color: var(--orange);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(224,78,10,.12);
}

/* ── Order summary column ── */
.sfp-cart-totals {
  position: sticky;
  top: 90px;
}
.sfp-totals-box {
  background: var(--white);
  border: 1px solid var(--g200);
  border-radius: 4px;
  overflow: hidden;
}
.sfp-totals-head {
  background: var(--steel);
  color: var(--white);
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 16px 20px;
}
.sfp-totals-rows {
  padding: 8px 0;
}
.sfp-totals-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  border-bottom: 1px solid var(--g50);
}
.sfp-totals-row:last-child {
  border-bottom: none;
}
.sfp-totals-label {
  font-size: 13px;
  color: var(--textlight);
  font-weight: 500;
}
.sfp-totals-val {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 16px;
  color: var(--steel);
}
.sfp-totals-val--discount {
  color: var(--green);
}
.sfp-totals-row--total {
  background: var(--g50);
  padding: 16px 20px;
  border-top: 2px solid var(--g200);
}
.sfp-totals-row--total .sfp-totals-label {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--steel);
}
.sfp-totals-val--total {
  font-size: 28px;
  color: var(--orange) !important;
}
.sfp-totals-val--total .woocommerce-Price-amount {
  font-size: 28px;
  color: var(--orange);
}

/* Checkout button */
.sfp-totals-checkout {
  padding: 16px 20px;
  border-top: 1px solid var(--g100);
}
.sfp-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  background: var(--orange);
  color: var(--white) !important;
  border: none;
  border-radius: var(--r);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s, transform .14s;
  text-decoration: none !important;
}
.sfp-btn-primary:hover {
  background: var(--orange-hover);
  color: var(--white) !important;
  transform: translateY(-1px);
}
.sfp-btn-full {
  width: 100%;
}

/* Trust strip */
.sfp-totals-trust {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 14px 20px;
  border-top: 1px solid var(--g100);
  background: var(--g50);
}
.sfp-totals-trust span {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--textlight);
  font-weight: 600;
  white-space: nowrap;
}
.sfp-totals-trust svg {
  stroke: var(--green);
  flex-shrink: 0;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .sfp-cart-grid {
    grid-template-columns: 1fr;
  }
  .sfp-cart-totals {
    position: static;
  }
  .sfp-cart-col-heads {
    display: none;
  }
  .sfp-cart-item {
    grid-template-columns: 70px 1fr auto;
    grid-template-rows: auto auto auto;
    gap: 10px;
  }
  .sfp-cart-item-img { grid-row: 1 / 3; }
  .sfp-cart-item-info { grid-column: 2 / 3; }
  .sfp-cart-item-price { display: none; }
  .sfp-cart-item-qty { grid-column: 2; }
  .sfp-cart-item-subtotal { grid-column: 3; grid-row: 2; text-align: right; }
  .sfp-cart-item-remove { grid-column: 3; grid-row: 1; justify-self: end; }
}


/* =========================================================================
   13. MINI-CART
   ========================================================================= */

.widget_shopping_cart .cart_list,
.elementor-menu-cart__products {
  list-style: none;
  padding: 0;
  margin: 0;
}
.widget_shopping_cart .cart_list li,
.elementor-menu-cart__product {
  display: flex;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--g100);
  align-items: flex-start;
}
.widget_shopping_cart .cart_list li a.remove,
.elementor-menu-cart__product-remove a {
  color: var(--g400) !important;
  font-size: 18px;
  transition: color .15s;
  background: none;
}
.widget_shopping_cart .cart_list li a.remove:hover {
  color: var(--orange) !important;
  background: none;
}
.widget_shopping_cart .cart_list li .attachment-woocommerce_thumbnail,
.elementor-menu-cart__product-image img {
  width: 60px;
  height: 48px;
  object-fit: cover;
  border-radius: 2px;
  flex-shrink: 0;
}
.widget_shopping_cart .cart_list li a:not(.remove) {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 13px;
  color: var(--steel);
  text-transform: uppercase;
}
.widget_shopping_cart .total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 16px 0;
  border-top: 1px solid var(--g200);
  font-size: 13px;
  color: var(--textlight);
}
.widget_shopping_cart .total .woocommerce-Price-amount {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 22px;
  color: var(--steel);
}
.widget_shopping_cart .buttons a {
  display: block;
  width: 100%;
  padding: 12px;
  border-radius: var(--r);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: center;
  transition: background .15s, border-color .15s;
  margin-bottom: 8px;
}
.widget_shopping_cart .buttons a.checkout {
  background: var(--orange);
  color: var(--white) !important;
  border: none;
}
.widget_shopping_cart .buttons a.checkout:hover {
  background: var(--orange-hover);
}
.widget_shopping_cart .buttons a.cart {
  background: var(--white);
  color: var(--steel) !important;
  border: 1.5px solid var(--g200);
}
.widget_shopping_cart .buttons a.cart:hover {
  border-color: var(--orange);
  color: var(--orange) !important;
}


/* =========================================================================
   14. CHECKOUT
   ========================================================================= */

.woocommerce-checkout .woocommerce {
  display: block !important;
  grid-template-columns: none !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}
.woocommerce-checkout h3 {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 18px;
  text-transform: uppercase;
  color: var(--steel);
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--orange);
}
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-shipping-fields {
  background: var(--white);
  border: 1px solid var(--g200);
  border-radius: 4px;
  padding: 28px;
  margin-bottom: 24px;
}
.woocommerce-checkout .woocommerce-checkout-review-order {
  background: var(--white);
  border: 1px solid var(--g200);
  border-radius: 4px;
  padding: 28px;
  position: sticky;
  top: 90px;
}
#place_order {
  display: block;
  width: 100%;
  padding: 16px;
  background: var(--orange);
  color: var(--white);
  border: none;
  border-radius: var(--r);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s;
  margin-top: 16px;
}
#place_order:hover {
  background: var(--orange-hover);
}


/* =========================================================================
   15. WOOCOMMERCE NOTICES
   ========================================================================= */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border-radius: var(--r);
  padding: 14px 20px;
  font-weight: 600;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  border-top: none;
  position: relative;
}
.woocommerce-message {
  background: var(--steel);
  color: var(--white);
  border-left: 4px solid var(--orange);
}
.woocommerce-info {
  background: var(--g50);
  color: var(--steel);
  border-left: 4px solid var(--steel);
}
.woocommerce-error {
  background: #FEF2F2;
  color: #991B1B;
  border-left: 4px solid #C0392B;
}
/* Fix green tick icon overlapping notice text */
.woocommerce-message::before,
.woocommerce-info::before {
  display: none !important;
}
.woocommerce-message a.button {
  margin-left: auto;
  padding: 8px 18px;
  background: var(--orange);
  color: var(--white);
  border-radius: var(--r);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  flex-shrink: 0;
  white-space: nowrap;
}
.woocommerce-message a.button:hover {
  background: var(--orange-hover);
  color: var(--white);
}


/* =========================================================================
   16. ACCOUNT PAGES
   ========================================================================= */

.woocommerce-account .woocommerce {
  display: block !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  grid-template-columns: none !important;
}
.woocommerce-MyAccount-navigation ul {
  list-style: none;
  padding: 0;
  margin: 0;
  background: var(--white);
  border: 1px solid var(--g200);
  border-radius: 4px;
  overflow: hidden;
}
.woocommerce-MyAccount-navigation ul li a {
  display: block;
  padding: 12px 18px;
  font-weight: 600;
  font-size: 13px;
  color: var(--textmid);
  border-bottom: 1px solid var(--g100);
  transition: color .15s, background .15s;
}
.woocommerce-MyAccount-navigation ul li:last-child a {
  border-bottom: none;
}
.woocommerce-MyAccount-navigation ul li a:hover,
.woocommerce-MyAccount-navigation ul li.is-active a {
  color: var(--orange);
  background: rgba(224,78,10,.04);
}
.woocommerce-MyAccount-content {
  background: var(--white);
  border: 1px solid var(--g200);
  border-radius: 4px;
  padding: 28px;
}


/* =========================================================================
   17. RESPONSIVE
   ========================================================================= */

@media (max-width: 1200px) {
  .woocommerce ul.products,
  body.woocommerce ul.products,
  body.woocommerce-page ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .woocommerce div.product {
    gap: 32px;
  }
  .woocommerce-checkout .woocommerce {
    grid-template-columns: 1fr;
  }
  /* Sidebar/shop-layout switches at the SAME breakpoint as the grid
     column change above. Widened from 1050px to 1200px because Elementor
     has its own internal responsive breakpoint around 1200px (affecting
     the header specifically) that our CSS had no corresponding rule for
     — leaving a dead zone between 1050-1200px where the header was
     cramped by Elementor's own breakpoint but the shop grid/sidebar
     hadn't adapted yet, causing a visible "cut" appearance. Matching
     our breakpoint to 1200px closes that gap regardless of Elementor's
     internal mechanism. */
  .shop-layout {
    grid-template-columns: 1fr;
  }
  .sidebar {
    display: none;
  }
}

@media (max-width: 900px) {
  .woocommerce div.product {
    grid-template-columns: 1fr;
    padding: 24px 16px;
  }
  .woocommerce div.product .woocommerce-product-gallery {
    position: static;
  }
  .woocommerce-account .woocommerce {
    display: block !important;
    grid-template-columns: none !important;
  }
}

@media (max-width: 600px) {
  .woocommerce ul.products,
  body.woocommerce ul.products,
  body.woocommerce-page ul.products {
    grid-template-columns: 1fr 1fr !important;
  }
  .shop-layout {
    padding: 16px;
  }
  .woocommerce-cart .cart_totals {
    max-width: 100%;
  }
}

@media (max-width: 380px) {
  .woocommerce ul.products,
  body.woocommerce ul.products,
  body.woocommerce-page ul.products {
    grid-template-columns: 1fr !important;
  }
}


/* ── Cart page default WC layout alignment fix ── */
.woocommerce-cart .woocommerce {
  max-width: var(--max) !important;
  margin: 0 auto !important;
  padding: 40px 24px !important;
}

/* Fix bleeding left edge */
.woocommerce-cart .woocommerce-cart-form,
.woocommerce-cart .cart_totals,
.woocommerce-cart .woocommerce-info {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* Fix Proceed to Checkout button */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
  background: var(--orange) !important;
  color: var(--white) !important;
  border-radius: var(--r) !important;
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  border: none !important;
  text-decoration: none !important;
  padding: 15px !important;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
  background: var(--orange-hover) !important;
}


/* ── Cart page full width override ── */
.woocommerce-cart .entry-content,
.woocommerce-cart .page-content,
.woocommerce-cart .site-main,
.woocommerce-cart article {
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

.sfp-cart-wrap {
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 32px 24px !important;
  width: 100% !important;
}

.sfp-cart-grid {
  display: grid !important;
  grid-template-columns: 1fr 380px !important;
  gap: 28px !important;
  align-items: start !important;
  width: 100% !important;
}

/* Fix qty overlapping name */
.sfp-cart-item {
  display: grid !important;
  grid-template-columns: 90px minmax(0,1fr) 100px 44px !important;
  gap: 20px !important;
  padding: 20px !important;
  border-bottom: 1px solid var(--g100) !important;
  align-items: start !important;
}

.sfp-cart-col-heads {
  display: grid !important;
  grid-template-columns: 90px minmax(0,1fr) 100px 44px !important;
  gap: 20px !important;
}

/* Fix name wrapping */
.sfp-cart-item-name {
  font-size: 14px !important;
  line-height: 1.3 !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

/* Fix qty input overlapping */
.sfp-cart-item-qty {
  padding-top: 4px !important;
}
.sfp-cart-item-qty .qty {
  width: 65px !important;
  -moz-appearance: textfield !important;
}
.sfp-cart-item-qty .qty::-webkit-outer-spin-button,
.sfp-cart-item-qty .qty::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}


/* ── Match cart width to header max-width ── */
.sfp-cart-wrap {
  max-width: 1280px !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}


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

.sfp-checkout-wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 40px 24px;
}

/* Header */
.sfp-checkout-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
  flex-wrap: wrap;
  gap: 16px;
}
.sfp-checkout-header h1 {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(28px, 4vw, 44px);
  text-transform: uppercase;
  color: var(--steel);
  margin: 0;
}

/* Steps */
.sfp-checkout-steps {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
}
.sfp-step {
  color: var(--textlight);
  display: flex;
  align-items: center;
  gap: 5px;
}
.sfp-step--active {
  color: var(--orange);
  font-weight: 700;
}
.sfp-step--done {
  color: var(--green);
}
.sfp-step-divider {
  color: var(--g400);
  font-size: 16px;
}

/* Two column grid */
.sfp-checkout-grid {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 28px;
  align-items: start;
}

/* Section blocks */
.sfp-checkout-section {
  background: var(--white);
  border: 1px solid var(--g200);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 20px;
}
.sfp-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  background: var(--steel);
  border-bottom: none;
}
.sfp-section-head h2 {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--white);
  margin: 0;
}
.sfp-section-head svg {
  stroke: rgba(255,255,255,0.6);
  flex-shrink: 0;
}
.sfp-section-body {
  padding: 24px 20px;
}

/* WooCommerce form fields inside sections */
.sfp-checkout-section .form-row {
  margin-bottom: 16px;
}
.sfp-checkout-section .form-row label {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--steel);
  margin-bottom: 6px;
  display: block;
}
.sfp-checkout-section .form-row input,
.sfp-checkout-section .form-row select,
.sfp-checkout-section .form-row textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--g200);
  border-radius: var(--r);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--steel);
  background: var(--white);
  transition: border-color .15s;
}
.sfp-checkout-section .form-row input:focus,
.sfp-checkout-section .form-row select:focus,
.sfp-checkout-section .form-row textarea:focus {
  border-color: var(--orange);
  outline: none;
}

/* Order summary box */
.sfp-order-summary {
  background: var(--white);
  border: 1px solid var(--g200);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 20px;
}
.sfp-totals-head {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--steel);
  color: var(--white);
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 16px 20px;
}
.sfp-totals-head svg {
  stroke: rgba(255,255,255,0.6);
  flex-shrink: 0;
}

/* Order review table */
.sfp-order-items .woocommerce-checkout-review-order-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.sfp-order-items .woocommerce-checkout-review-order-table th,
.sfp-order-items .woocommerce-checkout-review-order-table td {
  padding: 12px 20px;
  border-bottom: 1px solid var(--g100);
  text-align: left;
}
.sfp-order-items .woocommerce-checkout-review-order-table th {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--textlight);
  background: var(--g50);
}
.sfp-order-items .woocommerce-checkout-review-order-table .product-name {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--steel);
  text-transform: uppercase;
  font-size: 13px;
}
.sfp-order-items .woocommerce-checkout-review-order-table .product-name a,
.sfp-order-items .woocommerce-checkout-review-order-table .product-name .sfp-order-item-link {
  color: var(--steel);
  text-decoration: underline;
  text-decoration-color: var(--g200);
  text-underline-offset: 2px;
  transition: color .15s, text-decoration-color .15s;
}
.sfp-order-items .woocommerce-checkout-review-order-table .product-name a:hover,
.sfp-order-items .woocommerce-checkout-review-order-table .product-name .sfp-order-item-link:hover {
  color: var(--orange);
  text-decoration-color: var(--orange);
}
.sfp-order-items .woocommerce-checkout-review-order-table .product-total {
  font-family: var(--font-head);
  font-weight: 800;
  color: var(--steel);
  text-align: right;
}
.sfp-order-items .woocommerce-checkout-review-order-table .order-total td {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 20px;
  color: var(--orange);
  text-align: right;
  border-bottom: none;
}
.sfp-order-items .woocommerce-checkout-review-order-table .order-total th {
  font-size: 12px;
  color: var(--steel);
}

/* Payment section */
.sfp-payment-section {
  background: var(--white);
  border: 1px solid var(--g200);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 20px;
}
.sfp-payment-head {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--steel);
  color: var(--white);
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 16px 20px;
}
.sfp-payment-head svg {
  stroke: rgba(255,255,255,0.6);
}

/* ── Strip WooCommerce's default grey #payment wrapper ── */
#payment,
.woocommerce-checkout-payment {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

#payment .wc_payment_methods {
  list-style: none;
  padding: 24px 20px 12px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#payment .wc_payment_methods li.wc_payment_method {
  padding: 0;
  background: var(--white);
  border: 1.5px solid var(--g200);
  border-radius: 8px;
  margin: 0;
  transition: border-color .18s, box-shadow .18s;
  list-style: none !important;
  overflow: hidden;
}
#payment .wc_payment_methods li.wc_payment_method > label {
  display: block;
  padding: 18px 18px 14px;
}
#payment .wc_payment_methods li.wc_payment_method:hover {
  border-color: var(--g400);
}
#payment .wc_payment_methods li.wc_payment_method.payment_method_selected {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(224,78,10,.09);
}
#payment .wc_payment_methods li.wc_payment_method input[type="radio"] {
  accent-color: var(--orange);
  width: 16px;
  height: 16px;
  margin-right: 10px;
  flex-shrink: 0;
  vertical-align: middle;
}
#payment .wc_payment_methods li.wc_payment_method > label {
  display: block;
  padding: 18px 18px 14px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .04em;
  color: var(--steel);
  cursor: pointer;
  vertical-align: middle;
}
#payment .payment_box {
  /* Stripe renders its own UI inside here — give it clean white space */
  background: transparent !important;
  border: none !important;
  padding: 0 18px 18px !important;
  margin: 0 !important;
  box-shadow: none !important;
}
/* Strip any inner fieldset/table WC adds */
#payment .payment_box fieldset {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}

/* Place order button */
.sfp-place-order-btn {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 16px !important;
  background: var(--orange) !important;
  color: var(--white) !important;
  border: none !important;
  border-radius: var(--r) !important;
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: background .15s !important;
  margin-top: 16px;
}
.sfp-place-order-btn:hover {
  background: var(--orange-hover) !important;
}
.form-row.place-order {
  padding: 0 20px 20px !important;
  margin: 0 !important;
}

/* Trust badges */
.sfp-checkout-trust {
  background: var(--white);
  border: 1px solid var(--g200);
  border-radius: 4px;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sfp-trust-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.sfp-trust-item svg {
  flex-shrink: 0;
  margin-top: 2px;
}
.sfp-trust-item strong {
  display: block;
  font-size: 13px;
  color: var(--steel);
  font-weight: 700;
  margin-bottom: 2px;
}
.sfp-trust-item span {
  font-size: 12px;
  color: var(--textlight);
}

@media (max-width: 900px) {
  .sfp-checkout-grid {
    grid-template-columns: 1fr;
  }
  .sfp-checkout-right {
    order: -1;
  }
}


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

.sfp-account-wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 40px 24px;
}

/* Account header */
.sfp-account-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 32px;
  padding: 24px;
  background: var(--steel);
  border-radius: 4px;
}
.sfp-account-avatar img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.15);
}
.sfp-account-info h1 {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(18px, 2.5vw, 26px);
  text-transform: uppercase;
  color: var(--white);
  margin: 0 0 4px;
  letter-spacing: .02em;
}
.sfp-account-info p {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  margin: 0;
}

/* Two column grid */
.sfp-account-grid {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 24px;
  align-items: start;
}

/* Sidebar nav */
.sfp-account-nav {
  background: var(--white);
  border: 1px solid var(--g200);
  border-radius: 4px;
  overflow: hidden;
  position: sticky;
  top: 90px;
}
.sfp-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 18px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  color: var(--textmid);
  text-decoration: none;
  border-bottom: 1px solid var(--g100);
  transition: color .15s, background .15s;
}
.sfp-nav-item:last-child {
  border-bottom: none;
}
.sfp-nav-item svg {
  stroke: var(--g400);
  flex-shrink: 0;
  transition: stroke .15s;
}
.sfp-nav-item:hover,
.sfp-nav-item--active {
  color: var(--orange);
  background: rgba(224,78,10,.04);
}
.sfp-nav-item:hover svg,
.sfp-nav-item--active svg {
  stroke: var(--orange);
}
.sfp-nav-item--active {
  border-left: 3px solid var(--orange);
  padding-left: 15px;
}

/* Logout link */
.sfp-account-nav a[href*="logout"] {
  color: var(--textlight);
}
.sfp-account-nav a[href*="logout"]:hover {
  color: #C0392B;
  background: #FEF2F2;
}
.sfp-account-nav a[href*="logout"]:hover svg {
  stroke: #C0392B;
}

/* Main content area */
.sfp-account-content {
  background: var(--white);
  border: 1px solid var(--g200);
  border-radius: 4px;
  padding: 28px;
}

/* Orders table inside account */
.sfp-account-content .woocommerce-orders-table {
  width: 100%;
  border-collapse: collapse;
}
.sfp-account-content .woocommerce-orders-table th {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--steel);
  padding: 12px 16px;
  text-align: left;
  border: none;
}
.sfp-account-content .woocommerce-orders-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--g100);
  font-size: 14px;
  color: var(--textmid);
}
.sfp-account-content .woocommerce-orders-table .woocommerce-button {
  padding: 7px 16px;
  background: var(--orange);
  color: var(--white);
  border-radius: var(--r);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .15s;
}
.sfp-account-content .woocommerce-orders-table .woocommerce-button:hover {
  background: var(--orange-hover);
}

/* Account form fields */
.sfp-account-content .woocommerce-form .form-row {
  margin-bottom: 16px;
}
.sfp-account-content .woocommerce-form label {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--steel);
  margin-bottom: 6px;
  display: block;
}
.sfp-account-content .woocommerce-form input {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--g200);
  border-radius: var(--r);
  font-size: 14px;
  color: var(--steel);
  transition: border-color .15s;
}
.sfp-account-content .woocommerce-form input:focus {
  border-color: var(--orange);
  outline: none;
}
.sfp-account-content .woocommerce-Button {
  padding: 12px 24px;
  background: var(--orange);
  color: var(--white);
  border: none;
  border-radius: var(--r);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s;
}
.sfp-account-content .woocommerce-Button:hover {
  background: var(--orange-hover);
}

@media (max-width: 768px) {
  .sfp-account-grid {
    grid-template-columns: 1fr;
  }
  .sfp-account-nav {
    position: static;
    display: flex;
    flex-wrap: wrap;
  }
  .sfp-nav-item {
    flex: 1;
    min-width: 120px;
    justify-content: center;
    border-right: 1px solid var(--g100);
    font-size: 12px;
    padding: 10px 12px;
  }
}


/* Specs grid — consistent cell size */
.card-specs {
  min-height: unset !important;
}

.cs {
  min-height: 56px !important;
}

/* Equal height cards — flex column pushes price+buttons to bottom */
.woocommerce ul.products li.product {
  display: flex !important;
  flex-direction: column !important;
}

.card-body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
}

/* Short description fixed height so specs always at same position */
.card-desc {
  min-height: 60px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Specs grid always same height */
.card-specs {
  min-height: 120px !important;
}

/* Price pushed to bottom */
.card-price {
  margin-top: auto !important;
  padding-top: 12px !important;
}

/* Title fixed height — 2 lines max */
.card-title {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  min-height: 44px !important;
}


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

.sfp-single-wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px 60px;
}

/* Breadcrumb */
.sfp-single-breadcrumb {
  padding: 12px 0;
  border-bottom: 1px solid var(--g100);
  margin-bottom: 36px;
}
.sfp-single-breadcrumb .woocommerce-breadcrumb {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  font-size: 12px;
  color: var(--textlight);
}

/* Two column grid */
.sfp-single-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
  margin-bottom: 60px;
}

/* ── Gallery ── */
.sfp-single-gallery {
  position: sticky;
  top: 90px;
}
.sfp-gallery-main {
  background: #E8E5DF;
  border-radius: 6px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sfp-main-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s;
}
.sfp-gallery-main:hover .sfp-main-image {
  transform: scale(1.02);
}
.sfp-gallery-thumbs {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.sfp-thumb {
  width: 72px;
  height: 56px;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color .15s;
  flex-shrink: 0;
}
.sfp-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sfp-thumb:hover,
.sfp-thumb--active {
  border-color: var(--orange);
}

/* ── Summary ── */
.sfp-single-cat {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 8px;
}
.sfp-single-title {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(24px, 3vw, 36px);
  text-transform: uppercase;
  color: var(--steel);
  line-height: 1.05;
  margin-bottom: 12px;
}
.sfp-single-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.sfp-single-sku {
  font-size: 11px;
  color: var(--g400);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.sfp-stock-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--green);
  background: var(--green-bg);
  padding: 3px 10px;
  border-radius: 2px;
}
.sfp-stock-badge svg { stroke: var(--green); }
.sfp-stock-badge--out {
  color: #C0392B;
  background: #FEF2F2;
}

.sfp-single-desc {
  font-size: 15px;
  color: var(--textlight);
  line-height: 1.72;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--g100);
}

/* Specs grid */
.sfp-single-specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 24px;
}
.sfp-spec-item {
  background: var(--g50);
  border-radius: 4px;
  padding: 10px 14px;
}
.sfp-spec-label {
  font-size: 9px;
  color: var(--g400);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: 3px;
}
.sfp-spec-val {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 14px;
  color: var(--steel);
}

/* Price box */
.sfp-price-box {
  background: var(--g50);
  border: 1px solid var(--g100);
  border-radius: 6px;
  padding: 18px 20px;
  margin-bottom: 20px;
}
.sfp-price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 4px;
}
.sfp-price-label {
  font-size: 12px;
  color: var(--textlight);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
}
.sfp-price-amount {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 36px;
  color: var(--orange);
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.sfp-price-amount .woocommerce-Price-amount {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 36px;
  color: var(--orange);
}
.sfp-price-unit {
  font-size: 16px;
  color: var(--textlight);
  font-family: var(--font-body);
  font-weight: 400;
}
.sfp-price-note {
  font-size: 11px;
  color: var(--g400);
  margin-top: 4px;
}
.sfp-price-por-label {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 22px;
  text-transform: uppercase;
  color: var(--steel);
  display: block;
  margin-bottom: 6px;
}
.sfp-price-por p {
  font-size: 13px;
  color: var(--textlight);
  margin: 0;
}

/* ATC buttons */
.sfp-atc-wrap {
  margin-bottom: 20px;
}
.sfp-atc-wrap form.cart {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.sfp-atc-wrap .quantity {
  display: flex;
  border: 1.5px solid var(--g200);
  border-radius: var(--r);
  overflow: hidden;
  flex-shrink: 0;
}
.sfp-atc-wrap .qty {
  width: 60px;
  height: 50px;
  border: none;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  color: var(--steel);
  font-family: var(--font-body);
  -moz-appearance: textfield;
}
.sfp-atc-wrap .qty::-webkit-outer-spin-button,
.sfp-atc-wrap .qty::-webkit-inner-spin-button { -webkit-appearance: none; }
.sfp-atc-wrap .single_add_to_cart_button,
.sfp-atc-wrap button.button {
  flex: 1;
  padding: 14px 24px;
  background: var(--orange);
  color: var(--white) !important;
  border: none;
  border-radius: var(--r);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.sfp-atc-wrap .single_add_to_cart_button:hover,
.sfp-atc-wrap button.button:hover {
  background: var(--orange-hover);
}
.sfp-btn-atc {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 15px 24px;
  background: var(--orange);
  color: var(--white);
  border: none;
  border-radius: var(--r);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s;
  margin-bottom: 10px;
}
.sfp-btn-atc:hover { background: var(--orange-hover); color: var(--white); }
.sfp-btn-secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 13px 24px;
  background: var(--white);
  color: var(--steel);
  border: 1.5px solid var(--g200);
  border-radius: var(--r);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: border-color .15s, color .15s;
}
.sfp-btn-secondary:hover { border-color: var(--orange); color: var(--orange); }

/* Trust pills */
.sfp-single-trust {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.sfp-trust-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: var(--textlight);
  background: var(--g50);
  border: 1px solid var(--g100);
  padding: 5px 10px;
  border-radius: 20px;
}
.sfp-trust-pill svg { stroke: var(--green); flex-shrink: 0; }

/* ── Tabs ── */
.sfp-single-tabs {
  border-top: 2px solid var(--g100);
  padding-top: 32px;
  margin-bottom: 60px;
}
.sfp-tabs-nav {
  display: flex;
  gap: 8px;
  border-bottom: 1.5px solid var(--g200);
  margin-bottom: 0;
  padding-bottom: 14px;
}
.sfp-tab-btn {
  padding: 10px 22px;
  background: none;
  border: 1.5px solid var(--g200);
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--textlight);
  cursor: pointer;
  transition: color .2s var(--ease-out), border-color .2s var(--ease-out), background .2s var(--ease-out);
  margin-bottom: 0;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
.sfp-tab-btn:hover {
  color: var(--steel);
  border-color: var(--steel);
  background: var(--g50);
}
.sfp-tab-btn:focus,
.sfp-tab-btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(224,78,10,.15);
}
.sfp-tab-btn--active,
.sfp-tab-btn--active:hover {
  color: var(--white);
  background: linear-gradient(180deg, var(--orange-hover) 0%, var(--orange) 100%);
  border-color: var(--orange);
}
.sfp-tab-panel {
  display: none;
  padding: 32px 0;
}
.sfp-tab-panel--active { display: block; }
.sfp-tab-content {
  font-size: 15px;
  color: var(--textmid);
  line-height: 1.78;
  max-width: 760px;
}
.sfp-tab-content p { margin-bottom: 16px; }
.sfp-tab-content p:last-child { margin-bottom: 0; }

/* Specs table in tabs — refined, zebra-striped, rounded container */
.sfp-specs-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  max-width: 560px;
  border: 1.5px solid var(--g200);
  border-radius: 6px;
  overflow: hidden;
}
.sfp-specs-table th {
  background: var(--steel);
  color: var(--white);
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 12px 18px;
  text-align: left;
}
.sfp-specs-table td {
  padding: 12px 18px;
  border-bottom: 1px solid var(--g100);
  font-size: 13px;
  font-weight: 600;
  color: var(--textmid);
}
.sfp-specs-table tr:last-child td { border-bottom: none; }
.sfp-specs-table tr:nth-child(even) td { background: var(--g50); }
.sfp-specs-table tr:hover td { background: #FBF3EE; }
.sfp-specs-table tr:first-child td { color: var(--steel); font-weight: 700; }

/* ── Related products ── */
.sfp-related {
  border-top: none;
  padding-top: 0;
  margin-top: 56px;
}
.sfp-related-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 2px solid var(--g100);
  position: relative;
}
.sfp-related-head::before {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 48px;
  height: 2px;
  background: var(--orange);
}
.sfp-related-head h2 {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(20px, 2.5vw, 28px);
  text-transform: uppercase;
  color: var(--steel);
  margin: 0;
  letter-spacing: .04em;
}
.sfp-related-all {
  font-size: 12px;
  font-weight: 700;
  color: var(--orange);
  text-decoration: none;
  letter-spacing: .06em;
  text-transform: uppercase;
  border: 1.5px solid var(--orange);
  padding: 8px 16px;
  border-radius: 6px;
  transition: background .15s, color .15s;
}
.sfp-related-all:hover {
  background: var(--orange);
  color: var(--white);
}
.sfp-related ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .sfp-single-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .sfp-single-gallery {
    position: static;
  }
  .sfp-price-amount,
  .sfp-price-amount .woocommerce-Price-amount {
    font-size: 28px;
  }
}


/* ── Single product specs — modern coloured boxes ── */
.sfp-single-specs {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  margin-bottom: 24px !important;
}
.sfp-spec-item {
  background: var(--white) !important;
  border: 1.5px solid var(--g200) !important;
  border-radius: 6px !important;
  padding: 12px 16px !important;
  transition: border-color .15s !important;
}
.sfp-spec-item:hover {
  border-color: var(--orange) !important;
}
.sfp-spec-label {
  font-size: 9px !important;
  color: var(--g400) !important;
  text-transform: uppercase !important;
  letter-spacing: .12em !important;
  margin-bottom: 4px !important;
  font-weight: 700 !important;
}
.sfp-spec-val {
  font-family: var(--font-head) !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  color: var(--steel) !important;
}

/* ── Fix double breadcrumb on single product ── */
.sfp-single-wrap .woocommerce-breadcrumb:first-of-type {
  display: none !important;
}

/* ── Checkout page full width fix ── */
.woocommerce-checkout .sfp-checkout-wrap {
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 40px 24px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.woocommerce-checkout .sfp-checkout-grid {
  display: grid !important;
  grid-template-columns: 1fr 420px !important;
  gap: 28px !important;
  width: 100% !important;
}

/* Fix checkout page content not going right */
.woocommerce-checkout.elementor-full-width .elementor-section-wrap,
.woocommerce-checkout .elementor-inner-section,
.woocommerce-checkout .elementor-widget-wrap {
  max-width: 100% !important;
  padding: 0 !important;
}

/* Fix billing details inner box styling */
.sfp-section-body .woocommerce-billing-fields__field-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
}
.sfp-section-body .form-row-wide {
  grid-column: 1 / -1;
}

/* Checkout payment methods need no payment styling */
.woocommerce-checkout #payment .woocommerce-info {
  background: var(--g50) !important;
  color: var(--textmid) !important;
  border-left: 4px solid var(--steel) !important;
  padding: 16px 20px !important;
  border-radius: var(--r) !important;
  font-size: 14px !important;
}


/* ── Single product — more space below breadcrumb ── */
.sfp-single-grid {
  margin-top: 36px !important;
}

/* ── Checkout — fix centered/narrow layout ── */
.woocommerce-checkout .sfp-checkout-wrap {
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 40px 24px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  float: none !important;
}

/* Remove any WordPress theme content width constraints on checkout */
.woocommerce-checkout .entry-content,
.woocommerce-checkout .page-content,
.woocommerce-checkout article.page,
.woocommerce-checkout .post-content {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}

/* Fix WooCommerce checkout wrapping its own content in a constrained div */
.woocommerce-checkout .woocommerce {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}

/* Fix the inner billing section being compressed */
.sfp-checkout-section .sfp-section-body {
  padding: 20px !important;
}

/* Override WC default checkout form column width */
.woocommerce-checkout #customer_details {
  float: none !important;
  width: 100% !important;
}

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


/* ── Checkout canvas mode — force proper centering ── */
.woocommerce-checkout .sfp-checkout-header {
  text-align: center;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.woocommerce-checkout .sfp-checkout-grid {
  grid-template-columns: 1fr 380px !important;
  width: 100% !important;
}

/* The real fix — WC adds col2-set float layout inside our template */
.woocommerce-checkout .col2-set {
  float: none !important;
  width: 100% !important;
  display: block !important;
}

.woocommerce-checkout #customer_details.col2-set {
  float: none !important;
  width: 100% !important;
}

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


/* ── Nuke WC col2-set float layout on checkout ── */
.woocommerce-checkout .col2-set,
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2,
.woocommerce-checkout #customer_details {
  float: none !important;
  width: 100% !important;
  clear: both !important;
  display: block !important;
}

/* Fix checkout form fields inside our section body */
.sfp-section-body .woocommerce-billing-fields,
.sfp-section-body .woocommerce-shipping-fields {
  width: 100% !important;
  float: none !important;
}

.sfp-section-body .form-row {
  display: block !important;
  float: none !important;
  clear: both !important;
  width: 100% !important;
  margin-bottom: 14px !important;
}

.sfp-section-body .form-row-first,
.sfp-section-body .form-row-last {
  width: 100% !important;
  float: none !important;
}

.sfp-section-body input.input-text,
.sfp-section-body select,
.sfp-section-body textarea {
  width: 100% !important;
  box-sizing: border-box !important;
}


/* ── Checkout fields grid layout ── */
.sfp-fields-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
}
.sfp-fields-grid .form-row-wide,
.sfp-fields-grid .form-row-first.form-row-last {
  grid-column: 1 / -1;
}
.sfp-fields-grid .form-row {
  margin-bottom: 16px;
}

/* Field labels */
.sfp-checkout-section .form-row label {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--steel);
  margin-bottom: 6px;
  display: block;
}

/* Field inputs */
.sfp-checkout-section .form-row input.input-text,
.sfp-checkout-section .form-row select,
.sfp-checkout-section .form-row textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--g200);
  border-radius: var(--r);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--steel);
  background: var(--white);
  transition: border-color .15s;
  box-sizing: border-box;
}
.sfp-checkout-section .form-row input.input-text:focus,
.sfp-checkout-section .form-row select:focus,
.sfp-checkout-section .form-row textarea:focus {
  border-color: var(--orange);
  outline: none;
}

/* Validation — red border on error */
.sfp-checkout-section .form-row.woocommerce-invalid input.input-text,
.sfp-checkout-section .form-row.woocommerce-invalid select {
  border-color: #C0392B !important;
}
.sfp-checkout-section .form-row.woocommerce-invalid label {
  color: #C0392B;
}
.sfp-checkout-section .form-row.woocommerce-invalid .required {
  color: #C0392B;
}

/* Valid field — green border */
.sfp-checkout-section .form-row.woocommerce-validated input.input-text,
.sfp-checkout-section .form-row.woocommerce-validated select {
  border-color: var(--green) !important;
}

/* Required asterisk */
.sfp-checkout-section .required {
  color: var(--orange);
  font-weight: 700;
}

/* Create account section */
.sfp-checkout-section--account {
  background: var(--g50) !important;
  border-color: var(--g100) !important;
}
.sfp-create-account-label {
  display: flex !important;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--steel);
  font-weight: 600;
  cursor: pointer;
  text-transform: none !important;
  letter-spacing: normal !important;
  margin-bottom: 0 !important;
}
.sfp-create-account-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--orange);
  cursor: pointer;
  flex-shrink: 0;
}
.sfp-create-account-fields {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--g200);
}

/* Checkout notices (login form etc) */
.sfp-checkout-notice {
  margin-bottom: 20px;
}
.sfp-checkout-notice .woocommerce-info {
  background: var(--g50);
  border-left: 4px solid var(--steel);
  color: var(--textmid);
  padding: 14px 18px;
  border-radius: var(--r);
  font-size: 14px;
  margin-bottom: 0;
}

/* WC inline validation error messages */
.woocommerce-error,
.woocommerce form .woocommerce-error {
  background: #FEF2F2;
  border-left: 4px solid #C0392B;
  color: #991B1B;
  padding: 12px 16px;
  border-radius: var(--r);
  font-size: 13px;
  margin-bottom: 16px;
  list-style: none;
}


/* ── Checkout order review table alignment fix ── */
.sfp-order-items .woocommerce-checkout-review-order-table {
  width: 100%;
  border-collapse: collapse;
}
.sfp-order-items .woocommerce-checkout-review-order-table th,
.sfp-order-items .woocommerce-checkout-review-order-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--g100);
  font-size: 13px;
  vertical-align: middle;
}
.sfp-order-items .woocommerce-checkout-review-order-table th {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--textlight);
  background: var(--g50);
  text-align: left;
}
.sfp-order-items .woocommerce-checkout-review-order-table th.product-total,
.sfp-order-items .woocommerce-checkout-review-order-table td.product-total {
  text-align: right;
}
.sfp-order-items .woocommerce-checkout-review-order-table .cart-subtotal th,
.sfp-order-items .woocommerce-checkout-review-order-table .cart-subtotal td,
.sfp-order-items .woocommerce-checkout-review-order-table .order-total th,
.sfp-order-items .woocommerce-checkout-review-order-table .order-total td {
  text-align: left;
  background: none;
  font-size: 13px;
  color: var(--textmid);
}
.sfp-order-items .woocommerce-checkout-review-order-table .cart-subtotal td,
.sfp-order-items .woocommerce-checkout-review-order-table .order-total td {
  text-align: right;
}
.sfp-order-items .woocommerce-checkout-review-order-table .order-total th {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 13px;
  text-transform: uppercase;
  color: var(--steel);
}
.sfp-order-items .woocommerce-checkout-review-order-table .order-total .woocommerce-Price-amount {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 22px;
  color: var(--orange);
}
.sfp-order-items .woocommerce-checkout-review-order-table .product-name {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--steel);
  font-size: 13px;
  text-transform: uppercase;
}
.sfp-order-items .woocommerce-checkout-review-order-table .product-name a,
.sfp-order-items .woocommerce-checkout-review-order-table .product-name .sfp-order-item-link {
  color: var(--steel);
  text-decoration: underline;
  text-decoration-color: var(--g200);
  text-underline-offset: 2px;
  transition: color .15s, text-decoration-color .15s;
}
.sfp-order-items .woocommerce-checkout-review-order-table .product-name a:hover,
.sfp-order-items .woocommerce-checkout-review-order-table .product-name .sfp-order-item-link:hover {
  color: var(--orange);
  text-decoration-color: var(--orange);
}


/* =========================================================================
   MOBILE RESPONSIVE — Cart & Checkout
   ========================================================================= */

@media (max-width: 768px) {

  /* ── CART PAGE ── */
  .sfp-cart-wrap {
    padding: 20px 16px !important;
  }
  .sfp-cart-header h2 {
    font-size: 24px !important;
  }
  .sfp-cart-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .sfp-cart-totals {
    position: static !important;
  }
  .sfp-cart-col-heads {
    display: none !important;
  }
  .sfp-cart-item {
    grid-template-columns: 80px 1fr 40px !important;
    grid-template-rows: auto auto !important;
    gap: 10px !important;
    padding: 16px !important;
  }
  .sfp-cart-item-img {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
  }
  .sfp-cart-item-info {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }
  .sfp-cart-item-qty {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }
  .sfp-cart-item-remove {
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: end !important;
  }
  .sfp-cart-item-subtotal {
    display: none !important;
  }
  .sfp-cart-item-name {
    font-size: 13px !important;
  }
  .sfp-cart-item-price {
    font-size: 14px !important;
  }
  .sfp-cart-actions {
    flex-direction: column !important;
    gap: 10px !important;
  }
  .sfp-coupon {
    width: 100% !important;
  }
  .sfp-coupon-input {
    width: 100% !important;
    flex: 1 !important;
  }
  .sfp-totals-head {
    font-size: 13px !important;
    padding: 14px 16px !important;
  }
  .sfp-totals-row {
    padding: 10px 16px !important;
  }
  .sfp-totals-val--total .woocommerce-Price-amount {
    font-size: 24px !important;
  }
  .sfp-totals-checkout {
    padding: 14px 16px !important;
  }
  .sfp-totals-trust {
    flex-direction: column !important;
    gap: 8px !important;
    padding: 14px 16px !important;
  }

  /* ── CHECKOUT PAGE ── */
  .sfp-checkout-wrap {
    padding: 20px 16px !important;
  }
  .sfp-checkout-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    margin-bottom: 20px !important;
  }
  .sfp-checkout-header h1 {
    font-size: 28px !important;
  }
  .sfp-checkout-steps {
    font-size: 12px !important;
  }
  .sfp-checkout-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .sfp-checkout-right {
    order: -1 !important;
  }
  .sfp-checkout-section {
    margin-bottom: 16px !important;
  }
  .sfp-section-head {
    padding: 12px 16px !important;
  }
  .sfp-section-head h2 {
    font-size: 13px !important;
  }
  .sfp-section-body {
    padding: 16px !important;
  }

  /* Fields — single column on mobile */
  .sfp-fields-grid {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  .sfp-fields-grid .form-row-wide,
  .sfp-fields-grid .form-row-first,
  .sfp-fields-grid .form-row-last {
    grid-column: 1 !important;
  }
  .sfp-checkout-section .form-row input.input-text,
  .sfp-checkout-section .form-row select,
  .sfp-checkout-section .form-row textarea {
    font-size: 16px !important; /* prevents iOS zoom on focus */
  }

  /* Order summary on mobile */
  .sfp-order-summary {
    margin-bottom: 16px !important;
  }
  .sfp-totals-head {
    padding: 12px 16px !important;
  }
  .sfp-order-items .woocommerce-checkout-review-order-table th,
  .sfp-order-items .woocommerce-checkout-review-order-table td {
    padding: 10px 12px !important;
    font-size: 12px !important;
  }

  /* Payment section */
  .sfp-payment-section {
    margin-bottom: 16px !important;
  }
  .sfp-payment-head {
    padding: 12px 16px !important;
    font-size: 13px !important;
  }
  #payment .wc_payment_methods {
    padding: 12px 16px !important;
  }
  .form-row.place-order {
    padding: 0 16px 16px !important;
  }
  .sfp-place-order-btn {
    font-size: 14px !important;
    padding: 14px !important;
  }

  /* Trust on mobile */
  .sfp-checkout-trust {
    gap: 12px !important;
  }
  .sfp-trust-item strong {
    font-size: 13px !important;
  }
  .sfp-trust-item span {
    font-size: 11px !important;
  }

  /* ── SHOP PAGE ── */
  .shop-header h1 {
    font-size: 22px !important;
  }
  .shop-header p {
    font-size: 13px !important;
  }
  .shop-layout {
    padding: 16px !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .sidebar {
    display: none !important;
  }
  .woocommerce ul.products,
  body.woocommerce ul.products,
  body.woocommerce-page ul.products {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .card-title {
    font-size: 14px !important;
  }
  .card-desc {
    font-size: 11px !important;
    -webkit-line-clamp: 2 !important;
  }
  .card-specs {
    gap: 4px !important;
  }
  .cs {
    padding: 5px 7px !important;
    min-height: unset !important;
  }
  .cs-label { font-size: 8px !important; }
  .cs-val { font-size: 11px !important; }
  .price-amt .woocommerce-Price-amount {
    font-size: 18px !important;
  }
  .price-from, .price-unit, .price-gst {
    font-size: 9px !important;
  }
  .btn-details, .btn-select, .card-actions a.button {
    font-size: 11px !important;
    padding: 8px 6px !important;
  }

  /* ── SINGLE PRODUCT ── */
  .sfp-single-wrap {
    padding: 0 16px 40px !important;
  }
  .sfp-single-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    margin-top: 20px !important;
  }
  .sfp-single-gallery {
    position: static !important;
  }
  .sfp-single-title {
    font-size: 24px !important;
  }
  .sfp-single-specs {
    grid-template-columns: 1fr 1fr !important;
  }
  .sfp-price-amount,
  .sfp-price-amount .woocommerce-Price-amount {
    font-size: 28px !important;
  }
  .sfp-atc-wrap form.cart {
    flex-wrap: wrap !important;
  }
  .sfp-single-trust {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .sfp-tabs-nav {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .sfp-tab-btn {
    white-space: nowrap !important;
    padding: 12px 16px !important;
    font-size: 11px !important;
  }
  .sfp-related-head h2 {
    font-size: 20px !important;
  }
  .woocommerce ul.products.related-products,
  .sfp-related ul.products {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }

  /* ── BREADCRUMB ── */
  .woocommerce-breadcrumb {
    padding: 8px 16px !important;
    font-size: 11px !important;
  }
}

/* Extra small phones */
@media (max-width: 380px) {
  .woocommerce ul.products,
  body.woocommerce ul.products {
    grid-template-columns: 1fr !important;
  }
  .sfp-cart-item {
    grid-template-columns: 70px 1fr 36px !important;
  }
  /* Specs: single column on tiny screens */
  .sfp-single-specs {
    grid-template-columns: 1fr !important;
  }
  /* Price font tighter */
  .sfp-price-amount,
  .sfp-price-amount .woocommerce-Price-amount {
    font-size: 28px !important;
  }
}

/* ── Lightbox mobile ── */
@media (max-width: 600px) {
  .sfp-lb-prev { left: 8px !important; }
  .sfp-lb-next { right: 8px !important; }
  .sfp-lb-prev,
  .sfp-lb-next {
    width: 38px !important;
    height: 38px !important;
    font-size: 18px !important;
  }
  .sfp-lb-close {
    top: 12px !important;
    right: 12px !important;
    width: 38px !important;
    height: 38px !important;
  }
  .sfp-lb-img {
    max-width: 96vw !important;
    max-height: 80vh !important;
    border-radius: 4px !important;
  }
}

/* ── Mini cart sfp-menu-cart mobile ── */
@media (max-width: 600px) {
  .sfp-menu-cart .elementor-menu-cart__product {
    grid-template-columns: 60px 1fr auto !important;
    gap: 0 10px !important;
    padding: 12px 0 !important;
  }
  .sfp-menu-cart .elementor-menu-cart__product-image img {
    width: 60px !important;
    height: 60px !important;
    border-radius: 6px !important;
  }
  .sfp-menu-cart .elementor-menu-cart__product-name a {
    font-size: 11px !important;
  }
  .sfp-menu-cart .elementor-menu-cart__footer-buttons a {
    padding: 12px 8px !important;
    font-size: 12px !important;
  }
}


/* ── CHECKOUT MOBILE CRITICAL FIX ── */
@media (max-width: 900px) {
  .sfp-checkout-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
  }
  .sfp-checkout-left,
  .sfp-checkout-right {
    width: 100% !important;
    min-width: 0 !important;
    float: none !important;
  }
  .sfp-checkout-right {
    order: -1 !important;
  }
  .sfp-checkout-wrap {
    padding: 20px 16px !important;
  }
  .sfp-fields-grid {
    display: flex !important;
    flex-direction: column !important;
  }
  .sfp-section-body {
    padding: 16px !important;
  }
  .sfp-checkout-section .form-row input.input-text,
  .sfp-checkout-section .form-row select,
  .sfp-checkout-section .form-row textarea {
    font-size: 16px !important;
  }
}


/* ── CHECKOUT MOBILE — maximum override ── */
@media only screen and (max-width: 1024px) {
  .sfp-checkout-grid,
  .woocommerce-checkout .sfp-checkout-grid {
    display: block !important;
    grid-template-columns: unset !important;
  }
  .sfp-checkout-right {
    margin-bottom: 24px !important;
    width: 100% !important;
  }
  .sfp-checkout-left {
    width: 100% !important;
  }
  .sfp-fields-grid,
  .woocommerce-checkout .sfp-fields-grid {
    display: block !important;
    grid-template-columns: unset !important;
  }
  .sfp-fields-grid .form-row {
    width: 100% !important;
    float: none !important;
  }
  .sfp-checkout-section .form-row input.input-text,
  .sfp-checkout-section .form-row select,
  .sfp-checkout-section .form-row textarea {
    font-size: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .sfp-checkout-wrap {
    padding: 20px 16px !important;
  }
}


/* =========================================================================
   MY ACCOUNT — Modern Layout
   ========================================================================= */

.sfp-acct-wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 40px 28px 80px;
}

/* ── Header bar ── */
.sfp-acct-header {
  background: var(--steel);
  border-radius: 4px;
  padding: 32px 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 32px;
  position: relative;
  overflow: hidden;
}
.sfp-acct-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(45deg, transparent, transparent 24px, rgba(255,255,255,.018) 24px, rgba(255,255,255,.018) 48px);
  pointer-events: none;
}
.sfp-acct-header-left {
  display: flex;
  align-items: center;
  gap: 18px;
  position: relative;
}
.sfp-acct-avatar {
  position: relative;
  flex-shrink: 0;
}
.sfp-avatar-img {
  width: 64px !important;
  height: 64px !important;
  border-radius: 50% !important;
  border: 3px solid rgba(255,255,255,.15) !important;
  display: block !important;
}
.sfp-acct-avatar-badge {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 20px;
  height: 20px;
  background: var(--orange);
  border-radius: 50%;
  border: 2px solid var(--steel);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sfp-acct-greeting {
  font-size: 12px;
  color: rgba(255,255,255,.45);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-family: var(--font-head);
  font-weight: 700;
  margin-bottom: 3px;
}
.sfp-acct-name {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 28px;
  text-transform: uppercase;
  color: white;
  margin: 0 0 4px;
  line-height: 1;
}
.sfp-acct-meta {
  font-size: 13px;
  color: rgba(255,255,255,.5);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.sfp-acct-sep { color: rgba(255,255,255,.25); }

/* Header stats */
.sfp-acct-header-right {
  display: flex;
  gap: 32px;
  position: relative;
  flex-wrap: wrap;
}
.sfp-acct-stat {
  text-align: right;
}
.sfp-acct-stat-num {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 24px;
  color: var(--orange);
  line-height: 1;
}
.sfp-acct-stat-num .woocommerce-Price-amount { color: var(--orange); font-size: 24px; font-family: var(--font-head); font-weight: 900; }
.sfp-acct-stat-label {
  font-size: 11px;
  color: rgba(255,255,255,.4);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-top: 3px;
}
.sfp-acct-stat-status {
  font-size: 13px !important;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 3px 10px;
  border-radius: 2px;
  display: inline-block;
}
.status-completed { background: rgba(39,174,96,.15); color: #2ECC71; }
.status-processing { background: rgba(224,78,10,.15); color: #FF7845; }
.status-on-hold { background: rgba(255,255,255,.08); color: rgba(255,255,255,.6); }
.status-pending { background: rgba(255,255,255,.08); color: rgba(255,255,255,.6); }

/* ── Body layout ── */
.sfp-acct-body {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 28px;
  align-items: start;
}

/* ── Sidebar ── */
.sfp-acct-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 100px;
}

/* Nav */
.sfp-acct-nav {
  background: white;
  border: 1px solid var(--g100);
  border-radius: 4px;
  overflow: hidden;
}
.sfp-acct-nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--textmid);
  text-decoration: none;
  border-bottom: 1px solid var(--g50);
  transition: background .15s, color .15s;
  position: relative;
}
.sfp-acct-nav-item:last-child { border-bottom: none; }
.sfp-acct-nav-item:hover { background: var(--g50); color: var(--steel); }
.sfp-acct-nav-item.active {
  background: var(--steel);
  color: white;
  font-weight: 700;
}
.sfp-acct-nav-item.active svg { stroke: white; }
.sfp-acct-nav-item.logout { color: #C0392B; }
.sfp-acct-nav-item.logout:hover { background: #FEF2F2; }
.sfp-acct-nav-item.logout svg { stroke: #C0392B; }
.sfp-nav-chevron { margin-left: auto; opacity: .3; }
.sfp-acct-nav-item.active .sfp-nav-chevron { opacity: .6; }
.sfp-acct-nav-item:hover .sfp-nav-chevron { opacity: .6; }

/* Quick actions */
.sfp-acct-quick {
  background: white;
  border: 1px solid var(--g100);
  border-radius: 4px;
  padding: 18px;
}
.sfp-acct-quick-title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--textlight);
  margin-bottom: 12px;
}
.sfp-acct-quick-btn {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 14px;
  background: var(--g50);
  border: 1px solid var(--g100);
  border-radius: 3px;
  font-size: 13px;
  font-weight: 600;
  color: var(--steel);
  text-decoration: none;
  margin-bottom: 8px;
  transition: border-color .15s, background .15s;
}
.sfp-acct-quick-btn:last-child { margin-bottom: 0; }
.sfp-acct-quick-btn:hover { border-color: var(--orange); background: white; color: var(--orange); }
.sfp-acct-quick-btn:hover svg { stroke: var(--orange); }
.sfp-acct-quick-btn svg { stroke: var(--steel); flex-shrink: 0; }

/* Help box */
.sfp-acct-help {
  background: var(--steel);
  border-radius: 4px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sfp-acct-help-icon {
  width: 36px;
  height: 36px;
  background: rgba(255,255,255,.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sfp-acct-help-text strong {
  display: block;
  font-size: 13px;
  color: white;
  font-weight: 700;
  margin-bottom: 2px;
}
.sfp-acct-help-text span {
  font-size: 11px;
  color: rgba(255,255,255,.45);
}
.sfp-acct-help-link {
  display: inline-flex;
  align-items: center;
  background: var(--orange);
  color: white;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 8px 16px;
  border-radius: 2px;
  text-decoration: none;
  transition: background .15s;
  align-self: flex-start;
}
.sfp-acct-help-link:hover { background: var(--orange-hover); color: white; }

/* ── Main content area ── */
.sfp-acct-main {
  background: white;
  border: 1px solid var(--g100);
  border-radius: 4px;
  padding: 32px;
  min-height: 400px;
}

/* WooCommerce content resets inside our layout */
.sfp-acct-main .woocommerce-MyAccount-content h2 {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 22px;
  text-transform: uppercase;
  color: var(--steel);
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--g50);
}
.sfp-acct-main .woocommerce-MyAccount-content p {
  font-size: 14px;
  color: var(--textlight);
  line-height: 1.72;
  margin-bottom: 14px;
}
.sfp-acct-main .woocommerce-MyAccount-content .button,
.sfp-acct-main .woocommerce-MyAccount-content button[type="submit"] {
  background: var(--orange) !important;
  color: white !important;
  font-family: var(--font-head) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  padding: 11px 24px !important;
  border-radius: var(--r) !important;
  border: none !important;
  cursor: pointer !important;
  transition: background .18s !important;
}
.sfp-acct-main .woocommerce-MyAccount-content .button:hover,
.sfp-acct-main .woocommerce-MyAccount-content button[type="submit"]:hover {
  background: var(--orange-hover) !important;
}

/* Orders table */
.sfp-acct-main .woocommerce-orders-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.sfp-acct-main .woocommerce-orders-table th {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--textlight);
  background: var(--g50);
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--g100);
}
.sfp-acct-main .woocommerce-orders-table td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--g50);
  color: var(--textmid);
  vertical-align: middle;
}
.sfp-acct-main .woocommerce-orders-table tr:last-child td { border-bottom: none; }
.sfp-acct-main .woocommerce-orders-table .woocommerce-orders-table__cell-order-status .woocommerce-order-status {
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.sfp-acct-main .woocommerce-orders-table a { color: var(--orange); font-weight: 600; }
.sfp-acct-main .woocommerce-orders-table a:hover { color: var(--orange-hover); }

/* Address boxes */
.sfp-acct-main .woocommerce-Address {
  background: var(--g50);
  border: 1px solid var(--g100);
  border-radius: 3px;
  padding: 20px;
}
.sfp-acct-main .woocommerce-Address header h3 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--steel);
}
.sfp-acct-main .woocommerce-Address address {
  font-style: normal;
  font-size: 14px;
  color: var(--textmid);
  line-height: 1.72;
}

/* Form fields in account */
.sfp-acct-main .woocommerce-EditAccountForm .form-row,
.sfp-acct-main .edit-account .form-row {
  margin-bottom: 16px;
}
.sfp-acct-main label {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--steel);
  margin-bottom: 6px;
  display: block;
}
.sfp-acct-main input[type="text"],
.sfp-acct-main input[type="email"],
.sfp-acct-main input[type="password"],
.sfp-acct-main select,
.sfp-acct-main textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--g200);
  border-radius: var(--r);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--steel);
  background: white;
  transition: border-color .15s;
  box-sizing: border-box;
}
.sfp-acct-main input:focus,
.sfp-acct-main select:focus,
.sfp-acct-main textarea:focus {
  border-color: var(--orange);
  outline: none;
}

/* Empty state */
.sfp-acct-main .woocommerce-message {
  background: var(--g50);
  border-left: 4px solid var(--orange);
  padding: 16px 20px;
  border-radius: 0 3px 3px 0;
  font-size: 14px;
  color: var(--textmid);
  margin-bottom: 20px;
}

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .sfp-acct-body {
    grid-template-columns: 1fr !important;
  }
  .sfp-acct-sidebar {
    position: static !important;
  }
  .sfp-acct-header {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  .sfp-acct-header-right {
    justify-content: flex-start !important;
  }
}
@media (max-width: 640px) {
  .sfp-acct-wrap { padding: 20px 16px 40px !important; }
  .sfp-acct-main { padding: 20px !important; }
  .sfp-acct-name { font-size: 22px !important; }
  .sfp-acct-header-right { gap: 20px !important; }
  .sfp-acct-stat-num { font-size: 18px !important; }
}


/* ── My Account — reset woocommerce wrapper so our template controls layout ── */
.woocommerce-account .woocommerce {
  display: block !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  grid-template-columns: none !important;
  float: none !important;
}
.woocommerce-MyAccount-navigation {
  background: white !important;
  border: 1px solid var(--g100) !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  margin-bottom: 20px !important;
  float: none !important;
  width: 100% !important;
  max-width: 260px !important;
}
.woocommerce-MyAccount-navigation ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.woocommerce-MyAccount-navigation ul li a {
  display: flex !important;
  align-items: center !important;
  padding: 13px 18px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--textmid) !important;
  text-decoration: none !important;
  border-bottom: 1px solid var(--g50) !important;
  transition: background .15s !important;
}
.woocommerce-MyAccount-navigation ul li a:hover {
  background: var(--g50) !important;
  color: var(--steel) !important;
}
.woocommerce-MyAccount-navigation ul li.is-active a {
  background: var(--steel) !important;
  color: white !important;
  font-weight: 700 !important;
}
.woocommerce-MyAccount-content {
  background: white !important;
  border: 1px solid var(--g100) !important;
  border-radius: 4px !important;
  padding: 32px !important;
  float: none !important;
  width: 100% !important;
}

/* Layout using flex when our template isn't active */
.woocommerce-account .woocommerce-MyAccount-navigation + .woocommerce-MyAccount-content {
  display: block !important;
}
/* Only block col2-set for logged in users, not login/register page */
body.logged-in.woocommerce-account .col2-set {
  display: block !important;
}
/* Login/register page — side by side */
body.woocommerce-account:not(.logged-in) .woocommerce > .col2-set {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 40px !important;
  float: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
body.woocommerce-account:not(.logged-in) .woocommerce > .col2-set .col-1,
body.woocommerce-account:not(.logged-in) .woocommerce > .col2-set .col-2 {
  float: none !important;
  width: 100% !important;
}


/* ── My Account — extra nav items and help box ── */
.sfp-nav-divider {
  height: 1px;
  background: var(--g100);
  margin: 8px 0;
}
.sfp-nav-item--quick {
  color: var(--orange) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}
.sfp-nav-item--quick svg { stroke: var(--orange) !important; }
.sfp-nav-item--quick:hover {
  background: rgba(224,78,10,.06) !important;
  color: var(--orange-hover) !important;
}
.sfp-nav-help {
  margin-top: 12px;
  background: var(--steel);
  border-radius: 3px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sfp-nav-help strong {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 13px;
  color: white;
}
.sfp-nav-help span {
  font-size: 11px;
  color: rgba(255,255,255,.45);
}
.sfp-nav-help a {
  display: inline-block;
  margin-top: 8px;
  background: var(--orange);
  color: white !important;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 2px;
  text-decoration: none;
  transition: background .15s;
  align-self: flex-start;
}
.sfp-nav-help a:hover { background: var(--orange-hover) !important; }


/* =========================================================================
   MY ACCOUNT — Full width modern overhaul
   ========================================================================= */

/* Full width wrap */
.sfp-account-wrap {
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Header — full bleed dark steel */
.sfp-account-header {
  background: var(--steel) !important;
  border-radius: 0 !important;
  padding: 36px 48px !important;
  margin-bottom: 40px !important;
  position: relative !important;
  overflow: hidden !important;
}
.sfp-account-header::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: repeating-linear-gradient(45deg, transparent, transparent 28px, rgba(255,255,255,.018) 28px, rgba(255,255,255,.018) 56px) !important;
  pointer-events: none !important;
}
.sfp-account-header::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 4px !important;
  background: repeating-linear-gradient(90deg, var(--orange) 0, var(--orange) 36px, #2C4166 36px, #2C4166 52px) !important;
}
.sfp-account-avatar img {
  width: 72px !important;
  height: 72px !important;
  border-radius: 50% !important;
  border: 3px solid rgba(255,255,255,.2) !important;
}
.sfp-account-info h1 {
  font-size: 32px !important;
  letter-spacing: .03em !important;
}
.sfp-account-info p {
  font-size: 14px !important;
}

/* Grid — wider sidebar, more gap */
.sfp-account-grid {
  display: grid !important;
  grid-template-columns: 280px 1fr !important;
  gap: 32px !important;
  align-items: start !important;
  max-width: 1240px !important;
  margin: 0 auto !important;
  padding: 0 32px 60px !important;
}

/* Sidebar nav — cleaner */
.sfp-account-nav {
  border-radius: 6px !important;
  border: 1px solid var(--g100) !important;
  overflow: visible !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.05) !important;
}
.sfp-nav-item {
  padding: 14px 20px !important;
  font-size: 14px !important;
  gap: 12px !important;
  border-bottom: 1px solid var(--g50) !important;
}
.sfp-nav-item--active {
  background: var(--steel) !important;
  color: white !important;
  border-left: 3px solid var(--orange) !important;
  padding-left: 17px !important;
}
.sfp-nav-item--active svg {
  stroke: white !important;
}
.sfp-nav-item--active:hover {
  background: var(--steel) !important;
  color: white !important;
}

/* Divider */
.sfp-nav-divider {
  height: 1px !important;
  background: var(--g100) !important;
  margin: 4px 0 !important;
}

/* Quick link items */
.sfp-nav-item--quick {
  font-size: 13px !important;
  color: var(--orange) !important;
  font-weight: 600 !important;
}
.sfp-nav-item--quick svg { stroke: var(--orange) !important; }
.sfp-nav-item--quick:hover { background: rgba(224,78,10,.06) !important; }

/* Help box — full width inside sidebar */
.sfp-nav-help {
  margin: 12px 0 0 !important;
  background: var(--steel) !important;
  border-radius: 6px !important;
  padding: 20px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
}
.sfp-nav-help strong {
  font-family: var(--font-head) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  color: white !important;
  display: block !important;
}
.sfp-nav-help span {
  font-size: 12px !important;
  color: rgba(255,255,255,.45) !important;
  display: block !important;
}
.sfp-nav-help a {
  display: inline-block !important;
  margin-top: 12px !important;
  background: var(--orange) !important;
  color: white !important;
  font-family: var(--font-head) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  padding: 9px 18px !important;
  border-radius: 3px !important;
  text-decoration: none !important;
  transition: background .15s !important;
}
.sfp-nav-help a:hover { background: var(--orange-hover) !important; color: white !important; }

/* Main content */
.sfp-account-content {
  border-radius: 6px !important;
  border: 1px solid var(--g100) !important;
  padding: 36px !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.04) !important;
  min-height: 500px !important;
}
.sfp-account-content h2:not(.sfp-dash-name),
.sfp-account-content .woocommerce-MyAccount-content h2:not(.sfp-dash-name) {
  font-family: var(--font-head) !important;
  font-weight: 900 !important;
  font-size: 24px !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
  margin-bottom: 24px !important;
  padding-bottom: 16px !important;
  border-bottom: 2px solid var(--g50) !important;
  letter-spacing: .02em !important;
}

/* Responsive */
@media (max-width: 1024px) {
  .sfp-account-grid {
    grid-template-columns: 240px 1fr !important;
    padding: 0 24px 40px !important;
    gap: 24px !important;
  }
  .sfp-account-header {
    padding: 28px 32px !important;
  }
}
@media (max-width: 768px) {
  .sfp-account-grid {
    grid-template-columns: 1fr !important;
    padding: 0 16px 32px !important;
  }
  .sfp-account-header {
    padding: 24px 20px !important;
  }
  .sfp-account-info h1 {
    font-size: 24px !important;
  }
  .sfp-account-content {
    padding: 20px !important;
  }
  .sfp-account-nav {
    position: static !important;
    display: flex !important;
    flex-wrap: wrap !important;
  }
  .sfp-nav-item {
    flex: 1 !important;
    min-width: 130px !important;
    justify-content: center !important;
    font-size: 12px !important;
    padding: 10px 8px !important;
    gap: 6px !important;
  }
  .sfp-nav-item--quick,
  .sfp-nav-divider,
  .sfp-nav-help {
    display: none !important;
  }
}


/* ── Cart page quantity buttons fix ── */
.sfp-cart-item-qty .quantity {
  display: flex !important;
  align-items: stretch !important;
  gap: 0 !important;
  border: 1.5px solid var(--g200) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  width: fit-content !important;
}
.sfp-cart-item-qty .quantity .sfp-qty-btn {
  width: 36px !important;
  min-width: 36px !important;
  height: 40px !important;
  background: var(--g50) !important;
  border: none !important;
  border-radius: 0 !important;
  font-size: 20px !important;
  color: var(--steel) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: background .15s, color .15s !important;
  flex-shrink: 0 !important;
}
.sfp-cart-item-qty .quantity .sfp-qty-btn:hover {
  background: var(--orange) !important;
  color: white !important;
}
.sfp-cart-item-qty .quantity .sfp-qty-minus {
  border-right: 1.5px solid var(--g200) !important;
}
.sfp-cart-item-qty .quantity .sfp-qty-plus {
  border-left: 1.5px solid var(--g200) !important;
}
.sfp-cart-item-qty .qty {
  width: 46px !important;
  border: none !important;
  border-radius: 0 !important;
  text-align: center !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--steel) !important;
  padding: 0 !important;
  height: 40px !important;
  -moz-appearance: textfield !important;
}
.sfp-cart-item-qty .qty::-webkit-inner-spin-button,
.sfp-cart-item-qty .qty::-webkit-outer-spin-button {
  -webkit-appearance: none !important;
}

/* Remove button — needs enough space from stepper */
.sfp-cart-item-remove {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding-left: 8px !important;
}


/* =========================================================================
   MY ACCOUNT — Login & Register Page (full page styling)
   ========================================================================= */

.woocommerce-account .woocommerce-MyAccount-content .u-column1,
.woocommerce-account .woocommerce-MyAccount-content .u-column2 {
  float: none !important;
  width: 100% !important;
}

/* Full page login/register layout */
body.woocommerce-account:not(.logged-in) .woocommerce {
  display: block !important;
}
body.woocommerce-account:not(.logged-in) .woocommerce > .col2-set {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 40px !important;
  max-width: 960px !important;
  margin: 60px auto !important;
  padding: 0 28px !important;
}
body.woocommerce-account:not(.logged-in) .woocommerce > .col2-set .col-1,
body.woocommerce-account:not(.logged-in) .woocommerce > .col2-set .col-2 {
  background: white !important;
  border: 1px solid var(--g100) !important;
  border-radius: 6px !important;
  padding: 36px !important;
  box-shadow: 0 4px 24px rgba(0,0,0,.06) !important;
  float: none !important;
  width: 100% !important;
}

/* Section headings */
body.woocommerce-account:not(.logged-in) .woocommerce h2 {
  font-family: var(--font-head) !important;
  font-weight: 900 !important;
  font-size: 24px !important;
  text-transform: uppercase !important;
  color: var(--steel) !important;
  margin-bottom: 24px !important;
  padding-bottom: 16px !important;
  border-bottom: 2px solid var(--g50) !important;
  letter-spacing: .03em !important;
}

/* Labels */
body.woocommerce-account:not(.logged-in) .woocommerce label {
  font-family: var(--font-head) !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
  color: var(--steel) !important;
  margin-bottom: 7px !important;
  display: block !important;
}

/* Inputs */
body.woocommerce-account:not(.logged-in) .woocommerce input[type="text"],
body.woocommerce-account:not(.logged-in) .woocommerce input[type="email"],
body.woocommerce-account:not(.logged-in) .woocommerce input[type="password"] {
  width: 100% !important;
  padding: 12px 16px !important;
  border: 1.5px solid var(--g200) !important;
  border-radius: var(--r) !important;
  font-size: 15px !important;
  color: var(--steel) !important;
  background: white !important;
  box-sizing: border-box !important;
  transition: border-color .15s, box-shadow .15s !important;
  font-family: var(--font-body) !important;
}
body.woocommerce-account:not(.logged-in) .woocommerce input:focus {
  border-color: var(--orange) !important;
  box-shadow: 0 0 0 3px rgba(224,78,10,.08) !important;
  outline: none !important;
}

/* Buttons */
body.woocommerce-account:not(.logged-in) .woocommerce .button,
body.woocommerce-account:not(.logged-in) .woocommerce button[type="submit"] {
  background: var(--orange) !important;
  color: white !important;
  border: none !important;
  border-radius: var(--r) !important;
  padding: 13px 28px !important;
  font-family: var(--font-head) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: background .18s !important;
  width: 100% !important;
}
body.woocommerce-account:not(.logged-in) .woocommerce .button:hover {
  background: var(--orange-hover) !important;
}

/* Remember me + lost password */
body.woocommerce-account:not(.logged-in) .woocommerce .login .lost_password {
  margin-top: 14px !important;
  font-size: 13px !important;
}
body.woocommerce-account:not(.logged-in) .woocommerce .login .lost_password a {
  color: var(--orange) !important;
  font-weight: 600 !important;
}
body.woocommerce-account:not(.logged-in) .woocommerce .form-row {
  margin-bottom: 18px !important;
}
body.woocommerce-account:not(.logged-in) .woocommerce .login .inline {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 13px !important;
  color: var(--textlight) !important;
}
body.woocommerce-account:not(.logged-in) .woocommerce .login .inline input {
  width: auto !important;
  accent-color: var(--orange) !important;
}

/* Register notice */
body.woocommerce-account:not(.logged-in) .woocommerce .woocommerce-privacy-policy-text {
  font-size: 12px !important;
  color: var(--textlight) !important;
  line-height: 1.6 !important;
  margin-bottom: 16px !important;
}

/* Page header */
body.woocommerce-account:not(.logged-in) .woocommerce > h2,
body.woocommerce-account:not(.logged-in) .woocommerce-page-title {
  display: none !important;
}

/* Add a nice top banner */
body.woocommerce-account:not(.logged-in) .sfp-account-header {
  display: block !important;
  text-align: center !important;
  padding: 48px 28px 56px !important;
}
body.woocommerce-account:not(.logged-in) .sfp-account-header h1 {
  font-size: 36px !important;
  margin-bottom: 8px !important;
}

/* Mobile */
@media (max-width: 768px) {
  body.woocommerce-account:not(.logged-in) .woocommerce > .col2-set {
    grid-template-columns: 1fr !important;
    margin: 32px auto !important;
  }
}

/* =========================================================================
   SHOW PASSWORD TOGGLE
   ========================================================================= */

.sfp-pw-wrap {
  position: relative !important;
  display: block !important;
  width: 100% !important;
}
.sfp-pw-wrap input[type="password"],
.sfp-pw-wrap input[type="text"] {
  padding-right: 48px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.sfp-pw-toggle {
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  padding: 4px !important;
  color: var(--g400) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: color .15s !important;
  z-index: 2 !important;
}
.sfp-pw-toggle:hover {
  color: var(--orange) !important;
}
.sfp-pw-toggle svg {
  stroke: currentColor !important;
  display: block !important;
}

/* Show password inside login popup */
.sfp-login-body .sfp-pw-wrap input {
  width: 100% !important;
  box-sizing: border-box !important;
  margin-bottom: 0 !important;
}


/* =========================================================================
   ELEMENTOR CART WIDGET — quantity and price styling
   ========================================================================= */

/* Remove border around quantity in Elementor cart */
.elementor-widget-woocommerce-cart .quantity,
.woocommerce-cart-form .quantity {
  border: none !important;
  background: transparent !important;
}

/* Quantity input */
.elementor-widget-woocommerce-cart .quantity input.qty,
.woocommerce-cart-form .quantity input.qty {
  border: 1.5px solid var(--g200) !important;
  border-radius: var(--r) !important;
  color: var(--steel) !important;
  font-family: var(--font-head) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  text-align: center !important;
  padding: 8px !important;
  width: 60px !important;
  background: white !important;
}

/* Price/subtotal color */
.elementor-widget-woocommerce-cart .product-subtotal,
.elementor-widget-woocommerce-cart .product-subtotal .woocommerce-Price-amount,
.woocommerce-cart-form .product-subtotal .woocommerce-Price-amount,
.woocommerce-cart-form td.product-subtotal {
  color: var(--orange) !important;
  font-family: var(--font-head) !important;
  font-weight: 800 !important;
  font-size: 16px !important;
}

/* Unit price */
.elementor-widget-woocommerce-cart .product-price .woocommerce-Price-amount,
.woocommerce-cart-form .product-price .woocommerce-Price-amount {
  color: var(--steel) !important;
  font-family: var(--font-head) !important;
  font-weight: 700 !important;
}

/* Remove any box/border around price cells */
.woocommerce-cart-form td.product-price,
.woocommerce-cart-form td.product-subtotal {
  border: none !important;
  background: transparent !important;
}







/* ── Checkout notice ── */
.sfp-checkout-notice {
  background: white;
  border: 1px solid var(--g100);
  border-left: 4px solid var(--steel);
  border-radius: var(--r);
  padding: 14px 20px;
  margin-bottom: 20px;
  font-size: 14px;
  color: var(--textmid);
  display: flex;
  align-items: center;
  gap: 10px;
}


/* ── Select2 styling to match other checkout fields exactly ── */
.sfp-checkout-section .select2-container--default .select2-selection--single {
  height: auto !important;
  padding: 11px 14px !important;
  border: 1.5px solid var(--g200) !important;
  border-radius: var(--r) !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  color: var(--steel) !important;
  background: var(--white) !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
}
.sfp-checkout-section .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0 !important;
  line-height: 1.5 !important;
  color: var(--steel) !important;
  font-size: 14px !important;
  font-family: var(--font-body) !important;
}
.sfp-checkout-section .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100% !important;
  top: 0 !important;
  right: 10px !important;
}
.sfp-checkout-section .select2-container--default.select2-container--focus .select2-selection--single,
.sfp-checkout-section .select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--orange) !important;
  outline: none !important;
}


/* ── Select2 2px width fix ── */
.sfp-checkout-section .select2-container--default .select2-selection--single {
  box-sizing: border-box !important;
}


/* =========================================================================
   MY ACCOUNT — Dashboard Override
   ========================================================================= */

.sfp-dash-wrap {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ── Welcome banner ── */
.sfp-dash-banner {
  background: var(--steel);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}
.sfp-dash-banner-bg {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(45deg, transparent, transparent 28px, rgba(255,255,255,.018) 28px, rgba(255,255,255,.018) 56px);
}
.sfp-dash-banner-bg::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: var(--orange);
}
.sfp-dash-banner-content {
  position: relative;
  padding: 28px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}
.sfp-dash-welcome {
  display: flex;
  align-items: center;
  gap: 16px;
}
.sfp-dash-avatar {
  position: relative;
  flex-shrink: 0;
}
.sfp-dash-avatar-img {
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  border: 2px solid rgba(255,255,255,.2) !important;
  display: block !important;
}
.sfp-dash-avatar-dot {
  position: absolute;
  bottom: 1px; right: 1px;
  width: 14px; height: 14px;
  background: #22C55E;
  border-radius: 50%;
  border: 2px solid var(--steel);
}
.sfp-dash-greeting {
  font-size: 11px;
  color: rgba(255,255,255,.45);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-family: var(--font-head);
  font-weight: 700;
  margin-bottom: 2px;
}
.sfp-dash-name {
  font-family: var(--font-head) !important;
  font-weight: 900 !important;
  font-size: 24px !important;
  text-transform: uppercase !important;
  color: white !important;
  margin: 0 0 2px !important;
  line-height: 1 !important;
  border: none !important;
  padding: 0 !important;
}
.sfp-dash-email {
  font-size: 13px;
  color: rgba(255,255,255,.45);
}

/* Stats */
.sfp-dash-stats {
  display: flex;
  align-items: center;
  gap: 24px;
}
.sfp-dash-stat { text-align: right; }
.sfp-dash-stat-val {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 22px;
  color: var(--orange);
  line-height: 1;
}
.sfp-dash-stat-val .woocommerce-Price-amount { font-size: 22px; color: var(--orange); font-family: var(--font-head); font-weight: 900; }
.sfp-dash-stat-key {
  font-size: 10px;
  color: rgba(255,255,255,.4);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-top: 2px;
}
.sfp-dash-stat-div {
  width: 1px;
  height: 32px;
  background: rgba(255,255,255,.1);
}

/* ── Quick actions ── */
.sfp-dash-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.sfp-dash-action {
  background: white;
  border: 1px solid var(--g100);
  border-radius: 6px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  transition: border-color .15s, box-shadow .15s, transform .14s;
}
.sfp-dash-action:hover {
  border-color: var(--orange);
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
  transform: translateY(-1px);
}
.sfp-dash-action--highlight {
  background: var(--steel);
  border-color: var(--steel);
}
.sfp-dash-action--highlight:hover {
  border-color: var(--orange);
  background: #223352;
}
.sfp-dash-action-ico {
  width: 40px;
  height: 40px;
  background: var(--g50);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--steel);
}
.sfp-dash-action--highlight .sfp-dash-action-ico {
  background: rgba(255,255,255,.1);
  color: white;
}
.sfp-dash-action-text {
  flex: 1;
  min-width: 0;
}
.sfp-dash-action-text strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--steel);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sfp-dash-action--highlight .sfp-dash-action-text strong { color: white; }
.sfp-dash-action-text span {
  display: block;
  font-size: 11px;
  color: var(--textlight);
  margin-top: 1px;
}
.sfp-dash-action--highlight .sfp-dash-action-text span { color: rgba(255,255,255,.5); }
.sfp-dash-action-arrow { color: var(--g300); flex-shrink: 0; }
.sfp-dash-action--highlight .sfp-dash-action-arrow { color: rgba(255,255,255,.3); }

/* ── Section ── */
.sfp-dash-section {
  background: white;
  border: 1px solid var(--g100);
  border-radius: 6px;
  overflow: hidden;
}
.sfp-dash-section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 22px;
  border-bottom: 1px solid var(--g50);
}
.sfp-dash-section-head h3 {
  font-family: var(--font-head) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  color: var(--steel) !important;
  margin: 0 !important;
  border: none !important;
  padding: 0 !important;
}
.sfp-dash-view-all {
  font-size: 12px;
  font-weight: 600;
  color: var(--orange);
  text-decoration: none;
}
.sfp-dash-view-all:hover { color: var(--orange-hover); }

/* Orders list */
.sfp-dash-orders { padding: 0; }
.sfp-dash-order {
  display: grid;
  grid-template-columns: 120px 1fr auto auto auto;
  align-items: center;
  gap: 16px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--g50);
  font-size: 13px;
  transition: background .12s;
}
.sfp-dash-order:last-child { border-bottom: none; }
.sfp-dash-order:hover { background: var(--g50); }
.sfp-dash-order-id strong { display: block; color: var(--steel); font-weight: 700; }
.sfp-dash-order-id span { color: var(--textlight); font-size: 11px; }
.sfp-dash-order-items { color: var(--textmid); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sfp-dash-order-total { font-family: var(--font-head); font-weight: 800; color: var(--steel); white-space: nowrap; }
.sfp-dash-order-status {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 2px;
  white-space: nowrap;
}
.status-completed { background: rgba(34,197,94,.1); color: #16A34A; }
.status-processing { background: rgba(224,78,10,.1); color: var(--orange); }
.status-on-hold, .status-pending { background: var(--g50); color: var(--textlight); }
.status-cancelled { background: rgba(239,68,68,.1); color: #DC2626; }
.sfp-dash-order-link {
  font-size: 12px;
  font-weight: 700;
  color: var(--orange);
  text-decoration: none;
  white-space: nowrap;
}
.sfp-dash-order-link:hover { color: var(--orange-hover); }

/* Empty state */
.sfp-dash-empty {
  text-align: center;
  padding: 48px 28px;
}
.sfp-dash-empty svg { stroke: var(--g200); margin-bottom: 16px; }
.sfp-dash-empty h3 {
  font-family: var(--font-head) !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  color: var(--steel) !important;
  margin-bottom: 8px !important;
  border: none !important;
  padding: 0 !important;
}
.sfp-dash-empty p { font-size: 14px; color: var(--textlight); margin-bottom: 20px; }
.sfp-dash-empty-btn,
.woocommerce a.sfp-dash-empty-btn,
.woocommerce-page a.sfp-dash-empty-btn {
  background: var(--orange);
  color: white !important;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 11px 24px;
  border-radius: var(--r);
  text-decoration: none;
  display: inline-block;
  transition: background .15s;
}
.sfp-dash-empty-btn:hover,
.woocommerce a.sfp-dash-empty-btn:hover,
.woocommerce-page a.sfp-dash-empty-btn:hover { background: var(--orange-hover); color: white !important; }

/* ── Info strip ── */
.sfp-dash-info {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.sfp-dash-info-item {
  background: var(--g50);
  border: 1px solid var(--g100);
  border-radius: 6px;
  padding: 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.sfp-dash-info-item svg { stroke: var(--orange); flex-shrink: 0; margin-top: 1px; }
.sfp-dash-info-item strong { display: block; font-size: 12px; font-weight: 700; color: var(--steel); margin-bottom: 2px; }
.sfp-dash-info-item span { font-size: 12px; color: var(--textlight); line-height: 1.4; }
.sfp-dash-info-item a { color: var(--orange); text-decoration: none; font-weight: 600; }
.sfp-dash-info-item a:hover { color: var(--orange-hover); }

/* ── Responsive ── */
@media (max-width: 900px) {
  .sfp-dash-actions { grid-template-columns: 1fr 1fr !important; }
  .sfp-dash-info { grid-template-columns: 1fr 1fr !important; }
  .sfp-dash-order { grid-template-columns: 1fr auto auto !important; }
  .sfp-dash-order-items { display: none !important; }
  .sfp-dash-banner-content { flex-direction: column !important; align-items: flex-start !important; }
  .sfp-dash-stats { justify-content: flex-start !important; }
}
@media (max-width: 640px) {
  .sfp-dash-actions { grid-template-columns: 1fr !important; }
  .sfp-dash-info { grid-template-columns: 1fr !important; }
  .sfp-dash-stat { text-align: left !important; }
  .sfp-dash-banner-content { padding: 20px !important; }
}


/* ── Dashboard extra mobile fixes ── */
@media (max-width: 900px) {
  .sfp-dash-wrap { gap: 16px !important; }
  .sfp-dash-stats { gap: 16px !important; flex-wrap: wrap !important; }
  .sfp-dash-stat-div { display: none !important; }
  .sfp-dash-stat { text-align: left !important; }
  .sfp-dash-order { grid-template-columns: 1fr auto !important; gap: 10px !important; }
  .sfp-dash-order-total,
  .sfp-dash-order-status { display: none !important; }
  .sfp-dash-action { padding: 12px !important; }
}
@media (max-width: 640px) {
  .sfp-dash-banner-content { gap: 16px !important; }
  .sfp-dash-welcome { gap: 12px !important; }
  .sfp-dash-avatar-img { width: 44px !important; height: 44px !important; }
  .sfp-dash-name { font-size: 20px !important; }
  .sfp-dash-action-text strong { font-size: 12px !important; }
  .sfp-dash-action-text span { display: none !important; }
  .sfp-dash-section-head { padding: 14px 16px !important; }
  .sfp-dash-order { padding: 12px 16px !important; }
  .sfp-dash-info-item { padding: 12px !important; }
}

/* SNIPPET — paste at bottom of woocommerce.css */

/* ── Registration form extra fields ── */
.sfp-reg-two-col {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
}
.sfp-reg-two-col .form-row {
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
}
.register .sfp-reg-two-col input,
.register input[type="tel"] {
  width: 100% !important;
  box-sizing: border-box !important;
}
@media (max-width: 480px) {
  .sfp-reg-two-col { grid-template-columns: 1fr !important; }
}

/* =========================================================================
   CUSTOM PANEL LENGTH INPUT — Single Product Page
   ========================================================================= */

.sfp-length-field {
  margin: 20px 0;
  padding: 20px;
  background: #F4F1EB;
  border: 1.5px solid #D5D1C9;
  border-radius: 4px;
}
.sfp-length-field label {
  font-family: var(--font-head) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: var(--steel) !important;
  display: block !important;
  margin-bottom: 10px !important;
}
.sfp-length-hint {
  display: block !important;
  font-family: var(--font-body) !important;
  font-weight: 400 !important;
  font-size: 12px !important;
  color: var(--textlight) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  margin-top: 3px !important;
}
.sfp-length-input-wrap {
  display: flex;
  align-items: center;
  gap: 0;
  max-width: 200px;
}
.sfp-length-input {
  width: 100% !important;
  padding: 12px 16px !important;
  border: 1.5px solid var(--g200) !important;
  border-right: none !important;
  border-radius: var(--r) 0 0 var(--r) !important;
  font-size: 18px !important;
  font-family: var(--font-head) !important;
  font-weight: 700 !important;
  color: var(--steel) !important;
  background: white !important;
  box-sizing: border-box !important;
  -moz-appearance: textfield !important;
}
.sfp-length-input::-webkit-inner-spin-button,
.sfp-length-input::-webkit-outer-spin-button { -webkit-appearance: none !important; }
.sfp-length-input:focus {
  border-color: var(--orange) !important;
  outline: none !important;
}
.sfp-length-unit {
  background: var(--steel);
  color: white;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 14px;
  padding: 12px 16px;
  border-radius: 0 var(--r) var(--r) 0;
  letter-spacing: .06em;
}
.sfp-length-price-preview {
  margin-top: 12px;
  font-size: 14px;
  color: var(--textmid);
  font-family: var(--font-head);
  font-weight: 600;
}
.sfp-length-price-preview strong {
  color: var(--orange);
  font-size: 20px;
  font-weight: 900;
}
.sfp-length-price-preview span {
  font-size: 11px;
  color: var(--textlight);
  font-weight: 400;
}
.sfp-length-error {
  color: #C0392B;
  font-size: 13px;
  font-weight: 600;
  margin-top: 8px;
}


/* =========================================================================
   DOOR QUOTE POPUP
   ========================================================================= */

/* POR note + button */
.sfp-por-wrap {
  margin: 20px 0;
}
.sfp-por-note {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #F4F1EB;
  border: 1px solid #D5D1C9;
  border-left: 4px solid var(--steel);
  border-radius: var(--r);
  padding: 12px 16px;
  font-size: 13px;
  color: var(--textmid);
  font-weight: 600;
  margin-bottom: 16px;
}
.sfp-por-note svg { stroke: var(--steel); flex-shrink: 0; }
.sfp-door-quote-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  background: var(--orange) !important;
  color: white !important;
  border: none !important;
  border-radius: var(--r) !important;
  padding: 15px 28px !important;
  font-family: var(--font-head) !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: background .18s, transform .14s !important;
  box-shadow: 0 4px 20px rgba(224,78,10,.3) !important;
}
.sfp-door-quote-btn:hover {
  background: var(--orange-hover) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 28px rgba(224,78,10,.4) !important;
}
.sfp-door-quote-btn svg { stroke: white; flex-shrink: 0; }

/* Overlay */
.sfp-door-overlay {
  position: fixed;
  inset: 0;
  background: rgba(16,24,40,.7);
  backdrop-filter: blur(4px);
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
  padding: 20px;
  box-sizing: border-box;
}
.sfp-door-overlay.active {
  opacity: 1;
  pointer-events: all;
}

/* Modal */
.sfp-door-modal {
  background: white;
  border-radius: 6px;
  width: 100%;
  max-width: 560px;
  max-height: 92vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 24px 64px rgba(0,0,0,.25);
  transform: translateY(16px);
  transition: transform .22s ease;
  -webkit-overflow-scrolling: touch;
}
.sfp-door-overlay.active .sfp-door-modal {
  transform: translateY(0);
}

/* Close button */
.sfp-door-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  border: none;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: background .15s;
}
.sfp-door-close:hover { background: rgba(255,255,255,.25); }

/* Modal header */
.sfp-door-modal-head {
  background: var(--steel);
  padding: 28px 28px 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.sfp-door-modal-head::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(45deg, transparent, transparent 20px, rgba(255,255,255,.02) 20px, rgba(255,255,255,.02) 40px);
}
.sfp-door-modal-head::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: var(--orange);
}
.sfp-door-modal-icon {
  width: 48px;
  height: 48px;
  background: var(--orange);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  position: relative;
}
.sfp-door-modal-title {
  font-family: var(--font-head) !important;
  font-weight: 900 !important;
  font-size: 22px !important;
  text-transform: uppercase !important;
  color: white !important;
  margin: 0 0 6px !important;
  position: relative !important;
  letter-spacing: .04em !important;
  border: none !important;
  padding: 0 !important;
}
.sfp-door-modal-sub {
  font-size: 13px !important;
  color: rgba(255,255,255,.55) !important;
  margin: 0 !important;
  position: relative !important;
}

/* Modal body — CF7 inside */
.sfp-door-modal-body {
  padding: 24px 28px 28px;
}
.sfp-door-modal-body .wpcf7-form label {
  font-family: var(--font-head) !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
  color: var(--steel) !important;
  margin-bottom: 7px !important;
  display: block !important;
}
.sfp-door-modal-body .wpcf7-form input[type="text"],
.sfp-door-modal-body .wpcf7-form input[type="email"],
.sfp-door-modal-body .wpcf7-form input[type="tel"],
.sfp-door-modal-body .wpcf7-form select,
.sfp-door-modal-body .wpcf7-form textarea {
  width: 100% !important;
  padding: 11px 14px !important;
  border: 1.5px solid var(--g200) !important;
  border-radius: var(--r) !important;
  font-size: 15px !important;
  color: var(--steel) !important;
  background: white !important;
  box-sizing: border-box !important;
  transition: border-color .15s !important;
  font-family: var(--font-body) !important;
}
.sfp-door-modal-body .wpcf7-form input:focus,
.sfp-door-modal-body .wpcf7-form select:focus,
.sfp-door-modal-body .wpcf7-form textarea:focus {
  border-color: var(--orange) !important;
  outline: none !important;
}
.sfp-door-modal-body .wpcf7-form textarea {
  min-height: 110px !important;
  resize: vertical !important;
}
.sfp-door-modal-body .wpcf7-form .wpcf7-submit,
.sfp-door-modal-body .wpcf7-form input[type="submit"] {
  width: 100% !important;
  background: var(--orange) !important;
  color: white !important;
  border: none !important;
  border-radius: var(--r) !important;
  padding: 13px !important;
  font-family: var(--font-head) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: background .18s !important;
}
.sfp-door-modal-body .wpcf7-form .wpcf7-submit:hover {
  background: var(--orange-hover) !important;
}
.sfp-door-modal-body .wpcf7-mail-sent-ok {
  background: #F0FDF4 !important;
  border: 1px solid #22C55E !important;
  border-left: 4px solid #22C55E !important;
  color: #166534 !important;
  padding: 12px 16px !important;
  border-radius: var(--r) !important;
  font-size: 14px !important;
}
.sfp-door-modal-body .wpcf7-form p { margin-bottom: 16px !important; }
.sfp-door-modal-body .wpcf7-form p:last-of-type { margin-bottom: 0 !important; }

/* Two col inside popup */
.sfp-door-modal-body .sfp-ct-two-col {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
}
.sfp-door-modal-body .sfp-ct-two-col .wpcf7-form-control-wrap,
.sfp-door-modal-body .sfp-ct-two-col input {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Mobile */
@media (max-width: 640px) {
  .sfp-door-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  .sfp-door-modal {
    max-width: 100% !important;
    border-radius: 16px 16px 0 0 !important;
    transform: translateY(100%) !important;
    max-height: 92vh !important;
  }
  .sfp-door-overlay.active .sfp-door-modal {
    transform: translateY(0) !important;
  }
  .sfp-door-modal-head { padding: 24px 20px 20px !important; }
  .sfp-door-modal-body { padding: 20px !important; }
  .sfp-door-modal-body .sfp-ct-two-col { grid-template-columns: 1fr !important; }
}


/* =========================================================================
   SHOP & PRODUCT PAGE — Modern Overhaul
   ========================================================================= */

/* ── 1. Hide attribute display box on shop cards and single product ── */
.woocommerce ul.products .woocommerce-product-attributes,
.woocommerce ul.products table.variations,
.woocommerce ul.products .woocommerce-variation-description,
.prod-card .woocommerce-product-attributes,
ul.products li.product .woocommerce-product-attributes {
  display: none !important;
}

/* ── 2. Consistent card heights on shop page ── */
.woocommerce ul.products li.product,
ul.products li.product {
  display: flex !important;
  flex-direction: column !important;
}
.woocommerce ul.products li.product .prod-card,
ul.products li.product .prod-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}
.prod-card-body {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}
.prod-card-actions {
  margin-top: auto !important;
}

/* ── 3. Variation select styling — modern branded dropdowns ── */
.woocommerce div.product .variations select,
.woocommerce div.product table.variations select {
  width: 100% !important;
  padding: 12px 40px 12px 16px !important;
  border: 2px solid var(--g200) !important;
  border-radius: var(--r) !important;
  font-family: var(--font-head) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  color: var(--steel) !important;
  background-color: white !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231A2840' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  cursor: pointer !important;
  transition: border-color .15s, box-shadow .15s !important;
  box-sizing: border-box !important;
}
.woocommerce div.product .variations select:focus {
  border-color: var(--orange) !important;
  box-shadow: 0 0 0 3px rgba(224,78,10,.1) !important;
  outline: none !important;
}
.woocommerce div.product .variations select:hover {
  border-color: var(--steel) !important;
}

/* Variation label styling */
.woocommerce div.product .variations th.label label {
  font-family: var(--font-head) !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: var(--steel) !important;
}

/* Variations table layout */
.woocommerce div.product table.variations {
  width: 100% !important;
  border: none !important;
  margin-bottom: 16px !important;
}
.woocommerce div.product table.variations td,
.woocommerce div.product table.variations th {
  padding: 6px 0 !important;
  border: none !important;
  vertical-align: middle !important;
}
.woocommerce div.product table.variations th {
  width: 120px !important;
  padding-right: 12px !important;
}
.woocommerce div.product .reset_variations {
  font-size: 12px !important;
  color: var(--textlight) !important;
  text-decoration: none !important;
  display: inline-block !important;
  margin-top: 6px !important;
}
.woocommerce div.product .reset_variations:hover { color: var(--orange) !important; }

/* ── 4. Price update on variation ── */
.woocommerce div.product .woocommerce-variation-price {
  display: none !important;
}
.woocommerce div.product .woocommerce-variation-price .woocommerce-Price-amount {
  font-family: var(--font-head) !important;
  font-weight: 900 !important;
  font-size: 28px !important;
  color: var(--orange) !important;
}
.woocommerce div.product .woocommerce-variation-availability {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #22C55E !important;
}

/* ── 5. Add to cart button states ── */
.woocommerce div.product .single_add_to_cart_button:disabled,
.woocommerce div.product .single_add_to_cart_button.disabled {
  background: var(--g200) !important;
  color: var(--textlight) !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  transform: none !important;
  opacity: 1 !important;
}

/* Prompt when no variation selected */
.woocommerce div.product .variations_form .woocommerce-variation-add-to-cart-disabled::before {
  content: 'Please select an option above' !important;
  display: block !important;
  font-size: 13px !important;
  color: var(--textlight) !important;
  margin-bottom: 10px !important;
  font-style: italic !important;
}

/* ── 6. Door quote button fix — white text visible ── */
.sfp-door-quote-btn {
  color: white !important;
}
.sfp-door-quote-btn span,
.sfp-door-quote-btn * {
  color: white !important;
}

/* ── 7. Fix POR button text visibility ── */
.sfp-por-wrap .sfp-door-quote-btn {
  background: var(--orange) !important;
  color: white !important;
}

/* ── 8. Remove orange title background on door products ── */
.woocommerce div.product .product_title {
  background: none !important;
  color: var(--steel) !important;
  padding: 0 !important;
  display: block !important;
}

/* ── 9. Shop card IN STOCK badge cleanup ── */
.prod-card-badge.instock {
  background: #22C55E !important;
  color: white !important;
  font-family: var(--font-head) !important;
  font-weight: 700 !important;
  font-size: 10px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  padding: 4px 10px !important;
  border-radius: 2px !important;
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  z-index: 2 !important;
}

/* ── 10. Consistent shop card buttons ── */
.prod-card .button.add_to_cart_button,
.prod-card .button.product_type_variable,
.prod-card a.button {
  background: var(--orange) !important;
  color: white !important;
  font-family: var(--font-head) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  padding: 10px 18px !important;
  border-radius: var(--r) !important;
  border: none !important;
  text-decoration: none !important;
  transition: background .15s !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.prod-card .button:hover {
  background: var(--orange-hover) !important;
  color: white !important;
}

/* ── 11. Variation image swap — ensure image transitions smoothly ── */
.woocommerce div.product div.images img {
  transition: opacity .2s ease !important;
}
.woocommerce div.product div.images .woocommerce-product-gallery__image {
  transition: opacity .2s ease !important;
}


/* ── Door quote button — force all children white ── */
.sfp-door-quote-btn,
.sfp-door-quote-btn:link,
.sfp-door-quote-btn:visited,
.woocommerce .sfp-door-quote-btn,
.woocommerce-page .sfp-door-quote-btn {
  color: white !important;
  background: var(--orange) !important;
}
.sfp-door-quote-btn svg {
  stroke: white !important;
  fill: none !important;
}

/* ── Remove orange title background ── */
.woocommerce div.product h1.product_title,
.woocommerce div.product .product_title {
  background: transparent !important;
  -webkit-text-fill-color: var(--steel) !important;
  color: var(--steel) !important;
  padding: 0 !important;
  margin-bottom: 12px !important;
}

/* ── Hide redundant attribute text block on product page ── */
.woocommerce div.product .woocommerce-product-attributes {
  display: none !important;
}

/* ── Shop grid — hide attribute block on cards ── */
ul.products .woocommerce-product-attributes,
ul.products .card-specs .woocommerce-product-attributes {
  display: none !important;
}


/* ── Door button — maximum specificity color fix ── */
.woocommerce .sfp-por-wrap button.sfp-door-quote-btn,
.woocommerce-page .sfp-por-wrap button.sfp-door-quote-btn,
body.woocommerce-page button.sfp-door-quote-btn,
body button.sfp-door-quote-btn {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background-color: #E04E0A !important;
}
body button.sfp-door-quote-btn svg {
  stroke: #ffffff !important;
  color: #ffffff !important;
}


/* ── Door popup — compact no-scroll layout ── */
.sfp-door-overlay {
  padding: 16px !important;
}
.sfp-door-modal {
  max-height: 96vh !important;
  max-width: 520px !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}
.sfp-door-modal-head {
  padding: 20px 24px 16px !important;
}
.sfp-door-modal-icon {
  width: 40px !important;
  height: 40px !important;
  margin-bottom: 8px !important;
}
.sfp-door-modal-title {
  font-size: 18px !important;
  margin-bottom: 4px !important;
}
.sfp-door-modal-sub {
  font-size: 12px !important;
}
.sfp-door-modal-body {
  padding: 16px 24px 20px !important;
}
.sfp-door-modal-body .wpcf7-form p {
  margin-bottom: 12px !important;
}
.sfp-door-modal-body .wpcf7-form textarea {
  min-height: 80px !important;
}
@media (max-width: 640px) {
  .sfp-door-overlay { padding: 0 !important; align-items: flex-end !important; }
  .sfp-door-modal { max-width: 100% !important; border-radius: 16px 16px 0 0 !important; max-height: 94vh !important; }
  .sfp-door-modal-head { padding: 16px 20px 12px !important; }
  .sfp-door-modal-body { padding: 12px 20px 24px !important; }
}


/* ── Door popup — final compact fix ── */
.sfp-door-overlay {
  align-items: center !important;
  padding: 12px !important;
}
.sfp-door-modal {
  max-height: 88vh !important;
  display: flex !important;
  flex-direction: column !important;
}
.sfp-door-modal-head {
  flex-shrink: 0 !important;
  padding: 18px 24px 14px !important;
}
.sfp-door-modal-body {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 14px 24px 20px !important;
  -webkit-overflow-scrolling: touch !important;
}
/* Compact CF7 fields inside popup */
.sfp-door-modal-body .wpcf7-form p {
  margin-bottom: 10px !important;
}
.sfp-door-modal-body .wpcf7-form label {
  font-size: 10px !important;
  margin-bottom: 5px !important;
}
.sfp-door-modal-body .wpcf7-form input[type="text"],
.sfp-door-modal-body .wpcf7-form input[type="email"],
.sfp-door-modal-body .wpcf7-form input[type="tel"],
.sfp-door-modal-body .wpcf7-form select {
  padding: 9px 12px !important;
  font-size: 14px !important;
}
.sfp-door-modal-body .wpcf7-form textarea {
  min-height: 70px !important;
  font-size: 14px !important;
  padding: 9px 12px !important;
}
.sfp-door-modal-body .wpcf7-form .wpcf7-submit {
  padding: 12px !important;
  font-size: 14px !important;
}
/* Success message scroll into view */
.sfp-door-modal-body .wpcf7-mail-sent-ok {
  margin-top: 12px !important;
}
@media (max-width: 640px) {
  .sfp-door-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  .sfp-door-modal {
    max-width: 100% !important;
    border-radius: 16px 16px 0 0 !important;
    max-height: 92vh !important;
  }
}


/* ── Door popup — fix scroll and post-submit display ── */

/* Remove right scrollbar — let modal body scroll internally */
.sfp-door-modal {
  overflow: hidden !important;
}
.sfp-door-modal-body {
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* After CF7 submission — hide all form fields, show only confirmation */
.sfp-door-modal-body .wpcf7-mail-sent-ok ~ * { display: none !important; }
.sfp-door-modal-body .sent .wpcf7-form-control-wrap,
.sfp-door-modal-body .sent p:not(.wpcf7-response-output),
.sfp-door-modal-body .sent label,
.sfp-door-modal-body .sent .sfp-ct-two-col,
.sfp-door-modal-body .sent input,
.sfp-door-modal-body .sent select,
.sfp-door-modal-body .sent textarea,
.sfp-door-modal-body .sent .wpcf7-submit {
  display: none !important;
}

/* Success message styling — centred and prominent */
.sfp-door-modal-body .wpcf7-mail-sent-ok,
.sfp-door-modal-body .wpcf7-response-output.wpcf7-mail-sent-ok {
  background: #F0FDF4 !important;
  border: 2px solid #22C55E !important;
  border-left: 4px solid #22C55E !important;
  color: #166534 !important;
  padding: 20px !important;
  border-radius: 6px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  text-align: center !important;
  margin: 20px 0 0 !important;
  display: block !important;
}


/* ── Door popup — remove scrollbar completely on desktop ── */
@media (min-width: 641px) {
  .sfp-door-overlay {
    align-items: center !important;
  }
  .sfp-door-modal {
    max-height: 90vh !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .sfp-door-modal-head {
    flex-shrink: 0 !important;
    padding: 16px 24px 12px !important;
  }
  .sfp-door-modal-icon {
    width: 36px !important;
    height: 36px !important;
    margin-bottom: 6px !important;
  }
  .sfp-door-modal-title {
    font-size: 16px !important;
    margin-bottom: 2px !important;
  }
  .sfp-door-modal-sub {
    font-size: 11px !important;
  }
  .sfp-door-modal-body {
    flex: 1 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 12px 24px 16px !important;
    scrollbar-width: thin !important;
    scrollbar-color: var(--g200) transparent !important;
  }
  .sfp-door-modal-body::-webkit-scrollbar {
    width: 4px !important;
  }
  .sfp-door-modal-body::-webkit-scrollbar-track {
    background: transparent !important;
  }
  .sfp-door-modal-body::-webkit-scrollbar-thumb {
    background: var(--g200) !important;
    border-radius: 2px !important;
  }
  /* Extra compact fields */
  .sfp-door-modal-body .wpcf7-form p {
    margin-bottom: 8px !important;
  }
  .sfp-door-modal-body .wpcf7-form label {
    font-size: 9px !important;
    margin-bottom: 4px !important;
  }
  .sfp-door-modal-body .wpcf7-form input[type="text"],
  .sfp-door-modal-body .wpcf7-form input[type="email"],
  .sfp-door-modal-body .wpcf7-form input[type="tel"],
  .sfp-door-modal-body .wpcf7-form select {
    padding: 8px 12px !important;
    font-size: 13px !important;
  }
  .sfp-door-modal-body .wpcf7-form textarea {
    min-height: 60px !important;
    font-size: 13px !important;
    padding: 8px 12px !important;
  }
  .sfp-door-modal-body .wpcf7-form .wpcf7-submit {
    padding: 11px !important;
    font-size: 13px !important;
    margin-top: 4px !important;
  }
}


/* ── Door popup close button — ensure X is visible ── */
.sfp-door-close svg {
  display: block !important;
  stroke: white !important;
  width: 18px !important;
  height: 18px !important;
}


/* ── Door popup close button — text X ── */
.sfp-door-close {
  font-size: 18px !important;
  line-height: 1 !important;
  color: white !important;
  font-weight: 300 !important;
}

/* ── Login / account popup close button — replaced the SVG icon with a
   plain text × character entirely (avoids SVG stroke/currentColor
   inheritance issues that were making it invisible on mobile, same
   root cause the door popup close button had before that was fixed). ── */
.sfp-login-close {
  color: white !important;
  font-size: 28px !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  font-family: Arial, sans-serif !important;
}


/* =========================================================================
   SINGLE PRODUCT — Modern overhaul
   ========================================================================= */

/* ── Gallery — add border and shadow ── */
.sfp-gallery-main {
  border: 1.5px solid var(--g200) !important;
  border-radius: 8px !important;
  background: white !important;
  box-shadow: 0 4px 24px rgba(0,0,0,.06) !important;
  overflow: hidden !important;
  position: relative !important;
}
.sfp-gallery-main::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: 8px !important;
  border: 1.5px solid rgba(26,40,64,.06) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}
.sfp-main-image {
  padding: 16px !important;
  object-fit: contain !important;
}

/* ── Thumbnail borders ── */
.sfp-thumb {
  border: 2px solid var(--g100) !important;
  border-radius: 4px !important;
  background: white !important;
}
.sfp-thumb img {
  object-fit: contain !important;
  padding: 4px !important;
}
.sfp-thumb--active,
.sfp-thumb:hover {
  border-color: var(--orange) !important;
  box-shadow: 0 0 0 1px var(--orange) !important;
}

/* ── Price box — connect to WooCommerce variation price ── */
.sfp-price-box {
  background: var(--g50) !important;
  border: 1.5px solid var(--g100) !important;
  border-radius: 6px !important;
  padding: 20px !important;
  margin-bottom: 24px !important;
  position: relative !important;
  overflow: hidden !important;
}
.sfp-price-box::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 4px !important;
  height: 100% !important;
  background: var(--orange) !important;
}

/* WooCommerce variation price — show it properly */
.woocommerce-variation-price {
  display: block !important;
  margin-bottom: 4px !important;
}
.woocommerce-variation-price .woocommerce-Price-amount {
  font-family: var(--font-head) !important;
  font-weight: 900 !important;
  font-size: 36px !important;
  color: var(--orange) !important;
}
.sfp-price-amount .woocommerce-Price-amount {
  font-family: var(--font-head) !important;
  font-weight: 900 !important;
  font-size: 36px !important;
  color: var(--orange) !important;
}

/* ── Length field — spacious and modern ── */
.sfp-length-field {
  background: white !important;
  border: 1.5px solid var(--g200) !important;
  border-radius: 6px !important;
  padding: 20px 20px 16px !important;
  margin: 16px 0 20px !important;
}
.sfp-length-field label {
  font-family: var(--font-head) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: var(--steel) !important;
  display: block !important;
  margin-bottom: 6px !important;
}
.sfp-length-hint {
  display: block !important;
  font-family: var(--font-body) !important;
  font-weight: 400 !important;
  font-size: 12px !important;
  color: var(--textlight) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  margin-top: 3px !important;
  margin-bottom: 12px !important;
}
.sfp-length-input-wrap {
  display: flex !important;
  align-items: stretch !important;
  max-width: 180px !important;
  border: 1.5px solid var(--g200) !important;
  border-radius: var(--r) !important;
  overflow: hidden !important;
  touch-action: manipulation !important;
}
.sfp-length-input {
  width: 100% !important;
  padding: 12px 14px !important;
  border: none !important;
  font-size: 20px !important;
  font-family: var(--font-head) !important;
  font-weight: 700 !important;
  color: var(--steel) !important;
  background: white !important;
  -moz-appearance: textfield !important;
  outline: none !important;
  touch-action: manipulation !important;
}
.sfp-length-input:focus {
  outline: none !important;
  box-shadow: none !important;
}
.sfp-length-input::-webkit-inner-spin-button,
.sfp-length-input::-webkit-outer-spin-button {
  -webkit-appearance: none !important;
}
.sfp-length-unit {
  background: var(--steel) !important;
  color: white !important;
  font-family: var(--font-head) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  padding: 12px 16px !important;
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}
.sfp-length-price-preview {
  margin-top: 14px !important;
  padding-top: 14px !important;
  border-top: 1px solid var(--g100) !important;
  display: flex !important;
  align-items: baseline !important;
  gap: 8px !important;
  font-size: 13px !important;
  color: var(--textmid) !important;
  font-weight: 600 !important;
}
.sfp-length-price-preview strong {
  font-family: var(--font-head) !important;
  font-weight: 900 !important;
  font-size: 24px !important;
  color: var(--orange) !important;
}
.sfp-length-price-preview span {
  font-size: 12px !important;
  color: var(--textlight) !important;
  font-weight: 400 !important;
}
.sfp-length-error {
  color: #C0392B !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  margin-top: 8px !important;
  display: block !important;
}

/* Focus ring on length field wrap */
.sfp-length-input-wrap:focus-within {
  border-color: var(--orange) !important;
  box-shadow: 0 0 0 3px rgba(224,78,10,.08) !important;
}


/* =========================================================================
   PANEL LENGTH FIELD — Modern Redesign
   ========================================================================= */

.sfp-length-field {
  background: white !important;
  border: 2px solid var(--g100) !important;
  border-radius: 8px !important;
  padding: 20px !important;
  margin: 20px 0 !important;
  transition: border-color .15s !important;
}
.sfp-length-field:focus-within {
  border-color: var(--orange) !important;
  box-shadow: 0 0 0 3px rgba(224,78,10,.06) !important;
}

/* Header */
.sfp-length-header {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
}
.sfp-length-icon {
  width: 36px !important;
  height: 36px !important;
  background: var(--steel) !important;
  border-radius: 4px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.sfp-length-icon svg { stroke: white !important; }
.sfp-length-title {
  font-family: var(--font-head) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: var(--steel) !important;
}
.sfp-length-sub {
  font-size: 12px !important;
  color: var(--textlight) !important;
  margin-top: 2px !important;
}

/* Controls row */
.sfp-length-controls {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
}
.sfp-length-btn {
  width: 44px !important;
  height: 52px !important;
  background: var(--g50) !important;
  border: 1.5px solid var(--g200) !important;
  border-radius: 6px !important;
  font-size: 22px !important;
  font-weight: 300 !important;
  color: var(--steel) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all .15s !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}
.sfp-length-btn:hover {
  background: var(--orange) !important;
  border-color: var(--orange) !important;
  color: white !important;
}
.sfp-length-input-wrap {
  display: flex !important;
  align-items: stretch !important;
  border: 1.5px solid var(--g200) !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  flex: 1 !important;
  max-width: 180px !important;
}
.sfp-length-input {
  width: 100% !important;
  border: none !important;
  padding: 12px 16px !important;
  font-size: 28px !important;
  font-family: var(--font-head) !important;
  font-weight: 900 !important;
  color: var(--steel) !important;
  background: white !important;
  text-align: center !important;
  -moz-appearance: textfield !important;
  outline: none !important;
}
.sfp-length-input::-webkit-inner-spin-button,
.sfp-length-input::-webkit-outer-spin-button {
  -webkit-appearance: none !important;
}
.sfp-length-input--error {
  color: #C0392B !important;
}
.sfp-length-unit {
  background: var(--steel) !important;
  color: white !important;
  font-family: var(--font-head) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  padding: 0 14px !important;
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  letter-spacing: .06em !important;
}
.sfp-length-unit-badge {
  font-family: var(--font-head) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  color: var(--textlight) !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
}

/* Preview box */
.sfp-length-preview {
  background: #F4F1EB !important;
  border-radius: 6px !important;
  padding: 14px 16px !important;
  display: none !important;
  border-left: none;
}
.sfp-length-preview.active {
  display: block !important;
}
.sfp-length-preview-inner {
  display: flex !important;
  align-items: baseline !important;
  gap: 10px !important;
  margin-bottom: 4px !important;
}
.sfp-length-preview-calc {
  font-size: 13px !important;
  color: var(--textmid) !important;
  font-weight: 600 !important;
}
.sfp-length-preview-total {
  font-family: var(--font-head) !important;
  font-weight: 900 !important;
  font-size: 28px !important;
  color: var(--orange) !important;
  line-height: 1 !important;
}
.sfp-length-preview-note {
  font-size: 11px !important;
  color: var(--textlight) !important;
}
.sfp-length-error {
  color: #C0392B !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  margin-top: 8px !important;
}

/* ── Hide duplicate WooCommerce default price on single product ── */
.sfp-single-wrap p.price,
.sfp-single-wrap span.price {
  display: none !important;
}

/* ── Length input fix — ensure number is visible and typeable ── */
.sfp-length-controls .sfp-length-input-wrap {
  overflow: visible !important;
}
.sfp-length-controls .sfp-length-input {
  min-width: 80px !important;
  text-align: center !important;
}


/* =========================================================================
   SINGLE PRODUCT — Dropdown, ATC button and quantity fixes
   ========================================================================= */
 
/* FIX 1 — Widen variation dropdowns so "Choose an option" is not cut off */
.woocommerce div.product form.cart .variations {
  width: 100% !important;
  table-layout: auto !important;
}
.woocommerce div.product form.cart .variations td.value {
  width: 100% !important;
  min-width: 0 !important;
}
.woocommerce div.product form.cart .variations .value select,
.woocommerce div.product table.variations select,
.sfp-atc-wrap .variations select {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  text-overflow: ellipsis !important;
}
 
/* FIX 2 — ATC button always orange, even disabled state on-brand */
.woocommerce div.product form.cart .single_add_to_cart_button,
.sfp-atc-wrap .single_add_to_cart_button,
.sfp-atc-wrap button.button.alt {
  background: var(--orange) !important;
  color: white !important;
  border-color: var(--orange) !important;
  opacity: 1 !important;
}
.woocommerce div.product form.cart .single_add_to_cart_button:hover,
.sfp-atc-wrap .single_add_to_cart_button:hover {
  background: var(--orange-hover) !important;
  color: white !important;
}
.woocommerce div.product form.cart .single_add_to_cart_button.disabled,
.woocommerce div.product form.cart .single_add_to_cart_button:disabled {
  background: var(--steel) !important;
  color: rgba(255,255,255,.5) !important;
  opacity: 1 !important;
  cursor: not-allowed !important;
}
 
/* FIX 3 — Hide quantity box on panel products only (length field handles
   it there). Previously this matched ANY .variations_form, which meant
   every variable product — C-Channel, Aluminium Angle, Sealants &
   Fixings — had its quantity selector hidden too, not just panels.
   Now scoped to the .sfp-atc-wrap--panel class, set in PHP only for
   actual panel-length products. Order matters here: both selectors
   below have equal specificity, so the LAST one wins for an element
   matching both — the panel-specific hide rule must come last so it
   overrides the general show rule on actual panel products. */
.sfp-atc-wrap .variations_form .quantity {
  display: flex !important;
}
.sfp-atc-wrap--panel .variations_form .quantity {
  display: none !important;
}

/* ── Remove flex ordering — length field now in DOM after form ── */
.sfp-atc-wrap .variations_form {
  display: block !important;
}
.sfp-atc-wrap .variations_form .variations,
.sfp-atc-wrap .sfp-length-field,
.sfp-atc-wrap .woocommerce-variation-add-to-cart {
  order: unset !important;
}

/* ── Stack qty above ATC button for all variable products ── */
.sfp-atc-wrap .woocommerce-variation-add-to-cart,
.woocommerce div.product .woocommerce-variation-add-to-cart {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 100% !important;
  gap: 0 !important;
}
.sfp-atc-wrap .woocommerce-variation-add-to-cart .quantity,
.woocommerce div.product .woocommerce-variation-add-to-cart .quantity {
  margin-right: 0 !important;
  margin-bottom: 16px !important;
  align-self: flex-start !important;
}

/* =========================================================================
   SINGLE PRODUCT — MODERN REFRESH v3 (premium gallery, vertical thumbs)
   ========================================================================= */

/* ── Grid: gallery wider, sticky works, top-aligned ── */
.sfp-single-grid {
  grid-template-columns: 1.1fr 1fr !important;
  gap: 64px !important;
  align-items: start !important;
}

/* ── Gallery: sticky from the top ── */
.sfp-single-gallery {
  position: sticky !important;
  top: 24px !important;
  display: grid !important;
  grid-template-columns: 72px 1fr !important;
  grid-template-rows: auto !important;
  gap: 12px !important;
  align-items: start !important;
}

/* ── Thumbnails: vertical strip on the LEFT ── */
.sfp-gallery-thumbs {
  grid-column: 1 !important;
  grid-row: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-top: 0 !important;
  flex-wrap: nowrap !important;
  max-height: 520px !important;
  overflow-y: auto !important;
  scrollbar-width: none !important;
}
.sfp-gallery-thumbs::-webkit-scrollbar { display: none !important; }

.sfp-thumb {
  width: 68px !important;
  height: 68px !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  cursor: pointer !important;
  border: 2px solid var(--g200) !important;
  background: var(--white) !important;
  flex-shrink: 0 !important;
  transition: border-color .2s, transform .2s var(--ease-out), box-shadow .2s !important;
}
.sfp-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  padding: 4px !important;
}
.sfp-thumb:hover {
  border-color: var(--g400) !important;
  transform: translateX(2px) !important;
}
.sfp-thumb--active {
  border-color: var(--orange) !important;
  box-shadow: 0 0 0 1px var(--orange) !important;
  transform: translateX(2px) !important;
}

/* ── Main image: clean rounded rectangle, no chamfer ── */
.sfp-gallery-main {
  grid-column: 2 !important;
  grid-row: 1 !important;
  position: relative !important;
  border: 1px solid var(--g200) !important;
  border-radius: 12px !important;
  background: var(--g100) !important;
  box-shadow: 0 2px 20px rgba(0,0,0,.07), 0 1px 4px rgba(0,0,0,.04) !important;
  overflow: hidden !important;
  aspect-ratio: 1 / 1 !important;
  clip-path: none !important;
  transition: box-shadow .4s var(--ease-out) !important;
}
.sfp-gallery-main:hover {
  box-shadow: 0 8px 40px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06) !important;
}
.sfp-gallery-main::after { display: none !important; }
.sfp-gallery-main::before { display: none !important; }

.sfp-main-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  padding: 0 !important;
  display: block !important;
  opacity: 1 !important;
  cursor: zoom-in !important;
  transition: transform .5s var(--ease-out), opacity .2s !important;
}
.sfp-gallery-main:hover .sfp-main-image {
  transform: scale(1.03) !important;
}

/* ── Right column — spec boxes ── */
.sfp-single-specs {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  margin-bottom: 20px !important;
}
.sfp-spec-item {
  background: var(--white) !important;
  border: 1.5px solid var(--g200) !important;
  border-radius: 8px !important;
  padding: 14px 16px !important;
  transition: border-color .15s, box-shadow .15s !important;
}
.sfp-spec-item:hover {
  border-color: var(--steel) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.06) !important;
}
.sfp-spec-label {
  font-size: 9px !important;
  color: var(--g400) !important;
  text-transform: uppercase !important;
  letter-spacing: .14em !important;
  margin-bottom: 5px !important;
  font-weight: 700 !important;
}
.sfp-spec-val {
  font-family: var(--font-head) !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  color: var(--steel) !important;
  line-height: 1.25 !important;
}

/* ── Price box: dark premium panel ── */
.sfp-price-box {
  background: linear-gradient(135deg, #1e3054 0%, var(--steel) 100%) !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 20px 24px !important;
  margin-bottom: 16px !important;
  margin-top: 16px !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 4px 24px rgba(26,40,64,.28) !important;
}
.sfp-price-box::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  width: 4px !important; height: 100% !important;
  background: linear-gradient(180deg, var(--orange-hover), var(--orange)) !important;
}
.sfp-price-row {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  margin-bottom: 8px !important;
}
.sfp-price-label {
  font-size: 11px !important;
  color: rgba(255,255,255,.6) !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
  font-weight: 700 !important;
}
.sfp-price-amount,
.sfp-price-amount .woocommerce-Price-amount {
  font-family: var(--font-head) !important;
  font-weight: 900 !important;
  font-size: 38px !important;
  color: var(--orange) !important;
  line-height: 1 !important;
}
.sfp-price-unit {
  font-size: 15px !important;
  color: rgba(255,255,255,.5) !important;
  font-family: var(--font-body) !important;
  font-weight: 400 !important;
  margin-left: 2px !important;
}
.sfp-price-note {
  font-size: 11px !important;
  color: rgba(255,255,255,.4) !important;
  margin-top: 6px !important;
  border-top: 1px dashed rgba(255,255,255,.12) !important;
  padding-top: 10px !important;
  letter-spacing: .02em !important;
}

/* ── Variation dropdowns ── */
.woocommerce div.product .variations select,
.woocommerce div.product table.variations select {
  border-radius: 8px !important;
  border: 1.5px solid var(--g200) !important;
  padding: 13px 40px 13px 16px !important;
  font-size: 14px !important;
  transition: border-color .15s, box-shadow .15s !important;
}
.woocommerce div.product .variations select:hover {
  border-color: var(--steel) !important;
}
.woocommerce div.product .variations select:focus {
  border-color: var(--orange) !important;
  box-shadow: 0 0 0 3px rgba(224,78,10,.1) !important;
  outline: none !important;
}

/* ── Trust pills ── */
.sfp-single-trust {
  display: flex !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
  margin-top: 4px !important;
}
.sfp-trust-pill {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--green) !important;
  background: rgba(22,101,52,.06) !important;
  border: 1px solid rgba(22,101,52,.18) !important;
  padding: 5px 10px !important;
  border-radius: 20px !important;
}
.sfp-trust-pill svg { stroke: var(--green) !important; flex-shrink: 0 !important; }

/* ── Add to Cart ── */
.woocommerce div.product .single_add_to_cart_button {
  background: linear-gradient(180deg, var(--orange-hover) 0%, var(--orange) 100%) !important;
  box-shadow: 0 2px 10px rgba(224,78,10,.3) !important;
  border-radius: 8px !important;
  transition: box-shadow .25s var(--ease-out), transform .25s var(--ease-out) !important;
}
.woocommerce div.product .single_add_to_cart_button:hover:not(:disabled) {
  box-shadow: 0 6px 24px rgba(224,78,10,.45) !important;
  transform: translateY(-2px) !important;
}
.woocommerce div.product .single_add_to_cart_button:active:not(:disabled) {
  transform: translateY(0) scale(.98) !important;
}

/* ── Mobile: back to normal stacked layout ── */
@media (max-width: 900px) {
  .sfp-single-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .sfp-single-gallery {
    position: static !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .sfp-gallery-main {
    grid-column: 1 !important;
    grid-row: 1 !important;
    aspect-ratio: 4 / 3 !important;
  }
  .sfp-gallery-thumbs {
    grid-column: 1 !important;
    grid-row: 2 !important;
    flex-direction: row !important;
    max-height: none !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    padding-bottom: 4px !important;
  }
  .sfp-thumb {
    width: 60px !important;
    height: 60px !important;
    flex-shrink: 0 !important;
    transform: none !important;
  }
  .sfp-thumb:hover,
  .sfp-thumb--active {
    transform: none !important;
  }
  .sfp-single-summary {
    margin-top: 0 !important;
    position: relative !important;
    z-index: 2 !important;
  }
  .sfp-atc-wrap .single_add_to_cart_button,
  .woocommerce div.product .single_add_to_cart_button,
  .sfp-atc-wrap .sfp-btn-atc,
  .sfp-atc-wrap form.cart .button {
    width: 100% !important;
    display: flex !important;
    text-align: center !important;
  }
  .sfp-atc-wrap form.cart {
    flex-direction: column !important;
  }
}


/* =========================================================================
   SINGLE PRODUCT — LIGHTBOX
   ========================================================================= */

.sfp-lightbox {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(10,15,25,.92) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .25s !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}
.sfp-lightbox.sfp-lb-open {
  opacity: 1 !important;
  pointer-events: all !important;
}
.sfp-lb-img-wrap {
  position: relative !important;
  max-width: 90vw !important;
  max-height: 90vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.sfp-lb-img {
  max-width: 90vw !important;
  max-height: 86vh !important;
  object-fit: contain !important;
  border-radius: 6px !important;
  box-shadow: 0 32px 80px rgba(0,0,0,.6) !important;
  display: block !important;
  transition: opacity .2s !important;
}
.sfp-lb-close {
  position: fixed !important;
  top: 20px !important;
  right: 24px !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.12) !important;
  border: 1.5px solid rgba(255,255,255,.2) !important;
  color: white !important;
  font-size: 20px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background .15s !important;
  line-height: 1 !important;
  z-index: 100000 !important;
}
.sfp-lb-close:hover { background: rgba(255,255,255,.22) !important; }
.sfp-lb-prev,
.sfp-lb-next {
  position: fixed !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.12) !important;
  border: 1.5px solid rgba(255,255,255,.2) !important;
  color: white !important;
  font-size: 22px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background .15s !important;
  z-index: 100000 !important;
}
.sfp-lb-prev { left: 20px !important; }
.sfp-lb-next { right: 20px !important; }
.sfp-lb-prev:hover,
.sfp-lb-next:hover { background: rgba(255,255,255,.22) !important; }
.sfp-lb-counter {
  position: fixed !important;
  bottom: 24px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  color: rgba(255,255,255,.5) !important;
  font-size: 12px !important;
  letter-spacing: .1em !important;
  font-family: var(--font-body) !important;
}


/* =========================================================================
   ELEMENTOR MENU CART (header cart popup) — fix text wrapping + modernize
   Targets Elementor Pro's standard elementor-menu-cart__* classes.
   ========================================================================= */

/* Fix the layout row: image | details (flexible) | price (fixed width) */
.elementor-menu-cart__product {
  display: grid !important;
  grid-template-columns: 76px 1fr auto !important;
  grid-template-rows: auto !important;
  align-items: center !important;
  gap: 0 14px !important;
  padding: 14px 0 !important;
}
.elementor-menu-cart__product-image {
  grid-column: 1 !important;
  grid-row: 1 / 3 !important;
  align-self: center !important;
}
.elementor-menu-cart__product-image img {
  width: 76px !important;
  height: 76px !important;
  object-fit: cover !important;
  border-radius: 6px !important;
  border: 1px solid var(--g200) !important;
  background: var(--g50) !important;
  display: block !important;
}
.elementor-menu-cart__product-details {
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  align-self: center !important;
}
.elementor-menu-cart__product-price,
.elementor-menu-cart__product-quantity {
  grid-column: 2 !important;
  grid-row: 2 !important;
  white-space: nowrap !important;
  font-family: var(--font-head) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  color: var(--textmid) !important;
  margin-top: 4px !important;
}
.elementor-menu-cart__product-remove {
  grid-column: 3 !important;
  grid-row: 1 / 3 !important;
  align-self: center !important;
  justify-self: end !important;
  flex-shrink: 0 !important;
}

/* ── Same rules scoped to .sfp-menu-cart class for maximum specificity ──
   Add "sfp-menu-cart" in Elementor → Menu Cart widget → Advanced → CSS Classes */

/* ── Product row: tight grid, name + price inline ── */
.sfp-menu-cart .elementor-menu-cart__product {
  display: grid !important;
  grid-template-columns: 72px 1fr auto !important;
  grid-template-rows: auto !important;
  align-items: center !important;
  gap: 0 14px !important;
  padding: 16px 0 !important;
  border-bottom: 1px solid var(--g100) !important;
}
.sfp-menu-cart .elementor-menu-cart__product-image {
  grid-column: 1 !important;
  grid-row: 1 / 3 !important;
  align-self: center !important;
}
.sfp-menu-cart .elementor-menu-cart__product-image img {
  width: 72px !important;
  height: 72px !important;
  object-fit: cover !important;
  border-radius: 8px !important;
  border: 1px solid var(--g200) !important;
  background: var(--g50) !important;
  display: block !important;
}
/* Name row */
.sfp-menu-cart .elementor-menu-cart__product-details,
.sfp-menu-cart .elementor-menu-cart__product-name {
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  align-self: end !important;
}
.sfp-menu-cart .elementor-menu-cart__product-name a {
  font-family: var(--font-head) !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  color: var(--steel) !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  line-height: 1.3 !important;
  text-decoration: none !important;
}
/* Price row — sits directly under name */
.sfp-menu-cart .elementor-menu-cart__product-price,
.sfp-menu-cart .elementor-menu-cart__product-quantity {
  grid-column: 2 !important;
  grid-row: 2 !important;
  white-space: nowrap !important;
  align-self: start !important;
  margin-top: 5px !important;
  font-family: var(--font-head) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  color: var(--textmid) !important;
}
.sfp-menu-cart .elementor-menu-cart__product-price .woocommerce-Price-amount {
  color: var(--orange) !important;
  font-weight: 800 !important;
  font-size: 14px !important;
}
/* Remove button — right column, centred */
.sfp-menu-cart .elementor-menu-cart__product-remove {
  grid-column: 3 !important;
  grid-row: 1 / 3 !important;
  align-self: center !important;
  justify-self: end !important;
}
.sfp-menu-cart .elementor-menu-cart__product-remove a {
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  border: 1.5px solid var(--g200) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--g400) !important;
  font-size: 14px !important;
  line-height: 1 !important;
  transition: border-color .15s, color .15s !important;
  background: none !important;
  text-decoration: none !important;
}
.sfp-menu-cart .elementor-menu-cart__product-remove a:hover {
  border-color: var(--orange) !important;
  color: var(--orange) !important;
  background: rgba(224,78,10,.05) !important;
}

/* =========================================================================
   MINI CART — PROFESSIONAL POLISH + AUTO-OPEN
   ========================================================================= */

/* ── Main panel: cleaner shadow, defined width ── */
.sfp-menu-cart .elementor-menu-cart__main,
.sfp-menu-cart .elementor-menu-cart__container .elementor-menu-cart__main {
  border-radius: 12px !important;
  box-shadow: 0 8px 48px rgba(0,0,0,.18), 0 2px 12px rgba(0,0,0,.08) !important;
  border: 1px solid var(--g100) !important;
  overflow: hidden !important;
}

/* ── Top bar: dark navy header strip ── */
.sfp-menu-cart .elementor-menu-cart__top-bar {
  background: var(--steel) !important;
  padding: 16px 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
.sfp-menu-cart .elementor-menu-cart__title {
  font-family: var(--font-head) !important;
  font-weight: 900 !important;
  font-size: 14px !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: var(--white) !important;
}
.sfp-menu-cart .elementor-menu-cart__close-button,
.sfp-menu-cart .elementor-menu-cart__close-button svg,
.sfp-menu-cart .elementor-menu-cart__close-button i {
  color: rgba(255,255,255,.7) !important;
  stroke: rgba(255,255,255,.7) !important;
  transition: color .15s !important;
}
.sfp-menu-cart .elementor-menu-cart__close-button:hover,
.sfp-menu-cart .elementor-menu-cart__close-button:hover svg,
.sfp-menu-cart .elementor-menu-cart__close-button:hover i {
  color: var(--white) !important;
  stroke: var(--white) !important;
}

/* ── Products area ── */
.sfp-menu-cart .elementor-menu-cart__products {
  padding: 0 20px !important;
  max-height: 55vh !important;
  overflow-y: auto !important;
  scrollbar-width: thin !important;
  scrollbar-color: var(--g200) transparent !important;
}
.sfp-menu-cart .elementor-menu-cart__products::-webkit-scrollbar { width: 4px !important; }
.sfp-menu-cart .elementor-menu-cart__products::-webkit-scrollbar-thumb { background: var(--g200) !important; border-radius: 2px !important; }

/* ── Product name — clamp long names ── */
.sfp-menu-cart .elementor-menu-cart__product-name a {
  font-family: var(--font-head) !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  color: var(--steel) !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* ── Panel length meta — make it readable ── */
.sfp-menu-cart .elementor-menu-cart__product-name dl.variation {
  display: block !important;
  margin: 5px 0 0 !important;
}
.sfp-menu-cart .elementor-menu-cart__product-name dl.variation dt {
  display: inline !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  color: var(--textlight) !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
}
.sfp-menu-cart .elementor-menu-cart__product-name dl.variation dt::after {
  content: ' ' !important;
}
.sfp-menu-cart .elementor-menu-cart__product-name dl.variation dd {
  display: inline !important;
  font-size: 11px !important;
  color: var(--orange) !important;
  font-weight: 700 !important;
}

/* ── Subtotal area ── */
.sfp-menu-cart .elementor-menu-cart__subtotal {
  border-top: 1px solid var(--g100) !important;
  padding: 16px 20px !important;
  margin: 0 !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  background: var(--g50) !important;
}
.sfp-menu-cart .elementor-menu-cart__subtotal .elementor-menu-cart__subtotal-price {
  font-size: 11px !important;
  color: var(--textlight) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
}
.sfp-menu-cart .elementor-menu-cart__subtotal-amount .woocommerce-Price-amount {
  font-family: var(--font-head) !important;
  font-weight: 900 !important;
  font-size: 22px !important;
  color: var(--steel) !important;
}

/* ── Footer buttons ── */
.sfp-menu-cart .elementor-menu-cart__footer-buttons {
  display: flex !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 16px 20px !important;
  background: var(--white) !important;
  border-top: 1px solid var(--g100) !important;
  gap: 10px !important;
}
.sfp-menu-cart .elementor-menu-cart__footer-buttons a {
  flex: 1 !important;
  border-radius: 8px !important;
  font-family: var(--font-head) !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  padding: 14px 12px !important;
  transition: box-shadow .2s, transform .2s, background .15s, border-color .15s !important;
}
.sfp-menu-cart .elementor-menu-cart__view-cart-button {
  border: 1.5px solid var(--g200) !important;
  color: var(--steel) !important;
  background: transparent !important;
}
.sfp-menu-cart .elementor-menu-cart__view-cart-button:hover {
  border-color: var(--steel) !important;
  background: var(--steel) !important;
  color: var(--white) !important;
}
.sfp-menu-cart .elementor-menu-cart__checkout-button {
  background: linear-gradient(180deg, var(--orange-hover) 0%, var(--orange) 100%) !important;
  color: var(--white) !important;
  border: none !important;
  box-shadow: 0 2px 10px rgba(224,78,10,.3) !important;
}
.sfp-menu-cart .elementor-menu-cart__checkout-button:hover {
  box-shadow: 0 6px 20px rgba(224,78,10,.45) !important;
  transform: translateY(-2px) !important;
}



/* Fix the actual bug: variation meta (e.g. "Panel Length: 1.2m") was
   wrapping character-by-character because of a too-narrow column
   combined with aggressive word-break. Give it room and normal wrapping. */
.elementor-menu-cart__product-details dl.variation,
.elementor-menu-cart__product-meta {
  min-width: 0 !important;
  display: block !important;
  margin: 4px 0 0 !important;
}
.elementor-menu-cart__product-details dl.variation dt,
.elementor-menu-cart__product-details dl.variation dd,
.elementor-menu-cart__product-meta dt,
.elementor-menu-cart__product-meta dd,
.elementor-menu-cart__product-details p {
  display: inline !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  font-size: 12px !important;
  color: var(--textlight) !important;
  margin: 0 !important;
}
.elementor-menu-cart__product-details dl.variation dt::after {
  content: ' ' !important;
}

/* Confirmed via inspector: real parent class is product-name (not
   product-details), and dl.variation has display:grid with a too-narrow
   column, forcing "1.1m" to wrap letter-by-letter. This is the actual fix. */
.elementor-menu-cart__product-name dl.variation {
  display: block !important;
  grid-template-columns: none !important;
  margin: 4px 0 0 !important;
}
.elementor-menu-cart__product-name dl.variation dt,
.elementor-menu-cart__product-name dl.variation dd,
.elementor-menu-cart__product-name dl.variation dd p {
  display: inline !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  font-size: 12px !important;
  color: var(--textlight) !important;
  margin: 0 !important;
}
.elementor-menu-cart__product-name dl.variation dt::after {
  content: ' ' !important;
}

/* ── Modernize to match the rest of the site ── */
/* Cosmetic border/shadow/radius removed here — was conflicting with
   Elementor's own dropdown connector element in a way that created a
   visible seam against the header's orange accent line. Not worth
   chasing further as a cosmetic detail; can revisit in the full
   modernization pass with live access to test against. */
.elementor-menu-cart__title,
.elementor-menu-cart__product-name a {
  font-family: var(--font-head) !important;
  font-weight: 800 !important;
  color: var(--steel) !important;
  text-transform: uppercase !important;
  letter-spacing: .02em !important;
}
.elementor-menu-cart__product-price .woocommerce-Price-amount {
  color: var(--orange) !important;
  font-weight: 700 !important;
}
.elementor-menu-cart__subtotal {
  border-top: 1px dashed var(--g200) !important;
  padding-top: 14px !important;
}
.elementor-menu-cart__subtotal-amount .woocommerce-Price-amount {
  font-family: var(--font-head) !important;
  font-weight: 900 !important;
  color: var(--steel) !important;
}
.elementor-menu-cart__footer-buttons a {
  border-radius: var(--r) !important;
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  transition: box-shadow .25s var(--ease-out), transform .25s var(--ease-out) !important;
}
.elementor-menu-cart__view-cart-button {
  border: 1.5px solid var(--g200) !important;
  color: var(--steel) !important;
}
.elementor-menu-cart__view-cart-button:hover {
  border-color: var(--steel) !important;
  background: var(--steel) !important;
  color: var(--white) !important;
}
.elementor-menu-cart__checkout-button {
  background: linear-gradient(180deg, var(--orange-hover) 0%, var(--orange) 100%) !important;
  box-shadow: 0 2px 8px rgba(224,78,10,.25) !important;
}
.elementor-menu-cart__checkout-button:hover {
  box-shadow: var(--shadow-glow) !important;
  transform: translateY(-2px) !important;
}


/* Modern motion layer (scroll reveals, sticky ATC bar, price pulse) was
   added here and rolled back after it broke mobile loading. Will
   reintroduce carefully, tested on an actual mobile device before
   shipping, rather than blind. */


/* =========================================================================
   REDESIGN — Shop card spec cells + Single product price box
   Pure CSS only. No JS. Tested-safe after the mobile scare.
   ========================================================================= */

/* ── Shop card spec cells: replace flat grey boxes with a cleaner
   "spec plate" — hairline dividers, animated top accent on card hover ── */
.card-specs {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 1px !important;
  background: var(--g200) !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  margin-bottom: 14px !important;
  min-height: 120px !important;
  max-height: 120px !important;
}
.cs {
  background: var(--g50) !important;
  border-left: none !important;
  border-radius: 0 !important;
  padding: 10px 12px !important;
  position: relative !important;
  overflow: hidden !important;
}
/* Products with only one attribute (e.g. Aluminium Angle: Profile only,
   no Width) were leaving the second grid column blank/empty. Make a
   lone spec cell span the full width instead. */
.cs:only-child {
  grid-column: 1 / -1 !important;
}
.cs::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, var(--orange), var(--orange-light)) !important;
  transform: scaleX(0) !important;
  transform-origin: left center !important;
  transition: transform .35s var(--ease-out) !important;
}
.woocommerce ul.products li.product:hover .cs::before {
  transform: scaleX(1) !important;
}
.cs-label {
  font-size: 9px !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: var(--g400) !important;
  margin-bottom: 4px !important;
  font-weight: 700 !important;
}
.cs-val {
  font-family: var(--font-head) !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  color: var(--steel) !important;
  letter-spacing: normal !important;
}

/* ── Single product price box: dark steel panel with a "ruler tick"
   edge (nods to "cut to your length") instead of a plain white box
   with a thin orange border. ── */
.sfp-price-box {
  position: relative !important;
  background: linear-gradient(135deg, var(--steel) 0%, #223349 100%) !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 22px 24px 22px 32px !important;
  margin-bottom: 20px !important;
  overflow: hidden !important;
  clip-path: polygon(18px 0, 100% 0, 100% 100%, 0 100%, 0 18px) !important;
  box-shadow: var(--shadow-md) !important;
}
/* Ruler-tick accent strip along the left edge */
.sfp-price-box::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 7px !important;
  background: repeating-linear-gradient(
    to bottom,
    var(--orange) 0px, var(--orange) 2px,
    transparent 2px, transparent 11px
  ) !important;
}
.sfp-price-label {
  color: rgba(255,255,255,.6) !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  font-weight: 600 !important;
}
.sfp-price-amount,
.sfp-price-amount .woocommerce-Price-amount {
  color: var(--white) !important;
  font-family: var(--font-head) !important;
  font-weight: 900 !important;
}
.sfp-price-amount .woocommerce-Price-currencySymbol {
  color: var(--orange) !important;
}
.sfp-price-unit {
  color: var(--orange) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
}
.sfp-price-note {
  color: rgba(255,255,255,.5) !important;
  border-top: 1px dashed rgba(255,255,255,.15) !important;
  padding-top: 10px !important;
  margin-top: 10px !important;
  font-size: 12px !important;
}
.sfp-price-por-label {
  color: var(--white) !important;
  font-family: var(--font-head) !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
}
.sfp-price-por p {
  color: rgba(255,255,255,.65) !important;
  font-size: 13px !important;
  margin-top: 4px !important;
}


/* =========================================================================
   VARIATION TABLE — final redesign (guaranteed to win cascade)
   Replaces the plain grey-label/white-dropdown table look.
   ========================================================================= */
.woocommerce div.product table.variations,
.woocommerce div.product form.cart table.variations {
  width: 100% !important;
  border: none !important;
  border-collapse: separate !important;
  margin-bottom: 18px !important;
  display: block !important;
}
.woocommerce div.product table.variations tbody,
.woocommerce div.product table.variations tr {
  display: block !important;
  width: 100% !important;
}
.woocommerce div.product table.variations tr {
  display: flex !important;
  align-items: stretch !important;
  border: 1.5px solid var(--g200) !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  margin-bottom: 10px !important;
  background: var(--white) !important;
  height: 56px !important;
}
/* Hide the "Clear" reset link and any extra elements inside td.value */
.woocommerce div.product table.variations td.value .reset_variations,
.woocommerce div.product table.variations td.value p {
  display: none !important;
}
.woocommerce div.product table.variations th.label,
.woocommerce div.product table.variations td.label {
  display: flex !important;
  align-items: center !important;
  flex: 0 0 110px !important;
  padding: 0 14px !important;
  background: var(--g50) !important;
  border-right: 1.5px solid var(--g200) !important;
}
.woocommerce div.product table.variations th.label label,
.woocommerce div.product table.variations td.label label {
  font-family: var(--font-head) !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: var(--steel) !important;
  margin: 0 !important;
}
.woocommerce div.product table.variations td.value {
  flex: 1 1 auto !important;
  padding: 0 !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: stretch !important;
}
.woocommerce div.product table.variations td.value select {
  flex: 1 !important;
  width: 100% !important;
  border: none !important;
  padding: 0 36px 0 14px !important;
  font-family: var(--font-head) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  color: var(--steel) !important;
  background-color: transparent !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231A2840' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  cursor: pointer !important;
  height: 100% !important;
}
.woocommerce div.product table.variations td.value select:focus {
  outline: none !important;
}
.woocommerce div.product table.variations tr:focus-within {
  border-color: var(--orange) !important;
  box-shadow: 0 0 0 3px rgba(224,78,10,.1) !important;
}

/* Add to Cart — full width, matching the price box / variation table above */
.woocommerce div.product .single_add_to_cart_button,
.sfp-atc-wrap .single_add_to_cart_button {
  width: 100% !important;
  display: block !important;
  text-align: center !important;
}


/* =========================================================================
   Cart panel-length calculation breakdown — styled separately from the
   plain length value so it doesn't read as one cramped uppercase blob.
   ========================================================================= */
.sfp-cart-calc {
  display: inline;
  font-size: 11px;
  font-weight: 500;
  text-transform: none !important;
  letter-spacing: normal !important;
  color: var(--textlight);
  line-height: 1.5;
  white-space: nowrap;
}
.sfp-cart-calc strong {
  color: var(--orange);
  font-weight: 700;
}
.elementor-menu-cart__product-details dl.variation dd,
.elementor-menu-cart__product-meta dd {
  line-height: 1.5 !important;
}


/* =========================================================================
   Cart page item details — condense to fewer lines
   Same fix already applied to the mini-cart popup earlier, now applied
   here too: label+value were stacking as separate block-level lines
   (browser default dt/dd behavior) instead of sitting together.
   ========================================================================= */
.sfp-cart-item-info dl.variation {
  display: block;
  margin: 4px 0 6px;
}
.sfp-cart-item-info dl.variation dt,
.sfp-cart-item-info dl.variation dd,
.sfp-cart-item-info dl.variation dd p {
  display: inline;
  white-space: normal;
  margin: 0;
  font-size: 13px;
  color: var(--textlight);
}
.sfp-cart-item-info dl.variation dt::after {
  content: ' ';
}

/* The calculation breakdown already shows the final total — the separate
   standalone price line directly below it is redundant repetition of the
   same number. Hide it only when a calc breakdown is present (i.e. only
   for custom-length items); ordinary items keep their price line as
   normal. Falls back gracefully to showing both on browsers that don't
   support :has() yet — never hides anything on those, purely a bonus. */
.sfp-cart-item-info:has(.sfp-cart-calc) .sfp-cart-item-price {
  display: none;
}


/* =========================================================================
   Mini-cart popup — mobile width fix
   Was extending past the right edge of the viewport on small screens
   (Elementor's own widget doesn't constrain its width responsively).
   ========================================================================= */
@media (max-width: 600px) {
  .elementor-widget-woocommerce-menu-cart.elementor-menu-cart--cart-type-mini-cart .elementor-menu-cart__main,
  body .elementor-menu-cart__container .elementor-menu-cart__main {
    position: fixed !important;
    right: 12px !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    transform: none !important;
    max-height: 80vh !important;
    overflow-y: auto !important;
  }
  .elementor-menu-cart__product-price,
  .elementor-menu-cart__product-remove {
    flex-shrink: 0 !important;
    grid-column: unset !important;
  }
}


/* =========================================================================
   VARIATIONS TABLE — NUCLEAR OVERRIDE
   Kills reset.css padding/border on th/td that causes unequal row heights.
   ========================================================================= */
body.woocommerce div.product form.cart table.variations th,
body.woocommerce div.product form.cart table.variations td,
body.woocommerce div.product form.cart table.variations tbody th,
body.woocommerce div.product form.cart table.variations tbody td {
  padding: 0 !important;
  border: none !important;
  line-height: 1 !important;
  vertical-align: middle !important;
}
body.woocommerce div.product form.cart table.variations tr {
  height: 54px !important;
  min-height: 54px !important;
  max-height: 54px !important;
  overflow: hidden !important;
}
body.woocommerce div.product form.cart table.variations td.value,
body.woocommerce div.product form.cart table.variations th.value {
  display: flex !important;
  align-items: stretch !important;
  padding: 0 !important;
  flex: 1 !important;
}
body.woocommerce div.product form.cart table.variations td.value select,
body.woocommerce div.product form.cart table.variations th.value select {
  flex: 1 !important;
  height: 100% !important;
  padding: 0 36px 0 14px !important;
  border: none !important;
  outline: none !important;
}
body.woocommerce div.product form.cart table.variations td.label,
body.woocommerce div.product form.cart table.variations th.label {
  display: flex !important;
  align-items: center !important;
  padding: 0 14px !important;
  border-right: 1.5px solid var(--g200) !important;
  flex: 0 0 110px !important;
  background: var(--g50) !important;
}


/* =========================================================================
   VARIATION ROWS — Custom div layout replacing WC table
   ========================================================================= */
.sfp-variation-row {
  display: flex !important;
  align-items: stretch !important;
  border: 1.5px solid var(--g200) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  margin-bottom: 10px !important;
  background: var(--white) !important;
  height: 52px !important;
}
.sfp-variation-label {
  display: flex !important;
  align-items: center !important;
  flex: 0 0 110px !important;
  padding: 0 14px !important;
  background: var(--g50) !important;
  border-right: 1.5px solid var(--g200) !important;
}
.sfp-variation-label label {
  font-family: var(--font-head) !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: var(--steel) !important;
  margin: 0 !important;
  cursor: default !important;
}
.sfp-variation-value {
  flex: 1 !important;
  display: flex !important;
  align-items: stretch !important;
  min-width: 0 !important;
}
.sfp-variation-value select {
  flex: 1 !important;
  height: 100% !important;
  border: none !important;
  outline: none !important;
  padding: 0 36px 0 14px !important;
  font-family: var(--font-head) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  color: var(--steel) !important;
  background-color: transparent !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231A2840' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  cursor: pointer !important;
  -moz-appearance: none !important;
}
.sfp-variation-value select:focus {
  box-shadow: inset 0 0 0 2px var(--orange) !important;
}
/* Focus ring on the row when select is active */
.sfp-variation-row:focus-within {
  border-color: var(--orange) !important;
  box-shadow: 0 0 0 3px rgba(224,78,10,.1) !important;
}
/* Hide the old table now that we have divs */
.woocommerce div.product form.cart table.variations {
  display: none !important;
}


/* =========================================================================
   SINGLE PRODUCT — SIMPLE PRODUCT FIXES
   ========================================================================= */

/* Price box always full width */
.sfp-price-box {
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Quantity stepper — breathing room above ATC on ALL product types */
.woocommerce div.product form.cart .quantity {
  margin-bottom: 16px !important;
}
/* Simple product form — stack quantity above ATC button */
.woocommerce div.product form.cart:not(.variations_form) {
  flex-direction: column !important;
  align-items: stretch !important;
}
.woocommerce div.product form.cart:not(.variations_form) .quantity {
  margin-right: 0 !important;
}
/* Variable products — also stack qty + ATC vertically */
.woocommerce-variation-add-to-cart {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
}
.woocommerce-variation-add-to-cart .quantity {
  margin-right: 0 !important;
  margin-bottom: 16px !important;
}


/* ── Length field hidden until variation selected ── */
.sfp-length-field--hidden {
  display: none !important;
}