/* --- Breadcrumb Navigation --- */
.breadcrumb-container {
    width: 100%;
    padding: 160px 50px 30px 50px; /* Elevated top padding to clear absolute header positions */
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
}
.breadcrumb-trail {
    font-family: var(--primary-font);
    font-size: 13px;
    letter-spacing: 0.5px;
    color: var(--olive-drab);
    font-weight: 400;
}
.breadcrumb-separator {
    margin: 0 10px;
    opacity: 0.4;
}
.breadcrumb-trail a:hover {
    color: var(--smokey-black);
}
.breadcrumb-trail span.active-node {
    color: var(--warm-taupe);
}

/* --- Master Details Layout Container Layout Refactor --- */
.product-viewport-container {
    display: flex;
    gap: 80px;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 50px 100px 50px;
    align-items: flex-start; /* Crucial: Prevents elements from stretching down, allowing sticky tracking to fire */
}

/* --- Left Column: Media Presentation System (Sticky) --- */
.product-media-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 25px;
    position: sticky;
    top: 100px;
    height: auto;
    z-index: 2;}

.primary-display-frame {
    width: 100%;
    aspect-ratio: 1 / 1;
    background-color: #f7f6f2; /* Styled placeholder window matching cards */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.primary-display-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- High-End Thumbnail Slider Architecture --- */

.thumbnails-slider-container {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin-top: 5px;
}

.thumbnails-matrix-row {
    display: flex;
    gap: 15px;
    flex: 1;
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    scroll-behavior: smooth;
    scrollbar-width: none; /* Modern Firefox hide scrollbar rule */
    -webkit-overflow-scrolling: touch; /* Butter-smooth momentum scrolling on iOS */
}

/* Modern Webkit hide scrollbar rules */
.thumbnails-matrix-row::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.thumbnail-window {
    /* Dynamics calculated directly from the parent 15px gap configuration (4 gaps total for 5 items) */
    flex: 0 0 calc((100% - (15px * 4)) / 5);
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: #f7f6f2;
    cursor: pointer;
    transition: border-color 0.25s ease, transform 0.25s ease;
}

/* Premium Visual Response on Active Target Frame */
.thumbnail-window.active-frame {
    border: 1px solid var(--smokey-black);
    transform: scale(0.98); /* Luxury inner compression click feedback */
}

.thumbnail-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.thumbnail-window:hover .thumbnail-img {
    transform: scale(1.05); /* Premium cinematic image bloom on tile hover */
}

/* --- Navigation Controls Engine --- */

.thumb-nav-btn {
    width: 42px;
    height: 42px;
    background: #ffffff;
    border: 1px solid #dddddd;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
    flex-shrink: 0;
    user-select: none; /* Prevents selection highlighting on rapid user clicking */
}

.thumb-nav-btn:hover {
    background: var(--smokey-black);
    border-color: var(--smokey-black);
    color: #ffffff;
}

/* Clean, modern focus states for keyboard-centric web accessibility standards */
.thumb-nav-btn:focus-visible {
    outline: 2px solid var(--smokey-black);
    outline-offset: 2px;
}

/* --- Right Column: Text Editorial Meta Details (Sticky Layout integrated with presentation settings) --- */
.product-meta-panel {
    flex: 1.1;
    text-align: left;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 100px; /* Aligned exactly symmetric with the left column viewport metrics */
    height: auto;
        z-index:1;

}/* ==========================================================================
   PRODUCT TITLE & CORNER SHARE ACTION ENGINE
   ========================================================================== */

/* The primary flex line container layout */
.product-title-header-matrix {
    display: flex;
    align-items: flex-start; /* Aligns button to the absolute top line of text */
    justify-content: space-between; /* Pushes button cleanly to the right edge */
    gap: 24px;
    width: 100%;
    margin-bottom: 12px; /* Handles spacing down to the ratings container layout */
}

/* Updated product title class (Stripped original margin-bottom into parent wrapper) */
.editorial-product-title {
    font-family: var(--serif-font);
    font-size: 42px;
    font-weight: 500;
    color: var(--smokey-black);
    line-height: 1.2;
    margin-bottom: 0 !important;
    flex: 1; /* Allows the title line track to take maximum width container spaces */
}

/* Luxury Capsule Button Layer Layout */
.corner-share-action-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0; /* Prevents compression on dynamic browser viewport changes */
    margin-top: 4px; /* Precision macro baseline tracking shift matching typography cap-height */
    transition: background-color 0.3s cubic-bezier(0.25, 1, 0.5, 1), transform 0.2s ease;
}

/* Premium Minimalist Visual Feedback Interactions */
.corner-share-action-btn:hover {
    background-color: rgba(0, 0, 0, 0.04); /* Soft circular bloom ring */
    transform: scale(1.05);
}

.corner-share-action-btn:focus-visible {
    outline: 2px solid var(--smokey-black);
    outline-offset: 2px;
}

