/*
Theme Name:   Varia24 Flatsome Child
Theme URI:    https://varia24.ee
Description:  Varia24 child theme for Flatsome. Roheline premium, UX Builder.
Author:       Froppy OÜ
Author URI:   https://froppy.ee
Template:     flatsome
Version:      1.0.0
Text Domain:  varia24
*/

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
  --v-green:         #2d6a4f;
  --v-green-dark:    #1b4332;
  --v-green-mid:     #52b788;
  --v-green-light:   #d8f3dc;
  --v-green-pale:    #f0faf1;
  --v-hero-bg:       #0d1a10;
  --v-hero-text:     #f1f8f3;
  --v-hero-sub:      #8faa98;
  --v-border:        rgba(0,0,0,0.08);
  --v-radius:        8px;
  --v-radius-lg:     12px;
  --v-shadow-sm:     0 1px 3px rgba(0,0,0,0.07);
  --v-transition:    0.18s ease;
}

/* ============================================================
   FLATSOME THEME COLOUR OVERRIDE
   Flatsome reads --primary-color and its own CSS vars.
   We override via :root AND direct selectors.
   ============================================================ */
:root {
  --primary-color:   #2d6a4f;
  --secondary-color: #1b4332;
}

/* ============================================================
   GLOBAL RESETS & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--v-green); transition: color var(--v-transition); }
a:hover { color: var(--v-green-dark); }

/* ============================================================
   BUTTONS — global
   ============================================================ */
.button,
button,
input[type="submit"],
input[type="button"],
.btn {
  border-radius: var(--v-radius) !important;
  transition: background var(--v-transition), border-color var(--v-transition), transform 0.1s !important;
}
.button:active,
input[type="submit"]:active { transform: scale(0.98); }

/* Primary button */
.button.primary,
.button.color.primary,
.woocommerce .button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.wc-proceed-to-checkout a.checkout-button,
.single_add_to_cart_button,
#place_order {
  background: var(--v-green) !important;
  border-color: var(--v-green) !important;
  color: #fff !important;
}
.button.primary:hover,
.woocommerce .button.alt:hover,
.single_add_to_cart_button:hover,
.wc-proceed-to-checkout a.checkout-button:hover,
#place_order:hover {
  background: var(--v-green-dark) !important;
  border-color: var(--v-green-dark) !important;
}

/* Outline / ghost button */
.button.outline,
.button.secondary {
  border-color: var(--v-green) !important;
  color: var(--v-green) !important;
  background: transparent !important;
}
.button.outline:hover,
.button.secondary:hover {
  background: var(--v-green) !important;
  color: #fff !important;
}

/* ============================================================
   FLATSOME TOPBAR
   ============================================================ */
#top-bar {
  background: var(--v-hero-bg) !important;
  color: var(--v-hero-sub) !important;
  font-size: 12px;
}
#top-bar a { color: var(--v-green-mid) !important; }
#top-bar a:hover { color: #fff !important; }

/* ============================================================
   HEADER
   ============================================================ */
#header {
  background: #fff;
  border-bottom: 1px solid var(--v-border);
  box-shadow: none !important;
}
#logo img { max-height: 42px; }

/* Search */
.search-field {
  border-radius: var(--v-radius) !important;
  border: 1px solid var(--v-border) !important;
  transition: border-color var(--v-transition);
}
.search-field:focus { border-color: var(--v-green) !important; outline: none; }
.search-submit {
  background: var(--v-green) !important;
  border-radius: 0 var(--v-radius) var(--v-radius) 0 !important;
}

/* Cart icon badge */
.cart-count {
  background: var(--v-green) !important;
  color: #fff !important;
}

/* ============================================================
   NAVIGATION
   ============================================================ */
.nav-dark .nav > li > a,
.nav > li > a {
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: color var(--v-transition);
}
.nav > li > a:hover,
.nav > li.active > a,
.nav > li.current-menu-item > a {
  color: var(--v-green) !important;
}

/* Mega menu / dropdown top border */
.nav .sub-menu,
.nav .dropdown-menu {
  border-top: 2px solid var(--v-green) !important;
  border-radius: 0 0 var(--v-radius) var(--v-radius) !important;
}

