/* ============================================================
   Minado — Design System v2
   ============================================================ */

:root {
    /* Dark green (темний для hero / footer) */
    --dark-900: #041a0d;
    --dark-800: #071f10;
    --dark-700: #0b2915;
    --dark-600: #103320;

    /* Green scale */
    --g900: #052e16;
    --g800: #14532d;
    --g700: #15803d;
    --g600: #16a34a;
    --g500: #22c55e;
    --g400: #4ade80;
    --g200: #a7f3c0;
    --g100: #dcfce7;
    --g50: #f0fdf4;

    /* Semantic palette */
    --color-bg: #ffffff;
    --color-bg-alt: #e2f0e8;
    --color-bg-muted: #c8e2d2;
    --color-surface: #ffffff;
    --color-text: #0c1a12;
    --color-text-2: #1e3a28;
    --color-text-3: #4a6b58;
    --color-primary: var(--g700);
    --color-primary-d: var(--g800);
    --color-primary-l: #b0dfbf;
    --color-warning: #c2620a;
    --color-border: #b8d4c4;
    --color-border-2: #8eb8a0;

    /* Shadows */
    --sh-xs: 0 1px 3px rgba(0, 0, 0, 0.05);
    --sh-sm: 0 2px 10px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
    --sh-md: 0 6px 24px rgba(0, 0, 0, 0.07), 0 2px 8px rgba(0, 0, 0, 0.04);
    --sh-lg: 0 16px 52px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.05);
    --sh-xl: 0 28px 80px rgba(0, 0, 0, 0.09), 0 8px 28px rgba(0, 0, 0, 0.05);
    --sh-green: 0 8px 32px rgba(21, 128, 61, 0.3), 0 2px 8px rgba(21, 128, 61, 0.18);

    /* Shape */
    --r-sm: 10px;
    --r-md: 18px;
    --r-lg: 26px;
    --r-xl: 40px;

    /* Layout */
    --container: 1320px;
    --section-py: clamp(5rem, 8vw, 8rem);

    /* Type */
    --font-body: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
    --font-display: 'Sora', 'Space Grotesk', sans-serif;
}

/* ─── Reset ───────────────────────────────────────────────── */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.65;
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
}

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

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

button,
input,
textarea {
    font: inherit;
}

button {
    cursor: pointer;
    border: 0;
}

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

:focus:not(:focus-visible) { outline: none; }

/* WooCommerce moves focus onto a notice so screen readers announce it. That is
   not keyboard navigation, so the ring would only read as a stray box. */
[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible { outline: none; }

p {
    margin: 0;
}

h1,
h2,
h3,
h4 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.1;
    color: var(--color-text);
    letter-spacing: -0.03em;
}

::selection {
    background: var(--g400);
    color: var(--g900);
}

/* ─── Utilities ───────────────────────────────────────────── */

.container {
    width: min(var(--container), calc(100% - 2.5rem));
    margin-inline: auto;
}

.stack {
    display: grid;
    gap: 1rem;
}

/* ─── Header ──────────────────────────────────────────────── */

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #0d2117;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid rgba(34, 197, 94, 0.11);
    box-shadow:
        0 1px 0 rgba(0, 0, 0, 0.16),
        0 8px 28px rgba(0, 0, 0, 0.18);
}

/* тонка зелена лінія зверху */
.site-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--g800), var(--g600), var(--g400), var(--g600));
    opacity: 0.9;
}

.site-header__inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 2rem;
    height: 76px;
}

/* ─── Logo ────────────────────────────────────────────────── */

.site-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.site-brand__logo {
    display: block;
    height: 48px;
    width: auto;
    object-fit: contain;
}

.site-brand__mark {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--g700), var(--g500));
    color: #fff;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1rem;
    box-shadow: 0 4px 14px rgba(22, 163, 74, 0.35);
    flex-shrink: 0;
}

.site-brand__text {
    display: grid;
    gap: 0.1rem;
}

.site-brand__text strong {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.01em;
}

.site-brand__text small {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.58);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* ─── Nav ─────────────────────────────────────────────────── */

.site-navigation {
    justify-self: center;
}

.site-menu,
.footer-menu,
.contact-links {
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem;
    align-items: center;
}

.site-menu a {
    display: inline-block;
    padding: 0.42rem 0.9rem;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.78);
    transition:
        background 0.18s ease,
        color 0.18s ease;
    letter-spacing: 0.01em;
}

.site-menu a:hover,
.site-menu .current-menu-item > a,
.site-menu .current_page_item > a {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-weight: 600;
}

.footer-menu a,
.contact-links a {
    transition: color 0.18s ease;
}
.footer-menu a:hover,
.contact-links a:hover {
    color: var(--g400);
}

/* ─── Header actions ──────────────────────────────────────── */

.site-header__actions {
    display: inline-flex;
    gap: 0.65rem;
    align-items: center;
}

.site-header__phone {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.75);
    padding: 0.5rem 1rem;
    border-radius: 999px;
    border: 1.5px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.05);
    transition:
        border-color 0.18s ease,
        color 0.18s ease,
        background 0.18s ease;
    white-space: nowrap;
}

.site-header__phone::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--g500);
    flex-shrink: 0;
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.3);
}

.site-header__phone:hover {
    border-color: var(--g500);
    color: var(--g400);
    background: rgba(34, 197, 94, 0.08);
}

/* ─── Mobile toggle ───────────────────────────────────────── */

.site-header__toggle {
    display: none;
    width: 42px;
    height: 42px;
    padding: 0;
    background: rgba(255, 255, 255, 0.06);
    border: 1.5px solid rgba(255, 255, 255, 0.16);
    border-radius: 11px;
    justify-self: end;
    transition:
        border-color 0.18s ease,
        background 0.18s ease;
}
.site-header__toggle:hover {
    border-color: var(--g500);
    background: rgba(34, 197, 94, 0.1);
}

.site-header__toggle span {
    display: block;
    width: 20px;
    height: 2px;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 999px;
    flex-shrink: 0;
    transition:
        transform 0.24s ease,
        opacity 0.2s ease,
        background 0.18s ease;
}

/* ─── Header: desktop fit ─────────────────────────────────── */

/* Everything stays in the bar; sizes scale down so the menu never wraps
   onto a second row between the logo and the actions. */
@media (min-width: 861px) {
    .site-header__inner {
        height: 68px;
        gap: clamp(0.5rem, 1.6vw, 1.75rem);
    }

    .site-brand__logo { height: 40px; }

    .site-navigation { min-width: 0; }

    .site-menu {
        flex-wrap: nowrap;
        justify-content: center;
    }

    .site-menu a {
        padding: 0.4rem clamp(0.34rem, 0.85vw, 0.9rem);
        font-size: clamp(0.76rem, 0.92vw, 0.9rem);
        white-space: nowrap;
    }

    .site-header__actions { gap: clamp(0.28rem, 0.6vw, 0.65rem); }

    .site-header__phone {
        padding: 0.44rem clamp(0.5rem, 0.9vw, 1rem);
        font-size: clamp(0.74rem, 0.88vw, 0.88rem);
    }

    .site-header__actions .button {
        padding: 0.55rem clamp(0.6rem, 1.1vw, 1.25rem);
        font-size: clamp(0.74rem, 0.88vw, 0.875rem);
    }

    .site-header__cart {
        min-width: 40px;
        min-height: 38px;
        padding: 0.38rem 0.6rem;
    }
}

/* ─── Buttons ─────────────────────────────────────────────── */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.85rem 1.65rem;
    border: 0;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: -0.01em;
    background: var(--color-primary);
    color: #fff;
    box-shadow: var(--sh-green);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
    white-space: nowrap;
}
.button:hover {
    background: var(--color-primary-d);
    transform: translateY(-2px);
    box-shadow:
        0 14px 40px rgba(21, 128, 61, 0.36),
        0 4px 12px rgba(21, 128, 61, 0.22);
}
.button:active {
    transform: translateY(0);
}

.button--ghost {
    background: #fff;
    color: var(--color-text);
    border: 1.5px solid var(--color-border-2);
    box-shadow: var(--sh-xs);
}
.button--ghost:hover {
    background: var(--g50);
    border-color: var(--color-primary);
    color: var(--color-primary);
    box-shadow: var(--sh-sm);
}

.button--sm {
    padding: 0.65rem 1.25rem;
    font-size: 0.875rem;
}

.button-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* ─── Home catalogue preview ─────────────────────────────── */
.section--catalog-preview {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 92% 16%, rgba(45, 212, 191, 0.12), transparent 20rem),
        linear-gradient(180deg, #f6fcf8 0%, #fff 100%);
}

.section--catalog-preview::before {
    content: '';
    position: absolute;
    width: 26rem;
    height: 26rem;
    left: -18rem;
    bottom: -20rem;
    border: 1px solid rgba(20, 184, 166, 0.16);
    border-radius: 50%;
    pointer-events: none;
}

.catalog-preview__heading {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 2rem;
}

.catalog-preview__heading > div { max-width: 45rem; }
.catalog-preview__heading h2 { margin: 0; }
.catalog-preview__heading p:not(.section-eyebrow) {
    margin: 0.9rem 0 0;
    color: var(--color-text-2);
}

.catalog-preview__heading .button--ghost {
    flex: 0 0 auto;
    border-color: rgba(43, 112, 67, 0.22);
    background: rgba(255, 255, 255, 0.75);
}

.catalog-preview__results { position: relative; z-index: 1; }

.catalog-preview__actions {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.catalog-preview__controls { display: flex; gap: 0.45rem; }

.catalog-preview__nav {
    display: grid;
    place-items: center;
    width: 2.65rem;
    height: 2.65rem;
    padding: 0;
    border: 1px solid rgba(43, 112, 67, 0.22);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.78);
    color: var(--g700);
    cursor: pointer;
    transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.catalog-preview__nav:hover {
    transform: translateY(-2px);
    background: var(--g700);
    color: #fff;
}

.catalog-preview__nav svg { width: 1.1rem; height: 1.1rem; }

section.section--catalog-preview .shop-results ul.catalog-preview__track {
    display: flex;
    gap: 1.4rem;
    overflow-x: auto;
    padding: 0.25rem 0 1.25rem;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: rgba(20, 184, 166, 0.52) transparent;
}

section.section--catalog-preview .shop-results ul.catalog-preview__track li.product {
    flex: 0 0 calc((100% - 2.8rem) / 3);
    scroll-snap-align: start;
}

@media (max-width: 700px) {
    .catalog-preview__heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 1.15rem;
        margin-bottom: 1.35rem;
    }

    .catalog-preview__heading .button { width: 100%; }
    .catalog-preview__actions { width: 100%; justify-content: space-between; }
    section.section--catalog-preview .shop-results ul.catalog-preview__track li.product { flex-basis: calc((100% - 1.4rem) / 2); }
}

@media (max-width: 420px) {
    section.section--catalog-preview .shop-results ul.catalog-preview__track li.product { flex-basis: 100%; }
}

/* ─── Eyebrow / Badge ─────────────────────────────────────── */

.section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-primary);
}

.hero-section .section-eyebrow {
    color: rgba(255, 255, 255, 0.65);
}

.badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: var(--color-primary-l);
    color: var(--color-primary-d);
    border: 1px solid rgba(21, 128, 61, 0.4);
}

/* ─── Section basics ──────────────────────────────────────── */

.section,
.hero-section,
.page-hero {
    position: relative;
    padding: var(--section-py) 0;
}

.section--muted {
    background: var(--color-bg-alt);
}

.section--accent {
    position: relative;
    background: linear-gradient(140deg, var(--dark-900) 0%, var(--dark-800) 50%, #0a2416 100%);
    overflow: hidden;
    isolation: isolate;
}

.section--accent::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 50% at 15% 50%, rgba(22, 163, 74, 0.12) 0%, transparent 70%),
        radial-gradient(ellipse 40% 60% at 90% 20%, rgba(22, 163, 74, 0.07) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}

.section--accent::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(34, 197, 94, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(34, 197, 94, 0.04) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%);
    pointer-events: none;
    z-index: 0;
}

.section--accent .container {
    position: relative;
    z-index: 1;
}

/* ─── CTA form grid ─────────────────────────────────────────── */

.cta-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

/* захист тексту від SVG-декорації */
.cta-form-grid > .stack {
    position: relative;
}
.cta-form-grid > .stack::before {
    content: '';
    position: absolute;
    inset: -3rem -2rem;
    background: radial-gradient(ellipse 90% 80% at 30% 55%, rgba(4, 26, 13, 0.55) 0%, transparent 72%);
    pointer-events: none;
    z-index: -1;
}

.section--accent .stack h2 {
    color: #fff;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    line-height: 1.2;
    max-width: 20ch;
}

.section--accent .stack p {
    color: rgba(255, 255, 255, 0.65);
    max-width: 46ch;
    line-height: 1.7;
}

.section--accent .section-eyebrow {
    color: var(--g400);
}

.section--accent .stack {
    display: grid;
    gap: 1.25rem;
}

.section-gradient {
    background: linear-gradient(160deg, var(--dark-900) 0%, var(--dark-800) 55%, #071c0e 100%);
}

/* ─── Section heading ─────────────────────────────────────── */

.section-heading,
.section-heading--split {
    display: grid;
    gap: 0.75rem;
    margin-bottom: 3rem;
}

.section-heading > p:last-child,
.section-heading--split p:last-child {
    max-width: 56ch;
    color: var(--color-text-2);
    font-size: 1.05rem;
}

.section-heading--split {
    grid-template-columns: 1fr auto;
    align-items: end;
}

/* ─── CTA bg visual ─────────────────────────────────────────── */

.cta-bg-visual {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: clamp(400px, 80vw, 680px);
    opacity: 0.6;
    pointer-events: none;
    z-index: 0;
}

.cta-bg-visual svg {
    width: 100%;
    height: auto;
}

.cta-ring.cta-r1 {
    animation: ctaSpin1 70s linear infinite;
    transform-origin: 300px 250px;
}

.cta-ring.cta-r2 {
    animation: ctaSpin1 45s linear infinite reverse;
    transform-origin: 300px 250px;
}

.cta-dot.cta-d1 {
    animation: ctaDotPop 3.5s ease-in-out infinite;
}

.cta-dot.cta-d2 {
    animation: ctaDotPop 3.5s ease-in-out infinite 1.75s;
}

@keyframes ctaSpin1 {
    to {
        transform: rotate(360deg);
    }
}

@keyframes ctaDotPop {
    0%,
    100% {
        opacity: 0.4;
        r: 5;
    }
    50% {
        opacity: 0.9;
        r: 7;
    }
}

/* ─── Typography scale ────────────────────────────────────── */

h1 {
    font-size: clamp(2rem, 3.2vw, 3.2rem);
    letter-spacing: -0.04em;
    line-height: 1.08;
}

h2 {
    font-size: clamp(1.9rem, 3vw, 3rem);
    max-width: 20ch;
    letter-spacing: -0.04em;
}

h3 {
    font-size: 1.2rem;
    letter-spacing: -0.025em;
}

.site-body p {
    color: var(--color-text-2);
}

/* ─── Hero ────────────────────────────────────────────────── */

.hero-section {
    position: relative;
    padding-top: clamp(4rem, 4vw, 6rem);
    padding-bottom: clamp(4rem, 7vw, 7rem);
    overflow: hidden;
    background: linear-gradient(160deg, var(--dark-900) 0%, var(--dark-800) 55%, #071c0e 100%);
    color: #fff;
}

.hero-section h1,
.hero-section h2,
.hero-section h3 {
    color: #fff;
}

.hero-section .hero-section__lead {
    color: rgba(255, 255, 255, 0.72);
}

/* ─── Hero background photo ───────────────────────────────── */

.hero-section__photo {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-section__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: bottom right;
    display: block;
    opacity: 1;
}

.hero-section__photo-fade {
    display: none;
}

.hero-section::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        to right,
        #041a0d 0%,
        #041a0d 20%,
        rgba(4, 26, 13, 0.92) 35%,
        rgba(4, 26, 13, 0.55) 52%,
        rgba(4, 26, 13, 0.1) 70%,
        transparent 85%
    );
}

.hero-section__inner {
    position: relative;
    z-index: 2;
}

.hero-section__inner .stack {
    max-width: 660px;
}

.hero-section__lead {
    max-width: 60ch;
    color: var(--color-text-2);
    font-size: 1.1rem;
    line-height: 1.7;
}

/* ─── Hero panel ──────────────────────────────────────────── */

.hero-panel {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--r-xl);
    box-shadow: 0 24px 72px rgba(0, 0, 0, 0.35);
    padding: 2.25rem;
    display: grid;
    gap: 1.5rem;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(16px);
}

.hero-panel::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -60px;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, rgba(22, 163, 74, 0.12), transparent 70%);
    pointer-events: none;
}

.hero-panel__note {
    display: grid;
    gap: 0.85rem;
    position: relative;
    z-index: 1;
}

.hero-panel__note p {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.95rem;
}

/* ─── Stats panel ─────────────────────────────────────────── */

.stats-panel {
    display: flex;
    gap: 0;
    margin-top: 0.5rem;
    padding: 1.25rem 1.5rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--r-md);
    backdrop-filter: blur(8px);
}

.stats-panel div {
    display: grid;
    gap: 0.6rem;
    flex: 1;
    padding: 0 1.5rem;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
}

.stats-panel div:first-child {
    padding-left: 0;
}

.stats-panel div:last-child {
    border-right: none;
}

.stats-panel strong {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    font-weight: 800;
    color: var(--g500);
    letter-spacing: -0.04em;
    line-height: 1;
}

.stats-panel span {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.635);
    font-weight: 500;
    letter-spacing: 0.02em;
}

/* ─── Card base ───────────────────────────────────────────── */

.surface-card,
.service-card,
.problem-card,
.review-card,
.timeline-card,
.entry-card {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        border-color 0.22s ease;
}

.surface-card:hover,
.service-card:hover,
.problem-card:hover,
.review-card:hover,
.timeline-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--sh-lg);
    border-color: rgba(21, 128, 61, 0.35);
}

.surface-card {
    padding: 1.75rem;
}

/* ─── Problems section ────────────────────────────────────── */

.section--problems {
    background-color: var(--color-bg-alt);
    background-image:
        linear-gradient(rgba(21, 128, 61, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(21, 128, 61, 0.1) 1px, transparent 1px);
    background-size: 78px 78px;
}

.section--problems::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 55% 60% at 100% 0%, rgba(74, 222, 128, 0.28) 0%, transparent 65%),
        radial-gradient(ellipse 45% 55% at 0% 100%, rgba(22, 163, 74, 0.22) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
}

.section--problems::after {
    display: none;
}

.problems-bg-img {
    position: absolute;
    inset: 0;
    background-image: url('../img/problems.jpg');
    background-size: cover;
    background-position: top right;
    opacity: 0.35;
    -webkit-mask-image: linear-gradient(to top, black 0%, black 20%, transparent 70%);
    mask-image: linear-gradient(to top, black 0%, black 20%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.section--problems .container {
    position: relative;
    z-index: 1;
}

/* ─── Problem grid ────────────────────────────────────────── */

.problem-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

/* CARD */
.problem-card {
    position: relative;
    background: linear-gradient(145deg, #0c2a1d, #0a1f17);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
    padding: 0;
    display: grid;
    overflow: hidden;
    border-radius: var(--r-lg);
    transition: all 0.3s ease;
}

/* внутрішня рамка */
.problem-card::before {
    content: '';
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    border: 1px solid rgba(255, 255, 255, 0.04);
    pointer-events: none;
}

/* glow ефект */
.problem-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 0%, rgba(74, 222, 128, 0.15), transparent 60%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.problem-card:hover {
    border-color: rgba(74, 222, 128, 0.2);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.28);
    transform: translateY(-6px) scale(1.01);
}

.problem-card:hover::after {
    opacity: 1;
}

/* PROBLEM TAG */
.problem-card__problem {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 1.25rem 1.75rem 0;
    padding: 0.4rem 0.8rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fb923c;
    background: rgba(251, 146, 60, 0.1);
    border: 1px solid rgba(251, 146, 60, 0.2);
    width: fit-content;
}

.problem-card__problem::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fb923c;
    box-shadow: 0 0 0 3px rgba(251, 146, 60, 0.18);
}

/* BODY */
.problem-card__body {
    padding: 1.25rem 1.75rem 1.75rem;
    display: grid;
    gap: 0.6rem;
}

/* ARROW */
.problem-card__arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--g400);
    margin-bottom: 0.25rem;
    transition: transform 0.25s ease;
}

.problem-card__arrow::before {
    content: '→';
    font-size: 1rem;
}

.problem-card:hover .problem-card__arrow {
    transform: translateX(4px);
}

/* TEXT */
.problem-card h3 {
    color: #fff;
    font-size: 1.15rem;
}

.problem-card p {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.65;
}

/* ─── Card grids ──────────────────────────────────────────── */

.card-grid {
    display: grid;
    gap: 1.25rem;
}

.card-grid--services {
    grid-template-columns: repeat(4, 1fr);
}

.card-grid--benefits,
.card-grid--projects,
.card-grid--reviews,
.timeline-grid {
    grid-template-columns: repeat(3, 1fr);
}

/* ─── Service card ────────────────────────────────────────── */

.service-card {
    padding: 1.75rem;
    display: grid;
    gap: 1rem;
    position: relative;
    overflow: hidden;
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(180deg, var(--g600), var(--g800));
    border-radius: 0 0 3px 3px;
    transform: scaleY(0);
    transform-origin: top center;
    transition: transform 0.3s ease;
}

.service-card:hover::before {
    transform: scaleY(1);
}

.service-card__marker {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--color-primary-l);
    border: 1px solid rgba(22, 163, 74, 0.2);
    display: grid;
    place-items: center;
}

.service-card__marker::after {
    content: '';
    width: 14px;
    height: 14px;
    border-radius: 4px;
    background: var(--color-primary);
    clip-path: polygon(0 50%, 40% 50%, 40% 0, 100% 50%, 40% 100%, 40% 50%);
}

/* icon + number row */
.service-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.service-card__icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--color-primary-l);
    border: 1px solid rgba(22, 163, 74, 0.2);
    display: grid;
    place-items: center;
    color: var(--color-primary);
    flex-shrink: 0;
}

.service-card__icon svg {
    width: 22px;
    height: 22px;
}

.service-card__num {
    font-size: 2.8rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--color-primary);
    opacity: 0.12;
    font-variant-numeric: tabular-nums;
    user-select: none;
}

.service-card p {
    font-size: 0.92rem;
    color: var(--color-text-2);
}

.service-card a {
    color: var(--color-primary);
    font-weight: 600;
    font-size: 0.88rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    transition: gap 0.18s ease;
}
.service-card a::after {
    content: '→';
}
.service-card a:hover {
    gap: 0.55rem;
}

/* ─── Project card ────────────────────────────────────────── */

.project-card {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
    overflow: hidden;
    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        border-color 0.22s ease;
}

.project-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--sh-lg);
    border-color: rgba(22, 163, 74, 0.25);
}

.project-card__thumb {
    display: block;
    min-height: 220px;
    background: linear-gradient(135deg, var(--g50), var(--color-bg-muted));
    overflow: hidden;
    position: relative;
}

.project-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.project-card:hover .project-card__thumb img {
    transform: scale(1.05);
}

.project-card__thumb span {
    display: grid;
    place-items: center;
    min-height: 220px;
    color: var(--color-text-3);
    font-family: var(--font-display);
    font-size: 1.1rem;
}

.project-card__body {
    display: grid;
    gap: 0.75rem;
    padding: 1.5rem;
}

.project-card__body p {
    font-size: 0.92rem;
    color: var(--color-text-2);
}

.project-card__details {
    display: grid;
    gap: 0.75rem;
    margin-top: 0.35rem;
    padding-top: 0.9rem;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.project-card__details div {
    display: grid;
    gap: 0.25rem;
}

.project-card__details strong {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-primary-d);
}

.project-card__details span {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--color-text-2);
}

.project-card__body a {
    color: var(--color-primary);
    font-weight: 600;
    font-size: 0.88rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    transition: gap 0.18s ease;
}
.project-card__body a::after {
    content: '→';
}
.project-card__body a:hover {
    gap: 0.55rem;
}

/* ─── Projects section (dark) ─────────────────────────────── */

.section--projects {
    background: linear-gradient(160deg, var(--dark-900) 0%, var(--dark-800) 55%, #071c0e 100%);
    overflow: hidden;
}

.section--projects::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(22, 163, 74, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(22, 163, 74, 0.05) 1px, transparent 1px);
    background-size: 64px 64px;
    pointer-events: none;
    z-index: 0;
}

.section--projects .container {
    position: relative;
    z-index: 1;
}

/* header row: text left, buttons right */
.projects-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 2.5rem;
}

.projects-header__text {
    display: grid;
    gap: 0.5rem;
}

.projects-header__text .section-eyebrow {
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 0.15rem;
}

.projects-header__text h2 {
    color: #fff;
    max-width: 22ch;
}

.projects-header__text > p:last-child {
    color: rgba(255, 255, 255, 0.6);
    max-width: 44ch;
    font-size: 0.97rem;
    margin-top: 0.2rem;
}

/* nav buttons */
.projects-controls {
    display: flex;
    gap: 0.65rem;
    flex-shrink: 0;
}

.projects-nav__btn {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(74, 222, 128, 0.28);
    background: rgba(255, 255, 255, 0.04);
    color: var(--g400);
    cursor: pointer;
    transition:
        background 0.22s ease,
        border-color 0.22s ease,
        transform 0.18s ease;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.projects-nav__btn:hover {
    background: rgba(22, 163, 74, 0.16);
    border-color: var(--g400);
    transform: scale(1.08);
}

.projects-nav__btn svg {
    width: 20px;
    height: 20px;
}

/* slider track */
.projects-track {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.projects-track::-webkit-scrollbar {
    display: none;
}

.projects-track .project-card {
    flex: 0 0 calc(50% - 0.75rem);
    scroll-snap-align: start;
}

/* dark card overrides — horizontal layout */
.section--projects .project-card {
    display: grid;
    grid-template-columns: 180px 1fr;
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.09);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.section--projects .project-card:hover {
    transform: none;
    border-color: rgba(74, 222, 128, 0.35);
    box-shadow:
        0 0 0 1px rgba(74, 222, 128, 0.2),
        0 8px 40px rgba(0, 0, 0, 0.45),
        0 0 32px rgba(22, 163, 74, 0.12);
}

.section--projects .project-card__thumb {
    min-height: unset;
    height: 100%;
    background: linear-gradient(160deg, rgba(22, 163, 74, 0.18) 0%, rgba(4, 26, 13, 0.8) 100%);
}

.section--projects .project-card__thumb span {
    min-height: unset;
    height: 100%;
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.85rem;
    padding: 1rem;
    text-align: center;
}

.section--projects .project-card__body {
    gap: 0.55rem;
    padding: 1.25rem;
}

.section--projects .project-card h3 {
    color: #fff;
    font-size: 0.97rem;
}

.section--projects .project-card__body > p {
    display: none;
}

.section--projects .project-card__details {
    border-top-color: rgba(255, 255, 255, 0.08);
    gap: 0.5rem;
    margin-top: 0.2rem;
    padding-top: 0.65rem;
}

.section--projects .project-card__details span {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.5;
}

.section--projects .project-card__details strong {
    color: var(--g400);
}

.section--projects .badge {
    background: rgba(22, 163, 74, 0.18);
    border-color: rgba(74, 222, 128, 0.3);
    color: var(--g400);
}

/* ─── Review card ─────────────────────────────────────────── */

.section--reviews {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.reviews-deco {
    position: absolute;
    right: -120px;
    top: 50%;
    transform: translateY(-50%);
    width: clamp(320px, 42vw, 520px);
    pointer-events: none;
    z-index: 0;
    opacity: 0.7;
}

.reviews-deco svg {
    width: 100%;
    height: auto;
}

.section--reviews .container {
    position: relative;
    z-index: 1;
}

.reviews-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

/* ── Review card ── */

.review-card {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    position: relative;
    background: #fff;
    border: 1px solid rgba(22, 163, 74, 0.1);
    border-radius: var(--r-lg);
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.05);
    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        border-color 0.22s ease;
    overflow: hidden;
}

.review-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--g600), var(--g400));
}

.review-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 36px rgba(22, 163, 74, 0.12);
    border-color: rgba(22, 163, 74, 0.25);
}

.review-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.review-card__stars {
    display: flex;
    gap: 0.2rem;
    color: var(--g500);
}

.review-card__stars svg {
    width: 16px;
    height: 16px;
}

.review-card__qmark {
    color: var(--g100);
    line-height: 0;
}

.review-card__qmark svg {
    width: 28px;
    height: 22px;
}

.review-card p {
    color: var(--color-text-2);
    font-size: 0.97rem;
    line-height: 1.75;
    flex: 1;
}

.review-card__footer {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--color-border);
    margin-top: auto;
}

.review-card__avatar {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--g600), var(--g900));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.03em;
}

.review-card__meta {
    display: grid;
    gap: 0.1rem;
}

.review-card strong {
    font-family: var(--font-display);
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--color-text);
}

.review-card span {
    font-size: 0.78rem;
    color: var(--color-text-3);
    font-weight: 500;
}

/* ─── Benefits (surface card) ─────────────────────────────── */

.surface-card.stack {
    display: grid;
    gap: 0.85rem;
}

.surface-card.stack p {
    font-size: 0.93rem;
    color: var(--color-text-2);
}

/* ─── Benefits section ────────────────────────────────────── */

.section--benefits {
    background-color: var(--g50);
    background-image: radial-gradient(circle, rgba(22, 163, 74, 0.07) 1px, transparent 1px);
    background-size: 26px 26px;
}

.section--benefits::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 65% 55% at 50% -8%, rgba(22, 163, 74, 0.1) 0%, transparent 70%),
        radial-gradient(ellipse 38% 45% at 100% 100%, rgba(22, 163, 74, 0.07) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}

.section--benefits .container {
    position: relative;
    z-index: 1;
}

/* two-column panel */
.benefits-panel {
    display: grid;
    grid-template-columns: 1fr 300px;
    background: #fff;
    border: 1px solid rgba(21, 128, 61, 0.14);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow:
        0 6px 36px rgba(21, 128, 61, 0.07),
        0 1px 4px rgba(0, 0, 0, 0.04);
    position: relative;
}

/* gradient top bar */
.benefits-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--g800), var(--g600), var(--g400), var(--g600));
    z-index: 2;
}

/* 2×2 metric grid */
.benefits-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-right: 1px solid rgba(21, 128, 61, 0.1);
}

.benefit-item {
    padding: 2.5rem 2.25rem;
    display: grid;
    gap: 0.5rem;
    position: relative;
    overflow: hidden;
    transition: background 0.3s ease;
    border-right: 1px solid rgba(21, 128, 61, 0.1);
    border-bottom: 1px solid rgba(21, 128, 61, 0.1);
}

