/* ============================================================================
   THE SLAPIDARY — "Slapidary Store" redesign module (2026-07).
   Additive layer translating design/Artisan-Gemstone-Shop-Design into the
   Storefront child theme. Loads LAST (after layout.css) so it wins on equal
   specificity. Built entirely on the existing tokens in tokens.css — no new
   tokens. Real WooCommerce product photos replace the design's StoneTile.
   Sections are added milestone by milestone; each is clearly headed.
   ============================================================================ */

/* ============================================================
   MILESTONE 1 — FOOTER (3 columns + brand + credit)
   Markup emitted by slapidary_footer_content() in functions.php, inside
   Storefront's .site-footer > .col-full. Obsidian base + column type come
   from the HEADER/FOOTER module in slapidary.css; this lays out the columns.
   ============================================================ */

/* The old footer treated .col-full as the flex column-track (for widgets).
   Our footer supplies its own top/bottom blocks, so make col-full a plain block. */
.site-footer .col-full {
  display: block;
}

.slap-footer-top {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(28px, 5vw, 48px);
}

.slap-footer-brand {
  max-width: 280px;
  flex: 1 1 240px;
}
.slap-footer-brand .slap-wordmark {
  display: inline-flex;
  margin-bottom: 14px;
}
.slap-footer-brand p {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.6;
  color: var(--stone-400);
  margin: 0;
}

.slap-footer-col {
  flex: 0 1 auto;
}
.slap-footer-col h3 {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone-500);
  margin: 0 0 12px;
}
.slap-footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.slap-footer-col a {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--stone-300);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.slap-footer-col a:hover,
.slap-footer-col a:focus-visible {
  color: var(--stone-50);
}

.slap-footer-bottom {
  margin-top: 32px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.slap-footer-bottom span {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--stone-500);
}

/* From tablet up, give the columns room and push them out along the row. */
@media (min-width: 768px) {
  .slap-footer-top {
    flex-wrap: nowrap;
  }
  .slap-footer-brand {
    flex: 0 1 300px;
    margin-right: auto;
  }
  .slap-footer-col {
    min-width: 130px;
  }
}

/* ============================================================
   MILESTONE 2 — HOME
   2-col hero with the 2x2 stone grid, "Browse the Bench" cases,
   Featured head row, Journal teasers. Card-foot upgrade is global
   (shared with Shop) and lives in the CARD section below.
   ============================================================ */

/* ---- Buttons: accent (turquoise) + secondary (outlined) + dark ghost ---- */
.slap-btn-accent,
.slap-hero__actions .slap-btn-accent {
  background: var(--accent);
  border: 1px solid var(--accent);
  color: var(--text-on-accent);
  box-shadow: none;
}
.slap-btn-accent:hover,
.slap-btn-accent:focus,
.slap-hero__actions .slap-btn-accent:hover,
.slap-hero__actions .slap-btn-accent:focus {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--text-on-accent);
}
.slap-btn-accent:active {
  background: var(--turq-700);
  border-color: var(--turq-700);
  transform: scale(0.97);
}

.slap-btn-secondary,
.woocommerce-page .button.slap-btn-secondary,
.woocommerce .button.slap-btn-secondary {
  background: transparent;
  border: 1.5px solid var(--border-bold);
  color: var(--primary);
}
.slap-btn-secondary:hover,
.woocommerce .button.slap-btn-secondary:hover {
  background: var(--surface-2);
  border-color: var(--border-bold);
  color: var(--primary-hover);
}

/* Ghost on light surfaces (the journal "All Posts →") */
.slap-btn-ghost-dark,
.woocommerce-page .button.slap-btn-ghost-dark {
  background: transparent;
  border: 1.5px solid var(--border-strong);
  color: var(--text-muted);
  box-shadow: none;
}
.slap-btn-ghost-dark:hover {
  border-color: var(--border-bold);
  color: var(--text);
  background: transparent;
}

/* ---- Hero: copy | 2x2 stone grid ---- */
.slap-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}
@media (min-width: 768px) {
  .slap-hero__grid {
    grid-template-columns: 1fr 1fr;
  }
}

