/* =====================================================================
   CHUM 2.0 PRODUCT DETAIL / COMPARISON PAGE
   PREMIUM ECOMMERCE LAYOUT
   APPLE LIQUID GLASS CONTROLS

   FILE:
   public/assets/css/product.css
   ===================================================================== */


/* =====================================================================
   PAGE
   ===================================================================== */

.chum-product-page {
    width:
        100%;

    min-height:
        100vh;

    padding:
        34px
        0
        90px;

    background:
        linear-gradient(
            180deg,
            #f8fafb 0%,
            #f3f6f8 100%
        );

    color:
        #101820;
}


/* =====================================================================
   CONTAINER
   ===================================================================== */

.chum-product-page-container {
    width:
        min(
            1760px,
            calc(100% - 64px)
        );

    margin:
        0
        auto;
}


/* =====================================================================
   BREADCRUMB
   ===================================================================== */

.product-breadcrumb {
    min-height:
        34px;

    margin-bottom:
        22px;

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        8px;

    color:
        #75818b;

    font-size:
        12px;

    font-weight:
        520;
}


.product-breadcrumb a,
.product-breadcrumb a:link,
.product-breadcrumb a:visited {
    color:
        #46525c !important;

    text-decoration:
        none !important;
}


.product-breadcrumb a:hover {
    color:
        #e84164 !important;
}


/* =====================================================================
   OVERVIEW
   ===================================================================== */

.product-overview {
    width:
        100%;

    display:
        grid;

    grid-template-columns:
        minmax(
            420px,
            0.95fr
        )
        minmax(
            520px,
            1.15fr
        )
        minmax(
            290px,
            0.62fr
        );

    gap:
        24px;

    align-items:
        stretch;
}


/* =====================================================================
   BASE PANELS
   ===================================================================== */

.product-gallery-panel,
.product-information-panel,
.product-price-insight {
    min-width:
        0;

    border:
        1px solid
        #e0e6ea;

    border-radius:
        22px;

    background:
        #ffffff;

    box-shadow:
        0
        8px
        26px
        rgba(
            19,
            32,
            42,
            0.055
        );
}


/* =====================================================================
   GALLERY
   ===================================================================== */

.product-gallery-panel {
    position:
        relative;

    min-height:
        570px;

    padding:
        42px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #f9fbfc
        );
}


.product-gallery-panel::after {
    content:
        "";

    position:
        absolute;

    left:
        20%;

    right:
        20%;

    bottom:
        45px;

    height:
        36px;

    border-radius:
        50%;

    background:
        radial-gradient(
            ellipse,
            rgba(
                14,
                27,
                37,
                0.09
            ),
            transparent
            72%
        );

    filter:
        blur(10px);

    pointer-events:
        none;
}


.product-gallery-panel > img {
    position:
        relative;

    z-index:
        2;

    width:
        100%;

    height:
        455px;

    object-fit:
        contain;

    mix-blend-mode:
        multiply;

    transition:
        transform
        260ms ease;
}


.product-gallery-panel:hover > img {
    transform:
        scale(1.018);
}


/* =====================================================================
   DEMO BADGE
   ===================================================================== */

.product-demo-badge {
    position:
        absolute;

    z-index:
        10;

    top:
        18px;

    left:
        18px;

    min-height:
        29px;

    padding:
        0
        11px;

    display:
        inline-flex;

    align-items:
        center;

    border:
        1px solid
        rgba(
            214,
            173,
            72,
            0.30
        );

    border-radius:
        9px;

    background:
        #fff8e8;

    color:
        #71581f;

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        0.055em;

    text-transform:
        uppercase;
}


/* =====================================================================
   EMPTY IMAGE
   ===================================================================== */

.product-gallery-empty {
    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    color:
        #7a8690;

    text-align:
        center;
}


.product-gallery-empty svg {
    width:
        105px;

    height:
        105px;

    color:
        #aeb8c0;
}


