/* ---------- product hero ---------- */
.product-hero{padding:64px 32px 80px;}
.product-hero .wrap, .product-details .wrap, .spec-section .wrap{padding-left:0; padding-right:0;}
.product-hero-grid{display:grid; grid-template-columns:1fr 1.2fr; gap:56px; align-items:center;}
.product-hero .photo{
  background:var(--card-bg);
  border-radius:6px;
  padding:48px;
  display:flex; align-items:center; justify-content:center;
  min-height:456px;
  box-sizing:border-box;
}
.product-hero .photo img{max-width:100%; max-height:360px; object-fit:contain;}

.product-hero .photo.product-gallery{position:relative;}
.gallery-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,0.92); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--ink); padding:0;
  transition:background 0.15s;
}
.gallery-arrow:hover{background:#fff;}
.gallery-arrow svg{width:18px; height:18px;}
.gallery-prev{left:14px;}
.gallery-next{right:14px;}
.gallery-dots{position:absolute; bottom:14px; left:50%; transform:translateX(-50%); display:flex; gap:8px;}
.gallery-dots .dot{width:7px; height:7px; border-radius:50%; background:rgba(10,21,34,0.2); cursor:pointer; padding:0; border:none;}
.gallery-dots .dot.active{background:var(--accent);}
.product-hero .info .tag{
  display:inline-block;
  font-family:'IBM Plex Mono',monospace;
  font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--accent);
  border:1px solid var(--line);
  border-radius:14px;
  padding:6px 14px;
  margin-bottom:18px;
}
.product-hero h1{font-size:clamp(1.9rem,4vw,2.8rem); max-width:600px;}
.product-hero .lede{color:var(--paper-dim); margin-top:18px; max-width:520px; font-size:1.02rem;}

.feature-list{list-style:none; margin-top:32px; display:grid; grid-template-columns:1fr 1fr; gap:12px 24px;}
.feature-list li{
  display:flex; align-items:flex-start; gap:10px;
  font-size:0.92rem; color:var(--paper);
}
.feature-list li svg{flex:0 0 auto; width:16px; height:16px; margin-top:3px; color:var(--accent);}

.product-hero .actions{margin-top:36px; display:flex; gap:16px; flex-wrap:wrap;}

/* ---------- technical info + description ---------- */
.product-details{padding:0 32px 80px;}
.details-grid{display:grid; grid-template-columns:320px 1fr; gap:56px; align-items:start;}
.details-grid .plate{position:sticky; top:110px;}
.details-grid .plate-row .val{text-align:right;}
.details-copy p{color:var(--paper-dim); margin-bottom:18px; font-size:0.98rem; max-width:640px;}

/* ---------- spec table ---------- */
.spec-section{padding:64px 32px 90px; background:var(--steel);}
.spec-with-diagram{display:grid; grid-template-columns:320px 1fr; gap:32px; align-items:start;}
.spec-with-diagram > *{min-width:0;}
.spec-diagram{
  position:sticky; top:110px;
  background:var(--card-bg);
  border-radius:6px;
  padding:20px;
}
.spec-diagram img{width:100%; height:auto; display:block;}
.spec-diagram-caption{
  margin-top:10px;
  font-family:'IBM Plex Mono',monospace;
  font-size:0.68rem; letter-spacing:0.04em; text-transform:uppercase;
  color:var(--paper-dim); text-align:center;
}
.spec-table-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--line); border-radius:6px;}
.spec-table{width:100%; border-collapse:collapse; table-layout:auto; font-size:0.86rem;}
.spec-table thead th{
  background:var(--steel-2);
  font-family:'IBM Plex Mono',monospace;
  font-size:0.66rem; letter-spacing:0.02em; text-transform:uppercase;
  color:var(--paper-dim);
  text-align:left; padding:14px 9px;
  border-bottom:1px solid var(--line);
  white-space:nowrap;
  line-height:1.35;
}
.spec-table tbody td{
  padding:11px 9px;
  border-bottom:1px solid var(--line);
  color:var(--paper);
  white-space:nowrap;
}
.spec-table tbody tr:last-child td{border-bottom:none;}
.spec-table tbody tr:hover{background:rgba(79,143,209,0.06);}
.spec-note{margin-top:14px; font-size:0.8rem; color:var(--paper-dim);}

@media (max-width:900px){
  .product-hero-grid{grid-template-columns:1fr;}
  .product-hero .photo{position:static;}
  .details-grid{grid-template-columns:1fr;}
  .details-grid .plate{position:static;}
  .spec-with-diagram{grid-template-columns:1fr;}
  .spec-diagram{position:static; max-width:420px; margin:0 auto 20px;}
}

@media (max-width:600px){
  .product-hero, .product-details, .spec-section{padding-left:20px; padding-right:20px;}
  .feature-list{gap:10px 16px;}
  .feature-list li{font-size:0.82rem; gap:8px;}
  .feature-list li svg{width:14px; height:14px; margin-top:2px;}
}

@media (max-width:700px){
  .spec-table{font-size:0.8rem;}
  .spec-table thead th{padding:12px 10px; font-size:0.66rem;}
  .spec-table tbody td{padding:10px 10px;}
  .spec-table th:first-child, .spec-table td:first-child{position:sticky; left:0; z-index:1;}
  .spec-table thead th:first-child{background:var(--steel-2);}
  .spec-table tbody td:first-child{background:var(--steel); box-shadow:1px 0 0 var(--line);}
}

@media (max-width:700px){
  .product-hero .photo{padding:16px; min-height:0;}
  .product-hero .photo img{width:100%; height:auto; max-height:420px;}
}

