/* ============================================================
   Delica Parts Brisbane — Modern Theme Overrides
   Upload to: themes/black-white/css/custom.css
   ============================================================ */


/* ────────────────────────────────────────────────────────────
   1. BACKGROUND & PAGE WRAPPER
   Replace the harsh blue with a clean neutral background.
   ──────────────────────────────────────────────────────────── */

body {
	background-color: #eef0f3 !important;
	background-image: none !important;
	font-family: Arial, Helvetica, sans-serif !important;
	font-size: 13px !important;
	color: #222 !important;
}

#page {
	background: #fff;
	border: 1px solid #d8dce3;
	margin: 0 auto 20px auto;
}

a { color: #1a6fa8; }
a:hover { color: #0d4d7a; text-decoration: underline; }


/* ────────────────────────────────────────────────────────────
   2. HEADER — single flexbox row
   Logo left │ user info + search right, all on one line.
   ──────────────────────────────────────────────────────────── */

#header {
	background: #fff;
	border-bottom: 3px solid #1a6fa8;
	padding: 0 16px;
	min-height: 70px;
	/* flex row: logo on left, right block fills remaining */
	display: flex !important;
	align-items: center !important;
	gap: 16px;
	overflow: visible !important;
}

/* Kill the floats so flex takes over */
#header_logo {
	float: none !important;
	width: auto !important;
	flex-shrink: 0;
	line-height: 0;
}

img.logo {
	float: none !important;
	margin: 0 !important;
	display: block;
	max-height: 60px;
	width: auto;
}

#header_right {
	float: none !important;
	width: auto !important;
	flex: 1;
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-end !important;
	justify-content: center !important;
	gap: 6px;
	margin-bottom: 0 !important;
	padding: 8px 0;
	text-align: right;
}

/* Welcome + nav row */
#header_user { text-align: right; }

#header_user_info {
	font-size: 12px;
	color: #666;
	margin: 0;
}

#header_user_info a {
	color: #1a6fa8;
	font-weight: bold;
	text-decoration: none;
}

#header_nav {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex !important;
	gap: 8px;
	align-items: center;
}

#header_nav li { display: inline-block !important; }

#header_nav a {
	font-size: 12px;
	font-weight: bold;
	padding: 4px 10px;
	border-radius: 3px;
	text-decoration: none;
	color: #1a6fa8;
	border: 1px solid #c0d4ec;
}

#header_nav a:hover {
	background: #1a6fa8;
	color: #fff;
	text-decoration: none;
}

/* Cart button — orange */
#shopping_cart a {
	background: #1a6fa8 !important;
	color: #fff !important;
	border-color: #1a6fa8 !important;
}
#shopping_cart a:hover { background: #0d4d7a !important; }

/* Search block — override blocksearch.css floats with matching specificity */
#header_right #search_block_top {
	float: none !important;
	background: none !important;
	background-image: none !important;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	flex-shrink: 0;
}

#header_right #search_block_top p {
	padding: 0 !important;
	margin: 0 !important;
	display: flex !important;
	align-items: stretch !important;
	gap: 0;
}

/* Kill the float-based layout from the module CSS */
#header_right #search_block_top label,
#header_right #search_block_top input {
	float: none !important;
}

#search_block_top label { display: none !important; }

#search_query_top {
	height: 34px !important;
	width: 200px !important;
	padding: 0 10px !important;
	border: 1px solid #c0c8d4 !important;
	border-right: none !important;
	border-radius: 3px 0 0 3px !important;
	font-size: 12px !important;
	outline: none !important;
	box-sizing: border-box !important;
	display: block !important;
	line-height: 34px;
}

#search_block_top input[type="submit"],
#header_right #search_block_top input[type="submit"] {
	height: 34px !important;
	line-height: 34px !important;
	padding: 0 14px !important;
	border-radius: 0 3px 3px 0 !important;
	font-size: 12px !important;
	font-weight: bold !important;
	margin: 0 !important;
	background: #1a6fa8 !important;
	color: #fff !important;
	border: none !important;
	cursor: pointer !important;
	display: block !important;
	white-space: nowrap;
	text-align: center !important;
}


/* ────────────────────────────────────────────────────────────
   2b. TRUST BAR — phone + delivery + PayPal strip below header
   Dark navy background; all text and icons are white.
   ──────────────────────────────────────────────────────────── */

#dpb_trust_bar {
	background: #1a2a4a;
	border-bottom: none;
	padding: 8px 16px;
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px 20px;
	font-size: 12px;
	color: #fff;
}

#dpb_trust_bar .dpb-trust-item {
	display: flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}

/* Phone icon — text character so CSS color works */
#dpb_trust_bar .dpb-phone-icon {
	color: #fff;
	font-style: normal;
	font-size: 14px;
}

