:root {
    --clover-green-950: #123a2b;
    --clover-green-900: #174b37;
    --clover-green-800: #1f654a;
    --clover-green-700: #28785a;
    --clover-sage-300: #b9c9b8;
    --clover-sage-100: #e8efe8;
    --clover-coral-700: #a94850;
    --clover-coral-600: #c65f67;
    --clover-coral-100: #f8e7e6;
    --clover-berry: #7d364f;
    --clover-ink: #19231f;
    --clover-muted: #596760;
    --clover-line: #d9dfda;
    --clover-surface: #ffffff;
    --clover-canvas: #f7f8f5;
    --clover-soft: #f0f4ef;
    --clover-promo-gradient: linear-gradient(115deg, #174b37 0%, #1f654a 52%, #28785a 100%);
    --clover-autumn-900: #6d2c0c;
    --clover-autumn-700: #a8410d;
    --clover-autumn-500: #d9711c;
    --clover-autumn-050: #fdf3e7;
    --clover-autumn-gradient: linear-gradient(115deg, #6d2c0c 0%, #a8410d 52%, #d9711c 100%);
    --font-display: "Fraunces", Georgia, serif;
    --font-hand: "Caveat", "Segoe Script", cursive;
    --font-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --shell: 1200px;
    --shadow-soft: none;
    --shadow-lift: none;
    --radius-sm: 0;
    --radius-md: 0;
    --focus: 0 0 0 3px rgba(198, 95, 103, 0.35);
}

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

[hidden] {
    display: none !important;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    color: var(--clover-ink);
    background: var(--clover-surface);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.65;
    letter-spacing: 0;
    -webkit-font-smoothing: antialiased;
}

body.menu-is-open,
body.cart-is-open {
    overflow: hidden;
}

/* Пока меню открыто, шапка держится сама, а не за счёт sticky: при заблокированной
   прокрутке sticky теряет опору, шапка выпадает в статический поток, вместе с ней
   перестаёт действовать z-index, и панель меню (fixed) накрывает её целиком —
   вместе с кнопкой закрытия. */
body.menu-is-open .site-header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
}


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

a {
    color: var(--clover-green-800);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

a:hover {
    color: var(--clover-coral-700);
}

button,
input,
select,
textarea {
    font: inherit;
}

button,
a {
    touch-action: manipulation;
}

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

h1,
h2,
h3,
h4 {
    margin: 0 0 0.7em;
    color: var(--clover-ink);
    font-family: var(--font-display);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: 0;
    text-wrap: balance;
}

h1 {
    font-size: clamp(2.75rem, 5vw, 4.85rem);
}

h2 {
    font-size: clamp(2rem, 3.4vw, 3.15rem);
}

h3 {
    font-size: clamp(1.25rem, 2vw, 1.65rem);
}

p {
    margin: 0 0 1.2em;
}

.site-shell {
    width: min(calc(100% - 40px), var(--shell));
    margin-inline: auto;
}

/* WordPress core's block-library stylesheet is not enqueued on this site, so the
   alignment classes the block editor writes into markup have nothing backing them —
   which is why the centred headings in the empty-cart block rendered left. Declaring
   the three utilities here honours the alignment chosen in the editor, for this and
   any future block content, without pulling in the whole core block stylesheet. */
.has-text-align-center {
    text-align: center;
}

.has-text-align-left {
    text-align: left;
}

.has-text-align-right {
    text-align: right;
}

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

.skip-link {
    position: fixed;
    z-index: 10000;
    top: 12px;
    left: 12px;
    transform: translateY(-160%);
    padding: 10px 16px;
    color: #fff;
    background: var(--clover-green-950);
}

.skip-link:focus {
    transform: translateY(0);
}

.icon {
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 auto;
}

.eyebrow {
    margin-bottom: 14px;
    color: var(--clover-green-800);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.button,
button.button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0.78rem 1.35rem;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-size: 0.91rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
    transform: none;
}

.button--primary,
.woocommerce a.button,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt {
    color: #fff;
    background: var(--clover-coral-700);
    border-color: var(--clover-coral-700);
}

.button--primary:hover,
.woocommerce a.button:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
    color: #fff;
    background: #913943;
    border-color: #913943;
    box-shadow: 0 8px 22px rgba(169, 72, 80, 0.22);
}

.button--secondary {
    color: var(--clover-green-900);
    background: rgba(255, 255, 255, 0.72);
    border-color: var(--clover-green-800);
}

.button--secondary:hover {
    color: #fff;
    background: var(--clover-green-900);
}

.button--light {
    color: var(--clover-green-950);
    background: #fff;
    border-color: #fff;
}

.button--light:hover {
    color: var(--clover-green-950);
    background: var(--clover-sage-100);
    border-color: var(--clover-sage-100);
}

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
}

.text-link .icon {
    width: 18px;
    transition: transform 180ms ease;
}

.text-link:hover .icon {
    transform: translateX(3px);
}

.announcement-bar {
    color: #fff;
    background: var(--clover-green-950);
    font-size: 0.78rem;
    line-height: 1.25;
}

.announcement-bar__inner {
    display: flex;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    gap: 24px;
}

.announcement-bar a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
}

.announcement-bar .icon {
    width: 14px;
    height: 14px;
}

.site-header {
    position: sticky;
    z-index: 1000;
    top: 0;
    border-bottom: 1px solid rgba(23, 75, 55, 0.1);
    background: #fbf8f2;
    transition: background-color 180ms ease, box-shadow 180ms ease;
}

.admin-bar .site-header {
    top: 32px;
}

.site-header.is-condensed {
    background: rgba(251, 248, 242, 0.97);
    box-shadow: 0 8px 28px rgba(15, 47, 35, 0.09);
    backdrop-filter: blur(12px);
}

.site-header__inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    min-height: 76px;
    align-items: center;
    gap: 32px;
    transition: min-height 180ms ease;
}

.site-header.is-condensed .site-header__inner {
    min-height: 66px;
}

.brand {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    color: var(--clover-green-800);
    text-decoration: none;
}

.brand:hover {
    color: var(--clover-green-700);
}

.brand__image {
    display: block;
    width: 238px;
    height: auto;
    transition: width 180ms ease;
}

.site-header.is-condensed .brand__image {
    width: 218px;
}

.brand--compact .brand__image {
    width: 44px;
}

.desktop-nav {
    justify-self: center;
}

.primary-menu,
.mobile-menu,
.site-footer ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.primary-menu {
    display: flex;
    align-items: center;
    /* Восьмому пункту («Custom Pattern») при прежнем зазоре не хватало двух
       пикселей, и переносилось сразу всё меню. Потолок опущен, а nowrap не даёт
       названиям из двух слов ломаться пополам. */
    gap: clamp(16px, 1.9vw, 27px);
}

.primary-menu > li > a {
    white-space: nowrap;
}

.primary-menu > li {
    position: relative;
}

.primary-menu a {
    display: flex;
    min-height: 44px;
    align-items: center;
    color: var(--clover-green-950);
    font-size: 0.86rem;
    font-weight: 600;
    text-decoration: none;
}

.primary-menu > li > a::after {
    position: absolute;
    right: 0;
    bottom: 5px;
    left: 0;
    height: 2px;
    background: var(--clover-coral-600);
    content: "";
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 180ms ease;
}

.primary-menu > li:hover > a::after,
.primary-menu > .current-menu-item > a::after,
.primary-menu > .current-menu-ancestor > a::after {
    transform: scaleX(1);
    transform-origin: left;
}

.primary-menu .sub-menu {
    position: absolute;
    top: calc(100% - 3px);
    left: -20px;
    display: grid;
    width: 250px;
    padding: 14px;
    margin: 0;
    border: 1px solid var(--clover-line);
    border-radius: var(--radius-md);
    background: #fff;
    box-shadow: var(--shadow-soft);
    list-style: none;
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity 180ms ease, transform 180ms ease;
}

.primary-menu li:hover > .sub-menu,
.primary-menu li:focus-within > .sub-menu {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.primary-menu .sub-menu a {
    min-height: 40px;
    padding: 0 9px;
    border-radius: 0;
}

.primary-menu .sub-menu a:hover {
    background: var(--clover-soft);
}

.header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
}

.currency-switcher {
    position: relative;
    z-index: 3;
    color: var(--clover-green-950);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.currency-switcher--mobile {
    display: none;
}

.currency-switcher .wcml-dropdown-click,
.woocommerce .currency-switcher .wcml-dropdown-click.product {
    width: 76px;
    max-width: none;
    margin: 0;
}

.currency-switcher .wcml-dropdown-click > ul,
.currency-switcher .wcml-dropdown-click li,
.currency-switcher .wcml-dropdown-click a {
    padding: 0;
    margin: 0;
    border: 0;
    color: inherit;
    background: transparent;
    line-height: 1;
}

.currency-switcher .wcml-dropdown-click li:hover,
.currency-switcher .wcml-dropdown-click li:focus {
    background: transparent;
}

.currency-switcher .wcml-dropdown-click a {
    display: flex;
    min-height: 42px;
    align-items: center;
    padding: 0 26px 0 12px;
    cursor: pointer;
    text-decoration: none;
    transition: min-height 180ms ease, color 180ms ease, background-color 180ms ease;
}

.site-header.is-condensed .currency-switcher--header .wcml-dropdown-click a.wcml-cs-item-toggle {
    min-height: 38px;
}

.currency-switcher .wcml-dropdown-click a.wcml-cs-item-toggle {
    position: relative;
    padding-right: 26px;
}

.currency-switcher .wcml-dropdown-click a.wcml-cs-item-toggle::after {
    top: calc(50% - 2px);
    right: 11px;
    width: 6px;
    height: 6px;
    border: 0;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
}

.currency-switcher .wcml-dropdown-click .wcml-cs-submenu {
    top: calc(100% + 7px);
    right: 0;
    left: auto;
    width: 84px;
    padding: 7px;
    border: 1px solid var(--clover-line);
    background: #fff;
    box-shadow: 0 14px 34px rgba(15, 47, 35, 0.14);
    z-index: 120;
}

.currency-switcher .wcml-dropdown-click .wcml-cs-submenu li {
    border: 0;
    background: #fff;
}

.currency-switcher .wcml-dropdown-click .wcml-cs-submenu a {
    min-height: 36px;
    padding: 0 9px;
}

.currency-switcher .wcml-dropdown-click .wcml-cs-submenu a:hover,
.currency-switcher .wcml-dropdown-click .wcml-cs-submenu a:focus-visible {
    color: var(--clover-green-800);
    background: var(--clover-soft);
}

.header-action,
.menu-toggle,
.search-panel__close {
    position: relative;
    display: inline-grid;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 0;
    border-radius: 0;
    place-items: center;
    color: var(--clover-green-900);
    background: transparent;
    cursor: pointer;
    text-decoration: none;
    transition: width 180ms ease, height 180ms ease, background-color 180ms ease, color 180ms ease;
}

.site-header.is-condensed .header-action,
.site-header.is-condensed .menu-toggle {
    width: 42px;
    height: 42px;
}

.header-action:hover,
.menu-toggle:hover,
.search-panel__close:hover {
    color: var(--clover-green-950);
    background: var(--clover-soft);
}

.header-action__count {
    position: absolute;
    top: 3px;
    right: 1px;
    display: grid;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border: 2px solid #fff;
    border-radius: 99px;
    place-items: center;
    color: #fff;
    background: var(--clover-coral-700);
    font-size: 0.63rem;
    font-weight: 700;
    line-height: 1;
}

.menu-toggle {
    display: none;
}

.search-panel {
    position: absolute;
    right: 0;
    left: 0;
    border-top: 0;
    border-bottom: 1px solid var(--clover-line);
    background: #fff;
    box-shadow: var(--shadow-soft);
}

.search-panel__inner {
    display: flex;
    min-height: 94px;
    align-items: center;
    gap: 12px;
}

.search-form {
    position: relative;
    display: flex;
    flex: 1;
}

.search-suggestions {
    position: absolute;
    z-index: 120;
    top: calc(100% + 8px);
    right: 0;
    left: 0;
    max-height: min(520px, calc(100vh - 180px));
    overflow-y: auto;
    border: 1px solid var(--clover-line);
    background: #fff;
    box-shadow: 0 22px 55px rgba(18, 58, 43, 0.16);
}

.search-suggestion {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding: 12px;
    border-bottom: 1px solid var(--clover-line);
    color: var(--clover-ink);
    text-decoration: none;
}

.search-suggestion:hover,
.search-suggestion:focus-visible {
    color: var(--clover-ink);
    background: var(--clover-soft);
}

.search-suggestion img {
    width: 72px;
    height: 72px;
    padding: 5px;
    border: 1px solid #e3e7e2;
    background: #f5f4ef;
    object-fit: contain;
}

.search-suggestion__copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.search-suggestion__copy strong {
    overflow: hidden;
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 500;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-suggestion__copy small {
    color: var(--clover-muted);
    font-size: 0.72rem;
}

.search-suggestion__price {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    color: var(--clover-green-900);
    font-size: 0.86rem;
    font-weight: 700;
    white-space: nowrap;
}

/* Старая цена — приглушённая и зачёркнутая, новая — обычная.
   Подчёркивание у ins браузер ставит по умолчанию, оно тут лишнее. */
.search-suggestion__price del {
    color: var(--clover-muted);
    font-weight: 500;
    text-decoration: line-through;
}

.search-suggestion__price ins {
    background: none;
    text-decoration: none;
}

.search-suggestions__state {
    padding: 24px 20px;
    margin: 0;
    color: var(--clover-muted);
    text-align: center;
}

.search-suggestions__all {
    display: flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: var(--clover-green-800);
    font-size: 0.83rem;
    font-weight: 700;
    text-decoration: none;
}

.search-suggestions__all:hover {
    color: #fff;
    background: var(--clover-green-900);
}

.search-field {
    width: 100%;
    min-height: 52px;
    padding: 0 54px 0 18px;
    border: 1px solid var(--clover-line);
    border-radius: var(--radius-sm);
    color: var(--clover-ink);
    background: var(--clover-canvas);
}

.search-submit {
    position: absolute;
    top: 4px;
    right: 4px;
    display: grid;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    place-items: center;
    color: #fff;
    background: var(--clover-green-800);
    cursor: pointer;
}

.mobile-nav {
    /* Панель занимает весь экран и не зависит от измеренной высоты шапки.
       Раньше top брался из JS-замера, и при прокрутке он расходился с реальной
       шапкой — сквозь панель проглядывала страница. Теперь шапка (z-index 1000)
       лежит выше панели и сама закрывает её верх, а padding-top отодвигает
       ссылки из-под шапки. Неточный замер теперь портит отступ, а не экран. */
    position: fixed;
    z-index: 99;
    inset: 0;
    padding: var(--mobile-nav-top, 114px) 20px 20px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #fff;
}

.mobile-menu a {
    display: flex;
    min-height: 52px;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--clover-line);
    color: var(--clover-ink);
    font-family: var(--font-display);
    font-size: 1.45rem;
    text-decoration: none;
}

.mobile-menu .sub-menu {
    padding: 0 0 8px 16px;
    list-style: none;
}

.mobile-menu .sub-menu a {
    min-height: 44px;
    font-family: var(--font-body);
    font-size: 0.95rem;
}

.mobile-nav__cta {
    width: 100%;
    margin-top: 24px;
}

.hero {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid rgba(23, 75, 55, 0.14);
    background: #f3f5f0;
}

.hero-slider__slides {
    display: grid;
}

.hero-slide {
    position: relative;
    grid-area: 1 / 1;
    min-height: 570px;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 420ms ease, visibility 420ms ease;
}

.hero-slide.is-active {
    z-index: 1;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.hero-slide::after {
    position: absolute;
    z-index: 1;
    inset: 0;
    background: linear-gradient(90deg, #f3f5f0 0%, #f3f5f0 42%, rgba(243, 245, 240, 0.94) 50%, rgba(243, 245, 240, 0) 71%);
    content: "";
    pointer-events: none;
}

.hero__media {
    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 59%;
    overflow: hidden;
}

.hero__media img {
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Сдвиг кадра нужен именно цветочному фото, а не «первому слайду»:
   порядок слайдов сезонный и меняется. */
.hero__media img[src*="hero-floral"] {
    object-position: 68% center;
}

.hero__inner {
    position: relative;
    z-index: 2;
    display: flex;
    min-height: 570px;
    align-items: center;
}

.hero__content {
    width: min(590px, 52%);
    padding: 62px 0 66px;
}

.hero h1,
.hero__title {
    max-width: 600px;
    margin-bottom: 20px;
    font-size: clamp(3.15rem, 5.6vw, 5rem);
    line-height: 0.93;
}

.hero__lede {
    max-width: 510px;
    margin-bottom: 26px;
    color: #39483f;
    font-size: clamp(1rem, 1.25vw, 1.12rem);
    line-height: 1.52;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 23px;
}

.hero__proof {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    padding: 0;
    margin: 0;
    color: #33473d;
    font-size: 0.88rem;
    font-weight: 600;
    list-style: none;
}

.hero__proof li {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hero__proof .icon {
    width: 19px;
    height: 19px;
    color: var(--clover-green-700);
    stroke-width: 1.7;
}

.hero-proof-strip {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 24px;
}

.hero-proof-strip__faces {
    display: flex;
    flex: none;
}

/* Нахлёст задаётся отрицательным margin, а не transform: так ряд честно
   занимает свою ширину и соседний текст не наезжает на последний кружок. */
.hero-proof-strip__face {
    width: 46px;
    height: 46px;
    border: 2.5px solid #fff;
    border-radius: 50%;
    box-shadow: 0 2px 7px rgba(24, 46, 34, 0.16);
    object-fit: cover;
}

.hero-proof-strip__face + .hero-proof-strip__face {
    margin-left: -15px;
}

.hero-proof-strip__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
}

.hero-proof-strip__clovers {
    display: flex;
    gap: 3px;
}

.hero-proof-strip__clover {
    width: 16px;
    height: 16px;
}

.hero-proof-strip__label {
    color: #33473d;
    font-size: 0.88rem;
    font-weight: 600;
}

.hero-slider__controls {
    position: absolute;
    z-index: 5;
    right: max(20px, calc((100vw - var(--shell)) / 2));
    bottom: 24px;
    display: flex;
    min-height: 44px;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border: 1px solid rgba(23, 75, 55, 0.22);
    background: rgba(255, 255, 255, 0.94);
}

.hero-slider__arrow,
.hero-slider__dots button {
    display: inline-grid;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: 0;
    place-items: center;
    color: var(--clover-green-900);
    background: transparent;
    cursor: pointer;
}

.hero-slider__arrow:hover,
.hero-slider__arrow:focus-visible,
.hero-slider__dots button:hover,
.hero-slider__dots button:focus-visible {
    color: #fff;
    background: var(--clover-green-800);
}

.hero-slider__arrow .icon {
    width: 19px;
    height: 19px;
}

.hero-slider__arrow--previous .icon {
    transform: rotate(180deg);
}

.hero-slider__dots {
    display: flex;
    align-items: center;
}

.hero-slider__dots button::before {
    width: 18px;
    height: 2px;
    background: rgba(31, 101, 74, 0.3);
    content: "";
    transition: width 180ms ease, background-color 180ms ease;
}

.hero-slider__dots button.is-active::before {
    width: 28px;
    background: var(--clover-coral-700);
}

.section {
    padding: clamp(68px, 7vw, 92px) 0;
}

.section--tint {
    background: var(--clover-canvas);
}

.section-heading {
    margin-bottom: 34px;
}

.section-heading h2 {
    margin-bottom: 0;
}

/* Эмодзи в заголовке набирается системным шрифтом и не подчиняется метрикам
   Playfair: в свою кегль он выше прописных и вылезает за строку. Ужимаем до
   высоты капители и сажаем на базовую линию текста. */
.heading-emoji {
    font-size: 0.78em;
    line-height: 1;
    vertical-align: 0.06em;
}

.section-heading--split {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 40px;
}

.section-heading--split > p {
    max-width: 520px;
    margin: 0;
    color: var(--clover-muted);
}

.collection-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
}

.collection-card {
    display: block;
    color: var(--clover-ink);
    text-decoration: none;
}

.collection-card__image {
    display: block;
    overflow: hidden;
    aspect-ratio: 3 / 2;
    background: var(--clover-soft);
}

.collection-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 260ms ease, opacity 260ms ease;
}

.collection-card:hover {
    color: var(--clover-green-900);
}

.collection-card:hover img {
    opacity: 0.94;
    transform: scale(1.015);
}

.collection-card__body {
    display: grid;
    gap: 8px;
    padding: 20px 0 18px;
    border-bottom: 1px solid var(--clover-line);
}

.collection-card__body strong {
    font-family: var(--font-display);
    font-size: clamp(1.45rem, 2vw, 1.8rem);
    font-weight: 500;
    line-height: 1.12;
}

.collection-card__body > span:not(.collection-card__link) {
    max-width: 340px;
    color: var(--clover-muted);
    font-size: 0.9rem;
    line-height: 1.5;
}

.collection-card__link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 5px;
    color: var(--clover-green-800);
    font-size: 0.78rem;
    font-weight: 700;
}

.collection-card__link .icon {
    width: 16px;
}

.featured-products .products {
    margin-bottom: 0 !important;
}

.standard-section {
    color: #fff;
    background: var(--clover-green-950);
}

.standard-section h2,
.standard-section h3,
.standard-section .eyebrow,
.standard-section a {
    color: #fff;
}

.standard-section__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(56px, 7vw, 96px);
    align-items: start;
}

