/* =========================================
HIDE MOBILE ELEMENTS ON DESKTOP
========================================= */

.vl24-mobile-icons,
.vl24-mobile-bar,
.vl24-mobile-menu-full{
  display:none;
}


/* =========================================
TABLET
768–1024
========================================= */
@media (min-width:768px) and (max-width:1024px){

  html,
  body{
    font-size:15px;
  }

  h1{
    font-size:30px;
  }

  h2{
    font-size:24px;
  }

  h3{
    font-size:20px;
  }

  .vl24-product-page--2026{
    padding:24px 20px 56px;
  }

  .vl24-product-hero{
    margin-bottom:32px;
  }

  .vl24-product-hero__grid{
    grid-template-columns:1fr;
    gap:28px;
  }

  .vl24-product-gallery-col{
    position:relative !important;
    top:auto !important;
  }

  .vl24-product-summary-col{
    padding-left:0 !important;
  }

  .vl24-product-title{
    max-width:none;
  }

  .vl24-product-purchase-card,
  .vl24-product-includes-card,
  .vl24-product-tabs-card{
    padding:24px;
  }

  .woocommerce div.product form.cart .woocommerce-variation-add-to-cart,
  .woocommerce-page div.product form.cart .woocommerce-variation-add-to-cart,
  .woocommerce div.product form.cart:not(.variations_form),
  .woocommerce-page div.product form.cart:not(.variations_form){
    flex-wrap:wrap;
    gap:10px;
  }

  .vl24-checkout-grid{
    grid-template-columns:1fr;
    gap:24px;
  }

  .vl24-checkout-side{
    position:relative !important;
    top:auto !important;
  }

  #customer_details,
  .vl24-checkout-side{
    padding:24px;
  }

  .vl24-thankyou-grid{
    grid-template-columns:1fr;
    gap:24px;
  }

  .vl24-btn,
  .single_add_to_cart_button,
  #place_order{
    min-height:52px !important;
    font-size:15px !important;
  }
}

/* =========================================
VL24 MOBILE HEADER — CLEAN BUILD (FINAL)
========================================= */

@media (max-width:767px){

  .vl24-header-top,
.vl24-header-categories,
.vl24-cta-group{
  display:none !important;
}

.vl24-search-desktop{
  display:none !important;
}

  .vl24-header{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:56px;

  z-index:999999; /* 🔥 SUUR NUMBER */

  background:transparent;
  transition:background .25s ease, box-shadow .25s ease;
}

  .vl24-header-main{
  position:relative;
  z-index:1000002;
  height:56px;
  display:flex;
  align-items:center;
}

  .vl24-header-main .vl24-container{
    height:100%;
    display:flex;
    align-items:center; /* 🔥 VERTIKAALNE CENTER */
    justify-content:space-between;
    padding:0 16px;
  }

  /* LOGO */
  .vl24-logo img{
    max-height:24px;
    display:block;
  }

  /* MOBILE ICONS */
  .vl24-mobile-icons{
    display:flex;
    align-items:center;
    gap:14px;
  }

  .vl24-search{
  width:40px;
  height:40px;

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

  flex-shrink:0;
}

.vl24-search svg{
  width:30px !important;
  height:30px !important;

  stroke:#fff;
  stroke-width:2.6;

  display:block;
}

  .vl24-hamburger{
  width:28px;
  height:18px;

  position:relative;
  border:none;
  background:none;
  cursor:pointer;

  display:block;
}

  .vl24-hamburger span{
    position:absolute;
    left:0;
    width:100%;
    height:2px;
    background:#111;
  }

  .vl24-hamburger span:first-child{ top:0; }
  .vl24-hamburger span:last-child{ bottom:0; }

  .vl24-header.is-scrolled .vl24-hamburger span{
    background:#fff;
  }

  /* BODY (SINU SOOV – EI MUUDA) */
  body{
    padding-top:56px !important;
    padding-bottom:64px !important;
  }

  .vl24-header{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:56px;

  z-index:999999;

  background:var(--vl24-green); /* 🔥 ALATI ROHELINE */

  transform:translateY(0);
  transition:transform .28s ease;
}

/* 🔥 PEIDAB HEADERI */
.vl24-header.is-hidden{
  transform:translateY(-100%);
}

  /* =====================================
  BOTTOM BAR — ALATI NÄHTAV
  ===================================== */

  .vl24-mobile-bar{
  position:fixed;
  left:0;
  right:0;
  bottom:0;

  height:52px; 

  background:#f3f4f6; 
  
  display:flex;
  align-items:flex-start;
  justify-content:space-around;

  padding-top:6px;

  z-index:10050;
}

  .vl24-mobile-bar a{
    width:44px;
    height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  .vl24-mobile-bar svg{
    width:22px;
    height:22px;
    stroke:#111;
  }

/* 🔥 FIX header-compact BUG */
.vl24-header.header-compact{
  height:56px !important;
  overflow:visible !important;
}

.vl24-header.header-compact .vl24-header-main{
  transform:none !important;
  opacity:1 !important;
  visibility:visible !important;
}

.vl24-header.header-compact *{
  opacity:1 !important;
  visibility:visible !important;
}

/* BASE */
.vl24-hamburger span{
  position:absolute;
  left:0;
  border-radius:2px;
  background:#111;
  transition:all .3s ease;
}

/* =========================================
HAMBURGER — PERFECT ALIGN
========================================= */

.vl24-hamburger{
  width:28px;
  height:18px;
  position:relative;
}

.vl24-hamburger span{
  position:absolute;
  left:0;
  height:2px;
  background:#fff;
  border-radius:2px;
  transition:all .3s ease;
}

/* ÜHTLASED VAHED + ERINEVAD PIKKUSED */
.vl24-hamburger span:nth-child(1){
  top:2px;
  width:70%;
}

.vl24-hamburger span:nth-child(2){
  top:8px;
  width:100%;
}

.vl24-hamburger span:nth-child(3){
  top:14px;
  width:85%;
}


.vl24-hamburger.active span{
  top:8px;
  width:100%;
}

/* ülemine joon */
.vl24-hamburger.active span:nth-child(1){
  transform:rotate(45deg);
}

/* keskmine peida */
.vl24-hamburger.active span:nth-child(2){
  opacity:0;
}

/* alumine joon */
.vl24-hamburger.active span:nth-child(3){
  transform:rotate(-45deg);
}

/* SCROLLED (valgeks) */
.vl24-header.is-scrolled .vl24-hamburger span{
  background:#fff;
}

/* ainult 2 joont */
.vl24-hamburger.active span:nth-child(1){
  transform:rotate(45deg);
}

.vl24-hamburger.active span:nth-child(2){
  display:none;
}

.vl24-hamburger.active span:nth-child(3){
  transform:rotate(-45deg);
}

.vl24-mobile-menu-inner{
  width:100%;
  max-width:400px;
  text-align:center;
}

.vl24-mobile-menu-list{
  list-style:none;
  padding:0;
  margin:0;
}

.vl24-mobile-menu-list li{
  margin:18px 0;
}

.vl24-mobile-menu-list a{
  font-size:22px;
  font-weight:600;
  color:#111;
  text-decoration:none;
}

.vl24-mobile-icons{
  display:flex;
  align-items:center;
  gap:12px;

  background:none;
  padding:0;
}

.vl24-mobile-icons svg{
  stroke:#fff;
  width:auto;
  height:auto;
}

.vl24-hamburger span{
  background:#fff;
}

}

@media (max-width:767px){

  /* ICON CONTAINER – spacing paremaks */
  .vl24-mobile-icons{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:26px; 
  }

  /* SEARCH – FORCE VALGE */
  .vl24-search svg{
    width:30px !important;
    height:30px !important;

    stroke:#fff !important;
    fill:none !important;
    opacity:1 !important;
  }

  /* HAMBURGER – FORCE VALGE */
  .vl24-hamburger span{
    background:#fff !important;
  }

}

@media (max-width:767px){

  #vl24-search-box{
  position:fixed; /* 🔥 mitte absolute */
  top:56px;
  left:0;
  width:100%;

  background:#fff;
  
  box-shadow:0 10px 30px rgba(0,0,0,0.15);

  z-index:1000002;

  display:none; /* 🔥 KÕIGE OLULISEM */
}

  #vl24-search-box.active{
  display:block;
}

  #vl24-search-box .dgwt-wcas-search-input{
    width:100% !important;
    height:42px !important;
    border-radius:8px !important;
  }

  #vl24-search-box{
  position:fixed;
  top:56px;
  left:0;

  width:100vw;
  max-width:100vw;

  background:#fff;

  padding:12px 0;
  box-shadow:0 10px 30px rgba(0,0,0,0.15);

  z-index:1000002;

  display:none;
  overflow:hidden;
}

#vl24-search-box.active{
  display:block;
}

#vl24-search-box .dgwt-wcas-search-wrapp{
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
  padding:0 16px !important;
  box-sizing:border-box;
}

#vl24-search-box .dgwt-wcas-search-input{
  width:100% !important;
  height:46px !important;

  border-radius:8px !important;
  border:1px solid rgba(0,0,0,0.15) !important;

  font-size:16px !important;
}

.dgwt-wcas-suggestions-wrapp{
  width:100vw !important;
  max-width:100vw !important;

  left:0 !important;
  right:0 !important;

  margin:0 !important;
  border-radius:0 !important;

  box-shadow:none !important;
}

