/* Extracted from the inline <style> blocks that used to live in pages/pricelist_page.php.
   Part of the Bootstrap migration: page-specific CSS that isn't reused anywhere else gets
   its own file (matching css/laserova-blefaroplasticka.css) instead of living inline. */

/* Price box groups converted to real Bootstrap grid (.row.no-gutters > .col-md-4/-3).
   .no-gutters (stock Bootstrap utility, set in the HTML) removes Bootstrap's own 30px
   row/col gutter entirely, so spacing can be set precisely without stacking on top of it.
   col-md-4 (3-per-row .me groups): production sizes these boxes at width:32% (not 33.333%)
   with ZERO padding, using margin-right:23px for the gap instead — the top/bottom sections
   inside span the FULL box width with no inset. An earlier attempt used Bootstrap's default
   33.333% flex-basis with 11.5px padding each side to fake the same 23px gap, but that left
   every box's visible content inset by 11.5px on each side versus production, which has none.
   Overriding flex-basis/max-width to the same 32% production uses (instead of touching
   padding) leaves exactly enough slack in the row for the pre-existing .me margin-right:23px
   (and .me.no_margin/.me-no-margin:0) rules — already in the inline <style> block above,
   unchanged — to reproduce production's box model exactly, padding included. col-md-3
   (PRELEX group, not .me): production has 0 gap, so only its legacy margin-right (10px,
   from the base .price_tab_box rule) is zeroed. */
/* Scoped to min-width:768px (Bootstrap's own "md" breakpoint) to match col-md-4's own
   responsive behavior — below md, Bootstrap's col-md-4 itself has no flex-basis override
   and stacks full-width, and this rule must not fight that or every box gets forced to 32%
   width on mobile too, breaking the responsive 1-per-row stack (this shipped as a real
   regression once already — always test at a mobile viewport width after touching this). */
@media (min-width: 768px) {
	#pricelist .container .price_tab_body .row.no-gutters > .price_tab_box.col-md-4 {
		flex: 0 0 32%;
		max-width: 32%;
	}
}

/* Bootstrap's .row is display:flex with the default align-items:stretch, so every box in a
   row is stretched to match its tallest sibling (e.g. the taller "recommended" middle box).
   Production's .row has no such behavior (it's block/float based, no Bootstrap), so each box
   there is only as tall as its own content — stretching made the shorter boxes ~28px taller
   than production. flex-start opts these rows out of the stretch, matching production. */
#pricelist .container .price_tab_body .row.no-gutters {
	align-items: flex-start;
}

/* no extra width on .price_tab .row.no-gutters: the box grid lines up with its .price_tab header and the other sections on every width */

/* a .price_tab nested in another one (original markup) must not shrink to 90% a second time on smaller screens */
#pricelist .container .price_tab .price_tab {
	width: 100%;
	margin-left: 0;
	margin-right: 0;
}

#pricelist .container .price_tab_body .row.no-gutters > .price_tab_box.col-md-3 {
	margin-right: 0;
}

/* Bootstrap's reboot sets p{margin-top:0;margin-bottom:1rem}, which beats the site's
   own global *{margin:0} reset (a type selector always outranks the universal selector,
   regardless of load order) and leaks unwanted 16px gaps into every <p> inside the price
   boxes (prices, pros/cons lists, descriptions). Restore the boxes' own zero-margin
   behavior; #pricelist .price_tab_box p already outranks bare "p" so no !important needed. */
#pricelist .price_tab_box p {
	margin: 0;
}

/* Same leak as above, for headings: Bootstrap's reboot sets h1-h6{margin-bottom:0.5rem}
   (a type selector), beating the site's own *{margin:0} reset. Also, Bootstrap's
   body{line-height:1.5} is inherited by every element on the page (the site itself never
   sets a line-height, relying on the browser default of ~1.15-1.2, i.e. "normal") — 1.5
   line-height compounds across every wrapped line of text inside a box, making every price
   box noticeably taller than production's. Both restored here, scoped to the price boxes. */
