/* =============================================================================
   Kinwi: Responsive header, Superfly icon, logo, category tiles, cart
   Progressive reduction of element sizes with screen width.
   ============================================================================= */

/* --- FiboSearch FOUC fix: prevent layout shift before JS initialises --- */
/* Before FiboSearch JS adds dgwt-wcas-layout-icon-flexible-loaded, the search
   form is opacity:0 but takes ~230px of space, pushing the logo off-centre.
   Only needed on mobile (≤880px) — desktop has room to absorb it. */
@media (max-width: 880px) {
  .dgwt-wcas-search-wrapp.dgwt-wcas-layout-icon-flexible:not(.dgwt-wcas-layout-icon-flexible-loaded) {
    max-width: 20px !important;
    min-width: unset !important;
    overflow: hidden !important;
  }
  .dgwt-wcas-search-wrapp.dgwt-wcas-layout-icon-flexible:not(.dgwt-wcas-layout-icon-flexible-loaded) .dgwt-wcas-search-form {
    display: none !important;
  }
  .dgwt-wcas-search-wrapp.dgwt-wcas-layout-icon-flexible:not(.dgwt-wcas-layout-icon-flexible-loaded) .dgwt-wcas-search-icon {
    display: block !important;
  }
}

/* --- Header height: diminish progressively with screen size --- */
@media (max-width: 1024px) {
  body .elementor-location-header,
  body .elementor-location-header .elementor-element-6d86b54 {
    height: 90px !important;
  }
}

@media (max-width: 880px) {
  body .elementor-location-header,
  body .elementor-location-header .elementor-element-6d86b54 {
    height: 75px !important;
  }
  /* Kinwi: Nav menu on mobile — overflow hidden, no padding.
     flex spacer properties are set in 03-dokan-dashboard-mobile.css */
  .elementor-element-b2aef72 {
    overflow: hidden !important;
    padding: 0 !important;
  }
}

@media (max-width: 640px) {
  body .elementor-location-header,
  body .elementor-location-header .elementor-element-6d86b54 {
    height: 60px !important;
  }
}

@media (max-width: 480px) {
  body .elementor-location-header,
  body .elementor-location-header .elementor-element-6d86b54 {
    height: 50px !important;
  }
}

/* --- Logo: scale with header, prevent size bouncing --- */
.elementor-element-04ccc77 img {
  height: auto !important;
  max-height: 65px !important;
  width: auto !important;
  object-fit: contain !important;
}

@media (max-width: 1024px) {
  .elementor-element-04ccc77 img {
    max-height: 55px !important;
  }
}

@media (max-width: 880px) {
  .elementor-element-04ccc77 img {
    max-height: 48px !important;
  }
}

@media (max-width: 640px) {
  .elementor-element-04ccc77 img {
    max-height: 42px !important;
  }
}

@media (max-width: 480px) {
  .elementor-element-04ccc77 img {
    max-height: 38px !important;
  }
}

/* Kinwi: Logo scales gradually — 65px desktop → 36px small mobile */

/* --- Superfly menu icon: scale + vertically centre within header at each breakpoint --- */
/* Default header 110px: centre at 55px, top = 55-40 = 15px */
.sfm-navicon-button {
  top: 15px !important;
}

@media (max-width: 1024px) {
  /* header 90px ? centre 45px ? top = 5px */
  .sfm-navicon-button {
    transform: scale(0.75) !important;
    top: 5px !important;
  }
}

@media (max-width: 880px) {
  /* header 75px ? centre 37.5px ? top = -3px */
  .sfm-navicon-button {
    transform: scale(0.625) translateX(-8px) !important;
    top: -3px !important;
  }
}

@media (max-width: 640px) {
  /* header 60px ? centre 30px ? top = -10px */
  .sfm-navicon-button {
    transform: scale(0.5) translateX(-12px) !important;
    top: -10px !important;
  }
}

@media (max-width: 480px) {
  /* header 50px ? centre 25px ? top = -15px */
  .sfm-navicon-button {
    transform: scale(0.425) translateX(-15px) !important;
    top: -15px !important;
  }
}

/* --- Category tiles: 4?2?1 grid, max 254�254, always square --- */
/* Kinwi: Override Elementor post-18030.css #category-button-parent .category-button-container
   { width:274px; height:274px } � body prefix adds specificity so our rule wins */

/* =1110px: 4-across, max 254�254, scale down proportionally */
@media (max-width: 1110px) {
  body #category-button-parent .category-button-container {
    width: 25% !important;
    max-width: 254px !important;
    flex: 0 0 25% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
  }
}

/* =640px: 2-across, reset to max 254�254, scale down */
@media (max-width: 640px) {
  body #category-button-parent .category-button-container {
    width: 50% !important;
    max-width: 254px !important;
    flex: 0 0 50% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
  }
}

/* ≤360px: 2-across (same as 640px layout), scaled to fit */
@media (max-width: 360px) {
  body #category-button-parent .category-button-container {
    width: 50% !important;
    max-width: 254px !important;
    flex: 0 0 50% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
  }
}

/* Kinwi: Category button text — Gabriela upload font weight + responsive sizes */
body #category-button-parent .category-button .premium-image-button-text-icon-wrapper span,
body #category-button-parent .category-button .premium-image-button:hover .premium-image-button-text-icon-wrapper span {
  font-weight: 500 !important;
  font-size: 23px !important;
  line-height: 1.45 !important;
  text-shadow: none !important;
}

@media (max-width: 899px) {
  body #category-button-parent .category-button .premium-image-button-text-icon-wrapper span,
  body #category-button-parent .category-button .premium-image-button:hover .premium-image-button-text-icon-wrapper span {
    font-size: 20px !important;
  }
}

@media (max-width: 840px) {
  body #category-button-parent .category-button .premium-image-button-text-icon-wrapper span,
  body #category-button-parent .category-button .premium-image-button:hover .premium-image-button-text-icon-wrapper span {
    font-size: 18px !important;
  }
}

@media (max-width: 640px) {
  body #category-button-parent .category-button .premium-image-button-text-icon-wrapper span,
  body #category-button-parent .category-button .premium-image-button:hover .premium-image-button-text-icon-wrapper span {
    font-size: 20px !important;
    line-height: 1.5 !important;
  }
}

@media (max-width: 420px) {
  body #category-button-parent .category-button .premium-image-button-text-icon-wrapper span,
  body #category-button-parent .category-button .premium-image-button:hover .premium-image-button-text-icon-wrapper span {
    font-size: 18px !important;
    line-height: 1.5 !important;
  }
}

@media (max-width: 360px) {
  body #category-button-parent .category-button .premium-image-button-text-icon-wrapper span,
  body #category-button-parent .category-button .premium-image-button:hover .premium-image-button-text-icon-wrapper span {
    font-size: 16px !important;
    line-height: 1.5 !important;
  }
}

/* Kinwi: Homepage slider width aligned to category tile images (2026-03-25) */
/* >1110px: tiles 274px × 4 = 1096px row; images span 1076px (minus 10px padding each end) */
@media (min-width: 1111px) {
    body.home .elementor #slider-background {
        --content-width: calc(4 * 274px - 20px) !important;
        max-width: calc(4 * 274px - 20px) !important; /* 1076px */
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* 1041–1110px: tiles 254px × 4 = 1016px row; images span 996px */
@media (min-width: 1041px) and (max-width: 1110px) {
    body.home .elementor #slider-background {
        --content-width: calc(4 * 254px - 20px) !important;
        max-width: calc(4 * 254px - 20px) !important; /* 996px */
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* ≤1040px (down to 641px): full-width slider */
@media (max-width: 1040px) and (min-width: 641px) {
    body.home .elementor #slider-background {
        --content-width: 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* ≥641px: background cover, slides fill container, no gap under header */
@media (min-width: 641px) {
    body.home .elementor #slider-background::before {
        background-size: cover !important;
        background-position: center center !important;
    }
    body.home .elementor #slider-background .elementor-widget-slides {
        width: 100% !important;
        max-width: 100% !important;
    }
    /* Kinwi: Make intermediate containers static so dots anchor to #slider-background */
    body.home .elementor #slider-background .elementor-widget-slides,
    body.home .elementor #slider-background .elementor-widget-slides > .elementor-widget-container,
    body.home .elementor #slider-background .elementor-swiper {
        position: static !important;
    }
    body.home .elementor #slider-background {
        margin-top: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-bottom: 10px !important; /* + 10px tile padding = 20px visual gap */
    }
    body.home .elementor #slider-background + .e-con {
        margin-top: 0 !important;
    }
}

