/*
 * Oviokart — WooCommerce Blocks button styling ONLY
 *
 * WooCommerce Blocks ship with a complex internal layout (absolute-positioned
 * radio buttons, nested sidebar grids, etc.). The previous version of this
 * file overrode padding/border/sidebar styling and broke that layout —
 * this version is minimal by design. We ONLY style the two primary action
 * buttons the user asked about (Proceed to Checkout, Place Order).
 *
 * Anything else we want to restyle should be added back ONE selector at a
 * time, tested, and confirmed not to break the underlying Block layout.
 */

/* ============================================================
   PRIMARY ACTION BUTTONS
   - Proceed to Checkout (cart page)
   - Place Order (checkout page)
   ============================================================ */
.wp-block-woocommerce-proceed-to-checkout-block .wc-block-cart__submit-button,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
button.wc-block-components-checkout-place-order-button {
	background: #0050cc !important;
	background-color: #0050cc !important;
	color: #ffffff !important;
	font-family: 'Hanken Grotesk', system-ui, -apple-system, sans-serif !important;
	font-weight: 700 !important;
	font-size: 15px !important;
	letter-spacing: 0.04em !important;
	padding: 14px 24px !important;
	border-radius: 4px !important;
	border: none !important;
	width: 100% !important;
	text-transform: none !important;
	text-align: center !important;
	cursor: pointer !important;
	transition: background-color 0.2s ease, box-shadow 0.2s ease !important;
	box-shadow: 0 2px 4px rgba(0, 53, 95, 0.15) !important;
	min-height: 48px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	text-decoration: none !important;
}
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
	background-color: #0266ff !important;
	box-shadow: 0 4px 10px rgba(0, 53, 95, 0.25) !important;
}
.wc-block-components-checkout-place-order-button:disabled,
.wc-block-components-checkout-place-order-button[disabled] {
	background-color: #c2c7d1 !important;
	color: #ffffff !important;
	cursor: not-allowed !important;
	box-shadow: none !important;
}

/* Larger tap target on mobile */
@media (max-width: 768px) {
	.wc-block-cart__submit-button,
	.wc-block-components-checkout-place-order-button {
		min-height: 52px !important;
		font-size: 16px !important;
	}
}

/* ============================================================
   CHECKOUT PAGE LAYOUT — make the whole page use full width
   The default WC Block checkout constrains the page to a narrow
   content area (~720px) and splits it 50/50 between form and
   summary. That leaves the summary ~340px wide — too cramped for
   product names. We override the page to use the theme container
   (1280px) and give the summary a fixed 380px column on desktop.
   ============================================================ */
.wp-block-woocommerce-checkout {
	max-width: 1280px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 16px !important;
	padding-right: 16px !important;
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) 380px !important;
	gap: 32px !important;
	align-items: start !important;
}

.wp-block-woocommerce-checkout-fields-block {
	min-width: 0 !important;       /* Lets grid column shrink instead of overflowing */
	width: 100% !important;
	max-width: none !important;
	flex: none !important;
}

.wp-block-woocommerce-checkout-totals-block {
	min-width: 0 !important;
	width: 380px !important;
	max-width: 380px !important;
	flex: none !important;
	position: sticky !important;
	top: 100px !important;
}

/* Tablet — break the side-by-side at 1024px and stack */
@media (max-width: 1023px) {
	.wp-block-woocommerce-checkout {
		grid-template-columns: 1fr !important;
		gap: 24px !important;
	}
	.wp-block-woocommerce-checkout-totals-block {
		width: 100% !important;
		max-width: none !important;
		position: static !important;
	}
}

/* ============================================================
   CART PAGE LAYOUT — same treatment for consistency
   ============================================================ */
.wp-block-woocommerce-cart {
	max-width: 1280px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 16px !important;
	padding-right: 16px !important;
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) 380px !important;
	gap: 32px !important;
	align-items: start !important;
}
.wp-block-woocommerce-cart-items-block {
	min-width: 0 !important;
	width: 100% !important;
	max-width: none !important;
	flex: none !important;
}
.wp-block-woocommerce-cart-totals-block {
	min-width: 0 !important;
	width: 380px !important;
	max-width: 380px !important;
	flex: none !important;
}
@media (max-width: 1023px) {
	.wp-block-woocommerce-cart {
		grid-template-columns: 1fr !important;
		gap: 24px !important;
	}
	.wp-block-woocommerce-cart-totals-block {
		width: 100% !important;
		max-width: none !important;
	}
}

