/* Default styling for store pages. Everything is a custom property, so a
   site's own styles (loaded after this) override it with a few lines. */
:root {
  --store-gap: 1.5rem;
  --store-radius: 8px;
  --store-border: rgba(0, 0, 0, 0.12);
  --store-muted: #6b6f76;
  --store-accent: var(--brand-color, #1a5fb4);
  --store-accent-text: #fff;
  --store-sold-out: #a33b2f;
}
.products { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--store-gap); grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.products__link { display: flex; flex-direction: column; gap: 0.35rem; color: inherit; text-decoration: none; }
.products__image { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--store-radius); background: rgba(0, 0, 0, 0.04); }
.products__title { font-weight: 600; }
.products__price { color: var(--store-muted); }
.products__availability { font-size: 0.85em; color: var(--store-muted); }
.products__availability--out_of_stock { color: var(--store-sold-out); }
.products__empty, .store-unavailable { color: var(--store-muted); }

.product { display: grid; gap: calc(var(--store-gap) * 2); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; }
.product__gallery { display: grid; gap: 0.75rem; }
.product__image { width: 100%; border-radius: var(--store-radius); }
.product__title { margin: 0 0 0.25rem; }
.product__brand, .product__availability { color: var(--store-muted); margin: 0 0 0.5rem; }
.product__price { font-size: 1.4em; margin: 0.25rem 0 0.75rem; }
.product__availability--out_of_stock, .product__sold-out { color: var(--store-sold-out); }
.product__variants { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: 0.75rem; }
.product__variant { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; padding: 0.75rem 0; border-top: 1px solid var(--store-border); }
.product__variant-name { flex: 1 1 8rem; font-weight: 600; }
.product__form { display: flex; align-items: center; gap: 0.5rem; }
.product__quantity { width: 4.5rem; padding: 0.4rem; }
.product__add { padding: 0.55rem 1.1rem; border: 0; border-radius: var(--store-radius); background: var(--store-accent); color: var(--store-accent-text); font: inherit; cursor: pointer; }
.product__add:hover { filter: brightness(1.08); }

.product__add:disabled { opacity: 0.5; cursor: not-allowed; filter: none; }

/* One selector for all the variants (variants: "select" / "options"). */
.product__form--picker { flex-wrap: wrap; align-items: flex-end; margin-top: 1.25rem; }
.product__field, .product__option { display: grid; gap: 0.25rem; flex: 1 1 100%; margin: 0; padding: 0; border: 0; min-width: 0; }
.product__field-label { font-size: 0.85em; color: var(--store-muted); padding: 0; }
.product__options { display: grid; gap: 0.75rem; flex: 1 1 100%; }
.product__option { grid-auto-flow: column; justify-content: start; align-items: center; gap: 0.5rem; }
.product__option .product__field-label { grid-column: 1 / -1; }
.product__variant-select, .product__option-select { padding: 0.5rem; font: inherit; }
.product__choice { position: relative; cursor: pointer; }
.product__choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.product__choice > span { display: inline-block; padding: 0.4rem 0.9rem; border: 1px solid var(--store-border); border-radius: var(--store-radius); }
.product__choice input:checked + span { border-color: var(--store-accent); box-shadow: 0 0 0 1px var(--store-accent); }
.product__choice input:focus-visible + span { outline: 2px solid var(--store-accent); outline-offset: 2px; }
.product__choice[data-unavailable] span, [data-unavailable] > .product__choice > span { color: var(--store-muted); text-decoration: line-through; }
.product__form--picker .product__variant-price { flex: 1 1 100%; font-size: 1.2em; }
.product__form [hidden] { display: none !important; }
.product__form--picker .product__sold-out { flex: 1 1 100%; margin: 0; }

/* Swatches (option_style: "swatches"), and a variant's picture in a list row. */
.product__choice--swatch > span { display: grid; justify-items: center; gap: 0.25rem; padding: 0.35rem; }
.product__swatch { width: 3.5rem; aspect-ratio: 1; object-fit: cover; border-radius: calc(var(--store-radius) - 2px); }
.product__choice-label { font-size: 0.85em; }
.product__variant-image { width: 3rem; aspect-ratio: 1; object-fit: cover; border-radius: calc(var(--store-radius) - 2px); }

/* Gallery layouts (layout: stack | first | thumbs | grid | carousel). */
.product__gallery [hidden] { display: none !important; }
.product__gallery--first .product__image:not([hidden]) ~ .product__image { display: none; }
.product__gallery--grid { grid-template-columns: repeat(2, 1fr); }
.product__gallery--grid .product__image:not([hidden]):first-of-type { grid-column: 1 / -1; }
.product__gallery--carousel { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 0.5rem; }
.product__gallery--carousel .product__image { flex: 0 0 100%; scroll-snap-align: start; object-fit: cover; }
.product__thumbs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.product__thumb { display: block; width: 4.5rem; border-radius: var(--store-radius); overflow: hidden; border: 2px solid transparent; }
.product__thumb img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.product__thumb[aria-current] { border-color: var(--store-accent); }

.collection__title { margin-bottom: 0.25rem; }
.collection__description { color: var(--store-muted); margin-bottom: var(--store-gap); }

/* Cart: the hover preview and the compact cart. Positioning only; colours follow the properties above. */
.cart-hover { position: relative; display: inline-block; }
.cart-hover__panel { position: absolute; right: 0; top: 100%; z-index: 50; width: min(22rem, 90vw); padding: 1rem; background: #fff; color: #1b1b1b; border: 1px solid var(--store-border); border-radius: var(--store-radius); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); }
.cart-hover__panel { display: none; }
.cart-hover.is-open .cart-hover__panel:not(:empty) { display: block; }
.cart-preview__items { list-style: none; margin: 0 0 0.75rem; padding: 0; display: grid; gap: 0.75rem; }
.cart-preview__item { display: grid; grid-template-columns: 3rem 1fr auto; gap: 0.15rem 0.75rem; align-items: center; }
.cart-preview__image { grid-row: span 2; width: 3rem; height: 3rem; object-fit: cover; border-radius: calc(var(--store-radius) / 2); }
.cart-preview__item > :not(img):not(.cart-preview__line-total):not(.cart-preview__quantity):not(.cart-preview__options) { grid-column: 2; }
.cart-preview__options, .cart-preview__quantity, .cart-preview__more, .cart-preview__empty { color: var(--store-muted); font-size: 0.85em; }
.cart-preview__line-total { grid-column: 3; grid-row: 1; }
.cart-preview__subtotal { display: flex; justify-content: space-between; margin: 0 0 0.75rem; }
.cart-preview__actions { display: flex; gap: 0.5rem; }
.cart-preview__checkout { background: var(--store-accent); color: var(--store-accent-text); padding: 0.4rem 0.9rem; border-radius: var(--store-radius); text-decoration: none; }
[data-cart-notice][data-kind="alert"] { color: var(--store-sold-out); }