shop

Added to cart

.vm-products-root, .vm-products-root *{ box-sizing:border-box; }
.vm-products-root{
–vm-green:#556B2F;
–vm-green-dark:#3d4e22;
–vm-orange:#E67E22;
–vm-orange-dark:#c96a15;
–vm-beige:#F5E9DB;
–vm-brown:#4A3428;
–vm-cream:#FAF7F2;
–vm-muted:#8a7a6c;
–vm-font-head:’Playfair Display’, serif;
–vm-font-body:’Montserrat’, sans-serif;
font-family:var(–vm-font-body);
color:var(–vm-brown);
display:block;
}
.vm-products-root ul{ list-style:none; margin:0; padding:0; }
@media (prefers-reduced-motion: reduce){
.vm-products-root *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
}
.vm-products{
position:relative;
padding:46px 20px 100px;
background:linear-gradient(180deg, var(–vm-cream) 0%, var(–vm-beige) 100%);
overflow:hidden;
}
.vm-products-container{ max-width:1320px; margin:0 auto; position:relative; z-index:1; }
.vm-products-head{ text-align:center; max-width:620px; margin:0 auto 54px; }
.vm-products-eyebrow{
display:inline-flex; align-items:center; gap:8px;
background:rgba(85,107,47,0.10);
border:1px solid rgba(85,107,47,0.3);
color:var(–vm-green-dark);
font-size:12px; font-weight:700; letter-spacing:1.6px; text-transform:uppercase;
padding:7px 16px; border-radius:20px; margin-bottom:16px;
}
.vm-products-head h2{
font-family:var(–vm-font-head); font-weight:700; color:var(–vm-brown);
font-size:38px; line-height:1.2; margin:0 0 14px;
}
.vm-products-head h2 span{ color:var(–vm-orange); font-style:italic; }
.vm-products-divider{
display:flex; align-items:center; justify-content:center; gap:12px;
color:var(–vm-green); margin-bottom:16px;
}
.vm-products-divider::before,.vm-products-divider::after{
content:””; height:1px; width:56px;
background:linear-gradient(90deg, transparent, var(–vm-green), transparent);
}
.vm-products-head p{
font-size:14.5px; font-weight:500; color:rgba(74,52,40,0.7); line-height:1.7; margin:0;
}
.vm-product-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:28px; }
.vm-product-card{
position:relative; /* anchor for the stretched link */
background:#fff;
border-radius:20px;
overflow:hidden;
box-shadow:0 10px 28px rgba(74,52,40,0.08);
border:1px solid rgba(74,52,40,0.06);
display:flex;
flex-direction:column;
opacity:0;
transform:translateY(26px);
transition:opacity .7s ease, transform .7s ease, box-shadow .4s ease;
}
.vm-product-card.vm-in{ opacity:1; transform:translateY(0); }
.vm-product-card:hover{ transform:translateY(-10px); box-shadow:0 26px 50px rgba(74,52,40,0.18); }
/* whole card shows focus when the title link is keyboard-focused */
.vm-product-card:has(.vm-product-name a:focus-visible){ outline:3px solid var(–vm-green); outline-offset:3px; }
.vm-product-media{ position:relative; aspect-ratio:1/1; overflow:hidden; }
.vm-product-img{
position:absolute; inset:0; width:100%; height:100%;
object-fit:cover; transition:transform .6s ease;
}
.vm-product-card:hover .vm-product-img{ transform:scale(1.07); }
.vm-product-badge{
position:absolute; top:14px; left:14px; z-index:2;
background:var(–vm-orange); color:var(–vm-cream);
font-size:10.5px; font-weight:800; letter-spacing:0.8px; text-transform:uppercase;
padding:6px 12px; border-radius:99px;
}
.vm-product-badge.vm-new{ background:var(–vm-green-dark); }
.vm-products-root button{ all:unset; box-sizing:border-box; cursor:pointer; }
.vm-product-quick{
position:absolute; bottom:14px; right:14px;
z-index:3; /* above the stretched link */
width:40px; height:40px;
border-radius:50% !important;
background:var(–vm-cream) !important;
color:var(–vm-brown) !important;
display:flex !important; align-items:center; justify-content:center;
box-shadow:0 10px 20px rgba(0,0,0,0.16);
opacity:0; transform:translateY(8px);
transition:opacity .3s ease, transform .3s ease, background .3s ease, color .3s ease;
}
.vm-product-card:hover .vm-product-quick,
.vm-product-quick:focus-visible{ opacity:1; transform:translateY(0); }
.vm-product-quick:hover{ background:var(–vm-orange) !important; color:var(–vm-cream) !important; }
.vm-product-quick.vm-wished{ background:var(–vm-orange) !important; color:var(–vm-cream) !important; opacity:1; transform:none; }
.vm-product-body{ padding:22px 22px 24px; display:flex; flex-direction:column; flex:1; }
.vm-product-tag{
font-size:10.5px; letter-spacing:1.4px; text-transform:uppercase;
color:var(–vm-orange); font-weight:700; margin-bottom:8px;
}
/* —- the stretched link: whole card is clickable —- */
.vm-product-name{
font-family:var(–vm-font-head); font-size:19px; font-weight:700;
color:var(–vm-brown); margin:0 0 6px;
}
.vm-product-name a{
color:inherit; text-decoration:none; transition:color .25s ease;
}
.vm-product-name a::after{
content:””; position:absolute; inset:0; z-index:1;
}
.vm-product-card:hover .vm-product-name a{ color:var(–vm-green-dark); }
.vm-product-name a:focus-visible{ outline:none; }
.vm-product-desc{ font-size:12.5px; color:var(–vm-muted); margin:0 0 14px; min-height:34px; line-height:1.6; }
.vm-product-pill{
display:inline-block; font-size:11px; font-weight:700; letter-spacing:0.3px;
background:var(–vm-beige); color:var(–vm-brown);
padding:5px 12px; border-radius:99px; margin-bottom:14px;
}
.vm-product-rating{ display:flex; align-items:center; gap:2px; color:var(–vm-orange); font-size:12px; margin-bottom:14px; }
.vm-product-rating span{ color:var(–vm-muted); margin-left:6px; font-size:11.5px; font-weight:600; }
.vm-product-price{ display:flex; align-items:baseline; gap:10px; margin-bottom:18px; flex-wrap:wrap; }
.vm-price-now{ font-family:var(–vm-font-head); font-size:22px; font-weight:700; color:var(–vm-green-dark); }
.vm-price-old{ font-size:13px; color:var(–vm-muted); text-decoration:line-through; }
.vm-price-off{ font-size:11px; font-weight:800; color:var(–vm-orange); background:rgba(230,126,34,0.12); padding:3px 8px; border-radius:6px; }
/* actions sit above the stretched link so they stay independently clickable */
.vm-product-actions{ display:flex; gap:8px; margin-top:auto; position:relative; z-index:3; }
.vm-btn-cart, .vm-btn-buy{
flex:1;
display:inline-flex !important; align-items:center; justify-content:center; gap:6px;
padding:11px 12px !important;
border-radius:99px !important;
font-family:var(–vm-font-body) !important;
font-size:12px !important;
font-weight:700 !important;
text-decoration:none !important;
text-align:center;
transition:background .3s ease, color .3s ease, transform .25s ease, box-shadow .25s ease;
}
.vm-btn-cart{ background:var(–vm-beige) !important; color:var(–vm-brown) !important; }
.vm-btn-cart:hover{ background:var(–vm-brown) !important; color:var(–vm-cream) !important; }
.vm-btn-buy{ background:var(–vm-green-dark) !important; color:var(–vm-cream) !important; }
.vm-btn-buy:hover{
background:var(–vm-orange) !important;
transform:translateY(-2px);
box-shadow:0 12px 22px rgba(230,126,34,0.35);
}
.vm-btn-cart:focus-visible, .vm-btn-buy:focus-visible, .vm-product-quick:focus-visible{
outline:3px solid var(–vm-green) !important; outline-offset:2px;
}
.vm-btn-cart.vm-busy{ opacity:.6; pointer-events:none; }
/* Hidden by opacity + visibility, NOT by transform alone.
A transform/filter on any Elementor ancestor makes position:fixed
resolve against that ancestor instead of the viewport, which left
the old translateY(140%) version parked visibly at the section
bottom. The JS also moves this node to for the same reason. */
.vm-toast{
position:fixed; bottom:30px; left:50%; z-index:99999;
transform:translateX(-50%) translateY(20px);
background:var(–vm-green-dark); color:var(–vm-cream);
padding:13px 24px; border-radius:99px;
box-shadow:0 16px 34px rgba(0,0,0,0.25);
font-family:’Montserrat’, sans-serif;
font-size:13px; font-weight:600;
display:flex; align-items:center; gap:10px;
opacity:0;
visibility:hidden;
transition:transform .45s cubic-bezier(.34,1.56,.64,1), opacity .3s ease, visibility .3s;
pointer-events:none;
}
.vm-toast.vm-show{
transform:translateX(-50%) translateY(0);
opacity:1;
visibility:visible;
}
.vm-toast i{ color:var(–vm-orange); }
.vm-toast.vm-err{ background:#8a2f2f; }
@media (max-width:1024px){ .vm-product-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:640px){
.vm-products{ padding:64px 16px 70px; }
.vm-products-head h2{ font-size:27px; }
.vm-product-grid{ grid-template-columns:1fr; max-width:420px; margin:0 auto; }
.vm-product-quick{ opacity:1; transform:none; } /* no hover on touch */
}