/* ==========================================================================
   گیفت‌لند — استایل مشترک فروشگاه
   Design tokens (dark default + light), shared layout & component classes.
   Used by every storefront page. Admin panel has its own stylesheet.
   ========================================================================== */
* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:#1A1B1F; --bg2:#141519;
  --surface:linear-gradient(155deg,rgba(255,255,255,.10),rgba(255,255,255,.03));
  --inset:linear-gradient(155deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  --tile:rgba(255,255,255,.08); --cover:rgba(255,255,255,.04);
  --glass:blur(26px) saturate(1.6); --glass-hi:inset 0 1px 0 rgba(255,255,255,.18);
  --blob1:rgba(255,231,178,.17); --blob2:rgba(244,196,124,.12);
  --ink:#FFFFFF; --text:#EDECE8; --body:#C9CAC4; --muted:#9C9D9B; --faint:#83847F; --dim:#6E6F6A; --dimmer:#5E5F5A;
  --line:rgba(255,255,255,.12); --line2:rgba(255,255,255,.17); --line3:rgba(255,255,255,.24);
  --accent:#FFE7B2; --accent-hover:#F2D48D; --accent-ink:#FFE7B2;
  --accent-soft:rgba(255,231,178,.08); --accent-line:rgba(255,231,178,.22); --accent-line2:rgba(255,231,178,.45);
  --header:rgba(26,27,31,.88); --grid:rgba(255,255,255,.016); --glow:rgba(255,231,178,.07); --glow2:rgba(255,231,178,.08);
  --shadow:0 30px 80px rgba(0,0,0,.45);
  --ok:#7BD88F; --ok-soft:rgba(123,216,143,.1); --ok-line:rgba(123,216,143,.26);
  --wait:#F4C47C; --wait-soft:rgba(244,196,124,.12); --wait-line:rgba(244,196,124,.28);
  --danger:#EF9A9A; --danger-soft:rgba(239,154,154,.1); --danger-line:rgba(239,154,154,.26);
  --ink-on-accent:#202126;
}

body[data-theme="light"] {
  --bg:#F3F4F6; --bg2:#ECEDEF;
  --surface:linear-gradient(155deg,rgba(255,255,255,.72),rgba(255,255,255,.38));
  --inset:rgba(255,255,255,.5); --tile:rgba(255,255,255,.6); --cover:rgba(32,33,38,.04);
  --glass:blur(28px) saturate(1.05); --glass-hi:inset 0 1px 0 rgba(255,255,255,1);
  --blob1:rgba(52,54,64,.12); --blob2:rgba(110,113,124,.14);
  --ink:#202126; --text:#26272B; --body:#44454A; --muted:#66676D; --faint:#85868C; --dim:#A0A1A6; --dimmer:#B3B4B8;
  --line:rgba(32,33,38,.1); --line2:rgba(32,33,38,.13); --line3:rgba(32,33,38,.22);
  --accent-ink:#96690F; --accent-soft:rgba(150,105,15,.06); --accent-line:rgba(150,105,15,.2); --accent-line2:rgba(150,105,15,.42);
  --header:rgba(246,247,249,.8); --grid:rgba(32,33,38,.025); --glow:rgba(32,33,38,.05); --glow2:rgba(32,33,38,.04);
  --shadow:0 24px 60px rgba(32,33,38,.1);
  --ok:#1F8A5B; --ok-soft:rgba(31,138,91,.08); --ok-line:rgba(31,138,91,.2);
  --wait:#B57A16; --wait-soft:rgba(181,122,22,.08); --wait-line:rgba(181,122,22,.22);
  --danger:#C0392B; --danger-soft:rgba(192,57,43,.08); --danger-line:rgba(192,57,43,.2);
}

