/*-- shop css -- */

/*-- Spacer --*/
.Shop-Top-Spacer {
    height: 80px; 
    color: rgb(240, 240, 240);
}

.shop-sticky-div {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 5;
    font-size: 21px;
    transition: font-size 0.3s ease-in-out, height 0.3s ease-in-out, line-height 0.3s ease-in-out; /* added height & line-height */
    height: 60px;
    line-height: 60px;
    color: #333333;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--fontfamily-tertiary);
    font-weight: 400;
    margin-bottom: 0px;
    padding-top: env(safe-area-inset-top);
    background-color: white;
    border-bottom: 1px solid #D2D2D7;
}

.shop-sticky-div.small {          /* note: .shop-sticky-div.small not .shop-sticky-div .small */
    height: 40px;
    line-height: 40px;            /* match height so text stays vertically centered */
    font-size: 16px;
}

@media (max-width: 768px) {
    .shop-sticky-div {
        margin: 0;
        width: 100%;
        font-size: 20px;          /* slightly reduced from 24px for better scaling */
    }
    .shop-sticky-div.small {
        font-size: 14px;          /* smaller on mobile when sticky */
    }
    .shop-sticky-div a {
        font-size: 16px;
    }
}


/*--MSG-Top-Bar area-- */
.Top-MSg-Bar {
    display: flex; 
    justify-content: center; 
    align-items: center; 
    /*background-color: grey; */
    /*padding: 0px 12px;*/
    margin-bottom: 36px;
}
.Top-MSg-Bar .text-holder {
    display: flex;
    justify-content: center;    
    align-items: center;
    background-color: #F5F5F7;
    border-bottom: 1px solid #D2D2D7;
    color: #1D1D1F;
    width: 100%;
    height: 54px;
    overflow: hidden;
}

.announcement-track {
    display: flex;
    white-space: nowrap;
}

.announcement-track span {
    min-width: 100%;
    text-align: center;
    /*padding: 0 20px;*/
    flex-shrink: 0;
    white-space: nowrap; /* important */
}


/*-- (2) banner area --*/
.subcat_desktop{
    display:block;
}
.subcat_mobile{
    display:none;
}
.subcat_description {
    font-family: var(--fontfamily-caveat-brush);
    font-size: 36px; 
    font-weight: 400; 
    line-height: 1.2;
    text-align: center; 
    color: #6a1b9a; /* coral #e63946;*/
    padding-top: 36px;
    padding-bottom: 0px;
    letter-spacing: normal;
}
.stroke-holder {
    width: 200px;
    height: auto;
}
.stroke-holder img {
    width: 100%;
    height: 100%;
}


/* -- (3) product display area ---*/
.tagline_01 {
    font-family: var(--fontfamily-primary);
    color: #555;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    margin-bottom: 21px;
}


