/* ============================================================
   OliverDeck — COMPONENT · NAVIGATION
   Header (top-bar + main + sticky), nav, breadcrumb, footer,
   tabs, sticky subnav, pagination.
   ============================================================ */

/* ---------- HEADER ---------- */
.od-header { position: sticky; top: 0; z-index: var(--z-sticky); background: var(--od-color-surface); border-bottom: 1px solid var(--od-color-border); }
.od-header-top { background: var(--od-color-bg-subtle); border-bottom: 1px solid var(--od-color-border); font-size: 13px; color: var(--od-color-text-muted); }
.od-header-top .container { display: flex; justify-content: space-between; align-items: center; min-height: 38px; }
.od-header-top-left, .od-header-top-right { display: flex; align-items: center; gap: var(--s-5); }
.od-header-top a:hover { color: var(--od-color-text-primary); }
.od-header-main .container { display: flex; align-items: center; gap: var(--s-6); min-height: 78px; }
.od-logo { display: flex; align-items: center; gap: 10px; flex: none; }
.od-logo img { height: 44px; width: auto; display: block; }
.od-nav { display: flex; gap: var(--s-6); margin-left: auto; }
.od-nav a { font-size: 15px; font-weight: 500; color: var(--od-color-text-primary); padding: 6px 2px; position: relative; transition: color .2s; }
.od-nav a:hover { color: var(--olive-600); }
.od-nav a.is-active { color: var(--wood-900); }
.od-nav a.is-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -18px; height: 2px; background: var(--olive-400); }
.od-header-actions { display: flex; align-items: center; gap: var(--s-3); }
.od-cart-btn { position: relative; width: 44px; height: 44px; border-radius: var(--r-md); background: var(--neutral-100); display: flex; align-items: center; justify-content: center; transition: background .2s; }
.od-cart-btn:hover { background: var(--olive-50); }
.od-cart-btn .material-symbols-outlined { font-size: 22px; color: var(--od-color-text-primary); }
.od-cart-count { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--olive-400); color: var(--wood-900); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 2px solid var(--od-color-surface); }
/* mobile burger */
.od-burger { display: none; }
@media (max-width: 860px) {
  .od-nav { display: none; }
  .od-burger { display: inline-flex; }
}

/* ---------- BREADCRUMB ---------- */
.od-breadcrumb { background: var(--od-color-bg-subtle); border-bottom: 1px solid var(--od-color-border); font-size: 13px; color: var(--od-color-text-muted); }
.od-breadcrumb .container { display: flex; align-items: center; gap: 8px; min-height: 44px; flex-wrap: wrap; }
.od-breadcrumb a { color: var(--od-color-text-muted); cursor: pointer; }
.od-breadcrumb a:hover { color: var(--olive-600); }
.od-breadcrumb .sep { color: var(--od-color-text-faint); }
.od-breadcrumb .current { color: var(--od-color-text-primary); font-weight: 500; }

/* ---------- FOOTER ---------- */
.od-footer { background: var(--od-color-surface-dark); color: var(--neutral-300); padding: var(--s-16) 0 var(--s-8); }
.od-footer h4 { font-family: var(--od-font-body); font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--neutral-50); margin: 0 0 var(--s-4); }
.od-footer-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.od-footer-links a { font-size: 14px; color: var(--neutral-300); transition: color .2s; }
.od-footer-links a:hover { color: var(--olive-300); }
.od-footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--s-10); padding-bottom: var(--s-10); border-bottom: 1px solid rgba(255,255,255,0.08); }
@media (max-width: 860px) { .od-footer-top { grid-template-columns: 1fr 1fr; } }
.od-footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: var(--s-6); font-size: 13px; color: var(--neutral-400); gap: 16px; flex-wrap: wrap; }
.od-footer-bottom a { color: var(--neutral-400); }
.od-footer-bottom a:hover { color: var(--olive-300); }
.od-footer-phone { font-family: var(--od-font-display); font-size: 18px; font-weight: 600; color: var(--neutral-50); display: inline-block; margin-bottom: 4px; }

/* ---------- TABS ---------- */
.od-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--od-color-border); margin-bottom: 32px; overflow-x: auto; }
.od-tabs button { padding: 14px 20px; font-size: 14px; font-weight: 600; color: var(--od-color-text-muted); border-bottom: 2px solid transparent; transition: color .15s, border-color .15s; white-space: nowrap; }
.od-tabs button:hover { color: var(--od-color-text-primary); }
.od-tabs button.is-active, .od-tabs button[aria-selected="true"] { color: var(--wood-900); border-bottom-color: var(--olive-400); }

/* ---------- STICKY SUBNAV ---------- */
.subnav { position: sticky; top: 78px; z-index: 90; background: var(--od-color-surface); border-bottom: 1px solid var(--od-color-border); }
.subnav .container { display: flex; gap: 4px; overflow-x: auto; }
.subnav a { padding: 14px; font-size: 13px; color: var(--od-color-text-muted); border-bottom: 2px solid transparent; white-space: nowrap; transition: color .15s, border-color .15s; cursor: pointer; }
.subnav a:hover { color: var(--od-color-text-primary); }
.subnav a.is-active { color: var(--wood-900); border-bottom-color: var(--olive-400); font-weight: 600; }

/* ---------- PAGINATION ---------- */
.od-pagination { display: inline-flex; align-items: center; gap: 6px; }
.od-pagination button, .od-pagination a {
  min-width: 40px; height: 40px; padding: 0 10px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm); border: 1px solid var(--od-color-border);
  font-size: 14px; font-weight: 600; color: var(--od-color-text-secondary);
  background: var(--od-color-surface); cursor: pointer; transition: border-color .15s, background .15s;
}
.od-pagination button:hover:not(:disabled), .od-pagination a:hover { border-color: var(--od-color-brand); background: var(--olive-50); }
.od-pagination .is-active { background: var(--wood-900); color: var(--neutral-50); border-color: var(--wood-900); }
.od-pagination button:disabled { opacity: var(--od-state-disabled-opacity); cursor: not-allowed; }
.od-pagination .gap { border: none; background: none; pointer-events: none; }