/*
Theme Name: Viglan Shopfront
Theme URI: https://www.viglan.com/
Author: Viglan
Author URI: https://www.viglan.com/
Description: A fast, reusable storefront theme for local retail businesses that sell through WhatsApp. Brand colours, logo, contact details, opening hours and every front-page section are Customizer settings, so one theme dresses any client. WooCommerce-ready, no page builder, no external requests.
Version: 1.3.0
Requires at least: 6.4
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: viglan-shopfront
Tags: e-commerce, custom-colors, custom-logo, custom-menu, featured-images, translation-ready
*/

/* ============================================================ tokens */
:root{
	--brand:#ef8a2b;
	--brand-dark:#c96b12;
	--ink:#22262b;
	--surface:#fff8f1;
	--radius:16px;

	--ink-soft:#5b636c;
	--line:#e8e3dc;
	--white:#fff;
	--max:1180px;
	--gap:clamp(1rem,2.5vw,2rem);
	--shadow-sm:0 1px 2px rgba(16,18,20,.06), 0 4px 14px rgba(16,18,20,.05);
	--shadow-md:0 10px 34px rgba(16,18,20,.10);
	--font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
}

/* ============================================================ base */
*,*::before,*::after{ box-sizing:border-box; }
html{
	-webkit-text-size-adjust:100%; scroll-behavior:smooth;
	/* `clip`, not `hidden`: hidden on the root turns the whole document into a
	   scroll container and kills position:sticky on the header. This exists
	   because the mobile nav drawer is parked at translateX(100%) — laid out,
	   off-screen, and otherwise good for a stray horizontal scrollbar on every
	   phone-width page. */
	overflow-x:clip;
}
body{
	margin:0; font-family:var(--font); color:var(--ink); background:var(--white);
	font-size:clamp(16px,.55vw + 14.5px,17px); line-height:1.65;
	-webkit-font-smoothing:antialiased;
}
img,svg,iframe{ max-width:100%; }
img{ height:auto; display:block; }
a{ color:var(--brand-dark); text-underline-offset:.18em; }
a:hover{ color:var(--brand); }
h1,h2,h3,h4{ line-height:1.15; margin:0 0 .5em; font-weight:800; letter-spacing:-.015em; }
h1{ font-size:clamp(2rem,4.2vw,3.1rem); }
h2{ font-size:clamp(1.5rem,2.8vw,2.15rem); }
h3{ font-size:clamp(1.1rem,1.5vw,1.3rem); }
p{ margin:0 0 1em; }
ul,ol{ margin:0 0 1em; padding-left:1.2em; }
hr{ border:0; border-top:1px solid var(--line); margin:2.5rem 0; }

.wrap{ width:min(100% - 2.2rem, var(--max)); margin-inline:auto; }
.screen-reader-text{
	position:absolute !important; width:1px; height:1px; overflow:hidden;
	clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}
