/* ===== Drevos webseven tokens ===== */
:root {
    --font-head: "Roboto Slab", serif;
    --font-body: "Montserrat", sans-serif;
    --text: #111216;
    --muted: #8c8c8c;
    --muted-2: #4a4a4a;
    --bg: #ffffff;
    --card: #ffffff;
    --surface: #ffffff;
    --cream: #f5f5f5;
    --line: #e9e2d9;
    --ink-dark: #0d0d11;
    --navy: #081b38;
    --yellow: #f3c847;
    --orange: #f0761f;
    --orange-2: #e2670f;
    --green: #0ca77c;
    --danger: #ff093a;
    --shadow: 0 10px 34px rgba(20, 20, 20, 0.06);
    --r-lg: 22px;
    --r-md: 16px;
    --r-sm: 12px;
}

* {
    box-sizing: border-box;
}

/* html / body base typography come from the theme (typography-figma.css) */

img {
    max-width: 100%;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
}

[hidden] {
    display: none !important;
}

.yellow-color {
    display: inline;
    padding: 1px 5px;
    border-radius: .38em;
    background: #FFD152;
    color: #111 !important;
    -webkit-text-fill-color: #111 !important;
    box-shadow: none;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.from-site {
    position: relative;
}

.from-site::before {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    z-index: 20;
    background: rgba(255, 38, 38, 0.2);
}

.ws-mobile-top {
    cursor: pointer;
}

/* h1–h3 heading typography comes from the theme (typography-figma.css) */

/* .ws-btn / .ws-btn--outline styling comes from the theme (ws-buttons.css):
           yellow (#f3c847), Roboto Slab, uppercase, with !important — do not redefine here. */

.ws-btn2 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    padding: 0 30px;
    border-radius: 8px;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 15px;
    line-height: 1;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    border: 1px solid var(--orange);
    background: linear-gradient(180deg, var(--orange), var(--orange-2));
    color: #fff;
    cursor: pointer;
    box-shadow: none;
    transition: 0.12s ease;
    white-space: nowrap;
}
.ws-btn2:hover {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
}

/* header */
header.site {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--ink-dark);
    color: var(--cream);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.nav {
    display: flex;
    align-items: center;
    gap: 26px;
    padding: 12px 24px;
    max-width: 1280px;
    margin: 0 auto;
}

.nav img {
    height: 36px;
}

.nav .links {
    display: flex;
    gap: 20px;
    font-size: 14px;
    flex: 1;
    justify-content: center;
    flex-wrap: wrap;
}

.nav .links a {
    opacity: 0.85;
}

.nav .links a:hover {
    opacity: 1;
    color: var(--yellow);
}

.trust {
    display: flex;
    gap: 14px;
    font-size: 12px;
    opacity: 0.9;
    white-space: nowrap;
}

.trust b {
    color: var(--yellow);
}

.phone {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
}

.bc {
    font-size: 13px;
    color: var(--muted);
    padding: 22px 0 0;
    margin-top: calc(3.375rem + 1.25rem + 34px);
}

.bc a:hover {
    color: var(--text);
}

/* ===== PDP ===== */
.pdp {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    padding: 28px 0 40px;
    align-items: start;
}

@media (max-width: 900px) {
    .pdp {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

.gallery .main {
    position: relative;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--card);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}

.gallery .main img {
    display: block;
    margin: 0 auto;
    width: auto;
    max-width: 100%;
    max-height: 780px;
    transition:
        opacity 0.16s,
        transform 0.8s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.gal-badge {
    position: absolute;
    top: 18px;
    left: 18px;
    background: var(--danger);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    border-radius: 999px;
    padding: 6px 14px;
    z-index: 2;
    font-family: var(--font-head);
    letter-spacing: 0.02em;
}

.gal-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.92);
    color: var(--text);
    font-size: 17px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(20, 20, 20, 0.14);
    transition: 0.12s;
    backdrop-filter: blur(4px);
}

.gal-nav:hover {
    background: var(--ink-dark);
    color: #fff;
    border-color: var(--ink-dark);
}

.gal-nav.prev {
    left: 16px;
}

.gal-nav.next {
    right: 16px;
}

.gal-count {
    position: absolute;
    right: 18px;
    bottom: 16px;
    z-index: 2;
    background: rgba(13, 13, 17, 0.72);
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    border-radius: 999px;
    padding: 5px 13px;
    letter-spacing: 0.04em;
    backdrop-filter: blur(4px);
}

.thumbs {
    display: flex;
    gap: 10px;
    margin-top: 14px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
}

.thumbs button {
    flex: 0 0 84px;
    padding: 0;
    border: 2px solid var(--line);
    border-radius: var(--r-sm);
    overflow: hidden;
    cursor: pointer;
    background: var(--card);
    opacity: 0.65;
    transition: 0.14s;
}

.thumbs button:hover {
    opacity: 1;
    transform: translateY(-2px);
}

.thumbs button.active {
    border-color: var(--yellow);
    opacity: 1;
    box-shadow: 0 6px 16px rgba(243, 200, 71, 0.25);
}

.thumbs img {
    aspect-ratio: 1/1;
    object-fit: cover;
    width: 100%;
}

.buy {
    position: sticky;
    top: 24px;
}

@media (max-width: 900px) {
    .buy {
        position: static;
    }
}

.stars {
    display: flex;
    gap: 6px;
    color: #f3c847;
    font-size: 20px;
    line-height: 1;
}

.reviews-link {
    color: var(--muted);
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
}

.reviews-link:hover {
    color: var(--text);
}

.lead-copy {
    color: var(--text);
    font-size: 15.5px;
    margin: 10px 0 18px;
}

/* model switcher */
.cap-label {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 15px;
    margin: 6px 0 10px;
}

.model-tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin-bottom: 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
    background: var(--card);
}

.model-tabs button {
    border: none;
    border-right: 1px solid var(--line);
    background: var(--card);
    padding: 14px 6px 12px;
    cursor: pointer;
    text-align: center;
    transition:
        background 0.12s,
        color 0.12s;
    font-family: var(--font-body);
    position: relative;
}

/*.model-tabs button:last-child {
    border-right: none;
}*/

.model-tabs button .n {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 22px;
    line-height: 1.1;
    display: block;
    letter-spacing: -0.01em;
}

.model-tabs button .c {
    font-size: 11px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.model-tabs button:hover {
    background: var(--surface);
}

.model-tabs button.on {
    background: var(--ink-dark);
    color: #fff;
}

.model-tabs button.on .c {
    color: #fff;
}

.model-tabs button.on::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--yellow);
}

.price-row {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin: 6px 0 2px;
    flex-wrap: wrap;
}

.price {
    font-weight: 700;
    font-size: clamp(22px, 2.1vw, 28px);
    letter-spacing: -0.03em;
    color: #111216;
}

.price-old {
    color: #9a9a9a;
    text-decoration: line-through;
    font-size: clamp(16px, 1.5vw, 22px);
}

.badge {
    background: var(--danger);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    border-radius: 6px;
    padding: 4px 9px;
}

.fin {
    font-size: 14px;
    color: var(--yellow);
    font-weight: 600;
    margin-bottom: 14px;
}

.benefits-ws {
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 14px;
    color: var(--text);
    font-size: 15px;
}

.benefits-ws li {
    display: flex;
    align-items: center;
    gap: 12px;
}

.bws-ico {
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--muted-2);
}

.bws-ico svg {
    width: 24px;
    height: 24px;
    display: block;
}

.bws-ico--ce svg {
    width: 22px;
    height: 22px;
}

.assure {
    list-style: none;
    margin: 0 0 22px;
    padding: 0;
    font-size: 14.5px;
}

.assure li {
    padding: 7px 0 7px 30px;
    position: relative;
    border-bottom: 1px dashed var(--line);
}

.assure li::before {
    content: "✔";
    position: absolute;
    left: 2px;
    color: var(--yellow);
    font-weight: 700;
}

.assure b {
    color: var(--text);
}

.cart-row {
    display: flex;
    gap: 12px;
    margin-bottom: 14px;
}

.cart-row .ws-btn {
    width: 100% !important;
    text-align: center !important;
}

.cart-row .ws-btn .ws-btn__text {
    flex: auto;
}

.guarantee {
    font-size: 13px;
    color: #111216;
    text-align: center;
    margin-bottom: 8px;
    font-weight: 500;
}

.guarantee b {
    color: var(--text);
}

.volume {
    font-size: 13px;
    color: #111216;
    text-align: center;
    font-weight: 500;
}

/* tabs */
.tabs-sec {
    padding: 8px 0 56px;
}

.tabbar {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    padding-bottom: 6px;
}

.tab {
    cursor: pointer;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text);
    background: var(--card);
    border: 1.5px solid var(--line);
    border-radius: 999px;
    padding: 13px 24px;
    transition: 0.14s;
    box-shadow: 0 2px 8px rgba(20, 20, 20, 0.05);
}

.tab:hover {
    border-color: var(--navy);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(20, 20, 20, 0.1);
}

.tab.active {
    background: var(--ink-dark);
    border-color: var(--ink-dark);
    color: #fff;
}

.tab.active::before {
    content: "● ";
    color: var(--yellow);
    font-size: 9px;
    vertical-align: 2px;
}

.tabpane {
    display: none;
}

.tabpane.active {
    display: block;
}

.about-chips {
    margin-top: 24px;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
}

.about-pane {
    display: none;
}

.about-pane.is-active {
    display: block;
}

.about-pane .about-list {
    margin-top: 8px;
}

.about-list {
    list-style: none;
    padding: 0;
    margin: 40px 0 0;
    max-width: 900px;
}

.about-list li {
    padding: 12px 0 12px 34px;
    position: relative;
    font-size: 18px;
    color: var(--muted-2);
    border-bottom: 1px dashed var(--line);
}

.about-list li::before {
    content: "✔";
    position: absolute;
    left: 0;
    color: var(--ws-btn-primary-bg);
    font-weight: 700;
}

.about-list b {
    color: var(--text);
}

.spec-table {
    max-width: 860px;
    margin: 40px auto 0;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow);
}

.spec-row {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 16px;
    padding: 15px 26px;
    border-bottom: 1px solid var(--line);
    font-size: 15px;
}

.spec-row:last-child {
    border-bottom: none;
}

.spec-row .l {
    color: var(--muted);
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.06em;
    font-weight: 600;
    padding-top: 2px;
}

.spec-row .v {
    font-weight: 600;
}

@media (max-width: 600px) {
    .spec-row {
        grid-template-columns: 1fr;
        gap: 2px;
    }
}

.ship-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 40px;
}

@media (max-width: 900px) {
    .ship-grid {
        grid-template-columns: 1fr;
    }
}

.ship-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 26px;
    box-shadow: var(--shadow);
}

.ship-card .ico {
    font-size: 30px;
    margin-bottom: 8px;
    color: var(--ws-btn-primary-bg);
}

.ship-card h3 {
    font-size: 18px;
    margin-bottom: 6px;
}

.ship-card p {
    margin: 0;
    font-size: 14.5px;
    color: var(--muted-2);
}

/* compare */
.compare {
    background: var(--surface);
    padding: 88px 0;
}

.cmp-wrap {
    overflow-x: auto;
}

table.cmp {
    width: 100%;
    border-collapse: collapse;
    background: var(--card);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow);
    min-width: 760px;
}

.cmp th,
.cmp td {
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
    text-align: center;
    font-size: 14.5px;
}

.cmp th {
    font-family: var(--font-head);
    font-size: 17px;
}

.cmp td:first-child,
.cmp th:first-child {
    text-align: left;
    color: var(--muted);
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.06em;
    font-weight: 600;
}

.cmp .pr {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 18px;
    color: var(--text);
}

.cmp .st {
    color: var(--yellow);
}

/* apple-style compare grid */
.cmpx {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0 8px;
    background: var(--card);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow);
    padding: 44px 26px 52px;
}

.cmpx-col {
    text-align: center;
    display: grid;
    align-content: start;
    justify-items: center;
}

.cmpx-head {
    margin-bottom: 40px;
}

.cmpx-head .cmp-ph {
    height: 170px;
    margin-bottom: 18px;
    display: block;
}

.cmpx-head .cmp-ph img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.cmpx-name {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 21px;
    color: var(--text);
}

.cmpx-price {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    margin: 6px 0 14px;
}

.cmpx-big {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 46px;
    letter-spacing: -0.03em;
    color: var(--text);
    line-height: 1;
    margin: 6px 0 4px;
    min-height: 0px;
}

.cmpx-big span {
    display: block;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 0;
    color: var(--muted-2);
    margin-top: 10px;
}

.cmpx-big + .cmpx-cell {
    min-height: 32px;
}

.cmpx-cell {
    font-size: 15px;
    color: var(--text);
    font-weight: 500;
    margin: 0;
    max-width: 240px;
    line-height: 1.45;
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cmpx-best {
    color: var(--muted-2);
}

@media (max-width: 900px) {
    .cmpx {
        display: none;
    }
}

/* apple-style compare header */
.cmp-headrow th {
    vertical-align: top;
    padding: 26px 18px 22px;
}

.cmp-head {
    text-align: center;
}

.cmp-ph {
    display: block;
    height: 150px;
    margin: 0 auto 14px;
}

.cmp-ph img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.cmp-name {
    display: block;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 19px;
    color: var(--text);
}

.cmp-price {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    margin: 4px 0 12px;
}

.cmp-buy {
    align-self: center;
    margin: 0;
    padding: 0.52em 1.05em;
    border: none;
    border-radius: 0.42em;
    font-family: var(--font-body);
    font-size: clamp(13px, 2.8vw, 14px);
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.25;
    cursor: pointer;
    color: #111 !important;
    -webkit-text-fill-color: #111 !important;
    background: #ff6200;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);
    transition:
        transform 0.18s ease,
        filter 0.18s ease,
        box-shadow 0.18s ease;
}

.cmp tr:nth-child(even) td {
    background: transparent;
}

.cmp td {
    font-size: 15px;
}

.cmp .sel {
    background: none;
    border: none;
    color: var(--navy);
    font-weight: 700;
    cursor: pointer;
    text-decoration: underline;
    font-family: var(--font-body);
}

/* why price */
.why {
    padding: 88px 0;
}

.why-cols {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 44px;
    margin-top: 40px;
    align-items: center;
}

@media (max-width: 900px) {
    .why-cols {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}

.why-stack {
    display: grid;
    gap: 18px;
}

.why-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 28px;
    box-shadow: var(--shadow);
}

.why-card.hl {
    border-color: var(--yellow);
    border-width: 2px;
    position: relative;
}

.why-card h3 {
    font-size: 19px;
}

.why-card .p {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 24px;
    margin: 6px 0;
}

.why-card p {
    font-size: 14.5px;
    color: var(--muted-2);
    margin: 0;
}

.why-note {
    font-size: 12.5px;
    color: var(--muted);
    margin-top: 16px;
    text-align: center;
}

/* trust row */
.trust-row {
    background: #fff;
    padding: 56px 0;
}

.trust-row .grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    text-align: center;
}

@media (max-width: 900px) {
    .trust-row .grid {
        grid-template-columns: 1fr 1fr;
    }
}

.titem .ico {
    font-size: 32px;
    margin-bottom: 8px;
}

