/*
 * Echo template — echo-fixups.css
 * Phase 3b + Phase 5 supporting CSS (2026-05-30).
 *
 * This file does two distinct jobs:
 *
 *   (1) BS2 -> BS5 BRIDGE
 *       Phase 3b swapped the three legacy Bootstrap 2.3.2 stylesheets
 *       (bootstrap.min.css, bootstrap-responsive.min.css, bootstrap-extended.css)
 *       for Joomla 5's bundled BS 5.3.8 at /media/vendor/bootstrap/css/bootstrap.min.css.
 *       But the template's own CSS (template.css, vm-echo.css, responsive-template.css,
 *       layout.css, responsive.css, presets/*.css) still contains ~229 BS2 grid/utility
 *       selectors (.row-fluid, .spanN, .pull-left/.pull-right, .visible-phone,
 *       .hidden-phone, etc.) AND the template's PHP output (index.php + html/com_virtuemart/*)
 *       still emits BS2 class names in its markup. The bridge rules below alias those
 *       BS2 classes to BS5 equivalents so both the legacy CSS and the legacy markup
 *       keep working WITHOUT requiring a per-selector + per-element rewrite.
 *
 *       Phase 3c (the rewrite pass) was deferred for the Echo 2026-05-30 release:
 *       the bridge IS the shipping configuration. Retiring the bridge would require
 *       rewriting ~229 CSS selectors PLUS every BS2 class="" attribute in the PHP
 *       output across index.php + 8 com_virtuemart override files — a multi-day
 *       scope with non-zero regression risk for no user-visible benefit (the bridge
 *       maps 1:1 to BS5's flex grid, so the cascade is already BS5-native under the
 *       hood). If a future maintenance pass does retire the bridge, the bridge block
 *       below gets removed and replaced by `/* bridge retired - see Phase 3c notes *\/`.
 *       The template-specific fixups in Part 2 stay forever regardless.
 *
 *   (2) PERMANENT TEMPLATE-SIDE FIXUPS (stay regardless of which BS the rest is on)
 *       - VM4 product-grid <ul> bullet resets
 *       - BS3-style nav-tabs bridge (VM4 tab module markup)
 *       - VM debug message suppression
 *       - Menu + social-links <ul> list-style resets
 *       - Phase 5c vanilla menu support (parent-arrow indicator, submenu width)
 *       - Phase 5b native currency selector chrome
 *
 * Loaded LAST in the <head> CSS stack (after vm-echo.css) so these rules win cascade.
 *
 * Architectural lesson (carried over from Avant's modernization 2026-05-24):
 * when introducing a bridge layer to unblock a modernization, keep BS2-aliasing rules
 * and template-specific-fixup rules separable in this same file (clearly headed)
 * so retiring the bridge later doesn't silently strip out fixups that still matter.
 */

/* =========================================================================
   PART 1 — BS2 -> BS5 BRIDGE (RETIRES IN PHASE 3C)
   ========================================================================= */

/* ---------- BS2 .row-fluid grid as BS5 flex ---------- */

/*
 * BS2's .row-fluid was a 12-column grid where each .spanN was a fluid percentage.
 * Reproducing it as a flex row with explicit child widths lets the legacy
 * `<div class="row-fluid"><div class="span4">...</div></div>` markup keep working.
 */
.row-fluid {
	display: flex;
	flex-wrap: wrap;
	margin-left: -15px;
	margin-right: -15px;
}
.row-fluid > [class*="span"] {
	padding-left: 15px;
	padding-right: 15px;
	box-sizing: border-box;
}
.row-fluid > .span1  { width: 8.3333333%;  }
.row-fluid > .span2  { width: 16.6666667%; }
.row-fluid > .span3  { width: 25%;         }
.row-fluid > .span4  { width: 33.3333333%; }
.row-fluid > .span5  { width: 41.6666667%; }
.row-fluid > .span6  { width: 50%;         }
.row-fluid > .span7  { width: 58.3333333%; }
.row-fluid > .span8  { width: 66.6666667%; }
.row-fluid > .span9  { width: 75%;         }
.row-fluid > .span10 { width: 83.3333333%; }
.row-fluid > .span11 { width: 91.6666667%; }
.row-fluid > .span12 { width: 100%;        }

/* On phones, stack to single-column (BS2 behaviour at < 767px) */
@media (max-width: 767px) {
	.row-fluid {
		display: block;
		margin-left: 0;
		margin-right: 0;
	}
	.row-fluid > [class*="span"] {
		width: 100%;
		padding-left: 0;
		padding-right: 0;
	}
}

/* ---------- BS5 .row containing BS2 .spanN children (post-review extend) ---------- */

/*
 * index.php uses BS5 `<div class="row">` as the parent in several layouts
 * (slideshow-header, top-tabs, footer manufacturer area, bottom modules)
 * but the children are BS2 `<div class="spanN">`. BS5's `.row` is already
 * a flex container, so we only need to supply the percentage widths to
 * the spanN children when the parent is `.row` rather than `.row-fluid`.
 *
 * This rule sits NEXT to the .row-fluid > .spanN block above so both
 * parent-class shapes behave identically.
 */
.row > [class*="span"] {
	padding-left: 15px;
	padding-right: 15px;
	box-sizing: border-box;
}
.row > .span1  { flex: 0 0 8.3333333%;  max-width: 8.3333333%;  }
.row > .span2  { flex: 0 0 16.6666667%; max-width: 16.6666667%; }
.row > .span3  { flex: 0 0 25%;         max-width: 25%;         }
.row > .span4  { flex: 0 0 33.3333333%; max-width: 33.3333333%; }
.row > .span5  { flex: 0 0 41.6666667%; max-width: 41.6666667%; }
.row > .span6  { flex: 0 0 50%;         max-width: 50%;         }
.row > .span7  { flex: 0 0 58.3333333%; max-width: 58.3333333%; }
.row > .span8  { flex: 0 0 66.6666667%; max-width: 66.6666667%; }
.row > .span9  { flex: 0 0 75%;         max-width: 75%;         }
.row > .span10 { flex: 0 0 83.3333333%; max-width: 83.3333333%; }
.row > .span11 { flex: 0 0 91.6666667%; max-width: 91.6666667%; }
.row > .span12 { flex: 0 0 100%;        max-width: 100%;        }

