/* ===== Olleco eCommerce: store-specific styles =====
   Builds on the tokens & components in site.css (--teal, --lime, .wrap, .btn, .form-card, etc). */

main { min-height: 60vh; }

/* Next-day delivery cut-off countdown banner */
.cutoff-banner { background: var(--teal); color: #fff; font-size: .92rem; }
.cutoff-banner .wrap { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 9px 20px; text-align: center; }
.cutoff-banner .truck { flex: none; color: var(--lime); }
.cutoff-banner .cutoff-countdown { color: var(--lime); font-weight: 800; font-variant-numeric: tabular-nums; }
/* Phones: the header is pinned, so every pixel of it is permanently lost screen.
   Tighten the banner (it wraps to two lines at this width) and shrink the bar. */
@media (max-width: 560px) {
    .cutoff-banner { font-size: .78rem; line-height: 1.35; }
    .cutoff-banner .wrap { padding: 6px 16px; gap: 7px; }
    .header .bar { padding: 8px 0; }
    .header .brand img, .header.shrink .brand img { height: 32px; }
}
/* Delivery-info countdown card: dark green with white text, so it still carries
   weight now the page behind it is white (was light green on light green). */
.cutoff-card { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; background: var(--teal-deep); border: 1px solid var(--teal-deep); border-radius: var(--r-md, 12px); padding: 26px 22px; margin-bottom: 28px; }
.cutoff-card .cutoff-label { color: #fff; font-size: .95rem; }
.cutoff-card .cutoff-label strong { color: #fff; }
.cutoff-card .cutoff-delivery { color: var(--lime); }
.cutoff-card .cutoff-countdown.big { color: var(--lime); font-weight: 800; font-size: clamp(1.8rem, 5vw, 2.6rem); font-variant-numeric: tabular-nums; line-height: 1.1; }

/* Page header band: white, no separating rule (Marketing: "remove white line") */
.page-head { background: #fff; border-bottom: none; padding: clamp(26px,4vw,46px) 0; }
/* Narrow content pages (delivery info, FAQs, returns) constrain their body to
   760px; match the title's wrap to it so the heading lines up with the text
   and the card below it instead of hanging out to the left. */
.page-head.narrow > .wrap { max-width: 760px; }
.page-head h1 { font-size: clamp(1.8rem,3.4vw,2.6rem); }
.page-head .lead { margin-top: 10px; max-width: 60ch; }
.breadcrumb { font-size: .85rem; color: var(--muted); margin-bottom: 10px; }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--teal); }

/* Basket icon in header: match the marketing header's .bar-right exactly for a seamless transition */
.bar-right { display: flex; align-items: center; gap: 14px; order: 2; margin-left: auto; }
.basket-link { position: relative; display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; color: var(--teal); transition: background .2s; }
.basket-link:hover { background: rgba(14,79,73,.07); }
.basket-count { position: absolute; top: 4px; right: 4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: var(--lime); color: var(--teal-deep); font-size: .68rem; font-weight: 800; display: grid; place-items: center; }
.basket-count[data-count="0"] { display: none; }

/* ===== Royal warrant strip (homepage) =====
   Full-bleed dark-green band (not just a bordered box) so it visually separates
   the hero above from the range grid below, per Marketing. Section stays full
   width; .warrant-inner is the usual centred .wrap so the content itself lines
   up with everything else on the page.

   The heading is its OWN full-width row above the image+copy row, rather than
   squeezed into the narrow copy column beside the mark - at the shared
   .range-head-size font-size, "Trusted by foodservice businesses across the
   UK" doesn't fit one line in a ~900px column, but does across the section's
   full width, which is what Marketing asked for without shrinking the type. */
.warrant { background: var(--teal-deep); padding: clamp(36px, 5vw, 56px) 0; }
.warrant-inner {
  display: grid;
  /* Wide enough for the warrant caption's longest line ("By Appointment to His
     Majesty The King") to sit on one line - at the old 210px cap the three
     <br>-separated lines each wrapped, rendering as five. */
  grid-template-columns: clamp(200px, 24vw, 250px) 1fr;
  grid-template-rows: auto auto;
  column-gap: clamp(20px, 4vw, 40px);
  align-items: center;
}
.warrant-title { grid-column: 1 / -1; margin-bottom: clamp(18px, 3vw, 28px); }
.warrant-mark { display: grid; place-items: center; gap: 10px; }
.warrant-mark img { max-width: 100%; height: auto; }
/* Exactly the three <br>-separated lines Marketing specified - nowrap so a narrow
   column can never turn them back into five. */
.warrant-caption { margin: 0; text-align: center; font-size: .7rem; line-height: 1.6; letter-spacing: .015em; color: rgba(255,255,255,.75); white-space: nowrap; }
/* Placeholder shown until the real warrant artwork is supplied. Light-on-dark
   to match the band; was designed for a white background originally. */
.warrant-placeholder { display: grid; place-items: center; text-align: center; width: 140px; height: 140px; border: 1px dashed rgba(255,255,255,.35); border-radius: 12px; color: rgba(255,255,255,.7); font-size: .78rem; line-height: 1.4; }
/* Heading matches .range-head h2 exactly (Marketing), via a shared class rather
   than duplicating the clamp() value in two places. */
.warrant-title.range-head-size { color: #fff; white-space: nowrap; }
.warrant-copy p { color: rgba(255,255,255,.82); max-width: 68ch; }
@media (max-width: 900px) {
    /* Below this the full-width row is no longer wide enough to guarantee one
       line at this font-size; let it wrap rather than overflow. */
    .warrant-title.range-head-size { white-space: normal; }
}
@media (max-width: 640px) {
    .warrant-inner { grid-template-columns: 1fr; justify-items: center; text-align: center; }
    .warrant-title { text-align: center; }
    .warrant-copy p { margin: 0 auto; }
    /* Stacked, the mark would otherwise run the full column width and dominate
       the screen; cap it so it reads as a mark of approval, not a banner. */
    .warrant-mark img { max-width: 200px; }
}

/* Size not chosen yet on the PDP: red highlight + message (Marketing asked for
   a visible trigger rather than a silently disabled button).
   The select's own red border lives in glass.css; see the note there. */
.size-error { color: #b3261e; font-size: .88rem; font-weight: 600; margin-top: 8px; }

/* Inline text link that needs to read as obviously clickable inside a muted
   paragraph, where the base `a{text-decoration:none}` reset otherwise makes
   it look like plain text (Marketing: DeliveryInfo's account-setup / contact
   links). Bold + underline, no colour change. */
.link-cta { font-weight: 700; text-decoration: underline; }

/* ===== Catalogue grid ===== */
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap: 24px; margin: 40px 0; }
.product-card { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.product-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
/* Square tiles, filled edge to edge: the pack shots supply their own grey
   backdrop, so no padding or tile colour is needed behind them. */
.product-card .media { aspect-ratio: 1/1; display: block; overflow: hidden; }
.product-card .media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-card .body { padding: 18px 18px 22px; display: flex; flex-direction: column; flex: 1; }
.product-card h3 { font-size: 1.08rem; margin-bottom: 4px; min-height: 2.6em; }
.product-card h3 a { color: var(--teal); }
.product-card form.add-to-basket { display: flex; flex-direction: column; flex: 1; }
.product-card .price { font-weight: 700; color: var(--ink); font-size: 1.15rem; margin: 8px 0 2px; }
.product-card .per { font-size: .8rem; color: var(--muted); margin-bottom: 14px; }
.product-card select { margin: 8px 0; }
.product-card .add-row { margin-top: auto; }

/* Form controls (reuse .form-card tokens but also standalone) */
select, .field-input { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; font: inherit; background: var(--paper); color: var(--ink); }
select:focus, .field-input:focus { outline: 2px solid var(--lime); border-color: transparent; }

/* Buttons sizing inside cards */
.btn.btn-sm { padding: 10px 20px; font-size: .9rem; }
.btn.full { width: 100%; justify-content: center; }

/* Buy area (catalogue card): swaps Add button <-> in-basket stepper */
.buy-area { margin-top: auto; }
.buy-area .buy-stepper { display: flex; width: 100%; justify-content: space-between; }
.buy-area .buy-stepper input { flex: 1; }
.buy-area .inbasket-link { margin-top: 8px; }

/* ===== Quantity stepper ===== */
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: var(--paper); }
.qty button { width: 44px; height: 44px; border: none; background: transparent; cursor: pointer; font-size: 1.1rem; color: var(--teal); display: grid; place-items: center; }
.qty button:hover { background: var(--soft); }
.qty input { width: 44px; text-align: center; border: none; font: inherit; font-weight: 700; background: transparent; -moz-appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ===== Product detail (PDP) ===== */
/* minmax(0,1fr) rather than 1fr: a bare 1fr track floors at the item's min-content,
   so one stubborn child (the qty stepper + Add button row) could push the whole
   grid wider than the page and cause sideways scroll on narrow phones. */
.pdp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px,5vw,56px); margin: 28px 0 48px; align-items: start; }
/* Gallery: the pack shots carry their own studio-grey backdrop, so the panel
   has no padding or background of its own; the photo fills it edge to edge. */
.pdp .gallery-wrap { position: sticky; top: calc(var(--sticky-top) + 16px); }
.pdp .gallery { border: 1px solid var(--line); border-radius: var(--r-lg); aspect-ratio: 1/1; overflow: hidden; box-shadow: var(--shadow-sm); }
.pdp .gallery img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.thumb { width: 72px; height: 72px; padding: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: none; cursor: pointer; transition: border-color .2s, transform .2s var(--ease); }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb:hover { transform: translateY(-2px); }
.thumb.on { border-color: var(--lime-dark); box-shadow: 0 0 0 2px var(--lime-soft); }
.pdp .info { display: flex; flex-direction: column; }
.pdp .info .eyebrow { margin-bottom: 8px; }
.pdp h1 { font-size: clamp(1.7rem,3vw,2.4rem); }
.pdp .pdp-desc { color: var(--muted); margin: 14px 0 22px; max-width: 52ch; }
.pdp label { font-weight: 600; color: var(--muted); display: block; margin: 4px 0 6px; }

/* Buy box: groups price, size, qty and trust signals */
.buy-box { background: var(--soft); border: 1px solid var(--line); border-radius: var(--r-md); padding: clamp(20px,3vw,28px); box-shadow: var(--shadow-sm); }
.buy-box .price-row { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 18px; }
.buy-box .price { font-size: 2rem; font-weight: 800; color: var(--teal); line-height: 1; }
.buy-box .per { color: var(--muted); font-size: .85rem; margin-top: 6px; }
.stock-pill { background: var(--lime-soft); color: var(--teal-deep); font-weight: 700; font-size: .75rem; padding: 6px 12px; border-radius: 999px; }
.pdp .buy-row { display: flex; gap: 12px; align-items: center; margin-top: 14px; }
.pdp .buy-row .qty { flex: none; }
.pdp .buy-row .pdp-add { flex: 1; justify-content: center; }
.trust-row { list-style: none; display: flex; flex-direction: column; gap: 10px; margin: 20px 0 0; padding: 18px 0 0; border-top: 1px dotted var(--dot); }
.trust-row li { display: flex; align-items: center; gap: 10px; font-size: .9rem; color: var(--muted); }
.trust-row svg { width: 20px; height: 20px; color: var(--lime-dark); flex: none; }

/* Accordion rules (PDP sections, FAQ questions) are light-grey dotted. */
.accordion { border-top: 1px dotted var(--dot); margin-top: 8px; }
.pdp .accordion { margin-top: 26px; }
.accordion .item { border-bottom: 1px dotted var(--dot); }
.accordion .head { width: 100%; text-align: left; background: none; border: none; cursor: pointer; padding: 16px 0; font: inherit; font-weight: 700; color: var(--teal); display: flex; justify-content: space-between; align-items: center; }
.accordion .head .chev { transition: transform .25s var(--ease); color: var(--lime-dark); }
.accordion .item.open .head .chev { transform: rotate(180deg); }
/* Collapsed panels must be exactly 0 high. A grid 0fr row was tried and leaked an
   18px sliver of content, because .panel-inner's bottom padding is part of the grid
   item's box and 0fr cannot shrink below it. max-height on the panel itself has no
   such problem. The cap is deliberately far above the tallest panel (the dietary
   lists run to ~400px) so content can never be clipped, which is what the previous
   400px cap risked. */
.accordion .panel { max-height: 0; overflow: hidden; transition: max-height .35s var(--ease); color: var(--muted); }
.accordion .item.open .panel { max-height: 1200px; }
.accordion .panel-inner { padding: 0 0 18px; }
.feature-list { margin: 0; padding-left: 20px; }
.feature-list li { margin-bottom: 6px; line-height: 1.6; }
.feature-list li:last-child { margin-bottom: 0; }

.related { margin: 50px 0; }

/* ===== Basket / tables ===== */
.cart-table { width: 100%; border-collapse: collapse; background: var(--soft); border-radius: var(--r-md); overflow: hidden; }
.cart-table th { text-align: left; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 16px; border-bottom: 1px dotted var(--dot); }
.cart-table td { padding: 16px; border-bottom: 1px dotted var(--dot); vertical-align: middle; }
.cart-table td.num, .cart-table th.num { text-align: right; }
.cart-table .prod { display: flex; gap: 14px; align-items: center; }
.cart-table .prod img { width: 54px; height: 54px; object-fit: contain; background: var(--cream); border-radius: 10px; padding: 4px; }
.cart-table tr.total td { font-weight: 800; color: var(--teal); font-size: 1.05rem; border-bottom: none; }
/* Subtotal reads as a plain line item, not a second "total" - the bold teal treatment is
   reserved for the actual amount payable (.grand), so a discounted basket doesn't show two
   equally emphasised figures. */
.cart-table tr.subtotal-row td { font-weight: 600; color: var(--ink); font-size: 1rem; }
.cart-table tr.grand td { border-top: 1px dotted var(--dot); padding-top: 14px; }
/* padding, not just text height: this is a touch target on a phone */
.link-remove { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; color: var(--muted); cursor: pointer; font-size: .82rem; padding: 11px 8px; margin: -11px -8px; }
.link-remove .trash { color: #d23b2e; flex: none; }
.link-remove span { text-decoration: underline; }
.link-remove:hover { color: #b3261e; }
.link-remove:hover .trash { color: #b3261e; }

.cart-actions { display: flex; justify-content: space-between; gap: 14px; margin: 26px 0; flex-wrap: wrap; }
.empty-state { text-align: center; padding: 60px 20px; color: var(--muted); }

/* Price-change notice (basket / summary) */
.price-notice { border: 1px solid #e7c98a; background: #fdf6e6; color: #6b4e12; border-radius: var(--r-md, 12px); padding: 12px 16px; margin-bottom: 20px; font-size: .92rem; }
.price-changed { margin-top: 4px; font-size: .8rem; color: var(--muted); display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.price-changed .was { text-decoration: line-through; }
.price-changed strong { color: var(--teal); }
.price-changed .tag { background: #fdf6e6; color: #6b4e12; border: 1px solid #e7c98a; border-radius: 999px; padding: 1px 8px; font-size: .7rem; font-weight: 700; }

/* ===== Checkout layout ===== */
.checkout-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(24px,4vw,46px); align-items: start; margin: 40px 0; }
.summary-card { background: var(--soft); border: 1px solid var(--line); border-radius: var(--r-md); padding: 24px; position: sticky; top: calc(var(--sticky-top) + 12px); }
.summary-card h3 { font-size: 1.15rem; margin-bottom: 14px; }
.summary-line { display: flex; justify-content: space-between; padding: 8px 0; font-size: .95rem; color: var(--muted); }
.summary-line.grand { border-top: 1px dotted var(--dot); margin-top: 8px; padding-top: 14px; font-weight: 800; color: var(--teal); font-size: 1.1rem; }
.summary-items { margin-bottom: 12px; }
.summary-items .si { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; font-size: .9rem; }

/* "Your details" review list (Summary page): labelled rows instead of one run-on block */
.detail-list .dl-row { display: grid; grid-template-columns: 110px 1fr; gap: 14px; padding: 10px 0; border-bottom: 1px dotted var(--dot); }
.detail-list .dl-row:first-child { padding-top: 0; }
.detail-list .dl-row:last-child { padding-bottom: 0; border-bottom: none; }
.detail-list .dl-label { color: var(--muted); font-size: .82rem; font-weight: 600; }
.detail-list .dl-val { color: var(--ink); font-size: .96rem; overflow-wrap: anywhere; }
@media (max-width: 480px) { .detail-list .dl-row { grid-template-columns: 1fr; gap: 2px; } }

.field { margin-bottom: 16px; }
.field label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 6px; color: var(--muted); }
.field .req { color: #b3261e; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
/* "12" needs less room than "High Street", but not so little that the "House number or
   name" label and its validation message wrap to three lines in the narrow checkout
   column. Collapses to one column with .two-col below 640px. */
.two-col.addr-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); }
.field-validation-error, .validation-summary-errors { color: #b3261e; font-size: .85rem; }
.field-validation-error { display: block; margin-top: 6px; }

/* ===== Promo code box (order summary) ===== */
.promo-form { display: flex; gap: 8px; margin-top: 14px; align-items: stretch; }
.promo-form .btn { padding: 10px 18px; }
/* Sleek outlined field with a floating label that notches into the border on
   focus/fill (Material-style), replacing the plain "Promo code" placeholder. */
.promo-field { position: relative; flex: 1; min-width: 0; }
.promo-field .field-input { width: 100%; text-transform: uppercase; }
.promo-field label {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  transform-origin: left center;
  color: var(--teal); opacity: .55; font-size: .95rem;
  padding: 0 5px; pointer-events: none;
  transition: top .16s var(--spring), transform .16s var(--spring), opacity .16s, color .16s;
}
/* Float the label so its centre sits on the input's top border (notch), anchored
   to top:0 so it stays put whatever the field height; scales from the left. */
.promo-field .field-input:focus + label,
.promo-field .field-input:not(:placeholder-shown) + label {
  top: 0; transform: translateY(-50%) scale(.82);
  opacity: 1; font-weight: 600;
  background: var(--soft);
}
.promo-field .field-input:focus + label { color: var(--lime-dark); }
.promo-error { color: #b3261e; font-size: .85rem; margin-top: 8px; }
.promo-line span:last-child { color: var(--lime-dark); font-weight: 700; }
.promo-applied { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
.promo-tag { font-size: .82rem; font-weight: 700; color: var(--teal); }
/* The promo controls above were built for the narrow summary sidebar; on the full-width
   basket page they would stretch right across, so cap them to an entry-field width and sit
   them on the right, under the totals column and above the Checkout button. Below 640px the
   box is full width anyway, so the auto margin has no effect there. */
.basket-promo { max-width: 420px; margin-left: auto; }
.basket-promo .promo-applied { justify-content: flex-end; }
/* Discount line in the basket table, coloured like the one on the summary. */
.cart-table tr.promo-row td { color: var(--lime-dark); font-weight: 700; }
.promo-remove { background: none; border: none; cursor: pointer; color: #b3261e; font-size: .82rem; text-decoration: underline; padding: 0; }
.express { display: flex; gap: 10px; margin-bottom: 8px; }
.express .epay { flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px; height: 46px; border-radius: 10px; border: 1px solid transparent; cursor: pointer; font-weight: 600; transition: transform .15s var(--ease), box-shadow .15s var(--ease); }
.express .epay:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.express .epay span { font-size: 1.05rem; line-height: 1; }
.epay.apple { background: #000; color: #fff; }
.epay.apple .apple-logo { width: 19px; height: 19px; margin-top: -2px; }
.epay.gpay { background: #fff; color: #3c4043; border-color: #dadce0; }
.epay.gpay .gpay-g { width: 21px; height: 21px; }
.epay.gpay .g-pay { color: #5f6368; font-weight: 500; }
.divider { text-align: center; color: var(--muted); font-size: .85rem; margin: 14px 0; position: relative; }
.divider::before, .divider::after { content: ""; position: absolute; top: 50%; width: 42%; height: 1px; background: var(--line); }
.divider::before { left: 0; } .divider::after { right: 0; }

/* Toggle (business / household) */
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: var(--paper); }
.seg label { padding: 10px 22px; cursor: pointer; font-weight: 600; font-size: .9rem; color: var(--muted); margin: 0; }
.seg input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; pointer-events: none; }
.seg input:checked + label { background: var(--lime); color: var(--teal-deep); }

/* Delivery method radio card */
.delivery-opt { display: flex; flex-direction: column; gap: 8px; border: 2px solid var(--lime); border-radius: 14px; padding: 16px; background: var(--lime-soft); cursor: pointer; }
.delivery-opt .delivery-head { display: flex; align-items: center; gap: 10px; }
.delivery-opt input[type="radio"] { flex: none; margin: 0; width: 18px; height: 18px; accent-color: var(--teal-deep); cursor: pointer; }
.delivery-opt .name { font-weight: 700; color: var(--teal); line-height: 1.3; }
.delivery-opt .charge { font-weight: 700; }
.cutoff-note { font-size: .82rem; color: var(--muted); line-height: 1.6; }

/* ===== Address lookup ===== */
.address-lookup { position: relative; }
.lookup-results { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); max-height: 280px; overflow-y: auto; display: none; }
.lookup-results.show { display: block; }
.lookup-results .opt { padding: 11px 14px; cursor: pointer; font-size: .92rem; border-bottom: 1px solid var(--line); }
.lookup-results .opt:last-child { border-bottom: none; }
.lookup-results .opt:hover, .lookup-results .opt.active { background: var(--soft); }
.lookup-results .opt.muted { color: var(--muted); cursor: default; }
.link-toggle { background: none; border: none; color: var(--teal); text-decoration: underline; cursor: pointer; font: inherit; font-size: .85rem; padding: 8px 0 0; }
.hidden { display: none !important; }

/* ===== Confirmation ===== */
.confirm-hero { text-align: center; padding: 30px 0 10px; }
.confirm-hero .tick { width: 64px; height: 64px; border-radius: 50%; background: var(--lime); display: grid; place-items: center; margin: 0 auto 16px; }
.confirm-hero .tick svg { width: 32px; height: 32px; stroke: var(--teal-deep); }
.info-box { background: var(--soft); border: 1px solid var(--line); border-radius: var(--r-md); padding: 24px; margin: 16px 0; }

/* Used cooking oil cross-sell on the confirmation page. Deliberately the dark band used by
   the homepage warrant strip rather than another .info-box: the order details above are all
   pale cards, so a promo styled the same would read as part of the receipt. */
.uco-promo { background: var(--teal-deep); color: #fff; border-radius: var(--r-md); padding: clamp(24px, 4vw, 34px); margin-top: 30px; }
.uco-promo h2 { color: #fff; font-size: clamp(1.15rem, 2.6vw, 1.45rem); line-height: 1.3; margin: 0 0 12px; }
.uco-promo p { color: rgba(255,255,255,.85); margin: 0 0 12px; }
.uco-promo .uco-lead-in { margin-bottom: 10px; font-weight: 700; color: #fff; }
.uco-list { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 10px; }
.uco-list li { display: flex; align-items: flex-start; gap: 10px; color: rgba(255,255,255,.9); line-height: 1.5; }
.uco-list svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--lime); }
/* Centred to sit with the two CTAs below it as one block. */
.uco-promo .uco-signup { font-weight: 700; color: #fff; margin-bottom: 16px; text-align: center; }
.uco-ctas { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
/* Full-width stacked buttons on a phone - side by side they'd each be too narrow to read. */
@media (max-width: 520px) {
    .uco-ctas { flex-direction: column; }
    .uco-ctas .btn { width: 100%; justify-content: center; }
}

/* Mock payment screen */
.pay-mock { max-width: 440px; margin: 50px auto; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow); padding: 30px; text-align: center; }
.pay-mock .amount { font-size: 2rem; font-weight: 800; color: var(--teal); margin: 10px 0; }
.pay-mock .card-face { background: var(--soft); border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin: 18px 0; text-align: left; font-family: monospace; }
.pay-mock .note { font-size: .8rem; color: var(--muted); margin-top: 16px; }

@media (max-width: 900px) {
    .pdp, .checkout-grid { grid-template-columns: minmax(0, 1fr); }
    .summary-card { position: static; }
    /* Single column: a sticky gallery would pin itself over the description as
       the page scrolls, because the columns are now stacked rather than beside
       each other. It has to scroll away with everything else. */
    .pdp .gallery-wrap { position: static; }
}
/* Very narrow phones (320px): the quantity stepper and Add button no longer fit
   side by side, so stack them rather than force the page wider. */
@media (max-width: 390px) {
    .pdp .buy-row { flex-wrap: wrap; }
    .pdp .buy-row .qty { flex: 1 1 100%; justify-content: space-between; }
    .pdp .buy-row .pdp-add { flex: 1 1 100%; }
}
@media (max-width: 560px) {
    .two-col { grid-template-columns: 1fr; }
}

/* Basket table → stacked cards on phones (the 5-column table can't fit a narrow screen) */
@media (max-width: 640px) {
    .cart-table, .cart-table tbody, .cart-table tr, .cart-table td { display: block; width: 100%; }
    .cart-table { background: transparent; border-radius: 0; overflow: visible; }
    .cart-table thead { display: none; }
    .cart-table tr { background: var(--soft); border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 16px; margin-bottom: 14px; }
    .cart-table td { border: none; padding: 6px 0; text-align: left; }
    .cart-table td.num { text-align: left; }
    .cart-table td[data-label] { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
    .cart-table td[data-label]::before { content: attr(data-label); font-weight: 600; font-size: .82rem; color: var(--muted); }
    .cart-table .prod img { width: 64px; height: 64px; }
    .cart-table td:last-child { text-align: right; padding-top: 10px; }
    .cart-table tr.total { display: flex; justify-content: space-between; align-items: center; }
    .cart-table tr.total td { padding: 0; }
    .cart-table tr.total td:empty { display: none; }
}

/* Sub-headings and callouts inside the product detail accordions
   (Suitable for: / Not suitable for: / Important: ...). */
.detail-head { font-weight: 700; color: var(--teal); margin: 12px 0 6px; }
.detail-head:first-child { margin-top: 0; }
.detail-note {
  margin-top: 12px; padding: 10px 14px;
  border-left: 3px solid var(--lime-dark); background: var(--soft);
  border-radius: 0 8px 8px 0; font-size: .92rem;
}

/* ── Browse-only mode (Storefront:Mode = BrowseOnly) ─────────────────────────
   The checkout CTA becomes a static, non-clickable label. Styled as a muted
   button rather than a greyed-out one: it is a statement, not a control that
   might start working if you click it hard enough. */
.btn.is-disabled {
  --bg: var(--soft); --fg: var(--muted);
  cursor: default; border-color: var(--line); box-shadow: none;
}
.btn.is-disabled:hover { transform: none; box-shadow: none; }

/* Sits in the same sticky slot as the delivery countdown it replaces, in the
   quieter deep teal so it reads as information rather than an offer. */
.cutoff-banner--soon { background: var(--teal-deep, #093b37); }
.cutoff-banner--soon .truck { color: var(--lime); }