.slap-hero__stones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.slap-hero__stone {
  display: block;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  transition: transform var(--dur-base) var(--ease-out);
}
.slap-hero__stone:hover {
  transform: translateY(-2px);
}
.slap-hero__stone img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 1 / 1;
  margin: 0;
}
/* Staggered heights like the design: outer tiles taller than inner. */
.slap-hero__stone:nth-child(1) img,
.slap-hero__stone:nth-child(4) img {
  aspect-ratio: 1 / 1.15;
}

/* ---- Section head row (Featured / Journal): title left, button right ---- */
.slap-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}
.slap-section-head h2 {
  margin: 0;
}
.slap-section-head .slap-eyebrow {
  margin: 0 0 8px;
}

/* ---- "Browse the Bench" case cards ---- */
.slap-cases {
  padding-top: var(--section-y);
}
.slap-cases .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-cases h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: clamp(2.125rem, 5vw, 3.125rem);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 26px;
  color: var(--text);
}
.slap-cases .slap-eyebrow {
  margin: 0 0 8px;
}

.slap-cases__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: 18px;
}
.slap-case {
  display: block;
  background: var(--surface);
  border: var(--bw-hair) solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}

/* Card-style links must never underline — Storefront's .entry-content a
   (higher specificity than a bare class) re-adds it, so pin it off. */
.slap-case,
.slap-case:hover,
.slap-case:focus,
.slap-case *,
.slap-post-card,
.slap-post-card:hover,
.slap-post-card:focus,
.slap-post-card *,
.slap-hero__stone {
  text-decoration: none !important;
}
.slap-case:hover,
.slap-case:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.slap-case__media {
  display: block;
  aspect-ratio: 16 / 8;
  background: var(--surface-2);
  overflow: hidden;
  position: relative;
}
.slap-case__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0;
}
.slap-case__placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 28px;
  color: var(--stone-300);
  background:
    radial-gradient(80% 120% at 80% 10%, rgba(23, 140, 130, 0.12), transparent 60%),
    radial-gradient(70% 90% at 15% 90%, rgba(86, 92, 48, 0.14), transparent 60%),
    var(--surface-2);
}
.slap-case__body {
  display: block;
  padding: 14px 16px 16px;
}
.slap-case__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.slap-case__label {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: 23px;
  color: var(--text);
}
.slap-case__count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-subtle);
  white-space: nowrap;
}
.slap-case__desc {
  display: block;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
  margin-top: 6px;
}

/* ---- Journal teasers (home) ---- */
.slap-journal-teaser {
  background: var(--surface-2);
  border-top: var(--bw-hair) solid var(--border);
  border-bottom: var(--bw-hair) solid var(--border);
  padding: clamp(40px, 6vw, 64px) 0;
  margin-top: var(--section-y);
}
.slap-journal-teaser .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-journal-teaser h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: clamp(1.875rem, 4.5vw, 2.625rem);
  margin: 0;
  color: var(--text);
}
.slap-journal-teaser__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 18px;
}
.slap-post-card {
  display: block;
  background: var(--surface);
  border: var(--bw-hair) solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.slap-post-card:hover,
.slap-post-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.slap-post-card__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.slap-post-card__date {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-subtle);
}
.slap-post-card__title {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: 24px;
  line-height: 1.15;
  color: var(--text);
}
.slap-post-card__excerpt {
  display: block;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-muted);
  margin-top: 8px;
}

/* ============================================================
   PRODUCT CARD v2 (global: home featured + shop)
   Design card: photo inset with its own radius, title 21px,
   mono meta line, then a bottom row = price (24px) | Add button.
   Builds on the existing card base in pages.css/slapidary.css.
   ============================================================ */

/* Inset the media panel inside the card. */
.woocommerce ul.products li.product .slap-card-media,
.slap-featured ul.products li.product .slap-card-media {
  margin: 12px 12px 0;
  border-radius: var(--radius-sm);
}

/* Card body padding tune. */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2.woocommerce-loop-product__title {
  padding: var(--space-4) var(--space-4) 0;
}

