/* Inner pages: same layout (sidebar + content panel), restyled to match the home page.
   Loaded last, after Bootstrap 3 and the legacy global.css / products.css / mail.css, so rules
   here are scoped under body.inner with the legacy element ids to win on specificity. */

body.inner {
	margin: 0;
	background: #f5f8fc;
	background-image: none;
	color: var(--text);
	font-family: var(--font);
	font-size: 16px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}
/* link colour only inside the page body, so it never leaks into the shared header/footer */
body.inner #main a, body.inner #sidebar a { color: var(--blue); }
body.inner #main a:hover, body.inner #sidebar a:hover { color: var(--blue-600); }
#video {
	color: white!important;
}
/* ---------- page frame ---------- */
body.inner > .container {
	width: auto;
	max-width: var(--max);
	margin: 0 auto;
	padding: clamp(24px, 3vw, 40px) calc(var(--gutter) - 15px) 0;
}
body.inner > .container::after { content: ""; display: table; clear: both; }

/* ---------- sidebar ---------- */
body.inner div#side-navigation_frame {
	margin: 0 0 24px;
	padding: 0;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: 0 1px 0 var(--line), 0 18px 40px -32px rgba(29, 33, 82, .4);
	overflow: hidden;
}
body.inner div#side-navigation_frame .header {
	display: flex; align-items: center; gap: 10px;
	margin: 0; padding: 18px 20px;
	font-family: var(--font); font-size: 1rem; font-weight: 800; letter-spacing: .02em; text-transform: uppercase;
	text-align: left; color: var(--navy);
	background: var(--tint);
	border-bottom: 1px solid var(--line);
}
body.inner div#side-navigation_frame .header::before {
	content: ""; width: 10px; height: 10px; border-radius: 50%;
	background: var(--blue); box-shadow: 0 0 0 4px rgba(21, 115, 199, .15);
}
body.inner div#side-navigation { background: transparent; border-radius: 0; padding: 6px 0; }
body.inner div#side-navigation ul { margin: 0; padding: 0; list-style: none; }
body.inner div#side-navigation li.bg-li { background: none; border-bottom: 1px solid #f0f2f7; }
body.inner div#side-navigation > ul > li:last-child { border-bottom: 0; }

/* top-level links; .label is also a Bootstrap class, so reset its badge styling */
body.inner div#side-navigation a,
body.inner div#side-navigation a.label,
body.inner div#side-navigation a.label_no_drop_down,
body.inner div#side-navigation a.active {
	position: relative;
	display: block;
	margin: 0;
	padding: 11px 44px 11px 20px;
	font-family: var(--font) !important; /* global.css forces Eurostile on .label with !important */
	font-size: .9rem; font-weight: 500; line-height: 1.4;
	text-align: left; white-space: normal; text-indent: 0;
	color: var(--ink);
	background: none; border-radius: 0;
	text-decoration: none;
	transition: color .2s, background .2s;
}
body.inner div#side-navigation a:hover { color: var(--blue); background: var(--tint); text-decoration: none; }

/* chevron for items with a sub-menu; rotates when open */
body.inner div#side-navigation a.label::after {
	content: ""; position: absolute; right: 20px; top: 50%;
	width: 8px; height: 8px; margin-top: -6px;
	border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
	transform: rotate(45deg); transition: transform .25s var(--ease), border-color .2s;
}
body.inner div#side-navigation a.label:hover::after { border-color: var(--blue); }
body.inner div#side-navigation a.label.active { color: var(--blue); font-weight: 600; background: var(--tint); }
body.inner div#side-navigation a.label.active::after { transform: rotate(-135deg); margin-top: -2px; border-color: var(--blue); }

