/* Csempe.co – egyedi CSS. Minimál, célzott szabályok. */

/* 1) HERO: teljes képernyő-magasság mínusz a fejléc (mért: 161px desktop / 145px mobil) */
#section_box_1 .ratio { height: calc(100vh - 161px); height: calc(100svh - 161px); }
#section_box_1 .ratio::before { padding-top: 0 !important; }
@media (max-width: 991.98px) {
  #section_box_1 .ratio { height: calc(100vh - 145px); height: calc(100svh - 145px); }
}
/* a hero szövege mobilon: a leadben CTA-gombok is vannak, ezért csak a magyarázó sort rejtjük */
@media (max-width: 575.98px) {
  #section_box_1 .v-full-slider-002 { padding: 1.25rem !important; }
  #section_box_1 .v-full-slider-003 h3 { font-size: 1.3rem !important; line-height: 1.25; margin-bottom: .5rem; }
  #section_box_1 .v-full-slider-003 .lead { font-size: .95rem !important; margin-bottom: .75rem !important; }
  #section_box_1 .v-full-slider-003 .btn { padding: .45rem .9rem; font-size: .85rem; }
}
@media (min-width: 576px) and (max-width: 991.98px) {
  #section_box_1 .v-full-slider-002 { padding: 1.5rem !important; }
  #section_box_1 .v-full-slider-003 h3 { font-size: 1.7rem !important; }
}

/* 2) Szekció-cím: ne érjen rá a tartalomra */
.v-section-title-001 h2 { padding-top: 2rem !important; margin-bottom: 1.25rem; }

/* 3) Termékkártya: egységes képarány – a gyártói fotók vegyes méretűek, e nélkül a rács ugrál */
article.card a.icon.rounding { aspect-ratio: 4 / 3; width: 100%; }
article.card a.icon.rounding picture { width: 100%; height: 100%; }
article.card a.icon.rounding picture img { width: 100% !important; height: 100% !important; max-height: none !important; object-fit: cover; }