body {
  font-family:'Vazirmatn',system-ui,sans-serif; direction:rtl;
  background:var(--bg); color:var(--text); min-height:100vh; overflow-x:hidden;
}
a { color:var(--accent-ink); text-decoration:none; }
a:hover { color:var(--accent-ink); }
::selection { background:#FFE7B2; color:#202126; }
::-webkit-scrollbar { width:11px; height:11px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:rgba(128,128,128,.35); border-radius:8px; border:2px solid var(--bg); }
.ic { display:grid; place-items:center; }
img { max-width:100%; display:block; }

/* ambient background blobs */
.bg-blobs { position:fixed; inset:0; pointer-events:none; z-index:0; }
.bg-blobs .blob { position:absolute; border-radius:50%; }
.blob-a { top:-180px; right:-160px; width:600px; height:600px; background:radial-gradient(circle,var(--blob1),transparent 65%); }
.blob-b { top:26%; left:-220px; width:680px; height:680px; background:radial-gradient(circle,var(--blob2),transparent 65%); }
.blob-c { top:58%; right:8%; width:520px; height:520px; background:radial-gradient(circle,var(--blob1),transparent 65%); }
.blob-d { bottom:-260px; left:24%; width:720px; height:720px; background:radial-gradient(circle,var(--blob2),transparent 65%); }

.page { background:var(--bg); color:var(--text); min-height:100vh; overflow-x:hidden; }
.wrap { max-width:1200px; margin:0 auto; padding-left:32px; padding-right:32px; }
.z { position:relative; z-index:1; }

/* announcement bar */
.announce { background:var(--bg2); border-bottom:1px solid var(--line); font-size:12px; font-weight:500; text-align:center; padding:9px 16px; color:var(--muted); }
.announce b { color:var(--accent-ink); font-weight:700; letter-spacing:.5px; }

/* ============================ HEADER ============================ */
.hdr { position:sticky; top:0; z-index:50; background:var(--header); backdrop-filter:blur(20px); border-bottom:1px solid var(--line); }
.hdr-inner { max-width:1200px; margin:0 auto; padding:0 32px; height:76px; display:flex; align-items:center; gap:28px; }
.logo { display:flex; align-items:center; gap:12px; text-decoration:none; flex:none; }
.logo-mark { width:40px; height:40px; border-radius:11px; background:#FFE7B2; display:grid; place-items:center; }
.logo-txt { display:flex; flex-direction:column; line-height:1.15; }
.logo-name { font-size:17.5px; font-weight:800; color:var(--ink); letter-spacing:-.2px; }
.logo-tag { font-size:10px; color:var(--faint); font-weight:500; letter-spacing:.3px; }
.nav { display:flex; align-items:center; gap:4px; flex:none; }
.nav a { padding:9px 14px; color:var(--muted); font-size:13.5px; font-weight:500; text-decoration:none; border-radius:9px; }
.nav a:hover, .nav a.active { color:var(--ink); background:var(--accent-soft); }
.hdr-search { flex:1; position:relative; max-width:320px; min-width:170px; margin-right:auto; }
.hdr-search input { width:100%; background:var(--tile); border:1px solid var(--line2); border-radius:11px; padding:10.5px 40px 10.5px 14px; color:var(--text); font-family:inherit; font-size:13px; outline:none; }
.hdr-search input:focus { border-color:var(--accent-line2); }
.hdr-search svg { position:absolute; right:14px; top:50%; transform:translateY(-50%); opacity:.45; color:var(--text); }
.hdr-actions { display:flex; align-items:center; gap:10px; flex:none; }
.theme-btn { width:41px; height:41px; border-radius:11px; background:transparent; border:1px solid var(--line3); cursor:pointer; display:grid; place-items:center; color:var(--muted); }
.theme-btn:hover { border-color:var(--accent-line2); color:var(--accent-ink); }

/* ============================ BUTTONS ============================ */
.btn { display:inline-flex; align-items:center; gap:9px; border-radius:11px; font-family:inherit; font-weight:700; cursor:pointer; text-decoration:none; border:none; font-size:13px; padding:10px 18px; transition:background .18s, border-color .18s, transform .18s; }
.btn-primary { background:#FFE7B2; color:#202126; }
.btn-primary:hover { background:#F2D48D; color:#202126; }
.btn-outline { background:transparent; border:1px solid var(--line3); color:var(--text); font-weight:600; }
.btn-outline:hover { border-color:var(--accent-line2); }
.btn-lg { font-size:14.5px; padding:15px 32px; border-radius:12px; }
.btn-dark { background:#202126; color:#FFE7B2; }
.btn-dark:hover { background:#2A2B31; color:#FFE7B2; }
.btn-block { width:100%; justify-content:center; }

/* ============================ SHARED PRIMITIVES ============================ */
.glass { background:var(--surface); backdrop-filter:var(--glass); -webkit-backdrop-filter:var(--glass); box-shadow:var(--glass-hi); border:1px solid var(--line); border-radius:18px; }
.eyebrow { font-size:12.5px; color:var(--accent-ink); font-weight:700; letter-spacing:.5px; display:block; margin-bottom:10px; }
.h2 { font-size:30px; font-weight:800; color:var(--ink); letter-spacing:-.5px; }
.sec { position:relative; z-index:1; max-width:1200px; margin:0 auto; padding:88px 32px 0; }
.sec-head { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:36px; gap:18px; flex-wrap:wrap; }
.link-more { font-size:13px; color:var(--muted); text-decoration:none; display:flex; align-items:center; gap:7px; font-weight:500; padding-bottom:4px; }
.link-more:hover { color:var(--accent-ink); }
.pill { display:inline-flex; align-items:center; gap:6px; font-size:10.5px; font-weight:700; padding:4px 11px; border-radius:100px; }
.pill.ok { background:var(--ok-soft); border:1px solid var(--ok-line); color:var(--ok); }
.pill.wait { background:var(--wait-soft); border:1px solid var(--wait-line); color:var(--wait); }
.pill.accent { background:var(--accent-soft); border:1px solid var(--accent-line); color:var(--accent-ink); }

/* category tiles */
.cat-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:12px; }
.cat-tile { background:var(--surface); backdrop-filter:var(--glass); -webkit-backdrop-filter:var(--glass); box-shadow:var(--glass-hi); border:1px solid var(--line); border-radius:16px; padding:26px 18px 22px; text-decoration:none; display:flex; flex-direction:column; gap:16px; transition:transform .2s, border-color .2s; }
.cat-tile:hover { border-color:var(--accent-line2); transform:translateY(-3px); }
.cat-ic { width:46px; height:46px; border-radius:13px; background:var(--accent-soft); border:1px solid var(--accent-line); display:grid; place-items:center; color:var(--accent-ink); }
.cat-name { font-size:14px; color:var(--ink); display:block; margin-bottom:4px; font-weight:700; }
.cat-count { font-size:11.5px; color:var(--faint); }

/* product cards */
.prod-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.prod { background:var(--surface); backdrop-filter:var(--glass); -webkit-backdrop-filter:var(--glass); box-shadow:var(--glass-hi); border:1px solid var(--line); border-radius:18px; overflow:hidden; display:flex; flex-direction:column; transition:transform .2s, border-color .2s; }
.prod:hover { border-color:var(--accent-line2); transform:translateY(-3px); }
.prod-img { position:relative; height:150px; background:var(--cover); border-bottom:1px solid var(--line); display:grid; place-items:center; overflow:hidden; }
.prod-img img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.prod-img .ph { color:var(--dim); }
.prod-badge { position:absolute; top:12px; right:12px; background:var(--surface); color:var(--accent-ink); font-size:10.5px; font-weight:700; padding:4px 11px; border-radius:100px; border:1px solid var(--accent-line); }
.prod-body { padding:18px; display:flex; flex-direction:column; flex:1; }
.prod-name { font-size:14.5px; color:var(--ink); margin-bottom:4px; font-weight:700; text-decoration:none; }
.prod-name:hover { color:var(--accent-ink); }
.prod-sub { font-size:12px; color:var(--faint); margin-bottom:18px; }
.prod-foot { margin-top:auto; display:flex; align-items:flex-end; justify-content:space-between; }
.prod-old { font-size:11px; color:var(--dim); text-decoration:line-through; display:block; margin-bottom:1px; }
.prod-price { font-size:16px; color:var(--ink); font-weight:800; }
.prod-price .u { font-size:10.5px; font-weight:400; color:var(--faint); }
.prod-buy { width:38px; height:38px; border-radius:11px; background:transparent; border:1px solid var(--accent-line2); cursor:pointer; display:grid; place-items:center; color:var(--accent-ink); }
.prod-buy:hover { background:var(--accent-soft); }

/* tabs */
.tabs { display:flex; gap:4px; background:var(--surface); backdrop-filter:var(--glass); -webkit-backdrop-filter:var(--glass); border:1px solid var(--line2); border-radius:12px; padding:4px; }
.tab { padding:9px 18px; border-radius:9px; border:none; cursor:pointer; font-family:inherit; font-size:12.5px; font-weight:600; background:transparent; color:var(--faint); }
.tab.active { background:#FFE7B2; color:#202126; font-weight:700; }

/* FAQ accordion */
.faq-list { border-top:1px solid var(--line2); }
.faq-item { border-bottom:1px solid var(--line2); }
.faq-q { width:100%; background:transparent; border:none; padding:22px 4px; display:flex; align-items:center; justify-content:space-between; gap:16px; cursor:pointer; font-family:inherit; text-align:right; }
.faq-q span.q { font-size:15px; font-weight:600; color:var(--text); }
.faq-toggle { flex:none; display:grid; place-items:center; width:30px; height:30px; border-radius:9px; border:1px solid var(--line3); color:var(--faint); }
.faq-item.open .faq-toggle { border-color:var(--accent-line2); color:var(--accent-ink); }
.faq-a { padding:0 4px 24px; font-size:13.5px; line-height:2.1; color:var(--muted); font-weight:300; display:none; }
.faq-item.open .faq-a { display:block; }

/* forms */
.field-lbl { font-size:12.5px; color:var(--faint); font-weight:600; display:block; margin-bottom:8px; }
.input, .textarea { width:100%; background:var(--tile); border:1px solid var(--line2); border-radius:12px; padding:12px 15px; color:var(--text); font-family:inherit; font-size:13.5px; outline:none; }
.input:focus, .textarea:focus { border-color:var(--accent-line2); }
.input.ltr { direction:ltr; text-align:right; }
.textarea { resize:vertical; line-height:2; min-height:120px; }

/* ============================ FOOTER ============================ */
.ftr { position:relative; z-index:1; border-top:1px solid var(--line); background:var(--bg2); }
.ftr-top { max-width:1200px; margin:0 auto; padding:56px 32px 28px; display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:40px; }
.ftr-about p { font-size:12.5px; line-height:2.1; color:var(--faint); max-width:300px; font-weight:300; }
.ftr-logo { display:flex; align-items:center; gap:11px; text-decoration:none; margin-bottom:18px; }
.ftr-logo .logo-mark { width:36px; height:36px; border-radius:10px; }
.ftr-logo b { font-size:16px; color:var(--ink); font-weight:800; }
.ftr-socials { display:flex; gap:8px; margin-top:22px; }
.ftr-socials a { width:38px; height:38px; border-radius:10px; background:var(--tile); border:1px solid var(--line); display:grid; place-items:center; color:var(--muted); text-decoration:none; }
.ftr-socials a:hover { border-color:var(--accent-line2); color:var(--accent-ink); }
.ftr-col b { font-size:13.5px; color:var(--ink); display:block; margin-bottom:18px; font-weight:700; }
.ftr-col .links { display:flex; flex-direction:column; gap:12px; }
.ftr-col a { font-size:12.5px; color:var(--faint); text-decoration:none; font-weight:400; }
.ftr-col a:hover { color:var(--accent-ink); }
.ftr-bot { border-top:1px solid var(--line); }
.ftr-bot-inner { max-width:1200px; margin:0 auto; padding:20px 32px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; }
.ftr-copy { font-size:12px; color:var(--dimmer); }
.ftr-badges { display:flex; align-items:center; gap:8px; }
.ftr-badge { display:flex; align-items:center; gap:8px; background:var(--tile); border:1px solid var(--line); padding:8px 14px; border-radius:10px; font-size:11px; color:var(--muted); font-weight:500; }
.ftr-badge svg { color:var(--accent-ink); }

/* breadcrumb */
.crumb { display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--faint); padding:22px 0; flex-wrap:wrap; }
.crumb a { color:var(--faint); text-decoration:none; }
.crumb a:hover { color:var(--accent-ink); }
.crumb .sep { opacity:.5; }

/* responsive */
@media (max-width:1000px) {
  .cat-grid { grid-template-columns:repeat(3,1fr); }
  .prod-grid { grid-template-columns:repeat(2,1fr); }
  .ftr-top { grid-template-columns:1fr 1fr; }
}
@media (max-width:720px) {
  .nav { display:none; }
  .hero-grid { grid-template-columns:1fr !important; }
  .cat-grid { grid-template-columns:repeat(2,1fr); }
  .ftr-top { grid-template-columns:1fr; }
  .wrap, .sec, .hdr-inner { padding-left:18px; padding-right:18px; }
}