/* osdot/module-shop — the store's pages and the homepage section. Reads the theme's token roles (module-theme's
   themes.css) with plain fallbacks for a site without a theme; the shared components (card, btn, field, kv, pay-option,
   stepper, chip, badge, alert) are the theme's own. Rem-based, so text scaling works; one column below 48rem. */

.shop-page { padding-block: var(--space-6, 1.5rem) var(--space-8, 3rem); }
.shop-page :where(.grid, .split, .cluster, .shop-layout, .product-detail, .cart-line) > * { min-width: 0; }
/* a group of choices is the card it sits in: no browser frame (the delivery address keeps its own, .address-block) */
.shop-page fieldset:not(.address-block) { border: 0; padding: 0; margin-inline: 0; min-width: 0; }
.shop-filters { display: flex; flex-wrap: wrap; gap: var(--space-3, 0.75rem); align-items: center; justify-content: space-between; }
.shop-categories { list-style: none; margin: 0; padding: 0; }
.shop-categories .chip { text-decoration: none; }
.shop-search { display: flex; gap: var(--space-2, 0.5rem); flex: 1 1 16rem; max-width: 26rem; }
.shop-search .input { flex: 1 1 auto; min-width: 0; }
.shop-cart-link { gap: var(--space-2, 0.5rem); text-decoration: none; }

