/* ============================================================
   WOODBERRY BUILDS — product page styles
   Extends style.css tokens/palette (warm earthy).
   ============================================================ */

/* ---------- product hero ---------- */
.phero{
  position:relative;
  min-height:clamp(420px,62vh,640px);
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  isolation:isolate;
}
.phero__media{position:absolute;inset:0;z-index:-2;}
.phero__media img{width:100%;height:100%;object-fit:cover;object-position:center;}
.phero__scrim{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg, rgba(24,18,11,.30) 0%, rgba(24,18,11,.30) 40%, rgba(24,18,11,.74) 100%),
    linear-gradient(90deg, rgba(24,18,11,.78) 0%, rgba(24,18,11,.46) 42%, rgba(24,18,11,.18) 72%, transparent 100%);
}
.phero__scrim--strong{
  background:
    linear-gradient(180deg, rgba(18,13,8,.30) 0%, rgba(18,13,8,.45) 45%, rgba(18,13,8,.88) 100%),
    linear-gradient(90deg, rgba(18,13,8,.92) 0%, rgba(18,13,8,.72) 42%, rgba(18,13,8,.40) 68%, rgba(18,13,8,.08) 90%, transparent 100%);
}
.phero__content{
  position:relative;
  padding-block:clamp(var(--space-12),8vw,var(--space-24));
  max-width:46rem;
}
.phero__back{
  display:inline-flex;align-items:center;gap:.35rem;
  font-size:var(--text-sm);font-weight:600;
  color:rgba(255,255,255,.88);
  text-shadow:0 1px 8px rgba(20,14,8,.5);
  margin-bottom:var(--space-5);
  transition:color var(--transition);
}
.phero__back + .eyebrow{
  display:block;
  text-shadow:0 1px 8px rgba(20,14,8,.5);
}
.phero__back:hover{color:#fff;}
.phero__title{
  font-family:var(--font-display);
  font-size:var(--text-3xl);
  line-height:1.02;
  letter-spacing:-.02em;
  color:#fff;
  text-shadow:0 2px 18px rgba(20,14,8,.45);
  margin-bottom:var(--space-5);
}
.phero__lead{
  font-size:var(--text-lg);
  line-height:1.5;
  color:rgba(255,255,255,.95);
  text-shadow:0 1px 12px rgba(20,14,8,.55);
  max-width:38rem;
  margin-bottom:var(--space-8);
}
.phero__lead em{font-style:italic;color:#fff;}

/* ---------- overview two-column grid ---------- */
.pgrid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:clamp(var(--space-10),6vw,var(--space-24));
  align-items:start;
}
.pgrid > div:first-child .section-title{margin-bottom:var(--space-6);}
.pgrid p{
  color:var(--color-text-muted);
  font-size:var(--text-base);
  line-height:1.7;
  margin-bottom:var(--space-4);
}
.pgrid p:last-child{margin-bottom:0;}
.pgrid .check-list{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:clamp(var(--space-6),3vw,var(--space-8));
  box-shadow:var(--shadow-sm);
  margin-top:0;
}

/* ---------- magnetic keder comparison ---------- */
.keder-section{
  background:linear-gradient(180deg,var(--color-bg),var(--color-surface-offset));
}
.keder-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(var(--space-5),3vw,var(--space-8));
}
.keder-card{
  position:relative;
  overflow:hidden;
  background:var(--color-surface-2);
  border:1px solid var(--color-border);
  border-radius:var(--radius-xl);
  padding:clamp(var(--space-6),3vw,var(--space-10));
  box-shadow:var(--shadow-sm);
}
.keder-card--good{
  border-color:color-mix(in oklab,var(--color-primary) 55%,var(--color-border));
  box-shadow:var(--shadow-md);
}
.keder-card--good::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:.28rem;
  background:var(--color-primary);
}
.keder-card__label{
  display:inline-flex;
  width:max-content;
  margin-bottom:var(--space-4);
  padding:.35rem .72rem;
  border-radius:var(--radius-full);
  background:var(--color-primary-soft);
  color:var(--color-primary);
  font-size:var(--text-xs);
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.keder-card h3{
  font-family:var(--font-display);
  font-size:var(--text-xl);
  margin-bottom:var(--space-5);
}
.keder-card ul{
  display:grid;
  gap:var(--space-3);
}
.keder-card li{
  position:relative;
  padding-left:1.35rem;
  color:var(--color-text-muted);
  font-size:var(--text-sm);
  line-height:1.6;
}
.keder-card li::before{
  content:"";
  position:absolute;
  left:0;
  top:.62em;
  width:.46rem;
  height:.46rem;
  border-radius:999px;
  background:var(--color-primary);
}

/* ---------- spec section / table ---------- */
.spec-section{background:var(--color-surface-offset);}
.spec-table{
  width:100%;
  border-collapse:collapse;
  background:var(--color-surface-2);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
}
.spec-table th,
.spec-table td{
  text-align:left;
  padding:clamp(var(--space-4),2vw,var(--space-5)) clamp(var(--space-5),3vw,var(--space-8));
  font-size:var(--text-base);
  vertical-align:top;
  border-bottom:1px solid var(--color-divider);
}
.spec-table tr:last-child th,
.spec-table tr:last-child td{border-bottom:0;}
.spec-table th{
  width:34%;
  font-family:var(--font-body);
  font-weight:600;
  color:var(--color-text);
  background:var(--color-surface-offset);
  border-right:1px solid var(--color-divider);
}
.spec-table td{color:var(--color-text-muted);line-height:1.6;}

/* ---------- feature cards ---------- */
.pfeatures-sec{background:var(--color-bg);}
.pfeatures{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(var(--space-5),2.5vw,var(--space-8));
}
.pfeature{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:clamp(var(--space-6),3vw,var(--space-8));
  box-shadow:var(--shadow-sm);
  transition:transform var(--transition),box-shadow var(--transition);
}
.pfeature:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);}
.pfeature h3{
  font-family:var(--font-display);
  font-size:var(--text-lg);
  line-height:1.2;
  color:var(--color-text);
  margin-bottom:var(--space-3);
}
.pfeature p{
  color:var(--color-text-muted);
  font-size:var(--text-base);
  line-height:1.65;
}

/* ---------- closing CTA ---------- */
.pcta{
  background:var(--color-deep);
  color:var(--color-text-inverse);
}
[data-theme="dark"] .pcta{background:#120f0a;}
.pcta__inner{
  max-width:48rem;
  margin-inline:auto;
  text-align:center;
}
.pcta .section-title{color:#fff;margin-bottom:var(--space-4);}
.pcta p{
  color:rgba(255,255,255,.82);
  font-size:var(--text-lg);
  line-height:1.6;
  margin-bottom:var(--space-8);
  max-width:36rem;
  margin-inline:auto;
}
.pcta__actions{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-4);
  justify-content:center;
}
.btn--ghost-dark{
  background:transparent;
  border-color:rgba(255,255,255,.45);
  color:#fff;
}
.btn--ghost-dark:hover{
  background:rgba(255,255,255,.10);
  border-color:#fff;
  transform:translateY(-2px);
}

/* ---------- responsive ---------- */
@media (max-width:860px){
  .pgrid{grid-template-columns:1fr;}
  .keder-grid{grid-template-columns:1fr;}
  .pfeatures{grid-template-columns:1fr;}
}
@media (max-width:560px){
  .spec-table th{width:42%;}
  .spec-table th,.spec-table td{padding:var(--space-4);font-size:var(--text-sm);}
}