@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@600;700;800&family=Onest:wght@400;500;700&family=JetBrains+Mono:wght@500;600&display=swap');
.syn-mp-hero-b{ --hero-bg:url('/image/catalog/mapei/slider-homepage-2020-master-collection.jpg'); }

/* ============================================================
   SYNERGY · MAPEI HERO V12.1 "Blue Collection" — slim / matte
   Namespace: .syn-mp-hero-b
   ============================================================ */
.syn-mapei-premium .syn-mp-hero,
.syn-mapei-premium [class*="syn-mp-hero-premium"],
.syn-mapei-premium [class*="syn-mp-hero-p"],
.syn-mapei-premium [class*="syn-mp-hero-x"],
.syn-mapei-premium [class*="syn-mp-hero-v9"],
.syn-mapei-premium [class*="syn-mp-hero-v14"],
.syn-mapei-premium [class*="syn-mp-hero-v15"],
.syn-mapei-premium [class*="syn-mp-hero-v16"],
.syn-mapei-premium [class*="syn-mp-hero-full"],
.syn-mapei-premium [class*="syn-mp-png-hero"]{ display:none !important; }
.syn-mapei-premium #product h1.h1{ display:none !important; }

.syn-mp-hero-b{
  --paper:#eef4f9; --paper2:#e3edf4; --ink:#0c2333; --muted:#5d7587;
  --line:rgba(12,35,51,.12); --acc:#0079c2; --px:0; --py:0;
  --font-display:"Unbounded", system-ui, sans-serif;
  --font-body:"Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --brush:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 960 300' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M8,168 C40,120 90,104 150,110 C210,116 250,96 320,104 C400,113 470,90 560,102 C650,114 720,98 800,112 C870,124 930,120 952,150 C940,196 900,214 830,206 C740,196 660,214 560,206 C470,199 380,220 300,212 C210,203 120,224 60,206 C26,196 4,196 8,168 Z'/%3E%3C/svg%3E");
  position:relative; width:100vw; margin-left:calc(50% - 50vw);
  height:clamp(400px,38vw,500px);
  overflow:hidden; isolation:isolate;
  background:radial-gradient(130% 150% at 12% 0%, var(--paper) 0%, var(--paper2) 72%);
  color:var(--ink); font-family:var(--font-body);
}
.syn-mp-hero-b::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(rgba(12,35,51,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(12,35,51,.045) 1px,transparent 1px);
  background-size:34px 34px; mask-image:linear-gradient(90deg,#000 30%,transparent 80%);
}
/* faint oversized watermark filling the stage void */
.syn-mp-hero-b__mark{ position:absolute; right:2%; bottom:-4%; z-index:0; font-family:var(--font-display); font-weight:800; font-size:clamp(120px,18vw,230px); line-height:.8; color:rgba(12,35,51,.04); letter-spacing:-.04em; pointer-events:none; user-select:none; }

.syn-mp-hero-b__fan{
  position:absolute; top:-6%; bottom:-6%; right:-2%; width:44%; z-index:0;
  background-image:var(--hero-bg); background-size:cover; background-position:60% center;
  filter:grayscale(1) sepia(1) hue-rotate(168deg) saturate(3.2) brightness(1.05) contrast(1.02); opacity:.18;
  -webkit-mask-image:radial-gradient(120% 100% at 80% 50%,#000,transparent 72%); mask-image:radial-gradient(120% 100% at 80% 50%,#000,transparent 72%);
  transform:translate3d(calc(var(--px)*-4px),0,0) scale(1.02); transition:transform .9s cubic-bezier(.2,.85,.25,1);
  animation:hbFanIn 1.4s cubic-bezier(.16,1,.3,1) both;
}
@keyframes hbFanIn{ 0%{opacity:0; transform:scale(1.08);} 100%{opacity:.18; transform:scale(1.02);} }

.syn-mp-hero-b__inner{
  position:relative; z-index:4; height:100%;
  max-width:1440px; margin:0 auto; padding:0 clamp(22px,4vw,66px);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); align-items:center; gap:clamp(18px,3.5vw,50px);
}

/* ===== text ===== */
.syn-mp-hero-b__content{ max-width:540px; }
.hb-logo{ display:block; height:30px; width:auto; margin:0 0 16px; opacity:0; animation:hbClip .7s cubic-bezier(.16,1,.3,1) .15s forwards; filter:drop-shadow(0 1px 0 rgba(255,255,255,.6)); }
@keyframes hbClip{ 0%{opacity:0; clip-path:inset(0 100% 0 0);} 100%{opacity:1; clip-path:inset(0 0 0 0);} }
.hb-eyebrow{ display:inline-flex; align-items:center; gap:10px; font-family:var(--font-mono); font-size:10.5px; font-weight:600; letter-spacing:.30em; text-transform:uppercase; color:var(--muted); margin:0 0 13px; animation:hbUp .7s cubic-bezier(.16,1,.3,1) .3s both; }
.hb-eyebrow i{ width:10px; height:10px; border-radius:3px; background:var(--acc); animation:hbBG 18s ease-in-out infinite; }
.hb-title{ overflow:hidden; margin:0 0 13px; }
.hb-title span{ display:block; font-family:var(--font-display); font-size:clamp(30px,3.5vw,46px); font-weight:800; line-height:1.02; letter-spacing:-.02em; color:var(--ink); text-wrap:balance; animation:hbRise 1s cubic-bezier(.16,1,.3,1) .38s both; }
@keyframes hbRise{ 0%{ transform:translateY(110%); opacity:0;} 60%{opacity:1;} 100%{ transform:translateY(0); opacity:1;} }
.hb-lead{ margin:0 0 18px; max-width:440px; font-size:14.5px; line-height:1.5; color:var(--muted); animation:hbUp .8s cubic-bezier(.16,1,.3,1) .55s both; }
.hb-feats{ list-style:none; margin:0 0 20px; padding:0; display:flex; flex-wrap:wrap; gap:0 14px; animation:hbUp .8s cubic-bezier(.16,1,.3,1) .7s both; }
.hb-feats li{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; color:var(--ink); padding:5px 0; }
.hb-feats li + li{ padding-left:14px; border-left:1px solid var(--line); }
.hb-feats svg{ width:15px; height:15px; color:var(--acc); animation:hbColor 18s ease-in-out infinite; }
.hb-feats svg polyline{ stroke-dasharray:24; stroke-dashoffset:24; animation:hbDraw .5s ease .95s forwards; }
.hb-feats li:nth-child(2) svg polyline{ animation-delay:1.05s; } .hb-feats li:nth-child(3) svg polyline{ animation-delay:1.15s; }
@keyframes hbDraw{ to{ stroke-dashoffset:0; } }
.hb-pro{ position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:12px; padding:11px 18px 11px 11px; border-radius:13px; background:rgba(255,255,255,.85); border:1px solid var(--line); box-shadow:0 12px 30px rgba(12,35,51,.08); backdrop-filter:blur(6px); animation:hbUp .85s cubic-bezier(.16,1,.3,1) .9s both; }
.hb-pro__badge{ flex:none; width:42px; height:42px; border-radius:10px; display:grid; place-items:center; background:var(--acc); color:#fff; font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.06em; animation:hbBG 18s ease-in-out infinite; }
.hb-pro__text{ display:flex; flex-direction:column; gap:1px; }
.hb-pro__text b{ font-size:13.5px; font-weight:800; color:var(--ink); }
.hb-pro__text small{ font-size:12px; color:var(--muted); }
.hb-pro__sheen{ position:absolute; top:0; bottom:0; left:-60%; width:50%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.7),transparent); transform:skewX(-14deg); }
.hb-pro:hover .hb-pro__sheen{ animation:hbSheen .9s ease; }
@keyframes hbSheen{ from{left:-60%;} to{left:120%;} }
/* NEW: meta spec line fills the lower-left void + adds info */
.hb-meta{ display:flex; flex-wrap:wrap; gap:8px 18px; margin:18px 0 0; font-family:var(--font-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); animation:hbUp .9s cubic-bezier(.16,1,.3,1) 1.05s both; }
.hb-meta span{ position:relative; }
.hb-meta span + span::before{ content:"·"; position:absolute; left:-11px; opacity:.5; }

