/*
 * Aperina blocks — mobile first (640 / 768 / 1024 / 1280). Role tokens only; the evening tone
 * re-points the role tokens so every component inside it turns mocha without its own dark rules.
 */

:root { --gutter: clamp(16px, 4vw, 40px); }

/* Toman sign after every price — «توما» with «ن» raised above «ما» (bin/build-toman-sign.py) as a mask;
   --toman-mask and --toman-ratio come from inc/currency.php. The sign's baseline sits at 83% of its height. */
.woocommerce-Price-amount::after,
.wc-block-formatted-money-amount::after,
.toman-sign {
  --toman-size: max(1.1em, 16px); /* stays legible beside small prices */
  content: ""; display: inline-block;
  inline-size: calc(var(--toman-size) * var(--toman-ratio, 1)); block-size: var(--toman-size);
  margin-inline-start: 0.2em; vertical-align: calc(var(--toman-size) * -0.17); background-color: currentColor;
  -webkit-mask: var(--toman-mask) no-repeat center / contain; mask: var(--toman-mask) no-repeat center / contain;
}
.toman-amount { white-space: nowrap; }

/* Same spacing in the editor canvas as on the site (the editor adds default text margins). Zero specificity. */
:where(.doorstep, .delivery-strip, .price-board, .line-section, .rail, .cat-rail, .catalog, .line-hero) :where(h1, h2, h3, h4, p, ul, ol, figure) { margin-block: 0; }

/* =========================================================
   Evening tone (mocha band)
   ========================================================= */
.tone-evening {
  --bg: var(--ap-mocha); --bg-raised: var(--ap-mocha-raised); --bg-sunken: var(--ap-mocha-deep); --bg-muted: var(--ap-mocha-line);
  --text: var(--ap-cream); --text-muted: var(--ap-sand); --text-subtle: var(--ap-taupe);
  --border: var(--ap-mocha-line); --border-strong: var(--ap-taupe-deep);
  --divider: color-mix(in oklab, var(--ap-mocha-line) 80%, transparent);
  --primary: var(--ap-cream); --primary-hover: var(--ap-sand); --on-primary: var(--ap-wine);
  --accent-tint: var(--ap-wine-night); --on-accent-tint: var(--ap-wine-blush);
  --link: var(--ap-wine-blush); --focus-ring: var(--ap-cream);
  --skeleton: var(--ap-mocha-line);
  background: var(--bg); color: var(--text); color-scheme: dark;
}

/* =========================================================
   Doorstep (homepage top)
   ========================================================= */
.doorstep { padding-block: var(--space-6) var(--space-10); }
.doorstep__head { display: grid; gap: var(--space-2); margin-block-end: var(--space-5); max-width: 44rem; }
.doorstep__title { font-size: clamp(2rem, 1.2rem + 3.4vw, 3.5rem); font-weight: 200; line-height: 1.3; text-wrap: balance; }
.doorstep__lede { font-size: var(--text-body); line-height: var(--lh-body); color: var(--text-muted); max-width: 48ch; }

.doorstep__doors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }

.door {
  position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; isolation: isolate;
  border: 1px solid var(--border); border-radius: var(--radius-cta);
  background: var(--bg-raised); color: var(--text); text-decoration: none;
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out);
}
.door:hover { border-color: var(--border-strong); box-shadow: var(--shadow-2); }
.door:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.door--party { --text-muted: var(--ap-sand); background: var(--ap-mocha); border-color: var(--ap-mocha); color: var(--ap-cream); }
.door--party:hover { border-color: var(--ap-mocha-deep); }

.door__media { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--bg-muted); }
.door--party .door__media { background: var(--ap-mocha-line); }
.door__media img { width: 100%; height: 100%; object-fit: cover; transition: scale var(--dur-slow) var(--ease-out); }
.door:hover .door__media img { scale: 1.04; }

.door__count {
  position: absolute; inset-block-start: var(--space-2); inset-inline-start: var(--space-2); z-index: 1;
  padding: 2px var(--space-3); border-radius: var(--radius-pill);
  background: rgb(239 233 225 / 0.94); color: var(--ap-mocha);
  font-size: var(--text-micro); line-height: var(--lh-micro); font-weight: 500;
}

