/* Start:/bitrix/templates/aspro_max/css/engraving.css?177150678933483*/
/* === ZD Service Page (engraving) CLEAN FINAL === */

.zd-service{
--radius: 22px;
--b: rgba(0,0,0,.06);
--shadow: 0 18px 50px rgba(0,0,0,.08);
}

.zd-service__container{
max-width: 1180px;
margin: 0 auto;
padding: 0 16px;
}

/* =========================
HERO
========================= */
.zd-service__hero{
padding: 28px 0 18px;
}

.zd-service__heroGrid{
display: grid;
grid-template-columns: 1.6fr .9fr;
gap: 18px;
align-items: stretch;

border-radius: 22px;
border: 1px solid rgba(0,0,0,.06);
box-shadow: 0 18px 50px rgba(0,0,0,.08);
padding: 26px;
overflow: hidden;

background:
    radial-gradient(circle at 12% 18%, rgba(210,51,52,.18) 0%, rgba(210,51,52,0) 55%),
    radial-gradient(circle at 88% 30%, rgba(210,51,52,.14) 0%, rgba(210,51,52,0) 60%),
    linear-gradient(135deg, rgba(210,51,52,.10), rgba(255,255,255,.92));
}

.zd-service__title{
font-size: clamp(28px, 4vw, 44px);
line-height: 1.1;
margin: 0 0 10px;
}

.zd-service__badge{
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
border-radius: 999px;
background: rgba(255, 77, 77, .10);
border: 1px solid rgba(255, 77, 77, .25);
font-weight: 700;
margin-bottom: 10px;
}

.zd-service__lead{
margin: 0 0 16px;
font-size: 16px;
line-height: 1.6;
color: rgba(0,0,0,.75);
}

.zd-service__actions{
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 16px;
}

/* Buttons */
.zd-btn{
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 16px;
border-radius: 14px;
border: 1px solid var(--b);
text-decoration: none;
font-weight: 700;
transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
box-shadow: 0 10px 25px rgba(0,0,0,.06);
}

.zd-btn:hover{
transform: translateY(-1px);
box-shadow: 0 14px 32px rgba(0,0,0,.10);
}

.zd-btn--primary{
background: #ff4d4d;
border-color: rgba(255,77,77,.25);
color: #fff;
}

.zd-btn--ghost{
background: rgba(255,255,255,.85);
color: #111;
}

/* Hero right card */
.zd-service__heroCard{
border-radius: var(--radius);
border: 1px solid var(--b);
background: rgba(255,255,255,.90);
box-shadow: var(--shadow);
padding: 18px;
}

.zd-service__heroCardTitle{
font-weight: 800;
margin-bottom: 10px;
}

.zd-service__list{
margin: 0 0 10px;
padding-left: 18px;
color: rgba(0,0,0,.78);
}

.zd-service__note{
font-size: 13px;
color: rgba(0,0,0,.65);
}

/* Mini blocks */
.zd-service__mini{
display: grid;
grid-template-columns: repeat(3, minmax(0,1fr));
gap: 10px;
}

.zd-service__miniItem{
border-radius: 16px;
border: 1px solid var(--b);
background: rgba(255,255,255,.85);
padding: 12px;
}

.zd-service__miniTitle{
font-weight: 800;
margin-bottom: 2px;
}

.zd-service__miniText{
font-size: 13px;
color: rgba(0,0,0,.65);
}

/* =========================
SECTIONS / TYPO
========================= */
.zd-service__section{ padding: 34px 0; }
.zd-service__section--soft{ background: rgba(0,0,0,.02); }
.zd-service__section--cta{ background: rgba(255, 77, 77, .06); }

.zd-service__h2{
margin: 0 0 14px;
font-size: clamp(20px, 2.4vw, 28px);
line-height: 1.2;
}

.zd-service__sub{
margin: -6px 0 18px;
color: rgba(0,0,0,.72);
line-height: 1.6;
}

/* =========================
WHY ("Почему это важно")
========================= */
.zd-whyBox{
box-sizing: border-box;
width: 100%;
max-width: 100%;
margin: 0;
padding: 22px;
border-radius: 22px;
border: 1px solid rgba(0,0,0,.07);
background: linear-gradient(135deg, rgba(210,51,52,.06), rgba(255,255,255,.96));
box-shadow: 0 18px 50px rgba(0,0,0,.08);
overflow: hidden;
}

.zd-service__cards{
display: grid;
grid-template-columns: repeat(3, minmax(0,1fr));
gap: 12px;
}

.zd-card{
border-radius: var(--radius);
border: 1px solid var(--b);
background: rgba(255,255,255,.90);
box-shadow: var(--shadow);
padding: 16px;
}

