/* =========================================================================
   Metal Universe Shop – Shopify-style shop / category pages.
   Built on the Elementor Pro "Product Archive" template: body.oc-archive and
   .elementor-location-archive are in the selectors so these rules outrank the
   template's own per-element styles.
   ========================================================================= */

body.oc-archive {
	--oc-ink: #F4F3F3;
	--oc-muted: #A3A3A3;
	--oc-line: #3A3A3A;
	--oc-line-soft: #2A2A2A;
	--oc-panel: #1C1C1C;
	--oc-tint: rgba(232, 51, 36, .12);
	--oc-page: #111111;
	--oc-paper: #171717;
	--oc-ink-2: #D6D6D6;
	--oc-on-ink: #111111;
	--oc-ok: #4CC38A;
	--oc-ok-bg: rgba(76, 195, 138, .12);
	--oc-err: #FF6B5E;
	--oc-err-bg: rgba(255, 107, 94, .12);
	--oc-warn: #F5B544;
	--oc-warn-bg: rgba(245, 181, 68, .12);
	--oc-info-bg: rgba(120, 160, 255, .12);
	--oc-img: #FFFFFF;
	--oc-well: #F2F2F0; /* behind product photos (white-background shots blend in via multiply) */
	color-scheme: dark;
	--oc-radius: 5px;
	--oc-head: var(--e-global-typography-primary-font-family, "Source Sans Pro"), "Source Sans Pro", "Source Sans 3", "Helvetica Neue", Arial, sans-serif;
	--oc-body: var(--e-global-typography-text-font-family, "Source Sans Pro"), "Source Sans Pro", "Source Sans 3", "Helvetica Neue", Arial, sans-serif;
}


/* ---------- Collection header -------------------------------------------- */

body.oc-archive .oc-coll {
	margin: 8px 0 28px;
	font-family: var(--oc-body);
	color: var(--oc-ink);
}

body.oc-archive .oc-coll__crumbs {
	margin: 0 0 14px;
	font-size: 13px;
	color: var(--oc-muted);
}

body.oc-archive .oc-coll__crumbs a {
	color: var(--oc-muted);
	text-decoration: none;
}

body.oc-archive .oc-coll__crumbs a:hover {
	color: var(--oc-accent);
}

body.oc-archive .oc-coll__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 16px;
}

body.oc-archive .oc-coll__title {
	margin: 0;
	font-family: var(--oc-head);
	font-size: 36px;
	font-weight: 600;
	line-height: 1.15;
	text-transform: none;
	color: var(--oc-ink);
}

body.oc-archive .oc-coll__count {
	font-size: 14px;
	color: var(--oc-muted);
}

body.oc-archive .oc-coll__desc {
	max-width: 720px;
	margin: 12px 0 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--oc-ink-2);
}

body.oc-archive .oc-coll__desc p {
	margin: 0 0 8px;
}

/* Category chips – mobile/tablet only (desktop keeps the sidebar) */
body.oc-archive .oc-chips {
	display: none;
}

