/* =========================================================================
   Agrolatvija — Kategorijas lapa V1.0
   Integration layer: styles injected elements (hero, chips, teaser, related)
   AND restyles WoodMart's NATIVE category components to the spec tokens.
   Everything scoped to body.agro-cat-page so the rest of the site is untouched.
   WoodMart keeps all functionality — this only changes appearance + adds blocks.
   Breakpoints: 1100 / 860 / 760 / 640 / 440
   ========================================================================= */

body.agro-cat-page {
	/* Colours/fonts inherit WoodMart theme options (Theme Settings → Colors/Typography);
	   the hex/font after the comma is only a fallback if the option is unset. */
	--brand: var(--wd-primary-color, #0F3D2E);
	--brand-2: color-mix(in srgb, var(--wd-primary-color, #0F3D2E) 82%, #fff);
	--accent: var(--wd-alternative-color, #E8B84C);
	--red: #B43A2E;
	--bg: var(--wd-main-bgcolor, #F6F4EF);
	--surface: #FFFFFF;
	--surface-2: #EFEBE2;
	--ink: var(--wd-title-color, #121512);
	--muted: var(--wd-text-color, #5c6660);
	--line: var(--wd-form-brd-color, #E3DFD5);
	--radius-card: 15px;
	--radius-pill: 999px;
	--shadow-2: 0 6px 22px rgba(18, 21, 18, .08);
	--font: var(--wd-text-font, "Inter Tight", system-ui, sans-serif);
	--font-title: var(--wd-title-font, "Inter Tight", system-ui, sans-serif);
}
/* Page width follows WoodMart's Site Width setting (no hardcoded override). */

/* Hide WoodMart's native breadcrumb — we render our own at the top of the hero.
   (Navigation preserved, just restyled + repositioned.) */
body.agro-cat-page .shop-loop-head .wd-breadcrumbs,
body.agro-cat-page .wd-breadcrumbs.woocommerce-breadcrumb { display: none; }

/* =========================================================================
   INJECTED BLOCKS (full-width, above/below the native sidebar+grid row)
   ========================================================================= */
.agro-cat-top, .agro-cat-bottom {
	font-family: var(--font);
	color: var(--ink);
}
.agro-cat-top * , .agro-cat-bottom * { box-sizing: border-box; }
/* Top block sits ABOVE WoodMart's <main> grid (full width). */
.agro-cat-top { padding-top: 8px; }
/* Bottom block is a direct child of WoodMart's grid <main> — span every column. */
.agro-cat-bottom { grid-column: 1 / -1; margin-top: 44px; }

.agro-eyebrow {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; font-variant-numeric: tabular-nums;
}

/* focus ring — brand */
.agro-cat-top a:focus-visible, .agro-cat-top button:focus-visible,
.agro-cat-bottom a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }

/* ---------- 1. Breadcrumb ---------- */
.agro-crumbs { padding: 18px 0 6px; }
.agro-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 13px; line-height: 1.4; color: var(--muted); }
.agro-crumbs li { display: inline-flex; align-items: center; gap: 6px; }
.agro-crumbs li::after { content: "/"; color: var(--line); line-height: 1.4; }
.agro-crumbs li:last-child::after { content: none; }
/* Normalise links and the current-page <span> to the same box so the bold
   last crumb sits on the exact same line as the <a> crumbs. */
.agro-crumbs a, .agro-crumbs span { display: inline-block; line-height: 1.4; vertical-align: middle; margin: 0; padding: 0; border: 0; color: inherit; text-decoration: none; }
.agro-crumbs a:hover { color: var(--brand); }
.agro-crumbs [aria-current="page"] { color: var(--ink); font-weight: 600; }

/* ---------- 2. Hero ---------- */
.agro-hero {
	display: grid; grid-template-columns: 1.2fr 1fr;
	background: var(--cat-color, var(--brand)); color: #fff;
	border-radius: 20px; overflow: hidden; margin-top: 6px;
}
.agro-hero__text { padding: 44px; display: flex; flex-direction: column; gap: 16px; }
.agro-hero .agro-eyebrow { color: rgba(255,255,255,.72); }
.agro-h1 { font-size: 34px; line-height: 1.12; font-weight: 700; margin: 0; letter-spacing: -.01em; color: #fff; }
.agro-hero__desc { color: rgba(255,255,255,.86); font-size: 15px; max-width: 52ch; }
.agro-hero__desc p { margin: 0 0 .4em; }
.agro-hero__tip { display: inline-flex; align-items: flex-start; gap: 8px; margin: 4px 0 0;
	background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); padding: 10px 14px;
	border-radius: 12px; font-size: 13.5px; color: #fff; }
.agro-hero__tip svg { color: var(--accent); flex: none; margin-top: 1px; }
.agro-hero__stats { display: flex; gap: 28px; margin-top: auto; padding-top: 12px; }
.agro-stat { display: flex; flex-direction: column; }
.agro-stat__num { font-family: "JetBrains Mono", monospace; font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.agro-stat__num .woocommerce-Price-amount { font-size: 20px; color: #fff; }
.agro-stat__lbl { font-size: 12px; color: rgba(255,255,255,.7); text-transform: uppercase; letter-spacing: .03em; }
.agro-hero__media { position: relative; min-height: 300px; background: rgba(0,0,0,.12); }
.agro-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Texture + depth overlay on the hero image */
.agro-hero__media::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background:
		repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 14px, rgba(255,255,255,0) 14px 28px),
		linear-gradient(135deg, rgba(255,255,255,.06), rgba(0,0,0,.22));
}
.agro-hero__placeholder { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,.35); }

/* ---------- 2B. Tractor chooser ---------- */
.agro-ts { margin-top: 18px; }
.agro-ts__teaser { width: 100%; display: flex; align-items: center; gap: 16px; cursor: pointer;
	background: linear-gradient(90deg, var(--surface-2), #fff); border: 1px solid var(--line);
	border-radius: var(--radius-card); padding: 16px 20px; text-align: left; color: var(--ink); box-shadow: var(--shadow-2); }
.agro-ts__teaser:hover { border-color: var(--brand-2); }
.agro-ts__badge { background: var(--brand); color: #fff; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: var(--radius-pill); flex: none; }
.agro-ts__txt { flex: 1; font-size: 14.5px; }
.agro-ts__cta { display: inline-flex; align-items: center; gap: 6px; color: var(--brand); font-weight: 600; white-space: nowrap; }
.agro-ts__panel { margin-top: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 20px; box-shadow: var(--shadow-2); }
.agro-ts__panelhead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.agro-ts__close { background: none; border: none; font-size: 24px; line-height: 1; cursor: pointer; color: var(--muted); }
.agro-ts__note { color: var(--muted); font-size: 14px; margin: 0; }

/* ---------- 3. Subcategory chips ---------- */
.agro-subchips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.agro-chip { display: inline-flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--line);
	border-radius: var(--radius-pill); padding: 8px 14px; font-size: 13.5px; font-weight: 500; text-decoration: none; color: var(--ink); transition: .15s; }
.agro-chip:hover { border-color: var(--brand); color: var(--brand); }
.agro-chip__count { font-family: "JetBrains Mono", monospace; font-size: 11.5px; color: var(--muted); background: var(--surface-2);
	border-radius: var(--radius-pill); padding: 1px 7px; font-variant-numeric: tabular-nums; }

/* ---------- 4D. Related ---------- */
.agro-related__title { font-size: 20px; margin: 0 0 16px; font-weight: 700; }
.agro-related__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.agro-relcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card);
	padding: 18px 20px; display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--ink); transition: .15s; }
.agro-relcard:hover { border-color: var(--brand); box-shadow: var(--shadow-2); }
.agro-relcard__name { font-weight: 600; }
.agro-relcard__count { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* =========================================================================
   RESTYLE — WoodMart NATIVE components to spec tokens (functionality intact)
   ========================================================================= */
body.agro-cat-page { background: var(--bg); }

/* ---- Toolbar: result count + ordering ---- */
body.agro-cat-page .shop-loop-head { border: none; padding: 0 0 4px; margin-bottom: 18px; }
body.agro-cat-page .woocommerce-result-count { color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; }
body.agro-cat-page .woocommerce-ordering select.orderby,
body.agro-cat-page .wd-shop-tools .orderby {
	border: 1px solid var(--line) !important; border-radius: 8px !important; background: var(--surface) !important;
	padding: 8px 12px !important; font-size: 13.5px !important; color: var(--ink) !important; box-shadow: none !important;
}
/* grid/list view switch */
body.agro-cat-page .wd-shop-view a, body.agro-cat-page .shop-view a { border-radius: 8px; }
body.agro-cat-page .wd-shop-view a.wd-active, body.agro-cat-page .wd-shop-view a:hover { color: var(--brand); }

/* ---- Filter sidebar (WoodMart widgets) — restyled to spec §4.2 ---- */
body.agro-cat-page .wd-sidebar.sidebar-container { max-width: 300px; font-family: var(--font); }
body.agro-cat-page .wd-sidebar .wd-heading { display: none; } /* off-canvas close header (desktop) */

/* Each widget = white accordion card */
body.agro-cat-page .wd-sidebar .wd-widget.widget {
	background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card);
	padding: 0 18px; margin: 0 0 14px;
}
/* Title = clickable accordion header + chevron */
body.agro-cat-page .wd-sidebar .wd-widget .widget-title {
	position: relative; display: flex; align-items: center; justify-content: space-between;
	margin: 0 !important; padding: 15px 0 !important; cursor: pointer;
	font-family: var(--font); font-size: 14px !important; font-weight: 600 !important;
	color: var(--ink) !important; text-transform: none !important; letter-spacing: 0 !important;
	border-bottom: 1px solid var(--line); line-height: 1.3;
}
body.agro-cat-page .wd-sidebar .wd-widget .widget-title::before { display: none !important; }
body.agro-cat-page .wd-sidebar .wd-widget .widget-title::after {
	content: "" !important; display: block !important; width: 8px; height: 8px; flex: none; margin-left: 10px;
	border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
	transform: translateY(-2px) rotate(45deg); transition: transform .2s; background: none !important; position: static !important;
}
body.agro-cat-page .wd-sidebar .wd-widget.agro-collapsed .widget-title { border-bottom-color: transparent; }
body.agro-cat-page .wd-sidebar .wd-widget.agro-collapsed .widget-title::after { transform: translateY(2px) rotate(-135deg); }
/* Widget body */
body.agro-cat-page .wd-sidebar .wd-widget > *:not(.widget-title) { padding: 14px 0 16px; margin: 0; }
body.agro-cat-page .wd-sidebar .wd-widget.agro-collapsed > *:not(.widget-title) { display: none; }

/* Layered-nav rows: name left, count right */
body.agro-cat-page .woocommerce-widget-layered-nav-list { list-style: none; margin: 0; padding: 0;
	display: flex; flex-direction: column; gap: 2px; max-height: 260px; overflow: auto; }
body.agro-cat-page .woocommerce-widget-layered-nav-list__item {
	display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0; padding: 5px 0; font-size: 13.5px; }
body.agro-cat-page .woocommerce-widget-layered-nav-list__item::before { display: none !important; } /* kill woodmart bullet */
body.agro-cat-page .woocommerce-widget-layered-nav-list__item a { flex: 1; color: var(--ink); text-decoration: none; }
body.agro-cat-page .woocommerce-widget-layered-nav-list__item a:hover { color: var(--brand); }
body.agro-cat-page .woocommerce-widget-layered-nav-list__item .count {
	font-family: "JetBrains Mono", monospace; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
body.agro-cat-page .woocommerce-widget-layered-nav-list__item.chosen a { color: var(--brand); font-weight: 600; }
body.agro-cat-page .woocommerce-widget-layered-nav-list__item.chosen a::before {
	content: "✕"; font-size: 10px; margin-right: 6px; color: var(--red); }

/* Swatch/brand filters (when attribute is a colour/image type) */
body.agro-cat-page .wd-swatches-filter { gap: 8px; }
body.agro-cat-page input[type=checkbox]:checked { accent-color: var(--brand); }

/* Price filter */
body.agro-cat-page .widget_price_filter .price_slider_amount {
	display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
body.agro-cat-page .widget_price_filter input[type=text] {
	width: 74px; border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px;
	font-family: "JetBrains Mono", monospace; font-size: 13px; font-variant-numeric: tabular-nums; }
body.agro-cat-page .widget_price_filter .price_label { width: 100%; order: 2; color: var(--muted); font-size: 12.5px; }
body.agro-cat-page .widget_price_filter .price_label .amount { font-family: "JetBrains Mono", monospace; color: var(--ink); }
body.agro-cat-page .widget_price_filter .button {
	order: 3; background: var(--brand) !important; color: #fff !important; border: none !important;
	border-radius: var(--radius-pill) !important; padding: 7px 16px !important; font-weight: 600 !important; box-shadow: none !important; }
body.agro-cat-page .widget_price_filter .button:hover { background: var(--brand-2) !important; }
/* jQuery-UI slider */
body.agro-cat-page .price_slider_wrapper .ui-slider,
body.agro-cat-page .widget_price_filter .ui-slider {
	background: var(--surface-2) !important; height: 4px !important; border: none !important; border-radius: 4px !important; margin: 6px 0 16px !important; }
body.agro-cat-page .price_slider_wrapper .ui-slider .ui-slider-range,
body.agro-cat-page .widget_price_filter .ui-slider .ui-slider-range { background: var(--brand) !important; }
body.agro-cat-page .price_slider_wrapper .ui-slider .ui-slider-handle,
body.agro-cat-page .widget_price_filter .ui-slider .ui-slider-handle {
	background: #fff !important; border: 2px solid var(--brand) !important; width: 16px !important; height: 16px !important;
	border-radius: 50% !important; top: -6px !important; box-shadow: 0 1px 3px rgba(0,0,0,.2) !important; }

/* Active-filter chips (WoodMart woodmart_get_active_filters) */
body.agro-cat-page .wd-active-filters .wd-active-filter-item,
body.agro-cat-page .wd-active-filters a { border-radius: var(--radius-pill) !important; }

/* ---- Product grid + cards ---- */
body.agro-cat-page ul.products.wd-products { gap: 20px; }
body.agro-cat-page .wd-product .product-wrapper {
	background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card);
	overflow: hidden; transition: box-shadow .18s;
}
body.agro-cat-page .wd-product:hover .product-wrapper { box-shadow: var(--shadow-2); }
body.agro-cat-page .products-bordered-grid.wd-products .wd-product { border: none !important; }
body.agro-cat-page .wd-product .wd-entities-title { font-family: var(--font); }
body.agro-cat-page .wd-product .wd-entities-title a { font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--ink); }
body.agro-cat-page .wd-product .wd-entities-title a:hover { color: var(--brand); }
body.agro-cat-page .wd-product .price { font-family: var(--font); font-weight: 700; font-size: 16px; color: var(--ink); font-variant-numeric: tabular-nums; }
body.agro-cat-page .wd-product .price del { color: var(--muted); font-weight: 400; }
body.agro-cat-page .wd-product .price ins { color: var(--red); text-decoration: none; }
/* sale / new labels -> spec colours */
body.agro-cat-page .product-labels .onsale, body.agro-cat-page .wd-product .onsale {
	background: var(--red) !important; color: #fff !important; border-radius: var(--radius-pill) !important; }
body.agro-cat-page .product-labels .new-label, body.agro-cat-page .product-labels .featured-label {
	background: var(--brand-2) !important; color: #fff !important; border-radius: var(--radius-pill) !important; }
/* add to cart -> brand green pill */
body.agro-cat-page .wd-product .add_to_cart_button,
body.agro-cat-page .wd-product .button.add-to-cart-loop,
body.agro-cat-page .wd-product .single_add_to_cart_button {
	background: var(--brand) !important; color: #fff !important; border-radius: var(--radius-pill) !important;
	font-weight: 600 !important; border: none !important; box-shadow: none !important;
}
body.agro-cat-page .wd-product .add_to_cart_button:hover { background: var(--brand-2) !important; }
/* hover action buttons (compare/quick view) accent */
body.agro-cat-page .wd-product .wd-buttons a:hover { color: var(--brand); }

/* ---- Pagination ---- */
body.agro-cat-page .woocommerce-pagination.wd-pagination .page-numbers {
	border: 1px solid var(--line); border-radius: 8px; min-width: 40px; height: 40px; display: inline-grid; place-items: center;
	background: var(--surface); font-variant-numeric: tabular-nums; color: var(--ink);
}
body.agro-cat-page .woocommerce-pagination.wd-pagination .page-numbers.current {
	background: var(--brand) !important; color: #fff !important; border-color: var(--brand) !important; }
body.agro-cat-page .woocommerce-pagination.wd-pagination .page-numbers:hover { border-color: var(--brand); }

/* ---- "no products" notice ---- */
body.agro-cat-page .woocommerce-info { border-radius: var(--radius-card); }

/* =========================================================================
   RESPONSIVE (matches spec + WoodMart breakpoints)
   ========================================================================= */
@media (max-width: 1100px) {
	.agro-hero { grid-template-columns: 1fr; }
	.agro-hero__media { min-height: 220px; order: -1; }
	.agro-related__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
	.agro-hero__text { padding: 30px 26px; }
	.agro-h1 { font-size: 28px; }
}
@media (max-width: 760px) {
	.agro-hero__stats { gap: 20px; }
}
@media (max-width: 640px) {
	.agro-related__grid { grid-template-columns: 1fr; }
	.agro-hero__stats { flex-wrap: wrap; }
}
@media (max-width: 440px) {
	.agro-hero__text { padding: 24px 18px; }
}