/* -------------
 * Selects
 * ------------- */
/* Custom Select*/
span.customSelect {
	
	-moz-border-radius:0px;
	-webkit-border-radius:0px;
	-khtml-border-radius:0px;
	border-radius: 0px;
	font-size:14px;
	border: 1px solid #eee;
	background-color: #fff;
	color: #777;
	text-decoration: none;
	white-space: nowrap;
	text-align:left;
}
span.customSelect option {font-size:12px !important;}
span.customSelect.changed {
	background-color: #f0dea4;
}
.customSelectOpen {
  -moz-box-shadow: 0 0 3px #bbb;
  -webkit-box-shadow: 0 0 3px #bbb; 
  box-shadow: 0 0 3px #bbb;
}

.customSelectInner {
	background:url('../../image/megnor/select-arrow-down.gif') no-repeat center right;
	width:100% !important;
}
.customSelectOpen .customSelectInner{ background:url('../../image/megnor/select-arrow-up.gif') no-repeat center right; }

#input-sort , #input-limit, #product .form-group select { cursor:pointer;}


/* TREEVIEW CATEGORY LEFT */
.treeview-list, .treeview-list ul { 
	padding: 0;
	margin: 0;
	list-style: none;
}
.treeview-list ul {
	background:none; 
	margin:0px;
}
.treeview-list .hitarea {
	background: none;
	height: 9px;
	width: 9px;
	float: right;
	cursor: pointer;
}
/* fix for IE6 */
* html .hitarea { display: inline;float:none; }
.treeview-list li { margin: 0; border-bottom:1px solid #ddd; }
.treeview-list li.last, .treeview-list li.lastExpandable {border:none;}
.treeview-list a.selected { background-color: #eee; }

.treeview-list .hover { color:#38B0E3; cursor: pointer; }
.treeview-list li a:hover,.treeview-list li.nav-1 a:hover	 {   cursor:pointer; }
.treeview-list li ul li:hover	{ background:none;}
.treeview-list li a { display:inline;  padding-left:0px; }
.treeview-list li.active a	{ font-weight:bold; /*color:#D09E00 ;*/  } 
.treeview-list li.active ul li a	{ font-weight:normal; color:#5E5E5E;}
.treeview-list li a:hover  {/*color:#D09E00;*/ } 	
.treeview-list li ul li a:hover	{/*color:#D09E00;*/ } 	
.treeview-list li ul li { background:none; border-bottom:none; }
.treeview-list .collapsable .expandable-hitarea { 
	background: url(../../image/megnor/sprite.png) no-repeat scroll -36px -126px transparent;
    height: 25px;
    width: 30px;  
} 
.treeview-list .expandable .collapsable-hitarea{ 
	background: url(../../image/megnor/sprite.png) no-repeat scroll -7px -127px transparent;
    height: 25px;
    width: 30px;  
} 

.treeview-list .expandable-hitarea { 
	background: url(../../image/megnor/sprite.png) no-repeat scroll -7px -127px transparent;
    height: 25px;
    width: 30px;  
} 
.treeview-list .collapsable-hitarea { 
	background: url(../../image/megnor/sprite.png) no-repeat scroll -36px -126px transparent;
    height: 25px;
    width: 30px;
} 
/* TREEVIEW CATEGORY LEFT */


/* FancyBox */

.fancybox-wrap,
.fancybox-skin,
.fancybox-outer,
.fancybox-inner,
.fancybox-image,
.fancybox-wrap iframe,
.fancybox-wrap object,
.fancybox-nav,
.fancybox-nav span,
.fancybox-tmp
{
	padding: 0;
	margin: 0;
	border: 0;
	outline: none;
	vertical-align: top;
}

.fancybox-wrap {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 8020;
}

.fancybox-skin {
	position: relative;
	background: #f9f9f9;
	color: #444;
	text-shadow: none;
	-webkit-border-radius: 4px;
	 -khtml-border-radius: 4px;
	   -moz-border-radius: 4px;
	        border-radius: 4px;
}

.fancybox-opened {
	z-index: 8030;
}

.fancybox-opened .fancybox-skin {
	-webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
	   -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
	        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

.fancybox-outer, .fancybox-inner {
	position: relative;
}

.fancybox-inner {
	overflow: hidden;
}

.fancybox-type-iframe .fancybox-inner {
	-webkit-overflow-scrolling: touch;
}

.fancybox-error {
	color: #444;
	font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
	margin: 0;
	padding: 15px;
	white-space: nowrap;
}

.fancybox-image, .fancybox-iframe {
	display: block;
	width: 100%;
	height: 100%;
}

.fancybox-image {
	max-width: 100%;
	max-height: 100%;
}

#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
	background-image: url('../../image/megnor/fancybox_sprite.png');
}

#fancybox-loading {
	position: fixed;
	top: 50%;
	left: 50%;
	margin-top: -22px;
	margin-left: -22px;
	background-position: 0 -108px;
	opacity: 0.8;
	-webkit-opacity: 0.8;
	-moz-opacity: 0.8;
	-khtml-opacity: 0.8;
	cursor: pointer;
	z-index: 8060;
}

#fancybox-loading div {
	width: 44px;
	height: 44px;
	background: url('../../image/megnor/fancybox_loading.gif') center center no-repeat;
}

.fancybox-close {
	position: absolute;
	top: -18px;
	right: -18px;
	width: 36px;
	height: 36px;
	cursor: pointer;
	z-index: 8040;
}

.fancybox-nav {
	position: absolute;
	top: 0;
	width: 40%;
	height: 100%;
	cursor: pointer;
	text-decoration: none;
	background: transparent url('../../image/megnor/blank.gif'); /* helps IE */
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	z-index: 8040;
}

.fancybox-prev {
	left: 0;
}

.fancybox-next {
	right: 0;
}

.fancybox-nav span {
	position: absolute;
	top: 50%;
	width: 36px;
	height: 34px;
	margin-top: -18px;
	cursor: pointer;
	z-index: 8040;
	visibility: hidden;
}

.fancybox-prev span {
	left: 10px;
	background-position: 0 -36px;
}

.fancybox-next span {
	right: 10px;
	background-position: 0 -72px;
}

.fancybox-nav:hover span {
	visibility: visible;
}

.fancybox-tmp {
	position: absolute;
	top: -99999px;
	left: -99999px;
	visibility: hidden;
	max-width: 99999px;
	max-height: 99999px;
	overflow: visible !important;
}

/* Overlay helper */

.fancybox-lock {
	overflow: hidden;
}

.fancybox-overlay {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	display: none;
	z-index: 8010;
	background: url('../../image/megnor/fancybox_overlay.png');
}

.fancybox-overlay-fixed {
	position: fixed;
	bottom: 0;
	right: 0;
}

.fancybox-lock .fancybox-overlay {
	overflow: auto;
	overflow-y: scroll;
}

/* Title helper */

.fancybox-title {
	visibility: hidden;
	font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
	position: relative;
	text-shadow: none;
	z-index: 8050;
}

.fancybox-opened .fancybox-title {
	visibility: visible;
}

.fancybox-title-float-wrap {
	position: absolute;
	bottom: 0;
	right: 50%;
	margin-bottom: -35px;
	z-index: 8050;
	text-align: center;
}

.fancybox-title-float-wrap .child {
	display: inline-block;
	margin-right: -100%;
	padding: 2px 20px;
	background: transparent; /* Fallback for web browsers that doesn't support RGBa */
	background: rgba(0, 0, 0, 0.8);
	-webkit-border-radius: 15px;
	 -khtml-border-radius: 15px;
	   -moz-border-radius: 15px;
	        border-radius: 15px;
	text-shadow: 0 1px 2px #222;
	color: #FFF;
	font-weight: bold;
	line-height: 24px;
	white-space: nowrap;
}

.fancybox-title-outside-wrap {
	position: relative;
	margin-top: 10px;
	color: #fff;
}

.fancybox-title-inside-wrap {
	padding-top: 10px;
}

.fancybox-title-over-wrap {
	position: absolute;
	bottom: 0;
	left: 0;
	color: #fff;
	padding: 10px;
	background: #000;
	background: rgba(0, 0, 0, .8);
}

.zoomContainer .zoomLens{
	cursor: url(../../image/megnor/zoom.png), pointer !important;
	border:none !important;
	opacity:0 !important;
}
.zoomContainer .zoomWindow{

	/*border:2px solid #DBDEE1 !important;
	-webkit-box-shadow: 3px 4px 4px -1px #999999;
	-moz-box-shadow: 3px 4px 4px -1px #999999;
	box-shadow: 3px 4px 4px -1px #999999;*/

}

/* FancyBox */

.last_item_tm .product-block{}
.first_item_tm .product-block{}


.toggle .mobile_togglemenu{ 
	background: url("../../image/megnor/toggle-arrow.png") no-repeat scroll right 2px transparent;
    cursor: pointer;
    display: block;
    margin-top: -25px;
    overflow: hidden;
    padding: 0 0 10px;
    position: absolute;
    width: 100%;
}

.toggle {
   
}

.active .mobile_togglemenu { background-position:right -50px; }
#footer .mobile_togglemenu:hover	{ text-decoration:none;}

/* Responsive menu Css Start */
.nav-responsive span { display:inline-block;}
.ie7 .nav-responsive span { display:inline;}
.nav-responsive { cursor:pointer; display:none;  }
.main-navigation  ul  li{ list-style:none; position:relative;}
.nav-responsive .expandable{
background: url("../../image/megnor/sprite.png") no-repeat scroll 0 -575px transparent;
height: 25px;
margin-top:12px;
width: 30px;	
} 
.responsive-menu {padding:0; position:relative;}
.responsive-menu .main-navigation{ 
	position:absolute; 
	z-index:999;  
	display:none; 
	margin-top:0px; 
	padding:1%;
	width:100%; 
	list-style:none;
}
.responsive-menu .main-navigation ul{padding-left:20px;}
.nav-responsive div,
.responsive-menu .hitarea {
	background: none;
	height: 9px;
	width: 9px;
	float: right;
	cursor: pointer;
	margin-right:15px;
}
.responsive-menu .hitarea{margin-right:0;}
.responsive-menu .collapsable-hitarea {
    height: 30px;
    width: 25px;
    padding: 5px;
}
.responsive-menu .expandable .collapsable-hitarea::before, .responsive-menu .expandable-hitarea::before {
	color: #fff;
	content: "\f067";
	font-family: "FontAwesome";
	font-size: 10px;
	line-height: 26px;
}
.responsive-menu .collapsable-hitarea::before {
	color: #fff;
	content: "\f068";
	font-family: "FontAwesome";
	font-size: 10px;
	line-height: 26px;
}
@media (max-width: 979px) {
	
	.responsive-menu .expandable-hitarea {
		height: 30px;
		width: 25px;
		padding: 5px;
		line-height: 20px;
	}
}
/* Responsive menu Css End */

/* Header logo: cap rendered width to 250px regardless of source image dimensions */
.header-logo #logo img,
.header-logo img.img-responsive {
	max-width: 250px;
	height: auto;
}

/* Product page: keep wishlist+compare button group on its own row below
   the qty/Add-to-Cart row, regardless of label length. Demo's English
   labels happen to be long enough to wrap; our shorter LT/LV/ET labels
   ("Pageidauti", "Palyginti") fit on one line and otherwise sit inline. */
.product-info .form-group.cart .btn-group.wish-comp,
#product .form-group.cart .btn-group.wish-comp {
	display: block;
	clear: both;
	width: 100%;
	margin-top: 12px;
}

/* Header search: match button vertical padding to input so they align.
   Theme defaults give input ~37px and button ~39px — 2px taller — which
   shows up in our install once the live-search dropdown markup is added.
   Setting padding-top/bottom equal to the input's 8.3px brings them in
   line. */
.header-search #search .input-group-btn .btn-lg,
.header-search #search .btn.btn-default.btn-lg {
	padding-top: 8.3px;
	padding-bottom: 8.3px;
}

