/* =====================================================================
   BS2 -> BS5 BRIDGE -- Transform (VMT)
   Installed: 2026-07-07 grad-prep run, Skill 33 sec 3a + Recurring-regressions.
   Purpose: preserve BS2 grid + selector shapes on top of BS5 core.
   ===================================================================== */

/* -- Row + span flex grid (mandatory) -------------------------------- */
.row-fluid { display: flex !important; flex-wrap: wrap !important; }
.row-fluid > .span1  { flex: 0 0 8.333%  !important; width: 8.333%  !important; max-width: 8.333%  !important; }
.row-fluid > .span2  { flex: 0 0 16.667% !important; width: 16.667% !important; max-width: 16.667% !important; }
.row-fluid > .span3  { flex: 0 0 25%     !important; width: 25%     !important; max-width: 25%     !important; }
.row-fluid > .span4  { flex: 0 0 33.333% !important; width: 33.333% !important; max-width: 33.333% !important; }
.row-fluid > .span5  { flex: 0 0 41.667% !important; width: 41.667% !important; max-width: 41.667% !important; }
.row-fluid > .span6  { flex: 0 0 50%     !important; width: 50%     !important; max-width: 50%     !important; }
.row-fluid > .span7  { flex: 0 0 58.333% !important; width: 58.333% !important; max-width: 58.333% !important; }
.row-fluid > .span8  { flex: 0 0 66.667% !important; width: 66.667% !important; max-width: 66.667% !important; }
.row-fluid > .span9  { flex: 0 0 75%     !important; width: 75%     !important; max-width: 75%     !important; }
.row-fluid > .span10 { flex: 0 0 83.333% !important; width: 83.333% !important; max-width: 83.333% !important; }
.row-fluid > .span11 { flex: 0 0 91.667% !important; width: 91.667% !important; max-width: 91.667% !important; }
.row-fluid > .span12 { flex: 0 0 100%    !important; width: 100%    !important; max-width: 100%    !important; }
.row-fluid > [class*="span"] { float: none !important; margin-left: 0 !important; margin-right: 0 !important; }

/* Same for BS5 .row + BS2 .span markup mixed */
.row > .span1  { flex: 0 0 8.333%  !important; width: 8.333%  !important; max-width: 8.333%  !important; }
.row > .span2  { flex: 0 0 16.667% !important; width: 16.667% !important; max-width: 16.667% !important; }
.row > .span3  { flex: 0 0 25%     !important; width: 25%     !important; max-width: 25%     !important; }
.row > .span4  { flex: 0 0 33.333% !important; width: 33.333% !important; max-width: 33.333% !important; }
.row > .span5  { flex: 0 0 41.667% !important; width: 41.667% !important; max-width: 41.667% !important; }
.row > .span6  { flex: 0 0 50%     !important; width: 50%     !important; max-width: 50%     !important; }
.row > .span7  { flex: 0 0 58.333% !important; width: 58.333% !important; max-width: 58.333% !important; }
.row > .span8  { flex: 0 0 66.667% !important; width: 66.667% !important; max-width: 66.667% !important; }
.row > .span9  { flex: 0 0 75%     !important; width: 75%     !important; max-width: 75%     !important; }
.row > .span10 { flex: 0 0 83.333% !important; width: 83.333% !important; max-width: 83.333% !important; }
.row > .span11 { flex: 0 0 91.667% !important; width: 91.667% !important; max-width: 91.667% !important; }
.row > .span12 { flex: 0 0 100%    !important; width: 100%    !important; max-width: 100%    !important; }
.row > [class*="span"] { float: none !important; margin-left: 0 !important; margin-right: 0 !important; }

/* Standalone .spanN — 1170-grid PERCENTAGES (QStore 2026-07-14 canonical, Skill 33 §Grid-width parity)
   Formula: width% = (100·n − 30) / 1170, gutter% = 30/1170.
   NO !important on width so .row-fluid > .spanN percentage rules win when both apply. */
.span1  { width: 5.98%;  }
.span2  { width: 14.53%; }
.span3  { width: 23.08%; }
.span4  { width: 31.62%; }
.span5  { width: 40.17%; }
.span6  { width: 48.72%; }
.span7  { width: 57.26%; }
.span8  { width: 65.81%; }
.span9  { width: 74.36%; }
.span10 { width: 82.91%; }
.span11 { width: 91.45%; }
.span12 { width: 100%;   }
/* Explicit .span12 override — belt-and-suspenders for full-width blocks (footer/payment bar etc.) */
.span12, .tf-module.span12, .moduletable.span12 {
  width: 100% !important;
  float: none !important;
}
/* -- List-style reset (kills unwanted bullets on grid + navs) -------- */
ul.row-fluid, ul.vmproduct, ul.sl-products, .menu-nav, #log-panel, #quick-menu ul, #social-links {
  list-style: none !important;
  padding-left: 0 !important;
}

/* -- header + container hygiene ------------------------------------- */
.container.main-bg { position: relative; }
header.span12 { width: 100% !important; max-width: 100% !important; float: none !important; margin: 0 !important; }
#header-handler { margin: 0 !important; }
#top-handler #top, #top-handler #menu-handler { padding-left: 25px; padding-right: 25px; }
#top-handler #top { padding-top: 10px; }

/* -- Container width restore (MubleStore 2026-07-03 lock, Recurring regressions)
      Prevents BS5 .container max-width:1320px from spreading everything wider than BS2 1170px baseline. */
body .container.main-bg,
body .container:not(.tbm):not(.container-fluid) {
  width: auto !important;
  margin: 0 auto !important;
  box-sizing: border-box;
}
@media (min-width: 768px)  { body .container.main-bg, body .container:not(.tbm):not(.container-fluid) { max-width: 724px  !important; } }
@media (min-width: 992px)  { body .container.main-bg, body .container:not(.tbm):not(.container-fluid) { max-width: 940px  !important; } }
@media (min-width: 1200px) { body .container.main-bg, body .container:not(.tbm):not(.container-fluid) { max-width: 1170px !important; } }

