/* ===== New design styles ===== */

.hn-hero {
    background: #fbfbfb;
    border-bottom: 1px solid #ECEEF1;
    overflow: hidden;
    position: relative;
}
.hn-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(900px 420px at 88% -10%, rgba(36,201,255,.25), transparent 80%),
        radial-gradient(900px 420px at 12% 110%, rgba(255,246,92,.20), transparent 80%);
    pointer-events: none;
}

.hn-product-card {
    display: flex;
    padding: 20px;
    align-items: stretch;
    min-height: 150px;
    background: #fff;
    border-radius: 13px;
    overflow: hidden;
    border: 1px solid #E6E8EC;
    text-decoration: none;
    color: inherit;
    transition: transform .18s ease, box-shadow .18s ease;
}
.hn-product-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 28px rgba(20,23,28,.12);
    color: inherit;
}
.hn-product-card__img {
    flex: none;
    height: 144px;
    width: 260px;
    background-size: cover;
    background-position: center;
}
.hn-product-card__body {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px;
}
.hn-product-card h3 {
    font-size: 16px;
    color: #15171C;
}
.hn-product-card__body p {
    font-size: 16px;
    line-height: 1.45;
}
.hn-product-card__arrow {
    color: #2e8b57;
    font-weight: 800;
    font-size: 18px;
    flex: none;
}

.hn-calc-box {
    background: #fff;
    min-height: 710px;
    border: 1px solid #E0E0E0;
    padding: 28px 24px;
    box-shadow: 0 18px 44px rgba(20,23,28,.10);
}
.hn-calc-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #D9F0DE;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}
.hn-calc-subtitle {
    font-size: 14px;
    line-height: 1.5;
}
.hn-calc-box .form-label {
    font-size: 13px;
    color: #3A3F47;
}
.hn-calc-box .form-control,
.hn-calc-box .form-select {
    border-radius: 11px;
    border: 1.5px solid #E0E2E7;
}
.hn-resize-v {
    resize: vertical;
}
#calc .btn-success-custom {
    border-radius: 10px !important;
    font-size: 15px;
}

.btn-success-custom {
    border-radius: 10px !important;
}

#calc .btn-outline-dark {
    border-radius: 12px;
    font-size: 15px;
}

/* ============ SUCCESS PAGES ============ */
@keyframes sc-pulse { 0%{transform:scale(.9);opacity:.5;} 70%{transform:scale(1.5);opacity:0;} 100%{opacity:0;} }