.header-search {
	right: 0;
}

.sidebar-category .box-content {
	min-height: 458px;
}

/* Min-quantity alert overlapped wishlist/compare buttons because the buttons
   above float without a clear underneath. Clear floats so the alert sits
   below the button row. */
#product .alert,
.product-right .alert {
	clear: both;
}
.product-right #product .form-group.cart::after {
	content: "";
	display: table;
	clear: both;
}

/* Contact page: drop the dark #292929 background on the left info column.
   Recolor text + sprite-icon borders to #777 so they're readable on the
   page's light grey background. The cms-sprite.png icons are inverted via
   CSS filter — they were designed for dark backgrounds (white outline). */
.contact-form-design .left {
	background: transparent;
	color: #777;
}
.contact-form-design .address-detail,
.contact-form-design .address-detail1,
.contact-form-design .telephone,
.contact-form-design .fax,
.contact-form-design .time,
.contact-form-design .email {
	border-bottom-color: #434343;
}
.contact-form-design .left .image,
.contact-form-design .left .telephone .image,
.contact-form-design .left .fax .image,
.contact-form-design .left .time .image,
.contact-form-design .left .comment .image,
.contact-form-design .left .email .image,
.contact-form-design .left .fa.fa-map-marker {
	border-color: #777;
	filter: invert(0.55);
}
.contact-form-design .left .btn.btn-info {
	color: #777;
	border-top-color: #434343;
}
.contact-form-design .email a,
.contact-form-design .left .btn.btn-info:hover {
	color: #555;
}
.contact-form-design .address-detail .img-thumbnail {
	background: transparent;
	border: none;
	padding: 0;
}

