#fw-section-image-with-text-a1aaaf09-a011-4f71-9b50-b4e38916e7df {

@media screen and (max-width: 767px) {
    /* 1. Resetujeme mriežku (grid) - vynútime, aby stĺpec zabral 100% */
    .grid_column[class*="grid_column--"],
    .grid_column {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        display: block !important;
        padding: 0 !important;
    }

    /* 2. Kontajner obrázka - tu mu musíme vnútiť výšku, aby fungoval cover */
    .image-with-text__image-container {
        display: block !important;
        width: 100% !important;
        height: 350px !important; /* Výška coveru */
        padding: 0 0px !important; /* Lícovanie s textom */
        box-sizing: border-box !important;
    }

    /* 3. Samotný obrázok - toto ho musí roztiahnuť */
    .image-with-text__image-container img,
    .image-with-text__image {
        width: 100% !important;
        height: 100% !important;
        min-width: 100% !important;
        min-height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
        display: block !important;
        margin: 0 !important;
        border-radius: 12px !important;
    }
}
}
#fw-section-image-7c226efd-68d6-432c-b283-fbbd102ae65d {

/* 1. Kontajneru povieme, aby zabral celú šírku */
.image-section__image-container {
    display: block !important; /* Zmeníme z flex na block, aby sa ľahšie naťahoval */
    width: 100% !important;
    height: auto !important; /* Tu MUSÍŠ zadať výšku, ktorú má obrázok vyplniť */
    overflow: hidden !important; /* Aby orezané časti netrčali von */
    padding: 0 0px !important; /* Aby lícoval s tvojím menu/textom */
    box-sizing: border-box !important;
}

/* 2. Samotnému obrázku vnútri povieme, aby sa správal ako cover */
.image-section__image-container img {
    width: 100% !important;
    height: 100% !important; /* Vyplní celých 300px výšky kontajnera */
    object-fit: cover !important; /* Toto je tá kľúčová vlastnosť */
    object-position: center !important; /* Vycentruje orezanie */
    display: block !important;
}
}







#fw-section-image-9cdc2b44-1990-46b7-b964-adeaeb901fbb {

/* 1. Kontajneru povieme, aby zabral celú šírku */
.image-section__image-container {
    display: block !important; /* Zmeníme z flex na block, aby sa ľahšie naťahoval */
    width: 100% !important;
    height: auto !important; /* Tu MUSÍŠ zadať výšku, ktorú má obrázok vyplniť */
    overflow: hidden !important; /* Aby orezané časti netrčali von */
    padding: 0 0px !important; /* Aby lícoval s tvojím menu/textom */
    box-sizing: border-box !important;
}

/* 2. Samotnému obrázku vnútri povieme, aby sa správal ako cover */
.image-section__image-container img {
    width: 100% !important;
    height: 100% !important; /* Vyplní celých 300px výšky kontajnera */
    object-fit: cover !important; /* Toto je tá kľúčová vlastnosť */
    object-position: center !important; /* Vycentruje orezanie */
    display: block !important;
}
}

#fw-section-image-with-text-45bb08f8-68ac-46d2-92d8-18c1d48cbb65 {

@media screen and (max-width: 767px) {
    /* 1. Resetujeme mriežku (grid) - vynútime, aby stĺpec zabral 100% */
    .grid_column[class*="grid_column--"],
    .grid_column {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        display: block !important;
        padding: 0 !important;
    }

    /* 2. Kontajner obrázka - tu mu musíme vnútiť výšku, aby fungoval cover */
    .image-with-text__image-container {
        display: block !important;
        width: 100% !important;
        height: 350px !important; /* Výška coveru */
        padding: 0 0px !important; /* Lícovanie s textom */
        box-sizing: border-box !important;
    }

    /* 3. Samotný obrázok - toto ho musí roztiahnuť */
    .image-with-text__image-container img,
    .image-with-text__image {
        width: 100% !important;
        height: 100% !important;
        min-width: 100% !important;
        min-height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
        display: block !important;
        margin: 0 !important;
        border-radius: 12px !important;
    }
}
}
#fw-section-collection-template {
--font-heading-scale: 0.7;
--font-body-scale: 1.0;
}
#fw-section-collection-template {

/* 1. Global Variable Overwrite */
:root, html, body {
    --image-ratio-padding: 100% !important;
}

/* 2. Target all product containers globally */
[class*="product-card"], 
[class*="tile"],
.product-grid-item {
    --image-ratio-padding: 100% !important;
}

/* 3. Force Aspect Ratio & Fix Image Stretching */
.product-card__image-wrapper,
.tile__image-wrapper,
.tile__image {
    aspect-ratio: 1 / 1 !important;
    padding-top: 0 !important;
    height: auto !important;
    display: block !important;
}

/* 4. Ensure images fill the square perfectly */
.tile__image img, 
.product-card__image img,
img[class*="tile"],
img[class*="product"] {
    object-fit: cover !important;
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
}
}
#fw-section-collection-template-collection-music-collection {
--font-heading-scale: 0.7;
--font-body-scale: 1.0;
}
#fw-section-collection-template-collection-music-collection {

/* Vynútenie striktného štvorca 1:1 a zaoblených rohov pre kontajner */
.product-tile__image-wrapper, 
.tile__image,
.aspect-ratio-box,
[class*="image-wrapper"] {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    padding-top: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important; /* Toto orieže obrázok do štvorca */
    border-radius: 8px !important; /* Pridaj tento riadok pre zaoblené rohy (nastav si px podľa chuti, napr. 8px) */
    background-color: transparent !important;
}
}

#fw-section-recent-videos-14eaf389-4260-4417-9975-d0b112f6ec69 {

    .video-tile__title {
        font-size: calc(var(--font-heading-scale) * 0.9rem);
    }
}
#fw-section-hero-b212fed1-4a33-4173-b327-2ffde9e2428d {
--font-heading-scale: 0.8;
--font-body-scale: 1.1;
}
#fw-section-hero-b212fed1-4a33-4173-b327-2ffde9e2428d {

