/* ============================================================
   MANAII — BASE / PRIMITIVES
   Reset, type scale, buttons, forms, pills, waves, diamond, focus.
   All values reference tokens.css. RTL is the document default.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-prose);
  color: var(--color-ink);
  background: var(--color-cream);
  direction: rtl;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Latin runs (emails, order numbers, copyright) opt into LTR locally. */
.ltr, [dir="ltr"] { direction: ltr; unicode-bidi: isolate; }

img, svg, video { max-width: 100%; }
img { height: auto; }

a { color: var(--color-teal-deep); text-decoration: none; transition: color var(--dur-color) var(--ease); }
a:hover { color: var(--color-ink); }

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 800; line-height: var(--lh-heading); }
p { margin: 0; }
ul, ol { margin: 0; }

/* ---- Type scale utilities (mirror the prototype's data-m type hooks) ---- */
.t-display-xl { font-size: var(--fs-display-xl); font-weight: 900; line-height: 1.22; letter-spacing: -.01em; }
.t-display    { font-size: var(--fs-display); font-weight: 900; line-height: 1.35; }
.t-h1 { font-size: var(--fs-h1); font-weight: 900; }
.t-h2 { font-size: var(--fs-h2); font-weight: 800; line-height: 1.4; }
.t-h3 { font-size: var(--fs-h3); font-weight: 700; }
.t-h4 { font-size: var(--fs-h4); font-weight: 700; }
.t-lead    { font-size: var(--fs-lead); line-height: 2; color: var(--color-ink-soft); }
.t-body    { font-size: var(--fs-body); line-height: var(--lh-prose); }
.t-small   { font-size: var(--fs-small); line-height: 1.8; }
.t-caption { font-size: var(--fs-caption); line-height: 1.8; color: var(--color-muted); }
.t-muted   { color: var(--color-muted); }
.hero-accent { color: var(--color-teal-deep); }

/* Elementor's per-widget "CSS Classes" control lands the class on the WIDGET
   WRAPPER, not on the heading tag it renders inside (`.elementor-heading-title`
   is always a plain h1–h6 with no size of its own). A type-scale class like
   `.t-display-xl` above therefore only reaches the tag via inheritance — which
   the browser's UA default `h1{font-size:2em}` (etc.) always beats, since an
   inherited value has no specificity of its own. Force the actual title back
   to inheriting its wrapper's size/weight/leading explicitly so it wins. */
.elementor-widget-heading .elementor-heading-title {
  /* !important: Elementor's own per-post kit CSS (post-{id}.css) targets this
     exact selector with the SAME specificity for font-weight (the kit's global
     heading default), and loads after this stylesheet — so a plain `inherit`
     wins on font-size (Elementor sets none there) but loses the tie on
     font-weight/family/color. !important reasserts the type-scale class's
     authority regardless of Elementor's own load order. */
  font-size: inherit !important; font-weight: inherit !important; line-height: inherit !important; letter-spacing: inherit !important;
}

/* Persian prose leading is protected — never below 1.9. */
.prose p, .prose li { line-height: var(--lh-prose); }
.prose p + p { margin-top: 1em; }

/* ============================================================
   Kicker + Chapter kicker + Diamond marker
   ============================================================ */
.kicker {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: var(--fs-kicker); font-weight: 700; letter-spacing: .08em;
  line-height: 1; color: var(--color-teal-deep);
}
.kicker--on-dark { color: var(--color-gold); }

.diamond {
  width: 13px; height: 13px; flex: none; display: block;
  border-radius: 2px; transform: rotate(45deg);
  background: var(--color-gold);
}
.diamond--nowruz   { background: var(--diamond-nowruz); }
.diamond--yalda    { background: var(--diamond-yalda); }
.diamond--magazine { background: var(--diamond-magazine); }
.diamond--sm { width: 11px; height: 11px; }
.diamond--lg { width: 18px; height: 18px; }

