/* ============================================================================
   BASKET / CART STYLES
   ============================================================================ */

/* Page Header */
.page-header {
  background: var(--color-white);
  padding: var(--space-lg) 0;
  border-bottom: var(--border-width) solid var(--color-gray-200);
}

.page-header__title {
  font-size: clamp(2rem, 4vw, 2.75rem);
  color: var(--color-charcoal);
}

.page-header__subtitle {
  color: var(--color-gray-600);
  margin-top: var(--space-xs);
}

/* Cart Section */
.cart {
  padding: var(--space-xl) 0;
}

.cart__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
  gap: var(--space-xl);
  align-items: start;
}

/* Cart Items */
.cart-items {
  min-width: 0;
  background: var(--color-white);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.cart-items__header {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr auto;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--color-cream);
  font-size: 0.85rem;
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-600);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-xs);
}

.cart-item {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr auto;
  gap: var(--space-md);
  padding: var(--space-md);
  align-items: center;
  border-bottom: var(--border-width) solid var(--color-gray-200);
}

.cart-item:last-child {
  border-bottom: none;
}

.cart-item__product {
  min-width: 0;
  display: flex;
  gap: var(--space-md);
  align-items: center;
}

.cart-item__image {
  width: 100px;
  height: 100px;
  background: var(--color-cream);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.cart-item__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cart-item__image svg {
  width: 40px;
  height: 40px;
  color: var(--color-dusty-rose);
  opacity: var(--opacity-icon-soft);
}

.cart-item__details {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cart-item__category {
  font-size: 0.75rem;
  font-weight: var(--font-weight-medium);
  color: var(--color-dusty-rose);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-sm);
}

.cart-item__title {
  overflow-wrap: anywhere;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: var(--font-weight-medium);
  color: var(--color-charcoal);
}

.cart-item__variant {
  font-size: 0.85rem;
  color: var(--color-gray-600);
}

.cart-item__price {
  font-weight: var(--font-weight-medium);
  color: var(--color-charcoal);
}

.cart-item__total {
  font-weight: var(--font-weight-semibold);
  color: var(--color-charcoal);
}

.cart-item__mobile-label {
  display: none;
  color: var(--color-gray-600);
  font-size: 0.75rem;
  font-weight: var(--font-weight-normal);
}

/* Quantity Control */
.quantity {
  display: flex;
  align-items: center;
  background: var(--color-cream);
  border-radius: var(--radius-md);
  width: fit-content;
}

.quantity-form {
  display: flex;
  align-items: center;
}

.quantity__btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-charcoal);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: var(--transition-fast);
  border-radius: var(--radius-md);
}

.quantity__btn:hover {
  background: var(--color-cream-dark);
}

.quantity__btn:disabled {
  opacity: var(--opacity-disabled-strong);
  cursor: not-allowed;
}

.quantity__input {
  width: 40px;
  height: 36px;
  border: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 0.9rem;
  text-align: center;
  color: var(--color-charcoal);
  -moz-appearance: textfield;
}

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

.quantity__input:focus {
  outline: none;
}

/* Remove Button */
.cart-item__remove-form {
  display: flex;
}

.cart-item__remove {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-600);
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: var(--transition-fast);
}

.cart-item__remove:hover {
  background: var(--color-cream);
  color: var(--color-terracotta);
}

/* Cart Summary */
.cart-summary {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  padding: var(--space-lg);
  position: sticky;
  top: 100px;
}

.cart-summary__title {
  font-size: 1.5rem;
  color: var(--color-charcoal);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-md);
  border-bottom: var(--border-width) solid var(--color-gray-200);
}

.summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-xs) 0;
}

.summary-row__label {
  color: var(--color-gray-600);
}

.summary-row__value {
  font-weight: var(--font-weight-medium);
  color: var(--color-charcoal);
}

.summary-row--savings .summary-row__value {
  color: var(--color-success);
}

.summary-row--hint {
  padding: var(--space-sm) 0;
}

.summary-row--hint .summary-row__label {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 0.85rem;
  color: var(--color-dusty-rose);
}

.summary-row--total {
  padding-top: var(--space-md);
  margin-top: var(--space-md);
  border-top: var(--border-width) solid var(--color-gray-200);
}

.summary-row--total .summary-row__label {
  font-weight: var(--font-weight-semibold);
  color: var(--color-charcoal);
  font-size: 1.1rem;
}

.summary-row--total .summary-row__value {
  font-family: var(--font-display);
  font-size: 1.75rem;
  color: var(--color-charcoal);
}

.free-shipping {
  color: var(--color-success);
  font-weight: var(--font-weight-medium);
}

/* Promo Code */
.cart-summary__promo {
  margin: var(--space-md) 0;
}

.promo-input {
  display: flex;
  gap: var(--space-xs);
}

.promo-input__field {
  flex: 1;
  padding: 12px 16px;
  border: var(--border-width) solid var(--color-gray-200);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 0.9rem;
  background: var(--color-white);
  color: var(--color-charcoal);
}

