/*
Theme Name:   Woostify Child
Theme URI:    https://spotitap.com
Description:  Child theme for Woostify - Spotitap customizations
Author:       Spotitap
Template:     woostify
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  woostify-child
*/

/* ============================================================
   DESIGN TOKENS — edit here, applied everywhere
   ============================================================ */
:root {
  /* Brand colors — matches Elementor Site Settings */
  --sp-primary:        #0B7E8A;
  --sp-primary-hover:  #096873;
  --sp-dark-brand:     #141414;
  --sp-accent:         #0B7E8A;
  --sp-accent-hover:   #096873;

  /* Neutrals */
  --sp-dark:           #141414;
  --sp-heading:        #141414;
  --sp-body:           #454545;
  --sp-muted:          #888888;
  --sp-border:         #e0e0e0;
  --sp-bg-light:       #f4fafa;
  --sp-bg-white:       #ffffff;
  --sp-surface:        #eef7f7;

  /* Typography */
  --sp-font-body:      'Poppins', sans-serif;
  --sp-font-heading:   'Poppins', sans-serif;
  --sp-text-base:      16px;
  --sp-text-sm:        14px;
  --sp-text-xs:        12px;
  --sp-lh-body:        1.6;

  /* Spacing (8px grid) */
  --sp-space-1:        8px;
  --sp-space-2:        16px;
  --sp-space-3:        24px;
  --sp-space-4:        32px;
  --sp-space-6:        48px;
  --sp-space-8:        64px;

  /* Radius */
  --sp-radius-sm:      4px;
  --sp-radius:         8px;
  --sp-radius-lg:      16px;
  --sp-radius-pill:    999px;

  /* Shadows */
  --sp-shadow-sm:      0 1px 3px rgba(0,0,0,.07);
  --sp-shadow:         0 4px 20px rgba(14,139,139,.12);
  --sp-shadow-lg:      0 8px 40px rgba(14,139,139,.18);

  /* Transitions */
  --sp-transition:     200ms ease;
}

/* ============================================================
   MOBILE MENU — Woostify sidebar-menu system (correct selectors)
   ============================================================ */

/* Hamburger toggle button — <span class="toggle-sidebar-menu-btn woostify-icon-bar"> */
.wrap-toggle-sidebar-menu {
  cursor: pointer;
  position: relative;
  z-index: 1000;
}

.toggle-sidebar-menu-btn {
  cursor: pointer !important;
  pointer-events: auto !important;
  position: relative !important;
  z-index: 1000 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Hamburger icon lines */
.woostify-icon-bar span,
.woostify-icon-bar span::before,
.woostify-icon-bar span::after {
  background-color: var(--sp-heading, #141414) !important;
}

/* Slide-in menu panel — must be above our fixed floating elements */
.sidebar-menu {
  z-index: 10001 !important;
}

/* Cart sidebar — must sit above overlay (overlay is at 10000, sidebar defaults to 200) */
#shop-cart-sidebar {
  z-index: 10002 !important;
}

/* ── Cart sidebar header ── */
.cart-sidebar-head {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 18px 20px !important;
  border-bottom: 1px solid var(--sp-border) !important;
}
.cart-sidebar-title {
  flex: 1 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  margin: 0 !important;
  color: var(--sp-heading) !important;
}

/* ── Item-count badge ── */
.shop-cart-count {
  background: var(--sp-primary) !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  min-width: 22px !important;
  height: 22px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 6px !important;
  line-height: 1 !important;
}

/* ── Close button ── */
#close-cart-sidebar-btn {
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  padding: 4px !important;
  color: var(--sp-muted) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: unset !important;
  width: auto !important;
  box-shadow: none !important;
  transform: none !important;
  border-radius: 0 !important;
}
#close-cart-sidebar-btn:hover {
  color: var(--sp-heading) !important;
  background: none !important;
  transform: none !important;
  box-shadow: none !important;
}

/* ── Mini-cart content area ── */
.cart-sidebar-content {
  overflow-y: auto !important;
  flex: 1 !important;
}
/* Do NOT override padding on mini-cart items — Woostify uses padding-left:75px
   to leave space for the absolutely-positioned product image. */

.mini-cart-product-infor .mini-cart-quantity .qty {
  padding-bottom: 20px !important;
}

