@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;700&family=Radio+Canada:wght@400;500;700&display=swap');

/* ---------- scoped reset & tokeny (změřeno z předlohy) ---------- */
.pm-brand{
  --pm-pink:#FABBCD;
  --pm-peach:#F99D6E;
  --pm-rose:#FDF1F6;
  --pm-ink:#212529;
  --pm-grey:#333333;
  font-family:'Radio Canada',Arial,sans-serif;
  color:var(--pm-ink);
  font-size:16px;
  line-height:1.75;
  max-width:1400px;
  margin:0 auto;
  background:#fff;
  overflow:hidden;
}
.pm-brand *,.pm-brand *::before,.pm-brand *::after{box-sizing:border-box;margin:0;padding:0;}
.pm-brand img{max-width:100%;height:auto;display:block;}
.pm-brand a{text-decoration:none;color:inherit;}

/* ---------- typografie dle předlohy ---------- */
.pm-brand .pm-eyebrow{display:block;font-size:16px;font-weight:400;text-transform:uppercase;color:var(--pm-peach);margin-bottom:6px;}
.pm-brand .pm-h{font-family:'Playfair Display',Georgia,serif;font-weight:500;font-size:22px;line-height:1.35;color:var(--pm-ink);margin-bottom:14px;}
.pm-brand .pm-btn{
  display:inline-block;background:var(--pm-peach);color:#fff;border-radius:32px;
  font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.02em;
  padding:16px 40px;transition:background .25s,transform .2s;
}
.pm-brand .pm-btn::after{content:"\203A";margin-left:12px;font-size:18px;line-height:0;position:relative;top:1px;}
.pm-brand .pm-btn:hover{background:#f28a55;transform:translateY(-1px);}
.pm-brand .pm-btn-grey{background:#B8B8B8;}
.pm-brand .pm-btn-grey:hover{background:#a3a3a3;}
.pm-brand .pm-list{list-style:none;margin:0 0 22px;}
.pm-brand .pm-list li{position:relative;padding-left:26px;margin-bottom:6px;}
.pm-brand .pm-list li::before{content:"";position:absolute;left:0;top:11px;width:12px;height:12px;border-radius:50%;background:var(--pm-peach);}

/* ---------- vlnité oddělovače (tvar vlny předlohy) ---------- */
.pm-brand .pm-wave{display:block;width:100%;height:auto;margin-top:-1px;}

/* ---------- růžový hero (top-banner princessmimi-bg předlohy) ---------- */
.pm-brand .pm-hero{background:var(--pm-pink);color:#fff;position:relative;}
.pm-brand .pm-hero-inner{display:flex;align-items:flex-end;gap:20px;padding:44px 0 0 40px;}
.pm-brand .pm-hero-text{flex:0 0 46%;padding-bottom:44px;align-self:center;}
.pm-brand .pm-hero-text h1{font-family:'Playfair Display',Georgia,serif;font-weight:500;font-size:34px;color:#fff;line-height:1.25;margin-bottom:18px;}
.pm-brand .pm-hero-text p{color:#fff;margin-bottom:28px;max-width:520px;}
.pm-brand .pm-hero-btns{display:flex;flex-wrap:wrap;gap:14px;}
.pm-brand .pm-hero-img{flex:1 1 54%;position:relative;align-self:flex-end;}
/* levá hrana ilustrace rozpuštěná do plochy hera (podklad obrázku má stejný odstín) */
.pm-brand .pm-hero-img img{width:100%;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 22%);mask-image:linear-gradient(to right,transparent 0,#000 22%);}
.pm-brand .pm-hero .pm-wave{background:var(--pm-pink);}

/* ---------- novinky: karty produktů jako slider předlohy ---------- */
.pm-brand .pm-section{padding:40px 40px 56px;}
.pm-brand .pm-section-head{margin-bottom:26px;}
.pm-brand .pm-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-bottom:34px;}
.pm-brand .pm-card{background:#fff;box-shadow:0 4px 8px rgba(153,153,153,.25);padding:14px 14px 18px;position:relative;display:block;transition:transform .25s,box-shadow .25s;}
.pm-brand .pm-card:hover{transform:translateY(-3px);box-shadow:0 10px 18px rgba(153,153,153,.3);}
.pm-brand .pm-badge{position:absolute;left:14px;top:14px;background:var(--pm-peach);color:#fff;font-size:12px;font-weight:700;border-radius:800px;padding:4px 9px;line-height:1.3;z-index:1;}
.pm-brand .pm-card-img{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;margin-bottom:12px;}
.pm-brand .pm-card-img img{max-height:100%;object-fit:contain;}
.pm-brand .pm-card h3{font-family:'Radio Canada',sans-serif;font-weight:500;font-size:16px;color:var(--pm-grey);line-height:1.4;}
.pm-brand .pm-card span{font-size:13px;color:#7a8087;display:block;margin-top:2px;}
.pm-brand .pm-card .pm-badge{display:inline-block;font-size:12px;color:#fff;margin-top:0;}

/* ---------- split sekce s kolážemi ---------- */
.pm-brand .pm-split{display:flex;align-items:center;gap:40px;padding:40px 40px 56px;}
.pm-brand .pm-split-rev{flex-direction:row-reverse;}
.pm-brand .pm-split-text{flex:1 1 50%;}
.pm-brand .pm-split-text p{margin-bottom:18px;max-width:560px;}
.pm-brand .pm-split-img{flex:1 1 50%;}
.pm-brand .pm-rosebg{background:var(--pm-rose);}

/* ---------- celoplošný banner (fotografie škrábacího sešitu předlohy) ---------- */
.pm-brand .pm-banner{position:relative;width:100%;padding-top:37%;background-image:url('/shop-data/campaign/princessmimi/pm-banner.jpg');background-size:cover;background-position:center;}
.pm-brand .pm-banner-box{position:absolute;left:40px;bottom:40px;background:rgba(255,255,255,.92);padding:22px 26px;max-width:440px;}
.pm-brand .pm-banner-box .pm-h{margin-bottom:8px;}
.pm-brand .pm-banner-box p{font-size:15px;margin-bottom:14px;}
.pm-brand .pm-banner-box .pm-btn{padding:12px 28px;font-size:13px;}

/* ---------- nakupte online + značky ---------- */
.pm-brand .pm-buy{text-align:center;padding:48px 40px 56px;}
.pm-brand .pm-buy p{max-width:640px;margin:0 auto 26px;}
.pm-brand .pm-brands{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:26px;}
.pm-brand .pm-brand-tile{display:block;background:#fff;box-shadow:0 4px 8px rgba(153,153,153,.25);padding:12px;text-align:center;transition:transform .25s;}
.pm-brand .pm-brand-tile:hover{transform:translateY(-3px);}
.pm-brand .pm-brand-tile img{aspect-ratio:1/1;object-fit:cover;width:100%;}
.pm-brand .pm-brand-tile h3{font-family:'Radio Canada',sans-serif;font-weight:500;font-size:16px;color:var(--pm-grey);margin-top:10px;}
/* dlaždice Dino World: zelený podklad značky + T-Rex z oficiální koláže (soubor v balíčku) */
.pm-brand .pm-tile-dino{display:flex;align-items:flex-end;justify-content:center;width:100%;aspect-ratio:1/1;background:#65BA80;overflow:hidden;padding:6% 8% 0;}
.pm-brand .pm-tile-dino img{aspect-ratio:auto;object-fit:contain;object-position:bottom;width:100%;height:100%;}

/* ---------- responzivita ---------- */
@media (max-width:900px){
  .pm-brand .pm-hero-inner{flex-direction:column;padding:36px 28px 0;}
  .pm-brand .pm-hero-img img{-webkit-mask-image:none;mask-image:none;}
  .pm-brand .pm-hero-text{flex:0 0 auto;padding-bottom:26px;}
  .pm-brand .pm-hero-img{width:100%;}
  .pm-brand .pm-cards,.pm-brand .pm-brands{grid-template-columns:repeat(2,1fr);}
  .pm-brand .pm-split,.pm-brand .pm-split-rev{flex-direction:column;padding:36px 28px 48px;}
  .pm-brand .pm-section,.pm-brand .pm-buy{padding:32px 28px 44px;}
  .pm-brand .pm-banner{padding-top:56%;}
  .pm-brand .pm-banner-box{left:20px;right:20px;bottom:20px;max-width:none;}
}
@media (max-width:520px){
  .pm-brand .pm-cards,.pm-brand .pm-brands{grid-template-columns:1fr;}
  .pm-brand .pm-hero-text h1{font-size:28px;}
  .pm-brand .pm-banner{padding-top:0;background:none;}
  .pm-brand .pm-banner-box{position:static;background:var(--pm-rose);}
}

/* ---------- guardy šablony Upgates (stejné jako u ostatních brand pages) ---------- */
/* Šablona kategorie vykresluje nad obsahem vlastní H1 s názvem stránky; hero má svůj
   vlastní titulek, takže duplicitní nadpis skryjeme. */
body:has(.pm-brand-wrapper) h1.ph-main,
body:has(.pm-brand-wrapper) h1.ph-page { display: none; }
/* Obsahový sloupec šablony je omezený na 640 px, brand page potřebuje plnou šířku. */
.max-w-xl:has(.pm-brand-wrapper) { max-width: none; }
/* Nadpisy: šablona tlačí vlastní font a u diakritiky pak padá na tučný fallback
   (řešeno u Tesly). Vynutíme Playfair Display i pro nadpisy uvnitř brand page. */
.pm-brand :where(h1, h2, h3, h4, h5, h6) { font-family: 'Playfair Display', Georgia, serif; }


/* ---------- spodní hrana vln (naměřeno u Ylvi, tentýž tvar) ---------- */
.pm-brand .pm-wave{margin-bottom:-1px;}
.pm-brand .pm-hero .pm-wave{background:linear-gradient(to bottom,var(--pm-pink) 0 75%,#fff 75%);}
.pm-brand .pm-rosebg > .pm-wave{background:linear-gradient(to bottom,#fff 0 75%,var(--pm-rose) 75%);}