/*
Theme Name: Shoptimizer Child
Theme URI: https://www.commercegurus.com/wordpress-themes/shoptimizer
Template: shoptimizer
Author: CommerceGurus
Author URI: https://www.commercegurus.com/
Description: Shoptimizer is the perfect theme for your next WooCommerce project designed around speed and conversions.
Tags: e-commerce,two-columns,left-sidebar,right-sidebar,custom-background,custom-colors,custom-header,custom-menu,featured-images,full-width-template,threaded-comments,accessibility-ready,rtl-language-support,footer-widgets,sticky-post,theme-options
Version: 2.8.12.1768564059
Updated: 2026-01-16 13:47:39

*/

/* ===== TOPBAR ========== */

.top-bar {
  color: #FFF;
  font-size: 14px;
}

.top-bar a {
  color: #FFF;
  text-decoration: none;
  transition: all 0.2s ease;
}

.top-bar a:hover {
  opacity: 0.7;
}

.top-bar strong {
  color: #FFF;
}

/* TOPBAR icons added as <img src="...svg"> */
.top-bar img[src$=".svg"] {
  filter: brightness(0) invert(1);
}

/* ==================
   SHOPTIMIZER SEARCH ========================= */

.woocommerce-product-search .search-field,
.site-search .search-field,
.header-search .search-field,
.dgwt-wcas-search-input {
  color: hsl(147, 100%, 10%) !important;
	font-size: 15px;
}

.woocommerce-product-search .search-field,
.site-search .search-field,
.header-search .search-field,
.dgwt-wcas-search-input {
  background-color: hsl(150, 10%, 95%) !important;
}


/* Hide submit text if it exists */
.woocommerce-product-search input[type="submit"],
.site-search input[type="submit"],
.header-search input[type="submit"] {
  font-size: 0 !important;
}

/* ===== GREEN OUTLINE ON CLICK / FOCUS ===== */
.woocommerce-product-search .search-field:focus,
.site-search .search-field:focus,
.header-search .search-field:focus,
.dgwt-wcas-search-input:focus {
  outline: none !important;
  border-color: hsl(153, 100%, 27%) !important;
  box-shadow: 0 0 0 4px hsla(153, 100%, 27%, 0.10) !important;
}


/* ====== SECONDARY MENU =========== */

.site-header .secondary-navigation a:hover,
.site-header .secondary-navigation a:focus,
.site-header .secondary-navigation li:hover > a,
.site-header .secondary-navigation li a:hover,
.site-header .secondary-navigation li a:focus {
  color: #00893e !important;
}

/* Make icon SVGs follow hover (stroke + fill) */
.site-header .secondary-navigation a:hover svg,
.site-header .secondary-navigation a:focus svg,
.site-header .secondary-navigation li:hover > a svg {
  stroke: #00893e !important;
}

/* =================
   CATEGORIES SECTION
   =============== */

/* Categories section */
.card-categories-section{
  padding:64px 0 !important;
  background-color:#F2F7F5;
}

/* Cards grid */
.card-categories {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* mobile: 2 per row */
  gap: 16px;
}

