/* === Webfont (logo-like) === */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800&display=swap');


:root{
  --pg-radius: 18px;
  --pg-shadow: 0 18px 40px rgba(0,0,0,.10);
  --pg-border: 1px solid rgba(255,255,255,.55);
  --pg-text: rgba(20,20,20,.85);
  --pg-muted: rgba(20,20,20,.64);
  --pg-glass: rgba(255,255,255,.72);
  --pg-glass-strong: rgba(255,255,255,.84);
  --pg-bg-image: none;
  --pg-cols-desktop: 3;
  --pg-cols-tablet: 2;
}
*{ box-sizing:border-box; }
html, body{ height:100%; }
body.pg-profigroup{
  margin:0;
  color:var(--pg-text);
  background:
    radial-gradient(1200px 700px at 15% 5%, rgba(255,255,255,.70), rgba(255,255,255,0) 60%),
    radial-gradient(900px 600px at 85% 10%, rgba(0,0,0,.06), rgba(0,0,0,0) 55%),
    var(--pg-bg-image);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.pg-container{ width:min(1180px, calc(100% - 44px)); margin:0 auto; }
a{ color: rgba(0,0,0,.78); text-decoration:none; }
a:hover{ color: rgba(0,0,0,.98); text-decoration:underline; }

/* hide skip link unless focused */
.pg-skip{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.pg-skip:focus{ left:18px; top:12px; width:auto; height:auto; padding:10px 12px; background:#fff; border-radius:10px; box-shadow:var(--pg-shadow); z-index:9999; }

.pg-header{ padding:26px 0 8px; }
.pg-header__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}

.pg-brand__link{ display:inline-block; }

.pg-brand{background:none;border:0;box-shadow:none;padding:0;}
.pg-brand__link{ display:inline-block; }
.pg-brand__logo{max-height:140px;filter:none;}
.pg-brand__tagline{
  margin-top:12px;
  font-size:24px;
  color:var(--pg-muted);
  line-height:1.25;
}




/* --- Menu toggler / collapsible artifacts (Joomla menu module) --- */
.navbar-toggler,
.navbar-toggle,
.toggler,
.mod-menu__toggle,
button.navbar-toggler{
  display:none !important;
}
.pg-nav{ padding-top:10px; }
.pg-nav ul{ margin:0; padding:0; list-style:none; display:flex; gap:22px; justify-content:flex-end; flex-wrap:wrap; }
.pg-nav a{ font-size:22px; font-weight:500; text-decoration:none; }
.pg-nav a:hover{ text-decoration:underline; }
.pg-nav--dark a{ color:rgba(255,255,255,.86); }
.pg-nav--dark a:hover{ color:rgba(255,255,255,1); }
.pg-nav--light a{ color:rgba(0,0,0,.72); }
.pg-nav--light a:hover{ color:rgba(0,0,0,.98); }

.pg-main{ padding: 14px 0 36px; }
.pg-sidebar{ min-width:0; }

.pg-content{ display:grid; gap:22px; padding-top:22px; align-items:start; }
.pg-content--no-sidebars{ grid-template-columns: minmax(0, 1fr); }
.pg-content--left{ grid-template-columns: 280px minmax(0, 1fr); }
.pg-content--right{ grid-template-columns: minmax(0, 1fr) 280px; }
.pg-content--both{ grid-template-columns: 280px minmax(0, 1fr) 280px; }
.pg-sidebar{ min-width:0; }
.pg-component{ min-width:0; }
.pg-component{ min-width:0; }

.pg-card--glass, .pg-tile{
  padding: 20px 22px 18px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  text-align:center;
  gap: 12px;
  min-height: 170px;

  background: rgba(255,255,255,.72);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 14px 34px rgba(0,0,0,.10);
  border-radius: var(--pg-radius);
  opacity: 1;

  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.pg-text-block{ padding:18px; margin: 14px 0 18px; }
.pg-footer{ padding:18px 0 30px; }
.pg-footer__inner{ display:grid; gap:12px; justify-items:center; }
.pg-footer__copy{ color:var(--pg-muted); }

/* === Styled main article title like company label === */
.pg-page-title{
  position: relative;
  display: inline-block;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #111;
  margin: 6px auto 18px;
  text-align: center;
  padding: 0 28px;
  text-shadow: 0 1px 0 rgba(255,255,255,.9), 0 6px 12px rgba(0,0,0,.12);
}
.pg-article__header{ text-align:center; }
.pg-page-title::before,
.pg-page-title::after{
  content:"";
  position:absolute;
  top:50%;
  width:140px;
  height:2px;
  transform: translateY(-50%);
  background:linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,.22), rgba(0,0,0,0));
}
.pg-page-title::before{ right:100%; margin-right: 8px; }
.pg-page-title::after{ left:100%; margin-left: 8px; }
@media (max-width: 900px){
  .pg-page-title{ font-size: 24px; padding: 0 10px; }
  .pg-page-title::before,
  .pg-page-title::after{ width: 64px; }
}
@media (max-width: 640px){
  .pg-page-title::before,
  .pg-page-title::after{ display:none; }
}
.pg-page-subtitle{ font-size:24px; font-weight:600; margin: 0 0 14px; }

.pg-grid--catalog{ display:grid; grid-template-columns:repeat(var(--pg-cols-desktop), minmax(0,1fr)); gap:22px; }
.pg-tile{
  padding: 20px 22px 18px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  text-align:center;
  gap: 12px;
  min-height: 170px;

  background: rgba(255,255,255,.72);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 14px 34px rgba(0,0,0,.10);
  border-radius: var(--pg-radius);
  opacity: 1;

  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.pg-tile--link{ display:block; color:inherit; text-decoration:none; }
.pg-tile--link:hover{ text-decoration:none; }
.pg-tile:hover{ transform:translateY(-2px); box-shadow:0 22px 46px rgba(0,0,0,.14); background:var(--pg-glass-strong); }
.pg-tile__icon{
  max-width: 82%;
  max-height: 78px;
  width:auto;
  height:auto;
  object-fit: contain;
  opacity: .92;
  display:block;
}
.pg-tile__icon--placeholder{
  width: 110px;
  height: 78px;
  border-radius: 14px;
  background: rgba(0,0,0,.06);
  border: 1px dashed rgba(0,0,0,.18);
}

.pg-tile__body{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap: 12px;
}
.pg-tile__media{
  width:100%;
  height: 86px; /* fixed icon zone */
  display:flex;
  align-items:center;
  justify-content:center;
}
.pg-tile__title{
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  margin: 0;
  line-height: 1.15;
  min-height: calc(1.15em * 2); /* reserve 2 lines */
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 0 6px;
}

.pg-articles{ margin-top:22px; }
.pg-articles-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:22px; }
.pg-article-card{ overflow:hidden; }
.pg-article-card__media img{ width:100%; height:220px; object-fit:cover; display:block; opacity:.92; }
.pg-article-card__body{ padding:18px; }
.pg-article-card__title{ font-size:20px; margin:0 0 10px; line-height:1.25; }
.pg-article-card__text{ color:var(--pg-muted); font-size:14px; line-height:1.5; }
.pg-article-card__actions{ margin-top:14px; }

.pg-article-single{ padding:26px; }
.pg-article__figure img{ width:100%; height:auto; border-radius:14px; margin:14px 0 18px; }
.pg-article__content{ font-size:16px; line-height:1.75; }

.pg-btn{
  display:inline-block;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.15);
  background:rgba(255,255,255,.75);
  text-decoration:none !important;
}
.pg-btn:hover{ background:rgba(255,255,255,.90); }
.pg-btn--ghost{ background:transparent; }

.pg-muted{ color:var(--pg-muted); }
.pg-h1{ font-size:28px; margin:0 0 10px; }

@media (max-width:1200px){
  .pg-grid--catalog{ grid-template-columns:repeat(var(--pg-cols-tablet), minmax(0,1fr)); }
  
  .pg-sidebar{ display:none; }
  .pg-content{ grid-template-columns: 1fr !important; }
  .pg-articles-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:768px){
  .pg-header__row{ flex-direction:column; align-items:center; }
  .pg-nav ul{ justify-content:flex-start; gap:14px; }
  .pg-nav a{ font-size:18px; }
  
  .pg-grid--catalog{ grid-template-columns:1fr; }
  body.pg-profigroup{ background-attachment:scroll; }
  .pg-articles-grid{ grid-template-columns:1fr; }
  .pg-article-single{ padding:18px; }
  .pg-article-card__media img{ height:190px; }
}


/* ===== Меню: точки-разделители + линия (v1.4.0) ===== */
/* Важно: в базовых стилях было text-decoration: underline на hover — убираем, чтобы не было двойной линии */
.pg-nav a:hover,
.pg-nav ul li a:hover{
  text-decoration: none !important;
}

/* Разделители ставим как ::before у каждого LI, кроме первого (так надежнее, чем ::after) */
.pg-nav ul,
.pg-menu ul{
  display:flex;
  align-items:center;
  gap: 0;
  margin:0;
  padding:0;
  list-style:none;
  flex-wrap:wrap;
}

