/* =============================================================================
   REMEDA - cart and checkout layer
   -----------------------------------------------------------------------------
   Sits on top of assets/css/brand.css and is linked after it, the same way
   index-refresh.css layers onto the home page.

   WHY THIS FILE EXISTS: the cart and the checkout form were styled almost
   entirely through inline `style=` attributes on the elements themselves.
   Inline attributes outrank every stylesheet, so brand.css could not reach
   them no matter what order it loaded in - which is how the one page where
   trust matters most ended up in cold Bootstrap grey (#f8f9fa panels, #ddd
   borders, #333 labels) while the rest of the site is warm cream and ink.

   The markup now carries classes instead, and the rules live here.

   Stateful inline styles are deliberately left in place: the checkout panel,
   the loyalty row and the discount rows are shown and hidden by reading and
   writing `element.style.display` (korpa.html:1019-1035, 1215-1229), so their
   initial `display` value has to stay on the element.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. Page title
   Was #333 at the browser default h1 size, which rendered enormous and cold.
   -------------------------------------------------------------------------- */
.cart-page-title {
	text-align: center;
	margin-bottom: 0;
	padding-top: 40px;
}
.cart-page-title h1 {
	color: var(--r-ink);
	font-size: 38px;
	font-weight: 700;
	letter-spacing: -0.4px;
	margin-bottom: 0;
	padding-bottom: 18px;
	position: relative;
}
.cart-page-title h1:after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: 44px;
	height: 3px;
	border-radius: 2px;
	background-color: var(--r-honey);
}

/* -----------------------------------------------------------------------------
   2. Layout
   The table, the totals, the buttons and the whole checkout form were stacked
   inside one 800px column, centred in a 1140px container - so on any desktop
   the page was a narrow ribbon with empty gutters either side, and the form
   fields were cramped into half the width they had available.

   Table left, totals right and sticky, checkout full width below.
   -------------------------------------------------------------------------- */
/* The section carries the template's mt-150/mb-150 utilities. 150px under a
   page title that already pads itself is far too much; these are the only two
   places the numbers are used on this page. */
.korpa-page .cart-section.mt-150 { margin-top: 36px !important; }
.korpa-page .cart-section.mb-150 { margin-bottom: 90px !important; }

/* Both tracks are minmax(0, …) rather than a bare fr. A bare `1fr` takes
   min-content as its floor, and the table below sets min-width: 540px on
   narrow screens - so the track refused to shrink past 540px and the whole
   page scrolled sideways at phone widths instead of just the table. */
.korpa-layout {
	display: grid;
	grid-template-columns: minmax(0, 1.65fr) minmax(300px, 1fr);
	gap: 40px;
	align-items: start;
}
.korpa-main { min-width: 0; }

.cart-section .cart-table-wrap {
	width: 100%;
	max-width: none;   /* was 800px - see above */
	margin: 0;
}

.korpa-aside {
	position: sticky;
	top: 110px;   /* clears the fixed header */
}

@media only screen and (max-width: 991px) {
	.korpa-layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}
	.korpa-aside { position: static; }
}

/* -----------------------------------------------------------------------------
   3. Cart table
   brand.css §8 styles `.cart-table table thead`, but this page's markup is
   `<table class="cart-table">` - the thead is not inside a .cart-table, it is
   the .cart-table. That selector never matched, which is why the header row
   stayed on Bootstrap's grey. Fixed at the source in brand.css; the rest of
   the table's presentation is here.
   -------------------------------------------------------------------------- */
.cart-section .cart-table {
	width: 100%;
	table-layout: fixed;
	background: var(--r-white);
	border: 1px solid var(--r-line);
	border-radius: 10px;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	box-shadow: var(--r-shadow-sm);
}

.cart-section .cart-table thead th {
	padding: 15px 12px;
	font-size: 12.5px;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	white-space: nowrap;
}

.cart-section .cart-table tbody td {
	padding: 16px 12px;
	border-top: 1px solid var(--r-line);
	vertical-align: middle;
}
.cart-section .cart-table tbody tr:first-child td { border-top: none; }
.cart-section .cart-table tbody tr { transition: background 0.2s ease; }
.cart-section .cart-table tbody tr:hover { background: var(--r-cream); }