@media screen and (max-width: 767px) {
    /* 1. Rozbijeme všetky obmedzujúce kontajnery v hero sekcii */
    [class*="hero"] [class*="wrapper"], 
    [class*="hero"] [class*="container"],
    .hero__inner {
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* 2. Vynútené roztiahnutie obrázka na celú šírku okna (Viewport Width) */
    .hero__images {
        display: block !important;
        position: absolute !important;
        top: 0 !important;
        /* Toto ho natvrdo vycentruje a roztiahne na šírku displeja */
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 100vw !important; 
        
        height: 100% !important;
        z-index: 1 !important;
        opacity: 0.3 !important;
        overflow: hidden !important;
    }

    /* 3. Samotný tag obrázka */
    .hero__images img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }

    /* 4. Oprava textu - musí mať padding, aby sa nedotýkal okrajov */
    .hero__content {
        position: relative !important;
        z-index: 10 !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 5. Zabezpečíme, aby celá stránka nemala horizontálny posuvník */
    body, html {
        overflow-x: hidden !important;
    }
}

@media (min-width: 1440px) {
    .hero__inner {
        padding-top: 240px;
        padding-bottom: 180px;
    }
}

@media (min-width: 640px) {
    .hero__inner {
        padding-top: 240px;
        padding-bottom: 160px;
    }
}

/* 1. Zacielenie na konkrétny kontajner s inline štýlom */
div.container.container--10[style*="margin-left"] {
    margin-left: 0 !important;
}

/* 2. Pre istotu vynulovanie na všetkých úrovniach v hero sekcii na desktope aj mobile */
.hero__inner div[class*="container--"] {
    margin-left: 0 !important;
    padding-left: 0 !important;
    max-width: 100% !important;
}

/* 3. Samotný obsah (text) - ak chceš úplné zarovnanie, daj 0px */
.hero__content {
    padding-left: 0 !important;
    margin-left: 0 !important;
}

@media screen and (max-width: 767px) {
    /* 1. Nastavíme kontajner tak, aby tlačil obsah nadol */
    .hero__inner {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-end !important; /* Toto prichytí text k spodku */
        align-items: center !important;    /* Toto udrží stredovú os */
        min-height: 80vh !important;       /* Výška bannera */
        padding-bottom: 40px !important;    /* Odstup od úplnej hrany */
    }

    /* 2. Samotný obsah textu */
    .hero__content {
        padding-left: 20px !important;
        padding-right: 20px !important;
        box-sizing: border-box !important;
        text-align: center !important;
        width: 100% !important;
    }

    /* 3. Reset marginov pre nadpis a popis */
    .hero__content h1, 
    .hero__content p {
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0 !important;
        width: 100% !important;
    }

    /* 4. Tlačidlo v strede - FIXED ALIGNMENT */
    .hero__content .button, 
    .hero__content a {
        display: inline-flex !important;
        align-items: center !important;    /* Vertical center */
        justify-content: center !important; /* Horizontal center */
        text-align: center !important;
        margin-top: 20px !important;
        min-width: 160px; /* Optional: ensures enough space for centering */
    }
}
}
#fw-section-featured-collection-0 {

/* Target the specific container where the variable is defined */
html, body, #__next, .featured-collection {
    --image-ratio-padding: 100% !important;
}

/* Force the image wrapper to respect the 1:1 ratio */
.product-tile__image-wrapper, 
.tile__image {
    aspect-ratio: 1 / 1 !important;
    padding-top: 0 !important; /* This kills the old padding-based height */
    height: auto !important;
}

/* Ensure the image itself fills the square */
.tile__image img, 
img.tile__image {
    object-fit: cover !important;
    height: 100% !important;
    width: 100% !important;
    position: relative !important;
}
}
#fw-section-collections-list-67dc86a7-a78f-4ca3-95db-2a7f73671494 {

#hero-section-id { /* Nahraď reálnym ID z Inspectoru */
    width: 100vw;
    margin-left: calc(-50vw + 50%);
}
}


#fw-section-recent-videos-c120237e-c372-460c-a0d3-8ca05aa7989c {

    .video-tile__title {
        font-size: calc(var(--font-heading-scale) * 1rem);
    }
}
#fw-section-recent-posts-bffe4b6f-31b7-40c0-a7a0-bc3315d26742 {
--font-heading-scale: 1.2;
--font-body-scale: 1.0;
}
#fw-section-donations-81b38696-2f86-43d0-8621-9ffdd4be2624 {
--font-heading-scale: 1.0;
--font-body-scale: 1.1;
}


#fw-section-footer {
--font-heading-scale: 1.2;
--font-body-scale: 1.2;
}
#fw-section-announcement-bar-25754d38-e0c1-4d80-9a7f-9f845e65aeab {
--font-heading-scale: 1.45;
--font-body-scale: 0.9;
}
#fw-section-announcement-bar-25754d38-e0c1-4d80-9a7f-9f845e65aeab {
--color-primary: #79643f;
--color-primary-rgb: 121, 100, 63;
--color-background: #1e1e1e;
--color-background-rgb: 30, 30, 30;
--color-on-background: #ffffff;
--color-on-background-rgb: 255, 255, 255;
--color-on-primary: #ffffff;
--color-on-primary-rgb: 255, 255, 255;
--color-product-image-background: #ffffff;
--color-background-brightness: 30;
background-color: var(--color-background);
color: var(--color-on-background);
--primary-btn-bg: #79643f;
--primary-btn-text: #ffffff;
--primary-btn-border-color: #ffffff;
--secondary-btn-bg: transparent;
--secondary-btn-text: #ffffff;
--secondary-btn-border-color: #ffffff;

}
#fw-section-header {
--font-heading-scale: 1.0;
--font-body-scale: 1.4;
}
#fw-section-product-product-music {
--font-heading-scale: 0.7;
--font-body-scale: 1.0;
}
#fw-section-product-product-music {

/* 1. Global Variable Force - This hits every page */
:root, html, body, [class*="product"] {
    --image-ratio-padding: 100% !important;
}

/* 2. Fix for Product Page Gallery & Main Image */
.product-gallery,
.product-gallery__viewport,
.product-gallery__slide-content,
[data-testid="product-gallery"] {
    aspect-ratio: 1 / 1 !important;
    padding-top: 0 !important;
    height: auto !important;
}

/* 3. Force the actual images to fill the new square */
.product-gallery__image img,
.product-gallery img,
.tile__image img,
img[class*="product-card"],
img[class*="tile"] {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Crops the long edges of the phone case to fit the square */
    object-position: center !important;
    position: relative !important;
}

