/* Ingredient Hub — /ingredients/:slug detail page. Ported from DEVS-6146 mockup.
   Scoped to .vibe-ing-page so the easycosmetic shell CSS doesn't leak in. */

#content .vibe-ing-page {
  box-sizing: border-box !important;
  min-width: 0 !important;
  /* Match wm2026's content column (994px). Centers at ~135..1129, i.e. inside the shell's
     ~1010px column between its white side gutters (#document-left/right at 127/1137), so
     nothing is clipped and no z-index/padding hacks are needed. */
  max-width: 994px;
  margin: 0 auto;
  /* padding-top:0 — content sits right under the shell header, same as wm2026. */
  padding: 0 0 60px;
  font-family: Futura, 'Futura-Bold', Arial, sans-serif;
  color: #1a1a1a;
  line-height: 1.6;
}
@media (max-width: 900px) {
  #content .vibe-ing-page { padding-left: 16px; padding-right: 16px; }
  /* Full-bleed detail hero: compensate the page's 16px side padding.
     #content prefix outweighs the later base rule's width:100%. */
  #content .vibe-ing-hero-img { margin-left: -16px; margin-right: -16px; width: calc(100% + 32px); }
}

/* Shell forces `#content * { box-sizing: content-box !important }`; restore border-box so
   padding/grid widths don't overflow the shell's centered content column. */
#content .vibe-ing-page,
#content .vibe-ing-page *,
#content .vibe-ing-page *::before,
#content .vibe-ing-page *::after { box-sizing: border-box !important; }

/* Shell pins a `position:fixed` service-bar (`.footer-fixed`, top:970px) that floats over
   our injected content mid-page. Its links are duplicated in the real bottom footer, so
   hide it on ingredient pages. */
body:has(.vibe-ing-page) .basecontainer.footer-fixed { display: none !important; }

/* Head row is 2 columns (hero + Steckbrief | Top-Produkte); everything below spans both, so
   the product grid and the text sections use the full 994px instead of 686px. */
/* Right column: 222px so the sidebar card renders at 186px — exactly the width of a card in
   the 5-per-row Produkte grid below (column − 36px block padding = card incl. its 16px offset). */
.vibe-ing-layout { display: grid; grid-template-columns: minmax(0, 1fr) 222px; gap: 0 20px; align-items: start; }
.vibe-ing-head, .vibe-ing-main { min-width: 0; }
.vibe-ing-body { grid-column: 1 / -1; min-width: 0; }
/* Compact box (DEVBUG-55629 feedback): hugs its content instead of stretching level with the
   Steckbrief — the "Alle … anzeigen" link sits right under the last card. */
.vibe-ing-sidebar .vibe-ing-aside-block--products { display: flex; flex-direction: column; }
@media (max-width: 900px) { .vibe-ing-layout { grid-template-columns: 1fr; gap: 0; } }

