/* ==========================================================================
   Le Belle Arti — Product Page
   ========================================================================== */

/* ----- Page wrapper ----- */
.lba-product-page {
    padding-top: var(--lba-space-xl);
    padding-bottom: var(--lba-space-4xl);
}

/* ----- Breadcrumb ----- */
/* Breadcrumb styles live in main.css — global */

/* ----- Two-column layout ----- */
.lba-product-layout {
    display: grid;
    /* minmax(0, …) so an unbreakable wide child (e.g. a long variation label)
       cannot push a track past its container. Plain 1fr resolves to
       minmax(auto, 1fr) and inherits the child's min-content width. */
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 5rem;
    align-items: start;
}

/* Grid children must not overflow their column */
.lba-gallery-panel,
.lba-product-info {
    min-width: 0;
}

/* =========================================================================
   Gallery Panel
   ========================================================================= */

.lba-gallery-panel {
    position: sticky;
    top: calc(99px + var(--lba-space-md));
}

/* Main image wrapper */
.lba-main-image-wrap {
    position: relative;
    background: #fff;
    cursor: zoom-in;
    width: 100%;
    overflow: hidden;
}

.lba-main-image-item {
    display: none;
}

.lba-main-image-item.is-active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.lba-main-image {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    transition: transform 0.6s ease;
}

.lba-main-image-wrap:hover .lba-main-image {
    transform: scale(1.02);
}

/* Brand badge */
.lba-brand-badge {
    position: absolute;
    top: var(--lba-space-md);
    left: var(--lba-space-md);
    z-index: 2;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
    padding: 0.25rem 0.625rem;
    font-family: var(--lba-font-secondary);
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--lba-black);
    pointer-events: none;
}

/* Thumbnail strip — horizontal row below main image */
.lba-thumb-strip {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.625rem;
    overflow-x: auto;
    scrollbar-width: none;
}

.lba-thumb-strip::-webkit-scrollbar {
    display: none;
}

.lba-thumb {
    flex: 0 0 auto;
    width: 68px;
    height: 68px;
    padding: 0;
    background: #fff;
    border: 1.5px solid transparent;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.2s ease;
}

.lba-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: opacity 0.2s ease;
}

.lba-thumb:hover img {
    opacity: 0.85;
}

.lba-thumb.is-active {
    border-color: var(--lba-black);
}

/* =========================================================================
   Info Panel
   ========================================================================= */

.lba-info-panel {
    padding-top: var(--lba-space-sm);
}

/* Brand row */
.lba-brand-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: var(--lba-space-sm);
}

.lba-brand-row__left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.lba-brand-row__heart {
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
    color: var(--lba-gray-400, #a3a3a3);
    transition: color 0.2s ease, transform 0.15s ease;
    line-height: 0;
}

.lba-brand-row__heart:hover {
    color: var(--lba-black);
    transform: scale(1.1);
}

.lba-brand-row__heart.is-active,
.lba-brand-row__heart[aria-pressed="true"] {
    color: var(--lba-black);
}

.lba-brand-name-link {
    font-family: var(--lba-font-secondary);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--lba-gray-700);
    text-decoration: none;
    transition: color 0.2s ease;
}

.lba-brand-name-link:hover {
    color: var(--lba-black);
    opacity: 1;
}

.lba-brand-divider {
    color: var(--lba-gray-300);
    font-weight: 300;
}

.lba-origin {
    font-family: var(--lba-font-secondary);
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--lba-gray-500);
}

/* Product title */
.lba-product-title {
    font-family: var(--lba-font-primary);
    font-size: 2.25rem;
    font-weight: 400;
    line-height: 1.15;
    color: var(--lba-black);
    margin-bottom: var(--lba-space-sm);
}

/* Designer */
.lba-designer-line {
    font-family: var(--lba-font-secondary);
    font-size: 0.8125rem;
    color: var(--lba-gray-500);
    margin-bottom: var(--lba-space-xl);
}

.lba-designer-by {
    margin-right: 0.25rem;
    font-style: italic;
}

.lba-designer-name {
    color: var(--lba-gray-700);
}

/* Subtitle — designer + year line below the title.
   Brand prefix is stripped server-side when present (see single-product.php). */
.lba-product-subtitle {
    font-family: var(--lba-font-secondary);
    font-size: var(--lba-font-size-sm);
    color: var(--lba-gray-700);
    margin: 0 0 var(--lba-space-xl);
    line-height: 1.5;
}

