/* ========================================================================= assets/css/style.css — comentado ========================================================================= */
/* ---------- ROOT / GLOBAL ---------- */
 :root {
     --accent:#000;
     --muted:#6c757d;
     --bg:#fff;
}
 *{
    box-sizing:border-box
}
 body{
    font-family:'Poppins',sans-serif;
    margin:0;
    background:#fafafa;
    color:#111
}
/* ---------- PRELOADER ---------- */
 #preloader{
    position:fixed;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fff;
    z-index:9999
}
 .spinner{
    width:44px;
    height:44px;
    border:5px solid #eee;
    border-top-color:var(--accent);
    border-radius:50%;
    animation:spin 1s linear infinite
}
 @keyframes spin{
    to{
        transform:rotate(360deg)
    }
}
/* ---------- TOPBAR / HEADER ---------- */
.hidde{
    display: none !important;
}
.topbar{
    background:#f8f9f9;
    border-bottom:1px solid #eee;
    padding:.35rem 1rem;
    font-size:.9rem
}
 .social-icons a{
    color:#333;
    transition:color .18s
}
 .social-icons a:hover{
    color:var(--accent)
}
 .navbar{
    padding:.6rem 1rem
}
 .btn-ghost{
    background:transparent;
    border:none;
    padding:.25rem
}
 .navbar-brand{
    font-weight:700;
    letter-spacing:.3px
}
.transparent {
  background: rgba(255, 255, 255, 0.30) !important;
  backdrop-filter: blur(10px) !important;
}
/* ---------- SLIDER ---------- */
#heroCarousel{
    margin-top: 5%;
}