.zd-whyBox .zd-card{
background: rgba(255,255,255,.96);
border: 1px solid rgba(0,0,0,.08);
border-radius: 18px;
box-shadow: 0 12px 28px rgba(0,0,0,.06);
}

.zd-card__title{
font-weight: 800;
margin-bottom: 6px;
}

.zd-card__text{
color: rgba(0,0,0,.72);
line-height: 1.6;
}

/* убираем любые псевдоэлементы/пятна внутри WHY */
.zd-whyBox::before,
.zd-whyBox::after,
.zd-whyBox .zd-card::before,
.zd-whyBox .zd-card::after,
.zd-whyBox .zd-card__title::before,
.zd-whyBox .zd-card__title::after,
.zd-whyBox .zd-card__text::before,
.zd-whyBox .zd-card__text::after{
content: none !important;
display: none !important;
background: none !important;
}

/* =========================
STEPS base
========================= */
.zd-steps{
display: grid;
grid-template-columns: repeat(3, minmax(0,1fr));
gap: 12px;
}

.zd-step{
border-radius: var(--radius);
border: 1px solid var(--b);
background: rgba(255,255,255,.90);
box-shadow: var(--shadow);
padding: 16px;
display: flex;
gap: 12px;
}

.zd-step__num{
width: 34px;
height: 34px;
border-radius: 999px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255,77,77,.12);
border: 1px solid rgba(255,77,77,.25);
font-weight: 900;
}

.zd-step__title{ font-weight: 800; margin-bottom: 4px; }

.zd-step__text{
color: rgba(0,0,0,.72);
line-height: 1.6;
font-size: 14px;
}

/* =========================
HOW ("Как это работает") — как WHY
(важно: НИЖЕ, чтобы перебить базовые стили)
========================= */
#zd-how{ background: transparent !important; }

/* контейнер секции не должен иметь своих фонов/рамок */
#zd-how .zd-service__container{
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}

/* сам бокс — один в один как WHY */
#zd-how .zd-howBox{
box-sizing: border-box;
width: 100%;
max-width: 100%;
margin: 0;
padding: 22px;
border-radius: 22px;
border: 1px solid rgba(0,0,0,.07);
background: linear-gradient(135deg, rgba(210,51,52,.06), rgba(255,255,255,.96));
box-shadow: 0 18px 50px rgba(0,0,0,.08);
overflow: hidden;
}

/* убираем то самое "лишнее внутреннее белое поле" (если вдруг рисует шаблон) */
#zd-how .zd-howBox > *,
#zd-how .zd-steps{
background: transparent !important;
}

/* карточки шагов — как карточки в WHY */
#zd-how .zd-step{
border-radius: 18px;
border: 1px solid rgba(0,0,0,.08);
background: rgba(255,255,255,.96);
box-shadow: 0 12px 28px rgba(0,0,0,.06);
padding: 16px;
position: relative;
}

/* убиваем любые декоративные псевдоэлементы/полосы */
#zd-how .zd-howBox::before,
#zd-how .zd-howBox::after,
#zd-how .zd-step::before,
#zd-how .zd-step::after{
content: none !important;
display: none !important;
}

/* кружок слева: вместо цифр — эмодзи */
#zd-how .zd-step__num{
font-size: 0; /* прячем 1/2/3 */
width: 36px;
height: 36px;
background: rgba(210,51,52,.10);
border: 1px solid rgba(210,51,52,.18);
box-shadow: 0 10px 22px rgba(210,51,52,.10);
}

#zd-how .zd-step__num::before{
content: "";
font-size: 18px;
line-height: 1;
display: block;
}

/* эмодзи по порядку */
#zd-how .zd-step:nth-child(1) .zd-step__num::before{ content: "🏷️"; }
#zd-how .zd-step:nth-child(2) .zd-step__num::before{ content: "✍️"; }
#zd-how .zd-step:nth-child(3) .zd-step__num::before{ content: "⚡"; }

@media (hover:hover){
#zd-how .zd-step{
    transition: transform .15s ease, box-shadow .15s ease;
}
#zd-how .zd-step:hover{
    transform: translateY(-2px);
    box-shadow: 0 16px 38px rgba(0,0,0,.10);
}
}

/* =========================
SWIPER
========================= */
.zd-swiper{
position: relative;
border-radius: var(--radius);
border: 1px solid var(--b);
background: rgba(255,255,255,.90);
box-shadow: var(--shadow);
overflow: hidden;
padding: 12px;
}

.zd-figure{
margin: 0;
border-radius: 18px;
overflow: hidden;
background: #fff;
}

.zd-figure img{
width: 100%;
height: auto;
display: block;
}

.zd-nav{
position: relative;
padding: 12px 0 4px;
pointer-events: none;
}

.zd-nav .swiper-button-prev,
.zd-nav .swiper-button-next,
.zd-nav .swiper-pagination{
pointer-events: auto;
}