.titem h3 {
    font-size: 17px;
    margin-bottom: 4px;
}

.titem p {
    margin: 0;
    font-size: 13.5px;
    color: var(--muted-2);
}

footer.site {
    background: var(--ink-dark);
    color: rgba(255, 255, 255, 0.75);
    padding: 40px 0;
    font-size: 14px;
}

footer.site .container {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    align-items: center;
}

/* evenness + weight table */
.even {
    background: var(--surface);
    padding: 88px 0;
}

.even .inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start;
}

@media (max-width: 900px) {
    .even .inner {
        grid-template-columns: 1fr;
    }
}

.stat-big {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 42px;
}

.stat-big span {
    color: var(--yellow);
}

table.wt {
    width: 100%;
    border-collapse: collapse;
    background: var(--card);
    border-radius: var(--r-md);
    overflow: hidden;
    box-shadow: var(--shadow);
}

.wt th,
.wt td {
    padding: 12px 18px;
    border-bottom: 1px solid var(--line);
    font-size: 14.5px;
    text-align: left;
}

.wt tr:last-child td {
    border-bottom: none;
}

.wt th {
    font-family: var(--font-head);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    word-break: break-all;
}

.wt td:nth-child(2) {
    color: var(--danger);
    font-weight: 600;
}

.wt td:nth-child(3) {
    font-weight: 600;
}

.wt-note {
    font-size: 12.5px;
    color: var(--muted);
    margin-top: 12px;
}

/* energy */
.energy {
    padding: 88px 0;
}

.en-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 36px;
}

@media (min-width: 901px) {
    .en-grid.mobile {
        display: none;
    }
}

@media (max-width: 900px) {
    .en-grid {
        grid-template-columns: 1fr;
    }
    .en-grid.desktop {
        display: none;
    }
}

.en-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 30px;
    text-align: center;
    box-shadow: var(--shadow);
}

.en-card .n {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 38px;
    padding: 1px 5px;
    border-radius: .38em;
    background: #FFD152;
    color: #111 !important;
    -webkit-text-fill-color: #111 !important;
    box-shadow: none;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    width: fit-content;
    margin: 0 auto;
}

.en-card p {
    margin: 6px 0 0;
    font-size: 14px;
    color: var(--muted-2);
}

/* hygiene */
.hyg {
    background: var(--cream);
    padding: 88px 0;
}

.hyg-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 36px;
}

@media (max-width: 960px) {
    .hyg-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 560px) {
    .hyg-grid {
        grid-template-columns: 1fr;
    }
}

.hyg-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 26px;
    box-shadow: var(--shadow);
}

.hyg-card .ico {
    font-size: 28px;
    margin-bottom: 8px;
}

.hyg-card h3 {
    font-size: 17px;
    margin-bottom: 6px;
}

.hyg-card p {
    margin: 0;
    font-size: 14px;
    color: var(--muted-2);
}

.hyg-tag {
    text-align: center;
    color: var(--muted-2);
    margin-top: 22px;
    font-size: 15px;
}

/* payment methods */
.pay-title {
    font-size: 14px;
    color: var(--text);
    font-weight: 500;
    margin: 16px 0 10px;
    text-align: center;
}

.pay-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

.pay {
    height: 40px;
    min-width: 64px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 16px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: #fff;
    font-weight: 700;
    font-size: 15px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    box-shadow: 0 1px 3px rgba(20, 20, 20, 0.05);
}

.pay svg {
    display: block;
}

.pay.visa {
    color: #1434cb;
    font-style: italic;
    font-weight: 800;
    letter-spacing: 0.06em;
    font-size: 16px;
}

.pay.paypal {
    color: #003087;
    font-style: italic;
    font-weight: 800;
    gap: 0;
}

.pay.paypal i {
    color: #0070e0;
    font-style: inherit;
}

.pay.applepay {
    color: #111216;
    font-weight: 600;
    font-size: 16px;
    gap: 3px;
    letter-spacing: 0;
}

.pay.gpay {
    color: #5f6368;
    font-weight: 600;
    font-size: 16px;
    gap: 5px;
}

.pay.klarna {
    background: #ffa8cd;
    border-color: #ffa8cd;
    color: #0a0b09;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.pay.affirm {
    color: #4a4af4;
    font-weight: 800;
    font-size: 16px;
    letter-spacing: -0.01em;
}

.pay.afterpay {
    background: #b2fce4;
    border-color: #b2fce4;
    color: #0a0b09;
    font-weight: 800;
    letter-spacing: -0.01em;
}

/* alternating feature rows (from unified landing, RMS spacing) */
.feat-sec {
    padding: 88px 0;
}

.feat-sec.tone {
    background: var(--surface);
}

.feat {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}

.feat > * {
    min-width: 0;
}

@media (max-width: 900px) {
    .feat {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

.feat-media {
    border-radius: 0;
    overflow: visible;
    box-shadow: none;
    text-align: center;
}

.feat-media img,
.feat-media video {
    display: inline-block;
    width: auto;
    max-width: 100%;
    max-height: 440px;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow);
}

.feat-media video {
    height: auto;
    object-fit: cover;
    vertical-align: middle;
}

.feat .rev-first {
    order: -1;
}

@media (max-width: 900px) {
    .feat .rev-first {
        order: 0;
    }
}

.eyebrow {
    display: inline-block;
    font-family: var(--font-head);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted-2);
    margin-bottom: 12px;
    position: relative;
    padding-left: 36px;
}

.eyebrow::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 26px;
    height: 3px;
    background: var(--yellow);
    border-radius: 2px;
    transform: translateY(-50%);
}

.feat p {
    color: var(--muted-2);
    font-size: 18px;
}

.invest-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 28px;
}

@media (max-width: 600px) {
    .invest-stats {
        grid-template-columns: 1fr;
    }
}

.invest-stats b {
    display: block;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 26px;
    color: var(--text);
}

.invest-stats span {
    font-size: 13px;
    color: var(--muted);
}

/* handbuilt figure grid */
.hb-slider {
    position: relative;
    margin-top: 40px;
}

.hb-viewport {
    overflow: hidden;
    border-radius: var(--r-md);
}

.hb-track {
    display: flex;
    gap: 20px;
    transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: transform;
}

.hb-track figure {
    margin: 0;
    position: relative;
    border-radius: var(--r-lg);
    overflow: hidden;
    height: 580px;
    box-shadow: var(--shadow);
    flex: 0 0 auto;
    transform: scale(0.96);
    opacity: 0.5;
    transition:
        transform 0.45s,
        opacity 0.45s;
}

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

.hb-track figure.on {
    transform: scale(1);
    opacity: 1;
}

.hb-track figure > span {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 20px 22px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    font-family: var(--font-head);
    letter-spacing: 0.01em;
    background: linear-gradient(transparent, rgba(13, 13, 17, 0.82));
}

.hb-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    background: #1d1b1b;
    color: var(--ws-btn-primary-bg);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition:
        transform 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease;
}

.hb-nav svg {
    width: 20px;
    height: 20px;
    display: block;
    color: var(--ws-btn-primary-bg);
}

.hb-nav:hover {
    margin-top: -1px;
    background: #252322;
    border-color: rgba(255, 255, 255, 0.2);
}

.hb-nav.prev {
    left: 10px;
}

.hb-nav.next {
    right: 10px;
}

@media (max-width: 700px) {
    .hb-track figure {
        height: 380px;
    }
}

.hb-dots {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 20px;
}

.hb-dots button {
    width: 2.875rem;
    height: 0.25rem;
    margin: 0 !important;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.34);
    opacity: 1;
    transition:
        width 0.2s ease,
        background-color 0.2s ease;
    padding: 0;
    border: none;
}

.hb-dots button.on {
    background: var(--ws-btn-primary-bg);
}

/* video section */
.vids {
    padding: 88px 0;
    background: var(--surface);
}

.vid-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    margin-top: 40px;
}

@media (max-width: 820px) {
    .vid-grid {
        grid-template-columns: 1fr;
    }
}

.vid-card {
    position: relative;
    border-radius: var(--r-md);
    overflow: hidden;
    box-shadow: var(--shadow);
    background: #000;
    cursor: pointer;
}

.vid-card video {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: contain;
    background: #0d0d11;
    display: block;
}

.vid-card .cap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 16px 18px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(transparent, rgba(13, 13, 17, 0.85));
    pointer-events: none;
}

.vid-card .play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(243, 200, 71, 0.95);
    color: #111216;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    transition: 0.15s;
    pointer-events: none;
    padding-left: 0;
}

.vid-card:hover .play {
    transform: translate(-50%, -50%) scale(1.08);
}

.vid-card.playing .play {
    opacity: 0;
}

/* ===== premium buy card ===== */
.buy-card {
    background: var(--card);
    border: none;
    border-radius: var(--r-lg);
    padding: 38px 36px 32px;
    box-shadow:
        0 30px 80px rgba(20, 20, 20, 0.1),
        0 2px 8px rgba(20, 20, 20, 0.04);
    position: relative;
    overflow: hidden;
}

.buy-card h1 {
    font-size: clamp(28px, 2.8vw, 36px);
    margin-bottom: 10px;
}

.buy-card .lead-copy {
    font-size: 15px;
    line-height: 1.6;
    margin: 12px 0 24px;
}

/* rating row */
.rating-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 20px;
}

/* price */
.price-row {
    align-items: baseline;
    gap: 12px;
    margin: 20px 0 6px;
}

.off {
    font-weight: 700;
    font-size: clamp(18px, 2vw, 22px);
    line-height: 1;
    color: var(--yellow);
    background: transparent;
    display: inline-flex;
    align-items: baseline;
    letter-spacing: -0.01em;
}

.vat-note {
    font-size: 13px;
    color: var(--muted);
    font-weight: 500;
}

.promo-line {
    font-size: 14px;
    line-height: 1.38;
    color: var(--text);
    font-weight: 500;
    margin: 6px 0 4px;
}

.promo-line b {
    color: var(--yellow);
    font-weight: 800;
}

.fin {
    font-size: 13px;
    color: var(--muted-2);
    font-weight: 500;
    margin-bottom: 22px;
}

/* refined assure */
.assure {
    margin: 0 0 26px;
    border: none;
}

.assure li {
    border-bottom: none;
    padding: 8px 0 8px 32px;
    font-size: 14px;
    color: var(--muted-2);
}

.assure li b {
    color: var(--text);
    font-weight: 600;
}

.assure li::before {
    content: "";
    width: 18px;
    height: 18px;
    left: 0;
    top: 9px;
    position: absolute;
    background: var(--cream);
    border-radius: 50%;
    border: 1px solid var(--line);
}

.assure li::after {
    content: "✓";
    position: absolute;
    left: 4.5px;
    top: 8px;
    font-size: 11px;
    font-weight: 700;
    color: var(--yellow);
}

.guarantee {
    margin: 14px 0 4px;
    font-size: 13px;
    letter-spacing: 0.01em;
    color: #111216;
    font-weight: 500;
}

.volume {
    font-size: 13px;
    color: #111216;
    font-weight: 500;
}

/* payment chips: quiet by default */
.pay-title {
    margin: 22px 0 12px;
}

.pay {
    height: 34px;
    padding: 0 13px;
    font-size: 13px;
    border-radius: 7px;
    box-shadow: 0 1px 3px rgba(20, 20, 20, 0.05);
}

/* switcher inside card */
.cap-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text);
    margin: 2px 0 10px;
}

.model-tabs {
    border-radius: 10px;
    box-shadow: inset 0 1px 3px rgba(20, 20, 20, 0.04);
}

@media (max-width: 600px) {
    .buy-card {
        padding: 28px 22px 24px;
    }
}

/* customer video reels (vertical) */
.reels {
    padding: 88px 0;
}

.reel-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-top: 40px;
}

@media (max-width: 960px) {
    .reel-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 560px) {
    .reel-grid {
        grid-template-columns: 1fr;
    }
}

.reel {
    position: relative;
    border-radius: var(--r-md);
    overflow: hidden;
    box-shadow: var(--shadow);
    background: #000;
    cursor: pointer;
}

.reel video {
    width: 100%;
    aspect-ratio: 9/16;
    object-fit: contain;
    background: #0d0d11;
    display: block;
}

.reel .cap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 14px 16px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(transparent, rgba(13, 13, 17, 0.85));
    pointer-events: none;
}

.reel .play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: rgba(243, 200, 71, 0.95);
    color: #111216;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    transition: 0.15s;
    pointer-events: none;
    padding-left: 0;
}

.reel:hover .play {
    transform: translate(-50%, -50%) scale(1.08);
}

.reel.playing .play {
    opacity: 0;
}

/* process videos band */
.procvid {
    padding: 88px 0;
    background: var(--surface);
}

.procvid .vid-grid {
    grid-template-columns: 1fr 1fr;
}

@media (max-width: 820px) {
    .procvid .vid-grid {
        grid-template-columns: 1fr;
    }
}

/* Daniel featured video */
.dan {
    padding: 88px 0;
}

.dan-video video {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: contain;
    background: #0d0d11;
    display: block;
}

.dan-video .play {
    width: 78px;
    height: 78px;
    font-size: 26px;
}

/* vector icons */
.ico svg {
    width: 30px;
    height: 30px;
    color: var(--ws-btn-primary-bg);
    display: block;
}

.ship-card .ico,
.titem .ico,
.hyg-card .ico {
    margin-bottom: 12px;
    font-size: 0;
}

.titem .ico svg {
    margin: 0 auto;
}

.ico {
    position: relative;
    display: inline-block;
}

.ship-card .ico::after,
.hyg-card .ico::after {
    content: "";
    position: absolute;
    left: -4px;
    bottom: -2px;
    width: 16px;
    height: 16px;
    background: rgba(243, 200, 71, 0.45);
    border-radius: 50%;
    z-index: -1;
}

/* made-to-order advantage */
.mto-badge {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(13, 13, 17, 0.66);
    color: #fff;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    font-family: var(--font-head);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 8px 15px;
}

.mto-badge svg {
    color: var(--yellow);
}

.mto-note {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: linear-gradient(135deg, #fdf6e0, #fbf1cf);
    border: 1px solid #f0dfa4;
    border-radius: var(--r-sm);
    padding: 15px 17px;
    margin: 0 0 20px;
    font-size: 13.5px;
    color: var(--text);
}

.mto-note b {
    color: var(--text);
}

.mto-ico {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--yellow);
    display: flex;
    align-items: center;
    justify-content: center;
}

.mto-ico svg {
    width: 19px;
    height: 19px;
    color: #111216;
}

/* ===== gallery 2.0 — tech / wow ===== */
.gallery .main {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 660px;
    padding: 12px;
    border: none;
    background:
        linear-gradient(var(--card), var(--card)) padding-box,
        linear-gradient(
                140deg,
                var(--yellow) 0%,
                rgba(243, 200, 71, 0.15) 30%,
                rgba(17, 18, 22, 0.12) 70%,
                var(--yellow) 100%
            )
            border-box;
    border: 1.5px solid transparent;
    border-radius: 26px;
    box-shadow:
        0 40px 90px rgba(20, 20, 20, 0.14),
        0 4px 14px rgba(20, 20, 20, 0.05);
}