#dpb_trust_bar strong { color: #fff; font-weight: bold; }
#dpb_trust_bar a { color: #a8cfee; font-weight: bold; text-decoration: none; }
#dpb_trust_bar a:hover { color: #fff; text-decoration: underline; }

#dpb_trust_bar .dpb-paypal-badge {
	display: flex;
	align-items: center;
	gap: 8px;
}
#dpb_trust_bar .dpb-paypal-badge img {
	height: 26px;
	width: auto;
	vertical-align: middle;
	background: #fff;
	padding: 2px 6px;
	border-radius: 3px;
}
#dpb_trust_bar .dpb-paypal-badge a { color: #a8cfee; }
#dpb_trust_bar .dpb-paypal-badge a:hover { color: #fff; text-decoration: underline; }

@media (max-width: 768px) {
	#dpb_trust_bar { justify-content: center; text-align: center; }
}

/* ────────────────────────────────────────────────────────────
   3. HOMEPAGE — hide right column, expand centre
   ──────────────────────────────────────────────────────────── */

body#index #right_column {
	display: none !important;
}

body#index #center_column {
	width: 740px !important;
}


/* ────────────────────────────────────────────────────────────
   4. SIDEBAR CATEGORIES — modern, clean, no folder icons
   ──────────────────────────────────────────────────────────── */

/* Hide the dated +/- folder toggle icons */
#categories_block_left span.grower,
#categories_block_left span.OPEN,
#categories_block_left span.CLOSE {
	display: none !important;
}

/* Block header */
div.block h4,
div.block .title_block {
	background: #1a6fa8 !important;
	background-image: none !important;
	color: #fff !important;
	padding: 10px 12px !important;
	font-size: 12px !important;
	font-weight: bold !important;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	border-bottom: none !important;
	border-radius: 3px 3px 0 0;
	margin: 0;
}

div.block h4 a,
div.block h4 span,
div.block .title_block a { color: #fff !important; }

/* Block content wrapper */
div.block .block_content {
	border: 1px solid #dde0e6 !important;
	border-top: none !important;
	border-radius: 0 0 3px 3px;
	background: #fff !important;
	padding: 0 !important;
}
/* Restore cart block's own padding so product rows don't collapse */
#cart_block .block_content {
	padding: 6px 6px 2px !important;
}

/* Top-level category items */
#categories_block_left .tree {
	padding: 0 !important;
	margin: 0 !important;
	list-style: none;
}

#categories_block_left .tree > li {
	border-bottom: 1px solid #eef0f3;
	padding: 0 !important;
	background: none !important;
	margin: 0 !important;
	font-weight: bold;
	font-size: 13px;
	line-height: 1;
}

#categories_block_left .tree > li:last-child { border-bottom: none; }

#categories_block_left .tree > li > a {
	display: block;
	padding: 10px 12px !important;
	color: #222 !important;
	text-decoration: none;
	font-size: 13px;
	font-weight: bold;
	line-height: 1.3;
	transition: background 0.15s, color 0.15s;
}

#categories_block_left .tree > li > a:hover,
#categories_block_left .tree > li > a.selected {
	background: #f0f7ff;
	color: #1a6fa8 !important;
	padding-left: 16px !important;
	text-decoration: none;
}

/* Sub-category items */
#categories_block_left .tree ul {
	list-style: none;
	margin: 0;
	padding: 0;
	background: #f8f9fb;
	border-top: 1px solid #eef0f3;
}

#categories_block_left .tree li li {
	border-bottom: 1px solid #eef0f3;
	padding: 0 !important;
	font-size: 12px;
	font-weight: normal;
	background: none !important;
}

#categories_block_left .tree li li:last-child { border-bottom: none; }

#categories_block_left .tree li li a {
	display: block;
	padding: 8px 12px 8px 22px !important;
	color: #444 !important;
	font-size: 12px;
	text-decoration: none;
}

#categories_block_left .tree li li a:hover {
	background: #e8f2fb;
	color: #1a6fa8 !important;
	text-decoration: none;
}

/* Third level */
#categories_block_left .tree li li li a {
	padding-left: 32px !important;
	font-size: 11px;
	color: #666 !important;
}

/* Other left-column blocks (Technical Tips, General Info) */
#left_column div.block ul li,
#right_column div.block ul li {
	border-bottom: 1px solid #f0f2f5;
	padding: 8px 12px !important;
	font-size: 12px;
	line-height: 1.4;
	background: none !important;
}

#left_column div.block ul li:last-child,
#right_column div.block ul li:last-child { border-bottom: none; }

#left_column div.block ul li a,
#right_column div.block ul li a {
	color: #333;
	text-decoration: none;
}