.benefit-item:nth-child(2n) {
    border-right: none;
}

.benefit-item:nth-child(3),
.benefit-item:nth-child(4) {
    border-bottom: none;
}

/* keep text above pseudo-elements */
.benefit-item > * {
    position: relative;
    z-index: 1;
}

/* left accent bar — slides up from bottom */
.benefit-item::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(to top, var(--g800), var(--g500));
    transform: scaleY(0);
    transform-origin: bottom center;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 2;
}

.benefit-item:hover::before {
    transform: scaleY(1);
}

/* scan-line beam — sweeps from top to bottom once */
.benefit-item::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 55%;
    background: linear-gradient(to bottom, transparent, rgba(22, 163, 74, 0.08) 50%, transparent);
    transform: translateY(-100%);
    pointer-events: none;
    z-index: 0;
}

.benefit-item:hover {
    background: rgba(240, 253, 244, 0.85);
}

.benefit-item:hover::after {
    animation: benefitScan 0.72s ease-out forwards;
}

@keyframes benefitScan {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(220%);
    }
}

/* metric */
.benefit-metric {
    display: block;
    font-size: clamp(2rem, 2.5vw, 2.6rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--g700);
    font-family: var(--font-display);
    transition:
        color 0.3s ease,
        text-shadow 0.3s ease,
        transform 0.3s ease;
    transform-origin: left center;
}

.benefit-item:hover .benefit-metric {
    color: var(--g600);
    text-shadow: 0 0 28px rgba(22, 163, 74, 0.38);
    transform: scale(1.06);
}

.benefit-metric::after {
    content: '';
    display: block;
    width: 22px;
    height: 2.5px;
    background: linear-gradient(90deg, var(--g500), transparent);
    margin-top: 0.65rem;
    border-radius: 999px;
    transition: width 0.35s ease;
}

.benefit-item:hover .benefit-metric::after {
    width: 44px;
}

/* text lifts on hover */
.benefit-item h3 {
    font-size: 0.96rem;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.3;
    transition: transform 0.35s ease;
}

.benefit-item p {
    font-size: 0.875rem;
    color: var(--color-text-3);
    line-height: 1.6;
    transition: transform 0.35s ease;
}

.benefit-item:hover h3,
.benefit-item:hover p {
    transform: translateY(-3px);
}

/* SVG visual panel */
.benefits-visual {
    background: var(--g50);
    display: grid;
    place-items: center;
    padding: 2rem 1.5rem;
    position: relative;
}

.benefits-visual svg {
    width: 100%;
    max-width: 240px;
    height: auto;
}

/* ── circuit path flow animation ── */
.c-path {
    stroke-dasharray: 8 14;
    animation: circuitFlow 2s linear infinite;
}

.c-p1 {
    animation-duration: 1.7s;
    animation-delay: 0s;
}
.c-p2 {
    animation-duration: 2.3s;
    animation-delay: -0.5s;
}
.c-p3 {
    animation-duration: 2.3s;
    animation-delay: -1.15s;
}
.c-p4 {
    animation-duration: 2.6s;
    animation-delay: -0.9s;
}
.c-p5 {
    animation-duration: 2.6s;
    animation-delay: -1.8s;
}
.c-p6 {
    animation-duration: 1.7s;
    animation-delay: -0.85s;
}

@keyframes circuitFlow {
    from {
        stroke-dashoffset: 0;
    }
    to {
        stroke-dashoffset: -22;
    }
}

/* ── pulse rings ── */
.b-ring {
    transform-origin: 140px 200px;
    animation: ringBreathe 3s ease-in-out infinite;
}

.b-r1 {
    animation-delay: 0s;
}
.b-r2 {
    animation-delay: -1.5s;
}

@keyframes ringBreathe {
    0%,
    100% {
        opacity: 0.55;
        transform: scale(1);
    }
    50% {
        opacity: 0.15;
        transform: scale(1.14);
    }
}

/* ── node pulses ── */
.n-p {
    transform-box: fill-box;
    transform-origin: center;
    animation: nodePop 2.2s ease-in-out infinite;
}

.n-p1 {
    animation-delay: 0s;
}
.n-p2 {
    animation-delay: -0.75s;
}
.n-p3 {
    animation-delay: -1.5s;
}

@keyframes nodePop {
    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.6);
        opacity: 0.45;
    }
}

/* ─── Timeline card ───────────────────────────────────────── */

.timeline-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

.timeline-card {
    padding: 1.75rem;
    display: grid;
    gap: 0.85rem;
}

.timeline-card__index {
    display: inline-flex;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--color-bg-muted);
    color: var(--color-primary-d);
    font-weight: 800;
    font-family: var(--font-display);
    font-size: 0.9rem;
}

.timeline-card p {
    font-size: 0.92rem;
    color: var(--color-text-2);
}

/* ─── Calculator ──────────────────────────────────────────── */

.calculator-grid {
    align-items: start;
}

.calculator-card,
.lead-form {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--r-xl);
    box-shadow: var(--sh-md);
}

.calculator-card {
    padding: 2rem;
    display: grid;
    gap: 1.25rem;
    position: relative;
    overflow: hidden;
}

.calculator-card::before {
    content: '';
    position: absolute;
    right: -80px;
    top: -80px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(22, 163, 74, 0.08), transparent 70%);
    pointer-events: none;
}

.calculator-card label {
    display: grid;
    gap: 0.5rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-text-2);
}

.lead-form label {
    display: grid;
    gap: 0.4rem;
    font-size: 0.88rem;
    font-weight: 600;
}

.calculator-card input {
    width: 100%;
    padding: 0.85rem 1rem;
    border: 1.5px solid var(--color-border);
    border-radius: var(--r-sm);
    color: var(--color-text);
    background: var(--color-bg-alt);
    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease;
}

.lead-form input,
.lead-form textarea {
    width: 100%;
    padding: 0.85rem 1rem;
    border-radius: var(--r-sm);
    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease;
}

.calculator-card input:focus {
    outline: none;
    border-color: var(--color-primary);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.1);
}

.calculator-card input::placeholder {
    color: var(--color-text-3);
}

.calculator-results {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.calculator-results div {
    padding: 1rem;
    border-radius: var(--r-md);
    background: var(--color-bg-muted);
    border: 1px solid rgba(22, 163, 74, 0.28);
    display: grid;
    gap: 0.35rem;
}

.calculator-results strong {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--color-primary-d);
    letter-spacing: -0.04em;
}

.calculator-results span {
    font-size: 0.78rem;
    color: var(--color-text-3);
}

.calculator-card__note {
    font-size: 0.87rem;
    color: var(--color-text-3);
}

/* ─── Calculator section (light wow) ──────────────────────── */

.section--calculator {
    background-color: #fff;
    background-image: radial-gradient(circle, rgba(22, 163, 74, 0.065) 1px, transparent 1px);
    background-size: 26px 26px;
    overflow: hidden;
}

.section--calculator::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 70% at 15% 50%, rgba(22, 163, 74, 0.08) 0%, transparent 65%),
        radial-gradient(ellipse 50% 60% at 85% 50%, rgba(22, 163, 74, 0.06) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
}

.section--calculator .container {
    position: relative;
    z-index: 1;
}

/* desktop: explicit 2-column for calculator */
.section--calculator .calculator-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

/* decorative SVG */
.calc-visual {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: clamp(320px, 42vw, 560px);
    pointer-events: none;
    z-index: 0;
    opacity: 0.45;
}

.calc-visual svg {
    width: 100%;
    height: auto;
}

/* outer dashed rings spin at different speeds */
.cv-orbit {
    transform-origin: 230px 230px;
}

.cv-o1 {
    animation: calcSpin1 60s linear infinite;
}
.cv-o2 {
    animation: calcSpin1 38s linear infinite reverse;
}

@keyframes calcSpin1 {
    to {
        transform: rotate(360deg);
    }
}

/* progress arc pulses */
.cv-arc {
    animation: arcPulse 4s ease-in-out infinite;
}

@keyframes arcPulse {
    0%,
    100% {
        opacity: 0.75;
        stroke-dashoffset: 220;
    }
    50% {
        opacity: 1;
        stroke-dashoffset: 190;
    }
}

/* tip dots pop */
.cv-dot {
    transform-box: fill-box;
    transform-origin: center;
    animation: dotPop 2.5s ease-in-out infinite;
}

.cv-d1 {
    animation-delay: 0s;
}
.cv-d2 {
    animation-delay: -0.85s;
}
.cv-d3 {
    animation-delay: -1.7s;
}

@keyframes dotPop {
    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.7);
        opacity: 0.4;
    }
}

/* calculator card upgrade */
.section--calculator .calculator-card {
    border-color: rgba(22, 163, 74, 0.18);
    box-shadow:
        0 0 0 1px rgba(22, 163, 74, 0.08),
        0 8px 40px rgba(21, 128, 61, 0.08),
        0 2px 8px rgba(0, 0, 0, 0.04);
    padding: 2.25rem;
}

.section--calculator .calculator-card::before {
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, rgba(22, 163, 74, 0.1), transparent 70%);
}

/* gradient top bar on calculator card */
.section--calculator .calculator-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--g700), var(--g500), var(--g400));
    border-radius: var(--r-xl) var(--r-xl) 0 0;
}

/* results blocks */
.section--calculator .calculator-results div {
    background: var(--g50);
    border-color: rgba(22, 163, 74, 0.2);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.section--calculator .calculator-results div:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(21, 128, 61, 0.12);
}

.section--calculator .calculator-results strong {
    font-size: clamp(0.95rem, 1.3vw, 1.25rem);
    color: var(--g700);
    white-space: nowrap;
}

/* ─── Lead form ───────────────────────────────────────────── */

.lead-form {
    padding: 2.5rem;
    display: grid;
    gap: 1.1rem;
    position: relative;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(34, 197, 94, 0.18);
    border-radius: var(--r-xl);
    box-shadow:
        0 0 0 1px rgba(34, 197, 94, 0.06) inset,
        0 24px 64px rgba(0, 0, 0, 0.35);
}

.lead-form::before {
    content: '';
    position: absolute;
    right: -80px;
    top: -80px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(22, 163, 74, 0.14), transparent 70%);
    pointer-events: none;
}

.lead-form::after {
    content: '';
    position: absolute;
    left: -60px;
    bottom: -60px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(34, 197, 94, 0.08), transparent 70%);
    pointer-events: none;
}

.lead-form__header {
    display: grid;
    gap: 0.4rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(34, 197, 94, 0.14);
}

.lead-form__header h3 {
    color: #fff;
    font-size: 1.15rem;
    font-weight: 700;
}

.lead-form__header p {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.88rem;
}

.lead-form label span {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.lead-form input,
.lead-form textarea {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1.5px solid rgba(34, 197, 94, 0.2) !important;
    color: #fff !important;
    border-radius: var(--r-sm);
    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease;
}

.lead-form input:focus,
.lead-form textarea:focus {
    outline: none;
    border-color: var(--g500) !important;
    background: rgba(255, 255, 255, 0.09) !important;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.12) !important;
}

.lead-form input::placeholder,
.lead-form textarea::placeholder {
    color: rgba(255, 255, 255, 0.3) !important;
}

.lead-form .button {
    margin-top: 0.25rem;
    width: 100%;
    justify-content: center;
    font-size: 1rem;
    padding: 1rem 1.5rem;
    background: var(--g600);
    color: #fff;
    border: none;
    border-radius: var(--r-md);
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition:
        background 0.18s ease,
        transform 0.15s ease,
        box-shadow 0.18s ease;
    box-shadow: 0 4px 20px rgba(22, 163, 74, 0.35);
}

.lead-form .button:hover {
    background: var(--g500);
    transform: translateY(-1px);
    box-shadow: 0 8px 28px rgba(22, 163, 74, 0.45);
}

.lead-form__result {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 0.75rem;
    min-height: 280px;
    text-align: center;
}

.lead-form__result[hidden] { display: none; }

.lead-form.is-complete,
.lead-form.is-error { min-height: 390px; }

.lead-form.is-complete > :not(.lead-form__result),
.lead-form.is-error > :not(.lead-form__result) { display: none; }

.lead-form__result-icon {
    display: grid;
    place-items: center;
    width: 68px;
    height: 68px;
    border: 1px solid rgba(103, 232, 149, 0.44);
    border-radius: 50%;
    background: rgba(34, 197, 94, 0.14);
    color: #86efac;
    box-shadow: 0 0 0 9px rgba(34, 197, 94, 0.08);
}

.lead-form__result-icon svg {
    width: 34px;
    height: 34px;
}

.lead-form__result h3 {
    margin: 0;
    color: #fff;
    font-size: 1.3rem;
    line-height: 1.2;
}

.lead-form__result p {
    max-width: 28rem;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.94rem;
    line-height: 1.55;
}

.lead-form.is-error .lead-form__result-icon {
    border-color: rgba(252, 165, 165, 0.48);
    background: rgba(239, 68, 68, 0.13);
    color: #fca5a5;
    box-shadow: 0 0 0 9px rgba(239, 68, 68, 0.08);
}

.lead-form__retry {
    margin-top: 0.4rem;
    padding: 0.7rem 1.15rem;
    border: 1px solid rgba(255, 255, 255, 0.38);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 0.88rem;
    font-weight: 700;
    transition: background 0.18s ease, border-color 0.18s ease;
}

.lead-form__retry:hover {
    border-color: rgba(255, 255, 255, 0.72);
    background: rgba(255, 255, 255, 0.16);
}

/* ─── Contact links ───────────────────────────────────────── */

.contact-links {
    display: grid;
    gap: 0.6rem;
}

.contact-links li {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-2);
    font-size: 0.93rem;
}

.contact-links li:last-child {
    border-bottom: none;
}

/* ─── CTA banner ──────────────────────────────────────────── */

.cta-banner {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2rem;
    align-items: center;
    padding: 2.5rem;
    border-radius: var(--r-xl);
    background: linear-gradient(135deg, var(--color-bg-muted), var(--color-bg-alt) 70%);
    border: 1.5px solid rgba(22, 163, 74, 0.32);
    box-shadow: var(--sh-md);
}

/* ─── Comparison cards ────────────────────────────────────── */

.comparison-card {
    background: #fff;
    border: 1.5px solid var(--color-border);
    border-radius: var(--r-lg);
    padding: 1.75rem;
    box-shadow: var(--sh-sm);
}

.comparison-card span {
    display: inline-flex;
    margin-bottom: 0.75rem;
    font-weight: 700;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.comparison-card--before {
    border-color: rgba(202, 107, 10, 0.2);
}
.comparison-card--before span {
    color: var(--color-warning);
}

.comparison-card--after {
    border-color: rgba(22, 163, 74, 0.35);
    background: var(--color-bg-alt);
}
.comparison-card--after span {
    color: var(--color-primary);
}

.comparison-card p {
    color: var(--color-text-2);
    font-size: 0.93rem;
}

/* ─── Contacts section — split screen ────────────────────── */

.section--contacts {
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 520px;
}

/* ── Left: dark phone hero ── */

.ct-left {
    position: relative;
    background: linear-gradient(160deg, var(--g50) 0%, #edf7f1 60%, var(--color-bg-alt) 100%);
    padding: clamp(3rem, 5.5vw, 5.5rem) clamp(2rem, 4vw, 4.5rem);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 3rem;
    overflow: hidden;
    isolation: isolate;
}

.ct-left__grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(22, 163, 74, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(22, 163, 74, 0.07) 1px, transparent 1px);
    background-size: 38px 38px;
    pointer-events: none;
    z-index: 0;
    mask-image: radial-gradient(ellipse 90% 90% at 30% 60%, black 20%, transparent 80%);
}

.ct-left__orb {
    position: absolute;
    right: -70px;
    bottom: -70px;
    width: 320px;
    opacity: 0.5;
    pointer-events: none;
    z-index: 0;
}

.ct-left__orb svg {
    width: 100%;
    height: auto;
}

.ct-ring.ct-r1 {
    animation: ctSpin 60s linear infinite;
    transform-origin: 150px 150px;
}

.ct-ring.ct-r2 {
    animation: ctSpin 38s linear infinite reverse;
    transform-origin: 150px 150px;
}

@keyframes ctSpin {
    to {
        transform: rotate(360deg);
    }
}

.ct-left__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    justify-content: space-between;
    flex: 1;
}

.ct-status {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--g700);
    letter-spacing: 0.05em;
}

.ct-status__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--g500);
    flex-shrink: 0;
    animation: ctStatusPop 2.4s ease-out infinite;
}

@keyframes ctStatusPop {
    0% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
    }
    65% {
        box-shadow: 0 0 0 9px rgba(34, 197, 94, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
    }
}

.ct-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-text-3);
    display: block;
    margin-bottom: 0.5rem;
}

.ct-phone-block {
    display: grid;
}

.ct-phone {
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 3.2vw, 3rem);
    font-weight: 900;
    color: var(--g900);
    letter-spacing: -0.04em;
    line-height: 1;
    text-decoration: none;
    display: block;
    transition: color 0.18s;
}

.ct-phone:hover {
    color: var(--g700);
}

.ct-hours {
    margin: 0.6rem 0 0;
    font-size: 0.8rem;
    color: var(--color-text-3);
}

.ct-actions {
    display: flex;
    flex-direction: row;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.ct-call {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.85rem 1.4rem;
    background: var(--g600);
    color: #fff;
    border-radius: var(--r-md);
    font-size: 0.92rem;
    font-weight: 700;
    text-decoration: none;
    overflow: hidden;
    box-shadow: 0 4px 22px rgba(22, 163, 74, 0.35);
    transition:
        background 0.18s,
        transform 0.15s,
        box-shadow 0.18s;
    white-space: nowrap;
}

.ct-call:hover {
    background: var(--g500);
    transform: translateY(-2px);
    box-shadow: 0 10px 32px rgba(22, 163, 74, 0.55);
}

.ct-call__ring {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 2px solid rgba(34, 197, 94, 0.65);
    animation: ctCallRing 2.4s ease-out infinite;
    pointer-events: none;
}

@keyframes ctCallRing {
    0% {
        transform: scale(1);
        opacity: 0.85;
    }
    100% {
        transform: scale(1.09);
        opacity: 0;
    }
}

.ct-wa {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1.2rem;
    border-radius: var(--r-md);
    background: rgba(22, 163, 74, 0.07);
    border: 1px solid rgba(22, 163, 74, 0.2);
    color: var(--g800);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition:
        background 0.18s,
        border-color 0.18s,
        color 0.18s;
}

.ct-wa:hover {
    background: rgba(22, 163, 74, 0.13);
    border-color: rgba(22, 163, 74, 0.32);
    color: var(--g900);
}

.ct-map {
    border-radius: var(--r-md);
    overflow: hidden;
    border: 1px solid rgba(22, 163, 74, 0.18);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    flex-shrink: 0;
}

.ct-map iframe {
    display: block;
    width: 100%;
    height: 180px;
}

/* ── Right: white info ── */

.ct-right {
    background: #fff;
    display: flex;
    align-items: center;
    border-left: 1px solid rgba(22, 163, 74, 0.08);
}

.ct-right__inner {
    padding: clamp(3rem, 5.5vw, 5.5rem) clamp(2rem, 4vw, 4.5rem);
    display: grid;
    gap: 3rem;
    width: 100%;
    max-width: 560px;
}

.ct-heading {
    display: grid;
    gap: 0.9rem;
}

.ct-heading h2 {
    font-size: clamp(1.6rem, 2.4vw, 2.2rem);
    line-height: 1.2;
    max-width: 22ch;
}

.ct-heading p {
    color: var(--color-text-3);
    max-width: 44ch;
    line-height: 1.7;
}

/* ── Contact list ── */

.ct-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0;
}

.ct-item {
    position: relative;
}

.ct-item__link {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--color-border);
    text-decoration: none;
    color: inherit;
    transition: padding-left 0.2s ease;
    position: relative;
}

.ct-item:first-child .ct-item__link {
    border-top: 1px solid var(--color-border);
}

.ct-item__link:not(.ct-item__link--static):hover {
    padding-left: 0.5rem;
}

.ct-item__icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 14px;
    background: var(--g50);
    border: 1px solid rgba(22, 163, 74, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--g700);
    transition:
        background 0.18s,
        box-shadow 0.18s;
}

.ct-item__icon svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.ct-item__link:not(.ct-item__link--static):hover .ct-item__icon {
    background: #d4f0de;
    box-shadow: 0 0 0 5px rgba(22, 163, 74, 0.08);
}

.ct-item__body {
    display: grid;
    gap: 0.1rem;
    flex: 1;
    min-width: 0;
}

.ct-item__body .ct-label {
    color: var(--color-text-3);
}

.ct-item__val {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ct-item__arr {
    width: 20px;
    height: 20px;
    color: var(--g600);
    opacity: 0;
    transform: translateX(-8px);
    transition:
        opacity 0.18s,
        transform 0.18s;
    flex-shrink: 0;
}

.ct-item__link:not(.ct-item__link--static):hover .ct-item__arr {
    opacity: 1;
    transform: translateX(0);
}

/* ─── Content block ───────────────────────────────────────── */

.content-block {
    display: grid;
    gap: 1.1rem;
}
.content-block h2,
.content-block h3 {
    max-width: none;
}
.content-block ul {
    padding-left: 1.25rem;
    color: var(--color-text-2);
}
.content-block p {
    color: var(--color-text-2);
}

.case-sidebar {
    display: grid;
    gap: 1rem;
}

/* ─── Gallery ─────────────────────────────────────────────── */

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

.gallery-card {
    margin: 0;
    overflow: hidden;
    border-radius: var(--r-lg);
    border: 1px solid var(--color-border);
    box-shadow: var(--sh-sm);
}

.gallery-card img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    transition: transform 0.35s ease;
}

.gallery-card:hover img {
    transform: scale(1.04);
}

/* ─── Page hero ───────────────────────────────────────────── */

.page-hero {
    border-bottom: 1px solid var(--color-border);
}

.page-hero__grid {
    align-items: center;
}

/* ─── Site main ───────────────────────────────────────────── */

.site-main {
    overflow: clip;
}

/* ─── Entry card ──────────────────────────────────────────── */

.entry-card {
    padding: 1.5rem;
}
.entry-card p {
    color: var(--color-text-2);
    font-size: 0.92rem;
}

/* ─── Pagination ──────────────────────────────────────────── */

.wp-pagenavi,
.nav-links {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 2.5rem;
}

.page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    padding: 0 0.75rem;
    border-radius: 10px;
    border: 1.5px solid var(--color-border);
    color: var(--color-text-2);
    font-size: 0.9rem;
    font-weight: 500;
    transition:
        border-color 0.18s ease,
        color 0.18s ease,
        background 0.18s ease;
}

.page-numbers:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: var(--g50);
}

.page-numbers.current {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
    font-weight: 700;
}

/* ─── Footer ──────────────────────────────────────────────── */

/* ─── Footer ──────────────────────────────────────────────── */

.site-footer {
    background: linear-gradient(170deg, var(--dark-800) 0%, var(--dark-900) 40%, #020e06 100%);
    color: rgba(255, 255, 255, 0.65);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.footer-deco {
    position: absolute;
    right: -100px;
    bottom: -80px;
    width: clamp(340px, 38vw, 520px);
    pointer-events: none;
    z-index: 0;
    opacity: 0.8;
}

.footer-deco svg {
    width: 100%;
    height: auto;
}

/* ── Pre-footer CTA bar ── */

.footer-top {
    position: relative;
    z-index: 1;
    border-bottom: 1px solid rgba(34, 197, 94, 0.12);
}

.footer-top__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}

.footer-top__text {
    display: grid;
    gap: 0.3rem;
}

.footer-top__eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--g400);
}

.footer-top__text p {
    font-size: 1.05rem;
    font-weight: 600;
    color: #fff;
    margin: 0;
}

.footer-top__btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1.6rem;
    background: var(--g600);
    border: 0;
    color: #fff;
    border-radius: var(--r-md);
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition:
        background 0.18s ease,
        transform 0.15s ease,
        box-shadow 0.18s ease;
    box-shadow: 0 4px 18px rgba(22, 163, 74, 0.35);
}

.footer-top__btn:hover {
    background: var(--g500);
    transform: translateY(-1px);
    box-shadow: 0 8px 26px rgba(22, 163, 74, 0.45);
}

/* ── Main grid ── */

.site-footer__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 3rem;
    align-items: start;
    padding-top: 3.5rem;
    padding-bottom: 3rem;
}

.footer-col {
    display: grid;
    gap: 1.25rem;
}

/* Brand column */

.site-footer__brand {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.02em;
}

.footer-col--brand > p {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.88rem;
    line-height: 1.7;
    max-width: 26ch;
}

.footer-social {
    display: flex;
    gap: 0.6rem;
    margin-top: 0.25rem;
}

.footer-social__link {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        background 0.18s,
        border-color 0.18s,
        color 0.18s;
}

.footer-social__link:hover {
    background: rgba(34, 197, 94, 0.15);
    border-color: rgba(34, 197, 94, 0.3);
    color: var(--g400);
}

/* Column headings */

.site-footer__grid h2 {
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.35);
    font-family: var(--font-body);
    font-weight: 700;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

/* Footer links list */

.footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.1rem;
}

.footer-links a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.42rem 0;
    color: rgba(255, 255, 255, 0.58);
    font-size: 0.9rem;
    text-decoration: none;
    transition:
        color 0.18s,
        padding-left 0.18s;
    position: relative;
}

.footer-links a::before {
    content: '';
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--g600);
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.18s;
}

.footer-links a:hover {
    color: var(--g400);
    padding-left: 0.35rem;
}

.footer-links a:hover::before {
    opacity: 1;
}

/* Footer nav menu */

.footer-menu {
    display: grid;
    gap: 0.1rem;
}

.footer-menu a {
    display: block;
    padding: 0.42rem 0;
    color: rgba(255, 255, 255, 0.58);
    font-size: 0.9rem;
    transition:
        color 0.18s,
        padding-left 0.18s;
    text-decoration: none;
}

.footer-menu a:hover {
    color: var(--g400);
    padding-left: 0.35rem;
}

/* Contact links in footer */

.site-footer .contact-links {
    display: grid;
    gap: 0;
}

.site-footer .contact-links li {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.58);
    font-size: 0.88rem;
}

.site-footer .contact-links li:last-child {
    border-bottom: none;
}

.site-footer .contact-links a {
    color: rgba(255, 255, 255, 0.58);
    transition: color 0.18s;
}

.site-footer .contact-links a:hover {
    color: var(--g400);
}

/* Bottom bar */

.site-footer__bottom {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.28);
    font-size: 0.82rem;
}

/* ─── Services section (dark hero style) ─────────────────── */

/* decorative illustration */
.services-visual {
    position: absolute;
    right: -4%;
    top: 50%;
    transform: translateY(-50%);
    width: clamp(280px, 36vw, 500px);
    color: var(--g400);
    opacity: 0.2;
    pointer-events: none;
    z-index: 0;
}

.services-visual svg {
    width: 100%;
    height: auto;
    animation: servicesOrbit 55s linear infinite;
    transform-origin: center;
}

@keyframes servicesOrbit {
    to {
        transform: rotate(360deg);
    }
}

.section--services {
    background: linear-gradient(160deg, var(--dark-900) 0%, var(--dark-800) 55%, #071c0e 100%);
    overflow: hidden;
}

.section--services::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 50% at 8% 15%, rgba(74, 222, 128, 0.09) 0%, transparent 65%),
        radial-gradient(ellipse 50% 55% at 92% 85%, rgba(22, 163, 74, 0.11) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
}

.section--services::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(22, 163, 74, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(22, 163, 74, 0.06) 1px, transparent 1px);
    background-size: 64px 64px;
    pointer-events: none;
    z-index: 0;
}

.section--services .container {
    position: relative;
    z-index: 1;
}

/* heading */
.section--services .section-eyebrow {
    color: rgba(255, 255, 255, 0.5);
}
.section--services h2 {
    color: #fff;
}
.section--services .section-heading > p:last-child {
    color: rgba(255, 255, 255, 0.62);
}

/* dark glass cards */
.section--services .service-card {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.section--services .service-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 0%, rgba(74, 222, 128, 0.13), transparent 65%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 0;
}

.section--services .service-card > * {
    position: relative;
    z-index: 1;
}

.section--services .service-card:hover {
    transform: translateY(-6px) scale(1.01);
    border-color: rgba(74, 222, 128, 0.28);
    box-shadow:
        0 20px 56px rgba(0, 0, 0, 0.35),
        0 0 0 1px rgba(74, 222, 128, 0.18),
        0 0 40px rgba(22, 163, 74, 0.12);
}

.section--services .service-card:hover::after {
    opacity: 1;
}

.section--services .service-card h3 {
    color: #fff;
}

.section--services .service-card p {
    color: rgba(255, 255, 255, 0.68);
}

.section--services .service-card a {
    color: var(--g400);
}

.section--services .service-card__marker {
    background: rgba(22, 163, 74, 0.15);
    border-color: rgba(22, 163, 74, 0.35);
    box-shadow: 0 0 18px rgba(22, 163, 74, 0.22);
}

.section--services .service-card__marker::after {
    background: var(--g400);
}

