/* =============================================================================
   Base — design tokens, reset, typography, buttons, forms, utilities.
   Everything else in the theme builds on this file.
   ========================================================================== */

:root {
  /* Brand — amber honey */
  --ho-amber-50:  #fef7ec;
  --ho-amber-100: #fdecd2;
  --ho-amber-200: #fbd79f;
  --ho-amber-300: #f8bd63;
  --ho-amber-400: #f2a032;
  --ho-amber-500: #e9860f;   /* primary */
  --ho-amber-600: #c96c07;   /* hover, text on light */
  --ho-amber-700: #a2550a;

  /* Accent — comb gold & nature green */
  --ho-gold:      #f5c242;
  --ho-gold-soft: #fdf3d6;
  --ho-green-500: #5fa524;
  --ho-green-600: #4a8419;
  --ho-green-50:  #f0f8e6;

  /* Feedback */
  --ho-danger:    #d64545;
  --ho-danger-50: #fdeeee;
  --ho-info:      #2f7dbd;
  --ho-info-50:   #eaf4fc;

  /* Warm neutrals */
  --ho-ink-900: #1f1b16;
  --ho-ink-800: #2e2820;
  --ho-ink-700: #3d362e;
  --ho-ink-600: #574f45;
  --ho-ink-500: #6f6559;
  --ho-ink-400: #8d8376;
  --ho-ink-300: #a79e92;
  --ho-ink-200: #cdc5b8;

  --ho-cream-50:  #fdfbf7;
  --ho-cream-100: #f8f3ea;
  --ho-cream-200: #f2ebdd;
  --ho-surface:   #ffffff;
  --ho-line:      #ece4d6;
  --ho-line-soft: #f4eee4;

  /* Semantic aliases */
  --ho-primary:      var(--ho-amber-500);
  --ho-primary-dark: var(--ho-amber-600);
  --ho-bg:           var(--ho-cream-50);
  --ho-text:         var(--ho-ink-700);
  --ho-text-strong:  var(--ho-ink-900);
  --ho-text-muted:   var(--ho-ink-500);

  /* Spacing — 4px base */
  --ho-1: 4px;
  --ho-2: 8px;
  --ho-3: 12px;
  --ho-4: 16px;
  --ho-5: 20px;
  --ho-6: 24px;
  --ho-8: 32px;
  --ho-10: 40px;
  --ho-12: 48px;
  --ho-16: 64px;
  --ho-20: 80px;

  /* Radii */
  --ho-r-xs: 6px;
  --ho-r-sm: 10px;
  --ho-r-md: 14px;
  --ho-r-lg: 20px;
  --ho-r-xl: 28px;
  --ho-r-pill: 999px;
  /* The header's own bottom corners; its last child reuses it. */
  --ho-header-r: 15px;

  /* Warm-tinted shadows */
  --ho-shadow-xs: 0 1px 2px rgba(63, 48, 24, .05);
  --ho-shadow-sm: 0 2px 8px rgba(63, 48, 24, .06);
  --ho-shadow-md: 0 8px 24px rgba(63, 48, 24, .08);
  --ho-shadow-lg: 0 18px 44px rgba(63, 48, 24, .12);
  --ho-shadow-amber: 0 8px 22px rgba(233, 134, 15, .26);

  /* Type */
  --ho-font: 'Pinar', 'Vazirmatn', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --ho-fs-xs: 11px;
  --ho-fs-sm: 12.5px;
  --ho-fs-base: 14px;
  --ho-fs-md: 15px;
  --ho-fs-lg: 17px;
  --ho-fs-xl: 20px;
  --ho-fs-2xl: 24px;
  --ho-fs-3xl: 30px;
  --ho-fs-4xl: 38px;

  /* Layout */
  --ho-container: 1280px;
  --ho-gutter: 16px;
  /* Replaced at runtime with the header's measured height (see core.js); this
     value is only the pre-JS fallback, so anything sticky clears the header
     even before the script runs. */
  --ho-header-h: 128px;

  /* Motion */
  --ho-ease: cubic-bezier(.22, .61, .36, 1);
  --ho-fast: .16s var(--ho-ease);
  --ho-base-t: .26s var(--ho-ease);

  --ho-z-header: 100;
  --ho-z-sheet: 900;
  --ho-z-modal: 1000;
  --ho-z-toast: 1100;
}

