/*==================================================
HOMEPAGE COLLECTIONS
==================================================*/
.mx-hpc{
    padding:20px 0;
    background:#ffffff!important;
}

/* CONTAINER */
.mx-hpc .container{
    max-width:1320px;
    margin:0 auto;
    padding-left:24px;
    padding-right:24px;
}
/*==================================================
BANNER
==================================================*/
.mx-hpc-banner{
    position:relative;
    display:block;
    width:100%;
    height:80vh;
    min-height:620px;
    overflow:hidden;
    border-radius:30px;
    text-decoration:none;
    margin-bottom:90px;
}
.mx-hpc-banner img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.8s ease;
}
.mx-hpc-banner:hover img{
    transform:scale(1.06);
}
/* OVERLAY */
.mx-hpc-banner-overlay{
    position:absolute;
    inset:0;
    background:
    linear-gradient(
        to top,
        rgba(0,0,0,.75) 0%,
        rgba(0,0,0,.35) 40%,
        rgba(0,0,0,.08) 100%
    );
}
/*=================================================
BANNER CONTENT
==================================================*/
.mx-hpc-banner-content{
    position:absolute;
    left:70px;
    bottom:70px;
    z-index:5;
    max-width:520px;
    color:#fff;
}
.mx-hpc-label{
    display:inline-block;
    margin-bottom:18px;
    color:#ffd700;
    font-size:14px;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
}
.mx-hpc-banner-content h2{
    margin:0 0 18px;
    font-size:64px;
    font-weight:800;
    line-height:1.05;
    color:#fff;
}
.mx-hpc-banner-content p{
    margin:0 0 34px;
    font-size:20px;
    line-height:1.8;
    color:rgba(255,255,255,.90);
}
/* BUTTON */
.mx-hpc-btn{
    display:inline-flex;
    align-items:center;
    gap:12px;
    padding:16px 34px;
    border-radius:999px;
    background:#ffd700;
    color:#111;
    font-size:16px;
    font-weight:700;
    transition:.35s;
}
.mx-hpc-btn i{
    font-size:18px;
    transition:.35s;
}
.mx-hpc-banner:hover .mx-hpc-btn{
    background:#fff;
}
.mx-hpc-banner:hover .mx-hpc-btn i{
    transform:translateX(4px);
}
/*==================================================
SECTION HEADER
==================================================*/
.mx-hpc-heading{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:40px;
}
.mx-hpc-heading h2{
    margin:0;
    font-size:48px;
    font-weight:800;
    color:#111;
    text-transform:uppercase;
}
.mx-hpc-heading a{
    color:#111;
    font-size:18px;
    font-weight:700;
    text-decoration:none;
    position:relative;
}
.mx-hpc-heading a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-4px;
    width:100%;
    height:2px;
    background:#111;
}
/*==================================================
GRID
==================================================*/
.mx-hpc-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:28px;
}
/*==================================================
CARD
==================================================*/
.mx-hpc-card{
    position:relative;
    display:block;
    width:100%;
    height:65vh;
    min-height:560px;
    overflow:hidden;
    border-radius:26px;
    text-decoration:none;
    background:#f7f7f7;
    box-shadow:
    0 15px 45px rgba(0,0,0,.06);
}
.mx-hpc-card img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    transition:transform .8s ease;
}
.mx-hpc-card:hover img{
    transform:scale(1.06);
}
/*==================================================
OVERLAY
==================================================*/
.mx-hpc-overlay{
    position:absolute;
    inset:0;
    background:
    linear-gradient(
        to top,
        rgba(0,0,0,.78) 0%,
        rgba(0,0,0,.42) 34%,
        rgba(0,0,0,.08) 70%,
        transparent 100%
    );
}
/*=================================================
CONTENT
==================================================*/
.mx-hpc-info{
    position:absolute;
    left:34px;
    right:34px;
    bottom:34px;
    z-index:5;
    color:#fff;
}
.mx-hpc-small{
    display:inline-block;
    margin-bottom:12px;
    color:#ffd700;
    font-size:13px;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
}
.mx-hpc-info h3{
    margin:0 0 12px;
    font-size:42px;
    font-weight:800;
    line-height:1.08;
    color:#fff;
}
.mx-hpc-info p{
    margin:0 0 28px;
    color:rgba(255,255,255,.90);
    font-size:18px;
    line-height:1.7;
}
/*=================================================
BOTTOM
==================================================*/
.mx-hpc-bottom{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}
.mx-hpc-bottom span:first-child{
    font-size:22px;
    font-weight:700;
    color:#fff;
}
/*==================================================
ARROW
==================================================*/
.mx-hpc-arrow{
    width:58px;
    height:58px;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.55);
    color:#fff;
    font-size:22px;
    transition:.35s ease;
}
.mx-hpc-card:hover .mx-hpc-arrow{
    background:#ffd700;
    border-color:#ffd700;
    color:#111;
    transform:translateX(5px);
}
/*==================================================
CARD HOVER
==================================================*/
.mx-hpc-card::after{
    content:"";
    position:absolute;
    inset:0;
    border:1px solid rgba(255,255,255,.08);
    border-radius:26px;
    pointer-events:none;
}
.mx-hpc-card:hover{
    transform:translateY(-6px);
    box-shadow:
    0 30px 70px rgba(0,0,0,.14);
}
/*==================================================
HOMEPAGE COLLECTION
MOBILE
==================================================*/
@media (max-width:767px){
    .mx-hpc{
        padding:20px 0;
    }
    .mx-hpc .container{
        padding-left:16px;
        padding-right:16px;
    }
    /*==========================
      HERO BANNER
    ==========================*/
    .mx-hpc-banner{
        height:260px !important;
        min-height:260px;
        border-radius:18px;
        margin-bottom:34px;
    }
    .mx-hpc-banner img{
        height:100%;
        width:100%;
        object-fit:cover;
    }
    .mx-hpc-banner-content{
        left:18px;
        right:18px;
        bottom:18px;
        max-width:210px;
        align-items:flex-start;
        text-align:left;
    }
    .mx-hpc-label{
        font-size:10px;
        letter-spacing:1px;
        margin-bottom:8px;
    }
    .mx-hpc-banner-content h2{
        font-size:22px;
        line-height:1.05;
        margin-bottom:8px;
    }
    .mx-hpc-banner-content p{
        font-size:12px;
        line-height:1.5;
        margin-bottom:14px;
    }
    .mx-hpc-btn{
        padding:10px 18px;
        font-size:13px;
        border-radius:40px;
    }
    /*==========================
      HEADING
    ==========================*/
    .mx-hpc-heading{
        margin-bottom:18px;
        align-items:flex-end;
    }
    .mx-hpc-heading h2{
        width:auto;
        font-size:20px;
        line-height:1.1;
    }
    .mx-hpc-heading a{
        font-size:13px;
    }
    /*==========================
      GRID
    ==========================*/
    .mx-hpc-grid{
        grid-template-columns:1fr;
        gap:16px;
    }
    /*==========================
      CARD
    ==========================*/
    .mx-hpc-card{
        height:260px !important;
        min-height:260px;

        border-radius:18px;
    }
    .mx-hpc-card img{
        width:100%;
        height:100%;
        object-fit:cover;

    }
    .mx-hpc-overlay{
        background:linear-gradient(
            to top,
            rgba(0,0,0,.88),
            rgba(0,0,0,.20)
        );
    }
    .mx-hpc-info{
        left:18px;
        right:18px;
        bottom:18px;
        padding:0;
        text-align:left;
        align-items:flex-start;
    }
    .mx-hpc-small{
        font-size:10px;
        letter-spacing:1px;
        margin-bottom:6px;
    }
    .mx-hpc-info h3{
        font-size:18px;
        line-height:1.1;
        margin-bottom:8px;
    }
    .mx-hpc-info p{
        max-width:200px;
        font-size:12px;
        line-height:1.5;
        margin-bottom:14px;
    }
    .mx-hpc-bottom{
        justify-content:flex-start;
        gap:12px;
    }
    .mx-hpc-bottom span:first-child{
        font-size:14px;
        font-weight:700;
    }
    .mx-hpc-arrow{
        width:34px;
        height:34px;
        font-size:13px;
    }
}

