/* MeLyssi74 (honey) section — light, warm, editorial.
   Deliberately its own palette/typography (Archivo / Inter), distinct from the
   dark landing/back-office theme. Scoped under body.honey-page so it never bleeds
   into other sections (see jobs.css for the same convention). */

body.honey-page {
    --honey-bg: #fbf3e3;
    --honey-card: #ffffff;
    --honey-cream: #2c1c0d;
    --honey-cream-dim: #6b5636;
    --honey-gold: #b3790c;
    --honey-gold-soft: #8f6a2f;
    --honey-line: #e6d6ae;
    --honey-out: #a8362a;
    --honey-ink: #2c1c0d;      /* header ground — same value as email_style.INK */
    --honey-amber: #e0a53a;    /* accent that reads on the dark header */
    font-family: 'Inter', "Helvetica Neue", Arial, sans-serif;
    background: var(--honey-bg);
    color: var(--honey-cream);
}

/* Sticky header so the basket button stays on screen while the visitor scrolls
   the products. Without it, the "fly to basket" animation targets a button that
   has scrolled above the viewport, so the jar flies straight up and off the top
   of the page instead of landing in the basket. z-index sits below the drawer
   scrim (50) so the open drawer still covers the header. */
/* Dark header, matching the band the logo sits on in the customer emails
   (email_style.INK) — the site and the mail now open the same way. Everything
   inside it is restated for a dark ground below; the cream page palette starts
   under the header. */
body.honey-page .site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--honey-ink);
    border-bottom: 1px solid rgba(224, 165, 58, 0.30);
    /* The logo is tall, so the shared 1.4rem band on top of it made the sticky
       header eat the screen. Trim the padding, not the logo. The ≤760px rule
       further down sets its own padding and is unaffected. */
    padding: 0.4rem 1.4rem;
    gap: 14px;
}

/* Header text on the dark ground. Amber rather than --honey-gold for the accent:
   #b3790c is tuned for cream and goes muddy on brown. */
body.honey-page .site-header .honey-legal-link { color: rgba(255, 255, 255, 0.72); }
body.honey-page .site-header .honey-legal-link:hover {
    color: var(--honey-amber);
    border-bottom-color: var(--honey-amber);
}
body.honey-page .site-header .lang-sep { color: rgba(255, 255, 255, 0.35); }
body.honey-page .site-header .cart-btn {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.30);
    color: #ffffff;
    box-shadow: none;
}
body.honey-page .site-header .cart-btn:hover {
    border-color: var(--honey-amber);
    color: var(--honey-amber);
}

/* Embedded legal page (inside the checkout terms modal): drop the site header and
   footer so only the document text shows in the modal frame. */
body.legal-embed .site-header,
body.legal-embed .site-footer { display: none; }
body.legal-embed .honey-wrap { padding-top: 20px; }

body.honey-page .site-main {
    max-width: none;
    padding: 0;
    margin: 0;
}

body.honey-page h1,
body.honey-page h2,
body.honey-page h3,
body.honey-page .honey-eyebrow {
    font-family: 'Archivo', "Helvetica Neue", Arial, sans-serif;
}

body.honey-page img { max-width: 100%; display: block; }

body.honey-page .honey-wrap { max-width: 1100px; margin: 0 auto; padding: 0 32px; }

body.honey-page .honey-eyebrow {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--honey-gold);
    margin-bottom: 14px;
}

/* ---------- Header wordmark ---------- */
body.honey-page .wordmark { display: flex; align-items: center; gap: 12px; letter-spacing: normal; }
body.honey-page .honey-logo { height: 120px; width: auto; border-radius: 8px; }
body.honey-page .honey-brand-word { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 20px; }

/* ---------- In-page nav ----------
   Lives in the header, so the sections stay reachable while scrolling. It used to
   be a band under the header; that band is gone. Below 761px mobile.css hides it
   outright — the bottom bar carries navigation there. */
body.honey-page .honey-nav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding: 18px 32px;
    background: var(--honey-bg);
    border-bottom: 1px solid var(--honey-line);
}