.dgwt-wcas-inner{
  max-width:100% !important;
  width:100% !important;
  box-sizing:border-box;
}

}

@media (max-width:767px){

  .vl24-search{
  background:none !important;
}

.vl24-search:active{
  background:none !important;
}

.vl24-search svg{
  pointer-events:none;
}

.vl24-header-main{
  position:relative;
}

}

@media (max-width:767px){

  /* search icon – alati valge */
  .vl24-search svg,
  .vl24-search svg *{
    stroke:#fff !important;
    color:#fff !important;
  }

  /* kui search active */
  .vl24-search.active svg,
  .vl24-search.active svg *{
    stroke:#fff !important;
    color:#fff !important;
  }

  /* kui fibosearch avatud */
  body.dgwt-wcas-open .vl24-search svg,
  body.dgwt-wcas-open .vl24-search svg *{
    stroke:#fff !important;
    color:#fff !important;
  }

}


@media (max-width:767px){

  .vl24-hamburger.active{
  position:relative;
  z-index:1000003;
}

.vl24-hamburger.active span{
  background:#fff !important;
}

}

@media (max-width:767px){

  /* 🔥 KUI MENU AVATUD → HEADER ROHELINE */
  .vl24-mobile-menu-full.active ~ .vl24-header,
  .vl24-header.menu-open{
    background:var(--vl24-green) !important;
    box-shadow:0 10px 30px rgba(0,0,0,0.16);
  }

  #vl24-search-box .dgwt-wcas-search-input{
  border:none !important;
  box-shadow:none !important;
  outline:none !important;

  background:#f3f4f6;
  border-radius:10px;
  padding-left:44px;
}

/* =========================================
BOTTOM BAR ICON BACKGROUNDS
========================================= */

/* üldine icon style */
.vl24-mobile-bar a{
  width:44px;
  height:44px;

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

  border-radius:6px;
}

/* 🔥 ainult 2 ikooni saavad rohelise tausta */
.vl24-mobile-bar a.vl24-mobile-menu,
.vl24-mobile-bar a.vl24-mobile-cart{
  background:var(--vl24-green);
  box-shadow:0 8px 18px rgba(0,0,0,0.2);
}

/* ikoonid valgeks */
.vl24-mobile-bar a.vl24-mobile-menu svg,
.vl24-mobile-bar a.vl24-mobile-cart svg{
  stroke:#fff !important;
}

/* IKONID */
.vl24-mobile-bar a{
  width:44px;
  height:44px;

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

  border-radius:6px;

  position:relative;
  top:-14px; /* 🔥 TÕSTAB ÜLES */
}

/* ROHELISED */
.vl24-mobile-bar a.vl24-mobile-menu,
.vl24-mobile-bar a.vl24-mobile-cart{
  background:var(--vl24-green);
  box-shadow:0 10px 20px rgba(0,0,0,0.22);
}

/* VALGED IKONID */
.vl24-mobile-bar a.vl24-mobile-menu svg,
.vl24-mobile-bar a.vl24-mobile-cart svg{
  stroke:#fff !important;
}

/* =========================================
CENTER ICON — INVISIBLE BOX (SAME BG)
========================================= */

.vl24-mobile-bar a:nth-child(2){
  width:104px;
  height:44px;

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

  border-radius:6px;

  position:relative;
  top:-14px;

  background:#f3f4f6; /* 🔥 sama mis bar */
  box-shadow:none !important;
  border:none !important;
}

/* ikoon */
.vl24-mobile-bar a:nth-child(2) svg{
  stroke:#111;
}

}


@media (min-width:768px) and (max-width:1024px){

  /* =========================================
  HEADER MAIN GRID — PRO LAYOUT
  ========================================= */

  .vl24-header-main .vl24-container{
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:16px;
  }

  /* LOGO */
  .vl24-logo{
    grid-column:1;
  }

  /* SEARCH */
  .vl24-search-desktop{
    grid-column:2;
    width:100%;
  }

  .vl24-search-desktop input{
    width:100% !important;
  }

  /* CTA */
  .vl24-cta-group{
    grid-column:3;
    flex-wrap:nowrap;
    gap:8px;
  }

  .vl24-cta-group .vl24-btn{
    padding:0 14px;
    font-size:14px;
    height:40px;
  }

  /* =========================================
  CATEGORY BAR FIX
  ========================================= */

  .vl24-header-categories .vl24-container{
    display:flex !important;
    align-items:center;
    overflow:hidden;
  }

  .vl24-cat-menu{
    display:flex;
    gap:20px;
    overflow-x:auto;
    white-space:nowrap;
    padding:12px 0;
  }

  .vl24-cat-menu li{
    flex:0 0 auto;
  }

  /* =========================================
  TOP BAR FIX
  ========================================= */

  .vl24-header-top .vl24-container{
    flex-wrap:wrap;
    gap:8px;
  }

  .vl24-top-menu-list{
    flex-wrap:wrap;
    gap:10px;
  }

  .vl24-top-right{
    margin-left:auto;
  }

  

}


@media (min-width:768px) and (max-width:1024px){

  .vl24-header-main{
    border-bottom:none !important;
  }

  .vl24-header-categories{
    box-shadow:none !important;
  }

}

/* =========================================
TABLET HEADER — FORCE FIX (WORKING)
========================================= */
@media (min-width:768px) and (max-width:1024px){

  /* =============================
  HEADER GRID
  ============================= */
  .vl24-header-main .vl24-container{
    display:grid !important;
    grid-template-columns:auto 1fr auto !important;
    align-items:center !important;
    gap:12px !important;
  }

  /* =============================
  SEARCH SMALLER (FORCE)
  ============================= */
  .vl24-search-desktop{
    grid-column:2;
    width:100%;
  }

  .vl24-search-desktop input{
    height:36px !important;
    font-size:13px !important;
    padding:0 12px 0 36px !important;
    border-radius:6px !important;
  }

  .vl24-search svg{
    width:14px !important;
    height:14px !important;
  }

  /* =============================
  BUTTONS SMALLER (FORCE)
  ============================= */
  .vl24-cta-group{
    grid-column:3;
    display:flex !important;
    gap:6px !important;
  }

  .vl24-cta-group .vl24-btn{
    height:36px !important;
    padding:0 10px !important;
    font-size:12px !important;
    border-radius:6px !important;
    white-space:nowrap;
  }

  /* =============================
  LOGO FIX
  ============================= */
  .vl24-logo{
    font-size:18px !important;
  }

  /* =============================
  REMOVE EXTRA HEIGHT / AIR
  ============================= */
  .vl24-header-main .vl24-container{
    padding-top:10px !important;
    padding-bottom:10px !important;
  }

}

/* =========================================
IPAD MINI CAT MENU — SHOW NORMAL MENU INSIDE GREEN BAR
========================================= */
@media (min-width:768px) and (max-width:900px){

  /* roheline riba ise */
  .vl24-header-categories{
    display:block !important;
    height:44px !important;
    min-height:44px !important;
    overflow:hidden !important;
    background:var(--vl24-green) !important;
  }

  .vl24-header-categories .vl24-container{
    display:block !important;
    height:44px !important;
    max-width:100% !important;
    padding:0 20px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }

  .vl24-header-categories .vl24-container::-webkit-scrollbar{
    display:none;
  }

  /* peida Max Mega Menu hamburger ainult iPad mini vaates */
  .mega-menu-toggle,
  .mega-toggle-block,
  .mega-menu-wrap .mega-menu-toggle{
    display:none !important;
  }

  /* pane plugin menu käituma nagu tavaline horisontaalne cat menu */
  .mega-menu-wrap{
    display:block !important;
    width:max-content !important;
    min-width:100% !important;
    background:transparent !important;
  }

  .mega-menu-wrap .mega-menu{
    display:flex !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:24px !important;

    width:max-content !important;
    min-width:100% !important;
    height:44px !important;
    max-height:none !important;

    margin:0 !important;
    padding:0 !important;

    overflow:visible !important;
    visibility:visible !important;
    opacity:1 !important;

    position:relative !important;
    left:auto !important;
    top:auto !important;
    background:transparent !important;
  }

  .mega-menu-wrap .mega-menu > li{
    display:flex !important;
    flex:0 0 auto !important;
    align-items:center !important;
    height:44px !important;
    margin:0 !important;
    padding:0 !important;
    background:transparent !important;
    border:none !important;
  }

  .mega-menu-wrap .mega-menu > li > a{
    display:inline-flex !important;
    align-items:center !important;
    height:44px !important;
    padding:0 !important;
    margin:0 !important;

    font-size:15px !important;
    font-weight:600 !important;
    line-height:1 !important;
    white-space:nowrap !important;

    color:#fff !important;
    background:transparent !important;
    border:none !important;
    box-shadow:none !important;
    text-decoration:none !important;
  }

  .mega-menu-wrap .mega-menu > li > a:hover,
  .mega-menu-wrap .mega-menu > li.mega-current-menu-item > a,
  .mega-menu-wrap .mega-menu > li.mega-current-menu-ancestor > a{
    color:#fff !important;
    background:transparent !important;
    opacity:.9;
  }

  /* eemalda plugini nooled / taustad kui need rikuvad vaadet */
  .mega-menu-wrap .mega-menu > li > a::before,
  .mega-menu-wrap .mega-menu > li > a::after{
    display:none !important;
  }

  /* kui sul on vana enda .vl24-cat-menu ka olemas, ära lase sel segada */
  .vl24-cat-menu{
    display:none !important;
  }
}

