/* ===============================================================
   Tera Home Bakery, customer page
   Palette and line art are taken from the reference images:
   cream paper, warm tan, one deep brown for ink and the footer.
   =============================================================== */

:root {
  --paper:      #ebddca;
  --white:      #ffffff;
  --cream:      #faf3e8;
  --cream-deep: #f4e7d5;
  --tan:        #e5cbb0;
  --ink:        #3a251a;
  --brown:      #5a3a28;
  --deep:       #4a2e20;
  --muted:      #8b7563;
  --line:       #e8dccd;
  --star:       #c08a3e;
  --ok:         #4f7a52;

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Jost", "Segoe UI", system-ui, -apple-system, sans-serif;

  --r: 6px;
  --r-lg: 10px;
  --shadow: 0 1px 2px rgba(58, 37, 26, .05), 0 12px 32px rgba(58, 37, 26, .07);
  --ease: cubic-bezier(.32, .72, .38, 1);
}

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

/* several things below set display, which would beat the hidden attribute */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--white);
  color: var(--brown);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
svg { display: block; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -.012em;
  margin: 0;
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 50%; top: -60px;
  transform: translateX(-50%);
  background: var(--deep); color: var(--cream);
  padding: .7rem 1.2rem; border-radius: 0 0 var(--r) var(--r);
  text-decoration: none; z-index: 100;
}
.skip-link:focus { top: 0; }

:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--brown);
  outline-offset: 2px;
}

/* ---------- the white sheet the whole site sits on ---------- */

.page {
  background: var(--white);
}

.container {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 40px;
}

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

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .55rem;
  font-family: var(--font-body);
  font-size: .95rem; font-weight: 500;
  letter-spacing: .01em;
  padding: .85rem 1.6rem;
  border-radius: var(--r);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.btn svg { width: 18px; height: 18px; }

.btn-primary { background: var(--deep); color: var(--cream); }
.btn-primary:hover { background: #3a2318; }

.btn-ghost { background: transparent; color: var(--brown); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--brown); }

.btn-block { width: 100%; }

.btn[disabled] { opacity: .45; cursor: not-allowed; }

.icon-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  padding: 0; border: 0; border-radius: var(--r);
  background: transparent; color: var(--brown);
  cursor: pointer;
  transition: background-color .18s var(--ease);
}
.icon-btn:hover { background: var(--cream); }
.icon-btn svg { width: 21px; height: 21px; }

/* ---------- header ---------- */

.site-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 74px;
}

.brand {
  display: flex; align-items: center; gap: .7rem;
  text-decoration: none; color: var(--brown);
  margin-right: auto;
}
.brand-mark { width: 38px; height: 38px; color: var(--brown); flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name { font-family: var(--font-display); font-size: 1.3rem; color: var(--ink); }
.brand-kind { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }

.nav { display: flex; gap: 2rem; }
.nav a {
  position: relative;
  font-size: .92rem;
  text-decoration: none;
  color: var(--brown);
  padding: .3rem 0;
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--brown);
  transform: scaleX(0); transform-origin: left;
  transition: transform .2s var(--ease);
}
.nav a:hover::after { transform: scaleX(1); }

.header-actions { display: flex; align-items: center; gap: .25rem; }
.nav-toggle { display: none; }

.cart-count {
  position: absolute; top: 2px; right: 2px;
  min-width: 18px; height: 18px; padding: 0 4px;
  display: grid; place-items: center;
  background: var(--deep); color: var(--cream);
  font-size: .68rem; line-height: 1;
  border-radius: 9px;
}

/* ---------- hero ---------- */

.hero { padding: clamp(2.5rem, 6vw, 5rem) 0 0; background: var(--white); }

.hero-inner {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: 3rem;
}

.eyebrow {
  font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 1.1rem;
}

.hero h1 {
  font-size: clamp(2.1rem, 4.6vw, 3.35rem);
  line-height: 1.1;
  max-width: 15ch;
}

.hero-lead {
  margin-top: 1.3rem;
  max-width: 46ch;
  font-size: 1.03rem;
  color: var(--muted);
}

.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

.hero-art {
  background: var(--cream);
  border-radius: var(--r-lg);
  padding: 1.5rem;
  display: grid; place-items: center;
}
.hero-art svg { width: 100%; max-width: 380px; height: auto; color: var(--brown); }
.hero-art { padding: 0; overflow: hidden; }
.hero-art img {
  width: 100%; height: 100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: var(--r-lg);
}