/* 4. Fix for the Thumbnail images below the main photo */
.product-gallery__thumbnails-item, 
.product-gallery__thumbnail {
    aspect-ratio: 1 / 1 !important;
    padding-top: 0 !important;
}



/* 1. Úplne zruší tých 90px, ktoré si systém rezervuje pre náhľady */
.gallery__thumbs {
    display: none !important;
    flex: 0 0 0 !important;
    width: 0 !important;
    margin: 0 !important;
}

/* 2. Povie hlavnému kontajneru galérie, aby sa roztiahol na 100% a ignoroval odsadenie */
.gallery__product {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* 3. Zaistí, aby celá mriežka produktu lícovala s okrajom pod logom */
.product__main .grid {
    margin-left: 0 !important;
    padding-left: 0 !important;
    display: flex !important;
}

/* 4. Odstránenie paddingu z ľavej strany prvého stĺpca (kde je obrázok) */
.product__main .grid__column:first-child {
    padding-left: 0 !important;
}

/* 5. Zväčšenie celkovej šírky, aby to lícovalo s logom BSW */
.product__main {
    max-width: 1400px !important; /* Uprav podľa potreby, aby to sedelo s hlavičkou */
    margin-left: auto !important;
    margin-right: auto !important;
}





/* Zakáže interakciu na úrovni kontajnerov, aby sa JS kód ani nespustil */
.product-gallery, 
[class*="ProductGallery"], 
[class*="image-zoom"], 
[class*="zoom-container"] {
  pointer-events: none !important;
}

/* Vynútené zrušenie transformácie pre všetky obrázky */
img {
  pointer-events: none !important;
  transform: none !important;
  transition: none !important;
}



}


#fw-section-product-recommendations-product-music {

/* 1. Nastavenie štvorcového kontajnera s pozadím */
.tile--zoom .tile__image {
    aspect-ratio: 1 / 1 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #121212 !important; /* Pridá tmavé pozadie, ak je obrázok užší/nižší */
    border-radius: 12px !important;
    
    /* Úplné vypnutie animácií a zväčšovania */
    transform: none !important;
    transition: none !important;
}

/* 2. Zobrazenie CELÉHO obrázka (Contain) */
.tile--zoom .tile__image img {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important; /* <--- ZMENA: Toto zobrazí celý obrázok bez orezu */
    object-position: center !important;
    
    /* Vypnutie akéhokoľvek zoomu na samotnom obrázku */
    transform: none !important;
    transition: none !important;
    border-radius: 0 !important;
}

/* 3. Poistka proti hover efektom */
.tile--zoom:hover .tile__image,
.tile--zoom:hover .tile__image img {
    transform: none !important;
    scale: 1 !important;
}
}
#fw-section-product {
--font-heading-scale: 0.7;
--font-body-scale: 1.0;
}
#fw-section-product {

/* 1. Globálne nastavenie premenných na štvorec 1:1 */
:root, [class*="product"], [class*="image-section"], [class*="image-with-text"] {
    /* Pomer 1:1 znamená, že výška je 100% šírky */
    --image-ratio-padding: 100% !important;
}

/* 2. Resetovanie kontajnerov na čistý štvorec */
.product-gallery__viewport,
.product-gallery__image-container,
.image-with-text__image-container,
.image-section__image-container,
[class*="image-container"],
.aspect-ratio-box {
    aspect-ratio: 1 / 1 !important; /* Šírka 1, Výška 1 */
    padding-top: 0 !important; /* Vypnutie systémového miesta, ktoré robí biele pruhy */
    height: auto !important;
    position: relative !important;
    overflow: hidden !important;
    display: block !important;
}

/* 3. Absolútne vynútenie COVER štýlu - toto vyplní štvorec bez bielych okrajov */
[class*="image-container"] img,
.product-gallery__image img,
.image-with-text__image,
.image-section__image-container img,
.tile__image img,
.product-card__image img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    
    /* Toto zabezpečí, že obrázok vyplní celý štvorec a prípadne oreže prebytočné boky/vrch */
    object-fit: cover !important;
    object-position: center !important;
    
    max-width: none !important;
    display: block !important;
    transform: none !important;
}

/* 4. Fix pre mobil - aby obrázky lícovali s okrajom alebo textom */
@media screen and (max-width: 767px) {
    .image-section__image-container,
    .image-with-text__image-container,
    .product-gallery {
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
    }
}
}
#fw-section-product-recommendations {

/* 1. Nastavenie štvorcového kontajnera s pozadím */
.tile--zoom .tile__image {
    aspect-ratio: 1 / 1 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #121212 !important; /* Pridá tmavé pozadie, ak je obrázok užší/nižší */
    border-radius: 12px !important;
    
    /* Úplné vypnutie animácií a zväčšovania */
    transform: none !important;
    transition: none !important;
}

/* 2. Zobrazenie CELÉHO obrázka (Contain) */
.tile--zoom .tile__image img {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important; /* <--- ZMENA: Toto zobrazí celý obrázok bez orezu */
    object-position: center !important;
    
    /* Vypnutie akéhokoľvek zoomu na samotnom obrázku */
    transform: none !important;
    transition: none !important;
    border-radius: 0 !important;
}

/* 3. Poistka proti hover efektom */
.tile--zoom:hover .tile__image,
.tile--zoom:hover .tile__image img {
    transform: none !important;
    scale: 1 !important;
}
}
#fw-section-product-product-iberia {
--font-heading-scale: 0.7;
--font-body-scale: 1.0;
}
#fw-section-product-product-iberia {

/* 1. Global Variable Force - This hits every page */
:root, html, body, [class*="product"] {
    --image-ratio-padding: 100% !important;
}

/* 2. Fix for Product Page Gallery & Main Image */
.product-gallery,
.product-gallery__viewport,
.product-gallery__slide-content,
[data-testid="product-gallery"] {
    aspect-ratio: 1 / 1 !important;
    padding-top: 0 !important;
    height: auto !important;
}

/* 3. Force the actual images to fill the new square */
.product-gallery__image img,
.product-gallery img,
.tile__image img,
img[class*="product-card"],
img[class*="tile"] {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Crops the long edges of the phone case to fit the square */
    object-position: center !important;
    position: relative !important;
}