@media (min-width: 768px) {
  :root {
    --ho-gutter: 24px;
    --ho-fs-base: 14.5px;
    --ho-fs-4xl: 44px;
  }
}

/* ---------------------------------------------------------------- reset -- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  font-family: var(--ho-font);
  font-size: var(--ho-fs-base);
  line-height: 1.75;
  color: var(--ho-text);
  background: var(--ho-bg);
  direction: rtl;
  text-align: right;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.ho-no-scroll { overflow: hidden; }

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--ho-3);
  color: var(--ho-text-strong);
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: -.01em;
}

h1 { font-size: var(--ho-fs-3xl); }
h2 { font-size: var(--ho-fs-2xl); }
h3 { font-size: var(--ho-fs-xl); }
h4 { font-size: var(--ho-fs-lg); }

p { margin: 0 0 var(--ho-4); }
p:last-child { margin-bottom: 0; }

a {
  color: var(--ho-primary-dark);
  text-decoration: none;
  transition: color var(--ho-fast);
}
a:hover { color: var(--ho-amber-700); }

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

ul, ol { margin: 0 0 var(--ho-4); padding-inline-start: 1.4em; }
ul.ho-plain, ol.ho-plain { list-style: none; margin: 0; padding: 0; }

hr {
  border: 0;
  border-top: 1px solid var(--ho-line);
  margin: var(--ho-8) 0;
}

table { border-collapse: collapse; width: 100%; }

button { font-family: inherit; }

:focus-visible {
  outline: 3px solid var(--ho-amber-300);
  outline-offset: 2px;
  border-radius: var(--ho-r-xs);
}

::selection {
  background: var(--ho-amber-200);
  color: var(--ho-ink-900);
}

/* Icons come from the sprite printed after <body>, so the stroke styling that
   used to sit on each <svg> lives here instead. */
.ho-icon {
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}

.ho-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Numerals inside Latin-only contexts stay readable in RTL. */
.ho-ltr, .ho-field--ltr input {
  direction: ltr;
  text-align: right;
}

/* -------------------------------------------------------------- layout --- */

.container {
  width: 100%;
  max-width: var(--ho-container);
  margin-inline: auto;
  padding-inline: var(--ho-gutter);
}

.container--narrow { max-width: 760px; }
.container--wide { max-width: 1440px; }

/* An article plus its table of contents: ~220px of sidebar and a measure of
   roughly 70 characters beside it. */
.container--article { max-width: 1180px; }

.ho-section { padding-block: var(--ho-10); }
.ho-section--tight { padding-block: var(--ho-6); }
.ho-section--flush { padding-block: 0 var(--ho-10); }
.ho-section--cream { background: var(--ho-cream-100); }

@media (min-width: 768px) {
  .ho-section { padding-block: var(--ho-16); }
  .ho-section--tight { padding-block: var(--ho-8); }
}

.ho-stack > * + * { margin-top: var(--ho-4); }

/* ------------------------------------------------------------- buttons --- */

.ho-btn {
  --btn-bg: var(--ho-cream-100);
  --btn-fg: var(--ho-ink-800);
  --btn-bd: transparent;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ho-2);
  min-height: 44px;
  padding: 0 var(--ho-5);
  border: 1.5px solid var(--btn-bd);
  border-radius: var(--ho-r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: inherit;
  font-size: var(--ho-fs-md);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  text-align: center;
  transition: transform var(--ho-fast), box-shadow var(--ho-fast), background var(--ho-fast), color var(--ho-fast);
  -webkit-tap-highlight-color: transparent;
}

.ho-btn:hover { color: var(--btn-fg); }
.ho-btn:active { transform: translateY(1px); }

