/* ── Stitch-Inspired Product Page ── */
.main-image-wrap { position: relative; cursor: pointer; background: #ffffff; border-radius: 12px; overflow: hidden; border: 1px solid #e9ecef; }
#mainImage { transition: transform 0.2s ease-out; pointer-events: none; }
.main-image-wrap:hover #mainImage { transform: scale(1.5); }
.thumbnail-img.border-primary { border-width: 3px !important; opacity: 1; }
.thumbnail-img { opacity: 0.6; transition: all 0.2s; cursor: pointer; border-radius: 8px; }
.thumbnail-img:hover { opacity: 1; }
.cert-badge { position: absolute; top: 16px; left: 16px; z-index: 5; background: #fff; border-radius: 20px; padding: 6px 14px; font-size: 0.75rem; font-weight: 700; display: flex; align-items: center; gap: 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
.cert-badge i { color: #198754; }

.btn-white { background: white; }
.btn-white:hover { background: #f8f9fa; }
#stickyBuyBar.show { transform: translateY(0) !important; display: block !important; }

/* Config Card */
.config-card { border: 1px solid #e9ecef; border-radius: 12px; padding: 24px; background: #fff; }
.config-card h6 { font-size: 0.7rem; letter-spacing: 1.5px; color: #6c757d; font-weight: 700; }
.price-preview-box { background: linear-gradient(135deg, #eef2ff 0%, #e8f4fd 100%); border: 1px solid #c7d2fe; border-radius: 10px; padding: 16px 20px; }
.price-preview-box .live-price { color: #0d6efd; font-weight: 800; font-size: 1.4rem; }
.price-preview-box .est-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; color: #495057; }

/* Info Chips */
.info-chip { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid #f1f3f5; font-size: 0.9rem; }
.info-chip:last-child { border-bottom: none; }
.info-chip .label { color: #6c757d; font-weight: 500; }
.info-chip .value { font-weight: 700; color: #212529; }
.stock-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 6px; }
.stock-dot.in-stock { background: #198754; }
.stock-dot.out-stock { background: #dc3545; }

/* Action Buttons */
.btn-add-cart { background: #1a1f2e; color: #fff; border: none; border-radius: 10px; padding: 14px 28px; font-weight: 700; font-size: 1rem; letter-spacing: 0.5px; transition: all 0.2s; }
.btn-add-cart:hover { background: #0d6efd; color: #fff; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(13,110,253,0.3); }
.btn-add-boq { background: #fff; color: #1a1f2e; border: 2px solid #dee2e6; border-radius: 10px; padding: 14px 28px; font-weight: 700; font-size: 1rem; transition: all 0.2s; }
.btn-add-boq:hover { border-color: #0d6efd; color: #0d6efd; }

/* Tabs */
.product-tabs .nav-link { color: #6c757d; font-weight: 600; font-size: 0.95rem; padding: 12px 24px; border: none; border-bottom: 3px solid transparent; background: none; border-radius: 0; }
.product-tabs .nav-link:hover { color: #212529; border-bottom-color: #dee2e6; }
.product-tabs .nav-link.active { color: #1a1f2e; border-bottom-color: #1a1f2e; background: none; }
.specs-table { width: 100%; }
.specs-table tr td { padding: 14px 16px; border-bottom: 1px solid #f1f3f5; font-size: 0.95rem; }
.specs-table tr td:first-child { color: #0d6efd; font-weight: 500; width: 40%; }
.specs-table tr td:last-child { font-weight: 700; color: #212529; }
.assurance-card { background: #f8f9fa; border-radius: 12px; padding: 20px; border: 1px solid #e9ecef; }
.assurance-card i { font-size: 1.5rem; color: #0d6efd; }
.assurance-card .card-label { font-size: 0.65rem; letter-spacing: 1.5px; text-transform: uppercase; color: #0d6efd; font-weight: 700; margin-top: 8px; }
.assurance-card .card-value { font-weight: 700; color: #212529; font-size: 0.95rem; }

/* Related Products */
.related-card { border-radius: 12px; overflow: hidden; border: 1px solid #e9ecef; transition: all 0.2s; }
.related-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.08); transform: translateY(-3px); }
.related-card img { height: 200px; object-fit: cover; width: 100%; }
.related-card .cat-label { font-size: 0.65rem; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 700; color: #0d6efd; }

/* Utilities */
.tracking-wider { letter-spacing: 0.05em; }
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.tiny { font-size: 0.7rem; }
.product-gallery.sticky-top { z-index: 10; }

/* Grouped Variant Pills */
.variant-pills-container {
    display: block !important;
}
.variant-type-group-wrapper {
    display: block;
    width: 100%;
}
.variant-type-label { 
    font-size: 0.8rem; 
    font-weight: 800; 
    text-transform: uppercase; 
    letter-spacing: 1.2px; 
    color: #1a1f2e; 
    margin-top: 1.5rem; 
    margin-bottom: 1rem;
    padding-left: 10px;
    border-left: 4px solid #0d6efd;
    line-height: 1;
}
.variant-type-group {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 1rem;
}
.variant-type-group-wrapper:first-of-type .variant-type-label {
    margin-top: 0;
}

.variant-pill {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border: 1.5px solid #c5c9d0;
    border-radius: 40px;
    background: #fff;
    cursor: pointer;
    transition: all 0.2s;
    color: #1a1f2e;
    user-select: none;
    white-space: nowrap;
    min-width: 64px;
    gap: 1px;
}
.variant-pill:hover {
    border-color: #1a1f2e;
    background: #f8f9fa;
    transform: translateY(-2px);
}
.variant-pill.active {
    background: #1a1f2e;
    border-color: #1a1f2e;
    color: #fff;
    box-shadow: 0 4px 12px rgba(26, 31, 46, 0.2);
}
.variant-pill.active .pill-price { color: #a8b3c9; }
.variant-pill.disabled {
    opacity: 0.45;
    cursor: not-allowed;
    border-color: #dee2e6;
    color: #adb5bd;
}
.variant-pill .size-label {
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.2;
}
.variant-pill .pill-price {
    font-size: 0.75rem;
    font-weight: 500;
    color: #6c757d;
    line-height: 1;
}

@media (max-width: 768px) {
  .product-tabs .nav-link { padding: 10px 14px; font-size: 0.85rem; }
  .btn-add-cart, .btn-add-boq { padding: 12px 16px; font-size: 0.9rem; }
  .variant-pill { min-width: 80px; padding: 8px 16px; }
  .variant-pill .size-label { font-size: 1rem; }
}