/* QWERTYMAIL — Шаблоны email-писем */


.qwerty-templates-page a { color: inherit; }


/* hero */
.qtpl-hero { padding: 78px 0 62px; }

.qtpl-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(440px, .95fr);
    gap: 64px;
    align-items: center;
}

.qtpl-hero__content,
.qtpl-hero-stack { min-width: 0; }


.qtpl-hero-stack {
    position: relative;
    min-height: 500px;
}

.qtpl-mini-mail {
    position: absolute;
    width: 235px;
    min-height: 332px;
    padding: 20px;
    border: 1px solid #e0e0e5;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 24px 54px rgba(31,31,49,.12);
}

.qtpl-mini-mail--main {
    z-index: 3;
    top: 34px;
    left: 50%;
    width: 270px;
    min-height: 390px;
    transform: translateX(-50%);
}

.qtpl-mini-mail--left {
    z-index: 1;
    top: 96px;
    left: 0;
    transform: rotate(-6deg);
}

.qtpl-mini-mail--right {
    z-index: 2;
    top: 104px;
    right: 0;
    transform: rotate(6deg);
}

.qtpl-mini-mail__brand {
    width: 62px;
    height: 8px;
    margin-bottom: 20px;
    border-radius: 4px;
    background: var(--qtpl-accent);
}

.qtpl-mini-mail__hero {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 128px;
    border-radius: 10px;
}

