/**
 * Cart + checkout layout (PCO child theme)
 * Fixes: flex min-width overflow, nested scroll vs page scroll, mobile stacking.
 */

/* —— Cart two-column shell —— */
.pco-cart-layout.custom-cart-layout {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(1rem, 3vw, 1.75rem);
	align-items: flex-start;
	margin-top: 1.25rem;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	overflow: visible;
}

.pco-cart-layout .order-section,
.pco-cart-layout .total-section {
	min-width: 0;
	box-sizing: border-box;
}

.pco-cart-layout .order-section {
	flex: 1 1 100%;
}

.pco-cart-layout .total-section {
	flex: 1 1 100%;
	border: 1px solid #ddd;
	padding: 0 clamp(12px, 3vw, 20px) 1rem;
	background: #fff;
	border-radius: 8px;
}

@media (min-width: 981px) {
	.pco-cart-layout .order-section {
		flex: 1 1 63%;
		max-width: calc(63% - 0.5rem);
	}

	.pco-cart-layout .total-section {
		flex: 1 1 35%;
		max-width: calc(35% - 0.5rem);
		position: sticky;
		top: calc(var(--wp-admin--admin-bar--height, 0px) + 1rem);
		align-self: flex-start;
	}
}

/*
 * Cart table: on small screens WooCommerce’s .shop_table_responsive stacks rows (thead hidden).
 * A fixed min-width + overflow-x:auto on this wrapper breaks that and creates a nested
 * horizontal scroll — the “header half screen / weird scroll” report.
 */
.pco-cart-table-scroll {
	max-width: 100%;
	margin-bottom: 0.5rem;
	overflow-x: visible;
	overflow-y: visible;
}

.pco-cart-table-scroll .shop_table.cart {
	width: 100%;
	min-width: 0;
	margin-bottom: 0;
}

/* Desktop: allow gentle horizontal scroll only if the table is genuinely wider than the column */
@media (min-width: 769px) {
	.pco-cart-table-scroll {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-x: contain;
	}

	.pco-cart-table-scroll .shop_table.cart {
		min-width: 560px;
	}
}

/* Beaver Builder: stop columns/rows from clipping the cart or creating inner scroll traps */
body.woocommerce-cart .fl-page-content,
body.woocommerce-cart .fl-post-content,
body.woocommerce-cart .fl-module-content,
body.woocommerce-cart .fl-rich-text,
body.woocommerce-cart .fl-row-content-wrap,
body.woocommerce-cart .fl-row-content,
body.woocommerce-cart .fl-content,
body.woocommerce-cart .fl-col,
body.woocommerce-cart .fl-col-content {
	overflow-x: visible;
	
}

.fl-page-content .pco-cart-layout,
.fl-page-content .woocommerce .pco-cart-layout {
	overflow: visible;
	max-width: 100%;
}

@media (max-width: 768px) {
	body.woocommerce-cart .fl-row.fl-row-fixed-width .fl-row-content-wrap,
	body.woocommerce-cart .fl-row.fl-row-fixed-width .fl-row-content {
		padding-left: 0;
		padding-right: 0;
	}
}

/* Thumbnails in cart; mobile caps size so the row stays readable. */
.pco-cart-layout .order-section .product-thumbnail img {
	width: auto !important;
	max-width: 72px !important;
	height: auto !important;
	vertical-align: middle;
}

@media (min-width: 769px) {
	.pco-cart-layout .order-section .product-thumbnail img {
		max-width: 90px !important;
	}
}

/*
 * Mobile cart table — responsive stack like WooCommerce .shop_table_responsive, with tweaks:
 * thead hidden, full-width cells, label above value (not floated), thumbnail visible and capped.
 *
 * @see wp-content/plugins/woocommerce/assets/css/woocommerce-smallscreen.css
 */