#pricelist .price_tab_box h1,
#pricelist .price_tab_box h2,
#pricelist .price_tab_box h3,
#pricelist .price_tab_box h4,
#pricelist .price_tab_box h5,
#pricelist .price_tab_box h6,
#pricelist .price_tab_box ul {
	margin: 0;
}

/* Bootstrap's reboot also sets line-height:1.2 directly on h1-h6 (not just inherited from
   body), which beats the box-level line-height:normal below since a direct rule always wins
   over an inherited value regardless of specificity — so headings need their own override too. */
#pricelist .price_tab_box,
#pricelist .price_tab_box h1,
#pricelist .price_tab_box h2,
#pricelist .price_tab_box h3,
#pricelist .price_tab_box h4,
#pricelist .price_tab_box h5,
#pricelist .price_tab_box h6 {
	line-height: normal;
}

/* Same Bootstrap line-height:1.2-on-headings leak, different symptom: several places in this
   page vertically-center a single line of heading text by setting line-height equal to the
   container's own height (e.g. .price_tab_header_left{height:66px;line-height:66px}) — a
   classic single-line centering trick that only works if the heading actually inherits that
   line-height. Bootstrap's direct h1-h6 rule breaks it the same way it broke price-box
   headings above, just for headings outside .price_tab_box (.price_tab_header_left h3,
   .price_tab_vrch_left h3). line-height:inherit matches the pattern this codebase already
   uses for the analogous .price_tab_header2 .price_tab_header_left case. Scoped to the whole
   #pricelist rather than each instance individually, since this is a recurring pattern here,
   not a one-off — narrower per-instance fixes would just miss the next occurrence. */
#pricelist h1,
#pricelist h2,
#pricelist h3,
#pricelist h4,
#pricelist h5,
#pricelist h6 {
	line-height: inherit;
}

#pricelist .container .price_tab .price_tab_body .price_tab_box .price_tab_box_bottom {
	text-transform: initial!important;
}

.menu-top .cattegory {
	display: flex;
	padding: 12px;
	border: 2px solid #c1c3c2;
	margin-bottom: 40px;
}

.menu-top .cattegory a {
	padding: 0 15px;
	border-right: 1px solid #eee;
	line-height: 20px;
	font-family: var(--font-primary);
	text-transform: uppercase;
	color: var(--color-text);
	font-size: 14px;
	font-weight: 700;
	display: inline-table;
	width: 19%;
	box-sizing: border-box;
}
.menu-top .cattegory a span{
	height: 60px;
}

.menu-top .cattegory a:last-child {
	border-right: none;
}

.menu-top .cattegory a.active {
	color: var(--color-teal);
	font-weight: 700
}

.menu-top .cattegory a:hover {
	color: var(--color-teal)
}
.menu-top .select {
	height: 103px;
	padding: 0 18px;
	border: 2px solid #c1c3c2;
	background: var(--color-white);
	width: 100vw;
	font-family: var(--font-primary);
	font-size: 20px;
	color: var(--color-text);
	background-image: url(../img/relex-smile/select2.png) !important;
	background-position: right !important;
	background-repeat: no-repeat !important;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding-right: 45px;
	padding-left: 20px;
}
.mobil-navi {
	margin-bottom: 40px;
	display: none;
}

.mobil-navi ul {
	border-left: 2px solid #c1c3c2;
	border-right: 2px solid #c1c3c2;
	border-bottom: 2px solid #c1c3c2;
	margin-top: 0px;
	position: absolute;
	top: 103px;
	width: calc(100% - 1px);
	background: var(--color-white);
	z-index: 100;
	display: none;
}
.mobil-navi ul li {
	padding: 10px 10px;
	margin: 0px;
}

.mobil-navi ul li:hover {
	background-color: #c1c3c2;
}

@media (max-width: 1024px){

}


