/* visual polish, part A (catalog, product, looks, home, builder): rules written after the visual audit of 10.11.2026; selectors with the prefix html body */

/* the photos of a look on its page (cover above, the face or the body below): one picture is an editorial strip across the whole column, three tones are three equal tiles */
html body .look__faces--1 { max-width: none; grid-template-columns: minmax(0, 1fr); }
html body .look__faces--1 .look__face img { aspect-ratio: 4 / 3; object-position: 50% 30%; }
html body .look__faces { gap: 10px; margin-top: 12px; }
html body .look__face img { border-radius: var(--r-m, 14px); }

/* product gallery on a desktop: a larger photo (the media column is wider than the info column) and a column of square thumbnails
   exactly as high as the photo; when there are more thumbnails than fit, the column scrolls inside itself and fades out at the bottom as a hint */
@media (min-width: 900px) {
  html body .pdp__top { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 28px 40px; }
  html body .pdp__media { grid-template-columns: 64px minmax(0, 1fr); gap: 14px; }
  html body .pdp__media .gal__thumbs { contain: size; align-self: stretch; height: auto; min-height: 0; overflow-y: auto; overflow-x: hidden; gap: 8px; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent); }
  html body .pdp__media .gal__thumbs::-webkit-scrollbar { display: none; }
  html body .pdp__media .gal__thumbs button { flex: none; width: 64px; aspect-ratio: 1; border: 1.5px solid transparent; opacity: .72; transition: opacity var(--t-fast, .15s); }
  html body .pdp__media .gal__thumbs button:hover { opacity: 1; }
  html body .pdp__media .gal__thumbs button[aria-selected="true"] { opacity: 1; border-color: var(--cocoa); }
}

/* ===== audit pass 2 (10.11.2026): grids that leave empty columns, uneven rows, wrapped buttons ===== */

/* headings and card names break into even lines: no single word or preposition left alone on the last line */
html body .card__name, html body .look-card h3, html body .look__info h1, html body .pdp__title, html body .xs__n,
html body .s-home-wrapper .h2, html body .s-home-wrapper .h3, html body .section__head .h2, html body .sets-row__copy .h2 { text-wrap: balance; }
html body .card__sub, html body .look-card__tag, html body .section__lead, html body .pdp__terms { text-wrap: pretty; }

/* product grid by the number of products (category, search, builder step): a short list fills the row instead of leaving empty columns */
@media (min-width: 1024px) {
  html body .grid--4.eco-products:has(> .card:nth-child(3):last-child),
  html body .eb-grid:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html body .grid--4.eco-products:has(> .card:nth-child(5):last-child),
  html body .eb-grid:has(> :nth-child(5):last-child) { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 20px; }
}
/* one or two products: wide cards, the photo on the left and the text beside it */
@media (min-width: 720px) {
  html body .grid--4.eco-products:has(> .card:nth-child(2):last-child),
  html body .grid--4.eco-products:has(> .card:only-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  html body .grid--4.eco-products:has(> .card:only-child) { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
  html body .grid--4.eco-products:has(> .card:nth-child(2):last-child) > .card,
  html body .grid--4.eco-products:has(> .card:only-child) > .card { display: grid; grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); column-gap: 28px; align-items: stretch; }
  html body .grid--4.eco-products:has(> .card:nth-child(2):last-child) .card__body,
  html body .grid--4.eco-products:has(> .card:only-child) .card__body { padding-top: 4px; }
  html body .grid--4.eco-products:has(> .card:nth-child(2):last-child) .card__sub,
  html body .grid--4.eco-products:has(> .card:only-child) .card__sub { -webkit-line-clamp: 6; line-clamp: 6; }
}
/* the last product of an odd list on a phone (two columns) or a tablet (three) takes the whole row as a wide card */
@media (max-width: 719px) {
  html body .grid.eco-products > .card:last-child:nth-child(odd) { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 14px; }
  html body .grid.eco-products > .card:last-child:nth-child(odd) .card__body { padding-top: 0; }
}
@media (min-width: 720px) and (max-width: 1023px) {
  html body .grid.eco-products > .card:last-child:nth-child(3n+1):not(:only-child) { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: 20px; }
  html body .grid.eco-products > .card:last-child:nth-child(3n+1):not(:only-child) .card__body { padding-top: 0; }
}

/* cards keep one row of shade dots and the count beside them without a stray indent when they wrap */
html body .card__shades { gap: 6px 8px; }
html body .card__shades-n { margin-left: 0; }

/* the badge over a photo is a flat ink label: no shadow, no blur */
html body .card__badges .badge, html body .eb-card .card__badges .badge { box-shadow: none; }

/* phone: the buttons of product and look cards say their label in one line (sentence case like the builder),
   so neighbour cards keep their prices and buttons on one level */
@media (max-width: 720px) {
  html body .card .btn, html body .look-card__act .btn--primary { text-transform: none; letter-spacing: 0; font-size: 15px; font-weight: 600; white-space: nowrap; padding-inline: 8px; line-height: 1.2; }
  html body .card__badges { left: 8px; top: 8px; }
  html body .card__badges .badge { padding: 5px 8px; letter-spacing: .02em; line-height: 1.2; }
}

/* looks: six looks are two rows of three (four columns left two empty cells) */
@media (min-width: 1024px) {
  html body .looks-grid:has(> :nth-child(6):last-child),
  html body .looks-grid:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 28px; }
}
/* look card: the discount line has one height in every card, so the buttons of a row stand on one line */
html body .look-card__save { min-height: 22px; display: flex; align-items: center; line-height: 1.4; }
@media (max-width: 720px) { html body .look-card__save { min-height: calc(2 * 1.4em); align-items: flex-start; } }
@media (min-width: 721px) {
  html body .look-card__act { flex-wrap: nowrap; }
  html body .look-card__act .btn--primary { flex: 1 1 auto; min-width: 0; white-space: nowrap; padding-inline: 14px; letter-spacing: .08em; }
}

/* look page: the cover and, right under it, the photos of how it is worn make the left column (as tall as the text), the text and the list are on the right;
   on a phone: cover, text, list, photos (the name and the price no longer wait under two big pictures) */
html body .look__media { display: contents; }
html body .look__media > .collage { grid-area: media; width: 100%; max-width: none; margin: 0; }
html body .look__info { grid-area: info; }
html body .look__faces { grid-area: faces; margin-top: 0; align-self: start; }
html body .look { grid-template-areas: "media" "info" "faces"; row-gap: 28px; }
@media (min-width: 640px) {
  html body .look { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "media info" "faces info"; grid-template-rows: auto 1fr; gap: 14px clamp(24px, 4vw, 56px); }
  html body .look__info { align-self: start; }
  html body .look__media > .collage { align-self: start; }
  html body .look__faces { gap: 12px; }
  html body .look__faces:not(.look__faces--1) .look__face img { aspect-ratio: 1; object-position: 50% 35%; }
  /* one photo of a face: a square frame (not a 4:3 crop that blows the face up) and the text with the buy button stays on the screen while the long left column is scrolled */
  html body .look__faces--1 .look__face img { aspect-ratio: 1; object-position: 50% 30%; }
  html body .look__faces--1 .look__face figcaption { max-width: 46ch; line-height: 1.45; }
  html body .look:has(.look__faces--1) .look__info { position: sticky; top: calc(var(--header-h, 64px) + 20px); }
}

