/**
 * Product Detail Component - Responsive CSS (Etsy-style)
 * Follows CLAUDE.md Responsive Breakpoints
 * Version: 2.0
 *
 * Breakpoints (Mobile-First):
 * - 400px: Mobile small
 * - 670px: Mobile (menu activates)
 * - 750px: Mobile large
 * - 1050px: Tablet
 * - 1170px: Tablet wide
 * - 1230px: Desktop
 */

/* ============================================
   TABLET WIDE - @media max-width: 1170px
   ============================================ */

@media only screen and (max-width: 1170px) {
    .product-detail-etsy {
        gap: 30px;
        padding: 15px;
    }

    .product-visual-section {
        flex: 0 0 56%;
    }

    .product-info-section {
        flex: 0 0 40%;
    }

    .product-title-main {
        font-size: 26px;
    }
}

/* ============================================
   TABLET - @media max-width: 1050px
   ============================================ */

@media only screen and (max-width: 1050px) {
    .product-detail-etsy {
        flex-direction: column;
        gap: 30px;
    }

    .product-visual-section {
        flex: 1 1 100%;
    }

    .product-info-section {
        flex: 1 1 100%;
        max-width: 100%;
    }

    /* Description and Seller sections in left column */
    .product-description-section-left,
    .seller-info-section-left {
        padding: 15px;
    }

    /* Stack seller info on mobile large */
    .seller-info-section-left .seller-info-header {
        flex-direction: column;
        gap: 15px;
    }

    .seller-info-section-left .producer-info-right {
        justify-content: flex-start;
        text-align: left;
    }

    .seller-info-section-left .producer-details {
        align-items: flex-start;
    }

    /* Stack action buttons on mobile */
    .seller-info-section-left .seller-action-buttons {
        flex-direction: column;
        gap: 10px;
    }

    .seller-info-section-left .btn-message-seller,
    .seller-info-section-left .btn-follow-seller {
        width: 100%;
    }

    /* Products sections */
    .seller-other-products {
        padding: 20px;
    }
}

/* ============================================
   MOBILE LARGE - @media max-width: 750px
   ============================================ */

@media only screen and (max-width: 750px) {
    .product-detail-etsy {
        padding: 10px;
        gap: 20px;
    }

    /* Thumbnails to top (horizontal) */
    .product-visual-section {
        flex-direction: column-reverse;
    }

    .product-thumbnails-left {
        flex-direction: row;
        flex: 0 0 auto;
        max-height: none;
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 8px;
        padding: 5px 0;
    }

    .product-thumbnails-left .thumb-item {
        flex: 0 0 70px;
        width: 70px;
        height: 70px;
    }

    /* Main image container - ensure it's visible */
    .product-main-image-container {
        flex: 1 1 auto;
        width: 100%;
        display: block;
        position: relative;
    }

    .product-main-image {
        max-height: 400px;
        width: 100%;
        height: auto;
        display: block;
        object-fit: contain;
    }

    /* Info section adjustments */
    .product-info-section {
        gap: 15px;
    }

    .product-title-main {
        font-size: 24px;
    }

    .product-price-block {
        font-size: 22px;
    }

    /* Actions row */
    .product-actions-row {
        flex-direction: column;
        align-items: stretch;
    }

    .quantity-selector-compact {
        flex: 1 1 auto;
        width: 100%;
    }

    .btn-add-to-cart {
        width: 100%;
    }

    /* Secondary actions */
    .product-secondary-actions {
        flex-wrap: wrap;
        justify-content: space-between;
    }

    /* Seller info */
    .seller-info-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .btn-message-seller {
        width: 100%;
        justify-content: center;
    }

    /* Other products grid */
    .other-products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    /* Sections */
    .product-description-section-left,
    .seller-info-section-left,
    .seller-other-products {
        padding: 15px;
        margin: 20px auto;
    }

    .section-heading {
        font-size: 20px;
    }
}

/* ============================================
   MOBILE - @media max-width: 670px
   ============================================ */

@media only screen and (max-width: 670px) {
    .product-detail-etsy {
        padding: 5px;
        gap: 15px;
    }

    .product-thumbnails-left .thumb-item {
        flex: 0 0 60px;
        width: 60px;
        height: 60px;
    }

    .product-main-image {
        max-height: 350px;
    }

    .product-title-main {
        font-size: 22px;
    }

    .product-price-block {
        font-size: 20px;
    }

    /* Highlights */
    .product-highlights {
        padding: 12px;
    }

    .product-highlights .highlights-list li {
        font-size: 13px;
    }

    /* Certificate badges - smaller on mobile */
    .certificate-badges-grid {
        gap: 15px;
        justify-content: flex-start;
    }

    .cert-badge {
        width: 56px;
        height: 56px;
    }

    .cert-badge-link,
    .cert-badge-wrapper {
        padding: 8px 6px;
    }

    .cert-badge-name {
        font-size: 11px;
        max-width: 80px;
    }

    .cert-badge-no-image .cert-fallback-icon {
        font-size: 28px;
        width: 56px;
        height: 56px;
    }

    /* Shipping & Protection boxes */
    .shipping-info-box,
    .shipping-info-box-compact,
    .shipping-regions-box,
    .payment-protection-box {
        padding: 12px;
    }

    .shipping-info-box .shipping-details li,
    .payment-protection-box p {
        font-size: 12px;
    }

    /* Shipping table responsive */
    .shipping-table {
        font-size: 13px;
    }

    .shipping-table th,
    .shipping-table td {
        padding: 10px 8px;
        font-size: 12px;
    }

    .shipping-additional-info {
        font-size: 11px;
    }

    /* Product tags widget responsive */
    .product-tags-widget {
        padding: 12px;
    }

    .product-tags-widget .tags .color-3 {
        font-size: 13px;
        margin-bottom: 8px;
    }

    .product-tags-widget .tags a {
        padding: 5px 10px;
        font-size: 12px;
        margin: 0 4px 4px 0;
    }

    /* Other products - single column on very small screens */
    .other-products-grid {
        grid-template-columns: 1fr;
    }

    .section-header-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}

