:root {
  --primary: #4C763B;
  --primary-deep: #0E4E26;
  --accent: #EC5228;
  --beige: #4C763B;
  --gold: #ffc400;
  --text: #4C763B;
  --btn-anim-ms: 560ms;
  --header-h: 76px;
  --bn-h: 64px;
  --hero-h-desktop: 540px;
  --hero-h-mobile: 420px;
  --hero-ar-desktop: 16/9;
  --hero-ar-mobile: 16/9;
}
* { box-sizing: border-box; }
a { color: inherit; text-decoration: none; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px;}
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; }
html, body { margin:0; padding:0; font-family: 'Vazirmatn', system-ui, -apple-system, Segoe UI, Roboto, Arial, 'Noto Sans Arabic', sans-serif; background: var(--beige); color: var(--text);} 
html, body { overflow-x: hidden; }
body { padding-top: var(--header-h); }
body.no-scroll { overflow: hidden; height: 100dvh; }

/* Header */
.site-header { position: fixed; inset-inline: 0; top: 0; background: #fff; box-shadow: 0 2px 14px rgba(0,0,0,.06); z-index: 1200; }
.header-inner { display:flex; align-items:center; justify-content: space-between; height: 76px; gap: 16px;}
.brand { display:flex; align-items:center; gap:12px; font-weight: 800; font-size: 20px; color: var(--primary-deep);}
.site-header.scrolled { box-shadow: 0 10px 28px rgba(0,0,0,.12); backdrop-filter: blur(8px); }

.brand img { height: 64px; width:auto; display:block;}
.nav { display:flex; align-items:center; gap:20px; }
.nav a { padding:8px 10px; border-radius: 10px; }
.nav a:hover { background: var(--accent);}
.phone-icon { padding:8px 10px; font-size:18px; }
.phone-icon img{ width:32px; height:32px; display:block; }
.menu-toggle{display:none;flex-direction:column;gap:5px;width:36px;height:28px;border:0;background:transparent;cursor:pointer}
.menu-toggle span{display:block;height:3px;background:var(--primary-deep);border-radius:2px;transition:.3s}
.menu-toggle.active span:nth-child(1){transform:rotate(-45deg) translate(-6px,6px)}
.menu-toggle.active span:nth-child(2){opacity:0}
.menu-toggle.active span:nth-child(3){transform:rotate(45deg) translate(-6px,-6px)}

.btn { position: relative; overflow: hidden; display:inline-flex; align-items:center; justify-content:center; gap:10px; padding: 12px 18px; border-radius: 14px; border:2px solid var(--primary); color: var(--primary-deep); font-weight:700; cursor:pointer; transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease; box-shadow: 0 6px 14px rgba(13,124,58,.08); }
.btn:hover { transform: translateY(-1px); box-shadow: 0 10px 18px rgba(13,124,58,.14); }
.btn:active { transform: translateY(0); box-shadow: 0 6px 10px rgba(13,124,58,.12); }
.btn .ripple-circle { position:absolute; border-radius:50%; transform: translate(-50%, -50%); pointer-events:none; width:10px; height:10px; background: currentColor; opacity: .12; animation: ripple-gather var(--btn-anim-ms) cubic-bezier(.2,.7,.2,1) forwards; }
.btn-primary { background: var(--primary); color:#fff; }
.btn-primary:hover { background: var(--primary-deep); }
.btn-outline:hover { background: var(--accent);} 
.btn.added { background: var(--primary-deep); color:#fff; }
.btn.added::before { content:""; position:absolute; inset:0; border-radius:inherit; border:2px solid rgba(255,255,255,.45); opacity:0; animation: added-ring 700ms ease-out forwards; }
.cart-btn { background: #fff; position: relative; display:inline-flex; align-items:center; justify-content:center; padding:10px 14px; gap:6px; }
.cart-count { background: var(--primary); color:#fff; border-radius: 999px; padding:0; width:22px; height:22px; line-height:22px; font-size:12px; font-variant-numeric: tabular-nums; font-feature-settings:"tnum" 1; transform-origin:center; display:inline-flex; align-items:center; justify-content:center; position:absolute; inset-inline-start:3%; top:18%; transform: translate(-50%, -50%); }
.cart-count.pop { animation: badge-pop 360ms ease-out; }
.cart-btn.flash { animation: cart-flash 700ms ease-out; }

/* Fingerprint Buy Button (compact) */
.fp-btn { width: 120px; height: 44px; background: var(--primary); color:#fff; border-radius: 999px; display:flex; align-items:center; justify-content:center; position: relative; box-shadow: 0 8px 22px rgba(13,124,58,.18); cursor:pointer; overflow:hidden; border: 0; transform-origin: center; }
.fp-btn.small { width: 120px; height: 40px; }
.fp-btn .fp-text { position:absolute; transition: opacity 300ms, transform 300ms; user-select: none; }
.fp-btn .fingerprint { position:absolute; left:-8px; top:-9px; opacity:0; display:none; }
.fp-btn .fingerprint-active { stroke:#fff; }
.fp-btn.active { animation: fpMorphCenter 700ms ease; }
.fp-btn.active .fp-text { animation: fpTextOutIn 700ms ease forwards; }
.fp-qty { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:8px; }
.fp-qty button { width:28px; height:28px; border-radius: 8px; border:0; background:#fff; color: var(--primary-deep); font-weight:800; cursor:pointer; }
.fp-qty .q { min-width: 18px; text-align:center; font-weight:800; color:#fff; }

@keyframes fpMorphCenter { 0%{ transform: scaleX(1) scaleY(1);} 25%{ transform: scaleX(.34) scaleY(1.02);} 50%{ transform: scaleX(1.06) scaleY(1);} 100%{ transform: scaleX(1) scaleY(1);} }

/* Ball projectile to cart */
.cart-ball { position: fixed; width: 16px; height: 16px; border-radius: 50%; background: var(--primary); box-shadow: 0 4px 10px rgba(0,0,0,.2); z-index: 10050; transform: translate3d(0,0,0) scale(1); transition: transform 520ms cubic-bezier(.2,.7,.2,1), opacity 520ms; }
@keyframes fpTextOutIn { 0%{ opacity:1; transform: translateY(0) scale(1);} 25%{ opacity:0; transform: translateY(-6px) scale(.92);} 75%{ opacity:0; transform: translateY(6px) scale(.95);} 100%{ opacity:1; transform: translateY(0) scale(1);} }

@keyframes ripple-gather {
  0% { opacity:.08; transform: translate(-50%, -50%) scale(8); }
  40% { opacity:.18; transform: translate(-50%, -50%) scale(1); }
  100% { opacity:0; transform: translate(-50%, -50%) scale(18); }
}
@keyframes added-ring { 0% { opacity:.55; transform: scale(1);} 100% { opacity:0; transform: scale(1.1);} }
@keyframes badge-pop {
  0%   { transform: translate(-50%, -50%) scale(1); }
  40%  { transform: translate(-50%, -50%) scale(1.6); }
  100% { transform: translate(-50%, -50%) scale(1); }
}
@keyframes cart-flash { 0% { background: #fff;} 35% { background: var(--accent);} 100% { background: #fff;} }

/* Toasts */
.toast-container { position: fixed; inset-inline: 0; bottom: 20px; display: grid; place-items: center; gap: 8px; z-index: 9999; pointer-events: none; }
.toast { pointer-events: auto; background: #0b5c2d; color: #fff; border-radius: 14px; padding: 10px 14px; box-shadow: 0 12px 24px rgba(0,0,0,.18); border: 1px solid rgba(255,255,255,.15); animation: toast-in 280ms ease-out; }
.toast.out { animation: toast-out 260ms ease-in forwards; }
@keyframes toast-in { 0% { opacity: 0; transform: translateY(8px);} 100% { opacity: 1; transform: translateY(0);} }
@keyframes toast-out { 0% { opacity: 1; transform: translateY(0);} 100% { opacity: 0; transform: translateY(8px);} }

/* Fly-to-cart */
.fly-clone { position: fixed; z-index: 10000; pointer-events: none; border-radius: 12px; box-shadow: 0 10px 24px rgba(0,0,0,.18); transition: transform 620ms cubic-bezier(.2,.7,.2,1), opacity 620ms; will-change: transform, opacity; }

/* Hero */
.hero { position: relative; width:100%; max-width:1000px; margin:0 auto; aspect-ratio: var(--hero-ar-desktop); max-height: var(--hero-h-desktop); display:grid; place-items: center; overflow:hidden; }
.hero img { width:100%; height:100%; object-fit: cover; object-position: center center; position:absolute; inset:0; filter: none; }
.hero-overlay { display:none; }
.hero-content { position: relative; z-index:1; color:#fff; text-align:center; padding: 60px 0; }
.hero h1 { font-size: clamp(28px, 6vw, 54px); margin:0 0 10px; }
.hero p { font-size: clamp(15px, 2.8vw, 22px); margin:0 0 22px; opacity:.95; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }

/* Features */
.features { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:20px; margin: 40px auto; }
.feature { background:#fff; padding:18px; border-radius:18px; box-shadow: 0 10px 25px rgba(0,0,0,.06);}
.feature .icon { font-size:26px; width:44px; height:44px; display:grid; place-items:center; background:var(--accent); border-radius:12px; color: var(--primary-deep); margin-bottom:6px; }

/* Products */
.products { padding: 30px 0 60px; }
.section-head { text-align:center; margin-bottom: 10px; }
.section-head h2 { margin:0; font-size: clamp(22px, 4vw, 36px);}
.section-head p { color:#2f4a2f; opacity:.8; margin: 6px 0 0;}

/* Tabs (Prism-like) */
.tabs { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin: 12px 0 18px; }
.tab-chip { border:1px solid #cfe4d5; background:#fff; color:var(--primary-deep); padding:8px 14px; border-radius:999px; cursor:pointer; font-weight:700; }
.tab-chip[aria-selected="true"] { background: var(--primary); color:#fff; border-color: var(--primary); }

/* Carousel */
.carousel { position:relative; margin: 10px 0 24px; }
.car-track { display:flex; gap:14px; overflow:auto; scroll-snap-type: none; padding: 4px 4px 10px; -webkit-overflow-scrolling: touch; }
.car-track > * { scroll-snap-align: none; }
.car-slide { scroll-snap-align: start; flex: 0 0 clamp(240px, 28vw, 320px); }
.car-btn { position:absolute; top:50%; transform: translateY(-50%); width:40px; height:40px; border-radius: 999px; border:0; background:#fff; box-shadow:0 6px 16px rgba(0,0,0,.15); cursor:pointer; display:grid; place-items:center; font-size:12px; color:var(--primary-deep); z-index:1; }
.car-btn.prev { inset-inline-start: -8px; }
.car-btn.next { inset-inline-end: -8px; }

/* Cards & grid */
.grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap:18px; }
.card { background:#fff; border-radius: 18px; overflow:hidden; box-shadow: 0 10px 28px rgba(0,0,0,.06); display:flex; flex-direction:column; }
.thumb { aspect-ratio: 4/3; position: relative; overflow:hidden; background: #f7faf7; }
.card img { width:100%; height:100%; object-fit: contain; display:block; transition: transform .35s ease; }
.card:hover img { transform: scale(1.025);}
.card .body { padding: 14px; display:flex; flex-direction:column; gap:8px; }
.card .body { align-items: center; }
.card h4 { margin:0; font-size: 18px; text-align:center; }
.price-line { display:flex; align-items:center; justify-content:center; gap:8px; }
.price { font-weight:800; color: var(--primary-deep);}
/* Buy button row under texts */
.buy-line { display:flex; align-items:center; justify-content:center; margin-top: 10px; }

/* About / Contact */
.about { padding: 30px 0 60px; }
.about-card { background:#fff; border-radius:20px; display:grid; grid-template-columns: 140px 1fr; gap:20px; padding:20px; align-items:center; box-shadow: 0 10px 28px rgba(0,0,0,.06); }
.about-logo { width: 140px; height:auto; }
.bullets { margin: 8px 0 0 0; padding:0 18px; }
.bullets li { margin: 6px 0; }

.contact { background: #fff; padding: 40px 0; border-top: 1px solid #e9efe8; }
.contact-inner { display:grid; grid-template-columns: 1fr; }
.contact-card { background: linear-gradient(180deg, #fff, #f9fdf9); border: 1px solid #e9efe8; padding: 20px; border-radius: 18px; box-shadow: 0 10px 28px rgba(0,0,0,.05); }
.contact .rows { display:flex; flex-wrap:wrap; gap:10px; margin: 14px 0; }
.socials { display:flex; gap:14px; flex-wrap: wrap; margin-top: 8px; }
.socials a { color: var(--primary); border:1px solid var(--primary); padding: 6px 10px; border-radius: 12px; }
.socials a:hover { background: var(--accent);}

/* Stats */
.stats-section{ padding:40px 0 60px;}
.stats-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px;}
.stat-card{ background:linear-gradient(180deg,#fff,#f7fbf7); border:1px solid #e9efe8; border-radius:16px; padding:20px; text-align:center; box-shadow:0 12px 28px rgba(0,0,0,.06);}
.stat-icon{ width:64px;height:64px;border-radius:50%;display:grid;place-items:center;margin:0 auto 8px;background:linear-gradient(135deg,var(--primary),var(--primary-deep));color:#fff; }
.stat-number{ font:800 34px/1.1 'Vazirmatn',system-ui; color:var(--primary-deep);}
.stat-label{ color:#2f4a2f; opacity:.8; font-size:14px;}

/* Drawer */
#cart-drawer { position: fixed; inset-inline-end: 0; top:0; width:min(420px, 96vw); height:100dvh; background:#fff; box-shadow: -12px 0 24px rgba(0,0,0,.12); transform: translateX(105%); transition: transform .3s ease; z-index: 1300; display:flex; flex-direction:column; overscroll-behavior: contain; }
#cart-drawer.open { transform: translateX(0); }
.drawer-header { position:relative; display:flex; align-items:center; justify-content:center; padding: 14px 16px; border-bottom:1px solid #eef3ee; }
#close-cart { position:absolute; inset-inline-start:10px; top:10px; display:inline-flex; align-items:center; gap:8px; border:0; background:transparent; color:var(--primary-deep); font-weight:800; cursor:pointer; }
#cart-items { flex:1; overflow:auto; padding: 10px 14px; }
.cart-item { display:grid; grid-template-columns: 1fr auto; gap:10px; align-items:center; padding: 8px 0; border-bottom:1px dashed #eef3ee; }
.qty { display:flex; align-items:center; gap:8px; }
.qty button { width:28px; height:28px; border-radius: 8px; border:1px solid var(--primary); background:#fff; color: var(--primary-deep); font-weight:800; cursor:pointer; }
.drawer-footer { border-top:1px solid #eef3ee; padding: 10px 14px; display:flex; flex-direction:column; gap:10px; }
.total-line { display:flex; align-items:center; gap:10px; font-size:18px; }

/* Qty-inline */
.qty-inline { display:flex; align-items:center; gap:8px; animation: qty-in 320ms ease-out; }
.qty-inline button { width:30px; height:30px; border-radius: 9px; border:1px solid var(--primary); background:#fff; color: var(--primary-deep); font-weight:800; cursor:pointer; }
.qty-inline .q { min-width: 20px; text-align:center; font-weight:800; color: var(--primary-deep); }
@keyframes qty-in { 0% { opacity:0; transform: translateY(6px) scale(.96);} 100% { opacity:1; transform: translateY(0) scale(1);} }

/* RTL drawer initial fix */
html[dir="rtl"] #cart-drawer { transform: translateX(-105%); }
#cart-drawer.open, html[dir="rtl"] #cart-drawer.open { transform: translateX(0); }

/* Backdrops */
.backdrop { position: fixed; inset:0; background: rgba(0,0,0,.28); }
#cart-backdrop { z-index: 1000; }
#nav-backdrop { z-index: 900; inset: var(--header-h) 0 0 0; }
.backdrop[hidden] { display:none; }

/* Footer */
.site-footer { background: var(--primary-deep); color:#e8f3eb; padding:18px 0; }
.site-footer .container { display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.foot-brand { display:flex; align-items:center; gap:10px; font-weight:700; }
.copy { opacity:.8; }
.cart-btn img{ width:36px; height:36px; display:block; }

/* Bottom Nav (mobile) */
.bottom-nav{ position:fixed; inset-inline:0; bottom:0; background:#fff; border-top:1px solid #e6ece6; display:none; justify-content:space-around; padding:6px 4px; padding-bottom: calc(6px + env(safe-area-inset-bottom)); z-index:999;}
.bottom-nav button{ display:flex; flex-direction:column; align-items:center; gap:4px; padding:6px 10px; border-radius:12px; border:0; background:transparent; font-weight:700; color:var(--primary-deep); }
.bottom-nav button img{ width:34px; height:34px; display:block; }
.bottom-nav button:active{ background:#eef6ef; }
.bottom-nav #bn-cart{ position:relative; }
.bottom-nav #bn-cart img{ width:34px; height:34px; display:block; }
.bottom-nav #bn-cart .label{ font-size:12px; line-height:1.1; }

/* Responsive */
@media (min-width: 900px) {
  /* Desktop-only: بزرگ‌تر کردن آیکون سبد در هدر */
  .cart-btn img{ width:32px; height:32px; }
  .cart-btn .cart-count{ inset-inline-start:4%; top:28%; }
  .contact-inner { grid-template-columns: 1.2fr .8fr; gap:20px; }
}
@media (max-width: 720px) {
  .header-inner { height: 64px; }
  :root { --header-h: 64px; }
  .brand { font-size: 18px; }
  .brand img { height: 36px; }
  .menu-toggle{display:flex}
  /* Mobile nav as side drawer (always from left) */
  .nav{ position:fixed; top: var(--header-h); bottom: 0; left: 0; width:min(320px,85vw); background:#fff; padding:16px 14px; flex-direction:column; gap:12px; box-shadow: 12px 0 24px rgba(0,0,0,.12); transform: translateX(-105%); transition: transform .3s ease; z-index:1002; pointer-events: none; }
  html[dir="rtl"] .nav{ left: 0; right: auto; }
  .nav.active{ transform: translateX(0) !important; pointer-events: auto; }
  .nav a{ display:block; }
  .cart-btn { padding: 10px 14px; }
  .car-btn.prev { inset-inline-start: 6px; }
  .car-btn.next { inset-inline-end: 6px; }
  .hero { max-width: 720px; aspect-ratio: var(--hero-ar-mobile); max-height: var(--hero-h-mobile); }

  .grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap:14px; }
  .card h4 { font-size: 16px; }

  .about-card { grid-template-columns: 1fr; text-align: center; }
  .about-logo { width: 120px; margin: 0 auto; }

  .contact .rows { gap:8px; }

  .bottom-nav{display:flex}
  body{ padding-bottom: 64px; } /* جا برای نوار پایین */
  .bottom-nav button span{ font-size: 10px; line-height: 1.1; }
  .bottom-nav #bn-cart .label{ font-size:10px; line-height:1.1; }
  .bottom-nav #bn-cart .cart-count{ font-size:11px; width:28; height:18; line-height:18; padding:0; font-variant-numeric: tabular-nums; font-feature-settings:"tnum" 1; }
}


/* Remove tap highlight on interactive elements */
a, button, .tab-chip, .car-btn, .bottom-nav button { -webkit-tap-highlight-color: transparent; }
button, .tab-chip, .car-btn, .bottom-nav button { user-select: none; }

/* Generic press animation for non-buy buttons */
.press-morph { animation: pressMorph 450ms ease; }
@keyframes pressMorph { 0%{ transform: scaleX(1); } 25%{ transform: scaleX(.9);} 60%{ transform: scaleX(1.02);} 100%{ transform: scaleX(1);} }


/* ===== Hero Radio-Slider (scoped) ===== */
.hero.hero--slider{ aspect-ratio:auto; max-height:none; padding:28px 0 16px; }
.hero .hero-slider{ width:100%; display:grid; place-items:center; }
.hero .slider-height-padding{ position:relative; width:100%; max-width:min(1000px,92vw); margin:0 auto; padding-top:440px; }
.hero .hs-dots{ position:relative; display:flex; justify-content:center; gap:8px; z-index:2; margin-top:10px; }
.hero .hs-dot{ width:10px; height:12px; border-radius:50%; background:#c7d6cb; border:0; cursor:pointer; transition:transform .2s ease, background .2s ease; }
.hero .hs-dot.active{ background:var(--primary); transform:scale(1.4); }
.hero .hs-arrow{ position:absolute; top:50%; transform:translateY(-100%); width:40px; height:40px; border-radius:999px; border:0; background:#fff;
  box-shadow:0 6px 16px rgba(0,0,0,.15); cursor:pointer; display:grid; place-items:center; font-size:22px; color:var(--primary-deep); z-index:3; }
.hero .hs-arrow.prev{ inset-inline-start:-8px; }
.hero .hs-arrow.next{ inset-inline-end:-8px; }

.hero .hs-dots{ position:relative; display:flex; justify-content:center; gap:8px; z-index:2; margin-top:10px; }
.hero .hs-dot{ width:10px; height:12px; border-radius:50%; background:#c7d6cb; border:0; cursor:pointer; transition:transform .2s ease, background .2s ease; }
.hero .hs-dot.active{ background:var(--primary); transform:scale(1.4); }
.hero .hs-arrow{ position:absolute; top:50%; transform:translateY(-100%); width:40px; height:40px; border-radius:999px; border:0; background:#fff;
  box-shadow:0 6px 16px rgba(0,0,0,.15); cursor:pointer; display:grid; place-items:center; font-size:22px; color:var(--primary-deep); z-index:3; }
.hero .hs-arrow.prev{ inset-inline-start:8px; }
.hero .hs-arrow.next{ inset-inline-end:8px; }

/* slides */
.hero .hs-list{
  position:absolute; inset-inline:0; top:0; height:440px; padding:0; margin:0; list-style:none; z-index:1;
}
.hero .hs-list li{
  position:absolute; inset-inline:0; top:0; height:440px; border:5px solid #bdc3c7; border-radius:50%;
  background-size:cover; background-position:center; box-shadow:0 8px 25px rgba(16,39,112,.1);
  display:flex; align-items:center; justify-content:center; font-weight:900; letter-spacing:1px; color:#343434;
  opacity:0; pointer-events:none; transition:all .5s ease;
}
.hero .hs-list li.active{ opacity:1; pointer-events:auto; border-radius:16px; }

/* keyframes (scoped use) */
@keyframes border-transform{
  0%,100%{border-radius:63% 37% 54% 46% / 55% 48% 52% 45%}
  14%{border-radius:40% 60% 54% 46% / 49% 60% 40% 51%}
  28%{border-radius:54% 46% 38% 62% / 49% 70% 30% 51%}
  42%{border-radius:61% 39% 55% 45% / 61% 38% 62% 39%}
  56%{border-radius:61% 39% 67% 33% / 70% 50% 50% 30%}
  70%{border-radius:50% 50% 34% 66% / 56% 68% 32% 44%}
  84%{border-radius:46% 54% 50% 50% / 35% 61% 39% 65%}
}
/* responsive heights */
@media (max-width: 767px){
  .hero .slider-height-padding{ padding-top:440px; }
  .hero .hs-list, .hero .hs-list li{ height:380px; }
}
@media (max-width: 675px){
  .hero .slider-height-padding{ padding-top:260px; }
  .hero .hs-list, .hero .hs-list li{ height:220px; }
}