@media (max-width: 768px){

	.mobil-navi {
		display: block;
	}

	.menu-top {
		padding: 20px;
	}


	.menu-top .cattegory {
		display: none;
	}

}

#pricelist .container .price_tab .price_tab_body .price_tab_box .price_tab_box_bottom.extrem {
	background-image: url(../img/extrem-akcia-iclinic-back.png);
	background-position: right bottom;
	background-repeat: no-repeat;
	background-color: #c4e6e1;

}
@media (max-width: 767px){
	#pricelist .container .price_tab .price_tab_body .price_tab_box .price_tab_box_bottom.extrem {
		background: var(--color-white);

	}
}

.price_tab_box_top {
	cursor: pointer;

}

/* for new price card */
.price_tab_box_top_new {
	background: #dde6e1;
	padding: 30px 10px 30px 10px;
}
.price_tab_box_top_new h4 {
	font-size: 21px;
	color: var(--color-teal-dark);
	padding-bottom: 5px;
}
.price_tab_box_top_new h4 span {
	color: var(--color-teal-dark);
	font-weight: 500;
	font-size: 17px;
	padding-bottom: 5px;
}
.price_tab_box_top_new h5 {
	color: var(--color-teal-dark);
	font-weight: 500;
	font-size: 17px;
	padding-bottom: 5px;
}
.price_tab_box_top_new p {
	font-size: 14px;
}
.price_tab_box_bottom_new{
	background: var(--color-white);
	text-align: left;
	padding: 20px 10px 20px 10px;
}
.pros, .cons {
	margin-bottom: 10px;
	font-size: 14px;
}
.pros span {
	background: var(--color-teal);
	padding: 2px 6px;
	margin-right: 7px;
	max-height: 17px;
}
.cons span {
	background: #dddddd;
	padding: 2px 8px;
	margin-right: 7px;
	max-height: 17px;
}
.recommended-badge {
	background: linear-gradient(to right,
        rgba(255, 136, 0, 1) 0%,
        rgba(255, 194, 0, 1) 100%
    );
	padding: 5px 0px;
	color: #ffffff;
	left: 0;
	bottom: 0;
}
.price_box_middle{
	margin-top: -30px;
}
.price_box_middle .price_tab_box_bottom_new{
	padding-bottom: 50px;
}
/* for new price card */



#pricelist .container .price_tab .price_tab_body .price_tab_box {
    width: 25%;
    margin-right: 0px;
}
#pricelist .container .price_tab .price_tab_body .price_tab_box .price_tab_box_top {
    width: 95%;
}
#pricelist .container .price_tab .price_tab_body .price_tab_box .price_tab_box_bottom {
    width: 95%;
}



@media (max-width: 1366px){
	#pricelist .container .price_tab .price_tab_body .price_tab_box.me {
		width: 85%;
	}
}
@media (max-width: 1024px){

	.zaruka-container {
		width: 90%;
		margin: 0px auto 30px auto;
	}

	#pricelist .container .price_tab {
		width: 90%;
		margin: 0px auto 55px auto;
	}

	.warranty-center {
		padding: 7px 30px 15px 30px;
	}

}

@media (max-width: 820px){
	.price_box_middle{
		margin-top: 10px;
	}
	.price_box_middle .price_tab_box_bottom_new {
		padding-bottom: 15px;
	}
	.recommended-badge {
		font-size: 12px;
	}

}

