/* ---------------------------------------------------
   New View Advice — store
   Loaded by /store/ and the workbook pages /store/p/<slug>/ (build.py adds the <link>).
   Uses the brand variables from style.css: --navy --blue --pink --light --rule --muted
--------------------------------------------------- */

/* ---------- store page (/store/), Oct 18 2026 ----------
   Cloud top with the title (like the listing pages), a "Workbooks" section heading, then
   one card per workbook: square cover, "Workbook · N pages", full title, price + "View Workbook",
   then "Overview +" underneath (opens the short description in place).
   Computer: three across. Phone: small square cover beside the title, the rest under it.
   Add another section later (e.g. Cards) with another .st-sec + .st-list. */
.st { max-width: var(--page); margin: 0 auto; padding: 0 var(--gutter) 90px; }
.st-head { padding: 44px 0 40px; background: var(--cloud);
  box-shadow: 0 0 0 100vmax var(--cloud); clip-path: inset(0 -100vmax); }   /* Cloud edge to edge */
.st-head h1 { font-size: clamp(32px, 4vw, 44px); font-weight: 700; letter-spacing: -.03em; line-height: 1.04; }
.st-sec { display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  border-bottom: 1px solid var(--rule); padding: 40px 0 12px; margin-bottom: 32px; }
.st-sec h2 { font-size: 22px; font-weight: 600; }
.st-sec span { font-size: 14px; color: var(--muted); }

.st-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; }
/* Each card spans 4 shared rows (cover, title, price, overview), so prices and buttons line up
   across the row however long the titles are, and opening one Overview doesn't move the others. */
.st-card { display: grid; grid-template-rows: subgrid; grid-row: span 4; margin-bottom: 44px; }
.st-cov { display: block; aspect-ratio: 1 / 1; border-radius: 6px; overflow: hidden; background: var(--cloud); }
.st-cov img { width: 100%; height: 100%; object-fit: cover; display: block; }   /* square crop keeps the cover's title box */
.st-name { padding-top: 16px; }
.st-lbl { font-size: 12px; font-weight: 600; color: var(--blue); }
.st-name h3 { font-size: 19px; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; margin-top: 6px; }
.st-name a:hover h3 { text-decoration: underline; text-underline-offset: 3px; }

.st-det { margin-top: 14px; align-self: start; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.st-det summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0; font-size: 14px; font-weight: 600; color: var(--navy); }
.st-det summary::-webkit-details-marker { display: none; }
.st-det summary::after { content: "+"; font-size: 20px; font-weight: 400; line-height: 1; color: var(--blue); }
.st-det[open] summary::after { content: "\2212"; }   /* minus sign when open */
.st-det p { font-size: 15px; line-height: 1.6; color: var(--muted); padding: 0 0 12px; }

