/* Shared presentation for products, icms and uslugi. Author: Stas-Clear. */
:root {
    --ocm-space-1: .5rem;
    --ocm-space-2: .75rem;
    --ocm-space-3: 1rem;
    --ocm-space-4: 1.5rem;
    --ocm-space-5: 2rem;
    --ocm-heading-1: clamp(1.625rem, 1.25rem + 1.5vw, 2.375rem);
    --ocm-heading-2: clamp(1.25rem, 1.1rem + .6vw, 1.625rem);
    --ocm-heading-3: clamp(1.125rem, 1.05rem + .3vw, 1.3125rem);
    --ocm-card-heading: clamp(.9375rem, .9rem + .15vw, 1rem);
}

/* Full available width; the layout, rather than a paragraph, owns sizing. */
body .ocm-catalog-intro {
    display: block;
    margin: var(--ocm-space-3) 0 var(--ocm-space-4);
}
body .ocm-catalog-intro__main {
    display: grid;
    gap: var(--ocm-space-3);
    width: 100%;
    min-width: 0;
}
body .ocm-catalog-intro__meta,
body .ocm-catalog-intro__heading { margin: 0; }
body .ocm-catalog-intro__meta { align-items: center; }
body .ocm-catalog-intro__meta .ocm-detail__eyebrow { margin: 0; }
body .ocm-catalog-intro__heading { align-items: flex-start; }
body .ocm-catalog-intro h1,
body .ocm-detail h1 {
    max-width: none;
    margin: 0;
    color: #202939;
    font-size: var(--ocm-heading-1);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.025em;
    overflow-wrap: break-word;
    text-wrap: balance;
}
body .ocm-catalog-intro p {
    max-width: none;
    margin: 0;
    color: #667085;
    line-height: 1.65;
}
body .ocm-catalog-intro__description > * + * { margin-top: var(--ocm-space-2); }
body :is(.products-filter, .uslugi-filter) {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ocm-space-3);
}
body :is(.products-filter, .uslugi-filter) > .icms-filter-link__open {
    width: auto;
    margin-left: auto;
}
body :is(.products-filter, .uslugi-filter) > .icms-filter-container {
    flex-basis: 100%;
    min-width: 0;
}
body .ocm-catalog-seo :is(h2, h3, h4) {
    margin: var(--ocm-space-5) 0 var(--ocm-space-2);
    color: #263244;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.015em;
    text-wrap: balance;
}
body .ocm-catalog-seo h2 { font-size: var(--ocm-heading-2); }
body .ocm-catalog-seo h3 { font-size: var(--ocm-heading-3); }
body .ocm-catalog-seo h4 { font-size: 1.0625rem; }
body .ocm-catalog-seo > :first-child { margin-top: 0; }

/* Equal card rhythm, including cards rendered by native widgets. */
body :is(.ocm-product-grid, .ocm-service-grid) { gap: var(--ocm-space-4); }
body :is(.ocm-product-card, .ocm-service-card) {
    border-radius: 10px;
    border: 1px solid #e6eaf0;
    box-shadow: 0 3px 12px rgba(23, 39, 68, .055);
}
body :is(.ocm-product-card, .ocm-service-card):hover {
    transform: none;
    border-color: #cfd8e3;
    box-shadow: 0 3px 12px rgba(23, 39, 68, .055);
}
body .ocm-product-card__body { padding: var(--ocm-space-3); }
body .ocm-service-card__header {
    padding: var(--ocm-space-3) var(--ocm-space-3) 0;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: var(--ocm-space-2);
    align-items: start;
}
body .ocm-product-card__identity { gap: var(--ocm-space-2); }
body .ocm-service-card__icon { width: 42px; height: 42px; border-radius: 9px; }
body .ocm-product-card .ocm-product-card__title,
body .ocm-service-card .ocm-service-card__title {
    margin: 0;
    font-size: var(--ocm-card-heading);
    font-weight: 700;
    line-height: 1.4;
    min-height: 2.8em;
    max-height: 2.8em;
}
body .ocm-service-card__body { padding: var(--ocm-space-3) var(--ocm-space-3) 0; }
body .ocm-service-card__meta { padding: var(--ocm-space-3); gap: var(--ocm-space-2); }
body :is(.ocm-product-card__footer, .ocm-service-card__footer) {
    padding: var(--ocm-space-3);
    gap: var(--ocm-space-2);
    background: #fff;
}

/* Shared detail-page alignment and reading rhythm. */
body .ocm-detail { margin: var(--ocm-space-3) 0 var(--ocm-space-5); }
body .ocm-detail__layout { gap: var(--ocm-space-4) var(--ocm-space-5); }
body .ocm-detail .ocm-detail-hero { background: transparent; }
body .ocm-detail .ocm-detail-section {
    margin-top: 0;
    padding: var(--ocm-space-4) 0;
    border-radius: 0;
    box-shadow: none;
}
body .ocm-detail .ocm-detail-section__heading { margin-bottom: var(--ocm-space-3); }
body .ocm-detail .ocm-detail-section__heading h2 {
    margin: 0;
    font-size: var(--ocm-heading-2);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.015em;
    text-wrap: balance;
}
body .ocm-detail :is(.ocm-buy-panel, .ocm-order-panel) {
    padding: var(--ocm-space-4);
    border-radius: 10px;
    box-shadow: none;
}
body .ocm-detail :is(.ocm-product-description__body, .ocm-service-hero__lead) {
    color: #445064;
    font-size: 1rem;
    line-height: 1.7;
    overflow-wrap: break-word;
}
body .ocm-detail :is(.ocm-product-description__body, .ocm-service-hero__lead) :is(h2, h3, h4) {
    margin: var(--ocm-space-5) 0 var(--ocm-space-2);
    color: #263244;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.015em;
    text-wrap: balance;
}
body .ocm-detail :is(.ocm-product-description__body, .ocm-service-hero__lead) h2 { font-size: var(--ocm-heading-2); }
body .ocm-detail :is(.ocm-product-description__body, .ocm-service-hero__lead) h3 { font-size: var(--ocm-heading-3); }
body .ocm-detail :is(.ocm-product-description__body, .ocm-service-hero__lead) h4 { font-size: 1.0625rem; }
body .ocm-detail :is(.ocm-product-description__body, .ocm-service-hero__lead) :is(p, ul, ol) { margin-bottom: var(--ocm-space-3); }
body .ocm-detail :is(.ocm-product-description__body, .ocm-service-hero__lead) :is(ul, ol) { padding-inline-start: var(--ocm-space-4); }
body .ocm-detail :is(.ocm-product-description__body, .ocm-service-hero__lead) li { margin-bottom: var(--ocm-space-1); }
body .ocm-detail :is(.ocm-product-description__body, .ocm-service-hero__lead) > :first-child { margin-top: 0; }
body .ocm-detail :is(.ocm-product-description__body, .ocm-service-hero__lead) > :last-child { margin-bottom: 0; }

@media (max-width: 767.98px) {
    body .ocm-catalog-intro__meta { align-items: flex-start; }
    body .ocm-detail__layout { gap: var(--ocm-space-4); }
}
@media (max-width: 575.98px) {
    body .ocm-catalog-intro__heading { flex-wrap: wrap; }
    body .ocm-catalog-intro__heading h1 { flex-basis: 12rem; }
    body .ocm-catalog-intro__actions { margin-left: auto; }
    body .ocm-detail :is(.ocm-buy-panel, .ocm-order-panel) { padding: var(--ocm-space-3); }
}