/* 
Product Detail Page CSS - Optimized for Core Web Vitals
Following BEM methodology and using giftsy.css design system variables
Optimized for SEO/AEO/GEO performance and accessibility
*/

/* ===== CSS CUSTOM PROPERTIES ===== */
:root {
    /* Core Web Vitals optimized spacing */
    --product-detail-spacing-xs: 0.5rem;
    --product-detail-spacing-sm: 1rem;
    --product-detail-spacing-md: 1.5rem;
    --product-detail-spacing-lg: 2rem;
    --product-detail-spacing-xl: 3rem;

    /* Layout grid */
    --product-detail-max-width: 1200px;
    --product-detail-grid-gap: 2rem;

    /* Component dimensions */
    --product-gallery-size: 600px;
    --product-thumbnail-size: 80px;
    --product-sticky-height: 80px;

    /* Animation timing for performance */
    --product-detail-transition: 0.2s ease-in-out;
    --product-detail-hover-scale: 1.02;
}

/* ===== MAIN LAYOUT ===== */
.product-detail-page {
    min-height: 100vh;
    background-color: var(--background);
}

/* Breadcrumb section with navbar clearance - matching React pb-4 spacing */
.product-detail-breadcrumb-section {
    padding-top: 6rem;
    /* pt-24 in Tailwind = 96px to clear navbar */
    padding-bottom: 1rem;
    /* pb-4 in Tailwind = 16px (matches React exactly) */
}

.product-detail-main {
    padding-bottom: 4rem;
    /* pb-16 in Tailwind = 64px */
}

/* Container now uses giftsy.css .container class - no custom styles needed */
/* Breadcrumb styles moved to giftsy.css for reusability */

/* ===== PRODUCT DETAIL GRID (React-matching) ===== */
.product-detail-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-bottom: 4rem;
    align-items: start;
}

@media (min-width: 1024px) {
    .product-detail-grid {
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
    }
}

/* Mobile order: Info first, Image second */
.product-detail-grid__gallery {
    order: 2;
}

.product-detail-grid__info {
    order: 1;
}

/* Desktop order: Image first, Info second */
@media (min-width: 1024px) {
    .product-detail-grid__gallery {
        order: 1;
    }

    .product-detail-grid__info {
        order: 2;
    }
}

/* ===== PRODUCT GALLERY COMPONENT ===== */
.product-gallery {
    position: relative;
    width: 100%;
}

/* React: bg-accent-50 rounded-2xl overflow-hidden aspect-square */
.product-gallery__main {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    margin-bottom: 1rem;
    /* space-y-4 = 16px */
    border-radius: 1rem;
    /* rounded-2xl = 16px */
    overflow: hidden;
    background-color: var(--accent-50);
    /* Light gray background like React */
}

.product-gallery__image-container {
    position: relative;
    width: 100%;
    height: 100%;
    cursor: zoom-in;
}

.product-gallery__image-container[data-zoom="true"] {
    cursor: zoom-out;
}

/* React: object-contain with 8px padding, click-to-zoom functionality */
.product-gallery__main-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Show full image, don't crop */
    padding: 0.5rem;
    /* 8px like React */
    transition: transform 300ms ease-in-out;
}

/* Zoom states for click-to-zoom functionality */
.product-gallery__main-image--zoomed {
    transform: scale(1.5);
    /* scale-150 like React */
}

.product-gallery__main-image--zooming {
    transform-origin: var(--zoom-x, 50%) var(--zoom-y, 50%);
}

/* Zoom button removed - using inline zoom with indicator instead */

/* React: rounded-full w-10 h-10 with hover:scale-105 */
.product-gallery__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.9);
    /* bg-white/90 */
    border: none;
    border-radius: 50%;
    /* rounded-full */
    width: 2.5rem;
    /* w-10 = 40px */
    height: 2.5rem;
    /* h-10 = 40px */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 200ms ease-in-out;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    /* shadow-soft */
}

.product-gallery__nav:hover {
    background: rgba(255, 255, 255, 1);
    /* hover:bg-white */
    transform: translateY(-50%) scale(1.05);
    /* hover:scale-105 */
}

.product-gallery__nav--prev {
    left: 1rem;
    /* left-4 = 16px */
}

.product-gallery__nav--next {
    right: 1rem;
    /* right-4 = 16px */
}