/* ============================================================
   Buttons — DESIGN-TOKENS §8
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: inherit; font-size: 17px; font-weight: 700; line-height: 1;
  padding: 17px 36px; border-radius: var(--radius-pill);
  border: 1.5px solid transparent; cursor: pointer;
  transition: background-color var(--dur-color) var(--ease), color var(--dur-color) var(--ease), box-shadow var(--dur-color) var(--ease), transform var(--dur-color) var(--ease);
  text-align: center;
}
.btn--primary        { background: var(--color-teal-deep); color: var(--color-cream); }
.btn--primary:hover  { color: var(--color-cream); background: #0c8a78; }
.btn--primary-on-dark{ background: var(--color-gold); color: var(--color-ink); }
.btn--secondary      { background: transparent; color: var(--color-ink); border-color: var(--color-ink); }
.btn--on-dark        { background: transparent; color: var(--color-cream); border-color: var(--color-cream); }
.btn--on-dark-green  { background: transparent; color: var(--color-green-dark); border-color: var(--color-green-dark); }
.btn--ghost-cream    { background: var(--color-cream); color: var(--color-ink); }
.btn--dark           { background: var(--color-ink); color: var(--color-cream); }
.btn--disabled, .btn[disabled], .btn[aria-disabled="true"] {
  background: #F0EAD6; color: var(--color-muted-faint); cursor: not-allowed; border-color: transparent;
}
.btn--full { width: 100%; height: 56px; padding-block: 0; }
.btn--sq   { border-radius: var(--radius-input-sq); }

/* Chevron nudge toward the start edge (RTL: to the right) — desktop hover only. */
.btn .chev { transition: transform var(--dur-color) var(--ease); }
@media (hover: hover) and (min-width: 901px) {
  .btn:hover .chev { transform: translateX(3px); }
}

/* ============================================================
   Form controls — DESIGN-TOKENS §9
   ============================================================ */
.field { display: block; margin-bottom: 18px; }
.field__label { display: block; font-size: var(--fs-small); font-weight: 600; margin-bottom: 10px; }
.field__label .req { color: var(--color-danger); margin-inline-start: 4px; }
.input, .select, .textarea {
  width: 100%; height: 50px; padding: 0 20px;
  font-family: inherit; font-size: var(--fs-body); color: var(--color-ink);
  background: var(--color-white);
  border: 1px solid var(--border-input); border-radius: var(--radius-input);
  transition: border-color var(--dur-color) var(--ease);
}
.textarea { height: auto; min-height: 140px; padding: 16px 20px; border-radius: 20px; resize: none; line-height: var(--lh-prose); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--color-teal-deep); }
.input[aria-invalid="true"], .textarea[aria-invalid="true"], .select[aria-invalid="true"] { border-color: var(--color-danger); }
.field__error { display: block; margin-top: 8px; font-size: var(--fs-caption); color: var(--color-danger); }
.input::placeholder, .textarea::placeholder { color: var(--color-muted-light); }

/* Checkbox: 20px box; the LABEL is the 44px hit area (handled in responsive.css). */
.check { width: 20px; height: 20px; flex: none; accent-color: var(--color-teal-deep); }
.check-label { display: inline-flex; align-items: flex-start; gap: 10px; cursor: pointer; }

/* Error summary panel — focusable. */
.error-summary {
  background: var(--pill-unavail-bg); border: 1px solid #F0C9C9; border-radius: 16px;
  padding: 18px 20px; margin-bottom: 24px; color: var(--color-danger);
}
.error-summary:focus { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.error-summary ul { margin: 8px 0 0; padding-inline-start: 18px; }

/* ============================================================
   State pills — the complete vocabulary. Never invent a colour.
   State is never conveyed by colour alone — the text carries it.
   ============================================================ */
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-caption); font-weight: 700; line-height: 1;
  padding: 7px 14px; border-radius: var(--radius-pill);
  white-space: nowrap; flex: none;
}
.pill--available   { background: var(--pill-avail-bg);   color: var(--pill-avail-fg); }
.pill--unavailable { background: var(--pill-unavail-bg); color: var(--pill-unavail-fg); }
.pill--pending     { background: var(--pill-pending-bg); color: var(--pill-pending-fg); }
.pill--audience    { background: var(--pill-audience-bg);color: var(--pill-audience-fg); }
.pill--order-done  { background: var(--pill-order-done-bg); color: var(--pill-order-done-fg); }