/*-- (4) Special Moment Section --*/
.Shop-special-moment {
    margin-top: 72px;
    margin-bottom: 144px;
}
.Shop-special-moment .special-wrapper {
    padding: 96px 12px 60px 12px;
    margin-left: 9px;
    margin-right: 9px;
    background: linear-gradient(135deg, #00B09B, #96C93D);
    /*background: linear-gradient(180deg, rgb(216,233,246), RGB(245,249,252));*/
}
.Shop-special-moment .special-wrapper .special-headline {
    text-align: center;
    margin-bottom: 48px;
    margin-top: 30px;
}
.Shop-special-moment .special-wrapper .special-headline .line-1 {
    display: block;
    font-size: 24px;
    line-height: 1;
    font-weight: 400;
    color: white;
    font-family: var(--fontfamily-lato);
}
.Shop-special-moment .special-wrapper .special-headline .line-2 {
    font-size: 42px;
    font-weight: 400;
    line-height: 1.3;
    color: white; /*#154734;*/
    font-family: var(--fontfamily-secondary);
}
.Shop-special-moment .special-wrapper .special-body {
    width: 650px;
    text-align: center;
    font-size: 17px;
    margin-bottom: 60px;
}
.Shop-special-moment .special-wrapper .special-icon {
    width: 120px;
    height: 120px;
}

.Shop-special-moment .special-wrapper .special-icon img {
  width: 100%;
  height: 100%;
}

/*-- 6 x 2 div display ---*/
.moment-outer {
    display: flex;
    flex-wrap: wrap;
    padding: 18px 108px;
    margin-top: 36px;
}
.moment-outer .moment-box {
    flex: 0 0 33.33%;
    padding: 18px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
    -webkit-filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}
.moment-outer .moment-box .moment-box-content {
    background-color: white;
    border-radius: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 130px;
    width: 100%;
    height: 100%;
}
.moment-outer .moment-box .moment-box-content .moment-box-left {
    width: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: black;
    height: 100%;
    border-radius: 18px 0px 0px 18px;
}
.moment-outer .moment-box .moment-box-content .moment-box-left img {
    width: 75px;
    height: auto;
}
.moment-outer .moment-box .moment-box-content .moment-box-right {
    width: 60%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-family: var(--fontfamily-tertiary);
    font-size: 24px;
    font-weight: 400;
    line-height: 1.2;
    padding: 24px;
}

@media (min-width: 768.1px) and (max-width: 1200px) {
    /*-- (4) Special Moment Section --*/
    
    .moment-outer {
        padding: 18px 18px;
    }
    .moment-outer .moment-box {
        flex: 0 0 50%;
    }
}


@media (max-width: 768px) {
    /*-- Spacer --*/
    .Shop-Top-Spacer {
        height: 76px; 
    }
    /*--MSG-Top-Bar area-- */
    .Top-MSg-Bar {
        margin-bottom: 12px;
    }
    
    /*-- (2) banner area --*/
    .subcat_desktop{
        display:none;
    }
    .subcat_mobile{
        display:block;
        margin-left: -18px;
        margin-right: -18px;
    }
    .subcat_description {
        font-size: 30px;
        line-height: 1.2;
        padding-top: 36px;
        padding-bottom: 0px;
        width: 72%;
    }
    .stroke-holder {
        width: 150px;
        height: auto;
    }
    
    /* -- (3) product display area ---*/
    .tagline_01 {
        font-size: 13px;
        line-height: 1.2;
        margin-top: 3px;
        margin-right: 24px;
        margin-bottom: 21px;
    }    
    
    /*-- (4) Special Moment Section --*/

    .Shop-special-moment {
        margin-top: 72px;
        margin-bottom: 96px;
        background: linear-gradient(135deg, #00B09B, #96C93D);
        /*background: linear-gradient(180deg, rgb(216,233,246), RGB(245,249,252));*/
    }
    .Shop-special-moment .special-wrapper {
        padding: 60px 12px 48px 12px;
        margin-left: -9px;
        margin-right: -9px;
        background: none;
    }
    .Shop-special-moment .special-wrapper .special-headline {
        margin-top: 18px;
        margin-bottom: 42px;
    }
    .Shop-special-moment .special-wrapper .special-headline .line-1 {
        font-size: 21px;
        line-height: 1.6;
        display: none;
    }
    .Shop-special-moment .special-wrapper .special-headline .line-2 {
        font-size: 30px;
        line-height: 1.0;
    }
    .Shop-special-moment .special-wrapper .special-body {
        width: 96%;
        margin-bottom: 60px;
    }
    .Shop-special-moment .special-wrapper .special-icon {
        width: 100px;
        height: 100px;
    }
    
    .Shop-special-moment .special-wrapper .special-icon img {
    }    
    
    .moment-outer {
        padding: 0;
        margin-top: 0px;
    }
    .moment-outer .moment-box {
        flex: 0 0 100%;
        padding: 9px 9px; 
    }
    
    .moment-outer .moment-box .moment-box-content {
        min-height: 130px;
        width: 100%;
        height: 100%;
    }
    .moment-outer .moment-box .moment-box-content .moment-box-left {
        width: 40%;
        background: black;
        height: 100%;
        border-radius: 18px 0px 0px 18px;
    }
    .moment-outer .moment-box .moment-box-content .moment-box-left img {
        width: 75px;
        height: auto;
    }
    .moment-outer .moment-box .moment-box-content .moment-box-right {
        width: 60%;
        font-size: 24px;
        font-weight: 400;
        line-height: 1.2;
        padding: 24px;
    }


}




/* =========================
   Mobile View
========================= */

@media (max-width: 575px) {
    .hom-cat-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .hom-cat-right svg {
        width: 42px;
        height: 42px;
    }
    
    
}



/* =========================================
   SHOP PAGE BANNER
========================================= */

.shop-banner-section {
    padding: 20px 0 40px;
}


/* LINK */

.shop-banner-link {

    display: block;

    width: 100%;

    text-decoration: none;
}



/* =========================================
   DESKTOP BANNER
========================================= */

.shop-banner-desktop {

    width: 100%;

    aspect-ratio: 16 / 7;

    border-radius: 24px;

    overflow: hidden;

    background-image: var(--desktop-shop-bg);

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    transition: 0.35s ease;
}


/* HOVER */

.shop-banner-link:hover .shop-banner-desktop {

    transform: scale(1.01);
}



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

.shop-banner-mobile {

    display: none;
}


.shop-banner-mobile-item-one {

    width: 100%;

    aspect-ratio: 8 / 9;

    border-radius: 18px;

    overflow: hidden;

    background-image: var(--mobile-shop-bg);

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.shop-banner-mobile-item-one .content {

    background-color: #ffdb00;
    width: 100%;

    text-align: center;

    padding: 18px 40px;
    
    line-height: 1.4;
    font-weight: 400;
    font-family: var(--fontfamily-lato);
    color: black;
    font-size: 16px;
}

.shop-banner-mobile-item-two {

    width: 100%;

    aspect-ratio: 5 / 4;

    border-radius: 18px;

    overflow: hidden;

    background-image: var(--mobile-shop-bg);

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;
}

.shop-banner-mobile-item-small {

    width: 100%;

    aspect-ratio: 5 / 3;

    border-radius: 18px;

    overflow: hidden;

    background-image: var(--mobile-shop-bg);

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;
}



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

@media (max-width: 767px) {


    /* Hide desktop */

    .shop-banner-desktop {

        display: none;
    }


    /* Show mobile */

    .shop-banner-mobile {

        display: flex;

        flex-direction: column;

        gap: 16px;
    }

}