/* ==================================================
   COLLECTIONS — SHARED CSS  (STICKY-STORY BUILD)
   Files: apple-collection.php / samsung-collection.php / sony-collection.php ================== */

html{
    overflow-x:clip;
}
body{
    overflow-x:clip;
}
.mx-col-page,
.mx-col-page *,
.mx-col-page *::before,
.mx-col-page *::after{
    box-sizing:border-box; 
}
.mx-col-page{
    width:100%;
    max-width:100vw;
    overflow-x:clip;
    position:relative;
}

/* ===== CURTAIN REVEAL ===== */
.mx-col-curtain{
    position:fixed;
    inset:0;
    z-index:99999;
    display:flex;
    pointer-events:none;
    overflow:hidden; 
}
.mx-col-curtain-l,
.mx-col-curtain-r{
    width:50%;
    height:100%;
    background:#0a0a0a;
    transition:transform .95s cubic-bezier(.77,0,.18,1);
    will-change:transform;
}
.mx-col-curtain-l::after{
    content:'';
    position:absolute;
    right:0;
    top:50%;
    transform:translateY(-50%);
    width:3px;
    height:60px;
    background:#ffd700;
    border-radius:2px;
    animation:mxCurtainLine .6s ease .15s both;
}
@keyframes mxCurtainLine{
    from{ height:0; opacity:0; }
    to{ height:60px; opacity:1; }
}
.mx-col-curtain.open .mx-col-curtain-l{ transform:translateX(-100%); }
.mx-col-curtain.open .mx-col-curtain-r{ transform:translateX(100%); }
.mx-col-curtain.done{ display:none; }

