/* Ячейки полотна: карточка, лекало, фишки, счётчики, отзывы, таблицы.
   Общее правило: элементы не разделяются воздухом — они разделяются швом,
   а на пересечении швов сидит ромб-узелок раппорта. */

/* ------------------------------------------------------------- полотно */

.cloth {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* dense: раппорт не терпит дыр — широкая ячейка не должна оставлять
     позади себя пустой модуль */
  grid-auto-flow: row dense;
  border-top: var(--shov);
  border-left: var(--shov);
}
.cloth--cat { grid-template-columns: repeat(4, 1fr); }

.cell {
  position: relative;
  border-right: var(--shov);
  border-bottom: var(--shov);
  min-width: 0;
}
/* узелок раппорта на пересечении швов */
.cell::before {
  content: "";
  position: absolute;
  left: calc(var(--uzel) / -2 - 0.5px);
  top: calc(var(--uzel) / -2 - 0.5px);
  width: var(--uzel); height: var(--uzel);
  background: var(--marena);
  transform: rotate(45deg);
  z-index: 2;
  pointer-events: none;
}
.cell--w2 { grid-column: span 2; }
.cell--w3 { grid-column: span 3; }
.cell--w4 { grid-column: span 4; }
.cell--pad { padding: clamp(1.1rem, 2.4vw, 2rem); }

/* ячейки-красители: цвет владеет целой ячейкой, а не подкрашивает деталь */
.cell--vayda { background: var(--vayda); color: var(--len-text); }
.cell--marena { background: var(--marena); color: var(--len-text); }
.cell--orekh { background: var(--orekh); color: var(--len-text); }
.cell--rezeda { background: var(--rezeda); color: var(--len-text); }
.cell--vayda a, .cell--marena a, .cell--orekh a, .cell--rezeda a { color: var(--len-text); }
.cell--vayda .field__input { background: rgba(237, 233, 222, 0.08); color: var(--len-text);
                             border-color: rgba(237, 233, 222, 0.4); }
.cell--vayda .field__input::placeholder { color: rgba(237, 233, 222, 0.5); }

/* ------------------------------------------------------------ карточка */