/* product cards */
.product-grid { list-style: none; margin-inline: 0; margin-bottom: 0; padding: 0; display: grid; gap: var(--space-5, 1.25rem); grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.5rem), 1fr)); }
.product-card { display: grid; align-content: start; gap: var(--space-2, 0.5rem); }
.product-card__link { display: grid; gap: var(--space-2, 0.5rem); color: var(--text, #1d1d1d); text-decoration: none; }
.product-card__link:hover .product-card__name { text-decoration: underline; }
.product-card__media { display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius-media, 0.75rem); background: var(--surface-2, #f2f2f2); }
.product-card__media picture, .product-card__media img { display: block; width: 100%; height: 100%; }
.product-card__media img { object-fit: cover; }
.product-card__blank { display: block; width: 100%; height: 100%; min-height: 8rem; background: linear-gradient(135deg, var(--surface-2, #f2f2f2), var(--border, #ddd)); border-radius: inherit; }
.product-card__name { font-weight: var(--weight-semibold, 600); font-size: var(--text-md, 1rem); }
.product-card__summary { margin: 0; font-size: var(--text-sm, 0.875rem); }
/* 0.4.4 (F-98): the homepage card's condition label above the name */
.product-card__condition { display: block; margin-bottom: var(--space-1, 0.25rem); font-weight: var(--weight-medium, 500); }
.product-card__price { margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-2, 0.5rem); align-items: center; font-weight: var(--weight-semibold, 600); }
.shop-section { padding-block: var(--space-8, 3rem); }
.shop-section__head { margin-bottom: var(--space-5, 1.25rem); }
.shop-section__head h2 { margin: 0; }

/* a product */
.product-detail { display: grid; gap: var(--space-6, 1.5rem); }
/* 0.4.0: the product's reviews across the page's width below the picture and the details (the cards share the row) */
.product-reviews { margin-top: var(--space-8, 2rem); }
.product-reviews .rev-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.product-gallery { display: grid; gap: var(--space-3, 0.75rem); align-content: start; }
.product-gallery__main { aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius-media, 0.75rem); background: var(--surface-2, #f2f2f2); }
.product-gallery__slide { height: 100%; }
.product-gallery__main picture, .product-gallery__main img { display: block; width: 100%; height: 100%; }
.product-gallery__main img { object-fit: cover; }
.product-gallery__blank { aspect-ratio: 4 / 5; }
.product-gallery__more { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2, 0.5rem); grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr)); }
/* 0.2.3 (batch 10): each thumbnail a link (its full-size picture; the gallery's script shows it large instead): the current
   one framed in the text colour, the keyboard's focus ring outside it */
.product-gallery__more li { aspect-ratio: 1; }
.product-gallery__thumb { display: block; width: 100%; height: 100%; box-sizing: border-box; overflow: hidden; border: 3px solid transparent;
  border-radius: var(--radius-control, 0.5rem); background: var(--surface-2, #f2f2f2); }
.product-gallery__thumb[aria-current="true"] { border-color: var(--text, #1f2328); }
.product-gallery__thumb:focus-visible { outline: var(--focus-width, 3px) solid var(--focus, #1a5fb4); outline-offset: 2px; }
.product-gallery__thumb picture { display: block; width: 100%; height: 100%; }
.product-gallery__more img { display: block; width: 100%; height: 100%; object-fit: cover; }
.product-buy h1 { margin-bottom: var(--space-2, 0.5rem); }
.product-buy__price { font-size: var(--text-xl, 1.375rem); font-weight: var(--weight-semibold, 600); display: flex; flex-wrap: wrap; gap: var(--space-2, 0.5rem); align-items: center; }
.product-variants .pay-option { cursor: pointer; }
.product-variants .pay-option input { width: 1.25rem; height: 1.25rem; accent-color: var(--primary, #0b5f5c); }
.product-qty { max-width: 8rem; }
.product-description { border-top: 1px solid var(--border, #ddd); padding-top: var(--space-5, 1.25rem); }

/* the cart */
/* narrow: the item and its total, then its quantity and "Remove"; wide: one row */
.cart-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "what total" "qty remove"; gap: var(--space-2, 0.5rem) var(--space-3, 0.75rem); align-items: center; }
.cart-line__what { grid-area: what; display: grid; gap: 0.15rem; }
.cart-line__what a { color: var(--text, #1d1d1d); }
.cart-line__qty { grid-area: qty; max-width: 6rem; }
.cart-line__total { grid-area: total; text-align: right; font-weight: var(--weight-semibold, 600); align-self: start; }
.cart-line__remove { grid-area: remove; justify-self: end; }
.cart-line .field__error { margin: 0; }
.cart-remove-form { display: none; }

/* checkout and orders: the main column and the total beside it on wide screens */
.shop-layout { display: grid; gap: var(--space-5, 1.25rem); align-items: start; }
.shop-layout__aside .kv dd { white-space: nowrap; }
.address-block { border: 1px solid var(--border, #ddd); border-radius: var(--radius-card, 0.75rem); padding: var(--space-4, 1rem); margin: 0; }
.address-block legend { padding-inline: var(--space-2, 0.5rem); font-weight: var(--weight-semibold, 600); }
.pay-option input[type="radio"] { width: 1.25rem; height: 1.25rem; accent-color: var(--primary, #0b5f5c); margin: 0; }
.order-history { font-size: var(--text-sm, 0.875rem); }
/* the buyer's details: the words keep their width, a long e-mail address wraps */
.shop-details .kv { grid-template-columns: auto minmax(0, 1fr); }
.shop-details .kv dd { overflow-wrap: anywhere; }
.return-qty { width: auto; min-width: 4.5rem; }
.code-input { max-width: 10rem; font-size: var(--text-xl, 1.375rem); letter-spacing: 0.2em; font-variant-numeric: tabular-nums; }

@media (min-width: 40rem) {
  .cart-line { grid-template-columns: minmax(0, 1fr) 6rem 6rem auto; grid-template-areas: "what qty total remove"; }
  .cart-line__total { align-self: center; }
}
@media (min-width: 48rem) {
  .product-detail { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-8, 3rem); }
  .shop-layout { grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem); }
  .shop-layout__aside { position: sticky; top: var(--space-5, 1.25rem); }
}

/* 0.3.0: a product's notes are sentences, not amounts: each label above its text at every width (the theme's .kv grid
   would give the text the row and squeeze the label to a letter a line on a narrow screen with large text) */
.kv.product-notes { display: block; margin-block-start: var(--space-5, 1.25rem); }
.kv.product-notes dt { color: var(--text-muted, #5f6368); font-weight: var(--weight-semibold, 600); }
.kv.product-notes dd { margin: var(--space-1, 0.25rem) 0 var(--space-3, 0.75rem); text-align: start; font-variant-numeric: normal; }