.hero-facts {
  display: flex; flex-wrap: wrap; gap: 1rem 2.5rem;
  justify-content: center;
  margin-top: clamp(2rem, 5vw, 3.5rem);
  padding-top: 1.5rem; padding-bottom: 1.5rem;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.hero-facts li { display: flex; align-items: center; gap: .6rem; font-size: .88rem; color: var(--muted); }
.hero-facts svg { width: 18px; height: 18px; color: var(--brown); flex: none; }

/* ---------- section shell ---------- */

.section { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.section-cream { background: var(--cream); }
.section-tan { background: var(--cream-deep); }

.section-head { text-align: center; max-width: 60ch; margin: 0 auto clamp(2rem, 4vw, 3rem); }
.section-num {
  font-family: var(--font-display);
  font-size: .95rem; color: var(--muted); margin-bottom: .4rem;
}
.section-title { font-size: clamp(1.75rem, 3.4vw, 2.5rem); }
.section-sub { margin-top: .9rem; color: var(--muted); font-size: .97rem; }

/* ---------- filters ---------- */

.catalog-controls {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center; gap: .6rem;
  margin-bottom: 2.75rem;
}

.chips { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }

/* Pill chips are kept on purpose: they match the reference layout. */
.chip {
  font-family: var(--font-body);
  font-size: .8rem; letter-spacing: .06em; text-transform: uppercase;
  padding: .62rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white); color: var(--brown);
  cursor: pointer;
  transition: border-color .18s var(--ease), background-color .18s var(--ease), color .18s var(--ease);
}
.chip:hover { border-color: var(--brown); }
.chip[aria-pressed="true"] { background: var(--deep); border-color: var(--deep); color: var(--cream); }

.sort { position: relative; display: inline-flex; }
.sort select {
  appearance: none;
  font-family: var(--font-body); font-size: .8rem;
  letter-spacing: .06em; text-transform: uppercase;
  padding: .62rem 2.6rem .62rem 1.4rem;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--white); color: var(--brown);
  cursor: pointer;
}
.sort::after {
  content: ""; position: absolute; right: 1.15rem; top: 50%;
  width: 7px; height: 7px; margin-top: -5px;
  border-right: 1.5px solid var(--brown); border-bottom: 1.5px solid var(--brown);
  transform: rotate(45deg); pointer-events: none;
}

.grid-heading {
  text-align: center;
  font-size: clamp(1.3rem, 2.4vw, 1.75rem);
  margin-bottom: 2.25rem;
}

/* ---------- product grid ---------- */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  gap: 2.75rem 1.75rem;
}

.grid-empty { text-align: center; color: var(--muted); padding: 2rem 0; }

.card { display: flex; flex-direction: column; }

.card-media {
  position: relative;
  background: var(--cream);
  border-radius: var(--r);
  overflow: hidden;
  aspect-ratio: 4 / 3.4;
}
.card-media svg { width: 100%; height: 100%; color: var(--brown); }
.card-media img { width: 100%; height: 100%; object-fit: cover; }

.card-serves {
  position: absolute; left: .7rem; bottom: .7rem;
  background: rgba(255, 255, 255, .9);
  color: var(--brown);
  font-size: .7rem; letter-spacing: .04em;
  padding: .28rem .6rem; border-radius: var(--r);
}

.card-body { padding-top: 1rem; display: flex; flex-direction: column; flex: 1; }

.card-name { font-size: 1.08rem; line-height: 1.3; }

.card-desc {
  margin-top: .45rem;
  font-size: .87rem; line-height: 1.6;
  color: var(--muted);
  flex: 1;
}

.card-rating { display: flex; align-items: center; gap: .55rem; margin-top: .8rem; }

.stars { display: flex; gap: 1px; }
.star {
  width: 26px; height: 26px; padding: 3px;
  border: 0; background: none; cursor: pointer;
  color: var(--line);
  transition: color .12s var(--ease), transform .12s var(--ease);
}
.star svg { width: 100%; height: 100%; fill: none; }
.star.is-on { color: var(--star); }
.star.is-on svg { fill: currentColor; }
.stars:hover .star { color: var(--line); }
.stars:hover .star.is-on svg,
.star.is-on svg { fill: currentColor; }
.stars:hover .star.is-hot { color: var(--star); }
.star:hover { transform: translateY(-1px); }

.rating-meta { font-size: .78rem; color: var(--muted); }
.rating-meta.is-yours { color: var(--ok); }

.card-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; margin-top: .9rem;
  padding-top: .9rem; border-top: 1px solid var(--line);
}
.price { font-family: var(--font-display); font-size: 1.05rem; color: var(--ink); }

.add-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--font-body); font-size: .82rem; font-weight: 500;
  letter-spacing: .04em;
  padding: .5rem 1rem;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--white); color: var(--brown);
  cursor: pointer;
  transition: background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.add-btn svg { width: 14px; height: 14px; }
.add-btn:hover { background: var(--deep); border-color: var(--deep); color: var(--cream); }
.add-btn.is-added { background: var(--cream); border-color: var(--brown); }

/* ---------- how to order ---------- */