.door:active { scale: 0.985; }
.door__body { flex: 1; display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3) var(--space-3) var(--space-4); }
.door__title { font-size: var(--text-title); font-weight: 600; line-height: 1.45; text-wrap: balance; }
.door__text { display: none; font-size: var(--text-small); line-height: var(--lh-small); color: var(--text-muted); }
.door__cats { display: none; font-size: var(--text-caption); line-height: var(--lh-caption); color: var(--text-muted); }
.door__foot { display: flex; align-items: center; gap: var(--space-2); margin-block-start: auto; padding-block-start: var(--space-3); font-size: var(--text-label); line-height: var(--lh-label); font-weight: 500; }
.door__foot svg { flex: none; width: 18px; height: 18px; transition: translate var(--dur-base) var(--ease-out); }
.door:hover .door__foot svg { translate: -4px 0; }

@media (min-width: 480px) {
  .door__text { display: block; }
}
@media (min-width: 768px) {
  .doorstep { padding-block: var(--space-12) var(--space-16); }
  .doorstep__head { margin-block-end: var(--space-8); }
  .doorstep__doors { gap: var(--space-5); }
  .door__media { aspect-ratio: 16 / 11; }
  .door__count { inset-block-start: var(--space-4); inset-inline-start: var(--space-4); }
  .door__body { gap: var(--space-2); padding: var(--space-5) var(--space-6) var(--space-6); }
  .door__title { font-size: var(--text-h2); font-weight: 500; line-height: var(--lh-h2); }
  .door__cats { display: block; }
}

/* =========================================================
   Benefits — three large lines
   ========================================================= */
.benefits { padding-block: var(--space-12); border-block-start: 1px solid var(--divider); }
.benefits__heading { margin-block-end: var(--space-4); font-size: var(--text-title); font-weight: 600; line-height: var(--lh-title); color: var(--text-muted); }
.benefits__list { margin: 0; border-block-start: 1px solid var(--border-strong); }
.benefits__row { display: grid; gap: var(--space-1); padding-block: var(--space-5); border-block-end: 1px solid var(--divider); }
.benefits__term { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); font-weight: 200; line-height: 1.3; text-wrap: balance; }
.benefits__text { margin: 0; max-width: 52ch; color: var(--text-muted); }
.benefits__text b { color: var(--text); font-weight: 600; }
@media (min-width: 768px) {
  .benefits { padding-block: var(--space-16); }
  .benefits__row { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: baseline; gap: var(--space-8); padding-block: var(--space-6); }
}

/* =========================================================
   Delivery label — a parcel label with a perforated stub
   ========================================================= */
.delivery-strip { padding-block: var(--space-10); }

.delivery-label {
  --notch: 9px;
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: stretch;
  margin-block-start: var(--space-4);
  border: 1px solid var(--border-strong); border-radius: var(--radius-panel);
  background: var(--bg-raised); color: var(--text);
}
.delivery-strip .delivery-label { margin-block-start: 0; }
.delivery-label__stub {
  position: relative; display: grid; place-items: center; padding-inline: var(--space-4);
  border-inline-end: 1px dashed var(--border-strong); color: var(--text);
}
.delivery-label__stub svg { width: 30px; height: 30px; }
/* the two half-circle notches where the stub tears off */
.delivery-label__stub::before, .delivery-label__stub::after {
  content: ""; position: absolute; inset-inline-end: calc(var(--notch) * -1 - 0.5px);
  width: calc(var(--notch) * 2); height: calc(var(--notch) * 2); border-radius: 50%;
  background: var(--bg); border: 1px solid var(--border-strong);
}
.delivery-label__stub::before { inset-block-start: calc(var(--notch) * -1 - 1px); clip-path: inset(50% 0 0 0); }
.delivery-label__stub::after { inset-block-end: calc(var(--notch) * -1 - 1px); clip-path: inset(0 0 50% 0); }

.delivery-label__main { display: grid; align-content: center; gap: 2px; padding: var(--space-3) var(--space-4); }
.delivery-label__title { font-size: var(--text-title); font-weight: 600; line-height: 1.5; }
.delivery-label__cond { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); font-size: var(--text-small); line-height: var(--lh-small); color: var(--text-muted); }
.delivery-label__cond b { color: var(--text); font-weight: 600; }
.delivery-label__note {
  grid-column: 1 / -1; display: flex; align-items: flex-start; gap: var(--space-2);
  padding: var(--space-3) var(--space-4); border-block-start: 1px dashed var(--border-strong);
  font-size: var(--text-caption); line-height: var(--lh-caption); color: var(--text-muted);
}
.delivery-label__note svg { flex: none; width: 16px; height: 16px; margin-block-start: 3px; }
.placeholder-badge { font-size: var(--text-micro); }