.product-gallery-empty strong {
    color:
        #46525c;

    font-size:
        15px;
}


.product-gallery-empty span {
    font-size:
        12px;
}


/* =====================================================================
   PRODUCT INFORMATION
   ===================================================================== */

.product-information-panel {
    padding:
        46px
        44px;

    display:
        flex;

    flex-direction:
        column;
}


/* =====================================================================
   BRAND
   ===================================================================== */

.product-brand {
    width:
        fit-content;

    min-height:
        27px;

    margin-bottom:
        13px;

    padding:
        0
        10px;

    display:
        inline-flex;

    align-items:
        center;

    border:
        1px solid
        rgba(
            232,
            65,
            100,
            0.14
        );

    border-radius:
        999px;

    background:
        #fff6f8;

    color:
        #e84164;

    font-size:
        10px;

    font-weight:
        850;

    letter-spacing:
        0.075em;

    text-transform:
        uppercase;
}


/* =====================================================================
   TITLE
   ===================================================================== */

.product-information-panel h1 {
    max-width:
        850px;

    margin:
        0;

    color:
        #0b1219;

    font-size:
        clamp(
            40px,
            3.25vw,
            58px
        );

    font-weight:
        830;

    line-height:
        1.025;

    letter-spacing:
        -0.052em;
}


.product-category {
    margin-top:
        15px;

    color:
        #6e7a84;

    font-size:
        13px;

    font-weight:
        550;
}


.product-description {
    max-width:
        780px;

    margin:
        24px
        0
        0;

    color:
        #4e5b66;

    font-size:
        14px;

    line-height:
        1.72;
}


/* =====================================================================
   BEST PRICE
   ===================================================================== */

.product-best-price {
    margin-top:
        34px;

    padding-top:
        28px;

    border-top:
        1px solid
        #e8ecef;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;
}


.product-best-price > span {
    color:
        #74808a;

    font-size:
        11px;

    font-weight:
        650;

    text-transform:
        uppercase;

    letter-spacing:
        0.035em;
}


.product-best-price strong {
    margin-top:
        6px;

    color:
        #091119;

    font-size:
        43px;

    font-weight:
        850;

    line-height:
        1;

    letter-spacing:
        -0.045em;
}


.product-best-price small {
    margin-top:
        7px;

    color:
        #56636d;

    font-size:
        12px;
}


.product-compare-summary {
    max-width:
        700px;

    margin-top:
        17px;

    color:
        #56636d;

    font-size:
        12px;

    line-height:
        1.55;
}


/* =====================================================================
   MAIN PRODUCT CTA
   RECTANGULAR LIQUID GLASS
   ===================================================================== */

.product-scroll-offers {
    position:
        relative;

    isolation:
        isolate;

    min-width:
        210px;

    height:
        49px;

    margin-top:
        24px;

    padding:
        0
        19px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        12px;

    overflow:
        hidden;

    border:
        1.5px solid
        rgba(
            255,
            255,
            255,
            0.98
        );

    border-radius:
        13px;

    background:
        rgba(
            255,
            255,
            255,
            0.07
        );

    -webkit-backdrop-filter:
        blur(24px)
        saturate(195%)
        brightness(1.08);

    backdrop-filter:
        blur(24px)
        saturate(195%)
        brightness(1.08);

    box-shadow:
        0
        0
        0
        1px
        rgba(
            36,
            51,
            62,
            0.14
        ),

        inset
        0
        1px
        0
        #ffffff,

        inset
        0
        -1px
        0
        rgba(
            47,
            63,
            74,
            0.10
        ),

        0
        10px
        22px
        rgba(
            17,
            31,
            41,
            0.11
        );

    color:
        #0e171f;

    cursor:
        pointer;

    font-size:
        12px;

    font-weight:
        800;

    transition:
        transform
        170ms ease,
        background
        170ms ease,
        box-shadow
        170ms ease;
}


.product-scroll-offers::before {
    content:
        "";

    position:
        absolute;

    top:
        1px;

    left:
        14px;

    right:
        14px;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #ffffff,
            transparent
        );
}


.product-scroll-offers:hover {
    transform:
        translateY(-2px);

    background:
        rgba(
            255,
            255,
            255,
            0.22
        );

    box-shadow:
        0
        0
        0
        1px
        rgba(
            36,
            51,
            62,
            0.16
        ),

        inset
        0
        1px
        0
        #ffffff,

        0
        14px
        28px
        rgba(
            17,
            31,
            41,
            0.14
        );
}


/* =====================================================================
   PRICE INSIGHT
   ===================================================================== */

.product-price-insight {
    align-self:
        start;

    padding:
        29px;

    background:
        #ffffff;
}


.product-price-insight h2 {
    margin:
        0
        0
        22px;

    color:
        #111920;

    font-size:
        21px;

    font-weight:
        790;

    letter-spacing:
        -0.025em;
}


.price-insight-row {
    min-height:
        51px;

    padding:
        12px
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        14px;

    border-bottom:
        1px solid
        #e8ecef;
}


.price-insight-row span {
    color:
        #74808a;

    font-size:
        11px;
}


.price-insight-row strong {
    color:
        #151e26;

    font-size:
        14px;

    font-weight:
        760;

    white-space:
        nowrap;
}


.price-insight-row:first-of-type strong {
    color:
        #11805a;
}


/* =====================================================================
   PRICE NOTE
   ===================================================================== */

.product-price-note {
    margin-top:
        18px;

    padding:
        13px;

    border:
        1px solid
        #efdfb6;

    border-radius:
        10px;

    background:
        #fff9ea;

    color:
        #77613a;

    font-size:
        10px;

    line-height:
        1.55;
}


/* =====================================================================
   LOWER SECTIONS
   ===================================================================== */

.product-specifications,
.retailer-comparison-section,
.related-products-section {
    width:
        100%;

    margin-top:
        30px;

    padding:
        34px;

    border:
        1px solid
        #e0e6ea;

    border-radius:
        22px;

    background:
        #ffffff;

    box-shadow:
        0
        8px
        26px
        rgba(
            19,
            32,
            42,
            0.05
        );
}


/* hide empty specification box */

.product-specifications:not(
    :has(.product-spec-item)
) {
    display:
        none;
}


/* hide empty related area */

.related-products-section:not(
    :has(.related-product-card)
) {
    display:
        none;
}


/* =====================================================================
   SECTION TITLE
   ===================================================================== */

.product-section-title > span {
    display:
        inline-flex;

    align-items:
        center;

    min-height:
        25px;

    margin-bottom:
        8px;

    padding:
        0
        9px;

    border:
        1px solid
        rgba(
            232,
            65,
            100,
            0.14
        );

    border-radius:
        999px;

    background:
        #fff6f8;

    color:
        #e84164;

    font-size:
        9px;

    font-weight:
        850;

    letter-spacing:
        0.09em;

    text-transform:
        uppercase;
}


.product-section-title h2 {
    margin:
        0;

    color:
        #0d151c;

    font-size:
        clamp(
            29px,
            2.4vw,
            38px
        );

    font-weight:
        810;

    line-height:
        1.08;

    letter-spacing:
        -0.04em;
}


.product-section-title p {
    max-width:
        820px;

    margin:
        10px
        0
        0;

    color:
        #596672;

    font-size:
        12px;

    line-height:
        1.6;
}


/* =====================================================================
   SPECS
   ===================================================================== */

.product-spec-grid {
    margin-top:
        25px;

    display:
        grid;

    grid-template-columns:
        repeat(
            5,
            minmax(
                0,
                1fr
            )
        );

    gap:
        12px;
}


