/* All-in-One product page — builds on main.css */

:root { --pdp-accent: #435239; }

/* ---------- hero ---------- */
.pdp-hero { max-width: 1280px; margin: 0 auto; padding: 150px 24px 70px;
  display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.pdp-hero__text .eyebrow { margin-bottom: 14px; }
.pdp-hero h1 { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: clamp(40px, 5.2vw, 72px);
  line-height: 1.02; letter-spacing: -0.015em; }
.pdp-value { margin: 22px 0 0; font-size: clamp(16px, 1.45vw, 19px); line-height: 1.6; color: var(--dim); max-width: 46ch; }
.pdp-sale { display: inline-flex; align-items: center; gap: 9px; margin-top: 24px; padding: 7px 14px 7px 7px;
  font-size: 13px; font-weight: 600; color: var(--ink);
  background: rgba(194, 19, 14, 0.07); border: 1px solid rgba(194, 19, 14, 0.22); border-radius: 100px; }
.pdp-sale__tag { font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em; color: #fff;
  background: #C2130E; padding: 4px 9px; border-radius: 100px; }
.pdp-price { display: flex; align-items: baseline; gap: 12px; margin-top: 18px; }
.pdp-price__sale { font-family: 'Instrument Serif', serif; font-size: 44px; line-height: 1; color: var(--ink); }
.pdp-price__was { font-size: 19px; color: var(--dim); text-decoration: line-through; }
.pdp-ctas { margin-top: 24px; display: flex; gap: 12px; flex-wrap: wrap; }
.btn-buy { font-size: 16px; padding: 16px 30px; }
.pdp-under { margin-top: 16px; font-size: 13.5px; color: var(--dim); }
.pdp-hero__extras { grid-column: 1 / -1; }
.pdp-trust { list-style: none; padding: 0; margin: 0; display: grid;
  grid-template-columns: repeat(4, 1fr); gap: 14px; }
.pdp-trust li { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px;
  background: var(--glass); border: 1px solid var(--edge); border-radius: 16px; }
.pdp-trust__i { font-size: 22px; line-height: 1; }
.pdp-trust b { font-size: 16px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.pdp-trust small { font-size: 13.5px; color: var(--dim); line-height: 1.4; white-space: nowrap; }
@media (max-width: 760px) { .pdp-trust { grid-template-columns: repeat(2, 1fr); }
  .pdp-trust b, .pdp-trust small { white-space: normal; } }
.confidence-sheet { text-align: center; }
.confidence-sheet h2 { margin: 6px auto 0; }
.confidence-sheet > p { margin: 16px auto 0; max-width: 58ch; color: var(--dim);
  font-size: clamp(15px, 1.4vw, 17px); line-height: 1.65; }
.confidence-points { list-style: none; padding: 0; margin: 26px 0 0; display: flex;
  flex-wrap: wrap; justify-content: center; gap: 10px 12px; }
.confidence-points li { display: inline-flex; align-items: center; gap: 8px; font-size: 13px;
  font-weight: 600; color: var(--ink); background: var(--glass); border: 1px solid var(--edge);
  border-radius: 100px; padding: 9px 16px; }
.confidence-points li span { font-size: 15px; }
.pairs-wrap { text-align: center; }
.pairs-row { margin: 30px auto 0; max-width: 920px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.pairs-card { display: flex; flex-direction: column; background: var(--glass); border: 1px solid var(--edge);
  border-radius: 18px; overflow: hidden; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.pairs-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.pairs-card__shot { aspect-ratio: 16 / 10; overflow: hidden; background: #f4f3f0;
  border-top: 3px solid var(--card-accent, var(--ink)); }
.pairs-card__shot img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.pairs-card__body { padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; text-align: left; }
.pairs-card__body h4 { font-size: 15px; font-weight: 700; color: var(--ink); margin: 0; }
.pairs-card__price { font-size: 14px; font-weight: 600; color: var(--dim); }
@media (max-width: 720px) { .pairs-row { grid-template-columns: 1fr; max-width: 380px; } }
.pdp-includes { list-style: none; padding: 0; margin: 16px 0 0; display: flex;
  flex-wrap: wrap; gap: 9px 10px; align-content: flex-start; }
.pdp-includes li { font-size: 13.5px; font-weight: 600; color: var(--ink);
  background: var(--glass); border: 1px solid var(--edge); border-radius: 100px; padding: 7px 14px;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }

/* ---------- variant selector (AI coach × themes) ---------- */
.pdp-variant { margin: 24px 0 0; max-width: 440px; display: flex; flex-direction: column; gap: 16px;
  background: var(--glass); border: 1px solid var(--edge); border-radius: 20px; padding: 20px;
  backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); }
.pdp-variant__opt { display: flex; flex-direction: column; gap: 8px; }
.pdp-variant__label { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--dim); }
.pdp-seg { display: flex; width: 100%; gap: 4px; background: rgba(255,255,255,0.5);
  border: 1px solid var(--edge); border-radius: 100px; padding: 4px; }
.pdp-seg button { flex: 1; border: none; background: transparent; font: inherit; font-size: 13.5px; font-weight: 600;
  color: var(--dim); padding: 9px 10px; border-radius: 100px; cursor: pointer; white-space: nowrap;
  transition: background .2s, color .2s; }
.pdp-seg button.is-on { background: var(--pdp-accent); color: #fff; }
.pdp-variant__themes { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; padding-top: 2px; }
.pdp-variant__pick { font-size: 12.5px; font-weight: 600; color: var(--dim); margin-right: 2px; }
.pdp-variant__themes [data-theme] { width: 26px; height: 26px; border-radius: 8px; background: var(--cc);
  border: 1px solid rgba(255,255,255,0.85); cursor: pointer; box-shadow: 0 3px 9px rgba(30,40,60,0.2);
  transition: transform .15s; }
.pdp-variant__themes [data-theme]:hover { transform: translateY(-2px); }
.pdp-variant__themes [data-theme].is-on { outline: 2.5px solid var(--ink); outline-offset: 2px; }
.pdp-variant__summary { margin-top: 10px; font-size: 13px; color: var(--dim); }

/* hero cover (the themed device) */
.pdp-hero__visual { perspective: 1500px; }
.pdp-cover { border-radius: 18px; padding: 18px 18px 20px; color: #fff;
  background: linear-gradient(150deg, var(--pdp-accent), color-mix(in srgb, var(--pdp-accent), #000 32%));
  box-shadow: 0 40px 90px rgba(30,40,60,0.28); transition: background .5s;
  transform: rotateY(-7deg) rotateX(3deg); transform-style: preserve-3d; }
.pdp-cover__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.pdp-cover__name { font-family: 'Instrument Serif', serif; font-size: clamp(18px, 1.8vw, 24px); }
.pdp-cover__meta { font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,0.78); white-space: nowrap; }
.pdp-cover__shot { background: #fff; border: 5px solid #fff; border-radius: 9px; overflow: hidden; box-shadow: 0 18px 40px rgba(0,0,0,0.3);
  aspect-ratio: 2.16 / 1; }
/* zoom from top-left so the content fills the width; the empty right margin (sheet
   scrollbar) and the bottom crop off — see --shot-zoom */
.pdp-cover__shot img { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block;
  border-radius: 5px; transition: opacity .3s; transform: scale(var(--shot-zoom, 1.07)); transform-origin: top left; }

/* ---------- theme switcher ---------- */
.pdp-themes__head { max-width: 60ch; margin: 0 auto; text-align: center; }
.pdp-themes__head h2 { font-size: clamp(30px, 4vw, 52px); margin: 8px 0 12px; }
.pdp-themes__head p { font-size: 16px; line-height: 1.6; color: var(--dim); }
.pdp-themes__demo { margin-top: 36px; text-align: center; }
.pdp-themes__shot { max-width: 920px; margin: 0 auto; background: #fff; border: 6px solid #fff; border-radius: 16px;
  box-shadow: 0 0 0 1px var(--edge), 0 26px 60px rgba(30,40,60,0.2); overflow: hidden; aspect-ratio: 2.16 / 1; }
.pdp-themes__shot img { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block;
  border-radius: 11px; transition: opacity .3s; transform: scale(var(--shot-zoom, 1.07)); transform-origin: top left; }
.pdp-chips { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin: 26px 0 16px; }
.pdp-chip { width: 50px; height: 50px; border-radius: 15px; background: var(--cc);
  border: 1px solid rgba(255,255,255,0.85); box-shadow: 0 6px 20px rgba(30,40,60,0.22);
  transition: transform .18s; position: relative; }
.pdp-chip:hover { transform: translateY(-5px) scale(1.07); }
.pdp-chip.active { outline: 2.5px solid var(--ink); outline-offset: 3px; }
.pdp-chip::after { content: attr(data-name); position: absolute; top: -36px; left: 50%; transform: translateX(-50%);
  font-size: 11.5px; font-weight: 500; white-space: nowrap; background: var(--ink); color: #fff;
  padding: 5px 11px; border-radius: 8px; opacity: 0; transition: opacity .18s; pointer-events: none; }
.pdp-chip:hover::after { opacity: 1; }
.pdp-chips__label { font-size: 14px; color: var(--dim); }
.pdp-chips__label b { color: var(--ink); }

/* ---------- what's inside (tab walkthrough) ---------- */
.pdp-inside { max-width: 1180px; margin: 0 auto; padding: 64px 24px 28px; }
.pdp-inside__head { text-align: center; }
.pdp-inside__head h2 { font-size: clamp(32px, 4.4vw, 56px); margin: 8px auto 0; max-width: 20ch; }
.pdp-tabs { margin-top: 56px; display: flex; flex-direction: column; gap: clamp(40px, 6vw, 88px); }
.pdp-tab-row { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
/* reversed rows mirror the column widths so the screenshot keeps the wider 1.15fr
   column on both sides — otherwise right-hand images render narrower than left */
.pdp-tab-row--rev { grid-template-columns: 1fr 1.15fr; }
.pdp-tab-row--rev .pdp-tab-shot { order: 2; }
.pdp-tab-shot { background: #fff; border: 6px solid #fff; border-radius: 14px;
  box-shadow: 0 0 0 1px var(--edge), 0 26px 60px rgba(30,40,60,0.2); overflow: hidden; aspect-ratio: 2.16 / 1; }
.pdp-tab-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block;
  border-radius: 9px; transition: opacity .3s; transform: scale(var(--shot-zoom, 1.07)); transform-origin: top left; }
.pdp-tab-num { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: var(--pdp-accent); color: #fff; font-family: 'Instrument Serif', serif; font-size: 18px;
  margin-bottom: 14px; transition: background .5s; }
.pdp-tab-text h3 { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: clamp(26px, 3vw, 40px);
  line-height: 1.08; letter-spacing: -0.01em; margin-bottom: 12px; }
.pdp-tab-text p { font-size: 16.5px; line-height: 1.6; color: var(--dim); max-width: 44ch; }
.pdp-inside__close { text-align: center; max-width: 30ch; margin: clamp(36px,5vw,52px) auto 0;
  font-family: 'Instrument Serif', serif; font-style: italic; font-size: clamp(23px, 2.8vw, 33px);
  line-height: 1.28; color: var(--ink); }

/* ---------- requirements ---------- */
.pdp-req__box { max-width: none; margin: 0 auto; padding: clamp(32px,4vw,56px);
  background: var(--glass); border: 1px solid var(--edge); border-radius: 28px;
  backdrop-filter: blur(22px) saturate(1.3); -webkit-backdrop-filter: blur(22px) saturate(1.3); box-shadow: var(--shadow); }
.pdp-req__box h2 { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: clamp(26px,3vw,36px); margin-bottom: 18px; }
.pdp-req__box ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.pdp-req__box li { position: relative; padding-left: 30px; font-size: 16px; line-height: 1.5; color: var(--ink); }
.pdp-req__box li::before { content: '✓'; position: absolute; left: 0; color: var(--pdp-accent); font-weight: 700; transition: color .5s; }

/* ---------- laptop mockups (shared) — recolouring screenshot behind a transparent-screen SVG ---------- */
.laptop { position: relative; aspect-ratio: 1794 / 1344; pointer-events: none;
  filter: drop-shadow(0 32px 55px rgba(20,30,50,0.26)); }
.laptop-screen { position: absolute; overflow: hidden; z-index: 1; }
.laptop-screen img { width: 100%; height: 100%; object-fit: cover; display: block;
  border: none; border-radius: 0; box-shadow: none; transition: opacity .3s; }
.laptop-frame { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; }
/* the laptop images carry no card chrome of their own (overrides .coach-shot img) */
.laptop img { border: none; border-radius: 0; box-shadow: none; }

/* head-on: axis-aligned screen rectangle (measured from the SVG) */
.laptop--headon .laptop-screen { left: 15.5%; top: 14.6%; width: 68.55%; height: 57.3%; }
.laptop--headon .laptop-screen img { object-position: left top; }

/* angled: screen is a perspective quad — warped into place by matrix3d in product.js */
.laptop--angle .laptop-screen { left: 0; top: 0; width: 100%; height: 100%; transform-origin: 0 0; }
.laptop--angle .laptop-screen img { object-position: left top; }

/* ---------- AI coach placement: head-on laptop, ~half shown, bleeding off the right ---------- */
#coach .glass-sheet { position: relative; overflow: hidden; }
#coach .coach-grid { align-items: center; min-height: 520px; }
#coach .coach-text { position: relative; z-index: 2; }
#coach .coach-shot { position: static; }
/* width:auto + margin/transform reset undo main.css's homepage `.coach-shot .laptop`
   rules (width:125% etc.) that otherwise leak in here and distort the laptop's aspect ratio,
   knocking the screenshot out of alignment with the frame. */
#coach .laptop { position: absolute; bottom: -12%; right: -42%; height: 122%; width: auto;
  margin: 0; transform: none; z-index: 1; }

/* ---------- hero placement: laptop floating in the right column ---------- */
.pdp-hero__visual .laptop--angle { width: 128%; margin-left: -12%; }
.pdp-hero__visual .laptop--headon { width: 145%; margin-left: -22.5%; margin-top: 125px; }

/* ---------- everything inside (full inventory) ---------- */
.pdp-everything__head { max-width: 60ch; }
.pdp-everything__head h2 { font-size: clamp(30px, 4vw, 52px); margin: 8px 0 12px; }
.pdp-everything__head p { font-size: 16px; line-height: 1.6; color: var(--dim); }
.pdp-everything__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 36px; }
.pdp-col { background: rgba(255,255,255,0.5); border: 1px solid var(--edge); border-radius: 20px; padding: 24px 22px; }
.pdp-col h3 { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--pdp-accent);
  margin-bottom: 16px; transition: color .5s; }
.pdp-col ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pdp-col li { position: relative; padding-left: 24px; font-size: 15px; line-height: 1.4; color: var(--ink); }
.pdp-col li::before { content: '✓'; position: absolute; left: 0; color: var(--pdp-accent); font-weight: 700; font-size: 13px; transition: color .5s; }
.pdp-col li.pdp-hl { font-weight: 600; }
.pdp-col li.pdp-hl::before { content: '✦'; }
.pdp-everything__ai { margin-top: 28px; text-align: center; font-size: 17px; line-height: 1.6; color: var(--dim); max-width: 52ch; margin-left: auto; margin-right: auto; }
.pdp-everything__ai b { color: var(--ink); }
@media (max-width: 900px) { .pdp-everything__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pdp-everything__grid { grid-template-columns: 1fr; } }

.pdp-final-under { margin-top: 16px; font-size: 13px; color: rgba(255,255,255,0.62); }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .pdp-hero { grid-template-columns: 1fr; padding-top: 120px; }
  .pdp-cover { transform: none; }
  .coach-grid { grid-template-columns: 1fr; }
  .pdp-tab-row, .pdp-tab-row--rev { grid-template-columns: 1fr; }
  .pdp-tab-row--rev .pdp-tab-shot { order: 0; }

  /* laptops drop into normal flow, full width, below the text */
  #coach .glass-sheet { overflow: visible; }
  #coach .coach-grid { min-height: 0; }
  #coach .laptop { position: relative; right: auto; bottom: auto; height: auto; width: 100%;
    margin-top: 8px; }
  .pdp-hero__visual .laptop--angle,
  .pdp-hero__visual .laptop--headon { width: 100%; margin-left: 0; margin-top: 8px; }
}

/* "Coming soon" preview state for not-yet-live derivative planners */
.pdp-coming { margin: 6px 0 22px; }
.pdp-coming__badge { display:inline-block; font-size:12px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:#7B4399; background:rgba(123,67,153,.10);
  border:1px solid rgba(123,67,153,.22); padding:6px 13px; border-radius:999px; }
.pdp-coming__txt { margin:14px 0 0; font-size:16px; line-height:1.6; color:var(--dim); max-width:50ch; }

/* ===== See-it-in-action + companion-app section (Cash Stuffing) ===== */
.pdp-app { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 44px; align-items: center; }
.pdp-app__text { max-width: 60ch; }
.pdp-app__phone { display: flex; justify-content: center; }
.pdp-app__video { width: 100%; max-width: 300px; aspect-ratio: 9 / 16; height: auto; display: block;
  border-radius: 30px; background: #14171c; object-fit: cover;
  box-shadow: 0 26px 64px rgba(30, 40, 60, 0.22); }
.pdp-app__detail { margin: 40px 0 0; }
.pdp-app__detail img { width: 100%; height: auto; display: block; border-radius: 16px;
  box-shadow: 0 20px 50px rgba(30, 40, 60, 0.16); }
.pdp-app__detail figcaption { text-align: center; color: var(--dim); font-size: 14.5px; margin-top: 16px; }
@media (max-width: 860px) {
  .pdp-app { grid-template-columns: 1fr; gap: 28px; }
  .pdp-app__phone { order: -1; }
  .pdp-app__video { max-width: 260px; }
}

/* ===== "What it's for" with a lifestyle image (Cash Stuffing) ===== */
.pdp-purpose { display: grid; grid-template-columns: 1fr 0.82fr; gap: 44px; align-items: center; }
.pdp-purpose__text { max-width: 64ch; }
.pdp-purpose__img { margin: 0; }
.pdp-purpose__img img { width: 100%; height: auto; display: block; border-radius: 18px;
  box-shadow: 0 24px 60px rgba(30, 40, 60, 0.18); }
@media (max-width: 860px) {
  .pdp-purpose { grid-template-columns: 1fr; gap: 26px; }
}

/* ===== Walkthrough video (All-in-One PDP) ===== */
.pdp-walk__head { max-width: 62ch; margin: 0 auto 28px; text-align: center; }
.pdp-walk__video { max-width: 900px; margin: 0 auto; border-radius: 18px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(30, 40, 60, 0.18); }
.pdp-walk__video video { width: 100%; height: auto; display: block; background: #000; }

/* ---- customer review / testimonial (Etsy social proof) ---- */
.pdp-review { margin: 30px auto 0; max-width: 62ch; padding: 22px 26px; text-align: left;
  background: var(--glass); border: 1px solid var(--edge); border-radius: 16px; }
.pdp-review__stars { color: #F5A623; font-size: 15px; letter-spacing: 3px; }
.pdp-review__quote { margin: 12px 0 0; font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic; font-size: 19px; line-height: 1.55; color: var(--ink); }
.pdp-review--full .pdp-review__quote { font-size: 17.5px; line-height: 1.6; }
.pdp-review__by { margin: 14px 0 0; font-size: 13px; font-weight: 600; color: var(--dim); }