/* ==========================================================================
   THE GENESYS - cart
   Design: "Nuova proposta grafica.dc.html" -> Turn 9, "Funnel 2 — Checkout",
   the "IL TUO ORDINE" column, whose language this page borrows: a hairline
   card per line (13px padding, r13, .09 border), a 56px picture on the
   elevated surface, 13.5px bold name, 11px meta, 14px bold price; totals as
   12.5px label/value rows over hairlines, the total at 17px.

   Pairs with woocommerce/cart/cart.php and cart-empty.php in this theme.
   Loads on top of cart-checkout.css, which still owns the fields, the
   checkboxes, the notices and the quantity stepper's home (quantity.css).
   Everything here is scoped to `body.woocommerce-cart`.
   ========================================================================== */

body.woocommerce-cart .gns-cart {
  --cart-gutter: 20px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 28px;
  align-items: start;
  max-width: 1180px;
  margin: 0 auto;
  padding: 24px var(--cart-gutter) 64px;
}

/* -------------------------------------------------------------- items --- */

body.woocommerce-cart .gns-cart__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 14px;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--gns-border-faint);
}
body.woocommerce-cart .gns-cart__label {
  margin: 0;
  font: 500 10px var(--gns-font-mono);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--gns-muted) !important;
}
body.woocommerce-cart .gns-cart__count {
  font-size: 12.5px;
  color: var(--gns-secondary-2);
}

body.woocommerce-cart .gns-cart__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.woocommerce-cart .gns-cart__item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto auto 28px;
  align-items: center;
  gap: 14px;
  padding: 13px;
  border: 1px solid var(--gns-border);
  border-radius: 13px;
  background: var(--gns-surface);
}

body.woocommerce-cart .gns-cart__thumb {
  display: block;
  width: 64px;
  height: 64px;
  overflow: hidden;
  border-radius: 11px;
  background: var(--gns-elevated);
}
body.woocommerce-cart .gns-cart__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.woocommerce-cart .gns-cart__body { min-width: 0; }
body.woocommerce-cart .gns-cart__name {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--gns-text) !important;
  text-decoration: none !important;
}
body.woocommerce-cart .gns-cart__name:hover { color: var(--gns-cyan-ink) !important; }
body.woocommerce-cart .gns-cart__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 0;
  font-size: 11px;
  color: var(--gns-secondary-2) !important;
}
body.woocommerce-cart .gns-cart__meta .amount { color: var(--gns-secondary-2); font-weight: 500; }
body.woocommerce-cart .gns-cart__dot { color: var(--gns-muted); }

/* WooCommerce's per-line variation data, printed under the name. */
body.woocommerce-cart .gns-cart__body dl.variation {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 4px 0 0;
  font-size: 11px;
  color: var(--gns-secondary-2);
}
body.woocommerce-cart .gns-cart__body dl.variation dt,
body.woocommerce-cart .gns-cart__body dl.variation dd { margin: 0; display: inline; }
body.woocommerce-cart .gns-cart__body dl.variation p { display: inline; margin: 0; }
body.woocommerce-cart .gns-cart__body .backorder_notification {
  margin: 4px 0 0;
  font-size: 11px;
  color: var(--gns-magenta-ink);
}

body.woocommerce-cart .gns-cart__subtotal {
  min-width: 74px;
  font-size: 14px;
  font-weight: 700;
  text-align: right;
  color: var(--gns-text);
}
body.woocommerce-cart .gns-cart__subtotal .amount { color: var(--gns-text); }

/* Remove: a small round control that turns magenta on hover. */
body.woocommerce-cart .gns-cart__remove a.remove {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--gns-border-strong);
  border-radius: 50%;
  background: var(--gns-elevated) !important;
  color: var(--gns-secondary-2) !important;
  font-size: 15px;
  line-height: 1;
  text-decoration: none;
}
body.woocommerce-cart .gns-cart__remove a.remove:hover {
  border-color: var(--gns-border-magenta);
  background: var(--gns-magenta-tint) !important;
  color: var(--gns-magenta-ink) !important;
}

/* ------------------------------------------------------------ actions --- */

