/**
 * Product Page Styles
 * 
 * Styles for single product page components
 * Based on Next.js ProductPage styles
 * 
 * @package Modeo
 * @since 1.0.0
 */

/* Override WooCommerce default styles for single product page */
.single-product .woocommerce,
.single-product .woocommerce-page,
.single-product [id^="product-"] {
    /* Reset WooCommerce container styles */
    max-width: 100% !important;
    padding: 0 !important;
    width: 100% !important;
    overflow: visible !important;
    /* Ensure sticky works */
}

/* Ensure WooCommerce doesn't add unwanted wrappers */
.single-product .woocommerce .woocommerce-product-gallery,
.single-product .woocommerce .summary {
    max-width: 100% !important;
    width: 100% !important;
}

/* Force Tailwind utilities to work */
.single-product .max-w-8xl {
    max-width: 1920px !important;
    /* Increased from 1600px for better layout */
}

.single-product .mx-auto {
    margin-left: auto !important;
    margin-right: auto !important;
}

.single-product .px-4 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

@media (min-width: 640px) {
    .single-product .sm\:px-6 {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
}

@media (min-width: 1024px) {
    .single-product .lg\:px-8 {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }
}

/* Grid utilities - SCOPED TO PRODUCT CONTENT ONLY */
.single-product [id^="product-"] .grid {
    display: grid !important;
}

.single-product [id^="product-"] .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
}

@media (min-width: 768px) {
    .single-product [id^="product-"] .md\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

.single-product [id^="product-"] .gap-4 {
    gap: 1rem !important;
}

@media (min-width: 640px) {
    .single-product [id^="product-"] .sm\:gap-6 {
        gap: 1.5rem !important;
    }
}

@media (min-width: 1024px) {
    .single-product [id^="product-"] .lg\:gap-12 {
        gap: 3rem !important;
    }
}

/* Product Image Gallery */
.product-image-gallery {
    position: relative;
}

.product-image-gallery #product-main-image {
    transition: opacity 0.3s ease;
}

.product-thumbnails {
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE and Edge */
}

.product-thumbnails::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Opera */
}

/* Product thumbnail - ensure image fills button */
.product-thumbnail {
    position: relative;
    padding: 0;
    border: 2px solid;
}

.product-thumbnail img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Product Details */
.product-details {
    display: flex;
    flex-direction: column;
}

/* Safe area inset for mobile */
.pb-safe-area-inset-bottom {
    padding-bottom: env(safe-area-inset-bottom);
}

/* Scrollbar hide utility */
.scrollbar-hide {
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE and Edge */
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Opera */
}

/* Snap scrolling */
.snap-x {
    scroll-snap-type: x mandatory;
}

.snap-start {
    scroll-snap-align: start;
}

.snap-mandatory {
    scroll-snap-type: x mandatory;
}

/* Product Description */
.product-description {
    line-height: 1.75;
}

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

.product-description ul,
.product-description ol {
    margin-left: 1.5rem;
    margin-bottom: 1rem;
}

.product-description img {
    max-width: 100%;
    height: auto;
}

/* Additional Tailwind utility overrides for product page */
.single-product .min-h-screen {
    min-height: 100vh;
}

.single-product .bg-gradient-to-b {
    background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}

.single-product .from-gray-50\/50,
.single-product .from-gray-50\/50 {
    --tw-gradient-from: rgba(249, 250, 251, 0.5);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(249, 250, 251, 0.5));
}

.single-product .to-white {
    --tw-gradient-to: #ffffff;
}

.single-product .border-gray-200\/50 {
    border-color: rgba(229, 231, 235, 0.5);
}