/* Foot row: price left, Add right, pinned to the card bottom. */
.woocommerce ul.products li.product .slap-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding: 14px var(--space-4) var(--space-4);
}
.woocommerce ul.products li.product .slap-card-foot .price {
  margin: 0;
  padding: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: 24px;
  color: var(--text);
}
.woocommerce ul.products li.product .slap-card-foot .button,
.woocommerce ul.products li.product .slap-card-foot a.add_to_cart_button {
  margin: 0;
  padding: 7px 12px;
  min-height: 34px;
  font-size: var(--text-xs);
}
/* The post-add "View cart" chip drops under the row, right-aligned. */
.woocommerce ul.products li.product .slap-card-foot a.added_to_cart {
  margin: 0;
  padding: 5px 10px;
  min-height: 0;
}

/* ============================================================
   MILESTONE 3 — SHOP (segment tiles, material chips, toolbar)
   ============================================================ */

/* ---- Segment tiles ---- */
.slap-segments {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: 12px;
  margin: 0 0 22px;
}
.slap-segment {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  text-decoration: none !important;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.slap-segment:hover,
.slap-segment:focus-visible {
  border-color: var(--border-bold);
  transform: translateY(-1px);
}
.slap-segment:active {
  transform: scale(0.98);
}
.slap-segment.is-active {
  border: 1.5px solid var(--primary);
  background: var(--primary-soft);
  box-shadow: var(--shadow-engrave);
}
.slap-segment__label {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: 20px;
  line-height: 1.1;
  color: var(--text);
}
.slap-segment.is-active .slap-segment__label {
  color: var(--olive-700);
}
.slap-segment__count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-subtle);
  opacity: 0.9;
}
.slap-segment.is-active .slap-segment__count {
  color: var(--olive-700);
  opacity: 0.75;
}

/* ---- Toolbar: MATERIAL chips left, sort right ---- */
.slap-shop-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 0 4px;
  border-top: var(--bw-hair) solid var(--border);
}
.slap-shop-toolbar__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-subtle);
}
.slap-material-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  flex: 1;
}
.slap-filter-chip {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-muted);
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: var(--fw-semibold);
  font-size: 11px;
  padding: 8px 13px;
  min-height: 34px;
  border-radius: var(--radius-pill);
  text-decoration: none !important;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.slap-filter-chip:hover,
.slap-filter-chip:focus-visible {
  border-color: var(--border-bold);
  color: var(--text);
}
.slap-filter-chip:active {
  transform: scale(0.97);
}
.slap-filter-chip.is-active {
  border: 1px solid var(--primary);
  background: var(--primary);
  color: var(--text-on-primary);
}
.slap-shop-toolbar__sort {
  margin-left: auto;
  min-width: 190px;
}
.slap-shop-toolbar__sort .woocommerce-ordering {
  margin: 0;
  float: none;
}

/* ---- Count line ---- */
.slap-shop-count {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-subtle);
  margin: 8px 0 16px;
}

/* ============================================================
   MILESTONE 4 — SINGLE PRODUCT summary
   Chips row + spec block styles ship in slapidary.css (design
   handoff); this adds the SKU line and retires now-redundant
   default elements.
   ============================================================ */

/* Mono SKU directly under the title. */
.single-product .summary .slap-sku {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--text-subtle);
  margin: 0 0 var(--space-4);
}

/* SKU + category moved into the summary (SKU line, chips, spec block) —
   retire WC's bottom meta block and the "1 in stock" pill; the
   one-of-a-kind line communicates quantity. */
.single-product div.product .summary .product_meta,
.single-product div.product .summary p.stock {
  display: none;
}

/* Design order puts the price right after the title block; the chips row
   (priority 4) renders above the title by design. */
.single-product .summary .slapidary-chips {
  margin-bottom: var(--space-3);
}

/* ============================================================
   MILESTONE 5 — JOURNAL
   Index/category: header + chips + card grid (cards reuse the
   .slap-post-card family from the home teasers). Single post:
   narrow measure, back link, bottom CTA.
   ============================================================ */