/* ── Quantity +/- inside cart sidebar (compact size) ── */
#shop-cart-sidebar .quantity .product-qty {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  padding: 0 !important;
}
#shop-cart-sidebar .quantity input.qty {
  width: 36px !important;
  min-height: unset !important;
  height: 26px !important;
  padding: 0 4px !important;
  font-size: 13px !important;
  text-align: center !important;
}

/* ── Subtotal row ── */
#shop-cart-sidebar .woocommerce-mini-cart__total {
  padding: 14px 20px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  border-top: 2px solid var(--sp-border) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

/* ── Cart sidebar action buttons — override global styles ── */
#shop-cart-sidebar .woocommerce-mini-cart__buttons {
  padding: 12px 20px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
#shop-cart-sidebar .woocommerce-mini-cart__buttons .button,
#shop-cart-sidebar .woocommerce-mini-cart__buttons a.button {
  width: 100% !important;
  text-align: center !important;
  display: block !important;
  margin: 0 !important;
  padding: 12px 20px !important;
  font-size: 14px !important;
  transform: none !important;
  box-shadow: none !important;
}
#shop-cart-sidebar .woocommerce-mini-cart__buttons .button:hover,
#shop-cart-sidebar .woocommerce-mini-cart__buttons a.button:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* Full-screen overlay — disable by default, re-enable whenever any sidebar is open */
#woostify-overlay {
  z-index: 10000 !important;
  pointer-events: none;
}
.sidebar-menu-open #woostify-overlay,
.cart-sidebar-open #woostify-overlay,
.woostify-cart-sidebar-open #woostify-overlay,
.active-sidebar #woostify-overlay {
  pointer-events: auto !important;
}

/* Hide sticky CTA when mobile menu is open */
.sidebar-menu-open .sp-sticky-cta {
  display: none !important;
}

/* ── Sidebar menu overall panel ── */
.sidebar-menu {
  padding: 20px 0 !important;
}

