/* ===========================================================================
 * The header's basket, between 993 and 1279.
 *
 * See inc/header/class-af-header-cart.php for the measurement. In short:
 * XStore's desktop header is the only header on the page from 993 up, it
 * keeps the basket inside .et_connect-block, and ux.css used to hide every
 * connect block below 1280. That hide is now scoped to the top row, where
 * the duplicated opening-hours sentence lives, so the main row's basket
 * comes back.
 *
 * What is left to do here is make sure it comes back as something a finger
 * or a cursor can hit, and that the row it sits in can never overrun the
 * window again - because that is what caused the blanket hide in the first
 * place.
 *
 * Loaded after af-ux so these land on top of it.
 * ======================================================================== */

@media (min-width:993px) and (max-width:1279px){

  /* The block is laid out by XStore's twelve-column grid, which was sized
     against 1600 and does not know how narrow this window is. Measured at
     1100 before the guard: one header column was still being laid out to
     x=1156 inside a 1085px content box. A flex item will not shrink below
     its content's intrinsic width unless it is told it may, and that is
     exactly how a fixed grid walks off the edge of a window nobody
     measured it against. */
  .header-wrapper .et_connect-block{
    flex:0 0 auto;
    min-width:0;
    max-width:100%;
    margin-left:auto;   /* pinned to the right edge of its column, so it is
                           where it is at 1280 and above - a shopper moving
                           a window across the breakpoint does not have to
                           look for it in a new place */
  }

  /* 44x44 is the smallest target this theme accepts anywhere else (see the
     touch-target work in ux.css); the basket is not the place to go under
     it. Measured at 1280 the anchor is already 44x44, so this only holds
     the same size across the band rather than introducing a new one. */
  .header-wrapper .et_connect-block .et_b_header-cart > a{
    min-width:44px;
    min-height:44px;
  }

  /* The separator between account and basket is drawn by the builder as an
     empty span. With the account link hidden (ux.css, "this shop takes
     guest orders") it was left hanging on its own beside the basket. */
  .header-wrapper .et_connect-block .et_connect-block-sep{
    display:none;
  }
}

/* The failsafe, at every width where the desktop header is on screen.
 *
 * A longer translation is the thing most likely to overrun this row again -
 * Hungarian runs about a fifth longer than Romanian here - so the row is
 * allowed to wrap rather than to clip. A second line is survivable; a
 * basket 98px past the right edge of a page that does not scroll is not. */
@media (min-width:993px){
  .header-wrapper .et_connect-block{
    flex-wrap:wrap;
  }
}

/* ===========================================================================
 * The main menu takes the room its row has, from 1280 up.
 *
 * The desktop header is one flexed row (ux.css, "ONE-ROW HEADER"): logo,
 * search, menu, basket. The search was the only item allowed to grow, so it
 * took every spare pixel - 1003px of field at 1920 - while the menu stayed
 * packed at its content width, 449px, pushed up against the basket.
 * Acasă, Despre noi, Magazin and Contact are four of the five things a
 * customer comes to this header for; they read as an afterthought.
 *
 * Now the search prefers 480px (the category select plus room for "Caută
 * produsul tău aici...") and stops growing at 640, and the menu owns
 * everything between the search and the basket, its four items spread
 * evenly across it. Both grow at the same rate until the search is full, so
 * a wide window gives a little to each rather than all of it to one. At 1280 there is hardly anything left, so
 * the row looks as it did; the wider the window, the more the menu breathes
 * instead of the field.
 *
 * Below 1280 the row is already tight and ux.css's sizing stands.
 * ======================================================================== */
@media (min-width:1280px){
  .header-wrapper .header-main .et_col-xs-6{
    flex:1 1 480px!important;
    width:auto!important;
    min-width:340px!important;
    max-width:640px!important;
  }

  .header-wrapper .header-bottom .et_column:has(.header-main-menu){
    flex:1 1 auto!important;
    min-width:max-content!important;
    margin-right:0!important;
  }

  .header-wrapper .header-main-menu,
  .header-wrapper .header-main-menu > .menu-main-container{
    flex:1 1 auto;
    width:100%!important;
  }

  .header-wrapper .header-main-menu .menu{
    width:100%;
    justify-content:space-around!important;
  }
}

/* ===========================================================================
 * The bottom tab bar, four equal tabs at any phone width.
 *
 * XStore lays each tab out as "flex:1 0 20%" with 15px of padding on both
 * sides, 18px of gap between tabs and -15px of margin on the row. Four tabs
 * at a 20% floor each, plus 120px of padding and 54px of gap, is more than
 * a 320px or 360px screen: measured, "Mai mult" ran from x=283 to x=370 at
 * 320 and to 373 at 360, its label cut at the edge. The tabs were also
 * uneven - 68 to 87px wide, each sized by its own label - and "Acasă" was a
 * 38px target.
 *
 * Each tab now takes an exact quarter of the bar (80px at 320) and the whole
 * quarter is the link, so every target is a full-height column no narrower
 * than 80px, and the four icons sit on the same rhythm. The wishlist heart
 * that made five is gone (class-af-wishlist.php); if a fifth tab ever comes
 * back, flex:1 1 0 divides by five without a change here.
 * ======================================================================== */
@media (max-width:992px){
  .et-mobile-panel-wrapper .et-wrap-columns{
    margin-left:0!important;
    margin-right:0!important;
    gap:0!important;
  }

  .et-mobile-panel-wrapper .et-wrap-columns > .et_column{
    flex:1 1 0!important;
    min-width:0!important;
    max-width:none!important;
    padding-left:0!important;
    padding-right:0!important;
  }

  .et-mobile-panel-wrapper .et-wrap-columns > .et_column > a{
    width:100%;
    min-height:48px;
    justify-content:center;
    padding:6px 2px;
  }

  /* A label that still does not fit (a longer translation, a larger
     system font) is shortened inside its own tab rather than pushing the
     last tab off the screen. */
  .et-mobile-panel-wrapper .et-wrap-columns > .et_column > a .text-nowrap{
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
  }
}