:root {
  --paper: #f8f7f2;
  --paper-warm: #f3f0e8;
  --ink: #172842;
  --ink-soft: #556274;
  --sage: #dfe8df;
  --sage-deep: #a8b9aa;
  --blue: #dbe7ee;
  --rose: #a43a50;
  --saffron: #d9972b;
  --line: rgba(23, 40, 66, .14);
  --shadow: 0 28px 70px rgba(33, 48, 65, .13);
  --display: "Noto Naskh Arabic", "B Nazanin", Tahoma, serif;
  --sans: Vazirmatn, Tahoma, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--paper); }
body {
  margin: 0;
  direction: rtl;
  overflow-x: hidden;
  color: var(--ink);
  background:
    radial-gradient(circle at 14% 4%, rgba(219, 231, 238, .72), transparent 24rem),
    radial-gradient(circle at 86% 34%, rgba(223, 232, 223, .75), transparent 31rem),
    linear-gradient(180deg, #fbfaf6 0%, #f4f4ef 26%, #edf2ef 48%, #f8f6f0 74%, #eef2ed 100%);
  font-family: var(--sans);
  text-rendering: optimizeLegibility;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  opacity: .18;
  background-image:
    radial-gradient(rgba(23, 40, 66, .15) .45px, transparent .55px),
    radial-gradient(rgba(255, 255, 255, .9) .55px, transparent .7px);
  background-size: 5px 5px, 7px 7px;
  background-position: 0 0, 2px 3px;
  mix-blend-mode: multiply;
}
a { color: inherit; }
img { display: block; }
button, a { -webkit-tap-highlight-color: transparent; }
.section-shell { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
::selection { background: var(--rose); color: #fff; }
:root { caret-color: var(--rose); accent-color: var(--rose); }
@supports (scrollbar-color: auto) { html { scrollbar-color: rgba(23,40,66,.35) transparent; scrollbar-width: thin; } }
:where(table, .price, .amount, [dir="ltr"]) { font-variant-numeric: tabular-nums; }

[data-sc-progress] {
  position: fixed;
  inset: 0 0 auto;
  z-index: 120;
  height: 2px;
  transform-origin: right center;
  background: var(--rose);
}

/* The blur and the fade live on a pseudo-element, not on the header itself.
   `mask-image` clips every descendant to the header's own box, and
   `backdrop-filter` makes the header the containing block for anything fixed
   inside it — between them, nothing could hang below the bar. The cart panel
   opens 82px down and stands 105px tall, so it was painted entirely inside the
   region the mask fades to nothing: present in the DOM, at full opacity, and
   invisible on screen. Moving both onto `::before` leaves the bar looking
   exactly as it did and lets its children out. */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 92px;
  padding-inline: clamp(22px, 5vw, 76px);
}
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(248, 247, 242, .93), rgba(248, 247, 242, .62) 65%, transparent);
  backdrop-filter: blur(10px);
  mask-image: linear-gradient(#000 72%, transparent);
}
.brand { display: inline-flex; align-items: center; justify-self: start; text-decoration: none; }
.brand img { width: auto; height: 76px; object-fit: contain; }
.site-header nav { display: flex; gap: clamp(22px, 3.4vw, 52px); font-size: .79rem; }
.site-header nav a { position: relative; text-decoration: none; }
.site-header nav a::after { content: ""; position: absolute; right: 0; bottom: -7px; width: 0; height: 1px; background: currentColor; transition: width 220ms ease; }
.site-header nav a:hover::after { width: 100%; }
.header-shop { justify-self: end; display: inline-flex; align-items: center; gap: 9px; padding: 10px 17px; border: 1px solid rgba(23, 40, 66, .32); border-radius: 99px; text-decoration: none; font-size: .78rem; }

.eyebrow { margin: 0 0 21px; color: var(--rose); font-size: .73rem; font-weight: 800; letter-spacing: .025em; }
.eyebrow::before { content: ""; display: inline-block; width: 30px; height: 1px; margin-inline-end: 10px; vertical-align: middle; background: currentColor; }
h1, h2, h3, p { text-wrap: pretty; }
h1, h2, h3 { font-family: var(--display); }
h1, h2 { margin: 0; letter-spacing: 0; font-weight: 700; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 15px; min-height: 48px; padding: 0 24px; border: 1px solid transparent; border-radius: 99px; text-decoration: none; font-size: .82rem; font-weight: 700; transition: transform 220ms ease, box-shadow 220ms ease, background 220ms ease; }
.button:hover { transform: translateY(-2px); }
.button--ink { background: var(--ink); color: #fff; box-shadow: 0 14px 30px rgba(23, 40, 66, .16); }
.button--light { border-color: rgba(23, 40, 66, .28); background: rgba(255, 255, 255, .5); }
.quiet-link { padding-bottom: 5px; border-bottom: 1px solid rgba(23, 40, 66, .42); text-decoration: none; font-size: .8rem; }

.hero { min-height: 185svh; }
/* Two layers, and the first one is the seam fix.

   The diagonal below ends at #eef3ed, so the pinned stage met the section
   under it along a hard horizontal line: #eef3ed against the page's #f8f7f2,
   ten points apart in red and plainly visible once you know to look. The extra
   layer dissolves the bottom of the stage into the page colour, which is
   exactly what .ingredients begins with, so the two now meet on the same value.

   Done as a background layer rather than an ::after overlay on purpose: a
   background paints behind every child, so it cannot wash over the hero copy or
   dim the scroll cue the way a positioned overlay would. */
.hero__stage {
  overflow: hidden;
  background:
    linear-gradient(0deg, #f8f7f2 0%, rgba(248,247,242,0) 16%),
    linear-gradient(132deg, #fbfaf6 0%, #f8f7f2 55%, #eef3ed 100%);
}
.paper-noise { position: absolute; inset: 0; background: radial-gradient(circle at 86% 48%, rgba(255,255,255,.9), transparent 31%), radial-gradient(circle at 15% 15%, rgba(219,231,238,.3), transparent 28%); }
.hero__arc { position: absolute; border-radius: 50%; }
.hero__arc--back { left: -17vw; top: -14vw; width: 82vw; aspect-ratio: 1; background: var(--sage); opacity: .92; }
.hero__arc--line { left: -8vw; top: -3vw; width: 68vw; aspect-ratio: 1; border: 1px solid rgba(23, 40, 66, .22); box-shadow: 0 0 0 6vw rgba(255,255,255,.18); }
.hero__brandmark { position: absolute; top: 4svh; right: 6vw; z-index: 1; width: auto; height: min(46svh, 520px); object-fit: contain; opacity: .105; mix-blend-mode: multiply; pointer-events: none; user-select: none; }
.hero__media { position: absolute; left: -2vw; top: 8svh; z-index: 2; width: min(60vw, 920px); height: 83svh; margin: 0; overflow: hidden; border-radius: 0 52% 52% 0; box-shadow: var(--shadow); }
/* The tablet band, where the two halves of the hero were sitting on each other.
   The photograph is placed from the left at 60vw and the copy from the right at
   7vw with a width of 42vw, which adds up to 109vw — they have always crossed.
   Above about 1400px it does not show, because `.hero__lead` caps at 31rem and
   `.hero__copy` at 610px, and those two caps pull the text clear of the curve on
   their own. Below it nothing caps anything and the paragraph ran 80-odd pixels
   into the middle of the photograph, over saffron rather than over the pale
   edge the composition was drawn for.

   So the photograph is narrowed across that band only, on a line rather than a
   flat value: a fixed vw that clears at 1024 starves the photograph at 1440,
   and one that suits 1440 still overlaps at 1024. `80vw - 366px` holds the text
   at least 40px clear at every width in between, which is where it is tightest
   (1200px, where the copy is widest relative to the room).

   The band ends at 1440 and not 1400 because that is where the caps actually
   take over — measured, the un-narrowed layout still crossed by 9px at 1420.
   Outside the band nothing is touched; the design works there already. */
@media (min-width: 901px) and (max-width: 1440px) {
  .hero__media { width: min(60vw, calc(80vw - 366px)); }
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: left center; transform: scale(1.03); }
.hero__media::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(255,255,255,.75); border-left: 0; border-radius: inherit; box-shadow: inset -35px 0 70px rgba(248,247,242,.22); }
.hero__copy { position: absolute; right: clamp(28px, 7vw, 112px); top: 50%; z-index: 5; width: min(42vw, 610px); transform: translateY(-48%); text-align: right; }
.hero__copy h1 { max-width: 9ch; font-size: clamp(3.4rem, 5.2vw, 6.4rem); line-height: 1.18; }
.hero__lead { max-width: 31rem; margin: 27px 0 0; color: var(--ink-soft); font-size: clamp(.98rem, 1.18vw, 1.14rem); line-height: 2; }
.hero__actions { display: flex; align-items: center; gap: 24px; margin-top: 32px; }
.hero__note { position: absolute; left: clamp(24px, 7vw, 105px); bottom: 9svh; z-index: 5; display: flex; align-items: center; gap: 12px; padding: 12px 17px; border: 1px solid rgba(255,255,255,.65); border-radius: 99px; background: rgba(248,247,242,.76); box-shadow: 0 10px 30px rgba(23,40,66,.08); backdrop-filter: blur(10px); }
.hero__note strong { color: var(--rose); font-family: var(--display); font-size: 1.15rem; }
.hero__note span { font-size: .67rem; }
/* overflow-x clipped: __wash below is inset -15% on each side, which put its
   right edge 191px past the viewport and gave the whole page a horizontal
   scrollbar. Every other decorative bleed on this page already sits in a
   clipping stage; this section was the one that did not. `clip` rather than
   `hidden` so the section does not become a scroll container and break
   position:sticky in its descendants. */
/* The last stop is opaque #eaf0ef rather than rgba(229,237,238,.72), which
   composited to the same colour over the page anyway. Stating it outright is
   what lets the collection stage below start on exactly this value instead of
   on the result of an alpha calculation that nobody can check by reading it. */
.ingredients { position: relative; overflow-x: clip; padding: clamp(100px, 10vw, 145px) 0 clamp(105px, 11vw, 155px); background: linear-gradient(180deg, rgba(248,247,242,0), rgba(241,244,240,.92) 28%, rgba(238,243,239,.98) 70%, #eaf0ef 100%); }
.ingredients__wash { position: absolute; inset: -25% -15% -5%; pointer-events: none; background: radial-gradient(circle at 14% 54%, rgba(219,231,238,.8), transparent 29%), radial-gradient(circle at 87% 42%, rgba(223,232,223,.95), transparent 27%); }
.ingredients__inner { position: relative; }
/* Centred on the same axis as the orbit below it. The heading used to be a
   620px block pushed to the inline end with its text ragged-right, which in an
   1180px shell put its middle at 435px against the three circles' 715px — the
   two halves of one section standing 280px apart. `.ingredient-orbit` centres
   itself with `margin: … auto`, so this does the same rather than picking a
   side. The paragraph needs its own `auto` because it is narrower than the
   block that holds it. */
.section-heading { width: min(620px, 100%); margin-inline: auto; text-align: center; }
.section-heading h2, .story__copy h2, .journal h2, .shop-cta h2 { font-size: clamp(2.4rem, 4.15vw, 4.75rem); line-height: 1.25; }
.section-heading > p:last-child { max-width: 36rem; margin: 25px auto 0; color: var(--ink-soft); line-height: 2; }
.ingredient-orbit { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; gap: clamp(24px, 5vw, 70px); width: min(1050px, 94%); margin: 80px auto 0; }
.ingredient-orbit::before { content: ""; position: absolute; left: 50%; top: 42%; z-index: -1; width: 92%; aspect-ratio: 2.8; transform: translate(-50%, -50%); border: 1px solid rgba(23,40,66,.14); border-radius: 50%; }
.ingredient { text-align: center; }
.ingredient--two { transform: translateY(-46px); }
/* `height` is stated, not just `aspect-ratio`. The markup carries
   width="1254" height="1254" for CLS, and those attributes become a
   presentational height hint that wins over a bare aspect-ratio: the images
   rendered 307x1254 tall slivers instead of 307x307 circles. */
.ingredient img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border: 10px solid rgba(255,255,255,.62); border-radius: 50%; box-shadow: 0 24px 60px rgba(40,54,70,.11); }
.ingredient h3 { margin: 20px 0 5px; font-size: 1.35rem; font-weight: 700; }
.ingredient span { color: var(--ink-soft); font-size: .73rem; }

.collection { position: relative; color: var(--ink); }
.collection__stage { overflow: hidden; background: linear-gradient(180deg, #e5edef 0%, #dce8e6 18%, #e2ece7 72%, #f4f3ed 100%); }
.collection__stage::before, .collection__stage::after { content: ""; position: absolute; inset-inline: 0; z-index: 5; height: 13vh; pointer-events: none; }
/* These two fades soften the rail at the top and bottom of the stage.
   The top one also closes a join: it now starts on #eaf0ef, the colour the
   ingredients section above ends on, so the two meet with no step.

   The bottom one is deliberately left alone. Matching it to the story's
   #f8f7f2 closed the join on paper and looked worse in practice — forcing the
   page's warm paper over the last 13vh of a cool green stage washes the foot of
   the section out, and that band reads as a heavier edge than the small step it
   replaced. The original value stays. */
.collection__stage::before { top: 0; background: linear-gradient(180deg, #eaf0ef, transparent); }
.collection__stage::after { bottom: 0; background: linear-gradient(0deg, rgba(244,243,237,.98), transparent); }
.collection__rings { position: absolute; right: -28vw; top: -42vw; width: 90vw; aspect-ratio: 1; border: 1px solid rgba(23,40,66,.1); border-radius: 50%; box-shadow: 0 0 0 10vw rgba(255,255,255,.1), 0 0 0 21vw rgba(255,255,255,.07); }
/* The rail reads the way the rest of the shop does. It used to force
   `direction: ltr` on itself and hand `rtl` back to each card, which laid the
   intro against the left edge and ran the products off to the right — a Persian
   section you read left to right, opposite to every other line on the page.

   Dropping that one declaration is most of it: the rail inherits the document's
   `rtl`, so flex lays the intro first at the inline start and overflows the
   other way, and the cards no longer need their direction restoring. The anchor
   turns logical with it — `inset-inline-start` resolves against the stage,
   which is `rtl`, so the rail is pinned to the right edge rather than the left.

   The travel is the other half, and it is in scrollcraft: a rail that starts on
   the right and overflows left is revealed by translating right, not left. See
   `railDir` in metrics(), which takes the sign from this element's own computed
   direction rather than assuming either one. */
.collection__rail { position: absolute; inset-inline-start: 0; top: 0; display: flex; align-items: center; gap: clamp(28px, 4vw, 62px); width: max-content; min-width: 100vw; height: 100%; padding: 8vh 10vw; will-change: transform; }
.collection__intro { width: min(40vw, 540px); flex: 0 0 min(40vw, 540px); }
.collection__intro h2 { margin: 0; font-size: clamp(2.7rem, 4.45vw, 5.1rem); line-height: 1.2; letter-spacing: 0; }
.collection__intro > p:not(.eyebrow) { max-width: 25rem; margin: 23px 0 0; color: var(--ink-soft); line-height: 1.9; }
.swipe-hint { display: inline-flex; align-items: center; gap: 13px; margin-top: 45px; color: var(--ink-soft); font-size: .7rem; }
.swipe-hint i { font-style: normal; font-size: 1.35rem; }
.product-card { display: flex; flex-direction: column; width: clamp(310px, 28vw, 410px); height: min(74svh, 690px); flex: 0 0 clamp(310px, 28vw, 410px); padding: 13px 13px 25px; border: 1px solid rgba(255,255,255,.72); border-radius: 210px 210px 20px 20px; background: rgba(248,247,242,.65); box-shadow: 0 25px 65px rgba(39,54,69,.12); backdrop-filter: blur(14px); }
.product-card__photo { position: relative; display: block; flex: 1; min-height: 0; overflow: hidden; border-radius: 200px 200px 12px 12px; }
.product-card__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 650ms cubic-bezier(.22,1,.36,1); }
.product-card:hover .product-card__photo img { transform: scale(1.035); }
.product-card__photo span { position: absolute; right: 20px; bottom: 18px; padding: 7px 12px; border-radius: 99px; background: rgba(248,247,242,.85); color: var(--ink); font-size: .65rem; backdrop-filter: blur(8px); }
.product-card__copy { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; min-height: 130px; padding: 21px 13px 0; }
.product-card__copy p { margin: 0 0 7px; color: var(--rose); font-size: .66rem; font-weight: 800; }
.product-card__copy h3 { max-width: 11ch; margin: 0; font-size: 1.25rem; line-height: 1.55; }
.product-card__copy strong { flex: none; padding-bottom: 4px; font-size: .72rem; white-space: nowrap; }
.collection__end { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; width: 390px; flex: 0 0 390px; }
.collection__end p { margin: 0 0 24px; color: var(--ink-soft); }

.static-section { position: relative; content-visibility: auto; contain-intrinsic-size: auto 900px; }
.story { padding: clamp(130px, 16vw, 220px) 0; background: linear-gradient(180deg, rgba(244,243,237,0), #f8f6f0 17%, #f7f5ef 82%, rgba(238,243,238,.52)); }
.story__grid { display: grid; grid-template-columns: .95fr 1.05fr; align-items: center; gap: clamp(60px, 9vw, 130px); }
.story__media { position: relative; order: 2; margin: 0; }
.story__media::before { content: ""; position: absolute; inset: -35px 28% 42% -35px; z-index: -1; border: 1px solid rgba(164,58,80,.25); border-radius: 50% 50% 8px 8px; }
.story__media img { width: 100%; height: min(73svh, 760px); object-fit: cover; object-position: left center; border-radius: 50% 50% 8px 8px; box-shadow: var(--shadow); }
.story__media figcaption { position: absolute; left: -22px; bottom: 34px; padding: 11px 16px; border: 1px solid rgba(255,255,255,.7); border-radius: 99px; background: rgba(248,247,242,.82); font-size: .66rem; backdrop-filter: blur(10px); }
.story__copy { order: 1; }
.story__copy > p:not(.eyebrow) { margin: 28px 0 0; color: var(--ink-soft); line-height: 2.1; }
.story__copy ul { margin: 36px 0 0; padding: 0; list-style: none; }
.story__copy li { display: flex; align-items: center; gap: 17px; padding: 16px 0; border-top: 1px solid var(--line); font-size: .82rem; }
.story__copy li:last-child { border-bottom: 1px solid var(--line); }
.story__copy li span { color: var(--rose); font-family: var(--display); font-size: .85rem; }

.journal { padding: clamp(110px, 13vw, 180px) 0; text-align: center; background: radial-gradient(circle at 50% 40%, rgba(255,255,255,.8), transparent 35%), linear-gradient(180deg, rgba(238,243,238,.52), #e7eee7 56%, #e9f0e9 100%); }
.journal .eyebrow::before { display: none; }
.journal__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 62px; text-align: right; }
/* Built like the product card: a photo filling the arch, copy beneath it. The
   old card had neither picture nor excerpt, so a 300px arch carried one date
   and one headline and stood two thirds empty. */
.journal-card { position: relative; display: flex; flex-direction: column; padding: 13px 13px 24px; border: 1px solid rgba(255,255,255,.72); border-radius: 150px 150px 16px 16px; background: rgba(248,247,242,.66); box-shadow: 0 18px 45px rgba(37,52,67,.06); transition: transform 420ms cubic-bezier(.22,1,.36,1), box-shadow 420ms ease; }
.journal-card:hover { transform: translateY(-5px); box-shadow: 0 28px 62px rgba(37,52,67,.11); }
.journal-card__photo { flex: 0 0 clamp(180px, 17vw, 230px); min-height: 0; overflow: hidden; border-radius: 140px 140px 12px 12px; background: var(--sage); }
.journal-card__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms cubic-bezier(.22,1,.36,1); }
.journal-card:hover .journal-card__photo img { transform: scale(1.045); }
.journal-card__copy { display: flex; flex: 1; flex-direction: column; gap: 11px; padding: 22px 15px 0; }
.journal-card--empty .journal-card__copy { padding-top: 34px; }
.journal-card__date { color: var(--rose); font-size: .64rem; font-weight: 700; }
.journal-card h3 { margin: 0; font-size: clamp(1rem, 1.15vw, 1.22rem); line-height: 1.85; }
.journal-card h3 a { color: inherit; text-decoration: none; }
/* One target for the whole card, so the headline and the read link are not two
   separate stops on the same post. */
.journal-card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.journal-card h3 a:focus-visible { outline: none; }
.journal-card:has(h3 a:focus-visible) { outline: 2px solid var(--rose); outline-offset: 3px; }
.journal-card p { margin: 0; color: var(--ink-soft); font-size: .7rem; line-height: 2.05; }
.journal-card__more { margin-top: auto; padding-top: 16px; color: var(--ink); font-size: .7rem; font-weight: 700; }
.journal-card:hover .journal-card__more { color: var(--rose); }
/* Inside the pinned hero stage on purpose: it holds still while the hero holds,
   and leaves with it rather than trailing you down the page. */
.scroll-cue { position: absolute; left: 50%; bottom: 5svh; z-index: 6; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 12px 16px 10px; border-radius: 99px; color: var(--ink-soft); text-decoration: none; font-size: .62rem; letter-spacing: .04em; transform: translateX(-50%); transition: color 260ms ease; }
.scroll-cue:hover { color: var(--rose); }
.scroll-cue svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; animation: atrang-cue 2.4s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes atrang-cue { 0%, 100% { transform: translateY(0); opacity: .75; } 50% { transform: translateY(5px); opacity: 1; } }
/* min-height, because the bare `button` rule further down sets 46px and an
   element selector still reaches a property this class does not name — which
   turned the circle into an ellipse at the mobile size. */
.to-top { position: fixed; inset-inline-end: clamp(16px, 3vw, 34px); bottom: clamp(16px, 3vw, 34px); z-index: 60; display: grid; place-items: center; width: 46px; height: 46px; min-height: 0; padding: 0; border: 1px solid rgba(255,255,255,.8); border-radius: 50%; background: rgba(248,247,242,.86); color: var(--ink); box-shadow: 0 12px 30px rgba(23,40,66,.13); backdrop-filter: blur(10px); cursor: pointer; opacity: 0; transform: translateY(12px); transition: opacity 300ms ease, transform 300ms ease, color 220ms ease; }
.to-top.is-visible { opacity: 1; transform: translateY(0); }
/* Faded out is not the same as out of the way. Until theme.js adds
   `.is-visible` this button is `opacity: 0` and still perfectly hit-testable,
   so a 46px square in the bottom corner of every page has been quietly
   swallowing clicks aimed at whatever is under it — which on a product page is
   now the add-to-cart button in the buy bar. */
.to-top:not(.is-visible) { pointer-events: none; }
.to-top:hover { color: var(--rose); }
.to-top svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Photographic saffron framing; keep the copy on a calm ivory center. */
.shop-cta { min-height: 82svh; display: grid; place-items: center; overflow: hidden; background: linear-gradient(180deg, #e9f0e9 0%, #e9f0e9 12%, var(--paper) 88%, var(--paper) 100%); text-align: center; padding-block: 100px; }
.shop-cta__field { position: absolute; inset: 0; pointer-events: none; -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 85%, transparent); mask-image: linear-gradient(180deg, transparent, #000 12%, #000 85%, transparent); }
.shop-cta__still-life { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.shop-cta__inner { position: relative; max-width: 850px; }
.shop-cta__inner h2 { max-width: 18ch; margin-inline: auto; text-wrap: balance; }
.shop-cta .eyebrow::before { display: none; }
.shop-cta__inner > p:not(.eyebrow) { margin: 25px 0 0; color: var(--ink-soft); line-height: 1.9; }
.shop-cta__actions { display: flex; justify-content: center; gap: 12px; margin-top: 34px; }
/* No rule across the top. The section above it ends on #f8f7f2 and the footer
   is #f8f7f2, so the only thing that ever drew a line here was the line. */
.footer { display: flex; align-items: center; gap: 28px; padding: 28px clamp(24px, 5vw, 76px); background: var(--paper); font-size: .7rem; }
.brand--footer { justify-self: auto; }
.brand--footer img { height: 82px; }
.footer p { margin: 0; color: var(--ink-soft); }
.footer > div { display: flex; align-items: center; gap: 20px; margin-inline-start: auto; }
.footer a { text-decoration: none; }
/* Channel links carry their mark so Instagram and Telegram are told apart at a
   glance, at the size the footer runs at, without reading the label. */
.footer__channel { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-soft); transition: color 180ms ease; }
.footer__channel:hover { color: var(--ink); }
.footer__channel svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

:focus-visible { outline: 2px solid var(--rose); outline-offset: 5px; }

@media (max-width: 900px) {
  .site-header { grid-template-columns: 1fr 1fr; min-height: 68px; padding-inline: 18px; }
  .site-header nav { display: none; }
  .brand img { height: 58px; }
  .header-shop { padding: 8px 13px; font-size: .7rem; }
  .section-shell { width: min(100% - 34px, 680px); }
  .hero__arc--back { left: -38vw; top: -18vw; width: 132vw; }
  .hero__arc--line { left: -25vw; top: -5vw; width: 112vw; }
  .hero__brandmark { top: 50svh; right: 16px; height: min(30svh, 300px); opacity: .09; }
  .hero__media { left: -10vw; top: 8svh; width: 92vw; height: 47svh; border-radius: 0 50% 50% 0; }
  .hero__copy { right: 22px; top: auto; bottom: 7svh; width: calc(100% - 44px); transform: none; }
  .hero__copy h1 { max-width: 9ch; font-size: clamp(3rem, 12vw, 4.6rem); }
  .hero__lead { max-width: 33rem; margin-top: 19px; font-size: .9rem; }
  .hero__actions { margin-top: 22px; }
  .hero__note { left: 16px; top: 44svh; bottom: auto; }
  .ingredients { min-height: auto; padding-block: 110px 145px; }
  .section-heading h2, .story__copy h2, .journal h2, .shop-cta h2 { font-size: clamp(2.2rem, 9vw, 3.5rem); }
  .ingredient-orbit { gap: 10px; width: 100%; margin-top: 62px; }
  .ingredient--two { transform: translateY(-24px); }
  .ingredient img { border-width: 5px; }
  .ingredient h3 { margin-top: 13px; font-size: .95rem; }
  .ingredient span { display: none; }
  .collection__rail { gap: 22px; padding-inline: 8vw; }
  .collection__intro { width: 78vw; flex-basis: 78vw; }
  .collection__intro h2 { font-size: clamp(2.6rem, 10vw, 4rem); }
  .product-card { width: 76vw; height: 68svh; flex-basis: 76vw; }
  .product-card__copy { min-height: 120px; }
  .collection__end { width: 74vw; flex-basis: 74vw; }
  .story__grid { grid-template-columns: 1fr; }
  .story__media { order: 1; width: min(90%, 570px); margin-inline: auto; }
  .story__media img { height: 58svh; }
  .story__copy { order: 2; }
  .journal__grid { grid-template-columns: 1fr; max-width: 620px; margin-inline: auto; margin-top: 50px; }
  .journal-card { border-radius: 120px 120px 16px 16px; }
  .journal-card__photo { flex-basis: 200px; border-radius: 110px 110px 12px 12px; }
  /* Same cue as every other width — label over arrow, no disc — moved into the
     buttons' own row instead of standing under it. The row is right-aligned and
     the two buttons reach about a third of the way across, so the far end of it
     is empty and the cue has that end to itself. Its `bottom` is the copy's own
     offset less half the difference between the two heights, which is what puts
     the cue's middle on the buttons' middle rather than its foot on their foot. */
  .scroll-cue { left: 22px; bottom: calc(7svh - 9px); transform: none; }
  .to-top { width: 42px; height: 42px; }
  .shop-cta { min-height: 74svh; }
  /* A phone crops the artwork hard, which would bring the edge clusters in
     under the buttons. Pushing the field wider than the screen keeps the
     threads where they belong: outside the copy, along the margins. */
  .shop-cta__still-life { object-position: 45% center; }
  .footer { flex-wrap: wrap; gap: 12px 20px; }
  .footer > div { flex-wrap: wrap; width: 100%; margin: 0; gap: 10px 18px; }
}

@media (max-width: 520px) {
  .hero__media { width: 105vw; height: 44svh; }
  .hero__copy { bottom: 5svh; }
  .scroll-cue { bottom: calc(5svh - 9px); }
  .hero__actions { gap: 16px; }
  .button { min-height: 45px; padding-inline: 19px; }
  .product-card { height: 64svh; }
  .product-card__copy strong { display: none; }
  .story__media figcaption { left: -8px; }
  .shop-cta__actions { flex-direction: column; align-items: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__arc, .hero__media, .hero__note { transform: none !important; }
  .product-card__photo img, .button { transition: none; }
  .scroll-cue svg { animation: none; }
  .journal-card, .journal-card__photo img, .to-top { transition: none; }
  .journal-card:hover { transform: none; }
}

/* WordPress structure --------------------------------------------------- */
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* :focus-visible, not :focus.

   «رفتن به محتوای اصلی» is for someone navigating by keyboard, and it should
   appear when they Tab to it and at no other time. It was appearing for mouse
   users too, because the back-to-top button focuses this link on purpose — so
   that the next Tab carries on from the top of the page rather than from the
   footer the reader has just left. That intent is right; showing them the link
   was not.

   :focus-visible is exactly this distinction. A programmatic focus() matches it
   only when the reader's last interaction suggests they are on the keyboard, so
   a mouse click moves focus silently and Enter on the same button still reveals
   the link to the person who needs it. */
.screen-reader-text:focus-visible {
  position: fixed !important;
  top: 14px;
  right: 14px;
  z-index: 1000;
  width: auto;
  height: auto;
  padding: 12px 18px;
  clip: auto;
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
}

/* A browser too old for :focus-visible keeps the old behaviour. Better a skip
   link that shows too eagerly than one that can never be seen at all. */
@supports not selector(:focus-visible) {
  .screen-reader-text:focus {
    position: fixed !important;
    top: 14px;
    right: 14px;
    z-index: 1000;
    width: auto;
    height: auto;
    padding: 12px 18px;
    clip: auto;
    border-radius: 6px;
    background: #fff;
    color: var(--ink);
  }
}
.admin-bar .site-header { top: 32px; }
.primary-navigation { justify-self: center; }
.primary-navigation .menu {
  display: flex;
  align-items: center;
  gap: clamp(22px, 3.4vw, 52px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.primary-navigation .sub-menu {
  position: absolute;
  min-width: 190px;
  margin: 10px 0 0;
  padding: 12px;
  visibility: hidden;
  opacity: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(248, 247, 242, .97);
  box-shadow: var(--shadow);
  list-style: none;
  transition: opacity 180ms ease;
}
.primary-navigation li { position: relative; }
.primary-navigation li:hover > .sub-menu,
.primary-navigation li:focus-within > .sub-menu { visibility: visible; opacity: 1; }
.header-actions { justify-self: end; display: flex; align-items: center; gap: 11px; }
.header-cart { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-size: .73rem; }
.header-cart svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.header-cart b { display: grid; place-items: center; min-width: 20px; height: 20px; padding-inline: 5px; border-radius: 99px; background: var(--rose); color: #fff; font-size: .62rem; }
.header-cart-slot { position: relative; display: flex; align-items: center; }
/* `inset-inline-end`, not `right`. The header reads right-to-left, so the cart
   sits at the visual left; anchoring the panel's right edge to the cart's put
   its 320px of width off the side of the screen at x = -93.

   `visibility` is given its own track rather than riding on `transition: all`.
   Transitioning `visibility` alongside `opacity` under one `all` left the panel
   stuck at its closed values — opacity never moved off 0 even with the open
   class applied. Delay it out on close, flip it instantly on open. */
.header-cart-dropdown { position: absolute; top: 100%; inset-inline-end: 0; width: 320px; max-width: calc(100vw - 28px); margin-top: 15px; padding: 20px; background: rgba(255,255,255,.9); backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,.85); border-radius: 20px; box-shadow: 0 16px 40px rgba(23,40,66,.09); opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 250ms ease, transform 250ms ease, visibility 0s linear 250ms; z-index: 100; font-size: .75rem; text-align: right; }
.header-cart-slot.is-open .header-cart-dropdown { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity 250ms ease, transform 250ms ease, visibility 0s; }
.widget_shopping_cart_content ul.cart_list { list-style: none; margin: 0; padding: 0; max-height: 50vh; overflow-y: auto; }
/* WooCommerce adds archive/single-product-only rules to `.woocommerce
   ul.cart_list` (floats, thumbnail margins and block links). Give the header
   cart its own complete row layout so its RTL composition is identical on the
   home page, shop and product pages: picture at the reading edge, copy beside
   it and the remove control at the opposite edge. */
.header-cart-dropdown .widget_shopping_cart_content ul.cart_list li {
  position: relative;
  display: block;
  float: none !important;
  width: auto;
  min-height: 73px;
  margin: 0;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  text-align: right;
}
.header-cart-dropdown .widget_shopping_cart_content ul.cart_list li > a:not(.remove) {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 0 0 0 28px;
  color: var(--ink);
  text-align: right;
  text-decoration: none;
  font-weight: 700;
}
.header-cart-dropdown .widget_shopping_cart_content ul.cart_list li > a:not(.remove) img {
  grid-column: 1;
  grid-row: 1;
  float: none !important;
  width: 48px;
  height: 48px;
  margin: 0 !important;
  object-fit: cover;
  border-radius: 10px;
}
.header-cart-dropdown .widget_shopping_cart_content ul.cart_list li .quantity {
  display: block;
  margin: 5px 60px 0 28px;
  color: var(--ink-soft);
  font-size: .7rem;
  text-align: right;
}
.header-cart-dropdown .widget_shopping_cart_content ul.cart_list li > .remove {
  position: absolute;
  top: 50%;
  left: 0;
  right: auto;
  float: none;
  margin: 0;
  color: var(--rose);
  text-decoration: none;
  font-size: 1.2rem;
  transform: translateY(-50%);
}
.widget_shopping_cart_content .total { display: flex; align-items: center; justify-content: space-between; padding: 18px 0; margin: 0; font-size: .85rem; font-weight: bold; }
.widget_shopping_cart_content .buttons { display: flex; gap: 10px; margin: 0; }
.widget_shopping_cart_content .buttons .button { flex: 1; min-height: 42px; padding: 0; font-size: .7rem; border: 1px solid var(--ink); border-radius: 99px; text-decoration: none; display: flex; align-items: center; justify-content: center; }
.widget_shopping_cart_content .buttons .checkout { background: var(--ink); color: #fff; }
.widget_shopping_cart_content .woocommerce-mini-cart__empty-message { text-align: center; color: var(--ink-soft); padding: 20px 0; margin: 0; }
/* The "added to cart" card. It lives outside .site-header because that element
   has a backdrop-filter — which makes it the containing block for anything
   fixed inside it — and a mask-image that fades its own bottom edge away, so a
   card rendered in the header would be positioned against the header box and
   then faded out by the mask. Fixed here, aligned to the edge the cart sits on,
   and gone on its own after six seconds. */
.atrang-cart-flash-host { position: fixed; z-index: 120; top: 96px; inset-inline-end: clamp(22px, 5vw, 76px); pointer-events: none; }
.admin-bar .atrang-cart-flash-host { top: 128px; }
.atrang-cart-flash {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(330px, calc(100vw - 36px));
  padding: 13px 15px;
  pointer-events: auto;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 18px;
  background: rgba(248,247,242,.97);
  box-shadow: 0 20px 45px rgba(23,40,66,.14);
  backdrop-filter: blur(14px);
  animation: atrang-cart-flash 6s cubic-bezier(.22,1,.36,1) forwards;
}
.atrang-cart-flash > b { display: grid; flex: none; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--sage); color: #2f4636; font-size: .68rem; }
.atrang-cart-flash > span { display: grid; gap: 2px; min-width: 0; }
.atrang-cart-flash strong { font-size: .68rem; font-weight: 700; }
.atrang-cart-flash em { overflow: hidden; color: var(--ink-soft); font-size: .64rem; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.atrang-cart-flash > a { flex: none; padding: 8px 13px; border-radius: 99px; background: var(--ink); color: #fff; text-decoration: none; font-size: .63rem; font-weight: 600; }
@keyframes atrang-cart-flash {
  0% { opacity: 0; transform: translateY(-10px); }
  6%, 82% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(-10px); visibility: hidden; }
}
@keyframes atrang-cart-flash-still {
  0%, 82% { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}
.header-account { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; font-size: .7rem; }
.header-account svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.menu-toggle { display: none; }
.ingredient { color: inherit; text-decoration: none; }
.product-card__copy h3 a { color: inherit; text-decoration: none; }

/* Standard content ----------------------------------------------------- */
.content-page,
.woocommerce-shell,
.not-found {
  min-height: 70svh;
  padding-top: clamp(150px, 16vw, 210px);
  padding-bottom: clamp(90px, 12vw, 160px);
}
.content-page--narrow { width: min(900px, calc(100% - 40px)); }
.content-page__header { max-width: 850px; margin-bottom: 60px; }
.content-page__header h1,
.not-found h1 { margin: 0; font-family: var(--display); font-size: clamp(2.7rem, 5vw, 5.5rem); line-height: 1.25; }
/* An archive or a 404 has a two- or three-word title and can carry the full
   display size. A post headline is a sentence, and at 5vw it broke over four
   lines inside the reading column and read as a poster rather than a title. */
.content-page--narrow .content-page__header { max-width: none; margin-bottom: 46px; }
.content-page--narrow .content-page__header h1 { font-size: clamp(1.9rem, 3.3vw, 2.9rem); line-height: 1.5; }
.archive-description { max-width: 650px; color: var(--ink-soft); line-height: 2; }
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.post-card { overflow: hidden; border: 1px solid rgba(255,255,255,.72); border-radius: 170px 170px 14px 14px; background: rgba(255,255,255,.55); }
.post-card__image { display: block; overflow: hidden; aspect-ratio: 1; border-radius: 160px 160px 8px 8px; }
.post-card__image img { width: 100%; height: 100%; object-fit: cover; }
.post-card__body { padding: 25px; }
.post-card__body > span { color: var(--rose); font-size: .68rem; }
.post-card h2 { margin: 12px 0; font-size: 1.55rem; line-height: 1.6; }
.post-card h2 a { text-decoration: none; }
.post-card p { color: var(--ink-soft); font-size: .85rem; line-height: 1.9; }
.entry-single__image { margin: 0 0 50px; overflow: hidden; border-radius: 220px 220px 12px 12px; }
.entry-single__image img { width: 100%; height: auto; }
.entry-content { font-size: 1.04rem; line-height: 2.15; }
.entry-content > * { max-width: 760px; margin-inline: auto; }
.entry-content > .alignwide { max-width: 1180px; }
.entry-content > .alignfull { max-width: none; margin-inline: calc(50% - 50vw); }
.entry-content img { max-width: 100%; height: auto; }
.entry-footer,
.comments-area { margin-top: 55px; padding-top: 30px; border-top: 1px solid var(--line); }
.navigation.pagination { margin-top: 50px; }
.nav-links { display: flex; justify-content: center; gap: 8px; }
.page-numbers { display: grid; place-items: center; min-width: 42px; height: 42px; padding-inline: 12px; border: 1px solid var(--line); border-radius: 99px; text-decoration: none; }
.page-numbers.current { background: var(--ink); color: #fff; }
.not-found { display: grid; grid-template-columns: minmax(300px, .88fr) minmax(0, 1.12fr); align-items: center; gap: clamp(45px, 8vw, 110px); }
.not-found__art { position: relative; display: grid; place-items: center; min-height: 430px; }
.not-found__art::before { content: ""; position: absolute; width: 88%; aspect-ratio: 1; border: 1px solid rgba(23,40,66,.11); border-radius: 50%; box-shadow: 0 0 0 45px rgba(223,232,223,.31), 0 0 0 88px rgba(219,231,238,.16); }
.not-found__art img { position: absolute; z-index: 2; width: min(100%, 470px); height: auto; transform: rotate(-10deg); filter: drop-shadow(0 24px 32px rgba(23,40,66,.14)); }
.not-found__art span { position: relative; z-index: 3; color: #fff; font-family: var(--display); font-size: clamp(5.5rem, 10vw, 9rem); font-weight: 700; text-shadow: 0 7px 30px rgba(23,40,66,.24); }
.not-found__art i { position: absolute; z-index: 4; left: 7%; bottom: 17%; width: 13px; height: 13px; border-radius: 50%; background: var(--saffron); box-shadow: 34px 22px 0 -3px var(--rose), 74px -17px 0 -4px var(--saffron); }
.not-found__copy { position: relative; z-index: 5; }
.not-found__copy h1 { max-width: 10ch; }
.not-found__copy > p:not(.eyebrow) { max-width: 520px; margin: 20px 0 0; color: var(--ink-soft); line-height: 2; }
.not-found__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 32px; }
.not-found__actions .button { min-width: 170px; }
.search-form { display: flex; gap: 8px; }
input[type="search"], input[type="text"], input[type="email"], input[type="tel"], input[type="password"], textarea, select {
  max-width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid rgba(23,40,66,.22);
  border-radius: 10px;
  background: rgba(255,255,255,.72);
  color: var(--ink);
  font: inherit;
}
button, input[type="submit"] { min-height: 46px; padding: 0 20px; border: 0; border-radius: 99px; background: var(--ink); color: #fff; font: 700 .78rem var(--sans); cursor: pointer; }
button:disabled, input:disabled, select:disabled, textarea:disabled, .button.disabled { cursor: not-allowed; opacity: .52; }
button:active, input[type="submit"]:active, .button:active { transform: translateY(1px) scale(.985); }
input[type="search"]:focus, input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="password"]:focus, textarea:focus, select:focus { border-color: rgba(164,58,80,.62); outline: 0; box-shadow: 0 0 0 3px rgba(164,58,80,.1); }
.atrang-search-form { display: flex; align-items: stretch; gap: 8px; width: min(100%, 470px); }
.atrang-search-form label { flex: 1; }
.atrang-search-form input { width: 100%; }
.atrang-search-form button { flex: none; }
/* Same reasoning as .footer: this sits between the last section and the footer
   whenever the widget area is used, and a rule there would be the one hard edge
   on an otherwise continuous page. */
.footer-widgets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; padding-block: 60px; }

/* WooCommerce foundation ---------------------------------------------- */
.woocommerce-shell { width: min(1240px, calc(100% - 48px)); }
.woocommerce .woocommerce-breadcrumb { margin-bottom: 35px; color: var(--ink-soft); font-size: .72rem; }
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering { margin-bottom: 35px; }
.woocommerce ul.products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin: 0; padding: 0; }
.woocommerce ul.products::before,
.woocommerce ul.products::after { display: none; }
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  float: none;
  width: auto;
  margin: 0;
  padding: 12px 12px 25px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.76);
  border-radius: 180px 180px 16px 16px;
  background: rgba(255,255,255,.58);
  box-shadow: 0 18px 45px rgba(37,52,67,.07);
  transition: transform 180ms ease, box-shadow 180ms ease;
}
/* WooCommerce sizes the card off `.columns-N`, one class more specific than the
   rule above, so it wins: `.woocommerce ul.products.columns-3 li.product { width: 30.75% }`.
   Inside a grid that percentage resolves against the track, not the row — 30.75%
   of a 280px column is 86px, and every card collapsed to a sliver with the title
   wrapping two letters to a line. Match the attribute selector to take the
   specificity back; this sheet loads last, so the tie goes here. */
.woocommerce ul.products[class*="columns-"] li.product,
.woocommerce-page ul.products[class*="columns-"] li.product { float: none; clear: none; width: auto; margin: 0; }
.woocommerce ul.products li.product a img { aspect-ratio: 1; margin: 0 0 20px; object-fit: cover; border-radius: 170px 170px 10px 10px; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { padding: 0 12px; font-family: var(--display); font-size: 1.35rem; line-height: 1.55; }
.woocommerce ul.products li.product .price { padding-inline: 12px; color: var(--rose); font-size: .82rem; }
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  padding: 13px 20px;
  border-radius: 99px;
  background: var(--ink);
  color: #fff;
  font-family: var(--sans);
}
/* The card's own button ------------------------------------------------
   A solid navy slab sat at the foot of every tile and read as the loudest
   thing on the page — twelve of them in a grid, each shouting over the
   photograph above it. It is an outline that fills on hover instead: quiet at
   rest, unmistakably a control, and full width so it anchors the card rather
   than floating at one corner of it. Specificity here is (0,4,2), above the
   (0,2,1) of the filled `.woocommerce a.button` rule further up. */
.woocommerce ul.products li.product .button {
  display: flex;
  gap: 9px;
  /* `auto`, not `calc(100% - 24px)`: a block-level flex box already fills what
     its margins leave it, and the related-products strip overrides those
     margins to 8px. A width computed from this rule's own 12px would have left
     that strip's button 26px from one edge of the card and 18px from the
     other. */
  width: auto;
  min-height: 46px;
  margin: 16px 12px 0;
  padding: 11px 18px;
  border: 1px solid rgba(23,40,66,.17);
  background: transparent;
  color: var(--ink);
  font-size: .78rem;
  font-weight: 700;
  transition: color 200ms ease, border-color 200ms ease, background 200ms ease, transform 200ms ease;
}
/* The arrow points the way the language runs. It is a pseudo-element so it
   never reaches the accessible name, which already says what the button does. */
.woocommerce ul.products li.product .button::after { content: "←"; font-size: .92rem; line-height: 1; transition: transform 240ms cubic-bezier(.22,1,.36,1); }
.woocommerce ul.products li.product .button.loading::after,
.woocommerce ul.products li.product .button.added::after { content: none; }
.woocommerce ul.products li.product .added_to_cart { display: block; margin: 9px 12px 0; color: var(--rose); text-align: center; font-size: .72rem; font-weight: 700; }
.woocommerce span.onsale { top: 20px; right: 20px; left: auto; min-width: 0; min-height: 0; padding: 7px 12px; border-radius: 99px; background: var(--rose); font-size: .68rem; line-height: 1.4; }
.woocommerce div.product { display: flow-root; }
.woocommerce div.product div.images img { border-radius: 220px 220px 12px 12px; }
/* Gallery arch, hover-proof. The rule above puts the 220px corner on the <img>
   only. jquery.zoom then injects an absolutely positioned img.zoomImg — about
   1254px inside a 566px frame — into .woocommerce-product-gallery__image, where
   the same literal 220px is proportionally negligible, and the photo's white
   studio ground paints a square over the arch because that frame carries
   overflow:hidden but border-radius:0. Clip on the frames instead and let
   overflow do the shaping. Identical 220px/12px values, so the resting
   silhouette is unchanged. Deliberately not on __wrapper — flexslider turns
   that node into a translated multi-slide strip. div.images itself is left
   unclipped on purpose: the magnifier is prepended there by initPhotoswipe and
   a 220px arch has no pixels in the corner it sits in. */
.woocommerce div.product div.images .woocommerce-product-gallery__image,
.woocommerce div.product div.images .woocommerce-product-gallery__image--placeholder,
.woocommerce div.product div.images .flex-viewport { overflow: hidden; border-radius: 220px 220px 12px 12px; }
.woocommerce div.product div.images .woocommerce-product-gallery__image > a { display: block; overflow: hidden; border-radius: inherit; }
.woocommerce div.product div.images img.zoomImg { border-radius: 0; }
/* The clip above sits on the lightbox anchor's PARENT, and an ancestor's
   overflow:hidden clips a descendant's outline. The global
   `:focus-visible { outline-offset: 5px }` at line 191 would therefore be cut
   away entirely and keyboard users would get no ring at all on the gallery
   link — today they still get one on touch/no-zoom devices, where jquery.zoom
   never sets overflow inline. Draw the ring inside the box instead; it follows
   the arch the anchor inherits above. */
.woocommerce div.product div.images .woocommerce-product-gallery__image > a:focus-visible { outline-offset: -6px; }
.woocommerce div.product .product_title { font-family: var(--display); font-size: clamp(2.5rem, 4.2vw, 4.8rem); line-height: 1.25; }
.woocommerce div.product p.price,
.woocommerce div.product span.price { color: var(--rose); }
.woocommerce div.product form.cart .reset_variations { display: none !important; }
.woocommerce .quantity .qty { min-height: 48px; border: 1px solid var(--line); border-radius: 10px; font: inherit; }

/* The buy block ---------------------------------------------------------
   Weight, price and the add-to-cart row were three unrelated controls stacked
   loosely down the column: a bare select, a bare number box with its browser
   spinners, and WooCommerce's own purple `.button.alt`, which its stylesheet
   colours at a specificity the theme's element rules never reached. They are
   one panel now, and the button finally wears the shop's ink. */
.single-product form.cart { padding: 22px; border: 1px solid rgba(23,40,66,.09); border-radius: 22px; background: rgba(255,255,255,.55); box-shadow: 0 16px 40px rgba(37,52,67,.05); }
.single-product .variations { width: 100%; margin: 0 0 4px; }
.single-product .variations th.label { padding-bottom: 9px; }
.single-product .variations th.label label { margin: 0; color: var(--ink-soft); font-size: .68rem; font-weight: 700; }
.single-product .variations td.value { position: relative; padding-bottom: 0; }
.single-product .variations select { width: 100%; min-height: 54px; padding-inline: 18px 44px; border: 1px solid rgba(23,40,66,.16); border-radius: 14px; background-color: #fff; color: var(--ink); font: 700 .82rem var(--sans); cursor: pointer; transition: border-color 200ms ease, box-shadow 200ms ease; }
.single-product .variations select:hover { border-color: rgba(23,40,66,.3); }
.single-product .variations select:focus { border-color: var(--rose); outline: 0; box-shadow: 0 0 0 3px rgba(164,58,80,.1); }
/* No chevron of our own. WooCommerce already sets `appearance: none` on this
   exact select and paints its own SVG arrow 12px from the left, so drawing a
   second one only put a mark on the opposite side — which in RTL is where the
   text begins. The padding below just keeps the label clear of it. */
.single-product .woocommerce-variation-price { margin: 18px 0 2px; }
/* WooCommerce sizes this at `.woocommerce:where(…) div.product span.price`.
   `:where()` contributes nothing itself, but the rest still counts (0,3,2) —
   more than a three-class selector — so the name has to be spelled out this
   far to reach the font size. The family below was landing all along, which is
   what a half-styled price looks like. */
.woocommerce div.product .woocommerce-variation-price span.price { display: block; color: var(--rose); font-family: var(--display); font-size: 1.75rem; font-weight: 700; line-height: 1.3; }
.single-product .woocommerce-variation-availability p { margin: 6px 0 0; color: var(--ink-soft); font-size: .68rem; }
.single-product .woocommerce-variation-add-to-cart { gap: 12px; margin-top: 16px; }
/* A stepper, matching the cart's. The number box keeps its own control for
   keyboards and screen readers; the two buttons are added by theme.js. */
.single-product form.cart div.quantity { display: flex; align-items: center; overflow: hidden; border: 1px solid rgba(23,40,66,.16); border-radius: 99px; background: #fff; }
.single-product form.cart div.quantity .qty { width: 46px; min-height: 52px; padding: 0; border: 0; border-radius: 0; background: transparent; font: 700 .84rem var(--sans); text-align: center; -moz-appearance: textfield; }
.single-product form.cart div.quantity .qty::-webkit-outer-spin-button,
.single-product form.cart div.quantity .qty::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }
.single-product form.cart div.quantity .qty:focus { outline: 0; box-shadow: none; }
.single-product form.cart div.quantity:focus-within { border-color: var(--rose); box-shadow: 0 0 0 3px rgba(164,58,80,.1); }
.single-product form.cart .qty-adjust { width: 38px; min-height: 52px; padding: 0; border: 0; background: transparent; color: var(--ink-soft); box-shadow: none; font-size: 1.05rem; line-height: 1; }
.single-product form.cart .qty-adjust:hover { background: var(--sage); color: var(--ink); }
/* WooCommerce's own `.button.alt` colours reach further than an element rule,
   so this names the button the way its stylesheet does. */
.woocommerce div.product form.cart .button,
.woocommerce div.product form.cart button.button.alt,
.woocommerce div.product form.cart button.button.alt:hover,
.woocommerce div.product form.cart .single_add_to_cart_button { flex: 1; min-height: 52px; padding-inline: 26px; border: 0; border-radius: 99px; background-color: var(--ink); color: #fff; font: 700 .8rem var(--sans); transition: background-color 220ms ease, transform 220ms ease, box-shadow 220ms ease; }
.woocommerce div.product form.cart button.button.alt:hover:not(.disabled) { background-color: var(--rose); transform: translateY(-1px); box-shadow: 0 12px 26px rgba(164,58,80,.22); }
.woocommerce div.product form.cart button.button.alt.disabled,
.woocommerce div.product form.cart button.button.alt:disabled { background-color: rgba(23,40,66,.3); box-shadow: none; cursor: not-allowed; }
/* Only ever drawn inside the buy bar, which only exists on a phone. Here the
   summary prints the price directly above this form. */
.buy-bar__price { display: none; }
.woocommerce-message,
.woocommerce-info,
.woocommerce-error { margin-bottom: 24px; padding: 16px 48px 16px 18px; border: 1px solid rgba(23,40,66,.1); border-top: 0; border-radius: 14px; background: rgba(255,255,255,.76); box-shadow: 0 12px 34px rgba(37,52,67,.055); color: var(--ink); font-size: .72rem; line-height: 1.9; }
.woocommerce-message { border-color: rgba(94,129,103,.22); background: rgba(232,241,233,.82); }
.woocommerce-info { border-color: rgba(76,113,137,.19); background: rgba(232,240,245,.82); }
.woocommerce-error { border-color: rgba(164,58,80,.2); background: rgba(249,235,237,.86); }
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { top: 16px; right: 18px; left: auto; color: var(--rose); }
.woocommerce-message a.button, .woocommerce-info a.button, .woocommerce-error a.button { float: left; min-height: 38px; padding: 8px 15px; font-size: .64rem; }
/* The waiting state ------------------------------------------------------
   WooCommerce answers every cart and checkout update by dropping jQuery
   blockUI over the panel: a flat grey sheet at 0.6 opacity with its own
   loader.svg spinning in the middle. Same job, in the shop's own colours — a
   thin rose ring on a paper-tinted veil.

   blockUI writes its background and opacity as inline style, so those two
   need !important to be reached at all. The ring is centred with inset:0 plus
   margin:auto rather than a translate, because transform is doing the
   spinning. */
.blockUI.blockOverlay { background-color: var(--paper) !important; opacity: .78 !important; backdrop-filter: blur(1.5px); }
.woocommerce .blockUI.blockOverlay::before,
.woocommerce .loader::before,
.woocommerce-page .blockUI.blockOverlay::before {
  top: 0; right: 0; bottom: 0; left: 0; width: 34px; height: 34px; margin: auto;
  border: 2px solid rgba(164,58,80,.16); border-top-color: var(--rose); border-radius: 50%;
  background: none; animation: atrang-spin 720ms linear infinite;
}
@keyframes atrang-spin { to { transform: rotate(360deg); } }
/* The same ring on a button that is mid-request, in place of the icon-font
   glyph WooCommerce would otherwise spin there. */
.woocommerce a.button.loading::after,
.woocommerce button.button.loading::after,
.woocommerce input.button.loading::after {
  width: 15px; height: 15px; margin: -8px 0 0; border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff; border-radius: 50%; background: none; content: "";
  animation: atrang-spin 720ms linear infinite;
}
.woocommerce a.button.loading, .woocommerce button.button.loading { opacity: 1; }
.woocommerce form .form-row.woocommerce-invalid label { color: #8d263d; }
.woocommerce form .form-row.woocommerce-invalid input.input-text, .woocommerce form .form-row.woocommerce-invalid select { border-color: #a43a50; box-shadow: 0 0 0 3px rgba(164,58,80,.09); }
.woocommerce table.shop_table { overflow: hidden; border-color: var(--line); border-radius: 16px; background: rgba(255,255,255,.45); }
.woocommerce form.checkout_coupon,
.woocommerce form.login,
.woocommerce form.register { border-color: var(--line); border-radius: 16px; background: rgba(255,255,255,.45); }

/* Product catalog ------------------------------------------------------ */
.shop-layout { display: grid; grid-template-columns: minmax(210px, 260px) minmax(0, 1fr); align-items: start; gap: clamp(32px, 5vw, 72px); }
.shop-main { min-width: 0; }
.shop-filters { position: sticky; top: 120px; max-height: calc(100vh - 148px); padding: 52px 22px 22px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; overflow-wrap: break-word; overflow-wrap: anywhere; border: 1px solid rgba(255,255,255,.75); border-radius: 130px 130px 16px 16px; background: rgba(255,255,255,.5); box-shadow: 0 18px 45px rgba(37,52,67,.06); }
/* The panel is a narrow column under a dome, and a column that narrow has no
   reading edge worth ranging to — its own width is the measure. Title and rows
   are centred on it. */
.shop-filters__header { position: relative; display: flex; align-items: center; justify-content: center; padding: 0 9px 18px; border-bottom: 1px solid var(--line); }
.shop-filters__header h2 { margin: 0; font-family: var(--display); font-size: 1.45rem; }
/* Out of the flow, so the title is centred on the panel rather than on
   whatever is left of it once this control has taken its width. It only
   appears below 900px, where the panel becomes a drawer. */
.shop-filter-close { position: absolute; inset-inline-start: 0; top: 50%; display: none; width: 36px; min-height: 36px; padding: 0; font-size: 1.35rem; transform: translateY(-60%); }
.shop-filter-toggle { display: none; margin-bottom: 20px; }
.shop-filter-widget { padding: 20px 9px; border-bottom: 1px solid var(--line); }
.shop-filter-widget:last-child { padding-block-end: 4px; border-bottom: 0; }
.shop-filter-widget__title { margin: 0 0 10px; font-family: var(--display); font-size: 1.2rem; text-align: center; }
.shop-filter-widget ul { margin: 0; padding: 0; list-style: none; }
.shop-filter-widget li { margin: 0; color: var(--ink-soft); font-size: .78rem; text-align: center; }
/* The rule between rows ------------------------------------------------
   Not a hairline. Eleven solid rules down a narrow column read as a table,
   and the panel is a list of places to go. It is a row of beads that fades out
   at both ends with a single diamond at its centre — the same two marks the
   rest of the page is made of, the paper's own dot texture and the diamond
   this theme uses wherever one thing is set beside another.

   Both are pseudo-elements on the row below the join rather than a border,
   because a border cannot be dotted at this weight without turning into a
   dashed line, and cannot fade at all. None above the first row or below the
   last: the widget already closes with its own border. */
.shop-filter-widget > ul > li { position: relative; padding: 13px 0; }
.shop-filter-widget > ul > li + li::before {
  content: "";
  position: absolute;
  inset-inline: 4px;
  top: -1px;
  height: 2px;
  background-image: radial-gradient(circle at center, rgba(23,40,66,.34) .9px, transparent 1.1px);
  background-size: 7px 2px;
  background-repeat: repeat-x;
  /* Fades in at both ends and breaks in the middle, so the beads stop either
     side of the diamond instead of running behind it. The panel's ground is
     translucent over a page gradient, so there is no flat colour a knockout
     could be painted in. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 26%, #000 43%, transparent 45%, transparent 55%, #000 57%, #000 74%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 26%, #000 43%, transparent 45%, transparent 55%, #000 57%, #000 74%, transparent);
}
/* `left`, not `inset-inline-start`: the offset pairs with a translate, and a
   transform is physical in both directions. Under RTL the logical property
   would resolve to `right` and push the diamond off centre by its own width. */
.shop-filter-widget > ul > li + li::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 4px;
  height: 4px;
  background: var(--sage-deep);
  transform: translate(-50%, -50%) rotate(45deg);
}
/* The whole row is the target, not just the word in the middle of it. */
.shop-filter-widget a { display: block; text-decoration: none; transition: color 160ms ease; }
.shop-filter-widget .count { opacity: .62; font-size: .9em; font-variant-numeric: tabular-nums; }
/* Rows are centred, so a nested list cannot be marked by an indent and a rule
   down one side. It steps down in size instead. */
.shop-filter-widget .children { margin-block-start: 8px; padding-inline-start: 0; border-inline-start: 0; }
.shop-filter-widget .children li { padding: 7px 0; font-size: .72rem; }
/* The nested list gets the beads without the diamond — a child row is a
   smaller join than the one between two top-level categories. */
.shop-filter-widget .children li + li { position: relative; }
.shop-filter-widget .children li + li::before {
  content: "";
  position: absolute;
  inset-inline: 22px;
  top: -1px;
  height: 2px;
  background-image: radial-gradient(circle at center, rgba(23,40,66,.26) .8px, transparent 1px);
  background-size: 7px 2px;
  background-repeat: repeat-x;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 32%, #000 68%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 32%, #000 68%, transparent);
}
.shop-filter-widget .current-cat > a { color: var(--ink); font-weight: 700; }
/* «همهٔ محصولات» is a reset rather than an eleventh category, so it sits a
   shade firmer than the list under it even when it is not the current row. */
.shop-filter-widget .cat-item-all > a { font-weight: 600; }
/* The catalogue masthead ------------------------------------------------
   Breadcrumb and title centred as one block. Ranged against the reading edge
   they read as two things stacked in a corner, because the grid below them is
   symmetrical and they were not. The title is the only thing on the page that
   names the current category now that the shortcut row is gone — WooCommerce
   sets it from the term, so it changes on its own. */
.woocommerce-shell--catalog .woocommerce-breadcrumb,
.woocommerce-shell--catalog .woocommerce-products-header { text-align: center; }
.woocommerce-shell--catalog .term-description { margin-inline: auto; }

.woocommerce .woocommerce-products-header { margin-bottom: 26px; }
.woocommerce .woocommerce-products-header__title { font-family: var(--display); font-size: clamp(2.7rem, 4.6vw, 5.2rem); line-height: 1.25; }
.woocommerce .term-description { max-width: 660px; color: var(--ink-soft); line-height: 2; }

/* The toolbar over the grid --------------------------------------------
   `.shop-toolbar` is the theme's own wrapper (see atrang_shop_toolbar_open)
   around WooCommerce's count and sort form, which are otherwise two floated
   siblings with no shared baseline. */
.shop-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-bottom: 30px; padding-bottom: 17px; border-bottom: 1px solid var(--line); }
.woocommerce .shop-toolbar .woocommerce-result-count,
.woocommerce .shop-toolbar .woocommerce-ordering { float: none; margin: 0; }
.woocommerce .shop-toolbar .woocommerce-result-count { color: var(--ink-soft); font-size: .74rem; }
/* The numbers are wrapped in the translated sentence itself, so the figures
   carry the weight and the words around them stay quiet. */
.woocommerce .shop-toolbar .woocommerce-result-count b { color: var(--ink); font-weight: 800; }
/* WooCommerce leaves this select at the browser default, which on Windows is a
   grey system box beside a page of hairline pills. `appearance: none` drops the
   native arrow, so the chevron below replaces it — on the left, which in RTL is
   the end of the line, not the start of the words. */
.woocommerce .woocommerce-ordering select {
  appearance: none;
  -webkit-appearance: none;
  min-width: 0;
  min-height: 44px;
  padding-block: 0;
  padding-inline: 18px 42px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background-color: rgba(255,255,255,.66);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.6 6 6.4 11 1.6' fill='none' stroke='%23556274' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 17px center;
  background-size: 11px auto;
  color: var(--ink);
  font: 700 .76rem var(--sans);
  cursor: pointer;
  transition: border-color 200ms ease, background-color 200ms ease;
}
.woocommerce .woocommerce-ordering select:hover { border-color: rgba(23,40,66,.3); background-color: #fff; }

/* Pagination ------------------------------------------------------------
   WooCommerce's own sheet draws this as a bordered strip of square cells and
   reaches it at (0,2,4), so every rule here spells the name out far enough to
   win on class count rather than on load order. */
.woocommerce nav.woocommerce-pagination { margin-top: 48px; text-align: center; }
.woocommerce nav.woocommerce-pagination ul.page-numbers { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin: 0; padding: 0; border: 0; }
.woocommerce nav.woocommerce-pagination ul.page-numbers li { display: block; margin: 0; padding: 0; overflow: visible; border: 0; }
.woocommerce nav.woocommerce-pagination ul.page-numbers li .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: rgba(255,255,255,.55);
  color: var(--ink-soft);
  text-decoration: none;
  font-size: .8rem;
  font-weight: 700;
  line-height: 1;
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease, transform 180ms ease;
}
.woocommerce nav.woocommerce-pagination ul.page-numbers li a.page-numbers:hover { border-color: rgba(23,40,66,.34); background: #fff; color: var(--ink); }
.woocommerce nav.woocommerce-pagination ul.page-numbers li .page-numbers.current { border-color: var(--ink); background: var(--ink); color: #fff; }
/* The arrows are glyphs, not digits, so they keep the softer weight and a
   little more room. WooCommerce already points them the RTL way round. */
.woocommerce nav.woocommerce-pagination ul.page-numbers li .page-numbers.next,
.woocommerce nav.woocommerce-pagination ul.page-numbers li .page-numbers.prev { padding: 0 16px; font-size: 1rem; }
.woocommerce nav.woocommerce-pagination ul.page-numbers li .page-numbers.dots { border-color: transparent; background: none; min-width: 20px; padding: 0; }
.product-loop-category { display: block; padding: 0 12px; color: var(--rose); font-size: .65rem; font-weight: 700; }
.product-loop-category a { color: inherit; text-decoration: none; }

/* Individual product -------------------------------------------------- */
.single-product .woocommerce-shell { width: min(1180px, calc(100% - 48px)); }
/* `single-product` and `woocommerce` are BOTH body classes, and this theme swapped
   WooCommerce's `div.woocommerce` wrapper for `main.woocommerce-shell` (see
   inc/woocommerce.php). The old selectors put `.woocommerce` in the middle, between the
   body class and `div.product`, so they asked for a `.woocommerce` element *inside* the
   body. No such element exists on a product page, the six rules below never matched, and
   the layout silently fell back to WooCommerce's 48% float.
   Re-anchor on <body>. The extra type selector is deliberate: it makes
   `body.single-product div.product div.images` (0,3,3), one element above WooCommerce's
   own `.woocommerce div.product div.images` (0,3,2) in woocommerce-layout.css and
   woocommerce-layout-rtl.css, so this wins on specificity, not on sheet order. The
   `#content` arm at (1,3,3) cannot reach us: the wrapper is `main#primary`.
   `.woocommerce div.product { display: flow-root }` above stays as it is. At (0,2,1) it
   loses to the (0,2,2) grid rule here, and it is still the only thing containing the
   floats for a product rendered by the [product_page] shortcode, which really does sit
   inside a `div.woocommerce`.
   Column gap only, deliberately. `.woocommerce-tabs`, `.up-sells` and `.related` are
   direct children of div.product and already carry `margin-top: 70px` further down; a
   two-axis `gap` would put a 100px grid row gap on top of that margin (row gaps do not
   collapse with margins) and open ~170px of dead space under the summary. row-gap: 0
   keeps the vertical rhythm exactly as it renders today; the 900px block below sets a
   row gap for the single-column stack, where one is actually needed. */
body.single-product div.product { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr); column-gap: clamp(44px, 7vw, 100px); row-gap: 0; }
body.single-product div.product div.images,
body.single-product div.product div.summary { float: none; width: auto; margin: 0; }
body.single-product div.product div.summary { align-self: center; }
body.single-product div.product .woocommerce-product-details__short-description { color: var(--ink-soft); line-height: 2; }
body.single-product div.product form.cart { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 28px; }
/* form.cart only becomes a real flex container now that the rule above matches. That
   newly exposes three WooCommerce leftovers: its clearfix pseudo-elements turn into two
   phantom flex items that each collect a 10px gap, its physical float and margin on the
   quantity box are wrong in RTL, and the variable/grouped product tables would sit beside
   the add-to-cart block instead of above it. */
body.single-product div.product form.cart::before,
body.single-product div.product form.cart::after { display: none; }
body.single-product div.product form.cart div.quantity { float: none; margin: 0; }
body.single-product div.product form.cart > table,
body.single-product div.product form.cart > .single_variation_wrap { flex: 1 1 100%; }
.single-product .woocommerce-variation-add-to-cart { display: flex; align-items: center; gap: 10px; }
.single-product .variations { margin-bottom: 20px; }
.single-product .variations th,
.single-product .variations td { display: block; padding: 5px 0; text-align: right; }
.single-product .variations select { width: 100%; }
.product-assurance { display: grid; gap: 9px; margin: 28px 0 0; padding: 22px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); list-style: none; }
.product-assurance li { display: flex; gap: 10px; color: var(--ink-soft); font-size: .76rem; }
.product-assurance span { display: grid; place-items: center; width: 19px; height: 19px; flex: 0 0 19px; border-radius: 50%; background: var(--sage); color: var(--ink); font-size: .65rem; }
.product-telegram { display: inline-flex; align-items: center; gap: 12px; margin-top: 18px; padding-bottom: 5px; border-bottom: 1px solid currentColor; text-decoration: none; font-size: .76rem; font-weight: 700; }
.single-product p.stock.out-of-stock { display: none; }
.product-unavailable { display: grid; grid-template-columns: 45px 1fr; gap: 6px 13px; margin-top: 25px; padding: 18px; border: 1px solid rgba(164,58,80,.15); border-radius: 16px; background: rgba(249,235,237,.62); }
.product-unavailable > span { grid-row: 1 / span 2; display: grid; place-items: center; width: 45px; height: 45px; border-radius: 50%; background: rgba(255,255,255,.62); }
.product-unavailable svg { width: 25px; fill: none; stroke: var(--rose); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }
.product-unavailable svg .accent { stroke: var(--saffron); }
.product-unavailable strong { font-family: var(--display); font-size: 1.05rem; }
.product-unavailable p { margin: 2px 0 0; color: var(--ink-soft); font-size: .64rem; line-height: 1.8; }
.product-unavailable__actions { grid-column: 2; display: flex; flex-wrap: wrap; gap: 15px; margin-top: 8px; }
.product-unavailable__actions a { padding-bottom: 3px; border-bottom: 1px solid rgba(23,40,66,.28); text-decoration: none; font-size: .62rem; font-weight: 700; }

/* Empty, search and unavailable storefront states. */
.store-state { position: relative; display: flex; flex-direction: column; align-items: center; width: min(100%, 760px); min-height: 460px; margin: 25px auto 0; padding: clamp(45px, 7vw, 78px) 25px; overflow: hidden; border: 1px solid rgba(255,255,255,.85); border-radius: 35px; background: radial-gradient(circle at 50% 5%, rgba(255,255,255,.84), transparent 44%), rgba(248,247,242,.55); box-shadow: 0 24px 65px rgba(37,52,67,.07); text-align: center; }
.store-state::before, .store-state::after { content: ""; position: absolute; pointer-events: none; border: 1px solid rgba(23,40,66,.075); border-radius: 50%; }
.store-state::before { top: -120px; left: -80px; width: 280px; height: 280px; box-shadow: 0 0 0 40px rgba(219,231,238,.14); }
.store-state::after { right: -120px; bottom: -150px; width: 310px; height: 310px; box-shadow: 0 0 0 45px rgba(223,232,223,.15); }
.store-state > * { position: relative; z-index: 1; }
.store-state__art { display: grid; place-items: center; width: 92px; height: 92px; margin-bottom: 22px; border: 1px solid rgba(255,255,255,.85); border-radius: 50%; background: linear-gradient(145deg, var(--blue), var(--sage)); box-shadow: 0 16px 37px rgba(23,40,66,.09); }
.store-state__art svg { width: 48px; height: 48px; fill: none; stroke: var(--ink); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.25; }
.store-state__art .accent { stroke: var(--rose); }
.store-state > p { margin: 0 0 5px; color: var(--rose); font-size: .62rem; font-weight: 800; }
.store-state h2 { margin: 0; font-size: clamp(1.8rem, 3.2vw, 2.75rem); }
.store-state > span { max-width: 500px; margin-top: 9px; color: var(--ink-soft); font-size: .7rem; line-height: 2; }
.store-state > .button { margin-top: 25px; }
.store-state__actions { display: flex; align-items: center; justify-content: center; gap: 13px; width: 100%; margin-top: 25px; }
.store-state__actions .atrang-search-form { width: min(100%, 400px); }
.store-state--products { grid-column: 1 / -1; }
.search-results-page__header { display: grid; grid-template-columns: 1fr minmax(300px, 470px); align-items: end; gap: 30px; max-width: none; }
.search-results-page__header > p { grid-column: 1; }
.search-results-page__header h1 { grid-column: 1; }
.search-results-page__header > div { grid-column: 2; grid-row: 1 / span 2; }
.search-results-page > .store-state { margin-top: 0; }
.single-product .woocommerce-tabs,
.single-product .related,
.single-product .up-sells { grid-column: 1 / -1; margin-top: 70px; }
/* Product tabs. WooCommerce draws each tab as a bordered box with curved 5px
   "shoulder" pseudo-elements plus a full-width ::before rule line, from selectors
   as heavy as `.woocommerce div.product .woocommerce-tabs ul.tabs li.active::before`
   — (0,5,4). Recolouring them is not enough; they have to be removed. The body
   carries .atrang-has-woocommerce, .single-product and .woocommerce together, so
   compounding all three on the body reaches (0,6,4) and wins on specificity, not
   on load order. The strip is drawn in this theme's own language: hairline
   pills on off-white, solid --ink fill for the active one. */
.atrang-has-woocommerce.single-product.woocommerce div.product .woocommerce-tabs { clear: both; }
/* Centred, and on a beaded rule rather than a hairline. This shop has one tab,
   so the row was a single filled pill hard against the reading edge above a
   full-width line — it read as a button someone had left there, not as the
   marker for the section under it. Centred over the same rule the category
   panel uses, it reads as what it is. The row stays a flex row of pills rather
   than becoming a heading, because a second tab would make it a control again
   and this way nothing has to be rewritten when one arrives. */
.atrang-has-woocommerce.single-product.woocommerce div.product .woocommerce-tabs ul.tabs { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0; padding: 0; padding-block-end: 20px; overflow: visible; border-block-end: 0; list-style: none; }
.atrang-has-woocommerce.single-product.woocommerce div.product .woocommerce-tabs ul.tabs::before { content: none; }
/* WooCommerce's own ::after here is a float clear, and this row is flex with
   nothing floated in it — the parent carries `clear: both` besides. Taking the
   pseudo over for the rule costs nothing it was doing. */
.atrang-has-woocommerce.single-product.woocommerce div.product .woocommerce-tabs ul.tabs::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 2px;
  clear: none;
  background-image: radial-gradient(circle at center, rgba(23,40,66,.3) .9px, transparent 1.1px);
  background-size: 7px 2px;
  background-repeat: repeat-x;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 24%, #000 76%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 24%, #000 76%, transparent);
}
.atrang-has-woocommerce.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.atrang-has-woocommerce.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li::after { content: none; }
.atrang-has-woocommerce.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li { display: inline-flex; z-index: auto; float: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 99px; background: rgba(255,255,255,.55); box-shadow: none; transition: background-color 180ms ease, border-color 180ms ease; }
.atrang-has-woocommerce.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li a { display: block; padding-block: 11px; padding-inline: clamp(14px, 2.4vw, 22px); border-radius: inherit; color: var(--ink-soft); font-family: var(--sans); font-size: .76rem; font-weight: 600; line-height: 1.6; text-decoration: none; text-shadow: none; transition: color 180ms ease; }
.atrang-has-woocommerce.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li:not(.active):hover { border-color: rgba(23,40,66,.28); background: rgba(255,255,255,.92); }
.atrang-has-woocommerce.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li:not(.active) a:hover { color: var(--ink); text-decoration: none; }
.atrang-has-woocommerce.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li.active { border-color: var(--ink); background: var(--ink); box-shadow: 0 12px 26px rgba(23,40,66,.18); }
.atrang-has-woocommerce.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: #fff; font-weight: 800; }
/* Tighten the offset only. The outline itself keeps coming from the global
   :focus-visible rule, so the @media (forced-colors: active) override at the end
   of this file (3px solid Highlight) still reaches these links. */
.atrang-has-woocommerce.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li a:focus-visible { outline-offset: 3px; }
.atrang-has-woocommerce.single-product.woocommerce div.product .woocommerce-tabs .woocommerce-Tabs-panel,
.atrang-has-woocommerce.single-product.woocommerce div.product .woocommerce-tabs .panel { max-width: 820px; margin: 0; padding: 0; padding-block-start: 32px; color: var(--ink-soft); line-height: 2; }
.atrang-has-woocommerce.single-product.woocommerce div.product .woocommerce-tabs .woocommerce-Tabs-panel > *,
.atrang-has-woocommerce.single-product.woocommerce div.product .woocommerce-tabs .panel > * { max-width: none; margin-inline: 0; }
.atrang-has-woocommerce.single-product.woocommerce div.product .woocommerce-tabs .woocommerce-Tabs-panel > h2,
.atrang-has-woocommerce.single-product.woocommerce div.product .woocommerce-tabs .panel > h2 { margin-block: 0 16px; color: var(--ink); font-family: var(--display); font-size: 1.5rem; line-height: 1.6; }
/* Subordinate to the product title, not a peer of it. The old
   clamp(2.2rem, 3.5vw, 3.8rem) computed 50.4px at 1440px against a 60.5px
   .product_title -- a 0.83 ratio, so a secondary section shouted as loudly as
   the product the customer came for. 1.85rem is this theme's own size for a
   section head sitting under a big page H1 (.account-section-head h2); cf.
   .cart-collaterals h2 at 1.65rem and .shop-filters__header h2 at 1.45rem.
   Flat rather than a clamp on purpose: .product_title is vw-driven, so a fixed
   value holds the same subordination ratio at every width (0.49 at 1440px,
   0.385 at 1920px) and still reads clearly above the 1.35rem loop titles it
   heads once the cards stack. margin-bottom follows down to ~0.74em to match. */
.single-product .related > h2,
.single-product .up-sells > h2 { margin-bottom: 22px; font-family: var(--display); font-size: 1.85rem; }

/* Related and up-sell strip -----------------------------------------------
   The catalogue card language, one size down. WooCommerce prints the related
   list as `columns-4` with four products, but the shared grid at line 382
   forces three tracks, so the fourth product wrapped onto a second row and the
   strip grew taller than the product it belongs to. Four fixed tracks put the
   whole strip back on one row and shrink the card with it. The track count is
   hardcoded, NOT read from `columns-N`, so the product count is pinned in PHP
   (atrang_related_products_args) to keep the two from drifting apart. Scoped to
   `.single-product` so the /shop/ grid and its 375px cards are untouched.

   The arch rides on a custom property declared on the list and inherited by the
   card and the image, so the dome stays concentric (132 - 9px padding = 123 ~
   122, the same relation as the catalogue's 180 - 12 = 168 ~ 170). Where a
   track is narrower than twice the radius the browser scales every corner by
   one factor, so the shape is preserved rather than broken.

   `.button` needs its own min-height. The global `.button` rule at line 89
   floors every button at 48px, so the smaller padding on its own would leave
   the button exactly as tall as it was. */
.single-product .related ul.products,
.single-product .up-sells ul.products { --strip-arch: 132px; --strip-arch-img: 122px; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.single-product .related ul.products li.product,
.single-product .up-sells ul.products li.product { padding-block: 9px 18px; padding-inline: 9px; border-radius: var(--strip-arch) var(--strip-arch) 12px 12px; }
.single-product .related ul.products li.product a img,
.single-product .up-sells ul.products li.product a img { margin-block-end: 14px; border-radius: var(--strip-arch-img) var(--strip-arch-img) 8px 8px; }
.single-product .related ul.products li.product .product-loop-category,
.single-product .up-sells ul.products li.product .product-loop-category { padding-inline: 8px; font-size: .62rem; }
.single-product .related ul.products li.product .woocommerce-loop-product__title,
.single-product .up-sells ul.products li.product .woocommerce-loop-product__title { min-height: 3em; padding-inline: 8px; font-size: 1.05rem; line-height: 1.5; }
.single-product .related ul.products li.product .price,
.single-product .up-sells ul.products li.product .price { padding-inline: 8px; font-size: .76rem; }
.single-product .related ul.products li.product .button,
.single-product .up-sells ul.products li.product .button { min-height: 40px; margin-block-start: 12px; margin-inline: 8px; padding-block: 10px; padding-inline: 16px; font-size: .78rem; }

@media (max-width: 900px) {
  .admin-bar .site-header { top: 46px; }
  /* The menu button and the account/cart pair are two different kinds of
     control and were touching at exactly zero pixels, because a grid has no
     gap unless it is given one. The 16px here has to stay wider than the 11px
     inside .header-actions, or the three marks read as one row of three
     rather than a button beside a pair. */
  .site-header { grid-template-columns: 1fr auto auto; column-gap: 16px; }
  .menu-toggle { display: grid; gap: 4px; width: 42px; min-height: 42px; padding: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.55); }
  .menu-toggle > span:not(.screen-reader-text) { display: block; width: 18px; height: 1px; background: var(--ink); }
  .primary-navigation { position: fixed; inset: 68px 14px auto; display: block !important; padding: 20px; visibility: hidden; opacity: 0; transform: translateY(-10px); border: 1px solid var(--line); border-radius: 16px; background: rgba(248,247,242,.97); box-shadow: var(--shadow); transition: opacity 180ms ease, transform 180ms ease; }
  .primary-navigation.is-open { visibility: visible; opacity: 1; transform: translateY(0); }
  .primary-navigation .menu { align-items: stretch; flex-direction: column; gap: 0; }
  .primary-navigation .menu a { display: block; padding: 12px; }
  .header-actions { justify-self: auto; }
  /* The cart used to be hidden here, which left a phone with no way to reach
     it from any page but the one the customer happened to be on. It keeps its
     count and loses its word: «سبد» beside a number is two things to read in
     a 42px-tall bar, and the number is the one that changes. */
  .header-cart > span { display: none; }
  .header-cart b { min-width: 24px; height: 24px; font-size: .68rem; }
  /* Anchored to the viewport rather than to the slot. The slot sits at the far
     edge of a 375px screen, and a 320px panel hung off it has nowhere to go
     but off the other side. */
  .header-cart-dropdown { position: fixed; top: 64px; inset-inline: 14px; width: auto; max-width: none; margin-top: 0; }
  .atrang-cart-flash-host { top: 76px; inset-inline: 14px; }
  .admin-bar .atrang-cart-flash-host { top: 122px; }
  .atrang-cart-flash { max-width: none; }
  .menu-is-open { overflow: hidden; }
  .menu-is-open::after { content: ""; position: fixed; inset: 0; z-index: 90; background: rgba(23,40,66,.22); backdrop-filter: blur(2px); }
  .post-grid,
  .footer-widgets,
  .woocommerce ul.products { grid-template-columns: 1fr 1fr; }
  .single-product .related ul.products,
  .single-product .up-sells ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  /* It was the global button: a solid navy slab, full weight, hard against the
     reading edge — the loudest thing on a page whose masthead is centred and
     whose every other control is a hairline. It is the same quiet pill as the
     sort select now, with the same chevron treatment (a list mark rather than
     an arrow, because it opens a list), and centred with the masthead it sits
     under. `flex` with a fitted width, not `inline-flex`: auto margins only
     centre a block box. */
  .shop-filter-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-height: 44px;
    margin: 0 auto 22px;
    padding-inline: 20px 44px;
    border: 1px solid var(--line);
    border-radius: 99px;
    background-color: rgba(255,255,255,.66);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 12'%3E%3Cg fill='none' stroke='%23556274' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M1 2h12'/%3E%3Cpath d='M3 6h8'/%3E%3Cpath d='M5.5 10h3'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 19px center;
    background-size: 14px auto;
    color: var(--ink);
    font: 700 .76rem var(--sans);
  }
  .shop-layout { display: block; }
  .shop-filters { position: fixed; inset: 0 0 0 auto; z-index: 250; width: min(86vw, 360px); max-height: none; padding: 28px 22px; overflow-y: auto; visibility: hidden; opacity: 0; transform: translateX(100%); border-radius: 40px 0 0 40px; background: rgba(248,247,242,.98); transition: opacity 220ms ease, transform 280ms cubic-bezier(.22,1,.36,1); }
  .shop-filters.is-open { visibility: visible; opacity: 1; transform: translateX(0); }
  .shop-filter-close { display: grid; }
  .filters-are-open { overflow: hidden; }
  .filters-are-open::after { content: ""; position: fixed; inset: 0; z-index: 240; background: rgba(23,40,66,.28); backdrop-filter: blur(2px); }
  /* Single column. Restore a row gap here: the base rule sets row-gap: 0 so the revived
     grid does not double up with the 70px margin on the tabs/related sections, but a
     stacked gallery and summary do need breathing room between them. */
  body.single-product div.product { grid-template-columns: 1fr; row-gap: 34px; }
  body.single-product div.product div.summary { padding-inline: 8px; }
  .not-found { grid-template-columns: 1fr; text-align: center; }
  .not-found__art { min-height: 340px; }
  .not-found__copy { display: flex; flex-direction: column; align-items: center; }
  .not-found__copy h1 { max-width: 12ch; }
  .not-found__actions { align-items: center; }
  .search-results-page__header { grid-template-columns: 1fr; }
  .search-results-page__header > div { grid-column: 1; grid-row: auto; }
  .store-state__actions { flex-direction: column; }
}

@media (max-width: 560px) {
  .header-shop { display: none; }
  .header-account span { display: none; }
  .post-grid,
  .footer-widgets,
  .woocommerce ul.products { grid-template-columns: 1fr; }
  /* The toolbar's two halves stop being two halves: the count reads as a
     caption above a sort control that now has the full width to name itself,
     rather than both being squeezed onto one line. */
  .shop-toolbar { justify-content: stretch; }
  .woocommerce .shop-toolbar .woocommerce-ordering,
  .woocommerce .woocommerce-ordering select { width: 100%; }
  .single-product .related ul.products,
  .single-product .up-sells ul.products { --strip-arch: 118px; --strip-arch-img: 108px; grid-template-columns: 1fr 1fr; gap: 14px; }
  .single-product .related ul.products li.product .woocommerce-loop-product__title,
  .single-product .up-sells ul.products li.product .woocommerce-loop-product__title { font-size: .95rem; }
  /* Two cards to a 375px screen leaves this button about 121px wide, and
     «انتخاب گزینه ها» does not fit that with an arrow beside it — it was
     breaking onto a second line and making one card taller than its neighbour.
     The arrow goes: it is a flourish, and on a button this narrow it is a
     flourish costing the label the room it needs. `nowrap` then states the
     intent, so a longer label in some future language reports itself by
     overflowing rather than silently going back to two lines. */
  .single-product .related ul.products li.product .button,
  .single-product .up-sells ul.products li.product .button { padding-inline: 10px; font-size: .72rem; white-space: nowrap; }
  .single-product .related ul.products li.product .button::after,
  .single-product .up-sells ul.products li.product .button::after { content: none; }
  .woocommerce-shell { width: min(100% - 28px, 1240px); }
  .not-found__actions { flex-direction: column; }
  .not-found__art { min-height: 255px; }
  .not-found__art img { width: min(95%, 330px); }
  .not-found__art::before { box-shadow: 0 0 0 25px rgba(223,232,223,.31), 0 0 0 50px rgba(219,231,238,.16); }
  .store-state { min-height: 400px; padding-inline: 18px; border-radius: 24px; }
  .atrang-search-form { flex-direction: column; }
  .atrang-search-form button { width: 100%; }
  .product-unavailable { grid-template-columns: 38px 1fr; }
  .product-unavailable > span { width: 38px; height: 38px; }
  .product-unavailable__actions { grid-column: 1 / -1; }
}

/* Customer account ---------------------------------------------------- */
.account-page { position: relative; min-height: 100svh; padding: clamp(145px, 14vw, 190px) 0 clamp(100px, 11vw, 150px); overflow: hidden; background: linear-gradient(145deg, rgba(251,250,246,.82), rgba(239,244,239,.84) 50%, rgba(233,239,242,.9)); }
.account-orbit { position: absolute; z-index: 0; pointer-events: none; border: 1px solid rgba(23,40,66,.08); border-radius: 50%; }
.account-orbit--one { top: -27vw; left: -15vw; width: 62vw; aspect-ratio: 1; box-shadow: 0 0 0 7vw rgba(219,231,238,.16), 0 0 0 15vw rgba(255,255,255,.1); }
.account-orbit--two { right: -17vw; bottom: -24vw; width: 55vw; aspect-ratio: 1; box-shadow: 0 0 0 8vw rgba(223,232,223,.19); }
.account-shell { position: relative; z-index: 1; }
.account-heading { display: flex; flex-direction: column; align-items: flex-start; margin-bottom: 44px; }
.account-heading > p { margin: 0 0 5px; color: var(--rose); font-size: .67rem; font-weight: 800; }
.account-heading h1 { font-size: clamp(2.65rem, 4.5vw, 4.8rem); line-height: 1.3; }
.account-heading > span { max-width: 610px; margin-top: 10px; color: var(--ink-soft); font-size: .78rem; line-height: 2; }
.account-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); align-items: start; gap: clamp(28px, 5vw, 68px); }
.account-sidebar { position: sticky; top: 120px; overflow: hidden; border: 1px solid rgba(255,255,255,.82); border-radius: 116px 116px 22px 22px; background: rgba(255,255,255,.54); box-shadow: 0 20px 55px rgba(37,52,67,.07); backdrop-filter: blur(15px); }
.account-sidebar__person { display: flex; flex-direction: column; align-items: center; padding: 28px 18px 23px; text-align: center; }
.account-sidebar__person > span { display: grid; place-items: center; width: 74px; height: 74px; margin-bottom: 12px; border: 1px solid rgba(255,255,255,.85); border-radius: 50%; background: linear-gradient(145deg, var(--sage), var(--blue)); color: var(--rose); font-family: var(--display); font-size: 2rem; box-shadow: 0 12px 26px rgba(23,40,66,.08); }
.account-sidebar__person small { display: block; color: var(--ink-soft); font-size: .58rem; }
.account-sidebar__person strong { display: block; margin-top: 3px; font-family: var(--display); font-size: 1rem; }
.account-nav { display: grid; gap: 4px; padding: 0 12px 14px; }
.account-nav a { display: flex; align-items: center; gap: 11px; min-height: 46px; padding: 0 14px; border-radius: 11px; color: var(--ink-soft); text-decoration: none; font-size: .68rem; transition: background 180ms ease, color 180ms ease; }
.account-nav a:hover, .account-nav a.is-current { background: rgba(223,232,223,.72); color: var(--ink); }
.account-nav a.is-current { font-weight: 800; }
.account-nav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }
.account-nav__logout { margin-top: 9px; border-top: 1px solid var(--line); border-radius: 0 !important; color: var(--rose) !important; }

/* Ways to reach us, at the foot of the account page -------------------- */
.contact-panel { margin-top: 34px; padding: 30px clamp(20px, 3vw, 34px); border: 1px solid var(--line); border-radius: 26px; background: var(--paper-warm); }
.contact-panel__head { margin-bottom: 22px; }
.contact-panel__head h2 { margin: 0 0 6px; font-family: var(--display); font-size: 1.15rem; color: var(--ink); }
.contact-panel__head p { margin: 0; max-width: 46ch; color: var(--ink-soft); font-size: .72rem; line-height: 1.9; }
.contact-panel__links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.contact-panel__links a { display: flex; align-items: flex-start; gap: 12px; padding: 16px 17px; border: 1px solid transparent; border-radius: 17px; background: #fff; color: var(--ink); text-decoration: none; transition: border-color 180ms ease, transform 180ms ease; }
.contact-panel__links a:hover { border-color: var(--sage-deep); transform: translateY(-2px); }
.contact-panel__links svg { flex: none; width: 21px; height: 21px; margin-top: 2px; fill: none; stroke: var(--sage-deep); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.contact-panel__links span { display: grid; gap: 3px; min-width: 0; }
.contact-panel__links strong { font-size: .74rem; font-weight: 800; }
.contact-panel__links small { color: var(--ink-soft); font-size: .66rem; line-height: 1.75; }
.contact-panel__links bdi { color: var(--sage-deep); font-size: .64rem; letter-spacing: .01em; overflow-wrap: anywhere; }
.account-content { min-width: 0; }
.account-welcome { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; min-height: 148px; padding: 25px 30px; overflow: hidden; border: 1px solid rgba(255,255,255,.84); border-radius: 24px; background: linear-gradient(115deg, rgba(255,255,255,.69), rgba(223,232,223,.68)); box-shadow: 0 19px 48px rgba(37,52,67,.06); }
.account-welcome::after { content: ""; position: absolute; left: -65px; top: -80px; width: 210px; height: 210px; border: 1px solid rgba(23,40,66,.09); border-radius: 50%; box-shadow: 0 0 0 32px rgba(255,255,255,.16); }
.account-welcome > div { display: grid; justify-items: center; min-width: 92px; padding-inline-end: 25px; border-inline-end: 1px solid var(--line); }
.account-welcome__mark { color: var(--rose); font-family: var(--display); font-size: 2.85rem; line-height: 1; }
.account-welcome > div small { margin-top: 7px; color: var(--ink-soft); font-size: .61rem; }
.account-welcome > p { max-width: 370px; margin: 0; color: var(--ink-soft); font-size: .72rem; line-height: 2; }
.account-welcome .button { position: relative; z-index: 1; font-size: .69rem; }
.account-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin: 46px 0 20px; }
.account-section-head small { color: var(--rose); font-size: .61rem; font-weight: 800; }
.account-section-head h2 { margin: 3px 0 0; font-size: 1.85rem; }
.account-section-head > a { padding-bottom: 4px; border-bottom: 1px solid rgba(23,40,66,.3); text-decoration: none; font-size: .66rem; }
.order-card-list { display: grid; gap: 12px; }
.order-card { border: 1px solid rgba(255,255,255,.82); border-radius: 20px; background: rgba(255,255,255,.57); box-shadow: 0 13px 35px rgba(37,52,67,.045); backdrop-filter: blur(10px); transition: transform 200ms ease, box-shadow 200ms ease; }
.order-card:hover { transform: translateY(-2px); box-shadow: 0 20px 45px rgba(37,52,67,.075); }
.order-card__meta { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; border-bottom: 1px solid rgba(23,40,66,.08); }
.order-card__meta > small { color: var(--ink-soft); font-size: .6rem; }
.order-status { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: 99px; background: rgba(219,231,238,.65); color: #3b5665; font-size: .61rem; font-weight: 700; }
.order-status i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px rgba(59,86,101,.1); }
.order-status--paid, .order-status--packing, .order-status--ready_to_ship { background: rgba(238,220,177,.48); color: #8b611c; }
.order-status--shipped, .order-status--delivered, .order-status--closed { background: rgba(223,232,223,.8); color: #47644e; }
.order-status--cancelled, .order-status--payment_failed, .order-status--refunded { background: rgba(244,218,221,.66); color: #934052; }
/* A refused receipt is not a dead order — it is one waiting on the customer,
   so it takes the colour of something to do, not the colour of a failure. */
.order-status--receipt_rejected { background: rgba(238,220,177,.62); color: #8a5a1b; }
.order-card__body { display: grid; grid-template-columns: minmax(120px, .85fr) 1fr minmax(110px, .65fr) 38px; align-items: center; gap: 18px; padding: 17px 19px; }
.order-card__body > div:first-child small, .order-card__total small { display: block; margin-bottom: 4px; color: var(--ink-soft); font-size: .57rem; }
.order-card__body > div:first-child strong { font: 650 .74rem ui-monospace, "Cascadia Mono", monospace; }
.order-card__thumbs { display: flex; direction: ltr; justify-content: flex-start; padding-left: 18px; }
.order-card__thumbs img, .order-card__thumbs > span, .order-card__thumbs b { width: 47px; height: 47px; margin-left: -13px; border: 3px solid rgba(250,250,246,.95); border-radius: 50%; object-fit: cover; background: var(--paper-warm); }
.order-card__thumbs b { display: grid; place-items: center; color: var(--ink-soft); font-size: .61rem; }
.order-card__total strong { font-size: .7rem; white-space: nowrap; }
.order-card__open { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 50%; }
.order-card__open svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }
.account-empty { display: flex; flex-direction: column; align-items: center; min-height: 380px; padding: 65px 25px; border: 1px solid rgba(255,255,255,.8); border-radius: 28px; background: rgba(255,255,255,.5); text-align: center; }
.account-empty > svg { width: 55px; height: 55px; fill: none; stroke: var(--rose); stroke-width: 1.1; }
.account-empty h2 { margin: 22px 0 5px; font-size: 1.8rem; }
.account-empty p { margin: 0 0 25px; color: var(--ink-soft); font-size: .72rem; }
.account-pagination { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 27px; font-size: .66rem; }
.account-pagination a { padding: 8px 14px; border: 1px solid var(--line); border-radius: 99px; text-decoration: none; }
.account-pagination span { color: var(--ink-soft); }
.order-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 25px; padding: 27px 31px; border: 1px solid rgba(255,255,255,.84); border-radius: 24px; background: rgba(255,255,255,.58); }
.order-detail-head small { color: var(--ink-soft); font-size: .58rem; }
.order-detail-head h2 { margin: 3px 0 0; font: 700 clamp(1.35rem, 2.3vw, 1.9rem) ui-monospace, "Cascadia Mono", monospace; }
.order-detail-head p { margin: 7px 0 0; color: var(--ink-soft); font-size: .62rem; }
.order-exception { margin: 14px 0 0; padding: 15px 18px; border: 1px solid rgba(164,58,80,.14); border-radius: 12px; background: rgba(244,218,221,.46); color: #7f3444; font-size: .68rem; line-height: 1.9; }
.order-timeline { display: grid; grid-template-columns: repeat(5, 1fr); margin: 28px 0 35px; padding: 27px 23px 23px; border: 1px solid rgba(255,255,255,.8); border-radius: 21px; background: rgba(248,247,242,.47); }
.order-timeline__step { position: relative; display: grid; justify-items: center; text-align: center; color: #9aa1a9; }
.order-timeline__step:not(:last-child)::after { content: ""; position: absolute; top: 14px; left: calc(-50% + 15px); width: calc(100% - 30px); height: 1px; background: rgba(23,40,66,.13); }
.order-timeline__step i { position: relative; z-index: 2; display: grid; place-items: center; width: 29px; height: 29px; border: 1px solid rgba(23,40,66,.16); border-radius: 50%; background: var(--paper); font-style: normal; font-size: .61rem; }
.order-timeline__step strong { margin-top: 9px; font-size: .63rem; }
.order-timeline__step small { min-height: 1em; margin-top: 3px; font-size: .5rem; }
.order-timeline__step.is-done, .order-timeline__step.is-current { color: #4c6955; }
.order-timeline__step.is-done i { border-color: var(--sage-deep); background: var(--sage); }
.order-timeline__step.is-done::after { background: var(--sage-deep); }
.order-timeline__step.is-current i { border-color: var(--ink); background: var(--ink); color: #fff; box-shadow: 0 0 0 5px rgba(23,40,66,.08); }
.order-detail-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(250px, .7fr); align-items: start; gap: 22px; }
.account-payment-panel { display: grid; gap: 18px; margin-bottom: 30px; }
.account-payment-panel .atrang-payment-card, .account-payment-panel .atrang-receipt-card { background: rgba(255,255,255,.57); }
.order-lines, .tracking-card, .order-address { border: 1px solid rgba(255,255,255,.84); border-radius: 22px; background: rgba(255,255,255,.56); box-shadow: 0 17px 45px rgba(37,52,67,.055); }
.order-lines { padding: 1px 25px 0; }
.order-lines .account-section-head { margin: 24px 0 10px; }
.order-line { display: grid; grid-template-columns: 62px 1fr auto; align-items: center; gap: 15px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.order-line__image { overflow: hidden; border-radius: 50% 50% 9px 9px; }
.order-line__image img, .order-line__image > span { width: 62px; height: 68px; object-fit: cover; background: var(--paper-warm); }
.order-line h3 { margin: 0; font-size: 1rem; }
.order-line small { color: var(--ink-soft); font-size: .58rem; }
.order-line > strong { font-size: .65rem; white-space: nowrap; }
.order-lines > footer { display: flex; align-items: center; justify-content: space-between; padding: 22px 0 24px; font-size: .7rem; }
.order-lines > footer strong { color: var(--rose); font-size: .82rem; }
.order-detail-side { display: grid; gap: 18px; }
.tracking-card, .order-address { padding: 24px; }
.tracking-card { position: relative; overflow: hidden; background: linear-gradient(145deg, rgba(219,231,238,.64), rgba(255,255,255,.62)); }
.tracking-card.has-tracking { background: linear-gradient(145deg, rgba(223,232,223,.82), rgba(255,255,255,.66)); }
.tracking-card__icon { position: absolute; top: 19px; left: 20px; display: grid; place-items: center; width: 43px; height: 43px; border-radius: 50%; background: rgba(255,255,255,.57); }
.tracking-card__icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.35; }
.tracking-card > small, .order-address > small { color: var(--rose); font-size: .58rem; font-weight: 800; }
.tracking-card h3, .order-address h3 { margin: 8px 0 4px; font-size: 1.25rem; }
.tracking-card .atrang-copy.tracking-card__code { width: 100%; margin: 16px 0 12px; padding: 11px 0; border-top: 1px solid rgba(23,40,66,.14); border-bottom-color: rgba(23,40,66,.14); color: var(--ink); font: 650 .76rem ui-monospace, "Cascadia Mono", monospace; }
.tracking-card__code svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.tracking-card > a { display: inline-flex; gap: 7px; padding-bottom: 3px; border-bottom: 1px solid rgba(23,40,66,.28); text-decoration: none; font-size: .64rem; font-weight: 700; }
.tracking-card p, .order-address p { margin: 12px 0 0; color: var(--ink-soft); font-size: .61rem; line-height: 1.9; }
.order-address h3 { padding-left: 10px; }
.order-address address { font-style: normal; }
.order-address > span { display: block; margin-top: 10px; color: var(--ink-soft); font-size: .65rem; text-align: right; }

/* Native Woo profile/address forms, visually absorbed into the account. */
.account-content .woocommerce-EditAccountForm,
.account-content .woocommerce-address-fields,
.account-content .woocommerce-Addresses { padding: 26px; border: 1px solid rgba(255,255,255,.84); border-radius: 23px; background: rgba(255,255,255,.56); }
.account-content .woocommerce-Addresses { display: grid; gap: 18px; }
.account-content .woocommerce-Address { float: none; width: auto; padding: 20px; border: 1px solid var(--line); border-radius: 15px; }
.account-content .woocommerce-Address-title { display: flex; align-items: center; justify-content: space-between; }
.account-content .woocommerce-Address-title h3 { float: none; margin: 0; }
.account-content .woocommerce-Address-title a { float: none; font-size: .65rem; }
.account-content .form-row { float: none; width: 100%; margin: 0 0 15px; }
.account-content .form-row label { display: block; margin: 0 3px 6px; color: var(--ink-soft); font-size: .64rem; }
.account-content input.input-text, .account-content select { width: 100%; min-height: 49px; padding: 9px 13px; border: 1px solid rgba(23,40,66,.14); border-radius: 12px; background: rgba(255,255,255,.72); box-shadow: none; }
.account-content fieldset { margin: 25px 0; padding: 20px; border: 1px solid var(--line); border-radius: 15px; }
.account-content legend { padding-inline: 8px; font-family: var(--display); font-size: 1.1rem; }
.account-content button.button { min-height: 49px; padding: 0 23px; border: 0; border-radius: 99px; background: var(--ink); color: #fff; font-family: var(--sans); }

/* Signed-out account and private order lookup. */
.account-heading--guest { align-items: center; margin-bottom: 53px; text-align: center; }
.guest-account-grid { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(320px, .94fr); align-items: start; gap: clamp(24px, 4vw, 48px); }
.guest-tracking, .account-auth { padding: clamp(25px, 4vw, 42px); border: 1px solid rgba(255,255,255,.84); border-radius: 28px; background: rgba(255,255,255,.56); box-shadow: 0 22px 60px rgba(37,52,67,.07); backdrop-filter: blur(14px); }
.guest-tracking__head { display: flex; align-items: center; gap: 14px; margin-bottom: 27px; }
.guest-tracking__head > svg { width: 42px; height: 42px; padding: 9px; border-radius: 50%; background: var(--sage); fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.25; }
.guest-tracking__head small, .account-auth__intro small { color: var(--rose); font-size: .59rem; font-weight: 800; }
.guest-tracking__head h2, .account-auth__intro h2 { margin: 1px 0 0; font-size: 1.65rem; }
.guest-tracking__form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.guest-tracking__form label span { display: block; margin: 0 3px 7px; color: var(--ink-soft); font-size: .61rem; }
.guest-tracking__form input { width: 100%; min-height: 50px; padding: 10px 13px; border: 1px solid rgba(23,40,66,.14); border-radius: 12px; background: rgba(255,255,255,.72); font: .72rem var(--sans); }
.guest-tracking__form button { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 51px; border: 0; border-radius: 99px; background: var(--ink); color: #fff; font: 700 .7rem var(--sans); }
.guest-tracking__error { margin: 15px 0 0; padding: 11px 13px; border-radius: 10px; background: rgba(244,218,221,.57); color: #803649; font-size: .64rem; }
.guest-tracking__result { display: grid; gap: 18px; margin-top: 25px; padding-top: 24px; border-top: 1px solid var(--line); }
.guest-tracking__result > div:first-child { display: flex; align-items: center; justify-content: space-between; }
.guest-tracking__result > div:first-child small { color: var(--ink-soft); font-size: .6rem; }
.guest-tracking__result > div:first-child strong { font-family: var(--display); }
.guest-tracking__result .order-timeline { margin: 0; padding-inline: 10px; }
.guest-tracking__result .order-timeline__step small { display: none; }
.guest-tracking__result .tracking-card { box-shadow: none; }
.account-auth__intro { margin-bottom: 22px; }
.account-auth__intro p { margin: 6px 0 0; color: var(--ink-soft); font-size: .66rem; line-height: 1.9; }
.account-auth .woocommerce h2 { display: none; }
.account-auth .woocommerce-form-login, .account-auth .woocommerce-form-register, .account-auth .lost_reset_password { margin: 0; padding: 0; border: 0; background: transparent; }
.account-auth .u-columns { display: grid; gap: 25px; }
.account-auth .u-column1, .account-auth .u-column2 { float: none; width: auto; }
.account-auth .u-column2 { padding-top: 24px; border-top: 1px solid var(--line); }
.account-auth .form-row { float: none; width: 100%; margin: 0 0 14px; }
.account-auth .form-row label { display: block; margin: 0 3px 6px; color: var(--ink-soft); font-size: .62rem; }
.account-auth input.input-text { width: 100%; min-height: 49px; padding: 10px 13px; border: 1px solid rgba(23,40,66,.14); border-radius: 12px; background: rgba(255,255,255,.72); }
.account-auth button.button { min-height: 48px; padding: 0 24px; border: 0; border-radius: 99px; background: var(--ink); color: #fff; font-family: var(--sans); }
.account-auth .woocommerce-LostPassword { margin: 11px 0 0; font-size: .61rem; }
.account-auth .woocommerce-privacy-policy-text { color: var(--ink-soft); font-size: .58rem; line-height: 1.8; }

@media (max-width: 900px) {
  .account-page { padding-top: 115px; }
  .account-layout { grid-template-columns: 1fr; }
  .account-sidebar { position: static; border-radius: 19px; }
  .account-sidebar__person { flex-direction: row; padding: 15px 18px; text-align: right; }
  .account-sidebar__person > span { width: 48px; height: 48px; margin: 0 0 0 11px; font-size: 1.4rem; }
  .account-nav { grid-template-columns: repeat(5, 1fr); gap: 4px; padding: 8px; border-top: 1px solid var(--line); }
  .account-nav a { justify-content: center; min-height: 50px; padding: 5px; }
  .account-nav a span { display: none; }
  .account-nav__logout { margin: 0; border: 0; border-radius: 11px !important; }
  .guest-account-grid { grid-template-columns: 1fr; }
  /* Stacked, not squeezed: the help line under each name is the part that
     makes these three distinguishable, and it is the first thing to become
     unreadable in a third of a phone's width. */
  .contact-panel__links { grid-template-columns: 1fr; }
}

@media (max-width: 670px) {
  .account-page { padding-bottom: 80px; }
  .account-heading { margin-bottom: 30px; }
  .account-welcome { grid-template-columns: auto 1fr; padding: 21px; }
  .account-welcome > p { display: none; }
  .account-welcome .button { justify-self: end; padding-inline: 16px; }
  .order-card__body { grid-template-columns: 1fr auto 36px; gap: 11px; }
  .order-card__thumbs { display: none; }
  .order-card__total { text-align: left; }
  .order-detail-head { align-items: flex-start; flex-direction: column; padding: 22px; }
  .order-timeline { grid-template-columns: 1fr; gap: 0; padding: 10px 18px; }
  .order-timeline__step { grid-template-columns: 32px 1fr auto; align-items: center; justify-items: start; min-height: 53px; text-align: right; }
  .order-timeline__step:not(:last-child)::after { top: 41px; right: 14px; left: auto; width: 1px; height: 28px; }
  .order-timeline__step i { grid-row: 1; width: 29px; }
  .order-timeline__step strong { grid-row: 1; margin: 0 9px 0 0; }
  .order-timeline__step small { grid-row: 1; margin: 0; }
  .order-detail-grid { grid-template-columns: 1fr; }
  .guest-tracking, .account-auth { padding: 23px 18px; border-radius: 21px; }
  .guest-tracking__form { grid-template-columns: 1fr; }
  .guest-tracking__form button { grid-column: 1; }
  .guest-tracking__result .order-timeline { padding-inline: 18px; }
}

@media (max-width: 430px) {
  .account-welcome > div { min-width: 66px; padding-inline-end: 15px; }
  .account-welcome__mark { font-size: 2.2rem; }
  .account-welcome .button span { display: none; }
  .order-card__meta { padding-inline: 13px; }
  .order-card__body { padding-inline: 14px; }
  .order-card__total small { display: none; }
  .order-line { grid-template-columns: 52px 1fr; }
  .order-line__image img, .order-line__image > span { width: 52px; height: 60px; }
  .order-line > strong { grid-column: 2; }
}

/* Purchase flow ------------------------------------------------------- */
.purchase-flow-body {
  min-height: 100svh;
  background:
    radial-gradient(circle at 90% 5%, rgba(223,232,223,.9), transparent 28rem),
    radial-gradient(circle at 8% 80%, rgba(219,231,238,.75), transparent 30rem),
    linear-gradient(145deg, #fbfaf6, #f1f4ef 58%, #eef2f3);
}
.purchase-header {
  position: relative;
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 92px;
  padding-inline: clamp(20px, 5vw, 72px);
  border-bottom: 1px solid rgba(255,255,255,.72);
  background: rgba(248,247,242,.58);
  backdrop-filter: blur(18px);
}
.purchase-logo { justify-self: center; display: inline-flex; }
.purchase-logo img { width: auto; height: 72px; }
.purchase-header__back,
.purchase-header__secure { display: inline-flex; align-items: center; gap: 10px; font-size: .72rem; }
.purchase-header__back { justify-self: start; text-decoration: none; }
.purchase-header__back span { font-size: 1rem; transition: transform 180ms ease; }
.purchase-header__back:hover span { transform: translateX(4px); }
.purchase-header__secure { justify-self: end; color: var(--ink-soft); }
.purchase-header__secure i { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; background: var(--sage); color: var(--ink); font-style: normal; }
.purchase-flow { width: min(1160px, calc(100% - 48px)); padding-block: clamp(48px, 7vw, 90px) 110px; }
.purchase-steps { display: grid; grid-template-columns: auto minmax(24px, 100px) auto minmax(24px, 100px) auto; align-items: center; justify-content: center; margin-bottom: clamp(45px, 6vw, 74px); color: #8a929c; }
.purchase-steps span { display: flex; align-items: center; gap: 9px; font-size: .68rem; white-space: nowrap; }
.purchase-steps b { display: grid; place-items: center; width: 29px; height: 29px; border: 1px solid rgba(23,40,66,.18); border-radius: 50%; background: rgba(255,255,255,.42); font-size: .67rem; }
.purchase-steps i { height: 1px; margin-inline: 10px; background: rgba(23,40,66,.14); }
.purchase-steps .is-current { color: var(--ink); font-weight: 700; }
.purchase-steps .is-current b { border-color: var(--ink); background: var(--ink); color: #fff; }
.purchase-steps .is-complete { color: #46614f; }
.purchase-steps .is-complete b { border-color: var(--sage-deep); background: var(--sage); }
.purchase-title { margin-bottom: 42px; text-align: center; }
.purchase-title > p { margin: 0 0 7px; color: var(--rose); font-size: .68rem; font-weight: 800; }
.purchase-title h1 { font-size: clamp(2.55rem, 4.2vw, 4.5rem); line-height: 1.25; }
.purchase-title > span { display: block; margin-top: 9px; color: var(--ink-soft); font-size: .76rem; }
.purchase-content > .woocommerce { max-width: none; }
.purchase-content .woocommerce-notices-wrapper { grid-column: 1 / -1; }
.purchase-content .woocommerce-message,
.purchase-content .woocommerce-info,
.purchase-content .woocommerce-error { margin: 0 0 24px; padding: 15px 48px 15px 18px; border: 1px solid rgba(164,58,80,.16); border-radius: 14px; background: rgba(255,255,255,.72); box-shadow: 0 10px 30px rgba(23,40,66,.04); }
.purchase-content .woocommerce-error::before,
.purchase-content .woocommerce-info::before,
.purchase-content .woocommerce-message::before { top: 15px; right: 18px; left: auto; color: var(--rose); }
.purchase-content .woocommerce a.button,
.purchase-content .woocommerce button.button,
.purchase-content .woocommerce input.button,
.purchase-content .wc-block-components-button {
  min-height: 50px;
  padding: 12px 23px;
  border: 0;
  border-radius: 99px;
  background: var(--ink);
  color: #fff;
  box-shadow: 0 12px 28px rgba(23,40,66,.13);
  font: 700 .76rem var(--sans);
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.purchase-content .woocommerce a.button:hover,
.purchase-content .woocommerce button.button:hover,
.purchase-content .woocommerce input.button:hover,
.purchase-content .wc-block-components-button:hover { transform: translateY(-1px); background: #203653; box-shadow: 0 16px 34px rgba(23,40,66,.18); color: #fff; }

/* Cart */
.purchase-flow--cart .woocommerce { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, .55fr); align-items: start; gap: clamp(28px, 5vw, 70px); }
.woocommerce-cart-form { padding: 12px 26px; border: 1px solid rgba(255,255,255,.82); border-radius: 28px; background: rgba(255,255,255,.58); box-shadow: 0 22px 60px rgba(37,52,67,.07); backdrop-filter: blur(12px); }
.purchase-content .woocommerce table.shop_table { margin: 0; overflow: visible; border: 0; border-collapse: collapse; border-radius: 0; background: transparent; }
.purchase-content .woocommerce table.shop_table th { padding: 13px 10px; border: 0; border-bottom: 1px solid var(--line); color: var(--ink-soft); font-size: .64rem; font-weight: 500; }
.purchase-content .woocommerce table.shop_table td { padding: 22px 10px; border: 0; border-bottom: 1px solid var(--line); }
.purchase-content .woocommerce table.shop_table tr:last-child td { border-bottom: 0; }
.woocommerce-cart-form__cart-item .product-thumbnail { width: 92px; }
/* `.purchase-content` and `td` are carried to outrank two unconditioned
   WooCommerce rules that both target the cart thumbnail: `.woocommerce-cart
   table.cart img { width: 32px }` at (0,2,2) and `.woocommerce table.cart img
   { height: auto }` at (0,2,3). Against the shorter selector this used to have
   they won, and the photograph rendered as a 32px square of the 640px source.
   It went unnoticed on a phone only because the stock small-screen sheet was
   hiding the cell altogether. */
.purchase-content .woocommerce-cart-form__cart-item td.product-thumbnail img { width: 72px; height: 88px; object-fit: cover; border-radius: 38px 38px 9px 9px; }
.woocommerce-cart-form__cart-item .product-name a { font-family: var(--display); font-size: 1.18rem; font-weight: 700; text-decoration: none; }
.woocommerce-cart-form__cart-item .product-name .variation { margin-top: 7px; color: var(--ink-soft); font-size: .66rem; }
.woocommerce-cart-form__cart-item .product-name .variation dt,
.woocommerce-cart-form__cart-item .product-name .variation dd { float: none; display: inline; margin: 0; }
.woocommerce-cart-form__cart-item .product-price,
.woocommerce-cart-form__cart-item .product-subtotal { font-size: .73rem; white-space: nowrap; }
.woocommerce-cart-form__cart-item .product-remove a.remove { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 50%; color: var(--ink-soft) !important; font: 400 1rem var(--sans); }
.woocommerce-cart-form__cart-item .product-remove a.remove:hover { border-color: var(--rose); background: transparent; color: var(--rose) !important; }
.woocommerce-cart-form .quantity { display: inline-grid; grid-template-columns: 29px 38px 29px; align-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: 99px; background: rgba(255,255,255,.7); }
.woocommerce-cart-form .quantity .qty { width: 38px; min-height: 38px; padding: 0; border: 0; border-radius: 0; background: transparent; text-align: center; -moz-appearance: textfield; }
.woocommerce-cart-form .quantity .qty::-webkit-outer-spin-button,
.woocommerce-cart-form .quantity .qty::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }
.woocommerce-cart-form .qty-adjust { min-height: 38px; padding: 0; border: 0; background: transparent; color: var(--ink); box-shadow: none; font-size: 1rem; }
.woocommerce-cart-form .qty-adjust:hover { background: var(--sage); }
.woocommerce-cart-form td.actions { padding-top: 20px !important; }
.woocommerce-cart-form td.actions .coupon { display: flex; align-items: center; flex-wrap: wrap; gap: 15px; }
/* A 99px pill curves its own inline start away from the text, so the stock
   14px padding leaves the placeholder sitting on the curve.
   The selector carries `form` and `input` because the padding is a fight:
   WooCommerce's `.woocommerce-cart table.cart td.actions .coupon .input-text`
   is (0,5,2) and sets `padding: 6px 6px 5px`, which beat the shorter selector
   this rule used to have and left the field padded at 6px. */
.purchase-flow--cart form.woocommerce-cart-form td.actions .coupon input.input-text { flex: 0 0 auto; width: 150px !important; min-height: 46px; margin: 0 0 0 7px !important; padding-inline: 20px; border-radius: 99px; }
/* `.coupon-error-notice` is the one that actually shows up: WooCommerce 11
   renders an inline coupon failure as `<p class="coupon-error-notice">`, not as
   one of the three notice lists. It gets its own line below because WooCommerce
   ships `.woocommerce-cart table.cart td.actions .coupon .coupon-error-notice`
   at (0,5,2) — enough to hold `var(--wc-red)` against a shorter selector, so
   the colour needs `form`, `p` and the page class to be taken back. */
.woocommerce-cart-form td.actions .coupon .coupon-error-notice, .woocommerce-cart-form td.actions .coupon .woocommerce-error, .woocommerce-cart-form td.actions .coupon .woocommerce-message, .woocommerce-cart-form td.actions .coupon .woocommerce-info { flex: 0 0 100%; grid-column: 1 / -1; margin: 0; padding: 0; border: none; background: transparent; box-shadow: none; color: var(--rose); font-size: 0.75rem; text-align: right; }
.purchase-flow--cart form.woocommerce-cart-form td.actions .coupon p.coupon-error-notice { color: var(--rose); }
.woocommerce-cart-form td.actions .coupon .coupon-error-notice::before, .woocommerce-cart-form td.actions .coupon .woocommerce-error::before, .woocommerce-cart-form td.actions .coupon .woocommerce-message::before, .woocommerce-cart-form td.actions .coupon .woocommerce-info::before { display: none; }
/* The apply button is sized up front. WooCommerce swaps the cart fragment
   after every coupon attempt, and without a reserved width the Persian label
   wrapped to two lines, which grew the row and shifted the field. */
.woocommerce-cart-form td.actions .coupon .button { flex: 0 0 auto; white-space: nowrap; }
.woocommerce-cart-form [name="update_cart"] { float: left; background: transparent !important; color: var(--ink) !important; box-shadow: none !important; }
.woocommerce-cart-form [name="update_cart"]:disabled { opacity: .32; }
.purchase-flow--cart .cart-collaterals { position: sticky; top: 24px; width: 100%; padding: 30px; border: 1px solid rgba(255,255,255,.85); border-radius: 28px; background: rgba(248,247,242,.78); box-shadow: 0 22px 60px rgba(37,52,67,.08); backdrop-filter: blur(16px); }
.purchase-flow--cart .cart-collaterals .cart_totals { float: none; width: auto; }
.purchase-flow--cart .cart-collaterals h2 { margin: 0 0 20px; font-size: 1.65rem; }
.purchase-flow--cart .cart-collaterals table th,
.purchase-flow--cart .cart-collaterals table td { padding: 13px 0; font-size: .72rem; }
.purchase-flow--cart .cart-collaterals table td { text-align: left; }
.purchase-flow--cart .order-total strong { color: var(--rose); font-size: 1.05rem; }
.purchase-flow--cart .wc-proceed-to-checkout { padding: 22px 0 0; }
/* `.checkout-button` is a WooCommerce class, not `.button`, so it never
   inherited the flex gap that separates a label from its arrow. */
.purchase-flow--cart .wc-proceed-to-checkout a.checkout-button { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; margin: 0; padding: 16px 20px; font-size: .8rem; }
/* The totals table two lines above is already saying this. It is only drawn
   once the panel stops being a column and the button becomes a bottom bar. */
.cart-bar__total { display: none; }
.cart-assurance { display: grid; gap: 10px; margin: 17px 0 0; padding: 20px 0 0; border-top: 1px solid var(--line); list-style: none; }
.cart-assurance li { display: flex; align-items: center; gap: 9px; color: var(--ink-soft); font-size: .66rem; }
.cart-assurance span { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--sage); color: var(--ink); font-size: .58rem; }
.purchase-flow .woocommerce-cart-form__contents .cart-assurance { display: none; }
.purchase-flow--cart .woocommerce-empty-cart__message { padding: 60px 20px 25px; text-align: center; font-family: var(--display); font-size: 1.5rem; }
.purchase-flow--cart .woocommerce-empty-cart__message,
.purchase-flow--cart .return-to-shop { grid-column: 1 / -1; text-align: center; }
.purchase-flow--cart .store-state { grid-column: 1 / -1; }
.purchase-flow--cart .return-to-shop { display: none; }

/* Checkout */
.purchase-flow--checkout form.checkout { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(340px, .92fr); align-items: start; gap: 0 clamp(38px, 6vw, 82px); }
/* Every row is stated, because checkout.js PREPENDS the validation summary into
   this form. With only `.col2-set` placed explicitly, that new first child took
   a cell of its own and auto-placement pushed «سفارش شما» and the totals down a
   row each — the summary column dropped 700px the moment anyone submitted an
   incomplete form. Row 1 is the summary's, and stays 0px tall when there is no
   summary because the row gap here is 0. */
.purchase-flow--checkout form.checkout > .woocommerce-NoticeGroup { grid-column: 1 / -1; grid-row: 1; margin-bottom: 26px; }
.purchase-flow--checkout form.checkout > .col2-set { grid-column: 1; grid-row: 2 / span 2; padding: clamp(25px, 4vw, 42px); border: 1px solid rgba(255,255,255,.84); border-radius: 28px; background: rgba(255,255,255,.58); box-shadow: 0 22px 60px rgba(37,52,67,.07); backdrop-filter: blur(12px); }
.purchase-flow--checkout form.checkout > #order_review_heading { grid-column: 2; grid-row: 2; margin: 0; padding: 0 28px 18px; font-size: 1.65rem; }
.purchase-flow--checkout form.checkout > #order_review { grid-column: 2; grid-row: 3; padding: 26px 28px 30px; border: 1px solid rgba(255,255,255,.86); border-radius: 28px; background: rgba(248,247,242,.8); box-shadow: 0 22px 60px rgba(37,52,67,.08); backdrop-filter: blur(16px); }
/* Both of the next two rules exist to beat a WooCommerce percentage, and both
   had lost. `.rtl .woocommerce .col2-set .col-1` (0,4,0) kept the float, and a
   floated `width: auto` box shrink-to-fits — the billing column came out 388px
   inside a 498px space. `.woocommerce form .form-row-first` (0,2,1) kept
   `width: 47%`, and inside a grid that percentage resolves against the TRACK,
   not the row: 47% of a 187px column is 88px, which is why «نام» and «کد پستی»
   were thumbnail-sized. Adding `form.checkout` buys one element each and puts
   both above what they override. */
.purchase-flow--checkout form.checkout .col2-set .col-1,
.purchase-flow--checkout form.checkout .col2-set .col-2 { float: none; width: auto; }
.purchase-flow--checkout .col2-set .col-2 { display: none; }
.purchase-flow--checkout #ship-to-different-address { display: none; }
.purchase-flow--checkout .woocommerce-billing-fields > h3 { margin: 0 0 27px; font-size: 1.65rem; }
.purchase-flow--checkout .woocommerce-billing-fields__field-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 17px 14px; }
.purchase-flow--checkout form.checkout .form-row { float: none; clear: none; width: auto; margin: 0; padding: 0; }
/* select2 writes the container width inline from the original select, which was
   88px too, so once the row is the right size the container has to follow it.
   Its `.selection` wrapper is also a plain inline span, so the container took
   the height of a line box (48px) while the control drawn inside was 52px and
   simply overflowed — the province and city sat 4px short of every text input
   beside them. Making that wrapper a block is what actually fixes it. */
.purchase-flow--checkout form.checkout .form-row .select2-container { width: 100% !important; min-height: 52px; height: auto; }
.purchase-flow--checkout form.checkout .form-row .select2-container > .selection { display: block; }
.purchase-flow--checkout .form-row-wide,
.purchase-flow--checkout #billing_phone_field,
.purchase-flow--checkout #billing_address_1_field,
.purchase-flow--checkout #billing_email_field { grid-column: 1 / -1; }
.checkout-telegram {
  grid-column: 1 / -1;
  margin-top: 8px;
  padding: 16px;
  border: 1px solid rgba(23,40,66,.1);
  border-radius: 17px;
  background: linear-gradient(135deg, rgba(219,231,238,.56), rgba(223,232,223,.62));
}
.checkout-telegram__toggle {
  display: grid;
  grid-template-columns: 22px 34px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  gap: 2px 10px;
  margin: 0;
  color: var(--ink);
  cursor: pointer;
}
.checkout-telegram__toggle input { grid-column: 1; grid-row: 1 / 3; width: 17px; height: 17px; margin: 0; accent-color: var(--ink); }
.checkout-telegram__toggle > span { grid-column: 2; grid-row: 1 / 3; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.72); color: var(--rose); }
.checkout-telegram__toggle b { grid-column: 3; grid-row: 1; font-size: .72rem; }
.checkout-telegram__toggle small { grid-column: 3; grid-row: 2; color: var(--ink-soft); font-size: .6rem; line-height: 1.7; }
.checkout-telegram__details { margin: 15px 66px 0 0; padding-top: 15px; border-top: 1px solid rgba(23,40,66,.1); }
.checkout-telegram__details[hidden] { display: none !important; }
.checkout-telegram__details label { display: block; margin-bottom: 7px; color: var(--ink-soft); font-size: .65rem; }
.checkout-telegram__details input { width: 100%; min-height: 50px; padding: 10px 15px; border: 1px solid rgba(23,40,66,.14); border-radius: 13px; background: rgba(255,255,255,.78); box-shadow: none; font: .74rem var(--sans); text-align: right; }
.checkout-telegram__details input:focus { border-color: rgba(164,58,80,.55); outline: 0; box-shadow: 0 0 0 3px rgba(164,58,80,.08); }
.checkout-telegram__details p { margin: 7px 2px 0; color: var(--ink-soft); font-size: .58rem; line-height: 1.8; }
.purchase-flow--checkout .form-row label { display: block; margin: 0 3px 7px; color: var(--ink-soft); font-size: .67rem; }
.purchase-flow--checkout .form-row label .required { color: var(--rose); }
.purchase-flow--checkout .form-row input.input-text,
.purchase-flow--checkout .form-row select { width: 100%; min-height: 52px; padding: 10px 14px; border: 1px solid rgba(23,40,66,.14); border-radius: 13px; background: rgba(255,255,255,.78); box-shadow: none; font-size: .76rem; }
.purchase-flow--checkout .form-row input.input-text:focus,
.purchase-flow--checkout .form-row select:focus { border-color: rgba(164,58,80,.55); outline: 0; box-shadow: 0 0 0 3px rgba(164,58,80,.08); }
.purchase-flow--checkout .select2-container .select2-selection--single { height: 52px; border-color: rgba(23,40,66,.14); border-radius: 13px; background: rgba(255,255,255,.78); }
.purchase-flow--checkout .select2-container--default .select2-selection--single .select2-selection__rendered { padding: 11px 14px; line-height: 30px; }
.purchase-flow--checkout .select2-container--default .select2-selection--single .select2-selection__arrow { height: 100%; top: 0; left: 9px; right: auto; display: flex; align-items: center; }
.purchase-flow--checkout #order_review table { margin-bottom: 20px; }
.purchase-flow--checkout #order_review table th,
.purchase-flow--checkout #order_review table td { padding: 13px 0; font-size: .7rem; }
.purchase-flow--checkout #order_review table td { text-align: left; }
.purchase-flow--checkout #order_review .product-name { padding-left: 18px; text-align: right; }
.purchase-flow--checkout #order_review .order-total strong { color: var(--rose); font-size: 1.02rem; }
/* Built by theme.js and only ever drawn once the checkout is a single column;
   on a desktop the summary sits in its own pane beside the fields and has
   nothing to make room for. */
.order-summary-toggle { display: none; }
.purchase-flow--checkout #payment { border-radius: 20px; background: rgba(219,231,238,.4); }
.purchase-flow--checkout #payment ul.payment_methods { padding: 15px; border: 0; }
.purchase-flow--checkout #payment ul.payment_methods li { padding: 13px 14px; border: 1px solid rgba(23,40,66,.1); border-radius: 14px; background: rgba(255,255,255,.68); }
.purchase-flow--checkout #payment ul.payment_methods li + li { margin-top: 8px; }
.purchase-flow--checkout #payment ul.payment_methods label { font-size: .76rem; font-weight: 700; }
.purchase-flow--checkout #payment div.payment_box { margin: 10px 0 0; padding: 0; background: transparent; color: var(--ink-soft); font-size: .67rem; line-height: 1.9; }
.purchase-flow--checkout #payment div.payment_box::before { display: none; }
.purchase-flow--checkout #payment .place-order { padding: 8px 15px 15px; }
.purchase-flow--checkout #place_order { float: none; width: 100%; min-height: 56px; font-size: .77rem; }
.purchase-flow--checkout .woocommerce-privacy-policy-text { color: var(--ink-soft); font-size: .61rem; line-height: 1.9; }

/* Confirmation and Atrang Core payment */
.purchase-flow--received { max-width: 920px; }
.purchase-flow--received .woocommerce-order { display: grid; gap: 24px; }
.purchase-flow--received .woocommerce-thankyou-order-received { margin: 0; padding: 24px; border: 1px solid rgba(94,129,103,.2); border-radius: 18px; background: rgba(223,232,223,.7); text-align: center; font-family: var(--display); font-size: 1.25rem; }
/* `order_details` is matched alongside `woocommerce-order-overview`, and both
   selectors are qualified with `.woocommerce`.

   The confirmation list carries both class names, but WooCommerce ships its
   own rules for `.woocommerce ul.order_details` — `float: right`, dashed
   left borders, `margin-left: 2em` and `padding-left: 2em` per item, plus a
   1.4em block `strong`. A single unqualified class could not outweigh those,
   so the floats survived inside the grid: items escaped their cells, overlapped
   each other and hung outside the rounded container, which is the torn strip of
   grey blocks and clipped text in the report.

   Every floated property is reset explicitly rather than relying on the grid to
   neutralise them, because the logical-property borders and paddings are what
   produced the ragged dashed seams between panels. */
.purchase-flow--received .woocommerce ul.order_details,
.purchase-flow--received ul.order_details,
.purchase-flow--received .woocommerce-order-overview {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 10px 20px;
  border: 1px solid rgba(23,40,66,.1);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(37,52,67,.04);
  list-style: none;
}
/* The clearfix pseudo-elements would each take a grid cell of their own. */
.purchase-flow--received .woocommerce ul.order_details::before,
.purchase-flow--received .woocommerce ul.order_details::after,
.purchase-flow--received ul.order_details::before,
.purchase-flow--received ul.order_details::after,
.purchase-flow--received .woocommerce-order-overview::before,
.purchase-flow--received .woocommerce-order-overview::after { display: none; }
.purchase-flow--received .woocommerce ul.order_details li,
.purchase-flow--received ul.order_details li,
.purchase-flow--received .woocommerce-order-overview li {
  float: none;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 12px 20px;
  border: 0;
  font-size: .61rem;
  line-height: 1.8;
  text-transform: none;
  overflow-wrap: anywhere;
  border-inline-end: 1px solid var(--line);
}
.purchase-flow--received .woocommerce ul.order_details li:last-child,
.purchase-flow--received ul.order_details li:last-child,
.purchase-flow--received .woocommerce-order-overview li:last-child {
  border-inline-end: 0;
}
.purchase-flow--received .woocommerce ul.order_details li strong,
.purchase-flow--received ul.order_details li strong,
.purchase-flow--received .woocommerce-order-overview li strong { display: block; font-size: .72rem; line-height: 1.7; text-transform: none; }
.purchase-flow--received .woocommerce-order-details,
.purchase-flow--received .woocommerce-customer-details { display: none; }
.atrang-payment-card,
.atrang-receipt-card { padding: clamp(26px, 4vw, 42px); border: 1px solid rgba(255,255,255,.86); border-radius: 28px; background: rgba(255,255,255,.62); box-shadow: 0 22px 60px rgba(37,52,67,.08); backdrop-filter: blur(16px); }
.atrang-payment-card__heading { display: grid; grid-template-columns: 1fr auto; align-items: end; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.atrang-payment-card__heading p { grid-column: 1 / -1; margin: 0 0 4px; color: var(--rose); font-size: .65rem; font-weight: 800; }
.atrang-payment-card__heading h2 { margin: 0; font-size: clamp(1.8rem, 3vw, 2.65rem); }
/* The customer-facing order code already appears in WooCommerce's overview
   directly above this card. Repeating it here made it look like a second order
   number, especially while Woo printed its internal post ID in the overview. */
.purchase-flow--received .atrang-payment-card__heading > span { display: none; }
.atrang-pay-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding-block: 26px; }
.atrang-pay-amount,
.atrang-bank-details { display: flex; flex-direction: column; align-items: flex-start; min-height: 190px; padding: 25px; border-radius: 20px; }
.atrang-pay-amount { justify-content: center; background: var(--ink); color: #fff; }
.atrang-bank-details { background: rgba(223,232,223,.7); }
.atrang-pay-amount small,
.atrang-bank-details > small { margin-bottom: 11px; opacity: .72; font-size: .62rem; }
.atrang-pay-amount strong { font-family: var(--display); font-size: clamp(1.75rem, 3.5vw, 2.7rem); line-height: 1.35; }
.atrang-copy { position: relative; display: inline-flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; min-height: 42px; margin-top: 13px; padding: 0; border: 0; border-bottom: 1px solid rgba(255,255,255,.3); border-radius: 0; background: transparent; color: inherit; box-shadow: none; text-align: right; font: 500 .69rem var(--sans); }
.atrang-copy:hover { background: transparent; }
.atrang-copy span { opacity: .62; font-size: .58rem; }
.atrang-copy::after { content: attr(data-copy-state); position: absolute; left: 0; bottom: calc(100% + 6px); padding: 5px 8px; visibility: hidden; opacity: 0; border-radius: 6px; background: #fff; color: var(--ink); font-size: .57rem; transition: opacity 160ms ease; }
.atrang-copy.is-copied::after { visibility: visible; opacity: 1; }
.atrang-copy--number { margin-top: 0; border-bottom-color: rgba(23,40,66,.22); color: var(--ink); font-size: .9rem; }
.atrang-copy--number bdi,
.atrang-copy--sheba bdi { direction: ltr; font-family: ui-monospace, "Cascadia Mono", monospace; letter-spacing: .05em; }
.atrang-copy--sheba { border-bottom-color: rgba(23,40,66,.22); color: var(--ink); font-size: .67rem; }
.atrang-bank-details p { margin: 13px 0 0; color: var(--ink-soft); font-size: .66rem; }
.atrang-payment-card__note { margin: 0; color: var(--ink-soft); font-size: .66rem; line-height: 1.9; }
.atrang-receipt-card { text-align: center; }
.atrang-receipt-card h2 { margin: 0; font-size: clamp(1.65rem, 2.8vw, 2.25rem); }
.atrang-receipt-card > p { max-width: 540px; margin: 9px auto 24px; color: var(--ink-soft); font-size: .72rem; line-height: 1.9; }
.atrang-receipt-card__success { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 16px; border-radius: 50%; background: var(--sage); color: #45614e; font-size: 1.2rem; }
.atrang-telegram-connect {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 22px 25px;
  border: 1px solid rgba(23,40,66,.1);
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(219,231,238,.74), rgba(255,255,255,.72));
  box-shadow: 0 16px 40px rgba(37,52,67,.06);
}
.atrang-telegram-connect.is-connected { background: linear-gradient(135deg, rgba(223,232,223,.86), rgba(255,255,255,.72)); }
.atrang-telegram-connect__mark { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #fff; color: var(--rose); font-size: 1.05rem; box-shadow: 0 8px 20px rgba(23,40,66,.06); }
.atrang-telegram-connect.is-connected .atrang-telegram-connect__mark { color: #45614e; }
.atrang-telegram-connect h2 { margin: 0; font-size: 1.15rem; }
.atrang-telegram-connect p { margin: 4px 0 0; color: var(--ink-soft); font-size: .65rem; line-height: 1.8; }
.purchase-content .woocommerce .atrang-telegram-connect > a.button { display: inline-flex; align-items: center; gap: 9px; min-height: 46px; white-space: nowrap; }
/* Claiming a guest order ------------------------------------------------- */
.claim-invite { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 16px; margin-top: 22px; padding: 20px 24px; border: 1px solid rgba(23,40,66,.1); border-radius: 22px; background: linear-gradient(135deg, rgba(223,232,223,.7), rgba(255,255,255,.72)); box-shadow: 0 16px 40px rgba(37,52,67,.06); }
.claim-invite > span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--rose); font-size: 1rem; box-shadow: 0 8px 20px rgba(23,40,66,.06); }
.claim-invite strong { display: block; font-size: .92rem; }
.claim-invite p { margin: 4px 0 0; color: var(--ink-soft); font-size: .68rem; line-height: 1.85; }
.purchase-content .woocommerce .claim-invite > a.button { display: inline-flex; align-items: center; gap: 9px; min-height: 46px; white-space: nowrap; }
.claim-orders { margin-top: 34px; padding: 26px; border: 1px solid rgba(23,40,66,.1); border-radius: 24px; background: rgba(255,255,255,.55); }
.claim-orders__head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.claim-orders__head svg { width: 26px; height: 26px; flex: none; fill: none; stroke: var(--rose); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.claim-orders__head small { color: var(--rose); font-size: .64rem; font-weight: 700; }
.claim-orders__head h2 { margin: 2px 0 0; font-size: 1.3rem; }
.claim-orders > p { margin: 0 0 18px; color: var(--ink-soft); font-size: .72rem; line-height: 2; }
.claim-orders__form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 14px; }
.claim-orders__form label { display: block; }
.claim-orders__form label span { display: block; margin: 0 3px 7px; color: var(--ink-soft); font-size: .66rem; }
.claim-orders__form label em { color: var(--ink-soft); font-size: .58rem; font-style: normal; opacity: .8; }
.claim-orders__form input { width: 100%; min-height: 50px; border-radius: 13px; }
.claim-orders__form button { grid-column: 1 / -1; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; border-radius: 99px; }
.claim-orders__error,
.claim-orders__done { margin: 0 0 16px; padding: 13px 16px; border-radius: 14px; font-size: .7rem; line-height: 1.9; }
.claim-orders__error { border: 1px solid rgba(164,58,80,.2); background: rgba(249,235,237,.86); color: #8d263d; }
.claim-orders__done { border: 1px solid rgba(94,129,103,.24); background: rgba(232,241,233,.86); color: #35553f; }
.claim-orders__hint { display: block; margin-top: 13px; color: var(--ink-soft); font-size: .6rem; line-height: 1.9; }
.atrang-receipt-form { display: flex; align-items: stretch; gap: 10px; max-width: 650px; margin-inline: auto; }
.atrang-file-field { position: relative; display: flex; flex: 1; flex-direction: column; align-items: flex-start; justify-content: center; min-height: 70px; padding: 12px 18px; overflow: hidden; border: 1px dashed rgba(23,40,66,.25); border-radius: 14px; background: rgba(255,255,255,.6); text-align: right; cursor: pointer; }
.atrang-file-field input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.atrang-file-field span { font-size: .7rem; font-weight: 700; }
.atrang-file-field small { margin-top: 4px; color: var(--ink-soft); font-size: .57rem; }
.atrang-file-field.has-file { border-style: solid; border-color: var(--sage-deep); background: rgba(223,232,223,.58); }
.atrang-receipt-form > button { min-width: 140px; }

/* The receipt already sent, and the way back to sending another. The thumbnail
   is capped rather than fluid: a bank slip screenshot is tall and narrow, and at
   full width it pushes the resend control off the first screen — which is the
   whole thing this block exists to offer. */
.atrang-sent-receipt { max-width: 320px; margin: 0 auto 22px; padding: 12px; border: 1px solid rgba(23,40,66,.12); border-radius: 18px; background: rgba(255,255,255,.68); text-align: center; }
.atrang-sent-receipt__shot { display: block; border-radius: 12px; overflow: hidden; }
.atrang-sent-receipt__shot img { display: block; width: 100%; max-height: 260px; object-fit: cover; object-position: top; }
.atrang-sent-receipt__shot span { display: block; margin-top: 8px; color: var(--ink-soft); font-size: .58rem; font-weight: 700; }
.atrang-sent-receipt__gone { padding: 26px 12px; border: 1px dashed rgba(23,40,66,.22); border-radius: 12px; color: var(--ink-soft); font-size: .62rem; line-height: 1.9; }
.atrang-sent-receipt figcaption { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 10px; margin-top: 10px; }
.atrang-sent-receipt__state { border-radius: 999px; padding: 3px 11px; background: rgba(23,40,66,.07); font-size: .57rem; font-weight: 700; }
.atrang-sent-receipt--approved .atrang-sent-receipt__state { background: var(--sage); color: #45614e; }
.atrang-sent-receipt--rejected .atrang-sent-receipt__state { background: rgba(164,58,80,.13); color: #8d263d; }
.atrang-sent-receipt figcaption small { color: var(--ink-soft); font-size: .56rem; }
.atrang-sent-receipt figcaption strong { font-size: .62rem; }
.atrang-sent-receipt__why { margin: 10px 0 0; color: #8d263d; font-size: .6rem; line-height: 1.9; }
.atrang-receipt-again { max-width: 650px; margin-inline: auto; text-align: right; }
.atrang-receipt-again > summary { display: inline-flex; align-items: center; gap: 7px; border-bottom: 1px dashed rgba(23,40,66,.3); padding-bottom: 3px; font-size: .66rem; font-weight: 700; cursor: pointer; list-style: none; }
.atrang-receipt-again > summary::-webkit-details-marker { display: none; }
.atrang-receipt-again > summary::after { content: '+'; font-size: .8rem; line-height: 1; }
.atrang-receipt-again[open] > summary::after { content: '−'; }
.atrang-receipt-again__why { margin: 14px 0 16px; color: var(--ink-soft); font-size: .62rem; line-height: 1.9; }
/* A refused receipt: the mark is amber rather than green, and the form stands
   open in place of the disclosure, because the next move belongs to the
   customer and hiding it behind a summary was asking them to go looking. */
.atrang-receipt-card--refused .atrang-receipt-card__success { background: rgba(238,220,177,.7); color: #8a5a1b; }
.atrang-receipt-again--open { margin-top: 4px; }
.atrang-receipt-card__shut { max-width: 540px; margin: 0 auto; color: var(--ink-soft); font-size: .62rem; line-height: 1.9; }
/* An upload the tracking page sent back: same voice as the lookup's own error. */
.atrang-receipt-card__trouble { max-width: 650px; margin: 0 auto 18px; padding: 11px 13px; border-radius: 10px; background: rgba(244,218,221,.57); color: #803649; font-size: .64rem; line-height: 1.9; text-align: right; }
.purchase-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 25px clamp(20px, 5vw, 72px); border-top: 1px solid rgba(23,40,66,.1); color: var(--ink-soft); font-size: .65rem; }
.purchase-footer p { margin: 0; }
.purchase-footer a { color: var(--ink); text-underline-offset: 4px; }

/* Cart/checkout blocks retain the same visual language if page content is
   switched back from shortcodes in the editor. */
.purchase-content .wc-block-cart,
.purchase-content .wc-block-checkout { font-family: var(--sans); }
.purchase-content .wc-block-components-sidebar-layout { gap: clamp(28px, 5vw, 70px); }
.purchase-content .wc-block-components-sidebar { padding: 25px !important; border: 1px solid rgba(255,255,255,.84); border-radius: 28px; background: rgba(255,255,255,.6); }
.purchase-content .wc-block-components-text-input input,
.purchase-content .wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input { border-color: rgba(23,40,66,.16); border-radius: 13px; background: rgba(255,255,255,.76); }

@media (max-width: 820px) {
  .purchase-flow--cart .woocommerce,
  .purchase-flow--checkout form.checkout { grid-template-columns: 1fr; }
  .purchase-flow--cart .cart-collaterals { position: static; margin-top: 24px; }
  /* One column: hand every row back to auto-placement, or the explicit rows
     above would hold the summary and the totals in rows 2 and 3 of a single
     track and leave the validation summary sitting on top of them. */
  .purchase-flow--checkout form.checkout > .woocommerce-NoticeGroup,
  .purchase-flow--checkout form.checkout > .col2-set,
  .purchase-flow--checkout form.checkout > #order_review_heading,
  .purchase-flow--checkout form.checkout > #order_review { grid-column: auto; grid-row: auto; }
  .purchase-flow--checkout form.checkout > #order_review_heading { padding-top: 30px; }
  .purchase-flow--checkout form.checkout > #order_review_heading,
  .purchase-flow--checkout form.checkout > #order_review { grid-column: 1; }
  .purchase-flow--checkout form.checkout > #order_review_heading { margin-top: 32px; }
  /* «سفارش شما», folded to its total.
     Stacked, the checkout reads: eight fields, the whole order again as a
     table, the payment box, the button. The table is the one part nobody is
     reading twice — they arrived here from the cart, which showed it — and it
     is what stands between the last field and «ثبت سفارش». So it folds into
     the one line of itself that still matters, and opens on a tap.
     Keyed on `.summary-folds`, which theme.js adds: with no JavaScript there
     is no toggle to open it again, so the table stays where it is. */
  .purchase-flow--checkout form.checkout > .order-summary-toggle {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 62px;
    margin: 32px 0 0;
    padding: 14px 20px;
    border: 1px solid rgba(255,255,255,.86);
    border-radius: 20px;
    background: rgba(248,247,242,.8);
    box-shadow: 0 22px 60px rgba(37,52,67,.06);
    color: var(--ink);
    font: 700 1.05rem var(--display);
    text-align: start;
    backdrop-filter: blur(16px);
  }
  .order-summary-toggle > span { flex: 1 1 auto; }
  .order-summary-toggle__total { color: var(--rose); font-size: .95rem; white-space: nowrap; }
  /* Drawn from one corner of a box rather than loaded as a glyph, so it can
     turn with the panel it opens. */
  .order-summary-toggle::after {
    content: "";
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    margin-bottom: 3px;
    border: 0 solid var(--ink-soft);
    border-width: 0 0 1.5px 1.5px;
    transform: rotate(-45deg);
    transition: transform 200ms ease;
  }
  .purchase-flow--checkout form.checkout.summary-is-open .order-summary-toggle::after { margin: 3px 0 0; transform: rotate(135deg); }
  .purchase-flow--checkout form.checkout.summary-folds > #order_review_heading { display: none; }
  .purchase-flow--checkout form.checkout.summary-folds > #order_review { margin-top: 14px; }
  .purchase-flow--checkout form.checkout.summary-folds:not(.summary-is-open) table.woocommerce-checkout-review-order-table { display: none; }
  .purchase-flow--received .woocommerce ul.order_details li,
  .purchase-flow--received ul.order_details li,
  .purchase-flow--received .woocommerce-order-overview li { flex-basis: clamp(140px, 44%, 100%); }
}

/*
 * The cart as a card, one per line — photograph, name, quantity, subtotal.
 *
 * 768px, not 600, because that is the band WooCommerce's own small-screen
 * sheet covered before `atrang_drop_smallscreen_on_cart()` took it off the
 * cart page, and the real table does not survive it. Measured at 601px the
 * name column collapses to 59px — six fixed columns and a page too narrow to
 * pay for them — and «نگین سنتی» is one of the shortest names in the shop, so
 * tuning the seam any lower would only mean it breaks on «عسل طبیعی ممتاز»
 * instead.
 */
@media (max-width: 768px) {
  .woocommerce-cart-form__contents thead { display: none; }
  /* The rule lives on the row, not the cells: the cells are grid items here and
     a border on each would draw three stubs across one card. */
  .woocommerce-cart-form__cart-item { position: relative; display: grid; grid-template-columns: 70px 1fr auto; gap: 8px 12px; padding-block: 17px; border-bottom: 1px solid var(--line); }
  .woocommerce-cart-form__cart-item td { display: block; padding: 0 !important; border: 0 !important; }
  .woocommerce-cart-form__cart-item .product-remove { position: absolute; top: 14px; left: 0; }
  .woocommerce-cart-form__cart-item .product-thumbnail { grid-row: 1 / span 3; width: auto; }
  .woocommerce-cart-form__cart-item .product-thumbnail::before,
  .woocommerce-cart-form__cart-item .product-name::before,
  .woocommerce-cart-form__cart-item .product-price::before,
  .woocommerce-cart-form__cart-item .product-quantity::before,
  .woocommerce-cart-form__cart-item .product-subtotal::before { display: none; }
  .purchase-content .woocommerce-cart-form__cart-item td.product-thumbnail img { width: 64px; height: 82px; }
  .woocommerce-cart-form__cart-item .product-name { grid-column: 2 / -1; padding-left: 34px !important; }
  .woocommerce-cart-form__cart-item .product-price { display: none; }
  .woocommerce-cart-form__cart-item .product-quantity { grid-column: 2; }
  .woocommerce-cart-form__cart-item .product-subtotal { grid-column: 3; align-self: center; }
  .woocommerce-cart-form td.actions { display: flex; flex-direction: column; gap: 10px; padding-block: 16px !important; }
  /* Grid, not flex, so the field and «اعمال تخفیف» cannot end up on two lines.
     The desktop row is a flex line of a 150px field and an auto button, which
     needs 309px and does not have it on a phone — it wrapped, and the button
     dropped under the field. `minmax(0, 1fr)` lets the field shrink past its
     own content instead, so the two stay side by side at any width, and the
     error notice still gets its own line from `grid-column: 1 / -1`. The
     screen-reader label is `position: absolute` and takes no cell. */
  .woocommerce-cart-form td.actions .coupon { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; width: 100%; }
  /* Same weight as the desktop rule that sets `width: 150px !important`, and
     later in the file. Anything shorter loses to it and keeps the 150px. */
  .purchase-flow--cart form.woocommerce-cart-form td.actions .coupon input.input-text { width: auto !important; min-width: 0; margin: 0 !important; padding-inline: 17px; }
  .woocommerce-cart-form td.actions .coupon .button { padding-inline: 16px; }
  .woocommerce-cart-form [name="update_cart"] { width: 100%; }
}

@media (max-width: 600px) {
  .purchase-header { grid-template-columns: 1fr auto; min-height: 72px; padding-inline: 15px; }
  .purchase-logo { justify-self: end; }
  .purchase-logo img { height: 58px; }
  .purchase-header__secure { display: none; }
  .purchase-header__back { justify-self: start; font-size: .63rem; }
  .purchase-flow { width: min(100% - 26px, 1160px); padding-block: 35px 75px; }
  .purchase-steps { grid-template-columns: auto 22px auto 22px auto; margin-bottom: 42px; }
  .purchase-steps span { gap: 5px; font-size: 0; }
  .purchase-steps b { width: 28px; height: 28px; font-size: .63rem; }
  .purchase-steps .is-current { font-size: .61rem; }
  .purchase-steps i { margin-inline: 5px; }
  .purchase-title { margin-bottom: 28px; }
  .woocommerce-cart-form { padding: 4px 14px; border-radius: 20px; }
  .purchase-flow--cart .cart-collaterals,
  .purchase-flow--checkout form.checkout > .col2-set,
  .purchase-flow--checkout form.checkout > #order_review,
  .atrang-payment-card,
  .atrang-receipt-card { padding: 22px 18px; border-radius: 20px; }
  .purchase-flow--checkout .woocommerce-billing-fields__field-wrapper { grid-template-columns: 1fr; }
  .purchase-flow--checkout .form-row { grid-column: 1 / -1; }
  .checkout-telegram__toggle { grid-template-columns: 22px 1fr; }
  .checkout-telegram__toggle > span { display: none; }
  .checkout-telegram__toggle b,
  .checkout-telegram__toggle small { grid-column: 2; }
  .checkout-telegram__details { margin-inline-start: 32px; margin-inline-end: 0; }
  .purchase-flow--checkout form.checkout > #order_review_heading { padding-inline: 18px; }
  /* Two to a row rather than four stacked lines. The dividers are the grid's
     own 1px gaps with the container's background showing through, which is the
     one way to rule a grid that does not need to know how many cells there are
     — WooCommerce adds an email cell to this list when the order has one. */
  .purchase-flow--received .woocommerce ul.order_details,
  .purchase-flow--received ul.order_details,
  .purchase-flow--received .woocommerce-order-overview {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    padding: 0;
    overflow: hidden;
    background: var(--line);
  }
  .purchase-flow--received .woocommerce ul.order_details li,
  .purchase-flow--received ul.order_details li,
  .purchase-flow--received .woocommerce-order-overview li { padding: 13px 16px; border-inline-end: 0; background: #fff; }
  /* An odd count would leave the gap colour showing as a solid block in the
     empty cell, so the last item takes the whole row instead. */
  .purchase-flow--received .woocommerce ul.order_details li:last-child:nth-child(odd),
  .purchase-flow--received ul.order_details li:last-child:nth-child(odd),
  .purchase-flow--received .woocommerce-order-overview li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .atrang-payment-card__heading { grid-template-columns: 1fr; gap: 12px; }
  .atrang-payment-card__heading > span { justify-self: start; }
  .atrang-pay-grid { grid-template-columns: 1fr; }
  .atrang-pay-amount,
  .atrang-bank-details { min-height: 170px; }
  .atrang-receipt-form { flex-direction: column; }
  .claim-invite { grid-template-columns: 40px 1fr; padding: 18px; }
  .purchase-content .woocommerce .claim-invite > a.button { grid-column: 1 / -1; width: 100%; justify-content: center; }
  .claim-orders { padding: 20px 17px; }
  .claim-orders__form { grid-template-columns: 1fr; }
  .atrang-receipt-form > button { width: 100%; }
  .atrang-telegram-connect { grid-template-columns: 42px 1fr; padding: 19px 17px; }
  .atrang-telegram-connect__mark { width: 42px; height: 42px; }
  .purchase-content .woocommerce .atrang-telegram-connect > a.button { grid-column: 1 / -1; width: 100%; justify-content: center; }
  .purchase-footer { align-items: flex-start; flex-direction: column; }
  input[type="search"], input[type="text"], input[type="email"], input[type="tel"], input[type="password"], textarea, select,
  .purchase-flow--checkout .form-row input.input-text,
  .account-content input.input-text,
  .account-auth input.input-text,
  .guest-tracking__form input { font-size: 16px; }
}

/* Bottom action bars ------------------------------------------------------
   The one thing a phone does better than a desktop is put a control under the
   thumb, and the two pages where a customer commits are exactly the two where
   the control had scrolled away. A product page is a photograph, a weight, a
   description, a specification table and four related products; the cart is a
   list, a coupon row and a totals panel. On both, «افزودن به سبد» and «ادامه و
   ثبت سفارش» sat somewhere in the middle of that.

   Neither bar is a copy of its button. Both are the real element, moved: the
   markup, the form it posts, the classes WooCommerce's own scripts toggle on
   it. A cloned button would have needed its own disabled state, its own price
   and its own submit path, and the three would have drifted.

   These blocks are last in the file on purpose. Both need a bottom padding
   that the `@media (max-width: 600px)` block above would otherwise reset
   through its `padding-block` shorthand.
   -------------------------------------------------------------------------- */

/* The bar carries: whatever price WooCommerce is showing, the stepper, and the
   button. The weight select stays up in the page, where choosing it belongs.
   900px, because that is where `div.product` becomes one column and the page
   turns into the long scroll this is for. */
@media (max-width: 900px) {
  /* Room for the bar to stand over. Without it the last line of the footer is
     the one permanently underneath. */
  body.single-product { padding-bottom: calc(94px + env(safe-area-inset-bottom)); }
  /* Two selectors for two templates: WooCommerce wraps a variable product's
     price and add-to-cart row in `.single_variation_wrap`, and gives a simple
     product neither — there the form itself is the row. Every product in this
     shop is variable today; the second selector is what stops the bar from
     silently not existing the day one is not. */
  body.single-product div.product .single_variation_wrap,
  body.single-product div.product form.cart:not(.variations_form) {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 60;
    display: flex;
    /* Wrap rather than clip. Below about 356px the widest price in the shop and
       the button stop sharing a line, and with `body { overflow-x: hidden }`
       above them an overflowing button is not scrolled to — it is cut off. The
       button carries `flex: 1`, so on the second line it simply takes the whole
       width. No breakpoint decides this; the content does. */
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    width: auto;
    margin: 0;
    padding: 11px clamp(14px, 4vw, 40px) calc(11px + env(safe-area-inset-bottom));
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
    background: rgba(248,247,242,.93);
    box-shadow: 0 -14px 34px rgba(37,52,67,.11);
    backdrop-filter: blur(16px);
  }
  /* WooCommerce's own variation block: its price, and the stock line that can
     come with it. It is empty and zero-width until a weight is chosen. */
  body.single-product div.product .single_variation_wrap > .single_variation { flex: 0 1 auto; min-width: 0; margin: 0; }
  /* Prose, and a bar is not where prose goes. It is still in the page. */
  .single-product .woocommerce-variation-description { display: none; }
  .single-product .woocommerce-variation-price { margin: 0; }
  /* `nowrap` for the same reason the fallback price beside it carries one: this
     is a flex item that will shrink to whatever is left, and «۳۶۰ هزار تومان»
     broken over two lines stood the bar up 46px taller than it needed to be. */
  .woocommerce div.product .woocommerce-variation-price span.price { font-size: 1.02rem; line-height: 1.35; white-space: nowrap; }
  .single-product .woocommerce-variation-availability p { margin: 0; font-size: .58rem; }
  /* Wraps for the same reason as its parent: on a product priced in one figure
     the fallback price sits in HERE rather than in the variation block, so this
     is the row that has to give way. */
  body.single-product div.product .woocommerce-variation-add-to-cart { flex: 1 1 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; margin: 0; }
  .buy-bar__price { display: block; flex: 0 0 auto; color: var(--rose); font-family: var(--display); font-size: 1.02rem; font-weight: 700; line-height: 1.35; white-space: nowrap; }
  /* One price in the bar, never two. WooCommerce fills its own element only
     when the variations differ in price — two products in this catalogue — and
     where it has, ours steps aside. A browser without `:has()` shows both on
     those two and is otherwise unaffected. */
  .single_variation_wrap:has(.woocommerce-variation-price span.price) .buy-bar__price { display: none; }
  /* A narrower stepper than the in-page one. At 375px the price, the stepper
     and the button share 347 pixels, and the button is the one that has to stay
     readable. */
  .single-product form.cart div.quantity .qty { width: 32px; min-height: 46px; }
  .single-product form.cart .qty-adjust { width: 30px; min-height: 46px; }
  /* `padding-block: 0` is what actually sets this height. WooCommerce's own
     `.woocommerce button.button { padding: 13px 20px }` reaches further than a
     `padding-inline` of ours, so the button stood 56px tall against a 48px
     stepper beside it — min-height was being met and then overshot by the
     content box. Zero here hands the height back to min-height, and the two
     controls line up. */
  .woocommerce div.product form.cart .button,
  .woocommerce div.product form.cart button.button.alt,
  .woocommerce div.product form.cart .single_add_to_cart_button { min-height: 48px; padding-block: 0; padding-inline: 14px; white-space: nowrap; }
  /* The form is left holding the weight select on its own; it should not go on
     reserving the height its button used to fill. */
  body.single-product div.product form.variations_form.cart { margin-top: 22px; padding: 18px; }
  /* Up and over the bar. In RTL `inset-inline-end` is the left edge, which is
     the same corner the add-to-cart button now ends in, and both sit at z-index
     60 — so the circle landed on the button. 83px is the bar: 11 padding, a
     48px control, 11 padding, its 1px rule, and 12 of air above it. The purchase
     flow needs no rule of its own; `footer-checkout.php` prints no to-top. */
  body.single-product .to-top { bottom: calc(83px + env(safe-area-inset-bottom)); }
}

/* Below 520px the stepper gives up its place in the bar.
 *
 * Measured, not guessed. At 375px the bar has 345 pixels inside its padding,
 * and it is asked to hold a price, a stepper and a button: the button needs
 * 131 for «افزودن به سبد خرید», the stepper 94, and the price is as wide as
 * the shop's dearest jar makes it — «۱ میلیون و ۹۹۰ هزار تومان» is 161. That
 * is 406 into 345, and what gave way was the button label, which wrapped onto
 * two lines and stood the bar up 79px tall.
 *
 * Of the three, the stepper is the one whose job is done elsewhere: every cart
 * line has the same control, one tap away, and that is where a quantity
 * normally gets revised anyway. So a phone adds one and adjusts in the cart —
 * which is what the shopping apps this is modelled on all do. Above 520px
 * nothing has to give: at 521 the same worst case measures 406 into 478.
 */
@media (max-width: 520px) {
  /* Named exactly the way the rule it overrides is named. `form.cart` is a type
     AND a class, which puts the stepper's own rule at (0,3,2) — one element
     above a selector that reads as though it were more specific. */
  .single-product form.cart div.quantity { display: none; }
}

/* The cart's own. 820px is where the totals stop being a column beside the
   items and drop underneath them — the same moment the button stops being in
   sight. */
@media (max-width: 820px) {
  .purchase-flow--cart { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  /* `backdrop-filter` makes an element the containing block for every fixed
     descendant, so with the blur still on this panel the bar would have pinned
     itself to the panel's bottom edge instead of the screen's. It buys nothing
     at this width: the panel is a full-width card on a near-flat background,
     not a pane floating over anything. */
  .purchase-flow--cart .cart-collaterals { backdrop-filter: none; }
  .purchase-flow--cart .wc-proceed-to-checkout {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 60;
    display: flex;
    /* As on a product: the button takes the second line whole rather than
       hanging off the edge of a 320px screen. */
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    padding: 11px clamp(14px, 4vw, 40px) calc(11px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: rgba(248,247,242,.93);
    box-shadow: 0 -14px 34px rgba(37,52,67,.11);
    backdrop-filter: blur(16px);
  }
  .cart-bar__total { display: grid; flex: 0 0 auto; }
  .cart-bar__total small { color: var(--ink-soft); font-size: .56rem; }
  .cart-bar__total .amount { color: var(--rose); font-family: var(--display); font-size: 1.02rem; font-weight: 700; white-space: nowrap; }
  .purchase-flow--cart .wc-proceed-to-checkout a.checkout-button { flex: 1 1 auto; width: auto; padding: 13px 18px; white-space: nowrap; }
}

/* Room for a bar that has wrapped.
 *
 * The reserves above are written for one line of controls, so each bar needs a
 * taller one from the width it starts taking two — and the two bars do not
 * start at the same width, which is why these are two blocks rather than one.
 * Both thresholds are the measured content: the cart's «مجموع ۱ میلیون و ۶۰
 * هزار تومان» is 153px and «ادامه و ثبت سفارش ←» needs 164, which with the
 * 14px between them wants 331 and has it only from 360px up. The buy bar's
 * widest price is 161 and «افزودن به سبد خرید» needs 131, which wants 304 and
 * has it down to about 332. */
@media (max-width: 360px) {
  .purchase-flow--cart { padding-bottom: calc(134px + env(safe-area-inset-bottom)); }
}
@media (max-width: 335px) {
  body.single-product { padding-bottom: calc(124px + env(safe-area-inset-bottom)); }
  body.single-product .to-top { bottom: calc(117px + env(safe-area-inset-bottom)); }
}

/* Final interaction and accessibility floor. */
@media (hover: hover) and (pointer: fine) {
  .button:hover { transform: translateY(-2px); }
  .order-card:hover { transform: translateY(-2px); box-shadow: 0 20px 45px rgba(37,52,67,.075); }
  .woocommerce ul.products li.product:hover { transform: translateY(-3px); box-shadow: 0 24px 55px rgba(37,52,67,.1); }
  /* The card fills its own button. Anywhere on the tile is the same
     destination, so the whole card should look pressable at once rather than
     waiting for the pointer to find the last 46 pixels of it. The button keeps
     its own hover for the pointer that goes straight there. */
  .woocommerce ul.products li.product:hover .button,
  .woocommerce ul.products li.product .button:hover { border-color: var(--ink); background: var(--ink); color: #fff; }
  .woocommerce ul.products li.product:hover .button::after { transform: translateX(-4px); }
  /* The lift belongs to the card here; the global `.button:hover` rule would
     otherwise raise the button a second time inside an already-rising tile. */
  .woocommerce ul.products li.product .button:hover { transform: none; }
  .shop-filter-widget a:hover { color: var(--ink); }
  .woocommerce nav.woocommerce-pagination ul.page-numbers li a.page-numbers:hover { transform: translateY(-2px); }
}

@media (hover: none) {
  .button:hover, .order-card:hover, .woocommerce ul.products li.product:hover { transform: none; }
  /* No hover to reveal the fill on a touch screen, so the card's button is
     filled from the start — an outline nobody can hover is just a weaker
     button. */
  .woocommerce ul.products li.product .button { border-color: var(--ink); background: var(--ink); color: #fff; }
}

@media (prefers-reduced-motion: reduce) {
  .button, .order-card, .woocommerce ul.products li.product, .woocommerce ul.products li.product img,
  .woocommerce ul.products li.product .button::after, .shop-filter-widget a,
  .woocommerce .woocommerce-ordering select, .woocommerce nav.woocommerce-pagination ul.page-numbers li .page-numbers,
  .primary-navigation, .shop-filters, .site-header nav a::after,
  .hero__arc, .hero__media, .hero__note, .product-card__photo img { transition-duration: 1ms !important; }
  .button:hover, .order-card:hover, .woocommerce ul.products li.product:hover,
  .hero__arc, .hero__media, .hero__note { transform: none !important; }
  .account-orbit, .collection__rings { display: none; }
  /* Keep the auto-dismiss, drop the slide: the card still has to go away by
     itself, so this swaps the keyframes rather than cancelling the animation. */
  .atrang-cart-flash { animation-name: atrang-cart-flash-still; }
}

@media (prefers-contrast: more) {
  :root { --ink-soft: #344356; --line: rgba(23,40,66,.32); }
  .woocommerce-message, .woocommerce-info, .woocommerce-error, .store-state,
  .order-card, .account-sidebar { background: #fff; }
}

@media (forced-colors: active) {
  .button, button, input[type="submit"] { border: 1px solid ButtonText; }
  :focus-visible { outline: 3px solid Highlight; }
  .store-state__art, .order-status, .account-sidebar__person > span { forced-color-adjust: none; }
}

@supports not (backdrop-filter: blur(1px)) {
  .site-header, .shop-filters, .account-sidebar, .order-card,
  .guest-tracking, .account-auth, .purchase-header { background-color: rgba(248,247,242,.96); }
}

/* ---------------------------------------------------------------------------
   Category rail — the front page's category navigation on a phone.

   Hidden above 900px on purpose. The desktop front page already carries the
   ingredient orbit, and the shop template has a sticky filter sidebar; a third
   row of the same links there would be noise rather than navigation.

   The track scrolls sideways with snap points rather than wrapping, because ten
   categories wrapped to three rows is a block of screen the hero then has to
   fight, and because a rail that visibly overflows tells the thumb there is
   more without needing a caption to say so.
   --------------------------------------------------------------------------- */
.cat-rail { display: none; }

@media (max-width: 900px) {
  .cat-rail {
    display: block;
    position: relative;
    z-index: 2;
    /* .site-header is position:fixed and 68px tall here, so the first thing in
       <main> starts underneath it. Everything else on this page is a full-bleed
       scene that WANTS to run under the header; a row of tappable discs does
       not, and clipped off at the top is exactly how it shipped the first time.
       The inset keeps it clear of a notch as well. */
    padding: calc(68px + env(safe-area-inset-top, 0px) + 12px) 0 16px;
  }

  /*
   * The wash, dissolved at the bottom instead of stopped with a rule.
   *
   * A flat panel plus `border-bottom` drew a hard horizontal line across the
   * page directly above the hero, and the eye reads that as the rail being
   * bolted on rather than part of the same surface. This is the treatment
   * .site-header::before already uses for the same problem: a background layer
   * carrying the blur, masked away towards its own bottom edge.
   *
   * A layer rather than a background on .cat-rail itself, for the reason given
   * there too — a background paints behind every child, so it cannot wash over
   * the labels the way a positioned overlay would. A mask on .cat-rail itself
   * would fade the labels out with it.
   *
   * And NO backdrop-filter, unlike the header. The header is position:fixed and
   * the page slides underneath it, so there is something behind it worth
   * blurring. This sits in normal flow with nothing but the page colour behind
   * it, so the blur would cost a second compositing pass stacked directly under
   * the header's — enough, on a phone, to make the hero photograph miss a
   * frame — and buy nothing anyone can see.
   */
  .cat-rail::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(248,247,242,.96) 52%, rgba(248,247,242,.55));
    mask-image: linear-gradient(#000 58%, transparent);
    -webkit-mask-image: linear-gradient(#000 58%, transparent);
  }

  /* No mask, no fade — so the panel would end in the hard edge this replaces.
     Taken to fully transparent by the gradient itself instead. */
  @supports not ((mask-image: linear-gradient(#000, transparent)) or (-webkit-mask-image: linear-gradient(#000, transparent))) {
    .cat-rail::before { background: linear-gradient(180deg, rgba(248,247,242,.96) 52%, rgba(248,247,242,0)); }
  }

  .cat-rail__track {
    display: flex;
    gap: 14px;
    /* The side padding is scroll padding too, so a snapped item never sits
       flush against the edge of the screen. */
    padding: 0 16px;
    margin: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 16px;
    list-style: none;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .cat-rail__track::-webkit-scrollbar { display: none; }

  .cat-rail__item { flex: 0 0 auto; scroll-snap-align: start; }

  .cat-rail__link {
    display: grid;
    justify-items: center;
    gap: 7px;
    width: 72px;
    text-decoration: none;
    /* 44px is the smallest target a thumb reliably hits; the disc is 58 and the
       label sits under it, so the whole cell clears that with room over. */
    -webkit-tap-highlight-color: transparent;
  }

  .cat-rail__art {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    /* The gradient shows through while a photograph is still arriving, so the
       rail has its shape from the first paint rather than ten holes. */
    border: 1px solid rgba(255,255,255,.85);
    border-radius: 50%;
    background: linear-gradient(145deg, var(--blue), var(--sage));
    box-shadow: 0 8px 18px rgba(23,40,66,.08);
    overflow: hidden;
    transition: transform 180ms ease, box-shadow 180ms ease;
  }
  .cat-rail__art img {
    display: block;
    width: 100%;
    height: 100%;
    /* Product shots are square and centred, so a centre crop keeps the jar in
       the circle. */
    object-fit: cover;
    border-radius: 50%;
  }
  .cat-rail__art svg {
    width: 30px;
    height: 30px;
    fill: none;
    stroke: var(--ink);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.6;
  }
  .cat-rail__art .accent { stroke: var(--rose); }

  .cat-rail__link:active .cat-rail__art {
    transform: scale(.93);
    box-shadow: 0 4px 10px rgba(23,40,66,.12);
  }

  .cat-rail__name {
    max-width: 100%;
    font-size: .68rem;
    line-height: 1.35;
    color: var(--ink-soft);
    text-align: center;
    /* Two lines, then ellipsis: «دارچین و ادویه» and «لوازم سرو» are long
       enough to push the rail taller than the icons if left to run. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
  }

  .cat-rail__item--all .cat-rail__art {
    background: linear-gradient(145deg, var(--paper-warm), var(--sage));
  }
}

@media (max-width: 360px) {
  .cat-rail__link { width: 64px; }
  .cat-rail__art { width: 52px; height: 52px; }
  .cat-rail__art svg { width: 27px; height: 27px; }
}

@media (prefers-reduced-motion: reduce) {
  .cat-rail__art { transition: none; }
  .cat-rail__link:active .cat-rail__art { transform: none; }
}

/* ---------------------------------------------------------------------------
   Hero, on a phone: fit the whole composition above the fold.

   .sc-stage is `sticky; top: 0; height: 100svh`, and .hero__copy hangs off its
   BOTTOM. That is right once the hero has pinned, and wrong before it has: at
   scroll 0 the stage starts below the category rail, so its last 171px — the
   lead paragraph and both buttons — sit past the bottom of the screen. The
   headline was cut mid-word and «دیدن مجموعه» could not be reached without
   scrolling past the thing it belongs to.

   So on a phone the composition anchors to the TOP of the stage instead. The
   point is not the pixels saved; it is that a top-anchored hero does not care
   what is above it. Anything added over the hero later — a notice bar, a
   promotion strip, a taller rail when a category name wraps — shifts the stage
   down and would push a bottom-anchored copy off screen again. This cannot.
   --------------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* The frame is an ELLIPSE, so its proportions are the whole look, and a
     height cut without a width cut turns it into a lens. The design ran about
     1.13 wide-to-tall here; shortening it to fit the fold took it to 1.66, and
     2.36 on a short screen, which reads as a stretched photograph even though
     object-fit is `cover` and nothing is geometrically distorted — it is the
     flatlay cropped to a band inside a squashed oval.

     So the height drives the width through aspect-ratio and the shape can no
     longer flatten, whatever the fold budget does to the height later. The
     clamps are for the extremes only: a landscape phone where 34svh is almost
     nothing, and a tall narrow one where the width would otherwise overrun the
     screen. */
  .hero__media {
    top: 4svh;
    height: 34svh;
    width: auto;
    aspect-ratio: 1.3;
    min-width: 60vw;
    max-width: 104vw;
  }

  /* Rides the LOWER part of the photograph, as the design has it sitting at
     `bottom: 9svh` on a desktop. Measured back from the bottom edge of the
     media — 4svh + 34svh — rather than given a top of its own, because a top
     of its own is what put it in the dead centre the moment the media grew:
     21svh was the lower third of a 30svh photograph and the midpoint of a
     34svh one. Tied to the edge it belongs to, it cannot drift again. */
  .hero__note { top: calc(38svh - 76px); bottom: auto; }

  /* 4svh top + 34svh tall = the photograph ends at 38svh. */
  .hero__copy { top: calc(38svh + 24px); bottom: auto; }
  .hero__copy h1 { font-size: clamp(2.4rem, 9.8vw, 3.6rem); line-height: 1.16; }
  .hero__lead { margin-top: 15px; font-size: .88rem; line-height: 1.85; }
  .hero__actions { margin-top: 18px; }
}

/* ---------------------------------------------------------------------------
   Short phones.

   At 360×640 the rail alone is a quarter of the screen and the buttons landed
   27px under the fold — the whole point of the rule above, missed by the height
   of one line of Persian. Keyed on HEIGHT rather than width, because that is
   what actually ran out: a 393-wide phone at 830 has room to spare and must not
   be shrunk for a 640-tall one that does not.
   --------------------------------------------------------------------------- */
@media (max-width: 900px) and (max-height: 720px) {
  .cat-rail { padding-top: calc(68px + env(safe-area-inset-top, 0px) + 8px); padding-bottom: 8px; }
  .cat-rail__track { gap: 12px; }
  .cat-rail__link { width: 64px; gap: 5px; }
  .cat-rail__art { width: 48px; height: 48px; }
  .cat-rail__art svg { width: 26px; height: 26px; }
  .cat-rail__name { font-size: .63rem; line-height: 1.3; }

  /* Height only — the aspect-ratio above carries the width down with it. */
  .hero__media { top: 3svh; height: 30svh; }
  /* Same rule, the shorter media: 3svh + 30svh, and a shorter pill. */
  .hero__note { top: calc(33svh - 66px); padding: 9px 14px; }
  .hero__copy { top: calc(33svh + 16px); }
  .hero__copy h1 { font-size: clamp(2.1rem, 8.8vw, 3rem); }
  .hero__lead { margin-top: 12px; font-size: .84rem; line-height: 1.75; }
  .hero__actions { margin-top: 14px; }
}

/* ---------------------------------------------------------------------------
   The shipping row in the totals card.

   Both totals tables left-align their value column, and that is right: the
   amounts are bare figures and a column of them reads as an invoice. The
   shipping cell is not a figure. It is three blocks of Persian prose — the
   method and its price, «حمل و نقل به ...», and the change-address form — and
   left-aligning those inside a 187px cell pushes every line to the far edge,
   away from the «مرسوله» label they belong to, with the ragged edge on the
   side the eye starts from.

   Nothing here was ever wrong with the direction; `direction: rtl` was correct
   throughout. Only the alignment. And it went unnoticed until today because
   with no shipping zones configured WooCommerce never drew this row at all.
   --------------------------------------------------------------------------- */
.purchase-flow--cart .cart-collaterals .woocommerce-shipping-totals td,
.purchase-flow--checkout #order_review .woocommerce-shipping-totals td,
.purchase-flow--checkout #order_review tr.shipping td {
  text-align: right;
}

.woocommerce-shipping-methods { margin: 0; padding: 0; list-style: none; }
.woocommerce-shipping-methods li { margin: 0; padding: 0; }
.woocommerce-shipping-methods li + li { margin-top: 7px; }
/* One zone can offer both a rate and free shipping over a threshold, and then
   these become radios. RTL: the control leads, so its gap is on its left. */
.woocommerce-shipping-methods input[type="radio"] { margin: 0 0 0 7px; vertical-align: middle; }
.woocommerce-shipping-methods label { display: inline; cursor: pointer; }

.woocommerce-shipping-destination { margin: 9px 0 0; color: var(--ink-soft); font-size: .66rem; line-height: 1.75; }
.woocommerce-shipping-calculator { margin-top: 3px; }
.shipping-calculator-button { font-size: .66rem; }