/* ============================================================
   Wave divider — DESIGN-TOKENS §6. Signature motif.
   Always the LAST child of its section; the section has no bottom padding.
   ============================================================ */
.wave {
  display: block; width: 100%; height: 90px;
  background-repeat: no-repeat; background-position: bottom; background-size: 100% 100%;
}
.wave--cap { background-position: top; }
section:has(> .wave:last-child) { padding-bottom: 0; }

/* ============================================================
   Ornament band — product + event detail only
   ============================================================ */
.ornament-band {
  height: 72px; width: 100%;
  background: var(--color-gold) url(../images/band-strip.png) repeat-x center / auto 100%;
}

/* ============================================================
   Breadcrumb
   ============================================================ */
.breadcrumb { font-size: var(--fs-caption); color: var(--color-muted); }
/* .breadcrumb.breadcrumb (class repeated) bumps specificity past Elementor's sitewide
   `.elementor-kit-11 a` global-color rule, which otherwise ties and wins by load order. */
.breadcrumb.breadcrumb a { color: var(--color-muted); }
.breadcrumb.breadcrumb a:hover { color: var(--color-ink); }

/* ============================================================
   Skip link + focus (RELEASE BLOCKER: visible focus everywhere)
   ============================================================ */
.skip-link {
  position: absolute; inset-inline-start: 16px; top: -60px;
  background: var(--color-green-dark); color: var(--color-cream);
  padding: 12px 20px; border-radius: 0 0 12px 12px; z-index: 200;
  transition: top 160ms var(--ease);
}
.skip-link:focus { top: 0; color: var(--color-cream); }

:where(a, button, input, select, textarea, summary, [tabindex], [role="slider"], [role="button"]):focus-visible {
  outline: var(--focus-ring); outline-offset: var(--focus-offset); border-radius: 4px;
}

/* ============================================================
   Reduced motion — drop transform transitions, keep opacity 120ms
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-property: opacity, background-color, color, border-color !important;
    transition-duration: 120ms !important;
  }
}

/* ---- helpers ---- */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* WordPress/WooCommerce screen-reader text (required by core + WC + wp.a11y
   live regions). Without it these elements render in-flow and can cause overflow. */
.screen-reader-text, .a11y-speak-region, .wc-block-components-notice-banner__screen-reader-text {
  border: 0 !important; clip: rect(1px, 1px, 1px, 1px) !important; clip-path: inset(50%) !important;
  height: 1px !important; width: 1px !important; margin: -1px !important; padding: 0 !important;
  overflow: hidden !important; position: absolute !important; white-space: nowrap !important; word-wrap: normal !important;
}
.screen-reader-text:focus {
  background: var(--color-green-dark); color: var(--color-cream); clip: auto !important; clip-path: none !important;
  height: auto !important; width: auto !important; margin: 0 !important; padding: 12px 20px !important;
  position: fixed !important; top: 8px; inset-inline-start: 8px; z-index: 200; border-radius: 12px;
}
.is-hidden { display: none !important; }

/* Two fields side by side inside a form (no extra card around them). */
.field-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .field-row-2 { grid-template-columns: 1fr; } }
/* Browser autofill keeps the site's input colours (not light blue). */
.input:-webkit-autofill, .input:-webkit-autofill:hover, .input:-webkit-autofill:focus,
.checkout .input-text:-webkit-autofill, #review_form input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--color-white) inset; box-shadow: 0 0 0 1000px var(--color-white) inset;
  -webkit-text-fill-color: var(--color-ink); caret-color: var(--color-ink); transition: background-color 9999s ease-out 0s;
}