/* ═══════════════════════════════════════════════
   CATALOGUE MODE — overrides only.
   This file turns the shop into a browse-only catalogue.
   Nothing is deleted: every rule here is a hide/override,
   so removing this file + catalogue.js restores the full shop.
═══════════════════════════════════════════════ */

/* ── 1. HIDE EVERYTHING THAT SELLS ───────────── */

/* Cart button in the header, cart drawer, checkout, Stripe modal */
#cart-btn,
#cart-dot,
.cart-overlay,
.cart-drawer,
#cart-checkout-btn,
.stripe-overlay,
.stripe-modal {
  display: none !important;
}

/* Add-to-cart buttons on product cards and in the product popup */
.add-btn,
.prod-page-add-btn,
.prod-page-qty {
  display: none !important;
}

/* Claims that are untrue while ordering is off:
   the shipping line and the "secure payment / free returns" badges
   in the product popup. */
.prod-page-qty + p,
.prod-page-trust {
  display: none !important;
}

/* ── 2. "IN STORE ONLY" IN PLACE OF THE BUY BUTTON ── */

.prod-card .prod-foot {
  align-items: center;
  gap: 10px;
}

/* The same label repeats on all 815 cards, so it should read as a quiet
   note, not as a button competing with the price. */
.prod-card .prod-foot::after {
  content: "Csak üzletünkben";
  margin-left: auto;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
}

html[data-lang="en"] .prod-card .prod-foot::after {
  content: "In store only";
}

/* Two cards fit across a phone, which leaves about 160px per card — not
   enough for the price and the note side by side. Put the note under it. */
@media (max-width: 700px) {
  .prod-card .prod-foot {
    flex-wrap: wrap;
    row-gap: 2px;
  }
  .prod-card .prod-foot::after {
    margin-left: 0;
    width: 100%;
    font-size: 10.5px;
  }
}

/* Same note inside the product popup */
.cat-instore-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 18px 0 4px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  border-radius: var(--r);
  background: var(--cream-3);
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text);
}

.cat-instore-note strong { color: var(--g-dark); }

/* The number is the one thing a visitor can act on, so it gets a real
   button-sized target instead of a 20px line of underlined text. */
.cat-instore-note .cat-call {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 46px;
  padding: 11px 20px;
  border-radius: var(--rp);
  background: var(--g);
  color: var(--cream);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .01em;
  text-decoration: none;
  transition: background .25s var(--ease-out-quart), transform .3s var(--ease-spring);
}

.cat-instore-note .cat-call:hover {
  background: var(--g-mid);
  transform: translateY(-1px);
  text-decoration: none;
}

.cat-instore-note .cat-call svg { width: 17px; height: 17px; flex: none; }

@media (max-width: 768px) {
  .cat-instore-note .cat-call { width: 100%; }
}

/* ── 3. TRIAL BANNER (sticky, top of every page) ── */

.cat-banner {
  position: relative;
  z-index: 60;
  background: var(--g-deep);
  color: var(--cream);
  font-family: var(--sans);
  text-align: center;
}

.cat-banner-in {
  max-width: var(--max);
  margin: 0 auto;
  padding: 10px 20px;
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 600;
}

.cat-banner-in strong { color: var(--gold-l); }

/* Contact strip — the only real call to action on a catalogue site */
.cat-contact {
  background: var(--cream-2);
  border-bottom: 1px solid var(--border);
  font-family: var(--sans);
}

.cat-contact-in {
  max-width: var(--max);
  margin: 0 auto;
  padding: 9px 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 22px;
  font-size: 13px;
  color: var(--text);
}

.cat-contact-in a {
  color: var(--g-dark);
  font-weight: 700;
  text-decoration: none;
}

.cat-contact-in a:hover { text-decoration: underline; }

.cat-contact-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.cat-contact-item svg {
  width: 15px;
  height: 15px;
  flex: none;
  stroke: var(--g-mid);
}

@media (max-width: 720px) {
  .cat-contact-in { gap: 2px 16px; font-size: 12.5px; padding: 5px 16px; }
  .cat-banner-in  { font-size: 12.5px; padding: 9px 16px; }
  /* Address and phone are the two things a visitor will actually tap,
     so give them a finger-sized target rather than a line of text. */
  .cat-contact-item a { display: inline-block; padding: 7px 0; }
}

