/* ================================================================
   PDP ART: the product page as Matisse and Pollock, around true photographs.
   Loaded last, after art.css. Drawn by assets/js/pdp-art.js.
   --pda-cov    the chosen covering, cut flat
   --pda-field  a tone of the covering's hue: the field behind the mat and the story grounds
   Every shape here sits in its own space, behind the mat or beside the words: never over
   the photograph, the type or a control.
   ================================================================ */
html[data-page="product"] { --pda-study-h: 128px; --pda-ease: cubic-bezier(.4, 0, .2, 1); }

/* ---------------- the wall: the field, the mat, the paper cut ---------------- */
html[data-page="product"] .pdp-hero.fv-field > .pda-wall {
  grid-column: 2; grid-row: 1; position: relative; z-index: 2; isolation: isolate;
  justify-self: center; align-self: start; box-sizing: border-box;
  width: min(100%, calc(100svh - var(--pd-vis, 138px) - var(--pda-study-h) - 70px));
  margin-top: clamp(8px, 1.4vw, 22px);
  display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 14px;
}
html[data-page="product"] .pdp-hero.fv-field > .pda-wall:has(> .pd-frame.pd-wide) { width: 100%; }
@media (min-width: 1024px) {
  html[data-page="product"] .pdp-hero.fv-field > .pda-wall { position: sticky; top: calc(var(--header-h, 68px) + 24px); }
}
html[data-page="product"] .pdp-hero.fv-field > .pda-wall > .pd-frame {
  position: relative !important; top: auto !important; margin: 0 !important; z-index: 2; grid-column: 1 !important; grid-row: auto !important;
  width: 100% !important; max-width: none !important; justify-self: stretch; align-self: start;
}