/* Stock label — matches .lba-price-note typography so it reads as
   peer-level product info, not a separate muted register. */
.lba-product-stock {
    font-family: var(--lba-font-secondary);
    font-size: var(--lba-font-size-xs);
    color: var(--lba-gray-500);
    margin: 0 0 var(--lba-space-md);
    line-height: 1.5;
}

/* Price block */
.lba-price-block {
    margin-bottom: var(--lba-space-lg);
}

/* Quote-only eyebrow: "Available upon request" alone does not read as
   pricing without the label above it, so the eyebrow stays for that variant. */
.lba-price-block--quote .lba-price-label {
    display: block;
    font-family: var(--lba-font-secondary);
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--lba-gray-500);
    margin-bottom: 0.25rem;
}

.lba-price-value {
    font-family: var(--lba-font-primary);
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--lba-black);
    margin-bottom: 0.375rem;
}

.lba-price-value .woocommerce-Price-amount {
    font-family: var(--lba-font-primary);
    font-size: 1.5rem;
    color: var(--lba-black);
}

.lba-price-value--quote {
    font-family: var(--lba-font-secondary);
    font-size: 0.9375rem;
    font-style: italic;
    color: var(--lba-gray-700);
}

.lba-price-note {
    font-family: var(--lba-font-secondary);
    font-size: 0.75rem;
    color: var(--lba-gray-500);
}

/* Section divider */
.lba-section-divider {
    height: 1px;
    background: var(--lba-gray-200);
    margin: var(--lba-space-xl) 0;
}

/* =========================================================================
   Variation Swatches
   ========================================================================= */

.lba-variation-group {
    margin-bottom: var(--lba-space-lg);
}

.lba-variation-label-row {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: var(--lba-space-sm);
}

.lba-variation-label {
    font-family: var(--lba-font-secondary);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--lba-gray-700);
}

.lba-variation-selected {
    font-family: var(--lba-font-secondary);
    font-size: 0.8125rem;
    color: var(--lba-gray-500);
}

.lba-variation-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    min-width: 0;
}

.lba-variation-swatch {
    padding: 0.5rem 1rem;
    font-family: var(--lba-font-secondary);
    font-size: 0.8125rem;
    color: var(--lba-gray-700);
    background: var(--lba-white);
    border: 1px solid var(--lba-gray-300);
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
    /* Long option labels must wrap rather than force the page wider.
       Short labels are unaffected: they still sit on one line. */
    white-space: normal;
    max-width: 100%;
    overflow-wrap: anywhere;
    text-align: left;
}

.lba-variation-swatch:hover {
    border-color: var(--lba-gray-700);
    color: var(--lba-black);
}

.lba-variation-swatch.is-selected {
    border-color: var(--lba-black);
    color: var(--lba-black);
    background: var(--lba-white);
}

/* Image swatch variant */
.lba-variation-swatch--img {
    padding: 0;
    width: 64px;
    height: 64px;
    overflow: hidden;
    border-radius: 0;
    white-space: normal;
}

.lba-variation-swatch--img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: transform 0.3s ease;
}

.lba-variation-swatch--img:hover img {
    transform: scale(1.08);
}

.lba-variation-swatch--img.is-selected {
    border-color: var(--lba-black);
    border-width: 2px;
}

.lba-variation-swatch.is-unavailable {
    opacity: 0.35;
    cursor: not-allowed;
    text-decoration: line-through;
}

/* Hidden select (WC compatibility) */
.lba-variation-select {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

/* Clear link (resets all attribute selections; visibility toggled by WC variation.js) */
.lba-variation-reset {
    display: flex;
    justify-content: flex-end;
    margin: calc(var(--lba-space-md) * -0.25) 0 var(--lba-space-md);
    min-height: 1.25rem;
}

.lba-variation-reset .reset_variations {
    font-family: var(--lba-font-secondary);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--lba-gray-500);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    padding-bottom: 1px;
    transition: color 120ms ease, border-color 120ms ease;
    cursor: pointer;
}

.lba-variation-reset .reset_variations:hover,
.lba-variation-reset .reset_variations:focus {
    color: var(--lba-gray-900);
    border-bottom-color: var(--lba-gray-900);
    outline: none;
}

/* =========================================================================
   Cart row
   ========================================================================= */

