/* Additional styles for catalog, homepage and service pages. */
/* Legal/service pages: the lead paragraph sits as far below the page title as it does above the first section (36px). The hero's 28px bottom margin collapses with this margin, so 36px here yields 36px in total. Higher specificity than the page-level inline rule (margin:-12px 0 36px). */
.asv-legal p.asv-lead {
	margin-top: 36px;
}


/* Startseite "Neu im Shop": bei 3 Spalten (690-999px) nur 3 Produkte, kein einzelnes 4. in der zweiten Reihe. Desktop 4, Mobil 2+2 bleiben. */
@media (min-width:690px) and (max-width:999px){.post-579 .entry-content ul.products > li.product:nth-child(n+4){display:none!important}}

/* Startseite "Neu im Shop": bis 419px 1 Produkt pro Zeile, 420-689px 2 (danach 3). */
@media (max-width:419px){html:not(.asv-list) .post-579 .entry-content ul.products{grid-template-columns:minmax(0,1fr)!important;gap:12px!important}}

/* Kategorieseiten: bis 419px 1 Produkt pro Zeile, 420-689px 2 (Listenansicht bleibt). */
@media (max-width:419px){html:not(.asv-list) body.tax-product_cat ul.products{grid-template-columns:minmax(0,1fr)!important;gap:12px!important}}

/* Kategorie/Shop/Suche: bis 419px Filterfeld in eigener Zeile, darunter Sortierung links und Ansichtsumschalter rechts. */
@media (max-width:419px){html body .woo-listing-top{flex-wrap:wrap!important;row-gap:8px!important}html body .woo-listing-top .asv-filter{flex:1 0 100%!important;max-width:none!important;order:0}html body .woo-listing-top .woocommerce-ordering{order:1}html body .woo-listing-top .asv-view-toggle{order:2;margin-left:auto!important}}

/* Sortierfeld (Icon-Variante) so gross wie ein Ansichts-Button: 36x36. */
html body .woo-listing-top .woocommerce-ordering{width:36px!important;flex:0 0 36px!important}
html body .woo-listing-top .woocommerce-ordering select{width:36px!important}
html body .woo-listing-top .woocommerce-ordering svg{inset-inline-start:11px!important;inset-inline-end:auto!important}

/* Toolbar <=419px: Sortier-Icon direkt links neben den Ansichts-Icons, rechtsbuendig, Abstand 4px */
@media (max-width:419px){html body .woo-listing-top .woocommerce-ordering{order:1;margin-left:auto!important;margin-right:-4px!important}html body .woo-listing-top .asv-view-toggle{order:2;margin-left:0!important}}

/* Sortierfeld auf allen Breiten: reiner Icon-Button wie die Ansichts-Icons (36x36, Rahmen var(--theme-palette-color-5), Icon 18px), 4px links neben dem Umschalter */
html body .woo-listing-top .woocommerce-ordering{position:relative;width:36px!important;flex:0 0 36px!important;margin:0 -9px 0 0!important}
html body .woo-listing-top .woocommerce-ordering select{width:36px!important;height:36px!important;padding:0!important;border:1px solid var(--theme-palette-color-5)!important;border-radius:6px!important;background:var(--theme-palette-color-8) none!important;color:transparent!important;-webkit-appearance:none;appearance:none;cursor:pointer}
html body .woo-listing-top .woocommerce-ordering select:hover{border-color:var(--theme-palette-color-2)!important}
html body .woo-listing-top .woocommerce-ordering svg{display:block!important;position:absolute!important;width:18px!important;height:18px!important;inset:9px auto auto 9px!important;transform:none!important;color:var(--theme-palette-color-4);pointer-events:none}
@media (max-width:689px){html body .woo-listing-top .woocommerce-ordering{margin-right:-4px!important}}
@media (max-width:419px){html body .woo-listing-top .woocommerce-ordering{margin-left:auto!important}}
html body .woo-listing-top .asv-view-toggle{margin-left:0!important}


/* Blocksy uses the hover link color for the active page; keep the active marker in CI petrol. */
body:is(.post-type-archive-product,.tax-product_cat,.tax-product_tag,.tax-product_brand,.search) [data-pagination="simple"] .page-numbers.current,
body:is(.post-type-archive-product,.tax-product_cat,.tax-product_tag,.tax-product_brand,.search) [data-pagination="next_prev"] .page-numbers.current {
 background:var(--theme-palette-color-1);
 color:var(--theme-palette-color-8);
}

