/* ============================================================================
   BIOHEAL DESIGN LEAP — kártya-stage adaptáció a háttér nélküli (kivágott)
   termékképekhez. ADDITÍV, site-wide; a Hyvä/Magento data-binding ÉRINTETLEN.
   A kártya-stage FEHÉR marad (a fehér-hátterű képek zökkenőmentesen ülnek),
   + egy finom kontakt-árnyék a kivágott (transparent) terméknek „talajt" ad.
   Fehér-bg termék esetén az opak kép eltakarja az árnyékot → nincs dupla.
   Tokenek: bioheal-brand.css :root. NINCS ikon/emoji/erős árnyék.
   ============================================================================ */

.bh-product-card__stage { position: relative; }

/* a packshot a kontakt-árnyék FÖLÖTT (a badge z-index 2 marad fölötte) */
.bh-product-card__media { position: relative; z-index: 1; }

/* finom kontakt-árnyék a termék talpánál (csak a kivágott terméknél látszik) */
.bh-product-card__stage::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 11%;
  width: 50%; height: 14px;
  transform: translateX(-50%);
  z-index: 0;
  background: radial-gradient(closest-side, rgba(3, 76, 60, .13), transparent 80%);
  filter: blur(2px);
  pointer-events: none;
}

/* ============================================================================
   SPRINT C — Kategória-hero (editorial) + PLP scroll-reveal.
   ============================================================================ */

/* ---- Kategória-hero: a sima page-title + leírás eleválása ---- */
.catalog-category-view .page-title {
  font-family: 'Inter', Georgia, serif;
  font-weight: 600;
  font-size: clamp(2rem, 4.6vw, 3rem);
  letter-spacing: -.015em;
  color: var(--bh-ink);
  position: relative;
  margin-bottom: 14px;
}
.catalog-category-view .page-title::before {
  content: "";
  display: block;
  width: 36px; height: 2px;
  background: var(--bh-gold);
  border-radius: 2px;
  margin-bottom: 18px;
}
.catalog-category-view .category-description {
  font-size: 1.05rem;
  line-height: 1.62;
  color: var(--bh-ink-soft);
  max-width: 66ch;
}
.catalog-category-view .category-description p { margin: 0 0 .8em; }

/* ---- PLP scroll-reveal (a motion.js adja a class-t → no-JS = látható) ---- */
.bh-reveal { opacity: 0; transform: translateY(18px); }
.bh-reveal.bh-in {
  opacity: 1; transform: none;
  transition: opacity .55s var(--bh-ease-out), transform .55s var(--bh-ease-out);
}

@media (prefers-reduced-motion: reduce) {
  .bh-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ============================================================================
   SPRINT D — PDP galéria fő-kép „stage" (kivágott termékhez).
   Stabil hook: #gallery-main (a gallery.phtml fő-kép konténere). Az Alpine
   galéria-logikát (initGallery/fullscreen/nav/3D-slot) NEM érinti — csak vizuál.
   ============================================================================ */
.catalog-product-view #gallery-main {
  background: radial-gradient(82% 70% at 50% 34%, #fff 0%, #fff 44%, #FCFAF4 76%, var(--bh-paper) 100%);
  border-radius: var(--bh-radius-lg);
}
/* kontakt-árnyék a kép MÖGÖTT (::before a DOM-ban a kép előtt → alatta marad) */
.catalog-product-view #gallery-main::before {
  content: "";
  position: absolute;
  left: 50%; bottom: 7%;
  width: 50%; height: 24px;
  transform: translateX(-50%);
  z-index: 0;
  background: radial-gradient(closest-side, rgba(3, 76, 60, .18), transparent 80%);
  filter: blur(3px);
  pointer-events: none;
}

