/*
 * shop.css
 *
 * Shop and product category archives — the "Proizvodi v2" design.
 * Part of the Unitex child theme. Enqueued from inc/enqueue.php.
 *
 * The red page head itself lives in components.css (it is the shared
 * Woodmart page-title treatment); the shop-only additions to it are here.
 */

/* ==========================================================
   1. PAGE HEAD - shop additions
   ========================================================== */

/* the <h1> stays first in the markup; CSS lifts the breadcrumbs above it */
.woocommerce .page-title .wd-title-wrapp,
.tax-product_cat .page-title .wd-title-wrapp {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.page-title .ux-crumbs {
	order: -1;
	margin-bottom: 18px;
	font-size: 14px;
	color: rgba(255, 255, 255, .75);
}
.page-title .ux-crumbs a { color: rgba(255, 255, 255, .75); }
.page-title .ux-crumbs a:hover { color: #fff; }
.page-title .ux-crumb-sep { padding: 0 6px; }

.page-title .ux-shop-lead {
	max-width: 56ch;
	margin-top: 14px;
}
.page-title .ux-shop-lead p {
	margin: 0;
	font-size: 17px;
	line-height: 1.6;
	color: rgba(255, 255, 255, .9);
	text-wrap: pretty;
}

/* the loop head keeps a second copy of the breadcrumbs - the head owns them now */
.shop-loop-head .wd-breadcrumbs { display: none; }

/* Woodmart's category back button is redundant next to the chip row */
.page-title .wd-back-btn { display: none; }

/* ==========================================================
   2. CATEGORY CHIPS
   ========================================================== */
.ux-cats-wrap { margin: 0 auto; padding-top: 24px; }

.ux-cats {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.ux-cat {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #fff;
	border: 1px solid var(--ux-line);
	color: var(--ux-dark);
	font-family: 'Archivo', sans-serif;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: .02em;
	padding: 11px 17px;
	white-space: nowrap;
	transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.ux-cat .ux-cat-n { font-weight: 500; opacity: .6; }

.ux-cat:hover,
.ux-cat.is-active {
	background: var(--ux-red);
	border-color: var(--ux-red);
	color: #fff;
}

/* ==========================================================
   3. ARCHIVE LAYOUT - fixed 288px sidebar
   ========================================================== */
.woocommerce .wd-content-layout,
.archive .wd-content-layout { padding-block: 24px 90px !important; }

@media (min-width: 1025px) {
	.woocommerce main.wd-content-layout.wd-grid-g,
	.tax-product_cat main.wd-content-layout.wd-grid-g {
		grid-template-columns: 288px minmax(0, 1fr);
		gap: 28px;
	}
	.woocommerce main.wd-content-layout > .wd-sidebar,
	.woocommerce main.wd-content-layout > .wd-content-area,
	.tax-product_cat main.wd-content-layout > .wd-sidebar,
	.tax-product_cat main.wd-content-layout > .wd-content-area {
		grid-column: auto / span 1;
	}

	/* grid items stretch by default, which ran the white filter card the full
	   height of the product grid - it should end after the last filter */
	.woocommerce main.wd-content-layout > .wd-sidebar,
	.tax-product_cat main.wd-content-layout > .wd-sidebar {
		align-self: start;
	}
}

/* ==========================================================
   4. TOOLBAR - one white bar
   ========================================================== */
.shop-loop-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	background: #fff;
	border: 1px solid var(--ux-line);
	padding: 14px 20px;
	margin-bottom: 16px;
}
.shop-loop-head .wd-shop-tools {
	display: flex;
	align-items: center;
	gap: 16px;
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
}

.woocommerce-result-count {
	/* Woodmart hides this outside its own off-canvas layouts */
	display: block !important;
	margin: 0 !important;
	font-size: 14.5px;
	color: var(--ux-muted);
}
.woocommerce-result-count strong { font-weight: 600; color: var(--ux-dark); }

/* --- per page + column switcher: small square buttons --- */
.wd-products-per-page,
.wd-products-shop-view {
	display: flex;
	align-items: center;
	gap: 8px;
}
.wd-products-per-page .per-page-title,
.wd-products-per-page .wd-label {
	font-size: 13px;
	color: var(--ux-muted);
	margin: 0;
}
.wd-products-per-page .per-page-border { display: none; }

.wd-products-per-page .per-page-variation,
.wd-products-shop-view .shop-view {
	min-width: 34px;
	height: 34px;
	display: flex !important;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--ux-line);
	background: #fff;
	color: var(--ux-dark) !important;
	font-family: 'Archivo', sans-serif;
	font-weight: 700;
	font-size: 13px;
	padding: 0 8px;
	transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.wd-products-per-page .per-page-variation:hover,
.wd-products-shop-view .shop-view:hover {
	border-color: var(--ux-red);
	color: var(--ux-red) !important;
}
.wd-products-per-page .per-page-variation.current-variation,
.wd-products-shop-view .shop-view.current-variation {
	background: var(--ux-dark);
	border-color: var(--ux-dark);
	color: #fff !important;
}

/* Woodmart appends a colon to the label; the design has none */
.wd-products-per-page .per-page-title::after { content: none !important; }

/* --- sort control: "Sortiraj: Popularno v" in a bordered box --- */
.woocommerce-ordering { margin: 0 !important; }

@media (min-width: 1025px) {
	/* single divider, between the per-page group and the sort box */
	.shop-loop-head .wd-products-per-page::after {
		content: "";
		flex: 0 0 1px;
		width: 1px;
		height: 24px;
		margin-left: 8px;
		background: var(--ux-line);
	}

	.shop-loop-head .woocommerce-ordering {
		display: flex;
		align-items: center;
		gap: 8px;
		background: #fff;
		border: 1px solid var(--ux-line);
		padding: 10px 16px;
	}
	.shop-loop-head .woocommerce-ordering::before {
		content: "Sortiraj:";
		font-family: 'Instrument Sans', sans-serif;
		font-size: 14.5px;
		line-height: 1.2;
		color: var(--ux-dark);
		white-space: nowrap;
	}

	/* the box carries the border, so the select itself is bare - with the chevron
	   painted inside it so the whole control stays clickable */
	.shop-loop-head .woocommerce-ordering select.orderby {
		border: 0 !important;
		background-color: transparent !important;
		background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238A7D7B' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") !important;
		background-repeat: no-repeat !important;
		background-position: right center !important;
		background-size: 10px 6px !important;
		box-shadow: none !important;
		margin: 0 !important;
		padding: 0 20px 0 0 !important;
		height: auto !important;
		font-family: 'Archivo', sans-serif !important;
		font-weight: 700 !important;
		font-size: 14.5px !important;
		line-height: 1.2 !important;
		color: var(--ux-dark) !important;
		-webkit-appearance: none;
		appearance: none;
		cursor: pointer;
	}
}

/* the column-count switcher is not part of this design, and the burger
   "Filteri" button belongs to the mobile off-canvas sidebar */
@media (min-width: 1025px) {
	.shop-loop-head .wd-products-shop-view,
	.shop-loop-head .wd-show-sidebar-btn { display: none !important; }
}

/* ==========================================================
   5. SIDEBAR
   ========================================================== */
.wd-sidebar.sidebar-container {
	background: #fff;
	border: 1px solid var(--ux-line);
	padding: 0 !important;
}
.wd-sidebar .widget-area { padding: 0; }

.wd-sidebar .wd-widget,
.wd-sidebar .sidebar-widget {
	margin: 0 !important;
	padding: 22px 24px !important;
	border-bottom: 1px solid var(--ux-line-soft);
}
.wd-sidebar .wd-widget:last-child { border-bottom: 0; }

.wd-sidebar .widget-title {
	margin: 0 0 14px !important;
	font-family: 'Archivo', sans-serif;
	font-weight: 800;
	font-size: 13.5px;
	color: var(--ux-dark);
	letter-spacing: .05em;
	text-transform: uppercase;
}
.wd-sidebar .widget-title::after { display: none !important; }

/* --- "Filteri" head --- */
.ux-filters-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 20px 24px;
	border-bottom: 1px solid var(--ux-line-soft);
}
.ux-filters-title {
	font-family: 'Archivo', sans-serif;
	font-weight: 800;
	font-size: 13.5px;
	letter-spacing: .05em;
	text-transform: uppercase;
}
.ux-filters-clear { font-size: 13px; color: var(--ux-muted); }
.ux-filters-clear:hover { color: var(--ux-red); }

/* --- subcategory list (inc/shop.php) --- */
.ux-subcats ul { margin: 0; padding: 0; list-style: none; }
.ux-subcats li { margin: 0 0 10px; }
.ux-subcats li:last-child { margin-bottom: 0; }
.ux-subcats li > a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	font-size: 14.5px;
	color: #4A403E;
}
.ux-subcats li > a:hover { color: var(--ux-red); }
.ux-subcats .count { font-size: 13px; color: var(--ux-muted); }
.ux-subcats li.current-cat > a { font-weight: 600; color: var(--ux-red); }

/* --- layered nav: swatch grids --- */
/* Woodmart sizes text swatches from its own token, and its rule outranks ours -
   so drive the token instead of fighting it. */
.wd-sidebar .wd-swatches-filter { --wd-swatch-text-min-width: 46px; }

.wd-sidebar .wd-swatches-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.wd-sidebar .wd-swatches-filter .wd-swatch-wrap { margin: 0; }
.wd-sidebar .wd-swatches-filter .layered-nav-link {
	display: block;
	line-height: 1;
}
/* the design shows swatches only - the name stays as the link's accessible label */
.wd-sidebar .wd-swatches-filter .wd-filter-lable,
.wd-sidebar .wd-swatches-filter .count { display: none !important; }

/* Woodmart marks the selected filter with `wd-active` on the wrapper, not the
   WooCommerce-standard `chosen` - both are matched so either works. It also
   indicates selection with a 2px underline drawn in ::after; the design fills the
   box instead, so that underline is removed for colour and size alike. */
.wd-sidebar .wd-swatches-filter .wd-swatch::before,
.wd-sidebar .wd-swatches-filter .wd-swatch::after {
	content: none !important;
	display: none !important;
}

/* colour swatches: 30px circles */
.wd-sidebar .wd-swatches-filter .wd-swatch.wd-bg {
	display: block;
	width: 30px;
	height: 30px;
	border-radius: 999px;
	border: 1.5px solid var(--ux-line);
	overflow: hidden;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.wd-sidebar .wd-swatches-filter .wd-swatch.wd-bg .wd-swatch-bg {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 999px;
}
.wd-sidebar .wd-swatches-filter .wd-swatch.wd-bg .wd-swatch-text { display: none; }
.wd-sidebar .wd-swatches-filter .wd-swatch.wd-bg:hover { border-color: var(--ux-dark); }

/* selected colour: a dark ring, since the swatch itself carries the colour */
.wd-sidebar .wd-swatches-filter .wd-active .wd-swatch.wd-bg,
.wd-sidebar .wd-swatches-filter .chosen .wd-swatch.wd-bg {
	border-color: var(--ux-dark);
	box-shadow: 0 0 0 1px var(--ux-dark);
}

/* size swatches: 46x40 squares - `wd-shape-round` rounds these to 1em, and zero
   radius is deliberate here */
.wd-sidebar .wd-swatches-filter .wd-swatch.wd-text {
	width: auto;
	min-width: 46px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 8px;
	border: 1.5px solid var(--ux-line);
	border-radius: 0;
	background: #fff;
	color: var(--ux-dark);
	font-family: 'Archivo', sans-serif;
	font-weight: 700;
	font-size: 13.5px;
	transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.wd-sidebar .wd-swatches-filter .wd-swatch.wd-text:hover { border-color: var(--ux-dark); }
.wd-sidebar .wd-swatches-filter .wd-active .wd-swatch.wd-text,
.wd-sidebar .wd-swatches-filter .chosen .wd-swatch.wd-text {
	background: var(--ux-dark);
	border-color: var(--ux-dark);
	color: #fff;
}

/* --- price slider ---
   jQuery UI positions the handles with an inline `left`, and Woodmart pulls them
   into its own round-handle geometry with `margin: -15px` plus a range inset by
   top/bottom. Both have to be reset explicitly, or the handles sit 15px up and
   left of the track and the red fill reads as a thin line low in the groove. */
.price_slider_wrapper .ui-slider {
	position: relative;
	height: 4px !important;
	margin: 8px 8px 18px !important;
	background: var(--ux-line) !important;
	border: 0 !important;
	border-radius: 0 !important;
}

.price_slider_wrapper .ui-slider .ui-slider-range {
	top: 0 !important;
	bottom: 0 !important;
	height: auto !important;
	margin: 0 !important;
	background: var(--ux-red) !important;
	border: 0 !important;
	border-radius: 0 !important;
}

/* 16px square, centred on the 4px track: -6px lifts it, -8px centres it on the
   inline `left` jQuery UI sets. */
.price_slider_wrapper .ui-slider .ui-slider-handle {
	width: 16px !important;
	height: 16px !important;
	top: -6px !important;
	margin: 0 0 0 -8px !important;
	background: var(--ux-dark) !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	cursor: grab;
}
.price_slider_wrapper .ui-slider .ui-slider-handle:last-child { margin-left: -8px !important; }
.price_slider_wrapper .ui-slider .ui-slider-handle:active { cursor: grabbing; }

/* Woodmart draws a grip bar inside the handle with ::after, tinted with the theme
   primary - which reads as a red stripe through our solid black square. */
.price_slider_wrapper .ui-slider .ui-slider-handle::before,
.price_slider_wrapper .ui-slider .ui-slider-handle::after {
	content: none !important;
	display: none !important;
}

/* WooCommerce prints the button before the label, and both must share one row.
   nowrap needs !important: Woodmart sets flex-wrap:wrap on this row. */
.price_slider_amount {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: nowrap !important;
}

/* the "Cena:" prefix is dropped in woocommerce/content-widget-price-filter.php */
.price_slider_amount .price_label {
	order: 1;
	min-width: 0;
	font-size: 13.5px;
	color: #4A403E;
	white-space: nowrap;
}

.price_slider_amount .button {
	order: 2;
	flex: 0 0 auto;
	background: var(--ux-dark) !important;
	color: #fff !important;
	border: 0 !important;
	padding: 10px 16px !important;
	font-family: 'Archivo', sans-serif;
	font-weight: 700;
	font-size: 12.5px !important;
	letter-spacing: .04em;
	text-transform: uppercase;
}
.price_slider_amount .button:hover { background: var(--ux-red) !important; }

/* --- stock status checkboxes --- */
.wd-widget-stock-status ul { margin: 0; padding: 0; list-style: none; }
.wd-widget-stock-status li { margin: 0 0 11px; }
.wd-widget-stock-status li:last-child { margin-bottom: 0; }
.wd-widget-stock-status li > a {
	display: flex;
	align-items: center;
	gap: 11px;
	font-size: 14.5px;
	color: #4A403E;
}
/* Woodmart draws its own checkbox in `.widget .wd-checkboxes-on li > a::before`
   with a woodmart-font glyph and a 1.4em box - that selector outranks a single
   class, so ours matches .wd-widget-stock-status *and* .widget to get above it. */
.wd-widget-stock-status.widget .wd-checkboxes-on li > a::before {
	content: "";
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1.5px solid var(--ux-line);
	border-radius: 0;
	background: #fff;
	font-family: 'Instrument Sans', sans-serif;
	font-size: 12px;
	line-height: 1;
	color: transparent;
	transition: background .2s ease, border-color .2s ease;
}
.wd-widget-stock-status li > a:hover { color: var(--ux-dark); }
.wd-widget-stock-status.widget .wd-checkboxes-on li > a:hover::before { border-color: var(--ux-dark); }

.wd-widget-stock-status li.wd-active > a,
.wd-widget-stock-status li.chosen > a {
	font-weight: 600;
	color: var(--ux-dark);
}
.wd-widget-stock-status.widget .wd-checkboxes-on li.wd-active > a::before,
.wd-widget-stock-status.widget .wd-checkboxes-on li.chosen > a::before {
	content: "\2713";
	background: var(--ux-red);
	border-color: var(--ux-red);
	color: #fff;
}

/* ==========================================================
   6. PRODUCT CARD
   ========================================================== */
/* Woodmart's grid is align-items:flex-start, so cards must claim the row height */
.wd-products .wd-product { height: 100%; }

.wd-products .wd-product-wrapper,
.wd-products .product-wrapper {
	height: 100%;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--ux-line);
	overflow: hidden;
	transition: border-color .25s ease;
}
.wd-products .wd-product:hover .product-wrapper { border-color: var(--ux-dark); }

/* --- image --- */
.wd-products .wd-product-thumb {
	position: relative;
	height: 300px;
	background: #fff;
	overflow: hidden;
}
.wd-products .wd-product-img-link {
	display: block;
	height: 100%;
}
.wd-products .wd-product-img-link img,
.wd-products .product-image-link img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity .35s ease;
}

/* second gallery image, cross-faded (Woodmart hover_image, forced on in inc/shop.php) */
.wd-products .wd-product-img-hover {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity .35s ease;
}
.wd-products .wd-product-img-hover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.wd-products .wd-product:hover .wd-product-img-hover { opacity: 1; }

/* Only fade the main image out when there is actually a second image to reveal.
   Woodmart prints .wd-product-img-hover solely for products with a gallery image
   (30 of 110 here), so fading unconditionally left the other 80 blank on hover.
   If :has() is ever unsupported the rule just doesn't apply: the hover image
   still fades in on top, so there is no blank state either way. */
.wd-products .wd-product-thumb:has(.wd-product-img-hover):hover .wd-product-img-link img {
	opacity: 0;
}

/* --- labels --- */
.wd-products .product-labels {
	top: 0 !important;
	left: 0 !important;
	right: auto !important;
	z-index: 3;
}
.wd-products .product-labels .product-label,
.product-labels .onsale,
.product-labels .new {
	background: var(--ux-red) !important;
	color: #fff !important;
	font-family: 'Archivo', sans-serif;
	font-weight: 700;
	font-size: 11.5px;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: 7px 13px;
	min-width: 0;
	min-height: 0;
	line-height: 1;
	border-radius: 0;
}

/* --- buttons: add-to-cart becomes a bar that rises on hover --- */
.wd-products .wd-product-thumb .wd-buttons {
	position: absolute !important;
	inset: 0 !important;
	transform: none !important;
	background: none !important;
	pointer-events: none;
}
.wd-products .wd-product-thumb .wd-buttons > * { pointer-events: auto; }

.wd-products .wd-product-thumb .wd-add-btn {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0 !important;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity .25s ease, transform .25s ease;
}
.wd-products .wd-product:hover .wd-add-btn {
	opacity: 1;
	transform: translateY(0);
}
.wd-products .wd-add-btn > a {
	width: 100%;
	height: auto !important;
	min-height: 0 !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	background: var(--ux-dark) !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: #fff !important;
	font-family: 'Archivo', sans-serif;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: .04em;
	text-transform: uppercase;
	padding: 14px 12px !important;
}
.wd-products .wd-add-btn > a:hover { background: var(--ux-red) !important; }
/* the bar shows its label, not the icon */
.wd-products .wd-add-btn > a .wd-action-icon { display: none !important; }
.wd-products .wd-add-btn > a .wd-action-text {
	display: inline-block !important;
	position: static !important;
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
	box-shadow: none !important;
	color: #fff !important;
	font-family: 'Archivo', sans-serif !important;
	font-weight: 700 !important;
	font-size: 13px !important;
	line-height: 1.2 !important;
	letter-spacing: .04em !important;
	text-transform: uppercase !important;
	white-space: nowrap;
}
.wd-products .wd-add-btn > a .wd-action-text::before,
.wd-products .wd-add-btn > a .wd-action-text::after { display: none !important; }

/* quick view stays a small overlay in the corner */
.wd-products .wd-product-thumb .wd-quick-view-btn {
	position: absolute;
	top: 0;
	right: 0;
	opacity: 0;
	transition: opacity .25s ease;
}
.wd-products .wd-product:hover .wd-quick-view-btn { opacity: 1; }

/* --- card body --- */
/* Woodmart drives this padding from a custom property, and its own rule lives in
   a footer-deferred CSS part - so set the property rather than fight the cascade,
   and keep a 4-class fallback for loop designs that hard-code the padding. */
.wd-products .wd-product { --wd-prod-bg-cont-sp: 18px 20px 20px; }

.wd-products .wd-product .product-wrapper .product-element-bottom {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 18px 20px 20px;
	border-top: 1px solid var(--ux-line-soft);
}

.wd-products .wd-entities-title {
	margin: 0 !important;
	font-family: 'Archivo', sans-serif;
	font-weight: 800;
	font-size: 17.5px;
	line-height: 1.25;
	letter-spacing: -.01em;
	text-transform: none;
}
.wd-products .wd-entities-title a { color: var(--ux-dark); }
.wd-products .wd-entities-title a:hover { color: var(--ux-red); }

/* category line under the title (Woodmart categories_under_title) */
.wd-products .wd-product-cats {
	margin: 0 !important;
	font-size: 13.5px;
	line-height: 1.35;
	color: var(--ux-muted);
	text-transform: none;
}
.wd-products .wd-product-cats a { color: var(--ux-muted); }
.wd-products .wd-product-cats a:hover { color: var(--ux-red); }

/* --- price row, with the colour dots appended in inc/shop.php --- */
.wd-products .price {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 14px 0 0 !important;
	font-family: 'Archivo', sans-serif;
	font-weight: 900;
	font-size: 20px;
	color: var(--ux-dark);
}
.wd-products .price .woocommerce-Price-currencySymbol {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ux-muted);
}
.wd-products .price del {
	color: var(--ux-muted);
	font-weight: 600;
	font-size: 15px;
}
.wd-products .price ins { text-decoration: none; }