body.woocommerce-cart .gns-cart__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
}
body.woocommerce-cart .gns-cart__coupon {
  display: flex;
  flex: 1 1 auto;
  gap: 8px;
  align-items: center;
}
body.woocommerce-cart .gns-cart__coupon #coupon_code {
  max-width: 220px;
  height: 44px;
}
body.woocommerce-cart .gns-cart__actions .button {
  height: 44px;
  padding: 0 18px;
  border: 1px solid var(--gns-border-heavy) !important;
  border-radius: var(--gns-r-pill);
  background: transparent !important;
  color: var(--gns-body) !important;
  font-family: var(--gns-font);
  font-size: 13px;
  font-weight: 500;
}
body.woocommerce-cart .gns-cart__actions .button:hover {
  border-color: var(--gns-cyan) !important;
  color: var(--gns-text) !important;
}
/* WooCommerce disables Update cart until a quantity changes. */
body.woocommerce-cart .gns-cart__actions .button:disabled,
body.woocommerce-cart .gns-cart__actions .button.disabled {
  opacity: .4;
  cursor: not-allowed;
}

/* ---------------------------------------------------------------- live --- */
/*
 * assets/js/cart-live.js presses "Update cart" for the visitor whenever a
 * quantity settles, so the button is no longer something anyone should have to
 * find. It is hidden rather than removed - the script still needs to click it,
 * and WooCommerce still needs its name in the POST to route the request.
 *
 * `.gns-cart--live` is added by the script only once it has found the button
 * AND confirmed WooCommerce's own cart.js is on the page. With JavaScript off,
 * or if either check fails, the class never lands and the button stays exactly
 * where WooCommerce put it.
 *
 * `display: none` and not a clip: a button nobody can see must not be in the
 * tab order either. A programmatic .click() still works on a hidden button.
 */
body.woocommerce-cart .woocommerce-cart-form.gns-cart--live .gns-cart__update {
  display: none;
}
body.woocommerce-cart .gns-cart__live-hint {
  flex: 1 1 100%;
  margin: 2px 0 0;
  text-align: right;
  font: 400 12px/1.4 var(--gns-font);
  color: var(--gns-muted);
}

/*
 * A quantity edit is a small, frequent action, so it does not get the full
 * scrim that loading.css gives a blocked container - a grey sheet over the
 * whole cart every time someone taps "+" is far more disruptive than the wait
 * it is reporting. The line being recalculated says so itself, and the totals
 * card (which IS what changes) keeps the standard overlay.
 */
body.woocommerce-cart .woocommerce-cart-form.gns-cart--live.processing::before,
body.woocommerce-cart .woocommerce-cart-form.gns-cart--live.processing::after {
  content: none;
}
/*
 * ...and it stays interactive, so a second "+" during the request is not
 * swallowed. cart-live.js re-applies anything typed mid-flight once the
 * server's answer lands - see reconcile() - so nothing is lost by allowing it.
 */
body.woocommerce-cart .woocommerce-cart-form.gns-cart--live.processing {
  pointer-events: auto;
  -webkit-user-select: auto;
  user-select: auto;
}

/* ---------------------------------------------------------------- undo --- */
/*
 * Where the removed line was, for a few seconds. This is what is left of
 * WooCommerce's "… removed. Undo?" banner once inc/cart/notices.php has
 * taken the banner itself away - the reversal stays, the page-shifting bar
 * does not. Built by assets/js/cart-live.js.
 */
body.woocommerce-cart .gns-cart__undo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 12px 16px;
  border: 1px dashed var(--gns-border-strong);
  border-radius: var(--gns-r-card);
  background: var(--gns-tint-weak);
  list-style: none;
}
body.woocommerce-cart .gns-cart__undo-text {
  font: 400 13px/1.4 var(--gns-font);
  color: var(--gns-secondary);
}
body.woocommerce-cart .gns-cart__undo-link {
  flex: none;
  font: 600 13px/1 var(--gns-font);
  color: var(--gns-cyan-ink) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}
body.woocommerce-cart .gns-cart__undo-link:hover { color: var(--gns-text) !important; }

/* The line is on its way out; say so before it goes. */
body.woocommerce-cart .cart_item.is-removing {
  opacity: .45;
  pointer-events: none;
  transition: opacity .18s ease;
}