.lba-cart-row {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    margin-top: var(--lba-space-lg);
}

/* Quantity field — minimal, architectural */
.lba-qty-field {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

.lba-qty-label {
    font-family: var(--lba-font-secondary);
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--lba-gray-500);
}

.lba-qty-input {
    width: 52px;
    height: 36px;
    border: none;
    border-bottom: 1px solid var(--lba-gray-400);
    text-align: center;
    font-family: var(--lba-font-secondary);
    font-size: 0.875rem;
    color: var(--lba-black);
    background: transparent;
    -moz-appearance: textfield;
    transition: border-color 0.2s ease;
}

.lba-qty-input::-webkit-inner-spin-button,
.lba-qty-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
}

.lba-qty-input:focus {
    outline: none;
    border-bottom-color: var(--lba-black);
}

/* Add to cart button — override WooCommerce purple (.button.alt) */
.lba-btn-cart,
button.lba-btn-cart,
.woocommerce .lba-btn-cart,
.woocommerce button.lba-btn-cart,
.woocommerce a.lba-btn-cart,
.single_add_to_cart_button.lba-btn-cart,
.woocommerce .single_add_to_cart_button.lba-btn-cart,
.woocommerce button.button.alt.lba-btn-cart,
.woocommerce #respond input#submit.lba-btn-cart {
    width: 100%;
    height: 48px;
    padding: 0 2rem;
    background: var(--lba-black) !important;
    color: var(--lba-white) !important;
    border: 1px solid var(--lba-black) !important;
    font-family: var(--lba-font-secondary);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s ease;
    white-space: nowrap;
    border-radius: 0;
}

.lba-btn-cart:hover,
button.lba-btn-cart:hover,
.woocommerce .lba-btn-cart:hover,
.woocommerce button.button.alt.lba-btn-cart:hover,
.single_add_to_cart_button.lba-btn-cart:hover {
    background: #333 !important;
    color: var(--lba-white) !important;
    opacity: 1;
}

/* Variation group highlight when selection is required */
.lba-variation-group.needs-selection .lba-variation-label {
    color: #b91c1c;
}

.lba-variation-group.needs-selection .lba-variation-options {
    animation: lba-nudge 0.35s ease;
}

.lba-variation-group.needs-selection .lba-variation-swatch {
    border-color: #b91c1c;
}

@keyframes lba-nudge {
    0%   { transform: translateX(0); }
    20%  { transform: translateX(-4px); }
    60%  { transform: translateX(4px); }
    100% { transform: translateX(0); }
}

/* =========================================================================
   Quote Actions
   ========================================================================= */

.lba-quote-actions {
    display: flex;
    flex-direction: column;
    gap: var(--lba-space-sm);
    margin-top: var(--lba-space-lg);
}

.lba-btn-quote {
    width: 100%;
    height: 48px;
    padding: 0 2rem;
    background: var(--lba-white);
    color: var(--lba-black);
    border: 1px solid var(--lba-black);
    font-family: var(--lba-font-secondary);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.lba-btn-quote:hover {
    background: var(--lba-black);
    color: var(--lba-white);
}

.lba-btn-quote.is-added {
    background: var(--lba-gray-100);
    color: var(--lba-gray-700);
    border-color: var(--lba-gray-300);
}

.lba-btn-quote-view {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: var(--lba-font-secondary);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--lba-gray-500);
    text-decoration: none;
    padding: 0.5rem 0;
    transition: color 0.2s ease;
}

.lba-btn-quote-view:hover {
    color: var(--lba-black);
    opacity: 1;
}

.lba-quote-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    background: var(--lba-black);
    color: var(--lba-white);
    font-size: 0.625rem;
    font-weight: 600;
    border-radius: 9px;
}

.lba-quote-badge:empty {
    display: none;
}

/* =========================================================================
   Save actions row (Quote List + Heart — always visible)
   ========================================================================= */

.lba-save-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: var(--lba-space-sm);
}

.lba-save-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background: none;
    border: 1px solid var(--lba-gray-300);
    font-family: var(--lba-font-secondary);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--lba-gray-700);
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
    white-space: nowrap;
    flex: 1;
    justify-content: center;
}

.lba-save-btn:hover {
    border-color: var(--lba-black);
    color: var(--lba-black);
}