.zd-swiper .swiper-button-prev,
.zd-swiper .swiper-button-next{
top: 50%;
transform: translateY(-50%);
margin-top: 0;
width: 44px;
height: 44px;
border-radius: 999px;
background: rgba(255,255,255,.85);
border: 1px solid rgba(0,0,0,.10);
box-shadow: 0 10px 25px rgba(0,0,0,.10);
z-index: 50;
}

.zd-swiper .swiper-button-prev{ left: 10px; }
.zd-swiper .swiper-button-next{ right: 10px; }

.zd-swiper .swiper-button-prev::after,
.zd-swiper .swiper-button-next::after{
font-size: 16px;
font-weight: 900;
}

.zd-swiper .swiper-pagination{
position: relative;
margin-top: 10px;
}

/* =========================
TEXT EXAMPLES
========================= */
.zd-examples{
display: grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap: 10px;
}

.zd-example{
border-radius: 16px;
border: 1px dashed rgba(0,0,0,.16);
background: rgba(255,255,255,.80);
padding: 12px 14px;
font-weight: 700;
}

/* =========================
CTA
========================= */
.zd-cta{
border-radius: var(--radius);
border: 1px solid rgba(255,77,77,.18);
background: rgba(255,255,255,.80);
box-shadow: var(--shadow);
padding: 18px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
}

.zd-cta__actions{
display: flex;
gap: 10px;
flex-wrap: wrap;
}

/* =========================
RESPONSIVE
========================= */
@media (max-width: 980px){
.zd-service__heroGrid{ grid-template-columns: 1fr; }
.zd-service__cards{ grid-template-columns: 1fr; }
.zd-steps{ grid-template-columns: 1fr; }
.zd-service__mini{ grid-template-columns: 1fr; }
.zd-examples{ grid-template-columns: 1fr; }
.zd-cta{ flex-direction: column; align-items: flex-start; }
}

/* ===== HOW (clean): same wrapper as WHY + emojis in circles ===== */

#zd-how{ background: transparent !important; }

/* если вдруг шаблон даёт фон секции/контейнеру */
#zd-how .zd-service__container{
background: transparent !important;
}

/* убираем "внутреннюю подложку", которая иногда рисуется на steps */
#zd-how .zd-steps{
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}

/* шаги — как карточки WHY */
#zd-how .zd-step{
background: rgba(255,255,255,.96) !important;
border: 1px solid rgba(0,0,0,.08) !important;
border-radius: 18px !important;
box-shadow: 0 12px 28px rgba(0,0,0,.06) !important;
}

/* эмодзи вместо цифр */
#zd-how .zd-step__num{
font-size: 0 !important;     /* прячем 1/2/3 */
width: 36px;
height: 36px;
border-radius: 999px;
background: rgba(210,51,52,.10);
border: 1px solid rgba(210,51,52,.22);
display: flex;
align-items: center;
justify-content: center;
}

#zd-how .zd-step__num::before{
font-size: 18px;
line-height: 1;
display: block;
}

#zd-how .zd-step:nth-child(1) .zd-step__num::before{ content: "🏷️"; }
#zd-how .zd-step:nth-child(2) .zd-step__num::before{ content: "✍️"; }
#zd-how .zd-step:nth-child(3) .zd-step__num::before{ content: "⚡"; }

/* ===== HOW: make it same height/compact like WHY ===== */
#zd-how .zd-whyBox.zd-howBox{
padding: 18px !important;         /* было 22 */
}

#zd-how .zd-service__h2{
margin-bottom: 12px !important;    /* было 14 */
}

#zd-how .zd-steps{
gap: 12px !important;             /* оставим как в WHY */
}

#zd-how .zd-step{
padding: 14px !important;         /* было 16 */
min-height: 92px;                 /* чтобы карточки были одинаковые */
align-items: flex-start;
}

#zd-how .zd-step__title{
margin-bottom: 4px !important;
line-height: 1.25;
}

#zd-how .zd-step__text{
font-size: 13px !important;        /* было 14 */
line-height: 1.5 !important;
}

/* кружки чуть компактнее */
#zd-how .zd-step__num{
width: 34px !important;
height: 34px !important;
}
#zd-how .zd-step__num::before{
font-size: 17px !important;
}

/* === HARD FIX: убираем лишнюю высоту внутри "Как это работает" === */
#zd-how .zd-howBox{
height: auto !important;
min-height: 0 !important;
padding: 18px !important;
padding-bottom: 18px !important;
}

/* очень часто лишняя высота прилетает как padding/margin у сетки */
#zd-how .zd-steps{
margin: 0 !important;
padding: 0 !important;
height: auto !important;
min-height: 0 !important;
}