.st-buy { display: flex; align-items: center; gap: 18px; padding-top: 16px; align-self: end; }
.st-price { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; }
.st-btn { background: var(--navy); color: #fff; border-radius: 4px; padding: 10px 18px; font-size: 14px; font-weight: 600; transition: background .15s; }
.st-btn:hover { background: var(--blue); }

/* 2 workbooks: two across (no empty third slot) */
@media (min-width: 861px) { .st-list:has(> .st-card:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (max-width: 860px) {
  .st-head { padding: 28px 0 24px; }
  .st-sec { padding-top: 30px; margin-bottom: 24px; }
  .st-list { grid-template-columns: 1fr; gap: 0; }
  .st-card { display: grid; grid-template-columns: 110px minmax(0, 1fr); grid-template-rows: none; grid-row: auto; column-gap: 18px;
    padding-bottom: 26px; margin-bottom: 26px; border-bottom: 1px solid var(--rule); }
  .st-card:last-child { border-bottom: 0; margin-bottom: 0; }
  .st-cov { grid-row: 1; }
  .st-name { align-self: center; padding: 0; }
  .st-name h3 { font-size: 18px; margin-top: 4px; }
  .st-det, .st-buy { grid-column: 1 / -1; }
  .st-buy { padding-top: 16px; }
  .st-det { margin-top: 16px; border-bottom: 0; }   /* the card's own divider closes it */
  .st-card { padding-bottom: 6px; }
}

/* ---------- workbook cards ("Other workbooks" on the workbook pages) ----------
   Not used on /store/ any more. Still has pink - phase out when the workbook pages
   come back (March 2027). */
.products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
@media (max-width: 900px) { .products { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
@media (max-width: 600px) { .products { grid-template-columns: 1fr; } }

.product {
  display: flex; flex-direction: column;
  background: rgba(255,255,255,.75);
  border: 1px solid var(--rule); border-radius: 16px; overflow: hidden;
  transition: border-color .15s, transform .15s;
}
.product:hover { border-color: rgba(7,8,79,.3); transform: translateY(-2px); }

/* 3:4 keeps the cover tall enough to actually read the title on it.
   The inline background colour comes from "tint" in the product's JSON, so the
   block still looks intentional while an image is missing or loading. */
.product .cover { aspect-ratio: 3 / 4; background: var(--pink); }
.product .cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

.product .pb { padding: 18px 18px 20px; display: flex; flex-direction: column; flex: 1; }
.product h2 { font-size: 18px; font-weight: 600; letter-spacing: -.015em; line-height: 1.25; }
.product p { font-size: 14px; color: var(--muted); margin-top: 8px; }
/* margin-top:auto pins the price and button to the bottom, so cards with
   different amounts of text still line up along the same baseline */
.product .price { margin-top: auto; padding-top: 14px; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.product .btn {
  margin-top: 12px; text-align: center;
  padding: 11px 16px; border-radius: 999px;
  background: var(--navy); color: #fff; font-size: 14px; font-weight: 600;
}
.product:hover .btn { background: var(--blue); }

/* ===================================================
   Individual product page (/store/p/<slug>/)
   =================================================== */

.product-page { max-width: var(--page-feed); margin: 0 auto; padding: 30px var(--gutter) 0; }

.crumbs { font-size: 13px; color: var(--muted); margin-bottom: 26px; }
.crumbs a { color: var(--blue); font-weight: 600; }
.crumbs a:hover { text-decoration: underline; }
.crumbs span[aria-hidden] { margin: 0 6px; }

/* ---------- cover + the buying decision ---------- */
.pp-top { display: grid; grid-template-columns: 300px 1fr; gap: 40px; align-items: start; }
@media (max-width: 760px) { .pp-top { grid-template-columns: 1fr; gap: 26px; } }

.pp-cover { border-radius: 16px; overflow: hidden; aspect-ratio: 3 / 4; border: 1px solid var(--rule); }
.pp-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pp-buy h1 { font-size: clamp(24px, 3.4vw, 34px); font-weight: 700; letter-spacing: -.025em; line-height: 1.15; text-wrap: balance; }

/* the one line that says who this is for - sits right under the title on purpose */
.pp-foryou {
  margin-top: 16px; padding: 12px 16px; border-radius: 12px;
  background: rgba(249,219,229,.55); font-size: 15px; line-height: 1.6;
}
.pp-foryou span { font-weight: 600; }

.pp-price { margin-top: 20px; font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }

.pp-btn {
  display: inline-block; margin-top: 16px;
  padding: 14px 32px; border-radius: 999px;
  background: var(--navy); color: #fff; font-weight: 600; font-size: 16px;
}
.pp-btn:hover { background: var(--blue); }
/* shown until buy_url is filled in - looks like a label, not a button you can press */
.pp-btn.is-off { background: rgba(7,8,79,.12); color: var(--muted); cursor: not-allowed; }

.pp-delivery { margin-top: 16px; font-size: 13px; color: var(--muted); line-height: 1.6; }

/* ---------- description ---------- */
.pp-body { max-width: var(--post); margin: 48px auto 0; }
.pp-body p { font-size: 17px; line-height: 1.75; margin-bottom: 18px; }

/* ---------- sample spreads ---------- */
.pp-samples, .pp-faq, .pp-others { max-width: var(--post); margin: 52px auto 0; }
.pp-samples h2, .pp-faq h2, .pp-others h2 {
  font-size: 14px; font-weight: 600; padding-bottom: 12px; margin-bottom: 22px;
  border-bottom: 2px solid var(--navy);
}
.sample-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 600px) { .sample-grid { grid-template-columns: repeat(2, 1fr); } }
.sample {
  display: block; padding: 0; width: 100%; cursor: zoom-in;
  background: none; border: 1px solid var(--rule); border-radius: 10px; overflow: hidden;
}
.sample img { width: 100%; height: auto; display: block; }
.sample:hover { border-color: var(--blue); }

/* ---------- the sample panel ----------
   A native <dialog>. Escape closes it, and the browser keeps keyboard focus inside
   while it's open, so none of that needs writing by hand. */
.pp-lightbox {
  border: 0; padding: 0; background: none; max-width: 100%; max-height: 100%;
  width: 100%; height: 100%;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px;
}
.pp-lightbox[open] { display: grid; }
.pp-lightbox::backdrop { background: rgba(7,8,79,.82); }
.pp-lightbox img {
  grid-column: 2; justify-self: center;
  max-width: 100%; max-height: 92vh; width: auto;
  border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,.4);
}
.pp-lightbox .lb-close {
  position: fixed; top: 14px; right: 18px; z-index: 1;
  background: none; border: 0; color: #fff; font-size: 34px; line-height: 1;
  cursor: pointer; opacity: .85; padding: 4px 10px;
}
.pp-lightbox .lb-nav {
  background: rgba(255,255,255,.14); border: 0; color: #fff;
  font-size: 30px; line-height: 1; cursor: pointer;
  width: 46px; height: 64px; border-radius: 10px; margin: 0 8px;
}
.pp-lightbox .lb-nav:hover, .pp-lightbox .lb-close:hover { opacity: 1; background: rgba(255,255,255,.26); }
.pp-lightbox .lb-nav[hidden] { display: none; }
@media (max-width: 600px) {
  .pp-lightbox .lb-nav { width: 38px; height: 54px; font-size: 24px; margin: 0 4px; }
}

/* ---------- FAQ ----------
   Native <details>, so it opens and closes with no JavaScript at all. */
.pp-faq .acc { border-bottom: 1px solid var(--rule-soft); }
.pp-faq summary {
  cursor: pointer; list-style: none; padding: 16px 30px 16px 0; position: relative;
  font-size: 16px; font-weight: 600; line-height: 1.4;
}
.pp-faq summary::-webkit-details-marker { display: none; }
.pp-faq summary::after {
  content: ""; position: absolute; right: 6px; top: 22px;
  width: 8px; height: 8px;
  border-right: 2px solid var(--blue); border-bottom: 2px solid var(--blue);
  transform: rotate(45deg); transition: transform .15s;
}
.pp-faq details[open] summary::after { transform: rotate(-135deg); top: 26px; }
.pp-faq .acc-body { padding: 0 0 18px; font-size: 15px; line-height: 1.7; color: var(--muted); }
.pp-faq .acc-body p + ul, .pp-faq .acc-body ul + p { margin-top: 12px; }
.pp-faq .acc-body ul { padding-left: 20px; }
.pp-faq .acc-body li { margin-bottom: 6px; }
.pp-faq .acc-body a { color: var(--blue); font-weight: 600; }

/* ---------- other workbooks at the bottom ---------- */
.pp-others { padding-bottom: 90px; }
.pp-others .products { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 600px) { .pp-others .products { grid-template-columns: 1fr; } }