@media screen and (max-width: 768px) {
	body.woocommerce-cart .pco-cart-layout table.shop_table_responsive.cart.woocommerce-cart-form__contents thead {
		display: none;
	}

	body.woocommerce-cart .pco-cart-layout table.shop_table_responsive.cart.woocommerce-cart-form__contents tbody th {
		display: none;
	}

	body.woocommerce-cart .pco-cart-layout table.shop_table_responsive.cart.woocommerce-cart-form__contents tr {
		display: block;
	}

	body.woocommerce-cart .pco-cart-layout table.shop_table_responsive.cart.woocommerce-cart-form__contents tbody tr:first-child td:first-child {
		border-top: 0;
	}

	body.woocommerce-cart .pco-cart-layout table.shop_table_responsive.cart.woocommerce-cart-form__contents tr td {
		display: block;
		text-align: left !important;
		box-sizing: border-box;
		width: 100% !important;
		max-width: 100% !important;
		padding: 0.6em 0.5em;
	}

	body.woocommerce-cart .pco-cart-layout table.shop_table_responsive.cart.woocommerce-cart-form__contents tr td::before {
		content: attr(data-title) ": ";
		display: block;
		font-weight: 700;
		margin-bottom: 0.35em;
		text-align: left;
		float: none;
		width: 100%;
	}

	body.woocommerce-cart .pco-cart-layout table.shop_table_responsive.cart.woocommerce-cart-form__contents tr td.product-remove::before,
	body.woocommerce-cart .pco-cart-layout table.shop_table_responsive.cart.woocommerce-cart-form__contents tr td.actions::before,
	body.woocommerce-cart .pco-cart-layout table.shop_table_responsive.cart.woocommerce-cart-form__contents tr td.product-thumbnail::before {
		display: none;
	}

	body.woocommerce-cart .pco-cart-layout table.shop_table_responsive.cart .product-thumbnail {
		display: block !important;
		text-align: center;
		padding-top: 0.5em;
		padding-bottom: 0.15em;
	}

	body.woocommerce-cart .pco-cart-layout table.shop_table_responsive.cart .product-thumbnail img {
		display: inline-block;
		max-width: 100px !important;
		max-height: 120px;
		width: auto !important;
		height: auto !important;
	}

	body.woocommerce-cart .pco-cart-layout table.shop_table_responsive.cart.woocommerce-cart-form__contents tr td.product-name a {
		word-break: normal;
		overflow-wrap: anywhere;
		hyphens: manual;
	}

	body.woocommerce-cart .pco-cart-layout table.shop_table_responsive.cart.woocommerce-cart-form__contents tr:nth-child(even) td {
		background-color: rgba(0, 0, 0, 0.025);
	}

	body.woocommerce-cart .pco-cart-layout table.shop_table_responsive.cart.woocommerce-cart-form__contents tr td.actions {
		text-align: left !important;
	}

	body.woocommerce-cart .pco-cart-layout table.shop_table_responsive.cart.woocommerce-cart-form__contents tr td.actions > .button[name="update_cart"] {
		display: none;
	}

	body.woocommerce-cart .pco-cart-layout table.shop_table_responsive.cart.woocommerce-cart-form__contents tr td.product-remove {
		text-align: center !important;
	}
}

/* Do not force table-cell on mobile — Woo stacks .shop_table_responsive cells as blocks. */
@media (min-width: 769px) {
	.pco-cart-layout td.actions {
		display: table-cell;
	}
}

button.pco-cart-update-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	border: 0 !important;
}

@media (min-width: 769px) {
	.pco-cart-layout .woocommerce-cart-form__contents th,
	.pco-cart-layout .woocommerce-cart-form__contents td {
		padding: 8px 6px;
		text-align: center;
		font-size: 14px;
		vertical-align: middle;
	}

	.pco-cart-layout .woocommerce-cart-form__contents .product-name {
		text-align: left;
	}
}

/* Related products */
.related-products-cart {
	margin-top: 2rem;
}

.related-products-scroll {
	max-width: 100%;
	overflow-x: visible;
}

.related-products-cart table.related-products-table {
	width: 100%;
	min-width: 0;
	border-collapse: collapse;
}

@media (min-width: 769px) {
	.related-products-scroll {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-x: contain;
	}

	.related-products-cart table.related-products-table {
		min-width: 480px;
	}
}

.related-products-cart th,
.related-products-cart td {
	padding: 8px;
	text-align: center;
	vertical-align: middle;
}

.related-products-cart table.related-products-table td img,
.related-products-cart img {
	max-width: 60px;
	width: auto;
	height: auto;
	display: block;
	margin: 0 auto;
}