.cart-section .cart-table .product-name {
	color: var(--r-ink);
	font-weight: 600;
	font-size: 14.5px;
	text-align: left;
}
.cart-section .cart-table .product-price { color: var(--r-ink-soft); }

/* The remove control was a bare 12px ✕ with no hit area and no hover state.

   The ✕ column is the narrowest in the table: at 6% of ~660px its content box
   is only about 40px wide, and the 16px/12px cell padding shared with every
   other column left roughly 9px of it for a 30px button. An inline-level box
   that is wider than its line box is laid out from the line's start edge -
   `text-align: center` has no space left to distribute - so the ✕ sat right of
   the column centre. Zero side padding on this one cell, and the button
   centred as a block rather than as inline content. */
.cart-section .cart-table .product-remove {
	padding-left: 0;
	padding-right: 0;
	text-align: center;
}
.cart-section .remove-item {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	margin: 0 auto;
	border-radius: 50%;
	color: var(--r-ink-soft);
	font-size: 15px;
	transition: background 0.2s ease, color 0.2s ease;
}
.cart-section .remove-item:hover {
	background: var(--r-cream-deep);
	color: #B8392C;
}

.cart-section .product-image {
	width: 12%;
	max-width: 80px;
	height: 60px;
	line-height: 0;
	vertical-align: middle;
	box-sizing: border-box;
}
.cart-section .product-image img {
	max-width: 100%;
	max-height: 60px;
	width: auto;
	height: auto;
	object-fit: contain;
	object-position: center;
	display: inline-block;
	vertical-align: middle;
}

/* Per-row price treatment written by renderCart(). */
.cart-price-was {
	text-decoration: line-through;
	color: var(--r-ink-soft);
	font-size: 12px;
	opacity: 0.75;
}
.cart-price-now,
.cart-line-total {
	color: var(--r-amber-text);
	font-weight: 700;
}
.cart-item-name-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
}
.cart-item-saving {
	font-size: 11.5px;
	color: var(--r-success);
	font-weight: 600;
	margin-top: 3px;
}
.cart-badge-akcija {
	background: var(--r-ink);
	color: var(--r-cream);
	padding: 3px 9px;
	border-radius: 999px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.6px;
	white-space: nowrap;
}
/* The discounted row was tinted with a leftover orange gradient. */
.cart-row-akcija { background: rgba(224, 163, 62, 0.07); }
.cart-empty-message {
	text-align: center;
	color: var(--r-ink-soft);
	padding: 40px 12px;
}

/* -----------------------------------------------------------------------------
   4. Totals card
   Was a right-aligned #f8f9fa block with <hr> elements for separators.
   -------------------------------------------------------------------------- */
.cart-total-section {
	background: var(--r-cream);
	border: 1px solid var(--r-line);
	border-radius: 10px;
	padding: 24px;
	text-align: left;
	box-shadow: var(--r-shadow-sm);
}
.cart-total-title {
	font-family: 'Poppins', sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--r-ink-soft);
	margin-bottom: 18px;
}

.summary-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	margin-bottom: 11px;
	font-size: 14px;
	color: var(--r-ink-soft);
}
.summary-row span:last-child {
	color: var(--r-ink);
	font-weight: 600;
	white-space: nowrap;
}
.summary-row--saving,
.summary-row--saving span:last-child { color: var(--r-success); }

/* Replaces the <hr> rules, which were hardcoded #ddd. */
.summary-divider {
	height: 1px;
	background: var(--r-line);
	border: none;
	margin: 16px 0;
}

.final-total-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	font-family: 'Poppins', sans-serif;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.4px;
	color: var(--r-ink);
}
.final-total-row span:last-child {
	font-size: 22px;
	color: var(--r-amber-text);
	white-space: nowrap;
}

/* -----------------------------------------------------------------------------
   5. Action buttons
   Both buttons were identical honey fills, so "continue shopping" and "check
   out" carried exactly the same visual weight. Checkout is the primary action.
   -------------------------------------------------------------------------- */