.skip-link{
	position:absolute; left:-9999px; top:0; z-index:1000;
	background:var(--ink); color:#fff; padding:.7rem 1rem; border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0; }
:focus-visible{ outline:3px solid var(--brand); outline-offset:2px; border-radius:4px; }

/* ============================================================ buttons */
.btn,
.wp-element-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button{
	display:inline-flex; align-items:center; justify-content:center; gap:.5em;
	padding:.78em 1.4em; border-radius:999px; border:2px solid transparent;
	font-weight:700; font-size:.98rem; line-height:1.2; text-decoration:none; cursor:pointer;
	transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
	background:var(--brand); color:#fff;
}
.btn:hover,.woocommerce a.button:hover,.woocommerce button.button:hover{
	background:var(--brand-dark); color:#fff; transform:translateY(-1px); box-shadow:var(--shadow-md);
}
.btn--primary{ background:var(--brand); color:#fff; }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn--ghost:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }
.btn--lg{ padding:.95em 1.7em; font-size:1.05rem; }

/* ============================================================ header */
.topbar{ background:var(--ink); color:#f4f1ee; font-size:.86rem; }
.topbar__inner{ display:flex; gap:1rem; align-items:center; justify-content:space-between; padding:.5rem 0; flex-wrap:wrap; }
.topbar p{ margin:0; }
.topbar__msg,.topbar__phone{ display:inline-flex; align-items:center; gap:.45rem; }
.topbar__phone{ color:#fff; text-decoration:none; font-weight:700; }
.topbar__phone:hover{ color:var(--brand); }
.topbar__icon{ width:1.05em; height:1.05em; opacity:.85; }

.site-header{ position:sticky; top:0; z-index:60; background:rgba(255,255,255,.92); backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--line); }
.site-header.is-stuck{ box-shadow:var(--shadow-sm); }
.site-header__inner{ display:flex; align-items:center; gap:1rem; padding:.7rem 0; }

.brand{ display:flex; align-items:center; gap:.7rem; margin-right:auto; }
.brand img,.brand .custom-logo{ width:52px; height:52px; object-fit:contain; border-radius:50%; }
.brand__text{ display:flex; flex-direction:column; line-height:1.15; }
.brand__name{ font-weight:900; font-size:1.15rem; color:var(--ink); text-decoration:none; letter-spacing:-.02em; }
.brand__tag{ font-size:.74rem; color:var(--ink-soft); }

.primary-nav{ display:flex; align-items:center; gap:1.1rem; }
.primary-nav__list{ display:flex; gap:1.1rem; list-style:none; margin:0; padding:0; align-items:center; }
.primary-nav__list a{ color:var(--ink); text-decoration:none; font-weight:600; font-size:.96rem; padding:.35rem 0; display:inline-block; border-bottom:2px solid transparent; }
.primary-nav__list a:hover,
.primary-nav__list .current-menu-item > a{ color:var(--brand-dark); border-bottom-color:var(--brand); }
.primary-nav__list .sub-menu{ display:none; }
.primary-nav__cta{ font-size:.9rem !important; padding:.55em 1.05em !important; }

.nav-toggle{ display:none; background:none; border:0; padding:.5rem; cursor:pointer; }
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after{ display:block; width:24px; height:2px; background:var(--ink); border-radius:2px; position:relative; }
.nav-toggle__bars::before,.nav-toggle__bars::after{ content:""; position:absolute; }
.nav-toggle__bars::before{ top:-7px; }
.nav-toggle__bars::after{ top:7px; }

@media (max-width:900px){
	.nav-toggle{ display:block; }
	.primary-nav{
		position:fixed; inset:auto 0 0 0; top:0; height:100dvh; background:#fff;
		flex-direction:column; align-items:stretch; justify-content:flex-start;
		gap:.25rem; padding:5.5rem 1.4rem 2rem; transform:translateX(100%);
		transition:transform .25s ease, visibility 0s linear .25s;
		overflow:auto; z-index:55;
		/* Parked off-screen it is still laid out, so it must be taken out of the
		   tab order — and see the html{overflow-x:clip} note below, without which
		   the parked panel gives every page a horizontal scrollbar on a phone. */
		visibility:hidden;
	}
	.primary-nav.is-open{ transform:none; visibility:visible; transition-delay:0s; }
	.primary-nav__list{ flex-direction:column; align-items:stretch; gap:0; }
	.primary-nav__list a{ padding:.85rem 0; border-bottom:1px solid var(--line); font-size:1.05rem; }
	.primary-nav__cta{ margin-top:1.2rem; align-self:flex-start; }
	body.nav-open{ overflow:hidden; }
}

/* ============================================================ hero */
.hero{ background:linear-gradient(170deg,var(--surface) 0%, #fff 78%); border-bottom:1px solid var(--line); }
.hero__inner{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:center; padding:clamp(2.4rem,6vw,4.6rem) 0; }
.hero__eyebrow{ display:inline-flex; align-items:center; gap:.5rem; background:#fff; border:1px solid var(--line); color:var(--brand-dark); font-weight:700; font-size:.82rem; padding:.4rem .85rem; border-radius:999px; box-shadow:var(--shadow-sm); }
.hero__eyebrow svg{ width:1.1em; height:1.1em; }
.hero__title{ margin-top:.9rem; }
.hero__text{ font-size:clamp(1.02rem,1.2vw,1.15rem); color:var(--ink-soft); max-width:46ch; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:.7rem; margin:1.5rem 0 0; }
.hero__stats{ display:flex; flex-wrap:wrap; gap:clamp(1.2rem,3vw,2.6rem); list-style:none; margin:2.2rem 0 0; padding:0; }
.hero__stats li{ display:flex; flex-direction:column; }
.hero__stats strong{ font-size:1.6rem; font-weight:900; color:var(--brand-dark); line-height:1.1; }
.hero__stats span{ font-size:.83rem; color:var(--ink-soft); }
.hero__media img{ width:100%; border-radius:calc(var(--radius) * 1.6); box-shadow:var(--shadow-md); }
@media (max-width:820px){ .hero__inner{ grid-template-columns:1fr; } .hero__media{ order:-1; } }

/* ============================================================ sections */
.section{ padding:clamp(2.6rem,6vw,4.4rem) 0; }
.section--tint{ background:var(--surface); }
.section__head{ max-width:62ch; margin-bottom:clamp(1.4rem,3vw,2.2rem); }
.section__title{ margin:0 0 .4rem; }
.section__title--sm{ font-size:1.15rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); }
.section__text{ color:var(--ink-soft); margin:0; }
.section__more{ margin-top:2rem; text-align:center; }

/* usps */
.usps{ padding:clamp(1.6rem,3vw,2.4rem) 0; border-bottom:1px solid var(--line); }
.usps__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:var(--gap); }
.usp__icon{ display:inline-grid; place-items:center; width:42px; height:42px; border-radius:12px; background:color-mix(in srgb,var(--brand) 14%,transparent); color:var(--brand-dark); margin-bottom:.6rem; }
.usp__icon svg{ width:22px; height:22px; }
.usp__title{ font-size:1rem; margin:0 0 .2rem; }
.usp__text{ font-size:.9rem; color:var(--ink-soft); margin:0; }

/* category cards */
.cat-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:var(--gap); }
.cat-card{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; text-decoration:none; color:inherit; transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.cat-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:color-mix(in srgb,var(--brand) 40%,var(--line)); }
.cat-card__media{ aspect-ratio:1; display:grid; place-items:center; background:var(--surface); overflow:hidden; }
.cat-card__media img{ width:100%; height:100%; object-fit:cover; }
.cat-card__fallback{ width:44px; height:44px; color:var(--brand); opacity:.6; }
.cat-card__body{ padding:.85rem 1rem 1.05rem; display:flex; flex-direction:column; gap:.15rem; }
.cat-card__title{ font-weight:800; }
.cat-card__count{ font-size:.82rem; color:var(--ink-soft); }

/* services */
.svc-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:var(--gap); }
.svc{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:1.4rem; }
.svc__icon{ display:inline-grid; place-items:center; width:46px; height:46px; border-radius:14px; background:var(--ink); color:#fff; margin-bottom:.8rem; }
.svc__icon svg{ width:24px; height:24px; }
.svc__title{ margin:0 0 .3rem; font-size:1.08rem; }
.svc__text{ margin:0; color:var(--ink-soft); font-size:.94rem; }

/* brands */
.brand-list{ display:flex; flex-wrap:wrap; gap:.55rem; list-style:none; margin:0; padding:0; }
.brand-list li{ background:#fff; border:1px solid var(--line); border-radius:999px; padding:.45rem 1rem; font-weight:600; font-size:.9rem; color:var(--ink-soft); }

/* cta */
.cta{ background:var(--ink); color:#fff; padding:clamp(2.2rem,5vw,3.4rem) 0; }
.cta__inner{ display:flex; gap:var(--gap); align-items:center; justify-content:space-between; flex-wrap:wrap; }
.cta__title{ margin:0 0 .3rem; color:#fff; }
.cta__text{ margin:0; color:#cfd4d9; max-width:52ch; }
.cta__actions{ display:flex; gap:.7rem; flex-wrap:wrap; }
.cta .btn--ghost{ color:#fff; border-color:rgba(255,255,255,.35); }
.cta .btn--ghost:hover{ background:#fff; color:var(--ink); }

/* map */
.mapstrip iframe{ display:block; width:100%; height:340px; border:0; filter:saturate(.9); }

/* ============================================================ page heads / prose */
.page-head{ background:var(--surface); border-bottom:1px solid var(--line); padding:clamp(1.8rem,4vw,3rem) 0; }
.page-head__title{ margin:0; }
.page-head__text,.page-head__meta{ color:var(--ink-soft); margin:.5rem 0 0; }
.page-hero{ margin-top:1.8rem; }
.page-hero img{ width:100%; border-radius:var(--radius); box-shadow:var(--shadow-sm); }
.prose{ max-width:72ch; padding:clamp(1.8rem,4vw,3rem) 0; }
.prose.notfound{ text-align:center; margin-inline:auto; }
.prose h2{ margin-top:2rem; }
.prose ul{ padding-left:1.1em; }
.prose li{ margin-bottom:.35em; }
.prose table{ width:100%; border-collapse:collapse; margin:1.4rem 0; }
.prose th,.prose td{ text-align:left; padding:.6rem .7rem; border-bottom:1px solid var(--line); }
.prose blockquote{ margin:1.5rem 0; padding:.4rem 0 .4rem 1.1rem; border-left:4px solid var(--brand); color:var(--ink-soft); }

/* posts */
.post-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:var(--gap); padding:2.4rem 0; }
.post-card__link{ display:flex; flex-direction:column; text-decoration:none; color:inherit; background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; height:100%; }
.post-card__link:hover{ box-shadow:var(--shadow-md); }
.post-card__media img{ width:100%; aspect-ratio:16/10; object-fit:cover; }
.post-card__body{ padding:1rem; display:flex; flex-direction:column; gap:.35rem; }
.post-card__title{ font-weight:800; }
.post-card__excerpt{ font-size:.9rem; color:var(--ink-soft); }

/* search form */
.searchform{ display:flex; gap:.5rem; margin:1.4rem 0; }
.searchform__input{ flex:1; padding:.7rem .9rem; border:1px solid var(--line); border-radius:999px; font:inherit; }

/* ============================================================ footer */
.site-footer{ background:#fbf7f2; border-top:1px solid var(--line); margin-top:0; }
.site-footer__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:var(--gap); padding:clamp(2.2rem,5vw,3.4rem) 0; }
.site-footer__title{ font-size:1rem; margin:0 0 .8rem; }
.site-footer p{ font-size:.92rem; color:var(--ink-soft); }
.ico-line{ display:flex; gap:.55rem; align-items:flex-start; }
.ico-line svg{ width:1.1em; height:1.1em; flex:0 0 auto; margin-top:.28em; color:var(--brand-dark); }
.hours{ list-style:none; margin:0; padding:0; font-size:.92rem; }
.hours li{ display:flex; justify-content:space-between; gap:1rem; padding:.35rem 0; border-bottom:1px dashed var(--line); color:var(--ink-soft); }
.hours strong{ color:var(--ink); white-space:nowrap; }
.footer-nav{ list-style:none; margin:0; padding:0; font-size:.92rem; }
.footer-nav li{ padding:.25rem 0; }
.footer-nav a{ color:var(--ink-soft); text-decoration:none; }
.footer-nav a:hover{ color:var(--brand-dark); }
.social{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.8rem; }
.social__link{ font-size:.85rem; font-weight:600; text-decoration:none; border:1px solid var(--line); border-radius:999px; padding:.35rem .8rem; color:var(--ink-soft); background:#fff; }
.social__link:hover{ border-color:var(--brand); color:var(--brand-dark); }
.site-footer__bar{ border-top:1px solid var(--line); }
.site-footer__bar-inner{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding:1rem 0; font-size:.83rem; color:var(--ink-soft); }
.site-footer__bar p{ margin:0; font-size:.83rem; }
@media (max-width:860px){ .site-footer__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .site-footer__grid{ grid-template-columns:1fr; } }

/* ============================================================ WooCommerce */
.shop-main{ padding-bottom:clamp(2.4rem,5vw,4rem); }
.woocommerce .wrap{ width:min(100% - 2.2rem, var(--max)); }

.woocommerce ul.products{
	display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
	gap:var(--gap); margin:2rem 0 0; padding:0; list-style:none;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after{ content:none; }
.woocommerce ul.products li.product{
	width:auto !important; margin:0 !important; float:none !important;
	background:#fff; border:1px solid var(--line); border-radius:var(--radius);
	overflow:hidden; display:flex; flex-direction:column; padding:0;
	transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.woocommerce ul.products li.product:hover{
	transform:translateY(-3px); box-shadow:var(--shadow-md);
	border-color:color-mix(in srgb,var(--brand) 40%,var(--line));
}
.woocommerce ul.products li.product a img{
	width:100%; aspect-ratio:1; object-fit:cover; margin:0; background:var(--surface);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
	font-size:1rem !important; font-weight:800; line-height:1.3;
	padding:.85rem 1rem 0 !important; margin:0 !important; color:var(--ink);
}
.woocommerce ul.products li.product .loop-excerpt{
	padding:.3rem 1rem 0; margin:0; font-size:.86rem; color:var(--ink-soft);
}
.woocommerce ul.products li.product .vwo-btn--loop{
	margin:auto 1rem 1rem; width:calc(100% - 2rem);
}
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link{ text-decoration:none; }

/* category tiles rendered by the shop root */
.woocommerce ul.products li.product-category a{ display:block; text-decoration:none; }
.woocommerce ul.products li.product-category h2{
	font-size:1.02rem !important; font-weight:800; padding:.9rem 1rem 1rem !important; margin:0 !important; color:var(--ink);
}
.woocommerce ul.products li.product-category mark.count{ background:none; color:var(--ink-soft); font-weight:600; }

/* single product */
.woocommerce div.product{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,3rem); padding-top:clamp(1.6rem,4vw,2.6rem); }
.woocommerce div.product .woocommerce-product-gallery{ width:100% !important; float:none !important; margin:0 !important; }
.woocommerce div.product .woocommerce-product-gallery__image img{ border-radius:var(--radius); }
.woocommerce div.product .summary{ width:100% !important; float:none !important; margin:0 !important; }
.woocommerce div.product .product_title{ font-size:clamp(1.6rem,3vw,2.3rem); margin-bottom:.4rem; }
.woocommerce div.product .woocommerce-product-details__short-description{ color:var(--ink-soft); }
.woocommerce div.product .woocommerce-tabs{ grid-column:1 / -1; }
.woocommerce div.product .related,
.woocommerce div.product .up-sells{ grid-column:1 / -1; }
.woocommerce div.product p.price,
.woocommerce div.product span.price{ display:none; }
@media (max-width:800px){ .woocommerce div.product{ grid-template-columns:1fr; } }

.product-badges{ display:flex; flex-wrap:wrap; gap:.4rem; margin:0 0 .9rem; }
.badge{ background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:.25rem .7rem; font-size:.78rem; font-weight:700; color:var(--ink-soft); }

.woocommerce div.product .woocommerce-tabs ul.tabs{ padding:0; margin:0 0 1rem; border-bottom:1px solid var(--line); }
.woocommerce div.product .woocommerce-tabs ul.tabs::before{ content:none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li{ background:none; border:0; border-radius:0; margin:0 1.2rem 0 0; padding:0; }
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after{ content:none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a{ padding:.6rem 0; font-weight:700; color:var(--ink-soft); border-bottom:3px solid transparent; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{ color:var(--ink); border-bottom-color:var(--brand); }

/* misc woo chrome */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering{ color:var(--ink-soft); font-size:.9rem; }
.woocommerce .woocommerce-ordering select{ padding:.5rem .7rem; border:1px solid var(--line); border-radius:999px; font:inherit; }
.woocommerce nav.woocommerce-pagination ul{ border:0; display:flex; gap:.4rem; justify-content:center; margin-top:2rem; }
.woocommerce nav.woocommerce-pagination ul li{ border:0; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span{
	border:1px solid var(--line); border-radius:10px; padding:.5rem .85rem; color:var(--ink); background:#fff;
}
.woocommerce nav.woocommerce-pagination ul li span.current{ background:var(--brand); border-color:var(--brand); color:#fff; }
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error{ border-top-color:var(--brand); border-radius:var(--radius); background:var(--surface); }
.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before{ color:var(--brand); }
.woocommerce span.onsale{ display:none; }

/* widgets */
.widget{ margin-bottom:1.8rem; }
.widget__title{ font-size:1rem; margin-bottom:.6rem; }
.widget ul{ list-style:none; padding:0; margin:0; font-size:.94rem; }
.widget li{ padding:.28rem 0; border-bottom:1px solid var(--line); }
.widget a{ text-decoration:none; color:var(--ink); }
.widget a:hover{ color:var(--brand-dark); }

/* print */
@media print{
	.topbar,.site-header,.site-footer,.vwo-float,.cta{ display:none !important; }
}

/* WhatsApp button inside theme layouts */
.vwo-btn--hero{ padding:.78em 1.4em; font-size:.98rem; }
.hero__actions .vwo-btn{ box-shadow:var(--shadow-sm); }
.cta__actions .vwo-btn{ padding:.95em 1.7em; font-size:1.05rem; }
.primary-nav__cta.vwo-btn{ font-size:.9rem; padding:.55em 1.05em; }
.prose .vwo-btn{ margin:.4rem 0 1.2rem; }
.vwo-btn.btn--ghost{ background:transparent !important; border-color:var(--line); color:var(--ink) !important; }
.vwo-btn.btn--ghost:hover{ background:var(--ink) !important; color:#fff !important; }

/* Stop the hero art from eating the whole screen once the grid stacks */
@media (max-width:820px){
	.hero__inner{ padding-top:1.6rem; }
	.hero__media img{ max-height:46vh; object-fit:cover; object-position:center; }
	.hero__stats{ gap:1.4rem 2rem; }
	.topbar__inner{ justify-content:center; text-align:center; }
}
@media (max-width:480px){
	.hero__actions .btn,
	.hero__actions .vwo-btn{ flex:1 1 100%; }
	.cta__actions{ width:100%; }
	.cta__actions .btn,
	.cta__actions .vwo-btn{ flex:1 1 100%; }
}

/* ====================================================== [gallery] shortcode
   A classic theme gets no gallery CSS from core, so WordPress's own
   [gallery] falls back to one full-width image per row. Grid it here so the
   shortcode is usable on any client site without a page builder. */
.gallery{
	display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
	gap:14px; margin:1.6rem 0; padding:0;
}
.gallery-columns-1{ grid-template-columns:minmax(0,1fr); }
.gallery-columns-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.gallery-columns-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.gallery-columns-5{ grid-template-columns:repeat(5,minmax(0,1fr)); }
.gallery .gallery-item{ margin:0 !important; width:auto !important; float:none !important; }
.gallery .gallery-icon{ margin:0; }
.gallery .gallery-icon a{ display:block; }
.gallery img{
	width:100%; height:100%; aspect-ratio:4/3; object-fit:cover;
	border:0 !important; border-radius:var(--radius); box-shadow:var(--shadow-sm);
	transition:transform .25s ease, box-shadow .25s ease;
}
.gallery .gallery-icon a:hover img{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.gallery .gallery-caption{
	font-size:.86rem; color:var(--ink-soft); margin:.45rem 0 0; line-height:1.4;
}
@media (max-width:820px){
	.gallery-columns-3,.gallery-columns-4,.gallery-columns-5{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:440px){
	.gallery,.gallery-columns-2,.gallery-columns-3,.gallery-columns-4,.gallery-columns-5{
		grid-template-columns:minmax(0,1fr);
	}
}

/* =====================================================================
   DESIGN SKINS (1.2.0)
   Colour lives in :root. This block is everything else that makes one
   client's site look unlike another's — type pairing, corner language,
   surface texture, section dividers, hero composition. Every default
   below reproduces the 1.0 look, so an existing site does not move.
   ===================================================================== */

:root{
	--font-head:var(--font);
	--head-track:-.015em;
	--accent:var(--brand);
	--accent-dark:var(--brand-dark);
	--shape-media:var(--radius);
	--shape-lead:calc(var(--radius) * 1.6);
	--leaf-sprig:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 22'%3E%3Crect x='8' y='10.3' width='124' height='1.4' rx='.7'/%3E%3Cpath d='M70 11C74 3 84 1 93 3 91 11 80 14.5 70 11Z'/%3E%3Cpath d='M70 11C66 19 56 21 47 19 49 11 60 7.5 70 11Z'/%3E%3Ccircle cx='8' cy='11' r='2'/%3E%3Ccircle cx='132' cy='11' r='2'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------ typography */
h1,h2,h3,h4,
.hero__title,.section__title,.cat-card__title,.svc__title,.usp__title,
.woocommerce-loop-product__title,.product_title,.widget__title,.footer__title{
	font-family:var(--font-head);
	letter-spacing:var(--head-track);
}
/* A serif at 800 turns into a slab. Drop the weight and open the line. */
body.vsf-head-serif h1,body.vsf-head-serif h2,body.vsf-head-serif h3,body.vsf-head-serif h4,
body.vsf-head-serif .hero__title,body.vsf-head-serif .section__title{
	font-weight:600; line-height:1.12;
}
body.vsf-head-serif .hero__title{ font-weight:600; }
body.vsf-head-serif .cat-card__title,
body.vsf-head-serif .woocommerce-loop-product__title{ font-weight:600; font-size:1.06rem; }
body.vsf-head-slab h1,body.vsf-head-slab h2,body.vsf-head-slab h3{ font-weight:700; }

/* ---------------------------------------------------------------- shapes */
body.vsf-shape-square { --shape-media:0; --shape-lead:0; }
body.vsf-shape-round  { --shape-media:calc(var(--radius) * 1.7); --shape-lead:calc(var(--radius) * 2.6); }
body.vsf-shape-organic{ --shape-media:var(--radius) 58px var(--radius) 58px; --shape-lead:130px 26px 130px 26px; }

.hero__media img,.hero__img{ border-radius:var(--shape-lead); }
.cat-card__media,.cat-card__media img{ border-radius:var(--shape-media); }
.gallery img{ border-radius:var(--shape-media); }
ul.products li.product img,
.woocommerce-product-gallery__image img{ border-radius:var(--shape-media); }
/* An organic outer card with an organic inner image reads as a mistake.
   Keep the card square-ish and let the picture carry the shape. */
body.vsf-shape-organic .cat-card{ border-radius:var(--radius); }
body.vsf-shape-organic .cat-card__media{ background:transparent; padding:0; }

/* --------------------------------------------------------------- texture */
body.vsf-texture-paper .hero,
body.vsf-texture-paper .section--tint,
body.vsf-texture-paper .cta,
body.vsf-texture-grid  .hero,
body.vsf-texture-grid  .section--tint{ position:relative; isolation:isolate; }
body.vsf-texture-paper .hero::before,
body.vsf-texture-paper .section--tint::before,
body.vsf-texture-paper .cta::before{
	content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
	background-image:radial-gradient(currentColor 1px,transparent 1.15px);
	background-size:13px 13px; opacity:.055;
}
body.vsf-texture-grid .hero::before,
body.vsf-texture-grid .section--tint::before{
	content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
	background-image:linear-gradient(currentColor 1px,transparent 1px),linear-gradient(90deg,currentColor 1px,transparent 1px);
	background-size:26px 26px; opacity:.04;
}

/* -------------------------------------------------------------- dividers */
.section__head::after{ content:none; }
body.vsf-divider-rule .section__head::after{
	content:""; display:block; width:58px; height:3px; border-radius:3px;
	background:var(--accent); margin:1rem 0 0;
}
body.vsf-divider-leaf .section__head::after{
	content:""; display:block; width:140px; height:22px; margin:1rem 0 0;
	background-color:var(--accent);
	-webkit-mask:var(--leaf-sprig) left center/contain no-repeat;
	mask:var(--leaf-sprig) left center/contain no-repeat;
}
body.vsf-divider-seed .section__head::after{
	content:"● ● ●"; display:block; font-size:.5rem; letter-spacing:.7em;
	color:var(--accent); margin:.9rem 0 0;
}
/* --sm headings are already a rule-like device; do not double up. */
.section__head:has(.section__title--sm)::after{ content:none; }

/* ------------------------------------------------------------------ hero */
.hero__media{ position:relative; }
.hero__frame{ display:none; }
body.vsf-hero-framed .hero__frame{
	display:block; position:absolute; inset:22px -22px -22px 22px;
	border:2px solid var(--accent); border-radius:var(--shape-lead);
	z-index:0; pointer-events:none;
}
body.vsf-hero-framed .hero__media img{ position:relative; z-index:1; }
body.vsf-hero-arch .hero__media img{
	border-radius:calc(50vw) calc(50vw) var(--radius) var(--radius);
}
@media (max-width:820px){
	body.vsf-hero-framed .hero__frame{ inset:14px -14px -14px 14px; }
}

/* ----------------------------------------------------------- accent uses */
.hero__eyebrow{ color:var(--accent-dark); border-color:color-mix(in srgb,var(--accent) 35%,var(--line)); }
.hero__stats strong{ color:var(--accent-dark); }
.cat-card__count{ color:var(--accent-dark); font-weight:600; }
.svc__icon{ background:var(--brand-dark); }
.usp__icon{ background:color-mix(in srgb,var(--accent) 15%,transparent); color:var(--accent-dark); }
.brand-list li{ border-color:color-mix(in srgb,var(--accent) 30%,var(--line)); }
.section__title--sm{ color:var(--accent-dark); }

/* Product cards get the same restraint as category cards. */
ul.products li.product .woocommerce-loop-product__title{ letter-spacing:var(--head-track); }

/* =====================================================================
   LAYOUT + PLAYFUL DEVICES (1.3.0)
   ===================================================================== */

/* --------------------------------------------------- the four-tone palette
   One accent is tasteful; a nursery sells colour, so cards, chips and stat
   numbers cycle through four. Every value falls back to the brand, so a client
   who sets none of them gets the old single-colour site. */
:root{
	--t0:var(--brand);
	--t1:var(--accent);
	--t2:var(--accent);
	--t3:var(--brand-dark);
	--t0-ink:var(--brand-dark);
	--t1-ink:var(--accent-dark);
	--t2-ink:var(--accent-dark);
	--t3-ink:var(--brand-dark);
}
.tone-0{ --tone:var(--t0); --tone-ink:var(--t0-ink); }
.tone-1{ --tone:var(--t1); --tone-ink:var(--t1-ink); }
.tone-2{ --tone:var(--t2); --tone-ink:var(--t2-ink); }
.tone-3{ --tone:var(--t3); --tone-ink:var(--t3-ink); }

/* ------------------------------------------------------- page layout FIX
   `.prose` was a 72ch measure inside an 1180px wrap, so every content page
   rendered in the left half of the screen with dead space beside it. A reading
   measure is right — floating it in an empty box is not. */
.pagegrid{ display:grid; gap:clamp(1.6rem,4vw,3rem); padding:clamp(1.8rem,4vw,3rem) 0; align-items:start; }
.pagegrid .prose{ max-width:none; padding:0; }
.pagegrid--narrow{ grid-template-columns:minmax(0,72ch); justify-content:center; }
.pagegrid--wide{ grid-template-columns:minmax(0,1fr); }
.pagegrid--sidebar{ grid-template-columns:minmax(0,1fr) 330px; }
.pagegrid--sidebar .prose{ max-width:68ch; }
@media (max-width:960px){
	.pagegrid--sidebar{ grid-template-columns:minmax(0,1fr); }
}

.pageside__card{
	position:sticky; top:96px; background:#fff; border:1px solid var(--line);
	border-radius:calc(var(--radius) * 1.4); padding:1.35rem 1.35rem 1.1rem;
	box-shadow:var(--shadow-sm);
}
.pageside__title{ margin:0 0 .35rem; font-size:1.2rem; }
.pageside__text{ margin:0 0 1rem; color:var(--ink-soft); font-size:.93rem; }
.pageside .btn{ margin-bottom:.55rem; }
.btn--block{ display:flex; width:100%; justify-content:center; align-items:center; gap:.45rem; }
.btn--block svg{ width:1.05em; height:1.05em; }
.pageside__facts{ margin:1rem 0 0; padding:1rem 0 0; border-top:1px dashed var(--line); display:grid; gap:.7rem; }
.pageside__facts div{ display:grid; gap:.1rem; }
.pageside__facts dt{ display:flex; align-items:center; gap:.4rem; font-size:.76rem; text-transform:uppercase; letter-spacing:.07em; color:var(--accent-dark); font-weight:700; }
.pageside__facts dt svg{ width:1em; height:1em; }
.pageside__facts dd{ margin:0; font-size:.93rem; color:var(--ink); }

/* Galleries and other full-width pages should not inherit a reading measure. */
.pagegrid--wide .gallery{ margin-top:.5rem; }

/* ------------------------------------------------------------ wave edges
   A hard horizontal line between bands is what makes a template look like a
   template. A soft edge costs one pseudo-element. */
.edge{
	position:absolute; left:0; right:0; height:clamp(28px,4vw,58px);
	background:inherit; pointer-events:none; z-index:2;
}
.edge--bottom{ bottom:-1px; border-radius:50% 50% 0 0 / 100% 100% 0 0; }
.edge--top{ top:-1px; border-radius:0 0 50% 50% / 0 0 100% 100%; }
.hero,.page-head,.section--tint,.section--quotes{ position:relative; }
.hero .edge--bottom,.page-head .edge--bottom{ background:#fff; }
.section--tint .edge--top,.section--quotes .edge--top{ background:#fff; }
.section--tint .edge--bottom,.section--quotes .edge--bottom{ background:#fff; }

/* --------------------------------------------------------------- sticker */
.sticker{
	position:absolute; right:-14px; top:-18px; z-index:3;
	width:104px; height:104px; border-radius:50%;
	display:grid; place-items:center; text-align:center;
	background:var(--accent); color:#fff; font-weight:700; font-size:.74rem; line-height:1.15;
	padding:.7rem; transform:rotate(-9deg);
	box-shadow:0 8px 22px rgba(0,0,0,.18);
	border:3px dashed rgba(255,255,255,.55);
	font-family:var(--font);
}
@media (max-width:820px){ .sticker{ width:84px; height:84px; font-size:.66rem; right:2px; top:-10px; } }

/* ------------------------------------------------------------ hero stats */
.hero__stats li strong{ color:var(--tone-ink,var(--accent-dark)); }

/* ------------------------------------------------------------ usp tiles */
.usps{ border-bottom:0; padding:clamp(1.8rem,4vw,2.8rem) 0; }
.usp{
	background:color-mix(in srgb,var(--tone,var(--brand)) 8%,#fff);
	border:1px solid color-mix(in srgb,var(--tone,var(--brand)) 22%,transparent);
	border-radius:calc(var(--radius) * 1.3); padding:1.15rem 1.15rem 1.25rem;
}
.usp__icon{ background:var(--tone,var(--brand)); color:#fff; border-radius:14px; }
.usp__title{ margin-bottom:.25rem; }

/* ----------------------------------------------------------------- chips */
.chips{ display:flex; flex-wrap:wrap; gap:.5rem; list-style:none; margin:0 0 1.8rem; padding:0; }
.chip{
	display:inline-flex; align-items:center; gap:.45rem; text-decoration:none;
	background:color-mix(in srgb,var(--tone,var(--brand)) 12%,#fff);
	color:color-mix(in srgb,var(--tone,var(--brand)) 78%,#000);
	border:1px solid color-mix(in srgb,var(--tone,var(--brand)) 30%,transparent);
	border-radius:999px; padding:.42rem .9rem; font-size:.9rem; font-weight:600;
	transition:transform .14s ease, background .14s ease;
}
.chip em{ font-style:normal; font-size:.75rem; opacity:.7; }
.chip:hover{ transform:translateY(-2px); background:color-mix(in srgb,var(--tone,var(--brand)) 20%,#fff); color:color-mix(in srgb,var(--tone,var(--brand)) 82%,#000); }

/* --------------------------------------------------------- category bento */
.cat-mosaic{
	display:grid; gap:clamp(.8rem,1.6vw,1.15rem);
	grid-template-columns:repeat(4,minmax(0,1fr));
	grid-auto-rows:186px;
}
.cat-tile{
	position:relative; overflow:hidden; text-decoration:none; color:#fff;
	border-radius:calc(var(--radius) * 1.4); display:block;
	background:var(--tone,var(--brand));
	transition:transform .18s ease, box-shadow .18s ease;
}
.cat-tile--big{ grid-column:span 2; grid-row:span 2; }
.cat-tile:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.cat-tile__media{ position:absolute; inset:0; }
.cat-tile__media img{ width:100%; height:100%; object-fit:cover; border-radius:0; transition:transform .5s ease; }
.cat-tile:hover .cat-tile__media img{ transform:scale(1.05); }
.cat-tile__fallback{ width:52px; height:52px; margin:2rem auto; color:#fff; opacity:.7; }
.cat-tile::after{
	content:""; position:absolute; inset:0;
	background:linear-gradient(to top,rgba(12,22,16,.82) 0%,rgba(12,22,16,.30) 42%,rgba(12,22,16,0) 72%);
}
.cat-tile__body{ position:absolute; left:0; right:0; bottom:0; z-index:1; padding:.9rem 1rem 1rem; display:grid; gap:.1rem; }
.cat-tile__title{ font-family:var(--font-head); letter-spacing:var(--head-track); font-size:1.05rem; font-weight:600; text-shadow:0 1px 12px rgba(0,0,0,.4); }
.cat-tile--big .cat-tile__title{ font-size:1.5rem; }
.cat-tile__count{ font-size:.8rem; opacity:.92; }
@media (max-width:900px){
	.cat-mosaic{ grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:150px; }
	.cat-tile--big{ grid-column:span 2; grid-row:span 1; }
	.cat-tile--big .cat-tile__title{ font-size:1.2rem; }
}

/* ------------------------------------------------------ split photo rows */
.split{
	display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
	gap:clamp(1.4rem,4vw,3.2rem); align-items:center;
	padding:clamp(1.4rem,3vw,2.4rem) 0;
}
.split + .split{ border-top:1px dashed var(--line); }
.split--flip .split__media{ order:2; }
.split__media img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--shape-lead); box-shadow:var(--shadow-sm); }
.split__icon{ display:inline-grid; place-items:center; width:48px; height:48px; border-radius:16px; background:var(--tone,var(--brand)); color:#fff; margin-bottom:.7rem; }
.split__icon svg{ width:24px; height:24px; }
.split__title{ margin:0 0 .4rem; font-size:clamp(1.3rem,2.2vw,1.7rem); }
.split__text{ margin:0; color:var(--ink-soft); }
.split__more{ display:inline-block; margin-top:.8rem; font-weight:700; color:var(--accent-dark); text-decoration:none; }
.split__more:hover{ text-decoration:underline; }
@media (max-width:820px){
	.split{ grid-template-columns:minmax(0,1fr); }
	.split--flip .split__media{ order:0; }
}

/* --------------------------------------------------------- service cards */
.svc{ background:color-mix(in srgb,var(--tone,var(--brand)) 7%,#fff); border-color:color-mix(in srgb,var(--tone,var(--brand)) 22%,transparent); border-radius:calc(var(--radius) * 1.3); }
.svc__icon{ background:var(--tone,var(--brand)); border-radius:16px; }

/* --------------------------------------------------------------- quotes */
.section--quotes{ background:var(--surface); }
.quote-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:var(--gap); }
.quote{
	margin:0; background:#fff; border:1px solid color-mix(in srgb,var(--tone,var(--brand)) 26%,transparent);
	border-radius:calc(var(--radius) * 1.3); padding:1.5rem 1.3rem 1.2rem; position:relative;
}
.quote__mark{ position:absolute; top:-.15em; left:.55rem; font-family:var(--font-head); font-size:4rem; line-height:1; color:color-mix(in srgb,var(--tone,var(--brand)) 30%,transparent); }
.quote blockquote{ margin:0 0 .7rem; padding:0; border:0; font-family:var(--font-head); font-size:1.08rem; line-height:1.45; color:var(--ink); position:relative; }
.quote figcaption{ font-size:.85rem; color:var(--tone-ink,var(--accent-dark)); font-weight:700; }

/* ------------------------------------------------------- product grid up */
.section--new ul.products{ --wc-gap:1rem; }
.section--new ul.products li.product{ background:#fff; border-radius:calc(var(--radius) * 1.2); }

/* --------------------------------------------------------- page head bits */
.page-head{ padding-bottom:clamp(2.6rem,5vw,4rem); }
.page-head__inner{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--gap); }
.page-head__text{ max-width:62ch; }