/* Scaffolding product page specific styles */
.scaffolding-page .scaffolding-layout { display:flex; gap:24px; }
.scaffolding-page .scaffolding-essential { flex:1 1 35%; }
.scaffolding-page .scaffolding-collateral { flex:1 1 65%; position:relative; }

.scaffolding-page .scaffolding-name h1 { margin: 0 0 8px; font-size: 1.8rem; }
.scaffolding-page .scaffolding-shelf-place span { padding:4px 6px; display:inline-block; }

.scaffolding-page #attributes-container { position:relative; z-index:3; overflow:visible; }
.scaffolding-page .ui.dropdown .menu, .scaffolding-page .menu.transition.visible { z-index: 1002 !important; }

.scaffolding-page .scaffolding-segment { margin-bottom:12px; }
.scaffolding-page .scaffolding-segment-title { font-size:12px; margin-bottom:8px; color:#000; }
.scaffolding-page .scaffolding-help-text { font-size:12px; color:#666; }

.scaffolding-page .scaffolding-preset-buttons { display:flex; flex-wrap:wrap; gap:6px; }

.scaffolding-page .scaffolding-table { width:100%; border-collapse: collapse; table-layout: fixed; color: #000}
.scaffolding-page .scaffolding-table thead th { text-align:left; padding:8px; border-bottom:1px solid #eee; font-weight:600; }
.scaffolding-page .scaffolding-table tbody td { padding:8px; border-bottom:1px solid #f3f3f3; vertical-align:middle; }

/* column widths: 1st auto, 2nd 80px, 3rd 200px */
.scaffolding-page .scaffolding-col-name { width:auto; }
.scaffolding-page .scaffolding-col-sku { width:80px; }
.scaffolding-page .scaffolding-col-qty { width:164px; }

/* reinforce widths on cells */
.scaffolding-page .scaffolding-table th:nth-child(1),
.scaffolding-page .scaffolding-table td:nth-child(1) { width: calc(100% - 280px); }
.scaffolding-page .scaffolding-table th:nth-child(2),
.scaffolding-page .scaffolding-table td:nth-child(2) { width:80px; white-space:nowrap; }
.scaffolding-page .scaffolding-table th:nth-child(3),
.scaffolding-page .scaffolding-table td:nth-child(3) { width:164px; text-align:center; }

/* avoid third column expanding by overflowing content */
.scaffolding-page .scaffolding-table td:nth-child(3) { overflow:hidden; }

.scaffolding-page .scaffolding-variant-meta { display:flex; flex-direction:column; gap:6px; }
.scaffolding-page .scaffolding-variant-name { line-height:1.2;  }
.scaffolding-page .scaffolding-variant-img { width:56px; height:56px; object-fit:contain; }

.scaffolding-page .scaffolding-qty { display:flex; align-items:center; gap:6px; justify-content:space-around; }
.scaffolding-page .scaffolding-qty-btn { padding:4px 10px; line-height:1; min-width:28px; }
.scaffolding-page .scaffolding-qty-input { width:56px; text-align:center; height:28px; padding:2px 6px; border-radius:4px; }

.scaffolding-page .scaffolding-actions { margin-top:12px; display:flex; justify-content:flex-end; }
#scaffold-add-all { background-color: #03564a;}
/* responsive */
@media (max-width: 600px) {
  .scaffolding-page .scaffolding-layout { flex-direction:column; gap:16px; }
  .scaffolding-page .scaffolding-variant-img { width:64px; height:64px; }
  .scaffolding-page .scaffolding-table thead { display:none; }
  
  .scaffolding-page .scaffolding-table tbody, 
  .scaffolding-page .scaffolding-table tr, 
  .scaffolding-page .scaffolding-table td { display:block; width:100%; }
  .scaffolding-page .scaffolding-table tr { border:1px solid #eee; margin-bottom:10px; padding:8px; }
  .scaffolding-page .scaffolding-table td { border:none; padding:4px 0; }
  .scaffolding-page .scaffolding-qty { justify-content:flex-start; }
}

 .scaffolding-collateral { position: relative; }
  #attributes-container { position: relative; z-index: 3; overflow: visible; }
  .ui.dropdown .menu, .menu.transition.visible { z-index: 1002 !important; }

  .scaffolding-variant-list .scaffolding-table thead th { font-weight: 600; }
  .scaffolding-variant-meta { display:flex; flex-direction:column; gap:6px; }
  .scaffolding-variant-name { line-height:1.2; }
  .scaffolding-variant-img { width:56px; height:56px; object-fit:contain; }

  .scaffolding-qty { display:flex; align-items:center; gap:6px; justify-content:flex-end; }
  .scaffolding-qty-btn { padding:4px 10px; line-height:1; min-width:28px; }
  .scaffolding-qty-input { width:56px; text-align:center; height:28px; padding:2px 6px; border-radius:4px; }

  .scaffolding-segment { margin-bottom:12px; }
  .scaffolding-segment-title { font-size:12px; margin-bottom:8px; color:#000; }
  .scaffolding-help-text { font-size:12px;  color:#666; }
  .scaffolding-actions { margin-top:12px; display:flex; justify-content:flex-end; }
  .scaffolding-preset-buttons { display:flex; flex-wrap:wrap; gap:6px; max-width: 290px; }
  .scaffolding-shelf-place span { padding:4px 6px; display:inline-block; }

  .scaffolding-layout { display:flex; gap:24px; }
  .scaffolding-essential { flex: 1 1 55%; }
  .scaffolding-collateral { flex: 1 1 45%; display: flex; flex-direction: column;}

  /* responsive */
  @media (max-width: 600px) {
    .scaffolding-layout { flex-direction:column; }
    .scaffolding-essential, .scaffolding-collateral { flex-basis:auto; }
    .scaffolding-variant-img { width:64px; height:64px; }
     .scaffolding-page .scaffolding-table { width: 80%; margin:auto; display: block; }
    .scaffolding-page .scaffolding-col-sku { width:100%; }
.scaffolding-page .scaffolding-table td:nth-child(1) { width:100%; white-space: normal; }
.scaffolding-page .scaffolding-table td:nth-child(2) { width:100%; white-space:nowrap; }
.scaffolding-page .scaffolding-table td:nth-child(3) { width:100%; white-space:nowrap; }
.scaffolding-preset-buttons {
    margin: auto
}
  }
  /* simple curtain animation helper */
  .curtain-hidden { display:none; }
  .curtain { overflow:hidden; }
