/* FEROXO_MOBILE_LAYOUT_V31_2026_08_19 */
html, body { max-width: 100%; overflow-x: clip; }
*, *::before, *::after { box-sizing: border-box; }
img, video, iframe, svg { max-width: 100%; }
:where(.container,.header__inner,.footer__inner,.hero__inner,.section__inner,.product-card,.resource-card,.service-card,.about-card) { min-width: 0; }
:where(h1,h2,h3,h4,p,a,span,button,li,dt,dd,label) { overflow-wrap: break-word; }
.feroxo-lang-cz :where(h1,h2,h3,.hero__title,.section-title,.product-card__title,.resource-card__title) { letter-spacing: -0.018em; }
.feroxo-lang-cz :where(.site-header,.header,.nav,.main-nav) a { letter-spacing: -0.01em; }
.feroxo-lang-cz :where(.strength-card__content,.industry-card,.built-industry__text-panel,.latest-news__feature,.latest-news__stack,.about-support > article,.service-card,.product-card,.resource-card) { min-width: 0; }
.feroxo-lang-cz :where(.strength-card__content p,.industry-card p,.built-industry__text-panel p,.latest-news p,.about-support p,.service-card p,.product-card p,.resource-card p) { overflow-wrap: anywhere; hyphens: auto; }
.feroxo-lang-cz :where(.strength-card__content h2,.industry-card h3,.about-support h2,.service-card h3,.product-card h3,.resource-card h3) { overflow-wrap: anywhere; hyphens: auto; }
@media (max-width: 1180px) {
:root { --feroxo-page-pad: clamp(20px, 4vw, 48px); }
.container, .header__inner, .footer__inner { padding-left: var(--feroxo-page-pad) !important; padding-right: var(--feroxo-page-pad) !important; }
.site-header a, .header a, .main-nav a { white-space: nowrap; }
.feroxo-lang-cz .site-header a, .feroxo-lang-cz .header a, .feroxo-lang-cz .main-nav a { font-size: .94em; }
}
@media (max-width: 900px) {
html { scroll-padding-top: 76px; }
body { min-width: 320px; }
.site-header, .header { position: relative; z-index: 100; }
.header__inner, .site-header__inner { min-height: 68px; }
.hero, .home-page .hero { min-height: 0 !important; height: auto !important; }
.hero__slide, [data-hero-slide] { min-height: min(72svh, 680px); }
.hero img, .hero__image { width: 100%; height: 100%; object-fit: cover; }
.hero__content, .hero__copy { width: min(100%, 680px) !important; max-width: 100% !important; padding-inline: clamp(20px,5vw,40px) !important; }
.hero h1, .hero__title { font-size: clamp(34px, 8vw, 60px) !important; line-height: .98 !important; }
.feroxo-lang-cz .hero h1, .feroxo-lang-cz .hero__title { font-size: clamp(31px, 7.2vw, 54px) !important; line-height: 1.02 !important; }
.product-grid, .resources-grid, .cards-grid, .service-grid, .about-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
.product-card, .resource-card, .service-card { height: auto !important; min-height: 0 !important; }
.product-card__body, .resource-card__body { min-width: 0; }
.industries, .strengths, .latest-news, .built-industry, .service-section, .about-section { overflow: hidden; }
[data-industries-track], .industries__track { max-width: 100%; }
.request-modal__dialog, .request-modal__content { width: min(94vw, 760px) !important; max-height: 92svh !important; overflow-y: auto !important; margin: 4svh auto !important; }
.request-form { grid-template-columns: 1fr !important; }
.technical-specs, .product-detail__grid, .contact-layout, .contact-grid { grid-template-columns: 1fr !important; }
table { width: 100%; }
}
@media (max-width: 640px) {
:root { --feroxo-mobile-pad: 18px; }
.container, .header__inner, .footer__inner, main > section { padding-left: var(--feroxo-mobile-pad) !important; padding-right: var(--feroxo-mobile-pad) !important; }
main > section.hero, main > section[class*="hero"] { padding-left: 0 !important; padding-right: 0 !important; }
h1 { font-size: clamp(32px, 10vw, 46px) !important; line-height: 1.02 !important; }
h2 { font-size: clamp(27px, 8vw, 38px) !important; line-height: 1.08 !important; }
h3 { font-size: clamp(20px, 6vw, 28px) !important; line-height: 1.12 !important; }
.feroxo-lang-cz h1 { font-size: clamp(29px, 9vw, 42px) !important; }
.feroxo-lang-cz h2 { font-size: clamp(25px, 7.3vw, 35px) !important; }
p, li, dd, dt { line-height: 1.5; }
.product-grid, .resources-grid, .cards-grid, .service-grid, .about-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
.product-card, .resource-card { width: 100% !important; max-width: none !important; }
.product-card img, .resource-card img { width: 100%; height: auto; object-fit: cover; }
.hero__slide, [data-hero-slide] { min-height: 620px; }
.hero__content, .hero__copy { padding-inline: 20px !important; padding-bottom: 72px !important; }
.hero__controls, .industries__controls, .slider-controls { gap: 10px !important; }
.hero__arrow, .industries__arrow, [data-hero-prev], [data-hero-next], [data-industries-prev], [data-industries-next] { width: 44px !important; height: 44px !important; min-width: 44px !important; display: grid !important; place-items: center !important; }
.strengths__item, .strengths__panel, [data-strength-item] { min-width: 0 !important; width: 100% !important; flex-basis: auto !important; }
.about-support-v3__grid, .about-support__grid { grid-template-columns: 1fr !important; }
.service-process, .service-process__steps { grid-template-columns: 1fr !important; }
.contact-info-list article { min-width: 0; }
.footer__grid, .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 28px 20px !important; }
.footer__brand, .footer-brand { grid-column: 1 / -1; }
.request-modal { padding: 12px !important; align-items: flex-start !important; }
.request-modal__dialog, .request-modal__content { width: 100% !important; max-height: calc(100svh - 24px) !important; margin: 0 !important; border-radius: 16px !important; }
.request-modal__body { padding: 22px 18px 24px !important; }
.request-modal__close { top: 12px !important; right: 12px !important; }
.product-summary, .product-hero, .product-content { min-width: 0; }
.technical-specs table, .spec-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.technical-specs th, .technical-specs td, .spec-table th, .spec-table td { min-width: 120px; }
.breadcrumbs { overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
}
@media (max-width: 760px) {
.site-header.is-menu-open .site-nav { max-height: calc(100svh - 72px); overflow-y: auto; }
.home-page .site-header.is-menu-open .site-nav,
.about-page .site-header.is-menu-open .site-nav { grid-template-columns: 1fr 1fr !important; }
.feroxo-lang-cz .site-header.is-menu-open .site-nav__link { font-size: 12px !important; line-height: 1.2 !important; white-space: normal !important; }
.home-page .strength-card, .home-page .strength-card.is-active { height: auto !important; min-height: 260px; }
.home-page .strength-card:not(.is-active) { min-height: 62px; height: 62px !important; }
.home-page .strength-card__content { position: absolute; }
.feroxo-lang-cz .home-page .strength-card.is-active { min-height: 300px; }
.home-page .industry-card { min-width: min(190px, 72vw); }
.about-support { grid-template-columns: 1fr !important; }
.about-support > article { min-height: 0 !important; height: auto !important; }
}
@media (max-width: 390px) {
:root { --feroxo-mobile-pad: 14px; }
.footer__grid, .footer-grid { grid-template-columns: 1fr !important; }
.hero h1, .hero__title { font-size: clamp(29px, 9vw, 38px) !important; }
.feroxo-lang-cz .hero h1, .feroxo-lang-cz .hero__title { font-size: clamp(27px, 8.3vw, 35px) !important; }
button, .button, .btn { max-width: 100%; }
}
/* FEROXO_TRANSLATION_LAYOUT_V4_2026_08_24 */
/* Czech copy is naturally longer. Let components grow instead of clipping text. */
.feroxo-lang-cz :where(h1,h2,h3,h4,p,li,dt,dd,small,strong,em,label,a,button,summary) {
overflow-wrap: break-word;
word-break: normal;
hyphens: auto;
}
.feroxo-lang-cz :where(h1,h2,h3,h4,.hero__title,.section-title) { text-wrap: balance; }
.feroxo-lang-cz :where(p,li,dd,.request-modal__intro p,.service-copy-card p,.product-card p,.resource-card p) { text-wrap: pretty; }
/* Header: consistent navigation; Czech request CTA uses a shorter contextual label. */
.feroxo-lang-cz :where(.site-header,.inner-top .site-header,.detail-top .site-header,.article-top .site-header) {
column-gap: clamp(8px,1.1vw,20px);
}
.feroxo-lang-cz :where(.site-nav,.main-nav) { min-width:0; }
.feroxo-lang-cz :where(.site-nav a,.main-nav a) {
white-space: nowrap;
font-size: clamp(11px,.78vw,15px);
letter-spacing: -.012em;
}
.feroxo-lang-cz :where(.site-header .request-button,.inner-top .request-button,.detail-top .request-button,.article-top .request-button) {
width:auto !important;
min-width:108px !important;
padding-inline:18px !important;
white-space:nowrap !important;
}
/* Text cards: no fixed text height in Czech; cards keep visual rhythm through min-height. */
.feroxo-lang-cz :where(.product-card__body,.resource-card__body,.service-copy-card,.about-copy-card,.latest-news__copy,.built-industry__content) {
min-width:0;
height:auto;
}
.feroxo-lang-cz .products-page .product-card__body { min-height:238px; height:auto; }
.feroxo-lang-cz .products-page .product-card p { min-height:0; }
.feroxo-lang-cz .products-page .product-card dd { white-space:normal; text-align:right; }
.feroxo-lang-cz .resource-card__tags { display:flex; flex-wrap:wrap; gap:6px; }
.feroxo-lang-cz .resource-card__tags span { height:auto !important; min-height:24px; white-space:normal !important; line-height:1.15; padding-block:5px; }
/* Home strengths need extra vertical room with Czech copy while retaining the accordion shape. */
@media (min-width:761px) {
.feroxo-lang-cz .home-page .strengths { min-height:clamp(330px,28vw,520px); }
.feroxo-lang-cz .home-page .strength-card { height:clamp(330px,28vw,520px); }
.feroxo-lang-cz .home-page .strength-card__content { left:clamp(18px,2.1vw,42px); right:clamp(18px,1.8vw,34px); bottom:clamp(20px,1.8vw,32px); }
.feroxo-lang-cz .home-page .strength-card__content h2 { font-size:clamp(15px,1.55vw,29px); line-height:1.08; }
.feroxo-lang-cz .home-page .strength-card__content p { max-width:96%; font-size:clamp(10px,.78vw,16px); line-height:1.28; }
.feroxo-lang-cz .home-page .industries__title { white-space:normal; font-size:clamp(25px,2.35vw,50px); line-height:.92; }
.feroxo-lang-cz .home-page .industry-card h3 { padding-inline:12px; line-height:1.08; }
.feroxo-lang-cz .home-page .built-industry__content { width:min(660px,84%); }
.feroxo-lang-cz .home-page .built-industry__content h2 { font-size:clamp(38px,4.35vw,96px); line-height:.84; }
.feroxo-lang-cz .home-page .built-industry__content p { font-size:clamp(12px,1.05vw,21px); line-height:1.18; }
}
/* Service/About: allow the translated copy to breathe instead of colliding with neighboring blocks. */
.feroxo-lang-cz .service-copy-card p { line-height:1.38; }
.feroxo-lang-cz .service-part-item small { line-height:1.18; }
.feroxo-lang-cz .service-process__steps article { min-width:0; }
.feroxo-lang-cz .service-process__steps p { line-height:1.28; }
.feroxo-lang-cz .about-support__card { min-width:0; }
.feroxo-lang-cz .about-support__card h3 { line-height:1.02; }
.feroxo-lang-cz .about-support__card p { line-height:1.25; }
/* Buttons/forms must grow to two lines rather than hide translated labels. */
.feroxo-lang-cz :where(.built-industry__button,.latest-news__see-all,.product-card__request,.product-side-v2>button,.document-card__open,.request-form__bottom>button,.request-form__equipment a,.service-contact-button) {
height:auto !important;
min-height:40px;
padding-block:9px;
padding-inline:16px;
white-space:normal;
text-align:center;
line-height:1.15;
}
.feroxo-lang-cz .request-form__equipment { grid-template-columns:minmax(0,1fr) auto; }
@media (max-width:900px) {
.feroxo-lang-cz :where(.site-nav a,.main-nav a) { white-space:normal; }
.feroxo-lang-cz .request-form__equipment { grid-template-columns:1fr; }
.feroxo-lang-cz .request-form__equipment a { width:100%; }
}
@media (max-width:760px) {
.feroxo-lang-cz .home-page .strength-card,
.feroxo-lang-cz .home-page .strength-card.is-active { height:auto !important; min-height:300px !important; }
.feroxo-lang-cz .home-page .strength-card:not(.is-active) { min-height:62px !important; height:62px !important; }
.feroxo-lang-cz .home-page .strength-card.is-active .strength-card__content { position:absolute; }
.feroxo-lang-cz .home-page .built-industry__text-panel { height:auto !important; min-height:330px; padding-block:34px 86px; }
.feroxo-lang-cz .home-page .built-industry__content { transform:none; width:min(100%,520px); }
.feroxo-lang-cz .home-page .built-industry__content h2 { font-size:clamp(38px,12vw,60px); line-height:.88; }
.feroxo-lang-cz .home-page .built-industry__content p { font-size:15px; line-height:1.3; }
.feroxo-lang-cz .service-hero__content br,
.feroxo-lang-cz .service-copy-card br,
.feroxo-lang-cz .service-process__steps p br { display:none; }
.feroxo-lang-cz .about-copy-card p br { display:none; }
}
@media (max-width:480px) {
.feroxo-lang-cz :where(h1,.hero__title) { letter-spacing:-.025em; }
.feroxo-lang-cz .request-modal__intro h2 { font-size:clamp(34px,12vw,52px); line-height:.9; }
.feroxo-lang-cz .service-hero__content p { font-size:clamp(14px,4vw,16px); line-height:1.38; }
.feroxo-lang-cz .service-process__steps article { min-height:0; }
}
/* FEROXO_TRANSLATION_LAYOUT_V4_2_3_2026_08_24
Final live-QA corrections: Czech overflow, arrows, header stability and mobile polish. */
/* Header actions keep the same geometry before/after the saved CZ language is restored. */
.site-header__actions {
display:flex !important;
align-items:center !important;
gap:10px !important;
min-width:0;
min-height:38px;
}
.site-header__actions .language,
.site-header__actions .language__button,
.site-header__actions .request-button { flex:0 0 auto; }
.site-header__actions .request-button { justify-content:center; }
html.feroxo-lang-cz .site-header__actions .request-button {
width:145px !important;
min-width:145px !important;
padding-inline:16px !important;
white-space:nowrap !important;
}
html.feroxo-i18n-ready .site-header__actions,
html.feroxo-i18n-ready .language__button,
html.feroxo-i18n-ready .request-button { transition:none !important; }
/* Home strengths: keep long Czech vertical labels optically centered and inside every red tab. */
@media (min-width:761px) {
html.feroxo-lang-cz .home-page .strength-card__tab-label {
inset:12px 0 !important;
padding:0 6px !important;
font-size:clamp(10px,1.05vw,20px) !important;
line-height:.94 !important;
letter-spacing:-.025em !important;
text-align:center !important;
overflow:hidden;
}
html.feroxo-lang-cz .home-page .strength-card__tab-label.feroxo-label-long {
font-size:clamp(9px,.92vw,17px) !important;
}
}
/* Home news header: translated two-line title gets real height and can never sit on top of cards. */
.home-page .latest-news__heading {
display:grid !important;
grid-template-columns:minmax(0,1fr) auto !important;
align-items:start !important;
column-gap:clamp(12px,2vw,28px) !important;
height:auto !important;
min-height:0 !important;
margin-bottom:clamp(18px,1.6vw,30px) !important;
}
.home-page .latest-news__heading h2 {
min-width:0;
white-space:normal !important;
overflow-wrap:normal !important;
word-break:normal !important;
text-wrap:balance;
}
.home-page .latest-news__heading a {
justify-self:end;
align-self:start;
margin-top:clamp(4px,.7vw,14px) !important;
}
html.feroxo-lang-cz .home-page .latest-news__heading h2 {
font-size:clamp(48px,5.15vw,92px) !important;
line-height:.88 !important;
letter-spacing:-.035em !important;
max-width:12ch;
}
html.feroxo-lang-cz .home-page .latest-news__heading a {
width:auto !important;
min-width:116px !important;
padding-inline:18px !important;
font-size:clamp(12px,.82vw,15px) !important;
}
html.feroxo-lang-cz .home-page .latest-news__feature > span,
html.feroxo-lang-cz .home-page .latest-news__stack a > span {
overflow-wrap:anywhere;
text-wrap:balance;
line-height:1.04 !important;
}
html.feroxo-lang-cz .home-page .latest-news__feature > span {
font-size:clamp(30px,2.8vw,52px) !important;
}
html.feroxo-lang-cz .home-page .latest-news__stack a > span {
top:auto !important;
left:18px !important;
right:18px !important;
bottom:18px !important;
font-size:clamp(18px,1.55vw,28px) !important;
}
/* About / cost-saving reliability: remove English line-break assumptions and let CZ card grow. */
html.feroxo-lang-cz .about-page .about-reliability + .about-copy-card {
height:auto !important;
min-height:clamp(440px,28vw,540px) !important;
padding:clamp(28px,2.2vw,42px) clamp(26px,2.6vw,48px) !important;
justify-content:center !important;
overflow:hidden !important;
}
html.feroxo-lang-cz .about-page .about-reliability + .about-copy-card h2 {
margin:0 0 clamp(18px,1.4vw,26px) !important;
font-size:clamp(48px,4.65vw,84px) !important;
line-height:.9 !important;
letter-spacing:-.04em !important;
text-wrap:balance;
}
html.feroxo-lang-cz .about-page .about-reliability + .about-copy-card p {
max-width:95% !important;
font-size:clamp(15px,1.05vw,19px) !important;
line-height:1.22 !important;
overflow:visible !important;
}
html.feroxo-lang-cz .about-page .about-reliability + .about-copy-card p br { display:none !important; }
html.feroxo-lang-cz .about-page .about-reliability + .about-copy-card p + p {
margin-top:clamp(14px,1.1vw,20px) !important;
}
/* Request form: privacy text gets its own flexible column instead of colliding with the button. */
.request-form__bottom {
display:flex;
flex-wrap:wrap;
align-items:center;
gap:14px 20px !important;
}
.request-form__bottom > button { flex:0 0 auto; }
.request-form__privacy {
flex:1 1 360px;
min-width:0;
max-width:none !important;
}
.request-form__privacy span { min-width:0; overflow-wrap:anywhere; }
html.feroxo-lang-cz .request-form__privacy { font-size:12px !important; line-height:1.28 !important; }
/* All arrow controls use exact geometric centering, without optical x-offsets. */
[data-hero-prev]::before, [data-industries-prev]::before, [data-about-industries-prev]::before,
[data-certificate-prev]::before, .product-gallery-v2__arrow--prev::before {
transform:rotate(-135deg) !important;
transform-origin:50% 50% !important;
}
[data-hero-next]::before, [data-industries-next]::before, [data-about-industries-next]::before,
[data-certificate-next]::before, .product-gallery-v2__arrow--next::before {
transform:rotate(45deg) !important;
transform-origin:50% 50% !important;
}
.product-gallery-v2__arrow {
top:50% !important;
transform:translateY(-50%) !important;
display:grid !important;
place-items:center !important;
}
/* Tablet/mobile: stronger layout guarantees for Czech copy and touch controls. */
@media (max-width:900px) {
.page, main, section, article, .inner-content { min-width:0; }
html.feroxo-lang-cz .home-page .latest-news__heading h2 {
font-size:clamp(34px,7vw,56px) !important;
max-width:11ch;
}
html.feroxo-lang-cz .home-page .latest-news__heading a {
min-width:104px !important;
padding-inline:14px !important;
}
html.feroxo-lang-cz .about-page .about-reliability + .about-copy-card {
min-height:0 !important;
padding:32px 22px !important;
}
html.feroxo-lang-cz .about-page .about-reliability + .about-copy-card h2 {
font-size:clamp(42px,8vw,64px) !important;
}
.product-detail-v2 { min-width:0; }
.product-gallery-v2 { min-width:0; padding-inline:4px; }
.product-gallery-v2__arrow { width:42px !important; height:42px !important; }
.product-gallery-v2__arrow--prev { left:10px !important; }
.product-gallery-v2__arrow--next { right:10px !important; }
}
@media (max-width:760px) {
:root { --feroxo-v423-pad:16px; }
.inner-content, .article-content, .about-main { width:calc(100% - 20px) !important; max-width:none !important; }
.site-header__actions { gap:7px !important; min-height:34px; }
.site-header__actions .language__button { width:34px !important; height:34px !important; min-width:34px !important; }
.site-header__actions .request-button,
html.feroxo-lang-cz .site-header__actions .request-button {
width:auto !important;
min-width:116px !important;
height:34px !important;
padding-inline:12px !important;
font-size:11px !important;
}
.site-header.is-menu-open .site-nav { grid-template-columns:1fr 1fr !important; }
/* On phones, collapsed strength tabs become horizontal — readable, centered and touch friendly. */
.home-page .strength-card:not(.is-active) {
height:74px !important;
min-height:74px !important;
}
.home-page .strength-card:not(.is-active) .strength-card__tab-label {
writing-mode:horizontal-tb !important;
transform:none !important;
inset:0 14px !important;
height:74px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
padding:0 8px !important;
text-align:center !important;
font-size:16px !important;
line-height:1.06 !important;
text-wrap:balance;
}
html.feroxo-lang-cz .home-page .strength-card:not(.is-active) .strength-card__tab-label {
font-size:14px !important;
}
html.feroxo-lang-cz .home-page .strength-card.is-active {
min-height:340px !important;
height:auto !important;
}
html.feroxo-lang-cz .home-page .strength-card.is-active .strength-card__content {
left:18px !important;
right:18px !important;
bottom:18px !important;
}
html.feroxo-lang-cz .home-page .strength-card.is-active .strength-card__content h2 {
font-size:clamp(22px,6.5vw,29px) !important;
line-height:1.04 !important;
}
html.feroxo-lang-cz .home-page .strength-card.is-active .strength-card__content p {
max-width:100% !important;
font-size:14px !important;
line-height:1.3 !important;
}
.home-page .latest-news__heading,
html.feroxo-lang-cz .home-page .latest-news__heading {
grid-template-columns:minmax(0,1fr) auto !important;
gap:10px !important;
margin-bottom:14px !important;
}
.home-page .latest-news__heading h2,
html.feroxo-lang-cz .home-page .latest-news__heading h2 {
font-size:clamp(30px,9vw,40px) !important;
line-height:.92 !important;
max-width:10ch;
}
.home-page .latest-news__heading a,
html.feroxo-lang-cz .home-page .latest-news__heading a {
width:auto !important;
min-width:0 !important;
height:auto !important;
min-height:36px !important;
padding:8px 13px !important;
font-size:12px !important;
}
.home-page .latest-news__feature { min-height:310px !important; }
.home-page .latest-news__feature > span,
html.feroxo-lang-cz .home-page .latest-news__feature > span {
left:18px !important;
right:18px !important;
bottom:18px !important;
font-size:clamp(23px,7vw,30px) !important;
}
.home-page .latest-news__stack { grid-template-rows:repeat(3,168px) !important; }
.home-page .latest-news__stack a > span,
html.feroxo-lang-cz .home-page .latest-news__stack a > span {
left:16px !important;
right:16px !important;
bottom:16px !important;
top:auto !important;
font-size:clamp(17px,5vw,22px) !important;
}
/* Product pages and form controls become one clean column on phones. */
.product-detail-v2 { grid-template-columns:1fr !important; gap:22px !important; }
.product-gallery-v2__main { min-height:300px !important; padding:12px !important; }
.product-gallery-v2__main img { max-height:280px !important; }
.product-gallery-v2__arrow { width:38px !important; height:38px !important; }
.product-gallery-v2__arrow--prev { left:8px !important; }
.product-gallery-v2__arrow--next { right:8px !important; }
.product-side-v2 { position:static !important; width:100% !important; }
.technical-specs--figma { overflow:hidden; }
.technical-specs--figma > div { min-width:0; }
.documents-grid, .equipment-detail__grid, .related-section .product-grid { grid-template-columns:1fr !important; }
.request-form__bottom { display:grid !important; grid-template-columns:1fr !important; gap:12px !important; }
.request-form__bottom > button { width:100% !important; }
.request-form__privacy { flex:none !important; width:100%; }
}
@media (max-width:420px) {
.site-header.is-menu-open .site-nav { grid-template-columns:1fr !important; }
.site-header__actions .request-button,
html.feroxo-lang-cz .site-header__actions .request-button { min-width:104px !important; padding-inline:10px !important; }
html.feroxo-lang-cz .home-page .latest-news__heading h2 { font-size:clamp(28px,8.5vw,36px) !important; }
html.feroxo-lang-cz .about-page .about-reliability + .about-copy-card h2 { font-size:clamp(38px,11vw,52px) !important; }
}
/* FEROXO_LAYOUT_V4_2_4_2026_08_24 */
/* Remaining QA: request modal/footer copy, About CZ hero collision, Service request footer. */
.request-modal .modal__box {
aspect-ratio: auto !important;
min-height: clamp(560px, 40vw, 680px) !important;
height: auto !important;
padding-bottom: clamp(92px, 7vw, 126px) !important;
overflow: visible !important;
}
.request-modal .request-form {
min-width: 0 !important;
display: flex !important;
flex-direction: column !important;
}
.request-modal .request-form__bottom {
position: static !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
width: 100% !important;
display: grid !important;
grid-template-columns: max-content minmax(0, 1fr) !important;
align-items: center !important;
gap: clamp(16px, 2vw, 34px) !important;
margin: clamp(18px, 1.8vw, 28px) 0 0 !important;
}
.request-modal .request-form__bottom > button {
width: auto !important;
min-width: 184px !important;
height: auto !important;
min-height: 50px !important;
padding: 10px 24px !important;
white-space: normal !important;
text-align: center !important;
line-height: 1.05 !important;
}
.request-modal .request-form__privacy {
display: block !important;
width: min(100%, 560px) !important;
max-width: 560px !important;
min-width: 0 !important;
margin: 0 !important;
align-self: center !important;
white-space: normal !important;
overflow-wrap: break-word !important;
line-height: 1.25 !important;
}
.request-modal .request-form__privacy span {
display: block !important;
width: 100% !important;
min-width: 0 !important;
white-space: normal !important;
overflow-wrap: break-word !important;
}
@media (min-width: 761px) {
.feroxo-lang-cz .about-page .about-hero {
min-height: clamp(410px, 29vw, 560px) !important;
height: auto !important;
}
.feroxo-lang-cz .about-page .about-hero__title {
top: clamp(82px, 7vw, 124px) !important;
bottom: auto !important;
left: clamp(28px, 2.1vw, 40px) !important;
max-width: min(62%, 880px) !important;
font-size: clamp(58px, 6vw, 106px) !important;
line-height: .82 !important;
letter-spacing: -.052em !important;
overflow-wrap: normal !important;
word-break: normal !important;
}
.feroxo-lang-cz .about-page .about-hero__copy {
left: clamp(30px, 2.2vw, 42px) !important;
right: auto !important;
bottom: clamp(28px, 2vw, 40px) !important;
width: min(58%, 820px) !important;
max-width: min(58%, 820px) !important;
font-size: clamp(15px, 1.25vw, 22px) !important;
line-height: 1.18 !important;
}
}
.service-request-card {
height: auto !important;
min-height: clamp(610px, 41vw, 720px) !important;
padding-bottom: clamp(116px, 8vw, 142px) !important;
}
.service-request-form { min-width: 0 !important; }
.service-request-form__bottom {
left: 55px !important;
right: 55px !important;
bottom: 26px !important;
width: auto !important;
display: grid !important;
grid-template-columns: max-content minmax(0, 1fr) !important;
align-items: center !important;
gap: 18px !important;
}
.service-request-form__bottom button {
width: auto !important;
min-width: 216px !important;
height: auto !important;
min-height: 60px !important;
padding: 10px 22px !important;
white-space: normal !important;
line-height: 1.05 !important;
}
.service-request-form__bottom p {
width: min(100%, 640px) !important;
max-width: 640px !important;
min-width: 0 !important;
white-space: normal !important;
overflow-wrap: break-word !important;
line-height: 1.24 !important;
}
@media (max-width: 1100px) {
.request-modal .modal__box {
width: min(94vw, 820px) !important;
min-height: 0 !important;
padding: 54px 34px 42px !important;
grid-template-columns: 1fr !important;
gap: 32px !important;
background: #FAFAFA !important;
border: 1px solid rgba(13,2,2,.85) !important;
border-radius: 24px !important;
overflow-y: auto !important;
}
.request-modal .request-form__bottom {
grid-template-columns: max-content minmax(0,1fr) !important;
}
.service-request-card { padding-bottom: 132px !important; }
.service-request-form__bottom {
left: 24px !important;
right: 24px !important;
bottom: 28px !important;
}
}
@media (max-width: 760px) {
.request-modal .modal__box {
width: calc(100vw - 20px) !important;
max-height: calc(100svh - 20px) !important;
margin: 10px auto !important;
padding: 56px 18px 24px !important;
border-radius: 18px !important;
}
.request-modal .request-modal__intro h2 {
font-size: clamp(42px, 14vw, 58px) !important;
line-height: .88 !important;
}
.request-modal .request-form__bottom {
grid-template-columns: 1fr !important;
gap: 10px !important;
margin-top: 16px !important;
}
.request-modal .request-form__bottom > button {
width: 100% !important;
min-width: 0 !important;
}
.request-modal .request-form__privacy {
width: 100% !important;
max-width: none !important;
font-size: 12px !important;
line-height: 1.3 !important;
}
.about-page .about-hero,
.feroxo-lang-cz .about-page .about-hero {
height: auto !important;
min-height: 420px !important;
}
.about-page .about-hero__title,
.feroxo-lang-cz .about-page .about-hero__title {
top: 92px !important;
left: 18px !important;
right: 18px !important;
bottom: auto !important;
max-width: calc(100% - 36px) !important;
font-size: clamp(45px, 13vw, 66px) !important;
line-height: .84 !important;
}
.about-page .about-hero__copy,
.feroxo-lang-cz .about-page .about-hero__copy {
left: 18px !important;
right: 18px !important;
bottom: 22px !important;
width: auto !important;
max-width: none !important;
font-size: 13px !important;
line-height: 1.22 !important;
}
.service-request-card {
width: calc(100vw - 20px) !important;
min-height: 0 !important;
height: auto !important;
padding: 28px 18px 24px !important;
border: 1px solid #0D0202 !important;
border-radius: 18px !important;
overflow-y: auto !important;
}
.service-request-card__outline { display: none !important; }
.service-request-form__bottom {
position: static !important;
width: 100% !important;
display: grid !important;
grid-template-columns: 1fr !important;
gap: 10px !important;
margin-top: 16px !important;
}
.service-request-form__bottom button {
width: 100% !important;
min-width: 0 !important;
}
.service-request-form__bottom p {
width: 100% !important;
max-width: none !important;
font-size: 12px !important;
line-height: 1.3 !important;
}
}
/* FEROXO_MOBILE_FINAL_V4_2_5_2026_08_24
Final mobile/header/arrow QA. This layer intentionally overrides older
experimental mobile rules without changing desktop compositions. */
/* ---------------------------------------------------------------------
1. Every circular slider arrow uses the same centered geometry.
--------------------------------------------------------------------- */
:where(
[data-hero-prev],[data-hero-next],
[data-industries-prev],[data-industries-next],
[data-about-industries-prev],[data-about-industries-next],
[data-certificate-prev],[data-certificate-next],
.product-gallery-v2__arrow,
.product-slider-row__arrow,
.industries__control,
.latest-news__arrow,
.feroxo-arrow-control
) {
position: relative;
display: grid !important;
place-items: center !important;
padding: 0 !important;
text-indent: 0 !important;
line-height: 0 !important;
}
:where(
[data-hero-prev],[data-hero-next],
[data-industries-prev],[data-industries-next],
[data-about-industries-prev],[data-about-industries-next],
[data-certificate-prev],[data-certificate-next],
.product-gallery-v2__arrow--prev,.product-gallery-v2__arrow--next
)::before {
position: absolute !important;
top: 50% !important;
left: 50% !important;
width: 10px !important;
height: 10px !important;
margin: 0 !important;
box-sizing: border-box !important;
transform-origin: 50% 50% !important;
}
:where(
[data-hero-prev],[data-industries-prev],[data-about-industries-prev],
[data-certificate-prev],.product-gallery-v2__arrow--prev
)::before {
transform: translate(-43%, -50%) rotate(-135deg) !important;
}
:where(
[data-hero-next],[data-industries-next],[data-about-industries-next],
[data-certificate-next],.product-gallery-v2__arrow--next
)::before {
transform: translate(-57%, -50%) rotate(45deg) !important;
}
.product-gallery-v2__arrow { top: 50% !important; transform: translateY(-50%) !important; }
/* Glyph-based fallback controls: optical center, not baseline center. */
.product-slider-row__arrow,
.industries__control,
.latest-news__arrow,
.feroxo-arrow-control {
font-family: Arial, sans-serif !important;
text-align: center !important;
}
.feroxo-arrow-control::before {
line-height: 1 !important;
display: block !important;
transform: translateY(-1px) !important;
}
/* ---------------------------------------------------------------------
2. One mobile header everywhere.
--------------------------------------------------------------------- */
@media (max-width: 760px) {
body .site-header,
body .inner-top .site-header,
body .article-top .site-header,
body .detail-top .site-header,
body .product-list-top .site-header,
body .service-top .site-header,
body .contact-top .site-header {
position: absolute !important;
top: 0 !important;
left: 10px !important;
right: auto !important;
width: calc(100% - 20px) !important;
height: 62px !important;
min-height: 62px !important;
padding: 0 12px !important;
display: flex !important;
align-items: center !important;
flex-wrap: nowrap !important;
gap: 0 !important;
border-radius: 0 0 16px 16px !important;
background: #FAFAFA !important;
z-index: 1000 !important;
box-sizing: border-box !important;
}
body .site-header__logo {
display: flex !important;
align-items: center !important;
flex: 0 0 auto !important;
margin: 0 !important;
}
body .site-header__logo img {
display: block !important;
width: 76px !important;
height: auto !important;
max-height: 26px !important;
}
body .site-header__actions {
order: 2 !important;
margin: 0 0 0 auto !important;
display: flex !important;
align-items: center !important;
flex: 0 0 auto !important;
gap: 6px !important;
}
body .language {
position: relative !important;
flex: 0 0 auto !important;
}
body .language__button {
width: 30px !important;
height: 30px !important;
min-width: 30px !important;
min-height: 30px !important;
padding: 0 !important;
}
body .language__button > img {
width: 30px !important;
height: 30px !important;
max-width: 30px !important;
max-height: 30px !important;
object-fit: contain !important;
}
body .request-button {
width: auto !important;
min-width: 88px !important;
max-width: 116px !important;
height: 30px !important;
min-height: 30px !important;
padding: 0 10px !important;
font-size: 10px !important;
line-height: 1.05 !important;
white-space: nowrap !important;
flex: 0 0 auto !important;
}
html.feroxo-lang-cz body .request-button {
min-width: 96px !important;
max-width: 122px !important;
}
body .site-menu-toggle {
order: 3 !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
flex: 0 0 32px !important;
width: 32px !important;
height: 32px !important;
margin: 0 0 0 4px !important;
padding: 0 !important;
gap: 4px !important;
border: 0 !important;
background: transparent !important;
cursor: pointer !important;
}
body .site-menu-toggle span {
display: block !important;
width: 18px !important;
height: 2px !important;
flex: 0 0 2px !important;
margin: 0 !important;
background: #0D0202 !important;
border-radius: 999px !important;
}
body .site-nav {
position: absolute !important;
top: 62px !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
max-height: calc(100svh - 76px) !important;
overflow-y: auto !important;
margin: 0 !important;
padding: 10px 12px 12px !important;
display: none !important;
grid-template-columns: 1fr !important;
gap: 0 !important;
border-radius: 0 0 16px 16px !important;
background: #FAFAFA !important;
box-shadow: 0 16px 30px rgba(13,2,2,.14) !important;
z-index: 1001 !important;
}
body .site-header.is-menu-open {
border-radius: 0 !important;
}
body .site-header.is-menu-open .site-nav {
display: grid !important;
}
body .site-nav__link,
body .site-header.is-menu-open .site-nav__link {
display: block !important;
width: 100% !important;
padding: 11px 8px !important;
border-bottom: 1px solid rgba(13,2,2,.08) !important;
font-size: 14px !important;
font-weight: 600 !important;
line-height: 1.15 !important;
white-space: normal !important;
}
body .site-nav__link:last-child { border-bottom: 0 !important; }
/* Language dropdown / flags: lock actual flag dimensions. */
body .language__menu {
top: 36px !important;
right: 0 !important;
min-width: 146px !important;
width: 146px !important;
padding: 6px !important;
border-radius: 12px !important;
z-index: 1100 !important;
}
body .language__menu button {
width: 100% !important;
min-height: 34px !important;
padding: 7px 8px !important;
display: flex !important;
align-items: center !important;
gap: 8px !important;
font-size: 12px !important;
line-height: 1 !important;
}
body .language__menu .language__flag,
body .language__menu button img.language__flag {
display: block !important;
flex: 0 0 22px !important;
width: 22px !important;
height: 15px !important;
min-width: 22px !important;
min-height: 15px !important;
max-width: 22px !important;
max-height: 15px !important;
object-fit: cover !important;
border-radius: 2px !important;
}
}
@media (max-width: 360px) {
body .site-header { padding-inline: 9px !important; }
body .site-header__logo img { width: 68px !important; }
body .site-header__actions { gap: 4px !important; }
body .request-button { min-width: 82px !important; max-width: 94px !important; padding-inline: 7px !important; font-size: 9px !important; }
html.feroxo-lang-cz body .request-button { min-width: 90px !important; max-width: 102px !important; }
body .site-menu-toggle { flex-basis: 28px !important; width: 28px !important; margin-left: 2px !important; }
}
/* ---------------------------------------------------------------------
3. Request modal rebuilt for a phone instead of shrinking the desktop SVG.
--------------------------------------------------------------------- */
@media (max-width: 760px) {
body .request-modal {
padding: 10px !important;
align-items: flex-start !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
}
body .request-modal .modal__box,
body .request-modal__dialog,
body .request-modal__content {
width: 100% !important;
max-width: 520px !important;
min-height: 0 !important;
height: auto !important;
max-height: none !important;
aspect-ratio: auto !important;
margin: 0 auto !important;
padding: 54px 16px 22px !important;
display: block !important;
border: 1px solid rgba(13,2,2,.72) !important;
border-radius: 18px !important;
background: #FAFAFA !important;
box-shadow: 0 18px 50px rgba(0,0,0,.3) !important;
overflow: visible !important;
container-type: normal !important;
}
body .request-modal .modal__box::before,
body .request-modal .modal__box::after { display: none !important; content: none !important; }
body .request-modal .modal__close {
position: absolute !important;
top: 12px !important;
right: 12px !important;
width: 32px !important;
height: 32px !important;
min-width: 32px !important;
min-height: 32px !important;
font-size: 20px !important;
line-height: 1 !important;
z-index: 3 !important;
}
body .request-modal__intro {
width: 100% !important;
margin: 0 0 24px !important;
}
body .request-modal__intro h2 {
margin: 0 !important;
font-size: clamp(42px, 13vw, 58px) !important;
line-height: .84 !important;
letter-spacing: -.055em !important;
}
body .request-modal__intro p {
margin: 12px 0 0 !important;
max-width: none !important;
font-size: 13px !important;
line-height: 1.24 !important;
}
body .request-modal .request-form,
body .request-modal .request-form__grid {
width: 100% !important;
min-width: 0 !important;
}
body .request-modal .request-form__grid {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 8px !important;
}
body .request-modal .request-form input,
body .request-modal .request-form textarea {
width: 100% !important;
min-width: 0 !important;
min-height: 46px !important;
padding-inline: 15px !important;
font-size: 14px !important;
border-radius: 12px !important;
}
body .request-modal .request-form textarea {
min-height: 110px !important;
height: 110px !important;
padding: 13px 15px !important;
}
body .request-modal .request-form__equipment {
position: relative !important;
width: 100% !important;
min-width: 0 !important;
min-height: 112px !important;
margin-top: 8px !important;
padding: 20px 12px 12px !important;
display: grid !important;
grid-template-columns: 1fr !important;
gap: 8px !important;
border-radius: 12px !important;
}
body .request-modal .request-form__equipment > span {
top: -7px !important;
left: 12px !important;
font-size: 11px !important;
}
body .request-modal .request-form__equipment em {
position: static !important;
width: 100% !important;
max-width: none !important;
font-size: 12px !important;
line-height: 1.2 !important;
text-align: left !important;
}
body .request-modal .request-form__equipment a {
width: 100% !important;
min-width: 0 !important;
min-height: 38px !important;
}
body .request-modal .request-form__bottom {
position: static !important;
width: 100% !important;
margin: 12px 0 0 !important;
display: grid !important;
grid-template-columns: 1fr !important;
gap: 10px !important;
}
body .request-modal .request-form__bottom > button {
width: 100% !important;
min-width: 0 !important;
min-height: 46px !important;
padding: 9px 14px !important;
font-size: 14px !important;
}
body .request-modal .request-form__privacy {
display: grid !important;
grid-template-columns: 16px minmax(0,1fr) !important;
gap: 8px !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
margin: 0 !important;
font-size: 11px !important;
line-height: 1.28 !important;
}
body .request-modal .request-form__privacy input {
width: 16px !important;
height: 16px !important;
min-height: 16px !important;
margin: 1px 0 0 !important;
padding: 0 !important;
}
body .request-modal .request-form__privacy span {
min-width: 0 !important;
white-space: normal !important;
overflow-wrap: break-word !important;
}
}
/* ---------------------------------------------------------------------
4. Home blocks: prevent text crops and make news cards readable.
--------------------------------------------------------------------- */
@media (max-width: 760px) {
.home-page .built-industry__text-panel {
height: auto !important;
min-height: 310px !important;
padding: 24px 18px 76px !important;
}
.home-page .built-industry__content {
position: static !important;
width: 100% !important;
transform: none !important;
}
.home-page .built-industry__content h2 {
margin: 0 !important;
font-size: clamp(30px, 9vw, 40px) !important;
line-height: .94 !important;
text-align: center !important;
}
.home-page .built-industry__content p {
margin: 12px auto 0 !important;
max-width: 340px !important;
font-size: 13px !important;
line-height: 1.28 !important;
text-align: center !important;
}
.home-page .built-industry__button {
left: 50% !important;
right: auto !important;
bottom: 16px !important;
transform: translateX(-50%) !important;
width: auto !important;
min-width: 128px !important;
height: 38px !important;
padding-inline: 16px !important;
font-size: 11px !important;
}
.home-page .latest-news__heading {
display: grid !important;
grid-template-columns: minmax(0,1fr) auto !important;
align-items: start !important;
gap: 8px !important;
height: auto !important;
margin-bottom: 12px !important;
}
.home-page .latest-news__heading h2 {
min-width: 0 !important;
font-size: clamp(28px, 8.5vw, 38px) !important;
line-height: .9 !important;
overflow-wrap: normal !important;
}
.home-page .latest-news__heading a {
width: auto !important;
min-width: 72px !important;
height: 34px !important;
padding-inline: 11px !important;
font-size: 10px !important;
}
.home-page .latest-news__grid {
grid-template-columns: 1fr !important;
height: auto !important;
gap: 10px !important;
}
.home-page .latest-news__feature {
min-height: 250px !important;
}
.home-page .latest-news__feature > span {
left: 14px !important;
right: 14px !important;
bottom: 14px !important;
font-size: clamp(20px, 6vw, 27px) !important;
line-height: 1 !important;
}
.home-page .latest-news__stack {
display: grid !important;
grid-template-columns: 1fr !important;
grid-template-rows: none !important;
gap: 10px !important;
}
.home-page .latest-news__stack a {
min-height: 142px !important;
}
.home-page .latest-news__stack a > span {
top: auto !important;
left: 14px !important;
right: 14px !important;
bottom: 14px !important;
font-size: clamp(16px, 4.8vw, 21px) !important;
line-height: 1.03 !important;
overflow-wrap: normal !important;
}
}
/* ---------------------------------------------------------------------
5. About: separate Complete Support from the industries carousel.
--------------------------------------------------------------------- */
@media (max-width: 760px) {
.about-page .about-support--reference {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 10px !important;
margin-top: 18px !important;
overflow: visible !important;
}
.about-page .about-support--reference .about-support__vertical {
order: -1 !important;
min-height: 0 !important;
margin: 0 0 4px !important;
display: block !important;
writing-mode: horizontal-tb !important;
transform: none !important;
text-align: left !important;
font-size: 30px !important;
line-height: .92 !important;
}
.about-page .about-support--reference .about-support__card {
min-height: 210px !important;
padding: 20px !important;
}
.about-page .about-support--reference .about-support__card h3 {
font-size: 21px !important;
line-height: .98 !important;
}
.about-page .about-support--reference .about-support__card p {
font-size: 13px !important;
line-height: 1.3 !important;
}
.about-page .about-industries {
margin-top: 24px !important;
overflow: hidden !important;
}
.about-page .about-industries__title,
.about-page .about-industries h2 {
writing-mode: horizontal-tb !important;
transform: none !important;
font-size: clamp(26px, 8vw, 34px) !important;
line-height: .92 !important;
text-align: left !important;
}
}
/* ---------------------------------------------------------------------
6. Resources mobile cards: image above, readable title, horizontal tags.
--------------------------------------------------------------------- */
@media (max-width: 760px) {
.resources-page .resources-grid {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 12px !important;
}
.resources-page .resource-card {
width: 100% !important;
min-height: 0 !important;
overflow: hidden !important;
}
.resources-page .resource-card > a {
display: grid !important;
grid-template-columns: 1fr !important;
min-height: 0 !important;
height: auto !important;
}
.resources-page .resource-card > a > img,
.resources-page .resource-card img {
width: 100% !important;
height: 180px !important;
min-height: 180px !important;
object-fit: cover !important;
}
.resources-page .resource-card > a > div {
width: 100% !important;
min-width: 0 !important;
padding: 16px !important;
}
.resources-page .resource-card h2 {
margin: 0 !important;
font-size: 22px !important;
line-height: .98 !important;
overflow-wrap: normal !important;
word-break: normal !important;
}
.resources-page .resource-card__tags {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
width: 100% !important;
max-width: none !important;
min-height: 0 !important;
height: auto !important;
margin: 12px 0 10px !important;
gap: 5px !important;
}
.resources-page .resource-card__tags span {
width: auto !important;
min-width: 0 !important;
height: 28px !important;
min-height: 28px !important;
padding: 0 10px !important;
font-size: 9px !important;
white-space: nowrap !important;
overflow: visible !important;
text-overflow: clip !important;
}
.resources-page .resource-card p {
margin: 6px 0 0 !important;
font-size: 10px !important;
line-height: 1.25 !important;
}
}
/* ---------------------------------------------------------------------
7. Product cards / related accessories: reserve image and text separately.
--------------------------------------------------------------------- */
@media (max-width: 760px) {
.products-page .product-grid,
.product-detail-page .product-grid--accessories {
grid-template-columns: 1fr !important;
gap: 12px !important;
}
.products-page .product-card,
.product-detail-page .product-grid--accessories .product-card {
width: 100% !important;
min-height: 0 !important;
height: auto !important;
overflow: hidden !important;
}
.products-page .product-card__image-link,
.product-detail-page .product-grid--accessories .product-card__image-link {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
height: 220px !important;
padding: 14px !important;
overflow: hidden !important;
}
.products-page .product-card__image-link img,
.product-detail-page .product-grid--accessories .product-card__image-link img {
display: block !important;
width: 100% !important;
height: 100% !important;
max-height: 190px !important;
object-fit: contain !important;
transform: none !important;
}
.products-page .product-card__body,
.product-detail-page .product-grid--accessories .product-card__body {
position: relative !important;
width: 100% !important;
min-height: 0 !important;
height: auto !important;
padding: 14px 14px 16px !important;
background: #FAFAFA !important;
}
.products-page .product-card h3,
.product-detail-page .product-grid--accessories .product-card h3 {
margin: 0 !important;
font-size: 20px !important;
line-height: 1 !important;
overflow-wrap: anywhere !important;
}
.products-page .product-card p,
.product-detail-page .product-grid--accessories .product-card p {
margin: 6px 0 10px !important;
min-height: 0 !important;
font-size: 11px !important;
line-height: 1.2 !important;
}
.products-page .product-card dl,
.product-detail-page .product-grid--accessories .product-card dl {
margin: 0 0 12px !important;
padding-top: 8px !important;
font-size: 10px !important;
line-height: 1.15 !important;
}
.products-page .product-card dl div,
.product-detail-page .product-grid--accessories .product-card dl div {
gap: 8px !important;
margin: 5px 0 !important;
}
.products-page .product-card dd,
.product-detail-page .product-grid--accessories .product-card dd {
white-space: normal !important;
text-align: right !important;
}
.products-page .product-card__request,
.product-detail-page .product-grid--accessories .product-card__request {
width: 100% !important;
min-height: 38px !important;
margin-top: auto !important;
}
}
/* ---------------------------------------------------------------------
8. Footer: mobile stacking with copyright in its own row.
--------------------------------------------------------------------- */
@media (max-width: 760px) {
body .site-footer,
body .site-footer.footer--clean2,
body .site-footer.footer--final-locked,
body .home-page .site-footer {
position: relative !important;
display: grid !important;
grid-template-columns: 1fr !important;
width: calc(100% - 20px) !important;
height: auto !important;
min-height: 0 !important;
margin: 24px auto 16px !important;
padding: 24px 18px 54px !important;
gap: 20px !important;
border-radius: 18px !important;
overflow: hidden !important;
}
body .site-footer__brand,
body .site-footer.footer--clean2 .site-footer__brand,
body .site-footer.footer--final-locked .site-footer__brand {
position: static !important;
width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
}
body .site-footer__logo,
body .site-footer.footer--clean2 .site-footer__logo,
body .site-footer.footer--final-locked .site-footer__logo {
width: 138px !important;
max-width: 138px !important;
}
body .site-footer__nav,
body .site-footer.footer--clean2 .site-footer__nav,
body .site-footer.footer--final-locked .site-footer__nav {
position: static !important;
display: grid !important;
grid-template-columns: repeat(2, minmax(0,1fr)) !important;
width: 100% !important;
gap: 20px 16px !important;
margin: 0 !important;
padding: 0 !important;
}
body .site-footer__column,
body .site-footer.footer--clean2 .site-footer__column,
body .site-footer.footer--final-locked .site-footer__column {
min-width: 0 !important;
gap: 5px !important;
}
body .site-footer__column h3,
body .site-footer__column a,
body .site-footer.footer--clean2 .site-footer__column h3,
body .site-footer.footer--clean2 .site-footer__column a,
body .site-footer.footer--final-locked .site-footer__column h3,
body .site-footer.footer--final-locked .site-footer__column a {
font-size: 11px !important;
line-height: 1.15 !important;
}
body .site-footer__socials,
body .site-footer.footer--clean2 .site-footer__socials,
body .site-footer.footer--final-locked .site-footer__socials {
position: static !important;
display: flex !important;
align-items: center !important;
gap: 8px !important;
margin: 0 !important;
}
body .site-footer__socials > a,
body .site-footer.footer--clean2 .site-footer__socials > a,
body .site-footer.footer--final-locked .site-footer__socials > a {
width: 34px !important;
height: 34px !important;
min-width: 34px !important;
min-height: 34px !important;
}
body .site-footer__copy,
body .site-footer.footer--clean2 .site-footer__copy,
body .site-footer.footer--final-locked .site-footer__copy {
position: absolute !important;
left: 18px !important;
right: 18px !important;
bottom: 18px !important;
width: auto !important;
margin: 0 !important;
font-size: 9px !important;
line-height: 1.2 !important;
white-space: normal !important;
}
}
@media (max-width: 390px) {
body .site-footer__nav,
body .site-footer.footer--clean2 .site-footer__nav,
body .site-footer.footer--final-locked .site-footer__nav {
grid-template-columns: 1fr 1fr !important;
gap: 18px 12px !important;
}
}
/* FEROXO_REQUEST_ARROWS_V4_2_6_2026_08_24
Exact QA correction:
- Make Request bottom action/privacy belongs to the free LEFT bottom area.
- Every circular prev/next control uses one centered chevron geometry. */
@media (min-width: 1101px) {
body .request-modal .modal__box {
position: relative !important;
}
body .request-modal .request-form__bottom {
position: absolute !important;
left: calc(96 / 1632 * 100cqw) !important;
right: auto !important;
bottom: calc(68 / 1632 * 100cqw) !important;
width: calc(650 / 1632 * 100cqw) !important;
max-width: calc(650 / 1632 * 100cqw) !important;
display: grid !important;
grid-template-columns: calc(190 / 1632 * 100cqw) minmax(0, 1fr) !important;
align-items: center !important;
column-gap: calc(30 / 1632 * 100cqw) !important;
margin: 0 !important;
transform: none !important;
}
body .request-modal .request-form__bottom > button {
grid-column: 1 !important;
justify-self: stretch !important;
align-self: center !important;
width: 100% !important;
min-width: 0 !important;
height: calc(54 / 1632 * 100cqw) !important;
min-height: 46px !important;
margin: 0 !important;
padding: 8px 16px !important;
transform: none !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
white-space: normal !important;
text-align: center !important;
line-height: 1.02 !important;
}
body .request-modal .request-form__privacy {
grid-column: 2 !important;
position: static !important;
left: auto !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
margin: 0 !important;
align-self: center !important;
transform: none !important;
white-space: normal !important;
overflow-wrap: break-word !important;
line-height: 1.18 !important;
}
body .request-modal .request-form__privacy span {
display: block !important;
width: 100% !important;
min-width: 0 !important;
white-space: normal !important;
overflow-wrap: break-word !important;
}
body .request-modal .request-form {
position: static !important;
min-width: 0 !important;
}
}
@media (min-width: 761px) and (max-width: 1100px) {
body .request-modal .request-form__bottom {
position: static !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
width: 100% !important;
max-width: none !important;
margin: 16px 0 0 !important;
transform: none !important;
display: grid !important;
grid-template-columns: minmax(160px, .42fr) minmax(0, 1fr) !important;
align-items: center !important;
gap: 16px !important;
}
body .request-modal .request-form__bottom > button {
width: 100% !important;
min-width: 0 !important;
transform: none !important;
}
body .request-modal .request-form__privacy {
position: static !important;
left: auto !important;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
}
}
@media (max-width: 760px) {
body .request-modal .request-form__bottom {
position: static !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
width: 100% !important;
max-width: none !important;
display: grid !important;
grid-template-columns: 1fr !important;
gap: 10px !important;
margin: 14px 0 0 !important;
transform: none !important;
}
body .request-modal .request-form__bottom > button {
width: 100% !important;
min-width: 0 !important;
min-height: 46px !important;
margin: 0 !important;
transform: none !important;
}
body .request-modal .request-form__privacy {
position: static !important;
left: auto !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
margin: 0 !important;
transform: none !important;
font-size: 11px !important;
line-height: 1.3 !important;
}
}
/* One arrow geometry everywhere. Reset the previous rotated-corner experiment. */
:where(
.feroxo-arrow-control,
[data-hero-prev],[data-hero-next],
[data-industries-prev],[data-industries-next],
[data-about-industries-prev],[data-about-industries-next],
[data-certificate-prev],[data-certificate-next],
.product-gallery-v2__arrow
) {
display: grid !important;
place-items: center !important;
padding: 0 !important;
text-indent: 0 !important;
line-height: 0 !important;
}
:where(
.feroxo-arrow-control,
[data-hero-prev],[data-hero-next],
[data-industries-prev],[data-industries-next],
[data-about-industries-prev],[data-about-industries-next],
[data-certificate-prev],[data-certificate-next],
.product-gallery-v2__arrow
)::before {
content: "" !important;
position: static !important;
inset: auto !important;
display: block !important;
box-sizing: border-box !important;
width: 9px !important;
height: 9px !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-right: 2px solid currentColor !important;
border-bottom: 2px solid currentColor !important;
font-size: 0 !important;
line-height: 0 !important;
transform-origin: 50% 50% !important;
}
:where(
.feroxo-arrow-prev,
[data-hero-prev],
[data-industries-prev],
[data-about-industries-prev],
[data-certificate-prev],
.product-gallery-v2__arrow--prev
)::before {
transform: rotate(135deg) !important;
}
:where(
.feroxo-arrow-next,
[data-hero-next],
[data-industries-next],
[data-about-industries-next],
[data-certificate-next],
.product-gallery-v2__arrow--next
)::before {
transform: rotate(-45deg) !important;
}
.product-gallery-v2__arrow {
top: 50% !important;
transform: translateY(-50%) !important;
}
.home-page :where(
[data-hero-prev],[data-hero-next],
.hero__side-arrow.feroxo-arrow-control
) {
color: #fff !important;
}
@media (max-width: 760px) {
:where(
.feroxo-arrow-control,
[data-hero-prev],[data-hero-next],
[data-industries-prev],[data-industries-next],
[data-about-industries-prev],[data-about-industries-next],
[data-certificate-prev],[data-certificate-next],
.product-gallery-v2__arrow
)::before {
width: 8px !important;
height: 8px !important;
border-right-width: 2px !important;
border-bottom-width: 2px !important;
}
}
/* FEROXO_FINAL_MOBILE_QA_V4_2_7_2026_08_24
Final focused QA override based on the latest screenshots.
Scope: all circular arrows, Make Request positioning, mobile header/footer,
About industries mobile layout, Make Request privacy copy, Resources tags. */
/* =====================================================================
1) ALL circular slider arrows: use a real chevron glyph.
Reset every older rotated-border experiment first.
===================================================================== */
:where(
[data-hero-prev],[data-hero-next],
[data-industries-prev],[data-industries-next],
[data-about-industries-prev],[data-about-industries-next],
[data-certificate-prev],[data-certificate-next],
.product-gallery-v2__arrow,
.latest-news__arrow,
.product-slider-row__arrow,
.industries__control,
.feroxo-arrow-control
) {
display: grid !important;
place-items: center !important;
padding: 0 !important;
text-align: center !important;
text-indent: 0 !important;
font-size: 0 !important;
line-height: 1 !important;
}
:where(
[data-hero-prev],[data-hero-next],
[data-industries-prev],[data-industries-next],
[data-about-industries-prev],[data-about-industries-next],
[data-certificate-prev],[data-certificate-next],
.product-gallery-v2__arrow,
.latest-news__arrow,
.product-slider-row__arrow,
.industries__control,
.feroxo-arrow-control
)::before {
position: static !important;
inset: auto !important;
display: block !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: none !important;
color: currentColor !important;
font-family: Arial, Helvetica, sans-serif !important;
font-size: 29px !important;
font-weight: 400 !important;
line-height: .72 !important;
letter-spacing: 0 !important;
transform: translateY(-1px) !important;
transform-origin: center !important;
}
:where(
[data-hero-prev],
[data-industries-prev],
[data-about-industries-prev],
[data-certificate-prev],
.product-gallery-v2__arrow--prev,
.latest-news__arrow--prev,
.product-slider-row__arrow--prev,
.feroxo-arrow-prev
)::before { content: "‹" !important; }
:where(
[data-hero-next],
[data-industries-next],
[data-about-industries-next],
[data-certificate-next],
.product-gallery-v2__arrow--next,
.latest-news__arrow--next,
.product-slider-row__arrow--next,
.feroxo-arrow-next
)::before { content: "›" !important; }
.product-gallery-v2__arrow {
top: 50% !important;
transform: translateY(-50%) !important;
}
/* Home hero circles are red: keep the chevron bright white. */
.home-page :where([data-hero-prev],[data-hero-next]) { color: #fff !important; }
/* =====================================================================
2) MAKE REQUEST desktop: keep the whole action/privacy group in the
lower-left decorative notch, but move it a little to the right.
===================================================================== */
@media (min-width: 1101px) {
body .request-modal .modal__box { position: relative !important; }
body .request-modal .request-form__bottom {
position: absolute !important;
left: 8.5% !important;
right: auto !important;
bottom: 7.2% !important;
width: 48% !important;
max-width: 760px !important;
display: grid !important;
grid-template-columns: minmax(180px, 30%) minmax(0, 1fr) !important;
align-items: center !important;
column-gap: clamp(22px, 2vw, 34px) !important;
margin: 0 !important;
transform: none !important;
}
body .request-modal .request-form__bottom > button {
width: 100% !important;
min-width: 0 !important;
min-height: 50px !important;
margin: 0 !important;
padding: 9px 18px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
white-space: normal !important;
text-align: center !important;
line-height: 1.05 !important;
}
body .request-modal .request-form__privacy {
position: static !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
margin: 0 !important;
display: grid !important;
grid-template-columns: 15px minmax(0, 1fr) !important;
align-items: start !important;
gap: 8px !important;
white-space: normal !important;
line-height: 1.2 !important;
}
body .request-modal .request-form__privacy input {
width: 14px !important;
min-width: 14px !important;
height: 14px !important;
min-height: 14px !important;
margin: 1px 0 0 !important;
padding: 0 !important;
}
body .request-modal .request-form__privacy span {
width: auto !important;
min-width: 0 !important;
white-space: normal !important;
word-break: normal !important;
overflow-wrap: normal !important;
}
}
/* =====================================================================
3) One clean mobile header everywhere, with visible space between the
Feroxo logo and the action controls.
===================================================================== */
@media (max-width: 760px) {
body .site-header {
position: absolute !important;
top: 0 !important;
left: 10px !important;
right: auto !important;
width: calc(100% - 20px) !important;
height: 62px !important;
min-height: 62px !important;
padding: 0 12px !important;
display: flex !important;
align-items: center !important;
flex-wrap: nowrap !important;
border-radius: 0 0 16px 16px !important;
background: #FAFAFA !important;
z-index: 1000 !important;
}
body .site-header__logo {
flex: 0 0 auto !important;
margin: 0 12px 0 0 !important;
}
body .site-header__logo img {
display: block !important;
width: 68px !important;
max-width: 68px !important;
height: auto !important;
}
body .site-header__actions {
order: 2 !important;
margin-left: auto !important;
display: flex !important;
align-items: center !important;
gap: 6px !important;
flex: 0 0 auto !important;
}
body .language__button {
width: 28px !important;
height: 28px !important;
min-width: 28px !important;
min-height: 28px !important;
}
body .language__button > img {
width: 28px !important;
height: 28px !important;
max-width: 28px !important;
max-height: 28px !important;
}
body .request-button {
width: auto !important;
min-width: 82px !important;
max-width: 102px !important;
height: 30px !important;
min-height: 30px !important;
padding-inline: 8px !important;
font-size: 9px !important;
white-space: nowrap !important;
}
html.feroxo-lang-cz body .request-button {
min-width: 90px !important;
max-width: 108px !important;
}
body .site-menu-toggle {
flex: 0 0 28px !important;
width: 28px !important;
height: 30px !important;
margin-left: 3px !important;
}
/* Language menu flags can never inherit huge responsive image styles. */
body .language__menu .language__flag,
body .language__menu button img.language__flag {
flex: 0 0 20px !important;
width: 20px !important;
height: 14px !important;
min-width: 20px !important;
min-height: 14px !important;
max-width: 20px !important;
max-height: 14px !important;
object-fit: cover !important;
}
/* ===================================================================
4) Make Request mobile: no narrow one-letter privacy column.
=================================================================== */
body .request-modal .modal__box,
body .request-modal__dialog,
body .request-modal__content {
width: calc(100vw - 20px) !important;
max-width: 520px !important;
min-height: 0 !important;
height: auto !important;
max-height: calc(100svh - 20px) !important;
margin: 10px auto !important;
padding: 52px 16px 20px !important;
overflow-y: auto !important;
overflow-x: hidden !important;
}
body .request-modal .request-form__bottom {
position: static !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
width: 100% !important;
max-width: none !important;
margin: 14px 0 0 !important;
display: grid !important;
grid-template-columns: 1fr !important;
gap: 10px !important;
transform: none !important;
}
body .request-modal .request-form__bottom > button {
width: 100% !important;
min-width: 0 !important;
min-height: 44px !important;
margin: 0 !important;
}
body .request-modal .request-form__privacy {
position: static !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
margin: 0 !important;
display: grid !important;
grid-template-columns: 15px minmax(0, 1fr) !important;
align-items: start !important;
gap: 8px !important;
font-size: 10.5px !important;
line-height: 1.32 !important;
white-space: normal !important;
word-break: normal !important;
overflow-wrap: normal !important;
}
body .request-modal .request-form__privacy input {
display: block !important;
width: 14px !important;
min-width: 14px !important;
max-width: 14px !important;
height: 14px !important;
min-height: 14px !important;
max-height: 14px !important;
margin: 2px 0 0 !important;
padding: 0 !important;
}
body .request-modal .request-form__privacy span {
display: block !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
white-space: normal !important;
word-break: normal !important;
overflow-wrap: normal !important;
}
/* ===================================================================
5) About industries: title and arrows above the image instead of
squeezing a vertical heading behind the carousel.
=================================================================== */
.about-page .about-industries {
display: grid !important;
grid-template-columns: 1fr !important;
grid-template-rows: auto auto !important;
gap: 12px !important;
min-height: 0 !important;
height: auto !important;
margin-top: 24px !important;
overflow: visible !important;
}
.about-page .about-industries__side {
position: relative !important;
width: 100% !important;
min-width: 0 !important;
min-height: 52px !important;
display: flex !important;
flex-direction: row !important;
align-items: flex-end !important;
justify-content: space-between !important;
gap: 12px !important;
}
.about-page .about-industries__side h2 {
width: auto !important;
max-width: calc(100% - 82px) !important;
margin: 0 !important;
writing-mode: horizontal-tb !important;
transform: none !important;
font-size: clamp(26px, 8vw, 34px) !important;
line-height: .9 !important;
text-align: left !important;
overflow-wrap: normal !important;
word-break: normal !important;
}
.about-page .about-industries__controls {
position: static !important;
left: auto !important;
bottom: auto !important;
transform: none !important;
flex: 0 0 auto !important;
display: flex !important;
gap: 6px !important;
margin: 0 0 2px !important;
}
.about-page .about-industries__controls button {
width: 30px !important;
height: 30px !important;
min-width: 30px !important;
min-height: 30px !important;
}
.about-page .about-industries__viewport {
width: 100% !important;
height: 300px !important;
min-height: 300px !important;
overflow: hidden !important;
border-radius: 16px !important;
}
.about-page .about-industries__track {
width: 100% !important;
height: 100% !important;
gap: 10px !important;
}
.about-page .about-industries__track article {
flex: 0 0 100% !important;
width: 100% !important;
min-width: 100% !important;
height: 100% !important;
border-radius: 16px !important;
}
/* ===================================================================
6) Resources tags: real horizontal wrap, left aligned.
style.css has a generic .resource-card div flex-direction:column;
which was forcing this tag DIV into a vertical stack.
=================================================================== */
.resources-page .resource-card__tags {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
justify-content: flex-start !important;
align-items: center !important;
align-content: flex-start !important;
width: 100% !important;
max-width: none !important;
height: auto !important;
min-height: 0 !important;
margin: 12px 0 10px !important;
gap: 6px !important;
}
.resources-page .resource-card__tags span {
flex: 0 0 auto !important;
width: auto !important;
min-width: 0 !important;
height: 27px !important;
min-height: 27px !important;
padding: 0 10px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 9px !important;
line-height: 1 !important;
white-space: nowrap !important;
overflow: visible !important;
text-overflow: clip !important;
}
/* ===================================================================
7) Footer: copyright becomes its own normal row below socials/nav.
=================================================================== */
body .site-footer,
body .site-footer.footer--clean2,
body .site-footer.footer--final-locked,
body .home-page .site-footer {
padding-bottom: 24px !important;
overflow: visible !important;
}
body .site-footer__copy,
body .site-footer.footer--clean2 .site-footer__copy,
body .site-footer.footer--final-locked .site-footer__copy {
position: static !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
width: 100% !important;
margin: 10px 0 0 !important;
padding-top: 6px !important;
grid-column: 1 / -1 !important;
font-size: 9px !important;
line-height: 1.25 !important;
white-space: normal !important;
}
}
@media (max-width: 360px) {
body .site-header__logo { margin-right: 8px !important; }
body .site-header__logo img { width: 62px !important; max-width: 62px !important; }
body .site-header__actions { gap: 4px !important; }
body .request-button { min-width: 76px !important; max-width: 88px !important; font-size: 8.5px !important; }
html.feroxo-lang-cz body .request-button { min-width: 84px !important; max-width: 94px !important; }
body .site-menu-toggle { flex-basis: 26px !important; width: 26px !important; }
.about-page .about-industries__side h2 {
font-size: 25px !important;
max-width: calc(100% - 74px) !important;
}
.about-page .about-industries__viewport {
height: 270px !important;
min-height: 270px !important;
}
}
/* FEROXO_ARROWS_V4_2_8_2026_08_24
Final arrow correction:
use true typographic chevrons ‹ and ›,
keep them perfectly centered in the circle,
and explicitly force correct direction with no rotate tricks. */
:where(
.feroxo-arrow-control,
[data-hero-prev],[data-hero-next],
[data-industries-prev],[data-industries-next],
[data-about-industries-prev],[data-about-industries-next],
[data-certificate-prev],[data-certificate-next],
.product-gallery-v2__arrow
) {
display: grid !important;
place-items: center !important;
text-indent: 0 !important;
line-height: 0 !important;
padding: 0 !important;
}
:where(
.feroxo-arrow-control,
[data-hero-prev],[data-hero-next],
[data-industries-prev],[data-industries-next],
[data-about-industries-prev],[data-about-industries-next],
[data-certificate-prev],[data-certificate-next],
.product-gallery-v2__arrow
)::before {
position: static !important;
inset: auto !important;
display: block !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
transform: none !important;
font-family: Arial, Helvetica, sans-serif !important;
font-weight: 700 !important;
font-size: 28px !important;
line-height: 1 !important;
color: currentColor !important;
}
:where(
.feroxo-arrow-prev,
[data-hero-prev],
[data-industries-prev],
[data-about-industries-prev],
[data-certificate-prev],
.product-gallery-v2__arrow--prev
)::before {
content: "‹" !important;
transform: translateX(-1px) !important;
}
:where(
.feroxo-arrow-next,
[data-hero-next],
[data-industries-next],
[data-about-industries-next],
[data-certificate-next],
.product-gallery-v2__arrow--next
)::before {
content: "›" !important;
transform: translateX(1px) !important;
}
@media (max-width: 760px) {
:where(
.feroxo-arrow-control,
[data-hero-prev],[data-hero-next],
[data-industries-prev],[data-industries-next],
[data-about-industries-prev],[data-about-industries-next],
[data-certificate-prev],[data-certificate-next],
.product-gallery-v2__arrow
)::before {
font-size: 24px !important;
}
}
:where(
.hero__side-arrow,
[data-hero-prev],[data-hero-next]
) {
color: #fff !important;
}
/* FEROXO_REQUEST_HEADER_V4_2_9_2026_08_24
Final QA correction requested after V4.2.8:
- Desktop Make Request action uses the decorative notch correctly.
- Privacy copy stays horizontal and immediately to the right of the button.
- Every mobile page uses the same compact header geometry as Home,
with a little more breathing room between language, request and burger. */
/* =====================================================================
MAKE REQUEST DESKTOP
===================================================================== */
@media (min-width: 1101px) {
body .request-modal .modal__box {
position: relative !important;
}
body .request-modal .request-form__bottom {
position: absolute !important;
left: clamp(118px, 8.5vw, 136px) !important;
right: auto !important;
bottom: clamp(48px, 3.7vw, 60px) !important;
width: min(720px, 49vw) !important;
max-width: none !important;
min-width: 650px !important;
display: grid !important;
grid-template-columns: 220px 400px !important;
align-items: center !important;
justify-content: start !important;
column-gap: 28px !important;
margin: 0 !important;
padding: 0 !important;
transform: none !important;
}
body .request-modal .request-form__bottom > button {
grid-column: 1 !important;
grid-row: 1 !important;
width: 220px !important;
min-width: 220px !important;
max-width: 220px !important;
height: 50px !important;
min-height: 50px !important;
margin: 0 !important;
padding: 0 18px !important;
transform: none !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
white-space: normal !important;
text-align: center !important;
font-size: 15px !important;
line-height: 1.05 !important;
}
body .request-modal .request-form__privacy {
grid-column: 2 !important;
grid-row: 1 !important;
position: static !important;
left: auto !important;
right: auto !important;
top: auto !important;
bottom: auto !important;
display: block !important;
width: 400px !important;
min-width: 400px !important;
max-width: 400px !important;
margin: 0 !important;
padding: 0 !important;
transform: none !important;
white-space: normal !important;
word-break: normal !important;
overflow-wrap: normal !important;
writing-mode: horizontal-tb !important;
color: rgba(13,2,2,.88) !important;
font-size: 12px !important;
line-height: 1.22 !important;
}
body .request-modal .request-form__privacy input {
display: none !important;
}
body .request-modal .request-form__privacy span {
display: block !important;
width: 400px !important;
min-width: 400px !important;
max-width: 400px !important;
margin: 0 !important;
padding: 0 !important;
white-space: normal !important;
word-break: normal !important;
overflow-wrap: normal !important;
writing-mode: horizontal-tb !important;
}
}
/* Tablet: keep the footer in flow instead of forcing desktop notch geometry. */
@media (min-width: 761px) and (max-width: 1100px) {
body .request-modal .request-form__bottom {
position: static !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
display: grid !important;
grid-template-columns: minmax(170px, 220px) minmax(0, 1fr) !important;
align-items: center !important;
gap: 18px !important;
margin: 18px 0 0 !important;
transform: none !important;
}
body .request-modal .request-form__bottom > button {
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
transform: none !important;
}
body .request-modal .request-form__privacy,
body .request-modal .request-form__privacy span {
position: static !important;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
margin: 0 !important;
white-space: normal !important;
word-break: normal !important;
overflow-wrap: normal !important;
writing-mode: horizontal-tb !important;
}
}
/* Phone: stack safely; never allow one-letter-per-line privacy copy. */
@media (max-width: 760px) {
body .request-modal .request-form__bottom {
position: static !important;
left: auto !important;
right: auto !important;
top: auto !important;
bottom: auto !important;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
display: grid !important;
grid-template-columns: 1fr !important;
gap: 10px !important;
margin: 14px 0 0 !important;
padding: 0 !important;
transform: none !important;
}
body .request-modal .request-form__bottom > button {
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
min-height: 46px !important;
margin: 0 !important;
transform: none !important;
}
body .request-modal .request-form__privacy,
body .request-modal .request-form__privacy span {
position: static !important;
display: block !important;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
transform: none !important;
white-space: normal !important;
word-break: normal !important;
overflow-wrap: normal !important;
writing-mode: horizontal-tb !important;
font-size: 11px !important;
line-height: 1.3 !important;
}
}
/* =====================================================================
ONE MOBILE HEADER EVERYWHERE — same geometry as Home.
===================================================================== */
@media (max-width: 760px) {
body .site-header,
body .inner-top .site-header,
body .article-top .site-header,
body .detail-top .site-header,
body .home-page .site-header,
body .about-page .site-header {
position: absolute !important;
top: 0 !important;
left: 10px !important;
right: auto !important;
width: calc(100% - 20px) !important;
max-width: none !important;
min-width: 0 !important;
height: 62px !important;
min-height: 62px !important;
display: flex !important;
flex-wrap: nowrap !important;
align-items: center !important;
padding: 0 12px !important;
border-radius: 0 0 16px 16px !important;
transform: none !important;
background: var(--page-bg, #FAFAFA) !important;
}
body .site-header__logo,
body .inner-top .site-header__logo,
body .article-top .site-header__logo,
body .detail-top .site-header__logo {
order: 1 !important;
display: block !important;
flex: 0 0 76px !important;
width: 76px !important;
min-width: 76px !important;
max-width: 76px !important;
margin: 0 auto 0 0 !important;
}
body .site-header__logo img,
body .inner-top .site-header__logo img,
body .article-top .site-header__logo img,
body .detail-top .site-header__logo img {
display: block !important;
width: 76px !important;
min-width: 76px !important;
max-width: 76px !important;
height: auto !important;
}
body .site-header__actions,
body .inner-top .site-header__actions,
body .article-top .site-header__actions,
body .detail-top .site-header__actions {
order: 2 !important;
display: flex !important;
flex: 0 0 auto !important;
align-items: center !important;
gap: 12px !important;
margin: 0 !important;
}
body .site-header .language__button,
body .inner-top .language__button,
body .article-top .language__button,
body .detail-top .language__button {
width: 32px !important;
min-width: 32px !important;
height: 32px !important;
min-height: 32px !important;
}
body .site-header .request-button,
body .inner-top .request-button,
body .article-top .request-button,
body .detail-top .request-button {
width: auto !important;
min-width: 92px !important;
max-width: 110px !important;
height: 32px !important;
min-height: 32px !important;
padding: 0 11px !important;
font-size: 10px !important;
white-space: nowrap !important;
}
body .site-menu-toggle,
body .inner-top .site-menu-toggle,
body .article-top .site-menu-toggle,
body .detail-top .site-menu-toggle {
order: 3 !important;
display: flex !important;
flex: 0 0 34px !important;
width: 34px !important;
min-width: 34px !important;
height: 34px !important;
min-height: 34px !important;
margin: 0 0 0 12px !important;
}
body .site-nav,
body .inner-top .site-nav,
body .article-top .site-nav,
body .detail-top .site-nav {
order: 4 !important;
}
body .site-header.is-menu-open,
body .inner-top .site-header.is-menu-open,
body .article-top .site-header.is-menu-open,
body .detail-top .site-header.is-menu-open {
flex-wrap: wrap !important;
height: auto !important;
min-height: 62px !important;
padding-bottom: 12px !important;
}
body .site-header.is-menu-open .site-nav,
body .inner-top .site-header.is-menu-open .site-nav,
body .article-top .site-header.is-menu-open .site-nav,
body .detail-top .site-header.is-menu-open .site-nav {
position: static !important;
display: grid !important;
width: 100% !important;
grid-template-columns: 1fr 1fr !important;
gap: 0 14px !important;
margin: 10px 0 0 !important;
padding: 8px 0 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
}
/* Very narrow phones: preserve the same order without collisions. */
@media (max-width: 360px) {
body .site-header__logo,
body .inner-top .site-header__logo,
body .article-top .site-header__logo,
body .detail-top .site-header__logo,
body .site-header__logo img,
body .inner-top .site-header__logo img,
body .article-top .site-header__logo img,
body .detail-top .site-header__logo img {
width: 68px !important;
min-width: 68px !important;
max-width: 68px !important;
flex-basis: 68px !important;
}
body .site-header__actions,
body .inner-top .site-header__actions,
body .article-top .site-header__actions,
body .detail-top .site-header__actions {
gap: 9px !important;
}
body .site-header .request-button,
body .inner-top .request-button,
body .article-top .request-button,
body .detail-top .request-button {
min-width: 86px !important;
max-width: 96px !important;
padding-inline: 8px !important;
font-size: 9px !important;
}
body .site-menu-toggle,
body .inner-top .site-menu-toggle,
body .article-top .site-menu-toggle,
body .detail-top .site-menu-toggle {
margin-left: 9px !important;
}
}
/* FEROXO_ARROW_RENDER_V4_3_0_2026_08_24
Actual DOM glyphs win over every legacy pseudo-arrow layer.
Direction is literal: previous = ‹, next = ›. No rotation. */
:where(
.feroxo-arrow-control,
[data-hero-prev],[data-hero-next],
[data-industries-prev],[data-industries-next],
[data-about-industries-prev],[data-about-industries-next],
[data-certificate-prev],[data-certificate-next],
.product-gallery-v2__arrow
) {
display: grid !important;
place-items: center !important;
padding: 0 !important;
text-indent: 0 !important;
line-height: 1 !important;
}
:where(
.feroxo-arrow-control,
[data-hero-prev],[data-hero-next],
[data-industries-prev],[data-industries-next],
[data-about-industries-prev],[data-about-industries-next],
[data-certificate-prev],[data-certificate-next],
.product-gallery-v2__arrow
)::before,
:where(
.feroxo-arrow-control,
[data-hero-prev],[data-hero-next],
[data-industries-prev],[data-industries-next],
[data-about-industries-prev],[data-about-industries-next],
[data-certificate-prev],[data-certificate-next],
.product-gallery-v2__arrow
)::after {
content: none !important;
display: none !important;
border: 0 !important;
transform: none !important;
}
.feroxo-arrow-control > .feroxo-arrow-glyph,
[data-hero-prev] > .feroxo-arrow-glyph,
[data-hero-next] > .feroxo-arrow-glyph,
[data-industries-prev] > .feroxo-arrow-glyph,
[data-industries-next] > .feroxo-arrow-glyph,
[data-about-industries-prev] > .feroxo-arrow-glyph,
[data-about-industries-next] > .feroxo-arrow-glyph,
[data-certificate-prev] > .feroxo-arrow-glyph,
[data-certificate-next] > .feroxo-arrow-glyph,
.product-gallery-v2__arrow > .feroxo-arrow-glyph {
display: block !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
font-family: Arial, Helvetica, sans-serif !important;
font-size: 30px !important;
font-style: normal !important;
font-weight: 700 !important;
line-height: .8 !important;
letter-spacing: 0 !important;
text-indent: 0 !important;
text-align: center !important;
transform: translateY(-1px) !important;
transform-origin: center !important;
color: currentColor !important;
pointer-events: none !important;
}
@media (max-width: 760px) {
.feroxo-arrow-control > .feroxo-arrow-glyph,
[data-hero-prev] > .feroxo-arrow-glyph,
[data-hero-next] > .feroxo-arrow-glyph,
[data-industries-prev] > .feroxo-arrow-glyph,
[data-industries-next] > .feroxo-arrow-glyph,
[data-about-industries-prev] > .feroxo-arrow-glyph,
[data-about-industries-next] > .feroxo-arrow-glyph,
[data-certificate-prev] > .feroxo-arrow-glyph,
[data-certificate-next] > .feroxo-arrow-glyph,
.product-gallery-v2__arrow > .feroxo-arrow-glyph {
font-size: 26px !important;
}
}
/* FEROXO_REQUEST_HEADER_V4_3_1_2026_08_24
Tiny QA adjustment only:
- move the whole Make Request action/privacy group 24px left and 10px up on desktop;
- add a little more air between language and Make Request on mobile. */
@media (min-width: 1101px) {
body .request-modal .request-form__bottom {
transform: translate(-24px, -10px) !important;
}
}
@media (max-width: 760px) {
body .site-header__actions > .language,
body .inner-top .site-header__actions > .language,
body .article-top .site-header__actions > .language,
body .detail-top .site-header__actions > .language,
body .home-page .site-header__actions > .language,
body .about-page .site-header__actions > .language {
margin-right: 4px !important;
}
}
@media (max-width: 360px) {
body .site-header__actions > .language,
body .inner-top .site-header__actions > .language,
body .article-top .site-header__actions > .language,
body .detail-top .site-header__actions > .language,
body .home-page .site-header__actions > .language,
body .about-page .site-header__actions > .language {
margin-right: 2px !important;
}
}
/* FEROXO_ARROWS_CLEANUP_V4_3_2_2026_08_24
Keep ONE arrow only. Old DOM glyphs are visually suppressed,
old ::after artwork is disabled, and one clean ‹ / › chevron
is drawn in the exact visual center, nudged 2px upward. */
:where(
.feroxo-arrow-control,
[data-hero-prev],[data-hero-next],
[data-industries-prev],[data-industries-next],
[data-about-industries-prev],[data-about-industries-next],
[data-certificate-prev],[data-certificate-next],
.product-gallery-v2__arrow
) {
display: grid !important;
place-items: center !important;
padding: 0 !important;
line-height: 0 !important;
text-indent: 0 !important;
font-size: 0 !important; /* hides the older JS-inserted glyph so it can't double */
}
:where(
.feroxo-arrow-control,
[data-hero-prev],[data-hero-next],
[data-industries-prev],[data-industries-next],
[data-about-industries-prev],[data-about-industries-next],
[data-certificate-prev],[data-certificate-next],
.product-gallery-v2__arrow
)::after {
content: none !important;
display: none !important;
}
:where(
.feroxo-arrow-control,
[data-hero-prev],[data-hero-next],
[data-industries-prev],[data-industries-next],
[data-about-industries-prev],[data-about-industries-next],
[data-certificate-prev],[data-certificate-next],
.product-gallery-v2__arrow
)::before {
position: static !important;
inset: auto !important;
display: block !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
color: currentColor !important;
font-family: Arial, Helvetica, sans-serif !important;
font-size: 30px !important;
font-weight: 700 !important;
line-height: 1 !important;
transform: translateY(-2px) !important;
transform-origin: 50% 50% !important;
}
:where(
.feroxo-arrow-prev,
[data-hero-prev],
[data-industries-prev],
[data-about-industries-prev],
[data-certificate-prev],
.product-gallery-v2__arrow--prev
)::before {
content: "‹" !important;
}
:where(
.feroxo-arrow-next,
[data-hero-next],
[data-industries-next],
[data-about-industries-next],
[data-certificate-next],
.product-gallery-v2__arrow--next
)::before {
content: "›" !important;
}
/* Preserve the intended white arrow on red hero circles. */
:where(.hero__side-arrow,[data-hero-prev],[data-hero-next]) {
color: #fff !important;
}
@media (max-width: 760px) {
:where(
.feroxo-arrow-control,
[data-hero-prev],[data-hero-next],
[data-industries-prev],[data-industries-next],
[data-about-industries-prev],[data-about-industries-next],
[data-certificate-prev],[data-certificate-next],
.product-gallery-v2__arrow
)::before {
font-size: 26px !important;
transform: translateY(-2px) !important;
}
}
/* FEROXO_FINAL_ARROW_REQUEST_V5_2026_08_24 */
@media (min-width:1101px){
body .request-modal .request-form__bottom{transform:translate(-54px,-10px)!important}
}
.feroxo-final-arrow{display:grid!important;place-items:center!important;padding:0!important;line-height:0!important;font-size:0!important;text-indent:0!important}
.feroxo-final-arrow::before,.feroxo-final-arrow::after{content:none!important;display:none!important;border:0!important;background:none!important}
.feroxo-final-arrow>.feroxo-final-arrow-glyph{display:block!important;position:static!important;width:auto!important;height:auto!important;margin:0!important;padding:0!important;border:0!important;font-family:Arial,Helvetica,sans-serif!important;font-size:30px!important;font-weight:700!important;line-height:1!important;color:currentColor!important;transform:translateY(-3px)!important}
@media(max-width:760px){.feroxo-final-arrow>.feroxo-final-arrow-glyph{font-size:25px!important;transform:translateY(-2px)!important}}
/* FEROXO_SEND_REQUEST_SIZE_V5_0_1_2026_08_24
Tiny final visual adjustment only:
keep the current approved position, make the desktop Send Request button smaller
so it fits cleanly inside the decorative notch. */
@media (min-width: 1101px) {
body .request-modal .request-form__bottom {
grid-template-columns: 176px minmax(0, 1fr) !important;
column-gap: 26px !important;
}
body .request-modal .request-form__bottom > button {
width: 176px !important;
min-width: 176px !important;
max-width: 176px !important;
height: 46px !important;
min-height: 46px !important;
padding: 7px 16px !important;
font-size: 14px !important;
line-height: 1.05 !important;
border-radius: 999px !important;
}
}
/* Czech label may be longer, but keep the same approved geometry. */
@media (min-width: 1101px) {
html.feroxo-lang-cz body .request-modal .request-form__bottom > button {
font-size: 13px !important;
padding-inline: 12px !important;
}
}
/* FEROXO_REQUEST_NUDGE_V5_0_3_2026_08_24
Keep the approved size/vertical position, move the whole action/privacy group
20px to the RIGHT compared with the current state. */
@media (min-width: 1101px) {
body .request-modal .request-form__bottom {
transform: translate(-34px, -10px) !important;
}
}
/* FEROXO_CONTACT_FEATURES_V5_2_3_2026_08_24
Desktop contact feature row: full-height dividers + aligned text blocks. */
@media (min-width: 761px) {
.contact-feature-row {
padding-top: 0 !important;
padding-bottom: 0 !important;
align-items: stretch !important;
}
.contact-feature-row article {
align-self: stretch !important;
padding-top: clamp(24px, 1.75vw, 32px) !important;
padding-bottom: clamp(24px, 1.75vw, 32px) !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
}
.contact-feature-row article:not(:last-child) {
border-right: 1px solid rgba(13, 2, 2, .14) !important;
}
.contact-feature-row h2 {
min-height: 1.7em !important;
margin-bottom: 10px !important;
}
.contact-feature-row p {
margin: 0 !important;
}
}
/* FEROXO_CONTACT_TEXT_V5_2_5_2026_08_24
Final Contact polish: use the full width of each of the 3 feature columns.
Removes the old 40px padding + 40px margin combination that made paragraphs
artificially narrow and created large empty gaps. */
@media (min-width: 761px) {
.contact-feature-row {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
.contact-feature-row article,
.contact-feature-row article:not(:last-child),
.contact-feature-row article:last-child {
margin: 0 !important;
padding: clamp(24px, 1.75vw, 32px) clamp(24px, 2vw, 36px) !important;
min-width: 0 !important;
width: 100% !important;
box-sizing: border-box !important;
}
.contact-feature-row h2,
.contact-feature-row p {
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
}
.contact-feature-row h2 {
text-wrap: balance !important;
}
.contact-feature-row p {
text-wrap: pretty !important;
overflow-wrap: normal !important;
word-break: normal !important;
}
}
@media (min-width: 761px) and (max-width: 1100px) {
.contact-feature-row article,
.contact-feature-row article:not(:last-child),
.contact-feature-row article:last-child {
padding-left: 20px !important;
padding-right: 20px !important;
}
}