/* 4. Fix for the Thumbnail images below the main photo */
.product-gallery__thumbnails-item, 
.product-gallery__thumbnail {
    aspect-ratio: 1 / 1 !important;
    padding-top: 0 !important;
}



/* 1. Úplne zruší tých 90px, ktoré si systém rezervuje pre náhľady */
.gallery__thumbs {
    display: none !important;
    flex: 0 0 0 !important;
    width: 0 !important;
    margin: 0 !important;
}

/* 2. Povie hlavnému kontajneru galérie, aby sa roztiahol na 100% a ignoroval odsadenie */
.gallery__product {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* 3. Zaistí, aby celá mriežka produktu lícovala s okrajom pod logom */
.product__main .grid {
    margin-left: 0 !important;
    padding-left: 0 !important;
    display: flex !important;
}

/* 4. Odstránenie paddingu z ľavej strany prvého stĺpca (kde je obrázok) */
.product__main .grid__column:first-child {
    padding-left: 0 !important;
}

/* 5. Zväčšenie celkovej šírky, aby to lícovalo s logom BSW */
.product__main {
    max-width: 1400px !important; /* Uprav podľa potreby, aby to sedelo s hlavičkou */
    margin-left: auto !important;
    margin-right: auto !important;
}





/* Zakáže interakciu na úrovni kontajnerov, aby sa JS kód ani nespustil */
.product-gallery, 
[class*="ProductGallery"], 
[class*="image-zoom"], 
[class*="zoom-container"] {
  pointer-events: none !important;
}

/* Vynútené zrušenie transformácie pre všetky obrázky */
img {
  pointer-events: none !important;
  transform: none !important;
  transition: none !important;
}



}

#fw-section-product-recommendations-product-iberia {

/* 1. Nastavenie štvorcového kontajnera s pozadím */
.tile--zoom .tile__image {
    aspect-ratio: 1 / 1 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #121212 !important; /* Pridá tmavé pozadie, ak je obrázok užší/nižší */
    border-radius: 12px !important;
    
    /* Úplné vypnutie animácií a zväčšovania */
    transform: none !important;
    transition: none !important;
}

/* 2. Zobrazenie CELÉHO obrázka (Contain) */
.tile--zoom .tile__image img {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important; /* <--- ZMENA: Toto zobrazí celý obrázok bez orezu */
    object-position: center !important;
    
    /* Vypnutie akéhokoľvek zoomu na samotnom obrázku */
    transform: none !important;
    transition: none !important;
    border-radius: 0 !important;
}

/* 3. Poistka proti hover efektom */
.tile--zoom:hover .tile__image,
.tile--zoom:hover .tile__image img {
    transform: none !important;
    scale: 1 !important;
}
}
#fw-section-product-product-kokos-10 {
--font-heading-scale: 0.7;
--font-body-scale: 1.0;
}
#fw-section-product-product-kokos-10 {

/* 1. Global Variable Force - This hits every page */
:root, html, body, [class*="product"] {
    --image-ratio-padding: 100% !important;
}

/* 2. Fix for Product Page Gallery & Main Image */
.product-gallery,
.product-gallery__viewport,
.product-gallery__slide-content,
[data-testid="product-gallery"] {
    aspect-ratio: 1 / 1 !important;
    padding-top: 0 !important;
    height: auto !important;
}

/* 3. Force the actual images to fill the new square */
.product-gallery__image img,
.product-gallery img,
.tile__image img,
img[class*="product-card"],
img[class*="tile"] {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Crops the long edges of the phone case to fit the square */
    object-position: center !important;
    position: relative !important;
}

/* 4. Fix for the Thumbnail images below the main photo */
.product-gallery__thumbnails-item, 
.product-gallery__thumbnail {
    aspect-ratio: 1 / 1 !important;
    padding-top: 0 !important;
}



/* 1. Úplne zruší tých 90px, ktoré si systém rezervuje pre náhľady */
.gallery__thumbs {
    display: none !important;
    flex: 0 0 0 !important;
    width: 0 !important;
    margin: 0 !important;
}

/* 2. Povie hlavnému kontajneru galérie, aby sa roztiahol na 100% a ignoroval odsadenie */
.gallery__product {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* 3. Zaistí, aby celá mriežka produktu lícovala s okrajom pod logom */
.product__main .grid {
    margin-left: 0 !important;
    padding-left: 0 !important;
    display: flex !important;
}

/* 4. Odstránenie paddingu z ľavej strany prvého stĺpca (kde je obrázok) */
.product__main .grid__column:first-child {
    padding-left: 0 !important;
}

/* 5. Zväčšenie celkovej šírky, aby to lícovalo s logom BSW */
.product__main {
    max-width: 1400px !important; /* Uprav podľa potreby, aby to sedelo s hlavičkou */
    margin-left: auto !important;
    margin-right: auto !important;
}





/* Zakáže interakciu na úrovni kontajnerov, aby sa JS kód ani nespustil */
.product-gallery, 
[class*="ProductGallery"], 
[class*="image-zoom"], 
[class*="zoom-container"] {
  pointer-events: none !important;
}

/* Vynútené zrušenie transformácie pre všetky obrázky */
img {
  pointer-events: none !important;
  transform: none !important;
  transition: none !important;
}





}

#fw-section-product-recommendations-product-kokos-10 {

/* 1. Nastavenie štvorcového kontajnera s pozadím */
.tile--zoom .tile__image {
    aspect-ratio: 1 / 1 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #121212 !important; /* Pridá tmavé pozadie, ak je obrázok užší/nižší */
    border-radius: 12px !important;
    
    /* Úplné vypnutie animácií a zväčšovania */
    transform: none !important;
    transition: none !important;
}

/* 2. Zobrazenie CELÉHO obrázka (Contain) */
.tile--zoom .tile__image img {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important; /* <--- ZMENA: Toto zobrazí celý obrázok bez orezu */
    object-position: center !important;
    
    /* Vypnutie akéhokoľvek zoomu na samotnom obrázku */
    transform: none !important;
    transition: none !important;
    border-radius: 0 !important;
}