/* 4) Diszkrét termékjelölések – FIX helyen, hogy a névhossz ne tolja el őket */
/* 4a) „Jelölés" mező értéke címkeként a kép bal felső sarkában (a mezőnév nem látszik) */
article.card .v-item-card-parts-item-card-details-002 {
  position: absolute; top: .75rem; left: 0; z-index: 3; width: auto !important; padding: 0 !important;
}
.v-item-card-parts-item-card-details-002 > div { font-size: 0 !important; color: transparent !important; line-height: 1 !important; }
.v-item-card-parts-item-card-details-002 strong {
  display: inline-block; font-size: .62rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--scolor3, #8c6d3f); border: 1px solid var(--scolor2, #c9a877); padding: .2rem .55rem; background: #fff;
}
/* 4b) „Raktáron” = azonnal kosárba tehető; ha van jelölés-címke is, alá kerül */
article.card:has(.btn-add-to-cart) a.icon.rounding::after {
  content: "Raktáron"; position: absolute; left: 0; top: .75rem; z-index: 2;
  font-size: .6rem; letter-spacing: .09em; text-transform: uppercase; font-weight: 600;
  background: rgba(255,255,255,.92); color: var(--pcolor2, #00647f); padding: .2rem .55rem;
}
article.card:has(.v-item-card-parts-item-card-details-002 strong) a.icon.rounding::after { top: 2.6rem; }
/* 4c) Akciós jelölés: kisebb, sötét, elegáns (a piros bg-danger helyett) */
.v-item-card-parts-item-card-discount-002 {
  background: rgb(var(--own-color-rgb2, 47,43,40)) !important;
  font-size: .68rem !important; letter-spacing: .05em; padding: .2rem .5rem !important;
}

/* 5) Kiemelt (arany hátterű) termékkártya: a kék körvonalas gomb nem olvasható rajta */
article.card .bg-highlighted .btn, article.card .bg-secondary-subtle .btn {
  background: #fff !important; border-color: rgb(var(--own-color-rgb2, 47,43,40)) !important;
  color: rgb(var(--own-color-rgb2, 47,43,40)) !important;
}
article.card .bg-highlighted .btn svg, article.card .bg-secondary-subtle .btn svg {
  fill: rgb(var(--own-color-rgb2, 47,43,40)) !important;
}
article.card .bg-highlighted .btn:hover, article.card .bg-secondary-subtle .btn:hover {
  background: rgb(var(--own-color-rgb2, 47,43,40)) !important; color: #fff !important;
}
article.card .bg-highlighted .btn:hover svg, article.card .bg-secondary-subtle .btn:hover svg { fill: #fff !important; }

/* 6) Inspirációs kártyák: azonos képarány */
#section_sections_5 img { aspect-ratio: 4 / 3; object-fit: cover; }

/* 7) Az „Időpontot kérek" CTA a fejlécben (auth_label nyelvi címke) – ne törjön sorba */
.v-auth-wrapper-001 > li .btn { white-space: nowrap; }
@media (max-width: 1199.98px) { .v-auth-wrapper-001 > li .btn { font-size: .85rem; padding: .4rem .8rem !important; } }

/* 8) Gyártói logó-slider: egységes logó-magasság */
#section_box_2 .swiper-slide img { max-height: 90px; object-fit: contain; }

/* 9) Lábléc alsó csík: a link a --linkcolor miatt olvashatatlan lenne a sötét háttéren */
#footer_info_line a { color: #fff !important; text-decoration: underline; }
#footer_info_line a:hover, #footer_info_line a:focus { color: var(--scolor2, #c9a877) !important; }

/* 10) Szekció-hátterek: NEM háttérkép, hanem finom átmenet a szekciók találkozásánál.
      A gradiens csak background-IMAGE, transparent véggel -> a dsc-ben állított
      szekciószín (bg_color) marad az alap, tehát átszínezhető marad. */
#section_sections_1 { background-image: linear-gradient(180deg, transparent 40%, #ffffff 100%) !important; }
#section_featured_1 { background-image: linear-gradient(180deg, #ffffff 0%, transparent 45%, transparent 60%, #ffffff 100%) !important; }
#section_sections_6 { background-image: linear-gradient(180deg, transparent 45%, rgb(var(--own-color-rgb)) 100%) !important; }
#section_sections_7 { background-image: linear-gradient(180deg, transparent 55%, var(--scolor-subtle)) !important; }
#section_sections_4 { background-image: linear-gradient(180deg, transparent 45%, #ffffff 100%) !important; }
#section_medialibrary_1 { background-image: linear-gradient(180deg, #ffffff 0%, transparent 55%) !important; }
/* Az Inspiráció, a „Fedezd fel" és a Gyártóink szándékosan TISZTA FEHÉR:
   ott a képek és a logók a főszereplők (az ügyfél kérése: a háttér ne nyomja el a burkolatokat). */

/* === szekcio-segedosztalyok (inline style kivaltas) === */
/* --- Szekcio-segedosztalyok (a korabbi inline style-ok kivaltasa) --- */
.v-measure-640{max-width:640px}
.v-measure-720{max-width:720px}
.v-measure-760{max-width:760px}
.v-tracking-wide{letter-spacing:.06em}
.v-img-caption-shade{background:linear-gradient(to top,rgba(0,0,0,.7),rgba(0,0,0,0))}
.v-photo-3x4{aspect-ratio:3/4}
/* === /szekcio-segedosztalyok === */

/* 11) Megamenü: a hosszú almenü (Gyártók, 31 elem) egy oszlopban kifutott a képernyő aljából.
   A lista flex-column + flex-wrap, ezért elég egy magassági korlát: a fölött magától
   új oszlopba tördel. Csak a 15-nél több elemű almenüre hat (has-szelektor). */
.subcategory-menu:has(li:nth-child(15)) {
    width: auto;
    max-width: 100%;
    max-height: min(600px, calc(100vh - 200px));
}
.subcategory-menu:has(li:nth-child(15)) li {
    width: 15rem;
}

/* 12) „Így segítünk neked" lépések: a lépések közötti elválasztó vonal csak asztali nézetben kell,
   ahol az öt doboz egy sorban áll. A két oszlopos, kisebb nézetben a bal szélső dobozok
   vonala a semmiben lógna. */
@media (max-width: 991.98px) {
  .v-steps-row .maker-box:nth-child(odd) .embed-text-box { border-left-width: 0 !important; }
}

/* 13) Galéria-kártyák: a képaláírás hossza ne befolyásolja a kártya magasságát.
   A kártya belseje flex-oszlop lesz, a kép megtartja a 16:9 arányt (nem zsugorodik),
   a felirat pedig fix, kétsoros magasságot kap — így minden kártya egyforma marad,
   soron belül és sorok között is. */
.v-medialib-gallery-002 .rounding { display: flex; flex-direction: column; }
.v-medialib-gallery-003 { flex: 0 0 auto; }
.v-medialib-gallery-002 .bg-secondary {
  flex: 0 0 auto;
  height: 3.5rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  -webkit-box-pack: center;
  overflow: hidden;
}
/* Mobilon a kártyák a tartalom szélességét vennék fel (a col-md-4-nek nincs kisebb
   töréspontja), ezért ott eltérő szélesek és magasak lennének — teljes szélesség kell. */
@media (max-width: 767.98px) {
  .v-medialib-gallery-002 { width: 100%; }
}

/* 14) Termék-rács: nagy nézetben 3 termék soronként (a téma alapból 4-et tesz ki xl felett),
   mobilon pedig egy, hogy a burkolat-fotó elég nagy legyen. Közte marad a sablon 2, illetve 3. */
@media (min-width: 1200px) {
  .v-common-items-006 > article.card.col-xl-3 { width: 33.333333%; }
}
@media (max-width: 575.98px) {
  .v-common-items-006 > article.card { width: 100%; }
}

/* 15) Termékkártya ára: kicsit kisebb és nem félkövér — a kártyán a fotó és a név a hangsúlyos. */
.v-item-card-005 > .font-size-18 { font-size: 1rem !important; font-weight: 400 !important; }
.v-item-card-005 > .font-size-14 { font-size: .8125rem !important; }

/* 16) Termékkártya: a művelet-gombok (kosárba, ajánlatkérés) csak a termékoldalon kellenek,
   a listakártyán nem. A kártya egésze a termékoldalra visz. */
.v-item-card-005 > .v-item-card-006 { display: none !important; }