@media (max-width: 767px) {
	.row > [class*="span"] {
		flex: 0 0 100%;
		max-width: 100%;
		padding-left: 0;
		padding-right: 0;
	}
}

/* ---------- Footer #foo-left-right needs flex context (post-review extend) ---------- */

/*
 * index.php's footer outputs:
 *   <div id="foo-left-right">
 *     <div class="span6">footer-left</div>
 *     <div class="span6">footer-right</div>
 *     <div class="clear"> </div>
 *   </div>
 * #foo-left-right has no grid class -> the span6 children are bare blocks
 * and stack vertically. Give the wrapper flex context so its span children
 * sit side-by-side and pick up the same BS2->BS5 width mapping.
 */
#foo-left-right {
	display: flex;
	flex-wrap: wrap;
	margin-left: -15px;
	margin-right: -15px;
}
#foo-left-right > [class*="span"] {
	padding-left: 15px;
	padding-right: 15px;
	box-sizing: border-box;
}
#foo-left-right > .span6  { flex: 0 0 50%;  max-width: 50%;  }
#foo-left-right > .span12 { flex: 0 0 100%; max-width: 100%; }
#foo-left-right > .clear { display: none; } /* legacy BS2 clearfix, no-op under flex */

@media (max-width: 767px) {
	#foo-left-right { display: block; margin-left: 0; margin-right: 0; }
	#foo-left-right > [class*="span"] {
		flex: 0 0 100%;
		max-width: 100%;
		padding-left: 0;
		padding-right: 0;
	}
}

/* ---------- BS2 float utilities ---------- */

.pull-left  { float: left  !important; }
.pull-right { float: right !important; }

/* ---------- BS2 responsive visibility ---------- */

.visible-phone   { display: none !important; }
.visible-tablet  { display: none !important; }
.visible-desktop { display: block !important; }
.hidden-phone   { display: block !important; }
.hidden-tablet  { display: block !important; }
.hidden-desktop { display: none !important; }

@media (max-width: 767px) {
	.visible-phone   { display: block !important; }
	.hidden-phone    { display: none  !important; }
	.visible-desktop { display: none  !important; }
	.hidden-desktop  { display: block !important; }
}
@media (min-width: 768px) and (max-width: 979px) {
	.visible-tablet  { display: block !important; }
	.hidden-tablet   { display: none  !important; }
	.visible-desktop { display: none  !important; }
	.hidden-desktop  { display: block !important; }
}

/* ---------- BS2 .btn-inverse (BS5 uses .btn-dark) ---------- */

.btn-inverse {
	color: #fff;
	background-color: #222;
	border-color: #080808;
}
.btn-inverse:hover,
.btn-inverse:focus,
.btn-inverse:active {
	color: #fff;
	background-color: #080808;
	border-color: #000;
}

/* =========================================================================
   PART 2 — PERMANENT TEMPLATE-SIDE FIXUPS (STAY AFTER BRIDGE RETIRES)
   ========================================================================= */

/* ---------- VirtueMart product-grid bullet resets ---------- */

/*
 * VM4 outputs product grids as <ul class="vmproduct product-details row"> with
 * <li class="col-md-3 floatleft productdetails"> children. The module slider variant uses
 * <ul class="sl-products vmproduct ..."> with id="slider*".
 *
 * BS5's Reboot leaves <ul> with default disc bullets + padding-left, which paints a stray
 * bullet to the left of the four-product-in-a-row grid on home/category pages. The fix:
 * strip the list semantics from VM's product-grid <ul>s.
 *
 * VM manufacturer list (<ul class="row vmmanufacturer">) gets the same treatment.
 */
ul.vmmanufacturer {
	list-style: none;
	padding-left: 0;
	margin-bottom: 0;
}
ul.vmmanufacturer > li { list-style: none; }

ul.vmproduct,
ul.sl-products,
ul.vm-product-list-container {
	list-style: none;
	padding-left: 0;
}
ul.vmproduct > li,
ul.sl-products > li {
	list-style: none;
}

/* ---------- BS3-style nav-tabs bridge (VM4 tab module markup) ---------- */

/*
 * VM4 + Echo's tab module output:
 *   <ul class="nav nav-tabs"><li><a class="tab_heading" data-toggle="tab">...</a></li></ul>
 * which uses the BS3-era markup pattern (no .nav-item on <li>, no .nav-link on <a>).
 * BS5's nav-tabs CSS only applies tab-button layout via .nav-link, so without these aliases
 * the tab labels render as bare inline text concatenated together. The bridge gives the BS3
 * selectors the foundational layout BS5 only ships on .nav-link.
 */
ul.nav.nav-tabs {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	padding-left: 0;
	margin-bottom: 0;
	border-bottom: 1px solid #dee2e6;
}
ul.nav.nav-tabs > li {
	list-style: none;
	margin-bottom: -1px;
}
ul.nav.nav-tabs > li > a {
	display: block;
	padding: 0.5rem 1rem;
	color: #495057;
	text-decoration: none;
	border: 1px solid transparent;
	border-top-left-radius: 0.25rem;
	border-top-right-radius: 0.25rem;
}
ul.nav.nav-tabs > li > a:hover {
	border-color: #e9ecef #e9ecef #dee2e6;
}
ul.nav.nav-tabs > li.active > a,
ul.nav.nav-tabs > li > a.active {
	color: #495057;
	background-color: #fff;
	border-color: #dee2e6 #dee2e6 #fff;
}

/* ---------- VM debug message suppression ---------- */

/*
 * Suppress VirtueMart vmRam() debug output. vmdefines.php calls vmRam() at module-load time
 * BEFORE any debug_enable/dev config check, so VM's debug_enable=none does not silence them.
 * The function pushes <span class="vmdebug">...</span> messages through Joomla's
 * enqueueMessage('info') path, which renders inside #system-message-container on every page.
 * Hiding the class is the lowest-touch fix — avoids patching a vendor file lost on VM update.
 */
.vmdebug,
#system-message-container .alert-info:has(.vmdebug) {
	display: none !important;
}

/* ---------- Menu + social-links list resets ---------- */

