/* =========================================================================
   EDIUSFA DESIGN SYSTEM — COMPONENTS  ·  v1.0
   Canonical component library. Values are identical to the production
   V3 homepage stylesheet; future pages load ONLY tokens + components.
   ========================================================================= */

/* ---- Reset / base ------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font);
  background:var(--paper);
  color:var(--text);
  font-size:var(--fs-base);
  line-height:var(--lh-base);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
svg{display:block;flex-shrink:0}

::selection{background:var(--primary);color:#fff}

a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--primary);
  outline-offset:2px;
  border-radius:4px;
}

.container{max-width:var(--container);margin-inline:auto;padding-inline:24px}
.icon{width:20px;height:20px}
.icon-sm{width:17px;height:17px}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;inset-inline-start:16px;top:-48px;z-index:200;
  background:var(--text);color:#fff;padding:10px 18px;border-radius:var(--r-sm);
  font-size:var(--fs-sm);font-weight:600;transition:top var(--t-fast);
}
.skip-link:focus{top:12px}

/* =========================================================================
   BUTTONS
   قاعده: حداکثر یک «primary» در هر نما. danger فقط برای کنش مخرب.
   ========================================================================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:12px 24px;border-radius:var(--r-sm);
  font-size:var(--fs-md);font-weight:700;line-height:1.5;
  border:1.5px solid transparent;white-space:nowrap;
  transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast),transform var(--t-fast),box-shadow var(--t-fast);
}
.btn:active{transform:translateY(1px)}
.btn .icon{width:18px;height:18px}

/* variants */
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-hover)}
.btn-soft{background:var(--primary-soft);color:var(--primary-ink)}
.btn-soft:hover{background:#D8E9EC}
.btn-outline{border-color:var(--border-strong);color:var(--text);background:var(--surface)}
.btn-outline:hover{border-color:var(--primary);color:var(--primary-ink)}
.btn-ghost{color:var(--text-muted)}
.btn-ghost:hover{background:var(--surface-muted);color:var(--text)}
.btn-danger{background:var(--danger);color:#fff}
.btn-danger:hover{background:#96291F}
.btn-danger-soft{background:var(--danger-soft);color:var(--danger)}
.btn-danger-soft:hover{background:#F3D9D5}
/* on dark bands (footer / dark panels) */
.btn-white{background:#fff;color:var(--primary-hover)}
.btn-white:hover{background:#EAF5F6}
.btn-ghost-light{border-color:rgba(255,255,255,.38);color:#fff}
.btn-ghost-light:hover{background:rgba(255,255,255,.1)}

/* sizes */
.btn-lg{padding:14px 30px;font-size:var(--fs-md);border-radius:var(--r-md)}
.btn-sm{padding:8px 16px;font-size:var(--fs-sm)}
.btn-block{width:100%}

/* loading */
.btn .spinner{width:16px;height:16px;border-radius:50%;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;
  animation:ds-spin .7s linear infinite;flex-shrink:0}
.btn-outline .spinner,.btn-ghost .spinner,.btn-soft .spinner,.btn-danger-soft .spinner{
  border-color:rgba(14,115,128,.25);border-top-color:var(--primary)}
.btn.is-loading{pointer-events:none;opacity:.82}
@keyframes ds-spin{to{transform:rotate(360deg)}}

/* disabled */
.btn[disabled],.btn.is-disabled,.btn[aria-disabled="true"]{
  opacity:.45;pointer-events:none}

/* icon button */
.icon-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:var(--r-sm);color:var(--text-muted);
  transition:background var(--t-fast),color var(--t-fast);
  position:relative;
}
.icon-btn:hover{background:var(--surface-muted);color:var(--text)}
.icon-btn.is-on{color:var(--danger)}
.icon-btn.sm{width:36px;height:36px}

/* text link with RTL arrow */
.link-more{
  display:inline-flex;align-items:center;gap:7px;
  font-size:var(--fs-sm);font-weight:700;color:var(--primary-ink);
  transition:gap var(--t-fast),color var(--t-fast);
}
.link-more:hover{color:var(--primary-hover);gap:11px}
.link-more .icon-sm{width:15px;height:15px;transform:scaleX(-1)}

/* =========================================================================
   CHIP — spec metadata atom (software version / format / ratio)
   ========================================================================= */
.chip{
  display:inline-flex;align-items:center;
  font-size:11.5px;font-weight:600;line-height:1.6;
  color:var(--text-muted);background:var(--surface-muted);
  border:1px solid var(--border);
  padding:2px 9px;border-radius:var(--r-xs);white-space:nowrap;
}

/* =========================================================================
   BADGES — compact status atoms
   ========================================================================= */
.badge{
  display:inline-flex;align-items:center;gap:4px;
  font-size:10.5px;font-weight:700;letter-spacing:.03em;
  padding:4px 9px;border-radius:var(--r-full);color:#fff;
}
.badge .icon-sm{width:11px;height:11px}
.badge-sw{background:rgba(20,23,28,.76);backdrop-filter:blur(3px)}
.badge-new{background:var(--primary)}
.badge-sale{background:var(--secondary)}
.badge-free{background:var(--success)}
.badge-popular{background:var(--secondary-soft);color:var(--secondary-strong)}
.badge-cat{background:var(--primary-soft);color:var(--primary-ink)}
.badge-compatible{background:var(--surface-muted);color:var(--text-muted);border:1px solid var(--border-strong)}
.badge-verified{background:var(--success-soft);color:var(--success)}
.badge-download{background:var(--primary-soft);color:var(--primary-ink)}
.badge-info{background:var(--info-soft);color:var(--info)}
.badge-warning{background:var(--warning-soft);color:var(--warning)}
.badge-danger{background:var(--danger-soft);color:var(--danger)}
.badge-success{background:var(--success-soft);color:var(--success)}
.badge-neutral{background:var(--surface-muted);color:var(--text-muted)}

/* =========================================================================
   FORMS
   ========================================================================= */
.field{display:flex;flex-direction:column;gap:7px}
.field-label{font-size:var(--fs-sm);font-weight:700;color:var(--text)}
.field-label .req{color:var(--danger)}
.field-hint{font-size:var(--fs-2xs);color:var(--text-subtle);line-height:1.7}
.field-error{display:none;align-items:center;gap:5px;font-size:var(--fs-2xs);font-weight:600;color:var(--danger)}
.field-error .icon-sm{width:13px;height:13px}
.field-ok{display:none;align-items:center;gap:5px;font-size:var(--fs-2xs);font-weight:600;color:var(--success)}
.field-ok .icon-sm{width:13px;height:13px}
.field.has-error .field-error{display:inline-flex}
.field.has-error .field-ok{display:none}
.field.has-success .field-ok{display:inline-flex}
.field.has-success .field-error{display:none}

.input,.select,.textarea{
  width:100%;background:var(--surface);
  border:1.5px solid var(--border-strong);border-radius:var(--r-sm);
  padding:10px 14px;font-size:var(--fs-base);color:var(--text);
  transition:border-color var(--t-fast),box-shadow var(--t-fast),background var(--t-fast);
}
.input::placeholder,.textarea::placeholder{color:var(--text-subtle)}
.input:hover,.select:hover,.textarea:hover{border-color:#C6BFAE}
.input:focus,.select:focus,.textarea:focus{
  outline:none;border-color:var(--primary);box-shadow:var(--focus-ring)}
.input:disabled,.select:disabled,.textarea:disabled{
  background:var(--surface-muted);color:var(--text-subtle);cursor:not-allowed}
.input-lg{height:50px;font-size:var(--fs-md);padding-block:0}
.input.is-error{border-color:var(--danger)}
.input.is-error:focus{box-shadow:0 0 0 3px rgba(179,55,47,.14)}
.input.is-success{border-color:var(--success)}
.input.is-success:focus{box-shadow:0 0 0 3px rgba(26,122,74,.14)}

.textarea{min-height:110px;resize:vertical;line-height:1.8}

.select{
  appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237B8390' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:left 13px center;
  padding-inline-start:38px;padding-inline-end:14px;
}

/* input with inline suffix (قیمت + تومان) */
.input-suffix{position:relative;display:flex;align-items:center}
.input-suffix .input{padding-inline-end:64px}
.input-suffix .suffix{
  position:absolute;inset-inline-end:13px;
  font-size:var(--fs-xs);font-weight:700;color:var(--text-subtle);pointer-events:none}

/* search field (compact — header) */
.search-field{
  display:flex;align-items:center;gap:9px;
  background:var(--surface-muted);
  border:1.5px solid transparent;border-radius:var(--r-full);
  padding:0 15px;height:44px;
  transition:background var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast);
}
.search-field:focus-within{
  background:var(--surface);border-color:var(--primary);box-shadow:var(--focus-ring)}
.search-field .icon-sm{color:var(--text-subtle)}
.search-field input{
  flex:1;min-width:0;background:none;border:0;outline:none;
  font-size:var(--fs-sm);height:100%}
.search-field input::placeholder{color:var(--text-subtle)}
.search-kbd{
  font-size:10.5px;color:var(--text-subtle);border:1px solid var(--border-strong);
  border-radius:5px;padding:1px 6px;background:var(--surface);flex-shrink:0}

/* checkbox + radio */
.choice{display:inline-flex;align-items:center;gap:9px;
  font-size:var(--fs-sm);font-weight:600;color:var(--text);cursor:pointer}
.choice input{
  appearance:none;width:19px;height:19px;flex-shrink:0;cursor:pointer;
  border:1.5px solid var(--border-strong);border-radius:5px;background:var(--surface);
  display:grid;place-items:center;
  transition:background var(--t-fast),border-color var(--t-fast)}
.choice input::after{
  content:"";width:11px;height:11px;transform:scale(0);
  transition:transform var(--t-fast);
  background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E")}
.choice input:checked{background:var(--primary);border-color:var(--primary)}
.choice input:checked::after{transform:scale(1)}
.choice input:disabled{background:var(--surface-muted);border-color:var(--border)}
.choice input:disabled ~ span,.choice:has(input:disabled){opacity:.5;cursor:not-allowed}
.choice.radio input{border-radius:50%}
.choice.radio input::after{
  content:"";width:9px;height:9px;border-radius:50%;background:#fff;
  transform:scale(0);transition:transform var(--t-fast)}
.choice.radio input:checked::after{transform:scale(1)}

/* toggle switch */
.switch{position:relative;display:inline-flex;width:44px;height:25px;flex-shrink:0}
.switch input{
  appearance:none;width:100%;height:100%;cursor:pointer;
  border-radius:var(--r-full);background:var(--border-strong);
  transition:background var(--t-fast)}
.switch input:checked{background:var(--primary)}
.switch input::after{
  content:"";position:absolute;top:3px;inset-inline-start:3px;
  width:19px;height:19px;border-radius:50%;background:#fff;
  box-shadow:var(--sh-xs);transition:transform var(--t-fast);pointer-events:none}
.switch input:checked::after{transform:translateX(-19px)} /* RTL: knob travels left */
.switch input:disabled{opacity:.45;cursor:not-allowed}

/* quantity stepper */
.qty{display:inline-flex;align-items:center;overflow:hidden;
  border:1.5px solid var(--border-strong);border-radius:var(--r-sm);background:var(--surface)}
.qty button{
  width:36px;height:38px;display:flex;align-items:center;justify-content:center;
  color:var(--text-muted);transition:background var(--t-fast),color var(--t-fast)}
.qty button:hover{background:var(--surface-muted);color:var(--text)}
.qty input{
  width:42px;height:38px;text-align:center;border:0;outline:0;background:none;
  font-weight:700;font-size:var(--fs-sm);
  border-inline:1px solid var(--border)}
.qty button[disabled]{opacity:.4;cursor:not-allowed}

/* file dropzone (visual) */
.file-drop{
  display:flex;flex-direction:column;align-items:center;gap:7px;
  padding:26px 20px;text-align:center;cursor:pointer;
  border:1.5px dashed var(--border-strong);border-radius:var(--r-md);
  background:var(--surface);
  transition:border-color var(--t-fast),background var(--t-fast)}
.file-drop:hover{border-color:var(--primary);background:#FBFDFD}
.file-drop .icon{width:24px;height:24px;color:var(--text-subtle)}
.file-drop b{font-size:var(--fs-sm);font-weight:700}
.file-drop span{font-size:var(--fs-2xs);color:var(--text-subtle)}

/* multi-select (visual pattern: input + selected chips) */
.mselect{display:flex;flex-direction:column;gap:9px}
.mselect-box{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-height:44px;
  background:var(--surface);border:1.5px solid var(--border-strong);
  border-radius:var(--r-sm);padding:6px 10px;cursor:text;
  transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.mselect-box:focus-within{border-color:var(--primary);box-shadow:var(--focus-ring)}
.mselect-box input{flex:1;min-width:110px;border:0;outline:0;background:none;font-size:var(--fs-sm)}
.mselect-chip{
  display:inline-flex;align-items:center;gap:5px;
  background:var(--primary-soft);color:var(--primary-ink);
  font-size:var(--fs-xs);font-weight:700;
  padding:3px 6px 3px 9px;border-radius:var(--r-xs)}
.mselect-chip button{
  width:16px;height:16px;border-radius:4px;display:flex;align-items:center;justify-content:center;
  color:var(--primary-ink);transition:background var(--t-fast)}
.mselect-chip button:hover{background:rgba(11,93,104,.14)}
.mselect-chip .icon-sm{width:11px;height:11px}

/* =========================================================================
   PRODUCT CARD — قلب تجاری ادیوس‌فا
   ترتیب اجزا ثابت است: تصویر → بج نرم‌افزار → عنوان → سازگاری → امتیاز → قیمت → کنش
   ========================================================================= */
.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.p-card{
  position:relative;display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--sh-xs);
  transition:box-shadow var(--t-med),transform var(--t-med),border-color var(--t-med);
}
.p-card:hover{box-shadow:var(--sh-md);transform:translateY(-3px);border-color:var(--border-strong)}

.p-cover{position:relative;display:block;overflow:hidden;background:var(--surface-muted)}
.p-cover img{aspect-ratio:16/9;object-fit:cover;width:100%;transition:transform .55s var(--ease)}
.p-card:hover .p-cover img{transform:scale(1.05)}
.p-card.is-unavailable .p-cover img{filter:grayscale(1);opacity:.6}

/* preview pill — روی دستگاه لمسی همیشه نمایان */
.p-play{
  position:absolute;bottom:10px;inset-inline-start:10px;
  display:inline-flex;align-items:center;gap:5px;
  background:rgba(20,23,28,.72);color:#fff;
  font-size:10.5px;font-weight:700;
  padding:5px 11px;border-radius:var(--r-full);
  backdrop-filter:blur(3px);
  opacity:0;transform:translateY(4px);
  transition:opacity var(--t-fast),transform var(--t-fast);
}
.p-play svg{width:10px;height:10px}
.p-card:hover .p-play{opacity:1;transform:translateY(0)}
@media (hover:none){.p-play{opacity:1;transform:none}}

.p-badges{position:absolute;top:10px;inset-inline-start:10px;display:flex;gap:6px;z-index:2}

.p-wish{
  position:absolute;top:9px;inset-inline-end:9px;z-index:2;
  width:36px;height:36px;border-radius:var(--r-full);
  background:rgba(255,255,255,.94);color:var(--text-muted);
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--sh-xs);
  transition:color var(--t-fast),transform var(--t-fast),background var(--t-fast);
}
.p-wish:hover{transform:scale(1.08);color:var(--danger)}
.p-wish .icon-sm{width:17px;height:17px}
.p-wish[aria-pressed="true"]{color:var(--danger)}
.p-wish[aria-pressed="true"] .icon-sm{fill:currentColor}

.p-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:8px;flex:1}
.p-toprow{display:flex;align-items:center;justify-content:space-between;gap:8px}
.p-cat{font-size:var(--fs-2xs);color:var(--text-subtle);font-weight:600}
.p-rating{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-2xs);color:var(--text-subtle)}
.p-rating b{color:var(--text-muted);font-weight:700}

/* stars — partially filled via inner span width */
.stars{position:relative;display:inline-block;font-size:13px;line-height:1;letter-spacing:2px;color:#DDD8CC}
.stars>span{position:absolute;inset-inline-start:0;top:0;overflow:hidden;white-space:nowrap;color:#E8A33D;letter-spacing:2px}

.p-title{
  font-size:14.5px;font-weight:700;line-height:1.7;color:var(--text);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:2.6em;
}
.p-title.t-lg{font-size:16.5px}
.p-card:hover .p-title{color:var(--primary-ink)}

.p-specs{display:flex;flex-wrap:wrap;gap:6px}

.p-foot{
  margin-top:auto;padding-top:12px;border-top:1px dashed var(--border);
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}

/* =========================================================================
   PRICE — amber فقط اینجا. اعداد فارسی + جداکنندهٔ «٬»
   ========================================================================= */
.price-wrap{display:flex;flex-direction:column;line-height:1.4}
.price-old{font-size:var(--fs-2xs);color:var(--text-subtle);text-decoration:line-through}
.price{font-size:17px;font-weight:800;color:var(--secondary)}
.price small{font-size:11px;font-weight:600;color:var(--text-subtle);margin-inline-start:3px}
.price-lg{font-size:22px}
.price-free{color:var(--success)}
.price-unavailable{color:var(--text-subtle);font-size:var(--fs-sm);font-weight:700}
.price-note{font-size:var(--fs-2xs);color:var(--text-subtle)}

/* add-to-cart icon button */
.add-btn{
  width:40px;height:40px;border-radius:var(--r-sm);
  border:1.5px solid var(--border-strong);
  display:flex;align-items:center;justify-content:center;color:var(--text-muted);
  transition:all var(--t-fast);flex-shrink:0;
}
.add-btn:hover{background:var(--primary);border-color:var(--primary);color:#fff}
.add-btn .icon-sm{width:18px;height:18px}
.add-btn.added{background:var(--success);border-color:var(--success);color:#fff}
.add-btn.is-free{border-color:var(--success);color:var(--success)}
.add-btn.is-free:hover{background:var(--success);color:#fff}
.add-btn-lg{width:52px;height:52px;border-radius:var(--r-md)}
.add-btn[disabled]{opacity:.4;cursor:not-allowed;pointer-events:none}

/* horizontal rail — موبایل/تبلت */
.scroll-row{
  display:grid;grid-auto-flow:column;
  grid-auto-columns:min(76vw,300px);
  gap:14px;overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding:4px 4px 14px;
  scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent;
}
.scroll-row>*{scroll-snap-align:start}

/* unavailable product card */
.p-card.is-unavailable .p-title{color:var(--text-subtle)}
.p-card.is-unavailable:hover{transform:none;box-shadow:var(--sh-xs)}

/* =========================================================================
   CATEGORY CARD — تصویر بزرگ + گرادیان خوانا + نام دسته
   ========================================================================= */
.cat-card{
  position:relative;display:block;
  border-radius:var(--r-lg);overflow:hidden;
  background:var(--surface);border:1px solid var(--border);
  box-shadow:var(--sh-xs);
  transition:box-shadow var(--t-med),border-color var(--t-med),transform var(--t-med);
}
.cat-card:hover{box-shadow:var(--sh-md);border-color:var(--border-strong);transform:translateY(-3px)}
.cat-card img{
  aspect-ratio:3/2;object-fit:cover;width:100%;
  transition:transform .55s var(--ease);
}
.cat-card:hover img{transform:scale(1.05)}
.cat-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(17,20,25,.68) 0%,rgba(17,20,25,.14) 46%,transparent 68%);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:16px 18px;
}
.cat-name{color:#fff;font-weight:800;font-size:var(--fs-lg);line-height:1.5}
.cat-meta{color:rgba(255,255,255,.78);font-size:var(--fs-xs);font-weight:500;margin-top:1px}
.cat-arrow{
  position:absolute;top:14px;inset-inline-end:14px;
  width:34px;height:34px;border-radius:var(--r-full);
  background:rgba(255,255,255,.92);color:var(--text);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transform:translateY(-4px);
  transition:opacity var(--t-fast),transform var(--t-fast);
}
.cat-arrow .icon-sm{width:15px;height:15px;transform:scaleX(-1)}
.cat-card:hover .cat-arrow,.cat-card:focus-visible .cat-arrow{opacity:1;transform:translateY(0)}
/* Fallback state — term without a thumbnail: keeps the 3/2 card shape. */
.cat-ph{
  aspect-ratio:3/2;width:100%;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--surface-muted) 0%,var(--border) 100%);
  color:var(--text-subtle);font-weight:700;font-size:var(--fs-lg);
}

/* =========================================================================
   GENERIC CARDS
   ========================================================================= */
.card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);box-shadow:var(--sh-xs);
}
.card-pad{padding:24px}
.card-title{font-size:var(--fs-md);font-weight:800}
.card-text{font-size:var(--fs-sm);color:var(--text-muted);line-height:2}

.info-card{display:flex;gap:13px;align-items:flex-start;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:20px}
.info-card .icon{width:22px;height:22px;color:var(--primary);margin-top:3px}
.info-card b{display:block;font-size:var(--fs-base);font-weight:800;margin-bottom:3px}
.info-card p{font-size:var(--fs-sm);color:var(--text-muted);line-height:1.9}

/* collection card — مجموعه/کمپاین محصولات مرتبط */
.coll-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-xs);
  transition:box-shadow var(--t-med),transform var(--t-med);
}
.coll-card:hover{box-shadow:var(--sh-md);transform:translateY(-2px)}
.coll-cover{position:relative;overflow:hidden}
.coll-cover img{aspect-ratio:16/8;object-fit:cover;width:100%}
.coll-cover .badge{position:absolute;top:12px;inset-inline-start:12px}
.coll-body{padding:18px 20px;display:flex;flex-direction:column;gap:11px}
.coll-body h3{font-size:var(--fs-md);font-weight:800}
.coll-list{display:flex;flex-direction:column}
.coll-list a{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px 0;font-size:var(--fs-sm);color:var(--text-muted);
  border-bottom:1px dashed var(--border);
  transition:color var(--t-fast)}
.coll-list a:last-child{border-bottom:0}
.coll-list a:hover{color:var(--primary-ink)}
.coll-list .price{font-size:13px}

/* review card — همیشه متصل به محصول خریداری‌شده */
.review-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:26px;
  display:flex;flex-direction:column;gap:13px;
  box-shadow:var(--sh-xs);
  transition:box-shadow var(--t-med),transform var(--t-med);
}
.review-card:hover{box-shadow:var(--sh-md);transform:translateY(-2px)}
.r-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.r-stars{font-size:14px;letter-spacing:3px;color:#E8A33D}
.r-head{display:flex;align-items:center;gap:12px}
.r-av{
  width:44px;height:44px;border-radius:var(--r-full);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:16px;
}
.r-av.v-teal{background:var(--primary-soft);color:var(--primary-ink)}
.r-av.v-amber{background:var(--secondary-soft);color:var(--secondary-strong)}
.r-av.v-rose{background:#F7E9EC;color:#963B4E}
.r-name{font-size:var(--fs-base);font-weight:800;line-height:1.5}
.r-role{font-size:var(--fs-xs);color:var(--text-subtle)}
.r-text{font-size:var(--fs-sm);color:var(--text-muted);line-height:2;flex:1}
.r-product{
  display:flex;align-items:center;gap:9px;
  font-size:var(--fs-2xs);font-weight:600;color:var(--text-muted);
  background:var(--surface-muted);border-radius:var(--r-full);
  padding:5px 14px 5px 5px;align-self:flex-start;
}
.r-product img{width:28px;height:28px;border-radius:var(--r-full);object-fit:cover}
.r-verified{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;color:var(--success)}
.r-verified .icon-sm{width:12px;height:12px}

/* author card */
.author-card{display:flex;gap:16px;align-items:flex-start;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:20px}
.author-av{
  width:56px;height:56px;border-radius:var(--r-full);flex-shrink:0;
  background:var(--primary-soft);color:var(--primary-ink);
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:19px}
.author-card b{display:block;font-size:var(--fs-base);font-weight:800}
.author-card .role{font-size:var(--fs-xs);color:var(--text-subtle);margin-bottom:6px;display:block}
.author-card p{font-size:var(--fs-sm);color:var(--text-muted);line-height:1.9}

/* =========================================================================
   ARTICLE CARDS — تحریریه
   ========================================================================= */
.a-card{
  display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-xs);
  transition:box-shadow var(--t-med),transform var(--t-med);
}
.a-card:hover{box-shadow:var(--sh-md);transform:translateY(-3px)}
.a-thumb{position:relative;overflow:hidden}
.a-thumb img{aspect-ratio:16/9;object-fit:cover;width:100%;transition:transform .55s var(--ease)}
.a-card:hover .a-thumb img{transform:scale(1.05)}
.a-cat{
  position:absolute;top:12px;inset-inline-start:12px;
  background:rgba(255,255,255,.94);color:var(--text);
  font-size:10.5px;font-weight:700;
  padding:4px 10px;border-radius:var(--r-full);
}
.a-body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:9px;flex:1}
.a-body h3{font-size:var(--fs-md);font-weight:800;line-height:1.7}
.a-body h3.t-lg{font-size:var(--fs-xl);line-height:1.65}
.a-card:hover .a-body h3{color:var(--primary-ink)}
.a-body p{
  font-size:var(--fs-sm);color:var(--text-muted);line-height:1.9;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.a-meta{
  margin-top:auto;padding-top:12px;border-top:1px dashed var(--border);
  display:flex;align-items:center;gap:14px;
  font-size:var(--fs-2xs);color:var(--text-subtle);
}
.a-meta span{display:inline-flex;align-items:center;gap:5px}
.a-meta .icon-sm{width:13px;height:13px}

.a-mini{
  display:grid;grid-template-columns:minmax(0,38fr) minmax(0,62fr);gap:16px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-xs);
  transition:box-shadow var(--t-med),transform var(--t-med);
}
.a-mini:hover{box-shadow:var(--sh-md);transform:translateY(-2px)}
.am-thumb{position:relative;overflow:hidden;min-height:128px}
.am-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease)}
.a-mini:hover .am-thumb img{transform:scale(1.05)}
.am-body{padding:14px 16px;display:flex;flex-direction:column;gap:6px}
.am-cat{font-size:var(--fs-2xs);font-weight:700;color:var(--primary-ink)}
.am-body h3{
  font-size:var(--fs-sm);font-weight:700;line-height:1.7;color:var(--text);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.a-mini:hover .am-body h3{color:var(--primary-ink)}
.am-body .a-meta{padding-top:8px;gap:12px;margin-top:auto}

/* table of contents */
.toc{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:20px 22px}
.toc-title{font-size:var(--fs-sm);font-weight:800;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.toc-title .icon-sm{color:var(--primary-ink)}
.toc ol{list-style:none;counter-reset:toc;display:flex;flex-direction:column;gap:4px}
.toc li{counter-increment:toc}
.toc li a{
  display:flex;align-items:center;gap:10px;
  font-size:var(--fs-sm);font-weight:600;color:var(--text-muted);
  padding:5px 2px;border-radius:var(--r-xs);
  transition:color var(--t-fast),background var(--t-fast)}
.toc li a:hover{color:var(--primary-ink);background:var(--surface-muted)}
.toc li a::before{
  content:counter(toc,persian);
  width:22px;height:22px;border-radius:var(--r-xs);flex-shrink:0;
  background:var(--surface-muted);color:var(--primary-ink);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800}
.toc li a[aria-current="true"]{color:var(--primary-ink)}

/* =========================================================================
   SEARCH — پنل پیشنهاد (مشترک بین هدر و هیرو)
   ========================================================================= */
.search-panel{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);box-shadow:var(--sh-lg);
  padding:20px;
}
.search-panel-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.sp-group-title{
  font-size:var(--fs-2xs);font-weight:700;color:var(--text-subtle);
  letter-spacing:.05em;margin-bottom:9px;display:flex;align-items:center;justify-content:space-between;
}
.sp-chips{display:flex;flex-wrap:wrap;gap:7px}
.sp-chips a{
  font-size:var(--fs-xs);font-weight:600;color:var(--text-muted);
  background:var(--surface-muted);border:1px solid var(--border);
  padding:5px 12px;border-radius:var(--r-full);
  transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast);
}
.sp-chips a:hover{background:var(--primary-soft);color:var(--primary-ink);border-color:var(--primary)}
.sp-list li a{
  display:flex;align-items:center;gap:8px;
  font-size:var(--fs-sm);color:var(--text-muted);padding:6px 4px;border-radius:var(--r-xs);
  transition:color var(--t-fast),background var(--t-fast);
}
.sp-list li a:hover{color:var(--primary-ink);background:var(--surface-muted)}
.sp-list .icon-sm{width:14px;height:14px;color:var(--text-subtle)}
.sp-empty{font-size:var(--fs-xs);color:var(--text-subtle);padding:6px 4px}
.sp-clear{font-size:var(--fs-2xs);font-weight:600;color:var(--primary-ink)}
.sp-footer{
  border-top:1px solid var(--border);margin-top:18px;padding-top:13px;
  display:flex;align-items:center;justify-content:space-between;
  font-size:var(--fs-xs);color:var(--text-subtle);
}
.sp-result{display:flex;align-items:center;gap:11px;padding:8px 6px;border-radius:var(--r-sm);transition:background var(--t-fast)}
.sp-result:hover{background:var(--surface-muted)}
.sp-result img{width:64px;height:40px;object-fit:cover;border-radius:var(--r-xs)}
.sp-result b{display:block;font-size:var(--fs-sm);font-weight:700;color:var(--text)}
.sp-result span{font-size:var(--fs-2xs);color:var(--text-subtle)}
.sp-result .price{margin-inline-start:auto;font-size:13px}

