/*
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.0.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; }
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; overflow:auto; z-index:55;
	}
	.primary-nav.is-open{ transform:none; }
	.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%; }
}