/* Morsel — main stylesheet (design v2, see ../../../DESIGN.md).
   Two real objects drive the look: the blue speckled enamel bowl, and the weigh label a deli scale prints.
   Colours and sizes are "tokens" (named values) at the top, so the whole site changes from one place. */

/* ---------- Fonts (stored in the theme, not loaded from Google) ---------- */
@font-face {
  font-family: 'Bagel Fat One';
  src: url(../fonts/bagel-fat-one-latin-400-normal.woff2) format('woff2');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'Atkinson';
  src: url(../fonts/atkinson-hyperlegible-next-latin-wght-normal.woff2) format('woff2');
  font-weight: 200 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Atkinson';
  src: url(../fonts/atkinson-hyperlegible-next-latin-wght-italic.woff2) format('woff2');
  font-weight: 200 800; font-style: italic; font-display: swap;
}

/* Persian: a round display face to match Bagel's kibble shapes, and a very clear text face (distinct ۴/۶, ۰/۵). */
@font-face {
  font-family: 'Baloo Bhaijaan 2';
  src: url(../fonts/baloo-bhaijaan-2-arabic-wght-normal.woff2) format('woff2');
  font-weight: 400 800; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+200C-200F, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: 'Plex Arabic';
  src: url(../fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2) format('woff2');
  font-weight: 400; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+200C-200F, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: 'Plex Arabic';
  src: url(../fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2) format('woff2');
  font-weight: 700 800; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+200C-200F, U+FB50-FDFF, U+FE70-FEFF;
}

/* Persian digits for numbers that WooCommerce's own scripts print in Latin digits (cart, checkout totals).
   This tiny font draws 0-9 as ۰-۹, so the number stays a real number underneath. Built from Plex Arabic. */
@font-face { font-family: 'Fa Digits'; src: url(../fonts/fa-digits-400.woff2) format('woff2'); font-weight: 400 600; font-display: swap; unicode-range: U+0030-0039, U+002C; }
@font-face { font-family: 'Fa Digits'; src: url(../fonts/fa-digits-700.woff2) format('woff2'); font-weight: 700 900; font-display: swap; unicode-range: U+0030-0039, U+002C; }

/* ---------- Tokens ---------- */
:root {
  --enamel: #F3F5F7;    /* page background: cool enamel white */
  --cobalt: #2342A6;    /* the bowl blue */
  --cobalt-d: #1A3389;
  --navy: #0F1B3D;      /* text and rims */
  --pink: #F27FA4;      /* the one accent: only for "your pet" */
  --kibble: #9A5B2E;    /* only for food */
  --label: #FFFFFF;     /* weigh labels */
  --grey: #535D73;      /* quiet text */
  --line: #0F1B3D24;
  --tile-a: #E8EBF0;    /* cement tile floor behind the bowl */
  --tile-b: #DEE2E9;

  /* Persian faces come second, so a Persian pet name typed on an English page still looks right.
     They only download if Persian letters appear (see unicode-range above). */
  --display: 'Bagel Fat One', 'Baloo Bhaijaan 2', 'Arial Rounded MT Bold', system-ui, sans-serif;
  --body: 'Atkinson', 'Plex Arabic', system-ui, sans-serif;
  --brand: 'Bagel Fat One', system-ui, sans-serif;   /* the logo and the packaging stay Latin in both languages */

  --rim: inset 0 -4px 0 var(--navy);   /* the dark rolled edge of enamel, used on buttons and toggles */
  --gutter: clamp(16px, 4vw, 56px);
  --max: 1320px;

  /* White speckles of enamel, as a tiny repeating picture. */
  --speckle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cg fill='%23fff'%3E%3Ccircle cx='12' cy='18' r='1.4' opacity='.5'/%3E%3Ccircle cx='54' cy='9' r='.9' opacity='.4'/%3E%3Ccircle cx='97' cy='31' r='1.8' opacity='.45'/%3E%3Ccircle cx='130' cy='12' r='1' opacity='.35'/%3E%3Ccircle cx='28' cy='62' r='1' opacity='.4'/%3E%3Ccircle cx='76' cy='55' r='1.3' opacity='.5'/%3E%3Ccircle cx='118' cy='77' r='.8' opacity='.4'/%3E%3Ccircle cx='9' cy='104' r='1.7' opacity='.4'/%3E%3Ccircle cx='47' cy='121' r='1.1' opacity='.5'/%3E%3Ccircle cx='88' cy='99' r='.9' opacity='.35'/%3E%3Ccircle cx='132' cy='126' r='1.5' opacity='.45'/%3E%3Ccircle cx='66' cy='136' r='.8' opacity='.4'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }
body {
  margin: 0; background: var(--enamel); color: var(--navy);
  font: 400 18px/1.55 var(--body); font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.04; letter-spacing: -.01em; margin: 0 0 .45em; }
p { margin: 0 0 1em; }
::selection { background: var(--pink); color: var(--navy); }
:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; border-radius: 4px; }
.sr-only, .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; inset-inline-start: 12px; top: -60px; z-index: 100; background: var(--navy); color: #fff; padding: 10px 16px; border-radius: 8px; }
.skip:focus { top: 12px; }
[hidden] { display: none !important; }
.icon { width: 22px; height: 22px; flex: none; }
.h2 { font-size: clamp(34px, 4.4vw, 58px); }

/* Pet-specific pictures: the page shows the dog or cat version to match the saved pet. */
.only-cat, [data-pet=cat] .only-dog { display: none; }
[data-pet=cat] .only-cat { display: block; }

/* ---------- Buttons: cobalt enamel with a dark rim ---------- */
.btn, .button, button.button, .single_add_to_cart_button, .woocommerce-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border: 0; border-radius: 12px; background: var(--cobalt); color: #fff; box-shadow: var(--rim);
  padding: 15px 24px 18px; font: 700 17px/1.1 var(--body); text-decoration: none; cursor: pointer;
  transition: background .15s, transform .1s, box-shadow .1s;
}
.btn:hover, .button:hover, .single_add_to_cart_button:hover { background: var(--cobalt-d); }
.btn:active, .button:active, .single_add_to_cart_button:active { transform: translateY(2px); box-shadow: inset 0 -2px 0 var(--navy); }
.btn--main { font-size: 19px; padding: 18px 28px 21px; }
.button.disabled, .button:disabled, .single_add_to_cart_button.disabled { opacity: .45; cursor: not-allowed; }