/* ── 4. WELCOME MESSAGE ──────────────────────── */

.cat-welcome-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(3, 71, 61, 0.55);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity .3s var(--ease-out-quart);
}

.cat-welcome-overlay.open { opacity: 1; }

.cat-welcome {
  max-width: 540px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  padding: 34px 34px 28px;
  border-radius: var(--rl);
  background: var(--white);
  box-shadow: var(--shadow-lg);
  font-family: var(--sans);
  transform: translateY(14px) scale(.98);
  transition: transform .35s var(--ease-out-expo);
}

.cat-welcome-overlay.open .cat-welcome { transform: none; }

.cat-welcome h2 {
  margin: 0 0 14px;
  font-family: var(--serif);
  font-size: 26px;
  line-height: 1.2;
  color: var(--g-deep);
}

.cat-welcome p {
  margin: 0 0 13px;
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--text);
}

.cat-welcome .cat-welcome-fine {
  font-size: 13px;
  color: var(--muted);
}

.cat-welcome-details {
  margin: 18px 0;
  padding: 15px 17px;
  border-radius: var(--r);
  background: var(--cream-3);
  border: 1px solid var(--border);
  font-size: 13.5px;
  line-height: 1.75;
}

.cat-welcome-details a {
  color: var(--g-dark);
  font-weight: 700;
  text-decoration: none;
}

.cat-welcome-details a:hover { text-decoration: underline; }

.cat-welcome-btn {
  width: 100%;
  margin-top: 4px;
  padding: 14px 20px;
  border: none;
  border-radius: var(--rp);
  background: var(--g);
  color: var(--cream);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background .25s var(--ease-out-quart), transform .25s var(--ease-spring);
}

.cat-welcome-btn:hover { background: var(--g-mid); transform: translateY(-1px); }

@media (max-width: 560px) {
  .cat-welcome { padding: 26px 22px 22px; }
  .cat-welcome h2 { font-size: 22px; }
}

/* ── 5. SEARCH BOX ON THE CATALOGUE PAGE ─────── */

.cat-search-wrap {
  position: relative;
  flex: 1 1 260px;
  max-width: 380px;
}

.cat-search-input {
  width: 100%;
  padding: 11px 38px 11px 40px;
  border: 1px solid var(--border);
  border-radius: var(--rp);
  background: var(--white);
  font-family: var(--sans);
  font-size: 14px;
  color: var(--text);
  transition: border-color .25s var(--ease-out-quart);
}

.cat-search-input:hover,
.cat-search-input:focus { border-color: var(--g); outline: none; }

.cat-search-input::-webkit-search-cancel-button { -webkit-appearance: none; }

.cat-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  stroke: var(--muted);
  pointer-events: none;
}

.cat-search-clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: none;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.cat-search-clear:hover { background: var(--g-pale); color: var(--g-dark); }
.cat-search-wrap.has-value .cat-search-clear { display: block; }

/* "See all N results" — the way out of the 5-item dropdown. */
.cat-seeall {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 4px;
  padding: 13px 16px;
  border-top: 1px solid var(--border);
  background: var(--cream-3);
  color: var(--g-dark);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: background .2s;
}

.cat-seeall:hover { background: var(--g-pale); }
.cat-seeall strong { color: var(--g-deep); }

/* Let the header wrap now that it holds a search box too */
.termekek-header {
  flex-wrap: wrap;
  gap: 12px 16px;
}

/* ── 5b. HERO — ONE PHOTOGRAPH OF THE SHOP ────── */
/* The hero used to be three mismatched pictures: a senna tea box, a
   stock photo of basil, and the shop. Only the shop is actually ours,
   and it already carries the sign, address, phone, brand logos and
   category list — so it does the job on its own. */

.cat-shopshot {
  margin: 0;
  border-radius: var(--rl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--cream-3);
  aspect-ratio: 4 / 5;
  max-height: 560px;
  margin-left: auto;
  width: 100%;
  max-width: 440px;
}

.cat-shopshot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* The stylesheet hides hero imagery below 1024px. The shop front is the
   single most useful picture on the page, so keep it — just smaller. */