.section--services .service-card__icon {
    background: rgba(22, 163, 74, 0.14);
    border-color: rgba(22, 163, 74, 0.38);
    box-shadow:
        0 0 22px rgba(22, 163, 74, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    color: var(--g400);
}

.section--services .service-card:hover .service-card__icon {
    background: rgba(22, 163, 74, 0.22);
    box-shadow:
        0 0 32px rgba(22, 163, 74, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.section--services .service-card__num {
    color: var(--g400);
    opacity: 0.2;
}

/* ─── Responsive ──────────────────────────────────────────── */

@media (max-width: 1080px) {
    .services-visual {
        display: none;
    }

    .card-grid--services {
        grid-template-columns: repeat(2, 1fr);
    }

    .projects-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.25rem;
    }

    .benefits-panel {
        grid-template-columns: 1fr;
    }

    .benefits-visual {
        border-top: 1px solid rgba(21, 128, 61, 0.1);
        padding: 2.5rem 2rem;
    }

    .benefits-visual svg {
        max-width: 200px;
    }

    .card-grid--benefits,
    .card-grid--projects,
    .card-grid--reviews,
    .problem-grid,
    .gallery-grid,
    .timeline-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .section--calculator .calculator-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .calc-visual {
        width: clamp(240px, 55vw, 360px);
        opacity: 0.25;
    }

    .hero-section__grid,
    .page-hero__grid,
    .calculator-grid,
    .cta-form-grid,
    .two-column,
    .contacts-grid,
    .case-layout,
    .section-heading--split {
        grid-template-columns: 1fr;
    }

    .site-footer__grid {
        grid-template-columns: 1fr 1fr;
    }

    .footer-col--brand {
        grid-column: 1 / -1;
    }

    .footer-top__inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.25rem;
    }

    .footer-top__btn {
        width: 100%;
        justify-content: center;
    }

    .section--contacts {
        grid-template-columns: 1fr;
    }

    .ct-left {
        min-height: auto;
    }

    .ct-right {
        border-left: none;
        border-top: 1px solid rgba(22, 163, 74, 0.1);
    }

    .hero-section__photo {
        width: 100%;
        opacity: 0.35;
    }

    .section-heading--split {
        align-items: start;
    }

    .cta-banner {
        grid-template-columns: 1fr;
        align-items: start;
    }
}

@media (max-width: 860px) {
    /* Logo | gap | phone | burger */
    .site-header__inner {
        grid-template-columns: auto 1fr auto auto;
        gap: 0.5rem;
        position: relative;
    }

    .lead-form {
        padding: 2rem;
    }

    /* Phone visible, CTA hidden */
    .site-header__actions {
        order: 3;
        display: inline-flex;
        justify-content: center;
    }
    .site-header__actions .button {
        display: none;
    }
    .site-header__phone {
        padding: 0.38rem 0.7rem;
        font-size: 0.8rem;
        gap: 0.3rem;
    }
    .site-header__phone::before {
        width: 6px;
        height: 6px;
    }

    /* Burger toggle */
    .site-header__toggle {
        order: 4;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
    }

    /* Burger → X animation */
    .site-header__toggle[aria-expanded='true'] span:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
    }
    .site-header__toggle[aria-expanded='true'] span:nth-child(2) {
        opacity: 0;
        transform: scaleX(0);
    }
    .site-header__toggle[aria-expanded='true'] span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
    }
    .site-header__toggle[aria-expanded='true'] {
        border-color: rgba(34, 197, 94, 0.5);
        background: rgba(34, 197, 94, 0.1);
    }

    /* Dropdown menu — full width of inner container */
    .site-navigation {
        position: absolute;
        top: calc(100% + 0.6rem);
        left: 0;
        right: 0;
        justify-self: stretch;
        padding: 0.75rem 0.75rem 1rem;
        background: rgba(8, 20, 13, 0.97);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 1px solid rgba(34, 197, 94, 0.18);
        border-radius: 22px;
        box-shadow:
            0 24px 64px rgba(0, 0, 0, 0.4),
            0 4px 16px rgba(0, 0, 0, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.04);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px) scale(0.98);
        transform-origin: top right;
        transition:
            opacity 0.22s ease,
            transform 0.22s ease,
            visibility 0.22s ease;
    }

    .site-navigation.is-open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0) scale(1);
    }

    /* Menu items */
    .site-menu {
        flex-direction: column;
        align-items: stretch;
        gap: 0.15rem;
    }

    .site-menu a {
        border-radius: 12px;
        padding: 0.8rem 1rem;
        font-size: 0.92rem;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.72);
        border: 1px solid transparent;
    }

    .site-menu a:hover,
    .site-menu .current-menu-item > a,
    .site-menu .current_page_item > a {
        background: rgba(34, 197, 94, 0.1);
        border-color: rgba(34, 197, 94, 0.18);
        color: #fff;
    }

    /* Phone + CTA at bottom of mobile menu */
    .site-nav-mobile-footer {
        display: flex;
        flex-direction: column;
        gap: 0.6rem;
        margin-top: 0.85rem;
        padding-top: 0.85rem;
        border-top: 1px solid rgba(255, 255, 255, 0.07);
    }

    .site-nav-mobile-phone {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.45rem;
        padding: 0.72rem 1rem;
        border-radius: 12px;
        border: 1.5px solid rgba(34, 197, 94, 0.22);
        background: rgba(34, 197, 94, 0.06);
        font-size: 0.95rem;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.82);
        letter-spacing: 0.01em;
        transition:
            border-color 0.18s ease,
            color 0.18s ease,
            background 0.18s ease;
    }

    .site-nav-mobile-phone::before {
        content: '';
        display: inline-block;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--g500);
        flex-shrink: 0;
        box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.3);
    }

    .site-nav-mobile-phone:hover {
        border-color: var(--g500);
        color: var(--g300, #86efac);
        background: rgba(34, 197, 94, 0.1);
    }

    .site-nav-mobile-footer .button {
        width: 100%;
        justify-content: center;
        padding: 0.85rem 1.5rem;
        font-size: 0.95rem;
    }
}

/* Hide mobile nav footer on desktop */
.site-nav-mobile-footer {
    display: none;
}

@media (max-width: 640px) {
    /* Stats — 2×2 grid замість горизонтальної смужки */
    .stats-panel {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        padding: 0;
        gap: 0;
    }
    .stats-panel div {
        padding: 1rem 1.1rem;
        border-right: 1px solid rgba(255, 255, 255, 0.1);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        gap: 0.35rem;
    }
    .stats-panel div:nth-child(even) {
        border-right: none;
    }
    .stats-panel div:nth-last-child(-n + 2) {
        border-bottom: none;
    }
    .stats-panel div:first-child {
        padding-left: 1.1rem;
    }
    .stats-panel strong {
        font-size: 1.5rem;
    }
    .stats-panel span {
        font-size: 0.78rem;
    }

    /* Footer deco — менша і не виходить за екран */
    .footer-deco {
        width: 220px;
        right: -60px;
        bottom: -50px;
        opacity: 0.5;
    }

    .calculator-results,
    .problem-grid,
    .card-grid--services,
    .card-grid--benefits,
    .benefits-metrics,
    .card-grid--projects,
    .card-grid--reviews,
    .timeline-grid,
    .gallery-grid {
        grid-template-columns: 1fr;
    }

    .projects-track .project-card {
        flex: 0 0 85%;
        grid-template-columns: 1fr;
    }

    .section--projects .project-card__thumb,
    .section--projects .project-card__thumb span {
        min-height: 160px;
        height: 160px;
    }

    h1 {
        font-size: clamp(2.2rem, 10vw, 3.4rem);
    }
    h2 {
        font-size: clamp(1.6rem, 7vw, 2.2rem);
    }

    .site-footer__bottom {
        flex-direction: column;
    }

    .button,
    .button--ghost {
        width: 100%;
        justify-content: center;
    }
    .button-group {
        flex-direction: column;
    }

    .hero-panel,
    .surface-card,
    .calculator-card,
    .lead-form,
    .comparison-card,
    .service-card,
    .project-card,
    .problem-card,
    .review-card,
    .timeline-card {
        border-radius: var(--r-lg);
    }

    .cta-banner {
        padding: 1.5rem;
    }
}

/* ============================================================
   Teal / Turquoise Accent Layer
   ============================================================ */

/* ── Teal palette ─────────────────────────────────────────── */
:root {
    --t600: #0d9488;
    --t500: #14b8a6;
    --t400: #2dd4bf;
    --t300: #5eead4;
    --t200: #99f6e4;
    --t100: #ccfbf1;
    --t50: #f0fdfa;
}

/* ── Text selection ───────────────────────────────────────── */
::selection {
    background: var(--t300);
    color: #042f2e;
}

/* ── Scrollbar ────────────────────────────────────────────── */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--t500) var(--g50);
}
::-webkit-scrollbar {
    width: 7px;
}
::-webkit-scrollbar-track {
    background: var(--g50);
}
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--g500), var(--t500));
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--g400), var(--t400));
}

/* ── Header gradient line — green → teal ─────────────────── */
.site-header::before {
    background: linear-gradient(90deg, var(--g800), var(--g500) 45%, var(--t400));
}

/* ── Hero: soft teal glow — top-right corner ─────────────── */
.hero-section::before {
    content: '';
    position: absolute;
    top: -80px;
    right: -60px;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(45, 212, 191, 0.07) 0%, transparent 65%);
    pointer-events: none;
    z-index: 1;
}

/* ── Hero panel — teal accent glow ───────────────────────── */
.hero-panel::before {
    background: radial-gradient(circle, rgba(45, 212, 191, 0.1), transparent 70%);
}

/* ── Review card top stripe — green → teal ───────────────── */
.review-card::before {
    background: linear-gradient(90deg, var(--g600), var(--g400) 55%, var(--t400));
}

/* ── Review card hover — teal glow ───────────────────────── */
.review-card:hover {
    box-shadow: 0 12px 36px rgba(45, 212, 191, 0.12);
    border-color: rgba(45, 212, 191, 0.25);
}

/* ── Benefits panel top stripe — green → teal ────────────── */
.benefits-panel::before {
    background: linear-gradient(90deg, var(--g800), var(--g500) 55%, var(--t400));
}

/* ── Calculator card top stripe — teal finish ────────────── */
.section--calculator .calculator-card::after {
    background: linear-gradient(90deg, var(--g700), var(--g500) 50%, var(--t500));
}

/* ── Service card left accent — teal → green ─────────────── */
.service-card::before {
    background: linear-gradient(180deg, var(--t500), var(--g600), var(--g800));
}

/* ── Problem card solution arrow — teal ──────────────────── */
.problem-card__arrow {
    color: var(--t400);
}

/* ── Timeline step index badge — teal ────────────────────── */
.timeline-card__index {
    background: var(--t100);
    color: var(--t600);
    border: 1px solid rgba(20, 184, 166, 0.2);
}

/* ── Problems section — teal radial top-right ────────────── */
.section--problems::before {
    background:
        radial-gradient(ellipse 45% 55% at 0% 100%, rgba(22, 163, 74, 0.22) 0%, transparent 65%),
        radial-gradient(ellipse 55% 60% at 100% 0%, rgba(45, 212, 191, 0.18) 0%, transparent 65%);
}

/* ── Section --accent — teal radial upper-right ──────────── */
.section--accent::before {
    background:
        radial-gradient(ellipse 60% 50% at 15% 50%, rgba(22, 163, 74, 0.12) 0%, transparent 70%),
        radial-gradient(ellipse 40% 60% at 90% 20%, rgba(45, 212, 191, 0.09) 0%, transparent 60%);
}

/* ── Dark project cards — teal badge & hover ─────────────── */
.section--projects .badge {
    background: rgba(45, 212, 191, 0.12);
    border-color: rgba(45, 212, 191, 0.28);
    color: var(--t300);
}

.section--projects .project-card:hover {
    border-color: rgba(45, 212, 191, 0.35);
    box-shadow:
        0 0 0 1px rgba(45, 212, 191, 0.2),
        0 8px 40px rgba(0, 0, 0, 0.45),
        0 0 32px rgba(20, 184, 166, 0.12);
}

/* ── Dark service cards hover — teal glow ────────────────── */
.section--services .service-card:hover {
    border-color: rgba(45, 212, 191, 0.28);
    box-shadow:
        0 20px 56px rgba(0, 0, 0, 0.35),
        0 0 0 1px rgba(45, 212, 191, 0.18),
        0 0 40px rgba(20, 184, 166, 0.12);
}

/* ── Footer social links — teal hover ────────────────────── */
.footer-social__link:hover {
    background: rgba(45, 212, 191, 0.12);
    border-color: rgba(45, 212, 191, 0.3);
    color: var(--t400);
}

/* ── Footer links — teal dot & hover colour ──────────────── */
.footer-links a::before {
    background: var(--t500);
}
.footer-links a:hover {
    color: var(--t300);
}

/* ── CTA banner — teal border & background tint ──────────── */
.cta-banner {
    border-color: rgba(45, 212, 191, 0.28);
    background: linear-gradient(135deg, var(--color-bg-muted), var(--t50) 70%);
}

/* ============================================================
   Teal Accent Layer — v2 (розширення)
   ============================================================ */

/* ── Section eyebrow — teal на світлих секціях ───────────── */
.section-eyebrow {
    color: var(--t600);
}

/* ── Stats panel — бірюзові цифри з glow ─────────────────── */
.stats-panel strong {
    color: var(--t400);
    text-shadow: 0 0 24px rgba(45, 212, 191, 0.35);
}

/* ── Header phone dot — teal ─────────────────────────────── */
.site-header__phone::before {
    background: var(--t400);
    box-shadow: 0 0 0 2px rgba(45, 212, 191, 0.3);
}
.site-header__phone:hover {
    border-color: var(--t400);
    color: var(--t300);
    background: rgba(45, 212, 191, 0.08);
}

/* ── Nav — поточна сторінка з бірюзовим підсвіченням ────── */
.site-menu .current-menu-item > a,
.site-menu .current_page_item > a {
    background: rgba(45, 212, 191, 0.1);
    color: var(--t300);
}

/* ── Problem card — бірюзовий glow при наведенні ────────── */
.problem-card::after {
    background: radial-gradient(circle at 20% 0%, rgba(45, 212, 191, 0.15), transparent 60%);
}
.problem-card:hover {
    border-color: rgba(45, 212, 191, 0.25);
}

/* ── Benefit item — бірюзовий scan-промінь ───────────────── */
.benefit-item::after {
    background: linear-gradient(to bottom, transparent, rgba(45, 212, 191, 0.08) 50%, transparent);
}

/* ── Benefit metric underline — teal ─────────────────────── */
.benefit-metric::after {
    background: linear-gradient(90deg, var(--t500), transparent);
}

