@import url('commerce-ui.css?v=18');
@font-face { font-family:Vazir; src:url('assets/vazirmatn.woff2') format('woff2'); font-weight:100 900; font-display:swap; }
:root { --ink:#193b2d; --primary:#1e704b; --muted:#53695c; --line:#cedfd4; --surface:#f3f9f5; --paper:#fff; --soft:#e8f4ed; --glass:rgb(255 255 255 / .76); --ease:cubic-bezier(.22,1,.36,1); color-scheme:light; }
* { box-sizing:border-box; }
html { scroll-padding-top:110px; }
body { margin:0; background:linear-gradient(156deg,#e2f1e8 0,#fafcfb 430px,#fff 850px); color:var(--ink); font:16px/1.85 Vazir,Tahoma,sans-serif; -webkit-font-smoothing:antialiased; }
[hidden] { display:none!important; }
img { display:block; max-width:100%; height:auto; }
a { color:inherit; text-decoration:none; }
button,input,select,textarea { font:inherit; color:inherit; }
button,a,input,select,textarea { -webkit-tap-highlight-color:transparent; }
button,a { touch-action:manipulation; }
button { cursor:pointer; }
button { border:0; background:transparent; }
:disabled { opacity:.5; cursor:not-allowed; }
:focus-visible { outline:3px solid #368159; outline-offset:3px; }
h1,h2,h3,p { margin:0; }
h1,h2,h3 { line-height:1.55; }
h1 { font-size:clamp(28px,3vw,42px); font-weight:750; }
h2 { font-size:24px; font-weight:650; }
h3 { font-size:18px; }
small { font-size:12px; }
::selection { background:#cbe9d6; }
.shop-shell { width:min(1160px,calc(100% - 48px)); margin-inline:auto; }
.shop-header { position:sticky; top:14px; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:70px; margin-block:16px 38px; padding:9px 20px; border:1px solid #fff; border-radius:999px; background:linear-gradient(115deg,#ffffffda,#e8f7eed2); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); box-shadow:inset 0 1px 0 #fff,0 4px 25px #193b2d0a; }
.shop-brand img { width:112px; height:auto; }
.shop-header nav,.shop-header-actions { display:flex; align-items:center; gap:25px; font-size:13px; }
.shop-header a { min-height:44px; display:inline-flex; align-items:center; }
.shop-header [aria-current] { color:var(--primary); font-weight:700; text-decoration:underline; text-underline-offset:6px; }
.shop-cart-link { gap:9px; padding:7px 14px; border:1px solid #b9d3c3; border-radius:999px; background:#fff9; }
.shop-cart-link img { width:20px; height:20px; }
.shop-cart-link b { display:grid; place-items:center; min-width:23px; height:23px; border-radius:50%; background:var(--primary); color:white; font-size:11px; }
.shop-primary,.shop-secondary { min-height:46px; display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:10px 20px; border-radius:10px; border:1px solid #b7d1c1; font-size:14px; font-weight:600; text-align:center; }
.shop-primary { background:var(--primary); color:white; border-color:var(--primary); }
.shop-secondary { background:#fff9; color:var(--ink); }
.glass-panel { background:var(--glass); border:1px solid #fff; border-radius:22px; box-shadow:inset 0 1px 0 #fff,0 0 0 1px #d4e4da90,0 10px 30px #173c2c05; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
.shop-muted { color:var(--muted); }
.shop-breadcrumb,.cat-crumbs { display:flex; flex-wrap:wrap; align-items:center; gap:10px; font-size:12px; color:var(--muted); margin-bottom:23px; }
.shop-breadcrumb a,.cat-crumbs a { min-height:36px; display:inline-flex; align-items:center; }
.shop-page-head { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:28px; }
.shop-page-head p { color:var(--muted); font-size:14px; margin-top:8px; }
.shop-badge { display:inline-block; font-size:11px; padding:3px 9px; border-radius:5px; color:#3d624c; border:1px solid #c6decf; background:#f4faf6; white-space:nowrap; }
.shop-storage { padding:12px 18px; font-size:13px; border:1px solid #d7cf9b; background:#fffbe5; }
.shop-footer { margin-top:80px; background:#193b2d; color:#d8e8dd; border-radius:28px 28px 0 0; padding-block:35px; }
.shop-footer>.shop-shell { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:20px; }
.shop-footer .shop-brand img { width:100px; filter:brightness(0) invert(1); }
.shop-footer nav { display:flex; flex-wrap:wrap; gap:12px 24px; font-size:13px; }
.shop-footer a { min-height:44px; display:inline-flex; align-items:center; }
.shop-footer small { width:100%; border-top:1px solid #ffffff1a; padding-top:18px; color:#acc8b5; }
.shop-field { display:grid; gap:6px; min-width:0; }
.shop-field label { font-size:13px; font-weight:550; }
.shop-field input,.shop-field select,.shop-field textarea { border:1px solid #adc5b6; background:#ffffffd9; border-radius:9px; width:100%; padding:10px 12px; min-height:48px; font-size:16px; }
.shop-field textarea { resize:vertical; }
.shop-field [aria-invalid=true] { border-color:#a64532; }
.field-error { color:#9a392c; font-size:12px; min-height:0; }
.field-error:empty { display:none; }
.shop-notice { padding:13px 16px; border:1px solid #c4dcca; background:#eef7f0; border-radius:10px; font-size:13px; color:#3e5e49; }
.shop-empty { text-align:center; padding:60px 24px; }
.shop-empty p { color:var(--muted); margin:12px 0 20px; }
.shop-skip,.cat-skip { position:fixed; top:-100px; right:24px; padding:12px; background:#193b2d; color:white; z-index:200; }
.shop-skip:focus,.cat-skip:focus { top:8px; }
.shop-mobile-dock { display:none; }
@media(max-width:650px) {
  body { padding-bottom:calc(88px + env(safe-area-inset-bottom)); }
  .shop-mobile-dock { position:fixed; bottom:calc(12px + env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); width:min(400px,calc(100% - 28px)); z-index:40; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); padding:7px; border:1px solid #ffffffee; border-radius:24px; background:linear-gradient(120deg,#ffffffde,#e6f4eadb); backdrop-filter:blur(18px) saturate(1.2); -webkit-backdrop-filter:blur(18px) saturate(1.2); box-shadow:0 6px 28px #1d4b3026,inset 0 1px #fff; }
  .shop-mobile-dock a { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; min-height:51px; position:relative; border-radius:17px; font-size:10px; }
  .shop-mobile-dock [aria-current] { background:#d0e9d9; font-weight:700; }
  .shop-mobile-dock b { position:absolute; top:1px; right:calc(50% - 24px); background:#1e704b; color:white; border:1px solid #fff; min-width:18px; height:18px; line-height:17px; border-radius:50%; font-size:9px; }
  .shop-status { bottom:calc(94px + env(safe-area-inset-bottom)); }
}
@media(hover:hover) { .shop-primary:hover { background:#19563b; } .shop-secondary:hover { background:#e8f4ed; } .shop-header nav a:hover,.shop-footer a:hover { text-decoration:underline; text-underline-offset:5px; } }
@media(max-width:900px) { .shop-shell { width:calc(100% - 28px); } .shop-header { top:10px; margin-top:12px; padding:8px 15px; gap:12px; } .shop-header nav { gap:15px; } .shop-header-actions { gap:14px; } }
@media(max-width:650px) { .shop-header { min-height:62px; margin-bottom:27px; } .shop-brand img { width:96px; } .shop-header nav { display:none; } .shop-cart-link>span { display:none; } .shop-cart-link { gap:6px; padding:6px 9px; } .shop-header-actions { gap:12px; font-size:12px; } .shop-page-head { flex-wrap:wrap; gap:12px; } h2 { font-size:21px; } .shop-footer { margin-top:48px; } .glass-panel { border-radius:16px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation:none!important; transition:none!important; } }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) { .glass-panel,.shop-header { background:#f6fbf7; } }
@media(prefers-reduced-transparency:reduce) { .glass-panel,.shop-header { background:#f6fbf7; backdrop-filter:none; -webkit-backdrop-filter:none; } }
@media(prefers-reduced-transparency:reduce) { .shop-mobile-dock { background:#f0f8f3; backdrop-filter:none; -webkit-backdrop-filter:none; } }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) { .shop-mobile-dock { background:#f0f8f3; } }
@media print { .shop-header,.shop-footer,.shop-mobile-dock,.shop-primary,.shop-secondary,button,.shop-status { display:none!important; } body { background:white; padding:0; } .shop-shell { width:100%; } .glass-panel { box-shadow:none; border-color:#ddd; } }