.product-spec-item {
    min-height:
        105px;

    padding:
        19px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    gap:
        8px;

    border:
        1px solid
        #e3e8ec;

    border-radius:
        14px;

    background:
        #f9fbfc;
}


.product-spec-item span {
    color:
        #77838d;

    font-size:
        10px;
}


.product-spec-item strong {
    color:
        #1a242d;

    font-size:
        14px;

    font-weight:
        750;
}


/* =====================================================================
   RETAILER LIST
   ===================================================================== */

.retailer-offer-list {
    margin-top:
        28px;

    display:
        flex;

    flex-direction:
        column;

    gap:
        12px;
}


/* =====================================================================
   RETAILER OFFER ROW
   AMAZON-LIKE COMMERCE HIERARCHY
   ===================================================================== */

.retailer-offer-card {
    position:
        relative;

    min-height:
        112px;

    padding:
        19px
        21px;

    display:
        grid;

    grid-template-columns:
        minmax(
            280px,
            1.45fr
        )
        minmax(
            190px,
            0.90fr
        )
        minmax(
            160px,
            0.65fr
        )
        minmax(
            170px,
            0.55fr
        );

    align-items:
        center;

    gap:
        24px;

    border:
        1px solid
        #dee5e9;

    border-radius:
        16px;

    background:
        #ffffff;

    box-shadow:
        0
        4px
        14px
        rgba(
            18,
            31,
            41,
            0.035
        );

    transition:
        transform
        180ms ease,
        border-color
        180ms ease,
        box-shadow
        180ms ease;
}


.retailer-offer-card:hover {
    transform:
        translateY(-3px);

    border-color:
        #ccd6dc;

    box-shadow:
        0
        13px
        28px
        rgba(
            18,
            31,
            41,
            0.08
        );
}


/* =====================================================================
   BEST OFFER
   ===================================================================== */

.retailer-offer-card.is-best-offer {
    border-color:
        rgba(
            16,
            145,
            94,
            0.30
        );

    background:
        linear-gradient(
            90deg,
            #f0fbf6 0%,
            #ffffff 38%
        );

    box-shadow:
        inset
        3px
        0
        0
        #159b67,

        0
        5px
        16px
        rgba(
            16,
            145,
            94,
            0.06
        );
}


/* =====================================================================
   RETAILER IDENTITY
   ===================================================================== */

.retailer-identity {
    min-width:
        0;

    display:
        flex;

    align-items:
        center;

    gap:
        15px;
}


.retailer-avatar {
    width:
        58px;

    height:
        58px;

    flex-shrink:
        0;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        #e0e6ea;

    border-radius:
        12px;

    background:
        #ffffff;

    color:
        #1b1c64;

    font-size:
        19px;

    font-weight:
        820;
}


.retailer-identity > div:last-child {
    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    gap:
        5px;
}


.retailer-identity strong {
    overflow:
        hidden;

    color:
        #17212a;

    font-size:
        15px;

    font-weight:
        780;

    white-space:
        nowrap;

    text-overflow:
        ellipsis;
}


.retailer-identity span {
    color:
        #11805a;

    font-size:
        10px;

    font-weight:
        700;
}


/* =====================================================================
   RETAILER LOGO
   ===================================================================== */

.retailer-logo-box {
    width:
        62px;

    height:
        62px;

    flex-shrink:
        0;

    padding:
        7px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

    border:
        1px solid
        #e0e6ea;

    border-radius:
        12px;

    background:
        #ffffff;
}


.retailer-logo-box img {
    width:
        100%;

    height:
        100%;

    object-fit:
        contain;
}


/* =====================================================================
   LIVE STATUS
   ===================================================================== */

.retailer-live-status {
    font-size:
        10px !important;

    font-weight:
        700;
}


.retailer-live-status.is-live {
    color:
        #11805a !important;
}


.retailer-live-status.is-unavailable {
    color:
        #7d8993 !important;
}