/* ── Constrain panel so it never overflows the screen ── */
.sidebar-menu,
.sidebar-menu .woostify-navigation,
.sidebar-menu .primary-navigation,
.sidebar-menu .site-navigation {
  max-width: 100vw !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

/* ── Every nav link row ── */
.sidebar-menu li,
.sidebar-menu .primary-navigation li,
.sidebar-menu .woostify-navigation li {
  border-bottom: 1px solid #f0f0f0 !important;
  position: relative !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.sidebar-menu li:last-child,
.sidebar-menu .primary-navigation li:last-child {
  border-bottom: none !important;
}

/* ── Link text — max specificity to beat Woostify ── */
.sidebar-menu li a,
.sidebar-menu .primary-navigation li a,
.sidebar-menu .woostify-navigation li a,
.sidebar-menu .site-navigation li a {
  background: none !important;
  color: var(--sp-heading, #141414) !important;
  border: none !important;
  padding: 15px 16px 15px 24px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  min-height: unset !important;
  transform: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  line-height: 1.4 !important;
  box-sizing: border-box !important;
  white-space: normal !important;
}

/* ── Kill the teal/blue "current ancestor" colour ── */
.sidebar-menu .current-menu-ancestor > a,
.sidebar-menu .current-menu-parent > a,
.sidebar-menu .current-menu-item > a,
.sidebar-menu .current_page_item > a,
.sidebar-menu .current_page_ancestor > a {
  color: var(--sp-primary, #0B7E8A) !important;
  font-weight: 600 !important;
}

.sidebar-menu li a:hover,
.sidebar-menu .primary-navigation li a:hover {
  color: var(--sp-primary, #0B7E8A) !important;
  background: rgba(11,126,138,.05) !important;
  transform: none !important;
}

/* ── Arrow / chevron for submenu items ── */
.sidebar-menu .arrow-icon {
  position: absolute !important;
  right: 20px !important;
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  color: #aaa !important;
  border: 1px solid #e8e8e8 !important;
  border-radius: 8px !important;
  background: #f7f7f7 !important;
  z-index: 2 !important;
  transition: background .15s, color .15s !important;
}

/* ── Overlay close icon — move slightly right ── */
.sidebar-menu-open #woostify-overlay .woostify-svg-icon {
  right: 8px !important;
}

/* ── Arrow-icon inside nav links — remove negative margin from parent theme ── */
.sidebar-menu .site-navigation nav .menu-item a > .arrow-icon {
  margin-right: 0 !important;
}
.sidebar-menu .arrow-icon:hover,
.sidebar-menu .arrow-icon.active {
  color: var(--sp-primary, #0B7E8A) !important;
  background: rgba(11,126,138,.08) !important;
  border-color: rgba(11,126,138,.2) !important;
}
/* Leave enough room so text never runs under the arrow */
.sidebar-menu .menu-item-has-children > a,
.sidebar-menu li.menu-item-has-children > a {
  padding-right: 56px !important;
}

/* ── Submenu items ── */
.sidebar-menu .sub-menu {
  display: none !important;
  background: #fafafa !important;
}
.sidebar-menu .sub-menu.show {
  display: block !important;
}
.sidebar-menu .sub-menu li a,
.sidebar-menu .sub-menu li a {
  padding: 12px 16px 12px 36px !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #555 !important;
}
.sidebar-menu .sub-menu li a:hover {
  color: var(--sp-primary, #0B7E8A) !important;
}

/* ── Search bar inside sidebar ── */
.sidebar-menu .search-field {
  border: 1px solid #e0e0e0 !important;
  border-radius: 6px !important;
  padding: 10px 14px !important;
  width: 100% !important;
  font-size: 14px !important;
  margin: 0 !important;
  box-shadow: none !important;
}

/* ============================================================
   GLOBAL BASE
   ============================================================ */
body {
  font-family: var(--sp-font-body);
  font-size: var(--sp-text-base);
  line-height: var(--sp-lh-body);
  color: var(--sp-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--sp-font-heading);
  color: var(--sp-heading);
  line-height: 1.25;
  font-weight: 700;
}

a {
  color: var(--sp-primary);
  transition: color var(--sp-transition);
}

a:hover {
  color: var(--sp-primary-hover);
}

/* ============================================================
   BUTTONS
   ============================================================ */
.button,
.wp-block-button__link,
button[type="submit"],
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.elementor-button {
  background-color: var(--sp-primary) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--sp-radius) !important;
  padding: 13px 28px !important;
  font-family: var(--sp-font-body) !important;
  font-size: var(--sp-text-base) !important;
  font-weight: 600 !important;
  letter-spacing: .03em !important;
  cursor: pointer !important;
  transition: background-color var(--sp-transition), transform var(--sp-transition), box-shadow var(--sp-transition) !important;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.elementor-button:hover {
  background-color: var(--sp-primary-hover) !important;
  color: #fff !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--sp-shadow) !important;
}

/* Outline / secondary */
.button.button-outline,
.woocommerce a.button.alt {
  background-color: transparent !important;
  color: var(--sp-primary) !important;
  border: 2px solid var(--sp-primary) !important;
}

.button.button-outline:hover,
.woocommerce a.button.alt:hover {
  background-color: var(--sp-primary) !important;
  color: #fff !important;
}

/* "Add to cart" flash button */
.woocommerce a.button.ajax_add_to_cart.added::after {
  content: ' ✓';
}

/* ============================================================
   FORM FIELDS
   ============================================================ */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="number"],
textarea,
select,
.woocommerce-input-wrapper input {
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-sm);
  padding: 10px 14px;
  font-family: var(--sp-font-body);
  font-size: var(--sp-text-base);
  color: var(--sp-dark);
  background: var(--sp-bg-white);
  transition: border-color var(--sp-transition), box-shadow var(--sp-transition);
  width: 100%;
  min-height: 44px;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--sp-primary);
  box-shadow: 0 0 0 3px rgba(14,139,139,.15);
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  box-shadow: 0 2px 12px rgba(0,0,0,.07);
}

/* Make cart icon teal on hover */
.woostify-header .cart-contents:hover,
.woostify-header .cart-contents:hover .count {
  color: var(--sp-primary);
}

/* ============================================================
   WOOCOMMERCE — PRODUCT CARDS
   ============================================================ */
.woocommerce ul.products li.product {
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-lg);
  overflow: hidden;
  transition: box-shadow var(--sp-transition), transform var(--sp-transition);
  background: var(--sp-bg-white);
}

.woocommerce ul.products li.product:hover {
  box-shadow: var(--sp-shadow);
}

/* Uniform image ratio (4:3) */
.woocommerce ul.products li.product .woocommerce-loop-product__link img,
.woocommerce ul.products li.product a img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--sp-heading);
  padding: var(--sp-space-2) var(--sp-space-2) 0;
  margin: 0;
}

.woocommerce ul.products li.product .price {
  color: var(--sp-primary);
  font-weight: 700;
  font-size: 1.05rem;
}