.steps {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  counter-reset: step;
}
.steps li {
  background: var(--white);
  border-radius: var(--r);
  padding: 2rem 1.75rem;
}
.step-num {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border: 1px solid var(--brown); border-radius: 50%;
  font-family: var(--font-display); font-size: .95rem; color: var(--ink);
  margin-bottom: 1.1rem;
}
.steps h3 { font-size: 1.15rem; }
.steps p { margin-top: .5rem; font-size: .9rem; color: var(--muted); }

/* ---------- notes ---------- */

.notes-layout {
  display: grid; grid-template-columns: 380px 1fr; gap: 3rem;
  align-items: start;
}

.field { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1.1rem; position: relative; }
.field label, .field legend {
  font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  padding: 0;
}
.field .optional { text-transform: none; letter-spacing: 0; font-size: .75rem; opacity: .75; }

.field input,
.field textarea,
.field select {
  font-family: var(--font-body); font-size: .95rem; color: var(--brown);
  padding: .75rem .9rem;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--white);
  width: 100%;
  transition: border-color .18s var(--ease);
}
.field textarea { resize: vertical; min-height: 96px; }
.field input:hover, .field textarea:hover { border-color: #d6c6b2; }
.field input:focus, .field textarea:focus { border-color: var(--brown); }

.field-count { align-self: flex-end; font-size: .72rem; color: var(--muted); }
.field-error { color: #a14b3a; font-size: .85rem; margin-bottom: .8rem; }

.field-radio { border: 0; margin: 0 0 1.1rem; padding: 0; }
.field-radio legend { margin-bottom: .45rem; }
.field-radio label {
  display: inline-flex; align-items: center; gap: .45rem;
  margin-right: 1.25rem;
  font-size: .92rem; text-transform: none; letter-spacing: 0; color: var(--brown);
}
.field-radio input { width: auto; accent-color: var(--deep); }

.comment-list { display: flex; flex-direction: column; gap: 1.25rem; }

.comment {
  display: grid; grid-template-columns: 42px 1fr; gap: 1rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--line);
}
.comment:last-child { border-bottom: 0; padding-bottom: 0; }

.comment-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--cream); color: var(--brown);
  font-family: var(--font-display); font-size: 1rem;
}
.comment-head { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.comment-name { font-family: var(--font-display); font-size: 1rem; color: var(--ink); }
.comment-time { font-size: .75rem; color: var(--muted); }
.comment-text { margin-top: .3rem; font-size: .93rem; white-space: pre-wrap; overflow-wrap: anywhere; }

.comment-empty {
  border: 1px dashed var(--line); border-radius: var(--r);
  padding: 2.5rem 1.5rem; text-align: center; color: var(--muted); font-size: .92rem;
}

/* ---------- contact ---------- */

.contact-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.25rem;
}
.contact-item {
  display: flex; flex-direction: column; gap: .3rem;
  background: var(--white);
  border-radius: var(--r);
  padding: 1.6rem 1.5rem;
  text-decoration: none;
  transition: transform .18s var(--ease);
}
a.contact-item:hover { transform: translateY(-2px); }
.contact-item svg { width: 22px; height: 22px; color: var(--brown); margin-bottom: .6rem; }
.contact-label { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.contact-value { font-size: .97rem; color: var(--ink); overflow-wrap: anywhere; }

/* ---------- footer ---------- */

.site-footer { background: var(--deep); color: var(--cream); padding: 2.5rem 0 1.75rem; }

.footer-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
}
.footer-links { display: flex; gap: 1.75rem; flex-wrap: wrap; }
.footer-links a, .legal-links a { font-size: .85rem; text-decoration: none; opacity: .8; }
.footer-links a:hover, .legal-links a:hover { opacity: 1; text-decoration: underline; }

.footer-brand {
  display: flex; align-items: center; gap: .6rem;
  font-family: var(--font-display); font-size: 1.4rem;
  text-decoration: none; color: var(--cream);
}
/* on the dark footer the mark is drawn in cream, so the shapes behind
   it take the footer colour instead of cream, or the lines disappear */
.footer-brand .brand-mark {
  width: 34px; height: 34px; color: var(--cream);
  --mark-bun: var(--deep);
  --mark-face: var(--deep);
}

.footer-social { display: flex; gap: .5rem; }
.footer-social a {
  display: grid; place-items: center; width: 36px; height: 36px;
  border: 1px solid rgba(250, 243, 232, .25); border-radius: var(--r);
  color: var(--cream);
  transition: background-color .18s var(--ease);
}
.footer-social a:hover { background: rgba(250, 243, 232, .12); }
.footer-social svg { width: 17px; height: 17px; }

.footer-legal {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem;
  margin-top: 2rem; padding-top: 1.25rem;
  border-top: 1px solid rgba(250, 243, 232, .18);
  font-size: .8rem; opacity: .75;
}
.legal-links { display: flex; gap: .6rem; }