@media (max-width: 1024px) {
  .hero-slide .hero-right { display: block !important; }
  .cat-shopshot {
    margin: 6px auto 0;
    max-width: 340px;
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 560px) {
  .cat-shopshot { max-width: 280px; }
}

/* ── 3b. LET THE PRODUCTS SIT STILL ──────────── */
/* Cards grew the photo to 1.07 inside a clipped box on hover and washed a
   green gradient over the bottom half. That treatment suits lifestyle
   photography; these are packshots on white, so it just cropped the box
   and dulled the label. The card itself still lifts on hover — the
   product inside it no longer moves. */

.prod-card:hover .prod-img img { transform: none !important; }
.prod-card:hover .prod-img::after { opacity: 0 !important; }

/* Room to breathe. The packshots ran edge to edge before. */
.prod-img img { padding: 14px; }

@media (max-width: 700px) {
  .prod-img img { padding: 10px; }
}

/* The grid used align-items:start, so two cards side by side ended at
   different heights whenever one product name wrapped onto an extra line —
   a ragged row. Stretch them, and pin the price to the bottom so the
   prices line up across the row. */
#termekek-grid,
#products-grid { align-items: stretch; }

#termekek-grid .prod-card,
#products-grid .prod-card {
  display: flex;
  flex-direction: column;
}

#termekek-grid .prod-body,
#products-grid .prod-body {
  display: flex;
  flex-direction: column;
  flex: 1;
}

#termekek-grid .prod-foot,
#products-grid .prod-foot { margin-top: auto; }

/* ── 3c. FINGER-SIZED CATEGORY PILLS ─────────── */
/* The homepage category filters were 26px tall — under the ~32px a
   fingertip needs to hit reliably. */

@media (max-width: 768px) {
  .fpill {
    padding: 9px 16px;
    font-size: .68rem;
  }
}

/* ── 4. NO RATINGS WITHOUT REVIEWS ───────────── */
/* Every card carried ★★★★★ next to "(0)". The shop has taken no online
   orders and has no reviews, so the stars were decoration standing in for
   a rating nobody gave. */

.prod-card .prod-stars { display: none !important; }

/* ── 4a0. THE POPUP PHOTO WAS CROPPED ON PHONES ── */
/* On phones the image frame was given `max-height: 220px` with
   `aspect-ratio: auto`, so the frame had no definite height. The photo
   inside asks for `height: 100%`, which cannot resolve against an
   indefinite height, so it fell back to its natural size — full width,
   about 343px tall — and the frame's `overflow: hidden` sliced the top
   and bottom off. Giving the frame a real height lets `object-fit:
   contain` do its job and the whole product shows. */

@media (max-width: 768px) {
  .prod-page-img {
    aspect-ratio: 1 / 1 !important;
    max-height: 52vh !important;
    height: auto !important;
    background: #fff;
  }

  .prod-page-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 14px;
  }
}

/* ── 4a. PRODUCT POPUP — CALMER, AND THE PHOTO OPENS ── */

/* The card grew the photo on hover inside a clipped box, which cropped the
   product. Products should sit still and stay whole. */
.prod-page-img:hover img { transform: none !important; }

.prod-page-img img { padding: 18px; }

/* Category, standing where the (incorrect) manufacturer name used to be. */
.prod-page-brand.cat-prod-cat {
  display: inline-block;
  margin-bottom: 10px;
  padding: 5px 12px;
  border-radius: var(--rp);
  background: var(--g-pale);
  color: var(--g-dark);
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.cat-zoomable {
  cursor: zoom-in;
  transition: box-shadow .3s var(--ease-out-quart);
}

.cat-zoomable:hover { box-shadow: 0 6px 24px rgba(4, 87, 76, .12); }
.cat-zoomable:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.cat-zoom-hint {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  border: 1px solid var(--border);
  color: var(--g-dark);
  box-shadow: 0 2px 8px rgba(4, 87, 76, .1);
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .3s, transform .3s var(--ease-out-quart);
}

.cat-zoom-hint svg { width: 17px; height: 17px; }
.cat-zoomable:hover .cat-zoom-hint,
.cat-zoomable:focus-visible .cat-zoom-hint { opacity: 1; transform: none; }

/* Touch screens have no hover, so keep it visible there. */
@media (hover: none) {
  .cat-zoom-hint { opacity: 1; transform: none; }
}

/* ── 4b. FULL-SIZE PHOTO VIEWER ──────────────── */

.cat-photo {
  position: fixed;
  inset: 0;
  z-index: 3500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background: rgba(3, 71, 61, .82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: zoom-out;
  opacity: 0;
  transition: opacity .26s var(--ease-out-quart);
}

.cat-photo.open { opacity: 1; }

.cat-photo img {
  max-width: min(1100px, 94vw);
  max-height: 88vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--rl);
  background: #fff;
  padding: 22px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .4);
  cursor: default;
  transform: scale(.97);
  transition: transform .3s var(--ease-out-expo);
}

