/* =========================================================
   FRAMBUK FOODS — CLEAN RESPONSIVE STYLESHEET
   ========================================================= */


/* =========================================================
   GLOBAL RESET & OVERFLOW PROTECTION
   ========================================================= */

*,
*::before,
*::after{
   margin:0;
   padding:0;
   box-sizing:border-box;
}

html,
body{
   width:100%;
   max-width:100%;
   overflow-x:hidden;
}

body{
   min-height:100dvh;
   display:flex;
   flex-direction:column;
   padding-top: 7rem;
}

header,
main,
section,
footer{
   width:100%;
   max-width:100%;
}

section{
   padding:10px 10px;
}

img,
iframe,
video{
   max-width:100%;
}

img{
   display:block;
}

a{
   text-decoration:none;
   color:inherit;
}

button,
input,
textarea,
select{
   font:inherit;
}


/* =========================================================
   HEADER
   ========================================================= */

header{
   position:fixed;
   top:0;
   z-index:1000;
   border-bottom:1px solid #f1d26b;
   margin-bottom: 3rem;
   background: #ffffff;
}

.header-container{
   width:95%;
   max-width:1400px;
   height:70px;
   margin:auto;
   display:flex;
   align-items:center;
   justify-content:space-between;
   position:relative;
   min-width:0;
}


.logo{
   position:absolute;
   left:50%;
   transform:translateX(-50%);
}

.logo img{
   width:110px;
   max-width:110px;
}

nav{
   display:flex;
   align-items:center;
   gap:25px;
   min-width:0;
}

nav a{
   font-size:14px;
   font-weight:600;
   cursor:pointer;
}

nav .active{
   background:#48ff00bb;
   padding:18px;
   border-radius: 5px;
}

.header-cart{
   position:relative;
   display:inline-flex;
   align-items:center;
   justify-content:center;
   cursor:pointer;
}

.header-checkout{
   position:relative;
   display:inline-flex;
   align-items:center;
   justify-content:center;
   cursor:pointer;
}

#cartCount{
   position:absolute;
   top:-10px;
   right:-10px;

   min-width:20px;
   height:20px;

   padding:2px 5px;

   border-radius:50%;

   background:red;
   color:white;

   font-size:12px;
   font-weight:700;
   line-height:16px;

   text-align:center;

   box-sizing:border-box;
}

.hamburger{
   display:none;
   font-size:28px;
   cursor:pointer;
   color: #fac400;
}


/* =========================================================
   HEADER ICONS
   ========================================================= */

.header-icons{
   display:inline-flex;
   align-items:center;
   justify-content:center;

   gap:18px;
   margin-left:auto;

   white-space:nowrap;
   cursor:pointer;
}

.header-icons > div{
   position:relative;

   display:inline-flex;
   align-items:center;
   justify-content:center;

   width:42px;
   height:42px;

   cursor:pointer;

   font-size:24px;
   line-height:1;
}


/* =========================================================
   MOBILE HEADER / MENU
   ========================================================= */

@media(max-width:768px){

   .header-container{
      height:75px;
   }

   .hamburger{
      display:block;
   }

   .logo img{
      width:90px;
   }

   .header-icons{
      display:flex;
      flex-direction:row;
      align-items:center;

      gap:10px;
      margin-left:auto;

      cursor:pointer;
   }

   nav{
      position:fixed;

      top:75px;
      left:-100%;

      width:min(260px,85vw);
      height:calc(100dvh - 75px);

      background:#fff;

      display:flex;
      flex-direction:column;
      align-items:flex-start;

      padding:30px;
      gap:0;

      transition:left .4s ease;

      box-shadow:5px 0 20px rgba(0,0,0,.15);

      overflow-y:auto;
      overflow-x:hidden;

      z-index:1100;
   }

   nav.show{
      left:0;
   }

   nav a{
      width:100%;
      padding:15px 0;
      cursor:pointer;
   }

}


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

.hero{
   padding:60px 5%;
   max-width:100%;
   overflow:hidden;
}

