/* TrendyPicker mobile side navigation
   Reshapes Firstmall's #layout_side (opened by the header hamburger) into the
   prototype's category browser: a fixed top bar, a row of quick links, then a
   two-pane body with 1st-level categories on the left and their 2nd-level
   children as a grid on the right.

   Pairs with app/javascript/js/trendypicker-mobile-nav.js, which adds the top
   bar and quick links and wires the left/right panes. The category data stays
   Firstmall's — the markup under #categorySideMenu is reused, not replaced, so
   categories added in the admin appear here automatically.

   Only applies below 1121px, where the skin shows the side menu at all. */

/* Category swap. The script rewrites the pane's contents, so the fresh
   elements run this on their own; --tp-mnav-shift carries the direction the
   swipe travelled, and is 0 for a tap on the rail. The new grid enters from
   the side the drag came from — below when stepping forward, above when
   stepping back. */
   @keyframes tp-mnav-swap {
    from {
      opacity: 0;
      transform: translateY(var(--tp-mnav-shift, 0px));
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .tp-mnav-content-head,
    .tp-mnav-grid {
      animation: none;
    }
  }

  @media only screen and (max-width: 1120px) {
    /* Firstmall opens the empty, full-width side layer before its category AJAX
       response arrives. JS removes this state as soon as the real menu has been
       reshaped, preventing the blank white layer from sweeping over the page. */
    html.tp-mnav-loading #layout_side.layout_side,
    html.tp-mnav-loading #layout_side_background.layout_side_background {
      visibility: hidden;
      pointer-events: none;
    }

    /* ===== Panel shell ====================================================
       `display` is deliberately absent here. The skin ships #layout_side hidden
       and jQuery toggles it inline as the panel slides in and out, so setting
       display in this file would pin the panel open over every page. The column
       layout lives on .tp-mnav-shell, which the script wraps around the panel
       contents once Firstmall has fetched them. */
    #layout_side.layout_side {
      padding-bottom: 0;
      overflow: hidden;
      overscroll-behavior: contain;
      background: #fff;
    }

    #layout_side .tp-mnav-shell {
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    /* Stock blocks the prototype layout has no place for. */
    #layout_side .aside_userinformation,
    #layout_side .aside_navigation_wrap > .tab,
    #layout_side .wrap_aside,
    #layout_side .aside_cs_btn,
    #layout_side .aside_recently_nodata,
    #layout_side .aside_navigation_bottom_line,
    #layout_side #brandSideMenu,
    #layout_side #locationSideMenu,
    #layout_side #boardSideMenu {
      display: none;
    }

    /* ===== Top bar: search + close ========================================
       The script moves #side_close in here, so the bar lays the two out side by
       side and no space has to be reserved for a floating button. */
    /* The bar's 4px of extra height comes from the taller search field below,
       not from padding — that keeps the field centred in it. */
    .tp-mnav-top {
      display: flex;
      align-items: center;
      gap: 14px;
      flex: 0 0 auto;
      padding: 12px 16px;
      border-bottom: 1px solid #eee;
      background: #fff;
    }

    /* The skin draws this button as two rotated bars; the supplied artwork
       replaces them. Width is left to the skin here — it holds the button at 0
       until the panel opens — so the icon cannot show through on a closed page.
       This state only shows on the very first open, before Firstmall's markup
       has arrived and the script can adopt the button. */
    #side_close {
      height: 16px;
      background: url("../../images/icon/close.png") no-repeat center / contain;
    }

    #side_close.on {
      width: 16px;
    }

    #side_close:before,
    #side_close:after {
      display: none;
    }

    /* Once adopted into the top bar it is an ordinary flex item: the panel
       carries it in and out, so it needs no width reveal, no transition of its
       own, and none of the skin's fixed positioning. */
    #layout_side #side_close {
      position: static;
      flex: 0 0 auto;
      width: 16px;
      height: 16px;
      margin: 0;
      transition: none;
    }

    /* 42px is exactly the button plus its margins, so the pill contains it
       rather than clipping it — and the field inherits that height instead of
       overflowing the bar. */
    .tp-mnav-search {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 42px;
      align-items: center;
      flex: 1 1 auto;
      height: 42px;
      overflow: hidden;
      border-radius: 999px;
      background: #f4f2f8;
    }

    /* width:100% is what makes the field fill its column — an <input> keeps its
       own default width otherwise, which left it at 180px inside a 275px cell
       and cut the placeholder short. The right padding is trimmed so the text
       runs all the way to the button. */
    .tp-mnav-search input[type="text"] {
      -webkit-appearance: none;
      appearance: none;
      box-sizing: border-box;
      width: 100%;
      min-width: 0;
      height: 100%;
      margin: 0;
      padding: 0 4px 0 14px;
      border: 0;
      outline: none;
      color: #222;
      background: transparent;
      font-size: 14px;
      text-overflow: ellipsis;
    }

    .tp-mnav-search button {
      justify-self: end;
      width: 32px;
      height: 32px;
      margin: 5px;
      padding: 0;
      border: 0;
      border-radius: 50%;
      background: #7f56d9 url("../../images/icon/tp-header-search.png") no-repeat
        center / 16px 16px;
      cursor: pointer;
    }

    /* ===== Quick links row =============================================== */
    .tp-mnav-quick {
      display: flex;
      flex: 0 0 auto;
      gap: 18px;
      padding: 0 14px;
      overflow-x: auto;
      border-bottom: 1px solid #eee;
      background: #fff;
      scrollbar-width: none;
    }

    .tp-mnav-quick::-webkit-scrollbar {
      display: none;
    }

    .tp-mnav-quick a {
      flex: 0 0 auto;
      padding: 13px 0;
      border: 0;
      color: #444;
      font-size: 14px;
      font-weight: 600;
      text-decoration: none;
      white-space: nowrap;
    }

    /* ===== Two-pane body ================================================== */
    #layout_side .aside_navigation_wrap {
      flex: 1 1 auto;
      min-height: 0;
      overflow: hidden;
    }

    /* `display` is deliberately not set on the menu itself. The panel's own
       script runs jQuery .hide() on every ul.menu and .show() on the current
       tab, which writes an inline display:block — and an inline style outranks
       any rule here, however specific. So the flex row lives on .tp-mnav-body,
       a wrapper the script owns and nothing else touches.

       The rest is gated on the attribute the script sets once it has built:
       if the script ever fails to load, the stock vertical category list is
       left exactly as Firstmall ships it. */
    #layout_side #categorySideMenu.menu[data-tp-mnav="1"] {
      height: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }

    #layout_side .tp-mnav-body {
      display: flex;
      align-items: stretch;
      height: 100%;
      overflow: hidden;
    }

    /* Left rail: 1st-level categories, moved here from #categorySideMenu by the
       script. It scrolls on its own so a long category list never drags the
       grid on the right with it.

       Everything below is anchored on #layout_side: user.css styles these same
       <li> through six chained classes, and only an id outranks that.

       No divider line: the rail is white against the pane's tint, and the
       selected row takes that tint so it reads as continuous with the grid
       beside it — a rule here would cut straight across that. */
    #layout_side .tp-mnav-rail {
      box-sizing: border-box;
      flex: 0 0 108px;
      order: 1;
      width: 108px;
      height: 100%;
      overflow-y: auto;
      overscroll-behavior: contain;
      background: #fff;
      -webkit-overflow-scrolling: touch;
    }

    /* The skin pads .mitem by 16px either side; that has to go too, or the link
       inside never gets the full width. */
    #layout_side .tp-mnav-rail > li.mitem.category {
      box-sizing: border-box;
      display: block;
      width: 100%;
      height: auto;
      margin: 0;
      padding: 0;
      border: 0;
      background: transparent;
    }

    /* The skin's invisible overlay link: it covers the whole row and would
       navigate away instead of switching panes. */
    #layout_side .tp-mnav-rail > li.mitem.category > a.mitem_title,
    #layout_side .tp-mnav-rail > li.mitem.category > a.mitem_favorite {
      display: none;
    }

    /* Labels start at 16px — a little right of where centring used to put the
       longest one, "K-Traditional". That leaves it 91px against its 80px, so it
       still holds one line rather than breaking at its hyphen, which keep-all
       does not prevent. Row height comes from min-height, not padding. */
    #layout_side .tp-mnav-rail > li.mitem.category > a.mitem_goodsview {
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      width: 100%;
      min-height: 45px;
      margin: 0;
      padding: 0 0 0 16px;
      border: 0;
      color: #8d8597;
      font-size: 13px;
      font-weight: 600;
      line-height: 1.3;
      text-align: left;
      text-decoration: none;
      word-break: keep-all;
    }

    /* The selected row carries the pane's own tint, so the two read as one
       surface against the white rail. The marker rides the row itself, on the
       outer edge; the link above it has no background, so the row shows
       through. */
    #layout_side .tp-mnav-rail > li.mitem.category.is-active {
      background: #faf8ff;
      box-shadow: inset 3px 0 0 #7f56d9;
    }

    #layout_side .tp-mnav-rail > li.mitem.category.is-active > a.mitem_goodsview {
      color: #000;
    }

    /* Right pane: 2nd-level children of the active category. A vertical drag
       here steps to the neighbouring category, but only once the grid has
       scrolled to its end — the script listens passively and reads the scroll
       position afterwards, so ordinary scrolling is never intercepted. */
    /* overscroll-behavior keeps the page still: the skin already locks
       html/body when the panel opens, but a scroll that reaches the end of this
       pane still chains through to whatever is behind it — which moved the page
       under the panel and threw off the swipe that steps between categories. */
    #layout_side .tp-mnav-content {
      box-sizing: border-box;
      flex: 1 1 auto;
      order: 2;
      min-width: 0;
      height: 100%;
      padding: 16px 14px 28px;
      overflow-y: auto;
      overscroll-behavior: contain;
      background: #faf8ff;
      -webkit-overflow-scrolling: touch;
    }

    .tp-mnav-content-head {
      animation: tp-mnav-swap 0.2s ease;
      display: flex;
      align-items: center;
      gap: 4px;
      margin-bottom: 14px;
      color: #171320;
      font-size: 15px;
      font-weight: 700;
      text-decoration: none;
    }

    .tp-mnav-content-head span {
      color: #9f61ff;
    }

    .tp-mnav-grid {
      animation: tp-mnav-swap 0.2s ease;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px 8px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .tp-mnav-grid a {
      display: grid;
      justify-items: center;
      gap: 7px;
      color: #333;
      font-size: 12px;
      line-height: 1.25;
      text-align: center;
      text-decoration: none;
      word-break: keep-all;
    }

    /* The script marks break points inside joined names; this keeps the label a
       single grid item so those breaks wrap the text instead of splitting it
       into separate rows. `break-word` is the fallback for a long name with no
       separator at all — unlike `anywhere` it leaves intrinsic sizing alone, so
       it never narrows the label box on its own. */
    .tp-mnav-grid .tp-mnav-label {
      display: block;
      width: 100%;
      overflow-wrap: break-word;
    }

    /* Icon slot. Two layers: the product sits in the padding box while the tint
       underneath fills the whole circle. Categories with no artwork leave
       --tp-thumb unset and simply show the tint.

       The padding is what keeps a square product off the curve — a circle only
       contains a square of side d divided by root two, so 54px leaves 38px, and
       anything wider would have its corners clipped by the border-radius. */
    .tp-mnav-grid .tp-mnav-thumb {
      box-sizing: border-box;
      display: block;
      width: 54px;
      height: 54px;
      padding: 8px;
      border-radius: 50%;
      background-image: var(--tp-thumb, none),
        linear-gradient(145deg, #efe8ff, #dbeaff);
      background-repeat: no-repeat, no-repeat;
      background-position: center, center;
      background-size: contain, cover;
      background-origin: content-box, border-box;
    }

    /* Category artwork, keyed by "<rail slug>-<category slug>" as tagged by
       trendypicker-mobile-nav.js. The paths belong here rather than in the
       script: they resolve against this stylesheet, which sits two levels above
       the image folder, whereas the script is served from a different root. */
    .tp-mnav-thumb[data-tp-thumb="beauty-skincare"] { --tp-thumb: url("../../images/mobile_nav/Beauty/skincare.png"); }
    .tp-mnav-thumb[data-tp-thumb="beauty-makeup"] { --tp-thumb: url("../../images/mobile_nav/Beauty/makeup.png"); }
    .tp-mnav-thumb[data-tp-thumb="beauty-hair-care"] { --tp-thumb: url("../../images/mobile_nav/Beauty/haircare.png"); }
    .tp-mnav-thumb[data-tp-thumb="beauty-body-care"] { --tp-thumb: url("../../images/mobile_nav/Beauty/bodycare.png"); }
    .tp-mnav-thumb[data-tp-thumb="beauty-beauty-tools"] { --tp-thumb: url("../../images/mobile_nav/Beauty/beautytools.png"); }
    .tp-mnav-thumb[data-tp-thumb="beauty-nail"] { --tp-thumb: url("../../images/mobile_nav/Beauty/nail.png"); }
    .tp-mnav-thumb[data-tp-thumb="beauty-mens"] { --tp-thumb: url("../../images/mobile_nav/Beauty/mens.png"); }
    .tp-mnav-thumb[data-tp-thumb="beauty-supplements"] { --tp-thumb: url("../../images/mobile_nav/Beauty/supplements.png"); }

    .tp-mnav-thumb[data-tp-thumb="k-food-ramen-noodles"] { --tp-thumb: url("../../images/mobile_nav/k-food/ramen.png"); }
    .tp-mnav-thumb[data-tp-thumb="k-food-snacks-nuts"] { --tp-thumb: url("../../images/mobile_nav/k-food/snacks.png"); }
    .tp-mnav-thumb[data-tp-thumb="k-food-instant-quick-meals"] { --tp-thumb: url("../../images/mobile_nav/k-food/instant.png"); }
    .tp-mnav-thumb[data-tp-thumb="k-food-beverages"] { --tp-thumb: url("../../images/mobile_nav/k-food/beverages.png"); }
    .tp-mnav-thumb[data-tp-thumb="k-food-kitchen-staples"] { --tp-thumb: url("../../images/mobile_nav/k-food/kitchenstaples.png"); }
    .tp-mnav-thumb[data-tp-thumb="k-food-kimchi-side-dishes"] { --tp-thumb: url("../../images/mobile_nav/k-food/kimchi.png"); }
    .tp-mnav-thumb[data-tp-thumb="k-food-health"] { --tp-thumb: url("../../images/mobile_nav/k-food/health.png"); }

    .tp-mnav-thumb[data-tp-thumb="lifestyle-toys-cratfs"] { --tp-thumb: url("../../images/mobile_nav/lifestyle/toys.png"); }
    .tp-mnav-thumb[data-tp-thumb="lifestyle-staionery"] { --tp-thumb: url("../../images/mobile_nav/lifestyle/staionery.png"); }
    .tp-mnav-thumb[data-tp-thumb="lifestyle-kitchen"] { --tp-thumb: url("../../images/mobile_nav/lifestyle/kitchen.png"); }
    .tp-mnav-thumb[data-tp-thumb="lifestyle-living"] { --tp-thumb: url("../../images/mobile_nav/lifestyle/living.png"); }

    .tp-mnav-thumb[data-tp-thumb="k-traditional-art-decor"] { --tp-thumb: url("../../images/mobile_nav/k-traditional/art.png"); }
    .tp-mnav-thumb[data-tp-thumb="k-traditional-diy"] { --tp-thumb: url("../../images/mobile_nav/k-traditional/diy.png"); }
    .tp-mnav-thumb[data-tp-thumb="k-traditional-fashion-accessories"] { --tp-thumb: url("../../images/mobile_nav/k-traditional/fashion.png"); }
    .tp-mnav-thumb[data-tp-thumb="k-traditional-home"] { --tp-thumb: url("../../images/mobile_nav/k-traditional/home.png"); }
    .tp-mnav-thumb[data-tp-thumb="k-traditional-stationery"] { --tp-thumb: url("../../images/mobile_nav/k-traditional/traditional%20stationery.png"); }
    .tp-mnav-thumb[data-tp-thumb="k-traditional-kitchen"] { --tp-thumb: url("../../images/mobile_nav/k-traditional/traditional%20iitchen.png"); }
    .tp-mnav-thumb[data-tp-thumb="k-traditional-food"] { --tp-thumb: url("../../images/mobile_nav/k-traditional/traditional%20food.png"); }
    .tp-mnav-thumb[data-tp-thumb="k-traditional-games"] { --tp-thumb: url("../../images/mobile_nav/k-traditional/traditional%20games.png"); }
  }

  /* ===== Tablet ==========================================================
     Same layout, more room. The phone grid is a fixed 3 columns because the
     pane is only ~240px wide there; from 600px up it can fill instead, which
     keeps cells near 110-130px rather than stretching them to 220px. */
  @media only screen and (min-width: 600px) and (max-width: 1120px) {
    .tp-mnav-top {
      gap: 18px;
      padding: 14px 22px;
    }

    .tp-mnav-quick {
      gap: 24px;
      padding: 0 22px;
    }

    .tp-mnav-quick a {
      padding: 15px 0;
      font-size: 15px;
    }

    #layout_side .tp-mnav-rail {
      flex-basis: 150px;
      width: 150px;
    }

    #layout_side .tp-mnav-rail > li.mitem.category > a.mitem_goodsview {
      min-height: 52px;
      padding-left: 20px;
      font-size: 14px;
    }

    #layout_side .tp-mnav-content {
      padding: 20px 22px 32px;
    }

    .tp-mnav-content-head {
      margin-bottom: 18px;
      font-size: 17px;
    }

    .tp-mnav-grid {
      grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
      gap: 22px 12px;
    }

    .tp-mnav-grid a {
      font-size: 13px;
    }

    .tp-mnav-grid .tp-mnav-thumb {
      width: 64px;
      height: 64px;
      padding: 10px;
    }
  }