/* ============================================================
   Product detail — built from Figma Product-Detail (1:915).
   Loaded AFTER cm-listing.css, which already carries the page layout (.ls-main / .ls-layout),
   the category sidebar (.ls-side*) and the product card (.pl-card*) — the same components the
   listing uses. Only what is unique to this frame lives here.
   No hero on this frame: the page opens on the breadcrumb row.
   ============================================================ */

/* ---------- breadcrumb + date (1:922 left, 1:923 right, both 16px #363636 at y148) ---------- */
.pd-crumbs-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  margin-bottom: 26px; font-size: 16px; line-height: 1.675; color: #363636;
}
.pd-crumbs { min-width: 0; }
.pd-crumbs a { color: #363636; text-decoration: none; }
.pd-crumbs a:hover { color: #c71e30; text-decoration: underline; }
.pd-crumbs .sep { padding: 0 6px; }
.pd-crumbs .cur { color: #011a36; }
.pd-date { flex: 0 0 auto; font-size: 16px; line-height: 1.675; color: #363636; white-space: nowrap; }

/* ---------- name (1:928) ---------- */
.pd-title {
  margin: 0 0 27px; font-size: 30px; font-weight: 700; line-height: 1.3;
  background: linear-gradient(90deg, #000e27, #0b3d73);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- gallery (1:937 main 762x439 r20 · 1:938 thumbs 119x66 r5, 9px apart) ---------- */
.pd-main {
  display: block; aspect-ratio: 762 / 439; overflow: hidden;
  background: #e9edf2; border-radius: 20px; cursor: zoom-in;
}
/* the remaining photos sit in the Fancybox group only — never drawn */
.pd-fancy-extra { display: none; }
.pd-main img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pd-thumbs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 9px; margin-top: 12px; }
.pd-thumb {
  display: block; aspect-ratio: 119 / 66; overflow: hidden; padding: 0;
  background: #dedede; border: 2px solid transparent; border-radius: 5px; cursor: pointer;
}
.pd-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pd-thumb.is-active { border-color: #c71e30; }
.pd-thumb:hover { border-color: rgba(199, 30, 48, .45); }

/* ---------- the pale blue panel (1:924 + 1:925) ----------
   The frame paints the top panel #d4ebff and the closing one #d3ebff — one unit apart, invisible in
   practice, so both use the article page's #d3ebff rather than reproducing the inconsistency. */
.pd-callout {
  margin: 29px 0 0; padding: 19px 24px;
  background: #d3ebff; border-radius: 20px;
  font-size: 16px; line-height: 1.75; color: #363636;
}
/* The closing instance (1:949/1:950) sits 29px under the body, the same gap the frame gives the top
   panel. .pd-prose clears its last bottom margin below, so that 29px is the whole gap — without it a
   trailing <p> would add its own 18px and push the panel down. */
.pd-callout-end { margin-bottom: 4px; }

/* ---------- PRODUCT DETAIL (1:944 heading + 1:945–1:948 body) ----------
   The body is CKEditor HTML, so the rules target plain tags (same set as the article page). */
.pd-h2 {
  margin: 40px 0 14px; font-size: 30px; font-weight: 700; line-height: 1.3;
  background: linear-gradient(90deg, #000e27, #0b3d73);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pd-prose { font-size: 16px; line-height: 1.75; color: #363636; }
.pd-prose > :first-child { margin-top: 0; }
.pd-prose > :last-child { margin-bottom: 0; }
.pd-prose p { margin: 0 0 18px; }
.pd-prose h1, .pd-prose h2, .pd-prose h3, .pd-prose h4, .pd-prose h5, .pd-prose h6 {
  margin: 34px 0 14px; font-weight: 700; line-height: 1.3;
  background: linear-gradient(90deg, #000e27, #0b3d73);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pd-prose h1, .pd-prose h2 { font-size: 30px; }
.pd-prose h3 { font-size: 24px; }
.pd-prose h4, .pd-prose h5, .pd-prose h6 { font-size: 20px; }
.pd-prose ul, .pd-prose ol { margin: 0 0 18px; padding-left: 22px; }
.pd-prose li { margin-bottom: 6px; }
.pd-prose a { color: #0b3d73; text-decoration: underline; }
.pd-prose a:hover { color: #c71e30; }
.pd-prose strong, .pd-prose b { font-weight: 700; color: #011a36; }
.pd-prose img { max-width: 100%; height: auto; border-radius: 10px; }
.pd-prose hr { margin: 28px 0; border: 0; border-top: 1px solid #dfe4ea; }
.pd-prose pre { padding: 14px 16px; overflow-x: auto; background: #eef2f6; border-radius: 10px; }
/* CKEditor wraps a table in figure.table — let that scroll instead of widening the page */
.pd-prose figure { margin: 0 0 18px; }
.pd-prose figure.table { max-width: 100%; overflow-x: auto; }
.pd-prose table { width: 100%; border-collapse: collapse; }
.pd-prose th, .pd-prose td { padding: 10px 12px; border: 1px solid #dfe4ea; text-align: left; }
.pd-prose th { background: #eef2f6; font-weight: 700; color: #011a36; }
.pd-prose blockquote {
  margin: 26px 0; padding: 19px 24px; border: 0; border-radius: 20px;
  background: #d3ebff; font-size: 16px; line-height: 1.75; color: #363636;
}
.pd-prose blockquote > :last-child { margin-bottom: 0; }

/* ---------- RELATED (1:980 title · 1:981 rule · 1:979 SEE MORE) ----------
   Unlike the article page's three, this block runs FOUR cards across the full 1024 column. */
.pd-related { padding: 8px 0 56px; background: #f9f9f9; }
.pd-related-head { position: relative; margin-bottom: 28px; text-align: center; }
.pd-related-title {
  margin: 0; font-size: 30px; font-weight: 700; line-height: 1.3;
  background: linear-gradient(90deg, #000e27, #0b3d73);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pd-rule { display: block; width: 67px; height: 5px; margin: 12px auto 0; background: #c71e30; }
.pd-seemore { position: absolute; right: 0; top: 8px; font-size: 16px; color: #011a36; text-decoration: none; }
.pd-seemore:hover { color: #c71e30; text-decoration: underline; }
.pd-related-cards { grid-template-columns: repeat(4, 1fr); }

/* ---------- responsive (no mobile frame in Figma — derived from the desktop one) ---------- */
@media (max-width: 991.98px) {
  .pd-title { font-size: 26px; }
  .pd-h2, .pd-related-title { font-size: 26px; }
  .pd-related-cards { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767.98px) {
  .pd-crumbs-row { flex-direction: column; gap: 4px; margin-bottom: 20px; font-size: 15px; }
  .pd-date { font-size: 15px; }
  .pd-thumbs { grid-template-columns: repeat(4, 1fr); }
  .pd-related-cards { grid-template-columns: repeat(2, 1fr); }
  /* the heading is centred, so a floating link would sit on top of it */
  .pd-seemore { position: static; display: inline-block; margin-top: 10px; }
}
@media (max-width: 575.98px) {
  .pd-title, .pd-h2, .pd-related-title { font-size: 22px; }
  .pd-main { border-radius: 12px; }
  .pd-thumbs { grid-template-columns: repeat(3, 1fr); }
  .pd-callout, .pd-prose blockquote { padding: 16px 18px; border-radius: 14px; }
  .pd-related-cards { grid-template-columns: 1fr; }
}