.standard-section__intro {
    position: static;
}

.standard-section__intro > p:not(.eyebrow) {
    max-width: 560px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 1.06rem;
}

.standard-list {
    padding: 0;
    margin: 0;
    list-style: none;
}

.standard-list li {
    display: grid;
    grid-template-columns: 58px 1fr;
    gap: 20px;
    padding: 23px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.standard-list li:last-child {
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.standard-list > li > span {
    color: var(--clover-coral-600);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.standard-list strong {
    display: block;
    margin-bottom: 5px;
    color: #fff;
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 500;
}

.standard-list p {
    margin: 0;
    color: rgba(255, 255, 255, 0.68);
}

.process-section {
    background: #fff;
}

.process-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(58px, 6vw, 86px);
    padding: 0;
    margin: 0;
    list-style: none;
}

.process-card {
    position: relative;
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.process-card__image {
    width: min(100%, 320px);
    overflow: hidden;
    border: 8px solid var(--clover-canvas);
    border-radius: 50%;
    aspect-ratio: 1;
    background: var(--clover-canvas);
    box-shadow: 0 14px 34px rgba(21, 53, 40, 0.09);
}

.process-card__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.process-card:not(:last-child)::after {
    position: absolute;
    top: min(150px, 12vw);
    right: clamp(-70px, -5vw, -43px);
    width: clamp(48px, 5vw, 70px);
    height: 28px;
    background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 28' fill='none' stroke='%231f654a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 19C22 3 45 4 66 17'/%3E%3Cpath d='m59 11 7 6-8 4'/%3E%3C/svg%3E");
    content: "";
}

.process-card__body {
    max-width: 340px;
    padding: 24px 0 0;
}

.process-card__body > span {
    display: block;
    margin-bottom: 12px;
    color: var(--clover-coral-700);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.process-card h3 {
    margin-bottom: 10px;
    font-size: clamp(1.45rem, 2vw, 1.72rem);
}

.process-card p {
    margin: 0;
    color: var(--clover-muted);
    font-size: 0.88rem;
    line-height: 1.58;
}

.process-section__footer {
    display: flex;
    padding-top: 28px;
    margin-top: 32px;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    border-top: 1px solid var(--clover-line);
}

.free-pattern {
    padding: 60px 0;
    color: #fff;
    background-color: var(--clover-green-800);
    background-image: var(--clover-promo-gradient);
}

.free-pattern__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}

.free-pattern h2,
.free-pattern .eyebrow {
    color: #fff;
}

.free-pattern h2 {
    margin-bottom: 12px;
}

.free-pattern p:not(.eyebrow) {
    max-width: 680px;
    margin: 0;
    color: rgba(255, 255, 255, 0.82);
}

.free-pattern .button {
    flex: 0 0 auto;
}

.faq-preview__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
    gap: clamp(50px, 8vw, 120px);
}

.accordion-list details {
    border-top: 1px solid var(--clover-line);
}

.accordion-list details:last-child {
    border-bottom: 1px solid var(--clover-line);
}

.accordion-list summary {
    position: relative;
    padding: 22px 46px 22px 0;
    color: var(--clover-ink);
    font-family: var(--font-display);
    font-size: 1.28rem;
    cursor: pointer;
    list-style: none;
}

.accordion-list summary::-webkit-details-marker {
    display: none;
}

.accordion-list summary::after {
    position: absolute;
    top: 20px;
    right: 4px;
    color: var(--clover-green-800);
    content: "+";
    font-family: var(--font-body);
    font-size: 1.35rem;
}

.accordion-list details[open] summary::after {
    content: "−";
}

.accordion-list details p {
    max-width: 680px;
    padding: 0 36px 22px 0;
    margin: 0;
    color: var(--clover-muted);
}

.site-footer {
    color: rgba(255, 255, 255, 0.78);
    background: #0f2f23;
}

.site-footer__top {
    display: grid;
    grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.35fr);
    /* Отступы разведены: между колонками нужны те же 80px, а вот блок с почтой
       во второй строке должен читаться как продолжение колонки бренда, а не как
       отдельная секция с пустым правым столбцом. */
    column-gap: 80px;
    row-gap: 34px;
    padding-top: 80px;
    padding-bottom: 70px;
}

.site-footer .brand {
    margin-bottom: 19px;
    color: #fff;
}

.site-footer .brand__image {
    width: 246px;
}

.site-footer__brand p {
    max-width: 410px;
    color: rgba(255, 255, 255, 0.64);
}

.site-footer__social {
    margin-top: 24px;
}

.site-footer__social ul {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-footer .site-footer__social li,
.site-footer .site-footer__social li + li {
    margin: 0;
}

.site-footer__social a {
    display: inline-flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border: 0;
    color: rgba(255, 255, 255, 0.72);
    background: transparent;
    transition: color 180ms ease;
}

.site-footer__social a:hover {
    color: #fff;
}

.site-footer__social a:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
    color: #fff;
}

.site-footer__social .social-icon--pinterest {
    width: 23px;
    height: 23px;
}

.site-footer__social .social-icon--facebook {
    width: 14px;
    height: 22px;
}

.site-footer__nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(120px, 1fr));
    gap: 34px;
}

.site-footer h2 {
    margin-bottom: 17px;
    color: #fff;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.site-footer li + li {
    margin-top: 8px;
}

.site-footer__contact-label {
    margin: 0 0 8px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* Почта — точка входа в поддержку, поэтому она заметнее обычных ссылок футера:
   крупнее, ярче и в акцидентном шрифте, как заголовки колонок. Селектор с
   классом на самой ссылке нужен, чтобы перебить общий размер `.site-footer a`. */
.site-footer a.site-footer__contact-email {
    display: inline-block;
    padding-bottom: 3px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    font-family: var(--font-display);
    font-size: 1.1rem;
}

.site-footer a.site-footer__contact-email:hover,
.site-footer a.site-footer__contact-email:focus-visible {
    border-bottom-color: #fff;
}

.site-footer a {
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.88rem;
    text-decoration: none;
}

.site-footer a:hover {
    color: #fff;
}

.site-footer__payments {
    display: flex;
    min-height: 82px;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.site-footer__payments-label {
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.77rem;
    font-weight: 650;
    letter-spacing: 0.02em;
}

.site-footer .payment-icons {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-footer .payment-icons li,
.site-footer .payment-icons li + li {
    display: flex;
    margin: 0;
}

.site-footer .payment-icon {
    display: block;
    width: 58px;
    height: auto;
}

.site-footer__bottom {
    display: flex;
    min-height: 70px;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.48);
    font-size: 0.76rem;
}

.site-footer__bottom p {
    margin: 0;
}

.site-footer__bottom-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 28px;
    margin-left: auto;
}

.currency-switcher--footer {
    color: rgba(255, 255, 255, 0.82);
}

.currency-switcher--footer .wcml-dropdown-click .wcml-cs-submenu {
    top: auto;
    bottom: calc(100% + 7px);
    border-color: rgba(255, 255, 255, 0.16);
    background: #173f30;
}

.currency-switcher--footer .wcml-dropdown-click .wcml-cs-submenu li,
.currency-switcher--footer .wcml-dropdown-click .wcml-cs-submenu a {
    color: #fff;
    background: #173f30;
}

.currency-switcher--footer .wcml-dropdown-click .wcml-cs-submenu a:hover,
.currency-switcher--footer .wcml-dropdown-click .wcml-cs-submenu a:focus-visible {
    background: rgba(255, 255, 255, 0.1);
}

/* Content pages */
.content-page,
.commerce-main {
    min-height: 60vh;
    padding: 42px 0 88px;
}

.content-shell {
    max-width: 1080px;
}

.content-shell--narrow {
    max-width: 820px;
}

.clover-catalog-landing .content-shell,
.clover-catalog-landing .entry__content {
    max-width: var(--shell);
}

.clover-catalog-landing .entry__content > p,
.clover-catalog-landing .entry__content > h2,
.clover-catalog-landing .entry__content > .wp-block-group {
    max-width: 820px;
}

.clover-catalog-landing .entry__content > .woocommerce {
    margin-top: 38px;
}

.entry__header {
    padding-bottom: 30px;
    margin-bottom: 42px;
    border-bottom: 1px solid var(--clover-line);
}

/* Cart and checkout hide their page title, which leaves the header holding only
   breadcrumbs — its rule and padding then read as a stray line across the top. */
.woocommerce-cart .entry__header,
.woocommerce-checkout .entry__header {
    padding-bottom: 0;
    margin-bottom: 18px;
    border-bottom: 0;
}

.entry__header .shop-category-nav {
    margin: 28px 0 0;
}

.entry__header h1,
.commerce-main .woocommerce-products-header__title,
.commerce-main .page-title,
.commerce-main .product_title {
    font-size: clamp(2.5rem, 4vw, 3.8rem);
}

.commerce-main .page-title {
    margin-bottom: 18px;
}

.commerce-main .page-description {
    max-width: 760px;
    margin-bottom: 30px;
    color: var(--clover-muted);
    font-size: 1rem;
    line-height: 1.6;
}

.commerce-main .page-description p {
    margin: 0;
}

.entry__content {
    width: 100%;
    max-width: 960px;
    font-size: 1.03rem;
}

.checkout-progress {
    width: 100%;
    max-width: 960px;
    margin: -4px 0 46px;
}

.checkout-progress ol {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 0;
    margin: 0;
    list-style: none;
}

.checkout-progress li {
    position: relative;
    min-width: 0;
    text-align: center;
}

.checkout-progress li:not(:last-child)::after {
    position: absolute;
    z-index: 0;
    top: 20px;
    left: calc(50% + 27px);
    width: calc(100% - 54px);
    height: 2px;
    background: #d8dfda;
    content: "";
}

.checkout-progress li.is-complete::after {
    background: var(--clover-green-700);
}

.checkout-progress__step {
    position: relative;
    z-index: 1;
    display: inline-grid;
    justify-items: center;
    gap: 10px;
    color: var(--clover-muted);
    text-decoration: none;
}

a.checkout-progress__step:hover {
    color: var(--clover-green-800);
}

.checkout-progress__number {
    display: grid;
    width: 42px;
    height: 42px;
    border: 2px solid #d8dfda;
    border-radius: 50%;
    place-items: center;
    color: #7c8881;
    background: #fff;
    font-size: 0.82rem;
    font-weight: 700;
}

.checkout-progress li.is-complete .checkout-progress__number {
    border-color: var(--clover-green-700);
    color: #fff;
    background: var(--clover-green-700);
}

.checkout-progress li.is-active .checkout-progress__number {
    border-color: var(--clover-coral-700);
    color: #fff;
    background: var(--clover-coral-700);
}

.checkout-progress__step strong {
    color: inherit;
    font-family: var(--font-body);
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.25;
}

.checkout-progress li.is-complete .checkout-progress__step,
.checkout-progress li.is-active .checkout-progress__step {
    color: var(--clover-ink);
}

.checkout-progress__note {
    display: flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    margin: 27px 0 0;
    border-top: 1px solid var(--clover-line);
    border-bottom: 1px solid var(--clover-line);
    color: var(--clover-muted);
    font-size: 0.78rem;
    font-weight: 600;
}

.checkout-progress__note .icon {
    width: 17px;
    height: 17px;
    color: var(--clover-green-700);
}

.entry__content > * + * {
    margin-top: 1.3em;
}

.entry__content h2 {
    margin-top: 1.55em;
    font-size: clamp(1.8rem, 3vw, 2.65rem);
}

.entry__content h3 {
    margin-top: 1.5em;
}

.entry__content ul,
.entry__content ol {
    padding-left: 1.35em;
}

.entry__content li + li {
    margin-top: 0.45em;
}

.entry__content a {
    font-weight: 600;
}

.entry__content .wp-block-group {
    padding: 28px;
    border-left: 4px solid var(--clover-coral-600);
    background: var(--clover-soft);
}

.clover-catalog-landing .entry__content > .category-confidence {
    max-width: 820px;
    padding: clamp(30px, 4vw, 48px);
    margin-top: clamp(52px, 7vw, 84px);
}

.clover-catalog-landing .category-confidence h2 {
    margin: 0;
}

.clover-catalog-landing .category-confidence p {
    max-width: 680px;
    margin: 18px 0 0;
}

.clover-contact-form {
    max-width: 720px;
    padding: 30px;
    margin-top: 34px;
    border: 1px solid var(--clover-line);
    border-radius: var(--radius-md);
    background: var(--clover-canvas);
}

.clover-contact-form p {
    margin: 0 0 18px;
}

.clover-contact-form label {
    display: block;
    margin-bottom: 6px;
    color: var(--clover-ink);
    font-size: 0.84rem;
    font-weight: 700;
}

.clover-contact-form label span {
    color: var(--clover-muted);
    font-weight: 400;
}

.clover-contact-form input,
.clover-contact-form textarea {
    width: 100%;
    min-height: 48px;
    padding: 11px 13px;
    border: 1px solid #aebbb3;
    border-radius: 0;
    color: var(--clover-ink);
    background: #fff;
}

.clover-contact-form textarea {
    resize: vertical;
}

.clover-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.clover-honeypot {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.clover-form-notice {
    max-width: 720px;
    padding: 15px 18px;
    margin: 0 0 20px;
    border-left: 4px solid var(--clover-green-700);
    background: var(--clover-soft);
}

.not-found-page .content-shell {
    display: grid;
    gap: 28px;
}

.not-found-panel {
    padding: clamp(34px, 6vw, 72px);
    border-left: 4px solid var(--clover-coral-600);
    background:
        linear-gradient(135deg, rgba(31, 101, 74, 0.08), rgba(202, 83, 101, 0.07)),
        var(--clover-soft);
}

.not-found-panel h1 {
    max-width: 680px;
    margin: 0;
    font-size: clamp(2.6rem, 6vw, 4.8rem);
    line-height: 0.98;
}

.not-found-panel p:not(.eyebrow) {
    max-width: 650px;
    margin: 22px 0 0;
    color: var(--clover-muted);
    font-size: 1.08rem;
    line-height: 1.65;
}

.not-found-panel__search {
    max-width: 620px;
    margin-top: 30px;
}

.not-found-panel__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 28px;
}

.not-found-links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.not-found-links a {
    display: grid;
    gap: 8px;
    padding: 22px;
    border: 1px solid var(--clover-line);
    color: var(--clover-ink);
    text-decoration: none;
    background: var(--clover-canvas);
}

.not-found-links a:hover {
    border-color: var(--clover-green-700);
    color: var(--clover-green-800);
}

.not-found-links span {
    color: var(--clover-muted);
    font-size: 0.93rem;
    line-height: 1.45;
}

.breadcrumbs {
    margin-bottom: 20px;
    color: var(--clover-muted);
    font-size: 0.78rem;
}

.breadcrumbs a {
    color: var(--clover-green-800);
    text-decoration: none;
}

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

.post-card {
    padding-bottom: 24px;
    border-bottom: 1px solid var(--clover-line);
}

.post-card > a img,
.entry__hero img {
    width: 100%;
    border-radius: var(--radius-md);
}

.post-card h2 {
    font-size: 1.75rem;
}

.post-card h2 a {
    color: var(--clover-ink);
    text-decoration: none;
}

/* WooCommerce */
.woocommerce .woocommerce-breadcrumb {
    margin: 0 0 24px;
    color: var(--clover-muted);
    font-size: 0.78rem;
}

.woocommerce .woocommerce-breadcrumb a {
    color: var(--clover-green-800);
}

.woocommerce-products-header {
    max-width: 760px;
    margin-bottom: 30px;
}

.term-description {
    color: var(--clover-muted);
    font-size: 1rem;
    line-height: 1.6;
}

.shop-category-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    margin: 0 0 32px;
}