/*
 * The figure is about to change, so it is replaced by a placeholder rather
 * than left standing as a number that is already wrong.
 *
 * The placeholder is a pseudo-element of a fixed, price-like width, NOT a
 * background on the cell: below 600px the subtotal spans two grid tracks (see
 * the responsive block at the foot of this file), so colouring the cell drew a
 * full-width grey band across the card.
 */
body.woocommerce-cart .cart_item.is-updating .gns-cart__subtotal {
  position: relative;
  color: transparent;
}
body.woocommerce-cart .cart_item.is-updating .gns-cart__subtotal .amount {
  color: transparent;
}
body.woocommerce-cart .cart_item.is-updating .gns-cart__subtotal::after {
  content: '';
  position: absolute;   /* out of flow - never a grid item; see loading.css */
  top: 50%;
  right: 0;
  width: 76px;
  height: 12px;
  margin-top: -6px;
  border-radius: 5px;
  /* Painted with the shared shimmer - see @keyframes gns-shimmer in
     loading.css, which is global and also drives the shop grid skeleton. */
  background-image: linear-gradient(
    90deg,
    var(--gns-tint) 25%,
    var(--gns-elevated) 37%,
    var(--gns-tint) 63%
  );
  background-size: 400% 100%;
  animation: gns-shimmer 1.4s ease infinite;
}

/* ------------------------------------------------------------ summary --- */
/*
 * cart-totals.php is the parent's (WooCommerce's own), restyled in place:
 * `.cart_totals` is the card, its <h2> the mono label, its rows the totals.
 * cart-checkout.css already floats/positions .cart-collaterals for the old
 * table layout; the grid above places it instead.
 */
body.woocommerce-cart .gns-cart__side {
  display: block;
  float: none;
  width: auto;
  position: sticky;
  top: calc(var(--gns-header-h, var(--top-margin, 63px)) + 16px);
}
body.woocommerce-cart .gns-cart__side .cart_totals {
  float: none;
  width: 100%;
  flex: none;
  padding: 22px 22px 20px;
  border: 1px solid var(--gns-border);
  border-radius: var(--gns-r-panel);
  background: var(--gns-surface);
}
body.woocommerce-cart .gns-cart__side .cart_totals h2 {
  margin: 0 0 12px;
  font: 500 10px var(--gns-font-mono) !important;
  letter-spacing: .13em;
  text-transform: uppercase !important;
  color: var(--gns-muted) !important;
  -webkit-text-fill-color: var(--gns-muted) !important;
}
body.woocommerce-cart .gns-cart__side .cart_totals .shop_table {
  width: 100%;
  border: 0;
  background: transparent;
  border-collapse: collapse;
}
body.woocommerce-cart .gns-cart__side .cart_totals th,
body.woocommerce-cart .gns-cart__side .cart_totals td {
  padding: 9px 0;
  border: 0;
  border-bottom: 1px solid var(--gns-border-faint);
  background: transparent;
  font: 400 12.5px var(--gns-font);
  letter-spacing: 0;
  text-transform: none;
}
body.woocommerce-cart .gns-cart__side .cart_totals th { text-align: left; color: var(--gns-secondary); }
body.woocommerce-cart .gns-cart__side .cart_totals td { text-align: right; color: var(--gns-text); }
body.woocommerce-cart .gns-cart__side .cart_totals .order-total th,
body.woocommerce-cart .gns-cart__side .cart_totals .order-total td {
  padding: 12px 0 2px;
  border-bottom: 0;
  font-weight: 700;
  color: var(--gns-text);
}
body.woocommerce-cart .gns-cart__side .cart_totals .order-total td,
body.woocommerce-cart .gns-cart__side .cart_totals .order-total .amount {
  font-size: 17px;
  color: var(--gns-text);
}
body.woocommerce-cart .gns-cart__side .woocommerce-shipping-destination,
body.woocommerce-cart .gns-cart__side .woocommerce-shipping-methods {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  color: var(--gns-secondary);
}