#left_column div.block ul li a:hover,
#right_column div.block ul li a:hover {
	color: #1a6fa8;
}


/* ────────────────────────────────────────────────────────────
   5. FEATURED PRODUCTS GRID
   3-column flex grid with clean card layout.
   Image → Title → Price → Full-width Add to Cart → View link
   ──────────────────────────────────────────────────────────── */

#featured-products_block_center {
	margin: 0 0 16px 0;
}

h4.dpb-section-title {
	background: #1a6fa8;
	color: #fff;
	padding: 10px 14px;
	font-size: 13px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	margin: 0 0 12px 0;
	border-radius: 3px 3px 0 0;
}

ul.dpb-product-grid {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}

/* On wider homepage (740px centre) show 3 columns */
body#index ul.dpb-product-grid {
	grid-template-columns: repeat(3, 1fr);
}

li.dpb-product-card {
	background: #fff;
	border: 1px solid #dde0e6;
	border-radius: 4px;
	overflow: hidden;
	display: flex !important;
	flex-direction: column;
	transition: border-color 0.2s;
	float: none !important;
	width: auto !important;
	height: auto !important;
}

li.dpb-product-card:hover {
	border-color: #1a6fa8;
}

/* Product image */
a.dpb-card-image {
	display: block;
	text-align: center;
	background: #f8f9fb;
	padding: 10px;
	border-bottom: 1px solid #eef0f3;
}

a.dpb-card-image img {
	max-width: 100%;
	height: 140px;
	object-fit: contain;
	display: block;
	margin: 0 auto;
}

/* Card body */
div.dpb-card-body {
	padding: 10px;
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 6px;
}

/* Product title */
h5.dpb-card-title {
	margin: 0;
	font-size: 12px;
	font-weight: bold;
	line-height: 1.4;
}

h5.dpb-card-title a {
	color: #222;
	text-decoration: none;
}

h5.dpb-card-title a:hover {
	color: #1a6fa8;
	text-decoration: none;
}

/* Price */
p.dpb-card-price {
	margin: 0;
}

p.dpb-card-price .price {
	font-size: 16px;
	font-weight: bold;
	color: #1a6fa8;
}

/* Actions area — pushed to bottom of card */
div.dpb-card-actions {
	margin-top: auto;
	padding-top: 8px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* Add to Cart — full-width orange button */
a.dpb-btn-cart,
span.dpb-btn-cart {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100%;
	box-sizing: border-box;
	background: #1a6fa8;
	color: #fff !important;
	text-align: center;
	padding: 10px 8px;
	font-size: 12px;
	font-weight: bold;
	border-radius: 3px;
	text-decoration: none !important;
	cursor: pointer;
	border: none;
	line-height: 1.2;
	min-height: 38px;
}

a.dpb-btn-cart:hover {
	background: #0d4d7a;
	text-decoration: none !important;
}

span.dpb-btn-disabled {
	background: #ccc !important;
	cursor: default;
}

/* View details — subtle secondary link */
a.dpb-btn-view {
	display: block;
	text-align: center;
	font-size: 11px;
	color: #1a6fa8;
	text-decoration: none;
	padding: 2px 0;
}

a.dpb-btn-view:hover {
	text-decoration: underline;
	color: #0d4d7a;
}

p.dpb-no-products {
	padding: 16px;
	color: #888;
}


/* ────────────────────────────────────────────────────────────
   6. EDITORIAL / CONTACT CALLOUT
   ──────────────────────────────────────────────────────────── */

#editorial_block_center { margin-bottom: 14px; }

/* H1 title — "AUSTRALIA WIDE DELIVERY AVAILABLE" */
#editorial_block_center h1 {
	font-size: 16px !important;
	font-weight: bold !important;
	color: #1a2a4a !important;
	border-bottom: 2px solid #1a6fa8;
	padding-bottom: 6px;
	margin: 0 0 8px 0 !important;
}

/* H2 subheading — gap below before the contact box */
#editorial_block_center h2 {
	font-size: 13px !important;
	font-weight: normal !important;
	color: #555 !important;
	font-style: italic;
	margin: 0 0 16px 0 !important;
	padding: 0;
}

#editorial_block_center .rte {
	background: #f0f7ff;
	border: 1px solid #c0d8f0;
	border-left: 4px solid #1a6fa8;
	padding: 14px 20px;
	border-radius: 0 3px 3px 0;
	text-align: center;
	font-size: 13px;
	line-height: 1.9;
}

#editorial_block_center .rte p {
	margin: 0 0 6px 0;
	text-transform: none;
}

#editorial_block_center .rte a {
	color: #1a6fa8;
	font-weight: bold;
}