/* -- Moduletable height fix (BS2 height:100% breaks BS5 flex) -------- */
.moduletable { height: auto !important; }

/* -- Social icons -- kill legacy sprite/img, wire FA6 -------------- */
#social-links li a span { background-image: none !important; }
#social-links li a {
  text-decoration: none !important;
  padding: 0;
  margin: 0;
}
#social-links li a:hover, #social-links li a:focus, #social-links li a:active {
  text-decoration: none !important;
}
#social-links li a i.fab, #social-links li a i.fa-solid, #social-links li a i.fa-brands {
  font-size: 18px;
  line-height: 1;
  color: inherit;
}
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
  white-space: nowrap;
}

/* -- Modal rescue (Phase 3b.5) --------------------------------------- */
#LoginForm.modal.show { display: flex; align-items: center; }
#LoginForm.modal .modal-dialog {
  max-width: 500px;
  margin: auto;
  width: 100%;
}
#LoginForm.modal .modal-content { border-radius: 6px; }
#LoginForm.modal .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
}
#LoginForm.modal .btn-close { background-size: 12px; opacity: .6; }
#LoginForm.modal .btn-close:hover { opacity: 1; }

/* -- Swiper 11 slideshow (Phase 5a) --------------------------------- */
.ph-swiper-slideshow {
    position: relative;
    height: 440px; /* Tim's spec 2026-07-18 walkaround */
    overflow: hidden;
}
.ph-swiper-slideshow .swiper-wrapper,
.ph-swiper-slideshow .swiper-slide {
  height: 100% !important;
}
/* NOTE: bottom fade gradient removed 2026-07-17 per Tim — it shortened the visual and hid the pagination dots. */
.ph-swiper-slideshow .ph-slide-caption,
.ph-swiper-slideshow .swiper-pagination-ph,
.ph-swiper-slideshow .swiper-button-prev-ph,
.ph-swiper-slideshow .swiper-button-next-ph { z-index: 4; }
.ph-slide-caption {
  position: absolute !important;
  left: 5%;
  max-width: 70%;
}
.swiper-pagination-ph {
  position: absolute;
  bottom: 15px;
  left: 0;
  right: 0;
  text-align: center;
}
.swiper-pagination-ph .swiper-pagination-bullet {
  opacity: 1;
  width: 10px; height: 10px;
  margin: 0 4px !important;
  /* colors come from the active preset (style1-6.css camera_pag rules extended R4b) */
}
.swiper-button-prev-ph, .swiper-button-next-ph {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px; height: 40px;
  cursor: pointer;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.3);
  border-radius: 50%;
}
.swiper-button-prev-ph { left: 15px; }
.swiper-button-next-ph { right: 15px; }
.swiper-button-prev-ph::before {
  content: "\f053";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 16px;
  line-height: 1;
}
.swiper-button-next-ph::before {
  content: "\f054";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 16px;
  line-height: 1;
}

/* -- Mobile stacking (max-width: 767px) ---------------------- */
@media (max-width: 767px) {
  body .container.main-bg,
  body .container:not(.tbm):not(.container-fluid) {
    max-width: 100% !important;
    padding-left: 10px;
    padding-right: 10px;
  }
  .row-fluid > [class*="span"],
  .row > [class*="span"] { flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important; }
  .span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12 { width: 100%; }
  header.span12.th-abs { position: relative !important; }
  .ph-swiper-slideshow {
    height: auto !important;
    aspect-ratio: 16/9;
    min-height: 0 !important;
    max-height: none !important;
  }
  #slideshow-handler {
    margin-bottom: 0 !important;
    min-height: 0 !important;
    height: auto !important;
  }
}

/* =====================================================================
   PHASE 5m -- MOBILE UX + 2026-07-05 CS-PATCH ITEMS
   ===================================================================== */

/* Hide legacy selectnav UI */
a#menupanel, body div.panel1 { display: none !important; }

/* Hamburger toggle button (desktop-hidden, mobile-visible) */
#mobile-menu-toggle {
	display: none;
	position: absolute;
	top: 20px;
	right: 15px;
	width: 40px;
	height: 40px;
	background: transparent;
	border: 1px solid rgba(255,255,255,.4);
	border-radius: 4px;
	cursor: pointer;
	z-index: 100001;
	padding: 8px 6px;
	box-sizing: border-box;
}
#mobile-menu-toggle .mm-bar {
	display: block;
	width: 100%;
	height: 3px;
	background: #fff;
	margin: 3px 0;
	border-radius: 2px;
	transition: transform .2s ease, opacity .2s ease;
}
body.mobile-menu-open #mobile-menu-toggle .mm-bar:nth-child(1),
body.tf-shop-open #mobile-menu-toggle .mm-bar:nth-child(1),
body.tf-search-open #mobile-menu-toggle .mm-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.mobile-menu-open #mobile-menu-toggle .mm-bar:nth-child(2),
body.tf-shop-open #mobile-menu-toggle .mm-bar:nth-child(2),
body.tf-search-open #mobile-menu-toggle .mm-bar:nth-child(2) { opacity: 0; }
body.mobile-menu-open #mobile-menu-toggle .mm-bar:nth-child(3),
body.tf-shop-open #mobile-menu-toggle .mm-bar:nth-child(3),
body.tf-search-open #mobile-menu-toggle .mm-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* CS-PATCH image-logo-collapse-fix -- pre-emptive: template supports H1TitleImgText=true */
#sn-position, .snc-handler { width: 100% !important; }