/* ===== PAGE WRAPPER ===== */
.mx-col-page{
    font-family:'Manrope','Segoe UI',system-ui,-apple-system,Arial,sans-serif;
    background:#fff;
}

/* ===== HERO ===== */
.mx-col-page .mx-col-hero{
    position:relative;
    width:100%;
    height:100vh;
    min-height:560px;
    overflow:hidden;
    background:#0a0a0a;
    cursor:none;
}
.mx-col-page .mx-col-hero-media{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    display:block;
    transform:scale(1.08) translateZ(0);
    transition:transform 1.2s cubic-bezier(.22,1,.36,1);
    backface-visibility:hidden;
}
.mx-col-page .mx-col-hero.revealed .mx-col-hero-media{
    transform:scale(1) translateZ(0);
}
.mx-col-page .mx-col-hero-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(
        160deg,
        rgba(0,0,0,.1) 0%,
        rgba(0,0,0,.5) 50%,
        rgba(0,0,0,.9) 100%
    );
    z-index:1;
}
/* CURSOR LENS */
.mx-col-page .mx-col-lens{
    position:absolute;
    inset:0;
    z-index:2;
    pointer-events:none;
    background:radial-gradient(circle 220px at -500px -500px, rgba(255,255,255,.14) 0%, transparent 70%);
    will-change:background;
}
/* HERO CONTENT */
.mx-col-page .mx-col-hero-content{
    position:absolute;
    bottom:90px;
    left:0;
    right:0;
    z-index:3;
    padding:0 50px;
    max-width:1320px;
    margin:0 auto;
    box-sizing:border-box;
    clip-path:polygon(0 100%,100% 100%,100% 100%,0 100%);
    transition:clip-path .9s cubic-bezier(.22,1,.36,1) .2s, opacity .5s ease .2s;
    opacity:0;
}
.mx-col-page .mx-col-hero.revealed .mx-col-hero-content{
    clip-path:polygon(0 0,100% 0,100% 100%,0 100%);
    opacity:1;
}
.mx-col-page .mx-col-hero-tag{
    display:inline-block;
    color:#ffd700;
    font-size:12px;
    font-weight:700;
    letter-spacing:4px;
    text-transform:uppercase;
    margin-bottom:18px;
    opacity:.9;
}
.mx-col-page .mx-col-hero-title{
    font-size:76px;
    font-weight:800;
    color:#fff;
    line-height:1.02;
    margin:0;
    max-width:760px;
    word-break:break-word;
}

