/* =========================================================
   The Slapidary — Home / landing
   Mobile-first. References tokens from design-tokens (do not redefine).
   ========================================================= */

/* Guard the full-bleed 100vw hero from causing a horizontal scrollbar */
html, body { overflow-x: hidden; }

/* ---------- HERO ---------- */
.slap-hero {
  /* Full-bleed even inside .col-full / page wrapper */
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  box-sizing: border-box;
  overflow: hidden;

  background-color: var(--obsidian);
  /* Low-opacity two-stop radial wash: olive bottom-left + turquoise top-right */
  background-image:
    radial-gradient(120% 110% at 8% 100%, rgba(86, 92, 48, 0.55) 0%, rgba(86, 92, 48, 0) 55%),
    radial-gradient(120% 110% at 100% 0%, rgba(23, 140, 130, 0.45) 0%, rgba(23, 140, 130, 0) 55%);
  background-repeat: no-repeat;

  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.slap-hero__inner {
  max-width: var(--container);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.slap-hero__eyebrow {
  margin: 0 0 var(--space-4);
  font-family: var(--font-mono);
  font-weight: var(--fw-regular);
  font-size: var(--text-xs); /* 12 */
  letter-spacing: var(--tracking-widest); /* .16em */
  text-transform: uppercase;
  color: var(--turq-300); /* #5BB3AC */
}

.slap-hero__title {
  margin: 0 0 var(--space-5);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold); /* 600 */
  font-size: 2.5rem; /* ~40px mobile */
  line-height: 1.16;
  letter-spacing: var(--tracking-tight);
  color: var(--stone-50);
}

.slap-hero__title em {
  display: inline-block;
  font-style: italic;
  font-weight: var(--fw-medium); /* 500 */
}

.slap-hero__body {
  margin: 0 0 var(--space-6);
  max-width: 440px;
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--text-md); /* 18 */
  line-height: var(--leading-normal);
  color: var(--stone-300); /* #C3BAA4 */
}

.slap-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* Hero buttons: full-width tap targets on mobile */
.slap-hero__actions .button {
  flex: 1 1 100%;
  text-align: center;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Ghost button — transparent + light border for the dark hero */
.slap-btn-ghost,
.slap-hero__actions .slap-btn-ghost {
  background: transparent;
  color: var(--stone-50);
  border: 1.5px solid var(--stone-300);
  box-shadow: none;
  transition: background-color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

.slap-btn-ghost:hover,
.slap-btn-ghost:focus,
.slap-hero__actions .slap-btn-ghost:hover,
.slap-hero__actions .slap-btn-ghost:focus {
  background: rgba(247, 243, 234, 0.08);
  border-color: var(--stone-50);
  color: var(--stone-50);
}

.slap-btn-ghost:active,
.slap-hero__actions .slap-btn-ghost:active {
  transform: scale(0.97);
}

/* ---------- TRUST STRIP ---------- */
.slap-trust {
  background: var(--surface-2); /* #ECE6D8 sunken band */
  box-shadow: var(--shadow-engrave);
}

.slap-trust .col-full {
  padding: var(--space-3) var(--gutter);
  font-family: var(--font-mono);
  font-weight: var(--fw-regular);
  font-size: var(--text-xs); /* 12 */
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
  line-height: var(--leading-normal);
  /* wraps gracefully on small screens */
  word-spacing: 0.02em;
}

/* ---------- FEATURED ---------- */
.slap-featured {
  background: var(--bg); /* sandstone */
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
}

.slap-featured .col-full {
  max-width: var(--container);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  box-sizing: border-box;
}

.slap-eyebrow {
  margin: 0 0 var(--space-2);
  font-family: var(--font-mono);
  font-weight: var(--fw-regular);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--accent); /* turquoise */
}

.slap-featured h2 {
  margin: 0 0 var(--space-6);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: 2.25rem; /* ~36px mobile */
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
}

/* ---------- DESKTOP ---------- */
@media (min-width: 640px) {
  .slap-hero {
    padding-top: var(--space-9);
    padding-bottom: var(--space-9);
  }

  .slap-hero__title {
    font-size: 4.125rem; /* ~66px desktop */
  }

  .slap-hero__actions .button {
    flex: 0 0 auto;
  }

  .slap-featured h2 {
    font-size: 3.125rem; /* ~50px desktop */
  }
}

/* =========================================================
   The Slapidary — SHOP ARCHIVE (WooCommerce Storefront)
   Targets /shop/ (post-type-archive-product / .woocommerce.archive)
   Mobile-first. References tokens from design-tokens/ (do not redefine).
   ========================================================= */

/* ---------------------------------------------------------
   1. Archive header area (eyebrow + title + result/sort row)
   --------------------------------------------------------- */
.woocommerce.archive .page-title,
.woocommerce-products-header__title.page-title,
.archive.post-type-archive-product .page-title {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--text-3xl);          /* ~48px */
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
  text-transform: none;                /* Title Case, never uppercase */
  margin: var(--space-2) 0 var(--space-5);
}

