/* Wool Sakartvelo store. Base layer ported 1:1 from the approved concept
   (Sapun-net/sapun PR #30/#31, wool.module.css); store screens follow below. */

body {
  margin: 0;
  background: #fbf7f1;
}

.page {
  --paper: #fbf7f1;
  --oat: #f3eadf;
  --oat-deep: #eadccb;
  --card: #ffffff;
  --ink: #2a2421;
  --ink-soft: #5f544d;
  --ink-muted: #6c5f57;
  --line: #e7dccf;
  --coral: #f4938a;
  --coral-soft: #fde6e1;
  --coral-ink: #b04a40;
  --radius: 22px;
  --radius-sm: 14px;
  --shell: 1240px;
  --gutter: 20px;
  --serif: ui-serif, "New York", Georgia, "Noto Serif", "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Noto Sans Georgian", sans-serif;

  min-height: 100vh;
  overflow-x: clip;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

.page :where(h1, h2, h3, p, ul, ol, dl, dd, figure) {
  margin: 0;
}

.page :where(ul, ol) {
  padding: 0;
  list-style: none;
}

.page :where(a) {
  color: inherit;
}

.page :where(button) {
  font: inherit;
  color: inherit;
}

.page :where(img) {
  display: block;
  max-width: 100%;
  height: auto;
}

.page :where([id]) {
  scroll-margin-top: 88px;
}

.page :where(a, button):focus-visible {
  outline: 2px solid var(--coral-ink);
  outline-offset: 3px;
  border-radius: 8px;
}

@media (min-width: 768px) {
  .page {
    --gutter: 32px;
  }
}

@media (min-width: 1280px) {
  .page {
    --gutter: 48px;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  text-decoration: none;
}

.skip-link:focus {
  top: 12px;
}

/* ---------- top bars ---------- */

.test-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px var(--gutter);
  background: var(--ink);
  color: #f3ece5;
  font-size: 13px;
  line-height: 1.35;
}

.test-bar strong {
  font-weight: 600;
  color: #fff;
}

.test-bar a {
  flex: none;
  color: #fff;
  text-underline-offset: 3px;
}

.test-bar-text {
  display: none;
}

@media (min-width: 768px) {
  .test-bar-text {
    display: inline;
  }
}

.announce {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px var(--gutter);
  background: var(--coral-soft);
  color: #7a3a33;
  font-size: 13.5px;
  text-align: center;
}

.announce svg {
  flex: none;
}

/* ---------- header ---------- */

.header {
  /* The menu and search panels are absolutely positioned inside the header, so the header must be a
     containing block even where sticky is missing. Safari 12 needs the -webkit- prefix (unprefixed
     from Safari 13); without it the header was static and the panels opened below the screen. */
  position: relative;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid var(--line);
  /* No backdrop-filter: it would become the containing block of the fixed drawer. */
  background: rgb(251 247 241 / 0.97);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: calc(var(--shell) + 2 * var(--gutter));
  min-height: 72px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.logo {
  display: inline-flex;
  flex: none;
  align-items: center;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-block: 8px;
  text-decoration: none;
}

/* Original logo artwork: scale only by height to keep its proportions. */
.logo-image {
  display: block;
  width: auto;
  height: 50px;
}

@media (min-width: 768px) {
  .header-inner {
    min-height: 80px;
  }

  .logo-image {
    height: 56px;
  }
}

.main-nav {
  display: none;
  margin: 0 auto;
}

.main-nav ul {
  display: flex;
  gap: 4px;
}

.main-nav a {
  display: block;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 15px;
  text-decoration: none;
  color: var(--ink-soft);
  transition: background-color 0.2s, color 0.2s;
}

.main-nav a:hover {
  background: var(--oat);
  color: var(--ink);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}

.icon-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 44px;
  height: 44px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  transition: background-color 0.2s;
}

.icon-button:hover {
  background: var(--oat);
}

.cart-count {
  position: absolute;
  top: 6px;
  right: 4px;
  display: grid;
  place-items: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--coral-ink);
  color: #fff;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1;
}

.menu-toggle {
  margin-left: -10px;
}

@media (max-width: 479px) {
  .search-button,
  .lang-code {
    display: none;
  }

  .icon-button {
    min-width: 40px;
    padding: 0 8px;
  }
}

/* The full six-link navigation cannot fit beside the logo and actions at 1024px,
   especially with Georgian labels. Keep the existing accessible drawer through
   tablet / narrow-desktop widths and switch to the full navigation at 1200px. */
@media (min-width: 1200px) {
  .main-nav {
    display: block;
  }

  .menu-toggle {
    display: none;
  }

  .header-inner {
    min-height: 88px;
  }

  .logo-image {
    height: 62px;
  }
}

@media (max-width: 360px) {
  .logo-image {
    height: 44px;
  }
}

/* ---------- shared ---------- */

.eyebrow {
  margin-bottom: 14px !important;
  color: var(--coral-ink);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.eyebrow-small {
  color: var(--coral-ink);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.section-title {
  font-family: var(--serif);
  font-size: 34px;
  font-size: max(30px, min(4.2vw, 46px));
  font-size: clamp(30px, 4.2vw, 46px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.section {
  max-width: calc(var(--shell) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 72px var(--gutter);
}

@media (min-width: 1024px) {
  .section {
    padding-top: 104px;
    padding-bottom: 104px;
    padding-block: 104px;
  }
}

.section-tinted {
  max-width: none;
  background: var(--oat);
}

.section-tinted > * {
  max-width: var(--shell);
  margin-left: auto;
  margin-right: auto;
  margin-inline: auto;
}

.section-head {
  display: grid;
  gap: 16px;
  margin-bottom: 36px;
}

.section-aside {
  max-width: 460px;
  color: var(--ink-soft);
  font-size: 17px;
}

@media (min-width: 1024px) {
  .section-head {
    grid-template-columns: 1fr auto;
    align-items: start;
    gap: 48px;
    margin-bottom: 48px;
  }
}

.button-primary,
.button-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 26px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.2s, border-color 0.2s, transform 0.2s;
}

.button-primary {
  border: 1px solid var(--ink);
  background: var(--ink);
  color: #fff !important;
}

.button-primary:hover {
  background: #3d3430;
}

.button-secondary {
  border: 1px solid #cdbfb1;
  background: transparent;
  color: var(--ink);
}

.button-secondary:hover {
  border-color: var(--ink);
}

/* ---------- hero ---------- */

.hero {
  display: grid;
  gap: 40px;
  max-width: calc(var(--shell) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 40px var(--gutter) 64px;
}

/* #14: the whole phrase "Натуральная пряжа для вязания" is the headline; "на вес и в мотках"
   is a quieter second line of the same <h1>. Moderate size, balanced lines, short words
   glued to the next one per language (wool.i18n.typeset) — no fixed <br>. */
/* #16: one typographic step larger than #14, the accent a perfect fourth below the headline
   (0.75) and close to it, so the two lines read as one heading beside the photo. */
.hero-title {
  max-width: 13em;
  font-family: var(--serif);
  font-size: 42px;
  font-size: max(32px, min(2.2vw + 24.5px, 60px));
  font-size: clamp(32px, 2.2vw + 24.5px, 60px);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.022em;
}

.hero-title-main {
  display: block;
  text-wrap: balance;
}

/* EN (Oleg, 25.10.2026): "Natural yarn for knitting" is short enough for one line, so it must not flip
   to two lines at some widths (1030–1140 px, from ~1500 px). Its size follows the text column
   (~10.3–10.5 em wide in Georgia / New York); only phones under ~350 px get the two phrases. */
.hero-text {
  container-type: inline-size;
}

.page:lang(en) .hero-title {
  font-size: 42px;
  font-size: max(30px, min(2.2vw + 24.5px, 56px));
  font-size: clamp(30px, min(2.2vw + 24.5px, 9.2cqi), 56px);
}

.hero-phrase {
  display: inline-block;
}

.hero-title-accent {
  display: block;
  margin-top: 0.08em;
  color: var(--coral-ink);
  font-size: 0.75em;
  font-style: italic;
  line-height: 1.12;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

.hero-title em {
  color: var(--coral-ink);
  font-style: italic;
}

.hero-lead {
  max-width: 540px;
  margin-top: 22px !important;
  color: var(--ink-soft);
  font-size: 18px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.hero-facts {
  display: grid;
  gap: 12px;
  margin-top: 36px !important;
  padding-top: 26px !important;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 15px;
}

/* Facts that wrap to different line counts (KA on tablets) still start on one line; the icon sits
   level with the first line of text. */
.hero-facts li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.hero-facts svg {
  flex: none;
  margin-top: 0.15em;
  color: var(--coral-ink);
}

.hero-media {
  position: relative;
  padding-bottom: 48px;
}

.hero-main {
  overflow: hidden;
  border-radius: var(--radius);
  aspect-ratio: 4 / 4.4;
  background: var(--oat);
}

.hero-main img,
.hero-inset img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-main img {
  object-position: 50% 62%;
}

.hero-inset {
  position: absolute;
  left: -6px;
  bottom: 0;
  width: 38%;
  overflow: hidden;
  border: 6px solid var(--paper);
  border-radius: 20px;
  aspect-ratio: 3 / 4;
  background: var(--oat);
}

.hero-caption {
  position: absolute;
  right: 0;
  bottom: 6px;
  max-width: 56%;
  color: var(--ink-soft);
  font-size: 14px;
  text-align: right;
  text-wrap: balance;
}

.hero-caption a {
  white-space: nowrap;
  color: var(--coral-ink);
  text-underline-offset: 3px;
}

@media (min-width: 768px) {
  .hero-facts {
    grid-template-columns: repeat(3, auto);
    justify-content: start;
    gap: 28px;
  }

  .hero-main {
    aspect-ratio: 16 / 11;
  }

  .hero-inset {
    width: 26%;
  }
}

/* One-column hero (tablets): the headline and the lead use the width of the column instead of
   a narrow strip on the left with an empty right half. */
@media (min-width: 700px) and (max-width: 1023px) {
  .hero-title {
    max-width: none;
    font-size: 50px;
  }

  .page:lang(en) .hero-title {
    font-size: 50px;
  }

  .hero-lead {
    max-width: 38em;
    font-size: 20px;
    line-height: 1.6;
  }
}

@media (min-width: 1024px) {
  /* The text starts level with the top edge of the large photo (Oleg, 25.10.2026), not centred against it. */
  .hero {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
    align-items: start;
    gap: 64px;
    padding-top: 56px;
    padding-bottom: 32px;
  }

  .hero-facts {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .hero-main {
    aspect-ratio: 4 / 4.7;
    margin-left: 12%;
  }

  .hero-inset {
    left: 0;
    width: 34%;
    bottom: 0;
  }

  .hero-caption {
    max-width: 52%;
  }
}

/* ---------- categories ---------- */

.category-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

@media (min-width: 768px) {
  .category-grid {
    gap: 16px;
  }
}

@media (min-width: 1024px) {
  .category-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
  }
}

.category-tile {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-sm);
  aspect-ratio: 3 / 4;
  background: var(--oat);
  color: #fff;
  text-decoration: none;
  isolation: isolate;
}

.category-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.category-tile::after {
  content: "";
  position: absolute;
  top: 45%;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(180deg, rgb(28 22 19 / 0) 0%, rgb(28 22 19 / 0.74) 100%);
}

.category-tile:hover img {
  transform: scale(1.04);
}

.category-label {
  text-shadow: 0 1px 8px rgb(0 0 0 / 0.35);
  position: absolute;
  right: 14px;
  bottom: 14px;
  left: 14px;
  z-index: 1;
  display: grid;
  gap: 2px;
}

.category-name {
  font-family: var(--serif);
  font-size: 20px;
  font-size: max(20px, min(2.2vw, 26px));
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.1;
}

.category-note {
  font-size: 13px;
  opacity: 0.92;
}

.more-groups {
  display: grid;
  gap: 28px;
  margin-top: 44px;
  padding-top: 36px;
  border-top: 1px solid var(--line);
}

@media (min-width: 1024px) {
  .more-groups {
    grid-template-columns: 1.5fr 1fr 1.2fr;
    gap: 40px;
  }
}

.more-title {
  margin-bottom: 14px !important;
  font-size: 15px;
  font-weight: 600;
}

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

.chip {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink-soft);
  font-size: 14.5px;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}

.chip:hover {
  border-color: var(--ink-muted);
  color: var(--ink);
}

/* ---------- products ---------- */

.filters {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  margin-left: calc(-1 * var(--gutter)) !important;
  margin-right: calc(-1 * var(--gutter)) !important;
  margin-inline: calc(-1 * var(--gutter)) !important;
  padding: 2px var(--gutter) 6px;
  overflow-x: auto;
  scrollbar-width: none;
}

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

@media (min-width: 768px) {
  .filters {
    flex-wrap: wrap;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-inline: auto !important;
    padding-left: 0;
    padding-right: 0;
    padding-inline: 0;
  }
}

.filter-chip {
  flex: none;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid #d9cbbb;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  font-size: 14.5px;
  cursor: pointer;
}

.filter-chip[aria-pressed="true"] {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

@media (min-width: 768px) {
  .product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }
}

@media (min-width: 1100px) {
  .product-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
  }
}

.product-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--card);
  box-shadow: 0 1px 0 rgb(42 36 33 / 0.04);
}

.product-media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--oat-deep);
}