/* The 404 template has no separate Blocksy title-color setting. */
body.error404 .hero-section .page-title { color:var(--theme-palette-color-3); }

/* Account forms share the field and button treatment of the other service pages. */
body.woocommerce-account :is(form.woocommerce-form-login,form.lost_reset_password) {
 max-width:640px;
 margin:0;
 --theme-form-field-background-initial-color:var(--theme-palette-color-8);
 --theme-form-field-background-focus-color:var(--theme-palette-color-8);
 --theme-form-field-border-initial-color:var(--theme-palette-color-5);
 --theme-form-field-border-focus-color:var(--theme-palette-color-1);
 --theme-form-field-border-radius:6px;
 --theme-form-field-height:44px;
}
body.woocommerce-account :is(form.woocommerce-form-login,form.lost_reset_password) .form-row {
 padding:0;
 margin:0 0 20px;
}
body.woocommerce-account :is(form.woocommerce-form-login,form.lost_reset_password) label { font-size:14px; font-weight:600; }
body.woocommerce-account :is(form.woocommerce-form-login,form.lost_reset_password) button[type=submit] { font-size:14px; font-weight:600; border-radius:6px; }
body.woocommerce-account form.lost_reset_password > p:first-child { color:var(--theme-palette-color-4); }
body.woocommerce-account .woocommerce-form-login .woocommerce-LostPassword { margin-bottom:0; }
/* Missing page: a restrained technical drawing, with search in the shared header. */
.asv-404-hero { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:64px; align-items:center; padding:64px 0 88px; }
.asv-404-eyebrow { color:var(--theme-palette-color-1); font-size:14px; font-weight:700; margin:0 0 24px; }
.asv-404-copy h1 { color:var(--theme-palette-color-3); font-size:clamp(34px,4vw,52px); line-height:1.14; letter-spacing:-.025em; margin:0 0 30px; }
.asv-404-lead { color:var(--theme-palette-color-3); font-size:18px; line-height:1.75; margin:0; max-width:560px; }
.asv-404-links { display:flex; align-items:center; flex-wrap:wrap; gap:20px 28px; margin-top:36px; }
.asv-404-links a,.asv-404-help > a { display:inline-flex; align-items:center; justify-content:center; gap:12px; color:var(--theme-palette-color-1); font-size:15px; font-weight:600; }
.asv-404-links a:hover,.asv-404-help > a:hover { color:var(--theme-palette-color-2); }
.asv-404-links .asv-404-primary { min-height:48px; padding:12px 22px; border-radius:6px; background:var(--theme-palette-color-1); color:var(--theme-palette-color-8); }
.asv-404-links .asv-404-primary:is(:hover,:focus-visible) { background:var(--theme-palette-color-2); color:var(--theme-palette-color-8); }
.asv-404-art { color:var(--theme-palette-color-1); }
.asv-404-art svg { display:block; width:100%; height:auto; }
.asv-404-digits { stroke:var(--theme-palette-color-1); fill:var(--asv-tint); }
.asv-404-construction { stroke:color-mix(in srgb,var(--theme-palette-color-3) 22%,var(--theme-palette-color-8)); }
.asv-404-help { display:flex; align-items:flex-start; flex-direction:column; gap:18px; padding:36px 0 24px; border-top:1px solid var(--theme-palette-color-5); }
.asv-404-help h2 { font-size:18px; color:var(--theme-palette-color-3); margin:0 0 10px; }
.asv-404-help p { font-size:15px; color:var(--theme-palette-color-4); margin:0; }
@media(max-width:999px) { .asv-404-hero { gap:28px; padding:48px 0 64px; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); } .asv-404-lead { font-size:16px; } }
@media(max-width:689px) { .asv-404-hero { grid-template-columns:minmax(0,1fr); gap:32px; padding:20px 0 52px; } .asv-404-art { grid-row:1; width:min(100%,300px); margin:0 auto; } .asv-404-copy h1 { font-size:34px; margin-bottom:24px; } .asv-404-eyebrow { margin-bottom:20px; } .asv-404-links { gap:18px 24px; margin-top:30px; } .asv-404-help { padding:30px 0 16px; } }