@tailwind base;
@tailwind components;
@tailwind utilities;
@import './icomoon/style.css';

:root {
  --main-color: #ff0000;   
  --main-rgb: 245, 220, 168;   
}

.reco-list{display:flex;gap:.75rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 .5rem .25rem .5rem}
  .reco-list::-webkit-scrollbar{height:6px}
  .reco-card{scroll-snap-align:start;min-width:240px}
.buy_now_button {
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
/* modal pełny ekran */
.modal-cart-main{ height:100vh; }

/* Prawa kolumna przewijalna, układ kolumnowy */
.modal-cart-main .right.cart-block{
  display:flex;
  flex-direction:column;
  height:100%;
  max-height:100vh; /* ważne na iOS */
  overflow:hidden;  /* przewijać będzie środek */
}

/* Środkowa część, która ma się przewijać */
.modal-cart-main .right.cart-block .cart-scroll{
  flex:1 1 auto;
  overflow-y:auto;
  -webkit-overflow-scrolling: touch;
}

/* Stopka przyklejona na dole prawej kolumny */
.modal-cart-main .right.cart-block .footer-modal{
  top:auto; /* defensywnie */
  z-index: 5;
}

@media(min-width:900px){
    .mobile-hide{
        display:block !important;
    }
    .mobile-hide.choose-layout.menu-tab.flex.items-center.gap-2{
        display:flex !important;
    }
}
@media(max-width:900px){
    .mobile-hide{
        display:none !important;
    }
}
/* delikatny podjazd na hover */
.buy_now_button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.15);
}

/* pasek świetlny */
.buy_now_button::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        120deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.4) 50%,
        rgba(255,255,255,0) 100%
    );
    transform: skewX(-20deg);
}

/* animacja */
.buy_now_button.shine::after {
    animation: shineMove 3s infinite;
}

@keyframes shineMove {
    0%   { left: -100%; }
    60%  { left: 120%; }
    100% { left: 120%; }
}

.w-full2{
    border-radius: 5px;
    width:50px;
}
.header-margin {
    margin-bottom: 70px !important;
  }

  @media (min-width: 1000px) {
    .header-margin {
      margin-bottom: 85px !important;
    }
  }
  @media (max-width: 639.98px) {
    
    .w-full2{
    border-radius: 5px;
    width:40px;
}
a.button-main.w-full.text-center.buy_now_button.shine {
    height: 50px;
    align-items: center !important;
    justify-content: center !important;
    align-content: center;
}
}
div#qb-qty {
    padding: 0 5px;
}
 
  /* Pasek nad menu (mobile), domyślnie ukryty */
  #quick-buy-bar{
    position: fixed; left: 0; right: 0;
    bottom: calc(var(--menu-height, 70px));
    margin:4px;
    z-index: 102; /* menu ma z-[101] */
    opacity: 0; transform: translateY(16px);
    pointer-events: none; visibility: hidden;
    transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .35s, visibility 0s .35s;
    will-change: transform, opacity;
  }
  #quick-buy-bar.show{
    opacity: 1; transform: translateY(0);
    pointer-events: auto; visibility: visible;
    transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .35s;
  }
  @media (min-width: 640px){ /* tak jak menu: sm:hidden */
    #quick-buy-bar{ display:none; }
  }
  .mx-3.mb-3.p-3.bg-white.rounded-xl.shadow-lg.border.border-line.flex.items-center.gap-3 {
    padding: 8px 0;
    }
    .mx-3.mb-3.p-3.bg-white.rounded-xl.shadow-lg.border.border-line.flex.items-center.gap-3 {
        align-items: center;
        justify-content: space-evenly;
    }
 


@media (max-width: 575.98px) {
    .modal-newsletter .modal-quickview-main, .modal-newsletter .modal-cart-main, .modal-newsletter .modal-wishlist-main, .modal-video-block .modal-quickview-main, .modal-video-block .modal-cart-main, .modal-video-block .modal-wishlist-main, .modal-sizeguide-block .modal-quickview-main, .modal-sizeguide-block .modal-cart-main, .modal-sizeguide-block .modal-wishlist-main, .modal-quickview-block .modal-quickview-main, .modal-quickview-block .modal-cart-main, .modal-quickview-block .modal-wishlist-main, .modal-order-detail-block .modal-quickview-main, .modal-order-detail-block .modal-cart-main, .modal-order-detail-block .modal-wishlist-main, .modal-cart-block .modal-quickview-main, .modal-cart-block .modal-cart-main, .modal-cart-block .modal-wishlist-main, .modal-wishlist-block .modal-quickview-main, .modal-wishlist-block .modal-cart-main, .modal-wishlist-block .modal-wishlist-main, .modal-search-block .modal-quickview-main, .modal-search-block .modal-cart-main, .modal-search-block .modal-wishlist-main {
        width: unset;
        left: 20px;
        top: 30px;
        height: calc(100dvh - 60px) !important;
    }
}
a.button-main.text-center.uppercase.w-100 {
    width: 100%;
}.flex.items-center.gap-4.payments {
    justify-content: center !important;
    align-items: center !important;
}
.quantity.body1.font-semibold {
    padding: 0 20px;
}
            img.image-comparison__image {
                min-width: 100dvw !important;
                object-position: bottom;
            }
            
            @media(min-width:1000px){
                img.image-comparison__image {
                    min-width: 1200px !important;
                    object-position: bottom;
                }
                .text-sub-display {
                    font-size: 18px;
                    font-weight: 600;
                    line-height: 24px;
                    letter-spacing: 1.8px;
                    text-transform: uppercase;
                    text-align: center;
                }.heading1 {
                    font-size: 46px;
                    line-height: 58px;
                    font-weight: 500;
                    text-transform: capitalize;
                }
                .image-comparison{
                    display: none;
                }
            }

            @media(max-width:1000px){

            .slider-block.toys-kid{
            height: 100dvh !important;
            max-height: calc(100dvh - 243px) !important;
            }
            .image-comparison__slider-wrapper, figure.image-comparison__figure{
                min-height: 400px !important;
            }
            section.image-comparison{
                height: 400px !important;
            }
            }