/* ==================================================
   DATA-REVEAL BASE
================================================== */
[data-reveal]{
    opacity:0;
    transform:translateY(40px);
    transition:opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1);
    will-change:opacity, transform;
}
[data-reveal].visible{
    opacity:1;
    transform:translateY(0);
}

/* ===== INTRO ===== */
.mx-col-page .mx-col-intro{
    position:relative;
    padding:120px 0 110px;
    background:#fff;
    overflow:hidden;
    border-bottom:1px solid #f0f0f0;
}
.mx-col-page .mx-col-container{
    max-width:1320px;
    margin:0 auto;
    padding:0 50px;
    box-sizing:border-box;
    position:relative;
}
.mx-col-page .mx-col-intro-inner{
    display:grid;
    grid-template-columns:55% 45%;
    align-items:center;
    gap:60px;
}
/* Watermark number */
.mx-col-page .mx-col-intro-left{
    position:relative;
}
.mx-col-page .mx-col-intro-num{
    position:absolute;
    top:-30px;
    left:-10px;
    font-size:220px;
    font-weight:900;
    line-height:1;
    color:#f0f0f0;
    pointer-events:none;
    user-select:none;
    z-index:0;
    letter-spacing:-10px;
}
.mx-col-page .mx-col-intro-heading{
    position:relative;
    z-index:1;
    font-size:52px;
    font-weight:900;
    line-height:1.05;
    color:#0a0a0a;
    margin:0;
    letter-spacing:-1.5px;
    border-bottom:4px solid #ffd700;
    display:inline-block;
    padding-bottom:14px;
}
/* Right side */
.mx-col-page .mx-col-intro-right{
    position:relative;
}
.mx-col-page .mx-col-intro-orb{
    position:absolute;
    right:-60px;
    top:50%;
    transform:translateY(-50%);
    width:360px;
    height:360px;
    border-radius:50%;
    background:radial-gradient(
        circle,
        rgba(255,215,0,.22) 0%,
        rgba(255,215,0,.06) 55%,
        transparent 75%
    );
    pointer-events:none;
    z-index:0;
    animation:mxOrbFloat 6s ease-in-out infinite;
}
@keyframes mxOrbFloat{
    0%,100%{ transform:translateY(-50%) scale(1); }
    50%{ transform:translateY(calc(-50% - 15px)) scale(1.04); }
}
.mx-col-page .mx-col-intro-desc{
    position:relative;
    z-index:1;
    font-size:18px;
    line-height:1.85;
    color:#555;
    margin:0 0 28px;
}
.mx-col-page .mx-col-intro-pill{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:#0a0a0a;
    color:#ffd700;
    font-size:12px;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
    padding:10px 22px;
    border-radius:999px;
}
.mx-col-page .mx-col-intro-pill::before{
    content:'';
    width:6px;
    height:6px;
    border-radius:50%;
    background:#ffd700;
    animation:mxDotPulse 1.5s ease infinite;
    flex-shrink:0;
}
@keyframes mxDotPulse{
    0%,100%{ transform:scale(1); opacity:1; box-shadow:0 0 0 0 rgba(255,215,0,.5); }
    50%{ transform:scale(1.2); opacity:.8; box-shadow:0 0 0 12px rgba(255,215,0,0); }
}

/* ==================================================
   STORY — sticky left / vertical scroll right
================================================== */
.mx-col-page .mx-col-story{
    position:relative;
    background:#0a0a0a;
}
.mx-col-page .mx-col-story-inner{
    display:grid;
    grid-template-columns:40% 60%;
    align-items:start;
}