/* ────────────────────────────────────────────────────────────
   7. GLOBAL BUTTON STYLES
   ──────────────────────────────────────────────────────────── */

a.button,
span.button,
a.exclusive,
span.exclusive,
a.button_large,
a.exclusive_large,
span.exclusive_large,
input[type="submit"],
button[type="submit"] {
	background: #1a6fa8 !important;
	color: #fff !important;
	border: none !important;
	padding: 7px 16px;
	font-size: 12px;
	font-weight: bold;
	line-height: 1.4;
	vertical-align: middle;
	border-radius: 3px;
	cursor: pointer;
	text-decoration: none;
	display: inline-block;
	box-sizing: border-box;
	height: auto !important;
	width: auto !important;
	text-align: center;
}

a.button:hover,
span.button:hover,
a.exclusive:hover,
span.exclusive:hover,
a.button_large:hover,
a.exclusive_large:hover,
span.exclusive_large:hover,
input[type="submit"]:hover,
button[type="submit"]:hover { background: #0d4d7a !important; text-decoration: none; }


/* ────────────────────────────────────────────────────────────
   8. CATEGORY & PRODUCT LIST PAGES
   ──────────────────────────────────────────────────────────── */

/* Fix global.css h1 { height: 18px; background: title_bg.png } which clips multi-line titles */
#center_column h1 {
	height: auto !important;
	background-image: none !important;
	background-color: #1a6fa8 !important;
	color: #fff !important;
	padding: 8px 12px !important;
	line-height: 1.4 !important;
	font-size: 18px;
	font-weight: bold;
	margin: 0 0 16px 0;
	word-wrap: break-word;
}

/* Fix global.css h2 { height: 17px } which clips long headings (e.g. crossselling) */
#center_column h2,
#crossselling h2,
h2.productscategory_h2 {
	height: auto !important;
	line-height: 1.4 !important;
	background: none !important;
	background-image: none !important;
	padding: 6px 0 !important;
	margin: 0 0 10px 0 !important;
	font-size: 14px !important;
	font-weight: bold;
	color: #1a2a4a !important;
	text-transform: uppercase;
}

#header_navigation {
	background: #f4f6f8;
	padding: 6px 10px;
	border-bottom: 1px solid #dde0e5;
	font-size: 11px;
	color: #888;
}
#header_navigation a { color: #1a6fa8; text-decoration: none; }
#header_navigation a:hover { text-decoration: underline; }

/* ── Sort form: fix height:1em clip from global.css ── */
#productsSortForm p.select {
	height: auto !important;
	margin: 6px 0 !important;
	padding: 4px 0 !important;
	display: flex !important;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	flex-direction: row-reverse;
}
#productsSortForm select {
	float: none !important;
	font-size: 12px !important;
	padding: 4px 8px;
	border: 1px solid #c0c8d4;
	border-radius: 3px;
	height: 32px;
}
#productsSortForm label {
	float: none !important;
	font-size: 12px;
	color: #555;
	white-space: nowrap;
}

/* ── Pagination items-per-page form ── */
/* button_mini (OK button) was being bloated by the global input[type=submit] rule */
form.pagination p {
	margin: 0 !important;
	padding: 4px 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: flex-end !important;
	gap: 6px !important;
	flex-direction: row-reverse !important;
}
form.pagination label {
	float: none !important;
	font-size: 12px !important;
	color: #555 !important;
	margin: 0 !important;
}
form.pagination select {
	float: none !important;
	font-size: 12px !important;
	padding: 3px 6px !important;
	border: 1px solid #c0c8d4 !important;
	border-radius: 3px !important;
	height: 28px !important;
}
form.pagination input[type="submit"],
input.button_mini {
	float: none !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 4px 12px !important;
	font-size: 11px !important;
	height: 28px !important;
	line-height: 1 !important;
	min-height: 0 !important;
	width: auto !important;
	background-image: none !important;
}

/* ── Compare form: fix inline float:right vs display:inline-block ── */
form[action*="products-comparison"] {
	overflow: visible !important;
	margin: 4px 0 6px 0 !important;
	clear: both;
}
form[action*="products-comparison"] p {
	margin: 0 !important;
	padding: 0 !important;
	height: auto !important;
	text-align: right;
	overflow: visible !important;
}
form[action*="products-comparison"] input[type="submit"] {
	float: right !important;
	display: inline-block !important;
	padding: 5px 16px !important;
	font-size: 12px !important;
	line-height: 1.4 !important;
	height: auto !important;
}

/* ── Product list items ── */
ul#product_list li {
	background: #fff !important;
	border: 1px solid #dde0e6 !important;
	border-radius: 3px;
	margin-bottom: 10px !important;
	padding: 10px !important;
	overflow: visible !important;
}