.gallery .main::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: 26px;
    background: linear-gradient(120deg, transparent 40%, rgba(255, 255, 255, 0.14) 50%, transparent 60%);
    transform: translateX(-120%);
    animation: sheen 6s ease-in-out infinite;
}

@keyframes sheen {
    0%,
    55% {
        transform: translateX(-120%);
    }

    75%,
    100% {
        transform: translateX(120%);
    }
}

.gallery .main img {
    transition:
        opacity 0.16s,
        transform 0.8s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.gallery .main:hover img {
    transform: scale(1.035);
}

.gal-nav {
    width: 52px;
    height: 52px;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(17, 18, 22, 0.1);
}

.gal-count {
    background: rgba(13, 13, 17, 0.66);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.gal-badge {
    background: var(--danger);
    box-shadow: 0 6px 18px rgba(255, 9, 58, 0.28);
}

/* thumbnails: filmstrip with glow */
.thumbs {
    gap: 12px;
    margin-top: 16px;
}

.thumbs button {
    border-radius: 14px;
    border: 1.5px solid var(--line);
    position: relative;
    overflow: hidden;
}

.thumbs button::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(252, 250, 246, 0.35);
    transition: 0.2s;
}

.thumbs button:hover::after {
    background: transparent;
}

.thumbs button.active {
    border-color: transparent;
    background:
        linear-gradient(var(--card), var(--card)) padding-box,
        linear-gradient(140deg, var(--yellow), #e7a93a) border-box;
    box-shadow: 0 10px 26px rgba(243, 200, 71, 0.35);
    transform: translateY(-3px);
}

.thumbs button.active::after {
    background: transparent;
}

/* full spec comparison table */
.specfull-wrap {
    margin-top: 40px;
    overflow-x: auto;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow);
    padding: 6px;
}

table.spec {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    min-width: 760px;
}

table.spec thead tr {
    background: var(--ink-dark);
    color: #fff;
}

table.spec thead th {
    padding: 14px 16px;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 14px;
    text-align: left;
    letter-spacing: 0.02em;
}

table.spec thead th:first-child {
    border-radius: 14px 0 0 14px;
}

table.spec thead th:last-child {
    border-radius: 0 14px 14px 0;
}

table.spec td {
    padding: 11px 16px;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
    color: var(--text);
}

table.spec tbody tr:nth-child(even) {
    background: var(--surface);
}

table.spec td:first-child {
    font-weight: 600;
    color: var(--muted-2);
    width: 26%;
}

table.spec .tg td {
    background: var(--cream);
    color: var(--text);
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 10px 16px;
}

table.spec .sh {
    text-align: center;
    color: var(--muted-2);
}

table.spec small {
    color: var(--muted);
    font-weight: 500;
}

/* page scroll progress */
/* background:linear-gradient(90deg, var(--yellow), #e7a93a); */
/* box-shadow:0 0 12px rgba(243, 200, 71, 0.65); */
/* transition:width 0.08s linear; */
/* border-radius:0 3px 3px 0 */
/* } */

/* ===== mobile layout ===== */
.spec-mobile {
    display: block;
    margin: 24px auto 0;
}

#t-spec .spec-desktop {
    display: none;
}

.cmp-cards {
    display: none;
}

@media (max-width: 640px) {
    .container {
        padding: 0 16px;
    }

    section,
    .feat-sec,
    .vids,
    .reels,
    .procvid,
    .even,
    .energy,
    .hyg,
    .why,
    .compare,
    .dan {
        padding: 52px 0;
    }

    h1 {
        font-size: 27px;
    }

    h2 {
        font-size: 24px;
    }

    .bc {
        font-size: 12px;
    }

    .pdp {
        gap: 24px;
        padding: 18px 0 28px;
    }

    .buy-card {
        padding: 24px 18px 20px;
        border-radius: 18px;
    }

    .buy-card h1 {
        font-size: 25px;
    }

    .off {
        font-size: 20px;
    }

    .model-tabs button {
        padding: 11px 4px 9px;
    }

    .model-tabs button .n {
        font-size: 18px;
    }

    .model-tabs button .c {
        font-size: 9.5px;
    }

    .gal-nav {
        width: 40px;
        height: 40px;
        font-size: 14px;
    }

    .gal-nav.prev {
        left: 10px;
    }

    .gal-nav.next {
        right: 10px;
    }

    .mto-badge {
        top: 12px;
        right: 12px;
        padding: 6px 11px;
        font-size: 10px;
    }

    .gal-badge {
        top: 12px;
        left: 12px;
        font-size: 12px;
        padding: 5px 11px;
    }

    .thumbs button {
        flex: 0 0 66px;
        border-radius: 10px;
    }

    .tabbar {
        gap: 8px;
    }

    .tab {
        padding: 11px 16px;
        font-size: 12px;
        flex: 1 1 calc(50% - 8px);
        text-align: center;
    }

    .cart-row .ws-btn {
        flex: 1;
    }

    .feat {
        gap: 22px;
    }

    .invest-stats {
        grid-template-columns: 1fr 1fr;
    }

    .stat-big {
        font-size: 30px;
        text-align: center;
    }

    .even p {
        text-align: center;
    }

    .en-card .n {
        font-size: 30px;
    }

    footer .container {
        flex-direction: column;
        text-align: center;
    }

    /* specs: stacked mobile view instead of wide table */
    .spec-desktop {
        display: none;
    }

    .spec-mobile {
        margin-top: 20px;
    }

    /* compare: cards instead of wide table */
    .cmp-wrap {
        display: none;
    }

    .cmp-cards {
        display: grid;
        grid-template-columns: 1fr;
        gap: 16px;
        margin-top: 8px;
    }
}

.cmp-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 22px;
    box-shadow: var(--shadow);
    text-align: center;
}

.cmp-card h3 {
    margin-bottom: 2px;
}

.cmp-card .pr {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 24px;
    margin-bottom: 8px;
}

.cmp-card p {
    color: var(--muted-2);
    font-size: 14px;
    margin: 0 0 16px;
    line-height: 1.5;
}

.cmp-card .ws-btn {
    width: 100%;
}

/* mobile spec components */
.msp-chips {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
    background: var(--card);
    margin-bottom: 16px;
}

.msp-chips button {
    border: none;
    border-right: 1px solid var(--line);
    background: var(--card);
    padding: 11px 2px;
    cursor: pointer;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 14px;
    position: relative;
}

.msp-chips button:last-child {
    border-right: none;
}

.msp-chips button.on {
    background: var(--ink-dark);
    color: #fff;
}

.msp-chips button.on::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--yellow);
}

.msp-group {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text);
    background: var(--cream);
    padding: 9px 14px;
    border-radius: 8px;
    margin: 14px 0 6px;
}

.msp-row {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 9px 4px;
    border-bottom: 1px solid var(--line);
    font-size: 13.5px;
}

.msp-row .k {
    color: var(--muted-2);
    font-weight: 600;
}

.msp-row .v {
    text-align: right;
    font-weight: 600;
    color: var(--text);
}

/* ===== premium mobile switcher & card ===== */
@media (max-width: 640px) {
    /* buy card: jewel look */
    .buy-card {
        padding: 28px 20px 24px;
        border-radius: 20px;
        background:
            linear-gradient(var(--card), var(--card)) padding-box,
            linear-gradient(
                    150deg,
                    rgba(243, 200, 71, 0.9),
                    rgba(243, 200, 71, 0.12) 40%,
                    rgba(17, 18, 22, 0.1) 75%,
                    rgba(243, 200, 71, 0.55)
                )
                border-box;
        border: 1.5px solid transparent;
        box-shadow:
            0 24px 60px rgba(20, 20, 20, 0.14),
            0 2px 8px rgba(20, 20, 20, 0.05);
    }

    .buy-card::before {
        display: none;
    }

    /* switcher: 2x2 premium tiles */
    .model-tabs {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        border: none;
        border-radius: 0;
        overflow: visible;
        background: none;
        box-shadow: none;
    }

    .model-tabs button {
        border: 1.5px solid var(--line);
        border-radius: 14px;
        background: var(--card);
        padding: 14px 8px 12px;
        box-shadow: 0 3px 10px rgba(20, 20, 20, 0.05);
        transition: 0.15s;
    }

    .model-tabs button .n {
        font-size: 22px;
    }

    .model-tabs button .c {
        font-size: 10.5px;
        letter-spacing: 0.06em;
    }

    .model-tabs button.on {
        background: linear-gradient(160deg, #15171c, #23252c);
        color: #fff;
        border-color: transparent;
        box-shadow:
            0 12px 28px rgba(17, 18, 22, 0.3),
            0 0 0 1.5px var(--yellow);
        transform: translateY(-2px);
    }

    .model-tabs button.on::after {
        display: none;
    }

    .model-tabs button.on .c {
        color: #fff;
    }

    /* breathing room above sticky cta */
    body {
        padding-bottom: 86px;
    }
}

/* sticky bottom CTA */
.mob-cta {
    display: none;
}

@media (max-width: 640px) {
    .mob-cta {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 998;
        padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
        background: rgba(252, 250, 246, 0.88);
        backdrop-filter: blur(14px);
        border-top: 1px solid var(--line);
        box-shadow: 0 -10px 30px rgba(20, 20, 20, 0.1);
    }

    .mob-cta .ws-btn {
        width: 100%;
        height: 56px;
        font-size: 15px;
        letter-spacing: 0.06em;
        border-radius: 12px;
        box-shadow: none;
    }
}

/* reviews */
.revs {
    padding: 88px 0;
    background: var(--surface);
}

.revs-head {
    text-align: center;
    margin-bottom: 40px;
}

.revs-head .score {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 40px;
}

.revs-head .tp {
    color: #00b67a;
    font-weight: 700;
}

.rev-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

@media (max-width: 960px) {
    .rev-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 640px) {
    .rev-grid {
        grid-template-columns: 1fr;
    }
}

.rev-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 26px;
    box-shadow: var(--shadow);
}

.rev-card .rstars {
    color: #00b67a;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.rev-card p {
    font-size: 14.5px;
    color: var(--text);
    margin: 0;
}

.rev-card .who {
    margin-top: 14px;
    font-size: 13px;
    color: var(--muted);
}

.rev-card .who b {
    color: var(--text);
}

.revs-note {
    text-align: center;
    font-size: 12px;
    color: var(--muted);
    margin-top: 18px;
}

/* faq */
.faq {
    padding: 88px 0;
}

.faq-list {
    max-width: 860px;
    margin: 40px auto 0;
}

.faq-item {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    margin-bottom: 12px;
    box-shadow: var(--shadow);
    overflow: hidden;
}

.faq-item summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 19px 24px;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 16px;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary::after {
    content: "+";
    font-size: 24px;
    color: var(--muted);
    transition: 0.2s;
    flex: 0 0 auto;
    font-weight: 400;
}

.faq-item[open] summary::after {
    transform: rotate(45deg);
    color: var(--text);
}

.faq-item .fa-tag {
    display: inline-block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text);
    font-weight: 700;
    margin-bottom: 4px;
}

.faq-item .fa-body {
    padding: 0 24px 20px;
    font-size: 14.5px;
    color: var(--muted-2);
}

.why-media {
    margin: 0;
    text-align: center;
}

.why-media img {
    display: inline-block;
    width: auto;
    max-width: 100%;
    max-height: 560px;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow);
}

/* popular products (from site PDP) */
.pop {
    padding: 88px 0;
    background: var(--surface);
}

.pop-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 40px;
}

@media (max-width: 960px) {
    .pop-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 560px) {
    .pop-grid {
        grid-template-columns: 1fr;
    }
}

.pop-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow);
    transition: transform 0.15s;
}

.pop-card:hover {
    transform: translateY(-4px);
}

.pop-card img {
    aspect-ratio: 3/4;
    object-fit: contain;
    background: #fff;
    padding: 8px;
}

.pop-card .body {
    padding: 18px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.pop-card h3 {
    font-size: 17px;
    margin-bottom: 2px;
}

.pop-card .meta {
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 8px;
}

.pop-card .meta .st {
    color: var(--yellow);
}

.pop-card .pr {
    margin-bottom: 14px;
}

.pop-card .pr .old {
    color: var(--muted);
    text-decoration: line-through;
    font-size: 13px;
    margin-right: 8px;
}

.pop-card .pr .now {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 19px;
}

.pop-card .ws-btn {
    margin-top: auto;
    height: 44px;
    font-size: 12.5px;
    padding: 0 12px;
}

/* contact band */
.contact {
    padding: 88px 0;
    background: var(--ink-dark);
    color: #fff;
}

.contact .inner {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 48px;
    align-items: center;
}

@media (max-width: 900px) {
    .contact .inner {
        grid-template-columns: 1fr;
    }
}

.contact p {
    color: rgba(255, 255, 255, 0.75);
}

.c-rows {
    display: grid;
    gap: 12px;
    margin-top: 8px;
}

.c-row {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--r-sm);
    padding: 15px 18px;
}

.c-row svg {
    width: 22px;
    height: 22px;
    color: var(--yellow);
    flex: 0 0 auto;
}

.c-row a {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 16px;
}

.c-row span {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
    display: block;
}

.shorts-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 320px));
    gap: 22px;
    justify-content: center;
    margin-top: 40px;
}

@media (max-width: 820px) {
    .shorts-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 600px) {
    .shorts-grid {
        grid-template-columns: 1fr;
        max-width: 320px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* complete-system cards */
.ks-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

@media (max-width: 900px) {
    .ks-grid {
        grid-template-columns: 1fr;
        max-width: 420px;
        margin: 0 auto;
    }
}

.ks-card {
    background: #17181d;
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow);
    color: #fff;
    display: flex;
    flex-direction: column;
}

.ks-media {
    position: relative;
    cursor: pointer;
}

.ks-media video {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    display: block;
}

.ks-media .play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: rgba(243, 200, 71, 0.95);
    color: #111216;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.15s;
    pointer-events: none;
}

.ks-media:hover .play {
    transform: translate(-50%, -50%) scale(1.08);
}

.ks-media.playing .play {
    opacity: 0;
}

.ks-body {
    padding: 22px 24px 26px;
}

.ks-ico {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(243, 200, 71, 0.14);
    border: 1px solid rgba(243, 200, 71, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}

.ks-ico svg {
    width: 22px;
    height: 22px;
    color: var(--yellow);
}

.ks-body h3 {
    font-size: 19px;
    color: #fff;
    margin-bottom: 8px;
}

.ks-body p {
    margin: 0;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.72);
}

/* big horizontal video */
.bigvid {
    position: relative;
    margin: 40px auto 0;
    max-width: 1080px;
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow);
    cursor: pointer;
    background: #0d0d11;
}

.bigvid video {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    display: block;
}

.bigvid .play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: rgba(243, 200, 71, 0.95);
    color: #111216;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.15s;
    pointer-events: none;
}

.bigvid:hover .play {
    transform: translate(-50%, -50%) scale(1.08);
}

.bigvid.playing .play {
    opacity: 0;
}

.dan {
    background: #fff;
}

.dan .dan-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 26px 0 34px;
}

.dan .dan-divider span {
    width: 64px;
    height: 2px;
    background: var(--yellow);
    border-radius: 2px;
}

.dan .dan-divider b {
    color: var(--yellow);
    font-size: 13px;
}