/* Journal listing width (design: 1080) + header */
.blog .site-main,
.category .site-main {
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
}
.slap-journal-head h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: clamp(2.375rem, 6vw, 3.375rem);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 8px;
  color: var(--text);
}
.slap-journal-head .slap-eyebrow {
  margin: 0 0 8px;
}
.slap-journal-head__intro {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 560px;
  margin: 0;
}
.slap-journal-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 20px 0 26px;
}

/* Card grid: articles become cards. */
.blog .site-main .slap-journal-cards,
.blog .site-main,
.category .site-main {
  /* grid applied on the main; header/chips/nav span full width */
}
.blog .site-main article.post,
.category .site-main article.post {
  background: var(--surface);
  border: var(--bw-hair) solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  margin: 0 0 18px;
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.blog .site-main article.post:hover,
.category .site-main article.post:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
@media (min-width: 768px) {
  .blog .site-main .slap-journal-grid,
  .blog .site-main,
  .category .site-main {
    display: block; /* keep simple flow; cards grid below */
  }
  .blog .site-main article.post,
  .category .site-main article.post {
    margin: 0;
  }
  /* grid wrapper: articles are direct children of .site-main after the
     header/chips; use CSS grid on a pseudo-container via row layout */
}

/* Grid the article cards themselves (header, chips, nav span full width). */
@media (min-width: 640px) {
  .blog .site-main,
  .category .site-main {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
    gap: 18px;
  }
  .blog .site-main > .slap-journal-head,
  .blog .site-main > .slap-journal-chips,
  .blog .site-main > .storefront-sorting,
  .blog .site-main > nav,
  .blog .site-main > .slap-empty-case,
  .category .site-main > .slap-journal-head,
  .category .site-main > .slap-journal-chips,
  .category .site-main > nav,
  .category .site-main > .slap-empty-case {
    grid-column: 1 / -1;
  }
  .slap-journal-chips {
    margin-bottom: 8px;
  }
}

.slap-post-card__media {
  display: block;
  aspect-ratio: 16 / 7;
  overflow: hidden;
  background: var(--surface-2);
}
.slap-post-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0;
}
.slap-post-card__inner {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.blog .site-main article.post .slap-post-card__title,
.category .site-main article.post .slap-post-card__title {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: 23px;
  line-height: 1.12;
  color: var(--text);
  text-decoration: none !important;
}
.blog .site-main article.post .slap-post-card__title:hover {
  color: var(--primary-hover);
}

/* Single post: narrow reading measure + type */
.single-post .site-main {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.single-post .entry-title {
  font-size: clamp(2.125rem, 6vw, 3rem);
  line-height: 1.08;
}
.single-post .entry-content {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.75;
}
.slap-back-link {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none !important;
  padding: 6px 0;
  margin-bottom: 18px;
}
.slap-back-link:hover {
  color: var(--text);
}
.slap-post-cta {
  margin-top: 34px;
  padding: 20px 22px;
  background: var(--surface-2);
  border: var(--bw-hair) solid var(--border);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.slap-post-cta__title {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: 22px;
  color: var(--text);
  margin: 0;
}
.slap-post-cta__body {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-muted);
  margin: 3px 0 0;
}

/* ============================================================
   PRODUCT GALLERY WIDTH (desktop)
   Storefront's full-width-content rule
   (.storefront-full-width-content.single-product div.product
    .woocommerce-product-gallery { width: 39.1304%; float: left })
   out-ranks the child theme's 100% reset, shrinking the main
   photo to ~200px inside a ~530px grid column — and srcset then
   serves a small thumbnail. Let the gallery fill its column.
   Desktop-only: below 768px Storefront's rule never applies and
   the stacked mobile layout is already correct.
   ============================================================ */
@media (min-width: 768px) {
  .storefront-full-width-content.single-product div.product .images,
  .storefront-full-width-content.single-product div.product .woocommerce-product-gallery,
  .single-product div.product .woocommerce-product-gallery {
    width: 100% !important;
    float: none !important;
  }
  /* Thumbnails: Storefront's 8.57%/11.11% float grid shrinks them to ~13px
     dots; let the child theme's 4-up grid (slapidary.css) govern instead. */
  .single-product div.product .woocommerce-product-gallery .flex-control-thumbs li,
  .storefront-full-width-content.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li {
    width: 100% !important;
    float: none !important;
  }
}

/* Single-post meta: keep the date, drop the empty byline / comment link /
   bottom taxonomy line (the design shows badge + date only). */
.single-post .entry-meta .post-author,
.single-post .entry-meta .post-comments,
.single-post .entry-meta .byline,
.single-post aside.entry-taxonomy {
  display: none;
}
.single-post .entry-meta,
.single-post .posted-on {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-subtle);
}

/* ============================================================
   MILESTONE 6 — OUR STORY
   Obsidian hero (own H1 — the page's default title is hidden),
   3-value grid, "When It's Gone, It's Gone" CTA band.
   ============================================================ */

/* The hero carries the page's H1; hide the theme's "Our Story" entry title
   and let the full-bleed hero meet the nav (same treatment as Home). */
.page-id-49 .entry-header {
  display: none;
}
.page-id-49 .site-content {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.slap-about-hero {
  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);
  background-image: radial-gradient(70% 110% at 88% 12%, rgba(86, 92, 48, 0.6), transparent 55%);
  background-repeat: no-repeat;
  color: var(--stone-50);
}
.slap-about-hero__inner {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(48px, 8vw, 80px) var(--gutter);
}
.slap-about-hero__eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--turq-300);
  margin: 0 0 16px;
}
.slap-about-hero h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: clamp(2.5rem, 7vw, 3.875rem);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--stone-50);
  margin: 0 0 20px;
}
.slap-about-hero__body {
  font-family: var(--font-body);
  font-size: clamp(15px, 2.2vw, 18px);
  line-height: 1.65;
  color: var(--stone-300);
  margin: 0;
}