/* ===== paint stage ===== */
.syn-mp-hero-b__stage{ position:relative; height:100%; }
/* soft matte halo behind the bucket (fills the stage, grounds product) */
.hb-ring{ position:absolute; left:46%; top:50%; width:78%; aspect-ratio:1; transform:translate(-50%,-50%); z-index:0;
  background:radial-gradient(circle, rgba(255,255,255,.7) 0%, rgba(0,121,194,.10) 40%, transparent 66%);
  animation:hbRing 7s ease-in-out infinite; }
@keyframes hbRing{ 0%,100%{ transform:translate(-50%,-50%) scale(.96); opacity:.8;} 50%{ transform:translate(-50%,-50%) scale(1.04); opacity:1;} }

.hb-swatch{ position:absolute; -webkit-mask:var(--brush) center/100% 100% no-repeat; mask:var(--brush) center/100% 100% no-repeat; }
.hb-swatch--back{ left:0; right:24%; top:28%; height:30%; background:#0a5f93; opacity:.26; transform:rotate(-4deg); animation:hbSwIn 1s ease .2s both; }
.hb-swatch--mid{ left:8%; right:14%; top:55%; height:26%; background:#2a9bd8; opacity:.30; transform:rotate(3deg); animation:hbSwIn 1s ease .32s both; }
.hb-swatch--front{ left:3%; right:18%; top:40%; height:34%; background:var(--acc); animation:hbSwIn 1s cubic-bezier(.16,1,.3,1) .25s both, hbBG 18s ease-in-out infinite; }
@keyframes hbSwIn{ 0%{opacity:0; clip-path:inset(0 100% 0 0);} 100%{opacity:1; clip-path:inset(0 0 0 0);} }

@keyframes hbBG{0%{background-color:#0b3c5d;}16.67%{background-color:#0a5f93;}33.33%{background-color:#0079c2;}50%{background-color:#2a9bd8;}66.67%{background-color:#57c2ec;}83.33%{background-color:#18b6c9;}100%{background-color:#0b3c5d;}}
@keyframes hbColor{0%{color:#0b3c5d;}16.67%{color:#0a5f93;}33.33%{color:#0079c2;}50%{color:#2a9bd8;}66.67%{color:#57c2ec;}83.33%{color:#18b6c9;}100%{color:#0b3c5d;}}

.hb-shadow{ position:absolute; left:46%; bottom:13%; width:40%; height:22px; transform:translateX(-50%); background:rgba(12,35,51,.30); filter:blur(18px); border-radius:50%; animation:hbShadow 7s ease-in-out infinite; z-index:1; }
@keyframes hbShadow{ 0%,100%{ transform:translateX(-50%) scale(1); opacity:.42;} 50%{ transform:translateX(-50%) scale(.88); opacity:.3;} }

.hb-product{ position:absolute; inset:0; display:grid; place-items:center; z-index:2;
  transform:perspective(1300px) translate3d(calc(var(--px)*13px),calc(var(--py)*8px),0) rotateY(calc(var(--px)*3deg)) rotateX(calc(var(--py)*-3deg));
  transition:transform .4s cubic-bezier(.25,.9,.3,1); transform-style:preserve-3d; will-change:transform; }
.hb-product__in{ animation:hbProductIn 1.05s cubic-bezier(.16,1,.3,1) .4s both, hbFloat 7s 1.4s ease-in-out infinite; }
.hb-product__in img{ display:block; width:auto; height:auto; max-width:min(400px,42vw); max-height:clamp(330px,42vw,460px); object-fit:contain; filter:drop-shadow(0 26px 30px rgba(12,35,51,.32)); }
@keyframes hbProductIn{ 0%{ opacity:0; transform:translateY(30px) scale(.96);} 100%{ opacity:1; transform:translateY(0) scale(1);} }
@keyframes hbFloat{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-8px);} }

.hb-chips{ position:absolute; right:0; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:9px; z-index:5; animation:hbUp .9s ease 1s both; }
.hb-chips__label{ writing-mode:vertical-rl; transform:rotate(180deg); font-family:var(--font-mono); font-size:9.5px; letter-spacing:.3em; text-transform:uppercase; color:var(--muted); position:absolute; left:-20px; top:50%; translate:0 -50%; }
.hb-chip{ width:26px; height:26px; border-radius:7px; box-shadow:0 0 0 1px rgba(255,255,255,.6), 0 4px 10px rgba(12,35,51,.12); animation:hbScan 6s ease-in-out infinite; }
.hb-chip:nth-child(1){background:#0b3c5d; animation-delay:0s}
.hb-chip:nth-child(2){background:#0a5f93; animation-delay:.5s}
.hb-chip:nth-child(3){background:#0079c2; animation-delay:1s}
.hb-chip:nth-child(4){background:#2a9bd8; animation-delay:1.5s}
.hb-chip:nth-child(5){background:#57c2ec; animation-delay:2s}
.hb-chip:nth-child(6){background:#18b6c9; animation-delay:2.5s}
@keyframes hbScan{ 0%,72%,100%{ transform:scale(1); box-shadow:0 0 0 1px rgba(255,255,255,.6),0 4px 10px rgba(12,35,51,.12);} 12%{ transform:scale(1.26); box-shadow:0 0 0 2px #fff,0 8px 18px rgba(12,35,51,.26);} }

@keyframes hbUp{ 0%{ opacity:0; transform:translateY(14px);} 100%{ opacity:1; transform:translateY(0);} }

/* ===== MOBILE (hero) ===== */
@media (max-width:920px){
  .syn-mp-hero-b{ height:auto; }
  .syn-mp-hero-b__mark{ font-size:120px; right:-2%; bottom:auto; top:6px; opacity:.5; }
  .syn-mp-hero-b__fan{ width:70%; opacity:.12; top:0; bottom:auto; height:260px; mask-image:radial-gradient(120% 100% at 70% 30%,#000,transparent 70%); }
  .syn-mp-hero-b__inner{ grid-template-columns:1fr; padding:24px 20px 30px; gap:6px; }
  .syn-mp-hero-b__content{ order:2; max-width:none; }
  .syn-mp-hero-b__stage{ order:1; height:280px; }
  .hb-ring{ left:50%; width:300px; }
  .hb-swatch--back,.hb-swatch--mid{ display:none; }
  .hb-swatch--front{ left:8%; right:8%; top:46%; height:120px; }
  .hb-chips{ flex-direction:row; right:auto; left:50%; top:auto; bottom:6px; transform:translateX(-50%); gap:7px; }
  .hb-chips__label{ display:none; }
  .hb-chip{ width:20px; height:20px; }
  .hb-product__in img{ max-width:250px; max-height:250px; }
  .hb-title span{ font-size:clamp(28px,8.4vw,40px); }
  .hb-lead{ font-size:14px; }
  .hb-pro{ width:100%; }
  .hb-meta{ font-size:9.5px; gap:6px 14px; }
}
@media (max-width:480px){
  .syn-mp-hero-b__stage{ height:240px; }
  .hb-product__in img{ max-width:210px; max-height:210px; }
  .hb-ring{ width:240px; }
}

/* ===== reduced motion ===== */
@media (prefers-reduced-motion:reduce){
  .syn-mp-hero-b *{ animation:none !important; transition:none !important; }
  .hb-swatch--front{ clip-path:none; opacity:1; background:#0079c2; }
  .hb-eyebrow i,.hb-pro__badge{ background:#0079c2; } .hb-feats svg{ color:#0079c2; }
  .hb-logo,.hb-title span,.hb-eyebrow,.hb-lead,.hb-feats,.hb-pro,.hb-meta,.hb-product__in,.syn-mp-hero-b__fan,.hb-chips{ opacity:1; transform:none; clip-path:none; }
  .hb-feats svg polyline{ stroke-dashoffset:0; }
}


/* ============================================================
   SYNERGY · MAPEI HERO — PRIMER (Malech). Modern.
   Namespace: .syn-mp-hero-g  (outer marker kept for :has scoping)
   ============================================================ */
.syn-mp-hero-g{
  position:relative; overflow:hidden; border-radius:26px; isolation:isolate; margin:0 0 6px;
  background:
    radial-gradient(140% 120% at 88% -10%, #d8f3f7 0%, rgba(216,243,247,0) 42%),
    radial-gradient(120% 130% at 12% 110%, #e3edf6 0%, rgba(227,237,246,0) 46%),
    #f5f9fc;
  box-shadow:0 26px 60px rgba(13,34,51,.12);
  font-family:"Onest",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; color:#0d2233;
}
.syn-mp-hero-g *{ box-sizing:border-box; }
.syn-mp-hero-g::before{ content:""; position:absolute; inset:0; z-index:0;
  background-image:linear-gradient(rgba(10,95,147,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(10,95,147,.05) 1px,transparent 1px);
  background-size:34px 34px; -webkit-mask:radial-gradient(90% 90% at 70% 30%,#000 35%,transparent 100%); mask:radial-gradient(90% 90% at 70% 30%,#000 35%,transparent 100%); }
.syn-mp-hero-g .mh-grid{ position:relative; z-index:2; display:grid; grid-template-columns:1.04fr .96fr; min-height:480px; }
.syn-mp-hero-g .mh-left{ padding:48px 46px; display:flex; flex-direction:column; gap:20px; align-self:center; }
.syn-mp-hero-g .mh-logo{ height:30px !important; width:auto !important; max-width:165px; display:block; }
.syn-mp-hero-g .mh-eyebrow{ display:inline-flex; align-items:center; gap:10px; font-family:"JetBrains Mono",ui-monospace,monospace; font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:#0a5f93; }
.syn-mp-hero-g .mh-eyebrow i{ width:24px; height:2px; border-radius:2px; background:linear-gradient(90deg,#00cdce,#0079c2); }
.syn-mp-hero-g .mh-title{ font-family:"Unbounded",sans-serif; font-weight:800; letter-spacing:-.04em; line-height:.96; font-size:clamp(34px,4.4vw,60px); color:#0d2233; margin:0; }
.syn-mp-hero-g .mh-title .ac{ background:linear-gradient(120deg,#0079c2 0%,#16b9cb 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.syn-mp-hero-g .mh-lead{ color:#586a79; font-size:16px; line-height:1.6; max-width:440px; margin:0; }
.syn-mp-hero-g .mh-chips{ display:flex; flex-wrap:wrap; gap:9px; }
.syn-mp-hero-g .mh-chips span{ display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 15px; border-radius:999px; background:rgba(255,255,255,.8); border:1px solid #d3e3ef; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); font-size:14px; font-weight:600; color:#173344; }
.syn-mp-hero-g .mh-chips svg{ width:16px; height:16px; color:#16b9cb; }
.syn-mp-hero-g .mh-meta{ display:flex; flex-wrap:wrap; gap:8px 18px; font-family:"JetBrains Mono",ui-monospace,monospace; font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:#7d8fa0; margin:0; padding:0; list-style:none; }
.syn-mp-hero-g .mh-meta span{ position:relative; padding-left:16px; }
.syn-mp-hero-g .mh-meta span::before{ content:""; position:absolute; left:0; top:50%; width:7px; height:7px; border-radius:50%; transform:translateY(-50%); background:linear-gradient(135deg,#00cdce,#0079c2); }
.syn-mp-hero-g .mh-stage{ position:relative; display:grid; place-items:center; padding:34px; overflow:hidden; }
.syn-mp-hero-g .mh-halo{ position:absolute; top:46%; left:54%; width:380px; height:380px; transform:translate(-50%,-50%); z-index:0; }
.syn-mp-hero-g .mh-halo span{ position:absolute; inset:0; border-radius:50%; background:radial-gradient(circle, rgba(0,205,206,.30) 0%, rgba(0,121,194,.16) 38%, rgba(0,121,194,0) 70%); }
.syn-mp-hero-g .mh-halo i{ position:absolute; inset:18%; border-radius:50%; border:1.5px solid rgba(0,170,200,.30); animation:mhSoak 4.8s ease-out infinite; }
.syn-mp-hero-g .mh-halo i:nth-child(3){ animation-delay:1.6s; } .syn-mp-hero-g .mh-halo i:nth-child(4){ animation-delay:3.2s; }
.syn-mp-hero-g .mh-can{ position:relative; z-index:3; height:clamp(290px,30vw,410px) !important; width:auto !important; max-width:100%; object-fit:contain; filter:drop-shadow(0 34px 40px rgba(13,40,66,.34)); animation:mhFloat 6s ease-in-out infinite; }
.syn-mp-hero-g .mh-refl{ position:absolute; z-index:2; bottom:13%; left:50%; transform:translateX(-50%); width:54%; height:30px; border-radius:50%; background:rgba(13,40,66,.22); filter:blur(17px); }
.syn-mp-hero-g .mh-pin{ position:absolute; z-index:4; display:flex; align-items:center; gap:9px; padding:9px 13px; border-radius:13px; background:rgba(255,255,255,.82); border:1px solid rgba(255,255,255,.9); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:0 12px 26px rgba(13,40,66,.16); font-weight:600; font-size:13px; color:#15303f; white-space:nowrap; }
.syn-mp-hero-g .mh-pin small{ display:block; font-family:"JetBrains Mono",ui-monospace,monospace; font-size:10px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:#8194a3; }
.syn-mp-hero-g .mh-pin .dot{ width:9px; height:9px; border-radius:50%; background:linear-gradient(135deg,#00cdce,#0079c2); flex:none; box-shadow:0 0 0 4px rgba(0,205,206,.18); }
.syn-mp-hero-g .mh-pin.p1{ top:15%; left:5%; } .syn-mp-hero-g .mh-pin.p2{ top:40%; right:4%; } .syn-mp-hero-g .mh-pin.p3{ bottom:19%; left:8%; }
.syn-mp-hero-g .mh-bar{ position:relative; z-index:2; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid rgba(13,34,51,.09); background:rgba(255,255,255,.45); }
.syn-mp-hero-g .mh-bar .s{ padding:18px 26px; border-left:1px solid rgba(13,34,51,.07); }
.syn-mp-hero-g .mh-bar .s:first-child{ border-left:0; }
.syn-mp-hero-g .mh-bar .k{ font-family:"JetBrains Mono",ui-monospace,monospace; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:#8194a3; }
.syn-mp-hero-g .mh-bar .v{ font-family:"Unbounded",sans-serif; font-size:18px; font-weight:700; letter-spacing:-.02em; color:#0d2233; margin-top:6px; }
.syn-mp-hero-g .mh-bar .v small{ font-family:"Onest"; font-size:12.5px; font-weight:600; color:#5a6b7b; }
@keyframes mhSoak{ 0%{ transform:scale(.55); opacity:0; } 25%{ opacity:.7; } 100%{ transform:scale(1.5); opacity:0; } }
@keyframes mhFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-15px); } }
@media (max-width:820px){
  .syn-mp-hero-g .mh-grid{ grid-template-columns:1fr; }
  .syn-mp-hero-g .mh-stage{ order:2; min-height:340px; } .syn-mp-hero-g .mh-left{ order:1; padding:32px 24px; }
  .syn-mp-hero-g .mh-pin.p1{ top:8%; left:4%; } .syn-mp-hero-g .mh-pin.p2{ top:auto; bottom:28%; right:4%; } .syn-mp-hero-g .mh-pin.p3{ bottom:9%; left:4%; }
  .syn-mp-hero-g .mh-bar{ grid-template-columns:repeat(2,1fr); }
  .syn-mp-hero-g .mh-bar .s:nth-child(3){ border-left:0; } .syn-mp-hero-g .mh-bar .s:nth-child(n+3){ border-top:1px solid rgba(13,34,51,.06); }
}
@media (prefers-reduced-motion:reduce){ .syn-mp-hero-g .mh-can, .syn-mp-hero-g .mh-halo i{ animation:none; } }


/* ============================================================
   PRIMER CARD POLISH — applies ONLY on pages that have the
   primer hero. Every rule is scoped via `#content:has(.syn-mp-hero-g)`
   (and the tabs sibling), so ALL other products and paint pages
   are completely untouched. Self-contained: fully styles the
   fasovka selector and the description block from scratch.
   ============================================================ */
#content:has(.syn-mp-hero-g){
  --pc-acc:#0079c2; --pc-acc-d:#0a5f93; --pc-ink:#102330; --pc-muted:#5d7081;
  --pc-line:rgba(16,35,48,.10); --pc-card:#fff; --pc-radius:16px;
  --pc-shadow:0 10px 30px rgba(16,35,48,.06);
  --pc-display:"Unbounded", system-ui, sans-serif;
  --pc-body:"Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --pc-mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-family:var(--pc-body);
}
#content:has(.syn-mp-hero-g) .syn-product-title{
  font-family:var(--pc-display); font-weight:800; letter-spacing:-.02em; color:var(--pc-ink);
}

/* ---- Fasovka selector (.syn-mapei-app) ---- */
#content:has(.syn-mp-hero-g) .syn-mapei-app{
  margin:18px 0 20px; padding:22px; background:var(--pc-card);
  border:1px solid var(--pc-line); border-radius:var(--pc-radius); box-shadow:var(--pc-shadow);
}
#content:has(.syn-mp-hero-g) .syn-mapei-app *{ box-sizing:border-box; }
#content:has(.syn-mp-hero-g) .syn-mapei-app-head{
  display:flex; justify-content:space-between; align-items:flex-start; gap:16px;
  padding-bottom:16px; border-bottom:1px solid var(--pc-line);
}
#content:has(.syn-mp-hero-g) .syn-mapei-kicker{
  display:inline-flex; font-family:var(--pc-mono); color:var(--pc-acc); font-size:10.5px;
  font-weight:600; letter-spacing:.22em; text-transform:uppercase; margin-bottom:8px;
}
#content:has(.syn-mp-hero-g) .syn-mapei-app-title{
  font-family:var(--pc-display); font-weight:800; font-size:20px; line-height:1.1;
  letter-spacing:-.02em; color:var(--pc-ink);
}
#content:has(.syn-mp-hero-g) .syn-mapei-selected-sku{ min-width:150px; text-align:right; }
#content:has(.syn-mp-hero-g) .syn-mapei-selected-sku span,
#content:has(.syn-mp-hero-g) .syn-mapei-selected-main span{
  display:block; font-family:var(--pc-mono); color:#94a3b8; font-size:10px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; margin-bottom:5px;
}
#content:has(.syn-mp-hero-g) .syn-mapei-selected-sku b{ display:block; color:var(--pc-ink); font-size:14px; font-weight:800; }
#content:has(.syn-mp-hero-g) .syn-mapei-packs{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 220px)); gap:10px; margin-top:16px;
}
#content:has(.syn-mp-hero-g) .syn-mapei-pack{
  display:flex; flex-direction:column; align-items:flex-start; min-height:104px; padding:15px;
  background:#fff; border:1.5px solid var(--pc-line); border-radius:12px; color:var(--pc-ink);
  text-align:left; cursor:pointer; transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
#content:has(.syn-mp-hero-g) .syn-mapei-pack:hover{ transform:translateY(-2px); border-color:#9fcce6; box-shadow:var(--pc-shadow); }
#content:has(.syn-mp-hero-g) .syn-mapei-pack.is-active{
  background:linear-gradient(135deg, var(--pc-acc-d), var(--pc-acc)); border-color:transparent; color:#fff;
  box-shadow:0 14px 30px rgba(10,95,147,.26);
}
#content:has(.syn-mp-hero-g) .syn-mapei-pack-label{ font-family:var(--pc-display); font-size:20px; font-weight:800; letter-spacing:-.02em; line-height:1; }
#content:has(.syn-mp-hero-g) .syn-mapei-pack-sku{ margin-top:8px; font-family:var(--pc-mono); font-size:10px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--pc-muted); }
#content:has(.syn-mp-hero-g) .syn-mapei-pack.is-active .syn-mapei-pack-sku{ color:rgba(255,255,255,.72); }
#content:has(.syn-mp-hero-g) .syn-mapei-pack-price{ margin-top:auto; padding-top:10px; font-size:15px; font-weight:800; color:var(--pc-acc); }
#content:has(.syn-mp-hero-g) .syn-mapei-pack.is-active .syn-mapei-pack-price{ color:#bfe6f7; }
#content:has(.syn-mp-hero-g) .syn-mapei-selected{
  display:flex; justify-content:space-between; align-items:center; gap:18px; margin-top:16px; padding-top:16px; border-top:1px solid var(--pc-line);
}
#content:has(.syn-mp-hero-g) .syn-mapei-selected-main b{ display:block; color:var(--pc-ink); font-size:14px; font-weight:800; }
#content:has(.syn-mp-hero-g) .syn-mapei-selected-price{ font-family:var(--pc-display); font-size:22px; font-weight:800; letter-spacing:-.02em; color:var(--pc-ink); white-space:nowrap; }
#content:has(.syn-mp-hero-g) .syn-mapei-note:not(:empty){ margin-top:12px; padding:12px 14px; background:#eef6fb; border-left:3px solid var(--pc-acc); border-radius:0 8px 8px 0; color:#35606a; font-size:13px; line-height:1.45; }

/* ---- Description block (.syn-mapei-product-v2) ---- */
#content:has(.syn-mp-hero-g) .syn-mapei-product-v2{ margin:6px 0; color:var(--pc-ink); font-family:var(--pc-body); }
#content:has(.syn-mp-hero-g) .syn-mapei-product-v2 *{ box-sizing:border-box; }
#content:has(.syn-mp-hero-g) .syn-mapei-product-v2-hero{
  position:relative; overflow:hidden; padding:32px; border:1px solid var(--pc-line); border-radius:var(--pc-radius);
  background:radial-gradient(120% 130% at 88% 0%, #eaf4fb 0%, #ffffff 60%);
}
#content:has(.syn-mp-hero-g) .syn-mapei-product-v2-title{
  margin:0; font-family:var(--pc-display); font-weight:800; letter-spacing:-.03em; color:var(--pc-ink);
  font-size:clamp(26px, 3vw, 40px); line-height:1.05;
}
#content:has(.syn-mp-hero-g) .syn-mapei-product-v2-subtitle{ max-width:720px; margin:14px 0 0; color:var(--pc-muted); font-size:15.5px; line-height:1.6; }
#content:has(.syn-mp-hero-g) .syn-mapei-product-v2-badges{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
#content:has(.syn-mp-hero-g) .syn-mapei-product-v2-badges span{
  display:inline-flex; align-items:center; min-height:32px; padding:0 13px; background:#fff;
  border:1px solid #cfe3f1; border-radius:999px; color:var(--pc-ink); font-size:12px; font-weight:700;
}
#content:has(.syn-mp-hero-g) .syn-mapei-product-v2-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin-top:12px; }
#content:has(.syn-mp-hero-g) .syn-mapei-product-v2-card,
#content:has(.syn-mp-hero-g) .syn-mapei-product-v2-section{
  padding:22px; background:var(--pc-card); border:1px solid var(--pc-line); border-radius:var(--pc-radius); margin-top:12px;
}
#content:has(.syn-mp-hero-g) .syn-mapei-product-v2-grid > *{ margin-top:0; }
#content:has(.syn-mp-hero-g) .syn-mapei-product-v2-card h3,
#content:has(.syn-mp-hero-g) .syn-mapei-product-v2-section h3{
  margin:0 0 10px; font-family:var(--pc-display); font-weight:800; font-size:18px; letter-spacing:-.02em; color:var(--pc-ink);
}
#content:has(.syn-mp-hero-g) .syn-mapei-product-v2-card p,
#content:has(.syn-mp-hero-g) .syn-mapei-product-v2-section p,
#content:has(.syn-mp-hero-g) .syn-mapei-product-v2-section li{ margin:0; color:var(--pc-muted); font-size:14.5px; line-height:1.62; }
#content:has(.syn-mp-hero-g) .syn-mapei-product-v2-tech{
  margin-top:12px; padding:24px; background:var(--pc-ink); border-radius:var(--pc-radius); color:#fff;
}
#content:has(.syn-mp-hero-g) .syn-mapei-product-v2-tech h3{ margin:0 0 12px; font-family:var(--pc-display); font-weight:800; font-size:20px; letter-spacing:-.02em; color:#fff; }
#content:has(.syn-mp-hero-g) .syn-mapei-product-v2-row{ display:flex; justify-content:space-between; gap:18px; padding:12px 0; border-bottom:1px solid rgba(255,255,255,.12); }
#content:has(.syn-mp-hero-g) .syn-mapei-product-v2-row:last-child{ border-bottom:0; }
#content:has(.syn-mp-hero-g) .syn-mapei-product-v2-row span{ color:#9fb3c6; font-size:14px; }
#content:has(.syn-mp-hero-g) .syn-mapei-product-v2-row b{ color:#fff; text-align:right; font-weight:700; }

/* ---- Buybox cohesion (price + primary CTA -> hero blue) ---- */
#content:has(.syn-mp-hero-g) .ds-product-main-price .ds-price-new{
  font-family:var(--pc-display); font-weight:800; letter-spacing:-.02em; color:var(--pc-ink);
}
#content:has(.syn-mp-hero-g) .ds-product-main-actions{ border-radius:var(--pc-radius); }
#content:has(.syn-mp-hero-g) .ds-product-main-cart-button.button-primary{
  background:linear-gradient(135deg, var(--pc-acc-d), var(--pc-acc)); border:none;
  box-shadow:0 12px 26px rgba(10,95,147,.24);
}
#content:has(.syn-mp-hero-g) .ds-product-main-cart-button.button-primary:hover{ filter:brightness(1.06); }
#content:has(.syn-mp-hero-g) .syn-acc-v5-item{ border-radius:12px; }
#content:has(.syn-mp-hero-g) .syn-acc-v5-title{ font-family:var(--pc-display); font-weight:700; letter-spacing:-.01em; }

/* ---- responsive ---- */
@media (max-width:991px){
  #content:has(.syn-mp-hero-g) .syn-mapei-product-v2-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:640px){
  #content:has(.syn-mp-hero-g) .syn-mapei-product-v2-grid{ grid-template-columns:1fr; }
  #content:has(.syn-mp-hero-g) .syn-mapei-product-v2-hero,
  #content:has(.syn-mp-hero-g) .syn-mapei-app{ padding:20px; }
  #content:has(.syn-mp-hero-g) .syn-mapei-app-head,
  #content:has(.syn-mp-hero-g) .syn-mapei-selected{ flex-direction:column; align-items:flex-start; gap:10px; }
  #content:has(.syn-mp-hero-g) .syn-mapei-selected-sku{ text-align:left; }
  #content:has(.syn-mp-hero-g) .syn-mapei-packs{ grid-template-columns:1fr; }
  #content:has(.syn-mp-hero-g) .syn-mapei-product-v2-row{ flex-direction:column; gap:4px; }
  #content:has(.syn-mp-hero-g) .syn-mapei-product-v2-row b{ text-align:left; }
}

/* ---- Malech sells a single фасовка (10 кг): hide the variant chooser ---- */
#content:has(.syn-mp-hero-g) #syn-mapei-product-app{ display:none !important; }


/* ============================================================
   SYNERGY · POLISAN PREMIUM (peony) — namespace .syn-pl-hero
   ============================================================ */
.syn-pl-hero{
  --paper:#fdf2f5; --paper2:#f8e7ed; --ink:#2c1a22; --muted:#8a6b76;
  --line:rgba(44,26,34,.12); --acc:#c24d6a; --px:0; --py:0;
  --font-display:"Unbounded", system-ui, sans-serif;
  --font-body:"Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --brush:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 960 300' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M8,168 C40,120 90,104 150,110 C210,116 250,96 320,104 C400,113 470,90 560,102 C650,114 720,98 800,112 C870,124 930,120 952,150 C940,196 900,214 830,206 C740,196 660,214 560,206 C470,199 380,220 300,212 C210,203 120,224 60,206 C26,196 4,196 8,168 Z'/%3E%3C/svg%3E");
  position:relative; width:100vw; margin-left:calc(50% - 50vw);
  height:clamp(400px,38vw,500px);
  overflow:hidden; isolation:isolate;
  background:radial-gradient(130% 150% at 12% 0%, var(--paper) 0%, var(--paper2) 72%);
  color:var(--ink); font-family:var(--font-body);
}
.syn-pl-hero::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(rgba(44,26,34,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(44,26,34,.045) 1px,transparent 1px);
  background-size:34px 34px; mask-image:linear-gradient(90deg,#000 30%,transparent 80%);
}
/* faint oversized watermark filling the stage void */
.syn-pl-hero__mark{ position:absolute; right:2%; bottom:-4%; z-index:0; font-family:var(--font-display); font-weight:800; font-size:clamp(120px,18vw,230px); line-height:.8; color:rgba(44,26,34,.04); letter-spacing:-.04em; pointer-events:none; user-select:none; }

.syn-pl-hero__fan{
  position:absolute; top:-6%; bottom:-6%; right:-2%; width:44%; z-index:0;
  background-image:var(--hero-bg); background-size:cover; background-position:60% center;
  filter:grayscale(1) sepia(1) hue-rotate(168deg) saturate(3.2) brightness(1.05) contrast(1.02); opacity:.18;
  -webkit-mask-image:radial-gradient(120% 100% at 80% 50%,#000,transparent 72%); mask-image:radial-gradient(120% 100% at 80% 50%,#000,transparent 72%);
  transform:translate3d(calc(var(--px)*-4px),0,0) scale(1.02); transition:transform .9s cubic-bezier(.2,.85,.25,1);
  animation:plhFanIn 1.4s cubic-bezier(.16,1,.3,1) both;
}
@keyframes plhFanIn{ 0%{opacity:0; transform:scale(1.08);} 100%{opacity:.18; transform:scale(1.02);} }

.syn-pl-hero__inner{
  position:relative; z-index:4; height:100%;
  max-width:1440px; margin:0 auto; padding:0 clamp(22px,4vw,66px);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); align-items:center; gap:clamp(18px,3.5vw,50px);
}

/* ===== text ===== */
.syn-pl-hero__content{ max-width:540px; }
.plh-logo{ display:block; height:30px; width:auto; margin:0 0 16px; opacity:0; animation:plhClip .7s cubic-bezier(.16,1,.3,1) .15s forwards; filter:drop-shadow(0 1px 0 rgba(255,255,255,.6)); }
@keyframes plhClip{ 0%{opacity:0; clip-path:inset(0 100% 0 0);} 100%{opacity:1; clip-path:inset(0 0 0 0);} }
.plh-eyebrow{ display:inline-flex; align-items:center; gap:10px; font-family:var(--font-mono); font-size:10.5px; font-weight:600; letter-spacing:.30em; text-transform:uppercase; color:var(--muted); margin:0 0 13px; animation:plhUp .7s cubic-bezier(.16,1,.3,1) .3s both; }
.plh-eyebrow i{ width:10px; height:10px; border-radius:3px; background:var(--acc); animation:plhBG 18s ease-in-out infinite; }
.plh-title{ overflow:hidden; margin:0 0 13px; }
.plh-title span{ display:block; font-family:var(--font-display); font-size:clamp(30px,3.5vw,46px); font-weight:800; line-height:1.02; letter-spacing:-.02em; color:var(--ink); text-wrap:balance; animation:plhRise 1s cubic-bezier(.16,1,.3,1) .38s both; }
@keyframes plhRise{ 0%{ transform:translateY(110%); opacity:0;} 60%{opacity:1;} 100%{ transform:translateY(0); opacity:1;} }
.plh-lead{ margin:0 0 18px; max-width:440px; font-size:14.5px; line-height:1.5; color:var(--muted); animation:plhUp .8s cubic-bezier(.16,1,.3,1) .55s both; }
.plh-feats{ list-style:none; margin:0 0 20px; padding:0; display:flex; flex-wrap:wrap; gap:0 14px; animation:plhUp .8s cubic-bezier(.16,1,.3,1) .7s both; }
.plh-feats li{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; color:var(--ink); padding:5px 0; }
.plh-feats li + li{ padding-left:14px; border-left:1px solid var(--line); }
.plh-feats svg{ width:15px; height:15px; color:var(--acc); animation:plhColor 18s ease-in-out infinite; }
.plh-feats svg polyline{ stroke-dasharray:24; stroke-dashoffset:24; animation:plhDraw .5s ease .95s forwards; }
.plh-feats li:nth-child(2) svg polyline{ animation-delay:1.05s; } .plh-feats li:nth-child(3) svg polyline{ animation-delay:1.15s; }
@keyframes plhDraw{ to{ stroke-dashoffset:0; } }
.plh-pro{ position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:12px; padding:11px 18px 11px 11px; border-radius:13px; background:rgba(255,255,255,.85); border:1px solid var(--line); box-shadow:0 12px 30px rgba(44,26,34,.08); backdrop-filter:blur(6px); animation:plhUp .85s cubic-bezier(.16,1,.3,1) .9s both; }
.plh-pro__badge{ flex:none; width:42px; height:42px; border-radius:10px; display:grid; place-items:center; background:var(--acc); color:#fff; font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.06em; animation:plhBG 18s ease-in-out infinite; }
.plh-pro__text{ display:flex; flex-direction:column; gap:1px; }
.plh-pro__text b{ font-size:13.5px; font-weight:800; color:var(--ink); }
.plh-pro__text small{ font-size:12px; color:var(--muted); }
.plh-pro__sheen{ position:absolute; top:0; bottom:0; left:-60%; width:50%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.7),transparent); transform:skewX(-14deg); }
.plh-pro:hover .plh-pro__sheen{ animation:plhSheen .9s ease; }
@keyframes plhSheen{ from{left:-60%;} to{left:120%;} }
/* NEW: meta spec line fills the lower-left void + adds info */
.plh-meta{ display:flex; flex-wrap:wrap; gap:8px 18px; margin:18px 0 0; font-family:var(--font-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); animation:plhUp .9s cubic-bezier(.16,1,.3,1) 1.05s both; }
.plh-meta span{ position:relative; }
.plh-meta span + span::before{ content:"·"; position:absolute; left:-11px; opacity:.5; }

/* ===== paint stage ===== */
.syn-pl-hero__stage{ position:relative; height:100%; }
/* soft matte halo behind the bucket (fills the stage, grounds product) */
.plh-ring{ position:absolute; left:46%; top:50%; width:78%; aspect-ratio:1; transform:translate(-50%,-50%); z-index:0;
  background:radial-gradient(circle, rgba(255,255,255,.7) 0%, rgba(194,77,106,.12) 40%, transparent 66%);
  animation:plhRing 7s ease-in-out infinite; }
@keyframes plhRing{ 0%,100%{ transform:translate(-50%,-50%) scale(.96); opacity:.8;} 50%{ transform:translate(-50%,-50%) scale(1.04); opacity:1;} }

.plh-swatch{ position:absolute; -webkit-mask:var(--brush) center/100% 100% no-repeat; mask:var(--brush) center/100% 100% no-repeat; }
.plh-swatch--back{ left:0; right:24%; top:28%; height:30%; background:#9e3450; opacity:.22; transform:rotate(-4deg); animation:plhSwIn 1s ease .2s both; }
.plh-swatch--mid{ left:8%; right:14%; top:55%; height:26%; background:#d98aa0; opacity:.30; transform:rotate(3deg); animation:plhSwIn 1s ease .32s both; }
.plh-swatch--front{ left:3%; right:18%; top:40%; height:34%; background:var(--acc); animation:plhSwIn 1s cubic-bezier(.16,1,.3,1) .25s both, plhBG 18s ease-in-out infinite; }
@keyframes plhSwIn{ 0%{opacity:0; clip-path:inset(0 100% 0 0);} 100%{opacity:1; clip-path:inset(0 0 0 0);} }

@keyframes plhBG{0%{background-color:#9e3450;}16.67%{background-color:#b83f5d;}33.33%{background-color:#c24d6a;}50%{background-color:#d97a93;}66.67%{background-color:#e3a9b8;}83.33%{background-color:#b0879a;}100%{background-color:#9e3450;}}
@keyframes plhColor{0%{color:#9e3450;}16.67%{color:#b83f5d;}33.33%{color:#c24d6a;}50%{color:#d97a93;}66.67%{color:#e3a9b8;}83.33%{color:#b0879a;}100%{color:#9e3450;}}

.plh-shadow{ position:absolute; left:46%; bottom:13%; width:40%; height:22px; transform:translateX(-50%); background:rgba(44,26,34,.30); filter:blur(18px); border-radius:50%; animation:plhShadow 7s ease-in-out infinite; z-index:1; }
@keyframes plhShadow{ 0%,100%{ transform:translateX(-50%) scale(1); opacity:.42;} 50%{ transform:translateX(-50%) scale(.88); opacity:.3;} }

.plh-product{ position:absolute; inset:0; display:grid; place-items:center; z-index:2;
  transform:perspective(1300px) translate3d(calc(var(--px)*13px),calc(var(--py)*8px),0) rotateY(calc(var(--px)*3deg)) rotateX(calc(var(--py)*-3deg));
  transition:transform .4s cubic-bezier(.25,.9,.3,1); transform-style:preserve-3d; will-change:transform; }
.plh-product__in{ animation:plhProductIn 1.05s cubic-bezier(.16,1,.3,1) .4s both, plhFloat 7s 1.4s ease-in-out infinite; }
.plh-product__in img{ display:block; width:auto; height:auto; max-width:min(400px,42vw); max-height:clamp(330px,42vw,460px); object-fit:contain; filter:drop-shadow(0 26px 30px rgba(44,26,34,.32)); }
@keyframes plhProductIn{ 0%{ opacity:0; transform:translateY(30px) scale(.96);} 100%{ opacity:1; transform:translateY(0) scale(1);} }
@keyframes plhFloat{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-8px);} }

.plh-chips{ position:absolute; right:0; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:9px; z-index:5; animation:plhUp .9s ease 1s both; }
.plh-chips__label{ writing-mode:vertical-rl; transform:rotate(180deg); font-family:var(--font-mono); font-size:9.5px; letter-spacing:.3em; text-transform:uppercase; color:var(--muted); position:absolute; left:-20px; top:50%; translate:0 -50%; }
.plh-chip{ width:26px; height:26px; border-radius:7px; box-shadow:0 0 0 1px rgba(255,255,255,.6), 0 4px 10px rgba(44,26,34,.12); animation:plhScan 6s ease-in-out infinite; }
.plh-chip:nth-child(1){background:#9e3450; animation-delay:0s}
.plh-chip:nth-child(2){background:#b83f5d; animation-delay:.5s}
.plh-chip:nth-child(3){background:#c24d6a; animation-delay:1s}
.plh-chip:nth-child(4){background:#d97a93; animation-delay:1.5s}
.plh-chip:nth-child(5){background:#e3a9b8; animation-delay:2s}
.plh-chip:nth-child(6){background:#b0879a; animation-delay:2.5s}
@keyframes plhScan{ 0%,72%,100%{ transform:scale(1); box-shadow:0 0 0 1px rgba(255,255,255,.6),0 4px 10px rgba(44,26,34,.12);} 12%{ transform:scale(1.26); box-shadow:0 0 0 2px #fff,0 8px 18px rgba(44,26,34,.26);} }

@keyframes plhUp{ 0%{ opacity:0; transform:translateY(14px);} 100%{ opacity:1; transform:translateY(0);} }

/* ===== MOBILE (hero) ===== */
@media (max-width:920px){
  .syn-pl-hero{ height:auto; }
  .syn-pl-hero__mark{ font-size:120px; right:-2%; bottom:auto; top:6px; opacity:.5; }
  .syn-pl-hero__fan{ width:70%; opacity:.12; top:0; bottom:auto; height:260px; mask-image:radial-gradient(120% 100% at 70% 30%,#000,transparent 70%); }
  .syn-pl-hero__inner{ grid-template-columns:1fr; padding:24px 20px 30px; gap:6px; }
  .syn-pl-hero__content{ order:2; max-width:none; }
  .syn-pl-hero__stage{ order:1; height:280px; }
  .plh-ring{ left:50%; width:300px; }
  .plh-swatch--back,.plh-swatch--mid{ display:none; }
  .plh-swatch--front{ left:8%; right:8%; top:46%; height:120px; }
  .plh-chips{ flex-direction:row; right:auto; left:50%; top:auto; bottom:6px; transform:translateX(-50%); gap:7px; }
  .plh-chips__label{ display:none; }
  .plh-chip{ width:20px; height:20px; }
  .plh-product__in img{ max-width:250px; max-height:250px; }
  .plh-title span{ font-size:clamp(28px,8.4vw,40px); }
  .plh-lead{ font-size:14px; }
  .plh-pro{ width:100%; }
  .plh-meta{ font-size:9.5px; gap:6px 14px; }
}
@media (max-width:480px){
  .syn-pl-hero__stage{ height:240px; }
  .plh-product__in img{ max-width:210px; max-height:210px; }
  .plh-ring{ width:240px; }
}

/* ===== reduced motion ===== */
@media (prefers-reduced-motion:reduce){
  .syn-pl-hero *{ animation:none !important; transition:none !important; }
  .plh-swatch--front{ clip-path:none; opacity:1; background:#c24d6a; }
  .plh-eyebrow i,.plh-pro__badge{ background:#c24d6a; } .plh-feats svg{ color:#c24d6a; }
  .plh-logo,.plh-title span,.plh-eyebrow,.plh-lead,.plh-feats,.plh-pro,.plh-meta,.plh-product__in,.syn-pl-hero__fan,.plh-chips{ opacity:1; transform:none; clip-path:none; }
  .plh-feats svg polyline{ stroke-dashoffset:0; }
}


/* ===== Polisan: contained card + fan wash + text logo ===== */
.syn-pl-hero{ width:100%; margin-left:0; border-radius:24px; }
.syn-pl-hero__fan{ background-image:radial-gradient(120% 100% at 80% 45%, #f6d3e0 0%, #fbe9f0 45%, transparent 75%) !important; filter:none !important; opacity:.7 !important; }
.syn-pl-hero .plh-logo-txt{ font-family:"Unbounded",sans-serif; font-weight:800; font-size:19px; letter-spacing:-.02em; color:#2c1a22; margin:0 0 14px; }
.syn-pl-hero .plh-logo-txt b{ color:#c24d6a; }
/* primers: drop decorative colour swatches/chips */
.syn-pl-hero--primer .plh-swatch, .syn-pl-hero--primer .plh-chips{ display:none !important; }

/* ===== Polisan: "Про фарбу" tech section ===== */
.syn-pl-tech{ margin:22px 0 6px; }
.syn-pl-tech__head{ font-family:"Unbounded",sans-serif; font-weight:800; font-size:clamp(20px,2.4vw,28px); letter-spacing:-.02em; color:#2c1a22; margin:0 0 14px; }
.syn-pl-tech__head span{ display:block; font-family:"JetBrains Mono",monospace; font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:#c24d6a; margin-bottom:6px; }
.syn-pl-tech__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.syn-pl-tech__card{ padding:18px 20px; border:1px solid rgba(44,26,34,.10); border-radius:16px; background:linear-gradient(180deg,#ffffff,#fdf4f7); }
.syn-pl-tech__card .k{ font-family:"JetBrains Mono",monospace; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:#a98794; }
.syn-pl-tech__card .v{ font-family:"Unbounded",sans-serif; font-weight:700; font-size:16.5px; letter-spacing:-.02em; color:#2c1a22; margin-top:7px; }
@media (max-width:820px){ .syn-pl-tech__grid{ grid-template-columns:repeat(2,1fr); } }

/* ============ Polisan палітра (Polisan / RAL / NCS) ============ */
.syn-pl-palette-wrap{ width:100%; margin:26px 0 0; display:grid; grid-template-columns:1.05fr .95fr; gap:22px; align-items:start; font-family:"Onest",sans-serif; color:#2c1a22; }
.syn-pl-pcol{ background:linear-gradient(180deg,#ffffff,#fdf2f5); border:1px solid rgba(44,26,34,.12); border-radius:22px; padding:22px; }
.syn-pl-headline{ display:flex; align-items:flex-end; justify-content:space-between; gap:14px; margin-bottom:16px; flex-wrap:wrap; }
.syn-pl-headline span{ font-family:"JetBrains Mono",monospace; font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#9e3450; }
.syn-pl-headline h2{ font-family:"Unbounded",sans-serif; font-weight:800; letter-spacing:-.03em; font-size:clamp(20px,2.4vw,28px); margin:5px 0 0; color:#2c1a22; }
.syn-pl-scene-tabs{ display:inline-flex; gap:5px; background:#f8e7ed; padding:5px; border-radius:11px; }
.syn-pl-scene-tabs button{ border:0; background:transparent; font:inherit; font-weight:600; font-size:13px; color:#8a6b76; padding:7px 14px; border-radius:8px; cursor:pointer; }
.syn-pl-scene-tabs button.on{ background:#fff; color:#2c1a22; box-shadow:0 2px 8px rgba(44,26,34,.08); }
.syn-pl-scene{ position:relative; border-radius:16px; overflow:hidden; border:1px solid rgba(44,26,34,.12); aspect-ratio:16/10; background:#eee; }
.syn-pl-scene img{ position:absolute; inset:0; width:100%!important; height:100%!important; max-width:none!important; object-fit:cover; transition:background-color .3s; }
.syn-pl-scene img.hide{ display:none; }
.syn-pl-muted{ font-size:12.5px; color:#8a6b76; margin-top:10px; }
.syn-pl-selbar{ display:flex; align-items:center; gap:12px; margin-top:14px; padding:12px 14px; border:1px solid rgba(44,26,34,.12); border-radius:14px; background:#fff; }
.syn-pl-selbar i{ width:42px; height:42px; border-radius:10px; border:1px solid rgba(44,26,34,.12); flex:none; transition:background-color .3s; }
.syn-pl-selbar small{ display:block; font-family:"JetBrains Mono",monospace; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:#8a6b76; }
.syn-pl-selbar b{ font-family:"Unbounded",sans-serif; font-size:14px; }
.syn-pl-coll{ display:flex; gap:8px; margin-bottom:16px; }
.syn-pl-coll button{ flex:1; border:1px solid rgba(44,26,34,.12); background:#fff; font:inherit; font-weight:700; font-size:14px; color:#2c1a22; padding:11px; border-radius:13px; cursor:pointer; font-family:"Unbounded",sans-serif; letter-spacing:-.01em; }
.syn-pl-coll button.on{ background:#c24d6a; color:#fff; border-color:#c24d6a; }
.syn-pl-search{ border:1px solid rgba(44,26,34,.12); border-radius:11px; padding:9px 13px; font:inherit; font-size:13px; width:170px; background:#fff; }
.syn-pl-search:focus{ outline:none; border-color:#c24d6a; box-shadow:0 0 0 3px rgba(194,77,106,.14); }
.syn-pl-dots{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:16px; }
.syn-pl-dots button{ display:inline-flex; align-items:center; gap:7px; border:1px solid rgba(44,26,34,.12); background:#fff; font:inherit; font-weight:600; font-size:12.5px; color:#2c1a22; padding:6px 12px 6px 7px; border-radius:999px; cursor:pointer; }
.syn-pl-dots button .c{ width:15px; height:15px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); }
.syn-pl-dots button.on{ border-color:#c24d6a; box-shadow:0 0 0 3px rgba(194,77,106,.14); }
.syn-pl-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(44px,1fr)); gap:8px; max-height:430px; overflow:auto; padding-right:4px; }
.syn-pl-sw{ aspect-ratio:1; border-radius:10px; cursor:pointer; border:2px solid transparent; box-shadow:inset 0 0 0 1px rgba(0,0,0,.06); transition:transform .1s,border-color .1s; }
.syn-pl-sw:hover{ transform:translateY(-2px); }
.syn-pl-sw.sel{ border-color:#fff; box-shadow:0 0 0 2px #c24d6a,0 6px 14px rgba(44,26,34,.18); }
.syn-pl-empty{ color:#8a6b76; font-size:13px; padding:10px; }
.syn-pl-ncsnote{ font-size:12px; color:#8a6b76; margin-top:12px; display:none; }
@media (max-width:880px){ .syn-pl-palette-wrap{ grid-template-columns:1fr; } }

/* ============================================================
   SYN POLISAN — Документи + peony reskin цілісної сторінки (v410)
   ============================================================ */
.syn-pl-docs{ max-width:1200px; margin:18px auto 0; padding:22px 24px;
  background:linear-gradient(180deg,#fff,#fdf2f5); border:1px solid rgba(44,26,34,.12); border-radius:22px; }
.syn-pl-docs__head{ font-family:"Unbounded",sans-serif; font-weight:800; letter-spacing:-.02em; font-size:20px; color:#2c1a22; margin-bottom:14px; }
.syn-pl-docs__head span{ display:block; font-family:"JetBrains Mono",monospace; font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:#9e3450; margin-bottom:4px; }
.syn-pl-docs__row{ display:flex; flex-wrap:wrap; gap:12px; }
.syn-pl-doc{ display:flex; align-items:center; gap:13px; flex:1 1 280px; text-decoration:none;
  border:1px solid rgba(44,26,34,.12); border-radius:14px; padding:15px 17px; background:#fff; color:#2c1a22; transition:border-color .15s, transform .1s, box-shadow .15s; }
.syn-pl-doc:hover{ border-color:#c24d6a; transform:translateY(-1px); box-shadow:0 8px 20px rgba(158,52,80,.12); }
.syn-pl-doc__ic{ flex:none; width:42px; height:42px; border-radius:11px; background:#f8e7ed; display:flex; align-items:center; justify-content:center; color:#9e3450; }
.syn-pl-doc__ic svg{ width:20px; height:20px; }
.syn-pl-doc__tx{ flex:1; min-width:0; }
.syn-pl-doc__tx b{ display:block; font-family:"Unbounded",sans-serif; font-weight:700; font-size:14px; letter-spacing:-.01em; }
.syn-pl-doc__tx small{ color:#8a6b76; font-size:12px; }
.syn-pl-doc__dl{ flex:none; color:#c24d6a; }
.syn-pl-doc__dl svg{ width:18px; height:18px; }

/* ---- peony reskin: нижня карточка під hero (тільки кольори/типографіка) ---- */
.syn-pl-page{ --syn-pe:#c24d6a; --syn-pe-d:#9e3450; --syn-pe-paper:#fdf2f5; --syn-pe-paper2:#f8e7ed; --syn-pe-ink:#2c1a22; --syn-pe-muted:#8a6b76; }
.syn-pl-page .syn-product-title{ font-family:"Unbounded",sans-serif; letter-spacing:-.02em; color:var(--syn-pe-ink); }
.syn-pl-page .content-block{ background:linear-gradient(180deg,#ffffff,var(--syn-pe-paper)); border-color:rgba(44,26,34,.10); }
.syn-pl-page .ds-product-main-price .ds-price-new,
.syn-pl-page .ds-price-new.dark-text{ color:#34121f; font-family:"Unbounded",sans-serif; letter-spacing:-.02em; }
.syn-pl-page .ds-price-new.red-text,
.syn-pl-page .red-text{ color:var(--syn-pe-d) !important; }
.syn-pl-page .blue-link,.syn-pl-page a.blue-link{ color:var(--syn-pe-d); }
/* cart button -> peony */
.syn-pl-page #button-cart{ background:linear-gradient(180deg,#c24d6a,#9e3450) !important; border:0 !important; box-shadow:0 10px 24px rgba(158,52,80,.30); }
.syn-pl-page #button-cart:hover{ filter:brightness(1.05); }
/* one-click + outline buttons */
.syn-pl-page .button-outline-primary,
.syn-pl-page .ds-product-one-click-btn{ border-color:var(--syn-pe) !important; color:var(--syn-pe-d) !important; }
.syn-pl-page .ds-product-one-click-btn svg path{ fill:var(--syn-pe-d); }
/* quantity box accent */
.syn-pl-page .ds-module-quantity{ border:1px solid rgba(44,26,34,.12); }
/* brand-var driven widgets */
.syn-pl-page .syn-fomo-inline{ --brand-fomo:#c24d6a !important; }
.syn-pl-page .syn-acc-v5-wrapper{ --brand-color:#9e3450 !important; }
.syn-pl-page .syn-fomo-num,.syn-pl-page .syn-fomo-inline b{ color:var(--syn-pe) !important; }
/* capsule "готовий до онлайн-замовлення" */
.syn-pl-page .syn-capsule-status.is-store{ background:var(--syn-pe-paper2); border-color:rgba(158,52,80,.2); color:var(--syn-pe-d); }
.syn-pl-page .syn-capsule-icon{ color:var(--syn-pe-d); }
/* found cheaper */
.syn-pl-page .syn-found-cheaper-btn{ color:var(--syn-pe-muted); }
.syn-pl-page .syn-found-cheaper-btn:hover{ color:var(--syn-pe-d); }
/* delivery accordion titles + pickup accents */
.syn-pl-page .syn-acc-v5-title svg{ color:var(--syn-pe); }
.syn-pl-page .syn-pickup-details{ border-left-color:var(--syn-pe) !important; }
.syn-pl-page .syn-dlv-icon[style]{ color:var(--syn-pe) !important; }
.syn-pl-page .syn-route-btn{ border-color:rgba(158,52,80,.25); color:var(--syn-pe-d); }
/* free tag + payment ticks stay green (semantic) */
.syn-pl-page .ds-product-main-attributes-item{ border-color:rgba(44,26,34,.10); }
/* product stickers -> peony tone (keep "Хіт" readable) */
.syn-pl-page .ds-module-sticker-stickers_popular{ background:linear-gradient(135deg,#c24d6a,#9e3450); color:#fff; }
/* upsell label */
.syn-pl-page #syn-upsell-col span{ color:var(--syn-pe-muted); }