.product-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sale-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.92);
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
}

.product-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 14px 14px 16px;
}

@media (min-width: 768px) {
  .product-body {
    padding: 18px 18px 20px;
  }
}

.product-name {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 400;
  line-height: 1.2;
}

@media (min-width: 768px) {
  .product-name {
    font-size: 21px;
  }
}

.product-composition {
  margin-top: 6px !important;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.4;
}

.product-length {
  margin-top: 4px !important;
  color: var(--ink-muted);
  font-size: 13.5px;
}

.price-row {
  margin-top: auto;
  padding-top: 14px;
}

.price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 4px;
}

.price strong {
  font-size: 20px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.price span {
  color: var(--ink-soft);
  font-size: 14px;
}

.price small {
  flex-basis: 100%;
  color: var(--ink-muted);
  font-size: 13px;
}

.card-button {
  min-height: 44px;
  margin-top: 14px;
  padding: 0 12px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: transparent;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

.card-button:hover {
  background: var(--ink);
  color: #fff;
}

.source-note {
  margin-top: 24px !important;
  color: var(--ink-muted);
  font-size: 13.5px;
}

/* ---------- by weight ---------- */

.weight-layout {
  display: grid;
  gap: 40px;
}

/* Side-by-side blocks start at the same top line: text level with the top edge of the photo
   or of the neighbouring card, never centred against it (Oleg, 25–26.10.2026). */
@media (min-width: 1024px) {
  .weight-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    align-items: start;
    gap: 80px;
  }
}

.steps {
  display: grid;
  gap: 22px;
  margin-top: 32px !important;
}

.steps li {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 16px;
}

.step-number {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--coral-soft);
  color: var(--coral-ink);
  font-family: var(--serif);
  font-size: 19px;
}

.steps h3 {
  font-size: 17px;
  font-weight: 600;
}

.steps p {
  margin-top: 2px !important;
  color: var(--ink-soft);
}

.calculator {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: 0 24px 60px rgb(84 60 40 / 0.08);
}

@media (min-width: 768px) {
  .calculator {
    padding: 32px;
  }
}

.calculator-head {
  display: flex;
  align-items: center;
  gap: 16px;
}

.calculator-thumb {
  flex: none;
  width: 72px;
  height: 88px;
  border-radius: 12px;
  object-fit: cover;
}

.calculator-title {
  margin-top: 2px !important;
  font-family: var(--serif);
  font-size: 23px;
  line-height: 1.15;
}

.calculator-meta {
  margin-top: 4px !important;
  color: var(--ink-soft);
  font-size: 14px;
}

.calculator-label {
  margin-top: 26px !important;
  font-size: 15px;
  font-weight: 600;
}

.weight-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 12px;
}

@media (min-width: 768px) {
  .weight-options {
    grid-template-columns: repeat(6, 1fr);
  }
}

.weight-option {
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  font-size: 15px;
  cursor: pointer;
}

.weight-option[aria-pressed="true"] {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
}

.calculator-result {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 20px !important;
}

.calculator-result div {
  padding: 16px;
  border-radius: 14px;
  background: var(--oat);
}

.calculator-result dt {
  color: var(--ink-soft);
  font-size: 13.5px;
}

.calculator-result dd {
  margin-top: 2px !important;
  font-family: var(--serif);
  font-size: 24px;
  font-size: max(22px, min(3vw, 32px));
  font-size: clamp(22px, 3vw, 32px);
  white-space: nowrap;
  line-height: 1.1;
}

.calculator-note {
  margin-top: 16px !important;
  color: var(--ink-muted);
  font-size: 13.5px;
}

/* ---------- inspiration ---------- */

.inspiration {
  display: grid;
  gap: 36px;
  max-width: calc(var(--shell) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 24px var(--gutter) 72px;
}

.inspiration-main {
  overflow: hidden;
  border-radius: var(--radius);
  aspect-ratio: 4 / 4.6;
}

.inspiration-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ideas {
  display: grid;
  gap: 18px;
  margin-top: 28px;
}

.ideas article {
  padding-left: 18px;
  border-left: 2px solid var(--coral);
}

.ideas h3 {
  font-size: 17px;
  font-weight: 600;
}

.ideas p {
  margin-top: 2px !important;
  color: var(--ink-soft);
}

.inspiration-thumbs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 30px;
}

.inspiration-thumb {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-sm);
  aspect-ratio: 1 / 1;
}

.inspiration-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 768px) {
  .inspiration-main {
    aspect-ratio: 16 / 11;
  }
}

@media (min-width: 1024px) {
  .inspiration {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: start;
    gap: 72px;
    padding-bottom: 104px;
  }

  .inspiration-main {
    aspect-ratio: 4 / 4.8;
  }
}

/* ---------- story ---------- */

.story {
  display: grid;
  gap: 36px;
  padding: 72px var(--gutter);
  background: var(--ink);
  color: #f4ede6;
}

.story .eyebrow {
  color: var(--coral);
}

/* The shop's hand-dyed skeins with a small inset of a finished piece, like the hero pair. */
.story-media {
  position: relative;
  padding-bottom: 36px;
}

.story-main {
  overflow: hidden;
  border-radius: var(--radius);
  aspect-ratio: 4 / 3.4;
}

.story-inset {
  position: absolute;
  right: 18px;
  bottom: 0;
  width: 32%;
  overflow: hidden;
  border: 6px solid var(--ink);
  border-radius: 18px;
  aspect-ratio: 3 / 4;
  background: #3a322d;
}

.story-main img,
.story-inset img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.story-text > p:not(.eyebrow) {
  max-width: 560px;
  margin-top: 18px !important;
  color: #d9cfc6;
  font-size: 17px;
}

.story-text .section-title {
  color: #fff;
}

.motto {
  font-family: var(--serif);
  font-style: italic;
  font-size: 24px !important;
  color: var(--coral) !important;
}

@media (min-width: 1024px) {
  .story {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
    align-items: start;
    gap: 80px;
    padding: 104px max(var(--gutter), calc((100% - var(--shell)) / 2));
  }

  .story-main {
    aspect-ratio: 4 / 4.6;
  }
}

/* ---------- lessons ---------- */

.lessons-layout {
  display: grid;
  gap: 40px;
}

