/* =====================================================
   SHOP HERO
===================================================== */

.shop-hero{

    position:relative;

    min-height:65vh;

    display:flex;

    align-items:center;

    overflow:hidden;

    padding:180px 0 120px;

    background:

        linear-gradient(

            180deg,

            #fff7fa,

            #ffeef4

        );

}

/* Repeating Pattern */

.shop-hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:url("../images/repeating-pattern.png");

    background-size:220px;

    opacity:.07;

}

/* ===================================== */

.shop-hero-content{

    position:relative;

    z-index:2;

    max-width:720px;

    margin:auto;

    text-align:center;

}

.shop-hero h1{

    font-family:var(--heading-font);

    font-size:clamp(3rem,6vw,5rem);

    line-height:1.05;

    margin:25px 0;

}

.shop-hero p{

    max-width:620px;

    margin:0 auto 40px;

    color:#666;

    line-height:1.9;

    font-size:1.1rem;

}

.shop-decoration{

    position:absolute;

    border-radius:50%;

    animation:floatSlow 8s ease-in-out infinite;

}

.heart-1{

    width:140px;
    height:140px;

    top:18%;
    left:8%;

    background:#ffdce8;

    opacity:.35;

}

.heart-2{

    width:90px;
    height:90px;

    right:10%;
    bottom:18%;

    background:#ffe8f0;

    animation-delay:2s;

}

.yarn-1{

    width:220px;
    height:220px;

    border:3px dashed rgba(230,72,123,.15);

    top:-40px;
    right:-70px;

}

.yarn-2{

    width:160px;
    height:160px;

    border:3px dashed rgba(230,72,123,.15);

    left:-40px;
    bottom:-50px;

}

@keyframes floatSlow{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-18px);

    }

    100%{

        transform:translateY(0px);

    }

}

.scroll-indicator{

    position:absolute;

    left:50%;

    bottom:35px;

    transform:translateX(-50%);

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:12px;

    color:#888;

    font-size:.9rem;

}

.mouse{

    width:28px;

    height:46px;

    border:2px solid var(--primary);

    border-radius:20px;

    display:flex;

    justify-content:center;

    padding-top:8px;

}

.wheel{

    width:5px;

    height:8px;

    border-radius:999px;

    background:var(--primary);

    animation:scrollWheel 1.8s infinite;

}

@keyframes scrollWheel{

    0%{

        transform:translateY(0);

        opacity:1;

    }

    100%{

        transform:translateY(16px);

        opacity:0;

    }

}

/* =====================================================
   SHOP FILTERS
===================================================== */

.shop-filters{

    padding:90px 0 50px;

    background:white;

}

.shop-filter-heading{

    text-align:center;

    margin-bottom:40px;

}

.shop-filter-heading h2{

    font-family:var(--heading-font);

    font-size:clamp(2rem,4vw,3rem);

    margin-bottom:14px;

}

.shop-filter-heading p{

    color:#666;

}

/* ========================= */

.search-wrapper{

    position:relative;

    max-width:700px;

    margin:auto;

}

.search-wrapper input{

    width:100%;

    height:68px;

    border:none;

    outline:none;

    border-radius:999px;

    padding-left:70px;

    padding-right:25px;

    background:#fff7fa;

    border:2px solid rgba(230,72,123,.08);

    font-size:1rem;

    transition:.35s;

}

.search-wrapper input:focus{

    border-color:var(--primary);

    background:white;

    box-shadow:

        0 15px 40px rgba(230,72,123,.12);

}

.search-icon{

    position:absolute;

    left:28px;

    top:50%;

    width:24px;

    height:24px;

    transform:translateY(-50%);

    stroke:var(--primary);

    stroke-width:2;

    fill:none;

}

/* ========================= */

.category-filters{

    margin-top:35px;

    display:flex;

    justify-content:center;

    gap:14px;

    flex-wrap:wrap;

}