/* Custom Image Handler Architecture */
.corner-share-icon-img {
    width: 22px; /* Sizing parameters tuned to balance against 42px titles */
    height: 22px;
    object-fit: contain;
    
    /* Maps the custom PNG directly to your standard dark color scheme */
    filter: brightness(0) saturate(100%);
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.corner-share-action-btn:hover .corner-share-icon-img {
    opacity: 1;
}

/* ==========================================================================
   RESPONSIVE TUNING UPGRADES (INTEGRATED SPECIFICS)
   ========================================================================== */
@media (max-width: 992px) {
    .editorial-product-title {
        font-size: 32px; /* Pulls from your existing tablet media scale code */
    }
    .corner-share-action-btn {
        width: 38px;
        height: 38px;
        margin-top: 2px;
    }
    .corner-share-icon-img {
        width: 18px;
        height: 18px;
    }
}

@media (max-width: 576px) {
    .product-title-header-matrix {
        gap: 16px;
    }
    .editorial-product-title {
        font-size: 26px; /* Pulls from your existing mobile layout code */
    }
    .corner-share-action-btn {
        width: 32px;
        height: 32px;
        margin-top: 0;
    }
    .corner-share-icon-img {
        width: 16px;
        height: 16px;
    }
}
.editorial-product-title {
    font-family: var(--serif-font);
    font-size: 42px;
    font-weight: 500;
    color: var(--smokey-black);
    line-height: 1.2;
    margin-bottom: 12px;
}
.ratings-summary-row {
    display: flex;
    align-items: center;
    gap: 12px; /* Precision spacing between the star row and text node */
    margin-bottom: 20px;
}

.editorial-stars-track {
    display: flex;
    align-items: center;
    gap: 5px; /* Subtle warm padding separating the individual stars */
    color: #ffcc00; /* Subtle warm gold stars tracking layouts */
    font-size: 12px;
}

.ratings-count-link {
    font-family: var(--primary-font);
    font-size: 12px;
    letter-spacing: 0.5px;
    color: var(--warm-taupe);
    text-decoration: none;
    font-weight: 400;
    transition: color 0.3s ease;
}

.ratings-count-link:hover {
    color: var(--smokey-black);
}
.specifications-inline-strip {
    font-family: var(--primary-font);
    font-size: 13px; /* Slightly bigger for readability */
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 18px;
    margin-bottom: 25px;
    
    /* Change to row display */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; /* Wraps cleanly on small mobile screens */
    gap: 20px; 
}
.spec-item {
    display: flex;
    align-items: center;
    gap: 6px;
    position: relative;
}
/* Adds an elegant minimalist separator line between the items */
.spec-item:not(:last-child)::after {
    content: "|";
    color: var(--border-color);
    margin-left: 20px;
    opacity: 0.6;
}
.spec-label {
    color: var(--warm-taupe);
    font-weight: 400;
}
.spec-value {
    color: var(--smokey-black);
    font-weight: 600; /* Bold value pops out nicer */
}
.product-short-description {
    font-family: var(--primary-font);
    font-size: 14px;
    line-height: 1.7;
    color: var(--olive-drab);
    font-weight: 300;
    margin-bottom: 30px;
}

/* --- Variations Framework Blocks --- */
.variation-selection-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 25px;
}
.variation-label-title {
    font-family: var(--primary-font);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--smokey-black);
    font-weight: 500;
}
.variation-label-title span {
    color: var(--warm-taupe);
    font-weight: 400;
}
.size-buttons-grid, .dimension-buttons-grid {
    display: flex;
    gap: 10px;
}
/* --- Color Swatches Custom Adjustments --- */
/* --- Color Swatches Custom Adjustments --- */
.color-swatches {
    display: flex;
    flex-wrap: wrap;       /* Crucial: Allows swatches to drop into a new row automatically */
    gap: 14px 12px;        /* 14px vertical row-gap, 12px horizontal column-gap */
    align-items: center;
    padding: 5px 0;
    max-width: 100%;       /* Restrains content within parent parameters */
}

.color-swatches .swatch {
    width: 50px; 
    height: 50px; 
    border-radius: 50%; 
    cursor: pointer;
    display: inline-block;
    position: relative;
    border: 1px solid rgba(0, 0, 0, 0.1); 
    transition: all 0.2s ease-in-out;
    flex-shrink: 0;        /* Prevents circles from compressing into ovals */
}

/* Interactive Hover State */
.color-swatches .swatch:hover {
    transform: scale(1.08); 
}

/* Active Selected State with Ring Effect */
.color-swatches .swatch.active {
    outline: 1px solid var(--smokey-black); 
    outline-offset: 3px; 
}
.variant-option-btn {
    min-width: 50px;
    height: 40px;
    padding: 0 15px;
    background: transparent;
    border: 1px solid rgba(0,0,0,0.15);
    font-family: var(--primary-font);
    font-size: 12px;
    font-weight: 500;
    color: var(--smokey-black);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}
.variant-option-btn.selected-variant {
    border-color: var(--smokey-black);
    background-color: var(--smokey-black);
    color: #ffffff;
}