.promo-input__field:focus {
  outline: none;
  border-color: var(--color-dusty-rose);
}

.promo-input__btn {
  padding: 12px 20px;
  background: var(--color-cream);
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: var(--font-weight-medium);
  color: var(--color-charcoal);
  cursor: pointer;
  transition: var(--transition-fast);
}

.promo-input__btn:hover {
  background: var(--color-cream-dark);
}

.promo-input__btn:disabled {
  opacity: var(--opacity-disabled-strong);
  cursor: not-allowed;
}

.promo-applied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--color-cream);
  border-radius: var(--radius-md);
}

.promo-applied__code {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-success);
}

.promo-remove-form {
  display: flex;
}

.promo-applied__remove {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-600);
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: var(--transition-fast);
}

.promo-applied__remove:hover {
  background: var(--color-cream-dark);
  color: var(--color-terracotta);
}

.promo-message {
  margin-top: var(--space-sm);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
}

.promo-message--success {
  background: rgba(107, 142, 107, 0.1);
  color: var(--color-success);
}

.promo-message--error {
  background: rgba(193, 114, 91, 0.1);
  color: var(--color-terracotta);
}

/* Secure Checkout Note */
.cart-summary__secure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  margin-top: var(--space-md);
  font-size: 0.85rem;
  color: var(--color-gray-600);
}

.cart-summary__secure svg {
  color: var(--color-success);
}

/* Empty Cart */
.cart-empty {
  text-align: center;
  padding: var(--space-xl);
  background: var(--color-white);
  border-radius: var(--radius-xl);
  max-width: 480px;
  margin: 0 auto;
}

.cart-empty__icon {
  width: 80px;
  height: 80px;
  margin: 0 auto var(--space-md);
  color: var(--color-dusty-rose);
  opacity: var(--opacity-icon-soft);
}

.cart-empty__title {
  font-size: 1.5rem;
  color: var(--color-charcoal);
  margin-bottom: var(--space-xs);
}

.cart-empty__text {
  color: var(--color-gray-600);
  margin-bottom: var(--space-lg);
}

.cart-empty .btn {
  width: auto;
  display: inline-flex;
}

/* Loading State */
.cart-item--loading {
  opacity: var(--opacity-disabled-strong);
  pointer-events: none;
}

.cart-summary--loading {
  opacity: var(--opacity-disabled-strong);
  pointer-events: none;
}

/* Responsive */
@media (max-width: 1024px) {
  .cart__grid {
    grid-template-columns: 1fr;
  }

  .cart-summary {
    position: static;
  }
}

@media (max-width: 768px) {
  .cart-items__header {
    display: none;
  }

  .cart-item {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-sm);
    position: relative;
  }

  .cart-item__product {
    grid-column: 1 / -1;
    width: 100%;
  }

  .cart-item__image {
    width: 80px;
    height: 80px;
  }

  .cart-item__price,
  .cart-item__total {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .cart-item__mobile-label {
    display: inline;
  }

  .quantity {
    grid-column: 1;
    grid-row: 3;
  }

  .cart-item__total {
    grid-column: 2;
    grid-row: 3;
    text-align: right;
  }

  .cart-item__price {
    grid-column: 1 / -1;
    padding-top: var(--space-sm);
    border-top: var(--border-width) solid var(--color-gray-200);
  }

  .cart-item__remove-form {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
  }

  .cart-summary {
    min-width: 0;
    padding: var(--space-md);
  }

  .promo-input {
    flex-wrap: wrap;
  }

  .promo-input__field {
    min-width: 0;
  }
}

/* Checkout */
.checkout,
.checkout-confirmation {
  padding: var(--space-xl) 0;
}

.checkout__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
  gap: var(--space-xl);
  align-items: start;
}

.checkout__form,
.checkout-fields {
  display: grid;
  gap: var(--space-md);
  min-width: 0;
}

.checkout-card,
.checkout-confirmation__card {
  margin: 0 0 var(--space-md);
  padding: var(--space-lg);
  border: 0;
  border-radius: var(--radius-xl);
  background: var(--color-white);
}

.checkout-card legend {
  width: 100%;
  margin-bottom: var(--space-md);
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--color-charcoal);
}

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

.checkout-fields__wide {
  grid-column: 1 / -1;
}

.checkout-card .form-group {
  display: grid;
  gap: 6px;
  min-width: 0;
}

/* Radios are excluded for the same reason checkboxes already are: they are
   controls to be sat beside a label, not text fields to be stretched. */
.checkout-card input:not([type="checkbox"]):not([type="radio"]),
.checkout-card select,
.checkout-card textarea {
  width: 100%;
  min-width: 0;
  padding: 12px 14px;
  border: var(--border-width) solid var(--color-gray-200);
  border-radius: var(--radius-md);
  background: var(--color-white);
  color: var(--color-charcoal);
  font: inherit;
}

