/**
 * Shop grid/list switcher — an addition to Flatsome's grid mode.
 *
 * Every rule is scoped under `.dongduongwine-shop-view`, a body class the
 * theme only prints while the site's List Style is `grid`. Flatsome's own
 * `list` and `masonry` modes never match anything here.
 */

/* ---------------------------------------------------------------------------
 * Switcher (Flatsome category toolbar)
 * ------------------------------------------------------------------------- */

.dongduongwine-shop-view-switcher {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	margin-left: 0.75em;
	vertical-align: middle;
}

.dongduongwine-shop-view-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.1em;
	height: 2.1em;
	border-radius: 3px;
	color: currentColor;
	opacity: 0.4;
	text-decoration: none;
	transition: opacity 0.2s ease, background-color 0.2s ease;
}

.dongduongwine-shop-view-btn:hover,
.dongduongwine-shop-view-btn:focus {
	opacity: 0.8;
	outline: none;
}

.dongduongwine-shop-view-btn:focus-visible {
	box-shadow: 0 0 0 2px currentColor;
}

.dongduongwine-shop-view-btn.active {
	opacity: 1;
	background-color: rgba(0, 0, 0, 0.06);
}

.dongduongwine-shop-view-icon {
	display: block;
	width: 1.05em;
	height: 1.05em;
}

/* ---------------------------------------------------------------------------
 * Crossfade between the two views
 * ------------------------------------------------------------------------- */

body.dongduongwine-shop-view .products.row {
	transition: opacity 0.18s ease, transform 0.18s ease;
}

body.dongduongwine-shop-view .products.row.dongduongwine-view-switching {
	opacity: 0;
	transform: translateY(8px);
	pointer-events: none;
}

/* The columns deliberately do NOT transition. Animating their width means
   Flatsome's `equalize-box` measures a layout that is still moving and freezes
   the wrong inline heights onto the boxes — the crossfade hides the jump
   anyway. */

@media (prefers-reduced-motion: reduce) {
	body.dongduongwine-shop-view .products.row {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
 * List view
 *
 * The column count is not set here. It rides on the row's `<size>-columns-N`
 * classes — written server-side by the `loop_shop_columns` /
 * `theme_mod_category_row_count_*` filters, swapped client-side by
 * shop-view.js — so Flatsome's own column CSS does the sizing and its
 * `equalize-box` script reads a column count that matches what is on screen.
 * ------------------------------------------------------------------------- */

body.dongduongwine-shop-view-list {
	--ddw-list-image-width: 150px;
}

/* ---------------------------------------------------------------------------
 * List view — flex layout (desktop + mobile)
 *
 * Flatsome builds `.box-vertical` as `display:table` from 550px up and, below
 * that, stacks the image at 100% width. Both are overridden here so the card
 * stays image-left / text-right at every breakpoint.
 *
 * Flatsome also pins the list thumbnail to the WooCommerce thumbnail width
 * with !important (flatsome/inc/functions/function-custom-css.php):
 *
 *   .products .box-vertical .box-image {
 *     min-width: <wc_get_image_size('thumbnail')['width']>px !important;
 *     width:     <same>px !important;
 *   }
 *
 * `min-width` is what actually holds it open — that is why it is reset here.
 * ------------------------------------------------------------------------- */

body.dongduongwine-shop-view-list .products .box-vertical {
	display: flex;
	align-items: flex-start;
	width: 100%;
}

body.dongduongwine-shop-view-list .products .box-vertical .box-image {
	display: block;
	flex: 0 0 var(--ddw-list-image-width, 150px);
	min-width: 0 !important;
	width: var(--ddw-list-image-width, 150px) !important;
	max-width: var(--ddw-list-image-width, 150px) !important;
}

body.dongduongwine-shop-view-list .products .box-vertical .box-text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	padding-top: 0.35em;
	padding-bottom: 0.35em;
}

body.dongduongwine-shop-view-list .products .box-vertical .box-text .title-wrapper {
	overflow: visible;
}

body.dongduongwine-shop-view-list .products .box-vertical .pwpa-loop-slot,
body.dongduongwine-shop-view-list .products .box-vertical .pwpa--loop {
	flex: 0 0 auto;
	text-align: left;
}

@media screen and (max-width: 549px) {
	body.dongduongwine-shop-view-list {
		--ddw-list-image-width: 110px;
	}

	/* One product per row — beats leftover small-columns-2 from grid mode. */
	body.dongduongwine-shop-view-list .products.row > .col {
		flex-basis: 100% !important;
		max-width: 100% !important;
		width: 100% !important;
	}

	body.dongduongwine-shop-view-list .products .box-vertical .box-text {
		padding-left: 0.75em;
		padding-right: 0.35em;
	}
}

/* The card template itself — price/add-to-cart row and the icon button — lives
   in product-loop-box.css, which loads on every page because it applies to all
   product loops, not just the archives this stylesheet covers. */