.related-products-cart .button {
	display: inline-block;
	white-space: normal;
	padding: 10px 14px;
	font-size: 14px;
	line-height: 1.2;
	max-width: 100%;
}

.shop_table.related-products-table .button {
	background: transparent !important;
	color: #1781bf !important;
	font-size: 14px !important;
}

/* Mobile: one type scale for image / title / price / button so rows feel even */
@media (max-width: 768px) {
	.related-products-cart table.related-products-table {
		font-size: 0.8125rem; /* 13px — shared base */
		line-height: 1.35;
	}

	.related-products-cart table.related-products-table th,
	.related-products-cart table.related-products-table td {
		font-size: inherit;
		padding: 6px 6px;
	}

	.related-products-cart table.related-products-table td img,
	.related-products-cart table.related-products-table img {
		max-width: 52px !important;
		width: auto !important;
		height: auto !important;
	}

	.related-products-cart table.related-products-table td a:not(.button) {
		font-size: inherit;
		font-weight: 600;
		line-height: inherit;
	}

	.related-products-cart table.related-products-table .woocommerce-Price-amount {
		font-size: inherit;
		font-weight: 600;
	}

	.related-products-cart .button,
	.shop_table.related-products-table .button {
		font-size: inherit !important;
		line-height: 1.3 !important;
		padding: 8px 10px !important;
	}
}

@media (max-width: 480px) {
	.related-products-cart table.related-products-table {
		font-size: 0.75rem; /* 12px on very narrow screens */
	}

	.related-products-cart table.related-products-table td img,
	.related-products-cart table.related-products-table img {
		max-width: 44px !important;
	}
}

/* Cart totals heading */
.total-section .cart_totals h3 {
	color: #136c9f;
	font-size: 1.15rem;
	font-weight: 700;
	margin: 1rem 0 0.75rem;
}

.total-section .shop_table.shop_table_responsive th,
.total-section .shop_table.shop_table_responsive td {
	font-size: 16px;
}

.secure-checkout-message {
	text-align: center;
	margin-top: 1.75rem;
	padding: 15px;
	font-size: 14px;
	color: #28a745;
	background-color: #f6f9f7;
	border: 1px solid #e8ece9;
	border-radius: 6px;
	font-weight: 500;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
	clear: both;
}

/* Coupon block in cart totals (mirrors prior inline styles) */
.total-section .woocommerce-form-coupon {
	margin: 1em 0;
}

.total-section .woocommerce-form-coupon .checkout_coupon .form-row {
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
}

.total-section .woocommerce-form-coupon input.input-text {
	padding: 8px 10px;
	font-size: 14px;
	flex: 1 1 140px;
	min-width: 0;
	max-width: 100%;
	border: 1px solid #ccc;
	border-radius: 4px;
}

.total-section .woocommerce-form-coupon button.button {
	padding: 8px 14px;
	font-size: 14px;
	background-color: #136c9f;
	color: #fff;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	white-space: nowrap;
}

.total-section .woocommerce-form-coupon button.button:hover {
	background-color: #0f567f;
}

/* Heading styles inside WooCommerce module */
div.woocommerce .pco-cart-layout ~ h2,
.related-products-cart h2,
div.woocommerce .cart_totals ~ h3 {
	font-size: clamp(1.1rem, 2.5vw, 1.35rem);
	text-transform: uppercase;
	color: #414a51;
}

/* —— Checkout (form-checkout col3-set) —— */
.pco-checkout-cols.col3-set {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(1rem, 3vw, 2rem);
	margin-bottom: 2rem;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	overflow: visible;
}

.pco-checkout-cols .col-1,
.pco-checkout-cols .col-2 {
	min-width: 0;
	flex: 1 1 100%;
	box-sizing: border-box;
}

@media (min-width: 981px) {
	.pco-checkout-cols .col-1 {
		flex: 1 1 48%;
		max-width: calc(52% - 1rem);
	}

	.pco-checkout-cols .col-2 {
		flex: 1 1 48%;
		max-width: calc(48% - 1rem);
		position: sticky;
		top: calc(var(--wp-admin--admin-bar--height, 0px) + 1rem);
		align-self: flex-start;
	}
}

.pco-checkout-cols #order_review.woocommerce-checkout-review-order {
	width: 100%;
	max-width: 100%;
	overflow: visible;
}