/* the field: one large cut shape behind the mat, reaching down behind the paper cut */
html[data-page="product"] .pda-field {
  position: absolute; z-index: 0; left: calc(-1 * min(14%, var(--pda-room, 40px))); right: -5%; top: 16%; bottom: -30px;
  width: auto; height: auto; overflow: visible; pointer-events: none;
}
html[data-page="product"] .pda-field path { fill: var(--pda-field, #e7dcc6); transition: fill .8s var(--pda-ease); }
/* the house's accents, tucked behind the mat so only their edges show */
html[data-page="product"] .pda-sun {
  position: absolute; z-index: 1; top: -30px; right: -30px; width: 96px; height: 96px; pointer-events: none;
}
html[data-page="product"] .pda-sun path { fill: var(--art-yellow, #f2c230); }
html[data-page="product"] .pda-leaf {
  position: absolute; z-index: 1; left: calc(-1 * min(58px, var(--pda-room, 40px))); top: 30%; width: 74px; height: auto; pointer-events: none; overflow: visible;
}
html[data-page="product"] .pda-leaf path { fill: var(--art-cobalt, #1e3fa6); }

/* the paper cut: the piece in its covering, at a common scale, beside its caption */
html[data-page="product"] .pda-study {
  position: relative; z-index: 3; box-sizing: border-box; height: var(--pda-study-h);
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 22px; align-items: end;
  padding: 0 4px 12px 7%;
}
html[data-page="product"] .pda-cutbox { height: 100%; min-width: 0; display: flex; align-items: flex-end; justify-content: flex-start; }
html[data-page="product"] .pda-cut {
  display: block; flex: none; max-width: 100%; max-height: 100%; overflow: visible;
  transition: width .5s var(--pda-ease), height .5s var(--pda-ease);
}
html[data-page="product"] .pda-cut .pda-c { fill: var(--pda-cov, #d8cbb4); transition: fill .6s var(--pda-ease); }
html[data-page="product"] .pda-cut .pda-cs { fill: none; stroke: var(--pda-cov, #d8cbb4); transition: stroke .6s var(--pda-ease); }
html[data-page="product"] .pda-cut .pda-k { fill: var(--art-ink, #121212); }
html[data-page="product"] .pda-cut .pda-ks { fill: none; stroke: var(--art-ink, #121212); }
html[data-page="product"] .pda-cut .pda-p { fill: var(--art-mat, #fbf9f4); }
html[data-page="product"] .pda-cap {
  margin: 0; display: grid; gap: 3px; min-width: 0; align-self: center;
  font: 400 12.5px/1.35 var(--art-sans, Inter, sans-serif);
}
html[data-page="product"] .pda-study .pda-cap, html[data-page="product"] .pda-study .pda-cap * { color: var(--art-ink, #121212) !important; -webkit-text-fill-color: var(--art-ink, #121212) !important; text-shadow: none !important; }
html[data-page="product"] .pda-cap-k { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; }
html[data-page="product"] .pda-cap-cov {
  font-family: var(--art-serif, Georgia, serif); font-weight: 400; font-size: 19px; letter-spacing: -.015em; line-height: 1.1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html[data-page="product"] .pda-rule { display: block; height: 2px; margin: 8px 0 4px; background: rgba(18, 18, 18, .18); }
html[data-page="product"] .pda-rule i { display: block; height: 100%; background: var(--art-ink, #121212); transition: width .5s var(--pda-ease); }
html[data-page="product"] .pda-cap-w { font-weight: 500; font-variant-numeric: tabular-nums; }

/* ---------------- the signature under the name ---------------- */
/* the signature's band is won back from the hero's top margin, so the price and the action
   stay on the first screen exactly where they were */
html[data-page="product"] .pdp-hero.fv-field { padding-top: calc(var(--pd-over, 0px) + clamp(6px, 1vh, 16px)) !important; }
html[data-page="product"] .pdp-hero.fv-field .copy { gap: clamp(14px, 2vh, 24px) !important; }
html[data-page="product"] .pdp-hero .pda-sign {
  display: block; width: min(100%, 400px); height: 28px; margin: 6px 0 0; overflow: visible; pointer-events: none;
}
html[data-page="product"] .pdp-hero .pda-sign + .by { margin-top: 4px !important; }
html[data-page="product"] .pda-sign path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
html[data-page="product"] .pda-sign-ink { stroke: var(--art-ink, #121212); stroke-width: 2.2px; }
html[data-page="product"] .pda-sign-thread { stroke-width: 1.5px; }
html[data-page="product"] .pda-drop { fill: var(--art-ink, #121212); }
@media (prefers-reduced-motion: no-preference) {
  html[data-page="product"] .pda-sign:not(.pda-still) path { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
  html[data-page="product"] .pda-sign:not(.pda-still) .pda-drop { opacity: 0; }
  html[data-page="product"] .pda-sign.pda-drawn .pda-sign-ink { animation: pda-draw 1.7s cubic-bezier(.55, .05, .3, 1) .15s forwards; }
  html[data-page="product"] .pda-sign.pda-drawn .pda-sign-thread { animation: pda-draw 1.5s cubic-bezier(.55, .05, .3, 1) .6s forwards; }
  html[data-page="product"] .pda-sign.pda-drawn .pda-drop { animation: pda-drop .35s ease-out 1.7s forwards; }
}
@keyframes pda-draw { to { stroke-dashoffset: 0; } }
@keyframes pda-drop { to { opacity: 1; } }

/* ---------------- the story: gallery panels ---------------- */
html[data-page="product"] .pda-story .pda-panel {
  display: flex; align-items: flex-end; gap: 22px; margin: 0 0 clamp(24px, 3vw, 44px);
}
html[data-page="product"] .pda-ground { position: relative; display: block; flex: none; width: clamp(104px, 10vw, 152px); aspect-ratio: 1 / 1; }
html[data-page="product"] .pda-ground svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
html[data-page="product"] .pda-ground-p { fill: var(--pda-field, #e7dcc6); transition: fill .8s var(--pda-ease); }
html[data-page="product"] .pda-figure path { fill: var(--pda-cov, #d8cbb4); transition: fill .6s var(--pda-ease); }
html[data-page="product"] .pda-n {
  font-family: var(--art-serif, Georgia, serif); font-weight: 400; font-size: clamp(48px, 4.6vw, 76px);
  line-height: .8; letter-spacing: -.03em; color: var(--art-ink, #121212); font-variant-numeric: lining-nums;
}

/* ---------------- one poured line through How it's made ---------------- */
html[data-page="product"] .pda-made { position: relative; padding-left: 34px; }
html[data-page="product"] .pda-made > .cm-made { margin-top: 22px; }
html[data-page="product"] .pda-pour {
  position: absolute; left: 0; top: 22px; width: 22px; overflow: visible; pointer-events: none; color: var(--art-pour-ink, #121212);
}
html[data-page="product"] .pda-pour-p {
  fill: none; stroke: currentColor; stroke-width: var(--art-pour-w, 1.6px);
  stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke;
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html[data-page="product"] .pda-pour-p {
      stroke-dasharray: 1 1; stroke-dashoffset: 1;
      animation: pda-draw linear both; animation-timeline: view(); animation-range: entry 10% cover 55%;
    }
  }
}

/* ---------------- smaller screens ---------------- */
@media (max-width: 940px) {
  html[data-page="product"] { --pda-study-h: 96px; }
  html[data-page="product"] .pdp-hero.fv-field > .pda-wall { grid-column: 1; grid-row: 1; width: min(100%, 560px); margin-top: 8px; }
  html[data-page="product"] .pdp-hero.fv-field > .pda-wall:has(> .pd-frame.pd-wide) { width: min(100%, 640px); }
  html[data-page="product"] .pda-sun { width: 64px; height: 64px; top: -18px; right: -14px; }
  html[data-page="product"] .pda-leaf { width: 34px; left: -22px; }
  html[data-page="product"] .pda-field { left: -4%; right: -3%; }
  html[data-page="product"] .pda-study { gap: 14px; padding-left: 3%; }
}
@media (max-width: 560px) {
  html[data-page="product"] .pda-cap-cov { font-size: 16px; }
  html[data-page="product"] .pda-cap-k { font-size: 11px; letter-spacing: .1em; }
  html[data-page="product"] .pdp-hero .pda-sign { width: min(100%, 300px); height: 24px; margin-top: 8px; }
  html[data-page="product"] .pda-story .pda-panel { gap: 16px; margin-bottom: 18px; }
  html[data-page="product"] .pda-ground { width: 88px; }
  html[data-page="product"] .pda-n { font-size: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-page="product"] .pda-sign path, html[data-page="product"] .pda-pour-p { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; animation: none !important; }
  html[data-page="product"] .pda-sign .pda-drop { opacity: 1 !important; }
}