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

/* ---------- scoped reset & tokeny (dle originálu) ---------- */
.gi-brand{
  --gi-red:#C70017;
  --gi-darkred:#711826;
  --gi-green:#AACE4D;
  --gi-text:#555;
  font-family:'Roboto',sans-serif;
  color:var(--gi-text);
  line-height:1.6;
  max-width:1400px;
  margin:0 auto;
  background:#fff;
}
.gi-brand *,.gi-brand *::before,.gi-brand *::after{box-sizing:border-box;margin:0;padding:0;}
.gi-brand img{max-width:100%;height:auto;display:block;}
.gi-brand a{text-decoration:none;color:inherit;}
.gi-brand h1,.gi-brand h2,.gi-brand h3{font-family:'Roboto Condensed',sans-serif;}

/* ---------- hlavička značky ---------- */
.gi-brand .gi-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 28px;flex-wrap:wrap;gap:14px;
}
.gi-brand .gi-header img{width:120px;height:auto;}
.gi-brand .gi-claim{font-family:'Roboto Condensed',sans-serif;font-size:16px;font-weight:700;color:var(--gi-red);text-transform:uppercase;letter-spacing:.04em;}
.gi-brand .gi-header-note{font-size:13px;color:#999;}

/* ---------- hero slider (2500×938, bílé verzálky jako na originálu) ---------- */
.gi-brand .gi-slider{position:relative;width:100%;padding-top:37.5%;overflow:hidden;background:#222;container-type:inline-size;}
.gi-brand .gi-slide{
  position:absolute;inset:0;opacity:0;visibility:hidden;
  background-size:cover;background-position:center;background-repeat:no-repeat;
  animation:giFade 21s infinite;
}
.gi-brand .gi-slide:nth-child(1){animation-delay:0s;}
.gi-brand .gi-slide:nth-child(2){animation-delay:7s;}
.gi-brand .gi-slide:nth-child(3){animation-delay:14s;}
@keyframes giFade{
  0%{opacity:0;visibility:hidden}
  5%{opacity:1;visibility:visible}
  29%{opacity:1;visibility:visible}
  34%{opacity:0;visibility:hidden}
  100%{opacity:0;visibility:hidden}
}
.gi-brand .gi-sl1{background-image:url('/shop-data/campaign/girmi-claude/fr03-nuove-slide.jpg');}
.gi-brand .gi-sl2{background-image:url('/shop-data/campaign/girmi-claude/fe58-nuove-slide.jpg');}
.gi-brand .gi-sl3{background-image:url('/shop-data/campaign/girmi-claude/st62-nuove-slide-2500x938.jpg');}
.gi-brand .gi-slide-text{
  position:absolute;left:4.5%;top:50%;transform:translateY(-50%);width:47%;color:#fff;
}
.gi-brand .gi-slide-text h2{
  font-size:20px;font-size:2.2cqw;font-weight:700;line-height:1.25;color:#fff;
  text-transform:uppercase;letter-spacing:.02em;margin-bottom:1cqw;
}
.gi-brand .gi-slide-text .gi-sl-name{
  display:block;font-family:'Roboto Condensed',sans-serif;font-size:14px;font-size:1.5cqw;
  font-weight:400;color:var(--gi-green);margin-bottom:.6cqw;
}
.gi-brand .gi-slide-text p{font-size:12px;font-size:1.15cqw;color:#ddd;margin-bottom:1.6cqw;max-width:90%;}
.gi-brand .gi-btn{
  display:inline-block;background:var(--gi-red);color:#fff;
  font-family:'Roboto Condensed',sans-serif;font-weight:700;font-size:13px;font-size:1.15cqw;
  text-transform:uppercase;letter-spacing:.06em;padding:.9cqw 2.4cqw;transition:background .25s;
}
.gi-brand .gi-btn:hover{background:var(--gi-darkred);}
.gi-brand .gi-slide-img{
  position:absolute;right:4%;bottom:0;top:8%;width:30%;
  display:flex;align-items:flex-end;justify-content:center;
}
.gi-brand .gi-slide-img img{max-height:100%;width:auto;}

/* ---------- kategorie (4 foto dlaždice s červeným pruhem) ---------- */
.gi-brand .gi-section{padding:48px 28px;}
.gi-brand .gi-h2{
  font-size:30px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;
  color:#333;text-align:center;margin-bottom:8px;
}
.gi-brand .gi-h2 span{color:var(--gi-red);}
.gi-brand .gi-sub{text-align:center;color:#999;margin-bottom:28px;font-size:15px;}
.gi-brand .gi-cats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.gi-brand .gi-cat{display:block;overflow:hidden;position:relative;}
.gi-brand .gi-cat-img{aspect-ratio:4/3;overflow:hidden;}
.gi-brand .gi-cat-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s;}
.gi-brand .gi-cat:hover .gi-cat-img img{transform:scale(1.06);}
.gi-brand .gi-cat-label{
  display:block;background:var(--gi-red);color:#fff;text-align:center;
  font-family:'Roboto Condensed',sans-serif;font-weight:700;font-size:16px;
  text-transform:uppercase;letter-spacing:.05em;padding:12px 8px;transition:background .25s;
}
.gi-brand .gi-cat:hover .gi-cat-label{background:var(--gi-darkred);}

/* ---------- bestsellery (skutečné produkty Apollo Store) ---------- */
.gi-brand .gi-prods{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.gi-brand .gi-prod{
  display:flex;flex-direction:column;background:#fff;border:1px solid #e8e8e8;
  transition:box-shadow .3s;
}
.gi-brand .gi-prod:hover{box-shadow:0 10px 26px rgba(0,0,0,.12);}
.gi-brand .gi-prod-img{aspect-ratio:1/1;padding:16px;display:flex;align-items:center;justify-content:center;}
.gi-brand .gi-prod-img img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;transition:transform .35s;}
.gi-brand .gi-prod:hover .gi-prod-img img{transform:scale(1.05);}
.gi-brand .gi-prod-body{padding:0 16px 18px;display:flex;flex-direction:column;gap:6px;flex:1;text-align:center;}
.gi-brand .gi-prod-body h3{
  font-size:17px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;color:#333;
}
.gi-brand .gi-prod-cat{font-size:13px;color:#999;margin-bottom:10px;}
.gi-brand .gi-prod .gi-btn{margin-top:auto;font-size:13px;padding:10px 16px;}

/* ---------- příběh značky (červená sekce dle originálu) ---------- */
.gi-brand .gi-story{background:var(--gi-red);color:#fff;padding:60px 28px;}
.gi-brand .gi-story-inner{max-width:860px;margin:0 auto;text-align:center;}
.gi-brand .gi-story-eyebrow{
  font-family:'Roboto Condensed',sans-serif;font-size:15px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:#ffd5da;margin-bottom:8px;
}
.gi-brand .gi-story-inner h2{
  color:#fff;font-size:32px;font-weight:700;text-transform:uppercase;
  letter-spacing:.02em;margin-bottom:20px;
}
.gi-brand .gi-story-inner p{font-size:15.5px;color:#ffe3e6;margin-bottom:14px;text-align:left;}
.gi-brand .gi-dots{display:flex;gap:14px;justify-content:center;margin-top:26px;}
.gi-brand .gi-dots span{
  width:26px;height:26px;border-radius:50%;display:block;border:2px solid rgba(255,255,255,.7);
}
.gi-brand .gi-dots .d1{background:#E8323C;}
.gi-brand .gi-dots .d2{background:#F2C230;}
.gi-brand .gi-dots .d3{background:#fff;}
.gi-brand .gi-dots .d4{background:var(--gi-green);}
.gi-brand .gi-dots-note{
  text-align:center;font-size:13.5px;color:#ffd5da;margin-top:10px;font-style:italic;
}

/* ---------- CTA ---------- */
.gi-brand .gi-cta{
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  background:var(--gi-darkred);color:#fff;padding:32px 40px;
}
.gi-brand .gi-cta h2{color:#fff;font-size:24px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;}
.gi-brand .gi-cta a{
  display:inline-block;background:#fff;color:var(--gi-darkred);
  font-family:'Roboto Condensed',sans-serif;font-weight:700;font-size:14px;
  text-transform:uppercase;letter-spacing:.06em;padding:14px 36px;
  transition:background .25s,color .25s;
}
.gi-brand .gi-cta a:hover{background:var(--gi-red);color:#fff;}

/* ---------- responzivita ---------- */
@media (max-width:900px){
  .gi-brand .gi-cats{grid-template-columns:repeat(2,1fr);}
  .gi-brand .gi-prods{grid-template-columns:repeat(2,1fr);}
  .gi-brand .gi-slide-text{width:56%;}
  .gi-brand .gi-slide-img{width:34%;}
}
@media (max-width:768px){
  .gi-brand .gi-header{justify-content:center;text-align:center;}
  .gi-brand .gi-h2{font-size:24px;}
  .gi-brand .gi-story-inner h2{font-size:25px;}
}
@media (max-width:520px){
  .gi-brand .gi-cats{grid-template-columns:1fr;}
  .gi-brand .gi-prods{grid-template-columns:1fr;}
  .gi-brand .gi-cta{justify-content:center;text-align:center;}
}

/* ---------- oprava dodaného CSS ---------- */
/* .gi-cat-img je <span>, tedy INLINE box: `aspect-ratio:4/3` se na něm ignoruje a výška
   dlaždice se řídí obrázkem. Červený pruh s názvem kategorie se pak nevejde do
   `.gi-cat{overflow:hidden}` a je odříznutý, takže dlaždice vypadají bez popisku.
   Stejná past už byla u Hurley karet, Argo ikon a Solac dlaždic. */
.gi-brand .gi-cat-img { display: block; }

/* Hero slider: dodané okno viditelnosti (0–34 % cyklu) je kratší než rozestup slidů
   (delay 7 s = 33,33 % z 21 s), takže slide zhasl dřív, než začal nabíhat další —
   každých 7 s probliklo tmavé pozadí slideru (#222). Okno musí sahat až k rozestupu,
   ať se fade-out překrývá s fade-inem dalšího slidu. PRAVIDLO: viditelné okno =
   100/N %, prodleva = cyklus/N. (Stejná past jako u AUKEY 2026-09-04.)
   `linear` proto, aby prolnutí nemělo uprostřed propad — výchozí `ease` sráží
   krytí rychleji, než ho další slide stihne nahradit. */
.gi-brand .gi-slide { animation-timing-function: linear; }

/* Slide „Péče o domácnost" (žehlení) má proti zbylým dvěma výrazně světlejší pozadí —
   průměrný jas celého slidu 123 vs. 26 (mixéry) a 58 (trouby) — takže zelený nadpisek
   i šedý odstavec na něm zanikaly.
   První pokus (2026-09-22 ráno) ztmavil jen pruh POD textem a vpravo doběhl do nuly.
   Čísla vyšla slušně (šedý odstavec 5,5:1), ale člověk zadání vrátil s tím, že text je
   pořád špatně čitelný — banner jako celek zůstal světlý, takže tmavý pruh působil jako
   skvrna a oko si expozici nastavilo podle světlého okolí. Proto se teď ztmavuje CELÝ
   banner a přechod jen odstupňuje sílu: vlevo nejvíc kvůli textu, vpravo zbyde 16 %, aby
   fotka nebyla plochá. Průměrný jas slidu tím klesl na 39 — mezi zbylé dva slidy.
   Změřeno na fotce (pás s textem, proti nejsvětlejším 5 % pozadí): šedý odstavec
   1,17:1 → 7,5:1, zelený nadpisek 1,13:1 → 5,7:1, bílý nadpis 1,59:1 → 10,2:1.
   Pseudoprvek je první potomek slidu, takže text i produktová fotka kreslené za ním
   zůstávají nad ztmavením — žehlička si jas drží. */
.gi-brand .gi-sl3::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg,
    rgba(0,0,0,.74) 0%, rgba(0,0,0,.68) 45%, rgba(0,0,0,.42) 62%, rgba(0,0,0,.16) 80%, rgba(0,0,0,.16) 100%);
}
@keyframes giFade{
  0%     { opacity:0; visibility:visible }
  5%     { opacity:1; visibility:visible }
  33.33% { opacity:1; visibility:visible }
  38.33% { opacity:0; visibility:hidden }
  100%   { opacity:0; visibility:hidden }
}


/* ---------- 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(.gi-brand-wrapper) h1.ph-main { display: none; }
/* Obsahový sloupec šablony je omezený na 640 px, brand page potřebuje plnou šířku. */
.max-w-xl:has(.gi-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 Roboto Condensed i pro nadpisy uvnitř brand page. */
.gi-brand :where(h1, h2, h3, h4, h5, h6) { font-family: 'Roboto Condensed', system-ui, sans-serif; }

/* ===== mobil: čitelné písmo a text pod fotkou (scripts/mobil_css.py) ===== */
/* Girmi na telefonu (do 768 px). Písmo hero bylo v `cqw` bez spodní meze a na
   360 px vycházelo pod 8 px (kontrola_mobil.py, 2026-09-24). Fotka se nahoře ukáže
   v pásu 37,5 % šířky (všechny tři fotky mají přesně tenhle poměr), text jde pod ni na plnou plochu s pevným písmem.
   `cqw` v pravidlech níž je bezpečné: měří šířku slideru, ne písmo. */
@media (max-width:768px){
  .gi-brand .gi-slider{padding-top:calc(37.5% + 270px);background:#222;}
  .gi-brand .gi-slide{background-size:100% auto;background-position:center top;}
  /* produktový výřez zůstává vpravo v pásu s fotkou, jinak by zasahoval do textu */
  .gi-brand .gi-slide .gi-slide-img{top:2cqw;bottom:auto;height:35.5cqw;right:4%;width:34%;}
  .gi-brand .gi-slide .gi-slide-text{top:37.5cqw;bottom:0;left:0;right:0;width:auto;
    transform:none;padding:18px 20px 22px;background:#222;
    display:flex;flex-direction:column;justify-content:center;}
  .gi-brand .gi-slide-text .gi-sl-name{font-size:14px;margin-bottom:6px;}
  .gi-brand .gi-slide-text h2{font-size:18px;line-height:1.3;margin-bottom:10px;}
  .gi-brand .gi-slide-text p{font-size:14px;line-height:1.5;margin-bottom:16px;max-width:none;}
  .gi-brand .gi-slide-text .gi-btn{align-self:flex-start;font-size:13px;padding:11px 22px;}
}
/* ===== konec bloku pro mobil ===== */