.hero h1{
   text-align:center;
   font-family:'Playfair Display',serif;
   font-size:clamp(27px,3.5vw,45px);
}

.hero p{
   text-align:center;
   font-size:22px;
   margin:20px;
}

.hero-content{
   display:flex;
   justify-content:center;
   align-items:center;

   gap:20px;

   width:100%;
   max-width:1000px;
   min-width:0;

   margin:45px auto 0;
}

.video-box{
   display:flex;
   justify-content:center;
   align-items:center;

   flex:0 1 auto;
   order:2;

   min-width:0;
   max-width:100%;
}

.tools{
   display:flex;
   flex-direction:column;
   align-items:center;
   justify-content:center;

   gap:12px;

   width:30%;
   max-width:100%;
   min-width:0;

   order:1;
}

.tools button,
.tool-link{
   max-width:90vw;
   white-space:normal;
   text-align:center;
}

.tool-link{
   display:inline-block;

   width:max-content;
   max-width:90vw;

   background:#000;
   color:#fff;

   border:none;

   padding:8px 16px;

   border-radius:30px;

   cursor:pointer;
}

.tool-link:first-of-type{
   background:#FAC400;
   color:#000;
   letter-spacing:-0.5px;
}

.tool-link:nth-of-type(3){
   background:#000;
   color:#ffffff;
   letter-spacing:-0.2px;
}

.tool-link:nth-of-type(4){
   background:#000;
   color:#ffffff;
   letter-spacing:-0.3px;
}

.tool-link:nth-of-type(10){
   background:#fac400;
   color:#000;
   letter-spacing:1px;
}

.tool-link:nth-of-type(11){
   background:#000;
   color:#FFFFFF;
   letter-spacing:0.5px;
}

.tool-link:hover,
.tool-title:hover h3{
   opacity:.85;
}

.tool-title{
   display:flex;
   justify-content:center;

   width:max-content;
   max-width:100%;

   text-decoration:none;
   color:inherit;
}

.tool-title h3{
   text-align:center;
}

p.pretitle{
   color:#888;
   font-size:18px;
}


/* =========================================================
   PHONE / VIDEO FRAME
   ========================================================= */

.phone{
   width:320px;
   max-width:90vw;

   aspect-ratio:9/16;
   height:auto;

   background:#000;

   border-radius:35px;

   padding:20px;

   box-shadow:0 15px 30px #999;

   overflow:hidden;
}

.phone video{
   display:block;

   width:100%;
   height:100%;

   border:none;
   border-radius:5px;
}


/* =========================================================
   MOBILE HERO
   ========================================================= */

@media(max-width:768px){

   .hero-content{
      flex-direction:column;
      gap:40px;
   }

   .tools{
      order:1;
      width:100%;
      align-items:center;
   }

   .video-box{
      order:2;
      width:100%;
   }

   .phone{
      width:min(90vw,320px);
      max-width:90vw;
      height:auto;
   }

   .hero p{
      font-size:18px;
   }

}

@media(max-width:480px){

   .hero{
      padding:45px 4%;
   }

   .hero p{
      font-size:16px;
   }

   .phone{
      width:90vw;
   }

}


/* =========================================================
   HEADER CART PANEL
   ========================================================= */

.cart-panel{
   position:absolute;

   top:50px;
   right:0;

   width:300px;
   max-width:90vw;

   background:#fff;

   box-shadow:0 10px 30px rgba(0,0,0,.2);

   border-radius:10px;

   padding:20px;

   display:none;

   z-index:2000;
}

.cart-panel.show{
   display:block;
}


/* =========================================================
   PRODUCTS
   ========================================================= */

.products{
   width:100%;
   max-width:100%;

   padding-top:25px;
   padding-bottom:25px;

   min-width:0;
}

.products h2{
   font-family:'Playfair Display',serif;
   font-size:32px;
   margin-bottom:30px;
}

.products .hero-title{
   margin-bottom:20px;
}

.products .hero-subtitle{
   margin-bottom:10px;
}

.product-section-title{
   font-family:'Playfair Display',serif;

   font-size:30px;

   margin-top:45px;
   margin-bottom:10px;

   padding-bottom:10px;

   border-bottom:1px solid #eee;
}

