/* Final stabilization layer: product cards, filters, cart, mobile header */

:root {
  --at-brand-dark: #0f172a;
  --at-brand-accent: #f9a825;
  --at-brand-text: #111827;
}

/* Header buttons/icons: white on dark, no orange fill */
.header__search-btn,
.header__acc-btn,
.header__cart-btn,
.header__mobile .header__search-btn,
.header__mobile .header__acc-btn,
.header__mobile .header__cart-btn {
  color: #ffffff !important;
}
.header__search-btn .icon-search,
.header__acc-btn .icon-acc,
.header__cart-btn .icon-cart,
.header__mobile .icon-search,
.header__mobile .icon-acc,
.header__mobile .icon-cart,
.header__mobile .icon-nav-catalog,
.header__search-btn .icon-search use,
.header__acc-btn .icon-acc use,
.header__cart-btn .icon-cart use,
.header__mobile .icon-search use,
.header__mobile .icon-acc use,
.header__mobile .icon-cart use,
.header__mobile .icon-nav-catalog use {
  fill: #ffffff !important;
  color: #ffffff !important;
}

/* Hide tiny cart counter on narrow mobile to avoid overlap */
@media (max-width: 767px) {
  .header__cart-counter.js-cart-total,
  .header__sticky-counter.js-cart-total {
    display: none !important;
  }
}

/* Catalog filters: stable layout for large amount of options */
.catalog .catalog__wrapper {
  align-items: flex-start !important;
}
.catalog .catalog__sidebar {
  position: sticky !important;
  top: 16px !important;
  max-height: calc(100vh - 32px) !important;
  overflow: auto !important;
}
.catalog .catalog__sidebar .filter-options,
.catalog .catalog__sidebar .filter-options--brands {
  max-height: 240px !important;
  overflow: auto !important;
}
.catalog .catalog__sidebar .filter-option {
  align-items: flex-start !important;
  gap: 8px !important;
}
.catalog .catalog__sidebar .filter-option span {
  white-space: normal !important;
  word-break: break-word !important;
  line-height: 1.25 !important;
}

/* Category cards: remove hover jumps and keep CTA visible */
.catalog .products .products__item,
.catalog .products .products__item-in,
.catalog .products .products__item * {
  transition: none !important;
  animation: none !important;
}
.catalog .products .products__item,
.catalog .products .products__item:hover,
.catalog .products .products__item:focus,
.catalog .products .products__item:active,
.catalog .products .products__item-in,
.catalog .products .products__item-in:hover,
.catalog .products .products__item-in:active {
  transform: none !important;
  box-shadow: none !important;
}
.catalog .products .products__item-in {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100% !important;
  padding: 16px !important;
}
.catalog .products .products__item-title {
  font-size: 1.55rem !important;
  line-height: 1.28 !important;
  min-height: 3.9em !important;
}
.catalog .products .products__item-action {
  position: static !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  margin-top: auto !important;
  padding-top: 10px !important;
}
.catalog .products .ui-add-to-cart .ui-btn--primary {
  width: 100% !important;
}
.catalog .products .products__item-price--inquiry {
  color: #b45309 !important;
  font-weight: 700 !important;
}

/* Home featured arrows removed; fallback scroll remains */
.home-featured-controls {
  display: none !important;
}

