/* =============================================================================
   LABORATORY INCUBATOR — legacy component re-skin
   -----------------------------------------------------------------------------
   The storefront inherits a large base stylesheet (minimal.css) whose components
   — product detail, cart, checkout, auth, supplier pages, quotations, settings —
   are still worth keeping. This layer repaints them in the Precision palette
   instead of rebuilding those screens, so the whole site reads as one design:
   the #75418F brand ramp, sentence-case display type, mono for every measured
   figure.

   Loaded after labs-precision.css.
   ============================================================================= */

/* ---- 1 · Re-point the inherited palette variables -------------------------- */
:root,
.labs-welcome,
body {
    --primary-color: #75418F;
    --labs-accent: #75418F;
    --labs-accent-dark: #4E2B5F;
    --labs-ink-deep: #1C0F24;
    --labs-blue: #8A4CA9;
    --labs-ink: #1C0F24;
    --labs-muted: #665B6E;
    --labs-line: #E2D8E9;
    --labs-bg-soft: #F7F4F9;
    --labs-bg-page: #F7F4F9;
    --search-btn-hover: #4E2B5F;
}

/* ---- 2 · Buttons ----------------------------------------------------------- */
.btn-primary,
.btn.btn-primary {
    background-color: var(--lx-brand);
    border-color: var(--lx-brand);
    color: #fff;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn.btn-primary:hover, .btn.btn-primary:focus, .btn.btn-primary:active {
    background-color: var(--lx-ink) !important;
    border-color: var(--lx-ink) !important;
    color: #fff !important;
    box-shadow: none;
}

.btn-outline-primary {
    color: var(--lx-brand-700);
    border-color: var(--lx-brand);
}
.btn-outline-primary:hover, .btn-outline-primary:active, .btn-outline-primary:focus {
    background-color: var(--lx-brand) !important;
    border-color: var(--lx-brand) !important;
    color: #fff !important;
}

.btn-labs-accent,
.btn-labs-cta,
.order-now-btn.btn-primary,
.add-to-cart-btn.btn-primary {
    background: var(--lx-brand) !important;
    background-image: none !important;
    border: 0 !important;
    color: #fff !important;
    border-radius: var(--lx-r) !important;
    box-shadow: none !important;
    font-family: var(--lx-head);
    font-weight: 600;
    letter-spacing: -.01em;
    text-transform: none;
}
[dir="rtl"] .btn-labs-accent,
[dir="rtl"] .btn-labs-cta,
[dir="rtl"] .order-now-btn.btn-primary,
[dir="rtl"] .add-to-cart-btn.btn-primary {
    font-family: var(--lx-sans-ar); letter-spacing: 0;
}
.btn-labs-accent:hover,
.btn-labs-cta:hover,
.order-now-btn.btn-primary:hover:not(:disabled),
.add-to-cart-btn.btn-primary:hover:not(:disabled) {
    background: var(--lx-brand-600) !important;
    background-image: none !important;
    box-shadow: 0 8px 20px -10px rgba(117, 65, 143, .7) !important;
}

.add-to-cart-btn.btn-outline-primary {
    background: #fff;
    border: 1.5px solid var(--lx-brand);
    color: var(--lx-brand-700);
    border-radius: var(--lx-r);
}
.add-to-cart-btn.btn-outline-primary:hover:not(:disabled) {
    background: var(--lx-brand);
    color: #fff;
}

.buy-action-btn { border-radius: var(--lx-r); }
.wishlist-btn:hover, .wishlist-btn.is-active {
    border-color: var(--lx-orange);
    color: var(--lx-orange);
}
.seller-btn, .seller-btn.btn-primary {
    background: var(--lx-ink);
    border-color: var(--lx-ink);
    color: #fff;
    border-radius: var(--lx-r);
}
.seller-btn:hover { background: var(--lx-brand); border-color: var(--lx-brand); }

