/*
    The shop's own styles (tarka-web-design/payment-system): the slide-out
    basket, a product's options to pick from, its pictures, and the large
    view of them, the panel a product with no picture shows instead,
    dietary labels, and a product's choices (pick one, pick any, text to
    type) with what was chosen under a basket line. Served by the package
    beside shop.js.

    Colours, corners and type come from the site: a Tailwind v4 site puts
    its @theme tokens on :root as --color-brand, --radius-card and so on,
    and everything here reads those first and falls back to plain defaults.
    Everything is scoped under .shop-* so the site's own styles are left
    alone.
*/
.shop-drawer, .shop-gallery, .shop-option, .shop-lightbox, .shop-placeholder, .shop-labels, .shop-choices, .shop-chosen {
    --shop-brand: var(--color-brand, #1d4ed8);
    --shop-brand-dark: var(--color-brand-dark, color-mix(in srgb, var(--shop-brand) 82%, black));
    --shop-brand-soft: var(--color-brand-soft, color-mix(in srgb, var(--shop-brand) 12%, white));
    --shop-on-brand: var(--color-on-brand, #ffffff);
    --shop-ink: var(--color-ink, #0f172a);
    --shop-muted: var(--color-ink-soft, #475569);
    --shop-surface: var(--color-surface, #ffffff);
    --shop-surface-alt: var(--color-surface-alt, #f1f5f9);
    --shop-line: var(--color-line, #e2e8f0);
    --shop-radius: var(--radius-card, 1rem);
    --shop-radius-sm: var(--radius-button, 0.5rem);
    --shop-radius-image: var(--radius-image, 1rem);
    --shop-error: #b91c1c;
}

/*
    Anything that can be clicked shows a hand. Tailwind v4's reset takes
    the hand off buttons; sites built with it and the shop's own pages
    expect one.
*/
button:not(:disabled), [type="button"]:not(:disabled), [type="submit"]:not(:disabled), [type="reset"]:not(:disabled),
[role="button"]:not([aria-disabled="true"]), a[href], summary, label[for], select:not(:disabled),
input[type="radio"]:not(:disabled), input[type="checkbox"]:not(:disabled) {
    cursor: pointer;
}
button:disabled, [type="submit"]:disabled, [aria-disabled="true"] { cursor: not-allowed; }

.shop-spinner { display: inline-block; width: 1rem; height: 1rem; border: 2px solid var(--shop-line); border-top-color: var(--shop-brand); border-radius: 50%; animation: shop-spin .8s linear infinite; vertical-align: -.15em; }
@keyframes shop-spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------------ */
/* The slide-out basket.                                               */
/* ------------------------------------------------------------------ */
.shop-drawer { position: fixed; inset: 0; z-index: 80; color: var(--shop-ink); font-family: inherit; line-height: 1.5; }
.shop-drawer[hidden] { display: none; }
.shop-drawer *, .shop-drawer *::before, .shop-drawer *::after { box-sizing: border-box; }
.shop-drawer p, .shop-drawer h2, .shop-drawer dl, .shop-drawer dd { margin: 0; }
.shop-drawer button { font: inherit; }
.shop-drawer-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .45); opacity: 0; transition: opacity .25s ease; }
.shop-drawer-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(28rem, 100%); background: var(--shop-surface); display: flex; flex-direction: column; box-shadow: -12px 0 40px -12px rgba(15, 23, 42, .35); transform: translateX(100%); transition: transform .25s ease; outline: none; }
.shop-drawer-open .shop-drawer-backdrop { opacity: 1; }
.shop-drawer-open .shop-drawer-panel { transform: none; }
@media (prefers-reduced-motion: reduce) { .shop-drawer-backdrop, .shop-drawer-panel { transition: none; } }

.shop-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--shop-line); }
.shop-drawer-title { font-family: var(--font-display, inherit); font-size: 1.25rem; font-weight: 700; }
.shop-drawer-count { display: inline-block; margin-left: .35rem; color: var(--shop-muted); font-size: .9375rem; font-weight: 500; }
.shop-drawer-x { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border: 0; border-radius: 50%; background: transparent; color: var(--shop-ink); }
.shop-drawer-x:hover { background: var(--shop-surface-alt); }
.shop-drawer-x svg { width: 1.25rem; height: 1.25rem; }
.shop-drawer-notice { margin: 1rem 1.5rem 0; padding: .7rem 1rem; border-radius: var(--shop-radius-sm); background: var(--shop-brand-soft); color: var(--shop-ink); font-size: .9375rem; font-weight: 600; }
.shop-drawer-notice[hidden] { display: none; }
.shop-drawer-notice-error { background: #fef2f2; color: var(--shop-error); }
.shop-drawer-body { flex: 1; overflow-y: auto; padding: 1rem 1.5rem; }
.shop-drawer-loading { display: flex; align-items: center; gap: .6rem; padding: 2rem 0; color: var(--shop-muted); }
.shop-drawer-loading[hidden] { display: none; }
.shop-drawer-empty { padding: 2rem 0; text-align: center; color: var(--shop-muted); }
.shop-drawer-empty[hidden] { display: none; }
.shop-drawer-link { display: inline-block; margin-top: .75rem; color: var(--shop-brand); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.shop-drawer-line { display: grid; grid-template-columns: 4.5rem 1fr; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--shop-line); }
.shop-drawer-line:last-child { border-bottom: 0; }
.shop-drawer-pic { width: 4.5rem; height: 4.5rem; border-radius: var(--shop-radius-image); background: var(--shop-surface-alt); overflow: hidden; }
.shop-drawer-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shop-drawer-line-top { display: flex; justify-content: space-between; gap: .75rem; }
.shop-drawer-name { font-weight: 600; color: var(--shop-ink); text-decoration: none; }
a.shop-drawer-name:hover { text-decoration: underline; }
.shop-drawer-option { display: block; color: var(--shop-muted); font-size: .875rem; }
.shop-drawer-line-total { font-weight: 700; white-space: nowrap; }
.shop-drawer-problem, .shop-drawer-line-problem { color: var(--shop-error); font-size: .875rem; font-weight: 600; margin-top: .4rem; }
.shop-drawer-problem[hidden] { display: none; }
.shop-drawer-line-foot { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: .6rem; }
.shop-stepper { display: inline-flex; align-items: center; border: 1.5px solid var(--shop-line); border-radius: var(--shop-radius-sm); overflow: hidden; }
.shop-stepper button { width: 2.25rem; height: 2.25rem; border: 0; background: var(--shop-surface); color: var(--shop-ink); font-size: 1.1rem; font-weight: 700; display: grid; place-items: center; }
.shop-stepper button:hover:not(:disabled) { background: var(--shop-surface-alt); }
.shop-stepper button:disabled { color: var(--shop-line); }
.shop-stepper output { min-width: 2rem; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; font-size: .9375rem; }
.shop-drawer-remove { border: 0; background: none; padding: .25rem 0; color: var(--shop-muted); font-size: .875rem; text-decoration: underline; text-underline-offset: 3px; }
.shop-drawer-remove:hover { color: var(--shop-ink); }
.shop-drawer-line-busy { opacity: .5; pointer-events: none; }

.shop-drawer-foot { padding: 1.25rem 1.5rem calc(1.25rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--shop-line); background: var(--shop-surface); }
.shop-drawer-foot[hidden] { display: none; }
.shop-drawer-totals > div { display: flex; justify-content: space-between; gap: 1rem; font-size: .9375rem; padding: .2rem 0; }
.shop-drawer-totals > div[hidden] { display: none; }
.shop-drawer-totals dt { color: var(--shop-muted); }
.shop-drawer-total { margin-top: .35rem; padding-top: .6rem !important; border-top: 1px solid var(--shop-line); font-weight: 700; font-size: 1.05rem !important; }
.shop-drawer-total dt { color: var(--shop-ink); }
.shop-drawer-checkout { display: flex; align-items: center; justify-content: center; margin-top: 1rem; padding: .9rem 1.25rem; border-radius: var(--shop-radius-sm); background: var(--shop-brand); color: var(--shop-on-brand); font-weight: 700; text-decoration: none; transition: background .15s; }
.shop-drawer-checkout:hover { background: var(--shop-brand-dark); }
.shop-drawer-checkout[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.shop-drawer-continue { display: block; width: 100%; margin-top: .6rem; padding: .6rem; border: 0; background: none; color: var(--shop-muted); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.shop-drawer-continue:hover { color: var(--shop-ink); }

/* ------------------------------------------------------------------ */
/* A product's options: pictures or colours, or buttons, to pick.       */
/* ------------------------------------------------------------------ */
.shop-option { position: relative; display: inline-flex; align-items: center; gap: .5rem; border: 1.5px solid var(--shop-line); border-radius: var(--shop-radius-sm); background: var(--shop-surface); color: var(--shop-ink); padding: .55rem 1rem; font-size: .9375rem; font-weight: 600; line-height: 1.2; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.shop-option:hover { border-color: var(--shop-brand); }
.shop-option-on, .shop-option:has(input:checked) { border-color: var(--shop-brand); box-shadow: 0 0 0 2px var(--shop-brand); }
.shop-option:has(input:focus-visible) { outline: 2px solid var(--shop-brand); outline-offset: 2px; }
.shop-option-out { opacity: .45; cursor: not-allowed; }
.shop-option-out .shop-option-name { text-decoration: line-through; }
.shop-option-name small { display: block; margin-top: .15rem; color: var(--shop-muted); font-weight: 500; font-size: .8125rem; }
.shop-option-swatch { flex-direction: column; align-items: center; gap: .4rem; padding: .35rem .35rem .5rem; min-width: 5rem; max-width: 7rem; text-align: center; font-size: .8125rem; }
.shop-option-swatch .shop-option-name { padding: 0 .25rem; }
.shop-option-picture { display: block; width: 4.5rem; height: 4.5rem; object-fit: cover; border-radius: calc(var(--shop-radius-sm) - 2px); background: var(--shop-surface-alt); }
.shop-option-colour { display: block; width: 2.5rem; height: 2.5rem; margin: .35rem 0 .1rem; border-radius: 50%; background: var(--shop-swatch, #ccc); box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .12); }
[data-shop-option-error][hidden], [data-shop-message][hidden] { display: none; }
/* A part of a combination that clashes with what is picked can still be picked: it lets go of the clash. */
.shop-option-out:has(input:not(:disabled)) { cursor: pointer; }

/* ------------------------------------------------------------------ */
/* A product's choices: pick one, pick any, text to type.              */
/* ------------------------------------------------------------------ */
.shop-choices { color: var(--shop-ink); }
/* "£18.00, with walnut and gift box": the price bold, what comes with it plain. */
.shop-price-with { font-weight: 400; color: var(--color-ink-soft, #475569); }
.shop-choice[hidden], .shop-choice-error[hidden] { display: none; }
.shop-choice fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.shop-choice-label { display: block; font-size: .875rem; font-weight: 600; line-height: 1.4; color: var(--shop-ink); padding: 0; }
.shop-choice-optional { font-weight: 400; color: var(--shop-muted); }
.shop-choice-price { margin-left: .35rem; font-weight: 600; color: var(--shop-muted); white-space: nowrap; }
.shop-choice-hint { margin: .2rem 0 0; font-size: .875rem; color: var(--shop-muted); }
.shop-choice-letters { margin: .35rem 0 0; font-size: .8125rem; color: var(--shop-muted); font-variant-numeric: tabular-nums; }
.shop-choice-letters-full { color: var(--shop-ink); font-weight: 600; }
.shop-choice-error { margin: .4rem 0 0; font-size: .875rem; font-weight: 600; color: var(--shop-error); }
.shop-text { font: inherit; line-height: 1.4; }
.shop-text:focus { outline: 2px solid var(--shop-brand); outline-offset: 1px; border-color: var(--shop-brand); }
textarea.shop-text { min-height: 6.5rem; resize: vertical; }
.shop-choice [aria-invalid="true"] { border-color: var(--shop-error); }
.shop-checks { display: grid; gap: .5rem; }
@media (min-width: 640px) { .shop-checks { grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); } }
.shop-check { display: flex; align-items: center; gap: .65rem; padding: .65rem .9rem; border: 1.5px solid var(--shop-line); border-radius: var(--shop-radius-sm); background: var(--shop-surface); font-size: .9375rem; font-weight: 600; line-height: 1.3; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.shop-check:hover { border-color: var(--shop-brand); }
.shop-check:has(input:checked) { border-color: var(--shop-brand); box-shadow: 0 0 0 1px var(--shop-brand); }
.shop-check:has(input:focus-visible) { outline: 2px solid var(--shop-brand); outline-offset: 2px; }
.shop-check input { width: 1.1rem; height: 1.1rem; margin: 0; flex: none; accent-color: var(--shop-brand); }
.shop-check-name { flex: 1; min-width: 0; }
.shop-check-price { color: var(--shop-muted); font-weight: 500; font-size: .875rem; white-space: nowrap; }
.shop-check-off { opacity: .5; cursor: not-allowed; }

/* What was chosen, under a line of the basket or an order. */
.shop-chosen { margin: .25rem 0 0; padding: 0; list-style: none; }
.shop-chosen-value, .shop-drawer-choice { white-space: pre-line; overflow-wrap: anywhere; }
.shop-drawer-choice-name { font-weight: 600; color: var(--shop-ink); }

/* ------------------------------------------------------------------ */
/* A product's pictures.                                               */
/* ------------------------------------------------------------------ */
.shop-gallery { position: relative; }
.shop-gallery-stage { position: relative; }
.shop-gallery-track { display: flex; aspect-ratio: 1; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; outline: none; }
.shop-gallery-track::-webkit-scrollbar { display: none; }
.shop-gallery-track:focus-visible { outline: 2px solid var(--shop-brand); outline-offset: 2px; }
.shop-gallery-slide { flex: 0 0 100%; width: 100%; height: 100%; margin: 0; scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden; cursor: zoom-in; }
.shop-gallery-slide img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .2s ease; }
.shop-gallery-arrow { position: absolute; top: 50%; z-index: 2; width: 2.75rem; height: 2.75rem; margin-top: -1.375rem; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--shop-ink); box-shadow: 0 2px 10px rgba(15, 23, 42, .18); display: grid; place-items: center; opacity: 0; transition: opacity .15s, background .15s; }
.shop-gallery-arrow svg { width: 1.25rem; height: 1.25rem; }
.shop-gallery-arrow:hover { background: #fff; }
.shop-gallery-prev { left: .75rem; }
.shop-gallery-next { right: .75rem; }
.shop-gallery-stage:hover .shop-gallery-arrow, .shop-gallery-arrow:focus-visible { opacity: 1; }
@media (hover: none) { .shop-gallery-arrow { opacity: 1; width: 2.25rem; height: 2.25rem; margin-top: -1.125rem; } }
.shop-gallery-counter { position: absolute; left: .75rem; bottom: .75rem; z-index: 2; padding: .25rem .6rem; border-radius: 999px; background: rgba(15, 23, 42, .6); color: #fff; font-size: .75rem; font-weight: 600; font-variant-numeric: tabular-nums; pointer-events: none; }
.shop-gallery-hint { display: none; position: absolute; right: .75rem; bottom: .75rem; z-index: 2; padding: .3rem .7rem; border-radius: 999px; background: rgba(255, 255, 255, .9); color: var(--shop-muted); font-size: .75rem; font-weight: 600; pointer-events: none; }
@media (hover: hover) and (pointer: fine) { .shop-gallery-hint { display: block; } }
.shop-gallery-thumbs { display: flex; gap: .6rem; margin-top: .75rem; overflow-x: auto; padding: 2px 2px .4rem; scrollbar-width: none; }
.shop-gallery-thumbs::-webkit-scrollbar { display: none; }
.shop-gallery-thumb { flex: 0 0 4.5rem; width: 4.5rem; aspect-ratio: 1; padding: 0; border: 2px solid transparent; background: var(--shop-surface-alt); transition: border-color .15s; }
.shop-gallery-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.shop-gallery-thumb:hover { border-color: var(--shop-line); }
.shop-gallery-thumb[aria-selected="true"] { border-color: var(--shop-brand); }

/* The large view. */
.shop-lightbox { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; background: rgba(15, 23, 42, .96); color: #fff; }
.shop-lightbox[hidden] { display: none; }
.shop-lightbox-head { display: flex; align-items: center; justify-content: space-between; padding: .75rem 1rem; font-size: .875rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.shop-lightbox-x { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; }
.shop-lightbox-x:hover { background: rgba(255, 255, 255, .22); }
.shop-lightbox-x svg { width: 1.25rem; height: 1.25rem; }
.shop-lightbox-track { flex: 1; display: flex; min-height: 0; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.shop-lightbox-track::-webkit-scrollbar { display: none; }
.shop-lightbox-slide { flex: 0 0 100%; width: 100%; height: 100%; margin: 0; scroll-snap-align: start; scroll-snap-stop: always; display: grid; place-items: center; padding: 0 1rem 1rem; }
.shop-lightbox-slide img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.shop-lightbox .shop-gallery-arrow { opacity: 1; background: rgba(255, 255, 255, .14); color: #fff; box-shadow: none; }
.shop-lightbox .shop-gallery-arrow:hover { background: rgba(255, 255, 255, .26); }
.shop-lightbox .shop-gallery-prev { left: 1rem; }
.shop-lightbox .shop-gallery-next { right: 1rem; }
.shop-lightbox-thumbs { display: flex; justify-content: center; gap: .5rem; padding: .5rem 1rem calc(1rem + env(safe-area-inset-bottom)); overflow-x: auto; scrollbar-width: none; }
.shop-lightbox-thumbs::-webkit-scrollbar { display: none; }
.shop-lightbox-thumbs .shop-gallery-thumb { flex-basis: 3.5rem; width: 3.5rem; border-radius: .4rem; background: rgba(255, 255, 255, .1); }
.shop-lightbox-thumbs .shop-gallery-thumb[aria-selected="true"] { border-color: #fff; }
body.shop-no-scroll { overflow: hidden; }

/* ------------------------------------------------------------------ */
/* A product with no picture yet: its initials on a tinted panel.      */
/* ------------------------------------------------------------------ */
.shop-placeholder { position: relative; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; width: 100%; height: 100%; padding: 8%; overflow: hidden; container-type: inline-size; text-align: center; user-select: none;
    background-color: color-mix(in srgb, var(--shop-brand) var(--shop-tint, 16%), var(--shop-surface));
    background-image: radial-gradient(circle at 15% 10%, color-mix(in srgb, var(--shop-surface) 60%, transparent) 0, transparent 50%), radial-gradient(circle at 90% 100%, color-mix(in srgb, var(--shop-brand) 20%, transparent) 0, transparent 55%);
    color: color-mix(in srgb, var(--shop-brand-dark) 70%, var(--shop-ink)); font-family: var(--font-display, inherit); }
.shop-placeholder-initials { font-size: 2.5rem; font-size: clamp(1rem, 30cqi, 7rem); font-weight: var(--font-weight-heading, 700); letter-spacing: var(--tracking-heading, -.02em); line-height: 1; }
.shop-placeholder-name { max-width: 90%; font-size: 1rem; font-size: clamp(.875rem, 4.5cqi, 1.25rem); font-weight: 600; line-height: 1.3; opacity: .85; }
.shop-placeholder-small { gap: 0; padding: 0; }
.shop-placeholder-small .shop-placeholder-initials { font-size: 1.25rem; font-size: clamp(.875rem, 32cqi, 1.75rem); }

/* ------------------------------------------------------------------ */
/* Dietary labels: V, VG, GF, "Contains nuts".                        */
/* ------------------------------------------------------------------ */
.shop-labels { display: flex; flex-wrap: wrap; gap: .375rem; }
.shop-label { display: inline-flex; align-items: center; gap: .35rem; min-height: 1.5rem; padding: .125rem .55rem; border: 1px solid color-mix(in srgb, var(--shop-brand) 30%, var(--shop-line)); border-radius: 999px; background: var(--shop-brand-soft); color: var(--shop-ink); font-size: .75rem; font-weight: 700; line-height: 1.2; letter-spacing: .02em; white-space: nowrap; }
.shop-label-meaning { font-weight: 500; letter-spacing: 0; }
.shop-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }