/**
 * ===========================================================================
 * RESPONSIVE DESIGN SYSTEM (GOLDEN RULE — WITH SCALING INTENT)
 * ===========================================================================
 *
 * WHY (Intent)
 * - Desktop (1440px) is the primary design reference
 * - Figma designs may exist ONLY for desktop initially
 * - UI must remain readable and balanced on all devices
 * - Responsive behavior must be predictable, not improvised
 *
 * Responsive design exists to PRESERVE INTENT, not exact sizes.
 *
 *
 * HOW (Strategy & Governance)
 *
 * 1. PRIMARY DESIGN REFERENCE (LOCKED)
 *    - 1440px is the ONLY authoritative design reference
 *    - All sizes (font, spacing, layout) are evaluated here first
 *
 *    Example:
 *    - Desktop heading = 74px
 *    - Desktop spacing = 6rem
 *
 *
 * 2. RESPONSIVE SCALING PHILOSOPHY
 *    - Desktop values define INTENT
 *    - Other devices receive DERIVED values
 *
 *    Derived values must:
 *    - preserve hierarchy
 *    - preserve readability
 *    - avoid visual dominance or crowding
 *
 *    Pixel-perfect matching on non-desktop devices is NOT required.
 *
 *
 * 3. AUTO-SCALING PERMISSION (IMPORTANT)
 *    When Figma designs for tablet/mobile are NOT available:
 *
 *    - Developer/Agent MAY derive responsive values using media queries
 *    - BUT ONLY for:
 *      • font-size
 *      • vertical spacing
 *
 *    - Structural changes are NOT allowed
 *
 *
 * 4. SCALING RULE OF THUMB (INDUSTRY PRACTICE)
 *    - Tablet (≤768px):
 *      • Reduce large text by ~25–30%
 *      • Reduce section spacing by ~30–40%
 *
 *    - Mobile (<576px):
 *      • Reduce large text by ~40–50%
 *      • Reduce section spacing by ~50%
 *
 *    These are GUIDELINES, not strict math.
 *
 *
 * 5. CONFIRMATION RULE (SAFETY VALVE)
 *    - If a responsive adjustment affects:
 *      • visual hierarchy
 *      • brand prominence
 *      • key headings (hero / page title)
 *
 *    → Developer MUST confirm before implementation.
 *
 *
 * WHAT (Implementation Rules)
 *
 * - Desktop values live in style.css
 * - Responsive reductions live ONLY in media.css
 *
 * - media.css MAY:
 *   • reduce font-size
 *   • reduce padding / margin
 *   • hide non-critical elements
 *
 * - media.css MUST NOT:
 *   • increase sizes beyond desktop
 *   • redefine layout structure
 *   • change grid logic
 *
 * - Units:
 *   • rem preferred (allows natural scaling)
 *   • px allowed ONLY when matching Figma exactly on desktop
 *
 *
 * DESIGN REVIEW REFERENCES
 * - Desktop review at 1440px
 * - Tablet sanity check at 768px
 * - Mobile sanity check at 375px
 *
 *
 * GOLDEN RULE (DO NOT BREAK)
 * - Desktop defines intent.
 * - Other devices adapt the intent.
 * - media.css refines, never re-designs.
 * - When in doubt, ASK before scaling.
 * ===========================================================================
 */

@media (max-width: 992px) {
    ._banner_title_large {
        font-size: calc(140px * 0.7);
        line-height: 1.12;
        letter-spacing: -0.015em;
    }

    ._product_cards_container {
        justify-content: space-between;
    }
}

@media (max-width: 768px) {
    ._section_inner {
        padding-left: calc(var(--theme_horizontal_padding) * var(--theme_scale_tablet));
        padding-right: calc(var(--theme_horizontal_padding) * var(--theme_scale_tablet));
    }

    ._section_content_padding {
        padding-top: calc(var(--theme_vertical_padding) * var(--theme_scale_tablet));
        padding-bottom: calc(var(--theme_vertical_padding) * var(--theme_scale_tablet));
    }

    ._image_cover {
        min-height: calc(500px * var(--theme_scale_tablet));
    }

    ._banner_wrapper {
        min-height: calc(430px * var(--theme_scale_tablet));
        padding: calc(2rem * var(--theme_scale_tablet)) calc(3rem * var(--theme_scale_tablet));
    }

    ._banner_image_wrapper img {
        max-height: calc(600px * var(--theme_scale_tablet));
        width: auto;
        max-width: calc(328px * var(--theme_scale_tablet));
    }

    ._banner_content_wrapper {
        padding: 1rem 0;
    }

    ._banner_title_small {
        font-size: calc(48px * var(--theme_scale_tablet));
        line-height: 1.2;
    }

    ._banner_title_large {
        font-size: calc(140px * var(--theme_scale_tablet));
        line-height: 1.1;
        word-break: break-word;
        letter-spacing: -0.02em;
    }

    ._about_grapes_image_wrapper {
        display: none;
    }

    /* Typography - Section Titles */
    ._section_title {
        font-size: calc(48px * var(--theme_scale_tablet));
    }

    ._section_subtitle {
        font-size: calc(36px * var(--theme_scale_tablet));
    }

    ._special_section_title {
        font-size: calc(74px * var(--theme_scale_tablet));
    }

    ._home_text_paragraph {
        font-size: calc(20px * var(--theme_scale_tablet));
        line-height: calc(30px * var(--theme_scale_tablet));
    }

    /* Product Elements */
    ._product_title {
        font-size: calc(20px * var(--theme_scale_tablet));
    }

    ._product_price {
        font-size: calc(24px * var(--theme_scale_tablet));
    }

    ._product_filter_item_label {
        font-size: calc(20px * var(--theme_scale_tablet));
    }

    ._product_cards_container {
        justify-content: space-between;
        gap: 1.5rem;
    }

    ._product_card_image_wrapper {
        height: calc(380px * var(--theme_scale_tablet));
    }

    /* Best Seller Collection Images */
    ._collection_image_wrapper {
        margin-bottom: 1rem;
    }

    ._collection_image {
        max-width: 100%;
        height: auto;
        margin-bottom: 0;
    }

    /* Special Image Wrapper */
    ._special_image_wrapper {
        max-height: calc(500px * var(--theme_scale_tablet));
        padding: 0px calc(1rem * var(--theme_scale_tablet)) 0px 1rem;
    }

    ._special_image_wrapper img {
        height: calc(500px * var(--theme_scale_tablet));
    }

    /* Product Filter Wrapper */
    ._product_filter_wrapper {
        flex-wrap: wrap;
        gap: 1rem;
    }
}

@media (max-width: 576px) {
    ._section_inner {
        padding-left: calc(var(--theme_horizontal_padding) * var(--theme_scale_mobile));
        padding-right: calc(var(--theme_horizontal_padding) * var(--theme_scale_mobile));
    }

    ._section_content_padding {
        padding-top: calc(var(--theme_vertical_padding) * var(--theme_scale_mobile));
        padding-bottom: calc(var(--theme_vertical_padding) * var(--theme_scale_mobile));
    }

    ._banner_wrapper {
        min-height: calc(430px * var(--theme_scale_mobile));
        padding: calc(2rem * var(--theme_scale_mobile)) calc(3rem * var(--theme_scale_mobile));
    }

    ._banner_image_wrapper img {
        max-height: calc(600px * var(--theme_scale_mobile));
        width: auto;
        max-width: calc(328px * var(--theme_scale_mobile));
    }

    ._banner_content_wrapper {
        padding: 0.5rem 0;
    }

    ._banner_title_small {
        font-size: calc(48px * var(--theme_scale_mobile));
        line-height: 1.2;
    }

    ._banner_title_large {
        font-size: calc(140px * var(--theme_scale_mobile));
        line-height: 1.15;
        word-break: break-word;
        letter-spacing: -0.01em;
        padding: 0 0.5rem;
    }

    /* Typography - Section Titles */
    ._section_title {
        font-size: calc(48px * var(--theme_scale_mobile));
    }

    ._section_subtitle {
        font-size: calc(36px * var(--theme_scale_mobile));
    }

    ._special_section_title {
        font-size: calc(74px * var(--theme_scale_mobile));
    }

    ._home_text_paragraph {
        font-size: max(12px, calc(20px * 0.6));
        line-height: calc(30px * 0.6);
    }

    /* Product Elements */
    ._product_title {
        font-size: calc(20px * var(--theme_scale_mobile));
    }

    ._product_price {
        font-size: calc(24px * var(--theme_scale_mobile));
    }

    ._product_filter_item_label {
        font-size: calc(20px * var(--theme_scale_mobile));
    }

    ._product_card_image_wrapper {
        height: calc(380px * var(--theme_scale_mobile));
    }

    /* Best Seller Collection Images */
    ._collection_image_wrapper {
        margin-bottom: 1.5rem;
    }

    ._collection_image {
        max-width: 100%;
        height: auto;
        margin-bottom: 0;
    }

    /* Special Image Wrapper */
    ._special_image_wrapper {
        max-height: calc(500px * var(--theme_scale_mobile));
        padding: 0px calc(1rem * var(--theme_scale_mobile)) 0px 0.5rem;
    }

    ._special_image_wrapper img {
        height: calc(500px * var(--theme_scale_mobile));
    }

    /* Product Filter Wrapper */
    ._product_filter_wrapper {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    /* Product Cards - Mobile: 1 column */
    ._product_cards_container {
        justify-content: center;
        gap: 1rem;
    }

    ._product_card_wrapper {
        width: 100%;
        max-width: 100%;
    }

    /* Buttons - Mobile Adjustments */
    ._btn_primary {
        font-size: calc(18px * 0.7);
        padding: calc(13px * 0.7) calc(26px * 0.7);
    }

    ._btn_primary_sm {
        font-size: calc(16px * 0.7);
        padding: calc(10px * 0.7) calc(26px * 0.7);
    }

    /* Form Inputs - Mobile Adjustments (30% reduction) */
    ._form_input,
    ._form_select {
        padding: calc(12px * 0.7) calc(16px * 0.7);
        font-size: calc(16px * 0.7);
    }

    ._form_select {
        padding-right: calc(40px * 0.7);
        background-position: right calc(16px * 0.7) center;
    }

    /* Form Wrapper - Mobile Adjustments (50% padding reduction) */
    ._form_wrapper {
        padding: calc(var(--theme_form_padding) * 0.5);
    }
}