@media (max-width: 768px){
	/* mobile */

	.no-mobile, .old-price {
		font-size: 14px!important;
	}

	.only-mobile {
		display: initial!important;
	}

	#pricelist .smart-hore {
		display: inherit!important;
	}

	#pricelist .price_tab {
		width: 90%;
		margin: 0px auto;
	}
	#pricelist .price_tab .price_tab_header{
		display: flex;
		height: auto!important;
	}

	#pricelist .container .price_tab .price_tab_header .price_tab_header_left {
		height: auto!important;
	}


	#pricelist .price_tab .price_tab_header_left {
		width: 65%!important;
		display: flex!important;
	}
	#pricelist .container .price_tab .price_tab_header .price_tab_header_left h3 {
		padding: 10px !important;
		font-size: 15px;
		margin-top: 0px!important;
	}

	#pricelist .price_tab .price_tab_header_right {
		width: 35%!important;
		float: right!important;
		display: flex!important;
		height: auto!important;
	}

	#pricelist .price_tab .price_tab_header_right p{
		width: 100%!important;
		line-height: 4;
	}
	#pricelist .container .price_tab .price_tab_body .price_tab_box {
		margin-bottom: 10px;
		display: flex;
		float: none;
		width: 100%!important;
	}

	#pricelist .container .price_tab .price_tab_body .price_tab_box .price_tab_box_top {
		width: 65%;
		display: flex;
		float: left;
		height: auto!important;

	}

	#pricelist .container .price_tab .price_tab_body .price_tab_box .price_tab_box_bottom {
		width: 35%;
		display: flex;
		float: right!important;
		height: auto!important;

	}

	#pricelist .container .price_tab .price_tab_body .price_tab_box .price_tab_box_top p {

		font-size: 18px;
		font-weight: 700;
		vertical-align: top!important;
		text-align: left;
		padding: 10px;
	}

	#pricelist .container .price_tab .price_tab_body .price_tab_box .price_tab_box_top p span {
		font-size: 14px;
		font-weight: 400;
		display: block;
		text-transform: initial!important;
	}



	#pricelist .container .price_tab .price_tab_body .price_tab_box .price_tab_box_bottom p {
		font-size: 20px;
		font-weight: 700;
		text-align: center;
		 display: flex;
		justify-content:center;
		align-content:center;
		flex-direction:column;
	}

	#pricelist .container .price_tab .price_tab_body .price_tab_box .price_tab_box_bottom span{
		text-transform: initial!important;
	}

	#pricelist .container .price_tab .price_tab_body .price_tab_box .price_tab_box_bottom p .kupon {
		display: none;
	}

	#pricelist .container .price_tab .price_tab_header .price_tab_header_right p {
		color: var(--color-teal);
		font-size: 20px;
		font-weight: 700;
		text-align: center;
		display: flex!important;
		justify-content:center;
		align-content:center;
		flex-direction:column;
	}

	#pricelist .price_text {
		width: 90%!important;
		padding-right: 0px!important;
		padding-left: 0px!important;
		margin: 0px auto;
		margin-top: 20px;
	}

	.smart-hore {
		position: relative;
		top: -10px;
	}

	.bgs {
		background: #c20029 url(../img/extrem-akcia-iclinic-line.png) repeat-y !important;
		padding-top: 7px;
		padding-bottom: 7px;
		color: var(--color-white);
	}

	.bez-bg {
		background: none!important;
	}

	.bgs p {
		padding: 0px 10px!important;
	}

	.smart-a {
		font-size: 16px!important;
		font-weight: 400!important;
		display: block!important;
		color: var(--color-teal-dark)!important;
		text-transform: initial!important;
	}
	.zaruka-container {
		width: 90%!important;
		margin: 0px auto!important;
	}

	.warranty-sub ul li {
		margin-left: 0px;
	}

	#pricelist .mobile-off {
		display: none!important;
	}

	#pricelist .container .price_tab .price_tab_body .price_tab_box .price_tab_box_bottom p .kupon {
		display: block;
	}

	#pricelist .container .price_tab .price_tab_body .price_tab_box .price_tab_box_bottom p .kupon span{
		display: none!important;
	}

	#pricelist .gr_left_pricelist {
		float: none;
		margin: 0px auto 30px auto;
		width: auto!important;
		padding: 20px;
	}

	.gr_result .gr_box_closed, .gr_result .gr_box_customers, .gr_result .gr_box_spare {
		background-color: var(--color-white);
	}

	.vacsi-padding .price_tab_box_bottom p {
		padding: 10px;
	}
}