.ho-btn[disabled],
.ho-btn.is-loading {
  opacity: .62;
  pointer-events: none;
}

.ho-btn--primary {
  --btn-bg: linear-gradient(135deg, var(--ho-amber-400), var(--ho-amber-500));
  --btn-fg: #fff;
  box-shadow: var(--ho-shadow-amber);
}
.ho-btn--primary:hover {
  --btn-bg: linear-gradient(135deg, var(--ho-amber-500), var(--ho-amber-600));
  box-shadow: 0 10px 26px rgba(233, 134, 15, .34);
}

.ho-btn--dark { --btn-bg: var(--ho-ink-900); --btn-fg: #fff; }
.ho-btn--dark:hover { --btn-bg: var(--ho-ink-700); }

.ho-btn--green { --btn-bg: var(--ho-green-500); --btn-fg: #fff; }
.ho-btn--green:hover { --btn-bg: var(--ho-green-600); }

.ho-btn--outline {
  --btn-bg: transparent;
  --btn-fg: var(--ho-amber-600);
  --btn-bd: var(--ho-amber-300);
}
.ho-btn--outline:hover { --btn-bg: var(--ho-amber-50); }

.ho-btn--ghost {
  --btn-bg: var(--ho-cream-100);
  --btn-fg: var(--ho-ink-700);
}
.ho-btn--ghost:hover { --btn-bg: var(--ho-cream-200); }

.ho-btn--sm { min-height: 34px; padding: 0 var(--ho-3); font-size: var(--ho-fs-sm); }
.ho-btn--lg { min-height: 54px; padding: 0 var(--ho-8); font-size: var(--ho-fs-lg); }
/* 54px and a 19px label are a desktop hero's proportions; on a phone they eat
   the fold and wrap the label. */
@media (max-width: 560px) {
  .ho-btn--lg { min-height: 48px; padding: 0 var(--ho-5); font-size: var(--ho-fs-md); }
}
.ho-btn--block { width: 100%; }

.ho-btn .ho-icon { flex: none; }

/* Icon-only action button */
.ho-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: var(--ho-r-sm);
  background: var(--ho-cream-100);
  color: var(--ho-ink-600);
  cursor: pointer;
  transition: background var(--ho-fast), color var(--ho-fast);
}
.ho-icon-btn:hover { background: var(--ho-cream-200); color: var(--ho-ink-900); }

/* --------------------------------------------------------------- forms --- */

input[type="text"],
input[type="search"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="password"],
input[type="date"],
select,
textarea {
  width: 100%;
  min-height: 46px;
  padding: 10px var(--ho-4);
  border: 1.5px solid var(--ho-line);
  border-radius: var(--ho-r-sm);
  background: var(--ho-surface);
  color: var(--ho-ink-800);
  font-family: inherit;
  font-size: var(--ho-fs-md);
  line-height: 1.6;
  transition: border-color var(--ho-fast), box-shadow var(--ho-fast);
  appearance: none;
}

textarea { min-height: 104px; resize: vertical; }

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--ho-amber-400);
  box-shadow: 0 0 0 4px var(--ho-amber-50);
}

input::placeholder,
textarea::placeholder { color: var(--ho-ink-300); }

input[type="number"] { -moz-appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236f6559' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left var(--ho-4) center;
  padding-inline-start: var(--ho-10);
}

label { font-size: var(--ho-fs-sm); font-weight: 600; color: var(--ho-ink-700); }

.ho-field { display: block; margin-bottom: var(--ho-4); }
.ho-field > span { display: block; margin-bottom: 6px; }
.ho-field .required { color: var(--ho-danger); }

.ho-field-error {
  display: block;
  margin-top: 6px;
  font-size: var(--ho-fs-sm);
  font-weight: 600;
  color: var(--ho-danger);
}
.ho-field.has-error input,
.ho-field.has-error select,
.ho-field.has-error textarea {
  border-color: var(--ho-danger);
  box-shadow: 0 0 0 4px var(--ho-danger-50);
}

.ho-hidden-field { display: none !important; }

