/* ==========================================================================
   Abizvo Checkout — the cart page of a published site (/sites/{slug}/cart,
   /cart on the site's own host), and the customer account pages beside it. Served only on that page, versioned by
   content. The page reads its colours and type from the theme it is wearing
   (the scheme custom properties the platform writes for every theme site),
   and falls back to plain system defaults so it is never unreadable. Every
   rule is keyed on .ab-store so nothing reaches the site's own header or
   footer. Original Abizvo markup and styling — see docs/commerce/ip-compliance.md.
   ========================================================================== */

.ab-store {
  --abs-bg: var(--color-background, #ffffff);
  --abs-text: var(--color-text, #161616);
  --abs-muted: var(--color-muted, color-mix(in srgb, var(--abs-text) 62%, transparent));
  --abs-accent: var(--color-accent, #1f5eff);
  --abs-button: var(--color-button, var(--abs-text));
  --abs-button-text: var(--color-button-text, var(--abs-bg));
  --abs-line: var(--color-border, color-mix(in srgb, var(--abs-text) 14%, transparent));
  --abs-radius: var(--button-radius, var(--corner-radius, .6rem));
  --abs-card-radius: var(--card-radius, var(--corner-radius, 1rem));
  --abs-font-heading: var(--font-heading, inherit);
  --abs-font-body: var(--font-body, inherit);
  --abs-surface: color-mix(in srgb, var(--abs-text) 4%, var(--abs-bg));
  color: var(--abs-text);
  font-family: var(--abs-font-body);
  padding: clamp(2rem, 5vw, 4rem) 1rem;
}

.ab-store__inner { max-width: 68rem; margin: 0 auto; }
.ab-store__title { margin: 0 0 1.5rem; font-family: var(--abs-font-heading); font-size: clamp(1.75rem, 3.5vw, 2.5rem); line-height: 1.15; }
.ab-store__h2 { margin: 0 0 1rem; font-family: var(--abs-font-heading); font-size: 1.3rem; }
.ab-store__eyebrow { margin: 0 0 .5rem; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; color: var(--abs-accent); }
.ab-store__lead { margin: 0 0 1.25rem; font-size: 1.05rem; line-height: 1.5; }
.ab-store__muted { color: var(--abs-muted); }
.ab-store__small { font-size: .9rem; line-height: 1.45; }
.ab-store__alert { margin: 0 0 1.25rem; padding: .85rem 1rem; border-radius: var(--abs-radius); border: 1px solid color-mix(in srgb, var(--abs-accent) 45%, var(--abs-line)); background: color-mix(in srgb, var(--abs-accent) 8%, var(--abs-bg)); }

.ab-store__layout { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 880px) { .ab-store__layout { grid-template-columns: minmax(0, 1.5fr) minmax(18rem, 1fr); } }

.ab-store__panel { padding: 1.5rem; border: 1px solid var(--abs-line); border-radius: var(--abs-card-radius); background: var(--abs-surface); }
.ab-store__panel--done, .ab-store__panel--empty { max-width: 40rem; }
.ab-store__panel--checkout { position: sticky; top: 1rem; }

.ab-store__lines { list-style: none; margin: 0; padding: 0; }
.ab-store__line { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem 1rem; align-items: center; padding: 1rem 0; border-bottom: 1px solid var(--abs-line); }
.ab-store__line:first-child { padding-top: 0; }
.ab-store__line-name { display: flex; flex-direction: column; gap: .15rem; min-width: 0; font-weight: 600; }
.ab-store__line-name .ab-store__muted { font-weight: 400; font-size: .9rem; }
.ab-store__stock { font-size: .8rem; font-weight: 600; color: var(--abs-accent); }
.ab-store__line-total { font-family: var(--abs-font-heading); font-size: 1.1rem; white-space: nowrap; text-align: right; }
.ab-store__qty { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
@media (min-width: 560px) {
  .ab-store__line { grid-template-columns: minmax(0, 1fr) auto auto; }
  .ab-store__qty { grid-column: auto; }
}

.ab-store__totals { margin: 1.25rem 0 1rem; padding: 0; display: grid; gap: .4rem; }
.ab-store__totals > div { display: flex; justify-content: space-between; gap: 1rem; }
.ab-store__totals dt { color: var(--abs-muted); }
.ab-store__totals dd { margin: 0; font-variant-numeric: tabular-nums; }
.ab-store__total { padding-top: .6rem; border-top: 1px solid var(--abs-line); font-family: var(--abs-font-heading); font-size: 1.2rem; }
.ab-store__total dt { color: var(--abs-text); }

.ab-store__form { display: grid; gap: .9rem; }
/* The anti-spam field (PublicFormGuard.HoneypotHtml): off screen for people,
   still in the form for a bot to fill in. */
.ab-store-hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.ab-store__field { display: grid; gap: .3rem; }
.ab-store__field label { font-size: .9rem; font-weight: 600; }
.ab-store__input { width: 100%; min-height: 2.75rem; padding: .55rem .75rem; font: inherit; color: var(--abs-text); background: var(--abs-bg); border: 1px solid var(--abs-line); border-radius: var(--abs-radius); }
/* A field's edge must read against its card: WCAG asks 3:1 for the boundary of a control, which a theme's
   divider colour (made to be faint) does not give. Drawn from the text colour instead, in every theme. */
@supports (border-color: color-mix(in srgb, red 50%, blue)) { .ab-store__input { border-color: color-mix(in srgb, var(--abs-text) 55%, var(--abs-bg)); } }
.ab-store__input:focus-visible { outline: 2px solid var(--abs-accent); outline-offset: 1px; }
.ab-store__input--qty { width: 4.5rem; text-align: center; }

.ab-store__btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 2.75rem; padding: .6rem 1.25rem; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; color: var(--abs-button-text); background: var(--abs-button); border: 1px solid var(--abs-button); border-radius: var(--abs-radius); }
.ab-store__btn:hover { filter: brightness(1.08); }
.ab-store__btn:focus-visible { outline: 2px solid var(--abs-accent); outline-offset: 2px; }
.ab-store__btn--primary { width: 100%; font-size: 1.05rem; }
.ab-store__btn--secondary { color: var(--abs-button); background: transparent; }
.ab-store__btn--secondary:hover { color: var(--abs-button-text); background: var(--abs-button); }
/* PayPal (PAY-010): full width under the card button, or alone as the primary. */
.ab-store__btn--paypal { width: 100%; }
.ab-store__btn--primary + .ab-store__btn--paypal { margin-top: .6rem; }
.ab-store__btn--pickup { width: 100%; }
.ab-store__btn + .ab-store__btn--pickup { margin-top: .6rem; }
.ab-store__pickup-qr { display: block; width: 200px; height: 200px; margin: .2rem 0 .8rem; padding: 10px; background: #fff; border-radius: 12px; image-rendering: pixelated; }
.ab-store__pickup-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: clamp(2rem, 6vw, 3rem); font-weight: 700; letter-spacing: .14em; margin: .2rem 0 .6rem; }
.ab-store__btn--small { min-height: 2.25rem; padding: .35rem .8rem; font-size: .9rem; }
.ab-store__btn--link { color: var(--abs-muted); background: none; border-color: transparent; text-decoration: underline; text-underline-offset: .25em; }
.ab-store__btn--link:hover { color: var(--abs-text); filter: none; }
.ab-store__link { color: inherit; text-underline-offset: .25em; }

.ab-visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Pickup or delivery at checkout (COM-007). */
.ab-store__choice { border: 1px solid var(--abs-line, color-mix(in srgb, currentColor 18%, transparent)); border-radius: .6rem; padding: .75rem 1rem; margin: 0 0 .9rem; display: grid; gap: .5rem; }
.ab-store__choice legend { padding: 0 .35rem; font-weight: 600; }
.ab-store__radio { display: flex; gap: .6rem; align-items: baseline; cursor: pointer; }
.ab-store__radio input { margin: 0; flex: none; }
.ab-store__choice-one { margin: 0; }
.ab-store__address { display: grid; gap: .4rem; margin: 0 0 .9rem; }

/* A product's own page, where the theme has no product template. */
.ab-product__inner { max-width: 44rem; }
.ab-product__card { display: grid; gap: .9rem; }
.ab-product__words { display: grid; gap: .9rem; }
/* With pictures (COM-005): the pictures beside the words from 900px, stacked below it. */
.ab-product__card--pictured { gap: 1.5rem; }
.ab-product__media { display: grid; gap: .6rem; }
.ab-product__hero { display: block; width: 100%; height: auto; border-radius: .75rem; background: var(--abs-surface, transparent); }
.ab-product__strip { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.ab-product__strip img { display: block; width: 4.5rem; height: 4.5rem; object-fit: cover; border-radius: .5rem; }
.ab-product__strip a { display: block; border-radius: .5rem; }
.ab-product__strip a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
@media (min-width: 900px) {
  .ab-product__inner:has(.ab-product__card--pictured) { max-width: 64rem; }
  .ab-product__card--pictured { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; }
}
.ab-product__price { margin: 0; font-family: var(--abs-font-heading); font-size: 1.6rem; }
.ab-product__description { font-size: 1.05rem; line-height: 1.6; }
.ab-product__description p { margin: 0 0 .9rem; }
.ab-product__actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-top: .5rem; }
.ab-product__add { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-end; }
.ab-product__option { display: grid; gap: .25rem; font-size: .9rem; }

/* Customer accounts (COM-013): sign-in, the account, an order, the profile and addresses. */
.ab-account__narrow { max-width: 30rem; }
/* Signing in is the page's one task: the card sits in the middle, as a Shopify sign-in does. */
.ab-account__signin { margin-inline: auto; }
.ab-account__head { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: flex-start; }
.ab-account__head .ab-store__title { margin-bottom: .25rem; }
.ab-account__nav { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin: 1rem 0 1.5rem; padding-bottom: .5rem; border-bottom: 1px solid var(--abs-line); }
.ab-account__nav a { color: var(--abs-muted); text-decoration: none; padding: .35rem 0; border-bottom: 2px solid transparent; }
.ab-account__nav a:hover { color: var(--abs-text); }
.ab-account__nav a[aria-current="page"] { color: var(--abs-text); font-weight: 600; border-bottom-color: var(--abs-accent); }
.ab-account__nav a:focus-visible { outline: 2px solid var(--abs-accent); outline-offset: 2px; }
.ab-account__grid { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 880px) { .ab-account__grid { grid-template-columns: minmax(0, 1.6fr) minmax(16rem, 1fr); } }
.ab-account__side { display: grid; gap: 1.5rem; }
.ab-account__orders { list-style: none; margin: 0; padding: 0; }
.ab-account__order { display: grid; gap: .3rem; padding: 1rem 0; border-bottom: 1px solid var(--abs-line); }
.ab-account__order:first-child { padding-top: 0; }
.ab-account__order:last-child { border-bottom: 0; }
.ab-account__order-head { display: flex; flex-wrap: wrap; gap: .5rem 1rem; justify-content: space-between; align-items: baseline; }
.ab-account__order-number { color: inherit; font-weight: 600; text-underline-offset: .25em; }
.ab-account__stage { display: inline-block; padding: .1rem .55rem; font-size: .8rem; font-weight: 600; border-radius: 999px; border: 1px solid var(--abs-line); }
.ab-account__lines { margin: 0 0 .75rem; line-height: 1.55; }
.ab-account__tracking { margin: 0; }
.ab-account__parcel { padding: .5rem 0; border-top: 1px solid var(--abs-line); }
.ab-account__line { grid-template-columns: auto minmax(0, 1fr) auto; }
.ab-account__thumb { display: block; width: 3.5rem; height: 3.5rem; object-fit: cover; border-radius: .5rem; }
.ab-account__line:not(:has(.ab-account__thumb)) { grid-template-columns: minmax(0, 1fr) auto; }
.ab-account__addresses { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 720px) { .ab-account__addresses { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ab-account__actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .75rem; }
.ab-account__inline { display: inline; margin: 0; }
.ab-account__edit summary { cursor: pointer; font-weight: 600; margin-bottom: .75rem; }
.ab-account__code { font-size: 1.4rem; letter-spacing: .3em; text-align: center; font-variant-numeric: tabular-nums; }
.ab-store__follow { margin: 0 0 1rem; max-width: 26rem; }

/* The platform's own line at the foot, as the theme engine styles it. */
.ab-powered { display: block !important; padding: 14px 16px !important; text-align: center !important; font: 500 12px/1.4 system-ui, sans-serif !important; }
.ab-powered a { display: inline-flex !important; align-items: center; gap: 7px; color: inherit !important; opacity: .72; text-decoration: none !important; }
.ab-powered a:hover { opacity: 1; }
.ab-powered__logo { height: 15px !important; width: auto !important; display: inline-block !important; }

/* Configurable products (COM-043): a bundle walked one step at a time. */
.ab-bundle { max-width: 44rem; }
.ab-bundle__steps { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0 0 1.25rem; padding: 0; }
.ab-bundle__steps li { padding: .3rem .75rem; border: 1px solid var(--abs-line); border-radius: 999px; font-size: .875rem; }
.ab-bundle__steps li.is-current { border-color: var(--abs-accent); font-weight: 600; }
.ab-bundle__steps li.is-done { opacity: .7; }
.ab-bundle__step { margin: 0 0 1.25rem; padding: 0; border: 0; min-width: 0; }
.ab-bundle__step legend { font-weight: 600; font-size: 1.125rem; margin-bottom: .5rem; }
.ab-bundle__hint { margin: 0 0 .75rem; opacity: .8; }
.ab-bundle__choices { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.ab-bundle__choice { display: flex; gap: .6rem; align-items: center; padding: .7rem .9rem; border: 1px solid var(--abs-line); border-radius: var(--abs-radius); cursor: pointer; overflow-wrap: anywhere; }
.ab-bundle__choice:has(input:checked) { border-color: var(--abs-accent); }
.ab-bundle__choice.is-sold-out { opacity: .55; cursor: not-allowed; }
.ab-bundle__price { margin-left: auto; white-space: nowrap; }
.ab-bundle__text { display: grid; gap: .35rem; }
.ab-bundle__summary { margin: 0 0 1.25rem; padding: 1rem 1.25rem; border: 1px solid var(--abs-line); border-radius: var(--abs-card-radius); background: var(--abs-surface); }
.ab-bundle__summary h2 { margin: 0 0 .5rem; font-size: 1rem; }
.ab-bundle__summary dl { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: .35rem 1rem; margin: 0; }
.ab-bundle__summary dt { opacity: .75; }
.ab-bundle__summary dd { margin: 0; display: flex; gap: .5rem; overflow-wrap: anywhere; }
.ab-bundle__total { margin: .75rem 0 0; display: flex; justify-content: space-between; }
.ab-bundle__actions { display: flex; flex-wrap: wrap; gap: .75rem; flex-direction: row-reverse; justify-content: flex-end; }