/* xmas banner */
#xmas {
	background-color: var(--color-teal-dark);
	width: 100%;
	margin: 20px 0px;
	display: block;
	overflow: hidden;
	color: var(--color-white);
	max-height: 198px;
}

.xmas-left {
	float: left;
	width: 305px;
}

.xmas-right {
	float: right;
	width: calc(100% - 305px);
}

.xmas-img {
	max-width: 305px;
}

.xmas-text{
	width: 65%;
	float: left;
	padding: 30px;
	text-align: left;
	box-sizing: border-box;
}

#pricelist .container .xmas-text h2 {
	font-weight: 600;
	font-size: 20px;
	margin-bottom: 10px;
}

.xmas-btn{
	width: 35%;
	float: left;
	box-sizing: border-box;
}

.xmas-btn .jumble {
	color: rgb(255, 255, 255);
	background-color: rgb(255, 170, 5);
	position: relative;
	left: 0px;
	text-align: center;
	padding: 20px;
	font-size: 14px;
	font-weight: 600;
	border-radius: 3px;
	text-transform: uppercase;
	line-height: 200px;
}


.dudo_calculator{
	display: flex !important;
	justify-content: center;
	padding: 12px 00px;
	max-width: 80%;
	margin: 0 auto;
	margin-top: 10px;
}
.dudo_calculator .dudo_plus {
	height: 15px;
	line-height: 21px; /* centers the "*" glyph in the 15px badge */
	font-size: 20px !important;
	background: rgb(255, 170, 5);
	color: var(--color-white);
	width: 15px;
	text-align: center;
}
.dudo_calculator .dudo_text{
	padding: 10px;
	text-align: center;
	align-items: center;
	background: #1f5f7d;
	text-transform: lowercase;
	font-weight: 500 !important;
}
.dudo_calculator .dudo_text strong{
	text-transform: uppercase;
	font-weight: bold !important;
}
#pricelist .container .price_tab .price_tab_body .price_tab_box:hover .dudo_calculator .dudo_text{
	background: #36b5ae;
}


@media (max-width: 1100px){
	.xmas-text{
		margin-top: 5%;
		padding: 10px;
	}

	#pricelist .container .xmas-text h2 {
		font-size: 16px;
		margin-bottom: 10px;
	}

	.xmas-text p {
		font-size: 14px;
	}
}


@media (max-width: 767px){
	#xmas {
		margin: 20px auto;
		max-height: initial;
		cursor: pointer;
	}

	.xmas-left, .xmas-right, .xmas-text, .xmas-btn {
		float: initial;
		width: 100%;

	}

	.xmas-img {
		max-width: 100%;
	}

	.xmas-btn .jumble {
		line-height: 0px;
	}

	.xmas-btn {
		margin: 20px 0px;
	}

	.xmas-right {
		padding: 20px 0px;
	}

	.xmas-text p {
		padding: 10px;
	}


	.xmas-text {
		margin-top: 0px;
		padding: 10px;
		text-align: center;
		box-sizing: border-box;
	}

	#pricelist .container {
		width: 100%;
		padding-left: 0px;
		padding-right: 0px;
	}

	#pricelist .container .xmas-text h2 {
		margin-bottom: 0px;
	}

	.dudo_calculator{
		max-width: 100%;
	}
	.dudo_calculator .dudo_text{
		font-size: 13px !important;
	}

}

@media (max-width: 390px){
	.dudo_calculator .dudo_text{
		font-size: 11px !important;
	}
}

/* "mám šedý zákal" section */
.blinking-text {
    font-weight: bold;
    color: #CC0033;
    animation: blink 3s infinite;
	text-decoration: none;font-size: 20px;
	padding: 10px 0 30px 0;
}

@keyframes blink {
    0%, 90% {
        opacity: 1;
    }
    91%, 100% {
        opacity: 0;
    }
}