.lessons-intro > p:not(.eyebrow) {
  max-width: 480px;
  margin-top: 18px !important;
  color: var(--ink-soft);
  font-size: 17px;
}

.lessons-photo {
  overflow: hidden;
  margin-top: 28px;
  border-radius: var(--radius);
  aspect-ratio: 16 / 10;
}

.lessons-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
}

.lesson-list {
  display: grid;
  border-top: 1px solid var(--line);
}

.lesson-list li {
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}

.lesson-top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
}

.lesson-top h3 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
}

.lesson-top span {
  color: var(--coral-ink);
  font-size: 14px;
  font-weight: 600;
}

.lesson-list p {
  margin-top: 4px !important;
  color: var(--ink-soft);
}

.lesson-note {
  margin: 20px 0 24px !important;
  color: var(--ink-muted);
  font-size: 14.5px;
}

@media (min-width: 1024px) {
  .lessons-layout {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
    gap: 80px;
  }

  .lessons-photo {
    aspect-ratio: 4 / 3.6;
  }
}

/* ---------- delivery ---------- */

.delivery-grid {
  display: grid;
  gap: 12px;
}

@media (min-width: 1024px) {
  .delivery-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }
}

.delivery-grid > li {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
}

.delivery-grid h3 {
  font-size: 16px;
  font-weight: 600;
}

.delivery-price {
  margin: 10px 0 8px !important;
  font-family: var(--serif);
  font-size: 32px;
  line-height: 1.05;
}

.delivery-grid > li > p:last-child {
  color: var(--ink-soft);
  font-size: 15px;
}

/* ---------- delivery page (27.10.2026) ---------- */
/* Like the rest of the shop (Oleg, 27.10.2026): the heading beside one calm photo of the same height,
   then white carrier cards with the owner's photos on the oat band. No blurred backgrounds. */

.delivery-page {
  max-width: calc(var(--shell) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 24px var(--gutter) 0;
}

.delivery-hero {
  display: grid;
  gap: 28px;
  padding: 8px 0 48px;
}

.delivery-head .page-lead {
  max-width: 34em;
}

.delivery-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px !important;
}

.delivery-facts li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink-soft);
  font-size: 15px;
}

.delivery-facts svg {
  flex: none;
  color: var(--coral-ink);
}

.delivery-hero-photo {
  overflow: hidden;
  border-radius: var(--radius);
  aspect-ratio: 16 / 9;
  background: var(--oat);
}

.delivery-hero-photo img,
.carrier-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.delivery-cards .delivery-grid {
  max-width: var(--shell);
  margin: 0 auto;
}

.carrier-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 1px 0 rgb(42 36 33 / 0.04);
}

.delivery-grid > li.carrier-card {
  padding: 0;
}

.carrier-photo {
  overflow: hidden;
  background: var(--oat);
}

.carrier-photo img {
  aspect-ratio: 16 / 9;
  height: auto;
}

.carrier-body {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 24px;
}

/* The icon sits on the edge of the photo, like a label. */
.has-photo .carrier-icon {
  margin-top: -47px;
  border: 4px solid var(--card);
  box-sizing: content-box;
}

.carrier-icon {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: var(--coral-soft);
  color: var(--coral-ink);
}

.carrier-card h3 {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 400;
}

.carrier-text {
  color: var(--ink-soft);
  font-size: 15px;
}

.carrier-methods {
  display: grid;
  gap: 8px;
  margin-top: 16px !important;
  padding-top: 16px !important;
  border-top: 1px solid var(--line);
  font-size: 15px;
}

.carrier-methods li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.carrier-methods svg {
  flex: none;
  margin-top: 0.2em;
  color: var(--coral-ink);
}

.carrier-site {
  margin-top: auto !important;
  padding-top: 18px;
  font-size: 15px;
}

.carrier-site a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--coral-ink);
  text-underline-offset: 3px;
}

@media (min-width: 1024px) {
  .delivery-page {
    padding-top: 36px;
  }

  .delivery-hero {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 64px;
    align-items: start;
    padding-bottom: 64px;
  }

  .delivery-hero-photo {
    aspect-ratio: 16 / 10;
  }

  .delivery-cards .delivery-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
  }

  .carrier-body {
    padding: 28px 30px 30px;
  }
}


/* ---------- contacts ---------- */

.contacts {
  max-width: none;
  background: var(--coral-soft);
}

.contacts-layout {
  display: grid;
  gap: 36px;
  max-width: var(--shell);
  margin: 0 auto;
}

@media (min-width: 1024px) {
  .contacts-layout {
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 80px;
  }
}

/* Visit block: the shop photo and the address in body type (Oleg, 25.10.2026) instead of a giant address. */
.contacts-visit {
  display: grid;
  gap: 20px;
  align-items: start;
}

@media (min-width: 600px) {
  .contacts-visit {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
    gap: 28px;
  }

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

.contacts-photo {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--oat);
  aspect-ratio: 4 / 3;
}

@media (min-width: 600px) {
  .contacts-photo {
    aspect-ratio: 4 / 5;
  }
}

.contacts-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 62%;
}

.contacts-title {
  font-family: var(--serif);
  font-size: 30px;
  font-size: max(26px, min(1.2vw + 20px, 34px));
  font-size: clamp(26px, 1.2vw + 20px, 34px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

.contacts-address {
  margin-top: 14px !important;
  font-size: 18px;
  line-height: 1.5;
}

.contacts-note {
  margin-top: 12px !important;
  color: var(--ink-soft);
}

.contacts-hours {
  margin-top: 8px !important;
  color: #7a3a33;
  font-size: 15px;
}

.contact-links {
  display: grid;
  gap: 12px;
}

.contact-links a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  border-radius: var(--radius-sm);
  background: var(--card);
  text-decoration: none;
  transition: transform 0.2s;
}

.contact-links a:hover {
  transform: translateY(-2px);
}

.contact-links a > svg:first-child {
  color: var(--coral-ink);
}

.contact-links a > span {
  display: grid;
}

.contact-links strong {
  font-size: 17px;
}

.contact-links a > span > span {
  color: var(--ink-soft);
  font-size: 14.5px;
}

/* ---------- footer ---------- */

.footer {
  padding: 56px var(--gutter) 28px;
  border-top: 1px solid var(--line);
  background: var(--oat);
}

.footer-inner {
  display: grid;
  gap: 32px;
  max-width: var(--shell);
  margin: 0 auto;
}

@media (min-width: 768px) {
  .footer-inner {
    grid-template-columns: 1.2fr 1fr 1fr;
  }
}

.footer-brand .logo-image {
  height: 64px;
}

.footer-brand p {
  margin-top: 10px !important;
  color: var(--ink-soft);
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
}

.footer-nav ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 20px;
}

.footer-nav a,
.footer-address a {
  color: var(--ink-soft);
  text-underline-offset: 3px;
}

.footer-address {
  color: var(--ink-soft);
  font-style: normal;
  line-height: 1.8;
}

.footer-legal {
  max-width: var(--shell);
  margin: 40px auto 0 !important;
  padding-top: 20px;
  border-top: 1px solid var(--oat-deep);
  color: var(--ink-muted);
  font-size: 13px;
}

@media (prefers-reduced-motion: reduce) {
  .page *,
  .page *::before,
  .page *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* =====================================================================
   Store screens (beyond the concept): same tokens, same rhythm.
   ===================================================================== */

.icon {
  flex: none;
  vertical-align: middle;
}

.page :where(input, select, textarea) {
  font: inherit;
  color: var(--ink);
}

.page :where(input:not([type="checkbox"], [type="radio"]), select, textarea) {
  width: 100%;
  min-height: 46px;
  padding: 10px 14px;
  border: 1px solid #d9cbbb;
  border-radius: 12px;
  background: var(--card);
}

.page :where(input, select, textarea):focus-visible {
  outline: 2px solid var(--coral-ink);
  outline-offset: 1px;
}

.page :where(input[type="checkbox"], input[type="radio"]) {
  width: 18px;
  height: 18px;
  accent-color: var(--ink);
}

.narrow {
  max-width: 760px;
}

.flash,
.flash-inline {
  max-width: calc(var(--shell) + 2 * var(--gutter));
  margin: 16px auto 0;
  padding: 12px var(--gutter);
  color: #275c3e;
  font-weight: 600;
}

.flash-inline {
  padding: 12px 16px;
  border-radius: 12px;
  background: #e8f3ec;
}

.lang-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  padding: 0 8px;
  color: var(--ink-soft);
}

/* Mobile drawer: <details> works without JavaScript. */
.drawer-wrap > summary {
  list-style: none;
  margin-left: -10px;
}

.drawer-wrap > summary::-webkit-details-marker {
  display: none;
}

.drawer {
  /* A panel under the header, like the search panel: absolute inside the sticky header,
     so it needs neither `position: fixed` nor `inset` (both unreliable in older Safari). */
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  z-index: 5;
  max-height: 80vh;
  max-height: min(80vh, calc(100vh - 170px));
  padding: 8px var(--gutter) 28px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  box-shadow: 0 18px 30px rgb(42 36 33 / 0.1);
}

.drawer > nav,
.drawer-langs {
  max-width: var(--shell);
  margin-right: auto;
  margin-left: auto;
}

.menu-icon-close {
  display: none;
}

.drawer-wrap[open] .menu-icon-open {
  display: none;
}

.drawer-wrap[open] .menu-icon-close {
  display: inline-flex;
}

.menu-icon-open,
.menu-icon-close {
  align-items: center;
  justify-content: center;
}

.drawer ul {
  display: grid;
  gap: 2px;
}

.drawer nav a {
  display: block;
  padding: 14px 4px;
  border-bottom: 1px solid var(--line);
  font-family: var(--serif);
  font-size: 26px;
  text-decoration: none;
}

