/* «Деталь» — the shop: cards, listings, filters, product page, cart.
   The module's styles read the parent's tokens, which detal.css re-points
   (square corners, aluminium, anthracite); this file adds the chamfers, the
   photo plate, the part-number line and the places where the tokens alone
   do not make the look. */

/* the chamfer, in one place: cards, panels, tiles */
html.detal :is(.shop-card, .shop-tile, .shop-buybox, .shop-panel, .shop-summary, .shop-cart__summary, .shop-checkout__box, .cms-card, .shop-dialog__box, .shop-filter__panel) {
    --cut: var(--dt-cut);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}
html.detal[data-detal-cards="plain"] :is(.shop-card, .shop-tile, .shop-buybox, .shop-panel, .shop-summary, .shop-cart__summary, .shop-checkout__box, .cms-card, .shop-dialog__box, .shop-filter__panel),
html.detal[data-detal-cards="plain"] :is(.dt-plate, .dt-node, .dt-explode__fig) { clip-path: none; }

/* products per row */
@media (min-width: 62rem) {
    html.detal[data-detal-grid="3"] .shop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    html.detal[data-detal-grid="3"] .shop-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* -------------------------------------------------------------------------
   Product card
   ------------------------------------------------------------------------- */

html.detal .shop-card { background: var(--dt-surface); transition: background-color 150ms var(--dt-ease); }
html.detal .shop-card:hover { background: color-mix(in oklch, var(--dt-signal) 7%, var(--dt-surface)); }
html.detal .shop-card__media { background: #ffffff; aspect-ratio: 4 / 3; }
html.detal .shop-card__img { object-fit: contain; padding: 6%; box-sizing: border-box; }
html.detal .shop-card__body { gap: 6px; padding: 14px 16px 16px; }
html.detal .shop-card__brand { margin: 0; font-size: var(--dt-step-small); font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--dt-muted); }
html.detal .shop-card__title { margin: 0; font-family: var(--dt-sans); font-stretch: 85%; font-weight: 600; font-size: 1.0625rem; line-height: 1.22; letter-spacing: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
html.detal .shop-card__link { color: var(--dt-ink); text-decoration: none; }
html.detal .shop-card__link:hover { text-decoration: underline; text-decoration-color: var(--dt-signal); text-decoration-thickness: 2px; }
html.detal .dt-sku { margin: 0; font-size: 0; }
html.detal .dt-sku .dt-art { font-size: 0.8125rem; position: relative; z-index: 2; }
html.detal .dt-fit { margin: 0; font-size: 0.875rem; color: var(--dt-muted); }
html.detal .dt-fit.is-fit { color: var(--dt-stock); font-weight: 600; }
html.detal .dt-fit.is-fit::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; background: var(--dt-stock); }
html.detal .shop-stock { font-size: 0.875rem; }
html.detal .shop-stock--in { color: var(--dt-stock); }
html.detal .shop-stock__dot { border-radius: 0; }
html.detal .shop-card__foot { margin-top: auto; padding-top: 6px; display: grid; gap: 10px; }
html.detal .shop-price__value, html.detal .shop-price__now { font-family: var(--dt-sans); font-size: 1.375rem; font-weight: 700; font-stretch: 100%; font-variant-numeric: tabular-nums; letter-spacing: -0.005em; color: var(--dt-ink); }
html.detal .shop-price--lg .shop-price__value { font-size: 2.25rem; }
html.detal .shop-price__old { color: var(--c-text-faint); }
html.detal .shop-price__off { background: var(--dt-signal); color: var(--dt-signal-ink); padding: 0 6px; font-weight: 700; border-radius: 0; }
html.detal .shop-card__btn { width: 100%; }

html.detal :is(.shop-sticker, .shop-stickers__item) { border-radius: 0; font-weight: 700; clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px)); }
html.detal :is(.shop-toggle, .shop-card__toggle) { border-radius: 0; }