/* Mobile hamburger */
.nav-icon:hover,
.nav-icon:focus { color: var(--v-green) !important; }

/* ============================================================
   BREADCRUMBS
   ============================================================ */
.breadcrumbs,
.woocommerce-breadcrumb {
  font-size: 12.5px !important;
  color: #999 !important;
}
.breadcrumbs a,
.woocommerce-breadcrumb a { color: #999 !important; }
.breadcrumbs a:hover,
.woocommerce-breadcrumb a:hover { color: var(--v-green) !important; }

/* ============================================================
   UX BUILDER — HERO SECTION
   Add class "v24-hero" to UX Builder Row
   ============================================================ */
.v24-hero {
  background: var(--v-hero-bg) !important;
  position: relative;
  overflow: hidden;
}
.v24-hero::before {
  content: '';
  position: absolute;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: var(--v-green);
  opacity: 0.1;
  top: -120px; right: -80px;
  pointer-events: none;
}
.v24-hero::after {
  content: '';
  position: absolute;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: var(--v-green-mid);
  opacity: 0.08;
  bottom: -60px; right: 160px;
  pointer-events: none;
}
.v24-hero h1,
.v24-hero h2,
.v24-hero h3 {
  color: var(--v-hero-text) !important;
  font-weight: 500;
}
.v24-hero p,
.v24-hero .sub-heading { color: var(--v-hero-sub) !important; }

/* Hero ghost button */
.v24-hero .button.ghost,
.v24-hero .button.white {
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.2) !important;
  color: #e5e7e6 !important;
}
.v24-hero .button.ghost:hover { background: rgba(255,255,255,0.15) !important; }

/* Hero badge pill — add class "v24-badge" to UX text element */
.v24-badge {
  display: inline-block;
  background: rgba(82,183,136,0.18);
  color: #74c69d;
  font-size: 12px;
  padding: 5px 16px;
  border-radius: 20px;
  margin-bottom: 16px;
  letter-spacing: 0.02em;
}

/* ============================================================
   TRUST BAR — add class "v24-trust-bar" to UX Row
   ============================================================ */
.v24-trust-bar {
  background: #fff;
  border: 1px solid var(--v-border);
  border-radius: var(--v-radius-lg);
  overflow: hidden;
}
.v24-trust-bar .col {
  border-right: 1px solid var(--v-border);
}
.v24-trust-bar .col:last-child { border-right: none; }