/* 3. Poistka proti hover efektom */
.tile--zoom:hover .tile__image,
.tile--zoom:hover .tile__image img {
    transform: none !important;
    scale: 1 !important;
}
}
#fw-section-product-product-nordland {
--font-heading-scale: 0.7;
--font-body-scale: 1.0;
}
#fw-section-product-product-nordland {

/* 1. Global Variable Force - This hits every page */
:root, html, body, [class*="product"] {
    --image-ratio-padding: 100% !important;
}

/* 2. Fix for Product Page Gallery & Main Image */
.product-gallery,
.product-gallery__viewport,
.product-gallery__slide-content,
[data-testid="product-gallery"] {
    aspect-ratio: 1 / 1 !important;
    padding-top: 0 !important;
    height: auto !important;
}

/* 3. Force the actual images to fill the new square */
.product-gallery__image img,
.product-gallery img,
.tile__image img,
img[class*="product-card"],
img[class*="tile"] {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Crops the long edges of the phone case to fit the square */
    object-position: center !important;
    position: relative !important;
}

/* 4. Fix for the Thumbnail images below the main photo */
.product-gallery__thumbnails-item, 
.product-gallery__thumbnail {
    aspect-ratio: 1 / 1 !important;
    padding-top: 0 !important;
}



/* 1. Úplne zruší tých 90px, ktoré si systém rezervuje pre náhľady */
.gallery__thumbs {
    display: none !important;
    flex: 0 0 0 !important;
    width: 0 !important;
    margin: 0 !important;
}

/* 2. Povie hlavnému kontajneru galérie, aby sa roztiahol na 100% a ignoroval odsadenie */
.gallery__product {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* 3. Zaistí, aby celá mriežka produktu lícovala s okrajom pod logom */
.product__main .grid {
    margin-left: 0 !important;
    padding-left: 0 !important;
    display: flex !important;
}

/* 4. Odstránenie paddingu z ľavej strany prvého stĺpca (kde je obrázok) */
.product__main .grid__column:first-child {
    padding-left: 0 !important;
}

/* 5. Zväčšenie celkovej šírky, aby to lícovalo s logom BSW */
.product__main {
    max-width: 1400px !important; /* Uprav podľa potreby, aby to sedelo s hlavičkou */
    margin-left: auto !important;
    margin-right: auto !important;
}





/* Zakáže interakciu na úrovni kontajnerov, aby sa JS kód ani nespustil */
.product-gallery, 
[class*="ProductGallery"], 
[class*="image-zoom"], 
[class*="zoom-container"] {
  pointer-events: none !important;
}

/* Vynútené zrušenie transformácie pre všetky obrázky */
img {
  pointer-events: none !important;
  transform: none !important;
  transition: none !important;
}
}

#fw-section-product-recommendations-product-nordland {

/* 1. Nastavenie štvorcového kontajnera s pozadím */
.tile--zoom .tile__image {
    aspect-ratio: 1 / 1 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #121212 !important; /* Pridá tmavé pozadie, ak je obrázok užší/nižší */
    border-radius: 12px !important;
    
    /* Úplné vypnutie animácií a zväčšovania */
    transform: none !important;
    transition: none !important;
}

/* 2. Zobrazenie CELÉHO obrázka (Contain) */
.tile--zoom .tile__image img {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important; /* <--- ZMENA: Toto zobrazí celý obrázok bez orezu */
    object-position: center !important;
    
    /* Vypnutie akéhokoľvek zoomu na samotnom obrázku */
    transform: none !important;
    transition: none !important;
    border-radius: 0 !important;
}

/* 3. Poistka proti hover efektom */
.tile--zoom:hover .tile__image,
.tile--zoom:hover .tile__image img {
    transform: none !important;
    scale: 1 !important;
}
}
#fw-section-product-product-desert-azimuth {
--font-heading-scale: 0.7;
--font-body-scale: 1.0;
}
#fw-section-product-product-desert-azimuth {

/* 1. Global Variable Force - This hits every page */
:root, html, body, [class*="product"] {
    --image-ratio-padding: 100% !important;
}

/* 2. Fix for Product Page Gallery & Main Image */
.product-gallery,
.product-gallery__viewport,
.product-gallery__slide-content,
[data-testid="product-gallery"] {
    aspect-ratio: 1 / 1 !important;
    padding-top: 0 !important;
    height: auto !important;
}

/* 3. Force the actual images to fill the new square */
.product-gallery__image img,
.product-gallery img,
.tile__image img,
img[class*="product-card"],
img[class*="tile"] {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Crops the long edges of the phone case to fit the square */
    object-position: center !important;
    position: relative !important;
}

/* 4. Fix for the Thumbnail images below the main photo */
.product-gallery__thumbnails-item, 
.product-gallery__thumbnail {
    aspect-ratio: 1 / 1 !important;
    padding-top: 0 !important;
}



/* 1. Úplne zruší tých 90px, ktoré si systém rezervuje pre náhľady */
.gallery__thumbs {
    display: none !important;
    flex: 0 0 0 !important;
    width: 0 !important;
    margin: 0 !important;
}

/* 2. Povie hlavnému kontajneru galérie, aby sa roztiahol na 100% a ignoroval odsadenie */
.gallery__product {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* 3. Zaistí, aby celá mriežka produktu lícovala s okrajom pod logom */
.product__main .grid {
    margin-left: 0 !important;
    padding-left: 0 !important;
    display: flex !important;
}

/* 4. Odstránenie paddingu z ľavej strany prvého stĺpca (kde je obrázok) */
.product__main .grid__column:first-child {
    padding-left: 0 !important;
}

/* 5. Zväčšenie celkovej šírky, aby to lícovalo s logom BSW */
.product__main {
    max-width: 1400px !important; /* Uprav podľa potreby, aby to sedelo s hlavičkou */
    margin-left: auto !important;
    margin-right: auto !important;
}





/* Zakáže interakciu na úrovni kontajnerov, aby sa JS kód ani nespustil */
.product-gallery, 
[class*="ProductGallery"], 
[class*="image-zoom"], 
[class*="zoom-container"] {
  pointer-events: none !important;
}

/* Vynútené zrušenie transformácie pre všetky obrázky */
img {
  pointer-events: none !important;
  transform: none !important;
  transition: none !important;
}





}


#fw-section-product-recommendations-product-desert-azimuth {

