@charset "UTF-8";
/* === SCSS Variables === */
/* 5.2:1 on white — use where white text on red needs AA contrast */
/* Grays */
/* Semantic */
/* Aliases */
/* === CSS Custom Properties === */
:root {
  /* Theme colors */
  --we-primary: #177AAB;
  --we-primary-text: #FFFFFF;
  --we-accent: #ED1C24;
  --we-accent-text: #FFFFFF;
  --we-text: #000000;
  --we-link: #177AAB;
  --we-shaded: #b9d7e6;
  /* Shared design tokens (used by product-layout, search-page, etc.) */
  --accent: #177AAB;
  --yellow: #FFCC00;
  --dark: #000000;
  --white: #FFFFFF;
  --bg: #ebebeb;
  --green: #2e8b3a;
  --ci-red: #ED1C24;
  /* Layout */
  --max-w: 1400px;
  /* Radii */
  --r-card: 14px;
  --r-pill: 12px;
  --r-btn: 12px;
}

/* === Type Scale ===
 * Named font-size variables for sizes reused across multiple components.
 * One-off sizes (e.g. product title, main price) stay as literals.
 *
 * Imported by style.scss and available to project SCSS files via
 * ScssParser's $import_paths pointing to assets/css/.
 */
/* === Type Scale ===
 * Named font-size variables for sizes reused across multiple components.
 * One-off sizes (e.g. product title, main price) stay as literals.
 *
 * Imported by style.scss and available to project SCSS files via
 * ScssParser's $import_paths pointing to assets/css/.
 */
/* === Shared Mixins ===
 * Imported by style.scss (global) and available to project SCSS files
 * via ScssParser's $import_paths pointing to assets/css/.
 *
 * These mixins extract patterns duplicated across header, live-search,
 * product-layout, and search-page stylesheets.
 */
/* ── Pill button ─────────────────────────────────────────────────────
 * Shared shape for ATC buttons, variant buttons, sidebar buttons.
 * Colors are passed as arguments so each context can set its own palette.
 *
 * Usage:
 *   @include pill-button(var(--accent), var(--white));
 */
/* ── Quantity stepper ────────────────────────────────────────────────
 * Pill-shaped wrapper + increment/decrement buttons + number input.
 * Sizes are passed as arguments (live-search is compact, product page is larger).
 *
 * Usage:
 *   .my-stepper { @include qty-stepper-wrap(30px); }
 *   .my-btn    { @include qty-stepper-btn(26px); }
 *   .my-input  { @include qty-stepper-input(34px); }
 */
/* ── Uppercase label ─────────────────────────────────────────────────
 * Small caps label used for section headers, facet titles, badge text.
 *
 * Usage:
 *   .my-label { @include uppercase-label; }
 *   .my-label { @include uppercase-label(0.75rem); }
 */
/* ==========================================================
   Live Search Results Panel — Westend Apotheke
   Companion to header-live-search.php / header-live-search.js
   ========================================================== */
/* ── Panel shell ─────────────────────────────────────────── */
.search-results-panel {
  position: fixed;
  /* `top` is set dynamically by JS (header bottom edge). */
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: #FFFFFF;
  border-top: 1px solid #e0e0e0;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
  max-height: calc(100svh - var(--srp-top, 0px));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.search-results-panel *,
.search-results-panel *::before,
.search-results-panel *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Section wrapper ─────────────────────────────────────── */
.srp-section {
  padding: 0.5rem 1rem 0;
}

.srp-section:last-of-type {
  padding-bottom: 0.5rem;
}

/* ── Section toggle button row — black rounded pill border ── */
.srp-section-header-row {
  display: flex;
  align-items: stretch;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  overflow: hidden;
}

.srp-section-toggle {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem 0.75rem;
  text-align: left;
  color: #000000;
  min-height: 40px;
}

/* Focus ring on container — overflow:hidden on the row clips child outlines */
.srp-section-header-row:focus-within {
  outline: 2px solid #177AAB;
  outline-offset: 2px;
}

.srp-section-toggle:focus {
  outline: none;
}

.srp-section-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #000000;
}

.srp-section-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 16px;
  padding: 0 3px;
  border: 1px solid #e0e0e0;
  border-radius: 2px;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
  color: #000000;
}

