/* Baylan global shell (R1.2)

   Topbar, header, search, catalogue drawer, footer and mobile bottom nav.
   Depends on baylan-foundation.css for tokens and primitives; loads after it
   and after the legacy Yoga bundle. Nothing here selects a legacy Yoga class. */

/* --------------------------------------------------------------------------
   1. Fixed-stack geometry
   -------------------------------------------------------------------------- */

.bl-shell {
  --bl-bottom-nav-height: 58px;
  --bl-fixed-bottom-offset: calc(58px + var(--bl-safe-bottom));
  --bl-topbar-height: 32px;
}

@media (min-width: 992px) {
  .bl-shell {
    --bl-bottom-nav-height: 0px;
    --bl-fixed-bottom-offset: var(--bl-safe-bottom);
  }
}

/* --------------------------------------------------------------------------
   2. Shell frame
   -------------------------------------------------------------------------- */

/* Yoga's bundle pads body 16rem at >=1200px for its fixed desktop sidebar,
   which the redesign shell does not render — kill it or the page shifts right. */
@media only screen and (min-width: 1200px) {
  body.bl-enabled { padding-left: 0; }
}

.bl-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  /* Page background lives here rather than on individual page scopes, so a strip
     of the browser's white body cannot show between a scope wrapper and the
     footer (or between two scopes stacked in one main). */
  background: var(--bl-color-bg);
}

.bl-shell-main {
  flex: 1 1 auto;
  padding-bottom: var(--bl-bottom-nav-height);
}

.bl-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: var(--bl-z-toast);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--bl-space-2) var(--bl-space-4);
  background: var(--bl-color-accent);
  color: #fff;
  text-decoration: none;
}
.bl-skip:focus { left: 0; }

/* --------------------------------------------------------------------------
   3. Topbar
   -------------------------------------------------------------------------- */

.bl-topbar {
  background: var(--bl-color-accent-900);
  color: rgba(255, 255, 255, 0.82);
  font-size: 12px;
  line-height: 1;
  padding-top: var(--bl-safe-top);
}

.bl-topbar-inner {
  display: flex;
  align-items: center;
  gap: var(--bl-space-4);
  min-height: var(--bl-topbar-height);
}

.bl-topbar-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-left: auto;
  color: #fff;
  font-weight: 500;
}
.bl-topbar-note .bl-icon { flex: 0 0 auto; }

/* Address and opening hours. Kept off narrow widths because the 32px bar cannot
   hold them beside the delivery note without wrapping. */
.bl-topbar-fact {
  display: none;
  align-items: center;
  gap: 6px;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bl-topbar-fact .bl-icon { flex: 0 0 auto; opacity: 0.75; }

@media (min-width: 992px) {
  .bl-topbar-fact { display: inline-flex; }
}

.bl-lang {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
  margin-left: var(--bl-space-3);
}

/* 44px tall on touch widths so the switch is a real target; the topbar grows to
   match. Pointer widths keep the slim 12px bar. */
.bl-lang-link {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 10px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-decoration: none;
}
a.bl-lang-link:hover { color: var(--bl-color-accent-300); }
.bl-lang-link.is-current { background: var(--bl-color-accent); color: #fff; }

@media (min-width: 992px) {
  .bl-lang-link { min-height: 0; padding: 8px 10px; }
}

/* --------------------------------------------------------------------------
   4. Header
   -------------------------------------------------------------------------- */

.bl-header {
  position: sticky;
  top: 0;
  z-index: var(--bl-z-header);
  background: var(--bl-color-bg);
  border-bottom: var(--bl-hairline);
}

.bl-header-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  min-height: 56px;
}

.bl-header-bar > * { flex: 0 0 auto; }

.bl-logo {
  display: flex;
  align-items: center;
  gap: var(--bl-space-3);
  min-height: 44px;
  padding: 0 var(--bl-space-2);
  text-decoration: none;
  color: var(--bl-color-text);
}

.bl-logo img {
  display: block;
  max-height: 34px;
  width: auto;
}

/* The mark already reads "BAYLAN", so the wordmark only earns its space once the
   tagline fits beside it — below lg it would wrap and crowd out the search row. */
.bl-logo-lockup { display: none; }

.bl-logo-name {
  display: block;
  font-family: var(--bl-font-heading);
  font-weight: var(--bl-font-heading-weight);
  font-size: 23px;
  line-height: 1.05;
  letter-spacing: 0.02em;
}

.bl-logo-tagline {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  line-height: 1.1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bl-alpha-text-55);
}