.products button{
   background:#000;
   color:#fff;

   border:none;

   padding:8px 14px;

   margin-top:15px;

   border-radius:20px;

   cursor:pointer;

   font-weight:bold;
}


/* =========================================================
   PRODUCT CARD
   ========================================================= */

.product-card{
   background:#fff;

   min-width:0;
   max-width:100%;

   padding:15px;

   box-shadow:0 5px 20px #ddd;

   border-radius:15px;

   margin-bottom:20px;

   overflow:hidden;
}

.product-card h3{
   margin-top:10px;
   overflow-wrap:anywhere;
}

.product-card p{
   font-size:16px;
   font-weight:bold;
   overflow-wrap:anywhere;
}


/* =========================================================
   PRODUCT ACTION BUTTONS
   ========================================================= */

.product-actions{
   display:flex;
   flex-wrap:nowrap;

   gap:6px;

   width:100%;
   max-width:100%;

   margin-top:15px;

   min-width:0;
}

.product-actions button{
   flex:1 1 0;

   min-width:0;
   max-width:100%;

   margin-top:0;
   margin-right:0;

   padding:8px 6px;

   font-size:13px;

   white-space:normal;

   text-align:center;

   line-height:1.2;
}

@media(max-width:600px){

   .product-actions button{
      padding:7px 4px;
      font-size:11.5px;
   }

}


/* =========================================================
   PRODUCT IMAGE SLIDER
   ========================================================= */

.product-image-slider{
   position:relative;

   width:100%;
   height:240px;

   overflow:hidden;

   border-radius:10px;

   margin-bottom:12px;
}

.product-image-slider img{
   position:absolute;

   top:0;
   left:0;

   width:100%;
   height:100%;

   object-fit:contain;

   background:#fff;

   transform:translateX(0);

   transition:transform .45s ease;

   will-change:transform;
}

.product-image-slider .img-front{
   z-index:2;
}

.product-image-slider .img-back{
   z-index:1;
}

.product-image-slider:hover .img-front{
   transform:translateX(-100%);
}


/* =========================================================
   PRODUCT IMAGE PREVIEW BUTTON
   ========================================================= */

.image-preview-btn{
   display:flex !important;

   align-items:center;
   justify-content:center;

   gap:6px;

   width:100%;
   max-width:100%;

   margin:0 auto 12px !important;

   padding:8px 12px !important;

   background:#000 !important;
   color:#fff !important;

   border:none !important;

   border-radius:20px !important;

   cursor:pointer;

   font-weight:600;
   font-size:13px;

   line-height:1.2;
}

.image-preview-btn:hover{
   background:#fac400 !important;
   color:#000 !important;
}

.image-preview-btn span{
   font-size:16px;
   line-height:1;
}


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

.product-grid.five-grid{
   display:flex;

   flex-wrap:wrap;

   justify-content:center;
   align-items:stretch;

   gap:25px;

   width:100%;
   max-width:100%;

   margin-bottom:30px;

   min-width:0;
}

.product-grid.five-grid .product-card{
   flex:0 1 220px;

   width:220px;
   max-width:220px;

   margin-bottom:0;
}

.product-grid.five-grid .product-image-slider{
   height:160px;
}


/* 5 columns — large desktop */

@media(min-width:1200px){

   .product-grid.five-grid .product-card{
      flex-basis:calc((100% - 100px) / 5);
      width:calc((100% - 100px) / 5);
      max-width:calc((100% - 100px) / 5);
   }

}


/* 4 columns — desktop */

@media(min-width:900px) and (max-width:1199px){

   .product-grid.five-grid .product-card{
      flex-basis:calc((100% - 75px) / 4);
      width:calc((100% - 75px) / 4);
      max-width:calc((100% - 75px) / 4);
   }

}


/* 4 columns — tablet */

@media(min-width:601px) and (max-width:899px){

   .product-grid.five-grid{
      gap:15px;
   }

   .product-grid.five-grid .product-card{
      flex-basis:calc((100% - 45px) / 4);
      width:calc((100% - 45px) / 4);
      max-width:calc((100% - 45px) / 4);
   }

}