/* ---------- basket drawer ---------- */

.overlay {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(58, 37, 26, .35);
  opacity: 0;
  transition: opacity .25s var(--ease);
}
.overlay.is-on { opacity: 1; }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 60;
  width: min(430px, 100%);
  display: flex; flex-direction: column;
  background: var(--white);
  transform: translateX(100%);
  transition: transform .3s var(--ease);
  visibility: hidden;
}
.drawer.is-open { transform: translateX(0); visibility: visible; }

.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--line);
  flex: none;
}
.drawer-head h2 { font-size: 1.25rem; }

.drawer-body { flex: 1; overflow-y: auto; padding: 1.5rem; }

.cart-lines { display: flex; flex-direction: column; gap: 1.1rem; }

.cart-line {
  display: grid; grid-template-columns: 62px 1fr auto; gap: .9rem;
  align-items: center;
}
.cart-thumb {
  width: 62px; height: 62px; border-radius: var(--r);
  background: var(--cream); overflow: hidden;
}
.cart-thumb svg { width: 100%; height: 100%; color: var(--brown); }
.cart-thumb img { width: 100%; height: 100%; object-fit: cover; }

.cart-name { font-family: var(--font-display); font-size: .98rem; color: var(--ink); line-height: 1.25; }
.cart-price { font-size: .82rem; color: var(--muted); margin-top: .15rem; }

.cart-side { display: flex; flex-direction: column; align-items: flex-end; gap: .4rem; }
.qty { display: flex; align-items: center; border: 1px solid var(--line); border-radius: var(--r); }
.qty button {
  width: 28px; height: 28px; display: grid; place-items: center;
  border: 0; background: none; color: var(--brown); cursor: pointer;
}
.qty button:hover { background: var(--cream); }
.qty button svg { width: 13px; height: 13px; }
.qty output { min-width: 26px; text-align: center; font-size: .88rem; }

.line-remove {
  border: 0; background: none; padding: 0;
  font-size: .75rem; color: var(--muted); cursor: pointer;
  text-decoration: underline;
}
.line-remove:hover { color: var(--brown); }

.cart-empty { color: var(--muted); font-size: .93rem; text-align: center; padding: 2.5rem 0; }