/* Price-box content classes, replacing repeated inline style="" attributes throughout
   pages/pricelist_page.php with reusable classes (Bootstrap migration: inline CSS -> classes).
   old-price/no-mobile/kupon are class names already present in the markup that never had a
   base (desktop) CSS rule defined anywhere — their entire visual appearance came from an
   inline style="" repeated at every usage. Defined properly here instead of inventing new,
   parallel class names. .kupon itself is left alone (it already has mobile-only visibility
   rules elsewhere) — price-current/--lg/--sale are added alongside it for the desktop price
   text styling that used to be inline, and deal-ribbon-bottom/-top/--teal are added alongside
   "kupon mobile-off" for the (unrelated) ribbon-banner usage of the same "kupon" class name. */

/* full #pricelist chain: beats the legacy "... .price_tab_box_bottom p span{font-size:16px;font-weight:400}" in style-inline.css */
.old-price,
#pricelist .container .price_tab .price_tab_body .price_tab_box .price_tab_box_bottom p span.old-price {
	color: var(--color-teal);
	font-size: 18px;
	font-weight: bold;
	text-decoration: line-through;
}

.price-current,
#pricelist .container .price_tab .price_tab_body .price_tab_box .price_tab_box_bottom p span.price-current {
	font-weight: bold;
	color: var(--color-teal-dark);
	font-size: 26px;
}

.price-current--lg,
#pricelist .container .price_tab .price_tab_body .price_tab_box .price_tab_box_bottom p span.price-current--lg {
	font-weight: bold;
	color: var(--color-teal-dark);
	font-size: 36px;
}

.price-current--sale,
#pricelist .container .price_tab .price_tab_body .price_tab_box .price_tab_box_bottom p span.price-current--sale {
	font-weight: bold;
	color: #cc0033;
	font-size: 26px;
}

/* chained copies: inline styles became classes; the legacy #pricelist chain rules in style-inline.css outranked them */
.price-bottom-text,
#pricelist .container .price_tab .price_tab_body .price_tab_box .price_tab_box_bottom p.price-bottom-text {
	font-size: 16px;
	vertical-align: middle;
}

.price-bottom-text--center,
#pricelist .container .price_tab .price_tab_body .price_tab_box .price_tab_box_bottom p.price-bottom-text--center {
	font-size: 16px;
	vertical-align: middle;
	text-align: center;
}

/* !important on display is necessary here: a pre-existing, much higher-specificity legacy
   rule (#pricelist .container .price_tab .price_tab_body .price_tab_box .price_tab_box_bottom
   p span{display:block}) forces every span inside a price box's bottom paragraph to block —
   the original inline style="display:inline" always won only because inline style beats any
   external rule regardless of specificity; converting it to a plain class lost that. */
.no-mobile {
	color: var(--color-teal-dark);
	display: inline !important;
	font-size: 16px;
	text-transform: initial !important;
}

.only-mobile {
	display: none;
}

.price-title--top23,
#pricelist .container .price_tab .price_tab_body .price_tab_box .price_tab_box_top p.price-title--top23 {
	text-transform: initial !important;
	padding-top: 23px;
	vertical-align: top;
}

.price-title--top24,
#pricelist .container .price_tab .price_tab_body .price_tab_box .price_tab_box_top p.price-title--top24 {
	text-transform: initial !important;
	padding-top: 24px;
	vertical-align: top;
}

.price-title--top16,
#pricelist .container .price_tab .price_tab_body .price_tab_box .price_tab_box_top p.price-title--top16 {
	text-transform: initial !important;
	padding-top: 16px;
	vertical-align: top;
}

.price-desc,
#pricelist .container .price_tab .price_tab_body .price_tab_box .price_tab_box_top p span.price-desc {
	text-transform: initial !important;
	font-weight: 400;
}

/* color/font-weight need !important on all three: the same pre-existing, much higher-
   specificity legacy rule as .no-mobile above (#pricelist .container .price_tab
   .price_tab_body .price_tab_box .price_tab_box_bottom p span{font-weight:400;color:#1e607d})
   also matches these ribbon spans and would otherwise win over a plain class — the original
   inline style="color:#fff;font-weight:bold" always beat it only because inline style has
   unconditional priority over any external rule. */