/* 2 columns — mobile */

@media(max-width:600px){

   .product-grid.five-grid{
      width:100%;
      max-width:100%;
      gap:15px;
   }

   .product-grid.five-grid .product-card{
      flex:0 1 calc(50% - 7.5px);

      width:calc(50% - 7.5px);
      max-width:calc(50% - 7.5px);

      padding:10px;
   }

   .product-grid.five-grid .product-image-slider{
      height:150px;
   }

   .product-card h3{
      font-size:15px;
   }

   .product-card p{
      font-size:14px;
   }

}


/* =========================================================
   MEDIA / VIDEO THUMBNAILS
   ========================================================= */

.media-thumb-wrapper{
   position:relative;

   width:100%;

   aspect-ratio:16/9;

   overflow:hidden;

   border-radius:10px;

   margin-bottom:12px;
}

.media-thumb-wrapper img{
   width:100%;
   height:100%;

   object-fit:cover;

   display:block;
}

.play-button{
   position:absolute;

   top:50%;
   left:50%;

   transform:translate(-50%,-50%);

   width:60px;
   height:60px;

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

   border-radius:50%;

   display:flex;
   align-items:center;
   justify-content:center;

   transition:.3s;
}

.play-button::before{
   content:'▶';

   font-size:24px;

   color:#fff;

   margin-left:4px;
}

.media-thumb-wrapper:hover .play-button{
   background:#fac400;

   transform:
      translate(-50%,-50%)
      scale(1.1);
}


/* =========================================================
   FULL-SCREEN IMAGE / VIDEO MODAL
   ========================================================= */

/*
   IMPORTANT:
   The modal itself fills the entire viewport.
   Its content is centered using flexbox.
   No mobile top margin is used.
*/

.video-modal{
   display:none;

   position:fixed;

   inset:0;

   width:100%;
   height:100%;

   height:100dvh;

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

   z-index:99999;

   justify-content:center;
   align-items:center;

   padding:12px;

   overflow:hidden;

   overscroll-behavior:contain;
}

.video-modal.active{
   display:flex;
}


/*
   The popup container is centered BOTH vertically
   and horizontally by the parent modal.
*/

.video-modal-content{
   position:relative;

   width:min(1100px,96vw);

   max-width:1100px;

   max-height:calc(100dvh - 24px);

   min-width:0;
   min-height:0;

   margin:0;

   display:flex;

   flex-direction:column;

   align-items:center;
   justify-content:center;

   gap:10px;

   flex-shrink:1;
}


/* =========================================================
   NORMAL YOUTUBE VIDEO
   ========================================================= */

.video-modal iframe{
   display:block;

   width:100%;
   max-width:100%;

   aspect-ratio:16/9;

   height:auto;

   max-height:calc(100dvh - 70px);

   border:none;

   border-radius:12px;

   background:#000;

   flex-shrink:1;
}


/* =========================================================
   YOUTUBE / SHORTS POPUP BEHAVIOR
   ========================================================= */

.video-modal.video-playing .modal-close{
   top:-50px;
   right:0;
}


/* =========================================================
   VERTICAL YOUTUBE SHORTS
   ========================================================= */

.video-modal.vertical .video-modal-content{
   width:min(95vw,520px);

   max-width:520px;

   max-height:calc(100dvh - 24px);

   margin:0;
}

.video-modal.vertical iframe{
   width:auto;

   max-width:100%;

   height:min(85dvh,760px);

   max-height:calc(100dvh - 60px);

   aspect-ratio:9/16;

   border-radius:12px;
}


/* =========================================================
   IMAGE VIEWER
   ========================================================= */

.video-modal-content .image-viewer-area{
   width:100%;

   max-width:100%;

   height:auto;

   max-height:calc(100dvh - 90px);

   min-height:0;

   display:flex;

   align-items:center;
   justify-content:center;

   overflow:hidden;

   border-radius:12px;

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

   flex:0 1 auto;
}


