@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/* G3 Ferrari brand page (varianta Claude) — scope .g3f-brand. Zdroj:
   raw/brand-handoff/g3ferrari/, CSS vyjmuto z <style> generátorem
   scripts/build_g3ferrari_claude_page.py. Font Poppins, červená #c8102e. */
/* ---------- scoped reset & tokeny ---------- */
.g3f-brand{
  --g3-red:#D51C00;
  --g3-dark:#252525;
  --g3-text:#333;
  --g3-grey:#C6C6C6;
  --g3-light:#F5F5F5;
  font-family:'Poppins',-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  color:var(--g3-text);
  line-height:1.6;
  max-width:1400px;
  margin:0 auto;
  background:#fff;
}
.g3f-brand *,.g3f-brand *::before,.g3f-brand *::after{box-sizing:border-box;margin:0;padding:0;}
.g3f-brand img{max-width:100%;height:auto;display:block;}
.g3f-brand a{text-decoration:none;color:inherit;}
.g3f-brand h1,.g3f-brand h2,.g3f-brand h3{font-weight:500;color:var(--g3-dark);}

/* ---------- hlavička značky ---------- */
.g3f-brand .g3-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 28px;flex-wrap:wrap;gap:14px;
}
.g3f-brand .g3-logo{width:170px;height:auto;}
.g3f-brand .g3-claim{font-size:16px;font-weight:600;color:var(--g3-red);letter-spacing:.5px;}
.g3f-brand .g3-header-note{font-size:13px;color:#999;letter-spacing:.5px;}

/* ---------- hero KRISPY (tmavá sekce, česká CSS kompozice) ---------- */
.g3f-brand .g3-hero{
  display:flex;align-items:center;gap:4%;
  background:#1B1B1B;color:#fff;padding:56px 48px;
}
.g3f-brand .g3-hero-text{flex:1 1 52%;}
.g3f-brand .g3-hero-eyebrow{
  font-size:14px;letter-spacing:3px;font-weight:600;color:#fff;
  text-transform:uppercase;margin-bottom:14px;
}
.g3f-brand .g3-hero-eyebrow span{color:var(--g3-red);}
.g3f-brand .g3-hero h1{
  font-size:72px;font-weight:700;color:var(--g3-red);
  letter-spacing:4px;line-height:1.05;margin-bottom:22px;text-transform:uppercase;
}
.g3f-brand .g3-hero p{font-size:16px;font-weight:300;color:#ddd;margin-bottom:14px;max-width:560px;}
.g3f-brand .g3-hero p strong{color:#fff;font-weight:600;}
.g3f-brand .g3-hero-btn{
  display:inline-block;margin-top:14px;background:var(--g3-red);color:#fff;
  font-weight:600;font-size:15px;letter-spacing:1px;padding:14px 42px;
  border-radius:6px;transition:background .3s;
}
.g3f-brand .g3-hero-btn:hover{background:#fff;color:var(--g3-red);}
/* originální PNG produktu má průhledné pozadí; spodních ~21 % s EN textem
   ořezáváme kontejnerem s pevným poměrem stran */
.g3f-brand .g3-hero-img{flex:1 1 44%;aspect-ratio:1500/1040;overflow:hidden;border-radius:10px;}
.g3f-brand .g3-hero-img img{width:100%;height:100%;object-fit:cover;object-position:top;}

/* ---------- intro strip ---------- */
.g3f-brand .g3-intro{padding:56px 28px;text-align:center;}
.g3f-brand .g3-intro h2{font-size:32px;margin-bottom:16px;}
.g3f-brand .g3-intro h2 span{color:var(--g3-red);}
.g3f-brand .g3-intro p{max-width:820px;margin:0 auto;font-size:16px;font-weight:300;}

/* ---------- kategorie – 7 foto dlaždic ---------- */
.g3f-brand .g3-section{padding:0 28px 56px;}
.g3f-brand .g3-h2{font-size:28px;text-align:center;margin-bottom:8px;}
.g3f-brand .g3-sub{text-align:center;color:#888;font-weight:300;margin-bottom:30px;}
.g3f-brand .g3-cats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.g3f-brand .g3-cat{position:relative;display:block;overflow:hidden;border-radius:10px;aspect-ratio:407/350;background:var(--g3-light);}
.g3f-brand .g3-cat img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease;}
.g3f-brand .g3-cat:hover img{transform:scale(1.06);}
.g3f-brand .g3-cat-label{
  position:absolute;left:0;right:0;bottom:0;padding:26px 14px 12px;
  background:linear-gradient(transparent,rgba(0,0,0,.72));
  color:#fff;font-weight:600;font-size:16px;text-align:center;letter-spacing:.5px;
}
.g3f-brand .g3-cat:hover .g3-cat-label{color:#fff;}
.g3f-brand .g3-cat::after{
  content:"";position:absolute;left:0;bottom:0;width:0;height:3px;
  background:var(--g3-red);transition:width .35s;
}
.g3f-brand .g3-cat:hover::after{width:100%;}

/* ---------- top produkty ---------- */
.g3f-brand .g3-products{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.g3f-brand .g3-product{
  display:flex;flex-direction:column;border:1px solid #e5e5e5;border-radius:10px;
  overflow:hidden;background:#fff;transition:box-shadow .3s;
}
.g3f-brand .g3-product:hover{box-shadow:0 8px 24px rgba(0,0,0,.1);}
.g3f-brand .g3-product-img{aspect-ratio:1/1;overflow:hidden;background:#fff;}
.g3f-brand .g3-product-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s;}
.g3f-brand .g3-product:hover .g3-product-img img{transform:scale(1.04);}
.g3f-brand .g3-product-body{padding:16px;display:flex;flex-direction:column;gap:4px;flex:1;}
.g3f-brand .g3-product-body h3{font-size:16px;font-weight:600;}
.g3f-brand .g3-product-cat{font-size:13px;color:#999;margin-bottom:12px;font-weight:300;}
.g3f-brand .g3-btn{
  margin-top:auto;display:inline-block;text-align:center;
  background:var(--g3-red);color:#fff;font-weight:600;font-size:14px;
  padding:11px 18px;border-radius:6px;transition:background .3s;letter-spacing:.5px;
}
.g3f-brand .g3-btn:hover{background:var(--g3-dark);}

/* ---------- italian style – třísloupcová sekce dle originálu ---------- */
.g3f-brand .g3-italian{
  display:flex;gap:48px;align-items:flex-start;
  background:#fff;padding:72px 28px;
}
.g3f-brand .g3-it-mark{
  flex:0 0 28%;font-size:88px;font-weight:700;line-height:1.02;
  color:#EDEDED;user-select:none;
}
.g3f-brand .g3-it-mid{flex:0 0 32%;}
.g3f-brand .g3-it-label{
  display:block;color:var(--g3-red);font-weight:600;font-size:15px;margin-bottom:14px;
}
.g3f-brand .g3-it-mid h2{font-size:33px;font-weight:600;line-height:1.3;}
.g3f-brand .g3-it-mid h2 span{color:var(--g3-red);}
.g3f-brand .g3-it-text{flex:1;min-width:0;}
.g3f-brand .g3-it-text p{
  font-size:15.5px;font-weight:300;color:#7B8FA5;line-height:1.75;margin-bottom:18px;
}

/* ---------- video sekce ---------- */
.g3f-brand .g3-video{padding:0 28px 56px;}
.g3f-brand .g3-video-frame{
  position:relative;width:100%;max-width:1100px;margin:0 auto;
  aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#000;
}
.g3f-brand .g3-video-frame video{
  position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover;
}

/* ---------- editorial sekce produktů (dle originálního blog layoutu) ---------- */
.g3f-brand .g3-editorial{display:flex;gap:48px;padding:0 28px 56px;align-items:flex-start;}
.g3f-brand .g3-ed-left{flex:0 0 30%;}
.g3f-brand .g3-ed-left h2{font-size:36px;font-weight:600;line-height:1.25;margin-bottom:18px;}
.g3f-brand .g3-ed-left h2 span{color:var(--g3-red);}
.g3f-brand .g3-ed-left p{font-size:15px;font-weight:300;color:#666;margin-bottom:24px;}
.g3f-brand .g3-ed-btn{
  display:inline-block;background:var(--g3-dark);color:#fff;font-weight:500;
  font-size:14.5px;padding:14px 26px;border-radius:5px;transition:background .3s;
}
.g3f-brand .g3-ed-btn:hover{background:var(--g3-red);}
.g3f-brand .g3-ed-watermark{
  margin-top:56px;font-size:68px;font-weight:700;line-height:1.05;color:#EDEDED;
  user-select:none;
}
.g3f-brand .g3-ed-list{flex:1;display:flex;flex-direction:column;gap:26px;min-width:0;}
.g3f-brand .g3-ed-item{
  display:flex;gap:30px;align-items:center;background:#fff;padding:24px 28px;
  box-shadow:0 6px 28px rgba(0,0,0,.07);border-radius:4px;transition:box-shadow .3s;
}
.g3f-brand .g3-ed-item:hover{box-shadow:0 10px 34px rgba(0,0,0,.12);}
.g3f-brand .g3-ed-img{flex:0 0 230px;aspect-ratio:1/1;}
.g3f-brand .g3-ed-img img{width:100%;height:100%;object-fit:contain;}
.g3f-brand .g3-ed-body{flex:1;min-width:0;}
.g3f-brand .g3-ed-label{color:var(--g3-red);font-weight:600;font-size:14px;display:block;margin-bottom:4px;}
.g3f-brand .g3-ed-body h3{font-size:23px;font-weight:700;margin-bottom:8px;}
.g3f-brand .g3-ed-body p{font-size:15px;font-weight:300;color:#666;margin-bottom:16px;}
.g3f-brand .g3-ed-link{font-weight:500;font-size:15px;color:var(--g3-dark);transition:color .3s;}
.g3f-brand .g3-ed-item:hover .g3-ed-link{color:var(--g3-red);}

/* ---------- claim strip ---------- */
.g3f-brand .g3-strip{
  background:var(--g3-dark);color:#fff;text-align:center;padding:52px 28px;
}
.g3f-brand .g3-strip h2{color:#fff;font-size:28px;font-weight:500;margin-bottom:12px;}
.g3f-brand .g3-strip h2 span{color:var(--g3-red);}
.g3f-brand .g3-strip p{color:#bbb;font-weight:300;max-width:760px;margin:0 auto;font-size:15.5px;}

/* ---------- CTA pás ---------- */
.g3f-brand .g3-cta{background:var(--g3-red);color:#fff;text-align:center;padding:48px 28px;}
.g3f-brand .g3-cta h2{color:#fff;font-size:26px;font-weight:600;margin-bottom:20px;}
.g3f-brand .g3-cta a{
  display:inline-block;background:#fff;color:var(--g3-red);
  font-weight:700;font-size:15px;padding:13px 40px;border-radius:6px;
  letter-spacing:.5px;transition:background .3s,color .3s;
}
.g3f-brand .g3-cta a:hover{background:var(--g3-dark);color:#fff;}

/* ---------- responzivita ---------- */
@media (max-width:1000px){
  .g3f-brand .g3-cats{grid-template-columns:repeat(3,1fr);}
  .g3f-brand .g3-products{grid-template-columns:repeat(2,1fr);}
  .g3f-brand .g3-hero h1{font-size:52px;}
  .g3f-brand .g3-editorial{flex-direction:column;}
  .g3f-brand .g3-ed-left{flex:1 1 auto;}
  .g3f-brand .g3-ed-watermark{display:none;}
}
@media (max-width:640px){
  .g3f-brand .g3-ed-item{flex-direction:column;align-items:stretch;gap:16px;}
  .g3f-brand .g3-ed-img{flex:1 1 auto;max-width:260px;margin:0 auto;}
}
@media (max-width:900px){
  .g3f-brand .g3-italian{flex-direction:column;gap:20px;padding:48px 28px;}
  .g3f-brand .g3-it-mark{font-size:56px;}
}
@media (max-width:768px){
  .g3f-brand .g3-hero{flex-direction:column;padding:40px 28px;}
  .g3f-brand .g3-cats{grid-template-columns:repeat(2,1fr);}
  .g3f-brand .g3-header{justify-content:center;text-align:center;}
  .g3f-brand .g3-intro h2{font-size:26px;}
}
@media (max-width:520px){
  .g3f-brand .g3-cats{grid-template-columns:1fr;}
  .g3f-brand .g3-products{grid-template-columns:1fr;}
  .g3f-brand .g3-hero h1{font-size:42px;}
}

/* ---------- příběh značky (naše sekce, v dodané stránce nebyla) ---------- */
.g3f-brand .g3-story{padding:64px 28px;background:var(--g3-light);}
.g3f-brand .g3-story-head{max-width:1100px;margin:0 auto 26px;}
.g3f-brand .g3-story-eyebrow{
  font-size:13px;letter-spacing:3px;font-weight:600;text-transform:uppercase;
  color:var(--g3-red);margin-bottom:12px;
}
.g3f-brand .g3-story h2{font-size:36px;font-weight:600;line-height:1.2;}
.g3f-brand .g3-story h2 span{color:var(--g3-red);}
.g3f-brand .g3-story-body{
  max-width:1100px;margin:0 auto;display:grid;
  grid-template-columns:repeat(3,1fr);gap:28px;
}
.g3f-brand .g3-story-body p{font-size:15.5px;font-weight:300;line-height:1.7;}
.g3f-brand .g3-story-body strong{font-weight:600;color:var(--g3-dark);}
.g3f-brand .g3-story-facts{
  max-width:1100px;margin:34px auto 0;padding-top:26px;border-top:1px solid var(--g3-grey);
  display:grid;grid-template-columns:repeat(3,1fr);gap:28px;
}
.g3f-brand .g3-fact-k{
  display:block;font-size:19px;font-weight:600;color:var(--g3-dark);margin-bottom:6px;
}
.g3f-brand .g3-fact-v{display:block;font-size:14px;font-weight:300;line-height:1.6;color:#666;}
@media (max-width:900px){
  .g3f-brand .g3-story{padding:48px 28px;}
  .g3f-brand .g3-story h2{font-size:28px;}
  .g3f-brand .g3-story-body,.g3f-brand .g3-story-facts{grid-template-columns:1fr;gap:18px;}
}


/* ---------- pravidla pro nasazení do šablony e-shopu (Upgates) ----------
   1) Šablona vykresluje nad obsahem vlastní H1 s názvem stránky → duplicitní nadpis.
   2) Šablona drží obsah v úzkém .max-w-xl → brand page chce plnou šířku.
   3) Nadpisy MUSÍ mít font-family explicitně: šablona má vlastní pravidlo pro h1–h4
      (myriad-pro) a přímé pravidlo přebije dědění z .g3f-brand. Naživo by se pak nadpis
      kreslil fontem šablony a znaky, které nemá v subsetu (ě, ž, ů), by spadly na
      systémový fallback → nápadně tlustší písmena. Na náhledu to není vidět. */
/* Tři vyměněné dlaždice (fritézy, trouby, váhy) mají SVĚTLÉ fotky, na kterých byl bílý
   label málo čitelný — dodaný scrim počítal s tmavými fotkami značky. Silnější gradient
   + jemný stín textu funguje na světlé i tmavé fotce. */
.g3f-brand .g3-cat-label { background: linear-gradient(transparent 8%, rgba(0,0,0,.5) 52%, rgba(0,0,0,.86)); text-shadow: 0 1px 3px rgba(0,0,0,.55); }

body:has(.g3f-brand-wrapper) h1.ph-main,
body:has(.g3f-brand-wrapper) h1.ph-page { display: none; }
.max-w-xl:has(.g3f-brand-wrapper) { max-width: none; margin-left: 0; margin-right: 0; }
.g3f-brand :where(h1, h2, h3, h4, h5, h6) { font-family: 'Poppins', 'Segoe UI', system-ui, sans-serif; }