/* categories as tiles: a white plate under the photo, the title in the narrow face */
html.detal .shop-tile { background: var(--dt-surface); }
html.detal .shop-tile__media { background: #ffffff; }
html.detal .shop-tile__img { object-fit: contain; padding: 6%; box-sizing: border-box; }
html.detal .shop-tile__title { font-family: var(--dt-display); font-stretch: 75%; font-weight: 700; font-size: 1.5rem; letter-spacing: -0.01em; }
html.detal .shop-tile__link { color: var(--dt-ink); text-decoration: none; }
html.detal .shop-tile:hover { background: color-mix(in oklch, var(--dt-signal) 7%, var(--dt-surface)); }

/* block heads on the catalogue field */
html.detal .cms-block :is(.cms-block__title, .cms-head__title) { font-size: var(--dt-step-head); }
html.detal .cms-head__subtitle, html.detal .cms-block__subtitle { color: var(--dt-muted); }

/* -------------------------------------------------------------------------
   Listing, filters, crumbs
   ------------------------------------------------------------------------- */

html.detal .shop-filter :is(summary, .shop-filter__title) { font-family: var(--dt-sans); font-stretch: 90%; font-weight: 700; }
html.detal .shop-filter :is(.shop-chip, .shop-filter__chip, .shop-pill) { border-radius: 0; background: var(--dt-surface); box-shadow: inset 0 0 0 1px var(--c-border-strong); }
html.detal .shop-filter :is(.shop-chip, .shop-filter__chip, .shop-pill)[aria-pressed="true"],
html.detal .shop-filter :is(.shop-chip, .shop-filter__chip, .shop-pill).is-active { background: var(--dt-signal); color: var(--dt-signal-ink); box-shadow: none; }
html.detal .shop-filter :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--dt-shell); }
html.detal .cms-crumbs { font-size: var(--dt-step-small); color: var(--dt-muted); }
html.detal .cms-pager :is(a, span) { border-radius: 0; }
html.detal .cms-pager [aria-current] { background: var(--dt-shell); color: #ffffff; }

/* -------------------------------------------------------------------------
   Product page
   ------------------------------------------------------------------------- */

html.detal .shop-product :is(h1, .shop-product__title) { font-size: var(--dt-step-head); line-height: 1.02; }
html.detal .shop-buybox { background: var(--dt-surface); padding: 22px; }
html.detal .shop-gallery__main, html.detal .shop-gallery__slide { background: #ffffff; }
html.detal .shop-gallery img { object-fit: contain; }
html.detal .shop-product__sku, html.detal .shop-sku { font-family: var(--dt-mono); }
html.detal .shop-specs :is(dt, th) { color: var(--dt-muted); font-weight: 500; }
html.detal .shop-specs :is(dd, td) { font-weight: 600; }
html.detal .shop-specs tr, html.detal .shop-specs__row { border-bottom: 1px solid var(--dt-line); }
html.detal .shop-tabs [role="tab"][aria-selected="true"] { box-shadow: inset 0 -3px 0 var(--dt-signal); color: var(--dt-ink); }

/* the applicability table in a product's description: a real table, so lines are allowed */
html.detal .cms-prose table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
html.detal .cms-prose :is(th, td) { padding: 10px 14px 10px 0; border-bottom: 1px solid var(--dt-line); text-align: left; }
html.detal .cms-prose th { font-weight: 700; font-stretch: 90%; color: var(--dt-muted); }
html.detal .cms-prose h3 { margin: 1.6em 0 0.6em; font-size: 1.375rem; }

/* -------------------------------------------------------------------------
   Cart, checkout, dialogs
   ------------------------------------------------------------------------- */

html.detal :is(.shop-cart__summary, .shop-checkout__box, .shop-dialog__box) { background: var(--dt-surface); }
html.detal .shop-dialog__box, html.detal .shop-drawer { box-shadow: 0 10px 30px rgb(0 0 0 / 0.35); }
html.detal .shop-qty { border-radius: 0; }
html.detal .shop-qty__btn { border-radius: 0; }
html.detal .shop-toast { border-radius: 0; background: var(--dt-shell); color: #ffffff; box-shadow: 0 10px 30px rgb(0 0 0 / 0.35); }

/* other blocks on the aluminium field */
html.detal .cms-faq__item, html.detal .cms-accordion__item { border-radius: 0; }
html.detal .cms-testimonials__item, html.detal .cms-testimonial { border-radius: 0; background: var(--dt-surface); clip-path: polygon(0 0, calc(100% - var(--dt-cut)) 0, 100% var(--dt-cut), 100% 100%, var(--dt-cut) 100%, 0 calc(100% - var(--dt-cut))); }
html.detal .cms-block--features .cms-feature { border-radius: 0; background: var(--dt-surface); }