/* CS-PATCH dropdown-escape-container -- Transform doesn't use .global-container but keeping body overflow-x hidden as belt-and-suspenders */
body { overflow-x: hidden; }

@media (max-width: 767px) {
	#mobile-menu-toggle { display: block; }

	/* Menu reveals BELOW header (not to the side) */
	body.mobile-menu-open #menu {
		position: fixed;
		top: 70px;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 99999;
		background: #ffffff;
		overflow-y: auto;
		padding: 0;
		display: block !important;
	}
	body:not(.mobile-menu-open) #menu { display: none !important; }

	/* CS-PATCH tinted drawer background on #menu (Transform's mega-menu ancestor) */
	body.mobile-menu-open #menu::before {
		content: "";
		position: fixed;
		top: 70px; left: 0; right: 0; bottom: 0;
		background: rgba(33,37,41,.6);
		z-index: -1;
	}

	/* Light theme menu inside drawer */
	body.mobile-menu-open #menu #menu-handler,
	body.mobile-menu-open #menu .row,
	body.mobile-menu-open #menu .col-md-12 {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		padding: 0 !important;
		margin: 0 !important;
		float: none !important;
	}
	body.mobile-menu-open #menu ul.menu-nav {
		background: #ffffff;
		list-style: none !important;
		padding: 0 !important;
		margin: 0 !important;
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		float: none !important;
		position: static !important;
	}
	body.mobile-menu-open #menu ul.menu-nav > li {
		display: block;
		width: 100%;
		border-bottom: 1px solid #e8e8e8;
	}
	body.mobile-menu-open #menu ul.menu-nav > li {
		float: none !important;
		width: 100% !important;
	}
	body.mobile-menu-open #menu ul.menu-nav a {
		display: block;
		width: 100% !important;
		box-sizing: border-box;
		color: #333333 !important;
		background: transparent !important;
		text-decoration: none !important;
		padding: 18px 50px !important;
		text-align: center !important;
		text-transform: uppercase !important;
		font-size: 12px !important;
		font-weight: 700 !important;
		letter-spacing: 0.5px !important;
		line-height: 1.4 !important;
		position: relative;
	}
	body.mobile-menu-open #menu ul.menu-nav a:hover,
	body.mobile-menu-open #menu ul.menu-nav a:focus,
	body.mobile-menu-open #menu ul.menu-nav a:active {
		background: #f5f5f5 !important;
		text-decoration: none !important;
	}

	/* Nested UL under expanded LI (accordion single-branch-open) */
	body.mobile-menu-open #menu ul.menu-nav ul {
		display: none;
		list-style: none !important;
		padding-left: 20px !important;
		background: #fafafa;
	}
	body.mobile-menu-open #menu ul.menu-nav li.cs-mobile-open > ul {
		display: block;
	}
	body.mobile-menu-open #menu ul.menu-nav ul a {
		padding: 12px 60px 12px 20px !important;
		font-size: 14px;
		color: #555 !important;
	}

	/* Indicator chip (2026-07-05 CS-PATCH standard) */
	.mobile-menu-indicator {
		display: none;
	}
	body.mobile-menu-open .mobile-menu-indicator {
		display: inline-block;
		position: absolute;
		right: 15px;
		top: 50%;
		transform: translateY(-50%);
		width: 34px; height: 34px;
		line-height: 30px;
		text-align: center;
		border: 1.5px solid #cccccc;
		border-radius: 50%;
		font-size: 14px;
		color: #666666;
		background: rgba(255,255,255,0.6);
		transition: background .15s ease, border-color .15s ease, color .15s ease;
	}
	body.mobile-menu-open .cs-mobile-open > a > .mobile-menu-indicator {
		border-color: #333333;
		color: #333333;
		background: rgba(255,255,255,0.95);
	}
	.mobile-menu-indicator > i.fa {
		font-size: 14px;
		line-height: 1;
		vertical-align: middle;
		color: inherit;
	}

	/* Hide classic-nav duplicates so they don't leak through tinted drawer */
	#quick-menu ul.menu, .responsive-menu {
		display: none !important;
	}

	/* Kill any text-decoration inside the mobile menu (nuclear rule) */
	body.mobile-menu-open #menu * {
		text-decoration: none !important;
	}

	/* Top quick-nav horizontal at mobile */
	#top-quick-nav {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 12px;
		justify-content: center;
	}
}

/* =====================================================================
   CS-PATCH SUITE additions — 2026-07-16 refresh vs Skill 33 rev 2026-07-16
   Per-DOM applicability audit:
   ✓ slideshow-full-width + slideshow-slide-top-reset (Transform has Swiper 11)
   ✓ payment-icons-right-align (#foo-left-right present)
   ✓ mobile stacking for standalone .spanN (QStore 2026-07-14 companion — standalone spans don't inherit .row-fluid mobile-stack)
   ✗ jump-to-top-circle (no .jump-to-top element in Transform DOM)
   ✗ header-top-bar-layout (no #st-navigation — Transform uses #top-handler / #menu)
   ✗ canonical-mobile-block (Transform is NOT *Store-family — no #cl-handler / #megamenu-handler / .megamenu-background)
   ===================================================================== */

/* CS-PATCH: slideshow-full-width + slideshow-slide-top-reset (Skill 33 §CS-PATCH, 2026-07-07) */
#slideshow-handler, #ph-camera-slideshow-handler,
.ph-swiper-slideshow, .ph-swiper-slideshow .swiper-wrapper, .ph-swiper-slideshow .swiper-slide {
    width: 100% !important; max-width: 100% !important;
}
.ph-swiper-slideshow .swiper-slide {
    top: 0 !important;
    left: 0 !important;
}

/* CS-PATCH: payment-icons-right-align — force full-width on #foo-left-right children so
   right-floated payment images actually reach the container right edge (Skill 33 §CS-PATCH, 2026-07-07 QStore lineage) */