/* Truly centred on the page, not just "the middle item of a space-between row":
   the logo and the Terms/basket/language group are different widths, so
   space-between alone parks the pill left of centre. Giving both sides an equal
   share of the leftover space puts it on the page's axis instead.

   Only above 1150px. Equal shares force the right-hand group into a third of the
   width, and below that it is wider than its share — it then overflows leftwards
   and prints straight through the pill. Narrower desktops keep space-between,
   which is off-centre but never overlaps. */
@media (min-width: 1151px) {
    body.honey-page .site-header .wordmark,
    body.honey-page .site-header .honey-header-tail { flex: 1 1 0; min-width: 0; }
    body.honey-page .site-header .honey-header-tail { justify-content: flex-end; }
}

body.honey-page .honey-nav--header {
    padding: 0;
    background: none;
    border-bottom: 0;
    flex: 0 0 auto;
    min-width: 0;
}
/* The pill sits on the dark header now, so it is an outline rather than a raised
   white chip. */
body.honey-page .honey-nav--header .honey-nav-pill {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: none;
}
body.honey-page .honey-nav--header .honey-nav-pill a {
    color: rgba(255, 255, 255, 0.80);
    /* The Greek labels are long enough to wrap to two lines inside the pill on a
       narrower desktop, which doubles the header height. */
    white-space: nowrap;
    padding: 7px 13px;
    font-size: 12px;
}
body.honey-page .honey-nav--header .honey-nav-pill a:hover {
    color: var(--honey-ink);
    background: var(--honey-amber);
}

body.honey-page .honey-nav-pill {
    display: inline-flex;
    gap: 4px;
    background: var(--honey-card);
    border: 1px solid var(--honey-line);
    border-radius: 999px;
    padding: 6px;
    box-shadow: 0 1px 3px rgba(44, 28, 13, 0.08);
}

body.honey-page .honey-nav-pill a {
    padding: 8px 18px;
    border-radius: 999px;
    color: var(--honey-cream-dim);
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

body.honey-page .honey-nav-pill a:hover { color: var(--honey-gold); background: var(--honey-bg); }

/* ---------- Hero ---------- */
body.honey-page .honey-hero {
    position: relative;
    min-height: 78vh;
    display: flex;
    align-items: flex-end;
    background: #000 url("../img/hero.8d10926b1c85.jpg") center 30% / cover no-repeat;
}

body.honey-page .honey-hero::before {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(10,6,3,0.15) 0%, rgba(10,6,3,0.55) 55%, rgba(10,6,3,0.94) 100%);
}

body.honey-page .honey-hero-content { position: relative; padding-bottom: 76px; max-width: 640px; }

body.honey-page .honey-hero h1 {
    font-size: clamp(34px, 5.6vw, 58px);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -0.01em;
    margin-bottom: 18px;
    color: #f7ecd8;
}

