/* Cart drawer (CartWidget island), opened from the header on every storefront page.
   The side sheet itself is BaseDialog placement="end". Hand-written, native nesting only.
   All text >= 14px, contrast >= 4.5:1 with the storefront tokens; steppers and remove are 44px targets.
*/

@layer components {
  .cart-drawer__close {
    position: absolute;
    top: var(--space-2);
    inset-inline-end: var(--space-2);
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    color: var(--color-text);
    background: none;
    border: 0;
    border-radius: var(--radius-sm);
    cursor: pointer;

    &:hover {
      background: var(--color-surface-muted);
    }
  }

  .cart-drawer {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .cart-drawer__notices {
    list-style: none;
    margin: 0;
    padding: var(--space-3) var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    color: var(--color-text);
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
  }

  .cart-drawer__error {
    margin: 0;
    padding: var(--space-3) var(--space-4);
    color: var(--color-error-text);
    background: var(--color-error-bg);
    border: 1px solid var(--color-error-border);
    border-radius: var(--radius-sm);
  }

  .cart-drawer__empty {
    margin: 0;
  }

  .cart-drawer__continue {
    align-self: flex-start;
    min-height: 2.75rem;
    padding: var(--space-2) var(--space-4);
    font: inherit;
    font-weight: 500;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    cursor: pointer;

    &:hover {
      background: var(--color-surface-muted);
    }
  }

  .cart-drawer__lines {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--color-border);
  }

  .cart-drawer-line {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr);
    gap: var(--space-3);
    padding-block: var(--space-4);
    border-bottom: 1px solid var(--color-border);
  }

  .cart-drawer-line__image {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--radius-sm);
  }

  .cart-drawer-line__body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  .cart-drawer-line__name {
    margin: 0;
    font-size: var(--text-md);
    font-weight: 600;
    overflow-wrap: anywhere;
  }

  .cart-drawer-line__link {
    color: var(--color-text);

    &:hover {
      color: var(--color-primary-hover);
    }
  }

  .cart-drawer-line__attributes {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
  }

  .cart-drawer-line__attribute {
    display: flex;
    gap: var(--space-1);

    & dd {
      margin: 0;
    }
  }

  .cart-drawer-line__voucher {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    overflow-wrap: anywhere;
  }

  .cart-drawer-line__options {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    overflow-wrap: anywhere;
  }

  .cart-drawer-line__price,
  .cart-drawer-line__total {
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
  }

  .cart-drawer-line__total {
    font-weight: 600;
  }

  .cart-drawer-line__label {
    font-size: var(--text-sm);
    font-weight: 400;
  }

  .cart-drawer-line__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-4);
  }

  .cart-drawer-line__state {
    margin: 0;
    font-weight: 600;
    color: var(--color-error-text);
  }

  .cart-drawer-line__remove {
    min-height: 2.75rem;
    padding: 0 var(--space-2);
    font-weight: 500;
    color: var(--color-text);
    background: none;
    border: 0;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;

    &:hover {
      color: var(--color-primary-hover);
    }

    &:disabled {
      cursor: not-allowed;
    }
  }

  .cart-drawer-line__pending {
    margin: 0;
    font-size: var(--text-sm);
  }

  .quantity-input {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
  }

  .quantity-input__step {
    display: grid;
    place-items: center;
    width: 2.75rem;
    min-height: 2.75rem;
    padding: 0;
    color: var(--color-text);
    background: var(--color-surface);
    border: 0;
    border-radius: var(--radius-md);
    cursor: pointer;

    &:hover:not(:disabled) {
      background: var(--color-surface-muted);
    }

    &:disabled {
      color: var(--color-text-muted);
      cursor: not-allowed;
    }
  }

  .quantity-input__field {
    width: 3.5rem;
    min-height: 2.75rem;
    padding: 0 var(--space-1);
    text-align: center;
    border: 0;
    border-inline: 1px solid var(--color-border);
    border-radius: 0;
    appearance: textfield;

    &::-webkit-inner-spin-button,
    &::-webkit-outer-spin-button {
      appearance: none;
      margin: 0;
    }
  }

  .cart-drawer__totals {
    margin: 0;
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    font-size: var(--text-lg);
    font-weight: 600;

    & dd {
      margin: 0;
    }
  }

  /* The last line's bottom border already separates the coupon panel from the lines. */
  .cart-drawer .payment-codes {
    border-top: 0;
    padding-top: 0;
  }

  /* Applied coupons under the subtotal; the panel itself is coupon-panel.css, shared with the cart page. */
  .cart-drawer__coupons {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }

  .cart-drawer__coupon {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    overflow-wrap: anywhere;
  }

  .cart-drawer__discount {
    white-space: nowrap;
  }

  .cart-drawer__note {
    margin: 0;
    color: var(--color-text-muted);
  }

  .cart-drawer__free-shipping {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  .cart-drawer__free-shipping-text {
    margin: 0;
  }

  /* Track: --color-border-strong on white is 4.8:1, so the bar's edge stays visible (>= 3:1). */
  .cart-drawer__progress {
    display: block;
    width: 100%;
    height: 0.5rem;
    appearance: none;
    color: var(--color-primary);
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    overflow: hidden;

    &::-webkit-progress-bar {
      background: var(--color-surface-muted);
    }

    &::-webkit-progress-value {
      background: var(--color-primary);
    }

    &::-moz-progress-bar {
      background: var(--color-primary);
    }
  }

  .cart-drawer__view {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: var(--space-2) var(--space-4);
    font-weight: 600;
    color: var(--color-on-primary);
    text-decoration: none;
    background: var(--color-primary);
    border-radius: var(--radius-md);

    &:hover {
      color: var(--color-on-primary);
      background: var(--color-primary-hover);
    }
  }
}