.footer-payment img {
	max-width: 100%;
	height: auto;
}

#footer_social_widgets {
	margin-top: 12px;
}
#footer_social_widgets .fb-page,
#footer_social_widgets .fb_iframe_widget {
	display: inline-block;
}
@media (max-width: 978px) {
	#footer_social_widgets {
		text-align: center;
	}
}

/* Copyright row: side-by-side 50/50 on desktop, stacked full-width on mobile. */
.copyright-container.container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
.copyright-container.container > .footer-container,
.copyright-container.container > .content_footer_bottom {
	flex: 0 0 50%;
	max-width: 50%;
	float: none;
}
@media (max-width: 767px) {
	.copyright-container.container > .footer-container,
	.copyright-container.container > .content_footer_bottom {
		flex: 0 0 100%;
		max-width: 100%;
	}
}

.contact-form-design .address-detail {
	text-align: center;
}
.contact-form-design .address-detail img {
	display: inline-block;
	float: none;
}

/* Contact page: extend the row-style applied to .telephone/.fax/.time
   to our new .email block so it gets the same float/border separator,
   matching circular icon, and inline heading. The cms-sprite.png that
   feeds the other icons doesn't have an envelope, so we draw one with
   FontAwesome via the .image pseudo-element. */
.contact-form-design .email {
	float: left;
	width: 100%;
	padding: 4px 0 10px;
	border-bottom: 1px solid #434343;
}
.contact-form-design .left .email .image {
	width: 45px;
	height: 45px;
	float: left;
	margin: 10px 10px 0 0;
	border: 1px solid #fff;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	text-align: center;
	line-height: 43px;
}
.contact-form-design .left .email .image::before {
	font-family: FontAwesome;
	content: "\f0e0"; /* fa-envelope */
	font-size: 18px;
	color: #fff;
}
.contact-form-design .email strong {
	padding: 0;
	margin: 10px 0 0;
	height: 28px;
	float: left;
	font-weight: 600;
}
.contact-form-design .email address {
	margin: -15px 0 0 55px;
	clear: both;
}
.contact-form-design .email address a {
	color: inherit;
	text-decoration: underline;
}