.bl-header-spacer { flex: 1 1 auto; }

.bl-header-actions {
  display: flex;
  align-items: center;
  gap: var(--bl-space-2);
}

.bl-header-action {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--bl-space-2);
  border: 0;
  background: none;
  color: var(--bl-color-text);
  text-decoration: none;
  cursor: pointer;
}
.bl-header-action:hover { background: var(--bl-alpha-text-07); }

.bl-header-phone {
  display: none;
  align-items: center;
  gap: var(--bl-space-2);
  min-height: 44px;
  padding: 0 var(--bl-space-3);
  color: var(--bl-color-text);
}

.bl-header-phone-icon { color: var(--bl-color-accent-700); }

.bl-header-phone-body {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.bl-header-phone-main {
  font-family: var(--bl-font-heading);
  font-weight: var(--bl-font-heading-weight);
  font-size: 17px;
  line-height: 1.15;
  white-space: nowrap;
  color: inherit;
  text-decoration: none;
}

.bl-header-phone-note {
  font-size: 11px;
  color: var(--bl-alpha-text-55);
  white-space: nowrap;
}

/* Kept in the DOM but never shown: baylan-shell.js watches #cart-total as the
   canonical count the theme's AJAX cart rewrites, and mirrors it into the badge. */
.bl-cart-total {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (min-width: 992px) {
  .bl-header-bar { min-height: 72px; flex-wrap: nowrap; }
  .bl-logo img { max-height: 44px; }
  .bl-logo-lockup { display: block; }
  .bl-header-phone { display: flex; }
  .bl-header-action {
    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;
    padding: 0;
    border: var(--bl-hairline);
  }
  .bl-header-action:hover { border-color: var(--bl-color-accent); color: var(--bl-color-accent-700); background: none; }
  .bl-header-action .bl-badge { top: -7px; right: -7px; }
}

/* --------------------------------------------------------------------------
   5. Search
   Row two on mobile, inline on desktop. Plain GET form — works with JS off.
   -------------------------------------------------------------------------- */

/* Wrapping to a full-width second row is what puts the search under the logo on
   mobile; on desktop it returns to the first row between the logo and the icons. */
.bl-search {
  display: block;
  order: 10;
  flex: 1 1 100%;
}

.bl-search-wrap {
  display: flex;
  align-items: stretch;
  padding-bottom: var(--bl-space-3);
}

.bl-search-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 44px;
  padding: 0 var(--bl-space-3);
  border: var(--bl-hairline);
  border-right: 0;
  border-radius: var(--bl-radius);
  background: #fff;
  color: var(--bl-color-text);
  font-family: var(--bl-font-body);
  font-size: 15px;
  -webkit-appearance: none;
  appearance: none;
}
.bl-search-input::placeholder { color: var(--bl-alpha-text-45); }
.bl-search-input:focus { outline: none; border-color: var(--bl-color-accent); }

.bl-search-submit {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 44px;
  border: 1px solid var(--bl-color-accent);
  border-radius: var(--bl-radius);
  background: var(--bl-color-accent);
  color: #fff;
  cursor: pointer;
}
.bl-search-submit:hover { background: var(--bl-color-accent-700); border-color: var(--bl-color-accent-700); }

/* Autosuggest container — markup and states only, no backend until R1.7. */
.bl-suggest {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: var(--bl-z-sticky-bar);
  border: var(--bl-hairline);
  border-top: 0;
  background: #fff;
  box-shadow: var(--bl-shadow-md);
}
.bl-suggest[hidden] { display: none; }

.bl-suggest-state {
  padding: var(--bl-space-3) var(--bl-space-4);
  font-size: 13px;
  color: var(--bl-alpha-text-55);
}

.bl-search-field { position: relative; flex: 1 1 auto; min-width: 0; display: flex; }

@media (min-width: 992px) {
  .bl-search {
    order: 0;
    flex: 1 1 auto;
    min-width: 0;
    /* The prototype's field is ~465px of usable width and shows the whole
       instructional placeholder. The 620px cap plus .bl-header-spacer competing
       for the same free space left 117px less than that, so the placeholder was
       truncated mid-example ("«КК-12» а"). The cap goes and the spacer stands
       down at desktop; below 992px it still does its job of pushing the actions
       group onto its own row. */
    max-width: none;
    padding: 0 var(--bl-space-4);
  }
  .bl-header-spacer { display: none; }
  .bl-search-wrap { padding-bottom: 0; }
}

/* --------------------------------------------------------------------------
   6. Desktop navigation
   -------------------------------------------------------------------------- */

.bl-nav { display: none; border-top: var(--bl-hairline); }

.bl-nav-inner {
  display: flex;
  align-items: stretch;
  gap: var(--bl-space-2);
  min-height: 44px;
}

.bl-nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--bl-space-4);
  color: var(--bl-color-text);
  font-size: 14.5px;
  text-decoration: none;
  white-space: nowrap;
}
.bl-nav-link:hover { color: var(--bl-color-accent-700); }
.bl-nav-link.is-current { box-shadow: inset 0 -2px 0 var(--bl-color-accent); }

