/* topro.nl on top of home.css — Figma 9UVH8cbzI5aDjHdo11RpBu (Home 1:24,
   Home Mobile 1:588). Same layout as farmula.de; what differs is here:
   the brand tokens, Nunito as body face, and the few elements Topro styles
   its own way (header lines, blue bands, light footer). */

@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(assets/fonts/nunito-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(assets/fonts/nunito-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Nunito Italic for the testimonial quote (Figma: Nunito Italic 400). Without
   it the browser slants the upright face, which reads heavier. */
@font-face {
  font-family: 'Nunito';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(assets/fonts/nunito-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(assets/fonts/nunito-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Figma variables. home.css's --blue is farmula's navy for headings, text on
   cards and dark grounds; on topro that role is "Black", and the blues get
   names of their own for the bands and links that are blue here. */
:root {
  --blue: #302e4a;
  --green: #63b33a;
  --dark-grey: #3b3a47;
  --light-grey: #b8b7cc;
  --light-blue: #f1f5fc;   /* Air Blue: section grounds, menu bar */
  --divider: #dee5f2;      /* Light Blue: rules, borders */
  --sea-blue: #0f8cc6;
  --tag: #ffbf7e;
  --tag-text: #302e4a;
  --topro-blue: #21aff1;
  --topro-dark-blue: #0f8cc6;
  --font-body: "Nunito", sans-serif;
}

/* --- header (1:524) ------------------------------------------------------ */
.navbar { border-bottom-color: var(--divider); }
.navbar__logo img { width: 183px; height: 64px; object-fit: contain; }
.navbar__search input,
.navbar__search .dgwt-wcas-search-input { border-color: var(--light-blue); }
.navbar__info--site {
  right: 348px;
  /* two lines, centred on the 104px bar (Figma's three started at 21px) */
  top: 33px;
  gap: 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--blue);
}
.navbar__info--site .accent { color: var(--topro-blue); }
.navbar__lang { position: absolute; left: 1455px; top: 30px; z-index: 5; }
.navbar__lang summary {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 44px;
  padding: 0 8px;
  border: 1px solid var(--divider);
  border-radius: 4px;
  background: #fff;
  font-size: 15px;
  font-weight: 600;
  color: var(--blue);
  cursor: pointer;
  list-style: none;
}
.navbar__lang summary::-webkit-details-marker { display: none; }
.navbar__lang[open] summary { border-color: var(--topro-blue); }
/* round flags, as in Figma (flag_en / flag_nl: 20px circles) */
.navbar__lang img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
/* Figma 23:546: a narrow panel right under the button, every language as
   flag + code, the current one on Air Blue */
.navbar__lang-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-width: 100%;
  padding: 8px;
  border: 1px solid var(--divider);
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
}
.navbar__lang-list a {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 15px;
  font-weight: 600;
  color: var(--blue);
}
.navbar__lang-list a.is-active,
.navbar__lang-list a:hover { background: var(--light-blue); }
.navbar__account { left: 1529px; top: 30px; }
.navbar__cart { left: 1585px; top: 30px; }
.navbar .icon-btn { border-color: var(--divider); }

/* --- hero (1:143): blue ground, dark-blue panel, green button ------------ */
.hero__slide--goal { background: var(--topro-blue); }
.hero__slide--goal .hero__content { background: var(--topro-dark-blue); }

/* --- product cards (1:25): name and price in dark blue ------------------- */
.product-card h3,
.product-card h3 a { color: var(--topro-dark-blue); }
.product-card__price { color: var(--topro-dark-blue); }

/* --- testimonials (1:248): the blue band --------------------------------- */
.testimonials { background: var(--topro-blue); }

/* --- footer (1:157): light, dark text, blue links, four columns ---------- */
.footer--site .footer__main {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  height: auto;
  padding: 80px var(--page-margin);
  background: var(--light-blue);
  color: var(--blue);
}
.footer--site .footer__col { position: static; display: flex; flex-direction: column; gap: 40px; }
.footer--site .footer__col h3 { font-family: var(--font-body); font-size: 20px; line-height: 26px; font-weight: 600; color: var(--blue); }
.footer--site .footer__col h3 a { color: inherit; }
.footer--site .footer__col ul { width: auto; margin-top: 16px; gap: 8px; font-size: 15px; font-weight: 400; }
/* Darker than --topro-dark-blue: #0f8cc6 on the Air Blue ground is 3.4:1,
   below the 4.5:1 that 15px text needs. #0a6a99 is 5.4:1. */
.footer--site .footer__col ul a { color: #0a6a99; }
.footer--site .footer__col ul a:hover { text-decoration: underline; }
.footer--site .footer__address { font-size: 18px; line-height: 26px; }
.footer--site .footer__address h3 { margin-bottom: 16px; }
.footer--site .footer__address p { margin: 0; }
.footer--site .footer__address a { color: inherit; font-weight: 400; }
.footer--site .footer__tiles { width: auto; gap: 16px; }
.footer--site .footer__tile { box-shadow: 0 1px 2px rgba(48, 46, 74, 0.06); }
.footer--site .footer__tile img { max-width: 80px; max-height: 32px; object-fit: contain; }
.footer--site .footer__bottom { background: var(--divider); color: var(--blue); }
.footer--site .footer__bottom p { opacity: 1; font-size: 15px; }
.footer--site .footer__badges .footer__tile { width: auto; height: auto; background: none; box-shadow: none; }
.footer--site .footer__badges img { width: auto; height: 50px; max-width: none; max-height: none; }

/* Cards and panels round at 8px on topro (farmula: 24px) */
:root { --radius-card: 8px; }

/* --- hero (1:143): one slide, the photo mirrored, 20/36 lead ------------- */
.hero--topro .hero__media--1 { object-fit: cover; }
.hero--topro .hero__slide--goal .hero__content {
  top: 50%;
  transform: translateY(calc(-50% - 7px));
  border-radius: 0 8px 8px 0;
}
.hero--topro h1 { font-weight: 600; }
.hero--topro .hero__lead { font-family: "DM Sans", sans-serif; font-size: 20px; line-height: 36px; }

/* Slide 1 since 2026-10-02: the Herbstaktion banner in farmula.de's Figma
   version (home.css, .hero__slide--q4-text, ground is the picture's navy).
   The dots keep a shadow for the video slide's light sky. */
.hero--topro .dot { filter: drop-shadow(0 0 2px rgba(6, 20, 101, 0.6)); }

/* --- testimonial (1:248): no quote mark, white on the blue band ---------- */
.testimonials .testimonials__line { border-color: rgba(255, 255, 255, .4); }

/* --- Zeitung + newsletter (1:452): in flow, image on the right ----------- */
.brochure--topro {
  display: grid;
  grid-template-columns: 870px 580px;
  justify-content: space-between;
  gap: 32px 80px;
  height: auto;
  margin-top: 0;
  padding: 80px var(--page-margin);
  border-radius: 0;
}
.brochure--topro .brochure__intro,
.brochure--topro .newsletter,
.brochure--topro .brochure__cover { position: static; width: auto; height: auto; }
.brochure--topro .brochure__intro h2 { font-size: 40px; letter-spacing: -1.6px; font-weight: 600; }
.brochure--topro .newsletter { grid-column: 1; padding: 24px 40px; border-color: var(--divider); }
.brochure--topro .newsletter__form { border-color: var(--divider); }
.brochure--topro .brochure__cover { grid-column: 2; grid-row: 1 / span 2; align-self: center; justify-self: center; position: relative; left: auto; top: auto; }

/* --- services (parts/services.php): Topro blue accent, dark-blue icon
   circles; the cow and book icons are recoloured copies in assets/ ------ */
.services__heading .accent { color: var(--topro-blue); }
.service-card__icon--circle { background: var(--topro-dark-blue); }
/* team row (parts/team.php): the Zeitung band follows in flow, so the row
   needs its own room before it (farmula.de's band brings its own) */
.team { padding-bottom: 80px; }

/* --- Advice's page blocks in the text page (parts/page-blocks.php) ------ */
.page-block { margin: 0 0 32px; }
.page-block > :last-child { margin-bottom: 0; }
.page-block iframe { max-width: 100%; }
.page-block--media { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 32px; align-items: start; }
.page-block--image-left { grid-template-columns: 280px minmax(0, 1fr); }
.page-block--image-left .page-block__images { order: -1; }
.page-block__text > :last-child { margin-bottom: 0; }
.page-block__images { display: flex; flex-direction: column; gap: 16px; }
.page-block__images img { display: block; width: 100%; border-radius: var(--radius-card); }
.page-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; margin: 0 0 32px; }
.text-page__content a.page-tile { display: flex; flex-direction: column; overflow: hidden; color: var(--blue); font-weight: 600; background: #fff; border: 1px solid var(--light-blue); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.text-page__content a.page-tile:hover { text-decoration: none; border-color: var(--green); }
.page-tile img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.page-tile span { padding: 12px 16px; font-size: 18px; line-height: 24px; }

/* --- dealer map (templates/dealers.php) ---------------------------------- */
.dealers { margin: 48px 0 80px; padding: 0 var(--page-margin); }
.dealers__intro { max-width: 840px; }
.dealers__search { margin: 40px 0 24px; }
.dealers__search h2 { margin: 0 0 16px; font-size: 32px; letter-spacing: -1px; color: var(--blue); }
.dealers__fields { display: flex; gap: 12px; flex-wrap: wrap; }
.dealers__fields input { flex: 1 1 240px; height: 56px; padding: 0 20px; font: inherit; font-size: 16px; border: 1px solid var(--divider); border-radius: var(--radius-btn); background: #fff; }
.dealers__map-wrap { position: relative; }
.dealers__map { height: 520px; border-radius: var(--radius-card); overflow: hidden; background: var(--light-blue); }
.dealers__info { position: absolute; top: 16px; left: 16px; width: 300px; z-index: 2; }
.dealers__count { margin: 48px 0 24px; font-size: 32px; letter-spacing: -1px; color: var(--blue); }
.dealers__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.dealer-card { display: flex; flex-direction: column; gap: 4px; padding: 24px; font-size: 16px; line-height: 24px; color: var(--dark-grey); background: #fff; border: 1px solid var(--light-blue); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.dealer-card[hidden] { display: none; }
.dealer-card h3 { margin: 0 0 4px; font-size: 20px; line-height: 28px; color: var(--blue); }
.dealer-card p { margin: 0 0 8px; }
.dealer-card a { color: var(--green); overflow-wrap: anywhere; }

/* --- FAQ (13:187): the contact card is a sidebar ------------------------- */
.faq--topro .faq__list { display: grid; grid-template-columns: minmax(0, 1fr) 365px; column-gap: 80px; row-gap: 40px; }
.faq--topro .faq__item { grid-column: 1; }
.faq--topro .faq__item::before { width: 100%; }
.faq--topro .faq__answer { width: auto; max-width: 100%; }
.faq--topro .faq__contact { grid-column: 2; grid-row: 1 / span 6; align-self: start; width: auto; margin-top: 0; border-radius: var(--radius-card); }
.faq--topro .faq__contact::before { content: none; }
.faq--topro .faq__contact h3 { font-size: 28px; }
.faq--topro .faq__contact .accent { color: var(--topro-blue); }
.faq--topro .faq__contact-line a { color: inherit; }
.faq--topro .faq__contact-line .accent,
.faq--topro .faq__contact-line--mail a { color: var(--topro-blue); }
.faq--topro .faq__toggle { border-color: var(--divider); }
.faq--topro .faq__item[open] .faq__toggle { background: var(--topro-blue); }

/* --- product row arrows (1:25): Topro blue, not the dark button ---------- */
.products__arrows .icon-btn--primary { background: var(--topro-blue); border-color: var(--topro-blue); }
.products__arrows .icon-btn--primary:hover { background: var(--topro-dark-blue); border-color: var(--topro-dark-blue); }

/* --- testimonial text (1:248): quote Nunito Italic 400 at -4% tracking
   (home.css sets farmula's -1.92px, too tight at the site's 34px), name DM
   Sans 20/36, place line Light Blue 15px ---------------------------------- */
.testimonials blockquote { font-family: "Nunito", sans-serif; font-weight: 400; letter-spacing: -0.04em; }
.testimonials__name { font-family: "DM Sans", sans-serif; font-size: 20px; line-height: 36px; }
.testimonials__place { font-size: 15px; color: var(--divider); }

/* --- testimonials: white ghost button (Figma: white fill, blue label) ---- */
.testimonials .btn--ghost { background: #fff; border-color: #fff; color: var(--topro-dark-blue); }
.testimonials .btn--ghost:hover { background: var(--light-blue); border-color: var(--light-blue); }
.testimonials__video--left > img { object-position: 18% 50%; }

/* --- checkout (shop pages, 2026-09-28): same layout as farmula.de, Topro look */
/* white bar with the normal logo instead of farmula's dark one */
.navbar--slim { background: #fff; border-bottom: 1px solid var(--divider); }
.navbar--slim .navbar__logo img,
.navbar--slim .navbar__logo img[width] { width: 183px; height: 64px; object-fit: contain; }
/* the dark buttons (gate, coupon) take Topro's dark blue; green stays the main action */
.btn--blue { background: var(--topro-dark-blue); }
.btn--blue:hover { background: #0b77a9; }
/* No Germanized on topro.nl: WooCommerce's own privacy line and terms checkbox
   show instead of farmula's sentence, set in the checkout's type */
.page--checkout .woocommerce-privacy-policy-text p { margin: 0 0 12px; font-size: 15px; line-height: 22px; color: var(--dark-grey); }
.page--checkout .woocommerce-terms-and-conditions-wrapper .form-row { margin: 0 0 20px; padding: 0; }
.page--checkout .woocommerce-terms-and-conditions-checkbox-text { font-size: 15px; line-height: 22px; color: var(--dark-grey); }
.page--checkout .woocommerce-form__label-for-checkbox { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.page--checkout .woocommerce-form__label-for-checkbox input[type=checkbox] { flex: 0 0 auto; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--green); }
.page--checkout .woocommerce-terms-and-conditions-wrapper a,
.page--checkout .woocommerce-privacy-policy-text a { color: var(--topro-dark-blue); text-decoration: underline; }

/* --- slide-in cart: Topro dark blue head instead of farmula's navy, the
   "added" notice on Topro green ------------------------------------------- */
.cart-drawer__head { background: var(--topro-dark-blue); }
.cart-drawer__added { background: rgba(99, 179, 58, 0.12); color: var(--green); }

/* --- knowledge base articles: topro's posts use h3-h6 (farmula's only h2),
   the lead paragraph is an h5 and subheadings are h4. Without these they fell
   to the browser's small defaults (13 and 16px) under 18px body copy. ------- */
.article__text h3 { font-size: 24px; line-height: 34px; font-weight: 600; color: var(--blue); }
.article__text h4 { font-size: 22px; line-height: 32px; font-weight: 600; color: var(--blue); }
.article__text h5 { font-family: var(--font-body); font-size: 20px; line-height: 30px; font-weight: 600; color: var(--blue); }
.article__text h6 { font-family: var(--font-body); font-size: 18px; line-height: 26px; font-weight: 700; }
/* the lead and subheads carry an inline editor colour on a span; keep it, but
   in the heading's own size */
.article__text h3 span, .article__text h4 span, .article__text h5 span, .article__text h5 strong { font-size: inherit; }
.article__text strong { font-weight: 700; }

/* the "Sprache:" label only exists in the phone's open menu */
.navbar__lang-label,
.navbar__langs { display: none; }

/* ==========================================================================
   Phone (Figma 1:588 "Home Mobile", 23:178 closed bar, 23:411 menu open).
   home.css switches to farmula's phone layout below 900px; the rules here
   undo the desktop-only Topro rules above and draw Topro's own phone header:
   logo left, account / cart / menu right, the search always visible below.
   ========================================================================== */
@media (max-width: 900px) {
  /* --- nav bar: farmula.de's compact phone header (menu left, logo in the
     middle, magnifier and cart right; Moritz 2026-09-29, replacing Figma
     23:178's tall bar). Only the Topro logo size, colours and the language
     switch in the open menu differ. ------------------------------------ */
  .navbar__logo img { width: auto; height: 40px; }
  /* undo the desktop positions and frames above, so home.css's phone rules apply */
  .navbar__cart { left: auto; top: 12px; }
  .navbar__account { display: none; }
  .navbar .icon-btn { border-color: transparent; }
  .is-menu-open .navbar__menu-btn { background: var(--topro-dark-blue); border-color: var(--topro-dark-blue); }
  /* the open menu's info block: the two header lines instead of the hotline */
  .is-menu-open .navbar__info--site { right: auto; gap: 8px; }
  /* language switch: both languages side by side at the top right of the open
     menu (the dropdown opened over the menu list, which took the tap) */
  .navbar__lang,
  .is-menu-open .navbar__lang { display: none; }
  .is-menu-open .navbar__langs { display: flex; position: absolute; right: var(--page-margin); top: 90px; gap: 6px; }
  .navbar__langs a {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 40px;
    padding: 0 8px;
    border: 1px solid var(--divider);
    border-radius: 4px;
    background: #fff;
    font-size: 15px;
    font-weight: 600;
    color: var(--blue);
  }
  .navbar__langs a.is-active { border-color: var(--topro-dark-blue); background: var(--light-blue); }
  .navbar__langs img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }

  /* --- hero (1:633): photo on top, the blue panel below it. One slide, so
     it flows instead of farmula's fixed 627px stack; the height follows the
     copy, which is longer than farmula's. -------------------------------- */
  .hero--topro { height: auto; }
  .hero--topro .hero__slide { position: relative; display: flex; flex-direction: column; opacity: 1; }
  .hero--topro .hero__slide::before { content: none; }
  .hero--topro .hero__media--1 { position: static; width: 100%; height: 226px; object-fit: cover; }
  .hero--topro .hero__slide--goal .hero__content {
    position: static;
    transform: none;
    width: auto;
    gap: 20px;
    padding: 24px 20px 32px;
    border-radius: 0;
    background: var(--topro-dark-blue);
  }
  /* two slides since 2026-09-30: only the active one takes space; the
     banner's photo half sits in the media slot, its offer as text below */
  .hero--topro .hero__slide:not(.is-active) { display: none; }
  .hero--topro .hero__slide--q4 { background: none; }
  .hero--topro .hero__q4-link { position: static; height: 226px; }
  .hero--topro .hero__media--q4 { position: static; width: 100%; height: 226px; object-fit: cover; object-position: right center; }
  .hero--topro .hero__content--q4 {
    display: flex;
    position: static;
    transform: none;
    width: auto;
    gap: 20px;
    padding: 24px 20px 32px;
    border-radius: 0;
    background: #29265d; /* the banner's navy, like farmula.de's phone band */
  }
  .hero--topro .hero__dots { left: 20px; top: 194px; }
  .hero--topro h1 { font-size: 36px; line-height: 1.1; letter-spacing: -1.44px; }
  .hero--topro .hero__lead { font-size: 16px; line-height: 26px; }

  .team { padding-bottom: 40px; }

  /* --- Zeitung + newsletter (20:88): text, button, image, card ---------- */
  .shop-about--wissen { margin-bottom: 40px; }
  .brochure--topro { display: flex; flex-direction: column; gap: 24px; padding: 48px 20px; }
  .brochure--topro .brochure__intro { order: 1; gap: 20px; }
  .brochure--topro .brochure__intro h2 { font-size: 28px; letter-spacing: -1.12px; }
  .brochure--topro .brochure__intro .btn { align-self: stretch; justify-content: center; }
  .brochure--topro .brochure__cover { order: 2; align-self: center; }
  .brochure--topro .newsletter { order: 3; padding: 20px; }
  .brochure--topro .newsletter h3 { font-size: 20px; line-height: 28px; }

  /* --- page blocks and the dealer map stack ---------------------------- */
  .page-block--media, .page-block--image-left { grid-template-columns: 1fr; }
  .page-block--image-left .page-block__images { order: 0; }
  .page-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .page-tile span { font-size: 16px; padding: 10px 12px; }
  .dealers { margin: 24px 0 48px; padding: 0 20px; }
  .dealers__search h2, .dealers__count { font-size: 24px; }
  .dealers__fields .btn { width: 100%; justify-content: center; }
  .dealers__map { height: 380px; }
  .dealers__info { position: static; width: auto; margin-top: 12px; }

  /* --- FAQ (13:187): questions, then the contact card ------------------ */
  .faq--topro .faq__list { display: flex; flex-direction: column; gap: 24px; }
  .faq--topro .faq__contact { margin-top: 8px; }
  .faq--topro .faq__item summary { gap: 16px; }

  /* --- footer (20:222): one column ------------------------------------- */
  .footer--site .footer__main { display: flex; flex-direction: column; gap: 32px; padding: 40px 20px; }
  .footer--site .footer__col { gap: 32px; }
  .footer--site .footer__bottom { flex-direction: column-reverse; align-items: center; gap: 16px; height: auto; padding: 24px 20px; }
  .footer--site .footer__badges { flex-wrap: wrap; justify-content: center; gap: 12px; }
  .footer--site .footer__badges img { height: 40px; }
}

/* --- logo: tap feedback as on farmula.de's phone header, at every width -- */
.navbar__logo { transition: transform .12s ease, opacity .12s ease; }
.navbar__logo:active { transform: scale(.94); opacity: .6; }

/* --- cookie consent (parts/consent.php): farmula.de's strip, Topro colours */
.consent {
  position: fixed;
  z-index: 60;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 20px 20px calc(20px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--divider);
  background: #fff;
  box-shadow: 0 -4px 20px rgba(34, 36, 36, 0.06);
  text-align: center;
}
.consent[hidden] { display: none; }
.consent__text { max-width: 720px; font-size: 16px; line-height: 24px; color: var(--dark-grey); }
.consent__text a { color: var(--topro-dark-blue); text-decoration: underline; }
.shop-about__text a { color: var(--topro-dark-blue); }
.shop-about__text a:hover { color: var(--topro-blue); }
/* the band below drops home.css's 80px margin-top, so the knowledge base text keeps its own */
.shop-about--wissen { margin-bottom: 80px; }
.consent__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.consent__btn {
  min-height: 44px;
  padding: 10px 20px;
  border: 1px solid var(--divider);
  border-radius: 4px;
  background: #fff;
  font-size: 16px;
  font-weight: 600;
  color: var(--blue);
}
.consent__btn--accept { border-color: var(--green); background: var(--green); color: #fff; }
.consent__btn:hover { border-color: var(--topro-dark-blue); }
.consent__btn--accept:hover { background: #57a032; border-color: #57a032; }
.footer--site .footer__bottom a { color: inherit; text-decoration: underline; }

/* --- invitation to farmula.de for DE/AT/CH visitors (inc/geo.php) -------- */
.shop-invite {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 12px 56px 12px 20px;
  background: var(--topro-dark-blue);
  color: #fff;
  font-size: 15px;
  line-height: 22px;
  text-align: center;
}
.shop-invite a { color: #fff; font-weight: 700; text-decoration: underline; white-space: nowrap; }
.shop-invite button { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; font-size: 26px; line-height: 1; color: #fff; }
/* the phone menu is placed from the top of the screen (home.css), so the
   strip above the header steps aside while the menu is open */
.is-menu-open .shop-invite { display: none; }