.filter-btn{

    border:none;

    cursor:pointer;

    padding:14px 26px;

    border-radius:999px;

    background:#fff7fa;

    color:var(--text);

    font-family:inherit;

    font-weight:500;

    transition:.35s;

    border:2px solid transparent;

}

.filter-btn:hover{

    transform:

        translateY(-4px);

    border-color:rgba(230,72,123,.2);

}

.filter-btn.active{

    background:var(--primary);

    color:white;

    box-shadow:

        0 18px 35px rgba(230,72,123,.25);

}

.product-count{

    margin-top:35px;

    text-align:center;

    color:#777;

    font-weight:500;

}

.product-count span{

    color:var(--primary);

    font-size:1.2rem;

}

.filter-btn.active{

    position:relative;

}

.filter-btn.active::after{

    content:"";

    position:absolute;

    left:18px;

    right:18px;

    bottom:7px;

    height:2px;

    background:

    repeating-linear-gradient(

        90deg,

        rgba(255,255,255,.9) 0 8px,

        transparent 8px 13px

    );

    opacity:.7;

}

/* =====================================================
   PRODUCT GRID
===================================================== */

.shop-products{

    padding:30px 0 120px;

}

.products-grid{

    display:grid;

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

    gap:32px;

}

@media(max-width:1200px){

.products-grid{

    grid-template-columns:repeat(3,1fr);

}

}

@media(max-width:900px){

.products-grid{

    grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:600px){

.products-grid{

    grid-template-columns:1fr;

}

}

.product-content{

    text-align:center;

    padding:25px 25px 30px;

}

.product-content h3{

    margin-bottom:12px;

    font-size:1.25rem;

}

.product-price{

    display:block;

    margin-bottom:24px;

    color:var(--primary);

    font-size:1.2rem;

    font-weight:700;

}

.product-btn{

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:14px 20px;

    border:none;

    border-radius:999px;

    background:linear-gradient(
        135deg,
        #ff7aa8,
        #ff5c92
    );

    color:#fff;

    font-weight:600;

    font-size:.95rem;

    cursor:pointer;

    transition:
        transform .3s,
        box-shadow .3s;

}

.product-btn:hover{

    transform:translateY(-2px);

    box-shadow:
        0 12px 28px rgba(230,72,123,.28);

}

.wishlist-btn{

    position:absolute;

    top:20px;

    right:20px;

    width:44px;

    height:44px;

    border:none;

    border-radius:50%;

    background:white;

    cursor:pointer;

    font-size:1.2rem;

    box-shadow:

        0 10px 20px rgba(0,0,0,.08);

    transition:.35s;

    z-index:5;

}

.wishlist-btn:hover{

    background:#ffedf3;

    color:var(--primary);

    transform:scale(1.12);

}

.empty-products{

    display:none;

    text-align:center;

    padding:90px 0;

}

.empty-products.show{

    display:block;

}

.empty-icon{

    font-size:5rem;

    margin-bottom:20px;

}

.empty-products h3{

    font-family:var(--heading-font);

    margin-bottom:18px;

}

.empty-products p{

    color:#777;

    margin-bottom:30px;

}

/* =====================================================
   PRODUCT MODAL
===================================================== */

.product-modal{

    position:fixed;

    inset:0;

    z-index:99999;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:30px;

    visibility:hidden;

    opacity:0;

    transition:
    opacity .35s ease,
    visibility .35s ease;

}

.product-modal.active{

    visibility:visible;

    opacity:1;

}

/* ========================= */

.modal-backdrop{

    position:absolute;

    inset:0;

    background:rgba(25,15,20,.42);

    backdrop-filter:blur(10px);

    -webkit-backdrop-filter:blur(10px);

}

/* ========================= */

.modal-container{

    position:relative;

    width:min(1000px,100%);

    background:#fffdfd;

    border-radius:32px;

    overflow:hidden;

    display:grid;

    grid-template-columns:1fr 1fr;

    box-shadow:

    0 30px 80px rgba(0,0,0,.18);

    transform:translateY(35px) scale(.96);

    transition:transform .35s ease;

    z-index:2;

}

.product-modal.active .modal-container{

    transform:translateY(0) scale(1);

}

/* ========================= */

.modal-image{

    background:
    linear-gradient(
        135deg,
        #fff2f5,
        #ffe4ea
    );

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    padding:50px;

}

.modal-image img{

    width:100%;

    max-width:360px;

    transition:.45s ease;

}

.modal-main-image:hover > img{

    transform:scale(1.05) rotate(-2deg);

}

/* ========================= */

.modal-content{

    padding:48px;

    display:flex;

    flex-direction:column;

    justify-content:center;

}

/* ========================= */

.modal-badge{

    align-self:flex-start;

    background:var(--primary);

    color:#fff;

    padding:8px 18px;

    border-radius:999px;

    font-size:.8rem;

    margin-bottom:18px;

}

/* ========================= */

.modal-content h2{

    font-family:"Fredoka",sans-serif;

    font-size:2rem;

    margin-bottom:12px;

}

.modal-price{

    font-size:1.8rem;

    font-weight:700;

    color:var(--primary);

    margin-bottom:22px;

}

.modal-description{

    color:#666;

    line-height:1.8;

    margin-bottom:32px;

}

/* ========================= */

.modal-sizes h4,

.modal-quantity h4{

    margin-bottom:14px;

    font-size:1rem;

}

.size-options{

    display:flex;

    gap:12px;

    flex-wrap:wrap;

    margin-bottom:28px;

}

.size-options button{

    border:2px solid #ffd6e0;

    background:white;

    color:var(--text);

    padding:10px 18px;

    border-radius:999px;

    cursor:pointer;

    transition:.3s;

}

.size-options button:hover,

.size-options button.active{

    background:var(--primary);

    color:white;

    border-color:var(--primary);

}

/* ========================= */

.quantity-box{

    display:flex;

    align-items:center;

    gap:18px;

    margin-bottom:36px;

}

.quantity-box button{

    width:42px;

    height:42px;

    border:none;

    border-radius:50%;

    background:#ffe8ee;

    color:var(--primary);

    font-size:1.2rem;

    cursor:pointer;

    transition:.3s;

}

.quantity-box button:hover{

    transform:scale(1.08);

}

#quantityValue{

    min-width:24px;

    text-align:center;

    font-weight:600;

}