#foo-left-right .tf-module.span12,
#foo-left-right .moduletable.span12,
#foo-left-right > .tf-module,
#foo-left-right > div {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    float: none !important;
}

/* Standalone .spanN mobile stacking (QStore 2026-07-14 companion — standalone spans don't inherit .row-fluid mobile-stack) */
@media (max-width: 767px) {
    .span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12 {
        width: 100% !important;
        margin-left: 0 !important;
        float: none !important;
    }
    .owl-wrapper-outer, .owl-item, .sl-products, .vmgroup_products, .moduletable_products {
        max-width: 100% !important;
    }
    /* #foo-left-right mobile: center payment icons, drop right-float */
    #foo-left-right .tf-module.span12,
    #foo-left-right .moduletable.span12,
    #foo-left-right > div {
        text-align: center !important;
    }
    #foo-left-right img {
        float: none !important;
        display: block;
        margin: 0 auto !important;
        max-width: 100% !important;
    }
    /* Footer bottom-bg module rows — force full-width column stacking (Skill 33 §CS-PATCH mobile-footer-full-width-columns) */
    #bottom-bg .row,
    #bottom-bg #bot-modules .row,
    #footer #bot-modules-2 .row {
        display: block !important;
        width: 100% !important;
    }
    #bottom-bg .row > div,
    #bottom-bg #bot-modules .row > div,
    #footer #bot-modules-2 .row > div,
    #footer .moduletable {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 24px !important;
        padding: 0 8px !important;
    }
    #bottom-bg > .container,
    #footer > .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* =====================================================================
   MOBILE-HEADER UX STANDARD (Skill 33 lock 2026-07-15 BoaxStore)
   Applicability audit for Transform:
   ✓ Primary hamburger already installed (js/mobile-accordion.js) — verify size/position
   Note: Transform does NOT have the *Store-family utility strip (cart/search/account/register cluster),
         so items 2/3/4 (icon-row, cart circle, search panel) don't apply to this DOM.
         Transform uses #log-panel (login/register list) + jdoc:include cart via inline VM cart module.
   Items 5 (icon glyphs ≥16-20px) and 7 (desktop utility row discipline) apply as glyph-size + alignment tweaks.
   ===================================================================== */

/* Item 1 — Primary hamburger sizing (visual audit at Playwright pass; adjust if too small) */
@media (max-width: 767px) {
    #mobile-menu-toggle {
        width: 56px !important;
        height: 56px !important;
        padding: 12px 10px !important;
    }
    #mobile-menu-toggle .mm-bar {
        width: 36px !important;
        height: 4px !important;
        margin: 5px 0 !important;
        border-radius: 2px !important;
    }
    /* Item 5 — Icon glyphs ≥16px in header/log-panel */
    #log-panel a, #log-panel a i.fa,
    #cart-panel a, #cart-panel a i.fa,
    #cart-panel2 a, #cart-panel2 a i.fa {
        font-size: 16px !important;
        line-height: 1 !important;
    }
}

/* NOTE: earlier attempt to display:none .moduletable_empty was WRONG - that class is Transform styled module chrome for RANDOM PRODUCT, HOT OFFER, LATEST PRODUCTS, PARTNERS, ABOUT etc. — NOT Joomla empty signal. Reverted. */


/* =====================================================================
   FIX: modernize-stack rewrote #top-content-modules > .row-fluid (BS2 block)
   -> .row (BS5 flex-wrap). Combined with template.css:13 rule
    this makes each
   of the 4 stacked modules inherit 100% of an ill-computed parent (1016px each,
   4064 total) and pushes the page from ~2691 (live) to ~4927.
   Override the .row here back to block-flow so children take natural height,
   and reset .moduletable_empty height to auto inside these containers.
   Live donor uses .row-fluid and doesn't hit this. */
#top-content-modules > .row,
#bottom-content-modules > .row,
.tmp-content-area > .row {
    display: block !important;
}
#top-content-modules > .row > .span12,
#bottom-content-modules > .row > .span12,
.tmp-content-area > .row > .span12 {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
}
#top-content-modules .moduletable_empty,
#top-content-modules .moduletable_menu,
#top-content-modules .moduletable,
#bottom-content-modules .moduletable_empty,
#bottom-content-modules .moduletable_menu,
#bottom-content-modules .moduletable,
#main-content-handler .col-md-3 .moduletable_empty,
#main-content-handler .col-md-3 .moduletable_menu,
#main-content-handler .col-md-3 .moduletable {
    height: auto !important;
}

/* Sidebar (.col-md-3) also gets flex-stretched by BS5 .row alongside .span9 or .col-md-9.
   template.css line 13 
   then makes each sidebar module inherit that stretched height.
   Break the flex row's stretch behavior so sidebar takes natural height. */
#main-content-handler > .row,
#slideshow-header > .row,
#slideshow-header .row,
#tmp-content .row,
#tmp-container .row {
    align-items: flex-start !important;
}

/* header-left column stack (WELCOME TO THE STORE + PUMA JACKETS FOR MEN) — the .col-md-3
   in the slideshow-header row must be tall enough for its children (was overflowing into
   the main-content-handler row below and overlapping MAIN MENU). Force natural height. */
#slideshow-header .col-md-3,
#slideshow-header .col-md-3 .moduletable_menu,
#slideshow-header .col-md-3 .moduletable_empty,
#slideshow-header .col-md-3 .moduletable {
    height: auto !important;
}


/* Follow Us dropdown (#social-links) - hide by default; show on hover / .sfHover.
   Original template used superfish JS which added .sfHover on hover and CSS revealed the dropdown.
   modernize-stack stripped superfish; my Phase 4a vanilla-JS replacement still adds .sfHover,
   but the show/hide CSS was lost. Restore parity with live donor default (display: none, visibility: hidden). */