.slap-values {
  max-width: 1000px;
  margin: 0 auto;
  padding: clamp(44px, 7vw, 72px) var(--gutter);
}
.slap-values__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 28px;
}
.slap-value__num {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--accent);
  margin: 0 0 12px;
}
.slap-value h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: 25px;
  margin: 0 0 8px;
  color: var(--text);
}
.slap-value p:last-child {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
}

.slap-about-cta {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  box-sizing: border-box;
  background: var(--surface-2);
  border-top: var(--bw-hair) solid var(--border);
  border-bottom: var(--bw-hair) solid var(--border);
}
.slap-about-cta__inner {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 56px) var(--gutter);
  text-align: center;
}
.slap-about-cta h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: clamp(1.875rem, 5vw, 2.625rem);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 14px;
  color: var(--text);
}
.slap-about-cta p {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 460px;
  margin: 0 auto 24px;
}

/* ============================================================
   PROSE PAGES (Our Story narrative, Shipping & Returns,
   Privacy Policy, Terms) — long-form reading column under the
   shared .slap-about-hero header.
   ============================================================ */
.slap-prose {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 64px) var(--gutter);
}
.slap-prose__updated {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-subtle);
  margin: 0 0 28px;
}
.slap-prose h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: clamp(1.5rem, 3.5vw, 1.875rem);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
  margin: 36px 0 12px;
}
.slap-prose p,
.slap-prose li {
  font-family: var(--font-body);
  font-size: clamp(15px, 2vw, 17px);
  line-height: 1.7;
  color: var(--text-muted);
}
.slap-prose p { margin: 0 0 18px; }
.slap-prose ul {
  margin: 0 0 18px;
  padding-left: 22px;
}
.slap-prose li { margin-bottom: 10px; }
.slap-prose li strong,
.slap-prose p strong { color: var(--text); }
.slap-prose a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Story-specific touches (Our Story page) */
.slap-story .slap-story__beat {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: clamp(1.5rem, 4vw, 2rem);
  color: var(--text);
  margin: 28px 0;
}
.slap-story__photo {
  /* Portrait photo: cap the width so it reads as a snapshot, not a wall. */
  max-width: 440px;
  margin: 32px auto;
}
.slap-story__photo img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-md);
  border: var(--bw-hair) solid var(--border);
  box-shadow: var(--shadow-md);
}
.slap-story__photo figcaption {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-subtle);
  margin-top: 10px;
  text-align: center;
}