.shop-category-nav a {
    display: inline-flex;
    min-height: 42px;
    padding: 0 16px;
    align-items: center;
    border: 1px solid var(--clover-line);
    color: var(--clover-green-900);
    background: #fff;
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
}

.shop-category-nav a:hover {
    border-color: var(--clover-green-800);
    color: var(--clover-green-900);
    background: var(--clover-soft);
}

.shop-category-nav a.is-active {
    border-color: var(--clover-green-800);
    color: #fff;
    background: var(--clover-green-800);
}

.shop-bottom-guide {
    max-width: 920px;
    padding-top: 56px;
    margin: 0;
}

.shop-bottom-guide h3 {
    max-width: 860px;
    margin-bottom: 24px;
    font-size: clamp(2rem, 3.76vw, 3.84rem);
    line-height: 1.02;
}

.shop-bottom-guide p {
    color: var(--clover-muted);
    font-size: clamp(1.05rem, 1.4vw, 1.25rem);
    line-height: 1.65;
}

.shop-bottom-guide p + p {
    margin-top: 8px;
}

.shop-bottom-guide a {
    color: var(--clover-green-800);
    text-underline-offset: 3px;
}

.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
    margin-bottom: 24px;
    color: var(--clover-muted);
    font-size: 0.84rem;
}

.woocommerce .woocommerce-ordering select {
    min-height: 44px;
    padding: 0 36px 0 12px;
    border: 1px solid var(--clover-line);
    border-radius: 0;
    color: var(--clover-ink);
    background: #fff;
}

