/* 3D PPF coverage section (replica). Site palette: purple #73378a (--color_1), black, greys; fonts SweetSansProRegular / Barlow */
.ppf3d{background:radial-gradient(120% 90% at 50% 35%,#1b1a20 0%,#0b0b0d 62%,#060607 100%);color:#fff;padding:64px 20px 56px;position:relative;overflow:hidden}
.ppf3d__inner{max-width:1200px;margin:0 auto;text-align:center}
.ppf3d__title{font-family:SweetSansProRegular,Barlow,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.08em;font-size:34px;line-height:1.15;margin:0 0 8px;color:#fff}
.ppf3d__sub{font-family:Barlow,"Open Sans",sans-serif;font-size:17px;color:#bfbfc4;margin:0 0 18px}
.ppf3d__stage{position:relative;width:100%;height:min(60vh,560px);min-height:300px;margin:0 auto}
.ppf3d__canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y;pointer-events:none}
.ppf3d__fallback{position:absolute;inset:0;display:none;align-items:center;justify-content:center;padding:4% 2%}
.ppf3d__fallback svg{width:100%;max-width:920px;height:auto}
.ppf3d__stage[data-mode=fallback] .ppf3d__fallback{display:flex}
.ppf3d__stage[data-mode=fallback] .ppf3d__canvas{display:none}
.ppf3d__spin{position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px;border:3px solid rgba(255,255,255,.15);border-top-color:#73378a;border-radius:50%;animation:ppf3dspin 1s linear infinite;display:none}
.ppf3d__stage[data-mode=loading] .ppf3d__spin{display:block}
@keyframes ppf3dspin{to{transform:rotate(360deg)}}
.ppf3d__load{position:absolute;right:12px;bottom:12px;font:600 13px Barlow,sans-serif;letter-spacing:.06em;text-transform:uppercase;background:transparent;color:#fff;border:1px solid rgba(255,255,255,.5);padding:8px 14px;cursor:pointer}
.ppf3d__tabs{display:inline-flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:8px auto 0}
.ppf3d__tab{font-family:SweetSansProRegular,Barlow,sans-serif;text-transform:uppercase;letter-spacing:.08em;font-size:14px;color:#fff;background:transparent;border:1px solid rgba(255,255,255,.35);padding:13px 22px;min-height:46px;cursor:pointer;transition:background .25s,border-color .25s,color .25s;position:relative}
.ppf3d__tab:hover{border-color:#fff}
.ppf3d__tab.is-active{background:#73378a;border-color:#73378a}
.ppf3d__tab:focus-visible{outline:2px solid #c9a3e0;outline-offset:3px}
.ppf3d__panel{min-height:52px;margin-top:16px}
.ppf3d__desc{font-family:Barlow,"Open Sans",sans-serif;font-size:19px;color:#e7e3ea;margin:0}
.ppf3d__desc::first-letter{text-transform:uppercase}
.ppf3d__cta{display:inline-flex;align-items:center;justify-content:center;margin-top:18px;height:55px;padding:0 34px;background:#73378a;color:#fff!important;text-decoration:none!important;font:600 15px Barlow,sans-serif;letter-spacing:.06em;text-transform:uppercase;transition:background .2s}
.ppf3d__cta:hover{background:#5d2b70}
@media (max-width:767px){
  .ppf3d{padding:44px 12px 40px}
  .ppf3d__title{font-size:24px}
  .ppf3d__sub{font-size:15px;margin-bottom:6px}
  .ppf3d__stage{height:min(52vh,400px);min-height:250px}
  .ppf3d__tabs{display:flex;gap:6px}
  .ppf3d__tab{flex:1 1 0;padding:12px 6px;font-size:12px;letter-spacing:.04em}
  .ppf3d__desc{font-size:16px}
}
@media (prefers-reduced-motion:reduce){.ppf3d__tab{transition:none}.ppf3d__spin{animation:none}}
.ppf3d__canvas{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 7%,#000 93%,transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 7%,#000 93%,transparent 100%)}
#dm .ppf3d .ppf3d__title,.ppf3d .ppf3d__title{color:#fff!important}
#dm .ppf3d .ppf3d__sub,#dm .ppf3d .ppf3d__desc{color:#d9d6dd!important}
.ppf3d__canvas{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 7%,#000 93%,transparent 100%),linear-gradient(to bottom,#000 78%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent 0,#000 7%,#000 93%,transparent 100%),linear-gradient(to bottom,#000 78%,transparent 100%);mask-composite:intersect}

.ppf3d__credit{font:12px/1.5 Barlow,"Open Sans",sans-serif;color:#8d8a92!important;margin:18px auto 0;max-width:640px}
#dm .ppf3d .ppf3d__credit,#dm .ppf3d .ppf3d__credit a{color:#8d8a92!important}
.ppf3d__credit a{color:#b9b5bf!important;text-decoration:underline!important}

/* Gloss / Matte finish toggle (radiogroup) */
.ppf3d__finish{display:flex;align-items:center;justify-content:center;gap:8px;margin:14px auto 0;font-family:Barlow,"Open Sans",sans-serif}
.ppf3d__finish-label{font-family:SweetSansProRegular,Barlow,sans-serif;text-transform:uppercase;letter-spacing:.08em;font-size:13px;color:#bfbfc4;margin-right:4px}
#dm .ppf3d .ppf3d__finish-label{color:#c9c6cd!important}
.ppf3d__fin{font-family:SweetSansProRegular,Barlow,sans-serif;text-transform:uppercase;letter-spacing:.08em;font-size:13px;color:#fff;background:transparent;border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:9px 18px;min-height:44px;min-width:88px;cursor:pointer;transition:background .25s,border-color .25s}
.ppf3d__fin:hover{border-color:#fff}
.ppf3d__fin.is-active{background:#fff;color:#111;border-color:#fff}
.ppf3d__fin[data-finish=matte].is-active{background:#d9d4de;border-color:#d9d4de}
.ppf3d__fin:focus-visible{outline:2px solid #c9a3e0;outline-offset:3px}
@media (max-width:767px){.ppf3d__finish{margin-top:12px}.ppf3d__fin{min-width:84px;padding:8px 14px;font-size:12px}}
@media (prefers-reduced-motion:reduce){.ppf3d__fin{transition:none}}

.ppf3d__anchor{position:absolute;top:0;left:0;width:1px;height:1px;scroll-margin-top:110px}
#ppf3d{scroll-margin-top:110px}

/* ---- Window tint visualizer (#tint3d) : same look as the PPF viewer ---- */
#tint3d{scroll-margin-top:110px}
.tint3d__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin:12px auto 0;font-family:Barlow,"Open Sans",sans-serif}
.tint3d__row .ppf3d__finish-label{min-width:88px;text-align:right}
.tint3d__shade,.tint3d__zone,.tint3d__view{font-family:SweetSansProRegular,Barlow,sans-serif;text-transform:uppercase;letter-spacing:.08em;font-size:13px;color:#fff;background:transparent;border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:9px 16px;min-height:44px;min-width:64px;cursor:pointer;transition:background .25s,border-color .25s}
.tint3d__shade:hover,.tint3d__zone:hover,.tint3d__view:hover{border-color:#fff}
.tint3d__shade.is-active,.tint3d__view.is-active{background:#fff;color:#111;border-color:#fff}
.tint3d__zone.is-active{background:#73378a;border-color:#73378a}
.tint3d__zone::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;border:1px solid currentColor;margin-right:8px;vertical-align:1px}
.tint3d__zone.is-active::before{background:currentColor}
.tint3d__shade:focus-visible,.tint3d__zone:focus-visible,.tint3d__view:focus-visible{outline:2px solid #c9a3e0;outline-offset:3px}
.tint3d__note{font:14px/1.5 Barlow,"Open Sans",sans-serif;color:#bdb9c2!important;max-width:640px;margin:6px auto 0}
#dm .tint3d .tint3d__note{color:#bdb9c2!important}
.tint3d .ppf3d__stage[data-view=inside] .ppf3d__canvas{-webkit-mask-image:none;mask-image:none;border-radius:4px}
@media (max-width:767px){
  .tint3d__row{gap:6px;margin-top:10px}
  .tint3d__row .ppf3d__finish-label{flex:0 0 100%;text-align:center;min-width:0;margin:0}
  .tint3d__shade{min-width:0;flex:1 1 0;padding:8px 4px;font-size:12px;letter-spacing:.03em}
  .tint3d__zone,.tint3d__view{padding:8px 12px;font-size:12px}
  .tint3d__note{font-size:13px}
}
@media (prefers-reduced-motion:reduce){.tint3d__shade,.tint3d__zone,.tint3d__view{transition:none}}
.tint3d__fine{font:12.5px/1.5 Barlow,"Open Sans",sans-serif;color:#aaa6b0!important;max-width:620px;margin:10px auto 0;letter-spacing:.01em}
#dm .tint3d .tint3d__fine{color:#aaa6b0!important;font-size:12.5px!important}
