.sku-button {
  align-items: center;
  display: flex;
  gap: 16px;
  justify-content: space-between;
}

.sku-button small {
  color: var(--ocean);
  flex: none;
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.sku-button:hover small { color: var(--cyan); }

.visual-sku-button { display:grid; grid-template-columns:108px 1fr; gap:0; min-height:94px; overflow:hidden; padding:0; }
.visual-sku-button > img { background:#f1f2ef; height:100%; min-height:94px; object-fit:contain; padding:7px; width:108px; }
.visual-sku-button.photo-sku-button > img { object-fit:cover; padding:0; }
.visual-sku-button > span { align-self:stretch; display:flex; flex-direction:column; justify-content:center; padding:15px 17px; }
.visual-sku-button > span b { font-size:12px; }
.visual-sku-button > span small { margin-top:7px; }

.final-product li strong {
  color: var(--ink);
  display: inline-block;
  min-width: 110px;
}

.spec-heading { align-items: baseline; display: flex; justify-content: space-between; margin-top: 28px; }
.spec-heading span { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.spec-heading small { color: var(--muted); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.spec-table-wrap { border: 1px solid var(--line); margin: 12px 0 28px; overflow: hidden; }
.spec-table { border-collapse: collapse; table-layout: fixed; width: 100%; }
.spec-table tr:nth-child(even) { background: #f0f2f1; }
.spec-table th,.spec-table td { border-bottom: 1px solid var(--line); font-size: 12px; line-height: 1.45; padding: 15px 17px; text-align: left; vertical-align: top; }
.spec-table tr:last-child th,.spec-table tr:last-child td { border-bottom: 0; }
.spec-table th { color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; width: 36%; }
.spec-table td { color: var(--ink); font-weight: 600; }

@media (max-width: 520px) {
  .spec-table th,.spec-table td { display: block; padding: 10px 13px; width: 100%; }
  .spec-table th { border-bottom: 0; padding-bottom: 2px; }
  .spec-table td { padding-top: 3px; }
}

.technical-drawing { background:#071016; border:1px solid var(--line); display:none; margin:22px 0; padding:14px; position:relative; text-decoration:none; }
.technical-drawing.visible { display:block; }
.technical-drawing img { display:block; max-height:310px; object-fit:contain; width:100%; }
.technical-drawing span { background:rgba(4,23,34,.88); bottom:14px; color:#fff; font-size:9px; font-weight:800; letter-spacing:.08em; padding:9px 12px; position:absolute; right:14px; text-transform:uppercase; }

.product-modal article.product-browser { grid-template-columns:minmax(390px,.72fr) minmax(600px,1.28fr); width:min(1380px,96vw); }
.technical-drawing { padding:20px; }
.technical-drawing img { height:auto; margin:auto; max-height:none; max-width:100%; width:min(700px,100%); }
.drawing-lightbox { align-items:center; background:rgba(2,12,18,.96); display:none; inset:0; justify-content:center; padding:30px; position:fixed; z-index:300; }
.drawing-lightbox.open { display:flex; }
.drawing-lightbox img { height:auto; max-height:92vh; object-fit:contain; width:min(800px,90vw); }
.drawing-lightbox button { background:#fff; border:0; border-radius:50%; cursor:pointer; font-size:24px; height:42px; position:absolute; right:25px; top:22px; width:42px; }
.technical-drawing.drawing-only { height:155px; overflow:hidden; }
.technical-drawing.drawing-only img { max-height:none; position:relative; top:0; width:min(545px,100%); }
.spec-table-wrap { overflow-x:auto; }
.spec-table .data-head th { background:var(--navy); color:#fff; font-size:10px; padding:13px 15px; white-space:nowrap; width:auto; }
.spec-table .data-row td { border-right:1px solid var(--line); font-variant-numeric:tabular-nums; padding:13px 15px; text-align:center; white-space:nowrap; }
.spec-table .data-row td:first-child { font-weight:800; text-align:left; }
.spec-table .data-row td:last-child { border-right:0; }

.modal-image img.project-photo { height:100%; object-fit:cover; width:100%; }
.project-gallery { display:none; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:22px 0 8px; }
.project-gallery.visible { display:grid; }
.project-gallery button { aspect-ratio:16/10; background:var(--navy); border:0; cursor:pointer; overflow:hidden; padding:0; position:relative; }
.project-gallery img { height:100%; object-fit:cover; transition:transform .35s; width:100%; }
.project-gallery button:hover img { transform:scale(1.05); }
.project-gallery span { background:rgba(4,23,34,.82); bottom:8px; color:#fff; display:grid; font-size:8px; font-weight:800; height:25px; place-items:center; position:absolute; right:8px; width:25px; }

@media(max-width:1000px){
  .product-modal article.product-browser{display:block;overflow:auto;width:94vw}
  .product-browser .modal-image{height:300px}
  .technical-drawing img{width:min(650px,100%)}
}

@media(max-width:520px){
  .spec-table:has(.data-head){min-width:520px}
  .spec-table .data-head th,.spec-table .data-row td{display:table-cell;width:auto}
  .visual-sku-button{grid-template-columns:92px 1fr}
  .visual-sku-button>img{width:92px}
}

/* Keep large technical documents inside a stable product-detail viewport. */
.product-modal article.product-browser { height:min(780px,90vh); min-height:0; overflow:hidden; }
.product-browser .modal-image { height:100%; min-height:0; }
.product-browser .modal-copy { height:100%; min-height:0; overflow-y:auto; }
.technical-drawing { display:none; text-align:center; }
.technical-drawing.visible { display:block; }
.technical-drawing img { height:auto; max-height:460px; max-width:100%; width:auto; }
.drawing-lightbox img { height:auto; max-height:90vh; max-width:90vw; width:min(700px,90vw); }

@media(max-width:1000px){
  .product-modal article.product-browser{display:block;height:92vh;overflow:auto}
  .product-browser .modal-image{height:260px}
  .product-browser .modal-copy{height:auto;overflow:visible}
  .technical-drawing img{max-height:430px;width:auto}
}