/*
   Images are centered inside the viewer and constrained
   by BOTH screen width and screen height.
*/

.video-modal img#mediaImage{
   display:block;

   width:auto;

   height:auto;

   max-width:100%;

   max-height:calc(100dvh - 110px);

   object-fit:contain;

   border-radius:12px;

   background:transparent;

   margin:auto;
}


/* =========================================================
   MODAL CLOSE
   ========================================================= */

.modal-close{
   position:absolute;

   top:-5px;
   right:-5px;

   z-index:10;

   width:42px;
   height:42px;

   border:none;

   border-radius:50%;

   background:#fac400;

   color:#000;

   font-size:22px;

   cursor:pointer;

   font-weight:bold;

   display:flex;

   align-items:center;
   justify-content:center;
}

.modal-close:hover{
   background:#fff;
}


/* =========================================================
   IMAGE PREVIOUS / NEXT
   ========================================================= */

.image-nav{
   position:absolute;

   top:50%;

   transform:translateY(-50%);

   z-index:5;

   width:48px;
   height:48px;

   border:0;

   border-radius:50%;

   background:rgba(250,196,0,.95);

   color:#000;

   font-size:40px;
   line-height:40px;

   cursor:pointer;

   display:flex;

   align-items:center;
   justify-content:center;

   box-shadow:
      0 5px 20px rgba(0,0,0,.3);
}

.image-nav:hover{
   background:#fff;
}

.image-nav-prev{
   left:10px;
}

.image-nav-next{
   right:10px;
}

.image-nav.hidden{
   display:none;
}


/* =========================================================
   IMAGE THUMBNAIL STRIP
   ========================================================= */

.image-thumbnails{
   width:100%;
   max-width:100%;

   display:flex;

   gap:10px;

   overflow-x:auto;
   overflow-y:hidden;

   padding:4px 4px 8px;

   scroll-behavior:smooth;

   scrollbar-width:thin;

   min-width:0;

   flex-shrink:0;
}

.image-thumbnails::-webkit-scrollbar{
   height:7px;
}

.image-thumb{
   flex:0 0 72px;

   width:72px;
   height:58px;

   padding:2px;

   border:2px solid transparent;

   border-radius:8px;

   background:#fff;

   cursor:pointer;

   overflow:hidden;
}

.image-thumb img{
   width:100%;
   height:100%;

   object-fit:contain;

   display:block;

   border-radius:5px;
}

.image-thumb.active{
   border-color:#fac400;
}


/* =========================================================
   GENERAL SLIDER NAVIGATION
   ========================================================= */

.slider-buttons{
   display:flex;

   justify-content:center;

   gap:20px;

   margin-top:10px;
   margin-bottom:70px;
}

.slider-buttons button{
   background:#000;
   color:#fff;

   border:none;

   padding:12px 30px;

   border-radius:30px;

   cursor:pointer;
}

.slider-buttons button:hover{
   opacity:.85;
}


/* =========================================================
   INTENTIONAL HORIZONTAL SLIDER
   Product / Course / Gallery
   ========================================================= */

.slider-box{
   display:flex;

   gap:25px;

   width:100%;
   max-width:100%;

   min-width:0;

   overflow-x:auto;
   overflow-y:hidden;

   scroll-behavior:smooth;

   scroll-snap-type:x mandatory;

   scrollbar-width:none;
}

.slider-box::-webkit-scrollbar{
   display:none;
}

.slider-box .product-card{
   flex:0 0 280px;

   width:280px;
   min-width:280px;
   max-width:280px;

   scroll-snap-align:start;
}

.course-card{
   flex:0 0 280px;

   width:280px;
   min-width:280px;
   max-width:280px;
}

@media(max-width:600px){

   .slider-box{
      gap:15px;
   }

   .slider-box .product-card,
   .course-card{
      flex:0 0 85%;

      width:85%;
      min-width:85%;
      max-width:85%;
   }

}


/* =========================================================
   MOBILE PRODUCT SPACING
   ========================================================= */