.qtpl-mini-mail__hero--promo {
    background: linear-gradient(135deg, #ffdfb8, #ff946c);
}

.qtpl-mini-mail__hero span {
    color: #8b391e;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: .08em;
}

.qtpl-mini-mail__label {
    margin: 25px 0 8px;
    color: var(--qtpl-accent);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
}

.qtpl-mini-mail__title {
    margin: 18px 0 15px;
    color: #252530;
    font-size: 21px;
    line-height: 1.18;
    font-weight: 800;
}

.qtpl-mini-mail__title--small { font-size: 18px; }
.qtpl-mini-mail__line { height: 6px; margin: 8px 0; border-radius: 4px; background: #e3e3e7; }
.qtpl-mini-mail__line--dark { width: 72%; height: 9px; margin-top: 20px; background: #34343d; }
.qtpl-mini-mail__button { width: 92px; height: 30px; margin-top: 18px; border-radius: 6px; background: var(--qtpl-accent); }

.qtpl-mini-mail__products {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 18px;
}
.qtpl-mini-mail__products span { height: 102px; border-radius: 8px; background: #f0f0f3; }
.qtpl-mini-mail__article { height: 88px; margin-top: 18px; border-radius: 8px; background: #ececf1; }
.qtpl-mini-mail__article--small { height: 62px; }

/* proof */


/* sections */


.qtpl-categories {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.qtpl-categories a {
    padding: 11px 14px;
    border: 1px solid #deded8;
    border-radius: 10px;
    background: #fff;
    color: #55544f !important;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none !important;
}

/* gallery */
.qtpl-gallery-section { padding-top: 34px; }
.qtpl-gallery { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.qtpl-card { overflow: hidden; border: 1px solid var(--qtpl-border); border-radius: 20px; background: #fff; box-shadow: 0 14px 34px rgba(25,25,40,.045); }
.qtpl-card__preview { min-height: 430px; display: flex; align-items: flex-start; justify-content: center; padding: 28px 22px; border-bottom: 1px solid var(--qtpl-border); }
.qtpl-preview--promo { background: #f7eee8; }
.qtpl-preview--shop { background: #eef2ff; }
.qtpl-preview--b2b { background: #edf2f0; }
.qtpl-preview--welcome { background: #f3efff; }
.qtpl-preview--digest { background: #f2f1ed; }
.qtpl-preview--event { background: #fff0e8; }

.qtpl-preview__mail { width: 250px; min-height: 365px; padding: 19px; border-radius: 10px; background: #fff; box-shadow: 0 16px 35px rgba(25,25,40,.1); }
.qtpl-preview__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.qtpl-preview__logo { width: 52px; height: 7px; border-radius: 4px; background: var(--qtpl-accent); }
.qtpl-preview__menu { width: 44px; height: 5px; border-radius: 3px; background: #e3e3e8; }
.qtpl-preview__banner { min-height: 145px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 18px; border-radius: 8px; background: linear-gradient(135deg,#ffe0bd,#ff9b74); text-align: center; }
.qtpl-preview__banner small { color: #9f5339; font-size: 8px; font-weight: 800; }
.qtpl-preview__banner strong { margin-top: 7px; color: #71301e; font-size: 24px; line-height: 1.05; }
.qtpl-preview__banner span { margin-top: 13px; padding: 8px 12px; border-radius: 5px; background: #71301e; color: #fff; font-size: 8px; font-weight: 800; }
.qtpl-preview__two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.qtpl-preview__two i { height: 74px; border-radius: 6px; background: #f1f1f4; }
.qtpl-preview__heading { margin: 14px 0; color: #282832; font-size: 19px; line-height: 1.2; font-weight: 800; }
.qtpl-preview__products { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; }
.qtpl-preview__products i { height: 98px; border-radius: 6px; background: #ececf1; }
.qtpl-preview__products i:nth-child(2) { background: #e3e4f6; }
.qtpl-preview__products i:nth-child(3) { background: #f3e6df; }
.qtpl-preview__button { display: inline-flex; align-items: center; justify-content: center; min-width: 96px; min-height: 29px; margin-top: 16px; padding: 0 10px; border-radius: 5px; background: var(--qtpl-accent); color: #fff; font-size: 8px; font-weight: 800; }
.qtpl-preview__kicker { margin-top: 28px; color: #466c61; font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.qtpl-preview__text { display: grid; gap: 7px; margin: 16px 0; }
.qtpl-preview__text i { height: 6px; border-radius: 4px; background: #e1e1e5; }
.qtpl-preview__text i:nth-child(2) { width: 85%; }
.qtpl-preview__text i:nth-child(3) { width: 64%; }
.qtpl-preview__b2brow { display: grid; grid-template-columns: 68px 1fr; gap: 12px; align-items: center; margin-top: 24px; }
.qtpl-preview__b2brow span { height: 68px; border-radius: 7px; background: #dfeae6; }
.qtpl-preview__b2brow b { padding: 9px; border: 1px solid #d7d7dd; border-radius: 6px; color: #3e3e48; font-size: 8px; text-align: center; }
.qtpl-preview__welcome-icon { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; margin: 34px auto 20px; border-radius: 18px; background: var(--qtpl-accent); color: #fff; font-size: 34px; font-weight: 800; }
.qtpl-preview--welcome .qtpl-preview__heading { text-align: center; }
.qtpl-preview--welcome .qtpl-preview__text { width: 85%; margin-left: auto; margin-right: auto; }
.qtpl-preview--welcome .qtpl-preview__button { display: flex; width: 110px; margin-left: auto; margin-right: auto; }
.qtpl-preview__digest { display: grid; grid-template-columns: 72px 1fr; gap: 12px; margin: 15px 0; }
.qtpl-preview__digest > i { height: 72px; border-radius: 6px; background: #e5e5e8; }
.qtpl-preview__digest div { display: grid; align-content: center; gap: 7px; }
.qtpl-preview__digest b { width: 82%; height: 8px; border-radius: 4px; background: #33333c; }
.qtpl-preview__digest span { height: 5px; border-radius: 3px; background: #dfdfe3; }
.qtpl-preview__digest span:last-child { width: 70%; }
.qtpl-preview__event-date { width: 112px; margin: 24px auto 20px; padding: 16px; border-radius: 12px; background: #ffb18c; text-align: center; }
.qtpl-preview__event-date strong, .qtpl-preview__event-date span { display: block; }
.qtpl-preview__event-date strong { color: #6e2b17; font-size: 40px; line-height: .9; }
.qtpl-preview__event-date span { margin-top: 7px; color: #8a3d26; font-size: 8px; font-weight: 800; letter-spacing: .08em; }
.qtpl-preview--event .qtpl-preview__heading { text-align: center; }
.qtpl-preview--event .qtpl-preview__button { display: flex; width: 125px; margin-left: auto; margin-right: auto; }

.qtpl-card__body { padding: 25px; }
.qtpl-card__label { color: var(--qtpl-accent); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.qtpl-card h3 { margin: 10px 0 0; color: var(--qtpl-ink); font-size: 21px; line-height: 1.25; font-weight: 760; }
.qtpl-card p { min-height: 67px; margin: 10px 0 0; color: var(--qtpl-text); font-size: 14px; line-height: 1.62; }
.qtpl-card__subject { margin-top: 18px; padding-top: 16px; border-top: 1px solid #ecece8; color: #4f4e4a; font-size: 12px; line-height: 1.45; }
.qtpl-card__subject span { display: block; margin-bottom: 5px; color: #8a8984; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.qtpl-card__action { display: inline-block; margin-top: 19px; color: var(--qtpl-accent) !important; font-size: 13px; font-weight: 800; text-decoration: none !important; }

/* editor section */
.qtpl-editor-section { display: grid; grid-template-columns: 1.12fr .88fr; gap: 68px; align-items: center; }
.qtpl-editor-section__visual { overflow: hidden; border: 1px solid #dfe0e5; border-radius: 22px; background: #fff; box-shadow: 0 25px 60px rgba(29,29,45,.1); }
.qtpl-editor-section__visual img { display: block; width: 100%; height: auto; }
.qtpl-steps { display: grid; gap: 0; margin: 26px 0 30px; padding: 0; list-style: none; border-top: 1px solid var(--qtpl-border); }
.qtpl-steps li { display: grid; grid-template-columns: 38px 1fr; gap: 14px; padding: 17px 0; border-bottom: 1px solid var(--qtpl-border); }
.qtpl-steps li > span { color: var(--qtpl-accent); font-size: 11px; font-weight: 800; }
.qtpl-steps strong { display: block; color: var(--qtpl-ink); font-size: 14px; }
.qtpl-steps p { margin: 5px 0 0; color: var(--qtpl-text); font-size: 13px; line-height: 1.55; }

/* responsive card */
.qtpl-responsive-card { display: grid; grid-template-columns: .9fr 1.1fr; gap: 55px; align-items: center; min-height: 470px; padding: 56px; border-radius: 24px; background: var(--qtpl-dark); color: #fff; }
.qtpl-responsive-card__content h2 { color: #fff; }
.qtpl-responsive-card__content p { margin: 16px 0 0; color: #aaaab5; font-size: 16px; line-height: 1.7; }
.qtpl-responsive-card__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.qtpl-responsive-card__tags span { padding: 8px 10px; border: 1px solid #343442; border-radius: 8px; color: #c2c2cc; font-size: 11px; font-weight: 700; }
.qtpl-devices { position: relative; min-height: 350px; }
.qtpl-device-desktop { width: 86%; min-height: 300px; padding: 22px; border: 7px solid #383844; border-radius: 16px; background: #f1f1f4; }
.qtpl-device-phone { position: absolute; right: 0; bottom: 0; width: 150px; min-height: 280px; padding: 18px 9px; border: 7px solid #383844; border-radius: 28px; background: #f1f1f4; }
.qtpl-device-mail { width: 68%; margin: 0 auto; padding: 14px; background: #fff; }
.qtpl-device-phone .qtpl-device-mail { width: 100%; }
.qtpl-device-mail i { display: block; height: 85px; border-radius: 6px; background: linear-gradient(135deg,#ececff,#aaa8ff); }
.qtpl-device-phone .qtpl-device-mail i { height: 66px; }
.qtpl-device-mail b { display: block; width: 78%; height: 8px; margin: 14px 0 9px; border-radius: 4px; background: #2f2f39; }
.qtpl-device-mail span { display: block; height: 5px; margin: 6px 0; border-radius: 3px; background: #e0e0e5; }
.qtpl-device-mail em { display: block; width: 46%; height: 22px; margin-top: 13px; border-radius: 4px; background: var(--qtpl-accent); }

/* start */
.qtpl-start-card { display: grid; grid-template-columns: 1.2fr .8fr; gap: 50px; align-items: center; padding: 42px; border: 1px solid var(--qtpl-border); border-radius: 20px; background: #fff; box-shadow: 0 14px 34px rgba(25,25,40,.04); }
.qtpl-start-card h2 { font-size: clamp(30px,3.3vw,42px); }
.qtpl-start-card__actions { display: grid; justify-items: start; gap: 18px; }
.qtpl-text-link { color: var(--qtpl-accent) !important; font-size: 13px; font-weight: 800; text-decoration: none !important; }

/* related */
.qtpl-related__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.qtpl-related-card { min-height: 235px; display: block; padding: 28px; border: 1px solid var(--qtpl-border); border-radius: 18px; background: #fff; color: inherit !important; text-decoration: none !important; box-shadow: 0 12px 30px rgba(25,25,40,.035); }
.qtpl-related-card > span { color: var(--qtpl-accent); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.qtpl-related-card h3 { margin: 27px 0 0; color: var(--qtpl-ink); font-size: 21px; font-weight: 760; }
.qtpl-related-card p { margin: 10px 0 0; color: var(--qtpl-text); font-size: 14px; line-height: 1.6; }
.qtpl-related-card b { display: block; margin-top: 20px; color: var(--qtpl-accent); font-size: 12px; }

/* faq */


@media (max-width: 1060px) {
    .qtpl-hero__grid,
    .qtpl-editor-section,
    .qtpl-responsive-card,
    .qtpl-start-card { grid-template-columns: 1fr; }
    .qtpl-hero-stack { width: min(640px,100%); margin: 0 auto; }
    .qtpl-gallery { grid-template-columns: repeat(2,1fr); }
    .qtpl-responsive-card { padding: 44px; }
    .qtpl-start-card__actions { grid-template-columns: auto 1fr; align-items: center; }
}

@media (max-width: 760px) {
    
    .qtpl-hero { padding: 48px 0 40px; }
    
    
    
    
    
    .qtpl-hero-stack { min-height: 410px; transform: scale(.86); transform-origin: top center; margin-bottom: -48px; }
    
    
    
    
    .qtpl-section-head h2,
    .qtpl-editor-section__content h2,
    .qtpl-responsive-card__content h2,
    .qtpl-start-card h2 { font-size: 34px; }
    .qtpl-gallery { grid-template-columns: 1fr; }
    .qtpl-card p { min-height: auto; }
    .qtpl-card__preview { min-height: 390px; }
    .qtpl-responsive-card { padding: 30px 22px; }
    .qtpl-devices { min-height: 320px; }
    .qtpl-device-desktop { width: 94%; min-height: 260px; }
    .qtpl-device-phone { width: 126px; min-height: 238px; }
    .qtpl-start-card { padding: 30px 24px; }
    .qtpl-start-card__actions { grid-template-columns: 1fr; width: 100%; }
    .qtpl-related__grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    
    .qtpl-hero-stack { min-height: 350px; transform: scale(.72); margin: 0 -56px -100px; width: calc(100% + 112px); }
    
    
    .qtpl-categories { justify-content: flex-start; }
    .qtpl-card__preview { min-height: 360px; padding: 22px 12px; }
    .qtpl-responsive-card { padding: 28px 18px; }
    .qtpl-device-phone { right: -4px; }
}