.cart-action-buttons {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 16px;
	padding: 0;
}

.korpa-btn {
	font-family: 'Poppins', sans-serif;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	width: 100%;
	padding: 14px 22px;
	border-radius: var(--r-radius);
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.korpa-btn--primary {
	background: var(--r-honey);
	border: 2px solid var(--r-honey);
	color: var(--r-ink);
}
.korpa-btn--primary:hover {
	background: var(--r-honey-deep);
	border-color: var(--r-honey-deep);
	color: var(--r-ink);
	transform: translateY(-1px);
}
.korpa-btn--secondary {
	background: transparent;
	border: 2px solid var(--r-line);
	color: var(--r-ink-soft);
}
.korpa-btn--secondary:hover {
	background: var(--r-white);
	border-color: var(--r-amber);
	color: var(--r-amber-text);
}

/* Reassurance under the buttons - the site never stated how you pay, and
   cash on delivery is an advantage here, not a footnote. */
.korpa-reassurance {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--r-line);
	list-style: none;
	padding-left: 0;
}
.korpa-reassurance li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--r-ink-soft);
	margin-bottom: 9px;
}
.korpa-reassurance li:last-child { margin-bottom: 0; }
.korpa-reassurance i {
	color: var(--r-amber);
	font-size: 13px;
	margin-top: 2px;
	flex-shrink: 0;
}

/* -----------------------------------------------------------------------------
   6. Checkout panel
   The whole reason for this file. Was `background-color: #f8f9fa` with #333
   headings, #ddd field borders and a #e8f4fd pale-blue notice - four colours
   from outside the palette, at the exact moment the shopper decides to pay.
   -------------------------------------------------------------------------- */
.checkout-panel {
	margin-top: 40px;
	padding: 32px 40px 34px;
	background: var(--r-cream);
	border: 1px solid var(--r-line);
	border-radius: 10px;
	box-shadow: var(--r-shadow-sm);
}
.checkout-panel-title {
	text-align: center;
	color: var(--r-ink);
	font-size: 26px;
	letter-spacing: -0.3px;
	margin-bottom: 6px;
}
.checkout-panel-lead {
	text-align: center;
	color: var(--r-ink-soft);
	font-size: 14px;
	margin-bottom: 24px;
}

/* The panel runs the full width of the container so it no longer feels boxed
   in, but a 980px-wide address field is a poor target and reads as unfinished.
   The contents stay at a form-shaped measure, centred. */
.order-summary,
#checkout-form {
	max-width: 780px;
	margin-left: auto;
	margin-right: auto;
}

/* Order summary card inside the panel */
.order-summary {
	margin-bottom: 24px;
	padding: 20px 24px;
	background: var(--r-white);
	border: 1px solid var(--r-line);
	border-radius: 8px;
}
.order-summary-title {
	color: var(--r-ink);
	font-size: 16px;
	font-weight: 600;
	margin-bottom: 16px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--r-line);
}
.order-summary-total-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--r-line);
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
	font-size: 14.5px;
	color: var(--r-ink);
}
.order-summary-total-row span:last-child {
	font-size: 19px;
	color: var(--r-amber-text);
	white-space: nowrap;
}
/* Line items written by updateOrderSummary(). */
.summary-line {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	margin-bottom: 11px;
	font-size: 13.5px;
	color: var(--r-ink-soft);
}
.summary-line span:last-child {
	color: var(--r-ink);
	font-weight: 600;
	white-space: nowrap;
}
.summary-line--saving,
.summary-line--saving span:last-child { color: var(--r-success); }

/* Autofill notice - was #e8f4fd on #bee5eb, a pale blue from Bootstrap's
   alert-info and the only blue anywhere on the site. */