.lba-save-btn.is-active,
.lba-save-btn.lba-heart-btn--filled {
    background: var(--lba-black);
    border-color: var(--lba-black);
    color: var(--lba-white);
}

/* Quote row: Request a Quote + icon button inline */
.lba-quote-row {
    display: flex;
    gap: 2px;
    margin-top: var(--lba-space-lg);
}

.lba-quote-row .lba-btn-request-quote {
    flex: 1;
    min-width: 0;
    display: flex !important;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border-radius: 0;
}

.lba-btn-quote-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto; /* override .lba-btn-add-quote { width: 100% } from list.css:208 */
    min-width: 48px;
    height: 48px;
    flex: 0 0 auto;
    background: var(--lba-white);
    color: var(--lba-black);
    border: 1px solid var(--lba-black);
    border-radius: 0;
    cursor: pointer;
    transition: background 0.2s ease;
    padding: 0 16px;
}

.lba-btn-quote-icon:hover {
    background: var(--lba-gray-50);
}

/* One document icon communicates adding to the quote list without the
   previous hamburger and detached plus combination. */
.lba-btn-quote-icon__document {
    flex-shrink: 0;
}

.lba-btn-quote-icon__check-mark {
    display: none;
}

.lba-btn-quote-icon__label {
    font-family: var(--lba-font-secondary);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    line-height: 1;
}

/* Added state */
.lba-btn-quote-icon.is-in-list {
    background: var(--lba-gray-50);
    border-color: var(--lba-black);
    color: var(--lba-black);
}

.lba-btn-quote-icon.is-in-list .lba-btn-quote-icon__add-mark {
    display: none;
}

.lba-btn-quote-icon.is-in-list .lba-btn-quote-icon__check-mark {
    display: inline;
}

/* LBA_QUOTE_STATE_LABELS_V1: at narrow viewports the secondary label
   ("Remove from Quote List" is the worst case at ~246px) squeezes the
   primary "Request a Quote" button below its content width. Stack the
   row vertically so each CTA gets the full column width. */
@media (max-width: 599.98px) {
    .lba-quote-row {
        flex-direction: column;
        gap: 8px;
    }
    .lba-quote-row .lba-btn-request-quote,
    .lba-quote-row .lba-btn-quote-icon {
        width: 100%;
        flex: 1 1 auto;
    }
}

/* Hint text below quote row (no longer used after F14 — kept defined
   for legacy markup that may still emit it elsewhere). */
.lba-quote-row__hint {
    font-family: var(--lba-font-secondary);
    font-size: 0.6875rem;
    color: var(--lba-gray-400);
    letter-spacing: 0.02em;
    margin: 0.375rem 0 0;
    line-height: 1.4;
}

/* Request a Quote — styled identical to Add to Cart (standalone fallback) */
.lba-btn-request-quote,
a.lba-btn-request-quote,
.lba-btn-cart.lba-btn-request-quote {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    text-decoration: none;
}

/* =========================================================================
   The Maker block
   ========================================================================= */

.lba-maker-block {
    margin-top: var(--lba-space-2xl);
    padding-top: var(--lba-space-xl);
    border-top: 1px solid var(--lba-gray-200);
}

.lba-maker-label {
    display: block;
    font-family: var(--lba-font-secondary);
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--lba-gray-400, #a3a3a3);
    margin-bottom: var(--lba-space-md);
}

.lba-maker-inner {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.lba-maker-logo {
    max-height: 36px;
    max-width: 140px;
    width: auto;
    display: block;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.75;
    transition: opacity 0.2s ease;
}

.lba-maker-logo:hover {
    opacity: 1;
}

.lba-maker-name {
    font-family: var(--lba-font-primary);
    font-size: 1.125rem;
    font-weight: 400;
    color: var(--lba-black);
}

.lba-maker-desc {
    font-family: var(--lba-font-secondary);
    font-size: 0.8125rem;
    line-height: 1.75;
    color: var(--lba-gray-500);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.lba-maker-link {
    font-family: var(--lba-font-secondary);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--lba-gray-700);
    text-decoration: none;
    transition: color 0.2s ease;
}

.lba-maker-link:hover {
    color: var(--lba-black);
    opacity: 1;
}

/* =========================================================================
   Product meta (lead time, authenticity)
   ========================================================================= */

.lba-product-meta {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: var(--lba-space-md);
}

/* When the meta block has no children (no lead-time set on the product, and
   the Authentic-design badge that used to live here was removed), collapse
   it entirely so it doesn't contribute phantom margin between the trade CTA
   above and the accordions below. */
.lba-product-meta:empty {
    display: none;
}

.lba-leadtime,
.lba-authenticity {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--lba-font-secondary);
    font-size: 0.75rem;
    color: var(--lba-gray-500);
    margin: 0;
}

