/* MeLyssi74 shop layer — basket, drawer, buy row.

   Ported from the approved prototype. Everything is scoped under
   .honey-page so it cannot leak into the jobs or Quick Pie sections, which
   share base.html but not this palette.

   Loaded on every honey page that can show a basket. It does not depend on
   motion.css — the shop works with motion off. */

/* The `hidden` attribute must always win.

   Browsers implement `hidden` as `display: none` in the *user-agent* stylesheet,
   which any author rule setting `display` overrides. Several blocks below are
   display:flex and start hidden — without this the acknowledgement modal, the
   drawer footer and the free-delivery meter are all visible on page load, which
   is exactly what happened. Declared before those rules and marked !important so
   no later rule can reintroduce the bug. */
.honey-page [hidden] { display: none !important; }

/* ---------- header basket button ---------- */
.honey-page .cart-btn {
    display: inline-flex; align-items: center; gap: 9px;
    background: var(--honey-card); border: 1px solid var(--honey-line);
    border-radius: 999px; padding: 9px 15px 9px 14px;
    color: var(--honey-cream); font: inherit; font-size: 13px; font-weight: 700;
    cursor: pointer; box-shadow: 0 1px 3px rgba(44,28,13,.08);
    transition: border-color .15s, color .15s, transform .2s;
}
.honey-page .cart-btn:hover { border-color: var(--honey-gold); color: var(--honey-gold); }
.honey-page .cart-btn svg { width: 17px; height: 17px; flex: none; }
/* Brief squeeze when the flying jar lands. */
.honey-page .cart-btn.hit { transform: scale(.92); }

.honey-page .badge {
    min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
    background: var(--honey-gold); color: #fff; font-size: 11.5px; font-weight: 800;
    display: inline-flex; align-items: center; justify-content: center;
    transition: transform .25s cubic-bezier(.2,1.6,.4,1);
}
.honey-page .badge.pop { transform: scale(1.45); }

/* ---------- buy row on the product card ---------- */
.honey-page .honey-buy { display: flex; gap: 10px; align-items: center; margin-top: 14px; }

.honey-page .step {
    display: inline-flex; align-items: center; flex: none;
    border: 1px solid var(--honey-line); border-radius: 999px; background: var(--honey-bg);
}
.honey-page .step button {
    width: 32px; height: 34px; border: 0; background: none; color: var(--honey-gold);
    font-size: 17px; line-height: 1; border-radius: 999px; cursor: pointer;
}
.honey-page .step button:hover:not(:disabled) { background: var(--honey-line); }
.honey-page .step button:disabled { color: var(--honey-line); cursor: not-allowed; }
.honey-page .step span {
    min-width: 26px; text-align: center; font-weight: 700; font-size: 14px;
    font-variant-numeric: tabular-nums;
}