/* ----------------------------------------------------------- utilities --- */

.ho-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.ho-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ho-clamp-2,
.ho-clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ho-clamp-2 { -webkit-line-clamp: 2; }
.ho-clamp-3 { -webkit-line-clamp: 3; }

.ho-muted { color: var(--ho-text-muted); }
.ho-strong { color: var(--ho-text-strong); }
.ho-center { text-align: center; }

/* These two win over any component `display`, which is the whole point of a
   visibility utility. */
@media (max-width: 767px) {
  .ho-hide-mobile { display: none !important; }
}
@media (min-width: 768px) {
  .ho-hide-desktop { display: none !important; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .ho-hide-tablet { display: none !important; }
}
@media (min-width: 1024px) {
  .ho-hide-wide { display: none !important; }
}

/* Honeycomb texture used sparingly as a section backdrop. */
.ho-comb-bg {
  background-color: var(--ho-cream-100);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='64' viewBox='0 0 56 64'%3E%3Cpath d='M28 0l24 14v28L28 56 4 42V14z' fill='none' stroke='%23e9860f' stroke-opacity='.07' stroke-width='2'/%3E%3C/svg%3E");
  background-size: 56px 64px;
}

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

  /* Spinners are status, not decoration. Freezing one leaves a control that
     looks broken rather than busy, so they keep turning — slower, and with no
     movement across the page. */
  .ho-spinner,
  .ho-loader__ring::before,
  .blockUI.blockOverlay::after {
    animation-duration: 1.1s !important;
    animation-iteration-count: infinite !important;
  }
}

/* =============================================================================
   WooCommerce primitives.
   The three WooCommerce stylesheets are dequeued because the theme re-draws
   every component; these are the few utility classes core markup still relies
   on, re-declared here so nothing depends on the removed files.
   ========================================================================== */

.screen-reader-text,
.woocommerce-store-notice__dismiss-link + .screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.screen-reader-text:focus {
  position: static !important;
  width: auto; height: auto;
  clip: auto;
  clip-path: none;
}

.woocommerce-Price-amount { white-space: nowrap; font-variant-numeric: tabular-nums; }
.woocommerce-Price-currencySymbol { font-size: .84em; font-weight: 600; }

del {
  position: relative;
  display: inline-block;
  text-decoration: none !important;
  color: var(--ho-ink-400);
  font-size: 0.95em;
  line-height: 1.4;
}
del::after {
  content: '';
  position: absolute;
  left: -2px;
  right: -2px;
  top: 50%;
  height: 1.5px;
  background: #e53e3e;
  transform: translateY(-50%) rotate(-10deg);
  transform-origin: center;
  pointer-events: none;
}
del .woocommerce-Price-amount {
  color: inherit;
  text-decoration: none !important;
}
ins { text-decoration: none; background: transparent; }

.clear { clear: both; }

/* Form row grid used by WooCommerce checkout and account forms. */
.form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 var(--ho-4);
}
.form-row label { font-size: var(--ho-fs-sm); font-weight: 600; color: var(--ho-ink-700); }
.form-row .required { color: var(--ho-danger); text-decoration: none; }
.form-row .optional { color: var(--ho-ink-300); font-weight: 500; }

.woocommerce-form-row--first,
.form-row-first,
.woocommerce-form-row--last,
.form-row-last { width: 100%; }

@media (min-width: 600px) {
  .woocommerce-billing-fields__field-wrapper,
  .woocommerce-shipping-fields__field-wrapper,
  .woocommerce-address-fields__field-wrapper {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--ho-4);
  }
  .form-row-wide,
  .woocommerce-form-row--wide,
  .notes { grid-column: 1 / -1; }
}

/* Star rating used by reviews. */
.star-rating {
  position: relative;
  display: inline-block;
  width: 5.4em;
  height: 1.2em;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.2;
  font-family: star;
  color: var(--ho-gold);
  direction: ltr;
}
.star-rating::before,
.star-rating span::before {
  content: '★★★★★';
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  letter-spacing: .1em;
}
.star-rating::before { color: var(--ho-line); }
.star-rating span {
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  overflow: hidden;
  padding-top: 1.5em;
}