.dan-video {
    max-width: 1080px;
    margin: 0 auto;
    border-radius: var(--r-lg);
}

.vgrid-sec {
    padding: 88px 0;
    background: #fff;
}

.vg-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

@media (max-width: 900px) {
    .vg-grid {
        grid-template-columns: 1fr;
    }
}

.vg-media {
    position: relative;
    border-radius: var(--r-md);
    overflow: hidden;
    cursor: pointer;
    box-shadow: var(--shadow);
    background: #0d0d11;
}

.vg-media video {
    width: 100%;
    aspect-ratio: 16/10;
    object-fit: cover;
    display: block;
}

.vg-media .play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(243, 200, 71, 0.95);
    color: #111216;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.15s;
    pointer-events: none;
}

.vg-media:hover .play {
    transform: translate(-50%, -50%) scale(1.08);
}

.vg-media.playing .play {
    opacity: 0;
}

.vg-title {
    position: absolute;
    left: 18px;
    bottom: 14px;
    color: #fff;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 24px;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
    pointer-events: none;
}

.vg-card p {
    font-size: 14.5px;
    color: var(--muted-2);
    margin: 14px 4px 0;
}

/* ============ MOBILE POLISH (final pass, wins cascade) ============ */
@media (max-width: 640px) {
    body {
        font-size: 15.5px;
    }

    .container {
        padding: 0 18px;
    }

    section,
    .feat-sec,
    .vids,
    .reels,
    .even,
    .energy,
    .hyg,
    .why,
    .compare,
    .dan,
    .revs,
    .faq,
    .pop,
    .contact,
    .vgrid-sec {
        padding: 48px 0;
    }

    h1 {
        font-size: 26px;
    }

    h2 {
        font-size: 23px;
        line-height: 1.12;
    }

    h3 {
        font-size: 18px;
    }

    .eyebrow {
        font-size: 11px;
        padding-left: 32px;
        display: block;
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
    }

    /* hero product area */
    .pdp {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 14px 0 20px;
    }

    .gallery .main {
        min-height: 0;
        padding: 10px;
        border-radius: 20px;
    }

    .gallery .main img {
        max-height: 62vh;
    }

    .gallery .main::after {
        display: none;
    }

    /* no sheen on mobile */
    .gal-nav {
        width: 38px;
        height: 38px;
        font-size: 13px;
    }

    .gal-count {
        font-size: 11px;
        padding: 4px 10px;
        right: 12px;
        bottom: 12px;
    }

    .thumbs {
        gap: 8px;
        margin-top: 10px;
    }

    .thumbs button {
        flex: 0 0 60px;
        border-width: 1.5px;
    }

    /* buy card */
    .buy-card h1 {
        font-size: 23px;
    }

    .rating-row {
        padding-bottom: 14px;
        margin-bottom: 16px;
    }

    .off {
        font-size: 20px;
    }

    .price {
        font-size: 24px;
    }

    .price-old {
        font-size: 15px;
    }

    .mto-note {
        padding: 14px 14px;
        font-size: 13px;
        gap: 12px;
        align-items: center;
        border-radius: 12px;
    }

    .mto-ico {
        flex-basis: 32px;
        width: 32px;
        height: 32px;
        border-radius: 9px;
    }

    .mto-ico {
        flex-basis: 30px;
        width: 30px;
        height: 30px;
        border-radius: 8px;
    }

    .mto-ico svg {
        width: 16px;
        height: 16px;
    }

    .assure li {
        font-size: 13px;
        padding: 7px 0 7px 28px;
    }

    .cart-row .ws-btn {
        height: 56px;
        font-size: 14px;
    }

    .pay {
        height: 32px;
        padding: 0 11px;
        font-size: 12px;
    }

    /* tabs */
    .tabbar {
        gap: 8px;
        margin-top: 4px;
    }

    .tab {
        flex: 1 1 calc(50% - 8px);
        padding: 13px 8px;
        font-size: 11.5px;
        letter-spacing: 0.04em;
    }

    .about-list li {
        font-size: 16px;
        padding: 11px 0 11px 30px;
    }

    /* compare cards & spec mobile already stacked */
    .cmp-card {
        padding: 20px;
    }

    .msp-row {
        font-size: 13px;
    }

    /* why */
    .why-cols {
        gap: 22px;
    }

    .why-card {
        padding: 22px;
    }

    .why-card .p {
        font-size: 20px;
    }

    .why-media img {
        max-height: 60vh;
    }

    /* complete system cards */
    .ks-grid {
        gap: 16px;
    }

    .ks-body {
        padding: 18px 18px 22px;
    }

    .ks-body h3 {
        font-size: 17px;
    }

    .ks-body p {
        font-size: 13.5px;
    }

    .ks-media .play {
        width: 50px;
        height: 50px;
    }

    /* video grid + big videos */
    .vg-grid {
        gap: 16px;
    }

    .vg-title {
        font-size: 20px;
        left: 14px;
        bottom: 10px;
    }

    .vg-card p {
        font-size: 13.5px;
    }

    .bigvid {
        border-radius: 16px;
        margin-top: 28px;
    }

    .bigvid .play {
        width: 58px;
        height: 58px;
    }

    .dan-video {
        border-radius: 16px;
    }

    .dan .dan-divider {
        margin: 18px 0 24px;
    }

    .dan .dan-divider span {
        width: 44px;
    }

    /* feature rows */
    .feat {
        gap: 20px;
    }

    .feat p {
        font-size: 16px;
        text-align: center;
    }

    .feat-media--reverce {
        order: 2;
    }

    .feat-media img,
    .feat-media video {
        max-height: 340px;
    }

    .invest-stats {
        gap: 12px;
        margin-top: 20px;
    }

    .invest-stats b {
        font-size: 21px;
    }

    /* handbuilt slider */
    .hb-track figure {
        height: 330px;
        border-radius: 16px;
    }

    .hb-track figure > span {
        padding: 12px 14px;
        font-size: 13px;
    }

    .hb-dots {
        margin-top: 14px;
    }

    /* reels */
    .reel-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .reel .cap {
        font-size: 11.5px;
        padding: 10px 12px;
    }

    .reel .play {
        width: 44px;
        height: 44px;
    }

    /* even / energy / hygiene */
    .even .inner {
        gap: 24px;
    }

    .stat-big {
        font-size: 26px;
    }

    .wt th,
    .wt td {
        padding: 10px 12px;
        font-size: 13px;
    }

    .en-grid {
        gap: 12px;
        margin-top: 24px;
    }
    
    .en-grid.mobile {
        margin-top: 0px;
    }

    .en-card {
        padding: 22px;
    }

    .en-card .n {
        font-size: 27px;
    }

    .hyg-grid {
        gap: 12px;
        margin-top: 24px;
    }

    .hyg-card {
        padding: 20px;
    }

    /* reviews */
    .revs-head .score {
        font-size: 28px;
    }

    .rev-card {
        padding: 20px;
    }

    .rev-card p {
        font-size: 13.5px;
    }

    /* faq */
    .faq-item summary {
        padding: 16px 18px;
        font-size: 14.5px;
        line-height: 1.3;
    }

    .faq-item .fa-body {
        padding: 0 18px 16px;
        font-size: 13.5px;
    }

    /* popular products */
    .pop-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .pop-card .body {
        padding: 13px;
    }

    .pop-card h3 {
        font-size: 14px;
    }

    .pop-card .meta {
        font-size: 10.5px;
    }

    .pop-card .pr .now {
        font-size: 16px;
    }

    .pop-card .ws-btn {
        height: 40px;
        font-size: 11px;
    }

    /* contact */
    .contact .inner {
        gap: 24px;
    }

    .c-row {
        padding: 13px 15px;
    }

    .c-row a {
        font-size: 14.5px;
    }

    /* trust row */
    .trust-row .grid {
        gap: 12px;
    }

    .titem h3 {
        font-size: 15px;
    }

    .titem p {
        font-size: 12.5px;
    }

    .titem .ico svg {
        width: 26px;
        height: 26px;
    }

    /* guards against horizontal scroll */
    html,
    body {
        overflow-x: hidden;
    }

    img,
    video {
        max-width: 100%;
    }
}

@media (max-width: 400px) {
    .reel-grid,
    .pop-grid {
        grid-template-columns: 1fr;
    }

    .model-tabs {
        grid-template-columns: 1fr 1fr;
    }
}

/* iOS/Android button color fixes */
button {
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    font-family: inherit;
    color: var(--text);
}

.model-tabs button {
    color: var(--text);
}

.model-tabs button .n,
.model-tabs button .c {
    color: inherit;
}

.model-tabs button .c {
    color: var(--text);
}

.model-tabs button.on,
.model-tabs button.on .n {
    color: #fff;
}

.model-tabs button.on .c {
    color: #fff;
}

.msp-chips button {
    color: var(--text);
}

.msp-chips button.on {
    color: #fff;
}

.qty button {
    color: var(--muted-2);
}

.tab {
    color: var(--text);
}

.tab.active {
    color: #fff;
}

.hb-nav,
.gal-nav {
    color: var(--text);
}

/* quick specs strip */
.mspecs {
    margin: 0 0 18px;
}

.mspecs__row {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
}

.mspecs__row:first-child {
    border-top: 1px solid var(--line);
}

.mspecs__ico {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--yellow);
    border-radius: 50%;
    color: var(--text);
    opacity: 1;
    background: var(--card);
}

.mspecs__ico svg {
    width: 17px;
    height: 17px;
    display: block;
}

.mspecs__k {
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text);
    font-weight: 600;
    font-family: var(--font-body);
}

.mspecs__v {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14.5px;
    color: var(--text);
    text-align: right;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .mspecs__v {
        white-space: normal;
        font-size: 13.5px;
    }
}

/* photo previews in model switcher */
.model-tabs button {
    padding-top: 10px;
}

.mt-ph {
    display: block;
    width: 54px;
    height: 54px;
    margin: 0 auto 8px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--line);
    background: #fff;
}

.mt-ph img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    background: #fff;
}

.model-tabs button.on .mt-ph {
    border-color: var(--yellow);
    box-shadow: 0 0 0 1.5px var(--yellow);
}

@media (max-width: 640px) {
    .mt-ph {
        width: 64px;
        height: 64px;
        border-radius: 12px;
    }
}

#mainImage {
    transition: opacity 0.16s;
}

.ce-ico {
    display: inline-block;
    height: 18px;
    width: auto;
    vertical-align: -3px;
    margin-left: 6px;
}

/* site product-card in our page */
/* галерея зафиксирована, пока не дойдём до следующего блока */
.product-card .gallery {
    position: sticky;
    top: 16px;
    align-self: start;
}

@media (max-width: 980px) {
    .product-card .gallery {
        position: static;
    }
}

/* full-bleed, как на продуктовой странице сайта */
.container > .product-card {
    width: min(1920px, calc(100vw - 32px));
    margin: 18px calc((100% - min(1920px, calc(100vw - 32px))) / 2) 8px;
}

/* mobile: без full-bleed — карточка ровно по контейнеру, ничего не съезжает */
@media (max-width: 980px) {
    html,
    body {
        overflow-x: hidden;
        max-width: 100vw;
    }

    .container > .product-card {
        width: 100% !important;
        margin: 8px 0;
    }

    .product-card {
        max-width: 100% !important;
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .details,
    .buy,
    .buy-card,
    .summary,
    .purchase,
    .gallery {
        max-width: 100% !important;
        min-width: 0 !important;
        width: auto !important;
    }

    .cart-row,
    .pay-row,
    .benefits-ws,
    .mspecs,
    .mto-note,
    .guarantee,
    .volume {
        max-width: 100%;
        min-width: 0;
    }
}

.product-card .buy {
    position: sticky;
    top: 24px;
}

@media (max-width: 900px) {
    .product-card .buy {
        position: static;
    }
}

.product-card .buy-card {
    box-shadow: none;
    border: none;
}

/* tab bar below product block: one row, clearly clickable */
.tabs-sec .tabbar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin: 6px 0 10px;
    padding-bottom: 0;
}

.tabs-sec .tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    padding: 16px 18px;
    border: 1.5px solid var(--line);
    box-shadow: 0 3px 10px rgba(20, 20, 20, 0.06);
}

.tabs-sec .tab:hover {
    border-color: var(--ink-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(20, 20, 20, 0.12);
}

.tab__chev {
    font-size: 11px;
    opacity: 0.55;
    transition: transform 0.15s;
}

.tab:hover .tab__chev {
    transform: translateY(2px);
    opacity: 0.9;
}

.tab.active .tab__chev {
    color: var(--yellow);
    opacity: 1;
}

@media (max-width: 900px) {
    .tabs-sec .tabbar {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .tabs-sec .tab {
        padding: 13px 10px;
        font-size: 11.5px;
    }
}

/* ===== Amazon-style model swatches ===== */
.model-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    border: none;
    border-radius: 0;
    overflow: visible;
    background: none;
    box-shadow: none;
}

.model-tabs button {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--card);
    padding: 0 0 10px;
    cursor: pointer;
    text-align: center;
    position: relative;
    transition: border-color 0.1s;
    box-shadow: none;
    transform: none;
}

.model-tabs button:hover {
    background: var(--card);
    border-color: var(--muted);
    transform: none;
    box-shadow: none;
}

.model-tabs button.on {
    border: 2px solid var(--yellow);
    background: #fff;
    box-shadow: 0 0 0 2px rgba(243, 200, 71, 0.35);
    transform: none;
}

.model-tabs button.on::after {
    display: none;
}

.mt-ph {
    display: block;
    width: 100%;
    height: 170px;
    margin: 0 0 8px;
    border: none;
    border-radius: 9px 9px 0 0;
    overflow: hidden;
    background: #fff;
    box-shadow: none;
}

.model-tabs button.on .mt-ph {
    border: none;
    box-shadow: none;
}

.mt-ph img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #fff;
}

.model-tabs button .n {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 15px;
    line-height: 1.2;
    display: block;
    color: var(--text);
    letter-spacing: 0;
}

.model-tabs button .c {
    font-size: 12.5px;
    color: var(--text);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
}

.model-tabs button .mp {
    display: block;
    margin-top: 4px;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 15px;
    color: var(--text);
}

.model-tabs button .mp s {
    font-weight: 500;
    font-size: 12px;
    color: var(--muted);
    margin-left: 4px;
}

.model-tabs button.on .mp {
    color: var(--text);
}

.model-tabs button.on .mp s {
    color: var(--muted);
}

.model-tabs button.on .n {
    color: var(--text);
}

.model-tabs button.on .c {
    color: var(--text);
}

