@charset "utf-8";

/* reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, caption,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}

ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* Base */
html { overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

body { margin: 0; font-size: 14px; line-height: 18px; }
body, button, input, select, textarea { color: #242f5d; font-family: verdana; }
::-moz-selection { background: #999; color: #fff; text-shadow: none; }
::selection { background: #999; color: #fff; text-shadow: none; }

* { outline: none; }

/* Links */
a { color: #2f2f2f; }
a:hover { text-decoration: none; color: #000; }
a:hover, a:active { outline: 0; }


/* Typography */
abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; }
dfn { font-style: italic; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; }

/* Redeclare monospace font family */
pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; }

/* Improve readability of pre-formatted text in all browsers */
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
q { quotes: none; }
q:before, q:after { content: ""; content: none; }
small { font-size: 85%; }

/* Position subscript and superscript content without affecting line-height: h5bp.com/k */
sub, sup { font-size: 12px; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -13px; }
sub { bottom: -0.25em; }


/* Lists */

ul, ol { margin: 0; padding: 0; }
dd { margin: 0;}
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }


/* Embedded content */
img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }

/* Correct overflow not hidden in IE9 */
svg:not(:root) { overflow: hidden; }


/* Figures */

figure { margin: 0; }


/* Forms */
form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }

/* Indicate that 'label' will shift focus to the associated form element */
label { cursor: pointer; }
legend { border: 0; *margin-left: -7px; padding: 0; }
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
button, input { line-height: normal; *overflow: visible; }

/* Reintroduce inner spacing in 'table' to avoid overlap and whitespace issues in IE6/7
 */
table button, table input { *overflow: auto; }

button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; }

/* Consistent box sizing and appearance */
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; position:relative; top:2px; margin-right:5px; height:auto; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }

input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
textarea { overflow: auto; vertical-align: top; resize: vertical; }

/* Colors for form validity */
input:valid, textarea:valid {  }
input:invalid, textarea:invalid { background-color: #f0dddd; }


/* Tables */
table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }

/*body { background-color: #fff; font-family: Verdana, Sans-serif; overflow-x: hidden; }*/
body {    color: #333333;font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-style: normal;font-weight: 400;/*line-height: 1.42857143*/;font-size: 1.4rem;}

/*Magento reset*/
img           { border:0; vertical-align:top; }
:focus        { outline:0; }

/* Headings */
h1,h2,h3,
h4,h5,h6      { margin:0 0 5px; line-height:1.35; }
h1            { font-size:34px; font-weight:normal; color: #0e2240; }
h2            { font-size:18px; font-weight:normal; color: #0e2240; }
h3            { font-size:16px; color: #0e2240; }
h4            { font-size:14px; color: #0e2240; }
h5            { font-size:13px; color: #0e2240; }
h6            { font-size:12px; color: #0e2240; }

/* Forms */
form          { }
fieldset      { border:0; }
legend        { display:none; }
.note a 	  { color: #666; text-decoration: underline; }
.note a:hover 	  { color: #000; text-decoration:none; }

/* Table */
table         { border-spacing:0; empty-cells:show; font-size:100%; }
caption,th,td { vertical-align:top; text-align:left; font-weight:normal; }

/* Content */
p             { margin:0 0 20px; color: #0e2240; font-size: 13px; line-height: 16px; }
strong        { font-weight:bold; }
address       { font-style:normal; line-height:1.35; }
cite          { font-style:normal; }
q,
blockquote    { quotes:none; }
q:before,
q:after       { content:''; }
small,big     { font-size:1em; }

/* Lists */
ul,ol         { list-style:none; }

i { font-style: italic; }
a { text-decoration:none; font-size: 11px; transition: all 0.2s linear; -webkit-transition:all 0.2s linear; }
	a:hover { text-decoration:none; transition: all 0.2s linear; -webkit-transition:all 0.2s linear; }

.button, .button:hover, .sorter a, .sorter a:hover, .sorter strong, .sorter strong:hover, .sidebar li a, .sidebar li a:hover, .socialSharing, .socialSharing:hover, button, button:hover, .products-grid > li, .products-grid > li:hover, .products-list > li, .products-list > li:hover, .category-name-icon:after, .category-name-icon:hover:after, .banner .menu li a img, .banner .menu li a:hover img, .banner .menu li a > span, .banner .menu li a:hover span { transition: all 0.1s linear; -webkit-transition:all 0.1s linear; }

/* -------------------------------------------- *
 * Global Site Notice
 */
.global-site-notice { background: #676157; color: #e6e6e6; font-size: 11px; }
.global-site-notice .notice-inner { padding-left: 120px; width: 100%; max-width: 880px; margin-left: auto; margin-right: auto; line-height: 11px; padding-top: 14.5px; padding-bottom: 14.5px; background-image: url("../images/demo-logo.png"); background-position: left; background-repeat: no-repeat; }
.global-site-notice p { margin-bottom: 0; }

.logo .large { display: block;  }
#search_mini_form label { display: none; }
.no-display { display: none !important; }

/* Data Table */
#shopping-cart-table colgroup { display: none; }
.data-table, #shopping-cart-totals-table { width: 100%; }
#shopping-cart-table { border: 1px solid #f5f5f5; margin-bottom: 30px; }
	#shopping-cart-table td.product-cart-image { width: 150px; }
#shopping-cart-totals-table { border: 1px solid #f5f5f5; margin-bottom: 20px; }
	.col-main table#my-orders-table td.view { text-align: right; }
	.col-main table#my-orders-table td.status { min-width: 110px; }
		.col-main table#my-orders-table td.view .separator { display: none; }
		#shopping-cart-table td.product-cart-remove { text-align: center; }
.data-table .odd  { background:#fff }
.data-table .even { background:#f5f5f5; }
.product-cart-actions .qty { height: 34px; line-height: 34px; text-align: center; }

/*.data-table tr.odd:hover,
.data-table tr.even:hover { background:#ebf1f6; }*/
.data-table td.last,
.data-table th.last { border-right:0; }
.data-table tr.last td { border-bottom:0 !important; }
.data-table th { padding:10px 15px; font-weight:bold; }
.data-table td { padding:10px 15px; }
.data-table td.a-center, .data-table td.a-right { text-align:center; }
.data-table thead th { border-bottom: 1px solid #f5f5f5; font-weight: normal; padding: 10px 15px; font-size: 14px; white-space: nowrap; vertical-align: middle; font-family: Verdana, Sans-serif; color: #000; }
#shopping-cart-table.data-table thead th { background: #f5f5f5; }
#shopping-cart-table .a-center a { text-decoration: underline; color: #1d1d1b; }
#shopping-cart-table .a-center a:hover { text-decoration: none; color: #666; }
.data-table thead th.wrap { white-space:normal; }
.data-table thead th a,
.data-table thead th a:hover { color:#fff; }
.data-table thead th .tax-flag { font-size:11px; white-space:nowrap; }


.data-table tfoot { border-bottom:1px solid #d9dde3; }
.data-table tfoot tr.first td {  }
.data-table tfoot td { border-top:3px solid #d5d5d5; padding-top:5px; padding-bottom:5px; border-bottom:0; border-right:1px solid #d9dde3; }
#shopping-cart-totals-table tfoot td {  }
.data-table tfoot strong { font-size:16px; }
.data-table thead th.wrap { white-space:normal; }
.data-table thead th a,
.data-table thead th a:hover { color:#fff; }
.data-table thead th .tax-flag { font-size:11px; white-space:nowrap; }

.data-table tfoot { border-bottom:1px solid #d9dde3; }
.data-table tfoot tr.first td { background: #fff; }
.data-table tfoot td { padding-top:5px; padding-bottom:5px; border-bottom:0; border-right:1px solid #d9dde3; }
.data-table tfoot strong { font-size:16px; font-weight:normal; }
.data-table tfoot tr.last strong { font-weight:bold; }

.data-table tbody th,
.data-table tbody td, #shopping-cart-totals-table td, #shopping-cart-totals-table th { border-right:1px solid #f5f5f5; vertical-align:middle; }
/* Bundle products tables */
.data-table tbody.odd tr { background:#f8f7f5 !important; }
.data-table tbody.even tr { background:#f6f6f6 !important; }
.data-table tbody.odd tr td,
.data-table tbody.even tr td { border-bottom:0; }
.data-table tbody.odd tr.border td,
.data-table tbody.even tr.border td { border-bottom:1px solid #d9dde3; }

.data-table tbody td .option-label { font-weight:bold; font-style:italic; }
.data-table tbody td .option-value { padding-left:10px; }

/* Generic Info Box */
.info-box { background:#fff url(../images/bkg_block-title.gif) 0 0 repeat-x; border:1px solid #d0cbc1; padding:12px 15px; margin:0 0 15px; }
.info-box h2 { font-weight:bold; font-size:13px; }

.info-table th { font-weight:bold; padding:2px 15px 2px 0; }
.info-table td { padding:2px 0; }

/* Shopping cart total summary row expandable to details */
tr.summary-total { cursor:pointer; }
tr.summary-total td {}
tr.summary-total .summary-collapse { float:right; text-align:right; padding-left:20px; background:url(../images/bkg_collapse.gif) 0 5px no-repeat; cursor:pointer; }
tr.show-details .summary-collapse { background-position:0 -52px; }
tr.show-details td {}
tr.summary-details td { font-size:11px; background-color:#dae1e4; color:#626465; }
tr.summary-details-first td { border-top:1px solid #d2d8db; }
tr.summary-details-excluded { font-style:italic; }

/* Shopping cart tax info */
.cart-tax-info { display:block; }
.cart-tax-info,
.cart-tax-info .cart-price { padding-right:20px; }
.cart-tax-total { display:block; padding-right:20px; background:url(../images/bkg_collapse.gif) 100% 5px no-repeat; cursor:pointer; }
.cart-tax-info .price,
.cart-tax-total .price { display:inline !important; font-weight:normal !important; }
.cart-tax-total-expanded { background-position:100% -52px; }

/* Class: std - styles for admin-controlled content */
.std .subtitle { padding:0; }
.std ol.ol { list-style:decimal outside; padding-left:1.5em; }
.std dl dt { font-weight:bold; }
.std dl dd { margin:0 0 10px; }
.std ul,
.std ol,
.std dl,
.std address,
.std blockquote { margin:0; padding:0; }
.std ol { list-style:decimal outside; padding-left:1.5em; }
.std ul ul { list-style-type:circle; }
.std dt { font-weight:bold; }
.std dd { padding:0 0 0 1.5em; }
.std blockquote { font-style:italic; padding:0 0 0 1.5em; }
.std address { font-style:normal; }
.std b,
.std strong { font-weight: bold; }
.std i,
.std em { font-style:italic; }

/* Misc */
.link-cart { color:#dc6809; font-weight:bold; }
.links-cart .links li.account {background-color: #162234;color: #fff;}
.links-cart .links li.account a {color: #fff;}
.link-reorder { font-weight:bold; display: block; }
.link-print { /*background:url(../images/i_print.gif) 0 2px no-repeat; padding:2px 0 2px 25px;*/ font-weight:bold; color:#ea1c24; }
	.link-print:hover { color:#000; }
.link-rss { background:url(../images/i_rss.gif) 0 2px no-repeat; padding-left:18px; line-height:14px; white-space:nowrap; }
.btn-remove  { display:block; width:11px; height:11px; font-size:0; line-height:0; text-indent:-999em; overflow:hidden; }
.btn-previous  { display:block; width:11px; height:11px; font-size:0; line-height:0; text-indent:-999em; overflow:hidden; }
.btn-remove2 { background: url(../images/btn_trash.png) no-repeat; display:inline-block; width:16px; height:16px; font-size:0; line-height:0; text-indent:-999em; overflow:hidden; }
.btn-edit    { display:block; width:11px; height:11px; font-size:0; line-height:0; text-indent:-999em; overflow:hidden; }

.cards-list dt { margin:5px 0 0; }
.cards-list .offset { padding:2px 0 2px 20px; }

.separator { margin:0 3px; }

.divider { clear:both; display:block; font-size:0; line-height:0; height:1px; margin:10px 0; background:url(../images/bkg_divider1.gif) 0 50% repeat-x; text-indent:-999em; overflow:hidden; }

/* Global site notices */
.global-site-notice { border:1px solid #cfcfcf; border-width:0 0 1px; background:#ffff90; font-size:12px; line-height:1.25; text-align:center; color:#2f2f2f; }
.global-site-notice .notice-inner { width:860px; margin:0 auto; padding:12px 0 12px 80px; background:url(../images/i_notice.gif) 20px 25px no-repeat; text-align:left; }
.global-site-notice .notice-inner p { margin:0; border:1px dotted #cccc73; padding:10px; }
.global-site-notice .notice-inner .actions { padding-top:10px; }

/* Cookie Notice */
.notice-cookie { position:fixed; z-index:9999; width:100%; bottom:0; left:0; margin:0 !important; opacity:0.95; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=95)"; /* IE8 */ }

/* Noscript Notice */
.noscript {}

/* Demo Notice */
.demo-notice { margin:0; padding:6px 10px; background:#d75f07; font-size:12px; line-height:1.15; border:0; text-align:center; color:#fff; }
.demo-notice .notice-inner { width:auto; padding:0; background:none; text-align:center; }
.demo-notice .notice-inner p { padding:0; border:0; color: #fff; }

/* Messages ======================================================================================= */
.messages {  }
.cms-home .messages { margin: 74px auto 0; max-width: 1190px; }
.messages li li { position: relative; margin-bottom: 5px; padding: 10px 20px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); font-size: 15px; }
.messages li li:before { top: 50%; left: 0; margin-top: -6px; }
.messages .error-msg li { background: red; border-left: 5px solid #0e2240; color: #fff; }
.messages .error-msg li:before { content: ''; position: absolute; width: 0; height: 0; display: block; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 6px solid #0e2240; border-right: none; }
.messages .notice-msg li { border-left: 5px solid #e26703; }
.messages .notice-msg li:before { content: ''; position: absolute; width: 0; height: 0; display: block; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 6px solid #e26703; border-right: none; }
.messages .success-msg li { background-color: #DFF0D8; border-color: #D6E9C6; color: #468847; }
.messages .success-msg li:before { content: ''; position: absolute; width: 0; height: 0; display: block; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 6px solid #468847; border-right: none; }
.checkout-cart-index .messages { margin-top:0; }
.messages li.success-msg, .messages li.error-msg { padding:0 0 20px; }

/* ======================================================================================= */

/* Input */
input { border:1px solid #c5c5c5; height: 26px; line-height: 26px; font-size: 12px; color:#848484; padding:0 10px; box-sizing: border-box; font-family: Verdana, Sans-serif; border-radius: 0; }
input[type="file"], input[type="text"], input[type="search"], input[type="password"] { -webkit-appearance: none; border-radius: 0; }
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #303030; }
input:-moz-placeholder, textarea:-moz-placeholder { color: #303030; }
input:focus::-webkit-input-placeholder { opacity: 0.5; }	

label { font-size: 12px; }

/* button */
button, .buttons-set .button { background: #0e2240; border:1px solid transparent; display:block; padding:0 20px; text-align:center; height: 34px; line-height:34px; color:#fff; font-size:14px; font-family: Verdana, Sans-serif; }
	button:hover, .buttons-set .button:hover { background:#fff; border: 1px solid #0e2240; color:#0e2240; }


/* ========== NEW STYLES ========== */


/* Header ======================================================================================= */
.page-header-top { position: relative; z-index: 1100; }
.page-header-top, .header-nav { max-width: 1190px; margin: 0 auto; }
.logo { display: inline-block; margin-top: 20px; }
.links-cart { background: #e4e4e4; position: relative; float: right; padding-left: 25px; z-index: 1100; }
	.links-cart .links > ul > li { float: left; }
		.links-cart .links > ul > li > a, .links-cart .links > ul > li > span { display: block; font-size: 11px; padding: 43px 15px 13px; text-align: center; position: relative; }
			.links-cart .links > ul > li > a:after, .links-cart .links > ul > li > span:after, .links-cart .links > ul > li:hover > span:after, .links-cart .links > ul > li.active > span:after { content: ''; background: url(../images/icons-sprite.png) no-repeat 0 0; position: absolute; left: 0; right: 0; top: 13px; width: 25px; height: 25px; margin: 0 auto; }
			/*.links-cart .links > ul > li.account > a:hover:after,  .links-cart .links > ul > li > span:hover:after, .links-cart .links > ul > li:hover > span:after, .links-cart .links > ul > li.active > span:after { background-position: -27px 0; } */
			.links-cart .links > ul > li.wishlist > a:after { background-position: 0 -26px; }
			/*.links-cart .links > ul > li.wishlist > a:hover:after { background-position: -27px -26px; }*/
			.links-cart .links > ul > li.cart > a:after { background-position: 0 -51px; }
			/*.links-cart .links > ul > li.cart > a:hover:after { background-position: -27px -51px; }*/
			.links-cart .links > ul > li > a:hover,  .links-cart .links > ul > li > span:hover, .links-cart .links > ul > li:hover > span { background: #0e2240; color: #fff; }
	.bg-grey { background: #e4e4e4; display: block; overflow: hidden; text-indent: -9999px; position: absolute; left: 100%; top: 0; height: 100%; }
	.btn-menu, .btn-search, .btn-info, .page-header-top .btn-cart, .mobile-menu { display: none; }
	.top-links .qty { background: #fff; border: 1px solid #0e2240; position: absolute; top: 9px; right: 35px; color: #0e2240; font-size: 13px; border-radius: 21px; width: 19px; height: 19px; z-index: 100; }

	ul.account-links { background: #E4E4E4; display: none; position: absolute; top: 74px; left: 0; width: 185px; text-align: left; }
	.links-cart .links > ul > li:hover ul.account-links, .links-cart .links > ul > li.active > span:after { display: block; }
		ul.account-links li a { display: block; padding: 5px 40px; color: #0e2240; position: relative; }
			ul.account-links li a:hover { background: #0e2240; color: #E4E4E4; }
			ul.account-links li.log-out a:after { content: ''; background: url(../images/icons-sprite.png) no-repeat -27px -6px; position: absolute; left: 13px; top: 11px; width: 20px; height: 20px; }

/* Search box ======================================================================================= */
.nav-search { position: absolute; bottom: -40px; right: 0; z-index: 1002; }
	.nav-search #search { border: 1px solid #0e2240; font-style: italic; float: left; padding: 0 20px; -webkit-appearance: none; border-radius: 0; }
	.search-button { width: 28px; height: 28px; float: left; margin-left: 2px; padding: 0; overflow: hidden; text-indent: -9999px; }
		.search-button > span { background: url(../images/icons-sprite.png) no-repeat 4px -84px; display: block; }
		.search-button:hover { background: #c6c6c6; border: 1px solid #c6c6c6; }

/* Main-nav ======================================================================================= */
#header-nav { position: relative; z-index: 1001; margin-top: 18px; }
	.main-menu-a { border-bottom: 3px solid #fec524; margin-bottom: 1px; }
		.main-menu-a ul { margin-left: -20px; }	
			.main-menu-a li { float: left; }
				.main-menu-a li a { display: block; padding: 10px 19px; line-height: 15px; font-size: 14px; }
				/*.main-menu-a li.active a { background: #fff; border: 1px solid #c6c6c6; border-bottom: 0; position: relative; bottom: -2px; margin-top: -2px; padding: 10px 20px 12px; }*/
					.main-menu-a li a:hover { background: #0e2240; color: #fff; }

	.main-menu-b { background: #f0f0f0; width: 100%; box-shadow: -2px 5px 6px 0px #ccc !important;}
	.cms-home .main-menu-b, .cms-webwinkel .main-menu-b { background: #f0f0f0; position: absolute; bottom: -48px; left: 0; right: 0; }
		.main-menu-b ul { margin-left: -11px; }
			.main-menu-b li { float: left; }
				.main-menu-b li a { color: #333;font-weight: bold;text-transform: uppercase;display: block; line-height: 48px; padding: 0 9px; font-size: 15px; position: relative; }
					.main-menu-b li a:hover, .main-menu-b li.active a { background: #e4e4e4; color: #1c1c1c; }
				.main-menu-b li a:hover:after, .main-menu-b li.active a:after { content: ''; background: #39629d; position: absolute; bottom: 9px; right: 29px; left: 29px; height: 1px; }
#header-nav .wraper-box { display: none; }

/* Content ======================================================================================= */	
.main, .main-container { max-width: 1190px; margin: 0 auto; }
.cms-home .main, .cms-home .main-container, .cms-webwinkel .main-container { max-width: inherit; margin: inherit; padding: 0;margin-bottom: 10px; }

.page-title { margin-top: 30px; }
.cms-page-view .page-title { margin-top: 0; }

/* Banner image */
.banner { margin: 0 0 20px; position: relative;}
	.banner > .image { background-size: cover; position: relative; min-height: 685px; display:none; }
		.banner .image > img { width: 100%; display: none; }
		.banner .menu { background: rgba(24, 24, 24, 0.5); position: absolute; top: 0; left: 0; right: 0; width: 100%; height: 100%; } 
			.banner .menu .mini-menubuilder-menu { max-width: 1190px; margin: 7% auto; text-align: center; }
				.banner .menu li { display: inline-block; vertical-align: top; width: 24%; text-align: center; }
					.banner .menu li a { display: table-cell; vertical-align: middle; padding: 20px 10px 75px; width: 215px; height: 120px; position: relative; }
						.banner .menu li img { margin: 0 0 15px; max-height: 100px; }
						.banner .menu li a > span { display: block; text-align: center; font-size: 24px; line-height: 26px; color: #c0a992; position: absolute; left: 10px; right: 10px; bottom: 20px; height: 45px; }
							.banner .menu li a .subtitle { display: block; font-size: 14px; line-height: 17px; color: #c0a992; text-align: center; }
						.banner .menu li a:hover span { color: #fff; }
						.image-hover, .banner .menu li a:hover .image { display: none; }
						.banner .menu li a:hover .image-hover { display: inline-block; }

/* Newsletter content */
.banner .newsletter, .header-newsletter { /*background: rgba(24, 24, 24, 0.8);*/ position: absolute; bottom: 16px; left: 0; right: 0; width: 100%; }
.header-newsletter, .footer-newsletter { b/*ackground: url(../images/bg-newsletter.png) no-repeat center #202022;*/ margin: 4px 0 10px; position: inherit; bottom: inherit; left: inherit; right: inherit; }
.footer-newsletter { margin-top: 40px; margin-bottom: 0; }
.header-newsletter { margin-top: 15px; }
.banner .newsletter .block-subscribe, .header-newsletter .block-subscribe, .footer-newsletter .block-subscribe { max-width: 1190px; margin: 0 auto; padding: 7px 0;background: rgba(24, 24, 24, 0.8); }
		.banner .newsletter .block-subscribe .block-title, .header-newsletter .block-subscribe .block-title, .footer-newsletter .block-subscribe .block-title { background: url(../images/icons-sprite.png) no-repeat 0 -157px; padding: 7px 60px 7px 100px; float: left;margin-left: 90px; }
			 .banner .newsletter .block-subscribe .block-title p, .header-newsletter .block-subscribe .block-title p, .footer-newsletter .block-subscribe .block-title p { display: none; } 
			 .banner .newsletter .block-subscribe .block-title h3, .header-newsletter .block-subscribe .block-title h3, .footer-newsletter .block-subscribe .block-title h3 { color: #fff; font-size: 16px; line-height: 18px; font-weight: bold; }
			 .banner .newsletter .block-subscribe .block-title h4, .header-newsletter .block-subscribe .block-title h4, .footer-newsletter .block-subscribe .block-title h4 { color: #fff; font-size: 14px; line-height: 16px; font-weight: bold; }

	#newsletter-validate-detail-home, .header-newsletter #newsletter-validate-detail, .footer-newsletter #newsletter-validate-detail { width: 40%; float: left; margin-top: 10px; position: relative; }
	#newsletter-validate-detail-home:after, .header-newsletter #newsletter-validate-detail:after, .footer-newsletter #newsletter-validate-detail:after { content: ''; background: url(../images/ico-newsletter.png) no-repeat; width: 103px; height: 65px; position: absolute; right: -125px; top: -4px; }
		#newsletter-validate-detail-home #newsletter-home, .header-newsletter #newsletter-validate-detail #newsletter-home, .footer-newsletter #newsletter-validate-detail #newsletter-home { background: #1c1c1c; border: 1px solid #fff; width: 100%; padding: 0 140px 0 20px; font-style: italic; font-size: 12px; height: 39px; line-height: 39px; color: #fff; }
		#newsletter-home::-webkit-input-placeholder { color: #fff; } #newsletter-home:-moz-placeholder { color: #fff; opacity: 1; } #newsletter-home::-moz-placeholder { color: #fff; opacity:  1; } #newsletter-home:-ms-input-placeholder { color: #fff; } :placeholder-shown { color: #fff; }
		.header-newsletter #newsletter-validate-detail #newsletter-home, .footer-newsletter #newsletter-validate-detail #newsletter-home { background: #1c1c1c; }
		#newsletter-validate-detail-home button, .header-newsletter #newsletter-validate-detail button, .footer-newsletter #newsletter-validate-detail button { background: #fff; height: 39px; color: #181818; font-size: 12px; font-weight: bold; position: absolute; right: 0; top: 0; padding: 0 13px; }
			#newsletter-validate-detail-home button:hover, .header-newsletter #newsletter-validate-detail button:hover, .footer-newsletter #newsletter-validate-detail button:hover { background: #c6c6c6; border: 1px solid #fff; }

/* Products homepage */
.row1, .row2 { max-width: 1190px; margin: 0 auto 40px }
.image-text { background: #fff; 
	float: left; 
	width: 60%;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 8px;
	position: relative; }
	.image-text .image { float: left; max-width: 257px; margin-right: 33px; visibility: hidden;}
	.image-text .content { padding: 30px 0 0; }
		.image-text .content div.button { position: absolute; right: 0; bottom: 0; }
			.image-text .content div.button .button { height: 36px; line-height: 36px; text-transform: uppercase; padding: 0 30px; }
				.image-text .content div.button .button > span { padding-left: 30px; position: relative; }
					.image-text .content div.button .button > span:after { content: ''; background: url(../images/icons-sprite.png) no-repeat 0 -238px; height: 20px; width: 20px; position: absolute; left: 0; top: 0; }
						.image-text .content div.button .button:hover { background: #1c1c1c; border-color: #1c1c1c; color: #fff; }
						.image-text .content div.button .button .first-word { color: #E4E4E4; }
						.image-text .content div.button .button:hover .first-word { color: #fff; }
			.image-text .content p { line-height: 24px; }


.row1 > .image, .row2 > .image { background-size: cover; float: right; width: 37%; float: right; position: relative; }
	.row1 > .image img, .row2 > .image img { display: none; }
	.row1 > .image .text, .row2 > .image .text { background:; position: absolute; min-width: 221px; top: 32%; right: 0; padding: 19px 9px 11px 30px; }
		.row1 > .image .text h2, .row2 > .image .text h2 { font-size: 30px; line-height: 34px; color: #323438; text-transform: uppercase; font-weight: bold; margin-bottom: 0; }
		.row1 > .image .text h3, .row2 > .image .text h3 { font-size: 24px; line-height: 24px; color: #323438; font-weight: bold; }

.image-home { position: relative; }
.image-home .overlay { position: absolute; right: 0; top: 0; left: 0; bottom: 0; width: 100%; height: 100%; }
.row2 > .image, .products-tablet { display: none; }

.row2 .slider { float: left; width: 50%; overflow: hidden; }

/* Slick slider */
.slick-list,.slick-slider,.slick-track{position:relative;display:block}.slick-loading .slick-slide,.slick-loading .slick-track{visibility:hidden}.slick-slider{-moz-box-sizing:border-box;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent}.slick-list{overflow:hidden;margin:0;padding:0}.slick-list:focus{outline:0}.slick-list.dragging{cursor:pointer;cursor:hand}.slick-slider .slick-list,.slick-slider .slick-track{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.slick-track{top:0;left:0}.slick-track:after,.slick-track:before{display:table;content:''}.slick-track:after{clear:both}.slick-slide{display:none;float:left;height:100%;min-height:1px}[dir=rtl] .slick-slide{float:right}.slick-slide img{display:block}.slick-slide.slick-loading img{display:none}.slick-slide.dragging img{pointer-events:none}.slick-initialized .slick-slide{display:block}.slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent}.slick-arrow.slick-hidden{display:none}
.slick-disabled { display: none !important; }

.slick-prev { background: url(../images/icons-sprite.png) no-repeat -33px -269px #e4e4e4; border: 1px solid #fff; position: absolute; left: 2px; top: 44%; width: 25px; height: 52px; padding: 0; overflow: hidden; text-indent: -9999px; z-index: 100; transition: none; -webkit-transition: none; }
	.slick-prev:hover { background: url(../images/icons-sprite.png) no-repeat -33px -485px #e4e4e4; border-color: #fff; transition: none; -webkit-transition: none; }
.slick-next { background: url(../images/icons-sprite.png) no-repeat 5px -269px #e4e4e4; border: 1px solid #fff; position: absolute; right: 2px; top: 44%; width: 25px; height: 52px; padding: 0; overflow: hidden; text-indent: -9999px; z-index: 100; transition: none; -webkit-transition: none; }
	.slick-next:hover { background: url(../images/icons-sprite.png) no-repeat 5px -485px #e4e4e4; border-color: #fff; transition: none; -webkit-transition: none; }

.products-slider { background: #e4e4e4; }
.products-slider .item-box { padding: 18px 40px 55px 18px; position: relative; }
	.promo { background: url(../images/bg-text-blue.png) no-repeat; display: block; position: absolute; left: 0; top: 0; width: 181px; height: 62px; padding: 5px 2px; z-index: 100; }
		.promo span { display: block; font-size: 14px; font-weight: bold; text-transform: uppercase; color: #fff; 
-webkit-transform: rotate(-21deg); -moz-transform: rotate(-21deg); -ms-transform: rotate(-21deg); -o-transform: rotate(-21deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
 }
 	.promo.new span { margin: -10px 0 0 5px; }
	.products-slider .item-box .image { max-width: 240px; float: left; margin-right: 30px; }
	.products-slider .item-box .content { float: left; width: 250px; }
	.products-slider .item-box .image .button { background: none; border: 0; text-transform: uppercase; padding: 0 10px; margin-top: 15px; color: #0e2240; height: 33px; line-height: 31px; }
		.products-slider .item-box .image .button:hover { background: #0e2240; color: #fff; }
		.products-slider .item-box .image .button > span { padding-left: 27px; position: relative; }
			.products-slider .item-box .image .button > span:after { content: ''; background: url(../images/icons-sprite.png) no-repeat -32px -336px; height: 20px; width: 20px; position: absolute; left: 0; top: 0; }
			.products-slider .item-box .image .button:hover > span:after { background: url(../images/icons-sprite.png) no-repeat 1px -1522px; }

.products-slider .item-box .content { float: left; width: 49.5%; padding-top: 5%; }
	.products-slider .item-box .content .product-name { font-size: 18px; font-weight: bold; margin-bottom: 20px; overflow: hidden; height: 46px; }
	.products-slider .item-box .content .std { font-size: 11px; line-height: 16px;  overflow: hidden; height: 83px; }
	.products-slider .price-box { text-align: right; margin-top: 30px; }
		.products-slider .price-box .old-price { margin: 0; }
		.products-slider .price-label { display: inline-block; vertical-align: top; line-height: 30px; }
		.products-slider .price-box .price { font-size: 30px; line-height: 30px; }
	.products-slider .item-box .content .button { padding: 0 35px; height: 32px; line-height: 30px; text-transform: uppercase; text-align: center; margin-top: 20px; position: absolute; right: 40px; bottom: 12px; }
		.products-slider .item-box .content .button > span { display: inline-block; padding-left: 38px; position: relative; text-align: left; }
			.products-slider .item-box .content .button > span:after { content: ''; background: url(../images/icons-sprite.png) no-repeat 0 -918px; height: 30px; width: 30px; position: absolute; left: 0; top: 0; }
				.products-slider .item-box .content .button:hover { background: #1c1c1c; border-color: #1c1c1c; color: #fff; }
.row2 .slider { background: #E3E3E3; position: relative; }
		.products-slider .item-box, .slider .slick-slider, .slider .slick-track, .slider .slick-list { position: inherit; height: 100%; box-sizing: border-box; }
			.products-slider .item-box .image .button { border: 1px solid transparent; position: absolute; bottom: 17px; }
	.products-slider .item-box .content .button { bottom: 17px; }
	.first-word { display: inline-block; padding-right: 3px; color: #5b5b5b; }
	.products-slider .item-box .image .button:hover { background: none; border: 1px solid #fff; color: #1c1c1c; }
	.products-slider .item-box .image .button:hover .first-word { color: #1c1c1c; }

.row2 .product1, .row2 .product2, .bottom-products .products-info, .special-product, .products-grid li { float: left; margin-left: 0px; width: 23.5%; border: 1px solid #c1c1c1; position: relative; overflow: hidden; }
	.row2 .product1:hover, .row2 .product2:hover { border: 1px solid #0f2341; }
.products-info .promo { left: -1px; top: -1px; }
.promo.sale { background: url(../images/bg-text-red.png) no-repeat; }
.promo.eol { background: url(../images/bg-text-grey.png) no-repeat; }

.products-info .hover { background: rgba(0, 0, 0, 0.8); display: block; opacity: 0; position: absolute; left: 0; right: 0; bottom: -300px; width: 100%; height: 100%; text-decoration:none; transition: all 0.2s linear; -webkit-transition:all 0.2s linear; }
	.products-info:hover .hover, .row2 .product1:hover .hover, .row2 .product2:hover .hover { bottom: 0; opacity: 1; }
.products-info .hover .product-name { color: #fff; font-size: 13px; line-height: 18px; font-weight: bold; margin-top: 76px; text-align: center; }
.products-info .product-image { display: block; text-align: center; }
.hover .link-learn { background: #1c1c1c; border: 1px solid #414141; display: block; width: 145px; color: #fff; text-transform: uppercase; box-sizing: border-box; height:28px; margin: 110px auto 0; font-size: 12px; line-height: 28px; padding: 0 15px; text-align: center; position: relative; }
 .hover .link-learn:after { content: ''; background: url(../images/ico-add-to-cart.png) no-repeat; position: absolute; top: -87px; left: 50%; width: 79px; height: 64px; margin-left: -43px; transition: all 0.2s linear; -webkit-transition:all 0.2s linear; }
	.hover .link-learn:hover { background: #3A629D; color: #fff; }
	.hover .link-learn:hover:after { background-position: 0 -86px; transition: all 0.2s linear; -webkit-transition:all 0.2s linear; }
.hover .old-price { display: none; }
.hover .price-box { position: absolute; bottom: 20px; right: 0; }
.hover .price-box .special-price .price, .hover .price-box .regular-price .price { color: #fff; }
.products-info .price-box { margin: 25px 20px 0; }
.products-info .content .price-box { margin-bottom: 20px; }
	.price-box .old-price .price-label { font-size: 11px; color: #101010; }
	.price-box .old-price .price { font-size: 14px; color: #101010; position: relative; }
		.price-box .old-price .price:after { content: ''; background: url(../images/line-old-price.png) no-repeat center; position: absolute; left: 0; right: 0; top: 4px; width: 56px; height: 12px; }
		.price-box .old-price sup, .sp-methods .price sup, .complete .price sup, #checkout-review-table .price sup { top: -3px; font-size: 10px; margin-left: 2px; }
		#checkout-review-table tfoot .last .price sup { font-size: 11px; top: -5px; margin-left: 2px; }
	.price-box p { float: left; margin: 0; }
	.price-box .old-price { margin-top: 7px; }
	.price-box p.special-price { float: right; }
		.price-box .special-price .price-label { display: none; }
			.price-box .special-price .price { font-size: 30px; line-height: 30px; color: #e30614; font-weight: bold; }
	.price-box .regular-price { float: right; }
	.price-box .regular-price .price { font-size: 30px; line-height: 30px; font-weight: bold; }

/* Col-main */	
.col2-right-layout .col-main, .rkbullion-form-calculator .col-main, .cms-page-view .col1-layout .col-main { width: 74.5%; float: left; -webkit-box-shadow: 2px 2px 6px 2px #cccccc; -moz-box-shadow: 2px 2px 6px 2px #cccccc; box-shadow: 2px 2px 6px 2px #cccccc; box-sizing: border-box; padding: 64px 72px 20px; }
.cms-page-view.cms-webwinkel .col1-layout .col-main { float: none; box-shadow: none; padding: inherit; width: initial; margin: inherit; }

.breadcrumbs { margin:0 0 30px; }
	.breadcrumbs li { float: left; }
		.breadcrumbs strong { color: #848484; font-size:11px; font-weight: normal; position: absolute; }
.breadcrumbs span { color: #8c8c8c; float: left; }
.breadcrumbs a { float: left; color: #848484; font-size:11px; text-transform:none; }
.breadcrumbs a:hover { color: #000; }
.breadcrumbs li span { display: inline-block; width: 14px; position: relative; overflow: hidden; text-indent: -9999px; }
	.breadcrumbs li span:after { background: #848484; content: '-'; position: absolute; left: 5px; top: 10px; width: 4px; height: 1px; font-size:11px; }

/* New homepage */ 
.cms-webwinkel .main { max-width: inherit; }
	.cms-webwinkel .banner .menu .mini-menubuilder-menu { margin: 5% auto; }
	.cms-webwinkel .banner > .image { min-height: 410px; }
	.cms-webwinkel .row1 .usp { background: #fff; float: left; width: 48.5%; -webkit-box-shadow: 0 0 4px 1px #ccc; -moz-box-shadow: 0 0 4px 1px #ccc;
box-shadow: 0 0 4px 1px #ccc; position: relative; }
		.cms-webwinkel .row1 .usp .text { padding: 20px 27px; }
			.cms-webwinkel .row1 .usp li { background: url(../images/icons-sprite.png) no-repeat 0 -443px; padding: 7px 0 7px 50px; margin-bottom: 15px; line-height: 24px; font-size: 16px; color: #0e2240; }
			.cms-page-view.cms-webwinkel .col-main .usp p { margin: 0; font-size: 16px; }
	.cms-page-view.cms-webwinkel .col-main .row1 img, .cms-page-view.cms-webwinkel .col-main .row2 img { width: 100%; margin-left: 0; }
	.cms-webwinkel .image-text { border: 1px solid #c1c1c1; float: right; width: 48.5%; box-shadow: none; }
	.cms-webwinkel .row2 .slider { width: 48.5%; }
		.cms-webwinkel .products-slider .item-box .content { width: 46.5%; }
	.bottom-products { max-width: 1190px; margin: 0 auto; }
		.bottom-products > div { width: 25%; float: left; }
			.bottom-products > div > div { position: relative; }
			.bottom-products .products-info { margin-right: 30px; margin-left: 0; float: none; width: auto; }
			.bottom-products .product4 .products-info { margin-right: 0; }
			.bottom-products .products-info .content .price-box { margin-bottom: 20px; margin-top: 0; }
			.cms-page-view .col-main .bottom-products img { margin-left: 0; margin-bottom: 10px; }
		.products-info:hover > .content .price-box { opacity: 0; }
	.tablet-discount { display: none; }

.share-email { max-width: 1190px; margin: 30px auto; position: relative; }
	.share-email:before { content: ''; background: #c1c1c1; position: absolute; left: 0; right: 0; top: 12px; height: 1px; width: 100%; }
	.share-email .title { background: #fff; font-size: 16px; line-height: 25px; color: #0e2240; padding: 0 25px; margin-left: 75px; float: left; position: relative; z-index: 100; font-weight: bold; }
	.share-email .social { background: #fff; float: right; position: relative; z-index: 100; padding-left: 15px; }
		.share-email .facebook { background: url(../images/icons-sprite.png) no-repeat 7px -1276px #fff; border: 1px solid #cccccc; display: block; border-radius: 22px; width: 22px; height: 22px; float: left; position: relative; }
		.share-email .email { background: url(../images/icons-sprite.png) no-repeat 3px -1312px #fff; border: 1px solid #cccccc; border-radius: 22px; display: block; width: 22px; height: 22px; margin-left: 8px; float: left; position: relative; }
		.fb-share-button, .share-email .email a { opacity: 0; width: 24px; height: 24px; position: absolute; left: 0; top: 0; }
			.share-email .facebook:hover { background: url(../images/icons-sprite.png) no-repeat -36px -1276px #0e2240; border: 1px solid #0e2240; }
			.share-email .email:hover { background: url(../images/icons-sprite.png) no-repeat -31px -1312px #0e2240; border: 1px solid #0e2240; }

/* Notes */
.note-msg { margin-bottom: 30px; }		

/* Grid page ======================================================================================= */
.products-grid { margin-left: -30px; }
	.toolbar-top { margin-bottom: 15px; }
	.product-toolbar { margin-bottom: 30px; }
		.toolbar-top .page-title { float: left; margin-top: 0; }
			.toolbar-top .page-title h1 { font-size: 16px; line-height: 20px; color: #0e2240; font-weight: bold; }
		.toolbar-right, .return-to-category { float: right; }
			.overview-link, .return-to-category { font-size: 12px; color: #848484; text-transform: uppercase; float: right; line-height: 20px; }
				.overview-link a, .return-to-category a { display: inline-block; color: #101010; padding-left: 5px; }
		.toolbar-right .toolbar, .product-toolbar .links { float: right; margin-left: 45px; }
		.catalogsearch-result-index .page-title { margin-top: 0; }
		.catalogsearch-result-index .pager { float: right; margin-bottom: 20px; }
		.catalogsearch-result-index .toolbar-bottom .pager { float: none; margin-bottom: 0; }
			.pagination, .product-position { font-size: 16px; line-height: 20px; color: #848484; }
			.pages .previous{
				background-image: url(../images/pijllinks.png);
				width: 20px;
				height: 20px;
				background-size: contain;
				display: inline-block; overflow: hidden; text-indent: -9999px; vertical-align: top;
			}
			.pages a.previous:hover{
				transform: scale(1.2);
			}
			.pages .next{
				background-image: url(../images/pijlrechts.png);
				width: 20px;
				height: 20px;
				background-size: contain;
				display: inline-block; overflow: hidden; text-indent: -9999px; vertical-align: top;
			}
			.pages a.next:hover{
				transform: scale(1.2);
			}
			.product-toolbar .product-prev { background: url(../images/icons-sprite.png) no-repeat 0 -1019px; width: 26px; height: 20px; display: inline-block; overflow: hidden; text-indent: -9999px; vertical-align: top; }
				 .product-toolbar .product-prev:hover { background: url(../images/icons-sprite.png) no-repeat 0 -1042px; }
			.product-toolbar .product-next { background: url(../images/icons-sprite.png) no-repeat -22px -1019px; width: 26px; height: 20px; display: inline-block; overflow: hidden; text-indent: -9999px; vertical-align: top; }
				.product-toolbar .product-next:hover { background: url(../images/icons-sprite.png) no-repeat -22px -1042px; }
	.products-grid .add-to-links { display: none; }
	.products-grid .link-wishlist { background: url(../images/icons-sprite.png) no-repeat 0 -1442px; line-height: 26px; padding-left: 30px; font-weight: bold; position: absolute; top:-50px; right: -10px; transition: all 0.1s linear; -webkit-transition:all 0.1s linear; text-indent: -9999px; overflow: hidden; width: 0; }	
		.products-grid li:hover .link-wishlist { top: 6px; transition: all 0.1s linear; -webkit-transition:all 0.1s linear; }
		.products-grid .link-wishlist:hover { background-position: 0 -1478px; border: 1px solid transparent; color: #000; }
	.products-grid li { float: left; width: 22.3%; padding-bottom: 37px; margin: 0 0 40px 30px; position: relative; }
		.products-grid li img { width: 100%; }
		.products-grid .product-name { margin: 10px 20px; line-height: 18px; height: 40px; }
			.products-grid .product-name a { color: #101010; line-height: 18px; font-size: 13px; font-weight: bold; }
		.products-grid .product-info { min-height: inherit !important; }
		.products-grid .product-info .price-box { margin: 20px 20px 16px; }
		.products-grid .actions { border-top: 1px solid #c6c6c6; position: absolute; bottom: 0; left: 0; right: 0; }
			.products-grid .actions a.button { background: #c6c6c6; display: block; line-height: 36px; float: left; width: 50%; overflow: hidden; position: relative; height: 36px; }
			.products-grid .actions a.buttondetails { background-color: #0e2240; color:#FFF; display: block; line-height: 36px; float: left; width: 100%; overflow: hidden; position: relative; height: 36px; padding-left: 100px; font-size: 16px; font-weight: bold;}
			.products-grid .actions a.buttondetails:after { content: ''; background: url(../images/icons-sprite.png) no-repeat 0 -920px; width: 25px; height: 25px; left: 20%; margin-left: -12px; position: absolute; top: 6px; }
			.products-grid .actions a.buttondetails > span.hover-link { background: rgba(45, 45, 45, 0.9); position: absolute; bottom: -40px; left: 0; right: 0; color: #fff; font-size: 12px; line-height: 14px; padding: 5px 20px; text-transform: uppercase; text-align: center; transition: all 0.1s linear; -webkit-transition:all 0.1s linear; z-index: 100; }
			.products-grid .actions a.buttondetails:hover > span.hover-link { bottom: 0; transition: all 0.1s linear; -webkit-transition:all 0.1s linear; }

.products-grid .actions a.button:after { content: ''; background: url(../images/icons-sprite.png) no-repeat 0 -920px; width: 25px; height: 25px; left: 50%; margin-left: -12px; position: absolute; top: 6px; }
				.products-grid .actions a.button > span.hover-link { background: rgba(45, 45, 45, 0.9); position: absolute; bottom: -40px; left: 0; right: 0; color: #fff; font-size: 12px; line-height: 14px; padding: 5px 20px; text-transform: uppercase; text-align: center; transition: all 0.1s linear; -webkit-transition:all 0.1s linear; z-index: 100; }
				.products-grid .actions a.button:hover > span.hover-link { bottom: 0; transition: all 0.1s linear; -webkit-transition:all 0.1s linear; }
			.products-grid .actions button.button { background: #fff; border: 0; float: right; width: 50%; text-align: center; line-height: 36px; height: 36px; position: relative; overflow: hidden; }
				.products-grid .actions button.button > span.ico-add { background: url(../images/icons-sprite.png) no-repeat 0 -965px; display: inline-block; text-indent: -9999px; overflow: hidden; width: 36px; height: 36px; }
				.products-grid .actions button.button > span.hover-add-to-cart { background: rgba(14, 34, 64, 0.9); position: absolute; bottom: -40px; left: 0; right: 0; color: #fff; font-size: 12px; text-transform: uppercase; text-align: center; transition: all 0.1s linear; -webkit-transition:all 0.1s linear; }
				.products-grid .actions button.button:hover > span.hover-add-to-cart { bottom: 0; transition: all 0.1s linear; -webkit-transition:all 0.1s linear; }
				.products-grid .actions button.button.disabled > span.ico-add { opacity: 0.4; }
			.price-box p.minimal-price { font-size: 14px; min-height: 30px; }
			.product-info .price-note { text-align:  left; font-size: 11px; color: #242f5d; margin: 10px 20px 3px; }

.toolbar-bottom { margin-bottom: 30px; }

.block-viewed { border-top: 1px solid #0e2240; padding-top: 35px; margin-bottom: 40px; }
.cms-no-route .block-viewed { display: none; }
.cms-no-route .col2-right-layout .col-main { padding-top: 0; }
	.block-viewed .block-title { font-size: 14px; font-weight: bold; color: #0e2240; margin-bottom: 25px; }
	.block-viewed ol { margin-left: -30px; }
		.block-viewed li { border: 1px solid #e8e8e8; margin-left: 30px; float: left; width: 22.3%; position: relative; overflow: hidden; }
			.block-viewed li .hover { background: rgba(0, 0, 0, 0.8); display: block; opacity: 0; position: absolute; left: 0; right: 0; bottom: -300px; width: 100%; height: 100%; text-decoration:none; transition: all 0.2s linear; -webkit-transition:all 0.2s linear; }
				.block-viewed li:hover .hover { bottom: 0; opacity: 1; }
			.block-viewed li .hover .product-name { color: #fff; font-size: 13px; line-height: 18px; font-weight: bold; margin-top: 60px; text-align: center; }
			.block-viewed li .product-image { display: block; text-align: center; }
			.block-viewed li .product-image img { width: 100%; height: auto; }
			.block-viewed li .product-info { display: none; }

/* List page ======================================================================================= */
.category-menu-wrap { margin-bottom: 30px; position: relative; z-index: 1000; margin-top: 20px;}
.category-main-menu { position: relative; }
#category-main-menu { background: #f6f6f6; border-top: 1px solid #0e2240; border-right: 1px solid #0e2240; display: none; position: absolute; left: 0; top: 39px;border-left: 1px solid #0e2240;border-bottom: 1px solid #0e2240; }
.category-main-menu.active #category-main-menu { display: block; }
.menu-link { 
background: url(../images/icons-sprite.png) no-repeat 10px -832px #c1c1c1;
    border: 1px solid transparent;
    display: block;
    color: #333;
    font-size: 14px;
    line-height: 38px;
    padding: 0 0 0 28px;
    width: 273px;
    text-transform: uppercase;
    /* border-radius: 0 10px 0 0; */
    position: relative;
    float: left;
    margin-right: 30px;
    transition: none;
    -webkit-transition: none;
    z-index: 1000;
    font-weight: 600;
    padding-left: 38px;
    padding-top: 1px;
}
	.menu-link:after { content: ''; background: url(../images/icons-sprite.png) no-repeat 10px -819px; width: 5px; height: 5px; position: absolute; right: 5px; top: 27px; color: #0e2240; }
	.menu-link:hover { background: url(../images/icons-sprite.png) no-repeat 10px -866px #f6f6f6; transition: none; -webkit-transition: none; }
	.category-main-menu.active .menu-link { background: url(../images/icons-sprite.png) no-repeat 10px -866px #f6f6f6; border-top: 1px solid #0e2240; border-right: 1px solid #0e2240; color: #0e2240; border-radius: 0; transition: none; -webkit-transition: none;border-left: 1px solid #0e2240; }
		.category-main-menu.active .menu-link:after { display: none; }
	/*.bg-left { background: #0e2240; position: absolute; right: 100%; top: -1px; width: 3000px; height: 40px; }*/
	.category-main-menu.active .menu-link .bg-left { background: #f6f6f6; border-top: 1px solid #0e2240; height: 39px; }
	.category-main-menu:hover .menu-link .bg-left { background: #f6f6f6; height: 39px; }

.catalog-product-view .menu-link { background-position: 13px -832px; width: 43px; padding: 0; overflow: hidden; text-indent: -9999px; margin-right: 0; }
.catalog-product-view .menu-link:hover, .catalog-product-view .category-main-menu.active .menu-link { background-position: 13px -866px; }
	.catalog-product-view #category-main-menu .menubuilder-menu { max-width: 1190px; margin: 0 auto; }

#category-main-menu ul.nav-link-list > li, .first-menu-column { float: left; width: 280px; padding-right: 20px; box-sizing: border-box; }
#category-main-menu .menubuilder-menu { position: relative; padding: 20px 0; padding-left: 20px;}
	#category-main-menu .menubuilder-menu > ul { position: relative; z-index: 1000; }
	.bg-menu-category { background: #f6f6f6; border-top: 1px solid #0e2240; border-bottom: 2px solid #cbcbcb; position: absolute; top: -1px; right: 0; height: 100%; }
	.column-0 { margin-bottom: 35px; }
	#category-main-menu ul.nav-link-list li a { line-height: 24px; font-size: 12px; color: #101010; }
		#category-main-menu ul.nav-link-list li a:hover { color: #39629d; }

.catalog-category-view .breadcrumbs, .catalog-product-view .breadcrumbs { float: left; margin: 10px 0; }
	.catalog-category-view .breadcrumbs strong, .catalog-category-view .breadcrumbs a, .catalog-product-view .breadcrumbs strong, .catalog-product-view .breadcrumbs a { color: #101010; }

.catalog-category-view .col-main > .page-title { display: none; }

.overview-top { margin-bottom: 70px; }
	.image-description { background: #fff; float: left; width: 75%; -webkit-box-shadow: 0 0 4px 1px #ccc; -moz-box-shadow: 0 0 4px 1px #ccc;
	box-shadow: 0 0 4px 1px #ccc; position: relative; min-height: 368px; }
		.image-description .category-image { float: left; max-width: 273px; margin-right: 33px; padding-bottom: 0; }
		.image-description .category-description { padding: 30px 20px 0 0; }
			.image-description .category-description .newsletter-button { position: absolute; right: 0; bottom: 0; }
				.image-description .category-description .newsletter-button .button { height: 36px; line-height: 36px; text-transform: uppercase; padding: 0 30px; }
					.image-description .category-description .newsletter-button .button > span { padding-left: 30px; position: relative; }
						.image-description .category-description .newsletter-button .button > span:after { content: ''; background: url(../images/icons-sprite.png) no-repeat 0 -238px; height: 20px; width: 20px; position: absolute; left: 0; top: 0; }
							.image-description .category-description .newsletter-button .button:hover { background: #1c1c1c; border-color: #1c1c1c; color: #fff; }
				.image-description .category-description p { line-height: 24px; }

	.special-product { float: right; width: 22%; padding-bottom: 37px; position: relative; }
		.special-product .name { margin: 10px 20px; }
			.special-product .name h2 { color: #101010; line-height: 18px; font-size: 13px; font-weight: bold; }
		.special-product  .products-info .content .price-box { margin: 20px 20px 10px; opacity: 1; }
	.special-product .links { border-top: 1px solid #c6c6c6; position: absolute; bottom: 0; left: 0; right: 0; display: none;}
		.special-product .links a.button { background: #c6c6c6; display: block; line-height: 36px; float: left; width: 50%; overflow: hidden; position: relative; height: 36px; }
			.special-product .links a.button:after { content: ''; background: url(../images/icons-sprite.png) no-repeat 0 -920px; width: 25px; height: 25px; left: 50%; margin-left: -12px; position: absolute; top: 6px; }
			.special-product .links a.button > span.hover-link { background: rgba(45, 45, 45, 0.9); position: absolute; bottom: -40px; left: 0; right: 0; color: #fff; font-size: 12px; line-height: 14px; padding: 5px 20px; text-transform: uppercase; text-align: center; transition: all 0.1s linear; -webkit-transition:all 0.1s linear; z-index: 100; }
			.special-product .links a.button:hover > span.hover-link { bottom: 0; transition: all 0.1s linear; -webkit-transition:all 0.1s linear; }
		.special-product .links button.button { background: #fff; border: 0; float: right; width: 50%; text-align: center; line-height: 36px; height: 36px; position: relative; overflow: hidden; }
				.special-product .links button.button > span.ico-add { background: url(../images/icons-sprite.png) no-repeat 0 -965px; display: inline-block; text-indent: -9999px; overflow: hidden; width: 36px; height: 36px; }
				.special-product .links button.button > span.hover-add-to-cart { background: rgba(14, 34, 64, 0.9); position: absolute; bottom: -40px; left: 0; right: 0; color: #fff; font-size: 12px; text-transform: uppercase; text-align: center; transition: all 0.1s linear; -webkit-transition:all 0.1s linear; }
				.special-product .links button.button:hover > span.hover-add-to-cart { bottom: 0; transition: all 0.1s linear; -webkit-transition:all 0.1s linear; }
				.special-product .links button.button.disabled > span.ico-add { opacity: 0.4; }\
				.special-product img { display: block; width: 100%; }

.category-overview-list li { border: 1px solid #e8e8e8; margin-right: 20px; position: relative; width: 177px; float: left; height: 235px; }
	.category-overview-list .category-name { margin: 0; font-size: 14px; line-height: 20px; font-weight: normal; text-align: center; text-overflow: ellipsis; overflow: hidden; position: absolute; left: 10px; right: 10px; top: 80%; }
	.category-overview-list li img { width: 100%; height: auto; }
.category-overview-list .letters { font-weight: bold; font-size: 14px; }
.category-overview-list .slick-prev { background-color: inherit; border: 0; left: -28px; }
	.category-overview-list .slick-prev:hover { background-color: #0e2240 ; }
.category-overview-list .slick-next { background-color: inherit; border: 0; right: -18px; }
	.category-overview-list .slick-next:hover { background-color: #0e2240 ; }
.categories-grid { margin: 20px 0 40px; height: 237px; overflow: hidden; }
.categories-grid.slick-initialized { height: inherit; overflow: inherit; }
.category-overview-list li:hover .category-image .category-name { opacity: 0; }

.category-image-hover { background: rgba(0, 0, 0, 0.8); display: block; opacity: 0; position: absolute; left: 0; right: 0; bottom: -300px; width: 100%; height: 100%; text-decoration:none; transition: all 0.2s linear; -webkit-transition:all 0.2s linear; }
	.category-overview-list li:hover .category-image-hover { bottom: 0; opacity: 1; }
.category-image-hover .category-name { color: #fff; text-align: center; }
 .category-image-hover .category-name-icon:after { content: ''; background: url(../images/ico-info-hover.png) no-repeat; position: absolute; top: 45px; left: 50%; width: 105px; height: 105px; margin-left: -55px; }
  .category-image-hover .category-name-icon:hover:after { background-position: 0 bottom; }
  .category-image { display: block; min-height: 190px; padding-bottom: 45px; position: relative; }



/* Checkout page ======================================================================================= */
.title-buttons h1, .title-buttons h2, .title-buttons h3, .title-buttons h4, .title-buttons h5, .title-buttons h6 { float: left; margin:8px 0; width: 73%; }
.cart .title-buttons .checkout-types { float: right; }
.cart-table .btn-continue { float:right; }
.cart-table .or { float:right; line-height:29px; margin-left:20px; text-transform:none; }
.cart-table .cart-footer-actions button:fist-child { display:none; }
.cart-table .btn-update { float:right; margin-left:20px; }
.cart-table .btn-empty { float:left; }
.cart-table tfoot td { padding: 15px 10px; }
#shopping-cart-table button.button { text-align:center; color:#fff; font-size:13px; text-transform:none; height: 34px; line-height: 34px; }
	#shopping-cart-table button.button:hover { background:#fff; color:#0e2240; }
#shopping-cart-table .product-image { display: inline; height:auto; }
.cart-links { margin-top:10px; }
#shopping-cart-table th { text-transform:uppercase; }
.cart-links li a { font-size:13px; text-transform:uppercase; }
	#shopping-cart-table .product-image img { max-width:inherit; }
.checkout-types button { background: #17ae00; border: 0; border-bottom: 2px solid #078f00; border-right: 2px solid #078f00; display: block; position: relative; color: #fff; font-size: 13px; line-height: 38px; height: 40px; transition: background-color 0.2s linear; -webkit-transition: background-color 0.2s linear; left: 0px; }
.checkout-types button:hover { background: #078f00; border: 0; border-bottom: 2px solid #078f00; border-right: 2px solid #078f00; }
.cart-price { display:block; text-align:center; font-family: lft-etica, sans-serif; font-size: 15px; font-family: 'daxbold'; }
#checkout-review-load .cart-price { text-align:right; font-weight:normal; }
#shopping-cart-totals-table .a-right { text-align:right; }
	#shopping-cart-totals-table .a-right strong { font-weight:normal; font-size:13px; }
	#discount-coupon-form label { padding:5px 0; }
	#shopping-cart-totals-table tfoot tr:last-child .a-right strong { font-weight:bold; font-size:13px; }
	 #shopping-cart-table sup { top: -3px; font-size: 10px; margin-left: 2px; }
	 #shopping-cart-totals-table sup { top: -5px; font-size: 11px; margin-left: 2px; }
 #checkout-review-load { position: relative; padding-bottom: 10px; }
 	#opc-review #checkout-review-load > .buttons-set { position: absolute; right: 15px; bottom: 10px; padding: 0; text-align: right; }
 		#checkout-review-load > .buttons-set h1 { font-size: 18px; }

.pcnl-with-addition .input-box { position:relative; }
.pcnl-with-addition input { display:block; margin-bottom:10px; }
	.pcnl-with-addition .customSelect { margin-bottom:40px; }
	.pcnl-with-addition .validation-advice { position:absolute !important; top:inherit !important; bottom:0; left:0; }
	.product-cart-info .btn-remove { display:none; }
	.product-cart-sku, .product-cart-sku span { font-size:14px; }
	.product-cart-image .cart-links { display:none; }
.cart-forms { float:left; width:43%; }
.cart-totals-wrapper { float:right; width:30%; margin-bottom: 30px; }
#shopping-cart-totals-table td { border-bottom: 1px solid #f5f5f5; font-size:14px; text-transform:none; color:#202932; min-width:100px; padding:10px; }
.checkout-types li { clear:both; }
	.checkout-types li a { display:block; text-align:right; }
	.checkout-types button.btn-proceed-checkout { margin-bottom:10px; }
	
	#discount-coupon-form .discount-form { border:1px solid #f5f5f5; padding:10px 20px 20px; }
#discount-coupon-form input { height: 34px; line-height: 34px; float: left; }
.cart-forms .shipping { float:left; width:50%; margin-left:30px; }
#shipping-zip-form { border:1px solid #ececec; border-radius:5px; padding:10px 20px 20px; }
.shipping-region label { max-width:110px; float:left; }
.shipping-region .input-box, .shipping-postcode .input-box { float:left; }
.shipping-region #region { margin:0; }
.discount-form button, .discount-form button:hover { border-left: 0; line-height: 34px; height: 34px; }

.checkout-onepage-failure .col2-right-layout .col-main { padding-top: 10px; float: none; width: 100%; margin-top: 30px; }
.checkout-onepage-failure .col-right.sidebar { display: none; }


/* Shopping Cart Collateral boxes */
.cart .cart-collaterals .col2-set { float:left; width:68%; }
.cart .cart-collaterals .col2-set .col-2 { width:auto; float:none; }
#rewardFormArea { width:340px; margin-right:35px; }

.cart .crosssell { margin-top: 30px; clear: both; padding: 20px 15px; -moz-box-shadow: 0 0 4px -2px #8C8C8C; -webkit-box-shadow: 0 0 4px -2px #8C8C8C; box-shadow: 0 0 4px -2px #8C8C8C; }
.cart .crosssell li.item { margin:0 0 30px 30px; }


/* Discount Codes & Estimate Shipping and Tax Boxes */
.cart .discount,
.cart .shipping, .cart .giftcard { background: #fff; padding: 0; margin: 0 0 18px; }
#discount-coupon-form label, .giftcard label { display:block; }
.v-fix { float:left; }
.cart .discount h2,
.cart .shipping h2, .cart .crosssell h2 { background-position:0 0; background-repeat:no-repeat; font-size:16px; line-height:26px; text-transform:uppercase; margin-bottom: 20px; }
.discount-form .input-box { float:none; }
.cart .discount .buttons-set,
.cart .shipping .buttons-set { margin:10px 0 0; border:0; padding:0; text-align:left; }
.cart .discount .buttons-set button.button,
.cart .shipping .buttons-set button.button { float:none; margin-left:0; }
.cart .discount .button { margin-left: -2px; }

.cart .discount .input-box { margin:8px 0 0; width:260px; }
.cart .discount input.input-text { width:254px; }

.cart .shipping .sp-methods { margin:10px 0 0; padding:5px 0 0; background:url(../images/bkg_divider1.gif) 0 0 repeat-x; }

/* Shopping Cart Totals */
.cart .totals { float:right; width:425px; background:#fff; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; margin-top:25px; padding:10px 15px; margin-bottom:25px; }
.cart .totals table { width:100%; margin:7px 0; }
.cart .totals td { padding: 10px 15px 4px 7px; }
.cart .totals tr.last td {}
.cart .totals tfoot th { padding:5px 15px 5px 7px; }
.cart .totals tfoot td { padding-top:5px; padding-bottom:5px; }
.cart .totals tfoot th strong,
.cart .totals tfoot td strong { font-size:15px; }
.cart .totals .checkout-types { font-size:13px; padding:8px 0; text-align:right; }
.cart .totals .checkout-types li { clear:both; margin:10px 0; }
button.btn-proceed-checkout { float:right; }
#shopping-cart-totals-table .totals-rewards { font-size:14px; font-weight:bold; }
#shopping-cart-totals-table tbody tr:last-child .price { font-size:14px; }
.cart .cart-collaterals { padding: 25px 0 0; width:525px; float:left; }
.cart .discount .buttons-set, .cart .shipping .buttons-set { margin: 10px 0 0; }
#shipping-zip-form li { margin-bottom:15px; }
#shipping-zip-form label { width:110px; float:left; display:block; line-height:30px; }
.check-gc-status { clear:both; margin-top:10px; }
#region, #shipping-zip-form button { margin:10px 0 0 110px; }

.cart .page-title { margin: 20px 0; }
	.cart .page-title .checkout-types { margin-top: 10px; }

/* Onepage ======================================================================================= */
.checkout-onepage-index .main-container { margin-top: 40px; }
.block-progress { border:0; margin:0; }
.block-progress .block-title { background:none; border:0; padding:0; margin:0 0 5px; }
.block-progress .block-title strong { display: block; font-weight: normal; font-size:15px; color:#000; margin-bottom: 15px; text-transform: uppercase; }
.block-progress .block-content { background:none; }
.block-progress dt { font-size:11px; text-transform: uppercase; line-height:1.35; background:#f5f5f5; margin:0 0 6px; padding: 10px 15px; color:#000; margin-bottom:10px; }
.block-progress dd { background:#fff; border-top:0; padding:8px 13px; margin:0 0 6px; }
.block-progress dt.complete { margin:0; background:#eee; color:#999999; }
.block-progress dd.complete {}
.block-progress p { margin:0; }
.block-progress .cards-list dt { background:none; border:0 none; color:inherit; font-size:12px; margin:5px 0; padding:0; }
.block-progress .cards-list dd { border:0 none; margin:0; padding:0; }
.block-progress .cards-list .info-table th { font-weight:normal; }

.validation-advice { color: #ea1c24; margin: 0; padding: 10px 0; font-size: 13px; }
#contactForm .validation-advice { margin-left: 130px; }

#checkout-agreements { margin: 0 15px; }
	.agreement-content { background: #fff; display: none; height: 500px; width: 500px; overflow-y: scroll; padding: 20px; }
	#checkout-agreements .agree { position: relative; }

.opc-block-progress dt.complete a,
.opc-block-progress dt.complete .separator { display: inline; }
.opc-block-progress dt a,
.opc-block-progress dt .separator { display: none; }

.opc .buttons-set { margin-top:0; }
.opc .buttons-set button { float:right; height: 34px; line-height: 34px; }
.opc .buttons-set p.required { margin:0; padding:0 0 10px; }
.opc .buttons-set .back-link small { display:none; }
.opc .buttons-set.disabled button.button { display:none; }
.opc .buttons-set .please-wait { display:block; clear:both; height:46px; line-height:46px; padding-top:10px; font-size: 13px; }
.opc .ul { list-style:disc outside; padding-left:18px; }
#checkout-progress-wrapper { padding-left: 30px; }

.opc { position:relative; }
.opc li.section { margin-bottom:10px; }

.opc .step-title { background: #f5f5f5; border: 1px solid #f5f5f5; color: #000; padding: 13px; text-align:right; }
.opc .step-title .number { float:left; background:#888; width:20px; text-align:center; height:20px; font-size:11px; margin:0 10px 0 0; color:#fff; font-weight:bold; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; line-height:20px; }
.opc .step-title h2 { float:left; margin:0; font-size:16px; line-height:20px; text-transform:uppercase; }
.opc .step-title a { display:none; float:right; font-size:11px; line-height:16px; }

.opc .allow .step-title { background:#e1e1e1; border:1px solid #e1e1e1; border-bottom:0; color:#a4b3b9; cursor:pointer; }
.opc .allow .step-title .number { background:#b5b5b5; color:#fff; }
.opc .allow .step-title h2 { color:#acacac; }
/*.opc .allow .step-title a { display:block; }*/

.opc .active .step-title { background:#f5f5f5; border:1px solid #f5f5f5; padding: 13px; color:#000; cursor:default; }
.opc .active .step-title .number { background:#000; border: 1px solid #000; color:#fff; }
.opc .active .step-title h2 { color: #000; }
/*.opc .active .step-title a { display:none; }*/

.opc .step { border:1px solid #f5f5f5; border-top:0; background:#fff; padding:15px 30px; position:relative; }
.opc .step .tool-tip { right:30px; }

#opc-login .buttons-set { border-top:0; }
#opc-login h3 { font-size:14px; border-bottom:1px solid #e4e4e4; padding-bottom:10px; text-transform:uppercase; font-weight:bold; margin-bottom:10px; height: 40px; overflow: hidden; }
#opc-login h4 { font-size:1em; font-weight:bold; margin:0; text-transform:uppercase; }
.remember-me-popup { display:none; }

#opc-shipping_method .buttons-set { border-top:0; }
.opc .gift-messages-form { margin:0 -30px; background:#f6f1eb; border:1px solid #e9e4de; border-width:1px 0; padding:22px 24px 22px 30px; }
.opc .gift-messages-form .inner-box { padding:5px; height:260px; overflow:auto; }

#opc-review .step { border: 1px solid #f5f5f5; padding:0; }
#opc-review .product-name { font-weight:bold; color:#0a263c; }
#opc-review .item-options { margin:5px 0 0; }
#opc-review .buttons-set { padding:15px; }
#opc-review .buttons-set p { margin:0; padding-top: 20px; clear: both; float: none; line-height: 20px; }
#opc-review .buttons-set .please-wait { height:55px; line-height:55px; }
#opc-review .authentication { margin:0 auto; width:570px; }
#opc-review .warning-message { color:#222; font-weight:bold; text-align:center; padding:10px 10px 0; }

#col-right-opcheckout { float:right; width:200px; }
#checkoutSteps { margin-bottom:25px; }
#checkoutSteps li { position:relative; }
#checkout-step-login #login-form li label, #checkout-step-shipping label, #co-billing-form li label, #payment_form_ccsave label { display:block; float:left; line-height:24px; margin-right:10px; width:115px; font-size: 12px; }
#co-billing-form li label { width: 150px; }
#checkout-step-login ul li { font-size: 13px; margin-bottom: 10px; }
#payment_form_ccsave label { width: 180px; }
#co-payment-form .v-fix { width: 150px; float: left; margin-right: 20px; }
	#co-payment-form .v-fix select { width: 156px !important; }
#ccsave_cc_cid { margin-right: 20px; }
.cvv-what-is-this { display: inline-block; line-height: 28px; }
/* #co-billing-form .wide label, #co-shipping-form .wide label { float:none; width:auto; } */
#checkout-step-login .col-1 { float:left; width:48%; position:relative; margin-bottom:40px; min-height:266px; }
#checkout-step-login .col-2 { float:right; width:48%; position:relative; margin-bottom:40px; min-height:266px; }
#checkout-step-login .buttons-set { position:absolute; right:0; bottom:-40px; }
#checkout-step-login .col-1 .form-list li { margin-bottom: 10px; }
#co-billing-form .form-list li input[type="text"], #co-shipping-form .form-list li input[type="text"], #co-shipping-form .form-list li input[type="password"], #co-billing-form .form-list li input[type="password"], #co-billing-form .form-list li input[type="tel"], #co-billing-form .form-list li input[type="email"], #co-shipping-form .form-list li input[type="tel"], .input-file { min-width:325px; margin-bottom: 15px; padding: 0 10px; font-size: 12px; }
#co-billing-form .form-list li input[type="radio"], #co-shipping-form .form-list li input[type="radio"] { min-width:inherit; }
.address-field { float:left; margin-right:20px; }
/* #co-billing-form .form-list li .address-field input[type="text"], #co-shipping-form .form-list li .address-field input[type="text"] { min-width:170px; }*/
#co-billing-form .form-list li .field, #co-shipping-form .form-list li .field { float:none; }
#checkoutSteps li.add-field { margin-left:150px; }
#co-billing-form li.control label { line-height:normal; float:none; display:inline; width:auto; }
#co-billing-form .customSelectInner, #checkout-step-shipping .customSelectInner, .my-account .customSelectInner { width: 283px !important; }
#co-billing-form select, #checkout-step-shipping select, #payment_form_ccsave select { width:325px !important; margin-bottom: 15px; font-size: 12px; height: 24px; line-height: 24px; }
#co-billing-form .input-box, #checkout-step-shipping .input-box, #payment_form_ccsave .input-box { float:left; min-width:325px; }
#co-billing-form .input-box .input-text, #checkout-step-shipping .input-box .input-text, #payment_form_ccsave .input-box .input-text { width: 100%; }
#payment_form_ccsave li,#checkout-payment-method-load dt { margin-bottom: 10px; }
#co-billing-form .control { margin: 0 0 10px 160px; }
#co-billing-form .control .input-box { width:auto; }
#co-billing-form  p.required { margin-top:10px; }
#co-billing-form .col2-set .col-1 p, #co-billing-form .col2-set .col-2 p { height:35px; }
#checkout-review-table-wrapper { padding:15px; }
#checkout-review-table { border: 1px solid #f5f5f5; }
#checkout-review-table th { background: #f5f5f5; ext-transform:uppercase; }
#checkout-review-table th.a-center { text-align: right; }
#checkout-review-table td { min-width:100px; color:#202932; }
#checkout-step-review td.a-center { text-align: center; }
.pcnl-info-text { width:360px; float:left; }
#co-billing-form .form-list li input[type="checkbox"] { width:20px; }
.opc button { background:#999999; border-bottom: 2px solid #999999; border-right: 2px solid #999999; }
	.opc button:hover { background:#d20810; }
	#opc-review #checkout-review-table .product-name { font-size:13px; font-weight:normal; }
	#checkout-review-table.data-table td { padding:10px; }
		#checkout-review-table.data-table td.a-right { text-align:right; }
#checkoutSteps .validation-advice { position:relative; top:0; margin-top: -15px; }
.customSelect { margin-bottom: 15px; }
#checkoutSteps .back-link { float:left; margin:7px 0; }
#payment_form_ccsave dt { margin-bottom:10px; }
.checkout-onepage-payment-additional-giftcardaccount { border-top:1px dotted #000; padding-top:10px; }
#checkoutSteps p.required { margin-top:10px; }
.checkout-onepage-index .page-title { margin-top: 0; }
.checkout-onepage-index .inventory-work-label p { color: #ff0000;
	font-size: 16px; padding: 20px 20px 0px 20px; }
.checkout-onepage-index .inventory-work-label {  border: 3px solid #ff0000; margin-bottom: 20px; }

/* Styling calculator form */
.rkbullion-form-calculator .col-main, .cms-page-view .col1-layout .col-main { width: 100%; margin: 30px 0 0; padding: 20px 72px 65px; }
#calculatorForm .block-viewed { display: none;  }
#calculatorForm { margin-top: 20px; }
.customer-account-create .customSelectInner, #calculatorForm .customSelectInner { max-width: 283px; }
#calculatorForm .legend { display: none; }
#calculatorForm .form-list label { display: block; float: left; font-size: 12px; line-height: 24px; min-width: 170px; }
#calculatorForm .form-list .input-box { float: left; }
	#calculatorForm .form-list .input-box .input-text { margin-bottom: 15px; min-width: 325px; }
	.cms-page-view .price { font-weight: 600; }
		.cms-page-view .price sup { font-size: 10px; top: -4px; }
.bullion-calculate-button { margin-top: 20px; }

/* Detail page ======================================================================================= */	
#product_addtocart_form { margin-bottom: 70px; }
	.product-img-box { float: left; width: 48.5%; }
		.product-image-box { position: relative; }
			.product-image-box img { width: 100%; height: auto; }
		.product-image-box .ico-zoom { background: url(../images/icons-sprite.png) no-repeat 0 -1078px; display: block; position: absolute; right: 20px; bottom: 20px; width: 35px; height: 35px; cursor: pointer; }
			.product-image-box .ico-zoom:hover { background: url(../images/icons-sprite.png) no-repeat 0 -1133px; }
		#product_addtocart_form .product-image { border: 1px solid #c5c5c5; margin-bottom: 20px; }
			.product-image-box { padding: 3%; }
	.gallery-image {  display: none; width: 100%; }
	.gallery-image.visible { display: block; }
	#block-related li { width: 14.7%; text-align: center; }
		#block-related li .product { border: 1px solid #c6c6c6; }
			#block-related li .product .product-details.hover .product-name { padding: 0 10px; margin-top: 35px; }
			#block-related li .hover .product-image { background: #1c1c1c; border: 1px solid #414141; display: block; width: 145px; color: #fff; text-transform: uppercase; box-sizing: border-box; height:28px; margin: 30px auto 0; font-size: 12px; line-height: 28px; padding: 0 15px; text-align: center; position: absolute; bottom: 20px; left: 15px; right: 15px; }
			#block-related li .hover .product-image:hover { background: #3A629D; color: #fff; }
		.product-image-thumbs li { border: 1px solid #c5c5c5; float: left; margin: 0 15px 15px 0; width: 31%; }
		.product-image-thumbs li:last-child { margin-right: 0; }
			.product-image-thumbs li a { display: block; }
				.product-image-thumbs li img, #block-related li img { width: 100%; height: auto; }

/* Product-shop */
.product-shop { padding-top: 30px; width: 47%; float: right; }
	.product-shop .product-name { margin-bottom: 30px; }
		.product-shop .product-name h1 { font-size: 16px; line-height: 20px; color: #0e2240; font-weight: bold; }
		.product-shop-price { margin-bottom: 30px; }
			.product-shop-price .price-info { float: right; margin-right: 60px; text-align: center; min-width: 225px; }
				.product-shop-price .price-box .regular-price { float: none; }
				.tax-note, .tier-prices li { font-size: 11px; color: #0e2240; line-height: 20px; }
				.tier-prices { text-align: left; margin: 20px 0; }
				.qty-wrapper label { color: #101010; font-size: 12px; font-family: Arial; margin-right: 25px; }
				#qty { border: 1px solid #c5c5c5; height: 24px; width: 40px; padding: 0; text-align: center; font-size: 12px; line-height: 24px; color: #101010; }
			.product-option-qty { float: left; max-width: 255px; }
				#product-options-wrapper dt label { font-size: 12px; display: block; margin-bottom: 5px; }
				.tier-prices sup { top: -5px; font-size: 8px; }
		.add-to-cart-wrapper { margin-bottom:  30px; }
		#product-options-wrapper dd { margin-bottom: 10px; }
			.add-to-cart-wrapper .add-to-box { float: right; margin-right: 75px; }
				.add-to-cart-wrapper .btn-cart { background: url(../images/icons-sprite.png) no-repeat 15px -1220px #0e2240; border: 1px solid #0e2240; padding: 0 30px 0 75px; height: 44px; line-height: 44px; font-size: 14px; font-weight: bold; text-transform: uppercase; }
					.add-to-cart-wrapper .btn-cart:hover { background: url(../images/icons-sprite.png) no-repeat 15px -1345px #fff; color: #0e2240; }
			.add-to-cart-wrapper .add-to-links { float: left; margin: 6px 0; }
			.link-wishlist { background: url(../images/icons-sprite.png) no-repeat 10px -1189px; border: 1px solid transparent; display: block; padding: 0 10px 0 33px; font-size: 12px; color: #0e2240; line-height: 30px; }
			.link-wishlist:hover { border: 1px solid #0e2240; }
		div.sharing-links { position: relative; margin-bottom: 30px; }
		div.sharing-links:before { content: ''; background: #e4e4e4; height: 1px; width: 100%; position: absolute; left: 0; right: 0; top: 12px; }
		.sharing-links .note { background: #fff; float: left; margin-left: 50px; padding: 0 7px 0 20px; z-index: 99; position: relative; color: #848484; font-size: 12px; font-family: arial; margin-top: 4px; }
			.sharing-links > ul { background: #fff; padding-right: 15px; z-index: 99; position: relative; float: left; }
			.sharing-links li { float: left; margin-left: 4px; }
				.sharing-links .link-facebook { background: url(../images/icons-sprite.png) no-repeat 7px -1276px #fff; border: 1px solid #cccccc; display: block; border-radius: 22px; width: 22px; height: 22px; overflow: hidden; text-indent: -9999px; }
				.sharing-links .link-email-friend { background: url(../images/icons-sprite.png) no-repeat 3px -1312px #fff; border: 1px solid #cccccc; border-radius: 22px; display: block; width: 22px; height: 22px; overflow: hidden; text-indent: -9999px; }
					.sharing-links .link-facebook:hover { background: url(../images/icons-sprite.png) no-repeat -36px -1276px #0e2240; border: 1px solid #0e2240; }
					.sharing-links .link-email-friend:hover { background: url(../images/icons-sprite.png) no-repeat -31px -1312px #0e2240; border: 1px solid #0e2240; }

		.product-shop .description p, .product-shop .sku span, .product-shop .description li, .description p a { color: #101010; font-size: 12px; line-height: 16px; }
		.product-shop .sku { margin-bottom: 30px; }
	.zoomContainer, .product-options-bottom { display: none !important; }
	.description p a, .col-main .std p a { color: #101010; }
		.description p a:hover, .col-main .std p a:hover { text-decoration: none; color: #39629d; }

	#product-options-wrapper select { width: 200px; }

	.catalog-category-view .col-main table td { padding: 5px; vertical-align: bottom; }
		.catalog-category-view .col-main table h4 a { color: #0e2240; font-size: 14px; line-height: 1.35; }
			.catalog-category-view .col-main table h4 a:hover { color: #39629d; }


/* Related products */
.block-related { border-top: 1px solid #e4e4e4; padding-top: 35px; margin-bottom: 20px; }
	.block-related .block-title { font-size: 14px; font-weight: bold; color: #0e2240; margin-bottom: 25px; }
	.block-related ol { margin-left: -20px; }
		.block-related li { border: 1px solid #e8e8e8; margin-left: 20px; float: left; width: 22.3%; position: relative; overflow: hidden; margin-bottom: 20px; }
			.block-related li .hover { background: rgba(0, 0, 0, 0.8); display: block; opacity: 0; position: absolute; left: 0; right: 0; bottom: -300px; width: 100%; height: 100%; text-decoration:none; transition: all 0.2s linear; -webkit-transition:all 0.2s linear; }
				.block-related li:hover .hover { bottom: 0; opacity: 1; }
			.block-related li .hover .product-name { color: #fff; font-size: 13px; line-height: 18px; font-weight: bold; margin-top: 60px; text-align: center; }
			.block-related li .product-image { display: block; text-align: center; }
			.block-related li .product-image img { width: 100%; }
	.block-related .product-info { display: none; }
	
/* Account Login/Create Pages ============================================================ */
.customer-account .main-container { margin-top: 30px; }
.block-account ul { margin-left: -20px; }
.block-account li a { display: block; font-size: 13px; text-transform: uppercase; padding: 5px 20px; }
	.block-account li a:hover { background: #0e2240; color: #fff; }
.account-login { margin-bottom:25px; }
.account-login .registered-users { width:49.6%; float:left; background:#fff; position:relative; }
	.account-login .registered-users .content { padding: 50px 50px 0; min-height:219px; }
		#login-form .registered-users .buttons-set button { float: right; min-width: 215px; height: 38px; line-height: 38px; }
	.account-login .registered-users ul label { margin-bottom: 5px; display: block; float: left; width: 125px; padding-top: 5px; }
	.account-login label { line-height: 30px; margin-bottom: 0; font-weight: normal; }
		.account-login .registered-users ul li { margin-bottom:10px; }
		.account-login .registered-users ul li input { min-width: 300px; height: 38px; line-height: 38px; float: right; }
.account-login .new-users { border-left: 1px solid #0e2240; width:50%; float:right; background:#fff; position:relative }
	.account-login .new-users ul.benefits { font-size: 12px; margin-bottom: 20px; position: relative; }
		.account-login .new-users ul.benefits li { padding-left: 15px; }
		.account-login .new-users ul.benefits li:after { content: '-'; font-size: 18px; font-weight: bold; position: absolute; left: 0; top: 0; width: 10px; height: 10px; color: #242f5d; }
	.account-login .new-users ol.benefits { list-style: inside decimal; font-size: 12px; margin-bottom: 20px; }
	.account-login .new-users .benefits li { margin-bottom: 5px; position: relative; }
	.account-login .new-users .content { padding: 50px 50px 30px; min-height: 225px; }
		#login-form .new-users .buttons-set .button { float: left; min-width: 175px; height: 38px; line-height: 38px; }
	#login-form .buttons-set { padding: 0 50px 50px; }
	#login-form .new-users .buttons-set { bottom:-40px; }
	#login-form .input-box { float: right; }
	#login-form #login-password, #login-form #login-email { width: 100%; margin-bottom: 15px; }
p.required { text-align:right; color:#df313c; font-size:12px; margin:10px 0; }
	.required em { color:#df313c; font-size: 12px; font-family: 'daxbold'; margin-right: 3px; }
.account-login #login-form p.required { position: relative; top:0; right:0; }
.account-create-wrapper, .customer-account-forgotpassword #form-validate { background:#fff; border: 1px solid #0e2240; padding:45px 50px; margin:40px 0 25px; }
.account-create .validation-advice { padding: 0 0 20px; }
.account-create .form-list li label { display:block; float:left; min-width:180px; float:left; line-height: 26px; }
.control label, .account-create .form-list li.control label, #form-validate .form-list li.control label { line-height: 20px; }
.account-create input[type="file"] { min-width:325px; margin-bottom:15px; }
	.account-create input[type="file"] { padding: 0; -webkit-appearance: none; -webkit-border-radius: 0px; }
.control .input-box { float:left; margin-right:5px; }
	.control .input-box input { width:10px; }
#checkout-step-shipping .control label { width:auto; }
#checkout-step-shipping .control .checkbox-ico { margin-top:6px; }
	.account-login #login-form { border: 1px solid #0e2240; margin-top:20px; }
.form-instructions { font-size:15px; line-height:20px; }
.new-users .form-instructions { margin-bottom: 5px; }
a.back-link, .back-link > a { background: url(../images/icons-sprite.png) no-repeat 0 -1403px; font-size: 12px; line-height: 22px; padding-left: 20px; color: #242f5d; text-transform: uppercase; font-weight: bold; }
.account-create p.back-link, .customer-account p.back-link { float: left; margin: 7px 0; }
.account-create .back-link small, .customer-account .back-link small { display: none; }
	.account-create .buttons-set .button, .customer-account .buttons-set .button { float:right; }
.account-login #login-form .registered-users > .required { padding: 0 50px; }

.account-create-wrapper { position: relative; }
.account-create-left { float: left; width: 46%; }
	.account-create .buttons-set .button { position: absolute; right: 50px; bottom: 45px; }
.account-create-right { float: right; width: 50%; }
	.account-create-info-title { display: block; font-size: 15px; line-height: 20px; margin-bottom: 20px; color: #0e2240; }
.price-info .note { text-align: left; margin-bottom: 20px; }
	.account-create-info-list { font-size: 12px; line-height: 18px; list-style: inside decimal; text-align: left; color: #101010; }
		.account-create-info-list li { margin-bottom: 5px; }
		.description br { margin-bottom: 5px; }


.customer-account .col2-left-layout .col-main { float: right; width: 76%; }
.customer-account .sidebar.col-left-first { width: 22%; margin-top: 0; float: left; }
	.customer-account .col-left .block-title { font-size:20px; text-transform: uppercase; margin-bottom:30px; }
		.customer-account .col-left .block-title strong { text-transform: uppercase; font-weight: normal; }

.customer-account .main-container .my-account { background:#fff; border: 1px solid #c5c5c5; padding:15px 20px; }
.customer-account .page-title { padding-top: 10px; margin-top: 0; }
	.customer-address-index.customer-account .page-title { background: none; }
	.customer-address-index.customer-account .page-title h1 { background: url(../images/border-title.png) no-repeat center bottom; margin-bottom: 20px; padding-bottom: 10px; }
.box-title h3 { float:left; margin-right:20px; }
.box-title a { display:block; font-style: italic; line-height:24px; color:#e52329; }
.box-title a:hover { color:#191919; }
.box-content p, .box-content address { font-size:12px; }
.box-account .col2-set { margin-top:30px; }
	.box-account .box-head h2 { font-family: 'daxbold'; }
	.box-account .col2-set .col-1 { margin-bottom:30px; }
	.box-account.box-address .col2-set .col-1 { width: 48%; margin-right: 20px; float: left; }
	.box-account.box-address .col2-set .col-2 { width: 48%; float: left; }
#form-validate .form-list label { display:block; float:left; line-height:24px; min-width:160px; max-width: 160px; padding-right: 10px; font-size: 12px; }
#form-validate .form-list .control { margin-top:10px; }
#form-validate .form-list .control label { line-height: 22px !important; max-width: inherit; }
select { border: 1px solid #c5c5c5; width: 325px; margin-bottom: 15px; height: 24px; line-height: 24px; font-size: 12px; -webkit-appearance: none;
  -webkit-border-radius: 0px; cursor: pointer; }
 .customSelect { background: url(../images/bg-select.png) no-repeat right 0 #fff; border: 1px solid #c6c6c6; font-size: 12px; cursor: pointer; height: 24px; line-height: 24px; color: #101010; }
 	.customSelectInner { padding: 0 30px 0 10px; }
 #product-options-wrapper .customSelect, #product-options-wrapper input[type="file"], #product-options-wrapper input[type="text"], #product-options-wrapper input[type="search"], #product-options-wrapper input[type="password"] { width: 100%; }
 	#product-options-wrapper .customSelectInner { width: 100% !important; }
 	.options-note { margin: 13px 0; }
	.customer-account #form-validate .form-list .control input[type="checkbox"] { top:5px; float: left; }
#form-validate .form-list .input-box { float:left; }
	#form-validate .form-list .input-box .input-text { min-width:325px; margin-bottom: 15px; }
.customer-account .buttons-set { margin-top:20px; }
.customer-account #form-validate .selecter  { width:348px; }
.box-account.box-recent .box-head, .box-account.box-recent { margin-bottom:20px; }
.box-account.box-recent .box-head h2 { float:left; }
.box-account.box-recent .box-head a { display:block; float:right; line-height:27px; }
#my-orders-table { border: 1px solid #f5f5f5; margin-bottom:20px;  }
#my-orders-table colgroup { display:none; }
	#my-orders-table td { padding:10px; }
	.customer-account select { width: 325px; }

.block-reorder { display: none; margin:20px 0; }
	.customer-account .col-left .block-reorder .block-title { margin-bottom:10px; }
	#cart-sidebar-reorder .checkbox { float:left; margin: 4px 10px 0 0; }

.addresses-primary ol li { margin-bottom: 40px; width: 50%; padding-right: 20px; box-sizing: border-box; float: left; }
.addresses-primary h2, .addresses-primary h3, .addresses-additional h2, .order-info-box h2, .table-caption { font-weight: bold; margin-bottom: 30px; }
.order-info-box .box-content { margin-bottom: 30px; }
.order-info-box { float: left; width: 50%; padding-right: 20px; box-sizing: border-box; }
.order-info a { display: inline-block; margin: 5px 0; font-size: 14px; text-decoration: underline; }
	.order-info a:hover { text-decoration: none; }
#my-orders-table td.a-right, #my-orders-table .cart-price, #my-orders-table th.a-right, #my-orders-table th.a-center { text-align: right; }
.title-buttons .separator { display: none; }
.title-buttons .link-reorder, .title-buttons .link-print { background: #0070ba; float: right; border:1px solid transparent; display:block; padding:0 20px; text-align:center; height: 34px; line-height:34px; color:#fff; font-size:14px; font-family: 'dax-regularregular'; margin-bottom: 10px; min-width: 150px; font-weight: normal; }
	.title-buttons .link-reorder:hover, .title-buttons .link-print:hover { background:#fff; border: 1px solid #0070ba; color:#0070ba; }
.title-buttons .link-print { background: #fff; border:1px solid #0070ba; color: #0070ba; }
	.title-buttons .link-print:hover { background: #0070ba; border:1px solid transparent; color:#fff; }
	
.my-wishlist .title-buttons h1, .my-wishlist .title-buttons h2, .my-wishlist .title-buttons h3, .my-wishlist .title-buttons h4, .my-wishlist .title-buttons h5, .my-wishlist .title-buttons h6 { float: none; }
.my-wishlist textarea { border: 1px solid #c5c5c5; min-width: 200px; max-width: 200px; margin: 20px 0; }
.my-wishlist .qty { width: 50px; text-align: center; }
.my-wishlist .price-box .regular-price .price { font-size: 20px; line-height: 25px; }
.customer-wishlist-item-cart { text-align: center; }
.customer-wishlist-item-cart p { margin: 20px 0 0; }
.my-wishlist .buttons-set2 button { margin: 0 0 20px 20px; }
#wishlist-table { border: 1px solid #c6c6c6; width: 100%; }
.customer-wishlist-item-quantity, .customer-wishlist-item-price, .customer-wishlist-item-cart { text-align: center; }
	#wishlist-table th { border-bottom: 1px solid #c6c6c6; border-right: 1px solid #c6c6c6; padding: 10px; }
	#wishlist-table td { border-bottom: 1px solid #c6c6c6; border-right: 1px solid #c6c6c6; vertical-align: middle; padding: 10px; }
	.customer-wishlist-item-cart .button { display: inline-block; }

/* Captcha ================================================================================ */
.captcha-note      { clear:left; padding-top:5px; }
.captcha-image     { float:left; display:inline;  margin:0; position:relative; width:258px; }
.captcha-image .captcha-img { border:1px solid #b6b6b6; vertical-align:bottom; width:100%; }
.registered-users .captcha-image { margin:0;}
.captcha-reload { cursor:pointer; position:absolute; top:2px; right:2px;}
.captcha-reload.refreshing  { animation:rotate 1.5s infinite linear; -webkit-animation:rotate 1.5s infinite linear; -moz-animation:rotate 1.5s infinite linear; }

/* CMS page  ======================================================================================= */
.col-main .std table { margin: -40px 0 40px; }
	.col-main .std table tr:first-child { background: #066FB7; }
		.col-main .std table tr td { background: #e4e4e4; border-bottom: 1px solid #fff; border-top: 0; border-right: 1px solid #c6c6c6; padding: 10px 20px; color:#101010; font-size:12px; font-weight: bold; min-width: 80px; text-align: center; }
		.col-main .std table tr td:last-child { text-align: text; }
		.col-main .std table tr:first-child td { background: #fff !important; border-top: 1px solid #c6c6c6; font-size:12px; color:#101010; padding:10px 20px; text-align: center; font-weight: normal; }
		.col-main .std table tr td:first-child { border-top: 0; text-align: left; }
		.cms-page-view p strong img { margin: 0 0 20px; float: none !important; }
	.pull-left { float: left; }
	.pull-right { float: right; margin-left: 30px; }

.cms-icon { background: #0e2240; position: fixed; left: -150px; top: 356px; width: 227px; height: 48px; border-radius: 0 10px 0 0; -webkit-transition-duration: 0.213s; transition-duration: 0.213s; z-index: 1000; }
.cms-icon:hover { background: #c6c6c6; left: 0; -webkit-transition-duration: 0.213s; transition-duration: 0.213s; }
.cms-icon-top { top: 100px; -webkit-transition-duration: 0.613s; transition-duration: 0.613s; }
.cms-icon .icon-text { position: relative; }
.cms-icon .icon-link { float: left; padding: 0 65px 0 20px; }
	.cms-icon .icon-link h3 { font-size: 12px; color: #fff; text-transform: uppercase; margin: 7px 0 0; line-height: 18px; }
	.col-main .cms-icon .icon-link p { font-size: 12px; color: #101010; text-transform: uppercase; margin: 0; line-height: 16px; }
.cms-icon .icon { position: absolute; right: 7px; top: 4px; }

.cms-page-view .page-title h1 { font-size: 18px; line-height: 24px; margin-bottom: 40px; font-weight: bold; }
.cms-page-view h2 { font-size: 16px; line-height: 24px; font-weight: bold; }
.cms-page-view .col-main p { line-height: 24px; margin-bottom: 40px; }
	.cms-page-view .col-main p strong { font-size: 12px; }
	.cms-page-view.cms-webwinkel .col-main .image-text p, .cms-page-view.cms-webwinkel .col-main .slider p { line-height: 18px; margin-bottom: 20px; color: #101010; }
	.cms-page-view.cms-webwinkel .col-main .slider p { line-height: 16px; }
.cms-page-view .col-main img { margin: 0 0 20px 30px; }
.cms-page-view .col-main .slider img { margin-bottom: 0; }

.cms-page-view h5 { background: #e4e4e4; padding: 25px 40px; font-size: 18px; line-height: 30px; font-weight: bold; margin-bottom: 40px; text-align: center; }

.col-right.sidebar { float: right; width: 25.5%; box-sizing: border-box; }
.catalogsearch-result-index .col-right.sidebar { display: none; }
.sidebar .cms-block, .cms-usp-block { padding-left: 30px; margin-bottom: 50px; }
.cms-usp-block li { background: url(../images/icons-sprite.png) no-repeat 0 -443px; padding: 7px 0 7px 50px; margin-bottom: 7px; line-height: 24px; font-size: 16px; color: #0e2240; }
.cms-block.home_usp img { width: 100%; margin: 20px 0; }
.cms-contact .col-main a { font-size: 11px; color: #39629d; text-decoration: underline; }
.cms-contact .col-main a:hover { text-decoration: none; }
.cms-page-link { border-top: 1px solid #b0b0b0; border-bottom: 1px solid #b0b0b0; padding: 35px 0; position: relative; }
.cms-page-link:before { content: ''; background: #b0b0b0; position: absolute; left: 100%; top: -1px; width: 3000px; height: 1px; }
.cms-page-link:after { content: ''; background: #b0b0b0; position: absolute; left: 100%; bottom: -1px; width: 3000px; height: 1px; }
	.cms-page-view .cms-page-link h2 { font-size: 15px; line-height: 24px; margin-bottom: 10px; }
	.cms-page-view .cms-page-link p { margin-bottom: 0; }
		.cms-page-view .cms-page-link p a { background: url(../images/icons-sprite.png) no-repeat 15px -532px #0e2240; border: 1px solid #0e2240; display: block; color: #fff; box-sizing: border-box; width: 100%; padding: 0 10px 0 60px; height: 55px; font-weight: bold; font-size: 16px; line-height: 55px; }
			.cms-page-view .cms-page-link p a:hover { background: url(../images/icons-sprite.png) no-repeat 15px -584px #fff; color: #0e2240; }


/* Contact page ======================================================================================= */
.contacts-index-index iframe { margin-top: 20px; }
.contacts-index-index .buttons-set { margin-top: 20px; }
.contacts-index-index .buttons-set .button { float: left; margin-right: 20px; }
.contacts-index-index .buttons-set .required { float: left; }
.contactform .left { width: 50%; float: left; }
.contactform .right { width: 50%; float: right; }
	.contactform .right > div { margin-bottom: 15px; }
	.contactform h2 { text-transform: uppercase; margin-bottom: 20px; }
	#contactForm .legend { display: none; }
	.contactform .left label { min-width: 120px; float: left; margin-right: 20px; }
	.contactform .left input { margin-bottom: 15px; min-width: 300px; }
	textarea { border: 1px solid #7fb7dc; box-sizing: border-box; color: #a7a9ac; font-size: 14px; height: 100px; min-width: 300px; max-width: 300px; padding: 10px; }


			
/* Footer ======================================================================================= */
.tablet-footer-contact, .mobile-header-ups, .go-top, .mobile-header-nieuws { display: none; }
.footer-ups, .header-ups, .mobile-header-ups { background: #c6c6c6; margin-top: 40px; }
.cms-home .footer-ups, .header-ups { margin-top: 0; }
.header-ups { margin-top: 4px; margin-bottom: 10px; display: none;}
.ups-list { max-width: 1190px; margin: 0 auto; padding: 20px 0; }
	.ups-list li { float: left; width: 35.33%; box-sizing: border-box; padding: 0 30px 0 5%; position: relative; }
	.ups-list li.ups-b { padding-left: 5%; }
	.ups-list li.ups-c { padding-right: 0; width: 23%; float: right; }
		.ups-list li .icon { display: block; margin-right: 18px; width: 40px; position: absolute; overflow: hidden; left: 0; top: 0; height: 100%; }
			.ups-list li .icon img { display: block; position: absolute; top: 50%;  left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
		.ups-list li .content { display: table-cell; vertical-align: middle; overflow: hidden; height: 40px; }
			.ups-list li p { margin-bottom: 0; font-size: 14px; line-height: 18px; font-weight: bold; color: #0e2240; text-transform: uppercase; }
.footer-container { background: #f4f4f4; }
	.footer { max-width: 1190px; margin: 0 auto; padding: 35px 0 0; }
		.footer .main-content > div { float: left; }
		.footer .main-content > div.contact-list { width: 25%; }
		.footer .main-content > div.contact { width: 27.5%; }
		.footer .main-content > div.menu-producten { width: 25%; }
		.footer .main-content > div.menu-newsletter{ width: 20%; }
		.footer .contact-list li { color: #0e2240; font-size: 11px; margin-bottom: 17px; }
		.footer .contact-list li strong { text-transform: uppercase; font-size: 14px; line-height: 16px; }
		.footer .contact h3, .footer .block-title strong { display: block; text-transform: uppercase; font-size: 14px; line-height: 16px; font-weight: bold; margin-bottom: 15px; }
		.footer .contact .facebook,.footer .contact .instagram, .footer .contact .opening { margin-bottom: 20px; }
		.footer .facebook a, .cms-contact a.facebook { background: url(../images/icons-sprite.png) no-repeat 0 -366px; padding-left: 34px; display: block; color: #101010; font-size: 11px; line-height: 28px; text-decoration: none; }
		.footer .instagram a, .cms-contact a.instagram { background: url(../images/instagram.png) no-repeat -2px -2px; padding-left: 34px; display: block; color: #101010; font-size: 11px; line-height: 28px; text-decoration: none; }

			.footer .facebook a:hover, .cms-contact a.facebook:hover { background: url(../images/icons-sprite.png) no-repeat 0 -401px; text-decoration: underline; }
			.cms-contact a.facebook { display: inline-block; overflow: hidden; text-indent: -9999px; float: left; }
			.cms-contact p span { line-height: 28px; }
		.footer .contact .opening p { margin: 0; }
		.footer .mini-menubuilder-menu li a { font-size: 11px; color: #101010; line-height: 18px; }
			.footer .mini-menubuilder-menu li a:hover { text-decoration: underline; }

.footer .newsletter-box { margin-top: 40px; }
	.footer .form-subscribe-header, .mobile-newsleter { display: none; }
	.footer #newsletter { width: 100%; margin-bottom: 2px; }
	.footer .newsletter-box p { margin-bottom: 13px; }
	.footer .button { font-weight: normal; font-size: 12px; height: 26px; line-height: 26px; }

.footer .bottom { border-top: 1px solid #c1c1c1; padding: 10px 0 20px; text-align: center; }
	.footer .bottom .small-logo { background: url(../images/logo-footer.png) no-repeat; float: left; width: 94px; height: 32px; }
	.footer .bottom address { margin-top: 6px; }
	.footer .bottom p { margin: 0; font-size: 10px; line-height: 14px; }
		.footer .bottom p a { color: #39629d; text-decoration: underline; font-size: 10px; line-height: 14px; }
			.footer .bottom p a:hover { text-decoration: none; }

.go-top { position: relative; z-index: 613; }
	.go-top a { background: url(../images/icon-up.png) no-repeat; display: none; width: 90px; height: 90px; position: fixed; right: 5px; bottom: 100px; overflow: hidden; text-indent: -9999px; }
	.go-top a:hover { background: url(../images/icon-up-hover.png) no-repeat; }


.tablet-footer-contact { margin: 35px 25px; text-align: center; }
	.tablet-footer-contact h3 { font-size: 14px; line-height: 20px; margin-bottom: 10px; font-weight: bold; text-transform: uppercase; }
	.tablet-footer-contact p { color: #101010; font-size: 11px; margin-bottom: 15px; }
		.tablet-footer-contact p a { color: #39629d; }
			.tablet-footer-contact p a:hover { text-decoration: underline; }
	.tablet-footer-contact .social-box { position: relative; margin: 20px 0 10px;}
		.tablet-footer-contact .social-box:after { content: ''; background: #c6c6c6; position: absolute; left: 0; right: 0; top: 14px; height: 1px; width: 100%; }	
		.social-box ul { background: #fff; display: inline-block; padding: 0 15px; position: relative; z-index: 100; }
			.social-box ul li { float: left; }
			.tablet-footer-contact .facebook a { background: url(../images/icons-sprite.png) no-repeat -33px -1273px #c6c6c6; display: inline-block; border-radius: 28px; width: 28px; height: 28px; overflow: hidden; text-indent: -9999px; }
			.tablet-footer-contact .email a { background: url(../images/icons-sprite.png) no-repeat -28px -1309px #c6c6c6; border-radius: 28px; display: inline-block; width: 28px; height: 28px; margin-left: 10px; overflow: hidden; text-indent: -9999px; }
			.tablet-footer-contact .phone { background: url(../images/icons-sprite.png) no-repeat 6px -1550px #c6c6c6; border-radius: 28px; display: inline-block; width: 28px; height: 28px; margin-left: 10px; overflow: hidden; text-indent: -9999px; }
				.tablet-footer-contact .facebook a:hover, .tablet-footer-contact .email a:hover, .tablet-footer-contact .phone:hover { background-color: #0e2240; }

		
.customer-address-index.customer-account .page-title:after, .box-head:after, .box-title:after, .catalogsearch-result-index .toolbar:after, .block-subscribe:after, .ups-list ul:after, #product_addtocart_form:after, .main-menu-a ul:after, .links-cart ul:after, .page-header-top:after, .main-menu-b ul:after, .newsletter .block-subscribe:after, .row1:after, .row2:after, .footer-ups .ups-list ul:after, .footer .main-content:after, .products-slider .item-box:after, .products-info .price-box p:after, .footer .bottom:after, .main:after, .breadcrumbs ul:after, .header-newsletter .block-subscribe:after, .products-info .price-box:after, .share-email:after, .share-email .social:after, .category-menu-wrap:after, #category-main-menu .menubuilder-menu > ul:after, .overview-top:after, .main-container:after, .products-grid:after, .products-grid .price-box:after, .toolbar-top:after, .toolbar-bottom:after, #recently-viewed-items:after, .product-shop-price:after, .add-to-cart-wrapper:after, div.sharing-links:after, #block-related:after, .product-toolbar:after, .step-title:after, .product-shop-price .price-box:after, .cart .page-title:after, .col2-set:after, .form-list li:after, .field:after, #billing-buttons-container:after, .buttons-set:after, .product-image-thumbs:after, .ups-list li:after, .account-create-wrapper:after { display:block; content:"."; clear:both; font-size:0; line-height:0; height:0; overflow:hidden; }

/*! fancyBox v2.1.5 */
.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:#f5f5f5; color: #444; text-shadow: none; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; padding:0 !important; }
.fancybox-opened { z-index: 8030; width:auto !important; }
.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 !important; /*width:610px !important; height:auto !important;*/ }
.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-prev span, .fancybox-next span { background-image: url(../images/fancybox_sprite.png); }
#fancybox-loading { position: fixed; top: 50%; left: 50%; margin-top: -22px; margin-left: -22px; background-position: 0 -108px; opacity: 0.8; cursor: pointer; z-index: 8060; }
#fancybox-loading div {width: 44px; height: 44px; background: url(../images/fancybox_loading.gif) center center no-repeat; }
.fancybox-close { background:url(../images/fancybox_sprite.png) no-repeat; display:block; position: absolute; top: -15px; right: -15px; width: 35px; height: 35px; cursor: pointer; z-index: 8040; }
.fancybox-nav { position: absolute; top: 0; width: 40%; height: 100%; cursor: pointer; text-decoration: none; background: transparent url(../images/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 !important; width: auto; }
.fancybox-lock body { overflow: hidden !important; }
.fancybox-lock-test { overflow-y: hidden !important; }
.fancybox-overlay { position: absolute; top: 0; left: 0; overflow: hidden; display: none; z-index: 8010; background: url(../images/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; background: rgba(0, 0, 0, 0.8); -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; text-shadow: 0 1px 2px #222; color: #FFF; font-family: 'daxbold'; 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); }

/* Slick slider */
.slick-list,.slick-slider,.slick-track{position:relative;display:block}.slick-loading .slick-slide,.slick-loading .slick-track{visibility:hidden}.slick-slider{-moz-box-sizing:border-box;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent}.slick-list{overflow:hidden;margin:0;padding:0}.slick-list:focus{outline:0}.slick-list.dragging{cursor:pointer;cursor:hand}.slick-slider .slick-list,.slick-slider .slick-track{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.slick-track{top:0;left:0}.slick-track:after,.slick-track:before{display:table;content:''}.slick-track:after{clear:both}.slick-slide{display:none;float:left;height:100%;min-height:1px}[dir=rtl] .slick-slide{float:right}.slick-slide img{display:block}.slick-slide.slick-loading img{display:none}.slick-slide.dragging img{pointer-events:none}.slick-initialized .slick-slide{display:block}.slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent}.slick-arrow.slick-hidden{display:none}

.products-slider .slick-slide { position: relative; }

/* Responsive part ======================================================================================= */
@media (min-width: 1025px) and (max-width: 1215px) {
/* Header */
.main-menu-b ul { margin-left: 0; }
	.main-menu-b li a { padding: 0 15px; }
.main-menu-a ul { margin-left: 20px; }
.page-header-top { margin: 0 20px; }

/* Main content */
.main-container { padding: 0 20px; }
.cms-home .main-container { padding: 0; }
	.row1, .row2 { margin: 0 25px 30px; }
		.image-text .content { padding-bottom: 30px; }
			.row1 > .image img, .products-slider .item-box .image img { width: 100%; height: auto; }
			.row1 > .image .text, .row2 > .image .text { background: rgba(255, 255, 255, 0.8); padding: 19px 9px 15px 30px; }
		.products-slider .item-box .image { max-width: 175px; }
	.row2 .product1, .row2 .product2 { width: 21.6%; }
	.row2 .slider { background: #E3E3E3; position: relative; }
		.products-slider .item-box, .slider .slick-slider, .slider .slick-track, .slider .slick-list { position: inherit; height: 100%; box-sizing: border-box; }
			.products-slider .item-box .image .button { position: absolute; bottom: 20px; }
	.products-slider .item-box .content .button { right: inherit; bottom: 17px; }
	.products-info .price-box { margin: 2px 20px 10px; }
	.price-box .old-price .price-label { display: none; }
	.price-box .special-price .price, .price-box .regular-price .price { font-size: 22px; line-height: 26px; }
	.hover .price-box { bottom: 1px; }
	.cms-page-view .cms-page-link p a { font-size: 13px; }

	.share-email { margin-left: 20px; margin-right: 20px; }
	.bottom-products { margin-right: 20px; }
		.bottom-products .products-info, .bottom-products .product4 .products-info { margin-left: 20px; margin-right: 0; float: none; width: auto; }

/* List page */
.image-description { width: 74%; }
.categories-grid .slick-list { margin-left: 10px; }
.category-overview-list .slick-prev { left: -18px; }
.special-product { height: auto !important; }
.category-image-hover .category-name-icon::after { top: 30px; }
.category-image { min-height: 160px; }
	.category-overview-list .category-name { top: 78%; }

/* Detail page */
.add-to-cart-wrapper .add-to-box, .product-shop-price .price-info { margin-right: 0; }
.product-shop-price .price-info, .add-to-cart-wrapper .add-to-box { margin-right: 0; min-width: inherit; float: none; text-align: left; margin-bottom: 10px; }
.product-image-thumbs li { width: 30%; }

/* Checkout */
.checkout-onepage-index .col2-right-layout .col-main { padding: 20px; }

/* Checkout */
.checkout-onepage-index .col2-right-layout .col-main { padding: 20px; }
 
/* Newsletter */
.banner .newsletter .block-subscribe .block-title, .header-newsletter .block-subscribe .block-title, .footer-newsletter .block-subscribe .block-title { padding: 7px 20px 7px 60px; margin-left: 10px; }

/* Footer */
.footer-ups .ups-list { padding: 20px; }
.footer { padding: 35px 20px 0; }
}

@media (min-width: 768px) and (max-width: 1024px) { 

/* Header */
.main-menu-a li a { padding: 10px 12px; font-size: 12px; }
.main-menu-b ul { margin-left: 12px; }
	.main-menu-b li a { padding: 0 8px; font-size: 11px; }
.main-menu-a ul { margin-left: 10px; }
.page-header-top { margin: 0 20px; }

/* Content */
.main-container { margin: 15px 25px 0; }
.cms-index-index .main-container { margin: 0; }
.row1, .row2 { margin: 0 25px 30px; }
.banner > .image { min-height: 600px; }
.row2 > .image, .products-tablet { display: block; }
.product1, .product2, .product3, .product4, .row1 > .image { display: none; }
.row2 > .image .text, .cms-webwinkel .row1 .image-text .content { background: rgba(255, 255, 255, 0.8); top: inherit; bottom: 10px; left: 0; padding: 10px; text-align: center; }
.row2 .slider { width: 66%; }
	.products-slider .slick-slide img { width: 100%; height: auto; }
.row2 > .image { width: 32.6%; }
.products-tablet { margin: 0 25px;display:none; }
	.products-tablet .products-grid { margin-left: -10px !important; }
		.products-tablet .products-grid li { margin-left: 10px; width: 31.6%; }
.products-slider .item-box .image .button { left: 17px; }
.products-slider .item-box .image { max-width: 180px; }
.row2 .product1, .row2 .product2 { width: 20.5%; }
.products-slider .price-label { display: none; }
.image-text .content { padding: 30px 0 30px 15px; }
.product1 .product-image img, .product2 .product-image img  { width: 100%; height: auto; }
.banner .newsletter .block-subscribe .block-title, .header-newsletter .block-subscribe .block-title { padding: 7px 15px 7px 55px; margin-left: 20px; }
#newsletter-validate-detail-home::after, .header-newsletter #newsletter-validate-detail::after { right: -88px; }
.products-slider .item-box .content { padding: 0; }
.products-info .image > .product-image { display: block; margin-top: 30px; }
.products-info .price-box { position: absolute; left: 0; right: 0; bottom: 2px; }
.row2 .product1 .hover .product-name, .row2 .product2 .hover .product-name { margin-top: 57px; }
.products-slider .price-box { margin-top: 10px; }
.hover .link-learn { margin-top: 100px; }
.col2-right-layout .col-main { padding: 45px 45px 20px; width: 100%; float: none; }
	.page-title { margin-top: 0; }
.col-right.sidebar { width: 100%; float: none; }
.image-text { width: 100%; float: none; }
.products-slider .item-box .content .button { padding: 0 10px; margin-left: 3.5%; }
.products-info .price-box { margin-bottom: 19px; }
.share-email { margin-left: 20px; margin-right: 20px; }
.bottom-products { margin-right: 20px; }
		.bottom-products .products-info, .bottom-products .product4 .products-info { margin-left: 20px; margin-right: 0; float: none; width: auto; }
.cms-contact { display: none; }

/* Category list */
.catalog-category-view .col-main table { overflow-y: scroll; display: block; }
.col-left { width: 32%; }
.col2-left-layout .col-main { width: 65%; }
.selected-value { width: 90px; }
.description-adv .category-description { width: auto; float: none; }
.catadv { display: none; }
.amount { left: 0; bottom: -55px; }
.products-list .product-image { width: 35%; }
#products-list .product-shop { width: 65%; }
	.product-description { width: auto; float: none; }
	.product-price-box { width: 100%; float: none; }
	.product-price-box .product-secondary { text-align:right; width: 45%; float: right; }
	.product-price-box .product-actions { width: 35%; float: left; }
	.catalog-category-view .price-outlet .outlet, .catalog-category-view .price-rental .rental, .catalog-category-view .price-special .special { float: left; }
	.toolbar-bottom .pager, .bottom-toolbar .pager { margin-left: 25%; }

.category-image-hover .category-name-icon::after { top: 30px; }
.category-image { min-height: 160px; }
	.category-overview-list .category-name { top: 78%; }

.image-description { width: 63%; }
.special-product {  width: 35%; margin-left: 0; }
.image-description .category-description { padding: 30px 20px; }
.products-grid { margin-left: -10px; padding-left: 0; }
	.products-grid li { width: 31.6%; margin-left: 10px; }


/* Newsletter */
#newsletter-validate-detail-home, .header-newsletter #newsletter-validate-detail, .footer-newsletter #newsletter-validate-detail { width: 45.5%; }
.banner .newsletter .block-subscribe .block-title, .header-newsletter .block-subscribe .block-title, .footer-newsletter .block-subscribe .block-title { background: none; padding: 7px 20px 7px 0; margin-left: 25px; }
#newsletter-validate-detail-home:after, .header-newsletter #newsletter-validate-detail:after, .footer-newsletter #newsletter-validate-detail:after { right: -78px; }
#newsletter-validate-detail-home button, .header-newsletter #newsletter-validate-detail button, .footer-newsletter #newsletter-validate-detail button { z-index: 100; }
	

/* CMS page */
.row1, .row2 { margin-bottom: 20px; }
.cms-webwinkel .banner > .image { min-height: 325px; }
.cms-webwinkel .row1 .usp, .cms-webwinkel .row2 .slider { width: 62%; }
.col-right.sidebar { margin-top: 30px; padding: 0 45px; }
.sidebar .cms-block, .cms-usp-block { padding-left: 0; }
	.sidebar .cms-usp-block { float: left; }
	.sidebar .cms-page-link { border: 1px solid #b0b0b0; float: right; padding: 35px; }
	.cms-contact { clear: both; text-align: center; }
	.cms-page-link:after, .cms-page-link:before { display: none; }
	.cms-contact a.facebook { vertical-align: top; float: none; }
	.cms-webwinkel .row1 .usp li, .cms-usp-block li { background: url(../images/ico-check.png) no-repeat 0 5px; font-size: 14px; padding: 5px 0 5px 40px; margin-bottom: 5px; }

.cms-webwinkel .products-slider .item-box .image { max-width: 170px; }
.cms-webwinkel .row1 .image-text { width: 36%; }
.cms-page-view .col-main .homewrapper-list > .image-text img { margin: 0; width: 100%; }
.cms-webwinkel .homewrapper-list > .image-text { width: auto; margin: 0 25px 20px; float: none; overflow: hidden; }
	.cms-webwinkel .row1 .image-text .image { margin-right: 0; float: none; max-width: inherit; }
.cms-page-view.cms-webwinkel .col-main .row1 .image-text p { display: none; }
.cms-webwinkel .row1 .image-text .content { position: absolute; text-align: left; }

.tablet-discount { border: 1px solid #c5c5c5; padding: 15px; width: 36.5%; box-sizing: border-box; float: right; text-align: center; }
.cms-page-view .tablet-discount h3 { margin: 30px 0 0; font-size: 17px; line-height: 30px; font-weight: bold; color: #0e2240; }
.cms-page-view .tablet-discount h4 { background: #0f2341; color: #fff; font-size: 16px; line-height: 20px; padding: 10px; margin: 20px 0 35px; text-align: center; }
.cms-page-view .tablet-discount h5 { background: url(../images/icons-sprite.png) no-repeat right -1574px; padding: 6px 0; font-size: 11px; line-height: 14px; font-weight: normal; color: #0e2240; text-align: left; padding-right: 30px; margin: 0; }

.bottom-products { margin-right: 0; }
.bottom-products > div.products-tablet { float: none; width: 100%; }

/* List page */
.categories-grid .slick-arrow { display: none !important; }
.categories-grid .slick-track { left: -50px; }
.categories-grid { position: relative; }
.categories-grid:after { content:''; background: url(../images/bg-tablet-list-slider.png) repeat-y; right: 0; top: 0; height: 100%; position: absolute; width: 53px; }
	.category-overview-list li { margin-right: 12px; }
#category-main-menu ul.nav-link-list > li, .first-menu-column { width: 230px; }

/* Detail page */
.product-essential { max-width: 470px; margin: 0 auto; }
.product-img-box, .product-shop { width: auto; float: none; }
.add-to-cart-wrapper .add-to-box, .product-shop-price .price-info { margin-right: 0; }
.block-related .product-details, #recently-viewed-items .hover { display: none !important; }
.block-related .product-info { display: block; }
#block-related li, #recently-viewed-items li { width: 31.5%; }
.product-image-thumbs li { width: 29%; }
#block-related.products-grid .product-name, #recently-viewed-items .product-name { font-size: 12px; line-height: 18px; text-align: left; color: #101010; }
#block-related li .product { border: 0; }
.catalog-product-view .menu-link { background-position: 33px -832px; padding-left: 20px; }
.catalog-product-view .menu-link:hover, .catalog-product-view .category-main-menu.active .menu-link { background-position: 33px -866px; }
.block-related ol, .block-viewed ol { margin-left: -10px; }

/* Cart page */
.product-cart-actions { text-align: center; }
.product-cart-actions .qty, #shopping-cart-table button.button { display: inline-block; float: none; margin: 0 0 15px; }
	 #shopping-cart-table button.button { margin-bottom: 0; }
	 .cart .discount input.input-text { width: 175px; }
	 .cart-totals-wrapper { width: 40%; }
	 #shopping-cart-table td.product-cart-image { width: auto; }
	 #shopping-cart-table .product-image img { max-width: 100px; }
	 .cart .crosssell li.item { margin-left: 10px;}
	 
/* Checkout page */
#checkoutSteps { width: 100%; float: none; }
.checkout-onepage-index .col2-right-layout .col-main { width: 100%; padding: 25px; }
#checkout-step-login #login-form li label, #checkout-step-shipping label, #co-billing-form li label, #payment_form_ccsave label { width: 120px; }
.opc .step { padding: 15px; }
#co-billing-form .control { margin-left: 130px; }


/* Account page */
.account-login .registered-users ul label { width: 117px; }
.account-login .new-users .content { min-height: 223px; }
.customer-account .sidebar.col-left-first { float: none; width: auto; margin-bottom: 20px; }
.customer-account .col2-left-layout .col-main { width: auto; float: none; }

/* My account */
.customer-account .main, .customer-account-login .main { margin-top: 30px; }
.account-login .registered-users .content { padding: 20px 20px 0; }
	.account-login .registered-users ul li input { min-width: 200px; }
#login-form .buttons-set { padding: 0 20px 20px; }
.account-login .new-users .content { padding: 20px 20px 30px; }
.block-account li a { display: inline-block; }

.contacts-index-index iframe { width: 100% !important; }

#calculatorForm .col-main { margin-top: 0; } 

/* Footer */
.footer-ups .ups-list, .header-ups .ups-list { padding: 20px 25px; }
.footer-ups .ups-list li.ups-c, .header-ups .ups-list li.ups-c, .footer-ups .ups-list li, .header-ups .ups-list li { width: 33.33%; padding-right: 15px; }
	.footer-ups .ups-list li p, .header-ups .ups-list li p { font-size: 12px; }
	.footer-ups .ups-list li .icon, .header-ups .ups-list li .icon { width: 30px; }
		.footer-ups .ups-list li .icon img, .header-ups .ups-list li .icon img { width: 100%; }
.footer { padding: 15px 0 0; }
	.main-content { margin-bottom: 10px; padding: 0 20px; }
	.contact-list, .contact, .menu-producten .block-title, .menu-algemeen .block-title, .small-logo  { display: none; }
	.footer .main-content > div.menu-newsletter { width: auto; float: none; }
	.menu-algemeen { float: left; width: 30%; }
	.footer .newsletter-box { float: left; margin-top: 0; }
		.footer .contact h3, .footer .block-title strong { margin-bottom: 8px; }
		.footer .newsletter-box p { margin-bottom: 7px; }
	.footer .bottom p { font-size: 9px; }
	.footer #newsletter { border-color: #0e2240; }

.tablet-footer-contact { display: block; }

.footer .payment { margin-top: 20px; }

.nieuws:after, .image-text:after, .col-right.sidebar:after { display:block; content:"."; clear:both; font-size:0; line-height:0; height:0; overflow:hidden; }

}

@media (min-width: 990px) and (max-width: 1024px) { 
	/* Header */
	.main-menu-a li a { padding: 10px 15px; font-size: 14px; }
	.main-menu-b ul { margin-left: 10px; }
		.main-menu-b li a { padding: 0 15px; font-size: 13px; }
	.main-menu-a ul { margin-left: 10px; }

	/* Content */
	.products-tablet .products-grid li { width: 32.1%; }
	#newsletter-validate-detail-home:after, .header-newsletter #newsletter-validate-detail:after, .footer-newsletter #newsletter-validate-detail:after { right: -104px; }
	.categories-grid .slick-track { left: 0; }
}

@media (min-width: 768px) and (max-width: 989px) { 
	.account-create-right { width: 40%; }
}

@media (min-width: 320px) and (max-width: 767px) {

/* Header */
.page-header-top { border-bottom: 1px solid #c6c6c6; margin-bottom: 1px; }
.logo { display: block; margin: 10px 10px 0; width: 150px; }
	.logo img { width: 100%; }
.links-cart { display: none; }
.btn-menu { background: #0e2240; display: inline-block; float: right; width: 34px; height: 23px; color: #0e2240 ; font-size: 15px; line-height: 33px; margin: 0 0 0 1px; cursor: pointer; font-weight: bold; position: relative; }
	.btn-menu:after { content: ''; background: url(../images/icons-sprite.png) no-repeat 11px -640px; position: absolute; left: 0; width: 34px; top: 0; height: 23px; }
.btn-search { background: #0e2240; display: inline-block; float: right; margin-left: 1px; width: 34px; height: 23px; color: #0e2240 ; font-size: 15px; line-height: 23px; margin: 0 0 0 1px; cursor: pointer; font-weight: bold; position: relative; }
	.btn-search:after { content: ''; background: url(../images/icons-sprite.png) no-repeat -22px -664px; position: absolute; left: 0; width: 33px; top: 0; height: 23px; }
.page-header-top .btn-cart { background: #0e2240; display: inline-block; float: right; margin-left: 1px; width: 34px; height: 23px; color: #0e2240 ; font-size: 15px; line-height: 23px; margin: 0 0 0 1px; cursor: pointer; font-weight: bold; position: relative; }
	.page-header-top .btn-cart:after { content: ''; background: url(../images/icons-sprite.png) no-repeat 8px -664px; position: absolute; left: 0; width: 33px; top: 0; height: 23px; }
	.btn-cart a { background: #fff; border: 1px solid #0e2240; position: absolute; top: -5px; right: 0; color: #0e2240; font-size: 13px; border-radius: 21px; width: 19px; height: 19px; z-index: 100; text-align: center; line-height: 19px; }
.btn-info { background: #0e2240; display: none; float: right; margin-left: 1px; width: 34px; height: 23px; color: #0e2240 ; font-size: 15px; line-height: 23px; margin: 0 0 0 1px; cursor: pointer; font-weight: bold; position: relative; }
	.btn-info:after { content: ''; background: url(../images/icons-sprite.png) no-repeat -22px -640px; position: absolute; left: 0; width: 33px; top: 0; height: 23px; }
.btn-account { background: #0e2240; display: inline-block; float: right; margin-left: 1px; width: 34px; height: 23px; color: #0e2240 ; font-size: 15px; line-height: 23px; margin: 0 0 0 1px; cursor: pointer; font-weight: bold; position: relative; }
	.btn-account:after { content: ''; background: url(../images/icons-sprite.png) no-repeat 11px -688px; position: absolute; left: 0; width: 33px; top: 0; height: 23px; }
#header-nav { background: #efefef; display: none; width: 100%; position: absolute; left: 0; top: 85px; right: 0; margin: 0; }
	#header-nav ul { margin: 0; }
		#header-nav ul li ul { background: #fff; padding-left: 20px; }
.main-menu-a { background: none; border: 0; margin-left: 0; }
	#header-nav li { float: none; }
	#header-nav li a, #header-nav li a:hover, .links-cart .links > ul > li.wishlist > a, .links-cart .links > ul > li.wishlist > a:hover, ul.account-links li a, ul.account-links li a:hover { background: none; border: 0; border-bottom: 1px solid #fff; display: block; font-size: 12px; float: none; margin: 0; padding: 5px 20px; line-height: 20px; color: #101010; bottom: 0; position: relative; }
		ul.account-links li.log-out a:after { left: -4px; }
	#header-nav li.active a { background: #39629d; border: 0; border-bottom: 1px solid #fff; color: #fff; padding: 5px 20px; margin: 0; bottom: 0; }
	.main-menu-b li a:hover:after, .main-menu-b li.active a:after { display: none; }
	#header-nav ul li ul li a { border: 0; padding: 3px 15px; }
	#header-nav ul li ul li.active a { color: #39629d; }
	#header-nav ul li.parent a:after { content: ''; background: url(../images/icons-sprite.png) no-repeat -39px -685px; position: absolute; right: 3px; bottom: 3px; width: 9px; height: 9px; }
	#header-nav ul li.parent.active a { background: #1c1c1c; color: #fff; }
	#header-nav ul li.parent.active a:after { content: ''; background-position: -39px -711px; }
.main-menu-b, .cms-home .main-menu-b, .cms-home .main-menu-b, .cms-webwinkel .main-menu-b { background: none; position: relative; bottom: 0; }
.main-menu-b ul { margin-left: 0; }
	.links-cart .links > ul > li { width: 33.333%; }
		.links-cart .links > ul > li > a, .links-cart .links > ul > li > span { padding: 43px 9px 13px; }
	#header-nav .wraper-box { display: block; }
		#header-nav .wraper-box li a { background: #0e2240; color: #fff; }
		 #header-nav .wraper-box li.log-out { display: none; }

.links-cart { background: #efefef; display: none; float: none; padding: 0; width: 100%; position: absolute; left: 0; top: 75px; right: 0; margin: 0; }
	.links-cart .links > ul > li:hover ul.account-links, .links-cart .links > ul > li.active > span:after, .links-cart .links > ul > li > span, .links-cart .links > ul > li.cart, .links-cart .links > ul > li.wishlist > a:after { display: none; }
	ul.account-links, .links-cart .links > ul > li:hover ul.account-links { background: none; display: block; position: inherit; left: inherit; top: inherit; width: 100%; }
	.links-cart .links > ul > li { float: none; width: 100%; }
	.links-cart .links > ul > li.wishlist > a { text-align: left; position: relative; }
		.links-cart .links > ul > li.wishlist > a:after { content: ''; background: url("../images/icons-sprite.png") no-repeat scroll 4px -1194px; display: block; position: absolute; right: 20px; top: 5px; width: 20px; height: 20px; left: inherit; }


.nav-search { background: #efefef; display: none; position: absolute; top: 75px; bottom: inherit; left: 0; right: 0; width: 100%; box-sizing: border-box; padding: 25px 75px; }
	.nav-search .input-box { position: relative; }
	.nav-search #search { width: 100%; box-sizing: border-box; float: none; padding: 0 30px 0 10px; height: 29px; line-height: 29px; color: #848484; }
	.nav-search .search-button { position: absolute; right: 0; top: 0; }

/* Content */
.banner > .image { min-height: 470px; }
.banner .menu .mini-menubuilder-menu { margin: 2% auto; }
.banner .menu li img { display: none; }
	.banner .menu li { display: block; width: auto; }
		.banner .menu li a { display: block; width: auto; padding: 10px; height: auto; }
		.banner .menu li a > span { display: block; position: inherit; left: inherit; right: inherit; bottom: inherit; }
.banner .newsletter, .header-newsletter { background: #1B1C1D; padding: 0 10px; }
.banner .newsletter, .header-newsletter { position: inherit; left: inherit; bottom: inherit; right: inherit; }
.banner .newsletter .block-subscribe .block-title, .header-newsletter .block-subscribe .block-title, .footer-newsletter .block-subscribe .block-title { display: none; }
	#newsletter-validate-detail-home, .header-newsletter #newsletter-validate-detail, .footer-newsletter #newsletter-validate-detail { margin-top: 0; width: 72%; }
		#newsletter-validate-detail-home #newsletter, .header-newsletter #newsletter-validate-detail #newsletter, .footer-newsletter #newsletter-validate-detail #newsletter { padding-right: 110px; }
		#newsletter-validate-detail-home:after, .header-newsletter #newsletter-validate-detail:after, .footer-newsletter #newsletter-validate-detail:after { right: -90px; }
	.customer-account-login .header-newsletter {display: none;}

.row1, .row2 { margin: 0 20px 20px; }
.cms-index-index .row1, .cms-index-index .row2, .banner div.image, .banner .newsletter { display: none; }
	.image-text { float: none; width: 100%; height: auto !important; }
	.image-text .content { padding: 30px 20px; }
	.row2 .slider { float: none; width: 100%; height: auto !important; margin-bottom: 20px; }
	.slider .slick-slide img { width: 100%; height: auto; }
	.products-slider .item-box .image { max-width: 100px; margin-right: 20px; }
	.row2 .product1, .row2 .product2, .bottom-products .products-info, .special-product, .products-grid li { width: 100%; max-width: 300px; margin: 0 auto 10px; float: none; min-height: 313px; }
	.products-slider .item-box .image .button { bottom: 55px; }
	.products-slider .item-box .content .button { left: 20px; margin-left: 0; }
	.products-slider .item-box { padding-bottom: 80px; }

.products-tablet { display: block; margin: 20px 20px 0;display:none; }

/* Mobile menu homepage */
.mobile-menu { display: block; }
	.mobile-menu li { /*border-top: 1px solid #c7c7c7; border-bottom: 1px solid #c7c7c7;*/ margin-bottom: -20px; }
		.mobile-menu li a { display: block; position: relative; text-align: center; }
			.mobile-menu li img { width: 100%; }
			.mobile-menu li a > span { background: #1c1c1c; border: 1px solid #515049; display: inline-block; position: relative; top: -45px;  color: #fefeff; font-size: 12px; text-transform: uppercase; line-height: 29px; height: 29px; padding: 0 20px 0 45px; }
				.mobile-menu li span img { display: block; width: inherit; height: auto; position: absolute; left: 18px; top: 7px; }
				.mobile-menu li a:hover > span { background: #39629d; }

/* Mobile menu webwinkel */
.cms-webwinkel .mobile-menu { max-width: 213px; margin: 20px auto; }
.cms-webwinkel .mobile-menu li { margin-bottom: 8px; }
	.cms-webwinkel .mobile-menu li a { background: #efefef; border: 1px solid #0e2240; display: block; height: 36px; padding: 0 10px 0 65px; position: relative; text-transform: uppercase; color: #18233e; font-size: 12px; line-height: 36px; text-align: left;  }
		.cms-webwinkel .mobile-menu li a > img { position: absolute; left: 25px; top: 8px; width: auto; height: auto; margin: 0; }
		.cms-webwinkel .mobile-menu li:last-child a > img { top: 13px; left: 21px; }
		.cms-webwinkel .mobile-menu li:nth-child(3) a > img { left: 18px; }
		.cms-webwinkel .mobile-menu li a > span { background: none; border: 0; display: inline; position: inherit; top: inherit;  color: #18233e; font-size: 12px; text-transform: uppercase; line-height: inherit; height: inherit; padding: 0; }
			.cms-webwinkel .mobile-menu li span img { display: none; }

/* Cms pages */
.col2-right-layout .col-main, #calculatorForm .col-main { float: none; width: auto; padding: 0; box-shadow: none; }
.col-right.sidebar { float: none; width: auto; margin-top: 20px; }
.sidebar .cms-block { padding: 30px 10px; margin: 0; }
.sidebar .cms-block.cms-contact { padding-bottom: 0; }
.cms-icon, .breadcrumbs, .header-newsletter, .sidebar .cms-block.cms-contact { display: none; }
.cms-page-view .page-title h1 { font-size: 14px; margin-bottom: 30px; }
.cms-page-view h5 { font-size: 14px; padding: 15px 20px; margin: 0 -20px 30px; text-align: left; }
.cms-page-view .col-main p { line-height: 18px; margin-bottom: 30px; }
.cms-page-view .col-main img { display: block; float: none !important; margin: 20px 0 30px; width: 100%; max-width: 300px; }
.sidebar .cms-block { padding: 30px 0; }
.cms-page-link:after, .cms-page-link:before { left: -20px; right: -20px; }
	.cms-page-view .cms-page-link p a { display: inline-block; }
.col-right.sidebar { margin-top: 0; }
.sidebar .cms-usp-block, .cms-usp-block { border-top: 1px solid #b0b0b0; padding: 13px 30px; position: relative; }
	.sidebar .cms-usp-block ul, .cms-usp-block ul { margin: 0 auto; max-width: 230px; }
.cms-usp-block:before { content: ''; background: #b0b0b0; position: absolute; left: -20px; right: -20px; top: -1px; width: 3000px; height: 1px; }
/*.cms-usp-block:after { content: ''; background: #b0b0b0; position: absolute; left: -20px; right: -20px; bottom: -1px; width: 3000px; height: 1px; }*/
	.cms-webwinkel .row1 .usp li, .cms-usp-block li { background: url(../images/ico-check.png) no-repeat 0 5px; font-size: 12px; padding:5px 0 1px 40px; margin-bottom: 0; }

/* Usp list */
.footer-ups .ups-list, .header-ups .ups-list { padding: 0; }
	.footer-ups .ups-list li, .header-ups .ups-list li { float: none; width: auto; margin-bottom: 8px; padding-right: 0; }

/* Second home page */
.cms-webwinkel .banner > .image { min-height: 265px; }
.cms-webwinkel .row1 .usp, .cms-webwinkel .image-text { width: 100%; float: none; height: auto !important; margin-bottom: 20px; }
.cms-webwinkel .row1 .usp li { padding: 8px 0 4px 40px; }
	.cms-page-view.cms-webwinkel .col-main .usp p { font-size: 14px; }
.row2 .slider, .cms-webwinkel .row2 .slider { float: none; width: auto; }
.share-email .title { margin: 0 5px; padding: 0 5px; }
.share-email .social { padding: 0; margin-right: 10px; }
.bottom-products { margin: 0 10px; }
.cms-webwinkel .products-slider .item-box .content { float: inherit; width: inherit; }
.bottom-products > div { float: none; width: auto; max-width: 300px; margin: 0 auto 20px; }
.bottom-products > .product1, .bottom-products > .product2, .bottom-products > .product3, .bottom-products > .product4, .cms-webwinkel .row1, .cms-webwinkel .row2, .share-email, .footer-newsletter { display: none; }

/* Category list */
.category-main-menu { margin: 25px 0; }
#category-main-menu .menubuilder-menu { padding: 20px 10px; }
#category-main-menu ul.nav-link-list > li, .first-menu-column { float: none; width: auto; margin-bottom: 20px; padding: 0; }
.menu-link { background-position: 10px -832px; padding-left: 38px; width: 260px; }
	.menu-link:hover { background-position: 10px -866px; }
.breadcrumbs { margin: 20px 0; }
.image-description { float: none; width: auto; margin-bottom: 20px; height: auto !important; }
.image-description .category-description { padding: 0; }
.categories-grid { margin: 20px 5px 20px 20px; }
.category-overview-list .slick-next { right: -13px; }
.category-overview-list li { padding-bottom: 0; }
.menu-link { background-position: 0px -832px; width: 100%; padding-left: 30px; border-radius: 0; }
	.menu-link:hover { background-position: 0 -866px; }
	.menu-link:after { right: 30px; }
	.bg-menu-category { right: -3000px; }
.overview-link, .overview-top .image-description .category-image, .special-product, .block-viewed li .hover, .category-image-hover, .category-overview-list li:hover .category-image-hover { display: none; }
.category-overview-list li:hover .category-image .category-name { opacity: 1; }
.category-overview-list .category-name { top: 87%; }
.image-description { box-shadow: none; margin: 0; min-height: inherit; }
	.image-description .category-description .newsletter-button { position: inherit; bottom: inherit; right: inherit; }

.catalog-category-view .col-main table { text-align: center; }
.catalog-category-view .col-main table td { display: inline-block; }

.products-grid { margin-left: 0; }
.products-grid .product-info { min-height: initial !important; }

.block-viewed ol { margin-left: 0; }
	.block-viewed li { float: none; width: auto; margin: 0 auto 10px; max-width: 300px; }

.category-image { position: inherit; }

.pagination, .product-position { font-size: 10px; color: #101010; }
.toolbar-top .page-title { margin-bottom: 10px; float: none; }

.category-overview-list .slick-initialized .slick-slide { height: auto !important; }
	
/* Detail page */
.catalog-product-view .mobile-header-ups { margin-bottom: 20px; }
.catalog-product-view .main-container, .cms-page-view .main-container { margin: 0 20px; }
.cms-webwinkel .main-container { margin: inherit; }
.product-img-box, .product-shop { border-bottom: 1px solid #e4e4e4; float: none; width: 100%; margin-bottom: 20px; padding-top: 0; }
.more-views { border-bottom: 1px solid #e4e4e4; }
.product-shop { border: 0; margin-bottom: 0; }
	.product-image-thumbs li { width: 29%; }
	.product-shop-price .price-info { float: none; min-width: inherit; margin: 0 0 20px; }
	#product-options-wrapper { float: none; max-width: inherit; }
	.add-to-cart-wrapper { text-align: center; }
	.add-to-cart-wrapper .add-to-box { float: left; margin: 0; width: 83%; }
		.add-to-cart-wrapper .btn-cart { display: inline-block; width: 100%; }
		.add-to-cart-wrapper .add-to-links { display: inline-block; float: right; margin: 0; }
	.block-related { padding-top: 20px; }
	.block-related ol { margin-left: 0; }
	#block-related li { width: 100%; max-width: 300px; margin: 0 auto 10px; padding-bottom: 0; }
	#block-related li .hover { display: none; }
	#block-related li .product { border: 0; }
	.block-related .product-info { display: block; }
		.products-grid .product-name { font-size: 13px; color: #101010; text-align: left; }
		.block-related .product-info .actions { display: none; }
		.block-related .product-info .price-box { float: right; margin-top: 0; }
	.product-shop-price { text-align: center; margin-bottom: 20px; }
		.qty-wrapper { float: none; display: inline-block; float: left; }
		#qty { width: 50px; }
.return-to-category { display: none; }
.product-toolbar { margin-bottom: 5px; }
.catalog-product-view .category-menu-wrap { margin: -20px 0 0; }
.catalog-product-view .category-main-menu { margin: 0; }
.catalog-product-view .menu-link { background: url(../images/icons-sprite.png) no-repeat 13px -866px #fff; left: -15px !important; }
.catalog-product-view .active .menu-link { border-left: 1px solid #0e2240; }

.product-shop .link-wishlist { background: url("../images/icons-sprite.png") no-repeat scroll 12px -1182px #efefef; border: 1px solid #efefef; width: 42px; height: 42px; overflow: hidden; text-indent: -9999px; padding: 0; }

.overview-top { margin-bottom: 0; }
.image-description .category-description p { line-height: 18px; }
.more-link, .less-link { color: #39629d; font-size: 11px; line-height: 18px; margin-left: 5px; }
.overview-top .less-link { display: block; margin: 0 0 20px; }

#product_addtocart_form { margin-bottom: 0; }

/* Cart page */
.checkout-cart-index .page-title, .customer-account-login .page-title { margin-top: 20px; }
#shopping-cart-table.data-table thead th, .product-cart-price { display: none !important; }
#shopping-cart-table.data-table td { display: block; width: inherit; text-align: center; }
#shopping-cart-table button.button, .product-cart-remove .btn-remove { display: inline-block; float: none; }
.cart-forms { float: none; width: auto; margin-bottom: 20px; }
.cart-totals-wrapper { float: none; width: auto; }
	#discount-coupon-form .field-wrapper { position: relative; }
	#discount-coupon-form input { width: 100%; box-sizing: border-box; padding-right: 100px; float: none; }
	#discount-coupon-form .button-wrapper { position: absolute; right: 0; top: 0; }
		.discount-form button, .discount-form button:hover { border-left: 1px solid #0070ba; }

button.btn-proceed-checkout { float: none; max-width: 300px; margin: 0 auto; }
.cart .crosssell { box-shadow: none; padding: 0; }
	.cart .crosssell li.item { margin: 0 auto 20px; max-width: 300px; }
		
/* Checkout page */
.checkout-onepage-index .page-title { margin-top: 20px; }
#checkoutSteps { width: 100%; float: none; }
	.opc .step { padding: 15px; }
	#checkout-step-login .col-1 { float: none; width: auto; margin-bottom: 20px; }
	#checkout-step-login .col-2 { float: none; width: auto; }
	#checkout-step-login .buttons-set { position: relative; left: 0; right: 0; bottom: 0; }
	#login-form .input-box { float: none; }
	#checkout-step-login #login-form li label, #checkout-step-shipping label, #co-billing-form li label, #payment_form_ccsave label { float: none; width: auto; }
	#co-billing-form .form-list li input[type="text"], #co-shipping-form .form-list li input[type="text"], #co-shipping-form .form-list li input[type="password"], #co-billing-form .form-list li input[type="password"], #co-billing-form .form-list li input[type="tel"], #co-billing-form .form-list li input[type="email"], #co-shipping-form .form-list li input[type="tel"], #co-billing-form .input-box, #checkout-step-shipping .input-box, #payment_form_ccsave .input-box, .input-file { width: 100%; min-width: inherit; float: none; }
	#co-billing-form select, #checkout-step-shipping select, #payment_form_ccsave select, #co-billing-form .customSelectInner, #checkout-step-shipping .customSelectInner { width: 100% !important; }
	#co-billing-form .control { margin-left: 0; }
	#checkout-review-table colgroup, #checkout-review-table th { display: none; }
	#checkout-review-table td { min-width: inherit; }
	.agreement-content { width: 100%; height: 200px; }
	#checkout-progress-wrapper .block-progress .block-title { margin: 20px 20px 5px; }
	.checkout-onepage-success .page-title { margin-top: 20px; }
	.opc .step-title h2 { float: none; text-align: left; font-size: 14px; }
	.tool-tip-content img { width: 100%; margin-bottom: 20px; }
	#checkout-payment-method-load input { margin-bottom: 10px; }
	#checkout-review-table.data-table td { padding-top: 7px 5px; }

 #checkout-review-load { padding-bottom: 45px; }
 		#checkout-review-load > .buttons-set h1 { font-size: 18px; }
	
/* My account */
.account-create #form-validate, .customer-account-forgotpassword #form-validate, .customer-account .main-container .my-account, .account-create-wrapper { border: 0; padding: 0; }
.main-container { margin: 0 20px; }
.cms-home .main-container { margin: 0; }
.account-login #login-form { border: 0; padding: 0; }
.account-login .new-users .content, .account-login .registered-users .content { padding: 0; }
#form-validate .form-list label { float: none; max-width: inherit; min-width: inherit; margin-bottom: 5px; line-height: 24px !important }
#form-validate .form-list .control label { line-height: 22px !important; max-width: inherit; }
.page-title h1 { font-size: 26px; }
.account-login .new-users .content, .account-login .registered-users .content { padding: 0 0 20px; min-height: inherit; }
#login-form .new-users .buttons-set, #login-form .buttons-set { bottom: 0; padding: 0; }
#login-form .buttons-set { padding-bottom: 20px; }
.account-login .new-users { margin-bottom: 20px; }
#login-form .registered-users .buttons-set button { width: 100%; float: none; }
.account-login .registered-users, .account-login .new-users { border: 0; float: none; width: 100%; }
.account-login #login-form .registered-users > .required { padding: 0 20p; }
.account-login .registered-users ul label, #calculatorForm .form-list .input-box { float: none; width: auto; }
.account-login .registered-users ul li input, #calculatorForm .form-list .input-box .input-text { float: none; width: 100%; min-width: inherit; }
select, .customSelectInner { width: 100%  !important; }
.customSelect { margin-bottom: 15px; }
.account-create input[type="file"] { min-width: 100%; }
#form-validate .form-list .control .input-box { float: left; }
.block-account .block-content { margin-top: 20px; }

.customer-account .sidebar.col-left-first { float: none; width: 100%; margin-bottom: 20px; }
.customer-account .col2-left-layout .col-main { float: none; width: 100%; }
.customer-account .col-left .block-title { margin: 0; cursor: pointer; }
#form-validate .form-list .input-box .input-text { min-width: inherit; width: 100%; }
#form-validate .form-list .input-box { float: none; }
.customer-account .customSelect, .customer-account .customSelectInner { width: 100% !important; box-sizing: border-box; }
.block-account ul { margin-left: 0; }

.account-create-wrapper { margin-top: 20px; }
.account-create-left { float: none; width: 100%; margin-bottom: 20px; }
.account-create-right { float: none; width: 100%; }
.account-create .buttons-set .button { position: initial; right: initial; bottom: initial; }

#wishlist-table th { display: none; }
#wishlist-table td { display: block; text-align: center; }
	#wishlist-table td button { display: inline-block; }
	#wishlist-table .price-box .regular-price { float: none; }
	.my-wishlist .buttons-set2 button { font-size: 12px; }

/* Cms page */
.cms-page-view .col2-right-layout .col-main { margin-top: 30px; }
.col-main .std table { display: block; margin-top: -20px; }
.cms-icon:hover { left: -150px; }
.cms-icon.active { left: 0; }
.col-main .std table tr:first-child td, .col-main .std table tr td { padding: 10px 5px; }
.cms-contact p span, .cms-page-view .col-main p { line-height: 18px; }
.note-msg { margin-top: 30px; }

/* Contact page */
.contacts-index-index iframe { width: 100% !important; }
.contactform .left, .contactform .right { float: none; width: 100%; }
textarea, .contactform .left input { min-width: inherit; width: 100%; }

/* Footer */
.newsletter-box { display: none; }
.mobile-newsleter { display: block; }
.ups-list li .content { height: auto; }
.go-top { background: #1c1c1c; border-top: 1px solid #404040; border-bottom: 1px solid #404040; display: block; color: #9b9b9b; font-size: 11px; text-align: center; text-transform: uppercase; height: 27px; line-height: 27px; cursor: pointer; }
.header-ups { display: none; }
.mobile-header-ups { background: #efefef; display: block; padding: 10px 25px 5px; margin-top: 0; }
.ups-list { padding: 0; }
.footer-ups .ups-list li, .header-ups .ups-list li, .footer-ups .ups-list li.ups-b, .header-ups .ups-list li.ups-b, .footer-ups .ups-list li.ups-c, .header-ups .ups-list li.ups-c, .ups-list li, .ups-list li.ups-c, .ups-list li.ups-b { padding: 0 0 0 30px; clear: both; float: none; width: 100%; margin-bottom: 5px; }
	.footer-ups .ups-list li p, .header-ups .ups-list li p, .ups-list li p { font-size: 11px; color: #313131; text-transform: uppercase; }
.tablet-footer-contact { display: block; margin: 35px 0; }
.footer-ups, .footer .block-title { display: none; }
.ups-list li .icon, .footer-ups .ups-list li .icon, .header-ups .ups-list li .icon, .footer-ups .ups-list li:first-child .icon, .header-ups .ups-list li:first-child .icon { display: inline-block; width: 20px; line-height: inherit; min-width: inherit; text-align: center; overflow: hidden; margin: 0px 18px 0 0; }
	.ups-list li .icon img { width: 100%; }
.banner .newsletter .block-subscribe, .header-newsletter .block-subscribe, .footer-newsletter .block-subscribe { padding: 10px 0; }
.footer-newsletter { padding: 0 10px; margin: 40px 0 0; }
.footer { padding: 20px 20px 0; }
	.footer .main-content > div { float: none; width: auto; margin-bottom: 20px; }
	.footer .main-content > div.menu-producten { float: left; width: 50%; }
	.footer .newsletter-box { clear: both; }
	.footer .bottom .small-logo { display: none; background-position: center center; float: none; width: auto; text-align: center; margin: 10px 0 20px; }
.footer .main-content > div.contact-list, .footer .newsletter-box, .footer .main-content > div.contact { display: none; }
.footer .bottom address { text-align: left; }
.footer .main-content > div.menu-newsletter { float: left; width: 47%; }
.newsletter-box { background: #0e2240; padding: 25px 22px 15px; position: relative; }
	.newsletter-box:after { content: ''; background: url(../images/bg-newsletter-discount.png) no-repeat; position: absolute; right: 0; top: 0; width: 83px; height: 47px; }	
	.newsletter-box .block-title strong { text-transform: uppercase; font-size: 12px; line-height: 18px; color: #fff; }
	.newsletter-box p { font-size: 11px; line-height: 18px; color: #fff; margin-bottom: 8px; }
	.form-subscribe-header { display: none; }
	.newsletter-box .block-content { position: relative; }
	#newsletter { color: #101010; font-size: 11px; font-style: italic; width: 100%; padding-right: 113px; }
	.newsletter-box .actions { position: absolute; right: 0; top: 0; }
		.newsletter-box .actions button { background: #c6c6c6; border: 0; font-size: 12px; color: #101010; height: 26px; line-height: 26px; }
			.newsletter-box .actions button:hover { background: #c6c6c6; border: 0; }
	.payment { padding: 5px 10px; text-align: center; }
		.payment img { display: inline; }

}

@media (min-width: 320px) and (max-width: 480px) {
	#block-related li .hover .product-image { margin-top: 97px; }
}

/* Retina ready images */

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
 only screen and (-o-min-device-pixel-ratio: 3/2),
 only screen and (min--moz-device-pixel-ratio: 1.5),
     only screen and (min-device-pixel-ratio: 1.5) {
	 .links-cart .links > ul > li > a:after, .links-cart .links > ul > li > span:after, .links-cart .links > ul > li:hover > span:after, .links-cart .links > ul > li.active > span:after, .search-button > span, .banner .newsletter .block-subscribe .block-title, .header-newsletter .block-subscribe .block-title, .footer-newsletter .block-subscribe .block-title, .image-text .content div.button .button > span:after, .slick-next, .slick-prev, .products-slider .item-box .image .button > span:after, .products-slider .item-box .content .button > span:after, .footer .facebook a, .cms-contact a.facebook, .cms-page-view .cms-page-link p a, .share-email .facebook, .share-email .email, .menu-link:after, .menu-link, .special-product .links a.button:after, .special-product .links button.button > span.ico-add, .products-grid .link-wishlist, .add-to-cart-wrapper .btn-cart, .sharing-links .link-facebook, .sharing-links .link-email-friend, .link-wishlist, .product-image-box .ico-zoom, .pages .previous, .product-toolbar .product-prev, .pages .next, .product-toolbar .product-next, .tablet-footer-contact .phone, .tablet-footer-contact .facebook a, .tablet-footer-contact .email a, .btn-menu:after, .page-header-top .btn-cart:after, .btn-search:after, .btn-account:after, .catalog-product-view .menu-link, .add-to-cart-wrapper .btn-cart, .product-shop .link-wishlist  { background-image: url(../images/icons-sprite@2x.png); background-repeat: no-repeat; -moz-background-size: 50px 1600px; -ie-background-size: 50px 1600px; -o-background-size: 50px 1600px; -webkit-background-size: 50px 1600px; background-size: 50px 1600px; }
	 .tablet-footer-contact .phone { margin-top: 2px; }
}

@media (max-width:767px){
.mobile-header-nieuws { background: #ffffff; display: block; padding: 10px 25px 5px; margin-top: 0; }
.header-vacature-voorpagina{ display:none; }
}

.grecaptcha-badge {
    display: none;
}
.contactform .right > div {
	margin-bottom: 15px;
	font-size: 15px;
}
.cms-contact p span {
	line-height: 17px;
}
.cms-page-view .col-main p {
	line-height: 24px;
	margin-bottom: 17px;
}
.main-container.col1-layout .col-main{
	padding: 0px !important;
}
.tier-prices {
    display: none;
}
address {
    font-style: normal;
    line-height: 1.35;
    font-size: 16px;
}

.block-progress dd.complete {
    font-size: 16px;
}
/* Globale box-sizing zodat padding en borders binnen de breedte vallen */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Container voor de twee boxen (.row1) exact 1190px breed, zonder extra padding */
.row1 {
  display: flex;
  max-width: 1190px;
  margin: 35px auto;
  padding: 0;
}

/* Algemene styling voor de boxen, inline stijlen overschrijven */
.row1 > .header-vacature-voorpagina {
  float: none !important;
  width: auto !important; /* Wordt later overschreven per box */
  bottom: 0 !important;
  left: auto !important;
  right: auto !important;
  margin-top: 0px;
  background: linear-gradient(to bottom, #ffffff, #f2f2f2);
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  padding: 20px;
}

.row1 > a .gouden-sieraden-handboek {
  float: none !important;
  width: auto !important; /* Wordt later overschreven per box */
  bottom: 0 !important;
  left: auto !important;
  right: auto !important;
  margin-top: 0px;
  background: linear-gradient(to bottom, #ffffff, #f2f2f2);
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  padding: 0px;
}

/* Eerste (linker) box: uitlijnen op de linkerzijde, zonder container-padding */
.row1 > .header-vacature-voorpagina {
  width: calc(60% - 10px);
  margin-right: 20px; /* ruimte tussen de twee boxen */
}

/* Tweede (rechter) box */
.row1 > .gouden-sieraden-handboek {
  width: calc(40% - 10px);
}

.row1 > div:first-child {
  margin-top: 0px;
}

/* Hover-effect voor beide boxen - disabled */
.gouden-sieraden-handboek:hover {
  transform: none;
}

/* Newsletter styling: geen padding en top margin van 85px */
.newsletter {
  max-width: 1190px;
  margin: 85px auto 0; /* 85px bovenruimte, gecentreerd */
  position: relative !important;
  padding: 0;
}

.row2 {
  display: flex; 
  max-width: 1190px;
  margin: 20px auto;
  padding: 0;
}

/* Verwijder eventueel inline vaste hoogtes */
.row2 > div {
  height: auto !important;
  margin-top: 0 !important;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  padding: 0px;
  position: relative;
}

/* Hover-effect - disabled */
.row2 > div:hover {
  transform: none;
}

/* Wat tussenruimte tussen de kolommen via margin-right
   (hier alleen tussen de eerste en tweede, en tweede en derde item) */
.row2 > div:not(:last-child) {
  margin-right: 20px;
}

.slider {
  width: calc(50% - 0px);
}
.product1 {
  width: calc(25% - 0px);	
}
.product2 {
  width: calc(25% - 0px);
}

.voorpagina-afbeelding{
    border-radius: 0 0 8px 8px;
    height: 285px;
}
.banner .newsletter .block-subscribe, .header-newsletter .block-subscribe, .footer-newsletter .block-subscribe {
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
.links-cart {
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
.nav-search {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
	border-radius: 0 0 8px 8px;
}
#search_mini_form .es-input-box button {
    width: 28px;
    height: 28px;
    right: 10px;
}#search_mini_form .es-input-box {
    border-radius: 8px;
}
.products-slider .item-box .content .button {
    border-radius: 8px;
}
.banner {
    margin-bottom: -20px;
}
.gouden-sieraden-handboek p {
    margin-bottom: 0px;
}
.image-text .content div.button .button {
    border-radius: 8px;
    margin: 20px;
}
.main-menu-b span.level0 {
    font-weight: bold !important;
}
.desc.std p {
    font-size: 16px;
}

@media (min-width: 320px) and (max-width: 767px) {
     ul.nav-horizontal {
        margin-left: 15px;
        margin-right: 15px;
    }
    img.image.level0 {
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, .15);
		max-height: 190px;
    }
    .mobile-menu li {
        margin-bottom: -10px;
    }
   .voorpaginainfo {
        background: linear-gradient(to bottom, #fff, #f2f2f2);
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, .15);
        margin-left: 15px !important;
        margin-right: 15px !important;
        padding-top: 20px !important;
    }
    .mobile-header-ups {
        display: block;
        padding: 10px 25px 5px;
        margin-top: 0;
        box-shadow: 0 4px 8px rgba(0, 0, 0, .15);
        background: linear-gradient(to bottom, #fff, #f2f2f2);
    }
    .newsletter-box.mobile-newsleter {
        background: #0e2240;
        padding: 25px 22px 15px;
        position: relative;
        border-radius: 8px;
        margin-left: 15px;
        margin-right: 15px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, .15);
    }
    .newsletter-box.mobile-newsleter:after {
        border-radius: 0 8px 0 0px;
    }
    .mobile-menu li span img {
        border-radius: 0px;
    }
    img.image-hover {
      border-radius: 0px !important;
      border: 0px !important;
	  visibility: hidden;
    }
    li.level0 span {
      border-radius: 8px;
    }
    .mobile-menu li a>span {
        background: #39629d;
        border: none;
        display: inline-block;
        position: relative;
        top: -190px;
        color: #fefeff;
        font-size: 16px;
        text-transform: uppercase;
        line-height: 33px;
        height: 33px;
        padding: 0 0 0 0;
        width: 100%;
        font-weight: bold !important;
        opacity: 0.85;
        border-radius: 8px 8px 0 0;
    }
}
.description .std {
    font-size: 14px;
}


/* ============================================================
   Drijfhout OpenMage migration - listing & dropdown polish
   ============================================================ */

/* ---- Product listing: modern card layout ---- */
.products-grid .item {
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    background: #ffffff;
    transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 14px 0 0 0 !important;
}
.products-grid li.item {
    height: 100%;
}.products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    padding: 0;
    list-style: none;
}.products-grid li.item.first,.products-grid li.item.last {
    margin: 0 !important;
    width: auto !important;
    float: none !important;
}
.products-grid .item:hover {
    border-color: #c9a227;
    box-shadow: 0 8px 24px rgba(12, 30, 64, 0.08);
}
.products-grid .item .image {
    padding: 24px 20px 16px !important;
    margin: 0 !important;
    background: #ffffff !important;
    text-align: center !important;
    border-bottom: 1px solid #f0f0f0;
    box-sizing: border-box;
    width: 100%;
}
.products-grid .item .image a {
    display: block;
    text-align: center;
    margin: 0;
    padding: 0;
}
.products-grid .item .image img {
    max-height: 200px;
    width: auto;
    max-width: 100%;
    display: inline-block;
    margin: 0 auto;
}
.products-grid .product-info {
    padding: 18px 20px 0 !important;
    text-align: left !important;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: auto !important;
    margin: 0 !important;
    box-sizing: border-box;
    width: 100%;
}
.products-grid .product-info .product-name,
.products-grid .product-info .product-name a {
    text-align: left;
    font-size: 14px;
    line-height: 1.35;
    font-weight: 600;
    color: #0e2240;
    margin: 0 0 12px 0;
    min-height: 38px;
    text-transform: none;
    letter-spacing: 0.1px;
}
.products-grid .product-info .product-name a:hover {
    color: #c9a227;
    text-decoration: none;
}

/* ---- Price block on cards (right-aligned) ---- */
.products-grid .product-info .price-box {
    margin: 0 0 6px 0 !important;
    padding: 0;
    text-align: right !important;
    float: none;
    width: auto;
}
.products-grid .product-info .price-box .regular-price,
.products-grid .product-info .price-box .special-price {
    display: block;
    text-align: right !important;
    float: none;
}
.products-grid .product-info .price-box .regular-price .price,
.products-grid .product-info .price-box .special-price .price {
    font-size: 22px;
    font-weight: 700;
    color: #0e2240;
    line-height: 1.2;
    text-align: right !important;
    display: inline-block;
}
.products-grid .price-box .price-hidden {
    font-size: 16px;
    font-weight: 500;
    color: #7a7a7a;
    font-style: italic;
}
.products-grid .product-info .price-vanaf-wrap {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 6px;
    margin: 0 0 6px 0;
}
.products-grid .product-info .price-vanaf-wrap .price-box {
    margin: 0 !important;
    display: inline-block;
    width: auto;
}
.products-grid .product-info .price-vanaf-wrap .price-from-label {
    font-size: 13px;
    color: #7a7a7a;
    font-weight: 500;
    flex-shrink: 0;
}
.products-grid .price-note {
    font-size: 11px;
    color: #8a8a8a;
    margin: 0 0 14px 0;
    text-align: right;
    letter-spacing: 0.2px;
}

/* ---- Actions / details button (override old sprite-icon button) ---- */
.products-grid .product-info .actions {
    position: static !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    border-top: none !important;
    margin: auto -20px 0 -20px !important;
    padding: 14px 0 0 0 !important;
    background: none;
    border: none;
    display: block;
    overflow: visible;
    float: none;
}
.products-grid .actions a.buttondetails,
.products-grid .product-info .actions .buttondetails {
    display: block !important;
    background: #0e2240 !important;
    color: #ffffff !important;
    text-align: center !important;
    padding: 14px 16px !important;
    border-radius: 0 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    transition: background 0.2s ease;
    width: 100% !important;
    box-sizing: border-box !important;
    line-height: 1.4 !important;
    height: auto !important;
    float: none !important;
    overflow: visible !important;
    position: relative !important;
}
.products-grid .actions a.buttondetails:after,
.products-grid .product-info .actions .buttondetails:after {
    content: none !important;
    display: none !important;
}
.products-grid .actions a.buttondetails:hover,
.products-grid .product-info .actions .buttondetails:hover {
    background: #c9a227 !important;
    color: #ffffff !important;
}
.products-grid .product-info .add-to-links {
    display: none !important;
}

/* ---- OP = OP badge z-index ---- */
.products-grid .item .sticker-wrapper {
    z-index: 2;
}

/* ---- Account dropdown: fix hover gap + modern styling ---- */
.links-cart .links > ul > li.account {
    position: relative;
}
.links-cart .links > ul > li.account > span.account-links {
    cursor: pointer;
    padding-bottom: 8px;
}
.links-cart .links > ul > li.account ul.account-links {
    background: #ffffff !important;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(12, 30, 64, 0.12);
    padding: 6px 0;
    min-width: 220px;
    z-index: 1000;
    top: 100% !important;
    left: 50% !important;
    transform: translateX(-50%);
    margin-top: 0;
}
.links-cart .links > ul > li.account ul.account-links:before {
    content: '';
    position: absolute;
    top: -12px;
    left: 0;
    right: 0;
    height: 12px;
}
.links-cart .links > ul > li.account ul.account-links li {
    border-bottom: 1px solid #f2f2f2;
}
.links-cart .links > ul > li.account ul.account-links li:last-child {
    border-bottom: none;
}
.links-cart .links > ul > li.account ul.account-links li a {
    display: block;
    padding: 11px 22px;
    color: #0e2240;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}
.links-cart .links > ul > li.account ul.account-links li a:hover {
    background: #faf6e8;
    color: #0e2240;
}
.links-cart .links > ul > li.account ul.account-links li.log-out a {
    padding-left: 46px;
    position: relative;
}
.links-cart .links > ul > li.account ul.account-links li.log-out a:after {
    left: 22px;
    top: 50%;
    margin-top: -10px;
}

/* ---- Modern promo/sale/op-op badge (replaces old sprite) ---- */
.products-grid .item .promo {
    background: none !important;
    background-image: none !important;
    width: auto !important;
    height: auto !important;
    padding: 6px 14px !important;
    top: 12px !important;
    left: 12px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    line-height: 1 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
    transform: none !important;
    z-index: 5 !important;
}
.products-grid .item .promo span {
    background: none !important;
    color: inherit !important;
    font-size: inherit !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: inherit !important;
    text-transform: inherit !important;
    display: inline !important;
    transform: none !important;
}
.products-grid .item .promo.eol {
    background: #6e7480 !important;
}
.products-grid .item .promo.sale {
    background: #c2362e !important;
}
.products-grid .item .promo.new {
    background: #c9a227 !important;
}

/* ============================================================
   Drijfhout - widen layout & modernize alignment
   ============================================================ */
/* Wider main container for modern wide screens */
@media (min-width: 1400px) {
    .main-container,
    .page-header-top,
    .header-primary-container,
    .header,
    .footer-container .footer,
    .nav-container .nav,
    .breadcrumbs,
    .page-header-container {
        max-width: 1400px !important;
    }
}

/* Remove negative margin on products-grid so it aligns with the container */
.products-grid {
    margin-left: 0 !important;
    padding-left: 0 !important;
}
.products-tablet .products-grid {
    margin-left: 0 !important;
}

/* Use a clean grid for product listing instead of legacy floats */
.products-grid.products-grid--max-4-col {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
    list-style: none !important;
}
.products-grid.products-grid--max-4-col li.item {
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    height: 100%;
}
.products-grid.products-grid--max-4-col li.item.first,
.products-grid.products-grid--max-4-col li.item.last {
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    float: none !important;
}
@media (max-width: 1100px) {
    .products-grid.products-grid--max-4-col {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}
@media (max-width: 768px) {
    .products-grid.products-grid--max-4-col {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
@media (max-width: 480px) {
    .products-grid.products-grid--max-4-col {
        grid-template-columns: 1fr !important;
    }
}

/* Override .main width too (was 1190) */
@media (min-width: 1400px) {
    .main {
        max-width: 1400px !important;
    }
}

/* ============================================================
   Drijfhout - modern design polish
   ============================================================ */

/* Page background with subtle warmth */
body {
    background: #f7f7f5;
}
.main-container {
    background: transparent;
}

/* Header polish */
.page-header,
.header-container {
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(12, 30, 64, 0.04);
}
.page-header-top {
    padding-top: 18px;
    padding-bottom: 8px;
}

/* Top navigation cleanup */
#header-nav,
.nav-primary,
.header .nav-container {
    border-bottom: 1px solid #f0ede4;
    padding: 0;
}
#header-nav li a,
.header .nav-container a {
    font-weight: 500;
    color: #0e2240;
    transition: color 0.15s ease;
}
#header-nav li a:hover,
.header .nav-container a:hover {
    color: #c9a227;
}

/* Category bar - subtle gold accent */
.main-menu-b,
.main-menu {
    background: #ffffff !important;
    border-top: 1px solid #f0ede4;
    border-bottom: 1px solid #f0ede4;
}
.main-menu-b ul li a,
.main-menu ul li a {
    font-weight: 600;
    letter-spacing: 0.4px;
    transition: color 0.15s ease;
}
.main-menu-b ul li a:hover,
.main-menu ul li a:hover {
    color: #c9a227;
}

/* Breadcrumbs subtle */
.breadcrumbs {
    margin: 18px 0 4px 0 !important;
    font-size: 12px;
    color: #8a8a8a;
}
.breadcrumbs ul li,
.breadcrumbs ul li a {
    color: #8a8a8a;
}
.breadcrumbs ul li.product strong,
.breadcrumbs ul li:last-child strong {
    color: #0e2240;
}

/* Page title */
.page-title h1,
.category-title h1,
.std h1, h1 {
    font-weight: 600;
    color: #0e2240;
    letter-spacing: 0.2px;
}

/* Search box modernization */
.form-search input.input-text,
.search-text input {
    border: 1px solid #e4e4e4 !important;
    border-radius: 4px !important;
    padding: 10px 14px !important;
    font-size: 13px;
    background: #ffffff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-search input.input-text:focus,
.search-text input:focus {
    border-color: #c9a227 !important;
    box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.12) !important;
    outline: none !important;
}

/* Toolbar / pagination polish */
.toolbar,
.pager {
    background: transparent;
    padding: 14px 0;
}

/* Pagina
/* ============================================================
   Drijfhout - modern design polish
   ============================================================ */

/* Page background with subtle warmth */
body {
    background: #f7f7f5;
}
.main-container {
    background: transparent;
}

/* Header polish */
.page-header,
.header-container {
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(12, 30, 64, 0.04);
}
.page-header-top {
    padding-top: 18px;
    padding-bottom: 8px;
}

/* Top navigation cleanup */
#header-nav,
.nav-primary,
.header .nav-container {
    border-bottom: 1px solid #f0ede4;
    padding: 0;
}
#header-nav li a,
.header .nav-container a {
    font-weight: 500;
    color: #0e2240;
    transition: color 0.15s ease;
}
#header-nav li a:hover,
.header .nav-container a:hover {
    color: #c9a227;
}

/* Category bar - subtle gold accent */
.main-menu-b,
.main-menu {
    background: #ffffff !important;
    border-top: 1px solid #f0ede4;
    border-bottom: 1px solid #f0ede4;
}
.main-menu-b ul li a,
.main-menu ul li a {
    font-weight: 600;
    letter-spacing: 0.4px;
    transition: color 0.15s ease;
}
.main-menu-b ul li a:hover,
.main-menu ul li a:hover {
    color: #c9a227;
}

/* Breadcrumbs subtle */
.breadcrumbs {
    margin: 18px 0 4px 0 !important;
    font-size: 12px;
    color: #8a8a8a;
}
.breadcrumbs ul li,
.breadcrumbs ul li a {
    color: #8a8a8a;
}
.breadcrumbs ul li.product strong,
.breadcrumbs ul li:last-child strong {
    color: #0e2240;
}

/* Page title */
.page-title h1,
.category-title h1 {
    font-weight: 600;
    color: #0e2240;
    letter-spacing: 0.2px;
}

/* Search box modernization */
.form-search input.input-text,
.search-text input {
    border: 1px solid #e4e4e4 !important;
    border-radius: 4px !important;
    padding: 10px 14px !important;
    font-size: 13px;
    background: #ffffff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-search input.input-text:focus,
.search-text input:focus {
    border-color: #c9a227 !important;
    box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.12) !important;
    outline: none !important;
}

/* Toolbar / pagination polish */
.toolbar,
.pager {
    background: transparent;
    padding: 14px 0;
}

.toolbar .pages strong,
.toolbar .pages li a {
    color: #0e2240;
}

/* Card details: subtle hover lift */
.products-grid .item:hover {
    transform: translateY(-2px);
}

/* "KIES EEN CATEGORIE" panel polish */
.category-menu-wrap,
.category-main-menu > a {
    background: #f0ede4 !important;
    border: 1px solid #e4dfc9;
    border-radius: 4px;
    color: #0e2240;
    font-weight: 600;
    padding: 12px 18px !important;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    font-size: 12px;
}
.category-main-menu > a:hover {
    background: #e8e3cf !important;
    color: #0e2240;
}
/* ============================================================
   Drijfhout / HM Precious Metals - brand alignment
   Brand colors:
     - HM Yellow #fbba00 (primary, dominant)
     - HM Blue   #243d77 (accent)
     - Black     #1d1d1b
   Font: Outfit (Google Font)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');

:root {
    --hm-yellow: #fbba00;
    --hm-yellow-dark: #d99f00;
    --hm-yellow-light: #fff4d1;
    --hm-blue: #243d77;
    --hm-blue-dark: #1a2d57;
    --hm-blue-light: #e8edf5;
    --hm-black: #1d1d1b;
    --hm-grey-50: #f7f7f5;
    --hm-grey-100: #f0ede4;
    --hm-grey-200: #e4e1d6;
    --hm-grey-400: #8a8a8a;
    --hm-grey-600: #555555;
}

/* Base typography: Outfit everywhere */
body,
input, select, textarea, button,
.std, p, li, td, th, span, div, a, label {
    font-family: 'Outfit', sans-serif !important;
    font-feature-settings: 'kern' 1, 'liga' 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
body {
    color: var(--hm-black);
    background: var(--hm-grey-50);
    font-weight: 400;
}
h1, h2, h3, h4, h5, h6,
.page-title h1, .category-title h1,
.product-name, .product-name a {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 600;
    color: var(--hm-blue);
    letter-spacing: 0;
}

/* Replace previous accent (#0e2240 / #c9a227) with brand colors everywhere */
.products-grid .product-info .product-name,
.products-grid .product-info .product-name a {
    color: var(--hm-blue);
}
.products-grid .product-info .product-name a:hover {
    color: var(--hm-yellow-dark);
}
.products-grid .product-info .price-box .regular-price .price,
.products-grid .product-info .price-box .special-price .price {
    color: var(--hm-blue);
    font-weight: 700;
}
.products-grid .item:hover {
    border-color: var(--hm-yellow);
    box-shadow: 0 8px 28px rgba(36, 61, 119, 0.10);
}

/* Buttons */
.products-grid .actions a.buttondetails,
.products-grid .product-info .actions .buttondetails {
    background: var(--hm-blue) !important;
    color: #fff !important;
    font-family: 'Outfit', sans-serif !important;
}
.products-grid .actions a.buttondetails:hover,
.products-grid .product-info .actions .buttondetails:hover {
    background: var(--hm-yellow) !important;
    color: var(--hm-blue) !important;
}

/* Account dropdown */
.links-cart .links > ul > li.account ul.account-links li a {
    color: var(--hm-blue);
    font-family: 'Outfit', sans-serif !important;
}
.links-cart .links > ul > li.account ul.account-links li a:hover {
    background: var(--hm-yellow-light);
    color: var(--hm-blue);
}

/* Header background gets a thin yellow accent line at the top */
.header-container,
.page-header {
    background: #ffffff;
    border-top: 4px solid var(--hm-yellow);
    box-shadow: 0 1px 3px rgba(36, 61, 119, 0.06);
}

/* Top nav (Home / Over Drijfhout / etc.) - now spanning the full container width */
.nav-primary,
.nav-container,
#nav,
.header .nav-primary {
    width: 100%;
    background: transparent;
    border-bottom: 1px solid var(--hm-grey-100);
}
.header .nav-primary ul,
#nav,
.nav ul.nav-primary {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    justify-content: flex-start;
}
.header .nav-primary li,
#nav li,
.nav ul.nav-primary li {
    list-style: none;
    margin: 0;
}
.header .nav-primary li a,
#nav li a,
.nav ul.nav-primary li a {
    display: block;
    padding: 14px 18px;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 500;
    font-size: 14px;
    color: var(--hm-blue);
    text-decoration: none;
    transition: color 0.15s ease;
}
.header .nav-primary li a:hover,
#nav li a:hover,
.nav ul.nav-primary li a:hover {
    color: var(--hm-yellow-dark);
}

/* Category bar (RECYCLING / INVESTEREN / GEREEDSCHAP / ...) */
.main-menu-b,
.main-menu {
    background: #ffffff !important;
    border-top: 1px solid var(--hm-grey-100);
    border-bottom: 1px solid var(--hm-grey-100);
}
.main-menu-b ul,
.main-menu ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    width: 100%;
    margin: 0;
    padding: 0;
}
.main-menu-b ul li,
.main-menu ul li {
    flex: 0 0 auto;
}
.main-menu-b ul li a,
.main-menu ul li a {
    display: block;
    padding: 14px 22px;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.5px;
    color: var(--hm-blue);
    text-transform: uppercase;
    transition: color 0.15s ease, background 0.15s ease;
}
.main-menu-b ul li a:hover,
.main-menu ul li a:hover {
    color: var(--hm-yellow-dark);
    background: var(--hm-grey-50);
}

/* Page background */
body { background: var(--hm-grey-50); }

/* "KIES EEN CATEGORIE" panel - use brand yellow tint */
.category-menu-wrap,
.category-main-menu > a {
    background: var(--hm-yellow-light) !important;
    border: 1px solid var(--hm-grey-200) !important;
    color: var(--hm-blue) !important;
    border-radius: 4px;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 600;
    padding: 12px 18px !important;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    font-size: 12px;
}
.category-main-menu > a:hover {
    background: #fff0b8 !important;
    color: var(--hm-blue) !important;
}

/* Promo / OP=OP / sale badges - update colors */
.products-grid .item .promo.eol {
    background: var(--hm-grey-600) !important;
}
.products-grid .item .promo.sale {
    background: #c2362e !important;
}
.products-grid .item .promo.new {
    background: var(--hm-yellow) !important;
    color: var(--hm-blue) !important;
}

/* "vanaf" label */
.products-grid .product-info .price-vanaf-wrap .price-from-label {
    color: var(--hm-grey-400);
    font-family: 'Outfit', sans-serif !important;
}

/* Search box */
.form-search input.input-text,
.search-text input {
    border: 1px solid var(--hm-grey-200) !important;
    font-family: 'Outfit', sans-serif !important;
}
.form-search input.input-text:focus,
.search-text input:focus {
    border-color: var(--hm-yellow) !important;
    box-shadow: 0 0 0 3px rgba(251, 186, 0, 0.18) !important;
}

/* Breadcrumbs */
.breadcrumbs ul li,
.breadcrumbs ul li a {
    font-family: 'Outfit', sans-serif !important;
    color: var(--hm-grey-400);
    font-size: 12px;
}
.breadcrumbs ul li:last-child strong {
    color: var(--hm-blue);
    text-transform: none;
    font-weight: 600;
}

/* Page title */
.category-title,
.page-title {
    margin-bottom: 16px;
}
.catalog-category-view .page-title {
    margin-top: 2px !important;
}
.catalog-category-view .breadcrumbs {
    margin-top: 6px !important;
    margin-bottom: 0 !important;
}
.category-title h1,
.page-title h1 {
    font-size: 28px;
    font-weight: 600;
    color: var(--hm-blue);
}

/* Toolbar / pagination */
.toolbar a,
.toolbar strong {
    color: var(--hm-blue) !important;
    font-family: 'Outfit', sans-serif !important;
}
.toolbar a:hover {
    color: var(--hm-yellow-dark) !important;
}

/* Category bar: keep all items on one row, evenly spaced */
.main-menu-b ul,
.main-menu ul {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: 0;
}
.main-menu-b ul li,
.main-menu ul li {
    flex: 0 1 auto;
    list-style: none;
    margin: 0;
}
.main-menu-b ul li a,
.main-menu ul li a {
    padding: 16px 12px !important;
    white-space: nowrap;
}

/* Top nav: also fits on one row, centered or left aligned */
.header .nav-primary ul,
#nav,
.nav ul.nav-primary {
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
}
.header .nav-primary li a,
#nav li a,
.nav ul.nav-primary li a {
    padding: 14px 14px !important;
    white-space: nowrap;
}
/* ============================================================
   Drijfhout - extra polish: recently-viewed block + listing
   ============================================================ */

/* Recently viewed block: smaller, modern look */
.block-viewed {
    border-top: 1px solid var(--hm-grey-200) !important;
    padding-top: 30px;
    margin-top: 30px;
    margin-bottom: 30px;
}
.block-viewed .block-title {
    font-family: 'Outfit', sans-serif !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: var(--hm-blue) !important;
    margin-bottom: 18px !important;
    text-transform: none;
    letter-spacing: 0;
}
.block-viewed .block-content > ol,
.block-viewed ol.mini-products-list {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}
.block-viewed ol.mini-products-list li.item {
    border: 1px solid var(--hm-grey-200) !important;
    border-radius: 6px;
    background: #ffffff;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    float: none !important;
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    height: auto !important;
}
.block-viewed ol.mini-products-list li.item:hover {
    border-color: var(--hm-yellow);
    box-shadow: 0 4px 16px rgba(36, 61, 119, 0.08);
}
.block-viewed ol.mini-products-list li.item .product-image {
    display: block !important;
    text-align: center;
    padding: 12px;
}
.block-viewed ol.mini-products-list li.item .product-image img {
    max-width: 100% !important;
    width: auto !important;
    max-height: 120px !important;
    height: auto !important;
    display: inline-block;
}
.block-viewed ol.mini-products-list li.item .hover {
    background: rgba(36, 61, 119, 0.92) !important;
    transition: opacity 0.2s ease;
}
.block-viewed ol.mini-products-list li.item .hover .product-name {
    color: #fff !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    padding: 12px;
    text-align: center;
    margin-top: 40px !important;
    font-weight: 500;
}
@media (max-width: 1100px) {
    .block-viewed ol.mini-products-list { grid-template-columns: repeat(4, 1fr) !important; }
}
@media (max-width: 768px) {
    .block-viewed ol.mini-products-list { grid-template-columns: repeat(3, 1fr) !important; }
}

/* Toolbar (sort / pagination) above and below cards */
.toolbar {
    background: transparent;
    border: none;
    padding: 14px 0;
    margin: 0;
}
.toolbar:after { content: ''; display: block; clear: both; }
.toolbar .pages,
.toolbar .sort-by,
.toolbar .limiter {
    font-family: 'Outfit', sans-serif !important;
    font-size: 13px;
    color: var(--hm-blue);
}
.toolbar .pages strong,
.toolbar .pages a {
    color: var(--hm-blue);
}
.toolbar .pages a:hover { color: var(--hm-yellow-dark); }
.toolbar select {
    border: 1px solid var(--hm-grey-200);
    border-radius: 4px;
    padding: 6px 10px;
    font-family: 'Outfit', sans-serif !important;
    font-size: 13px;
    background: #fff;
}

/* Category title block */
.category-title,
.page-title.category-title {
    margin: 0 0 18px 0;
    border: none;
    padding: 0;
}
.category-title h1 {
    font-family: 'Outfit', sans-serif !important;
    font-size: 28px;
    font-weight: 600;
    color: var(--hm-blue);
    margin: 0;
}

/* Category description */
.category-description {
    font-family: 'Outfit', sans-serif !important;
    color: var(--hm-grey-600);
    line-height: 1.6;
    margin: 0 0 24px 0;
    max-width: 760px;
}

/* ============================================================
   Drijfhout - cleanup category-menu-wrap (legacy ribbon)
   ============================================================ */
.category-menu-wrap {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 18px 0 0 0 !important;
}
.category-main-menu {
    position: relative;
    display: inline-block;
}
.category-main-menu > a,
.category-main-menu > a.menu-link {
    background: var(--hm-blue) !important;
    border: none !important;
    border-radius: 4px !important;
    color: #ffffff !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    padding: 16px 22px 12px 22px !important;
    width: auto !important;
    display: inline-block !important;
    float: none !important;
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    margin: 0 14px 0 0 !important;
    line-height: 1 !important;
    transition: background 0.2s ease;
}
.category-main-menu > a:hover,
.category-main-menu > a.menu-link:hover {
    background: var(--hm-yellow) !important;
    color: var(--hm-blue) !important;
}
.category-main-menu > a:after,
.category-main-menu > a.menu-link:after {
    content: '' !important;
    background: none !important;
    display: inline-block !important;
    position: relative !important;
    right: auto !important;
    top: auto !important;
    width: 0 !important;
    height: 0 !important;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    margin-left: 8px;
    vertical-align: middle;
}
.category-main-menu .bg-left {
    display: none !important;
}
/* The dropdown panel itself */
#category-main-menu {
    background: #ffffff !important;
    border: 1px solid var(--hm-grey-200) !important;
    border-radius: 6px !important;
    box-shadow: 0 8px 24px rgba(36, 61, 119, 0.12) !important;
    top: 100% !important;
    left: 0 !important;
    margin-top: 4px;
    padding: 14px 0 !important;
}

/* Breadcrumbs styling: clean inline */
.category-menu-wrap .breadcrumbs,
.breadcrumbs {
    display: inline-block;
    background: transparent;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 12px;
    color: var(--hm-grey-400);
    vertical-align: middle;
    line-height: 1;
}
.category-menu-wrap .breadcrumbs ul,
.breadcrumbs ul {
    display: inline;
    margin: 0;
    padding: 0;
}
.category-menu-wrap .breadcrumbs ul li,
.breadcrumbs ul li {
    display: inline;
    background: none;
    padding: 0;
    margin: 0;
}
.breadcrumbs ul li a:hover { color: var(--hm-yellow-dark); }
.breadcrumbs ul li span {
    margin: 0 6px;
    color: var(--hm-grey-400);
}

/* Override product-view shrunken menu-link */
.catalog-product-view .category-main-menu > a,
.catalog-product-view .category-main-menu > a.menu-link {
    width: auto !important;
    padding: 12px 22px !important;
    overflow: visible !important;
    text-indent: 0 !important;
    margin-right: 14px !important;
    background-position: 0 0 !important;
}

/* Hide breadcrumb arrow icons that look bad with our text */
.breadcrumbs li span {
    text-indent: 0 !important;
    overflow: visible !important;
    width: auto !important;
}
.breadcrumbs li span:before {
    content: '/';
    color: var(--hm-grey-400);
}

/* Fix breadcrumb double slash + product detail polish */
.breadcrumbs li span:before {
    content: none !important;
}
.breadcrumbs li span {
    text-indent: 0 !important;
    overflow: visible !important;
    width: auto !important;
    display: inline !important;
    font-size: 12px;
    color: var(--hm-grey-400);
    margin: 0 4px;
}

/* ============================================================
   Product detail page polish
   ============================================================ */

/* Container card around product details */
.product-view {
    background: #ffffff;
    border-radius: 8px;
    padding: 30px 36px 36px;
    box-shadow: 0 1px 3px rgba(36, 61, 119, 0.04);
    border: 1px solid var(--hm-grey-200);
    margin-bottom: 30px;
}
.product-view .product-essential {
    margin-bottom: 0;
}

/* Product image area */
.product-img-box {
    background: #ffffff;
    border: 1px solid var(--hm-grey-200);
    border-radius: 6px;
    padding: 20px;
    text-align: center;
}
.product-img-box .product-image,
.product-img-box .product-image img {
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

/* Product title */
.product-shop .product-name h1,
.product-name h1 {
    font-family: 'Outfit', sans-serif !important;
    font-size: 24px;
    font-weight: 600;
    color: var(--hm-blue);
    margin: 0 0 18px 0;
    line-height: 1.2;
}

/* Price block on product page */
.product-shop-price .price-box .regular-price .price,
.product-shop-price .price-box .special-price .price,
.price-box .price {
    font-family: 'Outfit', sans-serif !important;
    color: var(--hm-blue);
    font-weight: 700;
}
.product-shop-price .price-box .regular-price .price {
    font-size: 32px;
}
.price-tax-info,
.price-info {
    color: var(--hm-grey-400);
    font-size: 12px;
}

/* Required field marker */
.required em,
em.required,
p.required {
    color: #c2362e;
    font-weight: 500;
    font-style: normal;
    font-family: 'Outfit', sans-serif !important;
}

/* Quantity input */
.qty-input,
input.qty,
.input-text.qty {
    border: 1px solid var(--hm-grey-200) !important;
    border-radius: 4px !important;
    padding: 8px 10px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
    width: 60px !important;
    text-align: center;
}

/* Custom option dropdown */
.product-options select.product-custom-option,
.product-options select {
    border: 1px solid var(--hm-grey-200) !important;
    border-radius: 4px !important;
    padding: 10px 14px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
    background: #ffffff;
    min-width: 240px;
}
.product-options select:focus {
    border-color: var(--hm-yellow) !important;
    box-shadow: 0 0 0 3px rgba(251, 186, 0, 0.18) !important;
    outline: none !important;
}
.product-options dt label {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 500;
    color: var(--hm-blue);
    font-size: 13px;
}

/* Bestellen / add-to-cart button */
button.btn-cart,
.btn-cart,
button.button.btn-cart {
    background: var(--hm-blue) !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 14px 32px !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    color: #ffffff !important;
    transition: background 0.2s ease;
    cursor: pointer;
}
button.btn-cart:hover,
.btn-cart:hover {
    background: var(--hm-yellow) !important;
    color: var(--hm-blue) !important;
}
button.btn-cart span,
.btn-cart span {
    color: inherit !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 600 !important;
}

/* Wishlist / compare links */
.add-to-links a,
ul.add-to-links li a {
    font-family: 'Outfit', sans-serif !important;
    color: var(--hm-grey-600);
    font-size: 13px;
    text-decoration: none;
}
.add-to-links a:hover,
ul.add-to-links li a:hover {
    color: var(--hm-yellow-dark);
}

/* Product description */
.product-collateral,
.short-description {
    font-family: 'Outfit', sans-serif !important;
    color: var(--hm-grey-600);
    line-height: 1.65;
    font-size: 14px;
}

/* Toolbar / artikel x van y */
.product-toolbar {
    font-family: 'Outfit', sans-serif !important;
    color: var(--hm-grey-400);
    font-size: 12px;
}
.product-toolbar a {
    color: var(--hm-blue);
}
.product-toolbar a:hover {
    color: var(--hm-yellow-dark);
}

/* Limit the main product image height, but let the outer box grow
   to fit the thumbnails (.more-views) below it. */
.product-img-box .product-image {
    max-height: 500px;
    overflow: hidden;
}
.product-img-box .product-image img {
    max-height: 460px !important;
    object-fit: contain;
}
.product-img-box {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
}
.product-view .product-img-box {
    width: 50%;
    float: left;
    padding-right: 30px;
    box-sizing: border-box;
}
.product-view .product-shop {
    width: 50%;
    float: right;
    padding-left: 30px;
    box-sizing: border-box;
}
.product-essential:after {
    content: '';
    display: block;
    clear: both;
}
/* ============================================================
   Drijfhout - alignment + header/footer modernization
   ============================================================ */

/* Widen .header-nav to 1400px so top-nav and category bar align */
@media (min-width: 1400px) {
    .header-nav {
        max-width: 1400px !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }
}

/* Top navigation: left aligned (not centered) */
.main-menu-a .nav-horizontal,
.header-nav ul.nav-horizontal {
    justify-content: flex-start !important;
    padding-left: 0 !important;
}
.main-menu-a .nav-horizontal li:first-child a,
.header-nav ul.nav-horizontal li:first-child a {
    padding-left: 0 !important;
}

/* Category bar (RECYCLING, INVESTEREN, ...) keep space-between */
.main-menu-b .nav-horizontal,
.main-menu-b ul.nav-horizontal {
    justify-content: space-between !important;
    padding: 0 !important;
}
.main-menu-b ul li:first-child a { padding-left: 0 !important; }
.main-menu-b ul li:last-child a { padding-right: 0 !important; }

/* ----- KIES EEN CATEGORIE: above the breadcrumbs, prominent ----- */
.category-menu-wrap {
    margin: 18px 0 0 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    align-items: flex-start !important;
}
.category-menu-wrap .breadcrumbs {
    order: 2;
}
.category-menu-wrap .category-main-menu {
    order: 1;
}
.category-menu-wrap .category-main-menu > a,
.category-menu-wrap .category-main-menu > a.menu-link {
    margin: 0 !important;
}

/* ----- Category dropdown: restore multi-column layout ----- */
#category-main-menu {
    background: #ffffff !important;
    border: 1px solid var(--hm-grey-200) !important;
    border-radius: 6px !important;
    box-shadow: 0 12px 32px rgba(36, 61, 119, 0.14) !important;
    top: 100% !important;
    left: 0 !important;
    margin-top: 6px;
    padding: 24px 28px !important;
    min-width: 760px;
    max-width: none !important;
    z-index: 1500;
}
#category-main-menu .menubuilder-menu {
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
}
#category-main-menu .menubuilder-menu > ul,
#category-main-menu .nav-link-list,
#category-main-menu ul {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(180px, 1fr)) !important;
    gap: 8px 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    width: auto !important;
    float: none !important;
}
#category-main-menu .menubuilder-menu > ul > li,
#category-main-menu ul.nav-link-list > li,
#category-main-menu ul li,
#category-main-menu .first-menu-column {
    float: none !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none;
}
#category-main-menu ul.nav-link-list li a,
#category-main-menu li a {
    font-family: 'Outfit', sans-serif !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    padding: 6px 0 !important;
    color: var(--hm-blue) !important;
    display: block;
}
#category-main-menu ul.nav-link-list li a:hover,
#category-main-menu li a:hover {
    color: var(--hm-yellow-dark) !important;
}

/* ----- BESTELLEN button: clean text alignment ----- */
button.btn-cart,
.btn-cart,
button.button.btn-cart,
button.button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    background: var(--hm-blue) !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 14px 32px !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    color: #ffffff !important;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
    min-height: 48px;
    line-height: 1 !important;
}
button.btn-cart span,
.btn-cart span,
button.button span {
    display: inline-flex !important;
    align-items: center !important;
    background: none !important;
    color: inherit !important;
    font: inherit !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: center !important;
    line-height: 1 !important;
    height: auto !important;
}
button.btn-cart span span,
.btn-cart span span,
button.button span span {
    display: inline !important;
    background: none !important;
    color: inherit !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: inherit !important;
}
button.btn-cart:hover,
.btn-cart:hover,
button.button:hover {
    background: var(--hm-yellow) !important;
    color: var(--hm-blue) !important;
}
button.btn-cart:before,
button.btn-cart:after,
.btn-cart:before,
.btn-cart:after {
    content: none !important;
    display: none !important;
    background: none !important;
}

/* ----- Top right account / favorieten / winkelwagen icons ----- */
.links-cart,
.skip-account,
.skip-favorites,
.skip-cart,
.account-cart-wrapper {
    background: transparent !important;
}
.links-cart .links {
    background: transparent !important;
    border: none !important;
}
.links-cart .links > ul {
    background: transparent !important;
    display: flex;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.links-cart .links > ul > li {
    background: #ffffff !important;
    border: 1px solid var(--hm-grey-200) !important;
    border-radius: 8px !important;
    padding: 0 !important;
    width: 64px;
    text-align: center;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.links-cart .links > ul > li:hover {
    border-color: var(--hm-yellow) !important;
    box-shadow: 0 4px 12px rgba(36, 61, 119, 0.08);
}
.links-cart .links > ul > li > a,
.links-cart .links > ul > li > span {
    display: block !important;
    padding: 12px 6px 8px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 11px !important;
    color: var(--hm-blue) !important;
    text-decoration: none !important;
    background: transparent !important;
    border: none !important;
    font-weight: 500 !important;
    text-transform: lowercase !important;
    letter-spacing: 0;
    line-height: 1.3;
}
.links-cart .links > ul > li.account.active,
.links-cart .links > ul > li:hover {
    background: var(--hm-yellow-light) !important;
}
.links-cart .links > ul > li > a:before,
.links-cart .links > ul > li > span:before {
    content: '';
    display: block;
    width: 22px;
    height: 22px;
    margin: 0 auto 4px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
}
.links-cart .links > ul > li.account > span:before,
.links-cart .links > ul > li.account > a:before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23243d77' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/><circle cx='12' cy='7' r='4'/></svg>");
}
.links-cart .links > ul > li.wishlist > a:before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23243d77' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/></svg>");
}
.links-cart .links > ul > li.cart > a:before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23243d77' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='21' r='1'/><circle cx='20' cy='21' r='1'/><path d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/></svg>");
}
/* Cart qty bubble */
.links-cart .links > ul > li.cart .qty {
    position: absolute;
    background: var(--hm-yellow) !important;
    color: var(--hm-blue) !important;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    line-height: 18px;
    font-size: 10px;
    font-weight: 700;
    text-align: center;
    top: 6px;
    right: 6px;
}
.links-cart .links > ul > li.cart > a {
    position: relative;
}

/* ----- Footer modernization ----- */
.footer-container,
.footer {
    background: var(--hm-blue) !important;
    color: rgba(255, 255, 255, 0.85);
    margin-top: 50px;
    padding: 0 !important;
    border-top: 4px solid var(--hm-yellow);
}
.footer-container .footer,
.footer .footer-inner,
.footer > div {
    max-width: 1400px;
    margin: 0 auto;
    padding: 50px 20px 30px;
    box-sizing: border-box;
}
.footer h3,
.footer h4,
.footer .heading,
.footer .footer-title {
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 14px 0;
}
.footer p,
.footer li,
.footer a,
.footer span,
.footer div {
    font-family: 'Outfit', sans-serif !important;
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 13px;
    line-height: 1.6;
}
.footer a {
    text-decoration: none;
    transition: color 0.15s ease;
}
.footer a:hover {
    color: var(--hm-yellow) !important;
}
.footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer ul li {
    padding: 4px 0;
}
.footer .copyright,
.footer .footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    margin-top: 30px;
    padding-top: 20px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6) !important;
}

/* ----- Reset stray spans that we don't want to style as buttons on
   desktop. On mobile they become the header icon buttons. ----- */
@media (min-width: 901px) {
.page-header-top span.btn-cart,
header span.btn-cart {
    display: none !important;
}
}

/* Search box - reset the search button to a clean icon button */
.form-search,
.search-text {
    position: relative;
}
.form-search button.search-button,
.search-text button,
button.search-button {
    background: var(--hm-yellow) !important;
    border: none !important;
    border-radius: 0 4px 4px 0 !important;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    text-indent: -9999px;
    overflow: hidden;
    cursor: pointer;
    transition: background 0.2s ease;
}
.form-search button.search-button:hover,
.search-text button:hover,
button.search-button:hover {
    background: var(--hm-yellow-dark) !important;
}
.form-search button.search-button:before,
.search-text button:before,
button.search-button:before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23243d77' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px;
    text-indent: 0;
}
.form-search input.input-text,
.search-text input {
    border-radius: 4px 0 0 4px !important;
    padding-right: 50px !important;
    height: 44px !important;
    box-sizing: border-box;
}

/* Hide any legacy background images on top-right link icons */
.links-cart .links > ul > li > a,
.links-cart .links > ul > li > span {
    background-image: none !important;
    background: transparent !important;
}
.links-cart .links > ul > li.cart > a:after,
.links-cart .links > ul > li.account > a:after,
.links-cart .links > ul > li.wishlist > a:after,
.links-cart .links > ul > li > a:after {
    content: none !important;
    display: none !important;
    background: none !important;
}

/* Reposition qty bubble */
.links-cart .links > ul > li.cart .qty {
    position: absolute !important;
    background: var(--hm-yellow) !important;
    color: var(--hm-blue) !important;
    border-radius: 50%;
    width: 18px !important;
    height: 18px !important;
    line-height: 18px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-align: center !important;
    top: 4px !important;
    right: 4px !important;
    padding: 0 !important;
    display: block !important;
    z-index: 10;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.links-cart .links > ul > li.cart {
    position: relative !important;
}
/* ============================================================
   Drijfhout - header refinement (alignment, sizing, icons)
   ============================================================ */

/* Remove yellow accent line at the very top */
.header-container,
.page-header {
    border-top: none !important;
    box-shadow: 0 1px 3px rgba(36, 61, 119, 0.06);
}

/* Remove negative margin on main-menu-a UL so it aligns with content */
.main-menu-a ul,
.main-menu-a ul.nav-horizontal,
.header-nav ul.nav-horizontal {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* Larger menu font size */
.main-menu-a .nav-horizontal li a,
.header-nav ul.nav-horizontal li a,
.main-menu-a li a {
    font-family: 'Outfit', sans-serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    padding: 14px 18px !important;
    color: var(--hm-blue) !important;
}
.main-menu-a .nav-horizontal li:first-child a,
.header-nav ul.nav-horizontal li:first-child a {
    padding-left: 0 !important;
}

.main-menu-b .nav-horizontal li a,
.main-menu-b ul li a {
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0.6px !important;
    padding: 16px 12px !important;
}

/* ============================================================
   Search box modernization
   ============================================================ */
.form-search,
.header .search-text {
    position: relative;
    max-width: 360px;
    margin-left: auto;
    margin-bottom: 10px;
}
.form-search .input-text,
.search-text input.input-text,
input#search {
    width: 100% !important;
    height: 44px !important;
    box-sizing: border-box !important;
    border: 1px solid var(--hm-grey-200) !important;
    border-radius: 22px !important;
    padding: 0 56px 0 20px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
    color: var(--hm-blue) !important;
    background: #ffffff !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 1px 3px rgba(36, 61, 119, 0.04);
}
.form-search .input-text:focus,
.search-text input.input-text:focus,
input#search:focus {
    border-color: var(--hm-yellow) !important;
    box-shadow: 0 0 0 4px rgba(251, 186, 0, 0.16) !important;
    outline: none !important;
}
.form-search .input-text::placeholder,
.search-text input::placeholder {
    color: #b0b0b0;
    font-style: normal;
}
.form-search button.search-button,
.search-text button,
button.search-button {
    background: var(--hm-yellow) !important;
    border: none !important;
    border-radius: 50% !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    position: absolute !important;
    right: 4px !important;
    top: 4px !important;
    text-indent: -9999px;
    overflow: hidden;
    cursor: pointer;
    transition: background 0.2s ease;
    box-shadow: 0 2px 4px rgba(251, 186, 0, 0.25);
}
.form-search button.search-button:hover,
.search-text button:hover,
button.search-button:hover {
    background: var(--hm-yellow-dark) !important;
}

/* ============================================================
   Top right account / favorieten / winkelwagen
   - Clean cards, no double borders, consistent SVG icons
   ============================================================ */
.links-cart {
    background: transparent !important;
    padding-left: 0 !important;
    border: none !important;
}
.links-cart .links {
    background: transparent !important;
    border: none !important;
}
.links-cart .links > ul {
    background: transparent !important;
    display: flex;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.links-cart .links > ul > li {
    background: #ffffff !important;
    border: 1px solid var(--hm-grey-200) !important;
    border-radius: 10px !important;
    padding: 0 !important;
    width: 70px;
    text-align: center;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    position: relative !important;
    float: none !important;
}
.links-cart .links > ul > li:hover {
    border-color: var(--hm-yellow) !important;
    box-shadow: 0 4px 12px rgba(36, 61, 119, 0.10);
    background: #ffffff !important;
}

/* Reset all legacy backgrounds and pseudo elements */
.links-cart .links > ul > li > a,
.links-cart .links > ul > li > span {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    color: var(--hm-blue) !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    text-transform: lowercase !important;
    letter-spacing: 0;
    line-height: 1.3 !important;
    text-decoration: none !important;
    display: block !important;
    padding: 14px 6px 10px !important;
    text-align: center !important;
    position: relative !important;
}
.links-cart .links > ul > li > a:hover,
.links-cart .links > ul > li > span:hover {
    background: transparent !important;
    color: var(--hm-blue) !important;
}
/* Kill the legacy sprite icon */
.links-cart .links > ul > li > a:after,
.links-cart .links > ul > li > span:after {
    content: none !important;
    background: none !important;
    background-image: none !important;
    display: none !important;
}
/* Add SVG icon via :before */
.links-cart .links > ul > li > a:before,
.links-cart .links > ul > li > span:before {
    content: '' !important;
    display: block !important;
    width: 24px;
    height: 24px;
    margin: 0 auto 6px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 22px 22px;
    position: static !important;
    inset: auto !important;
    text-indent: 0;
    border: none !important;
}
/* SVG icons (consistent stroke style) for top-right menu */
.links-cart .links > ul > li.account > a:before,
.links-cart .links > ul > li.account > span:before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23243d77' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='4'/><path d='M6 21v-1a6 6 0 0 1 12 0v1'/></svg>") !important;
}
.links-cart .links > ul > li.wishlist > a:before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23243d77' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/></svg>") !important;
}
.links-cart .links > ul > li.cart > a:before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23243d77' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='20' r='1.6'/><circle cx='18' cy='20' r='1.6'/><path d='M2 3h3l2.5 12.5a2 2 0 0 0 2 1.6h8a2 2 0 0 0 2-1.6L21 7H6'/></svg>") !important;
}

/* Cart qty bubble - small circle in the corner */
.links-cart .links > ul > li.cart .qty {
    position: absolute !important;
    background: var(--hm-yellow) !important;
    color: var(--hm-blue) !important;
    border-radius: 50% !important;
    width: 18px !important;
    height: 18px !important;
    line-height: 18px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-align: center !important;
    top: 6px !important;
    right: 6px !important;
    padding: 0 !important;
    display: block !important;
    z-index: 10;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    border: none !important;
}

/* Top-links qty (favorites count) - same style */
.top-links .qty {
    background: var(--hm-yellow) !important;
    color: var(--hm-blue) !important;
    border: none !important;
    border-radius: 50% !important;
    width: 18px !important;
    height: 18px !important;
    line-height: 18px !important;
    font-size: 10px !important;
    top: 6px !important;
    right: 6px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

/* Remove all yellow horizontal accent lines around the header */
.main-menu-a,
.main-menu-b,
.header-container,
.page-header,
.page-header-top {
    border-top: none !important;
    border-bottom: none !important;
}
.main-menu-a {
    border-bottom: 1px solid var(--hm-grey-100) !important;
}
.main-menu-b {
    border-top: none !important;
    border-bottom: 1px solid var(--hm-grey-100) !important;
}

/* Restore the yellow accent line under .main-menu-a (between top nav and category bar) */
.main-menu-a {
    border-bottom: 3px solid var(--hm-yellow) !important;
}
/* ============================================================
   Drijfhout - header refinement v2
   ============================================================ */

/* ----- Top menu hover state: clearer visual feedback ----- */
.main-menu-a .nav-horizontal li,
.header-nav ul.nav-horizontal li,
.main-menu-a li {
    position: relative;
}
.main-menu-a .nav-horizontal li a,
.header-nav ul.nav-horizontal li a,
.main-menu-a li a {
    position: relative;
    transition: color 0.18s ease;
}
.main-menu-a .nav-horizontal li a:after,
.header-nav ul.nav-horizontal li a:after,
.main-menu-a li a:after {
    content: '';
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: -3px;
    height: 3px;
    background: var(--hm-yellow);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.2s ease;
    z-index: 2;
    pointer-events: none;
}
.main-menu-a .nav-horizontal li:first-child a:after,
.header-nav ul.nav-horizontal li:first-child a:after {
    left: 0;
}
.main-menu-a .nav-horizontal li a:hover,
.header-nav ul.nav-horizontal li a:hover,
.main-menu-a li a:hover {
    color: var(--hm-blue) !important;
}
.main-menu-a .nav-horizontal li a:hover:after,
.header-nav ul.nav-horizontal li a:hover:after,
.main-menu-a li a:hover:after {
    transform: scaleX(1);
    background: var(--hm-blue);
    height: 3px;
    bottom: -3px;
}

/* Active page indicator */
.main-menu-a .nav-horizontal li.active a:after,
.main-menu-a .nav-horizontal li.current a:after {
    transform: scaleX(1);
    background: var(--hm-blue);
}

/* ============================================================
   Search box: hide elasticsearch wrapper border, single styled input
   ============================================================ */
.es-input-box,
.nav-search,
.form-search,
.search-text {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
    overflow: visible !important;
    position: relative !important;
    width: 100% !important;
    max-width: 360px;
    margin-left: auto !important;
}
.es-input-box {
    display: block !important;
}

/* The input itself becomes the visible pill */
.es-input-box input.input-text,
.nav-search input.input-text,
.form-search input.input-text,
.search-text input.input-text,
input#search,
input.input-text.required-entry {
    width: 100% !important;
    height: 44px !important;
    box-sizing: border-box !important;
    border: 1px solid var(--hm-grey-200) !important;
    border-radius: 22px !important;
    padding: 0 56px 0 20px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
    color: var(--hm-blue) !important;
    background: #ffffff !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 1px 3px rgba(36, 61, 119, 0.04);
    margin: 0 !important;
    display: block !important;
}
.es-input-box input.input-text:focus,
.nav-search input.input-text:focus,
.form-search input.input-text:focus,
.search-text input.input-text:focus,
input#search:focus {
    border-color: var(--hm-yellow) !important;
    box-shadow: 0 0 0 4px rgba(251, 186, 0, 0.16) !important;
    outline: none !important;
}

/* Search button: round circle inside the input, vertically centered */
.es-input-box button.search-button,
.nav-search button.search-button,
.form-search button.search-button,
.search-text button.search-button,
button.search-button {
    background: var(--hm-yellow) !important;
    border: none !important;
    border-radius: 50% !important;
    width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    position: absolute !important;
    right: 4px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    text-indent: -9999px;
    overflow: hidden;
    cursor: pointer;
    transition: background 0.2s ease;
    box-shadow: 0 2px 4px rgba(251, 186, 0, 0.25);
    display: block !important;
    line-height: 0 !important;
    z-index: 3;
}
.es-input-box button.search-button:hover,
.nav-search button.search-button:hover,
.form-search button.search-button:hover,
.search-text button.search-button:hover,
button.search-button:hover {
    background: var(--hm-yellow-dark) !important;
}

/* ============================================================
   Top right cards: wider, no double borders
   ============================================================ */
.links-cart {
    width: 360px;
    max-width: 360px;
    margin-left: auto;
}
.links-cart .links > ul {
    display: flex;
    gap: 10px;
    width: 100%;
    margin: 0;
    padding: 0;
}
.links-cart .links > ul > li {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0;
    box-sizing: border-box;
}

/* Reset any old after pseudo elements that might still cause double icons */
.links-cart .links > ul > li *,
.links-cart .links > ul > li *:after,
.links-cart .links > ul > li *:before {
    background-image: none;
}
.links-cart .links > ul > li > a:before,
.links-cart .links > ul > li > span:before {
    background-image: var(--icon-bg) !important;
}

/* Hide mobile menu / btn-search / btn-info on desktop (legacy).
   On mobile (<=900px) the mobile header CSS takes over and unhides
   these icon buttons in .page-header-top. */
@media (min-width: 901px) {
.btn-menu,
.btn-search,
.btn-info,
.page-header-top .btn-cart,
.mobile-menu {
    display: none !important;
}
/* Hide mobile drawer / search panel / backdrop injected by JS */
.mobile-drawer,
.mobile-drawer-backdrop,
.mobile-search-panel,
.mobile-header-icons {
    display: none !important;
}
}

/* ============================================================
   Drijfhout - header refinement v3
   ============================================================ */

/* Remove drop-shadow from the wrapper - only individual cards have shadow */
.links-cart,
.links-cart .links,
.links-cart .links > ul {
    box-shadow: none !important;
    background: transparent !important;
    border: none !important;
}

/* Search input must be in flow (not absolute) so wrapper height matches */
.es-input-box {
    height: 44px !important;
    display: block !important;
}
.es-input-box input.input-text,
.nav-search input.input-text,
.form-search input.input-text,
input#search {
    position: relative !important;
}
/* Now button can use top:50% of a 44px tall parent */
.es-input-box {
    position: relative !important;
}

/* Visually hide ES autocomplete label but keep #es_search_autocomplete
   so suggestion.js can populate it and show the dropdown. */
.es-input-box label[for="search"] {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}
/* Hide the static placeholder text "Klik hier om te zoeken" via font-size 0 */
.es-input-box #es_search_autocomplete {
    display: none !important;
    font-size: 0 !important;
    position: absolute !important;
    top: 48px !important;
    left: 0 !important;
    right: 0 !important;
    background: #ffffff !important;
    border: 1px solid var(--hm-grey-200) !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 24px rgba(36, 61, 119, 0.12) !important;
    z-index: 100 !important;
    max-height: 400px !important;
    overflow-y: auto !important;
}
.es-input-box #es_search_autocomplete:empty {
    display: none !important;
}
/* Show only when populated with element children (real suggestions) */
.es-input-box #es_search_autocomplete:has(*) {
    display: block !important;
}
.es-input-box #es_search_autocomplete * {
    font-size: 14px !important;
}

/* Reduce header top padding - was 18px 0 8px, header height was 156px */
.page-header-top {
    padding-top: 10px !important;
    padding-bottom: 4px !important;
}
.page-header .header-nav-container,
.main-menu-a {
    padding-top: 0 !important;
}
.page-header .logo,
.page-header h1.logo {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* ============================================================
   Drijfhout - header refinement v4
   Search box: same border-radius as cards, stacked under cards,
   compact vertical spacing matching cards (top) and menu A text (bottom)
   ============================================================ */

/* Border-radius matches the 3 cards above (10px instead of pill) */
.es-input-box input.input-text,
.nav-search input.input-text,
.form-search input.input-text,
.search-text input.input-text,
input#search,
input.input-text.required-entry {
    border-radius: 10px !important;
}

/* Position the search box absolutely, directly under the .links-cart row.
   Cards sit at top: 10px, height 70px → bottom at 80px.
   Search top = 80 + 10 = 90px (10px gap matches cards top gap). */
.page-header-top {
    position: relative !important;
    min-height: 148px !important;
    padding-bottom: 14px !important; /* matches menu A inner bottom padding */
}
.nav-search {
    position: absolute !important;
    top: 90px !important;
    right: 0 !important;
    width: 360px !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
}
.nav-search .form-search,
.nav-search .es-input-box {
    position: relative !important;
    width: 100% !important;
    height: 44px !important;
    max-width: none !important;
    margin: 0 !important;
}

/* Remove the 18px margin-top on the wrapper that contains main-menu-a/b
   so the menu sits flush against the header-top end (saves 18px). */
.page-header > div + div {
    margin-top: 0 !important;
}
.header-nav-container,
.main-menu-a {
    margin-top: 0 !important;
}

/* ============================================================
   Drijfhout - header refinement v5
   - Cards must fully fill 360px (override legacy fixed widths)
   - Menu A hover: kill the dark navy background
   - Reduce padding-bottom of header for tighter overall height
   - Background tweaks to remove visible white corner artifacts
   ============================================================ */

/* Cards: force equal share of the 360px container (3 * 113.33 + 2 * 10 gap) */
.links-cart .links > ul > li,
.page-header .links-cart .links > ul > li {
    flex: 1 1 0 !important;
    width: calc((100% - 20px) / 3) !important;
    min-width: 0 !important;
    max-width: none !important;
}
.links-cart .links > ul > li > a,
.links-cart .links > ul > li > span {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Menu A hover: kill the legacy dark navy background and white text. */
.main-menu-a li a:hover,
.main-menu-a .nav-horizontal li a:hover,
.header-nav ul.nav-horizontal li a:hover,
.main-menu-a li.active a,
.main-menu-a li.current a {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--hm-blue) !important;
}
/* Slight bg tint on hover so it feels interactive (subtle) */
.main-menu-a .nav-horizontal li:hover,
.header-nav ul.nav-horizontal li:hover {
    background: rgba(251, 186, 0, 0.06);
}

/* Reduce header padding-bottom further so menu A sits closer to logo */
.page-header-top {
    padding-bottom: 6px !important;
    min-height: 140px !important; /* 90 (search top) + 44 (search h) + 6 (gap) */
}

/* Eliminate white-corner artifacts: ensure the input bg is clipped to the
   rounded border so no white pixels bleed past the radius. */
.es-input-box input.input-text,
.nav-search input.input-text,
.form-search input.input-text,
input#search,
input.input-text.required-entry {
    background-clip: padding-box !important;
    -webkit-background-clip: padding-box !important;
}

/* The input parent must not have any background that could square the corners */
.es-input-box,
.es-input-box .form-search,
.nav-search,
.nav-search form,
.skip-content {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* ============================================================
   Drijfhout - header refinement v6
   ============================================================ */

/* Force the 3 cards to fully fill the 360px container by using flex shorthand
   with calc() as the basis. The previous width: calc() rule was being ignored
   because the legacy display:list-item LIs were sizing to content (~110px). */
.links-cart .links > ul {
    display: flex !important;
    gap: 10px !important;
    padding: 0 !important;
    margin: 0 !important;
}
.links-cart .links > ul > li,
.page-header .links-cart .links > ul > li,
.page-header-top .links-cart .links > ul > li {
    flex: 0 0 calc((100% - 20px) / 3) !important;
    width: calc((100% - 20px) / 3) !important;
    max-width: calc((100% - 20px) / 3) !important;
    min-width: 0 !important;
    display: block !important;
    list-style: none !important;
    box-sizing: border-box !important;
}

/* Menu A hover: clean look without yellow tint */
.main-menu-a .nav-horizontal li:hover,
.header-nav ul.nav-horizontal li:hover,
.main-menu-a li:hover {
    background: transparent !important;
}
.main-menu-a li a:hover,
.main-menu-a .nav-horizontal li a:hover,
.header-nav ul.nav-horizontal li a:hover {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--hm-yellow-dark, #d99f00) !important;
}
/* Yellow underline animation stays as the visual feedback */
.main-menu-a .nav-horizontal li a:hover:after,
.header-nav ul.nav-horizontal li a:hover:after,
.main-menu-a li a:hover:after {
    background: var(--hm-yellow) !important;
    transform: scaleX(1) !important;
}

/* Reduce padding-bottom further so menu A sits tighter under header */
.page-header-top {
    padding-bottom: 0 !important;
    min-height: 134px !important; /* search ends at 134, no extra gap below */
}

/* ============================================================
   Drijfhout - header refinement v7
   Tighter vertical spacing in the header to bring menu A closer to logo
   ============================================================ */

.page-header-top {
    padding-top: 4px !important;     /* was 10 */
    padding-bottom: 0 !important;
    min-height: 122px !important;
}

/* Cards: top now 4px instead of 10 (matches reduced padding-top) */
.links-cart {
    margin-top: 0 !important;
}

/* Search: position 4px below cards (cards bottom = 4 + 70 = 74 → search top 78) */
.nav-search {
    top: 78px !important;
}

/* Logo a bit tighter top alignment to match the new compact spacing */
.page-header .logo,
.page-header h1.logo {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* ============================================================
   Drijfhout - header refinement v8
   Compact layout: cards row only in header-top, search moved to
   menu A row, 20px gap between header-top and main-menu-a.
   ============================================================ */

/* page-header-top: only contains logo + cards. Padding 10px top/bottom
   matches the 10px gap between cards. */
.page-header-top {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    min-height: 0 !important;
    position: relative !important;
}

/* Cards stay where they are at top: 10 */
.links-cart {
    margin: 0 !important;
}

/* 20px gap between header-top and main-menu-a */
.page-header > div + div,
.page-header .header-nav-container {
    margin-top: 5px !important;
}

/* Search box: absolute, overlays the menu A row on the right side.
   page-header-top ends at ~90 (10 + 70 + 10). Menu A starts at 110.
   Center search vertically within menu A (height 46): top = 110 + 1 = 111. */
.nav-search {
    position: absolute !important;
    top: 116px !important;       /* 90 (header-top end) + 10 (vertical center within menu A) */
    right: 0 !important;
    width: 360px !important;
    height: 44px !important;
    z-index: 5 !important;
}

/* Make sure menu A doesnt

/* ============================================================
   Drijfhout - header refinement v8
   ============================================================ */
.page-header-top {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    min-height: 0 !important;
    position: relative !important;
}
.links-cart {
    margin: 0 !important;
}
.page-header > div + div,
.page-header .header-nav-container {
    margin-top: 5px !important;
}
.nav-search {
    position: absolute !important;
    top: 90px !important;
    right: 0 !important;
    width: 360px !important;
    height: 44px !important;
    z-index: 5 !important;
}
.main-menu-a {
    position: relative !important;
    z-index: 1 !important;
}

/* ============================================================
   Drijfhout - account dropdown polish
   ============================================================ */

/* Center the dropdown under the 'mijn account' card */
.links-cart .links > ul > li.account ul.account-links {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    min-width: 220px !important;
    margin-top: 4px !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 24px rgba(36, 61, 119, 0.12) !important;
    border: 1px solid var(--hm-grey-200, #e4e1d6) !important;
    padding: 6px 0 !important;
    overflow: hidden !important;
}
.links-cart .links > ul > li.account ul.account-links li {
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}
.links-cart .links > ul > li.account ul.account-links li a {
    display: block !important;
    padding: 10px 18px !important;
    color: var(--hm-blue, #243d77) !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
    text-decoration: none !important;
    transition: background 0.15s ease, color 0.15s ease;
}
.links-cart .links > ul > li.account ul.account-links li a:hover {
    background: rgba(251, 186, 0, 0.08) !important;
    color: var(--hm-blue, #243d77) !important;
}

/* Remove the old sprite-based 'x' icon on the logout item */
.links-cart .links > ul > li.account ul.account-links li.log-out a {
    padding: 10px 18px 10px 44px !important;
    position: relative !important;
}
.links-cart .links > ul > li.account ul.account-links li.log-out a::after,
.links-cart .links > ul > li.account ul.account-links li.log-out a::before {
    content: none !important;
    background: none !important;
    display: none !important;
}
/* Replace with a clean inline SVG logout icon (arrow leaving box) */
.links-cart .links > ul > li.account ul.account-links li.log-out a {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23243d77' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/><polyline points='16 17 21 12 16 7'/><line x1='21' y1='12' x2='9' y2='12'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: 18px center !important;
    background-size: 18px 18px !important;
}

/* Visual separator before the logout item */
.links-cart .links > ul > li.account ul.account-links li.log-out {
    border-top: 1px solid var(--hm-grey-200, #e4e1d6) !important;
    margin-top: 6px !important;
    padding-top: 0 !important;
}

/* ============================================================
   Drijfhout - account dropdown alignment + card label size
   ============================================================ */

/* Align dropdown left with the card (not centered) */
.links-cart .links > ul > li.account ul.account-links {
    left: 0 !important;
    right: auto !important;
    transform: none !important;
}

/* Bump up the label text on the 3 cards */
.links-cart .links > ul > li > a,
.links-cart .links > ul > li > span,
.links-cart .links > ul > li.account > span.account-links {
    font-size: 13px !important;
}

/* ============================================================
   Drijfhout - account dropdown hover-bridge fix
   The legacy ::before pseudo at top:-12px provides the bridge between
   the card and the dropdown so the menu doesn't close mid-move.
   But our overflow:hidden was clipping it. Allow it to render outside.
   ============================================================ */
.links-cart .links > ul > li.account ul.account-links {
    overflow: visible !important;
    margin-top: 6px !important;
    padding-top: 0 !important;
}
/* Wide invisible bridge above the dropdown so diagonal mouse movement
   from the card to the dropdown stays inside the hover area. The bridge
   extends upward across the entire card height, plus a few px of overlap
   with the dropdown so there's no gap at the boundary. */
.links-cart .links > ul > li.account ul.account-links::before {
    content: '' !important;
    position: absolute !important;
    top: -76px !important;
    left: -20px !important;
    right: -20px !important;
    height: 80px !important;
    background: transparent !important;
    pointer-events: auto !important;
}
/* Clip rounded corners on the items themselves so visual stays clean
   without needing overflow:hidden on the parent. */
.links-cart .links > ul > li.account ul.account-links li:first-child a {
    border-top-left-radius: 10px !important;
    border-top-right-radius: 10px !important;
}
.links-cart .links > ul > li.account ul.account-links li:last-child a {
    border-bottom-left-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
}

/* ============================================================
   Drijfhout - home page main-menu-b fix
   The legacy CSS sets .cms-home/.cms-webwinkel .main-menu-b to position:
   absolute, which made it overlap with main-menu-a in the new compact
   header. Force static positioning so it flows after main-menu-a.
   ============================================================ */
.cms-home .main-menu-b,
.cms-webwinkel .main-menu-b {
    position: static !important;
    top: auto !important;
}

/* Center main content container (was left-aligned) */
.main,
.main-container {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Home page rows: match header width (1400px) instead of legacy 1190px */
.cms-home .homewrapper-list .row1,
.cms-home .homewrapper-list .row2 {
    max-width: 1400px !important;
    width: 1400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ============================================================
   Drijfhout - newsletter signup bar (home page)
   Restyled to match HM brand: HM blue bg, rounded, modern
   ============================================================ */
.cms-home .homewrapper-list .banner .newsletter,
.cms-home .newsletter {
    width: 100% !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 0 !important;
}
.cms-home .block.block-subscribe {
    width: 100% !important;
    max-width: none !important;
    background: linear-gradient(135deg, var(--hm-blue, #243d77) 0%, #1a2d5a 100%) !important;
    background-color: var(--hm-blue, #243d77) !important;
    border-radius: 14px !important;
    padding: 18px 32px !important;
    box-shadow: 0 4px 16px rgba(36, 61, 119, 0.12) !important;
    display: flex !important;
    align-items: center !important;
    gap: 24px !important;
    overflow: hidden !important;
    position: relative !important;
    box-sizing: border-box !important;
}

/* Title block on the left */
.cms-home .block.block-subscribe .block-title {
    background: none !important;
    padding: 0 0 0 56px !important;
    margin: 0 !important;
    border: none !important;
    flex: 0 0 auto !important;
    color: #ffffff !important;
    position: relative !important;
}
/* Replace sprite arrow with clean inline SVG (modern arrow) */
.cms-home .block.block-subscribe .block-title::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: var(--hm-yellow, #fbba00) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23243d77' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'/></svg>") no-repeat center center !important;
    background-size: 20px 20px !important;
}
.cms-home .block.block-subscribe .block-title h3,
.cms-home .block.block-subscribe .block-title h4 {
    color: #ffffff !important;
    font-family: 'Outfit', sans-serif !important;
    margin: 0 !important;
    padding: 0 !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    width: auto !important;
    background: none !important;
}
.cms-home .block.block-subscribe .block-title h3 {
    font-size: 18px !important;
    margin-bottom: 2px !important;
}
.cms-home .block.block-subscribe .block-title h4 {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: rgba(255,255,255,0.85) !important;
}

/* Form on the right - hide the legacy 5% korting image */
.cms-home .block.block-subscribe form {
    flex: 1 1 auto !important;
    margin: 0 !important;
    background: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    position: relative !important;
}
.cms-home .block.block-subscribe form::after {
    content: '5% korting' !important;
    background: var(--hm-yellow, #fbba00) !important;
    color: var(--hm-blue, #243d77) !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    padding: 6px 14px !important;
    border-radius: 14px !important;
    position: static !important;
    top: auto !important;
    right: auto !important;
    width: auto !important;
    height: auto !important;
    flex: 0 0 auto !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15) !important;
}
.cms-home .block.block-subscribe .block-content,
.cms-home .block.block-subscribe .input-box {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    display: flex !important;
    gap: 0 !important;
    position: relative !important;
}

/* Email input as a rounded white pill */
.cms-home .block.block-subscribe input#newsletter-home,
.cms-home .block.block-subscribe input.input-text {
    flex: 1 1 auto !important;
    height: 44px !important;
    padding: 0 20px !important;
    border: none !important;
    border-radius: 10px 0 0 10px !important;
    background: #ffffff !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
    color: var(--hm-blue, #243d77) !important;
    box-shadow: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
}
.cms-home .block.block-subscribe input#newsletter-home:focus {
    outline: none !important;
    box-shadow: inset 0 0 0 2px var(--hm-yellow, #fbba00) !important;
}

/* Submit button as HM yellow pill */
.cms-home .block.block-subscribe button.button {
    flex: 0 0 auto !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    line-height: 44px !important;
    padding: 0 28px !important;
    border: none !important;
    border-radius: 0 10px 10px 0 !important;
    background: var(--hm-yellow, #fbba00) !important;
    color: var(--hm-blue, #243d77) !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    cursor: pointer !important;
    transition: background 0.2s ease !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}
.cms-home .block.block-subscribe button.button:hover {
    background: var(--hm-yellow-dark, #d99f00) !important;
}
.cms-home .block.block-subscribe button.button span {
    background: none !important;
    padding: 0 !important;
    color: inherit !important;
    font: inherit !important;
}

/* Newsletter bar: breathing room above (was flush with header) */
.cms-home .homewrapper-list .banner,
.cms-home .homewrapper-list .banner .newsletter {
    margin-top: 24px !important;
}

/* Newsletter button: legacy CSS makes it position:absolute, override */
.cms-home .block.block-subscribe button.button {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
}
.cms-home .block.block-subscribe form {
    float: none !important;
}

/* Newsletter input: no italic on value/placeholder */
.cms-home .block.block-subscribe input#newsletter-home,
.cms-home .block.block-subscribe input.input-text {
    font-style: normal !important;
}
.cms-home .block.block-subscribe input#newsletter-home::placeholder,
.cms-home .block.block-subscribe input.input-text::placeholder {
    font-style: normal !important;
    color: rgba(36, 61, 119, 0.5) !important;
}

/* ============================================================
   Drijfhout - footer in HM brand style (content unchanged)
   ============================================================ */
.footer-container {
    background: var(--hm-blue, #243d77) !important;
    margin-top: 60px !important;
}
.footer {
    color: #ffffff !important;
    font-family: 'Outfit', sans-serif !important;
}
.footer .main-content {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 40px !important;
    padding: 56px 0 32px !important;
    align-items: flex-start !important;
}
.footer .main-content > div {
    float: none !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Column headings */
.footer h3,
.footer .block-title strong span,
.footer .block-title {
    color: #ffffff !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin: 0 0 18px !important;
    padding: 0 0 12px !important;
    border-bottom: 2px solid var(--hm-yellow, #fbba00) !important;
    display: inline-block !important;
    background: none !important;
}

/* Body text */
.footer p,
.footer a,
.footer li,
.footer span {
    color: rgba(255, 255, 255, 0.85) !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
}
.footer a {
    text-decoration: none !important;
    transition: color 0.15s ease !important;
}
.footer a:hover {
    color: var(--hm-yellow, #fbba00) !important;
}

/* Lists - clean style for menu items */
.footer ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.footer ul li {
    padding: 6px 0 !important;
    margin: 0 !important;
    border: none !important;
    background: none !important;
    list-style: none !important;
}
.footer ul li strong,
.footer ul li strong strong {
    font-weight: 400 !important;
    font-size: 14px !important;
    color: rgba(255, 255, 255, 0.85) !important;
}
.footer ul li br {
    display: none !important;
}

/* Social media icons - clean modern circles */
.footer .facebook,
.footer .instagram {
    display: inline-block !important;
    margin: 16px 8px 0 0 !important;
    vertical-align: top !important;
}
.footer .facebook a,
.footer .instagram a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px 14px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border-radius: 22px !important;
    color: #ffffff !important;
    font-size: 13px !important;
    text-decoration: none !important;
    transition: background 0.2s ease !important;
}
.footer .facebook a:hover,
.footer .instagram a:hover {
    background: var(--hm-yellow, #fbba00) !important;
    color: var(--hm-blue, #243d77) !important;
}
.footer .facebook a:before,
.footer .instagram a:before {
    content: '' !important;
    width: 18px !important;
    height: 18px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    flex-shrink: 0 !important;
}
.footer .facebook a:before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'><path d='M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z'/></svg>") !important;
}
.footer .instagram a:before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='2' width='20' height='20' rx='5' ry='5'/><path d='M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z'/><line x1='17.5' y1='6.5' x2='17.51' y2='6.5'/></svg>") !important;
}
.footer .facebook a span,
.footer .instagram a span {
    background: none !important;
    padding: 0 !important;
    color: inherit !important;
    font-size: 13px !important;
}
.footer .facebook a:hover:before,
.footer .instagram a:hover:before {
    filter: brightness(0) !important;
}

/* Opening hours block */
.footer .opening {
    margin-top: 24px !important;
}
.footer .opening h3 {
    margin-bottom: 12px !important;
}

/* Payment image */
.footer .payment {
    margin-top: 24px !important;
}
.footer .payment img {
    max-width: 100% !important;
    height: auto !important;
    filter: brightness(0) invert(1) !important;
    opacity: 0.85 !important;
}

/* Newsletter subscribe block in footer (if present) */
.footer .block-subscribe {
    background: rgba(255,255,255,0.06) !important;
    padding: 18px !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    display: block !important;
}
.footer .block-subscribe input.input-text {
    background: #ffffff !important;
    border: none !important;
    border-radius: 10px !important;
    height: 40px !important;
    padding: 0 14px !important;
    font-size: 13px !important;
    color: var(--hm-blue, #243d77) !important;
    width: 100% !important;
    margin-bottom: 8px !important;
    box-sizing: border-box !important;
}
.footer .block-subscribe button.button {
    background: var(--hm-yellow, #fbba00) !important;
    color: var(--hm-blue, #243d77) !important;
    border: none !important;
    border-radius: 10px !important;
    height: 40px !important;
    padding: 0 18px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    width: auto !important;
}
.footer .block-subscribe button.button:hover {
    background: var(--hm-yellow-dark, #d99f00) !important;
}

/* Bottom copyright bar (if exists) */
.footer .bottom-container {
    border-top: 1px solid rgba(255,255,255,0.12) !important;
    padding: 20px 0 !important;
    margin-top: 20px !important;
    color: rgba(255,255,255,0.6) !important;
    font-size: 12px !important;
    text-align: center !important;
}

/* ============================================================
   Drijfhout - footer fixes v2
   - Single yellow divider (was double on .footer + .footer-container)
   - Single underline under headings (was double on .block-title + span)
   - Phone icon prefix on contact-list items (replaces 'T.')
   - Newsletter box restyling in footer
   ============================================================ */

/* Single yellow divider line - only on footer-container */
.footer-container {
    border-top: 4px solid var(--hm-yellow, #fbba00) !important;
}
.footer {
    border-top: 0 !important;
    border-top-width: 0 !important;
}

/* Single underline on headings - only on innermost element */
.footer h3,
.footer .block-title {
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 18px !important;
}
.footer h3 {
    display: inline-block !important;
    border-bottom: 2px solid var(--hm-yellow, #fbba00) !important;
    padding-bottom: 12px !important;
    margin-bottom: 18px !important;
}
.footer .block-title strong span {
    display: inline-block !important;
    border-bottom: 2px solid var(--hm-yellow, #fbba00) !important;
    padding-bottom: 12px !important;
    color: #ffffff !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}
.footer .block-title strong {
    background: none !important;
    padding: 0 !important;
    margin: 0 0 18px 0 !important;
    display: block !important;
}

/* Contact-list: hide the literal 'T. ' label, prefix each item with a
   phone icon. Each LI contains 'Label T. (+31) ...' as one text node. */
.footer .contact-list ul li {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px 0 !important;
}
.footer .contact-list ul li::before {
    content: '' !important;
    flex: 0 0 auto !important;
    width: 16px !important;
    height: 16px !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fbba00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 16px 16px !important;
}
/* Hide the legacy 'T.' text via CSS - we use a JS replacement below */

/* Newsletter box at bottom of menu-newsletter column */
.footer .menu-newsletter {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
}
.footer .menu-algemeen {
    margin: 0 !important;
}
.footer .newsletter-box {
    margin: 0 !important;
}
.footer .newsletter-box .block-subscribe {
    background: rgba(255,255,255,0.06) !important;
    padding: 18px !important;
    border-radius: 12px !important;
    display: block !important;
    box-shadow: none !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
}
.footer .newsletter-box .block-title {
    background: none !important;
    padding: 0 !important;
    margin: 0 0 6px !important;
    border: none !important;
    border-bottom: 0 !important;
}
.footer .newsletter-box .block-title strong,
.footer .newsletter-box .block-title strong span {
    color: #ffffff !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    border-bottom: 0 !important;
    padding: 0 !important;
    display: block !important;
}
.footer .newsletter-box .block-title p {
    color: rgba(255,255,255,0.75) !important;
    font-size: 13px !important;
    margin: 4px 0 12px !important;
}
.footer .newsletter-box .block-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 0 !important;
    margin: 0 !important;
}
.footer .newsletter-box .form-subscribe-header {
    display: none !important;
}
.footer .newsletter-box .input-box {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}
.footer .newsletter-box .input-box input.input-text {
    width: 100% !important;
    height: 40px !important;
    background: #ffffff !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 0 14px !important;
    font-size: 13px !important;
    font-family: 'Outfit', sans-serif !important;
    font-style: normal !important;
    color: var(--hm-blue, #243d77) !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}
.footer .newsletter-box .actions {
    margin: 0 !important;
    padding: 0 !important;
}
.footer .newsletter-box button.button {
    width: 100% !important;
    height: 40px !important;
    background: var(--hm-yellow, #fbba00) !important;
    color: var(--hm-blue, #243d77) !important;
    border: none !important;
    border-radius: 10px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 40px !important;
    line-height: 40px !important;
}
.footer .newsletter-box button.button:hover {
    background: var(--hm-yellow-dark, #d99f00) !important;
}
.footer .newsletter-box button.button span {
    background: none !important;
    padding: 0 !important;
    color: inherit !important;
    font: inherit !important;
}

/* ============================================================
   Drijfhout - footer fixes v3
   - Phone icon goes BETWEEN label and number (not at start)
   - Newsletter-box becomes a wider 2-column row at the bottom
   ============================================================ */

/* Remove the LI ::before icon, put it on the .cl-phone span instead */
.footer .contact-list ul li::before {
    content: none !important;
    display: none !important;
}
.footer .contact-list ul li {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}
.footer .contact-list ul li .cl-phone {
    display: inline-flex !important;
    width: 16px !important;
    height: 16px !important;
    margin: 0 4px !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fbba00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 16px 16px !important;
    flex: 0 0 auto !important;
    vertical-align: middle !important;
}

/* Newsletter-box moved out of column - now spans 2 columns wide
   on the right side of the footer (under menu-producten + menu-newsletter) */
.footer .main-content > .newsletter-box {
    flex: 0 0 calc(50% - 20px) !important;
    margin-left: auto !important;
    margin-top: 8px !important;
    align-self: flex-end !important;
}
.footer .main-content > .newsletter-box .block-subscribe {
    background: rgba(255,255,255,0.06) !important;
    padding: 24px !important;
    border-radius: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 18px !important;
}
.footer .main-content > .newsletter-box .block-title {
    flex: 1 1 100% !important;
    margin: 0 !important;
}
.footer .main-content > .newsletter-box .block-content {
    flex: 1 1 100% !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
}
.footer .main-content > .newsletter-box .input-box {
    flex: 1 1 auto !important;
}
.footer .main-content > .newsletter-box .actions {
    flex: 0 0 auto !important;
}
.footer .main-content > .newsletter-box button.button {
    width: auto !important;
    padding: 0 24px !important;
}

/* ============================================================
   Drijfhout - footer fixes v4
   - Contact-list items: single line (no wrap), shrink if needed
   - Newsletter: span full width row at the bottom OR positioned
     properly so columns aren't squeezed
   ============================================================ */

/* Contact-list: items on a single line */
.footer .contact-list ul li {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    white-space: nowrap !important;
    font-size: 13px !important;
}
.footer .contact-list ul li strong,
.footer .contact-list ul li strong strong {
    white-space: nowrap !important;
    font-size: 13px !important;
}

/* Newsletter takes a full row at the bottom (under all 4 columns) */
.footer .main-content > .newsletter-box {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 24px 0 0 0 !important;
    align-self: stretch !important;
}
.footer .main-content > .newsletter-box .block-subscribe {
    background: rgba(255,255,255,0.06) !important;
    padding: 24px 32px !important;
    border-radius: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 24px !important;
}
.footer .main-content > .newsletter-box .block-title {
    flex: 0 0 auto !important;
    margin: 0 !important;
    max-width: 360px !important;
}
.footer .main-content > .newsletter-box .block-title strong,
.footer .main-content > .newsletter-box .block-title strong span {
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
    display: inline-block !important;
    margin-bottom: 4px !important;
}
.footer .main-content > .newsletter-box .block-title p {
    margin: 4px 0 0 !important;
    font-size: 13px !important;
    color: rgba(255,255,255,0.75) !important;
}
.footer .main-content > .newsletter-box .block-content {
    flex: 1 1 auto !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
}
.footer .main-content > .newsletter-box .input-box {
    flex: 1 1 auto !important;
    width: auto !important;
}
.footer .main-content > .newsletter-box .input-box input.input-text {
    width: 100% !important;
}
.footer .main-content > .newsletter-box .actions {
    flex: 0 0 auto !important;
}
.footer .main-content > .newsletter-box button.button {
    width: auto !important;
    padding: 0 32px !important;
    height: 40px !important;
}

/* ============================================================
   Drijfhout - footer fixes v5: contact-list grid layout
   Each item: label (fixed width) | phone icon | number
   ============================================================ */
.footer .contact-list ul li {
    display: grid !important;
    grid-template-columns: 1fr auto auto !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 6px 0 !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    font-size: 13px !important;
}
.footer .contact-list ul li .cl-label {
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: rgba(255,255,255,0.65) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.footer .contact-list ul li .cl-num {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #ffffff !important;
    white-space: nowrap !important;
    font-variant-numeric: tabular-nums !important;
}

/* ============================================================
   Drijfhout - footer fixes v6
   Contact-list column wider so labels don't truncate.
   Other 3 columns share the remaining space equally.
   ============================================================ */
.footer .main-content > .contact-list {
    flex: 0 0 440px !important;
    max-width: 440px !important;
}
.footer .main-content > .contact,
.footer .main-content > .menu-producten,
.footer .main-content > .menu-newsletter {
    flex: 1 1 0 !important;
    min-width: 0 !important;
}
/* Remove ellipsis on labels - let them show in full */
.footer .contact-list ul li .cl-label {
    overflow: visible !important;
    text-overflow: clip !important;
}

/* Contact-list: numbers left-aligned (all start at same x) */
.footer .contact-list ul li {
    grid-template-columns: 220px 16px 1fr !important;
}
.footer .contact-list ul li .cl-num {
    text-align: left !important;
    justify-self: start !important;
}

/* ============================================================
   Drijfhout - footer fixes v7
   ============================================================ */

/* Payment logos: keep original colors, no white filter */
.footer .payment img {
    filter: none !important;
    opacity: 1 !important;
    background: #ffffff !important;
    padding: 6px 10px !important;
    border-radius: 6px !important;
}

/* Newsletter input + button: flush, no gap */
.footer .main-content > .newsletter-box .block-content {
    gap: 0 !important;
}
.footer .main-content > .newsletter-box .input-box input.input-text {
    border-radius: 10px 0 0 10px !important;
}
.footer .main-content > .newsletter-box button.button {
    border-radius: 0 10px 10px 0 !important;
}

/* Newsletter input/button: equal height (44px) */
.footer .main-content > .newsletter-box .input-box input.input-text {
    height: 44px !important;
    min-height: 44px !important;
}
.footer .main-content > .newsletter-box button.button {
    height: 44px !important;
    min-height: 44px !important;
    line-height: 44px !important;
}

/* Footer small logo: negative (white) version on dark blue background */
.footer .bottom .small-logo {
    background: url(../images/logo-footer-negative.png) no-repeat center center !important;
    background-size: contain !important;
    width: 220px !important;
    height: 80px !important;
    float: left !important;
    display: block !important;
}

/* Footer bottom: vertically center logo and address */
.footer .bottom {
    display: flex !important;
    align-items: center !important;
    gap: 24px !important;
}
.footer .bottom .small-logo {
    flex: 0 0 auto !important;
    float: none !important;
}
.footer .bottom address {
    flex: 1 1 auto !important;
    margin: 0 !important;
    text-align: center !important;
}

/* Footer block-title: remove double margin (was on both block-title and strong) */
.footer .block-title strong {
    margin: 0 !important;
    padding: 0 !important;
}
.footer .block-title {
    margin-bottom: 14px !important;
}

/* Footer block-title strong: collapse line-height padding */
.footer .block-title strong {
    line-height: 0 !important;
    font-size: 0 !important;
    display: block !important;
}
.footer .block-title strong span {
    line-height: 1.4 !important;
    font-size: 14px !important;
}

/* Footer block-title span: no margin-bottom, only padding-bottom for underline */
.footer .block-title strong span {
    margin-bottom: 0 !important;
}
.footer .block-title {
    margin-bottom: 12px !important;
}
.footer .menu-producten ul li:first-child,
.footer .menu-algemeen ul li:first-child {
    padding-top: 0 !important;
}

/* ============================================================
   Drijfhout - login + create account page in HM brand style
   ============================================================ */

/* Page title */
.account-login .page-title h1,
.customer-account-create .page-title h1,
.customer-account-forgotpassword .page-title h1 {
    color: var(--hm-blue, #243d77) !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 600 !important;
    font-size: 28px !important;
    margin-bottom: 24px !important;
}

/* Two column container - use grid to avoid flex text-node issues */
.account-login .col2-set {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
}
.account-login .col2-set .col-1,
.account-login .col2-set .col-2 {
    flex: none !important;
    float: none !important;
    width: 100% !important;
    background: #ffffff !important;
    border: 1px solid var(--hm-grey-200, #e4e1d6) !important;
    border-radius: 14px !important;
    padding: 48px 56px !important;
    box-shadow: 0 4px 16px rgba(36, 61, 119, 0.06) !important;
    box-sizing: border-box !important;
}
/* Use grid order for col positioning */
.account-login .col-1 { grid-column: 1 !important; grid-row: 1 !important; }
.account-login .col-2 { grid-column: 2 !important; grid-row: 1 !important; }

/* Section headings inside the cards */
.account-login h2,
.customer-account-create h2,
.account-login .col-1 h2,
.account-login .col-2 h2 {
    color: var(--hm-blue, #243d77) !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
    border-bottom: 0 !important;
}
.account-login .col-1 > p,
.account-login .col-2 > p {
    color: rgba(29, 29, 27, 0.7) !important;
    font-size: 14px !important;
    margin: 0 0 24px 0 !important;
    font-family: 'Outfit', sans-serif !important;
}

/* Form labels */
.account-login label,
.customer-account-create label {
    color: var(--hm-blue, #243d77) !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 0 0 6px 0 !important;
    display: block !important;
}
.account-login label em,
.customer-account-create label em {
    color: var(--hm-yellow, #fbba00) !important;
    font-style: normal !important;
}

/* Form inputs */
.account-login input.input-text,
.customer-account-create input.input-text,
.customer-account-forgotpassword input.input-text {
    background: #ffffff !important;
    border: 1px solid var(--hm-grey-200, #e4e1d6) !important;
    border-radius: 10px !important;
    height: 44px !important;
    padding: 0 16px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
    color: var(--hm-blue, #243d77) !important;
    box-shadow: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
    -webkit-text-fill-color: var(--hm-blue, #243d77) !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
.account-login input.input-text:focus,
.customer-account-create input.input-text:focus,
.customer-account-forgotpassword input.input-text:focus {
    outline: none !important;
    border-color: var(--hm-yellow, #fbba00) !important;
    box-shadow: 0 0 0 3px rgba(251, 186, 0, 0.15) !important;
}

/* Form rows */
.account-login .form-list li,
.customer-account-create .form-list li {
    margin-bottom: 16px !important;
    list-style: none !important;
}
.account-login .form-list .input-box,
.customer-account-create .form-list .input-box {
    margin-top: 0 !important;
    width: 100% !important;
}

/* Required field hint text */
.account-login p.required,
.customer-account-create p.required {
    color: rgba(29, 29, 27, 0.5) !important;
    font-size: 12px !important;
    margin: 8px 0 16px !important;
}
.account-login p.required::first-letter,
.customer-account-create p.required::first-letter {
    color: var(--hm-yellow, #fbba00) !important;
    font-weight: 700 !important;
    font-size: 14px !important;
}
.account-login p.required em,
.customer-account-create p.required em,
.account-login label em,
.customer-account-create label em {
    color: var(--hm-yellow, #fbba00) !important;
    font-style: normal !important;
}

/* All buttons in this page: HM blue, 10px radius, Outfit font */
.account-login button.button,
.account-login a.button,
.customer-account-create button.button,
.customer-account-create a.button,
.customer-account-forgotpassword button.button {
    background: var(--hm-blue, #243d77) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 10px !important;
    height: 48px !important;
    min-height: 48px !important;
    line-height: 48px !important;
    padding: 0 32px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    cursor: pointer !important;
    transition: background 0.15s ease, transform 0.1s ease !important;
    text-decoration: none !important;
    display: inline-block !important;
    text-align: center !important;
}
.account-login button.button:hover,
.account-login a.button:hover,
.customer-account-create button.button:hover,
.customer-account-create a.button:hover {
    background: #1a2d5a !important;
    transform: translateY(-1px) !important;
}
.account-login button.button span,
.account-login a.button span,
.customer-account-create button.button span {
    background: none !important;
    padding: 0 !important;
    color: inherit !important;
    font: inherit !important;
}

/* Forgot password link */
.account-login a.f-left,
.account-login .form-list a {
    color: var(--hm-blue, #243d77) !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 13px !important;
    text-decoration: underline !important;
}
.account-login a.f-left:hover,
.account-login .form-list a:hover {
    color: var(--hm-yellow-dark, #d99f00) !important;
}

/* Buttons-set wrapper - clean it up */
.account-login .buttons-set,
.customer-account-create .buttons-set {
    margin-top: 24px !important;
    padding: 0 !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
}
.account-login .col-2 .buttons-set {
    margin-top: 32px !important;
    justify-content: flex-start !important;
}

/* List bullets in 'voordelen' section */
.account-login .col-2 ul,
.account-login .col-2 ol {
    padding-left: 20px !important;
    margin: 8px 0 16px !important;
}
.account-login .col-2 li,
.account-login .col-2 ol li {
    color: rgba(29, 29, 27, 0.85) !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    padding: 4px 0 !important;
}

/* (replaced by grid-column above) */

/* Login: remove the legacy form scaffold border around the whole section */
.account-login form.scaffold-form,
.customer-account-create form.scaffold-form {
    border: none !important;
    padding: 0 !important;
    background: none !important;
}

/* Benefits list: yellow bullet markers */
.account-login .col-2 ul.benefits {
    list-style: none !important;
    padding-left: 0 !important;
    margin: 8px 0 16px !important;
}
.account-login .col-2 ul.benefits li {
    position: relative !important;
    padding: 4px 0 4px 22px !important;
    list-style: none !important;
}
.account-login .col-2 ul.benefits li::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 13px !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: var(--hm-yellow, #fbba00) !important;
}

/* Numbered list: HM blue numbers */
.account-login .col-2 ol.benefits {
    list-style: none !important;
    counter-reset: hm-counter !important;
    padding-left: 0 !important;
    margin: 8px 0 16px !important;
}
.account-login .col-2 ol.benefits li {
    counter-increment: hm-counter !important;
    position: relative !important;
    padding: 6px 0 6px 32px !important;
    list-style: none !important;
}
.account-login .col-2 ol.benefits li::before {
    content: counter(hm-counter) !important;
    position: absolute !important;
    left: 0 !important;
    top: 6px !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    background: var(--hm-blue, #243d77) !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-align: center !important;
    line-height: 22px !important;
    font-family: 'Outfit', sans-serif !important;
}

/* Login: kill legacy padding on .content fieldset wrappers in BOTH cols */
.account-login .content,
.account-login .content.fieldset,
.customer-account-create .content,
.customer-account-create .content.fieldset {
    padding: 0 !important;
}
.account-login p.required,
.customer-account-create p.required {
    padding: 0 !important;
}

/* Kill legacy '-' dash ::after on benefits li */
.account-login .col-2 ul.benefits li::after,
.account-login .new-users ul.benefits li::after {
    content: none !important;
    display: none !important;
}

/* ============================================================
   Drijfhout - newsletter bar (generic - works on all pages)
   Same styling as the home page newsletter bar.
   ============================================================ */
.header-newsletter, .footer-newsletter {
    background: transparent !important;
    padding: 24px 0 0 !important;
}
.header-newsletter, .footer-newsletter > .block.block-subscribe,
body:not(.cms-home) .block.block-subscribe:not(.footer .block-subscribe) {
    width: 100% !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    background: linear-gradient(135deg, var(--hm-blue, #243d77) 0%, #1a2d5a 100%) !important;
    background-color: var(--hm-blue, #243d77) !important;
    border-radius: 14px !important;
    padding: 18px 32px !important;
    box-shadow: 0 4px 16px rgba(36, 61, 119, 0.12) !important;
    display: flex !important;
    align-items: center !important;
    gap: 24px !important;
    overflow: hidden !important;
    position: relative !important;
    box-sizing: border-box !important;
}
.header-newsletter, .footer-newsletter .block.block-subscribe .block-title {
    background: none !important;
    padding: 0 0 0 56px !important;
    margin: 0 !important;
    border: none !important;
    flex: 0 0 auto !important;
    color: #ffffff !important;
    position: relative !important;
}
.header-newsletter, .footer-newsletter .block.block-subscribe .block-title::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: var(--hm-yellow, #fbba00) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23243d77' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'/></svg>") no-repeat center center !important;
    background-size: 20px 20px !important;
}
.header-newsletter, .footer-newsletter .block.block-subscribe .block-title h3,
.header-newsletter, .footer-newsletter .block.block-subscribe .block-title h4 {
    color: #ffffff !important;
    font-family: 'Outfit', sans-serif !important;
    margin: 0 !important;
    padding: 0 !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    width: auto !important;
    background: none !important;
    border: none !important;
}
.header-newsletter, .footer-newsletter .block.block-subscribe .block-title h3 {
    font-size: 18px !important;
    margin-bottom: 2px !important;
}
.header-newsletter, .footer-newsletter .block.block-subscribe .block-title h4 {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: rgba(255,255,255,0.85) !important;
}
.header-newsletter, .footer-newsletter .block.block-subscribe form {
    flex: 1 1 auto !important;
    margin: 0 !important;
    background: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    position: relative !important;
    float: none !important;
}
.header-newsletter, .footer-newsletter .block.block-subscribe form::after {
    content: '5% korting' !important;
    background: var(--hm-yellow, #fbba00) !important;
    color: var(--hm-blue, #243d77) !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    padding: 6px 14px !important;
    border-radius: 14px !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    flex: 0 0 auto !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15) !important;
    background-image: none !important;
}
.header-newsletter, .footer-newsletter .block.block-subscribe .block-content,
.header-newsletter, .footer-newsletter .block.block-subscribe .input-box {
    flex: 1 1 auto !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    display: flex !important;
    gap: 0 !important;
    position: relative !important;
}
.header-newsletter, .footer-newsletter .block.block-subscribe input.input-text,
.header-newsletter, .footer-newsletter .block.block-subscribe input#newsletter-home,
.header-newsletter, .footer-newsletter .block.block-subscribe input#newsletter {
    flex: 1 1 auto !important;
    height: 44px !important;
    padding: 0 20px !important;
    border: none !important;
    border-radius: 10px 0 0 10px !important;
    background: #ffffff !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
    font-style: normal !important;
    color: var(--hm-blue, #243d77) !important;
    box-shadow: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    position: relative !important;
}
.header-newsletter, .footer-newsletter .block.block-subscribe button.button {
    flex: 0 0 auto !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    line-height: 44px !important;
    padding: 0 28px !important;
    border: none !important;
    border-radius: 0 10px 10px 0 !important;
    background: var(--hm-yellow, #fbba00) !important;
    color: var(--hm-blue, #243d77) !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    cursor: pointer !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    position: relative !important;
    top: auto !important;
    right: auto !important;
}
.header-newsletter, .footer-newsletter .block.block-subscribe button.button:hover {
    background: var(--hm-yellow-dark, #d99f00) !important;
}
.header-newsletter, .footer-newsletter .block.block-subscribe button.button span {
    background: none !important;
    padding: 0 !important;
    color: inherit !important;
    font: inherit !important;
}
.header-newsletter, .footer-newsletter .block.block-subscribe form-subscribe-header,
.header-newsletter, .footer-newsletter .block.block-subscribe .form-subscribe-header {
    display: none !important;
}

/* ============================================================
   Drijfhout - cart page in HM brand style
   ============================================================ */

/* Page title */
.checkout-cart-index .page-title h1,
.checkout-cart-index .page-title h2 {
    color: var(--hm-blue, #243d77) !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 600 !important;
    font-size: 28px !important;
    margin-bottom: 24px !important;
}

/* Empty cart message as a card */
.cart-empty {
    background: #ffffff !important;
    border: 1px solid var(--hm-grey-200, #e4e1d6) !important;
    border-radius: 14px !important;
    padding: 48px 56px !important;
    box-shadow: 0 4px 16px rgba(36, 61, 119, 0.06) !important;
    margin-top: 16px !important;
}
.cart-empty p {
    color: rgba(29, 29, 27, 0.85) !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 15px !important;
    margin: 0 0 12px 0 !important;
    line-height: 1.6 !important;
}
.cart-empty a {
    color: var(--hm-blue, #243d77) !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    text-decoration: underline !important;
}
.cart-empty a:hover {
    color: var(--hm-yellow-dark, #d99f00) !important;
}

/* Cart with items: grid layout
   Row 1: page-title spans full width
   Row 2: cart table + forms on left, totals on right
*/
.checkout-cart-index .col-main > .cart.display-single-price {
    display: grid !important;
    grid-template-columns: 1fr 360px !important;
    grid-template-rows: auto auto auto !important;
    gap: 16px 24px !important;
    margin-top: 16px !important;
    align-items: start !important;
}
.checkout-cart-index .col-main > .cart > .page-title {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-width: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    margin: 0 !important;
}
.checkout-cart-index .col-main > .cart > form {
    grid-column: 1 !important;
    grid-row: 2 !important;
    background: #ffffff !important;
    border: 1px solid var(--hm-grey-200, #e4e1d6) !important;
    border-radius: 14px !important;
    padding: 24px 32px !important;
    box-shadow: 0 4px 16px rgba(36, 61, 119, 0.06) !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}
.checkout-cart-index .col-main > .cart > .cart-forms {
    grid-column: 1 !important;
    grid-row: 3 !important;
    background: #ffffff !important;
    border: 1px solid var(--hm-grey-200, #e4e1d6) !important;
    border-radius: 14px !important;
    padding: 24px 32px !important;
    box-shadow: 0 4px 16px rgba(36, 61, 119, 0.06) !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    width: 100% !important;
}
.checkout-cart-index .col-main > .cart > .cart-totals-wrapper {
    grid-column: 2 !important;
    grid-row: 2 / span 2 !important;
    margin: 0 !important;
    width: 100% !important;
}
.checkout-cart-index .col-main > .cart > .cart-totals-wrapper .cart-totals {
    background: #ffffff !important;
    border: 1px solid var(--hm-grey-200, #e4e1d6) !important;
    border-radius: 14px !important;
    padding: 24px 32px !important;
    box-shadow: 0 4px 16px rgba(36, 61, 119, 0.06) !important;
    box-sizing: border-box !important;
    width: 100% !important;
}
.checkout-cart-index .cart-table-wrapper,
.checkout-cart-index .cart .cart-form,
.checkout-cart-index .cart > form {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    background: #ffffff !important;
    border: 1px solid var(--hm-grey-200, #e4e1d6) !important;
    border-radius: 14px !important;
    padding: 32px 40px !important;
    box-shadow: 0 4px 16px rgba(36, 61, 119, 0.06) !important;
    box-sizing: border-box !important;
}
.checkout-cart-index .cart-totals,
.checkout-cart-index .cart .totals {
    flex: 0 0 360px !important;
    background: #ffffff !important;
    border: 1px solid var(--hm-grey-200, #e4e1d6) !important;
    border-radius: 14px !important;
    padding: 32px 40px !important;
    box-shadow: 0 4px 16px rgba(36, 61, 119, 0.06) !important;
    box-sizing: border-box !important;
}

/* Cart table styling */
.checkout-cart-index .cart-table {
    width: 100% !important;
    border-collapse: collapse !important;
    font-family: 'Outfit', sans-serif !important;
}
.checkout-cart-index .cart-table th {
    color: var(--hm-blue, #243d77) !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 12px 8px !important;
    border-bottom: 2px solid var(--hm-yellow, #fbba00) !important;
    text-align: left !important;
    background: none !important;
}
.checkout-cart-index .cart-table td {
    padding: 16px 8px !important;
    border-bottom: 1px solid var(--hm-grey-200, #e4e1d6) !important;
    color: rgba(29, 29, 27, 0.85) !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
}
.checkout-cart-index .cart-table .product-name a {
    color: var(--hm-blue, #243d77) !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}
.checkout-cart-index .cart-table .product-name a:hover {
    color: var(--hm-yellow-dark, #d99f00) !important;
}
.checkout-cart-index .cart-table input.qty {
    width: 60px !important;
    height: 40px !important;
    border: 1px solid var(--hm-grey-200, #e4e1d6) !important;
    border-radius: 8px !important;
    text-align: center !important;
    font-family: 'Outfit', sans-serif !important;
    color: var(--hm-blue, #243d77) !important;
}

/* Buttons inside cart (scoped to avoid hitting header search button) */
.checkout-cart-index .cart button.button,
.checkout-cart-index .cart a.button,
.checkout-cart-index .cart-empty button.button,
.checkout-cart-index .cart-empty a.button,
.checkout-cart-index .checkout-types button.button,
.checkout-cart-index .totals button.button {
    background: var(--hm-blue, #243d77) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 10px !important;
    height: 44px !important;
    min-height: 44px !important;
    line-height: 44px !important;
    padding: 0 24px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    cursor: pointer !important;
    text-decoration: none !important;
    display: inline-block !important;
}
.checkout-cart-index .cart button.button:hover,
.checkout-cart-index .cart a.button:hover,
.checkout-cart-index .cart-empty a.button:hover,
.checkout-cart-index .checkout-types button.button:hover,
.checkout-cart-index .totals button.button:hover {
    background: #1a2d5a !important;
}
.checkout-cart-index .cart button.button span,
.checkout-cart-index .cart a.button span,
.checkout-cart-index .cart-empty a.button span,
.checkout-cart-index .checkout-types button.button span,
.checkout-cart-index .totals button.button span {
    background: none !important;
    padding: 0 !important;
    color: inherit !important;
    font: inherit !important;
}
/* Yellow primary action: 'Naar afrekenen' / checkout button */
.checkout-cart-index button[name*='checkout'],
.checkout-cart-index .checkout-types button.button,
.checkout-cart-index button.btn-checkout {
    background: var(--hm-yellow, #fbba00) !important;
    color: var(--hm-blue, #243d77) !important;
}
.checkout-cart-index button[name*='checkout']:hover,
.checkout-cart-index .checkout-types button.button:hover,
.checkout-cart-index button.btn-checkout:hover {
    background: var(--hm-yellow-dark, #d99f00) !important;
}

/* Totals styling */
.checkout-cart-index .cart-totals h3,
.checkout-cart-index .totals h3 {
    color: var(--hm-blue, #243d77) !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    margin: 0 0 16px !important;
}
.checkout-cart-index .cart-totals table,
.checkout-cart-index .totals table {
    width: 100% !important;
    font-family: 'Outfit', sans-serif !important;
}
.checkout-cart-index .cart-totals td,
.checkout-cart-index .totals td {
    padding: 8px 0 !important;
    color: rgba(29, 29, 27, 0.85) !important;
    font-size: 14px !important;
}
.checkout-cart-index .cart-totals tr.grand_total td,
.checkout-cart-index .totals tr.grand_total td,
.checkout-cart-index tr.grand-total td {
    color: var(--hm-blue, #243d77) !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    border-top: 2px solid var(--hm-yellow, #fbba00) !important;
    padding-top: 12px !important;
}

/* Cart page header: ensure cards are same height as on other pages */
.links-cart .links > ul {
    align-items: flex-start !important;
    height: 70px !important;
}
.links-cart .links > ul > li {
    height: 70px !important;
    max-height: 70px !important;
}
.links-cart .links > ul > li > a {
    height: 70px !important;
    max-height: 70px !important;
    box-sizing: border-box !important;
}

/* Cart card: kill legacy 16px margin-top */
.links-cart .links > ul > li.cart {
    margin-top: 0 !important;
}

/* ============================================================
   Drijfhout - cart page v2: modernize items + totals
   ============================================================ */

/* Hide top Ga door naar afrekenen button (keep only the one in totals) */
.checkout-cart-index .col-main > .cart > .page-title .checkout-types.top,
.checkout-cart-index .col-main > .cart > .page-title ul.checkout-types {
    display: none !important;
}

/* Cart table: remove all legacy borders, modern clean look */
.checkout-cart-index .cart-table {
    border: none !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100% !important;
    background: transparent !important;
}
.checkout-cart-index .cart-table thead,
.checkout-cart-index .cart-table tbody,
.checkout-cart-index .cart-table tr {
    border: none !important;
    background: transparent !important;
}

/* Table headers */
.checkout-cart-index .cart-table thead th {
    color: var(--hm-blue, #243d77) !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    padding: 0 8px 12px !important;
    text-align: left !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid var(--hm-yellow, #fbba00) !important;
}
.checkout-cart-index .cart-table thead th.a-center {
    text-align: center !important;
}
.checkout-cart-index .cart-table thead th.a-right {
    text-align: right !important;
}
/* Aantal header: align left to match the qty stepper below
   Aantal is the 4th th (after image, info, prijs) */
.checkout-cart-index .cart-table thead th:nth-child(4) {
    text-align: left !important;
}

/* Rows with subtle separator */
.checkout-cart-index .cart-table tbody tr td {
    padding: 20px 8px !important;
    border: none !important;
    border-bottom: 1px solid var(--hm-grey-200, #e4e1d6) !important;
    color: rgba(29, 29, 27, 0.85) !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
    vertical-align: middle !important;
    background: transparent !important;
}
.checkout-cart-index .cart-table tbody tr:last-child td {
    border-bottom: none !important;
}

/* Product image column */
.checkout-cart-index .cart-table td:first-child {
    width: 120px !important;
    padding-left: 0 !important;
}
.checkout-cart-index .cart-table .product-image {
    display: block !important;
    width: 100px !important;
    height: 100px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background: var(--hm-grey-100, #f0ede4) !important;
}
.checkout-cart-index .cart-table .product-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    padding: 8px !important;
    box-sizing: border-box !important;
}

/* Product name and details */
.checkout-cart-index .cart-table .product-name a,
.checkout-cart-index .cart-table h2.product-name a,
.checkout-cart-index .cart-table .product-cart-info a {
    color: var(--hm-blue, #243d77) !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    text-decoration: none !important;
    line-height: 1.4 !important;
    display: inline-block !important;
    margin-bottom: 4px !important;
}
.checkout-cart-index .cart-table .product-name a:hover {
    color: var(--hm-yellow-dark, #d99f00) !important;
}
.checkout-cart-index .cart-table .sku,
.checkout-cart-index .cart-table .product-cart-sku,
.checkout-cart-index .cart-table .item-options,
.checkout-cart-index .cart-table .cart-item-description {
    font-size: 12px !important;
    color: rgba(29, 29, 27, 0.55) !important;
    line-height: 1.5 !important;
    margin-top: 2px !important;
}

/* Price cells - clean Outfit */
.checkout-cart-index .cart-table .price,
.checkout-cart-index .cart-table td.a-right span.price {
    color: var(--hm-blue, #243d77) !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    font-family: 'Outfit', sans-serif !important;
    white-space: nowrap !important;
}

/* Qty input */
.checkout-cart-index .cart-table input.qty,
.checkout-cart-index .cart-table input.input-text.qty {
    width: 56px !important;
    height: 38px !important;
    border: 1px solid var(--hm-grey-200, #e4e1d6) !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    text-align: center !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--hm-blue, #243d77) !important;
    padding: 0 !important;
}
.checkout-cart-index .cart-table input.qty:focus {
    outline: none !important;
    border-color: var(--hm-yellow, #fbba00) !important;
    box-shadow: 0 0 0 3px rgba(251, 186, 0, 0.15) !important;
}

/* Update / Bijwerken small button */
/* Hide BIJWERKEN button - replaced by qty stepper */
.checkout-cart-index .cart-table .btn-update,
.checkout-cart-index .cart-table button.btn-update {
    display: none !important;
}

/* Qty stepper - modern number input with up/down arrows */
.checkout-cart-index .cart-table .qty-stepper {
    display: inline-flex !important;
    align-items: stretch !important;
    border: 1px solid var(--hm-grey-200, #e4e1d6) !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    overflow: hidden !important;
    height: 44px !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
.checkout-cart-index .cart-table .qty-stepper:focus-within {
    border-color: var(--hm-yellow, #fbba00) !important;
    box-shadow: 0 0 0 3px rgba(251, 186, 0, 0.15) !important;
}
.checkout-cart-index .cart-table .qty-stepper input.qty {
    width: 48px !important;
    height: 42px !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    text-align: center !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--hm-blue, #243d77) !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    appearance: textfield !important;
    -moz-appearance: textfield !important;
}
.checkout-cart-index .cart-table .qty-stepper input.qty:focus {
    outline: none !important;
    box-shadow: none !important;
}
.checkout-cart-index .cart-table .qty-stepper input.qty::-webkit-outer-spin-button,
.checkout-cart-index .cart-table .qty-stepper input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}
.checkout-cart-index .cart-table .qty-stepper-buttons {
    display: flex !important;
    flex-direction: column !important;
    border-left: 1px solid var(--hm-grey-200, #e4e1d6) !important;
}
.checkout-cart-index .cart-table .qty-stepper-btn {
    width: 26px !important;
    height: 21px !important;
    border: none !important;
    background: var(--hm-grey-100, #f0ede4) !important;
    color: var(--hm-blue, #243d77) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    transition: background 0.12s ease, color 0.12s ease !important;
    line-height: 0 !important;
    min-height: 0 !important;
}
.checkout-cart-index .cart-table .qty-stepper-btn + .qty-stepper-btn {
    border-top: 1px solid var(--hm-grey-200, #e4e1d6) !important;
}
.checkout-cart-index .cart-table .qty-stepper-btn:hover {
    background: var(--hm-yellow, #fbba00) !important;
    color: var(--hm-blue, #243d77) !important;
}
.checkout-cart-index .cart-table .qty-stepper-btn svg {
    pointer-events: none !important;
}
.checkout-cart-index .cart-table a.btn-remove,
.checkout-cart-index .cart-table a.btn-edit {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    border: 1px solid var(--hm-grey-200, #e4e1d6) !important;
    border-radius: 50% !important;
    color: rgba(29, 29, 27, 0.55) !important;
    text-decoration: none !important;
    background: #ffffff !important;
    transition: all 0.15s ease !important;
}
.checkout-cart-index .cart-table a.btn-remove:hover,
.checkout-cart-index .cart-table a.btn-edit:hover {
    border-color: var(--hm-blue, #243d77) !important;
    color: var(--hm-blue, #243d77) !important;
}

/* ==== TOTALS BOX - modern clean ==== */
.checkout-cart-index .cart-totals {
    background: #ffffff !important;
}
.checkout-cart-index .cart-totals table {
    width: 100% !important;
    border: none !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    margin-bottom: 20px !important;
}
.checkout-cart-index .cart-totals table td {
    border: none !important;
    padding: 10px 0 !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
    color: rgba(29, 29, 27, 0.85) !important;
    vertical-align: middle !important;
    background: transparent !important;
}
.checkout-cart-index .cart-totals table td:first-child {
    text-align: left !important;
    padding-right: 12px !important;
}
.checkout-cart-index .cart-totals table td:last-child {
    text-align: right !important;
    font-weight: 600 !important;
    color: var(--hm-blue, #243d77) !important;
    white-space: nowrap !important;
}
.checkout-cart-index .cart-totals table tr + tr td {
    border-top: 1px solid var(--hm-grey-100, #f0ede4) !important;
}
.checkout-cart-index .cart-totals table tr.grand_total td,
.checkout-cart-index .cart-totals table tr.grand-total td {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--hm-blue, #243d77) !important;
    padding-top: 16px !important;
    border-top: 2px solid var(--hm-yellow, #fbba00) !important;
}
.checkout-cart-index .cart-totals table tr.grand_total td strong,
.checkout-cart-index .cart-totals table tr.grand-total td strong {
    font-weight: 700 !important;
    color: var(--hm-blue, #243d77) !important;
}

/* Bottom checkout button: sits directly below the totals card, full
   width of the card. The JS in footer.phtml moves .checkout-types.bottom
   out of .cart-totals so it's a sibling of the card. */
.checkout-cart-index .cart-totals-wrapper > .checkout-types.bottom,
.checkout-cart-index .cart-totals .checkout-types.bottom {
    list-style: none !important;
    padding: 0 !important;
    margin: 12px 0 0 0 !important;
    width: 100% !important;
    float: none !important;
}
.checkout-cart-index .cart-totals-wrapper > .checkout-types.bottom li,
.checkout-cart-index .cart-totals .checkout-types.bottom li {
    list-style: none !important;
    margin: 0 !important;
    float: none !important;
}
.checkout-cart-index .cart-totals-wrapper > .checkout-types.bottom button.button,
.checkout-cart-index .cart-totals .checkout-types.bottom button.button {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    background: var(--hm-yellow, #fbba00) !important;
    color: var(--hm-blue, #243d77) !important;
    border: none !important;
    border-radius: 14px !important;
    height: 56px !important;
    min-height: 56px !important;
    line-height: 56px !important;
    padding: 0 !important;
    margin: 0 !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    cursor: pointer !important;
    float: none !important;
    box-shadow: 0 4px 16px rgba(36, 61, 119, 0.06) !important;
}
.checkout-cart-index .cart-totals-wrapper > .checkout-types.bottom button.button:hover,
.checkout-cart-index .cart-totals .checkout-types.bottom button.button:hover {
    background: var(--hm-yellow-dark, #d99f00) !important;
}

/* Page title: no extra actions after removing top checkout */
.checkout-cart-index .col-main > .cart > .page-title {
    display: block !important;
    margin-bottom: 8px !important;
}

/* Kortingscode card */
.checkout-cart-index .cart-forms .discount h2,
.checkout-cart-index .cart-forms h2 {
    color: var(--hm-blue, #243d77) !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    margin: 0 0 14px !important;
    padding: 0 0 10px !important;
    border-bottom: 2px solid var(--hm-yellow, #fbba00) !important;
    display: inline-block !important;
}
.checkout-cart-index .cart-forms input.input-text {
    height: 44px !important;
    padding: 0 16px !important;
    border: 1px solid var(--hm-grey-200, #e4e1d6) !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
    color: var(--hm-blue, #243d77) !important;
    box-sizing: border-box !important;
    max-width: 360px !important;
}
.checkout-cart-index .cart-forms input.input-text:focus {
    outline: none !important;
    border-color: var(--hm-yellow, #fbba00) !important;
    box-shadow: 0 0 0 3px rgba(251, 186, 0, 0.15) !important;
}
.checkout-cart-index .cart-forms button,
.checkout-cart-index .cart-forms button.button,
.checkout-cart-index .cart-forms button.button2,
.checkout-cart-index .cart-forms .discount button,
.checkout-cart-index .cart-forms .discount button.button2 {
    background: #243d77 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 10px !important;
    height: 44px !important;
    min-height: 44px !important;
    line-height: 44px !important;
    padding: 0 28px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    cursor: pointer !important;
    margin-left: 8px !important;
    vertical-align: middle !important;
    box-shadow: none !important;
    display: inline-block !important;
}
.checkout-cart-index .cart-forms button:hover,
.checkout-cart-index .cart-forms button.button:hover,
.checkout-cart-index .cart-forms button.button2:hover {
    background: #1a2d5a !important;
    color: #ffffff !important;
}
.checkout-cart-index .cart-forms button span,
.checkout-cart-index .cart-forms button.button2 span {
    background: none !important;
    padding: 0 !important;
    color: inherit !important;
    font: inherit !important;
}

/* Make the discount-form a horizontal flex row with input + button side by side */
.checkout-cart-index .cart-forms .discount-form {
    display: block !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}
.checkout-cart-index .cart-forms .discount-form label {
    display: none !important;
}
.checkout-cart-index .cart-forms .field-wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
    max-width: 520px !important;
}
.checkout-cart-index .cart-forms .field-wrapper input.input-text {
    flex: 1 1 auto !important;
    max-width: none !important;
    margin: 0 !important;
}
.checkout-cart-index .cart-forms .field-wrapper .button-wrapper,
.checkout-cart-index .cart-forms .field-wrapper .buttons-set {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    width: auto !important;
}
.checkout-cart-index .cart-forms .field-wrapper button.button2 {
    margin-left: 0 !important;
}

/* ============================================================
   Drijfhout - cart page v3: bijwerken button solid + trash icon
   ============================================================ */

/* Bijwerken button - solid HM blue (was too subtle ghost) */
.checkout-cart-index .cart-table .btn-update,
.checkout-cart-index .cart-table button.btn-update,
.checkout-cart-index .cart-table button.button.btn-update {
    background: var(--hm-blue, #243d77) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 0 16px !important;
    height: 38px !important;
    min-height: 38px !important;
    line-height: 38px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-left: 6px !important;
    cursor: pointer !important;
    font-family: 'Outfit', sans-serif !important;
}
.checkout-cart-index .cart-table .btn-update:hover,
.checkout-cart-index .cart-table button.btn-update:hover {
    background: #1a2d5a !important;
    color: #ffffff !important;
    border: none !important;
}

/* Hide the duplicate remove link inside product-cart-info and the Wijzigen link in product-cart-image */
.checkout-cart-index .cart-table td.product-cart-info a.btn-remove,
.checkout-cart-index .cart-table td.product-cart-info a.btn-remove2,
.checkout-cart-index .cart-table td.product-cart-image a.btn-edit,
.checkout-cart-index .cart-table td.product-cart-image a:not(.product-image) {
    display: none !important;
}

/* Hide the text-only Wijzigen link list under quantity (redundant with BIJWERKEN button) */
.checkout-cart-index .cart-table td.product-cart-actions ul.cart-links,
.checkout-cart-index .cart-table td.product-cart-actions .cart-links {
    display: none !important;
}

/* Artikel verwijderen: hide text, show trash SVG icon */
.checkout-cart-index .cart-table a.btn-remove,
.checkout-cart-index .cart-table a.btn-remove2 {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    border: 1px solid var(--hm-grey-200, #e4e1d6) !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    text-decoration: none !important;
    font-size: 0 !important;
    color: transparent !important;
    overflow: hidden !important;
    position: relative !important;
    transition: all 0.15s ease !important;
}
.checkout-cart-index .cart-table a.btn-remove::before,
.checkout-cart-index .cart-table a.btn-remove2::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23243d77' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='3 6 5 6 21 6'/><path d='M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6'/><path d='M10 11v6'/><path d='M14 11v6'/><path d='M9 6V4a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 18px 18px !important;
}
.checkout-cart-index .cart-table a.btn-remove:hover,
.checkout-cart-index .cart-table a.btn-remove2:hover {
    border-color: var(--hm-yellow, #fbba00) !important;
    background: var(--hm-yellow, #fbba00) !important;
}

/* Wijzigen link: subtle text link */
.checkout-cart-index .cart-table td a:not(.btn-remove):not(.btn-remove2):not(.product-image):not(.product-name) {
    color: rgba(29, 29, 27, 0.55) !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    text-decoration: none !important;
    display: inline-block !important;
}
.checkout-cart-index .cart-table td a:not(.btn-remove):not(.btn-remove2):not(.product-image):not(.product-name):hover {
    color: var(--hm-blue, #243d77) !important;
}
.checkout-cart-index .cart-table .product-name a {
    font-size: 15px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

/* ============================================================
   Drijfhout - customer account pages in HM brand style
   ============================================================ */

/* Remove the wrapping box border on .my-account (extra specificity) */
.customer-account .main-container .my-account,
[class*="customer-account"] .main-container .my-account,
body .my-account {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
}

/* Display price cents inline (not as superscript) for cleaner readable look */
[class*="customer-account"] .price sup,
[class*="customer-account"] span.price sup,
[class*="customer-account"] .data-table .price sup {
    font-size: inherit !important;
    vertical-align: baseline !important;
    line-height: inherit !important;
    top: 0 !important;
    position: static !important;
    font-weight: inherit !important;
}
[class*="customer-account"] .price sup::before {
    content: ',' !important;
}

/* Page title */
.customer-account .page-title h1,
.customer-account-index .page-title h1,
[class*="customer-account"] .page-title h1 {
    color: var(--hm-blue, #243d77) !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 600 !important;
    font-size: 28px !important;
    margin-bottom: 24px !important;
}

/* Layout: 2 columns with sidebar + main */
.customer-account .main-container .col-main,
[class*="customer-account"] .main-container .col-main {
    background: #ffffff !important;
    border: 1px solid var(--hm-grey-200, #e4e1d6) !important;
    border-radius: 14px !important;
    padding: 36px 40px !important;
    box-shadow: 0 4px 16px rgba(36, 61, 119, 0.06) !important;
    box-sizing: border-box !important;
}

/* Login / forgot password pages: no outer col-main card (the 2 inner
   cards already provide the visual structure). Flat layout instead. */
.customer-account-login .main-container .col-main,
.customer-account-forgotpassword .main-container .col-main,
.customer-account-create .main-container .col-main {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}

/* Main menu B active item: no grey background, let the yellow underline
   indicate active state (matches main-menu-a behavior) */
.main-menu-b li a:hover,
.main-menu-b li.active a,
.main-menu-b li a.active {
    background: transparent !important;
    background-color: transparent !important;
}

/* Sidebar - Mijn Account block */
[class*="customer-account"] .col-left .block-account {
    background: #ffffff !important;
    border: 1px solid var(--hm-grey-200, #e4e1d6) !important;
    border-radius: 14px !important;
    padding: 12px !important;
    box-shadow: 0 4px 16px rgba(36, 61, 119, 0.06) !important;
    box-sizing: border-box !important;
    width: auto !important;
}

[class*="customer-account"] .block-account .block-title {
    background: none !important;
    border: none !important;
    padding: 12px 16px 14px !important;
    margin: 0 0 6px !important;
    border-bottom: 1px solid var(--hm-grey-100, #f0ede4) !important;
    display: block !important;
}
[class*="customer-account"] .block-account .block-title strong {
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    font-weight: 0 !important;
}
[class*="customer-account"] .block-account .block-title strong span {
    color: var(--hm-blue, #243d77) !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
}

[class*="customer-account"] .block-account .block-content {
    padding: 0 !important;
    background: none !important;
    border: none !important;
}
[class*="customer-account"] .block-account ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
}
[class*="customer-account"] .block-account ul li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    width: auto !important;
}
[class*="customer-account"] .block-account ul li a,
[class*="customer-account"] .block-account ul li strong {
    display: block !important;
    padding: 8px 16px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: rgba(29, 29, 27, 0.85) !important;
    text-decoration: none !important;
    text-transform: none !important;
    border-radius: 8px !important;
    margin: 1px 0 !important;
    transition: background 0.15s ease, color 0.15s ease !important;
    background: none !important;
    width: auto !important;
    box-sizing: border-box !important;
    line-height: 1.4 !important;
}
[class*="customer-account"] .block-account ul li a:hover {
    background: var(--hm-grey-100, #f0ede4) !important;
    color: var(--hm-blue, #243d77) !important;
}
[class*="customer-account"] .block-account ul li.current a,
[class*="customer-account"] .block-account ul li.current strong {
    background: var(--hm-blue, #243d77) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* ===== Dashboard content ===== */
[class*="customer-account"] .dashboard h1,
[class*="customer-account"] .dashboard .page-title h1 {
    color: var(--hm-blue, #243d77) !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 600 !important;
    font-size: 24px !important;
    margin: 0 0 16px !important;
}
[class*="customer-account"] .welcome-msg {
    margin: 0 0 32px !important;
    font-family: 'Outfit', sans-serif !important;
    color: rgba(29, 29, 27, 0.85) !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
}
[class*="customer-account"] .welcome-msg p {
    margin: 0 0 8px !important;
    font-family: 'Outfit', sans-serif !important;
}
[class*="customer-account"] .welcome-msg strong,
[class*="customer-account"] .welcome-msg p strong {
    color: var(--hm-blue, #243d77) !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    display: block !important;
    margin-bottom: 4px !important;
}

/* Section headers (h2) in dashboard */
[class*="customer-account"] .box-account h2,
[class*="customer-account"] .box-recent h2,
[class*="customer-account"] .box-account .box-head h2,
[class*="customer-account"] .box-recent .box-head h2 {
    color: var(--hm-blue, #243d77) !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    margin: 0 0 16px !important;
    padding: 0 0 10px !important;
    border-bottom: 2px solid var(--hm-yellow, #fbba00) !important;
    display: inline-block !important;
}
[class*="customer-account"] .box-recent .box-head {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    margin-bottom: 16px !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    font-size: 0 !important;
}
[class*="customer-account"] .box-recent .box-head > * {
    font-size: 14px !important;
}
[class*="customer-account"] .box-recent .box-head h2 {
    margin-bottom: 0 !important;
}
/* Bekijk alles styled as a small ghost button, right-aligned */
[class*="customer-account"] .box-recent .box-head a {
    color: var(--hm-blue, #243d77) !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border: 1px solid var(--hm-grey-200, #e4e1d6) !important;
    border-radius: 8px !important;
    padding: 8px 16px !important;
    margin-left: auto !important;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease !important;
    display: inline-block !important;
}
[class*="customer-account"] .box-recent .box-head a:hover {
    background: var(--hm-yellow, #fbba00) !important;
    color: var(--hm-blue, #243d77) !important;
    border-color: var(--hm-yellow, #fbba00) !important;
}

/* Box-account: dashboard items wrapper */
[class*="customer-account"] .box-account {
    margin-bottom: 32px !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
}

/* Recent orders table */
[class*="customer-account"] .box-recent {
    margin-bottom: 32px !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
}
[class*="customer-account"] .box-recent table,
[class*="customer-account"] .box-recent .data-table,
[class*="customer-account"] .col-main table.data-table,
[class*="customer-account"] .col-main .data-table,
.sales-order-history .col-main table,
.sales-order-history .col-main .data-table {
    width: 100% !important;
    border: none !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: transparent !important;
}
[class*="customer-account"] .box-recent table thead th,
[class*="customer-account"] .box-recent .data-table thead th,
[class*="customer-account"] .col-main .data-table thead th,
.sales-order-history .col-main table thead th,
.sales-order-history .col-main .data-table thead th {
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid var(--hm-yellow, #fbba00) !important;
    color: var(--hm-blue, #243d77) !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    padding: 10px 12px !important;
    text-align: left !important;
}
[class*="customer-account"] .box-recent table tbody td,
[class*="customer-account"] .box-recent .data-table tbody td,
[class*="customer-account"] .col-main .data-table tbody td,
.sales-order-history .col-main table tbody td,
.sales-order-history .col-main .data-table tbody td {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid var(--hm-grey-100, #f0ede4) !important;
    color: rgba(29, 29, 27, 0.85) !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
    padding: 14px 12px !important;
    vertical-align: middle !important;
}
[class*="customer-account"] .box-recent table tbody tr:last-child td,
[class*="customer-account"] .col-main .data-table tbody tr:last-child td,
.sales-order-history .col-main table tbody tr:last-child td {
    border-bottom: none !important;
}

/* Toolbar (artikel count, Toon dropdown, pagination) */
[class*="customer-account"] .col-main .toolbar,
[class*="customer-account"] .col-main .pager {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 0 16px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 13px !important;
    color: rgba(29, 29, 27, 0.7) !important;
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
}
[class*="customer-account"] .col-main .toolbar .amount,
[class*="customer-account"] .col-main .pager .amount {
    margin: 0 !important;
}
[class*="customer-account"] .col-main .toolbar .limiter {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 !important;
}
[class*="customer-account"] .col-main .toolbar .limiter label {
    font-size: 12px !important;
    color: rgba(29, 29, 27, 0.7) !important;
    font-family: 'Outfit', sans-serif !important;
    margin: 0 !important;
}
[class*="customer-account"] .col-main .toolbar .limiter select {
    background: #ffffff !important;
    border: 1px solid var(--hm-grey-200, #e4e1d6) !important;
    border-radius: 8px !important;
    height: 34px !important;
    padding: 0 8px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 13px !important;
    color: var(--hm-blue, #243d77) !important;
    cursor: pointer !important;
}
[class*="customer-account"] .col-main .pages,
[class*="customer-account"] .col-main .toolbar .pages {
    margin: 0 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* Address book: standaard adressen as cards */
.customer-address-index .col-main .col2-set,
[class*="customer-address"] .col-main .col2-set {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
    margin-top: 8px !important;
}
.customer-address-index .col-main .col2-set .col-1,
.customer-address-index .col-main .col2-set .col-2,
[class*="customer-address"] .col-main .col2-set .col-1,
[class*="customer-address"] .col-main .col2-set .col-2 {
    background: var(--hm-grey-100, #f0ede4) !important;
    border-radius: 12px !important;
    padding: 24px !important;
    border: none !important;
    box-shadow: none !important;
    width: auto !important;
    grid-row: 1 !important;
}
.customer-address-index .col-main .col2-set .col-1 { grid-column: 1 !important; }
.customer-address-index .col-main .col2-set .col-2 { grid-column: 2 !important; }
[class*="customer-address"] .col-main h2,
.customer-address-index .col-main h2,
[class*="customer-address"] .col-main h3,
.customer-address-index .col-main h3 {
    color: var(--hm-blue, #243d77) !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    border: none !important;
}
.customer-address-index .col-main address {
    font-style: normal !important;
    color: rgba(29, 29, 27, 0.85) !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin: 0 0 8px !important;
}
.customer-address-index .col-main .col2-set p {
    color: rgba(29, 29, 27, 0.85) !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin: 0 0 4px !important;
}
.customer-address-index .col-main .col2-set a {
    color: var(--hm-blue, #243d77) !important;
    font-size: 12px !important;
    text-decoration: underline !important;
    font-family: 'Outfit', sans-serif !important;
}
.customer-address-index .col-main .col2-set a:hover {
    color: var(--hm-yellow-dark, #d99f00) !important;
}

/* Order detail page (sales-order-view) */
.sales-order-view .col-main .order-info-box,
.sales-order-view .col-main .order-info,
.sales-order-view .col-main .box {
    background: var(--hm-grey-100, #f0ede4) !important;
    border-radius: 12px !important;
    padding: 16px 20px !important;
    border: none !important;
    margin-bottom: 16px !important;
}
.sales-order-view .col-main h2,
.sales-order-history .col-main h2 {
    color: var(--hm-blue, #243d77) !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin: 0 0 14px !important;
    padding: 0 0 10px !important;
    border-bottom: 2px solid var(--hm-yellow, #fbba00) !important;
    display: inline-block !important;
}

/* Buttons-set: back, etc. */
[class*="customer-account"] .col-main .buttons-set,
.sales-order-history .col-main .buttons-set {
    margin-top: 20px !important;
    padding: 0 !important;
    border: none !important;
    text-align: left !important;
}
[class*="customer-account"] .col-main .back-link a,
.sales-order-history .col-main .back-link a {
    color: var(--hm-blue, #243d77) !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}
[class*="customer-account"] .col-main .back-link a:hover {
    color: var(--hm-yellow-dark, #d99f00) !important;
}
[class*="customer-account"] .box-recent .data-table .price,
[class*="customer-account"] .box-recent table .price {
    color: var(--hm-blue, #243d77) !important;
    font-weight: 600 !important;
    font-family: 'Outfit', sans-serif !important;
}
[class*="customer-account"] .box-recent table a,
[class*="customer-account"] .box-recent .data-table a {
    color: var(--hm-blue, #243d77) !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 13px !important;
    text-decoration: none !important;
    display: inline-block !important;
}
[class*="customer-account"] .box-recent table a:hover {
    color: var(--hm-yellow-dark, #d99f00) !important;
    text-decoration: underline !important;
}

/* Box-info section: contact info, addresses - lighter modern look.
   Header spans full width, col2-set below contains the 2 sub-boxes. */
[class*="customer-account"] .box-info {
    margin-bottom: 32px !important;
    display: block !important;
}
[class*="customer-account"] .box-info > .box-head {
    margin-bottom: 14px !important;
}
[class*="customer-account"] .box-info > .col2-set {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
    margin: 0 !important;
    float: none !important;
    width: 100% !important;
}
[class*="customer-account"] .box-info .box,
[class*="customer-account"] .box-info .col-1,
[class*="customer-account"] .box-info .col-2 {
    background: #ffffff !important;
    border: 1px solid var(--hm-grey-200, #e4e1d6) !important;
    border-radius: 12px !important;
    padding: 20px 24px !important;
    margin: 0 !important;
    box-shadow: none !important;
    float: none !important;
    width: auto !important;
}
[class*="customer-account"] .box-info h3,
[class*="customer-account"] .box-info .box-title h3,
[class*="customer-account"] .box-info h2 {
    color: var(--hm-blue, #243d77) !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    border: none !important;
}
[class*="customer-account"] .box-info p,
[class*="customer-account"] .box-info address {
    color: rgba(29, 29, 27, 0.85) !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin: 0 0 8px !important;
    font-style: normal !important;
}
[class*="customer-account"] .box-info a {
    color: var(--hm-blue, #243d77) !important;
    text-decoration: underline !important;
    font-size: 13px !important;
}
[class*="customer-account"] .box-info a:hover {
    color: var(--hm-yellow-dark, #d99f00) !important;
}

/* "Wijzigen" little links next to section headers (but NOT in box-recent) */
[class*="customer-account"] h2 + a.link-edit,
[class*="customer-account"] .box-content a.link-edit {
    color: var(--hm-blue, #243d77) !important;
    font-size: 12px !important;
    text-decoration: underline !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 500 !important;
    margin-left: 8px !important;
}

/* Form inputs in account pages (edit profile, address form, etc.) */
[class*="customer-account"] .col-main input.input-text,
[class*="customer-account"] .col-main input[type="text"],
[class*="customer-account"] .col-main input[type="email"],
[class*="customer-account"] .col-main input[type="password"],
[class*="customer-account"] .col-main input[type="tel"],
[class*="customer-account"] .col-main select,
[class*="customer-account"] .col-main textarea {
    background: #ffffff !important;
    border: 1px solid var(--hm-grey-200, #e4e1d6) !important;
    border-radius: 10px !important;
    height: 44px !important;
    padding: 0 16px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
    color: var(--hm-blue, #243d77) !important;
    box-shadow: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
    -webkit-text-fill-color: var(--hm-blue, #243d77) !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
    max-width: 480px !important;
}
[class*="customer-account"] .col-main textarea {
    height: auto !important;
    min-height: 100px !important;
    padding: 12px 16px !important;
    line-height: 1.5 !important;
}
[class*="customer-account"] .col-main input.input-text:focus,
[class*="customer-account"] .col-main input[type="text"]:focus,
[class*="customer-account"] .col-main input[type="email"]:focus,
[class*="customer-account"] .col-main input[type="password"]:focus,
[class*="customer-account"] .col-main select:focus,
[class*="customer-account"] .col-main textarea:focus {
    outline: none !important;
    border-color: var(--hm-yellow, #fbba00) !important;
    box-shadow: 0 0 0 3px rgba(251, 186, 0, 0.15) !important;
}

/* File input - clean style */
[class*="customer-account"] .col-main input[type="file"] {
    padding: 10px 0 !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 13px !important;
    color: rgba(29, 29, 27, 0.7) !important;
    border: none !important;
    background: transparent !important;
    height: auto !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}
[class*="customer-account"] .col-main input[type="file"]::file-selector-button {
    background: var(--hm-grey-100, #f0ede4) !important;
    border: 1px solid var(--hm-grey-200, #e4e1d6) !important;
    border-radius: 8px !important;
    padding: 8px 16px !important;
    color: var(--hm-blue, #243d77) !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    cursor: pointer !important;
    margin-right: 12px !important;
}
[class*="customer-account"] .col-main input[type="file"]::file-selector-button:hover {
    background: var(--hm-yellow, #fbba00) !important;
    border-color: var(--hm-yellow, #fbba00) !important;
}

/* Checkbox - clean style */
[class*="customer-account"] .col-main input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    border: 1px solid var(--hm-grey-200, #e4e1d6) !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    accent-color: var(--hm-blue, #243d77) !important;
    vertical-align: middle !important;
    margin-right: 8px !important;
}

/* Form list & labels in edit forms */
[class*="customer-account"] .col-main .form-list,
[class*="customer-account"] .col-main ul.form-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
[class*="customer-account"] .col-main .form-list li {
    margin-bottom: 16px !important;
    list-style: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
}
[class*="customer-account"] .col-main .form-list li label {
    flex: 0 0 140px !important;
    color: var(--hm-blue, #243d77) !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    margin: 0 !important;
    padding: 0 !important;
}
[class*="customer-account"] .col-main .form-list li .input-box {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: 480px !important;
}

/* Make the name-row (firstname/middlename/lastname) line up with the
   other form fields: stack the three sub-fields vertically and give each
   sub-field the same label-width/input-width layout as a regular li. */
[class*="customer-account"] .col-main .form-list li.fields {
    display: block !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
}
[class*="customer-account"] .col-main .form-list li.fields .customer-name,
[class*="customer-account"] .col-main .form-list li.fields .customer-name-middlename,
[class*="customer-account"] .col-main .form-list li.fields .customer-name-prefix,
[class*="customer-account"] .col-main .form-list li.fields .customer-name-suffix {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
}
[class*="customer-account"] .col-main .form-list li.fields .field {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
    float: none !important;
}
[class*="customer-account"] .col-main .form-list li.fields .field label {
    flex: 0 0 160px !important;
    color: var(--hm-blue, #243d77) !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: 160px !important;
    min-width: 160px !important;
}
[class*="customer-account"] .col-main .form-list li.fields .field .input-box {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: 480px !important;
    width: auto !important;
}
[class*="customer-account"] .col-main .form-list li.fields .field .input-box input {
    width: 100% !important;
    max-width: 480px !important;
}

/* ============================================================
   Address book page (/customer/address/) - card layout matching
   the account dashboard style.
   ============================================================ */
.customer-address-index .col-main .addresses-list {
    display: block !important;
    margin: 0 !important;
    width: 100% !important;
}
.customer-address-index .col-main .addresses-list > .col-1,
.customer-address-index .col-main .addresses-list > .col-2 {
    float: none !important;
    width: 100% !important;
    margin: 0 0 24px 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.customer-address-index .col-main .addresses-primary h2,
.customer-address-index .col-main .addresses-additional h2 {
    color: var(--hm-blue, #243d77) !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
}
.customer-address-index .col-main .addresses-primary ol {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}
.customer-address-index .col-main .addresses-primary ol li.item {
    display: block !important;
    float: none !important;
    width: auto !important;
    padding: 20px 24px !important;
    margin: 0 !important;
    background: #ffffff !important;
    border: 1px solid var(--hm-grey-200, #e4e1d6) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    list-style: none !important;
}
.customer-address-index .col-main .addresses-primary ol li.item h3,
.customer-address-index .col-main .addresses-additional .item h3 {
    color: var(--hm-blue, #243d77) !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
}
.customer-address-index .col-main .addresses-primary address,
.customer-address-index .col-main .addresses-additional address {
    color: rgba(29, 29, 27, 0.85) !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin: 0 0 10px !important;
    font-style: normal !important;
}
.customer-address-index .col-main .addresses-primary p a,
.customer-address-index .col-main .addresses-additional p a {
    color: var(--hm-blue, #243d77) !important;
    text-decoration: underline !important;
    font-size: 13px !important;
}
.customer-address-index .col-main .addresses-primary p a:hover,
.customer-address-index .col-main .addresses-additional p a:hover {
    color: var(--hm-yellow-dark, #d99f00) !important;
}
/* Additional addresses card - when there are none, show a single
   card with the "geen extra adressen" message */
.customer-address-index .col-main .addresses-additional > p,
.customer-address-index .col-main .addresses-additional > ol {
    background: #ffffff !important;
    border: 1px solid var(--hm-grey-200, #e4e1d6) !important;
    border-radius: 12px !important;
    padding: 20px 24px !important;
    margin: 0 !important;
    list-style: none !important;
    color: rgba(29, 29, 27, 0.75) !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
}
.customer-address-index .col-main .addresses-additional > ol {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
}
.customer-address-index .col-main .addresses-additional > ol > li.item {
    padding: 20px 24px !important;
    background: #ffffff !important;
    border: 1px solid var(--hm-grey-200, #e4e1d6) !important;
    border-radius: 12px !important;
    list-style: none !important;
    float: none !important;
    width: auto !important;
    margin: 0 !important;
}
/* "Empty" state message spans both grid columns so it's centered */
.customer-address-index .col-main .addresses-additional > ol > li.item.empty {
    grid-column: 1 / -1 !important;
    color: rgba(29, 29, 27, 0.75) !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
}
.customer-address-index .col-main .addresses-additional > ol > li.item.empty p {
    margin: 0 !important;
}

/* p.required at top right of form */
[class*="customer-account"] .col-main p.required {
    text-align: right !important;
    color: rgba(29, 29, 27, 0.5) !important;
    font-size: 12px !important;
    font-family: 'Outfit', sans-serif !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
}
[class*="customer-account"] .col-main p.required::first-letter {
    color: var(--hm-yellow, #fbba00) !important;
    font-weight: 700 !important;
}

/* Wachtwoord wijzigen checkbox label */
[class*="customer-account"] .col-main .control label,
[class*="customer-account"] .col-main label.checkbox-label {
    color: rgba(29, 29, 27, 0.85) !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
    cursor: pointer !important;
}

/* Buttons in account pages */
[class*="customer-account"] .col-main button.button,
[class*="customer-account"] .col-main a.button,
[class*="customer-account"] .buttons-set button.button {
    background: var(--hm-blue, #243d77) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 10px !important;
    height: 44px !important;
    min-height: 44px !important;
    line-height: 44px !important;
    padding: 0 24px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    cursor: pointer !important;
    text-decoration: none !important;
    display: inline-block !important;
}
[class*="customer-account"] .col-main button.button:hover,
[class*="customer-account"] .col-main a.button:hover {
    background: #1a2d5a !important;
    color: #ffffff !important;
}
[class*="customer-account"] .col-main button.button span,
[class*="customer-account"] .col-main a.button span {
    background: none !important;
    padding: 0 !important;
    color: inherit !important;
    font: inherit !important;
}
/* ============================================================
   Drijfhout - CMS pages (Recycling, Vacatures, Contact, etc.)
   in HM brand style
   ============================================================ */

/* Two column layout - col-main and col-right are direct children
   of .main-container (with .main/.breadcrumbs wrapping above) */
.cms-page-view .main-container.col2-right-layout,
.cms-page-view .main-container {
    padding: 16px 0 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 360px !important;
    grid-template-rows: auto 1fr !important;
    gap: 16px 24px !important;
    align-items: start !important;
}
.cms-page-view .main-container > .main {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    justify-self: stretch !important;
}
.cms-page-view .main-container > .main > .breadcrumbs {
    text-align: left !important;
    width: 100% !important;
    display: block !important;
}

/* Hide empty cms blocks (e.g. cms-page-link with no content) */
.cms-page-view .col-right .cms-block.cms-page-link,
.cms-page-view .col-right .cms-block:empty {
    display: none !important;
}
/* Also hide if the block contains no visible content (whitespace only) */
.cms-page-view .col-right .cms-block > :only-child:empty {
    display: none !important;
}

/* Rechterkolom-recycling: convert paragraphs into a clean list
   (paragraphs all start with "- ") */
.cms-page-view .col-right .rechterkolom-recycling h3:empty,
.cms-page-view .col-right .cms-block h3:empty,
.cms-page-view .col-right .cms-block h4:empty,
.cms-page-view .col-right .rechterkolom-recycling > h3:first-child {
    display: none !important;
    border: none !important;
}
/* Hide stray <br> tags inside the list paragraphs */
.cms-page-view .col-right .rechterkolom-recycling p br {
    display: none !important;
}
.cms-page-view .col-right .rechterkolom-recycling p {
    position: relative !important;
    padding: 10px 0 10px 22px !important;
    margin: 0 !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    color: rgba(29, 29, 27, 0.85) !important;
    border-bottom: 1px solid var(--hm-grey-100, #f0ede4) !important;
    /* Hide the literal "- " prefix by pushing text left and clipping */
    text-indent: 0 !important;
}
.cms-page-view .col-right .rechterkolom-recycling p:last-child {
    border-bottom: none !important;
}
.cms-page-view .col-right .rechterkolom-recycling p::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 17px !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: var(--hm-yellow, #fbba00) !important;
}

/* Contact block: clean layout with icon indicators */
.cms-page-view .col-right .cms-contact p {
    padding: 10px 0 10px 26px !important;
    margin: 0 !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    color: rgba(29, 29, 27, 0.85) !important;
    border-bottom: 1px solid var(--hm-grey-100, #f0ede4) !important;
    position: relative !important;
}
.cms-page-view .col-right .cms-contact p:last-child {
    border-bottom: none !important;
}
.cms-page-view .col-right .cms-contact p::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 14px !important;
    width: 16px !important;
    height: 16px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 16px 16px !important;
}
/* Address (first p): pin icon */
.cms-page-view .col-right .cms-contact p:nth-of-type(1)::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23243d77' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/><circle cx='12' cy='10' r='3'/></svg>") !important;
}
/* Phone/email (2nd p): phone icon */
.cms-page-view .col-right .cms-contact p:nth-of-type(2)::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23243d77' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/></svg>") !important;
}
/* Opening hours (3rd p): clock icon */
.cms-page-view .col-right .cms-contact p:nth-of-type(3)::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23243d77' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><polyline points='12 6 12 12 16 14'/></svg>") !important;
}
/* Social (4th p): clean inline SVG icons for Facebook + Instagram */
.cms-page-view .col-right .cms-contact p:nth-of-type(4) {
    padding-left: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 16px 12px !important;
}
.cms-page-view .col-right .cms-contact p:nth-of-type(4)::before {
    display: none !important;
}
.cms-page-view .col-right .cms-contact p:nth-of-type(4) br {
    display: none !important;
}
.cms-page-view .col-right .cms-contact p:nth-of-type(4) a,
.cms-page-view .col-right .cms-contact a.facebook,
.cms-page-view .col-right .cms-contact a[href*="instagram"],
.cms-page-view .col-right .cms-contact a[href*="facebook"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: var(--hm-grey-100, #f0ede4) !important;
    text-indent: -9999px !important;
    position: relative !important;
    text-decoration: none !important;
    overflow: hidden !important;
    transition: background 0.15s ease !important;
    font-size: 0 !important;
}
.cms-page-view .col-right .cms-contact p:nth-of-type(4) a:hover,
.cms-page-view .col-right .cms-contact a.facebook:hover,
.cms-page-view .col-right .cms-contact a[href*="instagram"]:hover,
.cms-page-view .col-right .cms-contact a[href*="facebook"]:hover {
    background: var(--hm-yellow, #fbba00) !important;
}
.cms-page-view .col-right .cms-contact p:nth-of-type(4) a::before,
.cms-page-view .col-right .cms-contact a.facebook::before,
.cms-page-view .col-right .cms-contact a[href*="facebook"]::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    text-indent: 0 !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 18px 18px !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23243d77'><path d='M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z'/></svg>") !important;
}
.cms-page-view .col-right .cms-contact p:nth-of-type(4) a[href*="instagram"]::before,
.cms-page-view .col-right .cms-contact a[href*="instagram"]::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    text-indent: 0 !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 18px 18px !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23243d77' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='2' width='20' height='20' rx='5' ry='5'/><path d='M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z'/><line x1='17.5' y1='6.5' x2='17.51' y2='6.5'/></svg>") !important;
}
/* Hide the @username text next to social icons */
.cms-page-view .col-right .cms-contact p:nth-of-type(4) {
    font-size: 0 !important;
    color: transparent !important;
}
/* Line breaks inside contact paragraphs - add spacing */
.cms-page-view .col-right .cms-contact p br {
    display: block !important;
    margin: 2px 0 !important;
    content: "" !important;
}
.cms-page-view .col-main {
    grid-column: 1 !important;
    grid-row: 2 !important;
    background: #ffffff !important;
    border: 1px solid var(--hm-grey-200, #e4e1d6) !important;
    border-radius: 14px !important;
    padding: 40px 48px !important;
    box-shadow: 0 4px 16px rgba(36, 61, 119, 0.06) !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
}
.cms-page-view .col-right {
    grid-column: 2 !important;
    grid-row: 2 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}
.cms-page-view .col-main .std {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: none !important;
    font-family: 'Outfit', sans-serif !important;
    color: rgba(29, 29, 27, 0.85) !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
}

/* Breadcrumbs above */
.cms-page-view .breadcrumbs {
    padding: 0 0 12px !important;
    margin: 0 !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 12px !important;
    color: rgba(29, 29, 27, 0.55) !important;
}
.cms-page-view .breadcrumbs a {
    color: rgba(29, 29, 27, 0.7) !important;
    text-decoration: none !important;
}
.cms-page-view .breadcrumbs a:hover {
    color: var(--hm-blue, #243d77) !important;
}

/* Content headings */
.cms-page-view .std h1,
.cms-page-view .std h2 {
    color: var(--hm-blue, #243d77) !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 600 !important;
    margin: 32px 0 16px !important;
    padding: 0 0 10px !important;
    border-bottom: 2px solid var(--hm-yellow, #fbba00) !important;
    display: inline-block !important;
    line-height: 1.3 !important;
}
.cms-page-view .std h1 {
    font-size: 28px !important;
    margin-top: 0 !important;
}
.cms-page-view .std h2 {
    font-size: 20px !important;
}
.cms-page-view .std h3,
.cms-page-view .std h4 {
    color: var(--hm-blue, #243d77) !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    margin: 24px 0 12px !important;
    padding: 0 !important;
    border: none !important;
    line-height: 1.3 !important;
}

/* H5 used as callout banners in recycling */
.cms-page-view .std h5 {
    background: var(--hm-blue, #243d77) !important;
    color: #ffffff !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    padding: 18px 28px !important;
    margin: 24px 0 !important;
    border-radius: 12px !important;
    border: none !important;
    line-height: 1.4 !important;
    text-align: center !important;
    position: relative !important;
}
.cms-page-view .std h5 span,
.cms-page-view .std h5 span span {
    background: none !important;
    padding: 0 !important;
    color: inherit !important;
    font: inherit !important;
    display: inline !important;
}

/* Paragraphs */
.cms-page-view .std p {
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
    color: rgba(29, 29, 27, 0.85) !important;
    margin: 0 0 14px !important;
}
.cms-page-view .std p strong,
.cms-page-view .std strong {
    color: var(--hm-blue, #243d77) !important;
    font-weight: 600 !important;
}
.cms-page-view .std a,
.cms-page-view .std p a,
.cms-page-view .std li a,
.cms-page-view .std p a span,
.cms-page-view .std a span {
    color: var(--hm-blue, #243d77) !important;
    text-decoration: underline !important;
    font-size: 14px !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: inherit !important;
    line-height: inherit !important;
}
.cms-page-view .std a:hover {
    color: var(--hm-yellow-dark, #d99f00) !important;
}

/* Lists */
.cms-page-view .std ul,
.cms-page-view .std ol {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 16px !important;
}
.cms-page-view .std ul li {
    position: relative !important;
    padding: 4px 0 4px 22px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: rgba(29, 29, 27, 0.85) !important;
}
.cms-page-view .std ul li::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 13px !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: var(--hm-yellow, #fbba00) !important;
}
.cms-page-view .std ol {
    counter-reset: cms-counter !important;
}
.cms-page-view .std ol li {
    counter-increment: cms-counter !important;
    position: relative !important;
    padding: 4px 0 4px 32px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: rgba(29, 29, 27, 0.85) !important;
}
.cms-page-view .std ol li::before {
    content: counter(cms-counter) !important;
    position: absolute !important;
    left: 0 !important;
    top: 4px !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    background: var(--hm-blue, #243d77) !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-align: center !important;
    line-height: 22px !important;
    font-family: 'Outfit', sans-serif !important;
}

/* ======= Right column blocks ======= */
.cms-page-view .col-right .cms-block {
    background: #ffffff !important;
    border: 1px solid var(--hm-grey-200, #e4e1d6) !important;
    border-radius: 14px !important;
    padding: 24px !important;
    box-shadow: 0 4px 16px rgba(36, 61, 119, 0.06) !important;
    margin: 0 !important;
}
.cms-page-view .col-right .cms-block h3,
.cms-page-view .col-right .cms-block h4 {
    color: var(--hm-blue, #243d77) !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin: 0 0 14px !important;
    padding: 0 0 10px !important;
    border-bottom: 2px solid var(--hm-yellow, #fbba00) !important;
    display: inline-block !important;
}
.cms-page-view .col-right .cms-block p {
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: rgba(29, 29, 27, 0.85) !important;
    margin: 0 0 8px !important;
}
.cms-page-view .col-right .cms-block a,
.cms-page-view .col-right .cms-block a span,
.cms-page-view .col-right .cms-block p a,
.cms-page-view .col-right .cms-contact a,
.cms-page-view .col-right .cms-contact a span {
    color: var(--hm-blue, #243d77) !important;
    text-decoration: none !important;
    font-size: 14px !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: inherit !important;
}
.cms-page-view .col-right .cms-block a:hover,
.cms-page-view .col-right .cms-contact a:hover {
    color: var(--hm-yellow-dark, #d99f00) !important;
    text-decoration: underline !important;
}

/* USP block - replace sprite checkmarks with inline yellow SVG */
.cms-page-view .col-right .cms-usp-block ul {
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}
.cms-page-view .col-right .cms-usp-block li {
    background: none !important;
    padding: 10px 0 10px 32px !important;
    margin: 0 !important;
    position: relative !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--hm-blue, #243d77) !important;
    list-style: none !important;
}
.cms-page-view .col-right .cms-usp-block li + li {
    border-top: 1px solid var(--hm-grey-100, #f0ede4) !important;
}
.cms-page-view .col-right .cms-usp-block li::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    background: var(--hm-yellow, #fbba00) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23243d77' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") no-repeat center center !important;
    background-size: 14px 14px !important;
}

/* Strong email/phone/address lines in contact block */
.cms-page-view .col-right .cms-contact p {
    color: rgba(29, 29, 27, 0.85) !important;
}
.cms-page-view .col-right .cms-contact strong {
    color: var(--hm-blue, #243d77) !important;
    font-weight: 600 !important;
}

/* Make sure images in std content are responsive */
.cms-page-view .std img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 10px !important;
}

/* Clean up any inline styles on std elements (e.g. grey backgrounds) */
.cms-page-view .std [style*="background"] {
    background: transparent !important;
}

/* Tables inside cms pages */
.cms-page-view .std table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    margin: 16px 0 !important;
    font-family: 'Outfit', sans-serif !important;
}
.cms-page-view .std table th {
    background: transparent !important;
    color: var(--hm-blue, #243d77) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    padding: 10px 12px !important;
    border: none !important;
    border-bottom: 2px solid var(--hm-yellow, #fbba00) !important;
    text-align: left !important;
}
.cms-page-view .std table td {
    padding: 12px !important;
    border: none !important;
    border-bottom: 1px solid var(--hm-grey-100, #f0ede4) !important;
    font-size: 14px !important;
    color: rgba(29, 29, 27, 0.85) !important;
}

/* ============================================================
   Drijfhout - category overview page (webwinkel-*.html)
   in HM brand style
   ============================================================ */

/* Page title: show it properly (was display:none) */
.catalog-category-view .page-title,
.catalog-category-view .page-title.category-title {
    display: block !important;
    margin: 0 0 20px !important;
    padding: 0 !important;
    border: none !important;
}
.catalog-category-view .page-title h1 {
    color: var(--hm-blue, #243d77) !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 600 !important;
    font-size: 28px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* Overview top: description on left, special product on right */
.catalog-category-view .overview-top {
    display: grid !important;
    grid-template-columns: 1fr 300px !important;
    gap: 16px !important;
    margin-bottom: 32px !important;
    align-items: stretch !important;
}
.catalog-category-view .overview-top::before,
.catalog-category-view .overview-top::after {
    display: none !important;
}

/* Description wrapper: image + text side by side, fully filling the card */
.catalog-category-view .overview-top .image-description {
    grid-column: 1 !important;
    width: 100% !important;
    max-width: none !important;
    background: #ffffff !important;
    border: 1px solid var(--hm-grey-200, #e4e1d6) !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 16px rgba(36, 61, 119, 0.06) !important;
    overflow: hidden !important;
    display: grid !important;
    grid-template-columns: 300px 1fr !important;
    align-items: stretch !important;
}
/* Left image fills its column fully */
.catalog-category-view .overview-top .image-description > .category-image,
.catalog-category-view .overview-top .image-description > p.category-image {
    grid-column: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    align-self: stretch !important;
    position: relative !important;
    background: var(--hm-grey-100, #f0ede4) !important;
}
.catalog-category-view .overview-top .image-description > .category-image img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    position: absolute !important;
    inset: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
    border-radius: 0 !important;
}

/* Category description text - clean card */
.catalog-category-view .overview-top .image-description .category-description,
.catalog-category-view .overview-top .category-description {
    grid-column: 2 !important;
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 32px 40px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    color: rgba(29, 29, 27, 0.85) !important;
    font-family: 'Outfit', sans-serif !important;
    display: flex !important;
    flex-direction: column !important;
}
/* Also kill the wrapper image-description inline h2 margin issue */
.catalog-category-view .overview-top .image-description .category-description h2 {
    margin-top: 0 !important;
}
.catalog-category-view .overview-top .category-description h1,
.catalog-category-view .overview-top .category-description h2 {
    color: var(--hm-blue, #243d77) !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    margin: 0 0 14px !important;
    padding: 0 0 10px !important;
    border-bottom: 2px solid var(--hm-yellow, #fbba00) !important;
    display: inline-block !important;
    align-self: flex-start !important;
    line-height: 1.3 !important;
}
.catalog-category-view .overview-top .category-description p {
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
    color: rgba(29, 29, 27, 0.85) !important;
    margin: 0 0 12px !important;
}
.catalog-category-view .overview-top .category-description img {
    border-radius: 10px !important;
    margin: 0 20px 8px 0 !important;
    max-width: 300px !important;
    height: auto !important;
}

/* Newsletter button in description - HIDDEN (redundant with footer newsletter) */
.catalog-category-view .overview-top .category-description .newsletter-button {
    display: none !important;
}
.catalog-category-view .overview-top .category-description .newsletter-button-old {
    margin-top: auto !important;
    padding-top: 12px !important;
    display: block !important;
    text-align: left !important;
}
.catalog-category-view .overview-top .category-description .newsletter-button button,
.catalog-category-view .overview-top .category-description .newsletter-button a,
.catalog-category-view .overview-top .category-description .newsletter-button button.button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--hm-blue, #243d77) !important;
    background-image: none !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 0 28px !important;
    height: 44px !important;
    min-height: 44px !important;
    line-height: 44px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    text-decoration: none !important;
    transition: background 0.15s ease !important;
    cursor: pointer !important;
    text-indent: 0 !important;
}
.catalog-category-view .overview-top .category-description .newsletter-button button:hover,
.catalog-category-view .overview-top .category-description .newsletter-button a:hover {
    background: #1a2d5a !important;
    color: #ffffff !important;
}
.catalog-category-view .overview-top .category-description .newsletter-button button span,
.catalog-category-view .overview-top .category-description .newsletter-button button span span {
    background: none !important;
    background-image: none !important;
    padding: 0 !important;
    margin: 0 !important;
    color: inherit !important;
    font: inherit !important;
    display: inline !important;
    text-indent: 0 !important;
}
.catalog-category-view .overview-top .category-description .newsletter-button button::before,
.catalog-category-view .overview-top .category-description .newsletter-button button::after,
.catalog-category-view .overview-top .category-description .newsletter-button button span::before,
.catalog-category-view .overview-top .category-description .newsletter-button button span::after,
.catalog-category-view .overview-top .category-description .newsletter-button button span span::before,
.catalog-category-view .overview-top .category-description .newsletter-button button span span::after {
    content: none !important;
    display: none !important;
    background: none !important;
    background-image: none !important;
}

/* Special product: hide the hover-link span (has duplicate "Details bekijken" text) */
.catalog-category-view .special-product .links a.buttondetails .hover-link,
.catalog-category-view .special-product .links a .hover-link {
    display: none !important;
}

/* Special product - clean card */
.catalog-category-view .overview-top .special-product {
    grid-column: 2 !important;
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
    border: 1px solid var(--hm-grey-200, #e4e1d6) !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 16px rgba(36, 61, 119, 0.06) !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}
.catalog-category-view .special-product .products-info {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}
.catalog-category-view .special-product .image {
    margin: 20px 20px 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
    border: 1px solid var(--hm-grey-200, #e4e1d6) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    position: relative !important;
    aspect-ratio: 16/11 !important;
    display: block !important;
}
.catalog-category-view .special-product .image img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    padding: 12px !important;
    box-sizing: border-box !important;
    position: absolute !important;
    inset: 0 !important;
}
.catalog-category-view .special-product .content {
    padding: 24px 24px 0 !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
}
.catalog-category-view .special-product .content {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
}
.catalog-category-view .special-product .content .name,
.catalog-category-view .special-product .content .name a {
    color: var(--hm-blue, #243d77) !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
    margin: 0 0 12px !important;
    display: block !important;
}
.catalog-category-view .special-product .content .name a:hover {
    color: var(--hm-yellow-dark, #d99f00) !important;
}
.catalog-category-view .special-product .price-box {
    margin: 0 0 16px !important;
    padding: 0 !important;
}
.catalog-category-view .special-product .price-box .price {
    color: var(--hm-blue, #243d77) !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 22px !important;
    font-weight: 700 !important;
}
/* Price cents inline (not superscript) */
.catalog-category-view .special-product .price sup {
    font-size: 16px !important;
    vertical-align: baseline !important;
    line-height: inherit !important;
    top: 0 !important;
    position: static !important;
    font-weight: inherit !important;
}
.catalog-category-view .special-product .price sup::before {
    content: ',' !important;
}

/* "Details bekijken / Bekijk details" buttons - flush bottom with rounded bottom corners only */
.catalog-category-view .special-product .links {
    margin: 16px -24px 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
}
.catalog-category-view .special-product .links a,
.catalog-category-view .special-product .links .menu-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--hm-yellow, #fbba00) !important;
    color: var(--hm-blue, #243d77) !important;
    border: none !important;
    border-radius: 0 !important;
    height: 52px !important;
    padding: 0 20px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    text-decoration: none !important;
    transition: background 0.15s ease !important;
    text-indent: 0 !important;
    width: 100% !important;
}
.catalog-category-view .special-product .links a:hover,
.catalog-category-view .special-product .links .menu-link:hover {
    background: var(--hm-yellow-dark, #d99f00) !important;
    color: var(--hm-blue, #243d77) !important;
}

/* ===== Category overview list (letters + grids) ===== */
.catalog-category-view .category-overview-list {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

/* Letter headers (A-B-C-D-E-F etc.) */
.catalog-category-view .category-overview-list .letters {
    color: var(--hm-blue, #243d77) !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    margin: 32px 0 16px !important;
    padding: 0 0 10px !important;
    border-bottom: 2px solid var(--hm-yellow, #fbba00) !important;
    display: block !important;
    position: relative !important;
}
.catalog-category-view .category-overview-list .letters:first-child {
    margin-top: 0 !important;
}

/* Categories grid */
.catalog-category-view .categories-grid {
    margin: 0 0 24px !important;
    padding: 0 !important;
    background: transparent !important;
    list-style: none !important;
}
.catalog-category-view .categories-grid .slick-slide {
    padding: 8px !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    border: none !important;
    background: none !important;
}
.catalog-category-view .categories-grid .slick-slide > div {
    border: none !important;
    background: none !important;
}
.catalog-category-view .categories-grid .slick-track {
    display: flex !important;
    align-items: stretch !important;
}
.catalog-category-view .categories-grid .slick-slide > div {
    height: 100% !important;
}

/* Category tile - modern clean look with full image fill */
.catalog-category-view .categories-grid .category-image {
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    background: #ffffff !important;
    border: 1px solid var(--hm-grey-200, #e4e1d6) !important;
    border-radius: 12px !important;
    padding: 0 !important;
    text-align: center !important;
    text-decoration: none !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(36, 61, 119, 0.04) !important;
    transition: box-shadow 0.2s ease, transform 0.15s ease, border-color 0.15s ease !important;
    height: 100% !important;
    min-height: 240px !important;
}
.catalog-category-view .categories-grid .category-image:hover {
    box-shadow: 0 6px 20px rgba(36, 61, 119, 0.12) !important;
    transform: translateY(-2px) !important;
    border-color: var(--hm-yellow, #fbba00) !important;
}
.catalog-category-view .categories-grid .category-image img {
    display: block !important;
    margin: 14px 14px 0 !important;
    padding: 10px !important;
    width: calc(100% - 28px) !important;
    height: 160px !important;
    flex: 0 0 160px !important;
    object-fit: contain !important;
    background: #ffffff !important;
    border: 1px solid var(--hm-grey-200, #e4e1d6) !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
}
.catalog-category-view .categories-grid .category-image .category-name,
.catalog-category-view .categories-grid .category-image h2.category-name {
    color: var(--hm-blue, #243d77) !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    padding: 8px 10px 12px !important;
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    text-align: center !important;
    border: none !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
    word-break: break-word !important;
    hyphens: auto !important;
}
/* Hover: keep name in HM blue / yellow (override legacy rules that turn it white
   AND that set opacity: 0 to "hide" it during the hover overlay slide-in) */
.catalog-category-view .categories-grid li:hover .category-name,
.catalog-category-view .categories-grid li:hover .category-image .category-name,
.catalog-category-view .categories-grid li:hover .category-image h2.category-name,
.catalog-category-view .categories-grid .category-image:hover .category-name,
.catalog-category-view .categories-grid .category-image:hover h2.category-name,
.catalog-category-view .category-overview-list li:hover .category-name,
.catalog-category-view .category-overview-list li:hover .category-image .category-name,
.catalog-category-view .category-overview-list li:hover .category-image h2.category-name,
body .catalog-category-view .categories-grid .category-image:hover .category-name,
body .catalog-category-view .category-overview-list li:hover .category-image .category-name {
    color: var(--hm-yellow-dark, #d99f00) !important;
    opacity: 1 !important;
    visibility: visible !important;
}
/* Double-make-sure: the base color is always HM blue (never white) */
.catalog-category-view .categories-grid .category-image .category-name,
.catalog-category-view .categories-grid .category-image h2.category-name,
body .catalog-category-view .categories-grid .category-image h2.category-name {
    color: var(--hm-blue, #243d77) !important;
}
/* If the legacy hover overlay slides in, make its text readable HM blue */
.catalog-category-view .categories-grid .category-image-hover .category-name,
.catalog-category-view .category-overview-list li:hover .category-image-hover .category-name {
    color: var(--hm-blue, #243d77) !important;
}
/* Make slick-track align items equal height */
.catalog-category-view .categories-grid .slick-track {
    display: flex !important;
    align-items: stretch !important;
}
.catalog-category-view .categories-grid .slick-slide > div,
.catalog-category-view .categories-grid .slick-slide {
    height: auto !important;
}

/* Hide the separate hover element (we use CSS hover effects).
   Use multiple selectors + visibility for max suppression. */
.catalog-category-view .categories-grid .category-image-hover,
body.catalog-category-view .categories-grid .category-image-hover,
.catalog-category-view .category-overview-list li:hover .category-image-hover,
body.catalog-category-view .category-overview-list li:hover .category-image-hover {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Slick arrows - modern buttons */
.catalog-category-view .categories-grid .slick-arrow {
    background: #ffffff !important;
    border: 1px solid var(--hm-grey-200, #e4e1d6) !important;
    border-radius: 50% !important;
    width: 36px !important;
    height: 36px !important;
    z-index: 2 !important;
    color: var(--hm-blue, #243d77) !important;
    box-shadow: 0 2px 8px rgba(36, 61, 119, 0.12) !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    padding: 0 !important;
}
.catalog-category-view .categories-grid .slick-arrow:hover:not(.slick-disabled) {
    background: var(--hm-yellow, #fbba00) !important;
    border-color: var(--hm-yellow, #fbba00) !important;
}
.catalog-category-view .categories-grid .slick-prev {
    left: -18px !important;
}
.catalog-category-view .categories-grid .slick-next {
    right: -18px !important;
}
/* Custom chevron arrows using inline SVG via background */
.catalog-category-view .categories-grid .slick-arrow::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 14px 14px !important;
    font-size: 0 !important;
    color: transparent !important;
    opacity: 1 !important;
}
.catalog-category-view .categories-grid .slick-prev::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23243d77' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='15 18 9 12 15 6'/></svg>") !important;
}
.catalog-category-view .categories-grid .slick-next::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23243d77' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'/></svg>") !important;
}
.catalog-category-view .categories-grid .slick-arrow.slick-disabled {
    opacity: 0.3 !important;
    cursor: default !important;
}

/* Breadcrumbs - generic for all pages */
.breadcrumbs,
.catalog-category-view .breadcrumbs,
.catalog-product-view .breadcrumbs,
.cms-page-view .breadcrumbs {
    padding: 0 0 16px !important;
    margin: 24px 0 0 !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 12px !important;
    color: rgba(29, 29, 27, 0.55) !important;
    text-align: left !important;
    float: none !important;
    display: block !important;
    width: 100% !important;
    clear: both !important;
}
.breadcrumbs a {
    color: rgba(29, 29, 27, 0.7) !important;
    text-decoration: none !important;
}
.breadcrumbs a:hover {
    color: var(--hm-blue, #243d77) !important;
}
/* Kill legacy "-" ::after pseudo on breadcrumb separators / items */
.breadcrumbs li::before,
.breadcrumbs li::after,
.breadcrumbs span::before,
.breadcrumbs span::after,
.breadcrumbs a::before,
.breadcrumbs a::after {
    content: none !important;
    display: none !important;
}

/* "Log in om de prijs te zien" — smaller, centered, lighter weight */
.products-grid .product-info .price-box .regular-price .price.price-hidden,
.products-grid .product-info .price-box .special-price .price.price-hidden,
.catalog-category-view .products-grid .product-info .price-box .price.price-hidden,
.catalog-category-view .price.price-hidden,
.products-grid .price.price-hidden,
span.price.price-hidden {
    font-size: 14px !important;
    font-weight: 500 !important;
    text-align: center !important;
    display: block !important;
    width: 100% !important;
    color: var(--hm-blue, #243d77) !important;
    font-style: italic !important;
}
.products-grid .product-info .price-box:has(.price-hidden),
.products-grid .product-info .price-box:has(.price-hidden) .regular-price {
    text-align: center !important;
    width: 100% !important;
    display: block !important;
}
.products-grid .regular-price:has(.price-hidden),
.products-grid .price-box:has(.price-hidden) {
    text-align: center !important;
    width: 100% !important;
    display: block !important;
}

/* Remove hover lift effect on product cards (no more upward translate) */
.products-grid .item:hover,
.catalog-category-view .products-grid .item:hover,
.catalog-category-view .products-grid > li:hover {
    transform: none !important;
}

/* ===== Toolbar right (terug + pager) on category pages ===== */
.catalog-category-view .toolbar-right {
    float: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 16px !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
    width: auto !important;
}
/* Swap order: Terug naar overzicht LEFT, pager RIGHT */
.catalog-category-view .toolbar-right .overview-link {
    order: 1 !important;
}
.catalog-category-view .toolbar-right .toolbar {
    order: 2 !important;
}
.catalog-category-view .toolbar-right .toolbar {
    float: none !important;
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
}
.catalog-category-view .toolbar-right .overview-link {
    float: none !important;
    margin: 0 !important;
    width: auto !important;
}

/* Page title bar: title left, terug + pager right on the same row */
.catalog-category-view .col-main .category-products,
.catalog-category-view .col-main .category-overview-list {
    display: block !important;
}

/* "Terug naar overzicht" - merge wrapper DIV + nested A into 1 button.
   Structure: <div class="overview-link"><span>Terug</span><a class="overview-link"><span>naar overzicht</span></a></div>
   Make the wrapping DIV look like 1 button, hide the inner A border/bg. */
.catalog-category-view .toolbar-right div.overview-link,
.catalog-category-view div.overview-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 0 40px !important;
    height: 36px !important;
    background: #ffffff !important;
    border: 1px solid var(--hm-grey-200, #e4e1d6) !important;
    border-radius: 8px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: var(--hm-blue, #243d77) !important;
    text-decoration: none !important;
    transition: background 0.15s ease, border-color 0.15s ease !important;
    cursor: pointer !important;
}
.catalog-category-view div.overview-link:hover {
    background: var(--hm-yellow, #fbba00) !important;
    border-color: var(--hm-yellow, #fbba00) !important;
    color: var(--hm-blue, #243d77) !important;
}
/* Inner A: no border, no bg, no padding - just text */
.catalog-category-view div.overview-link a.overview-link,
.catalog-category-view div.overview-link a {
    display: inline-flex !important;
    align-items: center !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
    color: inherit !important;
    font: inherit !important;
    text-transform: inherit !important;
    letter-spacing: inherit !important;
    text-decoration: none !important;
}
.catalog-category-view div.overview-link span {
    color: inherit !important;
    font: inherit !important;
    text-transform: inherit !important;
    letter-spacing: inherit !important;
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.catalog-category-view div.overview-link::before {
    content: '' !important;
    display: inline-block !important;
    width: 12px !important;
    height: 12px !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23243d77' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='15 18 9 12 15 6'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 12px 12px !important;
    margin-right: 4px !important;
    flex-shrink: 0 !important;
}
.catalog-category-view div.overview-link a.overview-link::before {
    content: none !important;
    display: none !important;
}

/* Hide pager entirely when there's only 1 page.
   JS adds .single-page class to .toolbar-right when no nav links exist. */
.catalog-category-view .toolbar-right.single-page .toolbar,
.toolbar-right.single-page .pager,
.pager.single-page,
[class*="customer-account"] .col-main .pager.single-page,
body .pager.single-page {
    display: none !important;
}

/* Pager (Vorige / Pagina X van Y / Volgende) - modern button group.
   Applies site-wide: category pages, order history, wishlist, etc. */
.toolbar .pager,
.col-main .pager {
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    float: none !important;
}
.toolbar .pager .count-container,
.col-main .pager .count-container {
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}
.toolbar .pages,
.col-main .pages,
.pager .pages {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    background: #ffffff !important;
    border: 1px solid var(--hm-grey-200, #e4e1d6) !important;
    border-radius: 8px !important;
    padding: 0 !important;
    height: 36px !important;
    overflow: hidden !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 12px !important;
    float: none !important;
}
.toolbar .pages > *,
.col-main .pages > *,
.pager .pages > * {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 36px !important;
    padding: 0 12px !important;
    color: var(--hm-blue, #243d77) !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    background: transparent !important;
    border: none !important;
    border-left: 1px solid var(--hm-grey-200, #e4e1d6) !important;
    margin: 0 !important;
    cursor: pointer !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
.toolbar .pages > *:first-child,
.col-main .pages > *:first-child,
.pager .pages > *:first-child {
    border-left: none !important;
}
.toolbar .pages a:hover,
.toolbar .pages span:hover,
.col-main .pages a:hover,
.col-main .pages span:hover,
.pager .pages a:hover,
.pager .pages span:hover {
    background: var(--hm-yellow, #fbba00) !important;
    color: var(--hm-blue, #243d77) !important;
}
/* Disabled (current) state for previous/next when only 1 page */
.toolbar .pages span.previous,
.toolbar .pages span.next,
.col-main .pages span.previous,
.col-main .pages span.next,
.pager .pages span.previous,
.pager .pages span.next {
    color: rgba(29, 29, 27, 0.35) !important;
    cursor: default !important;
    font-size: 0 !important;
    width: 36px !important;
    padding: 0 !important;
    position: relative !important;
}
.toolbar .pages span.previous:hover,
.toolbar .pages span.next:hover,
.col-main .pages span.previous:hover,
.col-main .pages span.next:hover,
.pager .pages span.previous:hover,
.pager .pages span.next:hover {
    background: transparent !important;
    color: rgba(29, 29, 27, 0.35) !important;
}
.toolbar .pages span.previous::before,
.toolbar .pages span.next::before,
.col-main .pages span.previous::before,
.col-main .pages span.next::before,
.pager .pages span.previous::before,
.pager .pages span.next::before {
    content: '' !important;
    width: 12px !important;
    height: 12px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 12px 12px !important;
    display: inline-block !important;
}
.toolbar .pages span.previous::before,
.col-main .pages span.previous::before,
.pager .pages span.previous::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23243d77' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='15 18 9 12 15 6'/></svg>") !important;
    opacity: 0.4 !important;
}
.toolbar .pages span.next::before,
.col-main .pages span.next::before,
.pager .pages span.next::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23243d77' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'/></svg>") !important;
    opacity: 0.4 !important;
}
/* Active link (when there are multiple pages) */
.toolbar .pages a.previous,
.toolbar .pages a.next,
.col-main .pages a.previous,
.col-main .pages a.next,
.pager .pages a.previous,
.pager .pages a.next {
    width: 36px !important;
    padding: 0 !important;
    font-size: 0 !important;
    position: relative !important;
}
.toolbar .pages a.previous::before,
.toolbar .pages a.next::before,
.col-main .pages a.previous::before,
.col-main .pages a.next::before,
.pager .pages a.previous::before,
.pager .pages a.next::before {
    opacity: 1 !important;
}
.toolbar .pages .pagination,
.col-main .pages .pagination,
.pager .pages .pagination {
    color: rgba(29, 29, 27, 0.85) !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    padding: 0 16px !important;
}

/* KIES EEN CATEGORIE button (top of overview) */
.catalog-category-view .menu-link {
    display: inline-block !important;
    background: var(--hm-blue, #243d77) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 16px 22px 12px 22px !important;
    line-height: 1 !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    text-decoration: none !important;
    cursor: pointer !important;
    text-indent: 0 !important;
}
.catalog-category-view .menu-link:hover {
    background: #1a2d5a !important;
    color: #ffffff !important;
}

/* Category main menu dropdown (full width panel) */
.category-main-menu {
    position: relative !important;
}
.category-main-menu > .menu {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 0 !important;
    width: auto !important;
    min-width: 1420px !important;
    max-width: 1520px !important;
    background: #ffffff !important;
    border: 1px solid var(--hm-grey-200, #e4e1d6) !important;
    border-radius: 14px !important;
    box-shadow: 0 12px 32px rgba(36, 61, 119, 0.14) !important;
    padding: 24px 32px !important;
    z-index: 100 !important;
    box-sizing: border-box !important;
}
.category-main-menu .menubuilder-menu {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    background: none !important;
    border: none !important;
}

/* The wrapper div (with class nav-link-list) should be block */
#category-main-menu div.nav-link-list,
#category-main-menu .menubuilder-menu {
    display: block !important;
    grid-template-columns: none !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Top level columns grid (4 columns = main categories) - only the UL */
#category-main-menu ul.nav-link-list,
.category-main-menu ul.nav-link-list {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 24px 24px !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    width: 100% !important;
}
.category-main-menu ul.nav-link-list > li.level0 {
    display: flex !important;
    flex-direction: column !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    float: none !important;
    list-style: none !important;
    border: none !important;
}

/* Top-level link (category name header) - no wrap */
.category-main-menu ul.nav-link-list > li.level0 > a.level0 {
    display: block !important;
    color: var(--hm-blue, #243d77) !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    padding: 0 0 8px !important;
    margin: 0 0 10px !important;
    border-bottom: 2px solid var(--hm-yellow, #fbba00) !important;
    text-decoration: none !important;
    background: none !important;
    white-space: nowrap !important;
}
.category-main-menu ul.nav-link-list > li.level0 > a.level0:hover {
    color: var(--hm-yellow-dark, #d99f00) !important;
}

/* Sub-category list (flat vertical list inside each column) - target via ID
   because legacy rule uses #category-main-menu selector specificity */
#category-main-menu ul.level0,
#category-main-menu li.level0 ul,
.category-main-menu ul.level0,
.category-main-menu li.level0 ul {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    background: none !important;
    border: none !important;
    position: static !important;
    width: 100% !important;
    box-shadow: none !important;
}
.category-main-menu ul.level0 > li,
.category-main-menu li.level0 li {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    float: none !important;
    list-style: none !important;
    width: auto !important;
    border: none !important;
}
.category-main-menu ul.level0 > li > a,
.category-main-menu li.level0 li > a {
    display: block !important;
    color: rgba(29, 29, 27, 0.85) !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    padding: 6px 0 !important;
    margin: 0 !important;
    text-decoration: none !important;
    background: none !important;
    border: none !important;
    line-height: 1.4 !important;
}
.category-main-menu ul.level0 > li > a:hover,
.category-main-menu li.level0 li > a:hover {
    color: var(--hm-blue, #243d77) !important;
    background: none !important;
}
.category-main-menu ul.level0 > li > a span,
.category-main-menu li.level0 li > a span {
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
    color: inherit !important;
    font: inherit !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

/* Hide legacy decorations */
.category-main-menu .bg-left,
.category-main-menu .bg-right,
.category-main-menu .bg-menu-category,
.category-main-menu h4.no-display {
    display: none !important;
}

/* ============================================================
   Drijfhout homepage modernisation (content unchanged)
   - Modern card look for the info block (replaces yellow border)
   - Tighter grid layout for promo rows
   - Consistent rounded corners, subtle shadow, Outfit font
   ============================================================ */

/* Row 1 (flex row): allow children to stretch to equal height.
   Hide the legacy clearfix ::after which otherwise consumes a flex
   gap and pushes the right edge of the row inward. */
.cms-home .homewrapper-list .row1 {
    display: flex !important;
    gap: 24px !important;
    margin: 24px auto !important;
    max-width: 1400px !important;
    width: 1400px !important;
    align-items: stretch !important;
}
.cms-home .homewrapper-list .row1::after,
.cms-home .homewrapper-list .row2::after {
    display: none !important;
    content: none !important;
}
.cms-home .homewrapper-list .row2 {
    display: flex !important;
    gap: 20px !important;
    margin: 24px auto !important;
    max-width: 1400px !important;
    width: 1400px !important;
    align-items: stretch !important;
}

/* Info card (Balie afspraak + openingstijden + recycling + etc.) */
.cms-home .row1 > .header-vacature-voorpagina {
    flex: 1 1 0 !important;
    background: #ffffff !important;
    border: 1px solid var(--hm-grey-200, #e4e1d6) !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 16px rgba(36, 61, 119, 0.06) !important;
    padding: 32px 40px !important;
    width: auto !important;
    margin: 0 !important;
    float: none !important;
    position: relative !important;
}
.cms-home .row1 > .header-vacature-voorpagina:hover {
    transform: none !important;
    box-shadow: 0 4px 16px rgba(36, 61, 119, 0.06) !important;
}

/* Override the inline-styled .voorpaginainfo (yellow border, padding) */
.cms-home .voorpaginainfo {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
    border-radius: 0 !important;
    column-count: 2 !important;
    column-gap: 40px !important;
    column-rule: 1px solid var(--hm-grey-200, #e4e1d6) !important;
}

/* ---- Clean semantic markup for the info block (new CMS content) ---- */
.cms-home .voorpaginainfo .vp-heading {
    color: var(--hm-blue, #243d77) !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    display: inline-block !important;
    padding: 0 0 4px 0 !important;
    border-bottom: 2px solid var(--hm-yellow, #fbba00) !important;
    margin: 0 0 10px 0 !important;
    break-after: avoid !important;
}
/* Section separation via bottom spacing on the preceding block so that
   a heading at the top of a CSS column starts flush with the column top
   (matching BALIE AFSPRAAK in the first column) */
.cms-home .voorpaginainfo .vp-list,
.cms-home .voorpaginainfo .vp-phonelist,
.cms-home .voorpaginainfo p {
    margin-bottom: 20px !important;
}
.cms-home .voorpaginainfo .vp-list {
    list-style: none !important;
    padding: 0 !important;
    color: rgba(29, 29, 27, 0.85) !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
}
.cms-home .voorpaginainfo .vp-list li {
    padding: 0 0 4px 16px !important;
    position: relative !important;
    margin: 0 0 4px 0 !important;
    break-inside: avoid !important;
    list-style: none !important;
}
.cms-home .voorpaginainfo .vp-list li::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 9px !important;
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: var(--hm-yellow, #fbba00) !important;
}
.cms-home .voorpaginainfo .vp-phonelist {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    gap: 6px 16px !important;
    margin: 0 0 6px 0 !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
    color: rgba(29, 29, 27, 0.85) !important;
    break-inside: avoid !important;
}
.cms-home .voorpaginainfo .vp-phonelist dt {
    font-weight: 600 !important;
    color: var(--hm-blue, #243d77) !important;
    margin: 0 !important;
}
.cms-home .voorpaginainfo .vp-phonelist dd {
    margin: 0 !important;
}
/* Typography inside the info card */
.cms-home .voorpaginainfo p,
.cms-home .voorpaginainfo div {
    font-family: 'Outfit', sans-serif !important;
    line-height: 1.55 !important;
}
.cms-home .voorpaginainfo p {
    padding: 0 !important;
    margin: 0 0 10px 0 !important;
    text-align: left !important;
    font-size: 14px !important;
}
/* Section headings inside the info card: yellow underline labels */
.cms-home .voorpaginainfo p strong span[style*="fbba00"],
.cms-home .voorpaginainfo p strong span[style*="#fbba00"],
.cms-home .voorpaginainfo strong span[style*="fbba00"],
.cms-home .voorpaginainfo span[style*="fbba00"] {
    color: var(--hm-blue, #243d77) !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    display: inline-block !important;
    padding: 12px 0 4px 0 !important;
    border-bottom: 2px solid var(--hm-yellow, #fbba00) !important;
    margin: 0 0 10px 0 !important;
    break-after: avoid !important;
    width: auto !important;
}
/* Force paragraph containing a section heading to start on its own line
   and make its content flow as a block (needed because the CMS puts the
   header plus the following content in the same <p>). */
.cms-home .voorpaginainfo p:has(> strong > span[style*="fbba00"]),
.cms-home .voorpaginainfo p:has(strong span[style*="fbba00"]) {
    display: block !important;
    margin-top: 16px !important;
}
/* The <strong> that follows a yellow header (opening times, phone lists,
   etc.) should start on its own line with tighter spacing. */
.cms-home .voorpaginainfo p strong + strong,
.cms-home .voorpaginainfo p strong span[style*="0000ff"],
.cms-home .voorpaginainfo p span[style*="0000ff"] {
    display: block !important;
    margin-top: 4px !important;
    white-space: normal !important;
    word-spacing: -2px !important;
}
/* Break lines inside the blue opening-times spans nicely: each <br>
   already forces a new line, but tighten spacing. */
.cms-home .voorpaginainfo span[style*="0000ff"] > span {
    display: block !important;
    line-height: 1.5 !important;
}
/* Galvano heading is wrapped in plain <span style="color: #fbba00"> inside
   a <strong> — make it behave like the other section headers */
.cms-home .voorpaginainfo p > span[style*="color: #fbba00"],
.cms-home .voorpaginainfo p strong > span[style*="color: #fbba00"],
.cms-home .voorpaginainfo p > strong span[style*="color: #fbba00"] {
    color: var(--hm-blue, #243d77) !important;
}
/* Paragraphs of info text should not use the legacy left-padding */
.cms-home .voorpaginainfo p[style*="padding-left: 20px"],
.cms-home .voorpaginainfo p[style*="padding-left: 30px"] {
    padding-left: 0 !important;
}
/* Blue text bodies keep blue but use Outfit + sensible size */
.cms-home .voorpaginainfo p span[style*="243d77"],
.cms-home .voorpaginainfo span[style*="243d77"] {
    color: rgba(29, 29, 27, 0.85) !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
}
/* "Gesloten" blue-highlighted opening-times lines */
.cms-home .voorpaginainfo span[style*="0000ff"] {
    color: var(--hm-blue, #243d77) !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}
/* Kill forced font-size styles from CMS inline styles */
.cms-home .voorpaginainfo span[style*="font-size: large"],
.cms-home .voorpaginainfo span[style*="font-size: medium"],
.cms-home .voorpaginainfo span[style*="font-size: small"],
.cms-home .voorpaginainfo span[style*="font-size: 16px"] {
    font-size: 14px !important;
}
/* Avoid orphan headers / splitting paragraphs across columns */
.cms-home .voorpaginainfo p,
.cms-home .voorpaginainfo > div {
    break-inside: avoid !important;
    -webkit-column-break-inside: avoid !important;
    page-break-inside: avoid !important;
}
.cms-home .voorpaginainfo a {
    color: var(--hm-blue, #243d77) !important;
    text-decoration: underline !important;
    font-size: 14px !important;
    font-family: 'Outfit', sans-serif !important;
}
.cms-home .voorpaginainfo a:hover {
    color: var(--hm-yellow-dark, #d99f00) !important;
}
/* Bereikbaarheid phone-list block: allow wrap inside column */
.cms-home .voorpaginainfo > div[style*="width: 300px"] {
    width: 100% !important;
    margin-left: 0 !important;
    font-size: 13px !important;
}
.cms-home .voorpaginainfo > div[style*="width: 300px"] div {
    float: none !important;
    width: auto !important;
    display: flex !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 2px 0 !important;
}
.cms-home .voorpaginainfo > div[style*="width: 300px"] div > div:first-child {
    font-weight: 600 !important;
    color: var(--hm-blue, #243d77) !important;
}

/* Gouden Sieraden Handboek card (first row, right side) */
.cms-home .row1 > a {
    flex: 0 0 420px !important;
    display: block !important;
    text-decoration: none !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 16px rgba(36, 61, 119, 0.06) !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
    align-self: stretch !important;
}
.cms-home .row1 > a:hover {
    transform: none !important;
    box-shadow: 0 4px 16px rgba(36, 61, 119, 0.06) !important;
}
.cms-home .row1 > a .gouden-sieraden-handboek {
    width: 100% !important;
    height: 100% !important;
    background: #ffffff none !important;
    padding: 0 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    box-shadow: none !important;
    position: relative !important;
}
.cms-home .row1 > a .gouden-sieraden-handboek > p,
.cms-home .row1 > a .gouden-sieraden-handboek > div[style*="background-image"] {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 100% !important;
    border-radius: 14px !important;
    background-size: cover !important;
    background-position: center !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    letter-spacing: 0.5px !important;
    text-align: center !important;
    font-size: 0 !important;
}
/* Dark gradient overlay + title at bottom of handboek card.
   Scoped to the handboek card only (row1 with 2+ children); promo
   banners like Lengte Colliers / Laserlassers (row1 > a:only-child)
   must NOT get the dark gradient overlay. */
.cms-home .row1 > a:not(:only-child) .gouden-sieraden-handboek > p::before,
.cms-home .row1 > a:not(:only-child) .gouden-sieraden-handboek > div[style*="background-image"]::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.7) 100%) !important;
    border-radius: 14px !important;
}
.cms-home .row1 > a:not(:only-child) .gouden-sieraden-handboek > p::after {
    content: 'GOUDEN SIERADEN HANDBOEK' !important;
    position: absolute !important;
    left: 24px !important;
    right: 24px !important;
    bottom: 28px !important;
    color: #ffffff !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
    text-align: center !important;
    line-height: 1.2 !important;
}

/* Full-width promo banners (Lengte Colliers / Laserlassers) */
.cms-home .row1 > a:only-child,
.cms-home .row1 > a:first-child:last-child {
    flex: 1 1 100% !important;
    max-width: 100% !important;
}
.cms-home .row1 > a:only-child .gouden-sieraden-handboek > div[style*="background-image"],
.cms-home .row1 > a:first-child:last-child .gouden-sieraden-handboek > div[style*="background-image"] {
    width: 100% !important;
    height: 220px !important;
    min-height: 220px !important;
    max-width: none !important;
    display: block !important;
    padding: 0 !important;
    background-size: cover !important;
    background-position: center right !important;
    background-repeat: no-repeat !important;
}
.cms-home .row1 > a:only-child .gouden-sieraden-handboek p {
    font-family: 'Outfit', sans-serif !important;
    color: var(--hm-blue, #243d77) !important;
    text-shadow: none !important;
}
.cms-home .row1 > a:only-child .gouden-sieraden-handboek button,
.cms-home .row1 > a:first-child:last-child .gouden-sieraden-handboek button {
    background: var(--hm-yellow, #fbba00) !important;
    color: var(--hm-blue, #243d77) !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 14px 28px !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 4px 12px rgba(36, 61, 119, 0.12) !important;
    cursor: pointer !important;
    margin-top: 90px !important;
    margin-left: -540px !important;
}
.cms-home .row1 > a:only-child .gouden-sieraden-handboek button span,
.cms-home .row1 > a:first-child:last-child .gouden-sieraden-handboek button span {
    background: none !important;
    padding: 0 !important;
    color: inherit !important;
    font: inherit !important;
}

/* Row 2: slider + 2 product cards, consistent card look */
.cms-home .row2 > div {
    background: #ffffff !important;
    border: 1px solid var(--hm-grey-200, #e4e1d6) !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 16px rgba(36, 61, 119, 0.06) !important;
    overflow: hidden !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
    padding: 0 !important;
}
.cms-home .row2 > div:not(:last-child) {
    margin-right: 0 !important;
}
.cms-home .row2 > div:hover {
    transform: none !important;
    box-shadow: 0 4px 16px rgba(36, 61, 119, 0.06) !important;
}
.cms-home .row2 .slider {
    flex: 2 1 0 !important;
    width: auto !important;
}
.cms-home .row2 .product1,
.cms-home .row2 .product2 {
    flex: 1 1 0 !important;
    width: auto !important;
}
.cms-home .row2 .products-slider .item-box .content h2.product-name,
.cms-home .row2 .products-info .name h2.product-name {
    font-family: 'Outfit', sans-serif !important;
    color: var(--hm-blue, #243d77) !important;
    font-weight: 600 !important;
}
.cms-home .row2 .products-slider .item-box .content .button,
.cms-home .row2 .products-info .link-learn {
    background: var(--hm-blue, #243d77) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 12px 24px !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    text-decoration: none !important;
}
.cms-home .row2 .products-slider .item-box .content .button:hover,
.cms-home .row2 .products-info .link-learn:hover {
    background: #1a2d5a !important;
}

/* IMVO + Fournituren row (image-text + gouden-sieraden-handboek) */
.cms-home .row1 > .image-text {
    flex: 1 1 0 !important;
    background: #ffffff !important;
    border: 1px solid var(--hm-grey-200, #e4e1d6) !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 16px rgba(36, 61, 119, 0.06) !important;
    padding: 24px 32px !important;
    width: auto !important;
    margin: 0 !important;
    float: none !important;
}
.cms-home .row1 > .image-text .content .text {
    height: auto !important;
    font-family: 'Outfit', sans-serif !important;
}
.cms-home .row1 > .image-text .content .text p {
    font-family: 'Outfit', sans-serif !important;
    color: rgba(29, 29, 27, 0.85) !important;
    line-height: 1.55 !important;
    font-size: 14px !important;
}
.cms-home .row1 > .image-text .content .text strong {
    color: var(--hm-blue, #243d77) !important;
}
/* Button wrapper: lift off the card edge so the button "floats" */
.cms-home .row1 > .image-text .content div.button {
    right: 24px !important;
    bottom: 24px !important;
    position: absolute !important;
}
.cms-home .row1 > .image-text .button .button {
    background: var(--hm-yellow, #fbba00) !important;
    color: var(--hm-blue, #243d77) !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 14px 28px !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    cursor: pointer !important;
    box-shadow: 0 4px 16px rgba(36, 61, 119, 0.18) !important;
    margin: 0 !important;
}
.cms-home .row1 > .image-text .button .button:hover {
    background: var(--hm-yellow-dark, #d99f00) !important;
}
.cms-home .row1 > .image-text .button .button span {
    background: none !important;
    padding: 0 !important;
    color: inherit !important;
    font: inherit !important;
}
/* Kill the legacy sprite icon that overlays the button text */
.cms-home .row1 > .image-text .button .button > span::after,
.cms-home .row1 > .image-text .button .button > span > span::after {
    content: none !important;
    display: none !important;
    background: none !important;
}
.cms-home .row1 > .image-text .button .button > span,
.cms-home .row1 > .image-text .button .button > span > span {
    padding-left: 0 !important;
    position: static !important;
    background: none !important;
}

/* Products-tablet section (bottom of page) */
.cms-home .products-tablet {
    max-width: 1400px !important;
    margin: 40px auto !important;
}
.cms-home .products-tablet .category-products .products-grid {
    gap: 20px !important;
}

/* ============================================================
   Product detail page toolbar: match category list page styling.
   - "Terug naar overzicht" rendered as a white rounded button (left)
   - Prev / "Artikel X van Y" / Next rendered as a pager button group (right)
   ============================================================ */
.catalog-product-view .product-toolbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-bottom: 18px !important;
    font-family: 'Outfit', sans-serif !important;
}
.catalog-product-view .product-toolbar::after {
    display: none !important;
    content: none !important;
}
.catalog-product-view .product-toolbar .return-to-category {
    order: 1 !important;
    float: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 0 24px !important;
    height: 36px !important;
    background: #ffffff !important;
    border: 1px solid var(--hm-grey-200, #e4e1d6) !important;
    border-radius: 8px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: var(--hm-blue, #243d77) !important;
    text-decoration: none !important;
    cursor: pointer !important;
    line-height: 1 !important;
    transition: background 0.15s ease, border-color 0.15s ease !important;
}
.catalog-product-view .product-toolbar .return-to-category:hover {
    background: var(--hm-grey-100, #f0ede4) !important;
    border-color: var(--hm-grey-400, #949494) !important;
}
.catalog-product-view .product-toolbar .return-to-category > span {
    color: var(--hm-blue, #243d77) !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
}
.catalog-product-view .product-toolbar .return-to-category a {
    color: var(--hm-blue, #243d77) !important;
    text-decoration: none !important;
    padding: 0 !important;
    display: inline !important;
}
.catalog-product-view .product-toolbar .return-to-category a .category {
    color: inherit !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
}
/* Left chevron icon on the back button */
.catalog-product-view .product-toolbar .return-to-category::before {
    content: '' !important;
    display: inline-block !important;
    width: 12px !important;
    height: 12px !important;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23243d77' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='15 18 9 12 15 6'/></svg>") no-repeat center center !important;
    background-size: 12px 12px !important;
}

/* Pager button group: prev / Artikel X van Y / next */
.catalog-product-view .product-toolbar .links {
    order: 2 !important;
    float: none !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    background: #ffffff !important;
    border: 1px solid var(--hm-grey-200, #e4e1d6) !important;
    border-radius: 8px !important;
    height: 36px !important;
    overflow: hidden !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 12px !important;
}
.catalog-product-view .product-toolbar .links > * {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 36px !important;
    padding: 0 16px !important;
    color: var(--hm-blue, #243d77) !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    background: transparent !important;
    border: none !important;
    border-left: 1px solid var(--hm-grey-200, #e4e1d6) !important;
    margin: 0 !important;
    cursor: pointer !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    box-sizing: border-box !important;
}
.catalog-product-view .product-toolbar .links > *:first-child {
    border-left: none !important;
}
.catalog-product-view .product-toolbar .links a:hover {
    background: var(--hm-yellow, #fbba00) !important;
    color: var(--hm-blue, #243d77) !important;
}
/* Prev / Next as icon-only chevron buttons */
.catalog-product-view .product-toolbar .links .product-prev,
.catalog-product-view .product-toolbar .links .product-next {
    width: 36px !important;
    padding: 0 !important;
    font-size: 0 !important;
    background-image: none !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    text-indent: 0 !important;
    overflow: visible !important;
    position: relative !important;
}
.catalog-product-view .product-toolbar .links .product-prev::before,
.catalog-product-view .product-toolbar .links .product-next::before {
    content: '' !important;
    width: 12px !important;
    height: 12px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 12px 12px !important;
    display: inline-block !important;
}
.catalog-product-view .product-toolbar .links .product-prev::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23243d77' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='15 18 9 12 15 6'/></svg>") !important;
}
.catalog-product-view .product-toolbar .links .product-next::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23243d77' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'/></svg>") !important;
}
.catalog-product-view .product-toolbar .links .product-position {
    color: rgba(29, 29, 27, 0.85) !important;
    font-weight: 500 !important;
}

/* ============================================================
   MOBILE (<=900px) — Drijfhout full responsive sweep.
   This overrides the desktop-width forced values set earlier.
   ============================================================ */
@media (max-width: 900px) {

/* ---------- Global: kill horizontal overflow ---------- */
html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}
body, .wrapper, .page, .main-container, .main, .col-main, .col-right, .col-left {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
}
.main, .main-container {
    padding: 0 14px !important;
}
* {
    min-width: 0 !important;
}
img {
    max-width: 100% !important;
    height: auto !important;
}

/* ---------- Header: compact mobile bar with icon buttons ---------- */
.header-container {
    background: #ffffff !important;
    border-bottom: 1px solid var(--hm-grey-200, #e4e1d6) !important;
}
.page-header-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 12px 14px !important;
    gap: 8px !important;
    position: relative !important;
    background: #ffffff !important;
    z-index: 1100 !important;
}
.page-header-top .logo {
    flex: 0 0 auto !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: 150px !important;
    height: auto !important;
}
.page-header-top .logo img {
    max-width: 150px !important;
    height: auto !important;
    display: block !important;
}
/* Icon buttons (menu / search / cart): modern HM-styled pills */
.page-header-top .btn-menu,
.page-header-top .btn-search,
.page-header-top .btn-cart {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ffffff !important;
    border: 1px solid var(--hm-grey-200, #e4e1d6) !important;
    border-radius: 10px !important;
    width: 42px !important;
    height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    line-height: 1 !important;
    cursor: pointer !important;
    position: relative !important;
    color: var(--hm-blue, #243d77) !important;
    overflow: visible !important;
    text-indent: 0 !important;
}
.page-header-top .btn-menu:after,
.page-header-top .btn-search:after,
.page-header-top .btn-cart:after {
    content: '' !important;
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: 22px !important;
    height: 22px !important;
    display: block !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 22px 22px !important;
    text-indent: 0 !important;
}
.page-header-top .btn-menu:after {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23243d77' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><line x1='3' y1='6' x2='21' y2='6'/><line x1='3' y1='12' x2='21' y2='12'/><line x1='3' y1='18' x2='21' y2='18'/></svg>") !important;
}
.page-header-top .btn-search:after {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23243d77' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>") !important;
}
.page-header-top .btn-cart:after {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23243d77' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='21' r='1'/><circle cx='20' cy='21' r='1'/><path d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/></svg>") !important;
}
.page-header-top .btn-cart a {
    position: absolute !important;
    top: -6px !important;
    right: -6px !important;
    background: var(--hm-yellow, #fbba00) !important;
    border: none !important;
    color: var(--hm-blue, #243d77) !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    border-radius: 999px !important;
    width: 18px !important;
    height: 18px !important;
    line-height: 18px !important;
    text-align: center !important;
    z-index: 2 !important;
}
/* Hide the info button (redundant with menu) */
.page-header-top .btn-info {
    display: none !important;
}
/* Icon-row wrapper on the right */
.page-header-top .mobile-header-icons {
    display: inline-flex !important;
    gap: 8px !important;
    align-items: center !important;
}
/* Compact desktop top links on mobile: hidden */
.page-header-top > .links-cart,
.page-header-top > .nav-search,
.header-nav .main-menu-a,
.top-nav,
.nav-top {
    display: none !important;
}

/* Main menu bar (categories): horizontal scroll row.
   Override the legacy #header-nav absolute-positioned dropdown so the
   category bar simply sits inline below the logo row. */
#header-nav {
    display: block !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
    z-index: auto !important;
}
/* Hide the legacy top nav (Home/Over/Webwinkel/…) and wraper-box login
   strip inside #header-nav — those are now available via the drawer. */
#header-nav .main-menu-a,
#header-nav .wraper-box {
    display: none !important;
}
.header-container .header-nav,
.header-container .main-menu-b {
    width: auto !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}
.main-menu-b {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border-top: 1px solid var(--hm-grey-200, #e4e1d6) !important;
    background: #ffffff !important;
    scrollbar-width: none !important;
}
.main-menu-b::-webkit-scrollbar { display: none !important; }
.main-menu-b ul.nav-horizontal {
    display: flex !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    padding: 0 14px !important;
    margin: 0 !important;
    gap: 0 !important;
    justify-content: flex-start !important;
    min-width: max-content !important;
}
.main-menu-b ul.nav-horizontal li {
    flex: 0 0 auto !important;
    padding: 0 !important;
    margin: 0 !important;
}
.main-menu-b ul.nav-horizontal li a {
    padding: 14px 12px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
    white-space: nowrap !important;
    color: var(--hm-blue, #243d77) !important;
    display: block !important;
}
.main-menu-b ul li:first-child a { padding-left: 14px !important; }
.main-menu-b ul li:last-child a { padding-right: 14px !important; }

/* Mobile drawer panel (hidden by default, toggled via .mobile-open on body) */
.mobile-drawer {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: min(320px, 85vw) !important;
    background: #ffffff !important;
    box-shadow: 0 8px 32px rgba(36, 61, 119, 0.2) !important;
    transform: translateX(-100%) !important;
    transition: transform 0.25s ease !important;
    z-index: 9999 !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 20px 16px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
}
body.mobile-drawer-open .mobile-drawer {
    transform: translateX(0) !important;
}
.mobile-drawer-backdrop {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(36, 61, 119, 0.45) !important;
    z-index: 9998 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.25s ease !important;
}
body.mobile-drawer-open .mobile-drawer-backdrop {
    opacity: 1 !important;
    pointer-events: auto !important;
}
.mobile-drawer .drawer-close {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    border: 1px solid var(--hm-grey-200, #e4e1d6) !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    align-self: flex-end !important;
    cursor: pointer !important;
    margin-bottom: 16px !important;
    font-size: 0 !important;
    color: var(--hm-blue, #243d77) !important;
    position: relative !important;
}
.mobile-drawer .drawer-close:before {
    content: '' !important;
    width: 20px !important;
    height: 20px !important;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23243d77' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><line x1='18' y1='6' x2='6' y2='18'/><line x1='6' y1='6' x2='18' y2='18'/></svg>") no-repeat center !important;
}
.mobile-drawer .drawer-section {
    border-bottom: 1px solid var(--hm-grey-200, #e4e1d6) !important;
    padding: 12px 0 !important;
}
.mobile-drawer .drawer-section:last-child {
    border-bottom: none !important;
}
.mobile-drawer a {
    display: block !important;
    padding: 12px 8px !important;
    color: var(--hm-blue, #243d77) !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    text-decoration: none !important;
    border-radius: 8px !important;
}
.mobile-drawer a:hover, .mobile-drawer a:active {
    background: var(--hm-grey-100, #f0ede4) !important;
}
.mobile-drawer .drawer-title {
    font-size: 11px !important;
    color: var(--hm-grey-600, #64635d) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    font-weight: 700 !important;
    padding: 4px 8px !important;
    margin: 0 !important;
}

/* Search drawer overlay (slides down from top) */
.mobile-search-panel {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: #ffffff !important;
    box-shadow: 0 6px 16px rgba(36, 61, 119, 0.12) !important;
    transform: translateY(-100%) !important;
    transition: transform 0.25s ease !important;
    z-index: 9999 !important;
    padding: 14px 14px 16px !important;
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
}
body.mobile-search-open .mobile-search-panel {
    transform: translateY(0) !important;
}
.mobile-search-panel .search-close {
    flex: 0 0 42px !important;
    height: 42px !important;
    border: 1px solid var(--hm-grey-200, #e4e1d6) !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    cursor: pointer !important;
    font-size: 0 !important;
    position: relative !important;
}
.mobile-search-panel .search-close:before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23243d77' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><line x1='18' y1='6' x2='6' y2='18'/><line x1='6' y1='6' x2='18' y2='18'/></svg>") no-repeat center !important;
}
.mobile-search-panel input[type="text"],
.mobile-search-panel input[type="search"] {
    flex: 1 1 auto !important;
    height: 42px !important;
    border: 1px solid var(--hm-grey-200, #e4e1d6) !important;
    border-radius: 10px !important;
    padding: 0 16px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
    color: var(--hm-blue, #243d77) !important;
    background: #ffffff !important;
    width: auto !important;
    min-width: 0 !important;
}

/* ---------- Homepage: stack rows, single column info ---------- */
/* Unhide the info card that legacy @media (max-width:767px) hides */
.cms-home .header-vacature-voorpagina {
    display: block !important;
}
.cms-home .homewrapper-list .row1,
.cms-home .homewrapper-list .row2,
.cms-home .homewrapper-list .banner,
.cms-home .newsletter {
    width: auto !important;
    max-width: 100% !important;
    flex-direction: column !important;
    gap: 16px !important;
    margin: 16px 14px !important;
    padding: 0 !important;
}
.cms-home .homewrapper-list .row1 > *,
.cms-home .homewrapper-list .row2 > * {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}
.cms-home .header-vacature-voorpagina,
.cms-home .row1 > .image-text {
    padding: 20px !important;
}
.cms-home .voorpaginainfo {
    column-count: 1 !important;
    column-rule: none !important;
}
/* Tighten vertical spacing inside info card on mobile so it doesn't
   become an endless scroll. */
.cms-home .voorpaginainfo .vp-heading {
    margin: 0 0 8px 0 !important;
    font-size: 12px !important;
}
.cms-home .voorpaginainfo .vp-list,
.cms-home .voorpaginainfo .vp-phonelist,
.cms-home .voorpaginainfo p {
    margin-bottom: 16px !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
}
.cms-home .voorpaginainfo .vp-list li {
    padding: 0 0 2px 14px !important;
    margin-bottom: 2px !important;
}
.cms-home .header-vacature-voorpagina {
    padding: 18px 18px !important;
}
/* Handboek + promo banner images become responsive */
.cms-home .row1 > a {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
}
.cms-home .row1 > a .gouden-sieraden-handboek,
.cms-home .row1 > a .gouden-sieraden-handboek > p,
.cms-home .row1 > a .gouden-sieraden-handboek > div[style*="background-image"] {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 200px !important;
    height: 200px !important;
}
.cms-home .row1 > a:only-child .gouden-sieraden-handboek > div[style*="background-image"],
.cms-home .row1 > a:first-child:last-child .gouden-sieraden-handboek > div[style*="background-image"] {
    height: 180px !important;
    min-height: 180px !important;
}
/* Kill the huge margin-left on the promo button */
.cms-home .row1 > a:only-child .gouden-sieraden-handboek button,
.cms-home .row1 > a:first-child:last-child .gouden-sieraden-handboek button {
    margin-left: 20px !important;
    margin-top: 30px !important;
    padding: 12px 20px !important;
    font-size: 12px !important;
}
/* Promo banners (Lengte Colliers / Laserlassers) on mobile:
   the inline markup uses float:left;width:50% columns which breaks
   at narrow widths. Replace with a solid card-style layout that sits
   over a darkened version of the banner image. */
.cms-home .row1 > a:only-child .gouden-sieraden-handboek > div[style*="background-image"],
.cms-home .row1 > a:first-child:last-child .gouden-sieraden-handboek > div[style*="background-image"] {
    width: 100% !important;
    height: auto !important;
    min-height: 220px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    padding: 20px 20px 24px !important;
    background-size: cover !important;
    background-position: center !important;
    position: relative !important;
    border-radius: 14px !important;
    overflow: hidden !important;
}
/* Dark overlay for readability over the image */
.cms-home .row1 > a:only-child .gouden-sieraden-handboek > div[style*="background-image"]::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.75) 60%, rgba(255,255,255,0.4) 100%) !important;
    z-index: 0 !important;
    border-radius: 14px !important;
}
.cms-home .row1 > a:only-child .gouden-sieraden-handboek > div[style*="background-image"] > div {
    position: relative !important;
    z-index: 1 !important;
    float: none !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}
.cms-home .row1 > a:only-child .gouden-sieraden-handboek p,
.cms-home .row1 > a:only-child .gouden-sieraden-handboek p[style*="font-size: 32px"],
.cms-home .row1 > a:only-child .gouden-sieraden-handboek p[style*="font-size: 18px"] {
    color: var(--hm-blue, #243d77) !important;
    text-shadow: none !important;
    padding: 0 !important;
    margin: 0 0 8px 0 !important;
    font-family: 'Outfit', sans-serif !important;
    text-align: left !important;
    position: relative !important;
    z-index: 1 !important;
}
.cms-home .row1 > a:only-child .gouden-sieraden-handboek p[style*="font-size: 32px"] {
    font-size: 22px !important;
    font-weight: 700 !important;
    margin-bottom: 8px !important;
}
.cms-home .row1 > a:only-child .gouden-sieraden-handboek p[style*="font-size: 18px"] {
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.45 !important;
    margin-bottom: 4px !important;
}
.cms-home .row1 > a:only-child .gouden-sieraden-handboek button,
.cms-home .row1 > a:first-child:last-child .gouden-sieraden-handboek button {
    position: relative !important;
    z-index: 1 !important;
    margin: 14px 0 0 0 !important;
    padding: 12px 22px !important;
    font-size: 12px !important;
    background: var(--hm-yellow, #fbba00) !important;
    color: var(--hm-blue, #243d77) !important;
    border: none !important;
    border-radius: 10px !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    display: inline-block !important;
    align-self: flex-start !important;
    box-shadow: 0 2px 8px rgba(36, 61, 119, 0.15) !important;
}
/* IMVO card button: reset absolute positioning to float below content */
.cms-home .row1 > .image-text .content div.button {
    position: static !important;
    right: auto !important;
    bottom: auto !important;
    text-align: right !important;
    margin-top: 16px !important;
}
.cms-home .row1 > .image-text .content .text {
    height: auto !important;
    width: 100% !important;
}
.cms-home .row1 > .image-text .content .text img {
    width: 100% !important;
    height: auto !important;
    max-width: 260px !important;
    float: none !important;
    display: block !important;
    margin: 0 auto 16px auto !important;
}

/* Row 2: stack slider + product cards */
.cms-home .row2 .slider,
.cms-home .row2 .product1,
.cms-home .row2 .product2,
.cms-home .row2 > div {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
}
.cms-home .row2 .products-slider .item-box {
    display: flex !important;
    flex-direction: column !important;
}
.cms-home .row2 .products-slider .item-box .image {
    width: 100% !important;
    text-align: center !important;
}
.cms-home .row2 .products-slider .item-box .content {
    padding: 16px !important;
}

/* Newsletter banner: stack */
.cms-home .block.block-subscribe {
    flex-direction: column !important;
    gap: 12px !important;
    padding: 18px 18px 20px !important;
    align-items: stretch !important;
}
.cms-home .block.block-subscribe .block-title {
    display: block !important;
    padding-left: 52px !important;
    position: relative !important;
    min-height: 40px !important;
}
.cms-home .block.block-subscribe .block-title h3 { font-size: 16px !important; margin-bottom: 2px !important; }
.cms-home .block.block-subscribe .block-title h4 { font-size: 12px !important; }
/* Show the 5% korting badge on the right of the title */
.cms-home .block.block-subscribe .block-title::after {
    content: '5% korting' !important;
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: var(--hm-yellow, #fbba00) !important;
    color: var(--hm-blue, #243d77) !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 6px 10px !important;
    border-radius: 12px !important;
    line-height: 1 !important;
}
.cms-home .block.block-subscribe form {
    width: 100% !important;
    flex-wrap: wrap !important;
}
.cms-home .block.block-subscribe .block-content,
.cms-home .block.block-subscribe .input-box {
    width: 100% !important;
    flex: 1 1 100% !important;
}
.cms-home .block.block-subscribe input#newsletter-home,
.cms-home .block.block-subscribe input.input-text {
    border-radius: 10px 0 0 10px !important;
    width: auto !important;
    flex: 1 1 0 !important;
}
.cms-home .block.block-subscribe button.button {
    border-radius: 0 10px 10px 0 !important;
    padding: 0 18px !important;
}
.cms-home .block.block-subscribe form::after {
    display: none !important;
}

/* ---------- Category page ---------- */
.catalog-category-view .page-title h1,
.category-title h1 {
    font-size: 22px !important;
}
.catalog-category-view .breadcrumbs {
    font-size: 11px !important;
}
.catalog-category-view .category-menu-wrap {
    margin: 12px 0 0 0 !important;
}
.catalog-category-view .menu-link {
    padding: 12px 16px 10px !important;
    font-size: 11px !important;
}
/* Category dropdown panel: full width stacked */
.category-main-menu > .menu,
#category-main-menu {
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 16px !important;
    margin-top: 8px !important;
}
#category-main-menu ul.nav-link-list,
.category-main-menu ul.nav-link-list {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
}
.category-main-menu ul.nav-link-list > li.level0 > a.level0 {
    white-space: normal !important;
}

/* Product grid: 2 columns on small, 1 col on very small */
.products-grid,
.products-grid--max-3-col,
.products-grid--max-4-col {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    padding: 0 !important;
}
.products-grid li.item,
.products-grid li.item.first,
.products-grid li.item.last {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}
.products-grid .item .image img,
.products-grid .item img.product-image {
    max-width: 100% !important;
    height: auto !important;
}
/* Category page toolbar: stack */
.catalog-category-view .toolbar,
.catalog-category-view .toolbar-top,
.catalog-category-view .toolbar-bottom,
.catalog-category-view .toolbar-right {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    padding: 8px 0 !important;
}
.catalog-category-view .toolbar-right .overview-link,
.catalog-category-view div.overview-link {
    order: 1 !important;
    width: 100% !important;
    justify-content: center !important;
    margin: 0 !important;
}
.catalog-category-view .toolbar-right .toolbar,
.catalog-category-view .toolbar .pager {
    order: 2 !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
}

/* ---------- Product detail page ---------- */
.product-view .product-essential,
.product-essential {
    display: block !important;
}
.product-view .product-img-box,
.product-view .product-shop,
.product-img-box,
.product-shop {
    width: 100% !important;
    float: none !important;
    padding: 0 !important;
    margin-bottom: 16px !important;
}
.product-img-box .product-image {
    max-height: none !important;
}
.product-img-box .product-image img {
    max-width: 100% !important;
    max-height: 360px !important;
    height: auto !important;
}
.product-img-box .more-views ul {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 0 !important;
    justify-content: center !important;
}
.product-img-box .more-views ul li {
    width: calc((100% - 16px) / 3) !important;
}
.product-img-box .more-views ul li img {
    width: 100% !important;
    height: auto !important;
}
.product-shop .product-name h1,
.product-name h1 {
    font-size: 22px !important;
}
/* Product toolbar: stack back button + pager vertically */
.catalog-product-view .product-toolbar {
    flex-direction: column !important;
    gap: 10px !important;
    align-items: stretch !important;
}
.catalog-product-view .product-toolbar .return-to-category,
.catalog-product-view .product-toolbar .links {
    width: 100% !important;
    justify-content: center !important;
}
.catalog-product-view .product-toolbar .links > * {
    flex: 1 1 0 !important;
}
.catalog-product-view .product-toolbar .links .product-prev,
.catalog-product-view .product-toolbar .links .product-next {
    flex: 0 0 36px !important;
}

/* Product description / SPECIFICATIES wrap */
.product-collateral,
.product-essential .description,
.product-shop .std {
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
}

/* ---------- Cart page ---------- */
.checkout-cart-index .col-main > .cart,
.checkout-cart-index .col-main > .cart.display-single-price,
.checkout-cart-index .col-main > div.cart.display-single-price,
body.checkout-cart-index .col-main > .cart.display-single-price {
    display: block !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    grid-template-areas: none !important;
    grid-template: none !important;
    gap: 0 !important;
    width: auto !important;
    max-width: 100% !important;
}
.checkout-cart-index .col-main > .cart > form,
.checkout-cart-index .cart > form,
.checkout-cart-index .cart.display-single-price > form {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 100% !important;
}
/* The cart.display-single-price grid on desktop causes issues; reset */
.checkout-cart-index .cart-table-wrapper,
.checkout-cart-index .cart-table {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}
.checkout-cart-index .col-main > .cart > .page-title,
.checkout-cart-index .cart-table-wrapper,
.checkout-cart-index .cart > form,
.checkout-cart-index .cart-totals-wrapper,
.checkout-cart-index .cart-forms {
    grid-column: auto !important;
    grid-row: auto !important;
    width: 100% !important;
    float: none !important;
    flex: 1 1 auto !important;
    margin: 0 0 16px 0 !important;
    padding: 16px !important;
    box-sizing: border-box !important;
}
.checkout-cart-index .cart-totals,
.checkout-cart-index .cart .totals {
    flex: 1 1 auto !important;
    width: 100% !important;
    padding: 20px !important;
}
/* Cart table: collapse into card-style rows on mobile */
.checkout-cart-index .cart-table,
.checkout-cart-index .cart-table-wrapper .cart-table {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border: none !important;
}
.checkout-cart-index .cart-table thead,
.checkout-cart-index .cart-table colgroup {
    display: none !important;
}
.checkout-cart-index .cart-table tbody {
    display: block !important;
    width: 100% !important;
}
.checkout-cart-index .cart-table tbody tr {
    display: grid !important;
    grid-template-columns: 84px 1fr auto !important;
    grid-template-areas:
        'image name remove'
        'image qty price'
        'image actions actions' !important;
    gap: 4px 12px !important;
    width: 100% !important;
    margin-bottom: 14px !important;
    padding: 14px !important;
    background: #ffffff !important;
    border: 1px solid var(--hm-grey-200, #e4e1d6) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    align-items: start !important;
}
.checkout-cart-index .cart-table tbody tr td {
    display: block !important;
    width: auto !important;
    border: none !important;
    padding: 0 !important;
    text-align: left !important;
    box-sizing: border-box !important;
}
.checkout-cart-index .cart-table td.product-cart-image {
    grid-area: image !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 84px !important;
    max-width: 84px !important;
}
.checkout-cart-index .cart-table td.product-cart-image img {
    max-width: 80px !important;
    width: 80px !important;
    height: auto !important;
    border-radius: 8px !important;
}
.checkout-cart-index .cart-table td.product-cart-info {
    grid-area: name !important;
    min-width: 0 !important;
}
.checkout-cart-index .cart-table td.product-cart-info .product-name,
.checkout-cart-index .cart-table td.product-cart-info h2 {
    font-family: 'Outfit', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--hm-blue, #243d77) !important;
    margin: 0 0 4px 0 !important;
    line-height: 1.3 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}
.checkout-cart-index .cart-table td.product-cart-info .product-name a {
    color: inherit !important;
    text-decoration: none !important;
}
.checkout-cart-index .cart-table td.product-cart-info .sku,
.checkout-cart-index .cart-table td.product-cart-info .item-options {
    font-size: 11px !important;
    color: rgba(29, 29, 27, 0.6) !important;
    margin: 2px 0 !important;
}
.checkout-cart-index .cart-table td.product-cart-price {
    grid-area: price !important;
    text-align: right !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--hm-blue, #243d77) !important;
    align-self: center !important;
}
.checkout-cart-index .cart-table td.product-cart-price .price {
    font-size: 13px !important;
    font-weight: 600 !important;
}
.checkout-cart-index .cart-table td.product-cart-actions {
    grid-area: qty !important;
    align-self: center !important;
    text-align: left !important;
}
.checkout-cart-index .cart-table td.product-cart-total {
    display: none !important;
}
.checkout-cart-index .cart-table td.product-cart-remove {
    grid-area: remove !important;
    text-align: right !important;
    align-self: start !important;
}
.checkout-cart-index .cart-table td.product-cart-remove a,
.checkout-cart-index .cart-table td.product-cart-remove button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    border-radius: 8px !important;
    border: 1px solid var(--hm-grey-200, #e4e1d6) !important;
    background: #ffffff !important;
    color: var(--hm-blue, #243d77) !important;
    font-size: 0 !important;
    text-decoration: none !important;
    position: relative !important;
    padding: 0 !important;
}
.checkout-cart-index .cart-table td.product-cart-remove a::before,
.checkout-cart-index .cart-table td.product-cart-remove button::before {
    content: '' !important;
    width: 16px !important;
    height: 16px !important;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23243d77' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><line x1='18' y1='6' x2='6' y2='18'/><line x1='6' y1='6' x2='18' y2='18'/></svg>") no-repeat center !important;
}
/* Qty stepper */
.checkout-cart-index .cart-table td.product-cart-actions .qty-wrapper,
.checkout-cart-index .cart-table td.product-cart-actions input.qty {
    max-width: 120px !important;
}

/* ---------- One-page checkout (shipping / billing / payment) ---------- */
.checkout-onepage-index .col-main,
.checkout-onepage-index .col-right {
    width: 100% !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 0 16px 0 !important;
}
.checkout-onepage-index .opc {
    padding: 0 !important;
    margin: 0 !important;
}
.checkout-onepage-index .opc li.section {
    display: block !important;
    width: 100% !important;
    background: #ffffff !important;
    border: 1px solid var(--hm-grey-200, #e4e1d6) !important;
    border-radius: 12px !important;
    padding: 16px !important;
    margin: 0 0 12px 0 !important;
    box-shadow: none !important;
}
.checkout-onepage-index .opc .step-title {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 0 8px 0 !important;
    border-bottom: 1px solid var(--hm-grey-200, #e4e1d6) !important;
    margin-bottom: 12px !important;
}
.checkout-onepage-index .opc .step-title h2 {
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: var(--hm-blue, #243d77) !important;
    margin: 0 !important;
}
.checkout-onepage-index .opc .step {
    padding: 0 !important;
}
.checkout-onepage-index .opc .form-list {
    display: block !important;
}
.checkout-onepage-index .opc .form-list li {
    display: block !important;
    width: 100% !important;
    margin-bottom: 12px !important;
    padding: 0 !important;
}
.checkout-onepage-index .opc .form-list li.fields {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}
.checkout-onepage-index .opc .form-list li.fields .field {
    flex: 1 1 100% !important;
    min-width: 0 !important;
}
.checkout-onepage-index .opc .form-list label {
    display: block !important;
    float: none !important;
    width: auto !important;
    max-width: none !important;
    font-size: 12px !important;
    color: var(--hm-blue, #243d77) !important;
    margin-bottom: 6px !important;
    padding: 0 !important;
}
.checkout-onepage-index .opc .form-list .input-box {
    display: block !important;
    float: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
}
.checkout-onepage-index .opc .form-list input,
.checkout-onepage-index .opc .form-list select,
.checkout-onepage-index .opc .form-list textarea {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 44px !important;
    padding: 0 14px !important;
    border: 1px solid var(--hm-grey-200, #e4e1d6) !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
    color: var(--hm-blue, #243d77) !important;
    box-sizing: border-box !important;
}
.checkout-onepage-index .opc .buttons-set {
    display: flex !important;
    flex-direction: column-reverse !important;
    gap: 10px !important;
    padding: 12px 0 0 0 !important;
    margin: 0 !important;
    border-top: 1px solid var(--hm-grey-200, #e4e1d6) !important;
}
.checkout-onepage-index .opc .buttons-set button.button {
    width: 100% !important;
    height: 52px !important;
    min-height: 52px !important;
    line-height: 52px !important;
    padding: 0 !important;
    border-radius: 12px !important;
    background: var(--hm-blue, #243d77) !important;
    color: #ffffff !important;
    border: none !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    font-size: 14px !important;
}
.checkout-onepage-index .opc .buttons-set p.back-link,
.checkout-onepage-index .opc .buttons-set a {
    text-align: center !important;
    float: none !important;
    margin: 0 !important;
    font-size: 13px !important;
    color: var(--hm-blue, #243d77) !important;
}
/* Review table: card-style like cart-table */
.checkout-onepage-index #checkout-review-table {
    width: 100% !important;
}
.checkout-onepage-index #checkout-review-table thead {
    display: none !important;
}
.checkout-onepage-index #checkout-review-table tbody,
.checkout-onepage-index #checkout-review-table tr {
    display: block !important;
    width: 100% !important;
}
.checkout-onepage-index #checkout-review-table td {
    display: block !important;
    width: 100% !important;
    border: none !important;
    padding: 4px 0 !important;
    text-align: left !important;
    font-size: 13px !important;
}
.checkout-onepage-index #checkout-review-table tfoot td {
    padding: 8px 0 !important;
    font-weight: 600 !important;
    border-top: 1px solid var(--hm-grey-200, #e4e1d6) !important;
}
/* Checkout progress sidebar: below main */
.checkout-onepage-index .block-progress {
    width: 100% !important;
    margin-top: 12px !important;
    padding: 16px !important;
    background: #ffffff !important;
    border: 1px solid var(--hm-grey-200, #e4e1d6) !important;
    border-radius: 12px !important;
}
.checkout-cart-index .cart-totals-wrapper > .checkout-types.bottom {
    width: 100% !important;
    max-width: 100% !important;
}
.checkout-cart-index .cart-totals-wrapper > .checkout-types.bottom button.button {
    width: 100% !important;
    height: 52px !important;
    min-height: 52px !important;
    line-height: 52px !important;
}

/* ---------- Account / login / register pages ---------- */
.customer-account-login .col-main > form,
.customer-account-create .col-main,
[class*="customer-account"] .col-main,
[class*="customer-account"] .col-left,
[class*="customer-account"] .col-right {
    width: 100% !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 0 16px 0 !important;
}
/* Sidebar menu above content on mobile */
[class*="customer-account"] .col-left {
    order: 1 !important;
    margin-bottom: 16px !important;
}
[class*="customer-account"] .main {
    display: flex !important;
    flex-direction: column !important;
}
[class*="customer-account"] .block-account,
[class*="customer-account"] .block-dashboard-addresses,
[class*="customer-account"] .block-title {
    width: 100% !important;
}
/* Login page 2-col set becomes single column */
.account-login .col2-set {
    display: block !important;
}
.account-login .col2-set .col-1,
.account-login .col2-set .col-2 {
    width: 100% !important;
    float: none !important;
    padding: 20px !important;
    margin-bottom: 16px !important;
}
.account-login .registered-users ul li input,
.account-login .new-users ul li input {
    width: 100% !important;
    min-width: 0 !important;
}
/* Account dashboard: box-info stacks to 1 column */
[class*="customer-account"] .box-info {
    grid-template-columns: 1fr !important;
}
[class*="customer-account"] .box-info > .col2-set {
    grid-template-columns: 1fr !important;
}
/* Account edit form: stack label above input */
[class*="customer-account"] .col-main .form-list li,
[class*="customer-account"] .col-main .form-list li.fields .field {
    flex-wrap: wrap !important;
    gap: 6px !important;
}
[class*="customer-account"] .col-main .form-list li label,
[class*="customer-account"] .col-main .form-list li.fields .field label {
    flex: 0 0 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    font-size: 12px !important;
}
[class*="customer-account"] .col-main .form-list li .input-box,
[class*="customer-account"] .col-main .form-list li.fields .field .input-box {
    flex: 1 1 100% !important;
    max-width: 100% !important;
}
[class*="customer-account"] .col-main input.input-text,
[class*="customer-account"] .col-main input[type="text"],
[class*="customer-account"] .col-main input[type="email"],
[class*="customer-account"] .col-main input[type="password"],
[class*="customer-account"] .col-main input[type="tel"],
[class*="customer-account"] .col-main select,
[class*="customer-account"] .col-main textarea {
    max-width: 100% !important;
    width: 100% !important;
}
/* Address book cards: 1 column */
.customer-address-index .col-main .addresses-primary ol,
.customer-address-index .col-main .addresses-additional > ol {
    grid-template-columns: 1fr !important;
}

/* ---------- CMS pages (Recycling, etc.) ---------- */
/* Force the grid/flex main-container to a single column on mobile so
   col-main can take full width. The legacy 2-col grid leaves col-main
   at 2px wide. */
.cms-page-view .main-container,
.cms-page-view .main-container.col2-right-layout,
.cms-page-view .main-container.col2-left-layout,
.cms-page-view .main-container.col1-layout,
.customer-account .main-container,
.checkout-cart-index .main-container {
    display: block !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
}
.cms-page-view .main {
    display: block !important;
}
.cms-page-view .col-main,
.cms-page-view .col-right {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    padding: 0 !important;
    grid-column: auto !important;
    grid-row: auto !important;
}
.cms-page-view .col-right {
    margin-top: 24px !important;
}
/* Position:fixed cms-icon badge: kill it on mobile so it doesn't
   overlap text content */
.cms-page-view .cms-icon {
    position: static !important;
    display: none !important;
}
.cms-page-view .page-title h1 {
    font-size: 22px !important;
    width: auto !important;
    display: block !important;
    margin: 12px 0 16px !important;
}
.cms-page-view .std {
    width: 100% !important;
}
.cms-page-view .std p,
.cms-page-view .std h2,
.cms-page-view .std h3,
.cms-page-view .std h4,
.cms-page-view .std h5 {
    width: auto !important;
    max-width: 100% !important;
    display: block !important;
}
.cms-page-view .std img {
    max-width: 100% !important;
    height: auto !important;
    float: none !important;
    display: block !important;
    margin: 12px auto !important;
}
.cms-page-view .rechterkolom-recycling,
.cms-page-view .rechterkolom {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 16px 0 !important;
    padding: 16px !important;
}

/* ---------- Footer ---------- */
.footer-container {
    padding: 0 !important;
    margin-top: 40px !important;
}
.footer {
    padding: 32px 20px 24px !important;
    max-width: 100% !important;
    width: auto !important;
}
.footer .main-content {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
}
.footer .main-content > * {
    width: 100% !important;
    float: none !important;
    margin: 0 0 28px 0 !important;
    padding: 0 !important;
}
.footer .main-content > *:last-child {
    margin-bottom: 0 !important;
}

/* Show the contact-list (phone numbers) */
.footer .main-content .contact-list {
    display: block !important;
}
.footer .contact-list ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.footer .contact-list ul li {
    display: block !important;
    padding: 10px 0 !important;
    color: #ffffff !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 13px !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}
.footer .contact-list ul li:last-child {
    border-bottom: none !important;
}
.footer .contact-list .cl-label {
    display: block !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    font-size: 10px !important;
    letter-spacing: 0.8px !important;
    color: rgba(255,255,255,0.6) !important;
    margin-bottom: 4px !important;
    line-height: 1.2 !important;
}
/* Strip the <br> that CMS markup adds inside the label */
.footer .contact-list .cl-label br {
    display: none !important;
}
.footer .contact-list .cl-phone {
    display: none !important;
}
.footer .contact-list .cl-num {
    display: block !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    color: #ffffff !important;
    letter-spacing: 0.2px !important;
    line-height: 1.3 !important;
    font-variant-numeric: tabular-nums !important;
}

/* Contact info block (.contact) */
.footer .main-content .contact {
    display: block !important;
}
.footer .contact h3,
.footer .contact-list-title,
.footer .main-content h3,
.footer .main-content h4 {
    font-family: 'Outfit', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: #ffffff !important;
    margin: 0 0 14px 0 !important;
    padding: 0 0 6px 0 !important;
    border-bottom: 2px solid var(--hm-yellow, #fbba00) !important;
    display: inline-block !important;
}
.footer .contact p,
.footer .contact address {
    color: rgba(255,255,255,0.85) !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
    margin: 0 0 4px 0 !important;
    font-style: normal !important;
}
.footer .contact a {
    color: #ffffff !important;
    text-decoration: underline !important;
}

/* Menu lists (producten / algemeen) */
.footer .menu-producten,
.footer .menu-algemeen {
    display: block !important;
}
.footer .menu-producten ul,
.footer .menu-algemeen ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.footer .menu-producten ul li,
.footer .menu-algemeen ul li {
    padding: 0 !important;
    margin: 0 !important;
}
.footer .menu-producten ul li a,
.footer .menu-algemeen ul li a {
    display: block !important;
    padding: 10px 0 !important;
    color: rgba(255,255,255,0.9) !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 13px !important;
    text-decoration: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}
.footer .menu-producten ul li:last-child a,
.footer .menu-algemeen ul li:last-child a {
    border-bottom: none !important;
}

/* Newsletter box in footer */
.footer .newsletter-box,
.footer .menu-newsletter .newsletter-box {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}
.footer .menu-newsletter {
    display: block !important;
    flex-direction: initial !important;
}
.footer .newsletter-box .block.block-subscribe {
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    border-radius: 12px !important;
    padding: 16px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
}
.footer .newsletter-box .block-title {
    padding: 0 !important;
    margin: 0 !important;
}
.footer .newsletter-box .block-title::before,
.footer .newsletter-box .block-title::after {
    display: none !important;
    content: none !important;
}
.footer .newsletter-box .block-title h3,
.footer .newsletter-box .block-title h4 {
    color: #ffffff !important;
    background: none !important;
    border: none !important;
}
.footer .newsletter-box form {
    display: flex !important;
    gap: 0 !important;
    background: none !important;
    width: 100% !important;
}
.footer .newsletter-box input.input-text {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    height: 44px !important;
    border: none !important;
    border-radius: 10px 0 0 10px !important;
    background: #ffffff !important;
    padding: 0 14px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 13px !important;
    color: var(--hm-blue, #243d77) !important;
}
.footer .newsletter-box button.button {
    flex: 0 0 auto !important;
    height: 44px !important;
    padding: 0 20px !important;
    border: none !important;
    border-radius: 0 10px 10px 0 !important;
    background: var(--hm-yellow, #fbba00) !important;
    color: var(--hm-blue, #243d77) !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin: 0 !important;
}

/* Bottom row: logo + copyright stacked */
.footer .bottom {
    display: block !important;
    text-align: center !important;
    padding: 24px 0 0 0 !important;
    border-top: 1px solid rgba(255,255,255,0.12) !important;
    margin-top: 8px !important;
}
.footer .bottom .small-logo {
    display: block !important;
    margin: 0 auto 16px auto !important;
    width: auto !important;
    max-width: 180px !important;
    float: none !important;
}
.footer .bottom .small-logo img {
    width: 100% !important;
    height: auto !important;
    max-width: 180px !important;
}
.footer .bottom address,
.footer .bottom .disclaimer {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    color: rgba(255,255,255,0.65) !important;
    font-size: 11px !important;
    line-height: 1.6 !important;
    font-family: 'Outfit', sans-serif !important;
    font-style: normal !important;
    padding: 0 !important;
    margin: 0 !important;
}
/* Payment/delivery icons bar */
.footer .bottom .payment-icons,
.footer .bottom .mikropakket,
.footer .bottom .ideal {
    display: inline-block !important;
    max-width: 120px !important;
    height: auto !important;
    margin: 12px 4px !important;
    vertical-align: middle !important;
}
/* Social icons */
.footer .facebook, .footer .instagram {
    display: inline-block !important;
    margin: 0 6px !important;
}

/* ---------- Toolbars / pagers: smaller buttons ---------- */
.toolbar .pages,
.col-main .pages,
.pager .pages {
    height: 40px !important;
}
.toolbar .pages > *,
.col-main .pages > *,
.pager .pages > * {
    height: 40px !important;
    padding: 0 10px !important;
    font-size: 11px !important;
}

/* Buttons / inputs: good touch targets */
button, input[type="submit"], .button {
    min-height: 44px !important;
}

/* Neutralise legacy inline wysiwyg / mobile styling that still leaks in */
.voorpaginainfo {
    background: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
}
/* The .mobile-menu inside .banner contains a duplicate info-block from
   legacy code; hide its direct content, but keep .mobile-menu itself
   displayed because the .newsletter sibling lives at the same level. */
.cms-home .banner .mobile-menu > .voorpaginainfo,
.cms-home .banner .mobile-menu > .nav-horizontal,
.cms-home .banner .mobile-menu > .menubuilder-menu {
    display: none !important;
}
.cms-home .banner {
    display: block !important;
}
.cms-home .banner .mobile-menu {
    display: block !important;
}
.cms-home .banner .newsletter {
    display: block !important;
    margin-top: 16px !important;
}
.mobile-header-nieuws, .mobile-header-ups {
    display: none !important;
}
img.image.level0 {
    border-radius: 0 !important;
    box-shadow: none !important;
}

} /* end @media (max-width: 900px) */

/* ---------- Extra-small phones (<=430px) ---------- */
@media (max-width: 430px) {
.products-grid,
.products-grid--max-3-col,
.products-grid--max-4-col {
    grid-template-columns: 1fr !important;
}
.cms-home .row2 {
    gap: 12px !important;
}
}

/* ============================================================
   /webwinkel CMS page — HM Precious Metals brand styling
   ============================================================ */

/* Remove the outer content-box wrapper that other CMS pages get */
.cms-page-view.cms-webwinkel .col-main {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

/* Rows: match site-wide 1400px max-width, no side padding so cards
   line up flush with the banner and newsletter bar above. */
.cms-webwinkel .homewrapper-list .row1,
.cms-webwinkel .homewrapper-list .row2,
.cms-webwinkel .share-email,
.cms-webwinkel .bottom-products {
    max-width: 1400px !important;
    width: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 !important;
}
.cms-webwinkel .homewrapper-list .row1,
.cms-webwinkel .homewrapper-list .row2 {
    display: flex !important;
    gap: 24px !important;
    margin-top: 28px !important;
    margin-bottom: 28px !important;
    align-items: stretch !important;
}
.cms-webwinkel .homewrapper-list .row1::after,
.cms-webwinkel .homewrapper-list .row2::after {
    display: none !important;
    content: none !important;
}

/* --- Banner: category tiles + newsletter --- */
.cms-webwinkel .banner {
    max-width: 1400px !important;
    width: auto !important;
    margin: 0 auto 0 auto !important;
}
.cms-webwinkel .banner > .image,
.cms-webwinkel .banner > div.image {
    display: block !important;
    min-height: 360px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    position: relative !important;
}
.cms-webwinkel .banner > .image > img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    position: absolute !important;
    inset: 0 !important;
}
/* Category icon tiles: centered horizontally + vertically over the banner image */
.cms-webwinkel .banner .menu {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 2 !important;
}
.cms-webwinkel .banner .menu .mini-menubuilder-menu {
    max-width: 1000px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
}
.cms-webwinkel .banner .menu .header-nav {
    display: block !important;
}
.cms-webwinkel .banner .menu .nav-horizontal {
    display: flex !important;
    justify-content: center !important;
    gap: 20px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.cms-webwinkel .banner .menu .nav-horizontal li {
    flex: 0 0 auto !important;
    text-align: center !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.cms-webwinkel .banner .menu .nav-horizontal li a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-decoration: none !important;
    color: #ffffff !important;
    gap: 12px !important;
    padding: 24px 32px !important;
    background: rgba(36, 61, 119, 0.75) !important;
    border-radius: 16px !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    transition: background 0.2s ease !important;
    border: none !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15) !important;
    min-width: 140px !important;
}
.cms-webwinkel .banner .menu .nav-horizontal li a:hover {
    background: rgba(36, 61, 119, 0.92) !important;
}
.cms-webwinkel .banner .menu img.image.level0 {
    width: 64px !important;
    height: 64px !important;
    max-height: 64px !important;
    object-fit: contain !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: block !important;
}
.cms-webwinkel .banner .menu img.image-hover {
    display: none !important;
}
.cms-webwinkel .banner .menu span.level0.icon {
    font-family: 'Outfit', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: #ffffff !important;
}
.cms-webwinkel .banner .menu span.subtitle {
    display: none !important;
}
/* Newsletter inside banner: reuse the home page subscribe styling.
   The .cms-home rules don't apply here, so duplicate the key ones. */
.cms-webwinkel .banner .newsletter {
    max-width: 1400px !important;
    margin: 20px auto 0 !important;
    display: block !important;
}
.cms-webwinkel .block.block-subscribe {
    width: 100% !important;
    background: linear-gradient(135deg, var(--hm-blue, #243d77) 0%, #1a2d5a 100%) !important;
    border-radius: 14px !important;
    padding: 18px 32px !important;
    box-shadow: 0 4px 16px rgba(36, 61, 119, 0.12) !important;
    display: flex !important;
    align-items: center !important;
    gap: 24px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}
.cms-webwinkel .block.block-subscribe .block-title {
    background: none !important;
    padding: 0 0 0 56px !important;
    margin: 0 !important;
    border: none !important;
    flex: 0 0 auto !important;
    position: relative !important;
}
.cms-webwinkel .block.block-subscribe .block-title::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: var(--hm-yellow, #fbba00) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23243d77' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'/></svg>") no-repeat center center !important;
    background-size: 20px 20px !important;
}
.cms-webwinkel .block.block-subscribe .block-title h3,
.cms-webwinkel .block.block-subscribe .block-title h4 {
    color: #ffffff !important;
    font-family: 'Outfit', sans-serif !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    width: auto !important;
}
.cms-webwinkel .block.block-subscribe .block-title h3 {
    font-size: 18px !important;
    font-weight: 600 !important;
    margin-bottom: 2px !important;
}
.cms-webwinkel .block.block-subscribe .block-title h4 {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: rgba(255,255,255,0.85) !important;
}
.cms-webwinkel .block.block-subscribe form {
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    float: none !important;
    background: none !important;
    margin: 0 !important;
    position: relative !important;
}
.cms-webwinkel .block.block-subscribe form::after {
    content: '5% korting' !important;
    background: var(--hm-yellow, #fbba00) !important;
    color: var(--hm-blue, #243d77) !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    padding: 8px 16px !important;
    border-radius: 14px !important;
    position: static !important;
    flex: 0 0 auto !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15) !important;
    white-space: nowrap !important;
    height: auto !important;
    min-height: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
}
.cms-webwinkel .block.block-subscribe .block-content,
.cms-webwinkel .block.block-subscribe .input-box {
    flex: 1 1 0 !important;
    width: auto !important;
    display: flex !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
}
.cms-webwinkel .block.block-subscribe input.input-text {
    flex: 1 1 auto !important;
    height: 44px !important;
    padding: 0 20px !important;
    border: none !important;
    border-radius: 10px 0 0 10px !important;
    background: #ffffff !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
    color: var(--hm-blue, #243d77) !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    font-style: normal !important;
}
.cms-webwinkel .block.block-subscribe button.button {
    flex: 0 0 auto !important;
    height: 44px !important;
    line-height: 44px !important;
    padding: 0 28px !important;
    border: none !important;
    border-radius: 0 10px 10px 0 !important;
    background: var(--hm-yellow, #fbba00) !important;
    color: var(--hm-blue, #243d77) !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    cursor: pointer !important;
    margin: 0 !important;
    position: relative !important;
    top: auto !important;
    right: auto !important;
}
.cms-webwinkel .block.block-subscribe button.button span {
    background: none !important;
    padding: 0 !important;
    color: inherit !important;
    font: inherit !important;
}

/* --- USP list (row1 left) --- */
.cms-webwinkel .row1 .usp {
    flex: 1 1 0 !important;
    background: #ffffff !important;
    border: 1px solid var(--hm-grey-200, #e4e1d6) !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 16px rgba(36, 61, 119, 0.06) !important;
    padding: 32px 36px !important;
    float: none !important;
    width: auto !important;
    position: static !important;
}
.cms-webwinkel .row1 .usp .text {
    padding: 0 !important;
}
.cms-webwinkel .row1 .usp .text > p:first-child {
    display: none !important;
}
.cms-webwinkel .row1 .usp ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.cms-webwinkel .row1 .usp li {
    background: none !important;
    padding: 12px 0 12px 32px !important;
    margin: 0 !important;
    border-bottom: 1px solid var(--hm-grey-200, #e4e1d6) !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: rgba(29, 29, 27, 0.85) !important;
    line-height: 1.45 !important;
    position: relative !important;
}
.cms-webwinkel .row1 .usp li:last-child {
    border-bottom: none !important;
}
.cms-webwinkel .row1 .usp li::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 16px !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    background: var(--hm-yellow, #fbba00) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23243d77' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") no-repeat center center !important;
    background-size: 12px 12px !important;
}
.cms-webwinkel .row1 .usp li p,
.cms-page-view.cms-webwinkel .col-main .usp p {
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
}

/* --- Image-text blocks (row1 right + row2 right) --- */
.cms-webwinkel .image-text {
    flex: 1 1 0 !important;
    background: #ffffff !important;
    border: 1px solid var(--hm-grey-200, #e4e1d6) !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 16px rgba(36, 61, 119, 0.06) !important;
    float: none !important;
    width: auto !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}
.cms-webwinkel .image-text .image {
    flex: 0 0 auto !important;
    overflow: hidden !important;
    max-height: 240px !important;
    background: var(--hm-grey-100, #f0ede4) !important;
}
.cms-webwinkel .image-text .image img {
    width: 100% !important;
    height: 240px !important;
    object-fit: cover !important;
    display: block !important;
}
.cms-webwinkel .image-text .content {
    flex: 1 1 auto !important;
    padding: 24px 28px !important;
    background: #ffffff !important;
    position: static !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    text-align: left !important;
}
.cms-webwinkel .image-text .content .text {
    padding: 0 !important;
}
.cms-webwinkel .image-text .content h2 {
    font-family: 'Outfit', sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--hm-blue, #243d77) !important;
    margin: 0 0 12px 0 !important;
    line-height: 1.3 !important;
}
.cms-webwinkel .image-text .content p,
.cms-page-view.cms-webwinkel .col-main .image-text p {
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
    color: rgba(29, 29, 27, 0.85) !important;
    margin: 0 0 12px 0 !important;
}
.cms-webwinkel .image-text .content a {
    color: var(--hm-blue, #243d77) !important;
    text-decoration: underline !important;
}
.cms-webwinkel .image-text .content a:hover {
    color: var(--hm-yellow-dark, #d99f00) !important;
}

/* --- Row2 slider (left side, may be empty) --- */
.cms-webwinkel .row2 .slider {
    flex: 1 1 0 !important;
    width: auto !important;
    float: none !important;
    background: #ffffff !important;
    border: 1px solid var(--hm-grey-200, #e4e1d6) !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 16px rgba(36, 61, 119, 0.06) !important;
    overflow: hidden !important;
    min-height: 200px !important;
}
/* Kill the grey background on the slick slider UL inside the card */
.cms-webwinkel .row2 .slider .products-slider {
    background: transparent !important;
}
.cms-webwinkel .row2 .tablet-discount {
    display: none !important;
}

/* --- Share email / social divider --- */
.cms-webwinkel .share-email {
    margin-top: 40px !important;
    margin-bottom: 24px !important;
    padding-top: 20px !important;
    border-top: 1px solid var(--hm-grey-200, #e4e1d6) !important;
}
.cms-webwinkel .share-email::before {
    display: none !important;
}
.cms-webwinkel .share-email .title {
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--hm-blue, #243d77) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    float: none !important;
}
.cms-webwinkel .share-email .social {
    float: none !important;
    padding: 0 !important;
    margin-top: 12px !important;
    background: none !important;
}

/* --- Bottom products (product cards row) --- */
.cms-webwinkel .bottom-products {
    display: flex !important;
    gap: 20px !important;
    margin-top: 0 !important;
    margin-bottom: 40px !important;
}
.cms-webwinkel .bottom-products > div {
    flex: 1 1 0 !important;
    width: auto !important;
    float: none !important;
}
.cms-webwinkel .bottom-products .products-info {
    background: #ffffff !important;
    border: 1px solid var(--hm-grey-200, #e4e1d6) !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 16px rgba(36, 61, 119, 0.06) !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 16px !important;
    float: none !important;
    width: auto !important;
}
.cms-webwinkel .bottom-products .products-info .image img {
    width: 100% !important;
    height: auto !important;
    border-radius: 8px !important;
}
.cms-webwinkel .bottom-products .products-info .content h2 {
    font-family: 'Outfit', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--hm-blue, #243d77) !important;
    margin: 8px 0 !important;
}
.cms-webwinkel .bottom-products .products-info .price-box {
    opacity: 1 !important;
}
.cms-webwinkel .bottom-products .products-info .price-box .price {
    font-family: 'Outfit', sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--hm-blue, #243d77) !important;
}
.cms-webwinkel .bottom-products .products-info .hover {
    display: none !important;
}
.cms-webwinkel .bottom-products .products-info .content .button {
    background: var(--hm-blue, #243d77) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 10px 18px !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    display: inline-block !important;
    margin-top: 8px !important;
}