@media (min-width: 768px) {
  .delivery-label { grid-template-columns: auto minmax(0, 1fr) minmax(0, 0.9fr); }
  .delivery-label__stub { padding-inline: var(--space-6); }
  .delivery-label__main { padding: var(--space-4) var(--space-6); }
  .delivery-label__note { grid-column: auto; align-items: center; padding: var(--space-4) var(--space-6); border-block-start: 0; border-inline-start: 1px dashed var(--border-strong); font-size: var(--text-small); line-height: var(--lh-small); }
  .delivery-label--compact { grid-template-columns: auto minmax(0, 1fr); }
  .delivery-label--compact .delivery-label__note { grid-column: 1 / -1; border-inline-start: 0; border-block-start: 1px dashed var(--border-strong); }
}

/* =========================================================
   Price board — price per kg, read from the store
   ========================================================= */
.price-board { padding-block: var(--space-12); border-block-start: 1px solid var(--divider); }
.price-board__head { display: grid; gap: var(--space-2); align-content: start; }
.price-board__title { font-size: var(--text-h2); font-weight: 500; line-height: var(--lh-h2); text-wrap: balance; }
.price-board__lede { color: var(--text-muted); max-width: 44ch; }
.price-board__stats { margin-block-start: var(--space-2); font-size: var(--text-small); color: var(--text-muted); }
.price-board__stats b { color: var(--text); font-weight: 600; }

.price-board__list { list-style: none; margin: var(--space-6) 0 0; padding: 0; border-block-start: 1px solid var(--border-strong); }
.price-board__row { display: grid; grid-template-columns: auto minmax(var(--space-4), 1fr) auto; align-items: baseline; gap: var(--space-3); padding-block: var(--space-3); border-block-end: 1px solid var(--divider); }
.price-board__name { display: grid; min-width: 0; color: inherit; text-decoration: none; }
.price-board__name b { font-size: var(--text-body); font-weight: 600; line-height: 1.6; }
.price-board__name small { font-size: var(--text-caption); line-height: var(--lh-caption); color: var(--text-muted); }
.price-board__name:hover b { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.4em; }
.price-board__leader { border-block-end: 1px dotted var(--border-strong); translate: 0 -0.35em; }
.price-board__price { display: grid; justify-items: end; font-weight: 600; white-space: nowrap; line-height: 1.6; }
.price-board__price small { font-size: var(--text-caption); font-weight: 400; color: var(--text-muted); }

@media (max-width: 479px) {
  .price-board__row { grid-template-columns: minmax(0, 1fr) auto; }
  .price-board__leader { display: none; }
}
@media (min-width: 1024px) {
  .price-board { padding-block: var(--space-20); }
  .price-board__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-16); align-items: start; }
  .price-board__list { margin: 0; }
}

/* =========================================================
   Line section (a band per product line)
   ========================================================= */
.line-section { padding-block: var(--space-12); background: var(--bg); color: var(--text); }
.line-section--day { border-block-start: 1px solid var(--divider); }
.line-section__head { display: grid; justify-items: start; gap: var(--space-2); margin-block-end: var(--space-6); }
.line-section__title { font-size: var(--text-h1); font-weight: 200; line-height: var(--lh-h1); text-wrap: balance; }
.line-section__lede { color: var(--text-muted); max-width: 52ch; }
.line-section__note { display: inline-flex; align-items: center; gap: var(--space-2); margin-block-start: var(--space-1); padding: var(--space-1) var(--space-3); border: 1px solid var(--border-strong); border-radius: var(--radius-pill); font-size: var(--text-small); line-height: var(--lh-small); }
.line-section__note svg { flex: none; width: 16px; height: 16px; }
.line-section__cta { margin-block-start: var(--space-3); }
.line-section__cta svg { width: 18px; height: 18px; }
.line-section__body > * + * { margin-block-start: var(--space-10); }
.line-section .rail, .line-section .cat-rail, .line-section .price-board, .line-section .delivery-strip { padding-block: 0; border: 0; }

@media (min-width: 768px) {
  .line-section { padding-block: var(--space-20) var(--space-16); }
  .line-section__head { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-8); align-items: end; margin-block-end: var(--space-10); }
  .line-section__head > * { grid-column: 1; }
  .line-section__cta { grid-column: 2; grid-row: 1 / span 3; align-self: end; margin: 0; }
}

/* =========================================================
   Rails (products and categories)
   ========================================================= */
.rail, .cat-rail { padding-block: var(--space-10); }
.rail__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-block-end: var(--space-4); }
.rail__title { font-size: var(--text-h3); font-weight: 600; line-height: var(--lh-h3); }
.rail__lede { font-size: var(--text-small); line-height: var(--lh-small); color: var(--text-muted); }
.rail__more { flex: none; padding-block: var(--space-2); color: var(--link); font-size: var(--text-label); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.45em; }
.rail__more:hover { text-decoration-thickness: 2px; }