/* The core quantity wrapper, restyled to match the theme stepper. */
.quantity { display: inline-flex; }
.quantity .qty { width: 72px; text-align: center; font-weight: 800; }

/* Password strength meter. */
.woocommerce-password-strength {
  padding: 6px var(--ho-3);
  border-radius: var(--ho-r-xs);
  font-size: var(--ho-fs-xs);
  font-weight: 700;
  text-align: center;
}
.woocommerce-password-strength.short,
.woocommerce-password-strength.bad { background: var(--ho-danger-50); color: var(--ho-danger); }
.woocommerce-password-strength.good { background: var(--ho-info-50); color: var(--ho-info); }
.woocommerce-password-strength.strong { background: var(--ho-green-50); color: var(--ho-green-600); }

/* Blocked UI overlay used by WooCommerce AJAX. */
.blockUI.blockOverlay {
  position: relative;
  background: rgba(255, 255, 255, .7) !important;
}
.blockUI.blockOverlay::after {
  content: '';
  position: absolute;
  top: 50%;
  inset-inline-start: 50%;
  width: 26px; height: 26px;
  margin: -13px 0 0 -13px;
  border: 2.5px solid var(--ho-amber-400);
  border-top-color: transparent;
  border-radius: 50%;
  animation: ho-spin .7s linear infinite;
}

/* Select2 / SelectWoo, used for the state field. */
.select2-container--default .select2-selection--single {
  height: 46px !important;
  border: 1.5px solid var(--ho-line) !important;
  border-radius: var(--ho-r-sm) !important;
  background: var(--ho-surface) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 44px !important;
  padding-inline: var(--ho-4) !important;
  color: var(--ho-ink-800) !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 44px !important; }
.select2-dropdown {
  border-color: var(--ho-line) !important;
  border-radius: var(--ho-r-sm) !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--ho-amber-500) !important;
}

/* =============================================================================
   Elementor layouts built from theme widgets.
   Elementor gives every column `min-height: 1px` so an empty one stays
   clickable in the editor. Around a theme widget that is legitimately empty —
   the shop's visually hidden heading — that single pixel was the only thing
   separating an Elementor-built page from its PHP twin. A column that already
   holds a theme widget does not need it.
   ========================================================================== */
.elementor-column:has(> .elementor-widget-wrap > .elementor-element[class*="elementor-widget-ho-"]) {
  min-height: 0;
}

/* A theme widget with nothing to show (the reviews strip before a shop has
   two reviews, say) prints nothing, and Elementor drops it — but leaves its
   section behind: an empty box that still has its background and padding.
   Outside the editor, a section or container with no widget left goes. */
body:not(.elementor-editor-active) .elementor-top-section:not(:has(.elementor-widget)),
body:not(.elementor-editor-active) .e-con.e-parent:not(:has(.elementor-widget)) {
  display: none;
}

/* «در موبایل اول صفحه»: on a phone the section holding that widget moves to
   the top of the page; everywhere else Elementor's own order stands. */
@media (max-width: 767px) {
  body:not(.elementor-editor-active) .elementor:has(> .elementor-top-section .ho-first-on-mobile),
  body:not(.elementor-editor-active) .elementor:has(> .e-con .ho-first-on-mobile) {
    display: flex;
    flex-direction: column;
  }
  body:not(.elementor-editor-active) .elementor > .elementor-top-section:has(.ho-first-on-mobile),
  body:not(.elementor-editor-active) .elementor > .e-con:has(.ho-first-on-mobile) {
    order: -1;
  }

  /* Theme sections draw their own .container gutter. Side padding on the
     Elementor section around them doubled it on phones (32px a side) and
     stopped product rails short of the screen edge. */
  .elementor-section:has(> .elementor-container .elementor-widget[class*="elementor-widget-ho-"]),
  .e-con:has(> .elementor-widget[class*="elementor-widget-ho-"]) {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}