.pg-nav ul li,
.pg-menu ul li{
  position:relative;
  padding: 0 10px;
}

/* точка перед пунктом (кроме первого) */
.pg-nav ul li + li::before,


/* Ссылка */
.pg-nav ul li a,
.pg-menu ul li a{
  position:relative;
  display:inline-block;
  padding-bottom: 6px;
  text-decoration:none !important;
}

/* Линия снизу (одна!) */
.pg-nav ul li a::after,
.pg-menu ul li a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:0;
  height:2px;
  background: rgba(0,0,0,.55);
  transition: width .25s ease;
}

.pg-nav ul li a:hover::after,
.pg-menu ul li a:hover::after,
.pg-nav ul li.active a::after,
.pg-menu ul li.active a::after{
  width:100%;
}


/* ===== Меню: точки строго по центру промежутка + линия (v1.4.2) ===== */
/* Реализация: точки рисуются в СЕРЕДИНЕ GAP между пунктами (автоматически). */

.pg-nav ul{
  display:flex;
  align-items:center;
  list-style:none;
  margin:0;
  padding:0;
  flex-wrap:wrap;

  /* расстояние между пунктами меню (между ссылками) */
  column-gap: 32px;  /* можно менять */
  row-gap: 10px;
}

.pg-nav ul li{
  position:relative;
  margin:0;
  padding:0;
}

/* точка-разделитель — в центре промежутка между li */
.pg-nav ul li:not(:last-child)::after{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background: rgba(0,0,0,.6);
  position:absolute;
  right: calc(-32px / 2);     /* половина column-gap */
  top: 50%;
  transform: translate(50%, -50%);
  pointer-events:none;
}

/* убираем стандартное подчёркивание (чтобы не было двойной линии) */
.pg-nav a{
  text-decoration:none !important;
}

/* линия снизу (анимация) */
.pg-nav ul li a{
  position:relative;
  display:inline-block;
  padding-bottom:6px;
}

.pg-nav ul li a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:0;
  height:2px;
  background: rgba(0,0,0,.55);
  transition: width .25s ease;
}

.pg-nav ul li a:hover::after,
.pg-nav ul li.active a::after{
  width:100%;
}

/* Мобильная подстройка */
@media (max-width: 768px){
  .pg-nav ul{
    column-gap: 22px;
  }
  .pg-nav ul li:not(:last-child)::after{
    width:4px;
    height:4px;
    right: calc(-22px / 2);
  }
}

/* ===== Floating Messengers: sketch icons + draw animation + mobile hide + magnetic hover (v1.5.0) ===== */
.pg-float-messengers{
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pg-float-btn{
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: grid;
  place-items: center;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
  will-change: transform;
}

.pg-float-btn:hover{
  box-shadow: 0 18px 44px rgba(0,0,0,.25);
}

.pg-icon{
  width: 30px;
  height: 30px;
  stroke: rgba(60,60,60,.92);
  stroke-width: 2.2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .90;
}

/* Filled MAX badge icon */
.pg-icon-max{
  width: 30px;
  height: 30px;
  display: block;
}
/* MAX (pencil) icon image */
.pg-icon-max-img{
  width: 30px;
  height: 30px;
  display: block;
  object-fit: contain;
  filter: grayscale(100%);
}


.pg-float-tg .pg-icon{ stroke: rgba(42,123,199,.95); }
.pg-float-max .pg-icon{ stroke: rgba(70,70,70,.92); }

/* Draw animation */
.pg-icon path{
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  animation: pgDraw 1.1s ease forwards;
}
.pg-float-btn:nth-child(2) .pg-icon path{ animation-delay: .15s; }

@keyframes pgDraw{
  to { stroke-dashoffset: 0; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .pg-icon path{ animation: none; stroke-dasharray: none; stroke-dashoffset: 0; }
  .pg-float-btn{ transition: none; }
}

/* Hide on mobile */
@media (max-width: 768px){
  .pg-float-messengers{ display:none; }
}

/* ===== Logo responsive (v1.6.0) ===== */
/* Default: уменьшено до ~70% (через max-width) и адаптивно по экрану */
.pg-logo,
.pg-brand img,
.site-branding img{
  width: clamp(180px, 22vw, 520px);
  height: auto;
  max-width: 70%;
  display: block;
}

@media (min-width: 1400px){
  .pg-logo,
  .pg-brand img,
  .site-branding img{
    width: clamp(260px, 26vw, 640px);
    max-width: 70%;
  }
}

@media (max-width: 1024px){
  .pg-logo,
  .pg-brand img,
  .site-branding img{
    width: clamp(160px, 36vw, 420px);
    max-width: 75%;
  }
}

@media (max-width: 600px){
  .pg-logo,
  .pg-brand img,
  .site-branding img{
    width: clamp(140px, 52vw, 320px);
    max-width: 85%;
  }
}

/* ===== Services tiles offset control (v1.6.1) ===== */
:root{
  --pg-tiles-offset: 90px; /* default, overridden from template params */
}

/* Tiles grid wrapper(s) */
.pg-tiles,
.pg-tiles-grid,
.pg-category-tiles,
.pg-services-tiles{
  margin-top: var(--pg-tiles-offset);
}


/* ===== Content offset control (v1.6.2) ===== */
:root{
  --pg-content-offset: 14px; /* tighter top spacing for premium layout */
}
.pg-main{
  padding-top: calc(4px + var(--pg-content-offset));
}

/* Premium top alignment for category/catalog pages */
.pg-content-wrap{
  max-width: 1120px;
  margin: 0 auto;
}

.pg-navtrail{
  margin-bottom: 16px;
}



/* ===== Back button + breadcrumbs bar (v1.6.5) ===== */
.pg-navtrail{
  /* Compact, content-width bar */
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  gap:7px;
  margin: -10px 0 18px;
  width: fit-content;
  max-width: min(100%, 740px);
  padding: 8px 10px;
  border-radius: 18px;
  background: rgba(255,255,255,.76);
  box-shadow: 0 8px 24px rgba(0,0,0,.09);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

@media (max-width: 640px){
  /* On narrow screens let the bar span full width to avoid overflow */
  .pg-navtrail{display:flex; width:100%; justify-content:space-between;}
}
.pg-backbtn{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding: 8px 11px;
  border-radius: 999px;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(0,0,0,.08);
  color: #1c1c1c;
  text-decoration:none;
  font-weight: 700;
  letter-spacing: .01em;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.pg-backbtn:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0,0,0,.12);
  background: rgba(255,255,255,.95);
}
.pg-backbtn:active{ transform: translateY(0); }
.pg-backbtn__icon{
  width: 18px;
  height: 18px;
  display:inline-block;
  border-radius: 50%;
  background: rgba(0,0,0,.06);
  position: relative;
}
.pg-backbtn__icon:before{
  content:"";
  position:absolute;
  left: 6px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-left: 2px solid rgba(0,0,0,.55);
  border-bottom: 2px solid rgba(0,0,0,.55);
  transform: translateY(-50%) rotate(45deg);
}

.pg-breadcrumbs{
  display:flex;
  align-items:center;
  gap: 0;
  list-style:none;
  margin:0;
  padding:0;
  color:#222;
  font-weight: 600;
  font-size: 14px;
}
.pg-breadcrumbs li{
  position:relative;
  padding: 0 10px;
  white-space: nowrap;
}
.pg-breadcrumbs li:first-child{ padding-left: 0; }
.pg-breadcrumbs li:last-child{ padding-right: 0; opacity: .9; }
.pg-breadcrumbs li+li:before{
  content:"•";
  position:absolute;
  left: 0;
  top: 47%;
  transform: translate(-50%,-50%);
  font-size: 18px;
  line-height: 1;
  color: rgba(0,0,0,.55);
}
.pg-breadcrumbs a{
  color: inherit;
  text-decoration:none;
}
.pg-breadcrumbs a:hover{ text-decoration: underline; }

@media (max-width: 700px){
  .pg-navtrail{
    max-width: 100%;
    margin-left: 10px;
    margin-right: 10px;
    padding: 8px 10px;
  }
  .pg-breadcrumbs{ display:none; } /* hide on mobile */
  .pg-backbtn{ width:100%; justify-content:center; }
}

/* =========================
   Contacts (article-only)
   Assign in Contacts menu item:
   - Alternative Layout: contacts
   - Page Class Suffix: pg-contacts (optional)
   ========================= */

.pg-article-contacts {
  /* Same visual width as other single pages (e.g. "О нас").
     The article is rendered inside .pg-container, so we simply take 100% of that width.
     This removes the extra empty area to the right/left.
  */
  width: 100%;
  margin: 0;
}

.pg-contacts-frame {
  position: relative;
  padding: 38px 38px;
  border-radius: 34px;
  overflow: hidden;
}

/* Reserve a little space for the decorative phone image that is anchored
   to the *frame* bottom-right corner (so it doesn't overlap the last rows). */
.pg-article-contacts .pg-contacts-frame {
  padding-bottom: 190px;
}

/* Double border "sketch" look */
.pg-contacts-frame::before,
.pg-contacts-frame::after {
  content: "";
  position: absolute;
  inset: 14px;
  border-radius: 28px;
  pointer-events: none;
}

.pg-contacts-frame::before {
  border: 3px solid rgba(40, 40, 40, 0.20);
}

.pg-contacts-frame::after {
  inset: 22px;
  border-radius: 24px;
  border: 2px solid rgba(40, 40, 40, 0.14);
}

.pg-contacts-header {
  text-align: center;
  margin-bottom: 22px;
}

.pg-contacts-title {
  margin: 0;
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Optional helpers for the content you paste into the Contacts article */
.pg-contacts-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 26px;
  align-items: start;
}

.pg-contacts-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.88)),
    repeating-linear-gradient(-45deg,
      rgba(0,0,0,0.02),
      rgba(0,0,0,0.02) 2px,
      transparent 2px,
      transparent 6px
    );
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  position: relative;
  overflow: hidden; /* keep decorative images inside rounded corners */

  /* Let the decorative image behaviour depend on the *card width*
     (а не от ширины экрана). Это устраняет ситуацию, когда карточка
     узкая, а padding-right рассчитывается в vw и "ломает" текст. */
  container-type: inline-size;
}

