/* ==========================================================================
   WEAR WING — Maison design layer · Purchase path
   Scopes: .cart-page (cart), .ww-checkout (checkout), .purchase-message
   (success / offline-success). Loaded after luxe.css; visual only — no
   selector used by cart.js / user-checkout.js is renamed or repurposed.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · Cart — editorial order table
   -------------------------------------------------------------------------- */
.cart-page .item-list.border {
  border-color: var(--ww-hairline) !important;
  border-radius: 0 !important;
  background: #fff;
}

.cart-page .shopping-table .table-heading {
  background: transparent;
}

.cart-page .shopping-table .table-heading th {
  font-family: var(--font-family-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-gray-2);
  padding: 20px 14px;
  border-bottom: 1px solid var(--ww-hairline);
}

.cart-page.shopping-area tbody tr:not(:first-child) {
  border-top-color: var(--ww-hairline) !important;
}

.cart-page .shopping-table tbody td {
  padding: 26px 14px;
}

.cart-page .shopping-table tbody tr.item {
  transition: background 0.35s var(--ww-ease);
}

.cart-page .shopping-table tbody tr.item:hover {
  background: rgba(246, 243, 238, 0.55);
}

/* Ivory image mat */
.cart-page .shopping-table .product-img .image {
  border-color: var(--ww-hairline);
  background: var(--ww-ivory);
  border-radius: 0 !important;
}

.cart-page .shopping-table .product-img .image .lazy-container {
  border-radius: 0 !important;
}

/* Let the table breathe instead of forcing horizontal overflow */
.cart-page .shopping-table .product-desc {
  width: auto;
}

.cart-page .shopping-table .product-desc .product-desc-wrapper {
  width: auto;
  max-width: 560px;
}

.cart-page .shopping-table .product-desc .product-title,
.cart-page .shopping-table .product-desc .product-title a {
  font-family: var(--font-family-base);
  font-size: 17px;
  letter-spacing: 0.02em;
  color: var(--ww-ink);
}

.cart-page .shopping-table .product-desc .product-title a:hover {
  color: var(--color-primary);
}

.cart-page .shopping-table .product-desc p {
  font-size: 13px;
  color: var(--color-gray-2);
  line-height: 1.6;
}

.cart-page .shopping-table .product-desc p strong {
  font-weight: 600;
  color: var(--color-gray-2);
}

.cart-page .shopping-table .variation-table .small,
.cart-page .shopping-table .variation-table td {
  font-size: 12px;
  color: var(--color-gray-2);
}

.cart-page .shopping-table .ratings-total {
  font-size: 12px;
  color: var(--color-gray-1);
}

/* Quantity stepper — squared hairline, ink on hover */
.cart-page .shopping-table tbody .quantity-input {
  width: 128px;
  border: 1px solid var(--ww-hairline);
  border-radius: 2px;
  background: #fff;
}

.cart-page .shopping-table tbody .quantity-input input {
  width: 44px;
  height: 40px;
  border: 0;
  background: transparent;
  font-family: var(--font-family-body);
  font-weight: 600;
  font-size: 14px;
  color: var(--ww-ink);
}

.cart-page .shopping-table tbody .quantity-input .quantity-btn {
  width: 41px;
  height: 40px;
  line-height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 12px;
  color: var(--color-gray-2);
  transition: background 0.3s var(--ww-ease), color 0.3s var(--ww-ease);
}

.cart-page .shopping-table tbody .quantity-input .quantity-btn:hover {
  border: 0;
  background: var(--ww-ink);
  color: #fff;
}

/* Line total */
.cart-page .shopping-table td.price h5 {
  font-family: var(--font-family-body);
  font-weight: 600;
  font-size: 15px;
  color: var(--ww-ink);
  white-space: nowrap;
}

/* Quiet remove */
.cart-page .shopping-table .btn-remove {
  width: 34px;
  height: 34px;
  line-height: 32px;
  text-align: center;
  border: 1px solid transparent;
  border-radius: 2px;
  font-size: 12px;
  color: var(--color-gray-1);
  transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}

.cart-page .shopping-table .btn-remove:hover {
  color: var(--ww-ink);
  border-color: var(--ww-hairline);
  background: var(--ww-ivory);
}

