/* product skeleton: structure only. Colour, type, ornament and motion are the variant's
   (variants/*.css); everything here paints from --v-* tokens or not at all.

   One markup serves every skin. Furniture a skin may not want (the drawing sheet's zone
   rulers, the title block, the seal, dimension lines, the detail lens) is hidden here and
   switched on by the skin that draws it.

   Layout knobs a variant may turn (never the grid properties themselves, so the phone
   breakpoint below always wins):
     --pd-top-h         top bar height
     --pd-hero-cols     hero columns            (desktop)
     --pd-hero-rows     hero rows               (desktop)
     --pd-hero-areas    hero areas: copy, object, tb   (desktop)
     --pd-hero-gap      hero row / column gap
     --pd-obj-w         the hero object's width (desktop)
     --pd-art-ratio     the art frame's ratio (the drawing furniture assumes 2 / 1)
   A skin that places things absolutely (callouts, dimension labels) does it inside
   @media (min-width: 761px), so the phone layout below is never fought.
   app.js sets data-pd-len (s | m | l | xl) on the hero, so a skin can set a long
   headline smaller. */

.pd-app {
  --pd-top-h: 56px;
  position: relative;
  min-height: 100vh;
}

.pd-sheet, .pd-tb, .pd-seal, .pd-dims, .pd-detail, .pd-phantom, .pd-scan,
.pd-hero__note, .pd-callout__ref, .pd-top__cta-tick, .pd-part, .pd-xhair { display: none; }
.pd-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---- top bar */
.pd-top {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 24px;
  height: var(--pd-top-h);
  padding: 0 var(--v-pad-x);
}
/* a long name gives way (ellipsis) before the bar runs off a narrow screen */
.pd-brand { display: inline-flex; align-items: center; gap: 10px; flex: 0 1 auto; text-decoration: none; min-width: 0; }
.pd-brand__mark { width: 28px; height: 28px; object-fit: cover; flex: none; }
.pd-brand__name { white-space: nowrap; min-width: 0; overflow-x: clip; text-overflow: ellipsis; }
.pd-brand__tick { white-space: nowrap; flex: none; }
/* the nav only takes the room left over (basis 0), so it gives way before the name does */
.pd-top__nav { display: flex; flex: 1 1 0; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.pd-top__nav::-webkit-scrollbar { display: none; }
.pd-top__nav .wl-nav__link { white-space: nowrap; text-decoration: none; }
.pd-top__cta { flex: none; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; white-space: nowrap; }

/* ---- hero */
.pd-main { position: relative; min-width: 0; }
.pd-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: var(--pd-hero-cols, minmax(0, 1fr));
  grid-template-rows: var(--pd-hero-rows, auto minmax(0, 1fr));
  grid-template-areas: var(--pd-hero-areas, "copy" "object");
  gap: var(--pd-hero-gap, 28px);
  min-height: calc(100svh - var(--pd-top-h));
  padding: var(--pd-hero-pt, 44px) var(--v-pad-x) var(--pd-hero-pb, 28px);
  overflow: hidden;
}
.pd-hero__light { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.pd-hero__copy { grid-area: copy; position: relative; z-index: 3; min-width: 0; }
.pd-hero__kicker { margin: 0; }
.pd-hero__headline { margin: 0; text-wrap: balance; overflow-wrap: break-word; }
.pd-hero__subhead { margin: 0; text-wrap: pretty; }
.pd-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }

.pd-object {
  grid-area: object;
  position: relative; z-index: 2;
  width: min(100%, var(--pd-obj-w, 100%));
  margin: 0;
  justify-self: center; align-self: start;
  min-width: 0;
}
.pd-object__halo { position: absolute; inset: 0; pointer-events: none; }
.pd-object__halo .pd-echo, .pd-detail__lens .pd-echo { width: 100%; height: 100%; object-fit: cover; }
.pd-object__art { position: relative; width: 100%; aspect-ratio: var(--pd-art-ratio, 2 / 1); }
.pd-object__media { position: absolute; inset: 0; }
.pd-object__media .wl-hero-img { width: 100%; height: 100%; object-fit: cover; }
.pd-object__glass, .pd-scan { position: absolute; inset: 0; pointer-events: none; }
.pd-object__floor { position: absolute; pointer-events: none; }
/* No art delivered: the hero turns typographic and the callouts stand in a row.
   A quoted post in the art's place: the card shows as is, without drawing furniture. */