.drawer-note {
  margin-top: 24px !important;
  color: var(--ink-muted);
  font-size: 14px;
}

@media (min-width: 1200px) {
  .drawer-wrap {
    display: none;
  }
}

@media (max-width: 479px) {
  .lang-badge .lang-code {
    display: none;
  }
}

.cart-link .cart-count {
  top: 4px;
}

.section-more {
  margin-top: 32px !important;
}

/* ---------- breadcrumbs / page head ---------- */

.breadcrumbs {
  margin-bottom: 18px;
  color: var(--ink-muted);
  font-size: 14px;
}

.breadcrumbs a {
  color: var(--ink-soft);
  text-underline-offset: 3px;
}

.page-title {
  font-family: var(--serif);
  font-size: 37px;
  font-size: max(32px, min(4.6vw, 52px));
  font-size: clamp(32px, 4.6vw, 52px);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.page-lead {
  max-width: 620px;
  margin-top: 14px !important;
  color: var(--ink-soft);
  font-size: 18px;
}

/* ---------- colour links on home ---------- */

.color-strip {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}

.more-title {
  margin-bottom: 14px !important;
  font-size: 15px;
  font-weight: 600;
}

.color-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.color-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 16px 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink-soft);
  font-size: 14.5px;
  text-decoration: none;
}

.color-link:hover {
  border-color: var(--ink-muted);
  color: var(--ink);
}

.swatch-dot {
  display: inline-block;
  flex: none;
  width: 14px;
  height: 14px;
  border: 1px solid rgb(42 36 33 / 0.18);
  border-radius: 999px;
}

.swatch-lg {
  width: 22px;
  height: 22px;
}

.swatch-unknown {
  border-style: dashed;
  background: transparent;
}

.swatch-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  min-height: 16px;
  margin-top: 10px;
}

.swatch-more {
  color: var(--ink-muted);
  font-size: 12px;
}

/* ---------- product cards as links ---------- */

.product-link {
  display: flex;
  flex: 1;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
}

.product-link:hover .product-name {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.product-brand {
  margin-bottom: 4px !important;
  color: var(--coral-ink);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.card-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Cards in one row share a baseline for price and button (#2): the text block grows,
   the price block is pushed to the bottom; extra space stays inside shorter cards. */
.product-body > .swatch-row {
  margin-top: auto;
  padding-top: 12px;
}

.product-body > .swatch-row + .price {
  margin-top: 8px;
}

.product-link:hover .card-button {
  background: var(--ink);
  color: #fff;
}

.sale-badge-out {
  top: auto;
  bottom: 10px;
  background: var(--ink);
  color: #fff;
}

/* ---------- catalogue ---------- */

.catalog-head {
  max-width: calc(var(--shell) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 32px var(--gutter) 8px;
}

.category-tabs {
  display: flex;
  gap: 8px;
  margin: 24px calc(-1 * var(--gutter)) 0 !important;
  padding: 2px var(--gutter) 6px !important;
  overflow-x: auto;
  scrollbar-width: none;
}

.category-tabs a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid #d9cbbb;
  border-radius: 999px;
  color: var(--ink-soft);
  font-size: 15px;
  text-decoration: none;
  white-space: nowrap;
}

.category-tabs a span {
  color: var(--ink-muted);
  font-size: 13px;
}

.category-tabs a[aria-current="page"] {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
}

.category-tabs a[aria-current="page"] span {
  color: #d9cfc6;
}

.catalog-layout {
  display: grid;
  gap: 20px;
  max-width: calc(var(--shell) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 16px var(--gutter) 80px;
}

@media (min-width: 1024px) {
  .catalog-layout {
    gap: 24px;
    padding-top: 20px;
  }
}

/* Compact filter bar (owner, 29.10.2026): «Цвет», «Производитель», «Метраж» open by tap as small
   panels; the button shows how many values are chosen, chosen values are also chips above the
   results. Phones and tablets: one or two short rows until a group is opened. */
.filter-bar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.fgroup summary,
.filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 42px;
  padding: 0 14px 0 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  list-style: none;
}

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

.fgroup summary:hover,
.filter-toggle:hover {
  border-color: var(--ink-muted);
}

.fgroup summary svg {
  color: var(--ink-muted);
  transition: transform 0.2s;
}

.fgroup[open] summary {
  border-color: var(--ink);
}

.fgroup[open] summary svg {
  transform: rotate(180deg);
}

.fgroup-on summary,
.filter-toggle.fgroup-on {
  border-color: var(--ink);
  background: var(--oat);
}

.fgroup-count {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--coral-ink);
  color: #fff;
  font-size: 12px;
}

.filter-toggle {
  font-weight: 500;
}

.filter-toggle input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--ink);
}

/* «Состав пряжи» comes first and stands out: the owner's main filter. */
.fgroup-main summary {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
}

.fgroup-main summary svg {
  color: rgb(255 255 255 / 0.75);
}

.fgroup-main summary strong {
  max-width: 14em;
  overflow: hidden;
  color: #fff;
  font-weight: 600;
  text-overflow: ellipsis;
}

.fgroup-main.fgroup-on summary,
.fgroup-main[open] summary {
  border-color: var(--ink);
  background: var(--ink);
}

.fgroup-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.fgroup-chips .chip {
  min-height: 36px;
  padding: 6px 12px;
  font-size: 14px;
}

.fgroup-chips .chip span {
  color: var(--ink-muted);
}

.fgroup-chips .chip-on,
.fgroup-chips .chip-on:hover {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
}

.fgroup-chips .chip-on span {
  color: rgb(255 255 255 / 0.72);
}

/* The open panel sits under the bar (phones) or under its button (wider screens), above the results. */
.fgroup-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 30;
  max-height: min(60vh, 460px);
  overflow-y: auto;
  padding: 16px 18px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
  box-shadow: 0 14px 34px rgb(42 36 33 / 0.14);
}

.fgroup-search {
  margin-bottom: 10px;
}

@media (min-width: 768px) {
  .fgroup {
    position: relative;
  }

  .fgroup-panel {
    top: calc(100% + 8px);
    right: auto;
    width: 360px;
  }

  .fgroup[data-fgroup="colour"] .fgroup-panel {
    width: 420px;
  }

  .fgroup[data-fgroup="composition"] .fgroup-panel {
    width: min(640px, calc(100vw - 2 * var(--gutter)));
  }
}

.filter-group {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.filter-group legend,
.filter-label {
  display: block;
  margin-bottom: 10px;
  padding: 0;
  font-size: 15px;
  font-weight: 600;
}

.color-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 10px;
}

.color-option,
.check-option {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  font-size: 14.5px;
  cursor: pointer;
}

.color-option small,
.check-option small {
  margin-left: auto;
  color: var(--ink-muted);
  font-size: 12.5px;
}

.check-list {
  display: grid;
  gap: 2px;
}

.range-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.range-inputs label {
  display: grid;
  gap: 4px;
  color: var(--ink-muted);
  font-size: 13px;
}

.chips-small {
  margin-top: 10px;
}

.chips-small .chip {
  min-height: 32px;
  padding: 0 10px;
  font-size: 13px;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink-soft);
  font-size: 14px;
  text-decoration: none;
}

.chip:hover {
  border-color: var(--ink-muted);
  color: var(--ink);
}

.chip-active {
  border-color: var(--ink);
  background: var(--oat);
  color: var(--ink);
}

.chip-reset {
  align-self: center;
  margin-left: 4px;
  color: var(--coral-ink);
  font-size: 14px;
}

.filter-hint {
  margin-top: 8px !important;
  color: var(--ink-muted);
  font-size: 13px;
  line-height: 1.45;
}

.filters-apply {
  width: 100%;
}

.results-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.results-count {
  color: var(--ink-soft);
  font-size: 15px;
  font-weight: 600;
}

.sort-form {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-muted);
  font-size: 14px;
}

.sort-form select {
  width: auto !important;
  min-height: 40px !important;
}

.active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 18px;
}

.pager {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 32px;
}

.pager a {
  display: grid;
  place-items: center;
  min-width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink-soft);
  text-decoration: none;
}

.pager a[aria-current="page"] {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
}

.empty-state {
  margin: 0 auto;
  padding-top: 56px;
  padding-bottom: 56px;
  padding-block: 56px;
  text-align: center;
}

.empty-state .page-lead {
  margin-left: auto;
  margin-right: auto;
  margin-inline: auto;
}

.empty-state p:last-child {
  margin-top: 24px !important;
}

@media (min-width: 1024px) {
  .catalog-results .product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .catalog-results .product-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
  }
}

/* ---------- product page ---------- */

