/* v3L lower-section treatment. Loaded only in administrator preview (body.jspd-v3l),
   so the public page is untouched.

   About and the accordions stay where they are, inside .jspd-summary, because that
   column's height is what gives the desktop gallery its sticky travel (measured: 482px,
   of which About and the accordions contribute 427px). Only typography and spacing
   change there. Related pieces and Read further sit below the grid.

   Everything is scoped under body.jspd-v3l and nothing here touches the gallery, the
   purchase controls, the engraving panel, the header or the footer. The existing
   responsive architecture is respected: the LIVE 1100px stacking breakpoint is left
   alone and no new breakpoint is introduced above it. */

/* ---- About this piece -------------------------------------------------------- */
body.jspd-v3l .jspd-pdp .jspd-about--col{
  margin-top:30px;padding-top:26px;border-top:1px solid var(--jspd-rule)}
body.jspd-v3l .jspd-pdp .jspd-ab-kicker{
  font-family:var(--jspd-ui);font-size:10px;font-weight:400;letter-spacing:.2em;
  text-transform:uppercase;color:var(--jspd-navy);margin:0 0 6px}
body.jspd-v3l .jspd-pdp .jspd-ab-h2{
  font-family:var(--jspd-display);font-weight:400;letter-spacing:.012em;
  font-size:clamp(22px,1.7vw,27px);line-height:1.22;margin:0 0 12px;color:var(--jspd-ink)}
body.jspd-v3l .jspd-pdp .jspd-abouttext p{margin:0 0 15px}
body.jspd-v3l .jspd-pdp .jspd-abouttext p:last-child{margin-bottom:0}

/* ---- accordions: lighter, less boxed ------------------------------------------ */
body.jspd-v3l .jspd-pdp .jspd-accs{margin-top:26px}
body.jspd-v3l .jspd-pdp .jspd-acc{border-top:1px solid var(--jspd-rule2,var(--jspd-rule))}
body.jspd-v3l .jspd-pdp .jspd-acc:last-child{border-bottom:1px solid var(--jspd-rule2,var(--jspd-rule))}
body.jspd-v3l .jspd-pdp .jspd-acc summary{
  font-family:var(--jspd-display);font-weight:400;font-size:17.5px;letter-spacing:.01em;
  padding:15px 0;color:var(--jspd-ink)}
body.jspd-v3l .jspd-pdp .jspd-accbody{padding:0 0 18px}
body.jspd-v3l .jspd-pdp .jspd-v3l-care{margin:0}
body.jspd-v3l .jspd-pdp .jspd-v3l-link{margin:11px 0 0}
body.jspd-v3l .jspd-pdp .jspd-v3l-link a{
  font-family:var(--jspd-ui);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--jspd-navy);border-bottom:1px solid rgba(38,92,145,.35);padding-bottom:2px}
body.jspd-v3l .jspd-pdp .jspd-v3l-link a:hover{border-bottom-color:var(--jspd-navy)}

/* =============================================================================
   ORIGINAL v3 LOWER PAGE
   Geometry transcribed from site-wide-design-review/v3/assets/jsr3.css:
     --maxw 1320  --pad 40/30/20   .sec padding 76px 0 (52 at <=760)
     .g gap 34    .g2 2 cols (1 at <=760)   .g4 4 cols (2 at <=1100)
     .sechead flex, margin-bottom 38    .prefoot sand, padding 60px 0, 3 cols
   Breakpoints 1100 / 760 are the reference's own and the live page's own.
   ========================================================================== */

/* ---- the centred measure. The live container is max-width:1920 with auto
        margins; capping the wrap at 1320 centres it inside that, which puts the
        content at exactly (viewport-1320)/2 as in the reference. --------------- */
body.jspd-v3l .jsv3-wrap,
body.jspd-v3l .jsv3-prefoot .in{
  max-width:1320px;margin-left:auto;margin-right:auto;
  padding-left:40px;padding-right:40px;box-sizing:border-box}


/* Full-bleed tinted bands. The band is painted past the element rather than widened:
   a 100vw margin would ignore the scrollbar and push the page 17px wider than the
   viewport, which is a real horizontal overflow at tablet widths. This paints only -
   layout width is untouched, so nothing can overflow. */
body.jspd-v3l .jsv3-bleed{
  box-shadow:0 0 0 100vmax var(--jsv3-band);
  clip-path:inset(0 -100vmax)}

body.jspd-v3l .jsv3-sec{padding:76px 0}
body.jspd-v3l .jsv3-canvas{--jsv3-band:#fbf9f6;background:#fbf9f6}
body.jspd-v3l .jsv3-prefoot{--jsv3-band:#f3efe8;background:#f3efe8;padding:60px 0}

/* ---- shared type ------------------------------------------------------------ */
body.jspd-v3l .jsv3-eyebrow{
  font-family:var(--jspd-ui);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--jspd-accent);display:block}
body.jspd-v3l .jsv3-kicker{
  font-family:var(--jspd-ui);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--jspd-muted);display:block}
body.jspd-v3l .jsv3-arrow{
  font-family:var(--jspd-ui);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--jspd-accent);border-bottom:1px solid currentColor;padding-bottom:3px;
  display:inline-block;text-decoration:none}
body.jspd-v3l .jsv3-sec h2,
body.jspd-v3l .jsv3-advice h2{
  font-family:var(--jspd-display);font-weight:400;font-size:clamp(27px,2.6vw,38px);
  line-height:1.15;letter-spacing:.01em;color:var(--jspd-ink);margin:10px 0 0;text-transform:none}

