/* Add custom CSS styles below */ 
/* 1) Hide the search bar row above the header (search moves into the header as an icon) */
header.store-header .top-navbar { display: none !important; }




/* Custom search icon button injected into the header via JS */
.custom-header-search-btn { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; margin: 0; margin-inline-end: 16px; border: 1px solid #E5E7EB; border-radius: 9999px; background: transparent; cursor: pointer; color: inherit; }
.custom-header-search-btn svg { width: 20px; height: 20px; }




/* 2) Homepage: transparent header overlaying the full-screen hero video.
   After the first scroll (html.kkk-scrolled, set by the custom JS) the header becomes the normal solid white sticky header.
   The header keeps its real height in the page flow; the hero video is pulled up underneath it. */
body.index .main-nav-container { position: relative; z-index: 30; }
body.index .main-nav-container,
body.index .main-nav-container .inner { background: transparent !important; box-shadow: none !important; }
body.index .main-nav-container .inner { z-index: 999; transition: background-color .25s ease, box-shadow .25s ease; }
html.kkk-scrolled body.index .main-nav-container .inner { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; transform: none !important; background: #fff !important; box-shadow: 0 2px 10px rgba(0,0,0,.12) !important; }
body.index .s-block--bundle-hero-video { margin-top: calc(-1 * var(--kkk-header-height, 84px)) !important; }

/* 3) Fix vertical alignment of nav menu links in the header (custom-main-menu was not flex, causing its content to sit at the top instead of centered) */
custom-main-menu { display: flex !important; align-items: center !important; }

/* 4) Keep the animated marquee bar ABOVE the header (pure CSS, no JS offsets).
   #main-content becomes display:contents so the marquee can be re-ordered inside the flex column of .app-inner. */
body.index .app-inner > salla-advertisement { order: -2; }
body.index #main-content { display: contents; }
body.index #main-content > .s-block--bundle-marquee { order: -1; margin-top: 0 !important; }

/* 5) Product images: source photos are very tall (300x900 = 1:3) so cards and the product gallery inherit that ratio.
   Fixed-ratio box + object-fit:contain shows the whole image without cropping or re-uploading. */
:root { --kkk-card-ratio: 3 / 4; --kkk-pdp-ratio: 1 / 1; }
.s-product-card-entry.s-product-card-vertical .s-product-card-image { aspect-ratio: var(--kkk-card-ratio); height: auto !important; }
.s-product-card-entry.s-product-card-vertical .s-product-card-image > a { display: block; width: 100%; height: 100%; }
.s-product-card-entry.s-product-card-vertical .s-product-card-image img { width: 100% !important; height: 100% !important; object-fit: contain !important; }
.details-slider .homeslider__slide { display: block; aspect-ratio: var(--kkk-pdp-ratio); }
.details-slider .homeslider__slide img { width: 100% !important; height: 100% !important; object-fit: contain !important; }
.details-slider .slide--one-fourth { aspect-ratio: 1 / 1; }
.details-slider .slide--one-fourth img { object-fit: contain !important; }


/* 6) Hover zoom on the product image only. The card does not move or resize:
   the image box keeps its fixed aspect-ratio and clips the overflow, so only the picture scales.
   The zoom is anchored on the label area (Fayrouz wordmark + the fruit).
   Tune: --kkk-zoom = how strong, --kkk-zoom-focus = which part of the photo stays in frame. */
:root { --kkk-zoom: 1.5; --kkk-zoom-focus: 35%; }
.s-product-card-entry.s-product-card-vertical .s-product-card-image { overflow: hidden; }
.s-product-card-entry.s-product-card-vertical .s-product-card-image img { transform-origin: 50% var(--kkk-zoom-focus, 35%); transition: transform .5s cubic-bezier(.22,.61,.36,1); will-change: transform; }
.s-product-card-entry.s-product-card-vertical:hover .s-product-card-image img { transform: scale(var(--kkk-zoom, 1.5)); }
@media (hover: none) { .s-product-card-entry.s-product-card-vertical:hover .s-product-card-image img { transform: none; } }