#social-links {
    display: none !important;
    visibility: hidden !important;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.menu-nav.social-links li:hover > #social-links,
.menu-nav.social-links li.sfHover > #social-links,
.menu-nav.social-links > li:hover > #social-links,
.menu-nav.social-links > li.sfHover > #social-links {
    display: block !important;
    visibility: visible !important;
    opacity: 0.95;
}


/* =====================================================================
   R3 (2026-07-17) — Tim's grad-walkaround feedback round
   ===================================================================== */

/* Mobile partner logos (OUR PARTNERS AND BRANDS): 2 per row instead of stacked singles */
@media (max-width: 767px) {
  ul.vmmanufacturer {
    display: flex !important;
    flex-wrap: wrap !important;
    padding: 0 !important;
  }
  ul.vmmanufacturer > li,
  ul.vmmanufacturer > li.span2 {
    flex: 0 0 50% !important;
    width: 50% !important;
    max-width: 50% !important;
    margin: 0 0 18px 0 !important;
    float: none !important;
    text-align: center;
  }
  ul.vmmanufacturer > li img { max-width: 80%; height: auto; }
}

/* Mobile utility row — Skill 33 Mobile-header UX standard (2026-07-15 BoaxStore lock),
   FashionShop prototype order: SHOP MENU | ACCOUNT | REGISTER | SEARCH | CART.
   Markup + toggles injected by mobile-accordion.js (tf-utility block). */
#tf-utility-row { display: none; }
@media (max-width: 767px) {
  #tf-utility-row {
    display: flex !important;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-around;
    gap: 6px;
    width: 100%;
    min-height: 56px;
    padding: 8px 4px;
    background: #ffffff;
    border-top: 1px solid #e8e8e8;
    border-bottom: 1px solid #e8e8e8;
    box-sizing: border-box;
  }
  #tf-utility-row a {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: #333333 !important;
    text-decoration: none !important;
    min-height: 44px;
  }
  #tf-utility-row a i {
    font-size: 18px;
    line-height: 1;
    color: inherit;
  }
  #tf-utility-row a span {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1;
    white-space: nowrap;
  }

  /* Header cart box + search bar leave the page flow — reachable via the icons */
  #search-position { display: none !important; }

  /* Classic-nav leak: in-flow MAIN MENU sidebar module hides on phone (primary hamburger serves nav) */
  #main-content-handler .col-md-3 > .moduletable_menu { display: none !important; }

  /* Shop-menu drawer keyed on .tf-shop-menu-src (JS tags the right module per page:
     slideshow-header WELCOME module on Home, sidebar VM-category WELCOME module elsewhere).
     High-specificity reveal variants beat the phone hide rules for both locations. */
  #slideshow-header .col-md-3 > .moduletable_menu { display: none; }
  body.tf-shop-open .tf-shop-menu-src,
  body.tf-shop-open #slideshow-header .col-md-3 > .tf-shop-menu-src,
  body.tf-shop-open #main-content-handler .col-md-3 > .tf-shop-menu-src {
    display: block !important;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 100001;
    background: #ffffff;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 !important;
    padding: 64px 16px 40px 16px !important;
    height: auto !important;
    width: auto !important;
    max-width: none !important;
    float: none !important;
  }
  body.tf-shop-open .tf-shop-menu-src ul.menu li {
    border-bottom: 1px solid #eeeeee;
    width: 100% !important;
    float: none !important;
  }
  body.tf-shop-open .tf-shop-menu-src ul.menu li a {
    display: block;
    padding: 15px 10px;
    font-size: 14px;
    color: #333333;
    text-decoration: none !important;
  }

  /* Search panel — #search-position itself becomes the fixed full-width panel
     (default phone state is display:none from the rule above; body.tf-search-open reveals it
     with only the search module showing, cart box stays hidden). */
  body.tf-search-open #search-position {
    display: block !important;
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100002;
    background: #ffffff;
    width: auto !important;
    max-width: none !important;
    float: none !important;
    margin: 0 !important;
    padding: 16px 56px 16px 12px !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.18);
    box-sizing: border-box;
  }
  body.tf-search-open #search-position > *:not(.tf-search-module):not(.tf-drawer-close) {
    display: none !important;
  }
  body.tf-search-open #search-position .tf-search-module { display: block !important; }
  body.tf-search-open #search-position .tf-search-module input[type="text"],
  body.tf-search-open #search-position .tf-search-module input.inputbox {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
    height: 42px;
    font-size: 16px;
    padding: 0 10px;
  }
  body.tf-search-open #search-position .tf-search-module form {
    margin: 0; display: flex; gap: 8px; align-items: center;
  }

  /* Close chip shared by both drawers */
  .tf-drawer-close {
    position: absolute;
    top: 12px; right: 12px;
    width: 38px; height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    border: 1.5px solid #cccccc;
    border-radius: 50%;
    background: #ffffff;
    color: #333333;
    cursor: pointer;
    z-index: 2;
  }
}

/* R3.1 — drawer close chips must not leak outside an open drawer (desktop showed stray X marks) */
.tf-drawer-close { display: none !important; }
@media (max-width: 767px) {
  body.tf-shop-open .tf-shop-menu-src .tf-drawer-close,
  body.tf-search-open #search-position .tf-drawer-close { display: flex !important; }
}


/* =====================================================================
   R4 (2026-07-18) — Tim's second walkaround round
   ===================================================================== */

/* Webauthn passkey button sizing (all screens) — Tim's spec */
svg#Passkey {
    height: 30px;
}
button[class*=plg_system_webauthn_login_button] {
    padding: .4rem;
    margin-bottom: 5px;
}