@media (max-width: 640px) {
    .model-tabs {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .model-tabs button {
        width: 100%;
        min-width: 0;
        padding-bottom: 10px;
    }

    .mt-ph {
        height: 140px;
        width: 100%;
        border-radius: 8px 8px 0 0;
    }

    .model-tabs button .n {
        font-size: 14px;
    }

    .model-tabs button .c {
        font-size: 12px;
    }

    .model-tabs button .mp {
        font-size: 14px;
    }

    .cap-label {
        font-size: 12px;
        margin: 4px 0 10px;
    }

    .model-tabs button .n {
        font-size: 12px;
    }

    .model-tabs button .c {
        font-size: 10px;
    }
}

/* логика блоков с продуктовой страницы сайта: на мобильных
     заголовок и рейтинг выносятся над галерею (product-card__head) */
.product-card__head {
    display: none;
}

@media (max-width: 980px) {
    .product-card__head {
        display: grid;
        grid-area: head;
        gap: 6px;
        margin: 0;
        padding: 0 2px;
    }

    .pch-title {
        font-size: clamp(24px, 6.4vw, 31px);
        line-height: 1.08;
        margin: 0;
        font-family: var(--font-head);
    }

    .rating-row--head {
        padding-bottom: 0 !important;
        border-bottom: none !important;
        margin-bottom: 0 !important;
    }

    section.product-card {
        padding: 10px 0 24px !important;
    }

    .product-card {
        row-gap: 6px !important;
    }

    .buy-card h1,
    .buy-card .rating-row:not(.rating-row--head) {
        display: none;
    }
}

/* слайдер-навигация карточек моделей (только мобильные) */
.mt-nav {
    display: none;
}

@media (max-width: 640px) {
    .mt-nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin: 2px 0 14px;
    }

    .mt-nav__btn {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        border: none;
        display: grid;
        place-items: center;
        background: var(--ink-dark);
        color: var(--yellow);
        cursor: pointer;
        transition: 0.15s;
        flex: 0 0 38px;
    }

    .mt-nav__btn svg {
        width: 16px;
        height: 16px;
    }

    .mt-nav__btn:disabled {
        background: #c9c9c9;
        color: #fff;
        cursor: default;
    }

    .mt-nav__dots {
        display: flex;
        gap: 6px;
        align-items: center;
    }

    .mt-nav__dot {
        width: 26px;
        height: 4px;
        border-radius: 99px;
        background: #cfcfcf;
        transition: 0.2s;
    }

    .mt-nav__dot.is-active {
        background: var(--yellow);
    }
}

/* ===== mobile polish ===== */
@media (max-width: 640px) {
    body {
        font-size: 16px;
    }

    .container {
        padding: 0 14px;
    }

    h2 {
        font-size: 26px;
    }

    h3 {
        font-size: 19px;
    }

    .feat-sec {
        padding: 48px 0;
    }

    .feat-sec p {
        text-align: center;
    }

    .compare {
        padding: 48px 0;
    }

    /* карточка покупки */
    .buy-card {
        padding: 12px 0 16px;
        border: none;
        border-radius: 0;
        box-shadow: none;
    }

    .details {
        margin-top: 0 !important;
    }

    .product-card {
        gap: 10px 12px;
    }

    .price-row {
        margin: 4px 0 4px;
    }

    .pay-title {
        font-size: 13px;
    }

    .buy-card h1 {
        font-size: 26px;
        margin-bottom: 8px;
    }

    .rating-row {
        padding-bottom: 12px;
        margin-bottom: 14px;
    }

    .price-row {
        margin: 12px 0 4px;
        gap: 10px;
    }

    .lead-copy {
        font-size: 14px;
        margin: 8px 0 14px;
    }

    /* карточки моделей: фото по пропорции, без обрезки */
    /* как на Amazon: карточки в один ряд со свайпом */
    .model-tabs {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 2px 0 6px;
        margin: 0;
        scroll-padding: 0;
    }

    .model-tabs::-webkit-scrollbar {
        display: none;
    }

    .model-tabs button {
        flex: 0 0 33%;
        min-width: 118px;
        max-width: 140px;
        scroll-snap-align: start;
        padding-bottom: 8px;
        border-radius: 8px;
    }

    .model-tabs::after {
        content: "";
        flex: 0 0 4px;
    }

    .mt-ph {
        height: 96px;
        aspect-ratio: auto;
        margin: 0 0 4px;
    }

    /* спецификации: без обрезания значений */
    .mspecs__row {
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 4px 8px;
        padding: 8px 0;
    }

    .mspecs__ico {
        width: 30px;
        height: 30px;
        flex-basis: 30px;
    }

    .mspecs__ico svg {
        width: 15px;
        height: 15px;
    }

    .mspecs__k {
        font-size: 11.5px;
    }

    .mspecs__v {
        grid-column: 2;
        text-align: left;
        white-space: normal;
        font-size: 14px;
    }

    /* преимущества и заметка */
    .benefits-ws {
        gap: 10px;
        font-size: 13px;
        margin: 0 0 16px;
    }

    .mto-note {
        font-size: 12.5px;
        padding: 12px;
        margin: 0 0 14px;
    }

    /* платёжные бейджи компактнее */
    .pay-row {
        gap: 8px;
    }

    .pay {
        height: 34px;
        min-width: 0;
        padding: 0 12px;
        font-size: 13px;
        border-radius: 8px;
    }

    .pay svg {
        transform: scale(0.9);
    }

    /* табы: крупные, во всю ширину, удобные пальцу */
    .tabs-sec .tabbar {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin: 4px 0 8px;
    }

    .tabs-sec .tab {
        padding: 12px 6px;
        font-size: 10.5px;
        min-height: 44px;
    }

    /* таблицы и текст секций */
    .about-list {
        margin-top: 24px;
    }

    .spec-row {
        padding: 12px 14px;
        font-size: 14px;
    }

    .ship-grid {
        gap: 12px;
        margin-top: 24px;
    }

    .ship-card {
        padding: 18px;
    }

    .trust-row {
        padding: 36px 0;
    }

    .trust-row .grid {
        gap: 10px;
    }

    /* нижняя плавающая кнопка: безопасная зона iPhone */
    .mob-cta {
        padding-bottom: max(10px, env(safe-area-inset-bottom));
    }
}

@media (max-width: 400px) {
    .model-tabs button .n {
        font-size: 13px;
    }

    .model-tabs button .c {
        font-size: 11px;
    }

    .model-tabs button .mp {
        font-size: 13px;
    }

    .tabs-sec .tab {
        font-size: 10.5px;
    }
}

/* ===== mobile: единый ритм и стиль ===== */
@media (max-width: 640px) {
    /* единые вертикальные отступы секций */
    .compare,
    .why,
    .even,
    .energy,
    .hyg,
    .feat-sec,
    .vids,
    .reels,
    .procvid,
    .dan,
    .revs,
    .faq,
    .pop,
    .contact,
    .vgrid-sec {
        padding: 44px 0;
    }

    .trust-row {
        padding: 32px 0;
    }

    /* заголовки секций — компактнее, ровный ритм */
    h2 {
        font-size: 24px;
        line-height: 1.15;
        margin-bottom: 0.45em;
        text-align: center;
    }

    .sec-sub,
    .sub {
        font-size: 14.5px;
    }

    /* хлебные крошки и верх */
    .bc {
        font-size: 12px;
        padding-top: 14px;
    }

    /* спец-таблицы и карточки сравнения */
    .cmp-card {
        padding: 16px;
        border-radius: 14px;
    }

    .cmp-card .ws-btn {
        font-size: 13px;
        width: 100% !important;
    }

    .spec-row {
        grid-template-columns: 1fr;
        gap: 2px;
        padding: 11px 12px;
    }

    /* видео-карточки: скругления и отступы */
    .vid-card,
    .reel,
    .bigvid,
    .vg-media {
        border-radius: 14px;
    }

    /* отзывы */
    .rev-card {
        padding: 16px;
        border-radius: 14px;
    }

    /* faq */
    .faq-item summary {
        padding: 14px 0;
        font-size: 14.5px;
    }

    /* контакты */
    .contact .ways a {
        min-height: 52px;
    }

    /* заголовок в мобильной шапке товара */
    .pch-title {
        letter-spacing: -0.02em;
    }

    .product-card__head {
        padding: 2px 2px 8px;
    }

    .rating-row--head .stars {
        font-size: 17px;
        gap: 4px;
    }

    .rating-row--head .reviews-link {
        font-size: 13px;
    }

    /* прогресс-бар тоньше */

    /* плавающая CTA — стильнее */
    .mob-cta .ws-btn {
        height: 50px;
        border-radius: 12px;
        font-size: 13.5px;
        letter-spacing: 0.05em;
        box-shadow: 0 10px 26px rgba(240, 118, 31, 0.35);
    }
}

/* КОСТЫЛЬ: плашка на видео, которое не загрузилось — показывает ожидаемый файл */
.ws-vidbadge {
    position: absolute;
    left: 10px;
    bottom: 10px;
    background: rgba(17, 18, 22, 0.82);
    color: #ffd84d;
    font:
        600 12px/1.4 ui-monospace,
        Consolas,
        monospace;
    padding: 6px 10px;
    border-radius: 8px;
    z-index: 6;
    pointer-events: none;
    max-width: 92%;
    word-break: break-all;
    text-align: left;
}

/* Крупные фото-карточки 4:5 в блоках с текстом */
.feat-media--lg img,
.feat-media--lg video {
    width: 100%;
    max-width: 520px;
    height: 100%;
    max-height: none;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow);
}

.feat-media--lg video {
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

@media (max-width: 760px) {
    .feat-media--lg img,
    .feat-media--lg video {
        max-width: 100%;
        max-height: none;
    }
}

/* Вырезанное фото без фона — без тени и скругления, стоит прямо на фоне страницы */
.feat-media--cut img,
.feat-media--cut video {
    box-shadow: none;
    border-radius: 0;
    max-width: 480px;
}

.spec-hide-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 26px;
    border: 1.5px solid var(--line, #e3ded2);
    border-radius: 999px;
    background: transparent;
    color: var(--text, #111216);
    font: 600 15px/1 var(--font-body, inherit);
    cursor: pointer;
    transition:
        background 0.15s,
        border-color 0.15s;
}

.spec-hide-btn:hover {
    background: rgba(17, 18, 22, 0.05);
    border-color: var(--text, #111216);
}

.invest-stats--brand b {
    padding: 1px 5px;
    border-radius: .38em;
    background: #FFD152;
    color: #111 !important;
    -webkit-text-fill-color: #111 !important;
    box-shadow: none;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    width: fit-content;
}

/* FAQ в стиле главной страницы */
.faqx {
    padding: 88px 0;
}

.faqx-title {
    text-align: center;
    font-size: 48px;
    margin: 0 0 18px;
}

.faqx-sub {
    text-align: center;
    margin: 0 0 34px;
}

.faqx-sub span {
    display: inline-block;
    border-radius: 12px;
    padding: 10px 22px;
    color: var(--muted-2);
    font-size: 18px;
}

.faqx-list {
    max-width: 1080px;
    margin: 0 auto;
}

.faqx-item {
    border-bottom: 1px solid var(--line);
}

.faqx-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    width: 100%;
    padding: 26px 4px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: var(--h5-size);
    color: var(--text);
}

.faqx-plus {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--yellow);
    color: #111216 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font: 400 24px/1 var(--font-body);
    transition: transform 0.2s;
}

.faqx-item.open .faqx-plus {
    transform: rotate(45deg);
}

.faqx-a {
    padding: 0 4px 24px;
    color: var(--muted-2);
    font-size: 18px;
    max-width: 900px;
}

.faqx-a a {
    color: var(--ws-btn-primary-bg);
}

@media (max-width: 760px) {
    .faqx {
        padding: 56px 0;
    }

    .faqx-title {
        font-size: 34px;
    }

    .faqx-q {
        font-size: 20px;
        padding: 20px 2px;
    }

    .faqx-sub span {
        font-size: 16px;
    }

    .faqx-a {
        font-size: 16px;
    }
}

.mapx {
    padding: 88px 0;
}

.mapx-title {
    text-align: center;
    margin: 0 0 10px;
}

.mapx-sub {
    text-align: center;
    color: var(--muted-2);
    margin: 0 0 26px;
}

.mapx-frame {
    max-width: 1080px;
    margin: 0 auto;
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow);
    border: 1.5px solid var(--line);
}

.mapx-link {
    text-align: center;
    margin: 16px 0 0;
}

.mapx-link a {
    color: var(--text);
    font-weight: 600;
}

@media (max-width: 760px) {
    .mapx {
        padding: 56px 0;
    }

    .mapx-frame iframe {
        height: 320px;
    }

    .mapx-link a {
        width: 100% !important;
    }
}

.cmpx-cell .st {
    color: #ff9900;
    margin-right: 8px;
    letter-spacing: 1px;
}

/* redesigned competitor block */
.why2-intro {
    text-align: center;
    color: var(--muted-2);
    max-width: 780px;
    margin: 0 auto 44px;
}

.why2-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr 1fr;
    gap: 20px;
    align-items: stretch;
    max-width: 1120px;
    margin: 0 auto;
}

.why2-card {
    background: #fff;
    border: 1.5px solid var(--line);
    border-radius: var(--r-lg);
    padding: 28px;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
}

.why2-card--hero {
    border: 2px solid var(--yellow);
    position: relative;
}

.why2-badge {
    position: absolute;
    top: -14px;
    left: 24px;
    background: var(--yellow);
    color: #111216;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.04em;
    padding: 6px 14px;
    border-radius: 999px;
}

.why2-name {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 19px;
}

.why2-price {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 30px;
    margin: 10px 0 14px;
}

.why2-card--hero .why2-price {
    margin-top: 16px;
}

.why2-price--muted {
    color: var(--muted);
    font-size: 24px;
}

.why2-card p {
    color: var(--muted-2);
    font-size: 15px;
    margin: 0;
}

.why2-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.why2-list li {
    position: relative;
    padding-left: 26px;
    font-size: 15px;
    color: var(--muted-2);
}

.why2-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--yellow);
}

.why2-list li::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 7px;
    width: 5px;
    height: 8px;
    border: solid #111216;
    border-width: 0 2px 2px 0;
    transform: rotate(42deg);
}

.why2-banner {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 0;
    max-width: 1120px;
    margin: 26px auto 0;
    background: #fff;
    border: 1.5px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow);
}

.why2-banner-media {
    min-height: 260px;
}

.why2-banner-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.why2-banner-body {
    padding: 34px 38px;
    color: var(--text);
}

.why2-banner-body h3 {
    font-family: var(--font-head);
    font-size: 23px;
    margin: 0 0 20px;
}

.why2-points {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 26px;
}

.why2-points b {
    display: block;
    color: var(--text);
    font-size: 16px;
    margin-bottom: 3px;
}

.why2-points span {
    color: var(--muted-2);
    font-size: 14px;
    line-height: 1.5;
}

@media (max-width: 900px) {
    .why2-grid {
        grid-template-columns: 1fr;
    }

    .why2-banner {
        grid-template-columns: 1fr;
    }

    .why2-banner-media {
        min-height: 200px;
    }

    .why2-points {
        grid-template-columns: 1fr;
    }

    .why2-banner-body {
        padding: 26px 22px;
    }
}

/* типографика как в теме сайта (typography-figma) */
body {
    font-size: 18px;
}

h2 {
    font-size: 48px;
    line-height: 1.25;
    letter-spacing: -0.025em;
}

@media (max-width: 760px) {
    body {
        font-size: 16px;
    }

    h2 {
        font-size: 34px;
    }
}

/* мобильные карточки сравнения */
.cmp-card {
    display: block;
    text-align: left;
    padding: 20px;
    margin-bottom: 16px;
}

.cmp-card-top {
    display: grid;
    grid-template-columns: 128px 1fr;
    gap: 16px;
    align-items: center;
    margin-bottom: 14px;
}

.cmp-card-ph {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 160px;
}