.bl-nav-accent { color: var(--bl-color-accent-700); font-weight: 500; }
.bl-nav-accent:hover { color: var(--bl-color-accent); }

.bl-nav-note {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  padding-left: var(--bl-space-3);
  color: var(--bl-alpha-text-55);
  font-size: 12.5px;
  white-space: nowrap;
}

.bl-nav-catalog {
  gap: var(--bl-space-2);
  padding: 0 var(--bl-space-4);
  border: 0;
  background: var(--bl-color-accent);
  color: #fff;
  font-family: var(--bl-font-heading);
  font-weight: var(--bl-font-heading-weight);
  font-size: 15px;
  letter-spacing: 0.02em;
  cursor: pointer;
}
.bl-nav-catalog:hover { background: var(--bl-color-accent-700); color: #fff; }
.bl-nav-caret { opacity: 0.8; }

@media (min-width: 992px) {
  .bl-nav { display: block; }
}

/* --------------------------------------------------------------------------
   7. Catalogue drawer
   -------------------------------------------------------------------------- */

.bl-drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: var(--bl-z-drawer);
  display: flex;
  flex-direction: column;
  width: 88%;
  max-width: 360px;
  background: var(--bl-color-bg);
  border-right: var(--bl-hairline);
  box-shadow: var(--bl-shadow-lg);
  transform: translateX(-100%);
  transition: transform 0.2s ease;
  padding-top: var(--bl-safe-top);
  padding-bottom: var(--bl-safe-bottom);
  padding-left: var(--bl-safe-left);
}

.bl-drawer.is-open { transform: translateX(0); }

.bl-drawer[hidden] { display: none; }

.bl-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  padding: 0 var(--bl-space-3) 0 var(--bl-space-4);
  border-bottom: var(--bl-hairline);
}