/* =========================================
TABLET MENU — PERFECT CENTER (FORCE)
========================================= */
@media (min-width:768px) and (max-width:1024px){

  /* 🔥 ROHELINE BAR */
  .vl24-header-categories{
    height:44px !important;
  }

  .vl24-header-categories .vl24-container{
    height:44px !important;
    display:flex !important;
    align-items:center !important;
  }

  /* 🔥 UL */
  .mega-menu-wrap .mega-menu{
    height:44px !important;
    display:flex !important;
    align-items:center !important;
  }

  /* 🔥 LI */
  .mega-menu-wrap .mega-menu > li{
    height:44px !important;
    display:flex !important;
    align-items:center !important;
  }

  /* 🔥 SEE ON KÕIGE OLULISEM */
  .mega-menu-wrap .mega-menu > li > a{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    height:44px !important;
    line-height:44px !important; /* 🔥 force vertical center */

    padding:0 12px !important;
    margin:0 !important;

    box-sizing:border-box !important;
  }

  /* =========================================
MEGA MENU CLICK FIX
========================================= */

/* 🔥 ÄRA LUKUSTA UL */
.mega-menu-wrap .mega-menu{
  height:auto !important;
  min-height:44px !important;
}

/* 🔥 LI peab olema clickable */
.mega-menu-wrap .mega-menu > li{
  position:relative;
}

/* 🔥 DROPDOWN peab olema lubatud */
.mega-menu-wrap .mega-sub-menu{
  pointer-events:auto !important;
}

/* 🔥 oluline – ära kasuta overflow hidden */
.vl24-header-categories{
  overflow:visible !important;
}

}

@media (min-width:768px) and (max-width:1024px){

  /* 🔥 KOGU MENU RIDA CENTER */
  .vl24-header-categories .mega-menu-wrap .mega-menu{
    display:flex !important;
    align-items:center !important; /* 🔥 SEE PARANDAB KÕIK */
    height:44px !important;
  }

  /* 🔥 LI ka center */
  .vl24-header-categories .mega-menu-wrap .mega-menu > li{
    display:flex !important;
    align-items:center !important;
    height:44px !important;
  }

  /* 🔥 SALE NUPP — PUHAS */
  .vl24-header-categories .mega-menu-wrap .mega-menu > li.menu-sale > a{
    padding:6px 14px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    line-height:1 !important;
  }

}

/* =========================================
TABLET — DROPDOWN FLUSH TO MENU BAR
========================================= */
@media (min-width:768px) and (max-width:1024px){

  /* 🔥 dropdown nulli */
  .vl24-header-categories .mega-menu-wrap .mega-sub-menu{
    top:100% !important;       /* kohe menüü alla */
    margin-top:0 !important;   /* eemaldab vahe */
    padding-top:20px !important;
  }

  /* 🔥 kui plugin paneb extra spacing */
  .vl24-header-categories .mega-menu-wrap .mega-menu > li{
    margin-bottom:0 !important;
    padding-bottom:0 !important;
  }

  
/* BOTTOM HAMBURGER ICON ANIMATION */
.vl24-bottom-menu-trigger{
  position:relative;
}

}

@media (max-width:767px){

  .vl24-mobile-menu-full .mega-menu{
    display:block !important;
  }

  .vl24-mobile-menu-full .vl24-mobile-cat-menu{
  display:block !important;
}

.vl24-mobile-menu-full .vl24-mobile-cat-menu > li{
  display:block !important;
  width:100%;
}

.vl24-mobile-menu-full .vl24-mobile-cat-menu > li > a{
  display:block !important;
  padding:14px 20px !important;
  font-size:18px !important;
  color:#111 !important;
}

.vl24-mobile-menu-full .vl24-mobile-cat-menu .mega-sub-menu{
  display:block !important;
  position:static !important;
  padding-left:16px !important;
}

}

@media (max-width:767px){

  .vl24-bottom-menu-trigger{
  width:44px;
  height:44px;

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

  position:relative;
}

/* ALGASEND */
.vl24-bottom-menu-trigger span:nth-child(1){
  transform:translate(-50%, -5px);
}

.vl24-bottom-menu-trigger span:nth-child(2){
  transform:translate(-50%, 0);
}

.vl24-bottom-menu-trigger span:nth-child(3){
  transform:translate(-50%, 5px);
}

/* ACTIVE → X */
.vl24-bottom-menu-trigger.active span:nth-child(1){
  transform:translate(-50%, 0) rotate(45deg);
}

.vl24-bottom-menu-trigger.active span:nth-child(2){
  opacity:0;
}

.vl24-bottom-menu-trigger.active span:nth-child(3){
  transform:translate(-50%, 0) rotate(-45deg);
}

  .vl24-bottom-menu-trigger{
  position:relative;
  z-index:1000005; 
}

}

@media (max-width:767px){

  /* 🔥 TÕSTA ALUMINE BAR MENU PEALE */
  .vl24-mobile-bar{
    z-index:1000005 !important;
  }

  /* 🔥 TÕSTA X IKON VEEL KÕRGEMALE */
  .vl24-bottom-menu-trigger{
    z-index:1000006 !important;
  }

}

/* =========================================
3x3 DOT MENU → CLEAN MORPH X
========================================= */

.vl24-bottom-menu-trigger{
  width:44px;
  height:44px;
  position:relative;
}

/* DOT BASE */
.vl24-bottom-menu-trigger span{
  position:absolute;

  width:4px;
  height:4px;

  background:#fff;
  border-radius:50%;

  left:50%;
  top:50%;

  transform:translate(-50%, -50%);

  transition:
    transform .4s cubic-bezier(.4,0,.2,1),
    width .35s ease,
    height .35s ease,
    opacity .25s ease;
}

/* =========================================
PERFECT CENTERED 3x3 GRID
========================================= */

/* ROW 1 */
.vl24-bottom-menu-trigger span:nth-child(1){
  transform:translate(calc(-50% - 6px), calc(-50% - 6px));
}
.vl24-bottom-menu-trigger span:nth-child(2){
  transform:translate(-50%, calc(-50% - 6px));
}
.vl24-bottom-menu-trigger span:nth-child(3){
  transform:translate(calc(-50% + 6px), calc(-50% - 6px));
}

/* ROW 2 */
.vl24-bottom-menu-trigger span:nth-child(4){
  transform:translate(calc(-50% - 6px), -50%);
}
.vl24-bottom-menu-trigger span:nth-child(5){
  transform:translate(-50%, -50%);
}
.vl24-bottom-menu-trigger span:nth-child(6){
  transform:translate(calc(-50% + 6px), -50%);
}

/* ROW 3 */
.vl24-bottom-menu-trigger span:nth-child(7){
  transform:translate(calc(-50% - 6px), calc(-50% + 6px));
}
.vl24-bottom-menu-trigger span:nth-child(8){
  transform:translate(-50%, calc(-50% + 6px));
}
.vl24-bottom-menu-trigger span:nth-child(9){
  transform:translate(calc(-50% + 6px), calc(-50% + 6px));
}

/* =========================================
ACTIVE → CLEAN X (NO DOTS)
========================================= */

/* 🔥 KÕIK DOTID KOHE PEITU */
.vl24-bottom-menu-trigger.active span{
  opacity:0 !important;
  width:3px;
  height:3px;
}

/* 🔥 X JOON 1 */
.vl24-bottom-menu-trigger.active span:nth-child(5){
  opacity:1 !important;

  width:18px;
  height:2px;
  border-radius:2px;

  transform:translate(-50%, -50%) rotate(45deg);
}

/* 🔥 X JOON 2 */
.vl24-bottom-menu-trigger.active span:nth-child(2){
  opacity:1 !important;

  width:18px;
  height:2px;
  border-radius:2px;

  transform:translate(-50%, -50%) rotate(-45deg);
}

.vl24-mobile-cat-menu-wrap{
  position:fixed !important;
  top:56px !important;
  left:0 !important;
  right:0 !important;
  bottom:52px !important;

  width:auto !important;
  height:auto !important;

  background:#fff !important;
  z-index:1000007 !important;

  display:none !important;
  overflow-y:auto !important;
  -webkit-overflow-scrolling:touch;

  padding:24px 20px 32px !important;
  box-sizing:border-box !important;
}

.vl24-mobile-cat-menu-wrap.active{
  display:block !important;
}

/* =========================================
GLOBAL SCROLLBAR
========================================= */

html{
  scrollbar-color: #24965a #f3f4f6;
  scrollbar-width: thin;
}

html::-webkit-scrollbar{
  width:12px;
}

html::-webkit-scrollbar-track{
  background:#f3f4f6;
}

html::-webkit-scrollbar-thumb{
  background:#24965a;
  border-radius:999px;
  border:2px solid #f3f4f6;
}

html::-webkit-scrollbar-thumb:hover{
  background:#15803d;
}

@media (max-width:767px){

  .vl24-product-summary-col{
    padding-left:0 !important;
    padding-right:0 !important;
  }

  .vl24-product-purchase-card{
    margin-left:0 !important;
    margin-right:0 !important;
    width:100%;
  }

}

/* =========================================
PRODUCT MOBILE FIX — QTY + TABS + DUPLICATE TITLES
========================================= */

/* 1) TABS ACTIVE LINE — GLOBAL, kasuta SOLID rohelist, mitte gradienti */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce-page div.product .woocommerce-tabs ul.tabs li.active a{
  box-shadow: inset 0 -2px 0 var(--vl24-green-dark) !important;
}

