/* =============================================================
   FRUTULIP — Responsive & Visual Fix
   Fixes: whitespace, background images, text visibility,
          mobile/tablet responsiveness
   ============================================================= */

/* ---------------------------------------------------------------
   1. GLOBAL — Eliminate horizontal overflow / whitespace
--------------------------------------------------------------- */
html,
body {
    overflow-x: hidden !important;
    max-width: 100%;
}

header,
main,
footer {
    overflow-x: hidden;
}

/* Swiper slides have inline pixel widths that can overflow on mobile */
.swiper-container {
    overflow: hidden !important;
}

/* Remove the desktop-only margin that leaks on narrow viewports */
@media only screen and (max-width: 991px) {
    .swiper-wrapper {
        margin-left: 0 !important;
    }
}

/* ---------------------------------------------------------------
   2. BACKGROUND IMAGES — section.intro (About Us, Details)
      Inline style sets background-image but size/position are
      missing. Adding cover + dark gradient overlay.
--------------------------------------------------------------- */
main section.intro {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    min-height: 520px;
    position: relative;
}

/* Dark gradient overlay so text on the bg image is always readable */
main section.intro::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(30, 8, 55, 0.70) 0%,
        rgba(8, 45, 18, 0.55) 100%
    );
    z-index: 1;
    pointer-events: none;
}

/* Push container above the overlay */
main section.intro .container {
    position: relative;
    z-index: 2;
}

/* Heading / paragraph visibility on intro */
main section.intro h1 {
    color: #fff !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.65);
}
main section.intro h2,
main section.intro h3 {
    color: #fff !important;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}
main section.intro p,
main section.intro .white-text {
    color: #f0ebe8 !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}
main section.intro .caption {
    color: #dcea5c !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    font-weight: 700;
}

/* Detail page: product description box */
.text-background {
    background: rgba(255, 255, 255, 0.90);
    padding: 1.5rem 1.75rem;
    border-radius: 8px;
    color: #2a1a35 !important;
}

/* ---------------------------------------------------------------
   3. BACKGROUND IMAGES — section.catalog-block
      (Range, Exotic Fruits, Vegetables, Berries)
--------------------------------------------------------------- */
main section.catalog-block {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    position: relative;
    min-height: 400px;
}

/* Dark overlay behind catalog content */
main section.catalog-block::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(15, 5, 35, 0.78) 0%,
        rgba(15, 5, 35, 0.65) 100%
    );
    z-index: 0;
    pointer-events: none;
}

/* All catalog-block children above the overlay */
main section.catalog-block > * {
    position: relative;
    z-index: 1;
}