@media(max-width:768px){

   .products{
      padding-top:25px;
      padding-bottom:25px;
   }

   .products .hero-subtitle{
      margin-bottom:50px;
   }

   .product-section-title{
      font-size:25px;

      margin-top:45px;
      margin-bottom:50px;
   }

}


/* =========================================================
   CART PAGE
   ========================================================= */

.cart-row{
   display:flex;

   align-items:center;

   justify-content:space-between;

   flex-wrap:wrap;

   gap:18px;

   width:100%;
   max-width:100%;

   min-width:0;

   background:#fff;

   box-shadow:0 5px 15px #ddd;

   padding:20px;

   margin-bottom:50px;

   border-radius:10px;
}

.cart-row > *{
   min-width:0;
   max-width:100%;
}

.cart-row button{
   background:#ffc400;

   color:#000;

   border:none;

   padding:8px 15px;

   border-radius:20px;

   cursor:pointer;
}

.cart-product-media{
   width:130px;

   max-width:100%;

   flex:0 0 130px;

   text-align:center;
}

.cart-product-media > img{
   width:130px;
   height:110px;

   max-width:100%;

   object-fit:contain;

   border-radius:10px;

   background:#f7f7f7;

   margin:0 auto 8px;
}

.cart-image-preview{
   margin-bottom:0 !important;
   font-size:11px;
}


/* =========================================================
   CHECKOUT
   ========================================================= */

.checkout-btn{
   background:#000;

   color:#fff;

   padding:15px 30px;

   border:none;

   border-radius:30px;

   font-weight:bold;

   cursor:pointer;

   margin-top:45px;
}


/* =========================================================
   CART MOBILE
   ========================================================= */

@media(max-width:600px){

   .cart-row{
      align-items:flex-start;

      padding:15px;

      gap:12px;
   }

   .cart-product-media{
      width:100%;
      flex:0 0 100%;
   }

   .cart-product-media > img{
      width:150px;
      height:120px;

      margin-left:auto;
      margin-right:auto;
   }

}


/* =========================================================
   MODAL MOBILE
   ========================================================= */

@media(max-width:600px){

   /*
      Keep the modal centered in the viewport.
      DO NOT add top/bottom margins to .video-modal-content.
   */

   .video-modal{
      padding:8px;

      align-items:center;
      justify-content:center;

      height:100dvh;
   }

   .video-modal-content{
      position:relative;

      top:auto;
      left:auto;

      transform:none;

      margin:0;

      width:95vw;
      max-width:95vw;

      max-height:calc(100dvh - 16px);

      display:flex;

      align-items:center;
      justify-content:center;
   }

   .video-modal iframe{
      width:100%;

      max-width:100%;

      max-height:calc(100dvh - 70px);

      aspect-ratio:16/9;
   }

   .video-modal.vertical .video-modal-content{
      width:95vw;
      max-width:95vw;

      max-height:calc(100dvh - 16px);

      margin:0;
   }

   .video-modal.vertical iframe{
      width:auto;

      max-width:95vw;

      height:auto;

      max-height:calc(100dvh - 70px);

      aspect-ratio:9/16;
   }

   .video-modal-content .image-viewer-area{
      width:100%;

      height:auto;

      max-height:calc(100dvh - 90px);

      min-height:0;
   }

   .video-modal img#mediaImage{
      max-width:100%;

      max-height:calc(100dvh - 100px);
   }

   /*
      Close button stays above the video when playing.
   */

   .video-modal.video-playing .modal-close{
      top:-48px;
      right:0;
   }

   .image-nav{
      width:40px;
      height:40px;

      font-size:32px;
      line-height:32px;
   }

   .image-nav-prev{
      left:4px;
   }

   .image-nav-next{
      right:4px;
   }

   .image-thumb{
      flex-basis:62px;

      width:62px;
      height:52px;
   }

   .modal-close{
      top:4px;
      right:4px;
   }

}


/* =========================================================
   VERY SMALL MOBILE SCREENS
   ========================================================= */