/* Widen right block so buttons don't clip */
ul#product_list li div.right_block {
	width: 140px !important;
	text-align: center !important;
}
ul#product_list li a.button,
ul#product_list li span.button {
	display: block !important;
	margin: 5px 0 0 0 !important;
	padding: 6px 8px !important;
	text-align: center !important;
	font-size: 11px !important;
	white-space: nowrap;
}
ul#product_list li p.compare {
	margin: 6px 0 0 0 !important;
	font-size: 11px;
	text-align: left;
}

/* Price — blue to match site colours */
ul#product_list li .price { font-size: 1.3em !important; }
.price, span.price { color: #1a6fa8; font-weight: bold; }
.old-price, span.old-price { color: #999; text-decoration: line-through; }


/* ────────────────────────────────────────────────────────────
   9. RIGHT COLUMN BLOCKS
   ──────────────────────────────────────────────────────────── */

#right_column {
	overflow: hidden;
	box-sizing: border-box;
}
#right_column div.block {
	margin-bottom: 12px;
	overflow: hidden;
	box-sizing: border-box;
}

/* Cart contents */
#right_column #cart_block .block_content p,
#right_column .block_content p {
	padding: 8px 12px;
	font-size: 12px;
	color: #777;
	margin: 0;
}

/* Cart product list — override theme's white-on-dark colour for light background */
#cart_block dl { font-size: 12px; margin: 0 0 6px 0; }
#cart_block dl dt { color: #333; font-size: 11px; width: auto; text-align: left; padding: 4px 0; }
#cart_block dl dt a.cart_block_product_name { color: #1a6fa8; font-weight: 600; }
#cart_block dl dt a.cart_block_product_name:hover { color: #0d4d7a; }
#cart_block dl span.price,
#cart_block dl dt span.price { color: #333 !important; float: right; font-weight: 600; }
#cart_block p#cart-prices { border-top: 1px solid #dde0e6; padding-top: 6px; margin-top: 4px; }
#cart_block p#cart-prices span { color: #555; }
#cart_block span#cart_block_shipping_cost,
#cart_block span#cart_block_total { color: #333 !important; float: right; font-weight: 600; }
#cart_block {
	overflow: hidden;
	box-sizing: border-box;
}
#cart_block .block_content {
	overflow: hidden;
	box-sizing: border-box;
	width: 100% !important;
}
#cart_block p#cart-buttons {
	margin: 6px 0 0 0 !important;
	padding: 0 !important;
	height: auto !important;
	overflow: hidden;
	display: block !important;
	width: 100% !important;
	box-sizing: border-box !important;
}
#cart_block p#cart-buttons a {
	float: none !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	text-align: center !important;
	padding: 10px 6px !important;
	margin: 0 0 4px 0 !important;
	border-radius: 3px !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	line-height: 1.2 !important;
	min-height: 36px !important;
}
#cart_block p#cart-buttons a.button_small {
	background: #eef0f3 !important;
	color: #333 !important;
	border: 1px solid #dde0e6 !important;
}
#cart_block p#cart-buttons a#button_order_cart {
	background: #1a6fa8 !important;
	color: #fff !important;
	border: none !important;
}
#cart_block p#cart-buttons a#button_order_cart:hover { background: #0d4d7a !important; }


/* ────────────────────────────────────────────────────────────
   9b. CART NAVIGATION — PayPal shortcut next to Continue Shopping
   ──────────────────────────────────────────────────────────── */

/* Flex row so Continue Shopping and PayPal button sit side by side */
p.cart_navigation {
	display: flex !important;
	align-items: center !important;
	flex-wrap: wrap !important;
	gap: 10px !important;
	height: auto !important;
	overflow: visible !important;
	margin-bottom: 10px !important;
}

/* Remove the float/margin from the PayPal shortcut container */
#container_express_checkout {
	float: none !important;
	margin: 0 !important;
	display: inline-flex !important;
	align-items: center;
}

/* PayPal right-column checkout block */
#paypal-column-block {
	margin-top: 8px;
}

/* ────────────────────────────────────────────────────────────
   10. FOOTER
   ──────────────────────────────────────────────────────────── */

#footer {
	background: #f4f6f8;
	border-top: 1px solid #dde0e5;
}

/* Hide the default blockcms footer links and permanent links blocks —
   replaced by our custom dpb_footer_bar */
#block_various_links_footer,
#permanent_links {
	display: none !important;
}

#dpb_footer_bar {
	background: #1a2a4a;
	color: #a8cfee;
	font-size: 13px;
	padding: 14px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px 24px;
}

.dpb-footer-col {
	display: flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}

.dpb-footer-sep {
	color: #4a6a9a;
}

#dpb_footer_bar strong {
	color: #fff;
}