.product-row, .cat-rail__list {
  list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; gap: var(--space-3);
  overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
  margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
  padding-block-end: var(--space-1);
}
.product-row::-webkit-scrollbar, .cat-rail__list::-webkit-scrollbar { display: none; }
/* Carousels at every size: whole cards plus a partly visible next one, so it is clear the row moves. */
.product-row { grid-auto-columns: calc((100% - 2 * var(--space-3)) / 2.35); }
.product-row > li, .cat-rail__list > li { scroll-snap-align: start; }
.cat-rail__list { grid-auto-columns: 104px; }

@media (min-width: 768px) {
  .product-row { grid-auto-columns: calc((100% - 3 * var(--space-4)) / 3.4); gap: var(--space-4); margin-inline: 0; padding-inline: 0; scroll-padding-inline: 0; }
  .cat-rail__list { grid-auto-columns: 128px; gap: var(--space-4); margin-inline: 0; padding-inline: 0; }
}
@media (min-width: 1024px) {
  .product-row { grid-auto-columns: calc((100% - 4 * var(--space-4)) / 4.4); }
}

/* Previous / next buttons (shown only when the rail overflows) */
.rail__head { flex-wrap: wrap; }
.rail__head--bare { justify-content: flex-end; }
.rail__controls { display: flex; align-items: center; gap: var(--space-3); margin-inline-start: auto; }
.rail__nav { display: inline-flex; gap: var(--space-2); }
.rail__btn {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--border-strong); border-radius: var(--radius-cta); background: var(--bg-raised); color: var(--text);
  cursor: pointer; transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
.rail__btn svg { width: 18px; height: 18px; }
.rail__btn[data-rail-prev] svg { scale: -1 1; }
.rail__btn:hover:not(:disabled) { background: var(--text); color: var(--bg); border-color: var(--text); }
.rail__btn:active:not(:disabled) { scale: 0.94; }
.rail__btn:disabled { opacity: 0.35; cursor: default; }
.rail__btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }

.cat-tile { display: grid; gap: var(--space-1); color: inherit; text-decoration: none; }
.cat-tile__media { display: block; aspect-ratio: 1; overflow: hidden; border-radius: var(--radius-cta); background: var(--bg-muted); }
.cat-tile__media img { width: 100%; height: 100%; object-fit: cover; transition: scale var(--dur-slow) var(--ease-out); }
.cat-tile:hover .cat-tile__media img { scale: 1.05; }
.cat-tile:focus-visible { outline: none; }
.cat-tile:focus-visible .cat-tile__media { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.cat-tile__name { margin-block-start: var(--space-1); font-size: var(--text-label); font-weight: 500; line-height: 1.5; text-wrap: balance; }
.cat-tile__count { font-size: var(--text-micro); line-height: var(--lh-micro); color: var(--text-muted); }

/* =========================================================
   «بزمِ مزه» — timed campaign band (plugin aperina-bazm)
   The one section wine owns entirely. The table line from the logo burns down as the party runs out;
   products are ticket stubs torn from the band (the delivery label's perforation and notches).
   ========================================================= */
.bazm {
  --bazm-ground: var(--ap-wine);
  --bazm-ink: var(--ap-cream);
  --bazm-mist: var(--ap-wine-mist);
  --bazm-tile: color-mix(in oklab, var(--ap-cream) 11%, transparent);
  --bazm-muted: var(--ap-wine-mist);
  position: relative; overflow: hidden; padding-block: var(--space-10) var(--space-12);
  background: var(--bazm-ground); color: var(--bazm-ink); scroll-margin-block-start: 72px;
}
.bazm :where(h2, h3, p, ul) { margin-block: 0; }
.bazm__head { display: grid; gap: var(--space-5); }
.bazm__kicker { font-size: var(--text-label); font-weight: 500; line-height: 1.6; color: var(--bazm-mist); }
.bazm__title { margin-block: var(--space-1) 0; font-size: clamp(3rem, 2.2rem + 4vw, 5.25rem); font-weight: 200; line-height: 1.15; }
.bazm__lede { margin-block-start: var(--space-2); max-width: 40ch; font-size: var(--text-body); line-height: 1.9; color: var(--bazm-mist); }

.bazm__clock { gap: var(--space-2) var(--space-3); }
.bazm__clock .bazm-clock__label { flex-basis: 100%; color: var(--bazm-mist); }
.bazm__clock .bazm-clock__units { gap: var(--space-2); }
.bazm__clock .bazm-clock__unit b {
  min-width: 2.15em; padding: 6px 8px; border: 1px solid color-mix(in oklab, var(--ap-cream) 22%, transparent);
  border-radius: var(--radius-panel); font-size: 1.625rem; font-weight: 500; line-height: 1.35; color: var(--bazm-ink);
}

/* The table line: full length at the start, shorter every minute, a small flame at its end. */
.bazm__line { position: relative; height: 20px; margin-block: var(--space-6) var(--space-4); }
.bazm__line::before { content: ""; position: absolute; inset-inline: 0; top: 50%; height: 1px; background: color-mix(in oklab, var(--ap-cream) 24%, transparent); }
/* Nothing animates layout: the line scales from the inline start (right edge, the site is RTL), and the flame rides a
   full-width track moved by the same share. */
.bazm__burn, .bazm__flame { position: absolute; inset-inline: 0; top: 50%; }
.bazm__burn {
  height: 2px; margin-block-start: -1px; background: var(--ap-cream);
  transform-origin: 100% 50%; transform: scaleX(var(--bazm-left, 1)); transition: transform 1s linear;
}
.bazm__flame { height: 0; transform: translateX(calc((1 - var(--bazm-left, 1)) * 100%)); transition: transform 1s linear; }
.bazm__flame::after {
  content: ""; position: absolute; inset-inline-end: -5px; bottom: -1px; width: 10px; height: 15px;
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; background: var(--ap-wine-blush);
  transform-origin: 50% 100%; animation: bazm-flame 2.8s ease-in-out infinite;
}
@keyframes bazm-flame { 50% { transform: scale(0.86, 1.08) rotate(-4deg); } }
.bazm.is-upcoming .bazm__flame { display: none; }

.bazm__rail-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); margin-block-end: var(--space-4); }
.bazm__meta { display: grid; font-size: var(--text-small); line-height: 1.8; color: var(--bazm-mist); }
/* Each part isolated, so the digits of the time and the product count never reorder into each other.
   Phones: one part per line; from 768px on one line with a dot between. */