.woocommerce ul.products {
    display: grid;
    clear: both;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 46px 24px;
    padding-top: 8px;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
    display: none;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    position: relative;
    display: flex;
    min-width: 0;
    height: auto;
    flex-direction: column;
    float: none;
    width: 100% !important;
    margin: 0;
    padding: 0 0 18px;
    background: #fff;
    border: 1px solid var(--clover-line);
    border-radius: 0;
    /* Обрезаем по радиусу: картинка идёт в край, и без этого её углы торчали бы
       за скруглением плашки. */
    overflow: hidden;
    transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

/* WooCommerce вешает на карточки margin-bottom: 2.992em из своей float-вёрстки,
   причём селектором с [class*="columns-"] — он перебивает `margin: 0` в правиле
   выше по специфичности. Сетка давно на grid, и эти 48px складывались с
   row-gap: заявленные 36px между рядами на телефоне превращались в 84.
   Расстояние между рядами должен задавать только gap. */
.woocommerce ul.products[class*="columns-"] li.product,
.woocommerce-page ul.products[class*="columns-"] li.product {
    margin: 0;
}

.woocommerce ul.products li.product:hover,
.woocommerce-page ul.products li.product:hover {
    border-color: #bcccc0;
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(23, 75, 55, 0.09);
}

@media (prefers-reduced-motion: reduce) {
    .woocommerce ul.products li.product,
    .woocommerce-page ul.products li.product {
        transition: none;
    }

    .woocommerce ul.products li.product:hover,
    .woocommerce-page ul.products li.product:hover {
        transform: none;
    }
}

.woocommerce ul.products li.product .woocommerce-LoopProduct-link {
    display: flex;
    min-width: 0;
    padding: 0 18px;
    flex: none;
    flex-direction: column;
}

.woocommerce ul.products li.product a img {
    display: block;
    /* Вылезаем из внутренних полей ссылки, чтобы картинка шла от края до края. */
    width: calc(100% + 36px);
    max-width: none;
    margin: 0 -18px 16px;
    padding: 0;
    border: 0;
    border-bottom: 1px solid #ebefe9;
    border-radius: 0;
    background: transparent;
    aspect-ratio: 4 / 3;
    flex: none;
    object-fit: cover;
    object-position: center;
    transition: transform 260ms ease;
}

/* Лёгкий наезд вместо прежнего осветления: приглушать товар при наведении —
   ровно обратное тому, что нужно в этот момент. */
.woocommerce ul.products li.product:hover a img {
    transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
    .woocommerce ul.products li.product a img,
    .woocommerce ul.products li.product:hover a img {
        transition: none;
        transform: none;
    }
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    display: -webkit-box;
    padding: 0;
    margin: 0 0 8px;
    overflow: hidden;
    color: var(--clover-ink);
    font-family: var(--font-display);
    font-size: 1.22rem;
    font-weight: 500;
    line-height: 1.24;
    min-height: 3.72em;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.woocommerce ul.products li.product .price {
    /* Без margin-top: auto. Он прижимал цену к низу растянутой ссылки, и когда
       соседняя карточка в ряду выше, между характеристиками и ценой зияла
       пустота. Теперь содержимое собрано вверху, а свободная высота копится
       под ценой — кнопки по ряду всё так же выровнены, потому что их равняет
       сама ссылка с flex: 1. */
    margin-bottom: 10px;
    color: var(--clover-green-900);
    font-size: 0.92rem;
    font-weight: 700;
}

.product-card__facts {
    min-height: 38px;
    margin: 0 0 12px;
    color: var(--clover-muted);
    font-size: 0.72rem;
    line-height: 1.45;
}

.woocommerce ul.products li.product .button {
    width: calc(100% - 36px);
    min-height: 44px;
    /* Прижимаем к низу: когда соседка в ряду выше, кнопки остаются на одной
       линии, а лишняя высота собирается здесь, а не внутри текста. */
    margin: auto 18px 0;
    color: #fff;
    background: #1f654a;
    border-color: var(--clover-green-800);
}

.woocommerce ul.products li.product .button:hover {
    color: #fff;
    background: var(--clover-green-900);
    border-color: var(--clover-green-900);
    box-shadow: none;
}

/* Bag icon in front of the add-to-cart labels.
   The glyph is the same path as the 'bag' entry in clover_stitchery_icon(), but
   drawn as a mask rather than inline markup: the single-product button prints its
   label through esc_html(), so no SVG can be injected into it. Masking also means
   the icon takes the button's own colour in every state, including hover. */
.woocommerce ul.products li.product .button.add_to_cart_button,
.single_add_to_cart_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.woocommerce ul.products li.product .button.add_to_cart_button::before,
.single_add_to_cart_button::before {
    content: "";
    width: 1.1rem;
    height: 1.1rem;
    flex: 0 0 auto;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8h12l1 13H5L6 8Zm3 0V6a3 3 0 0 1 6 0v2'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8h12l1 13H5L6 8Zm3 0V6a3 3 0 0 1 6 0v2'/%3E%3C/svg%3E") center / contain no-repeat;
}

.woocommerce ul.products li.product span.onsale,
.woocommerce-page ul.products li.product span.onsale,
.woocommerce span.onsale {
    position: absolute;
    z-index: 2;
    top: 12px;
    right: 12px;
    left: auto;
    min-width: 0;
    min-height: 0;
    margin: 0 !important;
    padding: 7px 12px;
    border-radius: 999px;
    color: #fff;
    background: var(--clover-coral-700);
    box-shadow: 0 4px 10px rgba(169, 72, 80, 0.28);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1;
}

/* Цена со скидкой: старая приглушена и зачёркнута, новая — акцент. */
.woocommerce ul.products li.product .price del {
    margin-right: 6px;
    color: var(--clover-muted);
    font-weight: 500;
    opacity: 1;
}

.woocommerce ul.products li.product .price ins {
    background: transparent;
    text-decoration: none;
}

.woocommerce div.product {
    display: block;
}

.woocommerce div.product .product-overview {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(350px, 0.82fr);
    column-gap: clamp(48px, 6vw, 84px);
    align-items: start;
    position: relative;
}

.woocommerce div.product div.images,
.woocommerce div.product div.summary {
    min-width: 0;
    float: none !important;
    width: auto !important;
    margin-bottom: 66px;
}

.woocommerce div.product div.images img {
    display: block;
    width: 100%;
    height: auto;
    padding: 0;
    border: 1px solid #dde2dc;
    border-radius: 0;
    background: transparent;
    object-fit: cover;
    object-position: center;
}

.woocommerce div.product div.images .woocommerce-product-gallery__trigger {
    top: 14px;
    right: 14px;
    width: 42px;
    height: 42px;
    border: 1px solid var(--clover-line);
    border-radius: 0;
    background: #fff;
}

.woocommerce div.product div.summary {
    position: sticky;
    z-index: 1;
    top: 90px;
    align-self: start;
    background: #fff;
}

.admin-bar .woocommerce div.product div.summary {
    top: 122px;
}

.single-product .commerce-main .product_title {
    margin-bottom: 18px;
    /* На 15% меньше прежних clamp(2.25rem, 3.25vw, 3rem). */
    font-size: clamp(1.91rem, 2.76vw, 2.55rem);
    line-height: 1.06;
}

.product-summary__eyebrow {
    margin: 0 0 15px;
    color: var(--clover-green-700);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
    color: var(--clover-green-900);
    font-size: 1.35rem;
    font-weight: 700;
}

.woocommerce-product-details__short-description {
    color: var(--clover-muted);
    font-size: 1rem;
    line-height: 1.58;
}

.product-summary__facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 24px 0 0;
    border-top: 1px solid var(--clover-line);
    border-bottom: 1px solid var(--clover-line);
}

.product-summary__facts > div {
    padding: 14px 14px 14px 0;
}

.product-summary__facts > div:nth-child(odd) {
    border-right: 1px solid var(--clover-line);
}

.product-summary__facts > div:nth-child(even) {
    padding-left: 18px;
}

.product-summary__facts > div:nth-child(-n + 2) {
    border-bottom: 1px solid var(--clover-line);
}

.product-summary__facts dt {
    margin-bottom: 3px;
    color: var(--clover-muted);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.product-summary__facts dd {
    margin: 0;
    color: var(--clover-ink);
    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1.4;
}

.woocommerce div.product form.cart {
    display: block;
    margin: 22px 0;
}

.woocommerce div.product form.cart .button {
    width: 100%;
    min-height: 52px;
    border-color: #1f654a;
    color: #fff;
    background: #1f654a;
}

.woocommerce div.product form.cart .button:hover,
.woocommerce div.product form.cart .button:focus-visible {
    border-color: var(--clover-green-900);
    color: #fff;
    background: var(--clover-green-900);
}

.product-confidence {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 20px 0;
    border-top: 1px solid var(--clover-line);
    border-bottom: 1px solid var(--clover-line);
}

.product-confidence p {
    display: flex;
    gap: 10px;
    margin: 0;
    color: var(--clover-muted);
    font-size: 0.76rem;
    line-height: 1.45;
}

.product-confidence .icon {
    color: var(--clover-coral-700);
}

.product-confidence strong {
    color: var(--clover-ink);
    font-size: 0.82rem;
}

.product-pulse {
    display: grid;
    gap: 11px;
    margin: 22px 0 6px;
    padding: 16px 18px;
    border: 1px solid var(--clover-line);
    background: var(--clover-soft);
}

.product-pulse__row {
    display: flex;
    gap: 12px;
    align-items: center;
    margin: 0;
    color: var(--clover-ink);
    font-size: 0.97rem;
    line-height: 1.35;
}

.product-pulse .icon {
    flex: none;
    width: 22px;
    height: 22px;
}

.product-pulse__row--views .icon {
    color: var(--clover-green-800);
}

.product-pulse__row--downloads .icon {
    color: var(--clover-coral-700);
}

.product-pulse strong {
    font-weight: 700;
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
    display: flex;
    flex-wrap: wrap;          /* вкладок теперь до четырёх — на узком экране переносим */
    padding: 0;
    margin: 0 0 36px;
    border-bottom: 1px solid var(--clover-line);
}

.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .related {
    grid-column: 1 / -1;
}

.woocommerce div.product .woocommerce-tabs {
    padding-top: 14px;
    border-top: 1px solid var(--clover-line);
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before {
    display: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
    padding: 0;
    margin: 0 28px 0 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    padding: 14px 0;
    color: var(--clover-muted);
    font-weight: 700;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    color: var(--clover-green-900);
    box-shadow: inset 0 -2px var(--clover-coral-600);
}

.woocommerce div.product .woocommerce-tabs .panel {
    max-width: 900px;
    margin-bottom: 64px;
}

.woocommerce div.product .woocommerce-tabs .panel h2 {
    font-size: 2.15rem;
}

.woocommerce div.product .related > h2 {
    margin-bottom: 30px;
    font-size: clamp(2rem, 3vw, 2.75rem);
}

.woocommerce table.shop_table {
    border-color: var(--clover-line);
    border-radius: 0;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
    padding: 15px;
    border-color: var(--clover-line);
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.select2-container--default .select2-selection--single {
    min-height: 48px;
    padding: 10px 12px;
    border: 1px solid #b8c3bc;
    border-radius: 0;
    color: var(--clover-ink);
    background: #fff;
}

.woocommerce form .form-row label {
    color: var(--clover-ink);
    font-size: 0.84rem;
    font-weight: 700;
}

.woocommerce-info,
.woocommerce-message,
.woocommerce-error {
    border-top: 0;
    border-left: 4px solid var(--clover-green-700);
    color: var(--clover-ink);
    background: var(--clover-soft);
}

.woocommerce-error {
    border-left-color: var(--clover-coral-700);
}

.woocommerce nav.woocommerce-pagination ul {
    border: 0;
}

.woocommerce nav.woocommerce-pagination ul li {
    border: 0;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
    display: grid;
    min-width: 44px;
    height: 44px;
    padding: 0;
    margin: 0 3px;
    border: 1px solid var(--clover-line);
    border-radius: 0;
    place-items: center;
}

.woocommerce nav.woocommerce-pagination ul li span.current {
    color: #fff;
    background: var(--clover-green-800);
}

/* WooCommerce cart */
.woocommerce-cart .content-shell,
.woocommerce-cart .entry__content,
.woocommerce-cart .checkout-progress {
    max-width: var(--shell);
}

.woocommerce-cart .entry__header {
    max-width: 960px;
}

.woocommerce-cart .entry__content {
    font-size: 1rem;
}

.woocommerce-cart .wp-block-woocommerce-cart {
    margin: 0;
}

.woocommerce-cart .wp-block-woocommerce-cart.is-loading {
    min-height: 360px;
}

/* WooCommerce sizes the cart's two columns at 65% + 35% = 100% exactly, so adding
   a gap on top pushed the total past the container and the totals card wrapped
   underneath the items instead of sitting beside them. Take the gap back out of the
   column widths, split in the same 65/35 proportion, so the row still adds up.
   Scoped to the wide layout: below WooCommerce's own 700px container breakpoint the
   columns are meant to stack at full width. */
.woocommerce-cart .wc-block-cart {
    --clover-cart-gap: clamp(28px, 4vw, 54px);
    gap: var(--clover-cart-gap);
}

@container (min-width: 700px) {
    .woocommerce-cart .wc-block-cart .wc-block-components-main {
        width: calc(65% - var(--clover-cart-gap) * 0.65);
    }

    .woocommerce-cart .wc-block-cart .wc-block-components-sidebar {
        width: calc(35% - var(--clover-cart-gap) * 0.35);
    }
}

.woocommerce-cart .wc-block-cart-items {
    border-top: 1px solid var(--clover-line);
}

.woocommerce-cart .wc-block-cart-items th,
.woocommerce-cart .wc-block-cart-items td {
    border-color: var(--clover-line);
}

.woocommerce-cart .wc-block-cart-item__image img {
    width: 132px;
    border: 1px solid var(--clover-line);
    border-radius: 0;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.woocommerce-cart .wc-block-components-product-name {
    color: var(--clover-ink);
    font-family: var(--font-display);
    font-size: 1.18rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
}

.woocommerce-cart .wc-block-components-product-name:hover {
    color: var(--clover-green-800);
}

.woocommerce-cart .wc-block-cart-item__prices,
.woocommerce-cart .wc-block-formatted-money-amount {
    color: var(--clover-green-900);
    font-weight: 700;
}

.woocommerce-cart .wc-block-components-quantity-selector {
    border-color: var(--clover-line);
    border-radius: 0;
}

.woocommerce-cart .wc-block-cart-item__remove-link {
    color: var(--clover-muted);
    font-size: 0.78rem;
    text-underline-offset: 3px;
}

.woocommerce-cart .wc-block-cart__sidebar {
    align-self: start;
    padding: clamp(24px, 3vw, 34px);
    border: 1px solid var(--clover-line);
    background: var(--clover-soft);
}

.woocommerce-cart .wc-block-cart__totals-title {
    color: var(--clover-ink);
    font-family: var(--font-display);
    font-size: 1.55rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

.woocommerce-cart .wc-block-components-totals-wrapper {
    border-color: var(--clover-line);
}

.woocommerce-cart .wc-block-components-totals-coupon-link {
    color: var(--clover-green-800);
    font-weight: 700;
}

.woocommerce-cart .wc-block-components-text-input input,
.woocommerce-cart .wc-block-components-combobox .wc-block-components-combobox-control input {
    border-color: var(--clover-line);
    border-radius: 0;
    background: #fff;
}

.woocommerce-cart .wp-block-woocommerce-empty-cart-block {
    margin: 0;
}

.woocommerce-cart .wc-block-cart__empty-cart__title,
.woocommerce-cart .wp-block-woocommerce-empty-cart-block > .wp-block-heading {
    max-width: 760px;
    /* auto side margins so the capped box sits in the middle, not flush left */
    margin: 0 auto 22px;
    color: var(--clover-ink);
    font-family: var(--font-display);
    /* 20% down from the original clamp(2.2rem, 4vw, 3.8rem) */
    font-size: clamp(1.76rem, 3.2vw, 3.04rem);
    font-weight: 500;
    line-height: 1.08;
    text-align: center;
}

.woocommerce-cart .wc-block-cart__empty-cart__title::before {
    display: none;
}

.woocommerce-cart .wp-block-woocommerce-empty-cart-block > .wp-block-separator {
    display: none;
}

.woocommerce-cart .wp-block-woocommerce-empty-cart-block > .wp-block-heading:not(.wc-block-cart__empty-cart__title) {
    padding-top: clamp(42px, 6vw, 72px);
    margin-top: clamp(42px, 6vw, 72px);
    border-top: 1px solid var(--clover-line);
}

.woocommerce-cart .wc-block-grid {
    margin-top: 30px;
}

.woocommerce-cart .wc-block-grid__products {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 46px 24px;
    padding: 0;
    margin: 0;
}

.woocommerce-cart .wc-block-grid__product {
    display: flex;
    width: 100% !important;
    max-width: none !important;
    align-items: stretch;
    flex-direction: column;
    padding: 0;
    margin: 0;
    border: 0;
    text-align: left;
}

.woocommerce-cart .wc-block-grid__product-link {
    color: var(--clover-ink);
    text-decoration: none;
}

.woocommerce-cart .wc-block-grid__product-image {
    display: block;
    width: 100%;
    margin: 0 0 15px;
}

.woocommerce-cart .wc-block-grid__product-image img {
    display: block;
    width: 100%;
    border: 1px solid var(--clover-line);
    border-radius: 0;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.woocommerce-cart .wc-block-grid__product-title {
    padding: 0;
    color: var(--clover-ink);
    font-family: var(--font-display);
    font-size: 1.22rem;
    font-weight: 600;
    line-height: 1.18;
    text-align: left;
}

.woocommerce-cart .wc-block-grid__product-link:hover .wc-block-grid__product-title {
    color: var(--clover-green-800);
}

.woocommerce-cart .wc-block-grid__product-price {
    margin-top: auto;
    padding-top: 18px;
    color: var(--clover-green-900);
    font-size: 0.95rem;
    font-weight: 700;
    text-align: left;
}

.woocommerce-cart .wc-block-grid__product-add-to-cart {
    width: 100%;
    margin: 14px 0 0;
}

.woocommerce-cart .wc-block-grid__product-add-to-cart .wp-block-button__link,
.woocommerce-cart .wc-block-grid__product-add-to-cart a,
.woocommerce-cart .wc-block-grid__product-add-to-cart button {
    display: inline-flex;
    width: 100%;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    padding: 11px 18px;
    border: 1px solid var(--clover-green-800);
    border-radius: 0;
    color: #fff;
    background: var(--clover-green-800);
    font-family: var(--font-body);
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
}

.woocommerce-cart .wc-block-grid__product-add-to-cart .wp-block-button__link:hover,
.woocommerce-cart .wc-block-grid__product-add-to-cart a:hover,
.woocommerce-cart .wc-block-grid__product-add-to-cart button:hover {
    border-color: var(--clover-green-900);
    color: #fff;
    background: var(--clover-green-900);
}

.woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block {
    margin-top: clamp(58px, 8vw, 96px);
    padding-top: clamp(42px, 6vw, 70px);
    border-top: 1px solid var(--clover-line);
}

.woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block > h2 {
    margin: 0 0 30px;
    font-size: clamp(2rem, 3.4vw, 3.15rem);
    text-align: left;
}

/* Cart and checkout conversion controls */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.wc-block-cart__submit-button,
.wc-block-components-button.wc-block-cart__submit-button,
.woocommerce-checkout #place_order,
.wc-block-components-checkout-place-order-button {
    min-height: 56px !important;
    border: 1px solid #1f654a !important;
    border-radius: 0 !important;
    color: #fff !important;
    background: #1f654a !important;
    font-family: var(--font-body);
    font-size: 1rem !important;
    font-weight: 700 !important;
    line-height: 1.2;
    text-decoration: none;
}

.woocommerce-checkout #place_order,
.wc-block-components-checkout-place-order-button {
    min-height: 60px !important;
    font-size: 1.08rem !important;
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
.wc-block-cart__submit-button:hover,
.woocommerce-checkout #place_order:hover,
.wc-block-components-checkout-place-order-button:hover {
    border-color: var(--clover-green-900) !important;
    color: #fff !important;
    background: var(--clover-green-900) !important;
}

/* Slide-in cart */
.cart-drawer-shell {
    position: fixed;
    z-index: 1000;
    inset: 0;
    visibility: hidden;
    pointer-events: none;
}

.cart-drawer-shell.is-open {
    visibility: visible;
    pointer-events: auto;
}

.cart-drawer__scrim {
    position: absolute;
    inset: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    background: rgba(18, 35, 28, 0.48);
    cursor: default;
    transition: opacity 240ms ease;
}

.cart-drawer-shell.is-open .cart-drawer__scrim {
    opacity: 1;
}

.cart-drawer {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    width: min(440px, 100%);
    height: 100%;
    flex-direction: column;
    transform: translateX(100%);
    color: var(--clover-ink);
    background: #fff;
    box-shadow: -24px 0 70px rgba(18, 58, 43, 0.2);
    transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.cart-drawer-shell.is-open .cart-drawer {
    transform: translateX(0);
}

.cart-drawer__header {
    display: flex;
    min-height: 112px;
    padding: 26px 28px 22px;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    border-bottom: 1px solid var(--clover-line);
    background: var(--clover-soft);
}

.cart-drawer__header .eyebrow {
    margin-bottom: 5px;
}

.cart-drawer__header h2 {
    margin: 0;
    font-size: 1.85rem;
}

.cart-drawer__close {
    display: grid;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--clover-line);
    place-items: center;
    color: var(--clover-green-950);
    background: #fff;
    cursor: pointer;
}

.cart-drawer__content {
    display: flex;
    min-height: 0;
    flex: 1;
    flex-direction: column;
}

.cart-drawer__items {
    flex: 1;
    padding: 4px 28px;
    margin: 0;
    overflow-y: auto;
    list-style: none;
}

.cart-drawer__item {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr) 32px;
    align-items: center;
    gap: 14px;
    padding: 20px 0;
    border-bottom: 1px solid var(--clover-line);
}

.cart-drawer__thumb img {
    display: block;
    width: 82px;
    height: 96px;
    padding: 7px;
    border: 1px solid #e0e4df;
    background: #f5f4ef;
    object-fit: contain;
}

.cart-drawer__title {
    display: inline-block;
    margin-bottom: 5px;
    color: var(--clover-ink);
    font-family: var(--font-display);
    font-size: 1.03rem;
    font-weight: 500;
    line-height: 1.25;
    text-decoration: none;
}

.cart-drawer__item p {
    margin: 0;
    color: var(--clover-muted);
    font-size: 0.75rem;
}

.cart-drawer__remove {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    color: var(--clover-muted);
}

.cart-drawer__remove .icon {
    width: 17px;
    height: 17px;
}

.cart-drawer__summary {
    padding: 22px 28px 28px;
    border-top: 1px solid var(--clover-line);
    background: var(--clover-canvas);
}

.cart-drawer__summary > p:first-child {
    display: flex;
    margin-bottom: 8px;
    align-items: baseline;
    justify-content: space-between;
    color: var(--clover-ink);
    font-size: 0.95rem;
}

.cart-drawer__summary > p:first-child strong {
    color: var(--clover-green-950);
    font-size: 1.15rem;
}

.cart-drawer__assurance {
    margin-bottom: 18px;
    color: var(--clover-muted);
    font-size: 0.72rem;
    line-height: 1.45;
}

.cart-drawer__actions {
    display: grid;
    grid-template-columns: 0.85fr 1.25fr;
    gap: 9px;
}

.cart-drawer__view-cart,
.woocommerce a.cart-drawer__view-cart {
    border: 1px solid var(--clover-green-800);
    color: var(--clover-green-900) !important;
    background: transparent !important;
}

.cart-drawer__view-cart:hover,
.woocommerce a.cart-drawer__view-cart:hover {
    color: #fff !important;
    background: var(--clover-green-900) !important;
}

.cart-drawer__checkout,
.woocommerce a.cart-drawer__checkout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: 1px solid var(--clover-green-800) !important;
    color: #fff !important;
    background: linear-gradient(135deg, var(--clover-green-700), var(--clover-green-950)) !important;
}

.cart-drawer__checkout .icon,
.woocommerce a.cart-drawer__checkout .icon {
    width: 1.05rem;
    height: 1.05rem;
}

.cart-drawer__checkout:hover,
.woocommerce a.cart-drawer__checkout:hover {
    color: #fff !important;
    background: linear-gradient(135deg, var(--clover-green-800), #0d2b20) !important;
}

/* WooCommerce drops a "View cart" link in after an AJAX add; the cart drawer that
   slides in already offers that, so the duplicate under the button is redundant. */
.woocommerce ul.products li.product .added_to_cart,
.woocommerce a.added_to_cart {
    display: none !important;
}

/* The download button on the order-received page and in the account area ships with
   WooCommerce's default purple; bring it back to the brand green with the same
   download glyph used elsewhere. This is the last screen of the purchase, so it
   should not be the one off-brand element. */
.woocommerce-MyAccount-downloads-file,
.woocommerce a.woocommerce-MyAccount-downloads-file {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: #fff !important;
    background: linear-gradient(135deg, var(--clover-green-700), var(--clover-green-950)) !important;
    border-color: var(--clover-green-800) !important;
}

.woocommerce-MyAccount-downloads-file:hover,
.woocommerce a.woocommerce-MyAccount-downloads-file:hover {
    background: linear-gradient(135deg, var(--clover-green-800), #0d2b20) !important;
}

.woocommerce-MyAccount-downloads-file::before {
    content: "";
    width: 1.05rem;
    height: 1.05rem;
    flex: 0 0 auto;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12m-5-5 5 5 5-5M5 21h14'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12m-5-5 5 5 5-5M5 21h14'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* A basket of only free patterns takes no payment and no tax, so the whole billing
   step is dropped and the checkout becomes a single email field. The body class is
   set in the clover-digital-checkout mu-plugin. */
.clover-free-checkout .wc-block-checkout__billing-fields {
    display: none;
}

/* The cart block's checkout button, matched to the drawer: same gradient, same
   padlock. The icon is a mask here because the block renders its own markup. */
.wc-block-cart__submit-button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: #fff !important;
    background: linear-gradient(135deg, var(--clover-green-700), var(--clover-green-950)) !important;
    border-color: var(--clover-green-800) !important;
}

.wc-block-cart__submit-button:hover {
    background: linear-gradient(135deg, var(--clover-green-800), #0d2b20) !important;
}

.wc-block-cart__submit-button::before {
    content: "";
    width: 1.05rem;
    height: 1.05rem;
    flex: 0 0 auto;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 11h14v10H5V11Zm3 0V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 11h14v10H5V11Zm3 0V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
}

.cart-drawer__empty {
    max-width: 340px;
    padding: 58px 28px;
}

.cart-drawer__empty h3 {
    font-size: 2rem;
}

.cart-drawer__empty > p:not(.eyebrow) {
    color: var(--clover-muted);
}

/* About page — the designer introduction.
   Greyscale is applied here as well as baked into the file, so a colour portrait
   dropped in later still matches the rest of the page instead of shouting. */
.designer-card {
    display: grid;
    grid-template-columns: 220px 1fr;
    align-items: center;
    gap: clamp(28px, 4vw, 52px);
    padding-bottom: clamp(34px, 4vw, 48px);
    margin-bottom: clamp(34px, 4vw, 48px);
    border-bottom: 1px solid var(--clover-line);
}

.designer-card__portrait {
    width: 220px;
    height: 220px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    /* Ring drawn as a border rather than an outline so it follows the circle and
       is included in the element's box — the grid column keeps its 220px slot. */
    box-sizing: border-box;
    border: 4px solid var(--clover-green-800);
    border-radius: 50%;
    background: var(--clover-canvas);
}

.designer-card__portrait img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1);
}

.designer-card__eyebrow {
    margin: 0 0 10px;
    color: var(--clover-green-800);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.designer-card__name {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 3.4vw, 2.6rem);
    font-weight: 500;
    line-height: 1.05;
}

.designer-card__role {
    margin: 6px 0 0;
    color: var(--clover-muted, #6e6e68);
    font-size: 0.95rem;
}

.designer-card__lede {
    max-width: 46ch;
    margin: 18px 0 0;
}

.entry__content .designer-card p {
    max-width: none;
}

@media (max-width: 640px) {
    .designer-card {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 22px;
        text-align: center;
    }

    .designer-card__portrait {
        width: 168px;
        height: 168px;
    }

    .designer-card__lede {
        text-align: left;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

@media (max-width: 1120px) {
    .desktop-nav {
        display: none;
    }

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

    .menu-toggle {
        display: inline-grid;
    }

    .hero__content {
        width: 56%;
    }

    .collection-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .collection-card {
        min-height: 0;
    }

    .woocommerce ul.products {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .woocommerce-cart .wc-block-grid__products {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .entry__content,
    .checkout-progress {
        max-width: 100%;
    }

    .woocommerce-cart .wc-block-cart__sidebar {
        padding: 24px;
    }

    .hero-slide {
        min-height: auto;
        padding-bottom: 360px;
    }

    .hero-slide::after {
        background: linear-gradient(180deg, #f3f5f0 0%, #f3f5f0 50%, rgba(243, 245, 240, 0.78) 65%, rgba(243, 245, 240, 0) 78%);
    }

    .hero__media {
        top: auto;
        width: 100%;
        height: 390px;
    }

    .hero__media img {
        height: 100%;
        object-position: center 42%;
    }

    .hero-slide:first-child .hero__media img {
        object-position: 68% center;
    }

    .hero__inner {
        min-height: auto;
    }

    .hero__content {
        width: 100%;
        max-width: 690px;
        padding: 58px 0 42px;
    }

    .hero-slider__controls {
        right: 20px;
        bottom: 20px;
    }

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

    .collection-card:first-child {
        grid-column: span 2;
    }

    .standard-section__grid,
    .faq-preview__grid,
    .site-footer__top {
        grid-template-columns: 1fr;
    }

    .standard-section__intro {
        position: static;
    }

    .process-grid {
        grid-template-columns: 1fr;
        gap: 62px;
    }

    .process-card {
        display: grid;
        grid-template-columns: minmax(180px, 0.7fr) minmax(0, 1.3fr);
        gap: 34px;
        text-align: left;
    }

    .process-card__image {
        width: min(100%, 230px);
    }

    .process-card__body {
        max-width: 440px;
        padding: 0;
    }

    .process-card:not(:last-child)::after {
        top: auto;
        right: auto;
        bottom: -49px;
        left: 87px;
        width: 52px;
        transform: rotate(90deg);
    }

    .process-section__footer {
        align-items: flex-start;
    }

    .woocommerce ul.products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .woocommerce div.product .product-overview {
        grid-template-columns: 1fr;
    }

    .woocommerce div.product div.summary {
        position: static;
    }

    /* С этой ширины картинка встаёт над колонкой с текстом, и счётчику место
       сразу под ней: на телефоне он иначе тонет между таблицей характеристик и
       кнопкой, где его никто не видит. Колонку переводим в flex только здесь —
       на десктопе она остаётся блочной и порядок берётся из разметки. */
    .woocommerce div.product div.summary {
        display: flex;
        flex-direction: column;
    }

    .woocommerce div.product div.summary .product-pulse {
        order: -1;
        margin-top: 0;
    }

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

    .not-found-links {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 601px) and (max-width: 782px) {
    .admin-bar .site-header {
        top: 46px;
    }
}

@media (max-width: 600px) {
    .admin-bar .site-header {
        top: 0;
    }
}

@media (max-width: 640px) {
    /* The hero is the entire first screen on a phone, where a second slide is
       almost never reached. navigation.js parks the carousel on slide one at this
       width, so the arrows and dots have nothing left to do. */
    .hero-slider__controls {
        display: none;
    }

    /* Phone reading order differs from desktop: the how-it-works explainer earns
       its place right after the product rows, and browsing by mood comes after.
       Ordering every child explicitly, because a partial set would let the
       untouched sections collapse to the front of the flex order — which is
       exactly what happened when the "New in store" row was added without a
       number and jumped above the hero. Add a section here whenever you add one
       to front-page.php. */
    .home-page {
        display: flex;
        flex-direction: column;
    }

    .home-page .sale-countdown { order: 0; }
    .home-page .hero { order: 1; }
    /* На телефоне сразу под героем идут новинки: сезонные схемы живут
       считаные недели, и на маленьком экране до второго ряда доходят не все.
       «Beginner favorites» следом — подборка вечная, она подождёт. */
    .home-page .new-arrivals { order: 2; }
    .home-page .featured-products:not(.top-sellers) { order: 3; }
    .home-page .top-sellers { order: 4; }
    .home-page .process-section { order: 5; }
    .home-page .collection-section { order: 6; }
    .home-page .testimonials { order: 7; }
    .home-page .stitchers { order: 8; }
    .home-page .standard-section { order: 9; }
    .home-page .free-pattern { order: 10; }
    .home-page .faq-preview { order: 11; }

    /* The two product rows sit back to back under the hero, so they run on a
       tighter rhythm than the full-width sections further down the page. The
       first of the pair drops its top padding: the hero's zigzag edge already
       holds the pause, and 72px on top of it cost a screenful of nothing. */
    .home-page .new-arrivals {
        padding-top: 0;
        padding-bottom: 25px;
    }

    .home-page .featured-products:not(.top-sellers) {
        padding-top: 20px;
    }

    .home-page .top-sellers {
        padding-top: 20px;
    }

    .site-shell {
        width: min(calc(100% - 32px), var(--shell));
    }

    .announcement-bar__inner {
        min-height: 38px;
        justify-content: center;
        text-align: center;
    }

    .announcement-bar__inner > span {
        display: none;
    }

    .site-header__inner {
        min-height: 68px;
        gap: 10px;
    }

    .site-header.is-condensed .site-header__inner {
        min-height: 62px;
    }

    .brand__image {
        width: 176px;
    }

    .site-header.is-condensed .brand__image {
        width: 164px;
    }

    .not-found-panel__actions .button {
        width: 100%;
    }

    .header-action,
    .menu-toggle {
        width: 44px;
        height: 44px;
    }

    .site-header.is-condensed .header-action,
    .site-header.is-condensed .menu-toggle {
        width: 40px;
        height: 40px;
    }

    .header-action--account {
        display: none;
    }

    .mobile-nav {
        --mobile-nav-top: 106px;
    }

    .currency-switcher--header {
        display: none;
    }

    .currency-switcher--mobile {
        display: flex;
        min-height: 48px;
        align-items: center;
        justify-content: space-between;
        margin: 16px 0 18px;
        border-top: 1px solid var(--clover-line);
        border-bottom: 1px solid var(--clover-line);
    }

    .currency-switcher--mobile::before {
        color: var(--clover-muted);
        content: "Currency";
        font-size: 0.72rem;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .currency-switcher--mobile .wcml-dropdown-click .wcml-cs-submenu {
        top: calc(100% + 1px);
    }

    /* No hero photo on a phone: it pushed the headline and buttons off the first
       screen for a picture the visitor cannot read anything from at that size. With
       the image gone the slide sizes to its own text, so the reserved space and the
       fade that blended photo into background both go with it. */
    .hero-slide {
        padding-bottom: 0;
    }

    .hero__media {
        display: none;
    }

    .hero-slide::after {
        display: none;
    }

    .hero__content {
        padding-top: 52px;
        /* Nothing follows inside the slide now that the photo is gone, so the
           trailing space would only push the next section down. */
        padding-bottom: 0;
    }

    .hero h1,
    .hero__title {
        font-size: clamp(2.65rem, 12.5vw, 3.75rem);
        line-height: 0.98;
    }

    .hero__lede {
        font-size: 1rem;
    }

    .hero__actions {
        display: grid;
    }

    .hero-proof-strip {
        gap: 11px;
        margin-bottom: 20px;
    }

    .hero-proof-strip__face {
        width: 40px;
        height: 40px;
    }

    .hero-proof-strip__face + .hero-proof-strip__face {
        margin-left: -13px;
    }

    .hero__proof {
        display: grid;
        gap: 10px;
    }

    .search-panel__inner {
        min-height: 82px;
    }

    .search-suggestion {
        grid-template-columns: 58px minmax(0, 1fr) auto;
        gap: 10px;
        padding: 10px;
    }

    .search-suggestion img {
        width: 58px;
        height: 58px;
    }

    .search-suggestion__copy strong {
        font-size: 0.94rem;
    }

    .search-suggestion__copy small {
        display: none;
    }

    .search-suggestion__price {
        font-size: 0.74rem;
    }

    .section {
        padding: 44px 0;
    }

    .section-heading {
        margin-bottom: 22px;
    }

    /* Сетка товаров — последняя в секции, и её нижний отступ просто складывался
       с паддингом секции в двойную пустоту перед следующим заголовком. */
    .woocommerce ul.products {
        margin-bottom: 0;
    }

    .section-heading--split {
        gap: 14px;
    }

    .checkout-progress {
        margin-bottom: 34px;
    }

    .checkout-progress li:not(:last-child)::after {
        top: 17px;
        left: calc(50% + 22px);
        width: calc(100% - 44px);
    }

    .checkout-progress__step {
        gap: 8px;
    }

    .checkout-progress__number {
        width: 36px;
        height: 36px;
        font-size: 0.75rem;
    }

    .checkout-progress__step strong {
        font-size: 0.74rem;
    }

    .checkout-progress__note {
        align-items: flex-start;
        justify-content: flex-start;
        padding-inline: 0;
        font-size: 0.72rem;
        line-height: 1.45;
    }

    .section-heading--split,
    .free-pattern__inner,
    .site-footer__bottom {
        align-items: flex-start;
        flex-direction: column;
    }

    .collection-grid {
        grid-template-columns: 1fr;
    }

    .collection-card:first-child {
        grid-column: auto;
    }

    .collection-card {
        min-height: 0;
    }

    .standard-section__grid {
        gap: 48px;
    }

    .standard-list li {
        grid-template-columns: 42px 1fr;
    }

    .free-pattern .button {
        width: 100%;
    }

    .process-card {
        display: flex;
        gap: 0;
        text-align: center;
    }

    .process-card__image {
        width: min(100%, 280px);
    }

    .process-card__body {
        padding-top: 22px;
    }

    .process-card:not(:last-child)::after {
        left: 50%;
        transform: translateX(-50%) rotate(90deg);
    }

    .process-section__footer {
        align-items: stretch;
        flex-direction: column;
    }

    .process-section__footer .button {
        width: 100%;
    }

    .site-footer__top {
        gap: 48px;
        padding-top: 64px;
    }

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

    .site-footer__bottom {
        display: flex;
        padding: 20px 0;
    }

    .site-footer__payments {
        min-height: auto;
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
        padding: 22px 0;
    }

    .site-footer .payment-icons {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 9px;
    }

    .site-footer .payment-icon {
        width: 52px;
    }

    .site-footer__bottom-right {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
        margin-left: 0;
    }

    .woocommerce ul.products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px 12px;
    }

    .woocommerce-cart .wc-block-grid__products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px 12px;
    }

    .woocommerce-cart .wc-block-grid__product-title {
        font-size: 1.03rem;
    }

    .woocommerce-cart .wc-block-grid__product-add-to-cart .wp-block-button__link,
    .woocommerce-cart .wc-block-grid__product-add-to-cart a,
    .woocommerce-cart .wc-block-grid__product-add-to-cart button {
        padding-inline: 8px;
        font-size: 0.76rem;
    }

    .post-grid {
        grid-template-columns: 1fr;
    }

    .woocommerce ul.products li.product a img {
        padding: 0;
    }

    .woocommerce ul.products li.product .woocommerce-loop-product__title {
        font-size: 1.03rem;
    }

    .woocommerce ul.products li.product .button {
        padding-inline: 8px;
        font-size: 0.76rem;
    }

    .product-card__facts {
        min-height: 40px;
        font-size: 0.66rem;
    }

    .clover-form-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .clover-contact-form {
        padding: 22px;
    }

    .woocommerce div.product div.images,
    .woocommerce div.product div.summary {
        float: none;
        width: 100%;
    }

    .product-confidence {
        grid-template-columns: 1fr;
    }

    .woocommerce div.product form.cart {
        display: block;
    }

    .woocommerce div.product form.cart .button {
        width: 100%;
    }

    /* On a phone the shop header is three stacked rows of chrome before a single
       product is visible. The filter chips carry the browsing, so the intro copy,
       the result count and the sort control step aside. */
    .woocommerce .woocommerce-result-count,
    .woocommerce .woocommerce-ordering {
        display: none;
    }

    .shop-category-nav {
        gap: 6px;
    }

    .shop-category-nav a {
        min-height: 40px;
        padding: 0 12px;
        font-size: 0.79rem;
    }

    .cart-drawer__header,
    .cart-drawer__items,
    .cart-drawer__summary {
        padding-right: 20px;
        padding-left: 20px;
    }

    .cart-drawer__actions {
        grid-template-columns: 1fr;
    }
}

/* ---------------------------------------------------------------------------
   Early-tester feedback carousel
   Native scroll-snap track: swipes and keyboard scrolling work with JS off,
   the arrows and dots are progressive enhancement layered on top.
   --------------------------------------------------------------------------- */

.testimonials {
    background: var(--clover-canvas);
    /* Карточки намеренно вылезают к краям экрана (отрицательные отступы),
       поэтому вылет обрезаем здесь, а не отдаём его странице. */
    overflow-x: clip;
}

.testimonials__disclosure {
    max-width: 46ch;
    color: var(--clover-muted);
    font-size: 0.94rem;
    line-height: 1.55;
}

.testimonials__viewport {
    /* Negative margin lets cards bleed to the viewport edge on small screens so
       the next card peeks in and the row reads as scrollable. */
    margin: 0 calc(var(--testimonials-bleed, 0px) * -1);
    padding: 0 var(--testimonials-bleed, 0px);
    overflow-x: auto;
    /* proximity, not mandatory: the final scroll position sits between two snap
       points, and mandatory would refuse to rest there and snap back. */
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
}

.testimonials__viewport::-webkit-scrollbar {
    display: none;
}

.testimonials__viewport:focus-visible {
    outline: 0;
    box-shadow: var(--focus);
}

.testimonials__track {
    /* Flex, not grid: `1fr` columns share the container width, so eight cards
       would shrink to fit instead of overflowing and becoming scrollable.
       A flex-basis in percent sizes each card against the visible width and
       lets the rest run off the edge, which is what makes the track a track. */
    display: flex;
    gap: 24px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.testimonial-card {
    display: flex;
    min-width: 0;
    /* Three across the 1200px shell, minus the two 24px gaps between them. */
    flex: 0 0 calc((100% - 48px) / 3);
    flex-direction: column;
    padding: 30px 30px 26px;
    border: 1px solid var(--clover-line);
    background: var(--clover-surface);
    scroll-snap-align: start;
}

.testimonial-card .icon--quote {
    width: 30px;
    height: 30px;
    margin-bottom: 16px;
    color: var(--clover-sage-300);
    fill: currentColor;
    stroke: none;
}

.testimonial-card__quote {
    padding: 0;
    margin: 0 0 22px;
    border: 0;
    /* Push the attribution to the bottom so cards of different quote lengths
       still line their names up across the row. */
    flex: 1 1 auto;
}

.testimonial-card__quote p {
    margin: 0;
    color: var(--clover-ink);
    font-family: var(--font-display);
    font-size: 1.18rem;
    line-height: 1.5;
}

.testimonial-card__meta p {
    margin: 0;
}

.testimonial-card__name {
    color: var(--clover-green-900);
    font-weight: 600;
}

.testimonial-card__where,
.testimonial-card__pattern {
    color: var(--clover-muted);
    font-size: 0.88rem;
    line-height: 1.5;
}

.testimonial-card__pattern {
    margin-top: 6px !important;
    font-style: italic;
}

/* Scaffolding rows are admin-only, but flag them loudly so they are never
   mistaken for real feedback while editing. */
.testimonial-card--placeholder {
    border-style: dashed;
    border-color: var(--clover-coral-600);
    background: var(--clover-coral-100);
}

.testimonials__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 26px;
}

.testimonials__controls[hidden] {
    display: none;
}

.testimonials__arrow,
.testimonials__dots button {
    display: inline-grid;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: 0;
    place-items: center;
    color: var(--clover-green-900);
    background: transparent;
    cursor: pointer;
}

.testimonials__arrow[disabled] {
    color: var(--clover-line);
    cursor: default;
}

.testimonials__arrow:not([disabled]):hover,
.testimonials__arrow:not([disabled]):focus-visible,
.testimonials__dots button:hover,
.testimonials__dots button:focus-visible {
    color: #fff;
    background: var(--clover-green-800);
}

.testimonials__arrow .icon {
    width: 19px;
    height: 19px;
}

.testimonials__dots {
    display: flex;
    align-items: center;
}

.testimonials__dots button::before {
    width: 18px;
    height: 2px;
    background: rgba(31, 101, 74, 0.3);
    content: "";
    transition: width 180ms ease, background-color 180ms ease;
}

.testimonials__dots button.is-active::before {
    width: 28px;
    background: var(--clover-coral-700);
}

@media (max-width: 1023px) {
    .testimonial-card {
        flex-basis: calc((100% - 24px) / 2);
    }
}

@media (max-width: 640px) {
    .testimonials {
        --testimonials-bleed: 20px;
    }

    .testimonials__track {
        gap: 14px;
    }

    .testimonial-card {
        /* Just under full width so the next card peeks in and the row reads
           as swipeable without any affordance drawn on top. */
        flex-basis: 84%;
    }

    .testimonial-card {
        padding: 24px 22px 22px;
    }

    .testimonial-card__quote p {
        font-size: 1.08rem;
    }
}

@media (max-width: 640px) {
    .woocommerce ul.products li.product,
    .woocommerce-page ul.products li.product {
        padding-bottom: 14px;
    }

    .woocommerce ul.products li.product .woocommerce-LoopProduct-link {
        padding: 0 13px;
    }

    .woocommerce ul.products li.product a img {
        width: calc(100% + 26px);
        margin: 0 -13px 13px;
    }

    .woocommerce ul.products li.product .button {
        width: calc(100% - 26px);
        margin: auto 13px 0;
    }
}

/* ── Схема на заказ ────────────────────────────────────────────────────────
   Бриф стоит между описанием и кнопкой, поэтому его задача — не украшать, а
   не дать проскочить мимо: обвязка отделяет его от карточки товара, но не
   спорит с ней по весу. */
.custom-chart {
    margin: 26px 0 22px;
    padding: 26px 24px 24px;
    background: var(--clover-canvas);
    border: 1px solid var(--clover-line);
    border-radius: 14px;
}

.custom-chart__intro {
    margin-bottom: 20px;
}

.custom-chart__heading {
    margin: 0 0 8px;
    font-size: 1.28rem;
    line-height: 1.25;
}

.custom-chart__intro p {
    margin: 0;
    color: #46534a;
    font-size: 0.93rem;
    line-height: 1.55;
}

.custom-chart__field {
    margin-bottom: 16px;
}

.custom-chart__label {
    display: block;
    margin-bottom: 6px;
    color: var(--clover-ink);
    font-size: 0.86rem;
    font-weight: 600;
}

.custom-chart__required {
    color: var(--clover-coral-700);
}

.custom-chart input[type="file"],
.custom-chart textarea,
.custom-chart select {
    width: 100%;
    padding: 11px 12px;
    background: #fff;
    border: 1px solid #cfd8d1;
    border-radius: 9px;
    color: var(--clover-ink);
    font-family: inherit;
    font-size: 0.92rem;
}

.custom-chart textarea {
    resize: vertical;
}

.custom-chart input[type="file"]:focus-visible,
.custom-chart textarea:focus-visible,
.custom-chart select:focus-visible {
    outline: 2px solid var(--clover-green-700);
    outline-offset: 1px;
}

.custom-chart__hint {
    margin: 6px 0 0;
    color: var(--clover-muted);
    font-size: 0.78rem;
}

/* Подсказка по фото свёрнута: она нужна не всем, а развёрнутой съедает экран
   ровно там, где человек уже решился покупать. */
.custom-chart__guide {
    margin: 0 0 18px;
    border: 1px solid var(--clover-line);
    border-radius: 10px;
    background: #fff;
}

.custom-chart__guide summary {
    padding: 12px 14px;
    color: var(--clover-green-700);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
}

.custom-chart__guide-body {
    display: grid;
    gap: 18px;
    padding: 0 14px 14px;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.custom-chart__guide-title {
    margin: 0 0 6px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.custom-chart__guide-title--yes { color: var(--clover-green-700); }
.custom-chart__guide-title--no  { color: var(--clover-coral-700); }

.custom-chart__guide-body ul {
    margin: 0;
    padding-left: 18px;
    color: #46534a;
    font-size: 0.86rem;
    line-height: 1.5;
}

.custom-chart__guide-note {
    margin: 0;
    color: var(--clover-muted);
    font-size: 0.82rem;
    line-height: 1.5;
    grid-column: 1 / -1;
}

.custom-chart__grid {
    display: grid;
    gap: 14px;
    /* 190px хватало на две колонки в узкой колонке товара, но текст в них не
       помещался и обрезался вместе с надбавкой к цене. Порог поднят: в колонке
       товара селекты встают в один столбец и читаются целиком. */
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.custom-chart__grid .custom-chart__field {
    margin-bottom: 0;
}

.custom-chart__turnaround {
    display: flex;
    margin: 0 0 16px;
    padding: 11px 14px;
    align-items: center;
    gap: 9px;
    background: rgba(31, 101, 74, 0.07);
    border-radius: 9px;
    color: var(--clover-green-800);
    font-size: 0.87rem;
}

@media (max-width: 640px) {
    .custom-chart {
        padding: 20px 16px 18px;
    }

    .custom-chart__grid {
        grid-template-columns: 1fr;
    }
}


/* Ссылки на машиночитаемые документы: заметно тише остального футера — они
   адресованы агентам, а не покупателям, и не должны конкурировать за внимание. */
.site-footer__llm {
    display: flex;
    padding: 16px 0 0;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.34);
    font-size: 0.72rem;
}

.site-footer__llm a {
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
}

.site-footer__llm a:hover,
.site-footer__llm a:focus-visible {
    color: rgba(255, 255, 255, 0.86);
    text-decoration: underline;
}

@media (max-width: 640px) {
    .site-footer__llm {
        flex-wrap: wrap;
        gap: 8px;
        font-size: 0.68rem;
    }
}


/* Значок «Verified stitcher» у имени в отзывах. Держим его тише имени:
   это пометка о достоверности, а не второй заголовок карточки. */
.testimonial-card__name {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
}

.testimonial-card__verified {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--clover-green-700);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.testimonial-card__verified .icon,
.testimonial-card__verified svg {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    color: var(--clover-green-700);
}

/* --- From Our Stitchers ------------------------------------------------- */

/* Фотографии — продолжение отзывов, а не отдельная тема, поэтому сверху
   отступа нет: паузу уже держит нижний паддинг блока с отзывами и смена фона с
   тонированного на белый. Иначе между ними набегало 184 px пустоты.
   Селектор по соседству, чтобы на карточке товара, где секция стоит сама по
   себе, отступ остался обычным. */
.testimonials + .stitchers {
    padding-top: 0;
    padding-bottom: clamp(44px, 4.6vw, 64px);
}

.stitchers__head {
    max-width: 620px;
    margin: 0 auto clamp(22px, 2.6vw, 32px);
    text-align: center;
}

.stitchers__lede {
    margin: 12px 0 0;
    color: var(--clover-muted);
    font-size: 1rem;
    line-height: 1.55;
}

/* Кладка колонками, а не сеткой с одинаковыми плитками: снимки присылают в
   разных пропорциях, и обрезка под квадрат резала бы то рамку, то пяльцы. */
/* Flex, а не grid: снимков 11, и последний ряд всегда неполный. Flex умеет
   центрировать остаток, и «хвост» читается как задуманный, а не как обрыв. */
.stitchers__grid {
    --stitchers-gap: 8px;
    --stitchers-cols: 6;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--stitchers-gap);
}

.stitchers__item {
    position: relative;
    display: block;
    flex: 0 0 calc((100% - (var(--stitchers-cols) - 1) * var(--stitchers-gap)) / var(--stitchers-cols));
    padding: 0;
    margin: 0;
    overflow: hidden;
    aspect-ratio: 1;
    background: var(--clover-surface);
    border: 0;
    border-radius: 0;
    cursor: zoom-in;
}

.stitchers__photo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.stitchers__item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(18, 58, 43, 0) 45%, rgba(18, 58, 43, 0.42) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.stitchers__zoom {
    position: absolute;
    z-index: 2;
    right: 8px;
    bottom: 8px;
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    color: var(--clover-green-900);
    background: rgba(255, 255, 255, 0.94);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}

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

.stitchers__item:hover .stitchers__photo,
.stitchers__item:focus-visible .stitchers__photo {
    transform: scale(1.05);
}

.stitchers__item:hover::after,
.stitchers__item:focus-visible::after,
.stitchers__item:hover .stitchers__zoom,
.stitchers__item:focus-visible .stitchers__zoom {
    opacity: 1;
    transform: none;
}

.stitchers__item:focus-visible {
    outline: 2px solid var(--clover-green-800);
    outline-offset: 3px;
}

/* --- Лайтбокс ----------------------------------------------------------- */

body.has-stitchbox {
    overflow: hidden;
}

.stitchbox {
    position: fixed;
    z-index: 9999;
    inset: 0;
    display: grid;
    place-items: center;
    padding: clamp(16px, 4vw, 48px);
}

.stitchbox__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(12, 26, 20, 0.95);
    cursor: zoom-out;
}

.stitchbox__stage {
    position: relative;
    z-index: 1;
    display: flex;
    max-width: min(1080px, 100%);
    max-height: 100%;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin: 0;
}

.stitchbox__image {
    max-width: 100%;
    /* Подпись и отступы диалога тоже занимают высоту — без вычета высокие
       снимки уезжали бы за нижний край экрана. */
    max-height: calc(100vh - clamp(150px, 22vh, 210px));
    object-fit: contain;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.stitchbox__image.is-ready {
    opacity: 1;
}

.stitchbox__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 6px 14px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.86rem;
    text-align: center;
}

.stitchbox__counter {
    color: rgba(255, 255, 255, 0.55);
    font-variant-numeric: tabular-nums;
}

.stitchbox__close,
.stitchbox__nav {
    position: absolute;
    z-index: 2;
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    border: 0;
    cursor: pointer;
    transition: background 0.2s ease;
}

.stitchbox__close:hover,
.stitchbox__nav:hover {
    background: rgba(255, 255, 255, 0.26);
}

.stitchbox__close:focus-visible,
.stitchbox__nav:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.stitchbox__close svg,
.stitchbox__nav svg {
    width: 21px;
    height: 21px;
}

.stitchbox__close {
    top: clamp(12px, 2.4vw, 26px);
    right: clamp(12px, 2.4vw, 26px);
}

.stitchbox__nav {
    top: 50%;
    margin-top: -23px;
}

.stitchbox__nav--prev {
    left: clamp(8px, 2.4vw, 26px);
}

.stitchbox__nav--next {
    right: clamp(8px, 2.4vw, 26px);
}

@media (max-width: 1100px) {
    .stitchers__grid {
        --stitchers-cols: 4;
    }
}

@media (max-width: 700px) {
    .stitchers__grid {
        --stitchers-gap: 6px;
        --stitchers-cols: 3;
    }

    /* На телефоне стрелки закрывают сам снимок — уводим их под него, листать
       всё равно удобнее свайпом. */
    .stitchbox__nav {
        top: auto;
        bottom: 14px;
        margin-top: 0;
    }

    .stitchbox__image {
        max-height: calc(100vh - 230px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .stitchers__photo,
    .stitchers__item::after,
    .stitchers__zoom,
    .stitchbox__image {
        transition: none;
    }

    .stitchers__item:hover .stitchers__photo {
        transform: none;
    }
}

/* Выпадающий список валют раскрывает наш обработчик, а не скрипт WCML. */
.currency-switcher .wcml-cs-submenu {
    display: none;
}

.currency-switcher.is-open .wcml-cs-submenu {
    display: block;
}

.currency-switcher.is-busy {
    opacity: 0.55;
    pointer-events: none;
}

.currency-switcher .wcml-cs-item-toggle,
.currency-switcher .wcml-cs-submenu a {
    cursor: pointer;
}

/* --- Preview chart: кнопка на карточке ------------------------------------ */

.product-card__preview {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    /* Тот же горизонтальный отступ, что у названия и цены: кнопка должна
       стоять в общей колонке карточки, а не выпадать из неё. */
    margin: 2px 18px 12px;
    padding: 0;
    color: var(--clover-green-800);
    background: none;
    border: 0;
    border-bottom: 1px solid rgba(31, 101, 74, 0.32);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.5;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.product-card__preview:hover {
    color: var(--clover-green-900);
    border-color: var(--clover-green-900);
}

.product-card__preview:focus-visible {
    outline: 2px solid var(--clover-green-800);
    outline-offset: 3px;
}

.product-card__preview .icon {
    width: 15px;
    height: 15px;
    stroke-width: 1.7;
}

/* --- Preview chart: модалка ----------------------------------------------- */

body.has-chartbox {
    overflow: hidden;
}

.chartbox {
    position: fixed;
    z-index: 9999;
    inset: 0;
    display: grid;
    place-items: center;
    padding: clamp(14px, 3vw, 40px);
}

.chartbox__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(12, 26, 20, 0.82);
    cursor: zoom-out;
}

.chartbox__panel {
    position: relative;
    z-index: 1;
    width: min(1100px, 100%);
    max-height: 100%;
    padding: clamp(20px, 3vw, 32px);
    overflow: auto;
    background: var(--clover-canvas);
}

.chartbox__title {
    max-width: calc(100% - 52px);
    margin: 0 0 16px;
    font-size: clamp(1.15rem, 2.2vw, 1.6rem);
    line-height: 1.2;
}

.chartbox__close {
    position: absolute;
    top: clamp(14px, 2vw, 22px);
    right: clamp(14px, 2vw, 22px);
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    color: var(--clover-ink);
    background: var(--clover-surface);
    border: 1px solid var(--clover-line);
    cursor: pointer;
}

.chartbox__close:hover {
    background: var(--clover-soft);
}

.chartbox__close svg {
    width: 19px;
    height: 19px;
}

.chartbox__image {
    display: block;
    width: 100%;
    height: auto;
    background: var(--clover-surface);
}

@media (max-width: 640px) {
    .product-card__preview {
        margin-bottom: 10px;
        font-size: 0.78rem;
    }

    .chartbox__panel {
        padding: 18px 14px;
    }
}

/* --- Каталог на телефоне: описание под товары -----------------------------
   На узком экране вводный абзац занимал почти весь первый экран, и до первой
   схемы приходилось листать. Переставляем его порядком flex, а не в разметке:
   в HTML текст остаётся перед товарами, поэтому поисковик по-прежнему видит
   описание категории раньше списка, а человек — сразу товары.

   Три шаблона каталога печатают описание разными классами: свои посадочные
   страницы дают .page-intro, страница магазина .page-description, архив
   таксономии .term-description. Ниже покрыты все три.
   ------------------------------------------------------------------------ */

@media (max-width: 640px) {
    .clover-catalog-landing .entry__content,
    .woocommerce-shop #primary > .site-shell,
    .tax-product_cat #primary > .site-shell {
        display: flex;
        flex-direction: column;
    }

    /* Всё остальное остаётся с order: 0 и сохраняет порядок разметки, поэтому
       описание уходит за товары и пагинацию, а завершающий блок — за него. */
    .clover-catalog-landing .entry__content > .page-intro,
    .woocommerce-shop #primary > .site-shell > .page-description,
    .tax-product_cat #primary > .site-shell > .term-description {
        display: block;
        order: 1;
        margin-top: 34px;
        margin-bottom: 0;
    }

    .clover-catalog-landing .entry__content > .category-confidence,
    .woocommerce-shop #primary > .site-shell > .shop-bottom-guide {
        order: 2;
    }

    /* Между шапкой каталога и первой схемой набегало 111 px: 30 отступа и 42
       поля у шапки, 38 у блока товаров и 8 у сетки. На десктопе это воздух, на
       телефоне — треть экрана. */
    .clover-catalog-landing .entry__header {
        padding-bottom: 16px;
        margin-bottom: 18px;
    }

    .clover-catalog-landing .shop-category-nav,
    .woocommerce-shop .shop-category-nav,
    .tax-product_cat .shop-category-nav {
        margin-top: 18px;
    }

    .clover-catalog-landing .entry__content > .woocommerce,
    .woocommerce-shop #primary ul.products,
    .tax-product_cat #primary ul.products {
        margin-top: 12px;
    }

    /* Строчный интервал сетки складывался с собственным нижним полем карточки —
       36 px гэпа плюс 49 px margin. Гэпа достаточно одного. */
    .clover-catalog-landing ul.products,
    .woocommerce-shop ul.products,
    .tax-product_cat ul.products {
        padding-top: 0;
        row-gap: 20px;
    }

    .clover-catalog-landing .woocommerce ul.products li.product,
    .woocommerce-shop.woocommerce ul.products li.product,
    .tax-product_cat.woocommerce ul.products li.product {
        margin-bottom: 0;
    }

    /* Заголовки страниц на телефоне.
       Базовые правила дают минимум 40-44 px, и на узком экране двухстрочный
       заголовок съедал полэкрана. Селекторы повторены один в один с исходными:
       у них специфичность выше голого h1, и без этого правило бы не сработало.

       Герой и страница 404 сюда не входят намеренно — там заголовок работает
       как крупная графика, а не как заголовок текста, и у обоих свой размер. */
    /* Блок «сколько человек смотрит» на телефоне отъедал целый экран между
       галереей и названием товара — до сути приходилось прокручивать. */
    .product-pulse {
        display: none;
    }

    /* На телефоне 42px сверху съедали пол-экрана до первой картинки товара.
       Только карточка: на витрине этот отступ отделяет заголовок от полосы
       счётчика, и без него они слипаются. Правило идёт после базового
       .commerce-main, поэтому берёт верх без !important. */
    .single-product .commerce-main {
        padding-top: 0;
    }

    h1,
    .entry__header h1,
    .commerce-main .woocommerce-products-header__title,
    .commerce-main .page-title,
    .commerce-main .product_title,
    .term-description + .shop-category-nav ~ h1,
    .tax-product_cat .page-title {
        font-size: 30px;
        line-height: 1.15;
    }
}

/* ==========================================================================
   Поделиться — товары, статьи, гайды
   Углы острые и палитра приглушённая, как везде на сайте: цвет площадки
   появляется только при наведении, чтобы ряд кнопок не превращался в
   наклейки поверх спокойной вёрстки.
   ========================================================================== */

.clover-share {
    margin: 30px 0 0;
}

.clover-share--guide {
    margin-top: 38px;
    padding-top: 26px;
    border-top: 1px solid var(--clover-line);
}

.clover-share__label {
    display: block;
    margin-bottom: 12px;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--clover-muted);
}

.clover-share__row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.clover-share__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border: 1px solid var(--clover-line);
    background: var(--clover-surface);
    color: var(--clover-ink);
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.clover-share__item svg {
    width: 18px;
    height: 18px;
    flex: none;
}

.clover-share__item:hover,
.clover-share__item:focus-visible {
    background: var(--clover-soft);
    border-color: currentColor;
}

.clover-share__item:focus-visible {
    outline: none;
    box-shadow: var(--focus);
}

/* Цвет площадки — только на наведении, как подсказка «куда попадёшь». */
.clover-share__item[data-net="pinterest"]:hover { color: #bd081c; }
.clover-share__item[data-net="facebook"]:hover  { color: #1877f2; }
.clover-share__item[data-net="x"]:hover         { color: #000000; }
.clover-share__item[data-net="whatsapp"]:hover  { color: #1da851; }
.clover-share__item[data-net="email"]:hover     { color: var(--clover-berry); }

.clover-share__item.is-copied {
    color: #1f654a;
    border-color: #1f654a;
    background: var(--clover-sage-100);
}

.clover-share__note {
    margin: 10px 0 0;
    font-size: 13px;
    color: var(--clover-muted);
    min-height: 1em;
}

.clover-share__note:empty {
    margin: 0;
    min-height: 0;
}

/* На узких экранах подписи убираем: шесть слов в строку не помещаются,
   а иконки узнаются и без них. Доступное имя остаётся в aria-label. */
@media (max-width: 520px) {
    .clover-share__name {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .clover-share__item {
        padding: 11px;
    }

    .clover-share__row {
        gap: 6px;
    }
}

/* ==========================================================================
   Врезка рассылки на странице гайдов
   ========================================================================== */

.guides-newsletter {
    margin: 56px 0 0;
    padding: 34px 0 0;
    border-top: 1px solid var(--clover-line);
}

.guides-newsletter__title {
    margin: 0 0 8px;
    font-family: var(--font-display);
    font-size: clamp(22px, 2.4vw, 28px);
    font-weight: 400;
    color: var(--clover-ink);
}

.guides-newsletter__lede {
    margin: 0 0 24px;
    max-width: 58ch;
    color: var(--clover-muted);
}

.guides-newsletter__list {
    display: grid;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.guides-newsletter__link {
    display: block;
    padding: 22px 24px;
    border: 1px solid var(--clover-line);
    background: var(--clover-surface);
    color: inherit;
    text-decoration: none;
    transition: border-color 0.18s ease, background-color 0.18s ease;
}

.guides-newsletter__link:hover,
.guides-newsletter__link:focus-visible {
    border-color: var(--clover-ink);
    background: var(--clover-soft);
}

.guides-newsletter__link:focus-visible {
    outline: none;
    box-shadow: var(--focus);
}

.guides-newsletter__date {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--clover-muted);
}

.guides-newsletter__item-title {
    margin: 0 0 8px;
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 400;
    line-height: 1.25;
    color: var(--clover-ink);
}

.guides-newsletter__blurb {
    margin: 0 0 14px;
    max-width: 62ch;
    color: var(--clover-muted);
}

.guides-newsletter__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--clover-ink);
}

.guides-newsletter__cta svg {
    width: 16px;
    height: 16px;
}

.guides-newsletter__foot {
    margin: 20px 0 0;
    font-size: 15px;
}

.guides-newsletter__foot a {
    color: var(--clover-ink);
    text-underline-offset: 4px;
}

@media (max-width: 640px) {
    .guides-newsletter {
        margin-top: 40px;
        padding-top: 26px;
    }

    .guides-newsletter__link {
        padding: 18px 18px;
    }
}

/* ==========================================================================
   Таблицы внутри гайдов
   ========================================================================== */

.guide-table {
    width: 100%;
    margin: 28px 0;
    border-collapse: collapse;
    font-size: 15px;
}

.guide-table th,
.guide-table td {
    padding: 11px 14px;
    text-align: left;
    border-bottom: 1px solid var(--clover-line);
}

.guide-table th {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--clover-muted);
    border-bottom-color: var(--clover-ink);
}

/* Числа выравниваем по правому краю — так их сравнивают глазами. */
.guide-table th:not(:first-child),
.guide-table td:not(:first-child) {
    text-align: right;
    white-space: nowrap;
}

.guide-table tbody tr:hover {
    background: var(--clover-soft);
}

@media (max-width: 640px) {
    /* Таблица прокручивается внутри себя, страница по горизонтали не едет. */
    .guide-table {
        display: block;
        overflow-x: auto;
        font-size: 14px;
    }

    .guide-table th,
    .guide-table td {
        padding: 10px 12px;
    }
}

/* ==========================================================================
   Форма отзыва
   ========================================================================== */

/* Кнопка отправки. Раньше окрашивался только input#submit.alt, а у формы
   отзыва этого класса нет — кнопка оставалась серой, дефолтной. */
.woocommerce #respond input#submit {
    color: #fff;
    background: var(--clover-coral-700);
    border-color: var(--clover-coral-700);
    font-family: var(--font-body);
    letter-spacing: 0.01em;
}

.woocommerce #respond input#submit:hover,
.woocommerce #respond input#submit:focus-visible {
    background: var(--clover-coral-600);
    border-color: var(--clover-coral-600);
}

.woocommerce #respond input#submit:focus-visible {
    outline: none;
    box-shadow: var(--focus);
}

/* Звёзды рейтинга.
   WooCommerce рисует их иконочным шрифтом, который здесь грузится отложенно,
   а сам агрегированный CSS минификатор местами портит — в Firefox из-за этого
   звёзды могут не появиться вовсе. Рисуем обычными символами Unicode: они есть
   в любой системе, вебшрифт не нужен. \FE0E просит текстовое начертание, иначе
   часть систем подставит цветной эмодзи. */
.woocommerce #review_form p.stars a::before,
.woocommerce #review_form p.stars a:hover ~ a::before,
.woocommerce #review_form p.stars.selected a.active ~ a::before {
    content: "\2606\FE0E";
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: var(--clover-muted);
}

.woocommerce #review_form p.stars:hover a::before,
.woocommerce #review_form p.stars.selected a.active::before,
.woocommerce #review_form p.stars.selected a:not(.active)::before {
    content: "\2605\FE0E";
    color: var(--clover-star);
}

.woocommerce #review_form p.stars a {
    width: 1.15em;
    font-size: 26px;
    transition: color 140ms ease;
}

.woocommerce #review_form p.stars a::before {
    width: 1.15em;
    transition: color 140ms ease;
}

.woocommerce #review_form .comment-form-rating label {
    display: block;
    margin-bottom: 4px;
    font-size: 14px;
    color: var(--clover-ink);
}

/* Поле отзыва в стиле остальных форм сайта */
.woocommerce #review_form #respond textarea,
.woocommerce #review_form textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--clover-line);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.5;
    color: var(--clover-ink);
    background: var(--clover-surface);
}

.woocommerce #review_form textarea:focus {
    outline: none;
    border-color: var(--clover-ink);
    box-shadow: var(--focus);
}

.woocommerce #reviews .comment-reply-title {
    display: block;
    margin-bottom: 10px;
    font-family: var(--font-display);
    font-size: 20px;
    color: var(--clover-ink);
}

/* ---------- Звёзды рейтинга: тёплое золото вместо зелёного ---------- */

:root {
    --clover-star: #e0a12b;
}

/* Оценка рядом с названием товара и в списке отзывов */
.woocommerce .star-rating,
.woocommerce .star-rating::before,
.woocommerce .star-rating span,
.woocommerce .star-rating span::before,
.woocommerce #reviews .star-rating,
.woocommerce #reviews .star-rating span::before {
    color: var(--clover-star);
}

