/*
 * OCMS storefront base stylesheet.
 *
 * Structure only — every colour, size, radius, shadow and font comes from the active theme's
 * tokens (--f-<group>-<key>, emitted by themeCss()). A theme changes the look without touching
 * this file; a merchant changes a token in the admin and the whole site follows.
 *
 * RTL is handled with logical properties (inline-start/end), never with a second stylesheet.
 * No rule here depends on JavaScript: islands enhance, the page works without them.
 */

@font-face { font-family: "Vazirmatn"; src: url("fonts/vazirmatn-arabic-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-089F, U+08A0-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "Vazirmatn"; src: url("fonts/vazirmatn-arabic-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-089F, U+08A0-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "Vazirmatn"; src: url("fonts/vazirmatn-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }
@font-face { font-family: "Vazirmatn"; src: url("fonts/vazirmatn-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }

/* ---- aliases: one name per role, whatever the theme calls it ------------------------- */
:root {
  --o-bg: var(--f-color-bg, #fff);
  --o-surface: var(--f-color-surface, var(--o-bg));
  --o-surface-2: var(--f-color-surface-2, #f2f2f2);
  --o-ink: var(--f-color-ink, #111);
  --o-muted: var(--f-color-muted, #555);
  --o-rule: var(--f-color-rule, #ddd);
  --o-rule-strong: var(--f-color-rule-strong, var(--o-ink));
  --o-primary: var(--f-color-primary, var(--f-color-accent, var(--o-ink)));
  --o-primary-ink: var(--f-color-primary-ink, var(--f-color-accent-ink, var(--o-bg)));
  --o-accent: var(--f-color-accent, var(--o-primary));
  --o-link: var(--f-color-link, var(--o-ink));
  --o-sale: var(--f-color-sale, var(--f-color-deal, #a3261b));
  --o-price: var(--f-color-price, var(--o-ink));
  --o-focus: var(--f-color-focus, var(--o-ink));
  --o-success: var(--f-color-success, #1f6b43);
  --o-warning: var(--f-color-warning, #7a5300);
  --o-danger: var(--f-color-danger, #a3261b);
  --o-image-bg: var(--f-color-image-bg, var(--o-surface-2));
  --o-header-bg: var(--f-color-header-bg, var(--o-bg));
  --o-header-ink: var(--f-color-header-ink, var(--o-ink));

  --o-gutter: var(--f-space-gutter, clamp(16px, 4vw, 48px));
  --o-section: var(--f-space-section, clamp(48px, 8vw, 128px));
  --o-container: var(--f-layout-container, 1280px);
  --o-container-text: var(--f-layout-container-text, 68ch);
  --o-gap: var(--f-layout-column-gap, var(--f-space-5, 24px));
  --o-radius: var(--f-radius-md, 8px);
  --o-radius-media: var(--f-radius-media, var(--o-radius));
  --o-radius-pill: var(--f-radius-pill, 999px);
  --o-tap: var(--f-size-tap, 44px);
  --o-ease: var(--f-motion-ease, cubic-bezier(.2, 0, 0, 1));
  --o-fast: var(--f-motion-fast, 120ms);
  --o-base: var(--f-motion-base, 220ms);
}

/* ---- reset ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; color-scheme: light dark; }
body {
  margin: 0; min-height: 100dvh; display: flex; flex-direction: column;
  background: var(--o-bg); color: var(--o-ink);
  font-family: var(--f-font-body, system-ui, sans-serif);
  font-size: var(--f-size-body, 16px);
  font-weight: var(--f-font-weight-body, 400);
  line-height: var(--f-font-leading-body, 1.6);
  font-variant-numeric: var(--f-font-numeric, normal);
  overflow-wrap: anywhere;
}
main { flex: 1; }
img, video, svg { display: block; max-inline-size: 100%; block-size: auto; }
img { background: var(--o-image-bg); }
input, button, select, textarea { font: inherit; color: inherit; }
a { color: var(--o-link); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--o-focus); outline-offset: 2px; box-shadow: var(--f-shadow-focus, none); }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--f-font-display, inherit);
  font-weight: var(--f-font-weight-display, 700);
  line-height: var(--f-font-leading-display, 1.15);
  letter-spacing: var(--f-font-tracking-display, normal);
  margin-block: 0 .5em; text-wrap: balance;
}
h1 { font-size: var(--f-size-h1, clamp(2rem, 4vw, 3rem)); }
h2 { font-size: var(--f-size-h2, clamp(1.6rem, 3vw, 2.25rem)); }
h3 { font-size: var(--f-size-h3, 1.4rem); }
h4 { font-size: var(--f-size-h4, 1.15rem); }
p { margin-block: 0 1em; max-inline-size: var(--o-container-text); text-wrap: pretty; }
:lang(fa), :lang(ar) { line-height: calc(var(--f-font-leading-body, 1.6) + .15); }

.f-sr { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.f-skip { position: absolute; inset-inline-start: 8px; inset-block-start: -100px; z-index: 100; padding: 10px 14px; background: var(--o-ink); color: var(--o-bg); border-radius: var(--o-radius); }
.f-skip:focus { inset-block-start: 8px; }

/* ---- layout primitives (core blocks) ------------------------------------------------ */
.f-section { padding-block: calc(var(--o-section) / 2); padding-inline: var(--o-gutter); }
.f-section > * { margin-inline: auto; }
.f-w-content > * { max-inline-size: var(--o-container-text); }
.f-w-wide > * { max-inline-size: var(--o-container); }
.f-w-full { padding-inline: 0; }
.f-w-full > * { max-inline-size: none; }
/* a section used as a column cell is a group, not a band: no second gutter or section padding */
.f-columns > [data-n] > .f-section { padding: 0; }
.f-columns > [data-n] > .f-section > * { margin-inline: 0; }

.f-columns { display: grid; gap: var(--o-gap); grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr)); align-items: start; }
.f-cols-base-1 { --cols: 1 } .f-cols-base-2 { --cols: 2 } .f-cols-base-3 { --cols: 3 } .f-cols-base-4 { --cols: 4 } .f-cols-base-6 { --cols: 6 } .f-cols-base-12 { --cols: 12 }
@media (min-width: 640px) { .f-cols-sm-1 { --cols: 1 } .f-cols-sm-2 { --cols: 2 } .f-cols-sm-3 { --cols: 3 } .f-cols-sm-4 { --cols: 4 } .f-cols-sm-6 { --cols: 6 } }
@media (min-width: 768px) { .f-cols-md-1 { --cols: 1 } .f-cols-md-2 { --cols: 2 } .f-cols-md-3 { --cols: 3 } .f-cols-md-4 { --cols: 4 } .f-cols-md-6 { --cols: 6 } }
@media (min-width: 1024px) { .f-cols-lg-1 { --cols: 1 } .f-cols-lg-2 { --cols: 2 } .f-cols-lg-3 { --cols: 3 } .f-cols-lg-4 { --cols: 4 } .f-cols-lg-5 { --cols: 5 } .f-cols-lg-6 { --cols: 6 } }
@media (min-width: 1280px) { .f-cols-xl-2 { --cols: 2 } .f-cols-xl-3 { --cols: 3 } .f-cols-xl-4 { --cols: 4 } .f-cols-xl-5 { --cols: 5 } .f-cols-xl-6 { --cols: 6 } }

.f-spacer-xs { block-size: var(--f-space-2, 8px) } .f-spacer-sm { block-size: var(--f-space-4, 16px) } .f-spacer-md { block-size: var(--f-space-6, 32px) } .f-spacer-lg { block-size: var(--f-space-8, 64px) } .f-spacer-xl { block-size: var(--f-space-10, 128px) }

.f-ratio-1x1 { aspect-ratio: 1 / 1 } .f-ratio-4x5 { aspect-ratio: 4 / 5 } .f-ratio-3x4 { aspect-ratio: 3 / 4 } .f-ratio-16x9 { aspect-ratio: 16 / 9 } .f-ratio-21x9 { aspect-ratio: 21 / 9 }
[class*="f-ratio-"] { inline-size: 100%; object-fit: cover; border-radius: var(--o-radius-media); }

/* ---- buttons & fields ---------------------------------------------------------------- */
.f-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-block-size: var(--o-tap); padding-inline: 1.25em; border: 1.5px solid transparent;
  border-radius: var(--f-radius-pill, var(--o-radius)); cursor: pointer;
  font-weight: var(--f-font-weight-strong, 600); text-decoration: none; line-height: 1.2;
  transition: transform var(--o-fast) var(--o-ease), background-color var(--o-fast) var(--o-ease), box-shadow var(--o-fast) var(--o-ease);
}
.f-btn-primary { background: var(--o-primary); color: var(--o-primary-ink); box-shadow: var(--f-shadow-button, none); }
.f-btn-primary:hover { filter: brightness(1.08); }
.f-btn-primary:active { transform: translateY(1px); box-shadow: none; }
.f-btn-secondary { background: transparent; color: var(--o-ink); border-color: var(--o-rule-strong); }
.f-btn-link { background: none; padding-inline: 0; min-block-size: auto; text-decoration: underline; color: var(--o-link); }
.f-btn[disabled], .f-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; box-shadow: none; }
.f-btn.is-busy { cursor: progress; opacity: .7; }

.f-field { display: grid; gap: 4px; margin-block-end: var(--f-space-4, 16px); }
.f-field > span { font-size: var(--f-size-label, .875rem); color: var(--o-muted); }
input[type=text], input[type=email], input[type=tel], input[type=number], input[type=search], input[type=password], select, textarea {
  inline-size: 100%; min-block-size: var(--o-tap); padding: 8px 12px;
  background: var(--o-surface); border: 1.5px solid var(--o-rule); border-radius: var(--f-radius-sm, 6px);
}
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--o-focus); outline-offset: 0; }
input[aria-invalid="true"] { border-color: var(--o-danger); }
fieldset { border: 0; padding: 0; margin: 0 0 var(--f-space-6, 32px); min-inline-size: 0; }
legend { font-family: var(--f-font-display, inherit); font-weight: var(--f-font-weight-strong, 700); font-size: var(--f-size-h4, 1.15rem); margin-block-end: var(--f-space-3, 12px); padding: 0; }
.f-radio { display: flex; align-items: center; gap: 10px; min-block-size: var(--o-tap); padding-inline: 12px; border: 1.5px solid var(--o-rule); border-radius: var(--f-radius-sm, 6px); margin-block-end: 8px; cursor: pointer; }
.f-radio:has(input:checked) { border-color: var(--o-rule-strong); background: var(--o-surface-2); }
.f-warn { color: var(--o-warning); }
.f-empty { color: var(--o-muted); padding-block: var(--f-space-7, 48px); text-align: center; max-inline-size: none; }
output:empty { display: none; }
output.is-ok { color: var(--o-success); } output.is-error { color: var(--o-danger); }

/* ---- site chrome: header / footer ---------------------------------------------------- */
.f-chrome-header { position: sticky; inset-block-start: 0; z-index: 20; background: var(--o-header-bg); color: var(--o-header-ink); border-block-end: 1px solid var(--o-rule); }
.f-chrome-header .f-section { padding-block: 0; }
.f-bar { display: flex; align-items: center; gap: var(--f-space-4, 16px); min-block-size: var(--f-layout-header-height-base, 60px); margin-inline: auto; max-inline-size: var(--o-container); }
@media (min-width: 768px) { .f-bar { min-block-size: var(--f-layout-header-height, 72px); } }
.f-bar > :first-child { margin-inline-end: auto; }
.f-site-title { font-family: var(--f-font-display, inherit); font-weight: var(--f-font-weight-display, 700); font-size: 1.25rem; letter-spacing: var(--f-font-tracking-display, normal); text-decoration: none; color: inherit; }
.f-nav { display: flex; gap: var(--f-space-4, 16px); list-style: none; margin: 0; padding: 0; }
.f-nav a { color: inherit; text-decoration: none; }
.f-cart-link { display: inline-flex; align-items: center; gap: 6px; min-block-size: var(--o-tap); padding-inline: 10px; color: inherit; text-decoration: none; font-weight: var(--f-font-weight-strong, 600); }
.f-cart-count { display: inline-grid; place-items: center; min-inline-size: 1.5em; block-size: 1.5em; padding-inline: .35em; border-radius: var(--o-radius-pill); background: var(--o-primary); color: var(--o-primary-ink); font-size: .8rem; }
.f-cart-count:empty { display: none; }
.f-locales { position: relative; }
.f-locales > summary { list-style: none; cursor: pointer; min-block-size: var(--o-tap); display: inline-flex; align-items: center; gap: 4px; padding-inline: 8px; }
.f-locales > summary::-webkit-details-marker { display: none; }
.f-locales ul { position: absolute; inset-inline-end: 0; inset-block-start: 100%; z-index: 30; min-inline-size: 12rem; max-block-size: 70dvh; overflow: auto; list-style: none; margin: 4px 0 0; padding: 6px; background: var(--o-surface); color: var(--o-ink); border: 1px solid var(--o-rule); border-radius: var(--o-radius); box-shadow: var(--f-shadow-menu, var(--f-shadow-lift, 0 8px 24px rgb(0 0 0 / .12))); }
.f-locales a { display: block; padding: 8px 10px; border-radius: var(--f-radius-sm, 6px); text-decoration: none; color: inherit; }
.f-locales a:hover, .f-locales a[aria-current] { background: var(--o-surface-2); }
.f-theme-toggle { background: none; border: 0; cursor: pointer; min-inline-size: var(--o-tap); min-block-size: var(--o-tap); color: inherit; }
.f-chrome-footer { margin-block-start: var(--o-section); border-block-start: 1px solid var(--o-rule); color: var(--o-muted); font-size: var(--f-size-small, .875rem); }
.f-chrome-footer .f-bar { flex-wrap: wrap; }
.f-powered a { color: inherit; }

/* ---- catalog ------------------------------------------------------------------------- */
.f-grid { display: grid; gap: var(--o-gap); grid-template-columns: repeat(var(--f-layout-grid-plp-base, 2), minmax(0, 1fr)); list-style: none; padding: 0; margin: 0; }
@media (min-width: 768px) { .f-grid { grid-template-columns: repeat(var(--f-layout-grid-plp-md, 3), minmax(0, 1fr)); } }
@media (min-width: 1024px) { .f-grid { grid-template-columns: repeat(var(--f-layout-grid-plp-lg, 4), minmax(0, 1fr)); } }
@media (min-width: 1440px) { .f-grid { grid-template-columns: repeat(var(--f-layout-grid-plp-xl, var(--f-layout-grid-plp-lg, 4)), minmax(0, 1fr)); } }
.f-grid-title, .f-category-title { margin-block-end: var(--f-space-5, 24px); }
.f-card { position: relative; display: flex; flex-direction: column; gap: 6px; }
.f-card img, .f-card-noimg { aspect-ratio: var(--f-layout-card-ratio, 4 / 5); inline-size: 100%; object-fit: cover; border-radius: var(--o-radius-media); transition: transform var(--o-base) var(--o-ease); }
.f-card-noimg { background: var(--o-image-bg); }
.f-card:hover img { transform: scale(var(--f-motion-image-zoom, 1.02)); }
.f-card-link { text-decoration: none; color: inherit; }
.f-card-link::after { content: ""; position: absolute; inset: 0; } /* whole card is the target */
.f-card-title { font-size: var(--f-size-body, 1rem); font-weight: var(--f-font-weight-strong, 600); margin: 0; }
.f-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5em; margin: 0; font-size: var(--f-size-price, 1rem); color: var(--o-price); font-variant-numeric: tabular-nums; }
.f-price-now { font-weight: var(--f-font-weight-strong, 700); }
.f-price-was { color: var(--f-color-price-old, var(--o-muted)); text-decoration: line-through; font-size: .9em; }
.f-price:has(.f-price-was) .f-price-now { color: var(--o-sale); }
.f-badge { display: inline-block; padding: 2px 8px; border-radius: var(--o-radius-pill); font-size: var(--f-size-caption, .75rem); font-weight: 600; background: var(--o-surface-2); }
.f-badge-out { background: var(--o-ink); color: var(--o-bg); }
.f-card .f-badge { position: absolute; inset-block-start: 10px; inset-inline-start: 10px; }
.f-product-title { font-size: var(--f-size-h1, 2.25rem); }
.f-stock.in { color: var(--o-success); } .f-stock.out { color: var(--o-danger); }
.f-prose { max-inline-size: var(--o-container-text); }
.f-prose img { border-radius: var(--o-radius-media); }

.f-gallery { display: grid; gap: 8px; }
.f-gallery img { inline-size: 100%; aspect-ratio: var(--f-layout-card-ratio, 4 / 5); object-fit: cover; border-radius: var(--o-radius-media); }
@media (max-width: 767px) {
  /* swipe gallery on phones: native scroll-snap, no library */
  .f-gallery { grid-auto-flow: column; grid-auto-columns: 88%; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
  .f-gallery img { scroll-snap-align: center; }
}

/* ---- cart ------------------------------------------------------------------------------ */
.f-add { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-block: var(--f-space-5, 24px); }
.f-add .f-btn { flex: 1 1 12rem; }
.f-qty input { inline-size: 5.5rem; text-align: center; }
.f-add-status { flex-basis: 100%; }
.f-cart-lines { list-style: none; margin: 0 0 var(--f-space-5, 24px); padding: 0; }
.f-cart-line { display: grid; grid-template-columns: 72px 1fr auto; grid-template-areas: "img title total" "img qty total"; gap: 6px 14px; align-items: center; padding-block: 14px; border-block-end: 1px solid var(--o-rule); }
.f-cart-line img { grid-area: img; inline-size: 72px; aspect-ratio: 1; object-fit: cover; border-radius: var(--f-radius-sm, 6px); }
.f-cart-line a { grid-area: title; color: inherit; font-weight: 600; text-decoration: none; }
.f-cart-line input { grid-area: qty; inline-size: 5rem; min-block-size: 36px; }
.f-line-total { grid-area: total; font-variant-numeric: tabular-nums; font-weight: 600; }
.f-cart-line.is-unavailable { opacity: .55; }
.f-cart-line.is-removing { opacity: .3; transition: opacity var(--o-base) var(--o-ease); }
.f-cart-subtotal, .f-total { display: flex; justify-content: space-between; gap: 1em; font-size: var(--f-size-lead, 1.15rem); max-inline-size: none; padding-block: 12px; border-block-start: 2px solid var(--o-rule-strong); }
.f-cart > .f-btn, .f-checkout > .f-btn { inline-size: 100%; min-block-size: calc(var(--o-tap) + 8px); }

/* ---- checkout ------------------------------------------------------------------------- */
.f-checkout { max-inline-size: 40rem; }
@media (min-width: 640px) {
  .f-checkout fieldset:nth-of-type(2) { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
  .f-checkout fieldset:nth-of-type(2) legend, .f-checkout fieldset:nth-of-type(2) .f-field:has([name=name]),
  .f-checkout fieldset:nth-of-type(2) .f-field:has([name=line1]), .f-checkout fieldset:nth-of-type(2) .f-field:has([name=line2]) { grid-column: 1 / -1; }
}
.f-order { max-inline-size: 40rem; }
.f-order ul { padding-inline-start: 1.2em; }
.f-order-status { display: inline-block; padding: 4px 12px; border-radius: var(--o-radius-pill); background: var(--o-surface-2); font-weight: 600; }
.f-order-status[data-status=paid], .f-order-status[data-status=delivered], .f-order-status[data-status=shipped] { background: color-mix(in srgb, var(--o-success) 15%, transparent); color: var(--o-success); }
.f-order-status[data-status=payment_failed], .f-order-status[data-status=cancelled] { background: color-mix(in srgb, var(--o-danger) 12%, transparent); color: var(--o-danger); }

/* ---- toast (cart feedback) -------------------------------------------------------------- */
.f-toast { position: fixed; inset-inline: 16px; inset-block-end: max(16px, env(safe-area-inset-bottom)); z-index: 50; margin-inline: auto; max-inline-size: 26rem; padding: 12px 16px; border-radius: var(--o-radius); background: var(--o-ink); color: var(--o-bg); box-shadow: 0 8px 24px rgb(0 0 0 / .2); translate: 0 calc(100% + 24px); transition: translate var(--o-base) var(--o-ease); }
.f-toast.is-on { translate: 0 0; }
.f-toast a { color: inherit; font-weight: 700; }

/* ---- editor-only markers ---------------------------------------------------------------- */
.f-missing { padding: 12px; border: 1.5px dashed var(--o-rule-strong); color: var(--o-muted); border-radius: var(--o-radius); }

/* ---- motion & print ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; scroll-behavior: auto !important; } }
@media print { .f-chrome-header, .f-chrome-footer, .f-add, .f-toast, .f-skip { display: none !important; } body { background: #fff; color: #000; } }

/* header controls never break mid-word on a phone; the store name gives way first */
.f-cart-link, .f-locales > summary, .f-theme-toggle { white-space: nowrap; flex: none; }
.f-site-title { min-inline-size: 0; overflow-wrap: anywhere; }
@media (max-width: 480px) { .f-bar { gap: 6px; } .f-site-title { font-size: 1.05rem !important; } }