.bl-drawer-title {
  margin: 0;
  font-size: var(--bl-h5);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.bl-drawer-body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.bl-drawer-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.bl-drawer-link {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: var(--bl-space-2) var(--bl-space-4);
  border-bottom: var(--bl-hairline);
  color: var(--bl-color-text);
  font-size: 15px;
  text-decoration: none;
}
.bl-drawer-link:hover { background: var(--bl-alpha-accent-10); }
.bl-drawer-link.is-current { box-shadow: inset 3px 0 0 var(--bl-color-accent); }

.bl-drawer-foot {
  border-top: var(--bl-hairline);
  padding: var(--bl-space-3) var(--bl-space-4);
}

.bl-drawer-contact {
  display: block;
  color: var(--bl-color-text);
  font-family: var(--bl-font-heading);
  font-weight: var(--bl-font-heading-weight);
  font-size: 18px;
  text-decoration: none;
}

.bl-drawer-note {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--bl-alpha-text-55);
}

.bl-scrim-plain {
  display: block;
  padding: 0;
}

@media (prefers-reduced-motion: reduce) {
  .bl-drawer { transition: none; }
}

/* Scroll lock. Kept as a body class rather than inline JS style so the value
   is auditable in CSS and cannot drift per page. */
.bl-locked { overflow: hidden; }

/* --------------------------------------------------------------------------
   8. Footer
   -------------------------------------------------------------------------- */

/* The approved prototype puts the footer on the page background with nothing but
   a rule above it; the surface fill made it read as a second, heavier page. */
.bl-footer {
  border-top: var(--bl-hairline);
  margin-top: var(--bl-space-4);
}

.bl-footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  padding: var(--bl-space-4) 0;
}

.bl-footer-col {
  min-width: 0;
  border-bottom: var(--bl-hairline);
}
/* The copyright strip already draws a rule here. */
.bl-footer-col:last-child { border-bottom: 0; }

.bl-footer-title { margin: 0; }

/* Brand column. It has no accordion head, so it carries its own top and bottom
   rhythm instead of inheriting the head's 48px row. */
.bl-footer-brand { padding: var(--bl-space-3) 0 var(--bl-space-4); }

.bl-root a.bl-footer-mark {
  display: flex;
  align-items: center;
  gap: var(--bl-space-2);
  margin-bottom: var(--bl-space-3);
  color: var(--bl-color-text);
  text-decoration: none;
}
.bl-footer-mark img { display: block; width: auto; height: 34px; }
.bl-footer-mark-name {
  font-family: var(--bl-font-heading);
  font-weight: var(--bl-font-heading-weight);
  font-size: 18px;
  letter-spacing: var(--bl-heading-ls);
}

.bl-footer-facts { font-size: 13px; line-height: 1.7; }
/* These read as running text, not as a menu, so the links carry the block's own
   colour and only pick up the accent on hover. */
.bl-root .bl-footer-facts a { padding: 0; color: inherit; font-size: inherit; text-decoration: none; white-space: nowrap; }
.bl-root .bl-footer-facts a:hover { color: var(--bl-color-accent-700); }

.bl-root a.bl-footer-phone {
  display: inline-block;
  margin-top: var(--bl-space-2);
  padding: 0;
  color: var(--bl-color-text);
  font-family: var(--bl-font-heading);
  font-weight: var(--bl-font-heading-weight);
  font-size: 17px;
  text-decoration: none;
}
.bl-root a.bl-footer-phone:hover { color: var(--bl-color-accent-700); }

.bl-footer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 48px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--bl-color-text);
  font-family: var(--bl-font-heading);
  font-weight: var(--bl-font-heading-weight);
  font-size: var(--bl-h5);
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.bl-footer-head .bl-icon { transition: transform 0.15s ease; }
.bl-footer-col.is-open .bl-footer-head .bl-icon { transform: rotate(180deg); }

.bl-footer-panel { padding-bottom: var(--bl-space-3); }
.bl-footer-panel[hidden] { display: none; }