.checkout-card input:focus,
.checkout-card select:focus,
.checkout-card textarea:focus {
  outline: 2px solid var(--color-dusty-rose);
  outline-offset: 2px;
}

.checkout-card [data-valmsg-for],
.validation-summary {
  color: var(--color-terracotta);
  font-size: 0.875rem;
}

.validation-summary:empty {
  display: none;
}

.checkout-payment {
  margin-bottom: var(--space-md);
  padding: var(--space-md);
  border: 2px solid var(--color-dusty-rose);
  border-radius: var(--radius-lg);
  background: var(--color-cream);
}

.checkout-payment p {
  margin: 4px 0 0;
  color: var(--color-gray-600);
}

/*
 * Shipping rate rows reuse .checkout-payment for the card treatment, but that
 * class was written for the single block-level payment <div>. Applied to the
 * rate <label>s it leaves them inline, so their padding and border are painted
 * without affecting layout: with more than one shipping rate the rows overlap
 * each other and spill out of the fieldset. The list needs real layout.
 */
.checkout-shipping-rates {
  display: grid;
  gap: var(--space-sm);
}

.checkout-shipping-rates .checkout-payment {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: 0;
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.checkout-shipping-rates .checkout-payment > input[type="radio"] {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--color-terracotta);
  cursor: pointer;
}

.checkout-shipping-rates .checkout-payment > span {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.checkout-shipping-rates .checkout-payment > strong:last-child {
  flex: 0 0 auto;
  white-space: nowrap;
}

.checkout-shipping-rates .checkout-payment small {
  color: var(--color-gray-600);
  font-size: 0.85em;
}

.checkout-shipping-rates .checkout-payment:hover {
  border-color: var(--color-terracotta);
}

/* Progressive enhancement: without :has() the rows still lay out correctly,
   they simply lose the emphasis on the selected rate. */
.checkout-shipping-rates .checkout-payment:has(input:checked) {
  border-color: var(--color-terracotta);
  background: var(--color-white);
}

.checkout-shipping-rates .checkout-payment:focus-within {
  border-color: var(--color-terracotta);
  outline: 2px solid var(--color-terracotta);
  outline-offset: 2px;
}

.checkout-terms {
  display: flex;
  gap: var(--space-xs);
  align-items: flex-start;
  margin-top: var(--space-md);
}

.checkout-terms input {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

.checkout-items,
.confirmation-items ul {
  display: grid;
  gap: var(--space-sm);
  margin: 0 0 var(--space-md);
  padding: 0 0 var(--space-md);
  border-bottom: var(--border-width) solid var(--color-gray-200);
  list-style: none;
}

.checkout-items li,
.confirmation-items li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
}

.checkout-items small,
.confirmation-items small {
  display: block;
  color: var(--color-gray-600);
}

.checkout__submit {
  width: 100%;
  margin-top: var(--space-md);
}

.checkout-unavailable,
.cart-summary__unavailable {
  padding: var(--space-md);
  border: var(--border-width) solid var(--color-terracotta);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-terracotta) 10%, var(--color-white));
  color: var(--color-charcoal);
}

.checkout-unavailable {
  margin-bottom: var(--space-md);
}

.checkout-unavailable p,
.cart-summary__unavailable {
  margin: 0;
}

.checkout-unavailable strong + p {
  margin-top: var(--space-xs);
}

.checkout-card:disabled {
  opacity: 0.65;
}

.checkout__submit:disabled,
#checkoutBtn:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.checkout__notice {
  margin: var(--space-sm) 0 0;
  color: var(--color-gray-600);
  font-size: 0.8rem;
  text-align: center;
}

.checkout-confirmation__card {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.checkout-confirmation__icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto var(--space-md);
  border-radius: 50%;
  background: var(--color-success);
  color: var(--color-white);
  font-size: 2rem;
}

.checkout-confirmation__eyebrow {
  color: var(--color-success);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-sm);
}

.bank-transfer,
.confirmation-items {
  margin: var(--space-lg) 0;
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  background: var(--color-cream);
  text-align: left;
}

.bank-transfer dl {
  margin: var(--space-md) 0;
}

.bank-transfer dl div {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: var(--space-sm);
  padding: var(--space-xs) 0;
  border-bottom: var(--border-width) solid var(--color-gray-200);
}

.bank-transfer dt {
  color: var(--color-gray-600);
}

.bank-transfer dd {
  margin: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 1024px) {
  .checkout__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .checkout__summary {
    position: static;
  }
}

@media (max-width: 600px) {
  .checkout,
  .checkout-confirmation {
    padding: var(--space-lg) 0;
  }

  .checkout-card,
  .checkout-confirmation__card,
  .bank-transfer,
  .confirmation-items {
    padding: var(--space-md);
  }

  .checkout-fields--two {
    grid-template-columns: minmax(0, 1fr);
  }

  .checkout-fields__wide {
    grid-column: auto;
  }

  .bank-transfer dl div {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
}