.order-form { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.order-form h3 { font-size: 1.05rem; margin-bottom: 1rem; }

.drawer-foot { flex: none; padding: 1.25rem 1.5rem 1.5rem; border-top: 1px solid var(--line); background: var(--white); }
.total-row {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 1rem;
}
.total-row span { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.total-row strong { font-family: var(--font-display); font-size: 1.4rem; font-weight: 400; color: var(--ink); }
.drawer-note { margin-top: .8rem; font-size: .76rem; color: var(--muted); line-height: 1.5; }

/* ---------- toast ---------- */

.toast {
  position: fixed; left: 50%; bottom: 28px; z-index: 70;
  transform: translate(-50%, 16px);
  background: var(--deep); color: var(--cream);
  padding: .8rem 1.3rem; border-radius: var(--r);
  font-size: .88rem;
  opacity: 0; pointer-events: none;
  transition: opacity .2s var(--ease), transform .2s var(--ease);
  max-width: calc(100vw - 32px);
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- legal pages ---------- */

.legal { padding: clamp(3rem, 6vw, 5rem) 0; }
.legal .container { max-width: 720px; }
.legal h1 { font-size: clamp(1.9rem, 4vw, 2.7rem); }
.legal h2 { font-size: 1.25rem; margin: 2.25rem 0 .6rem; }
.legal p, .legal li { color: var(--muted); font-size: .96rem; margin-bottom: .8rem; }
.legal ul { list-style: disc; padding-left: 1.2rem; }
.legal .updated { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; margin-top: 1rem; }
.legal .back { display: inline-block; margin-top: 2.5rem; font-size: .9rem; }

/* ---------- responsive ---------- */

@media (max-width: 980px) {
  .hero-inner { grid-template-columns: 1fr; gap: 2rem; }
  .hero-art { order: -1; padding: 1rem; }
  .hero-art svg { max-width: 280px; }
  .hero h1 { max-width: 20ch; }
  .steps { grid-template-columns: 1fr; gap: 1rem; }
  .notes-layout { grid-template-columns: 1fr; gap: 2.5rem; }
}

@media (max-width: 860px) {
  .container { padding: 0 20px; }
  .nav-toggle { display: inline-flex; }
  .nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    padding: .5rem 20px 1rem;
    display: none;
  }
  .nav.is-open { display: flex; }
  .nav a { padding: .8rem 0; border-bottom: 1px solid var(--line); }
  .nav a:last-child { border-bottom: 0; }

  /* the privacy and terms pages carry no menu button, so their
     short nav stays in the header instead of collapsing */
  .nav-static {
    display: flex; position: static; flex-direction: row;
    gap: 1.25rem; padding: 0; border-bottom: 0; margin-left: auto;
  }
  .nav-static a { padding: .3rem 0; border-bottom: 0; font-size: .85rem; }
  .site-header { position: relative; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
  .footer-brand { order: -1; }
}

@media (max-width: 560px) {
  .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1.75rem 1rem; }
  .card-desc { display: none; }
  .card-foot { flex-direction: column; align-items: flex-start; gap: .55rem; }
  .add-btn { width: 100%; justify-content: center; }
  .catalog-controls { justify-content: flex-start; }
  .chips { justify-content: flex-start; }
  .hero-facts { gap: .75rem 1.5rem; }
  .drawer-body { padding: 1.25rem; }
}

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

/* ===============================================================
   Menu manager (owner.html)
   Same palette and shapes as the shop page, denser layout.
   =============================================================== */

.inline-icon { display: inline-block; width: 15px; height: 15px; vertical-align: -2px; margin-right: .3rem; }
.nav-static a { display: inline-flex; align-items: center; }

.section-tight { padding-top: clamp(2.25rem, 4vw, 3.25rem); }
.section-head-left { text-align: left; margin-left: 0; max-width: 62ch; }

.btn-small { padding: .58rem 1rem; font-size: .85rem; }
.btn-small svg { width: 15px; height: 15px; }

.btn-danger { background: transparent; color: #a14b3a; border-color: #e2c9c1; }
.btn-danger:hover { background: #fbf1ee; border-color: #a14b3a; }
.btn.is-armed { background: #a14b3a; border-color: #a14b3a; color: var(--cream); }

.icon-btn-small { width: 32px; height: 32px; border: 1px solid var(--line); }
.icon-btn-small svg { width: 15px; height: 15px; }
.icon-btn-small[disabled] { opacity: .3; cursor: not-allowed; }
.icon-btn-small[disabled]:hover { background: transparent; }

/* ---------- toolbar ---------- */

.tool-row {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}
.tool-count { font-size: .85rem; color: var(--muted); }
.tool-sep { margin: 0 .4rem; opacity: .5; }
.tool-actions { display: flex; flex-wrap: wrap; gap: .5rem; }

/* ---------- the item list ---------- */

.item-list { display: flex; flex-direction: column; }

.item-row {
  display: grid;
  grid-template-columns: 58px 1fr auto auto;
  align-items: center;
  gap: 1.1rem;
  padding: .9rem 0;
  border-bottom: 1px solid var(--line);
}
.item-row:last-child { border-bottom: 0; }

.item-thumb {
  width: 58px; height: 58px;
  border-radius: var(--r);
  background: var(--cream);
  overflow: hidden;
}
.item-thumb svg { width: 100%; height: 100%; color: var(--brown); }
.item-thumb img { width: 100%; height: 100%; object-fit: cover; }

.item-name { font-family: var(--font-display); font-size: 1.05rem; color: var(--ink); line-height: 1.3; }
.item-meta { font-size: .8rem; color: var(--muted); margin-top: .15rem; }
.item-price { font-family: var(--font-display); font-size: 1rem; color: var(--ink); white-space: nowrap; }

.row-actions { display: flex; align-items: center; gap: .35rem; }

/* ---------- publishing ---------- */

.notice {
  background: var(--white);
  border-left: 3px solid var(--brown);
  border-radius: 0 var(--r) var(--r) 0;
  padding: 1.35rem 1.5rem;
  margin-bottom: 1.5rem;
  max-width: 68ch;
}
.notice p { font-size: .93rem; color: var(--muted); }
.notice p + p { margin-top: .7rem; }
.notice strong { color: var(--ink); font-weight: 500; }
.notice code, .legal code {
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: .87em;
  background: var(--cream-deep);
  padding: .1em .35em;
  border-radius: 3px;
}

.publish-actions { display: flex; flex-wrap: wrap; gap: .6rem; }

.code-box {
  margin-top: 1.5rem;
  max-height: 340px; overflow: auto;
  background: var(--white);
  border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.1rem 1.25rem;
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: .78rem; line-height: 1.7;
  color: var(--brown);
  white-space: pre;
  -moz-tab-size: 2; tab-size: 2;
}

/* ---------- the editor ---------- */

.drawer-wide { width: min(520px, 100%); }

.editor-label {
  display: block;
  font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); margin-bottom: .5rem;
}

.preview-wrap {
  max-width: 236px;
  margin-bottom: 2rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--line);
}
.preview-wrap .card-desc { display: block; }
.preview-wrap .star { cursor: default; }
.preview-wrap .add-btn { cursor: default; }

.editor-form .field:last-of-type { margin-bottom: 0; }

.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.field-hint { font-size: .78rem; color: var(--muted); line-height: 1.5; margin-top: .1rem; }

.illo-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }

.illo-option {
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  padding: .5rem .3rem .55rem;
  background: var(--cream);
  border: 1px solid transparent; border-radius: var(--r);
  color: var(--brown); cursor: pointer;
  transition: border-color .18s var(--ease);
}
.illo-option svg { width: 100%; height: 46px; --illo-tint: #eddcc4; }
.illo-option span { font-size: .72rem; color: var(--muted); }
.illo-option:hover { border-color: #d6c6b2; }
.illo-option.is-on { border-color: var(--brown); background: var(--cream-deep); }
.illo-option.is-on span { color: var(--brown); }

.swatches { display: flex; flex-wrap: wrap; gap: .4rem; }
.swatch {
  width: 32px; height: 32px;
  border: 1px solid rgba(58, 37, 26, .18); border-radius: var(--r);
  cursor: pointer; padding: 0;
  transition: transform .15s var(--ease), box-shadow .15s var(--ease);
}
.swatch:hover { transform: translateY(-1px); }
.swatch.is-on { box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--brown); }

.swatch-custom {
  display: inline-flex; align-items: center; gap: .55rem;
  margin-top: .75rem;
  font-size: .82rem; color: var(--muted);
  text-transform: none; letter-spacing: 0;
}
.swatch-custom input {
  width: 34px; height: 30px; padding: 2px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--white); cursor: pointer;
}

.editor-buttons { display: flex; gap: .6rem; }
.editor-buttons .btn-primary { flex: 1; }

/* ---------- responsive ---------- */

@media (max-width: 720px) {
  .item-row {
    grid-template-columns: 52px 1fr auto;
    grid-template-areas: "thumb info price" "actions actions actions";
    gap: .75rem 1rem;
    padding: 1rem 0;
  }
  .item-thumb { grid-area: thumb; width: 52px; height: 52px; }
  .item-info { grid-area: info; }
  .item-price { grid-area: price; }
  .row-actions { grid-area: actions; justify-content: flex-start; }
  .tool-row { align-items: flex-start; }
  .tool-actions { width: 100%; }
  .tool-actions .btn { flex: 1; justify-content: center; }
  .field-pair { grid-template-columns: 1fr; gap: 0; }
  .preview-wrap { max-width: 200px; }
  .publish-actions .btn { flex: 1; justify-content: center; }
}

/* ---------- owner password gate ---------- */

.owner-lock {
  background: var(--cream-deep);
  border-bottom: 1px solid var(--line);
  padding: 1.5rem 0;
}
.lock-form {
  display: flex; align-items: flex-end; gap: .75rem; flex-wrap: wrap;
}
.lock-form .field { margin-bottom: 0; min-width: 230px; }
.owner-lock .field-hint { margin-top: .6rem; max-width: 60ch; }
.owner-lock .field-error { margin: .6rem 0 0; }

/* With no password entered the menu can be read but not changed.
   The buttons stay where they are and go quiet, because a control
   that vanishes just looks like the page is broken. */
body.is-locked .tool-actions,
body.is-locked .row-actions {
  opacity: .4;
  pointer-events: none;
}

/* ---------- when the server cannot be reached ---------- */

.load-error {
  max-width: 62ch;
  margin: 1rem auto 0;
  background: var(--cream);
  border: 1px solid var(--line);
  border-left: 3px solid #a14b3a;
  border-radius: 0 var(--r) var(--r) 0;
  padding: 1.6rem 1.75rem;
}
.load-error h3 { font-size: 1.15rem; margin-bottom: .6rem; }
.load-error p { color: var(--muted); font-size: .94rem; }
.load-error ol {
  list-style: decimal; padding-left: 1.3rem; margin-top: 1rem;
  color: var(--muted); font-size: .92rem;
}
.load-error li { margin-bottom: .35rem; }

/* ---------- the real logo ---------- */

img.brand-mark {
  width: 44px; height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}
.footer-brand img.brand-mark {
  width: 40px; height: 40px;
  /* the mark is dark on dark down here, so give it an edge */
  box-shadow: 0 0 0 1px rgba(250, 243, 232, .35);
}

/* ===============================================================
   Arabic and right to left
   =============================================================== */

.lang-btn {
  font-family: var(--font-body);
  font-size: .82rem; font-weight: 500;
  letter-spacing: .02em;
  padding: .45rem .8rem;
  margin-inline-end: .25rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: transparent;
  color: var(--brown);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .18s var(--ease), background-color .18s var(--ease);
}
.lang-btn:hover { border-color: var(--brown); background: var(--cream); }

/* Arabic needs its own faces: the Latin ones have no Arabic glyphs */
:root[lang="ar"] {
  --font-display: "Cairo", "Tajawal", "Segoe UI", sans-serif;
  --font-body: "Tajawal", "Jost", "Segoe UI", system-ui, sans-serif;
}
/* the headline carries the shop, so it is set heavy */
:root[lang="ar"] .hero h1 { font-weight: 700; }
:root[lang="ar"] h2, :root[lang="ar"] h3 { font-weight: 600; }
:root[lang="ar"] body { line-height: 1.8; }
:root[lang="ar"] h1,
:root[lang="ar"] h2,
:root[lang="ar"] h3 { letter-spacing: 0; line-height: 1.35; }

/* uppercase and wide tracking do nothing for Arabic, they only hurt it */
:root[lang="ar"] .eyebrow,
:root[lang="ar"] .brand-kind,
:root[lang="ar"] .chip,
:root[lang="ar"] .sort select,
:root[lang="ar"] .contact-label,
:root[lang="ar"] .field label,
:root[lang="ar"] .field legend,
:root[lang="ar"] .editor-label,
:root[lang="ar"] .total-row span {
  text-transform: none;
  letter-spacing: 0;
}
:root[lang="ar"] .eyebrow { font-size: .8rem; }
:root[lang="ar"] .brand-kind { font-size: .74rem; }

/* ---------- the mirrored bits ---------- */

[dir="rtl"] .brand { margin-right: 0; margin-left: auto; }
[dir="rtl"] .nav a::after { transform-origin: right; }
[dir="rtl"] .cart-count { right: auto; left: 2px; }
[dir="rtl"] .card-serves { left: auto; right: .7rem; }
[dir="rtl"] .notice { border-left: 0; border-right: 3px solid var(--brown); border-radius: var(--r) 0 0 var(--r); }
[dir="rtl"] .load-error { border-left: 0; border-right: 3px solid #a14b3a; border-radius: var(--r) 0 0 var(--r); }
[dir="rtl"] .legal ul { padding-left: 0; padding-right: 1.2rem; }
[dir="rtl"] .load-error ol { padding-left: 0; padding-right: 1.3rem; }
[dir="rtl"] .inline-icon { margin-right: 0; margin-left: .3rem; }
[dir="rtl"] .sort::after { right: auto; left: 1.15rem; }
[dir="rtl"] .sort select { padding: .62rem 1.4rem .62rem 2.6rem; }
[dir="rtl"] .field-radio label { margin-right: 0; margin-left: 1.25rem; }

/* the basket slides in from the other side */
[dir="rtl"] .drawer { right: auto; left: 0; transform: translateX(-100%); }
[dir="rtl"] .drawer.is-open { transform: translateX(0); }

/* prices and the order reference stay left to right inside Arabic */
[dir="rtl"] .price,
[dir="rtl"] .item-price,
[dir="rtl"] .cart-price,
[dir="rtl"] .total-row strong,
[dir="rtl"] .contact-value {
  direction: ltr;
  unicode-bidi: embed;
}
[dir="rtl"] .price,
[dir="rtl"] .total-row strong { text-align: right; }

/* stars read the same way round in both languages */
[dir="rtl"] .stars { flex-direction: row-reverse; }

@media (max-width: 560px) {
  .lang-btn { padding: .4rem .55rem; font-size: .78rem; }
}

/* ---------- the Arabic block in the editor ---------- */

.arabic-block {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1rem 1.1rem 1.1rem;
  margin-bottom: 1.1rem;
}
.arabic-block legend {
  padding: 0 .4rem;
  font-size: .76rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
}
.arabic-block .sub-label {
  display: block;
  font-size: .75rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted);
  margin: .7rem 0 .3rem;
}
.arabic-block .sub-label:first-of-type { margin-top: 0; }
.arabic-block input,
.arabic-block textarea {
  font-family: "Tajawal", var(--font-body);
  font-size: .95rem;
  padding: .7rem .9rem;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--white); color: var(--brown);
  width: 100%;
}
.arabic-block textarea { resize: vertical; min-height: 78px; }
.arabic-block .field-hint { margin-top: .6rem; }

.needs-ar {
  display: inline-block;
  margin-inline-start: .35rem;
  padding: .05rem .4rem;
  border-radius: 3px;
  background: var(--cream-deep);
  color: var(--muted);
  font-size: .72rem;
}

/* ---------- the owner star, and the code it asks for ---------- */

.star-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  padding: 0; border: 0; border-radius: var(--r);
  background: transparent;
  color: var(--brown);
  cursor: pointer;
  opacity: .5;
  transition: opacity .18s var(--ease), background-color .18s var(--ease);
}
.star-btn svg { width: 17px; height: 17px; fill: currentColor; }
.star-btn:hover { opacity: 1; background: var(--cream); }