/* sub-menus */
/* collapsed before menu.js runs, so the sidebar does not jump when the script hides the sub-menus (layout shift) */
body.inner div#side-navigation ul.acitem { display: none; }
body.inner div#side-navigation li.expand > ul.acitem { display: block; }
body.inner div#side-navigation ul.acitem { background: #fafcff; padding: 4px 0 8px; border-top: 1px solid #f0f2f7; }
body.inner div#side-navigation_frame ul ul li { margin: 0; }
body.inner div#side-navigation ul.acitem a,
body.inner div#side-navigation_frame ul ul li a {
	padding: 7px 20px 7px 38px;
	font-size: .84rem; font-weight: 400; color: var(--text);
}
body.inner div#side-navigation ul.acitem a::before {
	content: ""; position: absolute; left: 24px; top: 50%;
	width: 5px; height: 5px; margin-top: -2px; border-radius: 50%;
	background: var(--sky);
}
body.inner div#side-navigation ul.acitem a:hover { color: var(--blue); background: transparent; }
body.inner div#side-navigation ul.acitem ul.acitem a { padding-left: 52px; }
body.inner div#side-navigation ul.acitem ul.acitem a::before { left: 38px; }

/* ---------- main content panel ---------- */
body.inner div#main_textbox_frame {
	margin: 0 0 24px;
	padding: 0;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: 0 1px 0 var(--line), 0 18px 40px -32px rgba(29, 33, 82, .4);
	overflow: hidden;
}
body.inner div#main_textbox_frame h1.header {
	position: relative;
	margin: 0;
	padding: clamp(24px, 3vw, 34px) clamp(20px, 3vw, 36px) 18px;
	font-family: var(--font); font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 800; line-height: 1.2;
	text-align: left; color: var(--ink);
	background: linear-gradient(180deg, var(--tint), #fff);
	border-bottom: 1px solid var(--line);
}
body.inner div#main_textbox_frame h1.header::after {
	content: ""; display: block; width: 48px; height: 4px; margin-top: 14px; border-radius: 4px;
	background: var(--blue);
}
body.inner div#main_textbox {
	min-height: 0;
	padding: clamp(20px, 3vw, 32px) clamp(20px, 3vw, 36px) clamp(28px, 3vw, 40px);
	background: #fff;
	border-radius: 0;
}

/* typography inside the panel */
body.inner div#main_textbox p,
body.inner div#main_textbox li,
body.inner div#main_textbox td,
body.inner div#main_textbox ol { font-family: var(--font); font-size: .98rem; line-height: 1.75; color: var(--text); }
body.inner div#main_textbox p { margin: 0 0 1em; }
body.inner div#main_textbox h1:not(.header),
body.inner div#main_textbox h2 { margin: 28px 0 12px; font-family: var(--font); font-size: 1.2rem; font-weight: 700; line-height: 1.35; color: var(--blue); }
body.inner div#main_textbox > h1:first-child:not(.header),
body.inner div#main_textbox > h2:first-child { margin-top: 0; }
body.inner div#main_textbox h3 { margin: 22px 0 8px; font-family: var(--font); font-size: 1rem; font-weight: 700; color: var(--ink); }
body.inner div#main_textbox strong, body.inner div#main_textbox b { color: var(--ink); }

/* plain content lists get blue check bullets (product grids and forms keep their own lists) */
body.inner div#main_textbox ul:not([class]):not([id]) { margin: 0 0 1.2em; padding: 0; list-style: none; }
body.inner div#main_textbox ul:not([class]):not([id]) > li {
	position: relative; padding: 6px 0 6px 30px; list-style: none;
}
body.inner div#main_textbox ul:not([class]):not([id]) > li::before {
	content: ""; position: absolute; left: 0; top: .72em;
	width: 18px; height: 18px; border-radius: 50%;
	background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}
/* nested list items get a quieter dot instead of another check */
body.inner div#main_textbox ul:not([class]):not([id]) ul:not([class]):not([id]) { margin: 4px 0 6px; }
body.inner div#main_textbox ul:not([class]):not([id]) ul:not([class]):not([id]) > li { padding: 3px 0 3px 18px; font-size: .9rem; }
body.inner div#main_textbox ul:not([class]):not([id]) ul:not([class]):not([id]) > li::before { top: 1em; left: 4px; width: 6px; height: 6px; background: var(--sky); }
body.inner div#main_textbox ol { margin: 0 0 1.2em 1.2em; padding: 0; }
body.inner div#main_textbox ol > li { padding: 4px 0 4px 6px; }
body.inner div#main_textbox ol > li::marker { color: var(--blue); font-weight: 700; }