/* React: flex space-x-2 overflow-x-auto */
.product-gallery__thumbnails {
    display: flex;
    gap: 0.5rem;
    /* space-x-2 = 8px */
    overflow-x: auto;
    padding: 0.5rem 0;
    /* 8px vertical padding */
    scrollbar-width: thin;
}

/* React: w-16 h-16 rounded-lg border-2 with transitions */
.product-gallery__thumbnail {
    flex-shrink: 0;
    width: 4rem;
    /* w-16 = 64px (React size) */
    height: 4rem;
    /* h-16 = 64px (React size) */
    border: 2px solid var(--accent-200);
    /* border-accent-200 */
    border-radius: 0.5rem;
    /* rounded-lg = 8px */
    overflow: hidden;
    cursor: pointer;
    transition: all 200ms ease-in-out;
    /* transition-all duration-200 */
    background: none;
    padding: 0;
}

/* React: border-primary shadow-primary/30 for active */
.product-gallery__thumbnail--active {
    border-color: var(--primary);
    /* border-primary */
    box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.3);
    /* shadow-primary/30 */
}

/* React: hover:border-accent-300 */
.product-gallery__thumbnail:hover {
    border-color: var(--accent-300);
    /* hover:border-accent-300 */
}

/* React: object-contain with 2px padding */
.product-gallery__thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Show full thumbnail image */
    padding: 2px;
    /* 2px like React */
}