.bazm__meta span { unicode-bidi: isolate; }
.bazm .rail__btn { border-color: color-mix(in oklab, var(--ap-cream) 40%, transparent); background: transparent; color: var(--bazm-ink); }
.bazm .rail__btn:hover:not(:disabled) { border-color: var(--ap-cream); background: var(--ap-cream); color: var(--ap-wine); }
.bazm .rail__btn:focus-visible { outline-color: var(--ap-cream); }

.bazm__list {
  list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: min(86%, 360px); gap: var(--space-3);
  margin: 0 calc(var(--gutter) * -1); padding: 8px var(--gutter);
  overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none;
}
.bazm__list::-webkit-scrollbar { display: none; }
.bazm__list--rows { grid-template-rows: repeat(2, auto); }
.bazm__list > li { min-width: 0; scroll-snap-align: start; }
.bazm__note { margin-block-start: var(--space-5); font-size: var(--text-caption); line-height: 1.8; color: var(--bazm-mist); }

/* Ticket card */
.bazm-card { height: 100%; }
.bazm-card__link {
  display: grid; grid-template-columns: 104px minmax(0, 1fr); height: 100%; min-height: 140px;
  background: var(--bg-raised); color: var(--text); text-decoration: none;
  transition: transform var(--dur-base) var(--ease-out);
}
.bazm-card__link:active { transform: scale(0.985); }
.bazm-card__link:focus-visible { outline: 2px solid var(--ap-cream); outline-offset: 3px; }
.bazm-card__stub { position: relative; overflow: hidden; background: var(--bg-muted); }
.bazm-card__stub img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale var(--dur-slow) var(--ease-out); }
.bazm-card__link:hover .bazm-card__stub img { scale: 1.04; }
.bazm-card__off {
  position: absolute; inset-block-start: var(--space-2); inset-inline-start: var(--space-2);
  padding: 1px 9px; border-radius: var(--radius-pill); background: var(--ap-wine); color: var(--ap-cream);
  font-size: var(--text-label); font-weight: 600; line-height: 1.7;
}
.bazm-card__body {
  position: relative; display: grid; align-content: space-between; gap: var(--space-2); min-width: 0;
  padding: var(--space-3) var(--space-4); border-inline-start: 1px dashed var(--border-strong);
}
.bazm-card__body::before, .bazm-card__body::after {
  content: ""; position: absolute; inset-inline-start: -8px; width: 15px; height: 15px; border-radius: 50%; background: var(--bazm-ground);
}
.bazm-card__body::before { top: -8px; }
.bazm-card__body::after { bottom: -8px; }
.bazm-card__text { display: grid; gap: 1px; min-width: 0; }
.bazm-card__cat { font-size: var(--text-micro); line-height: 1.6; color: var(--text-muted); }
.bazm-card__name { font-size: var(--text-small); font-weight: 600; line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bazm-card__prices { display: grid; justify-items: start; line-height: 1.6; }
.bazm-card__prices del { font-size: var(--text-caption); color: var(--text-muted); text-decoration-thickness: 1px; }
.bazm-card__prices ins { font-size: var(--text-body); font-weight: 600; text-decoration: none; }
.bazm-card__unit { margin-inline-start: 4px; font-size: var(--text-caption); font-weight: 400; color: var(--text-muted); }
.bazm-card .bazm-stock { --bazm-muted: var(--text-muted); --bazm-track: var(--bg-sunken); --bazm-fill: var(--ap-wine); display: grid; gap: 4px; }
.bazm-card .bazm-stock__bar { width: 100%; }
.bazm-card.is-sold-out .bazm-card__stub img { filter: grayscale(1); opacity: 0.5; }
.bazm-card.is-sold-out .bazm-card__off { background: var(--ap-mocha); }
.bazm-card.is-sold-out .bazm-card__name { color: var(--text-muted); }

@media (min-width: 768px) {
  .bazm { padding-block: var(--space-16); }
  .bazm__head { grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: var(--space-10); }
  .bazm__clock { justify-content: flex-end; }
  .bazm__clock .bazm-clock__label { text-align: end; }
  .bazm__clock .bazm-clock__unit b { font-size: 2.25rem; }
  .bazm__line { margin-block: var(--space-10) var(--space-6); }
  .bazm__meta { display: flex; flex-wrap: wrap; gap: 0 var(--space-3); }
  /* A hairline, not «·», between the parts: next to Persian digits a middle dot reads as «۰». */
  .bazm__meta span + span::before { content: ""; display: inline-block; width: 1px; height: 0.9em; margin-inline-end: var(--space-3); background: currentColor; opacity: 0.5; vertical-align: -0.1em; }
  .bazm__list { margin-inline: 0; padding-inline: 0; scroll-padding-inline: 0; grid-auto-columns: calc((100% - var(--space-4)) / 2.2); gap: var(--space-4); }
  .bazm-card__link { grid-template-columns: 132px minmax(0, 1fr); min-height: 156px; }
}
@media (min-width: 1024px) {
  .bazm__list { grid-auto-columns: calc((100% - 2 * var(--space-4)) / 3.2); }
}
@media (prefers-reduced-motion: reduce) {
  .bazm__burn, .bazm__flame { transition: none; }
  .bazm__flame::after { animation: none; }
}

/* =========================================================
   Product card (blocks and WooCommerce loops)
   ========================================================= */
.product-card { position: relative; display: flex; flex-direction: column; min-width: 0; height: 100%; background: var(--bg-raised); border: 1px solid var(--border); }
/* Heart (plugin aperina-wishlist) on the photo corner opposite the sale badge */
.product-card > .wishlist-toggle { position: absolute; inset-block-start: 0; inset-inline-end: 0; z-index: 1; }
.product-card__media { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: var(--bg-muted); }
.product-card__media img { width: 100%; height: 100%; object-fit: cover; transition: scale var(--dur-slow) var(--ease-out); }
.product-card:hover .product-card__media img { scale: 1.03; }
.product-card__media:active img { scale: 0.98; }
.product-card__action:active { scale: 0.97; }
.product-card__badge { position: absolute; inset-block-start: var(--space-2); inset-inline-start: var(--space-2); padding: 2px var(--space-3); border-radius: var(--radius-pill); background: var(--primary); color: var(--on-primary); font-size: var(--text-micro); font-weight: 500; }
.product-card__body { display: grid; gap: 2px; padding: var(--space-3) var(--space-3) var(--space-2); }
.product-card__cat { font-size: var(--text-micro); line-height: var(--lh-micro); color: var(--text-muted); }
.product-card__title { font-size: var(--text-small); font-weight: 600; line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.product-card__title a { color: inherit; text-decoration: none; }
.product-card__title a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.35em; }
.product-card__foot { margin-block-start: auto; display: grid; gap: var(--space-2); padding: 0 var(--space-3) var(--space-3); }
.product-card__price { font-size: var(--text-small); font-weight: 600; line-height: 1.6; }
.product-card__price del { font-weight: 400; color: var(--text-muted); }
.product-card__price ins { text-decoration: none; }
.product-card__price .aperina-weight__unit { font-size: var(--text-caption); }
.product-card__action { width: 100%; min-height: 44px; }
.product-card__action svg { width: 16px; height: 16px; }
.product-card__action.loading { opacity: 0.6; cursor: progress; }
.product-card .added_to_cart { display: none; }

@media (min-width: 768px) {
  .product-card__body { padding: var(--space-4) var(--space-4) var(--space-2); }
  .product-card__title { font-size: var(--text-body); }
  .product-card__foot { padding: 0 var(--space-4) var(--space-4); }
  .product-card__price { font-size: var(--text-body); }
}

/* =========================================================
   Catalog (line pages)
   ========================================================= */
.catalog { padding-block: var(--space-4) var(--space-16); background: var(--bg); color: var(--text); scroll-margin-block-start: 80px; }
.catalog__bar { display: grid; gap: var(--space-3); margin-block-end: var(--space-3); }
.catalog__filters { display: grid; gap: var(--space-2); min-width: 0; }

.chips-scroll {
  display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none;
  margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter);
}
.chips-scroll::-webkit-scrollbar { display: none; }
.chips-scroll .chip { flex: none; min-height: 44px; text-decoration: none; }
.chip[aria-current="true"], .chip[aria-current="page"] { background: var(--text); color: var(--bg); border-color: var(--text); }
.chips-scroll--sub .chip { font-size: var(--text-caption); }