/* Footer social icons: theme's social_sprite.png covers only Twitter,
   RSS, Google+ and Facebook. Pinterest and Instagram aren't there, so
   draw all three with FontAwesome instead, scoped to .footer-top so
   any other usage of .facebook elsewhere still uses the original
   sprite styling.

   Theme's `.facebook a { float:left; padding:0 5px; margin:0 12px }`
   would still leak in (specificity 0,0,1,1) and offset Facebook
   against Pinterest/Instagram. Override float/padding/margin in our
   rule so all three sit identically in the row. */
/* Vertically center the social icons inside the 80px-tall .social
   block. Theme defaults `.social > ul { padding: 32px 10px }` —
   that suited the original sprite icons but our 30px-tall FA icons
   plus 64px vertical padding overflows the 80px container, so the
   icons drift down. (80 - 30) / 2 = 25px brings them centered. */
.footer-top .social > ul {
	padding: 25px 10px;
}

/* Sale badge: theme's .sale uses /image/megnor/sale.png with the
   English word "Sale" baked in. Replace the sprite with a solid pill
   and let the OCMOD-modified twig templates render "-X%" inside.
   The slide-from-right animation is preserved by leaving
   position/right/transition alone. */
.saleicon.sale {
	background: #b8b8b8 !important;
	color: #fff;
	padding: 5px 10px;
	font-size: 11px;
	font-weight: bold;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	line-height: 1;
	height: auto !important;
	width: auto !important;
	min-width: 0;
	opacity: 1 !important;
	right: 0 !important;
	left: auto !important;
	top: 0 !important;
}

