/* ==========================================================================
   Naturamia — Cart page (classic WooCommerce [woocommerce_cart]) on-brand.
   Scoped to body.nat-cart-page. Tokens: green #2D6A4F · coral #FD4239 · Inter.
   ========================================================================== */
.nat-cart-page {
	--green:#2D6A4F; --green-d:#1B4332; --coral:#FD4239;
	--ink:#374151; --muted:#8a93a0; --line:#e7eae8; --tint:#D8F3DC; --card:#F3F6F4;
}
.nat-cart-page .woocommerce { font-family: Inter, system-ui, -apple-system, sans-serif; color: var(--ink); padding-top: 80px; padding-bottom: 80px; }
/* Kill the theme reset.css zebra-stripe (hsla(0,0%,50%,.071) = #80808012) on the
   cart line-items table and the "Cart totals" table. */
.nat-cart-page table tbody tr td, .nat-cart-page table tbody tr th { background-color: transparent !important; }

/* Cart table */
.nat-cart-page .shop_table { border:1px solid var(--line); border-radius:16px; border-collapse:separate; overflow:hidden; }
.nat-cart-page .shop_table thead th { background:var(--card); color:var(--muted); text-transform:uppercase; font-size:.76rem; letter-spacing:.04em; border:0; padding:.9rem 1rem; }
.nat-cart-page .shop_table td { border-top:1px solid var(--line); padding:1rem; vertical-align:middle; }
.nat-cart-page .cart_item .product-name a { color:var(--ink) !important; font-weight:700; text-decoration:none; }
.nat-cart-page .cart_item .product-name a:hover { color:var(--green) !important; }
.nat-cart-page .product-thumbnail img { width:60px; height:60px; object-fit:cover; border-radius:12px; background:var(--card); }
.nat-cart-page .product-remove a.remove { color:var(--coral) !important; background:transparent !important; font-weight:700; }
.nat-cart-page .quantity input.qty { border:1.5px solid var(--line); border-radius:999px; padding:.45rem; width:64px; text-align:center; font-weight:700; }

