/* SkinLab shop styles.
 *
 * Deliberately small. The theme's own CSS (base.css + styles.css + theme-vars)
 * carries the design; this file only styles the surfaces the Shopify theme never
 * had - our cart page, the sold-out state, and the checkout summary - and does so
 * using the theme's custom properties so it inherits the same palette and type.
 */

/* ── product grid ─────────────────────────────────────────────────────────── */
.skinlab-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--gap-lg, 2rem);
  padding: 0;
  margin: 0;
  list-style: none;
}

.skinlab-card__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.skinlab-card__title {
  margin: 0.75rem 0 0.25rem;
  font-size: var(--font-h6--size, 1rem);
}

.skinlab-card__price { margin: 0; opacity: 0.85; }

.skinlab-card a { text-decoration: none; color: inherit; }

/* ── sold out ─────────────────────────────────────────────────────────────── */
.skinlab-soldout {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border: 1px solid currentColor;
  border-radius: 2px;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.7;
}

.skinlab-card--soldout .skinlab-card__media img { opacity: 0.55; }

/* ── product page ─────────────────────────────────────────────────────────── */
.skinlab-product {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--gap-xl, 3rem);
  align-items: start;
}

.skinlab-product__gallery img {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 1rem;
}

.skinlab-product__price {
  font-size: var(--font-h4--size, 1.5rem);
  margin: 0.5rem 0 1.5rem;
}

.skinlab-qty {
  width: 4.5rem;
  padding: 0.5rem;
  margin-right: 0.5rem;
}

/* ── cart ─────────────────────────────────────────────────────────────────── */
.skinlab-cart__table { width: 100%; border-collapse: collapse; }

.skinlab-cart__table th,
.skinlab-cart__table td {
  padding: 0.85rem 0.5rem;
  border-bottom: 1px solid var(--color-border, rgb(0 0 0 / 0.12));
  text-align: left;
  vertical-align: middle;
}

.skinlab-cart__table td.num,
.skinlab-cart__table th.num { text-align: right; }

.skinlab-cart__thumb { width: 64px; height: 64px; object-fit: cover; }

.skinlab-totals { margin-left: auto; max-width: 22rem; width: 100%; }

.skinlab-totals__row {
  display: flex;
  justify-content: space-between;
  padding: 0.4rem 0;
}

.skinlab-totals__row--total {
  border-top: 1px solid var(--color-border, rgb(0 0 0 / 0.12));
  margin-top: 0.4rem;
  padding-top: 0.8rem;
  font-weight: 600;
}

.skinlab-vat-note { font-size: 0.85rem; opacity: 0.7; }

.skinlab-empty { padding: 3rem 0; text-align: center; }

/* ── notices ──────────────────────────────────────────────────────────────── */
.skinlab-notice {
  padding: 0.85rem 1rem;
  margin: 1rem 0;
  border: 1px solid currentColor;
  border-radius: 3px;
}

.skinlab-notice--error { color: #8a1f11; }

/* Utility used by the header cart bubble when the basket is empty. */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}