/* Arena Teney — Shop S1.3 controls pass 0217s13r01
 * Presentation-only. Reuses canonical ui007 filters, availability toggle and department controls.
 * No JS, economy, purchase, X-lock, HUD or shared dock ownership here.
 */

@media (max-width: 960px) {
  html.shop-s1-rework body[data-screen="shop"] #s03-shop-mobile-hero .s03-mobile-actions {
    position: relative;
    gap: 8px;
    margin-top: 14px;
    padding: 4px;
    border: 1px solid rgba(167, 127, 65, .28);
    border-radius: 11px;
    background:
      linear-gradient(180deg, rgba(12, 10, 8, .62), rgba(5, 5, 4, .78));
    box-shadow:
      inset 0 1px 0 rgba(255, 238, 199, .035),
      0 7px 18px rgba(0, 0, 0, .20);
  }

  html.shop-s1-rework body[data-screen="shop"] #s03-shop-mobile-hero .s03-mobile-action {
    min-height: 43px;
    padding: 8px 12px;
    border: 1px solid rgba(137, 117, 86, .42);
    border-radius: 8px;
    color: #d7cbb5;
    background:
      linear-gradient(180deg, rgba(30, 24, 18, .94), rgba(10, 9, 7, .98));
    box-shadow:
      inset 0 1px 0 rgba(255, 239, 205, .04),
      inset 0 -8px 20px rgba(0, 0, 0, .12);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .015em;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .92);
  }

  html.shop-s1-rework body[data-screen="shop"] #s03-shop-mobile-hero .s03-mobile-action.primary {
    border-color: rgba(214, 166, 80, .68);
    color: #f2d99f;
    background:
      radial-gradient(circle at 50% 0, rgba(218, 164, 72, .10), transparent 52%),
      linear-gradient(180deg, rgba(73, 48, 22, .96), rgba(25, 18, 11, .99));
    box-shadow:
      inset 0 1px 0 rgba(255, 239, 198, .065),
      inset 0 0 20px rgba(181, 123, 48, .045);
  }

  html.shop-s1-rework body[data-screen="shop"] #s03-shop-mobile-hero .s03-mobile-action[aria-expanded="true"] {
    border-color: rgba(220, 174, 91, .78);
    color: #f5e4ba;
    background:
      radial-gradient(circle at 50% 0, rgba(220, 174, 91, .12), transparent 50%),
      linear-gradient(180deg, rgba(82, 50, 23, .98), rgba(27, 18, 11, .99));
    box-shadow:
      inset 0 1px 0 rgba(255, 241, 207, .08),
      0 0 0 1px rgba(220, 174, 91, .06);
  }

  html.shop-s1-rework body[data-screen="shop"] #s03-shop-mobile-hero .s03-filter-count {
    min-width: 19px;
    height: 19px;
    margin-left: 5px;
    padding: 0 5px;
    border: 1px solid rgba(237, 205, 141, .42);
    color: #24170a;
    background: linear-gradient(180deg, #e1bc70, #a97831);
    box-shadow: inset 0 1px 0 rgba(255, 247, 219, .28);
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 9px;
    font-weight: 900;
  }

  html.shop-s1-rework body[data-screen="shop"] #screen-shop .ui007-departments {
    gap: 8px;
    padding: 11px 10px 4px;
    scroll-padding-inline: 10px;
    scroll-snap-type: x proximity;
  }

  html.shop-s1-rework body[data-screen="shop"] #screen-shop .ui007-department {
    position: relative;
    min-height: 44px;
    gap: 8px;
    padding: 7px 13px 7px 8px;
    border: 1px solid rgba(137, 117, 84, .38);
    border-radius: 10px;
    color: #c8bda9;
    background:
      linear-gradient(180deg, rgba(25, 21, 16, .97), rgba(8, 8, 7, .99));
    box-shadow:
      inset 0 1px 0 rgba(255, 238, 202, .035),
      0 7px 16px rgba(0, 0, 0, .16);
    scroll-snap-align: start;
  }

  html.shop-s1-rework body[data-screen="shop"] #screen-shop .ui007-department::after {
    content: '';
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 3px;
    height: 1px;
    opacity: .32;
    background: linear-gradient(90deg, transparent, rgba(209, 166, 87, .45), transparent);
    pointer-events: none;
  }

  html.shop-s1-rework body[data-screen="shop"] #screen-shop .ui007-department > span {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
    border: 1px solid rgba(160, 131, 80, .38);
    border-radius: 7px;
    background:
      radial-gradient(circle at 50% 28%, rgba(188, 139, 61, .10), transparent 62%),
      rgba(38, 27, 17, .78);
    box-shadow: inset 0 1px 0 rgba(255, 239, 203, .035);
    font-size: 14px;
  }

  html.shop-s1-rework body[data-screen="shop"] #screen-shop .ui007-department b {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .015em;
  }

  html.shop-s1-rework body[data-screen="shop"] #screen-shop .ui007-department.active,
  html.shop-s1-rework body[data-screen="shop"] #screen-shop .ui007-department[aria-current="true"] {
    border-color: rgba(219, 172, 91, .78);
    color: #f2dcad;
    background:
      radial-gradient(circle at 48% 0, rgba(222, 170, 83, .10), transparent 56%),
      linear-gradient(180deg, rgba(72, 47, 21, .98), rgba(20, 14, 9, .99));
    box-shadow:
      inset 0 1px 0 rgba(255, 239, 199, .07),
      inset 0 0 18px rgba(181, 123, 48, .05),
      0 8px 18px rgba(0, 0, 0, .20);
  }

  html.shop-s1-rework body[data-screen="shop"] #screen-shop .ui007-department.active > span,
  html.shop-s1-rework body[data-screen="shop"] #screen-shop .ui007-department[aria-current="true"] > span {
    border-color: rgba(220, 174, 91, .62);
    background:
      radial-gradient(circle at 50% 24%, rgba(222, 170, 83, .16), transparent 62%),
      rgba(54, 36, 18, .86);
  }

  html.shop-s1-rework body[data-screen="shop"] #screen-shop .ui007-rotation-note {
    position: relative;
    margin: 7px 10px 11px;
    padding: 10px 12px;
    border: 1px solid rgba(155, 126, 77, .38);
    border-radius: 9px;
    background:
      radial-gradient(circle at 0 50%, rgba(193, 143, 60, .07), transparent 42%),
      linear-gradient(180deg, rgba(12, 11, 9, .86), rgba(7, 7, 6, .94));
    box-shadow:
      inset 0 1px 0 rgba(255, 237, 198, .035),
      inset 0 0 20px rgba(120, 79, 28, .025);
  }

  html.shop-s1-rework body[data-screen="shop"] #screen-shop .ui007-rotation-note::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    border-radius: 999px;
    background: linear-gradient(180deg, #c89443, #6e481d);
    opacity: .72;
  }

  html.shop-s1-rework body[data-screen="shop"] #screen-shop .ui007-rotation-note span {
    display: block;
    margin-left: 8px;
    color: #e6cf9c;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .015em;
  }

  html.shop-s1-rework body[data-screen="shop"] #screen-shop .ui007-shop.s03-filters-open .ui007-toolbar {
    position: relative;
    display: grid !important;
    gap: 10px;
    margin: 0 0 11px;
    padding: 12px;
    border: 1px solid rgba(166, 132, 76, .42);
    border-radius: 11px;
    background:
      radial-gradient(circle at 100% 0, rgba(192, 137, 53, .07), transparent 38%),
      linear-gradient(180deg, rgba(20, 16, 12, .98), rgba(7, 7, 6, .995)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 238, 201, .045),
      0 12px 26px rgba(0, 0, 0, .22);
  }

  html.shop-s1-rework body[data-screen="shop"] #screen-shop .ui007-toolbar label > span {
    color: #a99a82;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  html.shop-s1-rework body[data-screen="shop"] #screen-shop .ui007-toolbar input,
  html.shop-s1-rework body[data-screen="shop"] #screen-shop .ui007-toolbar select {
    min-height: 44px;
    border: 1px solid rgba(139, 119, 83, .42);
    border-radius: 8px;
    color: #eadfc9;
    background:
      linear-gradient(180deg, rgba(9, 9, 8, .98), rgba(5, 5, 5, .995));
    box-shadow: inset 0 1px 0 rgba(255, 241, 211, .025);
    font-size: 12px;
  }

  html.shop-s1-rework body[data-screen="shop"] #screen-shop .ui007-toolbar input::placeholder {
    color: #756d61;
  }

  html.shop-s1-rework body[data-screen="shop"] #screen-shop .ui007-toolbar input:focus,
  html.shop-s1-rework body[data-screen="shop"] #screen-shop .ui007-toolbar select:focus {
    outline: 1px solid rgba(213, 166, 80, .30);
    outline-offset: 1px;
    border-color: rgba(213, 166, 80, .68);
    box-shadow:
      inset 0 1px 0 rgba(255, 241, 211, .035),
      0 0 0 3px rgba(213, 166, 80, .06);
  }

  html.shop-s1-rework body[data-screen="shop"] #screen-shop .ui007-result-head {
    margin: 4px 3px 10px;
    padding: 0 2px 7px;
    border-bottom: 1px solid rgba(143, 116, 73, .18);
    color: #c6b9a4;
  }

  html.shop-s1-rework body[data-screen="shop"] #screen-shop .ui007-result-head b {
    color: #918570;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 10px;
    font-weight: 700;
  }
}

@media (max-width: 390px) {
  html.shop-s1-rework body[data-screen="shop"] #s03-shop-mobile-hero .s03-mobile-action {
    min-height: 41px;
    padding-inline: 9px;
    font-size: 11px;
  }

  html.shop-s1-rework body[data-screen="shop"] #screen-shop .ui007-department {
    min-height: 42px;
    padding-right: 11px;
  }
}