/* 2) EEMALDA TAB SISU TOPPELT PEALKIRJAD — GLOBAL */
.woocommerce-Tabs-panel > h1:first-child,
.woocommerce-Tabs-panel > h2:first-child,
.woocommerce-Tabs-panel > h3:first-child{
  display:none !important;
}

@media (max-width:767px){

  /* kogu review section spacing */
  .vl24-reviews-section{
    margin-top:30px !important;
  }

  /* peamised kastid */
  #reviews,
  #reviews #comments,
  #reviews #respond,
  #review_form_wrapper{
    padding:10px !important;
    margin-bottom:12px !important;
  }

  /* iga review kaart */
  #reviews .commentlist li{
    margin-bottom:10px !important;
    padding:14px !important;
  }

  /* "One response to..." kast */
  #reviews h2{
    margin-bottom:10px !important;
  }

  #reviews h3{
    margin-bottom:8px !important;
  }

  /* form spacing */
  #commentform{
    gap:12px !important;
  }

}

@media (max-width:767px){

  /* =========================================
  FIX — GET A QUOTE ALATI ALL REAL (MOBILE ONLY)
  ========================================== */

  .woocommerce div.product form.cart,
  .woocommerce-page div.product form.cart{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-items:stretch;
  }

  /* qty */
  .woocommerce div.product form.cart .quantity{
    flex:0 0 120px;
  }

  /* add to cart */
  .woocommerce div.product form.cart .single_add_to_cart_button{
    flex:1;
    min-width:0;
  }

  /* 🔥 SEE ON KÕIGE OLULISEM */
  .vl24-quote-btn{
    flex:0 0 100% !important;
    width:100% !important;
    margin-top:10px !important;
  }

}



@media (max-width:767px){

  .vl24-gallery-main{
    aspect-ratio:1/1; 
    overflow:hidden;
  }

  .vl24-gallery-stage{
    position:absolute;
    inset:0;
  }

  .vl24-gallery-main img,
  .vl24-gallery-main-image{
    width:100%;
    height:100%;
    object-fit:cover;
  }

}

.vl24-gallery-nav{
  background:#fff !important;
  opacity:1 !important;
}



@media (max-width:767px){

  .vl24-gallery-nav{
    display:none !important;
  }

}

/* =========================================
FIX MOBILE OVERFLOW — FINAL
========================================= */

@media (max-width:767px){

  html, body{
    overflow-x:hidden !important;
  }

  .vl24-product-page,
  .vl24-product-hero,
  .vl24-product-hero__grid{
    overflow-x:hidden;
  }

  /* 🔥 TAPAB PÕHJUSE */
  .vl24-gallery-nav--prev,
  .vl24-gallery-nav--next,
  .vl24-gallery-thumbs-nav--prev,
  .vl24-gallery-thumbs-nav--next{
    left:8px !important;
    right:8px !important;
  }

}

/* =========================================
MOBILE FIX (REAL HEIGHT)
========================================= */

@media (max-width:1024px){

  .home .vl24-hero,
  .home .et_pb_section:first-of-type{
    height:calc(100dvh - var(--vl24-header-h));
    min-height:calc(100dvh - var(--vl24-header-h));
  }

}

@media(min-width:768px){

  body.home .hero-inner{
    padding-left:60px; /* liigutab paremale */
  }

}

@media(min-width:768px){

  body.home .hero-inner{
    padding-left:60px; /* liigutab paremale */
  }

}

@media(max-width:768px){

  body.home .hero-inner{
    padding-bottom:calc(100px + env(safe-area-inset-bottom)) !important;
  }

}

@media(max-width:768px){

  /* vähenda üldist spacingut */
  body.home .hero-inner{
    gap:10px; /* enne 18px → nüüd kompaktne */
  }

  /* pealkiri kompaktsem */
  body.home .hero-title{
    font-size:24px;
    line-height:1.15;
    letter-spacing:-0.01em;
  }

  /* tekst kompaktsem */
  body.home .hero-text{
    font-size:14px;
    line-height:1.5;
    margin-top:6px;
    max-width:100%;
  }

  /* CTA lähemale tekstile */
  body.home .hero-actions{
    margin-top:8px;
    gap:10px;
  }

}

@media(max-width:768px){

  /* vähenda vahe teksti ja CTA vahel */
  body.home .hero-inner{
    gap:6px !important; /* enne 18px */
  }

  /* vähenda texti enda alumist vahet */
  body.home .hero-text{
    margin-bottom:0 !important;
  }

}



@media(max-width:768px){

  /* vähenda üldist spacingut */
  body.home .hero-inner{
    gap:10px; /* enne 18px → nüüd kompaktne */
  }

  /* pealkiri kompaktsem */
  body.home .hero-title{
    font-size:24px;
    line-height:1.15;
    letter-spacing:-0.01em;
  }

  /* tekst kompaktsem */
  body.home .hero-text{
    font-size:14px;
    line-height:1.5;
    margin-top:6px;
    max-width:100%;
  }

  /* CTA lähemale tekstile */
  body.home .hero-actions{
    margin-top:8px;
    gap:10px;
  }

}

@media(max-width:768px){

  /* vähenda vahe teksti ja CTA vahel */
  body.home .hero-inner{
    gap:6px !important; /* enne 18px */
  }

  /* vähenda texti enda alumist vahet */
  body.home .hero-text{
    margin-bottom:0 !important;
  }

}

@media (max-width:1024px){

  body.home .hero{
    height:calc(100dvh - var(--header-h)) !important;
    min-height:calc(100dvh - var(--header-h)) !important;
  }

}

@media (max-width:767px){

  .vl24-header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:56px;

    background:var(--vl24-green);
    z-index:999999;

    overflow:hidden;
  }

  /* 🔥 SEE ON SEE MIS SUL PUUDUS */
  .vl24-header::before{
    content:"";
    position:absolute;
    inset:0;

    pointer-events:none;
    z-index:1;

    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 220'%3E%3Cg fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 180 C120 110, 180 150, 280 95 S470 35, 620 92 S790 155, 900 80' stroke-width='2.2' opacity='0.34'/%3E%3Cpath d='M40 210 C150 145, 250 185, 360 120 S560 55, 700 120 S830 185, 930 130' stroke-width='1.8' opacity='0.28'/%3E%3Cpath d='M95 130 C120 118, 135 98, 145 72' stroke-width='1.5' opacity='0.42'/%3E%3Cpath d='M132 108 C150 95, 160 78, 165 55' stroke-width='1.3' opacity='0.35'/%3E%3Cpath d='M250 120 C270 103, 285 82, 296 56' stroke-width='1.5' opacity='0.40'/%3E%3Cpath d='M412 84 C426 68, 438 48, 445 26' stroke-width='1.4' opacity='0.36'/%3E%3Cpath d='M560 96 C576 78, 588 55, 594 28' stroke-width='1.5' opacity='0.40'/%3E%3Cpath d='M715 118 C734 100, 748 76, 758 45' stroke-width='1.5' opacity='0.40'/%3E%3C/g%3E%3C/svg%3E");

    background-repeat:repeat;
    background-size:600px auto;
    background-position:center;

    opacity:0.45;
  }

  /* 🔥 oluline – sisu ette */
  .vl24-header > *{
    position:relative;
    z-index:2;
  }

}


@media (max-width:767px){

  .vl24-logo a{
    font-weight:900 !important;
    font-size:22px !important;
    letter-spacing:-0.03em;

    color:#fff !important;

    /* 🔥 kerge nähtavus */
    text-shadow:0 2px 6px rgba(0,0,0,0.25);
  }

}

@media (max-width:767px){

  body.home::before{
    content:"";
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:140px; /* 🔥 katab header + scroll ala */

    background:var(--vl24-green);

    z-index:-1;
  }

}

@media (max-width:767px){

  .vl24-header{
    overflow:visible !important;
  }

  .vl24-mobile-menu-full{
    position:fixed !important;
    top:56px !important;
    left:0 !important;
    right:0 !important;
    bottom:52px !important;

    display:none !important;
    width:auto !important;
    height:auto !important;

    background:#fff !important;
    z-index:1000010 !important;

    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;

    padding:24px 20px 32px !important;
    box-sizing:border-box !important;
  }

  .vl24-mobile-menu-full.active{
    display:block !important;
  }

  .vl24-mobile-menu-inner{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    text-align:left !important;
  }

  .vl24-mobile-main-menu{
    display:block !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    list-style:none !important;
  }

  .vl24-mobile-main-menu > li{
    display:block !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
  }

  .vl24-mobile-main-menu > li > a{
    display:block !important;
    width:100% !important;
    padding:16px 0 !important;
    font-size:22px !important;
    line-height:1.35 !important;
    font-weight:600 !important;
    color:#111 !important;
    text-decoration:none !important;
    border-bottom:1px solid rgba(0,0,0,0.08) !important;
  }

}

@media (max-width:767px){

  .vl24-mobile-menu-full{
    position:fixed !important;

    top:56px !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;

    background:#fff !important;

    z-index:2147483647 !important; /* 🔥 MAX */

    display:none !important;

    transform:none !important;
  }

  .vl24-mobile-menu-full.active{
    display:block !important;
  }

}

@media (max-width:767px){

  /* 🔥 kõik mis rikub */
  .vl24-header,
  .vl24-header-main,
  .vl24-header::before{
    transform:none !important;
  }

  /* 🔥 see lõikas menüü ära */
  .vl24-header{
    overflow:visible !important;
  }

}