/* React: bottom-4 left-1/2 transform bg-accent-800/80 text-white */
.product-gallery__zoom-indicator {
    position: absolute;
    bottom: 1rem;
    /* bottom-4 = 16px */
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(44, 62, 80, 0.8);
    /* accent-800/80 */
    color: white;
    padding: 0.25rem 0.75rem;
    /* py-1 px-3 */
    border-radius: 9999px;
    /* rounded-full */
    font-size: 0.875rem;
    /* text-sm */
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.product-gallery__zoom-indicator i {
    width: 0.875rem;
    /* 14px */
    height: 0.875rem;
    /* 14px */
}

/* React: flex justify-center space-x-4 text-xs text-accent-500 */
.product-gallery__quality-badges {
    display: flex;
    justify-content: center;
    gap: 1rem;
    /* space-x-4 = 16px */
    margin-top: 1rem;
    /* spacing after thumbnails */
}

.quality-badge {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    /* text-xs = 12px */
    color: var(--accent-500);
    /* text-accent-500 */
}

.quality-badge__icon {
    width: 0.75rem;
    /* 12px */
    height: 0.75rem;
    /* 12px */
}

.product-gallery__counter {
    text-align: center;
    margin-top: 0.5rem;
    /* 8px */
    font-size: 0.875rem;
    /* text-sm */
    color: var(--accent-600);
    /* Use giftsy.css color */
}

/* ===== PRODUCT INFO COMPONENT ===== */
.product-info {
    display: flex;
    flex-direction: column;
    gap: 0;
    /* NO GAP - React has no gap between sections */
}

/* Main product info sections container - NO GAP for React matching */
.product-info-sections {
    display: flex;
    flex-direction: column;
    /* NO GAP - React has zero spacing between sections */
}

.product-info__header {
    /* NO margin-bottom - removed for React matching */
}

.product-info__title {
    font-family: var(--font-heading);
    /* font-heading */
    font-size: 1.875rem;
    /* text-3xl */
    font-weight: 700;
    /* font-bold */
    color: var(--accent-800);
    /* text-accent-800 */
    margin: 0 0 0.5rem 0;
    /* mb-2 */
    line-height: 1.2;
}

.product-info__brand {
    margin-bottom: 0.5rem;
    /* mb-2 */
}

.product-info__brand-name {
    font-size: 0.875rem;
    /* text-sm */
    color: var(--accent-600);
    /* text-accent-600 */
    font-weight: 500;
    /* font-medium */
}


/* ===== RATING SECTION - React lines 160-173 ===== */
/* React: flex items-center justify-center */
.product-info__rating {
    display: flex;
    align-items: center;
    justify-content: center;
    /* NO margin-bottom - removed for React matching */
}

/* React: flex items-center space-x-2 */
.product-info__rating-content {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    /* space-x-2 = 8px */
}

/* React: flex items-center */
.product-info__rating-stars {
    display: flex;
    align-items: center;
}

/* Stars styling - React: Icon size={16} */
.rating-stars__star {
    color: var(--accent-300);
    /* Empty stars */
    font-size: 1rem;
    /* 16px to match React Icon size={16} */
    margin-right: 1px;
    /* Small gap between stars */
}

.rating-stars__star--filled {
    color: var(--warning);
    /* React: text-warning fill-current */
}

/* React: ml-2 text-lg font-medium text-accent-800 */
.product-info__rating-number {
    margin-left: 0.5rem;
    /* ml-2 = 8px */
    font-size: 1.125rem;
    /* text-lg = 18px */
    font-weight: 500;
    /* font-medium */
    color: var(--accent-800);
    /* text-accent-800 */
}

/* React: ml-1 text-sm text-accent-600 */
.product-info__rating-count {
    margin-left: 0.25rem;
    /* ml-1 = 4px */
    font-size: 0.875rem;
    /* text-sm = 14px */
    color: var(--accent-600);
    /* text-accent-600 */
}

.product-info__pricing {
    margin-bottom: 1.5rem;
    /* space-y-6 = 24px */
}

.product-pricing {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    /* 12px spacing between price elements */
    margin-bottom: 0.5rem;
    /* 8px */
}

/* React: text-3xl font-heading font-bold (with conditional color) */
.product-pricing__current {
    font-family: var(--font-heading);
    /* Playfair Display like React */
    font-size: 1.875rem;
    /* text-3xl = 30px */
    font-weight: 700;
    /* font-bold */
    color: var(--accent-800);
    /* Default text-accent-800 */
}

.product-pricing__current--discount {
    color: #DC2626;
    /* red-600 when product has discount */
}

/* React: text-lg text-accent-500 line-through ml-3 */
.product-pricing__original {
    font-size: 1.125rem;
    /* text-lg = 18px */
    color: var(--accent-500);
    /* text-accent-500 */
    text-decoration: line-through;
}

/* React: bg-error text-white px-3 py-1 rounded-full text-sm font-medium */
.product-pricing__discount {
    background-color: var(--error);
    /* Use giftsy.css error color (red) */
    color: white;
    padding: 0.25rem 0.75rem;
    /* py-1 px-3 = 4px 12px */
    border-radius: 9999px;
    /* rounded-full */
    font-size: 0.875rem;
    /* text-sm = 14px */
    font-weight: 500;
    /* font-medium */
}

/* ===== GIFT SECTION - React lines 142-158 ===== */
.product-info__gift-section {
    display: flex;
    flex-direction: column;
    /* NO GAP and NO margin-bottom - removed for React matching */
}

/* React: font-heading text-lg font-semibold text-accent-800 */
.product-info__gift-heading {
    font-family: var(--font-heading);
    font-size: 1.125rem;
    /* text-lg */
    font-weight: 600;
    /* font-semibold */
    color: var(--accent-800);
    margin: 0;
}

/* React: bg-accent-50 rounded-xl p-4 */
.product-info__gift-card {
    background-color: var(--accent-50);
    border-radius: 0.75rem;
    /* rounded-xl */
    padding: 1rem;
    /* p-4 */
}

/* React: flex items-start space-x-3 */
.product-info__gift-content {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    /* space-x-3 */
}

/* React: text-primary mt-0.5 */
.product-info__gift-icon {
    color: var(--primary);
    margin-top: 0.125rem;
    /* mt-0.5 */
    flex-shrink: 0;
}

/* React: text-accent-700 leading-relaxed */
.product-info__gift-text p {
    color: var(--accent-700);
    line-height: 1.625;
    /* leading-relaxed */
    margin: 0;
}

/* ===== PRICING CARD - React lines 176-194 ===== */
/* React: bg-white rounded-2xl border border-accent-100 p-6 */
.product-info__pricing-card {
    background-color: white;
    border-radius: 1rem;
    /* rounded-2xl */
    border: 1px solid var(--accent-100);
    padding: 1.5rem;
    /* p-6 - NO margin-bottom for React matching */
}

/* React: flex items-center justify-between - NO margin-bottom */
.product-info__pricing-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* NO margin-bottom for React matching */
}

.product-info__pricing-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    /* ml-3 spacing between prices */
}

/* Current price - React: text-3xl font-heading font-bold + conditional red */
.product-info__price-current {
    font-size: 1.875rem;
    /* text-3xl */
    font-family: var(--font-heading);
    font-weight: 700;
    /* font-bold */
    color: var(--accent-800);
    /* Default color, red handled by discount context */
}

