/* Mobile wishlist refinement: retain the existing sheet, scroller, data and
   actions. Reopen the compact layers rather than fighting their !important
   declarations with an unlayered override. Desktop is intentionally unchanged. */
@layer rtf-wishlist-compact {
  @media (max-width: 900px) {
    html body #wishlistPanel .wishlist-list-manager .rtf-choice-button {
      border-color: var(--line) !important;
      background: var(--surface) !important;
      box-shadow: none !important;
      text-align: left !important;
      border-radius: 10px !important;
    }
    html body #wishlistPanel .rtf-wishlist-tools > summary {
      min-height: 44px !important;
      padding-inline: 4px !important;
      font-size: .8125rem !important;
      font-weight: 500 !important;
      line-height: 1.5 !important;
    }
    html body #wishlistPanel .wishlist-item-details {
      min-width: 0 !important;
    }
    html body #wishlistPanel .wishlist-item-name {
      overflow-wrap: anywhere !important;
      text-decoration-thickness: 1px;
      text-underline-offset: 3px;
    }
    html body #wishlistPanel .wishlist-item-remove {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      width: 44px !important;
      height: 44px !important;
      min-width: 44px !important;
      min-height: 44px !important;
      padding: 0 !important;
      border: 1px solid transparent !important;
      border-radius: 10px !important;
      background: transparent !important;
      box-shadow: none !important;
      color: var(--ink-muted) !important;
    }
    html body #wishlistPanel .wishlist-item-remove:hover {
      color: var(--ink) !important;
      background: var(--surface-sunken) !important;
      border-color: var(--line) !important;
    }
    html body #wishlistPanel .wl-price-line {
      flex-wrap: wrap !important;
      gap: 2px 6px !important;
      align-items: baseline !important;
    }
    html body #wishlistPanel .wl-price-line .price-placeholder {
      font-style: normal !important;
      color: var(--ink-muted) !important;
      line-height: 1.5 !important;
      overflow-wrap: anywhere !important;
    }
    html body #wishlistPanel .wl-qty-measure {
      font-variant-numeric: tabular-nums;
    }
    html body #wishlistPanel .wl-qty-button:not(:disabled):hover {
      background: var(--brand-wash) !important;
      color: var(--ink) !important;
    }
    html body #wishlistPanel .wl-add-btn {
      white-space: normal !important;
      overflow-wrap: anywhere !important;
    }
    html body #wishlistPanel :is(.wishlist-item-remove, .wl-add-btn):focus-visible {
      outline: 2px solid var(--brand-strong) !important;
      outline-offset: -3px !important;
    }
    html body #wishlistPanel .wishlist-item-status:not(:empty) {
      padding-block-start: 2px !important;
      line-height: 1.5 !important;
      overflow-wrap: anywhere !important;
    }
  }
  @media (max-width: 600px) {
    html body #wishlistPanel .wishlist-drawer-items {
      padding-top: 0 !important;
    }
    html body #wishlistPanel .wl-item {
      padding-block: 6px 10px !important;
      margin-bottom: 6px !important;
    }
    html body #wishlistPanel .wl-qty-button:first-child {
      border-inline-end: 1px solid var(--line) !important;
      border-start-end-radius: 0 !important;
      border-end-end-radius: 0 !important;
    }
    html body #wishlistPanel .wl-qty-button:last-child {
      border-inline-start: 1px solid var(--line) !important;
      border-start-start-radius: 0 !important;
      border-end-start-radius: 0 !important;
    }
  }
}
@layer rtf-variants {
  @media (max-width: 900px) {
    html body #wishlistPanel .rtf-variant-field .rtf-choice-arrow {
      background: transparent !important;
      border-color: transparent !important;
      box-shadow: none !important;
      color: var(--ink-muted) !important;
    }
    html body #wishlistPanel .rtf-variant-field .rtf-choice-button {
      border-radius: 10px !important;
      box-shadow: none !important;
    }
  }
  @media (max-width: 600px) {
    html body #wishlistPanel .rtf-variant-field {
      grid-template-columns: 4.75em minmax(0, 1fr) !important;
      column-gap: 8px !important;
    }
    /* Preserve the existing enlarged-text/narrow-container stacked fallback. */
    @container rtf-wishlist-fields (max-width: 14em) {
      html body #wishlistPanel .rtf-variant-field {
        grid-template-columns: minmax(0, 1fr) !important;
      }
    }
  }
}