.spec-diagram-wide{position:static; margin-bottom:28px; padding:24px;}
.spec-diagram-wide img{max-width:940px; margin:0 auto;}
.spec-diagram-wide .spec-diagram-caption{text-align:center;}

.spec-subhead{font-family:'IBM Plex Mono',monospace; font-size:0.74rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--accent); margin:26px 0 10px; font-weight:500;}
.spec-subhead:first-child{margin-top:0;}
.spec-table-text tbody td{white-space:normal; vertical-align:top; line-height:1.55; font-size:0.84rem;}
.spec-table-text tbody td:first-child{white-space:nowrap; width:1%;}
.spec-table-text thead th{white-space:nowrap;}

.spec-with-diagram-wide{grid-template-columns:470px 1fr;}
@media (max-width:900px){.spec-with-diagram-wide{grid-template-columns:1fr;}}

.gallery-dots .dot{position:relative;}
.gallery-dots .dot::after{content:""; position:absolute; inset:-12px -6px;}
@media (max-width:700px){.gallery-dots{gap:14px;}}

@media (max-width:900px){
  .spec-diagram img{width:auto; max-width:100%; max-height:440px; margin:0 auto;}
}

@media (max-width:700px){
  .spec-diagram-wide, .spec-with-diagram-wide .spec-diagram{overflow-x:auto; -webkit-overflow-scrolling:touch;}
  .spec-diagram-wide img, .spec-with-diagram-wide .spec-diagram img{width:var(--wide-min,720px); max-width:none; max-height:none; min-width:0; height:auto; margin:0;}
  .spec-diagram-wide, .spec-with-diagram-wide .spec-diagram{max-width:100%; width:100%;}
  .spec-with-diagram-wide{grid-template-columns:minmax(0,1fr);}
  .spec-diagram-wide .spec-diagram-caption, .spec-with-diagram-wide .spec-diagram-caption{position:sticky; left:0; width:calc(100vw - 80px); max-width:100%;}
  .spec-diagram-wide .spec-diagram-caption::after, .spec-with-diagram-wide .spec-diagram-caption::after{content:' (swipe to see full drawing)';}
}

/* gallery: real photos fill the box, cut-outs stay padded */
.product-hero .photo.product-gallery.has-photos{min-height:456px;}
.product-gallery.is-photo{padding:0; overflow:hidden;}
.product-hero .photo.product-gallery.is-photo .gallery-image{position:absolute; inset:0; width:100%; height:100%; max-width:none; max-height:none; object-fit:cover;}
.product-gallery.is-photo .gallery-dots .dot{background:rgba(255,255,255,0.7); box-shadow:0 0 0 1px rgba(10,21,34,0.25);}
.product-gallery.is-photo .gallery-dots .dot.active{background:var(--accent);}
@media (max-width:900px){.product-hero .photo.product-gallery.has-photos{min-height:340px;}}
.spec-diagram img.blend-multiply{mix-blend-mode:multiply;}

/* solar marine lanterns */
.lantern-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.lantern-card{background:var(--card-bg); color:var(--ink); border-radius:6px; padding:28px; display:flex; flex-direction:column; align-items:flex-start;}
.lantern-card-img{align-self:stretch; height:200px; display:flex; align-items:flex-end; justify-content:center; margin-bottom:20px;}
.lantern-card-img img{max-width:100%; max-height:100%; object-fit:contain;}
.lantern-card h3{font-family:'Archivo Expanded',sans-serif; font-size:1.5rem; font-weight:800; letter-spacing:0.02em; color:var(--ink);}
.lantern-sub{font-family:'IBM Plex Mono',monospace; font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; color:#4a5a70; margin:6px 0 14px;}
.lantern-range{background:#dfe9f6; color:#123b67; font-weight:600; font-size:0.9rem; padding:9px 14px; border-radius:4px; margin-bottom:16px; align-self:stretch;}
.lantern-card p{font-size:0.92rem; line-height:1.6; color:#2f3b4c; margin-bottom:22px; flex:1;}
.lantern-dot{display:inline-block; width:11px; height:11px; border-radius:50%; margin-right:10px; vertical-align:-1px; box-shadow:0 0 0 1px rgba(255,255,255,0.35);}
.lantern-dims{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.lantern-dim{background:var(--card-bg); color:var(--ink); border-radius:6px; padding:22px 18px 14px; margin:0;}
.lantern-dim figcaption{display:flex; flex-direction:column; gap:3px; margin-bottom:6px;}
.lantern-dim figcaption strong{font-family:'Archivo Expanded',sans-serif; font-size:1.1rem; font-weight:800;}
.lantern-dim figcaption span{font-family:'IBM Plex Mono',monospace; font-size:0.7rem; letter-spacing:0.06em; color:#4a5a70;}
.lantern-dim-img{display:block; width:100%; max-width:300px; height:auto; margin:6px auto 0; mix-blend-mode:multiply;}
.lantern-apps{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.lantern-app{border:1px solid var(--line); border-radius:6px; padding:24px 26px;}
.lantern-app h4{font-family:'Archivo Expanded',sans-serif; font-size:1.05rem; font-weight:800; color:var(--paper); margin-bottom:14px;}
.lantern-app ul{list-style:none; display:grid; gap:8px;}
.lantern-app li{color:var(--paper-dim); font-size:0.9rem; padding-left:16px; position:relative;}
.lantern-app li::before{content:""; position:absolute; left:0; top:0.62em; width:5px; height:5px; border-radius:50%; background:var(--accent);}
@media (max-width:900px){
  .lantern-cards, .lantern-dims, .lantern-apps{grid-template-columns:1fr;}
  .lantern-card{padding:22px;}
}
.product-hero .photo.photo-wide{padding:20px;} .product-hero .photo.photo-wide img{max-height:none;}