#dpb_footer_bar a {
	color: #a8cfee;
	text-decoration: none;
	font-weight: 600;
}

#dpb_footer_bar a:hover {
	color: #fff;
	text-decoration: underline;
}

.dpb-footer-copy {
	color: #6a8ab0;
	font-size: 12px;
}

@media (max-width: 768px) {
	#dpb_footer_bar {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 10px;
		padding: 16px 12px;
	}
	.dpb-footer-col {
		justify-content: center;
		white-space: normal;
	}
}


/* ============================================================
   11. MOBILE RESPONSIVE
   Breakpoints: 960px (tablet), 768px (mobile)
   ============================================================ */

/* Mobile nav toggle — hidden on desktop */
#dpb_mobile_nav { display: none; }

/* ── Tablet & narrow desktop (960px and below) ── */
@media (max-width: 960px) {
	#page {
		width: 100% !important;
		margin: 0 !important;
		border-left: none !important;
		border-right: none !important;
		box-sizing: border-box;
	}
	#columns {
		width: 100% !important;
		box-sizing: border-box;
	}
	#center_column {
		width: calc(100% - 210px) !important;
		box-sizing: border-box;
	}
	#right_column {
		width: 190px !important;
	}
}

/* ── Mobile (768px and below) ── */
@media (max-width: 768px) {

	/* Page wrapper */
	body { font-size: 14px !important; }
	#page { border: none !important; }

	/* ── Header ── */
	#header {
		flex-wrap: wrap !important;
		padding: 8px 12px !important;
		gap: 8px !important;
		min-height: auto !important;
	}
	#header_logo {
		flex: 1 1 auto !important;
	}
	#header_logo img {
		max-height: 50px !important;
		width: auto !important;
	}
	#header_right {
		flex: 0 0 100% !important;
		width: 100% !important;
	}
	/* Cart summary in header — make it visible and full-width */
	#header_right #shopping_cart {
		float: none !important;
		display: inline-block !important;
	}
	/* Search bar — full width on mobile */
	#header_right #search_block_top {
		width: 100% !important;
		max-width: 100% !important;
	}
	#header_right #search_block_top form {
		width: 100% !important;
	}
	#header_right #search_block_top input#search_query_top {
		width: calc(100% - 80px) !important;
		font-size: 14px !important;
		height: 36px !important;
	}
	#header_right #search_block_top input[type="submit"] {
		height: 36px !important;
		line-height: 36px !important;
		width: 70px !important;
	}
	#header_user_info, #header_nav {
		float: none !important;
		display: inline-block !important;
		font-size: 12px !important;
	}

	/* ── Trust bar ── */
	#dpb_trust_bar {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 6px !important;
		padding: 8px 12px !important;
	}
	.dpb-paypal-badge { margin-top: 2px; }

	/* ── Mobile categories toggle button ── */
	#dpb_mobile_nav {
		display: block !important;
		padding: 0;
	}
	#dpb_cat_toggle {
		display: flex !important;
		align-items: center;
		gap: 10px;
		width: 100%;
		background: #fff;
		color: #1a6fa8;
		border: none;
		border-bottom: 3px solid #1a6fa8;
		padding: 13px 16px;
		font-size: 16px;
		font-weight: 700;
		text-align: left;
		cursor: pointer;
		letter-spacing: 0.3px;
		box-sizing: border-box;
	}
	#dpb_cat_toggle:active { background: #eef0f3; }

	/* ── Columns: stack vertically ── */
	#columns {
		display: block !important;
		padding: 0 !important;
	}
	#left_column,
	#center_column,
	#right_column {
		float: none !important;
		width: 100% !important;
		display: block !important;
		box-sizing: border-box !important;
		padding: 0 !important;
		margin: 0 !important;
	}

	/* Left column: hidden by default on mobile, shown via toggle */
	#left_column {
		display: none !important;
		background: #fff;
		border-bottom: 3px solid #1a6fa8;
	}
	#left_column.dpb-open {
		display: block !important;
	}

	/* Category links in mobile panel — large touch targets */
	#left_column div.block h4 {
		font-size: 11px !important;
		padding: 8px 16px !important;
		margin: 0 !important;
		background: #1a2a4a !important;
		color: #fff !important;
		letter-spacing: 1px;
	}
	#left_column .block_content { padding: 0 !important; }
	#left_column .tree > li,
	#left_column ul.tree li {
		border-bottom: 1px solid #eef0f3 !important;
		padding: 0 !important;
	}
	#left_column ul.tree li a,
	#left_column .block_content a {
		display: block !important;
		padding: 13px 20px !important;
		font-size: 15px !important;
		font-weight: 500 !important;
		color: #1a2a4a !important;
		text-decoration: none !important;
		border-left: 3px solid transparent;
	}
	#left_column ul.tree li a:hover,
	#left_column ul.tree li a:active,
	#left_column .block_content a:hover {
		background: #eef5fb !important;
		border-left-color: #1a6fa8 !important;
		color: #1a6fa8 !important;
	}
	#left_column ul.tree li.current > a,
	#left_column ul.tree li.sfHover > a {
		background: #eef5fb !important;
		border-left-color: #1a6fa8 !important;
		color: #1a6fa8 !important;
		font-weight: 700 !important;
	}
	/* Subcategories — slightly indented */
	#left_column ul.tree li ul li a {
		padding-left: 32px !important;
		font-size: 14px !important;
		color: #555 !important;
	}

	/* Right column: hide cart block on mobile (cart shown in header) */
	#right_column {
		display: none !important;
	}

	/* Center column: full width */
	body#index #center_column {
		width: 100% !important;
	}

	/* ── Homepage: hide overrides for non-index pages ── */
	body#index #right_column { display: none !important; }

	/* ── Featured products grid: 2 columns on mobile ── */
	ul.dpb-product-grid {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 12px !important;
	}

	/* ── Product list pages ── */
	ul#product_list li {
		width: 100% !important;
		float: none !important;
		display: flex !important;
		flex-direction: row !important;
		align-items: flex-start !important;
		gap: 12px !important;
		padding: 12px !important;
		box-sizing: border-box !important;
	}
	ul#product_list li .left_block {
		float: none !important;
		flex: 0 0 120px !important;
		width: 120px !important;
	}
	ul#product_list li .right_block {
		float: none !important;
		flex: 1 !important;
		width: auto !important;
	}
	ul#product_list li .right_block .button_large,
	ul#product_list li .right_block a.button,
	ul#product_list li .right_block span.button,
	ul#product_list li .right_block a.exclusive,
	ul#product_list li .right_block span.exclusive,
	ul#product_list li .right_block a.exclusive_large {
		display: block !important;
		width: 100% !important;
		box-sizing: border-box !important;
		text-align: center !important;
		margin: 4px 0 !important;
	}

	/* ── Category headings ── */
	#center_column h1 { font-size: 16px !important; padding: 7px 10px !important; }

	/* ── Breadcrumb ── */
	#header_navigation { font-size: 11px !important; }

	/* ── Pagination ── */
	#pagination .pagination {
		flex-wrap: wrap !important;
		gap: 4px !important;
	}
	#pagination ul.pagination li { margin: 2px !important; }
	#pagination form.pagination p {
		flex-wrap: wrap !important;
		gap: 6px !important;
	}

	/* ── Sort form ── */
	#productsSortForm {
		font-size: 12px !important;
	}
	#productsSortForm p.select {
		display: block !important;
		margin-bottom: 6px !important;
	}

	/* ── Buttons: larger touch targets ── */
	a.button,
	span.button,
	a.exclusive,
	span.exclusive,
	a.button_large,
	a.exclusive_large,
	span.exclusive_large,
	input[type="submit"],
	button[type="submit"] {
		min-height: 40px !important;
		padding-top: 10px !important;
		padding-bottom: 10px !important;
		line-height: 1.4 !important;
		box-sizing: border-box !important;
		height: auto !important;
	}

	/* ── Product page ── */
	#center_column #pb_qty_wanted_p,
	#center_column #add_to_cart {
		width: 100% !important;
		box-sizing: border-box !important;
	}

	/* ── CMS / editorial block ── */
	#editorial_block_center {
		margin: 0 0 12px 0 !important;
	}

	/* ── Homepage: categories below featured products, always expanded ── */

	/* Hide the hamburger toggle on homepage — categories are permanently visible */
	body#index #dpb_mobile_nav { display: none !important; }

	/* Stack columns as flex so we can reorder them */
	body#index #columns {
		display: flex !important;
		flex-direction: column !important;
	}
	/* Featured products block first */
	body#index #center_column {
		order: 1 !important;
		width: 100% !important;
	}
	/* Categories block second, below featured products */
	body#index #left_column {
		order: 2 !important;
		display: block !important;
		border-top: 3px solid #1a6fa8 !important;
		border-bottom: none !important;
		background: #fff !important;
	}

	/* Force-expand the DHTML category tree (overrides the inline display:none from jQuery) */
	body#index #categories_block_left ul.dhtml,
	body#index #categories_block_left ul.dhtml li,
	body#index #categories_block_left ul.dhtml ul {
		display: block !important;
	}

	/* Section header — dark navy to match trust bar */
	body#index #categories_block_left div.block h4 {
		font-size: 13px !important;
		padding: 12px 16px !important;
		margin: 0 !important;
		background: #1a2a4a !important;
		color: #fff !important;
		border-radius: 0 !important;
		letter-spacing: 0.8px !important;
	}
	body#index #categories_block_left .block_content {
		border: none !important;
		border-radius: 0 !important;
	}

	/* Top-level category links — large touch targets */
	body#index #categories_block_left .tree > li {
		border-bottom: 1px solid #e8ecf0 !important;
	}
	body#index #categories_block_left .tree > li > a {
		padding: 13px 16px !important;
		font-size: 15px !important;
		font-weight: 700 !important;
		color: #1a2a4a !important;
		display: block !important;
		border-left: 3px solid transparent !important;
		text-decoration: none !important;
	}
	body#index #categories_block_left .tree > li > a:hover,
	body#index #categories_block_left .tree > li > a:active {
		background: #eef5fb !important;
		border-left-color: #1a6fa8 !important;
		color: #1a6fa8 !important;
	}

	/* Subcategory list container */
	body#index #categories_block_left .tree ul {
		background: #f8f9fb !important;
		border-top: 1px solid #e8ecf0 !important;
		padding: 0 !important;
		margin: 0 !important;
	}
	/* Subcategory links */
	body#index #categories_block_left .tree li ul li a {
		padding: 11px 16px 11px 30px !important;
		font-size: 14px !important;
		font-weight: 400 !important;
		color: #444 !important;
		display: block !important;
		border-left: 3px solid transparent !important;
		text-decoration: none !important;
	}
	body#index #categories_block_left .tree li ul li a:hover,
	body#index #categories_block_left .tree li ul li a:active {
		background: #e0eefa !important;
		border-left-color: #1a6fa8 !important;
		color: #1a6fa8 !important;
	}
	body#index #categories_block_left .tree li ul li {
		border-bottom: 1px solid #eef0f3 !important;
		background: none !important;
	}
}