.carousel-item{
    height: 115vh !important;
}
/* ---------- OVERLAY ---------- */
 #overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.45);
    z-index:1500;
    display:none
}
 #overlay.active{
    display:block
}
/* ---------- SEARCH OVERLAY ---------- */
 .search-overlay{
    position:fixed;
    inset:0;
    display:none;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,.95);
    z-index:1600
}
 .search-box{
    width:92%;
    max-width:680px;
    display:flex;
    gap:.5rem;
    padding:.6rem;
    border-radius:999px;
    background:#fff;
    border:1px solid #e6e6e6
}
 .search-box input{
    flex:1;
    border:none;
    outline:none;
    padding:.6rem 1rem;
    font-size:1rem
}
/* ---------- MOBILE MENU ---------- */
 .mobile-menu{
    position:fixed;
    top:0;
    left:-320px;
    width:280px;
    height:100%;
    background:#fff;
    z-index:1700;
    box-shadow:4px 0 30px rgba(0,0,0,0.12);
    transition:left .28s
}
 .mobile-menu.open{
    left:0
}
 .mobile-menu .mobile-menu-content{
    padding:18px
}
 .mobile-menu .mobile-menu-content a{
    display:block;
    padding:12px 0;
    color:#111;
    text-decoration:none;
    border-bottom:1px solid #f2f2f2
}
/* ---------- HERO / SLIDER ---------- */
 .carousel-item{
    height:72vh;
    background-size:cover;
    background-position:center;
    display:flex;
    align-items:center
}
 .hero-caption{
    background:linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.85));
    padding:20px;
    border-radius:12px;
    margin-left:4%
}
 .carousel-control-prev,.carousel-control-next{
    width:6%
}
/* add slight dark gradient on top of images to make text pop on smaller screens */
 .carousel-item::after{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.0));
    pointer-events:none
}
/* ---------- PRODUCTS GRID ---------- */
/* Grid spacing handled by bootstrap classes;
 cards smaller to fit 4 per row on desktop */
 .product-card{
    background:#fff;
    border-radius:12px;
    border:1px solid #eee;
    overflow:hidden;
    position:relative;
    transition:transform .22s,box-shadow .22s
}
 .product-card:hover{
    transform:translateY(-6px);
    box-shadow:0 12px 30px rgba(0,0,0,0.08)
}
/* IMAGE: reduced height so cards are more compact */
 .product-img{
    position:relative;
    padding-bottom:95%;
    overflow:hidden
}
 .product-img img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    transition:opacity .28s
}
 .product-img img.hover-img{
    opacity:0
}
 .product-card:hover .product-img img.main-img{
    opacity:0
}
 .product-card:hover .product-img img.hover-img{
    opacity:1
}
/* Overlay for size options — appears on hover (centered top area) */
 .overlay-options{
    position:absolute;
    left:8px;
    right:8px;
    top:8px;
    display:flex;
    flex-direction:column;
    gap:8px;
    align-items:center;
    pointer-events:none;
    opacity:0;
    transition:opacity .18s
}
 .product-card:hover .overlay-options{
    opacity:1;
    pointer-events:auto
}
/* Size buttons overlay */
 .size-options{
    display:flex;
    gap:8px;
    background:rgba(0,0,0,0.2);
    padding:6px 8px;
    box-shadow:0 6px 18px rgba(0,0,0,0.06)
}
 .size-option{
    padding:6px 10px;
    border-radius:6px;
    background:#fff;
    border:1px solid #e8e8e8;
    cursor:pointer;
    pointer-events:auto;
    font-weight:500
}
 .size-option:hover{
    transform:translateY(-3px)
}
 .size-option.selected{
    background:var(--accent);
    color:#fff;
    border-color:var(--accent)
}
/* Color selector (under image inside product-info) */
 .product-info{
    padding:12px;
    text-align:center
}
 .color-options{
    display:flex;
    gap:8px;
    justify-content:center;
    margin-top:8px
}
 .color-circle{
    width:25px;
    height:25px;
    border-radius:50%;
    border:1px solid ;
    cursor:pointer;
    box-shadow:0 0 0 1px rgba(0,0,0,0.04)
}
 .color-circle:hover{
    transform:scale(1.08)
}
 .color-circle.selected{
    box-shadow:0 6px 18px rgba(0,0,0,0.12);
    outline:2px solid rgba(0,0,0,0.7)
}
/* Product text & add button */
 .product-info h6{
    margin:0 0 6px;
    font-size:1rem;
    font-weight:600
}
 .product-info .price{
    color:var(--muted);
    margin-bottom:8px
}
 .btn-add{
    border-radius:10px;
    padding:.5rem 1rem
}
/* ---------- CART SIDEBAR ---------- */
 .cart-sidebar{
    position:fixed;
    top:0;
    right:-420px;
    width:380px;
    height:100%;
    background:#fff;
    z-index:1800;
    box-shadow:-8px 0 40px rgba(0,0,0,0.08);
    transition:right .28s
}
 .cart-sidebar.open{
    right:0
}
 .cart-top{
    border-bottom:1px solid #f5f5f5;
    padding:14px
}
 .cart-items{
    padding:12px;
    overflow:auto;
    max-height:calc(100% - 170px)
}
 .cart-item{
    display:flex;
    justify-content:space-between;
    gap:8px;
    margin-bottom:12px
}
/* ---------- CHAT ---------- */
 .chat-fab{
    position:fixed;
    right:20px;
    bottom:20px;
    background:var(--accent);
    color:#fff;
    border-radius:50%;
    width:56px;
    height:56px;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:1900
}
 .chat-window{
    position:fixed;
    right:20px;
    bottom:90px;
    width:320px;
    background:#fff;
    border-radius:12px;
    box-shadow:0 10px 30px rgba(0,0,0,0.12);
    z-index:1901;
    display:none;
    flex-direction:column
}
 .chat-window.open{
    display:flex
}
 .chat-header{
    background:#000;
    color:#fff;
    padding:10px;
    border-top-left-radius:12px;
    border-top-right-radius:12px
}
 .chat-messages{
    padding:12px;
    height:200px;
    overflow:auto;
    display:flex;
    flex-direction:column;
    gap:10px
}
 .bubble{
    padding:10px 12px;
    border-radius:14px;
    max-width:85%
}
 .bubble.bot{
    background:#f2f4f7;
    align-self:flex-start
}
 .bubble.user{
    background:#000;
    color:#fff;
    align-self:flex-end
}
 .chat-input{
    padding:10px;
    border-top:1px solid #eee;
    display:flex;
    gap:8px;
    align-items:center
}
/* ---------- TOAST ---------- */
 .shofy-toast{
    position:fixed;
    left:20px;
    bottom:20px;
    padding:8px 12px;
    border-radius:8px;
    color:#fff;
    z-index:99999;
    box-shadow:0 8px 30px rgba(0,0,0,0.12)
}
/* ---------- FOOTER ---------- */
 .footer{
    padding:28px 0
}

.footer .text-rights{
    color: #e6e6e6;
}
/* ---------- Small helpers / animations ---------- */
 #cart-btn.pop{
    transform:scale(1.12);
    transition:transform .18s
}
 .pulse{
    animation:pulseBorder .8s ease
}
 @keyframes pulseBorder{
    0%{
        box-shadow:0 0 0 0 rgba(0,0,0,0)
    }
    50%{
        box-shadow:0 8px 24px rgba(0,0,0,0.12)
    }
    100%{
        box-shadow:0 0 0 0 rgba(0,0,0,0)
    }
}
/* ---------- RESPONSIVE ---------- */
 @media (max-width: 767px){
     .carousel-item{
        height:46vh
    }
     .product-img{
        padding-bottom:110%
    }
}