/* ==========================================================================
   Hay Ink, product pages
   Page specific bits only. Everything else (tokens, reset, buttons, eyebrow,
   nav, footer, reveals) comes from ../css/style.css, which loads first.
   Prefix: .pd-  |  Mobile first: base rules are the phone layout.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. HERO
   -------------------------------------------------------------------------- */
.pd-hero {
  background: var(--ink);
  padding: 118px 0 clamp(52px, 7vw, 92px);
}

.pd-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

/* Breadcrumb ------------------------------------------------------------- */
.pd-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: clamp(24px, 3vw, 38px);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  /* soft, not mute: this is 11px text on ink, and mute lands under 3:1 */
  color: var(--on-dark-soft);
}
.pd-crumb a { transition: color .25s var(--ease); }
.pd-crumb a:hover { color: var(--on-dark); }
.pd-crumb-sep { opacity: .5; }
.pd-crumb-now { color: var(--on-dark-soft); }

.pd-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 4.6vw, 58px);
  line-height: 1.04;
  letter-spacing: -.035em;
  color: var(--on-dark);
  margin-bottom: 22px;
}

.pd-lead {
  font-size: clamp(15.5px, 1.3vw, 18px);
  line-height: 1.72;
  color: var(--on-dark-soft);
  max-width: 46ch;
  margin-bottom: clamp(28px, 3vw, 38px);
}

/* Fact grid. Four verified numbers, hairline ruled, never a card row. */
.pd-spec {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--hair-dark);
  border: 1px solid var(--hair-dark);
  margin-bottom: clamp(28px, 3vw, 38px);
}
.pd-spec li {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 16px 18px;
  background: var(--ink);
}
.pd-spec-k {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--on-dark-soft);
}
.pd-spec-v {
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--on-dark);
}

.pd-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.pd-hero-actions .btn { flex: 1 1 auto; }   /* full width pair on a phone */

/* --------------------------------------------------------------------------
   2. HERO GALLERY, front and back
   The stage cross fades the two renders. The button beside it is the back
   render: hover previews the swap on a fine pointer, click pins it (js).
   With no JS at all the front stays on the stage and the back is still
   visible in the button, so nothing is hidden from anyone.
   -------------------------------------------------------------------------- */
.pd-gallery { display: flex; flex-direction: column; gap: 14px; }

.pd-stage {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--panel-2);
  border: 1px solid var(--hair-dark);
}
.pd-face {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: opacity .5s var(--ease);
}
.pd-face--back { opacity: 0; }
.pd-gallery.is-back .pd-face--front { opacity: 0; }
.pd-gallery.is-back .pd-face--back  { opacity: 1; }

/* The flip control ------------------------------------------------------- */
.pd-flip {
  display: flex;
  align-items: center;
  gap: 14px;
  align-self: flex-start;
  padding: 10px 20px 10px 10px;
  background: var(--panel-2);
  border: 1px solid var(--hair-dark);
  cursor: pointer;
  text-align: left;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.pd-flip:hover { border-color: rgba(246, 244, 240, .3); background: var(--panel); }

.pd-flip-thumb {
  position: relative;
  flex: 0 0 auto;
  width: 62px;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--panel);
}
.pd-flip-thumb img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: opacity .5s var(--ease);
}
.pd-flip-thumb .pd-face--front { opacity: 0; }
.pd-flip-thumb .pd-face--back  { opacity: 1; }
.pd-gallery.is-back .pd-flip-thumb .pd-face--front { opacity: 1; }
.pd-gallery.is-back .pd-flip-thumb .pd-face--back  { opacity: 0; }

.pd-flip-text { display: flex; flex-direction: column; gap: 4px; }
.pd-flip-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--on-dark);
}
.pd-flip-hint {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--on-dark-soft);
}
.pd-gallery:not(.is-back) .pd-when-back  { display: none; }
.pd-gallery.is-back      .pd-when-front { display: none; }

/* Hover preview. :has lets the button drive the stage that sits before it.
   Where :has is missing the click path still works, so nothing is lost.

   .pd-hold is set by product.js on click and cleared when the pointer leaves
   the button. Without it, clicking while hovering pinned the new side and the
   hover rule immediately previewed the old one back: the stage showed the
   front while the button had already relabelled itself "See the front". */