/* ========================= */

.modal-actions{

    display:flex;

    gap:18px;

}

.modal-actions .btn{

    flex:1;

}

/* ========================= */

.modal-close{

    position:absolute;

    top:18px;

    right:18px;

    width:44px;

    height:44px;

    border:none;

    border-radius:50%;

    background:white;

    font-size:1.2rem;

    cursor:pointer;

    box-shadow:0 8px 20px rgba(0,0,0,.08);

    transition:.3s;

    z-index:5;

}

.modal-close:hover{

    transform:rotate(90deg) scale(1.08);

}

/* =====================================================
   Responsive
===================================================== */

@media(max-width:900px){

.modal-container{

    grid-template-columns:1fr;

    max-height:90vh;

    overflow:auto;

}

.modal-image{

    padding:35px;

}

.modal-content{

    padding:32px;

}

.modal-actions{

    flex-direction:column;

}

}

.option-error{

    display:flex;

    align-items:center;

    gap:8px;

    margin-top:10px;

    color:var(--primary);

    font-size:.9rem;

    font-weight:500;

    opacity:0;

    transform:translateY(-6px);

    pointer-events:none;

}

.modal-option-group.error{

    animation:optionShake .35s ease;

}

.modal-option-group.error .option-error{

    animation:stitchIn .28s ease .12s both;

}

.error-thread{

    width:36px;

    height:8px;

    overflow:visible;

    flex-shrink:0;

}

.error-thread path{

    fill:none;

    stroke:var(--primary);

    stroke-width:2;

    stroke-linecap:round;

    stroke-linejoin:round;

    stroke-dasharray:40;

    stroke-dashoffset:40;

    animation:none;

}

