/* shared.css */

:root{
  --bg:#fafafa;
  --border:#e6e6e6;
  --text:#111;
  --muted:#666;

  --bottom-nav-h: 64px;

  /* Header knobs */
  --header-row1-h: 35px;             /* overall header row height */
  --header-row1-pad-y: 5px;          /* set to 10px if you want breathing room */
  --header-gap: 5px;

  /* Icon sizing rules */
  --icon-max-w: 150px;                /* prevents icon from getting too wide */
  --icon-radius: 4px;

  /* Search knobs (if used on a page) */
  --search-width: min(520px, 78vw);
}

*{ box-sizing:border-box; }

body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  padding-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom));
}

/* ===== Shared Header ===== */
header.site-header{
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(250,250,250,.95);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border);
}

.site-topbar{
  padding: 8px 8px;
  display:flex;
  flex-direction: column;
  align-items: center;
  gap: var(--header-gap);
}

.site-header-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  width: 100%;
}

/* Row 1: icon + store name */
.site-header-row-1{
  height: var(--header-row1-h);
  padding: var(--header-row1-pad-y) 0;
}

/* Icon: maximize against container height */
.site-store-icon{
  height: 100%;
  width: auto;               /* keep aspect ratio */
  max-width: var(--icon-max-w);
  object-fit: cover;
  border-radius: var(--icon-radius);
  flex: 0 0 auto;
}

.site-store-name{
  font-weight: 900;
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
}

/* Row 2 (optional search row) */
.site-smart-search{
  font-weight: 800;
  font-size: 14px;
  color: var(--text);
  white-space: nowrap;
}

.site-search{
  width: var(--search-width);
  flex: 0 0 auto;
}
.site-search input{
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background:#fff;
  outline:none;
  font-size: 14px;
}

/* ===== Shared Bottom Nav ===== */
.bottom-nav{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 1000;

  background: rgba(250,250,250,.96);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--border);

  display: flex;
  justify-content: space-around;
  align-items: center;
}

/* Each tab */
.bottom-nav a{
  flex: 1;
  text-align: center;
  text-decoration: none;
  color: #666;
  font-weight: 700;
  font-size: 12px;
  padding: 10px 6px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;

  -webkit-tap-highlight-color: transparent;
}

/* Icon container */
.nav-ico{
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
}

/* SVG uses currentColor so it matches active/inactive automatically */
.nav-ico svg{
  width: 22px;
  height: 22px;
  stroke: currentColor;
}

.nav-label{
  line-height: 1;
  color: inherit;
}

/* Active state */
.bottom-nav a.active{
  color: #111;
}

.bottom-nav a.active .nav-ico{
  background: rgba(0,0,0,.06);
  border-radius: 10px;
  width: 34px;
  height: 28px;
}

/* ===== Option A: Hide bottom nav while product viewer is open ===== */
body.viewer-open{
  padding-bottom: 0; /* remove reserved space while nav is hidden */
}

body.viewer-open .bottom-nav{
  display: none !important;
}

/* =========================================================
   FEED OVERLAY (vertical mode): pill colors
   ========================================================= */
.feed-overlay .price-block .off-pill.off-pill-sale{
  color: #b42318 !important;
  border-color: rgba(244, 63, 94, 0.45) !important;
  background: rgba(244, 63, 94, 0.14) !important;
}

.feed-overlay .price-block .off-pill.off-pill-limited{
  color: #1d4ed8 !important;
  border-color: rgba(59, 130, 246, 0.45) !important;
  background: rgba(59, 130, 246, 0.14) !important;
}

/* =========================================================
   GRID: Sale / Time Limited text colors (inside .tile-meta)
   ========================================================= */
.tile .tile-meta .tag-mini.tag-mini-sale{
  color: #ff655a !important;
}

.tile .tile-meta .tag-mini.tag-mini-limited{
  color: #608afd !important;
}

/* =========================================================
   MOBILE: make ALL pill text minimal + consistent in grid
   ========================================================= */
@media (max-width: 520px){

  /* Bottom-left meta pill (brand • -% • Sale • Time Limited) */
  .tile .tile-meta{
    font-size: 8px !important;
    line-height: 1.05 !important;
    gap: 4px !important;
    padding: 3px 6px !important;
    max-width: calc(100% - 12px) !important;
  }

  /* Force ALL text inside to match size and override bold rules from style.css */
  .tile .tile-meta *{
    font-size: inherit !important;
    line-height: inherit !important;
    font-weight: 700 !important;     /* overrides .tag-mini { font-weight: 900 } */
    letter-spacing: 0.1px !important;
  }

  /* Keep discount emphasis but still minimal */
  .tile .tile-meta .off{
    font-weight: 800 !important;
  }

  /* Top-right countdown pill */
  .tile .countdown-pill{
    font-size: 8px !important;
    line-height: 1.05 !important;
    padding: 3px 6px !important;
    border-radius: 999px !important;
    letter-spacing: 0.15px !important;
    font-weight: 800 !important;
    max-width: calc(100% - 16px) !important;
  }

  /* If you also use any other tile corner tags, shrink them too */
  .tile .badge-stack{
    gap: 4px !important;
    left: 6px !important;
    bottom: 6px !important;
  }

  .tile .badge-stack .tag,
  .tile .tag,
  .tile .tag-off{
    font-size: 8px !important;
    line-height: 1.05 !important;
    padding: 2px 5px !important;
    border-radius: 6px !important;
    border-width: 1px !important;
  }
}