/* ---------- buttons ---------- */
body.inner .blue_button,
body.inner a.blue_button {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 12px 22px;
	font-family: var(--font) !important; font-size: .9rem; font-weight: 600 !important; letter-spacing: 0;
	color: #fff; background: var(--blue); background-image: none;
	border: 0; border-radius: 999px; box-shadow: none;
	text-decoration: none;
	transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .2s;
}
body.inner .blue_button:hover { color: #fff; background: var(--blue-600); background-image: none; transform: translateY(-2px); box-shadow: var(--shadow); }

/* legacy image buttons become text pills */
body.inner a#add_to_cart,
body.inner a#remove_from_cart,
body.inner a#manual_button,
body.inner a#venues_served,
body.inner a#rental_agreement {
	float: none;
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	width: auto; height: auto;
	margin: 16px 0;
	padding: 12px 22px;
	border-radius: 999px;
	background-image: none;
	font-family: var(--font); font-size: .9rem; font-weight: 600; line-height: 1;
	text-decoration: none;
	transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .2s, color .2s;
}
body.inner a#add_to_cart { background-color: var(--navy); color: #fff; }
body.inner a#add_to_cart::before { content: "+"; font-size: 1.15rem; font-weight: 700; line-height: .8; }
body.inner a#add_to_cart::after { content: "Add to quote cart"; }
body.inner a#remove_from_cart { background-color: #fff; color: var(--crimson); border: 1.5px solid var(--crimson); }
body.inner a#remove_from_cart::after { content: "Remove from cart"; }
body.inner a#manual_button { background-color: #fff; color: var(--blue); border: 1.5px solid var(--blue); }
body.inner a#manual_button::after { content: "Download manual"; }
body.inner a#venues_served { display: flex; width: max-content; max-width: 100%; margin: 28px auto 4px; background-color: #fff; color: var(--blue); border: 1.5px solid var(--blue); }
body.inner a#venues_served::after { content: "Some of the venues we\2019ve served \2192"; }
body.inner a#add_to_cart:hover, body.inner a#remove_from_cart:hover, body.inner a#manual_button:hover, body.inner a#venues_served:hover { transform: translateY(-2px); box-shadow: var(--shadow); background-image: none; }
body.inner a#add_to_cart:hover { background-color: var(--navy-900); color: #fff; }
body.inner a#remove_from_cart:hover { background-color: var(--crimson); color: #fff; }
body.inner a#manual_button:hover, body.inner a#venues_served:hover { background-color: var(--blue); color: #fff; }

/* ---------- product & venue grids ---------- */
body.inner div#product_frame h2 { margin: 0 0 16px; font-size: 1.35rem; font-weight: 800; color: var(--ink); }
body.inner div#product_frame h3 { color: var(--ink); }
body.inner div#product_frame ul.thumbs_container {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	gap: 16px;
	margin: 8px 0 24px; padding: 0;
	list-style: none;
}
body.inner div#product_frame ul.thumbs_container::after { display: none; }
body.inner div#product_frame ul.thumbs_container li,
body.inner div#product_frame ul.thumbs_container li.thumbs {
	float: none; width: auto !important; height: auto !important;
	margin: 0; padding: 0;
	border: 1px solid var(--line); border-radius: 14px;
	background: #fff; overflow: hidden;
	transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .2s;
}
body.inner div#product_frame ul.thumbs_container li:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: transparent; }
body.inner div#product_frame ul.thumbs_container li a { display: flex; flex-direction: column; height: 100%; color: var(--ink); text-decoration: none; }
body.inner div#product_frame ul.thumbs_container li a:hover { color: var(--blue); text-decoration: none; }
body.inner .thumbs_image_container {
	display: grid; place-items: center;
	width: auto !important; height: auto !important;
	aspect-ratio: 4 / 3; padding: 14px;
	background: #f6f8fb;
}
body.inner .thumbs_image_container br { display: none; }
body.inner .thumbs_image_container img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; mix-blend-mode: multiply; }
/* js/max_min.js stamps fixed inline sizes on captions; let the grid size them instead */
body.inner div.caption { width: auto !important; height: auto !important; padding: 12px 14px 14px; }
body.inner div.caption p,
body.inner div#main_textbox div.caption p { margin: 0; font-size: .84rem; font-weight: 600; line-height: 1.4; color: inherit; }