/* Eyebrow — small mono kicker above the title.
   PHP hook should emit: <p class="slap-eyebrow">The Bench</p>
   inside .woocommerce-products-header. Styled here defensively. */
.woocommerce-products-header .slap-eyebrow,
.woocommerce.archive .slap-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--eyebrow-size);      /* 12px */
  font-weight: var(--fw-regular);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 var(--space-2);
}

/* The result-count + ordering row.
   Storefront prints .woocommerce-result-count and
   form.woocommerce-ordering as siblings before ul.products. */
.woocommerce.archive .woocommerce-result-count,
.woocommerce.archive .woocommerce-ordering {
  margin: 0 0 var(--space-5);
}

.woocommerce.archive .woocommerce-result-count {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--text-subtle);
  line-height: var(--leading-normal);
}

/* Ordering select uses the Input/Select "engraved well" look from tokens */
.woocommerce.archive .woocommerce-ordering select,
.woocommerce.archive .storefront-sorting select,
.woocommerce.archive select.orderby {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text);
  background-color: var(--surface);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-engrave);
  padding: var(--space-2) var(--space-7) var(--space-2) var(--space-3);
  min-height: 44px;                    /* tap target */
  line-height: 1.2;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* chevron */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%234C463A' stroke-width='1.5' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  transition: border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}

.woocommerce.archive .woocommerce-ordering select:focus,
.woocommerce.archive select.orderby:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--shadow-engrave), 0 0 0 3px var(--ring);
}

/* From tablet up, lay count + ordering on one tidy row */
@media (min-width: 768px) {
  .woocommerce.archive .woocommerce-result-count {
    float: none;
    display: inline-flex;
    align-items: center;
    margin-bottom: var(--space-5);
  }
  .woocommerce.archive .woocommerce-ordering {
    float: none;
    margin-bottom: var(--space-5);
  }
  /* Build the row: count left, ordering right */
  .woocommerce.archive .woocommerce-result-count {
    width: auto;
  }
}

/* Robust one-row layout for the count/sort band regardless of float order.
   Wraps the two Storefront elements onto a flex line. PHP hook may wrap them
   in <div class="slap-catalog-toolbar">; styled both ways. */