/* Cart totals card */
.nat-cart-page .cart_totals { border:1px solid var(--line); border-radius:18px; padding:1.4rem 1.6rem; background:#fff; box-shadow:0 8px 24px rgba(16,40,28,.05); }
.nat-cart-page .cart_totals h2 { font-weight:800; color:var(--ink); margin:0 0 1rem; }
.nat-cart-page .cart_totals table { border:0; }
.nat-cart-page .cart_totals th, .nat-cart-page .cart_totals td { border:0; border-top:1px solid var(--line); padding:.75rem 0; }
.nat-cart-page .cart_totals .order-total .amount { color:var(--green); font-size:1.5rem; font-weight:800; }

/* Coupon + inputs */
.nat-cart-page .coupon input[type="text"], .nat-cart-page input[type="text"], .nat-cart-page input[type="email"], .nat-cart-page select {
	border:1.5px solid var(--line); border-radius:999px; padding:.55rem .9rem;
}

/* ---- Buttons (kill the theme/WC default colour, use brand green) ---- */
.nat-cart-page .button,
.nat-cart-page button.button,
.nat-cart-page a.button,
.nat-cart-page .checkout-button,
.nat-cart-page .wc-proceed-to-checkout a.checkout-button {
	background: var(--green) !important; color:#fff !important;
	border:0 !important; border-radius:999px !important; font-weight:700 !important;
	padding:.85rem 1.6rem !important; box-shadow:none !important; text-shadow:none !important;
	text-transform:none !important; opacity:1 !important;
}
/* Keep text white on hover (WooCommerce/theme defaults flip it to a dark/green that
   vanishes on the green button). Element+class selectors beat WC's button.button:hover. */
.nat-cart-page .button:hover, .nat-cart-page .button:focus,
.nat-cart-page button.button:hover, .nat-cart-page button.button:focus,
.nat-cart-page a.button:hover, .nat-cart-page a.button:focus,
.nat-cart-page input.button:hover, .nat-cart-page input.button:focus,
.nat-cart-page .checkout-button:hover, .nat-cart-page .checkout-button:focus,
.nat-cart-page .wc-proceed-to-checkout a.checkout-button:hover,
.nat-cart-page .wc-proceed-to-checkout a.checkout-button:focus { background: var(--green-d) !important; color:#fff !important; }
.nat-cart-page .wc-proceed-to-checkout { padding:0; }
.nat-cart-page .wc-proceed-to-checkout a.checkout-button { display:block; text-align:center; margin-top:1rem; font-size:1.05rem; }
/* secondary buttons (apply coupon / update cart) */
.nat-cart-page button[name="apply_coupon"], .nat-cart-page button[name="update_cart"] {
	background:#fff !important; color:var(--green) !important; border:1.5px solid var(--green) !important;
}
/* Scope link colouring to the cart content only — never the header/footer. */
.nat-cart-page .woocommerce a:not(.button) { color:var(--green); }

/* ---- Visual polish (scoped to the cart content) ---- */
.nat-cart-page .woocommerce { font-family:Inter,system-ui,sans-serif; }
.nat-cart-page .shop_table { box-shadow:0 8px 24px rgba(16,40,28,.05); }
.nat-cart-page .shop_table tbody tr:hover td { background:#fafcfb; }
.nat-cart-page .cart_item td.product-name { color:var(--ink); }
.nat-cart-page .cart_item .product-name .variation,
.nat-cart-page .cart_item dl.variation { color:var(--muted); font-size:.82rem; margin:.25rem 0 0; }
/* round × remove button */
.nat-cart-page td.product-remove a.remove {
	display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px;
	border-radius:50%; border:1.5px solid #f0d3d1; font-size:1rem; line-height:1; text-decoration:none;
}
.nat-cart-page td.product-remove a.remove:hover { background:var(--coral) !important; color:#fff !important; border-color:var(--coral); }
/* price/subtotal emphasis */
.nat-cart-page .cart_item .product-subtotal { font-weight:700; color:var(--ink); }
.nat-cart-page .actions { padding-top:1rem; }
.nat-cart-page .coupon { display:flex; gap:.5rem; align-items:center; }

/* ======================================================================
   Cart redesign — card-per-item layout (overrides the table look above)
   ====================================================================== */
.nat-cart-page .woocommerce-cart-form { display:block; }
.nat-cart-page table.shop_table.cart,
.nat-cart-page table.shop_table.cart tbody { display:block; width:100%; border:0 !important; background:transparent !important; box-shadow:none !important; border-radius:0 !important; }
.nat-cart-page table.shop_table.cart thead { display:none; } /* labels shown inline on each card */

/* each line item = a rounded white card */
.nat-cart-page tr.cart_item {
	display:grid; grid-template-columns:84px minmax(0,1fr) 110px 150px 110px 40px; align-items:center; gap:1.2rem;
	background:#fff; border:1px solid var(--line); border-radius:18px; padding:1rem 1.3rem; margin:0 0 1rem;
	box-shadow:0 6px 18px rgba(16,40,28,.05);
}
.nat-cart-page tr.cart_item:hover { box-shadow:0 12px 30px rgba(16,40,28,.09); }
.nat-cart-page tr.cart_item td { display:block; border:0 !important; padding:0 !important; }

.nat-cart-page td.product-thumbnail { grid-column:1; }
.nat-cart-page td.product-thumbnail img { width:84px; height:84px; border-radius:14px; object-fit:cover; background:var(--card); }
.nat-cart-page td.product-name { grid-column:2; font-size:1.05rem; }
.nat-cart-page td.product-name a { color:var(--ink) !important; font-weight:800; text-decoration:none; }
.nat-cart-page td.product-name a:hover { color:var(--green) !important; }
.nat-cart-page td.product-name .variation,
.nat-cart-page td.product-name dl.variation { color:var(--muted); font-size:.82rem; line-height:1.45; margin:.3rem 0 0; }
.nat-cart-page td.product-name dl.variation dt { font-weight:700; float:left; margin-right:.35rem; clear:left; }
.nat-cart-page td.product-name dl.variation dd { margin:0; }

/* inline labels for price / qty / subtotal (since the header is hidden) */
.nat-cart-page td.product-price    { grid-column:3; text-align:left; }
.nat-cart-page td.product-quantity { grid-column:4; }
.nat-cart-page td.product-subtotal { grid-column:5; text-align:left; font-weight:800; color:var(--ink); }
.nat-cart-page td.product-price::before,
.nat-cart-page td.product-quantity::before,
.nat-cart-page td.product-subtotal::before {
	content:attr(data-title); display:block; font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:.3rem; font-weight:700;
}
.nat-cart-page td.product-price .amount { font-weight:700; color:var(--ink); }
.nat-cart-page td.product-subtotal .amount { color:var(--green); }

/* quantity stepper pill */
.nat-cart-page td.product-quantity .quantity { display:inline-flex; }
.nat-cart-page td.product-quantity input.qty { width:72px; height:44px; border:1.5px solid var(--line); border-radius:999px; text-align:center; font-weight:700; background:#fff; }

/* remove × circle, far right */
.nat-cart-page td.product-remove { grid-column:6; justify-self:end; }
.nat-cart-page td.product-remove a.remove {
	display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px;
	border-radius:50%; border:1.5px solid #f0d3d1; color:var(--coral) !important; font-size:1rem; text-decoration:none; background:#fff !important;
}
.nat-cart-page td.product-remove a.remove:hover { background:var(--coral) !important; color:#fff !important; border-color:var(--coral); }

/* actions row (coupon + update) as a clean toolbar */
.nat-cart-page table.shop_table.cart tr:last-child { display:block; }
.nat-cart-page td.actions {
	display:flex !important; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
	background:#fff; border:1px solid var(--line); border-radius:18px; padding:1rem 1.3rem; margin-top:.4rem; width:100%;
}
.nat-cart-page td.actions .coupon { display:flex; gap:.6rem; align-items:center; margin:0; }
.nat-cart-page td.actions .coupon input#coupon_code { height:46px; min-width:200px; border:1.5px solid var(--line); border-radius:999px; padding:.55rem 1rem; }
.nat-cart-page td.actions button[name="update_cart"] { margin-left:auto; }

/* responsive: stack the card */
@media (max-width:680px){
	.nat-cart-page tr.cart_item { grid-template-columns:64px minmax(0,1fr); gap:.6rem 1rem; }
	.nat-cart-page td.product-thumbnail img { width:64px; height:64px; }
	.nat-cart-page td.product-name { grid-column:2; }
	.nat-cart-page td.product-price, .nat-cart-page td.product-quantity, .nat-cart-page td.product-subtotal { grid-column:2; text-align:left; }
	.nat-cart-page td.product-remove { grid-column:2; justify-self:start; }
	.nat-cart-page td.actions { flex-direction:column; align-items:stretch; }
}