@media (max-width:767px){

  .vl24-header.menu-open .vl24-search{
    display:none !important;
  }

}

@media (max-width:767px){

  /* TAUST */
  .vl24-mobile-menu-full{
    background:#e5e7eb !important; /* 🔥 tumedam hall */
    padding:16px 14px 24px !important;
  }

  /* WRAP */
  .vl24-mobile-menu-inner{
    display:flex;
    flex-direction:column;
    gap:10px;
  }

  /* 🔥 FIBO SEARCH ÜLEVAL */
  .vl24-mobile-menu-full .dgwt-wcas-search-wrapp{
    display:block !important;

    background:#fff !important;
    border-radius:12px !important;

    padding:10px !important;
    margin-bottom:6px !important;

    box-shadow:0 4px 12px rgba(0,0,0,0.08);
  }

  .vl24-mobile-menu-full .dgwt-wcas-search-input{
    height:42px !important;
    border:none !important;
    background:#f3f4f6 !important;
    border-radius:8px !important;
    font-size:14px !important;
  }

  /* LIST */
  .vl24-mobile-main-menu{
    display:flex !important;
    flex-direction:column;
    gap:10px;
  }

  /* 🔥 CARD */
  .vl24-mobile-main-menu > li > a{
    display:flex !important;
    align-items:center;
    justify-content:space-between;

    padding:14px 14px !important;

    border-radius:8px;

    background:#fff !important;

    color:#111827 !important;
    font-size:15px !important;
    font-weight:600;

    box-shadow:0 6px 14px rgba(0,0,0,0.06);

    transition:all .2s ease;
  }

  /* CLICK EFFECT */
  .vl24-mobile-main-menu > li > a:active{
    transform:scale(0.97);
    background:#f9fafb !important;
  }

  /* 🔥 SUBMENU BOX */
  .vl24-mobile-main-menu .sub-menu,
  .vl24-mobile-main-menu .mega-sub-menu{
    display:none;
    flex-direction:column;
    gap:6px;

    margin-top:6px;
    padding:10px;

    border-radius:8px;

    background:#f9fafb !important;
  }

  /* OPEN */
  .vl24-mobile-main-menu li.open > .sub-menu,
  .vl24-mobile-main-menu li.open > .mega-sub-menu{
    display:flex;
  }

  /* SUB ITEM */
  .vl24-mobile-main-menu .sub-menu li a,
  .vl24-mobile-main-menu .mega-sub-menu li a{
    padding:10px 10px !important;

    font-size:14px !important;
    color:#374151 !important;

    border-radius:6px;
  }

  .vl24-mobile-main-menu .sub-menu li a:active{
    background:#e5e7eb !important;
  }

}

@media (max-width:767px){

  .vl24-mobile-cat-menu-wrap{
    background:#e5e7eb !important;
    padding:16px 14px 24px !important;
  }

  .vl24-mobile-cat-menu-wrap ul{
    list-style:none !important;
    margin:0 !important;
    padding:0 !important;
  }

  .vl24-mobile-cat-menu-wrap li{
    background:#fff !important;
    border-radius:8px !important;
    box-shadow:0 6px 14px rgba(0,0,0,0.06) !important;
    margin-bottom:10px !important;
    overflow:hidden !important;
  }

  .vl24-mobile-cat-menu-wrap li > a{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    padding:14px 44px 14px 14px !important;
    color:#111827 !important;
    font-size:15px !important;
    font-weight:600 !important;
    text-decoration:none !important;
    background:#fff !important;
    box-shadow:none !important;
    position:relative !important;
  }

  .vl24-mobile-cat-menu-wrap li.has-submenu > a::after{
    content:"";
    position:absolute;
    right:16px;
    top:50%;
    width:10px;
    height:10px;
    border-right:2px solid #6b7280;
    border-bottom:2px solid #6b7280;
    transform:translateY(-60%) rotate(45deg);
    transition:transform .25s ease;
  }

  .vl24-mobile-cat-menu-wrap li.open > a::after{
    transform:translateY(-40%) rotate(-135deg);
  }

  /* submenu container = otsene child, mis EI OLE a */
  .vl24-mobile-cat-menu-wrap li > :not(a){
    position:static !important;
    left:auto !important;
    top:auto !important;
    width:100% !important;
    max-width:100% !important;
    z-index:auto !important;

   

    padding:0 14px !important;
    margin:0 !important;

    background:transparent !important;
    box-shadow:none !important;
    border-radius:0 !important;

    transition:height .32s ease, opacity .22s ease;
  }

  .vl24-mobile-cat-menu-wrap li.open > :not(a){
    opacity:1;
  }

  .vl24-mobile-cat-menu-wrap li > :not(a) li{
    background:transparent !important;
    box-shadow:none !important;
    margin:0 !important;
    border-radius:0 !important;
  }

  .vl24-mobile-cat-menu-wrap li > :not(a) a{
    display:block !important;
    padding:8px 0 !important;
    font-size:14px !important;
    color:#374151 !important;
    text-decoration:none !important;
    background:transparent !important;
    box-shadow:none !important;
    border-radius:0 !important;
  }
}

@media (max-width:767px){

  .vl24-mobile-cat-menu-wrap li > ul,
  .vl24-mobile-cat-menu-wrap .mega-sub-menu{
    display:none !important;
    position:static !important;
    width:100% !important;
    background:#f9fafb !important;
    padding:10px 14px !important;
    margin-top:0 !important;
    border-radius:0 0 8px 8px !important;
  }

  .vl24-mobile-cat-menu-wrap li.open > ul,
  .vl24-mobile-cat-menu-wrap li.open > .mega-sub-menu{
    display:block !important;
  }

}

@media (max-width:767px){

  /* SALE item mobile cat menu sees */
  .vl24-mobile-cat-menu-wrap li.menu-sale{
    background:transparent !important;
    box-shadow:none !important;
  }

  .vl24-mobile-cat-menu-wrap li.menu-sale > a{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    padding:14px 16px !important;
    border-radius:8px !important;

    background:linear-gradient(135deg, #ff3b3b, #ff7a00) !important;
    color:#fff !important;
    font-weight:800 !important;
    letter-spacing:0.02em !important;
    text-transform:uppercase !important;

    box-shadow:0 6px 16px rgba(0,0,0,0.25) !important;
  }

  .vl24-mobile-cat-menu-wrap li.menu-sale > a::after{
    display:none !important;
  }

  .vl24-mobile-cat-menu-wrap li.menu-sale > ul,
  .vl24-mobile-cat-menu-wrap li.menu-sale > .mega-sub-menu{
    display:none !important;
  }
}

/* =========================================
MOBILE — FORCE COMPACT VARIATIONS (WORKING)
========================================= */

@media (max-width:767px){

  /* 🔥 kogu variatsioonide blokk */
  .woocommerce div.product form.cart .variations{
    font-size:12px !important;
  }

  /* 🔥 label */
  .woocommerce div.product form.cart .variations label{
    font-size:14px !important;
    margin-bottom:2px !important;
  }

  /* 🔥 VALUE CELL */
  .woocommerce div.product form.cart .variations td.value{
    padding:0 !important;
  }

  /* =========================================
  🔥 PÕHI FIX — kõik swatchid korraga
  ========================================= */

  .woocommerce div.product form.cart .variations td.value .vl24-swatch,
  .woocommerce div.product form.cart .variations td.value .vl24-swatch--button{
    
    height:40px !important;
    min-height:30px !important;

    padding:0 10px !important;

    font-size:14px !important;
    font-weight:500 !important;

    line-height:1 !important;

    border-radius:4px !important;

    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
  }

  /* 🔥 gap väiksemaks */
  .woocommerce div.product form.cart .variations td.value .vl24-swatches{
    gap:4px !important;
  }

}

/* MOBILE SUBMENU FIX */

#vl24-mobile-menu .sub-menu li{
    border:none !important;
    border-bottom:none !important;
    list-style:none !important;
}

#vl24-mobile-menu .sub-menu li a{
    border:none !important;
    border-bottom:none !important;
    text-decoration:none !important;
    background-image:none !important;
}

#vl24-mobile-menu .sub-menu{
    list-style:none !important;
    padding-left:0 !important;
}

#vl24-mobile-menu .sub-menu li::marker{
    display:none !important;
    content:none !important;
}

/* SUBMENU LEFT SPACING */

#vl24-mobile-menu .sub-menu{
    padding-left:18px !important;
}

#vl24-mobile-menu .sub-menu{
    gap:0 !important;
}

#vl24-mobile-menu .sub-menu li{
    margin:0 !important;
    padding:0 !important;
    line-height:1.2 !important;
}

#vl24-mobile-menu .sub-menu li a{
    display:block;
    padding:8px 0 !important;
}

/* =========================================
FIX: FOOTER / CONTENT / CATEGORY COUNT
========================================= */

/* eemaldab suure tühja ala footer/newsletteri pealt */
.site-footer-pro{
  margin-top:0 !important;
}

@media(max-width:767px){
  .site-footer-pro{
    margin-top:0 !important;
  }
}

/* content section ei tohi mobiilis roheliseks minna */
.vl24-content-section{
  position:relative !important;
  z-index:2 !important;
  background:#fff !important;
}

/* kui content section on avalehel kategooriatega, jääb ka valge */
body.home .vl24-content-section{
  background:#fff !important;
}