/* Sorting (aperina_sort_control in inc/helpers.php): button + bottom sheet below 1024px, select from 1024px.
   Used by the line catalog and WooCommerce archives. */
.sort-control { display: flex; align-items: center; }
.sort-control__form { display: none; align-items: center; gap: var(--space-2); margin: 0; }
.sort-control__form label { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-label); font-weight: 500; color: var(--text-muted); }
.sort-control__form label svg { width: 18px; height: 18px; }
.sort-control__form .select { width: auto; min-width: 150px; height: 44px; }
.sort-control__trigger {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding-inline: var(--space-3) var(--space-4);
  border: 1px solid var(--border-strong); border-radius: var(--radius-cta); background: transparent; color: var(--text);
  font: inherit; font-size: var(--text-label); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.sort-control__trigger svg { flex: none; width: 18px; height: 18px; }
.sort-control__trigger strong { font-weight: 600; }
.sort-control__trigger:active { scale: 0.97; }
.sort-control__trigger:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.sort-sheet__list { list-style: none; margin: 0; padding: var(--space-1) var(--gutter) calc(var(--space-4) + env(safe-area-inset-bottom, 0px)); overflow-y: auto; }
.sort-sheet__option {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 56px;
  border-block-end: 1px solid var(--divider); color: var(--text); font-size: var(--text-body); text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.sort-sheet__list li:last-child .sort-sheet__option { border-block-end: 0; }
.sort-sheet__option:active { background: var(--bg-sunken); }
.sort-sheet__option[aria-current="true"] { font-weight: 600; color: var(--primary); }
.sort-sheet__option svg { flex: none; width: 20px; height: 20px; }
.sort-sheet__option:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
@media (min-width: 1024px) {
  .sort-control__trigger { display: none; }
  .sort-control__form { display: flex; }
}
.catalog__count { margin-block-end: var(--space-3); font-size: var(--text-caption); line-height: var(--lh-caption); color: var(--text-muted); }
.catalog__empty .btn { margin-block-start: var(--space-2); }

.product-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }

.page-nav, .woocommerce-pagination { margin-block-start: var(--space-10); }
/* The <ul> carries the class "page-numbers" too, so only links and spans are styled as page buttons. */
.page-nav ul.page-numbers, .woocommerce-pagination ul.page-numbers { list-style: none; margin: 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-2); }
.page-nav li, .woocommerce-pagination li { margin: 0; }
.page-nav :is(a, span).page-numbers, .woocommerce-pagination :is(a, span).page-numbers { display: grid; place-items: center; min-width: 44px; height: 44px; padding-inline: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-cta); color: inherit; text-decoration: none; font-size: var(--text-label); font-weight: 500; }
.page-nav a.page-numbers:hover, .woocommerce-pagination a.page-numbers:hover { border-color: var(--text); }
.page-nav .page-numbers.current, .woocommerce-pagination .page-numbers.current { background: var(--text); border-color: var(--text); color: var(--bg); }
.page-nav .page-numbers.dots, .woocommerce-pagination .page-numbers.dots { border-color: transparent; min-width: 24px; padding-inline: 0; }
.page-nav :is(.prev, .next).page-numbers, .woocommerce-pagination :is(.prev, .next).page-numbers { padding-inline: var(--space-4); }