.srp-chevron {
  width: 10px;
  height: 7px;
  margin-left: auto;
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.srp-section-toggle[aria-expanded=true] .srp-chevron {
  transform: rotate(180deg);
}

/* "alle" link in the products section header */
.srp-see-all {
  display: flex;
  align-items: center;
  padding: 0 0.75rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #000000;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}

.srp-see-all:hover,
.srp-see-all:focus {
  text-decoration: underline;
  outline: none;
  /* focus-within on container handles the ring */
}

/* ── Section body ────────────────────────────────────────── */
.srp-section-body {
  list-style: none;
  margin: 0;
  padding: 0;
}

.srp-section-body[hidden] {
  display: none !important;
}

/* ── Category / tag rows ─────────────────────────────────── */
.srp-cat-item > a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 1rem;
  text-decoration: none;
  color: #000000;
  border-bottom: 1px solid #e0e0e0;
  min-height: 48px;
}

.srp-cat-item:last-child > a {
  border-bottom: none;
}

.srp-cat-item > a:hover {
  background: #fafafa;
}

.srp-cat-item > a:focus {
  outline: 2px solid #177AAB;
  outline-offset: -2px;
  background: #fafafa;
}

.srp-cat-icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border: 1px solid #e0e0e0;
  border-radius: 50%;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000000;
}
.srp-cat-icon svg {
  width: 14px;
  height: 14px;
}

.srp-cat-info {
  flex: 1;
  min-width: 0;
}

.srp-cat-name {
  display: block;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #000000;
}

.srp-cat-meta {
  display: block;
  font-size: 0.75rem;
  color: #000000;
  margin-top: 0.0625rem;
}

.srp-item-arrow {
  flex-shrink: 0;
  font-size: 1.125rem;
  line-height: 1;
  color: #000000;
}

/* ── Ratgeber (landing page) rows ───────────────────────── */
.srp-ratgeber-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #e0e0e0;
}
.srp-ratgeber-item:last-child {
  border-bottom: none;
}

.srp-ratgeber-img {
  flex-shrink: 0;
  width: 52px;
  align-self: center;
}
.srp-ratgeber-img img {
  width: 52px;
  height: auto;
  border-radius: 2px;
  display: block;
  object-fit: cover;
}

.srp-ratgeber-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  background: #f5f5f5;
  border-radius: 2px;
  color: #999;
}
.srp-ratgeber-icon svg {
  width: 20px;
  height: 20px;
}

.srp-ratgeber-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.srp-ratgeber-title {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #000000;
  text-decoration: none;
}
.srp-ratgeber-title:hover {
  text-decoration: underline;
}

.srp-ratgeber-meta {
  font-size: 0.6rem;
  color: #999;
}

.srp-ratgeber-more {
  flex-shrink: 0;
  align-self: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: #000000;
  text-decoration: none;
  white-space: nowrap;
}
.srp-ratgeber-more:hover {
  text-decoration: underline;
}

/* ── Blog rows ──────────────────────────────────────────── */
.srp-blog-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #e0e0e0;
}
.srp-blog-item:last-child {
  border-bottom: none;
}

.srp-blog-img {
  flex-shrink: 0;
  width: 52px;
  align-self: center;
}
.srp-blog-img img {
  width: 52px;
  height: auto;
  border-radius: 2px;
  display: block;
  object-fit: cover;
}

.srp-blog-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  background: #f5f5f5;
  border-radius: 2px;
  color: #999;
}
.srp-blog-icon svg {
  width: 20px;
  height: 20px;
}

.srp-blog-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.srp-blog-title {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #000000;
  text-decoration: none;
}
.srp-blog-title:hover {
  text-decoration: underline;
}

.srp-blog-excerpt {
  font-size: 0.75rem;
  color: #555;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.srp-blog-meta {
  font-size: 0.6rem;
  color: #999;
}

.srp-blog-more {
  flex-shrink: 0;
  align-self: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: #000000;
  text-decoration: none;
  white-space: nowrap;
}
.srp-blog-more:hover {
  text-decoration: underline;
}

/* ── Product rows ────────────────────────────────────────── */
.srp-product-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #e0e0e0;
}

.srp-product-item:last-child {
  border-bottom: none;
}