.single-product .text-primary {
    color: var(--primary, #cc1616) !important;
}

.single-product .hover\:text-primary:hover {
    color: var(--primary, #cc1616) !important;
}

.single-product .bg-primary {
    background-color: var(--primary, #cc1616) !important;
}

.single-product .hover\:bg-primary:hover {
    background-color: var(--primary-hover, #b31313) !important;
}

.single-product .border-primary {
    border-color: var(--primary, #cc1616) !important;
}

.single-product .text-gray-600 {
    color: #4b5563 !important;
}

.single-product .text-gray-400 {
    color: #9ca3af !important;
}

.single-product .text-gray-700 {
    color: #374151 !important;
}

.single-product .text-gray-900 {
    color: #111827 !important;
}

.single-product .bg-gray-200 {
    background-color: #e5e7eb !important;
}

.single-product .border-gray-200 {
    border-color: #e5e7eb !important;
}

/* Flexbox utilities - SCOPED TO PRODUCT CONTENT ONLY */
.single-product [id^="product-"] .flex {
    display: flex !important;
}

.single-product [id^="product-"] .items-center {
    align-items: center !important;
}

.single-product [id^="product-"] .gap-2 {
    gap: 0.5rem !important;
}

.single-product [id^="product-"] .gap-1\.5 {
    gap: 0.375rem !important;
}

.single-product [id^="product-"] .gap-3 {
    gap: 0.75rem !important;
}

/* Spacing utilities - SCOPED TO PRODUCT CONTENT ONLY */
.single-product [id^="product-"] .py-4 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}

@media (min-width: 640px) {
    .single-product [id^="product-"] .sm\:py-5 {
        padding-top: 1.25rem !important;
        padding-bottom: 1.25rem !important;
    }
}

.single-product [id^="product-"] .py-12 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}

@media (min-width: 640px) {
    .single-product .sm\:py-16 {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
    }
}

@media (min-width: 1024px) {
    .single-product .lg\:py-20 {
        padding-top: 5rem !important;
        padding-bottom: 5rem !important;
    }
}

.single-product .mb-4 {
    margin-bottom: 1rem !important;
}

.single-product .mb-6 {
    margin-bottom: 1.5rem !important;
}

.single-product .mb-8 {
    margin-bottom: 2rem !important;
}

.single-product .mt-12 {
    margin-top: 3rem !important;
}

@media (min-width: 640px) {
    .single-product .sm\:mt-16 {
        margin-top: 4rem !important;
    }
}

@media (min-width: 1024px) {
    .single-product .lg\:mt-20 {
        margin-top: 5rem !important;
    }
}

.single-product .pt-6 {
    padding-top: 1.5rem !important;
}

.single-product .pt-12 {
    padding-top: 3rem !important;
}

@media (min-width: 640px) {
    .single-product .sm\:pt-16 {
        padding-top: 4rem !important;
    }
}

@media (min-width: 1024px) {
    .single-product .lg\:pt-20 {
        padding-top: 5rem !important;
    }
}

.single-product .border-t {
    border-top-width: 1px !important;
}

.single-product .border-b {
    border-bottom-width: 1px !important;
}

.single-product .border-2 {
    border-width: 2px !important;
}

/* Typography */
.single-product .text-sm {
    font-size: 0.875rem !important;
    line-height: 1.25rem !important;
}

.single-product .text-base {
    font-size: 1rem !important;
    line-height: 1.5rem !important;
}

.single-product .text-lg {
    font-size: 1.125rem !important;
    line-height: 1.75rem !important;
}

.single-product .text-3xl {
    font-size: 1.875rem !important;
    line-height: 2.25rem !important;
}

@media (min-width: 640px) {
    .single-product .sm\:text-4xl {
        font-size: 2.25rem !important;
        line-height: 2.5rem !important;
    }
}

@media (min-width: 1024px) {
    .single-product .lg\:text-5xl {
        font-size: 3rem !important;
        line-height: 1 !important;
    }
}

.single-product .font-bold {
    font-weight: 700 !important;
}

.single-product .font-medium {
    font-weight: 500 !important;
}

.single-product .font-semibold {
    font-weight: 600 !important;
}

.single-product .leading-tight {
    line-height: 1.25 !important;
}

.single-product .tracking-tight {
    letter-spacing: -0.025em !important;
}

.single-product .leading-relaxed {
    line-height: 1.625 !important;
}

/* Custom variation selector styles - no need to hide anything, we don't render it */

/* Show only our custom variation selector */
.single-product .modeo-variation-selector {
    display: block !important;
}

/* Style for variation selector buttons and selects */
.single-product .modeo-variation-option {
    transition: all 0.2s ease;
}

.single-product .modeo-size-button.selected,
.single-product .modeo-size-button[aria-selected="true"] {
    background-color: var(--primary, #cc1616) !important;
    color: #ffffff !important;
    border-color: var(--primary, #cc1616) !important;
}

.single-product .modeo-color-swatch.selected,
.single-product .modeo-color-swatch[aria-selected="true"] {
    border-color: var(--primary, #cc1616) !important;
    border-width: 3px !important;
    box-shadow: 0 0 0 2px rgba(204, 22, 22, 0.2);
}

/* Style for Add to Cart button */
.single-product .single_add_to_cart_button,
.single-product button.single_add_to_cart_button,
.single-product .woocommerce-variation-add-to-cart .button,
.single-product form.cart .button {
    width: 100%;
    padding: 14px 24px;
    background-color: var(--primary, #cc1616) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.single-product .single_add_to_cart_button:hover,
.single-product button.single_add_to_cart_button:hover,
.single-product .woocommerce-variation-add-to-cart .button:hover,
.single-product form.cart .button:hover {
    background-color: var(--primary-hover, #b31313) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(204, 22, 22, 0.3);
}

.single-product .single_add_to_cart_button:disabled,
.single-product button.single_add_to_cart_button:disabled,
.single-product .woocommerce-variation-add-to-cart .button:disabled,
.single-product form.cart .button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* Quantity input styles are now handled by Tailwind classes in quantity-input.php */

/* Style for variation info display - Modern, clean layout */
.single-product .modeo-variation-info {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 2px solid #e5e7eb;
    background: linear-gradient(to bottom, rgba(249, 250, 251, 0.5), transparent);
    border-radius: 12px;
    padding: 1.5rem;
    margin-left: -1.5rem;
    margin-right: -1.5rem;
    transition: all 0.3s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* When variation info is visible, add subtle highlight */
.single-product .modeo-variation-info:not(.hidden) {
    background: linear-gradient(to bottom, rgba(249, 250, 251, 0.8), rgba(249, 250, 251, 0.3));
    border-top-color: var(--primary, #cc1616);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Variation Price - Better visibility and hierarchy */
.single-product .modeo-variation-info .modeo-variation-price {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.single-product .modeo-variation-info .modeo-variation-price span:first-child {
    font-size: 0.875rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.single-product .modeo-variation-info .modeo-variation-price span:last-child {
    font-size: 2rem;
    font-weight: 800;
    color: var(--primary, #cc1616);
    line-height: 1;
    letter-spacing: -0.02em;
}

@media (min-width: 640px) {
    .single-product .modeo-variation-info .modeo-variation-price span:last-child {
        font-size: 2.5rem;
    }
}

@media (min-width: 1024px) {
    .single-product .modeo-variation-info .modeo-variation-price span:last-child {
        font-size: 3rem;
    }
}

/* Variation Stock Badge - Modern, minimalist design */
.single-product .modeo-variation-info .modeo-variation-stock {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
}

/* Stock indicator dot */
.single-product .modeo-variation-info .modeo-variation-stock span:first-child {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    flex-shrink: 0;
}

/* Stock Available - Green */
.single-product .modeo-variation-info .modeo-variation-stock.text-green-600 span:first-child {
    background-color: #22c55e;
}

.single-product .modeo-variation-info .modeo-variation-stock.text-green-600 {
    color: #16a34a;
}

/* Stock Unavailable - Red */
.single-product .modeo-variation-info .modeo-variation-stock.text-red-600 span:first-child {
    background-color: #ef4444;
}

.single-product .modeo-variation-info .modeo-variation-stock.text-red-600 {
    color: #dc2626;
}

/* Variation Description */
.single-product .modeo-variation-info .modeo-variation-description {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e5e7eb;
    font-size: 0.875rem;
    line-height: 1.6;
    color: #6b7280;
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .single-product .modeo-variation-info {
        padding: 1rem;
        margin-left: -1rem;
        margin-right: -1rem;
    }

    .single-product .modeo-variation-info .modeo-variation-price {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .single-product .modeo-variation-info .modeo-variation-price span:last-child {
        font-size: 1.875rem;
    }
}

.single-product .woocommerce-variation-description {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e5e7eb;
}

/* Hide WooCommerce variation description and price - we use our custom one */
.single-product .woocommerce-variation-description,
.single-product .woocommerce-variation-price,
.single-product .woocommerce-variation-availability {
    display: none !important;
}

/* Hide main product price for variable products when variation is selected */
.single-product .modeo-variable-product-price.hidden {
    display: none !important;
}

/* For variable products, show main price by default, hide when variation selected */
.single-product .modeo-variable-product-price {
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Hide main price when variation is selected (using body class) */
body.variation-selected .single-product .modeo-variable-product-price:not(.keep-visible) {
    display: none !important;
}

/* Hide the entire single_variation div content since we render our own */
.single-product .single_variation {
    display: none !important;
}

/* Animation for variation info appearance */
.single-product .modeo-variation-info {
    animation: fadeInUp 0.3s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Price emphasis */
.single-product .modeo-variation-info .modeo-variation-price span:last-child {
    text-shadow: 0 1px 2px rgba(204, 22, 22, 0.1);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .product-image-gallery {
        margin-bottom: 1rem;
    }

    .single-product .single_add_to_cart_button,
    .single-product button.single_add_to_cart_button {
        padding: 12px 20px;
        font-size: 0.9375rem;
    }

    .single-product .modeo-variation-info {
        padding: 1rem;
        margin-left: -1rem;
        margin-right: -1rem;
    }

    .single-product .modeo-variation-info .modeo-variation-price {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .single-product .modeo-variation-info .modeo-variation-price span:last-child {
        font-size: 1.875rem;
    }
}

/* Fix: Override skeleton loader animation to prevent scaling */
.single-product .modeo-variation-loading .animate-pulse,
.single-product .modeo-variation-loading .animate-pulse>div {
    animation: modeo-pulse-no-scale 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
    transform: none !important;
}

@keyframes modeo-pulse-no-scale {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.5;
        transform: scale(1);
    }
}

/* Quantity Input with +/- Buttons - Ported from Cart Styles */
.quantity-wrapper {
    display: inline-flex !important;
    align-items: center !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 0.75rem !important;
    background: #ffffff !important;
    overflow: hidden !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
    transition: all 0.2s ease !important;
}

.quantity-wrapper:hover {
    border-color: #cc1616 !important;
    box-shadow: 0 4px 6px -1px rgba(204, 22, 22, 0.1) !important;
}

.quantity-wrapper .qty-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 2.75rem !important;
    height: 2.75rem !important;
    min-width: 2.75rem !important;
    min-height: 2.75rem !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    color: #6b7280 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.quantity-wrapper .qty-btn:hover:not(:disabled) {
    background: #fef2f2 !important;
    color: #cc1616 !important;
    text-decoration: none !important;
}

.quantity-wrapper .qty-btn:active:not(:disabled) {
    transform: scale(0.95) !important;
    background: #fee2e2 !important;
}

.quantity-wrapper .qty-btn:disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

/* SVG Icons in Quantity Buttons */
.quantity-wrapper .qty-btn svg {
    width: 1.25rem !important;
    height: 1.25rem !important;
    display: block !important;
    stroke: currentColor !important;
    fill: none !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

.quantity-wrapper input.qty {
    width: 3.5rem !important;
    min-width: 3.5rem !important;
    text-align: center !important;
    border: none !important;
    border-left: 2px solid #e5e7eb !important;
    border-right: 2px solid #e5e7eb !important;
    background: transparent !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    color: #171717 !important;
    -moz-appearance: textfield !important;
    appearance: textfield !important;
    padding: 0.5rem 0.25rem !important;
    margin: 0 !important;
    outline: none !important;
    box-shadow: none !important;
}

.quantity-wrapper input.qty::-webkit-outer-spin-button,
.quantity-wrapper input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

.quantity-wrapper input.qty:focus {
    outline: none !important;
    border-left-color: #cc1616 !important;
    border-right-color: #cc1616 !important;
    background: #fef2f2 !important;
}

/* ========================================
   Product Gallery Fixes - ROBUST
   ======================================== */

/* 1. Remove scaling from ALL thumbnail states - Forcefully */
.product-image-gallery .flex-active-slide img,
.product-image-gallery .flex-active-slide,
.product-image-gallery .slick-current img,
.product-image-gallery .slick-current,
.product-thumbnails .product-thumbnail.active img,
.product-thumbnails .product-thumbnail.active,
.product-thumbnails li img,
.product-thumbnails li,
.product-thumbnails .product-thumbnail img,
.product-thumbnails .product-thumbnail {
    transform: none !important;
    transition: none !important;
    /* Kill transition to stop any animation residue */
}

/* Explicitly target hover/focus states to prevent scale on mouseout/interaction */
.product-thumbnails .product-thumbnail:hover,
.product-thumbnails .product-thumbnail:focus,
.product-thumbnails .product-thumbnail.active:hover,
.product-thumbnails .product-thumbnail.active:focus {
    transform: none !important;
}

/* Ensure border remains for active state (user said "Moze byc ten border") */
.product-image-gallery .flex-active-slide,
.product-image-gallery .slick-current,
.product-thumbnails .product-thumbnail.active {
    border-color: var(--primary, #cc1616) !important;
}

/* 2. NUCLEAR OPTION: Remove box-shadow and unwanted overlays/colors from main featured image */
/* Target every possible wrapper */
.single-product .product-image-gallery,
.single-product .woocommerce-product-gallery,
.single-product .woocommerce-product-gallery__trigger,
.single-product .woocommerce-product-gallery__wrapper,
.single-product .woocommerce-product-gallery__image,
.single-product .woocommerce-product-gallery__image img,
.single-product .flex-viewport,
.single-product .flex-viewport .slides,
.single-product .flex-viewport .slides li,
.single-product .images {
    box-shadow: none !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    outline: none !important;
}

/* Specifically target the image itself to ensure it has no weird styling */
.single-product .woocommerce-product-gallery__image img {
    box-shadow: none !important;
    border-radius: 12px !important;
    /* Keep rounded corners if nice */
}

/* Fix for "strange color" - ensure main image wrapper is clean white or transparent */
.woocommerce-product-gallery__image::before,
.woocommerce-product-gallery__image::after,
.woocommerce-product-gallery__wrapper::before,
.woocommerce-product-gallery__wrapper::after {
    display: none !important;
    background: none !important;
    content: none !important;
}

.woocommerce-product-gallery .zoomImg {
    background-color: transparent !important;
    /* Ensure zoom lens/image doesn't have a background */
}

/* 3. Thumbnail Navigation/Scrolling */
/* Ensure container is scrollable */
.product-image-gallery .product-thumbnails-container,
.product-thumbnails-container,
.product-thumbnails {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    flex-wrap: nowrap !important;
    gap: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    /* Space for scrollbar */
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    width: 100% !important;
    max-width: 100% !important;
    scrollbar-width: thin;
    /* Firefox */
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

/* Style the scrollbar for webkit */
.product-image-gallery .product-thumbnails-container::-webkit-scrollbar,
.product-thumbnails-container::-webkit-scrollbar,
.product-thumbnails::-webkit-scrollbar {
    display: block !important;
    height: 6px;
    width: 6px;
}

.product-image-gallery .product-thumbnails-container::-webkit-scrollbar-thumb,
.product-thumbnails-container::-webkit-scrollbar-thumb,
.product-thumbnails::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

.product-image-gallery .product-thumbnails-container::-webkit-scrollbar-track,
.product-thumbnails-container::-webkit-scrollbar-track,
.product-thumbnails::-webkit-scrollbar-track {
    background: transparent;
}

/* Ensure thumbnails don't shrink */
.product-thumbnail {
    flex: 0 0 auto !important;
    /* Don't shrink */
    width: 80px !important;
    /* Fixed width for consistency */
    height: 80px !important;
    opacity: 1 !important;
    /* Ensure full visibility */
}

/* ============================================
   Product Description Styles
   ============================================ */

.product-description-content {
    color: #374151;
    /* gray-700 */
    line-height: 1.75;
}

/* Headings within description */
.product-description-content h1,
.product-description-content h2,
.product-description-content h3,
.product-description-content h4,
.product-description-content h5,
.product-description-content h6 {
    color: #111827;
    /* gray-900 */
    font-weight: 700;
    margin-top: 2em;
    margin-bottom: 1em;
    line-height: 1.3;
}

.product-description-content h2 {
    font-size: 1.5em;
}

.product-description-content h3 {
    font-size: 1.25em;
}

.product-description-content h4 {
    font-size: 1.125em;
}

/* Paragraphs */
.product-description-content p {
    margin-bottom: 1.25em;
    line-height: 1.75;
}

.product-description-content p:last-child {
    margin-bottom: 0;
}

/* Links */
.product-description-content a {
    color: #cc1616;
    /* primary */
    text-decoration: none;
    transition: text-decoration 0.2s;
}

.product-description-content a:hover {
    text-decoration: underline;
}

/* Strong/Bold */
.product-description-content strong,
.product-description-content b {
    color: #111827;
    /* gray-900 */
    font-weight: 600;
}

/* Lists */
.product-description-content ul,
.product-description-content ol {
    margin: 1.5em 0;
    padding-left: 1.5em;
}

.product-description-content ul {
    list-style-type: disc;
}

.product-description-content ol {
    list-style-type: decimal;
}

.product-description-content li {
    margin: 0.5em 0;
    line-height: 1.75;
}

.product-description-content li::marker {
    color: #6b7280;
    /* gray-500 */
}

/* Nested lists */
.product-description-content ul ul,
.product-description-content ol ol,
.product-description-content ul ol,
.product-description-content ol ul {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

/* Images */
.product-description-content img {
    max-width: 100%;
    height: auto;
    border-radius: 0.75rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    margin: 2em 0;
}

/* Blockquotes */
.product-description-content blockquote {
    border-left: 4px solid #cc1616;
    /* primary */
    padding-left: 1em;
    margin: 1.5em 0;
    font-style: italic;
    color: #4b5563;
    /* gray-600 */
}

/* Tables */
.product-description-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 2em 0;
}

.product-description-content th,
.product-description-content td {
    padding: 0.75em;
    border: 1px solid #e5e7eb;
    /* gray-200 */
    text-align: left;
}

.product-description-content th {
    background-color: #f9fafb;
    /* gray-50 */
    font-weight: 600;
    color: #111827;
    /* gray-900 */
}

/* Code */
.product-description-content code {
    background-color: #f3f4f6;
    /* gray-100 */
    padding: 0.2em 0.4em;
    border-radius: 0.25rem;
    font-size: 0.875em;
    font-family: 'Courier New', Courier, monospace;
}

.product-description-content pre {
    background-color: #1f2937;
    /* gray-800 */
    color: #f9fafb;
    /* gray-50 */
    padding: 1em;
    border-radius: 0.5rem;
    overflow-x: auto;
    margin: 1.5em 0;
}

.product-description-content pre code {
    background-color: transparent;
    padding: 0;
    color: inherit;
}

/* ============================================
   Product Additional Information Styles
   ============================================ */

.product-additional-info table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.product-additional-info tbody tr {
    border-bottom: 1px solid #e5e7eb;
    /* gray-200 */
    transition: background-color 0.2s;
}

.product-additional-info tbody tr:last-child {
    border-bottom: none;
}

.product-additional-info tbody tr:hover {
    background-color: #f9fafb;
    /* gray-50 */
}

.product-additional-info th.attribute-label {
    padding: 1rem 1.5rem;
    text-align: left;
    font-weight: 600;
    color: #111827;
    /* gray-900 */
    width: 35%;
    vertical-align: top;
}

.product-additional-info td.attribute-value {
    padding: 1rem 1.5rem;
    color: #374151;
    /* gray-700 */
    line-height: 1.6;
}

/* Responsive adjustments */
@media (max-width: 640px) {

    .product-additional-info th.attribute-label,
    .product-additional-info td.attribute-value {
        display: block;
        width: 100%;
        padding: 0.75rem 1rem;
    }

    .product-additional-info th.attribute-label {
        padding-bottom: 0.25rem;
        font-size: 0.875rem;
        color: #6b7280;
        /* gray-500 */
    }

    .product-additional-info td.attribute-value {
        padding-top: 0.25rem;
        padding-bottom: 1rem;
    }
}