/* The shared inline <style> block in page-cart.php never sets a base
   .nav-link color on its own — every React entry supplies it from its own
   page-specific stylesheet. Same pattern as product-single.css /
   product-category.css. */
.nav-link { color: #4a3f34; }
.footer-copyright-link { color: inherit; text-decoration: none; transition: color 0.3s ease; }
.footer-copyright-link:hover { color: #c9a96e; }

/* header.php's shared .nav-wrap is transparent until a `.scrolled` class is
   added — that only happens on the homepage's React bundle. This template
   has no scroll listener, so without this override the nav stays
   permanently transparent and page content scrolls up underneath it.
   Matches product-category.css's existing opaque treatment exactly. */
.nav-wrap {
  background: rgba(240,230,204,0.97);
  backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 rgba(28,25,23,0.07);
}

/* ─── Page shell ─── */
.umeni-cart-main {
  max-width: 1120px;
  margin: 0 auto;
  padding: 148px 56px 140px;
}

.umeni-cart-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 48px;
}
.umeni-cart-breadcrumb {
  flex-basis: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.umeni-cart-breadcrumb a,
.umeni-cart-breadcrumb span {
  font-family: 'Inter', sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
}
.umeni-cart-breadcrumb a { color: #9c8e7e; text-decoration: none; transition: color 0.3s ease; }
.umeni-cart-breadcrumb a:hover { color: #c9a96e; }
.umeni-cart-breadcrumb .sep { color: rgba(28,25,23,0.25); font-size: 0.6rem; }
.umeni-cart-breadcrumb .current { color: #c9a96e; }

.umeni-cart-header h1 {
  font-family: 'Playfair Display', serif;
  font-weight: 500;
  font-size: clamp(2rem, 3.2vw, 2.8rem);
  color: #1c1917;
  letter-spacing: -0.01em;
}

.umeni-continue-shopping {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  color: #6b5e52;
  text-decoration: none;
  transition: color 0.3s ease;
}
.umeni-continue-shopping:hover { color: #c9a96e; }

/* ─── WooCommerce notices (coupon applied / removed / errors) ─── */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
  list-style: none;
  font-family: 'Inter', sans-serif;
  font-size: 0.84rem;
  color: #4a3f34;
  background: rgba(201,169,110,0.12);
  border-left: 3px solid #c9a96e;
  padding: 16px 20px;
  margin-bottom: 32px;
}
.woocommerce-error { border-left-color: #a65b4f; background: rgba(166,91,79,0.08); }
.woocommerce-message a.button,
.woocommerce-error a.button {
  margin-left: 14px;
  font-family: 'Inter', sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #c9a96e;
  text-decoration: underline;
}

/* ─── Cart items table ─── */
.woocommerce-cart-form { margin-bottom: 56px; }

table.shop_table {
  width: 100%;
  border-collapse: collapse;
}
table.shop_table thead th {
  text-align: left;
  font-family: 'Inter', sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #9c8e7e;
  font-weight: 500;
  padding: 0 12px 16px;
  border-bottom: 1px solid rgba(28,25,23,0.1);
}
table.shop_table thead th.product-remove,
table.shop_table thead th.product-thumbnail { width: 1%; }

table.shop_table tbody tr.cart_item td {
  padding: 24px 12px;
  border-bottom: 1px solid rgba(28,25,23,0.08);
  vertical-align: middle;
  font-family: 'Inter', sans-serif;
  font-size: 0.86rem;
  color: #1c1917;
}

td.product-remove { text-align: center; }
td.product-remove a.remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #9c8e7e;
  font-size: 1.1rem;
  line-height: 1;
  text-decoration: none;
  transition: all 0.3s ease;
}
td.product-remove a.remove:hover { color: #a65b4f; background: rgba(166,91,79,0.08); }

td.product-thumbnail img {
  width: 84px;
  height: 84px;
  object-fit: cover;
  display: block;
  background: linear-gradient(148deg, #e4d8bc 0%, #d8c9a3 100%);
}

td.product-name a {
  font-family: 'Playfair Display', serif;
  font-size: 1.02rem;
  color: #1c1917;
  text-decoration: none;
}
td.product-name a:hover { color: #c9a96e; }
td.product-name dl.variation {
  margin-top: 8px;
  font-size: 0.76rem;
  color: #6b5e52;
}
td.product-name dl.variation dt,
td.product-name dl.variation dd {
  display: inline;
  margin: 0;
  font-weight: 400;
}
td.product-name dl.variation dt::after { content: ''; }
td.product-name dl.variation dd p { margin: 0; display: inline; }

td.product-price,
td.product-subtotal {
  font-family: 'Inter', sans-serif;
  color: #4a3f34;
  white-space: nowrap;
}
td.product-subtotal { font-weight: 500; color: #1c1917; }

/* Quantity input (reused pattern from single-product) */
.quantity { display: inline-block; }
.quantity .qty {
  width: 68px;
  background: transparent;
  border: 1px solid #d6cfc4;
  padding: 10px 12px;
  font-family: 'Inter', sans-serif;
  font-size: 0.86rem;
  color: #1c1917;
  text-align: center;
  border-radius: 0;
}

/* Actions row: coupon + update cart */
tr.woocommerce-cart-form__cart-item + tr td.actions,
tr td.actions {
  padding: 28px 12px 0;
  border-bottom: none;
}
.coupon {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.coupon .input-text {
  background: transparent;
  border: none;
  border-bottom: 1px solid #d6cfc4;
  padding: 10px 0;
  font-family: 'Inter', sans-serif;
  font-size: 0.86rem;
  color: #1c1917;
  min-width: 200px;
  border-radius: 0;
}
.coupon .input-text:focus { border-bottom-color: #c9a96e; outline: 2px solid #c9a96e; outline-offset: 2px; }

button[name="apply_coupon"],
button[name="update_cart"] {
  background: transparent;
  color: #1c1917;
  border: 1px solid #1c1917;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.66rem;
  padding: 11px 24px;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 0;
}
button[name="apply_coupon"]:hover,
button[name="update_cart"]:hover { background: #1c1917; color: #faf7f2; }
button[name="update_cart"] { display: block; margin-top: 4px; }
button[name="apply_coupon"]:disabled,
button[name="update_cart"]:disabled { opacity: 0.4; cursor: not-allowed; }

/* ─── Cart totals ───
   .cart-collaterals is WooCommerce's own wrapper (see
   cart/cart.php — <?php do_action('woocommerce_cart_collaterals'); ?>).
   Native cross-sell display (empty — no product has WC's own Cross-sells
   field set) and Cart Totals both hook into it by default; the
   recommendations block joins them at priority 20 (see
   umeni_cart_recommendations_display() in functions.php). `order` below
   places recs left / totals right on desktop, reversed when stacked on
   mobile — independent of the two blocks' actual source order, so neither
   template needs to know about the other's position. justify-content:
   flex-end keeps the pre-existing right-aligned behaviour on the rare
   pageview where recommendations don't render (e.g. a lone product with
   no Series/category match at all, which given today's catalogue breadth
   shouldn't happen, but costs nothing to keep safe). */
.cart-collaterals {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 40px;
  justify-content: flex-end;
}
.cart-collaterals .cart_totals { order: 2; flex-shrink: 0; }
.cart-collaterals .umeni-cart-recs { order: 1; flex: 1 1 320px; min-width: 0; }
.cart_totals {
  width: 100%;
  max-width: 420px;
  background: rgba(255,255,255,0.35);
  border: 1px solid rgba(28,25,23,0.08);
  padding: 36px 40px 40px;
}
.cart_totals h2 {
  font-family: 'Playfair Display', serif;
  font-weight: 500;
  font-size: 1.3rem;
  color: #1c1917;
  margin-bottom: 22px;
}
.cart_totals table.shop_table { margin-bottom: 28px; }
.cart_totals table.shop_table tr th,
.cart_totals table.shop_table tr td {
  padding: 14px 0;
  border-bottom: 1px solid rgba(28,25,23,0.08);
  font-family: 'Inter', sans-serif;
  font-size: 0.84rem;
  text-align: left;
}
.cart_totals table.shop_table tr th {
  color: #6b5e52;
  font-weight: 400;
}
.cart_totals table.shop_table tr td { text-align: right; color: #1c1917; }
.cart_totals tr.order-total th,
.cart_totals tr.order-total td {
  border-bottom: none;
  padding-top: 18px;
  font-size: 1rem;
  font-weight: 500;
  color: #1c1917;
}
.cart_totals tr.order-total td { color: #c9a96e; }

#shipping_method {
  list-style: none;
  text-align: right;
  margin-bottom: 8px;
}
#shipping_method li { margin-bottom: 6px; font-size: 0.82rem; }
#shipping_method input { margin-right: 6px; }
.woocommerce-shipping-destination { font-size: 0.76rem; color: #9c8e7e; text-align: right; }

.shipping-calculator-form { margin-top: 12px; text-align: right; }
.shipping-calculator-button {
  font-family: 'Inter', sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9c8e7e;
  text-decoration: underline;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.shipping-calculator-form select,
.shipping-calculator-form input[type="text"] {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid #d6cfc4;
  padding: 10px 0;
  margin-top: 12px;
  font-family: 'Inter', sans-serif;
  font-size: 0.84rem;
  color: #1c1917;
  border-radius: 0;
  text-align: left;
}
.shipping-calculator-form .button {
  margin-top: 14px;
  background: #c9a96e;
  color: #1c1917;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.66rem;
  padding: 10px 22px;
  border: none;
  cursor: pointer;
  border-radius: 0;
}

.wc-proceed-to-checkout { text-align: right; }
.checkout-button {
  display: inline-block;
  width: 100%;
  text-align: center;
  background: #c9a96e;
  color: #1c1917 !important;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.72rem;
  padding: 16px 30px;
  border: none;
  text-decoration: none !important;
  transition: all 0.3s ease;
}
.checkout-button:hover {
  background: #b8924f;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(201,169,110,0.35);
}

/* ─── Empty cart state ─── */
.umeni-cart-main .woocommerce-info {
  border-left: none;
  background: none;
  padding: 0 0 28px;
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  color: #4a3f34;
}
p.return-to-shop { margin-top: 4px; }
a.wc-backward,
.umeni-cart-main .return-to-shop .button {
  display: inline-block;
  background: #c9a96e;
  color: #1c1917;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.72rem;
  padding: 15px 40px;
  text-decoration: none;
  transition: all 0.3s ease;
}
a.wc-backward:hover {
  background: #b8924f;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(201,169,110,0.35);
}

/* ─── "You may also like" recommendations ───
   Card visuals intentionally match the product archive's own
   .product-card/.card-img/.card-vignette/.card-info language (see
   css/product-category.css) rather than reinventing a second card style
   for the cart — scoped under .umeni-cart-recs so nothing here can leak
   onto or collide with the cart form above. Sits beside Cart Totals now
   (a flex child of .cart-collaterals, see above) rather than as its own
   full-width section, so no top border/margin of its own here — the gap
   between it and the cart items table above comes from
   .woocommerce-cart-form's existing margin-bottom. */
.umeni-cart-recs h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  font-weight: 500;
  color: #1c1917;
  margin-bottom: 24px;
}
/* Always 2-up: within the left column beside Cart Totals on desktop this
   keeps each card "large enough to be useful" (a 4-across row would be
   squeezed into a narrow leftover strip); on mobile it's also the
   explicitly required 2-per-row. One rule serves both. */
.umeni-cart-recs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.umeni-cart-recs .product-card {
  position: relative;
  background: #fff;
  border: 1px solid rgba(201,169,110,0.2);
  transition: transform 0.45s cubic-bezier(0.22,1,0.36,1),
              box-shadow 0.45s cubic-bezier(0.22,1,0.36,1),
              border-color 0.3s ease;
}
.umeni-cart-recs .product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(28,18,8,0.12), 0 4px 14px rgba(28,18,8,0.05);
  border-color: rgba(201,169,110,0.5);
}
.umeni-cart-recs .rec-card-link { display: block; text-decoration: none; color: inherit; cursor: pointer; }
.umeni-cart-recs .card-img {
  position: relative;
  overflow: hidden;
  padding-bottom: 124%;
  background: linear-gradient(148deg, #D4A86A 0%, #7A4A1E 100%);
}
.umeni-cart-recs .card-img img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 0.75s cubic-bezier(0.22,1,0.36,1);
}
.umeni-cart-recs .product-card:hover .card-img img { transform: scale(1.06); }
.umeni-cart-recs .card-vignette {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 32%, rgba(14,8,4,0.14) 55%, rgba(14,8,4,0.82) 100%);
  pointer-events: none;
}
.umeni-cart-recs .card-info {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 14px 16px 16px;
  pointer-events: none;
}
.umeni-cart-recs .card-title {
  font-family: 'Playfair Display', serif;
  font-size: 0.86rem; font-weight: 400;
  color: #faf7f2; line-height: 1.35; margin-bottom: 4px;
  text-shadow: 0 1px 4px rgba(14,8,4,0.35);
}
.umeni-cart-recs .card-price {
  font-family: 'Inter', sans-serif;
  font-size: 0.6rem; letter-spacing: 0.04em;
  color: #c9a96e;
  text-shadow: 0 1px 4px rgba(14,8,4,0.35);
}

/* Quick Add / Select options — WooCommerce's own loop add-to-cart anchor
   (see woocommerce_template_loop_add_to_cart() in
   umeni_cart_recommendations_display()), just skinned to match the site's
   existing gold button language. A sibling of .rec-card-link (the image
   link), not nested inside it — and now also `position: absolute` inside
   the card (see .product-card above), which layers it above the
   non-positioned .rec-card-link in painting order automatically, without
   needing z-index. That's what makes it reliably clickable on its own:
   a click landing on this pill's screen area always hits this <a>, never
   the underlying card link, even though the two visually overlap.
   Sitting inside the image this way — rather than as a block beneath it —
   is also what keeps every card in a row the same height regardless of
   whether it has a Quick Add control, since it no longer adds any
   in-flow content below the image. */
.rec-quick-add {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
}
.rec-quick-add a {
  display: inline-block;
  background: rgba(20,14,8,0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(201,169,110,0.7);
  border-radius: 999px;
  color: #faf7f2;
  font-family: 'Inter', sans-serif;
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  padding: 8px 13px;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.rec-quick-add a:hover { background: #c9a96e; border-color: #c9a96e; color: #1c1917; }
.rec-quick-add a.loading { opacity: 0.6; pointer-events: none; }
.rec-quick-add a.added { background: #c9a96e; border-color: #c9a96e; color: #1c1917; }

/* ─── Responsive ─── */
@media (max-width: 900px) {
  .umeni-cart-main { padding: 128px 28px 100px; }
  /* Stack naturally: Cart Totals first (the primary action), then
     recommendations below — the `order` swap that puts recs on the left
     at desktop only applies within a row, so it's reset here for the
     column stack. */
  .cart-collaterals { flex-direction: column; align-items: stretch; justify-content: stretch; }
  .cart-collaterals .cart_totals { order: 1; }
  /* .umeni-cart-recs's desktop rule above sets `flex: 1 1 320px` — a
     row-axis (width) basis for the side-by-side desktop layout. In this
     column-direction stack that same shorthand is read as a *height*
     basis instead (flex-basis follows the main axis, which is now
     vertical), shrinking the section below its grid's real content
     height and spilling the last card row out past .umeni-cart-main's
     bottom edge, under the footer. Resetting it to auto-height/full-width
     here is what actually fixes the footer overlap — not just padding. */
  .cart-collaterals .umeni-cart-recs { order: 2; flex: 0 1 auto; width: 100%; }
  .cart_totals { max-width: none; }

  /* Scoped to table.cart specifically (the cart ITEMS table) — the cart
     totals table also carries .shop_table_responsive, but its plain
     label/value rows already work fine at any width and don't need the
     card treatment below. */
  table.cart.shop_table_responsive thead { display: none; }
  table.cart.shop_table_responsive,
  table.cart.shop_table_responsive tbody { display: block; width: 100%; }

  /*
   * Each row becomes an actual product card via CSS Grid areas, rather
   * than a label/value stack pretending to be a table row:
   *
   *   ┌────────┬───────────────────────┐
   *   │        │  Product name      [×] │
   *   │ image  │  Price                 │
   *   │        │  [qty stepper]  Subtotal│
   *   └────────┴───────────────────────┘
   *
   * The six <td>s WooCommerce renders (remove/thumbnail/name/price/
   * quantity/subtotal) are unchanged — only their grid placement changes.
   */
  table.cart.shop_table_responsive tr.cart_item {
    display: grid;
    /* Bare `1fr` resolves to `minmax(auto, 1fr)` — the track's own auto
       minimum still grows to fit an unbreakable child (a long product name
       with a stray long word, or a price string like "₹120,000.00" with no
       spaces to wrap at), which is what was actually overflowing the row.
       minmax(0, 1fr) removes that content-based floor at the track level —
       the standard fix for this, more reliable than trying to override it
       via a min-width on the items placed in the track (tried first; the
       track's own auto sizing won regardless of the item's min-width). */
    grid-template-columns: 88px minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "thumb  name    name"
      "thumb  price   price"
      "thumb  qty     subtotal";
    column-gap: 16px;
    row-gap: 6px;
    align-items: center;
    position: relative;
    background: rgba(255,255,255,0.4);
    border: 1px solid rgba(28,25,23,0.08);
    border-radius: 4px;
    padding: 18px 16px 18px 18px;
    margin-bottom: 16px;
  }
  table.cart.shop_table_responsive tr.cart_item td {
    border-bottom: none;
    padding: 0;
    display: block;
  }
  table.cart.shop_table_responsive td::before { content: none; }

  table.cart.shop_table_responsive td.product-remove {
    grid-area: name;
    justify-self: end;
    align-self: start;
    /* Was -8px on the right — at the narrowest tested width (320px) that
       pushed the 40px button a few pixels past the viewport edge. 0
       still reads as flush against the card's own right padding. */
    margin: -10px 0 0 0;
    /* Sharing a grid area with product-name (below, later in DOM order)
       means product-name's own box would otherwise paint on top and
       silently swallow taps meant for this button — position+z-index
       lifts it back above so it's actually tappable, not just visible. */
    position: relative;
    z-index: 2;
  }
  table.cart.shop_table_responsive td.product-remove a.remove {
    width: 40px;
    height: 40px;
    font-size: 1.3rem;
  }
  table.cart.shop_table_responsive td.product-thumbnail { grid-area: thumb; }
  table.cart.shop_table_responsive td.product-thumbnail img { width: 100%; height: auto; aspect-ratio: 1; }
  table.cart.shop_table_responsive td.product-name {
    grid-area: name;
    padding-right: 32px; /* room for the [x] sharing this area */
    /* Grid items default to a content-based automatic minimum width, so a
       long product name (e.g. "Day Dream Handcarved Cabinet") with nowhere
       to wrap forces this track wider than its 1fr share, overflowing the
       row (and the page) at the narrowest widths. min-width: 0 lets the
       track actually shrink to its allocated space so the (already
       normal-wrapping) text wraps inside it instead. name and price share
       the same two grid columns (see grid-template-areas above), so both
       need this — a long word in either one alone widens both. */
    min-width: 0;
    overflow-wrap: break-word;
  }
  table.cart.shop_table_responsive td.product-name a { font-size: 0.95rem; }
  table.cart.shop_table_responsive td.product-price {
    grid-area: price;
    color: #6b5e52;
    font-size: 0.82rem;
    /* The actual overflow trigger in practice: a price string like
       "₹120,000.00" has no spaces to wrap at, so its min-content width is
       its full unbroken width — same min-width: 0 fix as product-name,
       plus overflow-wrap as a last-resort break for the truly unbreakable
       run rather than letting it force the shared column wider. */
    min-width: 0;
    overflow-wrap: break-word;
  }
  table.cart.shop_table_responsive td.product-quantity { grid-area: qty; }
  table.cart.shop_table_responsive td.product-subtotal {
    grid-area: subtotal;
    justify-self: end;
    align-self: end;
    font-size: 0.95rem;
  }

  table.cart.shop_table_responsive td.actions {
    padding: 4px 0 0;
  }
  table.cart.shop_table_responsive td.actions .coupon {
    flex-direction: column;
    align-items: stretch;
  }

  .umeni-cart-header { flex-direction: column; align-items: flex-start; }
}