/* ── Dot/grid patterns — teal замість зеленого ───────────── */
.section--benefits {
    background-image: radial-gradient(circle, rgba(20, 184, 166, 0.08) 1px, transparent 1px);
}
.section--calculator {
    background-image: radial-gradient(circle, rgba(20, 184, 166, 0.07) 1px, transparent 1px);
}
.section--problems {
    background-image:
        linear-gradient(rgba(45, 212, 191, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(45, 212, 191, 0.08) 1px, transparent 1px);
}
.section--services::after {
    background-image:
        linear-gradient(rgba(45, 212, 191, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(45, 212, 191, 0.04) 1px, transparent 1px);
    background-size: 64px 64px;
}
.section--projects::before {
    background-image:
        linear-gradient(rgba(45, 212, 191, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(45, 212, 191, 0.04) 1px, transparent 1px);
    background-size: 64px 64px;
}
.section--accent::after {
    background-image:
        linear-gradient(rgba(45, 212, 191, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(45, 212, 191, 0.05) 1px, transparent 1px);
    background-size: 48px 48px;
}

/* ── Projects nav arrows — teal ──────────────────────────── */
.projects-nav__btn {
    border-color: rgba(45, 212, 191, 0.3);
    color: var(--t400);
}
.projects-nav__btn:hover {
    background: rgba(45, 212, 191, 0.16);
    border-color: var(--t400);
}

/* ── Calculator input focus — teal ───────────────────────── */
.calculator-card input:focus {
    border-color: var(--t500);
    box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.12);
}

/* ── Lead form focus — teal glow ─────────────────────────── */
.lead-form input:focus,
.lead-form textarea:focus {
    border-color: var(--t400) !important;
    box-shadow: 0 0 0 4px rgba(45, 212, 191, 0.14) !important;
}

/* ── Contact status dot — teal pulse ─────────────────────── */
.ct-status {
    color: var(--t600);
}
.ct-status__dot {
    background: var(--t500);
    animation: ctStatusPopTeal 2.4s ease-out infinite;
}
@keyframes ctStatusPopTeal {
    0% {
        box-shadow: 0 0 0 0 rgba(45, 212, 191, 0.7);
    }
    65% {
        box-shadow: 0 0 0 9px rgba(45, 212, 191, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(45, 212, 191, 0);
    }
}

/* ── Contact item icon hover — teal ──────────────────────── */
.ct-item__link:not(.ct-item__link--static):hover .ct-item__icon {
    background: rgba(45, 212, 191, 0.14);
    box-shadow: 0 0 0 5px rgba(45, 212, 191, 0.08);
}

/* ── Contact item arrow — teal ───────────────────────────── */
.ct-item__arr {
    color: var(--t500);
}

/* ── Footer menu hover — teal ────────────────────────────── */
.footer-menu a:hover {
    color: var(--t300);
}

/* ── Comparison card "Після" — teal ─────────────────────── */
.comparison-card--after {
    border-color: rgba(45, 212, 191, 0.32);
}
.comparison-card--after span {
    color: var(--t600);
}

/* ── Ghost button hover — teal ───────────────────────────── */
.button--ghost:hover {
    border-color: var(--t500);
    color: var(--t600);
    background: var(--t50);
    box-shadow: 0 4px 14px rgba(20, 184, 166, 0.14);
}

/* ── Calculator results hover — teal shadow ──────────────── */
.section--calculator .calculator-results div:hover {
    box-shadow: 0 4px 16px rgba(20, 184, 166, 0.16);
}

/* ── Section --services hero glow — teal accent ──────────── */
.section--services::before {
    background:
        radial-gradient(ellipse 55% 50% at 8% 15%, rgba(45, 212, 191, 0.08) 0%, transparent 65%),
        radial-gradient(ellipse 45% 55% at 92% 85%, rgba(22, 163, 74, 0.11) 0%, transparent 65%);
}

/* ── Hero section — підсилений teal glow ─────────────────── */
.hero-section::before {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(45, 212, 191, 0.1) 0%, transparent 60%);
}

/* ============================================================
   Teal Accent Layer — v3 (калькулятор, форма, блоки)
   ============================================================ */

/* ─── Hero panel ──────────────────────────────────────────── */
.hero-panel {
    border-color: rgba(45, 212, 191, 0.2);
    box-shadow:
        0 24px 72px rgba(0, 0, 0, 0.35),
        0 0 0 1px rgba(45, 212, 191, 0.08) inset;
}

/* ─── Stats panel ──────────────────────────────────────────── */
.stats-panel {
    border-color: rgba(45, 212, 191, 0.16);
    background: rgba(45, 212, 191, 0.04);
}
.stats-panel div {
    border-right-color: rgba(45, 212, 191, 0.14);
}

/* ─── Calculator section — фон із бірюзовими радіалами ────── */
.section--calculator::before {
    background:
        radial-gradient(ellipse 60% 70% at 15% 50%, rgba(45, 212, 191, 0.09) 0%, transparent 65%),
        radial-gradient(ellipse 50% 60% at 85% 50%, rgba(45, 212, 191, 0.07) 0%, transparent 65%);
}

/* ─── Calculator card — бірюзовий glow всередині ─────────── */
.calculator-card::before,
.section--calculator .calculator-card::before {
    background: radial-gradient(circle, rgba(45, 212, 191, 0.09), transparent 70%);
}

/* ─── Calculator inputs — бірюзова рамка ─────────────────── */
.calculator-card input {
    border-color: rgba(45, 212, 191, 0.3);
}

/* ─── Calculator results — бірюзовий фон і цифри ─────────── */
.calculator-results div {
    background: var(--t50);
    border-color: rgba(20, 184, 166, 0.28);
}
.calculator-results strong {
    color: var(--t600);
}
.section--calculator .calculator-results div {
    background: var(--t50);
    border-color: rgba(20, 184, 166, 0.24);
    box-shadow: inset 0 1px 0 rgba(45, 212, 191, 0.12);
}
.section--calculator .calculator-results strong {
    color: var(--t600);
}
.section--calculator .calculator-results div:hover {
    background: #e6faf7;
    border-color: rgba(20, 184, 166, 0.4);
    box-shadow: 0 4px 16px rgba(20, 184, 166, 0.18);
}

/* ─── Lead form — бірюзова скляна рамка ──────────────────── */
.lead-form {
    border-color: rgba(45, 212, 191, 0.26);
    box-shadow:
        0 0 0 1px rgba(45, 212, 191, 0.08) inset,
        0 0 60px rgba(45, 212, 191, 0.06),
        0 24px 64px rgba(0, 0, 0, 0.35);
}

/* ─── Lead form — glow кути ───────────────────────────────── */
.lead-form::before {
    background: radial-gradient(circle, rgba(45, 212, 191, 0.15), transparent 70%);
}
.lead-form::after {
    background: radial-gradient(circle, rgba(45, 212, 191, 0.1), transparent 70%);
}

/* ─── Lead form header divider ────────────────────────────── */
.lead-form__header {
    border-bottom-color: rgba(45, 212, 191, 0.18);
}

/* ─── Lead form label color ───────────────────────────────── */
.lead-form label span {
    color: var(--t300);
}

/* ─── Lead form inputs — бірюзова рамка ──────────────────── */
.lead-form input,
.lead-form textarea {
    border-color: rgba(45, 212, 191, 0.24) !important;
    background: rgba(45, 212, 191, 0.04) !important;
}

/* ─── Lead form submit — зелено-бірюзовий градієнт ──────── */
.lead-form .button {
    background: linear-gradient(135deg, var(--g600) 0%, var(--t500) 100%);
    box-shadow: 0 4px 20px rgba(20, 184, 166, 0.4);
}
.lead-form .button:hover {
    background: linear-gradient(135deg, var(--g500) 0%, var(--t400) 100%);
    box-shadow: 0 8px 32px rgba(45, 212, 191, 0.5);
}

/* ─── Reviews section — легкий teal фон ──────────────────── */
.section--reviews {
    background: linear-gradient(150deg, #fff 0%, var(--t50) 100%);
}
.section--reviews::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 55% 50% at 0% 100%, rgba(45, 212, 191, 0.07) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
}

/* ─── Benefits visual panel — teal background ────────────── */
.benefits-visual {
    background: var(--t50);
    border-left-color: rgba(45, 212, 191, 0.12);
}
.benefits-visual::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 80% at 50% 50%, rgba(45, 212, 191, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

/* ─── Benefits item accent bar — teal ────────────────────── */
.benefit-item::before {
    background: linear-gradient(to top, var(--t600), var(--t400));
}

/* ─── Timeline section — teal card hover ─────────────────── */
.timeline-card:hover {
    border-color: rgba(45, 212, 191, 0.3);
    box-shadow: 0 8px 28px rgba(20, 184, 166, 0.12);
}

/* ─── Contact left side — teal tint ──────────────────────── */
.ct-left {
    background: linear-gradient(160deg, var(--t50) 0%, #edf9f6 60%, var(--color-bg-alt) 100%);
}

/* ─── Contact left grid pattern — teal ───────────────────── */
.ct-left__grid {
    background-image:
        linear-gradient(rgba(45, 212, 191, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(45, 212, 191, 0.08) 1px, transparent 1px);
}

/* ─── CT phone link color — teal ─────────────────────────── */
.ct-phone {
    color: var(--t700, #0f766e);
}
.ct-phone:hover {
    color: var(--t600);
}

/* ─── CT call button — teal glow ─────────────────────────── */
.ct-call {
    box-shadow: 0 4px 22px rgba(20, 184, 166, 0.35);
}
.ct-call::before {
    border-color: rgba(45, 212, 191, 0.55);
}

/* ─── Calculator visual SVG — teal strokes ───────────────── */
.calc-visual svg * {
    stroke: var(--t500);
}

/* ─── CTA bg visual — teal strokes ───────────────────────── */
.cta-bg-visual svg * {
    stroke: var(--t400);
}

/* ─── Reviews deco SVG — teal ────────────────────────────── */
.reviews-deco svg * {
    stroke: var(--t500);
}

/* Footer energy mark: a quiet animated pulse that supports the content. */
.site-footer .footer-deco {
    right: clamp(0.5rem, 3vw, 3rem);
    bottom: clamp(1.25rem, 3vw, 2.8rem);
    width: clamp(220px, 20vw, 310px);
    opacity: 0.74;
}

.footer-deco__svg { display: block; overflow: visible; }

.footer-deco__ring,
.footer-deco__pulse,
.footer-deco__core,
.footer-deco__spark {
    transform-box: view-box;
    transform-origin: 210px 210px;
}

.footer-deco__glow { animation: footer-glow 5s ease-in-out infinite; }
.footer-deco__ring { fill: none; }
.footer-deco__ring--outer { stroke: rgba(94, 234, 212, 0.2); stroke-width: 1; stroke-dasharray: 2 12; animation: footer-orbit-clockwise 44s linear infinite; }
.footer-deco__ring--accent { stroke: rgba(94, 234, 212, 0.72); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 1 7; animation: footer-orbit-counterclockwise 22s linear infinite; }
.footer-deco__pulse { fill: none; stroke: rgba(45, 212, 191, 0.24); stroke-width: 1; animation: footer-core-pulse 4.8s ease-in-out infinite; }
.footer-deco__core { animation: footer-core-pulse 4.8s ease-in-out infinite; }
.footer-deco__core circle { fill: rgba(45, 212, 191, 0.08); stroke: rgba(94, 234, 212, 0.58); stroke-width: 1.25; }

.footer-deco__core path {
    fill: #5eead4;
    filter: drop-shadow(0 0 8px rgba(45, 212, 191, 0.7));
}

.footer-deco__spark { fill: #5eead4; opacity: 0.72; }
.footer-deco__spark--one { animation: footer-spark 4s ease-in-out infinite; }
.footer-deco__spark--two { animation: footer-spark 5.5s ease-in-out -1.8s infinite; }
.footer-deco__spark--three { animation: footer-spark 4.6s ease-in-out -3s infinite; }

@keyframes footer-orbit-clockwise {
    to { transform: rotate(360deg); }
}

@keyframes footer-orbit-counterclockwise {
    to { transform: rotate(-360deg); }
}

@keyframes footer-core-pulse {
    0%, 100% { transform: scale(1); opacity: 0.72; }
    50% { transform: scale(1.045); opacity: 1; }
}

@keyframes footer-glow {
    0%, 100% { opacity: 0.38; transform: scale(.92); transform-origin: center; }
    50% { opacity: 0.8; transform: scale(1.08); transform-origin: center; }
}

@keyframes footer-spark {
    0%, 100% { opacity: 0.22; transform: scale(.7); }
    50% { opacity: 1; transform: scale(1.25); }
}

.site-footer__grid {
    grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 0.9fr));
    gap: clamp(1.5rem, 3.5vw, 3rem);
}

.site-footer__grid .footer-col { min-width: 0; align-content: start; }

@media (max-width: 1024px) {
    .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
    .site-footer .footer-deco {
        right: -1rem;
        bottom: 1.3rem;
        width: 180px;
        opacity: 0.46;
    }
}

@media (max-width: 560px) {
    .site-footer__grid { grid-template-columns: minmax(0, 1fr); }
    .footer-col--brand { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
    .footer-deco__ring,
    .footer-deco__core,
    .footer-deco__pulse,
    .footer-deco__glow,
    .footer-deco__spark { animation: none; }
}

/* ─── Contact orb SVG — teal ─────────────────────────────── */
.ct-left__orb svg * {
    stroke: var(--t500);
}

/* ============================================================
   All primary buttons — green → teal gradient
   ============================================================ */

/* ── Головна кнопка .button ───────────────────────────────── */
.button {
    background: linear-gradient(135deg, var(--g600) 0%, var(--t500) 100%);
    box-shadow:
        0 8px 28px rgba(20, 184, 166, 0.28),
        0 2px 8px rgba(21, 128, 61, 0.16);
}
.button:hover {
    background: linear-gradient(135deg, var(--g500) 0%, var(--t400) 100%);
    box-shadow:
        0 14px 40px rgba(20, 184, 166, 0.4),
        0 4px 12px rgba(45, 212, 191, 0.2);
}

/* ── Footer CTA кнопка ────────────────────────────────────── */
.footer-top__btn {
    background: linear-gradient(135deg, var(--g600) 0%, var(--t500) 100%);
    box-shadow: 0 4px 18px rgba(20, 184, 166, 0.38);
}
.footer-top__btn:hover {
    background: linear-gradient(135deg, var(--g500) 0%, var(--t400) 100%);
    box-shadow: 0 8px 26px rgba(45, 212, 191, 0.5);
}

/* ── Кнопка "Зателефонувати" в контактах ─────────────────── */
.ct-call {
    background: linear-gradient(135deg, var(--g600) 0%, var(--t500) 100%);
    box-shadow: 0 4px 22px rgba(20, 184, 166, 0.38);
}
.ct-call:hover {
    background: linear-gradient(135deg, var(--g500) 0%, var(--t400) 100%);
    box-shadow: 0 10px 32px rgba(45, 212, 191, 0.52);
}

/* ── Hero ghost button — прозора з білою рамкою ──────────── */
.hero-section .button--ghost {
    background: transparent;
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, 0.38);
    box-shadow: none;
}
.hero-section .button--ghost:hover {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.65);
    color: #fff;
    box-shadow: 0 4px 20px rgba(255, 255, 255, 0.08);
    transform: translateY(-2px);
}

/* ============================================================
   WooCommerce storefront — Minado
   ============================================================ */

.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.site-header__cart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-width: 44px;
    min-height: 42px;
    padding: 0.42rem 0.7rem;
    border: 1.5px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.88rem;
    font-weight: 600;
    transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}

.site-header__cart:hover {
    border-color: var(--t400);
    background: rgba(45, 212, 191, 0.08);
    color: var(--t300);
}

/* The icon and the counter carry the meaning; the label only costs width. */
.site-header__cart-text { display: none; }

.site-header__cart-count {
    display: grid;
    place-items: center;
    min-width: 1.3rem;
    height: 1.3rem;
    padding: 0 0.28rem;
    border-radius: 999px;
    background: var(--g500);
    color: var(--dark-900);
    font-size: 0.7rem;
    font-weight: 800;
}

.shop-page,
.woocommerce-cart .site-main,
.woocommerce-checkout .site-main,
.woocommerce-account .site-main {
    padding: clamp(2.5rem, 5vw, 5.5rem) 0 clamp(4rem, 7vw, 7rem);
    background: linear-gradient(180deg, var(--g50) 0, #fff 24rem);
}

.woocommerce-breadcrumb {
    margin: 0 0 1.25rem;
    color: var(--color-text-3);
    font-size: 0.84rem;
}

.woocommerce-breadcrumb a { color: var(--g700); }

/* A full-bleed dark band, flush under the site header so the two read as one
   masthead. It sits outside .container; its inner wrapper carries that width. */
.shop-page__header {
    position: relative;
    margin-bottom: clamp(1.5rem, 3vw, 2.3rem);
    color: #fff;
}

.shop-page__header-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 38rem);
    align-items: center;
    gap: 0.2rem clamp(1.5rem, 4vw, 3rem);
    padding: clamp(1.3rem, 2.6vw, 1.9rem) 0 clamp(1.4rem, 2.8vw, 2rem);
}

.section-eyebrow {
    display: block;
    margin-bottom: 0.65rem;
    color: var(--g700);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.shop-page__header h1 {
    max-width: 22ch;
    color: #fff;
    font-size: clamp(1.65rem, 2.8vw, 2.35rem);
    letter-spacing: -0.035em;
}

.shop-page__description {
    max-width: 64ch;
    margin-top: 0.5rem;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.88rem;
    line-height: 1.55;
}

.shop-page__description p { margin: 0; color: inherit; }

.shop-search {
    display: flex;
    width: min(100%, 38rem);
    min-width: 280px;
    border: 1px solid var(--color-border);
    border-radius: var(--r-sm);
    background: #fff;
    box-shadow: var(--sh-xs);
}

.shop-search input {
    width: 100%;
    min-width: 0;
    padding: 0.78rem 0.9rem;
    border: 0;
    outline: 0;
    color: var(--color-text);
}

.shop-search button {
    flex: 0 0 auto;
    padding: 0.78rem 1rem;
    background: var(--g700);
    color: #fff;
    font-weight: 700;
}

.shop-categories {
    display: flex;
    gap: 0.7rem;
    margin-bottom: 2.5rem;
    padding-bottom: 0.3rem;
    overflow-x: auto;
    scrollbar-width: thin;
}

/* Each category carries a picture — its own image, or the first product's —
   so the row reads as a shelf rather than a strip of text pills. */
.shop-category {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    flex: 0 0 auto;
    padding: 0.45rem 1rem 0.45rem 0.45rem;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: #fff;
    color: var(--color-text-2);
    font-size: 0.86rem;
    font-weight: 600;
    transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}

/* The tint sweeps in from the left on hover instead of the whole chip
   swapping colour, which kept nudging the row's contrast around. */
.shop-category::before {
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, var(--g50), rgba(240, 253, 244, 0));
    content: '';
    opacity: 0;
    transition: opacity 0.22s ease;
}

.shop-category > * { position: relative; z-index: 1; }

.shop-category__thumb {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 2.2rem;
    height: 2.2rem;
    overflow: hidden;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--g50), #e6f6ec);
    box-shadow: inset 0 0 0 1px rgba(43, 112, 67, 0.1);
}

.shop-category__thumb img {
    width: 100%;
    height: 100%;
    padding: 0.22rem;
    object-fit: contain;
    mix-blend-mode: multiply;
}

/* No picture at hand: a small sun keeps the chip from looking broken. */
.shop-category__thumb:empty::before {
    color: var(--g600);
    content: '\2600';
    font-size: 0.95rem;
}

.shop-category__count {
    display: grid;
    place-items: center;
    min-width: 1.35rem;
    height: 1.35rem;
    border-radius: 99px;
    background: var(--g100);
    color: var(--g800);
    font-size: 0.68rem;
    font-weight: 700;
    transition: background 0.22s ease, color 0.22s ease;
}

.shop-category:hover { color: var(--g800); }
.shop-category:hover::before { opacity: 1; }

.shop-category:hover .shop-category__count {
    background: linear-gradient(135deg, var(--g600), var(--t500));
    color: #fff;
}

.shop-results__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.2rem;
    color: var(--color-text-3);
    font-size: 0.85rem;
}

.shop-results .woocommerce-ordering { margin: 0; }

.shop-results .orderby {
    padding: 0.62rem 2.1rem 0.62rem 0.78rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: #fff;
    color: var(--color-text-2);
    font: inherit;
    font-size: 0.82rem;
}

.shop-results ul.products,
.related ul.products,
.up-sells ul.products {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.shop-results ul.products::before,
.shop-results ul.products::after { display: none; }

.shop-results ul.products li.product,
.related ul.products li.product,
.up-sells ul.products li.product {
    float: none;
    width: auto;
    margin: 0;
}

/* Positioned so that the card contains its own absolutely placed children —
   `.screen-reader-text` among them. Left uncontained, that span resolves
   against the page: inside a horizontal rail its static position can land far
   to the right of the viewport, and the whole document grows a sideways
   scrollbar to reach a hidden pixel. */
.product-card {
    position: relative;
    display: flex;
    min-width: 0;
    flex-direction: column;
    border: 1px solid var(--color-border);
    border-radius: var(--r-md);
    background: #fff;
    box-shadow: var(--sh-xs);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.product-card:hover {
    transform: translateY(-3px);
    border-color: var(--t400);
    box-shadow: 0 16px 34px rgba(23, 77, 42, 0.11);
}

.product-card__image {
    position: relative;
    display: grid;
    aspect-ratio: 1 / 0.82;
    place-items: center;
    padding: 1rem;
    background: linear-gradient(145deg, var(--g50), #fff);
    overflow: hidden;
}

.product-card__image img {
    width: auto;
    height: auto;
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
}

.product-card__badge {
    position: absolute;
    z-index: 2;
    top: 0.68rem;
    right: 0.68rem;
    padding: 0.28rem 0.52rem;
    border-radius: 99px;
    background: var(--g700);
    color: #fff;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.product-card__badge--sale { background: linear-gradient(135deg, #b91c1c, #dc2626); }
.product-card__badge--order { background: var(--color-text-3); }

.product-card__body {
    display: flex;
    height: 100%;
    min-width: 0;
    flex-direction: column;
    padding: 1rem;
}

.product-card__brand {
    margin-bottom: 0.32rem;
    color: var(--g700);
    font-size: 0.69rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.product-card .woocommerce-loop-product__title {
    margin: 0;
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 0.96rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.35;
}

.product-card__sku {
    margin-top: 0.45rem;
    color: var(--color-text-3);
    font-size: 0.72rem;
}

.product-card__footer {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 0.6rem;
    margin-top: auto;
    padding-top: 1rem;
}

.product-card__price { min-width: 0; color: var(--color-text); font-size: 1rem; font-weight: 800; }
.product-card__price del { color: var(--color-text-3); font-size: 0.74rem; font-weight: 500; }
.product-card__price ins { color: var(--color-warning); text-decoration: none; }

.product-card a.button,
.product-card .added_to_cart {
    flex: 0 0 auto;
    padding: 0.58rem 0.65rem;
    border-radius: 8px;
    background: var(--g700);
    color: #fff;
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1.2;
}

.product-card .added_to_cart { display: none; }
.product-card a.button:hover { background: var(--g800); }

.woocommerce nav.woocommerce-pagination { margin-top: 2.5rem; text-align: center; }
.woocommerce nav.woocommerce-pagination ul { display: inline-flex; gap: 0.35rem; border: 0; }
.woocommerce nav.woocommerce-pagination ul li { border: 0; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
    min-width: 2.25rem;
    padding: 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    color: var(--color-text-2);
}
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover { background: var(--g700); border-color: var(--g700); color: #fff; }

.shop-empty {
    padding: 3rem 1.5rem;
    border: 1px dashed var(--color-border-2);
    border-radius: var(--r-md);
    background: #fff;
    text-align: center;
}
.shop-empty p { margin: 0.7rem auto 1.3rem; color: var(--color-text-3); }

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    margin: 0 0 1.5rem;
    padding: 1rem 1.15rem 1rem 3.1rem;
    border-top: 0;
    border-radius: var(--r-sm);
    background: var(--g50);
    color: var(--color-text-2);
    box-shadow: var(--sh-xs);
}
.woocommerce-message::before, .woocommerce-info::before { color: var(--g700); }
.woocommerce-error { background: #fff3f2; color: #8c2c25; }

/* ── Notice popup ─────────────────────────────────────────── */

body.has-modal { overflow: hidden; }

.wc-popup {
    position: fixed;
    inset: 0;
    z-index: 140;
    display: grid;
    place-items: center;
    padding: 1.25rem;
    background: rgba(4, 26, 13, 0.55);
    backdrop-filter: blur(5px);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.wc-popup.is-open { opacity: 1; }

.wc-popup__panel {
    position: relative;
    width: min(420px, 100%);
    padding: 2.1rem 1.6rem 1.5rem;
    overflow: hidden;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 30px 70px rgba(4, 26, 13, 0.35);
    text-align: center;
    transform: translateY(12px) scale(0.97);
    transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}

.wc-popup.is-open .wc-popup__panel { transform: none; }

.wc-popup__panel::after {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--g800), var(--g500) 55%, var(--t400));
    content: '';
}

.wc-popup__panel::before {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin: 0 auto 0.95rem;
    border-radius: 50%;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
    content: '✓';
}

.wc-popup--success .wc-popup__panel::before { background: #e8f7ee; color: var(--g700); box-shadow: 0 0 0 9px rgba(22, 163, 74, 0.06); }
.wc-popup--error .wc-popup__panel::before { background: #fee2e2; color: #b91c1c; box-shadow: 0 0 0 9px rgba(185, 28, 28, 0.06); content: '!'; }

.wc-popup__close {
    position: absolute;
    top: 0.6rem;
    right: 0.7rem;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: none;
    color: var(--color-text-3);
    font-size: 1.35rem;
    line-height: 1;
    transition: background 0.2s ease, color 0.2s ease;
}

.wc-popup__close:hover { background: var(--g50); color: var(--color-text); }

/* ── Product consultation popup ───────────────────────────── */

.product-consultation-modal {
    position: fixed;
    inset: 0;
    z-index: 150;
    display: grid;
    place-items: center;
    padding: 1.25rem;
    background: rgba(4, 26, 13, 0.72);
    backdrop-filter: blur(6px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
}

.product-consultation-modal.is-open {
    opacity: 1;
    pointer-events: auto;
}

.product-consultation-modal__dialog {
    position: relative;
    width: min(440px, 100%);
    transform: translateY(12px) scale(0.97);
    transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

.product-consultation-modal.is-open .product-consultation-modal__dialog { transform: none; }

.product-consultation-modal__close {
    position: absolute;
    z-index: 1;
    top: 0.75rem;
    right: 0.75rem;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 1.45rem;
    line-height: 1;
}

.product-consultation-modal__close:hover { background: rgba(255, 255, 255, 0.17); }

.lead-form--compact {
    padding: clamp(1.5rem, 5vw, 2.25rem);
    border-color: rgba(82, 208, 126, 0.28);
    background:
        radial-gradient(circle at 92% 4%, rgba(45, 212, 191, 0.18), transparent 38%),
        linear-gradient(145deg, rgba(12, 44, 27, 0.99), rgba(5, 25, 15, 0.99));
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.04) inset,
        0 28px 72px rgba(0, 0, 0, 0.48);
}

.lead-form--compact .lead-form__header { padding-right: 2.5rem; }

.lead-form--compact .lead-form__header p { color: rgba(255, 255, 255, 0.68); }

.lead-form--compact input {
    min-height: 52px;
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(103, 232, 149, 0.3) !important;
}

/* Keep the submit button identical to the site's existing lead forms.
   WooCommerce has a more specific button selector on product pages. */
.product-consultation-modal .lead-form .button {
    border-radius: var(--r-md);
    background: linear-gradient(135deg, var(--g600) 0%, var(--t500) 100%);
    color: #fff;
    font-weight: 700;
}

.product-consultation-modal .lead-form .button:hover {
    background: linear-gradient(135deg, var(--g500) 0%, var(--t400) 100%);
}

@media (prefers-reduced-motion: reduce) {
    .product-consultation-modal,
    .product-consultation-modal__dialog { transition: none; }
}

.wc-popup__body { display: grid; gap: 0.75rem; }

/* Strip the inline-notice look; the dialog already carries the framing. */
.wc-popup__body .woocommerce-message,
.wc-popup__body .woocommerce-error {
    display: grid;
    gap: 0.9rem;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    color: var(--color-text);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.5;
}

.wc-popup__body .woocommerce-message::before,
.wc-popup__body .woocommerce-error::before { display: none; }

/* Both buttons share one geometry; only the fill differs.
   `.woocommerce button.button` sits lower in this file and outweighs a single
   class, so these need one extra level to win. */
.wc-popup .wc-popup__panel .button {
    justify-content: center;
    width: 100%;
    min-height: 48px;
    padding: 0.72rem 1.2rem;
    border-radius: 999px;
    font-size: 0.88rem;
    font-weight: 700;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Filled — the step most people want next. The order keeps it under the
   message, wherever WooCommerce prints the link inside the notice. */
.wc-popup .wc-popup__panel .wc-forward {
    order: 2;
    border: 1.5px solid transparent;
    background: linear-gradient(135deg, var(--g600), var(--t500));
    color: #fff;
    box-shadow: 0 8px 20px rgba(20, 184, 166, 0.26);
}

.wc-popup .wc-popup__panel .wc-forward:hover {
    background: linear-gradient(135deg, var(--g500), var(--t400));
    box-shadow: 0 12px 26px rgba(20, 184, 166, 0.32);
}

/* Transparent twin. */
.wc-popup .wc-popup__panel .wc-popup__continue {
    margin-top: 0.5rem;
    border: 1.5px solid var(--color-border-2);
    background: transparent;
    color: var(--color-text-2);
    box-shadow: none;
    transform: none;
}

.wc-popup .wc-popup__panel .wc-popup__continue:hover {
    border-color: var(--t600);
    background: var(--t50);
    color: var(--t600);
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .wc-popup,
    .wc-popup__panel { transition: none; }
    .wc-popup__panel { transform: none; }
}

.woocommerce div.product .stock { color: var(--g700); font-weight: 700; }
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce button.button {
    border-radius: 8px;
    background: var(--g700);
    color: #fff;
    font-weight: 700;
}
.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button:hover { background: var(--g800); color: #fff; }

/* The header CTA opens a popup outside the home page. Keep its appearance
   identical to the link on the home page when WooCommerce styles buttons. */
.site-header .site-header__consultation.button {
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--g600) 0%, var(--t500) 100%);
    color: #fff;
    font-weight: 600;
    box-shadow:
        0 8px 28px rgba(20, 184, 166, 0.28),
        0 2px 8px rgba(21, 128, 61, 0.16);
}

.site-header .site-header__consultation.button:hover {
    background: linear-gradient(135deg, var(--g500) 0%, var(--t400) 100%);
    color: #fff;
    box-shadow:
        0 14px 40px rgba(20, 184, 166, 0.4),
        0 4px 12px rgba(45, 212, 191, 0.2);
}

.woocommerce table.shop_attributes { border-top: 1px solid var(--color-border); }
.woocommerce table.shop_attributes th,
.woocommerce table.shop_attributes td { border-bottom: 1px solid var(--color-border); }

.woocommerce-cart-form,
.woocommerce-checkout-review-order,
.woocommerce form.checkout,
.woocommerce-account .woocommerce {
    width: min(var(--container), calc(100% - 2.5rem));
    margin-inline: auto;
}
.woocommerce table.shop_table { border: 1px solid var(--color-border); border-radius: var(--r-md); border-collapse: separate; border-spacing: 0; background: #fff; overflow: hidden; }
.woocommerce table.shop_table td,
.woocommerce table.shop_table th { border-color: var(--color-border); }
.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce-checkout #payment,
.woocommerce-checkout-review-order-table { border: 1px solid var(--color-border); border-radius: var(--r-md); background: #fff; }
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button { background: var(--g700); }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.select2-container--default .select2-selection--single { min-height: 2.8rem; border: 1px solid var(--color-border); border-radius: 8px; }

@media (max-width: 900px) {
    .shop-page__header-inner { grid-template-columns: minmax(0, 1fr); row-gap: 1.15rem; }
    .shop-search { width: 100%; }
    .shop-results ul.products, .related ul.products, .up-sells ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
    .woocommerce-cart .site-main, .woocommerce-checkout .site-main, .woocommerce-account .site-main { padding-top: 2rem; }
    .shop-results__toolbar { align-items: start; flex-direction: column; }
    .shop-results ul.products, .related ul.products, .up-sells ul.products { gap: 0.75rem; }
    .product-card__image { padding: 0.6rem; }
    .product-card__body { padding: 0.75rem; }
    .product-card .woocommerce-loop-product__title { font-size: 0.83rem; }
    .product-card__footer { align-items: stretch; flex-direction: column; gap: 0.65rem; }
    .product-card a.button { width: 100%; text-align: center; }
    .woocommerce div.product { width: min(var(--container), calc(100% - 2rem)); }
    .woocommerce div.product form.cart { align-items: stretch; flex-direction: column; }
}

@media (max-width: 420px) {
    .container,
    .woocommerce div.product,
    .woocommerce-cart-form,
    .woocommerce-checkout-review-order,
    .woocommerce form.checkout,
    .woocommerce-account .woocommerce { width: min(var(--container), calc(100% - 1.25rem)); }
    .shop-results ul.products,
    .related ul.products,
    .up-sells ul.products { grid-template-columns: 1fr; }
}

.shop-page,
.woocommerce-cart .site-main,
.woocommerce-checkout .site-main,
.woocommerce-account .site-main {
    background:
        radial-gradient(circle at 92% 5%, rgba(63, 185, 116, 0.13), transparent 24rem),
        linear-gradient(180deg, #eff9f2 0, #fff 32rem);
}

/* Painted as gradients rather than pseudo-elements: the band must not clip its
   own overflow, or the search suggestions would be cut off inside it. */
.shop-page__header {
    background:
        radial-gradient(34rem 20rem at 76% -40%, rgba(45, 212, 191, 0.22), transparent 70%),
        radial-gradient(26rem 18rem at 4% 130%, rgba(34, 197, 94, 0.18), transparent 66%),
        repeating-radial-gradient(circle at 84% 46%, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 2.5rem),
        linear-gradient(112deg, #0b1c13 0%, #14532d 58%, #0e3a21 100%);
}

/* Parts the band from the light page below it. */
.shop-page__header::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--g800), var(--g500) 48%, var(--t400));
    content: '';
}

.shop-page__header .section-eyebrow { color: var(--t400); }

.shop-page__header .woocommerce-breadcrumb {
    grid-column: 1 / -1;
    margin: 0 0 0.85rem;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.78rem;
}

.shop-page__header .woocommerce-breadcrumb span + span::before { color: rgba(255, 255, 255, 0.28); }
.shop-page__header .woocommerce-breadcrumb a { color: rgba(255, 255, 255, 0.72); }
.shop-page__header .woocommerce-breadcrumb a:hover { color: var(--t400); }

.shop-page__header .shop-search {
    width: 100%;
    border-color: rgba(255, 255, 255, 0.2);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.07);
    box-shadow: none;
}

.shop-page__header .shop-search:focus-within {
    border-color: var(--t400);
    box-shadow: 0 0 0 4px rgba(45, 212, 191, 0.16);
}

.shop-page__header .shop-search input {
    background: none;
    color: #fff;
}

.shop-page__header .shop-search input::placeholder { color: rgba(255, 255, 255, 0.5); }

.shop-search button { background: linear-gradient(135deg, var(--g600), var(--t500)); }

.shop-categories {
    gap: 0.55rem;
    margin-bottom: 2rem;
    padding: 0.15rem 0 0.35rem;
}

.shop-category {
    border-color: rgba(43, 112, 67, 0.17);
    box-shadow: 0 4px 12px rgba(24, 86, 45, 0.04);
}

.shop-category:hover { border-color: var(--t400); transform: translateY(-1px); box-shadow: 0 8px 18px rgba(20, 184, 166, 0.16); }
.shop-results .orderby { border-radius: 10px; }

.shop-results ul.products,
.related ul.products,
.up-sells ul.products { gap: 1.4rem; }

.product-card {
    border-color: rgba(44, 112, 67, 0.16);
    border-radius: 18px;
    box-shadow: 0 10px 24px rgba(23, 77, 42, 0.07);
}

.product-card__image {
    aspect-ratio: 1 / 0.9;
    padding: 0.8rem 1rem;
    background:
        radial-gradient(circle at 50% 90%, rgba(56, 179, 98, 0.11), transparent 48%),
        linear-gradient(145deg, #f5fbf6, #fff);
}

.product-card__image img {
    transition: transform 0.35s ease;
    mix-blend-mode: multiply;
}

.product-card:hover .product-card__image img { transform: scale(1.045); }

.product-card__body {
    height: auto;
    flex: 1;
    padding: 1.1rem;
}

.product-card .woocommerce-loop-product__title { font-size: 1rem; line-height: 1.4; }
.product-card__footer { padding-top: 1.1rem; }
.product-card__price { color: #102b1a; font-size: 1.08rem; }

.product-card a.button {
    padding: 0.64rem 0.9rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--g600), var(--t500));
    box-shadow: 0 7px 16px rgba(20, 184, 166, 0.24);
}

@media (max-width: 600px) {
    .shop-page__header h1 { font-size: 1.6rem; }
    .shop-search { min-width: 0; }
    .product-card__image { aspect-ratio: 1 / 0.86; padding: 0.65rem; }
}

/* The dark band opens the page, so the section itself starts flush and the
   listing under it carries the spacing instead. */
.shop-page { padding-top: 0; }

/* WooCommerce may add loading/added classes to this link; keep its visual state stable. */
.product-card a.button,
.product-card a.button:hover,
.product-card a.button:focus,
.product-card a.button:active,
.product-card a.button.added,
.product-card a.button.loading {
    border-color: transparent;
    background: linear-gradient(135deg, var(--g600), var(--t500));
    color: #fff;
    text-decoration: none;
}

.product-card a.button:hover,
.product-card a.button:focus-visible {
    box-shadow: 0 10px 20px rgba(27, 134, 69, 0.28);
    filter: brightness(1.08);
    outline: 0;
}

.product-card a.button.loading::after,
.product-card a.button.added::after { color: #fff; }

/* Catalog sort select */
.shop-results .orderby {
    min-height: 44px;
    padding: 0.68rem 2.9rem 0.68rem 0.92rem;
    border: 1px solid rgba(43, 112, 67, 0.2);
    border-radius: 12px;
    appearance: none;
    -webkit-appearance: none;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23235a38' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-position: right 0.9rem center;
    background-repeat: no-repeat;
    background-size: 16px;
    box-shadow: 0 5px 14px rgba(27, 89, 49, 0.06);
    cursor: pointer;
    outline: 0;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.shop-results .orderby:hover {
    border-color: rgba(34, 139, 75, 0.48);
    background-color: #fcfffc;
}

.shop-results .orderby:focus,
.shop-results .orderby:focus-visible {
    border-color: var(--g600);
    outline: 0;
    box-shadow: 0 0 0 4px rgba(39, 166, 86, 0.14), 0 7px 18px rgba(27, 89, 49, 0.1);
}

/* ── Search suggestions ───────────────────────────────────── */

/* No overflow clipping here: the suggestions panel has to escape the field.
   The header gives its children z-index 1, so the field needs to sit above
   its own siblings for the panel to clear them. */
.shop-search { position: relative; z-index: 5; }

.shop-search input { border-radius: 12px 0 0 12px; }
.shop-search button { border-radius: 0 12px 12px 0; }

.shop-search__suggest {
    position: absolute;
    top: calc(100% + 0.45rem);
    right: 0;
    left: auto;
    width: 100%;
    max-width: calc(100vw - 2rem);
    z-index: 60;
    display: none;
    max-height: 22rem;
    overflow-y: auto;
    padding: 0.3rem;
    border: 1px solid rgba(43, 112, 67, 0.15);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(23, 77, 42, 0.14);
    scrollbar-width: thin;
}

.shop-search__suggest.is-open { display: block; }

.shop-search__item {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) minmax(4.5rem, max-content);
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.5rem;
    border-radius: 10px;
    transition: background 0.15s ease;
}

.shop-search__item:hover { background: var(--t50); }

.shop-search__item img {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: var(--g50);
    object-fit: contain;
    mix-blend-mode: multiply;
}

.shop-search__item span { display: grid; min-width: 0; }

.shop-search__item b {
    overflow: hidden;
    color: var(--color-text);
    font-size: 0.82rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shop-search__sku { color: var(--color-text-3); font-size: 0.68rem; }

/* Plain text with a non-breaking space: nothing here can wrap. */
.shop-search__item em {
    color: var(--g800);
    font-size: 0.82rem;
    font-style: normal;
    font-weight: 800;
    white-space: nowrap;
}

.shop-search__empty {
    padding: 0.9rem;
    color: var(--color-text-3);
    font-size: 0.8rem;
    text-align: center;
}

/* ── Live results: loading state and pagination ───────────── */

.shop-results { position: relative; }

/* A light veil over the cards keeps the page height and the layout steady
   while the next set is fetched. */
.shop-results__list { position: relative; }

.shop-results.is-loading .shop-results__list { pointer-events: none; }

.shop-results.is-loading .shop-results__list::after {
    position: absolute;
    inset: -0.6rem;
    z-index: 2;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(1.5px);
    -webkit-backdrop-filter: blur(1.5px);
    content: '';
}

.shop-results.is-loading .shop-results__list::before {
    position: absolute;
    top: 5.5rem;
    left: 50%;
    z-index: 3;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0deg, var(--g600) 140deg, var(--t400) 300deg, transparent 360deg);
    content: '';
    mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
    animation: minado-spin 0.75s linear infinite;
    transform: translateX(-50%);
}

@keyframes minado-spin { to { transform: translateX(-50%) rotate(1turn); } }

@media (prefers-reduced-motion: reduce) {
    .shop-results.is-loading .shop-results__list::before { animation-duration: 2.4s; }
}

.shop-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 1.75rem;
    justify-content: center;
}

.shop-pagination__page {
    min-width: 40px;
    height: 40px;
    padding: 0 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: #fff;
    color: var(--color-text-2);
    font-size: 0.84rem;
    font-weight: 700;
    transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.shop-pagination__page:hover { border-color: var(--t400); background: var(--t50); color: var(--t600); }

.shop-pagination__page.is-current {
    border-color: transparent;
    background: linear-gradient(135deg, var(--g600), var(--t500));
    color: #fff;
}

.shop-results__count { color: var(--color-text-3); font-size: 0.82rem; font-weight: 600; }

/* ============================================================
   Catalogue filters
   ============================================================ */

.shop-layout {
    display: grid;
    grid-template-columns: 262px minmax(0, 1fr);
    gap: clamp(1.25rem, 2.6vw, 2.5rem);
    align-items: start;
}

/* The panel scrolls on its own so a long attribute list never pushes the
   product grid down. */
.shop-filters {
    position: sticky;
    top: 88px;
    max-height: calc(100vh - 108px);
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid rgba(43, 112, 67, 0.15);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(24, 86, 45, 0.07);
    scrollbar-width: thin;
}

.shop-filters form {
    display: grid;
    padding: 0 0.9rem 0.9rem;
}

/* Heading and the apply button stay reachable while the list scrolls. */
.shop-filters__heading {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0 -0.9rem 0.2rem;
    padding: 0.85rem 0.9rem 0.7rem;
    border-bottom: 1px solid rgba(43, 112, 67, 0.12);
    background: #fff;
}

.shop-filters h2 {
    max-width: none;
    margin: 0;
    font-family: var(--font-body);
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.shop-filters__heading a {
    padding: 0.26rem 0.62rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    color: var(--color-text-3);
    font-size: 0.7rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.shop-filters__heading a:hover {
    border-color: var(--t600);
    background: var(--t50);
    color: var(--t600);
}

.shop-filters__group-title {
    margin: 0.8rem 0 0.1rem;
    color: var(--color-text-3);
    font-size: 0.63rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

/* ── Accordions ───────────────────────────────────────────── */

.shop-filter-accordion {
    margin: 0;
    border-bottom: 1px solid rgba(43, 112, 67, 0.1);
}

.shop-filter-accordion:last-of-type { border-bottom: 0; }

.shop-filter-accordion summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 40px;
    color: var(--color-text);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: color 0.18s ease;
}

.shop-filter-accordion summary::-webkit-details-marker { display: none; }
.shop-filter-accordion summary:hover { color: var(--t600); }

.shop-filter-accordion summary::after {
    width: 7px;
    height: 7px;
    margin-right: 0.2rem;
    border-right: 1.8px solid var(--t600);
    border-bottom: 1.8px solid var(--t600);
    content: '';
    transform: rotate(45deg) translateY(-2px);
    transition: transform 0.2s ease;
}

.shop-filter-accordion[open] summary::after { transform: rotate(225deg) translate(-1px, -2px); }

.shop-filter-accordion fieldset {
    display: grid;
    margin: 0;
    padding: 0 0 0.7rem;
    border: 0;
}

/* ── Options ──────────────────────────────────────────────── */

.shop-filters__options {
    display: grid;
    gap: 0.1rem;
    max-height: 15rem;
    overflow-y: auto;
    scrollbar-width: thin;
}

.shop-filters__options label {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 0.5rem;
    min-height: 32px;
    padding: 0.22rem 0.42rem;
    border-radius: 9px;
    color: var(--color-text-2);
    font-size: 0.79rem;
    line-height: 1.25;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
}

.shop-filters__options label:hover { background: var(--t50); color: var(--color-text); }

.shop-filters__options label:has(input:checked) {
    background: rgba(45, 212, 191, 0.14);
    color: var(--color-text);
    font-weight: 700;
}

/* Native controls cannot take the brand colours, so draw them here. */
.shop-filters__options input {
    width: 18px;
    height: 18px;
    margin: 0;
    border: 1.5px solid var(--color-border-2);
    border-radius: 6px;
    background: #fff;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease;
}

.shop-filters__options input[type='radio'] { border-radius: 50%; }

.shop-filters__options input:checked {
    border-color: var(--t600);
    background: var(--t600) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E") center / 11px no-repeat;
}

.shop-filters__options input[type='radio']:checked {
    background-image: none;
    box-shadow: inset 0 0 0 3.5px #fff;
}

.shop-filters__options small {
    color: var(--color-text-3);
    font-size: 0.68rem;
    font-weight: 700;
}

/* ── Price range ──────────────────────────────────────────── */

.shop-filters__range {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.42rem;
    padding-bottom: 0.15rem;
}

.shop-filters__range input {
    width: 100%;
    min-width: 0;
    min-height: 38px;
    padding: 0.5rem 0.6rem;
    border: 1.5px solid var(--color-border);
    border-radius: 10px;
    color: var(--color-text);
    font-size: 0.8rem;
    font-weight: 600;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.shop-filters__range input:focus {
    border-color: var(--t600);
    outline: none;
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.14);
}

/* Two overlaid ranges give a min/max slider without a library. Only the
   thumbs take pointer events, so the lower one stays reachable. */
.shop-filters__slider {
    position: relative;
    height: 26px;
    margin-top: 0.5rem;
}

.shop-filters__track {
    position: absolute;
    top: 50%;
    right: 8px;
    left: 8px;
    height: 4px;
    border-radius: 999px;
    background: rgba(43, 112, 67, 0.15);
    transform: translateY(-50%);
}

.shop-filters__track span {
    position: absolute;
    top: 0;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--g600), var(--t500));
}

.shop-filters__slider input[type='range'] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 26px;
    margin: 0;
    background: none;
    appearance: none;
    -webkit-appearance: none;
    pointer-events: none;
}

.shop-filters__slider input[type='range']:focus { outline: none; }
.shop-filters__slider input[type='range']::-webkit-slider-runnable-track { background: none; }
.shop-filters__slider input[type='range']::-moz-range-track { background: none; }

.shop-filters__slider input[type='range']::-webkit-slider-thumb {
    width: 16px;
    height: 16px;
    border: 2px solid var(--t600);
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 6px rgba(20, 184, 166, 0.35);
    appearance: none;
    -webkit-appearance: none;
    cursor: grab;
    pointer-events: auto;
}

.shop-filters__slider input[type='range']::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border: 2px solid var(--t600);
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 6px rgba(20, 184, 166, 0.35);
    cursor: grab;
    pointer-events: auto;
}

.shop-filters__slider input[type='range']:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.28);
}

.shop-filters__bounds {
    display: flex;
    justify-content: space-between;
    margin-top: 0.3rem;
    color: var(--color-text-3);
    font-size: 0.66rem;
    font-weight: 700;
}

/* ── Apply ────────────────────────────────────────────────── */

/* `.woocommerce button.button` sits above in this file and outweighs a single
   class, so the element selector is needed to win. The white halo hides list
   rows passing behind the sticky button. */
.shop-filters button.button {
    position: sticky;
    bottom: 0.3rem;
    z-index: 2;
    justify-content: center;
    width: 100%;
    min-height: 42px;
    margin-top: 0.7rem;
    padding: 0.6rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--g600), var(--t500));
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    box-shadow: 0 8px 18px rgba(20, 184, 166, 0.24), 0 0 0 0.55rem #fff;
}

.shop-filters button.button:hover {
    background: linear-gradient(135deg, var(--g500), var(--t400));
    color: #fff;
}

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

    .shop-filters {
        position: static;
        max-height: none;
        overflow: visible;
    }

    .shop-filters__heading { position: static; }
    .shop-filters__options { max-height: none; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .shop-filters button.button { position: static; box-shadow: 0 8px 18px rgba(20, 184, 166, 0.24); }
}

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

/* Product card purchase signals and key specifications */
.product-card__signals {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.52rem;
}

.product-card__stock {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-width: 0;
    color: var(--g800);
    font-size: 0.68rem;
    font-weight: 800;
    white-space: nowrap;
}

.product-card__stock i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--g500);
    box-shadow: 0 0 0 3px rgba(63, 185, 116, 0.12);
}

.product-card__stock.is-on-order { color: var(--color-text-3); }
.product-card__stock.is-on-order i { background: var(--color-text-3); box-shadow: none; }

.product-card__type {
    overflow: hidden;
    max-width: 52%;
    color: var(--color-text-3);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-align: right;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.product-card__summary {
    display: -webkit-box;
    overflow: hidden;
    margin: 0.55rem 0 0;
    color: var(--color-text-2);
    font-size: 0.76rem;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

/* Values alone stay compact and still read clearly: "10 кВт", "380 В".
   The label is kept in title= for anyone who needs it. */
.product-card__specs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin: 0.6rem 0 0;
    padding: 0;
    list-style: none;
}

.product-card__specs li {
    max-width: 100%;
    overflow: hidden;
    padding: 0.26rem 0.55rem;
    border: 1px solid rgba(13, 148, 136, 0.24);
    border-radius: 999px;
    background: linear-gradient(135deg, #f2fbf6, #ecf9f6);
    color: var(--color-text-2);
    font-size: 0.69rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 600px) {
    .product-card__summary { font-size: 0.74rem; }
}

/* Compact product cards */
.product-card__image { aspect-ratio: 1 / 0.75; }

.product-card__image .product-card__stock {
    position: absolute;
    z-index: 2;
    top: 0.68rem;
    left: 0.68rem;
    padding: 0.34rem 0.5rem;
    border: 1px solid rgba(40, 119, 67, 0.16);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 4px 12px rgba(22, 73, 40, 0.1);
}

.product-card__body { padding: 0.9rem 1rem 1rem; }

.product-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-height: 18px;
    margin-bottom: 0.38rem;
}

.product-card__rating {
    display: inline-flex;
    align-items: center;
    gap: 0.18rem;
    color: var(--color-text-2);
    font-size: 0.7rem;
    font-weight: 800;
}

.product-card__rating b { color: #e5a11a; font-size: 0.82rem; }
.product-card__rating small { margin-left: 0.1rem; color: var(--color-text-3); font-size: 0.65rem; font-weight: 600; }

.product-card__meta .product-card__sku {
    overflow: hidden;
    margin: 0;
    color: var(--color-text-3);
    font-size: 0.65rem;
    font-weight: 700;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-card .woocommerce-loop-product__title {
    display: -webkit-box;
    overflow: hidden;
    min-height: 2.55em;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.product-card__footer { padding-top: 0.72rem; }

@media (max-width: 600px) {
    .product-card__image { aspect-ratio: 1 / 0.78; }
}

/* ============================================================
   Single product — hero panel
   ============================================================ */

.single-product .site-main {
    padding: clamp(1.5rem, 3vw, 2.75rem) 0 clamp(3rem, 5vw, 4.5rem);
    background:
        radial-gradient(circle at 86% -6%, rgba(45, 212, 191, 0.18), transparent 30rem),
        radial-gradient(circle at 2% 14%, rgba(34, 197, 94, 0.1), transparent 24rem),
        linear-gradient(180deg, #f3faf6 0, #fff 34rem);
}

/* ── Breadcrumb ───────────────────────────────────────────── */

/* Shared by the catalogue and the product page; only the product page needs
   the container width, since there the trail sits outside one. */
.woocommerce-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.2rem 0.45rem;
    margin: 0 0 0.9rem;
    color: var(--color-text-3);
    font-size: 0.74rem;
}

.woocommerce-breadcrumb span {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.woocommerce-breadcrumb span + span::before {
    color: rgba(74, 107, 88, 0.45);
    content: '/';
}

.woocommerce-breadcrumb a { transition: color 0.2s ease; }
.woocommerce-breadcrumb a:hover { color: var(--t600); }

.single-product .woocommerce-breadcrumb {
    width: min(var(--container), calc(100% - 2.5rem));
    margin: 0 auto 0.85rem;
}

/* ── One continuous panel: gallery, summary, service strip ── */

.woocommerce div.product {
    width: min(var(--container), calc(100% - 2.5rem));
    margin: 0 auto;
}

.product-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
    overflow: hidden;
    border: 1px solid rgba(43, 112, 67, 0.14);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 18px 44px rgba(23, 77, 42, 0.08);
}

/* Absolute, or the pseudo-element would claim a grid cell. */
.product-hero::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 2;
    height: 3px;
    background: linear-gradient(90deg, var(--g800), var(--g500) 55%, var(--t400));
    content: '';
}

/* ── Gallery ──────────────────────────────────────────────── */

.product-gallery {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.5rem;
    min-width: 0;
    padding: clamp(0.85rem, 1.8vw, 1.3rem);
    border-right: 1px solid rgba(43, 112, 67, 0.12);
    background:
        radial-gradient(circle at 50% 94%, rgba(45, 212, 191, 0.14), transparent 55%),
        linear-gradient(155deg, #f6fcf8, #fff 68%);
}

.product-gallery__stage {
    position: relative;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    height: clamp(250px, 30vw, 400px);
    padding: clamp(0.4rem, 1.6vw, 1.05rem);
}

/* Intrinsic size must not set the floor, or a large source overflows the panel. */
.product-gallery__image {
    width: auto;
    height: auto;
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
}

/* Pinned to the column, so a vertically centred image cannot push it down. */
.product-gallery__badges {
    position: absolute;
    top: clamp(0.85rem, 1.8vw, 1.3rem);
    right: clamp(0.85rem, 1.8vw, 1.3rem);
    left: clamp(0.85rem, 1.8vw, 1.3rem);
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.product-badge {
    padding: 0.28rem 0.55rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 0.64rem;
    font-weight: 800;
    line-height: 1.1;
}

.product-badge--sale { background: linear-gradient(135deg, #b91c1c, #dc2626); color: #fff; }
.product-badge--accent { background: linear-gradient(135deg, var(--g800), var(--t600)); color: #fff; }
.product-badge--stock { border-color: rgba(21, 128, 61, 0.22); background: #e8f7ee; color: #15803d; }
.product-badge--order { border-color: rgba(194, 98, 10, 0.22); background: #fdf3e7; color: var(--color-warning); }

.product-gallery__zoom {
    position: absolute;
    right: 0;
    bottom: 0;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(43, 112, 67, 0.16);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.88);
    color: var(--g800);
    transition: background 0.2s ease, color 0.2s ease;
}

.product-gallery__zoom:hover { background: var(--g800); color: #fff; }

.product-gallery__thumbs {
    display: flex;
    gap: 0.4rem;
    margin: 0;
    padding: 0.15rem;
    overflow-x: auto;
    list-style: none;
    scrollbar-width: none;
}

.product-gallery__thumbs::-webkit-scrollbar { display: none; }
.product-gallery__thumbs li { flex: 0 0 auto; }

.product-gallery__thumb {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    padding: 5px;
    border: 1.5px solid rgba(43, 112, 67, 0.14);
    border-radius: 11px;
    background: #fff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.product-gallery__thumb img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.product-gallery__thumb:hover { border-color: var(--t400); }
.product-gallery__thumb.is-active { border-color: var(--t600); box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.14); }

/* ── Full-size viewer ─────────────────────────────────────── */

body.has-lightbox { overflow: hidden; }

.product-lightbox {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: none;
    place-items: center;
    padding: clamp(1rem, 4vw, 3rem);
    background: rgba(4, 26, 13, 0.9);
    backdrop-filter: blur(4px);
}

.product-lightbox.is-open { display: grid; }

.product-lightbox__image {
    max-width: min(1000px, 100%);
    max-height: 86vh;
    border-radius: 16px;
    background: #fff;
    object-fit: contain;
}

.product-lightbox__close,
.product-lightbox__nav {
    position: absolute;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 1.6rem;
    line-height: 1;
    transition: background 0.2s ease;
}

.product-lightbox__close { top: 1.1rem; right: 1.1rem; }
.product-lightbox__nav--prev { top: 50%; left: 1.1rem; transform: translateY(-50%); }
.product-lightbox__nav--next { top: 50%; right: 1.1rem; transform: translateY(-50%); }
.product-lightbox__close:hover,
.product-lightbox__nav:hover { background: rgba(255, 255, 255, 0.28); }

/* ── Summary column ───────────────────────────────────────── */

.woocommerce div.product div.summary {
    float: none;
    width: auto;
    min-width: 0;
    margin: 0;
    padding: clamp(1rem, 2vw, 1.5rem);
}

.product-hero__eyebrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.55rem;
    margin-bottom: 0.55rem;
}

.product-hero__brand {
    padding: 0.26rem 0.62rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--g800), var(--t600));
    color: #fff;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.product-hero__tagline {
    color: var(--t600);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.woocommerce div.product .product_title {
    margin: 0;
    color: #102b1a;
    font-size: clamp(1.35rem, 2.1vw, 1.95rem);
    letter-spacing: -0.035em;
    line-height: 1.15;
}

.product-hero__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.7rem;
    margin-top: 0.55rem;
    color: var(--color-text-3);
    font-size: 0.72rem;
}

/* Rating holds the left; SKU and availability sit against the right edge. */
.product-hero__rating,
.product-hero__sku:first-child { margin-right: auto; }

.product-hero__rating { display: inline-flex; align-items: center; gap: 0.35rem; }
.product-hero__rating .star-rating { margin: 0; font-size: 0.8rem; }
.product-hero__rating b { color: var(--color-text); font-weight: 800; }
.product-hero__sku b { color: var(--color-text-2); font-weight: 700; }

.product-hero__stock {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 700;
}

.product-hero__stock::before {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    content: '';
}

.product-hero__stock.is-in-stock { background: #e8f7ee; color: #15803d; }
.product-hero__stock.is-on-order { background: #fdf3e7; color: var(--color-warning); }

/* ── Price ────────────────────────────────────────────────── */

.product-price {
    margin-top: 0.8rem;
    padding-top: 0.8rem;
    border-top: 1px solid rgba(43, 112, 67, 0.13);
}

.product-price__row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem 0.7rem;
}

.product-price__value {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.45rem;
    color: var(--g800);
    font-family: var(--font-display);
    font-size: clamp(1.45rem, 2.3vw, 1.95rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
}

.product-price__value del {
    order: 2;
    color: var(--color-text-3);
    font-size: 0.5em;
    font-weight: 600;
}

.product-price__value ins { background: none; text-decoration: none; }

.product-price__save {
    padding: 0.26rem 0.58rem;
    border-radius: 999px;
    background: #fee2e2;
    color: #b91c1c;
    font-size: 0.68rem;
    font-weight: 800;
}

/* ── Description and key specs ────────────────────────────── */

.woocommerce div.product .woocommerce-product-details__short-description {
    margin-top: 0.75rem;
    color: var(--color-text-2);
    font-size: 0.83rem;
    line-height: 1.6;
}

.product-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0.75rem 0 0;
}

.product-specs div {
    display: inline-flex;
    align-items: baseline;
    gap: 0.36rem;
    min-width: 0;
    padding: 0.38rem 0.75rem;
    border: 1px solid rgba(13, 148, 136, 0.32);
    border-radius: 999px;
    background: linear-gradient(135deg, #eefaf3, #e6f7f4);
}

.product-specs dt { color: var(--color-text-2); font-size: 0.75rem; }
.product-specs dd { margin: 0; color: #0b2c1c; font-size: 0.8rem; font-weight: 800; }

/* ── Actions ──────────────────────────────────────────────── */

.product-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.9rem;
    padding-top: 0.9rem;
    border-top: 1px solid rgba(43, 112, 67, 0.13);
}

.woocommerce div.product .product-actions form.cart {
    display: flex;
    flex: 1 1 240px;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
}

/* Quantity stepper — one pill, native spinners and focus ring replaced. */
.woocommerce .quantity {
    display: inline-flex;
    align-items: center;
    height: 44px;
    overflow: hidden;
    border: 1.5px solid var(--color-border);
    border-radius: 999px;
    background: #fff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.woocommerce .quantity:focus-within {
    border-color: var(--t600);
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.15);
}

.quantity__step {
    display: grid;
    place-items: center;
    width: 32px;
    height: 100%;
    background: none;
    color: var(--color-text-3);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    transition: color 0.18s ease, background 0.18s ease;
}

.quantity__step:hover { background: var(--t50); color: var(--t600); }

.woocommerce .quantity input.qty {
    width: 34px;
    height: 100%;
    padding: 0;
    border: 0;
    outline: none;
    background: none;
    color: var(--color-text);
    font-size: 0.92rem;
    font-weight: 800;
    text-align: center;
    appearance: textfield;
    -moz-appearance: textfield;
}

.woocommerce .quantity input.qty::-webkit-outer-spin-button,
.woocommerce .quantity input.qty::-webkit-inner-spin-button {
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
}

.woocommerce div.product form.cart .button {
    flex: 1 1 auto;
    min-height: 44px;
    padding: 0.6rem 1.1rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--g600), var(--t500));
    color: #fff;
    font-size: 0.86rem;
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(20, 184, 166, 0.28);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.woocommerce div.product form.cart .button:hover {
    background: linear-gradient(135deg, var(--g500), var(--t400));
    box-shadow: 0 12px 28px rgba(20, 184, 166, 0.36);
    transform: translateY(-1px);
}

.woocommerce div.product .product-actions .product-hero__cta {
    flex: 0 1 auto;
    min-height: 44px;
    padding: 0.6rem 1.05rem;
    border: 1.5px solid var(--color-border-2);
    border-radius: 999px;
    background: #fff;
    color: var(--color-text-2);
    font-weight: 600;
    font-size: 0.82rem;
    box-shadow: none;
}

.woocommerce div.product .product-actions .product-hero__cta:hover {
    border-color: var(--t600);
    background: var(--t50);
    color: var(--t600);
    transform: none;
}

/* ── Instalments ──────────────────────────────────────────── */

.product-payment {
    margin-top: 0.9rem;
    padding-top: 0.9rem;
    border-top: 1px solid rgba(43, 112, 67, 0.13);
}

/* Overrides the global h2 width cap, which would wrap this short label. */
.product-payment__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    max-width: none;
    margin: 0 0 0.6rem;
    color: var(--color-text-3);
    font-family: var(--font-body);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    white-space: nowrap;
}

.product-payment__title::after {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(45, 212, 191, 0.35), rgba(43, 112, 67, 0.06));
    content: '';
}

.product-payment__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(205px, 1fr));
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.product-payment__item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
    padding: 0.55rem 0.7rem;
    border: 1px solid rgba(43, 112, 67, 0.13);
    border-radius: 14px;
    background: linear-gradient(135deg, var(--g50), rgba(240, 253, 250, 0.55));
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.product-payment__item:hover {
    border-color: var(--t400);
    box-shadow: 0 8px 18px rgba(23, 77, 42, 0.08);
    transform: translateY(-1px);
}

.product-payment__logo {
    flex: 0 0 auto;
    width: auto;
    max-width: 92px;
    height: 24px;
    object-fit: contain;
}

.product-payment__logo--text {
    display: grid;
    place-items: center;
    padding: 0 0.5rem;
    border-radius: 7px;
    background: #fff;
    color: var(--color-text-2);
    font-size: 0.62rem;
    font-weight: 800;
}

/* Amount and term read as one sentence, wrapping only when the card is narrow. */
.product-payment__terms {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.05rem 0.32rem;
    min-width: 0;
    line-height: 1.25;
}

.product-payment__terms b {
    color: var(--color-text);
    font-size: 0.86rem;
    font-weight: 800;
    white-space: nowrap;
}

.product-payment__terms span {
    color: var(--color-text-3);
    font-size: 0.72rem;
    white-space: nowrap;
}

/* ── Service strip closing the panel ──────────────────────── */

.product-services {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem 1.1rem;
    margin: 0;
    padding: 1rem clamp(1rem, 2vw, 1.5rem);
    border-top: 1px solid rgba(43, 112, 67, 0.12);
    background: linear-gradient(180deg, #fbfefc, #f1f9f7);
    list-style: none;
}

.product-services li {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
}

.product-services .product-icon {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    padding: 8px;
    border: 1px solid rgba(43, 112, 67, 0.14);
    border-radius: 12px;
    background: #fff;
    color: var(--t600);
    stroke-width: 1.5;
}

.product-services span {
    display: grid;
    gap: 0.08rem;
    min-width: 0;
    color: var(--color-text-3);
    font-size: 0.73rem;
    line-height: 1.4;
}

.product-services b { color: var(--color-text); font-size: 0.82rem; }

.woocommerce div.product .product-details,
.woocommerce div.product .related,
.woocommerce div.product .up-sells {
    grid-column: 1 / -1;
    width: 100%;
    margin-top: clamp(3.5rem, 6vw, 5.5rem);
}

.product-details {
    position: relative;
    display: grid;
    gap: clamp(1.4rem, 2.8vw, 2.1rem);
    padding: clamp(1rem, 2.5vw, 1.75rem);
    border: 1px solid rgba(43, 112, 67, 0.15);
    border-radius: 22px;
    background:
        radial-gradient(30rem 20rem at 100% 0%, rgba(34, 197, 94, 0.07), transparent 66%),
        radial-gradient(24rem 18rem at 0% 100%, rgba(45, 212, 191, 0.06), transparent 62%),
        #fff;
    box-shadow: 0 18px 44px rgba(23, 77, 42, 0.07);
}

/* ── Anchor navigation ────────────────────────────────────── */

.product-details__sentinel {
    position: absolute;
    top: 0;
    width: 1px;
    height: 1px;
}

.product-details__nav {
    position: sticky;
    top: var(--minado-header-h, 76px);
    z-index: 3;
    display: flex;
    gap: 0.4rem;
    margin: calc(clamp(1rem, 2.5vw, 1.75rem) * -1) calc(clamp(1rem, 2.5vw, 1.75rem) * -1) 0;
    padding: 0.8rem clamp(1rem, 2.5vw, 1.75rem);
    overflow-x: auto;
    border-bottom: 1px solid rgba(43, 112, 67, 0.12);
    border-radius: 22px 22px 0 0;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    scrollbar-width: none;
    transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

.product-details__nav::-webkit-scrollbar { display: none; }

/* How far the reader is through the block; JS sets --details-progress. */
.product-details__nav::after {
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--g500), var(--t400));
    content: '';
    transform: scaleX(var(--details-progress, 0));
    transform-origin: left;
    transition: transform 0.15s linear;
}

.product-details__nav a {
    position: relative;
    flex: 0 0 auto;
    padding: 0.6rem 0.9rem;
    border: 1px solid transparent;
    border-radius: 999px;
    background: #f2f8f4;
    color: #42604a;
    font-size: 0.79rem;
    font-weight: 700;
    letter-spacing: 0.005em;
    line-height: 1.2;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.product-details__nav a:hover {
    border-color: rgba(43, 112, 67, 0.28);
    background: #fff;
    color: var(--g700);
}

.product-details__nav a.is-active {
    background: linear-gradient(135deg, var(--g700), var(--g800));
    color: #fff;
    box-shadow: 0 6px 16px rgba(21, 128, 61, 0.28);
}

/* ── Sections ─────────────────────────────────────────────── */

.product-details__section {
    scroll-margin-top: calc(var(--minado-header-h, 76px) + 4.5rem);
}

.product-details__section + .product-details__section {
    padding-top: clamp(1.4rem, 2.8vw, 2.1rem);
    border-top: 1px solid rgba(43, 112, 67, 0.12);
}

.product-details__title {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    max-width: none;
    margin: 0 0 1.25rem;
    color: var(--color-text);
    font-size: clamp(1.25rem, 2vw, 1.6rem);
    letter-spacing: -0.025em;
    line-height: 1.25;
}

.product-details__title::before {
    flex: 0 0 auto;
    align-self: stretch;
    width: 4px;
    min-height: 1.15em;
    border-radius: 999px;
    background: linear-gradient(var(--g500), var(--g800));
    content: '';
}

/* ── Rich text ────────────────────────────────────────────── */

.product-details__text {
    max-width: 96ch;
    color: var(--color-text-2);
    font-size: 0.9rem;
    line-height: 1.75;
}

/* The opening paragraph carries the summary, so it reads one step larger. */
.product-details__text > p:first-of-type {
    color: var(--color-text);
    font-size: 0.97rem;
    line-height: 1.7;
}

.product-details__text > :first-child { margin-top: 0; }
.product-details__text > :last-child { margin-bottom: 0; }

/* Editors paste their own headings here, so they stay below the section
   title in weight instead of competing with it. */
.product-details__text h2,
.product-details__text h3,
.product-details__text h4 {
    /* The global h2 measure (20ch) wrapped these after two or three words. */
    max-width: none;
    margin: 1.6rem 0 0.5rem;
    color: #183624;
    font-size: 1rem;
    font-weight: 750;
    letter-spacing: 0;
    line-height: 1.4;
}

.product-details__text h2 { font-size: 1.06rem; }
.product-details__text p { margin: 0 0 0.85rem; }
.product-details__text a { color: var(--g700); text-decoration: underline; }
.product-details__text ul,
.product-details__text ol {
    display: grid;
    gap: 0.4rem;
    margin: 0 0 0.95rem;
    padding-left: 1.15rem;
}
.product-details__text li::marker { color: var(--g500); }
.product-details__text strong { color: var(--color-text); }
.product-details__text table {
    width: 100%;
    margin: 1.1rem 0;
    border-collapse: collapse;
    font-size: 0.84rem;
}
.product-details__text th,
.product-details__text td {
    padding: 0.6rem 0.8rem;
    border: 1px solid rgba(43, 112, 67, 0.13);
    text-align: left;
}
.product-details__text th { background: var(--g50); color: #244932; font-weight: 750; }

/* Collapsed until the reader asks for the rest; the button is added by JS. */
.product-details__text.is-clamped,
.product-details__specs.is-clamped {
    position: relative;
    max-height: 24rem;
    overflow: hidden;
}

.product-details__text.is-clamped::after,
.product-details__specs.is-clamped::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 5.5rem;
    background: linear-gradient(rgba(255, 255, 255, 0), #fff 88%);
    content: '';
}

.product-details__text.is-open,
.product-details__specs.is-open { max-height: none; }
.product-details__text.is-open::after,
.product-details__specs.is-open::after { content: none; }

.product-details__more {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    justify-self: start;
    margin-top: 0.9rem;
    padding: 0.62rem 1.2rem;
    border: 1px solid rgba(43, 112, 67, 0.22);
    border-radius: 10px;
    background: #fff;
    color: var(--g700);
    font-size: 0.8rem;
    font-weight: 750;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.product-details__more::after {
    width: 0.55rem;
    height: 0.55rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    content: '';
    transform: translateY(-2px) rotate(45deg);
    transition: transform 0.25s ease;
}

.product-details__more.is-open::after { transform: translateY(1px) rotate(-135deg); }

.product-details__more:hover {
    border-color: var(--g700);
    background: var(--g700);
    color: #fff;
    box-shadow: 0 10px 22px rgba(21, 128, 61, 0.22);
}

/* ── Specifications ───────────────────────────────────────── */

/* A real two-column table: the row wrappers collapse with display:contents so
   the labels share one column sized to the longest of them, and every value
   starts right after it instead of across a wide gap. */
.product-details__specs {
    display: grid;
    grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
    max-width: 48rem;
    margin: 0;
    overflow: hidden;
    border: 1px solid rgba(43, 112, 67, 0.16);
    border-radius: 14px;
}

.product-details__specs div { display: contents; }

.product-details__specs dt,
.product-details__specs dd {
    padding: 0.72rem 1rem;
    font-size: 0.85rem;
    line-height: 1.45;
}

.product-details__specs div + div dt,
.product-details__specs div + div dd { border-top: 1px solid rgba(43, 112, 67, 0.13); }

.product-details__specs dt {
    padding-right: 2.5rem;
    background: rgba(240, 253, 244, 0.55);
    color: var(--color-text-2);
}

.product-details__specs dd {
    margin: 0;
    color: #0b2c1c;
    font-weight: 750;
}

/* ── Advantages ───────────────────────────────────────────── */

.product-details__advantages {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
    gap: 0.7rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.product-details__advantages li {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    padding: 1rem 1.1rem;
    border: 1px solid rgba(43, 112, 67, 0.13);
    border-radius: 16px;
    background: linear-gradient(160deg, #fff, var(--g50));
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.product-details__advantages li:hover {
    border-color: rgba(43, 112, 67, 0.3);
    box-shadow: 0 12px 26px rgba(23, 77, 42, 0.08);
    transform: translateY(-2px);
}

.product-details__advantages p {
    margin: 0;
    color: var(--color-text-2);
    font-size: 0.86rem;
    line-height: 1.6;
}

.product-details__check {
    flex: 0 0 auto;
    box-sizing: content-box;
    width: 15px;
    height: 15px;
    padding: 5px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--g500), var(--g700));
    color: #fff;
}

/* ── Documents ────────────────────────────────────────────── */

.product-details__documents {
    display: grid;
    gap: 0.55rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.product-details__documents a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border: 1px solid rgba(43, 112, 67, 0.15);
    border-radius: 14px;
    background: #fff;
    color: var(--color-text);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.product-details__documents a:hover {
    border-color: var(--g500);
    box-shadow: 0 12px 26px rgba(23, 77, 42, 0.09);
    transform: translateY(-2px);
}

.product-details__documents a::after {
    flex: 0 0 auto;
    width: 1.55rem;
    height: 1.55rem;
    border-radius: 999px;
    background: var(--g50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315803d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4.6v12M6.6 11.4 12 16.8l5.4-5.4'/%3E%3C/svg%3E") center / 15px no-repeat;
    content: '';
}

.product-details__documents svg { flex: 0 0 auto; width: 22px; height: 22px; color: var(--g700); }
.product-details__documents span { flex: 1 1 auto; font-size: 0.86rem; font-weight: 700; }
.product-details__documents b {
    flex: 0 0 auto;
    color: var(--color-text-2);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* ── Reviews ──────────────────────────────────────────────── */

.product-reviews {
    position: relative;
    display: grid;
    gap: clamp(1.2rem, 2.6vw, 1.9rem);
    margin-top: clamp(3.5rem, 6vw, 5.5rem);
    padding: clamp(1.2rem, 2.6vw, 2rem);
    overflow: hidden;
    border: 1px solid rgba(43, 112, 67, 0.15);
    border-radius: 24px;
    background:
        radial-gradient(30rem 20rem at 100% 0%, rgba(34, 197, 94, 0.09), transparent 66%),
        radial-gradient(24rem 18rem at 0% 100%, rgba(45, 212, 191, 0.07), transparent 62%),
        #fff;
    box-shadow: 0 22px 54px rgba(23, 77, 42, 0.09);
    scroll-margin-top: 6rem;
}

.product-reviews::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--g800), var(--g500) 55%, var(--t400));
    content: '';
}

.product-reviews__heading {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    max-width: none;
    margin: 0;
    color: var(--color-text);
    font-size: clamp(1.35rem, 2.3vw, 1.85rem);
    letter-spacing: -0.03em;
}

.product-reviews__heading::before {
    flex: 0 0 auto;
    width: 4px;
    height: 1.15em;
    border-radius: 999px;
    background: linear-gradient(var(--g500), var(--g800));
    content: '';
}

.product-reviews__count {
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: var(--g50);
    color: var(--g700);
    font-size: 0.78rem;
    font-weight: 800;
}

/* ── Summary: the dark card is the block's focal point ────── */

.product-reviews__summary {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(11rem, 17rem) minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(1rem, 2.4vw, 2.1rem);
    padding: clamp(1.3rem, 2.6vw, 1.9rem);
    overflow: hidden;
    border-radius: 20px;
    background:
        radial-gradient(120% 160% at 8% 0%, rgba(45, 212, 191, 0.22), transparent 62%),
        linear-gradient(135deg, #0d2117, #14532d 58%, #10361f);
    color: rgba(255, 255, 255, 0.8);
    box-shadow: 0 20px 44px rgba(7, 26, 15, 0.22);
}

.product-reviews__summary::before {
    position: absolute;
    top: 50%;
    right: -5rem;
    width: 22rem;
    height: 22rem;
    border: 1px solid rgba(45, 212, 191, 0.16);
    border-radius: 50%;
    box-shadow:
        inset 0 0 0 3.2rem rgba(255, 255, 255, 0.03),
        inset 0 0 0 3.3rem rgba(45, 212, 191, 0.14),
        inset 0 0 0 6.6rem rgba(255, 255, 255, 0.02),
        inset 0 0 0 6.7rem rgba(45, 212, 191, 0.1);
    content: '';
    transform: translateY(-50%);
    pointer-events: none;
}

.product-reviews__summary > * { position: relative; z-index: 1; }

.product-reviews__score {
    display: grid;
    justify-items: center;
    gap: 0.35rem;
    padding-right: clamp(1.2rem, 3vw, 2.6rem);
    border-right: 1px solid rgba(255, 255, 255, 0.16);
}

.product-reviews__score b {
    display: flex;
    align-items: baseline;
    gap: 0.12rem;
    color: #fff;
    font-size: 3.2rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
}

.product-reviews__score b::after {
    color: rgba(255, 255, 255, 0.42);
    content: '/5';
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0;
}

.woocommerce div.product .product-reviews__score .star-rating { color: #f5c451; font-size: 0.95rem; }
.woocommerce div.product .product-reviews__score .star-rating::before { color: rgba(255, 255, 255, 0.22); }
.woocommerce div.product .product-reviews__score .star-rating span::before { color: #f5c451; }
.product-reviews__score > span { color: rgba(255, 255, 255, 0.66); font-size: 0.78rem; }

/* Names the product the ratings belong to, in the card's open space. */
.product-reviews__subject {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
    padding-left: clamp(1rem, 2.4vw, 2.1rem);
    border-left: 1px solid rgba(255, 255, 255, 0.16);
}

.product-reviews__thumb {
    flex: 0 0 auto;
    width: 3.6rem;
    height: 3.6rem;
    padding: 0.3rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.07);
    object-fit: contain;
}

.product-reviews__subject span {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.42;
}

.product-reviews__bars {
    display: grid;
    gap: 0.34rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.product-reviews__bars li {
    display: grid;
    grid-template-columns: 2.1rem minmax(0, 1fr) 2rem;
    align-items: center;
    gap: 0.6rem;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.76rem;
}

.product-reviews__bars span { white-space: nowrap; }
.product-reviews__bars span::after { color: #f5c451; content: ' \2605'; }
.product-reviews__bars em { font-style: normal; text-align: right; }

.product-reviews__bars i {
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
}

.product-reviews__bars b {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--g500), var(--t400));
    box-shadow: 0 0 12px rgba(45, 212, 191, 0.45);
    transform-origin: left;
    transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

/* The bars are drawn by default; JS only collapses them once it is ready to
   animate, so a failed script still leaves the distribution readable. */
.product-reviews__summary.is-ready .product-reviews__bars b { transform: scaleX(0); }
.product-reviews__summary.is-ready.is-visible .product-reviews__bars b { transform: scaleX(1); }

/* The form is on the page already, so this points at it instead of linking:
   a jump to an anchor a few hundred pixels away only disorients. */
.product-reviews__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    justify-self: end;
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.84rem;
    font-weight: 700;
    white-space: nowrap;
}

.product-reviews__cta::after {
    display: grid;
    place-items: center;
    width: 1.95rem;
    height: 1.95rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.09);
    color: #fff;
    content: '\2192';
    font-size: 1rem;
    line-height: 1;
    animation: review-cta-nudge 3s ease-in-out infinite;
}

@keyframes review-cta-nudge {
    0%, 60%, 100% { transform: translateX(0); }
    75% { transform: translateX(0.3rem); }
}

/* ── Published reviews ────────────────────────────────────── */

.product-reviews__list {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.product-reviews__empty {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
    padding: 1.25rem 1.35rem;
    border: 1px dashed rgba(43, 112, 67, 0.25);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(240, 253, 244, 0.75), transparent 70%);
    color: var(--color-text-2);
    font-size: 0.88rem;
}

.product-reviews__empty::before {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 999px;
    background: var(--g50);
    color: var(--g700);
    content: '\2605';
    font-size: 0.95rem;
}

.product-reviews__item {
    position: relative;
    display: flex;
    gap: 1rem;
    padding: 1.25rem 1.4rem;
    overflow: hidden;
    border: 1px solid rgba(43, 112, 67, 0.13);
    border-radius: 18px;
    background: #fff;
    transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}

/* A quotation mark watermark, so a card reads as a quote at a glance. */
.product-reviews__item::after {
    position: absolute;
    top: -1.9rem;
    right: 0.4rem;
    color: rgba(34, 197, 94, 0.09);
    content: '\201D';
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 8rem;
    line-height: 1;
    pointer-events: none;
}

/* The accent edge grows on hover instead of the card changing colour. */
.product-reviews__item::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 0;
    background: linear-gradient(var(--g500), var(--g800));
    content: '';
    transition: width 0.25s ease;
}

.product-reviews__item:hover {
    border-color: rgba(43, 112, 67, 0.26);
    box-shadow: 0 18px 34px rgba(23, 77, 42, 0.08);
    transform: translateY(-2px);
}

.product-reviews__item:hover::before { width: 4px; }

.product-reviews__avatar {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 2.7rem;
    height: 2.7rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--g500), var(--g800));
    color: #fff;
    font-size: 1.05rem;
    font-weight: 800;
    text-transform: uppercase;
    box-shadow: 0 8px 18px rgba(21, 128, 61, 0.26);
}

.product-reviews__body { position: relative; z-index: 1; flex: 1 1 auto; min-width: 0; }

.product-reviews__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.7rem;
    margin-bottom: 0.5rem;
}

.product-reviews__head b {
    color: var(--color-text);
    font-size: 0.94rem;
    font-weight: 750;
}

.woocommerce div.product .product-reviews__head .star-rating { font-size: 0.82rem; }

.product-reviews__head time {
    margin-left: auto;
    color: var(--color-text-2);
    font-size: 0.76rem;
}

.product-reviews__verified {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: #e8f7ee;
    color: #15803d;
    font-size: 0.7rem;
    font-weight: 700;
}

.product-reviews__verified::before { content: '\2713'; font-weight: 800; }

.product-reviews__text {
    color: var(--color-text-2);
    font-size: 0.9rem;
    line-height: 1.72;
}

.product-reviews__text > :first-child { margin-top: 0; }
.product-reviews__text > :last-child { margin-bottom: 0; }

.product-reviews__reply {
    display: flex;
    gap: 0.7rem;
    margin-top: 0.95rem;
    padding: 0.95rem 1.1rem;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--g50), #eefaf2);
    color: var(--color-text-2);
    font-size: 0.86rem;
    line-height: 1.65;
}

.product-reviews__reply svg {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 0.15rem;
    color: var(--g700);
}

.product-reviews__reply b {
    display: block;
    margin-bottom: 0.2rem;
    color: var(--g700);
    font-size: 0.8rem;
}

.product-reviews__reply p { margin: 0; }

/* ── Review form ──────────────────────────────────────────── */

.product-reviews #respond { margin: 0; }

.product-reviews__form-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    max-width: none;
    margin: 0 0 1rem;
    color: var(--color-text);
    font-size: 1.1rem;
}

.product-reviews__form-title::before {
    display: grid;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--g500), var(--g800));
    color: #fff;
    content: '\270E';
    font-size: 0.95rem;
    box-shadow: 0 8px 18px rgba(21, 128, 61, 0.26);
}

.product-reviews__form {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
    padding: clamp(1.2rem, 2.6vw, 1.8rem);
    overflow: hidden;
    border: 1px solid rgba(43, 112, 67, 0.15);
    border-radius: 20px;
    background:
        radial-gradient(26rem 18rem at 100% 0%, rgba(45, 212, 191, 0.11), transparent 65%),
        radial-gradient(22rem 16rem at 0% 100%, rgba(34, 197, 94, 0.1), transparent 62%),
        #fff;
}

/* Concentric rings echo the footer's solar motif without adding an image. */
.product-reviews__form::before {
    position: absolute;
    top: -7rem;
    right: -7rem;
    width: 18rem;
    height: 18rem;
    border: 1px solid rgba(34, 197, 94, 0.14);
    border-radius: 50%;
    box-shadow:
        inset 0 0 0 2.6rem rgba(34, 197, 94, 0.05),
        inset 0 0 0 2.7rem rgba(34, 197, 94, 0.16);
    content: '';
    pointer-events: none;
}

.product-reviews__form > * { position: relative; z-index: 1; }

.product-reviews__form > * { grid-column: 1 / -1; margin: 0; }
.product-reviews__form .comment-form-author { grid-column: 1 / 2; }
.product-reviews__form .comment-form-email { grid-column: 2 / 3; }

.product-reviews__form label {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--color-text);
    font-size: 0.8rem;
    font-weight: 700;
}

.product-reviews__form input[type='text'],
.product-reviews__form input[type='email'],
.product-reviews__form input[type='url'],
.product-reviews__form textarea {
    width: 100%;
    padding: 0.78rem 0.95rem;
    border: 1px solid rgba(43, 112, 67, 0.2);
    border-radius: 12px;
    background: #fff;
    color: var(--color-text);
    font: inherit;
    font-size: 0.88rem;
}

.product-reviews__form input:focus-visible,
.product-reviews__form textarea:focus-visible {
    border-color: var(--g500);
    outline: 2px solid rgba(43, 112, 67, 0.2);
    outline-offset: 1px;
}

.product-reviews__form textarea { resize: vertical; }

.product-reviews__signed {
    padding: 0.7rem 0.95rem;
    border: 1px dashed rgba(43, 112, 67, 0.28);
    border-radius: 12px;
    color: var(--color-text-2);
    font-size: 0.82rem;
}

.product-reviews__signed b { color: var(--g700); }

.product-reviews__form .comment-form-cookies-consent { display: flex; align-items: center; gap: 0.5rem; }
.product-reviews__form .comment-form-cookies-consent label { margin: 0; font-weight: 400; }
.product-reviews__form .form-submit { margin: 0.2rem 0 0; }

.product-reviews__rate {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.95rem;
    padding: 0.85rem 1.05rem;
    border: 1px solid rgba(43, 112, 67, 0.15);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(23, 77, 42, 0.05);
}

.product-reviews__rate > span {
    color: var(--color-text);
    font-size: 0.82rem;
    font-weight: 700;
}

/* JS names the picked score; it starts as a prompt. */
.product-reviews__rate em {
    color: var(--color-text-2);
    font-size: 0.78rem;
    font-style: normal;
}

.product-reviews__rate em.is-set { color: var(--g700); font-weight: 750; }

/* Stars are printed 5 -> 1 so the sibling selector can fill every lower star;
   row-reverse puts 1 back on the left. */
.product-reviews__picker {
    display: inline-flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
}

.product-reviews__picker input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.product-reviews__picker label {
    margin: 0;
    padding: 0 0.1rem;
    color: #e2e8de;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.15s ease, transform 0.15s ease;
}

.product-reviews__picker label::before { content: '\2605'; }

.product-reviews__picker label span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

.product-reviews__picker label:hover,
.product-reviews__picker label:hover ~ label,
.product-reviews__picker input:checked ~ label,
.product-reviews__picker input:focus-visible + label { color: #f5c451; }

.product-reviews__picker label:hover { transform: scale(1.12); }

/* ── Two columns once there is room ───────────────────────── */

/* Stacked as full-width rows the block ran very tall and left the summary and
   the form stretched across the whole container. From here the reviews own the
   left column and the form sits beside them. */
@media (min-width: 1000px) {
    .product-reviews {
        grid-template-columns: minmax(0, 1.3fr) minmax(21rem, 1fr);
        grid-template-areas:
            'head head'
            'summary form'
            'list form';
        align-content: start;
        column-gap: clamp(1.3rem, 2.4vw, 2.1rem);
    }

    .product-reviews__heading { grid-area: head; }
    .product-reviews__summary { grid-area: summary; }
    .product-reviews__list,
    .product-reviews__empty { grid-area: list; align-self: start; }
    .product-reviews #respond { grid-area: form; align-self: start; }

    /* Four across no longer fit the narrower column, so the card pairs up. */
    .product-reviews__summary {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
            'score bars'
            'subject cta';
        gap: 1.4rem clamp(1rem, 2.2vw, 1.9rem);
    }

    .product-reviews__score { grid-area: score; }
    .product-reviews__bars { grid-area: bars; }
    .product-reviews__subject { grid-area: subject; }
    .product-reviews__cta { grid-area: cta; align-self: center; }

    .product-reviews__subject {
        padding: 1.4rem 0 0;
        border-top: 1px solid rgba(255, 255, 255, 0.16);
        border-left: 0;
    }
}

/* Under two columns the form is below the card, so the arrow points down. */
@media (max-width: 999px) {
    .product-reviews__cta::after { content: '\2193'; animation-name: review-cta-nudge-down; }

    @keyframes review-cta-nudge-down {
        0%, 60%, 100% { transform: translateY(0); }
        75% { transform: translateY(0.3rem); }
    }
}

/* Two fields side by side leave barely 10rem each in the form column. */
@media (min-width: 1000px) and (max-width: 1300px) {
    .product-reviews__form .comment-form-author,
    .product-reviews__form .comment-form-email { grid-column: 1 / -1; }
}

/* ── Thank-you dialog after a review is posted ────────────── */

.product-reviews__thanks {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    place-items: center;
    padding: 1.25rem;
    background: rgba(7, 26, 15, 0.55);
    backdrop-filter: blur(4px);
    animation: review-thanks-in 0.25s ease both;
}

.product-reviews__thanks-card {
    position: relative;
    width: min(24rem, 100%);
    padding: 2rem 1.75rem 1.6rem;
    overflow: hidden;
    border-radius: 22px;
    background:
        radial-gradient(22rem 14rem at 100% 0%, rgba(45, 212, 191, 0.14), transparent 66%),
        #fff;
    text-align: center;
    box-shadow: 0 30px 70px rgba(7, 26, 15, 0.35);
    animation: review-thanks-pop 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.product-reviews__thanks-card::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--g800), var(--g500) 55%, var(--t400));
    content: '';
}

.product-reviews__thanks-icon {
    display: grid;
    place-items: center;
    width: 3.6rem;
    height: 3.6rem;
    margin: 0 auto 0.9rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--g500), var(--g800));
    color: #fff;
    box-shadow: 0 12px 26px rgba(21, 128, 61, 0.3);
}