.cmp-card-ph img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.cmp-card-body h3 {
    margin: 0 0 4px;
    font-size: 21px;
}

.cmp-card-rate {
    color: var(--muted-2);
    font-size: 13px;
    margin-bottom: 4px;
}

.cmp-card-rate .st {
    color: #ff9900;
    margin-right: 6px;
    letter-spacing: 1px;
}

.cmp-card .pr {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 24px;
    margin: 0 0 2px;
}

.cmp-card-load {
    color: var(--text);
    background: rgba(243, 200, 71, 0.35);
    display: inline-block;
    border-radius: 999px;
    padding: 3px 12px;
    font-weight: 700;
    font-size: 13px;
    margin: 4px 0 6px;
}

.cmp-card-best {
    color: var(--muted);
    font-size: 13px;
    margin: 0;
}

.cmp-card-specs {
    list-style: none;
    margin: 0 0 14px;
    padding: 12px 0 0;
    border-top: 1px solid var(--line);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 14px;
}

.cmp-card-specs li {
    position: relative;
    padding-left: 18px;
    font-size: 13px;
    color: var(--muted-2);
    line-height: 1.4;
}

.cmp-card-specs li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--yellow);
}

.cmp-card .ws-btn {
    width: 100%;
}

/* owner stories: 3 карточки-ссылки на страницы историй */
.reel-grid--stories {
    grid-template-columns: repeat(3, 1fr);
}

.reel--story {
    display: block;
    text-decoration: none;
    position: relative;
}

.reel--story:hover .play {
    transform: scale(1.08);
}

@media (max-width: 900px) {
    .reel-grid--stories {
        grid-template-columns: 1fr;
    }
}

/* слайдер дымогенератора + сетка цифр на 4 */
.invest-stats--4 {
    grid-template-columns: repeat(2, 1fr);
}

.sg-slider {
    position: relative;
    max-width: 520px;
    margin: 0 auto;
}

.sg-frame {
    position: relative;
    aspect-ratio: 4/5;
    border-radius: var(--r-lg);
    overflow: hidden;
}

.sg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.25s;
}

.sg-img.is-on {
    opacity: 1;
}

/* соседний кадр, который «выезжает» из-за края во время свайпа */
.sg-img.is-peek {
    opacity: 1;
}

.sg-slider.is-dragging .sg-img,
.sg-slider.is-settling .sg-img {
    will-change: transform;
}

/* пока палец на экране — кадр идёт ровно за ним, без анимации */
.sg-slider.is-dragging .sg-img,
.sg-slider.is-instant .sg-img {
    transition: none;
}

/* доводка после отпускания пальца */
.sg-slider.is-settling .sg-img {
    transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
    .sg-slider.is-settling .sg-img {
        transition: transform 0.01s linear;
    }
}

.sg-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: #1d1b1b;
    color: var(--ws-btn-primary-bg);
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition:
        transform 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease;
}

.sg-nav:hover {
    margin-top: -1px;
    background: #252322;
    border-color: rgba(255, 255, 255, 0.2);
}

.sg-nav svg {
    width: 20px;
    height: 20px;
    display: block;
    color: var(--ws-cold-accent);
}

.sg-prev {
    left: 10px;
}

.sg-next {
    right: 10px;
}

.sg-dots {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    max-width: 100%;
    margin-top: 12px;
}

.sg-dots span {
    flex: 0 1 2.875rem;
    min-width: 0.75rem;
    width: 2.875rem;
    height: 0.25rem;
    border-radius: 999rem;
    margin: 0;
    vertical-align: top;
    opacity: 1;
    background: var(--muted);
    transition:
        width 0.2s ease,
        background-color 0.2s ease;
}