.lba-leadtime svg,
.lba-authenticity svg {
    flex-shrink: 0;
    color: var(--lba-gray-400, #a3a3a3);
}

/* =========================================================================
   Accordions
   ========================================================================= */

/* The .lba-section-divider <div> that sat above .lba-config-block was
   removed — its margin-top equivalent gets restored here so the price /
   stock copy still has breathing room before the variations / cart row. */
.lba-config-block {
    margin-top: var(--lba-space-xl);
}

.lba-accordion-group {
    /* Margin-top replaces the section-divider <div>s removed earlier.
       Calibrated to balance against the price/quote/trade-CTA block above:
       the chain through saveActions + empty product-meta already
       contributes ~24px of gap, so this just adds the rest of the
       breathing room. */
    margin-top: var(--lba-space-xl);
}

.lba-accordion {
    border-bottom: 1px solid var(--lba-gray-200);
}

.lba-accordion-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.125rem 0;
    background: none;
    border: none;
    font-family: var(--lba-font-secondary);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--lba-black);
    cursor: pointer;
    text-align: left;
    transition: color 0.2s ease;
}

.lba-accordion-trigger:hover {
    color: var(--lba-gray-500);
}

/* Animated plus/minus icon */
.lba-accordion-icon {
    position: relative;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.lba-accordion-icon::before,
.lba-accordion-icon::after {
    content: '';
    position: absolute;
    background: currentColor;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.lba-accordion-icon::before {
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    transform: translateY(-50%);
}

.lba-accordion-icon::after {
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    transform: translateX(-50%);
}

.lba-accordion-trigger[aria-expanded="true"] .lba-accordion-icon::after {
    opacity: 0;
    transform: translateX(-50%) rotate(90deg);
}

.lba-accordion-body {
    overflow: hidden;
}

.lba-accordion-content {
    padding-bottom: 1.25rem;
    font-family: var(--lba-font-secondary);
    font-size: 0.875rem;
    line-height: 1.8;
    color: var(--lba-gray-700);
}

.lba-accordion-content p {
    margin-bottom: 0.75rem;
}

.lba-accordion-content p:last-child {
    margin-bottom: 0;
}

.lba-accordion-content ul,
.lba-accordion-content ol {
    padding-left: 1.25rem;
    margin-bottom: 0.75rem;
}

.lba-accordion-content li {
    margin-bottom: 0.375rem;
}

/* =========================================================================
   Spec tables — Dimensions / Finishes / Additional Specifications
   ========================================================================= */

.lba-spec-table {
    width: 100%;
    border-collapse: collapse;
}

.lba-spec-table tr {
    border-bottom: 1px solid var(--lba-gray-200);
}

.lba-spec-table tr:last-child {
    border-bottom: none;
}

.lba-spec-table th,
.lba-spec-table td {
    padding: 0.5rem 0;
    font-family: var(--lba-font-secondary);
    font-size: 0.875rem;
    line-height: 1.6;
    vertical-align: top;
    text-align: left;
    font-weight: 400;
}

.lba-spec-table th {
    width: 45%;
    color: var(--lba-gray-500);
    padding-right: 1rem;
}

.lba-spec-table td {
    color: var(--lba-gray-700);
}

.lba-spec-note {
    margin-top: 0.875rem;
    font-family: var(--lba-font-secondary);
    font-size: 0.75rem;
    line-height: 1.6;
    color: var(--lba-gray-500);
    margin-bottom: 0;
}

/* =========================================================================
   Schema v1.3 dimensions table (dual unit) and tech specs table
   ========================================================================= */

.lba-dim-shown {
    margin: 0 0 1rem 0;
    font-family: var(--lba-font-secondary);
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--lba-gray-700);
}

.lba-dim-shown strong {
    color: var(--lba-gray-500);
    font-weight: 500;
    margin-right: 0.375rem;
}

.lba-dim-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 1rem 0;
}

.lba-dim-table tr {
    border-bottom: 1px solid var(--lba-gray-200);
}