.product-reviews__thanks-icon svg { width: 26px; height: 26px; }

.product-reviews__thanks-card h3 {
    max-width: none;
    margin: 0 0 0.5rem;
    color: var(--color-text);
    font-size: 1.2rem;
    letter-spacing: -0.02em;
}

.product-reviews__thanks-card p {
    margin: 0 0 1.25rem;
    color: var(--color-text-2);
    font-size: 0.88rem;
    line-height: 1.65;
}

@keyframes review-thanks-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes review-thanks-pop {
    from { opacity: 0; transform: translateY(14px) scale(0.96); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .product-reviews__thanks,
    .product-reviews__thanks-card,
    .product-reviews__cta::after { animation: none; }
}

/* ── Product carousel ─────────────────────────────────────── */

.product-carousel {
    margin-top: clamp(3.5rem, 6vw, 5.5rem);
}

.product-carousel__head {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: clamp(1.4rem, 2.6vw, 2.1rem);
}

.product-carousel__title {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    max-width: none;
    margin: 0;
    color: var(--color-text);
    font-size: clamp(1.35rem, 2.3vw, 1.85rem);
    letter-spacing: -0.03em;
}

.product-carousel__title::before {
    flex: 0 0 auto;
    width: 4px;
    height: 1.15em;
    border-radius: 999px;
    background: linear-gradient(var(--g500), var(--g800));
    content: '';
}

.product-carousel__nav {
    display: flex;
    gap: 0.4rem;
    margin-left: auto;
}

.product-carousel__arrow {
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border: 1px solid rgba(43, 112, 67, 0.2);
    border-radius: 999px;
    background: #fff;
    color: var(--g700);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.product-carousel__arrow svg { width: 20px; height: 20px; }

.product-carousel__arrow:hover:not(:disabled) {
    border-color: transparent;
    background: linear-gradient(135deg, var(--g700), var(--g800));
    color: #fff;
    box-shadow: 0 10px 22px rgba(21, 128, 61, 0.26);
}

.product-carousel__arrow:disabled { opacity: 0.35; cursor: default; }

/* A scroll-snap rail: it works as a plain scroller before the script runs,
   and the arrows only add a nicer way to move through it. */
/* overflow-x also clips vertically, so the rail needs room for the card
   shadows; the negative margin puts the cards back in line with the page. */
.product-carousel__track {
    position: relative;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(15.5rem, 1fr);
    gap: 1rem;
    margin: -1.25rem -1.25rem -1.75rem;
    padding: 1.25rem 1.25rem 2.25rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 1.25rem;
    scroll-behavior: smooth;
    scrollbar-width: none;
    list-style: none;
}

.product-carousel__track::-webkit-scrollbar { display: none; }

.product-carousel__track > li {
    scroll-snap-align: start;
}

@media (min-width: 700px) { .product-carousel__track { grid-auto-columns: minmax(0, calc((100% - 2rem) / 3)); } }
@media (min-width: 1000px) { .product-carousel__track { grid-auto-columns: minmax(0, calc((100% - 3rem) / 4)); } }

/* WooCommerce normally supplies an icon font for ratings. The theme disables
   its stock stylesheet, so draw a fully accessible five-star indicator here. */
.woocommerce .star-rating {
    position: relative;
    display: inline-block;
    width: 5.7em;
    height: 1em;
    overflow: hidden;
    color: #e5a11a;
    font-family: Arial, sans-serif;
    font-size: 0.88rem;
    letter-spacing: 0.06em;
    line-height: 1;
}

.woocommerce .star-rating::before {
    color: #e9eadf;
    content: '★★★★★';
}

.woocommerce .star-rating span {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    height: 100%;
    overflow: hidden;
    text-indent: -9999px;
}

.woocommerce .star-rating span::before {
    position: absolute;
    top: 0;
    left: 0;
    color: #e5a11a;
    content: '★★★★★';
    line-height: 1;
    text-indent: 0;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .product-hero { grid-template-columns: 1fr; }
    .product-gallery { border-right: 0; border-bottom: 1px solid rgba(43, 112, 67, 0.12); }
    .product-gallery__stage { aspect-ratio: 1 / 0.7; }
}

@media (max-width: 560px) {
    /* Wrapped onto separate lines the split reads as a gap, so let them pack. */
    .product-hero__rating,
    .product-hero__sku:first-child { margin-right: 0; }

    .single-product .woocommerce-breadcrumb,
    .woocommerce div.product { width: min(var(--container), calc(100% - 1.25rem)); }
    .product-hero { border-radius: 18px; }
    .product-services { grid-template-columns: 1fr; }
    .woocommerce div.product .product-actions form.cart { flex: 1 1 100%; }
    .product-hero__cta { flex: 1 1 100%; }
    .product-details { padding: 0.85rem; border-radius: 18px; }
    .product-details__nav { margin: -0.85rem -0.85rem 0; padding: 0.6rem 0.85rem; border-radius: 18px 18px 0 0; }
    .product-details__specs { grid-template-columns: 1fr; }
    .product-details__specs dt { padding: 0.6rem 0.85rem 0.1rem; background: none; }
    .product-details__specs dd { padding: 0 0.85rem 0.6rem; }
    .product-details__specs div + div dd { border-top: 0; }
    .product-reviews { padding: 1rem 0.85rem; border-radius: 18px; }
    .product-reviews__summary { grid-template-columns: 1fr; gap: 1.15rem; }
    .product-reviews__subject {
        padding: 1.15rem 0 0;
        border-top: 1px solid rgba(255, 255, 255, 0.16);
        border-left: 0;
    }
    .product-reviews__score {
        justify-items: start;
        padding: 0 0 1.15rem;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    }
    .product-reviews__cta { justify-self: start; }
    .product-reviews__form .comment-form-author,
    .product-reviews__form .comment-form-email { grid-column: 1 / -1; }
    .product-carousel__track {
        grid-auto-columns: minmax(13.5rem, 1fr);
        gap: 0.7rem;
        margin-right: -0.625rem;
        margin-left: -0.625rem;
        padding-right: 0.625rem;
        padding-left: 0.625rem;
        scroll-padding-inline: 0.625rem;
    }
    .product-carousel__head { flex-wrap: wrap; }
}


/* ============================================================
   Cart — WooCommerce Blocks in Minado dress
   ============================================================ */

/* The cart block renders itself, so everything below is written against the
   markup React produces. Rules that fight a plugin declaration repeat the
   plugin's selector depth, which is why the long prefixes are here. */

/* ── Page frame ───────────────────────────────────────────── */

.woocommerce-cart .site-main {
    padding: 0 0 clamp(3rem, 5vw, 5rem);
}

.woocommerce-cart .page-hero {
    padding: clamp(2rem, 3.5vw, 3.25rem) 0 clamp(1.25rem, 2vw, 1.75rem);
    border-bottom: 0;
}

.woocommerce-cart .page-hero h1 {
    margin: 0;
    font-size: clamp(1.9rem, 3.6vw, 2.9rem);
}

.woocommerce-cart .section {
    padding: 0;
}

.woocommerce-cart .content-block {
    gap: 1.5rem;
}

.woocommerce-cart .wp-block-woocommerce-cart {
    margin: 0;
}

/* ── Two columns: line items, then the summary rail ───────── */

.wc-block-cart.wc-block-components-sidebar-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 21.5rem);
    align-items: start;
    gap: 1.5rem;
    margin: 0;
    padding-top: 0;
}

