/*
Theme Name: VThree Organics – Preview Match
Description: Professional editable WooCommerce-ready theme matching the approved VThree Organics visual preview.
Version: 4.1
*/


:root{
--green:#0a743b;
--dark:#064b2b;
--lime:#75c93a;
--cream:#fbf8ee;
--soft:#edf7df;
--ink:#173526;
--muted:#607167;
--white:#fff;
--shadow:0 10px 28px rgba(10,70,38,.12);
--radius:14px
}


*{
box-sizing:border-box
}


html{
scroll-behavior:smooth
}


body{
margin:0;
background:var(--cream);
color:var(--ink);
font-family:Arial,Helvetica,sans-serif;
line-height:1.55
}


img{
display:block;
max-width:100%;
height:auto
}


a{
color:inherit
}


.container{
width:min(1180px,92%);
margin:auto
}


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

.topbar{
background:var(--dark);
color:#fff;
font-size:12px
}


.topbar .container{
min-height:32px;
display:flex;
align-items:center;
justify-content:space-between
}


.socials{
display:flex;
gap:14px
}


.socials a{
text-decoration:none
}


/* =========================================================
   HEADER
   ========================================================= */

.header{
background:#fff;
border-bottom:1px solid #eee;
position:sticky;
top:0;
z-index:50
}


.header .container{
height:78px;
display:flex;
align-items:center;
justify-content:space-between;
gap:30px
}


.brand{
display:flex;
align-items:center;
gap:10px;
text-decoration:none
}


.brand img{
width:58px;
height:58px;
object-fit:contain
}


.brand strong{
display:block;
color:#174f2e;
font:700 23px Georgia,serif
}


.brand small{
display:block;
color:#728078;
font-size:9px;
letter-spacing:.8px
}


.nav{
display:flex;
gap:30px;
font-size:13px;
font-weight:600
}


.nav a{
text-decoration:none
}


.nav a:hover{
color:var(--green)
}


.mobile{
display:none;
border:0;
background:none;
font-size:26px;
color:var(--green)
}


/* =========================================================
   HERO
   ========================================================= */

.hero{
min-height:510px;
position:relative;
display:flex;
align-items:center;
background:#163e28;
overflow:hidden
}


.hero:before{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(
90deg,
rgba(3,44,24,.82),
rgba(3,44,24,.35) 60%,
rgba(3,44,24,.08)
),
var(--hero) center/cover
}


.hero .container{
position:relative;
z-index:1;
padding:90px 0
}


.hero-kicker{
color:#e5edbd;
text-transform:uppercase;
letter-spacing:2.5px;
font-size:11px;
font-weight:800
}


.hero h1{
color:#fff;
font:700 clamp(45px,6vw,72px)/1 Georgia,serif;
margin:12px 0
}


.hero h1 span{
color:#7dd242
}


.hero p{
max-width:550px;
color:#fff;
font-size:16px;
margin:0 0 25px
}


.btn{
display:inline-flex;
padding:12px 21px;
border-radius:22px;
text-decoration:none;
font-weight:800;
font-size:13px;
align-items:center;
gap:7px
}


.btn-green{
background:#72c93b;
color:#fff
}


.btn-dark{
background:var(--green);
color:#fff
}


.btn-light{
background:#fff;
color:var(--green)
}


/* =========================================================
   GENERAL SECTIONS
   ========================================================= */

.section{
padding:70px 0
}


.center{
text-align:center
}


.eyebrow{
color:#5d9d40;
font-size:10px;
letter-spacing:2.4px;
font-weight:800;
text-transform:uppercase
}


.section h2{
font:700 clamp(30px,4vw,44px)/1.12 Georgia,serif;
color:#173c27;
margin:10px 0
}


.section h2 .green{
color:var(--green)
}


.sub{
color:var(--muted);
font-size:14px
}


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

.categories{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
margin-top:34px
}