/* Original price - React: text-lg text-accent-500 line-through ml-3 */
.product-info__price-original {
    font-size: 1.125rem;
    /* text-lg */
    color: var(--accent-500);
    text-decoration: line-through;
}

/* Discount badge - React: bg-error text-white px-3 py-1 rounded-full text-sm font-medium */
.product-info__discount-badge {
    background-color: var(--error);
    color: white;
    padding: 0.25rem 0.75rem;
    /* px-3 py-1 */
    border-radius: 9999px;
    /* rounded-full */
    font-size: 0.875rem;
    /* text-sm */
    font-weight: 500;
    /* font-medium */
}

/* When discount exists, make price red - React conditional styling */
.product-info__pricing-card:has(.product-info__discount-badge) .product-info__price-current {
    color: #DC2626;
    /* text-red-600 */
}

/* ===== ACTION BUTTONS - React lines 197-258 ===== */
.product-info__actions {
    display: flex;
    flex-direction: column;
    /* NO GAP - removed for React matching */
}

/* Primary Buy Button - React: variant="primary" size="lg" fullWidth */
.product-info__buy-btn {
    width: 100%;
    background-color: var(--primary);
    color: white;
    border: none;
    border-radius: 0.5rem;
    padding: 1rem 1.5rem;
    /* lg size */
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: all var(--product-detail-transition);
    box-shadow: 0 4px 14px 0 rgba(255, 107, 53, 0.39);
    /* shadow-warm */
}

.product-info__buy-btn:hover {
    box-shadow: 0 6px 20px 0 rgba(255, 107, 53, 0.5);
    /* hover:shadow-primary */
    transform: translateY(-1px);
}

/* Action rows - React: grid grid-cols-2 gap-3 */
.product-info__action-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    /* gap-3 */
}

/* Secondary action buttons - React: variant="outline" size="md" */
.product-info__action-btn {
    background-color: transparent;
    color: var(--accent-700);
    border: 1px solid var(--accent-200);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    /* md size */
    font-size: 0.875rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: all var(--product-detail-transition);
}

.product-info__action-btn:hover {
    background-color: var(--accent-50);
    border-color: var(--accent-300);
}

/* Button icons */
.product-info__btn-icon {
    flex-shrink: 0;
}

.product-info__attributes {
    margin-bottom: var(--product-detail-spacing-lg);
}

.product-attribute {
    display: flex;
    justify-content: space-between;
    padding: var(--product-detail-spacing-sm) 0;
    border-bottom: 1px solid var(--color-border);
}

.product-attribute:last-child {
    border-bottom: none;
}

.product-attribute__label {
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
}

.product-attribute__value {
    color: var(--color-text-primary);
}

.product-info__actions {
    margin-bottom: var(--product-detail-spacing-lg);
}

.product-info__buy-btn {
    width: 100%;
    margin-bottom: var(--product-detail-spacing-md);
}

.product-info__secondary-actions {
    display: flex;
    gap: var(--product-detail-spacing-sm);
}

.product-info__wishlist-btn,
.product-info__share-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--product-detail-spacing-xs);
}

.product-info__status {
    margin-bottom: var(--product-detail-spacing-md);
}

.badge {
    display: inline-flex;
    align-items: center;
    padding: var(--product-detail-spacing-xs) var(--product-detail-spacing-sm);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    margin-right: var(--product-detail-spacing-xs);
    margin-bottom: var(--product-detail-spacing-xs);
}

.badge--featured {
    background: var(--color-primary);
    color: white;
}

.badge--new {
    background: var(--color-success);
    color: white;
}

.badge--sale {
    background: var(--color-warning);
    color: white;
}

.badge--warning {
    background: var(--color-danger);
    color: white;
}

.badge--success {
    background: var(--color-success);
    color: white;
}

.product-info__availability {
    display: flex;
    flex-direction: column;
    gap: var(--product-detail-spacing-xs);
}

.availability,
.shipping-info {
    display: flex;
    align-items: center;
    gap: var(--product-detail-spacing-xs);
    font-size: var(--font-size-sm);
}

.availability--in-stock {
    color: var(--color-success);
}

.availability--out-of-stock {
    color: var(--color-danger);
}

