/* =====================================================================
   PÖTTYÖSLABDA.HU – egyedi megjelenés
   GeneratePress gyerektéma › pottyoslabda.css
   ---------------------------------------------------------------------
   Készült a "Fuel" minta alapján, magazin-főoldalra hangolva.
   Builder: GenerateBlocks (Pro – Query Loop) ajánlott. A class-ek a
   GenerateBlocks blokkok "Speciális › További CSS-osztályok" mezőjébe
   kerülnek (Elemente: lásd az egyes szekcióknál a // BLOKK megjegyzést).
   Tiszta front-page.php sablonnál ugyanezek a class-ek használhatók.

   BEKÖTÉS (a gyerektéma functions.php-jában):
   -------------------------------------------------------------------
   add_action( 'wp_enqueue_scripts', function () {
       // Outfit betűtípus
       wp_enqueue_style( 'pl-outfit',
           'https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap',
           array(), null );
       // Egyedi stílus (a GeneratePress után töltődjön)
       wp_enqueue_style( 'pl-style',
           get_stylesheet_directory_uri() . '/pottyoslabda.css',
           array( 'generate-style' ), wp_get_theme()->get( 'Version' ) );
   }, 20 );
   -------------------------------------------------------------------

   TARTALOM
   0.  Design tokenek (változók)
   1.  Tipográfia / globális alapok
   2.  Újrahasznosítható elemek (gomb, címke, "tovább" link, szekciófej)
   3.  Cikk-kártya alapok
   4.  Hírsáv (top bar)
   5.  Fejléc / menü
   6.  Hero
   7.  Kategória-szekciók
        a) Kamaszok – aszimmetrikus
        b) Anyának lenni – spotlight
        c) Digitális világ – 3 oszlop
        d) Életmód – 1 nagy + számozott lista
        e) Stílus – lookbook rács
        f) Tesztek & Ajánlók – kártyák értékeléssel
        g) Rólam – bemutatkozás
   8.  Hírlevél
   9.  Együttműködés CTA
   10. Lábléc
   11. Reszponzív
   ===================================================================== */


/* ======================= 0. DESIGN TOKENEK ======================= */
:root{
  /* Paletta */
  --sage:  #D4E4DE;   /* zsálya zöld pasztell – kiemelő dobozok */
  --rose:  #E9D6D6;   /* púder rózsaszín pasztell – kiemelő dobozok */
  --gray:  #E5E5E5;   /* világosszürke – semleges */
  --mauve: #995E65;   /* fő márka-sötét (mályva) – gombok, címsorok */
  --olive: #5C7457;   /* akcent – dusty olive (CTA, pöttyök, kiemelés) */

  --cream: #FBF7F4;   /* meleg törtfehér oldalháttér */
  --white: #FFFFFF;
  --ink:   #2C2724;   /* szövegszín */
  --muted: #8A807C;   /* halvány szöveg */
  --line:  #ECE5E1;   /* finom elválasztó */

  --radius:    26px;  /* nagy lekerekítés (dobozok) */
  --radius-sm: 16px;
  --radius-band: 40px;/* full-width pasztell sávok */
  --shadow:    0 18px 40px -22px rgba(72,40,44,.35);
  --shadow-sm: 0 10px 24px -18px rgba(72,40,44,.40);
  --pl-maxw:   1180px; /* tartalom max szélesség (GP Customizer is állítható) */
  --gap:       28px;
}


/* ======================= 1. TIPOGRÁFIA / GLOBÁLIS ======================= */
/* Tipp: a betűtípust a GP Customizer › Typography alatt is beállíthatod
   Outfit-ra; az alábbi szabályok biztosítják, hogy mindenképp érvényesüljön. */
