/* =============================================================================
   Product Detail Page Styles
   Using Theme Variables from theme.css
   ============================================================================= */

.product-detail-page {
    padding: 0 0 4rem;
    background: var(--theme-bg-primary, #ffffff);
}

.product-detail-page .container {
    max-width: 1400px; /* Match catalog page container width */
    margin: 0 auto;
    padding: 0 1rem;
}

/* =============================================================================
   Breadcrumb - Styles moved to centralized breadcrumb.css
   ============================================================================= */

/* =============================================================================
   Product Main Section - Two Column Layout
   ============================================================================= */

.product-main-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    background: var(--theme-bg-primary, #ffffff);
    padding: 2rem 0;
    margin-bottom: 2rem;
}

/* =============================================================================
   Product Gallery - Left Column
   ============================================================================= */

.product-gallery {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.main-image-container {
    position: relative;
    width: 100%;
    aspect-ratio: 1; /* 1:1 aspect ratio */
    background: var(--theme-bg-tertiary, #f3f4f6);
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid var(--theme-border-light, #e5e7eb);
}

.main-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow, 300ms ease);
}

.main-image:hover {
    transform: scale(1.03);
}

/* Product Badges */
.product-detail-page .product-badges {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.375rem;
    pointer-events: none;
    z-index: 2;
}

.product-detail-page .badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    font-size: 0.625rem;
    font-weight: 600;
    border-radius: 0;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.product-detail-page .badge-featured {
    background: #dc2626;
}

.product-detail-page .badge-featured svg {
    width: 0.75rem;
    height: 0.75rem;
    margin-right: 0.25rem;
}

.product-detail-page .badge-sale {
    background: #c45c5c;
    font-weight: 700;
}

.product-detail-page .badge-label--new {
    background: #16a34a;
}

.product-detail-page .badge-label--trending {
    background: #d97706;
}

.product-detail-page .badge-out-of-stock {
    background: #6b7280;
}

/* Thumbnail Gallery */
.thumbnail-gallery {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    padding: 0.25rem;
    scrollbar-width: thin;
}

.thumbnail-gallery::-webkit-scrollbar {
    height: 4px;
}

.thumbnail-gallery::-webkit-scrollbar-thumb {
    background: var(--theme-border-default, #d1d5db);
    border-radius: 2px;
}

.thumbnail {
    flex-shrink: 0;
    width: 5rem;
    height: 5rem;
    border-radius: 4px;
    overflow: hidden;
    border: 2px solid var(--theme-border-light, #e5e7eb);
    cursor: pointer;
    transition: all var(--transition-fast, 150ms ease);
}

.thumbnail:hover {
    border-color: var(--theme-primary-light, #fecaca);
    transform: translateY(-2px);
}

.thumbnail.active {
    border-color: var(--theme-primary, #e43131);
    box-shadow: 0 4px 12px rgba(185, 28, 28, 0.2);
}

.thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* =============================================================================
   Product Information - Right Column
   ============================================================================= */

.product-info-section {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

/* Product Code / SKU */
.product-sku {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--font-size-sm, 0.875rem);
}

.product-sku .label {
    font-weight: var(--font-weight-medium, 500);
    color: var(--theme-text-muted, #6b7280);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide, 0.025em);
    font-size: var(--font-size-xs, 0.75rem);
}

.product-sku .value {
    color: var(--theme-text-secondary, #4b5563);
    font-family: var(--font-family-mono, monospace);
    background: var(--theme-bg-tertiary, #f3f4f6);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: var(--font-size-sm, 0.875rem);
}

/* Product Title */
.product-title {
    font-family: var(--font-family-heading);
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--theme-text-primary, #1f2937);
    margin: 0;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

/* Categories */
.product-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.category-link {
    padding: 0.375rem 0.875rem;
    background: var(--theme-bg-tertiary, #f3f4f6);
    border-radius: var(--radius-full, 9999px);
    color: var(--theme-text-secondary, #4b5563);
    text-decoration: none;
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: var(--font-weight-medium, 500);
    transition: all var(--transition-fast, 150ms ease);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide, 0.025em);
}

.category-link:hover {
    background: var(--theme-primary, #e43131);
    color: var(--theme-text-inverse, #ffffff);
}

/* =============================================================================
   Price Section - Label above price with distinct typography
   ============================================================================= */

.price-section {
    padding: 1rem 0;
}

.price-display {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.price-label {
    font-size: 0.6875rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.125rem;
}

.price-row {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.product-detail-page .current-price {
    font-size: 1.875rem;
    font-weight: 700;
    color: var(--theme-primary, #e43131);
    letter-spacing: -0.02em;
    line-height: 1;
}

.product-detail-page .compare-price {
    font-size: 1rem;
    color: #9ca3af;
    text-decoration: line-through;
    font-weight: 400;
}

.savings-info {
    font-size: 0.875rem;
    font-weight: 500;
    color: #047857;
    margin-top: 0.25rem;
}

.price-note {
    font-size: 0.8125rem;
    color: #6b7280;
    margin: 0.625rem 0 0;
    line-height: 1.5;
}

/* =============================================================================
   Quick Info Section (Min Order, Dimensions, Weight, Delivery)
   ============================================================================= */

.quick-info-section {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.5rem;
    padding: 0.5rem 0;
}

.quick-info-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0;
    background: transparent;
}

.quick-info-item::after {
    content: '';
    display: none;
}

.quick-info-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--theme-text-muted, #6b7280);
}

.quick-info-label::after {
    content: ':';
}

.quick-info-value {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--theme-text-primary, #1f2937);
}

/* Separator between items */
.quick-info-item:not(:last-child)::after {
    content: '|';
    display: inline-block;
    margin-left: 1rem;
    color: #d1d5db;
    font-weight: 300;
}

/* Responsive: Stack on smaller screens */
@media (max-width: 640px) {
    .quick-info-section {
        flex-direction: column;
        gap: 0.375rem;
    }

    .quick-info-item:not(:last-child)::after {
        display: none;
    }

    .quick-info-item {
        padding: 0.25rem 0;
        border-bottom: 1px solid #f3f4f6;
    }

    .quick-info-item:last-child {
        border-bottom: none;
    }
}

/* =============================================================================
   Stock Status
   ============================================================================= */

.stock-status-section {
    padding: 0.75rem 0;
}

.status {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: var(--font-weight-semibold, 600);
    font-size: var(--font-size-sm, 0.875rem);
}

.status.in-stock {
    color: var(--theme-accent-success, #059669);
}

.status.out-of-stock {
    color: var(--theme-primary, #e43131);
}

/* =============================================================================
   Short Description
   ============================================================================= */

.product-short-description {
    font-size: 0.899rem;
    line-height: var(--line-height-relaxed, 1.625);
    color: var(--theme-text-secondary, #4b5563);
    padding: 0.75rem 0;
    background: transparent;
}

.product-short-description p {
    margin: 0;
}

/* =============================================================================
   Add to Cart / Enquiry Form
   ============================================================================= */

.add-to-cart-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1rem 0 0.5rem;
    background: transparent;
}

/* Variants */
.product-variants {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.variant-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.variant-label {
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--theme-text-primary, #1f2937);
}

.variant-select {
    padding: 0.75rem 1rem;
    border: 1px solid var(--theme-border-default, #d1d5db);
    border-radius: 4px;
    font-size: var(--font-size-sm, 0.875rem);
    background: var(--theme-bg-primary, #ffffff);
    cursor: pointer;
    transition: all var(--transition-fast, 150ms ease);
}

.variant-select:focus {
    outline: none;
    border-color: var(--theme-primary, #e43131);
    box-shadow: 0 0 0 3px var(--theme-primary-lighter, #fee2e2);
}

/* =============================================================================
   Quantity Section - Minimum 100, Increments of 25
   ============================================================================= */

.quantity-section-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 0.75rem 0;
}

.quantity-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.quantity-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.quantity-label {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #111827;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.quantity-rule {
    font-size: 0.75rem;
    font-weight: 500;
    color: #6b7280;
}

.quantity-control-group {
    display: flex;
    align-items: center;
    gap: 0;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    max-width: 200px;
}

.qty-btn {
    width: 3rem;
    height: 3rem;
    background: #f9fafb;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #374151;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.qty-btn:hover:not(.disabled) {
    background: #e43131;
    color: #ffffff;
}

.qty-btn:active:not(.disabled) {
    transform: scale(0.95);
}

.qty-btn.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: #f3f4f6;
}

.qty-decrease {
    border-right: 1px solid #e5e7eb;
}

.qty-increase {
    border-left: 1px solid #e5e7eb;
}

.qty-input-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qty-input {
    width: 100%;
    height: 3rem;
    border: none;
    text-align: center;
    font-size: 1.125rem;
    font-weight: 700;
    color: #111827;
    background: transparent;
}

.qty-input:focus {
    outline: none;
    background: #fef3c7;
}

.qty-input.qty-error {
    background: #fee2e2;
    color: #dc2626;
}

/* Remove number input arrows */
.qty-input::-webkit-inner-spin-button,
.qty-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.qty-input[type=number] {
    -moz-appearance: textfield;
}

/* Quantity Presets */
.quantity-presets {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-wrap: wrap;
}

.preset-btn {
    padding: 0.5rem 1rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #374151;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.preset-btn:hover {
    border-color: #e43131;
    color: #e43131;
}

.preset-btn.active {
    background: #e43131;
    border-color: #e43131;
    color: #fff;
}

/* Quantity Feedback - Rendered dynamically only when needed */
.quantity-feedback {
    font-size: 0.8125rem;
    color: #059669;
    margin: 0.5rem 0 0;
    padding: 0.5rem 0.75rem;
    background: #ecfdf5;
    border-radius: 4px;
}

.quantity-feedback.error {
    color: #dc2626;
    background: #fef2f2;
}

/* =============================================================================
   Action Buttons
   ============================================================================= */

.product-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.product-detail-page .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    padding: 0.875rem 1.5rem;
    border: none;
    border-radius: 4px;
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-semibold, 600);
    cursor: pointer;
    transition: all var(--transition-base, 200ms ease);
    text-decoration: none;
}

.product-detail-page .btn-primary {
    flex: 1;
    background: var(--theme-primary, #e43131);
    color: var(--theme-text-inverse, #ffffff);
    box-shadow: var(--theme-shadow-primary, 0 4px 14px 0 rgba(185, 28, 28, 0.25));
}

.product-detail-page .btn-primary:hover {
    background: var(--theme-primary-dark, #c52a2a);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(185, 28, 28, 0.35);
}

.product-detail-page .btn-secondary {
    flex: 1;
    background: var(--theme-bg-primary, #ffffff);
    color: var(--theme-primary, #e43131);
    border: 2px solid var(--theme-primary, #e43131);
}

.product-detail-page .btn-secondary:hover {
    background: var(--theme-primary, #e43131);
    color: var(--theme-text-inverse, #ffffff);
}

.product-detail-page .btn-disabled {
    background: var(--theme-bg-muted, #e5e7eb);
    color: var(--theme-text-muted, #6b7280);
    cursor: not-allowed;
}

.product-detail-page .btn-icon {
    width: 2.625rem;
    height: 2.625rem;
    padding: 0;
    background: var(--theme-bg-primary, #ffffff);
    border: 1px solid var(--theme-border-default, #d1d5db);
    border-radius: 4px;
    color: var(--theme-text-muted, #6b7280);
    flex-shrink: 0;
}

.product-detail-page .btn-icon:hover {
    background: var(--theme-primary, #e43131);
    border-color: var(--theme-primary, #e43131);
    color: var(--theme-text-inverse, #ffffff);
}

.product-detail-page .btn-icon.active {
    background: var(--theme-primary, #e43131);
    border-color: var(--theme-primary, #e43131);
    color: var(--theme-text-inverse, #ffffff);
}

/* Wishlist Button States */
.product-detail-page .btn-wishlist.in-wishlist,
.product-detail-page .btn-wishlist.active {
    background: var(--theme-primary, #e43131);
    border-color: var(--theme-primary, #e43131);
    color: var(--theme-text-inverse, #ffffff);
}

.product-detail-page .btn-wishlist.in-wishlist svg,
.product-detail-page .btn-wishlist.active svg {
    fill: currentColor;
}

.product-detail-page .btn-wishlist.wishlist-loading {
    opacity: 0.6;
    pointer-events: none;
}

/* =============================================================================
   Expert Assistance CTA
   ============================================================================= */

.expert-assistance {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.625rem 0.875rem;
    margin-top: 0.5rem;
    border: 1px solid #fecaca;
    border-radius: 6px;
    background: #fff9f9;
}

.expert-assistance__text {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.expert-assistance__question {
    font-size: 0.899rem;
    font-weight: 600;
    color: #374151;
    margin: 0;
    line-height: 1.4;
}

.expert-assistance__tagline {
    font-size: 0.9375rem;
    color: #6b7280;
    margin: 0;
}

.expert-assistance__actions .btn--sm {
    padding: 0.375rem 0.625rem;
}

.expert-assistance__actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .expert-assistance {
        flex-direction: column;
        align-items: flex-start;
    }

    .expert-assistance__actions {
        width: 100%;
    }

    .expert-assistance__actions .btn {
        flex: 1;
        justify-content: center;
    }
}

/* Pricing Info Notice */
.pricing-info-notice {
    background: #f8fafc;
    padding: 0.75rem 1rem;
    margin-top: 0.75rem;
}

.pricing-info-notice__heading {
    font-size: 0.8rem;
    font-weight: 600;
    color: #374151;
    margin: 0 0 0.25rem;
}

.pricing-info-notice__body {
    font-size: 0.75rem;
    color: #6b7280;
    margin: 0;
    line-height: 1.55;
}

/* =============================================================================
   Additional Info Section
   ============================================================================= */

.additional-info {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    padding: 1.25rem;
    background: var(--theme-bg-tertiary, #f3f4f6);
    border-radius: 4px;
}

.info-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--theme-text-secondary, #4b5563);
}

.info-item svg {
    flex-shrink: 0;
    color: var(--theme-primary, #e43131);
}

/* =============================================================================
   Product Accordion Section (Replaces Tabs)
   ============================================================================= */

.product-accordion-section {
    margin-bottom: 1.5rem;
}

.accordion-item {
    background: transparent;
    border: none;
    border-bottom: 1px solid #f0f0f0;
    border-radius: 0;
    margin-bottom: 0;
    overflow: hidden;
}

.accordion-item:last-child {
    border-bottom: none;
}

.accordion-header {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.75rem 0;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: color 0.2s ease;
}

.accordion-header:hover {
    background: transparent;
}

.accordion-header:hover .accordion-title {
    color: var(--theme-primary, #e43131);
}

.accordion-header.is-active {
    background: transparent;
    border-bottom: none;
}

.accordion-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 0.5rem;
    color: #6b7280;
    flex-shrink: 0;
}

.accordion-icon svg {
    width: 18px;
    height: 18px;
}

.accordion-header.is-active .accordion-icon {
    color: var(--theme-primary, #e43131);
}

.accordion-title {
    flex: 1;
    font-family: 'Lato', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    letter-spacing: 0.01em;
    transition: color 0.2s ease;
}

.accordion-header.is-active .accordion-title {
    color: var(--theme-primary, #e43131);
}

.accordion-chevron {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    color: #9ca3af;
    transition: transform 0.3s ease, color 0.2s ease;
    flex-shrink: 0;
}

.accordion-chevron svg {
    width: 16px;
    height: 16px;
}

.accordion-header.is-active .accordion-chevron {
    transform: rotate(180deg);
    color: var(--theme-primary, #e43131);
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.accordion-content.is-open {
    max-height: none;
}

.accordion-body {
    padding: 0.5rem 0 1rem 2rem;
}

/* Compact Specs List - Simple inline format */
.specs-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.specs-list li {
    padding: 0.5rem 0;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: #1f2937;
    border-bottom: 1px solid #f3f4f6;
}

.specs-list li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.specs-list li:first-child {
    padding-top: 0;
}

.specs-list li strong {
    font-weight: 600;
    color: #111827;
}

/* Notes Section Styling */
.notes-content {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: #1f2937;
}

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

.info-list li {
    position: relative;
    padding: 0.5rem 0 0.5rem 1.25rem;
    font-size: 0.9375rem;
    color: #1f2937;
    border-bottom: 1px solid #f3f4f6;
}

.info-list li:last-child {
    border-bottom: none;
}

.info-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.875rem;
    width: 5px;
    height: 5px;
    background: var(--theme-primary, #e43131);
    border-radius: 50%;
}

/* Legacy Tabs (keeping for backward compatibility if needed) */
.product-tabs-section {
    background: var(--theme-bg-primary, #ffffff);
    border-radius: var(--radius-xl, 0.75rem);
    box-shadow: var(--theme-shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05));
    border: 1px solid var(--theme-border-light, #e5e7eb);
    overflow: hidden;
    margin-bottom: 2rem;
}

.tabs-navigation {
    display: flex;
    border-bottom: 1px solid var(--theme-border-light, #e5e7eb);
    background: var(--theme-bg-tertiary, #f3f4f6);
}

.tab-button {
    flex: 1;
    padding: 1rem 1.5rem;
    background: transparent;
    border: none;
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--theme-text-muted, #6b7280);
    cursor: pointer;
    transition: all var(--transition-fast, 150ms ease);
    position: relative;
}

.tab-button:hover {
    color: var(--theme-primary, #e43131);
    background: var(--theme-bg-primary, #ffffff);
}

.tab-button.active {
    color: var(--theme-primary, #e43131);
    background: var(--theme-bg-primary, #ffffff);
}

.tab-button.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--theme-primary, #e43131);
}

.tabs-container {
    padding: 2rem;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Description Content */
.description-content {
    font-size: var(--font-size-base, 1rem);
    line-height: var(--line-height-relaxed, 1.625);
    color: var(--theme-text-secondary, #4b5563);
}

.description-content p {
    margin-bottom: 1rem;
}

.description-content h2,
.description-content h3 {
    margin: 1.5rem 0 1rem;
    color: var(--theme-text-primary, #1f2937);
    font-weight: var(--font-weight-semibold, 600);
}

.description-content ul,
.description-content ol {
    margin: 1rem 0;
    padding-left: 1.5rem;
}

.description-content li {
    margin-bottom: 0.5rem;
}

/* Specifications Grid - Modern Card Design */
.specs-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.spec-item {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 1rem 1.25rem;
    background: #fafafa;
    border: 1px solid var(--theme-border-light, #e5e7eb);
    border-radius: 4px;
    transition: all 0.2s ease;
}

.spec-item:hover {
    background: #f5f5f5;
    border-color: #d1d5db;
}

.spec-label {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--theme-text-muted, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.spec-value {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--theme-text-primary, #1f2937);
    line-height: 1.4;
}

/* Legacy table support (keep for backward compatibility) */
.specs-table {
    width: 100%;
    border-collapse: collapse;
}

.specs-table tr {
    border-bottom: 1px solid var(--theme-border-light, #e5e7eb);
}

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

.specs-table th,
.specs-table td {
    padding: 1rem 1.25rem;
    text-align: left;
    font-size: var(--font-size-sm, 0.875rem);
}

.specs-table th {
    width: 35%;
    font-weight: var(--font-weight-semibold, 600);
    color: var(--theme-text-primary, #1f2937);
    background: var(--theme-bg-tertiary, #f3f4f6);
}

.specs-table td {
    color: var(--theme-text-secondary, #4b5563);
}

/* Responsive adjustments for specs grid */
@media (max-width: 640px) {
    .specs-grid {
        grid-template-columns: 1fr;
    }
}

/* Reviews Content */
.reviews-content {
    padding: 2rem;
    text-align: center;
    color: var(--theme-text-muted, #6b7280);
}

/* =============================================================================
   Social Sharing with Popup
   ============================================================================= */

.social-sharing-wrapper {
    position: relative;
    padding: 0.5rem 0;
}

.share-trigger-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background: transparent;
    border: 1px solid var(--theme-border-default, #d1d5db);
    border-radius: 4px;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    transition: all 0.15s ease;
}

.share-trigger-btn:hover {
    border-color: var(--theme-primary, #e43131);
    color: var(--theme-primary, #e43131);
}

.share-trigger-btn svg {
    flex-shrink: 0;
}

/* Share Popup */
.share-popup {
    position: absolute;
    bottom: calc(100% + 0.5rem);
    left: 0;
    width: 240px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: all 0.2s ease;
    z-index: 50;
}

.share-popup.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.share-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #f3f4f6;
}

.share-popup-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #111827;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.share-popup-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    background: transparent;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.15s ease;
}

.share-popup-close:hover {
    background: #f3f4f6;
    color: #374151;
}

.share-popup-options {
    padding: 0.5rem;
}

.share-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.625rem 0.75rem;
    background: transparent;
    border: none;
    border-radius: 4px;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s ease;
}

.share-option:hover {
    background: #f9fafb;
}

.share-option svg {
    flex-shrink: 0;
}

.share-option.facebook svg {
    color: #1877f2;
}

.share-option.twitter svg {
    color: #000000;
}

.share-option.whatsapp svg {
    color: #25d366;
}

.share-option.pinterest svg {
    color: #bd081c;
}

.share-option.copy-link svg {
    color: #6b7280;
}

.share-option.copy-link.copied {
    background: #dcfce7;
    color: #047857;
}

.share-option.copy-link.copied svg {
    color: #047857;
}

/* Position popup above on mobile if needed */
@media (max-width: 480px) {
    .share-popup {
        width: 220px;
    }
}

/* =============================================================================
   Recently Viewed Products Section
   ============================================================================= */

.recently-viewed-section {
    background: var(--theme-bg-primary, #ffffff);
    padding: 2rem;
    border-radius: 4px;
    box-shadow: var(--theme-shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05));
    border: 1px solid var(--theme-border-light, #e5e7eb);
    margin-bottom: 2rem;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.recently-viewed-section .section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--theme-border-light, #e5e7eb);
}

.recently-viewed-section .section-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--font-family-heading);
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
    color: var(--theme-text-primary, #1f2937);
}

.recently-viewed-section .section-title svg {
    color: var(--theme-primary, #e43131);
    flex-shrink: 0;
}

.clear-recently-viewed-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    background: transparent;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.15s ease;
}

.clear-recently-viewed-btn:hover {
    background: #fef2f2;
    border-color: #fecaca;
    color: #e43131;
}

.clear-recently-viewed-btn svg {
    flex-shrink: 0;
}

/* Recently Viewed Grid */
.recently-viewed-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1.25rem;
}

/* Recently Viewed Card */
.recently-viewed-card {
    position: relative;
    background: var(--theme-bg-primary, #ffffff);
    border: 1px solid var(--theme-border-light, #e5e7eb);
    border-radius: 4px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.recently-viewed-card:hover {
    box-shadow: 0 8px 16px -4px rgba(0, 0, 0, 0.1);
    border-color: var(--theme-primary-light, #fecaca);
    transform: translateY(-4px);
}

.recently-viewed-card .product-link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}

.recently-viewed-card .product-image {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--theme-bg-tertiary, #f3f4f6);
}

.recently-viewed-card .product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.recently-viewed-card:hover .product-image img {
    transform: scale(1.08);
}

.recently-viewed-card .badge {
    position: absolute;
    padding: 0.25rem 0.5rem;
    font-size: 0.625rem;
    font-weight: 600;
    border-radius: 2px;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.recently-viewed-card .badge-featured {
    top: 0.5rem;
    left: 0.5rem;
    background: #dc2626;
}

.recently-viewed-card .badge-sale {
    top: 0.5rem;
    right: 0.5rem;
    background: #c45c5c;
}

.recently-viewed-card .badge-out-of-stock {
    bottom: 0.5rem;
    left: 0.5rem;
    background: #6b7280;
}

.recently-viewed-card .product-info {
    padding: 0.875rem;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.recently-viewed-card .product-category {
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--theme-primary, #e43131);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.recently-viewed-card .product-name {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--theme-text-primary, #1f2937);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
    min-height: 2.45em;
    transition: color 0.15s ease;
}

.recently-viewed-card:hover .product-name {
    color: var(--theme-primary, #e43131);
}

.recently-viewed-card .product-price {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.recently-viewed-card .product-price .compare-price {
    font-size: 0.75rem;
    color: #9ca3af;
    text-decoration: line-through;
}

.recently-viewed-card .product-price .current-price {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--theme-primary, #e43131);
}

.recently-viewed-card .stock-indicator {
    margin-top: 0.25rem;
}

.recently-viewed-card .stock-indicator span {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.6875rem;
    font-weight: 500;
}

.recently-viewed-card .stock-indicator .in-stock {
    color: #059669;
}

.recently-viewed-card .stock-indicator .out-of-stock {
    color: #dc2626;
}

/* Quick Actions Overlay */
.recently-viewed-card .quick-actions {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    opacity: 0;
    transform: translateX(8px);
    transition: all 0.2s ease;
    z-index: 10;
}

.recently-viewed-card:hover .quick-actions {
    opacity: 1;
    transform: translateX(0);
}

.quick-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    background: rgba(255, 255, 255, 0.95);
    border: none;
    border-radius: 4px;
    color: #374151;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.15s ease;
}

.quick-action-btn:hover {
    background: var(--theme-primary, #e43131);
    color: #ffffff;
    transform: scale(1.1);
}

.quick-action-btn.remove-btn:hover {
    background: #dc2626;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .recently-viewed-section {
        padding: 1.5rem;
    }

    .recently-viewed-section .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .recently-viewed-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .recently-viewed-card .quick-actions {
        opacity: 1;
        transform: translateX(0);
    }
}

@media (max-width: 480px) {
    .recently-viewed-section .section-title {
        font-size: 1.125rem;
    }

    .recently-viewed-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .recently-viewed-card .product-info {
        padding: 0.75rem;
    }

    .recently-viewed-card .product-name {
        font-size: 0.8125rem;
    }

    .recently-viewed-card .product-price .current-price {
        font-size: 0.875rem;
    }
}

/* =============================================================================
   Related Products
   ============================================================================= */

.related-products-section {
    background: var(--theme-bg-primary, #ffffff);
    padding: 2.5rem;
    border-radius: 4px;
    box-shadow: var(--theme-shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05));
    border: 1px solid var(--theme-border-light, #e5e7eb);
}

.product-detail-page .section-title {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-2xl, 1.5rem);
    font-weight: var(--font-weight-bold, 700);
    margin: 0 0 1.5rem 0;
    color: var(--theme-text-primary, #1f2937);
}

.product-detail-page .products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.5rem;
}

.product-detail-page .product-card {
    background: var(--theme-bg-primary, #ffffff);
    border: 1px solid var(--theme-border-light, #e5e7eb);
    border-radius: 4px;
    overflow: hidden;
    transition: all var(--transition-base, 200ms ease);
}

.product-detail-page .product-card:hover {
    box-shadow: var(--theme-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
    border-color: var(--theme-primary-light, #fecaca);
    transform: translateY(-4px);
}

.product-link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}

.product-image {
    position: relative;
    width: 100%;
    aspect-ratio: 1; /* 1:1 aspect ratio */
    overflow: hidden;
    background: var(--theme-bg-tertiary, #f3f4f6);
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow, 300ms ease);
}

.product-detail-page .product-card:hover .product-image img {
    transform: scale(1.05);
}

.product-image .badge {
    position: absolute;
    top: 0.625rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.625rem;
    font-weight: 600;
    border-radius: 2px;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.product-image .badge-featured {
    left: 0.625rem;
    background: #dc2626;
}

.product-image .badge-sale {
    right: 0.625rem;
    background: #c45c5c;
}

.product-info {
    padding: 1rem;
}

.product-detail-page .product-name {
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-medium, 500);
    margin: 0 0 0.5rem 0;
    color: var(--theme-text-primary, #1f2937);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: var(--line-height-snug, 1.375);
}

.product-price {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.product-price .compare-price {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--theme-text-light, #9ca3af);
    text-decoration: line-through;
}

.product-price .current-price {
    font-size: var(--font-size-base, 1rem);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--theme-primary, #e43131);
}

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

@media (max-width: 1024px) {
    .product-main-section {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .product-gallery {
        max-width: 500px;
        margin: 0 auto;
        width: 100%;
    }
}

@media (max-width: 768px) {
    .product-detail-page {
        padding: 0 0 3rem;
    }

    .product-title {
        font-size: var(--font-size-2xl, 1.5rem);
    }

    .product-detail-page .current-price {
        font-size: var(--font-size-2xl, 1.5rem);
    }

    .tabs-container {
        padding: 1.25rem;
    }

    .related-products-section {
        padding: 1.5rem;
    }

    .product-detail-page .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

@media (max-width: 480px) {
    .product-actions {
        flex-direction: column;
    }

    .product-detail-page .btn {
        width: 100%;
    }

    .product-detail-page .btn-icon {
        width: 100%;
    }

    .tabs-navigation {
        flex-direction: column;
    }

    .tab-button {
        border-bottom: 1px solid var(--theme-border-light, #e5e7eb);
    }

    .tab-button:last-child {
        border-bottom: none;
    }

    .tab-button.active::after {
        display: none;
    }

    .product-title {
        font-size: var(--font-size-xl, 1.25rem);
    }

    .thumbnail {
        width: 4rem;
        height: 4rem;
    }
}