/* One layout system for version B. Gutters and container widths per breakpoint;
   shop pages use the full shell, reading and care pages one centred column. */
body.local-cta-vivid-white { --ssa-gutter: 16px; --ssa-shell: 1200px; --ssa-read: 640px; }
@media (min-width: 768px) { body.local-cta-vivid-white { --ssa-gutter: 24px; } }
@media (min-width: 1200px) { body.local-cta-vivid-white { --ssa-gutter: 40px; } }

/* Shell: header, footer and every band share one wrapper. */
body.local-cta-vivid-white .container { box-sizing: border-box; width: 100%; max-width: calc(var(--ssa-shell) + 2 * var(--ssa-gutter)) !important; margin-left: auto !important; margin-right: auto !important; padding-left: var(--ssa-gutter) !important; padding-right: var(--ssa-gutter) !important; }
body.local-cta-vivid-white .container .container { padding-left: 0 !important; padding-right: 0 !important; }

/* Direct page wrappers never add their own width or padding. */
body.local-cta-vivid-white main.main > .container > div, body.local-cta-vivid-white main.main > .container article { box-sizing: border-box; width: 100%; max-width: none; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }

/* Reading and care pages: one centred column for title, text and callouts. */
body.page-template-default.local-cta-vivid-white:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) main.main > .container > div,
body.single-post.local-cta-vivid-white main.main > .container > div,
body.local-article-page.local-cta-vivid-white article.local-article,
body.local-article-page.local-cta-vivid-white main > .container > div { max-width: var(--ssa-read) !important; margin-left: auto !important; margin-right: auto !important; }
body.page-template-default.local-cta-vivid-white:not(.woocommerce-cart):not(.woocommerce-checkout) article .post__title,
body.single-post.local-cta-vivid-white article .post__title { color: #252525; font-weight: 600; }
.local-article-content { max-width: none; }
.local-cta-vivid-white .local-contact-column { max-width: none; padding-left: 0; padding-right: 0; }
body.local-cta-vivid-white main.ssa-guide-unavailable { box-sizing: border-box; max-width: calc(var(--ssa-read) + 2 * var(--ssa-gutter)); padding: 0 var(--ssa-gutter); }
body.page-template-default.local-cta-vivid-white:not(.woocommerce-cart):not(.woocommerce-checkout) #footer-container .getstarted_wrepp .container,
body.single-post.local-cta-vivid-white #footer-container .getstarted_wrepp .container { max-width: calc(var(--ssa-read) + 2 * var(--ssa-gutter)) !important; }
body.page-template-default.local-cta-vivid-white:not(.woocommerce-cart):not(.woocommerce-checkout) article :is(p, li),
body.single-post.local-cta-vivid-white article :is(p, li) { color: #444; }
@media (min-width: 1200px) {
 body.page-template-default.local-cta-vivid-white:not(.woocommerce-cart):not(.woocommerce-checkout) article :is(p, li),
 body.single-post.local-cta-vivid-white article :is(p, li) { font-size: 17px; line-height: 1.75; }
}

/* Results: left-aligned text in the column, without the theme's table layout. */
body.local-cta-vivid-white table:has(a.general-button), body.local-cta-vivid-white table:has(a.general-button) :is(tbody, tr) { display: block; width: 100%; border: 0; }
body.local-cta-vivid-white table:has(a.general-button) tr:first-child { display: flex; gap: 16px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid #e9e5e1; margin-bottom: 20px; }
body.local-cta-vivid-white table:has(a.general-button) :is(th, td) { display: block; padding: 0; border: 0; text-align: left; font-size: inherit; }
body.local-cta-vivid-white table:has(a.general-button) th:empty { display: none; }
body.local-cta-vivid-white table:has(a.general-button) a.general-button { margin-left: 0 !important; }
/* Status icon sits above the left-aligned text and takes no space if its font is unavailable. */
body.local-cta-vivid-white table:has(a.general-button) i.fa { display: block !important; width: auto; height: auto; padding: 0; margin: 0 0 12px; }
body.local-cta-vivid-white table:has(a.general-button) i.fa::before { font-size: 48px; line-height: 1; }

/* Product: compact phone layout below 1024; from there 5/7 columns with a sticky image. */
@media (min-width: 576px) and (max-width: 1023.98px) {
 .local-product-choice-page .product_banner_wrepp .row { display: flex; flex-direction: column; }
 .local-product-choice-page .product_banner_wrepp .row > [class*="col-"] { flex: none; width: 100%; max-width: none; }
 .local-product-choice-page .product_banner_wrepp .row > .col-lg-7 { order: 1; }
 .local-product-choice-page .product_banner_wrepp .row > .col-lg-5 { order: 2; }
 .local-product-image-beside .local-product-visual-header { display: grid; grid-template-columns: minmax(0, 1fr) 120px; column-gap: 24px; row-gap: 10px; align-items: start; margin-bottom: 8px; }
 .local-product-wide-price.local-product-image-beside .local-product-header-text { display: contents; }
 .local-product-image-beside .local-product-header-photo { display: block; grid-column: 2; grid-row: 1; width: 120px; height: auto; aspect-ratio: 1; object-fit: contain; }
 .local-product-wide-price.local-product-image-beside .product_col2 h1 { grid-column: 1; grid-row: 1; margin-bottom: 0; }
 .local-product-wide-price.local-product-image-beside .product_col2 h3 { grid-column: 1 / -1; grid-row: 2; margin-bottom: 0; }
 .local-product-image-beside .product_col1 img.w-100, .local-product-image-beside .product_col1 .local-product-photo-stage { display: none; }
}
@media (min-width: 1024px) {
 .local-product-choice-page .product_banner_wrepp .row { align-items: flex-start; }
 .local-product-choice-page .product_banner_wrepp .row > .col-lg-5 { flex: 0 0 41.667%; width: 41.667%; max-width: none; position: sticky; top: 24px; }
 .local-product-choice-page .product_banner_wrepp .row > .col-lg-7 { flex: 0 0 58.333%; width: 58.333%; max-width: none; }
 .local-product-choice-page .product_col2 { max-width: none; margin-left: 0; margin-right: 0; }
}

/* Footer: four columns only where they fit. */
@media (min-width: 768px) and (max-width: 1023.98px) {
 body.local-cta-vivid-white #footer-container .row > .col-md-3 { flex: 0 0 50%; width: 50%; max-width: 50%; }
}

/* Home hero: the shipping line lines up with the button it belongs to. */
@media (min-width: 576px) {
 .banner_wrepp.local-photo-ready .bestellen-div { text-align: left; }
 .banner_wrepp.local-photo-ready .bestellen-div h3 { margin: 8px 0 0; text-align: left; font-size: 14px; font-weight: 400; line-height: 1.5; color: #555; }
}

/* Video: one centred size on home and product. */
.howwork_wrepp .video_box { text-align: center; }
.howwork_wrepp .video_box video { display: block; width: 100%; max-width: 833px; height: auto; margin-left: auto; margin-right: auto; }

/* Order overview: copy-led page, so one 960 column shared with its footer band. */
body.local-category-editorial.local-cta-vivid-white main.main > .container > div { max-width: 960px !important; margin-left: auto !important; margin-right: auto !important; }
body.local-category-editorial.local-cta-vivid-white #footer-container .getstarted_wrepp .container { max-width: calc(960px + 2 * var(--ssa-gutter)) !important; }

/* Results: steady spacing before the review form. */
body.local-cta-vivid-white table:has(a.general-button) ~ hr { margin: 32px 0 !important; }

/* Home review cards: name and stars stack where three cards get narrow. */
.testimonial_wrepp .testiobox > h4 { white-space: nowrap; }
@media (min-width: 768px) and (max-width: 1099.98px) {
 .testimonial_wrepp .testiobox { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
 .testimonial_wrepp .testiobox > .testistar { grid-column: 1; }
}

/* Small details. */
body.local-cta-vivid-white .post__title { overflow-wrap: anywhere; }
@media (max-width: 360px) { body.local-cta-vivid-white .post__title { font-size: 24px; } }
@media (max-width: 767.98px) { body.local-cta-vivid-white form:has(> input[type="submit"].h-12) > input.form-control { width: 100%; margin-right: 0; } }
body.local-cta-vivid-white textarea { border: 1px solid #aaa; border-radius: var(--local-control-radius); }
.local-choice-assistance > strong, .local-choice-assistance > p { font-size: 15px !important; line-height: 1.7 !important; }