/* responsive.css forces 10pt centred text on every product paragraph with !important */
body.inner div#product_frame p { font-size: .98rem !important; line-height: 1.75; text-align: left !important; }
body.inner div#product_frame div.caption p { font-size: .84rem !important; line-height: 1.4; text-align: center !important; }

/* venues listing uses its own small classes */
body.inner .products .imageContainer img { border-radius: 12px; }
body.inner .productName { font-weight: 600; color: var(--ink); }

/* product detail */
body.inner a.main_image, body.inner img.main_image { float: right; margin: 0 0 18px 24px; }
body.inner #main_image {
	margin: 0; padding: 14px;
	background: #f6f8fb; border: 1px solid var(--line); border-radius: 16px;
	mix-blend-mode: normal;
}
body.inner #main_textbox .center { text-align: center; }
body.inner table#admin td { border-color: var(--line); border-radius: 0; }

/* admin-only toolbar (Add / Edit / Delete), shown when logged in. Legacy CSS gives these
   list bullets, borders and a negative margin, so reset them and mark the strip as admin-only. */
body.inner ul#admin_buttons {
	display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
	margin: 0 0 22px; padding: 10px 12px;
	list-style: none;
	background: #fff8e8; border: 1px dashed #e8b85a; border-radius: 12px;
}
body.inner ul#admin_buttons::before {
	content: "Admin"; margin-right: 4px; padding: 3px 9px; border-radius: 999px;
	background: #e8b85a; color: #fff; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
body.inner ul#admin_buttons li,
body.inner div#main_textbox ul#admin_buttons li { float: none; width: auto; margin: 0; padding: 0; list-style: none; border: 0; border-radius: 0; text-align: left; }
body.inner ul#admin_buttons li::before { display: none; }
body.inner #main ul#admin_buttons li a {
	display: inline-block; padding: 6px 14px;
	font-size: .82rem; font-weight: 600; line-height: 1.3; color: var(--navy);
	background: #fff; border: 1px solid #e3d3ad; border-radius: 999px; text-decoration: none;
	transition: background .2s, color .2s, border-color .2s;
}
body.inner #main ul#admin_buttons li a:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
body.inner #main ul#admin_buttons li a[href*="delete"] { color: var(--crimson); border-color: #efc2cf; }
body.inner #main ul#admin_buttons li a[href*="delete"]:hover { background: var(--crimson); border-color: var(--crimson); color: #fff; }
body.inner ul#admin_buttons + .clear-fix { display: none; }

/* "(Manage Categories)" link at the top of the sidebar when logged in */
body.inner div#side-navigation > a[href*="edit_categories"] {
	margin: 6px 12px 8px !important; padding: 8px 12px !important;
	font-size: .82rem !important; font-weight: 600; text-align: center !important;
	color: var(--navy) !important; background: #fff8e8 !important; border: 1px dashed #e8b85a; border-radius: 10px !important;
}

/* ---------- forms (request a quote, contact) ---------- */
/* The form is a legacy two-column table. Lay it out as a CSS grid: ordinary rows become
   display:contents so their cells are grid items. Error rows are left alone because
   js/contact.js shows them by setting an inline display:table-row; they span both columns. */
body.inner form#form1 {
	position: relative;
	margin: 8px 0 0;
	padding: clamp(20px, 3vw, 30px);
	background: #fbfdff;
	border: 1px solid var(--line);
	border-radius: 16px;
}
body.inner table#info { display: block; width: 100%; margin: 0; border-spacing: 0; font-size: inherit; }
body.inner table#info > tbody { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
body.inner table#info tr:not([id^="error_"]) { display: contents; }
body.inner table#info td {
	display: block; min-width: 0; padding: 0;
	font-size: .86rem; font-weight: 600; line-height: 1.5; color: var(--ink); text-align: left;
}
body.inner table#info td br { display: none; }
body.inner table#info td[colspan] { grid-column: 1 / -1; }
body.inner table#info span { color: var(--crimson); font-style: normal; margin-left: 2px; }