.woocommerce ul.products li.product .price del {
  color: var(--sp-muted);
  font-weight: 400;
}

/* Add to cart button on product card */
.woocommerce ul.products li.product .button {
  width: calc(100% - 32px);
  margin: var(--sp-space-2) var(--sp-space-2) var(--sp-space-2);
  text-align: center;
}

/* Sale badge */
.woocommerce ul.products li.product .onsale,
.woocommerce span.onsale {
  background-color: var(--sp-primary);
  color: #fff;
  border-radius: var(--sp-radius-pill);
  font-size: var(--sp-text-xs);
  font-weight: 700;
  letter-spacing: .04em;
  padding: 4px 10px;
  min-height: unset;
  min-width: unset;
  line-height: 1.4;
}

/* ============================================================
   WOOCOMMERCE — SINGLE PRODUCT
   ============================================================ */
.woocommerce div.product .product_title {
  font-size: clamp(1.5rem, 4vw, 2rem);
  color: var(--sp-heading);
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--sp-primary);
  font-size: 1.5rem;
  font-weight: 700;
}

.woocommerce div.product .woocommerce-product-gallery {
  border-radius: var(--sp-radius-lg);
  overflow: hidden;
}

/* ============================================================
   WOOCOMMERCE — CART & CHECKOUT
   ============================================================ */
.woocommerce-cart table.cart td,
.woocommerce-cart table.cart th {
  vertical-align: middle;
}

.woocommerce-checkout #payment {
  border-radius: var(--sp-radius-lg);
  background: var(--sp-bg-light);
}

/* ============================================================
   NOTICES
   ============================================================ */
.woocommerce-message,
.woocommerce-info {
  border-top-color: var(--sp-primary);
}

.woocommerce-error {
  border-top-color: #d63638;
}

/* ============================================================
   ELEMENTOR — SECTION POLISH
   ============================================================ */

/* Ensure Poppins applies inside Elementor widgets */
.elementor-widget-heading .elementor-heading-title,
.elementor-widget-text-editor,
.elementor-widget-icon-box .elementor-icon-box-title,
.elementor-widget-icon-box .elementor-icon-box-description {
  font-family: var(--sp-font-body) !important;
}

/* Teal for Elementor icon boxes (feature cards) */
.elementor-widget-icon-box .elementor-icon i,
.elementor-widget-icon-box .elementor-icon svg {
  color: var(--sp-primary) !important;
  fill: var(--sp-primary) !important;
}

/* Elementor icon-list (trust pills, benefit list) */
.elementor-widget-icon-list .elementor-icon-list-icon i {
  color: var(--sp-primary) !important;
}

/* ============================================================
   TRUST PILLS (livraison / assistance / remboursement / paiement)
   ============================================================ */
.elementor-widget-icon-box.sp-trust-item .elementor-icon-box-wrapper {
  padding: var(--sp-space-2) var(--sp-space-3);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-lg);
  background: var(--sp-bg-white);
  transition: box-shadow var(--sp-transition), transform var(--sp-transition);
  text-align: center;
}

.elementor-widget-icon-box.sp-trust-item .elementor-icon-box-wrapper:hover {
  box-shadow: var(--sp-shadow-sm);
  transform: translateY(-2px);
}

/* ============================================================
   PROMO COUNTDOWN — hide broken timer, show static promo
   ============================================================ */
.elementor-widget-countdown {
  display: none !important;
}

/* Static promo replacement shown when countdown is hidden.
   Add CSS class "sp-promo-banner" to any Elementor Text widget
   you want to use as a replacement. */
.sp-promo-banner,
.sp-promo-banner .elementor-widget-container {
  background: linear-gradient(135deg, var(--sp-primary) 0%, var(--sp-primary-hover) 100%);
  color: #fff !important;
  text-align: center;
  padding: var(--sp-space-3) var(--sp-space-4);
  border-radius: var(--sp-radius);
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: .02em;
}

.sp-promo-banner *,
.sp-promo-banner .elementor-heading-title {
  color: #fff !important;
}

/* ============================================================
   HOMEPAGE — hide "Nos Articles" (JEG Kit + Elementor posts)
   ============================================================ */

/* JEG Elementor Kit post widgets */
.home .elementor-widget-jkit-post-list,
.home .elementor-widget-jkit-post-block,
.home .elementor-widget-jkit-post-featured,
.home .elementor-widget-jkit-post-carousel,
/* Standard Elementor posts widgets */
.home .elementor-widget-posts,
.home .elementor-widget-archive-posts {
  display: none !important;
}