/* на всякий — если тема добавляет "растягивание" */
#zd-how .zd-howBox > *{
margin-bottom: 0 !important;
}

/* чуть компактнее как у WHY */
#zd-how .zd-service__h2{ margin: 0 0 12px !important; }
#zd-how .zd-step{ padding: 14px !important; margin: 0 !important; }
#zd-how .zd-step__text{ font-size: 13px !important; line-height: 1.5 !important; }

/* если тема рисует/добавляет псевдоэлементы-растяжки */
#zd-how .zd-howBox::before,
#zd-how .zd-howBox::after,
#zd-how .zd-steps::before,
#zd-how .zd-steps::after{
content: none !important;
display: none !important;
}
/* === ZD Service Page (engraving) CLEAN FINAL — CLEANED === */

.zd-service{
--radius: 22px;
--b: rgba(0,0,0,.06);
--shadow: 0 18px 50px rgba(0,0,0,.08);
}

.zd-service__container{
max-width: 1180px;
margin: 0 auto;
padding: 0 16px;
}

/* =========================
HERO
========================= */
.zd-service__hero{ padding: 28px 0 18px; }

.zd-service__heroGrid{
display: grid;
grid-template-columns: 1.6fr .9fr;
gap: 18px;
align-items: stretch;

border-radius: 22px;
border: 1px solid rgba(0,0,0,.06);
box-shadow: 0 18px 50px rgba(0,0,0,.08);
padding: 26px;
overflow: hidden;

background:
    radial-gradient(circle at 12% 18%, rgba(210,51,52,.18) 0%, rgba(210,51,52,0) 55%),
    radial-gradient(circle at 88% 30%, rgba(210,51,52,.14) 0%, rgba(210,51,52,0) 60%),
    linear-gradient(135deg, rgba(210,51,52,.10), rgba(255,255,255,.92));
}

.zd-service__title{
font-size: clamp(28px, 4vw, 44px);
line-height: 1.1;
margin: 0 0 10px;
}

.zd-service__badge{
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
border-radius: 999px;
background: rgba(255, 77, 77, .10);
border: 1px solid rgba(255, 77, 77, .25);
font-weight: 700;
margin-bottom: 10px;
}

.zd-service__lead{
margin: 0 0 16px;
font-size: 16px;
line-height: 1.6;
color: rgba(0,0,0,.75);
}

.zd-service__actions{
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 16px;
}

/* Buttons */
.zd-btn{
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 16px;
border-radius: 14px;
border: 1px solid var(--b);
text-decoration: none;
font-weight: 700;
transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
box-shadow: 0 10px 25px rgba(0,0,0,.06);
}
.zd-btn:hover{
transform: translateY(-1px);
box-shadow: 0 14px 32px rgba(0,0,0,.10);
}

.zd-btn--primary{
background: #ff4d4d;
border-color: rgba(255,77,77,.25);
color: #fff;
}
.zd-btn--ghost{
background: rgba(255,255,255,.85);
color: #111;
}

/* Hero right card */
.zd-service__heroCard{
border-radius: var(--radius);
border: 1px solid var(--b);
background: rgba(255,255,255,.90);
box-shadow: var(--shadow);
padding: 18px;
}
.zd-service__heroCardTitle{ font-weight: 800; margin-bottom: 10px; }
.zd-service__list{ margin: 0 0 10px; padding-left: 18px; color: rgba(0,0,0,.78); }
.zd-service__note{ font-size: 13px; color: rgba(0,0,0,.65); }

/* Mini blocks */
.zd-service__mini{
display: grid;
grid-template-columns: repeat(3, minmax(0,1fr));
gap: 10px;
}
.zd-service__miniItem{
border-radius: 16px;
border: 1px solid var(--b);
background: rgba(255,255,255,.85);
padding: 12px;
}
.zd-service__miniTitle{ font-weight: 800; margin-bottom: 2px; }
.zd-service__miniText{ font-size: 13px; color: rgba(0,0,0,.65); }

/* =========================
SECTIONS / TYPO
========================= */
.zd-service__section{ padding: 34px 0; }
.zd-service__section--soft{ background: rgba(0,0,0,.02); }
.zd-service__section--cta{ background: rgba(255, 77, 77, .06); }

.zd-service__h2{
margin: 0 0 14px;
font-size: clamp(20px, 2.4vw, 28px);
line-height: 1.2;
}
.zd-service__sub{
margin: -6px 0 18px;
color: rgba(0,0,0,.72);
line-height: 1.6;
}

/* =========================
WHY ("Почему это важно")
========================= */
.zd-whyBox{
box-sizing: border-box;
width: 100%;
max-width: 100%;
margin: 0;
padding: 22px;
border-radius: 22px;
border: 1px solid rgba(0,0,0,.07);
background: linear-gradient(135deg, rgba(210,51,52,.06), rgba(255,255,255,.96));
box-shadow: 0 18px 50px rgba(0,0,0,.08);
overflow: hidden;
}

