/* Loaded by active MVC Razor layouts only. */
.cart-variant-row__selected-value {
  display: none;
}

@media (max-width: 767.98px) {
  :root {
    --mobile-header-height: 60px;
  }

  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  body:has(.home-header) {
    padding-top: var(--mobile-header-height);
  }

  .home-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 1000;
    background: rgba(249, 247, 244, 0.96);
  }

  img,
  video,
  iframe {
    max-width: 100%;
  }

  .home-header__inner,
  .home-header__actions {
    min-width: 0;
  }

  .home-header__actions {
    gap: 2px;
  }

  .icon-btn,
  .mobile-toggle,
  .mobile-nav__close,
  .search-panel__close {
    min-width: 44px;
    min-height: 44px;
  }

  .mobile-nav__link {
    display: flex;
    align-items: center;
    min-height: 44px;
  }

  .mobile-nav__panel,
  .search-panel__box,
  .cart-drawer__content {
    width: min(100%, 420px);
    max-width: 100vw;
  }

  .search-panel__form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .plp-sidebar {
    width: min(100%, 360px);
    max-width: calc(100vw - 24px);
    overflow-y: auto;
  }

  .filter-check {
    min-height: 44px;
    padding-block: 10px;
  }

  .plp-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pdp-grid {
    grid-template-columns: 1fr;
  }

  .pdp-actions {
    flex-direction: row;
    align-items: center;
  }

  .pdp-actions .btn-cta,
  .pdp-actions__secondary {
    min-height: 44px;
    justify-content: center;
  }

  .cart-layout,
  .payment-layout,
  .account-layout,
  .fb-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .cart-item-card__actions,
  .payment-methods {
    flex-wrap: wrap;
  }

  .cart-variant-row {
    grid-template-columns: 92px minmax(0, 1fr) 36px;
    grid-template-areas:
      "visual info remove"
      "visual info remove"
      "price quantity ."
      "total total total";
    align-items: start;
    row-gap: 10px;
  }

  .cart-variant-row__visual {
    position: relative;
    grid-area: visual;
  }

  .cart-variant-row__info {
    grid-area: info;
    min-width: 0;
  }

  .cart-variant-row__price { grid-area: price; }
  .cart-variant-row__total { grid-area: total; }

  .cart-variant-row__quantity {
    grid-area: quantity;
    justify-self: start;
  }

  .cart-variant-row__remove {
    grid-area: remove;
    justify-self: end;
    align-self: start;
    min-height: auto;
    padding: 0;
    line-height: 1.35;
    white-space: nowrap;
  }

  .option-buttons {
    grid-template-columns: 1fr;
  }

  .payment-card,
  .option-btn,
  .wallet-opt-btn {
    min-height: 44px;
  }

  .payment-sub-panel,
  .payment-instructions,
  .account-layout > *,
  .fb-layout > *,
  .fb-sidebar {
    min-width: 0;
  }

  .vat-modal__dialog {
    width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px);
    overflow: auto;
  }

  .order-items-table {
    width: 100%;
  }

  .admin-layout,
  .admin-main,
  .admin-content {
    min-width: 0;
  }

  .admin-sidebar {
    max-width: min(86vw, 320px);
  }

  .admin-topbar {
    gap: 8px;
  }

  .admin-topbar__title,
  .admin-profile__info {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .admin-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .admin-table {
    min-width: max-content;
  }

  .admin-form-grid,
  .pf-import-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .pf-import-actions {
    flex-direction: column-reverse;
  }

  .pf-import-actions .adm-btn {
    min-height: 44px;
    width: 100%;
  }

  .admin-popup-host__frame-wrap {
    width: calc(100vw - 24px) !important;
    max-height: calc(100dvh - 24px);
    overflow: auto;
  }
}