.bl-footer-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.bl-footer-list a,
.bl-footer-panel a {
  display: inline-block;
  padding: 6px 0;
  color: var(--bl-color-text);
  font-size: 13.5px;
  text-decoration: none;
}
.bl-footer-list a:hover,
.bl-footer-panel a:hover { color: var(--bl-color-accent); text-decoration: underline; }

.bl-copyright {
  border-top: var(--bl-hairline);
  padding: var(--bl-space-3) 0;
  font-size: 12px;
  color: var(--bl-alpha-text-55);
}
.bl-copyright .bl-container { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--bl-space-2); }
.bl-copyright p { margin: 0; }

@media (min-width: 768px) {
  .bl-footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(var(--bl-space-4) * 2);
  }
  .bl-footer-col { border-bottom: 0; }
  .bl-footer-brand { padding: 0; }
  .bl-footer-head { cursor: default; min-height: 32px; }
  .bl-footer-head .bl-icon { display: none; }
}

@media (min-width: 992px) {
  /* 1.3fr for the brand column: it carries running text, the other three carry
     single-line links. */
  .bl-footer-grid {
    grid-template-columns: 1.3fr repeat(3, minmax(0, 1fr));
    padding: calc(var(--bl-space-4) * 2) 0 var(--bl-space-4);
  }
}

/* --------------------------------------------------------------------------
   9. Mobile bottom navigation
   -------------------------------------------------------------------------- */

.bl-bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--bl-z-fixed-bar);
  display: flex;
  background: var(--bl-color-bg);
  border-top: var(--bl-hairline);
  padding-bottom: var(--bl-safe-bottom);
}

.bl-bottom-tab {
  position: relative;
  flex: 1 1 20%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  padding: 4px 2px;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--bl-alpha-text-70);
  font-family: inherit;
  font-size: 10px;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
}

.bl-bottom-tab .bl-icon { margin-bottom: 2px; }
.bl-bottom-tab.is-current { color: var(--bl-color-accent); }
.bl-bottom-tab.is-current::before {
  content: "";
  position: absolute;
  top: 0;
  left: 25%;
  right: 25%;
  height: 2px;
  background: var(--bl-color-accent);
}

.bl-bottom-tab .bl-badge {
  top: 4px;
  right: 50%;
  margin-right: -20px;
}

@media (min-width: 992px) {
  .bl-bottom-nav { display: none; }
}

/* --------------------------------------------------------------------------
   10. Responsive utilities (own, so the shell does not depend on Bootstrap)
   -------------------------------------------------------------------------- */

.bl-show-lg { display: none; }

@media (min-width: 992px) {
  .bl-hide-lg { display: none; }
  .bl-show-lg { display: flex; }
}

/* ---- Mini-cart drawer (R1.8A) ---- */