/* Пустые звёзды — то же золото, но приглушённое, чтобы шкала читалась */
.woocommerce .star-rating::before {
    color: rgba(224, 161, 43, 0.32);
}

/* Ссылка «(1 customer review)» рядом с оценкой не нужна: на молодом магазине
   она сообщает не «отзывы есть», а «он всего один». Звёзды остаются. */
.woocommerce .woocommerce-product-rating .woocommerce-review-link {
    display: none;
}

.woocommerce .woocommerce-product-rating {
    display: flex;
    align-items: center;
}


/* ==========================================================================
   Открытие вкладки по якорю без JavaScript

   Скрипт вкладок WooCommerce на этом сайте грузится отложенно (оптимизатор
   подменяет src на data-two_delay_src и включает скрипты только после первого
   действия пользователя). Поэтому ссылка вида .../#tab-reviews при открытии
   не делала ничего: таб открывать некому, а якорь спрятан внутри панели с
   display:none, так что и прокрутка невозможна.

   :target решает это средствами браузера — до всякого JavaScript.
   ========================================================================== */

/* Без !important намеренно. WooCommerce переключает вкладки инлайновыми
   стилями, а инлайн слабее правила с !important — с ним панели залипали на
   отзывах и остальные вкладки переставали открываться. Здесь достаточно
   специфичности: до загрузки скриптов работает этот CSS, после — снова JS. */