/* validation messages */
body.inner table#info tr[id^="error_"] { grid-column: 1 / -1; margin: 0 0 -8px; }
body.inner table#info tr[id^="error_"] td { display: inline; padding: 0; font-size: .82rem; font-weight: 600; color: var(--crimson); }
body.inner table#info tr[id^="error_"] td:empty, body.inner table#info tr[id^="error_"] td:only-child:empty { display: none; }

/* text fields */
body.inner #main_textbox input[type="text"],
body.inner #main_textbox input[type="email"],
body.inner #main_textbox input[type="tel"],
body.inner #main_textbox select,
body.inner #main_textbox textarea,
body.inner #main_textbox textarea#message {
	display: block;
	width: 100%; max-width: 100%; height: auto;
	margin: 7px 0 0;
	padding: 12px 14px;
	font: 400 .95rem/1.4 var(--font); color: var(--ink);
	background: #fff;
	border: 1px solid #d9dfea; border-radius: 10px;
	box-shadow: 0 1px 2px rgba(29, 33, 82, .04);
	transition: border-color .2s, box-shadow .2s;
	-webkit-appearance: none;
}
body.inner #main_textbox textarea#message, body.inner #main_textbox textarea { min-height: 150px; resize: vertical; }
body.inner #main_textbox textarea#message { width: 100% !important; } /* responsive.css pins it to 450px !important */
body.inner #main_textbox input[type="text"]:hover,
body.inner #main_textbox textarea:hover { border-color: #c3cddd; }
body.inner #main_textbox input[type="text"]:focus,
body.inner #main_textbox input[type="email"]:focus,
body.inner #main_textbox textarea:focus,
body.inner #main_textbox select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(21, 115, 199, .12); }

/* dates: the cell holds a bare "Dates" text node, then from-label, input, to-label, input.
   Pin the four controls to row 2 so the text node auto-places alone in row 1 as the label. */
body.inner table#info td:has(> input.datepicker) { display: grid; grid-template-columns: auto 1fr auto 1fr; align-items: center; column-gap: 10px; }
body.inner table#info td:has(> input.datepicker) > * { grid-row: 2; }
body.inner table#info label.widwid1,
body.inner div#main_textbox label#second { display: block; width: auto; margin: 7px 0 0; padding: 0 !important; font-weight: 500; color: var(--muted); text-transform: capitalize; }
body.inner div#main_textbox label#second { margin-left: 8px; }
body.inner #main_textbox input.datepicker,
body.inner #main_textbox input.wdtwdt { display: block !important; width: 100% !important; }

/* captcha */
body.inner table#info td p { display: flex; align-items: center; gap: 12px; margin: 0; }
body.inner #siimage { float: none; margin: 0 !important; border: 1px solid var(--line) !important; border-radius: 10px; background: #fff; }
body.inner table#info object { display: none; } /* dead Flash audio player */
body.inner table#info td p a { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line) !important; border-radius: 50%; background: #fff; } /* inline border-style:none on the link */
body.inner table#info td p a:hover { border-color: var(--blue) !important; }
body.inner table#info td p a img { width: 20px; height: 20px; }
body.inner #main_textbox input#captcha { max-width: 260px; }