/* ---------- buttons ---------- */
.honey-page .btn {
    border: 1.5px solid var(--honey-gold); background: var(--honey-gold); color: #fff;
    border-radius: 999px; padding: 10px 20px; font-weight: 700; font-size: 14px;
    font-family: 'Archivo', sans-serif; cursor: pointer; text-decoration: none;
    display: inline-block; text-align: center;
    transition: background .15s, border-color .15s, color .15s;
}
.honey-page .btn:hover { background: #9c690a; border-color: #9c690a; }
.honey-page .btn.wide { width: 100%; padding: 14px 20px; font-size: 15px; }
.honey-page .btn.grow { flex: 1; }
.honey-page .btn:disabled {
    background: var(--honey-line); border-color: var(--honey-line);
    color: #a08e6a; cursor: not-allowed;
}
/* Two-line button label: the instruction on top, the destination under it.
   Overrides .btn's inline-block, so flex-direction is stated explicitly rather
   than inherited, and the pill padding is tightened to keep the same height. */
.honey-page .btn.btn-stacked {
    display: flex; flex-direction: column; flex-wrap: nowrap;
    align-items: center; justify-content: center; gap: 1px;
    padding-top: 9px; padding-bottom: 9px; line-height: 1.3;
}
.honey-page .btn-stacked .l1 { font-size: 15px; font-weight: 800; }
.honey-page .btn-stacked .l2 { font-size: 12.5px; font-weight: 600; opacity: .85; }
.honey-page .linkish {
    background: none; border: 0; color: var(--honey-cream-dim); font: inherit;
    font-size: 13px; text-decoration: underline; text-underline-offset: 3px;
    padding: 0; cursor: pointer;
}
.honey-page .linkish:hover { color: var(--honey-out); }

/* ---------- free-delivery meter ---------- */
.honey-page .meter { display: flex; flex-direction: column; gap: 7px; }
.honey-page .meter p { margin: 0; font-size: 12.5px; color: var(--honey-cream-dim); }
.honey-page .meter p b { color: var(--honey-gold); font-weight: 700; }
.honey-page .meter .track {
    height: 5px; border-radius: 999px; background: var(--honey-line); overflow: hidden;
}
.honey-page .meter .fill {
    height: 100%; background: var(--honey-gold); border-radius: 999px;
    transition: width .45s cubic-bezier(.3,.9,.3,1);
}
.honey-page .meter.done .fill { background: #2f7d32; }
.honey-page .meter.done p b { color: #2f7d32; }

/* ---------- drawer ---------- */
.honey-page .scrim {
    position: fixed; inset: 0; background: rgba(30,18,7,.42);
    opacity: 0; transition: opacity .3s; z-index: 50;
}
.honey-page .scrim.on { opacity: 1; }

.honey-page .drawer {
    position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100%);
    background: var(--honey-bg); border-left: 1px solid var(--honey-line);
    box-shadow: 0 18px 50px rgba(44,28,13,.18); z-index: 60;
    transform: translateX(100%); transition: transform .34s cubic-bezier(.32,.8,.3,1);
    display: flex; flex-direction: column;
}
.honey-page .drawer.on { transform: none; }
.honey-page .drawer-hd {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 24px; border-bottom: 1px solid var(--honey-line);
}
.honey-page .drawer-hd h2 {
    margin: 0; font-size: 15px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}
.honey-page .x {
    background: none; border: 0; color: var(--honey-cream-dim); font-size: 22px;
    line-height: 1; padding: 4px 6px; border-radius: 4px; cursor: pointer;
}
.honey-page .x:hover { color: var(--honey-out); background: var(--honey-line); }
.honey-page .drawer-body { flex: 1; overflow-y: auto; padding: 8px 24px; }
.honey-page .drawer-ft {
    padding: 20px 24px 24px; border-top: 1px solid var(--honey-line);
    background: var(--honey-card); display: flex; flex-direction: column; gap: 16px;
}

/* ---------- lines, shared by drawer and basket page ---------- */
.honey-page .row {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 12px; font-size: 14px;
}
.honey-page .row.total { font-size: 19px; font-weight: 800; font-family: 'Archivo', sans-serif; }
.honey-page .row .muted { color: var(--honey-cream-dim); }
.honey-page .row.vat-line { font-size: 12px; }
.honey-page .note { font-size: 12px; color: var(--honey-cream-dim); margin: 0; }
.honey-page .note.warn { color: var(--honey-out); font-weight: 600; }
.honey-page .sold-out { color: var(--honey-out); }

.honey-page .li {
    display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px;
    padding: 18px 0; border-bottom: 1px solid var(--honey-line); align-items: start;
}
.honey-page .li:last-child { border-bottom: 0; }
.honey-page .li img, .honey-page .li-thumb {
    width: 64px; height: 64px; object-fit: cover; border-radius: 3px;
    border: 1px solid var(--honey-line); background: var(--honey-line);
}
.honey-page .li h4 { margin: 0 0 2px; font-size: 14px; font-weight: 700; }
.honey-page .li .sub { font-size: 12px; color: var(--honey-cream-dim); margin: 0 0 9px; }
.honey-page .li .amt {
    font-weight: 700; font-size: 14px; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.honey-page .li-ctl { display: flex; align-items: center; gap: 12px; }

.honey-page .empty { text-align: center; padding: 56px 12px; color: var(--honey-cream-dim); }
.honey-page .empty p { margin: 0 0 18px; font-size: 14px; }

/* ---------- basket page ---------- */
.honey-page .honey-basket { padding-top: 48px; padding-bottom: 72px; }
.honey-page .honey-basket h1 {
    font-size: clamp(28px, 4vw, 38px); margin: 8px 0 28px;
}
.honey-page .two { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.honey-page .panel {
    background: var(--honey-card); border: 1px solid var(--honey-line);
    border-radius: 4px; padding: 26px 28px; margin-bottom: 22px;
}
.honey-page .panel.pad-lg { padding: 30px 32px; }
.honey-page .panel h3 { margin: 0 0 4px; font-size: 17px; font-weight: 800; }
.honey-page .panel .hint { margin: 0 0 20px; color: var(--honey-cream-dim); font-size: 13px; }
.honey-page .panel .pickup-hint { margin: 16px 0 0; }
.honey-page .summary { position: sticky; top: 24px; }
.honey-page .sum-rows { display: flex; flex-direction: column; gap: 11px; margin-top: 16px; }
.honey-page .hr { height: 1px; background: var(--honey-line); margin: 2px 0; }
.honey-page .summary .btn { margin-top: 18px; }
.honey-page .summary .note { margin-top: 10px; text-align: center; }

/* Route back into the shop from the basket and the checkout summary. */
.honey-page .keep-shopping { margin: 14px 2px 0; font-size: 14px; }
.honey-page .keep-shopping a { color: var(--honey-gold); font-weight: 600; text-decoration: none; }
.honey-page .keep-shopping a:hover { text-decoration: underline; }
.honey-page .back-links {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 6px 16px; margin-top: 10px;
}

.honey-page .methods { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.honey-page .method {
    text-align: left; background: var(--honey-bg); border: 1.5px solid var(--honey-line);
    border-radius: 4px; padding: 16px 18px; display: flex; flex-direction: column;
    gap: 4px; position: relative; cursor: pointer; font: inherit; color: inherit;
}
.honey-page .method:hover { border-color: var(--honey-gold-soft); }
.honey-page .method[aria-pressed="true"] {
    border-color: var(--honey-gold); background: #fff;
    box-shadow: 0 0 0 3px rgba(179,121,12,.1);
}
.honey-page .method .m-t { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 14.5px; }
.honey-page .method .m-d { font-size: 12px; color: var(--honey-cream-dim); line-height: 1.45; }
.honey-page .method .m-p {
    font-size: 13px; font-weight: 700; color: #2f7d32; margin-top: 5px;
}

/* ---------- the flying jar ---------- */
.honey-page .fly, .fly {
    position: fixed; z-index: 90; object-fit: cover; border-radius: 4px;
    pointer-events: none; box-shadow: 0 12px 34px rgba(44,28,13,.32);
}

/* ---------- terms/privacy modal (checkout) ---------- */
.honey-page .legal-modal {
    position: fixed; inset: 0; background: rgba(30,18,7,.5);
    display: flex; align-items: center; justify-content: center; z-index: 80; padding: 24px;
}
.honey-page .legal-modal[hidden] { display: none; }
.honey-page .legal-modal-panel {
    position: relative; background: var(--honey-card); border-radius: 8px;
    width: 100%; max-width: 760px; height: 82vh; max-height: 82vh;
    box-shadow: 0 24px 60px rgba(44,28,13,.32); overflow: hidden;
}
.honey-page .legal-modal-close {
    position: absolute; top: 8px; right: 10px; z-index: 2;
    width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--honey-line);
    background: var(--honey-bg); color: var(--honey-cream); font-size: 20px; line-height: 1;
    cursor: pointer;
}
.honey-page .legal-modal-close:hover { border-color: var(--honey-gold); color: var(--honey-gold); }
.honey-page .legal-modal-frame { width: 100%; height: 100%; border: 0; display: block; background: var(--honey-bg); }

/* ---------- acknowledgement modal ---------- */
.honey-page .shop-modal-overlay {
    position: fixed; inset: 0; background: rgba(30,18,7,.45);
    display: flex; align-items: center; justify-content: center; z-index: 70; padding: 20px;
}
.honey-page .shop-modal {
    background: var(--honey-card); border: 1px solid var(--honey-line);
    border-radius: 6px; padding: 26px 28px; max-width: 420px; width: 100%;
    box-shadow: 0 24px 60px rgba(44,28,13,.28);
}
.honey-page .shop-modal h2 { margin: 0 0 8px; font-size: 17px; font-weight: 800; }
.honey-page .shop-modal p { margin: 0 0 20px; font-size: 14px; line-height: 1.6; }
.honey-page .shop-modal-actions { display: flex; justify-content: flex-end; }

/* ---------- checkout error-summary modal ---------- */
.honey-page .checkout-error-modal {
    position: fixed; inset: 0; background: rgba(30,18,7,.5);
    display: flex; align-items: center; justify-content: center; z-index: 85; padding: 24px;
}
.honey-page .checkout-error-modal[hidden] { display: none; }
.honey-page .checkout-error-panel {
    position: relative; background: var(--honey-card); border: 1px solid var(--honey-line);
    border-radius: 8px; padding: 26px 28px; max-width: 460px; width: 100%;
    box-shadow: 0 24px 60px rgba(44,28,13,.32);
}
.honey-page .checkout-error-panel h2 { margin: 0 0 8px; font-size: 17px; font-weight: 800; }
.honey-page .checkout-error-panel .hint { margin: 0 0 14px; font-size: 14px; line-height: 1.5; }
.honey-page .checkout-error-panel ul {
    margin: 0 0 20px; padding-left: 20px; font-size: 13.5px; line-height: 1.7;
}
.honey-page .checkout-error-panel li { color: var(--honey-out); }
.honey-page .checkout-error-panel li a { color: var(--honey-out); text-decoration: underline; }
.honey-page .checkout-error-panel li a:hover { color: var(--honey-gold); }
.honey-page .checkout-error-close {
    position: absolute; top: 8px; right: 10px;
    width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--honey-line);
    background: var(--honey-bg); color: var(--honey-cream); font-size: 20px; line-height: 1;
    cursor: pointer;
}
.honey-page .checkout-error-close:hover { border-color: var(--honey-gold); color: var(--honey-gold); }

@media (max-width: 900px) {
    .honey-page .two { grid-template-columns: 1fr; gap: 24px; }
    .honey-page .summary { position: static; }
}
@media (max-width: 560px) {
    .honey-page .methods { grid-template-columns: 1fr; }
    /* The buy row's mobile layout lives in mobile.css now. The old rules here
       (flex-wrap:wrap + flex:1 0 100% on the button) were written for a
       one-across row layout; against mobile.css's column direction, `wrap` makes
       the container wrap into *columns* and a 100% basis on the cross... main
       axis pushes the button into a second column, off the side of the card. */
}

/* ---------- checkout form ---------- */
.honey-page .field { margin-bottom: 16px; }
.honey-page .fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.honey-page .field label {
    display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px;
}
.honey-page .field input[type="text"],
.honey-page .field input[type="email"],
.honey-page .field input[type="tel"],
.honey-page .field select {
    width: 100%; padding: 11px 13px; font: inherit; font-size: 14px;
    border: 1px solid var(--honey-line); border-radius: 4px;
    background: var(--honey-bg); color: var(--honey-cream);
}
.honey-page .field input:focus, .honey-page .field select:focus {
    outline: none; border-color: var(--honey-gold);
    box-shadow: 0 0 0 3px rgba(179,121,12,.12);
}
.honey-page .field small {
    display: block; margin-top: 5px; font-size: 12px; color: var(--honey-cream-dim);
}

/* Inline, next to the field it belongs to — never a messages strip. */
.honey-page .field-error {
    margin: 6px 0 0; font-size: 12.5px; font-weight: 600; color: var(--honey-out);
}
.honey-page .field-error::before { content: "⚠ "; }

.honey-page .method-block { margin-top: 20px; }
.honey-page .method input[type="radio"] { margin-right: 8px; }
.honey-page .method:has(input:checked) {
    border-color: var(--honey-gold); background: #fff;
    box-shadow: 0 0 0 3px rgba(179,121,12,.1);
}

.honey-page .consent {
    display: flex; gap: 10px; align-items: flex-start;
    font-size: 13.5px; line-height: 1.55; cursor: pointer;
}
.honey-page .consent input { margin-top: 3px; flex: none; }
.honey-page .consent a { color: var(--honey-gold); }

.honey-page .turnstile-wrap { margin-top: 18px; }
.honey-page .co-line { font-size: 13px; padding: 3px 0; }

@media (max-width: 560px) {
    .honey-page .fields { grid-template-columns: 1fr; }
}

/* ---------- card alignment ----------
   Without this the buy row sits directly under the description, so a card with
   two lines of text puts its button higher than the card beside it and the row
   looks ragged. Make the card a column and push the buy row to the bottom, so
   prices and buttons line up across the grid whatever the copy length.

   The .show selector has to carry the body prefix to outrank
   `body.honey-page .honey-product-card.show { display: block }` in honey.css —
   a bare .honey-page prefix loses on specificity and the cards stop laying out. */
body.honey-page .honey-product-card { display: none; flex-direction: column; }
body.honey-page .honey-product-card.show { display: flex; }
body.honey-page .honey-product-card .honey-info {
    display: flex;
    flex-direction: column;
    flex: 1;
}
body.honey-page .honey-product-card .honey-price { margin-top: auto; }
body.honey-page .honey-buy { margin-top: 14px; }


/* ---------- long-content guards ----------
   Two standard CSS traps, both documented from the smsreminder codebase where
   they caused real column distortion:

   1. A bare `1fr` is `minmax(auto, 1fr)`. The `auto` floor lets a column grow
      past its share to fit unbreakable content, so one long product name or
      pickup-point label widens the whole grid. Every fr track above is now
      minmax(0, …).

   2. A flex item defaults to `min-width: auto` and refuses to shrink below its
      own text, so `text-overflow: ellipsis` never engages. The shrink has to be
      allowed down the entire chain, not just on the element being truncated. */
.honey-page .li > div { min-width: 0; }
.honey-page .li h4,
.honey-page .li .sub {
    min-width: 0;
    overflow-wrap: anywhere;
}
.honey-page .summary,
.honey-page .panel { min-width: 0; }
.honey-page .method { min-width: 0; }
.honey-page .method .m-t,
.honey-page .method .m-d { overflow-wrap: anywhere; }
.honey-page .row > span { min-width: 0; overflow-wrap: anywhere; }