.mx-col-page .mx-col-story-left{
    position:sticky;
    top:0;
    height:100vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:60px 70px;
    box-sizing:border-box;
    background:
        radial-gradient(circle at 25% 20%, rgba(255,215,0,.12) 0%, transparent 55%),
        linear-gradient(160deg,#141414 0%,#0a0a0a 55%,#050505 100%);
}
.mx-col-page .mx-col-story-tag{
    display:inline-block;
    font-size:11px;
    font-weight:700;
    letter-spacing:4px;
    text-transform:uppercase;
    color:#ffd700;
    margin-bottom:24px;
}
.mx-col-page .mx-col-story-quote{
    font-size:32px;
    font-weight:700;
    line-height:1.5;
    color:#fff;
    margin:0 0 32px;
    padding:0;
    border:none;
    max-width:420px;
}
.mx-col-page .mx-col-story-accent{
    width:44px;
    height:3px;
    background:#ffd700;
    border-radius:2px;
}

.mx-col-page .mx-col-story-right{
    display:flex;
    flex-direction:column;
}
.mx-col-page .mx-col-story-media{
    width:100%;
    height:100vh;
    background:#111;
    overflow:hidden;
}
.mx-col-page .mx-col-story-media img,
.mx-col-page .mx-col-story-media video{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

@media(max-width:991px){
    .mx-col-page .mx-col-story-inner{
        grid-template-columns:1fr;
    }
    .mx-col-page .mx-col-story-left{
        position:relative;
        height:auto;
        padding:50px 24px;
    }
    .mx-col-page .mx-col-story-quote{
        font-size:22px;
        max-width:none;
    }

    .mx-col-page .mx-col-story-right{
        flex-direction:row;
        gap:14px;
        overflow-x:auto;
        scroll-snap-type:x mandatory;
        scroll-padding-left:24px;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
        padding:0 24px 28px;
    }
    .mx-col-page .mx-col-story-right::-webkit-scrollbar{
        display:none;
    }
    .mx-col-page .mx-col-story-media{
        flex:0 0 82%;
        width:82%;
        height:46vh;
        min-height:300px;
        border-radius:14px;
        scroll-snap-align:center;
    }
}

/* ===== PRODUCTS ===== */
.mx-col-page .mx-col-products{
    padding:100px 0 110px;
    background:#0c0c0c;
}
.mx-col-page .mx-col-products-head{
    margin-bottom:54px;
}
.mx-col-page .mx-col-products-heading{
    font-size:36px;
    font-weight:900;
    color:#fff;
    letter-spacing:-.5px;
    margin:0;
    display:inline-block;
    padding-bottom:18px;
    border-bottom:3px solid #ffd700;
}
.mx-col-page .mx-col-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:22px;
}
/* Card stagger */
.mx-col-page .mx-col-card{
    position:relative;
    display:flex;
    flex-direction:column;
    text-decoration:none;
    border-radius:20px;
    overflow:hidden;
    background:#fff;
    border:1px solid rgba(255,255,255,.06);
    transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease, opacity .5s ease;
    opacity:0;
    transform:translateY(24px);
}
.mx-col-page .mx-col-card.card-visible{
    opacity:1;
    transform:translateY(0);
}
.mx-col-page .mx-col-card:hover{
    transform:translateY(-6px);
    box-shadow:0 20px 40px rgba(0,0,0,.3), 0 0 0 1px rgba(255,215,0,.4);
    border-color:rgba(255,215,0,.4);
}
.mx-col-page .mx-col-card-img{
    width:100%;
    aspect-ratio:1/1;
    overflow:hidden;
    background:#f5f5f5;
}
.mx-col-page .mx-col-img-main{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:opacity .18s ease, transform .5s ease;
}
.mx-col-page .mx-col-card:hover .mx-col-img-main{
    transform:scale(1.05);
}
.mx-col-page .mx-col-card-body{
    padding:16px 18px 12px;
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}
.mx-col-page .mx-col-card-name{
    font-size:15px;
    font-weight:700;
    color:#111;
    margin:0 0 10px;
    line-height:1.4;
}
.mx-col-page .mx-col-card-price{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
}
.mx-col-page .mx-col-price-sale{ font-size:16px; font-weight:800; color:#111; }
.mx-col-page .mx-col-price-old{ font-size:13px; color:#aaa; text-decoration:line-through; }
.mx-col-page .mx-col-price-now{ font-size:16px; font-weight:800; color:#111; }
/* Hover bar */
.mx-col-page .mx-col-card-hover-bar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 18px 16px;
    font-size:13px;
    font-weight:700;
    color:#888;
    transition:color .3s ease;
}
.mx-col-page .mx-col-card:hover .mx-col-card-hover-bar{
    color:#ffd700;
}
.mx-col-page .mx-col-badge{
    position:absolute;
    top:14px;
    left:14px;
    background:#ffd700;
    color:#000;
    font-size:11px;
    font-weight:800;
    letter-spacing:1px;
    text-transform:uppercase;
    padding:5px 12px;
    border-radius:999px;
    z-index:2;
}

/* ===== EMPTY STATE ===== */
.mx-col-page .mx-col-empty{
    text-align:center;
    padding:100px 20px;
    max-width:480px;
    margin:0 auto;
}
.mx-col-page .mx-col-empty-icon{
    width:80px;
    height:80px;
    border-radius:50%;
    background:#ffd700;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:36px;
    color:#000;
    margin:0 auto 28px;
}
.mx-col-page .mx-col-empty h3{ font-size:24px; font-weight:800; color:#fff; margin:0 0 14px; }
.mx-col-page .mx-col-empty p{ font-size:15px; line-height:1.7; color:#888; margin:0 0 32px; }
.mx-col-page .mx-col-empty-btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:16px 32px;
    background:#ffd700;
    color:#000;
    border-radius:999px;
    font-size:14px;
    font-weight:700;
    text-decoration:none;
    transition:.3s ease;
}
.mx-col-page .mx-col-empty-btn:hover{ background:#fff; color:#000; }

/* ===== TABLET ===== */
@media(max-width:991px){
    .mx-col-page .mx-col-hero-title{ font-size:50px; }
    .mx-col-page .mx-col-container{ padding:0 30px; }
    .mx-col-page .mx-col-intro{ padding:90px 0 80px; }
    .mx-col-page .mx-col-intro-inner{ grid-template-columns:1fr; gap:40px; }
    .mx-col-page .mx-col-intro-heading{ font-size:38px; }
    .mx-col-page .mx-col-intro-num{ font-size:140px; top:-20px; }
    .mx-col-page .mx-col-intro-orb{ right:-30px; width:260px; height:260px; }

    .mx-col-page .mx-col-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
}

/* ===== MOBILE ===== */
@media(max-width:767px){
    .mx-col-page .mx-col-hero{ height:auto; min-height:560px; aspect-ratio:3/4; cursor:auto; }
    .mx-col-page .mx-col-hero-title{ font-size:32px; }
    .mx-col-page .mx-col-hero-content{ bottom:60px; padding:0 24px; z-index:5; }
    .mx-col-page .mx-col-lens{ display:none; }
    .mx-col-page .mx-col-intro{ padding:70px 0 60px; }
    .mx-col-page .mx-col-intro-heading{ font-size:26px; letter-spacing:0; }
    .mx-col-page .mx-col-intro-num{ font-size:100px; opacity:.6; }
    .mx-col-page .mx-col-intro-desc{ font-size:15px; }
    .mx-col-page .mx-col-intro-orb{ display:none; }
    .mx-col-page .mx-col-products{ padding:70px 0 80px; }
    .mx-col-page .mx-col-container{ padding:0 20px; }
    .mx-col-page .mx-col-products-heading{ font-size:24px; }
    .mx-col-page .mx-col-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
    .mx-col-page .mx-col-card-name{ font-size:13px; }
    .mx-col-page .mx-col-price-sale,
    .mx-col-page .mx-col-price-now{ font-size:14px; }
    .mx-col-page .mx-col-price-old{ font-size:12px; }
    .mx-col-page .mx-col-card-hover-bar{ font-size:12px; padding:0 14px 14px; }
}

@media (prefers-reduced-motion: reduce){
    .mx-col-page *{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
    }
}