.woocommerce.archive .slap-catalog-toolbar {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0 0 var(--space-6);
}
.woocommerce.archive .slap-catalog-toolbar .woocommerce-result-count,
.woocommerce.archive .slap-catalog-toolbar .woocommerce-ordering {
  margin: 0;
}
@media (min-width: 768px) {
  .woocommerce.archive .slap-catalog-toolbar {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* ---------------------------------------------------------
   2. Product grid — full width, responsive
   Storefront prints ul.products.columns-3
   1-up mobile (<=600px) -> 2-up tablet (<=900px) -> 3-up desktop
   --------------------------------------------------------- */
.woocommerce ul.products,
.woocommerce ul.products.columns-3,
.woocommerce ul.products.columns-4,
.slap-featured ul.products,
.slap-featured ul.products.columns-4 {
  display: grid;
  grid-template-columns: 1fr;          /* mobile: 1-up */
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* WooCommerce core adds a clearfix (::before/::after with display: table) to
   ul.products for its float layout. Once the list is a CSS grid, those pseudo-
   elements become real grid items and the ::before eats the first cell —
   shifting the first product to column 2 and leaving row 1 with only 2 cards
   (home Featured, /shop/, related products… every grid instance). Remove them. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after,
.slap-featured ul.products::before,
.slap-featured ul.products::after {
  content: none;
}

/* Neutralize Storefront's float/width math */
.woocommerce ul.products li.product,
.woocommerce ul.products.columns-3 li.product,
.woocommerce ul.products li.product.first,
.woocommerce ul.products li.product.last,
.slap-featured ul.products li.product {
  width: auto;
  float: none;
  margin: 0;
  clear: none;
  /* cap card width so a lone product doesn't stretch weirdly */
  max-width: 420px;
}

@media (min-width: 640px) {
  .woocommerce ul.products,
  .woocommerce ul.products.columns-3,
  .woocommerce ul.products.columns-4,
  .slap-featured ul.products,
  .slap-featured ul.products.columns-4 {
    grid-template-columns: repeat(2, 1fr);   /* tablet: 2-up (aligned with redesign.css breakpoints) */
  }
}

@media (min-width: 901px) {
  .woocommerce ul.products,
  .woocommerce ul.products.columns-3,
  .woocommerce ul.products.columns-4,
  .slap-featured ul.products,
  .slap-featured ul.products.columns-4 {
    grid-template-columns: repeat(3, 1fr);   /* desktop: 3-up */
  }
  /* in a multi-col grid each cell governs width; lift the cap */
  .woocommerce ul.products li.product,
  .slap-featured ul.products li.product {
    max-width: none;
  }
}

/* ---------------------------------------------------------
   3. Card — li.product
   --------------------------------------------------------- */
.woocommerce ul.products li.product,
.slap-featured ul.products li.product {
  display: flex;
  flex-direction: column;
  background-color: var(--surface);
  border: var(--bw-hair) solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}

.woocommerce ul.products li.product:hover,
.woocommerce ul.products li.product:focus-within,
.slap-featured ul.products li.product:hover,
.slap-featured ul.products li.product:focus-within {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  border-color: var(--border-strong);
}

/* The whole-card link wrapping the image + title (Storefront markup) */
.woocommerce ul.products li.product > a,
.slap-featured ul.products li.product > a {
  text-decoration: none;
  color: inherit;
  display: block;
}

/* --- Media area (wrapper added by PHP hook: .slap-card-media) --- */
.woocommerce ul.products li.product .slap-card-media,
.slap-featured ul.products li.product .slap-card-media {
  position: relative;
  display: block;
  margin: 0;
  background-color: var(--surface-2);
  overflow: hidden;
}

/* Thumbnail itself — fill the media area, square-ish crop.
   After the PHP fix the image is a real child of .slap-card-media. */
.woocommerce ul.products li.product .slap-card-media img,
.woocommerce ul.products li.product img.attachment-woocommerce_thumbnail,
.woocommerce ul.products li.product .wp-post-image,
.slap-featured ul.products li.product .slap-card-media img,
.slap-featured ul.products li.product img.attachment-woocommerce_thumbnail,
.slap-featured ul.products li.product .wp-post-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  margin: 0;
  border-radius: 0;
  transition: transform var(--dur-slow) var(--ease-out);
}

.woocommerce ul.products li.product:hover .slap-card-media img,
.slap-featured ul.products li.product:hover .slap-card-media img {
  transform: scale(1.03);
}

/* Category pill — top-left, olive-soft (PHP hook: .slap-category-pill) */
.woocommerce ul.products li.product .slap-category-pill,
.slap-featured ul.products li.product .slap-category-pill {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);          /* 11px */
  font-weight: var(--fw-regular);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--olive-700);             /* #444827 */
  background-color: var(--olive-100);  /* #DFE1C9 olive-soft */
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-3);
  line-height: 1.4;
  box-shadow: var(--shadow-sm);
}