.wc-block-cart .wc-block-components-main,
.wc-block-cart .wc-block-components-sidebar {
    width: auto;
}

.wc-block-cart .wc-block-cart__sidebar {
    position: sticky;
    top: 96px;
    margin-bottom: 0;
}

/* ── Line items panel ─────────────────────────────────────── */

.wc-block-cart .wc-block-cart__main {
    position: relative;
    overflow: hidden;
    padding: clamp(0.9rem, 2vw, 1.65rem) clamp(0.9rem, 2vw, 1.65rem) 0.4rem;
    border: 1px solid rgba(43, 112, 67, 0.14);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 18px 44px rgba(23, 77, 42, 0.08);
}

.wc-block-cart__main .wc-block-cart-items {
    border-bottom: 0;
}

.wc-block-cart__main .wc-block-cart-items__header th {
    padding: 0.35rem 0 0.8rem;
    color: var(--color-text-3);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.11em;
}

.wc-block-cart__main .wc-block-cart-items .wc-block-cart-items__header-image {
    width: 104px;
}

.wc-block-cart__main .wc-block-cart-items td {
    padding: 1.05rem 0;
    border-top: 1px solid rgba(43, 112, 67, 0.12);
    vertical-align: top;
}

.wc-block-cart__main .wc-block-cart-items .wc-block-cart-item__image {
    padding-right: 1rem;
}

/* ── Product thumbnail ────────────────────────────────────── */

.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image a {
    display: grid;
    width: 88px;
    height: 88px;
    padding: 0.4rem;
    place-items: center;
    border: 1px solid rgba(43, 112, 67, 0.12);
    border-radius: 14px;
    background: linear-gradient(145deg, var(--g50), #fff);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image a:hover {
    border-color: var(--t400);
    box-shadow: 0 8px 20px rgba(23, 77, 42, 0.1);
}

.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
}

/* ── Product details ──────────────────────────────────────── */

.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__wrap {
    gap: 0.28rem;
}

.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name {
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.35;
    transition: color 0.18s ease;
}

.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name:hover {
    color: var(--t600);
}

.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__prices {
    color: var(--color-text-3);
    font-size: 0.8rem;
    font-weight: 600;
}

.wc-block-cart .wc-block-components-product-metadata {
    margin-top: 0.1rem;
}

.wc-block-cart .wc-block-components-product-metadata__description p {
    display: -webkit-box;
    overflow: hidden;
    margin: 0;
    color: var(--color-text-3);
    font-size: 0.79rem;
    line-height: 1.5;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

/* ── Quantity stepper — same pill as the product page ─────── */

.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity {
    gap: 0.55rem;
    margin-top: 0.55rem;
}

.wc-block-cart .wc-block-components-quantity-selector {
    width: auto;
    height: 40px;
    overflow: hidden;
    border: 1.5px solid var(--color-border);
    border-radius: 999px;
    background: #fff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.wc-block-cart .wc-block-components-quantity-selector:focus-within {
    border-color: var(--t600);
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.15);
}

.wc-block-cart .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input {
    min-width: 2.1rem;
    padding: 0;
    color: var(--color-text);
    font-size: 0.9rem;
    font-weight: 800;
}

.wc-block-cart .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input:focus {
    box-shadow: none;
}

.wc-block-cart .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {
    min-width: 2rem;
    color: var(--color-text-3);
    font-size: 1rem;
    font-weight: 700;
    opacity: 1;
    transition: color 0.18s ease, background 0.18s ease;
}

.wc-block-cart .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:hover:not(:disabled) {
    background: var(--t50);
    color: var(--t600);
}

.wc-block-cart .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:focus {
    box-shadow: none;
}

.wc-block-cart .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:disabled {
    opacity: 0.35;
}

/* ── Remove ───────────────────────────────────────────────── */

.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity .wc-block-cart-item__remove-link {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border: 1.5px solid var(--color-border);
    border-radius: 999px;
    color: var(--color-text-3);
    transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity .wc-block-cart-item__remove-link:hover {
    border-color: #f0a9a3;
    background: #fff3f2;
    color: #b3352c;
}

.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity .wc-block-cart-item__remove-link svg {
    width: 19px;
    height: 19px;
}

/* ── Line total ───────────────────────────────────────────── */

.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total {
    padding-left: 1rem;
    color: var(--color-text);
    font-size: 1.02rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

/* ── Summary rail ─────────────────────────────────────────── */

.wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-block {
    position: relative;
    overflow: hidden;
    margin-bottom: 0;
    padding: clamp(1rem, 1.8vw, 1.45rem);
    border: 1px solid rgba(43, 112, 67, 0.14);
    border-bottom: 1px solid rgba(43, 112, 67, 0.14);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 18px 44px rgba(23, 77, 42, 0.08);
    font-size: 0.9rem;
}

.wc-block-cart .wc-block-cart__totals-title {
    padding: 0 0 0.85rem;
    border-bottom: 1px solid rgba(43, 112, 67, 0.12);
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: 1.02rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    text-align: left;
    text-transform: none;
}

.wc-block-cart .wc-block-components-totals-wrapper {
    padding: 0.9rem 0;
    border-top: 0;
}

.wc-block-cart .wc-block-components-totals-wrapper + .wc-block-components-totals-wrapper {
    border-top: 1px solid rgba(43, 112, 67, 0.12);
}

.wc-block-cart .wc-block-components-totals-item__label {
    color: var(--color-text-3);
    font-size: 0.86rem;
}

.wc-block-cart .wc-block-components-totals-item__value {
    color: var(--color-text-2);
    font-weight: 700;
}

.wc-block-cart .wc-block-components-totals-footer-item {
    align-items: baseline;
    padding: 0.15rem 0 0;
    font-size: 1rem;
}

.wc-block-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
    color: var(--color-text);
    font-size: 0.95rem;
    font-weight: 700;
}

.wc-block-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    color: var(--g800);
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.wc-block-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__description {
    margin-top: 0.2rem;
    color: var(--color-text-3);
    font-size: 0.75rem;
}

/* Coupons are switched off for this shop, so the panel never renders. The rule
   stays as a guard in case WooCommerce prints it anyway. */
.wc-block-cart .wp-block-woocommerce-cart-order-summary-coupon-form-block {
    display: none;
}

/* ── Checkout button ──────────────────────────────────────── */

.wc-block-cart .wc-block-cart__submit {
    margin: 1rem 0 0;
}

.wc-block-cart .wc-block-cart__submit-container {
    padding: 0;
}

.wc-block-cart .wc-block-cart__submit-button {
    min-height: 52px;
    padding: 0.75rem 1.4rem;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--g600), var(--t500));
    color: #fff;
    font-family: var(--font-body);
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    box-shadow: 0 10px 26px rgba(20, 184, 166, 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.wc-block-cart .wc-block-cart__submit-button:hover {
    background: linear-gradient(135deg, var(--g500), var(--t400));
    box-shadow: 0 16px 34px rgba(20, 184, 166, 0.38);
    transform: translateY(-1px);
}

.wc-block-cart .wc-block-cart__submit-button:active {
    transform: translateY(0);
}

/* ── Notices ──────────────────────────────────────────────── */

.wp-block-woocommerce-cart .wc-block-components-notice-banner {
    border-radius: var(--r-sm);
    box-shadow: var(--sh-xs);
}

.wp-block-woocommerce-cart .wc-block-components-notice-banner.is-success {
    border-color: rgba(43, 112, 67, 0.3);
    background: var(--g50);
    color: var(--g900);
}

.wp-block-woocommerce-cart .wc-block-components-notice-banner.is-success > svg {
    background-color: var(--g600);
}

/* ── Empty cart ───────────────────────────────────────────── */

.wp-block-woocommerce-empty-cart-block {
    padding: clamp(1.75rem, 4vw, 3rem) clamp(1rem, 3vw, 2.5rem);
    border: 1px solid rgba(43, 112, 67, 0.14);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 18px 44px rgba(23, 77, 42, 0.08);
}

.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title {
    margin: 0 0 0.6rem;
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 2.4vw, 1.6rem);
    font-weight: 800;
}

.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
    height: 3.4em;
    margin-bottom: 1.1rem;
    background-color: var(--g500);
}

.wp-block-woocommerce-empty-cart-block .wp-block-separator {
    max-width: 6rem;
    margin: 1.6rem auto;
    border: 0;
    border-top: 1px solid rgba(43, 112, 67, 0.2);
    opacity: 1;
}

.wp-block-woocommerce-empty-cart-block h2:not(.wc-block-cart__empty-cart__title) {
    margin: 0 0 1.25rem;
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 800;
}

/* ── "New in store" grid, styled like the catalogue cards ─── */

