/* ==========================================================================
   ARADHNAA — product.css
   The kit detail page.

   Layout follows the reference product page: art on the left, everything you
   need to decide on the right, then the long-form sections stacked beneath.
   What is deliberately absent is the commerce furniture that does not apply
   here — quantity stepper, Add to Cart, Buy It Now — and the scarcity
   counter, which would contradict the promise on the About page.
   ========================================================================== */

.breadcrumb--pdp{ padding-top:var(--space-5); margin-bottom:var(--space-4); }

/* --------------------------------------------------------------------------
   BUY AREA
   -------------------------------------------------------------------------- */
.pdp{
  display:grid; gap:var(--space-6);
  padding-bottom:var(--space-7);
}
@media (min-width:900px){
  .pdp{
    grid-template-columns:minmax(0,5fr) minmax(0,6fr);
    gap:var(--space-8);
    align-items:start;
  }
  /* The art can stay in view while the long right column scrolls. */
  .pdp__media{ position:sticky; top:var(--space-6); }
}

.pdp__art{
  position:relative;
  display:grid; place-items:center;
  aspect-ratio:1/1;
  border:1px solid var(--paper-line);
  border-radius:var(--radius-md);
  overflow:hidden;
  /* Same warm sand as the card art panel: the motifs are drawn in brass and
     gold, which disappears on pure white. */
  background:
    radial-gradient(ellipse 62% 62% at 50% 42%, rgba(226,102,28,.14), transparent 70%),
    linear-gradient(168deg, #FBF2E1, #F4E7D1);
}
.pdp__art img{
  width:52%; height:52%; object-fit:contain;
}
.pdp__badge{
  position:absolute; top:var(--space-4); left:var(--space-4);
  padding:5px 11px; border-radius:var(--radius-sm);
  background:var(--sindoor); color:var(--sandalwood);
  font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
}
.pdp__artnote{
  margin-top:var(--space-3);
  font-family:var(--font-accent); font-style:italic;
  font-size:13px; color:var(--ink-subtle); text-align:center;
}

.pdp__cat{
  font-size:11px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--sindoor);
  margin-bottom:var(--space-2);
}
.pdp__title{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(26px, 3.4vw, 40px); line-height:1.14;
  color:var(--ink); text-wrap:balance;
}

.pdp__price{
  display:flex; align-items:baseline; flex-wrap:wrap; gap:var(--space-3);
  margin-top:var(--space-4);
  font-variant-numeric:tabular-nums;
}
.pdp__now{
  font-family:var(--font-display); font-weight:700;
  font-size:30px; color:var(--ink);
}
.pdp__was{ font-size:16px; color:var(--ink-subtle); text-decoration:line-through; }
.pdp__off{
  font-size:12px; font-weight:700; letter-spacing:.04em;
  color:var(--success-deep);
}
.pdp__tax{ margin-top:var(--space-2); font-size:13px; color:var(--ink-subtle); }

.pdp__lede{
  margin-top:var(--space-4); max-width:56ch;
  font-size:16.5px; line-height:1.6; color:var(--ink-muted);
}

.pdp__actions{
  display:flex; flex-wrap:wrap; gap:var(--space-3);
  margin-top:var(--space-5);
}
.btn--lg{ min-height:52px; padding:15px 26px; font-size:14px; }
.pdp__actions .btn{ flex:1 1 auto; justify-content:center; }
@media (min-width:520px){ .pdp__actions .btn{ flex:0 0 auto; } }

.pdp__nocart{
  margin-top:var(--space-3); max-width:52ch;
  font-size:13.5px; line-height:1.55; color:var(--ink-subtle);
}

.pdp__trust{
  list-style:none; margin-top:var(--space-5);
  padding-top:var(--space-4); border-top:1px solid var(--paper-line);
  display:grid; gap:var(--space-3);
}
.pdp__trust li{
  display:flex; align-items:center; gap:var(--space-3);
  font-size:13.5px; color:var(--ink-muted);
}
.pdp__trust svg{
  width:19px; height:19px; flex:none;
  stroke:var(--brass-deep); fill:none;
}

/* --------------------------------------------------------------------------
   LONG-FORM SECTIONS
   -------------------------------------------------------------------------- */
.pdp-block{ padding-block:var(--space-6); }
.pdp-block__title{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(21px, 2.4vw, 27px); color:var(--ink);
}
.pdp-block__sub{
  margin-top:var(--space-2); max-width:60ch;
  font-family:var(--font-accent); font-style:italic;
  font-size:15.5px; color:var(--ink-muted);
}
.pdp-block__note{
  margin-top:var(--space-4); max-width:64ch;
  font-size:14px; line-height:1.6; color:var(--ink-subtle);
}