/* Kinwi: ≤640px – keep swiper container relatively positioned so dots
   anchor at the bottom of the slide image, matching larger screen behaviour */
@media (max-width: 640px) {
    /* Keep the widget-slides and swiper with relative so absolute children work */
    body.home .elementor #slider-background .elementor-widget-slides,
    body.home .elementor #slider-background .elementor-widget-slides > .elementor-widget-container {
        position: relative !important;
    }
    /* Swiper itself must be relative so the absolute pagination dots sit inside it */
    body.home .elementor #slider-background .elementor-swiper,
    body.home .elementor #slider-background .swiper-container {
        position: relative !important;
        overflow: hidden !important;
    }
    /* Place dots at the bottom of the slider image */
    body.home .elementor #slider-background .swiper-pagination,
    body.home .elementor #slider-background .swiper-pagination-bullets {
        position: absolute !important;
        bottom: 5px !important;
        top: auto !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: auto !important;
        z-index: 10 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* ≥1367px: tighter gap under slider to match tile spacing */
@media (min-width: 1367px) {
    body.home .elementor #slider-background {
        margin-bottom: 0 !important;
    }
}

/* Kinwi: ≤1366px — reduce footer gap to match 20px tile-to-tile spacing */
@media (max-width: 1366px) {
    body.home .elementor-location-footer {
        margin-top: 10px !important;
    }
}

/* Kinwi: Restore slider height at 881–1024px so kiwi image bottom is not cropped (2026-03-27) */
@media (min-width: 881px) and (max-width: 1024px) {
    body.home .elementor #slider-background {
        --min-height: 362px !important;
        min-height: 362px !important;
    }
}

/* Kinwi: Override previous black background changes, ensuring empty screen space is natural (2026-03-31) */
html {
    background-color: #ffffff !important;
}

/* Kinwi: Remove extra gap between footer links when they stack on mobile (2026-03-31) */
@media (max-width: 640px) {
    .elementor-element.elementor-element-a0ffd0b {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
    .elementor-element.elementor-element-fed0242 {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}

/* Kinwi: Footer image box styles - set font and prevent wrapping on mobile (2026-03-31) */
body .elementor-location-footer.elementor-location-footer .elementor-widget-image-box .elementor-image-box-title,
body .elementor-location-footer.elementor-location-footer .elementor-widget-image-box .elementor-image-box-title a {
    font-family: 'Lora upload', serif !important;
    font-size: 16px !important;
    font-weight: 500 !important;
}

body .elementor-location-footer.elementor-location-footer .elementor-widget-image-box .elementor-image-box-title:hover,
body .elementor-location-footer.elementor-location-footer .elementor-widget-image-box .elementor-image-box-title a:hover {
    font-family: 'Lora upload', serif !important;
    font-size: 16px !important;
    font-weight: 500 !important;
}

/* Kinwi: Consistent gap between koru heart and link text at all screen sizes */
body .elementor-location-footer.elementor-location-footer .elementor-widget-image-box .elementor-image-box-img {
    margin-right: 10px !important;
}

@media (max-width: 640px) {
    /* Force the footer columns and widget wrappers to be left-aligned and full width */
    body .elementor-location-footer .elementor-column,
    body .elementor-location-footer .elementor-widget-wrap {
        width: 100% !important;
        text-align: left !important;
        display: block !important;
    }

    /* Ensure the widget container doesn't push its contents right */
    body .elementor-location-footer.elementor-location-footer .elementor-widget-image-box {
        text-align: left !important;
        width: 100% !important;
        display: block !important;
    }

    body .elementor-location-footer.elementor-location-footer .elementor-widget-image-box .elementor-image-box-wrapper {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        text-align: left !important;
        margin-bottom: 5px !important;
        width: 100% !important;
    }

    body .elementor-location-footer.elementor-location-footer .elementor-widget-image-box .elementor-image-box-img {
        margin-bottom: 0 !important;
        margin-right: 10px !important;
        margin-left: 0 !important;
        width: 25px !important;
        flex-shrink: 0 !important;
        text-align: left !important;
    }

    body .elementor-location-footer.elementor-location-footer .elementor-widget-image-box .elementor-image-box-content {
        text-align: left !important;
        width: auto !important;
    }
}