.lba-dim-table tr:last-child {
    border-bottom: none;
}

.lba-dim-table th,
.lba-dim-table td {
    padding: 0.5rem 0.75rem 0.5rem 0;
    font-family: var(--lba-font-secondary);
    font-size: 0.875rem;
    line-height: 1.6;
    text-align: left;
    vertical-align: baseline;
    font-weight: 400;
}

.lba-dim-table th {
    width: 40%;
    color: var(--lba-gray-500);
    font-weight: 500;
}

.lba-dim-table .lba-dim-metric,
.lba-dim-table .lba-dim-imperial {
    width: 30%;
    color: var(--lba-gray-700);
}

.lba-dim-total-configs {
    margin: 1rem 0 0 0;
    font-family: var(--lba-font-secondary);
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--lba-gray-500);
}

.lba-dim-total-configs em {
    font-style: italic;
}

.lba-dim-total-configs a {
    margin-left: 0.5rem;
    color: var(--lba-gray-700);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.lba-dim-total-configs a:hover {
    color: var(--lba-gray-900, #111);
}

.lba-finishes-summary {
    margin: 0 0 1.25rem 0;
}

.lba-finishes-summary p {
    margin: 0 0 0.75rem 0;
    font-family: var(--lba-font-secondary);
    font-size: 0.875rem;
    line-height: 1.65;
    color: var(--lba-gray-700);
}

.lba-finishes-summary p:last-child {
    margin-bottom: 0;
}

.lba-tech-specs {
    width: 100%;
    border-collapse: collapse;
}

.lba-tech-specs tr {
    border-bottom: 1px solid var(--lba-gray-200);
}

.lba-tech-specs tr:last-child {
    border-bottom: none;
}

.lba-tech-specs th,
.lba-tech-specs td {
    padding: 0.5rem 1rem 0.5rem 0;
    font-family: var(--lba-font-secondary);
    font-size: 0.875rem;
    line-height: 1.6;
    text-align: left;
    vertical-align: baseline;
    font-weight: 400;
}

.lba-tech-specs th {
    width: 35%;
    color: var(--lba-gray-500);
    font-weight: 500;
}

.lba-tech-specs td {
    color: var(--lba-gray-700);
}

/* =========================================================================
   Related product rows
   ========================================================================= */

.lba-related-row {
    margin-top: var(--lba-space-4xl);
    padding-top: var(--lba-space-3xl);
    border-top: 1px solid var(--lba-gray-200);
}

.lba-related-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: var(--lba-space-xl);
}

.lba-related-title {
    font-family: var(--lba-font-primary);
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--lba-black);
}

.lba-related-link {
    font-family: var(--lba-font-secondary);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--lba-gray-500);
    text-decoration: none;
    transition: color 0.2s ease;
    white-space: nowrap;
}

.lba-related-link:hover {
    color: var(--lba-black);
    opacity: 1;
}

/* Horizontal scroll track — single row, scrolls left/right */
.lba-related-scroll-wrap {
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.lba-related-scroll-wrap::-webkit-scrollbar {
    display: none;
}

.lba-related-track {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--lba-space-lg);
}

/* Product card — fixed width so track never wraps */
.lba-related-card {
    display: block;
    text-decoration: none;
    color: inherit;
    flex: 0 0 220px;
    width: 220px;
}

.lba-related-card__img {
    overflow: hidden;
    background: #fff;
    margin-bottom: var(--lba-space-sm);
    aspect-ratio: 4 / 5;
}

.lba-related-card__img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: transform 0.6s ease;
}

.lba-related-card:hover .lba-related-card__img img {
    transform: scale(1.04);
}

.lba-related-card__placeholder {
    width: 100%;
    height: 100%;
    background: var(--lba-gray-200);
}

.lba-related-card__info {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.lba-related-card__brand {
    font-family: var(--lba-font-secondary);
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--lba-gray-500);
}

.lba-related-card__name {
    font-family: var(--lba-font-primary);
    font-size: 0.9375rem;
    font-weight: 400;
    color: var(--lba-black);
    line-height: 1.3;
}

.lba-related-card__price {
    font-family: var(--lba-font-secondary);
    font-size: 0.8125rem;
    color: var(--lba-gray-500);
    margin-top: 0.125rem;
}

.lba-related-card__price .woocommerce-Price-amount {
    font-size: 0.8125rem;
    color: var(--lba-gray-500);
}