/* Hide parent section when it contains only the post widget */
.home .elementor-section:has(.elementor-widget-jkit-post-list),
.home .elementor-section:has(.elementor-widget-jkit-post-block),
.home .elementor-section:has(.elementor-widget-posts),
.home .elementor-section:has(.elementor-widget-archive-posts),
/* Elementor 3.x containers */
.home .e-con:has(.elementor-widget-jkit-post-list),
.home .e-con:has(.elementor-widget-jkit-post-block),
.home .e-con:has(.elementor-widget-posts) {
  display: none !important;
}

/* ============================================================
   FOOTER — reset Woostify defaults inside .sp-footer
   ============================================================ */
.sp-footer,
.sp-footer *,
.sp-footer *::before,
.sp-footer *::after {
  box-sizing: border-box;
}

.sp-footer ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.sp-footer li {
  margin: 0 !important;
  padding: 0 !important;
}

/* ============================================================
   FOOTER — shared wrapper
   ============================================================ */
.sp-footer {
  font-family: var(--sp-font-body) !important;
  margin: 0 !important;
  padding: 0 !important;
}

.sp-footer-wrap {
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* ============================================================
   NEWSLETTER BAR
   ============================================================ */
.sp-footer-nl {
  background: linear-gradient(135deg, var(--sp-primary) 0%, #096873 100%);
  padding: 36px 0;
}

.sp-footer-nl__content {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 32px !important;
  flex-wrap: wrap !important;
}

.sp-footer-nl__text {
  display: flex !important;
  flex-direction: column !important;
}

.sp-footer-nl__text strong {
  color: #fff !important;
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  display: block !important;
  margin-bottom: 4px !important;
}

.sp-footer-nl__text span {
  color: rgba(255,255,255,.8) !important;
  font-size: 14px !important;
}

.sp-footer-nl__form {
  display: flex !important;
  gap: 8px !important;
  flex: 0 0 auto !important;
  flex-wrap: wrap !important;
}

.sp-footer-nl__input {
  width: 280px !important;
  min-width: 200px !important;
  padding: 11px 16px !important;
  border: 2px solid rgba(255,255,255,.3) !important;
  border-radius: 6px !important;
  background: rgba(255,255,255,.15) !important;
  color: #fff !important;
  font-family: var(--sp-font-body) !important;
  font-size: 14px !important;
  outline: none !important;
  min-height: unset !important;
}

.sp-footer-nl__input::placeholder {
  color: rgba(255,255,255,.65) !important;
}

.sp-footer-nl__input:focus {
  border-color: rgba(255,255,255,.7) !important;
  background: rgba(255,255,255,.2) !important;
  box-shadow: none !important;
}

.sp-footer-nl__btn {
  padding: 11px 24px !important;
  background: #fff !important;
  color: var(--sp-primary) !important;
  border: none !important;
  border-radius: 6px !important;
  font-family: var(--sp-font-body) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: background var(--sp-transition), color var(--sp-transition), transform var(--sp-transition) !important;
  min-height: unset !important;
  transform: none !important;
}

.sp-footer-nl__btn:hover {
  background: var(--sp-heading) !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
}

/* ============================================================
   FOOTER MAIN COLUMNS
   ============================================================ */
.sp-footer-main {
  background: #111111;
  padding: 64px 0 48px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.sp-footer-grid {
  display: grid !important;
  grid-template-columns: 2fr 1fr 1fr 1.2fr !important;
  gap: 48px !important;
  align-items: start !important;
}

.sp-footer-col h3 {
  color: #fff !important;
  font-family: var(--sp-font-body) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .12em !important;
  margin: 0 0 20px 0 !important;
  padding: 0 !important;
  line-height: 1.4 !important;
}

.sp-footer-col ul li {
  margin-bottom: 10px !important;
}

.sp-footer-col ul li a,
.sp-footer-col ul li a:visited {
  color: rgba(255,255,255,.55) !important;
  text-decoration: none !important;
  font-size: 14px !important;
  font-family: var(--sp-font-body) !important;
  transition: color 180ms ease !important;
  display: inline-block !important;
}

.sp-footer-col ul li a:hover {
  color: var(--sp-primary) !important;
}

/* Brand column */
.sp-footer-col--brand {
  padding-right: 16px;
}

.sp-footer-logo {
  display: inline-block !important;
  margin-bottom: 16px !important;
  text-decoration: none !important;
}

.sp-footer-logo__img {
  max-height: 36px !important;
  width: auto !important;
  filter: brightness(0) invert(1) !important;
}

.sp-footer-logo--text {
  color: #fff !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  letter-spacing: -.02em !important;
}

.sp-footer-tagline {
  color: rgba(255,255,255,.45) !important;
  font-size: 13px !important;
  line-height: 1.7 !important;
  margin: 0 0 20px 0 !important;
  padding: 0 !important;
  max-width: 240px !important;
}

.sp-footer-social {
  display: flex !important;
  gap: 8px !important;
}

.sp-footer-social a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.07) !important;
  color: rgba(255,255,255,.6) !important;
  text-decoration: none !important;
  transition: background 180ms ease, color 180ms ease !important;
  border: 1px solid rgba(255,255,255,.08) !important;
}

.sp-footer-social a:hover {
  background: var(--sp-primary) !important;
  color: #fff !important;
  border-color: var(--sp-primary) !important;
}

/* Contact / address column */
.sp-footer-address {
  font-style: normal !important;
  margin: 0 0 20px 0 !important;
}

.sp-footer-address__item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  margin-bottom: 12px !important;
  color: rgba(255,255,255,.55) !important;
  font-size: 13px !important;
}