.cat-photo.open img { transform: none; }

.cat-photo-close {
  position: absolute;
  top: 20px;
  right: 22px;
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--g-deep);
  font-size: 16px;
  cursor: pointer;
  transition: background .25s, transform .3s var(--ease-spring);
}

.cat-photo-close:hover { background: #fff; transform: rotate(90deg); }

@media (max-width: 700px) {
  .cat-photo { padding: 14px; }
  .cat-photo img { padding: 14px; max-height: 80vh; }
  .cat-photo-close { top: 12px; right: 12px; width: 38px; height: 38px; }
}

/* ── 5a. STOP THE PAGE SLIDING SIDEWAYS ON PHONES ── */
/* The homepage product area sits in a CSS grid column set to 1fr. A 1fr
   column will not shrink below its content's minimum width, and the card
   strip inside is ~1470px wide — so on a phone the whole page became
   1489px and could be swiped sideways into empty space.
   min-width:0 lets the column shrink; the strip then scrolls inside
   itself, which is what the "swipe right" hint under it always promised. */

.home-prod-layout > * { min-width: 0; }

/* This used to also say `html { overflow-x: hidden }` as a belt-and-braces
   guard. That broke the sticky header: with BOTH html and body set to
   overflow-x:hidden, the viewport takes html's overflow, html itself counts as
   visible, and body is left as its own scroll box — so a sticky child of body
   has nothing to stick to and just scrolls away with the page.
   style.css already sets `body { overflow-x: hidden }`, which propagates to
   the viewport and stops sideways scrolling on its own, so the html rule was
   doing no work and cost the sticky bar. The min-width:0 above is the real
   fix for the sideways swipe. */

/* ── 5b1. HERO — SLIDING VITAMIN GALLERY ─────── */

.cat-vit {
  width: 100%;
  max-width: 430px;
  margin-left: auto;
}

.cat-vit-kicker {
  margin: 0 0 10px 2px;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(243, 237, 223, .62);
}

.cat-vit-window {
  overflow: hidden;
  border-radius: var(--rl);
  background: var(--white);
  box-shadow: var(--shadow-lg);
}

.cat-vit-track {
  display: flex;
  transition: transform .7s var(--ease-out-expo);
}

.cat-vit-slide {
  flex: 0 0 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.cat-vit-slide { position: relative; }

.cat-vit-slide img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: #fff;
  padding: 20px;
  display: block;
}

/* What kind of vitamin this is — the reason it's on the hero at all. */
.cat-vit-type {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 5px 12px;
  border-radius: var(--rp);
  background: var(--g-pale);
  color: var(--g-dark);
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.cat-vit-slide figcaption {
  border-top: 1px solid var(--border);
  padding: 13px 18px 15px;
  background: var(--cream-3);
  font-family: var(--sans);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-height: 58px;
}

.cat-vit-name {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cat-vit-price {
  flex: none;
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 700;
  color: var(--g-dark);
}

/* Slide indicator.
   The dots used to be padded-out buttons that grew and shrank in place, which
   made a wide, lumpy row. Now each button is a plain fixed-size tap target with
   a small dot drawn inside it, and ONE gold marker slides across to whichever
   slide you are on — so it reads as a position, not as seven buttons.
   The row is only as wide as its dots, so the marker can be positioned
   against it. */
.cat-vit-dots {
  position: relative;
  display: flex;
  justify-content: center;
  width: fit-content;
  margin: 13px auto 0;
}

.cat-vit-dot {
  /* 24x26 is the real tap target; the dot you see is the 6px ::before. */
  width: 24px;
  height: 26px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  -webkit-tap-highlight-color: transparent;
}

.cat-vit-dot::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(243, 237, 223, .34);
  transition: background .3s, opacity .3s;
}

.cat-vit-dot:hover::before { background: rgba(243, 237, 223, .6); }

/* The marker covers the live dot, so hide the dot underneath it. */
.cat-vit-dot.active::before { opacity: 0; }

.cat-vit-marker {
  position: absolute;
  top: 50%;
  left: 0;
  width: 20px;
  height: 6px;
  margin-top: -3px;
  border-radius: 3px;
  background: var(--gold);
  pointer-events: none;
  transition: transform .42s var(--ease-out-quart);
}

/* Someone who has asked for less movement gets the marker without the glide. */
@media (prefers-reduced-motion: reduce) {
  .cat-vit-marker { transition: none; }
}

/* The stylesheet hides hero imagery below 1024px. These are products the
   shop wants seen, so keep them on phones and tablets — just smaller. */
@media (max-width: 1024px) {
  .hero-slide .hero-right { display: block !important; }
  .cat-vit { margin: 8px auto 0; max-width: 330px; }
  .cat-vit-kicker { text-align: center; margin-left: 0; }
  .cat-vit-slide img { padding: 14px; }
}

@media (max-width: 560px) {
  .cat-vit { max-width: 280px; }
  .cat-vit-slide figcaption { padding: 11px 14px 13px; min-height: 54px; }
  .cat-vit-name { font-size: 12px; }
  .cat-vit-price { font-size: 15px; }
}

/* ── 5b2. BRAND STRIP ────────────────────────── */
/* The logos are now proper cut-outs with real transparency, so they no
   longer need to be faded to hide their mismatched backgrounds. */

.brands-sec {
  background: var(--cream-3);
  padding: 34px 0 36px;
}

.brands-kicker {
  font-size: 10px;
  letter-spacing: .26em;
  margin-bottom: 22px;
  color: var(--muted);
}

.brand-logo-pill {
  height: 96px;
  width: 208px;
  margin: 0 9px;
  padding: 10px 26px;
  border-radius: 16px;
  border: 1px solid rgba(4, 87, 76, .08);
  box-shadow: 0 1px 2px rgba(4, 87, 76, .04);
  transition: box-shadow .35s var(--ease-out-quart),
              transform .45s var(--ease-spring),
              border-color .35s;
}

.brand-logo-pill:hover {
  border-color: rgba(4, 87, 76, .16);
  box-shadow: 0 10px 28px rgba(4, 87, 76, .13);
  transform: translateY(-4px);
}

/* One rule for every logo: let each find its own size inside the same box,
   instead of the old per-image height tweaks. */
.brand-logo-img,
.brand-logo-img--lg {
  height: auto;
  width: auto;
  max-height: 44px;
  max-width: 152px;
  opacity: 1;
  filter: saturate(.94);
  transition: filter .35s var(--ease-out-quart), transform .45s var(--ease-spring);
}

/* Square marks read small next to wordmarks, so give them more height. */
.brand-logo-img[src*="bioco"],
.brand-logo-img[src*="drchen"],
.brand-logo-img[src*="gal"] {
  max-height: 58px;
}

.brand-logo-pill:hover .brand-logo-img {
  filter: none;
  transform: scale(1.04);
}

@media (max-width: 768px) {
  .brand-logo-pill { height: 82px; width: 172px; padding: 10px 20px; margin: 0 7px; }
  .brand-logo-img,
  .brand-logo-img--lg { max-height: 38px; max-width: 124px; }
  .brand-logo-img[src*="bioco"],
  .brand-logo-img[src*="drchen"],
  .brand-logo-img[src*="gal"] { max-height: 48px; }
}

/* ── 5b3. FOOTER — READABLE TEXT ─────────────── */
/* The footer text was set between 18% and 38% opacity on the dark green.
   Measured against the background that is 1.58:1 to 2.62:1 contrast; small
   text needs 4.5:1 to be readable. Same colours from the palette, turned up
   until each one passes. */

.footer .ft-tag {
  color: rgba(243, 237, 223, .74);        /* 5.75:1 */
}

.footer .ft-col-title {
  color: var(--gold);                     /* 4.83:1 — and it ties the labels to the brand */
  font-size: 9.5px;
}

.footer .ft-link,
.footer .ft-link[style] {
  color: rgba(243, 237, 223, .82) !important;   /* 6.67:1 */
}

.footer .ft-link:hover {
  color: var(--gold-l) !important;
}

.footer .ft-bottom {
  color: rgba(243, 237, 223, .66);        /* 4.91:1 */
  font-size: 11px;
}

/* On a phone the footer links were 19px tall with no padding — the phone
   number, the email and the address all sat under the ~32px a fingertip
   needs. Padding, not bigger text, so the footer keeps its proportions. */
@media (max-width: 768px) {
  .footer .ft-link {
    padding: 7px 0;
    margin-bottom: 0;
  }
  .footer .ft-legal a { padding: 7px 0; }
  .store-cta { display: inline-block; padding: 9px 0; }
}

/* ── 5b4. LEGAL PAGE ─────────────────────────── */

.cat-legal { max-width: 820px; }

.cat-legal-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 34px;
}

.cat-legal-nav a {
  padding: 9px 18px;
  border: 1px solid var(--border);
  border-radius: var(--rp);
  background: var(--white);
  color: var(--g-dark);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: background .25s, border-color .25s;
}

.cat-legal-nav a:hover { background: var(--g-pale); border-color: var(--g); }

.cat-legal-block { scroll-margin-top: 100px; margin-bottom: 52px; }

.cat-legal-block h2 {
  margin: 0 0 20px;
  font-family: var(--serif);
  font-size: 27px;
  color: var(--g-deep);
}

.cat-legal-dl {
  margin: 0;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 1px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--border);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.6;
}

.cat-legal-dl dt {
  margin: 0;
  padding: 13px 16px;
  background: var(--cream-3);
  font-weight: 700;
  color: var(--g-dark);
}

.cat-legal-dl dd {
  margin: 0;
  padding: 13px 16px;
  background: var(--prod-bg);
  color: var(--text);
}

.cat-legal-dl a { color: var(--g-dark); font-weight: 700; }

.cat-legal-todo {
  margin: 18px 0 0;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  border-radius: var(--r);
  background: var(--cream-3);
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text);
}

/* The privacy text arrives from Shopify as its own HTML. */
.cat-legal-body {
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--text);
}

.cat-legal-body h1, .cat-legal-body h2,
.cat-legal-body h3, .cat-legal-body h4 {
  font-family: var(--serif);
  color: var(--g-deep);
  margin: 30px 0 12px;
  line-height: 1.3;
}

.cat-legal-body h1 { font-size: 23px; }
.cat-legal-body h2 { font-size: 20px; }
.cat-legal-body h3, .cat-legal-body h4 { font-size: 17px; }

.cat-legal-body p, .cat-legal-body ul, .cat-legal-body ol { margin: 0 0 14px; }
.cat-legal-body ul, .cat-legal-body ol { padding-left: 22px; }
.cat-legal-body li { margin-bottom: 6px; }
.cat-legal-body strong { color: var(--g-dark); }