.wp-block-woocommerce-empty-cart-block .wc-block-grid__products {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product {
    display: flex;
    width: auto;
    max-width: none;
    flex-direction: column;
    padding: 0 0 0.9rem;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--r-md);
    background: #fff;
    box-shadow: var(--sh-xs);
    text-align: left;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product:hover {
    border-color: var(--t400);
    box-shadow: 0 16px 34px rgba(23, 77, 42, 0.11);
    transform: translateY(-3px);
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-image {
    display: grid;
    margin: 0 0 0.85rem;
    padding: 0.9rem;
    aspect-ratio: 1 / 0.82;
    place-items: center;
    background: linear-gradient(145deg, var(--g50), #fff);
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-image img {
    width: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-title {
    padding: 0 0.9rem;
    color: var(--color-text);
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.35;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-price {
    padding: 0.45rem 0.9rem 0;
    color: var(--color-text);
    font-size: 1rem;
    font-weight: 800;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-rating {
    padding: 0.2rem 0.9rem 0;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart {
    margin-top: auto;
    padding: 0.8rem 0.9rem 0;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart .wp-block-button__link {
    display: block;
    padding: 0.62rem 0.9rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--g600), var(--t500));
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    text-align: center;
    box-shadow: 0 8px 20px rgba(20, 184, 166, 0.24);
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart .wp-block-button__link:hover {
    background: linear-gradient(135deg, var(--g500), var(--t400));
    box-shadow: 0 12px 26px rgba(20, 184, 166, 0.32);
}

/* ── Decorative backdrop (shared with the checkout) ───────── */

.woocommerce-cart .content-block,
.woocommerce-checkout .content-block {
    position: relative;
    isolation: isolate;
}

.woocommerce-cart .wp-block-woocommerce-cart,
.woocommerce-checkout .wp-block-woocommerce-checkout,
.shop-back,
.shop-trust {
    position: relative;
    z-index: 1;
}

/* The section runs the full page width, so it is what clips the backdrop's
   bleed — at the viewport edge, where the cut cannot be seen, instead of at the
   container edge, where it read as a rectangle. `clip` and not `hidden`:
   `hidden` would make the section a scrollport and kill the sticky summary. */
.woocommerce-cart .section,
.woocommerce-checkout .section {
    overflow-x: clip;
}

/* The cart panels are opaque, so the backdrop lives in the gutters beside them
   and in the empty band under the summary — behind the panels it would only be
   a glow nobody sees. */
.shop-deco {
    position: absolute;
    z-index: 0;
    inset: -4rem -16rem -2rem;
    pointer-events: none;
}

/* ── Soft colour: teal behind the summary, green under the line items ── */

.shop-deco__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(5px);
}

.shop-deco__glow--top {
    top: -4rem;
    right: 4rem;
    width: 36rem;
    height: 36rem;
    background: radial-gradient(circle, rgba(45, 212, 191, 0.2), rgba(45, 212, 191, 0) 64%);
}

.shop-deco__glow--bottom {
    bottom: -10rem;
    left: 4rem;
    width: 32rem;
    height: 32rem;
    background: radial-gradient(circle, rgba(34, 197, 94, 0.16), rgba(34, 197, 94, 0) 66%);
}

/* The dot field sits in the open band beside the "back to shop" button. */
.shop-deco__dots {
    position: absolute;
    left: 42rem;
    bottom: 8.5rem;
    width: 20rem;
    height: 6rem;
    background-image: radial-gradient(circle, rgba(22, 163, 74, 0.3) 1.1px, transparent 1.1px);
    background-size: 15px 15px;
    -webkit-mask-image: radial-gradient(ellipse at 60% 50%, #000 6%, transparent 66%);
    mask-image: radial-gradient(ellipse at 60% 50%, #000 6%, transparent 66%);
}

/* ── The orbit: the footer motif, one large and one small ── */

/* Centred on the container edge — the 16rem matches the backdrop's bleed, and
   the half-width shift is what puts the centre on the edge whatever the orbit
   measures: the outer half reads in the gutter, the inner half slips behind the
   panels. */
.shop-deco__orbit {
    position: absolute;
    top: 1rem;
    right: 16rem;
    width: clamp(20rem, 30vw, 30rem);
    height: auto;
    translate: 50% 0;
}

.shop-deco__orbit--sm {
    top: auto;
    right: auto;
    bottom: 1rem;
    left: 16rem;
    width: clamp(10rem, 15vw, 14rem);
    opacity: 0.65;
    translate: -50% 0;
}

.shop-deco__orbit circle,
.shop-deco__orbit line {
    fill: none;
    stroke: var(--t500);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.shop-deco__rings circle {
    stroke-opacity: 0.3;
}

.shop-deco__ring {
    stroke-opacity: 0.22;
}

.shop-deco__disc {
    fill: rgba(22, 163, 74, 0.05);
    stroke: var(--g500);
    stroke-opacity: 0.22;
    stroke-width: 1.5;
}

.shop-deco__core {
    fill: rgba(20, 184, 166, 0.08);
    stroke-opacity: 0.34;
    stroke-width: 1.5;
}

.shop-deco__ticks line {
    stroke-opacity: 0.4;
    stroke-width: 2;
    stroke-linecap: round;
}

.shop-deco__nodes circle {
    fill: var(--t500);
    fill-opacity: 0.32;
    stroke: none;
}

.shop-deco__bolt {
    fill: var(--g600);
    fill-opacity: 0.38;
    stroke: none;
}

/* Only the dashed rings move, slowly enough to read as light rather than
   animation — the dashes drift, the panels stay still. */
.shop-deco__rings {
    transform-box: view-box;
    transform-origin: 50% 50%;
    animation: shop-orbit 140s linear infinite;
}

.shop-deco__orbit--sm .shop-deco__rings {
    animation-duration: 100s;
    animation-direction: reverse;
}

@keyframes shop-orbit {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .shop-deco__rings { animation: none; }
}

/* A whisper of colour in the corner of the summary, nothing more. */
.wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-block::after {
    position: absolute;
    z-index: 0;
    top: -7rem;
    right: -6rem;
    width: 16rem;
    height: 16rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(45, 212, 191, 0.16), transparent 66%);
    content: '';
    pointer-events: none;
}

.wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-block > * {
    position: relative;
    z-index: 1;
}

/* ── Reassurance strip, under the cart and the checkout ───── */

/* Tagged `ul` on purpose: the strip is a list inside .content-block, whose
   prose rule indents every list by 1.25rem, and a bare .shop-trust loses that
   tie — which is what pushed the cards out of line with the cart above them. */
ul.shop-trust {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.shop-trust__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.95rem 1.1rem;
    border: 1px solid rgba(43, 112, 67, 0.14);
    border-radius: 18px;
    background: linear-gradient(135deg, #fff, #f6fbf8);
}

.shop-trust__icon {
    display: grid;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--g600), var(--t500));
    color: #fff;
}

.shop-trust__icon svg {
    width: 21px;
    height: 21px;
}

.shop-trust__body {
    min-width: 0;
}

.shop-trust__title {
    display: block;
    color: var(--color-text);
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.3;
}

.shop-trust__text {
    display: block;
    color: var(--color-text-3);
    font-size: 0.78rem;
    line-height: 1.45;
}

.shop-back {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    justify-self: start;
    padding: 0.7rem 1.25rem;
    border: 1.5px solid var(--color-border-2);
    border-radius: 999px;
    background: #fff;
    color: var(--color-text-2);
    font-size: 0.85rem;
    font-weight: 700;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.shop-back:hover {
    border-color: var(--t500);
    background: var(--t50);
    color: var(--t600);
}

/* ── Responsive ───────────────────────────────────────────── */

@media (max-width: 1024px) {
    .wc-block-cart.wc-block-components-sidebar-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .wc-block-cart .wc-block-cart__sidebar {
        position: static;
        order: 2;
    }

    .wp-block-woocommerce-empty-cart-block .wc-block-grid__products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 782px) {
    .wc-block-cart .wc-block-cart__submit-container--sticky {
        padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
        border-top: 1px solid rgba(43, 112, 67, 0.14);
        box-shadow: 0 -10px 30px rgba(23, 77, 42, 0.12);
    }

    .wc-block-cart .wc-block-cart__submit-container--sticky::before {
        display: none;
    }
}

@media (max-width: 700px) {
    ul.shop-trust {
        grid-template-columns: 1fr;
    }

    /* On one column the decor sits behind the panels almost everywhere, so it
       keeps only the corner accents. */
    .shop-deco__orbit {
        top: -2rem;
        right: 16rem;
        width: 17rem;
    }

    .shop-deco__orbit--sm,
    .shop-deco__dots {
        display: none;
    }

    .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row {
        grid-template-columns: 88px minmax(0, 1fr);
        padding: 1rem 0;
        border-top: 1px solid rgba(43, 112, 67, 0.12);
    }

    .wc-block-cart table.wc-block-cart-items:not(:last-child) .wc-block-cart-items__row {
        border-bottom: 0;
    }

    /* One separator per line item. Stacked into two columns the cells no
       longer sit on a single baseline, so each one drew a rule of its own —
       a broken second line across the gaps between them. The row draws it
       instead, and the first item has nothing above it to be parted from. */
    .wc-block-cart__main .wc-block-cart-items td {
        padding-top: 0;
        padding-bottom: 0;
        border-top: 0;
    }

    .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row:first-child {
        padding-top: 0;
        border-top: 0;
    }

    .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image {
        padding-right: 0.9rem;
    }

    .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity {
        padding-right: 0;
    }

    /* The plugin hides the remove button on narrow layouts and offers no other
       way to empty a line, so it stays — next to the stepper. */
    .wc-block-cart table.wc-block-cart-items .wc-block-cart-item__remove-link {
        display: grid;
    }

    .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total {
        align-self: start;
    }
}

@media (max-width: 480px) {
    .wp-block-woocommerce-empty-cart-block .wc-block-grid__products {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
   Checkout — WooCommerce Blocks in Minado dress
   ============================================================ */

/* Same story as the cart: the block renders itself, so the rules below are
   written against the markup React produces and repeat the plugin's selector
   depth wherever they have to outweigh a plugin declaration. */

/* ── Page frame ───────────────────────────────────────────── */

.woocommerce-checkout .site-main {
    padding: 0 0 clamp(3rem, 5vw, 5rem);
}

.woocommerce-checkout .page-hero {
    padding: clamp(2rem, 3.5vw, 3.25rem) 0 clamp(1.25rem, 2vw, 1.75rem);
    border-bottom: 0;
}

.woocommerce-checkout .page-hero h1 {
    margin: 0;
    font-size: clamp(1.9rem, 3.6vw, 2.9rem);
}

.woocommerce-checkout .section {
    padding: 0;
}

.woocommerce-checkout .content-block {
    gap: 1.35rem;
}

.woocommerce-checkout .wp-block-woocommerce-checkout {
    margin: 0;
}

/* ── The line above the form ──────────────────────────────── */

.checkout-note {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin: 0;
    padding: 0.8rem 1.15rem;
    border: 1px solid rgba(20, 184, 166, 0.3);
    border-radius: 16px;
    background: linear-gradient(135deg, var(--t50), #fff);
    color: var(--color-text-2);
    font-size: 0.88rem;
    line-height: 1.5;
}

.checkout-note svg {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    color: var(--t600);
}

/* ── Two columns: the form, then the summary rail ─────────── */

.wc-block-checkout.wc-block-components-sidebar-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 21.5rem);
    align-items: start;
    gap: 1.5rem;
    margin: 0;
    padding-top: 0;
}

.wc-block-checkout .wc-block-components-main,
.wc-block-checkout .wc-block-components-sidebar {
    width: auto;
    padding: 0;
}

.wc-block-checkout .wc-block-checkout__sidebar {
    margin-bottom: 0;
}

/* The order button and the terms line are moved into this column by
   assets/js/checkout.js — the block renders them at the foot of the form, and
   a grid cannot lift them out of it. */
.wc-block-checkout .wc-block-checkout__sidebar .wp-block-woocommerce-checkout-terms-block {
    margin: 1rem 0 0;
}

.wc-block-checkout .wc-block-checkout__sidebar .wp-block-woocommerce-checkout-actions-block {
    margin: 0.85rem 0 0;
}

.wc-block-checkout .wc-block-checkout__sidebar .wc-block-checkout__actions_row {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 0.75rem;
}

.wc-block-checkout .wc-block-checkout__sidebar .wc-block-components-checkout-return-to-cart-button {
    justify-content: center;
    text-align: center;
}

/* ── Every step is its own card ───────────────────────────── */

.wc-block-checkout .wc-block-components-checkout-step {
    margin: 0 0 1.1rem;
    align-self: start;
    padding: clamp(1rem, 2vw, 1.6rem);
    border: 0;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 2px 6px rgba(23, 77, 42, 0.05), 0 18px 44px rgba(23, 77, 42, 0.09);
}

.wc-block-checkout .wc-block-checkout__form > .wc-block-components-checkout-step:last-of-type {
    margin-bottom: 0;
}

/* The note step holds a single checkbox and no heading. A full card around it
   read as a second white slab stuck to the one above, so it sits in the flow
   as the optional extra it is. */
.wc-block-checkout .wc-block-checkout__order-notes {
    margin-top: 1.25rem;
    padding: 0.9rem clamp(1rem, 2vw, 1.6rem);
    border: 1px dashed rgba(43, 112, 67, 0.28);
    background: transparent;
    box-shadow: none;
}

.wc-block-checkout .wc-block-components-checkout-step__heading {
    margin: 0 0 0.3rem;
}

.wc-block-checkout .wc-block-components-checkout-step__title {
    position: relative;
    margin: 0;
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: clamp(1.02rem, 1.8vw, 1.2rem);
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.3;
    text-transform: none;
}

/* The plugin numbers the steps with a counter parked in the left margin. Here
   the number becomes a badge in front of the title instead. */
.wc-block-checkout .wc-block-checkout__form--with-step-numbers .wc-block-components-checkout-step--with-step-number .wc-block-components-checkout-step__title {
    padding-left: 2.6rem;
}

.wc-block-checkout .wc-block-checkout__form--with-step-numbers .wc-block-components-checkout-step--with-step-number .wc-block-components-checkout-step__title::before {
    position: absolute;
    display: grid;
    width: 1.95rem;
    height: 1.95rem;
    top: 50%;
    left: 0;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--g600), var(--t500));
    color: #fff;
    content: counter(checkout-step);
    counter-increment: checkout-step;
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 800;
    box-shadow: 0 6px 16px rgba(20, 184, 166, 0.28);
    transform: translateY(-50%);
}

.wc-block-checkout .wc-block-components-checkout-step__description {
    margin: 0 0 0.9rem;
    color: var(--color-text-3);
    font-size: 0.84rem;
    line-height: 1.5;
}

.wc-block-checkout .wc-block-components-checkout-step__heading-content {
    color: var(--color-text-3);
    font-size: 0.82rem;
}

.wc-block-checkout .wc-block-components-checkout-step__heading-content a,
.wc-block-checkout .wc-block-components-checkout-step__description a {
    color: var(--g700);
    font-weight: 700;
}

/* The plugin frames the step's content and runs a hairline down its left side;
   the card and the icon badge do both jobs already. `content: none` stops the
   pseudo-elements being generated at all, and the flags are there because the
   plugin's own rules are more specific than anything a theme can write without
   copying its whole selector chain. Note that the badge lives on __heading,
   which is deliberately left out of this list. */
.wc-block-checkout .wc-block-components-checkout-step__container::before,
.wc-block-checkout .wc-block-components-checkout-step__container::after,
.wc-block-checkout .wc-block-components-checkout-step__content::before,
.wc-block-checkout .wc-block-components-checkout-step__content::after,
.wc-block-checkout .wc-block-components-checkout-step__description::before,
.wc-block-checkout .wc-block-components-checkout-step__description::after {
    display: none !important;
    border: 0 !important;
    background: none !important;
    content: none !important;
}

.wc-block-checkout .wc-block-components-checkout-step__content {
    padding: 0;
}

/* ── An icon badge in front of every step title ───────────── */

/* The badge sits on the heading rather than on the title, which already
   carries the plugin's step-number counter. One pseudo-element does it: the
   icon is a background layer over the gradient, so each section below is a
   single line naming its picture. */
.wc-block-checkout .wc-block-components-checkout-step__heading {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.wc-block-checkout .wc-block-components-checkout-step__heading::before {
    display: block;
    width: 2.4rem;
    height: 2.4rem;
    flex: 0 0 auto;
    border-radius: 50%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-5.4 7-11a7 7 0 1 0-14 0c0 5.6 7 11 7 11Z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E") center / 1.15rem 1.15rem no-repeat,
        linear-gradient(135deg, var(--g600), var(--t500));
    content: '';
    box-shadow: 0 8px 20px rgba(20, 184, 166, 0.28);
}

.wc-block-checkout .wp-block-woocommerce-checkout-contact-information-block .wc-block-components-checkout-step__heading::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E"),
        linear-gradient(135deg, var(--g600), var(--t500));
}

.wc-block-checkout .wp-block-woocommerce-checkout-shipping-method-block .wc-block-components-checkout-step__heading::before,
.wc-block-checkout .wp-block-woocommerce-checkout-shipping-methods-block .wc-block-components-checkout-step__heading::before,
.wc-block-checkout .wp-block-woocommerce-checkout-additional-information-block .wc-block-components-checkout-step__heading::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7.4h10.4v9.2H3z'/%3E%3Cpath d='M13.4 10.6H17l3.6 3.5v2.5h-7.2z'/%3E%3Ccircle cx='7' cy='18.4' r='1.7'/%3E%3Ccircle cx='17' cy='18.4' r='1.7'/%3E%3C/svg%3E"),
        linear-gradient(135deg, var(--g600), var(--t500));
}

.wc-block-checkout .wp-block-woocommerce-checkout-payment-block .wc-block-components-checkout-step__heading::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.6' y='5.4' width='18.8' height='13.2' rx='2.6'/%3E%3Cpath d='M2.6 10.2h18.8M6.4 14.6h3.4'/%3E%3C/svg%3E"),
        linear-gradient(135deg, var(--g600), var(--t500));
}

.wc-block-checkout .wp-block-woocommerce-checkout-order-note-block .wc-block-components-checkout-step__heading::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h14v16l-4-3-3 3-3-3-4 3z'/%3E%3Cpath d='M9 9h6M9 13h4'/%3E%3C/svg%3E"),
        linear-gradient(135deg, var(--g600), var(--t500));
}

/* ── Text fields ──────────────────────────────────────────── */

/* Written against the elements rather than the wrappers: the block wraps a
   country picker, a state picker and a plain select in three different
   components, and all of them have to end up looking like one field. */
.wc-block-checkout .wc-block-checkout__form input:not([type='radio']):not([type='checkbox']):not([type='submit']),
.wc-block-checkout .wc-block-checkout__form select,
.wc-block-checkout .wc-block-checkout__form textarea {
    padding: 1.55em 0.75rem 0.5em;
    border: 1.5px solid var(--color-border);
    border-radius: 14px;
    background-color: #fff;
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 0.95rem;
    box-shadow: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.wc-block-checkout .wc-block-checkout__form select {
    min-height: 3.5rem;
    line-height: 1.4;
}

.wc-block-checkout .wc-block-checkout__form textarea {
    padding: 0.85rem 0.75rem;
    line-height: 1.5;
}

.wc-block-checkout .wc-block-checkout__form input:not([type='radio']):not([type='checkbox']):focus,
.wc-block-checkout .wc-block-checkout__form select:focus,
.wc-block-checkout .wc-block-checkout__form textarea:focus {
    border-color: var(--t500);
    outline: 0;
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.16);
}

.wc-block-checkout .wc-block-components-text-input label {
    left: 0.75rem;
    color: var(--color-text-3);
}

.wc-block-checkout .wc-block-components-text-input.has-error input,
.wc-block-checkout .wc-block-components-text-input.has-error input:focus {
    border-color: #cc1818;
    box-shadow: 0 0 0 3px rgba(204, 24, 24, 0.12);
}

.wc-block-checkout .wc-block-components-validation-error {
    color: #cc1818;
    font-size: 0.78rem;
}

/* ── Checkboxes ───────────────────────────────────────────── */

.wc-block-checkout .wc-block-components-checkbox label {
    color: var(--color-text-2);
    font-size: 0.86rem;
    line-height: 1.45;
}

.wc-block-checkout .wc-block-components-checkbox .wc-block-components-checkbox__input[type='checkbox'] {
    width: 20px;
    height: 20px;
    border: 1.5px solid var(--color-border-2);
    border-radius: 6px;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.wc-block-checkout .wc-block-components-checkbox .wc-block-components-checkbox__input[type='checkbox']:checked {
    border-color: var(--g600);
    background: linear-gradient(135deg, var(--g600), var(--t500));
}

.wc-block-checkout .wc-block-components-checkbox .wc-block-components-checkbox__mark {
    fill: #fff;
}

.wc-block-checkout .wc-block-components-checkbox .wc-block-components-checkbox__input[type='checkbox']:focus {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.2);
}

/* ── No billing address ───────────────────────────────────── */

/* Nothing is charged, so there is nobody to bill. The step's fields are all
   switched off in inc/woocommerce.php, which would leave a headed blank card. */
.wc-block-checkout .wp-block-woocommerce-checkout-billing-address-block,
.wc-block-checkout .wp-block-woocommerce-checkout-shipping-address-block {
    display: none;
}

/* ── Two fields to a row ──────────────────────────────────── */

@media (min-width: 620px) {
    .wc-block-checkout .wc-block-checkout__contact-fields .wc-block-components-address-form,
    .wc-block-checkout .wc-block-checkout__order-fields .wc-block-components-address-form {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
    }

    .wc-block-checkout .wc-block-components-address-form > * {
        margin-top: 0;
    }

    /* Name and surname first, then the phone beside the e-mail — the order the
       fields are asked for, not the order the block renders them in. */
    .wc-block-checkout .wc-block-components-address-form__minado-first-name { order: 1; }
    .wc-block-checkout .wc-block-components-address-form__minado-last-name { order: 2; }
    .wc-block-checkout .wc-block-components-address-form__minado-phone { order: 3; }
    .wc-block-checkout .wc-block-components-address-form__email { order: 4; }

    .wc-block-checkout .wc-block-components-select-input-minado-delivery,
    .wc-block-checkout .wc-block-checkout__contact-fields .wc-block-checkout__guest-checkout-notice {
        grid-column: 1 / -1;
    }
}

/* ── Selects ──────────────────────────────────────────────── */

.wc-block-checkout .wc-blocks-components-select__container {
    border: 0;
    background: none;
}

.wc-block-checkout .wc-blocks-components-select__label {
    left: 0.75rem;
    color: var(--color-text-3);
}

/* ── Delivery and payment options ─────────────────────────── */

/* One frame per option. The plugin puts the label and, for the selected one,
   its description in an accordion wrapper, so the card is the wrapper; a radio
   list without accordions (shipping rates) frames the label itself. */
.wc-block-checkout .wc-block-components-radio-control-accordion-option,
.wc-block-checkout .wc-block-components-radio-control > label.wc-block-components-radio-control__option {
    margin: 0 0 0.6rem;
    overflow: hidden;
    border: 1.5px solid var(--color-border);
    border-radius: 16px;
    background: #fff;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.wc-block-checkout .wc-block-components-radio-control-accordion-option:last-child,
.wc-block-checkout .wc-block-components-radio-control > label.wc-block-components-radio-control__option:last-child {
    margin-bottom: 0;
}

.wc-block-checkout .wc-block-components-radio-control-accordion-option:hover,
.wc-block-checkout .wc-block-components-radio-control > label.wc-block-components-radio-control__option:hover {
    border-color: var(--t400);
}

.wc-block-checkout .wc-block-components-radio-control .wc-block-components-radio-control__option {
    margin: 0;
    padding: 0.85rem 1rem 0.85rem 2.6rem;
}

/* The plugin marks the selection with an inset ring and separates options with
   hairlines; the cards do both jobs already. */
.wc-block-checkout .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option--checked-option-highlighted,
.wc-block-checkout .wc-block-components-radio-control--highlight-checked label.wc-block-components-radio-control__option--checked-option-highlighted {
    border-color: var(--g600);
    border-radius: 16px;
    background: linear-gradient(135deg, var(--g50), #fff);
    box-shadow: none;
}

/* Three of them: the group frames itself, each option draws a hairline above
   the next, and the wrapper repeats it. The cards do all of that already. */
.wc-block-checkout .wc-block-components-radio-control::before,
.wc-block-checkout .wc-block-components-radio-control::after,
.wc-block-checkout .wc-block-components-radio-control__option::before,
.wc-block-checkout .wc-block-components-radio-control__option::after,
.wc-block-checkout .wc-block-components-radio-control-accordion-option::before,
.wc-block-checkout .wc-block-components-radio-control-accordion-option::after {
    display: none !important;
    border: 0 !important;
    background: none !important;
    content: none !important;
}

/* The plugin centres the dial against the whole option and paints it black;
   here it lines up with the option's first line and takes the brand green. */
.wc-block-checkout .wc-block-components-radio-control .wc-block-components-radio-control__input {
    top: 1.1rem;
    left: 1rem;
    border-color: var(--color-border-2);
    transform: none;
}

.wc-block-checkout .wc-block-components-radio-control .wc-block-components-radio-control__input:checked {
    border-color: var(--g600);
}

.wc-block-checkout .wc-block-components-radio-control .wc-block-components-radio-control__input:checked::before {
    background: linear-gradient(135deg, var(--g600), var(--t500));
}

.wc-block-checkout .wc-block-components-radio-control__label,
.wc-block-checkout .wc-block-components-payment-method-label {
    color: var(--color-text);
    font-size: 0.92rem;
    font-weight: 700;
}

.wc-block-checkout .wc-block-components-radio-control__secondary-label,
.wc-block-checkout .wc-block-components-radio-control__secondary-description {
    color: var(--g700);
    font-size: 0.9rem;
    font-weight: 800;
}

/* The bank mark rides with the title: the label is the flex line, so the mark
   keeps the text's baseline instead of stretching the option. */
.wc-block-checkout .minado-payment__title {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}

.wc-block-checkout .minado-payment__logo {
    height: 20px;
    width: auto;
    flex: 0 0 auto;
    opacity: 0.9;
}

.wc-block-checkout .wc-block-components-radio-control__description,
.wc-block-checkout .minado-payment__note {
    margin: 0;
    color: var(--color-text-3);
    font-size: 0.81rem;
    line-height: 1.45;
}

.wc-block-checkout .wc-block-components-radio-control-accordion-content {
    margin-top: -0.4rem;
    padding: 0 1rem 0.9rem 2.6rem;
}

/* ── Order summary rail ───────────────────────────────────── */

.wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block {
    position: relative;
    overflow: hidden;
    margin-bottom: 0;
    padding: clamp(1rem, 1.8vw, 1.45rem);
    border: 0;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 2px 6px rgba(23, 77, 42, 0.05), 0 18px 44px rgba(23, 77, 42, 0.09);
    font-size: 0.9rem;
}

/* A whisper of colour in the corner, the same as the cart's summary. */
.wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block::after {
    position: absolute;
    z-index: 0;
    top: -7rem;
    right: -6rem;
    width: 16rem;
    height: 16rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(45, 212, 191, 0.16), transparent 66%);
    content: '';
    pointer-events: none;
}

.wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block > * {
    position: relative;
    z-index: 1;
}

/* Written against the block class as well as the element: the plugin's own
   rules carry two classes, and a tie is settled by whichever stylesheet the
   page happens to load last. */
.wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__title {
    padding: 0 0 0.9rem;
    border-top: 0;
    border-bottom: 0;
    cursor: default;
}

/* On a narrow screen the plugin draws the summary twice: a collapsed accordion
   in the sidebar and a second, unstyled copy above the order button. Here the
   sidebar card is already the first thing on the page, so that copy goes and
   the card simply stays open — which also drops the total repeated beside the
   heading and the chevron that no longer opens anything. */
.wc-block-checkout .checkout-order-summary-block-fill-wrapper,
.wc-block-checkout .wc-block-components-checkout-order-summary__title-icon,
.wc-block-checkout .wc-block-components-checkout-order-summary__title-price {
    display: none;
}

.wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__content {
    display: block;
}

.wc-block-checkout .wc-block-components-checkout-order-summary__title-text {
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: 1.02rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    text-transform: none;
}

/* Three columns — thumbnail, name, price — so the name gets the width instead
   of wrapping to five lines beside a squeezed price. */
.wc-block-checkout .wc-block-components-order-summary-item {
    display: grid;
    grid-template-columns: 3.4rem minmax(0, 1fr) auto;
    align-items: start;
    gap: 0.8rem;
    padding: 0.95rem 0;
    border-bottom: 1px solid rgba(43, 112, 67, 0.1);
}

.wc-block-checkout .wc-block-components-order-summary-item:last-child {
    border-bottom: 0;
}

/* The plugin draws its own separator as a pseudo-element on top of the border
   above, which is how the same gap ended up with two lines in it. */
.wc-block-checkout .wc-block-components-order-summary-item::after {
    content: none;
}

/* The single rule that separates what is being bought from what it costs. */
.wc-block-checkout .wp-block-woocommerce-checkout-order-summary-cart-items-block {
    padding-bottom: 0.9rem;
    border-bottom: 1px solid rgba(43, 112, 67, 0.12);
}

.wc-block-checkout .wc-block-components-order-summary-item__image {
    width: 3.4rem;
    margin: 0;
    padding: 0;
}

.wc-block-checkout .wc-block-components-order-summary-item__image img {
    width: 100%;
    height: auto;
    padding: 0.25rem;
    border: 1px solid rgba(43, 112, 67, 0.12);
    border-radius: 14px;
    background: linear-gradient(145deg, var(--g50), #fff);
    mix-blend-mode: multiply;
}

.wc-block-checkout .wc-block-components-order-summary-item__quantity {
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--g600), var(--t500));
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    box-shadow: 0 4px 12px rgba(20, 184, 166, 0.3);
}

.wc-block-checkout .wc-block-components-order-summary-item__description {
    padding: 0;
}

.wc-block-checkout .wc-block-components-product-name {
    display: block;
    color: var(--color-text);
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.35;
}

/* The item already shows its quantity as a badge and its line total on the
   right; the unit price beside them was a third figure with nothing to say
   which of the three it was. The description is the product's, and the summary
   is not where it is read — it arrived clipped mid-word. */
.wc-block-checkout .wc-block-components-order-summary-item__individual-prices,
.wc-block-checkout .wc-block-components-product-metadata__description {
    display: none;
}

.wc-block-checkout .wc-block-components-product-metadata {
    margin-top: 0.15rem;
}

.wc-block-checkout .wc-block-components-order-summary-item__total-price {
    color: var(--color-text);
    font-size: 0.9rem;
    font-weight: 800;
    white-space: nowrap;
}

.wc-block-checkout .wc-block-components-totals-item__label {
    color: var(--color-text-2);
    font-size: 0.88rem;
}

.wc-block-checkout .wc-block-components-totals-item__value {
    color: var(--color-text);
    font-size: 0.92rem;
    font-weight: 700;
}

/* The plugin rules every totals row. Below the item list there is one figure
   worth reading, so the rules come off and spacing does the separating. */
.wc-block-checkout .wc-block-components-totals-wrapper,
.wc-block-checkout .wc-block-components-totals-wrapper:first-child {
    padding: 0.35rem 0;
    border-top: 0;
}

/* Fees, discounts and taxes render their wrapper whether or not they hold a
   row, and an empty one still took up space in the stack. */
.wc-block-checkout .wc-block-components-totals-wrapper:not(:has(*)) {
    display: none;
}

/* Nothing is added to the order here — no shipping zone, no tax, no coupons —
   so the subtotal is the total written twice. It comes back the moment a
   charge line does. */
.wc-block-checkout .wc-block-components-checkout-order-summary__content:not(:has(
        .wp-block-woocommerce-checkout-order-summary-fee-block > *,
        .wp-block-woocommerce-checkout-order-summary-discount-block > *,
        .wp-block-woocommerce-checkout-order-summary-shipping-block > *,
        .wp-block-woocommerce-checkout-order-summary-taxes-block > *))
    .wp-block-woocommerce-checkout-order-summary-subtotal-block {
    display: none;
}

.wc-block-checkout .wc-block-components-totals-footer-item {
    padding-top: 0.55rem;
}

.wc-block-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 800;
}

.wc-block-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    color: var(--g700);
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 2.2vw, 1.6rem);
    font-weight: 800;
    letter-spacing: -0.02em;
}

.wc-block-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__description {
    color: var(--color-text-3);
    font-size: 0.76rem;
}

/* Blocks the shop does not use — express payment, pickup points, shipping
   methods without a zone — still render a wrapper holding a non-breaking
   space, which pushes the cards apart. `:has(*)` tells an empty one from a
   filled one, so the day a shipping zone exists the block comes back. */
.wc-block-checkout .wp-block-woocommerce-checkout-express-payment-block:not(:has(*)),
.wc-block-checkout .wp-block-woocommerce-checkout-shipping-method-block:not(:has(*)),
.wc-block-checkout .wp-block-woocommerce-checkout-pickup-options-block:not(:has(*)) {
    display: none;
}

/* Ukraine is the only country on offer, so the picker has nothing to pick. */
.wc-block-checkout .wc-block-components-country-input {
    display: none;
}

.wc-block-checkout .wc-block-components-address-form__address_2-toggle {
    color: var(--g700);
    font-size: 0.82rem;
    font-weight: 700;
}

.wc-block-checkout .wc-block-components-address-form__address_2-toggle:hover {
    color: var(--t600);
}

/* ── Place the order ──────────────────────────────────────── */

.wc-block-checkout .wc-block-checkout__actions {
    padding: 0;
}

.wc-block-checkout .wc-block-checkout__actions_row {
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: space-between;
}

.wc-block-checkout .wc-block-components-checkout-place-order-button {
    min-height: 56px;
    padding: 0.85rem 1.6rem;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--g600), var(--t500));
    color: #fff;
    font-family: var(--font-body);
    font-size: 0.98rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    box-shadow: 0 12px 30px rgba(20, 184, 166, 0.32);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.wc-block-checkout .wc-block-components-checkout-place-order-button:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--g500), var(--t400));
    box-shadow: 0 16px 36px rgba(20, 184, 166, 0.38);
    transform: translateY(-2px);
}

