/*===========================================================================
  The mobile bottom bar -- repairs, then designs
  ---------------------------------------------------------------------------
  The five-item bar fixed to the bottom of every storefront page on a phone:
  Home, Search, Wishlist, Account, Menu.

  This file is linked from both storefront headers unconditionally, exactly
  like newsletter.css, because the repair at the top applies to the legacy
  markup as much as to the twenty layouts -- it is the same markup in both.

  A design is chosen the same way the newsletter and the trust strip choose
  theirs: whatever the merchant picked in Manage Theme, otherwise the one the
  layout was drawn for. See includes/mobilebar.php.
===========================================================================*/

/* ---------------------------------------------------------------------------
   The repair, which every design gets
   ---------------------------------------------------------------------------
   The base template styles the button as a 28px inline box and lets the label
   fall underneath it as a block. That leaves the label's position at the mercy
   of each glyph's own metrics inside its em box, and the flaticon magnifier is
   drawn smaller than the store, heart, user and burger around it -- so Search
   alone sat a couple of pixels high and the row of labels did not line up.

   Giving the icon a box of its own takes the glyph out of the decision: every
   icon occupies the same height, so every label starts at the same place
   whatever it is drawn like.
   ------------------------------------------------------------------------ */

.tp-mobile-menu .tp-mobile-item-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  line-height: 1;
}

.tp-mobile-menu .tp-mobile-item-btn i {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  font-size: 23px;
  line-height: 1;
}

.tp-mobile-menu .tp-mobile-item-btn span {
  display: block;
  margin-top: 0;                 /* the gap above does this now */
  line-height: 1.1;
  font-size: 12px;
  white-space: nowrap;
}

/* The row itself, so the five columns share the space evenly and nothing
   drifts when one label is longer than the others. */
.tp-mobile-menu .row-cols-5 > .col { display: flex; justify-content: center; }
.tp-mobile-menu .tp-mobile-item { width: 100%; }

/* ---------------------------------------------------------------------------
   Designs
   ------------------------------------------------------------------------ */

/* --- CLASSIC: what the bar has always been. Nothing to add beyond the repair
   above -- the class is written out so that every design the PHP can emit has
   a rule behind it, rather than one silently falling through. */
.tp-mobile-menu.sf-mb--classic { }

/* --- LABELLED: the same bar with the labels given a little more room and
   weight. For shops whose visitors are not all fluent in icons. */
.tp-mobile-menu.sf-mb--labelled .tp-mobile-item-btn i { height: 24px; font-size: 21px; }
.tp-mobile-menu.sf-mb--labelled .tp-mobile-item-btn span { font-size: 12.5px; font-weight: 600; }

/* --- COMPACT: icons only. Gives a phone back about 18px of page, which is
   most of a product row on a small screen. The label still exists for screen
   readers; it is only taken out of the picture. */
.tp-mobile-menu.sf-mb--compact .tp-mobile-item-btn span {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.tp-mobile-menu.sf-mb--compact .tp-mobile-item-btn i { height: 28px; font-size: 25px; }

/* --- PILL: the bar lifts off the bottom edge and floats as a rounded block.
   Reads as a control rather than as part of the page. */
.tp-mobile-menu.sf-mb--pill {
  left: 10px; right: 10px; width: auto;
  border-radius: 18px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .16);
  border: 0;
  overflow: hidden;
}
.tp-mobile-menu.sf-mb--pill .tp-mobile-item-btn span { font-size: 11px; }

/* --- LINE: flat, a hairline on top, nothing else. The quiet option. */
.tp-mobile-menu.sf-mb--line {
  box-shadow: none;
  border-top: 1px solid rgba(0, 0, 0, .10);
}
.tp-mobile-menu.sf-mb--line .tp-mobile-item-btn i { height: 24px; font-size: 20px; }
.tp-mobile-menu.sf-mb--line .tp-mobile-item-btn span { font-size: 11px; color: rgba(0, 0, 0, .58); }

/* --- SOLID: filled with the shop's own colour. The loud option. Icons and
   labels go white because the fill is the brand colour, which is dark far more
   often than not; a merchant on a pale accent can override it in Custom CSS. */
.tp-mobile-menu.sf-mb--solid {
  background: var(--tp-theme-primary);
  border-top: 0;
}
.tp-mobile-menu.sf-mb--solid .tp-mobile-item-btn,
.tp-mobile-menu.sf-mb--solid .tp-mobile-item-btn i,
.tp-mobile-menu.sf-mb--solid .tp-mobile-item-btn span { color: #fff; }
.tp-mobile-menu.sf-mb--solid .tp-mobile-item-btn:hover { color: #fff; opacity: .85; }

/*===========================================================================
  The offcanvas menu: one list of categories, not two
  ---------------------------------------------------------------------------
  main.js clones two things into the slide-out panel: the category nav, into
  the "Categories" accordion, and the main menu, into the menu list below it.
  Once the main menu carries categories as well -- which it has to, or the
  desktop bar has none -- a phone showed the same categories twice, a few
  inches apart, with different numbers of them in each.

  The server marks the main menu's category items with .tp-menu-cat, and only
  when the offcanvas accordion is actually being rendered. So the categories
  are hidden here in favour of the accordion, which lists more of them and
  carries their sub-categories; and a shop below the accordion's threshold has
  no marker, keeps them in the menu, and loses nothing.

  Scoped to .tp-main-menu-mobile: this is the clone, so the bar across the top
  of a laptop is untouched.
===========================================================================*/

.tp-main-menu-mobile .tp-menu-cat { display: none; }