/* Product detail main image: theme only sets position:relative on
   .product-thumb .image, but the product page uses
   .left.product-image .image (no .product-thumb wrapper). Without a
   positioned ancestor the .sale badge anchors to <body> and slides
   off to the right edge of the viewport. Anchor it to the image
   container so right:0 lands on the image's right edge instead. */
.product-info .product-image .image,
.left.product-image .image {
	position: relative;
}

/* Bootstrap's default .btn[disabled] opacity (.65) leaves disabled buttons
   still looking too active against this theme's contrast. Lower to .35 so
   they read as clearly unavailable. */
.btn.disabled,
.btn[disabled],
fieldset[disabled] .btn {
	filter: alpha(opacity=35);
	opacity: .35;
}

/* Override the theme's shared button rule (which paints .btn-primary,
   .btn-default, #button-cart, etc. all in #b8b8b8) for primary CTAs.
   Buttons like .btn-default, .button.aboutus, .btn-info stay on the grey
   base; .btn-primary and the product detail #button-cart get black. */
.btn-primary,
#button-cart {
	background: #313131;
}

/* Notify-when-available modal: the OCMOD-injected form uses `class="form-groups"`
   (a typo for Bootstrap's `form-group`), so it doesn't get Bootstrap's default
   margin-bottom between rows. Restore the spacing so labels/inputs/textarea
   don't sit flush against each other. */
#notify_when_available .form-groups {
	margin-bottom: 15px;
}
#notify_when_available .form-groups:last-child {
	margin-bottom: 0;
}

/* Theme's bootstrap.min.css overrides .modal-backdrop { z-index: 0 } — a bad
   override of Bootstrap's standard 1040. With backdrop at 0, positioned
   elements on the page (search input, category menu, dropdowns) sit above
   the dark overlay when a modal is open, breaking focus.

   header.twig loads megnor/bootstrap.min.css AFTER this file, so we need
   !important to win against the source-order cascade. */
.modal-backdrop {
	z-index: 1040 !important;
}

/* Product detail cart buttons: theme's .btn-primary overrides Bootstrap's
   .btn-block to inline-block, so out-of-stock "Laikinai nėra" +
   "Pranešti, kai bus prekyboje" sit on the same row. Bootstrap then applies
   `.btn-block + .btn-block { margin-top: 5px }`, which is meant for stacked
   block buttons — on our inline-block buttons it just shoves the second one
   a few pixels lower than the first. Zero out the margin so they share the
   same row baseline. */
#product .form-group.cart > .btn-block + .btn-block {
	margin-top: 0;
}

#footer #contact ul li {
	margin-bottom: 5px;
}
#footer #contact .email a {
	display: block;
	margin-left: 40px;
	word-break: break-word;
}

#footer_cms_block .tm-about-description img {
	max-width: 100%;
	height: auto;
	display: block;
	margin-bottom: 12px;
}

/* Category-description hero image: when editors use <h1><img></h1>
   to lead the description (e.g. /ispardavimo-prekes), the heading
   text sticks straight under the image. Add breathing room. */
