/* Design system 2027 bridge: maps the legacy storefront onto motivs-tokens.css and
   motivs-ui.css while templates migrate. Loaded last. Shrinks with every stage;
   new components belong in motivs-ui.css, not here. */

/* Legacy palettes read the design tokens, so untouched blocks follow the new colours. */
:root {
  --mcat-text: var(--ink);
  --mcat-muted: var(--ink-muted);
  --mcat-line: var(--line);
  --mcat-control: var(--control-border);
  --mcat-orange: var(--action);
  --mcat-orange-dark: var(--action-hover);
  --mcat-green: var(--stock-in);
  --mcat-teal: var(--brand);
  --mcat-blue: var(--brand);
  --mcat-blue-soft: var(--brand-soft);
  --mcat-radius: var(--radius-sm);
}

.mv-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.mv-btn:hover { text-decoration: none; }

/* Top bar links keep their small look but get a full 44px target. */
.header-nav { padding: 0; }
.header-nav .container > .d-flex { align-items: center; }
.header-nav .icon-link { display: inline-flex; align-items: center; gap: 6px; min-height: var(--size-touch); margin-right: var(--space-2); padding: 0 var(--space-2); }
.header-nav .icon-link:first-child { margin-left: calc(var(--space-2) * -1); }
.header-nav .preferences-trigger { min-height: var(--size-touch); }

/* Search and cart buttons in the header are navigation, not the buy action. */
.header_search .btn-info,
#headerWrapper .btn-info { border-color: var(--brand); background: var(--brand); color: var(--ink-inverse); }
.header_search .btn-info:hover,
#headerWrapper .btn-info:hover { border-color: var(--brand-hover); background: var(--brand-hover); }
.cart_count { background: var(--action); color: var(--on-action); }

/* Catalogue card inside the existing Bootstrap columns of .mcat-grid. */
.mcat-grid .mv-card { flex: 1 1 auto; width: 100%; }
/* Every row sits at the same height on every card: the photo cannot stretch its
   box, and the brand and stock rows keep their space even when short or empty. */