/* ---- About + accordions, the v3 two-column block ---------------------------- */
body.jspd-v3l .jsv3-g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:62px;align-items:start}
body.jspd-v3l .jsv3-lower > .jspd-about{margin:0;padding:0;border-top:0}
body.jspd-v3l .jsv3-lower > .jspd-accs{margin:0;border-top:1px solid var(--jspd-rule2)}
/* Where the copy lives in the short description there is no lower About block, so the
   accordions are the only child. Let them span the band rather than sit in half of it
   with an empty column alongside. */
body.jspd-v3l .jsv3-lower > .jspd-accs:only-child{grid-column:1 / -1}
body.jspd-v3l .jspd-pdp .jsv3-lower .jspd-abouttext{max-width:none}

/* accordion chrome: +/- markers and rules, as the reference */
body.jspd-v3l .jsv3-lower .jspd-accs details{border-bottom:1px solid var(--jspd-rule2)}
body.jspd-v3l .jsv3-lower .jspd-accs summary{
  padding:22px 0;font-family:var(--jspd-display);font-size:20px;font-weight:400}
body.jspd-v3l .jsv3-lower .jspd-accs .jspd-chev{display:none}
body.jspd-v3l .jsv3-lower .jspd-accs summary::after{
  content:"+";font-family:var(--jspd-ui);font-size:18px;color:var(--jspd-muted);font-weight:300}
body.jspd-v3l .jsv3-lower .jspd-accs details[open] summary::after{content:"\2013"}
body.jspd-v3l .jsv3-lower .jspd-accs .jspd-accbody{
  padding:0 0 26px;color:var(--jspd-ink2);font-size:15.5px;line-height:1.75;max-width:70ch}

/* ---- alternatives ----------------------------------------------------------- */
body.jspd-v3l .jsv3-sechead{
  display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:38px}
body.jspd-v3l .jsv3-g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:34px}
body.jspd-v3l .jsv3-pc{
  display:flex;flex-direction:column;height:100%;color:inherit;text-decoration:none;position:relative}
body.jspd-v3l .jsv3-pc .shot{
  background:#fff;border:1px solid var(--jspd-rule2);aspect-ratio:4/5;display:grid;
  place-items:center;padding:24px;overflow:hidden}
body.jspd-v3l .jsv3-pc .shot img{
  max-height:100%;max-width:100%;width:auto;height:auto;margin:0;object-fit:contain;
  transition:transform .6s cubic-bezier(.2,.7,.3,1)}
body.jspd-v3l .jsv3-pc:hover .shot img{transform:scale(1.05)}
body.jspd-v3l .jsv3-pc h3{
  font-family:var(--jspd-display);font-weight:400;font-size:17.5px;line-height:1.3;
  margin:14px 0 0;color:var(--jspd-ink);text-transform:none}
body.jspd-v3l .jsv3-pc .meta{
  font-family:var(--jspd-ui);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--jspd-muted);margin:7px 0 auto}
body.jspd-v3l .jsv3-pc .cost{
  font-family:var(--jspd-display);font-size:18px;margin:5px 0 0;color:var(--jspd-ink);
  font-variant-numeric:tabular-nums}

/* ---- buying advice ---------------------------------------------------------- */
body.jspd-v3l .jsv3-advice{gap:62px}
body.jspd-v3l .jsv3-points{margin-top:18px;color:var(--jspd-ink2);font-size:16.5px;line-height:1.78}
body.jspd-v3l .jsv3-points p{margin:0 0 16px}
body.jspd-v3l .jsv3-points p:last-child{margin-bottom:0}
body.jspd-v3l .jsv3-points strong{color:var(--jspd-ink);font-weight:500}
body.jspd-v3l .jsv3-sand{background:#f3efe8;padding:34px 36px}
body.jspd-v3l .jsv3-sand ul{list-style:none;margin:16px 0 0;padding:0;font-size:16px;line-height:2}
body.jspd-v3l .jsv3-tail{margin:26px 0 0;font-size:14px;color:var(--jspd-ink2)}

/* ---- specialist assistance -------------------------------------------------- */
body.jspd-v3l .jsv3-prefoot .in{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:46px}
body.jspd-v3l .jsv3-prefoot h3{
  font-family:var(--jspd-display);font-weight:400;font-size:22px;margin:7px 0 0;
  color:var(--jspd-ink);text-transform:none}
body.jspd-v3l .jsv3-prefoot p{font-size:14.5px;color:var(--jspd-ink2);margin:9px 0 13px;line-height:1.65}

/* ---- responsive, on the reference's own breakpoints ------------------------- */
@media (max-width:1100px){
  body.jspd-v3l .jsv3-wrap,
  body.jspd-v3l .jsv3-prefoot .in{padding-left:30px;padding-right:30px}
  body.jspd-v3l .jsv3-g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.jspd-v3l .jsv3-prefoot .in{grid-template-columns:1fr;gap:30px}
  /* the lower pair stacks here rather than at 760: at tablet portrait two columns
     leave roughly a 44-character measure, which the earlier tablet work corrected. */
  body.jspd-v3l .jsv3-g2{grid-template-columns:1fr;gap:34px}
  body.jspd-v3l .jsv3-lower > .jspd-accs{margin-top:0}
}
@media (max-width:760px){
  body.jspd-v3l .jsv3-wrap,
  body.jspd-v3l .jsv3-prefoot .in{padding-left:20px;padding-right:20px}
  body.jspd-v3l .jsv3-sec{padding:52px 0}
  body.jspd-v3l .jsv3-g4{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 16px}
  body.jspd-v3l .jsv3-pc h3{font-size:15.5px}
  body.jspd-v3l .jsv3-pc .cost{font-size:16px}
  body.jspd-v3l .jsv3-pc .shot{padding:14px}
  body.jspd-v3l .jsv3-sechead{flex-direction:column;align-items:flex-start;gap:16px}
  body.jspd-v3l .jsv3-sand{padding:26px 24px}
}