/* =====================================================
   PRODUCT IMAGE GALLERY
===================================================== */

.modal-image{

    position:relative;

    flex-direction:column;

    gap:18px;

}

/* ==========================================
   MAIN IMAGE
========================================== */

.modal-main-image{

    position:relative;

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

}

/* Keep the existing single-image appearance */

.modal-main-image img{

    width:100%;

    max-width:360px;

    max-height:460px;

    object-fit:contain;

    transition:
        opacity .25s ease,
        transform .45s ease;

}

/* ==========================================
   ARROWS
========================================== */

.gallery-arrow{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:38px;

    height:38px;

    border:none;

    border-radius:50%;

    background:rgba(255,255,255,.95);

    color:var(--primary);

    font-family:Arial,sans-serif;

    font-size:2rem;

    line-height:1;

    display:flex;

    justify-content:center;

    align-items:center;

    cursor:pointer;

    box-shadow:

        0 8px 20px rgba(0,0,0,.10);

    opacity:0;

    visibility:hidden;

    transition:

        opacity .25s ease,

        transform .25s ease,

        background .25s ease;

    z-index:3;

}

.gallery-arrow-left{

    left:5px;

}

.gallery-arrow-right{

    right:5px;

}

.gallery-arrow:hover{

    background:white;

    transform:
        translateY(-50%)
        scale(1.08);

}

/* Only show arrows when there are multiple images */

.modal-image.has-gallery .gallery-arrow{

    opacity:1;

    visibility:visible;

}

/* ==========================================
   THUMBNAILS
========================================== */

.modal-thumbnails{

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    max-width:390px;

    overflow-x:auto;

    padding:4px 3px 8px;

    scrollbar-width:none;

}

.modal-thumbnails::-webkit-scrollbar{

    display:none;

}

/* ==========================================
   INDIVIDUAL THUMBNAIL
========================================== */

.modal-thumbnail{

    flex:0 0 64px;

    width:64px;

    height:64px;

    padding:3px;

    border-radius:12px;

    border:2px solid rgba(230,72,123,.12);

    background:white;

    cursor:pointer;

    overflow:hidden;

    transition:

        transform .25s ease,

        border-color .25s ease,

        box-shadow .25s ease;

}

.modal-thumbnail:hover{

    transform:translateY(-3px);

    border-color:rgba(230,72,123,.35);

}

.modal-thumbnail.active{

    border-color:var(--primary);

    box-shadow:

        0 6px 16px rgba(230,72,123,.18);

    transform:translateY(-2px);

}

.modal-thumbnail img{

    width:100%;

    height:100%;

    object-fit:cover;

    border-radius:8px;

}

/* ==========================================
   HIDE GALLERY CONTROLS FOR ONE IMAGE
========================================== */

.modal-image:not(.has-gallery) .modal-thumbnails{

    display:none;

}

/* Draw the stitched thread */

.modal-option-group.error .error-thread path{

    animation:drawErrorThread .28s ease forwards;

}

@keyframes drawErrorThread{

    from{

        stroke-dashoffset:40;

    }

    to{

        stroke-dashoffset:0;

    }

}