.product-page {
  max-width: calc(var(--shell) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 28px var(--gutter) 40px;
}

.product-layout {
  display: grid;
  gap: 28px;
}

@media (min-width: 1024px) {
  .product-layout {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: start;
    gap: 56px;
  }

  .gallery {
    position: -webkit-sticky;
    position: sticky;
    top: 104px;
  }
}

.gallery-main {
  overflow: hidden;
  border-radius: var(--radius);
  aspect-ratio: 4 / 5;
  background: var(--oat);
}

.gallery-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-thumbs {
  display: flex;
  gap: 8px;
  margin-top: 10px !important;
  overflow-x: auto;
  scrollbar-width: thin;
}

.gallery-thumb {
  flex: none;
  width: 72px;
  height: 90px;
  padding: 0;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 10px;
  background: none;
  cursor: pointer;
}

.gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-thumb[aria-current="true"] {
  border-color: var(--ink);
}

.product-title {
  font-family: var(--serif);
  font-size: 30px;
  font-size: max(30px, min(3.6vw, 44px));
  font-size: clamp(30px, 3.6vw, 44px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.015em;
}

.product-composition-lg {
  margin-top: 10px !important;
  color: var(--ink-soft);
  font-size: 17px;
}

.price-lg {
  margin-top: 18px !important;
}

.price-lg strong {
  font-size: 30px;
}

.buy-form {
  display: grid;
  gap: 18px;
  margin-top: 22px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
}

.variant-group {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.variant-group legend {
  margin-bottom: 10px;
  font-size: 15px;
  font-weight: 600;
}

.variant-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}

.variant-option {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  cursor: pointer;
}

/* The radio covers its label and draws the selected frame itself (works without :has()). */
.variant-option input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  cursor: inherit;
  -webkit-appearance: none;
  appearance: none;
}

.variant-option input:checked {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}

.variant-option:has(input:checked) {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
  background: var(--card);
}

.variant-option:has(input:focus-visible) {
  outline: 2px solid var(--coral-ink);
  outline-offset: 2px;
}

.variant-option.is-out {
  opacity: 0.5;
  cursor: not-allowed;
}

.variant-dots {
  display: inline-flex;
  gap: 2px;
}

.variant-name {
  font-weight: 600;
}

.variant-option small {
  grid-column: 1 / -1;
  color: var(--ink-muted);
  font-size: 12.5px;
}

.qty-block .weight-options {
  margin-bottom: 10px;
}

.weight-input {
  max-width: 220px;
}

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

.stepper input {
  width: 96px !important;
  text-align: center;
}

.stepper .icon-button {
  border: 1px solid var(--line);
}

.buy-button {
  width: 100%;
}

.buy-note {
  color: var(--ink-muted);
  font-size: 13.5px;
}

.form-error {
  color: #a3242c;
  font-size: 14px;
  font-weight: 600;
}

.form-error:empty {
  display: none;
}

.form-error-block {
  max-width: 760px;
  margin-bottom: 18px;
  padding: 14px 16px;
  border-radius: 12px;
  background: #fbe4e3;
}

.product-facts {
  display: grid;
  margin-top: 28px !important;
  border-top: 1px solid var(--line);
}

.product-facts > div {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.product-facts dt {
  color: var(--ink-muted);
  font-size: 14px;
}

.product-description {
  margin-top: 24px;
  color: var(--ink-soft);
}

.product-description p + p {
  margin-top: 12px !important;
}

.related {
  padding-left: 0;
  padding-right: 0;
  padding-inline: 0;
}

.related .section-title {
  margin-bottom: 28px;
  font-size: 26px;
  font-size: max(26px, min(3vw, 36px));
  font-size: clamp(26px, 3vw, 36px);
}

/* ---------- cart / checkout / order ---------- */

.cart-page,
.checkout-page {
  padding-top: 32px;
}

.cart-layout,
.checkout-layout {
  display: grid;
  gap: 28px;
  margin-top: 24px;
}

@media (min-width: 1024px) {
  .cart-layout,
  .checkout-layout {
    grid-template-columns: minmax(0, 1fr) 360px;
    align-items: start;
    gap: 48px;
  }
}

.cart-lines {
  display: grid;
  border-top: 1px solid var(--line);
}

.cart-line {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 14px 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

@media (min-width: 640px) {
  .cart-line {
    grid-template-columns: 96px minmax(0, 1fr) auto;
  }
}

.cart-thumb img {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 12px;
  object-fit: cover;
}

.cart-title {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 400;
}

.cart-title a {
  text-decoration: none;
}

.cart-variant {
  margin-top: 2px !important;
  color: var(--ink-soft);
  font-size: 14px;
}

.cart-qty {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.cart-qty input {
  width: 110px !important;
}

.cart-total {
  display: grid;
  gap: 4px;
  grid-column: 2;
  justify-items: start;
}

@media (min-width: 640px) {
  .cart-total {
    grid-column: auto;
    justify-items: end;
    text-align: right;
  }
}

.cart-total strong {
  font-size: 19px;
}

.cart-total small {
  color: var(--ink-muted);
  font-size: 13px;
}

.link-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-soft);
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.summary {
  display: grid;
  gap: 16px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
}

@media (min-width: 1024px) {
  .summary {
    position: -webkit-sticky;
    position: sticky;
    top: 104px;
  }
}

.summary-title {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 400;
}

.summary dl,
.summary-totals,
.order-meta {
  display: grid;
  gap: 8px;
}

.summary dl > div,
.summary-totals > div,
.order-meta > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.summary dt,
.summary-totals dt,
.order-meta dt {
  color: var(--ink-soft);
}

.summary .button-primary {
  width: 100%;
}

.summary-lines {
  display: grid;
  gap: 10px;
}

.summary-lines li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 14.5px;
}

.summary-lines small {
  display: block;
  color: var(--ink-muted);
  font-size: 13px;
}

.summary-totals .grand {
  padding-top: 8px;
  border-top: 1px solid var(--line);
  font-size: 18px;
  font-weight: 600;
}

.test-note {
  max-width: 760px;
  margin: 18px 0;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--coral-soft);
  color: #6c3029;
}

.checkout-form {
  display: grid;
  gap: 24px;
}

.form-section {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
}

.form-section legend {
  padding: 0 6px;
  font-family: var(--serif);
  font-size: 22px;
}

.field {
  display: grid;
  gap: 6px;
}

.field label {
  font-size: 15px;
  font-weight: 600;
}

.optional {
  color: var(--ink-muted);
  font-size: 13px;
  font-weight: 400;
}

.methods {
  display: grid;
  gap: 8px;
}

.method-option {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 4px 12px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
}

.method-option:has(input:checked) {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}

.method-option small {
  grid-column: 2 / -1;
  color: var(--ink-muted);
  font-size: 13px;
}

.method-price {
  color: var(--ink-soft);
  font-size: 14px;
  text-align: right;
}

.checkout-submit {
  justify-self: start;
}

.order-page .summary-lines {
  margin: 24px 0 !important;
  padding: 18px 0;
  border-block: 1px solid var(--line);
}

.order-meta {
  margin-top: 20px !important;
}

@media (max-width: 479px) {
  .checkout-submit {
    width: 100%;
  }

  .method-option {
    grid-template-columns: auto 1fr;
  }

  .method-price {
    grid-column: 2;
    text-align: left;
  }
}

/* ---------- refinements after QA ---------- */

.main-nav a {
  white-space: nowrap;
}

@media (min-width: 1024px) and (max-width: 1199px) {
  .main-nav a {
    padding-left: 8px;
    padding-right: 8px;
    padding-inline: 8px;
    font-size: 14px;
  }
}

.delivery-price-text {
  font-family: var(--sans);
  font-size: 17px !important;
  font-weight: 600;
  line-height: 1.35 !important;
}

@media (min-width: 1024px) {
  .delivery-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }
}

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

.variant-state {
  margin: -4px 0 10px !important;
  color: var(--ink-muted);
  font-size: 13.5px;
}

/* Variant chips size to their content (#3): long names such as "Основной" or
   translated ones are never clipped; chips wrap to the next line instead. */
.variant-list {
  display: flex;
  flex-wrap: wrap;
}

.variant-option {
  flex: 0 1 auto;
  min-width: 96px;
  max-width: 100%;
}

.variant-name {
  overflow-wrap: anywhere;
}

/* ---------- languages ---------- */

.lang-menu {
  position: relative;
}

.lang-menu > summary {
  list-style: none;
}

.lang-menu > summary::-webkit-details-marker {
  display: none;
}

.lang-code {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.lang-list {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 50;
  min-width: 190px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
  box-shadow: 0 18px 40px rgb(42 36 33 / 0.12);
}

.lang-list a,
.drawer-langs a,
.footer-langs a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--ink-soft);
  text-decoration: none;
}

.lang-list a[aria-current="true"],
.drawer-langs a[aria-current="true"],
.footer-langs a[aria-current="true"] {
  background: var(--oat);
  color: var(--ink);
  font-weight: 600;
}

.lang-list .lang-code,
.drawer-langs .lang-code,
.footer-langs .lang-code {
  min-width: 24px;
  color: var(--ink-muted);
}

.drawer-langs ul,
.footer-langs ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.drawer-langs {
  margin-top: 24px;
}

.drawer-langs a {
  font-family: var(--sans) !important;
  font-size: 16px !important;
  border: 1px solid var(--line) !important;
}

.footer-langs {
  max-width: var(--shell);
  margin: 28px auto 0;
}

.footer-langs a {
  padding: 6px 10px;
  font-size: 14px;
}

@media (max-width: 479px) {
  .lang-menu .lang-code {
    display: none;
  }

  .lang-list .lang-code {
    display: inline;
  }
}