/* ============================================================
   ORDER SUMMARY ITEMS — clean grid layout inside the wider sidebar
   ============================================================ */
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary-item,
.wc-block-components-order-summary-item {
	display: grid !important;
	grid-template-columns: 64px 1fr auto !important;
	gap: 12px !important;
	align-items: start !important;
	padding: 12px 0 !important;
	border-bottom: 1px solid #e4e2e1 !important;
}

/* Image column */
.wc-block-components-order-summary-item__image,
.wc-block-components-order-summary-item__image > * {
	width: 64px !important;
	height: 64px !important;
	flex: 0 0 64px !important;
	position: relative !important;
}
.wc-block-components-order-summary-item__image img {
	width: 64px !important;
	height: 64px !important;
	object-fit: cover !important;
	border-radius: 4px !important;
	border: 1px solid #e4e2e1 !important;
}

/* Quantity badge — overlay top-right of the image as a circle.
   The default WC Blocks layout renders this as a tall pill that spans
   multiple grid rows in our wider checkout — explicit overrides force it
   into a clean 22px circle anchored to the image corner. */
.wc-block-components-order-summary-item__quantity {
	position: absolute !important;
	top: -8px !important;
	right: -8px !important;
	left: auto !important;
	bottom: auto !important;
	width: 22px !important;
	height: 22px !important;
	min-width: 22px !important;
	min-height: 22px !important;
	max-width: 22px !important;
	max-height: 22px !important;
	padding: 0 !important;
	margin: 0 !important;
	border-radius: 50% !important;
	background: #00355f !important;
	color: #ffffff !important;
	font-family: 'Hanken Grotesk', system-ui, sans-serif !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	line-height: 22px !important;
	text-align: center !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	z-index: 2 !important;
	box-shadow: 0 0 0 2px #ffffff !important;
}

/* Description column — gets all flexible width */
.wc-block-components-order-summary-item__description {
	min-width: 0 !important;
	overflow: hidden !important;
	padding-right: 8px !important;
}

/* Product NAME — readable, wraps cleanly across 2-3 lines */
.wc-block-components-order-summary-item__title,
.wc-block-components-product-name {
	font-family: 'Hanken Grotesk', system-ui, sans-serif !important;
	font-size: 14px !important;
	line-height: 18px !important;
	font-weight: 600 !important;
	color: #1b1c1c !important;
	word-break: normal !important;
	overflow-wrap: break-word !important;
	display: block !important;   /* Override the line-clamp from before */
	-webkit-line-clamp: unset !important;
	-webkit-box-orient: unset !important;
}

/* Long product description — hide it from the summary entirely (keeps panel clean) */
.wc-block-components-product-metadata__description,
.wc-block-components-order-summary-item__description .wc-block-components-product-metadata {
	display: none !important;
}

/* Price column */
.wc-block-components-order-summary-item__total-price,
.wc-block-components-order-summary-item__individual-prices {
	white-space: nowrap !important;
	text-align: right !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	color: #00355f !important;
	min-width: 80px !important;
}
.wc-block-components-product-price__regular {
	font-size: 12px !important;
	color: #42474f !important;
	display: block !important;
	font-weight: 400 !important;
}

/* Sale badge */
.wc-block-components-sale-badge {
	font-size: 11px !important;
	padding: 2px 6px !important;
	margin-top: 4px !important;
	display: inline-block !important;
	background: #dae1ff !important;
	color: #001849 !important;
}

/* Sidebar container styling — clean panel look */
.wp-block-woocommerce-checkout-order-summary-block,
.wc-block-cart__sidebar {
	background: #ffffff !important;
	border: 1px solid #c2c7d1 !important;
	border-radius: 12px !important;
	padding: 20px !important;
}

/* Mobile — even tighter */
@media (max-width: 480px) {
	.wc-block-components-order-summary-item {
		grid-template-columns: 56px 1fr auto !important;
		gap: 10px !important;
	}
	.wc-block-components-order-summary-item__image,
	.wc-block-components-order-summary-item__image > *,
	.wc-block-components-order-summary-item__image img {
		width: 56px !important;
		height: 56px !important;
		flex: 0 0 56px !important;
	}
	.wc-block-components-order-summary-item__title {
		font-size: 13px !important;
		line-height: 17px !important;
	}
}