.checkout-autofill {
	margin-bottom: 18px;
	padding: 13px 16px;
	background: var(--r-cream-deep);
	border: 1px solid var(--r-line);
	border-radius: 8px;
}
.checkout-autofill-row {
	display: flex;
	align-items: center;
	gap: 10px;
}
.checkout-autofill label {
	margin: 0;
	font-weight: 600;
	color: var(--r-ink);
	cursor: pointer;
	font-size: 14px;
}
.checkout-autofill small {
	display: block;
	margin-top: 7px;
	color: var(--r-ink-soft);
	font-size: 12.5px;
	line-height: 1.5;
}

/* --- Fields ---
   Tight vertical rhythm on purpose: the form is eight fields plus a textarea,
   and at a looser spacing the submit button sat below the fold on a laptop.
   Label to its own input stays closer than field to field, so the pairing
   still reads without needing the extra air. */
.checkout-field { margin-bottom: 13px; }

.checkout-label {
	display: block;
	margin-bottom: 4px;
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	font-size: 12.5px;
	letter-spacing: 0.4px;
	color: var(--r-ink);
}

/* Not named .form-control: Bootstrap already owns that class and would pull
   its own border, height and focus ring back in underneath these rules. */
.checkout-input {
	width: 100%;
	padding: 9px 13px;
	border: 1px solid var(--r-line);
	border-radius: var(--r-radius);
	background: var(--r-white);
	color: var(--r-ink);
	font-family: 'Open Sans', sans-serif;
	font-size: 14.5px;
	line-height: 1.5;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.checkout-input::placeholder { color: #A99276; }
.checkout-input:focus {
	outline: none;
	border-color: var(--r-honey);
	box-shadow: 0 0 0 3px rgba(224, 163, 62, 0.18);
}
/* Two lines by default rather than four - it is an optional field, and it can
   still be dragged taller. */
textarea.checkout-input { resize: vertical; min-height: 68px; }

/* Filled from the account and locked. Was set as an inline #f8f9fa from JS,
   then cleared again by hand on reset. */
.checkout-input:disabled {
	background: var(--r-cream-deep);
	color: var(--r-ink-soft);
	cursor: not-allowed;
}

/* Checkboxes were browser-default blue; accent-color tints them honey with no
   extra markup, and the ink checkmark keeps contrast on the light fill. */
.checkout-panel input[type="checkbox"] {
	width: 18px;
	height: 18px;
	accent-color: var(--r-honey);
	cursor: pointer;
	flex-shrink: 0;
}

.checkout-terms {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	margin-top: 4px;
	margin-bottom: 18px;
}
.checkout-terms label {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--r-ink-soft);
	cursor: pointer;
}
.checkout-terms a {
	color: var(--r-amber-text);
	text-decoration: underline;
	font-weight: 600;
}
.checkout-terms a:hover { color: var(--r-ink); }

.checkout-submit-row {
	text-align: center;
	padding-top: 20px;
	border-top: 1px solid var(--r-line);
}
.checkout-submit-row .korpa-btn {
	width: auto;
	min-width: 260px;
	padding: 15px 40px;
	font-size: 14px;
}
.checkout-submit-note {
	margin: 14px 0 0;
	font-size: 12.5px;
	color: var(--r-ink-soft);
}

/* -----------------------------------------------------------------------------
   7. Toasts
   showNotification() built these with a style.cssText blob plus Bootstrap's
   green / red / teal picked by branch.
   -------------------------------------------------------------------------- */
.korpa-toast {
	position: fixed;
	top: 20px;
	right: 20px;
	z-index: 9999;
	max-width: 320px;
	padding: 14px 20px;
	border-radius: var(--r-radius);
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--r-white);
	box-shadow: var(--r-shadow-lg);
	animation: slideIn 0.3s ease;
}
.korpa-toast--success { background: var(--r-success); }
.korpa-toast--error   { background: #A83226; }
.korpa-toast--info    { background: var(--r-ink); }

/* -----------------------------------------------------------------------------
   8. Responsive
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {
	.cart-page-title { padding-top: 24px; }
	.cart-page-title h1 { font-size: 28px; }

	.checkout-panel { padding: 24px 18px; margin-top: 32px; }
	.checkout-panel-title { font-size: 21px; }
	.order-summary { padding: 18px; }
	.cart-total-section { padding: 20px; }

	.checkout-submit-row .korpa-btn { width: 100%; min-width: 0; }

	/* The old rules forced both buttons onto one row at every width with a
	   stack of !important overrides, which squeezed them to 100px and 12px
	   type. Stacked full-width is the right thumb target. */
	.cart-action-buttons { flex-direction: column; }

	/* Six columns do not fit a phone. The table used to keep its shape at a
	   540px minimum inside a horizontally scrolling wrapper, so on a 412px
	   screen the last two columns - quantity and line total - sat off the edge
	   with nothing to indicate they were there.

	   Below 768px each row becomes a card instead: thumbnail down the left,
	   name and remove control on the first line, price under it, then the
	   stepper and the line total. Everything is on screen, and the wrapper no
	   longer scrolls. The header row is dropped - each value is legible from
	   its own formatting, and repeating six labels per card would cost more
	   room than it earns. */
	.cart-section .cart-table-wrap { width: 100%; overflow-x: visible; }

	.cart-section .cart-table {
		display: block;
		min-width: 0;
		background: none;
		border: none;
		border-radius: 0;
		box-shadow: none;
		overflow: visible;
	}
	.cart-section .cart-table thead { display: none; }
	.cart-section .cart-table tbody { display: block; }

	.cart-section .cart-table tbody tr {
		display: grid;
		/* Third track is `auto`, not 30px: the ✕ and the line total share it,
		   and pinned at the button's width the total wrapped and overflowed. */
		grid-template-columns: 62px minmax(0, 1fr) auto;
		grid-template-areas:
			"image name  remove"
			"image price price"
			"image qty   total";
		align-items: center;
		column-gap: 12px;
		row-gap: 7px;
		margin-bottom: 12px;
		padding: 14px;
		background: var(--r-white);
		border: 1px solid var(--r-line);
		border-radius: 10px;
		box-shadow: var(--r-shadow-sm);
	}
	.cart-section .cart-table tbody tr:last-child { margin-bottom: 0; }
	/* Both of these lose to the card's own background on specificity alone. */
	.cart-section .cart-table tbody tr.cart-row-akcija { background: rgba(224, 163, 62, 0.07); }
	.cart-section .cart-table tbody tr:hover { background: var(--r-cream); }

	.cart-section .cart-table tbody td {
		display: block;
		width: auto;
		padding: 0;
		border: none;
		font-size: 13.5px;
		text-align: left;
	}
	/* renderCart() writes the empty-cart row as a single colspan cell. */
	.cart-section .cart-table tbody td[colspan] {
		grid-column: 1 / -1;
		text-align: center;
	}

	.cart-section .cart-table tbody td.product-image {
		grid-area: image;
		height: auto;
		max-width: none;
	}
	.cart-section .cart-table tbody td.product-image img {
		max-width: 100%;
		max-height: 62px;
	}
	.cart-section .cart-table tbody td.product-name { grid-area: name; font-size: 14px; }
	/* justify-self keeps the ✕ on the card's right edge whatever width the
	   line total gives the track it shares. */
	.cart-section .cart-table tbody td.product-remove {
		grid-area: remove;
		align-self: start;
		justify-self: end;
	}
	.cart-section .cart-table tbody td.product-price { grid-area: price; }
	.cart-section .cart-table tbody td.product-quantity { grid-area: qty; }
	.cart-section .cart-table tbody td.product-total { grid-area: total; text-align: right; }

	/* Centred under a column header on desktop; here it is the left edge of
	   the card's text block, so it lines up with the name and the price. */
	.cart-section .cart-table tbody .quantity-control { justify-content: flex-start; }

	/* On one line on desktop, stacked in the card - the two prices read as a
	   was/now pair either way. */
	.cart-section .cart-table tbody .cart-price-was { display: inline; }
	.cart-section .cart-table tbody .cart-price-now { display: inline; margin-left: 6px; }
}

/* -----------------------------------------------------------------------------
   9. Reduced motion (the global reset lives in brand.css)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.korpa-btn--primary:hover { transform: none; }
}