/*
 * Bootstrap 5's Reboot adds default <ul> list-style/padding/margin. Echo's main nav
 * (<ul class="menu-nav" id="nav">) and the social-links <ul id="social-links"> rely on
 * unstyled lists; re-establish the resets explicitly.
 */
ul.menu-nav,
ul#social-links {
	list-style: none;
	padding-left: 0;
	margin-bottom: 0;
}
ul.menu-nav > li {
	list-style: none;
}

/* ---------- Phase 5c (2026-05-30): Vanilla menu support ---------- */

/*
 * Parent-item arrow indicator. supersubs.js's autoArrows feature appended a tiny <span>
 * to every parent <a>; we replicate that visually with a CSS ::after on .menu-parent (the
 * class menu-vanilla.js adds to every <li> that has a nested <ul>). Pure CSS — no DOM
 * nodes added.
 *
 * Echo note: Echo DOES have div.panel1/div.menupanel side-panel markup (the original
 * inline jQuery used .animate({width:'show'}) + .fadeIn() to toggle them). When the inline
 * jQuery is retired in favour of menu-vanilla.js's initMenuPanel(), it toggles an .is-open
 * class; the CSS below replaces the JS animation. Same approach as Avant.
 */
ul.menu-nav li.menu-parent > a::after {
	content: " \25BE"; /* small down-arrow */
	font-size: 0.7em;
	opacity: 0.7;
	margin-left: 4px;
}
ul.menu-nav li.menu-parent li.menu-parent > a::after {
	content: " \25B8"; /* small right-arrow for nested submenu parents */
}

/*
 * Submenu width — replaces what supersubs.js used to calculate dynamically. white-space
 * keeps each menu item on one line; min/max-width gives a sensible range without measuring.
 */
ul.menu-nav ul {
	min-width: 12em;
	max-width: 22em;
}
ul.menu-nav ul li > a {
	white-space: nowrap;
}


/* ---------- Side-panel slide animation (Echo has Avant-style panel1/menupanel) ---------- */

/*
 * Side-panel slide animation — replaces the .animate({width:'show'}) + .fadeIn() chains
 * that the old inline jQuery did. menu-vanilla.js toggles .is-open; CSS handles the visual.
 */
div.panel1 {
	overflow: hidden;
	transition: width 300ms ease;
}
div.panel1:not(.is-open) {
	width: 0 !important;
}
div.menupanel {
	transition: opacity 200ms ease;
	opacity: 0;
	pointer-events: none;
}
div.menupanel.is-open {
	opacity: 1;
	pointer-events: auto;
}

/* ---------- Phase 5b (2026-05-30): Native currency selector chrome ---------- */

/*
 * Replaces dropkick's custom <select> chrome. Native <select> with a touch of styling so
 * it looks intentional rather than browser-default. Used in the .default-currency container
 * inside the currency module.
 *
 * Focus colour is a neutral mid-grey — Echo ships in multiple preset colours (preset1
 * through presetN), so a brand-neutral focus ring works for any preset without clashing.
 * If a specific preset wants its own accent, override .default-currency select:focus inside
 * presets/presetN.css.
 */
select.default-currency,
.default-currency select {
	padding: 6px 28px 6px 10px;
	border: 1px solid #d0d0d0;
	border-radius: 3px;
	background-color: #fff;
	font-size: 13px;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%23666' d='M0 0l5 6 5-6z'/></svg>");
	background-repeat: no-repeat;
	background-position: right 10px center;
}
select.default-currency:hover,
.default-currency select:hover {
	border-color: #999;
}
select.default-currency:focus,
.default-currency select:focus {
	outline: 0;
	border-color: #666;
	box-shadow: 0 0 0 2px rgba(102, 102, 102, 0.2);
}


/* ---------- VM product-grid image sizing (Phase 3g regression fix 2026-05-30) ---------- */
/*
 * BS5 (unlike BS2) does not ship a global `img { max-width: 100%; height: auto; }` rule.
 * VM4 product-grid images carry hardcoded width="300" height="300" HTML attrs; inside
 * .col-md-2 columns (~190px wide on a 1140px container) the browser honours the height
 * attr (300px) while the .pr-img-handler wrapper constrains visual width to ~190px ->
 * vertical stretch / horizontal squish on watches, dresses, etc. Restoring proportional
 * scaling via height:auto lets the image scale to the column width preserving aspect ratio.
 *
 * Scope is intentionally tight: VM product-grid images only. Doesn't touch hero/banner/
 * slideshow/icon images which already have their own sizing rules.
 */
.pr-img-handler img,
.productdetails img.featuredProductImage,
.vmproduct .productdetails img,
img.featuredProductImage {
	max-width: 100%;
	height: auto;
}

/* ============================================================
   Phase 5i (2026-05-30): Footer centering — Payments + Social icons + Copyright
   ============================================================

   index.php was restructured to stack three rows inside #footer-line:
     .footer-row-payments   (footer-left module — Payments)
     .footer-row-social     (footer-right module + #social-links UL)
     .footer-row-copyright  (footer module — Copyright)

   Each row is col-md-12 full-width. We text-align:center the row contents
   so any inline children (paragraphs, the social-links UL, plain text) end
   up horizontally centered on the page rather than aligned to the column
   edge. The UL gets display:inline-flex with justify-content:center so the
   icon row centers as a block while still wrapping cleanly on narrow
   viewports.
*/
.footer-row-payments,
.footer-row-social,
.footer-row-copyright {
	text-align: center;
	margin: 0;
	padding: 8px 0;
}
.footer-row-payments [class*="moduletable"],
.footer-row-social [class*="moduletable"],
.footer-row-copyright [class*="moduletable"] {
	text-align: center;
}
.footer-row-social #social-links {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	margin: 0 auto;
	padding: 0;
	list-style: none;
	float: none;
}
.footer-row-social #social-links li {
	display: inline-block;
	float: none;
	margin: 4px 6px;
}
.footer-row-copyright p {
	margin: 0 auto;
	text-align: center;
}