/* .lba-related-card__more-info styles live in archive.css (shared component) */

/* =========================================================================
   Image Modal
   ========================================================================= */

.lba-image-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lba-image-modal[hidden] {
    display: none;
}

.lba-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
    cursor: zoom-out;
}

.lba-modal-img {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    z-index: 1;
}

.lba-modal-close {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    z-index: 2;
    background: none;
    border: none;
    color: var(--lba-white);
    cursor: pointer;
    padding: 0.5rem;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.lba-modal-close:hover {
    opacity: 1;
}

.lba-modal-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 80px;
    background: rgba(0, 0, 0, 0.35);
    border: none;
    color: var(--lba-white);
    cursor: pointer;
    transition: background 0.2s ease;
}

.lba-modal-nav:hover {
    background: rgba(0, 0, 0, 0.6);
}

.lba-modal-nav--prev {
    left: 1rem;
}

.lba-modal-nav--next {
    right: 1rem;
}

@media (max-width: 599.98px) {
    .lba-modal-nav {
        width: 40px;
        height: 64px;
    }
    .lba-modal-nav--prev { left: 0.5rem; }
    .lba-modal-nav--next { right: 0.5rem; }
}

/* While the image modal is open, hide the hamburger header so it doesn't
   overlap the lightbox content */
body:has(.lba-image-modal:not([hidden])) .hamburger-header,
body:has(.lba-image-modal:not([hidden])) .hamburger-preheader {
    display: none !important;
}

/* =========================================================================
   Toast notification
   ========================================================================= */

.lba-toast {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 500;
    background: var(--lba-black);
    color: var(--lba-white);
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    max-width: 360px;
    transform: translateY(0);
    opacity: 1;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.lba-toast[hidden] {
    display: flex !important;
    opacity: 0;
    transform: translateY(1rem);
    pointer-events: none;
}

.lba-toast-message {
    font-family: var(--lba-font-secondary);
    font-size: 0.8125rem;
    flex: 1;
}

.lba-toast-link {
    font-family: var(--lba-font-secondary);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s ease;
    flex-shrink: 0;
}

.lba-toast-link:hover {
    color: var(--lba-white);
    opacity: 1;
}

/* =========================================================================
   Quote page [lba_quote_list]
   ========================================================================= */

.lba-quote-page {
    padding: var(--lba-space-3xl) 0 var(--lba-space-4xl);
}

.lba-quote-empty {
    text-align: center;
    padding: var(--lba-space-4xl) 0;
}

.lba-quote-empty-msg {
    font-family: var(--lba-font-primary);
    font-size: 1.25rem;
    color: var(--lba-gray-500);
    margin-bottom: var(--lba-space-xl);
}

.lba-quote-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: start;
}

.lba-quote-section-title {
    font-family: var(--lba-font-primary);
    font-size: 1.75rem;
    font-weight: 300;
    letter-spacing: 0.02em;
    color: var(--lba-black);
    margin-bottom: var(--lba-space-xl);
    padding-bottom: var(--lba-space-md);
    border-bottom: 1px solid var(--lba-gray-200);
}

/* Quote item */
.lba-quote-item {
    display: grid;
    grid-template-columns: 80px 1fr auto;
    gap: var(--lba-space-md);
    align-items: start;
    padding: var(--lba-space-md) 0;
    border-bottom: 1px solid var(--lba-gray-200);
}

.lba-quote-item__img {
    width: 80px;
    height: 100px;
    overflow: hidden;
    background: var(--lba-gray-100);
    flex-shrink: 0;
}

.lba-quote-item__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lba-quote-item__img-placeholder {
    width: 100%;
    height: 100%;
    background: var(--lba-gray-200);
}

.lba-quote-item__details {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.lba-quote-item__brand {
    font-family: var(--lba-font-secondary);
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--lba-gray-500);
}

.lba-quote-item__name {
    font-family: var(--lba-font-primary);
    font-size: 0.9375rem;
    color: var(--lba-black);
    text-decoration: none;
}

.lba-quote-item__name:hover {
    opacity: 0.7;
}

.lba-quote-item__qty {
    margin-top: 0.5rem;
    font-family: var(--lba-font-secondary);
    font-size: 0.8125rem;
    color: var(--lba-gray-500);
}