/* Optional decorative image inside a Contacts card.
   Usage (inside .pg-contacts-card):
   <div class="pg-contacts-content">...content...</div>
   <img class="pg-contacts-decor" src="..." alt="" loading="lazy"> */
.pg-article-contacts .pg-contacts-content {
  position: relative;
  z-index: 1;
}

/* Decorative image positioning (default: acts like mobile)
   We switch to absolute positioning only when the card is wide enough. */
.pg-article-contacts .pg-contacts-decor {
  position: static;
  display: block;
  margin: 12px 0 0 auto;
  width: min(260px, 70%);
  height: auto;
  pointer-events: none;
  user-select: none;
  z-index: 3;
}

/* If you place a decorative image in the card, add class "pg-contacts-card--decor".
   We reserve space on the right so the image is visually "привязана к плитке",
   а не "живет рядом с текстом" и не ломает переносы. */
.pg-article-contacts .pg-contacts-card.pg-contacts-card--decor .pg-contacts-content {
  padding-right: 0; /* mobile & narrow cards */
}

@container (min-width: 420px) {
  .pg-article-contacts .pg-contacts-decor {
    position: absolute;
    right: 22px;
    bottom: var(--contacts-decor-bottom, 18px);
    width: 260px;
    margin: 0;
  }

  .pg-article-contacts .pg-contacts-card.pg-contacts-card--decor .pg-contacts-content {
    /* Reserve space so the text doesn't collide with the phone image */
    padding-right: 290px;
    padding-bottom: 10px;
  }

}

@container (max-width: 560px) {
  /* On medium cards reserve less space, otherwise the content becomes too narrow */
  .pg-article-contacts .pg-contacts-card.pg-contacts-card--decor .pg-contacts-content {
    padding-right: 220px;
  }

  .pg-article-contacts .pg-contacts-decor {
    width: 210px;
    right: 18px;
    bottom: 16px;
  }
}

@container (min-width: 760px) {
  /* On wide cards the phone should sit confidently in the bottom-right corner */
  .pg-article-contacts .pg-contacts-decor {
    width: 300px;
    right: 26px;
    bottom: 20px;
  }

  .pg-article-contacts .pg-contacts-card.pg-contacts-card--decor .pg-contacts-content {
    padding-right: 330px;
  }
}

/* === Contacts decorative image: anchor to the whole tile (frame) ===
   User requirement: the phone image must sit in the bottom-right corner
   of the *whole* Contacts tile (where the red mark is), not next to text.

   We achieve this by:
   1) Removing positioning context from the card (so it won't capture absolute).
   2) Positioning the image absolutely relative to .pg-contacts-frame.
   3) Keeping a mobile fallback (static) to avoid overlaps on small screens.
*/
.pg-article-contacts .pg-contacts-card.pg-contacts-card--decor { position: static; }

.pg-article-contacts .pg-contacts-frame .pg-contacts-decor {
  position: absolute;
  right: 34px;
  bottom: 26px;
  width: 320px;
  height: auto;
  margin: 0 !important;
  z-index: 4;
}

@media (max-width: 900px) {
  .pg-article-contacts .pg-contacts-frame { padding-bottom: 38px; }
  .pg-article-contacts .pg-contacts-frame .pg-contacts-decor {
    position: static;
    width: min(260px, 70%);
    margin: 12px 0 0 auto !important;
  }
}

/* Keep a small tweak for very narrow viewports (mostly spacing) */
@media (max-width: 700px) {
  .pg-article-contacts .pg-contacts-decor { width: min(220px, 75%); }
}

/* The base template cards are centered; for the Contacts article we want
   a classic left-aligned layout (headings + lists). */
.pg-article-contacts .pg-card--glass,
.pg-article-contacts .pg-contacts-card {
  align-items: stretch;
  text-align: left;
}

/* Keep the main Contacts title centered */
.pg-article-contacts .pg-contacts-title {
  text-align: center;
}

/* Lists on the Contacts page should align left and look clean */
.pg-article-contacts .pg-contacts-body ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pg-article-contacts .pg-contacts-body li {
  margin: 8px 0;
}

/* Optional icons for headings in Contacts article.
   Usage in article HTML: add class "pg-contacts-icon-phone" or
   "pg-contacts-icon-clock" to the needed heading (h2/h3/h4). */
.pg-article-contacts .pg-contacts-icon-phone,
.pg-article-contacts .pg-contacts-icon-clock,
.pg-article-contacts .pg-contacts-icon-chat {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.pg-article-contacts .pg-contacts-icon-phone::before,
.pg-article-contacts .pg-contacts-icon-clock::before,
.pg-article-contacts .pg-contacts-icon-chat::before {
  content: "";
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  opacity: 0.85;
  background: no-repeat center / 18px 18px;
}

/* Icon headings (add these classes to headings in the Contacts article)
   Example in editor: <h3 class="pg-contacts-icon-phone">Телефоны</h3> */
.pg-article-contacts .pg-contacts-icon-phone,
.pg-article-contacts .pg-contacts-icon-clock,
.pg-article-contacts .pg-contacts-icon-chat {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pg-article-contacts .pg-contacts-icon-phone::before,
.pg-article-contacts .pg-contacts-icon-clock::before,
.pg-article-contacts .pg-contacts-icon-chat::before {
  content: "";
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  opacity: 0.85;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
}

.pg-article-contacts .pg-contacts-icon-phone::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.86 19.86 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.86 19.86 0 0 1 2.08 4.18 2 2 0 0 1 4.06 2h3a2 2 0 0 1 2 1.72c.12.86.3 1.7.57 2.5a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.58-1.09a2 2 0 0 1 2.11-.45c.8.27 1.64.45 2.5.57A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}

.pg-article-contacts .pg-contacts-icon-clock::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E");
}

.pg-article-contacts .pg-contacts-icon-chat::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a4 4 0 0 1-4 4H8l-5 3V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4z'/%3E%3C/svg%3E");
}

/* Row-level icons (address + messengers) */
.pg-article-contacts .pg-contacts-row {
  position: relative;
  padding-left: 30px;
}

.pg-article-contacts .pg-contacts-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 18px;
  height: 18px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
}

.pg-article-contacts .pg-contacts-row--address::before {
  opacity: 0.85;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10a8 8 0 0 0-16 0c0 6 8 10 8 10z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}

.pg-article-contacts .pg-contacts-row--telegram::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='%2326A5E4' d='M22 3.1a1.4 1.4 0 0 0-1.5-.2L2.6 10.2a1.3 1.3 0 0 0 .1 2.5l4.8 1.5 1.8 5.7c.2.7 1 .9 1.6.5l2.7-2 4.6 3.4c.6.4 1.4.1 1.6-.6l3.2-16.7c.1-.5-.1-1.1-.6-1.4zM9.1 13.6l9.9-6.2c.2-.1.4.2.2.4l-8.2 7.5-.3 3.8-1.7-5.6z'/%3E%3C/svg%3E");
}

.pg-article-contacts .pg-contacts-row--max::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='%23333' d='M4 4h16a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H9l-5 4v-4H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z'/%3E%3C/svg%3E");
  opacity: 0.85;
}

.pg-contacts-map {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.08);
}

.pg-contacts-map iframe {
  display: block;
  width: 100%;
  height: 260px;
  border: 0;
}