/* ---------- Suppress legacy .moduletable height:100% inside BS5 .row (post-bridge-extend fix, 2026-05-31) ---------- */
/*
 * template.css:8 sets height:100% on .moduletable / .moduletable_style1 / .moduletable_menu so they
 * visually match their siblings under the original .row-fluid layout. Under the BS5 .row flex layout
 * activated by the bridge extend, the parent column stretches to match its tallest sibling (e.g. the
 * slideshow's inline 400px). A child with height:100% then overflows the column whenever it has stacked
 * siblings above it (delivery banner under the welcome menu in #slideshow-header). The red
 * .moduletable_style1 background then bleeds down past the row, surfacing behind 'Latest Products' etc.
 * Reset to auto inside BS5 .row contexts — the rule was a visual-match aid, not load-bearing.
 */
.row > [class*="col-"] .moduletable,
.row > [class*="col-"] .moduletable_text,
.row > [class*="col-"] .moduletable_style1,
.row > [class*="col-"] .moduletable_style2,
.row > [class*="col-"] .moduletable_menu,
.row > [class*="span"] .moduletable,
.row > [class*="span"] .moduletable_text,
.row > [class*="span"] .moduletable_style1,
.row > [class*="span"] .moduletable_style2,
.row > [class*="span"] .moduletable_menu {
	height: auto;
}


/* ---------- Suppress list bullets inside LoginForm modal body (Phase 3b.5 follow-up, 2026-05-31) ---------- */
/*
 * mod_login renders "Forgot your password? / Forgot your username? / Create an account"
 * as a default <ul><li>...</li></ul>. The browser's list-style:disc shows bullets
 * touching the modal-body's right padding edge — the links by themselves are
 * sufficient, no bullets needed.
 */
#LoginForm .modal-body ul,
#LoginForm .modal-body ol {
	list-style: none;
	padding-left: 0;
	margin-left: 0;
}
#LoginForm .modal-body ul li,
#LoginForm .modal-body ol li {
	list-style: none;
}


/* ============================================================
   cwlt-20260722 — maintenance fixes (Expression 6.1.0.1 parity)
   1. Search icon + pagination arrows as self-contained SVGs
      (jui IcoMoon font was removed in Joomla 4+ — glyphs showed
      as stray characters / empty squares).
   2. Featured-view tall-article clip fix.
   3. Search button snug against the input.
   ============================================================ */
span.icon-search { display:inline-block; width:14px; height:14px; vertical-align:-2px; background-color:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/svg%3E") no-repeat center / contain; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/svg%3E") no-repeat center / contain; }
span.icon-search::before { content:"" !important; }