@media (max-width: 360px) {
  .plp-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .cart-variant-row {
    grid-template-columns: 92px minmax(0, 1fr) 36px;
    grid-template-areas:
      "visual info remove"
      "visual info remove"
      "price quantity ."
      "total total total";
    align-items: start;
    row-gap: 10px;
  }

  .cart-variant-row__visual {
    position: relative;
    grid-area: visual;
  }

  .cart-variant-row__info {
    grid-area: info;
    min-width: 0;
  }

  .cart-variant-row__fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    gap: 8px;
  }

  .cart-variant-row__field {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-width: 0;
  }

  .cart-variant-row__field > span:first-child {
    display: none;
  }

  .cart-variant-row__select,
  .cart-variant-row__input,
  .cart-variant-row__selected-value {
    display: none;
  }

  .cart-variant-row__trigger {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "label chevron"
      "value chevron";
    align-items: center;
    column-gap: 8px;
    width: 100%;
    min-height: 44px;
    padding: 8px 10px;
    border: 1px solid rgba(75, 31, 94, 0.14);
    border-radius: 8px;
    background: #ffffff;
    color: var(--purple-950);
    text-align: left;
  }

  .cart-variant-row__trigger-label {
    grid-area: label;
    color: rgba(75, 31, 94, 0.62);
    font-size: 0.6875rem;
    font-weight: 700;
  }

  .cart-variant-row__trigger-value {
    grid-area: value;
    overflow: hidden;
    font-size: 0.8125rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .cart-variant-row__trigger i {
    grid-area: chevron;
    color: rgba(75, 31, 94, 0.45);
    font-size: 0.7rem;
  }

  .cart-variant-row__quantity {
    grid-area: quantity;
    justify-self: start;
  }

  .cart-variant-row__remove {
    position: static;
    top: auto;
    right: auto;
    grid-area: remove;
    align-self: start;
    justify-self: end;
    width: 32px;
    height: 32px;
    min-height: 32px;
    padding: 0;
    line-height: 1.35;
  }

  .cart-variant-row {
    padding-right: 12px;
  }

  .cart-product-variants__name + .cart-variant-row .cart-variant-row__remove {
    top: auto;
    right: auto;
  }
}

@media (max-width: 480px) {
  :root {
    --mobile-header-height: 54px;
  }
}

/* Cart item layout: preserve the desktop information hierarchy on mobile. */
@media (max-width: 767.98px) {
  .cart-variant-row {
    grid-template-columns: 92px minmax(0, 1fr) 36px;
    grid-template-areas:
      "visual info remove"
      "visual info remove"
      "price quantity ."
      "total total total";
    align-items: start;
    gap: 10px 8px;
    padding: 14px 12px;
  }

  .cart-variant-row + .cart-variant-row {
    margin-top: 10px;
    padding-top: 18px;
  }

  .cart-variant-row__visual { justify-self: start; position: relative; }
  .cart-variant-row__checkbox-wrap {
    top: 6px;
    left: 6px;
  }
  .cart-variant-row__image { width: 92px; height: 92px; }
  .cart-product-variants__name { padding: 12px 12px 4px; font-size: 0.9375rem; }
  .cart-variant-row__fields { grid-template-columns: repeat(auto-fit, minmax(86px, 1fr)); gap: 6px; overflow: visible; padding-bottom: 0; }
  .cart-variant-row__field { flex: initial; grid-template-columns: minmax(0, 1fr); gap: 4px; }

  .cart-variant-row__price,
  .cart-variant-row__total {
    align-self: stretch;
    padding: 8px 10px;
  }

  .cart-variant-row__price {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    min-height: 0;
    padding-right: 8px;
  }
  .cart-variant-row__price .cart-variant-row__label { margin-bottom: 2px; white-space: nowrap; }
  .cart-variant-row__total .cart-variant-row__subtotal { font-size: 1rem; font-weight: 800; }
  .cart-variant-row__quantity { grid-area: quantity; justify-self: end; align-self: end; z-index: 1; }
  .cart-variant-row__quantity .cart-variant-row__label { display: none; }
  .cart-variant-row__qty { height: 32px; }
  .cart-variant-row__qty .qty-control__btn { width: 32px; height: 32px; }
  .cart-variant-row__qty .qty-control__val { min-width: 32px; }
  .cart-variant-row__remove {
    position: static;
    top: auto;
    right: auto;
    left: auto;
    grid-area: remove;
    justify-self: end;
    align-self: start;
    width: 32px;
    height: 32px;
    min-height: 32px;
    padding: 0;
    z-index: 2;
  }
}

@media (max-width: 390px) {
  .cart-variant-row {
    grid-template-columns: 86px minmax(0, 1fr) 32px;
    grid-template-areas:
      "visual info remove"
      "visual info remove"
      "price quantity ."
      "total total total";
    gap: 10px 8px;
    padding: 12px 10px;
  }

  .cart-variant-row__image { width: 86px; height: 86px; }
  .cart-variant-row__fields { grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 6px; }
  .cart-variant-row__field { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}