.card {
  position: relative;
  display: flex; flex-direction: column;
  border-right: var(--shov);
  border-bottom: var(--shov);
  min-width: 0;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.card::before {
  content: "";
  position: absolute;
  left: calc(var(--uzel) / -2 - 0.5px);
  top: calc(var(--uzel) / -2 - 0.5px);
  width: var(--uzel); height: var(--uzel);
  background: var(--marena);
  transform: rotate(45deg);
  z-index: 2;
  pointer-events: none;
}
.card:hover { background: var(--vayda); color: var(--len-text); }
.card:hover .card__fabric { color: var(--len-text-dim); }
.card:hover .card__add { border-color: rgba(237, 233, 222, 0.5); color: var(--len-text); }

.card__link { text-decoration: none; color: inherit; display: block; }
.card__visual { position: relative; }
.card__badge {
  position: absolute; left: 0; top: 0;
  background: var(--marena); color: var(--len-text);
  font-family: var(--font-display); font-size: 0.75rem; font-weight: 600;
  padding: 0.25rem 0.55rem;
  z-index: 1;
}
.card__name {
  font-size: 0.98rem; font-weight: 600; margin: 0;
  padding: 0.75rem 0.85rem 0.2rem;
}
.card__fabric {
  font-size: var(--step-tiny); color: var(--tush-dim); margin: 0;
  padding: 0 0.85rem 0.4rem;
  transition: color var(--dur) var(--ease);
}
.card__price {
  font-family: var(--font-display); font-weight: 600; font-size: 1rem;
  font-variant-numeric: tabular-nums; margin: 0;
  padding: 0 0.85rem 0.75rem;
}
.card__old { opacity: 0.6; font-weight: 400; font-size: 0.85rem; margin-left: 0.4rem; }

.card__add {
  margin: auto 0.85rem 0.85rem;
  min-height: 44px;
  background: transparent;
  border: 1px solid currentColor;
  color: inherit;
  font: inherit; font-size: var(--step-tiny);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.card__add:hover { background: var(--marena); border-color: var(--marena); color: var(--len-text); }
.card__add.is-added { background: var(--marena); border-color: var(--marena); color: var(--len-text); }

/* -------------------------------------------------------------- лекало */
/* Резервный слой: включается, когда у вещи ещё нет фотографии. */

.lekalo {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background-color: var(--tone);
}
.lekalo__cloth { position: absolute; inset: 0; }
.lekalo--photo { background-color: var(--len-200); }
.lekalo--photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lekalo__chalk { position: absolute; inset: 7% 9%; width: 82%; height: 86%; }
.lekalo__line, .lekalo__detail {
  fill: none; stroke: rgba(237, 233, 222, 0.9);
  stroke-linejoin: round; stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.lekalo__line { stroke-width: 1.4; }
.lekalo__detail { stroke-width: 1; stroke-dasharray: 4 3; opacity: 0.7; }
.lekalo--light .lekalo__line, .lekalo--light .lekalo__detail { stroke: rgba(28, 34, 41, 0.7); }
.lekalo__mark {
  position: absolute; left: 0; bottom: 0;
  font-family: var(--font-display); font-size: 0.8rem; font-weight: 600;
  padding: 0.15rem 0.45rem;
  color: var(--len-text); background: var(--vayda);
}
.lekalo--light .lekalo__mark { color: var(--len-text); background: var(--vayda); }
.lekalo--chip { aspect-ratio: 1 / 1; }
.lekalo--chip .lekalo__mark { display: none; }
.lekalo--flat { aspect-ratio: 4 / 5; }

/* фактуры полотна — используются лекалом и страницей тканей */
.lekalo--kulirka .lekalo__cloth, .fabric-cell__cloth--kulirka {
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.07) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(0deg, rgba(0,0,0,0.10) 0 1px, transparent 1px 5px);
}
.lekalo--interlock .lekalo__cloth {
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.06) 0 2px, transparent 2px 5px),
    repeating-linear-gradient(0deg, rgba(0,0,0,0.12) 0 2px, transparent 2px 5px);
}
.lekalo--oxford .lekalo__cloth, .fabric-cell__cloth--oxford {
  background-image:
    repeating-linear-gradient(90deg, rgba(0,0,0,0.10) 0 3px, transparent 3px 7px),
    repeating-linear-gradient(0deg, rgba(0,0,0,0.10) 0 3px, transparent 3px 7px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.10) 0 1px, transparent 1px 3px);
}
.lekalo--pique .lekalo__cloth {
  background-image:
    radial-gradient(circle at 2px 2px, rgba(0,0,0,0.14) 1px, transparent 1.5px),
    radial-gradient(circle at 6px 6px, rgba(255,255,255,0.10) 1px, transparent 1.5px);
  background-size: 8px 8px, 8px 8px;
}
.lekalo--flannel .lekalo__cloth, .fabric-cell__cloth--flannel {
  background-image:
    repeating-linear-gradient(90deg, rgba(0,0,0,0.22) 0 6px, transparent 6px 26px),
    repeating-linear-gradient(0deg, rgba(0,0,0,0.22) 0 6px, transparent 6px 26px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.14) 0 2px, transparent 2px 13px),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.14) 0 2px, transparent 2px 13px);
}
.lekalo--footer .lekalo__cloth, .fabric-cell__cloth--footer {
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,0.13) 0 2px, transparent 2px 6px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 2px);
}
.lekalo--denim .lekalo__cloth, .fabric-cell__cloth--denim {
  background-image:
    repeating-linear-gradient(58deg, rgba(255,255,255,0.11) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(58deg, rgba(0,0,0,0.16) 2px, transparent 3px 6px);
}
.lekalo--twill .lekalo__cloth {
  background-image:
    repeating-linear-gradient(62deg, rgba(255,255,255,0.09) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(62deg, rgba(0,0,0,0.12) 2px, transparent 3px 7px);
}
.lekalo--wool .lekalo__cloth, .fabric-cell__cloth--wool {
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,0.13) 1px, transparent 1.4px),
    radial-gradient(circle at 4px 5px, rgba(0,0,0,0.16) 1px, transparent 1.4px);
  background-size: 7px 7px, 9px 9px;
}
.lekalo--knit .lekalo__cloth, .fabric-cell__cloth--knit {
  background-image:
    repeating-linear-gradient(90deg,
      rgba(0,0,0,0.16) 0 2px, transparent 2px 6px, rgba(255,255,255,0.10) 6px 8px, transparent 8px 12px),
    repeating-linear-gradient(0deg, rgba(0,0,0,0.07) 0 3px, transparent 3px 7px);
}
.lekalo--coat .lekalo__cloth, .fabric-cell__cloth--coat {
  background-image:
    radial-gradient(circle at 2px 3px, rgba(255,255,255,0.10) 1.2px, transparent 1.6px),
    radial-gradient(circle at 6px 7px, rgba(0,0,0,0.20) 1.2px, transparent 1.6px),
    repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0 1px, transparent 1px 6px);
  background-size: 10px 10px, 12px 12px, auto;
}
.lekalo--waxed .lekalo__cloth, .fabric-cell__cloth--waxed {
  background-image:
    radial-gradient(ellipse at 30% 25%, rgba(255,255,255,0.13), transparent 55%),
    radial-gradient(ellipse at 75% 70%, rgba(0,0,0,0.20), transparent 60%),
    repeating-linear-gradient(60deg, rgba(0,0,0,0.10) 0 1px, transparent 1px 5px);
}
.lekalo--ripstop .lekalo__cloth {
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.13) 0 1px, transparent 1px 12px),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.13) 0 1px, transparent 1px 12px),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.08) 0 1px, transparent 1px 3px);
}
.lekalo--nylon .lekalo__cloth {
  background-image:
    linear-gradient(120deg, rgba(255,255,255,0.18), transparent 45%, rgba(0,0,0,0.16)),
    repeating-linear-gradient(0deg, rgba(0,0,0,0.06) 0 1px, transparent 1px 4px);
}
.lekalo--quilted .lekalo__cloth {
  background-image:
    repeating-linear-gradient(45deg, rgba(0,0,0,0.16) 0 1px, transparent 1px 18px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,0.16) 0 1px, transparent 1px 18px);
}
.lekalo--leather .lekalo__cloth {
  background-image:
    radial-gradient(circle at 3px 2px, rgba(0,0,0,0.20) 1.4px, transparent 2px),
    radial-gradient(circle at 8px 9px, rgba(255,255,255,0.08) 1.4px, transparent 2px);
  background-size: 12px 12px, 14px 14px;
}

