/* Display face re-identified against the frames (2026-07-26): rendering
   «НОВИНКИ» from `Главная страница.pdf` at its measured cap height of 28 px
   gives an ink width of 124 px. Alumni Sans 700 measures 126 px (IoU 0.70);
   the next closest candidates are far wider — Oswald 137, PT Sans Narrow 142,
   Roboto Condensed 159 — and the condensed serif previously in use measured
   ~190. Self-hosted variable file, weights 100-900, OFL. */
@font-face {
  font-family: 'WW Display';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/alumni-sans-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'WW Display';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/alumni-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Self-hosted type: Inter for UI copy and PT Serif for the display headings the
   source frames use. Both ship with the theme — no external font requests. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('assets/fonts/inter-cyrillic.woff2') format('woff2');
  unicode-range: U+0400-045F, U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'PT Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/ptserif-400-cyrillic.woff2') format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'PT Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/ptserif-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'PT Serif';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/ptserif-700-cyrillic.woff2') format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'PT Serif';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/ptserif-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/*
Theme Name: Woody&Wood
Theme URI: https://woodywood.local
Author: Woody&Wood
Description: Custom WooCommerce theme foundation for the Woody&Wood storefront.
Version: 0.44.18
Requires at least: 6.4
Requires PHP: 8.1
Text Domain: woody-wood
*/

:root {
  --ww-color-ink: #181818;
  --ww-color-paper: #f7f6f2;
  --ww-color-muted: #74736f;
  --ww-color-line: #d8d6d0;
  --ww-space-1: 0.5rem;
  --ww-space-2: 1rem;
  --ww-space-3: 1.5rem;
  --ww-space-4: 2rem;
  --ww-space-5: 3rem;
  --ww-radius-sm: 0.25rem;
  --ww-font-sans: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --ww-container: 120rem;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ww-color-ink);
  background: var(--ww-color-paper);
  font-family: var(--ww-font-sans);
  font-size: 16px;
  line-height: 1.45;
}
a { color: inherit; }
.ww-container { width: min(100% - 2rem, var(--ww-container)); margin-inline: auto; }
.ww-skip-link { position: absolute; left: -9999px; }
.ww-skip-link:focus { left: 1rem; top: 1rem; z-index: 20; padding: 0.75rem 1rem; background: #fff; }
.ww-site-header { border-bottom: 1px solid var(--ww-color-line); background: var(--ww-color-paper); }
.ww-header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--ww-space-3); min-height: 4.5rem; }
.ww-brand { font-size: 1.1rem; font-weight: 700; text-decoration: none; letter-spacing: 0.02em; }
.ww-menu-toggle { display: none; appearance: none; border: 1px solid var(--ww-color-line); padding: 0.5rem 0.7rem; color: inherit; background: transparent; font: inherit; cursor: pointer; }
.ww-nav { display: flex; gap: var(--ww-space-3); align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.ww-nav a { text-decoration: none; font-size: 0.9rem; }
.ww-nav a:hover, .ww-nav a:focus-visible, .ww-text-link:hover, .ww-text-link:focus-visible { text-decoration: underline; text-underline-offset: 0.25rem; }
.ww-cart-link { white-space: nowrap; }
.ww-main { min-height: 60vh; }
.ww-hero { display: grid; gap: var(--ww-space-4); padding: clamp(4rem, 11vw, 10rem) 0; }
.ww-hero-home { min-height: min(75vh, 52rem); align-items: end; }
.ww-kicker { margin: 0 0 var(--ww-space-2); color: var(--ww-color-muted); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; }
.ww-title { max-width: 12ch; margin: 0; font-size: clamp(3rem, 8vw, 8rem); font-weight: 400; line-height: 0.92; letter-spacing: -0.06em; }
.ww-section-title { margin: 0; font-size: clamp(2rem, 4vw, 4rem); font-weight: 400; line-height: 0.96; letter-spacing: -0.045em; }
.ww-lede { max-width: 38rem; margin: 0; color: var(--ww-color-muted); font-size: clamp(1rem, 1.5vw, 1.3rem); }
.ww-button { display: inline-flex; width: fit-content; padding: 0.8rem 1.1rem; color: var(--ww-color-paper); background: var(--ww-color-ink); text-decoration: none; border-radius: var(--ww-radius-sm); }
.ww-button:hover, .ww-button:focus-visible { color: var(--ww-color-paper); background: #4a4a47; }
.ww-cart-drawer { position: fixed; inset: 0; z-index: 80; background: rgba(24, 24, 24, 0.28); }
.ww-cart-drawer__item-copy > a { display: flex; align-items: center; min-height: 2.75rem; }
.ww-cart-drawer[hidden] { display: none; }
.ww-cart-drawer__inner { display: flex; flex-direction: column; gap: 1.5rem; width: min(100%, 28rem); min-height: 100%; margin-left: auto; padding: 1.5rem; background: var(--ww-color-paper); box-shadow: -0.5rem 0 2rem rgba(0, 0, 0, 0.08); }
.ww-cart-drawer__head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; border-bottom: 1px solid var(--ww-color-line); padding-bottom: 1rem; }
.ww-cart-drawer__head h2 { margin: 0; font-size: 1.5rem; font-weight: 400; }
.ww-cart-drawer__close { appearance: none; border: 0; padding: 0; color: inherit; background: transparent; font-size: 2rem; line-height: 1; cursor: pointer; }
.ww-cart-drawer__items { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.ww-cart-drawer__item { display: grid; grid-template-columns: 4.5rem 1fr; gap: 0.75rem; align-items: center; }
.ww-cart-drawer__thumb { display: block; aspect-ratio: 1; overflow: hidden; background: #e8e6df; }
.ww-cart-drawer__thumb img { width: 100%; height: 100%; object-fit: cover; }
.ww-cart-drawer__item-copy { display: grid; gap: 0.25rem; font-size: 0.85rem; }
.ww-cart-drawer__item-copy a { text-decoration: none; }
.ww-cart-drawer__item-copy span { color: var(--ww-color-muted); }
.ww-cart-drawer__subtotal { display: flex; justify-content: space-between; gap: 1rem; margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--ww-color-line); }
.ww-cart-drawer__actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.ww-cart-drawer__empty { color: var(--ww-color-muted); }
.ww-cart-open { overflow: hidden; }
.woocommerce-cart .woocommerce, .woocommerce-checkout .woocommerce { max-width: 70rem; margin-inline: auto; padding: 4rem 0 6rem; }
.woocommerce-cart table.cart { border-collapse: collapse; }
.woocommerce-cart table.cart td, .woocommerce-cart table.cart th { padding: 1rem 0.5rem; border-bottom: 1px solid var(--ww-color-line); }
.woocommerce-cart .cart_totals { margin-top: 3rem; }
.woocommerce-checkout form.checkout { max-width: 48rem; }
.woocommerce-checkout #order_review_heading { margin-top: 3rem; }
.woocommerce #reviews { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--ww-color-line); }
.woocommerce #reviews #comments { margin-bottom: 2rem; }
.woocommerce #reviews ol.commentlist { margin: 0; padding: 0; list-style: none; }
.woocommerce #reviews ol.commentlist li { padding: 1.25rem 0; border-bottom: 1px solid var(--ww-color-line); }
.woocommerce #reviews .comment-text { margin: 0; }
.woocommerce #reviews .comment-form { display: grid; gap: 1rem; }
.woocommerce #reviews .comment-form textarea { min-height: 8rem; padding: 0.75rem; border: 1px solid var(--ww-color-line); background: #fff; font: inherit; }
.woocommerce #reviews .comment-form input[type="submit"] { justify-self: start; }
.woocommerce-account .woocommerce, .woocommerce form.woocommerce-form-login, .woocommerce form.track_order { max-width: 42rem; }
.woocommerce form.woocommerce-form-login, .woocommerce form.track_order { margin-top: 2rem; padding: 1.5rem; border: 1px solid var(--ww-color-line); background: rgba(255, 255, 255, 0.28); }
.woocommerce form .form-row input.input-text { width: 100%; padding: 0.75rem; border: 1px solid var(--ww-color-line); background: #fff; font: inherit; }
.woocommerce form .form-row label { display: block; margin-bottom: 0.35rem; font-size: 0.85rem; color: var(--ww-color-muted); }
.ww-social-login-shell { display: grid; gap: 0.75rem; margin-bottom: 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--ww-color-line); }
.ww-social-login-shell__title { margin: 0; color: var(--ww-color-muted); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; }
.ww-social-login-shell__actions { display: grid; gap: 0.5rem; }
.ww-social-login-shell__button { width: 100%; padding: 0.75rem 1rem; border: 1px solid var(--ww-color-line); color: var(--ww-color-muted); background: rgba(255, 255, 255, 0.45); font: inherit; cursor: not-allowed; }
.ww-social-login-shell__note { margin: 0; color: var(--ww-color-muted); font-size: 0.8rem; }
.ww-welcome-coupon { margin: 2rem 0; padding: 1.5rem; border: 1px solid var(--ww-color-line); background: rgba(255, 255, 255, 0.28); }
.ww-welcome-coupon__eyebrow { margin: 0 0 0.35rem; color: var(--ww-color-muted); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; }
.ww-welcome-coupon h2 { margin: 0 0 0.75rem; font-size: 1.35rem; font-weight: 400; }
.ww-welcome-coupon__code { display: inline-block; padding: 0.55rem 0.7rem; color: var(--ww-color-paper); background: var(--ww-color-ink); font-size: 0.9rem; letter-spacing: 0.06em; }
.ww-woodycoin-card { margin: 2rem 0; padding: 1.5rem; border: 1px solid var(--ww-color-line); background: rgba(255, 255, 255, 0.28); }
.ww-woodycoin-card__eyebrow { margin: 0 0 0.35rem; color: var(--ww-color-muted); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; }
.ww-woodycoin-card h2 { margin: 0 0 0.75rem; font-size: 1.35rem; font-weight: 400; }
.ww-woodycoin-card__balance { margin: 0 0 1rem; font-size: 1rem; }
.ww-woodycoin-card__balance strong { font-size: clamp(2rem, 6vw, 3.5rem); font-weight: 400; letter-spacing: -0.045em; line-height: 1; }
.ww-woodycoin-card__note { color: var(--ww-color-muted); }
.ww-home-section { padding: 4rem 0; }
.ww-section-head { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 2rem; }
.ww-text-link { font-size: 0.9rem; text-underline-offset: 0.25rem; }
.ww-product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1rem; }
.ww-product-card { min-width: 0; }
.ww-product-image { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 5; overflow: hidden; color: var(--ww-color-muted); background: #e8e6df; text-decoration: none; }
.ww-product-image img { width: 100%; height: 100%; object-fit: cover; }
.ww-product-image:hover img { transform: scale(1.02); transition: transform 250ms ease; }
.ww-product-meta { display: flex; justify-content: space-between; gap: 1rem; padding-top: 0.8rem; }
.ww-product-title { margin: 0; font-size: 0.9rem; font-weight: 400; }
.ww-product-title a { text-decoration: none; }
.ww-product-price { color: var(--ww-color-muted); font-size: 0.85rem; white-space: nowrap; }
.ww-product-actions { margin-top: 0.85rem; }
.ww-product-actions { display: grid; gap: 0.5rem; }
.ww-product-actions .button { width: 100%; justify-content: center; text-align: center; }
.ww-wishlist-link { display: inline-flex; justify-content: center; padding: 0.65rem 0.9rem; border: 1px solid var(--ww-color-line); color: var(--ww-color-ink); text-decoration: none; font-size: 0.85rem; }
.ww-wishlist-link:hover, .ww-wishlist-link:focus-visible, .ww-wishlist-link.is-saved { border-color: var(--ww-color-ink); }
.ww-wishlist-grid { margin-top: 2rem; }
.ww-product-badge { position: absolute; left: 0.75rem; bottom: 0.75rem; padding: 0.35rem 0.5rem; color: var(--ww-color-paper); background: var(--ww-color-ink); font-size: 0.7rem; text-transform: uppercase; }
.ww-product-badge--sale { background: #7b5b31; }
.ww-placeholder-image { color: #a19f98; font-size: 3rem; letter-spacing: -0.05em; }
.ww-category-grid { display: grid; gap: 0.75rem; }
.ww-category-card { display: flex; justify-content: space-between; gap: 1rem; padding: 1.2rem 0; border-top: 1px solid var(--ww-color-line); text-decoration: none; font-size: clamp(1.4rem, 3vw, 2.6rem); letter-spacing: -0.03em; }
.ww-category-card:last-child { border-bottom: 1px solid var(--ww-color-line); }
.ww-shop-header { padding: 4rem 0 2rem; }
.ww-shop-content { padding-bottom: 5rem; }
.ww-content-page { max-width: 52rem; padding-top: 5rem; padding-bottom: 7rem; }
.ww-prose { max-width: 42rem; margin-top: 2rem; color: #4f4e4a; }
.ww-prose > * + * { margin-top: 1.2rem; }
.ww-inquiry-form { display: grid; gap: 1rem; max-width: 42rem; margin-top: 2rem; padding: 1.5rem; border: 1px solid var(--ww-color-line); background: rgba(255, 255, 255, 0.28); }
.ww-inquiry-form p { margin: 0; }
.ww-inquiry-form label { display: block; margin-bottom: 0.35rem; color: var(--ww-color-muted); font-size: 0.85rem; }
.ww-inquiry-form input, .ww-inquiry-form textarea { width: 100%; padding: 0.75rem; border: 1px solid var(--ww-color-line); background: #fff; color: var(--ww-color-ink); font: inherit; }
.ww-inquiry-form textarea { resize: vertical; }
.ww-inquiry-form__honeypot { position: absolute; left: -9999px; }
.ww-inquiry-form__notice { padding: 0.75rem; border: 1px solid var(--ww-color-line); }
.ww-newsletter-form { display: grid; gap: 1rem; max-width: 46rem; margin-bottom: var(--ww-space-4); padding: 1.5rem; border: 1px solid var(--ww-color-line); color: var(--ww-color-ink); background: rgba(255, 255, 255, 0.28); }
.ww-newsletter-form h2 { margin: 0; font-size: clamp(1.5rem, 3vw, 2.5rem); font-weight: 400; letter-spacing: -0.035em; line-height: 1; }
.ww-newsletter-form p { margin: 0; }
.ww-newsletter-form label { display: block; margin-bottom: 0.35rem; color: var(--ww-color-muted); font-size: 0.85rem; }
.ww-newsletter-form input[type="email"] { width: 100%; padding: 0.75rem; border: 1px solid var(--ww-color-line); background: #fff; color: var(--ww-color-ink); font: inherit; }
.ww-newsletter-form__consent label { display: flex; align-items: flex-start; gap: 0.55rem; color: var(--ww-color-muted); line-height: 1.35; }
.ww-newsletter-form__consent input { margin-top: 0.2rem; }
.ww-newsletter-form__honeypot { position: absolute; left: -9999px; }
.ww-newsletter-form__notice { padding: 0.75rem; border: 1px solid var(--ww-color-line); color: var(--ww-color-ink); }
.woocommerce .woocommerce-breadcrumb { color: var(--ww-color-muted); font-size: 0.8rem; }
.woocommerce ul.products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1rem; }
.woocommerce ul.products::before, .woocommerce ul.products::after { display: none; }
.woocommerce ul.products li.product { float: none; width: auto; margin: 0; }
.woocommerce .woocommerce-result-count, .woocommerce .woocommerce-ordering { margin-bottom: 1.5rem; color: var(--ww-color-muted); font-size: 0.85rem; }
.woocommerce .woocommerce-ordering select { padding: 0.55rem; border: 1px solid var(--ww-color-line); background: transparent; }
.woocommerce div.product .product_title { font-weight: 400; letter-spacing: -0.04em; }
.woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--ww-color-ink); }
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button { padding: 0.8rem 1.1rem; color: var(--ww-color-paper); background: var(--ww-color-ink); border-radius: var(--ww-radius-sm); font-weight: 400; }
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover { color: var(--ww-color-paper); background: #4a4a47; }
.ww-site-footer { padding: var(--ww-space-5) 0; border-top: 1px solid var(--ww-color-line); color: var(--ww-color-muted); font-size: 0.85rem; }
.ww-site-footer .ww-button { border: 0; cursor: pointer; }

/* Task 3: product detail — gallery, purchase panel, information and recommendations. */
.single-product .ww-product-detail-shell { padding-block: clamp(2rem, 5vw, 5rem) clamp(4rem, 8vw, 8rem); }
.single-product .woocommerce-notices-wrapper { margin-bottom: var(--ww-space-3); }
.ww-product-detail { min-width: 0; }
.ww-product-detail__layout { display: grid; gap: clamp(2rem, 5vw, 5rem); }
.ww-product-detail__gallery, .ww-product-detail__purchase-panel { min-width: 0; }
.ww-product-detail .onsale { position: absolute; top: 0.85rem; left: 0.85rem; z-index: 2; min-width: auto; min-height: auto; padding: 0.35rem 0.55rem; border: 0; border-radius: 0; color: var(--ww-color-paper); background: var(--ww-color-ink); font-size: 0.7rem; font-weight: 400; line-height: 1.2; text-transform: uppercase; }
.ww-product-detail .woocommerce-product-gallery { position: relative; display: grid; gap: 0.75rem; margin: 0; }
.ww-product-detail .woocommerce-product-gallery__wrapper { overflow: hidden; background: #e8e6df; }
.ww-product-detail .woocommerce-product-gallery__image { margin: 0; }
.ww-product-detail .woocommerce-product-gallery__image > a { display: block; aspect-ratio: 4 / 5; background: #e8e6df; }
.ww-product-detail .woocommerce-product-gallery__image img { width: 100%; height: 100%; object-fit: cover; }
.ww-product-detail .woocommerce-product-gallery__trigger { top: 0.75rem; right: 0.75rem; width: 2.25rem; height: 2.25rem; border-radius: 0; color: var(--ww-color-ink); background: var(--ww-color-paper); }
.ww-product-detail .flex-control-thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; padding: 0; margin: 0; list-style: none; }
.ww-product-detail .flex-control-thumbs li { width: auto; margin: 0; }
.ww-product-detail .flex-control-thumbs img { width: 100%; aspect-ratio: 1; object-fit: cover; opacity: 0.65; cursor: pointer; }
.ww-product-detail .flex-control-thumbs img.flex-active, .ww-product-detail .flex-control-thumbs img:hover { opacity: 1; }
.ww-product-detail__purchase-panel { display: grid; align-content: start; }
.ww-product-detail .product_title { margin: 0; font-family: 'WW Display', 'PT Serif', Georgia, serif; font-size: clamp(2rem, 4.2vw, 4.25rem); font-weight: 700; letter-spacing: 0.01em; line-height: 0.95; }
.ww-product-detail .woocommerce-product-rating { display: flex; align-items: center; gap: 0.55rem; margin: 1.2rem 0 0; color: var(--ww-color-muted); font-size: 0.82rem; }
.ww-product-detail .star-rating { float: none; margin: 0; }
.ww-product-detail .woocommerce-review-link { color: inherit; }
.ww-product-detail p.price, .ww-product-detail span.price { display: block; margin: 1.5rem 0 0; color: var(--ww-color-ink); font-size: clamp(1.15rem, 1.8vw, 1.55rem); font-weight: 400; line-height: 1.2; }
.ww-product-detail .price del { color: var(--ww-color-muted); font-size: 0.8em; }
.ww-product-detail .price ins { color: inherit; text-decoration: none; }
.ww-product-detail .woocommerce-product-details__short-description { margin: 1.4rem 0 0; padding: 1.4rem 0; border-block: 1px solid var(--ww-color-line); color: var(--ww-color-muted); font-size: 0.9rem; }
.ww-product-detail .woocommerce-product-details__short-description > :first-child { margin-top: 0; }
.ww-product-detail .woocommerce-product-details__short-description > :last-child { margin-bottom: 0; }
.ww-product-detail form.cart { display: grid; gap: 1rem; margin: 1.5rem 0 0; padding: 1.5rem 0; border-bottom: 1px solid var(--ww-color-line); }
.ww-product-detail form.cart::before, .ww-product-detail form.cart::after { display: none; }
.ww-product-detail form.cart .quantity { display: inline-flex; align-items: center; min-height: 2.75rem; }
.ww-product-detail form.cart .quantity .qty { width: 5.25rem; min-height: 2.75rem; border: 1px solid var(--ww-color-ink); border-radius: 0; color: var(--ww-color-ink); background: var(--ww-color-paper); text-align: center; }
.ww-product-detail form.cart .single_add_to_cart_button { min-height: 2.75rem; width: 100%; padding: 0.75rem 1rem; border: 0; border-radius: 0; color: var(--ww-color-paper); background: var(--ww-color-ink); font-weight: 400; }
.ww-product-detail form.cart .single_add_to_cart_button:hover, .ww-product-detail form.cart .single_add_to_cart_button:focus-visible { color: var(--ww-color-paper); background: #383835; }
.ww-product-detail form.variations_form .variations { width: 100%; margin: 0; }
.ww-product-detail form.variations_form .variations th, .ww-product-detail form.variations_form .variations td { display: block; padding: 0 0 0.5rem; text-align: left; }
.ww-product-detail form.variations_form .variations label { color: var(--ww-color-muted); font-size: 0.8rem; font-weight: 400; }
.ww-product-detail form.variations_form .variations select { width: 100%; min-height: 2.75rem; padding: 0.5rem; border: 1px solid var(--ww-color-line); border-radius: 0; color: var(--ww-color-ink); background: var(--ww-color-paper); }
.ww-product-detail form.variations_form .reset_variations { display: inline-block; margin-top: 0.35rem; color: var(--ww-color-muted); font-size: 0.8rem; }
.ww-product-detail .single_variation_wrap { display: grid; gap: 1rem; }
.ww-product-detail .woocommerce-variation-description, .ww-product-detail .woocommerce-variation-availability { color: var(--ww-color-muted); font-size: 0.85rem; }
.ww-product-detail .stock { margin: 0; color: var(--ww-color-muted); font-size: 0.85rem; }
.ww-product-detail .product_meta { display: grid; gap: 0.35rem; margin-top: 1.25rem; color: var(--ww-color-muted); font-size: 0.78rem; }
.ww-product-detail .product_meta a { color: inherit; text-underline-offset: 0.2rem; }
.ww-product-detail__below-summary { margin-top: clamp(3.5rem, 8vw, 8rem); }
.ww-product-detail__tabs { border-top: 1px solid var(--ww-color-ink); }
.ww-product-detail__desktop-tabs { display: none; }
.ww-product-detail__accordion { display: block; }
.ww-product-detail__accordion-item { border-bottom: 1px solid var(--ww-color-line); }
.ww-product-detail__accordion-item summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4rem; cursor: pointer; font-family: 'WW Display', 'PT Serif', Georgia, serif; font-size: 1.35rem; font-weight: 700; letter-spacing: 0.01em; list-style: none; }
.ww-product-detail__accordion-item summary::-webkit-details-marker { display: none; }
.ww-product-detail__accordion-icon { position: relative; width: 1rem; height: 1rem; flex: 0 0 1rem; }
.ww-product-detail__accordion-icon::before, .ww-product-detail__accordion-icon::after { position: absolute; top: 50%; left: 0; width: 100%; height: 1px; background: currentColor; content: ''; transform: translateY(-50%); }
.ww-product-detail__accordion-icon::after { transform: translateY(-50%) rotate(90deg); transition: transform 180ms ease; }
.ww-product-detail__accordion-item[open] .ww-product-detail__accordion-icon::after { transform: translateY(-50%) rotate(0); }
.ww-product-detail__accordion-content { padding: 0 0 1.5rem; }
.ww-product-detail .woocommerce-Tabs-panel > :first-child { margin-top: 0; }
.ww-product-detail .woocommerce-Tabs-panel > :last-child { margin-bottom: 0; }
.ww-product-detail .woocommerce-Tabs-panel h2 { font-family: 'WW Display', 'PT Serif', Georgia, serif; font-size: 1.3rem; font-weight: 700; letter-spacing: 0.01em; }
.ww-product-detail .woocommerce-Tabs-panel table { width: 100%; border-collapse: collapse; }
.ww-product-detail .woocommerce-Tabs-panel table th, .ww-product-detail .woocommerce-Tabs-panel table td { padding: 0.8rem 0; border-bottom: 1px solid var(--ww-color-line); text-align: left; vertical-align: top; }
.ww-product-detail .woocommerce-Tabs-panel table th { width: 42%; color: var(--ww-color-muted); font-weight: 400; }
.ww-product-detail #reviews { margin-top: 0; padding-top: 0; border-top: 0; }
.ww-product-detail #reviews #comments { margin-bottom: 2rem; }
.ww-product-detail #reviews .comment-reply-title { display: block; margin-bottom: 0.5rem; font-family: 'WW Display', 'PT Serif', Georgia, serif; font-size: 1.25rem; letter-spacing: 0.01em;
  font-weight: 700;
}
.ww-product-detail .related, .ww-product-detail .upsells { margin-top: clamp(4rem, 9vw, 9rem); }
.ww-product-detail .related > h2, .ww-product-detail .upsells > h2 { margin: 0 0 2rem; font-family: 'WW Display', 'PT Serif', Georgia, serif; font-size: clamp(1.7rem, 3vw, 3rem); font-weight: 700; letter-spacing: 0.01em; line-height: 1; text-align: center; }
.ww-product-detail .related ul.products, .ww-product-detail .upsells ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 0.75rem; }
.ww-product-detail .related ul.products li.product, .ww-product-detail .upsells ul.products li.product { margin: 0; }

@media (min-width: 48rem) {
  .ww-container { width: min(100% - 4rem, var(--ww-container)); }
  .ww-hero { grid-template-columns: minmax(0, 1.2fr) minmax(16rem, 0.8fr); align-items: end; }
  .ww-product-grid, .woocommerce ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ww-category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
  .ww-category-card { min-height: 14rem; align-items: end; padding: 1.2rem; border: 1px solid var(--ww-color-line); }
  .ww-category-card:last-child { border-bottom: 1px solid var(--ww-color-line); }
  .ww-product-detail__layout { grid-template-columns: minmax(0, 1.3fr) minmax(19rem, 0.7fr); align-items: start; }
  .ww-product-detail__purchase-panel { position: sticky; top: 2rem; }
  .ww-product-detail .flex-control-thumbs { gap: 0.75rem; }
  .ww-product-detail__desktop-tabs { display: block; }
  .ww-product-detail__accordion { display: none; }
  .ww-product-detail__tab-panel { display: grid; grid-template-columns: minmax(12rem, 0.33fr) minmax(0, 0.67fr); gap: clamp(2rem, 8vw, 10rem); padding: 2.25rem 0; border-bottom: 1px solid var(--ww-color-line); }
  .ww-product-detail__tab-title { margin: 0; }
  .ww-product-detail .related ul.products, .ww-product-detail .upsells ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem 1rem; }
}

/* Logged-out account screens follow the two-panel Figma composition. */
@media (min-width: 48rem) {
  .woocommerce-account:not(.logged-in) .ww-page-shell > .woocommerce {
    display: block;
    max-width: 72rem;
  }

  .woocommerce-account:not(.logged-in) .woocommerce .u-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(3rem, 8vw, 9rem);
  }

  .woocommerce-account:not(.logged-in) .woocommerce .u-column1,
  .woocommerce-account:not(.logged-in) .woocommerce .u-column2 {
    float: none;
    width: auto;
  }
}

@media (min-width: 75rem) {
  .ww-product-detail .related ul.products, .ww-product-detail .upsells ul.products { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 30rem) {
  .ww-header-inner { align-items: center; padding-block: 1rem; }
  .ww-menu-toggle { display: inline-flex; margin-left: auto; }
  .ww-js .ww-nav { display: none; width: 100%; }
  .ww-js .ww-nav.is-open { display: flex; align-items: flex-start; justify-content: flex-start; gap: 0.75rem; padding-top: 0.75rem; }
  .ww-js .ww-header-inner { flex-wrap: wrap; }
  .ww-nav { gap: 0.75rem; }
  .ww-product-meta { display: block; }
  .ww-product-price { display: block; margin-top: 0.35rem; }
}

/* Figma chrome and catalog contract: shared 142px header, icon actions and four-column footer. */
.ww-header-inner {
  min-height: 8.875rem;
  grid-template-columns: 15rem minmax(0, 1fr) auto;
  gap: 2rem;
}

.ww-site-header .ww-brand {
  font-size: 2rem;
}

.ww-nav__menu {
  gap: 3.25rem;
}

.ww-nav__menu li {
  list-style: none;
}

.ww-nav a,
.ww-header-actions a {
  min-height: 2.75rem;
  padding: 0;
  font-size: 1.125rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.ww-nav a .dashicons {
  width: 1rem;
  height: 1rem;
  margin-left: 0.25rem;
  font-size: 1rem;
  line-height: 1;
}

.ww-header-actions {
  gap: 0.625rem;
}

.ww-header-actions > a {
  position: relative;
  justify-content: center;
  width: 2.75rem;
  min-width: 2.75rem;
  padding: 0;
  border: 0;
}

.ww-header-actions .dashicons {
  width: 1.75rem;
  height: 1.75rem;
  font-size: 1.75rem;
  line-height: 1;
}

.ww-header-actions .ww-cart-link img {
  width: 1.625rem;
  height: 1.75rem;
  filter: invert(1);
}

.ww-header-actions .ww-cart-count {
  position: absolute;
  top: 0.1rem;
  right: -0.15rem;
  min-width: 1rem;
  border-radius: 999px;
  font-size: 0.625rem;
}

.ww-header-search {
  display: grid;
  width: 14.5rem;
  grid-template-columns: minmax(0, 1fr) 2.75rem;
  align-items: center;
  border-bottom: 1px solid currentColor;
}

.ww-header-search input,
.ww-header-search button {
  min-width: 0;
  height: 2.75rem;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  appearance: none;
}

.ww-header-search input:focus {
  outline: 0;
}

.ww-header-search button {
  display: grid;
  width: 2.75rem;
  place-items: center;
  cursor: pointer;
}

.ww-header-search .dashicons {
  width: 1.75rem;
  height: 1.75rem;
  font-size: 1.75rem;
}

.ww-header-search--mobile {
  display: none;
}

body.home .ww-header-actions .ww-cart-link img {
  filter: none;
}

body.home .ww-header-search {
  color: #fff;
}

.ww-footer-main {
  width: min(100% - (var(--ww-gutter) * 2), 91rem);
  min-height: 23.5rem;
  grid-template-columns: repeat(4, minmax(9rem, 1fr));
  align-content: start;
  gap: 6.25rem;
  padding: 4.75rem 0 3rem;
}

.ww-footer-column {
  gap: 0.55rem;
}

.ww-footer-column .ww-footer-kicker {
  margin-bottom: 0.7rem;
  color: #fff;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.ww-footer-column a {
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.875rem;
  line-height: 1.35;
}

.ww-contact-grid h2 {
  margin-bottom: 1.7rem;
}

.ww-contact-grid p {
  margin: 0 0 1.65rem;
}

.ww-contact-grid a {
  color: inherit;
  text-decoration: none;
}

.ww-contact-grid a:hover,
.ww-contact-grid a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.ww-route-404 .ww-site-header {
  display: block;
}

.ww-route-404 .ww-main {
  min-height: 61.875rem;
  padding-top: 0;
}

.ww-empty-state.ww-empty-state--not-found {
  min-height: 61.875rem;
}

.ww-catalog-page {
  min-height: 69rem;
  padding: 5.5rem 0 7rem;
}

.ww-catalog-page__header {
  display: grid;
  justify-items: center;
  gap: 2rem;
}

.ww-catalog-page__header h1 {
  margin: 0;
  font-family: 'WW Display', 'PT Serif', Georgia, serif;
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-align: center;
}

.ww-catalog-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 1.5rem;
}

.ww-catalog-filters a {
  color: var(--ww-color-muted);
  font-size: 0.875rem;
  text-decoration: none;
}

.ww-catalog-filters a[aria-current='page'] {
  color: var(--ww-color-ink);
  text-decoration: underline;
  text-underline-offset: 0.25rem;
}

.ww-catalog-page__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 4.5rem;
  margin-top: 3rem;
  border-top: 1px solid var(--ww-color-line);
  border-bottom: 1px solid var(--ww-color-line);
}

.ww-catalog-page__toolbar .woocommerce-result-count,
.ww-catalog-page__toolbar .woocommerce-ordering {
  float: none;
  margin: 0;
}

.ww-catalog-page__toolbar select {
  min-height: 2.75rem;
  border: 0;
  color: var(--ww-color-ink);
  background: transparent;
}

.ww-catalog-controls {
  margin-top: 2.5rem;
  border-block: 1px solid var(--ww-color-line);
}

.ww-catalog-controls > summary {
  display: none;
}

.ww-catalog-controls__form {
  display: grid;
  grid-template-columns: minmax(10rem, 1.2fr) repeat(2, minmax(7rem, .7fr)) minmax(10rem, .9fr) minmax(12rem, 1.2fr) auto;
  align-items: end;
  gap: 1rem;
  padding: 1.25rem 0;
}

.ww-catalog-field {
  display: grid;
  gap: .45rem;
  min-width: 0;
  color: var(--ww-color-muted);
  font-size: .75rem;
}

.ww-catalog-field input,
.ww-catalog-field select {
  width: 100%;
  height: 2.875rem;
  padding: 0 .8rem;
  border: 1px solid var(--ww-color-line);
  border-radius: 0;
  color: var(--ww-color-ink);
  background: #fff;
  font: inherit;
  font-size: .875rem;
}

.ww-catalog-stock {
  display: flex;
  align-items: center;
  min-height: 2.875rem;
  gap: .6rem;
  font-size: .875rem;
}

.ww-catalog-stock input { width: 1.15rem; height: 1.15rem; accent-color: var(--ww-color-wood); }
.ww-catalog-controls__actions { display: flex; align-items: center; gap: .8rem; min-height: 2.875rem; }
.ww-catalog-controls__actions .ww-button { min-height: 2.875rem; padding: .7rem 1rem; white-space: nowrap; }
.ww-catalog-controls__actions a { color: var(--ww-color-muted); font-size: .8rem; }
.ww-catalog-empty { display: grid; justify-items: center; gap: 1rem; padding: 7rem 1rem; text-align: center; }
.ww-catalog-empty h2, .ww-catalog-empty p { margin: 0; }

@media (max-width: 85.3125rem) {
  .ww-catalog-controls__form { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ww-catalog-controls__actions { justify-self: end; }
}

@media (max-width: 47.9375rem) {
  .ww-catalog-controls { margin-top: 2rem; border: 1px solid var(--ww-color-line); }
  .ww-catalog-controls > summary { display: flex; align-items: center; justify-content: space-between; min-height: 3.25rem; padding: 0 1rem; cursor: pointer; font-size: .875rem; }
  .ww-catalog-controls > summary::after { content: '+'; font-size: 1.25rem; }
  .ww-catalog-controls[open] > summary::after { content: '−'; }
  .ww-catalog-controls__form { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 1rem; border-top: 1px solid var(--ww-color-line); }
  .ww-catalog-field:first-child, .ww-catalog-field--ordering, .ww-catalog-stock, .ww-catalog-controls__actions { grid-column: 1 / -1; }
  .ww-catalog-field input, .ww-catalog-field select, .ww-catalog-controls__actions .ww-button { min-height: 2.75rem; }
  .ww-catalog-controls__actions { justify-self: stretch; justify-content: space-between; }
}

.ww-catalog-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5rem 2rem;
  margin-top: 4rem;
}

.ww-catalog-page .woocommerce-pagination {
  margin-top: 4rem;
}

.ww-catalog-page .woocommerce-pagination ul.page-numbers {
  display: flex;
  justify-content: center;
  gap: 1.25rem;
  border: 0;
}

.ww-catalog-page .woocommerce-pagination ul.page-numbers li {
  border: 0;
}

@media (max-width: 53.75rem) {
  .ww-site-header,
  body.home .ww-site-header {
    position: fixed;
    inset: 0 0 auto;
    height: 4.3125rem;
    color: var(--ww-color-ink);
    border-bottom: 1px solid var(--ww-color-line);
    background: #fff;
  }

  .ww-main {
    padding-top: 4.3125rem;
  }

  .ww-header-inner {
    width: calc(100% - 2rem);
    min-height: 4.3125rem;
    grid-template-columns: 2.75rem minmax(5.5rem, 1fr) auto;
    gap: 0.45rem;
    padding: 0;
  }

  .ww-menu-toggle {
    display: inline-flex;
    grid-column: 1;
    grid-row: 1;
  }

  .ww-site-header .ww-brand,
  body.home .ww-site-header .ww-brand {
    grid-column: 2;
    grid-row: 1;
    color: var(--ww-color-ink);
    font-size: 1.25rem;
  }

  .ww-header-actions {
    grid-column: 3;
    grid-row: 1;
    gap: 0;
  }

  .ww-header-actions > a {
    width: 2.5rem;
    min-width: 2.5rem;
    color: var(--ww-color-ink);
  }

  .ww-header-actions .ww-cart-link img,
  body.home .ww-header-actions .ww-cart-link img {
    filter: invert(1);
  }

  .ww-header-actions > .ww-header-search {
    display: none;
  }

  .ww-js .ww-site-header .ww-nav,
  body.home .ww-site-header .ww-nav {
    position: fixed;
    z-index: 30;
    inset: 4.3125rem 0 auto;
    display: none;
    width: 100%;
    max-height: calc(100dvh - 4.3125rem);
    padding: 2rem 1rem 2.5rem;
    overflow-y: auto;
    color: var(--ww-color-ink);
    border-top: 1px solid var(--ww-color-line);
    background: #fff;
  }

  .ww-js .ww-site-header .ww-nav.is-open {
    display: grid;
    gap: 2rem;
  }

  .ww-site-header .ww-nav__menu {
    display: grid;
    gap: 0;
  }

  .ww-site-header .ww-nav a,
  body.home.ww-menu-open .ww-site-header .ww-nav a {
    min-height: 3.5rem;
    color: var(--ww-color-ink);
    font-size: 1.125rem;
  }

  .ww-header-search--mobile {
    display: grid;
    width: 100%;
    color: var(--ww-color-ink);
  }

  .ww-footer-main {
    width: calc(100% - 2rem);
    min-height: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.5rem 1.5rem;
    padding: 3.5rem 0;
  }

  .ww-footer-column,
  .ww-footer-brand,
  .ww-footer-meta {
    grid-column: auto;
  }

  .ww-route-404 .ww-main {
    min-height: 0;
    padding-top: 4.3125rem;
  }

  .ww-empty-state.ww-empty-state--not-found {
    min-height: 0;
  }

  .ww-catalog-page {
    width: calc(100% - 2rem);
    min-height: 0;
    padding: 3rem 0 5rem;
  }

  .ww-catalog-page__header h1 {
    font-size: 2rem;
  }

  .ww-catalog-page__toolbar {
    align-items: flex-start;
    min-height: 0;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem 0;
  }

  .ww-catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.5rem 1rem;
    margin-top: 2.5rem;
  }
}

/* Global visual system — shared by every public template. */
:root {
  --ww-color-ink: #0b0b0a;
  --ww-color-paper: #ffffff;
  --ww-color-surface: #f4f1eb;
  --ww-color-sand: #e7cba8;
  --ww-color-wood: #6f4a2f;
  --ww-color-muted: #716e68;
  --ww-color-line: #d9d6cf;
  --ww-color-footer: #060606;
  --ww-space-1: 0.5rem;
  --ww-space-2: 1rem;
  --ww-space-3: 1.5rem;
  --ww-space-4: 2.5rem;
  --ww-space-5: 4rem;
  --ww-space-6: clamp(4.5rem, 9vw, 9rem);
  --ww-radius-sm: 0;
  --ww-font-sans: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --ww-font-display: 'WW Display', 'PT Serif', Georgia, serif;
  --ww-container: 100rem;
  --ww-gutter: 1.125rem;
}

html {
  background: var(--ww-color-paper);
}

body {
  min-width: 20rem;
  background: var(--ww-color-paper);
  font-size: 0.9375rem;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
}

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

button,
[type="submit"],
[type="button"] {
  cursor: pointer;
}

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

.ww-container {
  width: min(100% - (var(--ww-gutter) * 2), var(--ww-container));
}

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

.ww-skip-link:focus {
  left: var(--ww-gutter);
  top: var(--ww-gutter);
  z-index: 100;
  color: var(--ww-color-paper);
  background: var(--ww-color-ink);
  outline: 2px solid var(--ww-color-paper);
  outline-offset: 2px;
}

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

.ww-main {
  min-height: 62vh;
}

/* Header */
.ww-site-header {
  position: relative;
  z-index: 25;
  border-bottom: 1px solid var(--ww-color-line);
  background: var(--ww-color-paper);
}

.ww-header-inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  min-height: 4.75rem;
  gap: 1.25rem;
}

.ww-brand {
  display: inline-flex;
  align-items: baseline;
  width: max-content;
  color: var(--ww-color-ink);
  font-family: 'WW Display', 'PT Serif', Georgia, serif;
  font-size: 1.4rem;
  font-style: italic;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
  text-decoration: none;
}

.ww-brand span {
  padding-inline: 0.05em;
  font-size: 0.88em;
}

.ww-menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  color: var(--ww-color-ink);
  background: transparent;
}

.ww-menu-toggle > span[aria-hidden="true"] {
  position: absolute;
  width: 1.25rem;
  height: 1px;
  background: currentColor;
  transition: transform 180ms ease;
}

.ww-menu-toggle > span[aria-hidden="true"]:first-child {
  transform: translateY(-0.22rem);
}

.ww-menu-toggle > span[aria-hidden="true"]:nth-child(2) {
  transform: translateY(0.22rem);
}

.ww-menu-open .ww-menu-toggle > span[aria-hidden="true"]:first-child {
  transform: rotate(45deg);
}

.ww-menu-open .ww-menu-toggle > span[aria-hidden="true"]:nth-child(2) {
  transform: rotate(-45deg);
}

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

.ww-nav,
.ww-nav__menu,
.ww-header-actions {
  display: flex;
  align-items: center;
}

.ww-nav__menu {
  gap: clamp(1rem, 2.2vw, 2.25rem);
  padding: 0;
  margin: 0;
  list-style: none;
}

.ww-nav a,
.ww-header-actions a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--ww-color-ink);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
}

.ww-nav a {
  position: relative;
}

.ww-nav a::after {
  position: absolute;
  right: 0;
  bottom: 0.55rem;
  left: 0;
  height: 1px;
  background: currentColor;
  content: '';
  opacity: 0;
  transform: scaleX(0);
  transform-origin: right;
  transition: opacity 160ms ease, transform 160ms ease;
}

.ww-nav a:hover::after,
.ww-nav a:focus-visible::after,
.ww-nav .current-menu-item > a::after,
.ww-nav .current_page_item > a::after {
  opacity: 1;
  transform: scaleX(1);
  transform-origin: left;
}

.ww-header-actions {
  justify-content: flex-end;
  gap: 0.25rem;
}

.ww-header-actions a {
  gap: 0.35rem;
  padding-inline: 0.55rem;
}

.ww-account-link {
  border-right: 1px solid var(--ww-color-line);
}

.ww-header-actions__icon {
  display: none;
  width: 0.86rem;
  height: 0.86rem;
  border: 1px solid currentColor;
  border-radius: 50%;
}

.ww-cart-link {
  white-space: nowrap;
}

.ww-cart-count {
  display: grid;
  min-width: 1rem;
  height: 1rem;
  place-items: center;
  padding: 0 0.15rem;
  color: var(--ww-color-paper);
  background: var(--ww-color-ink);
  font-size: 0.55rem;
  line-height: 1;
}

/* Type, controls, and reusable commerce surfaces */
.ww-kicker,
.ww-footer-kicker,
.ww-social-login-shell__title,
.ww-welcome-coupon__eyebrow,
.ww-woodycoin-card__eyebrow {
  color: var(--ww-color-ink);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.25;
}

.ww-title,
.ww-section-title {
  font-family: var(--ww-font-display);
  font-weight: 400;
  letter-spacing: -0.065em;
}

.ww-title {
  max-width: 10ch;
  font-size: clamp(3rem, 7.5vw, 7rem);
  line-height: 0.88;
}

.ww-section-title {
  font-size: clamp(2rem, 4.5vw, 4.75rem);
  line-height: 0.92;
}

.ww-lede,
.ww-prose {
  color: #55514b;
}

.ww-lede {
  max-width: 33rem;
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  line-height: 1.5;
}

.ww-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: 2.75rem;
  padding: 0.75rem 1.3rem;
  border: 1px solid var(--ww-color-ink);
  border-radius: 0;
  color: var(--ww-color-paper);
  background: var(--ww-color-ink);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 160ms ease, background 160ms ease;
}

.ww-button:hover,
.ww-button:focus-visible,
.woocommerce a.button:hover,
.woocommerce a.button:focus-visible,
.woocommerce button.button:hover,
.woocommerce button.button:focus-visible,
.woocommerce input.button:hover,
.woocommerce input.button:focus-visible {
  color: var(--ww-color-ink);
  background: transparent;
}

.ww-text-link {
  color: var(--ww-color-ink);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-decoration-thickness: 1px;
  text-transform: uppercase;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
textarea,
select,
.woocommerce form .form-row input.input-text,
.woocommerce .woocommerce-ordering select,
.ww-inquiry-form input,
.ww-inquiry-form textarea,
.ww-newsletter-form input[type="email"] {
  min-height: 2.9rem;
  border: 0;
  border-bottom: 1px solid currentColor;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

textarea,
.ww-inquiry-form textarea {
  min-height: 8rem;
}

input:focus,
textarea:focus,
select:focus {
  outline: 2px solid var(--ww-color-ink);
  outline-offset: 2px;
}

/* Footer and newsletter */
.ww-site-footer {
  margin-top: var(--ww-space-6);
  padding: 0;
  border: 0;
  color: rgba(255, 255, 255, 0.68);
  background: var(--ww-color-footer);
  font-size: 0.75rem;
}

.ww-footer-newsletter {
  color: var(--ww-color-paper);
  background-color: var(--ww-color-wood);
  background-image: linear-gradient(115deg, rgba(0, 0, 0, 0.14), transparent 50%), repeating-linear-gradient(7deg, rgba(255, 255, 255, 0.07) 0, rgba(255, 255, 255, 0.07) 1px, transparent 1px, transparent 7px);
}

.ww-footer-newsletter__inner {
  display: grid;
  gap: 2rem;
  padding-block: clamp(3.5rem, 7vw, 6.5rem);
}

.ww-footer-newsletter__copy {
  max-width: 22rem;
}

.ww-footer-newsletter__copy p:last-child {
  margin: 0;
  font-size: clamp(1.25rem, 2.2vw, 2rem);
  line-height: 1.12;
}

.ww-footer-kicker {
  margin: 0 0 0.75rem;
  color: currentColor;
}

.ww-newsletter-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 0.9rem 1.25rem;
  max-width: 38rem;
  padding: 0;
  margin: 0;
  border: 0;
  color: var(--ww-color-paper);
  background: transparent;
}

.ww-newsletter-form h2,
.ww-newsletter-form > h2 + p,
.ww-newsletter-form__consent,
.ww-newsletter-form__notice {
  grid-column: 1 / -1;
}

.ww-newsletter-form h2 {
  margin: 0;
  font-size: clamp(1.75rem, 3vw, 3rem);
  letter-spacing: -0.06em;
  line-height: 0.92;
}

.ww-newsletter-form > p {
  margin: 0;
}

.ww-newsletter-form > h2 + p {
  max-width: 32rem;
  color: rgba(255, 255, 255, 0.78);
}

.ww-newsletter-form label,
.ww-newsletter-form__consent label {
  color: inherit;
  font-size: 0.6875rem;
}

.ww-newsletter-form input[type="email"] {
  width: 100%;
  padding: 0.65rem 0;
  color: var(--ww-color-paper);
}

.ww-newsletter-form input[type="email"]::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

.ww-newsletter-form .ww-button {
  min-width: 8.4rem;
  color: var(--ww-color-ink);
  border-color: var(--ww-color-paper);
  background: var(--ww-color-paper);
}

.ww-newsletter-form .ww-button:hover,
.ww-newsletter-form .ww-button:focus-visible {
  color: var(--ww-color-paper);
  background: transparent;
}

.ww-newsletter-form__consent label {
  color: rgba(255, 255, 255, 0.75);
}

.ww-newsletter-form__notice {
  border-color: rgba(255, 255, 255, 0.6);
  color: var(--ww-color-paper);
}

.ww-footer-main {
  display: grid;
  gap: 2.5rem 1.5rem;
  padding-block: 3rem 1.75rem;
}

.ww-footer-brand {
  max-width: 18rem;
}

.ww-brand--footer {
  color: var(--ww-color-paper);
  font-size: 1.7rem;
}

.ww-footer-brand p,
.ww-footer-meta p {
  margin: 0.85rem 0 0;
}

.ww-footer-column {
  display: grid;
  align-content: start;
  gap: 0.6rem;
}

.ww-footer-column a {
  width: max-content;
  max-width: 100%;
  color: rgba(255, 255, 255, 0.68);
  text-decoration: none;
}

.ww-footer-column a:hover,
.ww-footer-column a:focus-visible {
  color: var(--ww-color-paper);
  text-decoration: underline;
  text-underline-offset: 0.25rem;
}

.ww-footer-meta {
  align-self: end;
  color: rgba(255, 255, 255, 0.46);
  font-size: 0.6875rem;
}

/* Keep plugin-owned forms and the cart drawer within the shared system. */
.ww-cart-drawer {
  background: rgba(0, 0, 0, 0.42);
}

.ww-cart-drawer__inner {
  width: min(100%, 29rem);
  padding: 1.5rem;
  background: var(--ww-color-paper);
  box-shadow: none;
}

.ww-cart-drawer__head h2 {
  font-size: 1.75rem;
  letter-spacing: -0.05em;
}

.ww-cart-drawer__close {
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--ww-color-ink);
  font-size: 1.5rem;
}

.ww-cart-drawer__thumb {
  border: 1px solid var(--ww-color-line);
  background: var(--ww-color-surface);
}

.ww-cart-drawer__actions {
  align-items: stretch;
}

.ww-cart-drawer__actions .ww-text-link {
  display: inline-flex;
  align-items: center;
}

.ww-social-login-shell,
.ww-welcome-coupon,
.ww-woodycoin-card,
.ww-inquiry-form,
.woocommerce form.woocommerce-form-login,
.woocommerce form.track_order {
  border-color: var(--ww-color-line);
  background: var(--ww-color-surface);
}

.ww-wishlist-link {
  border-radius: 0;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (min-width: 48rem) {
  :root {
    --ww-gutter: 2.5rem;
  }

  .ww-header-inner {
    min-height: 8.8125rem;
  }

  .ww-site-header .ww-brand {
    font-size: 2rem;
  }

  .ww-footer-newsletter__inner {
    grid-template-columns: minmax(0, 0.72fr) minmax(20rem, 1fr);
    align-items: end;
    column-gap: clamp(3rem, 9vw, 11rem);
  }

  .ww-footer-main {
    grid-template-columns: minmax(12rem, 1.6fr) repeat(2, minmax(8rem, 1fr)) minmax(10rem, 1.1fr);
    padding-block: 6.5rem 5.25rem;
  }
}

/* Commerce layouts must escape the narrow editorial prose measure. */
.woocommerce-cart .ww-route-prose,
.woocommerce-checkout .ww-route-prose,
.woocommerce-account .ww-route-prose {
  max-width: none;
}

.woocommerce-cart .ww-route-shell--page,
.woocommerce-checkout .ww-route-shell--page,
.woocommerce-account .ww-route-shell--page {
  width: min(100% - (var(--ww-gutter) * 2), 74rem);
  max-width: none;
}

.woocommerce-cart .ww-route-prose > .woocommerce,
.woocommerce-checkout .ww-route-prose > .woocommerce,
.woocommerce-account .ww-route-prose > .woocommerce {
  width: 100%;
  max-width: none;
}

.ww-cart-open,
.ww-cart-open body {
  overflow: hidden;
  overscroll-behavior: none;
}

.ww-cart-drawer__inner {
  max-height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.woocommerce-cart .quantity {
  display: grid;
  grid-template-columns: 2.75rem minmax(3.5rem, 4.5rem) 2.75rem;
  align-items: center;
  width: max-content;
}

.woocommerce-cart .quantity .qty,
.woocommerce-cart .quantity .ww-quantity-button {
  width: 100%;
  min-width: 0;
  height: 2.75rem;
  min-height: 2.75rem;
  padding: 0;
  border: 1px solid var(--ww-color-ink);
  border-radius: 0;
  color: var(--ww-color-ink);
  background: var(--ww-color-paper);
  text-align: center;
}

.woocommerce-cart .quantity .qty {
  border-inline: 0;
}

@media (min-width: 48rem) {
  .woocommerce-checkout form.checkout {
    grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.72fr);
    grid-template-rows: auto 1fr;
  }

  .woocommerce-checkout #customer_details {
    grid-column: 1;
    grid-row: 1 / 3;
    min-width: 0;
  }

  .woocommerce-checkout #customer_details .col-1,
  .woocommerce-checkout #customer_details .col-2 {
    float: none;
    width: 100%;
  }

  .woocommerce-checkout #customer_details .col-2 {
    margin-top: 2rem;
  }
}

@media (max-width: 47.9375rem) {
  .woocommerce-cart .cart-collaterals .cart_totals {
    box-sizing: border-box;
    padding: 1.25rem;
  }

  .woocommerce-cart .cart_totals table.shop_table {
    width: 100%;
    max-width: 100%;
    table-layout: fixed;
  }

  .woocommerce-cart .cart_totals table.shop_table tr,
  .woocommerce-cart .cart_totals table.shop_table td {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
  }

  .woocommerce-cart .cart_totals table.shop_table td {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    text-align: right;
  }

  .woocommerce-cart .cart_totals tr.woocommerce-shipping-totals td {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
    text-align: left;
  }

  .woocommerce-cart .cart_totals tr.woocommerce-shipping-totals td::before {
    width: 100%;
  }

  .woocommerce-cart .cart_totals #shipping_method,
  .woocommerce-cart .cart_totals .woocommerce-shipping-calculator,
  .woocommerce-cart .cart_totals .shipping-calculator-button {
    width: 100%;
    max-width: 100%;
  }

  .woocommerce-cart .cart_totals #shipping_method li {
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr);
    align-items: center;
    min-height: 2.75rem;
    text-align: left;
  }

  .woocommerce-cart .cart_totals #shipping_method input {
    width: 1.125rem;
    height: 1.125rem;
    margin: 0;
    justify-self: center;
  }

  .woocommerce-cart .cart_totals #shipping_method label,
  .woocommerce-cart .cart_totals .shipping-calculator-button {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
  }
}

@media (max-width: 53.75rem) {
  .ww-header-inner {
    grid-template-columns: auto 1fr auto;
    min-height: 4.25rem;
    gap: 0.5rem;
  }

  .ww-menu-toggle {
    display: inline-flex;
    position: relative;
  }

  .ww-brand {
    justify-self: center;
    font-size: 1.28rem;
  }

  .ww-js .ww-nav {
    position: absolute;
    top: calc(100% + 1px);
    right: 0;
    left: 0;
    display: none;
    padding: 1rem var(--ww-gutter) 1.5rem;
    border-bottom: 1px solid var(--ww-color-line);
    background: var(--ww-color-paper);
    box-shadow: 0 1.25rem 2rem rgba(0, 0, 0, 0.08);
  }

  .ww-js .ww-nav.is-open {
    display: block;
  }

  .ww-nav__menu {
    display: grid;
    justify-items: stretch;
    gap: 0;
  }

  .ww-nav a {
    justify-content: space-between;
    min-height: 3rem;
    border-bottom: 1px solid var(--ww-color-line);
    font-size: 0.6875rem;
  }

  .ww-nav > a {
    display: flex;
  }

  .ww-nav a::after {
    display: none;
  }

  .ww-header-actions {
    gap: 0;
  }

  .ww-header-actions a {
    min-width: 2.3rem;
    justify-content: center;
    padding-inline: 0.3rem;
  }

  .ww-header-actions__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .ww-account-link {
    border-right: 0;
  }

  .ww-header-actions__icon {
    display: block;
  }

  .ww-cart-count {
    min-width: 1.1rem;
    height: 1.1rem;
  }

  .ww-footer-main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ww-footer-brand,
  .ww-footer-meta {
    grid-column: 1 / -1;
  }
}

.woocommerce .ww-empty-state .ww-button {
  color: var(--ww-color-paper);
  background: var(--ww-color-ink);
}

.woocommerce .ww-empty-state .ww-button:hover,
.woocommerce .ww-empty-state .ww-button:focus-visible {
  color: var(--ww-color-ink);
  background: transparent;
}

@media (max-width: 53.75rem) {
  .ww-site-header,
  html.ww-js body.home .ww-site-header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 50;
    width: 100%;
    transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease;
  }

  body:not(.home) .ww-main {
    padding-top: 4.3125rem;
  }

  body.home .ww-main {
    padding-top: 0;
  }

  body.home .ww-site-header.is-scrolled {
    color: var(--ww-color-ink);
    border-bottom-color: var(--ww-color-line);
    background: var(--ww-color-paper);
  }

  body.home .ww-site-header.is-scrolled .ww-brand,
  body.home .ww-site-header.is-scrolled .ww-header-actions a,
  body.home .ww-site-header.is-scrolled .ww-menu-toggle {
    color: var(--ww-color-ink);
  }

  body.home .ww-site-header.is-scrolled .ww-cart-count {
    color: var(--ww-color-paper);
    background: var(--ww-color-ink);
  }

  .ww-header-actions a {
    min-width: 2.75rem;
    min-height: 2.75rem;
  }

  body .ww-product-actions .button,
  body .ww-product-actions .added_to_cart {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: 0.65rem 0.55rem;
    line-height: 1.2;
    white-space: normal;
  }

  :target {
    scroll-margin-top: 5rem;
  }
}

.woocommerce-checkout #payment #place_order {
  width: 100%;
  min-height: 3rem;
  border: 1px solid var(--ww-color-ink);
  color: var(--ww-color-paper);
  background: var(--ww-color-ink);
}

.woocommerce-checkout #payment #place_order:hover,
.woocommerce-checkout #payment #place_order:focus-visible {
  color: var(--ww-color-ink);
  background: transparent;
}

@media (max-width: 30rem) {
  .woocommerce-checkout form .form-row-first,
  .woocommerce-checkout form .form-row-last {
    float: none;
    width: 100%;
  }

  .woocommerce-checkout #order_review,
  .woocommerce-checkout #payment {
    width: 100%;
  }
}

/* Reference-led content and empty states. */
.ww-empty-state__dog {
  width: min(100%, 25rem);
  height: auto;
  object-fit: contain;
}

.ww-empty-state--not-found {
  width: min(68.54vw, 82.25rem);
  grid-template-columns: minmax(14rem, 44.5fr) minmax(18rem, 45fr);
  align-items: center;
  justify-items: center;
  gap: clamp(2rem, 7vw, 7rem);
  max-width: 82.25rem;
}

.ww-empty-state--not-found .ww-empty-state__copy {
  display: grid;
  justify-items: center;
  text-align: center;
}

.ww-empty-state--not-found .ww-section-title {
  max-width: none;
  margin: 0;
  font-size: clamp(1.875rem, 2.083vw, 2.5rem);
  white-space: nowrap;
}

.ww-empty-state--not-found .ww-button {
  margin-top: 1.75rem;
}

.ww-empty-state--wishlist .ww-empty-state__dog,
.ww-empty-state--cart .ww-empty-state__dog {
  width: min(78vw, 18rem);
}

.ww-empty-state--wishlist {
  position: relative;
  width: min(100% - (var(--ww-gutter) * 2), 100rem);
  max-width: none;
}

.ww-empty-state--wishlist .ww-empty-state__dog {
  width: min(78vw, 20rem);
}

.ww-empty-state--wishlist .ww-section-title {
  max-width: none;
  font-size: clamp(2rem, 2.1vw, 2.5rem);
}

.ww-empty-state__back {
  position: absolute;
  top: clamp(2rem, 4vw, 4rem);
  left: 0;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  gap: 1rem;
  font-size: 1.75rem;
  text-decoration: none;
}

.ww-empty-state__back span {
  font-size: 0.875rem;
}

.ww-contact-page > .ww-lede,
.ww-about-story {
  margin-top: clamp(2rem, 5vw, 4.5rem);
}

.ww-contact-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 6vw, 6rem);
  margin-top: clamp(3rem, 7vw, 6rem);
}

.ww-contact-page {
  width: min(100% - (var(--ww-gutter) * 2), 100rem);
  max-width: none;
  padding-top: 4.5rem;
}

.ww-contact-back {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  gap: 1rem;
  color: var(--ww-color-muted);
  font-size: 1.75rem;
  text-decoration: none;
}

.ww-contact-back span {
  font-size: 0.875rem;
}

.ww-contact-head {
  margin-top: 6.75rem;
}

.ww-contact-head h1 {
  margin: 0;
  font-family: 'WW Display', 'PT Serif', Georgia, serif;
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
  text-transform: uppercase;
}

.ww-contact-head p {
  max-width: 100rem;
  margin: 3.5rem 0 0;
  font-size: 2rem;
  line-height: 1.15;
}

.ww-contact-page .ww-contact-grid {
  grid-template-columns: 24% 24% 40%;
  column-gap: 6%;
}

.ww-contact-page .ww-contact-grid section {
  border-top: 0;
}

.ww-contact-page .ww-contact-grid h2 {
  font-family: 'WW Display', 'PT Serif', Georgia, serif;
  margin: 0 0 2.5rem;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
}

.ww-contact-page .ww-contact-grid p,
.ww-contact-page .ww-contact-grid a {
  font-size: 1.625rem;
  line-height: 1.5;
}

.ww-contact-page .ww-contact-grid p {
  color: var(--ww-color-ink);
}

.ww-contact-grid section {
  padding-top: 1rem;
  border-top: 1px solid var(--ww-color-line);
}

.ww-contact-grid h2,
.ww-about-story h2 {
  margin: 0 0 0.75rem;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ww-contact-grid p,
.ww-contact-grid a,
.ww-about-story p {
  color: var(--ww-color-muted);
}

.ww-contact-grid a {
  color: var(--ww-color-ink);
  text-underline-offset: 0.25em;
}

.ww-about-story {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 5rem);
}

.ww-about-story > .ww-lede {
  grid-column: 1 / -1;
  max-width: 48rem;
}

.ww-wishlist-link--overlay {
  width: 2.75rem;
  height: 2.75rem;
}

.woocommerce .show-password-input {
  width: 2.75rem;
  height: 2.75rem;
}

.woocommerce-form__input-checkbox {
  min-width: 1.125rem;
  min-height: 1.125rem;
}

@media (max-width: 53.75rem) {
  .ww-empty-state {
    min-height: 0;
    padding-block: 3.5rem 4.5rem;
  }

  .ww-empty-state--not-found {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .ww-empty-state--not-found .ww-empty-state__dog {
    width: min(70vw, 16rem);
  }

  .ww-empty-state--not-found .ww-section-title {
    white-space: normal;
  }

  .ww-not-found-code {
    font-size: clamp(4rem, 22vw, 6rem);
  }

  .ww-empty-state--wishlist .ww-section-title,
  .ww-empty-state--cart .ww-section-title {
    font-size: clamp(2rem, 10vw, 3rem);
  }

  .ww-empty-state--wishlist .ww-empty-state__dog {
    width: min(66vw, 14rem);
  }

  .ww-empty-state__back {
    position: static;
    justify-self: start;
    margin-bottom: 1rem;
  }

  .ww-contact-grid,
  .ww-about-story {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .ww-contact-head {
    margin-top: 3.5rem;
  }

  .ww-contact-head p {
    font-size: 1.5rem;
  }

  .ww-contact-page .ww-contact-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .ww-about-story > .ww-lede {
    grid-column: auto;
  }
}

@media (max-width: 30rem) {
  .ww-container {
    width: min(100% - (var(--ww-gutter) * 2), var(--ww-container));
  }

  .ww-header-inner {
    padding-block: 0;
  }

  .ww-newsletter-form {
    grid-template-columns: 1fr;
  }

  .ww-newsletter-form .ww-button {
    width: 100%;
  }

  .ww-footer-main {
    grid-template-columns: 1fr;
  }

  .ww-footer-brand,
  .ww-footer-meta {
    grid-column: auto;
  }
}

/* Task 2: image-led home composition and shared product cards. */
.ww-home-hero {
  position: relative;
  display: grid;
  min-height: clamp(35rem, 58vw, 47rem);
  overflow: hidden;
  color: var(--ww-color-paper);
  background: var(--ww-color-ink);
}

.ww-home-hero__media,
.ww-home-maker__media {
  position: absolute;
  inset: 0;
}

.ww-home-hero__media::after,
.ww-home-maker__media::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.16) 72%);
  content: '';
}

.ww-home-hero__media img,
.ww-home-maker__media img,
.ww-home-promo__media img,
.ww-home-editorial__media img,
.ww-category-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ww-home-hero__inner,
.ww-home-maker__inner {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: end;
  gap: 2rem;
  padding-block: clamp(4rem, 9vw, 8.5rem);
}

.ww-home-hero .ww-kicker,
.ww-home-maker .ww-kicker,
.ww-home-hero .ww-lede {
  color: currentColor;
}

.ww-home-hero .ww-title {
  max-width: 7ch;
}

.ww-home-hero__action {
  display: grid;
  gap: 1.5rem;
  max-width: 28rem;
}

.ww-button--light {
  color: var(--ww-color-ink);
  border-color: var(--ww-color-paper);
  background: var(--ww-color-paper);
}

.ww-button--light:hover,
.ww-button--light:focus-visible {
  color: var(--ww-color-paper);
  background: transparent;
}

.ww-home-promo {
  display: grid;
  margin-top: clamp(2.5rem, 5vw, 5rem);
  background: var(--ww-color-surface);
}

.ww-home-promo__media {
  min-height: 20rem;
  background: var(--ww-color-sand);
}

.ww-home-promo__content {
  display: grid;
  align-content: center;
  gap: 1.25rem;
  padding: clamp(2rem, 5vw, 5rem);
}

.ww-home-promo__content .ww-kicker,
.ww-home-promo__content .ww-lede,
.ww-home-promo__content .ww-section-title {
  margin: 0;
}

.ww-home-section {
  padding-block: var(--ww-space-6);
}

.ww-home-products {
  background: #f0d5b1;
}

.ww-home-section__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.ww-home-section__head .ww-kicker,
.ww-home-section__head .ww-section-title {
  margin: 0;
}

.ww-home-section__head .ww-kicker {
  margin-bottom: 0.75rem;
}

.ww-product-grid,
.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.75rem) clamp(0.75rem, 2vw, 1.5rem);
  padding: 0;
  margin: 0;
}

.woocommerce ul.products li.product.ww-product-card-wrapper--loop {
  width: auto;
  margin: 0;
  list-style: none;
}

.ww-product-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
}

.ww-product-card__visual {
  position: relative;
}

.ww-product-image {
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--ww-color-surface);
}

.ww-product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 260ms ease;
}

.woocommerce ul.products li.product .ww-product-image img {
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
}

.ww-product-card:hover .ww-product-image img,
.ww-product-card:focus-within .ww-product-image img {
  transform: scale(1.035);
}

.ww-product-badge {
  top: 0.75rem;
  bottom: auto;
  left: 0.75rem;
  padding: 0.45rem 0.55rem;
  color: var(--ww-color-paper);
  background: var(--ww-color-ink);
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.ww-product-badge--sale {
  background: var(--ww-color-wood);
}

.ww-wishlist-link--overlay {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  display: grid;
  width: 2.25rem;
  height: 2.25rem;
  place-items: center;
  padding: 0;
  border: 0;
  color: var(--ww-color-ink);
  background: var(--ww-color-paper);
  font-size: 1.25rem;
  line-height: 1;
  text-decoration: none;
}

.ww-wishlist-link--overlay:hover,
.ww-wishlist-link--overlay:focus-visible,
.ww-wishlist-link--overlay.is-saved {
  color: var(--ww-color-paper);
  background: var(--ww-color-ink);
}

.ww-product-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.75rem;
  padding-top: 0.85rem;
}

.ww-product-title,
.ww-product-price {
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.35;
  text-transform: none;
}

.ww-product-title a {
  text-decoration: none;
}

.ww-product-title a:hover,
.ww-product-title a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

.ww-product-price {
  color: var(--ww-color-ink);
  text-align: right;
  white-space: nowrap;
}

.ww-product-price del {
  color: var(--ww-color-muted);
  font-weight: 400;
}

.ww-product-price ins {
  color: var(--ww-color-wood);
  text-decoration: none;
}

.ww-product-actions {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 4;
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  margin: 0;
  padding: 0;
  opacity: 1;
  transform: none;
  transition: opacity 180ms ease, transform 180ms ease;
}

.ww-product-actions .button,
.ww-product-actions .added_to_cart {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  min-height: 2.75rem;
  padding: 0;
  margin: 0;
  border: 1px solid var(--ww-color-ink);
  color: var(--ww-color-paper);
  background: var(--ww-color-ink);
  background-image: url('assets/icons/cart-bag.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 0.8125rem auto;
  font-size: 0;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}

.ww-product-actions .added_to_cart {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  margin: 0;
  color: var(--ww-color-paper);
  background: var(--ww-color-ink);
}

.woocommerce ul.products li.product .ww-product-actions .button,
.woocommerce ul.products li.product .ww-product-actions .added_to_cart {
  margin: 0;
}

.is-sold-out .ww-product-image img {
  opacity: 0.64;
}

.ww-home-editorial {
  display: grid;
  margin-block: var(--ww-space-6);
  background: var(--ww-color-paper);
}

.ww-home-editorial__media {
  min-height: 25rem;
  background: var(--ww-color-sand);
}

.ww-home-editorial__content {
  display: grid;
  align-content: center;
  gap: 2rem;
  padding: clamp(2rem, 5vw, 5rem);
}

.ww-home-editorial__content .ww-kicker,
.ww-home-editorial__content .ww-section-title {
  margin: 0;
}

.ww-home-editorial__content .ww-kicker {
  margin-bottom: 0.75rem;
}

.ww-category-grid {
  display: grid;
  gap: 0.75rem;
}

.ww-category-card {
  position: relative;
  display: grid;
  min-height: 11rem;
  align-items: end;
  overflow: hidden;
  padding: 1rem;
  border: 0;
  color: var(--ww-color-paper);
  background: var(--ww-color-wood);
  text-decoration: none;
}

.ww-category-card::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(0, 0, 0, 0.66));
  content: '';
}

.ww-category-card__media {
  position: absolute;
  inset: 0;
}

.ww-category-card__media img {
  transition: transform 260ms ease;
}

.ww-category-card:hover .ww-category-card__media img,
.ww-category-card:focus-visible .ww-category-card__media img {
  transform: scale(1.04);
}

.ww-category-card__label,
.ww-category-card__arrow {
  position: relative;
  z-index: 1;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ww-category-card__arrow {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
}

.ww-home-maker {
  position: relative;
  display: grid;
  min-height: clamp(22rem, 35vw, 32rem);
  overflow: hidden;
  color: var(--ww-color-paper);
  background: var(--ww-color-ink);
}

.ww-home-maker__inner {
  max-width: min(100% - (var(--ww-gutter) * 2), 53rem);
  margin-inline: 0;
}

.ww-home-maker .ww-section-title {
  max-width: 13ch;
  margin: 0;
}

.ww-home-maker .ww-text-link {
  color: currentColor;
}

@media (min-width: 48rem) {
  .ww-home-hero__inner {
    grid-template-columns: minmax(0, 1.25fr) minmax(16rem, 0.75fr);
    align-items: end;
  }

  .ww-home-promo {
    grid-template-columns: minmax(0, 1.25fr) minmax(19rem, 0.75fr);
  }

  .ww-home-editorial {
    grid-template-columns: minmax(0, 1fr) minmax(23rem, 0.9fr);
  }

  .ww-category-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ww-category-card {
    min-height: 15rem;
  }
}

@media (min-width: 64rem) {
  .ww-product-grid,
  .woocommerce ul.products {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .ww-home-maker__inner {
    padding-left: clamp(0rem, 8vw, 8rem);
  }
}

@media (max-width: 47.9375rem) {
  .ww-home-hero__media::after,
  .ww-home-maker__media::after {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.15));
  }

  .ww-home-section__head {
    align-items: start;
  }

  .ww-product-actions {
    opacity: 1;
    transform: none;
  }

  .ww-home-editorial__media {
    min-height: 19rem;
  }
}

/* Mobile navigation is a viewport panel, not an in-flow dropdown. */
@media (max-width: 53.75rem) {
  html.ww-menu-open,
  html.ww-menu-open body {
    overflow: hidden;
    overscroll-behavior: none;
  }

  .ww-js .ww-site-header .ww-nav,
  body.home .ww-site-header .ww-nav {
    position: fixed;
    z-index: 40;
    top: 4.3125rem;
    right: 0;
    bottom: auto;
    left: 0;
    width: 100%;
    max-height: calc(100dvh - 4.3125rem);
    padding: 0.5rem var(--ww-gutter) max(1.5rem, env(safe-area-inset-bottom));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-bottom: 1px solid var(--ww-color-line);
    color: var(--ww-color-ink);
    background: var(--ww-color-paper);
    box-shadow: 0 1.25rem 2rem rgba(0, 0, 0, 0.15);
    -webkit-overflow-scrolling: touch;
  }

  .ww-js .ww-site-header .ww-nav:not(.is-open) {
    display: none;
  }

  .ww-js .ww-site-header .ww-nav.is-open {
    display: block;
  }

  .ww-menu-open body.home .ww-site-header .ww-nav a,
  .ww-menu-open .ww-site-header .ww-nav a {
    color: var(--ww-color-ink);
  }

  .ww-site-header .ww-nav__menu {
    width: 100%;
  }

  .ww-site-header .ww-nav a {
    min-height: 3.5rem;
    padding-inline: 0.25rem;
  }

  .woocommerce-account:not(.logged-in) .ww-page-shell > .woocommerce,
  .woocommerce-account:not(.logged-in) .woocommerce .u-columns,
  .woocommerce-account:not(.logged-in) .woocommerce .u-column1,
  .woocommerce-account:not(.logged-in) .woocommerce .u-column2 {
    display: block;
    float: none;
    width: 100%;
    max-width: none;
  }

  .woocommerce-account:not(.logged-in) .woocommerce .u-column2 {
    margin-top: 3rem;
  }

  .woocommerce-account:not(.logged-in) .woocommerce form.login,
  .woocommerce-account:not(.logged-in) .woocommerce form.register,
  .woocommerce-account:not(.logged-in) .woocommerce form.lost_reset_password,
  .woocommerce form.track_order {
    width: 100%;
    max-width: none;
    padding: 1.25rem;
  }

  .ww-footer-main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem 1.25rem;
  }

  .ww-footer-brand,
  .ww-footer-meta {
    grid-column: 1 / -1;
  }
}

/* Figma home composition */
body.home .ww-site-header {
  position: absolute;
  inset: 0 0 auto;
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, 0.28);
  background: transparent;
}

body.home .ww-site-header .ww-brand,
body.home .ww-site-header .ww-nav a,
body.home .ww-site-header .ww-header-actions a,
body.home .ww-site-header .ww-menu-toggle {
  color: #fff;
}

body.home .ww-site-header .ww-account-link {
  border-right-color: rgba(255, 255, 255, 0.3);
}

body.home .ww-site-header .ww-cart-count {
  color: #111;
  background: #fff;
}

body.home .ww-site-header .ww-brand {
  font-size: 2rem;
}

body.home .ww-site-footer {
  margin-top: 0;
}

.ww-figma-hero {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(12rem, 1fr);
  height: clamp(42rem, 51.4vw, 62rem);
  min-height: 0;
  color: #fff;
  background: #090806;
}

.ww-figma-hero__workshop {
  position: relative;
  min-width: 0;
  overflow: hidden;
}

.ww-figma-hero__workshop > img,
.ww-figma-hero__logs {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ww-figma-hero__workshop > img {
  object-position: 51% 50%;
}

.ww-figma-hero__logs {
  object-position: 50% 50%;
}

.ww-figma-hero__copy {
  position: absolute;
  left: clamp(2rem, 8vw, 10rem);
  bottom: 5.7rem;
  width: min(24rem, calc(100% - 4rem));
}

.ww-figma-hero__copy span {
  display: block;
  width: 7rem;
  height: 2px;
  margin-bottom: 3.5rem;
  background: currentColor;
}

.ww-figma-hero h1,
.ww-figma-promo h2,
.ww-figma-showcase h2,
.ww-figma-about h2,
.ww-figma-new h2,
.ww-figma-partners h2,
.ww-figma-review h2 {
  margin: 0;
  font-family: 'WW Display', 'PT Serif', Georgia, serif;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 0.98;
  text-transform: uppercase;
}

.ww-figma-hero h1 {
  max-width: 13ch;
  font-family: var(--ww-font-sans);
  font-size: clamp(2.3rem, 2.8vw, 3.35rem);
  font-weight: 400;
  letter-spacing: 0;
}

.ww-figma-promo {
  position: relative;
  margin-block: 6.25rem;
  overflow: hidden;
}

.ww-figma-promo > img {
  width: 100%;
  aspect-ratio: 3.11 / 1;
  object-fit: cover;
}

.ww-figma-promo__copy {
  position: absolute;
  top: 50%;
  left: clamp(2rem, 16%, 14rem);
  width: min(23rem, 37%);
  color: #fff;
  transform: translateY(-50%);
}

.ww-figma-promo h2 {
  margin-bottom: clamp(1rem, 2vw, 2rem);
  font-family: var(--ww-font-sans);
  font-size: clamp(1.4rem, 2vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.035em;
}

.ww-figma-promo .ww-button {
  border-color: #050505;
  color: #fff;
  background: #050505;
}

.ww-figma-showcase {
  display: grid;
  grid-template-columns: minmax(10rem, 0.72fr) minmax(0, 2.25fr);
  align-items: center;
  gap: clamp(3rem, 7vw, 8rem);
  padding-block: 0 8rem;
}

.ww-figma-showcase__intro {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-block: 1rem 3rem;
}

.ww-figma-showcase h2,
.ww-figma-about h2,
.ww-figma-new h2,
.ww-figma-partners h2,
.ww-figma-review h2 {
  font-size: clamp(1.6rem, 2.3vw, 2.75rem);
}

.ww-figma-showcase__intro p {
  max-width: 19rem;
  margin: 3rem 0 0;
  font-size: clamp(0.9rem, 1.15vw, 1.12rem);
  line-height: 1.3;
}

.ww-figma-showcase__rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  height: clamp(31rem, 46vw, 55rem);
  overflow: hidden;
}

.ww-figma-showcase__rail a {
  position: relative;
  display: block;
  min-width: 0;
  overflow: hidden;
  color: #fff;
}

.ww-figma-showcase__rail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 300ms ease;
}

.ww-figma-showcase__rail a:hover img,
.ww-figma-showcase__rail a:focus-visible img {
  transform: scale(1.025);
}

.ww-figma-showcase__rail span {
  position: absolute;
  inset: auto 1rem 1rem;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  opacity: 0;
  text-transform: uppercase;
  transition: opacity 160ms ease;
}

.ww-figma-showcase__rail a:hover span,
.ww-figma-showcase__rail a:focus-visible span {
  opacity: 1;
}

.ww-figma-about {
  padding-top: clamp(2rem, 4vw, 4rem);
  padding-bottom: clamp(2rem, 3vw, 3.5rem);
  color: var(--ww-color-ink);
  background: linear-gradient(to bottom, #fff 0 clamp(7rem, 10vw, 11rem), #000 clamp(7rem, 10vw, 11rem) 100%);
}

.ww-figma-about h2 {
  margin-bottom: clamp(2rem, 4vw, 4rem);
  text-align: center;
}

.ww-figma-about .ww-figma-about__media > img {
  width: min(calc(100% - (var(--ww-gutter) * 2)), var(--ww-container));
  aspect-ratio: 3.486 / 1;
  margin-inline: auto;
  object-fit: cover;
  object-position: center 48%;
}

.ww-figma-new {
  padding-block: 4rem;
  text-align: center;
  background: #f3dbc1;
}

.ww-figma-new h2 {
  margin-bottom: 2rem;
  font-size: 2rem;
}

.ww-figma-partners h2 {
  margin-bottom: clamp(2.5rem, 5vw, 5rem);
}

.ww-figma-new .ww-product-grid {
  text-align: left;
}

.ww-figma-new > .ww-container > .ww-button {
  min-height: 3.25rem;
  margin-top: 6.5rem;
}

.ww-figma-new .ww-product-image {
  aspect-ratio: 17 / 20;
}

.ww-figma-new .ww-product-title,
.ww-figma-new .ww-product-price {
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.3;
  text-transform: none;
}

.ww-figma-partners {
  padding-block: 12.125rem;
  text-align: center;
}

.ww-figma-partners__logos {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: center;
  gap: clamp(1.5rem, 4vw, 5rem);
}

.ww-figma-partners__logos img {
  width: 100%;
  height: clamp(3rem, 6vw, 6.5rem);
  object-fit: contain;
  filter: grayscale(1) contrast(1.25);
}

.ww-figma-process {
  padding-block: 0;
  background: #000;
}

.ww-figma-process img {
  width: min(calc(100% - (var(--ww-gutter) * 2)), var(--ww-container));
  aspect-ratio: 3.72 / 1;
  margin-inline: auto;
  object-fit: cover;
}

.ww-figma-review {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(12rem, 0.4fr);
  align-items: center;
  gap: clamp(3rem, 9vw, 10rem);
  padding-block: 6.1rem;
}

.ww-figma-review > div {
  display: grid;
  grid-template-columns: minmax(8rem, 0.5fr) minmax(0, 1fr);
  gap: 1.25rem clamp(2rem, 6vw, 7rem);
}

.ww-figma-review h2 {
  grid-column: 1 / -1;
  margin-bottom: 1.5rem;
}

.ww-figma-review p {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.45;
}

.ww-figma-review__author {
  font-size: 0.95rem !important;
}

.ww-figma-review > img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

body.home .ww-footer-newsletter {
  background-image: linear-gradient(rgba(22, 10, 2, 0.2), rgba(22, 10, 2, 0.2)), url('assets/images/figma/newsletter-wood.webp');
  background-position: center;
  background-size: cover;
}

body.home .ww-footer-newsletter__inner {
  padding-block: 4.15rem;
}

@media (max-width: 47.9375rem) {
  :root {
    --ww-gutter: 2rem;
  }

  body.home .ww-site-header {
    position: fixed;
    color: var(--ww-color-ink);
    border-bottom-color: var(--ww-color-line);
    background: var(--ww-color-paper);
  }

  body.home .ww-main {
    padding-top: 4.3125rem;
  }

  body.home .ww-site-header .ww-brand,
  body.home .ww-site-header .ww-header-actions a,
  body.home .ww-site-header .ww-menu-toggle {
    color: var(--ww-color-ink);
  }

  body.home .ww-site-header .ww-brand {
    font-size: 1.28rem;
  }

  body.home .ww-site-header .ww-cart-count {
    color: var(--ww-color-paper);
    background: var(--ww-color-ink);
  }

  body.home .ww-site-header .ww-nav {
    color: var(--ww-color-ink);
    background: var(--ww-color-paper);
  }

  body.home.ww-menu-open .ww-site-header .ww-nav a {
    color: var(--ww-color-ink);
  }

  .ww-figma-hero {
    grid-template-columns: 1fr;
    height: clamp(38rem, 167vw, 41rem);
  }

  .ww-figma-hero__logs {
    display: none;
  }

  .ww-figma-hero__copy {
    left: var(--ww-gutter);
    bottom: 3rem;
    width: min(17rem, calc(100% - 2rem));
  }

  .ww-figma-hero__copy span {
    width: 6rem;
    margin-bottom: 1.25rem;
  }

  .ww-figma-hero h1 {
    font-size: clamp(2rem, 9vw, 2.8rem);
  }

  .ww-figma-promo {
    width: 100%;
    margin-block: 3.5rem;
  }

  .ww-figma-promo > img {
    min-height: 17.625rem;
    aspect-ratio: auto;
    object-position: 25% center;
  }

  .ww-figma-promo__copy {
    left: 1.5rem;
    width: 48%;
  }

  .ww-figma-promo h2 {
    font-size: 1.45rem;
  }

  .ww-figma-showcase {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding-bottom: 3rem;
  }

  .ww-figma-showcase__intro {
    display: grid;
    grid-template-columns: 0.55fr 1fr;
    gap: 1.5rem;
    padding: 0;
  }

  .ww-figma-showcase__intro p {
    margin: 0;
  }

  .ww-figma-showcase__rail {
    width: calc(100% + var(--ww-gutter));
    height: 19rem;
    grid-template-columns: repeat(4, minmax(9.5rem, 1fr));
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
    scrollbar-color: var(--ww-color-ink) var(--ww-color-line);
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  .ww-figma-showcase__rail a {
    scroll-snap-align: start;
  }

  .ww-figma-about .ww-figma-about__media > img {
    width: 100%;
    min-height: 22rem;
    object-position: center;
  }

  .ww-figma-new .ww-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ww-figma-new {
    padding-block: 3rem;
  }

  .ww-figma-new h2 {
    margin-bottom: 2.5rem;
    font-size: 1.6rem;
  }

  .ww-figma-new > .ww-container > .ww-button {
    margin-top: 2rem;
  }

  .ww-figma-partners__logos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ww-figma-partners {
    padding-block: 4.5rem;
  }

  .ww-figma-partners__logos img:last-child {
    grid-column: 1 / -1;
    width: 50%;
    margin-inline: auto;
  }

  .ww-figma-process {
    padding-block: 2rem;
  }

  .ww-figma-process img {
    width: 100%;
    min-height: 16rem;
    object-position: center;
  }

  .ww-figma-review {
    grid-template-columns: minmax(0, 1.35fr) minmax(7rem, 0.65fr);
    gap: 1.5rem;
    padding-block: 4rem;
  }

  body.home .ww-footer-newsletter__inner {
    padding-block: 3.5rem;
  }

  .ww-figma-review > div {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .ww-figma-review h2 {
    margin-bottom: 1rem;
  }
}

@media (max-width: 30rem) {
  .ww-home-section__head {
    display: grid;
  }

  .ww-product-meta {
    grid-template-columns: 1fr;
    gap: 0.25rem;
    min-height: 6.8rem;
  }

  .ww-product-title {
    min-height: 4.75rem;
  }

  .ww-product-price {
    text-align: left;
  }
}

/* Front-page storefront hierarchy: shallow banner, new arrivals and category rows. */
.ww-storefront-banner {
  position: relative;
  display: grid;
  min-height: clamp(16rem, 27vw, 27rem);
  overflow: hidden;
  color: var(--ww-color-paper);
  background: #b98755;
}

.ww-storefront-banner__media {
  position: absolute;
  inset: 0;
}

.ww-storefront-banner__media::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(48, 27, 12, 0.54), rgba(48, 27, 12, 0.06) 70%);
  content: '';
}

.ww-storefront-banner__media img,
.ww-home-category-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ww-storefront-banner__inner {
  position: relative;
  z-index: 1;
  display: grid;
  align-items: center;
  padding-block: clamp(2rem, 5vw, 4.5rem);
}

.ww-storefront-banner__copy {
  display: grid;
  gap: 1rem;
  max-width: 23rem;
}

.ww-storefront-banner__copy .ww-kicker {
  margin: 0;
  color: currentColor;
}

.ww-storefront-banner__title {
  margin: 0;
  font-size: clamp(1.55rem, 3.2vw, 3.25rem);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.045em;
}

.ww-storefront-banner__copy .ww-button {
  justify-self: start;
}

.ww-home-product-section,
.ww-home-category-section {
  padding-block: clamp(3rem, 7vw, 6.5rem);
}

.ww-home-product-section--new {
  background: #f0d5b1;
}

.ww-home-product-section--category {
  border-top: 1px solid var(--ww-color-line);
  background: var(--ww-color-paper);
}

.ww-home-product-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.ww-home-product-section__title,
.ww-home-category-section__title {
  margin: 0;
  font-size: clamp(1.4rem, 2.6vw, 2.35rem);
  font-weight: 400;
  letter-spacing: -0.04em;
}

.ww-home-category-section {
  background: var(--ww-color-paper);
}

.ww-home-category-section__title {
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.ww-home-category-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.75rem, 2vw, 1.5rem);
}

.ww-home-category-card {
  display: grid;
  min-width: 0;
  gap: 0.8rem;
  color: var(--ww-color-ink);
  text-decoration: none;
}

.ww-home-category-card__media {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--ww-color-sand);
}

.ww-home-category-card__media img {
  transition: transform 260ms ease;
}

.ww-home-category-card:hover .ww-home-category-card__media img,
.ww-home-category-card:focus-visible .ww-home-category-card__media img {
  transform: scale(1.035);
}

.ww-home-category-card__label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ww-shop-design__hero {
  min-height: 45.0625rem;
}

.ww-shop-design__hero .ww-storefront-banner__media::after {
  background: linear-gradient(90deg, rgba(44, 25, 12, 0.24), rgba(44, 25, 12, 0.02) 72%);
}

.ww-shop-design__hero .ww-storefront-banner__media img {
  object-position: center;
}

@media (min-width: 48rem) {
  .ww-shop-design__hero .ww-storefront-banner__inner {
    align-items: start;
    padding-block: 0;
  }

  .ww-shop-design__hero .ww-storefront-banner__copy {
    max-width: 33rem;
    margin: 10.5rem 0 0 22.5rem;
    gap: 0;
  }

  .ww-shop-design__hero .ww-storefront-banner__copy .ww-kicker,
  .ww-shop-design__hero .ww-storefront-banner__copy .ww-button {
    display: none;
  }

  .ww-shop-design__hero .ww-storefront-banner__title {
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.04;
    text-transform: uppercase;
  }
}

.ww-shop-design__section > .ww-container {
  width: min(100% - (var(--ww-gutter) * 2), 100rem);
}

.ww-shop-design__section {
  padding-block: 6.7rem;
}

.ww-shop-design__section .ww-home-product-section__head {
  justify-content: center;
  margin-bottom: 1.5rem;
  text-align: center;
}

.ww-shop-design__section .ww-product-image {
  aspect-ratio: 17 / 20;
}

.ww-shop-design__section .ww-home-product-section__title {
  font-family: 'WW Display', 'PT Serif', Georgia, serif;
  font-weight: 700;
}

.ww-shop-design__category-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ww-shop-design__category-link {
  width: max-content;
  margin: clamp(2rem, 4vw, 4rem) auto 0;
}

.ww-shop-design__recommendations {
  background: #fff;
}

.ww-shop-design__section.ww-home-product-section--new {
  background: #fff;
}

.ww-category-catalog {
  padding-block: 2rem 5rem;
}

.ww-category-catalog h1 {
  margin: 0 0 3.25rem;
  font-family: 'WW Display', 'PT Serif', Georgia, serif;
  font-size: clamp(2rem, 3vw, 3rem);
  font-weight: 700;
  text-align: center;
}

.ww-category-catalog__grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  row-gap: 4rem;
}

.ww-category-catalog__grid .ww-product-card:nth-child(-n + 3) {
  grid-column: span 1;
}

.ww-category-catalog__pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  margin-top: 5rem;
  font-size: 1.5rem;
}

.ww-category-catalog__pagination a {
  color: var(--ww-color-ink);
  text-decoration: none;
}

.post-type-archive-product .ww-site-footer {
  margin-top: 0;
}

.post-type-archive-product .ww-footer-newsletter {
  background-image: linear-gradient(rgba(22, 10, 2, 0.2), rgba(22, 10, 2, 0.2)), url('assets/images/figma/newsletter-wood.webp');
  background-position: center;
  background-size: cover;
}

.post-type-archive-product .ww-footer-newsletter__inner {
  padding-block: 2.15rem;
}

@media (max-width: 90rem) {
  .ww-shop-design__section {
    padding-block: 3rem;
  }

  .ww-shop-design__section .ww-home-product-section__head {
    margin-bottom: 1.75rem;
  }

  .ww-shop-design__section .ww-product-image {
    aspect-ratio: 1 / 1;
  }

  .ww-shop-design__category-link {
    margin-top: 2rem;
  }
}

@media (max-width: 47.9375rem) {
  .ww-storefront-banner__media::after {
    background: linear-gradient(90deg, rgba(48, 27, 12, 0.6), rgba(48, 27, 12, 0.16));
  }

  .ww-home-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ww-product-title,
  .ww-product-price {
    font-size: 0.875rem;
  }

  .ww-shop-design__hero {
    min-height: 31rem;
  }

  .ww-shop-design__hero .ww-storefront-banner__media img {
    object-position: 58% center;
  }

  .ww-shop-design__hero .ww-storefront-banner__copy {
    align-self: end;
    margin-bottom: 2rem;
  }

  .ww-shop-design__category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ww-shop-design__category-grid .ww-product-card:last-child {
    grid-column: 1 / -1;
    width: calc(50% - 0.375rem);
  }

  .ww-shop-design__category-link {
    width: 100%;
  }

  .ww-category-catalog {
    padding-block: 2.5rem 4rem;
  }

  .ww-category-catalog h1 {
    margin-bottom: 2rem;
  }

  .ww-category-catalog__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.5rem 0.5rem;
  }

  .ww-category-catalog__pagination {
    margin-top: 3.5rem;
  }
}

@media (max-width: 30rem) {
  .ww-home-product-section__head {
    display: grid;
  }
}

/* Task 4: commerce, account and informational routes. */
.ww-route-shell,
.ww-route-results {
  padding-block: clamp(3rem, 7vw, 6.5rem);
}

.ww-route-shell--page,
.ww-route-shell--tracking {
  max-width: min(100% - (var(--ww-gutter) * 2), 62rem);
  margin-inline: auto;
}

.ww-route-head {
  max-width: 46rem;
  padding-bottom: clamp(1.75rem, 4vw, 3rem);
  border-bottom: 1px solid var(--ww-color-line);
}

.ww-route-head .ww-kicker,
.ww-route-head .ww-section-title,
.ww-route-head .ww-route-query {
  margin: 0;
}

.ww-route-head .ww-kicker {
  margin-bottom: 0.85rem;
}

.ww-route-query,
.ww-route-summary {
  margin: 1rem 0 0;
  color: var(--ww-color-muted);
  font-size: 0.75rem;
  line-height: 1.45;
}

.ww-route-prose {
  max-width: 40rem;
  margin-top: clamp(2rem, 4vw, 3.5rem);
}

.ww-route-prose h2,
.ww-route-prose h3 {
  margin: 2.5rem 0 0.75rem;
  color: var(--ww-color-ink);
  font-family: var(--ww-font-display);
  font-weight: 400;
  letter-spacing: -0.04em;
}

.ww-route-prose h2 {
  font-size: clamp(1.45rem, 2.5vw, 2.2rem);
}

.ww-route-prose h3 {
  font-size: 1.15rem;
}

.ww-route-prose ul,
.ww-route-prose ol {
  padding-left: 1.2rem;
}

.ww-route-prose a:not(.button) {
  color: var(--ww-color-ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.24em;
}

.ww-route-shell--wishlist {
  max-width: none;
}

.ww-route-head--split {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1.5rem;
  max-width: none;
}

.ww-route-head--split .ww-route-summary {
  margin-bottom: 0.2rem;
  text-align: right;
}

.ww-wishlist-grid {
  margin-top: clamp(2rem, 4vw, 3.5rem);
}

.ww-route-results {
  padding-top: 0;
  padding-bottom: clamp(4rem, 8vw, 7rem);
}

.ww-route-results .ww-product-grid {
  margin-top: 0;
}

.ww-route-results .ww-product-card {
  padding: 1.25rem 0;
  border-top: 1px solid var(--ww-color-line);
}

.ww-route-results .ww-product-card:last-child {
  border-bottom: 1px solid var(--ww-color-line);
}

.ww-route-results .ww-product-meta {
  padding-top: 0;
}

.ww-route-results .ww-prose {
  margin-top: 0.75rem;
  font-size: 0.875rem;
}

.ww-empty-state {
  display: grid;
  justify-items: center;
  max-width: min(100% - (var(--ww-gutter) * 2), 50rem);
  min-height: clamp(28rem, 54vh, 42rem);
  margin-inline: auto;
  padding-block: clamp(4rem, 10vw, 8rem);
  text-align: center;
}

.ww-empty-state .ww-section-title {
  max-width: 12ch;
}

.ww-empty-state .ww-lede {
  margin-top: 1.25rem;
}

.ww-empty-state > .ww-button {
  margin-top: 1.75rem;
}

.ww-empty-state .ww-inquiry-form {
  width: min(100%, 40rem);
  margin-top: clamp(3rem, 6vw, 5rem);
  text-align: left;
}

.ww-not-found-code {
  order: -1;
  margin: 0 0 0.4rem;
  font-family: var(--ww-font-display);
  font-size: clamp(4.5rem, 12vw, 9rem);
  font-weight: 400;
  letter-spacing: -0.1em;
  line-height: 0.72;
}

.ww-empty-search {
  max-width: 40rem;
  padding: clamp(2rem, 5vw, 4rem) 0 0;
  color: var(--ww-color-muted);
}

.ww-empty-search .ww-lede {
  color: var(--ww-color-ink);
}

/* WooCommerce owns the markup; these rules only arrange its classic no-JS states. */
.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce,
.woocommerce-account .woocommerce {
  width: min(100% - (var(--ww-gutter) * 2), var(--ww-container));
  max-width: 74rem;
  margin-inline: auto;
  padding-block: clamp(3rem, 6vw, 5.5rem) clamp(4rem, 8vw, 7rem);
}

.woocommerce .woocommerce-notices-wrapper:empty {
  display: none;
}

.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error {
  margin: 0 0 1.5rem;
  padding: 1rem 1.2rem;
  border: 1px solid var(--ww-color-ink);
  border-top: 1px solid var(--ww-color-ink);
  border-radius: 0;
  color: var(--ww-color-ink);
  background: transparent;
  box-shadow: none;
  font-size: 0.8125rem;
}

.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before,
.woocommerce .woocommerce-error::before {
  color: var(--ww-color-ink);
}

.woocommerce table.shop_table {
  border: 0;
  border-collapse: collapse;
  border-radius: 0;
  color: var(--ww-color-ink);
  font-size: 0.8125rem;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
  padding: 1rem 0.75rem;
  border: 0;
  border-bottom: 1px solid var(--ww-color-line);
  vertical-align: middle;
}

.woocommerce table.shop_table th {
  color: var(--ww-color-muted);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.woocommerce table.shop_table a {
  text-underline-offset: 0.22em;
}

.woocommerce-cart-form,
.woocommerce-cart .cart-collaterals,
.woocommerce-checkout form.checkout,
.woocommerce-account .woocommerce-MyAccount-content {
  min-width: 0;
}

.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce-checkout #order_review,
.woocommerce .woocommerce-form-login,
.woocommerce .woocommerce-form-register,
.woocommerce form.track_order {
  margin-top: 2rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--ww-color-line);
  border-radius: 0;
  background: var(--ww-color-surface);
}

.woocommerce-cart .cart-collaterals .cart_totals {
  width: min(100%, 28rem);
  margin-left: auto;
}

.woocommerce-cart .cart-collaterals .cart_totals h2,
.woocommerce-checkout #order_review_heading,
.woocommerce-account .woocommerce-MyAccount-content h2 {
  margin: 0 0 1.25rem;
  font-family: var(--ww-font-display);
  font-size: clamp(1.5rem, 2.5vw, 2.15rem);
  font-weight: 400;
  letter-spacing: -0.05em;
}

.woocommerce form .form-row {
  margin-bottom: 1.1rem;
}

.woocommerce form .form-row label,
.woocommerce form .form-row .required {
  color: var(--ww-color-muted);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  width: 100%;
  padding-inline: 0;
  color: var(--ww-color-ink);
}

.woocommerce form .form-row textarea {
  padding-top: 0.75rem;
}

.woocommerce .select2-container--default .select2-selection--single {
  height: 2.9rem;
  border: 0;
  border-bottom: 1px solid currentColor;
  border-radius: 0;
  background: transparent;
}

.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding-left: 0;
  color: var(--ww-color-ink);
  line-height: 2.9rem;
}

.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 2.9rem;
}

.woocommerce .woocommerce-form__label-for-checkbox,
.woocommerce .woocommerce-terms-and-conditions-wrapper {
  color: var(--ww-color-muted);
  font-size: 0.8125rem;
}

.woocommerce-checkout #payment {
  border-radius: 0;
  background: var(--ww-color-sand);
}

.woocommerce-checkout #payment ul.payment_methods {
  border-bottom-color: var(--ww-color-line);
}

.woocommerce-checkout #payment div.payment_box {
  color: var(--ww-color-ink);
  background: var(--ww-color-surface);
}

.woocommerce-checkout #payment div.payment_box::before {
  border-bottom-color: var(--ww-color-surface);
}

.woocommerce form.track_order {
  max-width: 34rem;
  margin-top: 2rem;
}

.woocommerce form.track_order .form-row-first,
.woocommerce form.track_order .form-row-last {
  float: none;
  width: 100%;
}

.woocommerce-account .woocommerce {
  max-width: 76rem;
}

.woocommerce-account .woocommerce-MyAccount-navigation {
  margin-bottom: 2rem;
  border-top: 1px solid var(--ww-color-line);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
  display: grid;
  padding: 0;
  margin: 0;
  list-style: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
  border-bottom: 1px solid var(--ww-color-line);
}

.woocommerce-account .woocommerce-MyAccount-navigation a {
  display: flex;
  align-items: center;
  min-height: 3rem;
  padding: 0.65rem 0;
  color: var(--ww-color-muted);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
}

.woocommerce-account .woocommerce-MyAccount-navigation .is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation a:focus-visible {
  color: var(--ww-color-ink);
}

.woocommerce-account .woocommerce-MyAccount-content > :first-child {
  margin-top: 0;
}

.woocommerce-account .woocommerce-MyAccount-content > :last-child {
  margin-bottom: 0;
}

.woocommerce-account .woocommerce-Address,
.woocommerce-account .woocommerce-EditAccountForm,
.woocommerce-account .woocommerce-EditAddressForm,
.woocommerce-account .woocommerce-orders-table {
  max-width: 50rem;
}

@media (min-width: 48rem) {
  .woocommerce-cart .woocommerce-cart-form {
    width: min(100%, 50rem);
  }

  .woocommerce-checkout form.checkout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.72fr);
    align-items: start;
    gap: clamp(2rem, 5vw, 5rem);
    max-width: none;
  }

  .woocommerce-checkout #order_review_heading {
    grid-column: 2;
    grid-row: 1;
  }

  .woocommerce-checkout #order_review {
    grid-column: 2;
    grid-row: 2;
    margin-top: 0;
  }

  body.logged-in.woocommerce-account .woocommerce {
    display: grid;
    grid-template-columns: minmax(11rem, 0.32fr) minmax(0, 1fr);
    gap: clamp(2rem, 6vw, 6rem);
  }

  body.logged-in.woocommerce-account .woocommerce-notices-wrapper {
    grid-column: 1 / -1;
    margin-bottom: -1rem;
  }

  body.logged-in.woocommerce-account .woocommerce-MyAccount-navigation {
    margin: 0;
  }

  body:not(.logged-in).woocommerce-account #customer_login {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(2rem, 6vw, 5rem);
    width: 100%;
  }

  body:not(.logged-in).woocommerce-account #customer_login::before,
  body:not(.logged-in).woocommerce-account #customer_login::after {
    display: none;
    content: none;
  }

  body:not(.logged-in).woocommerce-account #customer_login > .u-column1,
  body:not(.logged-in).woocommerce-account #customer_login > .u-column2 {
    float: none;
    width: 100%;
  }

  body:not(.logged-in).woocommerce-account form.login,
  body:not(.logged-in).woocommerce-account form.register {
    width: 100%;
    max-width: none;
    min-height: 100%;
  }

  body:not(.logged-in).woocommerce-account form.lost_reset_password {
    width: min(100%, 42rem);
  }
}

@media (max-width: 47.9375rem) {
  .ww-route-head--split {
    display: grid;
    align-items: start;
  }

  .ww-route-head--split .ww-route-summary {
    margin: 0;
    text-align: left;
  }

  .woocommerce table.shop_table_responsive tr,
  .woocommerce-page table.shop_table_responsive tr {
    display: block;
    padding-block: 0.65rem;
    border-bottom: 1px solid var(--ww-color-line);
  }

  .woocommerce table.shop_table_responsive tr td,
  .woocommerce-page table.shop_table_responsive tr td {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.55rem 0;
    border: 0;
    text-align: right;
  }

  .woocommerce table.shop_table_responsive tr td::before,
  .woocommerce-page table.shop_table_responsive tr td::before {
    color: var(--ww-color-muted);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-align: left;
    text-transform: uppercase;
  }

.woocommerce-cart .cart-collaterals .cart_totals {
    width: 100%;
  }
}

@media (max-width: 53.75rem) {
  body:not(.logged-in).woocommerce-account .ww-social-login-shell {
    display: none;
  }

  .woocommerce-account:not(.logged-in) .woocommerce .u-columns,
  .woocommerce-account:not(.logged-in) .woocommerce .u-column1,
  .woocommerce-account:not(.logged-in) .woocommerce .u-column2 {
    display: block;
    float: none;
    width: 100%;
  }

  .woocommerce-account:not(.logged-in) .woocommerce .u-column2 {
    margin-top: 3rem;
  }

  .ww-footer-main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ww-footer-brand,
  .ww-footer-meta {
    grid-column: 1 / -1;
  }
}

@media (max-width: 53.75rem) {
  .ww-empty-state {
    min-height: 0;
    padding-block: 3.5rem 4.5rem;
  }

  .ww-empty-state--not-found {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .ww-empty-state--not-found .ww-empty-state__dog {
    width: min(70vw, 16rem);
  }

  .ww-empty-state--wishlist .ww-section-title,
  .ww-empty-state--cart .ww-section-title {
    font-size: clamp(2rem, 10vw, 3rem);
  }

  .ww-contact-grid,
  .ww-about-story {
    grid-template-columns: 1fr;
  }
}

.ww-wishlist-link--overlay,
.woocommerce .show-password-input {
  width: 2.75rem;
  height: 2.75rem;
}

/* Product detail fidelity: real Figma photography, stepper controls and a stable mobile hierarchy. */
.ww-figma-product-gallery {
  display: grid;
  gap: 0.75rem;
}

.ww-figma-product-gallery__stage {
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--ww-color-surface);
}

.ww-figma-product-gallery__stage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ww-figma-product-gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
}

.ww-figma-product-gallery__thumb {
  min-width: 0;
  padding: 0;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  border: 1px solid transparent;
  border-radius: 0;
  background: var(--ww-color-surface);
}

.ww-figma-product-gallery__thumb[aria-pressed="true"] {
  border-color: var(--ww-color-ink);
}

.ww-figma-product-gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ww-product-detail__purchase-panel > .product_title { order: 1; }
.ww-product-detail__purchase-panel > .woocommerce-product-rating { order: 2; }
.ww-product-detail__purchase-panel > .price { order: 3; }
.ww-product-detail__purchase-panel > .ww-product-delivery { order: 4; }
.ww-product-detail__purchase-panel > form.cart { order: 5; }
.ww-product-detail__purchase-panel > .woocommerce-product-details__short-description { order: 6; }
.ww-product-detail__purchase-panel > .product_meta { order: 7; }

.ww-product-detail__purchase-panel > .product_meta {
  display: none;
}

.ww-about-story__image {
  grid-column: 1 / -1;
  width: 100%;
  min-height: clamp(20rem, 48vw, 44rem);
  object-fit: cover;
}

.ww-about-manifesto {
  display: grid;
  justify-items: center;
  gap: 4.1875rem;
  max-width: 76rem;
  margin-inline: auto;
  text-align: center;
}

.ww-about-page {
  width: min(100% - (var(--ww-gutter) * 2), 100rem);
  max-width: none;
  padding-bottom: 22.0625rem;
}

.ww-about-manifesto section {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 0.25rem;
  width: 100%;
}

.ww-about-manifesto section:nth-child(1) {
  min-height: 11.0625rem;
}

.ww-about-manifesto section:nth-child(2) {
  min-height: 4.375rem;
}

.ww-about-manifesto section:nth-child(3) {
  min-height: 13.6875rem;
}

.ww-about-manifesto h1,
.ww-about-manifesto h2,
.ww-about-craft-title {
  margin: 0;
  font-family: 'WW Display', 'PT Serif', Georgia, serif;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
  text-transform: uppercase;
}

.ww-about-manifesto h1 {
  font-size: 1.5rem;
}

.ww-about-manifesto h2,
.ww-about-craft-title {
  font-size: 1.5rem;
}

.ww-about-manifesto p {
  max-width: 70rem;
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
}

.ww-about-craft-title {
  margin: 4.3125rem 0 3.6875rem;
  text-align: center;
}

.ww-about-craft-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 1.25rem;
  row-gap: 6.75rem;
}

.ww-about-craft-grid figure {
  margin: 0;
}

.ww-about-craft-grid img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.ww-about-craft-grid figcaption {
  padding-top: 0.75rem;
  font-size: 0.75rem;
  text-align: center;
  text-transform: uppercase;
}

.ww-route-about .ww-site-footer,
.ww-route-contacts .ww-site-footer {
  min-height: 23.5rem;
}

.ww-route-contacts .ww-site-footer {
  margin-top: 0;
}

@media (max-width: 53.75rem) {
  .ww-about-page {
    padding-bottom: 5rem;
  }

  .ww-about-manifesto {
    gap: 2.5rem;
  }

  .ww-about-manifesto section:nth-child(1),
  .ww-about-manifesto section:nth-child(2),
  .ww-about-manifesto section:nth-child(3) {
    min-height: 0;
  }

  .ww-about-manifesto h1,
  .ww-about-manifesto h2,
  .ww-about-craft-title {
    font-size: clamp(1.75rem, 8vw, 2.5rem);
  }

  .ww-about-craft-title {
    margin: 4rem 0 2rem;
  }

  .ww-about-craft-grid {
    grid-template-columns: 1fr;
    row-gap: 2.5rem;
  }

  .ww-contact-page {
    padding-top: 3.5rem;
  }

  .ww-contact-head {
    margin-top: 3rem;
  }

  .ww-contact-head h1 {
    font-size: 2.25rem;
  }

  .ww-contact-head p {
    margin-top: 2rem;
    font-size: 1.5rem;
  }

  .ww-contact-page .ww-contact-grid h2 {
    margin-bottom: 1.25rem;
    font-size: 1.75rem;
  }

  .ww-contact-page .ww-contact-grid p,
  .ww-contact-page .ww-contact-grid a {
    font-size: 1.125rem;
  }

  .ww-route-about .ww-site-footer,
  .ww-route-contacts .ww-site-footer {
    min-height: 0;
  }
}

.ww-contact-grid__value {
  color: var(--ww-color-muted);
  line-height: 1.6;
}

/* Final reference geometry for informational and empty-state routes. */
.ww-route-shell--page.ww-contact-page {
  width: min(100% - (var(--ww-gutter) * 2), 100rem);
  max-width: none;
  padding-top: 4.5rem;
  padding-bottom: 10.25rem;
}

.ww-route-shell--page.ww-contact-page .ww-contact-back {
  position: relative;
  top: 0.875rem;
}

.ww-contact-page .ww-contact-grid .ww-contact-grid__value {
  color: var(--ww-color-ink);
}

.ww-wishlist-filled .ww-route-shell--wishlist {
  width: min(100% - (var(--ww-gutter) * 2), 100rem);
  min-height: 87.1875rem;
  padding-top: 4.5rem;
  padding-bottom: 0;
}

.ww-wishlist-back {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  gap: 1rem;
  color: var(--ww-color-ink);
  font-size: 1.75rem;
  text-decoration: none;
}

.ww-wishlist-back span {
  font-size: 0.875rem;
}

.ww-wishlist-title {
  margin: 3.1875rem 0 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
}

.ww-wishlist-filled .ww-wishlist-grid {
  margin-top: 1.5625rem;
}

.ww-wishlist-filled .ww-wishlist-grid .ww-product-image {
  height: 28.375rem;
  aspect-ratio: auto;
}

.ww-wishlist-filled .ww-wishlist-grid .ww-product-meta {
  display: block;
  padding-top: 0.875rem;
}

.ww-wishlist-filled .ww-wishlist-grid .ww-product-title {
  min-height: 3.75rem;
  margin: 0;
  font-size: 1.375rem;
  line-height: 1.35;
}

.ww-wishlist-filled .ww-wishlist-grid .ww-product-price {
  display: block;
  margin-top: 0.35rem;
  color: var(--ww-color-muted);
  font-size: 1.75rem;
  text-align: left;
}

.ww-wishlist-filled .ww-site-footer {
  min-height: 23.5625rem;
  margin-top: 0;
}

.ww-wishlist-empty .ww-empty-state--wishlist {
  display: block;
  width: min(100% - (var(--ww-gutter) * 2), 100rem);
  height: 56.875rem;
  min-height: 0;
  padding-block: 0;
}

.ww-wishlist-empty .ww-empty-state--wishlist .ww-empty-state__back {
  top: 4.5rem;
}

.ww-wishlist-empty .ww-empty-state--wishlist .ww-empty-state__dog {
  position: absolute;
  top: 4.8125rem;
  left: 50%;
  width: 29rem;
  transform: translateX(-50%);
}

.ww-wishlist-empty .ww-empty-state--wishlist .ww-section-title {
  position: absolute;
  top: 36.25rem;
  right: 0;
  left: 0;
  margin: 0;
  font-family: 'WW Display', 'PT Serif', Georgia, serif;
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
  text-transform: uppercase;
}

.ww-wishlist-empty .ww-empty-state--wishlist .ww-lede {
  position: absolute;
  top: 40.875rem;
  right: 0;
  left: 0;
  max-width: 62rem;
  margin: 0 auto;
  font-size: 1.75rem;
  line-height: 1.35;
}

.ww-wishlist-empty .ww-site-footer {
  min-height: 23.5rem;
}

.ww-empty-state.ww-empty-state--not-found {
  width: min(68.54vw, 82.25rem);
  max-width: 82.25rem;
  min-height: 52.875rem;
  padding-block: 0;
  align-items: start;
}

.ww-route-404 .ww-empty-state--not-found .ww-empty-state__dog {
  justify-self: start;
  width: 37.875rem;
  margin-top: 6.3125rem;
  transform: translateX(-6.75rem);
}

.ww-route-404 .ww-empty-state--not-found .ww-empty-state__copy {
  align-self: start;
  margin-top: 9.0625rem;
  transform: translateX(-7.1875rem);
}

.ww-route-404 .ww-not-found-code {
  margin-bottom: 2.75rem;
  font-family: 'WW Display', 'PT Serif', Georgia, serif;
  font-size: 13.75rem;
  letter-spacing: 0.01em;
  line-height: 0.75;
  font-weight: 700;
}

.ww-route-404 .ww-empty-state--not-found .ww-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18.75rem;
  min-height: 5.125rem;
  margin-top: 2.375rem;
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.ww-route-404 .ww-site-footer {
  min-height: 23.5rem;
}

.ww-empty-state.ww-empty-state--wishlist {
  width: min(100% - (var(--ww-gutter) * 2), 100rem);
  max-width: none;
}

.ww-empty-state.ww-empty-state--wishlist .ww-section-title {
  max-width: none;
  font-size: clamp(2rem, 2.1vw, 2.5rem);
}

@media (max-width: 53.75rem) {
  .ww-route-shell--page.ww-contact-page {
    padding-top: 3.5rem;
    padding-bottom: 4.5rem;
  }

  .ww-route-shell--page.ww-contact-page .ww-contact-back {
    top: 0;
  }

  .ww-wishlist-filled .ww-route-shell--wishlist {
    min-height: 0;
    padding-top: 3.5rem;
    padding-bottom: 5rem;
  }

  .ww-wishlist-title {
    margin-top: 2rem;
    font-size: 1.25rem;
  }

  .ww-wishlist-filled .ww-wishlist-grid {
    margin-top: 2rem;
  }

  .ww-wishlist-filled .ww-wishlist-grid .ww-product-image {
    height: auto;
    aspect-ratio: 4 / 5;
  }

  .ww-wishlist-filled .ww-wishlist-grid .ww-product-title {
    min-height: 0;
    font-size: 1rem;
  }

  .ww-wishlist-filled .ww-wishlist-grid .ww-product-price {
    font-size: 1rem;
  }

  .ww-wishlist-filled .ww-site-footer {
    min-height: 0;
  }

  .ww-wishlist-empty .ww-empty-state--wishlist {
    display: grid;
    height: auto;
    min-height: 0;
    padding-block: 3.5rem 4.5rem;
  }

  .ww-wishlist-empty .ww-empty-state--wishlist .ww-empty-state__back,
  .ww-wishlist-empty .ww-empty-state--wishlist .ww-empty-state__dog,
  .ww-wishlist-empty .ww-empty-state--wishlist .ww-section-title,
  .ww-wishlist-empty .ww-empty-state--wishlist .ww-lede {
    position: static;
    transform: none;
  }

  .ww-wishlist-empty .ww-empty-state--wishlist .ww-empty-state__dog {
    width: min(78vw, 18rem);
    margin-inline: auto;
  }

  .ww-wishlist-empty .ww-empty-state--wishlist .ww-section-title {
    margin-top: 2rem;
    font-size: clamp(2rem, 9vw, 2.5rem);
  }

  .ww-wishlist-empty .ww-empty-state--wishlist .ww-lede {
    margin-top: 1.25rem;
    font-size: 1.125rem;
  }

  .ww-wishlist-empty .ww-site-footer {
    min-height: 0;
  }

  .ww-empty-state.ww-empty-state--not-found {
    width: min(100% - (var(--ww-gutter) * 2), 50rem);
    min-height: 0;
    padding-block: 3.5rem 4.5rem;
  }

  .ww-route-404 .ww-empty-state--not-found .ww-empty-state__dog {
    justify-self: center;
    width: min(70vw, 16rem);
    margin-top: 0;
    transform: none;
  }

  .ww-route-404 .ww-empty-state--not-found .ww-empty-state__copy {
    margin-top: 0;
    transform: none;
  }

  .ww-route-404 .ww-not-found-code {
    margin-bottom: 1rem;
    font-size: clamp(4rem, 22vw, 6rem);
  }

  .ww-route-404 .ww-empty-state--not-found .ww-button {
    width: 100%;
    min-height: 3.25rem;
    font-size: 0.75rem;
  }

  .ww-route-404 .ww-site-footer {
    min-height: 0;
  }

  .ww-empty-state.ww-empty-state--wishlist .ww-section-title {
    font-size: clamp(2rem, 9vw, 2.5rem);
  }
}

/* Account screens follow the separate login/registration frames from Figma. */
.ww-auth-route {
  width: min(100% - (var(--ww-gutter) * 2), 100rem);
  padding-block: 6rem 16.25rem;
}

.woocommerce-account .ww-auth-route > .woocommerce {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

body.woocommerce-account .ww-site-footer {
  margin-top: 0;
}

body:not(.logged-in).woocommerce-account .ww-site-footer {
  min-height: 23.5rem;
}

.ww-auth-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 40%));
  justify-content: space-between;
  gap: 20%;
}

body:not(.logged-in).woocommerce-account #customer_login.ww-auth-grid {
  grid-template-columns: repeat(2, minmax(0, 40%));
  gap: 20%;
}

.ww-auth-grid::after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--ww-color-ink);
  content: '';
}

.ww-auth-panel > h1,
.ww-auth-panel > h2,
.ww-auth-register > h1 {
  margin: 0 0 3.75rem;
  font-family: 'WW Display', 'PT Serif', Georgia, serif;
  font-size: clamp(2rem, 2.2vw, 2.2rem);
  font-weight: 700;
  line-height: 1;
}

.woocommerce-account .ww-auth-form {
  width: 100%;
  max-width: none;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

body.woocommerce-account form.ww-auth-form.woocommerce-form-login,
body.woocommerce-account form.ww-auth-form.woocommerce-form-register {
  width: 100%;
  max-width: none;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

body.woocommerce-account form.ww-auth-form input.input-text {
  width: 100%;
  height: 5rem;
  padding: 0.75rem 1.25rem;
  border: 0;
  border-radius: 0;
  background: #e2e2e2;
}

body.woocommerce-account form.ww-auth-form input.input-text::placeholder {
  color: #7b5e50;
  opacity: 1;
}

.woocommerce-account .ww-auth-form .form-row {
  margin: 0;
  padding: 0;
}

body.woocommerce-account form.ww-auth-form .form-row label:not(.woocommerce-form__label-for-checkbox) {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--ww-color-ink);
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.woocommerce-account .ww-auth-form input.input-text {
  width: 100%;
  height: clamp(3.75rem, 4.2vw, 5rem);
  padding: 0.75rem 1.25rem;
  border: 0;
  border-radius: 0;
  background: #e7e7e7;
}

.ww-auth-form__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 2.5rem;
}

.woocommerce-account .ww-auth-form__actions .button,
.woocommerce-account .ww-auth-register__submit .button,
.ww-auth-create {
  min-width: clamp(12rem, 16vw, 18rem);
  min-height: clamp(3.5rem, 4vw, 4.75rem);
  border-radius: 0;
  color: #fff;
  background: #000;
}

.ww-auth-forgot,
.ww-auth-back,
.ww-auth-guest {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  text-underline-offset: 0.25rem;
}

.ww-auth-guest {
  margin-top: 1.5rem;
  color: var(--ww-color-ink);
  font-size: 0.875rem;
}

.ww-auth-panel--join {
  display: grid;
  align-content: start;
  justify-items: center;
  padding-top: 3.5rem;
  text-align: center;
}

.ww-auth-panel--join > h2 {
  margin-bottom: 2rem;
}

.ww-auth-panel--join > p {
  max-width: 40rem;
  margin: 0 0 1.8125rem;
  font-size: 1.25rem;
}

.ww-auth-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 2.5rem;
}

.ww-auth-social button {
  width: 4rem;
  height: 4rem;
  min-height: 4rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: not-allowed;
  opacity: 1;
}

.ww-auth-social img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ww-auth-panel--join .ww-auth-social-label {
  margin: 2.25rem 0 0;
  font-size: 1.25rem;
}

.ww-auth-panel--join .ww-auth-social {
  margin-top: 1.5rem;
}

.woocommerce-lost-password .ww-auth-route {
  height: 81.4375rem;
  padding: 0;
}

.woocommerce-lost-password .ww-auth-route > .woocommerce {
  height: 100%;
}

.ww-lost-password {
  width: min(100%, 40rem);
  margin-inline: auto;
  padding-top: 3.75rem;
  text-align: center;
}

.ww-lost-password h1 {
  margin: 0;
  font-family: 'WW Display', 'PT Serif', Georgia, serif;
  font-size: 2rem;
  line-height: 1.25;
  font-weight: 700;
}

.ww-lost-password__lead {
  margin: 2.5rem 0 0;
  font-size: 1.25rem;
}

.woocommerce-account .ww-lost-password form.lost_reset_password {
  width: 100%;
  max-width: none;
  margin: 1.5rem 0 0;
  padding: 0;
  border: 0;
  text-align: left;
}

.woocommerce-account .ww-lost-password form.lost_reset_password .form-row {
  float: none;
  width: 100%;
  margin: 0;
  padding: 0;
}

.woocommerce-account .ww-lost-password form.lost_reset_password label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 1.25rem;
  letter-spacing: 0;
  text-transform: none;
}

.woocommerce-account .ww-lost-password form.lost_reset_password input.input-text {
  width: 100%;
  height: 3.625rem;
  padding: 0.75rem 1rem;
  border: 1px solid #dfdfdf;
  background: #f8f8f8;
}

.ww-lost-password__actions {
  display: grid;
  grid-template-columns: 20rem 1fr;
  align-items: center;
  gap: 5rem;
  margin-top: 3.875rem;
}

.woocommerce-account .ww-lost-password__actions .button {
  width: 20rem;
  min-height: 4.375rem;
  border-radius: 0;
  color: #fff;
  background: #000;
  font-size: 1.125rem;
}

.ww-lost-password__actions a,
.ww-lost-password__guest {
  color: var(--ww-color-ink);
  font-size: 1.125rem;
  text-underline-offset: 0.2em;
  white-space: nowrap;
}

.ww-lost-password__social-label {
  margin: 5.625rem 0 0;
  font-size: 1.25rem;
}

.ww-lost-password > .ww-auth-social {
  margin-top: 0.875rem;
}

.ww-lost-password__guest {
  display: inline-flex;
  margin-top: 0;
}

@media (min-width: 53.8125rem) {
  .ww-route-404 .ww-site-header,
  .ww-route-my-account .ww-site-header {
    display: none;
  }

  .ww-route-404 .ww-main,
  .ww-route-my-account .ww-main {
    padding-top: 8.875rem;
  }
}

.ww-auth-register {
  width: min(100%, 47rem);
  margin-inline: auto;
}

.ww-auth-back {
  display: inline-flex;
  margin-bottom: 2.5rem;
}

.ww-auth-register__lead {
  max-width: 40rem;
  margin: -1.75rem 0 3rem;
  color: var(--ww-color-muted);
}

.ww-auth-register__submit {
  margin-top: 2rem !important;
}

@media (max-width: 47.9375rem) {
  .ww-auth-route {
    width: min(100% - 2rem, 31rem);
    padding-block: 4rem 5rem;
  }

  .ww-auth-grid {
    grid-template-columns: 1fr;
    gap: 5rem;
  }

  body:not(.logged-in).woocommerce-account form.ww-auth-form {
    padding: 0;
    border: 0;
  }

  body:not(.logged-in).woocommerce-account #customer_login.ww-auth-grid {
    grid-template-columns: 1fr;
    gap: 5rem;
  }

  .ww-auth-grid::after {
    content: none;
  }

  .ww-auth-panel > h1,
  .ww-auth-panel > h2,
  .ww-auth-register > h1 {
    margin-bottom: 2.25rem;
    font-size: 2rem;
  }

  .ww-auth-form__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .woocommerce-account .ww-auth-form__actions .button,
  .woocommerce-account .ww-auth-register__submit .button,
  .ww-auth-create {
    width: 100%;
    min-width: 0;
  }

  .ww-auth-panel--join {
    min-height: 0;
    padding-top: 5rem;
    border-top: 1px solid var(--ww-color-ink);
  }

  .woocommerce-lost-password .ww-auth-route {
    height: auto;
  }

  .ww-lost-password {
    padding-top: 0;
  }

  .ww-lost-password__lead {
    margin-top: 1.5rem;
  }

  .woocommerce-account .ww-lost-password form.lost_reset_password {
    margin-top: 2rem;
  }

  .ww-lost-password__actions {
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-top: 2rem;
  }

  .woocommerce-account .ww-lost-password__actions .button {
    width: 100%;
  }

  .ww-lost-password__social-label {
    margin-top: 3rem;
  }


  body:not(.logged-in).woocommerce-account .ww-site-footer {
    min-height: 0;
  }
}

@media (max-width: 53.75rem) {
  .ww-contact-page a,
  .ww-site-footer nav a {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
  }
}

/* Logged-in account follows the Orders/Profile frames from the supplied exports. */
body.logged-in.woocommerce-account .ww-auth-route {
  box-sizing: border-box;
  width: min(100% - (var(--ww-gutter) * 2), 100rem);
  max-width: 100rem;
  min-height: 61.875rem;
  padding: 2.5rem 0 0;
}

body.logged-in.woocommerce-account.woocommerce-orders .ww-auth-route {
  min-height: 82.5625rem;
}

body.logged-in.woocommerce-account .ww-auth-route > .woocommerce,
body.logged-in.woocommerce-account .woocommerce {
  display: block;
  width: 100%;
  max-width: none;
}

body.logged-in.woocommerce-account .woocommerce-MyAccount-navigation,
body.logged-in.woocommerce-account .woocommerce-MyAccount-content {
  float: none;
  width: 100%;
  max-width: none;
  margin: 0;
}

body.logged-in.woocommerce-account .ww-site-footer {
  min-height: 23.5rem;
  margin-top: 0;
}

.ww-account-heading {
  position: relative;
  min-height: 9.75rem;
}

.ww-account-back {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  gap: 0.875rem;
  color: var(--ww-color-muted);
  font-size: 1rem;
  text-decoration: none;
}

.ww-account-back .dashicons {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--ww-color-ink);
  font-size: 1.5rem;
  line-height: 1;
}

body.logged-in.woocommerce-account .ww-account-heading .woocommerce-MyAccount-navigation {
  margin-top: 1.5rem;
  border: 0;
}

body.logged-in.woocommerce-account .ww-account-heading .woocommerce-MyAccount-navigation ul {
  display: flex;
  align-items: center;
  gap: 4rem;
}

body.logged-in.woocommerce-account .ww-account-heading .woocommerce-MyAccount-navigation li {
  border: 0;
}

body.logged-in.woocommerce-account .ww-account-heading .woocommerce-MyAccount-navigation a {
  min-height: 2.75rem;
  padding: 0;
  color: var(--ww-color-ink);
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

body.logged-in.woocommerce-account .ww-account-heading .woocommerce-MyAccount-navigation .is-active a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.35rem;
}

.ww-account-avatar {
  position: absolute;
  top: -0.25rem;
  right: 0;
  display: grid;
  width: 5.75rem;
  height: 5.75rem;
  place-items: center;
  border-radius: 50%;
  background: #f7dfc4;
}

.ww-account-avatar img {
  display: block;
  width: 3.75rem;
  height: 3.8125rem;
}

body.logged-in.woocommerce-account .woocommerce-MyAccount-content {
  margin-top: 1.875rem;
}

body.logged-in.woocommerce-account.woocommerce-orders .woocommerce-MyAccount-content {
  margin-top: 2rem;
}

.ww-account-profile {
  padding-inline: 0;
}

.ww-account-profile__card {
  position: relative;
  box-sizing: border-box;
  min-height: 19.25rem;
  padding: 2.875rem 2.25rem;
  border: 1px solid var(--ww-color-line);
}

.ww-account-profile__card + .ww-account-profile__card {
  margin-top: 1.875rem;
}

.ww-account-profile__title-row {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.ww-account-profile__title-row h1,
.ww-account-profile__card h2 {
  margin: 0;
  font-family: var(--ww-font-sans);
  font-size: 2rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.15;
  text-transform: none;
}

body.logged-in.woocommerce-account .ww-account-profile__title-row h1,
body.logged-in.woocommerce-account .ww-account-profile__card h2 {
  font-family: var(--ww-font-sans);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.ww-account-profile__edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
}

.ww-account-profile__edit img {
  display: block;
  width: 2.5625rem;
  height: 2.3125rem;
}

.ww-account-profile__details {
  display: grid;
  gap: 1.75rem;
  margin: 1.8125rem 0 0;
  font-size: 1.25rem;
  line-height: 1.35;
}

.ww-account-profile__details dt,
.ww-account-profile__details dd {
  margin: 0;
}

.ww-account-profile__card--address {
  min-height: 19.25rem;
}

.ww-account-profile__address {
  display: flex;
  align-items: center;
  min-height: 5.875rem;
  margin-top: 3.75rem;
  padding: 1.25rem 2rem;
  color: var(--ww-color-ink);
  background: #f7f7f7;
  font-size: 1.375rem;
  text-decoration: none;
}

.ww-account-profile__utilities {
  display: flex;
  gap: 2rem;
  margin-top: 1.25rem;
  padding-inline: 0.25rem;
  font-size: 0.875rem;
}

.ww-account-profile__utilities a {
  color: var(--ww-color-ink);
  text-underline-offset: 0.2em;
}

.ww-account-profile__card .ww-welcome-coupon {
  position: absolute;
  top: 3.25rem;
  right: 2.25rem;
  width: 28rem;
  margin: 0;
  padding: 0 0 0 2rem;
  border: 0;
  border-left: 1px solid var(--ww-color-line);
  background: transparent;
}

.ww-account-profile__card .ww-welcome-coupon__eyebrow {
  margin: 0 0 0.75rem;
}

.ww-account-profile__card .ww-welcome-coupon h2 {
  margin: 0 0 0.75rem;
  font-size: 1.25rem;
}

.ww-account-profile__card .ww-welcome-coupon p {
  margin: 0 0 0.75rem;
  font-size: 0.875rem;
}

.ww-account-profile__card .ww-welcome-coupon__code {
  display: inline-block;
  padding: 0.65rem 0.875rem;
  background: #f7f7f7;
  color: var(--ww-color-ink);
  font-size: 0.875rem;
}

.ww-account-orders {
  display: grid;
  gap: 2.125rem;
}

.ww-order-card {
  box-sizing: border-box;
  min-height: 19.25rem;
  border: 1px solid var(--ww-color-line);
  background: #f7f7f7;
}

.ww-order-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 5.625rem;
  padding: 1rem;
  border-bottom: 1px solid var(--ww-color-line);
}

.ww-order-card__head p {
  margin: 0;
  padding-right: 0.75rem;
  border-right: 1px solid var(--ww-color-ink);
  font-size: 1.125rem;
  line-height: 1.25;
  text-align: right;
}

.ww-order-card__status {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0.35rem 0.65rem;
  color: #c16d31;
  background: #ffe2c8;
  font-size: 1.125rem;
}

.ww-order-card--completed .ww-order-card__status {
  color: #1d9d2b;
  background: #caffc8;
}

.ww-order-card__body {
  display: grid;
  grid-template-columns: 23.5rem minmax(0, 1fr) 20rem;
  min-height: 13.5rem;
  gap: 1.75rem;
  padding: 1rem;
}

.ww-order-card__media {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.ww-order-card__media a {
  display: block;
  width: 9.25rem;
  height: 9.25rem;
  overflow: hidden;
}

.ww-order-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ww-order-card__more {
  color: var(--ww-color-muted);
  font-size: 2rem;
}

.ww-order-card__summary {
  align-self: center;
}

.ww-order-card__summary ul {
  padding: 0;
  margin: 0 0 1rem;
  list-style: none;
  font-size: 1.125rem;
}

.ww-order-card__summary details {
  font-size: 1rem;
}

.ww-order-card__summary summary {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  font-weight: 700;
  list-style: none;
}

.ww-order-card__summary summary::-webkit-details-marker {
  display: none;
}

.ww-order-card__summary summary img {
  width: 2rem;
  height: auto;
  transition: transform 180ms ease;
}

.ww-order-card__summary details[open] summary img {
  transform: rotate(180deg);
}

.ww-order-card__summary details p {
  margin: 0.75rem 0 0.35rem;
}

.ww-order-card__actions {
  display: grid;
  align-content: center;
  gap: 1rem;
}

.ww-order-card__actions p {
  margin: 0;
  font-size: 1.25rem;
}

.woocommerce-account .ww-order-card__actions .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 3.5rem;
  padding: 0.75rem 1rem;
  border-radius: 0;
  color: #fff;
  background: #000;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
  text-decoration: none;
  text-transform: none;
}

.ww-account-orders-empty {
  padding: 4rem;
  border: 1px solid var(--ww-color-line);
  text-align: center;
}

@media (min-width: 53.8125rem) {
  body.logged-in.ww-route-my-account .ww-site-header {
    display: block;
  }

  body.logged-in.ww-route-my-account .ww-main {
    padding-top: 0;
  }
}

@media (max-width: 53.75rem) {
  body.logged-in.woocommerce-account .ww-auth-route {
    width: min(100% - 2rem, 40rem);
    min-height: 0;
    padding: 3.5rem 0 5rem;
  }

  body.logged-in.woocommerce-account .ww-site-footer {
    min-height: 0;
  }

  .ww-account-heading {
    min-height: 9rem;
  }

  .ww-account-avatar {
    top: 0;
    width: 4rem;
    height: 4rem;
  }

  .ww-account-avatar img {
    width: 2.75rem;
    height: auto;
  }

  body.logged-in.woocommerce-account .ww-account-heading .woocommerce-MyAccount-navigation ul {
    gap: 2rem;
  }

  body.logged-in.woocommerce-account .ww-account-heading .woocommerce-MyAccount-navigation a {
    font-size: 1rem;
  }

  .ww-account-profile {
    padding-inline: 0;
  }

  .ww-account-profile__card {
    min-height: 0;
    padding: 2.25rem 1.8125rem 2rem;
  }

  /* `.woocommerce-account .woocommerce-MyAccount-content h2` also matches here,
     so the phone size has to carry the same weight of specificity. */
  body.logged-in.woocommerce-account .ww-account-profile__title-row h1,
  body.logged-in.woocommerce-account .ww-account-profile__card h2 {
    font-size: 1.0625rem;
    font-weight: 700;
  }

  .ww-account-profile__details {
    font-size: 1rem;
  }

  .ww-account-profile__card .ww-welcome-coupon {
    position: static;
    width: auto;
    margin-top: 2rem;
    padding: 1.5rem 0 0;
    border-top: 1px solid var(--ww-color-line);
    border-left: 0;
  }

  /* `21-account-profile`: the address row is a 57 px band 104 px below the
     card's top edge, inside a card that keeps its full 307 px height. */
  .ww-account-profile__card--address {
    min-height: 19.1875rem;
  }

  .ww-account-profile__address {
    min-height: 3.5625rem;
    margin-top: 2.9rem;
    padding: 0.75rem 0.9375rem;
    font-size: 1rem;
  }

  .ww-order-card__head {
    align-items: flex-start;
    gap: 1rem;
  }

  .ww-order-card__head p {
    font-size: 0.875rem;
  }

  .ww-order-card__status {
    font-size: 0.875rem;
  }

  .ww-order-card__body {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 1.25rem;
  }

  .ww-order-card__media a {
    width: calc(50% - 0.375rem);
    height: auto;
    aspect-ratio: 1;
  }

  .ww-order-card__actions {
    width: 100%;
  }

  .woocommerce-account .ww-order-card__actions .button {
    min-height: 3.25rem;
  }
}

.ww-product-delivery {
  margin: 1.35rem 0 0;
  padding: 1.25rem 0;
  border-block: 1px solid var(--ww-color-line);
  color: var(--ww-color-muted);
  font-size: 0.875rem;
  line-height: 1.45;
}

.ww-product-detail form.cart .quantity {
  display: grid;
  grid-template-columns: auto 2.75rem minmax(3.5rem, 4.5rem) 2.75rem;
  align-items: center;
  justify-self: start;
  width: auto;
}

.ww-quantity-label {
  margin-right: 1.25rem;
  font-size: 0.875rem;
}

.ww-product-detail form.cart .quantity .qty,
.ww-quantity-button {
  width: 100%;
  min-width: 0;
  height: 2.75rem;
  min-height: 2.75rem;
  padding: 0;
  border: 1px solid var(--ww-color-ink);
  border-radius: 0;
  color: var(--ww-color-paper);
  background: var(--ww-color-ink);
  text-align: center;
}

.ww-product-detail form.cart .quantity .qty {
  border-inline: 0;
  color: var(--ww-color-paper);
}

.ww-quantity-button {
  display: inline-grid;
  place-items: center;
  font-size: 1.35rem;
  line-height: 1;
}

.ww-product-detail .woocommerce-product-details__short-description {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--ww-color-line);
}

.ww-product-detail__below-summary {
  display: flex;
  flex-direction: column;
}

.ww-product-detail__below-summary > .related,
.ww-product-detail__below-summary > .upsells {
  order: 1;
}

.ww-product-detail__below-summary > .ww-product-detail__tabs {
  order: 2;
  margin-top: clamp(4rem, 8vw, 7rem);
}

@media (min-width: 48rem) {
  .single-product .ww-product-detail-shell {
    width: min(100% - (var(--ww-gutter) * 2), 100rem);
  }

  .ww-product-detail__layout {
    grid-template-columns: minmax(0, 50rem) minmax(24rem, 1fr);
    gap: 1.25rem;
  }

  .ww-figma-product-gallery__stage {
    aspect-ratio: 1.2 / 1;
  }

  .ww-product-detail__below-summary > .related,
  .ww-product-detail__below-summary > .upsells {
    margin-top: 0;
  }
}

/* Filled cart fidelity: preserve WooCommerce behavior inside the Figma composition. */
.woocommerce-cart .ww-route-prose,
.woocommerce-checkout .ww-route-prose {
  margin-top: 0;
}

.ww-cart-promo {
  display: grid;
  gap: 1.5rem;
  margin-bottom: 2.25rem;
}

.ww-cart-promo p {
  max-width: 27rem;
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.35;
}

.ww-cart-promo__form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.ww-cart-promo__form input,
.ww-cart-promo__form button {
  width: 100%;
  min-height: 3.875rem;
  padding: 0 1.375rem;
  border: 0;
  border-radius: 0;
  font: inherit;
}

.ww-cart-promo__form input {
  background: #f3f3f5;
  text-transform: uppercase;
}

.ww-cart-promo__form button {
  color: #555;
  background: #c5c5c5;
  font-weight: 700;
}

@media (min-width: 48rem) {
  body.woocommerce-cart:not(.ww-cart-empty) .ww-commerce-route {
    height: 65.8125rem;
    min-height: 65.8125rem;
    padding-block: 4rem 0;
  }

  .woocommerce-cart .ww-commerce-route .woocommerce {
    grid-template-columns: minmax(0, 60rem) minmax(0, 30rem);
    grid-template-rows: auto 1fr;
    column-gap: 10rem;
  }

  .woocommerce-cart .ww-commerce-progress {
    grid-row: 1;
    grid-column: 1;
    width: 100%;
  }

  .woocommerce-cart .woocommerce-cart-form {
    grid-row: 2;
    grid-column: 1;
  }

  .woocommerce-cart .cart-collaterals {
    grid-row: 1 / span 2;
    grid-column: 2;
    padding-top: 2rem;
  }

  .woocommerce-cart .shop_table.cart tr.cart_item {
    grid-template-columns: 10.875rem minmax(0, 1fr) 10rem;
    column-gap: 2.75rem;
    min-height: 13.5rem;
    padding-block: 1.5rem;
  }

  .woocommerce-cart .shop_table.cart .product-thumbnail img {
    width: 10.875rem;
    height: 10.25rem;
  }

  .woocommerce-cart .shop_table.cart .product-name {
    grid-column: 2;
    align-self: start;
    padding-top: 0.25rem;
    font-size: 1.125rem;
    line-height: 1.25;
  }

  .woocommerce-cart .shop_table.cart .product-quantity {
    grid-column: 3;
    align-self: end;
    justify-self: end;
    padding-bottom: 1rem;
  }

  .woocommerce-cart .shop_table.cart .product-subtotal {
    position: absolute;
    top: 2.25rem;
    right: 0;
    font-size: 1.75rem;
  }

  .woocommerce-cart .shop_table.cart td.actions {
    display: none;
  }
}

/* Visible cart update control for reliable total recalculation. */
.woocommerce-cart .shop_table.cart td.actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 1.25rem;
  border-bottom: 0;
}

.woocommerce-cart .shop_table.cart td.actions .coupon {
  display: none;
}

.woocommerce-cart .shop_table.cart td.actions > .button {
  display: inline-flex;
  width: auto;
  min-height: 3rem;
  align-items: center;
  justify-content: center;
  padding: 0 1.5rem;
  color: var(--ww-color-paper);
  border: 1px solid var(--ww-color-ink);
  background: var(--ww-color-ink);
}

.woocommerce-cart .shop_table.cart td.actions > .button:disabled {
  color: var(--ww-color-muted);
  border-color: var(--ww-color-line);
  background: var(--ww-color-line);
}

@media (max-width: 47.9375rem) {
  .woocommerce-cart .shop_table.cart td.actions {
    padding-top: 1rem;
  }

  .woocommerce-cart .shop_table.cart td.actions > .button {
    width: 100%;
  }
}

@media (max-width: 47.9375rem) {
  .woocommerce-cart .ww-commerce-route,
  .woocommerce-checkout .ww-commerce-route {
    padding-top: 2rem;
  }

  .woocommerce-cart .ww-route-prose,
  .woocommerce-checkout .ww-route-prose {
    margin-top: 0;
  }

  .woocommerce-cart .shop_table.cart tr.cart_item {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr) 2.75rem;
    grid-template-areas:
      'thumbnail name remove'
      'quantity quantity subtotal';
    align-items: start;
    gap: 1rem;
    min-height: 0;
    padding: 1.25rem 0;
    background: transparent;
  }

  .woocommerce-cart .shop_table.cart td {
    display: block;
    width: auto;
    max-width: none;
    padding: 0;
    border: 0;
    text-align: left;
  }

  .woocommerce-cart .shop_table.cart td::before {
    display: none;
    content: none;
  }

  .woocommerce-cart .shop_table.cart .product-remove {
    position: static;
    grid-area: remove;
    min-height: 0;
    justify-self: end;
  }

  .woocommerce-cart .shop_table.cart .product-thumbnail {
    grid-area: thumbnail;
    padding: 0;
  }

  .woocommerce-cart .shop_table.cart td.product-thumbnail img {
    width: 7rem;
    height: 7rem;
  }

  .woocommerce-cart .shop_table.cart .product-name {
    grid-area: name;
    align-self: center;
    font-size: 0.9375rem;
    line-height: 1.3;
  }

  .woocommerce-cart .shop_table.cart .product-price {
    display: none;
  }

  .woocommerce-cart .shop_table.cart .product-quantity {
    grid-area: quantity;
    align-self: center;
  }

  .woocommerce-cart .shop_table.cart .product-subtotal {
    grid-area: subtotal;
    align-self: center;
    justify-self: end;
    font-size: 0.9375rem;
    font-weight: 700;
    white-space: nowrap;
  }

  .woocommerce-cart .shop_table.cart td.actions {
    display: none;
  }

  .woocommerce-cart .cart-collaterals {
    margin-top: 2rem;
  }

  .woocommerce-cart .cart-collaterals .cart_totals {
    padding: 0;
  }

  .ww-cart-promo {
    gap: 1rem;
    margin-bottom: 2rem;
  }

  .ww-cart-promo p {
    font-size: 1rem;
  }
}

/* Figma commerce flow: wide cart and checkout with a shared three-step header. */
.ww-commerce-route {
  width: min(100% - (var(--ww-gutter) * 2), 100rem);
  max-width: none;
  padding-block: clamp(3rem, 5vw, 6rem) clamp(5rem, 8vw, 8rem);
}

.ww-cart-empty .ww-route-prose {
  margin-top: 0;
}

.ww-cart-empty .ww-commerce-route .woocommerce {
  display: block;
}

.ww-cart-empty .ww-empty-state--cart {
  grid-column: 1 / -1;
  max-width: none;
}

@media (min-width: 53.8125rem) {
  .ww-cart-empty .ww-commerce-route {
    height: 65.8125rem;
    padding-block: 0;
  }

  .ww-cart-empty .ww-route-prose,
  .ww-cart-empty .ww-commerce-route .woocommerce,
  .ww-cart-empty .ww-empty-state--cart {
    height: 100%;
  }

  .ww-cart-empty .ww-empty-state--cart {
    position: relative;
    display: block;
    width: 100%;
    min-height: 0;
    padding: 0;
  }

  .ww-cart-empty .ww-empty-state--cart .ww-empty-state__back {
    top: 4rem;
  }

  .ww-cart-empty .ww-empty-state--cart .ww-empty-state__dog {
    position: absolute;
    top: 11.5625rem;
    left: calc(50% - 1rem);
    width: 27.5rem;
    transform: translateX(-50%);
  }

  .ww-cart-empty .ww-empty-state--cart .ww-section-title {
    position: absolute;
    top: 39.25rem;
    right: 0;
    left: 0;
    max-width: none;
    margin: 0;
    font-family: 'WW Display', 'PT Serif', Georgia, serif;
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1;
    text-transform: uppercase;
  }

  .ww-cart-empty .ww-empty-state--cart .ww-lede {
    position: absolute;
    top: 44.75rem;
    right: 0;
    left: 0;
    max-width: 62rem;
    margin: 0 auto;
    font-size: 1.75rem;
    line-height: 1.35;
  }
}

.woocommerce-cart .ww-commerce-route .woocommerce,
.woocommerce-checkout .ww-commerce-route .woocommerce {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

.ww-commerce-progress {
  margin-bottom: clamp(4rem, 7vw, 8rem);
}

.ww-commerce-progress__back {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  gap: 1rem;
  color: var(--ww-color-ink);
  font-size: 1.75rem;
  text-decoration: none;
}

.ww-commerce-progress__back span {
  font-size: 0.875rem;
}

.ww-commerce-progress ol {
  display: flex;
  align-items: center;
  width: min(100%, 48rem);
  padding: 0;
  margin: 2.5rem 0 0;
  list-style: none;
}

.ww-commerce-progress li {
  display: flex;
  align-items: center;
  flex: 1 1 0;
  gap: 0.75rem;
  min-width: 0;
  font-size: 0.875rem;
  white-space: nowrap;
}

.ww-commerce-progress li:not(:last-child)::after {
  flex: 1 1 auto;
  height: 1px;
  margin-inline: 0.5rem;
  background: var(--ww-color-ink);
  content: '';
}

.ww-commerce-progress li > span {
  display: grid;
  flex: 0 0 2.25rem;
  width: 2.25rem;
  height: 2.25rem;
  place-items: center;
  border: 1px solid var(--ww-color-ink);
  border-radius: 50%;
}

.ww-commerce-progress li.is-active > span {
  border-color: var(--ww-color-sand);
  background: var(--ww-color-sand);
}

.ww-commerce-progress li:not(.is-active) strong {
  font-weight: 400;
}

.woocommerce-cart .shop_table.cart .product-remove a.remove {
  color: var(--ww-color-ink) !important;
}

@media (min-width: 48rem) {
  .woocommerce-cart .ww-commerce-route .woocommerce {
    display: grid;
    grid-template-columns: minmax(0, 2.05fr) minmax(23rem, 0.95fr);
    align-items: start;
    column-gap: clamp(4rem, 7vw, 8rem);
  }

  .woocommerce-cart .woocommerce-notices-wrapper,
  .woocommerce-cart .ww-commerce-progress {
    grid-column: 1 / -1;
  }

  .woocommerce-cart .woocommerce-cart-form {
    grid-column: 1;
    width: 100%;
  }

  .woocommerce-cart .cart-collaterals {
    grid-column: 2;
  }

  .woocommerce-cart .shop_table.cart thead {
    display: none;
  }

  .woocommerce-cart .shop_table.cart tbody,
  .woocommerce-cart .shop_table.cart tr.cart_item {
    display: block;
  }

  .woocommerce-cart .shop_table.cart tr.cart_item {
    position: relative;
    display: grid;
    grid-template-columns: 10rem minmax(0, 1fr) 9rem 8rem;
    align-items: center;
    gap: 1.5rem;
    min-height: 13.5rem;
    padding-block: 1.5rem;
    border-bottom: 1px solid var(--ww-color-line);
  }

  .woocommerce-cart .shop_table.cart td {
    padding: 0;
    border: 0;
    text-align: left;
  }

  .woocommerce-cart .shop_table.cart .product-remove {
    position: absolute;
    top: 1.5rem;
    right: 10rem;
  }

  .woocommerce-cart .shop_table.cart .product-thumbnail {
    grid-column: 1;
  }

  .woocommerce-cart .shop_table.cart .product-thumbnail img {
    width: 10rem;
    height: 10rem;
    object-fit: cover;
  }

  .woocommerce-cart .shop_table.cart .product-name {
    grid-column: 2;
    font-size: 1.1rem;
  }

  .woocommerce-cart .shop_table.cart .product-price {
    display: none;
  }

  .woocommerce-cart .shop_table.cart .product-quantity {
    grid-column: 3;
  }

  .woocommerce-cart .shop_table.cart .product-subtotal {
    grid-column: 4;
    font-size: 1.35rem;
    font-weight: 700;
  }

  .woocommerce-cart .shop_table.cart td.actions {
    padding-top: 2rem;
  }

  .woocommerce-checkout form.checkout {
    grid-template-columns: minmax(0, 2.05fr) minmax(23rem, 0.95fr);
    gap: clamp(4rem, 7vw, 8rem);
  }
}

.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce-checkout #order_review {
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.woocommerce-cart .cart-collaterals .cart_totals h2,
.woocommerce-checkout #order_review_heading {
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--ww-color-line);
  font-family: 'WW Display', 'PT Serif', Georgia, serif;
  font-size: 2rem;
  font-weight: 700;
}

.woocommerce-cart .wc-proceed-to-checkout .checkout-button,
.woocommerce-checkout #payment #place_order {
  width: 100%;
  min-height: 4.75rem;
  font-size: 0.875rem;
}

.woocommerce-checkout form .form-row input.input-text,
.woocommerce-checkout form .form-row textarea,
.woocommerce-checkout form .form-row select,
.woocommerce-checkout .select2-container--default .select2-selection--single {
  min-height: 4rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--ww-color-line);
  background: #fff;
}

.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 2.35rem;
}

@media (max-width: 47.9375rem) {
  .ww-commerce-route {
    width: min(100% - 2rem, 31rem);
    padding-block: 2rem 4rem;
  }

  .ww-commerce-progress {
    margin-bottom: 3rem;
  }

  .ww-commerce-progress ol {
    align-items: flex-start;
    gap: 0.5rem;
  }

  .ww-commerce-progress li {
    display: grid;
    justify-items: center;
    gap: 0.4rem;
    font-size: 0.65rem;
    text-align: center;
    white-space: normal;
  }

  .ww-commerce-progress li:not(:last-child)::after {
    display: none;
  }

  .ww-commerce-progress li > span {
    flex-basis: 2rem;
    width: 2rem;
    height: 2rem;
  }

  .woocommerce-cart .cart-collaterals {
    margin-top: 3rem;
  }

  .woocommerce-cart .shop_table.cart td.product-thumbnail img {
    width: 5rem;
    height: 5rem;
    object-fit: cover;
  }

  .woocommerce-checkout form.checkout {
    display: block;
  }

  .woocommerce-checkout #order_review_heading {
    margin-top: 3rem;
  }
}

@media (max-width: 30rem) {
  .ww-product-detail form.cart .quantity {
    grid-template-columns: 1fr 2.75rem minmax(3.5rem, 4.5rem) 2.75rem;
    width: 100%;
  }

  .ww-quantity-label {
    margin-right: 0.75rem;
  }
}

/* Final cascade position for the shared Figma chrome introduced in 0.3.3. */
.ww-site-header .ww-header-inner {
  min-height: 8.875rem;
  grid-template-columns: 15rem minmax(0, 1fr) 29.8125rem;
  gap: 2rem;
  padding-block: 0;
}

.ww-site-header .ww-brand {
  display: flex;
  align-items: center;
  width: 14.375rem;
  height: 3.25rem;
  transform: translateY(2.6875rem);
}

.ww-site-header .ww-brand__image {
  display: block;
  width: 14.375rem;
  height: 3.25rem;
  object-fit: contain;
}

body.home .ww-site-header .ww-brand__image {
  filter: invert(1);
}

body.home .ww-site-header .ww-brand {
  transform: translate(-0.25rem, 2.6875rem);
}

.ww-site-header .ww-nav {
  justify-self: end;
  margin-right: 4.25rem;
  transform: translateY(2.5625rem);
}

.ww-site-header .ww-nav__menu {
  display: grid;
  grid-template-columns: 9.4375rem 11.875rem 5.0625rem;
  width: 26.375rem;
  gap: 0;
}

.ww-site-header .ww-nav__menu li {
  list-style: none;
}

.ww-site-header .ww-nav a,
.ww-site-header .ww-header-actions a {
  min-height: 2.75rem;
  padding: 0;
  font-size: 1.125rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.ww-site-header .ww-header-actions {
  justify-content: flex-start;
  gap: 0.875rem;
  transform: translateY(2rem);
}

.ww-site-header .ww-header-actions > a {
  position: relative;
  justify-content: center;
  width: 2.75rem;
  min-width: 2.75rem;
  padding: 0;
  border: 0;
}

.ww-site-header .ww-header-actions .dashicons {
  width: 1.75rem;
  height: 1.75rem;
  font-size: 1.75rem;
  line-height: 1;
}

.ww-site-header .ww-header-actions .ww-cart-link img {
  width: 1.625rem;
  height: 1.75rem;
  filter: invert(1);
}

.ww-site-header .ww-header-actions .ww-cart-count {
  position: absolute;
  top: 0.1rem;
  right: -0.15rem;
  min-width: 1rem;
  border-radius: 999px;
  font-size: 0.625rem;
}

.ww-site-header .ww-header-search {
  display: grid;
  width: 15.75rem;
  grid-template-columns: minmax(0, 1fr) 2.75rem;
  align-items: center;
  border-bottom: 1px solid currentColor;
}

.ww-site-header .ww-header-search input,
.ww-site-header .ww-header-search button {
  min-width: 0;
  height: 2.75rem;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  appearance: none;
}

.ww-site-header .ww-header-search input:focus {
  outline: 0;
}

.ww-site-header .ww-header-search button {
  display: grid;
  width: 2.75rem;
  place-items: center;
}

.ww-site-header .ww-header-search--mobile {
  display: none;
}

body.home .ww-site-header .ww-header-actions .ww-cart-link img {
  filter: none;
}

body.home .ww-site-header .ww-header-search {
  color: #fff;
}

.ww-order-card__status {
  color: #8a4717;
}

.ww-order-card--completed .ww-order-card__status {
  color: #0b6b18;
}

.ww-auth-social button:disabled {
  cursor: not-allowed;
  opacity: 0.68;
}

.ww-site-footer .ww-footer-main {
  display: grid;
  width: min(100% - (var(--ww-gutter) * 2), 83rem);
  min-height: 23.5rem;
  grid-template-columns: repeat(4, 10.375rem);
  align-content: start;
  column-gap: 6.5rem;
  row-gap: 0;
  padding: 4.5625rem 0 3rem;
}

.ww-site-footer .ww-footer-column {
  display: grid;
  align-content: start;
  gap: 0.55rem;
}

.ww-site-footer .ww-footer-column .ww-footer-kicker {
  margin-bottom: 0.7rem;
  color: #fff;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.ww-site-footer .ww-footer-column a {
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.875rem;
  line-height: 1.35;
}

body.home .ww-site-footer .ww-footer-main,
.post-type-archive-product .ww-site-footer .ww-footer-main {
  min-height: 18.5625rem;
  padding-top: 3.75rem;
  padding-bottom: 2rem;
}

.ww-route-contacts .ww-main {
  min-height: 65.8125rem;
}

.ww-route-contacts .ww-contact-grid h2 {
  margin-bottom: 1.7rem;
}

.ww-route-contacts .ww-contact-grid p {
  margin: 0 0 1.65rem;
}

.ww-route-contacts .ww-contact-grid a {
  color: inherit;
  text-decoration: none;
}

@media (min-width: 53.8125rem) {
  .ww-route-404 .ww-site-header {
    display: block;
    visibility: hidden;
  }

  .ww-route-404 .ww-main {
    min-height: 61.875rem;
    padding-top: 0;
  }

  .ww-route-404 .ww-empty-state.ww-empty-state--not-found {
    min-height: 61.875rem;
  }

  .ww-route-404 .ww-site-footer {
    margin-top: 0;
  }
}

.ww-product-grid.ww-catalog-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 4.5rem 1rem;
  margin-top: 4rem;
}

@media (min-width: 53.8125rem) {
  .woocommerce-cart .ww-commerce-route {
    padding-bottom: 8.9375rem;
  }

  .woocommerce-checkout .ww-commerce-route {
    min-height: 96.875rem;
    padding-bottom: 4.8125rem;
  }

  .woocommerce-cart .ww-site-footer,
  .woocommerce-checkout .ww-site-footer {
    margin-top: 0;
  }
}

.tax-product_cat .ww-catalog-page {
  padding-bottom: 0.75rem;
}

.tax-product_cat .ww-site-footer {
  margin-top: 0;
}

.ww-catalog-grid > .ww-product-card {
  grid-column: span 3;
}

.ww-catalog-grid > .ww-product-card:nth-child(-n + 3) {
  grid-column: span 4;
}

.ww-catalog-grid .ww-product-image {
  height: auto;
  aspect-ratio: 0.86 / 1;
}

.ww-catalog-page .ww-category-catalog__pagination {
  margin-top: 5rem;
}

@media (min-width: 53.8125rem) and (max-width: 85.3125rem) {
  .ww-site-header .ww-header-inner {
    grid-template-columns: 11.25rem minmax(0, 1fr) auto;
    gap: 1rem;
  }

  .ww-site-header .ww-brand {
    width: 11.25rem;
    height: 2.5625rem;
  }

  .ww-site-header .ww-brand__image {
    width: 11.25rem;
    height: 2.5625rem;
  }

  .ww-site-header .ww-nav {
    justify-self: center;
    margin-right: 0;
  }

  .ww-site-header .ww-nav__menu {
    display: flex;
    grid-template-columns: none;
    width: auto;
    gap: 1rem;
  }

  .ww-site-header .ww-header-actions {
    gap: 0.5rem;
  }

  .ww-site-header .ww-header-actions > .ww-header-search {
    display: none;
  }

  .ww-site-footer .ww-footer-main {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2rem;
  }
}

@media (max-width: 53.75rem) {
  .ww-site-header,
  body.home .ww-site-header {
    position: fixed;
    inset: 0 0 auto;
    height: 4.3125rem;
    color: var(--ww-color-ink);
    border-bottom: 1px solid var(--ww-color-line);
    background: #fff;
  }

  .ww-main,
  .ww-route-404 .ww-main {
    min-height: 0;
    padding-top: 4.3125rem;
  }

  .ww-site-header .ww-header-inner {
    width: calc(100% - 2rem);
    min-height: 4.3125rem;
    grid-template-columns: 2.75rem minmax(5.5rem, 1fr) auto;
    gap: 0.45rem;
    padding: 0;
  }

  .ww-site-header .ww-menu-toggle {
    display: inline-flex;
    grid-column: 1;
    grid-row: 1;
  }

  .ww-site-header .ww-nav,
  .ww-site-header .ww-header-actions {
    transform: none;
  }

  .ww-site-header .ww-brand,
  body.home .ww-site-header .ww-brand {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    height: auto;
    color: var(--ww-color-ink);
    font-size: 1.25rem;
    transform: none;
  }

  .ww-site-header .ww-brand__image,
  body.home .ww-site-header .ww-brand__image {
    width: min(8.5rem, 100%);
    height: auto;
    max-height: 1.9375rem;
    filter: none;
  }

  .ww-site-header .ww-header-actions {
    grid-column: 3;
    grid-row: 1;
    gap: 0;
  }

  .ww-site-header .ww-header-actions > a {
    width: 2.5rem;
    min-width: 2.5rem;
    color: var(--ww-color-ink);
  }

  .ww-site-header .ww-header-actions .ww-cart-link img,
  body.home .ww-site-header .ww-header-actions .ww-cart-link img {
    filter: invert(1);
  }

  .ww-site-header .ww-header-actions > .ww-header-search {
    display: none;
  }

  .ww-js .ww-site-header .ww-nav,
  body.home .ww-site-header .ww-nav {
    position: fixed;
    z-index: 30;
    inset: 4.3125rem 0 auto;
    display: none;
    width: 100%;
    max-height: calc(100dvh - 4.3125rem);
    padding: 2rem 1rem 2.5rem;
    overflow-y: auto;
    color: var(--ww-color-ink);
    border-top: 1px solid var(--ww-color-line);
    background: #fff;
  }

  .ww-js .ww-site-header .ww-nav.is-open {
    display: grid;
    gap: 2rem;
  }

  .ww-site-header .ww-nav__menu {
    display: grid;
    gap: 0;
  }

  .ww-site-header .ww-nav a,
  body.home.ww-menu-open .ww-site-header .ww-nav a {
    min-height: 3.5rem;
    color: var(--ww-color-ink);
    font-size: 1.125rem;
  }

  .ww-site-header .ww-header-search--mobile {
    display: grid;
    width: 100%;
    color: var(--ww-color-ink);
  }

  .ww-site-footer .ww-footer-main {
    width: calc(100% - 2rem);
    min-height: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.5rem 1.5rem;
    padding: 3.5rem 0;
  }

  body.home .ww-site-footer .ww-footer-main,
  .post-type-archive-product .ww-site-footer .ww-footer-main {
    min-height: 0;
    padding: 3.5rem 0;
  }

  .ww-route-contacts .ww-main {
    min-height: 0;
  }

  .ww-product-grid.ww-catalog-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 2.5rem 1rem;
    margin-top: 2.5rem;
  }

  .tax-product_cat .ww-catalog-page {
    padding-bottom: 3rem;
  }

  .ww-catalog-grid > .ww-product-card,
  .ww-catalog-grid > .ww-product-card:nth-child(-n + 3) {
    grid-column: span 6;
  }

  .ww-catalog-grid .ww-product-image {
    aspect-ratio: 0.82 / 1;
  }
}

@media (min-width: 48rem) and (max-width: 53.75rem) {
  body:not(.logged-in).woocommerce-account #customer_login.ww-auth-grid {
    grid-template-columns: 1fr;
    gap: 5rem;
  }

  body:not(.logged-in).woocommerce-account #customer_login.ww-auth-grid::after {
    content: none;
  }

  body:not(.logged-in).woocommerce-account .ww-auth-panel--join {
    min-height: 0;
    padding-top: 5rem;
    border-top: 1px solid var(--ww-color-ink);
  }

  body:not(.logged-in).woocommerce-account .ww-auth-form__actions {
    align-items: stretch;
    flex-direction: column;
  }

  body:not(.logged-in).woocommerce-account .ww-auth-form__actions .button,
  body:not(.logged-in).woocommerce-account .ww-auth-create {
    width: 100%;
    min-width: 0;
  }
}

/* Mobile commerce polish: keep Figma controls readable and touch-friendly. */
@media (max-width: 47.9375rem) {
  body .ww-product-actions,
  body .ww-product-actions .button,
  body .ww-product-actions .added_to_cart {
    width: 2.75rem;
    height: 2.75rem;
    min-height: 2.75rem;
  }

  body .ww-product-actions .button,
  body .ww-product-actions .added_to_cart {
    padding: 0;
    overflow: hidden;
    color: transparent;
    background-color: var(--ww-color-ink);
    background-image: url('assets/icons/cart-bag.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 0.8125rem auto;
    font-size: 0;
    line-height: 0;
    white-space: nowrap;
  }

  .woocommerce-cart .shop_table.cart .product-remove {
    justify-content: flex-end;
    min-height: 2.75rem;
  }

  .woocommerce-cart .shop_table.cart .product-remove a.remove {
    display: grid;
    width: 2.75rem;
    height: 2.75rem;
    place-items: center;
  }

  .woocommerce-cart .shop_table.cart .product-thumbnail {
    display: block;
    padding-block: 0.5rem 1rem;
    text-align: left;
  }

  .woocommerce-cart .shop_table.cart .product-thumbnail::before {
    content: none;
  }

  .woocommerce-cart .shop_table.cart td.product-thumbnail img {
    width: 7rem;
    height: 7rem;
    margin: 0;
  }

  .woocommerce-cart .shop_table.cart td.actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
    padding-top: 1.25rem;
  }

  .woocommerce-cart .shop_table.cart td.actions .coupon {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    width: 100%;
  }

  .woocommerce-cart .shop_table.cart td.actions .coupon .input-text,
  .woocommerce-cart .shop_table.cart td.actions .coupon .button,
  .woocommerce-cart .shop_table.cart td.actions > .button {
    width: 100%;
    min-width: 0;
    min-height: 3.25rem;
  }

  .woocommerce-cart .shop_table.cart td.actions .coupon .input-text {
    grid-row: 1;
    grid-column: 1;
  }

  .woocommerce-cart .shop_table.cart td.actions .coupon .button {
    grid-row: 1;
    grid-column: 2;
    white-space: nowrap;
  }

  .woocommerce-form-login-toggle .woocommerce-info,
  .woocommerce-form-coupon-toggle .woocommerce-info {
    padding-left: 1rem;
  }

  .woocommerce-form-login-toggle .woocommerce-info::before,
  .woocommerce-form-coupon-toggle .woocommerce-info::before {
    content: none;
  }
}

/* The Figma newsletter is one centered subscription block. */
.ww-footer-newsletter__inner,
body.home .ww-footer-newsletter__inner,
.post-type-archive-product .ww-footer-newsletter__inner {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 0;
  text-align: center;
}

.ww-footer-newsletter .ww-newsletter-form {
  width: min(100%, 38rem);
  margin-inline: auto;
}

.ww-footer-newsletter .ww-newsletter-form > h2 + p {
  margin-inline: auto;
}

.ww-lost-password-confirmation,
.ww-reset-password {
  display: grid;
  justify-items: center;
  text-align: center;
}

.ww-lost-password-confirmation .ww-lost-password__lead,
.ww-lost-password-confirmation .ww-lost-password__hint,
.ww-reset-password .ww-lost-password__lead {
  max-width: 36rem;
}

.ww-lost-password-confirmation__button,
.ww-reset-password__actions .button {
  min-width: min(100%, 20rem);
  min-height: 3.5rem;
  justify-content: center;
}

.ww-reset-password form.lost_reset_password {
  width: min(100%, 38rem);
}

.ww-reset-password form.lost_reset_password .form-row-first,
.ww-reset-password form.lost_reset_password .form-row-last {
  width: 100%;
}

.woocommerce-cart .wc-proceed-to-checkout .checkout-button.button.alt,
.woocommerce-checkout #payment #place_order.button.alt {
  color: var(--ww-color-paper);
  border-color: var(--ww-color-ink);
  background: var(--ww-color-ink);
}

.woocommerce-cart .wc-proceed-to-checkout .checkout-button.button.alt:hover,
.woocommerce-cart .wc-proceed-to-checkout .checkout-button.button.alt:focus-visible,
.woocommerce-checkout #payment #place_order.button.alt:hover,
.woocommerce-checkout #payment #place_order.button.alt:focus-visible {
  color: var(--ww-color-ink);
  background: transparent;
}

@media (min-width: 48rem) {
  .single-product .ww-product-detail-shell {
    padding-bottom: 5rem;
  }

  .single-product .ww-site-footer {
    margin-top: 0;
  }
}

/* Keep filled-cart geometry last in the cascade; WooCommerce responsive rules follow earlier. */
.woocommerce-cart .cart-collaterals .cart_totals {
  display: flex;
  flex-direction: column;
}

.woocommerce-cart .cart-collaterals .cart_totals > h2 {
  order: 1;
  padding-left: 1rem;
}

.woocommerce-cart .cart-collaterals .cart_totals > .ww-cart-promo {
  order: 2;
}

.woocommerce-cart .cart-collaterals .cart_totals > .shop_table {
  order: 3;
}

.woocommerce-cart .cart-collaterals .cart_totals > .wc-proceed-to-checkout {
  order: 4;
}

@media (min-width: 48rem) {
  .woocommerce-cart .ww-commerce-route .woocommerce {
    grid-template-columns: minmax(0, 60rem) minmax(0, 30rem);
    grid-template-rows: auto 1fr;
    column-gap: 10rem;
  }

  .woocommerce-cart .ww-commerce-progress {
    grid-row: 1;
    grid-column: 1;
    width: 100%;
  }

  .woocommerce-cart .woocommerce-cart-form {
    grid-row: 2;
    grid-column: 1;
  }

  .woocommerce-cart .cart-collaterals {
    grid-row: 1 / span 2;
    grid-column: 2;
    padding-top: 2rem;
  }

  .woocommerce-cart .shop_table.cart tr.cart_item {
    grid-template-columns: 10.875rem minmax(0, 1fr) 10rem;
    align-items: start;
    column-gap: 2.75rem;
    padding-block: 0.5rem;
  }

  .woocommerce-cart .shop_table.cart .product-thumbnail img {
    width: 10.875rem;
    height: 10.25rem;
  }

  .woocommerce-cart .shop_table.cart .product-name {
    grid-column: 2;
    align-self: start;
    padding-top: 0.25rem;
  }

  .woocommerce-cart .shop_table.cart .product-quantity {
    position: absolute;
    top: 5.75rem;
    right: 0.8125rem;
    grid-column: 3;
  }

  .woocommerce-cart .shop_table.cart .product-subtotal {
    position: absolute;
    top: 1rem;
    right: 0;
    width: 8.25rem;
    text-align: right;
    white-space: nowrap;
  }

  .woocommerce-cart .quantity {
    grid-template-columns: 2.5rem 1.875rem 2.5rem;
  }

  .woocommerce-cart .quantity .qty,
  .woocommerce-cart .quantity .ww-quantity-button {
    height: 2.5rem;
    min-height: 2.5rem;
  }

  .woocommerce-cart .shop_table.cart td.actions {
    display: flex;
  }
}

/* Final header-action contract — overrides legacy responsive rules. */
.ww-site-header .ww-header-actions {
  display: grid;
  grid-template-columns: repeat(3, 2.75rem);
  gap: 0.625rem;
}
.ww-site-header .ww-header-actions > a,
.ww-site-header .ww-header-actions > .ww-header-search,
.ww-site-header .ww-header-search button {
  width: 2.75rem;
  min-width: 2.75rem;
  height: 2.75rem;
  min-height: 2.75rem;
  padding: 0;
}
.ww-site-header .ww-header-actions > .ww-header-search {
  position: relative;
  display: grid;
  grid-template-columns: 2.75rem;
  border: 0;
}
.ww-site-header .ww-header-search input {
  position: absolute;
  z-index: 4;
  top: calc(100% + 0.5rem);
  right: 0;
  width: min(18rem, calc(100vw - 2rem));
  height: 2.75rem;
  padding: 0 0.75rem;
  border: 1px solid var(--ww-color-line);
  color: var(--ww-color-ink);
  background: #fff;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-0.35rem);
}
.ww-site-header .ww-header-search:focus-within input {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}
@media (max-width: 53.75rem) {
  .ww-site-header .ww-header-inner {
    grid-template-columns: 2.75rem minmax(4.5rem, 1fr) 8.75rem;
  }
  .ww-site-header .ww-header-actions,
  .ww-site-header .ww-header-actions > .ww-header-search {
    display: grid;
  }
  .ww-site-header .ww-header-actions { gap: 0.25rem; }
}

/* Checkout follows the same two-column Figma rhythm without redundant banners. */
.woocommerce-checkout .woocommerce-form-login-toggle,
.woocommerce-checkout .woocommerce-form-coupon-toggle {
  display: none;
}

@media (min-width: 48rem) {
  .woocommerce-checkout .ww-commerce-progress {
    margin-bottom: 5rem;
  }

  .woocommerce-checkout form.checkout {
    grid-template-columns: minmax(0, 60rem) minmax(0, 30rem);
    column-gap: 10rem;
  }

  .woocommerce-checkout #order_review_heading,
  .woocommerce-checkout #order_review {
    position: relative;
    top: -8.75rem;
  }
}

@media (max-width: 47.9375rem) {
  .woocommerce-cart .shop_table.cart tr.cart_item {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr) 2.75rem;
    grid-template-areas:
      'thumbnail name remove'
      'quantity quantity subtotal';
    align-items: start;
    gap: 1rem;
    min-height: 0;
    padding: 1.25rem 0;
    background: transparent;
  }

  .woocommerce-cart .shop_table.cart td {
    display: block;
    width: auto;
    max-width: none;
    padding: 0;
    border: 0;
    text-align: left;
  }

  .woocommerce-cart .shop_table.cart td::before {
    display: none;
    content: none;
  }

  .woocommerce-cart .shop_table.cart .product-remove {
    position: static;
    grid-area: remove;
    min-height: 0;
    justify-self: end;
  }

  .woocommerce-cart .shop_table.cart .product-thumbnail {
    grid-area: thumbnail;
    padding: 0;
  }

  .woocommerce-cart .shop_table.cart .product-name {
    grid-area: name;
    align-self: center;
  }

  .woocommerce-cart .shop_table.cart .product-price {
    display: none;
  }

  .woocommerce-cart .shop_table.cart .product-quantity {
    grid-area: quantity;
    align-self: center;
  }

  .woocommerce-cart .shop_table.cart .product-subtotal {
    grid-area: subtotal;
    align-self: center;
    justify-self: end;
    white-space: nowrap;
  }

  .woocommerce-cart .shop_table.cart td.actions {
    display: flex;
  }
}

/* Product detail Figma pass — measured against `Ключницы.pdf` (1920 × 2306).
   Reference boxes: stage 800 × 649 @ x160 y206, thumbs 184 × 184 step 205 @ y879,
   quantity stepper 110 × 40 @ x1153 y519, add-to-cart 426 × 60 @ x980 y603,
   related media 304 × 301. */
@media (min-width: 48rem) {
  .ww-figma-product-gallery {
    gap: 1.3125rem;
  }

  .ww-figma-product-gallery__stage,
  .single-product .ww-figma-product-gallery__stage {
    aspect-ratio: 800 / 649;
  }

  .ww-figma-product-gallery__thumbs {
    gap: 1.3125rem;
  }

  .ww-product-detail form.cart .quantity {
    grid-template-columns: auto 2.25rem 2.375rem 2.25rem;
  }

  .ww-quantity-label {
    margin-right: 3.6875rem;
  }

  .ww-product-detail form.cart .quantity .qty,
  .ww-product-detail form.cart .quantity .ww-quantity-button {
    height: 2.5rem;
    min-height: 2.5rem;
  }

  .ww-product-detail form.cart .single_add_to_cart_button {
    width: min(100%, 26.625rem);
    min-height: 3.75rem;
  }

  .ww-product-detail .related .ww-product-image,
  .ww-product-detail .upsells .ww-product-image {
    aspect-ratio: 304 / 301;
  }
}

/* Product detail Figma pass 2 — quantity stepper origin (x1153), related rhythm
   (heading y1237, media→title gap 26 px, two-line titles) per `Ключницы.pdf`. */
@media (min-width: 48rem) {
  .ww-product-detail form.cart .quantity {
    grid-template-columns: 10.8125rem 2.25rem 2.375rem 2.25rem;
  }

  .ww-quantity-label {
    margin-right: 0;
  }

  .ww-product-detail__below-summary > .related,
  .ww-product-detail__below-summary > .upsells {
    margin-top: 2rem;
  }

  .ww-product-detail .related .ww-product-title,
  .ww-product-detail .upsells .ww-product-title {
    margin-top: 1.625rem;
    min-height: 2.53rem;
  }
}

/* Shared product card meta — measured from `Магазин.pdf` 4-up row (card 386 px):
   media bottom 1445, title 1475-1514 (two 27 px lines, #222), price 1541-1563 (#737373),
   and from `Главная страница.pdf` peach row (card 385 px, compact 14 px meta).
   Desktop previously rendered title and price on one row in both places. */
@media (min-width: 48rem) {
  .ww-product-card .ww-product-meta {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .ww-product-card .ww-product-price {
    text-align: left;
  }

  .ww-catalog-grid .ww-product-card .ww-product-meta,
  .ww-product-detail .related .ww-product-meta,
  .ww-product-detail .upsells .ww-product-meta {
    padding-top: 1.875rem;
  }

  .ww-catalog-grid .ww-product-card .ww-product-title,
  .ww-product-detail .related .ww-product-title,
  .ww-product-detail .upsells .ww-product-title {
    min-height: 3.375rem;
    color: #222222;
    font-size: 1.25rem;
    line-height: 1.35;
  }

  .ww-catalog-grid .ww-product-card .ww-product-price,
  .ww-product-detail .related .ww-product-price,
  .ww-product-detail .upsells .ww-product-price {
    margin-top: 1.6875rem;
    color: #737373;
    font-size: 1.75rem;
  }

  .ww-figma-new .ww-product-meta {
    padding-top: 1.4375rem;
  }

  .ww-figma-new .ww-product-price {
    margin-top: 0.5rem;
  }
}

/* Home peach section bottom inset — `Главная страница.pdf` band 3390–4220 with the
   catalog CTA resting 180 px below the card row. */
@media (min-width: 48rem) {
  .ww-figma-new {
    padding-bottom: 1.5rem;
  }
}

/* Cart/checkout progress — `Корзина 1 экран.pdf`: 35 px circles starting at
   x162/y301, labels sized by content, 47 px connector arrows with 26/29 px insets. */
@media (min-width: 48rem) {
  .ww-commerce-progress ol {
    width: auto;
    margin-top: 2.75rem;
  }

  .ww-commerce-progress li {
    flex: 0 0 auto;
    gap: 1.1875rem;
  }

  .ww-commerce-progress li:not(:last-child)::after {
    flex: 0 0 2.9375rem;
    margin-inline: 1.625rem 1.8125rem;
  }
}

/* Checkout steps 2 and 3 in the left column — `Корзина 2 экран.pdf`:
   two delivery cards on one row, payment methods as a four-up card row. */
.ww-checkout-section {
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
}

.ww-checkout-section > h3 {
  margin: 0 0 1.5rem;
  font-size: 1.125rem;
  font-weight: 700;
}

.ww-delivery-options {
  display: grid;
  gap: 1.375rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.ww-delivery-option > label {
  display: grid;
  gap: 0.5rem;
  min-height: 12.5rem;
  padding: 1.25rem;
  border: 1px solid var(--ww-color-line);
  cursor: pointer;
}

.ww-delivery-option > label:has(input:checked) {
  background: #f5f5f5;
}

.ww-delivery-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.ww-delivery-option__name {
  font-size: 0.9375rem;
}

.ww-delivery-option__cost {
  align-self: end;
  color: var(--ww-color-muted);
  font-size: 0.875rem;
}

.ww-checkout-payment .wc_payment_methods {
  display: grid;
  gap: 1.375rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.ww-checkout-payment .wc_payment_methods > li {
  min-height: 5rem;
  padding: 1rem;
  border: 1px solid var(--ww-color-line);
}

.ww-checkout-submit {
  margin-top: 1.75rem;
}

.ww-checkout-submit #place_order {
  width: 100%;
  min-height: 4.75rem;
  border: 0;
  border-radius: 0;
  color: var(--ww-color-paper);
  background: var(--ww-color-ink);
  font-size: 1rem;
}

@media (min-width: 48rem) {
  .ww-delivery-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ww-checkout-payment .wc_payment_methods {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Keep both new checkout steps in the left column of the checkout grid. */
@media (min-width: 48rem) {
  form.checkout > .ww-checkout-section {
    grid-column: 1;
  }

  form.checkout > .order_review_heading,
  form.checkout > .woocommerce-checkout-review-order {
    grid-column: 2;
  }

  form.checkout > .order_review_heading {
    grid-row: 1;
  }

  form.checkout > .woocommerce-checkout-review-order {
    grid-row: 2;
  }

  form.checkout > .ww-checkout-submit {
    grid-column: 2;
    grid-row: 3;
    align-self: start;
  }
}

/* Checkout left column trim — `Корзина 2 экран.pdf` has no «Детали» block and
   labels the address line «Адрес доставки:». */
.woocommerce-checkout .woocommerce-additional-fields:not(:has(.form-row)) {
  display: none;
}

.woocommerce-checkout .ww-checkout-address::before {
  display: block;
  margin-bottom: 1rem;
  font-size: 1.125rem;
  font-weight: 700;
  content: 'Адрес доставки:';
}

.ww-checkout-section {
  margin-top: 3.25rem;
}

/* Account cards — `Профиль 3.pdf`: 1510 px card shell inside the 1600 px route
   and a 90 px avatar whose right edge sits at x1726. */
@media (min-width: 48rem) {
  .ww-account-profile__card,
  .ww-account-orders .ww-order-card {
    width: min(100%, 94.375rem);
    margin-inline: auto;
  }

  .ww-account-avatar {
    width: 5.625rem;
    height: 5.625rem;
    /* Flush with the card column below it — a 34 px inset read as misaligned. */
    margin-right: 0;
  }
}

/* Password reset confirmation — `Востановление пароля 3.pdf` (1920 × 1099):
   centred heading at y330 with the shop link and cart CTA on one row. */
.ww-password-reset-done {
  padding-block: clamp(6rem, 14vw, 13.75rem) clamp(4rem, 9vw, 8rem);
  text-align: center;
}

.ww-password-reset-done h1 {
  margin: 0 0 2.625rem;
  font-family: 'WW Display', 'PT Serif', Georgia, serif;
  font-size: 2.6875rem;
  font-weight: 700;
}

.ww-password-reset-done__actions {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 5vw, 5.875rem);
  align-items: center;
  justify-content: center;
}

.ww-password-reset-done__back {
  color: var(--ww-color-ink);
  font-size: 1.375rem;
  text-decoration: none;
}

.ww-password-reset-done__cart {
  display: inline-flex;
  gap: 2.25rem;
  align-items: center;
  min-height: 5rem;
  min-width: 22.75rem;
  box-sizing: border-box;
  padding-inline: 3rem;
  border-radius: 0;
  color: var(--ww-color-paper);
  background: var(--ww-color-ink);
  font-size: 1.375rem;
}

/* The completion route has no account header: preserve the exported frame's
   723 px footer edge while leaving ordinary login/registration spacing intact. */
body.ww-password-reset-done-route .ww-auth-route {
  padding-block: 3.5625rem 7.125rem;
}

body.ww-password-reset-done-route .ww-password-reset-done {
  padding-block: 6.5rem 8rem;
}

@media (min-width: 80rem) {
  body.ww-password-reset-done-route .ww-password-reset-done__actions {
    width: 49.75rem;
    margin-left: calc(50% - 19.8125rem);
    justify-content: space-between;
  }
}

/* Final completion-frame typography overrides the compact global Woo button
   treatment; these values match the supplied 1920 px Figma export. */
body.ww-password-reset-done-route .ww-password-reset-done h1 {
  font-family: 'PT Serif', Georgia, serif;
  font-size: 2.25rem;
  font-weight: 400;
  display: inline-block;
  transform: translateX(0.9375rem) scaleX(0.84);
}

body.ww-password-reset-done-route .ww-password-reset-done__cart {
  font-size: 1.375rem;
  font-weight: 400;
  letter-spacing: normal;
}

body.ww-password-reset-done-route .ww-password-reset-done__arrow {
  display: inline-flex;
  width: 3rem;
  transform: rotate(180deg);
}

body.ww-password-reset-done-route .ww-password-reset-done__arrow img {
  display: block;
  width: 100%;
  height: auto;
  filter: invert(1);
}

/* Tablet checkout: the two-column composition needs the 1600 px desktop shell
   (960 + 480 + 160 gap), so 768–1279 px stacks the form above the summary
   instead of squeezing both columns below 400 px. */
@media (min-width: 48rem) and (max-width: 79.9375rem) {
  .woocommerce-checkout form.checkout,
  .woocommerce-cart .ww-commerce-route .woocommerce {
    grid-template-columns: minmax(0, 1fr);
  }

  .woocommerce-checkout form.checkout > .ww-checkout-section,
  .woocommerce-checkout form.checkout > .order_review_heading,
  .woocommerce-checkout form.checkout > .woocommerce-checkout-review-order,
  .woocommerce-checkout form.checkout > .ww-checkout-submit,
  .woocommerce-checkout form.checkout > #customer_details,
  .woocommerce-checkout form.checkout > #order_review,
  .woocommerce-checkout form.checkout > #order_review_heading {
    grid-column: 1;
    grid-row: auto;
  }

  .ww-checkout-payment .wc_payment_methods {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .woocommerce-cart .woocommerce > .ww-cart-shell,
  .woocommerce-cart form.woocommerce-cart-form {
    width: 100%;
  }
}

/* ---------------------------------------------------------------------------
   Mobile pass (≤767 px): legible type, reachable targets and no clipped rows.
   Desktop keeps the source-frame sizes; only the small end is corrected.
   --------------------------------------------------------------------------- */
@media (max-width: 47.9375rem) {
  /* Type floor: nothing below 12 px, UI copy at 14, controls at 15–16. */
  .ww-kicker,
  .ww-home-section__head .ww-kicker {
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
  }

  .ww-button,
  .ww-button.ww-shop-design__category-link,
  .woocommerce a.button,
  .woocommerce button.button,
  .woocommerce input.button {
    min-height: 2.75rem;
    padding: 0.75rem 1.25rem;
    font-size: 0.9375rem;
  }

  .ww-product-badge {
    font-size: 0.75rem;
  }

  .ww-product-card .ww-product-title,
  .ww-product-title {
    font-size: 0.875rem;
    line-height: 1.4;
  }

  .ww-product-card .ww-product-price,
  .ww-product-price {
    font-size: 1rem;
  }

  .ww-figma-new .ww-product-title,
  .ww-figma-new .ww-product-price {
    font-size: 0.875rem;
  }

  .ww-cart-count {
    font-size: 0.75rem;
  }

  label,
  .woocommerce form .form-row label,
  .ww-catalog-field > span,
  .ww-catalog-stock > span,
  .ww-newsletter-form label {
    font-size: 0.875rem;
  }

  /* 16 px keeps iOS from zooming the viewport when a field takes focus. */
  input[type="text"],
  input[type="tel"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="number"],
  select,
  textarea {
    font-size: 1rem;
  }

  /* Reachable targets. */
  .ww-product-title a,
  .ww-cart-drawer__item-copy > a,
  .ww-footer-column a,
  .ww-primary-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
  }

  .ww-brand {
    min-height: 2.75rem;
  }

  /* Partner logos were laid out on a fixed five-column grid and ran past the
     viewport edge; wrap them into two rows instead. */
  .ww-figma-partners__logos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.75rem 1.25rem;
  }

  .ww-figma-partners__logos > * {
    min-width: 0;
    max-width: 100%;
  }

  .ww-figma-partners__logos img {
    height: auto;
    max-width: 100%;
  }

  /* The intro sat in two columns on a phone, squeezing the heading to 105 px
     and the copy to 166 px; stack it instead. */
  .ww-figma-showcase__intro {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }

  .ww-figma-showcase__rail a span {
    font-size: 0.8125rem;
    line-height: 1.4;
  }

  .ww-figma-showcase__rail a {
    scroll-snap-align: start;
  }

  .ww-figma-showcase__rail {
    scroll-snap-type: x proximity;
  }

  .woocommerce table.shop_table th,
  .woocommerce table.shop_table td,
  .woocommerce-checkout-review-order-table th,
  .woocommerce-checkout-review-order-table td {
    font-size: 0.875rem;
  }

  .woocommerce form .form-row input.input-text,
  .woocommerce form .form-row textarea,
  .woocommerce form .form-row select,
  .woocommerce-page form .form-row input.input-text,
  .ww-auth-form input,
  .ww-catalog-controls input,
  .ww-catalog-controls select {
    font-size: 1rem;
  }

  /* Three full step labels do not fit 390 px at a legible size, so phones show
     the numbered steps and spell out only the current one. */
  .ww-commerce-progress ol {
    gap: 0.5rem;
  }

  .ww-commerce-progress li {
    flex: 0 0 auto;
    gap: 0.5rem;
    font-size: 0.8125rem;
  }

  .ww-commerce-progress li strong {
    display: none;
  }

  .ww-commerce-progress li.is-active strong {
    display: inline;
    font-size: 0.8125rem;
  }

  .ww-commerce-progress li:not(:last-child)::after {
    flex: 0 0 1.5rem;
    margin-inline: 0.5rem;
  }

  /* Catalog controls open to 459 px on a phone; keep them collapsed by default. */
  .ww-catalog-controls > summary {
    min-height: 2.75rem;
    display: flex;
    align-items: center;
    font-size: 0.9375rem;
  }
}

/* Card wishlist control — the source frames mark a saved card with a plain white
   star in the top-right corner, not a filled white tile. */
.ww-wishlist-link--overlay {
  top: 1rem;
  right: 1rem;
  width: 2.75rem;
  height: 2.75rem;
  color: #ffffff;
  background: transparent;
  font-size: 1.5rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

.ww-wishlist-link--overlay:hover,
.ww-wishlist-link--overlay:focus-visible,
.ww-wishlist-link--overlay.is-saved {
  color: #ffffff;
  background: transparent;
}

.ww-wishlist-link--overlay.is-saved {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* WooCommerce sale flash on the product page kept its default olive pill and
   sat at -6/-6, hanging off the top-left corner. Match the catalog badge. */
.single-product .ww-product-detail span.onsale,
.woocommerce span.onsale {
  position: absolute;
  top: 1rem;
  left: 1rem;
  right: auto;
  z-index: 3;
  min-height: 0;
  padding: 0.375rem 0.75rem;
  border-radius: 0;
  margin: 0;
  color: var(--ww-color-paper);
  background: var(--ww-color-ink);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1.4;
  text-transform: none;
}

.single-product .ww-product-detail__gallery {
  position: relative;
}

/* The home header is transparent over the dark hero on desktop, so its controls
   are white. On phones the same header is solid white and the search and menu
   icons disappeared into it. */
@media (max-width: 47.9375rem) {
  body.home .ww-site-header .ww-header-search,
  body.home .ww-site-header .ww-header-search button,
  body.home .ww-site-header .ww-header-search .dashicons,
  body.home .ww-site-header .ww-primary-nav .dashicons {
    color: var(--ww-color-ink);
  }
}

/* Buttons in every source frame («Добавить в корзину», «Оформить заказ»,
   «Создать аккаунт») are sentence case at a regular weight with no tracking.
   The theme had rendered them uppercase, bold and letter-spaced. */
.ww-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.ww-checkout-submit #place_order,
.single_add_to_cart_button,
.checkout-button {
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
}

.ww-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.ww-checkout-submit #place_order,
.single_add_to_cart_button,
.checkout-button {
  font-size: 1rem;
}

/* «Распродано» / «Скидка» read as sentence case in the frames too. */
.ww-product-badge,
.woocommerce span.onsale {
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
}

/* Shop hero — `Магазин.pdf` shows the headline alone, set in caps, with no
   kicker and no button; the whole banner is the link to the product. */
.ww-shop-design__hero .ww-storefront-banner__title {
  text-transform: uppercase;
}

.ww-storefront-banner__link {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
}

.ww-shop-design__hero .ww-storefront-banner__inner {
  position: relative;
  z-index: 3;
  pointer-events: none;
}

/* Burger menu laid its links out in a row, pushing «Контакты» to x357+83 past
   the 390 px viewport. Stack the open menu instead. */
@media (max-width: 47.9375rem) {
  .ww-js .ww-nav.is-open,
  .ww-site-header .ww-nav.is-open {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr);
    justify-items: stretch;
    justify-self: stretch;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-bottom: 1rem;
  }

  .ww-site-header .ww-nav.is-open > *,
  .ww-site-header .ww-nav.is-open .ww-nav__menu,
  .ww-site-header .ww-nav.is-open .ww-header-search--mobile,
  .ww-nav.is-open .ww-nav__menu,
  .ww-nav.is-open ul {
    flex: 1 1 100%;
    min-width: 100%;
  }

  .ww-nav.is-open .ww-nav__menu,
  .ww-nav.is-open ul {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 0;
  }

  .ww-nav.is-open > *,
  .ww-nav.is-open li {
    width: 100%;
    min-width: 0;
  }

  .ww-nav.is-open a {
    width: 100%;
    min-height: 3.25rem;
    padding-inline: 1rem;
    border-bottom: 1px solid var(--ww-color-line);
    font-size: 1rem;
  }

  .ww-nav.is-open .ww-header-search--mobile {
    width: calc(100% - 2rem);
    margin: 1rem;
  }
}

/* Mobile home «Товары» — `01-home` frame puts the carousel first and centres the
   heading and copy underneath it; desktop keeps intro-then-rail. */
@media (max-width: 47.9375rem) {
  .ww-figma-showcase {
    display: flex;
    flex-direction: column;
  }

  .ww-figma-showcase__rail {
    order: 1;
    grid-auto-flow: column;
    grid-auto-columns: 21.25%;
    grid-template-columns: none;
    gap: 3.75%;
    height: auto;
    overflow-x: auto;
  }

  .ww-figma-showcase__rail a {
    aspect-ratio: 85 / 196;
  }

  .ww-figma-showcase__intro {
    order: 2;
    margin-top: 2.25rem;
    text-align: center;
  }

  .ww-figma-showcase__intro h2 {
    text-align: center;
  }
}

/* The display face is a variable font; hold its width axis at the 71 % measured
   from the source headings. */
html {
  font-variation-settings: 'wdth' 71;
}

/* Mobile footer — `01-home` frame keeps all four columns on one row at a small
   size, 365 px tall in a 400 px frame; the theme was folding them into two
   columns and stretching the footer to over 1000 px. */
@media (max-width: 47.9375rem) {
  .ww-site-footer .ww-footer-main,
  body.home .ww-site-footer .ww-footer-main,
  .post-type-archive-product .ww-site-footer .ww-footer-main {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    min-height: 0;
    gap: 1.25rem 0.5rem;
    padding: 3.5rem 0 2.5rem;
  }

  .ww-site-footer .ww-footer-column {
    min-width: 0;
    gap: 0.9rem;
  }

  .ww-site-footer .ww-footer-column > *,
  .ww-site-footer .ww-footer-column a,
  .ww-site-footer .ww-footer-column p,
  .ww-site-footer .ww-footer-column li {
    max-width: 100%;
    font-size: 0.625rem;
    line-height: 1.35;
    /* `anywhere` split «Конфиденциальность» into a dangling «ь»; hyphenate
       instead and only break as a last resort. */
    overflow-wrap: break-word;
    hyphens: auto;
  }

  .ww-site-footer .ww-footer-kicker,
  .ww-site-footer .ww-footer-column h2,
  .ww-site-footer .ww-footer-column h3 {
    margin-bottom: 0.75rem;
    font-size: 0.6875rem;
  }

  .ww-site-footer .ww-footer-column > a:first-of-type {
    margin-top: 1.125rem;
  }

  .ww-site-footer .ww-footer-column a {
    display: block;
    min-height: 2rem;
  }
}

/* Menu contents differ by breakpoint: desktop keeps the source header links,
   phones use the `03-menu` list (Каталог, Корзина, Личный кабинет, Избранное,
   Наша команда). */
@media (min-width: 48rem) {
  .ww-site-header .ww-nav__menu--mobile,
  .ww-nav__menu--mobile {
    display: none;
  }
}

@media (max-width: 53.75rem) {
  .ww-site-header .ww-nav__menu:not(.ww-nav__menu--mobile) {
    display: none;
  }

  .ww-site-header .ww-nav__menu--mobile {
    display: flex;
  }

  .ww-nav.is-open .ww-nav__menu--mobile a {
    font-size: 1.0625rem;
  }
}

/* Product header on phones — `04-product`: back arrow and wordmark; the
   burger, search and cart step aside. */
.ww-header-back {
  display: none;
}

@media (max-width: 47.9375rem) {
  .single-product .ww-site-header .ww-menu-toggle,
  .single-product .ww-site-header .ww-header-actions .ww-header-search,
  .single-product .ww-site-header .ww-cart-link {
    display: none;
  }

  .single-product .ww-header-back {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    color: var(--ww-color-ink);
    background: transparent;
    font-size: 1.5rem;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
  }

  .single-product .ww-site-header .ww-header-inner {
    position: relative;
  }
}

/* Mobile product gallery — `04-product`: the stage runs nearly edge to edge
   (383 × 539 in a 401 px frame) and the thumbnails are a scrollable strip of
   ~99 px tiles, not a fixed four-up grid inside the 32 px gutter. */
@media (max-width: 47.9375rem) {
  .single-product .ww-figma-product-gallery {
    margin-inline: -1.625rem;
    gap: 0.875rem;
  }

  .single-product .ww-figma-product-gallery__stage {
    aspect-ratio: 383 / 539;
  }

  .single-product .ww-figma-product-gallery__thumbs {
    grid-auto-flow: column;
    grid-auto-columns: 24.7%;
    grid-template-columns: none;
    gap: 3.2%;
    overflow-x: auto;
    scroll-snap-type: x proximity;
  }

  .single-product .ww-figma-product-gallery__thumb {
    scroll-snap-align: start;
  }

  .single-product .ww-product-detail form.cart .single_add_to_cart_button {
    min-height: 3.5rem;
  }
}

/* Mobile cart — two frames disagree: `08-cart-filled` shows a stripped state
   with no prices or summary, while `10-cart-summary` shows the full one with the
   step indicator, per-line prices, Товары/Доставка, the promo field and «Итог».
   The fuller frame wins because it also carries the promo code the contract
   requires. */
@media (max-width: 47.9375rem) {
  .woocommerce-cart .shop_table.cart .product-price {
    display: block;
    grid-area: price;
    align-self: center;
    justify-self: end;
    font-size: 1rem;
    white-space: nowrap;
  }

  .woocommerce-cart .shop_table.cart tr.cart_item {
    grid-template-columns: 5.625rem minmax(0, 1fr) auto;
    grid-template-areas:
      'thumbnail name price'
      'thumbnail name quantity';
  }

  .woocommerce-cart .cart_totals th,
  .woocommerce-cart .cart_totals td {
    padding-block: 1rem;
    font-size: 1rem;
  }

  .woocommerce-cart .cart_totals .order-total th,
  .woocommerce-cart .cart_totals .order-total td {
    padding-block: 1.25rem;
    font-size: 1.25rem;
  }

  .woocommerce-cart .ww-cart-promo p {
    font-size: 0.9375rem;
    line-height: 1.45;
  }

  .woocommerce-cart .ww-cart-promo__form {
    display: grid;
    gap: 0;
  }

  .woocommerce-cart .ww-cart-promo__form input,
  .woocommerce-cart .ww-cart-promo__form button {
    width: 100%;
    min-height: 3.25rem;
  }

  .woocommerce-cart .wc-proceed-to-checkout .checkout-button {
    width: 100%;
    min-height: 3.5rem;
  }
}

/* Mobile cart row — `08-cart-filled` puts the thumbnail, the wrapped name and
   the stepper on one line, with the remove control tucked to the right. */
@media (max-width: 47.9375rem) {
  .woocommerce-cart .shop_table.cart tr.cart_item {
    grid-template-columns: 5.625rem minmax(0, 1fr) auto;
    grid-template-areas:
      'thumbnail name quantity'
      'thumbnail name remove';
    align-items: center;
    gap: 0.75rem 1rem;
  }

  .woocommerce-cart .shop_table.cart .product-thumbnail img,
  .woocommerce-cart .shop_table.cart .product-thumbnail a {
    display: block;
    width: 5.625rem;
    height: 5.625rem;
    object-fit: cover;
  }

  .woocommerce-cart .shop_table.cart .product-quantity {
    margin-left: auto;
  }

  .woocommerce-cart .shop_table.cart .product-quantity {
    grid-area: quantity;
    justify-self: end;
    align-self: center;
  }

  .woocommerce-cart .shop_table.cart .product-remove {
    grid-area: remove;
    justify-self: end;
    align-self: start;
  }

  .woocommerce-cart .shop_table.cart .product-name {
    align-self: center;
    font-size: 0.875rem;
    line-height: 1.35;
  }
}

/* The cart stepper is 94 px wide in `08-cart-filled`; at 160 px it squeezed the
   product name to zero on a 400 px screen. */
@media (max-width: 47.9375rem) {
  .woocommerce-cart .shop_table.cart .quantity {
    display: grid;
    grid-template-columns: repeat(3, 1.9375rem);
    width: 5.875rem;
  }

  .woocommerce-cart .shop_table.cart .quantity .qty,
  .woocommerce-cart .shop_table.cart .quantity .ww-quantity-button {
    width: 100%;
    min-width: 0;
    height: 2.5rem;
    min-height: 2.5rem;
    padding: 0;
  }

  .woocommerce-cart .shop_table.cart .product-name {
    min-width: 0;
  }
}

/* Mobile checkout — `17-checkout-1` keeps delivery and payment as two-up card
   rows even on a 400 px screen; only the recipient fields go full width. */
@media (max-width: 47.9375rem) {
  .ww-delivery-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.875rem;
  }

  .ww-delivery-option > label {
    min-height: 10rem;
    padding: 0.875rem;
    font-size: 0.875rem;
  }

  .ww-checkout-payment .wc_payment_methods {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.875rem;
  }

  .ww-checkout-payment .wc_payment_methods > li {
    min-height: 6rem;
    padding: 0.75rem;
  }

  .ww-checkout-payment .wc_payment_methods label {
    font-size: 0.8125rem;
    line-height: 1.3;
  }
}

/* Account tabs on phones — `20-account-orders` splits «Заказы» and «Профиль»
   into two centred halves at 18 px, not a tight left-aligned pair. */
@media (max-width: 47.9375rem) {
  body.logged-in.woocommerce-account .ww-account-heading .woocommerce-MyAccount-navigation ul,
  .woocommerce-account .woocommerce-MyAccount-navigation ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  body.logged-in.woocommerce-account .ww-account-heading .woocommerce-MyAccount-navigation a,
  .woocommerce-account .woocommerce-MyAccount-navigation a {
    display: grid;
    place-items: center;
    min-height: 3rem;
    font-size: 1.125rem;
  }

  .woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
  .woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--orders.is-active a {
    text-decoration: underline;
    text-underline-offset: 0.4rem;
  }

  .ww-account-avatar {
    width: 5.625rem;
    height: 5.625rem;
  }
}

/* Mobile empty states — `05-cart-empty`, `06-wishlist-empty`, `07-404`:
   the illustration is 223 × 386, the 404 numerals stand 151 px tall and the
   button is ~210 px wide, all centred. */
@media (max-width: 47.9375rem) {
  .ww-empty-state {
    text-align: center;
  }

  .ww-route-404 .ww-empty-state--not-found .ww-empty-state__dog,
  .ww-wishlist-empty .ww-empty-state--wishlist .ww-empty-state__dog,
  .ww-cart-empty .ww-empty-state--cart .ww-empty-state__dog,
  .ww-empty-state__dog {
    width: min(100%, 13.9375rem);
    height: auto;
    margin-inline: auto;
  }

  .ww-empty-state__copy {
    margin-top: 2.25rem;
    text-align: center;
  }

  .ww-route-404 .ww-not-found-code,
  .ww-not-found-code {
    margin: 0 0 1.25rem;
    font-size: 10.25rem;
    line-height: 0.88;
  }

  .ww-empty-state .ww-section-title,
  .ww-empty-state h1,
  .ww-empty-state h2 {
    font-size: 1.5rem;
    line-height: 1.2;
    text-transform: uppercase;
  }

  .ww-route-404 .ww-empty-state .ww-button,
  .ww-empty-state .ww-button {
    width: min(100%, 13.125rem);
    min-height: 3.4375rem;
    margin-inline: auto;
  }
}

/* Registration confirmation — `16-register-done`: centred heading, a wide dark
   CTA to the cart and a plain link back to the shop. */
.ww-register-done {
  padding-block: clamp(3rem, 10vw, 7rem) clamp(2rem, 6vw, 5rem);
  text-align: center;
}

.ww-register-done h1 {
  margin: 0 0 clamp(2rem, 6vw, 4rem);
  font-family: var(--ww-font-display);
  font-size: clamp(1.25rem, 4.5vw, 1.75rem);
  font-weight: 400;
}

.ww-register-done__cart {
  display: inline-flex;
  gap: 1.5rem;
  align-items: center;
  justify-content: center;
  width: min(100%, 21.5rem);
  min-height: 4.5rem;
  margin-inline: auto;
  color: var(--ww-color-paper);
  background: var(--ww-color-ink);
}

.ww-register-done__cart > span {
  display: inline-flex;
  width: 2.3125rem;
  flex: 0 0 2.3125rem;
  transform: rotate(180deg);
}

.ww-register-done__cart > span img {
  display: block;
  width: 100%;
  height: auto;
  filter: invert(1);
}

.ww-register-done__cart:hover,
.ww-register-done__cart:focus-visible {
  color: var(--ww-color-paper);
  border-color: var(--ww-color-ink);
  background: var(--ww-color-ink);
}

.ww-register-done__back {
  display: block;
  margin-top: 1.75rem;
  color: var(--ww-color-ink);
  font-size: 0.9375rem;
}

/* Account entry on phones — `13-login`: the login and register panels stack. */
@media (max-width: 47.9375rem) {
  .ww-auth-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 3rem;
  }

  .ww-auth-panel {
    text-align: center;
  }

  .ww-auth-panel h1 {
    text-align: center;
  }

  .ww-auth-form label {
    display: block;
    text-align: left;
  }
}

/* Login form on phones — `13-login`: the submit button and the reset link share
   one row, and the social buttons are small round icons. */
@media (max-width: 47.9375rem) {
  .ww-auth-form .ww-auth-form__actions,
  .ww-auth-form .ww-auth-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    align-items: center;
    justify-content: space-between;
  }

  .ww-auth-form .ww-auth-form__actions button[type='submit'],
  .ww-auth-form button[type='submit'],
  .ww-auth-form .woocommerce-form-login__submit {
    width: auto;
    min-width: 8.75rem;
    min-height: 3rem;
    padding-inline: 1.5rem;
  }

  .ww-auth-panel .ww-auth-social a,
  .ww-auth-panel .ww-auth-social img,
  .ww-auth-social a,
  .ww-auth-social img {
    width: 2.25rem;
    height: 2.25rem;
  }

  .ww-auth-panel h1 {
    font-size: 1.5rem;
  }
}

/* About page on phones — `12-about`: the team grid keeps two columns with the
   caption under each tile, and section copy is centred. */
@media (max-width: 47.9375rem) {
  .ww-about-craft-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem 1rem;
  }

  .ww-about-craft-grid > * {
    min-width: 0;
  }

  .ww-about-craft-grid figcaption,
  .ww-about-craft-grid p {
    font-size: 0.8125rem;
    line-height: 1.3;
  }
}

/* Final phone alignment with the frames: the 404 button is ~210 px, and the
   login row keeps «Войти» beside «Забыли пароль?». These override the earlier
   full-width mobile defaults. */
@media (max-width: 47.9375rem) {
  .ww-route-404 .ww-empty-state--not-found .ww-button {
    width: min(100%, 13.125rem);
    min-height: 3.4375rem;
    margin-inline: auto;
    font-size: 0.9375rem;
  }

  body:not(.logged-in).woocommerce-account .ww-auth-form__actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }

  body:not(.logged-in).woocommerce-account .ww-auth-form__actions .button {
    width: auto;
    min-width: 8.75rem;
  }

  body:not(.logged-in).woocommerce-account .ww-auth-form__actions a {
    width: auto;
  }
}

/* Cart row areas — Woo assigns its own grid-area to the price cell, so pin the
   three cells explicitly: price sits above the stepper, per `10-cart-summary`. */
@media (max-width: 47.9375rem) {
  .woocommerce-cart .shop_table.cart tr.cart_item td.product-thumbnail {
    grid-area: thumbnail;
  }

  .woocommerce-cart .shop_table.cart tr.cart_item td.product-name {
    grid-area: name;
  }

  .woocommerce-cart .shop_table.cart tr.cart_item td.product-price {
    grid-area: price;
    align-self: start;
  }

  .woocommerce-cart .shop_table.cart tr.cart_item td.product-quantity {
    grid-area: quantity;
    align-self: end;
  }
}

/* SMS confirmation screen — `15-otp` / `23-password-otp`. Markup-only preview;
   see template-parts/otp-screen.php for why it is not wired into the flow. */
.ww-otp {
  padding-block: clamp(3rem, 9vw, 6rem) clamp(2rem, 6vw, 4rem);
  text-align: center;
}

.ww-otp h1 {
  max-width: 24ch;
  margin: 0 auto 0.75rem;
  font-family: var(--ww-font-display);
  font-size: clamp(1.25rem, 4.5vw, 1.625rem);
  font-weight: 400;
  line-height: 1.25;
}

.ww-otp__channel {
  margin: 0 0 clamp(2rem, 6vw, 3rem);
  font-size: 0.9375rem;
}

.ww-otp__form {
  display: grid;
  justify-items: center;
  gap: 1.5rem;
  width: min(100%, 21.5rem);
  margin-inline: auto;
}

.ww-otp__code {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-start;
  width: 100%;
  padding: 0;
  border: 0;
  margin: 0;
}

.ww-otp__code legend {
  width: 100%;
  padding: 0;
  margin-bottom: 0.75rem;
  font-size: 0.9375rem;
  text-align: left;
}

.ww-otp .ww-otp__code input[type='text'],
.woocommerce .ww-otp .ww-otp__code input[type='text'],
.ww-otp__code input {
  flex: 0 0 auto;
  width: 3.125rem;
  min-width: 3.125rem;
  height: 3.125rem;
  min-height: 3.125rem;
  padding: 0;
  border: 1px solid var(--ww-color-line);
  border-radius: 0;
  background: #fafafa;
  font-size: 1.25rem;
  line-height: 3.125rem;
  text-align: center;
}

.ww-otp__alt {
  width: 100%;
  margin: 0;
  font-size: 0.9375rem;
  text-align: left;
}

.ww-otp__alt-field {
  width: 100%;
  height: 3.25rem;
  border: 1px solid var(--ww-color-line);
  background: #f5f5f5;
}

.ww-otp__submit {
  width: 100%;
  min-height: 3.5rem;
  justify-content: center;
}

.ww-otp__notice {
  margin: 0;
  color: var(--ww-color-muted);
  font-size: 0.8125rem;
  line-height: 1.4;
}

/* The cart icon is now an SVG drawn in ink, so the legacy invert() that made the
   old white PNG visible has to go — on the home hero it flips to white instead. */
.ww-site-header .ww-header-actions .ww-cart-link img,
.ww-header-actions .ww-cart-link img,
body.home .ww-site-header .ww-header-actions .ww-cart-link img {
  filter: none;
}

@media (min-width: 53.8125rem) {
  body.home .ww-site-header .ww-header-actions .ww-cart-link img {
    filter: invert(1);
  }
}

/* Standalone forms on phones — order tracking, newsletter, inquiry: the fields
   were narrower than their container and the submit sat at label width, which
   read as ragged. Give both the full column. */
@media (max-width: 47.9375rem) {
  .ww-route-track-order form input[type='text'],
  .ww-route-track-order form input[type='email'],
  .woocommerce form.woocommerce-form-track-order input[type='text'],
  .woocommerce form.woocommerce-form-track-order input[type='email'],
  .ww-inquiry-form input,
  .ww-inquiry-form textarea,
  .ww-newsletter-form input[type='email'] {
    width: 100%;
    min-height: 3.125rem;
  }

  .woocommerce form.woocommerce-form-track-order .button,
  .ww-inquiry-form button,
  .ww-newsletter-form button {
    width: 100%;
    min-height: 3.25rem;
  }
}

/* Home promo and shop hero on phones — `01-home` / `02-shop`.
   The source photo is a 2064 × 512 panorama with the key holder at ~48 % across;
   at the previous 25 % object-position the crop showed the plants on the left,
   which read as a different picture. Heights follow the frames: 298 and 543. */
@media (max-width: 47.9375rem) {
  .ww-figma-promo {
    min-height: 18.625rem;
  }

  .ww-figma-promo img {
    height: 100%;
    min-height: 18.625rem;
    object-position: 48% 50%;
  }

  .ww-figma-hero {
    min-height: 0;
    height: 37rem;
  }

  /* `02-shop` draws a 600 px hero over a *different* photo — a dark wood wall
     with the key holder, wallet and glasses — which is not in any file we were
     given. The only asset we hold is the 2064 x 512 light panorama, and cropping
     that to 400 x 600 would zoom into a single dachshund. 25rem is the tallest
     crop that still shows the whole product sharply; swapping in the original
     photo would let this match the frame. */
  .ww-shop-design__hero {
    min-height: 25rem;
  }

  .ww-shop-design__hero .ww-storefront-banner__media img {
    height: 100%;
    object-position: 48% 50%;
  }
}

/* `01-home` promo carries the headline only — no button; the whole banner is the
   link. Desktop keeps its call to action. */
.ww-figma-promo {
  position: relative;
}

.ww-figma-promo__link {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.ww-figma-promo__copy {
  z-index: 3;
}

@media (max-width: 47.9375rem) {
  .ww-figma-promo__cta {
    display: none;
  }

  .ww-figma-promo__copy {
    pointer-events: none;
  }
}

/* Account header on phones — `20-account-orders` / `21-account-profile`:
   «Вернуться» at y133, a 46 px avatar below it, tabs at y244 and the first card
   at y342. The avatar had been drawn at 90 px on the «Вернуться» line, which
   pulled everything up and left a gap under the tabs. */
@media (max-width: 47.9375rem) {
  .ww-account-avatar {
    position: static;
    display: block;
    width: 2.875rem;
    height: 2.875rem;
    margin: 0.5rem 0 0 auto;
  }

  .ww-account-avatar img {
    width: 1.75rem;
    height: 1.75rem;
  }

  .ww-account-heading {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .ww-account-heading .ww-account-avatar {
    order: 1;
  }

  .ww-account-heading .woocommerce-MyAccount-navigation {
    order: 2;
  }

  body.logged-in.woocommerce-account .ww-account-heading .woocommerce-MyAccount-navigation {
    margin-top: 1.75rem;
  }

  body.logged-in.woocommerce-account .woocommerce-MyAccount-content {
    margin-top: 2.5rem;
  }
}

/* ===========================================================================
   Mobile home, block by block against `01-home` (400 px frame).
   Frame map: header 74 · hero 699 · gap 39 · promo 298 · gap 50 · rail 195 ·
   intro 291 · about-dark 227 · about-photo 1404 · new 468 · dark 91 ·
   photo 338 · review 387 · newsletter 463 · footer 330 = 5365.
   =========================================================================== */
@media (max-width: 47.9375rem) {
  /* 1. Header — 74 px in the frame. */
  .ww-site-header .ww-header-inner {
    min-height: 4.625rem;
  }

  /* 2. Hero — 699 px; it had been cut to 592. */
  .ww-figma-hero {
    height: 43.6875rem;
  }

  /* 3–4. Gap 39 px, promo exactly 298 px. */
  .ww-figma-promo {
    margin-top: 2.4375rem;
    min-height: 18.625rem;
    height: 18.625rem;
  }

  .ww-figma-promo img {
    height: 18.625rem;
    min-height: 0;
  }

  .ww-figma-promo__copy {
    position: absolute;
    inset: 0;
    display: grid;
    align-content: center;
    padding: 0 1.5rem;
  }
}

@media (max-width: 47.9375rem) {
  /* 5. Product rail — 195 px tall in the frame (was 180). */
  .ww-figma-showcase__rail {
    height: 12.1875rem;
  }

  .ww-figma-showcase__rail a {
    aspect-ratio: auto;
    height: 100%;
  }

  /* 6. «ТОВАРЫ» heading and copy occupy 291 px, centred on white. */
  .ww-figma-showcase__intro {
    display: grid;
    align-content: center;
    min-height: 13.25rem;
    margin-top: 0;
    text-align: center;
  }

  .ww-figma-showcase__intro p {
    margin: 1rem auto 0;
    max-width: 22rem;
    font-size: 0.9375rem;
    line-height: 1.5;
  }

  /* 7. «О КОМПАНИИ» sits on white with a 1404 px photo below it. */
  .ww-figma-about {
    padding-block: 0;
    background: #ffffff;
  }

  .ww-figma-about h2 {
    min-height: 4.875rem;
    display: grid;
    place-items: center;
    padding: 0;
    margin: 0;
  }

  .ww-figma-showcase {
    padding-bottom: 0;
    margin-bottom: 0;
  }

  .ww-figma-about {
    margin-top: 0;
  }

  .ww-figma-about .ww-figma-about__media > img {
    width: 100%;
    height: 51.1875rem;
    object-fit: cover;
  }
}

@media (max-width: 47.9375rem) {
  /* 8–13. Remaining home bands from `01-home`:
     peach 814 · partners 469 · process 431 · reviews 387 · newsletter 466. */
  .ww-figma-new {
    display: grid;
    align-content: center;
    min-height: 50.875rem;
    padding-block: 2.5rem;
  }

  .ww-figma-partners {
    display: grid;
    align-content: center;
    min-height: 29.3125rem;
    padding-block: 2rem;
  }

  .ww-figma-process {
    min-height: 26.9375rem;
  }

  .ww-figma-review {
    display: grid;
    align-content: center;
    min-height: 24.1875rem;
    padding-block: 2rem;
  }

  .ww-footer-newsletter,
  .ww-newsletter {
    display: grid;
    align-content: center;
    min-height: 29.125rem;
  }

  /* Peach band is 814 px in the frame; trim the inner padding to match. */
  .ww-figma-new {
    min-height: 50.875rem;
    padding-block: 1rem;
  }

  .ww-site-footer .ww-footer-main {
    min-height: 20.5625rem;
  }
}

@media (max-width: 47.9375rem) {
  /* `02-shop` card rows: the media is 197 px tall, section headings 21 px,
     captions 13 px, and the rhythm repeats every ~396 px. */
  .ww-catalog-grid .ww-product-card .ww-product-image,
  .ww-figma-new .ww-product-image,
  .ww-home-product-section .ww-product-image {
    aspect-ratio: auto;
    height: 12.3125rem;
  }

  .ww-home-product-section__title,
  .ww-figma-new h2 {
    font-size: 1.0625rem;
    letter-spacing: 0.04em;
  }
}

@media (max-width: 47.9375rem) {
  /* `04-product`: the thumbnail strip is 132 px tall, the stage 539 px. */
  .single-product .ww-figma-product-gallery__thumbs {
    grid-auto-columns: 24.7%;
    height: 8.25rem;
  }

  .single-product .ww-figma-product-gallery__thumb {
    height: 100%;
    aspect-ratio: auto;
  }
}

@media (max-width: 47.9375rem) {
  /* `10-cart-summary`: a cart line is 102 px tall with a 90 px square thumb,
     the step strip is 26 px and the checkout button 71 px. */
  .woocommerce-cart .shop_table.cart tr.cart_item {
    align-items: center;
    gap: 0.5rem 1rem;
    padding-block: 0.75rem;
  }

  .woocommerce-cart .shop_table.cart .product-thumbnail img,
  .woocommerce-cart .shop_table.cart .product-thumbnail a {
    height: 5.625rem;
  }

  .woocommerce-cart .shop_table.cart .product-name {
    font-size: 0.8125rem;
    line-height: 1.3;
  }

  .woocommerce-cart .ww-commerce-progress ol {
    margin-top: 1.25rem;
  }

  .woocommerce-cart .ww-commerce-progress li {
    font-size: 0.75rem;
  }

  .woocommerce-cart .ww-commerce-progress li span {
    width: 1.625rem;
    height: 1.625rem;
    min-width: 1.625rem;
  }

  .woocommerce-cart .wc-proceed-to-checkout .checkout-button {
    min-height: 4.4375rem;
  }
}

@media (max-width: 47.9375rem) {
  .woocommerce-cart .shop_table.cart td.product-thumbnail img {
    width: 5.625rem !important;
    height: 5.625rem !important;
    object-fit: cover;
  }

  .woocommerce-cart .ww-commerce-progress li {
    min-height: 0;
  }

  .woocommerce-cart .ww-commerce-progress li strong {
    line-height: 1.2;
  }

  .woocommerce-cart .ww-commerce-progress ol {
    align-items: center;
    min-height: 1.625rem;
  }
}

@media (max-width: 47.9375rem) {
  /* Cart line: 102 px total — 90 px thumb plus 6 px padding, price and stepper
     share the right column without stacking extra rows. */
  .woocommerce-cart .shop_table.cart tr.cart_item {
    grid-template-areas: 'thumbnail name price' 'thumbnail name quantity';
    grid-template-rows: auto auto;
    align-content: center;
    padding-block: 0.375rem;
    gap: 0.25rem 0.75rem;
  }

  .woocommerce-cart .shop_table.cart td.product-price {
    font-size: 0.9375rem;
    line-height: 1.2;
  }

  .woocommerce-cart .shop_table.cart .quantity .qty,
  .woocommerce-cart .shop_table.cart .quantity .ww-quantity-button {
    height: 2.125rem;
    min-height: 2.125rem;
  }

  /* The frame draws no remove control, but a cart with no way to remove a line
     is broken; keep it as a small × pinned to the top right of the row. */
  .woocommerce-cart .shop_table.cart .product-remove {
    position: absolute;
    top: 0.25rem;
    right: 0;
    display: block;
  }

  .woocommerce-cart .shop_table.cart .product-remove a {
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    font-size: 1rem;
    line-height: 1;
  }

  .woocommerce-cart .shop_table.cart tr.cart_item {
    position: relative;
  }

  .woocommerce-cart .ww-commerce-progress li strong {
    font-size: 0.6875rem;
  }
}

@media (max-width: 47.9375rem) {
  /* `17-checkout-1`: a labelled field occupies 95 px — 17 px label, 50 px input,
     28 px gap. Ours were running at 175 px, which pushed every later section
     roughly 400 px down the page. */
  .woocommerce-checkout form.checkout .form-row {
    margin-bottom: 1.75rem;
    padding: 0;
  }

  .woocommerce-checkout form.checkout .form-row label {
    display: block;
    margin-bottom: 0.375rem;
    font-size: 0.875rem;
    line-height: 1.2;
  }

  .woocommerce-checkout form.checkout .form-row .input-text,
  .woocommerce-checkout form.checkout .form-row select {
    height: 3.125rem;
    min-height: 3.125rem;
    padding: 0 0.875rem;
  }

  .woocommerce-checkout .ww-commerce-progress ol {
    align-items: center;
    min-height: 1.625rem;
    margin-top: 1.25rem;
  }

  .woocommerce-checkout .ww-commerce-progress li {
    font-size: 0.75rem;
  }

  .woocommerce-checkout .ww-commerce-progress li span {
    width: 1.625rem;
    height: 1.625rem;
    min-width: 1.625rem;
  }

  .woocommerce-checkout .ww-commerce-progress li strong {
    font-size: 0.6875rem;
  }

  .ww-checkout-section {
    margin-top: 2.25rem;
  }

  .ww-checkout-section > h3 {
    margin-bottom: 1rem;
    font-size: 1rem;
  }
}

/* ===========================================================================
   BLOCK 1 — mobile header, measured from `01-home` (400 px frame):
   burger glyph 20x14 at x29, wordmark 132x31 at x72, and three 16 px icons
   centred at x303 / x335 / x367. Header band is 74 px tall.
   =========================================================================== */
@media (max-width: 47.9375rem) {
  .ww-site-header .ww-header-inner {
    min-height: 4.625rem;
    padding-inline: 1.8125rem 1.0625rem;
    gap: 0;
  }

  .ww-site-header .ww-menu-toggle {
    width: 1.75rem;
    min-width: 1.75rem;
    height: 2.75rem;
    padding: 0;
    margin-left: -0.1875rem;
  }

  .ww-site-header .ww-menu-toggle span[aria-hidden] {
    width: 1.25rem;
    height: 1px;
  }

  .ww-site-header .ww-brand {
    margin-left: 1.5rem;
  }

  .ww-site-header .ww-brand__image {
    width: 8.25rem;
    height: auto;
  }

  .ww-site-header .ww-header-actions {
    gap: 0;
    margin-left: auto;
  }

  .ww-site-header .ww-header-actions > * {
    width: 2rem;
    min-width: 2rem;
    height: 2.75rem;
  }

  .ww-site-header .ww-header-actions .dashicons {
    font-size: 1rem;
    width: 1rem;
    height: 1rem;
    line-height: 1;
  }

  .ww-site-header .ww-header-actions .ww-cart-link img {
    width: 0.9375rem;
    height: 1rem;
  }
}

@media (max-width: 47.9375rem) {
  /* Header container spans the full width with the frame's 29/17 px gutters. */
  .ww-site-header .ww-container.ww-header-inner {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-inline: 1.8125rem 1.0625rem;
  }

  .ww-site-header .ww-header-inner .ww-menu-toggle {
    margin-left: 0;
  }

  .ww-site-header .ww-header-actions .ww-wishlist-action,
  .ww-site-header .ww-header-actions .ww-header-search,
  .ww-site-header .ww-header-actions .ww-cart-link {
    width: 2rem;
    min-width: 2rem;
    height: 2.75rem;
  }

  .ww-site-header .ww-brand {
    margin-left: 1.4375rem;
  }
}

@media (max-width: 47.9375rem) {
  /* Icon centres sit 32 px apart in the frame (303 / 335 / 367), so the row
     carries no gap and the wordmark starts at x72. */
  .ww-site-header .ww-header-inner .ww-header-actions {
    display: flex;
    gap: 0;
    column-gap: 0;
  }

  .ww-site-header .ww-header-inner .ww-brand {
    /* Grid column 2 opens at 73 px; the frame starts the wordmark at 72. */
    margin-left: -0.0625rem;
  }

  /* `01-home` measures the header band at 74 px; keep the bar from clipping. */
  .ww-site-header {
    min-height: 4.625rem;
  }

  .ww-site-header .ww-header-inner .ww-brand__image {
    width: 8.25rem;
    max-width: 8.25rem;
  }
}

/* ---------------------------------------------------------------------------
   `03-menu` — the burger menu is a blank white sheet: no wordmark, no icons,
   a single long back arrow at the top right (x333–370, ink centre y≈50) and
   five links whose text starts at x34, first row ink at y195, pitch 52 px.
   Measured type: Inter Regular ≈23 px. It covers the whole burger range, so a
   tablet gets the same sheet instead of three desktop links strewn across a
   207 px drawer.
   ------------------------------------------------------------------------ */
@media (max-width: 53.75rem) {
  .ww-menu-open .ww-site-header {
    position: relative;
    z-index: 50;
    background: #fff;
  }

  .ww-menu-open .ww-site-header .ww-brand,
  .ww-menu-open .ww-site-header .ww-header-actions {
    display: none;
  }

  .ww-menu-open .ww-site-header .ww-container.ww-header-inner {
    position: relative;
  }

  .ww-menu-open .ww-site-header .ww-menu-toggle {
    /* The open sheet is a descendant of the header, so the arrow needs to sit
       above it inside the same stacking context. */
    z-index: 60;
    position: absolute;
    top: 2.75rem;
    right: 1.875rem;
    width: 2.3125rem;
    min-width: 2.3125rem;
    height: 0.75rem;
    padding: 0;
    border: 0;
    background: url("assets/icons/arrow-back-long.svg") no-repeat center / 2.3125rem 0.75rem;
  }

  .ww-menu-open .ww-site-header .ww-menu-toggle > span[aria-hidden="true"] {
    display: none;
  }

  .ww-menu-open.ww-js .ww-site-header .ww-nav.is-open,
  .ww-menu-open .ww-site-header .ww-nav.is-open,
  .ww-js .ww-site-header .ww-nav.is-open {
    position: fixed;
    inset: 0;
    top: 0;
    z-index: 40;
    display: block;
    width: 100%;
    max-height: none;
    padding: 11.0625rem 0 0;
    background: #fff;
    overflow-y: auto;
  }

  .ww-site-header .ww-nav.is-open .ww-header-search--mobile {
    display: none;
  }

  .ww-nav.is-open .ww-nav__menu--mobile {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .ww-nav.is-open .ww-nav__menu--mobile li {
    display: block;
    margin: 0;
    padding: 0;
  }

  .ww-nav.is-open .ww-nav__menu--mobile a {
    display: block;
    padding: 0 1.0625rem 0 2.125rem;
    border: 0;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 1.4375rem;
    font-weight: 400;
    line-height: 3.25rem;
    color: #0B0B0A;
    text-decoration: none;
  }

  .ww-nav.is-open .ww-nav__menu--mobile a::after {
    content: none;
  }
}

/* ---------------------------------------------------------------------------
   `01-home` hero — the phone frame overlays the workshop photo (y74–772) with
   a 28 px rule at y673, a two-line uppercase caption (Inter 600, ~12.75 px,
   ink y696–704 and y712–722, left x25) and a double chevron at y741–755.
   ------------------------------------------------------------------------ */
@media (max-width: 47.9375rem) {
  /* The frame's header band is 74 px, not the 69 px the shared constant uses. */
  body.home .ww-main,
  body:not(.home) .ww-main {
    padding-top: 4.625rem;
  }

  .ww-figma-hero .ww-figma-hero__copy {
    left: 1.5rem;
    right: auto;
    bottom: auto;
    top: 37.4375rem;
    width: 11.75rem;
    max-width: 11.75rem;
    padding: 0;
    display: block;
  }

  .ww-figma-hero .ww-figma-hero__copy > span[aria-hidden="true"]:not(.ww-figma-hero__scroll) {
    display: block;
    width: 1.75rem;
    height: 0.125rem;
    margin: 0;
    background: #fff;
  }

  .ww-figma-hero .ww-figma-hero__copy h1 {
    /* 188 px keeps the frame's break: «…СУВЕНИРЫ» / «С АВТОРСКИМ ДИЗАЙНОМ». */
    max-width: 11.75rem;
    margin: 1.1875rem 0 0;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #fff;
  }

  .ww-figma-hero .ww-figma-hero__scroll {
    display: block;
    width: 1.4375rem;
    height: 0.9375rem;
    margin-top: 0.9375rem;
    background: url("assets/icons/hero-chevrons.svg") no-repeat center / 1.4375rem 0.9375rem;
  }
}

@media (min-width: 48rem) {
  /* `.ww-figma-hero__copy span` styles every span in the block as the rule, so
     hiding the phone-only scroll cue needs at least the same weight. */
  .ww-figma-hero__copy > .ww-figma-hero__scroll {
    display: none;
  }
}

/* ---------------------------------------------------------------------------
   `01-home` promo band (y812–1111) — the phone frame drops the CTA and sets
   the title in four uppercase lines: Inter 600 ≈13.75 px on an 18 px rhythm,
   left x24, first ink row at y877.
   ------------------------------------------------------------------------ */
@media (max-width: 47.9375rem) {
  .ww-figma-promo .ww-figma-promo__copy {
    position: absolute;
    transform: none;
    top: 3.8125rem;
    bottom: auto;
    left: 1.5rem;
    right: auto;
    display: block;
    width: 8.125rem;
    max-width: 8.125rem;
    padding: 0;
  }

  .ww-figma-promo .ww-figma-promo__copy h2 {
    max-width: 8.125rem;
    margin: 0;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.859375rem;
    font-weight: 600;
    line-height: 1.125rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #fff;
  }
}

/* ---------------------------------------------------------------------------
   `01-home` «Товары» (y1161–1543) — a rail of 86×198 photo cards on a 100 px
   pitch starting at x32, then the centred heading (ink y1409–1426) and the
   centred body copy (Inter 14/17, ink from y1446, ~290 px measure).
   ------------------------------------------------------------------------ */
@media (max-width: 47.9375rem) {
  .ww-figma-showcase.ww-container {
    /* The frame stacks the rail above the copy; the rail already carries order:1. */
    margin-top: -0.375rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    row-gap: 0;
    height: auto;
    min-height: 0;
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-inline: 0;
  }

  .ww-figma-showcase .ww-figma-showcase__rail {
    display: flex;
    gap: 0.875rem;
    width: 100%;
    margin: 0;
    padding-block: 0;
    padding-inline: 2rem 0;
    /* Snapping otherwise aligns card 1 past the 32 px gutter and parks the rail
       at its end offset. */
    scroll-padding-inline-start: 2rem;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .ww-figma-showcase .ww-figma-showcase__rail::-webkit-scrollbar {
    display: none;
  }

  .ww-figma-showcase .ww-figma-showcase__rail > a {
    flex: 0 0 5.375rem;
    width: 5.375rem;
    height: 12.375rem;
  }

  .ww-figma-showcase .ww-figma-showcase__rail > a > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* The frame leaves the rail photos uncaptioned. */
  .ww-figma-showcase .ww-figma-showcase__rail > a > span {
    display: none;
  }

  .ww-figma-showcase .ww-figma-showcase__intro {
    display: block;
    /* The desktop rule centres the copy in a fixed-height panel, which halves
       every margin nudge; the frame stacks it from the top. */
    align-content: start;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 0 1.5rem;
    text-align: center;
  }

  .ww-figma-showcase .ww-figma-showcase__intro h2 {
    margin: 3.5625rem 0 0;
    font-size: 1.6rem;
    line-height: 1.25rem;
    text-align: center;
  }

  .ww-figma-showcase .ww-figma-showcase__intro p {
    max-width: 18.125rem;
    margin: 0.6875rem auto 0;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.875rem;
    line-height: 1.0625rem;
    text-align: center;
  }
}

/* ---------------------------------------------------------------------------
   `01-home` «О компании» — the frame runs the centred heading (ink y1602–1619)
   58 px under the «Товары» copy and drops the 400×819 photo 30 px below it.
   ------------------------------------------------------------------------ */
@media (max-width: 47.9375rem) {
  .ww-figma-about > .ww-container {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-inline: 1.5rem;
  }

  .ww-figma-about > .ww-container h2 {
    height: auto;
    min-height: 0;
    margin: 3.75rem 0 0;
    padding: 0;
    font-size: 1.6rem;
    line-height: 1.25rem;
    text-align: center;
  }

  .ww-figma-about .ww-figma-about__media > img {
    display: block;
    margin-top: 1.375rem;
  }
}

/* ---------------------------------------------------------------------------
   `01-home` «Новинки» (beige band y2468–3282) — two 169×197 cards per row on a
   10 px gutter from x29; the frame overlays the photo with plain white
   «Распродано» copy (no pill), a solid 16×14 star inset 7/6, and a 48×20 bar
   carrying the basket glyph flush to the bottom-right corner. Captions run
   Inter 13/15 with the price 7 px under them in Inter 10.5.
   ------------------------------------------------------------------------ */
@media (max-width: 47.9375rem) {
  .ww-figma-new,
  .ww-figma-new > .ww-container {
    height: auto;
    min-height: 0;
    align-content: start;
  }

  .ww-figma-new {
    padding-block: 1rem 2.3125rem;
  }

  .ww-figma-new > .ww-container {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-inline: 1.8125rem 1.5rem;
  }

  .ww-figma-new > .ww-container > h2 {
    height: auto;
    min-height: 0;
    margin: 2.0625rem 0 0;
    font-size: 1.6rem;
    line-height: 1.25rem;
    text-align: center;
  }

  .ww-figma-new .ww-product-grid {
    margin-top: 2.625rem;
    display: grid;
    align-items: start;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 0.625rem;
    row-gap: 3.8125rem;
  }

  .ww-figma-new .ww-product-card,
  .ww-product-card {
    display: block;
    height: auto;
    min-height: 0;
  }

  .ww-figma-new .ww-product-card__visual,
  .ww-product-card__visual,
  .ww-figma-new .ww-product-image,
  .ww-product-card .ww-product-image {
    position: relative;
    height: 12.3125rem;
  }

  .ww-figma-new .ww-product-image > img,
  .ww-product-card .ww-product-image > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .ww-figma-new .ww-product-badge,
  .ww-product-card .ww-product-badge {
    inset: 0.625rem auto auto 0.5625rem;
    padding: 0;
    background: none;
    color: #fff;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.65625rem;
    font-weight: 400;
    line-height: 0.75rem;
    letter-spacing: 0;
    text-transform: none;
  }

  .ww-figma-new .ww-wishlist-link--overlay,
  .ww-product-card .ww-wishlist-link--overlay {
    inset: 0.4375rem 0.375rem auto auto;
    width: 1rem;
    min-width: 0;
    height: 0.9375rem;
    padding: 0;
    background: none;
    border: 0;
    color: #fff;
  }

  .ww-figma-new .ww-wishlist-link--overlay > span[aria-hidden="true"],
  .ww-product-card .ww-wishlist-link--overlay > span[aria-hidden="true"] {
    display: block;
    width: 1rem;
    height: 0.9375rem;
    font-size: 0;
    background: currentColor;
    -webkit-mask: url("assets/icons/star-solid.svg") no-repeat center / contain;
    mask: url("assets/icons/star-solid.svg") no-repeat center / contain;
  }

  .ww-figma-new .ww-product-actions,
  .ww-product-card .ww-product-actions {
    position: absolute;
    inset: auto 0 0 auto;
    width: 3rem;
    height: 1.25rem;
    min-height: 0;
    margin: 0;
    gap: 0;
  }

  .ww-figma-new .ww-product-actions .button,
  .ww-product-card .ww-product-actions .button,
  .ww-figma-new .ww-product-actions .added_to_cart,
  .ww-product-card .ww-product-actions .added_to_cart {
    width: 3rem;
    min-width: 0;
    height: 1.25rem;
    min-height: 0;
    padding: 0;
    border-radius: 0;
    background-size: 0.75rem 0.8125rem;
  }

  .ww-figma-new .ww-product-meta,
  .ww-product-card .ww-product-meta {
    display: block;
    height: auto;
    min-height: 0;
    padding: 0;
  }

  .ww-figma-new .ww-product-title,
  .ww-product-card .ww-product-title {
    height: auto;
    min-height: 0;
    margin: 1.1875rem 0 0;
  }

  .ww-figma-new .ww-product-title a,
  .ww-product-card .ww-product-title a {
    display: block;
    height: auto;
    min-height: 0;
    padding: 0;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 0.9375rem;
  }

  .ww-figma-new .ww-product-price,
  .ww-product-card .ww-product-price {
    height: auto;
    min-height: 0;
    margin: 0.25rem 0 0;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.65625rem;
    line-height: 0.75rem;
  }

  .ww-figma-new > .ww-container > .ww-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 5.875rem;
    min-width: 0;
    height: 2.5rem;
    min-height: 0 !important;
    margin-top: 0.75rem;
    line-height: 1;
    padding: 0;
    font-size: 0.6875rem;
  }
}

/* ---------------------------------------------------------------------------
   `01-home` «Партнёры» — heading ink 81 px under the beige band, then a two
   column logo wall: the left column starts at x57 (124/117/125 wide), the
   right at x236 (GQ 53×52, WSJ 101×60), first row ink at y3427.
   ------------------------------------------------------------------------ */
@media (max-width: 47.9375rem) {
  .ww-figma-partners.ww-container {
    width: 100%;
    max-width: none;
    height: auto;
    min-height: 0;
    align-content: start;
    margin-inline: 0;
    padding-inline: 3.5625rem 1.5rem;
  }

  .ww-figma-partners > h2 {
    height: auto;
    min-height: 0;
    margin: 3.5rem 0 0;
    margin-left: -2.0625rem;
    font-size: 1.6rem;
    line-height: 1.25rem;
    text-align: center;
  }

  .ww-figma-partners .ww-figma-partners__logos {
    display: grid;
    grid-template-columns: 7.8125rem 6.3125rem;
    column-gap: 3.375rem;
    row-gap: 3.0625rem;
    align-items: center;
    justify-items: start;
    height: auto;
    min-height: 0;
    margin-top: 2.3125rem;
  }

  .ww-figma-partners .ww-figma-partners__logos img {
    height: auto;
    object-fit: contain;
  }

  .ww-figma-partners .ww-figma-partners__logos img:nth-child(1) { width: 7.75rem; }
  .ww-figma-partners .ww-figma-partners__logos img:nth-child(2) { width: 3.3125rem; }
  .ww-figma-partners .ww-figma-partners__logos img:nth-child(3) { width: 7.3125rem; }
  .ww-figma-partners .ww-figma-partners__logos img:nth-child(4) { width: 6.3125rem; }
  .ww-figma-partners .ww-figma-partners__logos img:nth-child(5) {
    grid-column: 1;
    justify-self: start;
    width: 7.8125rem;
    margin-top: 2rem;
  }
}

/* ---------------------------------------------------------------------------
   `01-home` tail — the workshop photo sits 87 px under the logo wall, and the
   «Отзывы» band runs the heading 105 px below it (ink y4287), the author at
   Inter 14.75 (ink y4361) and the quote at Inter 12/15 from y4398, with the
   113×162 photo pinned at x256/y4352.
   ------------------------------------------------------------------------ */
@media (max-width: 47.9375rem) {
  .ww-figma-partners.ww-container {
    padding-bottom: 3.5rem;
  }

  .ww-figma-review.ww-container {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    width: 100%;
    max-width: none;
    height: auto;
    min-height: 0;
    margin-inline: 0;
    padding-inline: 2rem 0;
  }

  .ww-figma-review > div {
    height: auto;
    min-height: 0;
    width: 12.5rem;
    /* Clears the heading, which the frame centres across the whole band. */
    margin-top: 9.0625rem;
  }

  /* The markup nests the heading in the text column; the frame centres it. */
  .ww-figma-review h2 {
    position: absolute;
    inset: 6.75rem 0 auto 0;
    width: 100%;
    height: auto;
    min-height: 0;
    margin: 0;
    font-size: 1.6rem;
    line-height: 1.25rem;
    text-align: center;
  }

  .ww-figma-review .ww-figma-review__author {
    height: auto;
    min-height: 0;
    margin: 0;
    margin-left: 0.1875rem;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.921875rem;
    font-weight: 400;
    line-height: 1.0625rem;
  }

  .ww-figma-review p {
    height: auto;
    min-height: 0;
    margin: 0.1875rem 0 0;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.75rem;
    line-height: 0.9375rem;
  }

  .ww-figma-review > img {
    margin-top: 8.625rem;
    width: 7.0625rem;
    height: 10.125rem;
    object-fit: cover;
  }
}

/* ---------------------------------------------------------------------------
   `01-home` newsletter (dark band, y4571–5035) — «Подпишитесь!» ink 98 px in,
   the subtitle 20 px under it, the three-line body from +236, the envelope at
   +303 and the 29 px tall field row at +346 (input 235 wide, button 98).
   ------------------------------------------------------------------------ */
@media (max-width: 47.9375rem) {
  .ww-footer-newsletter > .ww-container.ww-footer-newsletter__inner {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-inline: 2.125rem 2rem;
  }

  .ww-footer-newsletter .ww-newsletter-form {
    display: grid;
    grid-template-columns: 14.6875rem 6.125rem;
    height: auto;
    min-height: 0;
    gap: 0;
  }

  .ww-footer-newsletter .ww-newsletter-form > * {
    grid-column: 1 / -1;
  }

  .ww-footer-newsletter .ww-newsletter-form h2 {
    grid-row: 1;
    height: auto;
    min-height: 0;
    margin: 2.25rem 0 0;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.890625rem;
    font-weight: 400;
    line-height: 1.25rem;
    letter-spacing: 0;
    text-align: center;
    text-transform: none;
  }

  .ww-footer-newsletter .ww-newsletter-form__lead {
    grid-row: 2;
    margin: 0;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.90625rem;
    line-height: 1.25rem;
    text-align: center;
  }

  .ww-footer-newsletter .ww-newsletter-form__body {
    grid-row: 3;
    max-width: 19.25rem;
    margin: 6.3125rem auto 0;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.984375rem;
    line-height: 1.1875rem;
    text-align: center;
  }

  .ww-footer-newsletter .ww-newsletter-form__mark {
    grid-row: 4;
    width: 1.9375rem;
    height: 1.375rem;
    margin: 1rem auto 0;
    background: url("assets/icons/envelope.svg") no-repeat center / contain;
  }

  .ww-footer-newsletter .ww-newsletter-form > p:has(input[type="email"]) {
    grid-column: 1;
    grid-row: 5;
    height: auto;
    min-height: 0;
    margin: 1.3125rem 0 0;
  }

  .ww-footer-newsletter .ww-newsletter-form > p:has(input[type="email"]) label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .ww-footer-newsletter .ww-newsletter-form input[type="email"] {
    width: 100%;
    height: 1.8125rem;
    min-height: 0;
    padding: 0 0.5rem;
    border: 0;
    border-radius: 0;
    background: #fff;
  }

  .ww-footer-newsletter .ww-newsletter-form > .ww-button {
    grid-column: 2;
    grid-row: 5;
    justify-self: end;
    width: 6.125rem;
    min-width: 0;
    height: 1.8125rem;
    min-height: 0 !important;
    margin: 1.3125rem 0 0;
    padding: 0;
    font-size: 0.75rem;
    line-height: 1;
  }

  .ww-footer-newsletter .ww-newsletter-form__consent {
    grid-row: 6;
    margin: 1.75rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.1875rem;
    text-align: center;
  }
}

/* ---------------------------------------------------------------------------
   `01-home` footer — four link columns from x25 (67/100/67 wide), the column
   headings on one row (ink y5102) and links on a 31 px rhythm 51 px below.
   ------------------------------------------------------------------------ */
@media (max-width: 47.9375rem) {
  .ww-site-footer > .ww-container.ww-footer-main,
  body.home .ww-site-footer > .ww-container.ww-footer-main,
  .post-type-archive-product .ww-site-footer > .ww-container.ww-footer-main {
    display: grid;
    grid-template-columns: 4.1875rem 6.25rem 4.1875rem auto;
    column-gap: 0;
    row-gap: 0;
    width: 100%;
    max-width: none;
    height: auto;
    min-height: 0;
    align-items: start;
    margin-inline: 0;
    padding-inline: 1.5625rem 1rem;
  }

  .ww-site-footer .ww-footer-column {
    display: block;
    width: auto;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
  }

  .ww-site-footer .ww-footer-kicker {
    height: auto;
    min-height: 0;
    margin: 0 0 3.3125rem;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.6875rem;
    font-weight: 400;
    line-height: 0.75rem;
    letter-spacing: 0;
    text-transform: none;
  }

  .ww-site-footer .ww-footer-column > a:first-of-type {
    margin-top: 1.125rem;
  }

  .ww-site-footer .ww-footer-column a {
    display: block;
    height: auto;
    min-height: 0;
    margin: 0 0 1.1875rem;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.6875rem;
    line-height: 0.75rem;
  }
}

/* ===========================================================================
   Phone scaling — the frames are drawn on a 400 px canvas, so every rem based
   measure is tied to a root that tracks the viewport: 4vw is exactly 16 px at
   400 px, and the clamp keeps 320 px handsets from overflowing while stopping
   the design from ballooning past 430 px flagships (iPhone 15 Pro Max, Pixel
   Pro, Galaxy Ultra). Layout scales; the type floors below sit next to it so
   copy never drops under a readable size on the smallest screens.
   ========================================================================= */
@media (max-width: 47.9375rem) {
  :root {
    font-size: clamp(0.8rem, 4vw, 1.09375rem);
  }

  /* Nothing may push the document sideways. */
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

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

  /* --- fluid columns where the frame's fixed sums would overflow --------- */
  .ww-footer-newsletter .ww-newsletter-form {
    grid-template-columns: minmax(0, 1fr) 6.125rem;
  }

  .ww-footer-newsletter .ww-newsletter-form__body,
  .ww-footer-newsletter .ww-newsletter-form__lead,
  .ww-footer-newsletter .ww-newsletter-form__consent {
    max-width: 100%;
  }

  .ww-figma-partners .ww-figma-partners__logos {
    grid-template-columns: minmax(0, 7.8125rem) minmax(0, 6.3125rem);
  }

  .ww-figma-partners .ww-figma-partners__logos img {
    max-width: 100%;
  }

  .ww-figma-review > div {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    max-width: 12.5rem;
  }

  .ww-figma-review > img {
    flex: 0 0 auto;
  }

  .ww-site-footer > .ww-container.ww-footer-main,
  body.home .ww-site-footer > .ww-container.ww-footer-main,
  .post-type-archive-product .ww-site-footer > .ww-container.ww-footer-main {
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.08fr) minmax(0, 0.72fr) minmax(0, 1fr);
  }

  /* --- readability floors ----------------------------------------------- */
  /* Each floor keeps the element's own measured size as its base, so the
     frame's type scale survives and only the smallest screens are lifted. */
  .ww-figma-showcase .ww-figma-showcase__intro p {
    font-size: max(0.875rem, 12px);
  }

  .ww-figma-review p {
    font-size: max(0.75rem, 11px);
  }

  .ww-figma-review .ww-figma-review__author {
    font-size: max(0.921875rem, 13px);
  }

  .ww-footer-newsletter .ww-newsletter-form__body {
    font-size: max(0.984375rem, 13px);
  }

  .ww-footer-newsletter .ww-newsletter-form__lead {
    font-size: max(0.90625rem, 12px);
  }

  .ww-footer-newsletter .ww-newsletter-form h2 {
    font-size: max(0.890625rem, 12px);
  }

  .ww-figma-hero .ww-figma-hero__copy h1 {
    font-size: max(0.8125rem, 11px);
  }

  .ww-figma-promo .ww-figma-promo__copy h2 {
    font-size: max(0.859375rem, 11px);
  }

  .ww-figma-new .ww-product-title a {
    font-size: max(0.8125rem, 12px);
  }

  /* The menu sets its own scale — 23 px on the 400 px canvas. */
  .ww-nav.is-open .ww-nav__menu--mobile a {
    font-size: max(1.4375rem, 18px);
  }

  .ww-figma-new .ww-product-price,
  .ww-figma-new .ww-product-badge,
  .ww-site-footer .ww-footer-kicker,
  .ww-site-footer .ww-footer-column a {
    font-size: max(0.65625rem, 10px);
  }

  /* Controls stay tappable no matter how small the handset is. */
  .ww-site-header .ww-menu-toggle,
  .ww-site-header .ww-header-actions > * {
    min-height: 2.75rem;
  }
}

/* ---------------------------------------------------------------------------
   Tablets 768–860 — the compact bar turns white here (the ≤53.75rem block),
   but the home page's white ink for the logo and controls is declared later in
   the cascade, so search, wishlist and cart were white on white. Restate the
   ink at the end of the sheet, where it wins.
   ------------------------------------------------------------------------ */
@media (min-width: 48rem) and (max-width: 53.75rem) {
  body.home .ww-site-header,
  body.home .ww-site-header .ww-brand,
  body.home .ww-site-header .ww-nav a,
  body.home .ww-site-header .ww-header-actions a,
  body.home .ww-site-header .ww-header-actions button,
  body.home .ww-site-header .ww-header-actions .dashicons,
  body.home .ww-site-header .ww-menu-toggle {
    color: var(--ww-color-ink);
  }

  body.home .ww-site-header .ww-menu-toggle > span[aria-hidden="true"] {
    background: var(--ww-color-ink);
  }

  body.home .ww-site-header .ww-cart-count {
    color: var(--ww-color-paper);
    background: var(--ww-color-ink);
  }
}

@media (max-width: 53.75rem) {
  /* The compact bar has room for three controls; the account lives in the
     burger menu until the desktop bar takes over. */
  .ww-site-header .ww-header-actions .ww-account-link {
    display: none;
  }
}

/* ---------------------------------------------------------------------------
   Desktop header composition per `Главная страница.pdf` / `Магазин.pdf`: the
   logo sits at the container's left edge, then a right-aligned cluster of three
   text links, the underlined search field, and the control row in the frames'
   order — search, bag, account, wishlist. The account leaves the text nav (it
   was the fourth item and wrapped the three-column grid onto a second row).
   ------------------------------------------------------------------------ */
.ww-account-link {
  display: none;
}

@media (min-width: 53.8125rem) {
  .ww-site-header .ww-header-actions .ww-account-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    min-width: 2.75rem;
    padding: 0;
    border: 0;
  }

  .ww-site-header .ww-header-actions .ww-account-link img {
    width: 1.375rem;
    height: 1.375rem;
  }

  body.home .ww-site-header .ww-header-actions .ww-account-link img {
    filter: invert(1);
  }

  /* DOM order follows the phone frames (wishlist, search, cart); desktop
     reorders to the frame's search, bag, account, wishlist. */
  .ww-site-header .ww-header-actions .ww-header-search {
    order: 1;
  }

  .ww-site-header .ww-header-actions .ww-cart-link {
    order: 2;
  }

  .ww-site-header .ww-header-actions .ww-account-link {
    order: 3;
  }

  .ww-site-header .ww-header-actions .ww-wishlist-action {
    order: 4;
  }
}

/* ---------------------------------------------------------------------------
   Container proportion — both desktop frames run the content column at
   1600 of 1920 (83.33%) with 160 px gutters. The theme was using a fixed
   40 px gutter, so at 1440 the column ran 1360 wide (94%) and every section
   inside it read wider and pushed further out than the design. Track the
   frame's ratio instead, capped at the frame's own 1600 px.
   ------------------------------------------------------------------------ */
@media (min-width: 48rem) {
  /* Sixteen rules across the sheet size their own container with the gutter
     token, so the proportion belongs in the token — not in a single override
     that only the plain `.ww-container` selector would win. */
  :root {
    --ww-gutter: min(8.3333vw, 10rem);
  }
}

/* Header proportions read off `Магазин.pdf` at 1920 and expressed in vw so the
   whole bar scales with the viewport instead of mixing a fluid column with
   fixed 44 px controls (which pushed the row 19% past the column at 1440).
   Reference: logo 230, nav block 417 with 70 px item gaps, 105 px to the
   251 px field, 21 px to a 57 px icon pitch, and 69 px of trailing space.
   Each value is clamped so tablets keep usable control sizes. */
@media (min-width: 53.8125rem) {
  .ww-site-header .ww-header-inner {
    display: flex;
    align-items: center;
    gap: 0;
  }

  .ww-site-header .ww-brand {
    flex: 0 0 auto;
    width: clamp(9rem, 11.979vw, 14.375rem);
    max-width: none;
    height: auto;
    /* Guarantees clearance from the nav on narrow desktops; at wide widths the
       nav's auto margin absorbs it, so the frame positions are unchanged. */
    margin-right: 1.5rem;
  }

  .ww-site-header .ww-brand__image {
    width: 100%;
    max-width: 100%;
    height: auto;
  }

  /* The burger panel's own list and search form live inside the nav; above the
     burger breakpoint neither may render — the phone list was adding 638 px to
     the row's intrinsic width and shoving the controls off the column. */
  .ww-site-header .ww-nav .ww-header-search--mobile,
  .ww-site-header .ww-nav .ww-nav__menu--mobile {
    display: none;
  }

  .ww-site-header .ww-nav {
    flex: 0 0 auto;
    justify-self: auto;
    margin-left: auto;
    margin-right: clamp(1.5rem, 5.469vw, 6.5625rem);
  }

  .ww-site-header .ww-nav__menu {
    display: flex;
    align-items: center;
    width: auto;
    grid-template-columns: none;
    gap: clamp(1rem, 3.646vw, 4.375rem);
  }

  .ww-site-header .ww-nav a {
    font-size: clamp(0.8125rem, 0.9375vw, 1.125rem);
    white-space: nowrap;
  }

  .ww-site-header .ww-header-actions {
    flex: 0 0 auto;
    width: auto;
    gap: clamp(0.4rem, 0.677vw, 0.8125rem);
    /* The frame measures glyphs, we lay out 44 px boxes: aligning the star's
       centre (1680) rather than its ink edge puts the trailing gap at 58 px. */
    margin-right: clamp(0.75rem, 3.021vw, 3.625rem);
  }

  .ww-site-header .ww-header-actions > .ww-header-search {
    flex: 0 0 auto;
    width: clamp(8rem, 13.073vw, 15.6875rem);
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) clamp(2.25rem, 2.292vw, 2.75rem);
  }

  .ww-site-header .ww-header-actions > a,
  .ww-site-header .ww-header-actions .ww-account-link,
  .ww-site-header .ww-header-search button {
    width: clamp(2.25rem, 2.292vw, 2.75rem);
    min-width: 0;
  }

  .ww-site-header .ww-header-actions .dashicons {
    width: clamp(1.125rem, 1.146vw, 1.75rem);
    height: clamp(1.125rem, 1.146vw, 1.75rem);
    font-size: clamp(1.125rem, 1.146vw, 1.75rem);
  }

  .ww-site-header .ww-header-actions .ww-cart-link img,
  .ww-site-header .ww-header-actions .ww-account-link img {
    width: clamp(1.125rem, 1.146vw, 1.625rem);
    height: auto;
  }
}

/* ---------------------------------------------------------------------------
   Desktop hero per `Главная страница.pdf` at 1920: the rule is a 113×3 cream
   bar on the container's left edge at y628, the headline runs Inter 48/58
   from ink y688, and the hero band is 983 tall (51.2 vw). The theme was
   drawing a 2 px white rule and setting the headline at 53.6/52.5.
   ------------------------------------------------------------------------ */
@media (min-width: 48rem) {
  .ww-figma-hero .ww-figma-hero__copy {
    /* The copy is positioned inside the photo column (1600 of 1920), so the
       frame's x160 is 10% of it; the block sits 79 px off the hero's bottom. */
    left: 10%;
    bottom: clamp(2.5rem, 4.115vw, 4.9375rem);
  }

  .ww-figma-hero .ww-figma-hero__copy > span:not(.ww-figma-hero__scroll) {
    width: clamp(4.5rem, 5.885vw, 7.0625rem);
    height: 3px;
    /* 58 px from the rule to the cap line, less the headline's own leading. */
    margin-bottom: clamp(1.4rem, 2.344vw, 2.8125rem);
    background: #efdcc4;
  }

  .ww-figma-hero .ww-figma-hero__copy h1 {
    max-width: none;
    width: clamp(14rem, 22.24vw, 26.6875rem);
    font-size: clamp(1.75rem, 2.5vw, 3rem);
    line-height: 1.2083;
  }
}

/* ---------------------------------------------------------------------------
   Desktop promo band per the frame at 1920: the photo fills the 1600 column
   and stands 601 tall, the caption sits 303 px in at Inter 48/48 over three
   lines with its cap line 175 px into the band, and the CTA is a 200×46 slab
   417 px in. The theme was running a 514-tall band with 38.4/37.6 copy that
   wrapped onto four lines.
   ------------------------------------------------------------------------ */
@media (min-width: 48rem) {
  .ww-figma-promo {
    height: 31.302vw;
    max-height: 37.5625rem;
  }

  .ww-figma-promo > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .ww-figma-promo .ww-figma-promo__copy {
    position: absolute;
    top: 0;
    bottom: auto;
    left: 18.9375%;
    right: auto;
    display: block;
    /* The frame's caption is 19% narrower than Inter at the same cap height —
       the block was scaled horizontally in Figma. Keep Inter's metrics and give
       the column enough width to reproduce the frame's three-line structure. */
    width: 35%;
    padding: 0;
    transform: none;
  }

  .ww-figma-promo .ww-figma-promo__copy h2 {
    max-width: none;
    width: 100%;
    margin: 0;
    padding-top: clamp(4rem, 9.063vw, 10.875rem);
    font-family: var(--ww-font-sans);
    font-size: clamp(1.125rem, 2.5vw, 3rem);
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0;
  }

  .ww-figma-promo .ww-figma-promo__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(9rem, 10.417vw, 12.5rem);
    min-width: 0;
    height: clamp(2.5rem, 2.396vw, 2.875rem);
    min-height: 0;
    margin-top: clamp(2rem, 5.156vw, 6.1875rem);
    padding: 0;
    font-size: clamp(0.8125rem, 0.938vw, 1.125rem);
  }
}

/* ---------------------------------------------------------------------------
   Desktop «Товары» per the frame at 1920: a 300 px copy column on the
   container's left edge (heading ink 59 px into the band, body 245 px in at
   Inter 24.75/29) and a rail of 315×784 photos starting at x642 with a 6 px
   gutter, the fourth card clipped by the column's right edge.
   ------------------------------------------------------------------------ */
@media (min-width: 48rem) {
  .ww-figma-showcase.ww-container {
    display: grid;
    grid-template-columns: 18.75% minmax(0, 1fr);
    grid-template-rows: auto;
    column-gap: 11.375%;
    align-items: start;
  }

  .ww-figma-showcase .ww-figma-showcase__intro {
    order: 1;
    align-self: start;
    display: block;
    height: auto;
    min-height: 0 !important;
    align-content: start;
    padding: 0;
    text-align: left;
  }

  .ww-figma-showcase .ww-figma-showcase__intro h2 {
    margin: 0;
    padding-top: clamp(1.5rem, 2.865vw, 3.4375rem);
    font-size: clamp(1.5rem, 2.24vw, 2.6875rem);
    line-height: 1;
    text-align: left;
  }

  .ww-figma-showcase .ww-figma-showcase__intro p {
    max-width: none;
    margin: clamp(3rem, 7.24vw, 8.6875rem) 0 0;
    font-size: clamp(1rem, 1.289vw, 1.546875rem);
    line-height: 1.1717;
    text-align: left;
  }

  .ww-figma-showcase .ww-figma-showcase__rail {
    order: 2;
    align-self: start;
    height: 40.833vw;
    max-height: 49rem;
    display: flex;
    gap: 0.3125vw;
    width: auto;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }

  .ww-figma-showcase .ww-figma-showcase__rail > a {
    position: relative;
    flex: 0 0 16.406vw;
    width: 16.406vw;
    height: 40.833vw;
  }

  .ww-figma-showcase .ww-figma-showcase__rail > a > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .ww-figma-showcase .ww-figma-showcase__rail > a > span {
    display: none;
  }
}

/* ---------------------------------------------------------------------------
   Desktop «О компании» per the frame at 1920: the centred heading sits 155 px
   under the «Товары» rail, and the 1600×459 photo rides a full-bleed black
   band 64 px below it, inset 35 above and 53 below.
   ------------------------------------------------------------------------ */
@media (max-width: 47.9375rem) {
  .ww-figma-about .ww-figma-about__media {
    display: contents;
  }
}

@media (min-width: 48rem) {
  .ww-figma-about > .ww-container {
    padding-top: clamp(2rem, 4.531vw, 5.4375rem);
  }

  .ww-figma-about > .ww-container h2 {
    margin: 0;
    font-size: clamp(1.5rem, 2.24vw, 2.6875rem);
    line-height: 1;
    text-align: center;
  }

  .ww-figma-about .ww-figma-about__media {
    display: block;
    margin-top: clamp(1.25rem, 2.656vw, 3.1875rem);
    padding-block: clamp(1rem, 1.823vw, 2.1875rem) clamp(1.5rem, 2.76vw, 3.3125rem);
    background: #0b0b0a;
  }

  .ww-figma-about .ww-figma-about__media > img {
    display: block;
    width: min(83.3333%, var(--ww-container));
    height: 23.906vw;
    max-height: 28.6875rem;
    margin-inline: auto;
    object-fit: cover;
  }
}

/* ---------------------------------------------------------------------------
   Desktop «Новинки» per the frame at 1920: heading ink 50 px into the beige
   band at the display face 43 px, four 385×450 photos on a 403 px pitch from
   the container edge, captions in Inter 21.75/27, and a 200×51 «Все товары».
   ------------------------------------------------------------------------ */
@media (min-width: 48rem) {
  .ww-figma-new {
    padding-block: clamp(1.5rem, 2.396vw, 2.875rem) clamp(1.5rem, 3.177vw, 3.8125rem);
  }

  .ww-figma-new > .ww-container > h2 {
    margin-bottom: clamp(1.25rem, 2.083vw, 2.5rem);
    font-size: clamp(1.5rem, 2.24vw, 2.6875rem);
    line-height: 1;
  }

  .ww-figma-new .ww-product-title a {
    font-size: clamp(0.9375rem, 1.133vw, 1.359375rem);
    line-height: 1.241;
  }

  .ww-figma-new .ww-product-price {
    font-size: clamp(0.875rem, 1.042vw, 1.25rem);
  }

  .ww-figma-new > .ww-container > .ww-button {
    margin-top: clamp(1.5rem, 2.865vw, 3.4375rem);
    width: clamp(9rem, 10.417vw, 12.5rem);
    min-width: 0;
    height: clamp(2.5rem, 2.656vw, 3.1875rem);
    min-height: 0 !important;
    padding: 0;
    font-size: clamp(0.8125rem, 0.938vw, 1.125rem);
  }
}

/* ---------------------------------------------------------------------------
   Desktop «Партнёры» per the frame at 1920: the heading is centred with the
   logo row 146 px below it, and that row breaks out of the content column —
   it runs 1759 wide (91.6 vw) from x77 to x1836 with the marks spaced apart.
   Each logo is sized by the frame's ink height: 62, 66, 62, 61 and 104.
   ------------------------------------------------------------------------ */
@media (min-width: 48rem) {
  .ww-figma-partners.ww-container > h2 {
    font-size: clamp(1.5rem, 2.135vw, 2.5625rem);
    line-height: 1;
    text-align: center;
  }

  .ww-figma-partners .ww-figma-partners__logos {
    position: relative;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 91.615vw;
    max-width: none;
    margin-top: clamp(3rem, 6.979vw, 8.375rem);
    transform: translateX(-50%);
    grid-template-columns: none;
  }

  .ww-figma-partners .ww-figma-partners__logos img {
    width: auto;
    max-width: none;
    object-fit: contain;
  }

  .ww-figma-partners .ww-figma-partners__logos img:nth-child(1) { height: 3.229vw; }
  .ww-figma-partners .ww-figma-partners__logos img:nth-child(2) { height: 3.438vw; }
  .ww-figma-partners .ww-figma-partners__logos img:nth-child(3) { height: 3.229vw; }
  .ww-figma-partners .ww-figma-partners__logos img:nth-child(4) { height: 3.177vw; }
  .ww-figma-partners .ww-figma-partners__logos img:nth-child(5) { height: 5.417vw; }
}

/* ---------------------------------------------------------------------------
   Desktop tail per the frame at 1920 — the production photo runs 1600×430 in
   the column, «Отзывы» is a left-aligned heading beside a 778 px quote column
   and a 316×341 photo, the newsletter centres its copy over the wood band, and
   the footer's four link columns start at x293 on a 270 px pitch.
   ------------------------------------------------------------------------ */
@media (min-width: 48rem) {
  .ww-figma-process {
    margin-top: clamp(4rem, 8.802vw, 10.5625rem);
  }

  .ww-figma-process > img {
    display: block;
    width: min(83.3333%, var(--ww-container));
    height: 22.396vw;
    max-height: 26.875rem;
    margin-inline: auto;
    object-fit: cover;
  }

  .ww-figma-review.ww-container {
    padding-block: 0;
    display: grid;
    grid-template-columns: 8.4375% minmax(0, 1fr) 19.75%;
    column-gap: 2.5%;
    row-gap: 0;
    /* The photo spans both rows; without an explicit first row its 341 px
       height splits across them and pushes the quote down. */
    grid-template-rows: 5.625vw auto;
    align-items: start;
    margin-top: clamp(3rem, 5.677vw, 6.8125rem);
  }

  .ww-figma-review h2 {
    grid-column: 1;
    margin: 0;
    padding-top: clamp(0.5rem, 0.469vw, 0.5625rem);
    font-size: clamp(1.5rem, 2.318vw, 2.78125rem);
    line-height: 1;
    text-align: left;
  }

  /* The markup nests heading, author and quote in one div; the frame puts the
     heading in its own column, so the wrapper steps out of the layout. */
  .ww-figma-review > div {
    display: contents;
  }

  .ww-figma-review h2 {
    grid-column: 1;
    grid-row: 1;
  }

  .ww-figma-review .ww-figma-review__author {
    grid-column: 2;
    grid-row: 1;
  }

  .ww-figma-review > div > p:not(.ww-figma-review__author) {
    grid-column: 2;
    grid-row: 2;
  }

  .ww-figma-review > img {
    grid-row: 1 / span 2;
  }

  .ww-figma-review .ww-figma-review__author {
    margin: clamp(2rem, 4.688vw, 5.625rem) 0 0;
    font-size: clamp(1rem, 1.237vw, 1.484375rem);
    line-height: 1.2;
  }

  .ww-figma-review > div > p:not(.ww-figma-review__author) {
    margin: clamp(1rem, 2.969vw, 3.5625rem) 0 0;
    font-size: clamp(0.9375rem, 1.029vw, 1.234375rem);
    line-height: 1.215;
  }

  .ww-figma-review > img {
    grid-column: 3;
    width: 100%;
    height: 17.76vw;
    max-height: 21.3125rem;
    margin: 0;
    object-fit: cover;
  }

  .ww-footer-newsletter .ww-newsletter-form h2 {
    font-size: clamp(1rem, 1.042vw, 1.25rem);
  }

  .ww-footer-newsletter .ww-newsletter-form__body {
    font-size: clamp(0.875rem, 0.833vw, 1rem);
  }

  .ww-site-footer .ww-footer-kicker {
    font-size: clamp(0.875rem, 0.885vw, 1.0625rem);
  }

  .ww-site-footer .ww-footer-column a {
    font-size: clamp(0.75rem, 0.677vw, 0.8125rem);
  }
}

/* ---------------------------------------------------------------------------
   Desktop newsletter and footer per the frame at 1920: the wood band runs 464
   tall with the envelope, title (ink +161), body (+198), a 395+123 field row
   (+263) and the consent line (+320) centred; the footer keeps its four
   columns from x293 on a 270 px pitch with links on a 22 px rhythm.
   ------------------------------------------------------------------------ */
@media (min-width: 48rem) {
  .ww-footer-newsletter {
    padding-bottom: clamp(1rem, 1.875vw, 2.25rem);
  }

  .ww-footer-newsletter .ww-newsletter-form {
    display: grid;
    grid-template-columns: clamp(13rem, 20.573vw, 24.6875rem) clamp(5.5rem, 6.406vw, 7.6875rem);
    justify-content: center;
    align-content: start;
    row-gap: 0;
    column-gap: 0;
  }

  .ww-footer-newsletter .ww-newsletter-form > * {
    grid-column: 1 / -1;
    justify-self: center;
    text-align: center;
  }

  .ww-footer-newsletter .ww-newsletter-form__mark {
    display: block;
    grid-row: 1;
    width: 2.292vw;
    height: 1.615vw;
    margin: 0;
    background: url("assets/icons/envelope.svg") no-repeat center / contain;
  }

  .ww-footer-newsletter .ww-newsletter-form h2 {
    grid-row: 2;
    margin: 0;
    padding-top: clamp(1rem, 3.125vw, 3.75rem);
    line-height: 1.2;
    text-transform: none;
    letter-spacing: 0;
  }

  .ww-footer-newsletter .ww-newsletter-form__lead {
    display: none;
  }

  .ww-footer-newsletter .ww-newsletter-form__body {
    grid-row: 3;
    max-width: 45vw;
    margin: clamp(0.5rem, 0.677vw, 0.8125rem) 0 0;
    line-height: 1.2;
  }

  .ww-footer-newsletter .ww-newsletter-form > p:has(input[type="email"]) {
    grid-row: 4;
    grid-column: 1;
    justify-self: stretch;
    margin: clamp(0.75rem, 0.417vw, 0.5rem) 0 0;
  }

  .ww-footer-newsletter .ww-newsletter-form input[type="email"] {
    width: 100%;
    height: clamp(2rem, 1.667vw, 2rem);
    min-height: 2rem;
    padding: 0 0.5rem;
    border: 0;
    background: #fff;
  }

  .ww-footer-newsletter .ww-newsletter-form > .ww-button {
    grid-row: 4;
    grid-column: 2;
    justify-self: stretch;
    width: 100%;
    min-width: 0;
    height: clamp(2rem, 1.667vw, 2rem);
    min-height: 2rem !important;
    margin: clamp(0.75rem, 0.417vw, 0.5rem) 0 0;
    padding: 0;
    font-size: clamp(0.75rem, 0.729vw, 0.875rem);
  }

  .ww-footer-newsletter .ww-newsletter-form__consent {
    grid-row: 5;
    margin: clamp(0.75rem, 1.406vw, 1.6875rem) 0 0;
    font-size: clamp(0.75rem, 0.677vw, 0.8125rem);
  }

  .ww-site-footer .ww-footer-column {
    gap: 0;
  }

  .ww-site-footer .ww-footer-kicker {
    margin-bottom: clamp(0.5rem, 0.885vw, 1.0625rem);
  }

  .ww-site-footer .ww-footer-column a {
    margin-bottom: clamp(0.25rem, 0.313vw, 0.375rem);
    line-height: 1.2;
  }
}

/* ---------------------------------------------------------------------------
   `Магазин.pdf` runs its banner 682 tall of 1920 (35.5%); the theme pinned a
   fixed height, so at 768 it stood 721 tall — taller than it is wide. The
   footer column also kept the compact bar's 16 px gutter above the phone
   breakpoint while every other band moved to the design's 8.33%.
   ------------------------------------------------------------------------ */
@media (min-width: 48rem) {
  .ww-storefront-banner {
    height: 35.52vw;
    max-height: 42.625rem;
    min-height: 0;
  }

  .ww-storefront-banner__media,
  .ww-storefront-banner__media > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .ww-site-footer > .ww-container.ww-footer-main,
  body.home .ww-site-footer > .ww-container.ww-footer-main,
  .post-type-archive-product .ww-site-footer > .ww-container.ww-footer-main {
    width: min(100% - (var(--ww-gutter) * 2), var(--ww-container));
    margin-inline: auto;
    padding-inline: 0;
  }
}

/* ---------------------------------------------------------------------------
   Wishlist star and header search state.

   The star is an outline until the product is saved, then it fills and warms
   to the brand cream so the change reads at a glance on a photo. The toggle
   runs over XHR (assets/js/interactions.js), so the page no longer reloads.

   The search collapses to its magnifier and opens on click at every width —
   the desktop frames draw the field open, but a control that appears on
   demand is what the shop asked for.
   ------------------------------------------------------------------------ */
.ww-wishlist-link {
  transition: color 140ms ease, transform 140ms ease;
}

.ww-wishlist-link.is-busy {
  opacity: 0.6;
}

.ww-wishlist-link:active {
  transform: scale(0.92);
}

.ww-product-card .ww-wishlist-link--overlay > span[aria-hidden="true"] {
  display: block;
  width: 1rem;
  height: 0.9375rem;
  font-size: 0;
  background: currentColor;
  -webkit-mask: url("assets/icons/star-outline.svg") no-repeat center / contain;
  mask: url("assets/icons/star-outline.svg") no-repeat center / contain;
}

.ww-product-card .ww-wishlist-link--overlay.is-saved > span[aria-hidden="true"] {
  -webkit-mask-image: url("assets/icons/star-solid.svg");
  mask-image: url("assets/icons/star-solid.svg");
}

.ww-product-card .ww-wishlist-link--overlay.is-saved {
  color: #efdcc4;
}

/* ---------------------------------------------------------------------------
   `Магазин.pdf` banner: the caption sits at x525 of 1920 (27.3%) and 135 px
   into the band, set in Inter 44/44 over three lines. The theme centred it,
   which dropped the copy onto the key holder itself; the photo also needs to
   sit slightly left so the wood behind the caption stays clear.
   ------------------------------------------------------------------------ */
@media (min-width: 48rem) {
  .ww-storefront-banner .ww-storefront-banner__media > img {
    object-position: 38% center;
  }

  .ww-storefront-banner .ww-storefront-banner__inner {
    position: absolute;
    inset: 0;
    display: block;
    align-content: start;
  }

  .ww-storefront-banner .ww-storefront-banner__copy {
    position: absolute;
    top: clamp(3rem, 7.031vw, 8.4375rem);
    /* x525 of 1920 measured from the viewport; the block is positioned inside
       the 83.33% column, so that is 22.8% of the column. */
    left: 22.81%;
    right: auto;
    bottom: auto;
    /* Same as the home promo: the frame's caption measures ~19% narrower than
       Inter at the same cap height, so the column is widened to keep the
       frame's three-line structure rather than stretching the type. */
    width: clamp(14rem, 26.9vw, 32.25rem);
    max-width: none;
    /* An older rule pushed the block 360 px right of its offset. */
    margin: 0;
    padding: 0;
    text-align: left;
  }

  .ww-storefront-banner .ww-storefront-banner__title {
    margin: 0;
    font-family: var(--ww-font-sans);
    font-size: clamp(1.25rem, 2.292vw, 2.75rem);
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0;
    text-align: left;
  }
}

/* ---------------------------------------------------------------------------
   Header controls and the search panel.

   One behaviour at every width: the magnifier opens a white panel that grows
   downward out of the bar. The three controls share one optical size and one
   pitch so the row reads evenly, and the bar's own height follows the frame's
   proportion instead of standing 142 px tall on a 768 px laptop screen.
   ------------------------------------------------------------------------ */
.ww-site-header .ww-header-actions .dashicons,
.ww-site-header .ww-header-actions .ww-cart-link img,
.ww-site-header .ww-header-actions .ww-account-link img {
  width: 1.125rem;
  height: 1.125rem;
  font-size: 1.125rem;
  line-height: 1;
  object-fit: contain;
}

.ww-site-header .ww-header-actions .ww-cart-count {
  min-width: 0.875rem;
  height: 0.875rem;
  font-size: 0.5625rem;
  line-height: 0.875rem;
}

/* The field leaves the bar's flow and becomes a panel under it, so the control
   is a single cell holding just the button. */
.ww-site-header .ww-header-actions > .ww-header-search {
  position: relative;
  grid-template-columns: minmax(0, 1fr);
}

.ww-site-header .ww-header-actions > .ww-header-search input {
  position: fixed;
  z-index: 45;
  top: var(--ww-header-bottom, 4.3125rem);
  right: 0;
  left: 0;
  width: 100%;
  max-width: none;
  height: 3.5rem;
  margin: 0;
  padding: 0 var(--ww-gutter);
  border: 0;
  border-bottom: 1px solid var(--ww-color-line);
  color: var(--ww-color-ink);
  background: #fff;
  box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.12);
  opacity: 0;
  pointer-events: none;
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 200ms ease, opacity 160ms ease;
}

.ww-site-header .ww-header-actions > .ww-header-search.is-open input {
  opacity: 1;
  pointer-events: auto;
  transform: scaleY(1);
}

.ww-site-header .ww-header-actions > .ww-header-search.is-open input:focus {
  outline: 2px solid var(--ww-color-ink);
  outline-offset: -2px;
}

@media (min-width: 53.8125rem) {
  /* The bar is 142 of 1920 in the frames — a proportion, not a fixed height. */
  .ww-site-header .ww-header-inner {
    min-height: clamp(4.5rem, 7.396vw, 8.875rem);
  }

  /* Legacy translateY offsets from the old grid header. They also made the
     controls a containing block for the fixed search panel, which pinned it to
     the icon row instead of the viewport. The row is centred now. */
  .ww-site-header .ww-brand,
  body.home .ww-site-header .ww-brand,
  .ww-site-header .ww-nav,
  .ww-site-header .ww-header-actions {
    transform: none;
  }

  /* Without the legacy transform the row was stretching to the bar's height
     and shrinking below its content, which wrapped the wishlist star. */
  .ww-site-header .ww-header-actions,
  body.home .ww-site-header .ww-header-actions,
  .ww-js .ww-site-header .ww-header-actions {
    /* The legacy contract at line ~7019 puts the row on a three-column grid,
       which drops the fourth control onto a second line. */
    display: flex;
    align-items: center;
    justify-content: flex-end;
    grid-template-columns: none;
    flex: none;
    flex-wrap: nowrap;
    align-self: center;
    width: max-content;
    min-width: max-content;
    height: auto;
    min-height: 0;
  }

  /* Collapsed, the field is just its magnifier. */
  .ww-site-header .ww-header-actions > .ww-header-search {
    width: clamp(2.25rem, 2.292vw, 2.75rem);
    min-width: 0;
    grid-template-columns: clamp(2.25rem, 2.292vw, 2.75rem);
    border: 0;
  }

  .ww-site-header .ww-header-actions > .ww-header-search input {
    padding-inline: var(--ww-gutter);
  }
}

/* ---------------------------------------------------------------------------
   Product page per `Ключницы.pdf` at 1920: the gallery holds a 798×694 stage
   over four 184 px thumbs, and the summary column opens at x980 with the title
   at the display face's 26 px cap (38 px), the price under it, the quantity
   row at y519 and a 406×60 add-to-cart at y603. The theme set the title at
   68 px and ran the stage at 649 tall, which pulled the whole column up.
   ------------------------------------------------------------------------ */
@media (min-width: 48rem) {
  .ww-product-detail .product_title {
    font-size: clamp(1.5rem, 1.979vw, 2.375rem);
    line-height: 1.1;
  }

  .ww-product-detail .ww-figma-product-gallery__stage,
  .ww-product-detail .woocommerce-product-gallery__wrapper {
    aspect-ratio: 798 / 694;
  }

  /* Frame rhythm in the summary: price ink at y308, quantity row at y519 and
     the add-to-cart at y603, 406 wide. */
  .ww-product-detail form.cart .quantity,
  .ww-product-detail .ww-quantity-label {
    margin-top: clamp(1rem, 3.594vw, 4.3125rem);
  }

  /* The frame keeps «Количество» and the stepper on one row (y519–558). */
  .ww-product-detail form.cart {
    display: block;
  }

  .ww-product-detail form.cart .ww-quantity-row,
  .ww-product-detail form.cart .quantity {
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  .ww-product-detail .ww-quantity-label {
    margin: 0;
  }

  .ww-product-detail form.cart .single_add_to_cart_button,
  .ww-product-detail .single_add_to_cart_button {
    width: clamp(12rem, 21.146vw, 25.375rem);
    min-width: 0;
    margin-top: clamp(1rem, 2.344vw, 2.8125rem);
  }

  .ww-product-detail .ww-figma-product-gallery__stage img,
  .ww-product-detail .woocommerce-product-gallery__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* ---------------------------------------------------------------------------
   Header controls are drawn from our own SVGs rather than the dashicons font.
   The font's star sits high in its em box and its magnifier sits low, so on a
   real handset the three controls read as three different baselines even
   though their hit areas are identical. Masks put every glyph on one grid.
   ------------------------------------------------------------------------ */
.ww-site-header .ww-header-actions > a,
.ww-site-header .ww-header-actions > button,
.ww-site-header .ww-header-actions > .ww-header-search,
.ww-site-header .ww-header-actions .ww-header-search button {
  display: grid;
  place-items: center;
}

/* The button sat in a wider grid cell, so its glyph rode 6 px right of the
   control's own centre while the other two were centred. */
.ww-site-header .ww-header-actions .ww-header-search button {
  width: 100%;
  min-width: 0;
  padding: 0;
  justify-self: center;
}

.ww-site-header .ww-header-actions .dashicons {
  display: block;
  width: 1.125rem;
  height: 1.125rem;
  font-size: 0;
  line-height: 0;
  background: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.ww-site-header .ww-header-actions .ww-wishlist-action .dashicons {
  -webkit-mask-image: url("assets/icons/star-solid.svg");
  mask-image: url("assets/icons/star-solid.svg");
}

.ww-site-header .ww-header-actions .ww-header-search .dashicons {
  -webkit-mask-image: url("assets/icons/search.svg");
  mask-image: url("assets/icons/search.svg");
}

/* The bag is an <img>; give it the same optical box as the masked glyphs. */
.ww-site-header .ww-header-actions .ww-cart-link img,
.ww-site-header .ww-header-actions .ww-account-link img {
  display: block;
  width: 1.125rem;
  height: 1.125rem;
  object-fit: contain;
}

.ww-site-header .ww-header-actions .ww-cart-link {
  position: relative;
}

.ww-site-header .ww-header-actions .ww-cart-count {
  position: absolute;
  top: 0.125rem;
  right: -0.125rem;
  display: grid;
  place-items: center;
  min-width: 0.875rem;
  height: 0.875rem;
  padding: 0 0.1875rem;
  border-radius: 999px;
  font-size: 0.5625rem;
  line-height: 1;
}

/* ---------------------------------------------------------------------------
   Product card overlays above the phone breakpoint. The frame draws the same
   card at desktop scale: «Распродано» as plain white copy, a 31 px outlined
   star inset from the top-right, and a 44 px dark square carrying the basket
   glyph flush to the bottom-right corner. The theme was still showing the raw
   WooCommerce button there, whose label wrapped and spilled past the card.
   ------------------------------------------------------------------------ */
@media (min-width: 48rem) {
  .ww-product-card .ww-product-card__visual,
  .ww-product-card .ww-product-image {
    position: relative;
    overflow: hidden;
  }

  .ww-product-card .ww-product-badge {
    inset: clamp(0.75rem, 1.25vw, 1.5rem) auto auto clamp(0.75rem, 1.354vw, 1.625rem);
    padding: 0;
    border-radius: 0;
    background: none;
    color: #fff;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: clamp(0.75rem, 0.938vw, 1.125rem);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: none;
  }

  .ww-product-card .ww-wishlist-link--overlay {
    inset: clamp(0.5rem, 0.781vw, 0.9375rem) clamp(0.5rem, 0.781vw, 0.9375rem) auto auto;
    width: clamp(1.25rem, 1.615vw, 1.9375rem);
    min-width: 0;
    height: clamp(1.25rem, 1.615vw, 1.9375rem);
    padding: 0;
    border: 0;
    background: none;
    color: #fff;
  }

  .ww-product-card .ww-wishlist-link--overlay > span[aria-hidden="true"] {
    width: 100%;
    height: 100%;
  }

  .ww-product-card .ww-product-actions {
    position: absolute;
    inset: auto 0 0 auto;
    width: clamp(2.25rem, 2.292vw, 2.75rem);
    height: clamp(2.25rem, 2.292vw, 2.75rem);
    min-height: 0;
    margin: 0;
    gap: 0;
  }

  .ww-product-card .ww-product-actions .button,
  .ww-product-card .ww-product-actions .added_to_cart {
    display: grid;
    place-items: center;
    width: 100%;
    min-width: 0;
    height: 100%;
    min-height: 0;
    padding: 0;
    border-radius: 0;
    overflow: hidden;
    color: transparent;
    background-color: var(--ww-color-ink);
    background-image: url('assets/icons/cart-bag.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: clamp(0.875rem, 1.146vw, 1.375rem) auto;
    font-size: 0;
    line-height: 0;
    white-space: nowrap;
  }
}

/* ---------------------------------------------------------------------------
   The card's corner control is a dark square, so its glyph has to be white.
   The SVG ships in ink for the light header, and using it as a background made
   the square read as an empty black block on the shop grid. Paint it through a
   mask instead, in both directions.
   ------------------------------------------------------------------------ */
.ww-product-card .ww-product-actions .button,
.ww-product-card .ww-product-actions .added_to_cart {
  position: relative;
  background-image: none;
}

.ww-product-card .ww-product-actions .button::after,
.ww-product-card .ww-product-actions .added_to_cart::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  -webkit-mask: url("assets/icons/cart-bag.svg") no-repeat center;
  mask: url("assets/icons/cart-bag.svg") no-repeat center;
  /* Height-driven so the glyph keeps its aspect on both the phone's 48x20 bar
     and the desktop square. */
  -webkit-mask-size: auto 60%;
  mask-size: auto 60%;
}

/* ---------------------------------------------------------------------------
   Home header: the frames float it transparently over the hero, but on a real
   screen the controls disappear into the photo and the bar scrolls away. The
   shop asked for a solid white bar pinned to the top, so the hero starts below
   it on every width — the same treatment the compact bar already used.
   ------------------------------------------------------------------------ */
@media (min-width: 53.8125rem) {
  body.home .ww-site-header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 50;
    color: var(--ww-color-ink);
    border-bottom: 1px solid var(--ww-color-line);
    background: #fff;
  }

  body.home .ww-site-header .ww-brand,
  body.home .ww-site-header .ww-nav a,
  body.home .ww-site-header .ww-header-actions a,
  body.home .ww-site-header .ww-header-actions button,
  body.home .ww-site-header .ww-header-actions .dashicons {
    color: var(--ww-color-ink);
  }

  body.home .ww-site-header .ww-brand__image,
  body.home .ww-site-header .ww-header-actions .ww-cart-link img,
  body.home .ww-site-header .ww-header-actions .ww-account-link img {
    filter: none;
  }

  body.home .ww-site-header .ww-cart-count {
    color: var(--ww-color-paper);
    background: var(--ww-color-ink);
  }

  body.home .ww-main {
    padding-top: clamp(4.5rem, 7.396vw, 8.875rem);
  }
}

/*
 * Account utilities pick up the address block's row treatment so «Woodycoin»
 * and «Выйти» read as part of the same design, stacked underneath it.
 */
.ww-account-profile__utilities {
  display: grid;
  gap: 0.75rem;
  margin-top: 1.25rem;
  padding-inline: 0;
  font-size: 1.375rem;
}

.ww-account-profile__utilities a {
  display: flex;
  align-items: center;
  min-height: 4.5rem;
  padding: 1rem 2rem;
  color: var(--ww-color-ink);
  background: #f7f7f7;
  font-size: inherit;
  text-decoration: none;
}

.ww-account-profile__utilities a:hover,
.ww-account-profile__utilities a:focus-visible {
  background: #efeeea;
}

.ww-account-profile__utilities a[href*="customer-logout"] {
  border: 1px solid var(--ww-color-ink);
  background: transparent;
}

.ww-account-profile__utilities a[href*="customer-logout"]:hover,
.ww-account-profile__utilities a[href*="customer-logout"]:focus-visible {
  color: var(--ww-color-paper);
  background: var(--ww-color-ink);
}

@media (max-width: 47.9375rem) {
  /* The drawer's close control was a 44px box next to a 24px heading. */
  .ww-cart-drawer__close {
    width: 2.125rem;
    height: 2.125rem;
    font-size: 1.125rem;
  }

  .ww-account-profile__utilities {
    gap: 0.625rem;
    margin-top: 1rem;
    font-size: 1rem;
  }

  .ww-account-profile__utilities a {
    min-height: 3.25rem;
    padding: 0.75rem 1rem;
  }
}

/* Account screens on phones, measured against `21-account-profile` (400 px):
   «Вернуться к покупкам» sits at y114 — 30 px under the header — not at y200,
   and the identity card differentiates label from value (17/700 vs 14/400). */
@media (max-width: 47.9375rem) {
  body.logged-in.woocommerce-account .ww-auth-route {
    padding-top: 0;
  }

  body.logged-in.woocommerce-account .woocommerce {
    padding-block: 0.375rem 3rem;
  }

  .ww-account-heading {
    min-height: 0;
  }

  .ww-account-back {
    min-height: 2.25rem;
  }

  /* Frame rhythm below the back link: 25 px to the avatar, 25 px to the tabs,
     then an 85 px breath before the first card. */
  /* An earlier phone rule set `display: block`, which dropped the grid
     centring and parked the glyph in the circle's top-left corner. */
  .ww-account-avatar {
    display: grid;
    place-items: center;
    width: 2.6875rem;
    height: 2.6875rem;
    margin: 0.875rem 0 0 auto;
    overflow: hidden;
  }

  .ww-account-avatar img {
    display: block;
    width: 1.625rem;
    height: 1.625rem;
    object-fit: contain;
  }

  body.logged-in.woocommerce-account .ww-account-heading .woocommerce-MyAccount-navigation {
    margin-top: 0.5625rem;
  }

  body.logged-in.woocommerce-account .woocommerce-MyAccount-content {
    margin-top: 4.375rem;
  }

  .ww-account-profile__details {
    gap: 1.75rem;
    margin-top: 1.75rem;
  }

  .ww-account-profile__details > div {
    display: grid;
    gap: 0.6rem;
  }

  .ww-account-profile__details dt {
    font-size: 1.0625rem;
    font-weight: 700;
  }

  .ww-account-profile__details dd {
    font-size: 0.875rem;
  }

  .ww-account-profile__title-row h1 {
    font-size: 1.125rem;
  }
}

/* Cart on phones, measured against `10-cart-summary` (400 px frame):
   a 24 px step row that spells out all three labels, one price per line and no
   summary heading. The earlier build hid labels 2–3, printed the subtotal a
   second time under the row and floated a stray × below it. */
@media (max-width: 47.9375rem) {
  .woocommerce-cart .ww-commerce-progress ol {
    align-items: flex-start;
    gap: 0;
    min-height: 1.5rem;
    margin-top: 1.5rem;
  }

  .woocommerce-cart .ww-commerce-progress li {
    display: flex;
    align-items: center;
    justify-items: stretch;
    flex: 0 1 auto;
    gap: 0.375rem;
    font-size: 0.625rem;
    text-align: left;
    white-space: normal;
  }

  .woocommerce-cart .ww-commerce-progress li span {
    width: 1.125rem;
    height: 1.125rem;
    min-width: 1.125rem;
    font-size: 0.625rem;
  }

  .woocommerce-cart .ww-commerce-progress li strong,
  .woocommerce-cart .ww-commerce-progress li.is-active strong {
    display: inline;
    max-width: 4.75rem;
    font-size: 0.625rem;
    line-height: 1.2;
  }

  /* The frame joins the steps with a small arrow, not the desktop hairline. */
  .woocommerce-cart .ww-commerce-progress li:not(:last-child)::after {
    display: block;
    flex: 0 0 auto;
    height: auto;
    margin-inline: 0.375rem;
    background: none;
    font-size: 0.6875rem;
    line-height: 1;
    content: '\2192';
  }

  /* The × and the line price were landing on the same spot. */
  .woocommerce-cart .shop_table.cart .product-price {
    padding-right: 1.5rem;
  }

  .woocommerce-cart .shop_table.cart .product-name,
  .woocommerce-cart .shop_table.cart .product-name a {
    text-align: left;
    text-decoration: none;
  }

  .woocommerce-cart .shop_table.cart tr.cart_item {
    border-bottom: 1px solid var(--ww-color-line);
  }

  /* The line price already states the amount; the subtotal column repeated it. */
  .woocommerce-cart .shop_table.cart .product-subtotal {
    display: none;
  }

  /* `10-cart-summary` runs the totals without a section heading. */
  .woocommerce-cart .cart_totals > h2 {
    display: none;
  }
}

/* One authoritative phone definition for the cart line. Two earlier blocks
   disagreed: the first laid out 'thumbnail name remove' over three columns, the
   second renamed the areas to price/quantity without re-declaring the columns,
   so the price landed in a 44 px track and the × had no area at all. */
@media (max-width: 47.9375rem) {
  .woocommerce-cart .shop_table.cart tr.cart_item {
    grid-template-columns: 5.625rem minmax(0, 1fr) auto 1.5rem;
    grid-template-areas:
      'thumbnail name price remove'
      'thumbnail name quantity remove';
    align-items: center;
    gap: 0.375rem 0.75rem;
    padding-block: 0.75rem;
  }

  .woocommerce-cart .shop_table.cart .product-remove {
    position: static;
    grid-area: remove;
    align-self: start;
    justify-self: end;
  }

  .woocommerce-cart .shop_table.cart .product-price {
    display: block;
    grid-area: price;
    align-self: center;
    justify-self: end;
    padding-right: 0;
    font-size: 0.9375rem;
    white-space: nowrap;
  }

  .woocommerce-cart .shop_table.cart .product-quantity {
    grid-area: quantity;
    justify-self: end;
  }

  .woocommerce-cart .shop_table.cart .product-name,
  .woocommerce-cart .shop_table.cart .product-name a {
    grid-area: name;
    align-self: center;
    text-align: left;
  }

  /* The base rule pins a 36 px flex-basis, which stretched the step circles
     into ellipses once the phone size dropped to 18 px. */
  .woocommerce-cart .ww-commerce-progress li > span {
    flex: 0 0 1.125rem;
  }

  /* Coupon and refresh stay reachable but stop shouting over the frame. */
  .woocommerce-cart .shop_table.cart td.actions {
    display: flex;
    gap: 0.75rem;
    padding: 1rem 0 0;
    background: transparent;
  }

  .woocommerce-cart .shop_table.cart td.actions > .button,
  .woocommerce-cart .shop_table.cart td.actions .coupon .button {
    min-height: 2.75rem;
    height: 2.75rem;
    padding-inline: 1rem;
    border: 1px solid var(--ww-color-ink);
    color: var(--ww-color-ink);
    background: transparent;
    font-size: 0.8125rem;
  }
}

@media (max-width: 47.9375rem) {
  /* WooCommerce's own `woocommerce-smallscreen.css` right-aligns every
     responsive table cell with `!important`, which flipped the product title. */
  .woocommerce-cart .shop_table.cart tr.cart_item td.product-name,
  .woocommerce-cart .shop_table.cart tr.cart_item td.product-name a {
    text-align: left !important;
  }

  .woocommerce-cart .shop_table.cart tr.cart_item td.product-price {
    text-align: right !important;
  }

  /* The coupon block is a grid; as a flex item it collapsed to one character. */
  .woocommerce-cart .shop_table.cart td.actions {
    flex-wrap: wrap;
  }

  .woocommerce-cart .shop_table.cart td.actions .coupon {
    flex: 1 1 12rem;
    min-width: 12rem;
  }

  .woocommerce-cart .shop_table.cart td.actions .coupon .input-text {
    min-width: 0;
    height: 2.75rem;
    min-height: 2.75rem;
    padding-inline: 0.75rem;
    border: 1px solid var(--ww-color-line);
    font-size: 0.8125rem;
  }

  .woocommerce-cart .shop_table.cart td.actions > .button {
    flex: 0 0 auto;
  }
}

@media (max-width: 47.9375rem) {
  /* Disabled «Обновить корзину» was grey text on a grey slab — unreadable. */
  .woocommerce-cart .shop_table.cart td.actions > .button:disabled,
  .woocommerce-cart .shop_table.cart td.actions > .button[disabled] {
    border: 1px solid var(--ww-color-line);
    color: var(--ww-color-muted);
    background: transparent;
    opacity: 1;
  }
}

/* Tablet cart, 768–1023 px. The desktop composition asks for 60rem + 30rem
   columns and a 10rem gutter — 1600 px — so below 1024 the two columns and the
   absolutely placed quantity/subtotal piled on top of each other. Stack the
   summary under the lines until the desktop grid actually fits. */
@media (min-width: 48rem) and (max-width: 63.9375rem) {
  .woocommerce-cart .ww-commerce-route .woocommerce {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    column-gap: 0;
    row-gap: 2.5rem;
  }

  .woocommerce-cart .ww-commerce-progress {
    grid-row: 1;
    grid-column: 1;
  }

  .woocommerce-cart .woocommerce-cart-form {
    grid-row: 2;
    grid-column: 1;
  }

  .woocommerce-cart .cart-collaterals {
    grid-row: 3;
    grid-column: 1;
    padding-top: 0;
  }

  .woocommerce-cart .shop_table.cart tr.cart_item {
    position: relative;
    grid-template-columns: 8rem minmax(0, 1fr) 9rem;
    align-items: center;
    column-gap: 1.5rem;
  }

  .woocommerce-cart .shop_table.cart .product-thumbnail img {
    width: 8rem;
    height: 8rem;
  }

  .woocommerce-cart .shop_table.cart .product-quantity,
  .woocommerce-cart .shop_table.cart .product-subtotal {
    position: static;
    top: auto;
    right: auto;
    grid-column: 3;
    justify-self: end;
    width: auto;
  }

  .woocommerce-cart .shop_table.cart .product-subtotal {
    align-self: start;
  }

  .woocommerce-cart .shop_table.cart .product-quantity {
    align-self: end;
  }
}

/* WooCommerce ships `woocommerce-smallscreen.css` at max-width 768px, which at
   exactly 768 hid our thumbnail, printed «Товар:»/«Количество:» labels and
   right-aligned every cell. Undo it for the stacked tablet cart. */
@media (min-width: 48rem) and (max-width: 63.9375rem) {
  .woocommerce-cart .shop_table.cart td::before,
  .woocommerce-cart .shop_table.cart th::before {
    display: none !important;
    content: none !important;
  }

  .woocommerce-cart .shop_table.cart tr.cart_item td.product-thumbnail {
    display: block !important;
  }

  .woocommerce-cart .shop_table.cart tr.cart_item td.product-name,
  .woocommerce-cart .shop_table.cart tr.cart_item td.product-name a {
    text-align: left !important;
  }

  .woocommerce-cart .shop_table.cart tr.cart_item td.product-subtotal {
    text-align: right !important;
  }
}

@media (min-width: 48rem) and (max-width: 63.9375rem) {
  /* Only the update control lives here — the promo field is in the summary —
     so the tinted full-width band read as an empty slab. */
  .woocommerce-cart .shop_table.cart td.actions {
    justify-content: flex-start;
    padding: 1rem 0 0;
    background: transparent;
  }
}

/* The craft gallery collapsed to one column for everything under 860 px, so a
   768 px tablet rendered eight full-width photos and a 7 250 px page. Phones
   keep their two-up grid; tablets get the desktop three-up. */
@media (min-width: 48rem) and (max-width: 53.75rem) {
  .ww-about-craft-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 3.5rem;
  }
}

/* `Восстановление пароля`: the supplied 1920 px frame starts the footer at
   y=1445. Keep that measured desktop rhythm, but retain a content-led route
   on phones (the phone media query above wins there). */
@media (min-width: 48rem) {
  .woocommerce-lost-password .ww-auth-route,
  .woocommerce-lost-password .ww-auth-route > .woocommerce {
    height: auto;
    min-height: 81.4375rem;
  }

  .woocommerce-lost-password .ww-lost-password {
    padding-bottom: 0;
  }
}

.ww-lost-password__guest {
  margin-top: 1.5rem;
}

/* Footer columns: phones run four tight columns and desktop runs four, but the
   768–860 band dropped to two and doubled the footer's height. */
@media (min-width: 48rem) and (max-width: 53.75rem) {
  .ww-site-footer .ww-footer-main {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 1.5rem;
  }
}

/* Checkout on phones, against `18-checkout-2` (400 px frame). */
@media (max-width: 47.9375rem) {
  /* Same inline step row as the cart: three labels joined by arrows. */
  .woocommerce-checkout .ww-commerce-progress ol {
    align-items: flex-start;
    gap: 0;
    min-height: 1.5rem;
    margin-top: 1.5rem;
  }

  .woocommerce-checkout .ww-commerce-progress li {
    display: flex;
    align-items: center;
    justify-items: stretch;
    flex: 0 1 auto;
    gap: 0.375rem;
    font-size: 0.625rem;
    text-align: left;
    white-space: normal;
  }

  .woocommerce-checkout .ww-commerce-progress li span {
    flex: 0 0 1.125rem;
    width: 1.125rem;
    height: 1.125rem;
    min-width: 1.125rem;
    font-size: 0.625rem;
  }

  .woocommerce-checkout .ww-commerce-progress li strong,
  .woocommerce-checkout .ww-commerce-progress li.is-active strong {
    display: inline;
    max-width: 4.75rem;
    font-size: 0.625rem;
    line-height: 1.2;
  }

  .woocommerce-checkout .ww-commerce-progress li:not(:last-child)::after {
    display: block;
    flex: 0 0 auto;
    height: auto;
    margin-inline: 0.375rem;
    background: none;
    font-size: 0.6875rem;
    line-height: 1;
    content: '\2192';
  }

  /* The frame writes field labels in sentence case. */
  .woocommerce-checkout form.checkout .form-row label {
    letter-spacing: 0;
    text-transform: none;
  }

  /* The payment list is a two-up grid built for four gateways; with a single
     method configured it left a sand slab wrapped around one narrow card. */
  .woocommerce-checkout #payment {
    background: transparent;
  }

  .woocommerce-checkout #payment ul.payment_methods {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: 0.75rem;
  }

  .woocommerce-checkout #payment li.wc_payment_method {
    width: auto;
    min-width: 0;
  }

  /* `18-checkout-2` runs the totals with no heading and no table head. */
  .woocommerce-checkout #order_review_heading,
  .woocommerce-checkout .woocommerce-checkout-review-order-table thead {
    display: none;
  }
}

/* Only one gateway is configured today, and `auto-fit` still reserved a second
   152 px track, so the lone card sat in the right half of the row. */
.woocommerce-checkout #payment ul.payment_methods:has(> li:only-child) {
  grid-template-columns: minmax(0, 1fr);
  justify-content: stretch;
}

.woocommerce-checkout #payment ul.payment_methods > li:only-child {
  grid-column: 1;
}

/* Tablet checkout, 768–1023 px. The step row ran 128 px past the container,
   and the review heading was overlapping the payment panel. */
@media (min-width: 48rem) and (max-width: 63.9375rem) {
  .woocommerce-checkout .ww-commerce-progress li {
    min-width: 0;
    font-size: 0.75rem;
    white-space: normal;
  }

  .woocommerce-checkout .ww-commerce-progress li:not(:last-child)::after {
    flex: 0 1 2rem;
    margin-inline: 0.5rem;
  }

  .woocommerce-checkout #payment {
    background: transparent;
  }

  .woocommerce-checkout #order_review_heading,
  .woocommerce-checkout .woocommerce-checkout-review-order-table thead {
    display: none;
  }
}

/* Shop on phones, against `02-shop` (400 px frame). */
@media (max-width: 47.9375rem) {
  /* The banner runs 598 px tall in the frame, not 400, and its caption is
     centred over the dark foot of the photo — ours sat left over the light
     middle, where white type is unreadable. */
  .ww-shop-design__hero.ww-storefront-banner {
    min-height: 37.375rem;
  }

  .ww-shop-design__hero .ww-storefront-banner__media::after {
    background: linear-gradient(180deg, rgba(20, 12, 6, 0) 42%, rgba(20, 12, 6, 0.74));
  }

  .ww-shop-design__hero .ww-storefront-banner__copy {
    align-self: end;
    width: 100%;
    max-width: none;
    margin-bottom: 1.125rem;
    text-align: center;
  }

  .ww-shop-design__hero .ww-storefront-banner__title {
    margin-inline: auto;
    max-width: 17rem;
    font-size: 1.125rem;
    line-height: 1.25;
  }

  /* Section titles are set in the condensed display face, in caps. */
  .ww-home-product-section__title {
    font-size: 1.4375rem;
    text-transform: uppercase;
  }
}

/* Product page, against `04-product`: the frame labels the copy block
   «ОПИСАНИЕ» and sets every section title in the condensed face, in caps. */
.single-product .woocommerce-product-details__short-description::before {
  display: block;
  margin-bottom: 0.875rem;
  font-family: 'WW Display', 'PT Serif', Georgia, serif;
  font-size: 1.4375rem;
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
  content: 'Описание';
}

.single-product .related > h2,
.single-product .up-sells > h2,
.single-product .woocommerce-Reviews-title,
.single-product .ww-product-detail__tab-title {
  font-size: 1.4375rem;
  text-transform: uppercase;
}

/* Contacts on phones, measured against `11-contacts` (400 px frame): the page
   was running roughly 1.8× the frame's type — 36 px title, 24 px body, 28 px
   tracked section heads — so three lines of copy became six. */
@media (max-width: 47.9375rem) {
  .ww-contact-page .ww-contact-back {
    font-size: 1rem;
  }

  .ww-contact-page .ww-section-title {
    font-size: 1.1875rem;
  }

  .ww-contact-page .ww-contact-head p,
  .ww-contact-page > .ww-lede,
  .ww-contact-page > p {
    font-size: 0.8125rem;
    line-height: 1.25;
  }

  .ww-contact-page .ww-contact-grid h2 {
    margin-bottom: 0.75rem;
    font-size: 1.1875rem;
    letter-spacing: 0;
  }

  .ww-contact-page .ww-contact-grid p,
  .ww-contact-page .ww-contact-grid a {
    margin-bottom: 0.375rem;
    font-size: 0.8125rem;
    line-height: 1.3;
  }
}

/* `07-404`: the numeral is 91 px tall in the frame; ours was drawing 144. */
@media (max-width: 47.9375rem) {
  .ww-empty-state--not-found .ww-not-found-code {
    font-size: 6.5rem;
  }

  .ww-empty-state--not-found .ww-empty-state__back {
    align-self: start;
  }
}

/* Empty states on phones, against `06-wishlist-empty`: the frame's dog is
   150 px tall and the supporting line is 13/20, not 18 px. */
@media (max-width: 47.9375rem) {
  .ww-wishlist-empty .ww-empty-state--wishlist .ww-empty-state__dog {
    width: auto;
    height: 9.375rem;
    /* The frame breathes 122 px between the shop link and the illustration. */
    margin-top: 6rem;
  }

  /* `05-cart-empty` draws a taller dog, 229 px, closer to the shop link. */
  .ww-cart-empty .ww-empty-state--cart .ww-empty-state__dog {
    width: auto;
    height: 14.3125rem;
    margin-top: 2.25rem;
  }

  .ww-cart-empty .ww-empty-state--cart .ww-section-title {
    font-size: 1.9375rem;
  }

  .ww-wishlist-empty .ww-empty-state--wishlist .ww-lede,
  .ww-cart-empty .ww-empty-state--cart .ww-lede,
  .ww-empty-state .ww-lede {
    font-size: 0.8125rem;
    line-height: 1.55;
  }
}

/* Contacts from tablet up, measured against `Контакты.pdf` (1920 px): 50 px
   title, 24 px copy, 48 px section heads with no tracking and a 68 px row
   step. Ours ran a 30 px body under 26 px tracked heads, so the columns wrapped
   mid-phrase. Sizes are carried in vw so they scale down to the 1920 canvas. */
@media (min-width: 48rem) {
  .ww-contact-page .ww-section-title {
    font-size: clamp(1.75rem, 2.6vw, 3.125rem);
  }

  .ww-contact-page .ww-contact-head p,
  .ww-contact-page > .ww-lede {
    font-size: clamp(0.875rem, 1.25vw, 1.5rem);
    line-height: 1.35;
  }

  .ww-contact-page .ww-contact-grid h2 {
    font-size: clamp(1.5rem, 2.5vw, 3rem);
    letter-spacing: 0;
  }

  .ww-contact-page .ww-contact-grid p,
  .ww-contact-page .ww-contact-grid a {
    margin-bottom: 0.5rem;
    font-size: clamp(0.875rem, 1.25vw, 1.5rem);
    line-height: 1.35;
  }
}

/* `Контакты.pdf` keeps the three columns; only phones stack them. The 768–860
   band was inheriting the phone rule and running one column down the page. */
@media (min-width: 48rem) and (max-width: 53.75rem) {
  .ww-contact-page .ww-contact-grid {
    grid-template-columns: 24% 24% 40%;
    column-gap: 6%;
  }
}

/* Tablet home, 768–1023 px. Two blocks lose their proportions in this band:
   the showcase intro collapses to a 120 px column that breaks copy after one
   or two words, and the promo caption lands over the busiest part of the crop
   instead of the plain wall the PDF puts it on. */
@media (min-width: 48rem) and (max-width: 63.9375rem) {
  .ww-figma-showcase.ww-container {
    grid-template-columns: minmax(12rem, 1fr) minmax(0, 2fr);
    column-gap: clamp(1.5rem, 3vw, 3rem);
    row-gap: 1.5rem;
  }

  .ww-figma-promo > img {
    object-position: 30% center;
  }

  .ww-figma-promo__copy {
    text-shadow: 0 1px 10px rgba(20, 12, 6, 0.55);
  }
}

/* The promo caption is white type sitting directly on a light wall in this
   crop; the PDF's composition puts it over shade. A left scrim restores the
   contrast without touching the artwork. */
@media (min-width: 48rem) and (max-width: 63.9375rem) {
  .ww-figma-promo.ww-container {
    position: relative;
  }

  .ww-figma-promo.ww-container::after {
    position: absolute;
    z-index: 1;
    inset: 0;
    background: linear-gradient(90deg, rgba(20, 12, 6, 0.58), rgba(20, 12, 6, 0) 64%);
    pointer-events: none;
    content: '';
  }

  .ww-figma-promo .ww-figma-promo__copy {
    z-index: 2;
  }

  .ww-figma-promo .ww-figma-promo__link {
    z-index: 3;
  }
}

/* About copy from tablet up, against `О компании.pdf` (1920 px): the manifesto
   is set at 19–20/28, ours was a flat 16 px at every width. */
@media (min-width: 48rem) {
  .ww-about-page .ww-about-manifesto p {
    font-size: clamp(0.9375rem, 1.04vw, 1.25rem);
    line-height: 1.45;
  }
}

/* Login on phones, against `13-login` (400 px frame): 13 px labels over 40 px
   fields on a 269 px column, a 96×36 submit and 22 px social marks. Ours was
   running 20 px labels over 80 px full-width fields with 36 px icons. */
@media (max-width: 47.9375rem) {
  .woocommerce-account form.login .form-row,
  .woocommerce-account form.login label,
  .woocommerce-account form.login .woocommerce-Input {
    max-width: 17rem;
    margin-inline: auto;
  }

  /* These have to carry the same weight as the desktop auth rules that set
     20 px labels and 80 px fields, or they lose. */
  body.woocommerce-account form.ww-auth-form .form-row label:not(.woocommerce-form__label-for-checkbox) {
    display: block;
    margin-bottom: 0.375rem;
    font-size: 0.8125rem;
    line-height: 1.2;
  }

  body.woocommerce-account form.ww-auth-form input.input-text,
  .woocommerce-account .ww-auth-form input.input-text {
    width: 100%;
    height: 2.75rem;
    min-height: 2.75rem;
    padding: 0 0.75rem;
    font-size: 0.875rem;
  }

  .woocommerce-account form.login button.button {
    min-height: 2.75rem;
    height: 2.75rem;
    padding-inline: 1.25rem;
    font-size: 0.875rem;
  }

  .ww-auth-panel .ww-auth-social a,
  .ww-auth-panel .ww-auth-social img,
  .ww-auth-social a,
  .ww-auth-social img {
    width: 1.375rem;
    height: 1.375rem;
  }

  .ww-auth-social {
    gap: 0.75rem;
  }
}

/* `13-login` sets the join block at 26 px over a 13 px line, with a 152 px
   button — not a 32/20 stack behind a full-width bar. */
@media (max-width: 47.9375rem) {
  .ww-auth-panel--join h2 {
    font-size: 1.625rem;
  }

  .ww-auth-panel--join p {
    font-size: 0.8125rem;
    line-height: 1.35;
  }

  .ww-auth-panel--join .ww-auth-create {
    width: max-content;
    min-width: 9.5rem;
    margin-inline: auto;
    padding-inline: 1.5rem;
  }
}

/* The social marks are buttons, not links, so the earlier `a, img` rule left
   them at 64 px; the frame draws a tight 22 px pair under a 13 px label. */
@media (max-width: 47.9375rem) {
  .ww-auth-social button,
  .ww-auth-panel .ww-auth-social button {
    width: 1.375rem;
    min-width: 1.375rem;
    height: 1.375rem;
    min-height: 1.375rem;
    padding: 0;
  }

  .ww-auth-panel--join .ww-auth-social-label,
  .ww-auth-social-label {
    font-size: 0.8125rem;
  }

  /* The 22 px marks match the frame; keep a 44 px hit area around them. */
  .ww-auth-social button {
    position: relative;
  }

  .ww-auth-social button::after {
    position: absolute;
    inset: -0.6875rem;
    content: '';
  }
}

/* Register on phones, against `14-register`: a centred 26 px title over the
   same 269 px field column the login screen uses. */
@media (max-width: 47.9375rem) {
  /* Beats `.woocommerce-account:not(.logged-in) .woocommerce form.register`,
     which pins the form to the full container width. */
  .woocommerce-account:not(.logged-in) .woocommerce form.woocommerce-form-register.ww-auth-form {
    width: min(100%, 17rem);
    margin-inline: auto;
  }

  .ww-auth-register > h1 {
    font-size: 1.625rem;
    text-align: center;
  }

  .ww-auth-register__lead {
    font-size: 0.8125rem;
    line-height: 1.35;
    text-align: center;
  }

  .woocommerce-account form.register .form-row,
  .woocommerce-account form.register label,
  .woocommerce-account form.register input.input-text {
    max-width: none;
  }
}

@media (max-width: 47.9375rem) {
  /* The consent copy sits at the field column's scale in the frame. */
  .ww-auth-register .woocommerce-privacy-policy-text p,
  .ww-auth-register .woocommerce-privacy-policy-text {
    font-size: 0.8125rem;
    line-height: 1.35;
  }
}

/* Order cards on phones, against `20-account-orders`: the frame sets a row of
   78 px thumbnails beside the item titles, then the total and the tracking
   button across the card. Ours stacked one 161 px image above the titles. */
@media (max-width: 47.9375rem) {
  .ww-order-card__body {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      'media summary'
      'actions actions';
    align-items: start;
    column-gap: 1rem;
    row-gap: 1.25rem;
  }

  .ww-order-card__media {
    grid-area: media;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .ww-order-card__media a {
    display: block;
    width: 4.875rem;
    height: 4.875rem;
  }

  .ww-order-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .ww-order-card__summary {
    grid-area: summary;
  }

  .ww-order-card__actions {
    grid-area: actions;
  }
}

/* Register on phones, against `14-register`: the fields sit in a 269 px column
   like the login screen, and the submit matches their width. Ours inset the
   rows by 20 px and drew a 56 px bar. */
@media (max-width: 47.9375rem) {
  /* Beats `.woocommerce-account:not(.logged-in) .woocommerce form.register`,
     which pads the form by 20 px and shrinks the field column to 232 px. */
  .woocommerce-account:not(.logged-in) .woocommerce form.woocommerce-form-register,
  .woocommerce-account form.woocommerce-form-register {
    width: min(100%, 17rem);
    margin-inline: auto;
    padding-inline: 0;
  }

  .woocommerce-account form.woocommerce-form-register .form-row,
  .woocommerce-account form.woocommerce-form-register .woocommerce-privacy-policy-text,
  .woocommerce-account form.woocommerce-form-register button[type='submit'] {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-inline: 0;
  }

  .woocommerce-account form.woocommerce-form-register button[type='submit'] {
    height: 2.75rem;
    min-height: 2.75rem;
    font-size: 0.875rem;
  }
}

/* Order cards on phones, against `20-account-orders`: 11–12 px meta, 13 px
   product lines and a 14 px total. Ours ran 14/18/20, which pushed each card
   past 320 px and made the list scroll twice as far as the frame. */
@media (max-width: 47.9375rem) {
  .ww-order-card__head p {
    font-size: 0.75rem;
    line-height: 1.35;
  }

  .ww-order-card__status {
    min-height: 1.875rem;
    padding-inline: 0.75rem;
    font-size: 0.75rem;
  }

  .ww-order-card__summary ul,
  .ww-order-card__summary details {
    font-size: 0.8125rem;
  }

  .ww-order-card__actions p {
    font-size: 0.9375rem;
  }

  .ww-order-card__actions .woocommerce-button.button,
  .ww-order-card__actions .button {
    min-height: 2.75rem;
    height: 2.75rem;
    padding-block: 0;
    font-size: 0.875rem;
  }
}

/* OTP on phones, against `15-otp`: a bold display headline over the same
   269 px column the auth screens use, 40×54 code cells and a 44 px submit. */
@media (max-width: 47.9375rem) {
  .ww-otp h1 {
    font-weight: 700;
    font-size: 1.1875rem;
  }

  .ww-otp__channel {
    font-size: 0.875rem;
  }

  .ww-otp__form {
    width: min(100%, 17rem);
  }

  .ww-otp .ww-otp__code input[type='text'],
  .woocommerce .ww-otp .ww-otp__code input[type='text'],
  .ww-otp__code input {
    width: 2.5rem;
    min-width: 2.5rem;
    height: 3.375rem;
    min-height: 3.375rem;
    font-size: 1.125rem;
    line-height: 3.375rem;
  }

  .ww-otp__code {
    gap: 0.5rem;
  }

  .ww-otp__code legend,
  .ww-otp__alt {
    font-size: 0.875rem;
  }

  .ww-otp__submit {
    min-height: 2.75rem;
    height: 2.75rem;
    font-size: 0.875rem;
  }
}

/* `16-register-done` on phones: a 26 px bold line at y272, a 246×62 cart
   button and a 13 px shop link. Ours drew 20/400 type at y348 behind a
   344×72 bar. */
@media (max-width: 47.9375rem) {
  .ww-register-done {
    padding-top: clamp(7.5rem, 32vw, 9rem);
  }

  .ww-register-done h1 {
    font-size: 1.625rem;
    font-weight: 700;
  }

  .ww-register-done .ww-register-done__cart {
    width: 15.375rem;
    min-height: 3.875rem;
    height: 3.875rem;
    margin-inline: auto;
    font-size: 0.8125rem;
    white-space: nowrap;
  }

  .ww-register-done__back {
    font-size: 0.8125rem;
  }
}

/* The registration confirmation is a standalone frame (`16-register-done`),
   not an account dashboard. Keep the normal account navigation everywhere
   else, but remove WooCommerce's wrapper/navigation from this one state. */
body.ww-registration-done-route .ww-account-heading,
body.ww-registration-done-route .woocommerce-MyAccount-navigation {
  display: none;
}

body.ww-registration-done-route .woocommerce-MyAccount-content {
  width: 100%;
  max-width: none;
  margin: 0;
}

body.ww-registration-done-route .ww-register-done {
  width: 100%;
}

@media (max-width: 47.9375rem) {
  /* `16-register-done` keeps the footer edge at y824 and the footer band at
     330 px on the 400 px frame; the standalone route has no account chrome
     to contribute that height naturally. */
  body.logged-in.woocommerce-account.ww-registration-done-route .ww-auth-route {
    min-height: 47rem;
    padding-top: 0;
  }

  body.logged-in.woocommerce-account.ww-registration-done-route .ww-site-footer {
    min-height: 20.625rem;
  }
}

/* Type floors for narrow phones. The mobile root scales with 4vw, so at 320 px
   a 0.65625rem price rendered 8.4 px and the cart badge 7.2 px. Each floor
   keeps the element's own measured size and only bites below ~360 px. */
@media (max-width: 47.9375rem) {
  .ww-product-price,
  .ww-product-price .woocommerce-Price-amount,
  .ww-product-price .woocommerce-Price-currencySymbol {
    font-size: max(0.65625rem, 11px);
  }

  .ww-figma-new .ww-product-badge,
  .ww-product-card .ww-product-badge,
  .ww-product-badge {
    font-size: max(0.65625rem, 10px);
  }

  .ww-site-header .ww-header-actions .ww-cart-count,
  body.home .ww-site-header .ww-cart-count,
  .ww-cart-count {
    font-size: max(0.5625rem, 9px);
  }

  .ww-footer-column a,
  .ww-footer-column li,
  .ww-footer-column p {
    font-size: max(0.65625rem, 10px);
  }

  .ww-empty-state .ww-button,
  .ww-figma-new .ww-container > .ww-button,
  .ww-figma-new .ww-button {
    font-size: max(0.6875rem, 11px);
  }
}

/* --- Home and catalog corrections (desktop) ------------------------------- */

/* WooCommerce injects «Просмотр корзины» right after the add button; our corner
   treatment turned it into a second bag glyph stacked under the first. The
   header counter already reports the change, so the extra link is redundant. */
.ww-product-card .added_to_cart,
.ww-product-card .ww-product-actions .added_to_cart {
  display: none !important;
}

@media (min-width: 48rem) {
  /* 194 px of air above and below five logos read as a hole in the page. */
  .ww-figma-partners {
    padding-block: clamp(4rem, 7vw, 8.5rem);
  }

  /* The review photo ended flush against the footer. */
  .ww-figma-review.ww-container {
    padding-bottom: clamp(3rem, 5vw, 6rem);
  }

  /* «О компании» sat right on the edge of its black band. */
  .ww-figma-about .ww-figma-about__media {
    margin-top: clamp(2.5rem, 4vw, 4.75rem);
  }
}

/* The hero was a fixed 51.4 vw slab — 672 px at 1280 — so on a laptop with a
   short viewport the headline sat below the fold. Cap it against the viewport
   height as well, and move the promo caption and its button further left. */
@media (min-width: 48rem) {
  .ww-figma-hero {
    height: min(clamp(42rem, 51.4vw, 62rem), 78svh);
    min-height: 26rem;
  }

  .ww-figma-promo .ww-figma-promo__copy {
    left: 7.5%;
    width: 42%;
  }
}

/* --- Catalogue drop-down --------------------------------------------------- */

.ww-nav__item--shop {
  position: relative;
}

.ww-nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
}

.ww-nav__toggle .dashicons {
  width: 1rem;
  height: 1rem;
  font-size: 1rem;
  line-height: 1;
  transition: transform 160ms ease;
}

.ww-nav__item--shop.is-open .ww-nav__toggle .dashicons {
  transform: rotate(180deg);
}

.ww-nav__submenu {
  position: absolute;
  z-index: 60;
  top: calc(100% + 0.5rem);
  left: 0;
  display: grid;
  min-width: 14rem;
  padding: 0.5rem 0;
  margin: 0;
  border: 1px solid var(--ww-color-line);
  background: #fff;
  box-shadow: 0 0.75rem 1.75rem rgba(0, 0, 0, 0.12);
  list-style: none;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-0.375rem);
  transition: opacity 140ms ease, transform 140ms ease;
}

.ww-nav__item--shop:hover .ww-nav__submenu,
.ww-nav__item--shop:focus-within .ww-nav__submenu,
.ww-nav__item--shop.is-open .ww-nav__submenu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.ww-site-header .ww-nav__submenu a {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 1.125rem;
  color: var(--ww-color-ink);
  white-space: nowrap;
}

.ww-site-header .ww-nav__submenu a:hover,
.ww-site-header .ww-nav__submenu a:focus-visible {
  background: var(--ww-color-surface);
}

/* The sliding underline belongs to the top-level links only — inside the panel
   it drew a stray line across each row. */
.ww-nav .ww-nav__submenu a::after {
  content: none;
}

@media (max-width: 53.75rem) {
  .ww-nav__toggle,
  .ww-nav__submenu {
    display: none;
  }
}

/* --- Reviews rail ---------------------------------------------------------- */

/* The section used to be a two-column grid holding exactly one quote. It is now
   a heading plus a scrollable rail, so the old column rules are retired here. */
.ww-figma-review.ww-container {
  display: block;
}

.ww-figma-review > h2 {
  margin: 0 0 clamp(1.5rem, 2.5vw, 2.75rem);
}

.ww-figma-review.ww-container > .ww-figma-review__rail,
.ww-figma-review > .ww-figma-review__rail,
.ww-figma-review__rail {
  position: static;
  display: grid;
  width: auto;
  max-width: none;
  min-height: 0;
  grid-template-columns: none;
  grid-template-rows: none;
  margin: 0;
  grid-auto-flow: column;
  grid-auto-columns: minmax(min(100%, 20rem), 24rem);
  gap: clamp(1rem, 2vw, 2rem);
  overflow-x: auto;
  padding-bottom: 0.75rem;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
}

.ww-figma-review__rail::-webkit-scrollbar {
  height: 4px;
}

.ww-figma-review__rail::-webkit-scrollbar-thumb {
  border-radius: 2px;
  background: var(--ww-color-line);
}

.ww-figma-review .ww-figma-review__card,
.ww-figma-review__card {
  position: static;
  display: grid;
  width: auto;
  max-width: none;
  min-height: 0;
  grid-template-columns: none;
  margin: 0;
  align-content: start;
  gap: 0.5rem;
  scroll-snap-align: start;
}

.ww-figma-review .ww-figma-review__card img,
.ww-figma-review__card img {
  position: static;
  grid-column: auto;
  grid-row: auto;
  width: 100%;
  max-width: 15rem;
  height: auto;
  margin-top: 0.75rem;
}

.ww-figma-review__card p {
  margin: 0;
}

/* The old inner grid placed the author in its own column; inside a card it has
   to sit on the line above the quote. */
.ww-figma-review .ww-figma-review__card > p,
.ww-figma-review .ww-figma-review__card .ww-figma-review__author {
  position: static;
  grid-column: auto;
  grid-row: auto;
  width: auto;
  max-width: none;
  padding: 0;
  margin: 0;
  text-align: left;
}

.ww-figma-review .ww-figma-review__card .ww-figma-review__author {
  order: -1;
  font-weight: 700;
}

/* Rail cells carry an explicit ratio so a differently proportioned asset (or a
   half-loaded one) cannot leave one photo shorter than its neighbours. */
@media (min-width: 48rem) {
  .ww-figma-showcase .ww-figma-showcase__rail > * {
    aspect-ratio: 315 / 784;
    height: auto;
  }

  .ww-figma-showcase .ww-figma-showcase__rail > * > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* Section titles were sized from Inter's cap ratio (0.73) while the display
   face runs 0.586, so «ТОВАРЫ»/«НОВИНКИ» rendered a cap height of 15 px against
   the frame's 17. 29 px puts the caps back on the frame's line. */
@media (max-width: 47.9375rem) {
  .ww-home-product-section__title,
  .ww-figma-showcase .ww-figma-showcase__intro h2,
  .ww-figma-showcase h2,
  .ww-figma-new .ww-container h2,
  .ww-figma-new h2,
  .ww-figma-about .ww-container h2,
  .ww-figma-about h2,
  .ww-figma-partners h2,
  .ww-figma-review > h2 {
    font-size: 1.8125rem;
    line-height: 1.05;
  }
}

/* --- Newsletter and category CTA ------------------------------------------ */

/* The field label was centred over the input like a caption; it belongs on the
   field's left edge. The submit is the block's primary action — in the frame it
   is the black slab, not a white one. */
.ww-newsletter-form label {
  text-align: left;
}

.ww-footer-newsletter .ww-newsletter-form .ww-button,
.ww-newsletter-form button.ww-button {
  color: #fff;
  background: var(--ww-color-ink);
  border: 1px solid var(--ww-color-ink);
}

.ww-footer-newsletter .ww-newsletter-form .ww-button:hover,
.ww-newsletter-form button.ww-button:hover,
.ww-newsletter-form button.ww-button:focus-visible {
  color: #fff;
  background: #2c2c29;
}

/* «Перейти к товарам этой категории» hung off the first column; it reads as the
   section's closing action, so centre it under the grid. */
@media (min-width: 48rem) {
  .ww-shop-design__category-link {
    display: flex;
    margin-inline: auto;
  }
}

/* --- Checkout, desktop ----------------------------------------------------- */

/* The summary was lifted 140 px to sit beside the step row. That only clears
   the steps once the 60rem + 30rem + 10rem composition actually fits, so below
   1600 px «Корзина» landed on top of «Оплата заказа». */
@media (min-width: 48rem) and (max-width: 99.9375rem) {
  .woocommerce-checkout #order_review_heading,
  .woocommerce-checkout #order_review {
    top: 0;
  }
}

/* The frames write field labels in sentence case and give every control the
   same 52 px box; ours ran 11 px tracked caps over boxes of varying height. */
@media (min-width: 48rem) {
  .woocommerce-checkout form.checkout .form-row label {
    font-size: 0.875rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
  }

  .woocommerce-checkout form.checkout .form-row .input-text,
  .woocommerce-checkout form.checkout .form-row select {
    height: 3.25rem;
    min-height: 3.25rem;
    padding: 0 0.875rem;
  }
}

/* --- Product specifications ------------------------------------------------ */

.ww-product-specs {
  margin-top: clamp(1.5rem, 2.5vw, 2.5rem);
}

.ww-product-specs h2 {
  margin: 0 0 0.875rem;
  font-family: 'WW Display', 'PT Serif', Georgia, serif;
  font-size: 1.4375rem;
  font-weight: 700;
  text-transform: uppercase;
}

.ww-product-specs__list {
  display: grid;
  gap: 0.5rem;
  margin: 0;
}

.ww-product-specs__list > div {
  display: grid;
  grid-template-columns: minmax(6rem, 0.5fr) minmax(0, 1fr);
  gap: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--ww-color-line);
}

.ww-product-specs__list dt,
.ww-product-specs__list dd {
  margin: 0;
  font-size: 0.9375rem;
}

.ww-product-specs__list dt {
  color: var(--ww-color-muted);
}

/* The caption now sits at 7.5% of the band, so the crop has to give it plain
   wall: pulling the frame left moves the board clear of the three lines. */
@media (min-width: 48rem) {
  .ww-figma-promo > img {
    object-position: 26% center;
  }
}

/* --- Card hover photo ------------------------------------------------------ */

.ww-product-image.has-hover {
  position: relative;
}

.ww-product-image__hover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 220ms ease;
}

.ww-product-image.has-hover:hover .ww-product-image__hover,
.ww-product-image.has-hover:focus-visible .ww-product-image__hover,
.ww-product-card:hover .ww-product-image.has-hover .ww-product-image__hover {
  opacity: 1;
}

/* Touch screens have no hover; leave the primary photo in place. */
@media (hover: none) {
  .ww-product-image__hover {
    display: none;
  }
}

/* --- Checkout field states -------------------------------------------------- */

/* Focus was painting an ink border *and* a 2 px offset outline, so the field
   read as a heavy double frame. One ring is enough and still visible. */
.woocommerce-checkout form.checkout .form-row .input-text:focus,
.woocommerce-checkout form.checkout .form-row .input-text:focus-visible,
.woocommerce-checkout form.checkout .form-row select:focus,
.woocommerce-checkout form.checkout .form-row select:focus-visible {
  outline: 1px solid var(--ww-color-ink);
  outline-offset: -1px;
  border-color: var(--ww-color-ink);
}

/* Validation keeps its red cue, at the same 1 px weight as every other field. */
.woocommerce-checkout form.checkout .woocommerce-invalid .input-text,
.woocommerce-checkout form.checkout .woocommerce-invalid select {
  border-width: 1px;
  border-color: #c0392b;
}

.woocommerce-checkout form.checkout .woocommerce-invalid label {
  color: #c0392b;
}

/* --- Sale prices ----------------------------------------------------------- */

/* `.ww-product-price` is `white-space: nowrap`, so a sale item — old price plus
   new one on a single line — pushed the card past the viewport at 768 px (it
   showed up only on some loads, when the fallback font measured wider). Let the
   two amounts wrap instead, each staying whole. */
.ww-product-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.5rem;
  min-width: 0;
  white-space: normal;
}

.ww-product-price del,
.ww-product-price ins,
.ww-product-price .woocommerce-Price-amount {
  white-space: nowrap;
}

.ww-product-price ins {
  text-decoration: none;
}

/* --- Catalogue chevron ------------------------------------------------------ */

/* The dashicon was a filled arrow riding above the text baseline. The frame
   draws a light 14×8 chevron centred on the label's midline. */
.ww-nav__toggle .dashicons {
  /* `font-size: 0` hides the icon-font glyph, so em units would collapse — size
     the mark in vw so it tracks the nav the way the labels do (14×8 at 1920). */
  width: clamp(0.625rem, 0.729vw, 0.875rem);
  height: clamp(0.375rem, 0.417vw, 0.5rem);
  min-width: 0;
  font-size: 0;
  line-height: 0;
  background: currentColor;
  -webkit-mask: url('assets/icons/chevron-down.svg') no-repeat center / contain;
  mask: url('assets/icons/chevron-down.svg') no-repeat center / contain;
}

.ww-nav__toggle {
  width: auto;
  height: auto;
  margin-left: 0.4375rem;
  align-self: center;
}

.ww-site-header .ww-nav__item--shop {
  display: inline-flex;
  align-items: center;
}

/* An empty cart shows a bare bag in the frames — no zero badge. Needs to beat
   `.ww-site-header .ww-header-actions .ww-cart-count`, which sets `display: grid`. */
.ww-site-header .ww-header-actions .ww-cart-count.is-empty,
body.home .ww-site-header .ww-cart-count.is-empty,
.ww-cart-count.is-empty {
  display: none;
}

/* `Главная страница.pdf` at 1920: four 385 px cards with 20 px gutters inside
   the 1600 px container. Ours ran a 24 px gutter, which shaved 3 px off every
   card and pushed the fourth 7 px right of the frame. */
@media (min-width: 48rem) {
  .ww-figma-new .ww-product-grid {
    column-gap: clamp(0.75rem, 1.0417vw, 1.25rem);
  }
}

/* --- Newsletter field ------------------------------------------------------- */

/* The field sits on white, but its text colour was inherited white from the
   dark block — typing produced invisible characters, and the placeholder was
   white on white too. */
.ww-newsletter-form input[type='email'],
.ww-newsletter-form input[type='text'] {
  color: var(--ww-color-ink);
}

.ww-newsletter-form input[type='email']::placeholder,
.ww-newsletter-form input[type='text']::placeholder {
  color: rgba(11, 11, 10, 0.55);
  opacity: 1;
}

/* `Главная страница.pdf` closes the page with a 412 px black band; ours ended
   flush under the last link at 297. */
@media (min-width: 48rem) {
  body.home .ww-site-footer .ww-footer-main,
  .post-type-archive-product .ww-site-footer .ww-footer-main,
  .ww-site-footer .ww-footer-main {
    /* The band is 412 px in the frame; a 297 px min-height was capping it. */
    min-height: clamp(14rem, 21.458vw, 25.75rem);
    padding-bottom: clamp(2rem, 5.99vw, 7.1875rem);
  }
}

/* ═══ Правки по замечаниям клиента 7 августа ═══════════════════════════════ */

/* 5. Двойное подчёркивание в меню: ссылки несли и `text-decoration: underline`
   на ховере, и собственную ползущую линию `::after`. Оставляем одну. */
.ww-site-header .ww-nav a:hover,
.ww-site-header .ww-nav a:focus-visible,
.ww-nav a:hover,
.ww-nav a:focus-visible {
  text-decoration: none;
}

/* 6. Цены в карточках рекомендаций шли 28 px при заголовке 15 — в каталоге они
   идут вровень с названием. Приводим к масштабу карточки. */
@media (min-width: 48rem) {
  /* Перебивает `.ww-product-detail .related .ww-product-price` (1.75rem). */
  .ww-product-detail .related .ww-product-price,
  .ww-product-detail .upsells .ww-product-price,
  .ww-product-detail .up-sells .ww-product-price,
  .related .ww-product-price,
  .up-sells .ww-product-price {
    margin-top: 0.5rem;
    font-size: clamp(0.8125rem, 0.833vw, 1rem);
    line-height: 1.35;
  }
}

/* 7. Угловая кнопка «в корзину» на ховере теряла тёмную плашку, а её значок
   остаётся белым — иконка пропадала на светлом фото. Держим контраст во всех
   состояниях, включая `.added` после добавления. */
.ww-product-card .ww-product-actions .button,
.ww-product-card .ww-product-actions .button:hover,
.ww-product-card .ww-product-actions .button:focus,
.ww-product-card .ww-product-actions .button:focus-visible,
.ww-product-card .ww-product-actions .button:active,
.ww-product-card .ww-product-actions .button.added,
.ww-product-card .ww-product-actions .button.loading {
  background: var(--ww-color-ink);
  border-color: var(--ww-color-ink);
}

.ww-product-card .ww-product-actions .button:hover {
  background: #2c2c29;
  border-color: #2c2c29;
}

.ww-product-card .ww-product-actions .button::after,
.ww-product-card .ww-product-actions .button:hover::after,
.ww-product-card .ww-product-actions .button:active::after,
.ww-product-card .ww-product-actions .button.added::after {
  background: #fff;
}

/* 9. Бейджи «Скидка»/«Нет в наличии» — белый текст без подложки. На тёмном
   фото он читался, на светлом пропадал. Даём мягкую тень, как у подписи
   баннера, чтобы марка держалась на любом снимке. */
.ww-product-card .ww-product-badge {
  text-shadow: 0 1px 8px rgba(20, 12, 6, 0.75);
}

/* Системные сообщения WooCommerce: одна рамка и значок без наложения на текст. */
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--ww-color-ink);
  border-top: 1px solid var(--ww-color-ink);
  outline: none;
}

.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before,
.woocommerce .woocommerce-error::before {
  position: static;
  top: auto;
  left: auto;
  display: block;
  flex: 0 0 1rem;
  width: 1rem;
  margin: 0;
  float: none;
  line-height: 1;
}

.woocommerce .woocommerce-error li {
  margin: 0;
  list-style: none;
}

/* Промокод в корзине: цельный контрол без скачка при вводе. */
.woocommerce-cart .ww-cart-promo__form {
  gap: 0;
}

.woocommerce-cart .ww-cart-promo__form input,
.woocommerce-cart .ww-cart-promo__form button {
  min-height: 3.25rem;
  border-radius: 0;
}

.woocommerce-cart .ww-cart-promo__form input {
  padding: 0 1rem;
  border: 1px solid var(--ww-color-ink);
  color: var(--ww-color-ink);
  background: var(--ww-color-paper);
  outline: none;
}

.woocommerce-cart .ww-cart-promo__form input:focus {
  border-color: var(--ww-color-ink);
  box-shadow: inset 0 0 0 1px var(--ww-color-ink);
}

.woocommerce-cart .ww-cart-promo__form button {
  border: 1px solid var(--ww-color-ink);
  border-top: 0;
  color: var(--ww-color-paper);
  background: var(--ww-color-ink);
  cursor: pointer;
}

.woocommerce-cart .ww-cart-promo__form:focus-within button,
.woocommerce-cart .ww-cart-promo__form button:hover,
.woocommerce-cart .ww-cart-promo__form button:focus-visible {
  color: var(--ww-color-paper);
  background: #2c2c29;
}

/* WooCommerce и браузерные стили формы не должны сбрасывать края поля. */
.woocommerce-cart .ww-cart-promo__form input {
  border-top: 1px solid #0b0b0a !important;
  border-right: 1px solid #0b0b0a !important;
  border-bottom: 1px solid #0b0b0a !important;
  border-left: 1px solid #0b0b0a !important;
  background-color: #fff !important;
}

.woocommerce-cart .ww-cart-promo__form button {
  border-right: 1px solid #0b0b0a !important;
  border-bottom: 1px solid #0b0b0a !important;
  border-left: 1px solid #0b0b0a !important;
}

/* Кнопка перехода к оформлению: строка строго по центру её высоты. */
.woocommerce-cart .wc-proceed-to-checkout .checkout-button,
.woocommerce-cart .wc-proceed-to-checkout .checkout-button.button.alt {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0 1.25rem;
  line-height: 1.2;
  text-align: center;
}

/* Desktop cart line: media, name and amount controls share one compact grid.
   The old rule kept a 160 px quantity track and positioned amount controls
   absolutely, leaving a 31 px track for the product name at 1280 px. */
@media (min-width: 64rem) {
  .woocommerce-cart .shop_table.cart tr.cart_item {
    display: grid;
    grid-template-columns: 10rem minmax(0, 1fr) max-content;
    grid-template-rows: minmax(0, 1fr) auto;
    align-items: start;
    gap: 1rem 1.25rem;
    min-height: 12rem;
    padding-block: 1.5rem;
  }

  .woocommerce-cart .shop_table.cart .product-thumbnail {
    grid-column: 1;
    grid-row: 1 / -1;
  }

  .woocommerce-cart .shop_table.cart .product-thumbnail img {
    width: 10rem;
    height: 10rem;
    object-fit: cover;
  }

  .woocommerce-cart .shop_table.cart .product-name {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    min-width: 0;
    padding-top: 0;
  }

  .woocommerce-cart .shop_table.cart .product-subtotal {
    position: static;
    grid-column: 3;
    grid-row: 1;
    align-self: start;
    justify-self: end;
    width: auto;
    padding: 0;
    font-size: 1.35rem;
  }

  .woocommerce-cart .shop_table.cart .product-quantity {
    position: static;
    grid-column: 3;
    grid-row: 2;
    align-self: end;
    justify-self: end;
    width: auto;
    padding: 0;
  }

  .woocommerce-cart .shop_table.cart .product-remove {
    position: static;
    grid-column: 2;
    grid-row: 2;
    align-self: end;
    justify-self: start;
  }

  /* The progress row lives in the left cart column.  Its former nowrap labels
     required 702 px inside a 453 px column, pushing the third step over the
     promo card.  Each step now owns an equal, centred part of the row. */
  .woocommerce-cart .ww-commerce-progress ol {
    width: 100%;
    max-width: none;
    justify-content: center;
  }

  .woocommerce-cart .ww-commerce-progress li {
    flex: 1 1 0;
    min-width: 0;
    gap: 0.5rem;
    white-space: normal;
  }

  .woocommerce-cart .ww-commerce-progress li strong {
    min-width: 0;
    line-height: 1.15;
    text-align: center;
  }

  .woocommerce-cart .ww-commerce-progress li:not(:last-child)::after {
    flex: 1 1 1.5rem;
    min-width: 0;
    margin-inline: 0.375rem;
  }

  /* Summary labels remain on the left; every amount shares the right edge. */
  .woocommerce-cart .cart_totals table.shop_table {
    width: 100%;
    table-layout: fixed;
  }

  .woocommerce-cart .cart_totals table.shop_table td {
    text-align: right;
  }
}

/* Home showcase: the rail defines the shared image height.  A later aspect
   ratio forced every card wider than its grid track at 2048 px, clipping the
   final card and producing a stepped lower edge. */
@media (min-width: 48rem) {
  .ww-figma-showcase__rail {
    align-items: stretch;
  }

  .ww-figma-showcase .ww-figma-showcase__rail > a {
    flex: 1 1 0;
    height: 100%;
    min-height: 0;
    width: auto;
    aspect-ratio: auto;
  }

  .ww-figma-showcase .ww-figma-showcase__rail > a > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* Keep the «О компании» heading entirely in the white introduction zone.
   The previous black-band boundary crossed its lower 18 px at wide desktop. */
@media (min-width: 48rem) {
  .ww-figma-about {
    background: linear-gradient(
      to bottom,
      #fff 0 clamp(12.5rem, 12vw, 14rem),
      #000 clamp(12.5rem, 12vw, 14rem) 100%
    );
    /* The media frame already supplies its own lower inset. Keeping the base
       section's full 56 px padding made the photo sit visibly too high. */
    padding-bottom: 1.75rem;
  }
}

/* Final header alignment: every desktop control shares one center line. The
   earlier Figma tuning used different vertical transforms for the logo, nav
   and actions, which made the top bar look stepped on the homepage. */
@media (min-width: 53.8125rem) {
  .ww-site-header .ww-header-inner {
    align-items: center;
  }

  .ww-site-header .ww-brand,
  .ww-site-header .ww-nav,
  .ww-site-header .ww-header-actions {
    align-self: center;
    transform: none !important;
  }

  .ww-site-header .ww-brand__image {
    display: block;
    width: 14.375rem;
    height: 3.25rem;
    max-width: 100%;
    object-fit: contain;
  }
}

@media (max-width: 53.75rem) {
  .ww-site-header .ww-brand__image,
  body.home .ww-site-header .ww-brand__image {
    width: min(8.25rem, 100%);
    height: auto;
    max-height: 1.9375rem;
    filter: none;
  }
}

/* Final account form contract: the registration template now supplies the
   profile fields already validated server-side and mirrors the mobile frames. */
.ww-auth-social-label--login,
.ww-auth-guest--mobile,
.ww-auth-register__guest {
  display: none;
}

.ww-auth-password-hint {
  display: block;
  margin-top: 0.5rem;
  color: var(--ww-color-muted);
  font-size: 0.875rem;
  line-height: 1.25;
}

.ww-auth-register__terms {
  margin-top: 1rem !important;
}

.ww-auth-register__terms .woocommerce-form__label-for-checkbox {
  display: flex !important;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.9375rem !important;
  line-height: 1.3;
  text-align: left;
}

.ww-auth-register__terms input[type='checkbox'] {
  flex: 0 0 1.125rem;
  width: 1.125rem;
  height: 1.125rem;
  min-height: 1.125rem;
  margin: 0.1rem 0 0;
  accent-color: var(--ww-color-ink);
}

@media (max-width: 47.9375rem) {
  .ww-auth-grid {
    gap: 2.25rem;
  }

  .ww-auth-panel--login .ww-auth-social-label--login {
    display: block;
    margin: 1.5rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.35;
  }

  .ww-auth-panel--login .ww-auth-social {
    margin-top: 0.75rem;
  }

  .ww-auth-panel--login > .ww-auth-form > .ww-auth-guest,
  .ww-auth-panel--join > .ww-auth-social-label,
  .ww-auth-panel--join > .ww-auth-social {
    display: none;
  }

  .ww-auth-panel--join {
    padding-top: 0;
  }

  .ww-auth-panel--join .ww-auth-guest--mobile,
  .ww-auth-register__guest {
    display: inline-flex;
    justify-self: center;
    margin-top: 1.75rem;
    color: var(--ww-color-ink);
    font-size: 0.8125rem;
    text-underline-offset: 0.2em;
  }

  .ww-auth-register {
    padding-top: 3.5rem;
  }

  .ww-auth-register > h1 {
    margin-bottom: 1rem;
  }

  .ww-auth-register > .ww-auth-back,
  .ww-auth-register > .ww-auth-register__lead,
  .ww-auth-register .woocommerce-privacy-policy-text {
    display: none;
  }

  .ww-auth-register__terms .woocommerce-form__label-for-checkbox {
    font-weight: 400 !important;
    text-transform: none !important;
  }

  .ww-auth-register__submit {
    margin-top: 0 !important;
  }

  .ww-auth-register__terms .woocommerce-form__label-for-checkbox {
    font-size: 0.8125rem !important;
  }

  .ww-auth-password-hint {
    font-size: 0.8125rem;
  }

  .ww-auth-register__social .ww-auth-social {
    margin-top: 1rem;
  }

  .ww-auth-register__guest {
    margin-top: 1rem;
  }
}