/*
    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. 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-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 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; }