.cat-legal-body a {
  color: var(--g-dark);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-word;
}

.cat-legal-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 18px;
  font-size: 13.5px;
}

.cat-legal-body th, .cat-legal-body td {
  border: 1px solid var(--border);
  padding: 9px 12px;
  text-align: left;
  vertical-align: top;
}

.cat-legal-body th { background: var(--cream-3); color: var(--g-dark); }
.cat-legal-loading { color: var(--muted); font-style: italic; }

/* Each wide table gets its own sideways scroll so no column is lost. */
.cat-legal-scroll {
  overflow-x: auto;
  margin: 0 0 18px;
  -webkit-overflow-scrolling: touch;
}

.cat-legal-scroll table { margin: 0; min-width: 440px; }

/* Legal links sit on their own row above the copyright line. */
.ft-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  width: 100%;
  margin-bottom: 10px;
}

.ft-legal a {
  color: rgba(243, 237, 223, .82);
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 700;
  text-decoration: none;
}

.ft-legal a:hover { color: var(--gold-l); text-decoration: underline; }

@media (max-width: 700px) {
  .cat-legal-dl { grid-template-columns: 1fr; }
  .cat-legal-dl dt { padding-bottom: 4px; }
  .cat-legal-dl dd { padding-top: 4px; }
  .cat-legal-block h2 { font-size: 23px; }
}

/* ── 5b5. PRODUCT PAGES ──────────────────────── */
/* One real page per product, so Google has something to send people to.
   Before this, all 815 products lived on a single address. */

.pd-wrap { max-width: 1000px; }

.pd-crumbs {
  margin-bottom: 26px;
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--muted);
}

.pd-crumbs a { color: var(--g-dark); font-weight: 700; text-decoration: none; }
.pd-crumbs a:hover { text-decoration: underline; }
.pd-crumbs span { margin: 0 7px; opacity: .5; }