@media (min-width: 768px) {
  .catalog__bar { grid-template-columns: minmax(0, 1fr) auto; align-items: start; column-gap: var(--space-8); }
  .chips-scroll { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; }
  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
}
@media (min-width: 1024px) {
  .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* =========================================================
   Line hero (top of a line page)
   ========================================================= */
.line-hero { padding-block: var(--space-5) var(--space-4); background: var(--bg); color: var(--text); }
.line-hero__inner { display: grid; gap: var(--space-6); }
.line-hero__copy { display: grid; gap: var(--space-2); align-content: center; }
.line-hero__title { font-size: var(--text-h1); font-weight: 200; line-height: var(--lh-h1); }
.line-hero__lede { color: var(--text-muted); max-width: 50ch; }
.line-hero .delivery-label { margin-block-start: var(--space-3); }
.line-hero__media { display: none; aspect-ratio: 5 / 4; overflow: hidden; background: var(--bg-muted); }
.line-hero__media img { width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 768px) {
  .line-hero { padding-block: var(--space-12) var(--space-8); }
  .line-hero__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-12); align-items: center; }
  .line-hero__media { display: block; }
}

/* =========================================================
   Line tabs (under the header on line, category and product pages)
   ========================================================= */
.line-tabs { padding-block: var(--space-2); background: var(--bg); border-block-end: 1px solid var(--divider); }
.line-tabs__seg { display: grid; grid-template-columns: 1fr 1fr; max-width: 480px; padding: 4px; border-radius: var(--radius-pill); background: var(--bg-sunken); }
.line-tabs__tab { display: grid; place-items: center; min-height: 44px; padding-inline: var(--space-3); border-radius: var(--radius-pill); color: var(--text-muted); font-size: var(--text-label); font-weight: 500; line-height: 1.4; text-align: center; text-decoration: none; transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); }
.line-tabs__tab:hover { color: var(--text); }
.line-tabs__tab[aria-current="page"] { background: var(--bg-raised); color: var(--text); box-shadow: var(--shadow-1); }

