/**
 * Mobile tuning for the Blocksy quick view modal (product card eye icon).
 * Desktop layout is untouched -- everything lives inside the <= 767px query.
 *
 * Problems this addresses on phones:
 *  - 35px panel padding left only 320px of content on a 390px screen
 *  - the gallery filled the first ~430px of the modal, pushing the price and
 *    the cart options out of sight
 *  - desktop type scale (30px title / 20px body) inside a 320px column
 *  - the summary rows wrapped monetary values mid-number (NGN uses a space
 *    as thousands separator, e.g. "59 184.83")
 *  - quantity + "Buy now" + "Add to cart" were forced onto one row, so the
 *    button labels broke into three lines
 *  - the floating currency switcher / buy-now bubble sat on top of the modal
 *    because their z-index is 2147483647
 */

@media (max-width: 767.98px) {

	/* ---------- 1. Modal shell: near full screen ---------- */

	.quick-view-modal {
		--panel-padding: 10px;
	}

	.quick-view-modal .ct-panel-content {
		padding: var(--panel-padding);
	}

	.quick-view-modal .ct-quick-view-card {
		max-height: 94vh;
		max-height: 94dvh;
		border-radius: 14px;
	}

	/* Close button: solid pill so it stays readable over text and photos. */
	.quick-view-modal .ct-toggle-close {
		--toggle-button-top: 10px;
		--toggle-button-inset-end: 10px;
		--toggle-button-size: 34px;
		--theme-icon-size: 11px;

		border-radius: 100%;
		background: rgba(255, 255, 255, 0.94);
		box-shadow: 0 1px 6px rgba(0, 0, 0, 0.18);
	}

	.quick-view-modal .ct-toggle-close:not(:hover) svg {
		opacity: 0.85;
	}

	/* ---------- 2. Gallery: a banner, not a full screen ---------- */

	.quick-view-modal .woocommerce-product-gallery {
		max-height: 200px;
		overflow: hidden;
		background: #f7f7f7;
	}

	.quick-view-modal .woocommerce-product-gallery .flexy-view,
	.quick-view-modal .woocommerce-product-gallery .flexy-items,
	.quick-view-modal .woocommerce-product-gallery .flexy-item {
		height: 200px !important;
		overflow: hidden;
	}

	.quick-view-modal .woocommerce-product-gallery img {
		width: 100%;
		height: 200px;
		object-fit: contain;
		object-position: center;
	}

	.quick-view-modal .woocommerce-product-gallery .flexy-pills {
		bottom: 10px;
	}

	/* ---------- 3. Summary column type scale ---------- */

	.quick-view-modal .ct-quick-view-card .entry-summary {
		padding: 16px 15px 20px;
	}

	.quick-view-modal .ct-quick-view-card .product_title {
		font-size: 19px;
		line-height: 1.35;
		margin-bottom: 8px;
	}

	.quick-view-modal .ct-quick-view-card .price {
		font-size: 19px;
		line-height: 1.3;
		margin-bottom: 12px;
	}

	.quick-view-modal .ct-quick-view-card .woocommerce-product-details__short-description {
		font-size: 14px;
		line-height: 1.6;
		margin-bottom: 14px;
	}

	.quick-view-modal .ct-quick-view-card .woocommerce-product-details__short-description p:last-child {
		margin-bottom: 0;
	}

	/* Bulk discount table scrolls instead of stretching the modal. */
	.quick-view-modal .ct-quick-view-card .awdr-bulk-customizable-table {
		overflow-x: auto;
		font-size: 13px;
		margin-bottom: 14px;
	}

	/* ---------- 4. Product options (WPC Product Options) ---------- */

	.quick-view-modal .ct-quick-view-card .wpcpo-option-name strong {
		font-size: 15px;
	}

	.quick-view-modal .ct-quick-view-card .wpcpo-option-description {
		font-size: 13px;
		line-height: 1.55;
		margin-bottom: 8px;
	}

	.quick-view-modal .ct-quick-view-card .wpcpo-option-form label {
		display: inline-flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 6px;
		font-size: 15px;
	}

	.quick-view-modal .ct-quick-view-card .wpcpo-option-form label .label-price {
		font-size: 13px;
		opacity: 0.8;
	}

	.quick-view-modal .ct-quick-view-card .wpcpo-option-form .form-row {
		display: flex;
		flex-wrap: wrap;
		gap: 8px 18px;
	}

	/* ---------- 5. Order summary rows ---------- */

	.quick-view-modal .ct-quick-view-card .wpcpo-total {
		padding-top: 12px;
		margin: 14px 0 18px;
		font-size: 14px;
	}

	.quick-view-modal .ct-quick-view-card .wpcpo-total ul li {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 12px;
		padding: 5px 0;
		line-height: 1.45;
	}

	.quick-view-modal .ct-quick-view-card .wpcpo-total .wpcpo-col1 {
		flex: 1 1 auto;
		min-width: 0;
	}

	.quick-view-modal .ct-quick-view-card .wpcpo-total .wpcpo-col2 {
		flex: 0 0 auto;
		text-align: right;
	}

	/* Never let a price break after the thousands separator. */
	.quick-view-modal .ct-quick-view-card .wpcpo-total .woocommerce-Price-amount,
	.quick-view-modal .ct-quick-view-card .wpcpo-total .amount,
	.quick-view-modal .ct-quick-view-card .wpcpo-subtotal-amount,
	.quick-view-modal .ct-quick-view-card .wpcpo-total .wpcpo-col2 {
		white-space: nowrap;
	}

	.quick-view-modal .ct-quick-view-card .wpcpo-total li.wpcpo-subtotal {
		display: block;
		padding-top: 10px;
		font-size: 15px;
	}

	.quick-view-modal .ct-quick-view-card .wpcpo-total .wpcpo-subtotal-amount .amount {
		margin-left: 4px;
	}

	.quick-view-modal .ct-quick-view-card .wpcpo-clear-btn {
		font-size: 12px;
	}

	/* ---------- 6. Deposit radios ---------- */

	.quick-view-modal .ct-quick-view-card .awcdp-deposits-wrapper {
		margin-bottom: 14px;
	}

	.quick-view-modal .ct-quick-view-card .awcdp-radio-label {
		font-size: 15px;
	}

	.quick-view-modal .ct-quick-view-card .awcdp-deposits-option {
		display: flex;
		flex-direction: column;
		gap: 10px;
		padding: 12px 14px;
		border-radius: 10px;
	}

	/* ---------- 7. Cart actions: quantity + Add to cart, Buy now below ---------- */

	.quick-view-modal .ct-quick-view-card .ct-cart-actions {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		gap: 10px;
		align-items: stretch;
	}

	.quick-view-modal .ct-quick-view-card .ct-cart-actions .quantity {
		grid-column: 1;
		grid-row: 1;
		--quantity-width: 96px;
	}

	.quick-view-modal .ct-quick-view-card .ct-cart-actions .single_add_to_cart_button:not(.wpcbn-btn) {
		grid-column: 2;
		grid-row: 1;
	}

	.quick-view-modal .ct-quick-view-card .ct-cart-actions .wpcbn-btn {
		grid-column: 1 / -1;
		grid-row: 2;
	}

	.quick-view-modal .ct-quick-view-card .ct-cart-actions button {
		min-height: 46px;
		font-size: 15px;
		white-space: nowrap;
		line-height: 1.2;
		padding: 0 14px;
	}

	/* ---------- 8. Footer: meta + "Go to product page" ---------- */

	.quick-view-modal .ct-quick-view-card .product_meta {
		font-size: 12.5px;
		line-height: 1.7;
	}

	.quick-view-modal .ct-quick-view-card .product_meta > span {
		display: block;
	}

	.quick-view-modal .ct-quick-view-card .ct-quick-more {
		--theme-button-min-height: 44px;
		font-size: 14px;
	}

	.quick-view-modal .ct-quick-view-card :where(form.cart, .product_meta) {
		margin-bottom: 16px;
		padding-bottom: 16px;
	}
}

/* ---------- 9. Keep floating widgets off the modal ---------- */

body:has(.quick-view-modal.active) .woocommerce-multi-currency,
body:has(.quick-view-modal.active) .wmc-rig,
body:has(.quick-view-modal.active) .wmc-sidebar,
body:has(.quick-view-modal.active) .wpcbn-area {
	display: none !important;
}