/* Contents. This is tabular data - an item and its quantity - so it is a
   real table with a header row rather than a list styled to look like one.
   The wrapper lets a long item name scroll rather than push the page wide. */
.pdp-contents__wrap{
  margin-top:var(--space-5);
  max-width:66ch;
  overflow-x:auto;
}
.pdp-contents{
  width:100%;
  border-collapse:collapse;
  /* --paper-line-strong is a hairline meant for separating panels and is only
     1.59:1 here. A table whose borders are the point needs them visible, so
     these run at 3.09:1 - the threshold WCAG sets for a meaningful graphic. */
  --table-line:rgba(140,106,46,.75);
  border:1px solid var(--table-line);
  font-size:15px;
}
.pdp-contents th,
.pdp-contents td{
  border:1px solid var(--table-line);
  padding:11px 14px;
  text-align:left;
  vertical-align:top;
}
.pdp-contents thead th{
  background:linear-gradient(168deg, #FBF2E1, #F4E7D1);
  font-family:var(--font-body); font-weight:700;
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--sindoor);
  white-space:nowrap;
}
.pdp-contents td{ color:var(--ink); }
/* Zebra striping keeps the eye on the right row across the full width. */
.pdp-contents tbody tr:nth-child(even){ background:rgba(36,18,9,.025); }
.pdp-contents__qty{
  width:1%;
  font-variant-numeric:tabular-nums;
  font-size:14px; color:var(--ink-muted); white-space:nowrap;
}

/* Steps */
.pdp-steps{
  list-style:none; counter-reset:none;
  margin-top:var(--space-5);
  display:grid; gap:var(--space-4);
  max-width:70ch;
}
.pdp-steps li{ display:flex; gap:var(--space-4); align-items:flex-start; }
.pdp-steps__n{
  flex:none; display:grid; place-items:center;
  width:34px; height:34px; border-radius:50%;
  border:1px solid var(--paper-line-strong);
  background:var(--paper-raised);
  font-family:var(--font-display); font-weight:700;
  font-size:15px; color:var(--brass-deep);
}
.pdp-steps p{ font-size:15.5px; line-height:1.6; color:var(--ink-muted); padding-top:5px; }

/* --------------------------------------------------------------------------
   PROMISE BAND
   The one dark band on the page, so it reads as a statement rather than as
   another list.
   -------------------------------------------------------------------------- */
.pdp-promise{
  background:var(--void);
  padding-block:var(--space-7);
  margin-block:var(--space-5);
}
.pdp-promise__title{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(21px, 2.4vw, 27px); color:var(--sandalwood);
  text-align:center;
}
.pdp-promise__grid{
  display:grid; gap:var(--space-5);
  margin-top:var(--space-6);
}
@media (min-width:760px){
  .pdp-promise__grid{ grid-template-columns:repeat(3, 1fr); gap:var(--space-6); }
}
.pdp-promise__item h3{
  font-family:var(--font-display); font-weight:600;
  font-size:16px; color:var(--ember);
  margin-bottom:var(--space-2);
}
.pdp-promise__item p{
  font-size:14.5px; line-height:1.6; color:var(--text-muted);
}

/* --------------------------------------------------------------------------
   PHONES
   -------------------------------------------------------------------------- */
@media (max-width:599px){
  .breadcrumb--pdp{ padding-top:var(--space-4); margin-bottom:var(--space-3); }
  .pdp{ gap:var(--space-5); padding-bottom:var(--space-4); }
  .pdp__art{ aspect-ratio:4/3; }
  .pdp__art img{ width:46%; height:60%; }
  .pdp__now{ font-size:26px; }
  .pdp__lede{ font-size:15.5px; }
  .pdp__actions{ margin-top:var(--space-4); }
  .pdp__actions .btn{ flex:1 1 100%; }
  .pdp-block{ padding-block:var(--space-4); }
  .pdp-contents{ font-size:14.5px; }
  .pdp-contents th,
  .pdp-contents td{ padding:9px 10px; }
  /* The band had padding AND a 24px margin, so it sat in an 80px trough
     between the sections either side of it. Padding alone now spaces it. */
  .pdp-promise{ padding-block:var(--space-5); margin-block:0; }
  /* The related rail now sits directly above the band, and the two sets
     of padding added to a 48px trough. The dark band keeps its own
     breathing room; the rail gives up its bottom padding instead. */
  main > .shop:has(+ .pdp-promise){ padding-bottom:var(--space-2); }
  .pdp-steps{ gap:var(--space-3); }
}