.pg-contacts-list {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

@media (max-width: 900px) {
  .pg-article-contacts {
    width: 100%;
  }
  .pg-contacts-frame {
    padding: 22px 18px;
    border-radius: 26px;
  }
  .pg-contacts-frame::before { inset: 10px; border-radius: 20px; }
  .pg-contacts-frame::after { inset: 16px; border-radius: 18px; }
  .pg-contacts-grid {
    grid-template-columns: 1fr;
  }
  .pg-contacts-map iframe { height: 220px; }
}



/* ===============================
   CONTACTS — REMOVE PANELS (tiles)
   Applied to the Contacts article layout regardless of Page Class Suffix.
   =============================== */
.pg-article-contacts .pg-contacts-card{
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* keep grid top aligned */
.pg-article-contacts .pg-contacts-grid{
  align-items: start;
}

/* === Contacts: keep card same width as pages, but allow real content === */
.pg-article-contacts .pg-contacts-frame.pg-card--glass{
  display:block;          /* disable flex-centering from .pg-card--glass */
  min-height:auto;        /* remove tile min-height */
  text-align:left;
}

/* === CONTACTS DECOR SCALE 10% === */
.pg-article-contacts {
    position: relative;
}

.pg-article-contacts .pg-contacts-decor {
    transform: scale(0.1);
    transform-origin: bottom right;
}

@media (max-width: 900px) {
    .pg-article-contacts .pg-contacts-decor {
        transform: scale(0.2);
    }
}

/* === CONTACTS DECOR SCALE 25% === */
.pg-article-contacts .pg-contacts-decor {
    transform: scale(0.25);
    transform-origin: bottom right;
}

@media (max-width: 900px) {
    .pg-article-contacts .pg-contacts-decor {
        transform: scale(0.35);
    }
}

/* === CONTACTS DECOR SCALE 50% === */
.pg-article-contacts .pg-contacts-decor {
    transform: scale(0.5);
    transform-origin: bottom right;
}

@media (max-width: 900px) {
    .pg-article-contacts .pg-contacts-decor {
        transform: scale(0.6);
    }
}

/* === CONTACTS TILE HEIGHT FIX === */
/* Плитка заканчивается по контенту, а не по декору */
.pg-article-contacts {
    padding-bottom: 40px;
}

/* Декор (телефон) привязываем к нижнему краю контента */
.pg-article-contacts .pg-contacts-decor {
    bottom: 40px;
}


/* === CONTACTS: decor position like screenshot + tile bottom up === */
/* 1) убираем лишнюю высоту снизу: плитка заканчивается по контенту */
.pg-article-contacts{
  padding-bottom: 0 !important;
}

/* если высоту даёт сетка/обёртка — сбрасываем */
.pg-article-contacts .pg-contacts-grid,
.pg-article-contacts .pg-contacts-body{
  padding-bottom: 0 !important;
  min-height: 0 !important;
  height: auto !important;
}

/* 2) фиксируем декор как на скрине */
.pg-article-contacts .pg-contacts-decor{
  position: absolute !important;
  right: 4px !important;
  bottom: 180px !important;  /* как на твоём DevTools */
  width: 420px !important;   /* как на твоём DevTools */
  height: auto !important;
  margin: 0 !important;
  z-index: 4 !important;
  transform-origin: bottom right;
}

/* 3) масштаб 50% (если уже стоит — это правило просто закрепит) */
.pg-article-contacts .pg-contacts-decor{
  transform: scale(0.5) !important;
}

@media (max-width: 900px){
  /* на мобилке чуть крупнее, чтобы читалось */
  .pg-article-contacts .pg-contacts-decor{
    bottom: 24px !important;
    right: 12px !important;
    width: 320px !important;
    transform: scale(0.6) !important;
  }
}



/* === CONTACTS TILE: рамка и нижний край по контенту === */
.pg-article-contacts{
  height: auto !important;
  padding-bottom: 0 !important;
  display: block;
}

/* Рамка (до/после) не должна уезжать ниже контента */
.pg-article-contacts::before,
.pg-article-contacts::after{
  bottom: 0 !important;
  height: auto !important;
}

/* На всякий случай убираем внутренние "хвосты" */
.pg-article-contacts .pg-contacts-grid,
.pg-article-contacts .pg-contacts-body{
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
  min-height: 0 !important;
}



/* === FIX: contacts tile bottom should end at content (no reserved space) ===
   Причина "хвоста" снизу была в .pg-contacts-frame { padding-bottom: 190px; }
   (резерв под декор). Мы убираем резерв и оставляем обычный нижний паддинг.
*/
.pg-article-contacts .pg-contacts-frame{
  padding-bottom: 38px !important; /* как сверху/сбоку у фрейма */
}

/* На всякий случай убираем возможные min-height у сетки контактов внутри контента */
.pg-article-contacts .pg-contacts-grid{
  min-height: 0 !important;
  height: auto !important;
}

/* Декор остаётся абсолютным и не должен влиять на высоту */
.pg-article-contacts .pg-contacts-decor{
  position: absolute !important;
}



/* === CONTACTS: tune decor position after removing extra bottom padding ===
   Раньше декор был поднят (bottom:180px) потому что плитка была выше из-за padding-bottom:190px.
   Теперь плитка по контенту, поэтому возвращаем декор ближе к низу.
*/
.pg-article-contacts .pg-contacts-decor{
  bottom: 38px !important; /* держим по нижнему паддингу фрейма */
  right: 12px !important;
}

/* Если нужно ещё на пару пикселей — меняем только bottom */



/* =======================================================================
   CONTACTS ONLY: "pencil retouch" card style + divider line under title
   Scoped strictly to Contacts article by .pg-article-contacts
   ======================================================================= */

/* Card "paper" feel */
.pg-article-contacts .pg-contacts-frame{
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,0.62);
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
  box-shadow:
    0 18px 40px rgba(0,0,0,0.10),
    inset 0 0 0 1px rgba(0,0,0,0.06),
    inset 0 10px 26px rgba(0,0,0,0.05);
}

/* subtle "paper grain" without images */
.pg-article-contacts .pg-contacts-frame::before{
  content:"";
  position:absolute;
  inset: 10px;
  border-radius: 22px;
  border: 2px solid rgba(0,0,0,0.20);
  pointer-events:none;
  filter: blur(0.15px);
  opacity: 0.85;
}

/* outer soft pencil contour */
.pg-article-contacts .pg-contacts-frame::after{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: 26px;
  border: 3px solid rgba(0,0,0,0.18);
  pointer-events:none;
  opacity: 0.65;
}

/* Extra hand-drawn vibe: faint hatch on edges */
.pg-article-contacts .pg-contacts-frame{
  background-image: none;
background-blend-mode: multiply;
}

/* Title divider line (like reference) */
.pg-article-contacts .pg-contacts-header{
  position: relative;
  padding-bottom: 18px;
  margin-bottom: 22px;
}

.pg-article-contacts .pg-contacts-header::after{
  content:"";
  position:absolute;
  left: 8%;
  right: 8%;
  bottom: 0;
  height: 2px;
  background: linear-gradient(
    to right,
    rgba(0,0,0,0),
    rgba(0,0,0,0.22),
    rgba(0,0,0,0.08),
    rgba(0,0,0,0.22),
    rgba(0,0,0,0)
  );
  border-radius: 999px;
  filter: blur(0.2px);
  opacity: 0.9;
}

/* Keep decor above paper, below text if needed */
.pg-article-contacts .pg-contacts-decor{
  z-index: 3;
}

/* Ensure content stays above frame pseudo-elements */
.pg-article-contacts .pg-contacts-header,
.pg-article-contacts .pg-contacts-body{
  position: relative;
  z-index: 2;
}



/* === CONTACTS: refine pencil edge to match design === */

/* softer, uneven pencil edge */
.pg-article-contacts .pg-contacts-frame::after{
  border-width: 2px !important;
  border-color: rgba(0,0,0,0.22) !important;
  border-radius: 28px !important;
  filter: blur(0.4px);
  opacity: 0.75;
}

/* inner contour more subtle */
.pg-article-contacts .pg-contacts-frame::before{
  inset: 14px !important;
  border-width: 1px !important;
  border-color: rgba(0,0,0,0.18) !important;
  border-radius: 22px !important;
  opacity: 0.7;
}

/* slight irregularity via shadow to break perfect geometry */
.pg-article-contacts .pg-contacts-frame{
  box-shadow:
    0 18px 40px rgba(0,0,0,0.10),
    inset 0 0 0 1px rgba(0,0,0,0.05),
    inset 2px 6px 18px rgba(0,0,0,0.06);
}



/* === CONTACTS: add edge depth / volume (embossed pencil frame) === */
.pg-article-contacts .pg-contacts-frame{
  /* extra outer lift + inner bevel */
  box-shadow:
    0 26px 70px rgba(0,0,0,0.14),
    0 10px 24px rgba(0,0,0,0.10),
    inset 0 1px 0 rgba(255,255,255,0.70),
    inset 0 -2px 8px rgba(0,0,0,0.10),
    inset 0 0 0 1px rgba(0,0,0,0.04);
}

/* bevel highlight ring */
.pg-article-contacts .pg-contacts-frame::after{
  border-color: rgba(0,0,0,0.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.65),
    inset 0 -1px 0 rgba(0,0,0,0.10),
    0 1px 0 rgba(255,255,255,0.40);
}

/* inner pencil contour gets subtle light/shadow too */
.pg-article-contacts .pg-contacts-frame::before{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -1px 0 rgba(0,0,0,0.08);
}

/* optional: very subtle top-left highlight gradient for "volume" */
.pg-article-contacts .pg-contacts-frame{
  background-image:
    radial-gradient(1200px 700px at 20% 10%, rgba(255,255,255,0.55), rgba(255,255,255,0) 55%),
    repeating-linear-gradient(  7deg, rgba(0,0,0,0.012) 0 2px, rgba(0,0,0,0) 2px 6px),
    repeating-linear-gradient( 97deg, rgba(0,0,0,0.010) 0 1px, rgba(0,0,0,0) 1px 7px);
  background-blend-mode: screen, multiply, multiply;
}



/* =======================================================================
   CONTACTS: real visible volume like on reference (layered emboss)
   ======================================================================= */

/* Main paper plate with physical depth */
.pg-article-contacts .pg-contacts-frame{
  background: rgba(255,255,255,0.60);
  box-shadow:
    /* outer drop shadow (plate above background) */
    0 30px 60px rgba(0,0,0,0.22),
    0 12px 24px rgba(0,0,0,0.14),

    /* dark edge under plate */
    inset 0 -4px 10px rgba(0,0,0,0.22),

    /* light top edge */
    inset 0 4px 6px rgba(255,255,255,0.75),

    /* contour definition */
    inset 0 0 0 1px rgba(0,0,0,0.08);
}

/* Outer pencil rim — shadow BELOW it (this gives thickness) */
.pg-article-contacts .pg-contacts-frame::after{
  border: 2px solid rgba(0,0,0,0.28) !important;
  box-shadow:
    0 4px 0 rgba(0,0,0,0.25),
    0 8px 14px rgba(0,0,0,0.22);
  filter: blur(0.2px);
  opacity: 0.95;
}

/* Inner rim — light bevel */
.pg-article-contacts .pg-contacts-frame::before{
  border: 1px solid rgba(0,0,0,0.18) !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.85),
    inset 0 -2px 4px rgba(0,0,0,0.18);
  opacity: 0.9;
}