/* ---------- Concept bar ---------- */
.concept { margin: 0; background: var(--navy); color: #DCE2F0; padding: 8px var(--gutter); font-size: 14px; text-align: center; }
.concept a { color: #fff; font-weight: 700; margin-left: 6px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 28px;
  padding: 12px var(--gutter); background: var(--enamel); border-bottom: 1px solid var(--line);
}
.logo { text-decoration: none; display: inline-block; }
.logo__word { display: inline-flex; align-items: center; font: 400 36px/1 var(--brand); direction: ltr; letter-spacing: -.02em; color: var(--navy); }
.logo__o { width: .8em; height: .8em; margin: .08em .02em 0; }
.logo--light .logo__word { color: #fff; }
.nav { display: flex; gap: 26px; }
.nav a { text-decoration: none; font-weight: 700; padding: 6px 0; border-bottom: 3px solid transparent; }
.nav a:hover { border-bottom-color: var(--pink); }
.site-header__tools { display: flex; gap: 18px; align-items: center; }
.tool { display: inline-flex; gap: 6px; align-items: center; text-decoration: none; font-weight: 700; }
.tool:hover span { text-decoration: underline; text-decoration-color: var(--pink); text-decoration-thickness: 3px; }
.tool__n { display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 13px; background: var(--navy); color: #fff; font-size: 14px; }
.pet-chip { display: inline-flex; gap: 6px; align-items: center; padding-block: 4px; padding-inline: 6px 12px; border-radius: 20px; background: var(--pink); text-decoration: none; font-weight: 700; font-size: 15px; }
.pet-chip__pic { width: 26px; height: 26px; color: var(--navy); }

/* ---------- Calculator ---------- */
.calc {
  max-width: var(--max); margin: 0 auto; padding: clamp(28px, 5vw, 64px) var(--gutter) clamp(40px, 6vw, 80px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); gap: clamp(28px, 5vw, 72px); align-items: start;
}
.calc fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.calc__q { font-size: clamp(44px, 5.6vw, 84px); line-height: 1.06; margin-bottom: 20px; }
.calc__name input {
  font: inherit; color: inherit; letter-spacing: inherit; background: transparent; border: 0; padding: 0;
  border-bottom: 5px dashed var(--pink); width: 8.5ch; min-width: 1em; max-width: 100%; outline: none;
}
.calc__name input:focus { border-bottom-style: solid; }
.calc__lead { font-size: 20px; color: var(--grey); max-width: 34em; margin-bottom: 32px; }
.calc__label { display: block; font-weight: 700; font-size: 15px; color: var(--grey); margin: 0 0 8px; padding: 0; }
.calc .calc__ask > * + * { margin-top: 28px; }
.calc .calc__ask > .calc__lead { margin-top: 0; }

.calc__species { display: flex; flex-wrap: wrap; gap: 10px; }
.calc__species legend { width: 100%; }
.species input, .seg input { position: absolute; opacity: 0; pointer-events: none; }
.species span {
  display: inline-flex; align-items: center; gap: 10px; padding-block: 10px 13px; padding-inline: 12px 22px; border-radius: 12px;
  background: #fff; box-shadow: inset 0 0 0 2px var(--line), inset 0 -4px 0 var(--line);
  font: 400 26px/1 var(--display); cursor: pointer; transition: background .15s, color .15s;
}
.species__pic { width: 40px; height: 40px; }
.species input:checked + span { background: var(--cobalt); color: #fff; box-shadow: var(--rim); }
.species input:focus-visible + span, .seg input:focus-visible + span { outline: 3px solid var(--pink); outline-offset: 3px; }

.calc__weight { display: grid; grid-template-columns: 1fr auto; align-items: end; }
.calc__kg { font: 700 30px/1 var(--body); }
.scale { grid-column: 1 / -1; position: relative; padding-bottom: 30px; margin-top: 8px; }
.scale__ticks { position: absolute; left: 14px; right: 14px; bottom: 0; height: 26px; }
.scale__ticks span { position: absolute; top: 10px; translate: -50% 0; font-size: 13px; font-weight: 700; color: var(--grey); }
.scale__ticks span::before { content: ''; position: absolute; inset-inline-start: calc(50% - 1px); top: -10px; width: 2px; height: 9px; background: var(--navy); }

/* The weight slider. --p is set by the script: how far along the bar the thumb is. */
input[type=range] { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 32px; margin: 0; background: transparent; cursor: pointer; --p: 25%; }
input[type=range]::-webkit-slider-runnable-track { height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--cobalt) var(--p), #D5DAE3 var(--p)); }
input[type=range]::-moz-range-track { height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--cobalt) var(--p), #D5DAE3 var(--p)); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -8px; border-radius: 50%; background: var(--pink); border: 3px solid var(--navy); }
input[type=range]::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: var(--pink); border: 3px solid var(--navy); }

.calc__row { display: grid; grid-template-columns: 1fr 1.25fr; gap: 20px; }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg legend { width: 100%; }
.seg label { flex: 1 1 auto; }
.seg span { display: block; text-align: center; white-space: nowrap; padding: 10px 12px 13px; border-radius: 10px; background: #fff;
  box-shadow: inset 0 0 0 2px var(--line), inset 0 -4px 0 var(--line); font-weight: 700; cursor: pointer; transition: background .15s, color .15s; }
.seg input:checked + span { background: var(--cobalt); color: #fff; box-shadow: var(--rim); }

.calc__bag-list { display: flex; gap: 8px; }
.calc__bag-list button { padding: 10px 18px 13px; border: 0; border-radius: 10px; background: #fff; font-weight: 700; cursor: pointer;
  box-shadow: inset 0 0 0 2px var(--line), inset 0 -4px 0 var(--line); }
.calc__bag-list button[aria-checked=true] { background: var(--navy); color: #fff; box-shadow: inset 0 -4px 0 #000; }

/* Right side: the bowl on a cement tile floor, and the label that prints out of it. */
.calc__out {
  position: sticky; top: 92px; display: grid; justify-items: center; padding: clamp(24px, 3vw, 40px) clamp(16px, 3vw, 40px) 32px;
  border-radius: 24px; background-color: var(--tile-a);
  background-image: conic-gradient(var(--tile-b) 25%, transparent 0 50%, var(--tile-b) 0 75%, transparent 0);
  background-size: 96px 96px;
}
.calc__bowl { width: min(100%, 440px); }
.bowl { width: 100%; height: auto; overflow: visible; }
.bowl__name { font: 400 25px/1 var(--display); fill: #fff; letter-spacing: .06em; }
.kib { transform-box: fill-box; transform-origin: center; scale: 2.2; opacity: 0; transition: scale .45s cubic-bezier(.3, .7, .3, 1), opacity .25s; }
.kib.is-in { scale: 1; opacity: 1; }
.calc__out .label { width: min(100%, 340px); margin-top: -56px; transform: rotate(-2deg); position: relative; }
.calc__cta { margin-top: 26px; }

/* ---------- The weigh label (the site's repeated piece) ---------- */
.label {
  background: var(--label); color: var(--navy); border-radius: 4px; padding: 14px 16px 12px;
  box-shadow: 0 1px 0 #0F1B3D14, 0 6px 16px -6px #0F1B3D38;
  font-size: 15px; line-height: 1.35;
}
.label__top { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; font-weight: 700; color: var(--grey);
  font-variant: all-small-caps; letter-spacing: .04em; padding-bottom: 8px; border-bottom: 2px solid var(--navy); }
.label__shop { font-family: var(--brand); font-variant: normal; letter-spacing: 0; font-size: 16px; color: var(--navy); }
.label__for { margin: 10px 0 8px; font-size: 16px; }
.label__for strong { background: var(--pink); padding: 0 4px; border-radius: 3px; }
.label__grid { margin: 0; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px dashed var(--line); }
.label__grid > div { padding: 8px 0; border-bottom: 1px dashed var(--line); }
.label__grid > div:nth-child(odd) { padding-inline-end: 10px; border-inline-end: 1px dashed var(--line); }
.label__grid > div:nth-child(even) { padding-inline-start: 12px; }
.label__grid dt { font-size: 12px; font-weight: 700; color: var(--grey); font-variant: all-small-caps; letter-spacing: .05em; }
.label__grid dd { margin: 0; font-size: 24px; font-weight: 800; line-height: 1.1; }
.label__foot { display: grid; grid-template-columns: 112px 1fr; gap: 12px; align-items: center; margin-top: 10px; }
.label__foot p, .label__note { margin: 0; font-size: 13px; color: var(--grey); }
.label__foot strong, .label__note strong { color: var(--navy); }
.label__note { margin-top: 10px; }
.barcode { height: 36px; width: 100%; fill: var(--navy); }
.label--print.is-printing { animation: print .7s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes print { from { clip-path: inset(0 0 100% 0); translate: 0 -18px; } to { clip-path: inset(0 0 0 0); translate: 0 0; } }

/* ---------- Life of one bag ---------- */
.life { max-width: var(--max); margin: 0 auto; padding: clamp(48px, 7vw, 96px) var(--gutter); display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.life__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 20px; }
.life__intro { font-size: 20px; color: var(--grey); }
.life__intro strong { color: var(--navy); }
.life__line { list-style: none; margin: 28px 0 0; padding: 0; position: relative; }
.life__line::before { content: ''; position: absolute; inset-inline-start: 9px; top: 8px; bottom: calc(100% - 100%  + 3.2em); width: 3px; background: var(--navy); border-radius: 2px; }
.life__line li { position: relative; padding-block: 0 24px; padding-inline-start: 44px; }
.life__line li:last-child { padding-bottom: 0; }
.life__line li::before { content: ''; position: absolute; inset-inline-start: 0; top: 4px; width: 21px; height: 21px; border-radius: 50%; background: var(--enamel); border: 3px solid var(--navy); }
.life__line li.is-remind::before { background: var(--pink); }
.life__line li.is-end::before { background: var(--kibble); }
.life__line time { display: block; font-weight: 800; font-size: 21px; }
.life__line p { margin: 2px 0 0; color: var(--grey); max-width: 34em; }

/* ---------- Recipe cards: bag on top, weigh label stuck on below ---------- */
.recipes { max-width: var(--max); margin: 0 auto; padding: clamp(40px, 6vw, 88px) var(--gutter); }
.recipes__head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 24px; flex-wrap: wrap; }
.recipes__head p { margin: 0; color: var(--grey); max-width: 34em; }
.recipes__head strong { color: var(--navy); background: var(--pink); padding: 0 4px; border-radius: 3px; }
.cards { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 40px 28px; }
.card { --bag: #F2B43C; }
.card.is-other .card__art { opacity: .45; }
.card.is-other .card__label { filter: grayscale(1); }
.card.is-other:hover .card__art { opacity: 1; }
.card.is-other:hover .card__label { filter: none; }
.card__link { display: block; height: 100%; text-decoration: none; }
.card__art { aspect-ratio: 1 / .92; display: grid; place-items: center; border-radius: 20px; background: color-mix(in srgb, var(--bag) 30%, var(--enamel)); }
.card__art .bag { width: 54%; }
.card__label { position: relative; margin: -34px 14px 0; transform: rotate(-1.2deg); transition: transform .2s; }
.card:nth-child(even) .card__label { transform: rotate(.9deg); }
.card__link:hover .card__label, .card__link:focus-visible .card__label { transform: none; }
.card__name { font-size: 27px; margin: 10px 0 2px; }
.card__tagline { margin: 0 0 10px; color: var(--grey); }
.label__grid--2 dd { font-size: 20px; }
.card__label .barcode { margin-top: 10px; height: 26px; width: 60%; }

/* Text on the drawn bags */
.bag__brand { font: 400 22px/1 var(--brand); }
.bag__name { font: 400 33px/1 var(--brand); }
.bag__stamp { font: 800 13px/1 var(--body); }
.bag__stamp--s { font-size: 7.5px; }
.bag__kg { font: 800 18px/1 var(--body); }

/* ---------- Reminder email + delivery ---------- */
.post { max-width: var(--max); margin: 0 auto; padding: clamp(40px, 6vw, 88px) var(--gutter) clamp(64px, 8vw, 120px); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
.mail { background: #fff; border-radius: 14px; box-shadow: 0 1px 0 #0F1B3D14, 0 20px 40px -24px #0F1B3D55; overflow: hidden; }
.mail__head { margin: 0; padding: 18px 24px; border-bottom: 1px solid var(--line); display: grid; gap: 6px; font-size: 16px; }
.mail__head div { display: grid; grid-template-columns: 72px 1fr; }
.mail__head dt { color: var(--grey); }
.mail__head dd { margin: 0; font-weight: 700; }
.mail__body { padding: 24px; font-size: 18px; }
.mail__btn { margin: 4px 0 18px; }
.mail__small { margin: 0; font-size: 14px; color: var(--grey); }
.post__text > p { font-size: 20px; color: var(--grey); }
.post__intro { grid-column: 1 / -1; max-width: 46em; }
.post__intro p { font-size: 20px; color: var(--grey); }
.calc__hint { margin: -18px 0 0; font-size: 15px; color: var(--grey); }
.calc__name input::placeholder { color: inherit; opacity: 1; }
.post__photo { margin: 24px 0 0; }
.post__photo img { width: 100%; border-radius: 20px; aspect-ratio: 8 / 5; object-fit: cover; }

/* ---------- Footer: cobalt enamel ---------- */
.site-footer { background: var(--cobalt) var(--speckle); color: #fff; padding: 56px var(--gutter) 48px; box-shadow: inset 0 8px 0 var(--navy); }
.site-footer__in { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.4fr; gap: 36px; }
.site-footer h2 { font: 700 16px/1 var(--body); color: #C9D3F2; margin-bottom: 14px; }
.site-footer nav a { display: block; padding: 4px 0; text-decoration: none; font-weight: 700; }
.site-footer nav a:hover { text-decoration: underline; text-decoration-color: var(--pink); text-decoration-thickness: 3px; }
.site-footer__brand p { margin-top: 14px; color: #DCE2F0; max-width: 22em; }
.site-footer__note p { color: #DCE2F0; font-size: 16px; }
.site-footer__note a { color: #fff; font-weight: 700; }

/* ---------- Shop page ---------- */
.wc-main { max-width: var(--max); margin: 0 auto; padding: clamp(28px, 5vw, 56px) var(--gutter) clamp(64px, 8vw, 110px); }
.shop-head { display: grid; gap: 16px; }
.shop-head__title { font-size: clamp(52px, 8vw, 110px); margin: 0; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { text-decoration: none; padding: 9px 18px 12px; border-radius: 10px; background: #fff; font-weight: 700;
  box-shadow: inset 0 0 0 2px var(--line), inset 0 -4px 0 var(--line); }
.chip.is-on { background: var(--cobalt); color: #fff; box-shadow: var(--rim); }
.shop-head__pet { margin: 0; color: var(--grey); }
.shop-head__pet strong { color: var(--navy); background: var(--pink); padding: 0 4px; border-radius: 3px; }
.shop-head__pet a { font-weight: 700; color: var(--cobalt); }

/* ---------- Product page ---------- */
.pdp { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
.pdp__stage { position: sticky; top: 92px; aspect-ratio: 1 / 1.05; border-radius: 24px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--bag) 32%, var(--enamel)); }
.pdp__bag { width: 54%; }
.crumbs { font-size: 15px; color: var(--grey); margin-bottom: 12px; }
.crumbs a { font-weight: 700; color: var(--navy); }
.pdp__title { font-size: clamp(46px, 6vw, 84px); margin-bottom: 10px; }
.pdp__tagline { font-size: 21px; color: var(--grey); }
.label--pet { margin: 20px 0 26px; max-width: 440px; transform: rotate(-1deg); }
.label--pet.is-warn .label__for { background: #FDE3EC; padding: 8px 10px; border-radius: 4px; }
.label--pet a { color: var(--cobalt); font-weight: 700; }

/* WooCommerce's size dropdown stays for the cart logic, but our buttons replace it on screen. */
.variations_form.has-sizes table.variations { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.variations_form table.variations { width: 100%; border-collapse: collapse; margin-bottom: 16px; }
.variations_form table.variations select { width: 100%; padding: 12px; border: 2px solid var(--line); border-radius: 10px; background: #fff; }
.sizes { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 18px; }
.sizes button { display: grid; gap: 2px; text-align: start; padding: 12px 16px 15px; border: 0; border-radius: 12px; background: #fff; cursor: pointer;
  box-shadow: inset 0 0 0 2px var(--line), inset 0 -4px 0 var(--line); transition: background .15s; }
.sizes button[aria-checked=true] { background: var(--bag); color: var(--bag-ink); box-shadow: var(--rim); }
.sizes button:disabled { opacity: .4; cursor: not-allowed; text-decoration: line-through; }
.sizes__kg { font: 400 26px/1 var(--display); }
.sizes__price { font-weight: 800; }
.sizes__per { font-size: 14px; opacity: .8; }
.woocommerce-variation-price { display: none; }
.woocommerce-variation-availability p { font-size: 15px; color: var(--grey); }
.variations_form.cart { display: block; }
.woocommerce-variation-add-to-cart, form.cart:not(.variations_form) { display: flex; gap: 12px; align-items: stretch; }
.quantity { flex: none; }
.woocommerce .quantity .qty, .quantity .qty { width: 80px; height: 100%; min-height: 58px; text-align: center; border: 0; border-radius: 12px; background: #fff; font-weight: 800; font-size: 19px;
  box-shadow: inset 0 0 0 2px var(--line), inset 0 -4px 0 var(--line); }
.pdp .single_add_to_cart_button { flex: 1; min-height: 58px; font-size: 19px; }
.pdp__h { font-size: 30px; margin: 44px 0 10px; }
.pdp__note { color: var(--grey); font-size: 15px; margin-bottom: 12px; }
.ingredients { font-size: 19px; }
.pdp__desc { font-size: 19px; color: var(--grey); }
.feed { width: 100%; border-collapse: collapse; background: #fff; border-radius: 4px; overflow: hidden; box-shadow: 0 1px 0 #0F1B3D14, 0 6px 16px -8px #0F1B3D38; }
.feed th, .feed td { padding: 11px 14px; text-align: start; border-bottom: 1px dashed var(--line); }
.feed thead th { font-size: 13px; font-variant: all-small-caps; letter-spacing: .05em; color: var(--grey); border-bottom: 2px solid var(--navy); }
.feed tbody th { font-weight: 800; }
.feed tr.is-near { background: #FDE3EC; }
.recipes--related { padding-inline: 0; }

/* ---------- Plain pages, account, notices ---------- */
.page-wrap { max-width: 1100px; margin: 0 auto; padding: clamp(28px, 5vw, 56px) var(--gutter) clamp(64px, 8vw, 110px); }
.page__title { font-size: clamp(48px, 7vw, 96px); }
.prose a { color: var(--cobalt); }
.woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  list-style: none; display: flex; gap: 14px; justify-content: space-between; align-items: center; flex-wrap: wrap;
  border-radius: 12px; background: #fff; padding: 14px 18px; margin: 0 0 24px; font-weight: 700; box-shadow: 0 1px 0 #0F1B3D14, 0 6px 16px -8px #0F1B3D38;
}
.woocommerce-error { background: #FDE3EC; }
.woocommerce-message .button { padding: 10px 18px 13px; }
.woocommerce form .form-row { margin: 0 0 16px; display: grid; gap: 6px; }
.woocommerce form .form-row label { font-weight: 700; font-size: 15px; }
.woocommerce form .input-text, .woocommerce form select, .woocommerce-Input {
  width: 100%; padding: 13px 16px; border: 2px solid var(--line); border-radius: 10px; background: #fff;
}
.woocommerce form .input-text:focus { border-color: var(--cobalt); outline: none; }
.woocommerce .col2-set, .u-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.woocommerce .col2-set h2, .u-columns h2 { font-size: 34px; }
.woocommerce-form-login, .woocommerce-form-register { background: #fff; border-radius: 16px; padding: 28px; }
.woocommerce-form-login__rememberme { display: flex !important; gap: 8px; align-items: center; }
.woocommerce form input[type=checkbox], .woocommerce form input[type=radio] { accent-color: var(--cobalt); width: 20px; height: 20px; margin: 0; }

/* "Show password" button: WooCommerce adds it next to password fields; this draws it as an eye inside the field.
   WooCommerce adds the class display-password while the password is visible, then the eye is crossed out. */
.password-input { position: relative; display: block; }
.password-input input { padding-inline-end: 52px !important; }
.show-password-input {
  position: absolute; inset-inline-end: 6px; top: 50%; translate: 0 -50%;
  width: 40px; height: 40px; border: 0; border-radius: 8px; padding: 0; cursor: pointer;
  background: var(--grey);
  -webkit-mask: var(--eye) center / 22px no-repeat; mask: var(--eye) center / 22px no-repeat;
  --eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}
.show-password-input:hover { background: var(--cobalt); }
.show-password-input:focus-visible { outline: 3px solid var(--pink); outline-offset: 0; }
.show-password-input.display-password {
  --eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7c2 0 3.7.6 5.1 1.5M22 12s-3.5 7-10 7c-2 0-3.7-.6-5.1-1.5'/%3E%3Cpath d='M3 3l18 18'/%3E%3C/svg%3E");
}
.lost_password a { color: var(--cobalt); }
.woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-wrap: wrap; gap: 8px; }
.woocommerce-MyAccount-navigation a { display: block; text-decoration: none; padding: 9px 16px 12px; border-radius: 10px; background: #fff; font-weight: 700; box-shadow: inset 0 0 0 2px var(--line), inset 0 -4px 0 var(--line); }
.woocommerce-MyAccount-navigation .is-active a { background: var(--cobalt); color: #fff; box-shadow: var(--rim); }
.woocommerce table.shop_table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 4px; overflow: hidden; }
.woocommerce table.shop_table th, .woocommerce table.shop_table td { padding: 12px 14px; text-align: start; border-bottom: 1px dashed var(--line); }

/* My Account > My pets */
.pets__intro { color: var(--grey); max-width: 40em; }
.pets__list { list-style: none; margin: 18px 0 28px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.pets__label:nth-child(odd) { transform: rotate(-1deg); }
.pets__label:nth-child(even) { transform: rotate(.8deg); }
.pets__edit { margin-top: 10px; }
.pets__edit summary { cursor: pointer; font-weight: 700; color: var(--cobalt); }
.pets__delete { margin-top: 6px; }
.link-button { background: none; border: 0; padding: 0; color: var(--cobalt); font-weight: 700; cursor: pointer; text-decoration: underline; }
.pets__add { background: #fff; border-radius: 16px; padding: 24px; max-width: 560px; }
.pets__add h3 { font-size: 28px; }
.pet-form select { width: 100%; padding: 12px 14px; border: 2px solid var(--line); border-radius: 10px; background: #fff; }
.woocommerce-MyAccount-content .pet-form .form-row { margin-bottom: 14px; }

/* ---------- Cart and checkout ----------
   These are WooCommerce blocks (built by WooCommerce's own scripts), so the rules below restyle their parts
   to match the shop: enamel-rim buttons and toggles, product lines like the shop cards, totals as a weigh label.
   WooCommerce's block CSS is quite specific, hence the longer selectors and some !important. */
.wc-block-cart, .wc-block-checkout { font-family: var(--body); color: var(--navy); }
.wc-block-components-button:not(.is-link) { border-radius: 12px !important; background: var(--cobalt) !important; color: #fff !important; border: 0 !important; box-shadow: var(--rim) !important; min-height: 58px; font-weight: 800 !important; font-size: 18px !important; }
.wc-block-components-button:not(.is-link):hover { background: var(--cobalt-d) !important; }
.wc-block-components-text-input input, .wc-block-components-combobox .components-combobox-control input, .wc-blocks-components-select__select, .wc-block-components-textarea { border: 2px solid var(--line) !important; border-radius: 10px !important; background: #fff !important; }
.wc-block-components-text-input input:focus, .wc-blocks-components-select__select:focus { border-color: var(--cobalt) !important; box-shadow: none !important; }

/* Column titles: plain small text, not capitals. */
.wc-block-cart .wc-block-cart-items__header, .wc-block-cart .wc-block-cart__totals-title { text-transform: none !important; font: 700 15px/1.3 var(--body) !important; color: var(--grey); letter-spacing: 0; }
.wc-block-cart .wc-block-cart-items td, .wc-block-cart .wc-block-cart-items th { border-color: var(--line) !important; }

/* Product line: image on the product's own tint, name in the headline face, details as small tags. */
.wc-block-cart-item__image img, .wc-block-components-order-summary-item__image img { border-radius: 12px; background: var(--tile-a); }
.wc-block-components-product-name { font: 400 22px/1.15 var(--display) !important; color: var(--navy) !important; text-decoration: none !important; }
.wc-block-components-product-name:hover { color: var(--cobalt) !important; }
.wc-block-cart-item__prices, .wc-block-components-product-price { font-weight: 700; }
.wc-block-components-product-metadata { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0 !important; }
.wc-block-cart .wc-block-components-product-metadata, .wc-block-checkout .wc-block-components-product-metadata { flex-direction: row !important; align-items: flex-start; }
.wc-block-components-product-metadata .wc-block-components-product-details { display: inline-flex !important; width: auto !important; margin: 0 !important; }
.wc-block-components-product-details > span, .wc-block-components-product-details li { display: inline-block; margin: 0 !important; padding: 3px 10px; border-radius: 6px; background: var(--tile-a); font-size: 13px !important; line-height: 1.5; }
.wc-block-cart-item__product .wc-block-cart-item__wrap { display: block; }
.wc-block-cart-item__quantity { margin-top: 12px; }
.wc-block-components-product-details__name { font-weight: 700; color: var(--grey); }
.wc-block-cart-item__total .wc-block-components-product-price__value { font-size: 18px; }

/* Quantity: one rimmed control with big round-ended buttons. */
.wc-block-components-quantity-selector { border: 0 !important; border-radius: 12px !important; background: #fff; box-shadow: inset 0 0 0 2px var(--line), inset 0 -4px 0 var(--line); width: 132px !important; height: 46px; overflow: hidden; }
.wc-block-components-quantity-selector::after { display: none !important; }
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__input { font: 800 17px/1 var(--body) !important; color: var(--navy); border: 0 !important; box-shadow: none !important; background: transparent !important; padding-bottom: 4px !important; }
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button { min-width: 42px; font-size: 22px !important; font-weight: 800; color: var(--cobalt) !important; opacity: 1 !important; border: 0 !important; background: transparent !important; padding-bottom: 4px !important; }
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:hover:not(:disabled) { background: var(--tile-a) !important; }
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:disabled { color: #b7bdc9 !important; }
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:focus { box-shadow: inset 0 0 0 3px var(--pink) !important; }
.wc-block-cart-item__quantity { display: flex; align-items: center; gap: 12px; }
.wc-block-cart-item__remove-link { display: inline-grid !important; place-items: center; width: 42px; height: 42px; border-radius: 12px; color: var(--grey) !important; transition: background .15s, color .15s; }
.wc-block-cart-item__remove-link:hover { background: #FDE3EC; color: #B2264F !important; }
.wc-block-cart-item__remove-link svg { width: 22px; height: 22px; fill: currentColor; }

/* Totals: a weigh label, like the rest of the shop. */
.wc-block-cart .wp-block-woocommerce-cart-totals-block, .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block {
  align-self: flex-start; height: auto !important; background: var(--label); border-radius: 4px; padding: 16px 20px 20px; border-top: 3px solid var(--navy) !important;
  box-shadow: 0 1px 0 #0F1B3D14, 0 10px 24px -12px #0F1B3D55;
}
.wc-block-cart .wc-block-cart__totals-title { padding-top: 0 !important; }
.wc-block-cart .wc-block-components-sidebar-layout, .wc-block-checkout .wc-block-components-sidebar-layout { align-items: flex-start; }
.wc-block-cart .wc-block-components-sidebar, .wc-block-checkout .wc-block-components-sidebar { align-self: flex-start; }
.wc-block-components-totals-wrapper { border-top: 1px dashed var(--line) !important; padding-inline: 0 !important; }
.wc-block-components-totals-item__label { color: var(--grey); }
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label { color: var(--navy); font-weight: 800 !important; font-size: 19px !important; }
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value { font-weight: 800 !important; font-size: 24px !important; }
.wc-block-components-panel__button { font-weight: 700 !important; color: var(--cobalt) !important; }
.wc-block-components-totals-coupon__form .wc-block-components-button { min-height: 48px; font-size: 16px !important; }

/* Delivery and payment choices: rimmed cards; the chosen one turns cobalt-edged. */
.wc-block-components-radio-control__option { border: 0 !important; border-radius: 12px !important; background: #fff; margin: 0 0 10px !important; box-shadow: inset 0 0 0 2px var(--line), inset 0 -4px 0 var(--line) !important; }
.wc-block-components-radio-control__option-checked, .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control__option-checked { box-shadow: inset 0 0 0 2px var(--cobalt), inset 0 -4px 0 var(--navy) !important; }
.wc-block-components-radio-control--highlight-checked::after, .wc-block-components-radio-control--highlight-checked > *::after { display: none !important; }
.wc-block-components-radio-control-accordion-option { border: 0 !important; border-radius: 12px !important; background: #fff; margin-bottom: 10px; box-shadow: inset 0 0 0 2px var(--line), inset 0 -4px 0 var(--line) !important; }
.wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__option { box-shadow: none !important; margin: 0 !important; }
.wc-block-components-radio-control-accordion-option:has(.wc-block-components-radio-control__option-checked) { box-shadow: inset 0 0 0 2px var(--cobalt), inset 0 -4px 0 var(--navy) !important; }
.wc-block-components-radio-control__input { border: 2px solid var(--navy) !important; width: 22px !important; height: 22px !important; min-width: 22px !important; }
.wc-block-components-radio-control__input:checked { border-color: var(--cobalt) !important; background: #fff !important; }
.wc-block-components-radio-control__input:checked::before { background: var(--cobalt) !important; width: 12px !important; height: 12px !important; }
.wc-block-components-radio-control__label, .wc-block-components-radio-control__secondary-label { font-weight: 700; color: var(--navy); }
.wc-block-components-radio-control__description, .wc-block-components-radio-control-accordion-content { color: var(--grey); font-size: 15px; }
.wc-block-components-checkbox .wc-block-components-checkbox__input[type=checkbox] { border: 2px solid var(--navy) !important; border-radius: 6px !important; width: 22px; height: 22px; }
.wc-block-components-checkbox .wc-block-components-checkbox__input[type=checkbox]:checked { background: var(--cobalt) !important; border-color: var(--cobalt) !important; }
.wc-block-components-checkbox .wc-block-components-checkbox__mark { fill: #fff !important; }
.wc-block-components-checkout-step__title { font: 400 26px/1.2 var(--display) !important; }

/* ---------- Persian: right-to-left and its fonts ---------- */
/* Logical properties above (padding-inline, inset-inline-start...) already mirror the layout.
   These rules handle what CSS cannot flip by itself. */
html[lang^="fa"] {
  --display: 'Baloo Bhaijaan 2', 'Bagel Fat One', system-ui, sans-serif;
  --body: 'Fa Digits', 'Plex Arabic', 'Atkinson', system-ui, sans-serif;
}
html[lang^="fa"] :is(.feed thead th, .label__grid dt, .label__top) { font-size: 14px; }
html[lang^="fa"] body { line-height: 1.85; }
/* Spacing out letters breaks the joined Persian script, so it is always off in Persian. */
html[lang^="fa"] :is(h1, h2, h3, .h2, .calc__q, .label__top, .label__grid dt, .feed thead th, .bowl__name) { letter-spacing: 0; }
html[lang^="fa"] :is(h1, h2, h3, .h2) { font-weight: 800; line-height: 1.3; }
html[lang^="fa"] .calc__q { line-height: 1.35; }
html[lang^="fa"] .species span, html[lang^="fa"] .sizes__kg { font-weight: 800; }
html[lang^="fa"] .label__grid dd { font-weight: 700; }
/* The range slider fills from the right in right-to-left pages. */
[dir=rtl] input[type=range]::-webkit-slider-runnable-track { background: linear-gradient(270deg, var(--cobalt) var(--p), #D5DAE3 var(--p)); }
[dir=rtl] input[type=range]::-moz-range-track { background: linear-gradient(270deg, var(--cobalt) var(--p), #D5DAE3 var(--p)); }
[dir=rtl] .scale__ticks span { translate: 50% 0; }
/* Hand-stuck stickers lean the other way in a mirrored layout. */
[dir=rtl] .calc__out .label { transform: rotate(2deg); }
[dir=rtl] .card__label { transform: rotate(1.2deg); }
[dir=rtl] .card:nth-child(even) .card__label { transform: rotate(-.9deg); }
[dir=rtl] .label--pet { transform: rotate(1deg); }
[dir=rtl] .card__link:hover .card__label { transform: none; }
/* Latin-only bits inside Persian text (prices in euros never appear here, but codes and the logo do). */
.tool--lang span { font-family: var(--body); }

/* ---------- Less motion when asked ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---------- Smaller screens ---------- */
@media (max-width: 1080px) {
  .calc { grid-template-columns: 1fr; }
  .calc__out { position: static; }
  .life, .post { grid-template-columns: 1fr; }
  .site-footer__in { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .nav { display: none; }
  .site-header { grid-template-columns: 1fr auto; }
  .tool span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .pdp { grid-template-columns: 1fr; }
  .pdp__stage { position: relative; top: 0; aspect-ratio: 4 / 3; }
  .pdp__bag { width: 36%; }
  .woocommerce .col2-set, .u-columns { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  body { font-size: 17px; }
  .concept { font-size: 13px; }
  .logo__word { font-size: 30px; }
  .pet-chip span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .calc__q { font-size: 40px; }
  .calc__row { grid-template-columns: 1fr; }
  .species span { font-size: 22px; padding-right: 16px; }
  .calc__out { padding-inline: 12px; }
  .calc__out .label { margin-top: -36px; }
  .label__grid dd { font-size: 21px; }
  .site-footer__in { grid-template-columns: 1fr; }
  .cards { grid-template-columns: 1fr; }
  .feed th, .feed td { padding: 10px 8px; font-size: 15px; }
  .woocommerce-variation-add-to-cart { flex-wrap: wrap; }
}

/* Empty cart (our own content, see inc/woocommerce.php) */
.empty-cart { padding: 8px 0 24px; }
.empty-cart__label { max-width: 520px; margin: 0 auto 48px; transform: rotate(-1deg); padding: 18px 22px 22px; }
[dir=rtl] .empty-cart__label { transform: rotate(1deg); }
.empty-cart__title { font: 400 32px/1.15 var(--display); margin: 14px 0 6px; }
.empty-cart__text { color: var(--grey); }
.empty-cart__actions { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; margin: 18px 0 0; }
.empty-cart__h { font-size: clamp(30px, 3.4vw, 44px); }
/* WooCommerce's cart colours every link inside it; keep our button and cards in their own colours. */
.empty-cart .btn { color: #fff !important; text-decoration: none !important; }
.empty-cart .card__link { color: var(--navy) !important; text-decoration: none !important; }
.empty-cart .cards { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

/* Card label cells: side by side when they fit, the second drops below when it does not
   (Toman prices are about three times longer than euro prices). Values never break mid-way. */
.card__label .label__grid--2 { display: flex; flex-wrap: wrap; column-gap: 12px; }
.card__label .label__grid--2 > div { flex: 1 1 auto; padding-inline: 0 !important; border-inline-end: 0 !important; }
.card__label .label__grid--2 > div:first-child dd { white-space: nowrap; } /* the price never breaks */
.card__label .label__grid--2 > div + div dd { overflow-wrap: anywhere; }   /* the size list may wrap at its gaps */
html[lang^="fa"] .card__name { font-size: 24px; }
html[lang^="fa"] .card__label .label__grid--2 dd { font-size: 18px; }

/* The drawn bags are packaging: their numbers stay Latin (no Persian-digits font). */
.bag__stamp, .bag__kg { font-family: 'Atkinson', system-ui, sans-serif !important; }

html[lang^="fa"] .empty-cart__title { font-weight: 800; }

/* Page not found */
.not-found { display: grid; place-items: center; min-height: 52vh; }
.not-found__label { width: min(100%, 520px); transform: rotate(-1deg); padding: 18px 22px 22px; }
[dir=rtl] .not-found__label { transform: rotate(1deg); }
.not-found__title { font-size: clamp(32px, 5vw, 44px); margin: 14px 0 6px; }
.not-found__text { color: var(--grey); }
.not-found__actions { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; margin: 18px 0 0; }

/* Buttons that are links keep white text, whatever link colour the area around them sets. */
a.button, a.btn, .woocommerce a.button, .woocommerce-info a.button, .woocommerce-message a.button { color: #fff !important; text-decoration: none !important; }
.woocommerce-info { display: grid; gap: 12px; justify-items: start; }

/* Account tables (orders, downloads) on phones: each row becomes a small card,
   each cell shows its column name (WooCommerce puts it in data-title). */
@media (max-width: 760px) {
  .woocommerce table.shop_table_responsive thead { display: none; }
  .woocommerce table.shop_table_responsive, .woocommerce table.shop_table_responsive tbody { display: block; background: none; }
  .woocommerce table.shop_table_responsive tr { display: block; background: #fff; border-radius: 12px; padding: 6px 14px; margin-bottom: 12px; box-shadow: 0 1px 0 #0F1B3D14, 0 6px 16px -8px #0F1B3D38; }
  .woocommerce table.shop_table_responsive td, .woocommerce table.shop_table_responsive th { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; text-align: end; }
  .woocommerce table.shop_table_responsive tr > :last-child { border-bottom: 0; }
  .woocommerce table.shop_table_responsive td[data-title]::before, .woocommerce table.shop_table_responsive th[data-title]::before { content: attr(data-title); font-weight: 700; color: var(--grey); text-align: start; }
  .woocommerce table.shop_table_responsive .woocommerce-orders-table__cell-order-actions { justify-content: flex-end; }
  .woocommerce table.shop_table_responsive .woocommerce-orders-table__cell-order-actions::before { content: none; }
}

/* Order pages (order received, view order) */
mark { background: #FDE3EC; color: var(--navy); padding: 0 4px; border-radius: 3px; font-weight: 700; }
.wc-item-meta { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.wc-item-meta li { display: inline-flex; gap: 4px; margin: 0; padding: 3px 10px; border-radius: 6px; background: var(--tile-a); font-size: 14px; }
.wc-item-meta li p { margin: 0; display: inline; }
.wc-item-meta .wc-item-meta-label { font-weight: 700; color: var(--grey); }
.woocommerce-order-details__title, .woocommerce-column__title, .woocommerce-customer-details h2, .woocommerce-order h2 { font-size: clamp(26px, 3vw, 34px); margin-top: 32px; }
.woocommerce-customer-details address { font-style: normal; background: #fff; border-radius: 12px; padding: 14px 18px; line-height: 1.8; }
.woocommerce-order-overview { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.woocommerce-order-overview li { background: #fff; border-radius: 10px; padding: 10px 14px; font-size: 14px; color: var(--grey); }
.woocommerce-order-overview li strong { display: block; color: var(--navy); font-size: 17px; }

/* Card to card: the "how to pay" box on order pages, printed like a weigh label (white, dark top edge),
   three numbered steps; the current one is marked in pink, finished ones get a tick. */
.kp-pay { background: var(--label); border-top: 3px solid var(--navy); border-radius: 4px; padding: clamp(18px, 3vw, 28px); margin: 28px 0; box-shadow: 0 1px 0 #0F1B3D14, 0 10px 26px -14px #0F1B3D55; max-width: 720px; }
.kp-pay h2 { font-size: clamp(26px, 3vw, 34px); margin: 0 0 6px; }
.kp-pay__total { margin: 0 0 18px; color: var(--grey); }
.kp-pay__total strong { display: block; color: var(--navy); font-size: 26px; line-height: 1.2; }
.kp-pay__steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: 4px; border-top: 1px dashed #d5dae3; }
.kp-pay__steps li { counter-increment: step; display: grid; grid-template-columns: 34px 1fr; column-gap: 12px; padding: 12px 0; border-bottom: 1px dashed #d5dae3; color: var(--grey); }
.kp-pay__steps li::before { content: counter(step); grid-row: span 2; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 15px; background: var(--tile-a); color: var(--navy); }
.kp-pay__steps li b { color: var(--navy); }
.kp-pay__steps li span { font-size: 15px; }
.kp-pay__steps li.is-now::before { background: var(--pink); }
.kp-pay__steps li.is-done::before { content: '✓'; background: var(--cobalt); color: #fff; }
[lang|=fa] .kp-pay__steps li::before { content: counter(step, persian); }
[lang|=fa] .kp-pay__steps li.is-done::before { content: '✓'; }

/* Sticky mini label (phones only): follows the grams and days while the bowl is out of view. */
.calc__mini { display: none; }
@media (max-width: 1080px) {
  .calc__mini {
    display: flex; gap: 12px; align-items: center; justify-content: space-between;
    position: fixed; inset-inline: 12px; bottom: 12px; z-index: 40;
    background: var(--label); border-radius: 4px; padding: 12px 16px; border-top: 3px solid var(--navy);
    box-shadow: 0 10px 30px -10px #0F1B3D66; font-weight: 700; font-size: 16px;
    translate: 0 140%; transition: translate .3s cubic-bezier(.2, .8, .2, 1);
  }
  .calc__mini.is-on { translate: 0 0; }
  .calc__mini strong { color: var(--navy); }
}