/* =========================================================================
   NAVIGATION COMPONENTS
   ========================================================================= */
/* breadcrumbs */
.crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:9px;font-size:var(--fs-xs);color:var(--text-subtle)}
.crumbs a{color:var(--text-muted);font-weight:600;transition:color var(--t-fast)}
.crumbs a:hover{color:var(--primary-ink)}
.crumbs .sep{color:var(--border-strong);display:inline-flex}
.crumbs .sep svg{width:12px;height:12px;transform:scaleX(-1)}
.crumbs [aria-current]{color:var(--text);font-weight:700}

/* pagination — RTL: «بعدی» سمت چپ */
.pagination{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.page-btn{
  min-width:38px;height:38px;padding-inline:9px;
  border-radius:var(--r-sm);border:1.5px solid var(--border-strong);
  background:var(--surface);color:var(--text-muted);
  font-size:var(--fs-sm);font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  transition:border-color var(--t-fast),color var(--t-fast),background var(--t-fast);
}
.page-btn .icon-sm{width:14px;height:14px}
.page-btn:hover{border-color:var(--primary);color:var(--primary-ink)}
.page-btn.is-current{background:var(--primary);border-color:var(--primary);color:#fff}
.page-btn[disabled]{opacity:.45;cursor:not-allowed;pointer-events:none}
.page-dots{color:var(--text-subtle);padding-inline:4px;letter-spacing:2px}

/* tabs — خط زیرین تحریریه‌ای */
.tabs{display:flex;gap:22px;border-bottom:1.5px solid var(--border);overflow-x:auto;scrollbar-width:none}
.tab{
  padding:11px 2px;font-size:var(--fs-base);font-weight:600;color:var(--text-muted);
  border-bottom:2px solid transparent;margin-bottom:-1.5px;white-space:nowrap;
  transition:color var(--t-fast),border-color var(--t-fast);
}
.tab:hover{color:var(--text)}
.tab[aria-selected="true"]{color:var(--primary-ink);border-color:var(--primary);font-weight:700}
.tab .count{font-size:var(--fs-2xs);color:var(--text-subtle);font-weight:700;margin-inline-start:4px}
.tab-panel{padding-top:16px;font-size:var(--fs-sm);color:var(--text-muted);line-height:2}

/* nav dropdown — نسخهٔ کانونی منوی افتادنی */
.nav-drop-panel{
  min-width:290px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-md);box-shadow:var(--sh-lg);padding:8px;
}
.nav-drop-panel a{
  display:flex;align-items:flex-start;gap:10px;
  padding:9px 10px;border-radius:var(--r-xs);
  transition:background var(--t-fast);
}
.nav-drop-panel a:hover{background:var(--surface-muted)}
.sw-dot{width:9px;height:9px;border-radius:3px;flex-shrink:0;margin-top:9px}
.dot-edius{background:#155B66}
.dot-premiere{background:#5D4E8E}
.dot-ae{background:#7A5C3E}
.nav-drop-panel .sw-name{display:block;font-weight:700;font-size:var(--fs-base);line-height:1.5}
.nav-drop-panel .sw-desc{display:block;font-size:var(--fs-xs);color:var(--text-subtle);line-height:1.6}

/* nav item states (نمونهٔ افقی) */
.main-nav{display:flex;align-items:center;gap:2px}
.nav-link{
  display:inline-flex;align-items:center;gap:5px;
  padding:9px 12px;border-radius:var(--r-sm);
  font-size:var(--fs-md);font-weight:600;color:var(--text-muted);
  white-space:nowrap;
  transition:color var(--t-fast),background var(--t-fast);
}
.nav-link:hover{color:var(--primary-ink);background:var(--surface-muted)}
.nav-link.is-current{color:var(--primary-ink);background:var(--primary-soft);font-weight:700}
.nav-link .chev{width:14px;height:14px}
.nav-link.is-accent{color:var(--success);font-weight:700}
.nav-link.is-accent:hover{background:var(--success-soft)}

/* =========================================================================
   FILTERS
   ========================================================================= */
.filter-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:20px;
  display:flex;flex-direction:column;gap:18px;
}
.filter-group{display:flex;flex-direction:column;gap:11px}
.filter-group + .filter-group{border-top:1px dashed var(--border);padding-top:16px}
.filter-title{
  font-size:var(--fs-2xs);font-weight:700;color:var(--text-subtle);
  letter-spacing:.05em;display:flex;align-items:center;justify-content:space-between;
}
.filter-title .fcount{font-weight:700;color:var(--text-subtle);letter-spacing:0}
.filter-list{display:flex;flex-direction:column;gap:10px}
.filter-list .choice{justify-content:space-between;flex-direction:row-reverse}
.filter-list .choice .fcount{margin-inline-start:auto;font-size:var(--fs-2xs);color:var(--text-subtle);font-weight:600}
.filter-list .choice span.lbl{display:inline-flex;align-items:center;gap:9px}

.price-range{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center}
.price-range .input{padding:8px 10px;font-size:var(--fs-sm)}
.price-range .dash{color:var(--text-subtle);font-weight:700}

.fchips{display:flex;flex-wrap:wrap;gap:7px}
.fchip{
  display:inline-flex;align-items:center;gap:5px;
  font-size:var(--fs-xs);font-weight:600;
  padding:5px 12px;border-radius:var(--r-full);
  border:1px solid var(--border-strong);background:var(--surface);color:var(--text-muted);
  cursor:pointer;
  transition:border-color var(--t-fast),color var(--t-fast),background var(--t-fast);
}
.fchip:hover{border-color:var(--primary);color:var(--primary-ink)}
.fchip.is-on{background:var(--primary-soft);border-color:var(--primary);color:var(--primary-ink)}
.fchip .icon-sm{width:12px;height:12px}

.active-filters{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px;
  padding:12px 16px;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-md);
}
.active-filters .lbl{font-size:var(--fs-xs);font-weight:700;color:var(--text-subtle)}
.clear-filters{
  font-size:var(--fs-xs);font-weight:700;color:var(--danger);
  display:inline-flex;align-items:center;gap:4px;margin-inline-start:auto;
  transition:color var(--t-fast)}
.clear-filters:hover{color:#96291F}
.clear-filters .icon-sm{width:12px;height:12px}

.sort-row{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.sort-row .result-count{font-size:var(--fs-sm);color:var(--text-muted)}
.sort-row .result-count b{color:var(--text)}
.sort-select{display:flex;align-items:center;gap:9px;font-size:var(--fs-sm);color:var(--text-subtle)}
.sort-select .select{width:auto;min-width:190px;padding-block:8px;font-size:var(--fs-sm)}

/* =========================================================================
   FEEDBACK — alerts / toast / modal / tooltip
   ========================================================================= */
.alert{
  display:flex;gap:12px;align-items:flex-start;
  padding:14px 16px;border:1px solid;border-radius:var(--r-md);
  font-size:var(--fs-sm);
}
.alert .icon{width:20px;height:20px;flex-shrink:0;margin-top:2px}
.alert b{display:block;font-size:var(--fs-sm);font-weight:800;margin-bottom:2px}
.alert p{color:var(--text-muted);line-height:1.85;font-size:var(--fs-sm)}
.alert .alert-close{
  margin-inline-start:auto;width:28px;height:28px;border-radius:var(--r-xs);
  display:flex;align-items:center;justify-content:center;
  color:var(--text-subtle);transition:background var(--t-fast),color var(--t-fast);flex-shrink:0}
.alert .alert-close:hover{background:rgba(27,30,35,.06);color:var(--text)}
.alert .alert-close .icon-sm{width:14px;height:14px}
.alert-success{background:var(--success-soft);border-color:#CBE4D6}
.alert-success .icon{color:var(--success)}
.alert-warning{background:var(--warning-soft);border-color:#EBDDB8}
.alert-warning .icon{color:var(--warning)}
.alert-danger{background:var(--danger-soft);border-color:#EFC9C4}
.alert-danger .icon{color:var(--danger)}
.alert-info{background:var(--info-soft);border-color:#C6DEE2}
.alert-info .icon{color:var(--info)}

/* toast */
.toast{
  position:fixed;bottom:24px;inset-inline-start:50%;transform:translate(50%,16px);
  background:var(--text);color:#fff;
  padding:11px 20px;border-radius:var(--r-full);
  font-size:var(--fs-sm);font-weight:600;
  display:flex;align-items:center;gap:9px;
  opacity:0;visibility:hidden;z-index:120;
  transition:opacity var(--t-med),transform var(--t-med),visibility 0s var(--t-med);
  box-shadow:var(--sh-lg);
}
.toast.show{opacity:1;visibility:visible;transform:translate(50%,0)}
.toast .icon-sm{color:#5FD3A5;width:16px;height:16px}

/* modal */
.modal-backdrop{
  position:fixed;inset:0;background:rgba(23,25,29,.5);z-index:110;
  display:flex;align-items:center;justify-content:center;padding:20px;
  opacity:0;visibility:hidden;
  transition:opacity var(--t-med),visibility 0s var(--t-med);
}
.modal-backdrop.open{opacity:1;visibility:visible;transition:opacity var(--t-med),visibility 0s}
.modal{
  width:min(460px,100%);background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--sh-lg);padding:26px;
  transform:translateY(12px) scale(.98);transition:transform var(--t-med);
}
.modal-backdrop.open .modal{transform:none}
.modal-icon{
  width:46px;height:46px;border-radius:var(--r-md);
  background:var(--danger-soft);color:var(--danger);
  display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.modal-title{font-size:var(--fs-lg);font-weight:800;margin-bottom:8px}
.modal-text{font-size:var(--fs-sm);color:var(--text-muted);line-height:2;margin-bottom:22px}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}

/* tooltip — CSS-only, hover/focus */
[data-tip]{position:relative}
[data-tip]::after{
  content:attr(data-tip);
  position:absolute;bottom:calc(100% + 8px);inset-inline-start:50%;
  transform:translateX(50%) translateY(3px);
  background:var(--text);color:#fff;
  font-size:11px;font-weight:600;padding:5px 10px;border-radius:var(--r-xs);
  white-space:nowrap;opacity:0;visibility:hidden;z-index:60;pointer-events:none;
  transition:opacity var(--t-fast),transform var(--t-fast);
}
[data-tip]:hover::after,[data-tip]:focus-visible::after{opacity:1;visibility:visible;transform:translateX(50%) translateY(0)}

/* =========================================================================
   STATES — skeleton / empty / error / loading
   ========================================================================= */
.spinner{
  width:18px;height:18px;border-radius:50%;display:inline-block;
  border:2px solid var(--primary-soft);border-top-color:var(--primary);
  animation:ds-spin .7s linear infinite}
.spinner-lg{width:30px;height:30px;border-width:3px}
.spinner-center{display:flex;align-items:center;justify-content:center;gap:10px;padding:32px;color:var(--text-subtle);font-size:var(--fs-sm);font-weight:600}

@keyframes ds-shimmer{to{transform:translateX(-100%)}}
.sk{position:relative;overflow:hidden;background:var(--surface-muted);border-radius:var(--r-xs)}
.sk::after{
  content:"";position:absolute;inset:0;transform:translateX(100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);
  animation:ds-shimmer 1.4s infinite}
.sk-img{aspect-ratio:16/9;border-radius:0}
.sk-line{height:11px;margin-top:10px}
.sk-line.w-40{width:40%}
.sk-line.w-60{width:60%}
.sk-line.w-80{width:80%}
.p-card.is-skeleton{pointer-events:none}
.p-card.is-skeleton .p-body{gap:0}

.state{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;
  padding:44px 24px;background:var(--surface);
  border:1.5px dashed var(--border-strong);border-radius:var(--r-lg);
}
.state .icon{width:34px;height:34px;color:var(--text-subtle);margin-bottom:6px}
.state b{font-size:var(--fs-md);font-weight:800}
.state p{font-size:var(--fs-sm);color:var(--text-muted);max-width:46ch;line-height:1.9}
.state .btn{margin-top:12px}
.state.is-danger .icon{color:var(--danger)}
.state.is-success .icon{color:var(--success)}

/* =========================================================================
   E-COMMERCE
   ========================================================================= */
/* mini cart */
.mini-cart{
  width:min(370px,100%);background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--sh-lg);overflow:hidden;
}
.mc-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;border-bottom:1px solid var(--border);
  font-weight:800;font-size:var(--fs-base)}
.mc-head .badge-neutral{font-size:10px}
.mc-item{display:flex;gap:12px;align-items:center;padding:14px 18px;border-bottom:1px solid var(--border)}
.mc-item:last-of-type{border-bottom:0}
.mc-item img{width:76px;height:48px;object-fit:cover;border-radius:var(--r-xs)}
.mc-item b{display:block;font-size:var(--fs-sm);font-weight:700;line-height:1.6}
.mc-item span{font-size:var(--fs-2xs);color:var(--text-subtle)}
.mc-item .price{margin-inline-start:auto;font-size:13px;white-space:nowrap}
.mc-remove{
  width:28px;height:28px;border-radius:var(--r-xs);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;color:var(--text-subtle);
  transition:background var(--t-fast),color var(--t-fast)}
.mc-remove:hover{background:var(--danger-soft);color:var(--danger)}
.mc-remove .icon-sm{width:14px;height:14px}
.mc-foot{
  padding:14px 18px;background:var(--surface-muted);
  border-top:1px solid var(--border);
  display:flex;flex-direction:column;gap:11px}
.mc-total{display:flex;align-items:center;justify-content:space-between;font-size:var(--fs-sm)}
.mc-total b{font-size:16px;font-weight:800;color:var(--secondary)}
.mc-actions{display:flex;gap:8px}
.mc-actions .btn{flex:1}

/* cart item (صفحه سبد) */
.cart-item{
  display:grid;grid-template-columns:128px 1fr auto;gap:16px;align-items:center;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:16px;
}
.cart-item img{width:128px;aspect-ratio:16/10;object-fit:cover;border-radius:var(--r-sm)}
.ci-title{font-size:var(--fs-base);font-weight:700;line-height:1.7;margin-bottom:5px}
.ci-meta{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:9px}
.ci-actions{display:flex;align-items:center;gap:10px;margin-top:9px}
.ci-remove{
  display:inline-flex;align-items:center;gap:5px;
  font-size:var(--fs-2xs);font-weight:700;color:var(--text-subtle);
  transition:color var(--t-fast)}
.ci-remove:hover{color:var(--danger)}
.ci-remove .icon-sm{width:13px;height:13px}
.ci-price{text-align:left;display:flex;flex-direction:column;gap:2px;align-items:flex-end}

/* coupon */
.coupon{display:flex;gap:8px}
.coupon .input{flex:1}
.coupon-applied{
  display:flex;align-items:center;gap:8px;
  background:var(--success-soft);border:1px dashed #BBDCC9;border-radius:var(--r-sm);
  padding:10px 14px;font-size:var(--fs-sm);font-weight:700;color:var(--success)}
.coupon-applied .icon-sm{width:15px;height:15px}
.coupon-applied button{margin-inline-start:auto;font-size:var(--fs-2xs);font-weight:700;color:var(--danger)}

/* order summary */
.order-summary{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:22px;
  display:flex;flex-direction:column;gap:12px;
}
.os-row{display:flex;align-items:center;justify-content:space-between;font-size:var(--fs-sm);color:var(--text-muted)}
.os-row b{color:var(--text);font-weight:700}
.os-row .minus{color:var(--success);font-weight:700}
.os-total{
  border-top:1px dashed var(--border);padding-top:13px;margin-top:2px;
  display:flex;align-items:center;justify-content:space-between;
  font-size:var(--fs-base);font-weight:800;color:var(--text)}
.os-total .amount{color:var(--secondary);font-size:19px}
.os-note{font-size:var(--fs-2xs);color:var(--text-subtle);display:flex;align-items:center;gap:6px}
.os-note .icon-sm{width:13px;height:13px;color:var(--success)}

/* payment methods — radio cards */
.pay-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.pay-method{cursor:pointer}
.pay-method input{position:absolute;opacity:0;pointer-events:none}
.pm-body{
  display:flex;flex-direction:column;align-items:flex-start;gap:8px;
  border:1.5px solid var(--border-strong);border-radius:var(--r-md);
  padding:14px;background:var(--surface);
  transition:border-color var(--t-fast),background var(--t-fast),box-shadow var(--t-fast);
  height:100%}
.pm-body .icon{width:22px;height:22px;color:var(--text-muted)}
.pm-body b{font-size:var(--fs-sm);font-weight:700}
.pm-body span{font-size:var(--fs-2xs);color:var(--text-subtle);line-height:1.7}
.pay-method input:checked + .pm-body{
  border-color:var(--primary);background:#FBFDFD;box-shadow:var(--focus-ring)}
.pay-method input:checked + .pm-body .icon{color:var(--primary-ink)}
.pay-method input:focus-visible + .pm-body{outline:2px solid var(--primary);outline-offset:2px}

/* download item — حساب کاربری */
.dl-item{
  display:flex;align-items:center;gap:14px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-md);padding:14px 16px;
}
.dl-icon{
  width:42px;height:42px;border-radius:var(--r-sm);flex-shrink:0;
  background:var(--primary-soft);color:var(--primary-ink);
  display:flex;align-items:center;justify-content:center}
.dl-item b{display:block;font-size:var(--fs-sm);font-weight:700;line-height:1.6}
.dl-item span{font-size:var(--fs-2xs);color:var(--text-subtle)}
.dl-item .btn{margin-inline-start:auto;flex-shrink:0}
.dl-expired{opacity:.65}

/* order status steps */
.steps{display:flex;align-items:flex-start}
.step{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;position:relative;text-align:center}
.step::before{
  content:"";position:absolute;top:14px;inset-inline-start:-50%;
  width:100%;height:2px;background:var(--border)}
.step:first-child::before{display:none}
.step.done::before,.step.current::before{background:var(--primary)}
.step-dot{
  width:28px;height:28px;border-radius:var(--r-full);z-index:1;
  background:var(--surface);border:2px solid var(--border-strong);
  display:flex;align-items:center;justify-content:center;
  color:var(--text-subtle)}
.step-dot .icon-sm{width:13px;height:13px}
.step.done .step-dot{background:var(--primary);border-color:var(--primary);color:#fff}
.step.current .step-dot{border-color:var(--primary);color:var(--primary-ink);box-shadow:var(--focus-ring)}
.step span{font-size:var(--fs-2xs);font-weight:700;color:var(--text-subtle);max-width:12ch;line-height:1.6}
.step.done span,.step.current span{color:var(--text)}

/* account menu */
.account-menu{
  width:240px;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-md);
  box-shadow:var(--sh-lg);padding:8px;
}
.account-menu a{
  display:flex;align-items:center;gap:10px;
  padding:9px 10px;border-radius:var(--r-xs);
  font-size:var(--fs-sm);font-weight:600;color:var(--text-muted);
  transition:background var(--t-fast),color var(--t-fast)}
.account-menu a:hover{background:var(--surface-muted);color:var(--text)}
.account-menu a .icon-sm{width:16px;height:16px}
.account-menu a .fcount{margin-inline-start:auto;font-size:var(--fs-2xs);color:var(--text-subtle);font-weight:700}
.account-menu hr{border:0;border-top:1px solid var(--border);margin:6px 4px}
.account-menu a.is-danger{color:var(--danger)}
.account-menu a.is-danger:hover{background:var(--danger-soft)}

/* account row (هدر منو) */
.account-row{display:flex;align-items:center;gap:12px;padding:12px 12px 8px}
.account-row .r-av{width:40px;height:40px;font-size:14px}
.account-row b{display:block;font-size:var(--fs-sm);font-weight:800}
.account-row span{font-size:var(--fs-2xs);color:var(--text-subtle)}

/* =========================================================================
   A11Y
   ========================================================================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* =========================================================================
   RESPONSIVE — رفتار موبایل صفحات محصول (هم‌راستا با صفحهٔ اصلی)
   ========================================================================= */
@media (max-width:1023px){
  .product-grid{grid-template-columns:repeat(2,1fr);gap:16px}
  .product-grid>*{min-width:0}
}
@media (max-width:639px){
  .product-grid{
    display:grid;grid-auto-flow:column;
    grid-auto-columns:min(76vw,300px);gap:13px;overflow-x:auto;
    scroll-snap-type:x mandatory;padding:4px 2px 12px;scrollbar-width:thin;
    scrollbar-color:var(--border-strong) transparent}
  .product-grid>*{scroll-snap-align:start}
}

/* =========================================================================
   DIGITAL TRUST LIST — shared port fix
   The source project defines .b-trust only inside product.css while the
   checkout design also uses it (unstyled there). Promoted to the canonical
   component layer; rule body copied verbatim from product.css.
   ========================================================================= */
.b-trust{border-top:1px solid var(--border);padding-top:13px;display:flex;flex-direction:column;gap:9px}
.b-trust li{display:flex;align-items:center;gap:9px;font-size:var(--fs-xs);font-weight:600;color:var(--text-muted)}
.b-trust .icon-sm{width:15px;height:15px;color:var(--primary);flex-shrink:0}

/* ========================================================================
   ADDITIVE — shared empty-state actions (page layers render .state too)
   ======================================================================== */
.state-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:12px}

/* ADDITIVE — cover placeholder when a product has no image: keeps the
   16:9 card geometry, mirrors the design's muted surface language. */
.p-cover .p-ph,.bf-cover .p-ph,.b-cover .p-ph{
  aspect-ratio:16/9;width:100%;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--surface-muted) 0%,var(--border) 100%);
  color:var(--text-subtle);
}
.p-cover .p-ph .icon,.bf-cover .p-ph .icon,.b-cover .p-ph .icon{width:34px;height:34px}

/* ADDITIVE — .g-main placeholder when a product has no gallery image */
.g-main .g-frame .p-ph{display:flex;width:100%;aspect-ratio:16/9}