/* buttons row: Send + Clear side by side */
body.inner table#info tr:has(.pad-u) { display: flex; grid-column: 1 / -1; align-items: center; gap: 12px; margin-top: 6px; }
body.inner table#info tr:has(.pad-u) td { flex: none; }
body.inner #main_textbox .pad-u,
body.inner #main_textbox input[type="submit"],
body.inner #main_textbox input[type="reset"],
body.inner #main_textbox button {
	float: none;
	display: inline-flex; align-items: center; justify-content: center;
	width: auto; height: auto; margin: 0;
	padding: 13px 30px;
	font: 600 .95rem/1 var(--font);
	border-radius: 999px; cursor: pointer;
	transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .2s, color .2s;
}
body.inner #main_textbox button.pad-u,
body.inner #main_textbox input[type="submit"] { color: #fff; background: var(--navy); border: 1.5px solid var(--navy); }
body.inner #main_textbox button.pad-u:hover,
body.inner #main_textbox input[type="submit"]:hover { background: var(--navy-900); transform: translateY(-2px); box-shadow: var(--shadow); }
body.inner #main_textbox input[type="reset"] { color: var(--text); background: #fff; border: 1.5px solid #d9dfea; }
body.inner #main_textbox input[type="reset"]:hover { color: var(--crimson); border-color: var(--crimson); }
body.inner #main_textbox button.pad-u::after { content: " \2192"; margin-left: 8px; }

body.inner p#required { position: static; margin: 14px 0 0 !important; font-size: .8rem; font-weight: 500; color: var(--muted); }

/* server-side error list */
body.inner #errors_container ul.errors { margin: 0 0 16px; padding: 14px 18px; list-style: none; border-radius: 12px; background: #fdecef; }
body.inner #errors_container ul.errors li { margin: 0; padding: 2px 0; color: var(--crimson); }
body.inner #errors_container ul.errors li::before { display: none; }

/* quote cart list on the request page */
body.inner table#cart_items { width: 100%; margin: 6px 0 22px; border-collapse: separate; border-spacing: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
body.inner table#cart_items td { padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: .92rem; }
body.inner table#cart_items tr:last-child td { border-bottom: 0; }
body.inner table#cart_items td.remove { width: 1%; white-space: nowrap; }
body.inner table#cart_items td.remove a { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--crimson); color: var(--crimson); font-size: .78rem; font-weight: 600; text-decoration: none; }
body.inner table#cart_items td.remove a:hover { background: var(--crimson); color: #fff; }
body.inner td#no_items { color: var(--muted); text-align: center; background: #fafcff; }

/* ---------- testimonials ---------- */
body.inner div.quotation {
	position: relative;
	margin: 0 0 18px; padding: 24px 26px 18px;
	background: #fafcff; border: 1px solid var(--line); border-radius: 16px;
}
body.inner div.quotation::after { content: ""; display: table; clear: both; }
body.inner p.quo { display: none; }
body.inner div.quotation::before {
	content: "\201C"; position: absolute; top: 4px; left: 18px;
	font-family: Georgia, serif; font-size: 3.4rem; line-height: 1; color: var(--sky);
}
body.inner p.quote_text { max-width: none; margin: 0 0 12px; padding-left: 26px; font-size: 1rem; color: var(--ink); }
body.inner p.name { float: none; margin: 0; padding: 12px 0 0 26px; border-top: 1px solid var(--line); font-size: .9rem; font-weight: 700; color: var(--navy); }

/* ---------- misc legacy bits ---------- */
body.inner .clear-fix { clear: both; }
body.inner hr { border: 0; border-top: 1px solid var(--line); margin: 24px 0; }
body.inner #main_textbox img { max-width: 100%; height: auto; }
body.inner #main_textbox table:not(#info):not(#cart_items):not(#admin) td { padding: 6px 10px 6px 0; vertical-align: top; }

/* ---------- responsive ---------- */
@media (max-width: 991px) {
	/* Bootstrap stacks the columns here; put content first so visitors don't scroll past the long sidebar */
	body.inner > .container { display: flex; flex-direction: column; }
	body.inner > .container > #main { order: 1; }
	body.inner > .container > #sidebar { order: 2; }
	body.inner > .container > .clear-fix { order: 3; }
}
@media (max-width: 640px) {
	body.inner a.main_image, body.inner img.main_image { float: none; display: block; margin: 0 auto 18px; }
	body.inner div#product_frame ul.thumbs_container { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	body.inner table#info > tbody { grid-template-columns: 1fr; gap: 14px; }
}