.woocommerce-tabs:has(.panel:target) .wc-tab,
.woocommerce-tabs:has(.panel :target) .wc-tab {
    display: none;
}

/* Селектор повторяет :has() из правила выше: иначе «скрыть все» оказывается
   специфичнее «показать нужную», и не открывается ни одна. */
.woocommerce-tabs:has(.panel:target) .wc-tab:target,
.woocommerce-tabs:has(.panel :target) .wc-tab:has(:target) {
    display: block;
}

/* Подсвечиваем и саму вкладку, иначе открытая панель выглядит рассинхроном */
.woocommerce-tabs:has(#tab-reviews:target) ul.tabs li.reviews_tab,
.woocommerce-tabs:has(#tab-reviews :target) ul.tabs li.reviews_tab {
    border-bottom-color: var(--clover-ink);
}

.woocommerce-tabs:has(#tab-reviews:target) ul.tabs li.reviews_tab a,
.woocommerce-tabs:has(#tab-reviews :target) ul.tabs li.reviews_tab a {
    color: var(--clover-ink);
}

/* Немного воздуха сверху, чтобы шапка не накрывала заголовок при переходе */
.woocommerce-tabs .wc-tab {
    scroll-margin-top: 120px;
}

#reviews,
#review_form_wrapper,
.woocommerce-Reviews {
    scroll-margin-top: 120px;
}

/* ==========================================================================
   Оглавление гайда

   Слева от текста идёт колонка клеток — это столбец счётной схемы. Прочитанные
   разделы «зашиты» крестиком, текущий выделен. Крестик рисуется двумя линиями,
   а не символом шрифта: сегодня уже выяснилось, что иконочные шрифты здесь
   грузятся отложенно и в Firefox могут не появиться вовсе.
   ========================================================================== */

.guide-toc {
    margin: 0 0 34px;
}

.guide-toc__wrap {
    border-top: 1px solid var(--clover-ink);
    padding-top: 12px;
}

.guide-toc__summary {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    list-style: none;
    cursor: pointer;
    padding: 4px 0 10px;
}

.guide-toc__summary::-webkit-details-marker {
    display: none;
}

.guide-toc__eyebrow {
    font-size: 12px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--clover-muted);
}

.guide-toc__count {
    font-family: var(--font-body);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--clover-muted);
}

