/* === PRODUCT CARD (parent grouping) === */
.product-list{border-left:1px solid var(--g100);border-right:1px solid var(--g100);background:var(--g0)}
.product-card{padding:20px 24px;border-bottom:1px solid var(--g100);transition:background var(--t)}
.product-card:last-child{border-radius:0 0 var(--r-lg) var(--r-lg)}

/* Product header */
.pc-top{display:flex;gap:16px;align-items:flex-start}
.pc-img{width:112px;height:112px;flex-shrink:0;background:#fff;border:1px solid var(--g100);border-radius:6px;display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:pointer;transition:border-color var(--t)}
.pc-img:hover{border-color:var(--red)}
.pc-img img{max-width:90%;max-height:90%;object-fit:contain;transition:transform .5s}
.pc-img:hover img{transform:scale(1.06)}
.pc-info{flex:1;min-width:0}
.pc-name{font-size:18px;font-weight:800;color:var(--g900);line-height:1.3;margin-bottom:6px;cursor:pointer;transition:color var(--t);display:block;text-decoration:none}
.pc-name:hover{color:var(--red)}
.pc-specs{font-size:12px;color:var(--g500);line-height:1.5}
.pc-specs strong{color:var(--g700);font-weight:500}
.pc-specs .dot{margin:0 6px;color:var(--g300)}
.pc-badge{display:inline-flex;align-items:center;gap:4px;margin-top:8px;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600;background:#f0f4ff;color:#3b5bdb}

/* === VARIANT TABLE (matching the reference design) === */
.vt-section{margin-top:12px;background:var(--g0);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);overflow:hidden;margin-bottom:16px}
.pc-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:10px}
.pc-link{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--g700);text-decoration:none;cursor:pointer;transition:color var(--t)}
.pc-link i{color:var(--red);font-size:12px}
.pc-link:hover{color:var(--red)}
.pc-count{font-size:11px;font-weight:600;color:var(--g400);margin-left:auto;white-space:nowrap;text-transform:lowercase}
.vt-stock-toggle{display:inline-flex;align-items:center;gap:8px;cursor:pointer;user-select:none;font-size:13px;font-weight:600;color:var(--g700);margin-left:auto;padding:0 6px}
.vt-stock-toggle input{width:16px;height:16px;accent-color:var(--red);cursor:pointer;margin:0}
.vt-toolbar{display:flex;align-items:center;gap:14px;padding:10px 20px;flex-wrap:wrap;background:var(--g50);border-bottom:1px solid var(--g100)}
.vt-search{position:relative;flex:1;max-width:320px}
.vt-search input{width:100%;padding:9px 12px 9px 36px;border:1.5px solid var(--g200);border-radius:8px;font-size:13px;outline:none;transition:all var(--t)}
.vt-search input:focus{border-color:var(--red)}
.vt-search i{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--g400);font-size:12px}