.zd-service__cards{
display: grid;
grid-template-columns: repeat(3, minmax(0,1fr));
gap: 12px;
}

.zd-card{
border-radius: var(--radius);
border: 1px solid var(--b);
background: rgba(255,255,255,.90);
box-shadow: var(--shadow);
padding: 16px;
}

.zd-whyBox .zd-card{
background: rgba(255,255,255,.96);
border: 1px solid rgba(0,0,0,.08);
border-radius: 18px;
box-shadow: 0 12px 28px rgba(0,0,0,.06);
}

.zd-card__title{ font-weight: 800; margin-bottom: 6px; }
.zd-card__text{ color: rgba(0,0,0,.72); line-height: 1.6; }

/* убираем любые псевдоэлементы/пятна внутри WHY */
.zd-whyBox::before,
.zd-whyBox::after,
.zd-whyBox .zd-card::before,
.zd-whyBox .zd-card::after,
.zd-whyBox .zd-card__title::before,
.zd-whyBox .zd-card__title::after,
.zd-whyBox .zd-card__text::before,
.zd-whyBox .zd-card__text::after{
content: none !important;
display: none !important;
background: none !important;
}

/* =========================
STEPS base
========================= */
.zd-steps{
display: grid;
grid-template-columns: repeat(3, minmax(0,1fr));
gap: 12px;
}

.zd-step{
border-radius: var(--radius);
border: 1px solid var(--b);
background: rgba(255,255,255,.90);
box-shadow: var(--shadow);
padding: 16px;
display: flex;
gap: 12px;
}

.zd-step__num{
width: 34px;
height: 34px;
border-radius: 999px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255,77,77,.12);
border: 1px solid rgba(255,77,77,.25);
font-weight: 900;
}

.zd-step__title{ font-weight: 800; margin-bottom: 4px; }

.zd-step__text{
color: rgba(0,0,0,.72);
line-height: 1.6;
font-size: 14px;
}

/* =========================
HOW ("Как это работает") — без дублей
========================= */
#zd-how{ background: transparent !important; }

#zd-how .zd-service__container{
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}

/* обёртка как WHY */
#zd-how .zd-howBox{
box-sizing: border-box;
width: 100%;
max-width: 100%;
margin: 0;
padding: 22px;
border-radius: 22px;
border: 1px solid rgba(0,0,0,.07);
background: linear-gradient(135deg, rgba(210,51,52,.06), rgba(255,255,255,.96));
box-shadow: 0 18px 50px rgba(0,0,0,.08);
overflow: hidden;
}

/* убираем внутренние подложки (тема/шаблон) */
#zd-how .zd-howBox > *,
#zd-how .zd-steps{
background: transparent !important;
}

/* карточки шагов как WHY */
#zd-how .zd-step{
border-radius: 18px;
border: 1px solid rgba(0,0,0,.08);
background: rgba(255,255,255,.96);
box-shadow: 0 12px 28px rgba(0,0,0,.06);
position: relative;
}

/* псевдоэлементы/полосы — в ноль */
#zd-how .zd-howBox::before,
#zd-how .zd-howBox::after,
#zd-how .zd-step::before,
#zd-how .zd-step::after,
#zd-how .zd-steps::before,
#zd-how .zd-steps::after{
content: none !important;
display: none !important;
}

/* эмодзи вместо цифр */
#zd-how .zd-step__num{
font-size: 0;
width: 36px;
height: 36px;
background: rgba(210,51,52,.10);
border: 1px solid rgba(210,51,52,.18);
box-shadow: 0 10px 22px rgba(210,51,52,.10);
}
#zd-how .zd-step__num::before{
font-size: 18px;
line-height: 1;
display: block;
}
#zd-how .zd-step:nth-child(1) .zd-step__num::before{ content: "🏷️"; }
#zd-how .zd-step:nth-child(2) .zd-step__num::before{ content: "✍️"; }
#zd-how .zd-step:nth-child(3) .zd-step__num::before{ content: "⚡"; }

/* hover */
@media (hover:hover){
#zd-how .zd-step{ transition: transform .15s ease, box-shadow .15s ease; }
#zd-how .zd-step:hover{ transform: translateY(-2px); box-shadow: 0 16px 38px rgba(0,0,0,.10); }
}

/* === HARD FIX: убираем лишнюю высоту внутри HOW (ЭТО И ЕСТЬ КЛЮЧ) === */
#zd-how .zd-howBox{
height: auto !important;
min-height: 0 !important;
padding: 18px !important;
padding-bottom: 18px !important;
}

#zd-how .zd-steps{
margin: 0 !important;
padding: 0 !important;
height: auto !important;
min-height: 0 !important;
}