body,
button, input, select, textarea,
.wp-block-button__link{
  font-family:'Outfit', system-ui, -apple-system, sans-serif;
}
body{
  background:var(--cream);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6{
  font-family:'Outfit', system-ui, sans-serif;
  line-height:1.15;
  letter-spacing:-.01em;
  color:var(--ink);
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; height:auto; }

/* Belső tartalom-szélesség (GenerateBlocks Container "inner" / GP grid). */
.pl-container{ max-width:var(--pl-maxw); margin-inline:auto; padding-inline:24px; }


/* ======================= 2. ÚJRAHASZNOSÍTHATÓ ELEMEK ======================= */

/* --- Gombok --- (GB Button blokk + osztály, vagy .wp-block-button) */
.pl-btn{
  display:inline-flex; align-items:center; gap:.5em;
  font-weight:600; font-size:.95rem;
  padding:.7em 1.5em; border-radius:999px;
  border:1.5px solid transparent; cursor:pointer;
  transition:.2s ease; text-decoration:none;
}
.pl-btn--primary{ background:var(--mauve); color:#fff; }
.pl-btn--primary:hover{ background:#7E4C52; color:#fff; }
.pl-btn--accent{ background:var(--olive); color:#fff; }
.pl-btn--accent:hover{ filter:brightness(.95); color:#fff; }
.pl-btn--outline{ background:transparent; border-color:var(--mauve); color:var(--mauve); }
.pl-btn--outline:hover{ background:var(--mauve); color:#fff; }
.pl-btn--ghost{ background:#fff; color:var(--mauve); border-color:var(--line); }
.pl-btn--ghost:hover{ border-color:var(--mauve); }

/* --- "Tovább a … oldalra" link a szekciófejlécben --- */
.pl-more{
  display:inline-flex; align-items:center; gap:.4em;
  font-weight:600; color:var(--mauve); font-size:.95rem; white-space:nowrap;
}
.pl-more .arrow{ transition:transform .2s ease; }
.pl-more:hover .arrow{ transform:translateX(4px); }

/* --- Kategória-címke (pöttyös akcenttel) --- */
.pl-tag{
  display:inline-flex; align-items:center; gap:.45em;
  font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:.4em .85em; border-radius:999px; color:var(--mauve);
  background:var(--sage);
}
.pl-tag::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--olive); }
.pl-tag--rose{ background:var(--rose); }
.pl-tag--gray{ background:var(--gray); }
.pl-tag--olive{ background:#E2E9DC; }

/* --- Szekció keret + fejléc --- */
.pl-section{ padding-block:64px; }
.pl-sec-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:20px; margin-bottom:32px;
}
.pl-eyebrow{
  font-size:.75rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--olive); display:flex; align-items:center; gap:.5em; margin-bottom:10px;
}
.pl-eyebrow::before{ content:"• • •"; letter-spacing:.1em; color:var(--olive); }
.pl-sec-head h2{ font-size:clamp(1.7rem, 1.2rem + 2vw, 2.5rem); }
.pl-sec-head h2 em{ font-style:normal; color:var(--mauve); }

/* --- Full-width pasztell sávok --- (GB Container "teljes szélesség" + osztály) */
.pl-band{ border-radius:var(--radius-band); margin-inline:16px; }
.pl-bg-sage{ background:var(--sage); }
.pl-bg-rose{ background:var(--rose); }
.pl-bg-gray{ background:var(--gray); }


/* ======================= 3. CIKK-KÁRTYA ALAP ======================= */
/* GenerateBlocks: Query Loop › Loop Item Container kapja a .pl-card osztályt. */
.pl-card{
  background:var(--white); border-radius:var(--radius-sm); overflow:hidden;
  box-shadow:var(--shadow-sm); transition:transform .25s ease, box-shadow .25s ease;
  display:flex; flex-direction:column; height:100%;
}
.pl-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow); }
.pl-card__thumb{ aspect-ratio:3/2; overflow:hidden; background:var(--gray); }
.pl-card__thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.pl-card:hover .pl-card__thumb img{ transform:scale(1.05); }
.pl-card__body{ padding:18px 20px 22px; display:flex; flex-direction:column; gap:10px; flex:1; }
.pl-card__body h3{ font-size:1.12rem; font-weight:600; }
.pl-card__meta{ margin-top:auto; font-size:.82rem; color:var(--muted); display:flex; gap:8px; align-items:center; }

/* Fekvő kártya (kép balra, szöveg jobbra) */
.pl-card--horizontal{ flex-direction:row; }
.pl-card--horizontal .pl-card__thumb{ aspect-ratio:auto; width:42%; flex-shrink:0; }
.pl-card--horizontal .pl-card__body{ justify-content:center; }


/* ======================= 4. HÍRSÁV ======================= */
/* BLOKK: GP "Header" fölé egy GenerateBlocks Container (teljes szélesség). */
.pl-topbar{ background:var(--mauve); color:#fff; font-size:.82rem; }
.pl-topbar .pl-container{ display:flex; align-items:center; justify-content:space-between; min-height:38px; }
.pl-topbar__tagline{ display:flex; align-items:center; gap:.5em; letter-spacing:.03em; }
.pl-topbar__socials{ display:flex; gap:16px; font-weight:500; }
.pl-topbar a:hover{ color:var(--olive); }


/* ======================= 5. FEJLÉC / MENÜ ======================= */
/* Megvalósítható GP natív headerével (akkor a .main-navigation szelektorokat
   használd), vagy GenerateBlocks-szal felépített egyedi headerrel (.pl-* class-ek). */
.pl-header{
  position:sticky; top:0; z-index:50;
  background:rgba(251,247,244,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.pl-header .pl-container{ display:flex; align-items:center; gap:24px; min-height:84px; }
.pl-logo{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
.pl-logo img{ width:58px; height:58px; }
.pl-logo__mark{ display:flex; flex-direction:column; line-height:1.05; }
.pl-logo__mark b{ font-size:1.15rem; color:var(--mauve); letter-spacing:.01em; }
.pl-logo__mark span{ font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }

.pl-nav{ margin-left:auto; }
.pl-nav ul{ list-style:none; display:flex; align-items:center; gap:6px; margin:0; padding:0; }
.pl-nav a{
  display:block; padding:.55em .8em; border-radius:999px;
  font-weight:500; font-size:.95rem; color:var(--ink); transition:.18s ease;
}
.pl-nav a:hover{ background:var(--sage); color:var(--mauve); }
/* Menü CTA: "Együttműködés" */
.pl-nav .pl-nav__cta a{ background:var(--olive); color:#fff; font-weight:600; padding:.6em 1.25em; }
.pl-nav .pl-nav__cta a:hover{ background:var(--mauve); }

/* --- GP NATÍV menü megfeleltetés (ha nem GenerateBlocks headert használsz) ---
   A GeneratePress elsődleges menüjét így stílusozhatod ugyanígy: */
.main-navigation .main-nav > ul > li > a{ border-radius:999px; font-weight:500; }
.main-navigation .main-nav > ul > li > a:hover,
.main-navigation .main-nav > ul > li.current-menu-item > a{
  background:var(--sage); color:var(--mauve);
}
/* A CTA menüpontnak adj a WP menüben "menu-item-cta" CSS-osztályt: */
.main-navigation .main-nav > ul > li.menu-item-cta > a{
  background:var(--olive); color:#fff; border-radius:999px;
}
.main-navigation .main-nav > ul > li.menu-item-cta > a:hover{ background:var(--mauve); }

.pl-nav-toggle{
  display:none; background:none; border:0; cursor:pointer;
  flex-direction:column; gap:5px; padding:8px; margin-left:auto;
}
.pl-nav-toggle span{ width:24px; height:2px; background:var(--ink); border-radius:2px; transition:.2s; }


/* ======================= 6. HERO ======================= */
.pl-hero{ padding:48px 0 24px; }
.pl-hero__intro{ text-align:center; max-width:760px; margin:0 auto 40px; }
.pl-hero__intro .pl-eyebrow{ justify-content:center; color:var(--olive); }
.pl-hero__intro .pl-eyebrow::before{ content:none; }
.pl-hero__intro h1{ font-size:clamp(2rem, 1.3rem + 3.4vw, 3.4rem); }
.pl-hero__intro h1 em{ font-style:normal; color:var(--mauve); }
.pl-hero__intro p{ margin-top:18px; color:var(--muted); font-size:1.08rem; }

.pl-hero__grid{ display:grid; grid-template-columns:1.55fr 1fr; gap:var(--gap); }

/* Nagy vezércikk (kép + sötét overlay + szöveg) */
.pl-feature{
  position:relative; border-radius:var(--radius); overflow:hidden; min-height:460px;
  display:flex; align-items:flex-end; color:#fff; box-shadow:var(--shadow);
}
.pl-feature img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.pl-feature::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(54,30,33,.85) 0%, rgba(54,30,33,.15) 55%, transparent 100%);
}
.pl-feature__body{ position:relative; z-index:2; padding:34px; }
.pl-feature__body h2{ font-size:clamp(1.5rem, 1rem + 2vw, 2.1rem); margin:14px 0 10px; max-width:18ch; color:#fff; }
.pl-feature__body p{ opacity:.9; max-width:46ch; }
.pl-feature .pl-tag{ color:var(--mauve); }

/* Oldalsó "Legfrissebb" lista */
.pl-latest{ background:var(--sage); border-radius:var(--radius); padding:26px 26px 14px; display:flex; flex-direction:column; }
.pl-latest h3{ font-size:1rem; text-transform:uppercase; letter-spacing:.1em; color:var(--mauve); margin-bottom:8px; }
.pl-latest ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.pl-latest li{ display:flex; gap:14px; padding:16px 0; border-bottom:1px solid rgba(153,94,101,.18); }
.pl-latest li:last-child{ border-bottom:0; }
.pl-latest li img{ width:78px; height:78px; border-radius:12px; object-fit:cover; flex-shrink:0; }
.pl-latest__t{ font-size:.95rem; font-weight:600; line-height:1.3; }
.pl-latest__c{ font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--mauve); opacity:.75; }


/* ======================= 7. KATEGÓRIA-SZEKCIÓK ======================= */

/* --- 7/a. KAMASZOK – aszimmetrikus (1 nagy + 2 fekvő) --- */
.pl-kamasz-grid{ display:grid; grid-template-columns:1.4fr 1fr; gap:var(--gap); }
.pl-kamasz-side{ display:flex; flex-direction:column; gap:var(--gap); }

/* --- 7/b. ANYÁNAK LENNI – spotlight (szöveg + mini lista) --- */
.pl-spotlight{ display:grid; grid-template-columns:1fr 1.05fr; gap:var(--gap); align-items:center; }
.pl-spotlight__text{ padding:8px 20px 8px 0; }
.pl-spotlight__text h2{ font-size:clamp(1.8rem, 1.2rem + 2.4vw, 2.7rem); margin:16px 0; }
.pl-spotlight__text h2 em{ font-style:italic; color:var(--mauve); font-weight:600; }
.pl-spotlight__text p{ color:#6C5F5B; }
.pl-spotlight__text .pl-btn{ margin-top:22px; }
.pl-spotlight__list{ display:flex; flex-direction:column; gap:14px; }
.pl-mini{ display:flex; gap:16px; align-items:center; background:#fff; border-radius:var(--radius-sm); padding:12px; box-shadow:var(--shadow-sm); transition:.2s; }
.pl-mini:hover{ transform:translateX(5px); }
.pl-mini img{ width:96px; height:80px; border-radius:12px; object-fit:cover; flex-shrink:0; }
.pl-mini h3{ font-size:1.02rem; font-weight:600; margin-bottom:4px; }
.pl-mini .pl-card__meta{ font-size:.78rem; }

/* --- 7/c. DIGITÁLIS VILÁG – 3 oszlop --- */
.pl-grid-3{ display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--gap); }

/* --- 7/d. ÉLETMÓD – 1 nagy + számozott lista --- */
.pl-eletmod-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:var(--gap); }
.pl-eletmod-list{ display:flex; flex-direction:column; gap:18px; justify-content:space-between; }
.pl-list-item{ display:flex; gap:18px; padding-bottom:18px; border-bottom:1px solid var(--line); }
.pl-list-item:last-child{ border-bottom:0; padding-bottom:0; }
.pl-list-item__num{ font-size:1.6rem; font-weight:800; color:var(--olive); line-height:1; min-width:1.4em; }
.pl-list-item h3{ font-size:1.1rem; font-weight:600; }
.pl-list-item .pl-card__meta{ margin-top:6px; font-size:.8rem; }

/* --- 7/e. STÍLUS – lookbook mozaik --- */
.pl-lookbook{ display:grid; grid-template-columns:repeat(4, 1fr); grid-auto-rows:200px; gap:18px; }
.pl-look{ position:relative; border-radius:var(--radius-sm); overflow:hidden; box-shadow:var(--shadow-sm); }
.pl-look img{ width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.pl-look:hover img{ transform:scale(1.06); }
.pl-look::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(54,30,33,.7), transparent 60%); }
.pl-look__cap{ position:absolute; left:16px; right:16px; bottom:14px; z-index:2; color:#fff; font-weight:600; font-size:1rem; }
.pl-look--big{ grid-column:span 2; grid-row:span 2; }
.pl-look--wide{ grid-column:span 2; }

/* --- 7/f. TESZTEK & AJÁNLÓK – kártyák értékeléssel --- */
.pl-test{ position:relative; }
.pl-test__badge{
  position:absolute; top:12px; left:12px; z-index:3;
  background:var(--olive); color:#fff; font-size:.7rem; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; padding:.4em .8em; border-radius:999px;
}
.pl-stars{ color:var(--olive); font-size:.95rem; letter-spacing:1px; }
.pl-stars .empty{ color:var(--gray); }

/* --- 7/g. RÓLAM – bemutatkozás --- */
.pl-rolam{ background:var(--rose); border-radius:var(--radius-band); margin-inline:16px; overflow:hidden; }
.pl-rolam__inner{ display:grid; grid-template-columns:.85fr 1.15fr; gap:48px; align-items:center; padding:8px; }
.pl-rolam__photo{ position:relative; padding:40px 0 40px 40px; }
.pl-rolam__circle{ aspect-ratio:1; border-radius:50%; overflow:hidden; border:10px solid #fff; box-shadow:var(--shadow); max-width:340px; }
.pl-rolam__circle img{ width:100%; height:100%; object-fit:cover; }
.pl-rolam__dot{ position:absolute; width:26px; height:26px; border-radius:50%; background:var(--olive); }
.pl-rolam__dot--1{ top:30px; right:24px; }
.pl-rolam__dot--2{ bottom:60px; left:18px; background:var(--mauve); }
.pl-rolam__text{ padding:40px 48px 40px 0; }
.pl-rolam__text h2{ font-size:clamp(1.8rem, 1.2rem + 2.4vw, 2.6rem); color:var(--mauve); margin:14px 0; }
.pl-rolam__text p{ color:#6C5F5B; margin-bottom:14px; }
.pl-rolam__sign{ font-style:italic; font-weight:600; color:var(--mauve); font-size:1.3rem; margin:18px 0 24px; }


/* ======================= 8. HÍRLEVÉL ======================= */
.pl-newsletter{
  background:var(--mauve); border-radius:var(--radius-band); margin-inline:16px;
  color:#fff; position:relative; overflow:hidden;
}
.pl-newsletter::before, .pl-newsletter::after{ content:""; position:absolute; border-radius:50%; background:rgba(255,255,255,.07); }
.pl-newsletter::before{ width:260px; height:260px; top:-90px; right:-60px; }
.pl-newsletter::after{ width:180px; height:180px; bottom:-80px; left:30px; background:rgba(92,116,87,.30); }
.pl-newsletter__inner{ position:relative; z-index:2; text-align:center; padding:64px 24px; max-width:680px; margin:0 auto; }
.pl-newsletter .pl-eyebrow{ justify-content:center; color:var(--olive); }
.pl-newsletter .pl-eyebrow::before{ content:none; }
.pl-newsletter h2{ font-size:clamp(1.8rem, 1.2rem + 2.6vw, 2.8rem); font-weight:300; color:#fff; }
.pl-newsletter h2 strong{ font-weight:700; }
.pl-newsletter p{ opacity:.85; margin:14px 0 28px; }
.pl-subscribe{ display:flex; gap:10px; max-width:480px; margin:0 auto; background:#fff; padding:7px; border-radius:999px; }
.pl-subscribe input{ flex:1; border:0; background:transparent; padding:0 18px; font:inherit; color:var(--ink); outline:none; }


/* ======================= 9. EGYÜTTMŰKÖDÉS CTA ======================= */
.pl-collab{
  display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); align-items:center;
  background:var(--sage); border-radius:var(--radius-band); margin-inline:16px; overflow:hidden;
}
.pl-collab__img{ min-height:340px; background:var(--gray); }
.pl-collab__img img{ width:100%; height:100%; object-fit:cover; }
.pl-collab__text{ padding:48px; }
.pl-collab__text h2{ font-size:clamp(1.7rem, 1.2rem + 2vw, 2.4rem); color:var(--mauve); margin:14px 0; }
.pl-collab__text p{ color:#5D514D; margin-bottom:24px; }


/* ======================= 10. LÁBLÉC ======================= */
/* BLOKK: GP "Footer" elem vagy GenerateBlocks Container. */
.pl-footer{ background:#3A2A2D; color:#E9DCDC; margin-top:80px; padding:64px 0 28px; }
.pl-footer__grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; }
.pl-footer__brand .pl-logo__mark b{ color:#fff; }
.pl-footer__brand .pl-logo__mark span{ color:#B9A6A6; }
.pl-footer__brand p{ margin-top:18px; color:#C9B8B8; font-size:.95rem; max-width:34ch; }
.pl-footer__socials{ display:flex; gap:14px; margin-top:20px; }
.pl-footer__socials a{ width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.1); display:grid; place-items:center; transition:.2s; }
.pl-footer__socials a:hover{ background:var(--olive); }
.pl-footer__col h4{ font-size:.85rem; letter-spacing:.1em; text-transform:uppercase; color:#fff; margin-bottom:16px; }
.pl-footer__col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.pl-footer__col a{ color:#C9B8B8; font-size:.95rem; }
.pl-footer__col a:hover{ color:var(--olive); }
.pl-footer__bottom{
  border-top:1px solid rgba(255,255,255,.12); margin-top:48px; padding-top:24px;
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  color:#B9A6A6; font-size:.85rem;
}


/* ======================= 11. RESZPONZÍV ======================= */
@media (max-width:980px){
  .pl-hero__grid,
  .pl-kamasz-grid,
  .pl-spotlight,
  .pl-eletmod-grid,
  .pl-collab,
  .pl-rolam__inner{ grid-template-columns:1fr; }
  .pl-grid-3{ grid-template-columns:repeat(2, 1fr); }
  .pl-lookbook{ grid-template-columns:repeat(2, 1fr); grid-auto-rows:180px; }
  .pl-rolam__photo{ padding:36px 36px 0; }
  .pl-rolam__text{ padding:24px 36px 40px; }
  .pl-collab__img{ min-height:240px; }
}

@media (max-width:760px){
  /* Mobil menü (egyedi GenerateBlocks header esetén) */
  .pl-nav{
    position:fixed; inset:84px 0 auto 0; background:var(--cream);
    border-bottom:1px solid var(--line); transform:translateY(-130%);
    transition:.3s; margin:0; padding:16px 24px 24px; box-shadow:var(--shadow);
  }
  .pl-nav.is-open{ transform:translateY(0); }
  .pl-nav ul{ flex-direction:column; align-items:stretch; gap:4px; }
  .pl-nav a{ padding:.8em 1em; }
  .pl-nav .pl-nav__cta a{ text-align:center; margin-top:8px; }
  .pl-nav-toggle{ display:flex; }

  .pl-topbar__tagline span{ display:none; }
  .pl-grid-3{ grid-template-columns:1fr; }
  .pl-lookbook{ grid-template-columns:repeat(2, 1fr); }
  .pl-look--big{ grid-column:span 2; grid-row:span 1; }
  .pl-card--horizontal{ flex-direction:column; }
  .pl-card--horizontal .pl-card__thumb{ width:100%; aspect-ratio:3/2; }
  .pl-footer__grid{ grid-template-columns:1fr 1fr; }
  .pl-footer__brand{ grid-column:1 / -1; }
  .pl-section{ padding-block:48px; }
  .pl-band, .pl-rolam, .pl-newsletter, .pl-collab{ margin-inline:8px; border-radius:28px; }
}

@media (max-width:480px){
  .pl-footer__grid{ grid-template-columns:1fr; }
  .pl-lookbook{ grid-template-columns:1fr; grid-auto-rows:200px; }
  .pl-look--big, .pl-look--wide{ grid-column:span 1; }
  .pl-subscribe{ flex-direction:column; border-radius:24px; }
  .pl-subscribe .pl-btn{ justify-content:center; }
}
/* ====== Natív GeneratePress fejléc – a minta szerint ====== */

/* Logó melletti szöveg = wordmark (mályva cím + halvány, ritkított alcím) */
.site-header .main-title{ font-size:1.15rem; line-height:1.15; }
.site-header .main-title a{ color:var(--mauve); font-weight:700; }
.site-header .site-description{
  color:var(--muted); font-size:.68rem; letter-spacing:.18em;
  text-transform:uppercase; margin-top:3px;
}

/* A menü egy sorban, függőlegesen középen, ne törjön át */
.main-navigation .main-nav > ul{ flex-wrap:nowrap; align-items:center; }

/* Együttműködés CTA: kompakt olive pirula, középre igazítva */
.main-navigation .main-nav > ul > li.menu-item-cta{
  display:flex; align-items:center; margin-left:.5em;
}
.main-navigation .main-nav > ul > li.menu-item-cta > a{
  background:var(--olive); color:#fff; border-radius:999px;
  line-height:1.2; padding:.55em 1.3em;
}
.main-navigation .main-nav > ul > li.menu-item-cta > a:hover{
  background:var(--mauve); color:#fff;
}