.translation-note {
  max-width: calc(var(--shell) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 10px var(--gutter);
  color: var(--ink-muted);
  font-size: 13.5px;
}

/* Georgian: no uppercase (it would switch to Mtavruli) and room for long words.
   Fonts: the system UI font (-apple-system / system-ui) has no Georgian and iOS Safari then
   shows empty boxes instead of looking further down the list (seen in Safari on iOS 26.3), so
   Georgian text starts with Helvetica Neue (its Georgian comes from the system cascade), then
   Noto Sans Georgian (Android/Linux), Sylfaen (Windows). The Georgian language link
   ("ქართული") appears on Russian and English pages too and uses the same stack. */
.page {
  --sans-ka: "Helvetica Neue", "Noto Sans Georgian", Sylfaen, "Segoe UI", Roboto, Arial, sans-serif;
}

.page:lang(ka) {
  --sans: var(--sans-ka);
  --serif: var(--sans-ka);
}

.page a[lang="ka"] {
  font-family: var(--sans-ka) !important;
}

.page:lang(ka) :where(.hero-title, .section-title, .page-title, .product-title, .contacts-title, .category-name, .product-name, .cart-title) {
  font-weight: 500;
  letter-spacing: 0;
}

.page:lang(ka) .hero-title {
  font-size: 37px;
  font-size: max(31px, min(1.8vw + 23px, 50px));
  font-size: clamp(31px, 1.8vw + 23px, 50px);
  line-height: 1.14;
}

.page:lang(ka) .hero-title-accent {
  font-style: normal;
  font-weight: 400;
}

.page:lang(ka) .section-title,
.page:lang(ka) .page-title {
  font-size: 27px;
  font-size: max(26px, min(3.4vw, 40px));
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.18;
}

.page:lang(ka) .hero-title em,
.page:lang(ka) .motto,
.page:lang(ka) .footer-brand p {
  font-style: normal;
}

.page:lang(ka) :where(.eyebrow, .eyebrow-small, .product-brand, .toast-label) {
  letter-spacing: 0.02em;
  text-transform: none;
}

.page:lang(ka) .main-nav a {
  font-size: 14px;
}

/* Grid children must be allowed to shrink below their content (thumbnail strips,
   long words), otherwise the column widens and gets clipped on phones. */
.product-layout > *,
.catalog-layout > *,
.cart-layout > *,
.checkout-layout > *,
.cart-info {
  min-width: 0;
}

@media (max-width: 1023px) {
  /* An odd last category tile spans the row instead of sitting alone. */
  .category-grid li:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .category-grid li:last-child:nth-child(odd) .category-tile {
    aspect-ratio: 16 / 9;
  }
}

.summary-lines strong,
.summary dd,
.cart-total strong {
  white-space: nowrap;
}

.product-name,
.product-title {
  overflow-wrap: anywhere;
}

/* ---------- shop search (#13, compact since #17) ---------- */

/* Header button: clearly a search, with a visible label from 600 px; icon-only pill on phones. */
.search-toggle {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.2s, background-color 0.2s;
}

.search-toggle:hover,
.search-toggle[aria-expanded="true"] {
  border-color: var(--ink);
}

.search-toggle-label {
  display: none;
}

@media (min-width: 600px) {
  .search-toggle {
    padding: 0 16px 0 13px;
  }

  .search-toggle-label {
    display: inline;
  }
}

/* Panel opened from the header on ordinary pages. */
.search-panel {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  box-shadow: 0 18px 30px rgb(42 36 33 / 0.08);
}

.search-panel-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: calc(var(--shell) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 12px var(--gutter);
}

.search-panel .site-search-form {
  flex: 1;
}

.site-search-form {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.site-search-icon {
  position: absolute;
  left: 14px;
  display: inline-flex;
  color: var(--ink-muted);
  pointer-events: none;
}

.site-search-form input[type="search"] {
  flex: 1;
  min-width: 0;
  min-height: 46px;
  padding: 0 14px 0 42px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  font: inherit;
  font-size: 16px; /* no zoom on iOS */
}

.site-search-form input[type="search"]:focus {
  border-color: var(--ink);
  outline: 2px solid var(--coral-ink);
  outline-offset: 1px;
}

.site-search-button {
  flex: none;
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

/* Catalogue and search results: the field stays visible, sized to the page heading. */
.catalog-title-row {
  display: grid;
  gap: 14px;
}

.site-search-compact input[type="search"],
.site-search-compact .site-search-button {
  min-height: 44px;
}

@media (min-width: 1024px) {
  .catalog-title-row {
    grid-template-columns: minmax(0, 1fr) minmax(340px, 460px);
    align-items: end;
    gap: 32px;
  }
}

.search-suggest {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  left: 0;
  z-index: 45;
  max-height: min(70vh, 520px);
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
  box-shadow: 0 12px 32px rgb(42 36 33 / 0.12);
}

.suggest-item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 8px;
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
}

.suggest-item img {
  width: 44px;
  height: 55px;
  border-radius: 6px;
  object-fit: cover;
}

.suggest-item[aria-selected="true"],
.suggest-item:hover,
.suggest-all[aria-selected="true"],
.suggest-all:hover {
  background: var(--coral-soft);
}

.suggest-body {
  display: grid;
  min-width: 0;
}

.suggest-brand {
  color: var(--coral-ink);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.suggest-name {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.suggest-meta {
  overflow: hidden;
  color: var(--ink-muted);
  font-size: 13px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.suggest-price {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

.suggest-all {
  display: block;
  padding: 10px 8px;
  border-radius: 10px;
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.suggest-empty {
  padding: 10px 8px;
  color: var(--ink-muted);
}

:lang(ka) .suggest-brand {
  text-transform: none;
}

@media (max-width: 479px) {
  .suggest-item {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .suggest-price {
    grid-column: 2;
  }
}

.quick-fibres {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  max-width: calc(var(--shell) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 12px var(--gutter) 0;
}

.quick-fibres p {
  color: var(--ink-muted);
  font-size: 14px;
}

.quick-fibres ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.quick-fibres .chip span,
.category-tabs a span {
  color: var(--ink-muted);
}

.search-maybe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 12px !important;
}

[data-catalog][aria-busy="true"] .catalog-results {
  opacity: 0.6;
  transition: opacity 0.15s;
}

/* ---------- lessons teaser on the home page (#15) ---------- */

.lessons-teaser-inner {
  display: grid;
  gap: 28px;
  align-items: start;
  padding: 0;
}

.lessons-teaser-media {
  overflow: hidden;
  border-radius: var(--radius);
  aspect-ratio: 4 / 3;
  background: var(--oat);
}

.lessons-teaser-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
}

.lessons-teaser-text > p:not(.eyebrow) {
  max-width: 520px;
  margin-top: 16px !important;
  color: var(--ink-soft);
  font-size: 17px;
}

.lesson-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0 26px !important;
}

.lesson-chips li {
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink-soft);
  font-size: 14px;
}

@media (min-width: 1024px) {
  .lessons-teaser-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 72px;
  }

  .lessons-teaser-media {
    aspect-ratio: 5 / 4;
  }
}

/* ---------- lessons page (#15) ---------- */

.lessons-page {
  max-width: calc(var(--shell) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 28px var(--gutter) 40px;
}

.lessons-hero {
  display: grid;
  gap: 36px;
  padding: 8px 0 56px;
}

.lessons-hero-text .page-lead {
  max-width: 34em;
}

.lessons-facts {
  display: grid;
  gap: 14px;
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.lessons-facts dt {
  color: var(--ink-muted);
  font-size: 13px;
  font-weight: 600;
}

.lessons-facts dd {
  margin: 2px 0 0;
  color: var(--ink-soft);
}

.lessons-facts a {
  display: inline-block;
  color: var(--coral-ink);
  text-underline-offset: 3px;
}

.lessons-hero-media {
  position: relative;
  margin: 0;
  padding-bottom: 44px;
}

.lessons-hero-main {
  overflow: hidden;
  border-radius: var(--radius);
  aspect-ratio: 4 / 3.4;
  background: var(--oat);
}

.lessons-hero-main img,
.lessons-hero-inset img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lessons-hero-inset {
  position: absolute;
  right: 12px;
  bottom: 0;
  width: 34%;
  overflow: hidden;
  border: 6px solid var(--paper);
  border-radius: 18px;
  aspect-ratio: 3 / 4;
  background: var(--oat);
}


.lessons-formats,
.lessons-how,
.lessons-yarn {
  padding: 56px 0;
  border-top: 1px solid var(--line);
}

.format-list {
  display: grid;
  margin-top: 28px !important;
}

.format {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 6px 16px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}

.format:last-child {
  border-bottom: 0;
}

.format-number {
  grid-row: span 2;
  padding-top: 4px;
  color: var(--coral-ink);
  font-family: var(--serif);
  font-size: 20px;
}

.format-head h3 {
  font-family: var(--serif);
  font-size: 25px;
  font-size: max(21px, min(1vw + 17px, 26px));
  font-size: clamp(21px, 1vw + 17px, 26px);
  font-weight: 400;
  line-height: 1.2;
}

.format-note {
  margin-top: 4px !important;
  color: var(--coral-ink);
  font-size: 14px;
  font-weight: 600;
}

.format-text {
  max-width: 36em;
  color: var(--ink-soft);
}

.lessons-how .steps {
  max-width: 640px;
  margin-bottom: 30px !important;
}

/* A pair of the owner's photos of knitting in progress next to the steps. */
.lessons-how-photos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 36px;
}

.lessons-how-photos figure {
  margin: 0;
}

.lessons-how-photos img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-sm);
  object-fit: cover;
}


.step-extra {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px !important;
  color: var(--ink-muted);
  font-size: 14.5px;
}

.step-extra svg {
  color: var(--coral-ink);
}

.lessons-yarn {
  display: grid;
  gap: 32px;
}

.lessons-yarn-text > p {
  max-width: 34em;
  margin: 14px 0 20px !important;
  color: var(--ink-soft);
}

.lessons-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(220px, 72%);
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 6px;
  scroll-snap-type: x mandatory;
}

.lessons-strip figure {
  margin: 0;
  scroll-snap-align: start;
}

.lessons-strip img {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-sm);
  object-fit: cover;
}


@media (min-width: 768px) {
  .lessons-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .format {
    grid-template-columns: 56px minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 4px 28px;
    align-items: baseline;
  }

  .format-number {
    grid-row: auto;
  }

  .lessons-strip {
    grid-auto-flow: initial;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: visible;
  }
}

@media (min-width: 1024px) {
  .lessons-page {
    padding-top: 36px;
  }

  .lessons-hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 64px;
    align-items: start;
    padding-bottom: 72px;
  }

  .lessons-formats,
  .lessons-how,
  .lessons-yarn {
    padding: 80px 0;
  }

  .lessons-yarn {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 56px;
    align-items: start;
  }

  .lessons-how {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    gap: 64px;
    align-items: start;
  }

  .lessons-how-photos {
    margin-top: 0;
  }
}

/* ---------- price to be confirmed (#18) ---------- */

.price-pending strong {
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 400;
}