.wc-block-checkout .wc-block-components-checkout-place-order-button:active:not(:disabled) {
    transform: translateY(0);
}

.wc-block-checkout .wc-block-components-checkout-return-to-cart-button {
    color: var(--color-text-3);
    font-size: 0.85rem;
    font-weight: 700;
}

.wc-block-checkout .wc-block-components-checkout-return-to-cart-button:hover {
    color: var(--t600);
}

.wc-block-checkout .wc-block-checkout__terms {
    color: var(--color-text-3);
    font-size: 0.8rem;
    line-height: 1.5;
}

.wp-block-woocommerce-checkout .wc-block-components-notice-banner {
    border-radius: 16px;
}

.wp-block-woocommerce-checkout .wc-block-components-notice-banner.is-info,
.wp-block-woocommerce-checkout .wc-block-components-notice-banner.is-success {
    border-color: rgba(43, 112, 67, 0.3);
    background: var(--g50);
    color: var(--g900);
}

.wp-block-woocommerce-checkout .wc-block-components-notice-banner.is-success > svg {
    background-color: var(--g600);
}

/* ── Empty checkout ───────────────────────────────────────── */

.wc-block-checkout-empty,
.wc-block-checkout-error {
    padding: clamp(1.75rem, 4vw, 3rem) clamp(1rem, 3vw, 2.5rem);
    border: 0;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 2px 6px rgba(23, 77, 42, 0.05), 0 18px 44px rgba(23, 77, 42, 0.09);
    text-align: center;
}

.wc-block-checkout-empty__title,
.wc-block-checkout-error__title {
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 2.4vw, 1.6rem);
    font-weight: 800;
}

.wc-block-checkout-empty__image svg,
.wc-block-checkout-error__image svg {
    fill: var(--g500);
}

/* ── Responsive ───────────────────────────────────────────── */

@media (max-width: 1024px) {
    .wc-block-checkout.wc-block-components-sidebar-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .wc-block-checkout .wc-block-checkout__sidebar {
        position: static;
        order: -1;
    }
}

@media (max-width: 700px) {
    .wc-block-checkout .wc-block-checkout__actions_row {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .wc-block-checkout .wc-block-components-checkout-return-to-cart-button {
        justify-content: center;
        text-align: center;
    }
}

/* ============================================================
   Order received — confirmation screen
   ============================================================ */

.woocommerce-order-received .site-main {
    padding: clamp(2rem, 4vw, 4rem) 0 clamp(4rem, 7vw, 7rem);
    background:
        radial-gradient(circle at 92% 8%, rgba(45, 212, 191, 0.13), transparent 23rem),
        linear-gradient(180deg, var(--g50), #fff 38rem);
}

.woocommerce-order-received .content-block { gap: 0; }

.minado-order-confirmation {
    display: grid;
    gap: clamp(1.15rem, 2.5vw, 1.7rem);
    width: min(100%, 1060px);
    margin: 0 auto;
}

.minado-order-confirmation__hero,
.minado-order-confirmation__card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(43, 112, 67, 0.15);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 2px 6px rgba(23, 77, 42, 0.04), 0 22px 56px rgba(23, 77, 42, 0.1);
}

.minado-order-confirmation__hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(15rem, 22rem);
    gap: 2rem;
    padding: clamp(1.5rem, 4vw, 3rem);
    isolation: isolate;
}

.minado-order-confirmation__hero::before,
.minado-order-confirmation__hero::after {
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    content: '';
    pointer-events: none;
}

.minado-order-confirmation__hero::before {
    width: 26rem;
    height: 26rem;
    top: -14rem;
    right: -8rem;
    border: 1px solid rgba(45, 212, 191, 0.22);
    box-shadow: 0 0 0 3.4rem rgba(45, 212, 191, 0.035), 0 0 0 6.8rem rgba(45, 212, 191, 0.025);
}

.minado-order-confirmation__hero::after {
    width: 14rem;
    height: 14rem;
    bottom: -9rem;
    right: 13rem;
    background: radial-gradient(circle, rgba(34, 197, 94, 0.12), transparent 68%);
}

.minado-order-confirmation__hero-copy {
    position: relative;
    z-index: 1;
    max-width: 41rem;
}

.minado-order-confirmation__icon {
    display: grid;
    place-items: center;
    width: 4rem;
    height: 4rem;
    margin-bottom: 1.15rem;
    border: 1px solid rgba(34, 197, 94, 0.36);
    border-radius: 50%;
    background: linear-gradient(145deg, rgba(240, 253, 244, 0.98), rgba(204, 251, 241, 0.8));
    color: var(--g700);
    box-shadow: 0 0 0 0.55rem rgba(34, 197, 94, 0.08);
}

.minado-order-confirmation__icon svg { width: 2rem; height: 2rem; }

.minado-order-confirmation__icon--error {
    margin-inline: auto;
    border-color: rgba(239, 68, 68, 0.36);
    background: rgba(254, 242, 242, 0.94);
    color: #dc2626;
    box-shadow: 0 0 0 0.55rem rgba(239, 68, 68, 0.07);
}

.minado-order-confirmation__eyebrow,
.minado-order-card__kicker,
.minado-order-card__header p {
    margin: 0 0 0.45rem;
    color: var(--t600);
    font-size: 0.73rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.minado-order-confirmation h1,
.minado-order-confirmation h2 { margin: 0; color: var(--color-text); }

.minado-order-confirmation h1 {
    max-width: 16ch;
    font-size: clamp(2rem, 4vw, 3.35rem);
    letter-spacing: -0.05em;
    line-height: 1.03;
}

.minado-order-confirmation__intro {
    max-width: 58ch;
    margin: 0.9rem 0 0;
    color: var(--color-text-2);
    font-size: 0.96rem;
    line-height: 1.65;
}

.minado-order-confirmation__facts {
    display: grid;
    align-content: center;
    gap: 0.65rem;
    margin: 0;
}

.minado-order-confirmation__facts div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.8rem 0;
    border-bottom: 1px solid rgba(43, 112, 67, 0.12);
}

.minado-order-confirmation__facts div:last-child { border-bottom: 0; }

.minado-order-confirmation__facts dt {
    color: var(--color-text-3);
    font-size: 0.8rem;
}

.minado-order-confirmation__facts dd {
    margin: 0;
    color: var(--color-text);
    font-size: 0.88rem;
    font-weight: 800;
    text-align: right;
}

.minado-order-confirmation__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(17rem, 0.8fr);
    gap: clamp(1.15rem, 2.5vw, 1.7rem);
    align-items: start;
}

.minado-order-confirmation__main {
    display: grid;
    gap: 1.15rem;
}

.minado-order-confirmation__main .minado-order-confirmation__actions {
    justify-content: flex-start;
    padding-top: 0;
}

.minado-order-card { padding: clamp(1.2rem, 3vw, 1.8rem); }

.minado-order-card--details { padding: 0; }

.minado-order-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: clamp(1.2rem, 3vw, 1.8rem);
    border-bottom: 1px solid rgba(43, 112, 67, 0.13);
}

.minado-order-card__header h2,
.minado-order-card h2 {
    font-size: clamp(1.15rem, 2vw, 1.4rem);
    letter-spacing: -0.025em;
    line-height: 1.25;
}

.minado-order-card__count {
    flex: 0 0 auto;
    padding: 0.42rem 0.68rem;
    border-radius: 999px;
    background: var(--g50);
    color: var(--g700);
    font-size: 0.75rem;
    font-weight: 800;
}

.minado-order-items,
.minado-order-steps {
    margin: 0;
    padding: 0;
    list-style: none;
}

.minado-order-items { padding: 0 clamp(1.2rem, 3vw, 1.8rem); }

.minado-order-item {
    display: grid;
    grid-template-columns: 4rem minmax(0, 1fr) auto;
    gap: 0.85rem;
    align-items: center;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(43, 112, 67, 0.11);
}

.minado-order-item__image {
    display: grid;
    place-items: center;
    width: 4rem;
    height: 4rem;
    overflow: hidden;
    border: 1px solid rgba(43, 112, 67, 0.12);
    border-radius: 13px;
    background: linear-gradient(145deg, var(--g50), #fff);
}

.minado-order-item__image img { width: 100%; height: 100%; object-fit: contain; }

.minado-order-item__body { min-width: 0; }

.minado-order-item__body > a,
.minado-order-item__body > strong {
    display: block;
    color: var(--color-text);
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1.35;
}

.minado-order-item__body > a:hover { color: var(--t600); }

.minado-order-item__body > span,
.minado-order-item__body .wc-item-meta {
    display: block;
    margin-top: 0.22rem;
    color: var(--color-text-3);
    font-size: 0.78rem;
    line-height: 1.4;
}

.minado-order-item__body .wc-item-meta { padding: 0; list-style: none; }
.minado-order-item__body .wc-item-meta li { display: inline; }
.minado-order-item__body .wc-item-meta li + li::before { content: ' · '; }
.minado-order-item__body .wc-item-meta p { display: inline; margin: 0; }

.minado-order-item__total {
    color: var(--color-text);
    font-size: 0.88rem;
    text-align: right;
    white-space: nowrap;
}

.minado-order-totals {
    display: grid;
    gap: 0.65rem;
    margin: 0;
    padding: 1.1rem clamp(1.2rem, 3vw, 1.8rem) clamp(1.2rem, 3vw, 1.8rem);
}

.minado-order-totals div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    color: var(--color-text-2);
    font-size: 0.88rem;
}

.minado-order-totals dd { margin: 0; font-weight: 700; text-align: right; }
.minado-order-totals div:last-child { margin-top: 0.25rem; padding-top: 0.9rem; border-top: 1px solid rgba(43, 112, 67, 0.15); color: var(--color-text); font-size: 1rem; }
.minado-order-totals div:last-child dd { color: var(--g800); font-size: 1.12rem; font-weight: 800; }

.minado-order-aside { display: grid; gap: 1.15rem; }

.minado-order-card--next {
    background: linear-gradient(145deg, var(--g800), var(--g700));
    border-color: transparent;
    color: rgba(255, 255, 255, 0.72);
}

.minado-order-card--next h2 { color: #fff; }
.minado-order-card--next .minado-order-card__kicker { color: var(--t300); }

.minado-order-steps { display: grid; gap: 1rem; margin-top: 1.2rem; }

.minado-order-steps li { display: grid; grid-template-columns: 1.7rem minmax(0, 1fr); gap: 0.75rem; align-items: start; }

.minado-order-steps li > span {
    display: grid;
    place-items: center;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    background: rgba(94, 234, 212, 0.16);
    color: var(--t300);
    font-size: 0.72rem;
    font-weight: 800;
}

.minado-order-steps p { display: grid; gap: 0.12rem; margin: 0; font-size: 0.8rem; line-height: 1.45; }
.minado-order-steps b { color: #fff; font-size: 0.84rem; }

.minado-order-card--contact { display: grid; gap: 0.38rem; }
.minado-order-card--contact > p { margin: 0; color: var(--color-text-2); font-size: 0.88rem; }
.minado-order-card--contact > p b { color: var(--color-text); }
.minado-order-card--contact > a { color: var(--g700); font-size: 0.87rem; font-weight: 700; overflow-wrap: anywhere; }
.minado-order-card--contact > a:hover { color: var(--t600); }

.minado-order-card__delivery {
    display: grid;
    gap: 0.16rem;
    margin-top: 0.8rem;
    padding-top: 0.8rem;
    border-top: 1px solid rgba(43, 112, 67, 0.12);
    color: var(--color-text-3);
    font-size: 0.8rem;
    line-height: 1.45;
}

.minado-order-card__delivery b,
.minado-order-card__payment b { color: var(--color-text); }
.minado-order-card__payment { margin: 0.55rem 0 0 !important; color: var(--color-text-3) !important; font-size: 0.78rem !important; line-height: 1.5; }

.minado-order-confirmation__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding-top: 0.2rem;
}

.minado-order-confirmation__actions .button { width: auto; }

.minado-order-confirmation__link {
    color: var(--g700);
    font-size: 0.88rem;
    font-weight: 800;
}

.minado-order-confirmation__link:hover { color: var(--t600); }

.minado-order-confirmation--missing,
.minado-order-confirmation--failed { min-height: 26rem; place-items: center; }

.minado-order-confirmation__card {
    display: grid;
    justify-items: center;
    max-width: 39rem;
    padding: clamp(2rem, 5vw, 3.75rem);
    text-align: center;
}

.minado-order-confirmation__card h1 { max-width: none; }
.minado-order-confirmation__card > p:not(.minado-order-confirmation__eyebrow) { max-width: 48ch; margin: 0.9rem 0 1.4rem; color: var(--color-text-2); line-height: 1.6; }

@media (max-width: 820px) {
    .minado-order-confirmation__hero,
    .minado-order-confirmation__layout { grid-template-columns: 1fr; }

    .minado-order-confirmation__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .minado-order-confirmation__facts div { display: grid; gap: 0.25rem; padding-bottom: 0; border-bottom: 0; }
    .minado-order-confirmation__facts dd { text-align: left; }
}

@media (max-width: 560px) {
    .minado-order-confirmation__hero,
    .minado-order-card,
    .minado-order-confirmation__card { border-radius: 20px; }

    .minado-order-confirmation__facts { grid-template-columns: 1fr; gap: 0; }
    .minado-order-confirmation__facts div { display: flex; padding: 0.7rem 0; border-bottom: 1px solid rgba(43, 112, 67, 0.12); }
    .minado-order-confirmation__facts dd { text-align: right; }

    .minado-order-item { grid-template-columns: 3.3rem minmax(0, 1fr); }
    .minado-order-item__image { width: 3.3rem; height: 3.3rem; }
    .minado-order-item__total { grid-column: 2; text-align: left; }

    .minado-order-confirmation__actions { align-items: stretch; flex-direction: column; }
    .minado-order-confirmation__actions .button { width: 100%; }
    .minado-order-confirmation__link { align-self: center; padding: 0.45rem; }
    .minado-order-confirmation__main .minado-order-confirmation__actions { justify-content: stretch; }
}

/* A stronger visual finish for the confirmation: the completed order is the
   hero moment, while the practical details remain quiet, easy-to-scan cards. */
.woocommerce-order-received .minado-order-confirmation__hero {
    border-color: rgba(94, 234, 212, 0.2);
    background:
        radial-gradient(circle at 87% 18%, rgba(45, 212, 191, 0.22), transparent 13rem),
        radial-gradient(circle at 15% 118%, rgba(34, 197, 94, 0.2), transparent 20rem),
        linear-gradient(135deg, #0b2c1a 0%, #0d442a 52%, #0b3625 100%);
    box-shadow: 0 28px 72px rgba(10, 48, 30, 0.24);
}

.woocommerce-order-received .minado-order-confirmation__hero::before {
    top: -11rem;
    right: -4rem;
    border-color: rgba(153, 246, 228, 0.23);
    box-shadow: 0 0 0 3.4rem rgba(45, 212, 191, 0.045), 0 0 0 6.8rem rgba(45, 212, 191, 0.025);
}

.woocommerce-order-received .minado-order-confirmation__hero::after {
    width: 19rem;
    height: 19rem;
    right: 9rem;
    bottom: -13rem;
    background: radial-gradient(circle, rgba(110, 231, 183, 0.16), transparent 66%);
}

.woocommerce-order-received .minado-order-confirmation__hero .minado-order-confirmation__icon {
    border-color: rgba(255, 255, 255, 0.35);
    background: rgba(236, 253, 245, 0.96);
    color: var(--g800);
    box-shadow: 0 0 0 0.6rem rgba(94, 234, 212, 0.12), 0 14px 32px rgba(0, 0, 0, 0.16);
}

.woocommerce-order-received .minado-order-confirmation__hero .minado-order-confirmation__eyebrow { color: var(--t300); }
.woocommerce-order-received .minado-order-confirmation__hero h1 { color: #fff; }
.woocommerce-order-received .minado-order-confirmation__hero .minado-order-confirmation__intro { color: rgba(255, 255, 255, 0.75); }

.woocommerce-order-received .minado-order-confirmation__facts {
    align-self: center;
    padding: 0.7rem 1.15rem;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.woocommerce-order-received .minado-order-confirmation__facts div { border-bottom-color: rgba(255, 255, 255, 0.12); }
.woocommerce-order-received .minado-order-confirmation__facts dt { color: rgba(255, 255, 255, 0.62); }
.woocommerce-order-received .minado-order-confirmation__facts dd { color: #fff; }

.woocommerce-order-received .minado-order-card {
    box-shadow: 0 2px 6px rgba(23, 77, 42, 0.04), 0 18px 44px rgba(23, 77, 42, 0.075);
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.woocommerce-order-received .minado-order-card:hover {
    border-color: rgba(45, 212, 191, 0.42);
    box-shadow: 0 4px 10px rgba(23, 77, 42, 0.05), 0 24px 52px rgba(23, 77, 42, 0.12);
    transform: translateY(-2px);
}

.woocommerce-order-received .minado-order-item__image {
    border-radius: 16px;
    background: linear-gradient(145deg, #fff, var(--g50));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72), 0 5px 14px rgba(23, 77, 42, 0.06);
}

.woocommerce-order-received .minado-order-item__total { color: var(--g800); }

.woocommerce-order-received .minado-order-card--next { box-shadow: 0 22px 48px rgba(10, 48, 30, 0.2); }

.woocommerce-order-received .minado-order-steps {
    position: relative;
    gap: 1.2rem;
}

.woocommerce-order-received .minado-order-steps::before {
    position: absolute;
    top: 1.7rem;
    bottom: 1.7rem;
    left: 0.84rem;
    width: 1px;
    background: linear-gradient(rgba(94, 234, 212, 0.54), rgba(94, 234, 212, 0.06));
    content: '';
}

.woocommerce-order-received .minado-order-steps li { position: relative; }

.woocommerce-order-received .minado-order-steps li > span {
    z-index: 1;
    border: 1px solid rgba(94, 234, 212, 0.2);
    box-shadow: 0 0 0 4px rgba(13, 68, 42, 0.65);
}

.woocommerce-order-received .minado-order-card--contact {
    background: linear-gradient(145deg, #fff, rgba(240, 253, 244, 0.72));
}

.woocommerce-order-received .minado-order-confirmation__actions .button {
    min-width: 13rem;
    box-shadow: 0 10px 28px rgba(20, 184, 166, 0.28);
}

@media (max-width: 820px) {
    .woocommerce-order-received .minado-order-confirmation__facts {
        padding: 0.8rem 1rem;
        background: rgba(255, 255, 255, 0.1);
    }

    .woocommerce-order-received .minado-order-confirmation__facts div { border-bottom: 0; }
}

@media (max-width: 560px) {
    .woocommerce-order-received .minado-order-confirmation__hero::before { right: -13rem; }
    .woocommerce-order-received .minado-order-confirmation__facts div { border-bottom-color: rgba(255, 255, 255, 0.12); }
    .woocommerce-order-received .minado-order-confirmation__facts div:last-child { border-bottom: 0; }
    .woocommerce-order-received .minado-order-confirmation__actions .button { min-width: 0; }
}

/* The practical follow-up panel should feel reassuring, not like a second
   hero. A light card keeps the order details as the visual priority. */
.woocommerce-order-received .minado-order-card--next {
    border-color: rgba(43, 112, 67, 0.16);
    background: linear-gradient(145deg, #fff, rgba(240, 253, 244, 0.88));
    color: var(--color-text-2);
    box-shadow: 0 2px 6px rgba(23, 77, 42, 0.04), 0 18px 44px rgba(23, 77, 42, 0.075);
}

.woocommerce-order-received .minado-order-card--next h2 { color: var(--color-text); }
.woocommerce-order-received .minado-order-card--next .minado-order-card__kicker { color: var(--t600); }

.woocommerce-order-received .minado-order-steps {
    gap: 0.6rem;
    margin-top: 1.05rem;
}

.woocommerce-order-received .minado-order-steps::before { display: none; }

.woocommerce-order-received .minado-order-steps li {
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: 0.7rem;
    padding: 0.7rem;
    border: 1px solid rgba(43, 112, 67, 0.13);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.8);
}

.woocommerce-order-received .minado-order-steps li > span {
    width: 2rem;
    height: 2rem;
    border: 0;
    background: linear-gradient(135deg, var(--g600), var(--t500));
    color: #fff;
    box-shadow: 0 5px 12px rgba(20, 184, 166, 0.22);
}

.woocommerce-order-received .minado-order-steps p { color: var(--color-text-3); }
.woocommerce-order-received .minado-order-steps b { color: var(--color-text); }

/* Keep the practical information in one support card, rather than splitting
   the right rail into unrelated floating panels. */
.woocommerce-order-received .minado-order-card--details .minado-order-confirmation__actions {
    justify-content: flex-start;
    margin-top: 0;
    padding: 1.2rem clamp(1.2rem, 3vw, 1.8rem) clamp(1.3rem, 3vw, 1.8rem);
    border-top: 1px solid rgba(43, 112, 67, 0.13);
}

.woocommerce-order-received .minado-order-aside.minado-order-card--support {
    display: block;
    padding: 0;
    overflow: hidden;
    background: #fff;
}

.woocommerce-order-received .minado-order-card--support .minado-order-card--next,
.woocommerce-order-received .minado-order-card--support .minado-order-card--contact {
    margin: 0;
    padding: clamp(1.2rem, 3vw, 1.8rem);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transform: none;
}

.woocommerce-order-received .minado-order-card--support .minado-order-card--next {
    border-bottom: 1px solid rgba(43, 112, 67, 0.13);
    background: linear-gradient(145deg, rgba(240, 253, 244, 0.95), rgba(255, 255, 255, 0.98));
}

.woocommerce-order-received .minado-order-card--support .minado-order-card--contact {
    background: #fff;
}

.woocommerce-order-received .minado-order-card--support:hover,
.woocommerce-order-received .minado-order-card--support:hover .minado-order-card--next,
.woocommerce-order-received .minado-order-card--support:hover .minado-order-card--contact {
    border-color: rgba(43, 112, 67, 0.16);
    box-shadow: none;
    transform: none;
}

/* ─── Home catalogue: compact 4-card slider ─────────────── */
.section--catalog-preview {
    padding-block: clamp(3.5rem, 6vw, 5.5rem);
    background:
        radial-gradient(circle at 95% 12%, rgba(45, 212, 191, 0.16), transparent 22rem),
        radial-gradient(circle at 5% 100%, rgba(34, 197, 94, 0.09), transparent 19rem),
        #f7fcf8;
}

.section--catalog-preview .catalog-preview__heading {
    align-items: center;
    margin-bottom: 1.5rem;
}

.section--catalog-preview .catalog-preview__heading h2 {
    max-width: 38rem;
    font-size: clamp(1.8rem, 3vw, 2.65rem);
    letter-spacing: -0.055em;
}

.section--catalog-preview .catalog-preview__actions {
    padding: 0.35rem;
    border: 1px solid rgba(43, 112, 67, 0.12);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.76);
    box-shadow: 0 10px 28px rgba(23, 77, 42, 0.07);
}

.section--catalog-preview .catalog-preview__nav {
    width: 2.35rem;
    height: 2.35rem;
    border-color: transparent;
    background: var(--g50);
}

.section--catalog-preview .catalog-preview__actions .button {
    min-height: 2.35rem;
    padding: 0.58rem 1rem;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: var(--g800);
    font-size: 0.78rem;
}

.section--catalog-preview .catalog-preview__actions .button:hover {
    background: var(--g50);
    color: var(--g700);
    transform: none;
}

section.section--catalog-preview .shop-results ul.catalog-preview__track {
    gap: 1rem;
    padding: 0.7rem 0.1rem 2.6rem;
}

section.section--catalog-preview .shop-results ul.catalog-preview__track li.product {
    flex-basis: calc((100% - 3rem) / 4);
}

.section--catalog-preview .product-card {
    border-color: rgba(43, 112, 67, 0.13);
    border-radius: 18px;
    box-shadow: 0 8px 22px rgba(23, 77, 42, 0.06);
}

.section--catalog-preview .product-card:hover {
    border-color: rgba(20, 184, 166, 0.52);
    box-shadow: 0 16px 32px rgba(23, 77, 42, 0.12);
}

.section--catalog-preview .product-card__image {
    aspect-ratio: 1 / 0.7;
    padding: 0.55rem;
    background:
        radial-gradient(circle at 50% 100%, rgba(34, 197, 94, 0.12), transparent 62%),
        linear-gradient(145deg, #fff, #effaf2);
}

.section--catalog-preview .product-card__stock {
    top: 0.5rem;
    left: 0.5rem;
    padding: 0.24rem 0.42rem;
    font-size: 0.6rem;
}

.section--catalog-preview .product-card__body { padding: 0.75rem; }
.section--catalog-preview .product-card__meta { min-height: 0; gap: 0.3rem; }
.section--catalog-preview .product-card__meta span { font-size: 0.64rem; }

.section--catalog-preview .product-card .woocommerce-loop-product__title {
    display: -webkit-box;
    min-height: 2.55em;
    margin: 0.45rem 0 0;
    overflow: hidden;
    font-size: 0.92rem;
    line-height: 1.28;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.section--catalog-preview .product-card__specs { display: none; }

.section--catalog-preview .product-card__footer {
    align-items: center;
    gap: 0.45rem;
    margin-top: auto;
    padding-top: 0.65rem;
}

.section--catalog-preview .product-card__price { font-size: 0.98rem; }
.section--catalog-preview .product-card .button {
    min-height: 2rem;
    padding: 0.48rem 0.58rem;
    font-size: 0.72rem;
    line-height: 1.1;
}

@media (max-width: 1050px) {
    section.section--catalog-preview .shop-results ul.catalog-preview__track li.product {
        flex-basis: calc((100% - 2rem) / 3);
    }
}

@media (max-width: 720px) {
    .section--catalog-preview .catalog-preview__actions { justify-content: space-between; }
    section.section--catalog-preview .shop-results ul.catalog-preview__track li.product {
        flex-basis: calc((100% - 1rem) / 2);
    }
}

@media (max-width: 460px) {
    section.section--catalog-preview .shop-results ul.catalog-preview__track li.product { flex-basis: 100%; }
}

/* The cards stay compact enough for four columns, but get the same polished
   surface treatment as the rest of the home page. */
.section--catalog-preview .product-card {
    isolation: isolate;
    border: 1px solid rgba(39, 111, 65, 0.12);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 12px 30px rgba(20, 65, 37, 0.07);
}

.section--catalog-preview .product-card::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.65), rgba(240, 253, 244, 0.15));
    content: '';
    opacity: 0;
    transition: opacity 0.25s ease;
}

.section--catalog-preview .product-card:hover {
    transform: translateY(-5px);
    border-color: rgba(20, 184, 166, 0.46);
    box-shadow: 0 20px 38px rgba(20, 82, 48, 0.15);
}

.section--catalog-preview .product-card:hover::before { opacity: 1; }

.section--catalog-preview .product-card__image {
    margin: 0.42rem;
    border: 1px solid rgba(43, 112, 67, 0.08);
    border-radius: 14px;
    background:
        radial-gradient(circle at 50% 105%, rgba(20, 184, 166, 0.18), transparent 58%),
        linear-gradient(145deg, #fbfefb, #edf8ef);
}

.section--catalog-preview .product-card__image::after {
    position: absolute;
    right: -1.8rem;
    bottom: -2.4rem;
    width: 7rem;
    height: 7rem;
    border: 1px solid rgba(20, 184, 166, 0.16);
    border-radius: 50%;
    content: '';
}

.section--catalog-preview .product-card__image img {
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 10px 9px rgba(21, 56, 35, 0.14));
}

.section--catalog-preview .product-card__body { padding: 0.35rem 0.85rem 0.85rem; }

.section--catalog-preview .product-card__meta {
    min-height: 1.45rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid rgba(43, 112, 67, 0.1);
}

.section--catalog-preview .product-card__rating {
    color: var(--g700);
    font-weight: 700;
}

.section--catalog-preview .product-card__sku {
    margin-left: auto;
    color: var(--color-text-3);
    letter-spacing: 0.01em;
}

.section--catalog-preview .product-card .woocommerce-loop-product__title {
    font-weight: 750;
    letter-spacing: -0.025em;
}

.section--catalog-preview .product-card__footer {
    padding-top: 0.75rem;
    border-top: 1px solid rgba(43, 112, 67, 0.1);
}

.section--catalog-preview .product-card__price {
    color: var(--g800);
    font-weight: 800;
    letter-spacing: -0.025em;
}

.section--catalog-preview .product-card .button {
    border: 1px solid rgba(20, 184, 166, 0.12);
    background: linear-gradient(135deg, var(--g600), var(--t500));
    box-shadow: 0 6px 14px rgba(20, 184, 166, 0.22);
}