/* Feonix SkinLab — commerce surfaces: product, cart, grids.
 * Clean-room, written from the Feonix brand spec. The photography is the hero;
 * the UI stays out of its way. Mobile first.
 */

/* ── product page ─────────────────────────────────────────────────────── */
.sl-product {
  display: grid;
  gap: var(--sl-space-xl);
  padding-block: var(--sl-space-xl);
  align-items: start;
}
@media (min-width: 900px) {
  .sl-product {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: clamp(2rem, 4vw, 5rem);
    padding-block: var(--sl-space-2xl);
  }
  /* The buy column tracks the gallery on long pages. */
  .sl-product__buy { position: sticky; top: 6.5rem; }
}

.sl-product__gallery { display: grid; gap: var(--sl-space-md); }
.sl-product__figure {
  margin: 0;
  background: var(--sl-paper);
  border: var(--sl-rule);
  border-radius: var(--sl-radius);
  overflow: hidden;
}
.sl-product__figure img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

.sl-product__eyebrow { margin-bottom: var(--sl-space-sm); }

.sl-product__name { font-size: var(--sl-step-h1); margin-bottom: var(--sl-space-sm); }

.sl-product__price {
  font-family: var(--sl-font-body);
  font-size: 1.375rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  margin-bottom: var(--sl-space-lg);
}

/* A thin gold rule is the accent - not a field of colour. */
.sl-product__rule {
  height: 0; margin: var(--sl-space-lg) 0;
  border: 0; border-top: var(--sl-rule-accent);
  max-width: 4rem;
}

.sl-product__desc p { margin-bottom: var(--sl-space-md); }
.sl-product__desc ul { padding-left: 1.1rem; margin: 0 0 var(--sl-space-md); }
.sl-product__desc li { margin-bottom: var(--sl-space-2xs); }
.sl-product__desc strong { font-weight: 600; }

.sl-product__form {
  display: flex; flex-wrap: wrap; gap: var(--sl-space-md);
  align-items: flex-end;
  margin-bottom: var(--sl-space-lg);
}
.sl-qty { display: grid; gap: var(--sl-space-2xs); }
.sl-qty label {
  font-size: var(--sl-step-xs); font-weight: 500;
  letter-spacing: var(--sl-tracking-wide); text-transform: uppercase;
  color: var(--sl-muted);
}
.sl-qty input { width: 5.5rem; text-align: center; }
.sl-product__form .sl-btn { flex: 1 1 12rem; }

.sl-product__soldout {
  padding: var(--sl-space-md);
  border: var(--sl-rule);
  border-left: 3px solid var(--sl-rg-mid);
  background: var(--sl-paper);
  margin-bottom: var(--sl-space-lg);
}

/* Pre-contract notes. Quiet, but not hidden - the sealed-goods disclosure is
   legally load-bearing and must be readable before the buy action. */
.sl-product__notes {
  display: grid; gap: var(--sl-space-md);
  padding-top: var(--sl-space-lg);
  border-top: var(--sl-rule);
  font-size: var(--sl-step-sm);
  color: var(--sl-muted);
}
.sl-product__notes strong { color: var(--sl-dark); font-weight: 600; }
.sl-product__notes a { color: var(--sl-rg-dark); }

.sl-product__seal {
  background: color-mix(in srgb, var(--sl-rg-light) 22%, var(--sl-cream));
  border-radius: var(--sl-radius);
  padding: var(--sl-space-md);
  color: var(--sl-dark);
}

.sl-product__meta { font-size: var(--sl-step-xs); color: var(--sl-muted); letter-spacing: 0.04em; }