.pd-main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}

.pd-photo {
  margin: 0;
  aspect-ratio: 1 / 1;
  border-radius: var(--rl);
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pd-photo img { width: 100%; height: 100%; object-fit: contain; padding: 22px; }

.pd-cat {
  display: inline-block;
  margin-bottom: 12px;
  padding: 5px 12px;
  border-radius: var(--rp);
  background: var(--g-pale);
  color: var(--g-dark);
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-decoration: none;
}

.pd-cat:hover { background: var(--teal-pale); }

.pd-name {
  margin: 0 0 10px;
  font-family: var(--serif);
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.15;
  color: var(--text);
}

.pd-price {
  margin-bottom: 18px;
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--g-dark);
}

/* Facts read straight off the product name — brand, form, size, dose. */
.pd-facts { margin-top: 26px; }

.pd-facts dl {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(120px, 40%) 1fr;
  gap: 1px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--border);
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.55;
}

.pd-facts dt {
  margin: 0;
  padding: 10px 14px;
  background: var(--cream-3);
  font-weight: 700;
  color: var(--g-dark);
}

.pd-facts dd {
  margin: 0;
  padding: 10px 14px;
  background: var(--prod-bg);
  color: var(--text);
}

.pd-desc, .pd-where { margin-top: 26px; font-family: var(--sans); font-size: 14.5px; line-height: 1.7; color: var(--text); }
.pd-desc h2, .pd-where h2, .pd-related h2 {
  margin: 0 0 10px;
  font-family: var(--serif);
  font-size: 19px;
  color: var(--g-deep);
}
.pd-where a { color: var(--g-dark); font-weight: 700; }

.pd-related { margin-top: 54px; }
.pd-related h2 { font-size: 22px; margin-bottom: 18px; }

.pd-rel-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

.pd-rel {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--rl);
  background: var(--cream-3);
  overflow: hidden;
  text-decoration: none;
  transition: transform .35s var(--ease-spring), box-shadow .3s;
}

.pd-rel:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.pd-rel-img { display: block; aspect-ratio: 1/1; background: #fff; }
.pd-rel-img img { width: 100%; height: 100%; object-fit: contain; padding: 12px; }

.pd-rel-name {
  padding: 11px 13px 3px;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text);
  flex: 1;
}

.pd-rel-price {
  padding: 0 13px 13px;
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 700;
  color: var(--g-dark);
}

@media (max-width: 860px) {
  .pd-main { grid-template-columns: 1fr; gap: 22px; }
  .pd-name { font-size: 1.4rem; }
  .pd-rel-grid { grid-template-columns: repeat(2, 1fr); }

  /* Breadcrumbs, the category chip and the address were 14–28px tall —
     under the ~32px a fingertip needs. */
  .pd-crumbs { line-height: 2.4; }
  .pd-crumbs a { display: inline-block; padding: 8px 0; }
  .pd-cat { padding: 9px 14px; }
  .pd-where a { display: inline-block; padding: 7px 0; }
}

/* ── 5c. GOOGLE REVIEWS ──────────────────────── */
/* Real reviews, quoted as written, credited to Google. No invented
   names, no "verified purchase" badge — the shop has taken no online
   orders, so nothing here can claim to be one. */

.cat-rev-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 38px;
}