/* ============================================================================
   MOBIL RESZPONZÍV FIX (2026-06-09) — a hiányzó Tailwind reszponzív utility-k
   CSS-fallbackje. A privát Tailwind-build hiányában a grid-cols-1 és az
   xl:grid-cols-3 NEM fordult le → a termékrács mobilon 1 óriás oszlop volt.
   Csak vizuál; a Hyvä/Magento data-binding ÉRINTETLEN.
   ============================================================================ */

/* ---- Termékrács: mobilon 2 oszlop. 640px felett a meglévő sm:grid-cols-2
   (2 oszlop) változatlanul érvényes. A .products-grid wrapper CSAK grid-módban
   van a DOM-ban → a lista-nézet 1 oszlopa megmarad. ---- */
@media (max-width: 639px) {
  .products-grid .bh-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
}

/* ---- PDP leírás/szekciók: a beágyazott (WYSIWYG/importált) tartalom SOHA ne
   csorduljon túl mobilon — a kép skálázódik, a széles táblázat görgethető. ---- */
@media (max-width: 767px) {
  .catalog-product-view .product-description img,
  .catalog-product-view .prose img,
  .bh-pdp-sec__b img { max-width: 100%; height: auto; }
  .bh-pdp-sec__b { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .catalog-product-view .product-description table,
  .bh-pdp-sec__b table { max-width: 100%; }
}

/* ============================================================================
   KATEGÓRIA-HERO (Szezonális) — Premium White nyári banner a category
   description-ben (2026-06-09). Az élő /szezonalis mintájára, márka-konzisztensen.
   ============================================================================ */
.catalog-category-view .category-description:has(.bh-cat-hero) { max-width: none; }
.bh-cat-hero {
  margin: 4px 0 30px; padding: 26px 32px;
  border-radius: var(--bh-radius-lg, 20px);
  position: relative; overflow: hidden;
}
.bh-cat-hero--summer {
  background: linear-gradient(120deg, var(--bh-sage-50, #EEF5EF), var(--bh-mist, #F5F8F5) 55%, #FBF1D9);
  border: 1px solid var(--bh-gold-soft, #E8D9B5);
}
.bh-cat-hero__k {
  display: block; font-size: .72rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--bh-copper, #B07A4B); margin-bottom: 8px;
}
.bh-cat-hero__t {
  font-family: 'Inter', Georgia, serif; font-weight: 600;
  font-size: clamp(1.6rem, 3.4vw, 2.3rem); line-height: 1.08;
  color: var(--bh-ink, #17231E); margin: 0 0 8px;
}
.bh-cat-hero__d {
  font-size: 1.02rem; line-height: 1.55; color: var(--bh-ink-soft, #36433C);
  max-width: 62ch; margin: 0;
}
@media (max-width: 639px) { .bh-cat-hero { padding: 20px 18px; } }

/* ===========================================================================
   §CATALOGSTAGE — unified product "stage" for PLP / search product cards
   (Phase 3 · 2, 2026-06-15). Matches the home stack stage: white->cream base +
   soft green glow + faint dashed molecular ring. Paired with the item.phtml
   change that serves the transparent _front_alpha.webp on these grids, so the
   cutout product sits ON the stage (the ring/glow show around it).
   Scoped to category + search grids; homepage widgets (.block-products-list)
   are explicitly kept transparent (the bottle floats on the cream page bg).
   Appended LAST. Rollback = strip from the "§CATALOGSTAGE" marker to EOF +
   restore the css backup + revert item.phtml.
   =========================================================================== */
.catalog-category-view .bh-product-card__stage,
.catalogsearch-result-index .bh-product-card__stage {
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'><circle cx='100' cy='100' r='86' fill='none' stroke='%232E7D32' stroke-opacity='0.18' stroke-width='1.3' stroke-dasharray='4 7'/><circle cx='100' cy='14' r='3' fill='%23C9A227' fill-opacity='0.6'/><circle cx='186' cy='100' r='2.4' fill='%232E7D32' fill-opacity='0.45'/><circle cx='100' cy='186' r='2.4' fill='%232E7D32' fill-opacity='0.45'/><circle cx='14' cy='100' r='2.4' fill='%232E7D32' fill-opacity='0.45'/></svg>") 50% 44% / auto 72% no-repeat,
    radial-gradient(46% 46% at 50% 44%, rgba(46, 125, 50, .06), transparent 70%) 0 0 / cover no-repeat,
    radial-gradient(64% 64% at 50% 40%, #ffffff 0%, #FBFAF7 58%, var(--bh-mist, #F5F8F5) 100%) 0 0 / cover no-repeat;
}
/* re-assert: homepage / related widgets keep the bottle floating on the page (no stage) */
.block-products-list .bh-product-card__stage { background: transparent; }

/* ===========================================================================
   §PDPRING — molecular ring on the PDP main-image stage (Phase 3, 2026-06-15)
   Adds the same faint dashed ring as the home/catalog stage to #gallery-main
   (which already has a radial white->cream stage). Shows around cutout product
   images; harmless behind opaque ones. Appended to bioheal-catalog.css (loads
   on PDP). Rollback = strip from "§PDPRING" marker to EOF.
   =========================================================================== */
.catalog-product-view #gallery-main {
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'><circle cx='100' cy='100' r='88' fill='none' stroke='%232E7D32' stroke-opacity='0.14' stroke-width='1.2' stroke-dasharray='4 8'/><circle cx='100' cy='12' r='3' fill='%23C9A227' fill-opacity='0.5'/><circle cx='188' cy='100' r='2.4' fill='%232E7D32' fill-opacity='0.4'/><circle cx='100' cy='188' r='2.4' fill='%232E7D32' fill-opacity='0.4'/><circle cx='12' cy='100' r='2.4' fill='%232E7D32' fill-opacity='0.4'/></svg>") 50% 38% / auto 58% no-repeat,
    radial-gradient(82% 70% at 50% 34%, #fff 0%, #fff 44%, #FCFAF4 76%, var(--bh-paper) 100%);
  border-radius: var(--bh-radius-lg);
}

/* ===========================================================================
   §ALLPROD — /osszes-termek.html client-side facet toolbar (2026-06-15)
   Scoped to .category-osszes-termek + .bh-apf. Desktop = inline top filterbar
   (4-col grid, native Hyvä toolbar/sidebar hidden); mobile = slide-in drawer.
   Tokens from bioheal-brand.css :root. Rollback = strip from §ALLPROD to EOF.
   =========================================================================== */

/* full-width host (the toolbar lives in the category description) */
.category-osszes-termek .category-description { max-width: none; }
.category-osszes-termek .category-description:has(.bh-apf-host) { max-width: none; }

/* hide the native Hyvä toolbar (sorter/limiter/count) — replaced by .bh-apf */
.category-osszes-termek .toolbar-products,
.category-osszes-termek .toolbar.toolbar-products,
.category-osszes-termek #product-list > .toolbar,
.category-osszes-termek .sidebar-main,
.category-osszes-termek .sidebar-additional { display: none !important; }

/* hide the native layered-nav block — 1column re-flows it inline; .bh-apf replaces it.
   Hooks: Hyvä renders #filters-heading (mobile title) + #filters-content (the options). */
.category-osszes-termek #filters-heading,
.category-osszes-termek #filters-content,
.category-osszes-termek .filter,
.category-osszes-termek .block.filter { display: none !important; }

/* product grid: mobile 2 · md 3 · xl 4 (single-column page → room for 4) */
.category-osszes-termek .products-grid .bh-product-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px !important;
}
@media (min-width: 1024px) {
  .category-osszes-termek .products-grid .bh-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (min-width: 1280px) {
  .category-osszes-termek .products-grid .bh-product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 20px !important; }
}

/* ---- subtitle ---- */
.bh-apf-host { max-width: none; }
.bh-apf-sub {
  font-size: 1.05rem; line-height: 1.6; color: var(--bh-ink-soft, #36433C);
  max-width: 70ch; margin: 0 0 22px;
}
.bh-apf-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ---- toolbar shell ---- */
.bh-apf { margin: 0 0 8px; }
.bh-apf__bar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 0 14px; border-top: 1px solid var(--bh-line, #E7E3DA);
  border-bottom: 1px solid var(--bh-line, #E7E3DA);
}
.bh-apf__count { margin: 0; font-size: .95rem; color: var(--bh-ink-soft, #36433C); white-space: nowrap; }
.bh-apf__count strong { color: var(--bh-ink, #17231E); font-weight: 700; font-size: 1.05rem; }

/* search */
.bh-apf__search { position: relative; flex: 1 1 260px; min-width: 200px; }
.bh-apf__search-ic { position:absolute; left:13px; top:50%; transform:translateY(-50%); color: var(--bh-sage, #5C8D6F); pointer-events:none; }
.bh-apf__search input {
  width: 100%; height: 44px; padding: 0 38px 0 40px; border-radius: 999px;
  border: 1px solid var(--bh-line, #E1DDD3); background: #fff; color: var(--bh-ink, #17231E);
  font-size: .98rem; transition: border-color .15s, box-shadow .15s;
}
.bh-apf__search input:focus { outline: none; border-color: var(--bh-green, #2D5A3D); box-shadow: 0 0 0 3px rgba(45,90,61,.12); }
.bh-apf__qclear { position:absolute; right:10px; top:50%; transform:translateY(-50%); width:26px;height:26px;border-radius:50%;
  border:none; background:var(--bh-mist,#F0F3EE); color:var(--bh-ink-soft,#36433C); font-size:18px; line-height:1; cursor:pointer; }
.bh-apf__qclear:hover { background: var(--bh-sage-50, #EAF1EA); }

/* sort */
.bh-apf__sortwrap { position: relative; }
.bh-apf__sort {
  appearance: none; -webkit-appearance: none; height: 44px; padding: 0 36px 0 16px;
  border-radius: 999px; border: 1px solid var(--bh-line, #E1DDD3); background: #fff;
  color: var(--bh-ink, #17231E); font-size: .95rem; cursor: pointer; min-width: 190px;
}
.bh-apf__sort:focus { outline:none; border-color: var(--bh-green,#2D5A3D); box-shadow: 0 0 0 3px rgba(45,90,61,.12); }
.bh-apf__sort-ic { position:absolute; right:13px; top:50%; transform:translateY(-50%); color: var(--bh-sage,#5C8D6F); pointer-events:none; }

/* filter toggle (mobile only) */
.bh-apf__filter-toggle {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px;
  border-radius: 999px; border: 1px solid var(--bh-green, #2D5A3D); background: var(--bh-green, #2D5A3D);
  color: #fff; font-size: .95rem; font-weight: 600; cursor: pointer;
}
.bh-apf__fcount { display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 6px;
  border-radius:999px; background:#fff; color:var(--bh-green,#2D5A3D); font-size:.78rem; font-weight:700; }

/* scrim (mobile drawer) */
.bh-apf__scrim { position: fixed; inset: 0; background: rgba(23,35,30,.42); z-index: 60; }

/* ---- panel: mobile drawer by default ---- */
.bh-apf__panel {
  position: fixed; top: 0; right: 0; height: 100%; width: min(88vw, 360px);
  background: #fff; z-index: 61; box-shadow: -18px 0 40px rgba(23,35,30,.16);
  transform: translateX(100%); transition: transform .28s var(--bh-ease-out, cubic-bezier(.4,0,.2,1));
  display: flex; flex-direction: column; overflow-y: auto; padding: 0 18px 18px;
}
.bh-apf--open .bh-apf__panel { transform: translateX(0); }
.bh-apf__panel-head {
  position: sticky; top: 0; background:#fff; display:flex; align-items:center; justify-content:space-between;
  padding: 16px 0 12px; border-bottom: 1px solid var(--bh-line,#EEEAE1); margin-bottom: 6px;
  font-family:'Inter',Georgia,serif; font-size:1.15rem; color:var(--bh-ink,#17231E);
}
.bh-apf__panel-close { width:34px;height:34px;border:none;background:var(--bh-mist,#F0F3EE);border-radius:50%;font-size:22px;line-height:1;cursor:pointer;color:var(--bh-ink-soft,#36433C); }
.bh-apf__group { border:none; margin:0; padding:14px 0; border-bottom:1px solid var(--bh-line,#F0ECE3); }
.bh-apf__legend { font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--bh-copper,#B07A4B); padding:0; margin-bottom:10px; }
.bh-apf__opts { display:flex; flex-direction:column; gap:9px; }
.bh-apf__toggles { flex-direction:row; flex-wrap:wrap; gap:10px; }
.bh-apf__chk { display:inline-flex; align-items:center; gap:9px; font-size:.95rem; color:var(--bh-ink,#17231E); cursor:pointer; }
.bh-apf__chk input { width:18px;height:18px; accent-color: var(--bh-green,#2D5A3D); cursor:pointer; flex:0 0 auto; }
.bh-apf__optn { margin-left:auto; font-style:normal; font-size:.8rem; color:var(--bh-ink-mute,#8A938B); }
.bh-apf__toggles .bh-apf__chk { padding:8px 14px; border:1px solid var(--bh-line,#E1DDD3); border-radius:999px; }
.bh-apf__toggles .bh-apf__optn { display:none; }
.bh-apf__panel-foot { display:flex; gap:10px; padding:16px 0 4px; margin-top:auto; position:sticky; bottom:0; background:#fff; }
.bh-apf__reset { flex:1 1 auto; height:46px; border-radius:999px; border:1px solid var(--bh-line,#D8D3C8); background:#fff; color:var(--bh-ink,#17231E); font-size:.95rem; cursor:pointer; }
.bh-apf__reset:hover { border-color:var(--bh-green,#2D5A3D); color:var(--bh-green,#2D5A3D); }
.bh-apf__apply { flex:1 1 auto; height:46px; border-radius:999px; border:none; background:var(--bh-green,#2D5A3D); color:#fff; font-weight:600; cursor:pointer; }
.bh-apf__linkbtn { background:none;border:none;color:var(--bh-green,#2D5A3D);text-decoration:underline;cursor:pointer;font:inherit; }

/* ---- active chips ---- */
.bh-apf__chips { display:flex; flex-wrap:wrap; gap:8px; padding:12px 0 0; }
.bh-apf__chips:empty { padding:0; }
.bh-apf__chip { display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border-radius:999px;
  border:1px solid var(--bh-sage-200,#CFE0D2); background:var(--bh-sage-50,#EEF5EF); color:var(--bh-green-deep,#1F4530);
  font-size:.85rem; cursor:pointer; }
.bh-apf__chip span { font-size:1rem; line-height:1; opacity:.7; }
.bh-apf__chip:hover { background:var(--bh-sage-100,#E1ECE2); }

/* ---- empty state ---- */
.bh-apf__empty { padding:40px 0; text-align:center; color:var(--bh-ink-soft,#36433C); font-size:1.02rem; }

/* ---- DESKTOP: compact bar + COLLAPSIBLE dropdown panel (collapsed by default) ----
   v2 2026-06-23: a panel többé NEM mindig-nyitott blokk; a „Szűrők" gomb nyitja le.
   Így nyitáskor a termékek első sora látszik, nem a nagy szűrő-tábla. */
@media (min-width: 1024px) {
  .bh-apf__filter-toggle { display: inline-flex; }      /* látható: ez nyitja a lenyíló panelt */
  .bh-apf__scrim { display: none !important; }
  .bh-apf__panel {
    position: static; transform: none !important; height: auto; width: auto; box-shadow: none;
    display: none; overflow: visible;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 6px 28px;
    padding: 18px 0 10px; margin-top: 6px;
    border-top: 1px solid var(--bh-line, #E7E3DA);
    border-bottom: 1px solid var(--bh-line, #E7E3DA);
  }
  .bh-apf--open .bh-apf__panel { display: grid; }
  .bh-apf__panel-head { display: none; }
  .bh-apf__panel-foot { position: static; padding: 4px 0; grid-column: 1 / -1; justify-content: flex-end; margin-top: 4px; }
  .bh-apf__apply { display: none; }
  .bh-apf__reset { flex: 0 0 auto; height: 40px; padding: 0 22px; }
  .bh-apf__group { border-bottom: none; padding: 6px 0; }
  .bh-apf__opts { gap: 8px; }
}
/* a „Szűrők" gomb aktív állapot-jelzése, amikor a panel nyitva van */
.bh-apf--open .bh-apf__filter-toggle { background: var(--bh-green-deep, #1F4530); border-color: var(--bh-green-deep, #1F4530); }

/* =============================================================================
   §VÉDŐESZKÖZÖK — külön szekció a rács után (cat 14), JS helyezi el. 2026-06-23
   ========================================================================== */
.bh-prot {
  margin: 52px 0 8px; padding-top: 38px;
  border-top: 2px solid var(--bh-line, #E7E3DA);
}
.bh-prot__head { margin: 0 0 26px; }
.bh-prot__eyebrow {
  display: inline-block; font-size: .76rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--bh-copper, #B07A4B); margin: 0 0 8px;
}
.bh-prot__title {
  font-family: 'Fraunces', Georgia, serif; font-weight: 600; line-height: 1.12;
  font-size: clamp(1.5rem, 3vw, 2.05rem); color: var(--bh-ink, #17231E); margin: 0 0 10px;
}
.bh-prot__sub { margin: 0; color: var(--bh-ink-soft, #36433C); font-size: 1.02rem; max-width: 62ch; line-height: 1.55; }
.bh-prot__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px;
}
@media (min-width: 1024px) { .bh-prot__grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 1280px) { .bh-prot__grid { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 20px; } }

/* FOUC-guard: a védőeszköz-kártyák a FŐ rácsban rejtve, amíg a JS át nem helyezi őket.
   Áthelyezés után már nem a .bh-product-grid közvetlen gyerekei → újra láthatók. */
.category-osszes-termek #product-list .bh-product-grid > li:has(.bh-prot-card) { display: none; }

@media (prefers-reduced-motion: reduce) {
  .bh-apf__panel { transition: none; }
}

/* =============================================================================
   PDP mobile horizontal-overflow fix  (2026-06-15)
   The description/attributes wrapper `.grid.lg:grid-cols-2.gap-8` has NO mobile
   column definition (it is a bare `display:grid`, unlike the media/info grid
   which uses `grid-cols-1` = minmax(0,1fr)). Its single `auto` track therefore
   grows to the items' max-content (`max-w-prose` ~= 65ch ~= 440px), inflating
   the 342px viewport column to ~490px and pushing the whole page ~124px wide
   (documentElement.scrollWidth - clientWidth = 124 at 390px).
   Fix: pin the track to minmax(0,1fr) so it fills but never exceeds the column,
   and let grid items shrink below content (min-width:0) -> prose text wraps and
   the attributes table (#product-attributes.table-wrapper, overflow-x:auto)
   scrolls instead of overflowing. Scoped to < 1024px (below the `lg:` break),
   so the desktop two-column layout is untouched.
   NOTE: the gallery coverflow (.bh-coverflow__track, overflow-x:auto) ALREADY
   scrolls correctly and is NOT a source of page overflow -- left unchanged.
   ========================================================================== */
@media (max-width: 1023px) {
  .catalog-product-view .grid.lg\:grid-cols-2.gap-8 { grid-template-columns: minmax(0, 1fr); }
  .catalog-product-view .grid.lg\:grid-cols-2.gap-8 > * { min-width: 0; }
}

/* === Bioheal kategóriabevezető V4 — magazin-doboz, prose-szűkítés feloldva === */

/* A category-description prose-korlátját feloldjuk — a bevezetőnk magazin, nem prose-szöveg */
.category-description:has(.bh-category-intro){max-width:none !important;}

/* Nagy prémium magazin-doboz — KÉP + SZÖVEG egyetlen kártyában; elfedi a globális bh-livingbg-t */
.bh-category-intro.bh-category-intro--with-media{
    display:grid !important;
    grid-template-columns:minmax(0,5fr) minmax(0,7fr) !important;
    gap:40px !important;
    align-items:stretch !important;
    margin:24px 0 36px 0 !important;
    max-width:1280px !important;
    width:100% !important;
    background:var(--bh-paper,#fafbf8) !important;
    border:1px solid var(--bh-hair,rgba(23,35,30,.12)) !important;
    border-radius:16px !important;
    padding:28px !important;
    box-shadow:0 1px 2px rgba(34,52,42,.05),0 16px 48px rgba(34,52,42,.08) !important;
    position:relative;
    z-index:1;
}

/* Kép — belső dobozban, közepesen mély radius, hover-zoom */
.bh-category-intro__media{
    position:relative;
    border-radius:10px !important;
    overflow:hidden;
    background:var(--bh-paper-2,#eef3ec);
    min-height:280px;
}
.bh-category-intro__media img{
    display:block !important;
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    transition:transform 14s cubic-bezier(.22,.61,.36,1);
}
.bh-category-intro.bh-category-intro--with-media:hover .bh-category-intro__media img{
    transform:scale(1.04);
}

/* Szöveg-oszlop — semmilyen extra doboz, tipográfia viszi */
.bh-category-intro--with-media .bh-category-intro__content{
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    background:transparent !important;
    border:none !important;
    box-shadow:none !important;
    padding:4px 8px 4px 0 !important;
    max-width:none !important;
    border-radius:0 !important;
}

/* Eyebrow — italic serif + gold-hairline */
.bh-category-intro__eyebrow{
    display:inline-block !important;
    margin:0 0 20px 0 !important;
    font-family:Georgia,'Times New Roman',serif !important;
    font-style:italic !important;
    font-size:14px !important;
    letter-spacing:.05em !important;
    color:var(--bh-green,#2d5a3d) !important;
    text-transform:none !important;
    position:relative;
    padding-bottom:10px;
}
.bh-category-intro__eyebrow::after{
    content:'';
    position:absolute;
    bottom:0;
    left:0;
    width:48px;
    height:1px;
    background:var(--bh-gold,#c9a961);
}
.bh-category-intro__eyebrow sup{font-size:.6em;vertical-align:super;}

/* Törzs */
.bh-category-intro__text{max-width:none !important;}
.bh-category-intro__text p{
    margin:0 0 14px 0 !important;
    font-size:17px !important;
    line-height:1.72 !important;
    color:var(--bh-ink,#2b322e) !important;
    font-weight:400 !important;
}
.bh-category-intro__text p:last-child{margin-bottom:0 !important;}

/* Notice — finom mist + gold balról */
.bh-category-intro__notice{
    margin:18px 0 0 0 !important;
    padding:11px 16px !important;
    border-left:3px solid var(--bh-gold,#c9a961) !important;
    border-top:none !important;
    background:var(--bh-mist,#f5f8f5) !important;
    font-size:13.5px !important;
    line-height:1.6 !important;
    color:var(--bh-muted,#6b7a70) !important;
    border-radius:0 6px 6px 0 !important;
}

/* Tablet alatt: stack */
@media (max-width:900px){
    .bh-category-intro.bh-category-intro--with-media{
        display:block !important;
        padding:22px !important;
        margin:18px 0 26px 0 !important;
    }
    .bh-category-intro__media{
        margin-bottom:20px;
        aspect-ratio:16/10;
        min-height:0;
    }
    .bh-category-intro--with-media .bh-category-intro__content{padding:0 !important;}
}

/* Mobil ≤640px */
@media (max-width:640px){
    .bh-category-intro.bh-category-intro--with-media{
        padding:18px !important;
        border-radius:12px !important;
        margin:14px 0 22px 0 !important;
    }
    .bh-category-intro__media{aspect-ratio:4/3;margin-bottom:16px;}
    .bh-category-intro__eyebrow{margin:0 0 14px 0 !important;font-size:13px !important;}
    .bh-category-intro__text p{margin:0 0 12px 0 !important;font-size:16px !important;line-height:1.65 !important;}
    .bh-category-intro__notice{margin:14px 0 0 0 !important;padding:10px 14px !important;font-size:13px !important;}
}

/* ── PDP feldobás II. (2026-06-21): galéria-alatti life-style rács + kártya-egységesítés + rövidleírás-kép ── */
.bh-pdp-aside{display:none}
@media (min-width:1024px){
  .bh-pdp-aside{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
  .bh-pdp-aside img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;border:1px solid rgba(45,90,61,.12);display:block}
  .catalog-product-view #bh-media-story{display:none}
}
.catalog-product-view .bh-claims__row .bh-symbol-flip--mini .bh-symbol-flip__front,
.catalog-product-view .bh-claims__row .bh-symbol-flip--mini .bh-symbol-flip__back{min-height:156px}
.bh-pdp-info .product-description{overflow:hidden}
.bh-shortdesc-thumb{float:right;width:84px;height:84px;object-fit:cover;border-radius:10px;margin:2px 0 .5rem .8rem;border:1px solid rgba(45,90,61,.12)}

/* ── PDP feldobás III. (2026-06-21): lead-kép + Tudástár-cikk teaser ── */
.bh-richtext__figure--lead{width:min(210px,38%);margin:.1rem 0 .9rem 1.4rem}
.bh-pdp-article{display:flex;gap:18px;align-items:center;margin:28px 0 8px;padding:14px;background:#fff;border:1px solid rgba(45,90,61,.14);border-radius:16px;box-shadow:0 10px 30px rgba(34,52,42,.07)}
.bh-pdp-article__media{flex:0 0 200px;border-radius:12px;overflow:hidden;display:block}
.bh-pdp-article__media img{display:block;width:100%;height:140px;object-fit:cover}
.bh-pdp-article__kicker{font-family:"Inter",system-ui,sans-serif;font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#5C8D6F}
.bh-pdp-article__title{font-family:"Fraunces",Georgia,serif;font-size:1.12rem;color:#2D5A3D;margin:.25rem 0 .4rem;line-height:1.2}
.bh-pdp-article__title a{color:inherit;text-decoration:none}
.bh-pdp-article__excerpt{font-family:"Inter",system-ui,sans-serif;font-size:.9rem;color:#5A6B62;line-height:1.55;margin:0 0 .5rem}
.bh-pdp-article__cta{font-family:"Inter",system-ui,sans-serif;font-weight:600;font-size:.85rem;color:#2D5A3D;text-decoration:none}
.bh-pdp-article__cta:hover{text-decoration:underline}
@media (max-width:640px){.bh-pdp-article{flex-direction:column;align-items:stretch}.bh-pdp-article__media{flex:none}.bh-pdp-article__media img{height:180px}}

/* lead-kép kicsi (specificitás-felülírás a --right ellen) */
.bh-richtext__figure.bh-richtext__figure--lead{width:min(186px,34%)}

/* ── Ajánlott termékek slider: a fő képpel egyező TISZTA FEHÉR stage (PDP) — 2026-06-21 ── */
.catalog-product-view .product-slider .bh-nc__stage{background:#fff !important;box-shadow:inset 0 0 0 1px rgba(159,196,168,.30) !important}