.price-lg.price-pending strong {
  font-size: 28px;
  font-size: max(26px, min(1vw + 20px, 32px));
  font-size: clamp(26px, 1vw + 20px, 32px);
}

.price-pending-box {
  margin-top: 18px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
}

.price-pending-box > p:first-child {
  color: var(--ink-soft);
}

.pending-shades-title {
  margin-top: 14px !important;
  color: var(--ink-muted);
  font-size: 13px;
  font-weight: 600;
}

.pending-shades {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 18px !important;
}

.pending-shades li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  font-size: 14px;
}

/* =====================================================================
   Tablet and phone fixes (iPad / iPhone review, 06.11.2026)
   Kept at the end so these rules win over the earlier, general ones.
   ===================================================================== */

/* Header on narrow phones: menu, logo, search, language and cart all fit between the
   gutters (the cart used to be pushed off the screen at 320 px and 375 px). */
@media (max-width: 389px) {
  .header-inner {
    gap: 4px;
  }

  .logo-image {
    height: 44px;
  }

  .header-actions {
    gap: 0;
  }

  .search-toggle {
    padding: 0 10px;
  }
}

@media (max-width: 359px) {
  .logo-image {
    height: 36px;
  }

  .icon-button {
    min-width: 36px;
    padding: 0 5px;
  }

  .search-toggle {
    min-width: 40px;
    padding: 0 9px;
  }
}

/* The full navigation with the longer Georgian labels needs more room below 1440 px
   (the cart used to be cut off at 1280 px in Georgian). */
@media (min-width: 1200px) and (max-width: 1439px) {
  .main-nav a {
    padding: 8px 8px;
  }
}

/* Language choices: short code + the language's own name, never cut off. */
.lang-name {
  white-space: nowrap;
}

.lang-list {
  max-width: calc(100vw - 2 * var(--gutter));
}

/* The language links inside the menu panel are chips (code + name); `.drawer nav a` would
   otherwise turn them into big block links without a gap, and phones hid the code. */
.drawer .drawer-langs a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 14px;
}

.drawer .drawer-langs .lang-code {
  display: inline;
  min-width: 0;
}

/* Top delivery line: the icon keeps clear of the text and sits on its first line. */
.announce {
  gap: 10px;
}

/* Colour chips: a clear gap between the circle and its name, and a visible edge on white. */
.color-link {
  gap: 10px;
  padding: 0 16px 0 12px;
}

@media (max-width: 1023px) {
  .color-link {
    min-height: 44px;
  }
}

.swatch-dot {
  border-color: rgb(42 36 33 / 0.32);
}

/* Sorting never wider than its column. */
.sort-form {
  min-width: 0;
  max-width: 100%;
}

.sort-form select {
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 479px) {
  .sort-form {
    width: 100%;
  }

  .sort-form label,
  .sort-form > span {
    flex: none;
  }

  .sort-form select {
    flex: 1 1 auto;
  }

  .filter-toggle {
    max-width: 100%;
    white-space: normal;
  }
}

/* Open filter panels on tablets span the filter bar instead of hanging off its button
   (they ran past the right edge at 768-834 px). */
@media (min-width: 768px) and (max-width: 1199px) {
  .fgroup {
    position: static;
  }

  .fgroup-panel,
  .fgroup[data-fgroup="colour"] .fgroup-panel,
  .fgroup[data-fgroup="composition"] .fgroup-panel {
    left: 0;
    right: auto;
    width: min(640px, 100%);
  }
}

/* Home calculator: air between the example, the weight buttons and the number field. */
.calculator > .calculator-label {
  display: block;
}

.calculator > .weight-options + .weight-input {
  margin-top: 12px;
}

/* Footer and breadcrumb links: a finger-sized target on tablets and phones (they were 16-19 px high). */
@media (max-width: 1023px) {
  .footer-nav ul {
    gap: 4px 20px;
  }

  .footer-nav a,
  .footer-address a,
  .breadcrumbs a {
    display: inline-block;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-block: 5px;
  }

  .breadcrumbs {
    margin-bottom: 12px;
  }
}

/* Photos in a fixed-ratio frame fill it by absolute positioning: a percentage height inside an
   `aspect-ratio` box is not reliable in older Safari and let the pictures set their own height. */
.category-tile img,
.product-media img,
.gallery-main img {
  position: absolute;
  top: 0;
  left: 0;
}

.gallery-main {
  position: relative;
}

/* =====================================================================
   Older Safari / WebKit (iOS 12-14, iPad Air 1/2, mini 2-4 and the like)
   Safari before 14.1 has no flex `gap` and no `inset`; before 15 no `aspect-ratio`.
   These blocks are used only where the feature is missing (@supports), so current
   browsers are unaffected.
   ===================================================================== */

