/* ---------- PRODUCT DETAILS PAGE ---------- */
.pp{--coral:#ff7a59;--red:#e0362c;--card-line:#e6e7f2;--media:#f6f6fb;--ease:cubic-bezier(.2,.8,.2,1);
  position:relative;isolation:isolate;overflow:hidden;padding:28px 0 96px;background:#f3f4fb}
.pp::before{content:"";position:absolute;z-index:-1;width:620px;height:620px;left:-260px;top:-280px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,193,7,.14),transparent 68%)}
.pp-inner{max-width:1240px;margin:0 auto;padding:0 24px}

/* staggered entrance */
.pp-rv{animation:ppIn .6s var(--ease) backwards;animation-delay:calc(var(--i,0) * .07s)}
@keyframes ppIn{from{opacity:0;transform:translateY(16px)}}

/* ---------- breadcrumb ---------- */
.pp-crumb{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:24px;font-size:13.5px;font-weight:600;color:var(--muted)}
.pp-crumb a{padding:5px 10px;border-radius:8px;transition:background .2s,color .2s}
.pp-crumb a:hover{background:#fff;color:var(--navy)}
.pp-crumb svg{width:10px;height:10px;opacity:.6}
.pp-crumb span{color:var(--navy-dark)}

/* ---------- layout ---------- */
.pp-main{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:48px;align-items:start}

/* ---------- gallery ---------- */
.pp-gallery{position:sticky;top:96px}
.pp-stage{position:relative;aspect-ratio:1/1;border-radius:22px;background:#fff;border:1px solid var(--card-line);overflow:hidden;cursor:zoom-in;outline:none}
.pp-stage:focus-visible{box-shadow:0 0 0 3px var(--yellow)}
.pp-shot{position:absolute;inset:10%;width:80%;height:80%;object-fit:contain;mix-blend-mode:multiply;opacity:0;
  transform:translateX(var(--from,24px)) scale(.96);transition:opacity .45s var(--ease),transform .55s var(--ease);pointer-events:none}
.pp-shot.is-on{opacity:1;transform:none}
/* zoom: photo scales up around the pointer (origin set by product-detail.js) */
.pp-stage.is-zoom .pp-shot.is-on{transform:scale(2.1);transition:opacity .45s var(--ease),transform .25s ease-out}
.pp-ph{position:absolute;inset:0;margin:auto;width:110px;height:110px;color:#c9c8da}
.pp-tag{position:absolute;left:16px;top:16px;z-index:2;padding:5px 12px;border-radius:999px;background:var(--navy-dark);color:#fff;font-size:12px;font-weight:700}
.pp-hint{position:absolute;right:16px;bottom:16px;z-index:2;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.9);
  box-shadow:0 2px 8px rgba(26,21,102,.08);font-size:12px;font-weight:600;color:var(--muted);transition:opacity .3s}
.pp-stage.is-zoom .pp-hint{opacity:0}

.pp-nav{position:absolute;top:50%;z-index:2;width:44px;height:44px;margin-top:-22px;border-radius:50%;display:grid;place-items:center;background:#fff;
  color:var(--navy-dark);box-shadow:0 6px 18px rgba(26,21,102,.12);opacity:0;transition:opacity .25s,transform .3s var(--ease),background .2s,color .2s}
.pp-nav svg{width:16px;height:16px}
.pp-prev{left:14px;transform:translateX(-8px)}
.pp-next{right:14px;transform:translateX(8px)}
.pp-stage:hover .pp-nav,.pp-nav:focus-visible{opacity:1;transform:none}
.pp-nav:hover{background:var(--navy-dark);color:#fff}
.pp-stage.is-zoom .pp-nav{opacity:0;pointer-events:none}
.pp-count{position:absolute;left:16px;bottom:16px;z-index:2;padding:5px 11px;border-radius:999px;background:rgba(255,255,255,.9);font-size:12px;font-weight:600;color:var(--muted)}
.pp-count b{color:var(--navy-dark)}

.pp-thumbs{display:flex;gap:12px;margin-top:14px}
.pp-thumb{position:relative;width:84px;height:84px;padding:8px;border-radius:14px;background:#fff;border:1px solid var(--card-line);
  transition:border-color .2s,transform .2s,box-shadow .2s}
.pp-thumb img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;opacity:.65;transition:opacity .2s}
.pp-thumb:hover{transform:translateY(-3px)}
.pp-thumb:hover img,.pp-thumb.is-on img{opacity:1}
.pp-thumb.is-on{border-color:var(--navy-dark);box-shadow:0 0 0 1px var(--navy-dark)}
.pp-thumb:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}

/* ---------- details ---------- */
.pp-info{padding-top:4px}
.pp-brand{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;background:var(--yellow);color:var(--navy-dark);
  font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;transition:transform .2s}
.pp-brand::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--red)}
.pp-brand:hover{transform:translateY(-2px)}
.pp-title{margin:14px 0 10px;font-size:clamp(28px,3.4vw,42px);line-height:1.08;font-weight:800;letter-spacing:-.02em;color:var(--navy-dark)}
.pp-model{padding-bottom:18px;border-bottom:1px solid var(--card-line);font-size:14px;color:var(--muted)}
.pp-model b{font-weight:700;color:var(--navy-dark)}
.pp-desc{margin:18px 0 24px;font-size:15.5px;line-height:1.7;color:#4a4a60;max-width:560px}

.pp-buy{padding:22px;border-radius:18px;background:#fff;border:1px solid var(--card-line)}
.pp-price-row{display:flex;align-items:baseline;gap:10px}
.pp-price{font-size:34px;font-weight:800;letter-spacing:-.02em;color:#16132e;font-variant-numeric:tabular-nums}
.pp-unit{font-size:13px;font-weight:600;color:var(--muted)}

.pp-qty-row{display:flex;align-items:center;flex-wrap:wrap;gap:12px 16px;margin:18px 0 20px}
.pp-qty-label{font-size:14px;font-weight:700;color:var(--navy-dark)}
.pp-stepper{display:flex;align-items:center;border:1px solid var(--card-line);border-radius:12px;background:var(--soft);overflow:hidden}
.pp-stepper button{width:42px;height:42px;display:grid;place-items:center;color:var(--navy-dark);transition:background .2s,color .2s}
.pp-stepper button svg{width:14px;height:14px}
.pp-stepper button:hover:not(:disabled){background:var(--navy-dark);color:#fff}
.pp-stepper button:disabled{opacity:.35;cursor:default}
.pp-stepper input{width:52px;height:42px;border:0;background:#fff;text-align:center;font:inherit;font-size:15px;font-weight:700;color:var(--navy-dark);
  -moz-appearance:textfield;outline:none}
.pp-stepper input::-webkit-outer-spin-button,.pp-stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.pp-stepper input:focus-visible{box-shadow:inset 0 0 0 2px var(--yellow)}
.pp-stepper input.bump{animation:ppBump .3s var(--ease)}
@keyframes ppBump{40%{transform:scale(1.25)}}
.pp-total{margin-left:auto;font-size:13.5px;color:var(--muted)}
.pp-total b{display:inline-block;margin-left:4px;font-size:17px;font-weight:800;color:var(--navy-dark);font-variant-numeric:tabular-nums}
.pp-total b.bump{animation:ppBump .35s var(--ease)}

.pp-actions{display:flex;flex-wrap:wrap;gap:12px}
.pp-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:14px 22px;border-radius:12px;
  font-size:15px;font-weight:700;overflow:hidden;transition:background .25s,color .25s,border-color .25s,transform .15s,box-shadow .3s}
.pp-btn svg{width:16px;height:16px;flex-shrink:0}
.pp-btn:active{transform:scale(.97)}
.pp-btn:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
.pp-primary{flex:1 1 220px;background:var(--navy-dark);color:#fff;box-shadow:0 10px 24px rgba(26,21,102,.25)}
/* light sweep across the main button on hover */
.pp-primary::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.25) 50%,transparent 70%);
  transform:translateX(-100%);transition:transform .7s var(--ease)}
.pp-primary:hover{background:var(--navy)}
.pp-primary:hover::after{transform:translateX(100%)}
.pp-ghost{border:1.5px solid var(--card-line);background:#fff;color:var(--navy-dark)}
.pp-ghost:hover{border-color:var(--navy-dark)}

.pp-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:20px}
.pp-facts div{padding:14px 16px;border-radius:14px;background:#fff;border:1px solid var(--card-line);transition:transform .25s var(--ease),border-color .25s}
.pp-facts div:hover{transform:translateY(-3px);border-color:#d0d1ea}
.pp-facts dt{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.pp-facts dd{margin-top:4px;font-size:14px;font-weight:700;color:var(--navy-dark)}

/* ---------- related ---------- */
.pp-related{margin-top:72px}
.pp-rel-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:20px}
.pp-rel-head h2{font-size:clamp(22px,2.4vw,30px);font-weight:800;color:var(--navy-dark)}
.pp-rel-all{flex-shrink:0;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:700;color:var(--navy);border-bottom:2px solid var(--yellow)}
.pp-rel-all svg{width:14px;height:14px;transition:transform .25s}
.pp-rel-all:hover svg{transform:translateX(3px)}
.pp-rel-grid{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.pp-rel-item{display:flex;opacity:0;transform:translateY(18px);transition:opacity .5s var(--ease),transform .5s var(--ease);transition-delay:calc(var(--i,0) * .07s)}
.pp-rel-grid.is-in .pp-rel-item,.no-io .pp-rel-item{opacity:1;transform:none}
/* same look as the brand page cards: square photo on top, details below */
.pp-rel-card{flex:1;min-width:0;display:flex;flex-direction:column;border-radius:18px;background:#fff;border:1px solid var(--card-line);overflow:hidden;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s}
.pp-rel-card:hover{transform:translateY(-6px);border-color:#d9daf0}
.pp-rel-card:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
.pp-rel-media{position:relative;aspect-ratio:1/1;display:grid;place-items:center;background:var(--media);overflow:hidden}
.pp-rel-media img{position:absolute;inset:16%;width:68%;height:68%;object-fit:contain;mix-blend-mode:multiply;transition:transform .6s var(--ease)}
.pp-rel-card:hover .pp-rel-media img{transform:scale(1.08) translateY(-4px)}
.pp-rel-type{position:absolute;left:12px;top:12px;z-index:1;padding:4px 10px;border-radius:999px;background:#fff;box-shadow:0 1px 3px rgba(26,21,102,.08);
  font-size:11px;font-weight:700;color:var(--navy-dark);transition:background .3s,color .3s}
.pp-rel-card:hover .pp-rel-type{background:var(--navy-dark);color:#fff}
.pp-rel-body{display:flex;flex-direction:column;flex:1;padding:16px 18px 18px;border-top:1px solid var(--card-line)}
.pp-rel-model{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp-rel-model b{font-weight:700;color:var(--navy-dark)}
.pp-rel-card strong{margin:4px 0 14px;min-height:2.5em;font-size:16px;line-height:1.25;font-weight:800;color:var(--navy-dark);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pp-rel-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px}
.pp-rel-price{font-size:18px;font-weight:800;color:#16132e;font-variant-numeric:tabular-nums}
.pp-rel-go{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:#fff3d1;color:var(--navy-dark);transition:background .25s,color .25s}
.pp-rel-go svg{width:15px;height:15px;transition:transform .3s var(--ease)}
.pp-rel-card:hover .pp-rel-go{background:var(--navy-dark);color:#fff}
.pp-rel-card:hover .pp-rel-go svg{transform:translateX(2px)}

/* ---------- responsive ---------- */
@media (hover:none){
  .pp-stage{cursor:default}
  .pp-hint{display:none}
  .pp-nav{opacity:1;transform:none}
}
@media (max-width:960px){
  .pp-main{gap:28px}
  .pp-rel-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pp-facts{grid-template-columns:1fr 1fr}
  .pp-facts div:first-child{grid-column:1/-1}
}
/* photo above details once two columns get too narrow */
@media (max-width:700px){
  .pp-main{grid-template-columns:1fr}
  .pp-gallery{position:static}
}
@media (max-width:600px){
  .pp{padding:18px 0 72px}
  .pp-inner{padding:0 16px}
  .pp-crumb{font-size:12.5px;margin-bottom:16px}
  .pp-crumb a{padding:4px 6px}
  .pp-thumb{width:68px;height:68px}
  .pp-buy{padding:16px}
  .pp-price{font-size:28px}
  .pp-total{margin-left:0;width:100%}
  .pp-btn{flex:1 1 100%}
  .pp-rel-head h2{font-size:21px}
  .pp-rel-grid{gap:12px}
  .pp-rel-body{padding:12px 12px 14px}
  .pp-rel-card strong{font-size:14.5px}
  .pp-rel-price{font-size:16px}
  .pp-rel-go{width:32px;height:32px}
}
@media (prefers-reduced-motion:reduce){
  .pp *,.pp *::before,.pp *::after{animation:none!important;transition:none!important}
  .pp-rel-item{opacity:1;transform:none}
}

/* ---------- download brochure button ---------- */
.pp-dl svg path{stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.pp-dl:hover .pp-dl-arrow{animation:ppDrop .7s ease}
@keyframes ppDrop{40%{transform:translateY(3px)}70%{transform:translateY(-1px)}}

/* ---------- download brochure modal (reuses the quote modal's look) ---------- */
.bm .qm-dialog{max-width:520px}
.bm .quote-card{padding:32px}
.bm .qh h2{font-size:24px}
.bm .qh p b{color:var(--navy-dark)}
.bm-fields{display:grid;gap:16px}
/* Fields rise in one after another as the modal opens */
.bm.open .qh,.bm.open .bm-fields > .f,.bm.open .bm-actions{animation:qFadeUp .5s ease backwards}
.bm.open .qh{animation-delay:.08s}
.bm.open .bm-fields > .f:nth-child(1){animation-delay:.14s}
.bm.open .bm-fields > .f:nth-child(2){animation-delay:.2s}
.bm.open .bm-fields > .f:nth-child(3){animation-delay:.26s}
.bm.open .bm-actions{animation-delay:.32s}
.bm-actions{display:flex;justify-content:flex-end;margin-top:26px;padding-top:20px;border-top:1px solid var(--card-line,#ececf3)}
.bm .bm-btn{background:var(--yellow);color:var(--navy-dark)}
.bm .bm-btn:hover{background:var(--yellow-dark);box-shadow:0 10px 22px rgba(230,172,0,.35)}
.bm .bm-btn:hover svg{transform:translateY(2px)}
.bm .bm-btn .spin{border-color:rgba(26,21,102,.25);border-top-color:var(--navy-dark)}
.bm .done{padding:28px 6px 8px}
.bm .done h3{font-size:22px}
.bm-link{color:var(--navy);font-weight:700;text-decoration:underline;text-underline-offset:3px}
@media (max-width:560px){
  .bm .quote-card{padding:24px 20px}
  .bm-actions .bm-btn{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .bm.open .qh,.bm.open .bm-fields > .f,.bm.open .bm-actions,.pp-dl:hover .pp-dl-arrow{animation:none}
}