/* =========================================================
   Aquasales — su filtrasiya sistemləri saytı
   BirMarket design integration
   ========================================================= */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; min-height: 100%; }

:root {
    /* Colors */
    --primary: #0088ff;
    --primary-dark: #0066cc;
    --navy: #111827;
    --text: #30333a;
    --muted: #727986;
    --line: #ececf0;
    --placeholder: #f4f4f5;
    --white: #FFFFFF;
    --foam: #E9F2EF;
    
    /* Typography */
    --font-head: "Space Grotesk", Arial, sans-serif;
    --font-body: "IBM Plex Sans", Arial, sans-serif;
    
    /* Spacing */
    --radius-s: 4px;
    --radius-m: 10px;
    --shadow-soft: 0 12px 30px -18px rgba(14, 34, 36, 0.35);
    --max-width: 1180px;
}

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

body {
    font-family: var(--font-body);
    color: var(--text);
    background: var(--white);
    line-height: 1.6;
    font-size: 16px;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.15; margin: 0 0 0.5em; color: var(--text); font-weight: 600; }
h1 { font-size: 3.052rem; letter-spacing: -0.01em; }
h2 { font-size: 2.441rem; letter-spacing: -0.008em; }
h3 { font-size: 1.953rem; }
h4 { font-size: 1.563rem; }
p { margin: 0 0 1em; max-width: 62ch; }

.wrap { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }

.skip-link {
    position: absolute; left: -999px; top: 0; background: var(--primary); color: var(--white);
    padding: 10px 16px; z-index: 500; border-radius: 0 0 6px 0;
}
.skip-link:focus { left: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
}

/* ============= TOPBAR ============= */
.topbar {
    height: 36px;
    background: #f1f1f1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #707070;
    font-size: 14px;
    position: relative;
}

.topbar .phone {
    position: absolute;
    right: 187px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #4e5259;
    font-weight: 600;
}

.topbar .phone-icon {
    font-size: 16px;
    transform: rotate(-18deg);
}

.language {
    position: absolute;
    right: 43px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #4e5259;
}

.flag {
    width: 25px;
    height: 17px;
    object-fit: cover;
    border-radius: 1px;
    box-shadow: 0 0 0 1px rgba(0,0,0,.08);
}

/* ============= HEADER ============= */
.site-header {
    min-height: 116px;
    border-bottom: 1px solid #e8edf2;
    border-radius: 0 0 22px 22px;
    background: rgba(255,255,255,.98);
    display: flex;
    align-items: flex-start;
    padding: 17px 57px 16px;
    position: relative;
    z-index: 20;
    box-shadow: 0 4px 18px rgba(19, 45, 64, .06);
    gap: 16px;
}

.brand {
    width: 188px;
    min-width: 188px;
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--primary);
    line-height: 1;
}

.brand-copy { display: flex; flex-direction: column; gap: 5px; }
.brand-name {
    color: var(--primary);
    font-family: var(--font-head);
    font-size: 1.88rem;
    font-weight: 700;
    letter-spacing: -.045em;
}

.brand-sub {
    color: #718398;
    font-size: .64rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.brand-mark {
    width: 20px;
    height: 31px;
    position: relative;
    display: inline-block;
}

.brand-mark:before,
.brand-mark:after {
    content: "";
    position: absolute;
    width: 13px;
    height: 22px;
    border: 4px solid var(--primary);
    transform: rotate(0deg);
}

.brand-mark:before {
    left: 1px;
    top: 4px;
    border-radius: 2px;
    transform: rotate(45deg) skew(-8deg,-8deg);
}

.brand-mark:after {
    left: 5px;
    top: 5px;
    border-width: 0;
    width: 8px;
    height: 15px;
    background: var(--white);
    transform: rotate(45deg);
}

.catalog {
    height: 44px;
    min-width: 118px;
    margin-left: 0;
    margin-top: 0;
    border: 0;
    border-radius: 10px;
    background: var(--primary);
    color: var(--white);
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.catalog-menu {
    position: relative;
    flex: 0 0 auto;
    z-index: 30;
}

.catalog:hover,
.catalog:focus-visible {
    background: var(--primary-dark);
}

.catalog-chevron {
    font-size: .68rem;
    transition: transform .2s ease;
}

.catalog-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    width: 285px;
    padding: 8px;
    display: grid;
    gap: 3px;
    background: var(--white);
    border: 1px solid #e5eaf0;
    border-radius: 14px;
    box-shadow: 0 18px 42px rgba(17, 45, 67, .16);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}

.catalog-dropdown::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 30px;
    width: 11px;
    height: 11px;
    background: var(--white);
    border-left: 1px solid #e5eaf0;
    border-top: 1px solid #e5eaf0;
    transform: rotate(45deg);
}