/* =====================================================================
   SOURCE INFO
   ===================================================================== */

.retailer-shipping,
.retailer-source-information {
    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    gap:
        5px;
}


.retailer-shipping span,
.retailer-source-information span {
    color:
        #7a8690;

    font-size:
        10px;
}


.retailer-shipping strong,
.retailer-source-information strong {
    overflow:
        hidden;

    max-width:
        100%;

    color:
        #37434e;

    font-size:
        11px;

    font-weight:
        650;

    white-space:
        nowrap;

    text-overflow:
        ellipsis;
}


/* =====================================================================
   RETAILER PRICE
   ===================================================================== */

.retailer-price {
    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;
}


.retailer-price del {
    margin-bottom:
        3px;

    color:
        #8b959e;

    font-size:
        10px;
}


.retailer-price strong {
    color:
        #091119;

    font-size:
        24px;

    font-weight:
        850;

    line-height:
        1.1;

    letter-spacing:
        -0.03em;

    white-space:
        nowrap;
}


.retailer-price > span {
    margin-top:
        4px;

    color:
        #11805a;

    font-size:
        9px;

    font-weight:
        760;
}


/* =====================================================================
   RETAILER ACTION
   ===================================================================== */

.retailer-action {
    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-end;

    justify-content:
        center;

    gap:
        7px;
}


.best-offer-label {
    color:
        #11805a;

    font-size:
        8px;

    font-weight:
        850;

    letter-spacing:
        0.05em;

    text-transform:
        uppercase;
}


/* =====================================================================
   VIEW PRODUCT
   RECTANGULAR LIQUID GLASS
   ===================================================================== */

.view-deal-button,
.view-deal-button:link,
.view-deal-button:visited {
    position:
        relative;

    isolation:
        isolate;

    min-width:
        155px;

    height:
        45px;

    padding:
        0
        16px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        9px;

    overflow:
        hidden;

    border:
        1.5px solid
        rgba(
            255,
            255,
            255,
            0.98
        );

    border-radius:
        12px;

    background:
        rgba(
            255,
            255,
            255,
            0.07
        );

    -webkit-backdrop-filter:
        blur(22px)
        saturate(190%)
        brightness(1.08);

    backdrop-filter:
        blur(22px)
        saturate(190%)
        brightness(1.08);

    box-shadow:
        0
        0
        0
        1px
        rgba(
            37,
            52,
            63,
            0.13
        ),

        inset
        0
        1px
        0
        #ffffff,

        inset
        0
        -1px
        0
        rgba(
            47,
            63,
            74,
            0.10
        ),

        0
        8px
        18px
        rgba(
            18,
            31,
            41,
            0.10
        );

    color:
        #101820 !important;

    font-size:
        11px;

    font-weight:
        790;

    text-decoration:
        none !important;

    transition:
        transform
        160ms ease,
        background
        160ms ease,
        box-shadow
        160ms ease;
}


.view-deal-button::before {
    content:
        "";

    position:
        absolute;

    top:
        1px;

    left:
        11px;

    right:
        11px;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #ffffff,
            transparent
        );

    pointer-events:
        none;
}


.view-deal-button svg {
    width:
        14px;

    height:
        14px;

    transition:
        transform
        160ms ease;
}


.view-deal-button:hover {
    transform:
        translateY(-2px);

    background:
        rgba(
            255,
            255,
            255,
            0.22
        );

    box-shadow:
        0
        0
        0
        1px
        rgba(
            37,
            52,
            63,
            0.16
        ),

        inset
        0
        1px
        0
        #ffffff,

        0
        12px
        24px
        rgba(
            18,
            31,
            41,
            0.14
        );
}


.view-deal-button:hover svg {
    transform:
        translateX(3px);
}


/* =====================================================================
   NO PRICE / PENDING
   ===================================================================== */

.retailer-no-price {
    color:
        #6f7b85 !important;

    font-size:
        13px !important;
}