.sg-dots span.on {
    background: var(--ws-btn-primary-bg, #f3c847);
}

.slide-count {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 4;
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 999rem;
    background: rgba(13, 13, 17, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(6px);
    color: rgba(255, 255, 255, 0.85);
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.02em;
    pointer-events: none;
}

.slide-count__cur {
    color: var(--ws-btn-primary-bg, #f3c847);
    font-size: 17px;
    font-weight: 700;
}

.slide-count .slide-count__total {
    color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 760px) {
    .invest-stats--4 {
        grid-template-columns: 1fr 1fr;
    }

    .slide-count {
        top: 10px;
        left: 10px;
        padding: 6px 12px;
        font-size: 13px;
    }

    .slide-count__cur {
        font-size: 15px;
    }
}

/* чередование фонов: белый / 29,27,27 */
.alt-light {
    background: #fff !important;
}

.alt-dark {
    background: #1d1b1b !important;
}

.alt-dark h2,
.alt-dark h3,
.alt-dark h4 {
    color: #fff !important;
}

.alt-dark p,
.alt-dark li,
.alt-dark span:not(.play):not(.st):not(.cap) {
    color: rgba(255, 255, 255, 0.78);
}

.alt-dark .eyebrow {
    color: rgba(255, 255, 255, 0.65) !important;
}

.alt-dark .stat-big {
    color: #fff !important;
}

.alt-dark .invest-stats b {
    color: var(--yellow) !important;
}

.alt-dark .invest-stats span {
    color: rgba(255, 255, 255, 0.6) !important;
}

.alt-dark .wt,
.alt-dark .wt td,
.alt-dark .wt th {
    background: #fff;
}

.alt-dark .wt th {
    background: var(--ws-btn-primary-bg);
}

.alt-dark .wt td,
.alt-dark .wt th {
    color: #111216 !important;
}

.alt-dark .en-card {
    background: #fff;
}

.alt-dark .en-card p,
.alt-dark .en-card span {
    color: #4a4a4a !important;
}

.alt-dark .hyg-card {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.09);
}

.alt-dark .hyg-card h3 {
    /* color: #111216 !important */
}

.alt-dark .hyg-card p {
    /* color: #4a4a4a !important */
}

.alt-dark .cmpx-col,
.alt-dark .cmp-card {
    background: #fff;
}

.alt-dark .cmpx-col span,
.alt-dark .cmp-card span,
.alt-dark .cmp-card p,
.alt-dark .cmpx-cell {
    color: #4a4a4a !important;
}

.alt-dark .cmpx-name,
.alt-dark .cmp-card h3 {
    color: #111216 !important;
}

.alt-dark .cmpx-col .st,
.alt-dark .cmp-card .st {
    color: #ff9900 !important;
}

.alt-dark .ks-card {
    background: #fff;
}

.alt-dark .ks-card h3 {
    color: #111216 !important;
}

.alt-dark .ks-card p {
    color: #4a4a4a !important;
}

.alt-dark .faqx-item {
    border-color: rgba(255, 255, 255, 0.15);
}

.alt-dark .faqx-q,
.alt-dark .faqx-q span {
    color: #fff;
}

.alt-dark .faqx-a p {
    color: rgba(255, 255, 255, 0.75) !important;
}

.alt-dark .faqx-sub span {
    color: rgba(255, 255, 255, 0.8) !important;
}

.alt-dark .about-list li {
    color: rgba(255, 255, 255, 0.8) !important;
}

.alt-dark .about-list b {
    color: #fff !important;
}

.alt-dark .cap {
    color: #fff !important;
}

.alt-dark .spec-hide-btn {
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff !important;
}

.alt-dark .tabbar .tab {
    color: rgba(255, 255, 255, 0.7) !important;
}

.alt-dark .tabbar .tab.active {
    color: #fff !important;
}

.alt-dark .sg-frame {
    background: #2a2828;
}

.alt-dark .why2-points b {
    color: #fff !important;
}

.alt-dark .mapx-sub {
    color: rgba(255, 255, 255, 0.75) !important;
}

.alt-dark .pop-card {
    background: #fff;
}

.alt-dark .pop-card * {
    color: #111216;
}

.alt-dark .reel .cap {
    color: #fff !important;
}
/* ===== Gallery from Profit 130 product page (theme webseven, product_blocks) ===== */
.ws-product-card {
    --ws-gallery-h: min(90vh, 980px);
}

.gallery {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 8px;
    align-items: stretch;
}

.thumbs-shell {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: var(--ws-gallery-h);
    overflow: hidden;
}

.thumbs-viewport {
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0;
    box-sizing: border-box;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.thumbs-viewport::-webkit-scrollbar {
    display: none;
}

.thumbs {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-right: 0;
}

.thumb-nav {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    min-height: 34px;
    border: 1px solid rgba(17, 17, 17, 0.08);
    border-radius: 999px;
    background: #ffffff;
    color: #111111;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        border-color 0.2s ease;
    z-index: 2;
}

.thumb-nav--prev {
    top: 0;
}

.thumb-nav--next {
    bottom: 0;
}

.thumb-nav:hover:not(:disabled) {
    transform: translateY(-1px);
    border-color: rgba(17, 17, 17, 0.18);
}

.thumb-nav:disabled {
    opacity: 0.35;
    cursor: default;
}

.thumb-nav span {
    font-size: 12px;
    line-height: 1;
}

.thumb-nav {
    display: none !important;
}

.thumb {
    width: 100%;
    border: 1px solid transparent;
    background: var(--surface);
    border-radius: 4px;
    padding: 0;
    overflow: hidden;
    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.thumb:hover {
    transform: translateY(-2px);
}

.thumb.is-active {
    border-color: #191919;
    box-shadow: inset 0 0 0 0.5px #191919;
}

.thumb img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 5;
    object-fit: cover;
    border-radius: 4px;
}

.stage {
    height: var(--ws-gallery-h);
    min-height: 0;
    background: #fbfaf7;
    border-radius: 12px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 0;
}

.stage > .main-image {
    transition: opacity 0.18s ease;
}

.thumbs > .thumb {
    animation: ws-thumb-in 0.18s ease both;
}

@keyframes ws-thumb-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .stage > .main-image {
        transition: none;
    }

    .thumbs > .thumb {
        animation: none;
    }
}

.ws-stage-badges {
    position: absolute;
    left: 14px;
    z-index: 3;
    display: flex;
    pointer-events: none;
}

.ws-stage-badges--top {
    top: 14px;
}

.ws-stage-badges--bottom {
    bottom: 14px;
}

.ws-stage-badge {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex-direction: column;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(17, 18, 22, 0.18);
    background: rgba(255, 255, 255, 0.95);
    color: #111216;
    font-size: 13px;
    line-height: 1;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.ws-stage-badge--ghost {
    background: rgba(255, 255, 255, 0.82);
}

.ws-stage-badge__title {
    display: inline;
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.ws-stage-badge__value {
    display: inline;
    font-size: 14px;
    font-weight: 700;
    text-transform: none;
    white-space: nowrap;
}

.ws-stage-badge--warranty {
    flex-direction: row;
    align-items: baseline;
    gap: 6px;
}

.zoom-button {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 52px;
    height: 52px;
    border: 0;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 10px 20px rgba(20, 20, 20, 0.08);
    display: grid;
    place-items: center;
}

.zoom-button svg {
    width: 24px;
    height: 24px;
    fill: #111111;
}

.ws-product-card .stage > img.main-image {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    filter: none;
    border-radius: 12px !important;
}

.pswp--touch .pswp__button--arrow--prev,
.pswp--touch .pswp__button--arrow--next {
    visibility: visible !important;
    display: flex !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

.pswp .ws-pswp-thumbs {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 104px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    box-sizing: border-box;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
}

.pswp .ws-pswp-thumbs__track {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    padding: 8px 4px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

.pswp .ws-pswp-thumbs__track::-webkit-scrollbar {
    display: none;
}

.pswp .ws-pswp-thumbs__item {
    flex: 0 0 auto;
    width: 72px;
    height: 72px;
    margin: 0;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
    cursor: pointer;
    opacity: 0.55;
    transition: opacity 0.15s ease, border-color 0.15s ease;
    -webkit-appearance: none;
    appearance: none;
}

.pswp .ws-pswp-thumbs__item:hover,
.pswp .ws-pswp-thumbs__item:focus-visible {
    opacity: 1;
}

.pswp .ws-pswp-thumbs__item:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

.pswp .ws-pswp-thumbs__item.is-active {
    opacity: 1;
    border-color: #ffffff;
}

.pswp .ws-pswp-thumbs__item > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

@media (max-width: 700px) {
    .pswp .ws-pswp-thumbs {
        height: 76px;
        padding: 0 6px;
    }

    .pswp .ws-pswp-thumbs__track {
        gap: 6px;
    }

    .pswp .ws-pswp-thumbs__item {
        width: 52px;
        height: 52px;
        border-width: 2px;
        border-radius: 6px;
    }
}

@media (max-height: 560px) {
    .pswp .ws-pswp-thumbs {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pswp .ws-pswp-thumbs__item {
        transition: none;
    }
}

/* neutralize old landing gallery styles */
.ws-product-card .thumbs {
    flex-direction: column;
    margin-top: 0;
    overflow: visible;
    padding-bottom: 0;
    gap: 2px;
}

.ws-product-card .thumbs button {
    flex: none;
    border: 1px solid transparent;
    border-radius: 4px;
    opacity: 1;
    box-shadow: none;
    background: var(--surface, #f7f5ef);
}

.ws-product-card .thumbs button:hover {
    opacity: 1;
    transform: translateY(-2px);
}

.ws-product-card .thumbs button.is-active {
    border-color: var(--yellow);
    box-shadow: 0 0 0 2px rgba(243, 200, 71, 0.35);
}

.ws-product-card .thumbs button::after {
    display: none;
}

/* ===== responsive rules from product_blocks/responsive.css (gallery only) ===== */
@media (min-width: 981px) and (max-width: 1180px) {
    .ws-product-card {
        --ws-gallery-h: clamp(420px, calc(100vh - 260px), 620px);
    }

    .ws-product-card .gallery {
        grid-template-columns: 64px minmax(0, 420px);
        gap: 8px;
        justify-content: start;
        align-items: stretch;
    }

    .ws-product-card .thumbs-viewport {
        padding: 0;
    }

    .ws-product-card .stage {
        border-radius: 12px;
    }

    .ws-product-card .main-image {
        object-fit: cover;
        object-position: center center;
    }
}

@media (min-width: 768px) and (max-width: 1180px) and (orientation: portrait) {
    :root {
        --ws-tablet-gallery-size: clamp(380px, 50vw, 560px);
    }

    .ws-product-card {
        --ws-gallery-h: var(--ws-tablet-gallery-size);
    }

    .ws-product-card .gallery {
        grid-template-columns: 56px minmax(0, 390px);
        gap: 8px;
        align-items: stretch;
        justify-content: start;
    }

    .ws-product-card .thumbs-viewport {
        height: 100%;
        padding: 0;
    }

    .ws-product-card .thumbs {
        gap: 2px;
    }

    .ws-product-card .stage {
        border-radius: 12px;
    }

    .ws-product-card .main-image {
        object-fit: cover;
        object-position: center center;
    }
}

@media (max-width: 820px) {
    :root {
        --ws-mobile-gallery-height: clamp(560px, 132vw, 700px);
    }

    .ws-product-card {
        --ws-gallery-h: var(--ws-mobile-gallery-height);
    }

    .ws-product-card .gallery {
        grid-template-columns: 64px minmax(0, 1fr);
        gap: 8px;
        align-items: stretch;
        contain: layout style;
    }

    .ws-product-card .thumb {
        min-width: 0;
        padding: 0;
    }

    .ws-product-card .stage {
        min-height: 0;
        padding: 0;
        border-radius: 12px;
    }

    .ws-product-card .thumbs-viewport {
        height: 100%;
        padding: 0;
    }

    .ws-product-card .main-image {
        height: 100%;
        max-height: 100%;
        object-fit: cover;
        object-position: center center;
    }

    .ws-product-card .thumbs {
        order: 0;
        flex-direction: column;
        padding-bottom: 0;
        gap: 10px;
    }

    .ws-product-card .thumb-nav {
        min-height: 30px;
    }
}

@media (max-width: 560px) {
    :root {
        --ws-mobile-gallery-height: clamp(540px, 128vw, 680px);
    }

    .ws-product-card {
        --ws-gallery-h: var(--ws-mobile-gallery-height);
    }

    .ws-product-card .gallery {
        grid-template-columns: 58px minmax(0, 1fr);
        gap: 6px;
        align-items: stretch;
    }

    .ws-product-card .thumbs {
        gap: 2px;
    }

    .ws-product-card .thumbs-shell {
        gap: 0;
    }

    .ws-product-card .thumbs-viewport {
        height: 100%;
        padding: 0;
    }

    .ws-product-card .thumb-nav {
        display: none;
    }

    .ws-product-card .thumb {
        border-radius: 4px;
        padding: 0;
    }

    .ws-product-card .thumb img {
        border-radius: 4px;
    }

    .ws-product-card .stage {
        min-height: 0;
        border-radius: 12px;
        padding: 0;
    }

    .ws-product-card .main-image {
        height: 100%;
        max-height: 100%;
    }
}

@media (max-width: 980px) and (orientation: landscape) {
    :root {
        --ws-mobile-gallery-height: clamp(360px, 72vw, 480px);
    }

    .ws-product-card {
        --ws-gallery-h: var(--ws-mobile-gallery-height);
    }

    .ws-product-card .gallery {
        grid-template-columns: 58px minmax(0, 1fr);
        gap: 6px;
        align-items: stretch;
    }

    .ws-product-card .thumbs-viewport {
        height: 100%;
        padding: 0;
    }

    .ws-product-card .thumbs {
        gap: 2px;
    }

    .ws-product-card .stage {
        border-radius: 12px;
    }
}

@media (max-width: 760px) and (orientation: landscape) and (max-height: 500px) {
    :root {
        --ws-mobile-gallery-height: clamp(300px, 68vw, 420px);
    }

    .ws-product-card {
        --ws-gallery-h: var(--ws-mobile-gallery-height);
    }

    .ws-product-card .gallery {
        grid-template-columns: 50px minmax(0, 1fr);
        gap: 5px;
        align-items: stretch;
    }

    .ws-product-card .thumbs-viewport {
        height: 100%;
        padding: 0;
    }

    .ws-product-card .stage {
        border-radius: 12px;
    }

    .ws-product-card .thumb-nav {
        display: none;
    }
}

@media (min-width: 1181px) {
    .ws-product-card .gallery {
        grid-template-columns: 92px minmax(0, 1fr);
        gap: 12px;
    }

    .ws-product-card {
        --ws-gallery-h: min(92vh, 1060px);
    }

    .ws-product-card .stage {
        background: #fbfaf7;
    }
}

@media (min-width: 1600px) {
    .ws-product-card .gallery {
        grid-template-columns: 102px minmax(0, 1fr);
        gap: 14px;
    }

    .ws-product-card {
        --ws-gallery-h: min(90vh, 1180px);
    }
}

@media (min-width: 2200px) {
    .ws-product-card .gallery {
        grid-template-columns: 116px minmax(0, 1fr);
        gap: 16px;
    }

    .ws-product-card {
        --ws-gallery-h: min(88vh, 1280px);
    }
}

@media (min-width: 981px) {
    .ws-product-card .stage .main-image {
        object-fit: cover !important;
        object-position: center center !important;
    }
}

@media (max-width: 980px) {
    .ws-product-card .gallery {
        align-items: stretch;
        contain: layout style;
    }

    .ws-product-card .stage .main-image,
    .ws-product-card .stage > img.main-image {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
        border-radius: 12px !important;
    }

    .ws-product-card .thumbs-shell,
    .ws-product-card .stage {
        height: var(--ws-gallery-h);
        min-height: var(--ws-gallery-h);
        max-height: var(--ws-gallery-h);
    }

    .ws-product-card .thumbs-viewport {
        height: 100%;
        padding: 0;
    }
}

@media (max-width: 900px) and (orientation: landscape) {
    .ws-product-card .gallery {
        grid-template-columns: 56px minmax(0, 1fr);
    }

    .ws-product-card .thumbs-viewport {
        padding: 0;
    }

    .ws-product-card .thumb-nav {
        display: none;
    }
}

@media (max-width: 699px) and (orientation: portrait) {
    :root {
        --ws-mobile-gallery-height: clamp(560px, 132vw, 700px);
    }

    .ws-product-card .gallery {
        grid-template-columns: 70px minmax(0, 1fr);
        align-items: stretch;
    }

    .ws-product-card .thumbs-shell {
        display: flex;
        flex-direction: column;
        height: var(--ws-gallery-h);
        min-height: var(--ws-gallery-h);
        max-height: var(--ws-gallery-h);
        overflow: hidden;
    }

    .ws-product-card .thumbs-viewport {
        flex: 1 1 auto;
        height: 100%;
        min-height: 0;
    }

    .ws-product-card .stage {
        border-radius: 12px;
        background: #fbfaf7;
    }
}
/* ws-shorts.css (inlined) */

.ws-shorts__subs,
.ws-add__subs {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.ws-shorts,
.ws-add {
    position: relative;
    overflow-x: hidden;
    padding-top: 0;
    padding-bottom: 32px;
    --cut: 0;
    --reelW: min(56.25rem, calc(100vw - 2rem));
    --reelGap: 1rem;
    --padL: 0.75rem;
    --peekR: 0.75rem;
    background: #1d1b1b;
    color: #fff;
}

.ws-shorts *,
.ws-add * {
    box-sizing: border-box;
}

.ws-add__container {
    max-width: 90rem;
    margin: 0 auto;
    padding: 0 var(--padL);
    overflow-x: hidden;
}

.ws-add__header {
    text-align: center;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 56.25rem;
    margin-left: auto;
    margin-right: auto;
}

.ws-add__header > * {
    min-width: 0;
}

.ws-add__title {
    margin: 2rem 0 0;
    line-height: 1.15;
    font-family: var(--font-head, "Roboto Slab", serif);
    font-weight: 700;
}

.ws-add__sub {
    margin: 0.25rem 0 1.125rem !important;
    line-height: 1.45;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
    font-family: var(--font-body, "Montserrat", sans-serif);
    font-weight: 500;
}

.ws-add__swiper {
    position: relative;
    width: 100%;
    max-width: 100%;
}

.ws-add__swiper,
.ws-add__swiper .swiper {
    overflow-x: hidden !important;
    overflow-y: visible !important;
    padding-left: var(--padL) !important;
    padding-right: var(--peekR) !important;
}

.ws-add__swiper .swiper-wrapper {
    margin: 0 !important;
}

.ws-shorts .swiper,
.ws-add .swiper {
    overflow-x: hidden;
    overflow-y: visible;
}

.ws-shorts .swiper-wrapper,
.ws-add .swiper-wrapper {
    display: flex;
    transition-property: transform;
}

.ws-shorts .swiper-slide,
.ws-add .swiper-slide {
    flex-shrink: 0;
    min-width: 0;
}

.ws-add__slide {
    width: var(--reelW);
    display: flex;
    flex-direction: column;
    gap: 0;
    contain: layout paint;
    position: relative;
}

.ws-add__slide,
.ws-add__swiper .swiper-slide {
    width: var(--reelW) !important;
    max-width: var(--reelW) !important;
    margin-right: var(--reelGap) !important;
    flex: 0 0 auto !important;
}

.ws-add__swiper .swiper-slide:last-child {
    margin-right: 0 !important;
}

.ws-add__figure {
    position: relative;
    z-index: 0;
    margin: 0 !important;
    overflow: hidden !important;
    border-radius: 24px !important;
    background: transparent;
    box-shadow: var(--shadow);
    -webkit-clip-path: none !important;
    clip-path: none !important;
}

.ws-add__figure::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 42%;
    background: linear-gradient(to top, rgba(15, 17, 21, 0.92) 0%, rgba(15, 17, 21, 0.7) 38%, rgba(15, 17, 21, 0) 100%);
    pointer-events: none;
    z-index: 2;
}

.ws-add__figure::before {
    content: "";
    display: block;
    padding-top: 56.25%;
}

.ws-add__figure picture,
.ws-add__media,
.ws-add__poster-wrap,
.ws-add__poster,
.ws-add__video,
.ws-add__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.ws-add__poster,
.ws-add__video,
.ws-add__img {
    object-fit: cover;
    object-position: center center;
    background: transparent;
}

.ws-add__poster {
    z-index: 2;
    transition: opacity 0.2s ease;
}

.ws-add__video,
.ws-add__img {
    z-index: 1;
}

.ws-add__figure.ws-add__figure--poster-hidden .ws-add__poster {
    opacity: 0;
    pointer-events: none;
}

.ws-add__figure > .ws-add__video,
.ws-add__figure > .ws-add__img,
.ws-add__figure > .ws-add__poster,
.ws-add__figure > .ws-add__poster-wrap,
.ws-add__figure > .ws-add__media {
    border-radius: inherit !important;
}

.ws-add__tag {
    position: absolute;
    left: 0.875rem;
    top: 0.875rem;
    z-index: 6;
    pointer-events: none;
    padding: 0.5625rem 0.875rem;
    border-radius: 1.125rem;
    font-size: 0.875rem;
    line-height: 1.15;
    font-weight: 700;
    background: rgba(0, 0, 0, 0.6) !important;
    color: #fff !important;
    -webkit-backdrop-filter: blur(0.375rem) saturate(120%);
    backdrop-filter: blur(0.375rem) saturate(120%);
    box-shadow:
        0 0.25rem 0.625rem rgba(0, 0, 0, 0.25),
        inset 0 0 0 0.0625rem rgba(255, 255, 255, 0.12);
}

.ws-add__subs {
    position: absolute;
    left: 0.875rem;
    top: 0.875rem;
    z-index: 6;
    pointer-events: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5625rem 0.875rem;
    border-radius: 999rem;
    font-size: 0.875rem;
    line-height: 1;
    font-weight: 700;
    color: #fff;
    background: rgba(0, 0, 0, 0.55);
    border: 0.0625rem solid rgba(255, 255, 255, 0.18);
    -webkit-backdrop-filter: blur(0.5rem) saturate(1.2);
    backdrop-filter: blur(0.5rem) saturate(1.2);
    box-shadow:
        0 0.25rem 0.625rem rgba(0, 0, 0, 0.25),
        inset 0 0 0 0.0625rem rgba(255, 255, 255, 0.1);
}

.ws-add__pp {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 72px;
    height: 72px;
    padding: 0;
    border-radius: 999px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1000;
    color: #fff !important;
    background: rgba(10, 10, 10, 0.62) !important;
    border: 0 !important;
    -webkit-backdrop-filter: blur(10px) !important;
    backdrop-filter: blur(10px) !important;
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.34) !important;
    transform: translate(-50%, -50%);
    transition:
        opacity 0.18s ease,
        transform 0.18s ease;
}

.ws-add__pp-ripple {
    position: absolute;
    inset: -10px;
    border: 1px solid rgba(255, 255, 255, 0.36);
    border-radius: inherit;
    animation: ws-shorts-play-pulse 1.8s ease-out infinite;
}

.ws-add__pp-icon {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 3px;
}

.ws-add__pp:focus-visible {
    outline: 0.125rem solid rgba(255, 255, 255, 0.35);
    outline-offset: 0.125rem;
}

.ws-add__icon {
    width: 28px;
    height: 28px;
    display: block;
    fill: currentColor;
}

.ws-add__pp[data-state="playing"] {
    opacity: 0;
    pointer-events: none;
}

@keyframes ws-shorts-play-pulse {
    0% {
        transform: scale(0.92);
        opacity: 0.9;
    }

    70% {
        transform: scale(1.2);
        opacity: 0;
    }

    100% {
        transform: scale(1.26);
        opacity: 0;
    }
}

.ws-add__mute {
    position: absolute;
    right: 0.75rem;
    top: 0.75rem;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50% !important;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1000;
    color: #fff !important;
    background: rgba(0, 0, 0, 0.55) !important;
    border: 0.0625rem solid rgba(255, 255, 255, 0.22) !important;
    -webkit-backdrop-filter: blur(0.5rem) saturate(1.2) !important;
    backdrop-filter: blur(0.5rem) saturate(1.2) !important;
    box-shadow: 0 0.5rem 1.125rem rgba(0, 0, 0, 0.18) !important;
    transition:
        transform 0.15s ease,
        box-shadow 0.2s ease,
        background 0.15s ease;
}

.ws-add__mute:hover {
    background: rgba(0, 0, 0, 0.65) !important;
    transform: translateY(-0.0625rem);
}

.ws-add__mute:active {
    transform: none;
}

.ws-add__mute:focus-visible {
    outline: 0.125rem solid rgba(255, 255, 255, 0.35);
    outline-offset: 0.125rem;
}

.ws-add__mute-i {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
}

.ws-add__mute-i svg {
    width: 1.125rem;
    height: 1.125rem;
    display: block;
    flex: 0 0 auto;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ws-add__mute[data-state="off"] .ws-add__mute-i--on {
    display: flex;
}

.ws-add__mute[data-state="on"] .ws-add__mute-i--off {
    display: flex;
}

.ws-add__dur {
    position: absolute;
    right: 0.75rem;
    bottom: 0.625rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.5rem;
    z-index: 998;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.55) !important;
    color: #fff !important;
    border: 0.0625rem solid rgba(255, 255, 255, 0.18) !important;
    -webkit-backdrop-filter: blur(0.5rem) saturate(1.2);
    backdrop-filter: blur(0.5rem) saturate(1.2);
}

.ws-shorts .ws2-card__price,
.ws-shorts .ws2-card_price,
.ws-add .ws2-card__price,
.ws-add .ws2-card_price {
    position: absolute;
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: 0.875rem !important;
    transform: translateX(-50%) !important;
    z-index: 2;
    margin: 0 !important;
    padding: 0.5rem 0.75rem;
    border-radius: 999rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-align: center;
    pointer-events: none;
    color: #fff !important;
    background: rgba(0, 0, 0, 0.65) !important;
    border: 0.0625rem solid rgba(255, 255, 255, 0.25) !important;
    -webkit-backdrop-filter: blur(0.5rem) saturate(1.2);
    backdrop-filter: blur(0.5rem) saturate(1.2);
    box-shadow: 0 0.25rem 0.875rem rgba(0, 0, 0, 0.25);
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1;
}

.ws-shorts .ws2-card__price *,
.ws-shorts .ws2-card_price *,
.ws-add .ws2-card__price *,
.ws-add .ws2-card_price * {
    color: inherit !important;
}

.ws-add__cap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    display: block !important;
    height: auto !important;
    padding: 18px 20px 20px !important;
    margin: 0 !important;
    font-size: 14px;
    line-height: 1.4;
    color: #fff;
    pointer-events: none;
}

.ws-add__cap-title {
    display: block;
    font-weight: 700;
    font-size: var(--h4-size);
    line-height: 1.25;
    margin-bottom: 4px;
    text-decoration: none;
    color: #fff;
    pointer-events: auto;
    font-family: var(--font-head, "Roboto Slab", serif);
}

.ws-add__cap-title:hover {
    text-decoration: underline;
}

.ws-add__cap-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    color: rgba(255, 255, 255, 0.88);
    font-family: var(--font-body, "Montserrat", sans-serif);
    font-weight: 500;
}

.ws-shorts .ws-smart__btn,
.ws-add .ws-smart__btn {
    width: 20rem;
    max-width: 100%;
    height: 2.875rem;
    border-radius: 0.625rem;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1rem auto 0 !important;
    position: relative;
    z-index: 2;
    font-weight: 600;
    font-size: 1.125rem;
    font-family: var(--font-body, "Montserrat", sans-serif);
    letter-spacing: 0.02em;
    transition:
        transform 0.15s,
        box-shadow 0.15s;
    -webkit-tap-highlight-color: transparent;
}

.ws-shorts .ws-smart__btn:hover,
.ws-add .ws-smart__btn:hover {
    transform: translateY(-0.0625rem);
}

.ws-shorts .ws-smart__btn:active,
.ws-add .ws-smart__btn:active {
    transform: none;
}

.ws-shorts .ws-smart__btn:focus-visible,
.ws-add .ws-smart__btn:focus-visible {
    outline: 0.125rem solid;
    outline-offset: 0.125rem;
}

.ws-add__pag {
    position: static !important;
    margin: 0.5rem auto 0 !important;
    padding: 12px 0 14px !important;
    height: auto !important;
    min-height: 0.75rem;
    line-height: 0 !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 7px !important;
    z-index: 3;
    color: #fff !important;
}

.ws-add__pag .swiper-pagination-bullet {
    width: 2.875rem;
    height: 0.25rem;
    border-radius: 999rem;
    margin: 0 !important;
    vertical-align: top;
    opacity: 1 !important;
    background: rgba(255, 255, 255, 0.34) !important;
    transition:
        width 0.2s ease,
        background-color 0.2s ease;
}

.ws-add__pag .swiper-pagination-bullet-active {
    background: var(--ws-btn-primary-bg, #f3c847) !important;
}

.ws-add__header,
.ws-add__header *,
.ws-add__title,
.ws-add__title *,
.ws-add__sub,
.ws-add__sub * {
    color: #fff !important;
}

.ws-add__nav {
    position: absolute !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    display: grid !important;
    place-items: center !important;
    z-index: 999;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    transition:
        transform 0.15s ease,
        background 0.15s ease,
        border-color 0.15s ease;
    color: var(--ws-btn-primary-bg, #f3c847) !important;
    /* wie Karte/Figure — kein Glass-Overlay */
    background: #1d1b1b !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

.ws-add__nav:hover {
    background: #252322 !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    transform: translateY(-50%) scale(1.04) !important;
}

.ws-add__prev {
    left: 0.375rem !important;
}

.ws-add__next {
    right: 0.375rem !important;
}

.ws-add__nav svg {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
    transform: none !important;
    fill: currentColor;
    opacity: 0.95;
}

.ws-add__nav svg path {
    stroke: currentColor !important;
}

.ws-add__nav.swiper-button-disabled {
    opacity: 0.38 !important;
    pointer-events: none !important;
    transform: translateY(-50%) !important;
}

.ws-add__slide,
.ws-add__figure,
.ws-add__video,
.ws-add__poster,
.ws-add__img {
    cursor: pointer;
}

.ws-shorts--posters .ws-add__pp,
.ws-add--posters .ws-add__pp {
    pointer-events: none;
    cursor: default;
}

.ws-shorts--posters .ws-add__icon--pause,
.ws-add--posters .ws-add__icon--pause {
    display: none !important;
}

.ws-shorts--posters .ws-add__icon--play,
.ws-add--posters .ws-add__icon--play {
    display: block !important;
}

.ws-shorts a.ws-smart__btn.ws-smart__btn--glow,
.ws-add a.ws-smart__btn.ws-smart__btn--glow,
.ws-add .ws-series__btn--glow {
    background: #00a0e3 !important;
    background-color: #00a0e3 !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: 0 14px 30px rgba(0, 160, 227, 0.28) !important;
    position: relative;
    isolation: isolate;
    overflow: visible;
    animation: wsGlowPulse 2.2s ease-in-out infinite;
}

.ws-shorts a.ws-smart__btn.ws-smart__btn--glow,
.ws-shorts a.ws-smart__btn.ws-smart__btn--glow *,
.ws-add a.ws-smart__btn.ws-smart__btn--glow,
.ws-add a.ws-smart__btn.ws-smart__btn--glow *,
.ws-add .ws-series__btn--glow,
.ws-add .ws-series__btn--glow * {
    color: #fff !important;
    fill: currentColor !important;
}

.ws-shorts a.ws-smart__btn.ws-smart__btn--glow::after,
.ws-add a.ws-smart__btn.ws-smart__btn--glow::after,
.ws-add .ws-series__btn--glow::after {
    content: "";
    position: absolute;
    inset: -22px;
    border-radius: 999px;
    background: rgba(0, 160, 227, 0.3);
    filter: blur(20px);
    opacity: 0.7;
    z-index: -1;
    pointer-events: none;
    animation: wsGlowAura 2.2s ease-in-out infinite;
}

@keyframes wsGlowPulse {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.02);
    }
}

@keyframes wsGlowAura {
    0%,
    100% {
        opacity: 0.5;
        transform: scale(1);
    }

    50% {
        opacity: 0.85;
        transform: scale(1.08);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ws-shorts a.ws-smart__btn.ws-smart__btn--glow,
    .ws-shorts a.ws-smart__btn.ws-smart__btn--glow::after,
    .ws-add a.ws-smart__btn.ws-smart__btn--glow,
    .ws-add a.ws-smart__btn.ws-smart__btn--glow::after,
    .ws-add .ws-series__btn--glow,
    .ws-add .ws-series__btn--glow::after {
        animation: none !important;
    }
}

@media (max-width: 820px) {
    .ws-add__header {
        padding: 0 16px;
    }

    .ws-add__sub {
        text-wrap: balance;
    }
}

@media (min-width: 48.0625rem) and (max-width: 79.9375rem) {
    .ws-shorts,
    .ws-add {
        --reelW: calc(100vw - 2rem);
        --reelGap: 0.875rem;
        --padL: 0.75rem;
        --peekR: 0.5rem;
    }
}

@media (max-width: 64rem) and (max-height: 38rem) and (orientation: landscape) {
    .ws-shorts,
    .ws-add {
        --reelW: calc(88vw - 6px);
        --reelGap: 4px;
        --padL: 3px;
        --peekR: 0px;
    }
}

@media (max-width: 768px) {
    .ws-shorts,
    .ws-add {
        --reelW: calc(100vw - 8px);
        --reelGap: 6px;
        --padL: 4px;
        --peekR: 0px;
    }

    .ws-add__figure {
        width: 100% !important;
        height: 560px !important;
        min-height: 0 !important;
        aspect-ratio: auto !important;
        border-radius: 24px !important;
        overflow: hidden !important;
    }

    /* Schwächerer Verlauf: kein dunkler „Streifen“ bis in die Fußzeile */
    .ws-add__figure::after {
        height: 28% !important;
        background: linear-gradient(to top, rgba(15, 17, 21, 0.55) 0%, rgba(15, 17, 21, 0) 100%) !important;
    }

    .ws-add__figure::before {
        content: none !important;
        display: none !important;
        padding-top: 0 !important;
    }

    .ws-add__figure picture,
    .ws-add__media,
    .ws-add__poster-wrap,
    .ws-add__poster,
    .ws-add__video,
    .ws-add__img {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }

    .ws-add__poster,
    .ws-add__video,
    .ws-add__img {
        object-fit: cover !important;
        object-position: center top !important;
    }

    .ws-add__cap-title {
        font-size: 20px;
    }

    .ws-add__cap {
        padding: 16px 16px 18px !important;
    }

    .ws-add__subs {
        left: 10px;
        top: 10px;
        padding: 5px 9px;
        font-size: 13px;
    }

    .ws-add__mute {
        right: 10px;
        top: 10px;
        width: 40px;
        height: 40px;
    }

    .ws-add__pp {
        width: 64px;
        height: 64px;
    }

    .ws-add__icon {
        width: 24px;
        height: 24px;
    }

    .ws-add__mute-i svg {
        width: 18px;
        height: 18px;
    }

    .ws-add__prev {
        left: 6px !important;
    }

    .ws-add__next {
        right: 6px !important;
    }

    .ws-add__pag {
        margin: 10px auto 0 !important;
        padding: 12px 0 14px !important;
    }
}

@media (max-width: 480px) {
    .ws-shorts,
    .ws-add {
        --reelW: calc(88vw - 6px);
        --reelGap: 4px;
        --padL: 3px;
        --peekR: 0px;
    }

    .ws-add__figure {
        height: 580px !important;
        aspect-ratio: auto !important;
    }

    .ws-add__poster,
    .ws-add__video,
    .ws-add__img {
        object-position: center top !important;
    }

    .ws-add__cap {
        padding: 14px 14px 16px !important;
    }

    .ws-add__cap-title {
        font-size: 18px;
    }

    .ws-add__prev {
        left: 4px !important;
    }

    .ws-add__next {
        right: 4px !important;
    }
}

.ws-add__title {
    margin: 0;
    line-height: 1.08;
    display: block;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
    text-wrap: balance;
    font-family: var(--font-head, "Roboto Slab", serif);
    font-weight: 800;
}

.ws-add__title::before,
.ws-add__title::after {
    content: none;
}

.ws-add__sub {
    margin: 0.55rem auto 0 !important;
    line-height: 1.45;
    max-width: 860px;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
    font-family: var(--font-body, "Montserrat", sans-serif);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.78) !important;
}

.ws-add__header {
    position: relative;
    margin: 0 auto 22px;
    max-width: 980px;
}

.ws-add__eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 0 0 8px;
    font-family: var(--font-body, "Montserrat", sans-serif);
    font-size: 13px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #ffd152 !important;
}

.ws-add__eyebrow,
.ws-add__eyebrow span {
    color: #ffd152 !important;
}

.ws-add__eyebrow-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: #ffd152 !important;
}

.ws-add__eyebrow-icon svg {
    width: 17px;
    height: 17px;
    display: block;
    color: #ffd152 !important;
}

.ws-add__eyebrow-icon svg path {
    stroke: #ffd152 !important;
}

.ws-add__header::after {
    content: "";
    display: block;
    width: 190px;
    height: 22px;
    margin: 8px auto 0;
    background:
        linear-gradient(#ffd152, #ffd152) left 50% / 78px 1px no-repeat,
        linear-gradient(#ffd152, #ffd152) right 50% / 78px 1px no-repeat;
    opacity: 0.85;
}

.ws-add__header::before {
    content: "×";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateX(-50%);
    font-family: var(--font-body, "Montserrat", sans-serif);
    font-size: 22px;
    line-height: 1;
    font-weight: 500;
    color: #ffd152;
}

.ws-add__sub .ws-add__hl,
.ws-add__sub .ws-add__hl *,
.ws-add__sub mark,
.ws-add__sub mark * {
    display: inline;
    padding: 0.08em 0.34em;
    border-radius: 0.38em;
    background: #ffd152;
    color: #111 !important;
    -webkit-text-fill-color: #111 !important;
    box-shadow: none;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

#classic-seria.ws-shorts .ws-add__sub .ws-add__hl,
#classic-seria.ws-shorts .ws-add__sub .ws-add__hl *,
#classic-seria.ws-shorts .ws-add__sub mark,
#classic-seria.ws-shorts .ws-add__sub mark *,
#classic-seria.ws-add .ws-add__sub .ws-add__hl,
#classic-seria.ws-add .ws-add__sub .ws-add__hl *,
#classic-seria.ws-add .ws-add__sub mark,
#classic-seria.ws-add .ws-add__sub mark * {
    color: #111 !important;
    -webkit-text-fill-color: #111 !important;
}

@media (max-width: 768px) {
    .ws-add__title {
        font-size: clamp(32px, 10vw, 46px);
        line-height: 1.08;
        text-wrap: balance;
    }

    .ws-add__title::before,
    .ws-add__title::after {
        font-size: 1em;
    }
}

/* Final strong header unification for shorts block */
.ws-shorts.ws-add {
    padding-top: 32px !important;
}

.ws-shorts .ws-add__title::before,
.ws-shorts .ws-add__title::after {
    content: none !important;
    display: none !important;
}

.ws-shorts .ws-add__title .ws-add__hl,
.ws-shorts .ws-add__title mark,
.ws-shorts .ws-add__title span.ws-add__hl {
    display: inline !important;
    white-space: normal !important;
    color: #ffd152 !important;
    -webkit-text-fill-color: #ffd152 !important;
    background: transparent !important;
    padding: 0 !important;
}

/* Override legacy #classic-seria rules from banner.css */
#classic-seria.ws-shorts.ws-add {
    padding-top: 32px !important;
}

#classic-seria .ws-add__eyebrow {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #ffd152 !important;
}

#classic-seria .ws-add__title::before,
#classic-seria .ws-add__title::after {
    content: none !important;
    display: none !important;
}

#classic-seria .ws-add__title .ws-add__hl {
    display: inline !important;
    white-space: normal !important;
    color: white !important;
    -webkit-text-fill-color: white !important;
    background: transparent !important;
    padding: 0 !important;
}

#classic-seria .ws-add__sub {
    color: rgba(255, 255, 255, 0.78) !important;
}

@media (max-width: 760px) {
    #classic-seria .ws-add__title {
        font-size: 34px !important;
        line-height: 1.08 !important;
    }

    #classic-seria .ws-add__title .ws-add__hl {
        font-size: inherit !important;
        line-height: inherit !important;
    }
}
@media (max-width: 900px) {

    .energy .feat > .feat-media {
        order: 2;
    }

    .energy .feat > .en-grid.mobile {
        order: 3;
        width: 100%;
    }

}


/* =========================================================
   Блок цифр (invest-stats) на телефонах: сетка 2×2.
   Раньше правила спорили (600px давал одну колонку,
   640px и 760px — две), а у ячеек не было min-width:0,
   поэтому длинные подписи распирали колонки и ломали ряд.
   ========================================================= */
@media (max-width: 560px) {

    .invest-stats,
    .invest-stats--4 {
        grid-template-columns: 1fr 1fr;
        gap: 16px 12px;
        margin-top: 18px;
        align-items: start;
    }

    /* без min-width:0 ячейка не может стать уже своего текста */
    .invest-stats > div {
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 3px;
    }

    .invest-stats b {
        font-size: 18px;
        line-height: 1.15;
        width: fit-content;
        max-width: 100%;
        overflow-wrap: break-word;
    }

    .invest-stats span {
        font-size: 12px;
        line-height: 1.3;
        overflow-wrap: break-word;
        hyphens: auto;
    }
}