/* 1. Nastavenie štvorcového kontajnera s pozadím */
.tile--zoom .tile__image {
    aspect-ratio: 1 / 1 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #121212 !important; /* Pridá tmavé pozadie, ak je obrázok užší/nižší */
    border-radius: 12px !important;
    
    /* Úplné vypnutie animácií a zväčšovania */
    transform: none !important;
    transition: none !important;
}

/* 2. Zobrazenie CELÉHO obrázka (Contain) */
.tile--zoom .tile__image img {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important; /* <--- ZMENA: Toto zobrazí celý obrázok bez orezu */
    object-position: center !important;
    
    /* Vypnutie akéhokoľvek zoomu na samotnom obrázku */
    transform: none !important;
    transition: none !important;
    border-radius: 0 !important;
}

/* 3. Poistka proti hover efektom */
.tile--zoom:hover .tile__image,
.tile--zoom:hover .tile__image img {
    transform: none !important;
    scale: 1 !important;
}
}
#fw-section-product-product-kokos-02 {
--font-heading-scale: 0.7;
--font-body-scale: 1.0;
}
#fw-section-product-product-kokos-02 {

/* 1. Global Variable Force - This hits every page */
:root, html, body, [class*="product"] {
    --image-ratio-padding: 100% !important;
}

/* 2. Fix for Product Page Gallery & Main Image */
.product-gallery,
.product-gallery__viewport,
.product-gallery__slide-content,
[data-testid="product-gallery"] {
    aspect-ratio: 1 / 1 !important;
    padding-top: 0 !important;
    height: auto !important;
}

/* 3. Force the actual images to fill the new square */
.product-gallery__image img,
.product-gallery img,
.tile__image img,
img[class*="product-card"],
img[class*="tile"] {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Crops the long edges of the phone case to fit the square */
    object-position: center !important;
    position: relative !important;
}

/* 4. Fix for the Thumbnail images below the main photo */
.product-gallery__thumbnails-item, 
.product-gallery__thumbnail {
    aspect-ratio: 1 / 1 !important;
    padding-top: 0 !important;
}



/* 1. Úplne zruší tých 90px, ktoré si systém rezervuje pre náhľady */
.gallery__thumbs {
    display: none !important;
    flex: 0 0 0 !important;
    width: 0 !important;
    margin: 0 !important;
}

/* 2. Povie hlavnému kontajneru galérie, aby sa roztiahol na 100% a ignoroval odsadenie */
.gallery__product {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* 3. Zaistí, aby celá mriežka produktu lícovala s okrajom pod logom */
.product__main .grid {
    margin-left: 0 !important;
    padding-left: 0 !important;
    display: flex !important;
}

/* 4. Odstránenie paddingu z ľavej strany prvého stĺpca (kde je obrázok) */
.product__main .grid__column:first-child {
    padding-left: 0 !important;
}

/* 5. Zväčšenie celkovej šírky, aby to lícovalo s logom BSW */
.product__main {
    max-width: 1400px !important; /* Uprav podľa potreby, aby to sedelo s hlavičkou */
    margin-left: auto !important;
    margin-right: auto !important;
}





/* Zakáže interakciu na úrovni kontajnerov, aby sa JS kód ani nespustil */
.product-gallery, 
[class*="ProductGallery"], 
[class*="image-zoom"], 
[class*="zoom-container"] {
  pointer-events: none !important;
}

/* Vynútené zrušenie transformácie pre všetky obrázky */
img {
  pointer-events: none !important;
  transform: none !important;
  transition: none !important;
}




}


#fw-section-product-recommendations-product-kokos-02 {

/* 1. Nastavenie štvorcového kontajnera s pozadím */
.tile--zoom .tile__image {
    aspect-ratio: 1 / 1 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #121212 !important; /* Pridá tmavé pozadie, ak je obrázok užší/nižší */
    border-radius: 12px !important;
    
    /* Úplné vypnutie animácií a zväčšovania */
    transform: none !important;
    transition: none !important;
}

/* 2. Zobrazenie CELÉHO obrázka (Contain) */
.tile--zoom .tile__image img {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important; /* <--- ZMENA: Toto zobrazí celý obrázok bez orezu */
    object-position: center !important;
    
    /* Vypnutie akéhokoľvek zoomu na samotnom obrázku */
    transform: none !important;
    transition: none !important;
    border-radius: 0 !important;
}

/* 3. Poistka proti hover efektom */
.tile--zoom:hover .tile__image,
.tile--zoom:hover .tile__image img {
    transform: none !important;
    scale: 1 !important;
}
}
#fw-section-product-product-rabat {
--font-heading-scale: 0.7;
--font-body-scale: 1.0;
}
#fw-section-product-product-rabat {

/* 1. Global Variable Force - This hits every page */
:root, html, body, [class*="product"] {
    --image-ratio-padding: 100% !important;
}

/* 2. Fix for Product Page Gallery & Main Image */
.product-gallery,
.product-gallery__viewport,
.product-gallery__slide-content,
[data-testid="product-gallery"] {
    aspect-ratio: 1 / 1 !important;
    padding-top: 0 !important;
    height: auto !important;
}

/* 3. Force the actual images to fill the new square */
.product-gallery__image img,
.product-gallery img,
.tile__image img,
img[class*="product-card"],
img[class*="tile"] {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Crops the long edges of the phone case to fit the square */
    object-position: center !important;
    position: relative !important;
}

/* 4. Fix for the Thumbnail images below the main photo */
.product-gallery__thumbnails-item, 
.product-gallery__thumbnail {
    aspect-ratio: 1 / 1 !important;
    padding-top: 0 !important;
}



/* 1. Úplne zruší tých 90px, ktoré si systém rezervuje pre náhľady */
.gallery__thumbs {
    display: none !important;
    flex: 0 0 0 !important;
    width: 0 !important;
    margin: 0 !important;
}

