/* =========================================================
   Angraha — main stylesheet
   Colors/fonts come from CSS custom properties printed in
   inc/customizer.php (angraha_customizer_css) — never hardcode
   a brand color or font-family directly in this file; use the
   var(--angraha-*) tokens below so Customizer changes cascade.
   ========================================================= */

:root{
	--angraha-radius: 10px;
	--angraha-gap: 20px;
	--angraha-container: 1320px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
	margin:0;
	font-family: var(--angraha-font-body, 'Inter', sans-serif);
	color: var(--angraha-text, #1a1a1a);
	background:#fff;
	font-size:15px;
	line-height:1.6;
}
h1,h2,h3,h4,h5,h6{ font-family: var(--angraha-font-heading, 'Poppins', sans-serif); margin:0 0 .5em; font-weight:700; letter-spacing:-.01em; }
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
.screen-reader-text{ position:absolute !important; clip:rect(1px,1px,1px,1px); overflow:hidden; height:1px; width:1px; }

.angraha-btn{
	display:inline-flex; align-items:center; justify-content:center;
	padding:13px 28px; border-radius:999px; font-weight:600; font-size:14px;
	letter-spacing:.02em; text-transform:uppercase; cursor:pointer; border:2px solid transparent;
	transition:transform .15s ease, background .2s ease, color .2s ease;
}
.angraha-btn--primary{ background:var(--angraha-primary); color:#fff; border-color:var(--angraha-primary); }
.angraha-btn--primary:hover{ transform:translateY(-2px); }
.angraha-btn--outline{ background:transparent; color:var(--angraha-primary); border-color:var(--angraha-primary); }

/* ---------- Layout helpers ---------- */
.angraha-section{ max-width:var(--angraha-container); margin:0 auto; padding:56px 24px; }
.angraha-section__title{ text-align:center; font-size:clamp(22px,3vw,32px); margin-bottom:32px; }

/* ---------- Announcement bar ---------- */
.angraha-announcement-bar{ background:var(--angraha-dark); color:#fff; overflow:hidden; }
.angraha-announcement-bar__track{ display:flex; gap:60px; padding:9px 0; animation:angraha-marquee 18s linear infinite; white-space:nowrap; }
.angraha-announcement-bar__item{ font-size:12px; letter-spacing:.06em; text-transform:uppercase; }
@keyframes angraha-marquee{ 0%{ transform:translateX(0);} 100%{ transform:translateX(-50%);} }

/* ---------- Header ---------- */
.angraha-header{ background:#fff; border-bottom:1px solid #eee; position:relative; z-index:100; }
.angraha-sticky-header .angraha-header{ position:sticky; top:0; }
.angraha-header__inner{ max-width:var(--angraha-container); margin:0 auto; padding:14px 24px; display:flex; align-items:center; gap:24px; }
.angraha-header__logo{ margin-right:auto; }
.angraha-header__logo-text{ font-family:var(--angraha-font-heading); font-size:26px; font-weight:800; }
.angraha-header__menu-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:4px; }
.angraha-header__menu-toggle span{ width:22px; height:2px; background:var(--angraha-text); }

.angraha-nav{ display:flex; gap:28px; }
.angraha-nav > li{ position:relative; }
.angraha-nav > li > a{ font-weight:600; font-size:14px; text-transform:uppercase; letter-spacing:.03em; padding:8px 0; display:inline-block; }
.angraha-nav ul{ position:absolute; top:100%; left:0; background:#fff; min-width:220px; box-shadow:0 12px 30px rgba(0,0,0,.08); border-radius:8px; padding:10px; opacity:0; visibility:hidden; transform:translateY(6px); transition:.2s ease; }
.angraha-nav li:hover > ul{ opacity:1; visibility:visible; transform:translateY(0); }
.angraha-nav ul li a{ display:block; padding:8px 12px; border-radius:6px; font-size:13px; }
.angraha-nav ul li a:hover{ background:var(--angraha-light-bg); }

.angraha-header__actions{ display:flex; align-items:center; gap:14px; }
.angraha-header__phone{ font-size:13px; font-weight:600; white-space:nowrap; }
.angraha-header__icon-btn{ position:relative; background:none; border:0; cursor:pointer; padding:4px; display:inline-flex; }
.angraha-header__cart-count{ position:absolute; top:-6px; right:-8px; background:var(--angraha-accent); color:#fff; font-size:10px; font-weight:700; border-radius:50%; width:16px; height:16px; display:flex; align-items:center; justify-content:center; }

.angraha-search-panel{ max-height:0; overflow:hidden; transition:max-height .25s ease; border-top:0 solid #eee; }
.angraha-search-panel.is-open{ max-height:90px; border-top-width:1px; }
.angraha-search-form{ max-width:var(--angraha-container); margin:0 auto; padding:16px 24px; display:flex; gap:10px; }
.angraha-search-form__input{ flex:1; border:1px solid #ddd; border-radius:8px; padding:10px 14px; }

/* ---------- Mobile nav ---------- */
.angraha-mobile-nav{ position:fixed; top:0; left:-320px; width:300px; height:100%; background:#fff; z-index:1000; transition:left .25s ease; overflow-y:auto; padding:24px; }
.angraha-mobile-nav.is-open{ left:0; }
.angraha-mobile-nav__list li{ border-bottom:1px solid #eee; }
.angraha-mobile-nav__list a{ display:block; padding:14px 0; font-weight:600; }
.angraha-mobile-nav-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:999; display:none; }
.angraha-mobile-nav-overlay.is-open{ display:block; }

/* ---------- Hero slider ---------- */
.angraha-hero-slider{ position:relative; width:100%; aspect-ratio:16/7; overflow:hidden; background:var(--angraha-light-bg); }
.angraha-hero-slide{ position:absolute; inset:0; opacity:0; transition:opacity .6s ease; background-size:cover; background-position:center; }
.angraha-hero-slide.is-active{ opacity:1; }
.angraha-hero-slide__picture, .angraha-hero-slide__picture img{ width:100%; height:100%; object-fit:cover; }
.angraha-hero-slide__content{ position:absolute; left:6%; bottom:12%; max-width:480px; color:#fff; text-shadow:0 2px 12px rgba(0,0,0,.35); }
.angraha-hero-slide__content h2{ font-size:clamp(26px,4vw,48px); color:#fff; }
.angraha-hero-slider__dots{ position:absolute; bottom:16px; left:50%; transform:translateX(-50%); display:flex; gap:8px; }
.angraha-hero-slider__dot{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.5); border:0; cursor:pointer; }
.angraha-hero-slider__dot.is-active{ background:#fff; width:22px; border-radius:5px; }

/* ---------- USP strip ---------- */
.angraha-usp-strip{ max-width:var(--angraha-container); margin:0 auto; padding:28px 24px; display:grid; grid-template-columns:repeat(4,1fr); gap:20px; border-bottom:1px solid #eee; }
.angraha-usp-strip__item{ display:flex; gap:12px; align-items:flex-start; }
.angraha-usp-strip__item .dashicons{ font-size:26px; width:26px; height:26px; color:var(--angraha-primary); }
.angraha-usp-strip__item p{ margin:2px 0 0; font-size:13px; color:#666; }

/* ---------- Category grid ---------- */
.angraha-categories__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:var(--angraha-gap); }
.angraha-categories__tile{ position:relative; border-radius:var(--angraha-radius); overflow:hidden; aspect-ratio:3/4; }
.angraha-categories__tile img{ width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.angraha-categories__tile:hover img{ transform:scale(1.06); }
.angraha-categories__label{ position:absolute; left:16px; bottom:16px; color:#fff; font-weight:700; font-size:18px; text-shadow:0 2px 10px rgba(0,0,0,.4); }

/* ---------- Product grid / cards ---------- */
.angraha-products__grid, ul.products{ display:grid !important; grid-template-columns:repeat(4,1fr); gap:var(--angraha-gap); margin:0 !important; padding:0 !important; }
.angraha-product-card, ul.products li.product{ list-style:none; background:#fff; }
.angraha-product-card__image{ position:relative; display:block; border-radius:var(--angraha-radius); overflow:hidden; background:var(--angraha-light-bg); aspect-ratio:3/4; }
.angraha-product-card__image img, ul.products li.product img{ width:100%; height:100%; object-fit:cover; }
.angraha-product-card__badge, span.onsale{ position:absolute; top:10px; left:10px; background:var(--angraha-accent); color:#fff; font-size:11px; font-weight:700; padding:4px 9px; border-radius:999px; min-height:0 !important; min-width:0 !important; line-height:1.4 !important; }
.angraha-product-card__title{ font-size:14px; font-weight:600; margin:12px 0 4px; }
.angraha-product-card__price, .price{ font-size:14px; }
.angraha-product-card__price del, .price del{ opacity:.5; margin-right:6px; }
.angraha-product-card__price ins, .price ins{ text-decoration:none; color:var(--angraha-accent); }
.angraha-product-card__cta a{ display:block; margin-top:8px; text-align:center; }

/* ---------- Testimonials ---------- */
.angraha-testimonials__track{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:var(--angraha-gap); }
.angraha-testimonials__card{ background:var(--angraha-light-bg); border-radius:var(--angraha-radius); padding:24px; }
.angraha-testimonials__stars{ color:#f5a623; margin-bottom:8px; }
.angraha-testimonials__author{ display:flex; align-items:center; gap:10px; margin-top:14px; font-weight:600; font-size:13px; }
.angraha-testimonials__author img{ width:36px; height:36px; border-radius:50%; object-fit:cover; }

/* ---------- Instagram grid ---------- */
.angraha-instagram__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.angraha-instagram__tile{ position:relative; aspect-ratio:1/1; overflow:hidden; }
.angraha-instagram__tile img{ width:100%; height:100%; object-fit:cover; }
.angraha-instagram__icon{ position:absolute; top:8px; right:8px; color:#fff; font-size:18px; text-shadow:0 1px 4px rgba(0,0,0,.5); }

/* ---------- Cart drawer ---------- */
.angraha-cart-drawer{ position:fixed; top:0; right:-420px; width:400px; max-width:92vw; height:100%; background:#fff; z-index:1100; transition:right .3s ease; display:flex; flex-direction:column; box-shadow:-10px 0 30px rgba(0,0,0,.1); }
.angraha-cart-drawer.is-open{ right:0; }
.angraha-cart-drawer__header{ display:flex; justify-content:space-between; align-items:center; padding:18px 20px; border-bottom:1px solid #eee; }
.angraha-cart-drawer__close{ background:none; border:0; font-size:24px; cursor:pointer; }
.angraha-cart-drawer__content{ padding:16px 20px; overflow-y:auto; flex:1; }
.angraha-cart-drawer-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:1099; display:none; }
.angraha-cart-drawer-overlay.is-open{ display:block; }

/* ---------- Shop toolbar / breadcrumbs ---------- */
.angraha-breadcrumbs{ max-width:var(--angraha-container); margin:16px auto; padding:0 24px; font-size:13px; color:#888; }
.angraha-shop-toolbar{ display:flex; justify-content:space-between; align-items:center; max-width:var(--angraha-container); margin:0 auto 20px; padding:0 24px; }
.angraha-shop-main{ max-width:var(--angraha-container); margin:0 auto; padding:0 24px 60px; display:block; }

/* ---------- Footer ---------- */
.angraha-footer{ background:var(--angraha-dark); color:#f2f2f2; margin-top:60px; }
.angraha-footer__top{ max-width:var(--angraha-container); margin:0 auto; padding:56px 24px 30px; display:grid; grid-template-columns:1.2fr 2fr; gap:40px; }
.angraha-footer__about{ font-size:13px; color:#bbb; max-width:340px; }
.angraha-social-links{ display:flex; gap:12px; margin-top:14px; }
.angraha-social-links__item{ width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,.3); display:flex; align-items:center; justify-content:center; }
.angraha-footer__columns{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:24px; }
.angraha-footer__widget-title{ font-size:14px; text-transform:uppercase; letter-spacing:.04em; margin-bottom:14px; }
.angraha-footer__menu li, .angraha-footer__widget ul li{ margin-bottom:8px; font-size:13px; color:#ccc; }
.angraha-footer__bottom{ border-top:1px solid rgba(255,255,255,.12); display:flex; justify-content:space-between; padding:18px 24px; max-width:var(--angraha-container); margin:0 auto; font-size:12px; color:#999; flex-wrap:wrap; gap:8px; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px){
	.angraha-products__grid, ul.products{ grid-template-columns:repeat(3,1fr); }
	.angraha-usp-strip{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 767px){
	.angraha-header__nav, .angraha-header__phone{ display:none; }
	.angraha-header__menu-toggle{ display:flex; }
	.angraha-products__grid, ul.products{ grid-template-columns:repeat(2,1fr); }
	.angraha-instagram__grid{ grid-template-columns:repeat(3,1fr); }
	.angraha-footer__top{ grid-template-columns:1fr; }
	.angraha-hero-slider{ aspect-ratio:4/5; }
}