/* =============================================================
   RTL enhancements — Berry theme header search
   ≥ 1281px : popup opens to the LEFT of the icon, aligned with it.
   ≤ 1280px : popup drops as a full-width drawer BELOW the header
              row so the logo and icons stay visible.
              (covers 1280×800, 1024×600, 1024×1366, iPad Mini, phones)
   ============================================================= */

/* -------------------------------------------------------------
   Desktop  (≥ 1281px): side popup next to the icon
   ------------------------------------------------------------- */
/* 1. Reset the base style to be mobile-first (full width) */
.checkout-page .method-list li {
  width: 100%;
  float: right;
  margin-bottom: 15px; /* Add space between stacked boxes */
  list-style: none;
}

/* --- Standard desktop tweaks (992–1199px) ------------------------------ */
@media (min-width: 992px) and (max-width: 1199px) {
    .product-grid .item-box {
        width: calc(33.33% - 20px);
    }

    .header-upper .search-box-text {
        width: 200px;
    }

    .header-logo {
        max-width: 400px;
    }
}
/* 2. For Tablets (2 columns) */
@media screen and (min-width: 768px) {
  .checkout-page .method-list li {
    width: calc(50% - 15px);
    margin-left: 15px;
  }
}

/* 3. For Desktop (3 columns - your original design) */
@media screen and (min-width: 1025px) {
  .checkout-page .method-list li {
    width: calc(33.33% - 15px);
    margin-left: 15px;
  }
  
  /* Remove margin from every 3rd element to prevent shifting */
  .checkout-page .method-list li:nth-child(3n) {
    margin-left: 0;
  }
}
@media (min-width: 1281px) {
    .header-upper .header-links li.search-icon-wrapper {
        position: relative;                /* anchor for the side popup */
    }
.search-box .ui-autocomplete{ max-width: calc(18vw - 20px);}

    .search-box.store-search-box {
        position: absolute;
        top: 50%;
        left: auto !important;
        right: 100% !important;            /* open to the left of the icon */
        margin-left: 0 !important;
        margin-right: 8px !important;
        max-width: calc(100vw - 32px);
        background: #fff;
        padding: 6px 10px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
        box-sizing: border-box;
        z-index: 1050;
        white-space: nowrap;
    }

    .search-box.store-search-box,
    .search-box.store-search-box.open {
        transform: translateY(-55%);
    }
}

/* -------------------------------------------------------------
   Tablet / small laptop / mobile  (≤ 1280px):
   full-width drawer BELOW the header row
   ------------------------------------------------------------- */
@media (max-width: 1280px) {
    .header-upper {
        position: relative;                /* positioning context = header row */
    }
    .header-upper .header-links-wrapper,
    .header-upper .header-links li.search-icon-wrapper {
        position: static !important;       /* escape the icon's relative box */
    }

    .search-box.store-search-box,
    .search-box.store-search-box.open {
        position: absolute;
        top: 100%;                         /* directly under the header row */
        left: 0 !important;
        right: 0 !important;
        margin: 0 !important;
        transform: none !important;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding: 8px 12px;
        white-space: normal;
        box-sizing: border-box;
        background: #fff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
        z-index: 1050;
    }

    .search-box.store-search-box .search-box-text,
    .search-box.store-search-box input.search-box-text {
        width: 100%;
    }
}

/* -------------------------------------------------------------
   Shared RTL bits (input direction, autocomplete, misc.)
   ------------------------------------------------------------- */
.search-box.store-search-box .search-box-text,
.search-box.store-search-box input.search-box-text {
    box-sizing: border-box;
    text-align: right;
    direction: rtl;
}

.search-box .ui-autocomplete {
    text-align: right;
    direction: rtl;
}
.search-box .ui-menu .ui-menu-item-wrapper {
    padding-right: 1em;
    padding-left: .4em;
}

/* -------------------------------------------------------------
   Mobile-only (≤ 767px) cosmetics
   ------------------------------------------------------------- */
@media (max-width: 767px) {
    .header-upper .header-links-wrapper {
        margin-left: 0;
        margin-right: 0;
    }

    .footer-lower .footer-info,
    .footer-lower .footer-disclaimer,
    .footer-lower .footer-powered-by,
    .footer-lower .footer-store-theme,
    .footer-lower .accepted-payment-methods {
        text-align: center;
    }

    .flyout-cart {
        right: 0;
        left: auto;
    }
}

/* Ultra-small phones */
@media (max-width: 360px) {
 .header-logo {
        max-width: 180px;
    }
    .header-upper .header-links li {
        padding: 0 4px;
    }
}
@media (max-width: 1024px) {
    .header-lower {
        background-color: #b3012a;
    }
}