.category_description {
	margin-top: 0;
}
.col-sm-10.category_description {
	margin-bottom: 30px;
}
#common-maintenance {
	margin: 120px auto;
}

/* Sidebar category menu: place 3rd-level submenu flush with 2nd-level right
   edge (no gap, no overlap) and add a transparent hover-bridge as ::after on
   the 2nd-level dropdown <li> so the cursor can cross the seam without
   leaving the hover region. */
#nav-one .top_level,
#nav-one .childs_1 > li {
	position: relative;
}
#nav-one .childs_2 {
	left: 220px;
}
#nav-one .childs_1 > li.dropdown::after {
	content: "";
	position: absolute;
	top: 0;
	left: 100%;
	width: 25px;
	height: 100%;
	background: transparent;
}

.category_description h1 img,
#information-information #content h1 img {
	margin-bottom: 30px;
}
.footer-top .social ul li {
	margin: 0;
}
.footer-top .social ul li.facebook a,
.footer-top .social ul li.pinterest a,
.footer-top .social ul li.instagram a {
	background: none;
	display: inline-block;
	float: none;
	width: 30px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	color: #888;
	font-family: FontAwesome;
	font-size: 18px;
	text-decoration: none;
	margin: 0 8px;
	padding: 0;
	vertical-align: middle;
}
.footer-top .social ul li.facebook a::before  { content: "\f09a"; }
.footer-top .social ul li.pinterest a::before { content: "\f0d2"; }
.footer-top .social ul li.instagram a::before { content: "\f16d"; }
.footer-top .social ul li.facebook a:hover,
.footer-top .social ul li.pinterest a:hover,
.footer-top .social ul li.instagram a:hover {
	color: #333;
}

/* Newsletter subscribe: original theme floats the button right because
   it sat next to a long email input. Now that we've replaced the form
   with a single MailerLite-trigger button, the float pushes the button
   to the right edge of an otherwise empty .box-right. Drop the float
   so the button sits flush left where the form used to begin. */
.newsletter .subscribe-btn .btn-default {
	float: none;
}

footer .footer-top .social .twitter a {
	background: url(../../image/megnor/twitter.png) no-repeat scroll 2px transparent;
}

/* Social-login buttons (Facebook / Google) on the login & register pages.
   The original styling lived in the unused default theme's custom.css; ported
   here (the stylesheet OPC actually loads) and harmonised with the theme's
   square, flat button look (border-radius:0, ~40px tall like the form buttons). */
.social_buttons {
	display: inline-block;
	height: 40px;
	line-height: 38px;
	padding: 0 16px;
	margin: 8px 8px 12px 0;
	border: 1px solid #ccc;
	border-radius: 0;
	background: #fff;
	color: #666;
	font-weight: 700;
	vertical-align: middle;
	white-space: nowrap;
	transition: opacity 0.3s ease;
}
.social_buttons img {
	height: 20px;
	margin: -2px 6px 0 0;
	vertical-align: middle;
}
.social_buttons.fb {
	background: #4968b4;
	border-color: #4968b4;
	color: #fff;
}
.social_buttons:hover {
	opacity: 0.85;
}

/* ≤479px: keep the phone CMS block and the cart on the SAME line (as on wider
   screens). The theme's 479px media query forces them to display:block (stacked,
   stylesheet.css ~line 4177); override back to inline-block. custom.css loads
   after stylesheet.css so this wins. */
@media only screen and (max-width: 479px) {
	/* logo / contacts / search stacked & centered, with even 14px gaps and the
	   search in normal flow (no fixed height / absolute offsets to drift). */
	.header.container { height: auto; padding: 9px 15px; text-align: center; }
	.header-logo { float: none; width: 100%; text-align: center; margin: 0; }
	.header-logo #logo { margin: 0; }
	.header-logo #logo img,
	.header-logo img.img-responsive { display: inline-block; margin: 0 auto; height: auto; }
	.header-right { float: none; width: 100%; text-align: center; margin: 9px 0 0; }
	.content_headercms_top,
	.header-cart { display: inline-block; float: none; vertical-align: middle; }
	.header-right #cart { margin: 0; }
	.header-search { position: static; width: 100%; margin: 9px 0 0; top: auto; left: auto; right: auto; padding: 0; }
}