.vibe-ing-group { margin-top: 40px; padding-top: 28px; border-top: 1px solid #f0eeeb; }
.vibe-ing-group-title { font-size: 24px; font-weight: 600; color: #1a1a1a; margin: 0 0 20px; }
.vibe-ing-soon { font-size: 14px; color: #999; font-style: italic; }

/* Right sidebar */
.vibe-ing-sidebar { display: flex; flex-direction: column; gap: 28px; }
@media (max-width: 900px) { .vibe-ing-sidebar { margin-top: 40px; padding-top: 28px; border-top: 1px solid #f0eeeb; } }
/* Sidebar blocks are plain (no card bg/border) per mockup — square edges site-wide. */
/* Top-Produkte is the one exception: warm surface #f2eeed with padding. */
.vibe-ing-aside-block--products { background: #f2eeed; padding: 16px 18px; }
/* Standard vertical cards (DEVBUG-55629): stacked in the desktop column,
   side by side on mobile. */
.vibe-ing-aside-block--products .vibe-products ul.products { grid-template-columns: 1fr; row-gap: 4px; }
@media (max-width: 900px) {
  .vibe-ing-aside-block--products .vibe-products ul.products { grid-template-columns: 1fr 1fr; column-gap: 12px; }
}
/* Product image sits on the same warm surface — drop the shared radial-gradient. */
.vibe-ing-aside-block--products .vibe-products .product .product-image { background: #f2eeed; }
.vibe-ing-aside-title { font-size: 11px; text-transform: uppercase; letter-spacing: .9px; color: #999; font-weight: 700; margin-bottom: 8px; }
.vibe-ing-aside-note { font-size: 12px; color: #777; line-height: 1.6; margin: 8px 0 0; }
.vibe-ing-aside-all { display: inline-block; margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--vibe-black); text-decoration: underline; }
.vibe-ing-aside-all:hover { color: var(--vibe-orange); }

/* Chemisches Profil / EU-Regulierung: at full width a row of label-over-value tiles reads far
   better than key/value lines stretched across 994px, and it matches the Steckbrief above. */
.vibe-ing-kv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.vibe-ing-kv { display: block; background: #f8f7f5; padding: 12px 14px; }
.vibe-ing-kv-k { display: block; font-size: var(--vibe-fs-12); text-transform: uppercase; letter-spacing: .8px; color: #aaa; font-family: var(--vibe-ff-bold); margin-bottom: 2px; }
.vibe-ing-kv-v { display: block; font-size: var(--vibe-fs-14); color: #333; font-family: var(--vibe-ff-bold); }

/* Hero (within main column) */
.vibe-ing-hero-img { width: 100%; aspect-ratio: 16/9; overflow: hidden; margin-bottom: 24px; background: #f8f7f5; }
.vibe-ing-hero-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vibe-ing-page h1 { font-size: 32px; font-weight: 600; color: #1a1a1a; margin: 0 0 4px; }
.vibe-ing-h1-sub { font-size: 14px; color: #999; margin-bottom: 20px; font-weight: 400; }
.vibe-ing-inci-label { font-weight: 700; color: #777; text-transform: uppercase; letter-spacing: .5px; }
.vibe-ing-hero-text { font-size: 15px; color: #444; padding: 16px 20px; border-left: 3px solid #BA7517; background: #faf8f5; margin-bottom: 28px; line-height: 1.7; }

/* Steckbrief fact grid — auto-fit so three tiles share the row when Konzentration is empty.
   No bottom margin: it is the last thing in the head column, and the margin would push the
   Top-Produkte box 28px below the tiles it is supposed to end level with. */
.vibe-ing-fact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
@media (max-width: 767px) { .vibe-ing-fact-grid { grid-template-columns: repeat(2, 1fr); } }
.vibe-ing-fact { background: #f8f7f5; padding: 12px 14px; }
.vibe-ing-fact-label { font-size: 10px; text-transform: uppercase; letter-spacing: .8px; color: #aaa; margin-bottom: 2px; font-weight: 600; }
.vibe-ing-fact-val { font-size: 14px; font-weight: 600; color: #333; }
.vibe-ing-badge-dot { display: inline-block; padding: 2px 8px; font-size: 12px; font-weight: 600; }
.vibe-ing-vt-green { background: #e6f5e8; color: #1a7a2e; }
.vibe-ing-vt-yellow { background: #fff6e0; color: #9a6b00; }
.vibe-ing-vt-red { background: #fce8e8; color: #c0392b; }

/* Produktart chips — wm2026 chip pattern (square edges, no radius). */
.vibe-ing-cat-filter { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 24px; padding: 0; }
.vibe-ing-cat-filter li { list-style: none; padding: 0 18px; line-height: 32px; background-color: transparent; border: 1px solid var(--vibe-text-subtle); cursor: pointer; font-size: var(--vibe-fs-12); color: var(--vibe-text-subtle); font-family: var(--vibe-ff-demi); letter-spacing: .08em; text-transform: uppercase; text-align: center; user-select: none; }
.vibe-ing-cat-filter li:hover { background-color: var(--vibe-orange); border-color: var(--vibe-orange); color: var(--vibe-white); }
.vibe-ing-cat-filter li.active { background-color: var(--vibe-heading); border-color: var(--vibe-heading); color: var(--vibe-white); }
.vibe-products .products > li.product.vibe-ing-prod--hidden { display: none !important; }

.vibe-ing-loadmore-wrap { display: flex; justify-content: center; margin-top: 28px; }
.vibe-ing-loadmore { padding: 0 28px; line-height: 40px; background: transparent; border: 1px solid var(--vibe-heading); color: var(--vibe-heading); font-family: var(--vibe-ff-demi); font-size: var(--vibe-fs-12); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.vibe-ing-loadmore:hover { background: var(--vibe-heading); color: var(--vibe-white); }
.vibe-ing-loadmore[disabled] { opacity: .5; cursor: default; }

/* Product hover 1:1 with the shop's "weitere Produkte" row (ul.products div.image div.border):
   a 1px #c3c3c3 rule under the image, 3px orange on hover plus a 5% wash over the image.
   Done with ::after so the shared card markup keeps its structure. Scoped to the ingredient
   pages — lifting it into shared-products.css would restyle five other landings. */
#content .vibe-ing-page .vibe-products .product .product-image { position: relative; }
#content .vibe-ing-page .vibe-products .product .product-image::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  border-bottom: 1px solid #c3c3c3;
}
#content .vibe-ing-page .vibe-products .product a:hover .product-image { background-color: rgba(0, 0, 0, .05); transition: .25s ease-out; }
#content .vibe-ing-page .vibe-products .product a:hover .product-image::after {
  bottom: -2px; border-bottom: 3px solid var(--vibe-orange); transition: border-color .3s ease-out;
}

/* The grid runs the full 994px here, which fits five cards; shared-products.css keeps four for
   the narrower pages. The breakpoints have to be repeated — the extra class outweighs its media
   queries at every width. */
.vibe-ing-body .vibe-products ul.products { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 900px) { .vibe-ing-body .vibe-products ul.products { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 768px) { .vibe-ing-body .vibe-products ul.products { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .vibe-ing-body .vibe-products ul.products { grid-template-columns: repeat(2, 1fr); } }

/* Sections */
.vibe-ing-sec { margin-bottom: 28px; }
.vibe-ing-sec-title { font-size: 18px; font-weight: 600; color: #1a1a1a; margin-bottom: 12px; }
.vibe-ing-sec-text { font-size: 14px; color: #555; line-height: 1.7; }
.vibe-ing-sec-text p { margin: 0 0 12px; }

/* HowTo */
.vibe-ing-howto-step { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
.vibe-ing-howto-num { width: 30px; height: 30px; background: #BA7517; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0; }
.vibe-ing-howto-content { font-size: 14px; color: #555; padding-top: 5px; }
.vibe-ing-howto-content strong { color: #333; font-weight: 600; }

/* Combinations (DEVS-6180) — mockup layout: badge left, chips flowing right */
.vibe-ing-combi-row { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.vibe-ing-combi-row:last-child { margin-bottom: 0; }
.vibe-ing-combi-badge { flex-shrink: 0; font-size: 12px; font-weight: 600; padding: 4px 9px; white-space: nowrap; }
.vibe-ing-combi-badge.is-ok { background: #eaf5ec; color: #2f7a3f; }
.vibe-ing-combi-badge.is-avoid { background: #fbeceb; color: #b3352c; }
.vibe-ing-combi-list { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
/* The shell forces li { list-style: disc } — the ul rule alone leaves a bullet on the first chip */
.vibe-ing-combi-chip { list-style: none; font-size: 14px; color: #555; }
.vibe-ing-combi-chip + .vibe-ing-combi-chip::before { content: '·'; color: #b9b9b9; margin: 0 8px; }
.vibe-ing-combi-chip a { color: #555; text-decoration: none; }
.vibe-ing-combi-chip a:hover { color: #BA7517; }
.vibe-ing-combi-note { color: #8a8a8a; }
/* Stacked on narrow screens: the badge sits above its chips instead of squeezing them */
@media (max-width: 600px) {
  .vibe-ing-combi-row { flex-direction: column; gap: 6px; }
  .vibe-ing-combi-badge { align-self: flex-start; }
}

/* Customer reviews */
/* Shop PDP review parity: 15/13/16px metrics are the shop's own, intentionally off the token ladder */
.vibe-ing-group.vibe-ing-reviews { background: #f2eeed; padding: 25px 30px; border-top: 0; }
.vibe-ing-review { display: grid; grid-template-columns: 113px 1fr; border-top: 0.8px solid #9b9b9b; margin-bottom: 5px; }
.vibe-ing-review:last-of-type { margin-bottom: 0; }
.vibe-ing-review-stars { display: flex; gap: 2px; padding-top: 36px; }
/* Sprite is 51x17 (full / half / empty states); full star at 0 0, natural size */
.vibe-ing-review-star {
  width: 17px; height: 17px; display: block;
  background: url('https://www.easycosmetic.de/Images/-/bewertungsstern.png') no-repeat 0 0;
}
.vibe-ing-review-content { padding: 15px 0; }
/* Shop uses line-height 13px, but our author line carries the product name and wraps — 19px keeps wrapped lines readable */
#content .vibe-ing-review-author { font-family: var(--vibe-ff); font-size: 15px; line-height: 19px; color: #a1a1a1; margin: 0 0 8px; }
#content .vibe-ing-review-title { font-family: var(--vibe-ff-bold); font-size: 16px; line-height: 18px; color: #000; margin: 0 0 7px; }
#content .vibe-ing-review-text {
  font-family: var(--vibe-ff-light); font-size: 15px; line-height: 21px; color: #000;
  font-style: normal; margin: 0; padding: 0; border: 0; quotes: none;
}
#content .vibe-ing-review-text::before, #content .vibe-ing-review-text::after { content: none; }
@media (max-width: 600px) {
  .vibe-ing-review { grid-template-columns: 1fr; }
  .vibe-ing-review-stars { padding-top: 14px; }
  .vibe-ing-review-content { padding-top: 8px; }
}

/* FAQ accordion (first item open by default via .is-open in markup) */
/* FAQ — fashion-week style: static Q&A cards on a warm band, no accordion */
.vibe-ing-group.vibe-ing-faq { background: #faf7f2; border-radius: 12px; padding: 36px 40px; border-top: 0; }
.vibe-ing-faq-item { background: #fff; border-radius: 10px; border: 1px solid #e8e2d9; margin-bottom: 10px; overflow: hidden; }
.vibe-ing-faq-item__header { display: flex; align-items: center; gap: 12px; padding: 16px 20px 8px; }
.vibe-ing-faq-icon {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  background: #c9a96e; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--vibe-ff-demi); font-size: var(--vibe-fs-14, 13px); font-weight: 700;
}
.vibe-ing-faq-q { flex: 1; font-family: var(--vibe-ff-demi); font-size: var(--vibe-fs-16, 16px); line-height: 1.4; font-weight: 600; color: #1a1a1a; }
#content .vibe-ing-faq-answer { padding: 0 20px 18px 58px; font-size: var(--vibe-fs-18, 18px); line-height: 1.5; color: #555; }
@media (max-width: 600px) {
  .vibe-ing-group.vibe-ing-faq { padding: 24px 16px; }
  #content .vibe-ing-faq-answer { padding-left: 20px; }
}

/* Clinical evidence */
/* A surface separates the studies from the prose above them; the left rule alone was too faint
   to mark a section at full width. Same soft grey as the Steckbrief tiles. */
.vibe-ing-evidence { margin-bottom: 10px; padding: 14px 16px; background: #f8f7f5; border-left: 2px solid #e0ddd8; }
.vibe-ing-evidence-sum { font-size: 14px; color: #444; line-height: 1.6; }
.vibe-ing-evidence-cite { font-size: 12px; color: #999; margin-top: 3px; }
.vibe-ing-evidence-cite a { color: #1a5fa8; text-decoration: none; }


/* === Index page /ingredients (DEVS-6181) — styled after /alle-marken === */
.vibe-ing-idx ul { list-style: none !important; margin: 0; padding: 0; }
.vibe-ing-idx li { list-style: none !important; }
.vibe-ing-idx li::marker { content: none; }
.vibe-ing-idx-hero { margin-bottom: 24px; }
.vibe-ing-idx-hero-bg { background-size: cover; background-position: center; display: flex; align-items: center; }
.vibe-ing-idx-hero-bg--desktop { height: 328px; padding: 0 40px; }
.vibe-ing-idx-hero-bg--mobile { display: none; }
.vibe-ing-idx-hero-text { max-width: 40%; }
#content .vibe-ing-idx-title { font-family: var(--vibe-ff-bold); font-size: var(--vibe-fs-40); color: #1a1a1a; margin: 0 0 10px; }
#content .vibe-ing-idx-subtitle { font-family: var(--vibe-ff-light); font-size: var(--vibe-fs-18); line-height: 1.5; color: #333; margin: 0; }
.vibe-ing-idx-toolbar { margin-bottom: 16px; }
/* Search sits inside the hero, under the subtitle */
#content .vibe-ing-idx-search { display: block; width: 340px; max-width: 100%; margin-top: 20px; font-family: var(--vibe-ff); font-size: var(--vibe-fs-16); padding: 11px 16px; border: 0; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .12); outline-color: #1a1a1a; }

/* A-Z bar: grey circles (alle-marken), stretched across the full content width */
.vibe-ing-idx-azbar { display: flex; flex-wrap: wrap; gap: 4px; justify-content: space-between; }
#content a.vibe-ing-idx-az-l, .vibe-ing-idx-az-l { width: 26px; height: 26px; border-radius: 50%; background: #f4f2f1; display: inline-flex; align-items: center; justify-content: center; font-family: var(--vibe-ff-bold); font-size: 18px; color: #000; text-decoration: none !important; }
#content a.vibe-ing-idx-az-l:hover { background: #000; color: #fff; text-decoration: none !important; }
.vibe-ing-idx-az-l--off { opacity: .45; }

/* Filter pills (brand-index-filter): label above, pills share the full row width */
.vibe-ing-idx-filter-row { margin-bottom: 14px; }
.vibe-ing-idx-filter-label { display: block; font-family: var(--vibe-ff-demi); font-size: var(--vibe-fs-12); text-transform: uppercase; letter-spacing: .06em; color: #9b9899; margin-bottom: 6px; }
.vibe-ing-idx-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.vibe-ing-idx-chips li { flex: 1 1 auto; text-align: center; font-family: var(--vibe-ff-bold); font-size: 14px; text-transform: uppercase; line-height: 25px; padding: 0 12px; border-radius: 5px; border: 0.8px solid #9b9899; color: #9b9899; background: transparent; cursor: pointer; user-select: none; white-space: nowrap; }
.vibe-ing-idx-chips li:hover { border-color: #000; color: #000; }
.vibe-ing-idx-chips li.active { background: #000; border-color: #000; color: #fff; }

/* Letter sections: black circle marker left of the tile grid */
#vibe-ing-idx-grid { margin-top: 10px; }
.vibe-ing-idx-letter { display: grid; grid-template-columns: 40px 1fr; gap: 0 10px; align-items: start; padding-top: 20px; margin-top: 20px; border-top: 1px solid #e5e1dc; }
.vibe-ing-idx-letter--hidden { display: none; }
#content .vibe-ing-idx-letter-h { width: 26px; height: 26px; border-radius: 50%; background: #000; color: #fff; font-family: var(--vibe-ff-bold); font-size: 18px; display: flex; align-items: center; justify-content: center; margin: 0; padding: 0; }

/* Tiles: grey bg, centered black uppercase text; hover = hero image + white text */
.vibe-ing-idx-cards { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px 6px; }

/* === Trending block === */
.vibe-ing-trend { margin: 24px 0 22px; }
#content .vibe-ing-trend-h { font-family: var(--vibe-ff-bold); font-size: var(--vibe-fs-18); text-transform: uppercase; color: var(--vibe-black); margin: 0 0 10px; padding: 0; }
.vibe-ing-trend-cards { grid-template-columns: repeat(5, 1fr); }
#content .vibe-ing-trend-card a { display: block; text-decoration: none !important; }
.vibe-ing-trend-img { --ihero: none; display: block; aspect-ratio: 16 / 9; background-color: rgba(224, 217, 214, .35); background-image: var(--ihero); background-size: cover; background-position: center; }
.vibe-ing-trend-card a:hover .vibe-ing-trend-img { opacity: .85; }
.vibe-ing-idx-card--hidden { display: none; }
#content .vibe-ing-idx-card a { --ihero: none; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 62px; padding: 8px 10px; background-color: rgba(224, 217, 214, 0.35); background-size: cover; background-position: center; text-decoration: none !important; }
#content .vibe-ing-idx-card a:hover { background-image: linear-gradient(rgba(0, 0, 0, .45), rgba(0, 0, 0, .45)), var(--ihero); text-decoration: none !important; }
.vibe-ing-idx-card-name { font-family: var(--vibe-ff-bold); font-size: 15px; text-transform: uppercase; color: #000; line-height: 1.25; }
.vibe-ing-idx-card a:hover .vibe-ing-idx-card-name { color: #fff; }
.vibe-ing-idx-badges { position: absolute; top: 4px; right: 4px; display: flex; gap: 4px; }
.vibe-ing-idx-badge { font-family: var(--vibe-ff-demi); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; background: var(--vibe-orange); color: #fff; padding: 1px 5px; }
.vibe-ing-idx-empty { font-family: var(--vibe-ff); font-size: var(--vibe-fs-16); color: #777; margin: 30px 0; }

/* Mobile filter bar + modal — values 1:1 from the shop's .filter-header / .filter-popup (/parfum) */
.vibe-ing-fh { display: none; background: rgba(255, 255, 255, .9); border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; margin: 0 -16px 16px; }
#content .vibe-ing-fh-link { display: flex; justify-content: space-between; height: 50px; padding: 0 27px; text-decoration: none !important; }
.vibe-ing-fh-text { font-family: var(--vibe-ff-bold); font-size: 16px; text-transform: uppercase; color: rgba(93, 93, 93, .85); line-height: 49px; }
.vibe-ing-fh-btn {
  font-family: var(--vibe-ff-bold); font-size: 16px; text-transform: uppercase; color: #fff;
  height: 24px; line-height: 26px; margin-top: 13px; padding: 0 21px 0 12px;
  background:
    linear-gradient(-135deg, rgba(0, 0, 0, 0) 9px, rgba(93, 93, 93, .85) 0) 100% 0 / 100% 50.5% no-repeat,
    linear-gradient(-45deg, rgba(0, 0, 0, 0) 9px, rgba(93, 93, 93, .85) 0) 100% 100% / 100% 50.5% no-repeat;
}
.vibe-ing-fpopup-backdrop { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, .5); z-index: 100000; }
.vibe-ing-fpopup { display: none; position: fixed; top: 12px; bottom: 12px; left: 12px; right: 12px; background: #fff; z-index: 100001; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.vibe-ing-fpopup.open, .vibe-ing-fpopup-backdrop.open { display: block; }
.vibe-ing-fpopup-header { display: flex; justify-content: space-between; align-items: center; min-height: 62px; border-bottom: 1px solid #eee; }
.vibe-ing-fpopup-htext { font-family: var(--vibe-ff); font-size: 16px; text-transform: uppercase; color: #969696; padding-left: 21px; }
#content .vibe-ing-fpopup-close { position: relative; width: 22px; height: 22px; margin-right: 34px; flex-shrink: 0; text-decoration: none !important; }
.vibe-ing-fpopup-close::before, .vibe-ing-fpopup-close::after { content: ''; position: absolute; top: 50%; left: 50%; width: 27px; height: 2px; background: #000; }
.vibe-ing-fpopup-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.vibe-ing-fpopup-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.vibe-ing-fpopup-sec { border-bottom: 1px solid #eee; }
.vibe-ing-fpopup-heading { display: flex; justify-content: space-between; align-items: center; padding: 8px 24px 8px 18px; min-height: 44px; cursor: pointer; user-select: none; }
.vibe-ing-fpopup-title { font-family: var(--vibe-ff-bold); font-size: 18px; text-transform: uppercase; color: #000; }
.vibe-ing-fpopup-heading .plus, .vibe-ing-fpopup-heading .minus { font-family: serif; font-size: 35px; line-height: 1; color: #000; }
.vibe-ing-fpopup-heading .minus { display: none; }
.vibe-ing-fpopup-sec.expanded .plus { display: none; }
.vibe-ing-fpopup-sec.expanded .minus { display: inline; }
.vibe-ing-fpopup-content { display: none; padding-bottom: 10px; }
.vibe-ing-fpopup-sec.expanded .vibe-ing-fpopup-content { display: block; }
.vibe-ing-fpopup-option { display: flex; align-items: center; gap: 20px; min-height: 55px; margin: 0 20px 0 32px; border-top: 1px solid #e5e5e5; font-family: var(--vibe-ff); font-size: 19px; color: #000; cursor: pointer; }
.vibe-ing-fpopup-option:first-child { border-top: 0; }
.vibe-ing-fpopup-option::before { content: ''; width: 20px; height: 20px; flex-shrink: 0; background: #e6e3e1; }
.vibe-ing-fpopup-option.selected::before { background: var(--vibe-orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.5' d='M2.5 8.5l3.5 3.5 7-8'/%3E%3C/svg%3E") center / 13px no-repeat; }

/* Mobile letter rail — values 1:1 from .perfumers-index-container */
.vibe-ing-idx-rail {
  display: none; position: fixed; right: 0; top: 73px;
  width: 30px; height: 475px;
  background: rgba(0, 0, 0, 0.4); border-radius: 22px;
  margin: 0 18px; padding: 9px 0; z-index: 9999;
}
.vibe-ing-idx-rail .index { display: table; width: 30px; height: 475px; margin: 0; padding: 0; }
.vibe-ing-idx-rail .index li { color: var(--vibe-white, #fff); font-size: var(--vibe-fs-18); font-family: var(--vibe-ff); line-height: 24px; text-align: center; cursor: pointer; }
.vibe-ing-idx-rail .index li.small { font-family: var(--vibe-ff-bold); line-height: 9px; height: 12px !important; }

@media (max-width: 900px) {
  .vibe-ing-idx-cards { grid-template-columns: repeat(4, 1fr); }
  /* Ten tiles don't fit a phone grid without shrinking to nothing — swipe instead of wrap */
  .vibe-ing-trend-cards { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
  .vibe-ing-trend-card { flex: 0 0 42%; scroll-snap-align: start; }
  /* Full-bleed hero: compensate the page's 16px side padding */
  .vibe-ing-idx-hero { margin-left: -16px; margin-right: -16px; }
}
@media (max-width: 768px) {
  .vibe-ing-idx-hero-bg--desktop { display: none; }
  .vibe-ing-idx-hero-bg--mobile { display: flex; height: 300px; align-items: flex-start; padding: 24px 16px; }
  .vibe-ing-idx-hero-text { max-width: 100%; }
  #content .vibe-ing-idx-title { font-size: var(--vibe-fs-24); }
  #content .vibe-ing-idx-subtitle { font-size: var(--vibe-fs-14); }
  #content .vibe-ing-idx-search { width: 100%; margin-top: 14px; }
  /* Horizontal A-Z is replaced by the fixed right-edge rail on mobile */
  .vibe-ing-idx-toolbar { display: none; }
  .vibe-ing-idx-rail { display: block; }
  /* Filters move into the modal on mobile (shop /parfum pattern) */
  .vibe-ing-idx-filter-row { display: none; }
  .vibe-ing-fh { display: block; }
}
@media (max-width: 600px) {
  .vibe-ing-idx-cards { grid-template-columns: repeat(2, 1fr); }
  .vibe-ing-idx-letter { grid-template-columns: 34px 1fr; }
}