.code-dialog {
  position: fixed; inset: 0; z-index: 80;
  display: grid; place-items: center;
  padding: 20px;
  background: rgba(58, 37, 26, .4);
  opacity: 0;
  transition: opacity .2s var(--ease);
}
.code-dialog.is-on { opacity: 1; }

.code-panel {
  width: 100%; max-width: 320px;
  background: var(--white);
  border-radius: var(--r-lg);
  padding: 1.6rem 1.5rem 1.4rem;
  box-shadow: 0 18px 50px rgba(58, 37, 26, .22);
}
.code-panel h2 { font-size: 1.2rem; margin-bottom: 1rem; }

.code-panel input {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1.35rem;
  letter-spacing: .4em;
  text-align: center;
  padding: .7rem .6rem;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--white); color: var(--ink);
}
.code-panel input:focus { border-color: var(--brown); outline: none; }

.code-error { margin-top: .7rem; font-size: .85rem; color: #a14b3a; }

.code-actions { display: flex; gap: .6rem; margin-top: 1.2rem; }
.code-actions .btn { flex: 1; padding: .7rem 1rem; }

[dir="rtl"] .code-actions { flex-direction: row-reverse; }

/* ---------- the header has a lot in it on a small phone ---------- */

@media (max-width: 460px) {
  .header-inner { gap: .5rem; min-height: 64px; }
  .brand { gap: .5rem; }
  img.brand-mark { width: 34px; height: 34px; }
  .brand-name { font-size: 1.1rem; }
  /* the second line is the first thing to go, the name carries it */
  .brand-kind { display: none; }
  .header-actions { gap: 0; }
  .icon-btn { width: 36px; height: 36px; }
  .icon-btn svg { width: 19px; height: 19px; }
  .star-btn { width: 30px; height: 30px; }
  .star-btn svg { width: 15px; height: 15px; }
  .lang-btn { padding: .35rem .5rem; font-size: .76rem; margin-inline-end: 0; }
}

/* ---------- picking a photograph for an item ---------- */

.photo-pick { display: grid; gap: .7rem; margin-top: .2rem; }

.photo-preview {
  width: 100%;
  max-width: 260px;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--sand, #f6efe6);
}

.photo-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }

.photo-actions { display: flex; flex-wrap: wrap; gap: .5rem; }

.photo-status {
  font-size: .8rem;
  color: var(--muted);
  margin: 0;
  line-height: 1.5;
}

.photo-status.is-bad { color: #a14b3a; }

[dir="rtl"] .photo-actions { flex-direction: row-reverse; justify-content: flex-end; }

/* ---------- room for a fingertip ----------

   On a mouse a 26 pixel star is easy; on a phone it is a guess, and
   rating an item is the one thing we most want a customer to do. So
   where the pointer is coarse the boxes grow and the padding grows
   with them, which leaves the drawing exactly the size it was and
   only the part you can hit gets bigger.

   pointer: coarse rather than a width query, because what matters is
   the finger, not the screen: a tablet is wide and still touched. */

@media (pointer: coarse) {
  /* Taller, not wider, and the reason matters. Five stars sit in a
     row inside a card that is about half the screen on a phone, so
     widening them both overflows the card and makes neighbouring
     targets overlap, which means tapping four and getting three.
     Height is free: there is nothing above or below to collide with,
     and up-and-down is where a thumb actually misses. */
  .star { height: 40px; padding: 10px 3px; }

  .star-btn { width: 44px; height: 44px; }

  .lang-btn { padding: .62rem .9rem; }

  /* the two-step delete and the other small manager buttons */
  .btn-small { padding: .7rem 1.1rem; }

  .icon-btn { min-width: 44px; min-height: 44px; }
}

/* ---------- changing the owner code ---------- */

.code-change {
  max-width: 420px;
  margin: 0 0 1.4rem;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--cream);
}

.code-change-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .2rem; }

[dir="rtl"] .code-change-actions { flex-direction: row-reverse; justify-content: flex-end; }

/* ---------- the notes, from the owner's side ---------- */

.note-list { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .7rem; }

.note-row {
  display: flex; align-items: flex-start; gap: 1rem; flex-wrap: wrap;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--white);
}

.note-row.is-hidden-note { background: var(--cream); opacity: .72; }

.note-body { flex: 1 1 16rem; min-width: 0; }

.note-head {
  display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
  margin: 0 0 .35rem;
}

.note-name { font-weight: 500; color: var(--brown); }
.note-when { font-size: .78rem; color: var(--muted); }

.note-flag {
  font-size: .7rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px;
  padding: .1rem .5rem;
}

.note-text { margin: 0; line-height: 1.6; overflow-wrap: anywhere; }

.note-row .row-actions { flex: 0 0 auto; display: flex; gap: .4rem; }

@media (max-width: 560px) {
  .note-row .row-actions { width: 100%; }
}

:root[lang="ar"] .note-flag { text-transform: none; letter-spacing: 0; }