/* ---- 3 · Links, accents, focus -------------------------------------------- */
a { color: var(--lx-brand-700); }
a:hover { color: var(--lx-brand); }
.text-primary { color: var(--lx-brand-700) !important; }
.bg-primary { background-color: var(--lx-ink) !important; }
.border-primary { border-color: var(--lx-brand) !important; }
.form-control:focus, .form-select:focus {
    border-color: var(--lx-brand);
    box-shadow: 0 0 0 3px rgba(117, 65, 143, .14);
}
.form-check-input:checked { background-color: var(--lx-brand); border-color: var(--lx-brand); }
.nav-tabs .nav-link.active {
    color: var(--lx-brand-700);
    border-bottom-color: var(--lx-brand);
}
.nav-pills .nav-link.active { background-color: var(--lx-brand); }

/* ---- 4 · Page banners inherited from the old theme ------------------------- */
.page-banner {
    background: linear-gradient(135deg, var(--lx-ink) 0%, var(--lx-ink-3) 100%) !important;
    position: relative;
}
/* graph paper, matching the Precision banners */
.page-banner::before {
    content: ""; position: absolute; inset: 0;
    background-image:
        repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 30px),
        repeating-linear-gradient(0deg, rgba(255,255,255,.032) 0 1px, transparent 1px 30px);
}
.page-banner-glass {
    background: transparent !important;
    backdrop-filter: none !important;
    border: 0 !important;
    box-shadow: none !important;
    position: relative;
}
.page-banner-glass h1 {
    font-family: var(--lx-display) !important;
    font-weight: 600;
    text-transform: none;
    color: #fff !important;
    letter-spacing: -.025em;
}
[dir="rtl"] .page-banner-glass h1 {
    font-family: var(--lx-display-ar) !important;
    font-weight: 600; letter-spacing: 0;
}
.page-banner-glass .crumb, .page-banner-glass .crumb a { color: #DCD2E3 !important; }
.page-banner-glass .crumb a:hover { color: var(--lx-accent) !important; }

/* ---- 5 · Breadcrumb bars --------------------------------------------------- */
.breadcrumb-area, .product-breadcrumb {
    background: var(--lx-paper-2) !important;
    border-bottom: 1px solid var(--lx-line);
}
.breadcrumb a, .product-breadcrumb a { color: var(--lx-brand-700); }

/* ---- 6 · Product detail ---------------------------------------------------- */
.product-details-page .product-title,
.product-details-page h1 {
    font-family: var(--lx-sans);
    font-weight: 600;
    color: var(--lx-ink);
    text-transform: none;
    letter-spacing: -.01em;
}
[dir="rtl"] .product-details-page .product-title,
[dir="rtl"] .product-details-page h1 { font-family: var(--lx-sans-ar); letter-spacing: 0; }

/* Specification labels run in mono small-caps, as on an instrument data sheet. */
.product-field-label {
    font-family: var(--lx-mono);
    font-weight: 500;
    font-size: 11.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--lx-brand-700);
}
[dir="rtl"] .product-field-label {
    font-family: var(--lx-sans-ar); letter-spacing: 0; text-transform: none;
    font-size: 14px; font-weight: 600; color: var(--lx-ink);
}

/* Prices and quantities on the detail screen are measured values → mono. */
.product-details-page .product-price,
.product-details-page .price,
.product-details-page .price-range,
.cart-page .cart-price, .cart-page .cart-total,
.checkout-page .order-total, .checkout-page .order-summary td {
    font-family: var(--lx-mono);
    font-variant-numeric: tabular-nums;
}

.product-details-page .product-carousel .slick-dots li button:before { color: var(--lx-brand) !important; }

/* Gallery placeholder: show an on-brand panel instead of a broken-image frame. */
.product-details-page .product-image-main,
.product-details-page .exzoom_img_box {
    background: linear-gradient(145deg, var(--lx-ink) 0%, var(--lx-brand-700) 100%);
    border-radius: var(--lx-r-lg);
    overflow: hidden;
}
.pa-value--text:hover, .pa-value--text.pav-active {
    border-color: var(--lx-brand) !important;
    color: var(--lx-brand-700) !important;
}
.pa-value--color:hover, .pa-value--color.pav-active { outline-color: var(--lx-brand) !important; }