.icon-angle-left { display:inline-block; width:10px; height:14px; vertical-align:-2px; background-color:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16'%3E%3Cpath d='M8 1 2 8l6 7' fill='none' stroke='%23000' stroke-width='2.5'/%3E%3C/svg%3E") no-repeat center / contain; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16'%3E%3Cpath d='M8 1 2 8l6 7' fill='none' stroke='%23000' stroke-width='2.5'/%3E%3C/svg%3E") no-repeat center / contain; }
.icon-angle-left::before { content:"" !important; }

.icon-angle-right { display:inline-block; width:10px; height:14px; vertical-align:-2px; background-color:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16'%3E%3Cpath d='M2 1l6 7-6 7' fill='none' stroke='%23000' stroke-width='2.5'/%3E%3C/svg%3E") no-repeat center / contain; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16'%3E%3Cpath d='M2 1l6 7-6 7' fill='none' stroke='%23000' stroke-width='2.5'/%3E%3C/svg%3E") no-repeat center / contain; }
.icon-angle-right::before { content:"" !important; }

.icon-angle-double-left { display:inline-block; width:13px; height:14px; vertical-align:-2px; background-color:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1 2 8l6 7M14 1 8 8l6 7' fill='none' stroke='%23000' stroke-width='2.2'/%3E%3C/svg%3E") no-repeat center / contain; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1 2 8l6 7M14 1 8 8l6 7' fill='none' stroke='%23000' stroke-width='2.2'/%3E%3C/svg%3E") no-repeat center / contain; }
.icon-angle-double-left::before { content:"" !important; }

.icon-angle-double-right { display:inline-block; width:13px; height:14px; vertical-align:-2px; background-color:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 1l6 7-6 7M8 1l6 7-6 7' fill='none' stroke='%23000' stroke-width='2.2'/%3E%3C/svg%3E") no-repeat center / contain; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 1l6 7-6 7M8 1l6 7-6 7' fill='none' stroke='%23000' stroke-width='2.2'/%3E%3C/svg%3E") no-repeat center / contain; }
.icon-angle-double-right::before { content:"" !important; }

.blog-featured .blog-items { display: block !important; }
.blog-featured .blog-item { display: block !important; overflow: visible !important; height: auto !important; }
#search-position .btn, .mod-finder__search .btn, .search .btn { margin: 0 !important; }

/* gradfix-desc 2026-10-14 */
/* Category description: no side padding (template-managed space; top/bottom kept). */
.category_description { padding-left: 0 !important; padding-right: 0 !important; }

/* edgefix 2026-10-15 */
/* Phone: text in these bands ran to the screen edge. Inset just these bands. */
@media (max-width: 767px) {
  #main-content-handler { padding-left: 15px !important; padding-right: 15px !important; box-sizing: border-box !important; }
}

/* CS-PATCH: echo-phone-menu-panel-2026-10-16 */
/* 2026-10-16 (released-template phone pass): the phone menu button did nothing. The May vanilla-JS rewrite toggles
   .is-open on div.panel1, but nothing mapped .is-open to "shown" (the old jQuery set display inline, and nav.css still
   says display:none), so the menu never appeared. */
div.panel1.is-open { display: block !important; }
/* /CS-PATCH: echo-phone-menu-panel-2026-10-16 */

/* CS-PATCH: echo-phone-menu-panel-fit-2026-10-16 */
/* phones: the opened menu was a 2,800px absolute popup whose close button sat half outside its corner. Make it a fixed,
   scrollable panel inside the screen, with the close button always visible. */
@media (max-width: 767px) {
  body div.panel1.is-open { position: fixed !important; top: 0 !important; bottom: 0 !important; left: 0 !important; right: 64px !important; width: auto !important; height: auto !important; margin: 0 !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; z-index: 300000 !important; }
  body div.panel1.is-open .menupanel { padding: 52px 20px 24px !important; }
  body div.panel1.is-open span.closemenu { position: fixed !important; top: 12px !important; right: 76px !important; left: auto !important; margin: 0 !important; z-index: 300001 !important; }
  body div.panel1.is-open ul.selectnav li a { display: block; padding: 6px 0; }
}
/* /CS-PATCH: echo-phone-menu-panel-fit-2026-10-16 */

/* CS-PATCH: echo-phone-header-standard-2026-10-16 */
/* 2026-10-16 (Tim's grad test: Echo's phone header "not laid out according to the skill for mobile view").
   Canonical phone chrome builds the logo row + burger and the icon row; the donor's own phone header pieces (social
   row, quick links, account links, menu bar, search box) are hidden on phones - their content lives in the drawer,
   the second menu and the chips now. */
@media (max-width: 767px) {
  #top-handler #top-nav-handler, #top-handler nav#menu, a#menupanel, div.panel1 { display: none !important; }
}
/* /CS-PATCH: echo-phone-header-standard-2026-10-16 */

/* CS-PATCH: echo-phone-cart-chip-2026-10-16 */
/* phone cart chip: the donor cart link (its basket is a background image) fills the canonical chip box and takes its
   rounded corners; the donor's hover popover and "Cart empty" text label stay out of the chip (the count is the
   canonical badge, shown when the cart has items). */
@media (max-width: 767px) {
  #cs-utility-row > .cs-adopted-cart .show-cart, #cs-utility-row > .cs-adopted-cart a#cartpanel { display: block !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: inherit !important; background-color: transparent !important; background-position: center center !important; box-shadow: none !important; }
  #cs-utility-row > .cs-adopted-cart .popover, #cs-utility-row > .cs-adopted-cart > .show-both { display: none !important; }
}
/* /CS-PATCH: echo-phone-cart-chip-2026-10-16 */

/* CS-PATCH: echo-phone-basket-size-2026-10-16 */
/* basket image sized like the other chip glyphs (it was drawn at its natural size, larger than the icons beside it) */
@media (max-width: 767px) { #cs-utility-row > .cs-adopted-cart a#cartpanel { background-size: 26px auto !important; } }
/* /CS-PATCH: echo-phone-basket-size-2026-10-16 */

/* CS-PATCH: echo-phone-chip-ink-2026-10-16 */
/* Echo: white chip icons, matching the white basket image (white on this red is ~3.4:1, above the 3:1 icon floor; the
   canonical ink floor had picked black, which left the basket the odd one out) */
@media (max-width: 767px) {
  html body #cs-utility-row > button, html body #cs-utility-row > a, html body #cs-utility-row > button i, html body #cs-utility-row > a i { color: #fff !important; }
  html body #cs-utility-row > #cs-secondary-toggle .cs-burger-bars > span { background: #fff !important; }
}
/* /CS-PATCH: echo-phone-chip-ink-2026-10-16 */

/* CS-PATCH: echo-phone-basket-22-2026-10-16 */
/* Echo cart-icon.png is cropped tight (no padding), so 26px read larger than the other glyphs: 22px */
@media (max-width: 767px) { #cs-utility-row > .cs-adopted-cart a#cartpanel { background-size: 22px auto !important; } }
/* /CS-PATCH: echo-phone-basket-22-2026-10-16 */

/* CS-PATCH: phone-account-content-first-port-2026-10-16 */
/* Port of the canonical CS-PATCH phone-account-content-first (.119, cut from canonical .124) - Tim: "on mobile no modules
   should show above the account info page on any template, unless it is a welcome to the store menu". This template's
   bridge predates it (or it has no bridge). Breadcrumbs and a store category menu stay above; other modules move below. */
@media (max-width: 767px) {
  /* (1) P: a layout wrapper with a module region child BEFORE a branch child, and account markup inside -> wrapping
     flex row of full-width items (cheap child/sibling :has first, the account scan last) */
  :is(body, .row, .row-fluid, .global-container, .span8, .span9, .col-md-8, .col-md-9, #main-cols, #site_wrapper, #tmp-container, #padding, #site-handler, #content-handler, #content-cols):has(> :is(.col-md-2, .col-md-3, .col-md-4, .col-sm-3, .col-sm-4, .col-lg-2, .col-lg-3, .col-lg-4, .span2, .span3, .span4, #col-left, #tab-modules, #top-modules, #top-content-modules, #slideshow-handler-bg, #sl-top, #deep-box, aside, [class^="moduletable"], [class*=" moduletable"], .module, .mod-custom) ~ :is(.span8, .span9, .col-md-6, .col-md-8, .col-md-9, #main-cols, #column-right, #maincontent, #tmp-container, #box2, .container, .container-fluid, .main-bg, #main-handler, main, .tmp-content-area, #middle-content-handler, div[id=""], .com-users-login, .com-users-logout, .com-users-registration, .com-users-remind, .com-users-reset, .com-users-profile, .com-users-profile__edit, #member-registration, #member-profile, #user-registration, #users-profile-core, form[name="userForm"], .vm-orders-list, [id*="content"] > .login > form[action*="user.login"]:not(:is(.moduletable, .module, [class*="moduletable"], #LoginForm, .modal) *)), > * > #top-modules):has(.com-users-login, .com-users-logout, .com-users-registration, .com-users-remind, .com-users-reset, .com-users-profile, .com-users-profile__edit, #member-registration, #member-profile, #user-registration, #users-profile-core, form[name="userForm"], .vm-orders-list, [id*="content"] > .login > form[action*="user.login"]:not(:is(.moduletable, .module, [class*="moduletable"], #LoginForm, .modal) *)) {
    display: flex !important; flex-flow: row wrap !important; align-items: flex-start !important; align-content: flex-start !important;
  }
  :is(body, .row, .row-fluid, .global-container, .span8, .span9, .col-md-8, .col-md-9, #main-cols, #site_wrapper, #tmp-container, #padding, #site-handler, #content-handler, #content-cols):has(> :is(.col-md-2, .col-md-3, .col-md-4, .col-sm-3, .col-sm-4, .col-lg-2, .col-lg-3, .col-lg-4, .span2, .span3, .span4, #col-left, #tab-modules, #top-modules, #top-content-modules, #slideshow-handler-bg, #sl-top, #deep-box, aside, [class^="moduletable"], [class*=" moduletable"], .module, .mod-custom) ~ :is(.span8, .span9, .col-md-6, .col-md-8, .col-md-9, #main-cols, #column-right, #maincontent, #tmp-container, #box2, .container, .container-fluid, .main-bg, #main-handler, main, .tmp-content-area, #middle-content-handler, div[id=""], .com-users-login, .com-users-logout, .com-users-registration, .com-users-remind, .com-users-reset, .com-users-profile, .com-users-profile__edit, #member-registration, #member-profile, #user-registration, #users-profile-core, form[name="userForm"], .vm-orders-list, [id*="content"] > .login > form[action*="user.login"]:not(:is(.moduletable, .module, [class*="moduletable"], #LoginForm, .modal) *)), > * > #top-modules):has(.com-users-login, .com-users-logout, .com-users-registration, .com-users-remind, .com-users-reset, .com-users-profile, .com-users-profile__edit, #member-registration, #member-profile, #user-registration, #users-profile-core, form[name="userForm"], .vm-orders-list, [id*="content"] > .login > form[action*="user.login"]:not(:is(.moduletable, .module, [class*="moduletable"], #LoginForm, .modal) *)) > :not([id^="cs-"]) { flex: 1 1 100% !important; min-width: 0; }
  /* (2) Q: module regions that are children of P (no header chrome / breadcrumbs) -> after the content */
  :is(body, .row, .row-fluid, .global-container, .span8, .span9, .col-md-8, .col-md-9, #main-cols, #site_wrapper, #tmp-container, #padding, #site-handler, #content-handler, #content-cols):has(> :is(.col-md-2, .col-md-3, .col-md-4, .col-sm-3, .col-sm-4, .col-lg-2, .col-lg-3, .col-lg-4, .span2, .span3, .span4, #col-left, #tab-modules, #top-modules, #top-content-modules, #slideshow-handler-bg, #sl-top, #deep-box, aside, [class^="moduletable"], [class*=" moduletable"], .module, .mod-custom) ~ :is(.span8, .span9, .col-md-6, .col-md-8, .col-md-9, #main-cols, #column-right, #maincontent, #tmp-container, #box2, .container, .container-fluid, .main-bg, #main-handler, main, .tmp-content-area, #middle-content-handler, div[id=""], .com-users-login, .com-users-logout, .com-users-registration, .com-users-remind, .com-users-reset, .com-users-profile, .com-users-profile__edit, #member-registration, #member-profile, #user-registration, #users-profile-core, form[name="userForm"], .vm-orders-list, [id*="content"] > .login > form[action*="user.login"]:not(:is(.moduletable, .module, [class*="moduletable"], #LoginForm, .modal) *)), > * > #top-modules):has(.com-users-login, .com-users-logout, .com-users-registration, .com-users-remind, .com-users-reset, .com-users-profile, .com-users-profile__edit, #member-registration, #member-profile, #user-registration, #users-profile-core, form[name="userForm"], .vm-orders-list, [id*="content"] > .login > form[action*="user.login"]:not(:is(.moduletable, .module, [class*="moduletable"], #LoginForm, .modal) *)) > :is(.col-md-2, .col-md-3, .col-md-4, .col-sm-3, .col-sm-4, .col-lg-2, .col-lg-3, .col-lg-4, .span2, .span3, .span4, #col-left, #tab-modules, #top-modules, #top-content-modules, #slideshow-handler-bg, #sl-top, #deep-box, aside, [class^="moduletable"], [class*=" moduletable"], .module, .mod-custom):not(header, #top-handler, .header-spacing, [id^="cs-"], .breadcrumb, .breadcrumbs, #breadcrumb-line, .pathway, .modal, :has(header, #top-handler, .header-spacing, #cs-utility-row, #cs-menu-toggle, .breadcrumb, .breadcrumbs, .breadcrumb1, #breadcrumb-line, #breadcrumb-handler, .mod-breadcrumbs__wrapper, .pathway)), :is(body, .row, .row-fluid, .global-container, .span8, .span9, .col-md-8, .col-md-9, #main-cols, #site_wrapper, #tmp-container, #padding, #site-handler, #content-handler, #content-cols):has(> :is(.col-md-2, .col-md-3, .col-md-4, .col-sm-3, .col-sm-4, .col-lg-2, .col-lg-3, .col-lg-4, .span2, .span3, .span4, #col-left, #tab-modules, #top-modules, #top-content-modules, #slideshow-handler-bg, #sl-top, #deep-box, aside, [class^="moduletable"], [class*=" moduletable"], .module, .mod-custom) ~ :is(.span8, .span9, .col-md-6, .col-md-8, .col-md-9, #main-cols, #column-right, #maincontent, #tmp-container, #box2, .container, .container-fluid, .main-bg, #main-handler, main, .tmp-content-area, #middle-content-handler, div[id=""], .com-users-login, .com-users-logout, .com-users-registration, .com-users-remind, .com-users-reset, .com-users-profile, .com-users-profile__edit, #member-registration, #member-profile, #user-registration, #users-profile-core, form[name="userForm"], .vm-orders-list, [id*="content"] > .login > form[action*="user.login"]:not(:is(.moduletable, .module, [class*="moduletable"], #LoginForm, .modal) *)), > * > #top-modules):has(.com-users-login, .com-users-logout, .com-users-registration, .com-users-remind, .com-users-reset, .com-users-profile, .com-users-profile__edit, #member-registration, #member-profile, #user-registration, #users-profile-core, form[name="userForm"], .vm-orders-list, [id*="content"] > .login > form[action*="user.login"]:not(:is(.moduletable, .module, [class*="moduletable"], #LoginForm, .modal) *)) > div:is(:not([class]), [class=""]):is(:not([id]), [id=""]):has(> #top-modules) { order: 1; }
  /* (3) a region holding a store CATEGORY menu is dissolved; the menu module keeps its place above */
  :is(body, .row, .row-fluid, .global-container, .span8, .span9, .col-md-8, .col-md-9, #main-cols, #site_wrapper, #tmp-container, #padding, #site-handler, #content-handler, #content-cols):has(> :is(.col-md-2, .col-md-3, .col-md-4, .col-sm-3, .col-sm-4, .col-lg-2, .col-lg-3, .col-lg-4, .span2, .span3, .span4, #col-left, #tab-modules, #top-modules, #top-content-modules, #slideshow-handler-bg, #sl-top, #deep-box, aside, [class^="moduletable"], [class*=" moduletable"], .module, .mod-custom) ~ :is(.span8, .span9, .col-md-6, .col-md-8, .col-md-9, #main-cols, #column-right, #maincontent, #tmp-container, #box2, .container, .container-fluid, .main-bg, #main-handler, main, .tmp-content-area, #middle-content-handler, div[id=""], .com-users-login, .com-users-logout, .com-users-registration, .com-users-remind, .com-users-reset, .com-users-profile, .com-users-profile__edit, #member-registration, #member-profile, #user-registration, #users-profile-core, form[name="userForm"], .vm-orders-list, [id*="content"] > .login > form[action*="user.login"]:not(:is(.moduletable, .module, [class*="moduletable"], #LoginForm, .modal) *)), > * > #top-modules):has(.com-users-login, .com-users-logout, .com-users-registration, .com-users-remind, .com-users-reset, .com-users-profile, .com-users-profile__edit, #member-registration, #member-profile, #user-registration, #users-profile-core, form[name="userForm"], .vm-orders-list, [id*="content"] > .login > form[action*="user.login"]:not(:is(.moduletable, .module, [class*="moduletable"], #LoginForm, .modal) *)) > :is(.col-md-2, .col-md-3, .col-md-4, .col-sm-3, .col-sm-4, .col-lg-2, .col-lg-3, .col-lg-4, .span2, .span3, .span4, #col-left, #tab-modules, #top-modules, #top-content-modules, #slideshow-handler-bg, #sl-top, #deep-box, aside, [class^="moduletable"], [class*=" moduletable"], .module, .mod-custom):not([class*="moduletable"], .module, [class^="mod-"], [class*=" mod-"]):has(ul.VMmenu, ul.menu > li > div > a):not(header, #top-handler, .header-spacing, [id^="cs-"], .breadcrumb, .breadcrumbs, #breadcrumb-line, .pathway, .modal, :has(header, #top-handler, .header-spacing, #cs-utility-row, #cs-menu-toggle, .breadcrumb, .breadcrumbs, .breadcrumb1, #breadcrumb-line, #breadcrumb-handler, .mod-breadcrumbs__wrapper, .pathway)) { display: contents !important; }
  :is(body, .row, .row-fluid, .global-container, .span8, .span9, .col-md-8, .col-md-9, #main-cols, #site_wrapper, #tmp-container, #padding, #site-handler, #content-handler, #content-cols):has(> :is(.col-md-2, .col-md-3, .col-md-4, .col-sm-3, .col-sm-4, .col-lg-2, .col-lg-3, .col-lg-4, .span2, .span3, .span4, #col-left, #tab-modules, #top-modules, #top-content-modules, #slideshow-handler-bg, #sl-top, #deep-box, aside, [class^="moduletable"], [class*=" moduletable"], .module, .mod-custom) ~ :is(.span8, .span9, .col-md-6, .col-md-8, .col-md-9, #main-cols, #column-right, #maincontent, #tmp-container, #box2, .container, .container-fluid, .main-bg, #main-handler, main, .tmp-content-area, #middle-content-handler, div[id=""], .com-users-login, .com-users-logout, .com-users-registration, .com-users-remind, .com-users-reset, .com-users-profile, .com-users-profile__edit, #member-registration, #member-profile, #user-registration, #users-profile-core, form[name="userForm"], .vm-orders-list, [id*="content"] > .login > form[action*="user.login"]:not(:is(.moduletable, .module, [class*="moduletable"], #LoginForm, .modal) *)), > * > #top-modules):has(.com-users-login, .com-users-logout, .com-users-registration, .com-users-remind, .com-users-reset, .com-users-profile, .com-users-profile__edit, #member-registration, #member-profile, #user-registration, #users-profile-core, form[name="userForm"], .vm-orders-list, [id*="content"] > .login > form[action*="user.login"]:not(:is(.moduletable, .module, [class*="moduletable"], #LoginForm, .modal) *)) > :is(.col-md-2, .col-md-3, .col-md-4, .col-sm-3, .col-sm-4, .col-lg-2, .col-lg-3, .col-lg-4, .span2, .span3, .span4, #col-left, #tab-modules, #top-modules, #top-content-modules, #slideshow-handler-bg, #sl-top, #deep-box, aside, [class^="moduletable"], [class*=" moduletable"], .module, .mod-custom):not([class*="moduletable"], .module, [class^="mod-"], [class*=" mod-"]):has(ul.VMmenu, ul.menu > li > div > a):not(header, #top-handler, .header-spacing, [id^="cs-"], .breadcrumb, .breadcrumbs, #breadcrumb-line, .pathway, .modal, :has(header, #top-handler, .header-spacing, #cs-utility-row, #cs-menu-toggle, .breadcrumb, .breadcrumbs, .breadcrumb1, #breadcrumb-line, #breadcrumb-handler, .mod-breadcrumbs__wrapper, .pathway)) > * { order: 1; flex: 1 1 100% !important; min-width: 0; }
  :is(body, .row, .row-fluid, .global-container, .span8, .span9, .col-md-8, .col-md-9, #main-cols, #site_wrapper, #tmp-container, #padding, #site-handler, #content-handler, #content-cols):has(> :is(.col-md-2, .col-md-3, .col-md-4, .col-sm-3, .col-sm-4, .col-lg-2, .col-lg-3, .col-lg-4, .span2, .span3, .span4, #col-left, #tab-modules, #top-modules, #top-content-modules, #slideshow-handler-bg, #sl-top, #deep-box, aside, [class^="moduletable"], [class*=" moduletable"], .module, .mod-custom) ~ :is(.span8, .span9, .col-md-6, .col-md-8, .col-md-9, #main-cols, #column-right, #maincontent, #tmp-container, #box2, .container, .container-fluid, .main-bg, #main-handler, main, .tmp-content-area, #middle-content-handler, div[id=""], .com-users-login, .com-users-logout, .com-users-registration, .com-users-remind, .com-users-reset, .com-users-profile, .com-users-profile__edit, #member-registration, #member-profile, #user-registration, #users-profile-core, form[name="userForm"], .vm-orders-list, [id*="content"] > .login > form[action*="user.login"]:not(:is(.moduletable, .module, [class*="moduletable"], #LoginForm, .modal) *)), > * > #top-modules):has(.com-users-login, .com-users-logout, .com-users-registration, .com-users-remind, .com-users-reset, .com-users-profile, .com-users-profile__edit, #member-registration, #member-profile, #user-registration, #users-profile-core, form[name="userForm"], .vm-orders-list, [id*="content"] > .login > form[action*="user.login"]:not(:is(.moduletable, .module, [class*="moduletable"], #LoginForm, .modal) *)) > :is(.col-md-2, .col-md-3, .col-md-4, .col-sm-3, .col-sm-4, .col-lg-2, .col-lg-3, .col-lg-4, .span2, .span3, .span4, #col-left, #tab-modules, #top-modules, #top-content-modules, #slideshow-handler-bg, #sl-top, #deep-box, aside, [class^="moduletable"], [class*=" moduletable"], .module, .mod-custom):not([class*="moduletable"], .module, [class^="mod-"], [class*=" mod-"]):has(ul.VMmenu, ul.menu > li > div > a):not(header, #top-handler, .header-spacing, [id^="cs-"], .breadcrumb, .breadcrumbs, #breadcrumb-line, .pathway, .modal, :has(header, #top-handler, .header-spacing, #cs-utility-row, #cs-menu-toggle, .breadcrumb, .breadcrumbs, .breadcrumb1, #breadcrumb-line, #breadcrumb-handler, .mod-breadcrumbs__wrapper, .pathway)) > :is([class*="moduletable"], .module, [class^="mod-"], [class*=" mod-"]):has(ul.VMmenu, ul.menu > li > div > a) { order: 0; }
  /* (4) everything after the account branch (footer, right column, bottom bands) stays after the moved regions;
     regions that sit after the branch keep their place too */
  :is(body, .row, .row-fluid, .global-container, .span8, .span9, .col-md-8, .col-md-9, #main-cols, #site_wrapper, #tmp-container, #padding, #site-handler, #content-handler, #content-cols) > :is(.span8, .span9, .col-md-6, .col-md-8, .col-md-9, #main-cols, #column-right, #maincontent, #tmp-container, #box2, .container, .container-fluid, .main-bg, #main-handler, main, .tmp-content-area, #middle-content-handler, div[id=""], .com-users-login, .com-users-logout, .com-users-registration, .com-users-remind, .com-users-reset, .com-users-profile, .com-users-profile__edit, #member-registration, #member-profile, #user-registration, #users-profile-core, form[name="userForm"], .vm-orders-list, [id*="content"] > .login > form[action*="user.login"]:not(:is(.moduletable, .module, [class*="moduletable"], #LoginForm, .modal) *)):is(.com-users-login, .com-users-logout, .com-users-registration, .com-users-remind, .com-users-reset, .com-users-profile, .com-users-profile__edit, #member-registration, #member-profile, #user-registration, #users-profile-core, form[name="userForm"], .vm-orders-list, [id*="content"] > .login > form[action*="user.login"]:not(:is(.moduletable, .module, [class*="moduletable"], #LoginForm, .modal) *), :has(.com-users-login, .com-users-logout, .com-users-registration, .com-users-remind, .com-users-reset, .com-users-profile, .com-users-profile__edit, #member-registration, #member-profile, #user-registration, #users-profile-core, form[name="userForm"], .vm-orders-list, [id*="content"] > .login > form[action*="user.login"]:not(:is(.moduletable, .module, [class*="moduletable"], #LoginForm, .modal) *))) ~ * { order: 2 !important; }
}
/* /CS-PATCH: phone-account-content-first-port-2026-10-16 */

/* CS-PATCH: echo-account-pages-phone-2026-10-16 */
/* Echo account pages on phones (Tim's grad test 2026-10-16: "nothing should be showing there, not the slideshow"):
   Echo keeps its store menu, a "Delivery worldwide" banner and the slideshow together in #slideshow-header, which the
   generic rule cannot split. On account pages: the store category menu stays; the banner and slideshow are hidden. */
@media (max-width: 767px) {
  body:has(#member-registration, .com-users-registration, .com-users-login, .com-users-logout, .com-users-reset, .com-users-remind, .com-users-profile, .com-users-profile__edit, form[name="userForm"], .vm-orders-list) #slideshow-header #slideshow-handler-bg,
  body:has(#member-registration, .com-users-registration, .com-users-login, .com-users-logout, .com-users-reset, .com-users-remind, .com-users-profile, .com-users-profile__edit, form[name="userForm"], .vm-orders-list) #slideshow-header > .col-md-3 > :not(.moduletable_menu) { display: none !important; }
}
/* /CS-PATCH: echo-account-pages-phone-2026-10-16 */

/* CS-PATCH: echo-account-pages-phone-2-2026-10-16 */
/* Echo account pages on phones, round 2: the currency selector is a module too (only breadcrumbs and the store menu
   stay above), and VirtueMart's embedded login on the account page was two tiny side-by-side fields: full-width
   fields at 16px (no iPhone zoom), Login button beside "Remember me". */
@media (max-width: 767px) {
  body:has(#member-registration, .com-users-registration, .com-users-login, .com-users-logout, .com-users-reset, .com-users-remind, .com-users-profile, .com-users-profile__edit, form[name="userForm"], .vm-orders-list) #nav-line #currency { display: none !important; }
  #com-form-login fieldset, #com-form-login .userdata { display: block !important; width: auto !important; }
  #com-form-login .width30, #com-form-login .floatleft { float: none !important; width: 100% !important; }
  #com-form-login input[type="text"], #com-form-login input[type="password"] { display: block !important; width: 100% !important; max-width: none !important; height: 42px !important; font-size: 16px !important; margin: 0 0 10px !important; box-sizing: border-box !important; float: none !important; }
  #com-form-login .button, #com-form-login button, #com-form-login input[type="submit"] { min-height: 40px; padding: 8px 18px !important; font-size: 15px !important; }
}
/* /CS-PATCH: echo-account-pages-phone-2-2026-10-16 */