/* HUASMC product detail pages */

.pd-crumbs{
  display:flex;align-items:center;gap:9px;padding:22px 0 0;
  font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)
}
.pd-crumbs a:hover{color:var(--ink)}
.pd-crumbs span{opacity:.45}

.pd-hero{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(34px,6vw,90px);align-items:start;
  padding:clamp(30px,5vw,64px) 0 clamp(54px,7vw,92px)
}
.pd-copy{padding-top:clamp(0px,2vw,18px)}
.pd-copy h1{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(46px,6vw,92px);line-height:.94;
  letter-spacing:-.035em;margin-top:18px;color:var(--ink)
}
.pd-copy h1 em{color:var(--clay)}
.pd-lede{
  margin-top:24px;max-width:540px;color:var(--muted);
  font-size:15px;line-height:1.85
}
.pd-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:26px}
.pd-actions .btn{min-height:46px;padding:0 20px;font-size:9px}
.pd-actions .text-link{font-size:9px}
.pd-facts{
  display:grid;grid-template-columns:1fr 1fr;gap:0;
  margin:34px 0 0;border-top:1px solid var(--line)
}
.pd-facts > div{
  padding:15px 16px 14px 0;border-bottom:1px solid var(--line)
}
.pd-facts > div:nth-child(even){padding-left:18px;border-left:1px solid var(--line)}
.pd-facts dt{font-size:8px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.pd-facts dd{margin:5px 0 0;font-size:13px;line-height:1.5;color:var(--ink)}

.pd-media{
  margin:0;position:relative;background:#e7f2f6;overflow:hidden;
  aspect-ratio:4/5;border:1px solid rgba(18,39,47,.1)
}
.pd-media img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.8) hue-rotate(-6deg)}
.pd-media--contain img{object-fit:contain;padding:9%;background:#f7fbfd}
.pd-media figcaption{
  position:absolute;left:14px;bottom:14px;
  background:rgba(250,254,255,.8);backdrop-filter:blur(10px);
  padding:6px 9px;font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:#3d616d
}

.pd-section{padding:clamp(56px,7vw,96px) 0;border-top:1px solid var(--line)}
.pd-section--alt{background:linear-gradient(180deg,#f8fdfe,#eaf5f9)}
.pd-sec-head{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:end;margin-bottom:clamp(28px,4vw,46px)}
.pd-sec-head h2{font-size:clamp(34px,4.4vw,64px);line-height:1.02;margin-top:14px;color:var(--ink)}
.pd-sec-head h2 em{color:var(--clay)}
.pd-sec-head > p{max-width:390px;justify-self:end;color:var(--muted);font-size:13px;line-height:1.9}
.pd-two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,6vw,90px);align-items:start}
.pd-two .lede{font-family:var(--serif);font-size:clamp(21px,2.2vw,30px);line-height:1.45;letter-spacing:-.01em;color:var(--ink)}
.pd-two p:not(.lede){font-size:13.5px;line-height:1.95;color:var(--muted);max-width:480px}

.pd-specs{border-top:1px solid var(--line)}
.pd-spec-row{
  display:grid;grid-template-columns:minmax(150px,.34fr) 1fr;
  gap:20px;padding:14px 0;border-bottom:1px solid var(--line);
  font-size:13px;line-height:1.7
}
.pd-spec-row dt{font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);padding-top:2px}
.pd-spec-row dd{margin:0;color:var(--ink)}

.pd-series{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.pd-series article{border-top:1px solid var(--line);padding-top:15px}
.pd-series span{font-size:8px;letter-spacing:.16em;text-transform:uppercase;color:var(--clay)}
.pd-series h3{font-size:20px;margin-top:9px;color:var(--ink)}
.pd-series p{font-size:12px;line-height:1.8;color:var(--muted);margin-top:7px;max-width:280px}

.pd-related{background:linear-gradient(180deg,#f8fdfe,#e9f4f8);border-top:1px solid var(--line);padding:clamp(56px,7vw,96px) 0}
.pd-related__head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:30px}
.pd-related__head h2{font-size:clamp(30px,3.6vw,48px);color:var(--ink);margin-top:10px}
.pd-related__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.pd-related__item{display:flex;flex-direction:column;gap:9px}
.pd-related__item img{width:100%;aspect-ratio:4/3;object-fit:cover;background:#e7f2f6}
.pd-related__item span{font-size:8px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.pd-related__item h3{font-size:20px;color:var(--ink)}
.pd-related__item:hover h3{color:var(--clay)}

.pd-cta{background:linear-gradient(rgba(250,254,255,.9),rgba(241,250,253,.94)),url("../img/marble-ice.webp?v=5") center/cover;border-top:1px solid var(--line);padding:clamp(56px,7vw,90px) 0}
.pd-cta__inner{display:flex;align-items:end;justify-content:space-between;gap:30px}
.pd-cta h2{font-size:clamp(32px,4vw,56px);line-height:1.02;color:var(--ink)}
.pd-cta p{max-width:360px;color:var(--muted);font-size:13px;line-height:1.8;margin-top:10px}
.pd-cta .btn{flex:none}

@media(max-width:1050px){
  .pd-hero{grid-template-columns:1fr;gap:34px}
  .pd-media{aspect-ratio:4/3;max-width:760px}
  .pd-sec-head,.pd-two{grid-template-columns:1fr;gap:18px}
  .pd-sec-head > p{justify-self:start}
  .pd-cta__inner{flex-direction:column;align-items:flex-start}
}
@media(max-width:820px){
  .pd-hero{padding-top:22px}
  .pd-copy h1{font-size:clamp(42px,11vw,64px)}
  .pd-media{aspect-ratio:4/5}
  .pd-facts{grid-template-columns:1fr}
  .pd-facts > div:nth-child(even){padding-left:0;border-left:0}
  .pd-spec-row{grid-template-columns:1fr;gap:4px}
  .pd-series,.pd-related__grid{grid-template-columns:1fr}
  .pd-related__item img{aspect-ratio:4/3}
  .pd-section{padding:48px 0}
}

@media(max-width:820px){
  .pd-crumbs{flex-wrap:wrap;row-gap:6px;font-size:8px;line-height:1.5}
  .pd-crumbs > span:nth-last-child(2),.pd-crumbs > span:last-child{display:none}
}

/* size matrix */
.pd-matrix-wrap{overflow-x:auto;border:1px solid var(--line);background:rgba(255,255,255,.62)}
.pd-matrix{width:100%;min-width:620px;border-collapse:collapse;font-size:12px;line-height:1.5}
.pd-matrix caption{caption-side:top;text-align:left;padding:12px 14px;font-size:8px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line)}
.pd-matrix th,.pd-matrix td{padding:11px 14px;border-bottom:1px solid rgba(18,39,47,.1);border-right:1px solid rgba(18,39,47,.1);text-align:left;vertical-align:top}
.pd-matrix thead th{font-size:8px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--muted);background:rgba(233,246,250,.55)}
.pd-matrix tbody th{font-size:11px;font-weight:500;color:var(--ink);background:rgba(248,253,254,.5)}
.pd-matrix td{color:var(--ink)}
.pd-matrix td.is-empty{color:rgba(18,39,47,.2)}
.pd-matrix tr:last-child th,.pd-matrix tr:last-child td{border-bottom:0}

/* align the right-hand overview copy with the right column above */
.pd-two > p:not(.lede){justify-self:end;width:100%;max-width:390px}