/* One drywall-screw family: gallery and two-step dimension selector. */
.product[data-family="drywall-screws"] { border-color:#eac893; }
.product[data-family="drywall-screws"] .drywall-card-photo { display:grid; place-items:center; background:#f8f6f1; }
.product[data-family="drywall-screws"] .drywall-card-photo img { width:100%; height:100%; object-fit:contain; padding:4px; mix-blend-mode:normal; }
.public-preview .product[data-family="drywall-screws"] .price { display:block; color:#443025; font-size:1.05rem; }
.public-preview .product[data-family="drywall-screws"] .demo-price-label { display:block; max-width:130px; color:#8a6b51; font-size:.58rem; line-height:1.25; }
#detailDialog.drywall-detail-dialog .detail-price { display:flex; align-items:baseline; flex-wrap:wrap; }
#detailDialog.drywall-detail-dialog .detail-price strong { color:#4d3323; }
#detailDialog.drywall-detail-dialog .detail-price span { max-width:240px; }
.drywall-gallery { margin-top:12px; }
.drywall-gallery-stage { position:relative; display:grid; place-items:center; min-height:330px; border:1px solid #eee5d8; border-radius:18px; background:#f8f6f1; overflow:hidden; }
.drywall-gallery-stage img { display:block; width:100%; height:330px; padding:16px; object-fit:contain; }
.drywall-gallery-stage button { position:absolute; top:50%; z-index:2; display:grid; place-items:center; width:38px; height:38px; padding:0; border:1px solid #e7d9c5; border-radius:50%; background:#fffffff0; color:#574231; font-size:1.65rem; line-height:1; transform:translateY(-50%); box-shadow:0 2px 9px #33271921; }
.drywall-gallery-stage button:first-child { left:9px; }
.drywall-gallery-stage button:last-child { right:9px; }
.drywall-gallery-thumbs { display:flex; gap:9px; margin-top:10px; }
.drywall-gallery-thumbs button { width:69px; height:69px; padding:3px; border:1px solid #e5d9c8; border-radius:12px; background:#fff; overflow:hidden; }
.drywall-gallery-thumbs button[aria-pressed="true"] { border:2px solid #d95d30; padding:2px; box-shadow:0 0 0 2px #fbe7d5; }
.drywall-gallery-thumbs img { width:100%; height:100%; object-fit:contain; border-radius:8px; }
.drywall-photo-note { margin:10px 0 0!important; color:#766a5e!important; font-size:.68rem!important; line-height:1.4; }
#detailDialog.drywall-detail-dialog .detail-gallery-note { display:none; }
.drywall-size-picker { margin-top:12px; }
.drywall-picker-title { display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin:18px 0 8px!important; color:#352820!important; font-size:.84rem!important; font-weight:800; }
.drywall-picker-title small { color:#8a7564; font-size:.65rem; font-weight:500; text-align:right; }
.drywall-diameter-options,.drywall-length-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.drywall-diameter-options button,.drywall-length-options button { min-height:44px; padding:8px; border:1px solid #dbcfc0; border-radius:11px; background:#fff; color:#43362d; font-size:.78rem; font-weight:700; }
.drywall-diameter-options button[aria-pressed="true"],.drywall-length-options button[aria-pressed="true"] { border:2px solid #d95d30; background:#fff0e2; color:#8f3f24; }
.drywall-diameter-options button:hover,.drywall-length-options button:hover { border-color:#d95d30; }
.drywall-size-selected { margin:13px 0 6px!important; color:#574635!important; font-size:.76rem!important; }
.drywall-size-explainer { display:flex; align-items:center; gap:12px; margin:10px 0; padding:10px 12px; border:1px solid #e5e9db; border-radius:12px; background:#f6f8f0; }
.drywall-size-explainer svg { flex:none; width:110px; max-width:36%; height:63px; }
.drywall-size-explainer strong,.drywall-size-explainer span,.drywall-size-explainer small { display:block; }
.drywall-size-explainer strong { margin-bottom:4px; color:#3d4d38; font-size:.69rem; }
.drywall-size-explainer span { color:#4d5e49; font-size:.67rem; line-height:1.4; }
.drywall-size-explainer small { margin-top:3px; color:#7b8875; font-size:.58rem; }
.drywall-pack-note { margin:0 0 6px!important; padding:9px 11px; border-radius:10px; background:#fff4e3; color:#835a36!important; font-size:.69rem!important; line-height:1.4; }
@media (max-width:800px) {
  #detailDialog.drywall-detail-dialog .detail-gallery { margin:0; }
  .drywall-gallery-stage { min-height:240px; }
  .drywall-gallery-stage img { height:240px; padding:8px 18px; }
  .drywall-gallery-thumbs button { width:59px; height:59px; }
  .drywall-picker-title { margin-top:14px!important; }
}