/* === Base ===
 * Global typography + body styles. Loaded after reset.css and tokens.css.
 * Components extend this — they don't redefine font-family, body bg, etc.
 */

html {
  /* Tokens.css is loaded before this, so var() works here. */
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-light);
  line-height: var(--lh-normal);
}

body {
  background: var(--color-bg);
}

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--fw-light);
  line-height: var(--lh-tight);
  color: var(--color-text);
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-medium); }

/* Uppercase label utility — used a lot in the design (FORM, FRAME, LENS, etc.) */
.label-uppercase {
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text);
}

/* Container — used in main, header, footer */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad-mobile);
}

@media (min-width: 768px) {
  .container {
    padding-inline: var(--container-pad-desktop);
  }
}

/* === Generic ".esther-button" primary CTA ===
 * Used across cart/checkout/shop and any page that needs the brand CTA.
 * Loaded in base.css (global) so all pages can reference it without
 * depending on the conditional forms.css. */
.esther-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-small);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
  background: var(--color-accent);
  color: var(--color-accent-ink);
  border: 1px solid var(--color-accent);
  padding: var(--s-4) var(--s-6);
  cursor: pointer;
  transition: background var(--t-base), color var(--t-base);
}
.esther-button:hover { background: var(--color-text); border-color: var(--color-text); }
.esther-button--ghost {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-text);
}
.esther-button--ghost:hover { background: var(--color-text); color: var(--color-accent-ink); }
.esther-button--block { width: 100%; }
.esther-button[disabled] { opacity: 0.5; cursor: not-allowed; }

/* Skip-to-content link (a11y) */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--s-4);
  z-index: var(--z-tooltip);
  padding: var(--s-3) var(--s-4);
  background: var(--color-text);
  color: var(--color-accent-ink);
  font-weight: var(--fw-medium);
  transition: top var(--t-base);
}

.skip-link:focus {
  top: var(--s-4);
}

/* === Shop grid ===
 * Used by archive-product.php override. Layout toggle is handled by
 * shop-toolbar.js which switches the --2col / --3col modifier classes.
 */
/* Outer wrapper holds the product grid + the sticky feature panel side-by-side.
 * In --3col mode the panel is hidden, grid takes full width.
 * In --2col mode the panel takes the right half, grid takes the left half. */
.esther-shop-layout {
    display: grid;
    gap: var(--s-6);
    margin-block: var(--s-5);
    /* Default: stretch — panel column needs to fill the grid height so its
     * white bg runs alongside the product grid on the left. Its internal
     * sticky child handles the in-viewport positioning. */
}

.esther-shop-layout:has(.esther-shop-grid--3col) {
    grid-template-columns: 1fr;
}
.esther-shop-layout:has(.esther-shop-grid--3col) .esther-shop-feature-panel {
    display: none;
}

.esther-shop-layout:has(.esther-shop-grid--2col) {
    grid-template-columns: 1fr 1fr;
}

/* Grid uses 1px gap + colored bg to draw dividers between cards (mockup pattern).
 * The outer border closes the box on edges. Cards must have their own bg color
 * so the divider line is the gap's bg showing through. */
.esther-shop-grid {
    display: grid;
    gap: 1px;
    background: var(--color-border);
    border: 1px solid var(--color-border);
}

.esther-shop-grid--3col {
    grid-template-columns: repeat(3, 1fr);
}

.esther-shop-grid--2col {
    grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 1023px) {
    .esther-shop-grid--3col {
        grid-template-columns: repeat(2, 1fr);
    }
    /* Tablet: stack panel above grid (still visible) */
    .esther-shop-layout:has(.esther-shop-grid--2col) {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .esther-shop-grid--3col,
    .esther-shop-grid--2col {
        grid-template-columns: 1fr;
    }
    /* Mobile: hide the feature panel — single column of cards is the UI */
    .esther-shop-layout:has(.esther-shop-grid--2col) .esther-shop-feature-panel {
        display: none;
    }
}

.esther-shop__empty {
    text-align: center;
    color: var(--color-text-muted);
    padding-block: var(--s-8);
}

/* === Single product page layout === */
.esther-single-product {
    padding-block: var(--s-5) var(--s-7);
}

.esther-single-product__top {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--s-7);
    align-items: start;
    margin-block: var(--s-5);
}

@media (max-width: 1023px) {
    .esther-single-product__top {
        grid-template-columns: 1fr;
        gap: var(--s-5);
    }
}

.esther-single-product__summary {
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
    position: sticky;
    top: 100px;
}

@media (max-width: 1023px) {
    .esther-single-product__summary {
        position: static;
    }
}

.esther-single-product__helpers {
    display: flex;
    justify-content: flex-end;
    gap: var(--s-5);
}

.esther-single-product__helper-link {
    font-size: var(--fs-small);
    color: var(--color-text-muted);
    text-decoration: underline;
    cursor: pointer;
}

.esther-single-product__helper-link:hover {
    color: var(--color-text);
}