/* ---- 7 · Auth screens ------------------------------------------------------ */
.auth-mini-card .card-header,
.auth-hero,
.auth-side {
    background: linear-gradient(150deg, var(--lx-ink) 0%, var(--lx-brand-700) 100%) !important;
}
.password-eye:hover { color: var(--lx-brand) !important; }

/* ---- 8 · Legacy section furniture ----------------------------------------- */
.labs-eyebrow {
    color: var(--lx-brand-600) !important;
    font-family: var(--lx-mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 500;
}
[dir="rtl"] .labs-eyebrow { font-family: var(--lx-sans-ar); letter-spacing: 0; text-transform: none; font-weight: 600; }
.labs-section-header h2 {
    font-family: var(--lx-display) !important;
    font-weight: 600;
    text-transform: none;
    letter-spacing: -.022em;
    color: var(--lx-ink) !important;
}
[dir="rtl"] .labs-section-header h2 {
    font-family: var(--lx-display-ar) !important; font-weight: 600; letter-spacing: 0;
}
.labs-section.is-soft { background: var(--lx-paper-2); }

/* ---- 9 · Flash-deal cards (kept from the old theme) ----------------------- */
.flash-deal-product-card {
    border-radius: var(--lx-r-lg);
    border: 1px solid var(--lx-line);
}
.flash-deal-product-card:hover { box-shadow: var(--lx-shadow); border-color: var(--lx-line-2); }
.flash-deal-discount-badge { background: var(--lx-orange); border-radius: 4px; font-family: var(--lx-mono); }
.flash-deal-add-cart-btn { background: var(--lx-brand); border-radius: var(--lx-r); }
.flash-deal-add-cart-btn:hover { background: var(--lx-ink); }
.flash-deal-product-card .price { color: var(--lx-brand-700); font-family: var(--lx-mono); }
.flash-deal-wishlist-btn.is-active, .flash-deal-wishlist-btn:hover { color: var(--lx-orange); }
.countdown-digit {
    background: var(--lx-ink); color: var(--lx-accent); border-radius: var(--lx-r);
    font-family: var(--lx-mono); font-variant-numeric: tabular-nums;
}

/* ---- 10 · Cart, checkout, tables ------------------------------------------ */
.cart-page .table thead th,
.checkout-page .table thead th,
.table thead th {
    font-family: var(--lx-mono);
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: 11.5px;
    color: var(--lx-brand-700);
}
[dir="rtl"] .table thead th {
    font-family: var(--lx-sans-ar); letter-spacing: 0; text-transform: none;
    font-size: 14px; font-weight: 600; color: var(--lx-ink);
}
.table > :not(caption) > * > * { border-color: var(--lx-line); }

/* ---- 11 · Pagination ------------------------------------------------------- */
.pagination .page-item.active .page-link {
    background-color: var(--lx-brand);
    border-color: var(--lx-brand);
}
.pagination .page-link { color: var(--lx-brand-700); font-family: var(--lx-mono); }

/* ---- 12 · Toastr ----------------------------------------------------------- */
#toast-container > .toast-success { background-color: var(--lx-brand) !important; }
#toast-container > .toast-error { background-color: var(--lx-orange) !important; }

/* ---- 13 · Supplier / laboratory / company cards -------------------------- */
.company-showcase-card:hover,
.supplier-card:hover { border-color: var(--lx-brand) !important; }
.company-showcase-rating i.fas,
.rating .text-warning { color: #F5A623 !important; }
.blur-star { color: var(--lx-line-2) !important; }

/* ---- 14 · Misc inherited accent spots ------------------------------------- */
.about-page .info-panel-dark,
.about-page .icon-tile,
.services-page .icon-tile {
    background: linear-gradient(145deg, var(--lx-ink) 0%, var(--lx-brand-700) 100%) !important;
}
.about-page .node-chip { border-color: var(--lx-brand) !important; color: var(--lx-brand-700) !important; }
.contact-area .social-icons a:hover { background: var(--lx-brand) !important; }
#offcanvasMenu .offcanvas-body ul li a:hover,
#offcanvasMenu .offcanvas-body ul li a:active,
#offcanvasMenu .offcanvas-body ul li a:focus-visible { color: var(--lx-brand-700) !important; }