/* Tablet */
@media (min-width: 768px) {
  .card-categories {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .card-categories {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* Small mobile refinements you asked for */
@media (max-width: 767px) {
   .card-categories-section{
    padding: 40px 0 !important; /* reduce from 64px */
  }
  .category-card {
    padding: 10px 8px !important;
    min-height: 160px;
  }
  .category-card-name {
    font-size: 16px; /* –2px */
  }
}

/* Card */
.category-card{
  position:relative;
  cursor:pointer;
  background:#fff;
  border-radius:16px;
  padding:24px;
  text-align:center;
  border:2px solid transparent;

  /* slightly lighter shadow = less repaint cost */
  box-shadow:0 4px 10px hsla(153,30%,15%,0.08);
  transition: box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
}

.category-card:hover{
  box-shadow:0 10px 18px hsla(153,30%,15%,0.10);
  border-color:hsla(153,100%,27%,0.28);
  background-color:hsla(153,100%,27%,0.05) !important;
}

/* Icon */
.category-icon .elementor-icon{
  width:64px;
  height:64px;
  margin:0 auto 16px;

  background-color:hsla(153,100%,27%,0.10);
  border-radius:9999px;

  display:flex;
  align-items:center;
  justify-content:center;

  transition: transform .18s ease, background-color .18s ease;
}

.category-card:hover .category-icon .elementor-icon{
  background-color:#00893e;
  transform:scale(1.06);
}

.category-icon svg{
  width:28px;
  height:28px;
  color:#00893e;
  transition: color .18s ease;
}

.category-card:hover .category-icon svg{
  color:#fff;
}

/* Text */
.category-card-name{
  font-size:18px;
  font-weight:700;
  color:#00331A;
  margin-bottom:4px;
  transition: color .18s ease;
}

.category-card:hover .category-card-name{
  color:#00893e;
}

.category-small-text{
  font-size:12px;
  color:#527A64;
}

/* ==========================
   FULL CARD CLICK OVERLAY
   (Elementor Free – reliable)
   ========================== */

/* Don’t let Elementor HTML widget wrappers interfere */
.category-card .elementor-widget-html,
.category-card .elementor-widget-container{
  position:static !important;
}

/* The actual clickable overlay link */
.category-card a.card-link-overlay{
  position:absolute !important;
  inset:0 !important;
  z-index:9999 !important;

  display:block !important;
  pointer-events:auto !important;

  /* prevent any “delay” feelings */
  transition:none !important;

  background:transparent !important;
  text-indent:-9999px;
}

/* Keyboard focus */
.category-card a.card-link-overlay:focus-visible{
  outline:2px solid #008237;
  outline-offset:4px;
  border-radius:16px;
}

/* ============================================
   HERO MAIN SECTION
   ============================================ */
.soria-hero-main {
  background: linear-gradient(135deg, hsl(80, 30%, 97%) 0%, hsl(60, 20%, 98%) 50%, hsl(145, 25%, 96%) 100%);
  padding: 28px 0 28px;
  position: relative;
}

/* Hero Headline */
.soria-hero-title {
  font-size: 28px !important;
  font-weight: 700;
  line-height: 1.1;
  color: #00331A;
}

.soria-hero-title .primary {
  color: #00893e;
}

@media (min-width: 640px) {
 .soria-hero-main {
    padding: 36px 0 !important;
  }
  .soria-hero-title {
    font-size: 36px !important;
  }
}

@media (min-width: 1024px) {
  .soria-hero-title {
    font-size: 46px !important;
  }
}

/* Hero Description */
.soria-hero-description {
  color: #527A64;
  font-size: 16px;
  line-height: 1.6;
  max-width: 448px;
}

@media (min-width: 1024px) {
  .soria-hero-description {
    font-size: 18px;
  }
}

/* Divider – Hero capsule shadow */
.hero-capsule img {
  filter:
    drop-shadow(0 8px 16px rgba(0, 0, 0, 0.12))
    drop-shadow(0 2px 6px rgba(0, 0, 0, 0.08));
}

/* HERO CAPSULE – scale ONLY the image */
.hero-capsule img{
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.hero-capsule:hover img{
  transform: scale(1.04);
}


/* =========================
   TRUST BADGES – SINGLE SOURCE OF TRUTH
   ========================= */

/* ===== BASE BADGE (ALL) ===== */
.soria-trust-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 16px;

  border-radius:9999px;
  border:1px solid hsla(150,10%,88%,0.6);
  background-color:hsla(0,0%,100%,0.75);
  backdrop-filter:blur(8px);

  font-size:14px;
  font-weight:500;
  color:#00331A;
  line-height:1;
}

/* Icons – base */
.soria-trust-badge svg,
.soria-trust-badge i{
  width:16px;
  height:16px;
  color:#00893e;
  flex-shrink:0;
}

/* =========================
   TRUST CHIPS CONTAINER (RIGHT COLUMN)
   ========================= */

.soria-trust-chips{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
}

@media (min-width:640px){
  .soria-trust-chips{
    gap:12px;
  }
}

/* ===== BADGES INSIDE CHIPS ===== */
.soria-trust-chips .soria-trust-badge{
  padding:6px 12px;
  gap:6px;
  font-size:12px;
  color:hsl(150,30%,15%);
  background-color:hsla(0,0%,100%,0.8);
  transition:border-color 0.2s ease;
}

.soria-trust-chips .soria-trust-badge:hover{
  border-color:hsla(153,100%,27%,0.5);
}

/* Smaller icons on mobile for chips */
.soria-trust-chips .soria-trust-badge svg,
.soria-trust-chips .soria-trust-badge i{
  width:14px;
  height:14px;
}

/* Scale up chips on >=640px */
@media (min-width:640px){
  .soria-trust-chips .soria-trust-badge{
    padding:8px 16px;
    gap:8px;
    font-size:14px;
  }

  .soria-trust-chips .soria-trust-badge svg,
  .soria-trust-chips .soria-trust-badge i{
    width:16px;
    height:16px;
  }
}

/* ====== HERO MAIN STATS – responsive + separators === */

/* Parent */
.soria-hero-stats{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  justify-content:space-between !important;
  align-items:flex-start !important;
  gap:0 !important;                /* IMPORTANT: we will space via padding */
  max-width:100% !important;
  padding-top:18px !important;
  border-top:1px solid hsla(150,10%,88%,0.4) !important;
}

/* Each stat */
.soria-hero-stats .soria-hero-stat{
  position:relative;
  flex:1 1 0 !important;
  min-width:0 !important;

  padding:0 18px !important;      /* spacing between items */
}

/* Remove extra margins from Elementor headings/text widgets */
.soria-hero-stat-value,
.soria-hero-stat-label{
  margin:0 !important;
  padding:0 !important;
}

/* Tighten value-to-label distance */
.soria-hero-stat-value{
  font-size:30px !important;
  font-weight:700 !important;
  line-height:1.05 !important;
  white-space:nowrap;
  margin-bottom:6px !important;   /* control the distance */
}

.soria-hero-stat-label{
  font-size:14px !important;
  line-height:1.25 !important;
  white-space:normal !important;  /* allow wrap on tablet/mobile */
}

/* Vertical separators (like your pic 3) */
.soria-hero-stats .soria-hero-stat:not(:last-child)::after{
  content:"";
  position:absolute;
  top:50%;
  right:0;
  transform:translateY(-50%);
  width:1px;
  height:44px;                    /* tweak */
  background:hsla(150,10%,75%,0.45);
  pointer-events:none;
}

/* =========================
   TABLET
   ========================= */
@media (max-width:1024px){
  .soria-hero-stats .soria-hero-stat{ padding:0 14px !important; }
  .soria-hero-stat-value{ font-size:24px !important; }
  .soria-hero-stat-label{ font-size:13px !important; }
  .soria-hero-stats .soria-hero-stat:not(:last-child)::after{ height:40px; }
}

/* =========================
   MOBILE (3 in a row)
   ========================= */
@media (max-width:640px){
  .soria-hero-stats .soria-hero-stat{ padding:0 10px !important; }
  .soria-hero-stat-value{ font-size:20px !important; }
  .soria-hero-stat-label{ font-size:12px !important; }
  .soria-hero-stats .soria-hero-stat:not(:last-child)::after{ height:34px; }
}

/* =========================
   HERO PRODUCT FEATURE CARDS – FINAL
   Tablet + Mobile = SAME (use tablet values)
   Desktop = your current desktop rules
   ========================= */

/* =========================
   CARD BASE
   ========================= */
.product-card-sage,
.product-card-warm{
  display: flex;
  overflow: hidden;
  border-radius: 24px;
  min-height: 220px;
  padding: 0;
  transition: box-shadow 0.3s ease;
  background: linear-gradient(135deg, hsl(150, 25%, 95%) 0%, hsl(145, 20%, 90%) 100%);
}

.product-card-warm{
  background: linear-gradient(135deg, hsl(40, 50%, 95%) 0%, hsl(35, 40%, 90%) 100%);
}

.product-card-sage:hover,
.product-card-warm:hover{
  box-shadow: 0 10px 25px -5px hsla(153, 100%, 27%, 0.1);
}

/* =========================
   CONTENT (LEFT)
   Tablet + Mobile (tablet values)
   ========================= */
.product-feature-content{
  flex: 0 0 62%;
  width: 62%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 18px 16px;
}

/* =========================
   IMAGE (RIGHT)
   Tablet + Mobile (tablet values)
   ========================= */
.product-feature-image-wrapper{
  flex: 0 0 38%;
  width: 38%;
  padding: 10px;
}

.product-feature-image{
  width: 100%;
  height: 100%;
  border-radius: 16px;
  overflow: hidden;
}

/* Tablet + Mobile */
@media (max-width: 1023px) {
  .product-feature-image {
    border-radius: 16px 0 0 16px;
  }
}

.product-feature-image img{
  width: 155%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: left center;
  transform: scale(1);
  transition: transform 0.5s ease;
}

/* Hover scale (stable) */
.product-card-sage:hover .product-feature-image img,
.product-card-warm:hover .product-feature-image img{
  transform: scale(1.1);
}

/* =========================
   TEXT ELEMENTS
   ========================= */
.product-feature-bestseller,
.product-feature-popular{
  display: inline-flex;
  padding: 4px 12px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 10px;
  width: fit-content;
}

.product-feature-bestseller{
  background: #00893e;
  color: #fff;
	margin-top: 4px;
}

.product-feature-popular{
  background: #006738;
  color: #fff;
	margin-top: 4px;
}

.product-feature-title h3{
  font-size: 24px;
  font-weight: 600;
  color: #00331a;
	line-height:1.2;
  жmargin-bottom: 8px;
}

.product-feature-subtitle{
  font-size: 14px;
  color: hsla(153, 100%, 27%, 0.8);
  font-weight: 500;
	line-height:1.5;
  xmargin-bottom: 15px; !important;
}

.product-feature-description{
  font-size: 14px;
  color: #527A64;
  line-height: 1.4;
  margin-bottom: 8px !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 240px;
}

/* =========================
   MOBILE + TABLET (≤1023px)
   FORCE SAME AS TABLET + STOP STACKING
   ========================= */
@media (max-width: 1023px){

  /* Elementor sometimes forces column/wrap on mobile — override it */
  .product-card-sage,
  .product-card-warm{
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch;
  }

  /* keep your tablet widths exactly */
  .product-feature-content{
    flex: 0 0 62%;
    width: 62%;
  }

  .product-feature-image-wrapper{
    flex: 0 0 38%;
    width: 38%;
    padding-right: 0 !important; /* your existing requirement */
  }
}

/* =========================
   DESKTOP ONLY (≥1024px)
   ========================= */
@media (min-width: 1024px){

  .product-card-sage,
  .product-card-warm{
    min-height: 260px;
  }

  .product-feature-content{
    flex: 1 1 auto;
    width: auto;
    padding: 28px;
  }

  .product-feature-image-wrapper{
    flex: 0 0 45%;
    xwidth: 45%;
    padding: 16px;
  }

  .product-feature-image img{
    width: 100%;
    max-width: 100%;
    object-position: center;
  }

  /* your existing addition */
  .product-feature-image-wrapper{
    width: 100%;
  }
}

/* ============================================
   HOW IT WORKS SECTION
   ============================================ */
.soria-how-it-works {
  padding: 56px 0;
  background-color: hsla(40, 30%, 97%, 0.3);
}

.soria-how-it-works-header {
  text-align: center;
  margin-bottom: 40px;
}

.soria-how-it-works-header .eyebrow {
  color: hsl(147, 20%, 40%);
  font-size: 14px;
  margin-bottom: 8px;
}

.soria-how-it-works-header h2 {
  font-size: 20px;
  font-weight: 600;
  color: hsl(147, 100%, 10%);
}

@media (min-width: 768px) {
  .soria-how-it-works-header h2 {
    font-size: 24px;
  }
}

/* Steps Grid */
.soria-steps-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 768px) {
  .soria-steps-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.soria-step-card {
  position: relative;
  z-index: 10;
  background-color: hsl(0, 0%, 100%);
  border-radius: 16px;
  padding: 20px;
  text-align: center;
  box-shadow: 0 4px 6px -1px hsla(153, 30%, 15%, 0.07), 0 2px 4px -2px hsla(153, 30%, 15%, 0.05);
  transition: all 0.3s ease;
}

.soria-step-card:hover {
  box-shadow: 0 10px 15px -3px hsla(153, 30%, 15%, 0.08), 0 4px 6px -4px hsla(153, 30%, 15%, 0.05);
}

.soria-step-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 16px;
}

.soria-step-number {
  font-size: 24px;
  font-weight: 700;
  color: hsla(153, 100%, 27%, 0.3);
}

.soria-step-icon {
  width: 40px;
  height: 40px;
  background-color: hsla(153, 100%, 27%, 0.1);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
	padding:10px;
}

.soria-step-icon svg {
  width: 20px;
  height: 20px;
  color: #00893e;
}

.soria-step-image {
  height: 112px;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 16px;
}

.soria-step-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.soria-step-title {
  font-size: 16px;
  font-weight: 600;
  color: hsl(147, 100%, 10%);
  margin-bottom: 8px;
}

.soria-step-description {
  color: hsl(147, 20%, 40%);
  font-size: 12px;
  line-height: 1.6;
  margin-bottom: 12px;
}

.soria-step-proofs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.soria-step-proof {
  font-size: 12px;
  color: #00893e;
  background-color: hsla(153, 100%, 27%, 0.1);
  padding: 4px 8px;
  border-radius: 9999px;
}