.retailer-pending {
    min-width:
        155px;

    padding:
        12px
        14px;

    border:
        1px solid
        #dde4e8;

    border-radius:
        11px;

    background:
        #f6f8f9;

    color:
        #6c7882;

    font-size:
        10px;

    font-weight:
        650;

    text-align:
        center;
}


/* =====================================================================
   RELATED PRODUCTS
   ===================================================================== */

.related-product-grid {
    margin-top:
        25px;

    display:
        grid;

    grid-template-columns:
        repeat(
            4,
            minmax(
                0,
                1fr
            )
        );

    gap:
        15px;
}


.related-product-card {
    min-height:
        125px;

    padding:
        14px;

    display:
        flex;

    align-items:
        center;

    gap:
        15px;

    border:
        1px solid
        #e0e6ea;

    border-radius:
        14px;

    background:
        #ffffff;

    text-decoration:
        none;

    transition:
        transform
        170ms ease,
        border-color
        170ms ease,
        box-shadow
        170ms ease;
}


.related-product-card:hover {
    transform:
        translateY(-3px);

    border-color:
        #ced8de;

    box-shadow:
        0
        11px
        25px
        rgba(
            19,
            32,
            42,
            0.08
        );
}


.related-product-image {
    width:
        82px;

    height:
        82px;

    flex-shrink:
        0;

    display:
        grid;

    place-items:
        center;

    overflow:
        hidden;

    border:
        1px solid
        #e1e7eb;

    border-radius:
        11px;

    background:
        #f8fafb;

    color:
        #1b1c64;

    font-size:
        9px;

    font-weight:
        800;

    text-transform:
        uppercase;
}


.related-product-card > div:last-child {
    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    gap:
        8px;
}


.related-product-card strong {
    color:
        #202a33;

    font-size:
        13px;

    font-weight:
        730;

    line-height:
        1.45;
}


.related-product-card > div:last-child span {
    color:
        #e84164;

    font-size:
        10px;

    font-weight:
        750;
}


/* =====================================================================
   ERROR PAGE
   ===================================================================== */

.chum-error-page {
    min-height:
        620px;

    padding:
        80px
        20px;

    display:
        grid;

    place-items:
        center;

    text-align:
        center;
}


.chum-error-page span {
    color:
        #e84164;

    font-size:
        13px;

    font-weight:
        850;
}


.chum-error-page h1 {
    margin:
        10px
        0;

    color:
        #0d151c;

    font-size:
        40px;
}


.chum-error-page p {
    color:
        #5c6974;
}


.chum-error-page a {
    min-height:
        45px;

    margin-top:
        20px;

    padding:
        0
        18px;

    display:
        inline-flex;

    align-items:
        center;

    border:
        1px solid
        #dce3e8;

    border-radius:
        11px;

    background:
        #ffffff;

    color:
        #17212a;

    text-decoration:
        none;
}


/* =====================================================================
   LARGE LAPTOP
   ===================================================================== */

@media (max-width: 1450px) {

    .chum-product-page-container {
        width:
            calc(
                100% - 44px
            );
    }


    .product-overview {
        grid-template-columns:
            minmax(
                360px,
                0.9fr
            )
            minmax(
                450px,
                1.15fr
            )
            minmax(
                250px,
                0.62fr
            );

        gap:
            20px;
    }


    .product-gallery-panel {
        min-height:
            520px;
    }


    .product-gallery-panel > img {
        height:
            415px;
    }


    .product-information-panel {
        padding:
            38px
            34px;
    }

}


/* =====================================================================
   LAPTOP
   ===================================================================== */