/* The way on: the artboard's 56px gradient pill under the cyan glow. */
body.woocommerce-cart .gns-cart__side .wc-proceed-to-checkout { margin: 16px 0 0; padding: 0; }
body.woocommerce-cart .gns-cart__side .wc-proceed-to-checkout a.checkout-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 56px;
  margin: 0;
  padding: 0 24px;
  border: 0;
  border-radius: var(--gns-r-pill);
  background: var(--gns-gradient) !important;
  color: var(--gns-on-accent) !important;
  font-family: var(--gns-font);
  font-size: 15.5px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--gns-glow-cta);
  transition: transform .15s ease, box-shadow .15s ease;
}
body.woocommerce-cart .gns-cart__side .wc-proceed-to-checkout a.checkout-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 44px rgba(0, 191, 255, .32);
}
body.woocommerce-cart .gns-cart__trust {
  margin: 12px 0 0;
  font-size: 11px;
  line-height: 1.5;
  text-align: center;
  color: var(--gns-muted) !important;
}

/* -------------------------------------------------------------- empty --- */

body.woocommerce-cart .gns-cart--empty { display: block; }
body.woocommerce-cart .gns-cart__empty {
  max-width: 560px;
  margin: 24px auto;
  padding: 48px 28px;
  border: 1px solid var(--gns-border);
  border-radius: var(--gns-r-panel);
  background:
    radial-gradient(420px 220px at 50% 0%, var(--gns-cyan-tint-2), transparent 70%),
    var(--gns-surface);
  text-align: center;
}
body.woocommerce-cart .gns-cart__empty-mark {
  display: block;
  width: 56px;
  height: auto;
  margin: 0 auto 18px;
}
body.woocommerce-cart .gns-cart__empty-title {
  margin: 0;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -.03em;
  color: var(--gns-text) !important;
}
body.woocommerce-cart .gns-cart__empty-text {
  max-width: 380px;
  margin: 10px auto 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--gns-secondary) !important;
}
body.woocommerce-cart .gns-cart__empty-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 24px 0 0;
}
/* WooCommerce's own "Your cart is currently empty." notice sits above; the
   card says it better, so the notice goes quiet rather than duplicating it. */
body.woocommerce-cart .wc-empty-cart-message { display: none; }

body.woocommerce-cart .gns-cart__btn {
  display: inline-flex;
  align-items: center;
  height: 46px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: var(--gns-r-pill);
  background: var(--gns-gradient) !important;
  color: var(--gns-on-accent) !important;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none !important;
  box-shadow: var(--gns-glow-cta);
}
body.woocommerce-cart .gns-cart__btn--ghost {
  background: transparent !important;
  border-color: var(--gns-border-strong);
  color: var(--gns-text) !important;
  box-shadow: none;
}
body.woocommerce-cart .gns-cart__btn--ghost:hover {
  border-color: var(--gns-border-cyan);
  background: var(--gns-cyan-tint) !important;
}

/* --------------------------------------------------------- responsive --- */

@media (max-width: 960px) {
  body.woocommerce-cart .gns-cart { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  body.woocommerce-cart .gns-cart__side { position: static; }
}
@media (max-width: 600px) {
  body.woocommerce-cart .gns-cart { padding: 16px 12px 48px; }
  /*
   * Two rows: picture / name / remove, then the stepper with the line's
   * subtotal on the right. The subtotal spans the last two tracks - in the
   * 28px remove column alone its 74px minimum ran 10px past the viewport and
   * gave the page a horizontal scroll.
   */
  body.woocommerce-cart .gns-cart__item {
    grid-template-columns: 56px minmax(0, 1fr) 28px;
    grid-template-areas:
      "thumb body     remove"
      "qty   subtotal subtotal";
    row-gap: 12px;
  }
  body.woocommerce-cart .gns-cart__thumb { grid-area: thumb; width: 56px; height: 56px; }
  body.woocommerce-cart .gns-cart__body { grid-area: body; }
  body.woocommerce-cart .gns-cart__remove { grid-area: remove; }
  body.woocommerce-cart .gns-cart__qty { grid-area: qty; }
  body.woocommerce-cart .gns-cart__subtotal { grid-area: subtotal; align-self: center; min-width: 0; }
}