/* ============================================
   2FLYY INC. — Shared site chrome
   Linked from every storefront page that has the standard header,
   hamburger menu panel, and cart panel: footwear.html, clothing.html,
   accessories.html, favorites.html, product.html.

   This file holds the styling that's identical across those pages
   (the header, icon buttons, logo pill, side panels, menu links)
   plus small shared components used by more than one page, like the
   brand filter chips on the category pages. Anything specific to
   just one page's own layout (product grids, the product detail
   layout, etc.) stays in that page's own <style> block, after this
   file is linked.

   Previously this whole block was copy-pasted into every page's
   <style> tag, which is how the site ended up with small drift
   between pages (a --red variable defined on some pages and not
   others, slightly different logo-pill padding, etc.) One shared
   file means a fix here applies everywhere at once.
   ============================================ */

:root {
  --black: #0a0a0a;
  --pink: #ff2e93;
  --white: #f5f5f2;
  --gray: #e8e8e5;
  --red: #d64545;
}

* { margin: 0; padding: 0; box-sizing: border-box; touch-action: manipulation; }

body {
  background: var(--white);
  background-image: repeating-linear-gradient(
    135deg,
    rgba(10,10,10,0.025) 0px,
    rgba(10,10,10,0.025) 1px,
    transparent 1px,
    transparent 14px
  );
  font-family: 'Courier New', Courier, monospace;
  color: var(--black);
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* ---------- HEADER ---------- */
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  background: var(--white);
  border-bottom: 3px solid var(--black);
  position: sticky;
  top: 0;
  z-index: 20;
  max-width: 1400px;
  margin: 0 auto;
}

.icon-btn {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  position: relative;
}

.icon-btn svg { width: 24px; height: 24px; }

.logo-pill {
  background: var(--black);
  padding: 10px 20px;
  border-radius: 8px;
  text-decoration: none;
  box-shadow: 3px 3px 0 var(--pink);
}

.logo-pill span {
  color: var(--pink);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 2px;
}

.cart-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: var(--pink);
  color: var(--black);
  font-size: 10px;
  font-weight: 700;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--white);
}

/* ---------- SIDE PANELS (menu + cart, shared) ---------- */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 30;
}

.overlay.open { opacity: 1; pointer-events: auto; }

.panel {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 78%;
  max-width: 320px;
  background: var(--white);
  z-index: 40;
  transition: transform 0.25s ease;
  display: flex;
  flex-direction: column;
}

.menu-panel { left: 0; transform: translateX(-100%); border-right: 3px solid var(--black); }
.menu-panel.open { transform: translateX(0); }

.cart-panel { right: 0; transform: translateX(100%); border-left: 3px solid var(--black); }
.cart-panel.open { transform: translateX(0); }

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px;
  border-bottom: 3px solid var(--black);
}

.panel-header span { font-weight: 700; font-size: 15px; letter-spacing: 2px; }

.panel-body { padding: 10px 0; overflow-y: auto; flex: 1; }

.menu-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  text-decoration: none;
  color: var(--black);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 1px;
  border-bottom: 1px solid var(--gray);
}

.menu-link .arrow { color: var(--pink); }

.menu-link-disabled {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  color: var(--black);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 1px;
  border-bottom: 1px solid var(--gray);
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}
.menu-link-disabled .soon-tag { font-size: 9px; letter-spacing: 1px; font-weight: 400; margin-left: 8px; }

.cart-empty {
  padding: 40px 18px;
  text-align: center;
  font-size: 12px;
  color: #888;
  letter-spacing: 1px;
}

.close-x {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  font-family: 'Courier New', Courier, monospace;
  font-weight: 700;
}

/* ---------- BRAND FILTER CHIPS ----------
   Used on the category pages (footwear/clothing/accessories) above
   the product grid. Same active-state pattern as the size selector
   on the product page: white by default, pink fill when selected. */
.brand-filters {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 0 18px 16px;
  scrollbar-width: none;
  max-width: 1400px;
  margin: 0 auto;
}

.brand-filters::-webkit-scrollbar { display: none; }

.brand-chip {
  flex: 0 0 auto;
  padding: 8px 16px;
  border: 2px solid var(--black);
  border-radius: 20px;
  background: var(--white);
  font-family: 'Courier New', Courier, monospace;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s ease, color 0.12s ease;
}

.brand-chip.active { background: var(--pink); color: var(--black); }

/* ---------- SUBCATEGORY TABS ----------
   Type-of-item tabs (e.g. Sneakers/Boots/Sandals/Slides on Footwear).
   Deliberately a different shape from the brand pills above — an
   underline tab bar — so the two rows read as two different kinds
   of filter rather than more of the same chips. Static: always shows
   every tab for the category, never narrows based on the brand filter,
   and only one tab can be active at a time. */
.subcat-tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding: 0 18px;
  scrollbar-width: none;
  max-width: 1400px;
  margin: 0 auto;
  border-bottom: 2px solid var(--black);
}

.subcat-tabs::-webkit-scrollbar { display: none; }

.subcat-tab {
  flex: 0 0 auto;
  padding: 10px 14px;
  border: none;
  background: none;
  font-family: 'Courier New', Courier, monospace;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #888;
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: color 0.12s ease, border-color 0.12s ease;
}

.subcat-tab.active { color: var(--black); border-bottom-color: var(--pink); }