/* =========================================================
   Free-delivery meter and mobile cart bar
   ========================================================= */
.delivery-meter { display: grid; gap: 6px; }
.delivery-meter__text { font-size: var(--text-small); line-height: 1.6; }
.delivery-meter__text b { font-weight: 600; }
.delivery-meter__bar { height: 4px; border-radius: var(--radius-pill); }
.delivery-meter__bar > span { border-radius: inherit; }
.delivery-meter.is-free .delivery-meter__bar > span { background: var(--success); }

.cart-bar {
  position: fixed; z-index: var(--z-sticky);
  inset-inline: var(--space-3); inset-block-end: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-2) var(--space-3);
  padding: var(--space-3); border-radius: var(--radius-panel);
  background: var(--ap-mocha); color: var(--ap-cream); box-shadow: var(--shadow-3);
  animation: cart-bar-in var(--dur-slow) var(--ease-out);
}
.cart-bar__summary { display: grid; line-height: 1.45; color: inherit; text-decoration: none; }
.cart-bar__count { font-size: var(--text-caption); color: var(--ap-sand); }
.cart-bar__total { font-size: var(--text-body); font-weight: 600; }
.cart-bar .delivery-meter { grid-column: 1 / -1; }
.cart-bar .delivery-meter__text { font-size: var(--text-caption); color: var(--ap-sand); }
.cart-bar .delivery-meter__text b { color: var(--ap-cream); }
.cart-bar .progress { background: var(--ap-mocha-line); }
.cart-bar .progress > span { background: var(--ap-cream); }
.cart-bar .delivery-meter.is-free .progress > span { background: #A9C29A; }
@keyframes cart-bar-in { from { opacity: 0; translate: 0 16px; } }

/* Phone/tablet: the cart bar floats above the bottom navigation (nav.css); body spacing uses --cart-bar-h from shop.js. */
.buy-bar-on .cart-bar { display: none; }
@media (max-width: 1023px) {
  .toast-region { inset-inline: var(--space-3); inset-block-end: calc(var(--bottom-nav-h, 64px) + env(safe-area-inset-bottom, 0px) + var(--cart-bar-h, 0px) + var(--space-4)); }
  .toast { min-width: 0; max-width: none; }
}
@media (min-width: 1024px) { .cart-bar { display: none; } }

/* =========================================================
   Editor preview
   ========================================================= */
.aperina-block-preview > div > *, .aperina-block-preview a { pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .cart-bar { animation: none; }
}