/* =========================================================
   Mobile/Tablet Navigation
   - Portrait (≤1200px): bottom bar
   - Landscape (≤1200px): RIGHT-side capsule dock
   - Home page: no content gap on the right in landscape
   - Theme-agnostic
   ========================================================= */

/* ---- Token fallbacks ---- */
:root{
  --mh-surface:      var(--surface, #ffffff);
  --mh-text:         var(--text,    #111111);
  --mh-border:       var(--border,  rgba(0,0,0,.08));
  --mh-accent:       var(--accent,  #E17A30);
  --mh-on-accent:    var(--on-accent, #ffffff);

  --mh-z: 120;

  /* portrait bottom bar */
  --mh-pad-x: 12px;
  --mh-pad-y: 8px;
  --mh-radius: 14px;
  --mh-item-size: 48px;
  --mh-gap: 10px;
  --mh-font: 12px;
  --mh-bar-height: 64px;

  /* landscape right dock (inherits from responsive/landscape.css if set) */
  --dock-w: var(--rail-w, 68px);      /* ← inherit rail width when defined */
  --dock-gap: max(10px, env(safe-area-inset-right)); /* distance from right edge */
  --dock-top: 12px;
  --dock-bottom: 12px;
  --dock-pad: 10px;
  --dock-radius: 22px;
  --dock-item: 56px;
  --dock-item-radius: 16px;

  --dock-bg: color-mix(in srgb, var(--mh-surface) 92%, #000 8%);
  --dock-border: color-mix(in srgb, var(--mh-border) 90%, #000 10%);
  --dock-fg: var(--mh-text);
}

/* ---------------- Shared item styling ---------------- */
.wbc-tabbar__item{
  flex: 1 1 0;
  min-width: 0;
  display: grid;
  grid-template-rows: var(--mh-item-size) auto;
  align-content: center;
  justify-items: center;
  gap: 4px;
  text-decoration: none;
  color: var(--mh-text);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--mh-radius);
  padding: 4px 6px;
  font-size: var(--mh-font);
  font-weight: 600;
  line-height: 1.1;
  position: relative;
  transition: background-color .12s ease, transform .12s ease, opacity .12s ease, border-color .12s ease;
  will-change: transform;
}
.wbc-tabbar__item .wbc-ico{ width: 22px; height: 22px; display:inline-block; }
.wbc-tabbar__item .label{
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
  opacity: .92;
}
.wbc-tabbar__item:hover{ background: color-mix(in srgb, var(--mh-accent) 8%, transparent); }
.wbc-tabbar__item:active{ transform: translateZ(0) scale(.98); }
.wbc-tabbar__item.is-active{
  background: color-mix(in srgb, var(--mh-accent) 14%, transparent);
  border-color: color-mix(in srgb, var(--mh-accent) 30%, transparent);
}

/* Badge */
.wbc-tabbar__badge{
  position: absolute;
  top: 6px; right: 10px;
  min-width: 18px; height: 18px; padding: 0 6px; border-radius: 9px;
  background: var(--mh-accent); color: var(--mh-on-accent);
  font-size: 11px; font-weight: 700; line-height: 1;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.18);
}

/* ---------------- Portrait (≤1200px) — bottom bar ---------------- */
@media (max-width: 1200px) and (orientation: portrait){
  .wbc-tabbar{
    position: fixed !important;
    left: 0; right: 0; bottom: 0;
    z-index: var(--mh-z) !important;
    display: flex !important;
    gap: var(--mh-gap);
    align-items: stretch;
    padding: calc(var(--mh-pad-y) - 2px)
             max(var(--mh-pad-x), env(safe-area-inset-right))
             calc(var(--mh-pad-y) + env(safe-area-inset-bottom))
             max(var(--mh-pad-x), env(safe-area-inset-left));
    background: color-mix(in srgb, var(--mh-surface) 95%, #000 5%);
    border-top: 1px solid var(--mh-border);
    backdrop-filter: saturate(110%) blur(6px);
    -webkit-backdrop-filter: saturate(110%) blur(6px);
  }
  body{
    padding-bottom: calc(var(--mh-bar-height) + env(safe-area-inset-bottom));
    padding-right: 0;
  }
}

/* ------------- Landscape (≤1200px) — RIGHT capsule dock ------------- */
@media (max-width: 1200px) and (orientation: landscape){
  /* Default: overlap dock without adding body gap (content padding handled elsewhere if desired) */
  body{
    padding-bottom: 0;
    padding-right: 0;
  }

  .wbc-tabbar{
    position: fixed !important;
    top: var(--dock-top);
    bottom: var(--dock-bottom);
    right: var(--dock-gap);
    left: auto;
    width: var(--dock-w);
    z-index: var(--mh-z) !important;
    display: grid !important;
    grid-template-rows: repeat(4, var(--dock-item)); /* 4 items by default */
    align-content: start;
    gap: 10px;
    padding: var(--dock-pad);
    border-radius: var(--dock-radius);
    background: var(--dock-bg);
    border: 1px solid var(--dock-border);
    box-shadow: 0 10px 28px rgba(0,0,0,.18), 0 0 0 1px rgba(255,255,255,.02) inset;
    backdrop-filter: saturate(112%) blur(6px);
    -webkit-backdrop-filter: saturate(112%) blur(6px);
    contain: paint;
  }

  .wbc-tabbar__item{
    width: 100%;
    height: var(--dock-item);
    min-height: var(--dock-item);
    border-radius: var(--dock-item-radius);
    color: var(--dock-fg);
    border: 1px solid transparent;
    background: color-mix(in srgb, var(--dock-bg) 92%, #000 8%);
    grid-template-rows: auto auto; /* icon + label */
  }
  .wbc-tabbar__item .wbc-ico{ font-size: 22px; width: 22px; height: 22px; }
  .wbc-tabbar__item.is-active{
    background: color-mix(in srgb, var(--mh-accent) 14%, transparent);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--mh-accent) 30%, transparent 70%);
  }
  .wbc-tabbar__badge{ top: 6px; right: 6px; transform: none; }

  /* Ensure no horizontal scroll while dock overlaps */
  .site, .site-main, #content{ overflow-x: clip; }
}

/* ---- Optional: add a content push on NON-home pages only ---- */
/* This keeps product/category pages from feeling cramped by the dock,
   while the home page stays full-bleed with NO right gap. */
@media (max-width: 1200px) and (orientation: landscape){
  body:not(.home) .site,
  body:not(.home) .site-main,
  body:not(.home) #content{
    margin-right: calc(var(--dock-w) + var(--dock-gap) + 8px);
  }
  body.home .site,
  body.home .site-main,
  body.home #content{
    margin-right: 0;
  }
}

/* ---------------- Drawers (shared guard styles) ---------------- */
.wbc-drawer{ position: fixed; inset: 0; display: none; z-index: calc(var(--mh-z) + 10); }
.wbc-drawer.is-open{ display: block; background: rgba(0,0,0,.35); }
.wbc-drawer__panel{
  position: absolute; left: 0; top: 0; height: 100%; width: min(90vw, 360px);
  background: var(--mh-surface); border-right: 1px solid var(--mh-border);
  border-radius: 0 16px 16px 0; display: flex; flex-direction: column;
  box-shadow: 0 20px 40px rgba(0,0,0,.2);
}
.wbc-drawer__panel--right{
  left: auto; right: 0; width: min(95vw, 420px);
  border-left: 1px solid var(--mh-border); border-right: 0;
  border-radius: 16px 0 0 16px;
}
.wbc-drawer__close{ margin: 10px; font-size: 28px; background: transparent; border: 0; color: var(--mh-text); }
.wbc-drawer__content{ padding: 8px 14px 18px; overflow: auto; color: var(--mh-text); }

/* Prevent sideways scroll on mobile */
html, body { overflow-x: hidden; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  * { transition: none !important; animation: none !important; }
}