/* 480–767px: put header-logo and header-right on the SAME row (logo left,
   contacts+cart right) so the header is much shorter. Overrides the theme's
   <=767px rules that stack them full-width. Search stays full-width below. */
@media (min-width: 480px) and (max-width: 767px) {
	/* logo (left) + contacts (right) on one vertically-centered flex row,
	   search flows full-width below — gives even, predictable spacing. */
	.header.container {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		height: auto;
		padding: 9px 15px;
	}
	.header-logo  { float: none; flex: 0 0 auto; width: auto; margin: 0; text-align: left; line-height: 0; }
	.header-logo #logo { margin: 0; line-height: 0; display: block; }
	/* theme gives the logo img margin:0 auto 15px which left it sitting high in
	   its box; zero it (1,1,1 selector beats #logo .img-responsive) so flex
	   align-items:center can truly centre the small logo between top and search */
	.header-logo #logo img,
	.header-logo img.img-responsive { max-width: 150px; height: auto; display: block; margin: 0; }
	.header-right { float: none; flex: 1 1 auto; width: auto; margin: 5px 0 0; text-align: right; }
	.content_headercms_top,
	.header-cart { display: inline-block; vertical-align: middle; float: none; margin: 0; }
	/* the theme lifts #cart with margin-top:-27px (desktop) which pushed it above
	   the row; reset so vertical-align:middle can center it */
	.header-right #cart { margin: 0; }
	.header-search { position: static; flex: 1 1 100%; width: 100%; margin: 9px 0 0; top: auto; right: auto; left: auto; padding: 0; }
}

/* 768–979px: one flex row (logo left + contacts right, vertically centred) with
   the search full-width below and auto height — same clean layout as 480–767 but
   with the full-size logo. Replaces the theme's absolute 2-row positioning that
   centred the logo against the whole (tall) header while contacts sat at the top. */
@media (min-width: 768px) and (max-width: 979px) {
	.header.container { display: flex; flex-wrap: wrap; align-items: center; height: auto; padding: 12px 15px; }
	.header-logo { float: none; flex: 0 0 auto; width: auto; margin: 0; line-height: 0; }
	.header-logo #logo { margin: 0; line-height: 0; display: block; }
	.header-logo #logo img,
	.header-logo img.img-responsive { height: auto; display: block; margin: 0; }
	.header-right { float: none; flex: 1 1 auto; width: auto; margin: 0; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
	.content_headercms_top,
	.header-cart { display: inline-block; float: none; margin: 0; }
	/* the round cart button sits ~3px high vs the logo/phone; drop it to match */
	.header-right #cart { margin: 0; position: relative; top: 3px; }
	.header-search { position: static; flex: 1 1 100%; width: 100%; margin: 12px 0 0; top: auto; right: auto; left: auto; padding: 0; }
	/* let the search input fill the full-width row so it sits flush against the
	   button (otherwise it stays the theme's fixed 255px, leaving a gap). */
	.header-search #search .input-lg { width: 100%; }
}

/* 980–1199px: single-row header — center the logo (50px) in the 102px header so
   its vertical centre matches the contacts/cart row (all centres land at ~51px). */
@media (min-width: 980px) and (max-width: 1199px) {
	#logo { margin-top: 27px; }
	/* nudge the inline search up ~3px so its centre matches logo/phone/cart */
	.header-search { top: 31px; }
}

/* Product name: allow up to 2 lines in grid / module / carousel / category-grid
   blocks instead of clipping to one line (.product-thumb h4 in stylesheet.css:1695
   forces white-space:nowrap). List view (.product-list) kept as before. */
.product-thumb h4 {
	white-space: normal;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	line-height: 1.4;
	min-height: 2.8em;   /* reserve exactly 2 lines so short titles align with long ones (price/rating below line up across the grid) */
}
.product-list .product-thumb h4 {
	display: block;
	-webkit-line-clamp: none;
	white-space: nowrap;
	min-height: 0;       /* list view: no reserved height */
}