/* Directional light like in reference (top-left) */
.pg-article-contacts .pg-contacts-frame{
  background-image:
    linear-gradient(
      135deg,
      rgba(255,255,255,0.65) 0%,
      rgba(255,255,255,0.15) 45%,
      rgba(0,0,0,0.04) 100%
    );
}



/* === CONTACTS: much darker bottom edge (volume accent) === */

/* Keep top/light area unchanged, darken ONLY bottom edge */
.pg-article-contacts .pg-contacts-frame{
  box-shadow:
    /* outer lift */
    0 30px 60px rgba(0,0,0,0.22),
    0 12px 24px rgba(0,0,0,0.14),

    /* VERY dark bottom edge */
    inset 0 -10px 18px rgba(0,0,0,0.38),

    /* light top edge */
    inset 0 4px 6px rgba(255,255,255,0.75),

    inset 0 0 0 1px rgba(0,0,0,0.08);
}

/* bottom thickness under outer rim */
.pg-article-contacts .pg-contacts-frame::after{
  box-shadow:
    0 6px 0 rgba(0,0,0,0.45),
    0 12px 22px rgba(0,0,0,0.35);
}

/* inner bevel darker at bottom only */
.pg-article-contacts .pg-contacts-frame::before{
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.85),
    inset 0 -4px 8px rgba(0,0,0,0.32);
}



/* =======================================================================
   CONTACTS: pencil-retouch translucent fill (inside content area)
   ======================================================================= */

/* Main paper base stays */
.pg-article-contacts .pg-contacts-frame{
  background: rgba(255,255,255,0.55);
}

/* Pencil retouch texture overlay ONLY inside frame */
.pg-article-contacts .pg-contacts-frame::marker{
  content: none;
}

/* Inner translucent pencil shading */
.pg-article-contacts .pg-contacts-frame::before{
  background:
    repeating-linear-gradient(
      -12deg,
      rgba(0,0,0,0.035) 0px,
      rgba(0,0,0,0.035) 1px,
      rgba(0,0,0,0) 3px,
      rgba(0,0,0,0) 7px
    ),
    repeating-linear-gradient(
      78deg,
      rgba(0,0,0,0.025) 0px,
      rgba(0,0,0,0.025) 1px,
      rgba(0,0,0,0) 4px,
      rgba(0,0,0,0) 9px
    );
  background-blend-mode: multiply;
}

/* Make sure content is above texture */
.pg-article-contacts .pg-contacts-body,
.pg-article-contacts .pg-contacts-header{
  position: relative;
  z-index: 2;
}




/* === CONTACTS: pencil ink retouch inside frame (no squares) === */
.pg-article-contacts .pg-contacts-frame {
  position: relative;
}

.pg-article-contacts .pg-contacts-frame::before {
  content: "";
  position: absolute;
  inset: 14px;
  pointer-events: none;
  z-index: 0;

  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='pencil'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' seed='7'/><feColorMatrix type='matrix' values='0 0 0 0 0.16 0 0 0 0 0.16 0 0 0 0 0.16 0 0 0 0.9 0'/></filter><rect width='100%' height='100%' filter='url(%23pencil)'/></svg>");
  background-size: 280px 280px;
  background-repeat: repeat;

  opacity: 0.45;
  filter: blur(0.7px);
  mix-blend-mode: multiply;
  border-radius: 22px;
}

.pg-article-contacts .pg-contacts-frame > * {
  position: relative;
  z-index: 1;
}


/* =======================================================================
   CONTACTS: carved 3D border (professional embossed edge)
   ======================================================================= */

.pg-article-contacts .pg-contacts-frame{
  position: relative;
  border-radius: 28px;

  /* main volume */
  box-shadow:
    /* outer lift */
    0 28px 60px rgba(0,0,0,0.28),
    0 12px 24px rgba(0,0,0,0.18),

    /* strong lower extrusion */
    inset 0 -14px 22px rgba(0,0,0,0.45),

    /* sharp inner cut */
    inset 0 0 0 2px rgba(0,0,0,0.22),

    /* highlight on top edge */
    inset 0 4px 6px rgba(255,255,255,0.85);
}

/* outer carved rim */
.pg-article-contacts .pg-contacts-frame::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius: 32px;
  pointer-events:none;

  box-shadow:
    0 8px 0 rgba(0,0,0,0.55),
    0 18px 38px rgba(0,0,0,0.45);

  opacity:0.95;
}

/* inner bevel ring */
.pg-article-contacts .pg-contacts-frame::before{
  border-radius: 22px;
  box-shadow:
    inset 0 3px 0 rgba(255,255,255,0.85),
    inset 0 -6px 10px rgba(0,0,0,0.35);
}

/* directional light to sculpt edges */
.pg-article-contacts .pg-contacts-frame{
  background-image:
    linear-gradient(
      135deg,
      rgba(255,255,255,0.55) 0%,
      rgba(255,255,255,0.25) 40%,
      rgba(0,0,0,0.08) 100%
    );
}



/* =======================================================================
   ABOUT ONLY: interface like Contacts (pencil retouch + carved 3D border)
   Scoped strictly to .pg-article-about
   ======================================================================= */

.pg-article-about .pg-about-frame {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  background: rgba(255,255,255,0.60);

  /* carved 3D volume */
  box-shadow:
    0 28px 60px rgba(0,0,0,0.28),
    0 12px 24px rgba(0,0,0,0.18),
    inset 0 -14px 22px rgba(0,0,0,0.45),
    inset 0 0 0 2px rgba(0,0,0,0.22),
    inset 0 4px 6px rgba(255,255,255,0.85);

  /* directional light */
  background-image: linear-gradient(
    135deg,
    rgba(255,255,255,0.55) 0%,
    rgba(255,255,255,0.25) 40%,
    rgba(0,0,0,0.08) 100%
  );
}

.pg-article-about .pg-about-frame::after {
  content:"";
  position:absolute;
  inset:-6px;
  border-radius: 32px;
  pointer-events:none;
  box-shadow:
    0 8px 0 rgba(0,0,0,0.55),
    0 18px 38px rgba(0,0,0,0.45);
  opacity:0.95;
}

.pg-article-about .pg-about-frame::before {
  content:"";
  position:absolute;
  inset: 14px;
  border-radius: 22px;
  pointer-events:none;
  z-index: 0;

  /* pencil ink retouch (NO hatch, NO squares) */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='pencil'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' seed='7'/><feColorMatrix type='matrix' values='0 0 0 0 0.16 0 0 0 0 0.16 0 0 0 0 0.16 0 0 0 0.9 0'/></filter><rect width='100%' height='100%' filter='url(%23pencil)'/></svg>");
  background-size: 280px 280px;
  background-repeat: repeat;
  opacity: 0.45;
  filter: blur(0.7px);
  mix-blend-mode: multiply;

  /* subtle inner bevel */
  box-shadow:
    inset 0 3px 0 rgba(255,255,255,0.85),
    inset 0 -6px 10px rgba(0,0,0,0.35);
}

.pg-article-about .pg-about-frame > * {
  position: relative;
  z-index: 1;
}

.pg-article-about .pg-about-header {
  position: relative;
  padding-bottom: 18px;
  margin-bottom: 22px;
}