/* Video chip — bottom-right, obsidian (PHP hook: .slap-video-chip "▶ VIDEO") */
.woocommerce ul.products li.product .slap-video-chip,
.slap-featured ul.products li.product .slap-video-chip {
  position: absolute;
  bottom: var(--space-3);
  right: var(--space-3);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);          /* 11px */
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-inverse);
  background-color: var(--obsidian);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2);
  line-height: 1.4;
  box-shadow: var(--shadow-md);
}

/* --- Card body --- */
/* Product name — Cormorant, Title Case, ~21px */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2.woocommerce-loop-product__title,
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product h3,
.slap-featured ul.products li.product .woocommerce-loop-product__title,
.slap-featured ul.products li.product h2.woocommerce-loop-product__title,
.slap-featured ul.products li.product h2,
.slap-featured ul.products li.product h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: 1.3125rem;                /* 21px */
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  text-transform: none;                /* Title Case */
  color: var(--text);
  padding: var(--space-4) var(--space-4) 0;
  margin: 0;
}

/* Dimensions / carat line — Space Mono (PHP hook: .slap-card-dims) */
.woocommerce ul.products li.product .slap-card-dims,
.slap-featured ul.products li.product .slap-card-dims {
  font-family: var(--font-mono);
  font-size: var(--text-xs);           /* 12px */
  font-weight: var(--fw-regular);
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
  padding: var(--space-2) var(--space-4) 0;
  margin: 0;
  line-height: var(--leading-normal);
}

/* Price — Cormorant */
.woocommerce ul.products li.product .price,
.slap-featured ul.products li.product .price {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--text-lg);           /* ~22px */
  color: var(--text);
  letter-spacing: var(--tracking-tight);
  padding: var(--space-3) var(--space-4) 0;
  margin: 0;
}
.woocommerce ul.products li.product .price del,
.slap-featured ul.products li.product .price del {
  color: var(--text-subtle);
  font-weight: var(--fw-regular);
  opacity: 0.7;
}
.woocommerce ul.products li.product .price ins,
.slap-featured ul.products li.product .price ins {
  text-decoration: none;
  color: var(--accent);
}

/* Loop "Add to cart" / "Read more" — outlined secondary button */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.add_to_cart_button,
.woocommerce ul.products li.product a.product_type_simple,
.woocommerce ul.products li.product a.added_to_cart,
.slap-featured ul.products li.product .button,
.slap-featured ul.products li.product a.add_to_cart_button,
.slap-featured ul.products li.product a.product_type_simple,
.slap-featured ul.products li.product a.added_to_cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  margin: var(--space-4);
  margin-top: auto;                    /* push button to card bottom */
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wider);  /* 0.08em */
  text-transform: uppercase;
  color: var(--border-bold);
  background-color: transparent;
  border: 1.5px solid var(--border-bold);  /* #4C463A */
  border-radius: var(--radius-sm);
  padding: 10px 18px;                  /* md size */
  min-height: 44px;
  line-height: 1.1;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}

.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product a.add_to_cart_button:hover,
.slap-featured ul.products li.product .button:hover,
.slap-featured ul.products li.product a.add_to_cart_button:hover {
  background-color: var(--border-bold);
  color: var(--text-on-primary);
  border-color: var(--border-bold);
}

.woocommerce ul.products li.product .button:active,
.woocommerce ul.products li.product a.add_to_cart_button:active,
.slap-featured ul.products li.product .button:active,
.slap-featured ul.products li.product a.add_to_cart_button:active {
  transform: scale(0.97);
  background-color: var(--primary-press);
  border-color: var(--primary-press);
}

.woocommerce ul.products li.product .button:focus-visible,
.woocommerce ul.products li.product a.add_to_cart_button:focus-visible,
.slap-featured ul.products li.product .button:focus-visible,
.slap-featured ul.products li.product a.add_to_cart_button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ring);
}

/* "View cart" link that appears after add — keep it quiet under the button */
.woocommerce ul.products li.product a.added_to_cart,
.slap-featured ul.products li.product a.added_to_cart {
  margin-top: 0;
}