/*
 * The cart: the Add button, the stepper, the drawer and what is in it.
 *
 * Its own file because both halves of the site need it. The drawer opens
 * over the legacy PHP pages as well as the shop's own, and those cannot
 * load base.css — it is built on the shop's variables and would restyle
 * the page underneath it. Two copies of these rules would be two things
 * to keep in step, so there is one, and both sides link it.
 *
 * Moved out of base.css unchanged.
 */
        /* Add to Cart, and the stepper it becomes - A-05.
           Shared by the product listing and the detail page. */
        .cart-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
            padding: 9px 16px;
            border: 0;
            border-radius: 8px;
            font-size: 13.5px;
            font-weight: 600;
            cursor: pointer;
            white-space: nowrap;
        }

        .cart-btn.is-add { background: var(--primary-maroon, #800000); color: var(--accent-gold, #FFD700); }
        .cart-btn.is-add:hover { background: var(--dark-maroon, #5C0000); }

        .cart-btn.is-out {
            background: var(--light-bg, #FFF9F0);
            color: var(--text-light, #666666);
            cursor: default;
        }

        /* Same footprint as the button it replaces, so the card does not jump
           when something goes in the basket. */
        .cart-stepper {
            display: inline-flex;
            align-items: center;
            border-radius: 8px;
            background: var(--primary-maroon, #800000);
            overflow: hidden;
        }

        .cart-stepper button {
            width: 32px;
            height: 36px;
            border: 0;
            background: none;
            color: var(--accent-gold, #FFD700);
            font-size: 17px;
            line-height: 1;
            cursor: pointer;
        }

        .cart-stepper button:hover:not(:disabled) { background: var(--dark-maroon, #5C0000); }
        .cart-stepper button:disabled { opacity: 0.4; cursor: not-allowed; }

        .cart-stepper-count {
            min-width: 26px;
            text-align: center;
            color: var(--white, #FFFFFF);
            font-weight: 700;
            font-size: 14px;
            font-variant-numeric: tabular-nums;
        }

/* The cart drawer - A-05, redrawn 2026-09.

   Slides in from the right; the backdrop dims and softens the page behind it.

   Its colours are its own (--cd-*), set on the drawer itself. It opens over
   pages that define none of the shop's variables - the homepage among them -
   and a panel built on missing variables drew with no background at all, the
   header icons showing straight through it. Everything inside the drawer is
   given its font, sizes and colours here for the same reason: the legacy
   pages' own button, heading and link rules must not reach in. */
.cart-drawer {
    --cd-maroon: #800000;
    --cd-maroon-deep: #5C0000;
    --cd-maroon-lit: #9A1414;
    --cd-gold: #FFD700;
    --cd-cream: #FBF6EF;
    --cd-peach: #FFEDD8;
    --cd-ink: #1E1E1E;
    --cd-muted: #6F6862;
    --cd-line: #EDE3D6;
    position: fixed;
    inset: 0;
    z-index: 1200;
    font-family: "Inter", "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
    color: var(--cd-ink);
    -webkit-font-smoothing: antialiased;
}

.cart-drawer[hidden] { display: none !important; }
.cart-drawer *, .cart-drawer *::before, .cart-drawer *::after { box-sizing: border-box; }

.cart-drawer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(30, 8, 6, 0.5);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity 0.28s ease;
}

.cart-drawer.is-open .cart-drawer-backdrop { opacity: 1; }

.cart-drawer-panel {
    position: absolute;
    top: 0;
    right: 0;
    width: min(420px, 100%);
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 18px 0 0 18px;
    background: #fff;
    box-shadow: -18px 0 50px rgba(40, 8, 6, 0.24);
    transform: translateX(104%);
    transition: transform 0.34s cubic-bezier(0.22, 0.8, 0.26, 1);
}

.cart-drawer.is-open .cart-drawer-panel { transform: translateX(0); }

/* A phone: the whole screen, no rounded edge against nothing. */
@media (max-width: 480px) {
    .cart-drawer-panel { border-radius: 0; }
}

/* Someone reading the drawer should not scroll the page behind it. */
body.cart-drawer-locked { overflow: hidden; }

/* ---- the head: a maroon band, the bag, the count, the close ---- */
.cart-drawer-head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex: none;
    padding: 18px 18px 18px 22px;
    border: 0;
    background: linear-gradient(135deg, var(--cd-maroon-lit) 0%, var(--cd-maroon) 50%, var(--cd-maroon-deep) 100%);
    color: #fff;
}

/* A thin gold line under the band, brightest in the middle. */
.cart-drawer-head::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, rgba(255, 215, 0, 0), rgba(255, 215, 0, 0.85), rgba(255, 215, 0, 0));
}

.cart-drawer .cart-drawer-head h2 {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 0;
    padding: 0;
    font-family: inherit;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.2px;
    text-transform: none;
    color: #fff;
}

/* The bag, in a soft gold ring. */
.cart-drawer .cart-drawer-head h2::before {
    content: "\f290";
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 215, 0, 0.16);
    box-shadow: inset 0 0 0 1px rgba(255, 215, 0, 0.35);
    color: var(--cd-gold);
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
    font-size: 15px;
    font-weight: 900;
}

/* How many things are in it: set by cart-drawer.js from the server's count. */
.cart-drawer .cart-drawer-head h2[data-count]::after {
    content: attr(data-count);
    display: inline-grid;
    place-items: center;
    min-width: 24px;
    height: 24px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--cd-gold);
    color: var(--cd-maroon-deep);
    font-size: 12.5px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.cart-drawer .cart-drawer-x {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 38px;
    height: 38px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.cart-drawer .cart-drawer-x:hover { background: var(--cd-gold); color: var(--cd-maroon-deep); transform: rotate(90deg); }
.cart-drawer .cart-drawer-x:focus-visible { outline: 2px solid var(--cd-gold); outline-offset: 2px; }

/* ---- the body ---- */
.cart-drawer-content { display: flex; flex: 1; flex-direction: column; overflow-y: auto; background: var(--cd-cream); overscroll-behavior: contain; }
/* Children keep their height and the panel scrolls, rather than squeezing them. */
.cart-drawer-content > * { flex-shrink: 0; }
.cart-drawer-inner { display: flex; flex: 1 0 auto; flex-direction: column; }

.cart-drawer-loading,
.cart-drawer-empty {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 64px 28px;
    color: var(--cd-muted);
    text-align: center;
}

.cart-drawer-loading i { font-size: 26px; color: var(--cd-maroon); opacity: 0.75; }

/* Empty: a bag in a warm circle, a line, and a way back to the shop. */
.cart-drawer .cart-drawer-empty i {
    display: grid;
    place-items: center;
    width: 104px;
    height: 104px;
    margin-bottom: 6px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #FFF7EA 0%, var(--cd-peach) 100%);
    box-shadow: 0 0 0 10px rgba(255, 237, 216, 0.45);
    color: var(--cd-maroon);
    font-size: 40px;
}

.cart-drawer .cart-drawer-empty p { margin: 4px 0 6px; font-size: 17px; font-weight: 600; color: var(--cd-ink); }
.cart-drawer .cart-drawer-empty a { color: var(--cd-maroon); font-weight: 600; }

.cart-drawer .cart-drawer-close-btn {
    margin: 0;
    padding: 12px 28px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--cd-maroon-lit), var(--cd-maroon) 55%, var(--cd-maroon-deep));
    box-shadow: 0 8px 18px rgba(128, 0, 0, 0.24);
    color: var(--cd-gold);
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.cart-drawer .cart-drawer-close-btn:hover { transform: translateY(-1px); box-shadow: 0 12px 24px rgba(128, 0, 0, 0.3); }

/* ---- a line: a white card on the cream ---- */
/* The codes and the button follow straight on from the last line, as in the design, rather than waiting at the foot of a tall panel. */
.cart-drawer-lines { display: flex; flex: none; flex-direction: column; gap: 10px; padding: 16px 16px 8px; }

.cart-drawer-line {
    position: relative;
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: stretch;
    padding: 12px;
    border: 1px solid var(--cd-line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(60, 20, 10, 0.04);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cart-drawer-line:hover { border-color: #E4D0B8; box-shadow: 0 8px 20px rgba(60, 20, 10, 0.08); }

.cart-drawer-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    overflow: hidden;
    border: 1px solid var(--cd-line);
    border-radius: 10px;
    background: var(--cd-cream);
    color: #C4B9AC;
    font-size: 20px;
}

/* A photo that fails to load leaves the cream tile, not its alt text spilling out. */
.cart-drawer-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; color: transparent; font-size: 0; }

.cart-drawer-body { display: flex; flex-direction: column; min-width: 0; }

.cart-drawer-name {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--cd-ink);
    overflow-wrap: anywhere;
}

/* Pack size on a drawer line, under the name. */
.cart-drawer-unit { display: block; margin-top: 2px; font-size: 12px; color: var(--cd-muted); }
.cart-drawer-price { display: block; margin: 3px 0 10px; font-size: 12.5px; color: var(--cd-muted); font-variant-numeric: tabular-nums; }

/* The stepper, in the drawer: a light outlined pill rather than a maroon block. */
.cart-drawer .cart-stepper.is-small {
    align-self: flex-start;
    margin-top: auto;
    border: 1px solid #E3D2BE;
    border-radius: 999px;
    background: #fff;
}

.cart-drawer .cart-stepper.is-small form { display: contents; margin: 0; }

.cart-drawer .cart-stepper.is-small button {
    width: 32px;
    height: 30px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--cd-maroon);
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.cart-drawer .cart-stepper.is-small button:hover:not(:disabled) { background: var(--cd-peach); }
.cart-drawer .cart-stepper.is-small button:disabled { opacity: 0.35; cursor: not-allowed; }
.cart-drawer .cart-stepper.is-small .cart-stepper-count { min-width: 24px; color: var(--cd-ink); font-size: 13.5px; font-weight: 700; }

/* The line's total, at the foot of the card, under the bin. */
.cart-drawer-total {
    align-self: end;
    padding-bottom: 5px;
    font-size: 15px;
    font-weight: 700;
    color: var(--cd-maroon);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.cart-drawer-remove { position: absolute; top: 8px; right: 8px; margin: 0; }

.cart-drawer .cart-drawer-remove button {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: #B9AEA3;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.cart-drawer .cart-drawer-remove button:hover { background: #FDECEA; color: #B3261E; }

/* ---- the foot: the codes, the sum, the way forward ----
   The server sends the sum first; the design reads the codes first and the
   sum just above the button, so the order is set here rather than in two
   templates. Anything not named keeps its place among the delivery lines. */
.cart-drawer-foot {
    display: flex;
    flex: none;
    flex-direction: column;
    padding: 2px 16px calc(18px + env(safe-area-inset-bottom, 0px));
    background: var(--cd-cream);
}

.cart-drawer-foot > * { order: 4; }
.cart-drawer-foot > .coupon-box { order: 1; }
.cart-drawer-foot > .delivery-quote { order: 2; }
.cart-drawer-foot > .cart-drawer-sum { order: 3; }
.cart-drawer-foot > .delivery-tax-note { order: 5; }
.cart-drawer-foot > .cart-drawer-checkout { order: 6; }
.cart-drawer-foot > .cart-drawer-view { order: 7; }

.cart-drawer-sum {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-top: 16px;
    padding: 14px 4px 0;
    border-top: 1px solid var(--cd-line);
    font-size: 15px;
    font-weight: 600;
    color: var(--cd-ink);
}

/* Until a PIN code is given, the drawer says nothing about delivery: the
   checkout works it out, and the line only repeated that. */
.cart-drawer .delivery-line.is-muted { display: none; }
.cart-drawer-foot > .delivery-line { padding-left: 4px; padding-right: 4px; }

.cart-drawer-sum strong { font-size: 21px; font-weight: 800; color: var(--cd-maroon); font-variant-numeric: tabular-nums; }

.cart-drawer-note { margin: 2px 0 14px; font-size: 12.5px; color: var(--cd-muted); }

/* Proceed to checkout: the one strong thing in the panel. */
.cart-drawer a.cart-drawer-checkout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 52px;
    margin-top: 16px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--cd-maroon-lit) 0%, var(--cd-maroon) 55%, var(--cd-maroon-deep) 100%);
    box-shadow: 0 10px 22px rgba(128, 0, 0, 0.28);
    color: var(--cd-gold);
    font-size: 15.5px;
    font-weight: 700;
    letter-spacing: 0.2px;
    text-align: center;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.cart-drawer a.cart-drawer-checkout::after {
    content: "\f061";
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
    font-size: 13px;
    font-weight: 900;
    transition: transform 0.2s ease;
}

.cart-drawer a.cart-drawer-checkout:hover { color: var(--cd-gold); transform: translateY(-1px); box-shadow: 0 14px 28px rgba(128, 0, 0, 0.34); }
.cart-drawer a.cart-drawer-checkout:hover::after { transform: translateX(4px); }

/* The cart page, from inside the drawer. Quieter than the checkout button
   above it: it is a way to see the same basket, not a way forward. */
.cart-drawer a.cart-drawer-view {
    display: block;
    margin-top: 12px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--cd-muted);
    text-align: center;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.cart-drawer a.cart-drawer-view:hover { color: var(--cd-maroon); }

/* The coupon and the delivery quote, in the drawer: white cards with a
   heading that opens and shuts them (cart-drawer.js keeps which is shut). */
.cart-drawer .coupon-box,
.cart-drawer .delivery-quote {
    margin: 12px 0 0;
    padding: 12px 14px;
    border: 1px solid #EAD9C4;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(60, 20, 10, 0.04);
}

.cart-drawer .coupon-box form,
.cart-drawer .delivery-quote form { margin: 0; }

.cart-drawer .coupon-box label,
.cart-drawer .delivery-quote label {
    margin: 0 0 10px;
    color: var(--cd-ink);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    text-transform: none;
    cursor: pointer;
    user-select: none;
}

.cart-drawer .coupon-box label i,
.cart-drawer .delivery-quote label i { width: 16px; color: var(--cd-maroon); text-align: center; }

/* The chevron: down while open, sideways when shut. */
.cart-drawer .coupon-box label::after,
.cart-drawer .delivery-quote label::after {
    content: "\f078";
    margin-left: auto;
    color: var(--cd-maroon);
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
    font-size: 11px;
    font-weight: 900;
    transition: transform 0.2s ease;
}

.cart-drawer .is-shut label { margin-bottom: 0; }
.cart-drawer .is-shut label::after { transform: rotate(-90deg); }
.cart-drawer .is-shut .coupon-row,
.cart-drawer .is-shut .delivery-quote-row,
.cart-drawer .is-shut .coupon-problem,
.cart-drawer .is-shut .delivery-quote-yes,
.cart-drawer .is-shut .delivery-quote-no { display: none; }

.cart-drawer .coupon-row input,
.cart-drawer .delivery-quote-row input {
    height: 40px;
    margin: 0;
    border: 1px solid #E0D3C3;
    border-radius: 10px;
    background: #fff;
    color: var(--cd-ink);
    font-family: inherit;
    box-shadow: none;
}

.cart-drawer .coupon-row input:focus,
.cart-drawer .delivery-quote-row input:focus { border-color: var(--cd-maroon); box-shadow: 0 0 0 3px rgba(128, 0, 0, 0.1); }

.cart-drawer .coupon-row button,
.cart-drawer .delivery-quote-row button {
    height: 40px;
    margin: 0;
    padding: 0 18px;
    border-radius: 10px;
    background: var(--cd-maroon);
    color: var(--cd-gold);
    font-family: inherit;
}

.cart-drawer .coupon-row button:hover,
.cart-drawer .delivery-quote-row button:hover { background: var(--cd-maroon-deep); }

.cart-drawer .delivery-line { color: var(--cd-ink); }
.cart-drawer .delivery-line.is-muted,
.cart-drawer .delivery-line small { color: var(--cd-muted); }
.cart-drawer .delivery-line.is-total { border-top-color: var(--cd-line); }
.cart-drawer .delivery-line.is-total strong { color: var(--cd-maroon); }

@media (prefers-reduced-motion: reduce) {
    .cart-drawer-panel,
    .cart-drawer-backdrop,
    .cart-drawer .cart-drawer-x,
    .cart-drawer a.cart-drawer-checkout { transition: none; }
}


/* ---- A-11: the delivery quote, shared by the cart page and the drawer ----
 *
 * In base.css rather than cart.css because the drawer rides on every page and
 * loads nothing else. The first version of this block was styled in
 * checkout.css, which the cart never loads, and went live as a bare input and
 * a bare button; the second was in cart.css, which the drawer never loads.
 * One block, one stylesheet, loaded everywhere.
 */

.delivery-quote {
    margin: 14px 0;
    padding: 14px 0;
    border-top: 1px solid #e8e4dd;
    border-bottom: 1px solid #e8e4dd;
}

.delivery-quote label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-dark, #2C2C2C);
    margin-bottom: 9px;
}

.delivery-quote label i { color: var(--primary-maroon, #800000); }

/* One row that fits both a 320px summary panel and the drawer's footer. */
.delivery-quote-row { display: flex; gap: 7px; }

.delivery-quote-row input {
    flex: 1;
    min-width: 0;
    padding: 9px 12px;
    border: 1px solid #ddd8d0;
    border-radius: 8px;
    background: var(--white, #FFFFFF);
    font-family: inherit;
    font-size: 13.5px;
}

.delivery-quote-row input:focus {
    outline: none;
    border-color: var(--primary-maroon, #800000);
}

.delivery-quote-row button {
    flex: none;
    padding: 9px 16px;
    border: none;
    border-radius: 8px;
    background: var(--primary-maroon, #800000);
    color: var(--accent-gold, #FFD700);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
}

.delivery-quote-row button:hover { background: var(--dark-maroon, #5f0000); }

.delivery-quote-yes,
.delivery-quote-no {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin: 10px 0 0;
    font-size: 12.5px;
    line-height: 1.55;
}

.delivery-quote-yes { color: #2e6b4f; }
.delivery-quote-no { color: #a81e12; }

.delivery-quote-yes i,
.delivery-quote-no i { margin-top: 2px; }

.delivery-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
    font-size: 14px;
    color: var(--text-dark, #2C2C2C);
}

.delivery-line.is-muted { color: var(--text-light, #666666); font-size: 13.5px; }

/* Which method the "from" figure is for. */
.delivery-line small {
    display: block;
    font-size: 11.5px;
    font-weight: 400;
    color: var(--text-light, #666666);
    margin-top: 1px;
}

.delivery-line .is-free { color: #2e6b4f; font-weight: 700; }

.delivery-line.is-total {
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid #e8e4dd;
    font-weight: 600;
}

.delivery-line.is-total strong {
    font-size: 18px;
    color: var(--primary-maroon, #800000);
    font-variant-numeric: tabular-nums;
}

/*
 * The handle the drawer uses to find a control on the page behind it.
 *
 * display:contents so the wrapper adds a handle without adding a box — the
 * Add button and the stepper stay direct children of whatever flex or grid
 * row they were in, and the four places that include the partial lay out
 * exactly as they did before the wrapper existed.
 */
.cart-control { display: contents; }

/* ---------------------------------------------------------------------------
   Discount codes and the tax note — C-01 and A-13.

   Here rather than in cart.css or checkout.css because the same box is shown
   in three places that load different stylesheets: the cart page, the cart
   drawer and the checkout drawer's delivery panel. base.css is the only sheet
   all three have. Putting shared rules in a page's own stylesheet is a mistake
   this file has already had to absorb three times.
   ------------------------------------------------------------------------ */
.coupon-box {
    margin: 14px 0;
    padding: 14px 0;
    border-top: 1px solid #e8e4dd;
}

.coupon-box label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-dark, #2C2C2C);
    margin-bottom: 9px;
}

.coupon-box label i { color: var(--primary-maroon, #800000); }

.coupon-row { display: flex; gap: 7px; }

.coupon-row input {
    flex: 1;
    min-width: 0;
    padding: 9px 12px;
    border: 1px solid #ddd8d0;
    border-radius: 8px;
    background: var(--white, #FFFFFF);
    font-family: inherit;
    font-size: 13.5px;
    /* Codes are read off a screenshot and typed in; the shape of the letters
       matters more here than it does anywhere else on the page. */
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.coupon-row input:focus {
    outline: none;
    border-color: var(--primary-maroon, #800000);
}

.coupon-row button {
    flex: none;
    padding: 9px 16px;
    border: none;
    border-radius: 8px;
    background: var(--primary-maroon, #800000);
    color: var(--accent-gold, #FFD700);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
}

.coupon-row button:hover { background: var(--dark-maroon, #5f0000); }

.coupon-problem {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin: 10px 0 0;
    font-size: 12.5px;
    line-height: 1.55;
    color: #a81e12;
}

.coupon-problem i { margin-top: 2px; }

/* Applied: a quiet green row, not another form. */
.coupon-applied {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 10px;
    padding: 10px 12px;
    border: 1px dashed #b6d3c2;
    border-radius: 8px;
    background: #f2f9f5;
}

.coupon-applied-code {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #2e6b4f;
}

.coupon-applied-what {
    flex: 1;
    min-width: 0;
    font-size: 12.5px;
    color: #2e6b4f;
}

.coupon-applied form { display: contents; }

.coupon-applied button {
    flex: none;
    padding: 0;
    border: none;
    background: none;
    font-family: inherit;
    font-size: 12.5px;
    color: var(--text-light, #666666);
    text-decoration: underline;
    cursor: pointer;
}

.coupon-applied button:hover { color: #a81e12; }

.delivery-line.is-discount { color: #2e6b4f; }


/* Shared with the checkout summary, and kept whole rather than written out
   twice. It is here because the drawer needs it on the legacy pages, and
   .checkout-summary-tax loses nothing by coming along: this file is on every
   page of the shop, exactly as base.css is. */
/* A-13. Said quietly, because it changes nothing the shopper pays — it only
   explains what is already inside the figure above it. */
.delivery-tax-note,
.checkout-summary-tax {
    margin: 6px 0 0;
    font-size: 11.5px;
    color: var(--text-light, #666666);
    text-align: right;
}