@keyframes stitchIn{

    0%{

        opacity:0;

        transform:translateY(-6px);

    }

    60%{

        opacity:1;

        transform:translateY(2px);

    }

    100%{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes optionShake{

    0%{

        transform:translateX(0);

    }

    25%{

        transform:translateX(-5px);

    }

    50%{

        transform:translateX(5px);

    }

    75%{

        transform:translateX(-3px);

    }

    100%{

        transform:translateX(0);

    }

}

@media(max-width:600px){

    .product-modal{

        padding:12px;

    }

    .modal-container{

        width:100%;

        max-width:100%;

        max-height:94vh;

        border-radius:26px;

    }

    .modal-image{

        padding:24px 18px 18px;

    }

    .modal-main-image img{

        max-height:330px;

    }

    .modal-thumbnails{

        max-width:100%;

        justify-content:flex-start;

    }

    .modal-thumbnail{

        flex-basis:58px;

        width:58px;

        height:58px;

    }

    .modal-content{

        padding:26px 22px 30px;

    }

    .modal-content h2{

        font-size:1.7rem;

    }

}

.wishlist-btn{

    transition:
        transform .25s ease,
        color .25s ease;

}

.wishlist-btn:hover{

    transform:scale(1.12);

}

.wishlist-btn.active{

    color:var(--primary);

    transform:scale(1.18);

}

/* ==========================================
   Wishlist Animation
========================================== */

.wishlist-btn{

    transition:

        transform .25s,

        background .25s,

        color .25s;

}

.wishlist-btn.active{

    color:#e6487b;

}

.wishlist-btn.heart-pop{

    animation:heartPop .35s ease;

}

.wishlist-btn.heart-shrink{

    animation:heartShrink .3s ease;

}

@keyframes heartPop{

    0%{

        transform:scale(.8);

    }

    40%{

        transform:scale(1.45);

    }

    100%{

        transform:scale(1);

    }

}

@keyframes heartShrink{

    0%{

        transform:scale(1.2);

    }

    100%{

        transform:scale(1);

    }

}

/* =====================================================
   CART DRAWER
===================================================== */

.cart-overlay{

    position:fixed;

    inset:0;

    z-index:999999999999;

    visibility:hidden;

    pointer-events:none;

}

/* ===================================== */

.cart-overlay.active{

    visibility:visible;

    pointer-events:auto;

}

/* ===================================== */

.cart-backdrop{

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.45);

    backdrop-filter:blur(4px);

    opacity:0;

    transition:opacity .4s ease;

}

.cart-overlay.active .cart-backdrop{

    opacity:1;

}

/* ===================================== */

.cart-drawer{

    position:absolute;

    top:0;

    right:0;

    width:min(430px,100vw);

    height:100%;

    background:#fffdfd;

    display:flex;

    flex-direction:column;

    transform:translateX(100%);

    transition:transform .5s cubic-bezier(.19,1,.22,1);

    border-radius:32px 0 0 32px;

    overflow:hidden;

    box-shadow:

        -20px 0 60px rgba(0,0,0,.15);

}

.cart-drawer::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:10px;

    height:100%;

    background:

        repeating-linear-gradient(

            to bottom,

            transparent 0 16px,

            rgba(230,72,123,.18) 16px 24px

        );

}

.cart-drawer::after{

    content:"";

    position:absolute;

    top:-120px;

    right:-120px;

    width:260px;

    height:260px;

    border-radius:50%;

    background:#ffdbe7;

    filter:blur(70px);

    opacity:.6;

    pointer-events:none;

}

.cart-overlay.active .cart-drawer{

    transform:translateX(0);

}

.cart-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:28px;

    border-bottom:1px solid rgba(0,0,0,.06);

    position:relative;

}

.cart-header h2{

    font-family:var(--heading-font);

    font-size:2rem;

}

.cart-close{

    width:46px;

    height:46px;

    border:none;

    border-radius:50%;

    background:#fff4f7;

    color:var(--primary);

    cursor:pointer;

    font-size:1.2rem;

    transition:.3s;

}

.cart-close:hover{

    transform:rotate(90deg);

    background:var(--primary);

    color:white;

}

.cart-items{

    flex:1;

    overflow-y:auto;

    padding:24px;

}

.cart-items::-webkit-scrollbar{

    width:8px;

}

.cart-items::-webkit-scrollbar-thumb{

    background:#ffd8e4;

    border-radius:999px;

}

.cart-empty{

    display:none;

    text-align:center;

    padding:70px 30px;

}

.cart-empty.show{

    display:block;

}

.cart-empty .empty-icon{

    font-size:4rem;

    margin-bottom:20px;

}