/* roheline fixed taust ainult hero taha, mitte kogu page scrolli alla */
@media(max-width:767px){
  body.home::before{
    display:none !important;
    content:none !important;
  }
}

/* kategooria overlay + number tagasi ilusti kasti */
.vl24-cat-overlay{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:8px !important;
  overflow:hidden !important;
}

.vl24-cat-title{
  min-width:0 !important;
  flex:1 1 auto !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

.vl24-cat-count{
  flex:0 0 30px !important;
  width:30px !important;
  min-width:30px !important;
  height:30px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  line-height:1 !important;
  border-radius:999px !important;
  box-sizing:border-box !important;
}

@media(max-width:600px){
  .vl24-cat-overlay{
    padding:7px 8px !important;
    gap:6px !important;
  }

  .vl24-cat-title{
    font-size:12px !important;
  }

  .vl24-cat-count{
    width:26px !important;
    min-width:26px !important;
    height:26px !important;
    font-size:11px !important;
  }
}

@media (max-width:767px){

  /* CONTENT SECTION */
  body.home .vl24-content-container{
    width:calc(100% - 20px) !important;
    max-width:none !important;

    padding-left:0 !important;
    padding-right:0 !important;

    margin-left:auto !important;
    margin-right:auto !important;
  }

  /* CATEGORY GRID */
  body.home .vl24-cat-grid{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;

    gap:8px !important;

    width:100% !important;
    max-width:none !important;

    padding:0 !important;
    margin:0 !important;
  }

  /* CATEGORY CARD */
  body.home .vl24-cat-card{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
  }

  /* PRODUCTS GRID */
  body.home .vl24-shortcode-products-grid{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;

    gap:8px !important;

    width:100% !important;
    max-width:none !important;

    padding:0 !important;
    margin:0 !important;
  }

}

@media(max-width:767px){

  body.home .vl24-cat-title{
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:unset !important;

    display:-webkit-box !important;
    -webkit-line-clamp:2 !important;
    -webkit-box-orient:vertical !important;

    line-height:1.2 !important;
  }

}

/* =========================================
MOBILE — PRODUCT OPTIONS COMPACT FINAL
Woo variations + Commerce Engine fields
ONLY MOBILE
========================================= */

@media (max-width:767px){

  /* Product purchase card spacing */
  .vl24-product-purchase-card{
    padding:16px !important;
  }

  /* Woo variations wrapper */
  .woocommerce div.product form.cart .variations{
    margin:0 0 10px !important;
  }

  .woocommerce div.product form.cart .variations tr{
    margin-bottom:10px !important;
  }

  .woocommerce div.product form.cart .variations td.label{
    margin:0 0 5px !important;
  }

  .woocommerce div.product form.cart .variations td.label label{
    font-size:13px !important;
    line-height:1.2 !important;
    font-weight:700 !important;
    margin:0 !important;
  }

  .woocommerce div.product form.cart .variations td.value,
  .woocommerce div.product form.cart .variations td.value .vl24-swatches{
    gap:6px !important;
  }

  /* CE wrapper */
  .ce-configurator{
    margin:8px 0 12px !important;
  }

  .ce-configurator-section{
    margin:0 0 10px !important;
  }

  .ce-configurator-field{
    margin-bottom:10px !important;
  }

  .ce-configurator-field label{
    font-size:13px !important;
    line-height:1.2 !important;
    font-weight:700 !important;
    margin:0 0 5px !important;
  }

  .ce-configurator .vl24-swatches{
    gap:6px !important;
  }

  /* SAME SIZE FOR BOTH:
     Woo variation swatches + CE plugin swatches */
  .woocommerce div.product form.cart .variations td.value .vl24-swatch,
  .woocommerce div.product form.cart .variations td.value .vl24-swatch--button,
  .ce-configurator .vl24-swatch,
  .ce-configurator .vl24-swatch--button,
  .ce-configurator .ce-choice-button{
    height:34px !important;
    min-height:34px !important;

    padding:0 9px !important;

    font-size:13px !important;
    font-weight:500 !important;
    line-height:1 !important;

    border-radius:4px !important;

    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    white-space:nowrap !important;
  }

  /* CE text inputs, if child fields open */
  .ce-configurator-field input[type="text"],
  .ce-configurator-field input[type="email"],
  .ce-configurator-field input[type="tel"],
  .ce-configurator-field select{
    height:40px !important;
    min-height:40px !important;
    padding:0 12px !important;
    font-size:13px !important;
    border-radius:4px !important;
  }

  .ce-configurator-field textarea{
    min-height:82px !important;
    padding:10px 12px !important;
    font-size:13px !important;
    border-radius:4px !important;
  }

  .ce-children-group{
    margin-top:8px !important;
    padding-left:10px !important;
  }

}


/* =========================================
MOBILE — CE ACCESSORIES ACCORDION
ONLY MOBILE
========================================= */

@media (max-width:767px){

  .ce-configurator-section.ce-mobile-accordion{
    border:1px solid rgba(17,17,17,0.12);
    border-radius:6px;
    background:#fff;
    overflow:hidden;
  }

  .ce-configurator-section.ce-mobile-accordion .ce-configurator-title{
    position:relative;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;

    margin:0 !important;
    padding:12px 13px !important;

    font-size:14px !important;
    font-weight:800 !important;
    line-height:1.2 !important;

    cursor:pointer;
    user-select:none;
  }

  .ce-configurator-section.ce-mobile-accordion .ce-configurator-title::after{
    content:"+";

    width:22px;
    height:22px;

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

    flex:0 0 22px;

    border-radius:50%;
    border:1px solid rgba(17,17,17,0.14);

    font-size:16px;
    font-weight:700;
    line-height:1;
  }

  .ce-configurator-section.ce-mobile-accordion.is-open .ce-configurator-title::after{
    content:"−";
  }

  .ce-configurator-section.ce-mobile-accordion:not(.is-open) .ce-configurator-field{
    display:none !important;
  }

  .ce-configurator-section.ce-mobile-accordion.is-open{
    padding-bottom:10px;
  }

  .ce-configurator-section.ce-mobile-accordion.is-open .ce-configurator-field{
    padding-left:12px;
    padding-right:12px;
  }

  .ce-configurator-section.ce-mobile-accordion.is-open .ce-configurator-field:first-of-type{
    padding-top:8px;
  }

}

/* =========================================
VL24 MOBILE FAVORITES COUNT — FINAL FIX
========================================= */

@media (max-width:767px){

  .vl24-mobile-bar,
  .vl24-mobile-bar a,
  .vl24-mobile-favorites-link{
    overflow:visible !important;
  }

  .vl24-mobile-bar a.vl24-mobile-favorites-link{
    position:relative !important;
  }

  .vl24-mobile-bar a.vl24-mobile-favorites-link .vl24-fav-count,
  .vl24-mobile-bar a.vl24-mobile-favorites-link .vl24-mobile-fav-count{
    position:absolute !important;
    top:-8px !important;
    right:30px !important;

    min-width:18px !important;
    height:18px !important;
    padding:0 5px !important;

    align-items:center !important;
    justify-content:center !important;

    border-radius:999px !important;
    background:#f59e0b !important;
    color:#fff !important;

    font-size:11px !important;
    font-weight:800 !important;
    line-height:18px !important;

    z-index:9999999 !important;
    pointer-events:none !important;

    box-shadow:0 6px 14px rgba(0,0,0,.18) !important;
  }

  .vl24-mobile-bar a.vl24-mobile-favorites-link .vl24-fav-count[hidden],
  .vl24-mobile-bar a.vl24-mobile-favorites-link .vl24-mobile-fav-count[hidden]{
    display:none !important;
  }

}

/* =========================================
VL24 FAVORITES PAGE RESPONSIVE
========================================= */

@media (max-width:1180px){

  .vl24-favorites-products.products{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }

}

@media (max-width:767px){

  .vl24-favorites-page{
    padding:22px 12px 86px;
  }

  .vl24-favorites-hero{
    padding:24px 18px;
    margin-bottom:18px;
    border-radius:8px;
  }

  .vl24-favorites-hero h1{
    font-size:2.1rem;
  }

  .vl24-favorites-hero p{
    font-size:14px;
  }

  .vl24-favorites-toolbar{
    align-items:flex-start;
    flex-direction:column;
    gap:10px;
    padding:12px;
  }

  .vl24-favorites-clear{
    width:100%;
  }

  .vl24-favorites-products.products{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
  }

  .vl24-favorites-empty{
    margin-top:20px;
    padding:34px 18px;
    border-radius:8px;
  }

  .vl24-favorites-empty h2{
    font-size:24px;
  }

}

@media (max-width:380px){

  .vl24-favorites-products.products{
    grid-template-columns:1fr;
  }

}

/* =========================================================
GUIDES HERO — MOBILE SIDE PADDING FIX
========================================================= */

@media (max-width:767px){

  .vl24-guides-hero{
    width:100%;
    box-sizing:border-box;
  }

  .vl24-guides-hero-content{
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    padding-left:20px !important;
    padding-right:20px !important;
  }

}

/* =========================================================
GUIDES PAGE — MOBILE CATEGORY + LIST PADDING
========================================================= */

@media (max-width:767px){

  body.page-id-644 .vl24-guides-category{
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    padding-left:10px !important;
    padding-right:10px !important;
  }

  body.page-id-644 .vl24-guides-head,
  body.page-id-644 .vl24-guides-list{
    width:100%;
    max-width:100%;
    box-sizing:border-box;
  }

  body.page-id-644 .vl24-guide-row{
    width:100%;
    max-width:100%;
    box-sizing:border-box;
  }

}

/* =========================================================
SIMPLE CONTENT PAGES — MOBILE SIDE PADDING
========================================================= */

@media (max-width:767px){

  .vl24-simple-content{
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    padding-left:20px !important;
    padding-right:20px !important;
  }

  .vl24-simple-content h1,
  .vl24-simple-content h2,
  .vl24-simple-content h3,
  .vl24-simple-content p{
    margin-left:0 !important;
    margin-right:0 !important;
  }

}

/* =========================================
MOBILE PRODUCT BREADCRUMB — FINAL CLEAN FIX
========================================= */

@media (max-width:767px){

  body.single-product .vl24-breadcrumb-bar{
    width:100% !important;
    overflow:hidden !important;
  }

  body.single-product .vl24-breadcrumb-bar .vl24-container{
    width:100% !important;
    max-width:100% !important;
    padding-left:9px !important;
    padding-right:9px !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
  }

  body.single-product .vl24-breadcrumb{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

    display:flex !important;
    align-items:center !important;
    flex-wrap:nowrap !important;

    overflow:hidden !important;
    white-space:nowrap !important;

    gap:8px !important;
    min-height:54px !important;
  }

  body.single-product .vl24-breadcrumb-item{
    display:inline-flex !important;
    align-items:center !important;
    flex:0 0 auto !important;
    min-width:auto !important;

    font-size:14px !important;
    line-height:1 !important;
    white-space:nowrap !important;
  }

  body.single-product .vl24-breadcrumb-item a{
    display:inline-flex !important;
    align-items:center !important;
    white-space:nowrap !important;
  }

  body.single-product .vl24-breadcrumb-sep{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    flex:0 0 10px !important;
    width:10px !important;
    height:16px !important;
    min-width:10px !important;

    margin:0 !important;
  }

  /* Viimane ehk toote nimi */
  body.single-product .vl24-breadcrumb-item:last-child{
    flex:1 1 auto !important;
    min-width:0 !important;
    max-width:100% !important;

    display:block !important;

    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;

    font-size:14px !important;
    font-weight:700 !important;
    line-height:54px !important;
    height:54px !important;

    color:#6b7280 !important;
  }

}

/* =========================================
MOBILE PRODUCT BREADCRUMB — SAME SIZE AS CATEGORY PAGE
========================================= */

@media (max-width:767px){

  body.single-product .vl24-breadcrumb,
  body.single-product .vl24-breadcrumb-item,
  body.single-product .vl24-breadcrumb-item a,
  body.single-product .vl24-breadcrumb-item:last-child{
    font-size:13px !important;
    font-weight:600 !important;
    line-height:1 !important;
  }

  body.single-product .vl24-breadcrumb-item:last-child{
    height:auto !important;
    line-height:1 !important;
    display:block !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }

  body.single-product .vl24-breadcrumb{
    min-height:48px !important;
  }

}

/* =========================================================
FAQ PAGE — RESPONSIVE
========================================================= */

@media (max-width:1024px){

  .vl24-tabs-section{
    padding:32px 24px 72px;
  }

  .vl24-tabs-section > .container{
    max-width:100%;
  }

  .vl24-tabs-head{
    margin-bottom:34px;
  }

  .vl24-tabs-title{
    font-size:clamp(2rem,5vw,3.4rem);
  }

}

@media (max-width:767px){

  .vl24-tabs-section{
    padding:26px 20px 76px;
  }

  .vl24-tabs-head{
    margin:0 0 28px;
    text-align:left;
  }

  .vl24-tabs-head .hero-eyebrow{
    height:30px;
    padding:0 12px;
    margin-bottom:14px;

    font-size:11px;
  }

  .vl24-tabs-title{
    font-size:34px;
    line-height:1.05;
    letter-spacing:-.045em;
    margin-bottom:14px;
  }

  .vl24-tabs-intro{
    font-size:15px;
    line-height:1.75;
  }

  .vl24-accordion{
    gap:12px;
  }

  .vl24-acc-header{
    min-height:58px;
    padding:16px 16px;
    gap:12px;
  }

  .vl24-acc-title{
    gap:11px;
    font-size:15px;
    line-height:1.28;
  }

  .vl24-acc-title::before{
    width:7px;
    height:7px;
    flex-basis:7px;
    box-shadow:0 0 0 4px rgba(34,197,94,.13);
  }

  .vl24-acc-icon{
    width:28px;
    height:28px;
    flex-basis:28px;
  }

  .vl24-acc-icon::before,
  .vl24-acc-icon::after{
    width:12px;
  }

  .vl24-acc-content{
    padding:0 16px 18px 34px;

    font-size:14px;
    line-height:1.75;
  }

}

@media (max-width:380px){

  .vl24-tabs-section{
    padding-left:16px;
    padding-right:16px;
  }

  .vl24-tabs-title{
    font-size:30px;
  }

  .vl24-acc-title{
    font-size:14px;
  }

}

/* =========================================================
FAQ PAGE — RESPONSIVE LEFT ALIGN + PADDING
========================================================= */

@media (max-width:1024px){

  .vl24-tabs-section{
    padding:44px 24px 76px !important;
  }

  .vl24-tabs-head{
    max-width:100% !important;
    margin:0 0 34px !important;
    text-align:left !important;
  }

  .vl24-tabs-intro,
  .vl24-accordion{
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }

}

@media (max-width:767px){

  .vl24-tabs-section{
    padding:30px 20px 76px !important;
  }

  .vl24-tabs-head{
    margin:0 0 28px !important;
    text-align:left !important;
  }

  .vl24-tabs-title{
    text-align:left !important;
  }

  .vl24-tabs-intro{
    margin:0 !important;
    text-align:left !important;
  }

  .vl24-accordion{
    margin:0 !important;
  }

}

@media (max-width:380px){

  .vl24-tabs-section{
    padding-left:0px !important;
    padding-right:0px !important;
  }

}

/* =========================================================
ABOUT + FAQ — MOBILE ONLY TOP SPACING ALIGNMENT
========================================================= */

@media (max-width:767px){

  /* ABOUT US — sisu algab ülevalt poolt */
  .page-id-676 .vl24-about-page{
    padding-top:20px !important;
  }

  /* ABOUT US — eyebrow ja pealkiri lähemale */
  .page-id-676 .vl24-about-label{
    margin-bottom:12px !important;
  }

  /* FAQ — eemaldame sektsiooni enda top paddingu mobiilis */
  .vl24-tabs-section{
    padding-top:0 !important;
  }

  /* FAQ — container algab sama kõrgelt nagu About Us */
  .vl24-tabs-section > .container{
    padding-top:20px !important;
  }

  /* FAQ — eyebrow ja pealkiri lähemale */
  .vl24-tabs-head .hero-eyebrow{
    margin-bottom:12px !important;
  }

}

/* =========================================================
ABOUT US — MOBILE HERO START SAME AS FAQ
========================================================= */

@media (max-width:767px){

  /* About Us algus samale kõrgusele nagu FAQ */
  body.page-id-676 .vl24-about-page{
    padding-top:10px !important;
  }

  /* Hero tekstiplokk ilma lisa õhuta */
  body.page-id-676 .vl24-about-hero{
    margin-top:0 !important;
    padding-top:0 !important;
    align-items:start !important;
  }

  body.page-id-676 .vl24-about-hero-text{
    margin-top:0 !important;
    padding-top:0 !important;
  }

  /* Eyebrow sama vahega nagu FAQ */
  body.page-id-676 .vl24-about-label{
    margin-top:0 !important;
    margin-bottom:12px !important;
  }

  /* Pealkiri sama alguse ja vahega */
  body.page-id-676 .vl24-about-hero h1{
    margin-top:0 !important;
    margin-bottom:14px !important;

    font-size:34px !important;
    line-height:1.05 !important;
    letter-spacing:-.045em !important;
  }

  /* Tekst sama rahulik nagu FAQ intro */
  body.page-id-676 .vl24-about-hero-text{
    font-size:15px !important;
    line-height:1.75 !important;
  }

}

/* =========================================================
ABOUT US — MOBILE EYEBROW + TITLE SPACING
========================================================= */

@media (max-width:767px){

  body.page-id-676 .vl24-about-label{
    margin-bottom:0px !important;
  }

  body.page-id-676 .vl24-about-hero h1{
    margin-top:0 !important;
  }

}

/* =========================================================
HOW TO ORDER PAGE — FINAL RESPONSIVE
========================================================= */

@media (max-width:1024px){

  .vl24-order-content{
    padding-left:24px;
    padding-right:24px;
  }

  .vl24-order-content--intro{
    padding-top:34px;
    padding-bottom:24px;
  }

  .vl24-order-content--notice{
    padding-top:36px;
    padding-bottom:38px;
  }

  .vl24-order-title{
    font-size:clamp(2.1rem,5vw,3.45rem);
  }

  .vl24-order-content p{
    font-size:16px;
  }

  #ostuprotsess.process{
    padding:40px 0 46px;
  }

  #ostuprotsess .process-layout{
    grid-template-columns:1fr;
    gap:28px;
    padding-left:24px;
    padding-right:24px;
  }

  #ostuprotsess .process-intro{
    position:relative;
    top:auto;
    max-width:860px;
    padding-top:0;
  }

  #ostuprotsess .process-intro h2{
    font-size:clamp(2.05rem,5vw,3.45rem);
  }

  #order-faq.vl24-tabs-section{
    padding:42px 0 76px !important;
  }

  #order-faq.vl24-tabs-section > .container{
    padding-left:24px !important;
    padding-right:24px !important;
  }

  #order-faq .vl24-accordion{
    max-width:100% !important;
  }

}