@media (hover: hover) and (pointer: fine) {
  .pd-gallery:not(.is-back):not(.pd-hold):has(.pd-flip:hover) .pd-face--front { opacity: 0; }
  .pd-gallery:not(.is-back):not(.pd-hold):has(.pd-flip:hover) .pd-stage .pd-face--back { opacity: 1; }
  .pd-gallery.is-back:not(.pd-hold):has(.pd-flip:hover) .pd-stage .pd-face--front { opacity: 1; }
  .pd-gallery.is-back:not(.pd-hold):has(.pd-flip:hover) .pd-stage .pd-face--back  { opacity: 0; }
}

/* Dark art plate: the stand in for the one page with no garment render. */
.pd-plate {
  position: relative;
  overflow: hidden;
  background: var(--panel-2);
  border: 1px solid var(--hair-dark);
  padding: clamp(28px, 3.4vw, 44px);
  min-height: clamp(260px, 34vw, 380px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
}
.pd-plate::after {
  content: '';
  position: absolute;
  right: -8%;
  bottom: -20%;
  width: 92%;
  aspect-ratio: 1543 / 2183;
  background: url('../assets/photos/chechu-art.webp') right bottom / contain no-repeat;
  filter: grayscale(1) brightness(0) invert(1);
  opacity: .12;
  -webkit-mask-image: radial-gradient(120% 90% at 100% 100%, #000 30%, transparent 78%);
          mask-image: radial-gradient(120% 90% at 100% 100%, #000 30%, transparent 78%);
  pointer-events: none;
}
.pd-plate > * { position: relative; z-index: 1; }
.pd-plate-k {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--on-dark-soft);
}
.pd-plate-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
}
.pd-plate-list li {
  font-size: 12.5px;
  letter-spacing: .02em;
  color: rgba(246, 244, 240, .78);
  padding: 7px 14px;
  border: 1px solid rgba(246, 244, 240, .16);
  border-radius: 100px;
}

/* --------------------------------------------------------------------------
   3. PRINT METHODS, cream band
   Ruled rows, in the same staircase family as the homepage steps. Never a
   row of identical icon cards.
   -------------------------------------------------------------------------- */
.pd-methods { padding: var(--sec-y) 0; }

.pd-method-list { border-top: 1px solid var(--hair-cream); }
.pd-method {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding: clamp(22px, 2.6vw, 34px) 0;
  border-bottom: 1px solid var(--hair-cream);
}
.pd-method-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(17px, 1.5vw, 21px);
  letter-spacing: -.02em;
  line-height: 1.2;
  color: var(--on-cream);
}
.pd-method-desc {
  font-size: 15px;
  line-height: 1.72;
  color: var(--on-cream-soft);
  max-width: 58ch;
}

.pd-note {
  margin-top: clamp(28px, 3vw, 40px);
  padding-left: 18px;
  border-left: 1px solid rgba(26, 26, 26, .22);
  font-size: 14.5px;
  line-height: 1.72;
  color: var(--on-cream-soft);
  max-width: 62ch;
}

/* --------------------------------------------------------------------------
   4. ADD YOUR PRINT, dark band
   -------------------------------------------------------------------------- */
.pd-add { background: var(--void); padding: var(--sec-y) 0; }
.pd-add-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(36px, 5vw, 84px);
  align-items: start;
}
/* The intro column is narrow and Lexend Mega is wide, so this headline takes a
   step down the scale, the same way the homepage quote block does. */
.pd-add .sec-title {
  font-size: clamp(24px, 2.9vw, 38px);
  max-width: 20ch;
}
.pd-add-note {
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--on-dark-soft);
  max-width: 42ch;
  margin: 22px 0 30px;
}

.pd-flow { border-top: 1px solid var(--hair-dark); }
.pd-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(18px, 2.4vw, 36px);
  align-items: start;
  padding: clamp(20px, 2.4vw, 30px) 0;
  border-bottom: 1px solid var(--hair-dark);
}
.pd-step-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 34px);
  line-height: .95;
  letter-spacing: -.05em;
  color: var(--teal);
  opacity: .6;
}
.pd-step h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--h3);
  letter-spacing: -.02em;
  color: var(--on-dark);
  margin-bottom: 8px;
}
.pd-step p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--on-dark-soft);
  max-width: 54ch;
}