/* ── Small phones (480px and below) ── */
@media (max-width: 480px) {
	/* Featured grid: single column */
	ul.dpb-product-grid {
		grid-template-columns: 1fr !important;
	}

	/* Product list: stack image above info */
	ul#product_list li {
		flex-direction: column !important;
	}
	ul#product_list li .left_block {
		flex: 0 0 auto !important;
		width: 100% !important;
	}
	ul#product_list li .left_block img {
		width: 100% !important;
		height: auto !important;
	}

	/* Header: tighten up */
	#header { padding: 6px 8px !important; }
	#header_logo img { max-height: 42px !important; }

	/* Trust bar: smaller text */
	#dpb_trust_bar { font-size: 12px !important; }

	/* ── Home category sections ── */
	.dpb-cat-section { margin-bottom: 24px !important; }
	.dpb-subcat-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
}

/* ============================================================
   HOME CATEGORY SECTIONS
   Shown below Top Sellers on the homepage
   ============================================================ */

.dpb-cat-section {
	background: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 4px;
	padding: 18px 20px 20px;
	margin-bottom: 28px;
}

/* Section heading row — matches h4.dpb-section-title (Top Sellers / Featured Products) */
.dpb-section-title--linked {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 0 16px;
	padding: 10px 14px;
	background: #1a6fa8;
	color: #fff;
	font-size: 13px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.6px;
}
.dpb-section-title--linked > a:first-child {
	color: #fff;
	text-decoration: none;
}
.dpb-section-title--linked > a:first-child:hover { text-decoration: underline; }

