/* =========================================================================
   Vzduchotechnika SHOP — product listing (LIST view, single source)
   Markup comes from the child template:
     ul.products
       li.wm-card
         article.wm-card__inner
           a.wm-card__media > img
           .wm-card__body
             .wm-card__head > h3.wm-card__title, .wm-card__meta
             ul.wm-card__attrs > li.wm-card__attr
           aside.wm-card__aside
             .wm-card__stock, .wm-card__price, .wm-card__actions
   ========================================================================= */

:root {
	--wm-border: #e6e8ec;
	--wm-border-soft: #f1f3f5;
	--wm-ink: #1a1f2b;
	--wm-ink-soft: #4b5563;
	--wm-muted: #6b7280;
	--wm-muted-2: #8a94a5;
	--wm-brand: #ff6a00;
	--wm-brand-2: #ff8a3d;
	--wm-ok: #16a34a;
	--wm-warn: #b45309;
	--wm-danger: #dc2626;
	--wm-chip-bg: #f6f8fa;
	--wm-chip-ink: #344054;
	--wm-card-shadow: 0 1px 2px rgba(16,24,40,.04);
	--wm-card-shadow-hover: 0 8px 24px rgba(16,24,40,.08);
}

/* -------------------------------------------------------------------------
   Reset parent-theme toggles / defaults that fight the flat list
   ------------------------------------------------------------------------- */
.shop-container .products {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 12px !important;
}

/* Nuke any column / grid helper the parent theme injects */
.shop-container .products::before,
.shop-container .products::after { content: none !important; display: none !important; }
.shop-container .products > li.product,
.shop-container .products > li.wm-card {
	float: none !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	list-style: none !important;
}

/* Parent theme sometimes outputs a `.column-item` wrapper — flatten it */
.shop-container .products .column-item { display: contents !important; }

/* -------------------------------------------------------------------------
   Card
   ------------------------------------------------------------------------- */
.wm-card__inner {
	display: grid;
	grid-template-columns: 144px minmax(0, 1fr) 240px;
	gap: 20px;
	align-items: stretch;
	background: #fff;
	border: 1px solid var(--wm-border);
	border-radius: 14px;
	padding: 16px;
	box-shadow: var(--wm-card-shadow);
	transition: border-color .15s ease, box-shadow .2s ease, transform .2s ease;
}
.wm-card:hover .wm-card__inner {
	border-color: var(--wm-brand);
	box-shadow: var(--wm-card-shadow-hover);
}

/* Media column */
.wm-card__media {
	position: relative;
	width: 144px;
	height: 144px;
	border: 1px solid var(--wm-border-soft);
	border-radius: 10px;
	background: #fff;
	overflow: hidden;
	align-self: center;
	display: block;
	flex: 0 0 144px;
}
.wm-card__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 10px;
	display: block;
	transition: transform .3s ease;
}
.wm-card:hover .wm-card__media img { transform: scale(1.04); }
.wm-card__flash {
	position: absolute;
	top: 8px;
	left: 8px;
	background: var(--wm-danger);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	padding: 3px 8px;
	border-radius: 999px;
	letter-spacing: .02em;
}

/* Body column (title + meta + attrs) */
.wm-card__body {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	justify-content: flex-start;
	padding: 2px 0;
}
.wm-card__head { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wm-card__title {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	margin: 0;
	color: var(--wm-ink);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	overflow-wrap: anywhere;
}
.wm-card__title a { color: inherit; text-decoration: none; transition: color .15s ease; }
.wm-card__title a:hover { color: var(--wm-brand); }

.wm-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	font-size: 12.5px;
	color: var(--wm-muted);
	align-items: center;
}
.wm-card__sku {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12px;
	color: var(--wm-ink-soft);
	background: var(--wm-chip-bg);
	padding: 2px 8px;
	border-radius: 6px;
	white-space: nowrap;
}
.wm-card__brand {
	font-weight: 600;
	color: var(--wm-ink-soft);
	text-transform: uppercase;
	letter-spacing: .04em;
	font-size: 11.5px;
}
.wm-card__rating .star-rating { font-size: 12px; margin: 0; }

/* -------------------------------------------------------------------------
   Attribute chips — long names handled by ellipsis + tooltip
   ------------------------------------------------------------------------- */
.wm-card__attrs {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 8px;
	min-width: 0;
}
.wm-card__attr {
	display: inline-flex;
	align-items: baseline;
	max-width: 100%;
	background: var(--wm-chip-bg);
	color: var(--wm-chip-ink);
	border: 1px solid var(--wm-border-soft);
	border-radius: 999px;
	padding: 4px 10px;
	font-size: 12px;
	line-height: 1.35;
	gap: 4px;
	/* Long names: cap visible width and ellipsize — tooltip carries full text */
	max-width: 280px;
	overflow: hidden;
	white-space: nowrap;
}
.wm-card__attr-label {
	color: var(--wm-muted);
	font-weight: 500;
	/* Label itself can be cropped for extremely long attribute names */
	max-width: 160px;
	overflow: hidden;
	text-overflow: ellipsis;
	flex-shrink: 1;
}
.wm-card__attr-sep { color: var(--wm-muted-2); flex-shrink: 0; }
.wm-card__attr-value {
	color: var(--wm-ink);
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	flex-shrink: 1;
	min-width: 0;
}
.wm-card__attr--more {
	background: transparent;
	border: 1px dashed var(--wm-border);
	padding: 3px 10px;
}
.wm-card__attr--more a {
	color: var(--wm-brand);
	text-decoration: none;
	font-weight: 600;
}
.wm-card__attr--more a:hover { text-decoration: underline; }