/* Receipt summary — paper card, ink total */
.cart-page .ww-cart-receipt {
  max-width: 400px;
  margin: 28px 0 0 auto;
  border: 1px solid var(--ww-hairline);
  background: #fff;
  padding: 6px 24px;
}

.cart-page .ww-receipt-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 16px 0;
}

.cart-page .ww-receipt-row + .ww-receipt-row {
  border-top: 1px solid var(--ww-hairline);
}

.cart-page .ww-receipt-label {
  font-family: var(--font-family-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-gray-2);
}

.cart-page .ww-receipt-label small {
  display: block;
  margin-top: 4px;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--color-gray-1);
}

.cart-page .ww-receipt-value {
  font-family: var(--font-family-body);
  font-weight: 600;
  font-size: 14px;
  color: var(--ww-ink);
}

.cart-page .ww-receipt-grand .ww-receipt-value {
  font-family: var(--font-family-base);
  font-weight: 400;
  font-size: 26px;
  line-height: 1;
}

/* Checkout CTA — full width of the receipt column */
.cart-page .ww-cart-actions {
  max-width: 400px;
  margin-inline-start: auto;
  margin-top: 14px;
}

.cart-page .ww-cart-actions .btn {
  display: block;
  width: 100%;
  border-radius: 2px !important;
  padding: 17px 24px;
}

/* Empty cart — recolor the illustration into the maison palette */
.cart-page .empty-cart-cls svg {
  max-width: 210px;
  height: auto;
  opacity: 0.9;
}

.cart-page .empty-cart-cls svg path[fill='#4F60F9'] {
  fill: var(--ww-ivory);
}

.cart-page .empty-cart-cls svg path[fill='#4F60F9'][stroke],
.cart-page .empty-cart-cls svg path[stroke='#DBDDEF'] {
  stroke: var(--ww-hairline);
}

.cart-page .empty-cart-cls svg path[fill='#DBDDEF'] {
  fill: var(--ww-hairline);
}

.cart-page .empty-cart-cls h3 {
  margin-top: 26px;
  font-size: 26px;
  color: var(--ww-ink);
}

.cart-page .empty-cart-cls h3 strong {
  font-weight: 400;
}

.cart-page .empty-cart-cls h4 {
  font-family: var(--font-family-body);
  font-size: 14px;
  color: var(--color-gray-2);
  margin-top: 8px;
}

.cart-page .card {
  border-color: var(--ww-hairline);
  background: transparent;
}

.cart-page .card .card-body.cart {
  padding: clamp(40px, 7vw, 90px) 20px;
}

/* Cart · mobile — stack rows into editorial cards (no sideways scroll) */
@media (max-width: 767px) {
  .cart-page .shopping-table,
  .cart-page .shopping-table tbody {
    display: block;
    width: 100%;
  }

  .cart-page .shopping-table thead {
    display: none;
  }

  .cart-page .shopping-table tbody tr.item {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    grid-template-areas:
      'img desc'
      'img qty'
      'img price';
    column-gap: 16px;
    row-gap: 12px;
    position: relative;
    padding: 20px 16px;
  }

  .cart-page .shopping-table tbody tr.item td {
    display: block;
    width: auto;
    padding: 0;
  }

  .cart-page .shopping-table td.product-img {
    grid-area: img;
  }

  .cart-page .shopping-table .product-img .image {
    width: 92px;
    height: 92px;
  }

  .cart-page .shopping-table td.product-desc {
    grid-area: desc;
    padding-inline-end: 46px;
  }

  .cart-page .shopping-table .product-desc .product-title,
  .cart-page .shopping-table .product-desc .product-title a {
    font-size: 15px;
  }

  .cart-page .shopping-table td.qty {
    grid-area: qty;
  }

  .cart-page .shopping-table td.price {
    grid-area: price;
  }

  .cart-page .shopping-table td.remove {
    position: absolute;
    top: 14px;
    inset-inline-end: 8px;
  }

  .cart-page .ww-cart-receipt,
  .cart-page .ww-cart-actions {
    max-width: none;
  }
}

/* --------------------------------------------------------------------------
   2 · Checkout — calm two-column form
   -------------------------------------------------------------------------- */