.pd-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: clamp(28px, 3vw, 40px);
}
.pd-actions .btn { flex: 1 1 240px; }

.pd-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 22px;
  font-size: 14px;
  color: var(--on-dark-soft);
}
.pd-contact a { color: var(--on-dark); transition: color .25s var(--ease); }
.pd-contact a:hover { color: var(--teal); }

/* --------------------------------------------------------------------------
   5. ALSO AVAILABLE, cream band
   -------------------------------------------------------------------------- */
.pd-also { padding: var(--sec-y) 0; }
.pd-also-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 1.4vw, 20px);
}
.pd-also-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid rgba(26, 26, 26, .07);
  overflow: hidden;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.pd-also-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 46px rgba(26, 26, 26, .1);
  border-color: rgba(26, 26, 26, .14);
}
.pd-also-media {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--cream-deep);
}
.pd-also-media img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease);
}
.pd-also-card:hover .pd-also-media img { transform: scale(1.03); }

.pd-also-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 20px 20px;
  flex: 1 1 auto;
}
.pd-also-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13.5px;
  line-height: 1.25;
  letter-spacing: -.02em;
  color: var(--on-cream);
}
.pd-also-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  padding-top: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--teal-deep);
}
.pd-also-cta .ico { font-size: 14px; transition: transform .4s var(--ease); }
.pd-also-card:hover .pd-also-cta .ico { transform: translateX(4px); }

/* The one non garment card has no render, so it takes the dark treatment the
   homepage gives the same tile. */
.pd-also-card--dark { background: var(--graphite); border-color: var(--graphite); }
.pd-also-card--dark .pd-also-name { color: var(--cream); }
.pd-also-card--dark .pd-also-cta  { color: var(--teal); }
.pd-also-media--art { background: #141414; }
.pd-also-media--art::after {
  content: '';
  position: absolute;
  right: -10%;
  bottom: -14%;
  width: 84%;
  aspect-ratio: 1543 / 2183;
  background: url('../assets/photos/chechu-art.webp') right bottom / contain no-repeat;
  filter: grayscale(1) brightness(0) invert(1);
  opacity: .1;
  -webkit-mask-image: radial-gradient(120% 90% at 100% 100%, #000 30%, transparent 78%);
          mask-image: radial-gradient(120% 90% at 100% 100%, #000 30%, transparent 78%);
}

/* --------------------------------------------------------------------------
   6. UP, tablet and desktop
   -------------------------------------------------------------------------- */
@media (min-width: 700px) {
  /* copy runs the full wrap here, so the four facts fit on one line */
  .pd-spec { grid-template-columns: repeat(4, 1fr); }
  .pd-method { grid-template-columns: 5fr 7fr; gap: clamp(20px, 3vw, 48px); }
  .pd-also-grid { grid-template-columns: repeat(3, 1fr); }
  .pd-also-name { font-size: 15px; }
  .pd-hero-actions .btn { flex: 0 0 auto; }
}

@media (min-width: 1000px) {
  .pd-hero { padding: 148px 0 clamp(64px, 7vw, 104px); }
  .pd-hero-grid { grid-template-columns: 6fr 6fr; gap: clamp(40px, 5vw, 88px); }
  /* copy is back to half the wrap, so two by two keeps every value on one line */
  .pd-spec { grid-template-columns: repeat(2, 1fr); }
  .pd-add-grid { grid-template-columns: 4.6fr 7.4fr; }
  .pd-also-grid { grid-template-columns: repeat(5, 1fr); }
  /* staircase, so the flow is not four identical rows */
  .pd-step:nth-child(2) { padding-left: clamp(0px, 3vw, 44px); }
  .pd-step:nth-child(3) { padding-left: clamp(0px, 6vw, 88px); }
  .pd-step:nth-child(4) { padding-left: clamp(0px, 9vw, 132px); }
}

/* --------------------------------------------------------------------------
   7. REDUCED MOTION
   ../css/style.css already flattens durations globally. These make the intent
   explicit for the parts this file adds.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .pd-face,
  .pd-flip-thumb img,
  .pd-also-media img { transition: none; }
  .pd-also-card:hover { transform: none; }
  .pd-also-card:hover .pd-also-media img { transform: none; }
  .pd-also-card:hover .pd-also-cta .ico { transform: none; }
}