#zd-how .zd-howBox > *{ margin-bottom: 0 !important; }

#zd-how .zd-service__h2{ margin: 0 0 12px !important; }
#zd-how .zd-step{ padding: 14px !important; margin: 0 !important; }
#zd-how .zd-step__text{ font-size: 13px !important; line-height: 1.5 !important; }

/* =========================
SWIPER
========================= */
.zd-swiper{
position: relative;
border-radius: var(--radius);
border: 1px solid var(--b);
background: rgba(255,255,255,.90);
box-shadow: var(--shadow);
overflow: hidden;
padding: 12px;
}

.zd-figure{
margin: 0;
border-radius: 18px;
overflow: hidden;
background: #fff;
}
.zd-figure img{ width: 100%; height: auto; display: block; }

.zd-nav{
position: relative;
padding: 12px 0 4px;
pointer-events: none;
}
.zd-nav .swiper-button-prev,
.zd-nav .swiper-button-next,
.zd-nav .swiper-pagination{ pointer-events: auto; }

.zd-swiper .swiper-button-prev,
.zd-swiper .swiper-button-next{
top: 50%;
transform: translateY(-50%);
margin-top: 0;
width: 44px;
height: 44px;
border-radius: 999px;
background: rgba(255,255,255,.85);
border: 1px solid rgba(0,0,0,.10);
box-shadow: 0 10px 25px rgba(0,0,0,.10);
z-index: 50;
}
.zd-swiper .swiper-button-prev{ left: 10px; }
.zd-swiper .swiper-button-next{ right: 10px; }

.zd-swiper .swiper-button-prev::after,
.zd-swiper .swiper-button-next::after{
font-size: 16px;
font-weight: 900;
}

.zd-swiper .swiper-pagination{
position: relative;
margin-top: 10px;
}

/* =========================
TEXT EXAMPLES
========================= */
.zd-examples{
display: grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap: 10px;
}

.zd-example{
border-radius: 16px;
border: 1px dashed rgba(0,0,0,.16);
background: rgba(255,255,255,.80);
padding: 12px 14px;
font-weight: 700;
}

/* =========================
CTA
========================= */
.zd-cta{
border-radius: var(--radius);
border: 1px solid rgba(255,77,77,.18);
background: rgba(255,255,255,.80);
box-shadow: var(--shadow);
padding: 18px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
}

.zd-cta__actions{
display: flex;
gap: 10px;
flex-wrap: wrap;
}

/* =========================
RESPONSIVE
========================= */
@media (max-width: 980px){
.zd-service__heroGrid{ grid-template-columns: 1fr; }
.zd-service__cards{ grid-template-columns: 1fr; }
.zd-steps{ grid-template-columns: 1fr; }
.zd-service__mini{ grid-template-columns: 1fr; }
.zd-examples{ grid-template-columns: 1fr; }
.zd-cta{ flex-direction: column; align-items: flex-start; }
}

/* ===== HERO: убираем правую колонку, делаем один столбец ===== */
.zd-service__heroGrid{
grid-template-columns: 1fr !important;
}

/* на всякий: правая колонка не занимает место */
.zd-service__heroRight{
display:none !important;
}

/* ===== Блок "Что можно указать" под кнопками ===== */
.zd-service__heroInfo{
margin-top: 14px;
border-radius: 18px;
border: 1px solid rgba(0,0,0,.07);
background: rgba(255,255,255,.90);
box-shadow: 0 12px 32px rgba(0,0,0,.06);
padding: 16px;
}

.zd-service__heroInfoTitle{
font-weight: 900;
margin-bottom: 10px;
}

/* ===== Мини-блоки: оставляем как было, но добавляем смайлы + лёгкий градиент ===== */
.zd-service__miniItem{
position: relative;
overflow: hidden;
}

.zd-service__miniItem::before{
content:"";
position:absolute;
inset:-2px;
background: radial-gradient(circle at 20% 20%, rgba(210,51,52,.14), rgba(255,255,255,0) 60%);
pointer-events:none;
}

.zd-service__miniTitle{
display:flex;
align-items:center;
gap:10px;
}

.zd-service__miniTitle::before{
width: 34px;
height: 34px;
border-radius: 999px;
display:inline-flex;
align-items:center;
justify-content:center;
border: 1px solid rgba(210,51,52,.18);
background: linear-gradient(135deg, rgba(210,51,52,.16), rgba(255,255,255,.0));
box-shadow: 0 10px 22px rgba(210,51,52,.10);
font-size: 17px;
line-height: 1;
content:"";
}

.zd-service__miniItem:nth-child(1) .zd-service__miniTitle::before{ content:"⚡"; }
.zd-service__miniItem:nth-child(2) .zd-service__miniTitle::before{ content:"💬"; }
.zd-service__miniItem:nth-child(3) .zd-service__miniTitle::before{ content:"📌"; }