/* LoginForm modal — belt-and-suspenders centering (BS5 CSS is loaded; this guards
   against template-css interference so the popup is always a centered overlay) */
#LoginForm.modal {
    position: fixed !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    width: auto !important; height: auto !important;
    margin: 0 !important;
    z-index: 100060 !important;
}
#LoginForm.modal.show {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(0,0,0,0.5);
}
#LoginForm .modal-dialog {
    max-width: 500px;
    width: calc(100% - 30px) !important;
    margin: auto !important;
    position: relative !important;
    top: auto !important; left: auto !important;
    transform: none !important;
}
#LoginForm .modal-content {
    background: #ffffff;
    border-radius: 6px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
}

@media (max-width: 767px) {
    /* Tim's spec: search panel must come down far enough + solid header block behind it */
    #site-name-handler, #search-position {
        height: 75px !important; /* Tim's spec 2026-07-18 R6 — compact header, no gap under logo */
    }
    body.tf-search-open #search-position {
        background: #ffffff !important;
        opacity: 1 !important;
    }
}


/* =====================================================================
   R5 (2026-07-18) — drawer X pin + canonical full-width submenus (responsive only)
   + login-modal list bullets removed (all screens)
   ===================================================================== */

/* My account modal: no bullets on Forgot password / Forgot username / Create account */
#LoginForm .modal-body ul,
#LoginForm .modal-body ol {
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}
#LoginForm .modal-body ul li,
#LoginForm .modal-body ol li {
  list-style: none !important;
  background-image: none !important;
  padding-left: 0 !important;
}

@media (max-width: 767px) {
  /* X toggle: pin into the 70px band above the drawer so it can't overlap menu rows */
  body.mobile-menu-open #mobile-menu-toggle,
  body.tf-shop-open #mobile-menu-toggle,
  body.tf-search-open #mobile-menu-toggle {
    position: fixed !important;
    top: 8px !important;
    right: 12px !important;
    z-index: 100002 !important;
  }

  /* Canonical drawer submenus: kill the desktop dropdown chrome (nav.css absolute
     positioning + fixed width + shadow) — sub-lists are full-width static accordion rows */
  body.mobile-menu-open #menu ul.menu-nav li ul,
  body.mobile-menu-open #menu ul.menu-nav li ul li ul {
    position: static !important;
    display: none;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    border: none !important;
    box-shadow: none !important;
    background: #f7f7f7 !important;
    visibility: visible !important;
    opacity: 1 !important;
    transition: none !important;
  }
  body.mobile-menu-open #menu ul.menu-nav li.cs-mobile-open > ul {
    display: block !important;
  }
  body.mobile-menu-open #menu ul.menu-nav li ul li {
    display: block !important;
    width: 100% !important;
    float: none !important;
    border-bottom: 1px solid #e8e8e8 !important;
    background: transparent !important;
  }
  body.mobile-menu-open #menu ul.menu-nav li ul li a {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box;
    padding: 15px 50px !important;
    text-align: center !important;
    text-transform: uppercase !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    color: #555555 !important;
    background: transparent !important;
    white-space: normal !important;
  }
}

/* R5b (2026-07-18): no product-promo modules on account/registration/login pages (all screens).
   VM redirects com_users registration to its own account view (view=user, Itemid=489 = Online
   Store menu item), so menu assignments cannot isolate these pages — body view-classes can.
   Hides: HOT OFFER OF THE WEEK etc. (#top-content-modules), bottom promos, and the sidebar
   RANDOM PRODUCT (.moduletable_empty) on user/account/registration/login/remind/reset views. */
body.view-user #top-content-modules,
body.view-registration #top-content-modules,
body.view-login #top-content-modules,
body.view-remind #top-content-modules,
body.view-reset #top-content-modules,
body.view-profile #top-content-modules,
body.view-user #bottom-content-modules,
body.view-registration #bottom-content-modules,
body.view-login #bottom-content-modules,
body.view-remind #bottom-content-modules,
body.view-reset #bottom-content-modules,
body.view-profile #bottom-content-modules,
body.view-user #main-content-handler .col-md-3 > .moduletable_empty,
body.view-registration #main-content-handler .col-md-3 > .moduletable_empty,
body.view-login #main-content-handler .col-md-3 > .moduletable_empty,
body.view-remind #main-content-handler .col-md-3 > .moduletable_empty,
body.view-reset #main-content-handler .col-md-3 > .moduletable_empty,
body.view-profile #main-content-handler .col-md-3 > .moduletable_empty {
    display: none !important;
}

/* R6.1 (2026-07-18): the 75px header height is for the in-flow block; the OPEN search
   panel sizes to its content (input was spilling over the logo at 75px).
   Higher specificity (body.tf-search-open #search-position) beats the 75px rule. */
@media (max-width: 767px) {
  body.tf-search-open #search-position {
    height: auto !important;
    min-height: 75px;
  }
}


/* R7 (2026-07-18): shop-drawer list contained to the viewport (rows were extending past
   the right edge) + chip clearance so the pinned X never covers the panel heading */
@media (max-width: 767px) {
  body.tf-shop-open .tf-shop-menu-src,
  body.tf-shop-open .tf-shop-menu-src * {
    box-sizing: border-box !important;
  }
  body.tf-shop-open .tf-shop-menu-src ul.menu {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
  }
  body.tf-shop-open .tf-shop-menu-src ul.menu li a {
    width: 100% !important;
    max-width: 100% !important;
  }
  body.tf-shop-open .tf-shop-menu-src h3 {
    margin-right: 56px !important; /* clearance for the pinned X toggle */
  }
}