.wd-products .ux-dots {
	display: flex;
	gap: 5px;
	flex-shrink: 0;
	margin-left: auto;
}
.wd-products .ux-dot {
	width: 14px;
	height: 14px;
	border-radius: 999px;
	border: 1px solid var(--ux-line);
}
.wd-products .ux-dot-more {
	font-family: 'Instrument Sans', sans-serif;
	font-size: 11.5px;
	font-weight: 600;
	color: var(--ux-muted);
}

/* the rating is not part of this design */
.wd-products .wd-product-rating { display: none; }

/* ==========================================================
   7. PAGINATION
   ========================================================== */
/* the row is built in inc/shop.php so the label shares it with the pagination */
.ux-loop-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-top: 32px;
}
.ux-loop-footer .wd-loop-footer,
.ux-loop-footer .products-footer { margin: 0; }

/* Woodmart styles these through `nav[class*="-pagination"] li .page-numbers`,
   which outranks a single-class selector - hence matching both nav classes. */
.woocommerce-pagination.wd-pagination ul {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	justify-content: flex-start;
	border: 0 !important;
	margin: 0;
	padding: 0;
	list-style: none;
}
.woocommerce-pagination.wd-pagination li {
	border: 0 !important;
	margin: 0;
}
.woocommerce-pagination.wd-pagination li .page-numbers {
	min-width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border: 1px solid var(--ux-line);
	border-radius: 0;
	font-family: 'Archivo', sans-serif;
	font-weight: 700;
	font-size: 14.5px;
	color: var(--ux-dark);
	padding-inline: 6px;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.woocommerce-pagination.wd-pagination li a.page-numbers:hover {
	background: var(--ux-tint);
	border-color: var(--ux-red);
	color: var(--ux-red);
}
.woocommerce-pagination.wd-pagination li .page-numbers.current {
	background: var(--ux-dark);
	border-color: var(--ux-dark);
	color: #fff;
}
.woocommerce-pagination.wd-pagination li .page-numbers.dots {
	background: none;
	border-color: transparent;
	color: var(--ux-muted);
}

/* Woodmart hides the template's literal arrows with `font-size: 0` and draws its
   own woodmart-font chevron in ::before. Our font-size on .page-numbers outranks
   that, so the text arrow came back and both rendered. The design uses the long
   arrow, so keep the text and drop the icon. */
.woocommerce-pagination.wd-pagination li :is(.next, .prev)::before {
	content: none;
}
.woocommerce-pagination.wd-pagination li :is(.next, .prev) {
	font-size: 16px;
	line-height: 1;
}

.ux-page-label {
	flex-shrink: 0;
	font-size: 14px;
	color: var(--ux-muted);
}

/* ==========================================================
   8. NOTICES
   ========================================================== */
.woocommerce-info,
.woocommerce-message,
.wd-notice {
	background: #fff !important;
	border: 1px solid var(--ux-line) !important;
	border-left: 4px solid var(--ux-red) !important;
	padding: 18px 22px !important;
	font-size: 15px;
	color: var(--ux-dark) !important;
}

/* ==========================================================
   9. RESPONSIVE
   ========================================================== */
@media (max-width: 1024px) {
	.woocommerce .wd-content-layout,
	.archive .wd-content-layout { padding-block: 20px 60px !important; }

	.shop-loop-head {
		flex-direction: column;
		align-items: stretch;
		gap: 14px;
	}
	.shop-loop-head .wd-shop-tools { flex-wrap: wrap; justify-content: space-between; }

	.wd-sidebar.sidebar-container { margin-bottom: 24px; }

	.wd-products .wd-product-thumb { height: 240px; }

	/* touch devices have no hover: keep the add-to-cart bar and second image visible */
	.wd-products .wd-add-btn { opacity: 1; transform: none; }
	.wd-products .wd-quick-view-btn { display: none; }

	.ux-loop-footer { flex-direction: column; align-items: flex-start; gap: 14px; }
}

@media (max-width: 767px) {
	.ux-cats-wrap { padding-top: 18px; }
	.ux-cat { font-size: 12.5px; padding: 10px 14px; }
	.wd-products .wd-product-thumb { height: 200px; }
	.wd-products .wd-product { --wd-prod-bg-cont-sp: 14px 14px 16px; }
	.wd-products .wd-product .product-wrapper .product-element-bottom { padding: 14px 14px 16px; }
	.wd-products .wd-entities-title { font-size: 15.5px; }
	.wd-products .price { font-size: 17px; }
}