.cat-rev {
  margin: 0;
  padding: 26px 24px 22px;
  border: 1px solid var(--border);
  border-radius: var(--rl);
  background: var(--prod-bg);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cat-rev-stars {
  color: #f4b942;
  font-size: 16px;
  letter-spacing: 2px;
}

.cat-rev blockquote {
  margin: 0;
  flex: 1;
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.55;
  color: var(--text);
}

.cat-rev figcaption {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}

@media (max-width: 900px) {
  .cat-rev-grid { grid-template-columns: 1fr; gap: 16px; }
  .cat-rev blockquote { font-size: 16px; }
}

/* ── 6. HEALTH GOAL TILES ────────────────────── */
/* These were seven generic stock photos of strangers and salad.
   Replaced with the house palette so the tiles look deliberate,
   load instantly, and pull nothing from an external site. */

.goal-tile-bg {
  background-size: cover;
  background-position: center;
}

.goal-tile-bg.gt-1 { background: linear-gradient(150deg, #0a6b5d 0%, #04574c 100%); }
.goal-tile-bg.gt-2 { background: linear-gradient(150deg, #3d8a9a 0%, #0a6b5d 100%); }
.goal-tile-bg.gt-3 { background: linear-gradient(150deg, #5A9E6F 0%, #04574c 100%); }
.goal-tile-bg.gt-4 { background: linear-gradient(150deg, #04574c 0%, #03473d 100%); }
.goal-tile-bg.gt-5 { background: linear-gradient(150deg, #6ba87f 0%, #0a6b5d 100%); }
.goal-tile-bg.gt-6 { background: linear-gradient(150deg, #C4622D 0%, #8f4520 100%); }
.goal-tile-bg.gt-7 { background: linear-gradient(150deg, #d4a853 0%, #a87c2c 100%); }

/* The overlay existed to darken busy photos. Flat colour needs far less. */
.goal-tile .goal-overlay {
  background: linear-gradient(180deg, rgba(3, 71, 61, 0) 35%, rgba(3, 71, 61, .45) 100%) !important;
}

/* ── 7. PRICE DISCLAIMER ─────────────────────── */

.cat-price-note {
  margin: 10px 0 0;
  font-family: var(--sans);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
  font-style: italic;
}

/* Product name inside a card is now a real link. */
.prod-card .cat-prod-link {
  color: inherit;
  text-decoration: none;
}

.prod-card:hover .cat-prod-link { text-decoration: underline; text-underline-offset: 2px; }

/* ── 9. FINGER-SIZED LINKS ON PHONES ─────────── */
/* A final phone pass found three kinds of link still under the ~32px a
   fingertip needs: the product name on a catalogue card, the email and
   phone in the company table, and the links inside the privacy notice
   that comes from Shopify. */

@media (max-width: 768px) {
  .prod-card .cat-prod-link {
    display: block;
    padding: 6px 0;
  }

  .cat-legal-dl dd a,
  .cat-legal-body a {
    display: inline-block;
    padding: 7px 0;
    line-height: 1.4;
  }
}

/* ── 10. "UNDER CONSTRUCTION" STRIPE ─────────── */
/* Sits under the "Mire keres megoldást?" heading. The tiles still work —
   they just open a whole category, so the stripe says so plainly. */

/* .w gives it the site's own column width, so the stripe's left edge lines
   up with the "Mire keres megoldást?" heading above it. */
.cat-wip { margin-bottom: 18px; }

.cat-wip-in {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 18px;
  border-radius: var(--r);
  border: 1px solid rgba(212, 168, 83, .45);
  /* hazard stripes, kept faint so the text stays readable */
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(212, 168, 83, .14) 0 10px,
      transparent 10px 20px
    ),
    var(--cream-3);
}

.cat-wip-in::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(212, 168, 83, .22);
}

.cat-wip-text {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.45;
  color: var(--g-dark);
}

@media (max-width: 700px) {
  /* .goals-head gains 16px of side padding on phones — match it. */
  .cat-wip { padding: 0 16px; margin-bottom: 14px; }
  .cat-wip-in { padding: 10px 14px; gap: 10px; }
  .cat-wip-text { font-size: 11.5px; }
}


/* ── 11. ONE STICKY BLOCK AT THE TOP ─────────── */
/* The promo banner, the contact strip and the green header are three separate
   bars. The header alone was sticky, so on the way back up the header slid
   down over content while the two strips above it stayed where they were —
   the movement did not match. catalogue.js now puts all three inside
   .cat-topstack, and this makes that one block the sticky thing: they leave
   together on the way down and come back together on the way up, so the whole
   bar is one tap away from anywhere on the page. */

.cat-topstack {
  position: sticky;
  top: 0;
  z-index: 300;
  transition: transform .42s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}

/* The header is inside the sticky block now — it must not stick again on its
   own, or it detaches from the two strips above it. */
.cat-topstack .hdr {
  position: static;
  z-index: auto;
}

@media (prefers-reduced-motion: reduce) {
  .cat-topstack { transition: none; }
}

/* ── 12. OPEN / CLOSED BADGE ─────────────────── */
/* The badge is worked out live now (see catalogue.js), so it needs a second
   colour for the hours the shop is shut — a green "open" dot on a Sunday
   night was worse than saying nothing. */

.store-badge.is-closed {
  background: rgba(178, 96, 61, .12);
  color: #8a4526;
  border-color: rgba(178, 96, 61, .32);
}