.dpb-section-viewall {
	font-size: 12px;
	font-weight: 400;
	color: #fff;
	text-decoration: none;
	white-space: nowrap;
	opacity: 0.85;
}
.dpb-section-viewall:hover { opacity: 1; text-decoration: underline; }

/* Subcategory grid */
.dpb-subcat-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 14px;
}

/* Each subcategory tile */
.dpb-subcat-card {
	text-align: center;
}
.dpb-subcat-card > a {
	display: block;
	text-decoration: none;
	color: #222;
}
.dpb-subcat-card > a:hover .dpb-subcat-name { color: #0055a4; }

.dpb-subcat-img {
	background: #f7f7f7;
	border: 1px solid #e8e8e8;
	border-radius: 4px;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: border-color 0.2s;
}
.dpb-subcat-card > a:hover .dpb-subcat-img { border-color: #0055a4; }

.dpb-subcat-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.dpb-subcat-name {
	display: block;
	margin-top: 8px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
}

/* Responsive */
@media (max-width: 1024px) {
	.dpb-subcat-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 768px) {
	.dpb-subcat-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
	.dpb-subcat-name { font-size: 12px; }
}
@media (max-width: 480px) {
	.dpb-subcat-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
	.dpb-cat-section { padding: 12px 12px 14px; }
}