.cat{
background:#fff;
border-radius:14px;
overflow:hidden;
box-shadow:var(--shadow);
text-decoration:none
}


.cat-img{
height:170px;
overflow:hidden
}


.cat-img img{
width:100%;
height:100%;
object-fit:cover;
transition:.35s
}


.cat:hover img{
transform:scale(1.04)
}


.cat-body{
text-align:center;
padding:13px
}


.cat-body h3{
margin:0 0 7px;
font:700 16px Georgia,serif
}


.pill{
display:inline-block;
background:#dfeecb;
color:#356d31;
border-radius:20px;
padding:4px 15px;
font-size:9px;
font-weight:800
}


/* =========================================================
   FEATURE STRIP
   ========================================================= */

.feature-strip{
background:#edf7df;
padding:22px 0
}


.features{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:0
}


.feature{
text-align:center;
border-right:1px solid #bdd4aa;
padding:5px 18px
}


.feature:last-child{
border:0
}


.feature .ico{
font-size:28px;
color:var(--green)
}


.feature strong{
display:block;
font-size:12px
}


.feature span{
font-size:11px;
color:var(--muted)
}


/* =========================================================
   ABOUT
   ========================================================= */

.about{
display:grid;
grid-template-columns:1fr 1.15fr;
gap:55px;
align-items:center
}


.about-photo{
border-radius:0 120px 0 0;
overflow:hidden;
position:relative
}


.about-photo img{
width:100%;
height:430px;
object-fit:cover
}


.about-copy p{
color:var(--muted);
max-width:560px
}


.about-points{
display:grid;
gap:15px;
margin-top:20px
}


.point{
display:flex;
gap:12px;
align-items:center
}


.point .ico{
color:var(--green);
font-size:22px
}


.point strong{
font-size:13px
}


/* =========================================================
   GARDENING TIPS
   ========================================================= */

.tips-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
margin-top:32px
}


.tip{
background:#fff;
border-radius:13px;
overflow:hidden;
box-shadow:var(--shadow)
}


.tip img{
height:170px;
width:100%;
object-fit:cover
}


.tip-body{
padding:16px
}


.tip-tag{
display:inline-block;
background:#e4f0cf;
border-radius:5px;
padding:3px 7px;
font-size:8px;
font-weight:800;
color:#376d35
}


.tip h3{
font:700 17px Georgia,serif;
margin:8px 0
}


.tip p{
font-size:12px;
color:var(--muted);
margin:0 0 8px
}


.tip a{
font-size:11px;
font-weight:800;
color:var(--green);
text-decoration:none
}


/* =========================================================
   NOTIFY SECTION
   ========================================================= */

.notify{
position:relative;
background:#12492c;
overflow:hidden;
color:#fff
}


.notify:before{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(
90deg,
rgba(4,62,33,.92),
rgba(4,62,33,.48)
),
url('https://images.unsplash.com/photo-1497250681960-ef046c08a56e?auto=format&fit=crop&w=1800&q=85')
center/cover
}


.notify .container{
position:relative;
z-index:1;
padding:58px 0
}


.notify-grid{
display:grid;
grid-template-columns:1fr 1.4fr;
gap:35px;
align-items:center
}


.notify h2{
color:#fff
}


.notify p{
color:#eef5e9;
font-size:14px
}


.notify-form{
background:rgba(255,255,255,.96);
padding:18px;
border-radius:12px;
display:grid;
grid-template-columns:1fr 1fr 1fr auto;
gap:8px
}


.notify-form input{
min-width:0;
border:1px solid #d8dfd8;
border-radius:7px;
padding:11px;
font-size:12px
}


.notify-form button{
border:0;
border-radius:20px;
background:#69c83a;
color:#fff;
font-weight:800;
padding:0 18px
}


/* =========================================================
   CONTACT
   ========================================================= */

.contact{
background:#fff
}