.pd-object:has(.wl-media--none) .pd-object__art,
.pd-object:has(.wl-media--none) .pd-object__halo,
.pd-object:has(.wl-media--none) .pd-object__floor,
.pd-object:has(.wl-media--none, .wl-media--post) :is(.pd-dims, .pd-detail, .pd-lead, .pd-object__halo, .pd-object__glass, .pd-scan) { display: none; }
.pd-hero:has(.wl-media--none) { grid-template-rows: auto auto; align-content: center; }
.pd-hero:has(.wl-media--none) .pd-object { align-self: start; margin-top: 30px; }
.pd-object:has(.wl-media--none) .pd-callouts { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 36px; }
.pd-object:has(.wl-media--none, .wl-media--post) .pd-callout__box { position: static; transform: none; max-width: none; }
.pd-object:has(.wl-media--post) .pd-object__art { aspect-ratio: auto; -webkit-mask-image: none; mask-image: none; }
.pd-object:has(.wl-media--post) .pd-object__media { position: relative; }
.pd-object:has(.wl-media--post) .pd-callouts { display: flex; flex-wrap: wrap; gap: 14px 36px; margin-top: 24px; }

.pd-dims { position: absolute; left: 0; top: 0; width: 100%; overflow: visible; pointer-events: none; }
.pd-dims--wide { aspect-ratio: 2 / 1; }
.pd-dims--square { aspect-ratio: 1 / 1; }
.pd-detail { position: absolute; pointer-events: none; }
.pd-detail__lens { display: block; overflow: hidden; border-radius: 50%; }

.pd-callouts { list-style: none; margin: 0; padding: 0; }
.pd-callout { margin: 0; }
.pd-lead { position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 2 / 1; overflow: visible; pointer-events: none; }
.pd-callout__box { position: absolute; margin: 0; display: grid; gap: 2px; min-width: 0; }
.pd-callout__v { overflow-wrap: anywhere; }

.pd-tb { grid-area: tb; position: relative; z-index: 3; min-width: 0; }
.pd-seal { position: absolute; z-index: 4; pointer-events: none; overflow: visible; }

/* ---- bands, the features stage, the flow */
.pd-band { position: relative; }
.pd-stage { position: relative; }
.pd-stage .wl-features { position: relative; }
/* The stage's object image (pfp, else product shot, else hero) is wired HERE, at the site
   root: site-v2.js writes a relative url() into --wl-bg-img, and a url() read through
   var() resolves against the stylesheet that reads it (variants/ would 404). A skin
   styles this pseudo-element with longhands only and never repeats the image. */
.pd-stage .wl-features::before {
  background-image: var(--wl-bg-img);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.pd-stage.wl-bg--none .wl-features::before { background-image: none; }
.pd-flow { padding-bottom: clamp(72px, 10vw, 140px); }
.pd-footer { position: relative; padding: 36px var(--v-pad-x) 48px; }

/* ---- tablet: the top bar keeps only what fits */
@media (max-width: 1080px) {
  .pd-top__nav { display: none; }
  .pd-top__cta { margin-left: auto; }
}

/* ---- phone: one column, callouts listed under the art, nothing absolutely placed */
@media (max-width: 760px) {
  .pd-app { --pd-top-h: 52px; }
  .pd-hero {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas: "copy" "object" "tb";
    min-height: 0;
    padding-top: 32px;
    padding-bottom: 36px;
  }
  .pd-object { width: 100%; }
  .pd-callouts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
  .pd-callout__box { position: static; }
  .pd-lead { display: none; }
  .pd-seal { display: none; }
  .pd-brand__tick { display: none; }
}