/* --- Dynamic Stock Scarcity Engine --- */
.stock-countdown-wrapper {
    max-width: 440px;
    margin-bottom: 30px;
}
.scarcity-alert-text {
    font-family: var(--primary-font);
    font-size: 13px;
    color: var(--smokey-black);
    margin-bottom: 8px;
    font-weight: 400;
}
.scarcity-meter-bar {
    width: 100%;
    height: 4px;
    background-color: rgba(0,0,0,0.06);
    position: relative;
}
.scarcity-meter-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 25%; /* Custom structural progress value */
    background-color: var(--smokey-black);
}

/* --- Architectural Countdown Grid Matrix --- */
.countdown-matrix-row {
    display: flex;
    gap: 12px;
    margin-bottom: 35px;
}
.countdown-time-block {
    background-color: #f6f5f1;
    padding: 12px 18px;
    min-width: 65px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.countdown-numeric-value {
    font-family: var(--primary-font);
    font-size: 16px;
    font-weight: 600;
    color: var(--smokey-black);
}
.countdown-label-tag {
    font-family: var(--primary-font);
    font-size: 10px;
    color: var(--warm-taupe);
    text-transform: capitalize;
}

/* --- Pricing Architecture Frame --- */
/* --- Pricing Architecture Frame --- */
.pricing-presentation-box {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    border-top: 1px solid var(--border-color);
    padding-top: 25px;
    width: 100%;
}

.price-range-wrapper {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.price-range-label {
    font-family: var(--primary-font);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--smokey-black);
    font-weight: 600;
    margin-bottom: 2px;
}

.price-direction-tag {
    font-family: var(--primary-font);
    font-size: 16px;
    text-transform: capitalize;
    letter-spacing: 0.5px;
    color: var(--warm-taupe);
    font-weight: 400;
    margin-bottom: 2px;
}

.presentation-current-price {
    font-family: var(--serif-font);
    font-size: 32px;
    font-weight: 500;
    color: var(--smokey-black);
    letter-spacing: 0.5px;
}

/* --- Quantitative Processing Operations Desk --- */
.transaction-processing-row {
    display: flex;
    gap: 15px;
    width: 100%;
    max-width: 520px;
    margin-bottom: 25px;
}
.quantity-stepper-wrapper {
    display: flex;
    border: 1px solid rgba(0,0,0,0.15);
    height: 52px;
    align-items: center;
}
.quantity-stepper-input {
    width: 50px;
    height: 100%;
    border: none;
    background: transparent;
    text-align: center;
    font-family: var(--primary-font);
    font-size: 14px;
    color: var(--smokey-black);
    font-weight: 500;
    outline: none;
}
.stepper-actions-buttons {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-left: 1px solid rgba(0,0,0,0.15);
}
.stepper-nav-btn {
    flex: 1;
    width: 28px;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    color: var(--olive-drab);
    transition: background-color 0.2s ease;
}
.stepper-nav-btn:first-child {
    border-bottom: 1px solid rgba(0,0,0,0.15);
}
.stepper-nav-btn:hover {
    background-color: rgba(0,0,0,0.03);
}
.add-to-cart-master-btn {
    flex: 1;
    height: 52px;
    background-color: var(--smokey-black);
    color: #ffffff;
    font-family: var(--primary-font);
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 2px;
    border: 1px solid var(--smokey-black);
    cursor: pointer;
    transition: all 0.3s ease;
}
.add-to-cart-master-btn:hover {
    background-color: transparent;
    color: var(--smokey-black);
}

/* ==========================================================================
   PRIMARY ACTION BUTTON: BOOK CONSULTATION (DESKTOP & PC)
   ========================================================================== */
.transaction-processing-row {
    display: flex;
    gap: 15px;
    width: 100%;
    max-width: 520px;
    margin-bottom: 25px;
}

.book-consultation-master-btn {
    flex: 1;
    height: 52px;
    background-color: var(--smokey-black);
    color: #ffffff;
    font-family: var(--primary-font);
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 2px;
    border: 1px solid var(--smokey-black);
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none; /* Prevents underline when using <a> tag */
}

/* Minimalist Hover Feedback */
.book-consultation-master-btn:hover {
    background-color: transparent;
    color: var(--smokey-black);
}

/* Accessibility Focus Ring */
.book-consultation-master-btn:focus-visible {
    outline: 2px solid var(--smokey-black);
    outline-offset: 2px;
}


/* ==========================================================================
   RESPONSIVE MOBILE & TABLET TUNING (MOBILE & TABLET)
   ========================================================================== */
@media (max-width: 992px) {
    .transaction-processing-row {
        max-width: 100%;
        width: 100%;
    }

    .book-consultation-master-btn {
        font-size: 12px;
        letter-spacing: 1.5px;
        padding: 16px;
        height: 50px;
    }
}

@media (max-width: 576px) {
    .book-consultation-master-btn {
        font-size: 11px;
        letter-spacing: 1.2px;
        padding: 14px;
        height: 48px;
    }
}
/* --- Auxiliary Action Anchors --- */
.auxiliary-actions-row {
    display: flex;
    gap: 25px;
    margin-bottom: 40px;
}
.auxiliary-action-link {
    font-family: var(--primary-font);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--smokey-black);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}