/* ===== spacing: отступ между "Что можно указать" и мини-блоками ===== */
.zd-service__heroInfo{
margin-bottom: 14px; /* было 0/мало — теперь есть зазор */
}

/* ===== mini: делаем карточки чисто белыми, убираем градиент внутри ===== */
.zd-service__mini{ margin-top: 0; }

.zd-service__miniItem{
background: #fff !important;
border: 1px solid rgba(0,0,0,.07) !important;
box-shadow: 0 12px 28px rgba(0,0,0,.06) !important;
overflow: hidden;
}

/* отключаем прежний "градиентный налёт" внутри мини-карточек */
.zd-service__miniItem::before{
content: none !important;
display: none !important;
}

/* кружки-иконки оставляем, но мягче */
.zd-service__miniTitle::before{
background: rgba(210,51,52,.10) !important;
border: 1px solid rgba(210,51,52,.16) !important;
box-shadow: 0 10px 22px rgba(210,51,52,.08) !important;
}

/* ===== HERO gradient как в нижнем блоке ===== */
.zd-service__heroGrid{
position: relative;
overflow: hidden;

background:
    linear-gradient(135deg, rgba(210,51,52,.10), rgba(255,255,255,.95));
}

/* ===== полоска лапок сверху HERO ===== */
.zd-service__heroGrid::before{
content:"";
position:absolute;
left:0;
top:0;
width:100%;
height:70px;                 /* высота полосы с лапками */
pointer-events:none;
opacity:.25;                 /* заметность лапок */

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='80' viewBox='0 0 160 80'%3E%3Cg fill='%23D23334' fill-opacity='.25'%3E%3Ccircle cx='20' cy='20' r='6'/%3E%3Ccircle cx='35' cy='20' r='6'/%3E%3Ccircle cx='12' cy='34' r='6'/%3E%3Ccircle cx='43' cy='34' r='6'/%3E%3Cellipse cx='27' cy='50' rx='16' ry='12'/%3E%3C/g%3E%3C/svg%3E");

background-repeat: repeat-x;
background-size: 120px;
}

/* чтобы контент не прилипал к лапкам */
.zd-service__heroText{
position: relative;
z-index: 2;
}

.zd-service__heroCard{
position: relative;
z-index: 2;
}

/* 1) если лапки вдруг слишком заметные/слабые — регулируй тут */
.zd-service__heroGrid::before{ opacity: .22; height: 70px; }

/* 2) если хочешь лапки чуть мельче/крупнее */
.zd-service__heroGrid::before{ background-size: 110px; }

/* 3) чтобы контент точно не “залезал” на лапки */
.zd-service__heroGrid{ padding-top: 30px; }

/* =========================
EQUIPMENT — фирменный блок
========================= */

.zd-equipmentBox{
position: relative;
box-sizing: border-box;
width: 100%;
padding: 26px;
border-radius: 22px;
border: 1px solid rgba(0,0,0,.07);
box-shadow: 0 18px 50px rgba(0,0,0,.08);
overflow: hidden;

/* фирменный градиент как hero */
background:
radial-gradient(circle at 12% 18%, rgba(210,51,52,.16) 0%, rgba(210,51,52,0) 55%),
radial-gradient(circle at 88% 30%, rgba(210,51,52,.12) 0%, rgba(210,51,52,0) 60%),
linear-gradient(135deg, rgba(210,51,52,.08), rgba(255,255,255,.96));
}


/* убираем серый фон у внутреннего контейнера */
.zd-equipmentBox .zd-swiper{
background: rgba(255,255,255,.96) !important;
border: 1px solid rgba(0,0,0,.08) !important;
box-shadow: 0 12px 28px rgba(0,0,0,.06) !important;
}


/* =========================
лапки снизу как в hero
========================= */

.zd-equipmentBox::after{
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 70px;
pointer-events: none;
opacity: .22;

background-image: url("/upload/paws-pattern.svg"); /* тот же файл что в hero */
background-repeat: repeat-x;
background-size: 110px;
background-position: bottom center;
}

/* ===== EQUIPMENT BOX ===== */

.zd-equipmentBox{
    position: relative;
    padding: 26px;
    padding-bottom: 60px; /* больше места для лапок */

    border-radius: 22px;
    border: 1px solid rgba(0,0,0,.07);

    background:
        radial-gradient(circle at 12% 18%, rgba(210,51,52,.16) 0%, rgba(210,51,52,0) 55%),
        radial-gradient(circle at 88% 30%, rgba(210,51,52,.12) 0%, rgba(210,51,52,0) 60%),
        linear-gradient(135deg, rgba(210,51,52,.10), rgba(255,255,255,.96));

    box-shadow: 0 18px 50px rgba(0,0,0,.08);
    overflow: hidden;
}