@layer components {
  .cart-drawer__checkout {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: var(--space-2) var(--space-5);
    font: inherit;
    font-weight: 600;
    color: var(--color-on-primary);
    background: var(--color-primary);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-md);
    text-decoration: none;
  }

  .cart-drawer__checkout:disabled {
    color: var(--color-text-muted);
    background: var(--color-surface-muted);
    border-color: var(--color-border);
    cursor: not-allowed;
  }

  /* Promotion hints in the drawer (SHOP-RULES 10.9): one line per hint, above the coupon panel. */
  .cart-drawer__hints {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  .cart-drawer__hint {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-4);
    overflow-wrap: anywhere;
  }

  .cart-drawer__hint-add {
    min-height: 2.75rem;
    padding: var(--space-2) var(--space-4);
    font-weight: 500;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
  }

  .cart-drawer__hint-choose {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    font-weight: 500;
    color: var(--color-text);
    text-decoration: underline;
    text-underline-offset: 2px;
  }
}

/* Noria look of the drawer (D-018). The side sheet is the core's BaseDialog; it reads --color-surface for its ground. */
@layer components {
  body.storefront .base-dialog {
    --color-surface: var(--noria-sand);
    --color-border: var(--noria-ink);
  }

  body.storefront .base-dialog--end .base-dialog__title {
    font-size: var(--noria-text-benefit);
    font-weight: 700;
    letter-spacing: var(--noria-track-heading);
    text-transform: uppercase;

    &::before { content: "(" / ""; }
    &::after { content: ")" / ""; }
  }

  .cart-drawer__close:hover { background: var(--noria-sand-light); }

  .cart-drawer-line__image,
  .cart-drawer-line__placeholder { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }

  .cart-drawer-line__name { font-size: var(--noria-text-small); font-weight: 700; letter-spacing: 0.05em; }
  .cart-drawer-line__link { text-decoration: none; &:hover { text-decoration: underline; } }

  .quantity-input { border-color: var(--noria-ink); border-radius: 0; }
  .quantity-input__step { background: transparent; border-radius: 0; &:hover:not(:disabled) { color: var(--noria-sand); background: var(--noria-ink); } }
  body.storefront .quantity-input__field { min-height: 0; padding: 0; text-align: center; border-bottom: 0; border-inline: 1px solid var(--noria-ink); }

  .cart-drawer__notices { background: var(--noria-sand-light); border: 0; border-inline-start: 0.25rem solid var(--noria-green); }
  .cart-drawer__error { background: var(--noria-sand-light); border: 0; border-inline-start: 0.25rem solid var(--color-error-text); }

  body.storefront .cart-drawer__view {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    font: inherit;
    font-size: var(--noria-text-small);
    color: var(--noria-ink);
    background: none;
    border: 0;
    border-radius: 0;
    text-decoration: underline;
    text-underline-offset: 0.1875rem;

    &:hover { color: var(--noria-gold-text); background: none; }
  }

  /* .noria-block-button carries the look; the rules above only size it for the sheet. */
  .cart-drawer__checkout {
    min-height: 3.5rem;
    font-family: var(--font-display);
    font-size: var(--noria-text-button);
    font-weight: 500;
    border: 0;
    border-radius: 0;
  }

  .cart-drawer__checkout:disabled { color: var(--noria-ink-muted); background: var(--noria-sand-deep); }
}