/* ============================================================================
   gryphon-replica — cart.css
   Measured: RECON-DESIGN §13. Keeps the full site header and footer; the
   distraction-free chrome starts at checkout, not here.
   ========================================================================= */
.gr-cart { margin: 0 0 40px; }

/* ⚠ woocommerce.css's table chrome outranks a single class.
   `.woocommerce table.shop_table` is (0,2,1) with a border, a radius and
   border-collapse:separate, plus 1px rules on every th/td. A bare `.gr-cart-table`
   is (0,1,0) and LOSES — which draws a rounded grey box round the header row and
   each item, and any oversized thumbnail then punches out through it. Prefix the
   resets with the body class and .woocommerce to match on specificity. */
.woocommerce table.shop_table.gr-cart-table {
	border: 0;
	border-radius: 0;
	border-collapse: collapse;
	width: 100%;
	margin: 0 0 18px;
}
.woocommerce table.shop_table.gr-cart-table th,
.woocommerce table.shop_table.gr-cart-table td {
	border: 0;
	border-bottom: 1px solid #e3e0da;
	padding: 16px 10px;
	vertical-align: middle;
}
.woocommerce table.shop_table.gr-cart-table thead th {
	font-family: var(--font-family);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--color-heading);
	text-align: left;
	padding-bottom: 10px;
}
.gr-cart-table .product-thumbnail { width: 90px; }
.gr-cart-table .product-thumbnail img { width: 80px; height: auto; display: block; }
.gr-cart-title { font-weight: 700; color: var(--color-heading); font-size: 15px; }
.gr-cart-title:hover { color: var(--color-primary); }
/* the source puts the variant on its OWN line, not inline after the name */
.gr-cart-variant { display: block; margin-top: 4px; font-size: 13px; color: #8c8a88; }
.gr-cart-variant p { margin: 0; }
.gr-cart-table .product-price,
.gr-cart-table .product-subtotal { white-space: nowrap; font-size: 15px; }
.gr-cart-table .product-remove { width: 40px; text-align: right; }
/* The remove control, MEASURED from the source (styles.css):
 *     .table-shopping-remove { width:18px; height:18px; opacity:.3 }
 *     ...:before, ...:after   { left:8px; content:" "; height:19px; width:2px; background:#333 }
 *     ...:before { rotate(45deg) }   ...:after { rotate(-45deg) }
 *
 * So the source DRAWS its X from two rotated bars - it is not a character. Ours printed the HTML
 * entity × in a bordered circle, which is why it read as a small red x: WooCommerce core
 * ships `.woocommerce a.remove { color: red !important; font-size: 1.5em; width: 1em; height: 1em }`
 * and that beat our colour outright and shrank the box.
 *
 * ⚠ font-size:0 is what removes the × glyph. The link still needs its text content for the
 * no-CSS case and its aria-label does the announcing, so the character is hidden rather than
 * deleted from the markup.
 *
 * ⚠ Beaten on SPECIFICITY, not with !important. Woo's rule is (0,2,1); the selector below is
 * (0,4,1), so it wins on every property except `color`, which carries !important upstream - and
 * colour no longer matters here because the bars are drawn with background-color. */
.woocommerce .gr-cart .gr-cart-table a.remove.gr-cart-remove,
.gr-cart-remove {
	position: relative;
	display: block;
	width: 18px;
	height: 18px;
	opacity: .3;
	font-size: 0;            /* kills the × character */
	line-height: 0;
	border: 0;
	border-radius: 0;
	background: none;
	text-decoration: none;
}
.gr-cart-remove::before,
.gr-cart-remove::after {
	content: " ";
	position: absolute;
	top: 0;
	left: 8px;
	width: 2px;
	height: 19px;
	background-color: #333;
}
.gr-cart-remove::before { transform: rotate(45deg); }
.gr-cart-remove::after  { transform: rotate(-45deg); }

/* The source gives no hover state, but a control at opacity .3 with no feedback reads as disabled.
   Darkening on hover/focus is the smallest honest addition; the geometry is untouched. */
.woocommerce .gr-cart .gr-cart-table a.remove.gr-cart-remove:hover,
.woocommerce .gr-cart .gr-cart-table a.remove.gr-cart-remove:focus-visible,
.gr-cart-remove:hover,
.gr-cart-remove:focus-visible { opacity: .75; background: none; }

/* qty stepper — same 99x43 / 6px-radius box as the PDP */
.gr-cart-table .quantity {
	display: inline-flex; align-items: center;
	width: 99px; height: 43px;
	border: 1px solid rgb(237, 237, 237); border-radius: 6px; overflow: hidden;
}
.gr-cart-table .quantity input.qty {
	width: 100%; height: 100%; border: 0; text-align: center;
	font-family: var(--font-family); font-weight: 700; font-size: 16px;
	color: var(--color-heading); background: #fff; -moz-appearance: textfield;
}
.gr-cart-table .quantity input.qty::-webkit-outer-spin-button,
.gr-cart-table .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.gr-cart-table td.actions { border-bottom: 0; padding-left: 0; }
.woocommerce .gr-cart-table td.actions .gr-cart-update {
	background: #fff; color: var(--color-heading);
	border: 1px solid #ccc; border-radius: 45px;
	padding: 10px 22px;
	font-family: var(--font-family); font-size: 13px; font-weight: 700;
	text-transform: uppercase; letter-spacing: 1px;
}
.woocommerce .gr-cart-table td.actions .gr-cart-update[disabled] { opacity: .45; cursor: default; }

/* order notes */
.gr-cart-note { margin: 0 0 28px; }
.gr-cart-note-toggle {
	background: none; border: 0; padding: 0; cursor: pointer;
	font-family: var(--font-family); font-size: 14px; font-weight: 700;
	color: var(--color-primary); text-decoration: underline;
}
.gr-cart-note-body textarea {
	width: 100%; max-width: 520px; margin-top: 10px; padding: 10px 12px;
	border: 1px solid #ddd; font-family: var(--font-family); font-size: 14px;
}

/* totals */
.gr-cart-collaterals { display: flex; justify-content: flex-end; }
.gr-cart-totals { width: 100%; max-width: 380px; }
.woocommerce table.shop_table.gr-totals-table { border: 0; border-radius: 0; width: 100%; }
.woocommerce table.shop_table.gr-totals-table th,
.woocommerce table.shop_table.gr-totals-table td {
	border: 0; border-bottom: 1px solid #e3e0da; padding: 12px 0; font-size: 15px;
}
.woocommerce table.shop_table.gr-totals-table th { text-align: left; font-weight: 400; color: var(--color-body); }
.woocommerce table.shop_table.gr-totals-table td { text-align: right; font-weight: 700; color: var(--color-heading); }
.gr-totals-table .order-total th, .gr-totals-table .order-total td { font-size: 17px; }

.gr-min-order-notice {
	margin: 12px 0 0; padding: 10px 12px;
	background: #fdf3e7; border-left: 3px solid var(--color-primary);
	font-size: 14px; color: var(--color-heading);
}

/* ⚠ CTA is SOLID BRAND ORANGE — the INVERSE of the PDP's transparent outlined pill.
   Woo's `.woocommerce :where(body:not(...)) a.button` computes at (0,2,1) and would
   otherwise repaint this as its own grey/purple pill, so the override matches on
   specificity rather than using !important. */
.gr-proceed { margin-top: 20px; text-align: right; }
.woocommerce .gr-proceed a.checkout-button.gr-checkout-btn,
.gr-proceed a.gr-checkout-btn {
	display: inline-block;
	width: 170px;
	padding: 15px 25px;
	background: rgb(225, 96, 32);
	background-color: rgb(225, 96, 32);
	color: rgb(255, 255, 255);
	border: none;
	border-radius: 45px;
	font-family: var(--font-family);
	font-weight: 700;
	font-size: 14px;
	line-height: 14px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	text-align: center;
}
.woocommerce .gr-proceed a.checkout-button.gr-checkout-btn:hover,
.gr-proceed a.gr-checkout-btn:hover {
	background: var(--color-primary-darken-10);
	background-color: var(--color-primary-darken-10);
	color: #fff;
}

@media (max-width: 767px) {
	.gr-cart .gr-cart-table thead { display: none; }
	.gr-cart .gr-cart-table,
	.gr-cart .gr-cart-table tbody,
	.gr-cart .gr-cart-table tr,
	.gr-cart .gr-cart-table td { display: block; width: 100%; }
	.gr-cart .gr-cart-table tr { border-bottom: 1px solid #e3e0da; padding: 12px 0; position: relative; }
	.woocommerce .gr-cart .gr-cart-table td { border: 0; padding: 4px 0; text-align: left; }
	.gr-cart .gr-cart-table td[data-title]::before {
		content: attr(data-title) ": ";
		font-weight: 700; color: var(--color-heading); font-size: 12px;
		text-transform: uppercase; letter-spacing: .05em;
	}
	/* MEASURED from the source's own @media(max-width:767px):
	       .table-shopping-remove { position:absolute; top:0; right:0; padding:20px; box-sizing:content-box }
	       .table-shopping-remove:before, :after { left:27px }
	   18px + 20px padding each side = a 58x58 tap target pinned to the row's top-right corner. Ours
	   sat at top:12px with no padding, so it was a bare 18px hit area sitting ON the product title. */
	.gr-cart .gr-cart-table .product-remove {
		position: absolute; top: 0; right: 0; width: auto; padding: 0; z-index: 2;
	}
	.woocommerce .gr-cart .gr-cart-table a.remove.gr-cart-remove,
	.gr-cart .gr-cart-table .product-remove .gr-cart-remove {
		padding: 20px;
		box-sizing: content-box;
	}
	.gr-cart .gr-cart-table .product-remove .gr-cart-remove::before,
	.gr-cart .gr-cart-table .product-remove .gr-cart-remove::after { left: 27px; top: 20px; }

	/* ⚠ And the row has to make ROOM for it. The control is absolutely positioned, so it is out of
	   flow and a long product title runs straight underneath - which is exactly what the screenshot
	   showed ("Martin 00L-16E Black Smoke" with the X sitting on top of the word). 58px of control
	   plus a little breathing room. */
	/* ⚠ !important here is beating an upstream !important, which is the only reason to use it.
	   WooCommerce's woocommerce-smallscreen.css ships
	       .woocommerce table.shop_table_responsive tr td { display:block; text-align:right!important }
	   and the cell's padding arrives through the same responsive chain. Our table carries
	   `shop_table_responsive` (cart.php line 43), so those rules apply. A plain declaration here is
	   (0,3,1) and still loses to an !important one however specific it is.

	   70px, not 58: the control is 58 wide and the name is RIGHT-aligned by the rule above, so the
	   last line ends exactly at the cell's inner edge. 58 alone leaves the text touching the X. */
	.gr-cart .gr-cart-table td.product-name { padding-right: 70px !important; }
	.gr-cart .gr-cart-collaterals { display: block; }
	.gr-cart .gr-cart-totals { max-width: none; }
	.gr-cart .gr-proceed { text-align: center; }
	.gr-cart .gr-proceed a.gr-checkout-btn { width: 100%; }
}

/* =========================================================================
   EMPTY cart — the source's band is 504px tall at every breakpoint, with the
   icon, the line of copy and the button stacked and centred in it.
   See woocommerce/cart/cart-empty.php for the measurements.
   ========================================================================= */
.gr-cart-empty {
	min-height: 380px;        /* + the h1 band and page padding = the source's 504 */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 24px;
}
.gr-cart-empty-icon svg {
	width: 72px;
	height: auto;
	fill: var(--color-heading, #63584c);
	opacity: .55;
}
.gr-cart-empty-title {
	margin: 0;
	font-size: 1.8rem;
}
.gr-cart-empty-btn {
	padding: 15px 30px;
	font-size: 1.6rem;
}