/* 2. Povie hlavnému kontajneru galérie, aby sa roztiahol na 100% a ignoroval odsadenie */
.gallery__product {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* 3. Zaistí, aby celá mriežka produktu lícovala s okrajom pod logom */
.product__main .grid {
    margin-left: 0 !important;
    padding-left: 0 !important;
    display: flex !important;
}

/* 4. Odstránenie paddingu z ľavej strany prvého stĺpca (kde je obrázok) */
.product__main .grid__column:first-child {
    padding-left: 0 !important;
}

/* 5. Zväčšenie celkovej šírky, aby to lícovalo s logom BSW */
.product__main {
    max-width: 1400px !important; /* Uprav podľa potreby, aby to sedelo s hlavičkou */
    margin-left: auto !important;
    margin-right: auto !important;
}





/* Zakáže interakciu na úrovni kontajnerov, aby sa JS kód ani nespustil */
.product-gallery, 
[class*="ProductGallery"], 
[class*="image-zoom"], 
[class*="zoom-container"] {
  pointer-events: none !important;
}

/* Vynútené zrušenie transformácie pre všetky obrázky */
img {
  pointer-events: none !important;
  transform: none !important;
  transition: none !important;
}



}

#fw-section-product-recommendations-product-rabat {

/* 1. Nastavenie štvorcového kontajnera s pozadím */
.tile--zoom .tile__image {
    aspect-ratio: 1 / 1 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #121212 !important; /* Pridá tmavé pozadie, ak je obrázok užší/nižší */
    border-radius: 12px !important;
    
    /* Úplné vypnutie animácií a zväčšovania */
    transform: none !important;
    transition: none !important;
}

/* 2. Zobrazenie CELÉHO obrázka (Contain) */
.tile--zoom .tile__image img {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important; /* <--- ZMENA: Toto zobrazí celý obrázok bez orezu */
    object-position: center !important;
    
    /* Vypnutie akéhokoľvek zoomu na samotnom obrázku */
    transform: none !important;
    transition: none !important;
    border-radius: 0 !important;
}

/* 3. Poistka proti hover efektom */
.tile--zoom:hover .tile__image,
.tile--zoom:hover .tile__image img {
    transform: none !important;
    scale: 1 !important;
}
}
#fw-section-product-product-kokos-01 {
--font-heading-scale: 0.7;
--font-body-scale: 1.0;
}
#fw-section-product-product-kokos-01 {

/* 1. Global Variable Force - This hits every page */
:root, html, body, [class*="product"] {
    --image-ratio-padding: 100% !important;
}

/* 2. Fix for Product Page Gallery & Main Image */
.product-gallery,
.product-gallery__viewport,
.product-gallery__slide-content,
[data-testid="product-gallery"] {
    aspect-ratio: 1 / 1 !important;
    padding-top: 0 !important;
    height: auto !important;
}

/* 3. Force the actual images to fill the new square */
.product-gallery__image img,
.product-gallery img,
.tile__image img,
img[class*="product-card"],
img[class*="tile"] {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Crops the long edges of the phone case to fit the square */
    object-position: center !important;
    position: relative !important;
}

/* 4. Fix for the Thumbnail images below the main photo */
.product-gallery__thumbnails-item, 
.product-gallery__thumbnail {
    aspect-ratio: 1 / 1 !important;
    padding-top: 0 !important;
}



/* 1. Úplne zruší tých 90px, ktoré si systém rezervuje pre náhľady */
.gallery__thumbs {
    display: none !important;
    flex: 0 0 0 !important;
    width: 0 !important;
    margin: 0 !important;
}

/* 2. Povie hlavnému kontajneru galérie, aby sa roztiahol na 100% a ignoroval odsadenie */
.gallery__product {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* 3. Zaistí, aby celá mriežka produktu lícovala s okrajom pod logom */
.product__main .grid {
    margin-left: 0 !important;
    padding-left: 0 !important;
    display: flex !important;
}

/* 4. Odstránenie paddingu z ľavej strany prvého stĺpca (kde je obrázok) */
.product__main .grid__column:first-child {
    padding-left: 0 !important;
}

/* 5. Zväčšenie celkovej šírky, aby to lícovalo s logom BSW */
.product__main {
    max-width: 1400px !important; /* Uprav podľa potreby, aby to sedelo s hlavičkou */
    margin-left: auto !important;
    margin-right: auto !important;
}





/* Zakáže interakciu na úrovni kontajnerov, aby sa JS kód ani nespustil */
.product-gallery, 
[class*="ProductGallery"], 
[class*="image-zoom"], 
[class*="zoom-container"] {
  pointer-events: none !important;
}

/* Vynútené zrušenie transformácie pre všetky obrázky */
img {
  pointer-events: none !important;
  transform: none !important;
  transition: none !important;
}




}


#fw-section-product-recommendations-product-kokos-01 {

/* 1. Nastavenie štvorcového kontajnera s pozadím */
.tile--zoom .tile__image {
    aspect-ratio: 1 / 1 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #121212 !important; /* Pridá tmavé pozadie, ak je obrázok užší/nižší */
    border-radius: 12px !important;
    
    /* Úplné vypnutie animácií a zväčšovania */
    transform: none !important;
    transition: none !important;
}

/* 2. Zobrazenie CELÉHO obrázka (Contain) */
.tile--zoom .tile__image img {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important; /* <--- ZMENA: Toto zobrazí celý obrázok bez orezu */
    object-position: center !important;
    
    /* Vypnutie akéhokoľvek zoomu na samotnom obrázku */
    transform: none !important;
    transition: none !important;
    border-radius: 0 !important;
}

/* 3. Poistka proti hover efektom */
.tile--zoom:hover .tile__image,
.tile--zoom:hover .tile__image img {
    transform: none !important;
    scale: 1 !important;
}
}
#fw-section-product-product-kokos-03 {
--font-heading-scale: 0.7;
--font-body-scale: 1.0;
}
#fw-section-product-product-kokos-03 {

/* 1. Global Variable Force - This hits every page */
:root, html, body, [class*="product"] {
    --image-ratio-padding: 100% !important;
}

/* 2. Fix for Product Page Gallery & Main Image */
.product-gallery,
.product-gallery__viewport,
.product-gallery__slide-content,
[data-testid="product-gallery"] {
    aspect-ratio: 1 / 1 !important;
    padding-top: 0 !important;
    height: auto !important;
}

/* 3. Force the actual images to fill the new square */
.product-gallery__image img,
.product-gallery img,
.tile__image img,
img[class*="product-card"],
img[class*="tile"] {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Crops the long edges of the phone case to fit the square */
    object-position: center !important;
    position: relative !important;
}