/* ---------------------------------------------------------------- фишки */

.chips { display: grid; grid-template-columns: repeat(3, 1fr); border-top: var(--shov-thin);
         border-left: var(--shov-thin); }
.chip {
  display: grid; grid-template-columns: 46px 1fr; align-items: center; gap: 0.6rem;
  padding: 0.5rem; min-height: 62px;
  background: transparent;
  border: 0; border-right: var(--shov-thin); border-bottom: var(--shov-thin);
  color: inherit; font: inherit; text-align: left; cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.chip:hover { background: rgba(158, 59, 46, 0.16); }
.chip[aria-pressed="true"] { background: var(--marena); color: var(--len-text); }
.chip__visual { display: block; width: 46px; }
.chip__text { display: grid; gap: 0.1rem; min-width: 0; }
.chip__name { font-size: 0.85rem; font-weight: 500; }
.chip__slot { font-size: 0.78rem; opacity: 0.72; }

/* ------------------------------------------------------------ счётчики */

.counter { display: grid; grid-template-columns: repeat(3, 1fr); }
.counter--big { grid-template-columns: repeat(4, 1fr); }
.counter__cell {
  display: grid; gap: 0.15rem; align-content: center;
  padding: 1rem 1.1rem;
  border-right: 1px solid rgba(237, 233, 222, 0.25);
}
.counter__cell:last-child { border-right: 0; }
.counter__value {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.5rem, 1rem + 1.6vw, 2.4rem);
  font-variant-numeric: tabular-nums; line-height: 1.05;
}
.counter__cell--accent .counter__value { color: #F0B9A8; }
.counter__label { font-size: var(--step-tiny); opacity: 0.75; }
.counter__note { font-size: var(--step-small); opacity: 0.85; margin: 0.8rem 0 0; }

/* -------------------------------------------------------------- отзывы */

.review {
  position: relative;
  display: grid; gap: 0.5rem; align-content: start;
  padding: 1.1rem 1.2rem;
  border-right: var(--shov); border-bottom: var(--shov);
}
.review::before {
  content: ""; position: absolute;
  left: calc(var(--uzel) / -2 - 0.5px); top: calc(var(--uzel) / -2 - 0.5px);
  width: var(--uzel); height: var(--uzel);
  background: var(--marena); transform: rotate(45deg);
}
.review__text { margin: 0; font-size: 0.95rem; }
.review__meta {
  display: flex; flex-wrap: wrap; gap: 0.2rem 0.8rem;
  font-size: var(--step-tiny); color: var(--tush-dim);
}
.review__item { font-size: var(--step-tiny); color: var(--tush-dim); margin: 0; }
.stars { letter-spacing: 0.1em; color: var(--len-300); font-size: 1rem; }
.stars__on { color: var(--marena); }
.rating-line { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.rating-line__num { font-family: var(--font-display); font-weight: 600; }
.rating-line__count { color: var(--tush-dim); font-size: var(--step-small); }

/* ------------------------------------------------------------- таблицы */

.table-wrap { overflow-x: auto; min-width: 0; }
.mtable {
  width: 100%; border-collapse: collapse;
  font-size: var(--step-small); font-variant-numeric: tabular-nums;
}
.mtable caption {
  text-align: left; color: var(--tush-dim);
  font-size: var(--step-tiny); padding-bottom: 0.5rem;
}
.mtable th, .mtable td {
  text-align: left; padding: 0.5rem 0.75rem;
  border: var(--shov-thin); white-space: nowrap;
}
.mtable th {
  font-weight: 600; font-size: var(--step-tiny);
  text-transform: uppercase; letter-spacing: 0.06em;
  background: rgba(38, 54, 79, 0.07);
}
.mtable--wide td { white-space: normal; }

/* ---------------------------------------------------------------- теги */

.tag {
  min-height: 40px; padding: 0.35rem 0.85rem;
  background: transparent; border: 1px solid currentColor; border-radius: 0;
  font: inherit; font-size: var(--step-small); color: inherit; cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.tag:hover { background: rgba(158, 59, 46, 0.16); }
.tag[aria-pressed="true"] { background: var(--marena); border-color: var(--marena); color: var(--len-text); }