.pg-article-about .pg-about-header::after {
  content:"";
  position:absolute;
  left: 8%;
  right: 8%;
  bottom: 0;
  height: 2px;
  background: linear-gradient(
    to right,
    rgba(0,0,0,0),
    rgba(0,0,0,0.22),
    rgba(0,0,0,0.08),
    rgba(0,0,0,0.22),
    rgba(0,0,0,0)
  );
  border-radius: 999px;
  filter: blur(0.2px);
  opacity: 0.9;
}


/* === Auto Gallery (product-like) === */
.pg-img-fluid{max-width:100% !important;height:auto !important}

/*
 * FIX: prevent layout shift in AutoGallery (materials) when images have different aspect ratios.
 * The helper .pg-img-fluid forces height:auto !important, so we override it for the main
 * gallery image and thumbnails to keep a constant media block height.
 */
.pg-product--float .pg-product__gallery{width:min(520px,100%)}
.pg-product--float img.pg-product__main.pg-img-fluid{
  display:block;
  width:100% !important;
  height:320px !important;
  object-fit:cover;
  object-position:center;
  border-radius:18px;
  background:rgba(255,255,255,.35);
}
.pg-product--float .pg-product__thumbs-wrap{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:12px;
}
.pg-product__thumbs{
  display:flex;
  gap:10px;
  flex-wrap:nowrap;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-behavior:smooth;
  -ms-overflow-style:none;
  scrollbar-width:none;
  flex:1 1 auto;
  min-width:0;
}
.pg-product__thumbs::-webkit-scrollbar{ display:none; }
.pg-thumbs-arrow{
  width:34px;
  height:34px;
  flex:0 0 34px;
  border:1px solid rgba(0,0,0,.12);
  border-radius:999px;
  background:rgba(255,255,255,.88);
  color:#111;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 8px 18px rgba(0,0,0,.08);
  transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease, background-color .18s ease;
}
.pg-thumbs-arrow:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 24px rgba(0,0,0,.12);
  background:#fff;
}
.pg-thumbs-arrow:disabled{
  opacity:.38;
  cursor:default;
  transform:none;
  box-shadow:none;
}
.pg-thumb{
  border:1px solid #ddd;
  padding:4px;
  border-radius:8px;
  background:#fff;
  cursor:pointer;
  flex:0 0 auto;
}
.pg-thumb img{
  width:64px;
  height:64px;
  object-fit:cover;
  display:block;
  border-radius:6px;
}
@media (max-width: 900px){
  .pg-product{grid-template-columns:1fr}
  /* на мобильных сохраняем стабильную область изображения */
  .pg-product__main{height: clamp(220px, 38vh, 360px)}
}
.pg-lightbox-overlay{
  position:fixed; inset:0;
  background:rgba(0,0,0,.82);
  display:flex; align-items:center; justify-content:center;
  z-index:99999; padding:16px;
}
.pg-lightbox-overlay img{
  max-width:95vw; max-height:90vh; border-radius:10px;
}

/* lightbox nav */
.pg-lightbox-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:46px;
  height:46px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.14);
  color:#fff;
  font-size:26px;
  line-height:44px;
  text-align:center;
  cursor:pointer;
  user-select:none;
  backdrop-filter: blur(6px);
}
.pg-lightbox-btn:hover{ background:rgba(255,255,255,.22); }
.pg-lightbox-btn:active{ background:rgba(255,255,255,.28); }
.pg-lightbox-btn.is-disabled{ opacity:.35; pointer-events:none; }
.pg-lightbox-prev{ left:18px; }
.pg-lightbox-next{ right:18px; }

/* lightbox close */
.pg-lightbox-close{
  position:absolute;
  top:14px;
  right:14px;
  width:40px;
  height:40px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.14);
  color:#fff;
  font-size:28px;
  line-height:38px;
  text-align:center;
  cursor:pointer;
  user-select:none;
  backdrop-filter: blur(6px);
}
.pg-lightbox-close:hover{ background:rgba(255,255,255,.22); }
.pg-lightbox-close:active{ background:rgba(255,255,255,.28); }

/* === Card (intro image) fit fix === */
.pg-article-card__media{
  display:block;
  width:100%;
  overflow:hidden;
}
.pg-article-card__media img{
  display:block;
  width:100% !important;
  height:100% !important;
  object-fit:contain;
}


/* === PG: Category tiles (materials) – компактная карточка без описания и кнопки === */
.pg-article-card__body{ text-align:center; padding:14px 18px 18px; }
.pg-article-card__title{ margin:0; font-size:18px; line-height:1.25; }
.pg-article-card__media img{ height:220px; object-fit:cover; object-position:center; background:#f4f4f4; }


/* ===== MATERIALS LIST: use category-like tiles (compact) ===== */
.pg-grid--materials{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 260px));
  gap: 26px;
  justify-content: center;
}

/* Make material tiles compact without affecting category tiles */
.pg-tile--material{
  padding: 14px 16px 12px !important;
  min-height: 150px !important;
}

.pg-tile--material .pg-tile__media{
  height: 84px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
}