@media (max-width:767px){

  .vl24-order-content{
    padding-left:20px;
    padding-right:20px;
  }

  .vl24-order-content--intro{
    padding-top:24px;
    padding-bottom:22px;
  }

  .vl24-order-content--notice{
    padding-top:30px;
    padding-bottom:32px;
  }

  .vl24-order-title{
    font-size:34px;
    line-height:1.05;
    letter-spacing:-.045em;
    margin-bottom:12px;
  }

  .vl24-order-content p{
    font-size:15px;
    line-height:1.72;
  }

  .vl24-order-content p + p{
    margin-top:10px;
  }

  #ostuprotsess.process{
    padding:32px 0 38px;
  }

  #ostuprotsess .process-layout{
    padding-left:20px;
    padding-right:20px;
    gap:24px;
  }

  #ostuprotsess .hero-eyebrow{
    min-height:30px;
    padding:0 12px;
    margin-bottom:12px;
    font-size:11px;
  }

  #ostuprotsess .process-intro h2{
    font-size:34px;
    line-height:1.05;
    letter-spacing:-.045em;
    margin-bottom:12px;
  }

  #ostuprotsess .process-intro p{
    font-size:15px;
    line-height:1.72;
  }

  #ostuprotsess .process-steps{
    gap:12px;
  }

  #ostuprotsess .process-step{
    min-height:auto;
    grid-template-columns:44px minmax(0,1fr);
    gap:13px;
    padding:17px 16px;
  }

  #ostuprotsess .process-step::before{
    display:none;
  }

  #ostuprotsess .step-num{
    width:38px;
    height:38px;
    font-size:13px;
  }

  #ostuprotsess .process-step h3{
    font-size:18px;
    line-height:1.18;
    margin-bottom:5px;
  }

  #ostuprotsess .process-step p{
    font-size:14px;
    line-height:1.62;
  }

  #order-faq.vl24-tabs-section{
    padding:36px 0 76px !important;
  }

  #order-faq.vl24-tabs-section > .container{
    padding-left:20px !important;
    padding-right:20px !important;
  }

  #order-faq .vl24-tabs-head{
    margin-bottom:26px !important;
  }

  #order-faq .hero-eyebrow{
    margin-bottom:12px !important;
  }

  #order-faq .vl24-tabs-title{
    font-size:34px !important;
    line-height:1.05 !important;
    letter-spacing:-.045em !important;
    margin-bottom:12px !important;
  }

  #order-faq .vl24-tabs-intro{
    font-size:15px !important;
    line-height:1.72 !important;
  }

}