@supports not (inset: 0) {
  /* The :where() resets above do not exist for Safari before 14: the same values again with a
     specificity of (0,0,2), below every class rule. */
  body h1,
  body h2,
  body h3,
  body p,
  body ul,
  body ol,
  body dl,
  body dd,
  body figure {
    margin: 0;
  }

  body ul,
  body ol {
    padding: 0;
    list-style: none;
  }

  body a {
    color: inherit;
  }

  body button {
    font: inherit;
    color: inherit;
  }

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

  body input,
  body select,
  body textarea {
    font: inherit;
    color: var(--ink);
    width: 100%;
    min-height: 46px;
    padding: 10px 14px;
    border: 1px solid #d9cbbb;
    border-radius: 12px;
    background: var(--card);
  }

  body input[type="checkbox"],
  body input[type="radio"] {
    width: 18px;
    min-height: 0;
    height: 18px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  /* Georgian headings and eyebrows (their :where() rules are dropped too). */
  .page:lang(ka) .hero-title,
  .page:lang(ka) .section-title,
  .page:lang(ka) .page-title,
  .page:lang(ka) .product-title,
  .page:lang(ka) .contacts-title,
  .page:lang(ka) .category-name,
  .page:lang(ka) .product-name,
  .page:lang(ka) .cart-title {
    font-weight: 500;
    letter-spacing: 0;
  }

  .page:lang(ka) .eyebrow,
  .page:lang(ka) .eyebrow-small,
  .page:lang(ka) .product-brand,
  .page:lang(ka) .toast-label {
    letter-spacing: 0.02em;
    text-transform: none;
  }

  /* Text node + element pairs that `> * + *` cannot see. */
  .chip > span,
  .category-tabs a > span {
    margin-left: 6px;
  }

  .price > * + * {
    margin-left: 4px;
  }

  /* gap is set on the grid rule but the list later becomes a wrapping flex row */
  .variant-list > * {
    margin-right: 8px;
    margin-bottom: 8px;
  }

  .variant-list > :last-child {
    margin-right: 0;
  }

  .chip svg {
    margin-left: 6px;
  }

  .test-bar > * + * {
    margin-left: 12px;
  }

  .announce > * + * {
    margin-left: 10px;
  }

  .header-inner > .logo {
    margin-left: 12px;
  }

  .main-nav ul > * + * {
    margin-left: 4px;
  }

  .header-actions > * + * {
    margin-left: 2px;
  }

  .icon-button > * + * {
    margin-left: 4px;
  }

  .button-primary > * + *, .button-secondary > * + * {
    margin-left: 10px;
  }

  .hero-actions > * {
    margin-right: 12px;
    margin-bottom: 12px;
  }

  .hero-facts li > * + * {
    margin-left: 10px;
  }

  .chips > * {
    margin-right: 8px;
    margin-bottom: 8px;
  }

  .filters > * + * {
    margin-left: 8px;
  }

  .calculator-head > * + * {
    margin-left: 16px;
  }

  .lesson-top > * {
    margin-right: 16px;
    margin-bottom: 4px;
  }

  .delivery-facts > * {
    margin-right: 10px;
    margin-bottom: 10px;
  }

  .delivery-facts li > * + * {
    margin-left: 8px;
  }

  .carrier-methods li > * + * {
    margin-left: 8px;
  }

  .carrier-site a > * + * {
    margin-left: 4px;
  }

  .lang-badge > * + * {
    margin-left: 4px;
  }

  .drawer .drawer-langs a > * + * {
    margin-left: 10px;
  }

  .color-links > * {
    margin-right: 8px;
    margin-bottom: 8px;
  }

  .color-link > * + * {
    margin-left: 10px;
  }

  .swatch-row > * {
    margin-right: 4px;
    margin-bottom: 4px;
  }

  .category-tabs > * + * {
    margin-left: 8px;
  }

  .category-tabs a > * + * {
    margin-left: 6px;
  }

  .filter-bar > * {
    margin-right: 8px;
    margin-bottom: 8px;
  }

  .fgroup summary > * + *, .filter-toggle > * + * {
    margin-left: 6px;
  }

  .fgroup-chips > * {
    margin-right: 8px;
    margin-bottom: 8px;
  }

  .color-option > * + *, .check-option > * + * {
    margin-left: 8px;
  }

  .chips > * {
    margin-right: 6px;
    margin-bottom: 6px;
  }

  .chip > * + * {
    margin-left: 6px;
  }

  .results-bar > * {
    margin-right: 12px;
    margin-bottom: 12px;
  }

  .sort-form > * + * {
    margin-left: 10px;
  }

  .active-filters > * {
    margin-right: 6px;
    margin-bottom: 6px;
  }

  .pager > * {
    margin-right: 6px;
    margin-bottom: 6px;
  }

  .gallery-thumbs > * + * {
    margin-left: 8px;
  }

  .variant-dots > * + * {
    margin-left: 2px;
  }

  .stepper > * + * {
    margin-left: 8px;
  }

  .cart-qty > * {
    margin-right: 8px;
    margin-bottom: 8px;
  }

  .link-button > * + * {
    margin-left: 6px;
  }

  .summary dl > div > * + *, .summary-totals > div > * + *, .order-meta > div > * + * {
    margin-left: 12px;
  }

  .summary-lines li > * + * {
    margin-left: 12px;
  }

  .lang-list a > * + *, .drawer-langs a > * + *, .footer-langs a > * + * {
    margin-left: 10px;
  }

  .drawer-langs ul > *, .footer-langs ul > * {
    margin-right: 6px;
    margin-bottom: 6px;
  }

  .search-toggle > * + * {
    margin-left: 7px;
  }

  .search-panel-inner > * + * {
    margin-left: 8px;
  }

  .site-search-form > * + * {
    margin-left: 8px;
  }

  .quick-fibres > * {
    margin-right: 12px;
    margin-bottom: 8px;
  }

  .quick-fibres ul > * {
    margin-right: 8px;
    margin-bottom: 8px;
  }

  .search-maybe > * {
    margin-right: 8px;
    margin-bottom: 8px;
  }

  .lesson-chips > * {
    margin-right: 8px;
    margin-bottom: 8px;
  }

  .step-extra > * + * {
    margin-left: 6px;
  }

  .pending-shades > * {
    margin-right: 6px;
    margin-bottom: 6px;
  }

  .pending-shades li > * + * {
    margin-left: 6px;
  }

  /* The last item of a wrapping row needs no right margin. */
  .hero-actions > :last-child {
    margin-right: 0;
  }

  .chips > :last-child {
    margin-right: 0;
  }

  .lesson-top > :last-child {
    margin-right: 0;
  }

  .delivery-facts > :last-child {
    margin-right: 0;
  }

  .color-links > :last-child {
    margin-right: 0;
  }

  .swatch-row > :last-child {
    margin-right: 0;
  }

  .filter-bar > :last-child {
    margin-right: 0;
  }

  .fgroup-chips > :last-child {
    margin-right: 0;
  }

  .chips > :last-child {
    margin-right: 0;
  }

  .results-bar > :last-child {
    margin-right: 0;
  }

  .active-filters > :last-child {
    margin-right: 0;
  }

  .pager > :last-child {
    margin-right: 0;
  }

  .cart-qty > :last-child {
    margin-right: 0;
  }

  .drawer-langs ul > :last-child, .footer-langs ul > :last-child {
    margin-right: 0;
  }

  .quick-fibres > :last-child {
    margin-right: 0;
  }

  .quick-fibres ul > :last-child {
    margin-right: 0;
  }

  .search-maybe > :last-child {
    margin-right: 0;
  }

  .lesson-chips > :last-child {
    margin-right: 0;
  }

  .pending-shades > :last-child {
    margin-right: 0;
  }
}

/* Frames with a fixed shape: a padding box keeps the ratio, the photo fills it. */
@supports not (aspect-ratio: 1 / 1) {
  .hero-main,
  .inspiration-main,
  .story-main,
  .lessons-photo,
  .delivery-hero-photo,
  .carrier-photo,
  .contacts-photo,
  .lessons-teaser-media,
  .lessons-hero-main,
  .cart-thumb,
  .lessons-how-photos figure,
  .lessons-strip figure,
  .inspiration-thumb {
    position: relative;
  }

  .hero-main::before,
  .hero-inset::before,
  .category-tile::before,
  .product-media::before,
  .inspiration-main::before,
  .story-main::before,
  .story-inset::before,
  .lessons-photo::before,
  .delivery-hero-photo::before,
  .carrier-photo::before,
  .contacts-photo::before,
  .gallery-main::before,
  .cart-thumb::before,
  .lessons-teaser-media::before,
  .lessons-hero-main::before,
  .lessons-hero-inset::before,
  .lessons-how-photos figure::before,
  .lessons-strip figure::before,
  .inspiration-thumb::before {
    content: "";
    display: block;
    padding-top: 125%;
  }

  .hero-main img,
  .hero-inset img,
  .story-main img,
  .story-inset img,
  .inspiration-main img,
  .lessons-photo img,
  .delivery-hero-photo img,
  .carrier-photo img,
  .contacts-photo img,
  .cart-thumb img,
  .lessons-teaser-media img,
  .lessons-hero-main img,
  .lessons-hero-inset img,
  .lessons-how-photos figure img,
  .lessons-strip figure img,
  .inspiration-thumb img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .hero-main::before { padding-top: 110%; }
  .hero-inset::before,
  .story-inset::before,
  .lessons-hero-inset::before,
  .category-tile::before { padding-top: 133.334%; }
  .product-media::before,
  .gallery-main::before,
  .cart-thumb::before,
  .lessons-how-photos figure::before,
  .lessons-strip figure::before { padding-top: 125%; }
  .inspiration-main::before { padding-top: 115%; }
  .story-main::before,
  .lessons-hero-main::before { padding-top: 85%; }
  .lessons-photo::before,
  .delivery-hero-photo::before,
  .carrier-photo::before { padding-top: 62.5%; }
  .carrier-photo::before { padding-top: 56.25%; }
  .contacts-photo::before { padding-top: 75%; }
  .lessons-teaser-media::before { padding-top: 75%; }

  @media (max-width: 1023px) {
    .category-grid li:last-child:nth-child(odd) .category-tile::before {
      padding-top: 56.25%;
    }
  }

  @media (min-width: 600px) {
    .contacts-photo::before { padding-top: 125%; }
  }

  @media (min-width: 768px) {
    .hero-main::before,
    .inspiration-main::before { padding-top: 68.75%; }
  }

  @media (min-width: 1024px) {
    .hero-main::before { padding-top: 117.5%; }
    .inspiration-main::before { padding-top: 120%; }
    .story-main::before { padding-top: 115%; }
    .lessons-photo::before { padding-top: 90%; }
    .delivery-hero-photo::before { padding-top: 62.5%; }
    .lessons-teaser-media::before { padding-top: 80%; }
  }

  .inspiration-thumb::before { padding-top: 100%; }
}

/* ---------- legal pages (published only when the owner has approved the text) ---------- */

.legal-page {
  max-width: 760px;
  padding-top: 40px;
  padding-bottom: 64px;
}

.legal-seller {
  margin: 24px 0 28px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
}

.legal-seller h2 {
  margin-bottom: 10px;
  font-size: 18px;
}

.legal-seller dl > div {
  display: block;
  padding: 3px 0;
}

.legal-seller dt {
  color: var(--ink-muted);
  font-size: 13px;
}

.legal-seller dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.legal-text h2 {
  margin: 30px 0 10px;
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 400;
}

.legal-text p,
.legal-text ul {
  margin: 0 0 14px;
  line-height: 1.65;
}

.legal-text ul {
  padding-left: 22px;
  list-style: disc;
}

.legal-links {
  margin-top: 8px !important;
  color: var(--ink-muted);
  font-size: 14px;
}

.legal-links a {
  color: var(--ink-soft);
  text-underline-offset: 3px;
}

.checkout-info,
.order-ack {
  max-width: 760px;
  margin-bottom: 24px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
}

.checkout-form .checkout-info {
  max-width: none;
}

.checkout-notice {
  margin: 12px 0;
  color: var(--ink-soft);
  font-size: 15px;
}

.checkout-info h2,
.order-ack h2 {
  margin-top: 0;
  font-size: 18px;
}

.footer-seller {
  max-width: var(--shell);
  margin: 10px auto 0;
  color: var(--ink-muted);
  font-size: 13px;
  line-height: 1.7;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

.footer-seller a {
  color: var(--ink-soft);
  text-underline-offset: 3px;
}

/* ---------- product page, desktop first screen (2026-11-07) ----------
   At 100% zoom the first screen was oversized (photo 620x775, 44 px title, 32 px figures) and the
   "В корзину" button sat below the fold on laptops; people zoomed out to 80%. From 1024 px the photo
   and the buying block are now a compact, centred composition sized like the 80% view. Phones and
   tablets (< 1024 px) are not affected. */
@media (min-width: 1024px) {
  .product-page {
    padding-top: 20px;
  }

  .product-layout {
    grid-template-columns: minmax(0, 460px) minmax(0, 580px);
    justify-content: center;
    gap: 48px;
  }

  .gallery {
    top: 92px;
  }

  .gallery-thumb {
    width: 60px;
    height: 75px;
  }

  .product-title {
    font-size: 32px;
    font-size: max(27px, min(2.5vw, 35px));
    font-size: clamp(27px, 2.5vw, 35px);
  }

  .product-composition-lg {
    margin-top: 8px !important;
    font-size: 15.5px;
  }

  .price-lg {
    margin-top: 12px !important;
  }

  .price-lg strong {
    font-size: 24px;
  }

  .buy-form {
    gap: 14px;
    margin-top: 16px;
    padding: 18px;
  }

  .variant-group legend {
    margin-bottom: 8px;
    font-size: 14px;
  }

  .variant-list {
    grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
    gap: 6px;
  }

  .variant-option {
    padding: 7px 10px;
    border-radius: 10px;
  }

  .qty-block .weight-options {
    margin-bottom: 8px;
  }

  .buy-form .weight-options {
    gap: 6px;
    margin-top: 8px;
  }

  .buy-form .weight-option {
    min-height: 38px;
    border-radius: 10px;
    font-size: 14px;
  }

  .buy-form .calculator-result {
    gap: 10px;
    margin-top: 12px !important;
  }

  .buy-form .calculator-result div {
    padding: 11px 14px;
    border-radius: 12px;
  }

  .buy-form .calculator-result dd {
    font-size: 22px;
    font-size: max(20px, min(1.7vw, 24px));
    font-size: clamp(20px, 1.7vw, 24px);
  }

  .buy-button {
    min-height: 46px;
    font-size: 15px;
  }

  .buy-note {
    font-size: 13px;
  }

  .product-facts {
    margin-top: 22px !important;
  }

  .product-facts > div {
    padding: 10px 0;
  }
}