.pg-tile--material .pg-tile__media img{
  max-width: 95% !important;
  max-height: 95% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

.pg-tile--material .pg-tile__title{
  font-size: 18px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase;
}

/* Responsive */
@media (max-width: 768px){
  .pg-grid--materials{ grid-template-columns: 1fr; }
}


/* ===== MATERIALS GRID TUNING (responsive + 3 tiles on desktop) =====
   Goal: flexible layout, but on desktop show exactly 3 tiles per row,
   and make tiles a bit wider ("длиннее") than current.
   Applies to materials list only (after override to tiles).
*/

/* Prefer a centered container so tiles don't stretch too wide */
.pg-materials-grid,
.pg-grid--materials,
.pg-articles-grid.pg-materials,
.pg-articles-grid.materials,
.pg-articles-grid[data-view="materials"]{
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}

/* Desktop: force 3 columns and slightly wider tiles */
@media (min-width: 1200px){
  .pg-materials-grid,
  .pg-grid--materials,
  .pg-articles-grid.pg-materials,
  .pg-articles-grid.materials,
  .pg-articles-grid[data-view="materials"]{
    display: grid !important;
    grid-template-columns: repeat(3, minmax(280px, 1fr)) !important;
    gap: 30px !important;
    justify-content: center !important;
  }
}

/* Between 900 and 1199: still allow 3 if space, otherwise 2 */
@media (max-width: 1199px) and (min-width: 901px){
  .pg-materials-grid,
  .pg-grid--materials,
  .pg-articles-grid.pg-materials,
  .pg-articles-grid.materials,
  .pg-articles-grid[data-view="materials"]{
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
    gap: 28px !important;
    justify-content: center !important;
  }
}

/* Tablets */
@media (max-width: 900px){
  .pg-materials-grid,
  .pg-grid--materials,
  .pg-articles-grid.pg-materials,
  .pg-articles-grid.materials,
  .pg-articles-grid[data-view="materials"]{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 22px !important;
  }
}

/* Phones */
@media (max-width: 560px){
  .pg-materials-grid,
  .pg-grid--materials,
  .pg-articles-grid.pg-materials,
  .pg-articles-grid.materials,
  .pg-articles-grid[data-view="materials"]{
    grid-template-columns: 1fr !important;
  }
}

/* Make the tile content breathe a bit more (a touch longer look) */
.pg-tile--material,
.pg-article-card.pg-tile--material{
  padding: 16px 22px 14px !important;
}
.pg-tile--material .pg-tile__media{
  height: 88px !important;
}


/* ===== MATERIAL ARTICLE: title like label (logo/tile style) ===== */
.pg-article__title{
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 800;
  font-size: clamp(24px, 3vw, 40px);
  line-height: 1.15;
}

/* ===== AUTO GALLERY: text wraps around gallery ===== */
.pg-product--float .pg-product__gallery{
  float: left;
  width: min(460px, 46vw);
  margin: 0 28px 18px 0;
}

.pg-product--float .pg-product__gallery a,
.pg-product--float .pg-product__gallery img{
  display: block;
}

.pg-product--float .pg-product__thumbs{
  margin-top: 12px;
}

.pg-clearfix{ clear: both; }

/* On narrow screens: stack (no float) */
@media (max-width: 860px){
  .pg-product--float .pg-product__gallery{
    float: none;
    width: 100%;
    margin: 0 0 16px 0;
  }
}


/* ===== GLOBAL FONT: make EVERYTHING use the same font ===== */
html, body{
  font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
}
h1,h2,h3,h4,h5,h6,
.pg-article__title,
.pg-tile__title,
.pg-breadcrumbs,
.pg-nav a,
.pg-btn,
.pg-content,
.pg-article__content,
.pg-article__content *{
  font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
}

/* ===== FLOAT WRAP FIX: template had grid on .pg-product, override for float mode ===== */
.pg-product--float{
  display:block !important;
}
.pg-product--float .pg-product__gallery{
  float:left;
}

/* Ensure content can occupy full width below the floated gallery */
.pg-product--float .pg-article__content--flow{
  display:block !important;
}

/* Clearfix (already added in markup) */
.pg-clearfix{ clear: both; }



/* ===== REMOVE AUTO PARAGRAPH SPACING IN MATERIALS ===== */
.pg-article__content p{
  margin:0 !important;
}

.pg-article__content p + p{
  margin-top:0 !important;
}

/* If editor inserts <br> spacing, keep it controlled */
.pg-article__content br{
  line-height:1.2;
}



/* ===== STRICT PARAGRAPH RESET (NO VERTICAL GAPS) ===== */
.pg-article__content p{
  margin:0 !important;
  padding:0 !important;
}

.pg-article__content p + p{
  margin-top:0 !important;
}

.pg-article__content ul,
.pg-article__content ol{
  margin:0 !important;
}



/* ===== Word paste normalization (Joomla/TinyMCE) ===== */
/* Word часто приносит MsoNormal и inline style только с margin-bottom:0; при этом margin-top остаётся из CSS */
.pg-article__content p,
.pg-article__content p.MsoNormal{
  margin: 0 !important;
  padding: 0 !important;
  text-indent: inherit;
}

/* Убираем "воздушность" от Word-span line-height:115% — используем общий line-height контейнера */
.pg-article__content span{
  line-height: inherit !important;
}

/* Списки: сохраняем аккуратный вид */
.pg-article__content ul,
.pg-article__content ol{
  margin: 0 !important;
  padding-left: 22px !important;
}

.pg-article__content li{
  margin: 0 !important;
}

/* На всякий случай: убираем верх/низ у таблиц/картинок из Word */
.pg-article__content table{ margin: 0 !important; }
.pg-article__content img{ margin: 0 !important; }



/* ===== Tighten article typography to avoid "gaps" that look like paragraph spacing ===== */
.pg-article__content{
  line-height: 1.35 !important;
}

.pg-article__content p,
.pg-article__content p.MsoNormal{
  line-height: inherit !important;
}



/* ===== Robust paragraph spacing reset for Joomla content (Word paste safe) =====
   Причина: контент иногда рендерится НЕ внутри .pg-article__content, поэтому старые правила не срабатывали.
   Эти селекторы покрывают стандартные контейнеры Joomla 4/5/6 + наш шаблон.
*/
.pg-article__content p,
.pg-article__content p.MsoNormal,
.item-page p,
.item-page p.MsoNormal,
.com-content-article__body p,
.com-content-article__body p.MsoNormal,
.com-content-article__content p,
.com-content-article__content p.MsoNormal,
.article-body p,
.article-body p.MsoNormal,
.page-content p,
.page-content p.MsoNormal{
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.35 !important; /* плотнее, ближе к Word */
}

/* Не даём Word-span раздувать межстрочный */
.pg-article__content span,
.item-page span,
.com-content-article__body span,
.com-content-article__content span,
.article-body span,
.page-content span{
  line-height: inherit !important;
}

/* Списки: чуть воздуха, но без огромных дыр */
.pg-article__content ul,
.pg-article__content ol,
.item-page ul,
.item-page ol,
.com-content-article__body ul,
.com-content-article__body ol,
.com-content-article__content ul,
.com-content-article__content ol,
.article-body ul,
.article-body ol,
.page-content ul,
.page-content ol{
  margin: 8px 0 !important;
  padding-left: 22px !important;
}

.pg-article__content li,
.item-page li,
.com-content-article__body li,
.com-content-article__content li,
.article-body li,
.page-content li{
  margin: 0 !important;
}

/* Пустые Word-абзацы (если остались) */
.pg-article__content p:empty,
.item-page p:empty,
.com-content-article__body p:empty,
.com-content-article__content p:empty,
.article-body p:empty,
.page-content p:empty{
  display:none !important;
}


/* ===== FIX: убрать "воздух" в материалах (Word/TinyMCE) ===== */
/* Причина большого расстояния — завышенный line-height в шаблоне и/или span из Word. */
.item-page,
.com-content-article__body,
.pg-article__content{
  line-height: 1.35 !important;
}

.item-page p,
.com-content-article__body p,
.pg-article__content p,
.item-page p.MsoNormal,
.com-content-article__body p.MsoNormal,
.pg-article__content p.MsoNormal{
  margin: 0 0 12px 0 !important;   /* аккуратный отступ между абзацами */
  padding: 0 !important;
  line-height: inherit !important; /* наследуем 1.35 от контейнера */
}

/* Word часто тащит span с line-height:115% — выравниваем */
.item-page p span,
.com-content-article__body p span,
.pg-article__content p span{
  line-height: inherit !important;
}


/* === Order CTA inside service articles === */
.pg-order-cta{
  margin-top: 26px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
.pg-order-cta__button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 24px;
  border-radius: 999px;
  text-decoration: none;
  color: #111;
  background: rgba(255,255,255,.76);
  border: 1px solid rgba(0,0,0,.12);
  box-shadow: 0 10px 24px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.9);
  font-weight: 700;
  letter-spacing: .02em;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.pg-order-cta__button:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.95);
  background: rgba(255,255,255,.88);
}
.pg-order-cta__button:active{ transform: translateY(0); }
.pg-order-cta__meta{
  font-size: 14px;
  color: rgba(0,0,0,.72);
}
.pg-order-cta__meta a{
  color: inherit;
  font-weight: 600;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.pg-product--float .pg-order-cta{
  clear: both;
}
@media (max-width: 900px){
  .pg-order-cta{ margin-top: 20px; }
}


.pg-order-modal{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0,0,0,.28);
  backdrop-filter: blur(2px);
  z-index: 9999;
}
.pg-order-modal.is-open{ display:flex; }
.pg-order-modal__dialog{
  width: min(420px, 100%);
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 22px;
  box-shadow: 0 22px 60px rgba(0,0,0,.18);
  padding: 22px;
}
.pg-order-modal__title{
  margin: 0 0 8px;
  font-size: 24px;
  font-weight: 700;
  color:#111;
}
.pg-order-modal__text{ display:none; }
.pg-order-modal__actions{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.pg-order-modal__link,
.pg-order-modal__close{
  min-height: 48px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-weight: 700;
  border: 1px solid rgba(0,0,0,.12);
}
.pg-order-modal__link{
  background: rgba(255,255,255,.9);
  color:#111;
  box-shadow: 0 10px 24px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.95);
}
.pg-order-modal__link:hover{ background:#fff; }
.pg-order-modal__close{
  width:100%;
  margin-top: 12px;
  background: transparent;
  color: rgba(0,0,0,.75);
  cursor:pointer;
}
@media (max-width: 560px){
  .pg-order-modal__actions{ grid-template-columns: 1fr; }
}


/* === Final polish: materials article === */
/* 1) main gallery reduced by ~20% and balanced spacing */
.pg-product--float .pg-product__gallery{
  width: min(368px, 37vw);
  margin: 2px 34px 20px 0;
}
.pg-product--float img.pg-product__main.pg-img-fluid{
  height: 256px !important;
  border-radius: 16px;
  box-shadow: 0 18px 34px rgba(0,0,0,.10);
}

/* 2) cleaner premium card depth without changing colors */
.pg-article-single.pg-card--glass{
  box-shadow: 0 22px 54px rgba(0,0,0,.08), 0 8px 18px rgba(0,0,0,.05);
  border-radius: 22px;
}

/* 3) more premium title and more refined gallery thumbs */
.pg-page-title{
  font-size: 26px;
  font-weight: 800;
  letter-spacing: .06em;
  text-shadow: 0 1px 0 rgba(255,255,255,.92), 0 4px 10px rgba(0,0,0,.10);
}
.pg-thumb{
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.pg-thumb:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
  border-color: rgba(0,0,0,.26);
}
.pg-thumb.is-active{
  border-color:#111;
  box-shadow: 0 8px 18px rgba(0,0,0,.12);
}

/* right-aligned order button under text */
.pg-product--float .pg-order-cta,
.pg-article__content > .pg-order-cta{
  width: 100%;
}
.pg-order-cta__button{
  min-width: 182px;
}

@media (max-width: 860px){
  .pg-product--float .pg-product__gallery{
    width: 100%;
    margin: 0 0 16px 0;
  }
  .pg-product--float img.pg-product__main.pg-img-fluid{
    height: 260px !important;
  }
  .pg-order-cta{ align-items: stretch; }
  .pg-order-cta__button{ width: 100%; }
}

@media (max-width: 640px){
  .pg-thumbs-arrow{ width:30px; height:30px; flex-basis:30px; }
  .pg-product__thumbs-wrap{ gap:7px; }
}


/* ===== Integrated gallery card like approved mockup ===== */
.pg-product--float .pg-product__gallery{
  width:min(520px,100%);
  margin:0 28px 18px 0;
  float:left;
  background:rgba(255,255,255,.74);
  border:1px solid rgba(255,255,255,.72);
  border-radius:24px;
  box-shadow:0 22px 46px rgba(0,0,0,.10), 0 8px 18px rgba(0,0,0,.05);
  overflow:hidden;
}

.pg-product__main-wrap{
  position:relative;
  padding:12px 12px 0;
}

.pg-product--float img.pg-product__main.pg-img-fluid{
  display:block;
  width:100% !important;
  height:300px !important;
  object-fit:cover;
  object-position:center;
  border-radius:20px 20px 0 0;
  border-bottom:1px solid rgba(0,0,0,.10);
  background:rgba(255,255,255,.35);
  box-shadow:none;
}

.pg-main-arrow,
.pg-thumbs-arrow{
  width:44px;
  height:44px;
  border:1px solid rgba(0,0,0,.10);
  border-radius:999px;
  background:rgba(255,255,255,.92);
  color:#333;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 8px 18px rgba(0,0,0,.10);
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, opacity .18s ease;
}

.pg-main-arrow:hover,
.pg-thumbs-arrow:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 24px rgba(0,0,0,.14);
  background:#fff;
}