@media (max-width: 1180px) {

    .chum-product-page-container {
        width:
            calc(
                100% - 36px
            );
    }


    .product-overview {
        grid-template-columns:
            minmax(
                320px,
                0.9fr
            )
            minmax(
                420px,
                1.1fr
            );
    }


    .product-price-insight {
        grid-column:
            1 / -1;
    }


    .product-spec-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(
                    0,
                    1fr
                )
            );
    }


    .retailer-offer-card {
        grid-template-columns:
            minmax(
                240px,
                1.2fr
            )
            minmax(
                150px,
                0.8fr
            )
            minmax(
                140px,
                0.65fr
            )
            minmax(
                150px,
                0.55fr
            );

        gap:
            17px;
    }

}


/* =====================================================================
   TABLET
   ===================================================================== */

@media (max-width: 850px) {

    .chum-product-page {
        padding-top:
            20px;
    }


    .chum-product-page-container {
        width:
            calc(
                100% - 24px
            );
    }


    .product-overview {
        display:
            block;
    }


    .product-gallery-panel,
    .product-information-panel,
    .product-price-insight {
        margin-bottom:
            15px;
    }


    .product-gallery-panel {
        min-height:
            410px;

        padding:
            25px;
    }


    .product-gallery-panel > img {
        height:
            340px;
    }


    .product-information-panel {
        padding:
            30px
            25px;
    }


    .product-information-panel h1 {
        font-size:
            36px;
    }


    .product-specifications,
    .retailer-comparison-section,
    .related-products-section {
        padding:
            25px
            20px;
    }


    .product-spec-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );
    }


    .retailer-offer-card {
        grid-template-columns:
            1fr
            auto;

        gap:
            14px
            20px;
    }


    .retailer-source-information,
    .retailer-shipping {
        grid-column:
            1;
    }


    .retailer-price {
        grid-column:
            2;

        grid-row:
            1;
    }


    .retailer-action {
        grid-column:
            2;
    }


    .related-product-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );
    }

}


/* =====================================================================
   MOBILE
   ===================================================================== */

@media (max-width: 575px) {

    .chum-product-page {
        padding:
            16px
            0
            45px;
    }


    .chum-product-page-container {
        width:
            100%;

        padding:
            0
            12px;
    }


    .product-breadcrumb {
        margin-bottom:
            13px;

        font-size:
            10px;
    }


    .product-gallery-panel {
        min-height:
            330px;

        padding:
            18px;

        border-radius:
            17px;
    }


    .product-gallery-panel > img {
        height:
            285px;
    }


    .product-information-panel {
        padding:
            24px
            20px;

        border-radius:
            17px;
    }


    .product-information-panel h1 {
        font-size:
            31px;
    }


    .product-description {
        font-size:
            12px;
    }


    .product-best-price strong {
        font-size:
            36px;
    }


    .product-scroll-offers {
        width:
            100%;
    }


    .product-price-insight {
        padding:
            20px;

        border-radius:
            17px;
    }


    .product-specifications,
    .retailer-comparison-section,
    .related-products-section {
        padding:
            21px
            16px;

        border-radius:
            17px;
    }


    .product-section-title h2 {
        font-size:
            28px;
    }


    .product-spec-grid {
        grid-template-columns:
            1fr;
    }


    .retailer-offer-card {
        min-height:
            0;

        padding:
            16px;

        display:
            flex;

        flex-direction:
            column;

        align-items:
            stretch;

        gap:
            13px;

        border-radius:
            14px;
    }


    .retailer-price {
        padding-top:
            11px;

        border-top:
            1px solid
            #e8ecef;
    }


    .retailer-action {
        width:
            100%;

        align-items:
            stretch;
    }


    .best-offer-label {
        text-align:
            left;
    }


    .view-deal-button {
        width:
            100%;

        height:
            46px;
    }


    .related-product-grid {
        grid-template-columns:
            1fr;
    }

}


/* =====================================================================
   REDUCED MOTION
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {

    .product-gallery-panel > img,
    .product-scroll-offers,
    .retailer-offer-card,
    .view-deal-button,
    .related-product-card {
        transition:
            none !important;
    }

}