.v24-trust-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
}
.v24-trust-item .ti {
  font-size: 22px;
  color: var(--v-green);
  flex-shrink: 0;
}
.v24-trust-item strong { display: block; font-size: 13px; font-weight: 500; }
.v24-trust-item span  { font-size: 12px; color: #777; }

/* ============================================================
   SECTION HEADERS — add class "v24-section-head" to UX Row
   ============================================================ */
.v24-section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.v24-section-head h2,
.v24-section-head h3 {
  font-size: 20px !important;
  font-weight: 500 !important;
  margin: 0 !important;
}
.v24-section-head .v24-see-all {
  font-size: 13px;
  color: var(--v-green);
  text-decoration: none;
  font-weight: 500;
}

/* ============================================================
   PRODUCT CARDS — WooCommerce archive
   ============================================================ */
.products li.product {
  border: 1px solid var(--v-border) !important;
  border-radius: var(--v-radius-lg) !important;
  overflow: hidden;
  transition: border-color var(--v-transition), transform var(--v-transition);
}
.products li.product:hover {
  border-color: var(--v-green-mid) !important;
  transform: translateY(-2px);
}

/* Product image area */
.products li.product .product-image-wrap,
.products li.product .product-thumbnail {
  background: var(--v-green-pale);
}

/* Price */
.products li.product .price,
.woocommerce-Price-amount { color: #111 !important; font-weight: 500; }
.products li.product .price del { color: #aaa !important; font-size: 0.85em; }
.products li.product .price ins { color: var(--v-green) !important; text-decoration: none !important; }

/* Add to cart button on card */
.products li.product .button,
.products li.product .add_to_cart_button {
  background: var(--v-green-light) !important;
  color: var(--v-green-dark) !important;
  border: none !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border-radius: 0 0 var(--v-radius) var(--v-radius) !important;
  transition: background var(--v-transition), color var(--v-transition) !important;
}
.products li.product .button:hover,
.products li.product .add_to_cart_button:hover {
  background: var(--v-green) !important;
  color: #fff !important;
}

/* Sale badge */
.woocommerce span.onsale,
.badge.sale {
  background: var(--v-green) !important;
  color: #fff !important;
  border-radius: 20px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
}

/* Ratings */
.star-rating span::before { color: #d4a017 !important; }

/* ============================================================
   SHOP PAGE SIDEBAR
   ============================================================ */
.sidebar .widget-title,
.sidebar .widgettitle {
  font-size: 11.5px !important;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #999 !important;
  font-weight: 500 !important;
  margin-bottom: 12px !important;
}
.sidebar .widget {
  border-bottom: 1px solid var(--v-border);
  padding-bottom: 20px;
  margin-bottom: 20px;
}
.sidebar .widget:last-child { border-bottom: none; }
.sidebar ul li a:hover { color: var(--v-green) !important; }

/* Price filter slider */
.price_slider_wrapper .ui-slider-range,
.price_slider_wrapper .ui-slider-handle {
  background: var(--v-green) !important;
  border-color: var(--v-green) !important;
}

/* Sorting dropdown */
.woocommerce-ordering select {
  border: 1px solid var(--v-border) !important;
  border-radius: var(--v-radius) !important;
  font-size: 13px !important;
  height: 38px;
  padding: 0 12px;
}

/* ============================================================
   SINGLE PRODUCT PAGE
   ============================================================ */
/* Gallery */
.woocommerce-product-gallery .flex-active-slide img {
  border-radius: var(--v-radius-lg);
}
.woocommerce-product-gallery .flex-control-thumbs li img {
  border-radius: var(--v-radius);
  border: 2px solid transparent;
  transition: border-color var(--v-transition);
}
.woocommerce-product-gallery .flex-control-thumbs li img:hover,
.woocommerce-product-gallery .flex-control-thumbs li img.flex-active {
  border-color: var(--v-green) !important;
}

/* Price */
.summary .price {
  font-size: 28px !important;
  font-weight: 500 !important;
}
.summary .price del { font-size: 16px !important; color: #aaa !important; }
.summary .price ins { color: var(--v-green) !important; text-decoration: none !important; }

/* Qty stepper */
.quantity input.qty {
  border: 1px solid var(--v-border) !important;
  border-radius: var(--v-radius) !important;
  height: 46px !important;
  font-size: 16px;
  text-align: center;
  width: 64px;
}
.plus, .minus {
  border: 1px solid var(--v-border) !important;
  border-radius: var(--v-radius) !important;
  background: #f7f7f7 !important;
  width: 36px; height: 46px;
  font-size: 20px;
  cursor: pointer;
  transition: background var(--v-transition);
}
.plus:hover, .minus:hover { background: var(--v-green-light) !important; }

/* Add to cart */
.single_add_to_cart_button {
  font-size: 15px !important;
  padding: 14px 28px !important;
  border-radius: var(--v-radius) !important;
  letter-spacing: 0.01em;
}

/* Tabs */
.woocommerce-tabs .tabs li a { font-size: 13.5px; color: #666; }
.woocommerce-tabs .tabs li.active a { color: var(--v-green) !important; }
.woocommerce-tabs .tabs li.active { border-bottom: 2px solid var(--v-green) !important; }

/* Product meta trust strip */
.v24-product-meta {
  border-top: 1px solid var(--v-border);
  padding-top: 16px;
  margin-top: 16px;
}
.v24-meta-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 9px;
  font-size: 13px;
  color: #555;
}
.v24-meta-item .ti { color: var(--v-green); font-size: 17px; flex-shrink: 0; }

/* Related / upsells */
.related > h2,
.upsells > h2 { font-size: 20px; font-weight: 500; margin-bottom: 20px; }

/* ============================================================
   CART
   ============================================================ */
.woocommerce-cart table.cart {
  border: 1px solid var(--v-border) !important;
  border-radius: var(--v-radius-lg) !important;
  overflow: hidden;
}
.woocommerce-cart table.cart thead th {
  background: #f8f8f8;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #999;
  font-weight: 500;
}
.woocommerce-cart table.cart td { vertical-align: middle !important; }
.woocommerce-cart table.cart td.product-name a { font-weight: 500; color: #111; }
.woocommerce-cart table.cart td.product-name a:hover { color: var(--v-green) !important; }

.woocommerce-cart .coupon input[type="text"] {
  border: 1px solid var(--v-border) !important;
  border-radius: var(--v-radius) !important;
  height: 42px;
  padding: 0 14px;
  font-size: 13.5px;
}

.cart_totals {
  background: var(--v-green-pale) !important;
  border: 1px solid var(--v-green-light) !important;
  border-radius: var(--v-radius-lg) !important;
  padding: 24px !important;
}
.cart_totals h2 { font-size: 17px !important; font-weight: 500 !important; }
.cart_totals table tr.order-total th,
.cart_totals table tr.order-total td {
  font-size: 18px;
  font-weight: 500;
  padding-top: 14px;
}

/* ============================================================
   CHECKOUT
   ============================================================ */
.woocommerce-checkout .form-row label {
  font-size: 12.5px;
  font-weight: 500;
  color: #555;
  margin-bottom: 4px;
  display: block;
}
.woocommerce-checkout .form-row input[type="text"],
.woocommerce-checkout .form-row input[type="email"],
.woocommerce-checkout .form-row input[type="tel"],
.woocommerce-checkout .form-row input[type="password"],
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea {
  border: 1px solid var(--v-border) !important;
  border-radius: var(--v-radius) !important;
  height: 44px;
  padding: 0 14px;
  font-size: 14px;
  transition: border-color var(--v-transition);
  width: 100%;
}
.woocommerce-checkout .form-row input:focus,
.woocommerce-checkout .form-row select:focus {
  border-color: var(--v-green) !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(45,106,79,0.1);
}

/* Shipping methods */
.woocommerce-shipping-methods li {
  border: 1px solid var(--v-border) !important;
  border-radius: var(--v-radius) !important;
  padding: 13px 16px !important;
  margin-bottom: 8px !important;
  cursor: pointer;
  transition: border-color var(--v-transition), background var(--v-transition);
  list-style: none;
}
.woocommerce-shipping-methods li.selected,
.woocommerce-shipping-methods li:has(input:checked) {
  border-color: var(--v-green) !important;
  background: var(--v-green-pale) !important;
}
.woocommerce-shipping-methods li label {
  cursor: pointer;
  font-size: 13.5px;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.woocommerce-shipping-methods input[type="radio"] { accent-color: var(--v-green); }

/* Payment methods */
.wc_payment_methods { list-style: none; padding: 0; }
.wc_payment_methods li {
  border: 1px solid var(--v-border) !important;
  border-radius: var(--v-radius) !important;
  padding: 13px 16px !important;
  margin-bottom: 8px !important;
}
.wc_payment_methods li:has(input:checked) {
  border-color: var(--v-green) !important;
  background: var(--v-green-pale) !important;
}
.wc_payment_methods input[type="radio"] { accent-color: var(--v-green); }
.payment_box { background: var(--v-green-pale) !important; border-radius: var(--v-radius) !important; padding: 12px !important; margin-top: 8px !important; }

/* Order review sidebar */
#order_review_heading { font-size: 18px; font-weight: 500; }
#order_review {
  background: var(--v-green-pale);
  border: 1px solid var(--v-green-light);
  border-radius: var(--v-radius-lg);
  padding: 24px;
}
#order_review table tfoot tr.order-total th,
#order_review table tfoot tr.order-total td {
  font-size: 17px;
  font-weight: 500;
}
#place_order {
  font-size: 15px !important;
  padding: 15px !important;
  border-radius: var(--v-radius) !important;
  width: 100%;
  margin-top: 8px;
}

/* ============================================================
   THANK YOU / ORDER RECEIVED
   ============================================================ */
.woocommerce-order { text-align: center; padding: 40px 0; }
.woocommerce-order-overview {
  background: var(--v-green-pale) !important;
  border: 1px solid var(--v-green-light) !important;
  border-radius: var(--v-radius-lg) !important;
  padding: 0 !important;
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  justify-content: center;
  overflow: hidden;
}
.woocommerce-order-overview li {
  flex: 1;
  min-width: 130px;
  padding: 18px 16px !important;
  border-right: 1px solid var(--v-green-light) !important;
  text-align: center;
}
.woocommerce-order-overview li:last-child { border-right: none !important; }
.woocommerce-order-overview li strong { display: block; font-size: 15px; margin-top: 4px; }

/* ============================================================
   MY ACCOUNT
   ============================================================ */
.woocommerce-MyAccount-navigation {
  background: var(--v-green-pale);
  border: 1px solid var(--v-green-light);
  border-radius: var(--v-radius-lg);
  padding: 12px;
}
.woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; margin: 0; }
.woocommerce-MyAccount-navigation ul li a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--v-radius);
  font-size: 13.5px;
  color: #444;
  text-decoration: none;
  transition: background var(--v-transition), color var(--v-transition);
}
.woocommerce-MyAccount-navigation ul li a:hover,
.woocommerce-MyAccount-navigation ul li.is-active a {
  background: var(--v-green-light);
  color: var(--v-green-dark) !important;
}
.woocommerce-MyAccount-navigation ul li.is-active a { font-weight: 500; }

/* Account tables */
.woocommerce-orders-table {
  border: 1px solid var(--v-border) !important;
  border-radius: var(--v-radius-lg) !important;
  overflow: hidden;
  width: 100%;
}
.woocommerce-orders-table th {
  background: #f5f5f5;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #999;
  font-weight: 500;
  padding: 10px 14px;
}
.woocommerce-orders-table td { padding: 12px 14px; border-top: 1px solid #f0f0f0; }

/* Account form inputs */
.woocommerce-EditAccountForm input,
.woocommerce-address-fields input,
.woocommerce-address-fields select {
  border: 1px solid var(--v-border) !important;
  border-radius: var(--v-radius) !important;
  height: 42px;
  padding: 0 12px;
  font-size: 13.5px;
  transition: border-color var(--v-transition);
}
.woocommerce-EditAccountForm input:focus,
.woocommerce-address-fields input:focus {
  border-color: var(--v-green) !important;
  outline: none;
}

/* ============================================================
   WISHLIST (YITH or Flatsome built-in)
   ============================================================ */
.yith-wcwl-add-to-wishlist .add_to_wishlist,
.flatsome-wishlist .add-to-wishlist { color: var(--v-green) !important; }
.wishlist_table {
  border: 1px solid var(--v-border) !important;
  border-radius: var(--v-radius-lg) !important;
  overflow: hidden;
}
.wishlist_table th {
  background: #f5f5f5;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #999;
}

/* ============================================================
   UX BUILDER — UTILITY CLASSES
   Apply to rows/columns in UX Builder custom CSS field
   ============================================================ */

/* Rounded card surface */
.v24-card {
  background: #fff;
  border: 1px solid var(--v-border);
  border-radius: var(--v-radius-lg);
  overflow: hidden;
}

/* Green tint surface */
.v24-surface-green {
  background: var(--v-green-pale);
  border: 1px solid var(--v-green-light);
  border-radius: var(--v-radius-lg);
}

/* Dark surface (for sections) */
.v24-surface-dark {
  background: var(--v-hero-bg) !important;
  color: var(--v-hero-text) !important;
}
.v24-surface-dark h1,
.v24-surface-dark h2,
.v24-surface-dark h3,
.v24-surface-dark h4 { color: var(--v-hero-text) !important; }
.v24-surface-dark p { color: var(--v-hero-sub) !important; }

/* Pill label */
.v24-pill {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
}
.v24-pill-green { background: var(--v-green-light); color: var(--v-green-dark); }
.v24-pill-dark  { background: rgba(82,183,136,0.18); color: #74c69d; }

/* ============================================================
   STICKY ADD-TO-CART BAR (JS-driven, styled here)
   ============================================================ */
.v24-sticky-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: #fff;
  border-top: 1px solid var(--v-border);
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  z-index: 9999;
  transform: translateY(100%);
  transition: transform 0.25s ease;
}
.v24-sticky-bar.visible { transform: translateY(0); }
.v24-sticky-bar-name { font-weight: 500; font-size: 14px; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v24-sticky-bar-price { font-size: 15px; font-weight: 500; flex-shrink: 0; }
.v24-sticky-bar-btn {
  background: var(--v-green);
  color: #fff;
  border: none;
  padding: 10px 22px;
  border-radius: var(--v-radius);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--v-transition);
}
.v24-sticky-bar-btn:hover { background: var(--v-green-dark); }

/* ============================================================
   FREE SHIPPING PROGRESS BAR
   ============================================================ */
.v24-shipping-progress {
  background: var(--v-green-pale);
  border: 1px solid var(--v-green-light);
  border-radius: var(--v-radius-lg);
  padding: 14px 18px;
  margin-bottom: 24px;
}
.v24-shipping-track {
  background: var(--v-green-light);
  border-radius: 20px;
  height: 6px;
  overflow: hidden;
  margin-top: 8px;
}
.v24-shipping-fill {
  background: var(--v-green);
  height: 100%;
  border-radius: 20px;
  transition: width 0.5s ease;
}

/* ============================================================
   FOOTER
   ============================================================ */
#footer,
.footer-wrapper {
  background: var(--v-hero-bg) !important;
  color: var(--v-hero-sub) !important;
}
#footer a,
.footer-wrapper a { color: var(--v-green-mid) !important; }
#footer a:hover,
.footer-wrapper a:hover { color: #fff !important; }
#footer .widget-title,
.footer-wrapper .widget-title {
  color: var(--v-hero-text) !important;
  font-size: 12px !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
  margin-bottom: 16px;
}

/* Footer bottom bar */
.absolute-footer {
  background: #070f09 !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  color: #4a6a55 !important;
  font-size: 12px;
}
.absolute-footer a { color: #4a6a55 !important; }

/* ============================================================
   PAGINATION
   ============================================================ */
.woocommerce-pagination .page-numbers,
.page-numbers {
  border-radius: var(--v-radius) !important;
}
.woocommerce-pagination .page-numbers.current,
.page-numbers.current {
  background: var(--v-green) !important;
  border-color: var(--v-green) !important;
  color: #fff !important;
}

/* ============================================================
   NOTICES & MESSAGES
   ============================================================ */
.woocommerce-message,
.woocommerce-info { border-top-color: var(--v-green) !important; }
.woocommerce-message::before,
.woocommerce-info::before { color: var(--v-green) !important; }
.woocommerce-message .button { background: var(--v-green) !important; }

/* ============================================================
   404
   ============================================================ */
.v24-404-number {
  font-size: 100px;
  font-weight: 500;
  color: var(--v-green-light);
  line-height: 1;
}

/* ============================================================
   MOBILE RESPONSIVE
   ============================================================ */
@media (max-width: 849px) {
  .v24-hero { padding: 40px 24px !important; }
  .v24-trust-bar .col { border-right: none; border-bottom: 1px solid var(--v-border); }
  .v24-trust-bar .col:last-child { border-bottom: none; }
  .woocommerce-order-overview li {
    border-right: none !important;
    border-bottom: 1px solid var(--v-green-light) !important;
  }
  .woocommerce-order-overview li:last-child { border-bottom: none !important; }
  .v24-sticky-bar { padding: 10px 14px; gap: 8px; }
  .v24-sticky-bar-name { display: none; }
  .woocommerce-checkout #customer_details .col-1,
  .woocommerce-checkout #customer_details .col-2 {
    width: 100%;
    float: none;
  }
}

@media (max-width: 480px) {
  .summary .price { font-size: 22px !important; }
  #place_order { font-size: 14px !important; padding: 13px !important; }
}