@media (max-width:380px){

  .vl24-order-content{
    padding-left:16px;
    padding-right:16px;
  }

  .vl24-order-title,
  #ostuprotsess .process-intro h2,
  #order-faq .vl24-tabs-title{
    font-size:30px !important;
  }

  #ostuprotsess .process-layout,
  #order-faq.vl24-tabs-section > .container{
    padding-left:16px !important;
    padding-right:16px !important;
  }

}

/* =========================================
VL24 RESPONSIVE LOGO SWITCH
Desktop/tablet = green logo
Mobile = white logo
========================================= */

.vl24-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.vl24-logo-link {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  text-decoration: none;
}

.vl24-logo-img {
  display: block;
  width: auto;
  height: 46px;
  max-width: 240px;
  object-fit: contain;
}

.vl24-logo-green {
  display: block;
}

.vl24-logo-white {
  display: none;
}

/* Kui fallback kasutab WordPress custom logo pilti */
.vl24-logo-green .custom-logo {
  display: block;
  width: auto;
  height: 42px;
  max-width: 240px;
  object-fit: contain;
}

/* MOBILE */
@media (max-width: 767px) {

  .vl24-logo-green {
    display: none !important;
  }

  .vl24-logo-white {
    display: block !important;
  }

  .vl24-logo-img {
    height: 34px;
    max-width: 190px;
  }

  .vl24-logo {
    min-width: 0;
  }

  .vl24-logo-link {
    max-width: 190px;
  }
}

/* =========================================
PRODUCT TITLE WIDTH FIX
Desktop product page
========================================= */

@media (min-width:1025px){

  .single-product .vl24-product-title{
    max-width: 100% !important;
    width: 100% !important;
  }

  .single-product .vl24-product-summary-col{
    min-width: 0 !important;
  }

}

/* =========================================
VL24 RESPONSIVE LOGO FIX — SAFE VERSION
Desktop/tablet = green logo
Mobile = white logo
========================================= */

.vl24-logo{
  display:flex !important;
  align-items:center !important;
  flex-shrink:0 !important;
  line-height:1 !important;
}

.vl24-logo-link{
  display:inline-flex !important;
  align-items:center !important;
  line-height:0 !important;
  text-decoration:none !important;
}

/* Desktop / tablet */
.vl24-logo-green{
  display:block !important;
}

.vl24-logo-white{
  display:none !important;
}

.vl24-logo-img,
.vl24-logo-green .custom-logo{
  display:block;
  width:auto !important;
  height:auto !important;
  max-width:220px !important;
  max-height:46px !important;
  object-fit:contain !important;
}

/* Tablet */
@media (min-width:768px) and (max-width:1024px){

  .vl24-logo-img,
  .vl24-logo-green .custom-logo{
    max-width:190px !important;
    max-height:42px !important;
  }

}

/* Mobile */
@media (max-width:767px){

  .vl24-logo-green{
    display:none !important;
  }

  .vl24-logo-white{
    display:block !important;
  }

  .vl24-logo-img{
    width:auto !important;
    height:auto !important;
    max-width:170px !important;
    max-height:32px !important;
    object-fit:contain !important;
  }

  .vl24-logo-link{
    max-width:170px !important;
  }

}

/* =========================================
MOBILE PRODUCT CARD SALE BADGE
========================================= */
@media (max-width:767px){

  .vl24-sale-badge{
    top:8px !important;
    left:8px !important;

    min-height:26px !important;
    padding:6px 9px !important;

    font-size:10.5px !important;
    border-radius:6px !important;

    box-shadow:
      0 8px 16px rgba(255,77,31,.23),
      inset 0 1px 0 rgba(255,255,255,.28) !important;
  }

}

@media (max-width:767px){

  .vl24-gallery-main .vl24-sale-badge--single{
    top:10px !important;
    left:10px !important;
    min-height:28px !important;
    padding:6px 10px !important;
    font-size:11px !important;
  }

}

/* =========================================
SALE PAGE — MOBILE
========================================= */

@media (max-width:767px){

  .vl24-sale-page{
    padding:8px 0 48px;
  }

  .vl24-sale-hero{
    padding:34px 20px;
    border-radius:8px;
  }

  .vl24-sale-kicker{
    min-height:28px;
    padding:6px 10px;
    margin-bottom:14px;

    font-size:10.5px;
    border-radius:6px;
  }

  .vl24-sale-hero h1{
    max-width:100%;
    margin-bottom:14px;

    font-size:2.05rem;
    line-height:1.04;
    letter-spacing:-.04em;
  }

  .vl24-sale-lead{
    font-size:15.5px;
    line-height:1.68;
  }

  .vl24-sale-benefits{
    grid-template-columns:1fr;
    gap:10px;
    margin-top:24px;
  }

  .vl24-sale-benefits > div{
    padding:16px 16px 16px 18px;
    font-size:13.5px;
  }

  .vl24-sale-benefits strong{
    font-size:14.5px;
  }

  .vl24-sale-products,
  .vl24-sale-info{
    margin-top:38px;
  }

  .vl24-sale-section-head{
    margin-bottom:20px;
    font-size:15px;
    line-height:1.65;
  }

  .vl24-sale-section-head h2,
  .vl24-sale-info h2{
    font-size:1.65rem;
    line-height:1.1;
  }

  .vl24-sale-info{
    padding:24px 20px;
    border-radius:8px;

    font-size:15px;
    line-height:1.72;
  }

}

/* =========================================
SALE PAGE PRODUCTS MOBILE PADDING FIX
========================================= */
@media (max-width:767px){

  .vl24-sale-products{
    padding-left:16px !important;
    padding-right:16px !important;
  }

  .vl24-sale-products .vl24-sale-section-head{
    padding-left:0 !important;
    padding-right:0 !important;
  }

  .vl24-sale-products .vl24-shortcode-products{
    padding-left:0 !important;
    padding-right:0 !important;
  }

}

/* =========================================
SALE PAGE — MOBILE WIDTH FIX
========================================= */

@media (max-width:767px){

  body.page .vl24-content-section:has(.vl24-sale-page){
    padding-top:10px !important;
    padding-bottom:8px !important;
  }

  body.page .vl24-content-container:has(.vl24-sale-page){
    width:100% !important;
    max-width:100% !important;

    padding-left:16px !important;
    padding-right:16px !important;

    margin-left:0 !important;
    margin-right:0 !important;

    box-sizing:border-box !important;
  }

  body.page .vl24-content-container:has(.vl24-sale-page) .vl24-sale-page{
    width:100% !important;
    max-width:100% !important;

    padding-left:0 !important;
    padding-right:0 !important;

    box-sizing:border-box !important;
  }

}