/* ── product grid ─────────────────────────────────────────────────────── */
.sl-grid {
  display: grid;
  gap: var(--sl-space-lg) var(--sl-space-md);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none; margin: 0; padding: 0;
}
@media (min-width: 700px)  { .sl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .sl-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Collection tiles read as editorial, not product: five across, taller crop.
   This MUST live after .sl-grid above - it was briefly in base.css, which
   loads first, so the four-column rule it overrides was winning. */
@media (min-width: 700px) {
  .sl-grid--collections { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .sl-grid--collections { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.sl-grid--collections .sl-card__media img { aspect-ratio: 4 / 5; }

.sl-card a { display: block; text-decoration: none; color: inherit; }
.sl-card__media {
  background: var(--sl-paper);
  border: var(--sl-rule);
  border-radius: var(--sl-radius);
  overflow: hidden;
  margin-bottom: var(--sl-space-sm);
}
.sl-card__media img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  transition: transform 400ms var(--sl-ease);
}
@media (hover: hover) { .sl-card a:hover .sl-card__media img { transform: scale(1.03); } }

/* Product names are set in Cormorant, not the body sans: they are names on a
   premium range and should read as headings alongside the section titles.
   Cormorant is optically small, so this runs larger than the 14px it replaces
   or it reads as smaller, not larger. Prices stay in Montserrat - a price is
   data, and the numeral spacing is better for it. */
.sl-card__title {
  font-family: var(--sl-font-display);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0.005em;
  margin: 0 0 var(--sl-space-2xs);
}
.sl-card__price {
  font-family: var(--sl-font-body);
  font-size: var(--sl-step-sm);
  color: var(--sl-muted);
  margin: 0;
}

.sl-collection__note {
  padding-block: var(--sl-space-lg) var(--sl-space-2xl);
  font-size: var(--sl-step-sm);
  color: var(--sl-muted);
  max-width: 60ch;
}
.sl-card--soldout .sl-card__media img { opacity: 0.5; }
.sl-card__flag {
  display: inline-block; margin-top: var(--sl-space-2xs);
  font-size: var(--sl-step-xs); letter-spacing: var(--sl-tracking-wide);
  text-transform: uppercase; color: var(--sl-rg-dark);
}

/* ── cart ─────────────────────────────────────────────────────────────── */
.sl-cart { padding-block: var(--sl-space-xl); }
.sl-cart__layout { display: grid; gap: var(--sl-space-xl); }
@media (min-width: 900px) {
  .sl-cart__layout { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--sl-space-2xl); }
}
.sl-cart__table { width: 100%; border-collapse: collapse; }
.sl-cart__table th {
  text-align: left; padding-bottom: var(--sl-space-sm);
  border-bottom: var(--sl-rule);
  font-family: var(--sl-font-body); font-size: var(--sl-step-xs); font-weight: 600;
  letter-spacing: var(--sl-tracking-wide); text-transform: uppercase; color: var(--sl-muted);
}
.sl-cart__table td { padding-block: var(--sl-space-md); border-bottom: var(--sl-rule); vertical-align: top; }
.sl-cart__thumb { width: 5rem; }
.sl-cart__thumb img { border: var(--sl-rule); border-radius: var(--sl-radius); }
.sl-cart__name { font-weight: 500; }
.sl-cart__sku { font-size: var(--sl-step-xs); color: var(--sl-muted); }
.sl-cart__num { text-align: right; white-space: nowrap; }
.sl-cart__qty input { width: 4.5rem; text-align: center; }

.sl-cart__summary {
  background: var(--sl-paper);
  border: var(--sl-rule);
  border-radius: var(--sl-radius);
  padding: var(--sl-space-lg);
}
@media (min-width: 900px) { .sl-cart__summary { position: sticky; top: 6.5rem; } }
.sl-cart__row { display: flex; justify-content: space-between; gap: var(--sl-space-md);
             padding-block: var(--sl-space-xs); font-size: var(--sl-step-sm); }
.sl-cart__row--total {
  border-top: var(--sl-rule); margin-top: var(--sl-space-xs); padding-top: var(--sl-space-md);
  font-size: 1.125rem; font-weight: 600;
}
.sl-cart__note { font-size: var(--sl-step-xs); color: var(--sl-muted); margin-top: var(--sl-space-md); }
.sl-cart__empty { padding-block: var(--sl-space-2xl); text-align: center; }

.sl-notice {
  padding: var(--sl-space-md);
  border: var(--sl-rule); border-left: 3px solid var(--sl-rg-mid);
  background: var(--sl-paper); border-radius: var(--sl-radius);
  margin-bottom: var(--sl-space-lg);
}
.sl-notice--error { border-left-color: #A4362F; }

/* ── collection ───────────────────────────────────────────────────────────── */
.sl-collection__head { padding-block: var(--sl-space-xl) var(--sl-space-lg); max-width: 46rem; }
.sl-collection__head .sl-label a { color: var(--sl-muted); text-decoration: none; }
.sl-collection__head .sl-label a:hover { color: var(--sl-rg-dark); }
.sl-collection__blurb { font-size: 1.125rem; color: var(--sl-muted); margin: 0; }

.sl-collection__more { padding-block: var(--sl-space-2xl) var(--sl-space-xl); }
.sl-collection__more h2 { font-size: var(--sl-step-h3); }
.sl-collection__links {
  display: flex; flex-wrap: wrap; gap: var(--sl-space-md) var(--sl-space-xl);
  list-style: none; margin: 0; padding: 0;
}
.sl-collection__links a {
  font-size: var(--sl-step-xs); font-weight: 500;
  letter-spacing: var(--sl-tracking-wide); text-transform: uppercase;
  color: var(--sl-dark); text-decoration: none;
  border-bottom: 1px solid var(--sl-rg-mid); padding-bottom: 2px;
}
.sl-collection__links a:hover { color: var(--sl-rg-dark); }
.sl-collection__all { padding-block: var(--sl-space-lg) var(--sl-space-2xl); }

/* ── basket editing ───────────────────────────────────────────────────────── */
.sl-cart__qtyform { display: flex; gap: var(--sl-space-xs); align-items: center; margin: 0; }
.sl-cart__qtybtn {
  min-height: 2.25rem; padding-inline: var(--sl-space-sm);
  font-size: var(--sl-step-xs); border-color: var(--sl-border);
  background: transparent; color: var(--sl-dark);
}
.sl-cart__remove { text-align: right; width: 3rem; }
.sl-cart__remove form { margin: 0; }
/* A real button, not a decorative glyph: it carries a visually-hidden label
   naming the product, so a screen reader hears "Remove AHA Renewal Peel from
   your basket" rather than "times". */
.sl-cart__removebtn {
  background: none; border: 0; cursor: pointer;
  font-size: 1.5rem; line-height: 1;
  padding: var(--sl-space-2xs) var(--sl-space-xs);
  color: var(--sl-muted); border-radius: var(--sl-radius);
}
.sl-cart__removebtn:hover { color: var(--sl-rg-dark); background: var(--sl-cream); }
.sl-cart__removebtn:disabled { opacity: 0.4; cursor: wait; }

.sl-cart__empty { padding-block: var(--sl-space-2xl); text-align: center; }
.sl-cart__empty-lede { font-size: 1.25rem; color: var(--sl-muted); margin-bottom: var(--sl-space-lg); }
.sl-cart__empty p:last-child { display: flex; gap: var(--sl-space-md); justify-content: center; flex-wrap: wrap; }