/* -------------------------------------------------------------------------
   Aside column (stock + price + CTAs)
   ------------------------------------------------------------------------- */
.wm-card__aside {
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: stretch;
	justify-content: center;
	padding-left: 20px;
	border-left: 1px solid var(--wm-border-soft);
	min-width: 0;
}

.wm-card__stock {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 600;
	padding: 3px 10px 3px 8px;
	border-radius: 999px;
	align-self: flex-start;
	background: #f0fdf4;
	color: var(--wm-ok);
	white-space: nowrap;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
}
.wm-card__stock-dot {
	width: 8px; height: 8px;
	border-radius: 50%;
	background: currentColor;
	display: inline-block;
	flex-shrink: 0;
}
.wm-card__stock--back { background: #fffbeb; color: var(--wm-warn); }
.wm-card__stock--out  { background: #fef2f2; color: var(--wm-danger); }

.wm-card__price {
	font-size: 20px;
	font-weight: 700;
	color: var(--wm-brand);
	line-height: 1.15;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px;
}
.wm-card__price * { white-space: nowrap; }
.wm-card__price del {
	color: var(--wm-muted-2);
	font-weight: 400;
	font-size: 13px;
}
.wm-card__price ins {
	text-decoration: none;
	color: var(--wm-brand);
}
.wm-card__price .price-without-tax,
.wm-card__price small {
	display: block;
	width: 100%;
	font-size: 11.5px;
	font-weight: 500;
	color: var(--wm-muted);
	margin-top: 2px;
}

/* Action buttons */
.wm-card__actions {
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: 100%;
}
.wm-card__actions .button,
.wm-card__actions .add_to_cart_button,
.wm-card__actions a.button,
.wm-card__view {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 100%;
	border-radius: 10px;
	padding: 10px 14px;
	font-weight: 600;
	font-size: 13.5px;
	text-decoration: none !important;
	min-height: 40px;
	box-sizing: border-box;
	line-height: 1.2;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.wm-card__actions .button,
.wm-card__actions .add_to_cart_button,
.wm-card__actions a.button {
	background: linear-gradient(135deg, var(--wm-brand) 0%, var(--wm-brand-2) 100%) !important;
	color: #fff !important;
	border: none !important;
	box-shadow: 0 2px 8px rgba(255,106,0,.22);
}
.wm-card__actions .button:hover,
.wm-card__actions .add_to_cart_button:hover,
.wm-card__actions a.button:hover {
	filter: brightness(.96);
	box-shadow: 0 4px 12px rgba(255,106,0,.3);
	color: #fff !important;
}
.wm-card__view {
	background: #fff;
	color: var(--wm-ink) !important;
	border: 1px solid var(--wm-border) !important;
}
.wm-card__view:hover {
	border-color: var(--wm-brand) !important;
	color: var(--wm-brand) !important;
}

/* Woo "added" / "loading" states inherit tone */
.wm-card__actions .added_to_cart {
	text-align: center;
	font-size: 12px;
	color: var(--wm-muted);
	padding: 4px 0 0;
}

/* -------------------------------------------------------------------------
   Compact desktop (< 1100 px): collapse aside column but keep horizontal
   ------------------------------------------------------------------------- */
@media (max-width: 1099px) and (min-width: 768px) {
	.wm-card__inner {
		grid-template-columns: 128px minmax(0, 1fr) 200px;
		gap: 16px;
	}
	.wm-card__media { width: 128px; height: 128px; flex-basis: 128px; }
	.wm-card__aside { padding-left: 16px; }
	.wm-card__attr { max-width: 220px; }
	.wm-card__attr-label { max-width: 120px; }
}

/* -------------------------------------------------------------------------
   Mobile (< 768 px): stack — image + head on top row, attrs below, CTAs full
   ------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.wm-card__inner {
		grid-template-columns: 96px minmax(0, 1fr);
		grid-template-areas:
			"media  body"
			"aside  aside";
		gap: 12px;
		padding: 12px;
		border-radius: 12px;
	}
	.wm-card__media {
		grid-area: media;
		width: 96px; height: 96px; flex-basis: 96px;
		align-self: start;
	}
	.wm-card__body   { grid-area: body;  gap: 8px; }
	.wm-card__aside  {
		grid-area: aside;
		border-left: 0;
		border-top: 1px dashed var(--wm-border-soft);
		padding: 10px 0 0;
		flex-direction: row;
		align-items: center;
		flex-wrap: wrap;
		gap: 8px 12px;
		justify-content: space-between;
	}
	.wm-card__stock { order: 1; margin-right: auto; }
	.wm-card__price { order: 2; font-size: 18px; }
	.wm-card__actions {
		order: 3;
		flex-direction: row;
		width: 100%;
		gap: 8px;
	}
	.wm-card__actions .button,
	.wm-card__actions .add_to_cart_button,
	.wm-card__actions a.button,
	.wm-card__view {
		flex: 1 1 50%;
		min-height: 42px;
	}
	.wm-card__title { font-size: 14.5px; }
	.wm-card__meta  { gap: 4px 10px; font-size: 11.5px; }
	.wm-card__attrs { gap: 4px 6px; }
	.wm-card__attr  { font-size: 11px; max-width: 100%; }
	.wm-card__attr-label { max-width: 110px; }
}

/* -------------------------------------------------------------------------
   Defensive: hide any stray grid/list toggle the parent theme might inject
   ------------------------------------------------------------------------- */
.shop-container .shop-view-switcher,
.shop-container .product-view-type,
.shop-container .grid-list-toggle,
.shop-container .shop-view-type,
.shop-container [data-shop-view] { display: none !important; }