/* Cart page: robust row layout (desktop + mobile) */
.cart .cart__content .cart__list > li > .cart__item {
  display: grid !important;
  grid-template-columns: 88px minmax(220px, 1fr) 150px 160px 32px !important;
  gap: 12px !important;
  align-items: center !important;
}
.cart .cart__item-image {
  width: 88px !important;
  height: 88px !important;
}
.cart .cart__item-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}
.cart .cart__item-title {
  font-size: 1.55rem !important;
  line-height: 1.3 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
.cart .cart__item-price-piece {
  display: none !important;
}
.cart .cart__item-number .ui-number {
  min-width: 120px !important;
}
.cart .cart__item-number .ui-number__input,
.cart .ui-number__input {
  width: 42px !important;
}

@media (max-width: 991px) {
  .catalog .catalog__sidebar {
    position: static !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .cart .cart__content .cart__list > li > .cart__item {
    grid-template-columns: 72px minmax(0, 1fr) !important;
    grid-template-areas:
      'img desc'
      'qty qty'
      'price price'
      'action action' !important;
    align-items: start !important;
    gap: 10px !important;
  }

  .cart .cart__item-image {
    grid-area: img !important;
    width: 72px !important;
    height: 72px !important;
  }

  .cart .cart__item-desc {
    grid-area: desc !important;
    min-width: 0 !important;
  }

  .cart .cart__item-title {
    font-size: 1.45rem !important;
    line-height: 1.25 !important;
    -webkit-line-clamp: 4 !important;
  }

  .cart .cart__item-number {
    grid-area: qty !important;
  }

  .cart .cart__item-price {
    grid-area: price !important;
    text-align: left !important;
  }

  .cart .cart__item-action {
    grid-area: action !important;
    justify-self: end !important;
  }
}

/* Keep button text visible for custom request button */
.ui-btn.ui-btn--60.ui-btn--primary.ui-btn--fullwidth {
  color: #ffffff !important;
  font-weight: 700 !important;
}

/* Product page: review toggle text must be visible */
.details__comments-form-btn.js-toggle-btn {
  color: var(--at-brand-text) !important;
  background: #f3f4f6 !important;
}
/* 2026-02-24: ui-number stabilization (cart only) */
.is-route-checkout-cart .cart .cart__item-number,
.cart .cart__item-number {
  position: relative !important;
  min-width: 0 !important;
}

.is-route-checkout-cart .cart .cart__item-number .ui-number,
.cart .cart__item-number .ui-number {
  position: relative !important;
  display: block !important;
  margin: 0 !important;
  width: 108px !important;
  min-width: 108px !important;
  max-width: 108px !important;
}

.is-route-checkout-cart .cart .cart__item-number .ui-number__input,
.cart .cart__item-number .ui-number__input {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 40px !important;
  padding: 0 32px !important;
  text-align: center !important;
  line-height: 40px !important;
  box-sizing: border-box !important;
}

.is-route-checkout-cart .cart .cart__item-number .ui-number__decrease,
.is-route-checkout-cart .cart .cart__item-number .ui-number__increase,
.cart .cart__item-number .ui-number__decrease,
.cart .cart__item-number .ui-number__increase {
  width: 28px !important;
  top: 4px !important;
  bottom: 4px !important;
}

.is-route-checkout-cart .cart .cart__item-number .ui-number__decrease,
.cart .cart__item-number .ui-number__decrease {
  left: 4px !important;
}

.is-route-checkout-cart .cart .cart__item-number .ui-number__increase,
.cart .cart__item-number .ui-number__increase {
  right: 4px !important;
}

@media (max-width: 991px) {
  .is-route-checkout-cart .cart .cart__item-number .ui-number,
  .cart .cart__item-number .ui-number {
    width: 132px !important;
    min-width: 132px !important;
    max-width: 132px !important;
  }
}

@media (max-width: 767px) {
  .is-route-checkout-cart .cart .cart__item-number,
  .cart .cart__item-number {
    width: 100% !important;
    justify-self: stretch !important;
  }

  .is-route-checkout-cart .cart .cart__item-number .ui-number,
  .cart .cart__item-number .ui-number {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 180px !important;
  }
}

/* ===== MOBILE SEARCH OFFCANVAS REWORK 2026-03-01 ===== */
@media (max-width: 767px) {
  /* hide technical empty offcanvas near icon button */
  .header__group .header__search > .header__search-offcanvas:empty {
    display: none !important;
  }

  /* style the real mobile search panel */
  .header__mobile > .header__search > .header__search-offcanvas {
    position: fixed !important;
    top: 56px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: calc(58px + env(safe-area-inset-bottom)) !important;
    z-index: 3001 !important;
    background: #f5f7fb !important;
    color: #111827 !important;
    border-top: 1px solid #e5e7eb !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.16) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important;
  }

  .header__mobile > .header__search > .header__search-offcanvas .header__search-head {
    min-height: 48px !important;
    padding: 10px 12px 8px 44px !important;
    border-bottom: 1px solid #e5e7eb !important;
    background: #ffffff !important;
  }

  .header__mobile > .header__search > .header__search-offcanvas .header__search-close {
    width: 40px !important;
    padding: 0 10px !important;
    color: #111827 !important;
  }

  .header__mobile > .header__search > .header__search-offcanvas .header__search-title {
    font-size: 16px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    color: #111827 !important;
  }

  .header__mobile > .header__search > .header__search-offcanvas .header__search-body {
    padding: 10px 12px 12px !important;
  }

  .header__mobile > .header__search > .header__search-offcanvas .header__search-control {
    margin: 0 !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 10px !important;
    background: #ffffff !important;
  }

  .header__mobile > .header__search > .header__search-offcanvas .header__search-input,
  .header__mobile > .header__search > .header__search-offcanvas input[name=search] {
    height: 42px !important;
    min-height: 42px !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    background: transparent !important;
    padding: 10px 44px 10px 12px !important;
    border: 0 !important;
  }

  .header__mobile > .header__search > .header__search-offcanvas .header__search-input::placeholder,
  .header__mobile > .header__search > .header__search-offcanvas input[name=search]::placeholder {
    color: #9ca3af !important;
    -webkit-text-fill-color: #9ca3af !important;
  }

  .header__mobile > .header__search > .header__search-offcanvas .header__search-append {
    width: 42px !important;
    color: #1f2937 !important;
  }

  .header__mobile > .header__search > .header__search-offcanvas .header__search-autocomplete {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    border-top: 0 !important;
    margin-top: 10px !important;
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 10px !important;
    max-height: calc(100dvh - 240px) !important;
    overflow: auto !important;
  }
}
/* ===== /MOBILE SEARCH OFFCANVAS REWORK 2026-03-01 ===== */

/* ===== MOBILE SEARCH OFFCANVAS REWORK 2026-03-01 ===== */
@media (max-width: 767px) {
  .header__group .header__search > .header__search-offcanvas:empty {
    display: none !important;
  }

  .header__mobile > .header__search > .header__search-offcanvas {
    position: fixed !important;
    top: 56px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: calc(58px + env(safe-area-inset-bottom)) !important;
    z-index: 3001 !important;
    background: #f5f7fb !important;
    color: #111827 !important;
    border-top: 1px solid #e5e7eb !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.16) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important;
  }

  .header__mobile > .header__search > .header__search-offcanvas .header__search-head {
    min-height: 48px !important;
    padding: 10px 12px 8px 44px !important;
    border-bottom: 1px solid #e5e7eb !important;
    background: #ffffff !important;
  }

  .header__mobile > .header__search > .header__search-offcanvas .header__search-close {
    width: 40px !important;
    padding: 0 10px !important;
    color: #111827 !important;
  }

  .header__mobile > .header__search > .header__search-offcanvas .header__search-title {
    font-size: 16px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    color: #111827 !important;
  }

  .header__mobile > .header__search > .header__search-offcanvas .header__search-body {
    padding: 10px 12px 12px !important;
  }

  .header__mobile > .header__search > .header__search-offcanvas .header__search-control {
    margin: 0 !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 10px !important;
    background: #ffffff !important;
  }

  .header__mobile > .header__search > .header__search-offcanvas .header__search-input,
  .header__mobile > .header__search > .header__search-offcanvas input[name=search] {
    height: 42px !important;
    min-height: 42px !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    background: transparent !important;
    padding: 10px 44px 10px 12px !important;
    border: 0 !important;
  }

  .header__mobile > .header__search > .header__search-offcanvas .header__search-input::placeholder,
  .header__mobile > .header__search > .header__search-offcanvas input[name=search]::placeholder {
    color: #9ca3af !important;
    -webkit-text-fill-color: #9ca3af !important;
  }

  .header__mobile > .header__search > .header__search-offcanvas .header__search-append {
    width: 42px !important;
    color: #1f2937 !important;
  }

  .header__mobile > .header__search > .header__search-offcanvas .header__search-autocomplete {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    border-top: 0 !important;
    margin-top: 10px !important;
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 10px !important;
    max-height: calc(100dvh - 240px) !important;
    overflow: auto !important;
  }
}
/* ===== /MOBILE SEARCH OFFCANVAS REWORK 2026-03-01 ===== */

/* ===== MOBILE HEADER CONTAINER ALIGN FIX 2026-03-01 ===== */
@media (max-width: 767px) {
  .header,
  .header__mobile-fixed {
    min-height: 56px !important;
  }

  .header > .container-fluid,
  .header__mobile-fixed > .container-fluid,
  .header .container-fluid {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
  }

  .header__mobile {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    column-gap: 8px !important;
    height: 56px !important;
    min-height: 56px !important;
    padding: 0 !important;
    margin: 0 !important;
    position: relative !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  .header__mobile > * {
    min-width: 0 !important;
  }

  .header__mobile .header__nav {
    position: static !important;
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
  }

  .header__mobile .header__nav-btn {
    position: static !important;
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
  }

  .header__mobile .header__logo {
    flex: 1 1 auto !important;
    margin: 0 !important;
    height: auto !important;
    min-width: 0 !important;
    justify-content: flex-start !important;
    overflow: hidden !important;
  }

  .header__mobile .header__logo--wordmark .brand-wordmark {
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .header__mobile .header__group {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  .header__mobile .header__group > * {
    margin: 0 !important;
  }

  .header__mobile .header__search,
  .header__mobile .header__acc,
  .header__mobile .header__cart {
    flex: 0 0 auto !important;
  }

  .header__mobile .header__search-btn,
  .header__mobile .header__acc-btn,
  .header__mobile .header__cart-btn {
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
  }
}
/* ===== /MOBILE HEADER CONTAINER ALIGN FIX 2026-03-01 ===== */