/* ===== PRODUCT TABS (REACT-MATCHING DESIGN) ===== */
.product-detail-tabs {
    margin-bottom: 2rem;
    /* space-y-8 equivalent */
}

/* Centered wrapper (flex justify-center) */
.product-detail-tabs__wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
}

/* Card container (bg-white rounded-2xl border p-1) */
.product-detail-tabs__navigation {
    background: var(--background);
    border-radius: 1rem;
    /* rounded-2xl */
    border: 1px solid var(--accent-200);
    /* border-accent-100 */
    padding: 0.25rem;
    /* p-1 */
    display: flex;
    gap: 0.25rem;
    /* space-x-1 */
    overflow-x: auto;
}

/* Individual tab buttons (rounded-xl px-6 py-3) */
.product-detail-tabs__tab {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    /* space-x-2 */
    padding: 0.75rem 1.5rem;
    /* px-6 py-3 */
    border-radius: 0.75rem;
    /* rounded-xl */
    font-size: 0.875rem;
    /* text-sm */
    font-weight: 500;
    /* font-medium */
    transition: all 0.2s ease;
    /* transition-all duration-200 */
    white-space: nowrap;
    border: none;
    cursor: pointer;
    background: none;
}

/* Inactive tab styles (text-accent-600 hover:text-accent-800 hover:bg-accent-50) */
.product-detail-tabs__tab {
    color: var(--accent-600);
}

.product-detail-tabs__tab:hover {
    color: var(--accent-800);
    background: var(--accent-50);
}

/* Active tab styles (bg-primary text-white shadow-warm) */
.product-detail-tabs__tab--active {
    background: var(--primary);
    color: white;
    box-shadow: var(--shadow-warm);
}

.product-detail-tabs__tab--active:hover {
    background: var(--primary);
    color: white;
}

.product-detail-tabs__panel {
    display: none;
}

.product-detail-tabs__panel--active {
    display: block;
}

/* ===== TAB CONTENT COMPONENTS ===== */
.product-detail-description,
.product-detail-ai-description,
.product-detail-occasions {
    margin-bottom: var(--product-detail-spacing-lg);
    padding: var(--product-detail-spacing-lg);
    background: var(--color-background);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--color-border);
}

.product-detail-description__title,
.product-detail-ai-description__title,
.product-detail-occasions__title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin: 0 0 var(--product-detail-spacing-md);
}

.product-detail-occasions__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--product-detail-spacing-xs);
}

.product-detail-occasions__tag {
    background: var(--color-primary);
    color: white;
    padding: var(--product-detail-spacing-xs) var(--product-detail-spacing-sm);
    border-radius: var(--border-radius-full);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

/* ===== CARE INSTRUCTIONS ===== */
.product-care {
    background: var(--color-background);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--color-border);
    padding: var(--product-detail-spacing-lg);
}

.product-care__title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin: 0 0 var(--product-detail-spacing-lg);
}

.product-care__section {
    margin-bottom: var(--product-detail-spacing-lg);
}

.product-care__section:last-child {
    margin-bottom: 0;
}

.product-care__subtitle {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0 0 var(--product-detail-spacing-md);
}

.product-care__list {
    margin: 0;
}

.product-care__item {
    display: flex;
    justify-content: space-between;
    padding: var(--product-detail-spacing-sm) 0;
    border-bottom: 1px solid var(--color-border);
}

.product-care__item:last-child {
    border-bottom: none;
}

.product-care__term {
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    margin: 0;
}

.product-care__description {
    color: var(--color-text-primary);
    margin: 0;
}

.product-care__tips {
    list-style: none;
    margin: 0;
    padding: 0;
}

.product-care__tip {
    display: flex;
    align-items: flex-start;
    gap: var(--product-detail-spacing-sm);
    margin-bottom: var(--product-detail-spacing-sm);
    color: var(--color-text-primary);
}

.product-care__tip svg {
    color: var(--color-success);
    flex-shrink: 0;
    margin-top: 2px;
}

/* ===== STICKY BUY BUTTON ===== */
.product-detail-sticky-buy {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--color-background);
    border-top: 1px solid var(--color-border);
    padding: var(--product-detail-spacing-md);
    z-index: 100;
    transform: translateY(100%);
    transition: transform var(--product-detail-transition);
    box-shadow: var(--shadow-lg);
}

.product-detail-sticky-buy--visible {
    transform: translateY(0);
}