/* Cart drawer */
.cart-drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:500;opacity:0;pointer-events:none;transition:opacity .3s}
.cart-drawer-overlay.show{opacity:1;pointer-events:auto}
.cart-drawer{position:fixed;top:0;width:440px;height:100vh;height:100dvh;background:var(--g0);z-index:501;box-shadow:-10px 0 40px rgba(0,0,0,.15);display:flex;flex-direction:column;transition:right .35s cubic-bezier(.4,0,.2,1);right:-460px}
.cart-drawer.show{right:0}
.cd-header{padding:20px 24px;border-bottom:1px solid var(--g100);display:flex;align-items:center;justify-content:space-between}
.cd-header h2{font-size:18px;font-weight:700;display:flex;align-items:center;gap:8px}
.cd-header .cd-close{width:36px;height:36px;border-radius:10px;border:none;background:var(--g100);color:var(--g600);font-size:14px;transition:all var(--t)}
.cd-header .cd-close:hover{background:var(--red);color:#fff}
.cd-items{flex:1;overflow-y:auto;padding:16px 24px}
.cd-empty{text-align:center;padding:40px 20px;color:var(--g400)}
.cd-empty i{font-size:40px;display:block;margin-bottom:12px;opacity:.3}
/* Cart drawer item — same structure as checkout bestilling: 3 cols × 2 rows */
.cd-item{display:grid;grid-template-columns:60px 1fr auto;grid-template-rows:auto auto;gap:6px 12px;padding:14px 0;border-bottom:1px solid var(--g100);align-items:start}
.cd-item .cd-img-box{grid-row:1/3;grid-column:1;width:60px;height:60px;border-radius:8px;overflow:hidden;background:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;border:1px solid var(--g100)}
.cd-item .cd-img-box img{width:100%;height:100%;object-fit:contain}
.cd-item .cd-info{grid-row:1;grid-column:2;min-width:0;display:flex;flex-direction:column;gap:2px}
.cd-item .cd-sku{font-size:14px;color:var(--red);font-weight:700;font-family:monospace}
.cd-item .cd-name{font-size:13px;font-weight:500;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--g800);text-decoration:none;transition:color var(--t)}
.cd-item .cd-name:hover{color:var(--red)}
.cd-item .cd-price{grid-row:1;grid-column:3;text-align:right;white-space:nowrap;font-weight:600}
.cd-item .cd-price-net{font-size:14px;font-weight:700;color:var(--g900)}
.cd-item .cd-price-sub{font-size:10px;color:var(--g500);font-weight:400}
.cd-item .cd-price-unit{font-size:10px;color:var(--g400);margin-top:1px;font-weight:400}
.cd-item .cd-actions{grid-row:2;grid-column:2/-1;display:flex;flex-direction:row;align-items:center;gap:6px;margin-top:4px;justify-content:flex-end}
.cd-item .cd-unit{font-size:11px;color:var(--g500);font-weight:500}
.cd-item .cd-remove{width:36px;height:36px;border-radius:8px;border:none;background:var(--g100);color:var(--g500);font-size:13px;transition:all var(--t);flex-shrink:0;display:flex;align-items:center;justify-content:center;cursor:pointer}
.cd-item .cd-remove:hover{background:var(--red-light);color:var(--red)}
/* Volume discount banner — row 3 spans full width */
.cd-item>div[style*="flex-basis:100%"]{grid-row:3;grid-column:1/-1;flex-wrap:nowrap!important;min-width:0}
.cd-item>div[style*="flex-basis:100%"]>span{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cd-item>div[style*="flex-basis:100%"]>button{flex-shrink:0}
.cd-footer{padding:20px 24px;border-top:1px solid var(--g100);background:var(--g50)}
.cd-total{display:flex;justify-content:space-between;font-size:16px;font-weight:700;margin-bottom:16px}
.cd-total .cd-total-label{color:var(--g600)}
.cd-total .cd-total-val{color:var(--g900)}
.cd-form label{display:block;font-size:12px;font-weight:600;color:var(--g600);margin-bottom:4px;margin-top:12px}
.cd-form input,.cd-form textarea{width:100%;padding:9px 12px;border:1.5px solid var(--g200);border-radius:8px;font-size:13px;outline:none;resize:vertical;transition:border-color var(--t)}
.cd-form input:focus,.cd-form textarea:focus{border-color:var(--red)}
.cd-form textarea{min-height:60px}
.cd-actions{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.cd-submit{width:100%;padding:14px;color:#fff;border:none;border-radius:var(--r);font-size:14px;font-weight:700;transition:background var(--t);display:flex;align-items:center;justify-content:center;gap:8px}
.cd-submit.order{background:var(--red)}
.cd-submit.order:hover{background:var(--red-dark)}
.cd-submit.enquiry{background:var(--g800)}
.cd-submit.enquiry:hover{background:var(--g900)}
.cd-divider{text-align:center;font-size:11px;color:var(--g400);text-transform:uppercase;letter-spacing:.1em;position:relative;margin:4px 0}
.cd-divider::before,.cd-divider::after{content:'';position:absolute;top:50%;width:40%;height:1px;background:var(--g200)}
.cd-divider::before{left:0}
.cd-divider::after{right:0}
.cd-type-tag{display:inline-block;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:2px 6px;border-radius:4px;margin-left:6px}
.cd-type-tag.order{background:var(--green-light);color:var(--green)}

/* === MULTI-CART SELECTOR === */
.mc-bar{padding:6px 24px 8px;border-bottom:1px solid var(--g100)}
.mc-selector{display:flex;align-items:center;gap:4px;overflow-x:auto;scrollbar-width:none;padding:2px 0}
.mc-selector::-webkit-scrollbar{display:none}
.mc-tab{display:inline-flex;align-items:center;gap:5px;padding:5px 12px;border-radius:6px;border:none;background:none;font-size:12px;font-weight:500;color:var(--g500);cursor:pointer;white-space:nowrap;transition:all .15s;flex-shrink:0;position:relative}
.mc-tab:hover{color:var(--g800);background:var(--g50)}
.mc-tab.active{color:var(--red);font-weight:600;background:var(--red-light)}
.mc-tab.active::after{content:'';position:absolute;bottom:-7px;left:12px;right:12px;height:2px;background:var(--red);border-radius:1px}
.mc-tab .mc-cnt{font-size:10px;color:var(--g400);font-weight:600}
.mc-tab.active .mc-cnt{color:var(--red)}
.mc-add{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;border:1.5px dashed var(--g300);background:none;color:var(--g400);font-size:12px;cursor:pointer;transition:all .15s;flex-shrink:0}
.mc-add:hover{border-color:var(--red);color:var(--red);border-style:solid}
.mc-actions{display:flex;gap:4px;padding:2px 0 0;justify-content:flex-end}
.mc-act-btn{font-size:10px;color:var(--g400);cursor:pointer;border:none;background:none;padding:2px 6px;border-radius:4px;transition:all .12s;font-family:inherit;font-weight:500;display:inline-flex;align-items:center;gap:3px}
.mc-act-btn:hover{color:var(--red)}
.mc-act-btn.danger:hover{color:#dc2626}
/* mc-bar inside page content (not drawer) */
.mc-bar-page{background:var(--g0);border:1.5px solid var(--g100);border-radius:var(--r-lg);padding:10px 20px;margin-bottom:20px}

/* === ORDER HISTORY === */
.oh-panel{padding:16px 24px}
.oh-toggle{display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:8px;border:1.5px solid var(--g200);background:var(--g0);font-size:12px;font-weight:600;color:var(--g600);cursor:pointer;transition:all .15s;width:100%;margin-top:8px}
.oh-toggle:hover{border-color:var(--red);color:var(--red)}
.oh-toggle i{color:var(--red)}
.oh-list{margin-top:12px}
.oh-item{display:flex;align-items:center;gap:12px;padding:12px;border-radius:var(--r);border:1px solid var(--g100);margin-bottom:8px;transition:all .15s;background:var(--g0)}
.oh-item:hover{border-color:var(--g300);box-shadow:var(--shadow-xs)}
.oh-icon{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:14px}
.oh-icon.order{background:var(--green-light);color:var(--green)}
.oh-icon.enquiry{background:var(--orange-light);color:var(--orange)}
.oh-info{flex:1;min-width:0}
.oh-ref{font-size:12px;font-weight:600;color:var(--g800);font-family:monospace}
.oh-date{font-size:11px;color:var(--g500)}
.oh-meta{font-size:11px;color:var(--g500);display:flex;gap:8px;margin-top:2px}
.oh-right{text-align:right;flex-shrink:0}
.oh-total{font-size:13px;font-weight:700;color:var(--g900)}
.oh-count{font-size:10px;color:var(--g500)}
.oh-reorder{display:inline-flex;align-items:center;gap:4px;padding:6px 12px;border-radius:6px;border:1.5px solid var(--g200);background:var(--g0);font-size:11px;font-weight:600;color:var(--g600);cursor:pointer;transition:all .15s;margin-top:4px}
.oh-reorder:hover{border-color:var(--red);color:var(--red);background:var(--red-light)}
.oh-empty{text-align:center;padding:24px 16px;color:var(--g400);font-size:13px}
.oh-clear{font-size:11px;color:var(--g400);cursor:pointer;border:none;background:none;padding:4px 8px;margin-top:8px;font-family:inherit;transition:color .15s}
.oh-clear:hover{color:#dc2626}
.cd-type-tag.enquiry{background:var(--orange-light);color:var(--orange)}

/* Variant table */
.vt-table{width:100%;border-collapse:collapse;font-size:13px;margin-top:0}
.vt-table thead th{padding:10px 12px;text-align:left;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--red);border-bottom:1px solid var(--g200);background:var(--g50);cursor:pointer;user-select:none;white-space:nowrap;transition:color var(--t)}
.vt-table thead th .sort-ico{margin-left:3px;font-size:8px;opacity:.4}
.vt-table thead th:hover{color:var(--red-dark)}
.vt-table tbody tr{border-bottom:1px solid #ECECEE;transition:background var(--t);height:44px}
.vt-table tbody tr:hover{background:var(--g50)}
.vt-table td{padding:0 8px;vertical-align:middle;white-space:nowrap}

.td-sku{font-family:'SF Mono','Fira Code',monospace;font-size:14px;color:var(--g700);font-weight:500;white-space:nowrap}
.td-name{font-size:11px;color:var(--g600);max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Name column: absorbs all remaining space */
.td-sku-name{width:100%;min-width:140px}
.td-sku-code{font-family:'SF Mono','Fira Code',monospace;font-size:13px;color:var(--red);font-weight:600;display:block;white-space:nowrap}
.td-name-desc{font-size:11px;color:var(--g600);white-space:normal;word-break:break-word;line-height:1.4;max-width:360px}
/* Compact columns: collapse to content width, right-aligned */
.td-spec{width:1px;text-align:right;padding:0 6px;font-weight:600;font-size:12px;color:var(--g800);white-space:nowrap}
.td-spec small{font-weight:400;color:var(--g500);margin-left:1px}
.td-avail-cell{width:1px;padding:0 6px;text-align:right;white-space:nowrap;vertical-align:middle}
/* compact th headers */
.vt-table thead th.th-c{width:1px;text-align:left;padding-left:4px;padding-right:6px}

/* Availability badge */
.avail-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 7px;border-radius:5px;font-size:10px;font-weight:600;white-space:nowrap}
.avail-badge.in-stock{background:var(--green-light);color:var(--green)}
.avail-badge.on-request{background:var(--g100);color:var(--g500)}
.avail-badge.out-stock{background:var(--red-light);color:var(--red)}
.avail-badge .adot{width:6px;height:6px;border-radius:50%}
.avail-badge.in-stock .adot{background:var(--green)}
.avail-badge.on-request .adot{background:var(--g400)}
.avail-badge.out-stock .adot{background:var(--red)}

/* Price */
.td-price{width:1px;text-align:left;padding:0 8px;white-space:nowrap;vertical-align:middle}
.td-price .amount{font-weight:700;font-size:14px;color:var(--g900);white-space:nowrap}
.td-price .sub{font-size:9px;color:var(--g400);font-weight:400;white-space:nowrap}
.td-price .tier{display:flex;align-items:baseline;gap:6px;line-height:1.25}
.td-price .tier + .tier{margin-top:2px}
.td-price .tier .q{font-size:10px;font-weight:700;color:var(--g400);min-width:36px}
.td-price .tier .amt{font-size:13px;font-weight:700;color:var(--g900);white-space:nowrap}
.td-price .tier .br{font-size:10px;color:var(--g400);white-space:nowrap}
.td-price .tier-wh .q{color:#16a34a}
.td-price .tier-wh .amt{color:#16a34a}
.td-price .tier-hdr{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--red);margin-bottom:2px}
.price-on-req{display:inline-flex;align-items:center;gap:4px;padding:3px 7px;border-radius:5px;font-size:10px;font-weight:600;white-space:nowrap;background:var(--g100);color:var(--g500)}
.price-on-req .adot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.td-qty{width:1px;vertical-align:middle;white-space:nowrap;padding:0 6px}

/* Qty stepper */
.qty-stepper{display:inline-flex;align-items:center;border:1.5px solid var(--g200);border-radius:6px;overflow:hidden}
.qty-stepper button{width:28px;height:30px;border:none;background:var(--g50);color:var(--g600);font-size:13px;transition:all var(--t);display:flex;align-items:center;justify-content:center;cursor:pointer}
.qty-stepper button:hover{background:var(--g200);color:var(--red)}
.qty-stepper input{width:38px;height:30px;border:none;border-left:1px solid var(--g200);border-right:1px solid var(--g200);text-align:center;font-size:12px;font-weight:500;outline:none}
/* Larger stepper for cart drawer — better tap targets on mobile */
.qty-stepper.cd-qty{border-width:1.5px;border-radius:8px}
.qty-stepper.cd-qty button{width:38px;height:38px;font-size:16px;font-weight:600}
.qty-stepper.cd-qty input{width:52px;height:38px;font-size:14px;font-weight:700}
.qty-stepper input:focus{background:var(--red-light)}
.qty-stepper input::-webkit-outer-spin-button,.qty-stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qty-stepper input[type=number]{-moz-appearance:textfield}

/* Action buttons */
.td-actions{width:1px;white-space:nowrap;vertical-align:middle;text-align:right;padding:0 8px 0 4px}
.td-actions .btn-icon,.td-actions a.btn-icon{vertical-align:middle;margin-left:4px}
.td-actions .btn-cart{vertical-align:middle;margin-left:4px;width:162px}
.btn-cart{display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:0 10px;height:30px;width:162px;background:var(--red);color:#fff;border:none;border-radius:6px;font-size:11px;font-weight:600;transition:all var(--t);white-space:nowrap;box-sizing:border-box}
.btn-cart:hover{background:var(--red-dark);transform:translateY(-1px);box-shadow:0 4px 12px rgba(226,0,26,.25)}
.btn-cart.btn-cart-enq{background:transparent;color:var(--red);border:1.5px solid var(--red)}
.btn-cart.btn-cart-enq:hover{background:var(--red-light,#fff0f2);box-shadow:none;transform:none}
.btn-enq{display:inline-flex;align-items:center;gap:5px;padding:8px 14px;background:var(--g0);color:var(--g600);border:1.5px solid var(--g200);border-radius:7px;font-size:12px;font-weight:500;transition:all var(--t);margin-left:6px}
.btn-enq:hover{border-color:var(--red);color:var(--red)}
.btn-icon{display:inline-flex;align-items:center;justify-content:center;gap:4px;height:30px;width:30px;background:var(--g0);color:var(--g500);border:1.5px solid var(--g200);border-radius:6px;font-size:12px;transition:all var(--t);margin-left:3px;padding:0;flex-shrink:0}
.btn-icon:hover{background:var(--red-light);border-color:var(--red);color:var(--red)}
.btn-icon.pdf{color:var(--red);border-color:var(--red-light)}

/* Variant table footer */
.vt-footer{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;font-size:12px;color:var(--g500);border-top:1px solid var(--g200);background:var(--g50);border-radius:0 0 8px 8px}
.vt-footer strong{color:var(--g700)}

/* Expand toggle */
.expand-btn{display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:6px 14px;border:1.5px solid var(--g200);border-radius:8px;font-size:12px;font-weight:500;color:var(--g600);background:var(--g0);transition:all var(--t)}
.expand-btn:hover{border-color:var(--red);color:var(--red);background:var(--red-light)}
.expand-btn i{font-size:10px;transition:transform .3s}
.expand-btn.open i{transform:rotate(180deg)}
.vars-hidden{display:none}
.vars-hidden.show{display:table-row-group}