/* generated by scripts/css-min.php from ../lines.css — edit the source, never this file */
.vonnik-lines { --vonnik-lines-gap: clamp(var(--vonnik-space-5), 2.4vw, var(--vonnik-space-8)); --vonnik-lines-pic: clamp(88px, 24vw, 112px); --vonnik-lines-bleed: clamp(var(--vonnik-space-4), 3vw, var(--vonnik-space-7)); border-bottom: var(--vonnik-border-hairline) solid var(--vonnik-border); } .vonnik-lines__line { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "pic" "head" "kv" "price"; column-gap: var(--vonnik-lines-gap); row-gap: var(--vonnik-space-6); padding: clamp(var(--vonnik-space-8), 4vw, var(--vonnik-space-9)) 0; border-top: var(--vonnik-border-hairline) solid var(--vonnik-border); } .vonnik-lines__line--option { background: var(--vonnik-grey-band); border-top: 0; margin-left: calc(-1 * var(--vonnik-lines-bleed)); margin-right: calc(-1 * var(--vonnik-lines-bleed)); padding-left: var(--vonnik-lines-bleed); padding-right: var(--vonnik-lines-bleed); } .vonnik-lines__line--option + .vonnik-lines__line { border-top: 0; } .vonnik-lines__pic { grid-area: pic; } .vonnik-lines__pic img { display: block; width: 100%; aspect-ratio: 3 / 2; max-height: 280px; object-fit: contain; background: var(--vonnik-surface); border-radius: var(--vonnik-radius); padding: var(--vonnik-space-4); } .vonnik-lines__head { grid-area: head; } .vonnik-lines__of { margin: 0 0 var(--vonnik-space-1); font-size: var(--vonnik-text-s); color: var(--vonnik-ink-soft); } .vonnik-lines .vonnik-lines__line .vonnik-lines__name { margin: 0 0 var(--vonnik-space-2); font-size: var(--vonnik-text-l); line-height: var(--vonnik-line-tight); font-weight: var(--vonnik-weight-black); text-transform: uppercase; color: var(--vonnik-ink); overflow-wrap: break-word; } .vonnik-lines__name a { color: inherit; text-decoration: none; } .vonnik-lines__name a:hover { color: var(--vonnik-blue); } .vonnik-lines__meta { margin: 0 0 var(--vonnik-space-1); font-size: var(--vonnik-text-s); color: var(--vonnik-ink-soft); overflow-wrap: break-word; } .vonnik-lines__kv { grid-area: kv; margin: 0; display: grid; grid-template-columns: auto minmax(40%, 1fr); row-gap: var(--vonnik-stack-s); column-gap: var(--vonnik-space-5); } .vonnik-lines__kv dt { min-width: var(--vonnik-kv-label); font-weight: var(--vonnik-weight-medium); color: var(--vonnik-ink-soft); } .vonnik-lines__kv dd { margin: 0; font-weight: var(--vonnik-weight-medium); color: var(--vonnik-ink); overflow-wrap: break-word; } .vonnik-lines__price { grid-area: price; margin: 0; display: flex; justify-content: space-between; align-items: baseline; gap: var(--vonnik-space-5); padding-top: var(--vonnik-stack-m); border-top: var(--vonnik-border-hairline) solid var(--vonnik-border); font-weight: var(--vonnik-weight-black); font-size: var(--vonnik-text-xl); color: var(--vonnik-ink); white-space: nowrap; } .vonnik-lines__line--option .vonnik-lines__price { border-top-color: var(--vonnik-border); } .vonnik-lines__qty { font-weight: var(--vonnik-weight-regular); font-size: var(--vonnik-text-m); color: var(--vonnik-ink-soft); } .vonnik-lines__qty ins { text-decoration: none; } @media (min-width: 690px) { .vonnik-lines:not(.vonnik-lines--cart) .vonnik-lines__line { grid-template-columns: var(--vonnik-lines-pic) minmax(0, 1fr) max-content; grid-template-areas: "pic head price" "pic kv ."; row-gap: var(--vonnik-space-4); } .vonnik-lines:not(.vonnik-lines--cart) .vonnik-lines__pic { align-self: start; } .vonnik-lines:not(.vonnik-lines--cart) .vonnik-lines__pic img { aspect-ratio: 1; max-height: none; padding: 0; } .vonnik-lines:not(.vonnik-lines--cart) { --vonnik-lines-bleed: var(--vonnik-space-7); } .vonnik-lines:not(.vonnik-lines--cart) .vonnik-lines__line--option { border-radius: var(--vonnik-radius); } .vonnik-lines:not(.vonnik-lines--cart) .vonnik-lines__head { align-self: start; } .vonnik-lines:not(.vonnik-lines--cart) .vonnik-lines__kv { row-gap: var(--vonnik-space-2); } .vonnik-lines:not(.vonnik-lines--cart) .vonnik-lines__kv dt { min-width: var(--vonnik-kv-label); } .vonnik-lines:not(.vonnik-lines--cart) .vonnik-lines__price { display: block; padding: 0 0 0 var(--vonnik-space-7); border-top: 0; text-align: right; } } .vonnik-lines--cart { container-type: inline-size; container-name: vonnik-lines; --vonnik-lines-pic: clamp(72px, 12vw, 96px); --vonnik-lines-gap: var(--vonnik-space-5); --vonnik-lines-step: var(--vonnik-control-tap); } .vonnik-lines__bar { display: none; } .vonnik-lines--cart .vonnik-lines__line { grid-template-columns: var(--vonnik-lines-pic) minmax(0, 1fr); grid-template-areas: "pic head" "kv kv" "price price" "remove remove"; row-gap: var(--vonnik-space-4); padding-block: clamp(var(--vonnik-space-6), 3vw, var(--vonnik-space-8)); } .vonnik-lines--cart .vonnik-lines__pic { align-self: start; } .vonnik-lines--cart .vonnik-lines__pic img { aspect-ratio: 1; max-height: none; padding: 0; } .vonnik-lines--cart .vonnik-lines__price { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: var(--vonnik-stack-s) var(--vonnik-gap-control); white-space: normal; } .vonnik-lines--cart .vonnik-lines__qty { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--vonnik-space-1) var(--vonnik-gap-control); } .vonnik-lines--cart .vonnik-lines__piece { white-space: nowrap; } .vonnik-lines--cart .vonnik-lines__amount { flex: 1 0 100%; text-align: right; white-space: nowrap; } .vonnik-lines--cart .vonnik-lines__amount .vonnik-b2b-was { white-space: normal; } .vonnik-lines--cart .vonnik-lines__remove { grid-area: remove; justify-self: start; } .vonnik-lines--cart .vonnik-lines__remove a { display: inline-flex; align-items: center; min-height: var(--vonnik-lines-step); font-size: var(--vonnik-text-s); font-weight: var(--vonnik-weight-regular); color: var(--vonnik-blue); text-decoration: none; } .vonnik-lines--cart .vonnik-lines__remove a:hover { text-decoration: underline; } .vonnik-lines--cart .quantity { font-size: var(--vonnik-text-s); --quantity-height: calc(var(--vonnik-lines-step) + 2px); --quantity-width: calc(var(--vonnik-lines-step) * 3); } .vonnik-lines--cart .quantity[data-type="type-2"] .ct-increase, .vonnik-lines--cart .quantity[data-type="type-2"] .ct-decrease { top: var(--vonnik-border-hairline); width: var(--vonnik-lines-step); height: var(--vonnik-lines-step); } .vonnik-lines--cart .quantity[data-type="type-2"] .ct-decrease { inset-inline-start: var(--vonnik-border-hairline); } .vonnik-lines--cart .quantity[data-type="type-2"] .ct-increase { inset-inline-end: var(--vonnik-border-hairline); } .vonnik-lines--cart .quantity[data-type="type-2"] input[type="number"] { padding-inline: var(--vonnik-lines-step); } @container vonnik-lines (min-width: 690px) { .vonnik-lines--cart .vonnik-lines__bar { display: grid; grid-template-columns: minmax(0, 1fr) 132px 140px; column-gap: var(--vonnik-lines-gap); padding: var(--vonnik-stack-s) var(--vonnik-space-5); background: var(--vonnik-grey-band); border-radius: var(--vonnik-radius); font-weight: var(--vonnik-weight-bold); color: var(--vonnik-ink); } .vonnik-lines--cart .vonnik-lines__bar span:nth-child(2) { text-align: center; } .vonnik-lines--cart .vonnik-lines__bar span:nth-child(3) { text-align: right; } .vonnik-lines--cart .vonnik-lines__line { grid-template-columns: var(--vonnik-lines-pic) minmax(0, 1fr) 132px 140px; grid-template-areas: "pic head qty amount" "pic kv qty amount" "pic remove qty amount"; row-gap: var(--vonnik-stack-s); padding-inline: var(--vonnik-space-5); } .vonnik-lines--cart .vonnik-lines__line--option { margin-inline: 0; border-radius: var(--vonnik-radius); } .vonnik-lines--cart .vonnik-lines__head { align-self: start; } .vonnik-lines--cart .vonnik-lines__kv { row-gap: var(--vonnik-space-2); } .vonnik-lines--cart .vonnik-lines__kv dt { min-width: var(--vonnik-kv-label); } .vonnik-lines--cart .vonnik-lines__price { display: contents; } .vonnik-lines--cart .vonnik-lines__qty { grid-area: qty; flex-direction: column; align-items: center; gap: var(--vonnik-space-2); align-self: start; } .vonnik-lines--cart .vonnik-lines__amount { grid-area: amount; margin: var(--vonnik-stack-s) 0 0; align-self: start; text-align: right; font-size: var(--vonnik-text-xl); font-weight: var(--vonnik-weight-black); color: var(--vonnik-ink); } }