.mv-card .mv-card__media { --mv-media-pad: var(--space-3); overflow: hidden; }
.mv-card .mv-card__media img { position: absolute; top: var(--mv-media-pad); left: var(--mv-media-pad); width: calc(100% - var(--mv-media-pad) * 2); height: calc(100% - var(--mv-media-pad) * 2); max-width: none; }
.mv-card__brand { min-height: 16px; }
.mv-card__stock { min-height: 38px; }
@container mvcard (min-width: 220px) {
  .mv-card .mv-card__media { --mv-media-pad: var(--space-4); }
  .mv-card__stock { min-height: 22px; }
}
@container mvcard (min-width: 260px) { .mv-card .mv-card__media { height: 240px; aspect-ratio: auto; } }
.mcat-grid .mv-card__name { padding: 0; font-family: inherit; }
.mv-card.is-out .mv-card__media { opacity: .55; }
.mv-card .mv-price { min-width: 0; }
.mv-card__badges .mv-badge--sale { margin-left: auto; }
.mv-card__badges-group { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.mv-card__buy .spinner-border { flex: 0 0 auto; }

/* Category tiles: the height follows the name, so long names are never cut.
   Scoped to the grid because search results restyle the same markup as a list. */
.mv-cat-grid > .mv-cat-col { display: flex; }
.mv-cat-grid .mv-cat { display: flex; flex-direction: column; width: 100%; height: auto; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-raised); transition: border-color var(--duration-fast), box-shadow var(--duration-fast); }
.mv-cat-grid .mv-cat:hover { border-color: var(--control-border); box-shadow: var(--shadow-sm); }
.mv-cat-grid .mv-cat > a { display: flex; flex: 1 1 auto; flex-direction: column; height: auto; color: var(--ink); }
.mv-cat-grid .mv-cat > a:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; border-radius: var(--radius-md); }
.mv-cat-grid .cat_image { height: auto; aspect-ratio: 4 / 3; padding: var(--space-3); }
.mv-cat-grid .cat_image img { display: block; width: 100%; height: 100%; max-width: 100%; margin: 0; object-fit: contain; }
.mv-cat-grid .mv-cat__label { flex: 1 1 auto; padding: 0 var(--space-3) var(--space-3); text-align: center; }
.mv-cat-grid .categorynamelinks { color: var(--ink); font-size: 14px; line-height: 20px; font-weight: 600; overflow-wrap: anywhere; hyphens: auto; }
.mv-cat-grid .mv-cat:hover .categorynamelinks { color: var(--brand); }
.mv-cat-grid .brand_list .cat_image { height: auto; }
@media (min-width: 768px) {
  .mv-cat-grid .cat_image { height: 180px; aspect-ratio: auto; }
  .mv-cat-grid .categorynamelinks { font-size: 15px; line-height: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .mv-cat-grid .mv-cat { transition: none; }
}

/* Add-to-cart confirmation: .mv-modal on the existing .modal open/close mechanism.
   Bottom sheet on phones (thumb reach), centred dialog from 768px. */
.mv-sheet__dialog {
  position: absolute; right: 0; bottom: 0; left: 0;
  transform: translateY(100%);
  transition: transform var(--duration-base);
}
.mv-sheet.show .mv-sheet__dialog { transform: none; }
.mv-sheet #price_to_cart { color: var(--price); font-size: 18px; }
.mv-sheet .mv-atc__img { flex: 0 0 auto; }
.mv-atc__qty { white-space: nowrap; }
.mv-atc__cart-label { display: flex; flex-direction: column; min-width: 0; }
.mv-atc__cart-note { font-size: 12px; line-height: 16px; color: var(--ink-muted); }
@media (min-width: 768px) {
  .mv-sheet__dialog {
    top: 50%; right: auto; bottom: auto; left: 50%;
    width: calc(100% - var(--space-12));
    max-width: 560px;
    transform: translate(-50%, -46%);
  }
  .mv-sheet.show .mv-sheet__dialog { transform: translate(-50%, -50%); }
  .mv-modal__foot { flex-direction: row-reverse; }
}
@media (prefers-reduced-motion: reduce) {
  .mv-sheet__dialog { transition: none; }
}

/* Category menu: the drawer slides in over the page, the mega panel hangs under
   the category bar. Both sit above .menu-backdrop (z-index 1040). */
#mv-menu {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 1050;
  height: auto; visibility: hidden; transform: translateX(-105%);
  transition: transform var(--duration-base), visibility var(--duration-base);
}
#mv-menu.is-open { visibility: visible; transform: none; transition-duration: var(--duration-base), 0s; }
#mv-menu .mv-menu__head a { display: block; }
#mv-menu .mv-menu__item { text-decoration: none; }
#mv-menu .mv-menu__item--leaf { min-height: 48px; padding: var(--space-2) var(--space-3); }
#mv-menu .mv-menu__foot, #mv-menu .mv-menu__help { padding-bottom: var(--space-2); }
#mv-menu .mv-menu__foot { padding-bottom: var(--space-6); }
#mv-menu .mv-menu__help { margin-top: var(--space-4); }
#mv-menu .mv-menu__pref { width: 100%; font-size: 14px; text-align: left; }
#mv-menu .mv-menu__legal ul { columns: 1; }
#mv-menu .mv-h2 { color: var(--ink); }
#mv-menu .mv-menu__view:focus { outline: 0; }
span.mv-menu__thumb { display: block; }
body.mv-menu-open { overflow: hidden; }
.mv-topnav { position: relative; }
body.mv-mega-open .mv-topnav { z-index: 1045; }
.mv-mega-wrap { position: absolute; top: 100%; right: 0; left: 0; }
.mv-mega-wrap[hidden] { display: none !important; }
.mv-mega { grid-template-rows: minmax(0, 1fr); max-height: calc(100vh - 212px); overflow: hidden; }
.mv-mega__cats, .mv-mega__main { min-height: 0; }
.mv-mega__cats .mv-menu__item { text-decoration: none; }
.mv-mega__title { color: var(--ink); }
.mv-mega__foot .mv-chip:hover { text-decoration: none; }
.mv-mega__group > a:hover, .mv-mega__all:hover { text-decoration: none; }
@media (max-width: 1199.98px) {
  .mv-mega__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  #mv-menu { transition: none; }
}

/* Mobile header: menu and logo on the left, language, account and cart on the
   right, search below. Contacts live in the menu. */
.mv-topnav__icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: var(--size-touch); height: var(--size-touch); color: var(--ink); }
.mv-topnav__icon:hover { color: var(--brand); }
.mv-topnav__icon svg { width: 24px; height: 24px; }
.mv-topnav__lang { padding: 0; border: 0; background: none; }
.mv-topnav__lang img, .mv-topnav__lang .delivery-info__flag { flex: 0 0 26px; width: 26px; height: 18px; border-radius: 3px; box-shadow: 0 0 0 1px var(--line); object-fit: cover; }
.mv-promo.announcement { padding: 10px var(--space-4); }
@media (max-width: 767.98px) {
  .mv-topnav { border-bottom-color: var(--line) !important; }
  .mv-topnav > .container { padding: var(--space-2) var(--space-2) var(--space-3) !important; }
  .mv-topnav > .container > .row { align-items: center; margin: 0; }
  .mv-topnav__menu { flex: 0 0 var(--size-touch); max-width: none; padding: 0; }
  .mv-topnav__actions { flex: 0 0 auto; width: auto; max-width: none; padding: 0; }
  .mv-topnav__menu .menu-trigger-button { width: var(--size-touch); height: var(--size-touch); padding: 0; }
  .mv-topnav__logo { flex: 1 1 0; min-width: 0; max-width: none; padding: var(--space-1) 0 var(--space-1) var(--space-3); }
  .mv-topnav__logo a { min-width: 0; }
  .mv-topnav__logo img { width: auto; height: 42px; max-width: 100%; object-fit: contain; object-position: left center; }
  .mv-topnav__actions .cart_count { top: 0; right: 0; }
  .mv-topnav .header_search { margin-top: var(--space-2) !important; padding: 0 var(--space-2); }
  .mv-topnav .header_search .form-control { height: var(--size-control); font-size: 16px; }
  .mv-topnav .header_search .btn-info { min-width: var(--size-control); }
}