.bl-mini-cart-drawer { max-width: 26rem; }
.bl-mini-cart-error { padding: 1.5rem 0; text-align: center; }
.bl-mini-cart-error p { margin: 0 0 1rem; color: var(--bl-muted, #6b7280); }
.bl-mini-cart-body { padding: 0 1rem 1rem; }

.bl-mini-cart-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 6rem;
  color: var(--bl-muted, #6b7280);
}
.bl-mini-cart-loading svg { animation: bl-spin 1s linear infinite; }
@keyframes bl-spin { to { transform: rotate(360deg); } }

.bl-mini-cart-list {
  list-style: none;
  margin: 0;
  padding: 0.5rem 0 0;
}
.bl-mini-cart-item {
  display: grid;
  grid-template-columns: 3.5rem 1fr 1.75rem;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--bl-border, #e5e7eb);
  align-items: start;
}
.bl-mini-cart-item:last-child { border-bottom: 0; }
.bl-mini-cart-image {
  display: block;
  width: 3.5rem;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.bl-mini-cart-image img,
.bl-mini-cart-image svg {
  width: 100%;
  height: auto;
  display: block;
  color: #9ca3af;
}
.bl-mini-cart-info { min-width: 0; }
.bl-mini-cart-name {
  display: block;
  color: var(--bl-text, #111);
  font-weight: 600;
  font-size: 0.925rem;
  line-height: 1.3;
  text-decoration: none;
}
.bl-mini-cart-name:hover { text-decoration: underline; }
.bl-mini-cart-model { font-size: 0.8rem; color: var(--bl-muted, #6b7280); margin-top: 0.125rem; }
.bl-mini-cart-options { list-style: none; margin: 0.25rem 0 0; padding: 0; font-size: 0.8rem; color: var(--bl-muted, #6b7280); }
.bl-mini-cart-meta {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.375rem;
  font-size: 0.9rem;
}
.bl-mini-cart-qty { color: var(--bl-muted, #6b7280); }
.bl-mini-cart-line { font-weight: 700; color: var(--bl-text, #111); }

.bl-mini-cart-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--bl-muted, #6b7280);
  cursor: pointer;
}
.bl-mini-cart-remove:hover { color: #b91c1c; }
.bl-mini-cart-remove:disabled { opacity: 0.4; cursor: wait; }

.bl-mini-cart-voucher .bl-mini-cart-info { grid-column: 1 / -1; }

.bl-mini-cart-totals {
  margin: 0.75rem 0 0;
  padding: 0.75rem 0 0;
  border-top: 1px solid var(--bl-border, #e5e7eb);
}
.bl-mini-cart-total-row {
  display: flex;
  justify-content: space-between;
  padding: 0.25rem 0;
  font-size: 0.9rem;
}
.bl-mini-cart-total-row dt { margin: 0; color: var(--bl-muted, #6b7280); font-weight: 400; }
.bl-mini-cart-total-row dd { margin: 0; color: var(--bl-text, #111); font-weight: 600; }
.bl-mini-cart-total-row-final { font-size: 1rem; }
.bl-mini-cart-total-row-final dt,
.bl-mini-cart-total-row-final dd { font-weight: 700; }

.bl-mini-cart-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1rem;
}
.bl-mini-cart-actions .bl-btn { width: 100%; text-align: center; }

.bl-mini-cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 2rem 1rem;
  text-align: center;
}
.bl-mini-cart-empty-icon { color: var(--bl-muted, #6b7280); }
.bl-mini-cart-empty-title { margin: 0; font-weight: 700; color: var(--bl-text, #111); }
.bl-mini-cart-empty-hint { margin: 0 0 0.5rem; font-size: 0.9rem; color: var(--bl-muted, #6b7280); }

/* --------------------------------------------------------------------------
   Anchor colour restatement for the shell chrome  (R7-D, SHELL-01)

   `.bl-root a { color: var(--bl-color-accent) }` in the foundation is
   specificity (0,1,1). Every rule below already declared the right colour, but
   at (0,1,0) they all lost to it, so the logo wordmark, the navigation, the
   phone number and the language switch were painted accent blue
   (rgb(89,128,166)) where the approved prototype draws them dark.

   Same defect, and same remedy, as the button restatement at
   baylan-foundation.css:436-440 — restate for the anchor rather than weaken the
   shared default, which client-authored copy depends on.
   -------------------------------------------------------------------------- */
.bl-root a.bl-logo,
.bl-root a.bl-nav-link,
.bl-root a.bl-header-phone-main { color: var(--bl-color-text); }

/* Deliberately still accent: "Акції" is the one promoted item in the row. */
.bl-root a.bl-nav-link.bl-nav-accent { color: var(--bl-color-accent-700); }
.bl-root a.bl-nav-link.bl-nav-accent:hover { color: var(--bl-color-accent); }
.bl-root a.bl-nav-link:hover { color: var(--bl-color-accent-700); }

/* The topbar is a dark navy surface, so its links are white on it, and only the
   active language carries the filled accent chip. */
.bl-root a.bl-lang-link { color: #fff; }
.bl-root a.bl-lang-link.is-current { background: var(--bl-color-accent); color: #fff; }