) */
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
height: auto !important;
}
div.catalog form#AdvancedSearchInCategory .tabs ul.tabs-nav li.active {
background: transparent !important;
padding-top: 0 !important;
}
div.catalog form#AdvancedSearchInCategory .tabs ul.tabs-nav li a {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border-radius: 999px;
border: 1px solid #d6d8e1;
background: #f7f7f8;
color: #111827;
text-decoration: none;
font-weight: 600;
font-size: 13px;
line-height: 1;
margin: 0 !important; /* override legacy margin: 7px 9px */
}
div.catalog form#AdvancedSearchInCategory .tabs ul.tabs-nav li.active a,
div.catalog form#AdvancedSearchInCategory .tabs ul.tabs-nav li a:hover {
background: #111827;
border-color: #111827;
color: #fff;
}
/* filter controls */
div.catalog form#AdvancedSearchInCategory .filter-controls {
float: none !important;
position: static !important;
margin-top: 12px;
display: flex;
gap: 10px;
justify-content: flex-end;
align-items: center;
}
/* Reset button ("Сбросить") — match compact grey button style */
div.catalog form#AdvancedSearchInCategory .filter-controls .mgResetBtn {
-webkit-appearance: none;
appearance: none;
background: #9ca3af;
color: #fff;
border: 1px solid #9ca3af;
border-radius: 10px;
padding: 10px 14px;
height: auto;
line-height: 1;
font-weight: 700;
font-size: 13px;
cursor: pointer;
box-shadow: 0 1px 1px rgba(16, 24, 40, 0.06);
}
div.catalog form#AdvancedSearchInCategory .filter-controls .mgResetBtn:hover {
background: #6b7280;
border-color: #6b7280;
}
div.catalog form#AdvancedSearchInCategory .filter-controls input.submitter,
div.catalog div.sort-b div.buttons .submitter,
input.submitter {
-webkit-appearance: none;
appearance: none;
background: #111827 !important;
color: #fff !important;
border: 1px solid #111827 !important;
border-radius: 10px !important;
padding: 10px 14px !important;
height: auto !important;
font-weight: 700;
font-size: 13px;
cursor: pointer;
box-shadow: 0 1px 1px rgba(16, 24, 40, 0.08);
}
div.catalog form#AdvancedSearchInCategory .filter-controls input.submitter:hover,
div.catalog div.sort-b div.buttons .submitter:hover,
input.submitter:hover {
background: #0b1220 !important;
border-color: #0b1220 !important;
}
/* reset image button (type=image) – keep, but make it look like secondary */
div.catalog form#AdvancedSearchInCategory .filter-controls input[type="image"] {
border-radius: 10px;
border: 1px solid #d6d8e1;
background: #fff;
padding: 8px 10px;
height: 36px;
}
/* Reset button (replaces legacy input[type=image]) */
div.catalog form#AdvancedSearchInCategory .filter-controls .mgResetBtn {
-webkit-appearance: none;
appearance: none;
border: 1px solid #d6d8e1;
background: #9ca3af;
color: #fff;
border-radius: 999px;
padding: 9px 14px;
height: 36px;
font-weight: 700;
font-size: 13px;
line-height: 1;
cursor: pointer;
box-shadow: 0 1px 1px rgba(16, 24, 40, 0.08);
}
div.catalog form#AdvancedSearchInCategory .filter-controls .mgResetBtn:hover {
background: #6b7280;
border-color: #6b7280;
}
/* slider theming */
.ui-slider {
background: #eef0f6;
border-radius: 999px;
}
/* move the slider a bit down from the "от/до" row and add bottom margin */
div.catalog form#AdvancedSearchInCategory #slider-range {
margin-top: 32px;
margin-bottom: 20px;
}
.ui-slider .ui-slider-range {
background: #111827 !important;
}
.ui-slider .ui-slider-handle {
border-radius: 999px;
border: 2px solid #111827 !important;
background: #111827 !important;
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.18);
}
/* jQuery UI theme can color handles green via ui-state classes; force neutral */
#slider-range .ui-slider-handle,
#slider-range .ui-state-default,
#slider-range .ui-widget-content .ui-state-default,
#slider-range .ui-widget-header .ui-state-default,
#slider-range .ui-state-hover,
#slider-range .ui-state-focus,
#slider-range .ui-state-active {
background: #111827 !important;
border-color: #111827 !important;
}
/* Sorting header: card-like - ALWAYS VISIBLE */
/* Hide pagination at top of catalog (before products) */
div.catalog .sort-b:first-of-type {
display: none !important;
}
/* Убираем рамку у пагинации - применяем везде */
div.sort-b {
background: transparent !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
display: flex !important;
justify-content: center !important; /* центрируем пагинацию */
align-items: center;
}
/* Sorting form - ALWAYS VISIBLE */
form.sort {
display: block !important;
margin-bottom: 10px !important;
}
form.sort div.sort-t {
display: flex !important; /* Override any display: none */
height: auto !important;
padding: 10px 12px !important;
align-items: center;
gap: 14px;
flex-wrap: nowrap;
border: 1px solid #d9e0e6 !important;
background: #f0f3f5 !important;
border-radius: 5px 5px 0 0 !important;
margin: 10px 0 1px 0 !important;
}
/* sort bar layout: keep everything on one line and same sizing */
form.sort div.sort-t div.sort-tl,
form.sort div.sort-t div.sort-tr {
float: none !important;
display: flex;
align-items: center;
gap: 10px;
margin: 0 !important;
padding: 0 !important;
}
form.sort div.sort-t div.sort-tl {
flex: 1 1 auto;
min-width: 0;
flex-wrap: nowrap;
}
form.sort div.sort-t div.sort-tr {
flex: 0 0 auto;
margin-left: auto !important;
flex-wrap: nowrap;
}
form.sort div.sort-t span {
white-space: nowrap;
font-weight: 600;
font-size: 14px;
color: #111827;
}
form.sort div.sort-t select {
height: 40px;
padding: 8px 12px;
font-size: 14px;
line-height: 1;
}
/* allow graceful wrapping on narrow screens */
@media (max-width: 980px) {
form.sort div.sort-t {
flex-wrap: wrap;
}
form.sort div.sort-t div.sort-tl,
form.sort div.sort-t div.sort-tr {
flex-wrap: wrap;
}
form.sort div.sort-t div.sort-tr {
margin-left: 0 !important;
}
}
/* Selects */
form.sort select,
div.catalog form#AdvancedSearchInCategory select,
div.catalog form#AdvancedSearchInCategory input[type="text"],
div.catalog form#AdvancedSearchInCategory input[type="number"] {
border: 1px solid #d6d8e1;
border-radius: 10px;
padding: 8px 10px;
background: #fff;
color: #111827;
}
/* Price input fields: make them taller and ensure proper display */
div.catalog form#AdvancedSearchInCategory input[name="search_price_from"],
div.catalog form#AdvancedSearchInCategory input[name="search_price_to"] {
width: 40px !important; /* keep original width */
height: 35px !important; /* increase height */
padding: 8px 10px !important; /* ensure padding matches other inputs */
display: inline !important; /* use inline instead of inline-block to stay in flow */
vertical-align: middle !important;
margin: 0 4px !important; /* add spacing between label and input */
box-sizing: border-box !important;
}
/* Ensure table cell displays correctly */
div.catalog form#AdvancedSearchInCategory table td {
vertical-align: middle !important;
white-space: normal !important; /* allow wrapping if needed */
line-height: 1.5 !important;
}
/* Paginator pills */
div.sort-b ul.paginator {
float: none !important;
overflow: visible !important;
list-style: none;
margin: 0 auto !important; /* центрируем пагинацию */
padding: 0;
display: flex;
align-items: center;
justify-content: center !important; /* центрируем элементы внутри */
gap: 6px;
min-height: 35px;
}
div.sort-b ul.paginator li {
float: none !important;
margin: 0;
padding: 0;
display: flex;
}
div.sort-b ul.paginator li a,
div.sort-b ul.paginator li span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 42px;
height: 32px;
padding: 0 14px;
margin: 0 !important;
border-radius: 999px;
border: 1px solid #d6d8e1;
background: #fff;
color: #111827;
text-decoration: none;
font-weight: 600;
line-height: 1;
box-sizing: border-box;
}
div.sort-b ul.paginator li a:hover {
background: #f7f7f8;
}
div.sort-b ul.paginator li a.cur {
background: #111827;
border-color: #111827;
color: #fff;
}
/* current page is rendered as .. */
div.sort-b ul.paginator li span {
background: #111827;
border-color: #111827;
color: #fff;
}
div.sort-b ul.paginator li span b {
font-weight: 800;
color: inherit;
}
/* Subcategories: remove legacy frame drawn by #box_circul from left_menu.css */
#box_circul.subcategories-container {
border: none !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
padding: 0 !important;
}
/* Subcategories capsule style */
.subcategories-container {
width: auto !important;
padding: 0;
margin: 0 0 20px 0;
}
.subcategories-pills {
margin: 0 !important;
padding: 0 !important;
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.subcategories-pills li {
float: none !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
display: flex;
}
.subcategories-pills li a,
.subcategories-pills li span {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px var(--mg-subcat-xpad);
min-height: 38px;
border-radius: 999px;
border: 1px solid #d6d8e1;
background: #fff;
color: #111827 !important;
text-decoration: none !important;
font-weight: 600;
font-size: 14px;
transition: all 0.2s ease;
box-sizing: border-box;
}
.subcategories-pills li a:hover {
background: #f7f7f8;
border-color: #111827;
}
.subcategories-pills li span {
background: #111827;
border-color: #111827;
color: #fff !important;
}
/* ================================
Sidebar catalog (category_tree_new)
================================ */
/* The layout uses a table with td.leftColumn; index_top_fix.css forces it to 130px.
Override it here so the catalog sidebar can actually become wider. */
td.leftColumn {
width: 260px !important; /* make content start much more to the left */
padding-right: 10px !important; /* smaller gap between sidebar and content */
box-sizing: border-box;
}
/* Collapsible catalog block - override legacy styles from catalog.css */
td.leftColumn .mgCatalogBlock,
.leftColumn .mgCatalogBlock,
.mgCatalogBlock {
margin-bottom: 20px !important;
border: 1px solid #ccdae3 !important;
border-radius: 5px !important;
background: #ffffff !important;
overflow: hidden !important;
display: block !important;
}
td.leftColumn .mgCatalogBlock__header,
.leftColumn .mgCatalogBlock__header,
.mgCatalogBlock__header {
background: #fafbfc !important;
padding: 12px 14px !important;
cursor: pointer !important;
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
border-bottom: 1px solid #e1e8eb !important;
user-select: none !important;
transition: background-color 0.2s !important;
}
td.leftColumn .mgCatalogBlock__header:hover,
.leftColumn .mgCatalogBlock__header:hover,
.mgCatalogBlock__header:hover {
background: #e1e8eb !important;
}
td.leftColumn .mgCatalogBlock__title,
.leftColumn .mgCatalogBlock__title,
.mgCatalogBlock__title {
font-family: var(--mg-font-sans, 'Montserrat', Arial, sans-serif) !important;
font-size: 16px !important;
font-weight: 600 !important;
color: #2a2a2a !important;
}
td.leftColumn .mgCatalogBlock__toggle,
.leftColumn .mgCatalogBlock__toggle,
.mgCatalogBlock__toggle {
font-size: 12px !important;
color: #666 !important;
transition: transform 0.3s !important;
}
td.leftColumn .mgCatalogBlock.collapsed .mgCatalogBlock__toggle,
.leftColumn .mgCatalogBlock.collapsed .mgCatalogBlock__toggle,
.mgCatalogBlock.collapsed .mgCatalogBlock__toggle {
transform: rotate(-90deg) !important;
}
td.leftColumn .mgCatalogBlock__body,
.leftColumn .mgCatalogBlock__body,
.mgCatalogBlock__body {
overflow: hidden !important;
transition: max-height 0.3s ease-out !important;
max-height: 5000px !important;
}
td.leftColumn .mgCatalogBlock.collapsed .mgCatalogBlock__body,
.leftColumn .mgCatalogBlock.collapsed .mgCatalogBlock__body,
.mgCatalogBlock.collapsed .mgCatalogBlock__body {
max-height: 0 !important;
padding: 0 !important;
border-top: none !important;
}
/* add the same gap from the content side for safer separation */
.panel td.leftColumn + td {
padding-left: 10px;
width: auto !important; /* override legacy width="100%" on the middle | (prevents horizontal overflow) */
min-width: 0;
}
/* Product pages use the same table layout but not always inside .panel */
td.leftColumn + td {
width: auto !important; /* prevents 100% + sidebar overflow */
min-width: 0;
padding-left: 10px;
}
@media (max-width: 1100px) {
td.leftColumn {
width: 220px !important;
padding-right: 10px !important;
}
.panel td.leftColumn + td {
padding-left: 10px;
}
}
#categories_menu_folded,
#categories_menu_unfolded,
.precached-category-body {
width: 100%;
max-width: 260px;
}
/* Some pages render category_tree_new directly in the left column (no #categories_menu_unfolded wrapper) */
/* But when inside .mgCatalogBlock, menu should not have border/background (it's handled by the block) */
/* Override left_menu.css styles for ul#menu_next inside .mgCatalogBlock */
td.leftColumn .mgCatalogBlock ul#menu,
td.leftColumn .mgCatalogBlock ul#menu_next,
.leftColumn .mgCatalogBlock ul#menu,
.leftColumn .mgCatalogBlock ul#menu_next,
.mgCatalogBlock ul#menu,
.mgCatalogBlock ul#menu_next {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
border: none !important;
border-radius: 0 !important;
background: transparent !important;
overflow: visible !important;
box-shadow: none !important;
text-align: left !important;
-moz-border-radius: 0 !important;
}
/* Override left_menu.css styles for menu items inside .mgCatalogBlock */
td.leftColumn .mgCatalogBlock ul#menu li,
td.leftColumn .mgCatalogBlock ul#menu_next li,
.leftColumn .mgCatalogBlock ul#menu li,
.leftColumn .mgCatalogBlock ul#menu_next li,
.mgCatalogBlock ul#menu li,
.mgCatalogBlock ul#menu_next li {
width: 100% !important;
display: block !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
overflow: visible !important;
position: relative !important;
}
/* Override left_menu.css styles for menu links inside .mgCatalogBlock */
td.leftColumn .mgCatalogBlock ul#menu li a,
td.leftColumn .mgCatalogBlock ul#menu_next li a,
.leftColumn .mgCatalogBlock ul#menu li a,
.leftColumn .mgCatalogBlock ul#menu_next li a,
.mgCatalogBlock ul#menu li a,
.mgCatalogBlock ul#menu_next li a {
width: 100% !important;
display: block !important;
margin: 0 !important;
padding: 7px 16px !important;
background: #fff !important;
color: #111827 !important;
text-decoration: none !important;
text-shadow: none !important;
font-size: 14px !important;
font-weight: 700 !important;
font: normal normal 700 14px/1.15 'Montserrat', verdana, tahoma, arial, Monaco !important;
border-bottom: 1px solid #eef0f6 !important;
box-sizing: border-box;
line-height: 1.5 !important; /* Ensure text aligns properly */
}
/* Remove arrows from menu items inside .mgCatalogBlock (main catalog menu) */
td.leftColumn .mgCatalogBlock ul#menu li a::after,
td.leftColumn .mgCatalogBlock ul#menu_next li a::after,
.leftColumn .mgCatalogBlock ul#menu li a::after,
.leftColumn .mgCatalogBlock ul#menu_next li a::after,
.mgCatalogBlock ul#menu li a::after,
.mgCatalogBlock ul#menu_next li a::after {
display: none !important;
content: none !important;
}
/* Ensure span inside menu links displays properly */
td.leftColumn .mgCatalogBlock ul#menu li a span,
td.leftColumn .mgCatalogBlock ul#menu_next li a span,
.leftColumn .mgCatalogBlock ul#menu li a span,
.leftColumn .mgCatalogBlock ul#menu_next li a span,
.mgCatalogBlock ul#menu li a span,
.mgCatalogBlock ul#menu_next li a span {
display: inline !important;
vertical-align: baseline !important;
}
td.leftColumn ul#menu,
td.leftColumn ul#menu_next,
#categories_menu_unfolded ul#menu,
#categories_menu_unfolded ul#menu_next,
.precached-category-body ul#menu_next {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
border: 1px solid #d6d8e1;
border-radius: 12px;
background: #fff;
overflow: hidden;
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
}
/* reset legacy floats/sizes */
td.leftColumn ul#menu li,
td.leftColumn ul#menu_next li,
#categories_menu_unfolded ul#menu li,
#categories_menu_unfolded ul#menu_next li,
.precached-category-body ul#menu_next li {
float: none !important;
width: 100% !important;
display: block !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
}
td.leftColumn ul#menu li a,
td.leftColumn ul#menu_next li a,
#categories_menu_unfolded ul#menu li a,
#categories_menu_unfolded ul#menu_next li a,
.precached-category-body ul#menu_next li a {
background: #fff !important;
color: #111827 !important;
text-decoration: none !important;
text-shadow: none !important;
font: inherit;
display: flex !important;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 7px 16px !important; /* less height */
height: auto !important;
line-height: 1.15 !important;
border-bottom: 1px solid #eef0f6 !important;
box-sizing: border-box;
}
td.leftColumn ul#menu li a.last,
td.leftColumn ul#menu_next li a.last,
#categories_menu_unfolded ul#menu li a.last,
#categories_menu_unfolded ul#menu_next li a.last,
.precached-category-body ul#menu_next li a.last {
border-bottom: 0 !important;
}
/* text inside */
td.leftColumn ul#menu li a span,
td.leftColumn ul#menu_next li a span,
#categories_menu_unfolded ul#menu li a span,
#categories_menu_unfolded ul#menu_next li a span,
.precached-category-body ul#menu_next li a span {
display: block !important;
height: auto !important;
font-weight: 700;
font-size: 14px;
padding: 0 !important;
margin: 0 !important;
color: inherit !important;
white-space: normal !important;
}
/* right chevron like on the screenshot */
td.leftColumn ul#menu li a::after,
td.leftColumn ul#menu_next li a::after,
#categories_menu_unfolded ul#menu li a::after,
#categories_menu_unfolded ul#menu_next li a::after,
.precached-category-body ul#menu_next li a::after {
content: '\203A'; /* › */
font-size: 20px;
line-height: 1;
color: #9ca3af;
flex: 0 0 auto;
}
td.leftColumn ul#menu li a:hover,
td.leftColumn ul#menu_next li a:hover,
#categories_menu_unfolded ul#menu li a:hover,
#categories_menu_unfolded ul#menu_next li a:hover,
.precached-category-body ul#menu_next li a:hover {
background: #f7f7f8 !important;
color: #111827 !important;
}
/* catalog main container matches the card style */
div.catalog div.catalog-main {
background: #fff;
border: 1px solid #d6d8e1;
border-radius: 12px;
}
/* responsive: stack filter and list nicely */
@media (max-width: 980px) {
div.catalog form#AdvancedSearchInCategory .filter-controls {
justify-content: flex-start;
}
}
/* === Modern static pages (aux pages) === */
.mgAuxPageWrap #box_circul {
width: min(1200px, calc(100% - 32px)) !important;
margin: 18px auto !important;
background: #fff;
border: 1px solid #ececf0;
border-radius: 14px;
box-shadow: 0 10px 26px rgba(17, 24, 39, 0.06);
overflow: hidden;
}
.mgAuxPageWrap #box_info {
padding: 18px 20px !important;
}
.mgAuxPageWrap .hdbtop {
padding: 0 !important;
}
.mgAuxPage {
font-family: var(--mg-font-sans, "Montserrat", Arial, sans-serif);
color: #111827;
font-size: 15px;
line-height: 1.65;
overflow-wrap: anywhere;
}
.mgAuxPage h1,
.mgAuxPage h2,
.mgAuxPage h3 {
font-family: inherit;
color: #111827;
line-height: 1.2;
margin: 0 0 12px;
}
.mgAuxPage h1 { font-size: 28px; font-weight: 900; }
.mgAuxPage h2 { font-size: 22px; font-weight: 800; margin-top: 18px; }
.mgAuxPage h3 { font-size: 18px; font-weight: 800; margin-top: 16px; }
.mgAuxPage p { margin: 0 0 12px; }
.mgAuxPage ul,
.mgAuxPage ol {
margin: 0 0 12px 20px;
padding: 0;
}
/* Remove legacy orange accents on static pages */
.mgAuxPage a,
.mgAuxPage a:visited {
color: #111827 !important;
text-decoration: underline;
}
.mgAuxPage a:hover { text-decoration: none; }
.mgAuxPage font,
.mgAuxPage font * {
color: inherit !important;
}
.mgAuxPage img {
max-width: 100% !important;
height: auto !important;
}
.mgAuxPage table {
max-width: 100% !important;
}
.mgAuxPage hr {
border: 0;
height: 1px;
background: #ececf0;
margin: 16px 0;
}
@media (max-width: 720px) {
.mgAuxPageWrap #box_circul { width: calc(100% - 24px) !important; margin: 14px auto !important; }
.mgAuxPageWrap #box_info { padding: 14px 14px !important; }
.mgAuxPage { font-size: 14px; }
.mgAuxPage h1 { font-size: 22px; }
.mgAuxPage h2 { font-size: 18px; }
}
/* Aux pages: modern title bar (replaces legacy orange #zag_box) */
.mgAuxPageWrap #zag_box {
background: transparent !important;
border: 0 !important;
border-bottom: 1px solid #ececf0 !important;
color: #111827 !important;
padding: 0 0 12px 0 !important;
margin: 0 0 14px 0 !important;
font-family: var(--mg-font-sans, "Montserrat", Arial, sans-serif);
font-size: 26px;
font-weight: 900;
letter-spacing: 0;
text-transform: none !important;
}
/* If legacy CSS paints a background on the container, neutralize it */
.mgAuxPageWrap #box_circul,
.mgAuxPageWrap #box_info {
background-image: none !important;
}
/* Aux pages: kill legacy title shadows/outline */
.mgAuxPageWrap #zag_box {
text-shadow: none !important;
box-shadow: none !important;
-webkit-text-stroke: 0 !important;
text-align: left !important;
}
/* === Modern news pages === */
.mgNewsPageWrap #box_circul {
width: auto !important;
margin-top: 0 !important;
background: #fff;
border: 1px solid #ececf0;
border-radius: 14px;
box-shadow: 0 10px 26px rgba(17, 24, 39, 0.06);
overflow: hidden;
}
.mgNewsPageWrap #zag_box {
background: transparent !important;
border: 0 !important;
border-bottom: 1px solid #ececf0 !important;
color: #111827 !important;
padding: 14px 18px !important;
margin: 0 !important;
font-family: var(--mg-font-sans, "Montserrat", Arial, sans-serif);
font-size: 26px;
font-weight: 900;
text-shadow: none !important;
box-shadow: none !important;
text-align: left !important;
}
.mgNewsPageWrap #box_info {
padding: 18px 18px 20px !important;
border-top: 0 !important;
font-family: var(--mg-font-sans, "Montserrat", Arial, sans-serif);
color: #111827;
font-size: 15px;
line-height: 1.65;
}
.mgNewsPageWrap .hdbtop { padding: 0 !important; }
.mgNewsPageWrap a,
.mgNewsPageWrap a:visited {
color: #111827 !important;
text-decoration: underline;
}
.mgNewsPageWrap a:hover { text-decoration: none; }
.mgNewsPageWrap img { max-width: 100% !important; height: auto !important; }
@media (max-width: 720px) {
.mgNewsPageWrap #zag_box { font-size: 22px; padding: 12px 14px !important; }
.mgNewsPageWrap #box_info { padding: 14px 14px 16px !important; font-size: 14px; }
}
/* === Mobile adaptation === */
@media (max-width: 820px) {
/* prevent horizontal scroll from legacy fixed tables */
html, body {
max-width: 100% !important;
overflow-x: hidden !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
position: relative !important;
}
img { max-width: 100% !important; height: auto !important; }
/* Comfortable tap targets */
a, button, input[type="submit"], input[type="button"], .mgBtn { touch-action: manipulation; }
/* Avoid iOS auto-zoom on form fields */
input, select, textarea { font-size: 16px !important; }
/* Make legacy fixed-width wrappers fluid */
table[style*="width:1024"],
table[style*="width:970"],
table[style*="width:980"],
table[width="1024"],
table[width="970"],
table[width="980"],
table[style*="width: 1024"],
table[style*="width: 970"],
table[style*="width: 980"],
table[style*="width:1024px"],
table[style*="width: 1024px"] {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
margin: 0 !important;
padding: 0 !important;
}
/* Fix divs with fixed width */
div[style*="width:1024"],
div[style*="width: 1024"],
div[style*="width:1024px"],
div[style*="width: 1024px"],
div.header[style*="width"],
.header[style*="width:1024"],
.header[style*="width: 1024"],
.header[style*="width:1024px"],
.header[style*="width: 1024px"] {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
margin: 0 !important;
padding: 0 !important;
}
/* Fix table cells to prevent overflow */
table td {
max-width: 100vw !important;
overflow-x: hidden !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Remove any alignment that causes offset */
table[align="center"] {
margin-left: 0 !important;
margin-right: 0 !important;
width: 100% !important;
}
/* Fix main page wrapper */
body > table,
body > table > tbody > tr > td {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
/* Catalog/product pages often use left column table layout -> stack */
.panel td.leftColumn,
.panel td.middleColumn,
.panel td.rightColumn,
.panel td.left,
.panel td.center,
.panel td.right {
display: block !important;
float: none !important;
width: 100% !important;
max-width: 100% !important;
}
/* When layout is leftColumn + content cell */
.panel td.leftColumn + td {
display: block !important;
float: none !important;
width: 100% !important;
max-width: 100% !important;
padding-left: 0 !important;
}
/* Reduce legacy side padding/gaps */
.panel td.container { padding-left: 0 !important; padding-right: 0 !important; }
/* Forms/buttons on legacy pages */
input[type="text"], input[type="password"], input[type="email"], select, textarea {
max-width: 100% !important;
box-sizing: border-box;
}
/* Long tables inside content: allow horizontal scroll instead of breaking */
.content table { display: block; max-width: 100% !important; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.content table tbody { display: table; width: 100%; }
/* Panel top gap (under header) */
.panel { margin-top: 24px !important; }
}
@media (max-width: 520px) {
/* tighten typography */
body { font-size: 14px; }
}
/* Header spacer fix (no fixed header) */
.mgHeader + .panel {
margin-top: 0 !important;
} |