.content{overflow:auto}

/* === S3 v2: CLS Prevention (CSS-only, no template changes) === */

/* Logo: HTML has width=243 height=66. CSS ensures responsive. */
#logo {
    width: auto;
    max-width: 100%;
    height: auto;
}

/* Footer logo: HTML has width=160 height=43. */
#footer-logo {
    width: auto;
    max-width: 160px;
    height: auto;
}

/* Product listing: .image is PARENT of .badge-wrapper, not child */
.image > .badge-wrapper {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Product listing imgs: height auto + object-fit prevents stretching with width/height attrs */
.image > .badge-wrapper img.product-first-img,
.image > .badge-wrapper img.product-second-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Promo container: already has height:200px in theme CSS,
   ensure images don't break out */
.ep-promo-img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

/* === Flickering fix: limit transition to opacity only === */
.badge-wrapper img { transition: opacity 0.15s !important; }
.catalog-item.outofstock img { transition: none !important; }

/* === H1 Homepage — SEO-фикс v2 2026-03-08 === */
/* Promos H2 converted to H1: replicate h2 span.line styling for h1 */
.home-page h1 {
    text-align: center;
    margin: 60px 0 30px;
    font-size: 1.5em;
    font-weight: bold;
}
h1 span.line {
    background-color: #FFFFFF;
    position: relative;
    display: inline-block;
}
h1 span.line span {
    z-index: 100;
    position: relative;
    background: white;
    padding: 0 25px;
}
h1 span.line:before {
    content: '';
    width: 100%;
    height: 100%;
    background: white;
    position: absolute;
    left: 0;
}
h1 span.line:after {
    content: '';
    border-bottom: 3px solid black;
    display: block;
    position: absolute;
    top: 12px;
    width: 160%;
    margin-left: -30%;
}

/* === S1.7: iOS auto-zoom prevention (2026-04-06) === */
/* iOS Safari auto-zooms inputs with font-size < 16px. */
/* Applied BEFORE removing viewport zoom restriction.  */
@media (max-width: 1023px) {
    input[type=text],
    input[type=email],
    input[type=tel],
    input[type=number],
    input[type=password],
    input[type=search],
    input[type=url],
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* === FIX 1 CLS: prevent duplicate currency if old cached JS runs prependTo === */
button.currency-change > a + a { display: none; }

/* === FIX 2 CLS (P0): top-line overflow + scrollbar stabilization === */
/* Prevent .top-line content from overflowing and causing CLS */
header .top-line { overflow: hidden; }
/* Force vertical scrollbar always visible ??? prevents horizontal CLS from scrollbar appearing/disappearing */
html { overflow-y: scroll; }

/* === FIX 3 CLS (P1): Reserve .head-controller min-height on mobile === */
/* Desktop (>=1024px) already has fixed height:90px in epica-site.css */
/* Mobile: logo(50%)+controls(50%) row + contact.show-mob row + search row */
@media (max-width: 767px) {
    .head-controller { min-height: 145px; }
}
/* Tablet: logo(30%)+contact(30%)+controls(40%) row + search row */
@media (min-width: 768px) and (max-width: 1023px) {
    .head-controller { min-height: 110px; }
}

/* === FIX 4 CLS (P1): Remove margin:auto from .ep-logo === */
/* epica-site.css has .ep-logo{margin:auto} at 768px ??? redundant with */
/* justify-content:center, can cause jitter during streaming HTML render */
.head-controller .ep-logo { margin: 0; }



/* === Card layout alignment fix v4 (2026-04-20) === */

/* 1. Full height chain — ONLY catalog-item cards, not related/viewed */
.prd.zeus.catalog-item {
    display: flex;
}
.prd.zeus.catalog-item > form.purchase {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.prd.zeus.catalog-item .prd-wrapper {
    display: flex !important;
    flex-direction: column !important;
    flex: 1;
    text-align: center;
}

/* 2. Title: fixed height for 3 lines — ONLY catalog-item */
.prd.zeus.catalog-item .prd-wrapper > a > h5.title {
    min-height: 54px;
    margin-top: 5px;
    overflow: hidden;
}

/* 3. Image block: full width */
.prd.zeus.catalog-item .prd-wrapper > .image {
    width: 100%; position: relative;
}

/* 4. Badge overlay: bottom-right INSIDE .badge-wrapper (not .image) to avoid covering controls */
.prd.zeus.catalog-item .image > .corner.bottom-right {
    position: absolute;
    top: 5px;
    right: 5px;
    left: auto;
    bottom: auto;
    z-index: 15;
}

/* 5. Bottom block: just price, centered, pushed to bottom — ONLY catalog-item */
.prd.zeus.catalog-item .prd-wrapper > div:last-child {
    margin-top: auto;
    width: 100%;
    text-align: center;
}

/* 6. prd-control: collapse when badge is moved out — ONLY catalog-item */
.prd.zeus.catalog-item .prd-wrapper .prd-control {
    float: none;
    margin: 0;
    padding: 0;
    line-height: 0;
}
.prd.zeus.catalog-item .prd-wrapper .prd-control .stockinfo {
    line-height: normal;
    display: block;
}

/* 7. Price always centered — ONLY catalog-item */
.prd.zeus.catalog-item .prd-wrapper .price {
    text-align: center !important;
    display: block;
}