.cart-footer{

    padding:28px;

    border-top:1px solid rgba(0,0,0,.06);

    background:white;

}

.cart-subtotal{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:24px;

    font-size:1.1rem;

}

.cart-subtotal strong{

    color:var(--primary);

    font-size:1.35rem;

}

.cart-item{

    display:flex;

    gap:18px;

    align-items:center;

    background:white;

    border-radius:24px;

    padding:18px;

    margin-bottom:18px;

    box-shadow:

        0 12px 30px rgba(0,0,0,.06);

    border:2px solid rgba(230,72,123,.08);

    transition:.35s;

}

.cart-item:hover{

    transform:translateY(-3px);

}

.cart-item-image{

    width:88px;

    height:88px;

    object-fit:contain;

    flex-shrink:0;

}

.cart-item-content{

    flex:1;

}

.cart-item-content h3{

    font-family:var(--heading-font);

    margin-bottom:6px;

}

.cart-item-options{

    color:#777;

    font-size:.9rem;

    margin-bottom:10px;

}

.cart-item-price{

    color:var(--primary);

    font-weight:700;

}

.cart-remove{

    border:none;

    background:none;

    cursor:pointer;

    font-size:1.2rem;

    color:#999;

    transition:.3s;

}

.cart-remove:hover{

    color:var(--primary);

    transform:rotate(90deg);

}

/* ==========================================
   Cart Item
========================================== */

.cart-item{

    display:flex;

    gap:18px;

    align-items:flex-start;

    padding:22px 0;

    border-bottom:1px solid rgba(0,0,0,.08);

}

.cart-item-image{

    width:88px;

    height:88px;

    object-fit:cover;

    border-radius:18px;

    background:#fff6f9;

    flex-shrink:0;

}

.cart-item-details{

    flex:1;

}

.cart-item-details h3{

    margin-bottom:8px;

    font-size:1.05rem;

}

.cart-item-details p{

    margin:2px 0;

    color:#777;

    font-size:.92rem;

}

.cart-item-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:16px;

}

.cart-price{

    font-weight:700;

    color:var(--primary);

}

/* ==========================================
   Quantity Controls
========================================== */

.cart-quantity{

    display:flex;

    align-items:center;

    gap:12px;

}

.cart-quantity button{

    width:32px;

    height:32px;

    border:none;

    border-radius:50%;

    background:#fff4f8;

    cursor:pointer;

    transition:.25s;

}

.cart-quantity button:hover{

    transform:scale(1.08);

    background:var(--primary);

    color:white;

}

.cart-quantity span{

    width:22px;

    text-align:center;

    font-weight:600;

}

.remove-cart-item{

    border:none;

    background:none;

    color:#999;

    cursor:pointer;

    font-size:1rem;

    transition:.25s;

}

.remove-cart-item:hover{

    color:var(--primary);

    transform:rotate(90deg);

}

.flying-cart-image{

    position:fixed;

    pointer-events:none;

    z-index:999999;

    border-radius:18px;

    box-shadow:0 20px 50px rgba(0,0,0,.18);

    will-change:transform, opacity;

}

.cart-empty{

    display:none;

    text-align:center;

    padding:70px 30px;

}

.cart-empty.show{

    display:block;

}

.cart-empty-illustration{

    font-size:4rem;

    margin-bottom:25px;

    animation:floatBasket 3s ease-in-out infinite;

}

.cart-empty h3{

    margin-bottom:12px;

    font-family:var(--heading-font);

}

.cart-empty p{

    color:#777;

    margin-bottom:30px;

}

@keyframes floatBasket{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

}

.cart-item.removing{

    animation:unstitch .35s ease forwards;

}

@keyframes unstitch{

    to{

        opacity:0;

        transform:

            translateX(40px)

            scale(.94);

    }

}

.quantity-value.bump{

    animation:quantityPop .22s ease;

}

@keyframes quantityPop{

    50%{

        transform:scale(1.25);

    }

}