/*
 * Order overview page (Family/Orders.html, section orderPage).
 * Replaces CON-1277 legacy (Bootstrap px/hex). Glass-card layout per Figma
 * Desktop 3652:30797 / Tablet 3764:96430 / Mobile 3668:58144.
 * All sizes in rem/% or Design Tokens, no px, no !important.
 */
/*Returns a CSS clamp function which resolves to $size-at-min-width when page width is
below $min-width,
$size-at-max-width when page width is above $max-width,
and linearly scales between the two between $min-width and $max-width*/
@layer organisms {
  body:has(.orders__layout:not(.hidden)) .frame-type-conproducts_pi1 {
    display: none;
  }
  .orders__layout {
    --orders-family-img-size: 8.75rem;
    --orders-ecosystem-img-size: 8.75rem;
    display: grid;
    gap: var(--gap-xxl);
  }
  @media (min-width: 992px) {
    .orders__layout {
      grid-template-columns: 15fr 7fr;
      gap: var(--gap-xxl);
      align-items: start;
    }
  }
  .orders__main {
    display: flex;
    flex-direction: column;
    gap: var(--gap-m);
  }
  .orders__title {
    text-align: left;
  }
  .orders__actions {
    margin-top: var(--gap-m);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-m);
  }
  @media (min-width: 640px) {
    .orders__actions {
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
    }
  }
  .orders__empty-text-wrapper {
    margin-bottom: var(--gap-l);
  }
  .overview-side, .orderItem {
    border: var(--border-default-width, 2px) solid var(--surface-border, #f5f5f5);
    border-radius: var(--border-radius-default);
    background: var(--glass-grey);
    backdrop-filter: blur(30px);
    box-shadow: 0 0 20px rgba(162, 162, 165, 0.08);
    padding: var(--padding-m);
  }
  @media (min-width: 640px) {
    .overview-side, .orderItem {
      padding: var(--padding-l);
    }
  }
  .checkoutSummery {
    display: flex;
    flex-direction: column;
    gap: var(--gap-m);
  }
  .checkoutSummery .orderItem__grid {
    display: flex;
    flex-direction: column;
  }
  .checkoutSummery .orderItem__accessories,
  .checkoutSummery .orderItem__category {
    display: block;
  }
  .checkoutSummery .orderItem__category + .orderItem__category {
    margin-top: 2rem;
  }
  .checkoutSummery .orderItem__image {
    margin-bottom: var(--gap-xxl);
  }
  .orderItem__grid {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 0;
  }
  @media (min-width: 640px) {
    .orderItem__grid {
      grid-template-columns: var(--orders-family-img-size, 9.375rem) 1fr;
      column-gap: var(--gap-xxl);
      row-gap: 0;
    }
  }
  .orderItem__image {
    margin-bottom: 2rem;
  }
  @media (min-width: 640px) {
    .orderItem__image {
      margin-bottom: 0;
    }
  }
  .orderItem__image img {
    display: block;
    max-width: var(--orders-family-img-size, 9.375rem);
    height: auto;
  }
  .orderItem__description {
    margin-top: 0;
    margin-bottom: 2rem;
  }
  .orderItem__variants {
    margin-bottom: var(--gap-l);
  }
  @media (min-width: 640px) {
    .orderItem__accessories-title {
      grid-column: 2;
      margin-bottom: 0;
    }
  }
  .orderItem__accessories {
    padding-top: var(--gap-l);
    border-top: var(--border-default-width) solid var(--shade-grey-100);
  }
  @media (min-width: 640px) {
    .orderItem__accessories {
      grid-column: 1/-1;
      display: grid;
      grid-template-columns: subgrid;
      row-gap: var(--gap-l);
      align-items: start;
    }
  }
  .orderItem__category {
    display: flex;
    flex-direction: column;
    row-gap: var(--gap-m);
  }
  @media (min-width: 640px) {
    .orderItem__category {
      grid-column: 1/-1;
      display: grid;
      grid-template-columns: subgrid;
      align-items: start;
      margin-bottom: 0;
    }
  }
  .orderItem__category + .orderItem__category {
    margin-top: 2rem;
  }
  @media (min-width: 640px) {
    .orderItem__category + .orderItem__category {
      margin-top: 0;
    }
  }
  .orderItem__category-image {
    flex-shrink: 0;
  }
  @media (min-width: 640px) {
    .orderItem__category-image {
      justify-self: center;
    }
  }
  .orderItem__category-image img {
    display: block;
    width: var(--orders-ecosystem-img-size, 6.25rem);
    height: auto;
  }
  .orderItem__category-content {
    flex: 1 1 0;
    min-width: 0;
  }
  .orderItem__category-title {
    font-weight: var(--font-weight-bold);
    margin: 0 0 var(--gap-s);
    color: var(--body-text-color);
  }
  .orderItem__add-more {
    margin-top: var(--gap-l);
  }
  @media (min-width: 640px) {
    .orderItem__add-more {
      grid-column: 2;
    }
  }
  ul.orders-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  ul.orders-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gap-s);
    text-indent: 0;
    margin: 0 0 var(--gap-s);
    padding: 0;
  }
  @media (min-width: 640px) {
    ul.orders-list li {
      flex-wrap: nowrap;
    }
  }
  ul.orders-list li::before {
    content: normal;
  }
  ul.orders-list li .orders__title {
    flex: 1 1 100%;
  }
  @media (min-width: 640px) {
    ul.orders-list li .orders__title {
      flex: 1 1 auto;
    }
  }
  ul.orders-list li .orders__input-group {
    margin-left: auto;
  }
  .orders__input-group {
    display: flex;
    align-items: center;
    gap: var(--gap-s);
  }
  .orders__input-group input[type=number] {
    width: 6.25rem;
    height: 3rem;
    border: var(--border-default-width) solid var(--color-primary-orange);
    border-radius: var(--border-radius-button);
    text-align: center;
    padding: 0 var(--padding-xs);
    font-family: inherit;
    font-size: var(--font-size-default);
    color: var(--body-text-color);
    background: var(--shade-white);
  }
  .orders__input-group input[type=number]:focus-visible {
    outline: var(--border-default-width) solid var(--color-primary-orange);
    outline-offset: var(--border-default-width);
  }
  .orders__delete {
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: none;
    margin: 0;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--shade-grey-500);
    flex-shrink: 0;
    transition: color var(--motion-base) var(--motion-ease);
  }
  .orders__delete .icon-trash-2 {
    font-size: 1.5rem;
    line-height: 1;
  }
  .orders__delete:hover {
    color: var(--color-primary-orange);
  }
  @media (min-width: 992px) {
    .orders__sidebar {
      align-self: start;
      position: sticky;
      top: calc(var(--sticky-header-height) + var(--gap-l));
    }
  }
  .overview-side {
    display: flex;
    flex-direction: column;
    gap: var(--gap-m);
  }
  .overview-side .product-title {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--gap-s);
    width: 100%;
  }
  .overview-side .product-title span,
  .overview-side .overview-side__quantity {
    white-space: nowrap;
  }
  .overview-side .orders_variant,
  .overview-side .orders_accessory {
    display: flex;
    justify-content: space-between;
    gap: var(--gap-m);
    margin-bottom: var(--gap-xs);
  }
  .overview-side .orders__variant,
  .overview-side .orders__accessory {
    display: flex;
    justify-content: space-between;
    width: 100%;
  }
  .overview-side .orders__variant span,
  .overview-side .orders__accessory span {
    white-space: nowrap;
  }
  .overview-side__divider {
    margin: 0;
    border: none;
    border-top: var(--border-default-width) solid var(--shade-grey-100);
  }
  .overview-side__total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--gap-s);
  }
  .overview-side__total strong {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-default);
  }
  .overview-side__total p {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-default);
    margin: 0;
    white-space: nowrap;
  }
  .overview-side .to-cart-btn,
  .overview-side .side-basket__close {
    align-self: flex-start;
  }
}