/* ============================================
   MOBILE SMALL - @media max-width: 400px
   ============================================ */

@media only screen and (max-width: 400px) {
    .product-detail-etsy {
        padding: 0;
    }

    .product-visual-section {
        gap: 10px;
    }

    .product-thumbnails-left {
        gap: 5px;
    }

    .product-thumbnails-left .thumb-item {
        flex: 0 0 50px;
        width: 50px;
        height: 50px;
    }

    .product-main-image {
        max-height: 300px;
    }

    .product-title-main {
        font-size: 20px;
    }

    .product-price-block {
        font-size: 18px;
    }

    .quantity-selector-compact label {
        font-size: 12px;
    }

    .qty-btn {
        flex: 0 0 32px;
        height: 38px;
        font-size: 16px;
    }

    .qty-input {
        height: 38px;
        font-size: 14px;
    }

    .btn-add-to-cart {
        height: 45px;
        font-size: 15px;
    }

    .product-secondary-actions {
        gap: 10px;
    }

    .btn-icon-text {
        font-size: 13px;
        gap: 4px;
    }

    /* Legacy avatar class */
    .seller-avatar {
        width: 50px;
        height: 50px;
    }

    /* Store logo and owner avatar - mobile */
    .seller-info-section-left .store-logo-square {
        width: 55px;
        height: 55px;
    }

    .seller-info-section-left .owner-avatar-round {
        width: 50px;
        height: 50px;
    }

    .seller-info-section-left .seller-avatar-name {
        gap: 10px;
    }

    .product-description-section-left,
    .seller-info-section-left,
    .seller-other-products {
        padding: 12px;
        margin: 15px auto;
    }

    .section-heading {
        font-size: 18px;
        padding-bottom: 10px;
        margin-bottom: 15px;
    }

    /* Make shipping table scroll on very small screens */
    .shipping-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .shipping-table {
        min-width: 400px;
    }
}

/* ============================================
   LANDSCAPE MOBILE - Special handling
   ============================================ */

@media only screen and (max-height: 500px) and (orientation: landscape) {
    .product-main-image {
        max-height: 250px;
    }

    .product-thumbnails-left {
        max-height: 250px;
    }
}

/* ============================================
   TOUCH DEVICE OPTIMIZATIONS
   ============================================ */

@media (hover: none) and (pointer: coarse) {
    /* Increase touch targets */
    .thumb-item {
        min-width: 60px;
        min-height: 60px;
    }

    .qty-btn {
        min-width: 40px;
        min-height: 44px;
    }

    .btn-icon-text {
        padding: 10px;
        margin: -10px;
    }

    /* Remove hover effects on touch */
    .product-card-mini:hover {
        transform: none;
    }

    .btn-add-to-cart:hover {
        transform: none;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
    .product-thumbnails-left,
    .edit-product-btn,
    .product-secondary-actions,
    .btn-message-seller {
        display: none;
    }

    .product-detail-etsy {
        flex-direction: column;
    }

    .product-visual-section,
    .product-info-section {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

/* ============================================
   FLOATING BUTTONS ADJUSTMENT FOR MOBILE STICKY BAR
   ============================================ */

/* Adjust WhatsApp and Email floating buttons to not overlap with sticky bar on mobile */
@media only screen and (max-width: 750px) {
    /* WhatsApp button - move to left side and adjust position */
    .whatsapp-button-float {
        left: 20px;
        right: auto;
        bottom: 100px; /* Above sticky bar (sticky bar height ~90px) */
        z-index: 999; /* Below sticky bar (1000) but above content */
    }

    /* Email button if exists */
    .email-button-float {
        left: 20px;
        right: auto;
        bottom: 170px; /* Stack above WhatsApp button */
        z-index: 999;
    }

    /* Reserve space for future sticky search bar */
    /* When sticky search bar is implemented, it should be at z-index: 1001 */
    /* Sticky search bar placeholder: bottom: 0, height: ~50px */
    /* Mobile sticky product bar: bottom: 0 (or above search if search exists) */
}

/* Very small mobile - smaller floating buttons */
@media only screen and (max-width: 400px) {
    .whatsapp-button-float,
    .email-button-float {
        width: 50px;
        height: 50px;
        font-size: 24px;
        left: 15px;
    }

    .whatsapp-button-float {
        bottom: 95px;
    }

    .email-button-float {
        bottom: 155px;
    }
}