.catalog-dropdown a {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 3px;
    padding: 11px 12px;
    border-radius: 9px;
    color: var(--text);
}

.catalog-dropdown a:hover,
.catalog-dropdown a:focus-visible {
    background: #eef7ff;
    color: var(--primary-dark);
}

.catalog-dropdown strong { font-size: .88rem; }
.catalog-dropdown small { color: var(--muted); font-size: .73rem; line-height: 1.35; }
.catalog-menu:hover .catalog-dropdown,
.catalog-menu:focus-within .catalog-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.catalog-menu:hover .catalog-chevron,
.catalog-menu:focus-within .catalog-chevron { transform: rotate(180deg); }

.grid-icon {
    width: 15px;
    height: 15px;
    display: grid;
    grid-template-columns: repeat(2, 6px);
    grid-template-rows: repeat(2, 6px);
    gap: 2px;
}
.grid-icon span {
    background: var(--white);
    border-radius: 1px;
}

.search {
    height: 44px;
    flex: 1;
    max-width: 657px;
    display: flex;
    border: 1px solid #e1e2e6;
    border-radius: 10px;
    overflow: hidden;
}

.search input {
    flex: 1;
    border: 0;
    outline: 0;
    padding: 0 17px;
    font-size: 14px;
    color: #444;
    font-family: inherit;
}

.search input::placeholder { color: #a4a6ab; }

.search button {
    width: 55px;
    border: 0;
    background: var(--primary);
    color: var(--white);
    font-size: 19px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.search button:hover {
    background: var(--primary-dark);
}

.actions {
    display: flex;
    align-items: flex-start;
    gap: 31px;
    margin-left: auto;
    padding-top: 0;
}

.action {
    min-width: 42px;
    text-align: center;
    color: #4e525a;
    font-size: 13px;
    white-space: nowrap;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.action > i {
    display: block;
    height: 23px;
    color: #526273;
    font-size: 18px;
    line-height: 21px;
}
.action:hover { color: var(--primary); }
.action:hover > i { color: var(--primary); }

.orders-icon:before { content: "▣"; }
.cart-icon:before { content: "♟"; }
.heart-icon:before { content: "♥"; }
.user-icon:before { content: "●"; }

.action-badge {
    position: absolute;
    top: -5px;
    right: -8px;
    background: var(--primary);
    color: var(--white);
    font-size: 10px;
    font-weight: 700;
    border-radius: 999px;
    min-width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

.add-location {
    position: absolute;
    right: 69px;
    bottom: 15px;
    color: var(--primary);
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pin {
    width: 14px;
    height: 14px;
    border: 2px solid var(--primary);
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    position: relative;
}
.pin:after {
    content: "";
    width: 4px;
    height: 4px;
    border: 1.5px solid var(--primary);
    border-radius: 50%;
    position: absolute;
    left: 3px;
    top: 3px;
}

/* ============= BUTTONS ============= */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-family: var(--font-body); font-weight: 600; font-size: 0.95rem;
    padding: 12px 22px; border-radius: var(--radius-s); border: 1px solid transparent;
    cursor: pointer; transition: transform 0.15s ease, background 0.15s ease, border-color .15s ease;
    text-align: center;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--primary); color: var(--white); }
.btn-primary:hover { background: var(--primary-dark); }
.btn-outline { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.5); }
.btn-outline:hover { border-color: var(--white); }
.btn-ghost { background: transparent; color: var(--navy); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--navy); }
.btn-block { width: 100%; }
.btn-sm { padding: 8px 14px; font-size: 0.85rem; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; }

/* ============= VIDEO HERO ============= */
.hero {
    position: relative;
    width: calc(100% + 114px);
    margin: -20px -57px 0;
    min-height: 590px;
    background: #0d3a42;
    color: var(--white);
    overflow: hidden;
    isolation: isolate;
}

.hero__video,
.hero__overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.hero__video {
    z-index: -2;
    object-fit: cover;
    object-position: center;
    filter: saturate(.9) contrast(1.05);
}

.hero__overlay {
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(6, 30, 37, .9) 0%, rgba(10, 53, 62, .72) 45%, rgba(7, 37, 45, .38) 100%),
        linear-gradient(180deg, rgba(4, 26, 31, .18), rgba(4, 26, 31, .55));
}