.contact-grid{
display:grid;
grid-template-columns:1fr 1.25fr;
gap:50px;
align-items:center
}


.contact-photo{
height:350px;
border-radius:120px 0 0 0;
overflow:hidden
}


.contact-photo img{
width:100%;
height:100%;
object-fit:cover
}


.contact-box textarea{
width:100%;
height:125px;
border:1px solid #d7dfd7;
border-radius:8px;
padding:12px;
font:inherit;
resize:vertical
}


.contact-box input{
width:100%;
border:1px solid #d7dfd7;
border-radius:8px;
padding:11px;
margin-bottom:10px
}


.map-link{
color:var(--green);
font-weight:800;
text-decoration:none;
font-size:13px
}


/* =========================================================
   FOOTER
   ========================================================= */

.footer{
background:var(--dark);
color:#fff;
padding:45px 0 18px
}


.footer-grid{
display:grid;
grid-template-columns:1.5fr 1fr 1fr 1fr;
gap:30px
}


.footer img{
width:70px;
filter:brightness(0) invert(1);
margin-bottom:8px
}


.footer h3{
font:700 18px Georgia,serif
}


.footer p,
.footer a{
color:#d7e8dc;
font-size:11px
}


.footer a{
text-decoration:none
}


.links{
display:grid;
gap:5px
}


.bottom{
border-top:1px solid rgba(255,255,255,.15);
margin-top:25px;
padding-top:12px;
text-align:center;
color:#bcd1c2;
font-size:9px
}


/* =========================================================
   WHATSAPP
   ========================================================= */

.wa{
position:fixed;
right:18px;
bottom:18px;
width:50px;
height:50px;
border-radius:50%;
background:#25d366;
color:#fff;
display:grid;
place-items:center;
text-decoration:none;
font-weight:900;
z-index:60;
box-shadow:0 8px 20px rgba(0,0,0,.25)
}


.footer .footer-logo{
width:95px;
height:auto;
filter:none;
background:#fff;
border-radius:8px;
padding:6px;
object-fit:contain;
margin-bottom:10px
}


.footer-wa{
display:inline-flex!important;
align-items:center;
gap:7px;
margin-top:14px;
background:#25d366;
color:#fff!important;
padding:9px 14px;
border-radius:22px;
font-size:11px!important;
font-weight:800;
text-decoration:none;
box-shadow:0 5px 14px rgba(0,0,0,.18)
}


.footer-wa:hover{
transform:translateY(-1px)
}


/* =========================================================
   VTHREE ORGANICS
   MOST BOUGHT PRODUCTS
   ========================================================= */

.vthree-most-bought-products{
background:#faf8ef;
padding:55px 20px;
margin-top:50px;
border-top:1px solid #e6e1d3
}


.vthree-most-bought-inner{
max-width:1200px;
margin:0 auto
}


.vthree-most-bought-title{
text-align:center;
color:#174d35;
font-family:Georgia,"Times New Roman",serif;
font-size:32px;
font-weight:600;
margin:0 0 8px
}


.vthree-most-bought-subtitle{
text-align:center;
color:#68766e;
font-size:15px;
margin:0 0 32px
}


/* =========================================================
   MOST BOUGHT PRODUCT ROW
   ========================================================= */

.vthree-most-bought-products ul.products{

display:grid !important;

grid-template-columns:
repeat(4,minmax(0,1fr)) !important;

gap:24px !important;

width:100% !important;

margin:0 !important;

padding:0 !important;

list-style:none !important;
}


/*
   IMPORTANT:
   WooCommerce adds ::before and ::after
   pseudo-elements to ul.products.
   They must be removed because CSS Grid
   can otherwise treat them as grid items.
*/

.vthree-most-bought-products
ul.products::before,

.vthree-most-bought-products
ul.products::after{

content:none !important;

display:none !important;
}


/* =========================================================
   MOST BOUGHT PRODUCT CARD
   ========================================================= */

