/* =========================================================
   SHOWA ARCHÍVUM FEJLÉC — a bolt SHOWA kategóriaoldalainak fejléce.

   Használja: ../../../inc/showa-archive-header.php (a woocommerce-archive.php
   fejléce helyett fut a SHOWA lapokon).

   A styles.css TETEJÉRE jön, nem helyette: a rácsot, a Montserratot, a
   .title / .body-copy tipográfiát, a .btn gombokat és a .blf-showa reseteket
   az adja, itt csak a fejléc geometriája van. Ezért is elég a fejlécnek a
   .blf-showa burkoló — minden más SHOWA szabály attól kap hatókört.

   AZ EREDETI (showagroup.com, .about.flipped-content.about-product-category)
   a képet abszolút pozícióval lógatja ki a konténerből, és a szöveg-oszlopot
   teszi a markupban másodikra. Itt egyszerű kétoszlopos rács van, a szöveg
   elöl: a bolt konténerének (1280px) nincs kilógó sávja, amibe a kép beérne,
   a h1 pedig így a forrás elejére kerül. A látvány ugyanaz — szöveg balra,
   bal oldalán oválisra vágott fotó jobbra, alattuk a „Tovább olvasom” sor.
   ========================================================= */

.blf-showa-archhead{
  position:relative;
  /* A .blf-archive__top halvány színátmenete alatta marad; a .blf-showa
     fehér háttere különben letakarná. */
  background:transparent;
  padding:12px 0 18px;
}

/* A SHOWA tenyérjel a lap bal szélén. Az eredetiben a konténeren kívül ül,
   ezért itt is kilóg — de csak akkora képernyőn, ahol a 1280px-es konténer
   mellett elfér, különben vízszintes görgetést csinálna. */
.blf-showa-archhead .hand-symbol{position:absolute; top:16px; left:-104px; z-index:1}
.blf-showa-archhead .hand-symbol img{width:95px; height:auto}
@media (max-width:1500px){ .blf-showa-archhead .hand-symbol{display:none} }

.blf-showa-archhead__row{display:grid; grid-template-columns:minmax(0,1fr); gap:30px; align-items:center}
@media (min-width:991px){
  .blf-showa-archhead--media .blf-showa-archhead__row{grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:44px}
}

/* ---------------------------------------------------------
   Szöveges hasáb
   --------------------------------------------------------- */
.blf-showa-archhead__copy{position:relative; z-index:2}

.blf-showa-archhead__eyebrow{
  margin:0 0 14px; font-weight:700; font-size:13px; line-height:16px;
  letter-spacing:.09em; text-transform:uppercase; color:#8fc547;
}

.blf-showa-archhead .title h1{
  font-weight:900; font-size:42px; line-height:44px;
  text-transform:uppercase; color:#212020; margin:0 0 25px;
}
@media (max-width:1200px){ .blf-showa-archhead .title h1{font-size:32px; line-height:34px} }
@media (max-width:720px){ .blf-showa-archhead .title h1{font-size:26px; line-height:30px; margin-bottom:20px} }

.blf-showa-archhead .body-copy-sm p{font-size:16px; line-height:24px; color:#212020; margin:0 0 20px}
.blf-showa-archhead .body-copy-sm p:last-child{margin-bottom:0}
.blf-showa-archhead .body-copy-sm a{font-weight:700; text-decoration:underline}
.blf-showa-archhead .body-copy-sm ul{margin:0 0 20px}
.blf-showa-archhead .body-copy-sm ul li{padding-left:20px; position:relative}
.blf-showa-archhead .body-copy-sm ul li + li{margin-top:10px}
.blf-showa-archhead .body-copy-sm ul li:before{
  position:absolute; content:""; width:4px; height:4px; left:0; top:10px;
  background-color:#212020; border-radius:50%;
}

.blf-showa-archhead .cta-wrap{margin-top:28px}

/* ---------------------------------------------------------
   „Tovább olvasom” — az eredeti READ MORE sorának a látványa, de
   horgony: a lap alján lévő hosszú leíráshoz (#blf-cat-longdesc) ugrik,
   ahogy a bolt minden más kategóriaoldalán.
   --------------------------------------------------------- */
.blf-showa-archhead .read-more-collapse-wrap{margin-top:32px}
.blf-showa-archhead .read-more-collapse{
  position:relative; display:flex; align-items:center; justify-content:flex-end; gap:10px;
  padding-top:15px; font-weight:700; font-size:14px; line-height:29.6px;
  color:#818282; text-transform:uppercase;
}
.blf-showa-archhead .read-more-collapse:before{
  position:absolute; content:""; left:0; top:0; width:100%; height:1px; background-color:#818282;
}
.blf-showa-archhead .read-more-collapse:hover{color:#8fc547}
.blf-showa-archhead .read-more-collapse .icon{display:inline-flex}
.blf-showa-archhead .read-more-collapse .icon svg{width:16px; height:16px; display:block}

/* ---------------------------------------------------------
   Kép — az ovális az eredeti 240px-es bal oldali lekerekítése.

   KÉT KEZELÉS, a kép arányából (a PHP dönt, ott van a melléklet mérete):

   .is-photo  — fekvő fotó: kitölti az oválist, ahogy az eredeti oldalon.
   .is-cutout — négyzetes/álló termékfotó: hiánytalanul benne áll (contain)
                egy világosszürke ovális lapon. A kategóriaképek fehér
                hátterű kivágások, amiket a mix-blend-mode:multiply olvaszt
                bele a lapba — a fehér így eltűnik, a termék marad, az
                ovális formája pedig végre látszik is. Belenagyítva
                (cover) ezekről az ujjak teteje és a mandzsetta alja
                lemaradna, ezért nem az.
   --------------------------------------------------------- */
.blf-showa-archhead__media .img-wrap{
  position:relative; border-radius:120px 0 0 120px; overflow:hidden;
  /* Fele akkora, mint az eredeti showagroup.com-os sáv (300–500px): a fejléc
     magasságát ez a hasáb szabja meg, a szöveg mellette középre igazodik. Az
     ovális sugara és a kivágás belső margója vele együtt feleződik, különben
     a 240px-es ív egy 250px magas dobozban félkörré lapulna. */
  height:clamp(150px, 16vw, 250px);
}
.blf-showa-archhead__media .img-wrap img{width:100%; height:100%; display:block}

.blf-showa-archhead__media.is-photo .img-wrap img{object-fit:cover}

.blf-showa-archhead__media.is-cutout .img-wrap{background-color:#ebebeb}
.blf-showa-archhead__media.is-cutout .img-wrap img{
  object-fit:contain; mix-blend-mode:multiply;
  /* Bal oldalt több levegő: ott ível be a 120px-es ovális. */
  padding:11px 12px 11px 37px;
}

@media (max-width:990px){
  .blf-showa-archhead__media .img-wrap{border-radius:90px 0 0 90px; height:150px}
  .blf-showa-archhead__media.is-cutout .img-wrap img{padding:9px 9px 9px 28px}
}
@media (max-width:720px){
  .blf-showa-archhead{padding:10px 0 14px}
  .blf-showa-archhead__media .img-wrap{border-radius:65px 0 0 65px; height:130px}
  .blf-showa-archhead__media.is-cutout .img-wrap img{padding:8px 7px 8px 20px}
}