.sp-footer-address__item svg {
  flex-shrink: 0 !important;
  margin-top: 2px !important;
  color: var(--sp-primary) !important;
  stroke: var(--sp-primary) !important;
}

.sp-footer-address__item a,
.sp-footer-address__item a:visited {
  color: rgba(255,255,255,.55) !important;
  text-decoration: none !important;
  transition: color 180ms ease !important;
}

.sp-footer-address__item a:hover {
  color: var(--sp-primary) !important;
}

.sp-footer-hours {
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 16px;
  margin-top: 4px;
}

.sp-footer-hours p {
  color: rgba(255,255,255,.45) !important;
  font-size: 13px !important;
  margin: 0 0 4px 0 !important;
  padding: 0 !important;
  line-height: 1.5 !important;
}

.sp-footer-hours strong {
  color: rgba(255,255,255,.75) !important;
}

/* ============================================================
   BOTTOM BAR
   ============================================================ */
.sp-footer-bar {
  background: #0a0a0a;
  padding: 16px 0;
}

.sp-footer-bar__inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}

.sp-footer-bar__copy,
.sp-footer-bar__copy a {
  font-size: 12px !important;
  color: rgba(255,255,255,.35) !important;
  text-decoration: none !important;
  font-family: var(--sp-font-body) !important;
}

.sp-footer-bar__copy a:hover {
  color: var(--sp-primary) !important;
}

.sp-footer-bar__pay {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.sp-footer-bar__pay svg {
  opacity: .65;
  border-radius: 3px;
  transition: opacity 180ms ease;
}

.sp-footer-bar__pay svg:hover {
  opacity: 1;
}

/* ============================================================
   RESPONSIVE HELPERS
   ============================================================ */
@media (max-width: 1024px) {
  .sp-footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px !important;
  }

  .sp-footer-col--brand {
    grid-column: 1 / -1 !important;
    padding-right: 0 !important;
  }

  .sp-footer-tagline {
    max-width: 100% !important;
  }

  .sp-footer-nl__content {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 20px !important;
  }

  .sp-footer-nl__form {
    width: 100% !important;
  }

  .sp-footer-nl__input {
    width: 100% !important;
    flex: 1 !important;
  }
}

@media (max-width: 768px) {
  :root {
    --sp-text-base: 15px;
  }

  .button,
  .woocommerce a.button,
  .woocommerce button.button {
    width: 100% !important;
    text-align: center;
  }

  .woocommerce ul.products li.product .button {
    width: calc(100% - 32px) !important;
  }

  .sp-footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
  }

  .sp-footer-bar__inner {
    flex-direction: column !important;
    text-align: center !important;
  }

  .sp-footer-bar__pay {
    justify-content: center !important;
  }
}

@media (max-width: 480px) {
  :root {
    --sp-text-base: 14px;
  }

  .sp-footer-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  .sp-footer-main {
    padding: 40px 0 32px;
  }

  .sp-footer-nl {
    padding: 28px 0;
  }
}