.vthree-most-bought-products
ul.products
li.product{

width:auto !important;

max-width:none !important;

float:none !important;

margin:0 !important;

padding:0 !important;

background:#fff;

border:1px solid #e7e5dc;

border-radius:14px;

overflow:hidden;

box-sizing:border-box;

transition:
transform .3s ease,
box-shadow .3s ease;
}


.vthree-most-bought-products
ul.products
li.product:hover{

transform:translateY(-5px);

box-shadow:
0 10px 25px rgba(20,70,45,.12);
}


/* =========================================================
   MOST BOUGHT PRODUCT IMAGE
   ========================================================= */

.vthree-most-bought-products
ul.products
li.product
a img{

width:100% !important;

height:220px !important;

object-fit:cover;

margin:0 !important;

padding:15px !important;

box-sizing:border-box;

background:#f7f6ef;
}


/* =========================================================
   MOST BOUGHT PRODUCT TITLE
   ========================================================= */

.vthree-most-bought-products
ul.products
li.product
.woocommerce-loop-product__title{

color:#174d35;

font-size:17px;

font-weight:600;

text-align:center;

padding:18px 15px 20px !important;

margin:0 !important;
}


/* =========================================================
   HIDE PRICE
   ========================================================= */

.vthree-most-bought-products
ul.products
li.product
.price{

display:none !important;
}


/* =========================================================
   HIDE ADD TO CART
   ========================================================= */

.vthree-most-bought-products
ul.products
li.product
.button{

display:none !important;
}


/* =========================================================
   HIDE RATING
   ========================================================= */

.vthree-most-bought-products
ul.products
li.product
.star-rating{

display:none !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:900px){

.nav{
display:none
}


.mobile{
display:block
}


.categories{
grid-template-columns:repeat(2,1fr)
}


.features{
grid-template-columns:repeat(2,1fr)
}


.feature{
border-bottom:1px solid #bdd4aa
}


.about,
.notify-grid,
.contact-grid{
grid-template-columns:1fr
}


.tips-grid{
grid-template-columns:1fr
}


.footer-grid{
grid-template-columns:repeat(2,1fr)
}


.notify-form{
grid-template-columns:1fr 1fr
}


/* Most Bought Products */

.vthree-most-bought-products
ul.products{

grid-template-columns:
repeat(2,minmax(0,1fr)) !important;

gap:18px !important;
}


.vthree-most-bought-products
ul.products
li.product
a img{

height:210px !important;
}

}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:560px){

.topbar .container{
font-size:9px
}


.top-social{
display:none
}


.brand strong{
font-size:18px
}


.brand small{
font-size:7px
}


.brand img{
width:48px;
height:48px
}


.hero{
min-height:560px
}


.hero .container{
padding:75px 0
}


.categories{
grid-template-columns:1fr
}


.features{
grid-template-columns:1fr 1fr
}


.feature{
border-right:0
}


.section{
padding:55px 0
}


.about-photo{
border-radius:0 70px 0 0
}


.tips-grid{
grid-template-columns:1fr
}


.notify-form{
grid-template-columns:1fr
}


.notify-form button{
padding:12px
}


.footer-grid{
grid-template-columns:1fr
}


/* Most Bought Products */

.vthree-most-bought-products{

padding:40px 15px;

margin-top:35px;
}


.vthree-most-bought-title{
font-size:27px
}


.vthree-most-bought-subtitle{
font-size:13px;

margin-bottom:24px
}


.vthree-most-bought-products
ul.products{

grid-template-columns:
repeat(2,minmax(0,1fr)) !important;

gap:15px !important;
}


.vthree-most-bought-products
ul.products
li.product
a img{

height:170px !important;

padding:10px !important;
}


.vthree-most-bought-products
ul.products
li.product
.woocommerce-loop-product__title{

font-size:15px;

padding:14px 8px 16px !important;
}

}