@media(max-width:380px){

   .video-modal{
      padding:5px;
   }

   .video-modal-content{
      width:96vw;
      max-width:96vw;

      max-height:calc(100dvh - 10px);
   }

   .video-modal.vertical .video-modal-content{
      width:96vw;
      max-width:96vw;
   }

   .video-modal iframe{
      max-width:96vw;
   }

   .video-modal.vertical iframe{
      max-width:96vw;
      max-height:calc(100dvh - 65px);
   }

}


/* =========================================================
   FOOTER
   ========================================================= */

footer{
   margin-top: 3rem;
   margin-bottom: 0px;
   background:#000;
   color:#fff;
   padding:30px;
   text-align:center;
}


/* =========================================================
   PRODUCT IMAGE TAP / SLIDE LOOP
   ========================================================= */

.product-image-slider{
   position:relative;

   width:100%;
   height:240px;

   overflow:hidden;

   border-radius:10px;

   margin-bottom:12px;

   cursor:pointer;
}

.product-image-slider img{
   position:absolute;

   top:0;
   left:0;

   width:100%;
   height:100%;

   object-fit:contain;

   background:#fff;

   transform:translateX(0);

   transition:transform .45s ease;

   will-change:transform;
}


/*
   Each image starts immediately after
   the previous image
*/


/* Hover to show second image */

.product-image-slider:hover img:nth-child(1){
   transform:translateX(-100%);
}

.product-image-slider:hover img:nth-child(2){
   transform:translateX(0);
}

.product-image-slider img:nth-child(2){
   transform:translateX(100%);
}

.product-image-slider img:nth-child(3){
   transform:translateX(200%);
}

.product-image-slider img:nth-child(4){
   transform:translateX(300%);
}

.product-image-slider img:nth-child(5){
   transform:translateX(400%);
}

.product-image-slider img:nth-child(6){
   transform:translateX(500%);
}


/* =========================================================
   BOTTOM BUTTONS SCROLL
   ========================================================= */


/* ================= ACTION BUTTONS ROW ================= */

.action-row-wrapper{
   position:relative;
   padding:10px 15px;
}

.action-row{
   display:flex;

   gap:16px;

   overflow-x:auto;

   scroll-behavior:smooth;

   scrollbar-width:none;

   padding-bottom:6px;

   -webkit-overflow-scrolling:touch;
}

.action-row::-webkit-scrollbar{
   display:none;
}

.action-btn{
   flex:0 0 240px;

   min-width:240px;

   text-align:center;

   padding:16px 14px;

   border:none;

   border-radius:14px;

   font-size:0.92rem;

   font-weight:bold;

   cursor:pointer;

   text-decoration:none;

   color:white;

   white-space:nowrap;

   overflow:hidden;

   text-overflow:ellipsis;

   transition:
      transform 0.25s ease,
      box-shadow 0.25s ease;

   box-shadow:0 4px 14px rgba(0,0,0,0.35);

   display:flex;

   align-items:center;
   justify-content:center;
}

.action-btn:hover{
   transform:translateY(-4px) scale(1.03);

   box-shadow:0 8px 20px rgba(0,0,0,0.5);
}

.btn-blue{
   background:linear-gradient(135deg,#38bdf8,#1d4ed8);
}

.btn-gold{
   background:linear-gradient(135deg,#fde047,#fac400);
   color:#1a1a1a;
}

.btn-green{
   background:linear-gradient(135deg,#34d399,#059669);
}

.btn-indigo{
   background:linear-gradient(135deg,#818cf8,#4f46e5);
}

.btn-pink{
   background:linear-gradient(135deg,#f472b6,#db2777);
}

.btn-teal{
   background:linear-gradient(135deg,#2dd4bf,#0d9488);
}


/* Tablet & up: show 3 buttons */

@media(min-width:768px){

   .action-btn{
      flex:0 0 calc(33.333% - 11px);
   }

}


/* Desktop: show approximately 4–5 buttons */

@media(min-width:1024px){

   .action-btn{
      flex:0 0 calc(20% - 13px);
   }

}


/* =========================================================
   YOUTUBE GALLERY LINKS
   ========================================================= */

.video-thumb-link{
   display:block;

   text-decoration:none;

   cursor:pointer;
}