/* Caps micro-legends over each group */
.ww-checkout .billing-details > h3,
.ww-checkout .ship-details #collapseAddress > h3,
.ww-checkout .order-summery > h3.title,
.ww-checkout .order-summery .shop-title-box h3,
.ww-checkout .order-summary > h3,
.ww-checkout .order-payment > h3 {
  font-family: var(--font-family-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ww-ink);
}

.ww-checkout .billing-details > h3,
.ww-checkout .ship-details #collapseAddress > h3 {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--ww-hairline);
  margin-bottom: 30px;
}

.ww-checkout .billing-details {
  margin-bottom: 44px;
}

/* Fields — quiet hairline boxes with room to breathe */
.ww-checkout .form-group {
  margin-bottom: 22px !important;
}

.ww-checkout .form-group label {
  margin-bottom: 8px;
}

.ww-checkout .form-control {
  height: 48px;
  font-size: 14px;
}

.ww-checkout textarea.form-control {
  height: auto;
  min-height: 110px;
  line-height: 1.7;
  padding-top: 12px;
}

.ww-checkout ::placeholder {
  color: var(--color-gray-1);
  opacity: 0.75;
}

/* Right rail — paper cards, hairlines only */
.ww-checkout .order-summery.border,
.ww-checkout .order-summary.border,
.ww-checkout .order-payment.border {
  border-color: var(--ww-hairline) !important;
  border-radius: 0 !important;
  background: #fff;
}

.ww-checkout .order-summery > h3.title {
  background: #fff;
  border-bottom: 1px solid var(--ww-hairline);
}

.ww-checkout .order-summery .order-summery-list-item .product-item {
  border-top-color: var(--ww-hairline);
  padding: 18px 20px;
}

.ww-checkout .order-summery .order-summery-list-item:first-child .product-item {
  border-top: 0;
}

.ww-checkout .order-summery .product-item .product-img .image {
  border-color: var(--ww-hairline);
  background: var(--ww-ivory);
}

.ww-checkout .order-summery .product-item .product-img .product-qty {
  border-radius: 0;
  background: var(--ww-ink);
  font-size: 11px;
  right: -7px;
  top: -7px;
}

.ww-checkout .order-summery .order-summery-list-item .product-item .product-title,
.ww-checkout .order-summery .order-summery-list-item .product-item .product-title a {
  font-family: var(--font-family-base);
  font-size: 15px;
  letter-spacing: 0.02em;
  color: var(--ww-ink);
}

.ww-checkout .order-summery .product-item .product-price {
  font-size: 13px;
  color: var(--color-gray-2);
}

.ww-checkout .order-summery .product-item .product-price .text-dark {
  font-weight: 500;
}

.ww-checkout .order-summery .show-variation {
  font-size: 12px;
  color: var(--color-gray-2);
  text-underline-offset: 4px;
}

.ww-checkout .order-summery .show-variation:hover {
  color: var(--ww-ink);
}

.ww-checkout .order-summery .variation-area,
.ww-checkout .order-summery .variation-area .variation-item {
  font-size: 12px;
  color: var(--color-gray-2);
}

.ww-checkout .order-summery .variation-area h5 {
  font-size: 12px;
}

/* Shipping methods (when configured) — hairline radio rows */
.ww-checkout .order-summery table th {
  font-family: var(--font-family-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-gray-2);
}

.ww-checkout input[type='radio'].shipping-charge {
  accent-color: var(--ww-ink);
}

/* Order summary — quiet ledger, ink total */
.ww-checkout .order-summary h5 {
  font-family: var(--font-family-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-gray-2);
}

.ww-checkout .order-summary .price {
  font-family: var(--font-family-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--ww-ink);
}

.ww-checkout .order-summary hr {
  border-color: var(--ww-hairline);
  opacity: 1;
  margin: 10px 0;
}

/* The ledger renders two adjacent rules above the total when no delivery
   charge follows the subtotal — collapse them into one */
.ww-checkout .order-summary .service-charge-list hr:last-child {
  display: none;
}

.ww-checkout .order-summary .border-bottom {
  border-bottom-color: var(--ww-hairline) !important;
}