.sc-section {
    position: relative;
    min-height: calc(100vh - 120px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(48px,7vw,96px) clamp(18px,4vw,48px);
    background: rgb(240,240,240);
    overflow: hidden;
}
.sc-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(900px 420px at 88% -10%, rgba(36,201,255,.25), transparent 80%),
        radial-gradient(900px 420px at 12% 110%, rgba(255,246,92,.20), transparent 80%);
    pointer-events: none;
}
.sc-card {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 560px;
    background: #fff;
    border: 1px solid rgb(224,224,224);
    border-radius: 24px;
    padding: clamp(32px,5vw,52px);
    box-shadow: 0 24px 60px rgba(20,23,28,.12);
    text-align: center;
}
.sc-icon-wrap {
    position: relative;
    width: 108px;
    height: 108px;
    margin: 0 auto;
}
.sc-icon-pulse {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #2E9E5B;
    opacity: .18;
    animation: sc-pulse 2s ease-out infinite;
}
.sc-icon {
    position: relative;
    width: 108px;
    height: 108px;
    border-radius: 50%;
    background: #E6F7EC;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sc-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 24px;
    padding: 6px 14px;
    border-radius: 999px;
    background: #E6F7EC;
    color: #177A43;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.sc-title {
    margin: 16px 0 0;
    letter-spacing: -.025em;
    color: #15171C;
    line-height: 1.1;
}
.sc-message {
    margin: 14px auto 0;
    max-width: 400px;
    font-size: 16px;
    line-height: 1.6;
    color: #5C626B;
}
.sc-rows {
    margin-top: 28px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: left;
}
.sc-row {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px 16px;
    background: #F7F8FA;
    border: 1px solid #ECEEF1;
    border-radius: 13px;
}
.sc-row-icon {
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sc-row-icon--green { background: #D9F0DE; }
.sc-row-icon--yellow { background: #FFF3C4; }
.sc-row-title {
    font-size: 15px;
    font-weight: 800;
    color: #15171C;
}
.sc-row-desc {
    font-size: 13px;
    color: #6B717A;
}
.sc-actions {
    margin-top: 28px;
    display: flex;
    flex-direction: column;
    gap: 11px;
}
.sc-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    background: #2E9E5B;
    color: #fff !important;
    font-weight: 800;
    font-size: 16px;
    padding: 15px;
    border-radius: 12px;
    text-decoration: none;
    transition: background .18s;
}
.sc-btn-primary:hover { background: #268A4F; color: #fff !important; }
.sc-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    background: #fff;
    color: #15171C !important;
    font-weight: 700;
    font-size: 16px;
    padding: 14px;
    border-radius: 12px;
    border: 1.5px solid #D8DBE0;
    text-decoration: none;
    transition: border-color .18s, color .18s;
}
.sc-btn-secondary:hover { border-color: #2E9E5B; color: #2E9E5B !important; }

.hn-about-card {
    padding: 20px 22px;
    border-radius: 13px;
}
.hn-about-card--green  { background: rgb(209 220 209 / 36%); border: 1px solid rgb(168 208 181 / 0.16); }
.hn-about-card--blue   { background: rgb(220 228 237 / 47%); border: 1px solid rgb(139 162 189 / 0.16); }
.hn-about-card--yellow { background: rgb(213 211 183 / 29%); border: 1px solid rgb(180 168 138 / 0.18); }
.hn-about-card--red    { background: rgb(214 212 236 / 40%); border: 1px solid rgb(130 140 190 / 0.18); }
.hn-about-card h4 {
    font-size: 16px;
    color: #15171C;
}
.hn-about-card p {
    font-size: 14px;
    line-height: 1.5;
}

.hn-tag {
    padding: 6px 14px;
    background: rgb(241,247,237);
    border: 1px solid rgb(250,250,250);
    border-radius: 7px;
    font-size: 14px;
    font-weight: 600;
    color: #3F4A3C;
    display: inline-block;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease;
}
.hn-tag:hover {
    background: rgb(229,241,222);
    border-color: rgb(200,225,190);
    color: #2E3A2B;
}

#app {
    padding-top: 3rem !important;
}

@media (max-width: 767px) {
    .hn-product-card__img { width: 100px; }
    .hn-calc-box { padding: 18px 16px; }
}

/* ============ CATALOG NEW ============ */
.cl-wrap { max-width: 1280px; width: 100%; margin-left: auto; margin-right: auto; padding-left: 16px; padding-right: 16px; }
.cl-section { background: #F3F4F6; padding: 24px 0 56px; overflow-x: clip; }
.cl-h1 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.02em; color: #15171C; }
.cl-subtitle { margin: 8px 0 0; font-size: 14px; color: #8A9099; }
.cl-sort-select { width: auto; font-weight: 600; border-radius: 10px; border: 1.5px solid #E0E2E7 !important; padding: 8px 32px 8px 12px; font-size: 13px; }
.cl-sort-select:focus { border-color: #9bd3b3 !important; box-shadow: 0 0 0 .18rem rgba(46,158,91,.18) !important; }

/* Sidebar filter */
.cl-filter-card { border-radius: 16px !important; border: 1px solid #ECEEF1 !important; overflow: hidden; }
.cl-filter-body { padding: 6px 18px 18px; max-height: calc(100vh - 160px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: #D0D4DA transparent; }
.cl-filter-body::-webkit-scrollbar { width: 4px; }
.cl-filter-body::-webkit-scrollbar-track { background: transparent; }
.cl-filter-body::-webkit-scrollbar-thumb { background: #D0D4DA; border-radius: 4px; }
.cl-filter-group { padding-top: 16px; border-top: 1px solid #F2F3F5; margin-top: 14px; }
.cl-filter-group:first-child { border-top: none; margin-top: 0; padding-top: 2px; }
.cl-filter-group-title { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #9298A1; margin-bottom: 10px; display: block; }
.cl-filter-opt { margin: 0; padding: 7px 8px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; gap: 9px; min-height: 0; }
.cl-filter-opt:hover { background: #F4F6F8; }
.cl-filter-opt .form-check-input { float: none; margin: 0; cursor: pointer; width: 1.1em; height: 1.1em; flex-shrink: 0; }
.cl-filter-opt .form-check-input:checked { background-color: #2E9E5B; border-color: #2E9E5B; }
.cl-filter-opt .form-check-input:focus { border-color: #9bd3b3; box-shadow: 0 0 0 .2rem rgba(46,158,91,.2); }
.cl-filter-opt-label { font-size: 14.5px; font-weight: 600; color: #3A3F47; cursor: pointer; margin: 0; }
.cl-filter-more-btn { width: 100%; margin-top: 8px; background: #F4F6F8; border: none; border-radius: 9px; padding: 9px; font-size: 13.5px; font-weight: 700; color: #6B717A; cursor: pointer; text-align: center; }
.cl-filter-more-btn:hover { background: #EAEEF1; }
.cl-filter-group--open .cl-filter-opts-wrap { max-height: 220px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #D0D4DA transparent; }
.cl-filter-group--open .cl-filter-opts-wrap::-webkit-scrollbar { width: 4px; }
.cl-filter-group--open .cl-filter-opts-wrap::-webkit-scrollbar-track { background: transparent; }
.cl-filter-group--open .cl-filter-opts-wrap::-webkit-scrollbar-thumb { background: #D0D4DA; border-radius: 4px; }
.cl-clear-btn { font-size: 13px; font-weight: 700; color: #2E9E5B; background: none; border: none; padding: 0; cursor: pointer; }
.cl-clear-btn:hover { color: #268A4F; }

/* Active chips */
.cl-chip { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1.5px solid #D8DBE0; border-radius: 10px; padding: 6px 12px; font-size: 13px; font-weight: 700; color: #15171C; cursor: pointer; line-height: 1; }
.cl-chip:hover { border-color: #2E9E5B; color: #2E9E5B; }

/* Subscribe banner */
.cl-subscribe-banner { border-radius: 16px; border: 1px solid #ECEEF1 !important; background: #F8FAFC; padding: 14px 18px; margin-bottom: 24px; }
.cl-subscribe-icon { width: 46px; height: 46px; border-radius: 12px; background: #E8F4FB; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cl-subscribe-tg-btn { display: inline-flex; align-items: center; gap: 8px; background: rgb(126,198,240); color: #fff !important; font-weight: 700; font-size: 14px; padding: 8px 10px; border-radius: 11px; text-decoration: none; }
.cl-subscribe-tg-btn:hover { background: rgb(108,182,226); }
.cl-subscribe-social { width: 40px; height: 40px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; flex-shrink: 0; }
.cl-subscribe-social-wa { background: #E9F7EF; color: #3FA76B; }
.cl-subscribe-social-wa:hover { background: #D8F0E2; color: #3FA76B; }
.cl-subscribe-social-vb { background: #EFEDFC; color: #7E6FE8; }
.cl-subscribe-social-vb:hover { background: #E5E1FA; color: #7E6FE8; }
.cl-subscribe-social-tt { background: #EEEFF1; color: #2B2E35; }
.cl-subscribe-social-tt:hover { background: #E2E4E7; color: #2B2E35; }

/* Product card */
.cl-product-card { border-radius: 10px !important; overflow: hidden; transition: transform .18s ease, box-shadow .18s ease; }
.cl-product-card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(20,23,28,.13) !important; }
/* Image link wrapper */
.cl-product-img-link { display: block; }

.cl-product-img-wrap { position: relative; aspect-ratio: 4/3; background: linear-gradient(135deg,#c4ccd3 0%,#eef1f3 42%,#aeb6bd 100%); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.cl-product-img-wrap img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cl-product-img-placeholder { position: relative; font-weight: 800; font-size: 22px; letter-spacing: .06em; color: rgba(255,255,255,.6); text-shadow: 0 1px 3px rgba(20,23,28,.18); }

/* Image slider */
.cl-img-slide { opacity: 0; transition: opacity .22s ease; }
.cl-img-slide--active { opacity: 1; }
.cl-img-prev, .cl-img-next { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(21,23,28,.55); color: #fff; border: none; border-radius: 50%; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 4; opacity: 0; transition: opacity .15s, background .15s; flex-shrink: 0; }
.cl-img-prev { left: 8px; }
.cl-img-next { right: 8px; }
.cl-img-prev:hover, .cl-img-next:hover { background: rgba(21,23,28,.82); }
.cl-product-img-wrap:hover .cl-img-prev,
.cl-product-img-wrap:hover .cl-img-next { opacity: 1; }
.cl-img-dots { position: absolute; bottom: 9px; left: 50%; transform: translateX(-50%); display: flex; gap: 5px; z-index: 4; }
.cl-img-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.45); cursor: pointer; transition: background .15s, transform .15s; }
.cl-img-dot--active { background: #fff; transform: scale(1.25); }
/* Badge base */
.cl-badge-wait    { position: absolute; top: 12px; left: 12px;  font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 8px; }
.cl-badge-top     { position: absolute; top: 12px; right: 12px; font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 8px; }
.cl-badge-discount{ position: absolute; top: 12px; right: 12px; font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 8px; }

/* Лівий стек бейджів */
.cl-badge-left-stack { position: absolute; top: 12px; left: 12px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; z-index: 3; }
.cl-badge-left-stack .cl-badge-wait { position: static; }
.cl-badge-video { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 5px 11px 5px 8px; border-radius: 8px; backdrop-filter: blur(3px); background: rgb(63,66,71); color: #ffffff; text-decoration: none; white-space: nowrap; transition: background .15s; }
.cl-badge-video:hover { background: rgb(45,48,52); color: #ffd24a; }

.cl-badge-wait    { background: rgba(21,23,28,.78); color: #FFD24A; }
.cl-badge-top     { background: rgba(255,203,5,.9);  color: #15171C; }
.cl-badge-discount{ background: rgba(255,61,61,.8);  color: #fff; }

.cl-badge--yellow      { background: #FFCB05;              color: #15171C; }
.cl-badge--green       { background: #2E9E5B;              color: #fff;    }
.cl-badge--dark        { background: #15171C;              color: #FFD24A; }
.cl-badge--blue        { background: #7EC6F0;              color: #0C3A57; }
.cl-badge--soft-green  { background: #E6F7EC;              color: #1B9E54; }
.cl-badge--soft-yellow { background: #FFF3D1;              color: #9A6B00; }
.cl-badge--red         { background: rgba(255,61,61,.8);   color: #fff;    }
.cl-card-body { padding: 18px; }
.cl-price-main { font-size: 20px; font-weight: 700; letter-spacing: -.01em; color: #15171C; }
.cl-price-unit { font-size: 15px; font-weight: 700; color: #8A9099; }
.cl-price-m2 { font-size: 14px; color: rgb(144,144,146); font-weight: 700; margin-top: 2px; }
.cl-stock-badge { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 14px; font-weight: 700; color: #1B9E54; }
.cl-wait-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: #B58A00; }
.cl-card-footer { padding-top: 16px; margin-top: auto; }
.cl-btn-notify { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; background: #fff; font-size: 15px; padding: 12px; border-radius: 11px; border: 1.5px solid #D8DBE0; cursor: pointer; text-decoration: none; transition: border-color .15s, color .15s; line-height: 1; }
.cl-btn-notify:hover { border-color: #2E9E5B; color: #2E9E5B !important; }
.cl-btn-ask { font-size: 13.5px; font-weight: 700; color: #8A9099; text-decoration: none; background: none; border: none; cursor: pointer; padding: 0; }
.cl-btn-ask:hover { color: #15171C; }

.cl-btn-notify svg { display: block; flex-shrink: 0; }

/* Grid loading state */
.cl-loading { opacity: .5; pointer-events: none; transition: opacity .2s; }

/* Variant B — characteristics chips */
.cl-param-chip { font-size: 12px; font-weight: 700; color: #5C626B; background: #F2F4F6; border-radius: 7px; padding: 5px 9px; line-height: 1; }

/* Variant B — quantity row (used by catalog-new.js) */
.cl-qty-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; padding: 10px 12px; background: #F7F8FA; border-radius: 11px; }
.cl-qty-controls { display: flex; align-items: center; border: 1.5px solid #E0E2E7; border-radius: 10px; background: #fff; overflow: hidden; }
.cl-qty-dec, .cl-qty-inc { width: 36px; height: 38px; border: none; background: #fff; font-size: 20px; font-weight: 700; color: #6B717A; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .12s; line-height: 1; }
.cl-qty-dec:hover, .cl-qty-inc:hover { background: #F0F2F4; }
.cl-qty-val { min-width: 38px; text-align: center; font-size: 15px; font-weight: 800; color: #15171C; }
.cl-qty-total-wrap { text-align: right; }
.cl-qty-total-label { font-size: 11.5px; color: #9298A1; font-weight: 600; }
.cl-qty-total { font-size: 19px; font-weight: 800; color: #15171C; line-height: 1.1; }

/* ============ UTILITY: SHARED NEW DESIGN ============ */

/* Card frame used across new design pages */
.nd-card {
    border-radius: 16px !important;
    border: 1px solid #ECEEF1 !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.06) !important;
}
/* Lightweight border only (for cards that already have BS radius/shadow) */
.nd-border {
    border: 1px solid #ECEEF1 !important;
}
/* Square icon container 44×44 */
.nd-icon-box {
    width: 44px;
    height: 44px;
}
/* Sticky element pinned below fixed navbar */
.nd-sticky-74 {
    position: sticky;
    top: 74px;
}

/* ============ CONTACTS ============ */
.contact-social-btn { border-radius: 10px; color: #555; background: #f0f0f0; border: none; transition: background .2s, color .2s; }
.contact-social-btn:hover { color: #fff; }
.contact-social-btn--viber:hover    { background: #7360F2; }
.contact-social-btn--whatsapp:hover { background: #25D366; }
.contact-social-btn--telegram:hover { background: #2AABEE; }
.contact-social-btn--youtube:hover  { background: #FF0000; }
.contact-social-btn--tiktok:hover   { background: #000; }

/* ============ SUBSCRIBE BANNER ============ */
.nd-subscribe-text {
    min-width: 200px;
    font-size: 14.5px;
    line-height: 1.5;
    color: #3A3F47;
    font-weight: 500;
}

/* ============ PRODUCT PAGE ============ */
.pn-section { background: #F3F4F6; padding: 28px 0 56px; min-height: calc(100vh - 150px); }
.buybox { position: sticky; top: 74px; }
.txt-brand { color: #2E9E5B !important; }

/* Nav-tabs brand style (product page) */
.cl-section .nav-tabs .nav-link.active { color: #15171C; border-top: 4px solid #b8b8b8; font-weight: 700; }
.cl-section .nav-tabs .nav-link { color: #6c757d; font-weight: 600; }
.cl-section .nav-tabs { border-color: #ECEEF1; }

/* Qty stepper button */
.step-btn { width: 44px; }

/* FAQ accordion (product page) */
.faq-accordion .accordion-button:not(.collapsed) {
    background-color: #f5f7fa;
    color: #212529;
    box-shadow: none;
}

/* Gallery */
.product-gallery-main { aspect-ratio: 1/1; background: #fff; border-radius: 1rem; overflow: hidden; }
.product-gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.product-thumb { aspect-ratio: 1/1; border-radius: 10px; overflow: hidden; border: 2px solid transparent; cursor: pointer; background: #fff; flex: 1; }
.product-thumb.active { border-color: #2E9E5B; }
.product-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* Product badges */
.nd-badge-in-stock { background: #E6F7EC; color: #1B9E54; }

/* Typography helpers */
.nd-stars       { font-size: 15px; letter-spacing: 1px; }
.nd-video-link  { font-size: 13.5px; color: #15171C; }
.nd-price-unit-size { font-size: 17px; }
.nd-geo-link    { font-size: 15px; font-weight: 600; }
.nd-or-row      { font-size: 13px; }
.nd-video-heading { font-size: 18px; }
.nd-section-h   { font-size: 17px; }
.nd-lh-16       { line-height: 1.6; }

/* Linked products horizontal scroll */
.nd-linked-card { width: 210px; scroll-snap-align: start; }
.nd-linked-card-img { aspect-ratio: 1/1; overflow: hidden; }
.nd-text-clamp2 {
    font-size: 13px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.nd-scroll-x {
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.nd-scroll-x::-webkit-scrollbar { display: none; }
#linkedProductsScroll::-webkit-scrollbar { display: none; }

/* Round scroll nav buttons */
.nd-scroll-btn { width: 32px !important; height: 32px !important; padding: 0 !important; }