/* product page, "what else to add": the cards fill the row by their number (one, two, three, four) and keep one inner layout */
html body .pdp__xs .xs__item { grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; padding: 10px 14px 10px 10px; }
html body .pdp__xs .xs__img { width: 64px; }
html body .pdp__xs .xs__item .btn { grid-column: auto; min-width: 128px; }
@media (min-width: 720px) {
  html body .pdp__xs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  html body .pdp__xs:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1100px) {
  html body .pdp__xs:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* tone chips: two tones are two equal halves (not two thirds and an empty third); on a phone the last odd chip takes the whole row */
html body .swatches:has(> .swatch-btn:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 720px) {
  html body .swatches > .swatch-btn:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* reviews on the product page: the two buttons are one width */
html body .rv__act { display: grid; grid-template-columns: minmax(0, 260px); gap: 10px; }
html body .rv__act .btn { width: 100%; }

/* home, first screen on a phone: both buttons keep one line, the scene shows the whole product group (the bottle cap was cut off) */
@media (max-width: 639px) {
  html body .hero__cta .btn { flex: 1 1 auto; white-space: nowrap; padding-inline: 14px; letter-spacing: .06em; }
  html body .hero__media { height: 440px; }
  html body .hero__pic { object-position: 50% 25%; }
}

/* two wide product cards are two separate objects: a wider gutter between them than inside a card */
@media (min-width: 720px) {
  html body .grid--4.eco-products:has(> .card:nth-child(2):last-child) { column-gap: 56px; }
}

/* phone, look cards: the discount line is two lines high in both cards; "Подробнее" speaks in the same case as the button above it */
@media (max-width: 720px) {
  html body .look-card__save { min-height: 40px; }
  html body .look-card__save, html body .look-card__save--note, html body .look-card__save .badge { line-height: 20px; }
  html body .look-card__act .btn--ghost { text-transform: none; letter-spacing: 0; font-size: 15px; font-weight: 500; }
  html body .pdp__xs .xs__item .btn { min-width: 112px; }
}

/* the page of the looks starts at the same height as a category page (it had the 120px top of a generic section) */
html body .container.section:has(> .looks-grid) { padding-block: 16px 40px; }
@media (min-width: 1024px) { html body .container.section:has(> .looks-grid) { padding-block: 24px 72px; } }

/* look page on a phone: the cover sits right under the breadcrumbs and is a little lower, so the name shows on the first screen */
@media (max-width: 639px) {
  html body .container.section.look-page { padding-top: 8px; }
  html body .look__media > .collage { aspect-ratio: 4 / 5; }
}

/* reviews page: the count is a subheading of the second level (Onest 600 20px, Cormorant stays 28px and up);
   "Написать отзыв" and "Добавить отзыв" are the same ghost buttons as on the product page */
html body .s-reviews-count { font-family: var(--f-ui); font-weight: 600; font-size: 20px; line-height: 1.3; letter-spacing: 0; margin: 32px 0 8px; }
html body .s-reviews-header { text-wrap: balance; }
html body .show-write-form, html body .s-review-form .save { min-height: 44px; padding: 0 24px; border-radius: var(--r-pill); border: 1px solid var(--deep); background: transparent; color: var(--deep);
  font-family: var(--f-ui); font-weight: 500; font-size: var(--fs-caption); letter-spacing: .14em; text-transform: uppercase; }
html body .s-review-form .save { background: var(--deep); color: var(--on-deep); }
@media (hover: hover) { html body .show-write-form:hover { background: var(--deep); color: var(--on-deep); } html body .s-review-form .save:hover { background: var(--clay-deep); border-color: var(--clay-deep); } }
@media (max-width: 720px) { html body .show-write-form, html body .s-review-form .save { font-size: 14px; letter-spacing: .06em; } }

/* builder: an odd last shade chip takes the whole row of the card (three tones were two chips and a lonely third) */
html body .eb-shades > .swatch-btn:last-child:nth-child(odd):not(:only-child) { grid-column: 1 / -1; }
/* tone quiz: the question is a subheading of the second level, not a small Cormorant line */
html body .ebq h3.ebq__q, html body .ebq__q { font-family: var(--f-ui); font-weight: 600; font-size: 20px; line-height: 1.3; letter-spacing: 0; }
/* builder on a phone: the last card of an odd step takes the whole row, the photo on the left (as in the catalog) */
@media (max-width: 719px) {
  html body .eb-grid > .card:last-child:nth-child(odd) { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 14px; }
  html body .eb-grid > .card:last-child:nth-child(odd) .card__body { padding-top: 0; }
}

/* "Добавить образ в корзину · 2 670 ₽": the label and the price were separate flex items, so a narrow column split "2 / 670 / ₽" into three columns;
   now the button is one line of text and the price never breaks inside */
html body .look__buy.btn { display: block; text-align: center; padding: 16px 20px; line-height: 1.35; }
html body .look__buy.btn > span, html body .look__buy.btn .ruble { white-space: nowrap; }

/* tablet (721-1099): tone chips three in a row (four columns left an empty slot for three tones), the third "what to add" card takes the whole row */
@media (min-width: 721px) and (max-width: 1023px) {
  html body .swatches { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 720px) and (max-width: 1099px) {
  html body .pdp__xs > .xs__item:last-child:nth-child(odd):not(:only-child) { grid-column: 1 / -1; }
}

/* the heading over the photos of a look: says what the photo is (a small caps label like the other labels of the page) */
html body .look__faces-t { grid-column: 1 / -1; margin: 18px 0 2px; font: 600 12px/1.2 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--cocoa); }
html body .look__faces:has(.look__faces-t) { margin-top: 12px; }