.guide-toc__list {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: none;
}

.guide-toc__item + .guide-toc__item {
    margin-top: 0;
}

.guide-toc__link {
    display: grid;
    grid-template-columns: 15px minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    padding: 7px 0;
    color: var(--clover-muted);
    font-size: 14px;
    line-height: 1.35;
    text-decoration: none;
    transition: color 160ms ease;
}

/* Клетка схемы. Соседние клетки делят границу, поэтому колонка читается как
   сплошной столбец сетки, а не как список отдельных квадратиков. */
.guide-toc__cell {
    position: relative;
    width: 15px;
    height: 15px;
    margin-top: 2px;
    border: 1px solid var(--clover-line);
    background: var(--clover-surface);
}

.guide-toc__item + .guide-toc__item .guide-toc__cell {
    margin-top: 1px;
}

/* Крестик: две линии под 45°, как настоящий стежок. */
.guide-toc__cell::before,
.guide-toc__cell::after {
    content: "";
    position: absolute;
    inset: 2px;
    background: currentColor;
    opacity: 0;
    transition: opacity 180ms ease;
}

.guide-toc__cell::before {
    clip-path: polygon(0 0, 14% 0, 100% 86%, 100% 100%, 86% 100%, 0 14%);
}

.guide-toc__cell::after {
    clip-path: polygon(86% 0, 100% 0, 100% 14%, 14% 100%, 0 100%, 0 86%);
}

.guide-toc__link:hover,
.guide-toc__link:focus-visible {
    color: var(--clover-ink);
}

.guide-toc__link:focus-visible {
    outline: none;
    box-shadow: var(--focus);
}

.guide-toc__link:hover .guide-toc__cell::before,
.guide-toc__link:hover .guide-toc__cell::after {
    opacity: 0.28;
}

/* Пройденные разделы — зашиты. */
.guide-toc__link.is-done {
    color: var(--clover-muted);
}

.guide-toc__link.is-done .guide-toc__cell {
    color: var(--clover-sage-300);
    border-color: var(--clover-sage-300);
}

.guide-toc__link.is-done .guide-toc__cell::before,
.guide-toc__link.is-done .guide-toc__cell::after {
    opacity: 1;
}

/* Текущий раздел. */
.guide-toc__link.is-current {
    color: var(--clover-ink);
    font-weight: 500;
}

.guide-toc__link.is-current .guide-toc__cell {
    color: #1f654a;
    border-color: #1f654a;
    background: var(--clover-soft);
}

.guide-toc__link.is-current .guide-toc__cell::before,
.guide-toc__link.is-current .guide-toc__cell::after {
    opacity: 1;
}

/* ---------- карточка рассылки ---------- */

.guide-toc__note {
    margin-top: 26px;
    padding-top: 18px;
    border-top: 1px solid var(--clover-line);
}

.guide-toc__note-title {
    margin: 0 0 6px;
    font-family: var(--font-display);
    font-size: 16px;
    color: var(--clover-ink);
}

.guide-toc__note-text {
    margin: 0 0 10px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--clover-muted);
}

.guide-toc__note-link {
    font-size: 14px;
    color: var(--clover-ink);
    text-underline-offset: 4px;
}

/* ---------- широкий экран: липкая колонка слева ---------- */

@media (min-width: 1080px) {
    .clover-guide .entry__content {
        display: grid;
        grid-template-columns: 236px minmax(0, 1fr);
        column-gap: 60px;
        align-items: start;
    }

    .clover-guide .entry__content > .guide-toc {
        grid-column: 1;
        position: sticky;
        top: 108px;
        margin: 0;
        align-self: start;
    }

    /* Блок «поделиться» дописывается фильтром позже оглавления и попадает не в
       .guide-body, а прямо в .entry__content. Без этого правила он вставал в
       первую колонку и наезжал на липкое оглавление. */
    .clover-guide .entry__content > *:not(.guide-toc) {
        grid-column: 2;
    }

    .clover-guide .entry__content > .guide-body {
        margin-top: 0;
    }
}

/* ---------- узкий экран: сворачиваем ---------- */

/* Узкий экран: оглавление становится карточкой над текстом. */
@media (max-width: 1079px) {
    .guide-toc__wrap {
        padding: 14px 16px 6px;
        border: 1px solid var(--clover-line);
        border-top-color: var(--clover-ink);
        background: var(--clover-canvas);
    }

    .guide-toc__note {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .guide-toc__cell::before,
    .guide-toc__cell::after,
    .guide-toc__link,
    .guide-toc__summary::after {
        transition: none;
    }
}

/* На широком экране оглавление всегда раскрыто: колонка липкая и места хватает,
   сворачивать там нечего. На узком остаётся аккордеон, закрытый по умолчанию. */
@media (min-width: 1080px) {
    .guide-toc__wrap > .guide-toc__nav {
        display: block;
    }

    .guide-toc__summary {
        cursor: default;
    }
}

/* Обёртка статьи повторяет вертикальный ритм, который раньше задавался
   прямым потомкам .entry__content. */
.guide-body > * + * {
    margin-top: 1.3em;
}

/* ==========================================================================
   Индекс гайдов

   Углы намеренно оставлены острыми: у образца они скруглённые, но весь магазин
   построен на прямых — карточки товаров, кнопки, оглавление. Скопировать чужой
   радиус значило бы вставить в сайт кусок другого сайта.
   ========================================================================== */

.guides-page .site-shell {
    max-width: 1180px;
}

/* ---------- шапка ---------- */

.guides-hero {
    padding: 4px 0 40px;
}

.guides-hero__row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
}

.guides-hero__text {
    max-width: 640px;
}

.guides-hero__title {
    margin: 0 0 14px;
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 5vw, 3.6rem);
    font-weight: 400;
    line-height: 1.05;
    color: var(--clover-ink);
}

.guides-hero__lede {
    margin: 0;
    max-width: 56ch;
    font-size: 17px;
    line-height: 1.55;
    color: var(--clover-muted);
}

.guides-hero__subscribe {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 20px;
    border: 1px solid var(--clover-line);
    border-top-color: var(--clover-ink);
    background: var(--clover-canvas);
    text-decoration: none;
    transition: background-color 0.18s ease, border-color 0.18s ease;
}

.guides-hero__subscribe:hover,
.guides-hero__subscribe:focus-visible {
    background: var(--clover-soft);
    border-color: var(--clover-ink);
}

.guides-hero__subscribe:focus-visible {
    outline: none;
    box-shadow: var(--focus);
}

.guides-hero__subscribe-label {
    font-family: var(--font-display);
    font-size: 15px;
    color: var(--clover-ink);
}