.srp-product-img {
  flex-shrink: 0;
  width: 44px;
  height: 60px;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.srp-product-img img,
.srp-product-img svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Product body: always a column — name spans full width */
.srp-product-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.srp-product-link {
  display: block;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #000000;
  text-decoration: none;
}

.srp-product-link:hover,
.srp-product-link:focus {
  text-decoration: underline;
  outline: 2px solid #177AAB;
  outline-offset: 1px;
}

.srp-product-variant {
  display: block;
  font-size: 0.75rem;
  color: #000000;
}

/* Bottom row: price/avail then qty+btn */
.srp-product-bottom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.srp-product-price-col {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: max-content;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.125rem 0.375rem;
}

.srp-product-pricing {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.125rem 0.25rem;
}

.srp-product-price-prefix {
  font-size: 0.6875rem;
}

.srp-product-price {
  font-size: 0.875rem;
  font-weight: 700;
  color: #000000;
}

.srp-product-old-price {
  font-size: 0.6875rem;
  text-decoration: line-through;
  color: #000000;
}

.srp-sale-badge {
  background: #C41A20;
  color: #FFFFFF;
  font-size: 0.5625rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 2px;
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.7;
  align-self: center;
}

.srp-product-avail {
  font-size: 0.75rem;
  color: #000000;
  white-space: nowrap;
}

.srp-product-avail::before {
  content: "• ";
}

/* ── Product action area ─────────────────────────────────── */
.srp-product-actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

/* Qty stepper — pill shape, always visible */
.srp-qty-stepper {
  display: flex;
  align-items: center;
  border: 1px solid var(--dark, #000);
  border-radius: var(--r-pill, 999px);
  overflow: hidden;
  height: 30px;
  border-color: #e0e0e0;
}

.srp-qty-btn {
  width: 26px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.125rem;
  line-height: 1;
  color: var(--dark, #000);
  padding: 0;
}
.srp-qty-btn:hover {
  background: var(--bg-light, #f0f0f0);
}
.srp-qty-btn:focus {
  outline: 2px solid #177AAB;
  outline-offset: -2px;
}

.srp-qty-input {
  width: 34px;
  height: 100%;
  border: none;
  border-left: 1px solid var(--dark, #000);
  border-right: 1px solid var(--dark, #000);
  border-radius: 0;
  text-align: center;
  color: var(--dark, #000);
  background: var(--white, #fff);
  outline: none;
  appearance: textfield;
  -moz-appearance: textfield;
  padding: 0;
  font-size: 0.8125rem;
  /* Override parent theme reset */
  border: none !important;
  border-left: 1px solid #e0e0e0 !important;
  border-right: 1px solid #e0e0e0 !important;
  border-radius: 0 !important;
}
.srp-qty-input::-webkit-inner-spin-button, .srp-qty-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ATC button — pill */
button.srp-atc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  background: #177AAB;
  color: #FFFFFF;
  border: none;
  cursor: pointer;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1.2;
  border-radius: var(--r-pill, 999px);
  padding: 0.375rem 0.875rem;
  font-size: 0.5625rem;
  min-height: 30px;
}

button.srp-atc-btn:hover,
button.srp-atc-btn:focus {
  background: #126087;
  color: #FFFFFF;
  outline: 2px solid #000000;
  outline-offset: 1px;
}

button.srp-atc-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Spinner while AJAX is in flight */
button.srp-atc-btn[aria-busy=true] {
  position: relative;
  pointer-events: none;
  color: transparent !important;
}
button.srp-atc-btn[aria-busy=true] svg {
  visibility: hidden;
}
button.srp-atc-btn[aria-busy=true]::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border: 2px solid #FFFFFF;
  border-top-color: transparent;
  border-radius: 50%;
  animation: srp-spin 0.6s linear infinite;
}

@keyframes srp-spin {
  to {
    transform: rotate(360deg);
  }
}
button.srp-atc-btn svg {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
}

/* "VARIANTE WÄHLEN" — same pill as add-to-cart */
a.srp-atc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  background: #177AAB;
  color: #FFFFFF;
  border: none;
  cursor: pointer;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1.2;
  border-radius: var(--r-pill, 999px);
  padding: 0.375rem 0.875rem;
  font-size: 0.5625rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  min-height: 30px;
}

a.srp-atc-btn:hover,
a.srp-atc-btn:focus {
  background: #126087;
  color: #FFFFFF;
  outline: 2px solid #000000;
  outline-offset: 1px;
  text-decoration: none;
}

/* ── ATC label visibility ────────────────────────────────── */
.srp-atc-label-desktop {
  display: none;
}

/* ── Inline WC notices ───────────────────────────────────── */
.srp-notice {
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
}
.srp-notice ul,
.srp-notice li,
.srp-notice div,
.srp-notice p {
  list-style: none;
  margin: 0;
  padding: 0;
}
.srp-notice .woocommerce-error,
.srp-notice .woocommerce-message {
  padding: 0.75rem 1rem 0.75rem 2.5rem;
  border-radius: 4px;
}
.srp-notice .woocommerce-error {
  background: #fce4e4;
  color: #cc1818;
}
.srp-notice .woocommerce-message {
  background: #e0f0e3;
  color: #1e7e34;
}

/* ── Panel footer ────────────────────────────────────────── */
.srp-footer {
  padding: 0.75rem 1rem;
  text-align: center;
  border-top: 1px solid #e0e0e0;
}

.srp-all-results {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #000000;
  text-decoration: none;
}

.srp-all-results:hover,
.srp-all-results:focus {
  text-decoration: underline;
  outline: 2px solid #177AAB;
  outline-offset: 2px;
}

/* ── Tablet (768px+): subgrid column alignment ───────────── */
@media (min-width: 768px) {
  .srp-product-img {
    width: 68px;
    height: 68px;
  }
  button.srp-atc-btn,
  a.srp-atc-btn {
    font-size: 0.625rem !important;
    padding: 0.375rem 1rem;
  }
  .srp-atc-label-mobile {
    display: none;
  }
  .srp-atc-label-desktop {
    display: inline;
  }
  /*
   * Subgrid: shared column tracks across all product rows.
   * Columns: [auto: img] [1fr: name] [max-content: price] [max-content: actions]
   */
  #srp-products-body {
    display: grid;
    grid-template-columns: auto 1fr max-content max-content;
    column-gap: 0.75rem;
  }
  /* Each product row spans all 4 columns and subgrids them */
  .srp-product-item {
    grid-column: 1/-1;
    display: grid;
    grid-template-columns: subgrid;
    align-items: center;
  }
  /* Body spans the 3 right columns and subgrids them */
  .srp-product-body {
    grid-column: 2/-1;
    display: grid;
    grid-template-columns: subgrid;
    row-gap: 0.25rem;
  }
  /* Name spans all body columns */
  .srp-product-name-col {
    grid-column: 1/-1;
  }
  /* Bottom row subgrids the same body columns */
  .srp-product-bottom-row {
    grid-column: 1/-1;
    display: grid;
    grid-template-columns: subgrid;
    align-items: center;
  }
  /* Price lands in parent col 3 (max-content, shared across rows) */
  .srp-product-price-col {
    grid-column: 2;
  }
  /*
   * Hang "ab" prefix to the left so only € determines the column width.
   * This keeps € symbols vertically aligned across all rows.
   */
  .srp-product-pricing {
    position: relative;
  }
  .srp-product-price-prefix {
    position: absolute;
    right: 100%;
    white-space: nowrap;
  }
  /* Actions land in parent col 4 (max-content, shared across rows) */
  .srp-product-actions {
    grid-column: 3;
    justify-content: flex-end;
  }
}
/* ── Desktop (1024px+): constrain inner to max-width ─────── */
@media (min-width: 1024px) {
  .srp-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 2rem;
  }
  .srp-section {
    padding-left: 0;
    padding-right: 0;
  }
  .srp-cat-item > a {
    padding-left: 0;
    padding-right: 0;
  }
  .srp-product-item,
  .srp-blog-item,
  .srp-ratgeber-item {
    padding-left: 0;
    padding-right: 0;
  }
  .srp-footer {
    padding-left: 0;
    padding-right: 0;
  }
}
/* ── Body scroll lock while panel is open ─────────────────── */
html:has(body.srp-open),
body.srp-open {
  overflow: hidden;
}

/* Pin the header to the viewport while the panel is open,
   so the search input + panel stay in view regardless of scroll. */
body.srp-open .site-header {
  position: fixed !important;
  top: var(--wp-admin--admin-bar--height, 0px);
  left: 0;
  right: 0;
}