/* QuickView modal styles.
 * Static part extracted from QuickView::render_styles().
 * Dynamic .quick-view-modal-header-title responsive display (settings-driven)
 * remains inline in render_styles().
 * Enqueued via render_quick_view_css() / wiz_enqueue_product_card_styles(). */

            .quick-view-modal {
                display: flex;
                flex-direction: column;
                height: 100%;
                position: relative;
            }

            .quick-view-modal-close {
                padding: 0;
                margin: 0;
                margin-left: auto;
                display: inline-flex;
                background: none;
            }

            .quick-view-modal-header {
                justify-content: space-between;
                align-items: center;
                padding: 10px;
                border-bottom: 1px solid #e0e0e0;
                /* display is controlled by Elementor responsive CHOOSE control */
            }


            .quick-view-modal-close-icon {
                display: inline-flex;
            }

            .quick-view-modal-close-icon svg {
                width: 20px;
                height: 20px;
                color: #26282D;
            }

            .quick-view-modal-content-wrapper {
                overflow-y: auto;
            }

            .quick-view-modal-content {
                display: flex;
                padding: 20px;
                gap: 10px;
            }

            /* Content close button (positioned top-right of modal) */
            /* display is controlled by Elementor responsive CHOOSE control */
            .quick-view-modal-content-close {
                position: absolute;
                top: 15px;
                right: 15px;
                z-index: 10;
                padding: 0;
                margin: -7px;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                border: 1px solid #26282D;
                width: 24px;
                height: 24px;
                border-radius: 50%;
            }

            .quick-view-modal-content-close .quick-view-modal-close-icon {
                display: inline-flex;
                align-items: center;
                justify-content: center;
            }

            .quick-view-modal-content-close .quick-view-modal-close-icon svg {
                width: 16px;
                height: 16px;
            }

            /* Close button display is controlled by Elementor responsive CHOOSE control */

            .quick-view-modal-content-left {
                display: flex;
                flex-direction: column;
                gap: 10px;
            }

            .quick-view-product-image-wrapper {
                position: relative;
            }

            .quick-view-product-tag-container {
                position: absolute;
                top: 10px;
                left: 0;
                z-index: 5;
            }

            .quick-view-modal-content-main-image {
                width: 400px;
                height: 400px;
                overflow: hidden;
                position: relative;
            }

            .quick-view-modal-content-main-image img {
                object-fit: contain;
            }

            .quick-view-modal-content-main-image .qv-wishlist-icon {
                position: absolute;
                top: 8px;
                right: 8px;
                z-index: 10;
            }

            .quick-view-modal-content-image-carousel-container {
                position: relative;
            }

            .quick-view-modal-content-image-carousel-container.vertical {
                height: 100px;
                width: 400px;
            }

            .quick-view-modal-content-image-carousel-container.horizontal {
                width: 100px;
                height: 400px;
            }

            .quick-view-modal-content-image-carousel {
                display: flex;
                width: 100%;
                height: 100%;
                gap: 10px;
            }

            .quick-view-modal-content-image-carousel-container.horizontal .quick-view-modal-content-image-carousel {
                flex-direction: row;
                overflow-x: auto;
                overflow-y: hidden;
            }

            .quick-view-modal-content-image-carousel-item {
                width: 100px;
                height: 100px;
                cursor: pointer;
                overflow: hidden;
                flex-shrink: 0;
                position: relative;
            }

            .quick-view-video-play-icon {
                --wiz-video-play-bg: rgba(0, 0, 0, 0.45);
                --wiz-video-play-symbol: #fff;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                pointer-events: none;
                line-height: 0;
            }

            .quick-view-video-play-icon__disc {
                fill: var(--wiz-video-play-bg, rgba(0, 0, 0, 0.45));
            }

            .quick-view-video-play-icon__triangle {
                fill: var(--wiz-video-play-symbol, #fff);
            }

            .quick-view-modal-content-image-carousel-container.horizontal .quick-view-modal-content-image-carousel-prev {
                top: 50%;
                left: -18px;
                transform: translateY(-50%);
            }

            .quick-view-modal-content-image-carousel-container.horizontal .quick-view-modal-content-image-carousel-next {
                top: 50%;
                right: -18px;
                transform: translateY(-50%);
            }

            /* Vertical carousel styles */
            .quick-view-modal-content-image-carousel-container.vertical .quick-view-modal-content-image-carousel {
                flex-direction: column;
                overflow-x: hidden;
                overflow-y: auto;
            }

            .quick-view-modal-content-image-carousel-prev,
            .quick-view-modal-content-image-carousel-next {
                cursor: pointer;
                padding: 4px;
                background-color: #f0f0f0;
                border-radius: 50%;
                position: absolute;
                transform: translateX(-50%);
                z-index: 10;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .quick-view-modal-content-image-carousel-container.vertical .quick-view-modal-content-image-carousel-prev {
                left: 50%;
                top: -18px;
                transform: translateX(-50%);
            }

            .quick-view-modal-content-image-carousel-container.vertical .quick-view-modal-content-image-carousel-next {
                bottom: -18px;
                left: 50%;
                transform: translateX(-50%);
            }

            .quick-view-modal-content-image-carousel-item.active {
                border: 1px solid #000;
            }

            .quick-view-modal-content-image-carousel-item img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center;
                display: block;
            }

            .quick-view-modal-content-right {
                display: flex;
                flex-direction: column;
                gap: 10px;
                flex: 1;
                min-width: 0;
            }

            .quick-view-modal-content-right-side-by-side-container {
                display: flex;
                flex-direction: row;
                align-items: flex-start;
                margin-bottom: 8px;
            }

            .quick-view-modal-content-right-side-by-side-item {
                flex: 0 0 auto;
                min-width: 0;
                display: flex;
            }

            .quick-view-modal-content-right-single-item {
                display: flex;
                width: 100%;
            }

            .quick-view-modal-content-right-add-to-cart,
            .quick-view-modal-content-right-volume-tiers,
            .quick-view-modal-content-right-variants {
                width: 100%;
            }

            .quick-view-modal-content-right-name {
                font-size: 36px;
                font-weight: 500;
            }

            .quick-view-modal-content-right-sku {
                font-size: 16px;
                font-weight: 400;
                color: #666;
                margin-top: 10px;
            }



            .quick-view-modal-content-right-view-details {
                width: 100%;
                padding: 10px;
                background-color: transparent;
                color: #000;
                border: 1px solid #000;
                border-radius: 5px;
                margin-top: 10px;
                font-size: 16px;
                display: flex;
                justify-content: center;
                align-items: center;
                font-weight: 500;
            }

            /* ── QV Tearsheet Button ── */

            /* Name row becomes a flex row when tearsheet is present */
            .qv-name-tearsheet-row {
                display: flex !important;
                flex-direction: row;
                align-items: flex-start;
                gap: 12px;
                width: 100%;
            }

            /* Name takes all remaining space, button hugs the right */
            .qv-name-tearsheet-row .quick-view-modal-content-right-name {
                flex: 1;
                min-width: 0;
            }

            .qv-name-tearsheet-row .qv-tearsheet-btn {
                flex-shrink: 0;
            }

            .qv-tearsheet-btn {
                display: inline-flex;
                align-items: center;
                gap: 6px;
                background: transparent;
                border: 1px solid currentColor;
                border-radius: 4px;
                padding: 4px 10px;
                cursor: pointer;
                font-size: 13px;
                font-weight: 500;
                color: inherit;
                line-height: 1.4;
            }

            .qv-tearsheet-btn:disabled {
                opacity: 0.5;
                cursor: not-allowed;
            }

            .qv-tearsheet-btn-icon {
                display: inline-flex;
                align-items: center;
                flex-shrink: 0;
            }

            .qv-tearsheet-btn-icon svg {
                width: 14px;
                height: 14px;
            }

            /* Skeleton Loader Styles */
            @keyframes skeleton-shimmer {
                0% {
                    background-position: -1000px 0;
                }

                100% {
                    background-position: 1000px 0;
                }
            }

            .quick-view-loader-class {
                position: relative;
                overflow: hidden;
                background-color: #f5f7fa;
            }

            .quick-view-loader-class::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: linear-gradient(90deg,
                        #f5f7fa 0%,
                        #e8ecf1 20%,
                        #f5f7fa 40%,
                        #f5f7fa 100%);
                background-size: 1000px 100%;
                animation: skeleton-shimmer 2s ease-in-out infinite;
                z-index: 1;
            }

            /* Quick View Attribute Container Styles */
            .quick-view-attribute-container {
                width: 100%;
            }

            /* Ensure skeleton is visible for attribute container even when empty */
            .quick-view-attribute-container.quick-view-loader-class {
                min-height: 24px;
            }

            /* Discount name chip skeleton (wrapper always present for loading state) */
            .quick-view-modal-content-right-discount-chip.quick-view-loader-class {
                min-height: 32px;
                min-width: 120px;
            }

            /* Editor hint for undefined attribute rows */
            .qv-attr-editor-hint {
                color: #999;
                font-style: italic;
                font-size: 12px;
                padding: 4px 0;
            }

            /* Attribute row base styles */
            .quick-view-attr-row {
                margin: 4px 0;
                line-height: 1.2;
                word-break: break-word;
                width: var(--qv-attr-row-width, 100%);
                height: var(--qv-attr-row-height, auto);
                padding: var(--qv-attr-row-padding, 0);
                background-color: var(--qv-attr-bg-color, transparent);
            }

            .quick-view-attr-row[style*="--qv-attr-row-height"]:not([style*="--qv-attr-row-height:auto"]) {
                overflow-y: auto;
            }

            /* Horizontal layout */
            .qv-attr-row--horizontal {
                display: flex;
            }

            .qv-attr-row--horizontal>.wiz-detail-key {
                min-width: 120px;
                font-weight: 600;
                color: var(--qv-attr-key-color, inherit);
            }

            /* Vertical layout */
            .qv-attr-row--vertical>.wiz-detail-key {
                margin-bottom: var(--qv-attr-gap, 2px);
                font-weight: 600;
                color: var(--qv-attr-key-color, inherit);
            }

            /* Attribute value color */
            .quick-view-attribute-container .wiz-detail-value,
            .quick-view-attribute-container .qv-attr-text-short,
            .quick-view-attribute-container .qv-attr-text-full {
                color: var(--qv-attr-value-color, inherit);
            }

            /* Horizontal gap between key and value */
            .qv-attr-value--h-gap {
                margin-left: var(--qv-attr-gap, 2px);
            }

            /* Show more toggle link */
            .qv-attr-toggle {
                color: var(--primary, #0066cc);
                font-size: 12px;
                cursor: pointer;
            }

            /* ── Quick View Accordion Styles ─────────────────────── */
            .qv-accordion-container {
                width: var(--qv-acc-width, 100%);
            }

            .qv-accordion-separator {
                border-bottom: 1px solid #e5e5e5;
                margin: var(--qv-acc-sep-margin, 0);
            }

            .qv-accordion-item {
                width: 100%;
            }

            .qv-accordion-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                cursor: pointer;
                padding: 8px 0;
                user-select: none;
                background-color: var(--qv-acc-header-bg, transparent);
            }

            .qv-accordion-header h3 {
                font-size: 14px;
                font-weight: 600;
                margin: 0;
                color: var(--qv-acc-title-color, inherit);
            }

            .qv-accordion-icon {
                display: flex;
                align-items: center;
                color: #666;
                transition: transform 0.3s ease;
            }

            .qv-accordion-content {
                overflow: hidden;
                transition: max-height 0.3s ease, padding 0.3s ease;
                padding: var(--qv-acc-content-padding, 5px 0);
                word-break: break-word;
                background-color: var(--qv-acc-content-bg, transparent);
                color: var(--qv-acc-content-color, inherit);
            }

            .qv-accordion-attr-row {
                line-height: 1.4;
                margin: var(--qv-acc-content-gap, 4px) 0;
            }

            .qv-accordion-attr-row--horizontal {
                display: flex;
                align-items: flex-start;
            }

            .qv-accordion-key {
                font-weight: 600;
                color: var(--qv-acc-key-color, #676D77);
                font-size: 14px;
                flex-shrink: 0;
            }

            .qv-accordion-attr-row--vertical>.qv-accordion-key {
                margin-bottom: var(--qv-acc-kv-gap, 4px);
            }

            .qv-accordion-attr-row--horizontal>.qv-accordion-key {
                min-width: 120px;
            }

            .qv-accordion-value {
                color: var(--qv-acc-value-color, #26282D);
                font-size: 14px;
            }

            .qv-accordion-attr-row--horizontal>.qv-accordion-value {
                margin-left: var(--qv-acc-kv-gap, 4px);
            }

            .qv-accordion-no-value {
                font-style: italic;
                color: #999;
            }

            .qv-accordion-editor-hint {
                color: #999;
                font-style: italic;
                font-size: 12px;
                padding: 4px 0;
            }