/* Ride Opium — model page template v9 (Sept 2026). Scoped under .mp so nothing leaks into header/footer. */
.mp{color:#545252;font-family:'Montserrat','Segoe UI',Arial,sans-serif;font-size:18px;line-height:27px;font-weight:300;-webkit-font-smoothing:antialiased}
.mp img{max-width:100%;display:block}
.mp a{color:inherit}
.mp h1,.mp h2,.mp h3,.mp h4{margin:0;color:#000;font-weight:300}
.mp p{margin:0}
.mp .container{max-width:1140px;margin:0 auto;padding:0 15px;width:100%}
/* Existing Opium tokens throughout. Only the hero and the stat block are new. */
.mp .mp-btn{display:inline-block;background:#000;color:#fff;font-size:16px;font-weight:400;padding:14px 40px;
  border-radius:50px;text-decoration:none;line-height:1.2}
/* hover follows the site's existing button convention (product-page.css .confirebtn): black fills to white with
   grey text. The child theme's a:hover{color:inherit !important} otherwise greys the label on a dark button, hence !important. */
.mp .mp-btn{transition:background .2s linear,color .2s linear,box-shadow .2s linear;box-shadow:inset 0 0 0 1px #000}
.mp .mp-btn:hover,.mp .mp-btn:focus{background:#fff;color:#545252!important;box-shadow:inset 0 0 0 1px rgba(0,0,0,.35)}
.mp .mp-btn--ghost{background:transparent;color:#000}
.mp .mp-btn--ghost:hover,.mp .mp-btn--ghost:focus{background:#000;color:#fff!important;box-shadow:inset 0 0 0 1px #000}
.mp .mp-btns{display:flex;flex-wrap:wrap;gap:14px}
/* ============ NEW 1 — HERO ============ */
/* background behaviour reused from the homepage colour picker (section.opc):
   radial-gradient tinted by the selected colour, transition background .6s */
.mp{--mp-hdr:64px}
.mp .hero{position:relative;text-align:center;padding:calc(var(--mp-hdr) + 24px) 0 60px;transition:background .6s;
  background:radial-gradient(125% 95% at 50% 40%, rgba(206,206,210,.20), rgba(206,206,210,.05) 52%, #EDEDEB 78%)}
.mp .hero__mark{position:absolute;top:calc(var(--mp-hdr) + 40px);left:50%;transform:translateX(-50%);
  font-size:clamp(52px,8.2vw,130px);line-height:.86;font-weight:300;color:rgba(0,0,0,.055);
  letter-spacing:-.02em;user-select:none;pointer-events:none;white-space:nowrap}
.mp .hero__shot{position:relative;max-width:820px;margin:0 auto;padding:78px 24px 0}
.mp .hero__shot img{width:100%;height:auto;max-height:clamp(190px,32vh,400px);object-fit:contain;transition:opacity .18s ease}
.mp .hero__shot.swapping img{opacity:.25}
/* variant selector, built the way porsche.com's p-tabs-bar is: no track, and the selected
   item carries a flat frosted fill at 6px radius. Their tokens: fill #6465723c,
   radius 6px, padding 3px 12px, 16px/400, colour #010205. */
.mp .toggle{display:inline-grid;grid-auto-flow:column;gap:4px;margin:18px 0 16px}
.mp .toggle a{font-size:16px;line-height:24px;font-weight:400;color:#010205;text-decoration:none;
  padding:6px 16px;border-radius:6px;
  background-image:linear-gradient(#6465723c,#6465723c);
  background-repeat:no-repeat;background-size:0% 100%;
  transition:background-size .22s ease, color .22s ease}
.mp .toggle a:hover{background-size:100% 100%}
.mp .toggle a[aria-current]{background-size:100% 100%;color:#010205}
.mp .hero h1{font-size:clamp(34px,4.4vw,56px);line-height:1.06;font-weight:300;letter-spacing:-.01em}
.mp .hero .kicker{font-size:18px;line-height:27px;font-weight:300;color:#545252;margin-top:10px}
.mp .herorow{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:30px 64px;margin:36px auto 0;max-width:940px;text-align:left}
.mp .herorow .money .price{font-size:22px;line-height:32px;font-weight:400;color:#000}
.mp .herorow .money .lease{font-size:15px;line-height:22px;margin-top:4px}
.mp .herorow .money .lease a{text-decoration:underline}
.mp .picker{max-width:none}
@media (min-width:860px){.mp .herorow{gap:0}
.mp .herorow .money{padding-right:72px}
.mp .picker{padding-left:72px}
}
.mp .picker .cname{font-size:15px;line-height:22px;font-weight:400;color:#212529;margin-bottom:18px}
.mp .picker .cname i{font-style:normal;color:#8A8880}
.mp .sws{display:flex;flex-wrap:wrap;gap:14px;max-width:364px}
.mp .sw{width:28px;height:28px;border-radius:50%;border:1px solid rgba(0,0,0,.14);padding:0;cursor:pointer;
  transition:transform .18s, box-shadow .18s;background-clip:padding-box}
.mp .sw:hover{transform:scale(1.08)}
.mp .sw[aria-pressed="true"]{box-shadow:#EDEDEB 0 0 0 3px, rgba(26,26,24,.55) 0 0 0 4px}
.mp .hero .mp-btns{justify-content:center;margin-top:40px}
@media (max-width:719px){.mp .herorow{justify-content:flex-start;text-align:left}
.mp .hero__shot img{max-height:38vh}
}
/* tall viewports get the generous rhythm; everything shorter keeps the
   colour picker and both buttons above the fold */
/* tall screens get the generous rhythm */
@media (min-height:940px){.mp .hero{padding:calc(var(--mp-hdr) + 30px) 0 74px}
.mp .hero__shot{padding-top:96px}
.mp .hero__shot img{max-height:40vh}
.mp .toggle{margin:22px 0 20px}
.mp .herorow{margin-top:46px;gap:34px 84px}
.mp .picker .cname{margin-bottom:20px}
@media (min-width:860px){.mp .herorow .money{padding-right:84px}
.mp .picker{padding-left:84px}
}
.mp .hero .mp-btns{margin-top:52px}
}
/* short screens compress, so the colour picker and both buttons stay above the fold */
@media (max-height:800px){.mp .hero{padding:calc(var(--mp-hdr) + 14px) 0 44px}
.mp .hero__mark{top:calc(var(--mp-hdr) + 24px);font-size:clamp(44px,6.4vw,98px)}
.mp .hero__shot{padding-top:62px}
.mp .hero__shot img{max-height:30vh}
.mp .toggle{margin:12px 0 10px}
.mp .herorow{margin-top:26px;gap:24px 56px}
.mp .picker .cname{margin-bottom:14px}
@media (min-width:860px){.mp .herorow .money{padding-right:60px}
.mp .picker{padding-left:60px}
}
.mp .hero .mp-btns{margin-top:30px}
}
/* ============ NEW 2 — STAT BLOCK ============ */
.mp .stats{padding:88px 0 90px;border-bottom:1px solid rgba(0,0,0,.12)}
.mp .stats dl{margin:0;display:grid;gap:48px 32px;grid-template-columns:repeat(2,1fr)}
@media (min-width:900px){.mp .stats dl{grid-template-columns:repeat(4,1fr)}
}
.mp .stats dt{font-size:13px;line-height:20px;font-weight:400;letter-spacing:1.6px;text-transform:uppercase;
  color:#76746E;margin:0 0 8px}
.mp .stats dd{margin:0;display:flex;align-items:baseline;gap:7px}
.mp .stats .n{font-size:clamp(48px,6vw,86px);line-height:.94;font-weight:300;color:#000;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
/* odometer — the mechanism porsche.com uses (AnimatedCounter): the final value stays in the
   flow at opacity 0 to reserve the exact width, and one column of digits 0-9 per position
   slides vertically behind it. Nothing reflows, so the number never shifts sideways. */
.mp .odo{position:relative;display:inline-block;vertical-align:top}
/* the final value, in the flow at opacity 0: it reserves the exact width and one line of height */
.mp .odo__full{opacity:0;display:block}
/* the clipping window is the ROW, not the column — a column that clips itself would move its
   own clip with it and never reveal a different digit */
.mp .odo__row{position:absolute;inset:0;display:flex;align-items:flex-start;overflow:hidden}
.mp .odo__col{display:flex;flex-direction:column;flex:0 0 auto;
  transition:transform 1.25s cubic-bezier(.2,.1,.2,1)}
.mp .odo__d{flex:0 0 auto}
.mp .odo__sep{flex:0 0 auto}
@media (prefers-reduced-motion:reduce){.mp .odo__col{transition:none}
.mp .odo__row{display:none}
.mp .odo__full{opacity:1}
}
.mp .stats .u{font-size:18px;line-height:27px;font-weight:400;color:#212529}
.mp .stats .more{margin-top:46px;font-size:17px;font-weight:400;color:#000}
.mp .stats .more a{text-decoration:underline}
/* ============ FROM HERE DOWN: THE EXISTING DESIGN ============ */
.mp .leftrightsection{padding:70px 0 0}
.mp .rowLR{display:grid;grid-template-columns:1fr;gap:24px}
@media (min-width:900px){.mp .rowLR{grid-template-columns:5fr 7fr;gap:60px}
}
.mp .h2-title{font-size:52px;line-height:60px;font-weight:300;color:#000}
@media (max-width:899px){.mp .h2-title{font-size:34px;line-height:42px}
}
.mp .maindescription h5{font-size:22px;line-height:31px;font-weight:300;color:#101113;margin:0 0 18px}
.mp .maindescription p{margin:0 0 16px}
.mp .maindescription p:last-child{margin-bottom:0}
.mp .leftrightsection-two{padding:0 0 20px}
.mp .frow{display:grid;grid-template-columns:1fr;gap:30px;align-items:start;padding:50px 0}
@media (min-width:900px){.mp .frow{grid-template-columns:1fr 1fr;gap:60px}
.mp .frow.flip .images-section{order:2}
}
/* the child theme styles these legacy class names too (.contentbox is a centred flex row there); pin them */
.mp .contentbox{display:block;height:auto;margin:0}
.mp .images-section{margin:0;text-align:left}
.mp .images-section img{width:100%;height:auto;display:block;border-radius:10px;background:#EDEDEA}
.mp .contentbox h4{font-size:24px;line-height:34px;font-weight:300;color:#212529;margin-bottom:12px}
.mp .mlead{font-size:18px;line-height:27px;font-weight:400;color:#212529;margin:0 0 10px}
.mp .contentbox p{margin:0 0 14px}
.mp .contentbox p:last-child{margin-bottom:0}
.mp .sec{padding:70px 0 50px}
.mp .sec--grey{background:#E8E8E8}
.mp .sec--white{background:#fff}
.mp .op-kicker{font-size:12px;line-height:18px;font-weight:400;letter-spacing:4.08px;text-transform:uppercase;
  color:#76746E;margin:0 0 18px}
.mp .vgrid{display:flex;flex-wrap:wrap;gap:30px;margin-top:34px}
.mp .vcard{flex:1 1 380px;border:1px solid rgba(0,0,0,.12);background:#fff;padding:40px;display:flex;flex-direction:column}
.mp .vcard h3{font-size:26px;line-height:39px;font-weight:400;color:#212529}
.mp .vgear{font-size:15px;line-height:22.5px;font-weight:400;color:#212529}
.mp .vprice{font-size:18px;line-height:27px;font-weight:400;color:#000;margin-top:14px}
.mp .vrule{display:block;height:1px;background:rgba(0,0,0,.12);margin:24px 0}
.mp .vcard p{margin:0 0 16px}
.mp .vcard .mp-btn{align-self:flex-start;margin-top:auto}
.mp .tablewrap{overflow-x:auto;margin-top:40px;background:#fff;border:1px solid rgba(0,0,0,.12)}
.mp table{border-collapse:collapse;width:100%;min-width:640px;table-layout:fixed}
.mp th, .mp td{text-align:left;padding:16px 24px;border-bottom:1px solid rgba(0,0,0,.08);vertical-align:top}
.mp tr:last-child th, .mp tr:last-child td{border-bottom:0}
.mp thead th{font-size:12px;line-height:18px;font-weight:400;color:#76746E;letter-spacing:2.4px;
  text-transform:uppercase;padding:18px 24px;background:#F3F3F1;border-bottom:1px solid rgba(0,0,0,.12)}
.mp thead th:first-child{width:26%}
.mp tbody th{font-size:16px;line-height:24px;font-weight:400;color:#212529;width:26%}
.mp tbody td{font-size:16px;line-height:24px;font-weight:300;color:#545252;font-variant-numeric:tabular-nums}
.mp tbody tr:hover th,.mp tbody tr:hover td{background:rgba(0,0,0,.02)}
@media (max-width:899px){.mp .tablewrap{margin-left:-15px;margin-right:-15px;border-left:0;border-right:0}
.mp th, .mp td{padding:14px 16px}
}
.mp .faqlink{margin-top:22px}
.mp .faqlink a{font-size:17px;line-height:25.5px;font-weight:400;color:#1A1A18;text-decoration:underline}
.mp .opg-list{list-style:none;padding:0;margin:32px 0 0;max-width:900px;border-top:1px solid rgba(0,0,0,.12)}
.mp .opg-list li{border-bottom:1px solid rgba(0,0,0,.12)}
.mp .opg-list a{display:flex;justify-content:space-between;gap:24px;padding:22px 0;text-decoration:none;
  font-size:17px;line-height:25.5px;font-weight:400;color:#1A1A18}
.mp .opg-list a:hover{text-decoration:underline}
.mp .closer h2{font-size:32px;line-height:36.8px;font-weight:300;color:#1A1A18;letter-spacing:.32px;max-width:24ch}
.mp .closer .sub{margin:14px 0 30px;max-width:52ch}
.mp .claim{font-size:22px;line-height:31px;font-weight:400;color:#1A1A18;margin-top:40px}
/* ===== HERO VARIANT A (approved 10 Sept): centred, bigger render ===== */
/* the hero owns the first screen: it is at least one viewport tall and its content sits at the bottom,
   so spare height becomes headroom above the render (behind the watermark) instead of the next section
   peeking in below the buttons */
.mp .hero{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;box-sizing:border-box}
.mp .hero__shot,.mp .hero>.container{flex:0 0 auto;width:100%}
.mp .hero{padding:calc(var(--mp-hdr) + 20px) 0 56px}
.mp .hero__mark{top:calc(var(--mp-hdr) + 28px);font-size:clamp(64px,11vw,190px)}
.mp .hero__shot{max-width:1280px;padding:64px 24px 0}
.mp .hero__shot img{max-height:clamp(300px,47vh,640px)}
.mp .toggle{margin:10px 0 12px}
.mp .herorow{margin-top:28px}
.mp .hero .mp-btns{margin-top:30px}
@media (min-height:940px){.mp .hero__shot{padding-top:80px}
.mp .hero__shot img{max-height:53vh}
}
@media (max-height:800px){.mp .hero{padding:calc(var(--mp-hdr) + 12px) 0 40px}
.mp .hero__mark{top:calc(var(--mp-hdr) + 18px);font-size:clamp(56px,9.5vw,150px)}
.mp .hero__shot{padding-top:56px}
.mp .hero__shot img{max-height:47vh}
.mp .toggle{margin:8px 0 8px}
.mp .herorow{margin-top:20px}
.mp .hero .mp-btns{margin-top:24px}
}
/* pages with two swatch rows give the render ~5vh back so the buttons clear the fold */
.mp .hero--many .hero__shot img{max-height:clamp(280px,42vh,600px)}
@media (min-height:940px){.mp .hero--many .hero__shot img{max-height:48vh}
}
@media (max-height:800px){.mp .hero--many .hero__shot img{max-height:42vh}
}
/* the next section peeks in as white space, not sliced labels */
.mp .stats{padding:132px 0 90px}
/* order forms: the child theme hides .documents-sec .content until its accordion JS opens it, and .mp h2 made the
   heading black on the black band. On this template the list is always open, white on black. */
.mp .documents-sec .content{display:block}
.mp .documents-sec .h2-title,.mp .documents-sec p{color:#fff}
.mp .documents-sec .documents-download-bx{border-bottom:1px solid rgba(255,255,255,.35)}