.product-detail-sticky-buy__content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: var(--product-detail-max-width);
    margin: 0 auto;
}

.product-detail-sticky-buy__price {
    display: flex;
    align-items: center;
    gap: var(--product-detail-spacing-sm);
}

.product-detail-sticky-buy__amount {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
}

.product-detail-sticky-buy__original {
    font-size: var(--font-size-md);
    color: var(--color-text-secondary);
    text-decoration: line-through;
}

.product-detail-sticky-buy__button {
    padding: var(--product-detail-spacing-sm) var(--product-detail-spacing-lg);
}

/* ===== MODAL STYLES ===== */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    display: none;
}

.modal--active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal__backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    cursor: pointer;
}

.modal__content {
    position: relative;
    background: var(--color-background);
    border-radius: var(--border-radius-lg);
    max-width: 90vw;
    max-height: 90vh;
    overflow: auto;
}

.modal--image-zoom .modal__content {
    background: transparent;
    max-width: 95vw;
    max-height: 95vh;
}

.modal__close {
    position: absolute;
    top: var(--product-detail-spacing-sm);
    right: var(--product-detail-spacing-sm);
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: var(--border-radius-full);
    width: 40px;
    height: 40px;
    cursor: pointer;
    font-size: var(--font-size-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.modal__image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.modal__header {
    padding: var(--product-detail-spacing-lg);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal__title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin: 0;
}

.modal__body {
    padding: var(--product-detail-spacing-lg);
}

.share-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--product-detail-spacing-md);
}

.share-options__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--product-detail-spacing-xs);
    padding: var(--product-detail-spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    background: none;
    cursor: pointer;
    transition: all var(--product-detail-transition);
}

.share-options__item:hover {
    border-color: var(--color-primary);
    background: var(--color-primary-light);
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 1024px) {
    .product-detail-container {
        padding: 0 var(--product-detail-spacing-md);
    }

    .product-detail-grid {
        gap: var(--product-detail-spacing-md);
    }
}

@media (max-width: 768px) {
    .product-detail-container {
        padding: 0 var(--product-detail-spacing-sm);
    }

    .product-info {
        padding: var(--product-detail-spacing-md);
    }

    .product-detail-tabs__navigation {
        margin: 0 calc(-1 * var(--product-detail-spacing-sm));
        padding: 0 var(--product-detail-spacing-sm);
    }

    .product-detail-tabs__tab {
        padding: var(--product-detail-spacing-sm) var(--product-detail-spacing-md);
    }

    .product-detail-sticky-buy {
        display: block;
    }

    .modal__content {
        margin: var(--product-detail-spacing-md);
    }
}

@media (max-width: 480px) {
    .product-info__title {
        font-size: var(--font-size-xl);
    }

    .product-pricing__current {
        font-size: var(--font-size-xl);
    }

    .product-info__secondary-actions {
        flex-direction: column;
    }

    .share-options {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ===== STICKY BUY BUTTON (REACT MATCH) ===== */
.product-sticky-buy {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--background);
    border-top: 1px solid var(--accent-200);
    padding: 1rem;
    box-shadow: var(--shadow-lg);
    z-index: 40;
    display: none;
    /* Hidden by default, shown via JavaScript */
}

/* Hide on desktop (lg:hidden equivalent) */
@media (min-width: 1024px) {
    .product-sticky-buy {
        display: none !important;
    }
}

.product-sticky-buy__content {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.product-sticky-buy__price {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--accent-800);
}

.product-sticky-buy__original-price {
    font-size: 0.875rem;
    color: var(--accent-500);
    text-decoration: line-through;
    margin-left: 0.5rem;
}

/* ===== GIFT CONCIERGE FLOAT BUTTON (REACT MATCH) ===== */
.gift-concierge-float {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 50;
}

.gift-concierge-float__button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    background: var(--accent-600);
    color: white;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    box-shadow: var(--shadow-lg);
    transition: all 0.3s ease;
}

.gift-concierge-float__button:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-warm);
    background: var(--accent-700);
}

/* ===== PRINT STYLES ===== */
@media print {

    .product-detail-sticky-buy,
    .modal,
    .product-gallery__zoom-btn,
    .product-gallery__nav,
    .product-info__actions {
        display: none !important;
    }

    .product-detail-page {
        background: white !important;
        color: black !important;
    }
}