.ww-checkout .order-summary .total {
  align-items: baseline;
  padding-top: 6px;
}

.ww-checkout .order-summary .total h5 {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ww-ink);
}

.ww-checkout .order-summary .total .price .grandTotal {
  font-family: var(--font-family-base);
  font-weight: 400;
  font-size: 26px;
  line-height: 1;
  color: var(--ww-ink);
}

/* Coupon — one hairline field with an ink tail */
.ww-checkout .form-inline .input-group {
  border-color: var(--ww-hairline) !important;
  border-radius: 0 !important;
  background: #fff;
  overflow: hidden;
}

.ww-checkout .form-inline .input-group .form-control {
  border: 0;
  height: 54px;
}

.ww-checkout .form-inline .couponBtn {
  border-radius: 0 !important;
  padding: 0 28px;
}

/* Payment — squared select, quiet instructions */
.ww-checkout .order-payment .nice-select {
  border: 1px solid var(--ww-hairline);
  border-radius: 2px;
  height: 52px;
  line-height: 50px;
  font-size: 14px;
  color: var(--ww-ink);
}

.ww-checkout .order-payment .nice-select:hover,
.ww-checkout .order-payment .nice-select:focus,
.ww-checkout .order-payment .nice-select.open {
  border-color: rgba(var(--color-primary-rgb), 0.6);
}

.ww-checkout .order-payment .nice-select .list {
  border-radius: 0;
  border: 1px solid var(--ww-hairline);
  box-shadow: 0 18px 40px rgba(30, 29, 35, 0.08);
  margin-top: 4px;
}

.ww-checkout .order-payment .nice-select .option {
  font-size: 13px;
}

.ww-checkout .order-payment .nice-select .option.selected {
  font-weight: 600;
}

.ww-checkout .order-payment #instructions .gateway-desc {
  font-size: 13px;
  line-height: 1.8;
  color: var(--color-gray-2);
}

.ww-checkout .order-payment .form-element label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ww-ink);
}

.ww-checkout .order-payment .file-input {
  font-size: 13px;
}

.ww-checkout .order-payment #stripe-element {
  border: 1px solid var(--ww-hairline);
  border-radius: 2px;
  background: #fff;
  padding: 0 14px;
}

/* Primary CTA — full ink block */
.ww-checkout .order-payment button[type='submit'] {
  border-radius: 2px !important;
  padding: 18px 24px;
}

/* Session alerts on the money path stay legible but calm */
.ww-checkout .alert {
  border-radius: 0;
  font-size: 13px;
}

@media (max-width: 991px) {
  .ww-checkout .billing-details {
    margin-bottom: 36px;
  }

  .ww-checkout .ship-details {
    margin-bottom: 36px;
  }
}

/* --------------------------------------------------------------------------
   3 · Success / offline-success — serene confirmation
   -------------------------------------------------------------------------- */
.purchase-message.ptb-100 {
  padding: clamp(80px, 11vw, 150px) 0;
}

.purchase-message .purchase-success {
  max-width: 620px;
}

.purchase-message .success-icon-area {
  margin-bottom: 34px;
  color: var(--color-primary);
}

.purchase-message .success-icon-area svg {
  width: 76px;
  height: 76px;
}

.purchase-message .ww-confirm-overline {
  display: block;
  font-family: var(--font-family-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 18px;
}

/* Small type on ivory/paper: deepen the bronze toward ink for contrast */
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .purchase-message .ww-confirm-overline,
  .purchase-message .success-icon-area {
    color: color-mix(in srgb, var(--color-primary) 70%, var(--ww-ink));
  }
}

.purchase-message .purchase-success .congratulation {
  font-family: var(--font-family-base);
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 400;
  line-height: 1.1;
  text-transform: capitalize;
  color: var(--ww-ink);
  margin-bottom: 16px;
}

.purchase-message .purchase-success .description {
  font-family: var(--font-family-body);
  font-size: 15px;
  line-height: 1.9;
  text-transform: none;
  color: var(--color-gray-2);
  margin: 0;
}

.purchase-message .purchase-success .btn {
  margin-top: 30px;
  border-radius: 2px !important;
  padding: 16px 44px;
}