.lba-quote-item__qty input {
    width: 52px;
    border: 1px solid var(--lba-gray-300);
    padding: 0.25rem 0.5rem;
    font-family: var(--lba-font-secondary);
    font-size: 0.8125rem;
    text-align: center;
    color: var(--lba-black);
    -moz-appearance: textfield;
}

.lba-quote-item__qty input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

.lba-quote-item__remove {
    background: none;
    border: none;
    color: var(--lba-gray-300);
    cursor: pointer;
    padding: 0.25rem;
    transition: color 0.2s ease;
    flex-shrink: 0;
}

.lba-quote-item__remove:hover {
    color: var(--lba-black);
}

/* Per-item notes */
.lba-quote-item__notes {
    margin-top: 0.5rem;
}

.lba-quote-item__notes-label {
    display: block;
    font-family: var(--lba-font-secondary);
    font-size: 0.5625rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--lba-gray-400);
    margin-bottom: 0.25rem;
}

.lba-quote-item-note {
    width: 100%;
    padding: 0.5rem 0;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--lba-gray-200);
    font-family: var(--lba-font-secondary);
    font-size: 0.8125rem;
    color: var(--lba-black);
    resize: none;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s ease;
    line-height: 1.5;
}

.lba-quote-item-note::placeholder {
    color: var(--lba-gray-300);
    font-size: 0.75rem;
    letter-spacing: 0.02em;
}

.lba-quote-item-note:focus {
    border-bottom-color: var(--lba-black);
}

/* Quote form */
.lba-quote-form-note {
    font-family: var(--lba-font-secondary);
    font-size: 0.8125rem;
    color: var(--lba-gray-500);
    margin-bottom: var(--lba-space-xl);
    line-height: 1.7;
}

.lba-quote-field {
    margin-bottom: var(--lba-space-md);
}

.lba-quote-field label {
    display: block;
    font-family: var(--lba-font-secondary);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--lba-gray-700);
    margin-bottom: 0.375rem;
}

.lba-quote-field label span {
    color: var(--lba-gray-400, #a3a3a3);
}

.lba-quote-field input,
.lba-quote-field textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--lba-gray-300);
    background: var(--lba-white);
    font-family: var(--lba-font-secondary);
    font-size: 0.9375rem;
    color: var(--lba-black);
    transition: border-color 0.2s ease;
    -webkit-appearance: none;
}

.lba-quote-field input:focus,
.lba-quote-field textarea:focus {
    outline: none;
    border-color: var(--lba-black);
}

.lba-quote-field textarea {
    resize: vertical;
    min-height: 100px;
}

.lba-quote-submit-row {
    margin-top: var(--lba-space-xl);
}

.lba-quote-submit-btn {
    width: 100%;
    height: 52px;
}

.lba-quote-privacy-note {
    font-family: var(--lba-font-secondary);
    font-size: 0.6875rem;
    color: var(--lba-gray-400, #a3a3a3);
    text-align: center;
    margin-top: var(--lba-space-sm);
}

.lba-quote-feedback {
    margin-top: var(--lba-space-md);
    padding: 0.875rem 1rem;
    font-family: var(--lba-font-secondary);
    font-size: 0.875rem;
}

.lba-quote-feedback.is-success {
    background: #f0faf0;
    color: #2d6a2d;
    border-left: 3px solid #2d6a2d;
}

.lba-quote-feedback.is-error {
    background: #fdf0f0;
    color: #8b2020;
    border-left: 3px solid #8b2020;
}

/* =========================================================================
   Responsive
   ========================================================================= */

@media (max-width: 1024px) {
    .lba-product-layout {
        gap: 3rem;
    }

    /* related track stays single-row scroll on all breakpoints */
}

@media (max-width: 768px) {
    .lba-product-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 2rem;
    }

    .lba-gallery-panel {
        position: static;
    }

    .lba-save-actions {
        flex-wrap: wrap;
    }

    .lba-product-title {
        font-size: 1.75rem;
    }


    .lba-related-header {
        flex-direction: column;
        gap: 0.5rem;
    }

    .lba-quote-layout {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .lba-toast {
        left: 1rem;
        right: 1rem;
        bottom: 1rem;
        max-width: none;
    }
}

@media (max-width: 480px) {
    .lba-qty-field {
        justify-content: center;
    }

    .lba-related-track {
        grid-template-columns: repeat(2, 1fr);
    }
}