.auxiliary-action-link:hover {
    opacity: 1;
}

/* --- Social Share Block Configuration --- */
.meta-social-share-row {
    display: flex;
    gap: 10px;
    margin-bottom: 40px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 30px;
}
.meta-share-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    font-family: var(--primary-font);
    font-size: 11px;
    font-weight: 500;
    color: #ffffff;
    cursor: pointer;
}
.badge-facebook { background-color: #3b5998; }
.badge-twitter { background-color: #1da1f2; }
.badge-pinterest { background-color: #bd081c; }

/* --- Reassurance Matrix Container Block --- */
.trust-reassurance-matrix {
    border: 1px dashed rgba(160, 152, 138, 0.4);
    padding: 30px;
    background-color: #fcfbfa;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.trust-row-node {
    display: flex;
    gap: 18px;
    align-items: flex-start;
}
.trust-node-icon {
    font-size: 16px;
    color: var(--olive-drab);
    margin-top: 2px;
}
.trust-node-details h4 {
    font-family: var(--primary-font);
    font-size: 13px;
    color: var(--smokey-black);
    margin-bottom: 4px;
    font-weight: 600;
}
.trust-node-details p {
    font-family: var(--primary-font);
    font-size: 12px;
    line-height: 1.5;
    color: var(--warm-taupe);
    font-weight: 300;
}
 /* --- What's Included Text Button Style --- */
.whats-included-trigger-container {
    width: 100%;
    margin-bottom: 12px;
}
.whats-included-text-btn {
    background: transparent;
    border: none;
    font-family: var(--primary-font);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
     color: var(--smokey-black);
   border-bottom: 1px dashed var(--smokey-black);
    transition: all 0.3s ease;
}
.whats-included-text-btn:hover {
   

    color: var(--warm-taupe);
    border-bottom: 1px dashed transparent;
}
/* --- High-End Minimalist Modal Overlay System --- */
.luxury-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(1, 1, 0, 0.4);
    backdrop-filter: blur(4px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.luxury-modal-overlay.modal-visible {
    opacity: 1;
    pointer-events: auto;
}
.luxury-modal-window {
    background-color: #ffffff;
    padding: 45px 50px 35px 50px; /* Refined bottom alignment area spacing */
    max-width: 500px;
    width: 90%;
    position: relative;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
    transform: translateY(20px);
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.luxury-modal-overlay.modal-visible .luxury-modal-window {
    transform: translateY(0);
}

/* --- Premium Inner Scrolling Layout Framework --- */
.luxury-modal-content {
    max-height: 350px; /* Restrained height setup for inner data lanes */
    overflow-y: auto;  /* Standard behavior: adds scrollbar automatically when overflowing */
    overflow-x: hidden;
    padding-right: 15px; /* Keeps list data offset gracefully away from scrollbars */
    scrollbar-width: thin; 
    scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
}

/* Premium Minimal Scrollbar Track Customizations for Webkit */
.luxury-modal-content::-webkit-scrollbar {
    width: 4px; /* Thin Apple-esque utility line formatting */
}
.luxury-modal-content::-webkit-scrollbar-track {
    background: transparent;
}
.luxury-modal-content::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 10px;
}
.luxury-modal-content::-webkit-scrollbar-thumb:hover {
    background-color: var(--smokey-black);
}

.modal-close-btn {
    position: absolute;
    top: 20px;
    right: 25px;
    background: transparent;
    border: none;
    font-size: 28px;
    color: var(--warm-taupe);
    cursor: pointer;
    transition: color 0.3s ease;
}
.modal-close-btn:hover {
    color: var(--smokey-black);
}
.modal-serif-title {
    font-family: var(--serif-font);
    font-size: 26px;
    font-weight: 500;
    color: var(--smokey-black);
    margin-bottom: 20px;
    letter-spacing: 0.5px;
}
.modal-inclusion-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    text-align: left;
}
/* --- Elegant Description Text Inside Modal Window --- */
.modal-editorial-desc {
    font-family: var(--primary-font);
    font-size: 13px;
    line-height: 1.6;
    color: var(--olive-drab);
    font-weight: 300;
    margin-bottom: 20px; 
    opacity: 0.85;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 15px;
}
.modal-inclusion-list li {
    font-family: var(--primary-font);
    font-size: 13px;
    line-height: 1.5;
    color: var(--olive-drab);
    font-weight: 300;
    display: flex;
    align-items: center;
    gap: 12px;
}
.modal-inclusion-list li i {
    font-size: 11px;
    color: var(--warm-taupe);
}

/* --- Responsive Layout Adjustments --- */
@media (max-width: 576px) {
    .luxury-modal-window {
        padding: 35px 25px 25px 25px;
        width: 92%;
    }
    .luxury-modal-content {
        max-height: 300px; /* Marginally lower ceiling constraint logic built for short viewports */
        padding-right: 8px;
    }
    .modal-serif-title {
        font-size: 22px;
        margin-bottom: 15px;
    }
    .modal-close-btn {
        top: 15px;
        right: 20px;
        font-size: 24px;
    }
}

/* ==========================================================================
   IMAGE ZOOM ENGINE STYLES
   ========================================================================== */

/* Ensures the lens and result anchor correctly to the media panel */
.zoom-wrapper {
    position: relative;
    /* Keeps the result window relative to this container */
}

/* The Lens: Mimics the dark, semi-transparent square from your reference image */
.img-zoom-lens {
    position: absolute;
    border: 1px solid rgba(0, 0, 0, 0.2);
    background-color: rgba(0, 0, 0, 0.4); /* High-end dark overlay */
    width: 200px; /* Size of the magnifier square */
    height: 200px;
    cursor: crosshair;
    
    /* Hidden by default, reveals on hover */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease;
}

/* The Result: The large projection window that floats over the right column */
.img-zoom-result {
    position: absolute;
    top: 0;
    left: calc(100% + 40px); /* Projects it directly over the gap/right column */
    width: 500px; 
    height: 500px;
    border: 1px solid var(--border-color);
    background-color: #ffffff;
     z-index: 1000; /* Forces it above all text/meta content */
    background-repeat: no-repeat;
    
    /* Hidden by default, reveals on hover */
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* Prevents blocking clicks when invisible */
    transition: opacity 0.25s ease;
}

/* Micro-Interaction Hover Triggers */
.zoom-wrapper:hover .img-zoom-lens,
.zoom-wrapper:hover .img-zoom-result {
    opacity: 1;
    visibility: visible;
}


/* --- Floating View Expansion Action Button --- */
/* --- Floating View Expansion Action Button (Top-Left Position) --- */
.expand-view-trigger-btn {
    position: absolute;
    top: 20px;          /* Changed from bottom to top */
    left: 20px;         /* Changed from right to left */
    width: 44px;
    height: 44px;
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 50%;
    color: var(--smokey-black);
    font-size: 16px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    z-index: 10;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.expand-view-trigger-btn:hover {
    background-color: var(--smokey-black);
    color: #ffffff;
    transform: scale(1.05);
}
.expand-icon-img {
    width: 20px;       /* Scale parameter matching structural designs */
    height: 20px;
    object-fit: contain;
    
    /* Forces the PNG icon elements to render pure black by default */
    filter: brightness(0) saturate(100%); 
    transition: filter 0.3s ease;
}

/* Optional: If you want the icon to shift color to white when hovering over the button container */
.expand-view-trigger-btn:hover .expand-icon-img {
    filter: brightness(0) invert(1);
    
}

/* --- Lightbox Gallery Navigation Arrows --- */
.lightbox-nav-btn {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    z-index: 1020;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.lightbox-nav-btn:hover {
    background: #ffffff;
    color: var(--smokey-black);
    transform: translateY(-50%) scale(1.08);
}

.lightbox-prev {
    left: 40px;
}

.lightbox-next {
    right: 40px;
}

/* Responsive optimization for minor screens */
@media (max-width: 768px) {
    .lightbox-nav-btn {
        width: 46px;
        height: 46px;
        font-size: 16px;
    }
    .lightbox-prev { left: 15px; }
    .lightbox-next { right: 15px; }
}
/* --- Premium Full Image Lightbox Layouts --- */
.image-lightbox-overlay .lightbox-modal-window {
    background-color: transparent;
    box-shadow: none;
    max-width: 90vw;
    max-height: 90vh;
    width: auto;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-image-frame {
    max-width: 100%;
    max-height: 85vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.lightbox-image-frame img {
    max-width: 100%;
    max-height: 85vh;
    object-fit: contain;
    background-color: #f7f6f2;
}

.lightbox-close-btn {
    position: fixed;
    top: 25px;
    right: 35px;
    background: transparent;
    border: none;
    font-size: 42px;
    color: #ffffff;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.3s ease;
    z-index: 1010;
}

.lightbox-close-btn:hover {
    opacity: 1;
}


/* ==========================================================================
   HIGH-END ADAPTIVE MOBILE & TABLET MEDIA INTERACTION MATRIX (UPDATED)
   ========================================================================== */

@media (max-width: 992px) {
    /* --- Breadcrumb Rebalancing --- */
    .breadcrumb-container {
        padding: 160px 20px 15px 20px;
        justify-content: flex-start;
    }
    .breadcrumb-trail {
        font-size: 12px;
        white-space: nowrap;
        overflow-x: auto;
        display: block;
        width: 100%;
        scrollbar-width: none;
    }
    .breadcrumb-trail::-webkit-scrollbar {
        display: none;
    }

    /* --- Core Container Deconstruction --- */
    .product-viewport-container {
        flex-direction: column;
        gap: 40px;
        padding: 0 20px 60px 20px;
    }

    /* --- Left Column: Media Presentation Refactor --- */
    .product-media-panel {
        width: 100%;
        position: static;
        height: auto;
        gap: 15px;
    }

    /* --- Disabling Complex Zoom Engine for Mobile Touch Screens --- */
    .img-zoom-lens,
    .img-zoom-result {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
    
    .zoom-wrapper {
        cursor: default;
    }

    /* --- Floating Expand View Button Size Reduction (Tablet Mode) --- */
    .expand-view-trigger-btn {
        width: 36px;        /* Scaled down from 44px */
        height: 36px;       /* Scaled down from 44px */
        top: 15px;
        left: 15px;
    }
    .expand-icon-img {
        width: 16px;        /* Scaled down from 20px */
        height: 16px;       /* Scaled down from 20px */
    }

    /* --- Swipe Thumbnails Track Preservation --- */
    .thumbnails-slider-container {
        padding: 0;
        gap: 0;
    }
    .thumb-nav-btn {
        display: none !important; 
    }
    .thumbnails-matrix-row {
        gap: 12px;
        padding: 5px 0;
    }
    .thumbnail-window {
        flex: 0 0 22%;
        aspect-ratio: 1 / 1;
    }

    /* --- Right Column: Content Meta Details Refactor --- */
    .product-meta-panel {
        width: 100%;
        position: static;
        height: auto;
    }

    .editorial-product-title {
        font-size: 32px;
        line-height: 1.25;
    }

    .specifications-inline-strip {
        gap: 12px 15px;
        margin-bottom: 20px;
        padding-bottom: 15px;
    }

    .spec-item:not(:last-child)::after {
        margin-left: 15px;
    }

    /* --- Pricing Typography Size Reduction (Tablet Mode) --- */
    .presentation-current-price {
        font-size: 26px;    /* Scaled down from 32px */
    }
    .price-direction-tag {
        font-size: 14px;    /* Scaled down from 16px */
    }

    /* --- Color Swatches Size Reduction (Tablet Mode) --- */
    .color-swatches {
        gap: 10px;
    }
    .color-swatches .swatch {
        width: 36px;        /* Scaled down from 50px */
        height: 36px;       /* Scaled down from 50px */
    }
    .color-swatches .swatch.active {
        outline-offset: 2px;
    }

    /* --- Quantitative Stepper and Booking Desk Core --- */
    .transaction-processing-row {
        max-width: 100%;
        width: 100%;
    }
    .add-to-cart-master-btn {
        font-size: 12px;
        letter-spacing: 1.5px;
        padding: 16px;
    }

    /* --- Reassurance Matrix Compression --- */
    .trust-reassurance-matrix {
        padding: 20px;
        gap: 15px;
    }
    .trust-row-node {
        gap: 12px;
    }
}

@media (max-width: 576px) {
    /* --- Fine Macro Tuning for Micro Smartphones --- */
    .editorial-product-title {
        font-size: 26px;
    }

    /* --- Micro Floating Expand Button (Mobile Mode) --- */
    .expand-view-trigger-btn {
        width: 32px;        /* More compact size for tiny screens */
        height: 32px;
        top: 12px;
        left: 12px;
    }
    .expand-icon-img {
        width: 14px;
        height: 14px;
    }

    .thumbnail-window {
        flex: 0 0 28%;
    }

    .specifications-inline-strip {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .spec-item:not(:last-child)::after {
        display: none !important;
    }

    /* --- Micro Pricing Text (Mobile Mode) --- */
    .presentation-current-price {
        font-size: 22px;    /* Perfectly scaled down for mobile layouts */
    }
    .price-direction-tag {
        font-size: 13px;
    }

    /* --- Micro Color Swatches (Mobile Mode) --- */
    .color-swatches {
        gap: 8px;
        flex-wrap: wrap;
    }
    .color-swatches .swatch {
        width: 30px;        /* Sleek compact size for smart mobile screens */
        height: 30px;
    }

    .meta-social-share-row {
        flex-wrap: wrap;
        gap: 8px;
    }
    .meta-share-badge {
        flex: 1;
        min-width: 100px;
        justify-content: center;
        padding: 10px;
    }

     .luxury-modal-window {
        padding: 35px 25px;
        width: 92%;
    }
    .modal-serif-title {
        font-size: 22px;
        margin-bottom: 18px;
    }
    .modal-close-btn {
        top: 15px;
        right: 20px;
        font-size: 24px;
    }
}

/* ==========================================================================
   MOBILE EXPAND IMAGE LIGHTBOX OVERLAY UPGRADE
   ========================================================================== */

@media (max-width: 768px) {
     .image-lightbox-overlay {
        display: flex;
        flex-direction: column;  
        justify-content: center;
        align-items: center;
        padding: 20px;
    }

     .image-lightbox-overlay .lightbox-modal-window {
        max-width: 90vw;
        max-height: 65vh;  
        margin-bottom: 20px; 
                margin-top: 20px; 

    }

    .lightbox-image-frame, 
    .lightbox-image-frame img {
        max-height: 65vh;
        object-fit: contain;
    }

     .lightbox-nav-btn {
        position: static;  
        transform: none !important;
        display: inline-flex;
        
         width: 38px; 
        height: 38px;
        font-size: 13px;
        
        background: rgba(255, 255, 255, 0.15);
        backdrop-filter: blur(8px);
        margin: 0 10px;  
        z-index: 1050;
    }

     .lightbox-nav-btn:hover {
        transform: scale(1.05) !important;
        background: #ffffff;
        color: #010100;
    }

     .lightbox-prev { left: auto; }
    .lightbox-next { right: auto; }

     .lightbox-close-btn {
        position: fixed;
        top: 20px;
        right: 20px;
        font-size: 32px;
        opacity: 0.8;
    }
}


/* ==========================================================================
   DYNAMIC CUSTOMER REVIEWS EDITORIAL MATRIX STYLES
   ========================================================================== */
.reviews-editorial-matrix {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 60px 50px 100px 50px;
    border-top: 1px solid var(--border-color);
}

.reviews-container-inner {
    display: flex;
    gap: 80px;
    align-items: flex-start;
}

/* --- Left Column: Reviews Viewport Architecture --- */
.reviews-display-column {
    flex: 1.1;
    display: flex;
    flex-direction: column;
}

.reviews-section-title {
    font-family: var(--serif-font);
    font-size: 32px;
    font-weight: 500;
    color: var(--smokey-black);
    margin-bottom: 25px;
}

.reviews-summary-aggregation {
    display: flex;
    align-items: center;
    gap: 25px;
    background-color: #fcfbfa;
    padding: 25px;
    border: 1px dashed rgba(160, 152, 138, 0.3);
    margin-bottom: 35px;
}

.aggregate-score-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-right: 1px solid var(--border-color);
    padding-right: 25px;
}

.aggregate-number {
    font-family: var(--serif-font);
    font-size: 46px;
    font-weight: 500;
    color: var(--smokey-black);
    line-height: 1;
}

.aggregate-out-of {
    font-family: var(--primary-font);
    font-size: 11px;
    color: var(--warm-taupe);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
}

.aggregate-stars-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.editorial-stars {
    color: #ffcc00;
    font-size: 14px;
    display: flex;
    gap: 3px;
}

.aggregate-count-text {
    font-family: var(--primary-font);
    font-size: 13px;
    color: var(--olive-drab);
    font-weight: 300;
}

/* Reviews Scroll Viewport Rail */
.reviews-stream-viewport {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-height: 520px;
    overflow-y: auto;
    padding-right: 15px;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.1) transparent;
}

.reviews-stream-viewport::-webkit-scrollbar {
    width: 3px;
}
.reviews-stream-viewport::-webkit-scrollbar-track {
    background: transparent;
}
.reviews-stream-viewport::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}

/* Review Node Card Item Layout */
.review-card-node {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    padding-bottom: 20px;
}

.review-node-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
}

.review-node-author {
    font-family: var(--primary-font);
    font-size: 14px;
    font-weight: 500;
    color: var(--smokey-black);
}

.review-node-date {
    font-family: var(--primary-font);
    font-size: 12px;
    color: var(--warm-taupe);
    display: block;
    margin-top: 2px;
}

.review-node-stars {
    color: #ffcc00;
    font-size: 11px;
    display: flex;
    gap: 2px;
}

.review-node-title {
    font-family: var(--primary-font);
    font-size: 14px;
    font-weight: 600;
    color: var(--smokey-black);
    margin-bottom: 8px;
}

.review-node-body {
    font-family: var(--primary-font);
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--olive-drab);
    font-weight: 300;
}

/* --- Right Column: Review Input Matrix System --- */
.reviews-submission-column {
    flex: 0.9;
    background-color: #fbfaf7;
    border: 1px solid rgba(0, 0, 0, 0.05);
    padding: 40px;
}

.submission-form-title {
    font-family: var(--serif-font);
    font-size: 24px;
    font-weight: 500;
    color: var(--smokey-black);
    margin-bottom: 25px;
}

.luxury-submission-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-input-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-field-label {
    font-family: var(--primary-font);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--smokey-black);
    font-weight: 500;
}

/* Interactive Star Element Actions */
.interactive-rating-stars {
    display: flex;
    gap: 8px;
    font-size: 18px;
    color: #dddddd;
}

.interactive-rating-stars i {
    cursor: pointer;
    transition: color 0.2s ease, transform 0.1s ease;
}

.interactive-rating-stars i:hover {
    transform: scale(1.15);
}

.interactive-rating-stars i.selected-star,
.interactive-rating-stars i.hovered-star {
    color: #ffcc00;
}

.luxury-form-input,
.luxury-form-textarea {
    width: 100%;
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.12);
    padding: 14px 16px;
    font-family: var(--primary-font);
    font-size: 13px;
    color: var(--smokey-black);
    outline: none;
    transition: border-color 0.3s ease;
}

.luxury-form-input:focus,
.luxury-form-textarea:focus {
    border-color: var(--smokey-black);
}

.luxury-form-textarea {
    resize: vertical;
}

.submit-review-master-btn {
    width: 100%;
    height: 52px;
    background-color: var(--smokey-black);
    color: #ffffff;
    font-family: var(--primary-font);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 2px;
    border: 1px solid var(--smokey-black);
    cursor: pointer;
    margin-top: 10px;
    transition: all 0.3s ease;
}

.submit-review-master-btn:hover {
    background-color: transparent;
    color: var(--smokey-black);
}

/* ==========================================================================
   RESPONSIVE LAYOUT MATRIX FOR REVIEWS
   ========================================================================== */
@media (max-width: 992px) {
    .reviews-editorial-matrix {
        padding: 40px 20px 60px 20px;
    }
    
    .reviews-container-inner {
        flex-direction: column;
        gap: 50px;
    }
    
    .reviews-display-column,
    .reviews-submission-column {
        width: 100%;
        flex: none;
    }
    
    .reviews-submission-column {
        padding: 30px 20px;
    }
}

@media (max-width: 576px) {
    .reviews-section-title {
        font-size: 26px;
    }
    
    .reviews-summary-aggregation {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    
    .aggregate-score-box {
        border-right: none;
        padding-right: 0;
        border-bottom: 1px solid var(--border-color);
        padding-bottom: 15px;
        width: 100%;
        align-items: flex-start;
    }
}

/* --- Premium Review Truncation Engine --- */
.review-body-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.review-text-content {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; /* Max lines to display before clamping */
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Expanded state class handled via JavaScript engine */
.review-text-content.expanded-view-active {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
}

/* Luxury Editorial Action Trigger Line */
.review-read-more-btn {
    background: transparent;
    border: none;
    padding: 4px 0 0 0;
    font-family: var(--primary-font);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    color: var(--smokey-black);
    cursor: pointer;
    border-bottom: 1px dashed var(--smokey-black);
    margin-top: 6px;
    transition: all 0.25s ease;
}

.review-read-more-btn:hover {
    color: var(--warm-taupe);
    border-bottom-color: transparent;
}

/* --- Review Node Meta Extensions --- */
.review-meta-subline {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 3px;
}

.review-node-date {
    font-family: var(--primary-font);
    font-size: 12px;
    color: var(--warm-taupe);
}

.review-verified-separator {
    font-size: 10px;
    color: var(--warm-taupe);
    opacity: 0.5;
}

.review-verified-badge {
    font-family: var(--primary-font);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    
    /* Luxury Muted Botanical Green Accent */
    color: #3B6E4C; 
    /* Alternatively, you can use your local variable tone: color: var(--olive-drab); */
    
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.review-verified-badge i {
    font-size: 12px;
    color: inherit; /* Dynamically inherits the green styling */
}

/* Optional mobile adjustments for tight displays */
@media (max-width: 480px) {
    .review-meta-subline {
        flex-wrap: wrap;
        gap: 4px 8px;
    }
    .review-verified-separator {
        display: none; /* Safely hides the dot separator on micro viewports */
    }
}

/* Reviews Scroll Viewport Rail (Scrollbar Hidden) */
.reviews-stream-viewport {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-height: 520px;
    overflow-y: auto;
    padding-right: 5px; /* Reduced right padding since scrollbar is removed */
    
    /* Modern Firefox hide scrollbar rule */
    scrollbar-width: none; 
    
    /* IE/Edge hide scrollbar rule */
    -ms-overflow-style: none; 
}

/* Modern Webkit (Chrome/Safari/Opera) hide scrollbar rules */
.reviews-stream-viewport::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

/* ==========================================================================
   FEATURED ACCESSORIES & LINENS: CAROUSEL SWATCH SYSTEM
   ========================================================================== */

.accessory-swatches-row {
    display: flex;
    flex-wrap: wrap;       
    justify-content: center; /* Pushes and centers the swatches perfectly inline */
    gap: 8px 10px;         
    align-items: center;
    padding: 6px 0;
    width: 100%;
    max-width: 100%;       
}

.accessory-swatches-row .accessory-swatch-node {
    width: 18px;           /* Elegantly scaled down for grid layout viewports */
    height: 18px;          
    border-radius: 50%;    
    cursor: pointer;
    display: inline-block;
    position: relative;
    border: 1px solid rgba(0, 0, 0, 0.12); /* Subtle structure rim for light color swatches */
    flex-shrink: 0;        /* Hard safety: guarantees perfectly round circles across all devices */
    transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.2s ease;
}

/* Fluid Hover Blooming State */
.accessory-swatches-row .accessory-swatch-node:hover {
    transform: scale(1.15); 
}

 
/* Keyboard Accessibility Alignment Standards */
.accessory-swatches-row .accessory-swatch-node:focus-visible {
    outline: 2px solid var(--smokey-black, #1a1a1a);
    outline-offset: 2.5px;
}

/* ==========================================================================
   TABLET & MOBILE SCREEN COMPRESSION METRICS
   ========================================================================== */
@media (max-width: 768px) {
    .accessory-swatches-row {
        gap: 6px 8px;      /* Tighter display metrics for crowded device tracks */
    }
    
    .accessory-swatches-row .accessory-swatch-node {
        width: 16px;       /* Micro scale balancing against title fonts on small viewports */
        height: 16px;
    }
    
    .accessory-swatches-row .accessory-swatch-node.active-selected-node {
        outline-offset: 2px;
    }
}