/* sidewaysfix 2026-10-15 */
/* Phone: the page scrolled sideways. */
@media (max-width: 767px) {
  /* these bands kept margin 0 -20px from the old 20 px phone body gutter, which is gone: they hung 20 px off both
     sides (sideways scroll, text at the edge). */
  #top-quick-nav, #footer { margin-left: 0 !important; margin-right: 0 !important; }
  /* row gutters / an absolutely placed module overhang the screen by a few px: no sideways scroll (clip keeps sticky). */
  html, body { overflow-x: clip; }
}

/* 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; }

/* =====================================================================
   CS-PATCH: login-fields-reach-the-ios-threshold  2026-10-19 (canonical rev .132)
   iOS Safari zooms any text field under 16px when it gets focus and does not zoom back. The 2026-09-27 block covers the
   cart's own login/coupon/quantity fields only; the Joomla login page, the login module and the registration, profile
   and reset forms kept the donor's 11-15px. MEASURED @375 on the 68 released demos: 45 rendered #username/#password
   at 11-15px. Phones only; buttons are left alone (iOS does not zoom them).
   ===================================================================== */
@media (max-width: 767px) {
    html body :is(#username, #password, #modlgn-username, #modlgn-passwd),
    html body :is(form.mod-login, form[id^="login-form"], form[class*="com-users-"], #member-registration, #member-profile, #user-registration)
        :is(input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input:not([type]), select, textarea) {
        font-size: 16px !important;
    }
}
/* /CS-PATCH: login-fields-reach-the-ios-threshold */

/* =====================================================================
   CS-PATCH: transform-std-20261103  (released-template standard, 2026-11-03; Tim's Flexi
   full review = the recipe: modern icons, login fields, form field heights)
   ===================================================================== */
/* icons: Font Awesome 6 (the set the newest releases use) in place of the old bitmap icons, same glyph on desktop and phones */
#currency form > input.button:not(#cs-std1):not(#cs-std2) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='%23ffffff' d='M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: 50% 50% !important; background-size: auto 9px !important; }   /* Font Awesome in place of change-currency.png (#ffffff) */
#vmCartModule div > #cartpanel:not(#cs-std1):not(#cs-std2) { background-image: none !important; } #vmCartModule div > #cartpanel:not(#cs-std1):not(#cs-std2)::before { content: "\f07a" !important; font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; font-style: normal; font-size: 19px !important; line-height: 1 !important; background: none !important; position: absolute !important; inset: 0 !important; width: auto !important; height: auto !important; display: flex !important; align-items: center; justify-content: center; text-indent: 0 !important; color: #222222 !important; pointer-events: none; }
#search-position form.tf-search-module > div.search > input.button:not(#cs-std1):not(#cs-std2) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23ffffff' 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") !important; background-repeat: no-repeat !important; background-position: 50% 50% !important; background-size: auto 18px !important; }   /* Font Awesome in place of search-icon.png (#ffffff) */
@media (max-width: 767px) { #currency form > input.button:not(#cs-std1):not(#cs-std2) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='%23ffffff' d='M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: 50% 50% !important; background-size: auto 9px !important; } }   /* Font Awesome in place of change-currency.png (#ffffff) */
/* login: Joomla's show-password eye sits INSIDE the password field (login page, registration, account edit); the field takes the
   whole group width, the same as the username field, and the eye is a plain accent glyph over its right end (Flexi recipe) */
.input-group:has(> .input-password-toggle) { position: relative !important; flex-wrap: nowrap !important; }
.input-group:has(> .input-password-toggle) > input:not(#cs-std1):not(#cs-std2) { flex: 1 1 100% !important; width: 100% !important; max-width: none !important; box-sizing: border-box !important; padding-right: 34px !important; border-top-right-radius: 0px !important; border-bottom-right-radius: 0px !important; }
.input-group > .input-password-toggle:not(#cs-std1):not(#cs-std2) { position: absolute !important; top: 1px !important; right: 1px !important; bottom: 1px !important; z-index: 5; display: flex !important; align-items: center; justify-content: center; min-width: 0 !important; width: 32px !important; height: auto !important; padding: 0 !important; margin: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; color: rgb(50, 186, 236) !important; }
.input-group > .input-password-toggle:hover, .input-group > .input-password-toggle:focus-visible { background: transparent !important; color: rgb(50, 186, 236) !important; opacity: .75; }
@media (min-width: 768px) { .com-users-login__form .password-group .input-group:not(#cs-std1):not(#cs-std2) { width: 512px !important; max-width: 100% !important; } }   /* the username field is 512px, the password group was 854px */
@media (max-width: 767px) { .com-users-login__form #username:not(#cs-std1):not(#cs-std2), .com-users-login__form .password-group .input-group:not(#cs-std1):not(#cs-std2), .mod-login input[name=username]:not(#cs-std1):not(#cs-std2), .mod-login .input-group:not(#cs-std1):not(#cs-std2), #login-form input[name=username]:not(#cs-std1):not(#cs-std2), #login-form input[type=password]:not(#cs-std1):not(#cs-std2) { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } #login-form .cs-eye-wrap:not(#cs-std1):not(#cs-std2) { display: block !important; width: 100% !important; } }
@media (max-width: 767px) { :is(.userdata, .com-form-login, #com-form-login, .com-form-registration, #LoginForm) .cs-eye-wrap:not(#cs-std1):not(#cs-std2) { display: block !important; width: 100% !important; max-width: 100% !important; } :is(.userdata, .com-form-login, #com-form-login, .com-form-registration, #LoginForm) input[type=checkbox]:not(#cs-std1):not(#cs-std2) { width: auto !important; flex: 0 0 auto !important; } }
#com-form-login-remember:has(> input[type=submit], > button[type=submit], > input.default) { display: flex !important; flex-wrap: wrap !important; align-items: center !important; column-gap: 8px; row-gap: 10px; } #com-form-login-remember:has(> input[type=submit], > button[type=submit], > input.default) > input[type=checkbox] { order: 1; margin: 0 !important; } #com-form-login-remember:has(> input[type=submit], > button[type=submit], > input.default) > label { order: 2; margin: 0 !important; } #com-form-login-remember:has(> input[type=submit], > button[type=submit], > input.default)::before { content: ""; order: 3; flex: 0 0 100%; height: 0; } #com-form-login-remember:has(> input[type=submit], > button[type=submit], > input.default) > input[type=submit], #com-form-login-remember:has(> input[type=submit], > button[type=submit], > input.default) > button[type=submit], #com-form-login-remember:has(> input[type=submit], > button[type=submit], > input.default) > input.default { order: 4; float: none !important; }
.input-group:has(> .input-password-toggle) > input:not(#cs-std1):not(#cs-std2) { margin-top: 0 !important; margin-bottom: 0 !important; }
@media (min-width: 768px) { #com-form-login:not(:has(#com-form-login-remember > input[type=submit], #com-form-login-remember > input.default)) input[type=checkbox]:not(#cs-std1):not(#cs-std2) { margin-left: 12px !important; } }
.cs-pw-wrap { position: relative !important; }
.cs-pw-wrap > input:not(#cs-std1):not(#cs-std2) { flex: 1 1 auto !important; width: 100% !important; max-width: none !important; box-sizing: border-box !important; padding-right: 32px !important; }
.cs-pw-wrap > .cs-pw-toggle:not(#cs-std1):not(#cs-std2) { position: absolute !important; right: 6px !important; top: 50% !important; transform: translateY(-50%) !important; margin: 0 !important; z-index: 5; background: transparent !important; border: 0 !important; }
/* form fields: every field of a form the same height, drop-downs included (registration, billing details, login) */
:is(form#com-form-login:has(input[name*=email i], input[type=password]), form.com-form-login:has(input[name*=email i], input[type=password]), form#adminForm:has(input[name*=email i], input[type=password]), form.adminForm:has(input[name*=email i], input[type=password])) input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=hidden]):not([type=image]):not([type=file]):not([type=reset]):not([name*=quantity]), :is(form#com-form-login:has(input[name*=email i], input[type=password]), form.com-form-login:has(input[name*=email i], input[type=password]), form#adminForm:has(input[name*=email i], input[type=password]), form.adminForm:has(input[name*=email i], input[type=password])) select { height: 26px !important; min-height: 26px !important; box-sizing: border-box !important; padding-top: 0 !important; padding-bottom: 0 !important; line-height: normal !important; }
@media (min-width: 768px) { .com-users-login__form .password-group .input-group > input:not(#cs-std1):not(#cs-std2) { height: 29px !important; } }   /* the username field is 29px high */
/* gate fixes (rendered gate, Susan's Rapid + Ultimo grad-test checks 2026-11-02): footer contrast, checkbox gaps, VM login row, owl dots, phone menu bars */
div.row > div.span12 > div.moduletable_empty > h3 > span.h-cl { color: rgb(34, 126, 160) !important; }   /* was rgb(50, 186, 236) on rgb(255, 255, 255) ("OUR") */
div.moduletable_empty > div.module-content > div.mod-custom.custom > p > span { color: rgb(164, 164, 164) !important; }   /* was rgb(135, 135, 135) on rgb(56, 56, 56) ("Lorem ipsum dolor sit am") */
div.module-content > div.mod-custom.custom > p > span > strong { color: rgb(164, 164, 164) !important; }   /* was rgb(135, 135, 135) on rgb(56, 56, 56) ("et dolore magna aliqua") */
div.span4 > div.moduletable_empty > div.module-content > div.mod-custom.custom > p { color: rgb(164, 164, 164) !important; }   /* was rgb(135, 135, 135) on rgb(56, 56, 56) ("Nice Avenue 78a 06 78A L") */
#footer-line > div.col-md-12 > div.mod-custom.custom > p { color: rgb(164, 164, 164) !important; }   /* was rgb(135, 135, 135) on rgb(56, 56, 56) ("2026 Add your web site c") */
/* top bar: My account / Register / Follow Us drew their icons from one sprite (images/top-icons.png); Font Awesome user, pen and the
   Twitter bird in the same spot (the links keep their 30px left padding), in the links' own grey */
#log-panel li > a:not(#cs-std1):not(#cs-std2), #log-panel li > #v_register:not(#cs-std1):not(#cs-std2), #follow-button:not(#cs-std1):not(#cs-std2) { background-image: none !important; position: relative !important; }
#log-panel li > a:not(#cs-std1):not(#cs-std2)::before, #log-panel li > #v_register:not(#cs-std1):not(#cs-std2)::before, #follow-button:not(#cs-std1):not(#cs-std2)::before { font-family: "Font Awesome 6 Free"; font-weight: 900; font-style: normal; font-size: 15px; line-height: 1; position: absolute; left: 4px; top: 50%; transform: translateY(-50%); color: rgb(137, 137, 137); pointer-events: none; }
#log-panel li > a:not(#cs-std1):not(#cs-std2)::before { content: "\f007"; }
#log-panel li > #v_register:not(#cs-std1):not(#cs-std2)::before { content: "\f303"; }
#follow-button:not(#cs-std1):not(#cs-std2)::before { content: "\f099"; font-family: "Font Awesome 6 Brands"; font-weight: 400; font-size: 16px; left: 6px; }
#currency form > input.button { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%2332baec' d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: 50% 50% !important; background-size: auto 15px !important; }   /* Font Awesome circle-check (#32baec) in place of the old bitmap - currency switch (template blue) */
/* top bar: "Follow Us" sat 5.5px above the currency select and the other links (midlines 12.5 / 18) */
@media (min-width: 768px) { #follow-button:not(#cs-std1):not(#cs-std2) { top: 5px !important; } }
/* /CS-PATCH: transform-std-20261103 */