.guides-hero__subscribe-cta {
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--clover-muted);
}

/* ---------- крупная карточка ---------- */

.guide-featured {
    margin: 0 0 56px;
    padding-top: 28px;
    border-top: 1px solid var(--clover-ink);
}

.guide-featured__link {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 40px;
    align-items: center;
    text-decoration: none;
    color: inherit;
}

.guide-featured__media {
    display: block;
    overflow: hidden;
    background: var(--clover-soft);
}

.guide-featured__media img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.guide-featured__link:hover .guide-featured__media img {
    transform: scale(1.02);
}

.guide-featured__eyebrow {
    display: block;
    margin-bottom: 12px;
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #1f654a;
}

.guide-featured__title {
    margin: 0 0 14px;
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    font-weight: 400;
    line-height: 1.15;
    color: var(--clover-ink);
}

.guide-featured__blurb {
    display: block;
    max-width: 52ch;
    font-size: 16px;
    line-height: 1.6;
    color: var(--clover-muted);
}

/* ---------- сетка ---------- */

.guides-list__title {
    margin: 0 0 26px;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--clover-ink);
}

.guides-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 44px 32px;
}

.guide-card {
    display: flex;
    flex-direction: column;
}

.guide-card__link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.guide-card__media {
    display: block;
    margin-bottom: 18px;
    overflow: hidden;
    background: var(--clover-soft);
}

.guide-card__media img,
.guide-card__media--empty {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.guide-card__media--empty {
    background: repeating-linear-gradient(
        45deg,
        var(--clover-soft),
        var(--clover-soft) 8px,
        var(--clover-canvas) 8px,
        var(--clover-canvas) 16px
    );
}

.guide-card__link:hover .guide-card__media img {
    transform: scale(1.03);
}

.guide-card__title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 10px;
    font-family: var(--font-display);
    font-size: 1.22rem;
    font-weight: 400;
    line-height: 1.25;
    color: var(--clover-ink);
}

.guide-card__arrow {
    flex: none;
    font-size: 15px;
    color: var(--clover-muted);
    transition: transform 0.2s ease, color 0.2s ease;
}

.guide-card__link:hover .guide-card__arrow {
    transform: translate(2px, -2px);
    color: var(--clover-ink);
}

.guide-card__blurb {
    margin: 0 0 16px;
    font-size: 15px;
    line-height: 1.55;
    color: var(--clover-muted);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.guide-card__link:focus-visible {
    outline: none;
    box-shadow: var(--focus);
}

/* ---------- подпись автора ---------- */

.guide-byline {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: auto 0 0;
    font-size: 13.5px;
    color: var(--clover-muted);
}

.guide-byline__avatar {
    width: 32px;
    height: 32px;
    object-fit: cover;
    flex: none;
}

.guide-byline__name {
    color: var(--clover-ink);
}

.guide-byline__dot {
    opacity: 0.5;
}

.guide-byline--featured {
    margin-top: 20px;
}

/* ---------- пагинация ---------- */

.guides-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 52px;
    padding-top: 22px;
    border-top: 1px solid var(--clover-line);
}

.guides-pagination__pages {
    display: flex;
    gap: 6px;
    margin: 0 auto;
}

.guides-pagination__page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    border: 1px solid transparent;
    font-size: 14px;
    color: var(--clover-muted);
    text-decoration: none;
    transition: border-color 0.18s ease, color 0.18s ease, background-color 0.18s ease;
}

.guides-pagination__page:hover {
    border-color: var(--clover-line);
    color: var(--clover-ink);
}

.guides-pagination__page.is-current {
    border-color: var(--clover-ink);
    background: var(--clover-ink);
    color: #fff;
}

.guides-pagination__step {
    font-size: 14px;
    color: var(--clover-ink);
    text-decoration: none;
    text-underline-offset: 4px;
}

.guides-pagination__step:hover {
    text-decoration: underline;
}

.guides-pagination__page:focus-visible,
.guides-pagination__step:focus-visible {
    outline: none;
    box-shadow: var(--focus);
}

/* ---------- текст самой страницы ---------- */

/* Живёт под списком: сначала то, за чем пришли, потом пояснения. Ширину
   ограничиваем по строке, а не по сетке — читать 1100 px в строку нельзя. */
.guides-index__intro {
    max-width: 68ch;
    margin-top: 56px;
    padding-top: 40px;
    border-top: 1px solid var(--clover-line);
}

/* ---------- планшет ---------- */

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

    .guide-featured__link {
        gap: 28px;
    }
}

/* ---------- телефон ---------- */

@media (max-width: 720px) {
    .guides-hero {
        padding-bottom: 28px;
    }

    .guides-hero__row {
        gap: 22px;
    }

    .guides-hero__subscribe {
        width: 100%;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .guide-featured {
        margin-bottom: 40px;
    }

    .guide-featured__link {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }

    .guides-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 36px;
    }

    .guide-card__media {
        margin-bottom: 14px;
    }

    .guides-pagination {
        flex-wrap: wrap;
        justify-content: center;
        margin-top: 38px;
    }

    .guides-pagination__pages {
        order: -1;
        width: 100%;
        justify-content: center;
        margin-bottom: 6px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .guide-featured__media img,
    .guide-card__media img,
    .guide-card__arrow {
        transition: none;
    }
}

/* ---------- «ещё из гайдов» ---------- */

.guide-more {
    margin-top: 54px;
    padding-top: 30px;
    border-top: 1px solid var(--clover-ink);
}

.guide-more__title {
    margin: 0 0 20px;
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 400;
    color: var(--clover-ink);
}

.guide-more__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.guide-more__item { display: flex; }

.guide-more__link {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding-top: 14px;
    border-top: 1px solid var(--clover-line);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.18s ease;
}

.guide-more__link:hover { border-top-color: var(--clover-ink); }

.guide-more__link:focus-visible {
    outline: none;
    box-shadow: var(--focus);
}

.guide-more__name {
    font-family: var(--font-display);
    font-size: 1.05rem;
    line-height: 1.3;
    color: var(--clover-ink);
}

.guide-more__link:hover .guide-more__name { text-decoration: underline; text-underline-offset: 3px; }

.guide-more__blurb {
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--clover-muted);
}

@media (max-width: 720px) {
    .guide-more__list { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .guide-more { margin-top: 40px; }
}

/* ==========================================================================
   Видео в галерее товара
   ========================================================================== */

.clover-video__button {
    display: block;
    position: relative;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    line-height: 0;
}

.clover-video__button img {
    display: block;
    width: 100%;
    height: auto;
}

/* Кружок с треугольником поверх кадра: без него слайд не отличить от фото. */
.clover-video__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    padding-left: 4px;
    border-radius: 50%;
    background: rgba(25, 35, 31, 0.72);
    color: #fff;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.clover-video__button:hover .clover-video__play {
    background: var(--clover-ink);
    transform: translate(-50%, -50%) scale(1.06);
}

.clover-video__button:focus-visible {
    outline: none;
    box-shadow: var(--focus);
}

/* Миниатюра в ленте под галереей тоже помечается, иначе её не найти. */
.woocommerce-product-gallery .flex-control-thumbs li:has(img[alt$="video"]) {
    position: relative;
}

/* ---------- окно воспроизведения ---------- */

.clover-video-box {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    background: rgba(15, 21, 18, 0.92);
    animation: clover-video-in 0.18s ease-out;
}

@keyframes clover-video-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.clover-video-box__player {
    max-width: min(880px, 100%);
    max-height: 100%;
    width: auto;
    height: auto;
    background: #000;
}

.clover-video-box__close {
    position: absolute;
    top: 18px;
    right: 22px;
    width: 44px;
    height: 44px;
    border: 0;
    background: none;
    color: #fff;
    font-size: 34px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

.clover-video-box__close:hover {
    opacity: 1;
}

.clover-video-box__close:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

@media (max-width: 640px) {
    .clover-video-box { padding: 16px; }
    .clover-video__play { width: 52px; height: 52px; }
}

@media (prefers-reduced-motion: reduce) {
    .clover-video-box { animation: none; }
    .clover-video__play,
    .clover-video__button:hover .clover-video__play { transition: none; transform: translate(-50%, -50%); }
}


/* ==========================================================================
   Подпись автора в герое

   Стоит сразу под заголовком и выровнена по правому краю той же колонки:
   так она читается как подпись под утверждением, а не как отдельная строка.
   Абсолютное позиционирование поверх картинки выглядело бы эффектнее, но
   разъезжалось бы на промежуточных ширинах — а это первый экран.
   ========================================================================== */

.hero__signature {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    max-width: 600px;          /* та же колонка, что у заголовка */
    margin: -6px 0 24px;
    color: #1f654a;
    line-height: 1;
    /* подпись — не заголовок: не перетягиваем на себя внимание при сканировании */
    opacity: 0.92;
}

.hero__signature-by {
    font-family: var(--font-hand);
    font-weight: 500;
    font-size: clamp(1.15rem, 1.5vw, 1.4rem);
    /* «by» ниже и мельче имени — так пишут от руки */
    transform: translateY(2px) rotate(-4deg);
}

.hero__signature-name {
    font-family: var(--font-hand);
    font-weight: 600;
    font-size: clamp(1.7rem, 2.6vw, 2.35rem);
    letter-spacing: 0.01em;
    transform: rotate(-2deg);
}

.hero__signature-heart {
    flex: none;
    margin-left: 2px;
    transform: rotate(8deg);
}

@media (max-width: 900px) {
    .hero__signature {
        justify-content: flex-start;
        margin: 2px 0 20px;
    }
}

/* ==========================================================================
   Три шага после покупки

   Схема приходит архивом, и это единственное место, где покупатель может
   растеряться. Блок стоит под таблицей заказа — сразу после кнопки скачивания.
   ========================================================================== */

.clover-steps {
    margin: 34px 0 8px;
    padding: 26px 28px 22px;
    background: var(--clover-canvas);
    border: 1px solid var(--clover-line);
    border-top: 2px solid var(--clover-ink);
}

.clover-steps__title {
    margin: 0 0 20px;
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--clover-ink);
}

.clover-steps__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.clover-steps__item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

/* Кружок с иконкой: он же отделяет шаг от шага на узком экране. */
.clover-steps__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--clover-soft);
    color: #1f654a;
}

.clover-steps__body {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.clover-steps__step {
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--clover-muted);
}

.clover-steps__heading {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--clover-ink);
}

.clover-steps__text {
    font-size: 14px;
    line-height: 1.5;
    color: var(--clover-muted);
}

@media (max-width: 860px) {
    .clover-steps__list {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }

    .clover-steps {
        padding: 22px 20px 18px;
    }
}

/* ---------- кнопка скачивания крупнее ---------- */

/* Это последний экран покупки и главное действие на нём: кнопка была
   набрана тем же кеглем, что и служебные ссылки рядом. */
.woocommerce-MyAccount-downloads-file,
.woocommerce a.woocommerce-MyAccount-downloads-file {
    padding: 0.95rem 1.6rem !important;
    font-size: 1.02rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em;
}

.woocommerce-MyAccount-downloads-file::before {
    width: 1.2rem;
    height: 1.2rem;
}

@media (max-width: 560px) {
    .woocommerce-MyAccount-downloads-file,
    .woocommerce a.woocommerce-MyAccount-downloads-file {
        width: 100%;
    }
}


/* ── полоса обратного отсчёта ───────────────────────────────────────────────
   Единственное тёплое пятно на зелёном сайте, поэтому держим её строго внутри
   системы: прямые углы, никаких теней, тот же диагональный градиент, что у
   зелёной промо-полосы. Оранжевое здесь — акцент, а не второй бренд. */
.sale-countdown {
    background: var(--clover-autumn-gradient);
    color: var(--clover-autumn-050);
}

.sale-countdown__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 24px;
    padding: 12px 0;
}

.sale-countdown__label,
.sale-countdown__timer {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 0.95rem;
}

.sale-countdown__label strong {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: 0.01em;
}

.sale-countdown__save {
    padding: 3px 9px;
    background: var(--clover-autumn-050);
    color: var(--clover-autumn-900);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.sale-countdown__lead {
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    opacity: 0.9;
}

.sale-countdown__units {
    display: inline-flex;
    gap: 6px;
}

.sale-countdown__unit {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    min-width: 48px;
    padding: 4px 6px;
    background: rgba(0, 0, 0, 0.2);
}

.sale-countdown__unit b {
    font-family: var(--font-display);
    font-size: 1.12rem;
    font-weight: 600;
    line-height: 1.1;
    /* Моноширинные цифры: иначе полоса дёргается на каждой смене минуты. */
    font-variant-numeric: tabular-nums;
}

.sale-countdown__unit i {
    font-style: normal;
    font-size: 0.6rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.82;
}

.sale-countdown__cta {
    padding: 9px 20px;
    background: var(--clover-autumn-050);
    color: var(--clover-autumn-900);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.18s ease;
}

.sale-countdown__cta:hover,
.sale-countdown__cta:focus-visible {
    background: #ffffff;
    color: var(--clover-autumn-900);
}

.sale-countdown__cta:focus-visible {
    outline: 2px solid var(--clover-autumn-050);
    outline-offset: 2px;
}

@media (max-width: 720px) {
    .sale-countdown__inner {
        gap: 8px 14px;
        padding: 10px 0;
    }

    /* Название уходит на свою строку, чтобы счётчик и кнопка встали рядом и
       не переносились по одному на каждый экран. */
    .sale-countdown__label {
        width: 100%;
        justify-content: center;
    }

    .sale-countdown__lead {
        display: none;
    }

    .sale-countdown__unit {
        min-width: 44px;
    }

    /* 44px по высоте — минимум, за который палец попадает уверенно. */
    .sale-countdown__cta {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 8px 18px;
        font-size: 0.84rem;
    }
}

@media (max-width: 360px) {
    .sale-countdown__save {
        display: none;
    }
}


/* ── подпись у заголовка товара ──────────────────────────────────────────────
   Тот же почерк, что в герое, но мельче: рядом с названием товара подпись —
   аккомпанемент, а не второй акцент. Наклон у каждого слова свой, иначе строка
   читается как наклонённый курсив, а не как написанное от руки. */
.product-signature {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: -2px 0 16px;
    color: var(--clover-green-800);
    line-height: 1;
    opacity: 0.92;
}

.product-signature__by {
    font-family: var(--font-hand);
    font-weight: 500;
    font-size: 1.05rem;
    transform: translateY(2px) rotate(-4deg);
}

.product-signature__name {
    font-family: var(--font-hand);
    font-weight: 600;
    font-size: 1.6rem;
    letter-spacing: 0.01em;
    transform: rotate(-3deg);
}

.product-signature__heart {
    flex: none;
    margin-left: 2px;
    transform: rotate(8deg);
}


/* ── «закрытый» чекаут ───────────────────────────────────────────────────────
   На оплате у страницы одна задача, поэтому меню, поиск, соцсети и подвал со
   ссылками не спрятаны стилями, а не выводятся вовсе. Возврат при этом остаётся
   явным: «Back to cart» слева. Запертый человек жмёт кнопку браузера и часто
   теряет корзину — это хуже лишней ссылки. */
.checkout-header {
    background: var(--clover-surface);
    border-bottom: 1px solid var(--clover-line);
}

.checkout-header__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    min-height: 72px;
}

.checkout-header__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    justify-self: start;
    color: var(--clover-muted);
    font-size: 0.88rem;
    text-decoration: none;
}

.checkout-header__back:hover,
.checkout-header__back:focus-visible {
    color: var(--clover-green-800);
}

.checkout-header__back .icon {
    width: 18px;
    height: 18px;
}

.checkout-header__brand {
    justify-self: center;
}

.checkout-header__brand img {
    display: block;
    width: auto;
    height: 34px;
}

.checkout-header__secure {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    justify-self: end;
    margin: 0;
    color: var(--clover-green-800);
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.checkout-header__secure .icon {
    width: 16px;
    height: 16px;
}

.checkout-footer {
    padding: 26px 0 40px;
    border-top: 1px solid var(--clover-line);
}

.checkout-footer__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 18px;
    color: var(--clover-muted);
    font-size: 0.78rem;
}

.checkout-footer__inner p {
    margin: 0;
}

.checkout-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.checkout-footer__links a {
    color: inherit;
    text-decoration: none;
}

.checkout-footer__links a:hover,
.checkout-footer__links a:focus-visible {
    color: var(--clover-green-800);
    text-decoration: underline;
}

@media (max-width: 640px) {
    /* Три колонки в строку не помещаются: «Back» и логотип делят верхнюю
       строку, «Secure checkout» уходит под них. */
    .checkout-header__inner {
        grid-template-columns: auto 1fr;
        gap: 6px 12px;
        min-height: 0;
        padding: 12px 0;
    }

    .checkout-header__brand {
        justify-self: end;
    }

    .checkout-header__brand img {
        height: 26px;
    }

    .checkout-header__secure {
        grid-column: 1 / -1;
        justify-self: start;
        font-size: 0.72rem;
    }

    .checkout-footer {
        padding: 22px 0 32px;
    }

    .checkout-footer__inner {
        justify-content: flex-start;
    }
}