/* Open Edition art-print product pages (print-*.html, generated by
   scripts/build_art_print_pages.py). Loaded together with fine-art-gallery.css
   (page shell, kicker/link styling) and product-gallery.css (shared gallery
   arrows, quantity control, purchase-control row). It must load BEFORE
   product-gallery.css, exactly like the merch pages' page-local <style>, so
   the shared overrides win (visible arrows outside the image, horizontal
   thumbnail strip on mobile). The component rules below
   mirror the merch product pages' page-local styles (gallery, thumbnails,
   size select, Add to Cart) so product-gallery.js and cart.js behave
   identically; only the typography follows the painting pages. */

.product-row{
  display:grid;
  align-items:start;
  margin:0 auto;
  text-align:left;
}

.gallery-main{
  aspect-ratio:1/1;
  overflow:hidden;
  margin-bottom:16px;
  border:0;
  background:transparent;
}
.gallery-main img{width:100%; height:100%; object-fit:contain; transition:opacity .35s ease; background:transparent;}
.gallery-flex{display:flex; gap:14px; align-items:flex-start;}
.gallery-flex .gallery-main{flex:1; min-width:0; margin-bottom:0;}
.gallery-thumbs-vertical{
  position:relative; width:96px; flex-shrink:0; overflow-y:auto;
  display:flex; flex-direction:column; gap:10px; padding-right:6px;
  scrollbar-width:thin; scrollbar-color:var(--gold-antique) rgba(255,255,255,0.05);
}
.gallery-thumbs-vertical::-webkit-scrollbar{width:6px;}
.gallery-thumbs-vertical::-webkit-scrollbar-track{background:rgba(255,255,255,0.04);}
.gallery-thumbs-vertical::-webkit-scrollbar-thumb{background:var(--gold-antique); border-radius:3px;}
button.thumb{
  padding:0; border:1.5px solid rgba(201,162,39,0.3); background:rgba(10,10,12,0.5);
  width:100%; aspect-ratio:1/1; cursor:pointer; transition:border-color .2s; overflow:hidden; flex-shrink:0;
}
button.thumb.active, button.thumb:hover{border-color:var(--gold);}
button.thumb img{width:100%; height:100%; object-fit:contain; display:block;}

.product-info .painting-kicker{margin-bottom:14px;}
.product-title{
  margin-bottom:16px;
  color:var(--cream);
  font-size:clamp(34px,3.6vw,52px);
  line-height:1;
  text-wrap:balance;
}
.product-price{
  margin-bottom:26px;
  color:var(--gold);
  font-family:'Fjalla One',sans-serif;
  font-size:clamp(24px,2.2vw,30px);
  letter-spacing:.02em;
}
.product-desc{padding-top:26px; border-top:1px solid rgba(201,162,39,0.25);}
.product-desc p{margin-bottom:18px; color:var(--cream); font-size:17px; line-height:1.7; opacity:.9;}
.product-desc .desc-heading{
  margin:30px 0 10px;
  color:var(--gold-antique);
  font-family:'Cinzel',serif;
  font-size:11px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  line-height:1.4;
}
.product-desc .desc-heading:first-child{margin-top:0;}
.product-desc .desc-note{font-size:15px; opacity:.72;}
.product-desc ul.spec-list{margin:0 0 18px 22px; padding:0; color:var(--cream); font-size:17px; line-height:1.6; opacity:.9;}
.product-desc ul.spec-list li{margin-bottom:4px;}
.product-desc .original-link{
  display:inline-flex; align-items:center; gap:8px; min-height:44px; margin:-6px 0 12px;
  color:var(--gold); font-family:'Cinzel',serif; font-size:12px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
}
.product-desc .original-link:hover,
.product-desc .original-link:focus-visible{color:var(--cream);}
.product-desc .original-link:focus-visible{outline:1px solid var(--gold); outline-offset:4px;}
.product-desc details.compliance-disclosure{margin-bottom:18px; color:var(--cream); opacity:.9;}
.product-desc details.compliance-disclosure summary{
  cursor:pointer; color:var(--gold-antique); font-family:'Cinzel',serif; font-weight:600;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
}
.product-desc details.compliance-disclosure summary::marker{color:var(--gold);}
.product-desc details.compliance-disclosure[open] summary{margin-bottom:8px;}
.product-desc details.compliance-disclosure p{margin-bottom:18px;}
.product-desc details.compliance-disclosure p:last-child{margin-bottom:0;}

.btn-buy{
  display:inline-block;
  margin-top:8px; margin-right:14px;
  padding:14px 34px;
  border:1.5px solid var(--gold);
  background:var(--gold);
  color:var(--black);
  font-family:'Cinzel',serif;
  font-size:13px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .2s, color .2s, border-color .2s;
}
.btn-buy:hover,.btn-buy:focus-visible{background:transparent; color:var(--gold);}
.btn-buy:focus-visible{outline:2px solid var(--cream); outline-offset:3px;}
.buy-actions{display:flex; flex-wrap:wrap; align-items:center;}
.buy-note{margin-top:12px; font-size:13px; opacity:.6;}
.size-select-wrap{display:flex; align-items:center; gap:12px; margin-bottom:22px;}
.size-label{color:var(--gold-antique); font-family:'Cinzel',serif; font-size:12px; letter-spacing:.1em; text-transform:uppercase;}
.size-select{
  padding:8px 14px;
  border:1.5px solid rgba(201,162,39,0.4);
  background:rgba(10,10,12,0.6);
  color:var(--cream);
  font-family:'EB Garamond',serif;
  font-size:15px;
  cursor:pointer;
}
.size-select:focus{outline:none; border-color:var(--gold);}
.size-select:focus-visible{outline:2px solid var(--gold); outline-offset:2px;}


/* Sensitive print pages (nudity blur): the dimming overlay covers the whole
   gallery (main image + thumbnail rail), but its "Contains artistic nudity"
   panel is centred on the MAIN image, i.e. between the gallery arrows.
   Desktop: the rail (96px) plus the flex gap (14px) sit to the right of the
   main image, whose own margins (product-gallery.css) are symmetric, so
   reserving 110px on the right centres the panel on it; the rail is set to
   the image's height by product-gallery.js, so vertical centre already
   matches. Phone: the thumbnails sit below, so a square slot as wide as the
   image (gallery width less the 40px arrow margins, product-gallery.css)
   holds the panel at the top of the overlay. If those widths change, change
   them here too. See PROJECT_NOTES.md "Sensitive artwork (nudity blur)". */
.print-gallery-sensitive>.sensitive-overlay{padding:16px 126px 16px 16px;}
@media (max-width:860px){
  .print-gallery-sensitive>.sensitive-overlay{
    display:grid; grid-template-columns:minmax(0,1fr); align-content:start; padding:0;
  }
  .print-gallery-sensitive>.sensitive-overlay::before{
    content:""; grid-area:1/1; margin:0 40px; aspect-ratio:1/1; pointer-events:none;
  }
  .print-gallery-sensitive>.sensitive-overlay>.sensitive-panel{
    grid-area:1/1; align-self:center; justify-self:center; max-width:calc(100% - 32px);
  }
}

@media (max-width:860px){
  .print-page .product-row{gap:36px;}
}
@media (max-width:680px){
  .product-title{font-size:clamp(32px,10vw,44px);}
  .product-desc p,.product-desc ul.spec-list{font-size:16.5px;}
}