@media (max-width: 1024px) {
	body.oc-archive .oc-chips {
		display: flex;
		gap: 8px;
		margin: 18px -16px 0;
		padding: 0 16px 4px;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	body.oc-archive .oc-chips::-webkit-scrollbar {
		display: none;
	}

	body.oc-archive .oc-chip {
		flex-shrink: 0;
		display: inline-flex;
		align-items: center;
		min-height: 40px;
		padding: 0 16px;
		border: 1px solid var(--oc-line);
		border-radius: 999px;
		background: var(--oc-paper);
		color: var(--oc-ink);
		font-size: 14px;
		font-weight: 500;
		white-space: nowrap;
		text-decoration: none;
	}

	body.oc-archive .oc-chip.is-active {
		border-color: var(--oc-accent);
		background: var(--oc-accent);
		color: #fff;
	}

	/* The chips replace the template's collapsed "Продуктови категории" box */
	body.oc-archive .elementor-location-archive .e-con:has(.elementor-widget-n-accordion):not(:has(.elementor-widget-woocommerce-products)) {
		display: none;
	}
}

/* ---------- Desktop sidebar (Elementor icon boxes) ------------------------ */

body.oc-archive .elementor-location-archive .e-con.e-con:has(> .elementor-widget-icon-box) {
	border-color: var(--oc-line-soft);
	border-radius: 12px;
}

body.oc-archive .elementor-location-archive .elementor-widget-icon-box.elementor-widget-icon-box {
	border-bottom-color: var(--oc-line-soft);
}

body.oc-archive .elementor-location-archive .elementor-widget-icon-box .elementor-icon-box-title a {
	color: var(--oc-ink-2);
	transition: color 0.15s ease;
}

body.oc-archive .elementor-location-archive .elementor-widget-icon-box:hover .elementor-icon-box-title a,
body.oc-archive .elementor-location-archive .elementor-widget-icon-box.oc-is-active .elementor-icon-box-title a {
	color: var(--oc-accent);
}

body.oc-archive .elementor-location-archive .elementor-widget-icon-box.oc-is-active .elementor-icon-box-title a {
	font-weight: 600;
}

/* ---------- Product grid ---------------------------------------------------
   The archive template styles its cards with !important and very specific
   per-element selectors, so the card rules below use !important too. */

body.oc-archive :is(.elementor-location-archive .elementor-widget-woocommerce-products, .site-main) ul.products {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 32px 24px;
	margin: 0;
}

body.oc-archive :is(.elementor-location-archive .elementor-widget-woocommerce-products, .site-main) ul.products::before,
body.oc-archive :is(.elementor-location-archive .elementor-widget-woocommerce-products, .site-main) ul.products::after {
	display: none;
}

body.oc-archive :is(.elementor-location-archive .elementor-widget-woocommerce-products, .site-main) ul.products li.product {
	display: flex !important;
	flex-direction: column !important;
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	font-family: var(--oc-body) !important;
	text-align: left !important;
}

/* The grey square is painted behind the image (a square SVG at the top of the
   link), so photos with a white background blend into it via multiply. */
body.oc-archive :is(.elementor-location-archive .elementor-widget-woocommerce-products, .site-main) ul.products li.product a.woocommerce-loop-product__link {
	display: flex !important;
	flex-direction: column !important;
	flex-grow: 1 !important;
	text-decoration: none !important;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' rx='5' fill='%23F4F5F2'/%3E%3C/svg%3E") top center / 100% auto no-repeat !important;
}

body.oc-archive :is(.elementor-location-archive .elementor-widget-woocommerce-products, .site-main) ul.products li.product a img {
	width: 100% !important;
	aspect-ratio: 1 !important;
	height: auto !important;
	margin: 0 0 14px !important;
	padding: 24px !important;
	box-sizing: border-box !important;
	object-fit: contain !important;
	border: 0 !important;
	border-radius: 12px !important;
	background: transparent !important;
	mix-blend-mode: multiply !important;
	transition: transform 0.2s ease !important;
}

body.oc-archive :is(.elementor-location-archive .elementor-widget-woocommerce-products, .site-main) ul.products li.product:hover a img {
	transform: scale(1.02) !important;
}

body.oc-archive :is(.elementor-location-archive .elementor-widget-woocommerce-products, .site-main) ul.products li.product .woocommerce-loop-product__title {
	margin: 0 !important;
	padding: 0 !important;
	font-family: var(--oc-body) !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	line-height: 1.35 !important;
	color: var(--oc-ink) !important;
}

body.oc-archive :is(.elementor-location-archive .elementor-widget-woocommerce-products, .site-main) ul.products li.product .price {
	margin: 6px 0 14px !important;
	font-family: var(--oc-head) !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	color: var(--oc-ink) !important;
}

body.oc-archive :is(.elementor-location-archive .elementor-widget-woocommerce-products, .site-main) ul.products li.product .price del {
	margin-right: 6px !important;
	font-weight: 400 !important;
	color: var(--oc-muted) !important;
}

body.oc-archive :is(.elementor-location-archive .elementor-widget-woocommerce-products, .site-main) ul.products li.product .price ins {
	text-decoration: none !important;
}

body.oc-archive :is(.elementor-location-archive .elementor-widget-woocommerce-products, .site-main) ul.products li.product .button {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	min-height: 44px !important;
	margin: auto 0 0 !important;
	padding: 10px 16px !important;
	box-sizing: border-box !important;
	border: 1px solid var(--oc-line) !important;
	border-radius: var(--oc-radius) !important;
	background: var(--oc-paper) !important;
	color: var(--oc-ink) !important;
	box-shadow: none !important;
	font-family: var(--oc-body) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	letter-spacing: 0 !important;
	text-align: center !important;
	text-transform: none !important;
	transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease !important;
}

body.oc-archive :is(.elementor-location-archive .elementor-widget-woocommerce-products, .site-main) ul.products li.product .button:hover,
body.oc-archive :is(.elementor-location-archive .elementor-widget-woocommerce-products, .site-main) ul.products li.product .button:focus-visible {
	border-color: var(--oc-accent) !important;
	background: var(--oc-accent) !important;
	color: #fff !important;
}

body.oc-archive :is(.elementor-location-archive .elementor-widget-woocommerce-products, .site-main) ul.products li.product .button.added {
	border-color: var(--oc-accent) !important;
	background: var(--oc-tint) !important;
	color: var(--oc-accent-dark) !important;
}

body.oc-archive :is(.elementor-location-archive .elementor-widget-woocommerce-products, .site-main) ul.products li.product .added_to_cart {
	margin-top: 8px !important;
	font-size: 13px !important;
	text-align: center !important;
	color: var(--oc-accent) !important;
}

/* ---------- Mobile: two cards per row -------------------------------------- */

@media (max-width: 767px) {
	body.oc-archive .oc-coll__title {
		font-size: 28px;
	}

	body.oc-archive :is(.elementor-location-archive .elementor-widget-woocommerce-products, .site-main) ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 24px 12px;
	}

	body.oc-archive :is(.elementor-location-archive .elementor-widget-woocommerce-products, .site-main) ul.products li.product a img {
		padding: 14px !important;
		border-radius: 10px !important;
	}

	body.oc-archive :is(.elementor-location-archive .elementor-widget-woocommerce-products, .site-main) ul.products li.product .woocommerce-loop-product__title {
		font-size: 14px !important;
	}

	body.oc-archive :is(.elementor-location-archive .elementor-widget-woocommerce-products, .site-main) ul.products li.product .button {
		min-height: 40px !important;
		padding: 8px 10px !important;
		font-size: 13px !important;
	}
}