/* Heading & text in catalog-block */
main section.catalog-block h1 {
    color: #fff !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}
main section.catalog-block .caption {
    color: #dcea5c !important;
    font-weight: 700;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
main section.catalog-block p,
main section.catalog-block .white-text {
    color: #f0ebe8 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* ---------------------------------------------------------------
   4. VIDEO HERO (home page)
--------------------------------------------------------------- */

/* Stronger overlay on the hero video for legibility */
main figure.header::before {
    background: rgba(0, 0, 0, 0.38) !important;
}

main figure.header.has-video figcaption h1 {
    text-shadow: 0 3px 14px rgba(0, 0, 0, 0.65);
}

/* ---------------------------------------------------------------
   5. CATEGORY SLIDER — clear whitespace & center on mobile
--------------------------------------------------------------- */
@media only screen and (max-width: 767px) {
    .category-slider .swiper-slide {
        min-width: 220px;
        max-width: 280px;
    }
    .category-slider .category-slider__slider-wrapper {
        overflow: hidden;
    }
}

/* ---------------------------------------------------------------
   6. INFO-BANNER BLOCK (3 portrait images on home)
--------------------------------------------------------------- */
@media only screen and (max-width: 599px) {
    main section.info-banner-block .wrapper {
        flex-direction: column;
        padding: 0 1rem !important;
        margin-bottom: 0 !important;
    }
    main section.info-banner-block .wrapper .info-shortcut {
        width: 100% !important;
        margin-bottom: 1.25rem;
    }
}

@media only screen and (min-width: 600px) and (max-width: 991px) {
    main section.info-banner-block .wrapper .info-shortcut {
        width: 33.333% !important;
    }
}

/* ---------------------------------------------------------------
   7. PRODUCT GRID — responsive column widths
--------------------------------------------------------------- */

/* Extra-small mobile: 2 columns */
@media only screen and (max-width: 599px) {
    .columns.multiline > .column {
        flex-basis: 50% !important;
        max-width: 50% !important;
        min-width: 50%;
    }
}

/* Tablet: 3 columns */
@media only screen and (min-width: 600px) and (max-width: 991px) {
    .columns.multiline > .column {
        flex-basis: 33.333% !important;
        max-width: 33.333% !important;
    }
}

/* Small mobile padding correction on product cells */
@media only screen and (max-width: 599px) {
    .columns.multiline > .column {
        padding: 0.5rem !important;
    }
}

/* ---------------------------------------------------------------
   8. HEADER NAV — mobile overflow & hamburger
--------------------------------------------------------------- */
header .container.large {
    position: relative;
}

@media only screen and (max-width: 991px) {
    header .container.large {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    header .nav-wrapper {
        overflow-x: hidden;
    }
}

/* ---------------------------------------------------------------
   9. FOOTER — stack columns on mobile
--------------------------------------------------------------- */
@media only screen and (max-width: 767px) {
    .footer-block .container.large .columns {
        flex-direction: column !important;
        flex-wrap: wrap;
    }
    .footer-block .container.large .columns .column {
        width: 100% !important;
        flex-basis: 100% !important;
        max-width: 100% !important;
        margin-bottom: 2rem;
        padding-left: 0;
    }
    .footer-registration-block .container .footer-registration-block__content {
        flex-direction: column;
        text-align: center;
    }
    .footer-registration-block__button {
        margin-top: 1rem;
    }
    .legal__container .container.large {
        flex-direction: column;
        align-items: center;
    }
}

/* ---------------------------------------------------------------
   10. CATALOG FILTER NAV — mobile layout
--------------------------------------------------------------- */
@media only screen and (max-width: 1023px) {
    main section.catalog-block nav.filter .wrapper {
        background: rgba(15, 5, 35, 0.92);
        border-radius: 0 0 8px 8px;
    }
    main section.catalog-block nav.filter .navigation a {
        color: #fff !important;
    }
}

/* ---------------------------------------------------------------
   11. GENERAL IMAGE FIXES — ensure images never overflow
--------------------------------------------------------------- */
img {
    max-width: 100%;
    height: auto;
}

.image.is-square img,
.image.is-portrait img,
.image.is-3by2 img,
.image.is-16by9 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---------------------------------------------------------------
   12. SECTION SPACING — remove unintended gaps
--------------------------------------------------------------- */
main > section,
main > .text-block,
main > div#content > section {
    margin-top: 0;
    margin-bottom: 0;
}

/* Remove any default body/section margin that may cause whitespace */
body > footer {
    margin-top: 0;
}

/* ---------------------------------------------------------------
   13. VIDEO HERO — responsive sizing
--------------------------------------------------------------- */
@media only screen and (max-width: 480px) {
    main figure.header.has-video figcaption {
        top: 58%;
        padding: 1rem;
        max-width: 100%;
    }
    main figure.header.has-video figcaption h1 {
        font-size: 3.2rem !important;
        line-height: 2.6rem !important;
    }
    main figure.header.has-video figcaption h1 + .buttons {
        margin-top: 1.5rem;
    }
    main figure.header.has-video figcaption .buttons {
        flex-direction: column;
        align-items: center;
    }
    main figure.header.has-video figcaption .buttons .button:not(:only-child):not(:last-child) {
        margin-right: 0;
        margin-bottom: 0.75rem;
    }
}

@media only screen and (min-width: 481px) and (max-width: 767px) {
    main figure.header.has-video figcaption h1 {
        font-size: 4.5rem !important;
        line-height: 3.5rem !important;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    main figure.header.has-video figcaption h1 {
        font-size: 5.5rem !important;
        line-height: 4.5rem !important;
    }
}

/* ---------------------------------------------------------------
   14. BACK LINK — ensure it sits cleanly
--------------------------------------------------------------- */
header a.back.arrow {
    z-index: 10;
    position: relative;
}

/* ---------------------------------------------------------------
   15. TEXT-BLOCK sections — readable spacing on mobile
--------------------------------------------------------------- */
@media only screen and (max-width: 767px) {
    main section.text-block.default .container.large {
        flex-direction: column !important;
    }
    main section.text-block.default .container.large figure.image.is-square {
        width: 100% !important;
        max-width: 100%;
    }
    main section.text-block.default .container.large > * {
        width: 100% !important;
    }
}

/* ---------------------------------------------------------------
   16. ABOUT-US intro section — ensure text is always visible
--------------------------------------------------------------- */
main section.intro .container.uncentered {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

@media only screen and (max-width: 767px) {
    main section.intro .container.uncentered {
        padding: 2rem 1rem;
    }
    main section.intro .columns.m-6 {
        flex-direction: column;
    }
    main section.intro .columns.m-6 .column {
        width: 100% !important;
        flex-basis: 100% !important;
        max-width: 100% !important;
    }
}

/* ---------------------------------------------------------------
   17. ICON-BLOCK (Vision/Mission) — responsive padding
--------------------------------------------------------------- */
@media only screen and (max-width: 767px) {
    main section.icon-block .container.flex-m {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 1.5rem 1rem;
    }
    main section.icon-block .icon {
        margin-bottom: 1rem;
        margin-right: 0 !important;
    }
}

/* ---------------------------------------------------------------
   18. CATEGORY SLIDER BG — ensure purple bg shows fully
--------------------------------------------------------------- */
.category-slider.background-purple {
    padding: 2rem 0 !important;
}

@media only screen and (max-width: 767px) {
    .category-slider .container.large {
        padding: 0 1rem;
    }
}

/* ---------------------------------------------------------------
   19. SEARCH WRAPPER — prevent overflow
--------------------------------------------------------------- */
header .search-wrapper {
    overflow: hidden;
    max-width: 100%;
}

@media only screen and (max-width: 767px) {
    header .search-wrapper .search {
        flex-wrap: wrap;
    }
    header .search-wrapper .search .input {
        width: 100%;
        margin-bottom: 0.5rem;
    }
}

/* ---------------------------------------------------------------
   20. CONTACT PAGE — table responsive
--------------------------------------------------------------- */
@media only screen and (max-width: 767px) {
    main section.text-block table {
        width: 100%;
        display: block;
        overflow-x: auto;
    }
    main section.text-block.default .container.large {
        display: block !important;
    }
}

/* ---------------------------------------------------------------
   21. VIDEO HERO FIGURE — ensure correct positioning
--------------------------------------------------------------- */
main figure.header.has-video {
    position: relative;
    min-height: 100vh;
}

main figure.header.has-video video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

main figure.header.has-video::before {
    z-index: 1;
}

main figure.header.has-video figcaption {
    z-index: 3;
}

/* ---------------------------------------------------------------
   22. details.html uses class="intro white" — override the
       .white background shorthand so background-image shows
--------------------------------------------------------------- */
main section.intro.white {
    background-color: transparent !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

/* Ensure overlay + container z-index work on .white too */
main section.intro.white::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(30, 8, 55, 0.70) 0%,
        rgba(8, 45, 18, 0.55) 100%
    );
    z-index: 1;
    pointer-events: none;
}
main section.intro.white .container {
    position: relative;
    z-index: 2;
}
main section.intro.white h1 {
    color: #fff !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.65);
}
main section.intro.white .text-background {
    background: rgba(255,255,255,0.90);
    color: #2a1a35 !important;
    padding: 1.5rem 1.75rem;
    border-radius: 8px;
}
main section.intro.white .text-background p {
    color: #2a1a35 !important;
    text-shadow: none !important;
}