.deal-ribbon-bottom {
	font-weight: bold !important;
	background-image: url(../img/extrem-akcia-iclinic-line.png);
	padding-top: 7px;
	padding-bottom: 7px;
	position: absolute;
	bottom: 0px;
	color: var(--color-white) !important;
	width: 100%;
	text-transform: uppercase;
}

.deal-ribbon-bottom--teal {
	font-weight: bold !important;
	background: var(--color-teal);
	padding-top: 7px;
	padding-bottom: 7px;
	position: absolute;
	bottom: 0px;
	color: var(--color-white) !important;
	width: 100%;
	text-transform: uppercase;
}

.deal-ribbon-top {
	font-weight: bold !important;
	background-image: url(../img/extrem-akcia-iclinic-line.png);
	padding-top: 7px;
	padding-bottom: 7px;
	position: absolute;
	top: 0px;
	color: var(--color-white) !important;
	width: 100%;
	text-transform: uppercase;
}

/* "iny problem s ocami" 4-per-row grid (13 items, .price_tab.last): 13 is not a multiple of
   4, so the last box wraps alone onto its own row (this exact grouping matches production,
   verified) — left-aligned, matching every other row on this page rather than centering it
   as a special case. */
.price_tab.last .row.no-gutters > .price_tab_box:last-child {
	margin-left: 0 !important;
	margin-right: auto !important;
	float: none;
}

/* phones + 768px: every price box stacks full width with no side gap (768 included: there Bootstrap's col-md-* and the legacy max-width:768px mobile rules both apply).
   [class][class] only raises specificity above the page's inline .me / .no_margin rules. */
@media (max-width: 768px) {
	#pricelist .container .price_tab .price_tab_body .price_tab_box[class][class] {
		margin-left: 0;
		margin-right: 0;
	}
	#pricelist .container .price_tab_body .row.no-gutters > .price_tab_box[class*="col-md-"] {
		flex: 0 0 100%;
		max-width: 100%;
	}
}

/* tablet: inline-block box groups (not .row) are centred, so the gap goes on both sides; .me boxes 3 per row */
@media (min-width: 769px) and (max-width: 1220px) {
	#pricelist .container .price_tab .price_tab_body > .price_tab_box[class] {
		margin-left: 5px;
		margin-right: 5px;
	}
	#pricelist .container .price_tab .price_tab_body > .price_tab_box.me[class] {
		width: calc(33.333% - 14px);
		margin-left: 5px;
		margin-right: 5px;
	}
}

/* col-md-3 groups (4 per row): equal 15px gap only between boxes, so the first and last box line up with the table edges
   (the legacy inner width:95% left a gap after the last box too). No :has() support = no gap, nothing breaks. */
@media (min-width: 769px) {
	#pricelist .container .price_tab_body .row.no-gutters:has(> .price_tab_box.col-md-3) {
		column-gap: 15px;
	}
	/* the legacy .row clearfix ::before/::after would be flex items and take a gap slot (first box shifted 15px) */
	#pricelist .container .price_tab_body .row.no-gutters:has(> .price_tab_box.col-md-3)::before,
	#pricelist .container .price_tab_body .row.no-gutters:has(> .price_tab_box.col-md-3)::after {
		content: none;
	}
	#pricelist .container .price_tab_body .row.no-gutters > .price_tab_box.col-md-3 {
		flex: 0 0 calc((100% - 45px) / 4);
		max-width: calc((100% - 45px) / 4);
		margin-right: 0;
	}
	#pricelist .container .price_tab_body .row.no-gutters > .price_tab_box.col-md-3 .price_tab_box_top,
	#pricelist .container .price_tab_body .row.no-gutters > .price_tab_box.col-md-3 .price_tab_box_bottom {
		width: 100%;
	}
}