body.honey-page .honey-hero p { font-size: 18px; color: #e4d2ad; max-width: 480px; margin-bottom: 30px; }

body.honey-page .honey-hero-cta {
    display: inline-block;
    color: var(--honey-gold);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    border-bottom: 1px solid var(--honey-gold);
    padding-bottom: 3px;
}

/* ---------- Sections ---------- */
body.honey-page section { padding: 90px 0; }

body.honey-page .honey-story {
    background: var(--honey-bg);
    border-top: 1px solid var(--honey-line);
    border-bottom: 1px solid var(--honey-line);
}

body.honey-page .honey-story-card {
    background: var(--honey-card);
    border: 1px solid var(--honey-line);
    border-radius: 4px;
    padding: 48px;
    box-shadow: 0 1px 3px rgba(44, 28, 13, 0.06);
}

body.honey-page .honey-story .honey-grid {
    display: grid; grid-template-columns: 0.5fr 1.5fr; gap: 64px; align-items: center;
}

body.honey-page .honey-story h2 { font-size: clamp(28px,3.4vw,38px); font-weight: 800; margin-bottom: 26px; line-height: 1.15; }
body.honey-page .honey-story p { color: var(--honey-cream-dim); margin-bottom: 18px; font-size: 16px; }
body.honey-page .honey-story .honey-lead-in { color: var(--honey-cream); font-weight: 600; margin: 26px 0 14px; }
body.honey-page .honey-story ul { list-style: none; margin: 0 0 22px; padding: 0; }
body.honey-page .honey-story li { position: relative; padding-left: 26px; margin-bottom: 11px; color: var(--honey-cream-dim); font-size: 15.5px; }
body.honey-page .honey-story li::before {
    content: "\2b21";
    position: absolute; left: 0; top: 1px;
    color: var(--honey-gold);
    font-size: 13px;
}

body.honey-page .honey-story-watermark { position: relative; height: 600px; overflow: hidden; border-radius: 2px; }
body.honey-page .honey-story-watermark img {
    width: 100%; height: 100%; object-fit: cover; object-position: 25% 30%;
    filter: saturate(0.8) contrast(1.05);
    opacity: 0.92;
}
body.honey-page .honey-story-watermark::after {
    content: "";
    position: absolute; inset: 0;
    /* Fades into the section's own cream background (--honey-bg, #fbf3e3) — the
       photo sits directly on that background now, not inside a card. */
    background:
        linear-gradient(180deg, rgba(251,243,227,0) 35%, rgba(251,243,227,0.95) 100%),
        linear-gradient(90deg, rgba(251,243,227,0.35) 0%, rgba(251,243,227,0) 35%);
}

/* ---------- Products ---------- */
body.honey-page .honey-head { text-align: center; max-width: 700px; margin: 0 auto 60px; }
body.honey-page .honey-head h2 { font-size: clamp(28px,3.4vw,38px); font-weight: 800; margin-bottom: 14px; text-wrap: balance; }
body.honey-page .honey-head p { color: var(--honey-cream-dim); }

body.honey-page .honey-tabs-wrap { display: flex; flex-direction: column; gap: 20px; margin: 28px 0 40px; }
body.honey-page .honey-tabs { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
body.honey-page .honey-tab {
    font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 14px;
    padding: 10px 22px; border-radius: 999px; border: 1.5px solid var(--honey-line);
    background: var(--honey-card); color: var(--honey-cream-dim); cursor: pointer;
    text-align: center;
}
body.honey-page .honey-tab.active { background: var(--honey-gold); border-color: var(--honey-gold); color: #fff; }

body.honey-page .honey-product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
body.honey-page .honey-product-card {
    background: var(--honey-card);
    border: 1px solid var(--honey-line);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    display: none;
}
body.honey-page .honey-product-card.show { display: block; }
body.honey-page .honey-product-card .honey-imgwrap { position: relative; aspect-ratio: 1/1; overflow: hidden; }
body.honey-page .honey-product-card img { width: 100%; height: 100%; object-fit: cover; }
body.honey-page .honey-stock-flag {
    position: absolute; top: 12px; left: 12px;
    background: var(--honey-out); color: #fff;
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em;
    padding: 5px 10px; border-radius: 3px;
}
body.honey-page .honey-product-card .honey-info { padding: 18px 20px 22px; }
body.honey-page .honey-product-card h3 { font-size: 16px; font-weight: 700; margin: 0 0 4px; }
body.honey-page .honey-product-card .honey-desc { font-size: 13px; color: var(--honey-cream-dim); margin-bottom: 10px; line-height: 1.5; }
body.honey-page .honey-product-card .honey-weight { font-size: 12.5px; color: var(--honey-gold-soft); margin-bottom: 10px; }
body.honey-page .honey-product-card .honey-price { font-size: 17px; font-weight: 700; color: var(--honey-gold); }

/* ---------- Testimonials ---------- */
body.honey-page .honey-testimonials {
    background: var(--honey-bg);
    border-top: 1px solid var(--honey-line);
    border-bottom: 1px solid var(--honey-line);
}
body.honey-page .honey-t-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
body.honey-page .honey-t-card { background: var(--honey-card); border: 1px solid var(--honey-line); border-radius: 4px; padding: 30px 26px; }
body.honey-page .honey-t-card .honey-mark { font-size: 34px; color: var(--honey-gold); font-family: 'Archivo',sans-serif; line-height: 1; margin-bottom: 14px; display: block; }
body.honey-page .honey-t-card p { color: var(--honey-cream-dim); font-size: 15px; margin-bottom: 18px; }
body.honey-page .honey-t-card .honey-who { font-weight: 600; font-size: 14px; color: var(--honey-cream); }

/* ---------- The Importance of Bees ---------- */
body.honey-page .honey-bees {
    position: relative;
    overflow: hidden;
    background: var(--honey-bg);
    border-top: 1px solid var(--honey-line);
}

/* Soft radial watermark occupying the upper portion of the section, behind the
   eyebrow/heading/text — not a photo card, just an ambient background wash. */
body.honey-page .honey-bees-swarm {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 640px;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}
body.honey-page .honey-bees-swarm img {
    width: 100%; height: 100%; object-fit: cover;
    opacity: 0.18;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 0%, #000 78%, transparent 100%);
    mask-image: radial-gradient(ellipse at center, #000 0%, #000 78%, transparent 100%);
}

/* Wider than the other sections — this section carries the longest body copy
   on the page and must not read as a narrow column. */
body.honey-page .honey-bees-wrap {
    position: relative;
    z-index: 1;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 40px;
}

body.honey-page .honey-bees .honey-eyebrow {
    font-family: 'Inter', "Helvetica Neue", Arial, sans-serif;
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    color: #9A6E1E;
}

body.honey-page .honey-bees-heading {
    font-family: 'Archivo', "Helvetica Neue", Arial, sans-serif;
    font-weight: 700;
    color: #2B1E14;
    font-size: clamp(2rem, 4vw, 3.1rem);
    line-height: 1.08;
    margin-bottom: 0;
}

/* Intro paragraphs — the text that sits directly over the swarm watermark,
   on both the landing section and the top of the essay page. Width-constrained
   on its own for a readable line length on the essay page; the landing
   section's version (--wide) runs the full wrap width instead (no grid, no
   side image there any more). */
body.honey-page .honey-bees-intro { max-width: 780px; margin-top: 40px; }
body.honey-page .honey-bees-intro.honey-bees-intro--wide { max-width: none; }

body.honey-page .honey-bees-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 48px;
    align-items: center;
    margin-top: 40px;
}

body.honey-page .honey-bees-text p,
body.honey-page .honey-bees-intro p {
    font-family: 'Inter', "Helvetica Neue", Arial, sans-serif;
    font-size: 1.1rem;
    line-height: 1.72;
    color: #3A2A1C;
    margin-bottom: 20px;
}
/* Paragraphs 3-4 on the essay page, in the grid alongside the blossom photo —
   not sitting over the watermark, so the original weight stands. */
body.honey-page .honey-bees-text p { font-weight: 500; }
/* Sits over the swarm watermark — heavier weight for legibility (brief caps
   this at 600, must not read as bold). */
body.honey-page .honey-bees-intro p { font-weight: 600; }

/* Shared by the landing section's "Read more" and the essay page's "Back" links
   — same treatment, icon before the label for "back", after for "read more". */
body.honey-page .honey-arrow-link {
    display: inline-block;
    color: #9A6E1E;
    font-family: 'Inter', "Helvetica Neue", Arial, sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    border-bottom: 1.5px solid rgba(154, 110, 30, 0.45);
    padding-bottom: 3px;
}
body.honey-page .honey-arrow-link:hover { border-bottom-color: rgba(154, 110, 30, 1); }
body.honey-page .honey-back-link { margin: 0 0 32px; }

/* Closing paragraph on the essay page — set apart from the body copy. */
body.honey-page .honey-bees-closing { max-width: 680px; margin: 56px auto 40px; text-align: center; }
body.honey-page .honey-bees-rule { width: 56px; height: 2px; background: var(--honey-gold); margin: 0 auto 24px; }
body.honey-page .honey-bees-closing p {
    font-family: 'Archivo', "Helvetica Neue", Arial, sans-serif;
    font-weight: 600;
    font-size: clamp(1.15rem, 1.9vw, 1.5rem);
    line-height: 1.5;
    color: #2B1E14;
    margin: 0;
}

/* Standalone essay page: this is the first section after the header, not a
   subsection following Testimonials, so it doesn't need the divider line. */
body.honey-page .honey-bees-page { border-top: none; }
body.honey-page .honey-bees-page .honey-back-link:last-child { margin: 40px 0 0; }

/* Blossom/swarm photos on the essay page and landing section: no card, no
   border, no shadow — edges dissolve into the cream via the same radial mask,
   full opacity at centre (unlike the swarm watermark, which is also dimmed). */
body.honey-page .honey-bees-photo { position: relative; aspect-ratio: 4/5; overflow: hidden; }
body.honey-page .honey-bees-photo img {
    width: 100%; height: 100%; object-fit: cover;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 0%, #000 78%, transparent 100%);
    mask-image: radial-gradient(ellipse at center, #000 0%, #000 78%, transparent 100%);
}

@media (max-width: 900px) {
    body.honey-page .honey-bees-swarm { height: 440px; }
    body.honey-page .honey-bees-wrap { padding: 0 22px; }
    body.honey-page .honey-bees-grid { grid-template-columns: 1fr; gap: 28px; }
    body.honey-page .honey-bees-text { order: 2; }
    body.honey-page .honey-bees-photo { order: 1; aspect-ratio: 3/2; }
}

/* ---------- Company footer block ---------- */
body.honey-page .honey-footer { padding: 56px 0 40px; }
body.honey-page .honey-footer-grid {
    display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 24px;
    border-top: 1px solid var(--honey-line); padding-top: 36px;
}
body.honey-page .honey-footer-word { font-family: 'Archivo',sans-serif; font-weight: 800; font-size: 18px; }
body.honey-page .honey-footer-word sup { color: var(--honey-gold); font-size: 11px; }
body.honey-page .honey-footer-info { color: var(--honey-cream-dim); font-size: 13.5px; line-height: 1.9; text-align: right; }

/* Reopens the cookie banner (core/js/consent.js, [data-cc-open]). */
body.honey-page .honey-footer-cookies {
    color: var(--honey-gold-soft); text-decoration: underline; text-underline-offset: 2px;
}
body.honey-page .honey-footer-cookies:hover { color: var(--honey-gold); }

body.honey-page .honey-legal-cookie-btn {
    font: inherit; font-weight: 600; color: var(--honey-gold);
    background: transparent; border: 1px solid var(--honey-gold);
    border-radius: 9px; padding: 8px 16px; cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
body.honey-page .honey-legal-cookie-btn:hover { background: var(--honey-gold); color: #fffaf0; }

body.honey-page .honey-wordmark sup { color: var(--honey-gold); font-size: 12px; }

/* ---------- Carousel ---------- */
body.honey-page .honey-car-wrap { position: relative; overflow: hidden; }
body.honey-page .honey-car-track {
    display: flex;
    gap: 26px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
body.honey-page .honey-car-track::-webkit-scrollbar { display: none; }
body.honey-page .honey-car-track.honey-t-grid > .honey-t-card {
    flex: 0 0 calc((100% - 52px)/3);
    scroll-snap-align: start;
}
body.honey-page .honey-car-nav { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }
body.honey-page .honey-car-btn {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--honey-card); border: 1px solid var(--honey-line); color: var(--honey-gold);
    font-size: 18px; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
body.honey-page .honey-car-btn:hover { background: var(--honey-line); }

/* ---------- Responsive ----------
   Breakpoints and per-view counts per brief: 3 on desktop, 2 on tablet (<=820px),
   1 on mobile (<=560px), with zero partial/cropped cards. */
@media (max-width: 820px) {
    body.honey-page .honey-story-card { padding: 28px 24px; }
    body.honey-page .honey-story .honey-grid { grid-template-columns: 1fr; }
    body.honey-page .honey-story-watermark { height: 380px; margin-bottom: 20px; }
    body.honey-page .honey-product-grid,
    body.honey-page .honey-t-grid { grid-template-columns: 1fr 1fr; }
    body.honey-page .honey-footer-info { text-align: left; }
    body.honey-page .honey-car-track.honey-t-grid > .honey-t-card { flex: 0 0 calc((100% - 26px)/2); }
}

@media (max-width: 560px) {
    body.honey-page .honey-nav { display: none; }
    body.honey-page .honey-logo { height: 92px; }
    body.honey-page .honey-brand-word { font-size: 16px; }
    body.honey-page .honey-product-grid,
    body.honey-page .honey-t-grid { grid-template-columns: 1fr; }
    body.honey-page .honey-car-track.honey-t-grid > .honey-t-card { flex: 0 0 100%; }
}

/* ---------- Header tail: legal link + language toggle ----------
   Honey-only. Sits at the right of the header, ahead of the shared EN/EL toggle.
   Other sections' headers are untouched (see honey/_header_extra.html). */
body.honey-page .honey-header-tail {
    display: flex;
    align-items: center;
    gap: 18px;
}

body.honey-page .honey-legal-link {
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--honey-cream-dim);
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 1px solid transparent;
    padding-bottom: 2px;
    transition: color 0.15s ease, border-color 0.15s ease;
}

body.honey-page .honey-legal-link:hover {
    color: var(--honey-gold);
    border-bottom-color: var(--honey-gold);
}

/* ---------- Legal page ---------- */
body.honey-legal-page .site-main { padding-top: 0; }

body.honey-page .honey-legal {
    max-width: 860px;
    padding-top: 56px;
    padding-bottom: 72px;
}

body.honey-page .honey-legal-head { margin-bottom: 40px; }

body.honey-page .honey-legal-head h1 {
    font-size: clamp(30px, 5vw, 42px);
    line-height: 1.15;
    margin: 8px 0 14px;
}

body.honey-page .honey-legal-sub {
    color: var(--honey-cream-dim);
    font-size: 15px;
    margin: 0 0 24px;
}

body.honey-page .honey-legal-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

body.honey-page .honey-legal-nav a {
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--honey-gold);
    text-decoration: none;
    background: var(--honey-card);
    border: 1px solid var(--honey-line);
    border-radius: 999px;
    padding: 8px 16px;
    transition: background 0.15s ease, color 0.15s ease;
}

body.honey-page .honey-legal-nav a:hover {
    background: var(--honey-gold);
    color: #fff;
}

body.honey-page .honey-legal-identity {
    background: var(--honey-card);
    border: 1px solid var(--honey-line);
    border-radius: 14px;
    padding: 24px 28px;
    margin-bottom: 40px;
}

body.honey-page .honey-legal-identity h2 {
    font-size: 15px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--honey-gold);
    margin: 0 0 12px;
}

body.honey-page .honey-legal-identity p {
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
}

body.honey-page .honey-legal-section {
    border-top: 1px solid var(--honey-line);
    padding-top: 36px;
    margin-bottom: 44px;
    scroll-margin-top: 24px;
}

body.honey-page .honey-legal-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

body.honey-page .honey-legal-section-head h2 {
    font-size: clamp(22px, 3.4vw, 28px);
    margin: 0;
}

body.honey-page .honey-legal-meta {
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--honey-cream-dim);
}

body.honey-page .honey-legal-lede {
    font-size: 16px;
    color: var(--honey-cream-dim);
    margin: 0 0 24px;
}

body.honey-page .honey-legal-section h3 {
    font-size: 16px;
    margin: 28px 0 8px;
    color: var(--honey-gold-soft);
}

body.honey-page .honey-legal-section p,
body.honey-page .honey-legal-section li {
    font-size: 15px;
    line-height: 1.75;
    margin: 0 0 12px;
}

body.honey-page .honey-legal-section ul {
    margin: 0 0 16px;
    padding-left: 22px;
}

body.honey-page .honey-legal-section li { margin-bottom: 8px; }

body.honey-page .honey-legal-section strong { color: var(--honey-cream); }

body.honey-page .honey-legal-section a { color: var(--honey-gold); }

body.honey-page .honey-legal-back {
    border-top: 1px solid var(--honey-line);
    padding-top: 28px;
}

body.honey-page .honey-legal-back a {
    color: var(--honey-gold);
    text-decoration: none;
    font-size: 15px;
}

@media (max-width: 560px) {
    body.honey-page .honey-header-tail { gap: 10px; }
    body.honey-page .honey-legal-link { font-size: 10px; letter-spacing: 0.06em; }
    body.honey-page .honey-legal { padding-top: 32px; }
}

/* ===========================================================================
   MOBILE CORRECTIONS
   On a phone the header ran out of room: the logo, the wordmark, the
   "Terms & Policies" link, the basket and the language flags were all competing for one
   row and overlapped. And the section nav was hidden outright below 560px,
   leaving no way to reach Our Story / Products / Testimonials.

   Fixes, in order of what a visitor notices:
     1. the header becomes two rows instead of overlapping;
     2. the section nav comes back, scrolling sideways rather than wrapping.
   =========================================================================== */

@media (max-width: 760px) {
    /* Let the header wrap. Without this the wordmark and the tail overlap,
       because neither is allowed to shrink and there is nowhere to go. */
    body.honey-page .site-header {
        flex-wrap: wrap;
        row-gap: 6px;
        padding: 12px 16px;
    }

    body.honey-page .wordmark {
        flex: 1 1 auto;
        min-width: 0;          /* allows the flex item to shrink below its content */
        gap: 10px;
    }

    body.honey-page .honey-logo { height: 100px; }
    body.honey-page .honey-brand-word { font-size: 17px; }

    /* A two-row grid rather than a wrapping flex row. Wrapping made the tail
       claim the full width, which pushed it below the wordmark and left the
       header three rows tall with an empty gap beside the logo. A grid keeps the
       tail exactly as wide as the basket and flags, so it sits next to the
       wordmark, with the legal link tucked underneath — still right-aligned, as
       on desktop. */
    body.honey-page .honey-header-tail {
        display: grid;
        grid-template-columns: auto auto;
        grid-template-areas:
            "cart lang"
            "legal legal";
        align-items: center;
        justify-content: end;
        gap: 2px 12px;
    }

    body.honey-page .honey-header-tail .cart-btn { grid-area: cart; }
    body.honey-page .honey-header-tail .lang-toggle { grid-area: lang; }

    body.honey-page .honey-legal-link {
        grid-area: legal;
        justify-self: end;
        font-size: 11px;
        padding-bottom: 0;
        border-bottom: 0;
    }
}

@media (max-width: 560px) {
    /* Put the section nav back. It was display:none, which left a phone with no
       way of jumping to the products at all. Scrolls sideways instead of
       wrapping, so it stays one tidy pill rather than three stacked rows. */
    body.honey-page .honey-nav {
        display: flex;
        justify-content: flex-start;
        flex-wrap: nowrap;
        padding: 12px 16px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    body.honey-page .honey-nav::-webkit-scrollbar { display: none; }

    body.honey-page .honey-nav-pill {
        flex: 0 0 auto;
        margin: 0 auto;        /* centred when it fits, scrollable when it doesn't */
    }

    body.honey-page .honey-nav-pill a {
        padding: 7px 10px;
        font-size: 11px;
        letter-spacing: 0.02em;
        white-space: nowrap;
    }

    body.honey-page .honey-nav-pill { padding: 5px; gap: 2px; }

    body.honey-page .honey-logo { height: 92px; }
    body.honey-page .honey-brand-word { font-size: 15px; }
    body.honey-page .honey-legal-link { font-size: 10px; letter-spacing: 0.05em; }

    /* Category tabs scroll sideways rather than stacking. Eight full-width
       buttons put the first product most of a screen further down; two short
       swipeable rows keep the products in view. menu-filter.js stops forcing
       equal widths at this same breakpoint, or they would all be as wide as the
       longest label and scroll far further than necessary. */
    body.honey-page .honey-tabs-wrap { gap: 10px; margin: 20px 0 26px; }

    body.honey-page .honey-tabs {
        justify-content: flex-start;
        flex-wrap: nowrap;
        gap: 8px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 2px;
    }

    body.honey-page .honey-tabs::-webkit-scrollbar { display: none; }

    body.honey-page .honey-tab {
        flex: 0 0 auto;
        white-space: nowrap;
        padding: 9px 16px;
        font-size: 12.5px;
    }
}