/* ============================================================
   wb-cio — Mobile/Tablet LANDSCAPE UX
   - Right-side vertical rail (thumb-reachable)
   - Never touches top/bottom; slight inset from right edge
   - Reduced content padding so gutter isn't excessive
   - Safe-area aware (iOS notches)
   - Theme-agnostic (uses tokens/vars only)
   ============================================================ */

@media screen and (orientation: landscape) and (max-width: 1200px){

  :root{
    /* Size & spacing (aligned to header-mobile.css defaults if present) */
    --rail-w:  var(--dock-w, 68px);  /* previous 80px felt too large */
    --rail-gap: max(10px, env(safe-area-inset-right));
    --rail-top: 12px;                /* gap from top */
    --rail-bottom: 12px;             /* gap from bottom */
    --rail-radius: 20px;

    /* Colors (inherit from global/theme tokens) */
    --rail-bg:     color-mix(in srgb, var(--surface, #fff) 92%, #000 8%);
    --rail-border: color-mix(in srgb, var(--border, #e9e9e9) 85%, #000 15%);
    --rail-shadow: 0 10px 28px rgba(0,0,0,.16);
  }

  /* ===== Vertical Rail (re-uses .wbc-tabbar) ===== */
  .wbc-tabbar{
    /* Dock to RIGHT always in landscape, slightly off the edges */
    position: fixed;
    top: var(--rail-top);
    bottom: var(--rail-bottom);
    right: var(--rail-gap);
    left: auto;

    width: var(--rail-w);
    display: grid !important;
    grid-auto-rows: minmax(56px, 1fr);
    align-content: start;
    gap: 10px;

    background: var(--rail-bg);
    border: 1px solid var(--rail-border);
    border-radius: var(--rail-radius);
    box-shadow: var(--rail-shadow);
    padding: 10px;
    z-index: 95;
    backdrop-filter: saturate(160%) blur(8px);
    contain: paint;
  }

  /* Force-right guard: ignore any legacy left-handed toggles/classes */
  body:not(.wbc-allow-left-rail) .wbc-tabbar.left,
  body:not(.wbc-allow-left-rail) .wbc-tabbar.wbc-tabbar--left,
  body:not(.wbc-allow-left-rail).wbc-handed-left .wbc-tabbar{
    left: auto !important;
    right: var(--rail-gap) !important;
  }

  /* Items: icon + label, compact */
  .wbc-tabbar__item{
    display: grid;
    grid-template-rows: auto auto;
    align-items: center;
    justify-items: center;
    width: 100%;
    min-height: 56px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--rail-bg) 92%, #000 8%);
    border: 1px solid transparent;
    text-align: center;
    padding: 6px 6px;
    color: var(--text);
    transition: background-color .12s ease, transform .12s ease;
  }
  .wbc-tabbar__item .wbc-ico{ width: 22px; height: 22px; }
  .wbc-tabbar__item span{ font-size: 11px; line-height: 1.2; opacity: .88; }
  .wbc-tabbar__item:hover{ background: color-mix(in srgb, var(--accent, #E17A30) 8%, transparent); }
  .wbc-tabbar__item:active{ transform: translateZ(0) scale(.98); }
  .wbc-tabbar__item.is-active{
    background: color-mix(in srgb, var(--accent, #E17A30) 14%, transparent);
    border-color: color-mix(in srgb, var(--accent, #E17A30) 30%, transparent);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--accent, #E17A30) 30%, transparent 70%);
  }

  /* Badge position on rail */
  .wbc-tabbar__badge{
    position: absolute;
    top: 6px; right: 6px;
    transform: none;
  }

  /* =========================================================
     Content padding for rail — reduced so it’s not “too much”
     - Use a *fraction* of the rail width to feel balanced
     - Home page tighter (often full-bleed hero/tiles)
     ========================================================= */
  .wbc-main,
  .wbc-header .wbc-header__inner,
  .wbc-section,
  .wbc-container{
    padding-right: calc((var(--rail-w) * 0.66) + var(--rail-gap) + env(safe-area-inset-right)) !important;
  }

  body.home .wbc-main,
  body.home .wbc-header .wbc-header__inner,
  body.home .wbc-section,
  body.home .wbc-container{
    padding-right: calc((var(--rail-w) * 0.5) + var(--rail-gap) + env(safe-area-inset-right)) !important;
  }

  /* ===== Header tweaks in landscape ===== */
  .wbc-header .wbc-header__inner{
    gap: 14px;
    padding-block: 10px;
  }
  /* Prefer overlay search in landscape; inline can crowd shorter viewports */
  .wbc-search--inline{ display: none; }

  /* ===== Hero tune for landscape ===== */
  .wbc-hero{
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 14px auto;
  }
  .wbc-hero__text h1{ font-size: clamp(28px, 4vw, 44px); }
  .wbc-hero__image{ aspect-ratio: 4/3; border-radius: 24px; }

  /* ===== Product grids: orientation-aware columns ===== */
  .wbc-products{
    /* phones landscape default */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }
  @media (min-width: 900px) and (orientation: landscape){
    /* larger phones / small tablets */
    .wbc-products{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }

  /* ===== Card bottom alignment remains consistent ===== */
  .wbc-card--product{ display:flex; flex-direction:column; }
  .wbc-card--product .wbc-card__body{ display:flex; flex-direction:column; gap:8px; }
  .wbc-card--product .wbc-card__price{ margin-top:auto; }
  .wbc-card--product .wbc-cta,
  .wbc-card--product .button{ margin-top:8px; }

  /* ===== Drawers above rail, search overlay above all ===== */
  .wbc-drawer{ z-index: 100; }
  .wbc-search-overlay{ z-index: 110; }

} /* /landscape */

/* Final guard: if any legacy "left rail" classes sneak in, force right */
@media (max-width: 1200px) and (orientation: landscape){
  .wbc-tabbar.left,
  .wbc-tabbar--left {
    left: auto !important;
    right: var(--rail-gap) !important;
  }
}