/* product-category.css — Product category pages (tapestry, blanket, etc.)
   Supplements product.css. Requires design.css. */

/* Picker and gallery sections already in product.css.
   This file adds category-specific layout overrides. */

/* ── CATEGORY HERO OVERRIDE ─────────────────────────────────────────── */
/* Category hero uses full-screen layout with JS-driven image */
body[data-product-type] .p-hero {
  min-height: 100vh;
}
body[data-product-type] .hero-title {
  font-size: clamp(52px,9vw,100px);
}

/* ── PURCHASE PANEL ──────────────────────────────────────────────────── */
/* Category pages use a side-by-side layout for larger screens */
@media (min-width: 900px) {
  .p-purchase-layout {
    display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start;
  }
}
.purchase-intro-text p {
  font-size: 14px; line-height: 1.85; color: #666660; font-weight: 300;
}

/* ── SIZE OPTIONS ────────────────────────────────────────────────────── */
.p-options { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.p-opt {
  min-width: 120px;
  display: flex; flex-direction: column;
  padding: 13px 16px; border: 1px solid var(--rule);
  border-radius: 2px; text-align: left;
  cursor: pointer; transition: border-color 0.15s, background 0.15s;
  background: none;
}
.p-opt .p-opt-name {
  font-size: 13px; font-weight: 500; color: var(--black); line-height: 1;
}
.p-opt .p-opt-price {
  font-size: 11px; color: var(--muted); margin-top: 4px; font-weight: 400;
}
.p-opt.is-active {
  background: var(--black); color: #fff; border-color: var(--black);
}
.p-opt.is-active .p-opt-name { color: #fff; }
.p-opt.is-active .p-opt-price { color: rgba(255,255,255,0.55); }
.p-opt:hover:not(.is-active) { border-color: #aaa; }