.pg-main-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:2;
}

.pg-main-arrow--prev{ left:-18px; }
.pg-main-arrow--next{ right:-18px; }

.pg-product--float .pg-product__thumbs-wrap{
  display:grid;
  grid-template-columns:44px 1fr 44px;
  align-items:center;
  gap:12px;
  padding:10px 14px 14px;
  margin-top:0;
  border-top:1px solid rgba(0,0,0,.08);
  background:linear-gradient(to bottom, rgba(255,255,255,.72), rgba(255,255,255,.82));
}

.pg-product__thumbs{
  display:flex;
  gap:12px;
  flex-wrap:nowrap;
  overflow:hidden;
  min-width:0;
  justify-content:flex-start;
  align-items:center;
}

.pg-thumb{
  border:1px solid rgba(0,0,0,.12);
  padding:0;
  border-radius:12px;
  background:#fff;
  cursor:pointer;
  flex:0 0 auto;
  width:68px;
  height:68px;
  overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.pg-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:10px;
}

.pg-thumb:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 20px rgba(0,0,0,.10);
  border-color:rgba(0,0,0,.26);
}

.pg-thumb.is-active{
  border-color:rgba(0,0,0,.55);
  box-shadow:0 10px 18px rgba(0,0,0,.12);
}

.pg-thumbs-arrow:disabled,
.pg-main-arrow:disabled{
  opacity:.38;
  cursor:default;
  box-shadow:none;
  transform:none;
}

@media (max-width: 860px){
  .pg-product--float .pg-product__gallery{
    width:100%;
    margin:0 0 18px 0;
    float:none;
  }
  .pg-product--float img.pg-product__main.pg-img-fluid{
    height:240px !important;
  }
  .pg-main-arrow--prev{ left:8px; }
  .pg-main-arrow--next{ right:8px; }
}

@media (max-width: 640px){
  .pg-main-arrow,
  .pg-thumbs-arrow{
    width:36px;
    height:36px;
  }
  .pg-product--float .pg-product__thumbs-wrap{
    grid-template-columns:36px 1fr 36px;
    gap:7px;
    padding:10px;
  }
  .pg-thumb{
    width:56px;
    height:56px;
  }
}


/* Reduced main gallery image height */
.pg-product--float img.pg-product__main.pg-img-fluid{
  height:300px !important;
}

@media (max-width: 860px){
  .pg-product--float img.pg-product__main.pg-img-fluid{
    height:240px !important;
  }
}


/* hide arrows only on main image inside page gallery, keep lightbox arrows */
.pg-product__gallery .pg-main-arrow{display:none!important;}



/* ===== Premium integrated carousel ===== */
.pg-product--float .pg-product__gallery{
  width:min(560px,100%) !important;
  margin:0 28px 18px 0 !important;
  float:left;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(255,255,255,.72);
  border-radius:22px;
  box-shadow:0 18px 36px rgba(0,0,0,.10), 0 6px 14px rgba(0,0,0,.045);
  overflow:hidden;
}

.pg-product__main-wrap{
  padding:10px 10px 0 !important;
}

.pg-product--float img.pg-product__main.pg-img-fluid{
  display:block;
  width:100% !important;
  height:300px !important;
  object-fit:cover;
  object-position:center;
  border-radius:14px 14px 0 0 !important;
  border:0 !important;
  border-bottom:1px solid rgba(0,0,0,.08);
  background:transparent;
  box-shadow:none !important;
}

.pg-product__gallery .pg-main-arrow{
  display:none !important;
}

.pg-product--float .pg-product__thumbs-wrap{
  display:grid !important;
  grid-template-columns:48px 1fr 48px;
  align-items:center;
  gap:12px;
  padding:10px 10px 12px !important;
  margin-top:0 !important;
  border-top:1px solid rgba(0,0,0,.08);
  background:rgba(255,255,255,.78);
}

.pg-product__thumbs{
  display:flex;
  gap:14px !important;
  flex-wrap:nowrap;
  overflow:hidden;
  min-width:0;
  align-items:center;
  justify-content:flex-start;
}

.pg-thumbs-arrow{
  width:40px !important;
  height:40px !important;
  border:1px solid rgba(0,0,0,.10);
  border-radius:999px;
  background:rgba(255,255,255,.92);
  color:rgba(0,0,0,.55);
  box-shadow:none !important;
  font-size:26px;
  line-height:1;
}
.pg-thumbs-arrow:hover{
  background:#fff;
  color:rgba(0,0,0,.78);
  transform:none !important;
  box-shadow:0 8px 16px rgba(0,0,0,.08) !important;
}

.pg-thumb{
  width:82px !important;
  height:62px !important;
  padding:0 !important;
  border:1px solid rgba(0,0,0,.08) !important;
  border-radius:14px !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:hidden;
  opacity:.82;
  transform:none;
  transition:opacity .18s ease, transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.pg-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:12px !important;
  display:block;
}
.pg-thumb:hover{
  opacity:1;
  transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(0,0,0,.10) !important;
  border-color:rgba(0,0,0,.18) !important;
}
.pg-thumb.is-active{
  opacity:1;
  transform:translateY(-1px) scale(1.03);
  border-color:rgba(0,0,0,.30) !important;
  box-shadow:0 12px 22px rgba(0,0,0,.12) !important;
}
.pg-thumb.is-active img{
  filter:contrast(1.02) saturate(1.02);
}

@media (max-width: 860px){
  .pg-product--float .pg-product__gallery{
    width:100% !important;
    margin:0 0 18px 0 !important;
    float:none;
  }
  .pg-product--float img.pg-product__main.pg-img-fluid{
    height:240px !important;
  }
  .pg-product--float .pg-product__thumbs-wrap{
    grid-template-columns:40px 1fr 40px;
    gap:10px;
    padding:10px 12px 14px !important;
  }
  .pg-thumb{
    width:68px !important;
    height:54px !important;
  }
}

@media (max-width: 640px){
  .pg-product__main-wrap{
    padding:14px 14px 0 !important;
  }
  .pg-product--float img.pg-product__main.pg-img-fluid{
    height:220px !important;
  }
  .pg-thumb{
    width:60px !important;
    height:48px !important;
    border-radius:12px !important;
  }
  .pg-thumb img{
    border-radius:10px !important;
  }
}


/* ===== Premium catalog upgrade (v1.6.6) ===== */
.pg-services{
  margin-top: 4px;
}

.pg-grid--catalog.pg-grid--materials{
  gap: 26px !important;
  align-items: stretch;
}

.pg-tile,
.pg-tile--material{
  position: relative;
  min-height: 182px;
  padding: 18px 22px 20px !important;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(255,255,255,.66), rgba(255,255,255,.54));
  border: 1px solid rgba(255,255,255,.72);
  box-shadow: 0 18px 42px rgba(0,0,0,.08), 0 4px 10px rgba(0,0,0,.04);
  overflow: hidden;
}

.pg-tile::before,
.pg-tile--material::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0));
}

.pg-tile::after,
.pg-tile--material::after{
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  top: 14px;
  height: 1px;
  background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,.78), rgba(255,255,255,0));
  pointer-events: none;
}

.pg-tile:hover,
.pg-tile--material:hover{
  transform: translateY(-4px);
  box-shadow: 0 26px 54px rgba(0,0,0,.12), 0 8px 18px rgba(0,0,0,.05);
  background: linear-gradient(180deg, rgba(255,255,255,.80), rgba(255,255,255,.66));
}

.pg-tile__body{
  position: relative;
  z-index: 1;
  gap: 14px;
}

.pg-tile__media,
.pg-tile--material .pg-tile__media{
  height: 92px !important;
}

.pg-tile__icon{
  max-width: 88%;
  max-height: 84px;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.05));
}

.pg-tile__title,
.pg-tile--material .pg-tile__title{
  font-size: 17px !important;
  line-height: 1.2;
  min-height: calc(1.2em * 2);
  letter-spacing: .08em !important;
  color: rgba(27,27,27,.96);
}

@media (min-width: 1200px){
  .pg-content-wrap{ max-width: 1160px; }
  .pg-grid--materials{ gap: 32px !important; }
  .pg-tile,
  .pg-tile--material{ min-height: 188px; }
}

@media (max-width: 900px){
  .pg-main{ padding-top: calc(2px + var(--pg-content-offset)); }
  .pg-grid--catalog.pg-grid--materials{ gap: 18px !important; }
}