/* ============================================================
   MILESTONE 7 — BAG DRAWER (off-canvas mini-cart)
   Skeleton rendered in wp_footer; contents = WC mini-cart, kept
   live by cart fragments. redesign.js toggles .is-open.
   ============================================================ */
@keyframes slp-drawer {
  from { transform: translateX(100%); }
  to   { transform: none; }
}

.slap-drawer {
  position: fixed;
  inset: 0;
  z-index: 100000; /* above the sticky header + admin bar */
  display: none;
}
.slap-drawer.is-open {
  display: block;
}
body.slap-drawer-open {
  overflow: hidden;
}
.slap-drawer__overlay {
  position: absolute;
  inset: 0;
  background: var(--overlay);
}
.slap-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(400px, 92vw);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  animation: slp-drawer 0.24s var(--ease-out);
}
.slap-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: var(--bw-hair) solid var(--border);
}
.slap-drawer__title {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: 26px;
  color: var(--text);
}
.slap-drawer__close {
  appearance: none;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 16px;
  color: var(--text-muted);
  padding: 6px 8px;
  line-height: 1;
}
.slap-drawer__close:hover {
  color: var(--text);
}

.slap-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
}

/* --- WC mini-cart, skinned to the design --- */
.slap-drawer .woocommerce-mini-cart {
  list-style: none;
  margin: 0;
  padding: 0;
}
.slap-drawer .woocommerce-mini-cart-item {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 0 0 14px;
  margin: 0 0 14px;
  border-bottom: var(--bw-hair) solid var(--border);
}
.slap-drawer .woocommerce-mini-cart-item a {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: 18px;
  line-height: 1.1;
  color: var(--text);
  text-decoration: none !important;
}
.slap-drawer .woocommerce-mini-cart-item img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  margin: 0;
  float: none;
}
.slap-drawer .woocommerce-mini-cart-item a.remove {
  grid-column: 3;
  grid-row: 1;
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: var(--fw-regular);
  color: var(--text-subtle) !important;
  width: auto;
  height: auto;
  line-height: 1;
  text-align: right;
}
.slap-drawer .woocommerce-mini-cart-item a.remove:hover {
  color: var(--danger) !important;
  background: transparent;
}
.slap-drawer .woocommerce-mini-cart-item .quantity {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
}

.slap-drawer .woocommerce-mini-cart__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 4px 0 10px;
  margin: 0;
  border-top: var(--bw-hair) solid var(--border);
}
.slap-drawer .woocommerce-mini-cart__total strong {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-subtle);
  font-weight: var(--fw-regular);
}
.slap-drawer .woocommerce-mini-cart__total .woocommerce-Price-amount {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: 26px;
  color: var(--text);
}

.slap-drawer .woocommerce-mini-cart__buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
}
.slap-drawer .woocommerce-mini-cart__buttons .button {
  width: 100%;
  text-align: center;
}

.slap-drawer .woocommerce-mini-cart__empty-message {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
  text-align: center;
  padding: 44px 10px 10px;
  margin: 0;
}

/* "Shop Stones" CTA only when the bag is empty. redesign.js mirrors the
   mini-cart contents onto .is-empty on every fragment refresh — works in
   every browser (no :has() dependency). */
.slap-drawer__empty-cta {
  display: none;
  padding: 0 20px 16px;
  text-align: center;
}
.slap-drawer__panel.is-empty .slap-drawer__empty-cta {
  display: block;
}
.slap-drawer__panel.is-empty .slap-drawer__note {
  display: none;
}

.slap-drawer__note {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-subtle);
  text-align: center;
  margin: 0;
  padding: 0 20px 16px;
}

/* ---- Branded empty archive state ---- */
.slap-empty-case {
  text-align: center;
  padding: 44px 16px 56px;
}
.slap-empty-case__title {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: 26px;
  color: var(--text);
  margin: 0 0 6px;
}
.slap-empty-case__body {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-muted);
  margin: 0 0 18px;
}