/*
 * Cart page extras (inc/features/cart.php): items card, add-on box, Yatta Points line, mobile checkout bar.
 * Loaded on the cart page only. The meter and the add-on row it prints are styled in site.css.
 * Loads after redesign.css, so the cart rules there are overridden on purpose where the design asks for more.
 */

/* Blocksy's own shipping bar in the totals box: the meter above the items replaces it. */
html body.yr .ct-shipping-progress-cart-page { display: none; }

/* The cart form is a stack of separate cards: count, meter, items, add-ons. */
html body.yr.woocommerce-cart .woocommerce-cart-form {
	background: transparent; border: 0; box-shadow: none; padding: 0;
	display: flex; flex-direction: column; gap: 20px;
}
html body.yr.woocommerce-cart .woocommerce-cart-form table.woocommerce-cart-form__contents {
	width: 100%; margin: 0; background: #FFFFFF;
	border: 3px solid var(--yr-ink) !important; box-shadow: var(--yr-sh-md) !important;
}
html body.yr.woocommerce-cart .woocommerce-cart-form table.shop_table :is(th, td):first-child { padding-left: 22px; }
html body.yr.woocommerce-cart .woocommerce-cart-form table.shop_table :is(th, td):last-child { padding-right: 22px; }
html body.yr.woocommerce-cart .woocommerce-cart-form table.shop_table thead th { padding-top: 12px; padding-bottom: 12px; }
.yr-cartitems { margin: 0; font-weight: 800; font-size: 16px; }

/* The row under the items stays only when it holds the coupon box (the Update button is hidden: the cart updates by itself). */
html body.yr .ct-cart-auto-update .woocommerce-cart-form tr:has(> td.actions:not(:has(.coupon))) { display: none; }

/* Series line and availability under the item name */
.yr-cart-series { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--yr-orange-text); }
.yr-cart-avail { display: block; margin-top: 4px; font-size: 14px; color: var(--yr-muted); }
.yr-cart-avail.is-pre { font-weight: 800; color: var(--yr-purple); color: color-mix(in srgb, var(--yr-purple) 60%, var(--yr-ink)); }
/* Remove link: a real touch target */
html body.yr.woocommerce-cart .woocommerce-cart-form a.remove { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; --theme-icon-size: 18px; }

/* The free-shipping meter and the add-on row (also used by the mobile sheet) live in site.css. */

/* ---------- add-on box ---------- */
.yr-upsell { background: var(--yr-sun); border: 3px solid var(--yr-ink); padding: 22px; display: flex; flex-direction: column; gap: 16px; }
html body.yr .yr-upsell > h2 { margin: 0; font-family: var(--yr-display); font-weight: 800; font-size: 22px; line-height: 1.2; }
.yr-upsell__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }

/* ---------- Yatta Points line ---------- */
.yr-cartpts { margin: 16px 0 0; display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--yr-panel); font-size: 14px; line-height: 1.4; }
.yr-cartpts .yr-i { flex: none; fill: var(--yr-sun); stroke: var(--yr-ink); stroke-width: 2; }
html body.yr .yr-cartpts a { font-weight: 800; }

/* ---------- mobile checkout bar ---------- */
.yr-cartbar { display: none; }
@media (max-width: 999px) {
	.yr-cartbar {
		display: block; position: fixed; z-index: 90; left: 0; right: 0; bottom: var(--yr-cookie-h, 0px); /* above the cookie banner while it shows (cart.js) */
		padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--yr-paper); border-top: 3px solid var(--yr-ink);
		transition: transform .2s ease, visibility 0s;
	}
	.yr-cartbar[hidden] { display: none; }
	.yr-cartbar.is-covered { transform: translateY(100%); visibility: hidden; transition: transform .2s ease, visibility 0s .2s; }
	html body.yr .yr-cartbar .yr-btn { width: 100%; min-height: 52px; font-family: var(--yr-display); font-size: 17px; }
	body.yr-has-cartbar { padding-bottom: calc(88px + var(--yr-cookie-h, 0px)); }
}

/* ---------- phones ---------- */
@media (max-width: 689px) {
	html body.yr.woocommerce-cart .woocommerce-cart-form { gap: 16px; }
	html body.yr.woocommerce-cart .woocommerce-cart-form table.shop_table :is(th, td):first-child { padding-left: 14px; }
	html body.yr.woocommerce-cart .woocommerce-cart-form table.shop_table :is(th, td):last-child { padding-right: 14px; }
	.yr-cartitems { font-size: 14px; }
	.yr-upsell { padding: 16px; gap: 12px; }
	html body.yr .yr-upsell > h2 { font-size: 18px; }
	.yr-upsell__list { grid-template-columns: 1fr; gap: 12px; }
}