.hero__inner {
    min-height: 510px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
    position: relative;
    z-index: 1;
}

.hero__copy { max-width: 650px; padding: 74px 0 64px; }
.hero__eyebrow { color: #63baff; font-weight: 700; font-size: .92rem; margin-bottom: 16px; letter-spacing: .04em; }
.hero h1 { color: var(--white); max-width: 13ch; font-size: clamp(2.6rem, 5vw, 4.6rem); line-height: 1.04; letter-spacing: -.035em; margin-bottom: 22px; }
.hero__lead { color: rgba(255,255,255,.86); font-size: 1.1rem; max-width: 53ch; line-height: 1.7; }
.hero__actions { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; }
.hero__badge { display: inline-flex; align-items: center; gap: 10px; align-self: flex-end; margin: 0 0 80px; padding: 12px 17px; color: rgba(255,255,255,.9); border: 1px solid rgba(255,255,255,.25); border-radius: 999px; background: rgba(0,0,0,.18); backdrop-filter: blur(8px); font-size: .86rem; }
.hero__badge-dot { width: 8px; height: 8px; border-radius: 50%; background: #63baff; box-shadow: 0 0 0 5px rgba(99,186,255,.16); }

.stats-strip { background: rgba(10, 24, 39, .92); color: var(--white); position: relative; z-index: 1; }
.stats-strip__row { display: flex; flex-wrap: wrap; gap: 0; max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }
.stats-strip__item { flex: 1 1 160px; padding: 24px; border-left: 1px solid rgba(255,255,255,.12); }
.stats-strip__item:first-child { border-left: 0; }
.stats-strip__num { font-family: var(--font-head); font-size: 2rem; font-weight: 700; color: #42aaff; display: block; }
.stats-strip__label { color: rgba(255,255,255,.7); font-size: .86rem; }

@media (prefers-reduced-motion: reduce) {
    .hero__video { display: none; }
}


/* ============= SECTIONS ============= */
.section { padding: 72px 0; }
.section--tight { padding: 48px 0; }
.section--foam { background: var(--foam); }
.section__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 36px; flex-wrap: wrap; }
.section__head p { color: var(--muted); margin: 0; }

/* ============= HOME CHOICES ============= */
.choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.choice-card {
    position: relative;
    min-height: 280px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    padding: 32px;
    border-radius: 20px;
    color: var(--white);
    isolation: isolate;
    transition: transform .25s ease, box-shadow .25s ease;
}

.choice-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background: linear-gradient(135deg, #087bcf, #063d70);
}

.choice-card--air::before {
    background: linear-gradient(135deg, #426b7a, #182f4d);
}

.choice-card::after {
    content: "";
    position: absolute;
    width: 230px;
    height: 230px;
    right: -54px;
    top: -60px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 50%;
    box-shadow: 0 0 0 28px rgba(255,255,255,.05), 0 0 0 56px rgba(255,255,255,.035);
    z-index: -1;
}

.choice-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 35px rgba(0, 80, 140, .22);
}

.choice-card__number {
    position: absolute;
    top: 24px;
    right: 28px;
    color: rgba(255,255,255,.6);
    font: 700 1rem var(--font-head);
}

.choice-card__icon {
    position: absolute;
    top: 22px;
    left: 30px;
    color: rgba(255,255,255,.3);
    font-size: 68px;
    line-height: 1;
}

.choice-card__content { display: grid; gap: 10px; max-width: 420px; }
.choice-card__content strong { font: 700 2rem/1.1 var(--font-head); }
.choice-card__content span { color: rgba(255,255,255,.82); line-height: 1.6; }
.choice-card__content em { color: #fff; font-style: normal; font-weight: 700; margin-top: 8px; }
.choice-card__content b { color: #8fd0ff; margin-left: 7px; }

/* ============= CATEGORY ROWS ============= */
.kat-row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
    padding: 40px 0; border-top: 1px solid var(--line);
}
.kat-row:last-child { border-bottom: 1px solid var(--line); }
.kat-row:nth-child(even) .kat-row__media { order: 2; }
.kat-row__index { font-family: var(--font-head); color: var(--primary); font-weight: 700; font-size: 0.9rem; }
.kat-row__media {
    aspect-ratio: 4/3; border-radius: var(--radius-m); background: var(--foam);
    display: flex; align-items: center; justify-content: center; overflow: hidden; border: 1px solid var(--line);
}
.kat-row__media img { width: 100%; height: 100%; object-fit: cover; }
.kat-row__body h3 { margin-bottom: 10px; }
.kat-row__body p { color: var(--muted); }
.kat-row__soon { display: inline-block; margin-top: 10px; font-size: 0.85rem; color: var(--primary-dark); background: #F3E3D4; padding: 4px 10px; border-radius: 999px; }

/* ============= PRODUCT GRID ============= */
.product-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 22px;
}
.product-card {
    background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-m);
    display: flex; flex-direction: column; overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.product-card:hover { border-color: #2C6B70; box-shadow: var(--shadow-soft); }
.product-card__media { aspect-ratio: 1/1; background: var(--foam); position: relative; }
.product-card__media img { width: 100%; height: 100%; object-fit: cover; }
.product-card__kat {
    position: absolute; top: 10px; left: 10px; background: rgba(14,34,36,0.82); color: var(--white);
    font-size: 0.72rem; padding: 4px 9px; border-radius: 999px; font-weight: 600;
}
.product-card__body { padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.product-card__body h4 { font-size: 1.08rem; margin: 0; }
.product-card__desc { color: var(--muted); font-size: 0.88rem; margin: 0; flex: 1; }
.product-card__price { font-family: var(--font-head); font-weight: 700; color: #163C42; font-size: 1.15rem; margin-top: 6px; }
.product-card__actions { display: flex; gap: 8px; margin-top: 10px; }

.product-card--featured { grid-column: span 2; grid-row: span 2; }
.product-card--featured .product-card__media { aspect-ratio: 16/11; }
.product-card--featured h4 { font-size: 1.4rem; }

/* ============= FILTERS ============= */
.catalog-layout { display: grid; grid-template-columns: 240px 1fr; gap: 40px; align-items: flex-start; }
.filters { position: sticky; top: 96px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 22px; }
.filters h3 { font-size: 1.05rem; margin-bottom: 14px; }
.filters fieldset { border: 0; padding: 0; margin: 0 0 22px; }
.filters legend { font-weight: 600; font-size: 0.85rem; color: var(--muted); margin-bottom: 8px; padding: 0; }
.filters label { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 0.92rem; cursor: pointer; }
.filters input[type="radio"], .filters input[type="checkbox"] { accent-color: var(--primary); }
.filters input[type="number"] { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-s); font-family: inherit; }
.filters .price-range { display: flex; gap: 8px; align-items: center; }
.filters select { width: 100%; padding: 9px 10px; border: 1px solid var(--line); border-radius: var(--radius-s); font-family: inherit; background: var(--white); }

.catalog-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; flex-wrap: wrap; gap: 12px; }
.catalog-toolbar__count { color: var(--muted); font-size: 0.92rem; }

.empty-state {
    border: 1px dashed var(--line); border-radius: var(--radius-m); padding: 48px 24px; text-align: center; color: var(--muted);
    grid-column: 1 / -1;
}

/* ============= PRODUCT DETAIL ============= */
.product-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: start; }
.product-detail__media { border: 1px solid var(--line); border-radius: var(--radius-m); overflow: hidden; background: var(--foam); aspect-ratio: 1/1; }
.product-detail__media img { width: 100%; height: 100%; object-fit: cover; }
.product-detail__kat { color: var(--primary-dark); font-weight: 600; font-size: 0.88rem; }
.product-detail__price { font-family: var(--font-head); font-size: 1.953rem; font-weight: 700; color: #163C42; margin: 12px 0 22px; }
.product-detail__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 30px; }
.product-detail__desc { border-top: 1px solid var(--line); padding-top: 22px; }
.product-detail__desc h3 { font-size: 1.1rem; }
.product-detail__desc-text { color: var(--text); white-space: pre-line; max-width: 68ch; }
.qty-input { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--radius-s); overflow: hidden; }
.qty-input button { background: var(--foam); border: 0; width: 36px; height: 44px; cursor: pointer; font-size: 1.1rem; }
.qty-input input { width: 48px; height: 44px; border: 0; text-align: center; font-family: inherit; font-size: 1rem; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }

.breadcrumb { color: var(--muted); font-size: 0.88rem; margin-bottom: 20px; }
.breadcrumb a:hover { color: #163C42; text-decoration: underline; }

/* ============= REFERANSLAR ============= */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 32px; border-bottom: 1px solid var(--line); }
.tabs a { padding: 12px 4px; margin-right: 24px; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; }
.tabs a.is-active { color: #163C42; border-color: var(--primary); }

.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.gallery-card { border-radius: var(--radius-m); overflow: hidden; border: 1px solid var(--line); background: var(--white); }
.gallery-card__media { aspect-ratio: 4/3; background: var(--foam); }
.gallery-card__media img, .gallery-card__media video { width: 100%; height: 100%; object-fit: cover; }
.gallery-card__body { padding: 14px 16px; }
.gallery-card__body h4 { font-size: 1rem; margin: 0 0 4px; }
.gallery-card__body span { color: var(--muted); font-size: 0.85rem; }
.category-filter-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
.pill { padding: 7px 16px; border-radius: 999px; border: 1px solid var(--line); font-size: 0.88rem; font-weight: 500; color: var(--text); }
.pill.is-active, .pill:hover { border-color: #163C42; background: #163C42; color: var(--white); }

.review-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.review-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 22px; }
.review-card__stars { color: var(--primary); font-size: 0.95rem; margin-bottom: 10px; letter-spacing: 2px; }
.review-card__quote { font-style: normal; color: var(--text); }
.review-card__person { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.review-card__avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--foam); overflow: hidden; flex-shrink: 0; }
.review-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.review-card__name { font-weight: 600; font-size: 0.92rem; }
.review-card__job { color: var(--muted); font-size: 0.82rem; }

/* ============= CART ============= */
.cart-table { width: 100%; border-collapse: collapse; }
.cart-table th { text-align: left; font-size: 0.8rem; text-transform: none; color: var(--muted); border-bottom: 1px solid var(--line); padding: 0 12px 12px; font-weight: 600; }
.cart-table td { padding: 16px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.cart-row__product { display: flex; align-items: center; gap: 14px; }
.cart-row__media { width: 64px; height: 64px; border-radius: var(--radius-s); overflow: hidden; background: var(--foam); flex-shrink: 0; }
.cart-row__media img { width: 100%; height: 100%; object-fit: cover; }
.cart-summary { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 24px; }
.cart-summary__row { display: flex; justify-content: space-between; padding: 8px 0; color: var(--muted); }
.cart-summary__total { display: flex; justify-content: space-between; padding: 14px 0; font-weight: 700; font-size: 1.2rem; color: #163C42; border-top: 1px solid var(--line); margin-top: 6px; }
.cart-layout { display: grid; grid-template-columns: 1fr 320px; gap: 40px; align-items: start; }
.link-remove { color: #B0402F; font-size: 0.85rem; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.form-field--full { grid-column: 1 / -1; }
.form-field label { font-weight: 600; font-size: 0.9rem; }
.form-field input, .form-field textarea {
    padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-s); font-family: inherit; font-size: 1rem;
}
.form-field textarea { resize: vertical; min-height: 100px; }
.form-note { font-size: 0.82rem; color: var(--muted); }

.alert { padding: 14px 18px; border-radius: var(--radius-s); margin-bottom: 20px; font-size: 0.92rem; }
.alert-error { background: #FBEAE6; color: #B0402F; border: 1px solid #EFC9BE; }
.alert-success { background: #E6F1EB; color: #2E6B4F; border: 1px solid #BFDECB; }

.order-confirm { text-align: center; padding: 60px 0; }
.order-confirm__no { font-family: var(--font-head); font-size: 2.441rem; color: #163C42; font-weight: 700; }
.order-confirm__actions { display: flex; gap: 14px; justify-content: center; margin-top: 28px; flex-wrap: wrap; }

/* ============= CTA BAND ============= */
.cta-band { background: #163C42; color: var(--white); padding: 56px 0; }
.cta-band__inner { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.cta-band h2 { color: var(--white); margin-bottom: 6px; }
.cta-band p { color: rgba(255,255,255,0.75); margin: 0; }

/* ============= CONTACT ============= */
.contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.contact-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 26px; margin-bottom: 16px; }
.contact-card h4 { margin-bottom: 6px; font-size: 1.02rem; }
.contact-card p { color: var(--muted); margin: 0; }

/* ============= VAKIO PAGE ============= */
.vakio-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #092f3a 0%, #14596a 55%, #0b3548 100%);
    color: var(--white);
}

.vakio-hero__inner {
    min-height: 500px;
    display: grid;
    grid-template-columns: 1fr .9fr;
    gap: 48px;
    align-items: center;
}

.vakio-hero__content { padding: 72px 0; position: relative; z-index: 1; }
.vakio-hero h1 { color: var(--white); max-width: 12ch; font-size: clamp(2.6rem, 5vw, 4.6rem); line-height: 1.03; letter-spacing: -.04em; }
.vakio-hero__content > p:not(.hero__eyebrow) { max-width: 48ch; color: rgba(255,255,255,.8); font-size: 1.08rem; line-height: 1.7; }
.vakio-hero__visual { position: relative; min-height: 390px; }
.vakio-hero__device { position: absolute; z-index: 2; right: 19%; bottom: 34px; width: 145px; height: 270px; border-radius: 72px 72px 22px 22px; background: linear-gradient(115deg, #f8fdff, #9dbbc5 48%, #477b8a); box-shadow: 22px 24px 45px #001b2b66, inset -13px -4px 18px #24556555; display: grid; place-items: start center; padding-top: 38px; color: #1b5c6a; font: 700 .72rem var(--font-head); }
.vakio-hero__device::before { content: ""; position: absolute; top: 15px; width: 45px; height: 4px; border-radius: 6px; background: #396c79; opacity: .65; }
.vakio-hero__device i { position: absolute; left: 22px; right: 22px; bottom: 32px; height: 4px; border-radius: 4px; background: #fff8; }
.vakio-hero__device b { position: absolute; bottom: 17px; width: 9px; height: 9px; border-radius: 50%; background: #27b7c7; box-shadow: 0 0 12px #27b7c7; }
.vakio-hero__orb { position: absolute; border: 1px solid #8cd9e344; border-radius: 50%; }
.vakio-hero__orb--one { width: 355px; height: 355px; right: 2%; top: 24px; box-shadow: 0 0 0 35px #8cd9e30b, 0 0 0 70px #8cd9e305; }
.vakio-hero__orb--two { width: 210px; height: 210px; left: 10%; bottom: 25px; border-color: #fff2; }
.vakio-hero__air { position: absolute; z-index: 1; width: 190px; height: 72px; border: 2px solid #8cd9e366; border-left: 0; border-radius: 0 100% 100% 0; transform: rotate(-17deg); }
.vakio-hero__air--one { right: -2%; top: 138px; }
.vakio-hero__air--two { right: 2%; top: 204px; width: 145px; opacity: .55; }
.vakio-process { background: var(--white); }
.vakio-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 42px 26px; }
.vakio-step { position: relative; display: grid; grid-template-columns: 54px 1fr; gap: 18px; }
.vakio-step__number { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 16px; background: #e8f5ff; color: var(--primary); font: 700 1rem var(--font-head); }
.vakio-step__line { position: absolute; top: 27px; left: 54px; width: calc(100% - 28px); height: 1px; background: linear-gradient(90deg, #b8dcf6, transparent); }
.vakio-step__body { position: relative; z-index: 1; }
.vakio-step__body h3 { font-size: 1.25rem; margin: 3px 0 9px; }
.vakio-step__body p { color: var(--muted); font-size: .94rem; line-height: 1.65; }
.vakio-benefits .review-card h3 { font-size: 1.3rem; }

/* ============= FOOTER ============= */
.site-footer {
    background: var(--navy);
    color: var(--white);
    min-height: 263px;
    padding: 45px 57px 20px;
    margin-top: 40px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr 1fr 1fr;
    column-gap: 70px;
}

.footer-brand {
    color: var(--primary);
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 17px;
}

.footer-desc {
    color: #aeb5c1;
    font-size: 13px;
    line-height: 1.45;
    max-width: 275px;
}

.footer-title {
    font-size: 14px;
    font-weight: 700;
    margin: 2px 0 16px;
    color: var(--white);
}

.footer-link, .contact-line {
    display: block;
    color: #aeb5c1;
    font-size: 13px;
    line-height: 1.9;
    text-decoration: none;
    transition: color 0.15s ease;
}

.footer-link:hover, .contact-line:hover {
    color: var(--primary);
}

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,.08);
    margin-top: 27px;
    padding-top: 27px;
    text-align: center;
    color: #9da5b2;
    font-size: 12px;
}

/* ============= MAIN CONTENT ============= */
main {
    min-height: 704px;
    padding: 20px 57px 85px;
}

.placeholder {
    height: 285px;
    background: var(--placeholder);
    border-radius: 8px;
}

/* ============= RESPONSIVE ============= */
@media (max-width: 1050px) {
    .hero { width: calc(100% + 50px); margin-left: -25px; margin-right: -25px; }
    .site-header { padding-left: 25px; padding-right: 25px; }
    .topbar .phone { right: 135px; }
    .language { right: 20px; }
    main { padding-left: 25px; padding-right: 25px; }
    .actions { gap: 15px; }
    .footer-grid { column-gap: 30px; }
}

@media (max-width: 900px) {
    .vakio-hero__inner { grid-template-columns: 1fr; min-height: 0; }
    .vakio-hero__content { padding: 64px 0 20px; }
    .vakio-hero__visual { min-height: 300px; margin-top: -20px; }
    .vakio-hero__device { right: 28%; transform: scale(.82); transform-origin: bottom center; }
    .vakio-hero__orb--one { right: 12%; width: 280px; height: 280px; }
    .vakio-steps { grid-template-columns: repeat(2, 1fr); }
    .choice-grid { grid-template-columns: 1fr; }
    .hero { min-height: 560px; }
    .hero__inner { min-height: 480px; align-items: flex-start; }
    .hero__copy { padding-top: 64px; }
    .hero__badge { position: absolute; right: 0; bottom: 38px; margin: 0; }
    .catalog-layout { grid-template-columns: 1fr; }
    .filters { position: static; }
    .product-detail { grid-template-columns: 1fr; }
    .cart-layout { grid-template-columns: 1fr; }
    .contact-layout { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; row-gap: 30px; }
    .kat-row { grid-template-columns: 1fr; }
    .kat-row:nth-child(even) .kat-row__media { order: 0; }
    .product-card--featured { grid-column: span 1; grid-row: span 1; }
    .product-card--featured .product-card__media { aspect-ratio: 1/1; }
}

@media (max-width: 800px) {
    .wrap { padding-left: 16px; padding-right: 16px; }
    .vakio-steps { grid-template-columns: 1fr; gap: 24px; }
    .vakio-step__line { display: none; }
    .vakio-hero__visual { min-height: 260px; }
    .vakio-hero__device { right: 23%; transform: scale(.7); }
    .hero { width: calc(100% + 32px); margin-left: -16px; margin-right: -16px; min-height: 620px; }
    .hero__inner { min-height: 540px; }
    .hero__copy { padding-top: 54px; }
    .hero__lead { font-size: 1rem; }
    .hero__badge { left: 16px; right: auto; bottom: 34px; }
    .topbar { min-height: 34px; height: auto; padding: 8px 16px; text-align: center; font-size: 10px; line-height: 1.3; }
    .topbar .phone, .language { display: none; }
    .site-header { min-height: 0; flex-wrap: wrap; gap: 12px; padding: 14px 16px 16px; }
    .brand { width: auto; min-width: 0; flex: 1 1 auto; }
    .brand-name { font-size: 1.68rem; }
    .brand-sub { font-size: .56rem; }
    .brand-mark { transform: scale(.82); transform-origin: left center; margin-right: -3px; }
    .catalog { min-width: 104px; height: 42px; font-size: .82rem; }
    .catalog-dropdown { left: auto; right: 0; width: min(285px, calc(100vw - 32px)); }
    .search { order: 3; flex: 1 0 100%; max-width: none; height: 46px; margin: 0; }
    .actions { order: 4; flex: 1 0 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 0; }
    .action { min-width: 0; padding: 8px 4px; border: 1px solid #e8edf2; border-radius: 9px; font-size: 11px; }
    .action > i { height: 18px; font-size: 16px; line-height: 17px; }
    .action-badge { top: 2px; right: 20%; }
    .add-location { display: none; }
    main { min-height: auto; padding: 16px 16px 50px; }
    .section { padding: 54px 0; }
    .section__head { margin-bottom: 28px; }
    .section__head h2 { font-size: 2rem; }
    h1 { font-size: 2.35rem; }
    h2 { font-size: 2rem; }
    .choice-card { min-height: 250px; padding: 25px; }
    .choice-card__content strong { font-size: 1.65rem; }
    .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .product-card__body { padding: 13px; }
    .product-card__actions { flex-direction: column; }
    .product-card__actions .btn, .product-card__actions form { width: 100%; }
    .product-card__actions form .btn { width: 100%; }
    .cart-table { display: block; overflow-x: auto; white-space: nowrap; }
    .cart-table th, .cart-table td { padding: 12px 8px; }
    .form-grid { grid-template-columns: 1fr; gap: 0; }
    .form-field--full { grid-column: auto; }
    .cta-band { padding: 42px 0; }
    .cta-band__inner { align-items: flex-start; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 26px 18px; }
    .site-footer { padding: 40px 16px 18px; }
}

@media (max-width: 480px) {
    .catalog { min-width: 94px; padding: 0 12px; }
    .grid-icon { transform: scale(.86); }
    .search input { padding: 0 13px; font-size: 13px; }
    .search button { width: 48px; }
    .hero h1 { font-size: 2.35rem; }
    .hero__actions { flex-direction: column; align-items: stretch; }
    .hero__actions .btn { width: 100%; }
    .choice-grid { gap: 14px; }
    .choice-card { min-height: 230px; padding: 22px; border-radius: 15px; }
    .choice-card__content strong { font-size: 1.45rem; }
    .product-grid { grid-template-columns: 1fr; }
    .product-card__actions { flex-direction: row; }
    .footer-grid { grid-template-columns: 1fr; }
    .footer-bottom { font-size: 11px; }
}