/* лапки снизу */
.zd-equipmentBox::after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 70px;

    background-image: url("/upload/paws.png"); /* тот же файл что в hero */
    background-repeat: repeat-x;
    background-size: 120px auto;

    opacity: 0.18;
    pointer-events: none;
}

/* ===== EQUIPMENT: gradient box + paws bottom (no image file) ===== */

.zd-equipmentBox{
position: relative;
padding: 26px;
padding-bottom: 82px; /* чтобы лапки было видно */
border-radius: 22px;
border: 1px solid rgba(0,0,0,.07);
background:
    radial-gradient(circle at 12% 18%, rgba(210,51,52,.16) 0%, rgba(210,51,52,0) 55%),
    radial-gradient(circle at 88% 30%, rgba(210,51,52,.12) 0%, rgba(210,51,52,0) 60%),
    linear-gradient(135deg, rgba(210,51,52,.10), rgba(255,255,255,.96));
box-shadow: 0 18px 50px rgba(0,0,0,.08);
overflow: hidden;
}

/* делаем слайдер белым, чтобы не “смешивался” с градиентом */
.zd-equipmentBox .zd-swiper{
background: rgba(255,255,255,.92);
border-radius: 18px;
}

/* лапки снизу — встроенный SVG, повтор по X */
.zd-equipmentBox::after{
content: "";
position: absolute;
left: -20px;
right: -20px;
bottom: 16px;
height: 42px;
opacity: .18;
pointer-events: none;
z-index: 0;

background-repeat: repeat-x;
background-size: 140px 42px;
background-position: left bottom;

/* SVG “лапки” */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='42' viewBox='0 0 140 42'%3E%3Cg fill='%23d23334'%3E%3Cg opacity='.55'%3E%3Ccircle cx='18' cy='14' r='4'/%3E%3Ccircle cx='8' cy='18' r='3.4'/%3E%3Ccircle cx='28' cy='18' r='3.4'/%3E%3Ccircle cx='18' cy='23' r='3.8'/%3E%3Cellipse cx='18' cy='31' rx='7.5' ry='6.2'/%3E%3C/g%3E%3Cg opacity='.40'%3E%3Ccircle cx='70' cy='16' r='4'/%3E%3Ccircle cx='60' cy='20' r='3.4'/%3E%3Ccircle cx='80' cy='20' r='3.4'/%3E%3Ccircle cx='70' cy='25' r='3.8'/%3E%3Cellipse cx='70' cy='33' rx='7.5' ry='6.2'/%3E%3C/g%3E%3Cg opacity='.50'%3E%3Ccircle cx='122' cy='14' r='4'/%3E%3Ccircle cx='112' cy='18' r='3.4'/%3E%3Ccircle cx='132' cy='18' r='3.4'/%3E%3Ccircle cx='122' cy='23' r='3.8'/%3E%3Cellipse cx='122' cy='31' rx='7.5' ry='6.2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* чтобы контент был поверх лапок */
.zd-equipmentBox > *{
position: relative;
z-index: 1;
}

/* ===== EQUIPMENT: бокс как у остальных + лапы снизу ===== */

#zd-equipment{
background: transparent !important; /* убираем серую секцию вокруг */
}

#zd-equipment .zd-equipBox{
position: relative;
box-sizing: border-box;
width: 100%;
margin: 0;
padding: 22px 22px 64px; /* низ побольше — чтобы лапы было видно */
border-radius: 22px;
border: 1px solid rgba(0,0,0,.07);
background: linear-gradient(135deg, rgba(210,51,52,.06), rgba(255,255,255,.96));
box-shadow: 0 18px 50px rgba(0,0,0,.08);
overflow: hidden; /* чтобы лапы не вылезали */
}

/* сам свайпер внутри — без лишней серости */
#zd-equipment .zd-swiper{
background: rgba(255,255,255,.92);
}

/* ЛАПЫ СНИЗУ — ровной полосой (как на твоём хорошем примере)
!!! URL поставь ТОТ ЖЕ, что используется в блоке "Нужна помощь с подбором?" */
#zd-equipment .zd-equipBox::after{
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 14px;         /* отступ от низа */
height: 34px;         /* высота полосы лап */
background-image: url("/path/to/paws.svg"); /* <-- замени на свой реальный путь */
background-repeat: repeat-x;
background-position: center bottom;
background-size: 180px 34px; /* ключевой момент: фиксируем размер паттерна */
opacity: .18;         /* лёгкая прозрачность как у примера */
pointer-events: none;
filter: saturate(0.9);
}
/* End */
/* /bitrix/templates/aspro_max/css/engraving.css?177150678933483 */