/* 4. Fix for the Thumbnail images below the main photo */
.product-gallery__thumbnails-item, 
.product-gallery__thumbnail {
    aspect-ratio: 1 / 1 !important;
    padding-top: 0 !important;
}



/* 1. Úplne zruší tých 90px, ktoré si systém rezervuje pre náhľady */
.gallery__thumbs {
    display: none !important;
    flex: 0 0 0 !important;
    width: 0 !important;
    margin: 0 !important;
}

/* 2. Povie hlavnému kontajneru galérie, aby sa roztiahol na 100% a ignoroval odsadenie */
.gallery__product {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* 3. Zaistí, aby celá mriežka produktu lícovala s okrajom pod logom */
.product__main .grid {
    margin-left: 0 !important;
    padding-left: 0 !important;
    display: flex !important;
}

/* 4. Odstránenie paddingu z ľavej strany prvého stĺpca (kde je obrázok) */
.product__main .grid__column:first-child {
    padding-left: 0 !important;
}

/* 5. Zväčšenie celkovej šírky, aby to lícovalo s logom BSW */
.product__main {
    max-width: 1400px !important; /* Uprav podľa potreby, aby to sedelo s hlavičkou */
    margin-left: auto !important;
    margin-right: auto !important;
}





/* Zakáže interakciu na úrovni kontajnerov, aby sa JS kód ani nespustil */
.product-gallery, 
[class*="ProductGallery"], 
[class*="image-zoom"], 
[class*="zoom-container"] {
  pointer-events: none !important;
}

/* Vynútené zrušenie transformácie pre všetky obrázky */
img {
  pointer-events: none !important;
  transform: none !important;
  transition: none !important;
}



}


#fw-section-product-recommendations-product-kokos-03 {

/* 1. Nastavenie štvorcového kontajnera s pozadím */
.tile--zoom .tile__image {
    aspect-ratio: 1 / 1 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #121212 !important; /* Pridá tmavé pozadie, ak je obrázok užší/nižší */
    border-radius: 12px !important;
    
    /* Úplné vypnutie animácií a zväčšovania */
    transform: none !important;
    transition: none !important;
}

/* 2. Zobrazenie CELÉHO obrázka (Contain) */
.tile--zoom .tile__image img {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important; /* <--- ZMENA: Toto zobrazí celý obrázok bez orezu */
    object-position: center !important;
    
    /* Vypnutie akéhokoľvek zoomu na samotnom obrázku */
    transform: none !important;
    transition: none !important;
    border-radius: 0 !important;
}

/* 3. Poistka proti hover efektom */
.tile--zoom:hover .tile__image,
.tile--zoom:hover .tile__image img {
    transform: none !important;
    scale: 1 !important;
}
}
#fw-section-product-product-kokos-04 {
--font-heading-scale: 0.7;
--font-body-scale: 1.1;
}
#fw-section-product-product-kokos-04 {

/* 1. Global Variable Force - This hits every page */
:root, html, body, [class*="product"] {
    --image-ratio-padding: 100% !important;
}

/* 2. Fix for Product Page Gallery & Main Image */
.product-gallery,
.product-gallery__viewport,
.product-gallery__slide-content,
[data-testid="product-gallery"] {
    aspect-ratio: 1 / 1 !important;
    padding-top: 0 !important;
    height: auto !important;
}

/* 3. Force the actual images to fill the new square */
.product-gallery__image img,
.product-gallery img,
.tile__image img,
img[class*="product-card"],
img[class*="tile"] {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Crops the long edges of the phone case to fit the square */
    object-position: center !important;
    position: relative !important;
}

/* 4. Fix for the Thumbnail images below the main photo */
.product-gallery__thumbnails-item, 
.product-gallery__thumbnail {
    aspect-ratio: 1 / 1 !important;
    padding-top: 0 !important;
}



/* 1. Úplne zruší tých 90px, ktoré si systém rezervuje pre náhľady */
.gallery__thumbs {
    display: none !important;
    flex: 0 0 0 !important;
    width: 0 !important;
    margin: 0 !important;
}

/* 2. Povie hlavnému kontajneru galérie, aby sa roztiahol na 100% a ignoroval odsadenie */
.gallery__product {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* 3. Zaistí, aby celá mriežka produktu lícovala s okrajom pod logom */
.product__main .grid {
    margin-left: 0 !important;
    padding-left: 0 !important;
    display: flex !important;
}

/* 4. Odstránenie paddingu z ľavej strany prvého stĺpca (kde je obrázok) */
.product__main .grid__column:first-child {
    padding-left: 0 !important;
}

/* 5. Zväčšenie celkovej šírky, aby to lícovalo s logom BSW */
.product__main {
    max-width: 1400px !important; /* Uprav podľa potreby, aby to sedelo s hlavičkou */
    margin-left: auto !important;
    margin-right: auto !important;
}





/* Zakáže interakciu na úrovni kontajnerov, aby sa JS kód ani nespustil */
.product-gallery, 
[class*="ProductGallery"], 
[class*="image-zoom"], 
[class*="zoom-container"] {
  pointer-events: none !important;
}

/* Vynútené zrušenie transformácie pre všetky obrázky */
img {
  pointer-events: none !important;
  transform: none !important;
  transition: none !important;
}



}

#fw-section-product-recommendations-product-kokos-04 {

/* 1. Nastavenie štvorcového kontajnera s pozadím */
.tile--zoom .tile__image {
    aspect-ratio: 1 / 1 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #121212 !important; /* Pridá tmavé pozadie, ak je obrázok užší/nižší */
    border-radius: 12px !important;
    
    /* Úplné vypnutie animácií a zväčšovania */
    transform: none !important;
    transition: none !important;
}

/* 2. Zobrazenie CELÉHO obrázka (Contain) */
.tile--zoom .tile__image img {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important; /* <--- ZMENA: Toto zobrazí celý obrázok bez orezu */
    object-position: center !important;
    
    /* Vypnutie akéhokoľvek zoomu na samotnom obrázku */
    transform: none !important;
    transition: none !important;
    border-radius: 0 !important;
}

/* 3. Poistka proti hover efektom */
.tile--zoom:hover .tile__image,
.tile--zoom:hover .tile__image img {
    transform: none !important;
    scale: 1 !important;
}
}