/* "Цена по запитване" for quote-only products */
body.oc-archive :is(.elementor-location-archive .elementor-widget-woocommerce-products, .site-main) ul.products li.product .price .oc-price-quote {
	font-family: var(--oc-body) !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	color: var(--oc-muted) !important;
}

/* ---------- Default WooCommerce loop (Hello Elementor, no archive template) ---------- */
body.oc-archive .site-main {
	max-width: 1240px;
	margin: 0 auto;
	padding: 24px 16px 64px;
}
body.oc-archive .site-main .woocommerce-products-header { display: none; }
body.oc-archive .site-main .woocommerce-ordering { float: none; margin: 0 0 24px; display: flex; justify-content: flex-end; }
body.oc-archive .site-main .woocommerce-ordering select {
	padding: 9px 36px 9px 12px;
	border: 1px solid var(--oc-line);
	border-radius: var(--oc-radius);
	background-color: var(--oc-paper);
	color: var(--oc-ink);
	font-family: var(--oc-body);
	font-size: 14px;
}
@media (min-width: 1100px) {
	body.oc-archive .site-main ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}

/* ---------- [mu_bands] A–Z index ---------- */
.sh-bands { --oc-ink: #F4F3F3; --oc-muted: #A3A3A3; --oc-line-soft: #2A2A2A; --oc-panel: #1C1C1C; --oc-head: var(--e-global-typography-primary-font-family, "Source Sans Pro"), "Source Sans Pro", "Source Sans 3", Arial, sans-serif; --oc-body: var(--e-global-typography-text-font-family, "Source Sans Pro"), "Source Sans Pro", "Source Sans 3", Arial, sans-serif; font-family: var(--oc-body); color: var(--oc-ink); }
.sh-bands__az { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 24px; padding: 10px 0; background: var(--oc-paper); }
.sh-bands__az a { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; border: 1px solid var(--oc-line-soft); border-radius: 999px; color: var(--oc-ink); font-weight: 600; text-decoration: none; }
.sh-bands__az a:hover { background: var(--oc-accent); color: #fff; }
.sh-bands__group { scroll-margin-top: 70px; margin: 0 0 28px; }
.sh-bands__group h2 { margin: 0 0 12px; font-family: var(--oc-head); font-size: 26px; }
.sh-bands__group ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.sh-bands__group a { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; padding: 8px 12px 8px 8px; border: 1px solid var(--oc-line-soft); border-radius: 12px; color: var(--oc-ink); text-decoration: none; }
.sh-bands__group a:hover { border-color: var(--oc-accent); }
.sh-bands__img { width: 56px; height: 56px; border-radius: 8px; background: var(--oc-well, #F2F2F0); overflow: hidden; }
.sh-bands__img img { width: 100%; height: 100%; object-fit: cover; }
.sh-bands__name { font-weight: 600; line-height: 1.25; }
.sh-bands__count { font-size: 13px; color: var(--oc-muted); }
.sh-tier-tag { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--oc-accent); color: #fff; font-size: 11px; font-weight: 600; line-height: 1.6; vertical-align: middle; white-space: nowrap; }