/*
* Studio template — bs2-bs5-bridge.css
*
* BS2-to-BS5 visual aliasing for BS2 grid + utility classes that survive in:
* (1) custom-HTML module content stored in jos_modules.content
* (2) VirtueMart's older view templates that still emit .row-fluid / .span* markup
*
* Skill 26 modernize-stack.py rewrites BS2 classes in index.php only. Module
* content is data, not code — those BS2 classes survive intact. Without this
* bridge, BS5 doesn't know what .row-fluid / .spanN mean, so module rows
* collapse to stacked-vertically block elements.
*
* Load LAST in the CSS stack so its rules win the cascade.
*
* Per-template applicability (Studio, 2026-07-06 grad):
* - STRIP sticky-header rule (Studio's template.css + preset CSS define #top-handler background)
* - KEEP testimonials rule (Studio has #testimonials, index.php:1674)
* - KEEP manufacturers rule (Studio has .man-main-handler in template.css)
* - KEEP megamenu hover-gap rule (Studio uses usemegamenu param + #megamenu-handler)
*/
/* ---------- BS2 .row-fluid → BS5 flex row (with !important cascade fixes, 2026-06-26 eShop) ---------- */
.row-fluid { display: flex !important; flex-wrap: wrap !important; margin-right: 0; margin-left: 0; box-sizing: border-box; width: 100%; }
.row-fluid > [class*="span"] { box-sizing: border-box; min-height: 1px; padding-right: 15px; padding-left: 15px; flex: 0 0 auto !important; float: none !important; margin-left: 0 !important; margin-right: 0 !important; }
.row-fluid > .span1 { width: 8.333333% !important; } .row-fluid > .span2 { width: 16.666667% !important; }
.row-fluid > .span3 { width: 25% !important; } .row-fluid > .span4 { width: 33.333333% !important; }
.row-fluid > .span5 { width: 41.666667% !important;} .row-fluid > .span6 { width: 50% !important; }
.row-fluid > .span7 { width: 58.333333% !important;} .row-fluid > .span8 { width: 66.666667% !important; }
.row-fluid > .span9 { width: 75% !important; } .row-fluid > .span10 { width: 83.333333% !important; }
.row-fluid > .span11 { width: 91.666667% !important;} .row-fluid > .span12 { width: 100% !important; }
/* Same rules for .row > .spanN — templates often mix BS5 .row + BS2 .span markup */
.row > [class*="span"] { box-sizing: border-box; min-height: 1px; padding-right: 15px; padding-left: 15px; flex: 0 0 auto !important; float: none !important; margin-left: 0 !important; margin-right: 0 !important; }
.row > .span1 { width: 8.333333% !important; } .row > .span2 { width: 16.666667% !important; }
.row > .span3 { width: 25% !important; } .row > .span4 { width: 33.333333% !important; }
.row > .span5 { width: 41.666667% !important;} .row > .span6 { width: 50% !important; }
.row > .span7 { width: 58.333333% !important;} .row > .span8 { width: 66.666667% !important; }
.row > .span9 { width: 75% !important; } .row > .span10 { width: 83.333333% !important; }
.row > .span11 { width: 91.666667% !important;} .row > .span12 { width: 100% !important; }
/* Standalone .spanN (outside .row-fluid) — float-based BS2 behaviour (NO !important on width — must lose to .row-fluid > .spanN) */
.span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12 {
box-sizing: border-box; float: left; min-height: 1px; margin-left: 20px;
}
.span1:first-child, .span2:first-child, .span3:first-child, .span4:first-child,
.span5:first-child, .span6:first-child, .span7:first-child, .span8:first-child,
.span9:first-child, .span10:first-child, .span11:first-child, .span12:first-child { margin-left: 0; }
.span1 { width: 60px; } .span2 { width: 140px; } .span3 { width: 220px; } .span4 { width: 300px; }
.span5 { width: 380px; } .span6 { width: 460px; } .span7 { width: 540px; } .span8 { width: 620px; }
.span9 { width: 700px; } .span10 { width: 780px; } .span11 { width: 860px; } .span12 { width: 940px; }
/* ---------- BS2 .offset* ---------- */
.row-fluid > .offset1 { margin-left: 8.333333%; } .row-fluid > .offset2 { margin-left: 16.666667%; }
.row-fluid > .offset3 { margin-left: 25%; } .row-fluid > .offset4 { margin-left: 33.333333%; }
.row-fluid > .offset5 { margin-left: 41.666667%; } .row-fluid > .offset6 { margin-left: 50%; }
.row-fluid > .offset7 { margin-left: 58.333333%; } .row-fluid > .offset8 { margin-left: 66.666667%; }
.row-fluid > .offset9 { margin-left: 75%; } .row-fluid > .offset10 { margin-left: 83.333333%; }
.row-fluid > .offset11 { margin-left: 91.666667%; }
/* ---------- BS2 .pull-left / .pull-right → BS5 equivalents ---------- */
.pull-left { float: left !important; }
.pull-right { float: right !important; }
/* ---------- BS2 .hidden-phone / .visible-phone (div/block context) ---------- */
@media (max-width: 767px) {
.hidden-phone { display: none !important; }
.visible-phone { display: block !important; }
}
@media (min-width: 768px) {
.visible-phone { display: none !important; }
.hidden-phone { display: block !important; }
}
/* ---------- BS2 button aliases ---------- */
.btn-inverse { background-color: #212529; border-color: #212529; color: #fff; }
.btn-inverse:hover { background-color: #000; border-color: #000; color: #fff; }
.btn-default { background-color: #6c757d; border-color: #6c757d; color: #fff; }
.btn-default:hover { background-color: #5c636a; border-color: #5c636a; color: #fff; }
/* ---------- List-style reset for product/social ULs (locked 2026-06-26 eShop) ---------- */
ul.row-fluid, ul.vmproduct, ul.sl-products, ul.vmproduct-list,
.menu-nav, .menu-nav ul, #log-panel, #quick-menu ul, #social-links {
list-style: none !important;
padding-left: 0 !important;
margin-left: 0 !important;
}
/* ---------- Mobile responsiveness — collapse multi-col rows on small screens ---------- */
@media (max-width: 767px) {
.row-fluid { flex-direction: column; }
.row-fluid > [class*="span"] { width: 100% !important; margin-left: 0 !important; }
.row > [class*="span"] { width: 100% !important; margin-left: 0 !important; }
header.span12.th-abs { position: relative !important; }
.container.main-bg { max-width: 100% !important; padding-left: 10px !important; padding-right: 10px !important; }
}
/* .container.main-bg containing block for absolute-positioned header */
.container.main-bg { position: relative; }
/* ---------- Testimonials section — tighten over-tall gray box (Studio has #testimonials) ---------- */
#testimonials .container { min-height: auto; }
#testimonials .container .row-fluid { padding: 50px 0px; }
#testimonials { margin-bottom: 0; }
.customers-box-handler .owl-theme .owl-controls .owl-pagination { margin-top: 10px; }
/* ---------- Manufacturers/Partners carousel — reduce gap before pagination dots (Studio has .man-main-handler) ---------- */
.man-main-handler { padding-bottom: 0; }
.man-main-handler .owl-wrapper-outer { padding: 0; }
.man-main-handler .owl-pagination, .moduletable_manufacturers .owl-pagination { margin-top: 10px; }
.moduletable_manufacturers .owl-item { padding: 0 10px; }
.moduletable_manufacturers .owl-item img { max-height: 80px; width: auto; margin: 0 auto; }
/* ---------- Cart product images — force aspect-ratio preservation ---------- */
span.cart-images img, .cart-images img, .cart-product-image img,
.cartpanel img.featuredProductImage, td .cart-images img,
.cartpanel .vm_cart_products img, .cartpanel img {
width: 45px !important; height: auto !important; max-height: 60px !important;
object-fit: contain;
}
/* ---------- Megamenu hover-gap fix (Studio uses custom megamenu) ---------- */
#megamenu-handler #mega-menu.menu-nav > li > ul.ul-container {
transition: top 0s linear 500ms;
}
#megamenu-handler #mega-menu.menu-nav > li:hover > ul.ul-container,
#megamenu-handler #mega-menu.menu-nav > li.sfHover > ul.ul-container {
top: 90px !important;
transition-delay: 0s;
}
/* ---------- Universal image rule — aspect-ratio defense (locked 2026-06-16) ---------- */
img[width][height]:not([class*="icon"]):not([class*="socicon"]):not([class*="emoji"]):not([alt*="separator"]) {
max-width: 100% !important;
height: auto !important;
}
/* Container safety net — any image inside these VM/Joomla content containers */
.main-image img, .vm-additional-images img, .vmproduct img, .productdetails-view img,
.category-view img, .featured-view img, .latest-view img, .topten-view img,
.recent-view img, .related-products-view img, .browse-view img, .search-result-products img,
.com-content-article img, .article-content img {
max-width: 100% !important;
height: auto !important;
}
/* ---------- Social-icon sprite override (Phase 3f companion, locked 2026-06-26 eShop) ---------- */
/* Studio's nav.css likely defines legacy sprite background-position rules — kill them, keep FA glyphs */
#social-links li a {
text-indent: 0 !important;
width: auto !important;
height: auto !important;
padding: 8px 10px !important;
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none !important;
}
#social-links li a:hover, #social-links li a:focus, #social-links li a:active {
text-decoration: none !important;
}
#social-links li a span {
position: absolute !important;
width: 1px !important; height: 1px !important;
padding: 0 !important; margin: -1px !important;
overflow: hidden !important;
clip: rect(0,0,0,0) !important;
white-space: nowrap !important;
border: 0 !important;
background-image: none !important;
background: none !important;
}
#social-links li a i.fab,
#social-links li a i.fas {
font-size: 18px;
color: inherit;
line-height: 1;
}
/* ---------- Modal rescue (Phase 3b.5 companion) ---------- */
#LoginForm.modal.show {
display: flex !important;
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
align-items: center;
justify-content: center;
z-index: 10500;
background: rgba(0,0,0,0.5);
}
#LoginForm.modal .modal-dialog {
max-width: 500px;
margin: 0 auto;
}
/* ============================================================
* 2026-07-07 grad-run additions
* ============================================================ */
/* ---------- Container width lockdown (MubleStore-locked 2026-07-06) ----------
BS5's .container { max-width: 1320px } takes over after modernize-stack strips
the BS2 bootstrap. Restore BS2 breakpoint widths so layout matches live donor. */
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; } }
@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; } }
/* ---------- Phase 5m — Mobile UX (Expression pattern, locked 2026-06-19/26; chip locked 2026-07-05) ---------- */
/* Hide legacy selectnav UI on all viewports */
a#menupanel, body div.panel1 { display: none !important; }
/* Hamburger button — injected by mobile-accordion.js into #top-handler */
#mobile-menu-toggle {
display: none;
position: absolute;
top: 15px;
right: 20px;
width: 44px;
height: 44px;
background: rgba(255,255,255,0.15);
border: 1px solid rgba(255,255,255,0.35);
border-radius: 4px;
cursor: pointer;
color: #ffffff;
font-size: 20px;
line-height: 1;
z-index: 100000;
padding: 0;
}
#mobile-menu-toggle:hover, #mobile-menu-toggle:focus {
background: rgba(255,255,255,0.25);
outline: none;
}
#mobile-menu-toggle .mmt-icon::before { content: "\2261"; /* horizontal bar */ }
body.mobile-menu-open #mobile-menu-toggle .mmt-icon::before { content: "\00d7"; /* multiplication X */ }
@media (max-width: 767px) {
#mobile-menu-toggle { display: block; }
/* Mobile drawer — reveals BELOW header, tinted background so page shows through dimmed */
body.mobile-menu-open #megamenu-handler {
display: block !important;
position: fixed;
top: 70px;
left: 0;
right: 0;
bottom: 0;
z-index: 99999;
background: rgba(33, 37, 41, 0.85);
overflow-y: auto;
padding: 0;
}
body.mobile-menu-open ul#mega-menu,
body.mobile-menu-open ul.menu-nav {
display: block !important;
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
background: #ffffff;
}
body.mobile-menu-open ul#mega-menu li,
body.mobile-menu-open ul.menu-nav li {
display: block !important;
border-bottom: 1px solid #e6e6e6 !important;
position: relative;
}
body.mobile-menu-open ul#mega-menu li a,
body.mobile-menu-open ul.menu-nav li a {
display: block !important;
color: #2f2f2f !important;
padding: 14px 60px 14px 20px !important;
text-decoration: none !important;
background: none !important;
line-height: 1.35;
}
body.mobile-menu-open ul#mega-menu li a:hover,
body.mobile-menu-open ul.menu-nav li a:hover,
body.mobile-menu-open ul#mega-menu li.active > a,
body.mobile-menu-open ul.menu-nav li.active > a {
color: #2f2f2f !important;
background: #f5f5f5 !important;
}
/* Nuclear text-decoration killer for everything in mobile drawer */
body.mobile-menu-open ul#mega-menu *,
body.mobile-menu-open ul.menu-nav *,
body.mobile-menu-open ul#mega-menu *:hover,
body.mobile-menu-open ul.menu-nav *:hover {
text-decoration: none !important;
}
/* Child ULs default hidden — revealed when parent has .cs-mobile-open */
body.mobile-menu-open ul#mega-menu li > ul,
body.mobile-menu-open ul.menu-nav li > ul { display: none !important; }
body.mobile-menu-open ul#mega-menu li.cs-mobile-open > ul,
body.mobile-menu-open ul.menu-nav li.cs-mobile-open > ul { display: block !important; background: #f8f8f8 !important; }
/* Mobile menu indicator chip (locked 2026-07-05 MubleStore John) */
.mobile-menu-indicator {
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 0.15s ease, border-color 0.15s ease, color 0.15s ease;
pointer-events: none;
}
.cs-mobile-open > a > .mobile-menu-indicator,
.expanded > a > .mobile-menu-indicator,
.mobile-menu-indicator.mmi-minus {
border-color: #333333;
color: #333333;
background: rgba(255,255,255,0.95);
}
.mobile-menu-indicator > i.fa,
.mobile-menu-indicator > i.fas,
.mobile-menu-indicator > i.fab {
font-size: 14px;
line-height: 1;
vertical-align: middle;
color: inherit;
}
.mobile-menu-indicator.mmi-hidden { visibility: hidden; }
/* Hide classic menu instances at ALL viewports on mobile drawer background */
#st-navigation .quick-menu,
#st-navigation ul.menu,
body.mobile-menu-open .responsive-menu { display: none !important; }
/* Top-quick-nav (login/register/help): horizontal row not stacked */
#tpr-nav,
body.mobile-menu-open #tpr-nav,
body.mobile-menu-open ul.log-panel {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 12px;
justify-content: center;
padding: 10px;
}
}
/* ---------- Swiper 11 slideshow container sizing (Phase 5a companion) ---------- */
.ph-swiper-slideshow {
aspect-ratio: 3/1;
max-height: 480px;
min-height: 280px;
overflow: hidden;
position: relative;
}
.ph-swiper-slideshow .swiper-slide.ph-slide {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.ph-swiper-slideshow .ph-slide-caption {
position: absolute !important;
left: 5%;
top: 30%;
max-width: 70%;
z-index: 4;
color: #ffffff;
}
.ph-swiper-slideshow .swiper-pagination,
.ph-swiper-slideshow .swiper-button-prev,
.ph-swiper-slideshow .swiper-button-next { z-index: 4; }
.ph-swiper-slideshow::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
height: 50px;
background: linear-gradient(to bottom, transparent, var(--ph-page-bg, #f5f5f5));
pointer-events: none;
z-index: 3;
}
/* ---------- Testimonial Swiper (Phase 5a.5 companion) ---------- */
.testi-swiper {
padding: 20px 0;
position: relative;
}
.testi-swiper .swiper-slide { height: auto; }
/* =================================================================
* CS-PATCH suite (2026-07-07) — post-modernization layout restore
*
* modernize-stack Phase 3a rewrites BS2 classes (.row-fluid, .spanN)
* to their BS5 equivalents (.row, .col-*). Some template elements
* have NO grid classes at all — they relied on BS2's default
* `.row-fluid > *` float behavior. When their parent .row-fluid gets
* rewritten to .row (BS5 flex-wrap), those unclassed children flex
* to content-width and either overflow or collapse.
* ================================================================= */
/* -----------------------------------------------------------------
* CS-PATCH: header-top-bar-layout
*
* Applies to EVERY .row inside #top (outer row with site-name +
* st-navigation, AND inner row inside st-navigation with menu + icons).
* BS5 flex-wrap breaks these; restore BS2 float-based flow.
* ----------------------------------------------------------------- */
#top .row,
#top .row-fluid {
display: block !important;
}
#top #site-name-handler {
float: left !important;
}
#top #st-navigation {
overflow: hidden !important; /* new BFC — respects the site-name float */
float: none !important;
width: auto !important;
}
/* Inside st-navigation: menu floats left, cart/login handler floats right */
#top #st-navigation nav#menu,
#top #st-navigation #menu-handler {
float: left !important;
}
#top #st-navigation #cl-handler,
#top #st-navigation #tpr-nav {
float: right !important;
}
/* Clearfix on the inner row so it wraps around floats */
#top #st-navigation > .row::after,
#top #st-navigation > .row-fluid::after {
content: '';
display: block;
clear: both;
}
/* -----------------------------------------------------------------
* CS-PATCH: slideshow-full-width
* ----------------------------------------------------------------- */
#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,
.ph-swiper-slideshow .swiper-wrapper,
.ph-swiper-slideshow .swiper-slide {
height: auto !important;
aspect-ratio: 3 / 1;
min-height: 400px;
max-height: 650px;
}
#slideshow-handler {
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
padding-left: 0;
padding-right: 0;
}
/* -----------------------------------------------------------------
* CS-PATCH: footer-full-width
* ----------------------------------------------------------------- */
#footer,
#bottom-bg,
.footer-holder,
section#tabs {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
body > .body-innerwrapper,
body > div:first-child {
overflow-x: hidden;
}
/* -----------------------------------------------------------------
* CS-PATCH: jump-to-top-circle
* ----------------------------------------------------------------- */
.jump-to-top {
position: fixed !important;
right: 30px !important;
bottom: 30px !important;
z-index: 9998 !important;
width: 50px !important;
height: 50px !important;
padding: 0 !important;
}
.jump-to-top a {
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-direction: column !important;
width: 50px !important;
height: 50px !important;
padding: 0 !important;
border-radius: 50% !important;
text-align: center !important;
text-decoration: none !important;
font-size: 11px !important;
line-height: 1 !important;
}
.jump-to-top a i {
font-size: 16px !important;
margin-bottom: 2px !important;
line-height: 1 !important;
}
.jump-to-top a br {
display: none !important;
}
/* CS-PATCH header-inner-row-widths (2026-07-07 v3):
* Force floated children of #top .row to shrink to content width so
* nav#menu (float:left) and #cl-handler (float:right) coexist on same row. */
#top #st-navigation nav#menu,
#top #st-navigation #menu-handler {
width: auto !important;
max-width: none !important;
}
#top #st-navigation #cl-handler,
#top #st-navigation #tpr-nav {
width: auto !important;
max-width: none !important;
}
/* CS-PATCH slideshow-slide-top-reset (2026-07-07 v4):
* Swiper 11 with effect:fade + my height:auto/aspect-ratio override causes
* Swiper JS to set inline top:154px on each slide (its vertical-centering
* logic misfires because it cant read a fixed height). Result: 154px of
* empty white space between the header and the visible slide image.
* Fix: force slides top:0 so they align with the wrapper. */
.ph-swiper-slideshow .swiper-slide {
top: 0 !important;
left: 0 !important;
}
/* CS-PATCH slideshow-height-match-live (2026-07-07 v5):
* FashionShop live uses camera.js with cam_height=50% -> renders at
* 50% of container width (~693px at 1385 viewport). My aspect-ratio 3/1
* gave only 33% (~469px). Switch to 2/1 = 50% + raise max-height cap. */
.ph-swiper-slideshow,
.ph-swiper-slideshow .swiper-wrapper,
.ph-swiper-slideshow .swiper-slide {
aspect-ratio: 2 / 1 !important;
min-height: 500px !important;
max-height: 800px !important;
}
/* CS-PATCH footer-column-widths (2026-07-07 v6):
* modernize-stack rewrote .row-fluid but left .tf-module.span12 wrapping
* 5 module columns (.moduletable.span2 x4 + .moduletable.span4). BS2 defaults
* give .span2 a fixed 140px width (970-grid) but the templates original
* design used 170px (1170-grid variant). Restore the 1170-grid widths so
* the columns fill their 1170px container matching live donor layout.
*
* NOTE: LIVE donors container is 1170px inner (BS5 default). Keeping that
* width; not force-full-width because it makes columns disproportionately
* narrow relative to their fixed pixel widths. */
#bottom-bg .tf-module.span12 > .row .moduletable.span2,
#bottom-bg .tf-module.span12 > .row-fluid .moduletable.span2,
#bottom-bg .moduletable.span2 { width: 170px !important; }
#bottom-bg .tf-module.span12 > .row .moduletable.span4,
#bottom-bg .tf-module.span12 > .row-fluid .moduletable.span4,
#bottom-bg .moduletable.span4 { width: 370px !important; }
/* =================================================================
* CS-PATCH suite v11 (2026-07-08) — Tim's post-grad walkthrough fixes
* ================================================================= */
/* -----------------------------------------------------------------
* CS-PATCH: payment-icons-right-align
*
* Symptom: payment icons image is set to float:right inline, but the
* parent .tf-module.span12 is 940px (Studio bridge's standalone
* .span12 fallback) inside a 1170px container — so "right" is
* 210px short of the container's actual right edge.
* Cause: the bridge sets standalone .span12 = 940px (BS2 970-grid).
* LIVE has no such override so .span12 is auto = full parent.
* Fix: restore full-width .span12 for #foo-left-right modules
* so float:right hits the true right edge.
* ----------------------------------------------------------------- */
#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;
}
/* -----------------------------------------------------------------
* CS-PATCH: mobile-menu-full-width + tall-rows
*
* Symptom: mobile hamburger drawer menu items are narrow (only ~200px
* instead of 100vw) and rows too short so text is being cut.
* Cause: the standalone .span12 = 940px fallback + parent flex sizes
* the menu items too narrow; padding 14px 60px 14px 20px +
* font-size:15px + line-height:1.4 = ~35px row = tight.
* Fix: force menu + ul + li + a all to 100% width; bump row min-h
* to 52px + generous 18px top/bot padding + line-height 1.5.
* ----------------------------------------------------------------- */
@media (max-width: 767px) {
body.mobile-menu-open #menu,
body.mobile-menu-open #menu-handler,
body.mobile-menu-open #megamenu-handler,
body.mobile-menu-open nav#menu {
width: 100vw !important;
max-width: 100vw !important;
left: 0 !important;
right: 0 !important;
}
body.mobile-menu-open ul.menu-nav,
body.mobile-menu-open #mega-menu,
body.mobile-menu-open #nav {
width: 100% !important;
max-width: 100% !important;
display: block !important;
}
body.mobile-menu-open ul.menu-nav > li,
body.mobile-menu-open #mega-menu > li,
body.mobile-menu-open #nav > li,
body.mobile-menu-open ul.menu-nav li {
width: 100% !important;
max-width: 100% !important;
min-height: 52px !important;
display: block !important;
float: none !important;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
body.mobile-menu-open ul.menu-nav li a,
body.mobile-menu-open ul.menu-nav li li a {
display: block !important;
width: 100% !important;
min-height: 52px !important;
padding: 18px 60px 18px 22px !important;
line-height: 1.5 !important;
white-space: normal !important;
overflow: visible !important;
text-overflow: initial !important;
}
}
/* -----------------------------------------------------------------
* CS-PATCH: mobile-secondary-menu-visible
*
* Symptom: on mobile only the hamburger appears; the secondary utility
* strip (quick-menu / top-quick-nav / responsive-menu items)
* is hidden.
* Cause: template.css hides the utility strip on <768px + my Phase 5m
* block hides #menu/#menu-handler/#megamenu-handler by default
* (revealed on body.mobile-menu-open).
* Fix: reveal the utility strip inside the mobile drawer above the
* main menu items. The strip is typically #top-quick-nav /
* #quick-menu / .quick-menu — show it inside the drawer with
* full width + horizontal-flex layout.
* ----------------------------------------------------------------- */
@media (max-width: 767px) {
body.mobile-menu-open #top-quick-nav,
body.mobile-menu-open .quick-menu,
body.mobile-menu-open #quick-menu {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
gap: 12px !important;
justify-content: center !important;
padding: 16px 20px !important;
width: 100% !important;
background: rgba(255, 255, 255, 0.06) !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
}
body.mobile-menu-open #top-quick-nav a,
body.mobile-menu-open .quick-menu a,
body.mobile-menu-open #quick-menu a {
color: #fff !important;
font-size: 13px !important;
padding: 6px 10px !important;
text-decoration: none !important;
}
}
/* -----------------------------------------------------------------
* CS-PATCH: mobile-footer-top-padding
*
* Symptom: on mobile, the #bottom-bg section has excessive empty
* space at the top before the first column ("Informations").
* Cause: .inner-sep padding-top or #bottom-bg padding-top from the
* template's desktop layout is not reduced for narrow viewports.
* Fix: tighten the top padding on mobile.
* ----------------------------------------------------------------- */
@media (max-width: 767px) {
#bottom-bg,
#bottom-bg > .container,
#bottom-bg > .container-fluid,
#bottom-bg .inner-sep {
padding-top: 20px !important;
padding-bottom: 20px !important;
}
#footer,
#footer > .container,
#footer > .container-fluid,
#footer .inner-sep {
padding-top: 15px !important;
padding-bottom: 15px !important;
}
}
/* -----------------------------------------------------------------
* CS-PATCH: mobile-footer-columns-full-width
*
* Symptom: mobile footer columns are stuck inside a narrow band with
* large gutters on both sides. Desktop CS-PATCH pinned
* .moduletable.span2 to 170px + .span4 to 370px — those fixed
* widths overflow the mobile viewport, causing the .container
* to shrink content into a narrow center band.
* Fix: override the desktop pinned widths on mobile so each column
* spans 100%. Kill horizontal padding on inner containers.
* ----------------------------------------------------------------- */
@media (max-width: 767px) {
#bottom-bg .tf-module.span12,
#bottom-bg .tf-module,
#bottom-bg .tf-module.span12 > .row,
#bottom-bg .tf-module.span12 > .row-fluid {
width: 100% !important;
max-width: 100% !important;
display: block !important;
}
#bottom-bg .moduletable.span2,
#bottom-bg .moduletable.span4,
#bottom-bg .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,
#bottom-bg > .container-fluid,
#footer > .container,
#footer > .container-fluid {
padding-left: 12px !important;
padding-right: 12px !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
#foo-left-right {
padding-left: 12px !important;
padding-right: 12px !important;
}
#foo-left-right .tf-module.span12 {
text-align: center !important;
}
#foo-left-right .tf-module.span12 img {
float: none !important;
display: block;
margin: 0 auto !important;
max-width: 100% !important;
height: auto !important;
}
}
/* CS-PATCH mobile-menu-ancestor-widths (2026-07-08 v11.1):
* On mobile the mega-menu chain is: #menu > #megamenu-handler >
* #megamenu-background > #mega-menu-responsive-handler > #mega-menu.
* #megamenu-background is float:right + content-width = 190px, which
* constrains all its descendants (including the menu items) to 190px.
* Break the float chain + force 100% width all the way down. */
@media (max-width: 767px) {
body.mobile-menu-open #megamenu-handler,
body.mobile-menu-open #megamenu-background,
body.mobile-menu-open #mega-menu-responsive-handler,
body.mobile-menu-open #mega-menu {
float: none !important;
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
body.mobile-menu-open #mega-menu > li,
body.mobile-menu-open #mega-menu li {
width: 100% !important;
max-width: 100% !important;
float: none !important;
clear: both !important;
}
}
/* CS-PATCH mobile-menu-ancestor-widths-classfix (2026-07-08 v11.2):
* Corrected selectors — .megamenu-background and .mega-menu-responsive-handler
* are classes, not IDs. Use class selectors. */
@media (max-width: 767px) {
body.mobile-menu-open .megamenu-background,
body.mobile-menu-open .mega-menu-responsive-handler {
float: none !important;
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
}
/* CS-PATCH mobile-utility-strip (2026-07-08 v11.3):
* Live donor mobile shows a horizontal utility strip below the FASHION SHOP
* logo: SHOP MENU + account + register + search + cart. Stage keeps these
* elements but stacks them vertically on the right side of the header.
* Fix: on mobile, force #cl-handler into a horizontal flex strip that spans
* full width and pushes below the site name row. */
@media (max-width: 767px) {
/* Site-name row: force full width, small height */
#site-name-handler {
width: 100% !important;
max-width: 100% !important;
min-height: 50px !important;
float: none !important;
}
/* Utility strip: absolute-position it below site-name in the top area,
* horizontal flex distribution, matches live donors mobile layout */
#cl-handler {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: space-around !important;
gap: 8px !important;
position: static !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
min-height: 50px !important;
padding: 8px 0 !important;
border-top: 1px solid #eee !important;
border-bottom: 1px solid #eee !important;
background: #fff !important;
}
#cl-handler .cl-handler,
#cl-handler #search-position-handler,
#cl-handler #tpr-nav {
flex: 1 1 auto !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
padding: 0 !important;
position: relative !important;
top: auto !important;
right: auto !important;
height: auto !important;
}
#cl-handler #tpr-nav {
display: flex !important;
flex-direction: row !important;
}
#cl-handler ul.log-panel {
display: flex !important;
flex-direction: row !important;
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
gap: 12px !important;
}
#cl-handler ul.log-panel li {
margin: 0 !important;
}
/* Force header#top-handler to no-longer-be-fixed on mobile so utility strip flows normally */
#top {
display: block !important;
}
/* Hamburger button: keep visible + repositioned to fit next to icons */
#mobile-menu-toggle {
top: 12px !important;
}
}
/* CS-PATCH mobile-st-navigation-overflow (2026-07-08 v11.4):
* Desktop CS-PATCH header-top-bar-layout sets #st-navigation
* overflow:hidden to form a BFC that respects the site-name float.
* On mobile that clips the utility icons (#cl-handler is inside).
* Force overflow:visible + full-width on #st-navigation for mobile
* so #cl-handler renders as a horizontal strip below FASHION SHOP. */
@media (max-width: 767px) {
#top #st-navigation {
overflow: visible !important;
width: 100% !important;
max-width: 100% !important;
display: block !important;
margin-left: 0 !important;
}
#top #st-navigation > .row,
#top #st-navigation > .row-fluid {
display: block !important;
width: 100% !important;
max-width: 100% !important;
}
/* #top itself no longer floats site-name — need to stack site-name + utility */
#top #site-name-handler {
float: none !important;
}
#top {
height: auto !important;
min-height: 60px !important;
}
header#top-handler {
height: auto !important;
min-height: 130px !important;
}
}
/* CS-PATCH mobile-utility-strip-specificity (2026-07-08 v11.5):
* Desktop CS-PATCH header-inner-row-widths sets
* #top #st-navigation #cl-handler { width: auto !important; float: right !important }
* which beats a single-ID selector on mobile. Match specificity to override. */
@media (max-width: 767px) {
#top #st-navigation #cl-handler {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: space-around !important;
gap: 8px !important;
float: none !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
min-height: 50px !important;
padding: 8px 0 !important;
border-top: 1px solid #eee !important;
border-bottom: 1px solid #eee !important;
background: #fff !important;
}
}
/* CS-PATCH mobile-utility-strip-v2 (2026-07-08 v12):
* - Group icons centered instead of space-around.
* - Reorder so CART is last on the right (via flex order).
* - Small SHOP MENU hamburger prepended (JS-injected below).
* - Match LIVE donor visual pattern. */
@media (max-width: 767px) {
#top #st-navigation #cl-handler {
justify-content: center !important;
gap: 22px !important;
}
/* CART goes LAST (right side) */
#top #st-navigation #cl-handler .cl-handler {
order: 5 !important;
}
/* SEARCH */
#top #st-navigation #cl-handler #search-position-handler {
order: 4 !important;
}
/* ACCOUNT + REGISTER (both live inside #tpr-nav) */
#top #st-navigation #cl-handler #tpr-nav {
order: 3 !important;
}
/* JS-injected small hamburger (see js block) — order 1 = leftmost */
#top #st-navigation #cl-handler #shop-menu-btn {
order: 1 !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 3px !important;
cursor: pointer !important;
text-decoration: none !important;
color: #333 !important;
}
#shop-menu-btn .shop-menu-ham {
width: 22px;
height: 16px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
#shop-menu-btn .shop-menu-ham span {
display: block;
height: 2.5px;
background: #333;
border-radius: 1px;
}
#shop-menu-btn .shop-menu-lbl {
font-size: 10px;
letter-spacing: 0.5px;
text-transform: uppercase;
}
}
/* CS-PATCH mobile-footer-tighten (2026-07-08 v12):
* Cut the empty black band between last footer column and copyright. */
@media (max-width: 767px) {
#bottom-bg {
padding-top: 14px !important;
padding-bottom: 14px !important;
}
#bottom-bg > .container,
#bottom-bg > .container-fluid {
padding-bottom: 0 !important;
}
#bottom-bg .inner-sep {
padding-top: 6px !important;
padding-bottom: 6px !important;
}
#bottom-bg .moduletable {
margin-bottom: 14px !important;
}
#bottom-bg .moduletable:last-child {
margin-bottom: 0 !important;
}
#footer {
padding-top: 10px !important;
padding-bottom: 12px !important;
}
#footer > .container,
#footer > .container-fluid {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
#foo-left-right {
padding-top: 6px !important;
padding-bottom: 6px !important;
}
#foo-left-right .tf-module.span12 {
margin-bottom: 8px !important;
}
#foo-left-right .tf-module.span12:last-child {
margin-bottom: 0 !important;
}
}
/* CS-PATCH v13 mobile-strip-even-spacing (2026-07-08):
* Unwrap #tpr-nav so ACCOUNT + REGISTER are individual flex siblings
* equal in spacing to SHOP MENU / SEARCH / CART. */
@media (max-width: 767px) {
#top #st-navigation #cl-handler #tpr-nav {
display: contents !important;
}
#top #st-navigation #cl-handler #tpr-nav ul.log-panel {
display: contents !important;
}
#top #st-navigation #cl-handler #tpr-nav ul.log-panel li {
display: flex !important;
flex: 0 0 auto !important;
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
#top #st-navigation #cl-handler #tpr-nav ul.log-panel li a {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 3px !important;
text-decoration: none !important;
}
#top #st-navigation #cl-handler #tpr-nav ul.log-panel li:nth-child(1) { order: 2 !important; }
#top #st-navigation #cl-handler #tpr-nav ul.log-panel li:nth-child(2) { order: 3 !important; }
#top #st-navigation #cl-handler #search-position-handler { order: 4 !important; }
#top #st-navigation #cl-handler .cl-handler { order: 5 !important; }
}
/* CS-PATCH v13 slideshow-arrow-hide-mobile (2026-07-08):
* Swiper navigation arrows render < and > characters that leak at edges
* on narrow mobile viewports. Hide on mobile only. */
@media (max-width: 767px) {
.ph-swiper-slideshow .swiper-button-prev,
.ph-swiper-slideshow .swiper-button-next {
display: none !important;
}
}
/* CS-PATCH v13.1 mobile-strip-padding (2026-07-08):
* #cl-handler extends slightly past viewport left edge which clips
* the SHOP MENU label first letter. Add horizontal padding. */
@media (max-width: 767px) {
#top #st-navigation #cl-handler {
padding: 8px 15px !important;
}
}
/* CS-PATCH v13.2 mobile-strip-no-flex-grow (2026-07-08):
* Earlier v11 rule set flex:1 1 auto on the direct #cl-handler children
* (.cl-handler, #search-position-handler, #tpr-nav) — they grow to eat
* remaining space, making gaps uneven vs the non-growing LI items.
* Remove the grow so all 5 flex items sit at content width and the
* outer justify-content:center + gap:22px distributes them evenly. */
@media (max-width: 767px) {
#top #st-navigation #cl-handler > .cl-handler,
#top #st-navigation #cl-handler > #search-position-handler,
#top #st-navigation #cl-handler > #tpr-nav,
#top #st-navigation #cl-handler > #shop-menu-btn,
#top #st-navigation #cl-handler > *,
#top #st-navigation #cl-handler #tpr-nav ul.log-panel > li {
flex: 0 0 auto !important;
min-width: 0 !important;
}
}
/* CS-PATCH v13.3 mobile-strip-vertical-align (2026-07-08):
* Cart icon renders 6px above other icons. Force uniform height +
* center vertical alignment on all strip items and their inner icons. */
@media (max-width: 767px) {
#top #st-navigation #cl-handler > * {
align-self: center !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 3px !important;
min-height: 50px !important;
}
#top #st-navigation #cl-handler > * > a,
#top #st-navigation #cl-handler > * a {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 3px !important;
line-height: 1 !important;
margin: 0 !important;
padding: 0 !important;
text-decoration: none !important;
}
#top #st-navigation #cl-handler i,
#top #st-navigation #cl-handler .fa,
#top #st-navigation #cl-handler svg {
font-size: 20px !important;
line-height: 1 !important;
margin: 0 !important;
}
}
/* CS-PATCH v13.4 shop-menu-btn-clickable (2026-07-08):
* Playwright reported #cl-handler intercepts pointer events at shop-menu-btn
* center coordinate — parent stacking context covers the child .
* Force shop-menu-btn onto its own stacking layer above the parent so
* elementFromPoint returns shop-menu-btn (not cl-handler) at click coords. */
@media (max-width: 767px) {
#top #st-navigation #cl-handler #shop-menu-btn {
position: relative !important;
z-index: 10 !important;
pointer-events: auto !important;
cursor: pointer !important;
}
#top #st-navigation #cl-handler #shop-menu-btn * {
pointer-events: none !important; /* clicks pass through inner spans to the */
}
}
/* CS-PATCH v14 slideshow-owl-arrows-mobile-visibility (2026-07-09):
* Bring nav arrows onto the mobile viewport with visible contrast.
* - Swiper hero slideshow: unhide (was hidden in v13 to suppress stray
* character; now positioned + styled so no leak).
* - Owl product carousel: pull off-screen arrows into the viewport,
* full opacity, add a subtle dark bg for contrast against product images. */
@media (max-width: 767px) {
/* Un-hide Swiper hero arrows + position within viewport */
.ph-swiper-slideshow .swiper-button-prev,
.ph-swiper-slideshow .swiper-button-next {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 40px !important;
height: 40px !important;
border-radius: 50% !important;
background: rgba(0, 0, 0, 0.45) !important;
color: #fff !important;
opacity: 1 !important;
top: 50% !important;
transform: translateY(-50%) !important;
z-index: 10 !important;
}
.ph-swiper-slideshow .swiper-button-prev {
left: 8px !important;
right: auto !important;
}
.ph-swiper-slideshow .swiper-button-next {
right: 8px !important;
left: auto !important;
}
.ph-swiper-slideshow .swiper-button-prev::after,
.ph-swiper-slideshow .swiper-button-next::after {
font-size: 18px !important;
color: #fff !important;
}
/* Owl product carousel arrows — pull off-screen prev/next into viewport,
* full opacity, dark chip so they read against product photography. */
.owl-buttons .owl-prev,
.owl-buttons .owl-next,
.owl-prev,
.owl-next {
position: absolute !important;
top: 50% !important;
transform: translateY(-50%) !important;
opacity: 1 !important;
width: 40px !important;
height: 40px !important;
border-radius: 50% !important;
background: rgba(0, 0, 0, 0.55) !important;
color: #fff !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
z-index: 10 !important;
text-indent: -9999px !important;
overflow: hidden !important;
}
.owl-prev { left: 6px !important; right: auto !important; }
.owl-next { right: 6px !important; left: auto !important; }
/* Arrow glyphs via ::after so we do not depend on textContent */
.owl-prev::after {
content: 27E8 !important;
position: absolute; left: 0; right: 0; top: 50%;
transform: translateY(-50%); text-indent: 0 !important;
text-align: center; color: #fff; font-size: 20px; line-height: 1;
}
.owl-next::after {
content: 27E9 !important;
position: absolute; left: 0; right: 0; top: 50%;
transform: translateY(-50%); text-indent: 0 !important;
text-align: center; color: #fff; font-size: 20px; line-height: 1;
}
/* Ensure carousel container clips overflow so pulled-in arrows sit inside */
.owl-carousel { position: relative !important; }
.owl-theme .owl-controls { position: static !important; }
}
/* CS-PATCH v14.1 arrow-glyphs-fa6 (2026-07-09):
* Unicode angle brackets (U+27E8/U+27E9) rendered as empty/thin shapes
* because the fallback font does not carry those glyphs. Replace with
* Font Awesome 6 chevron icons — FA6 is already loaded on the template. */
@media (max-width: 767px) {
.ph-swiper-slideshow .swiper-button-prev::after,
.ph-swiper-slideshow .swiper-button-next::after,
.owl-prev::after,
.owl-next::after {
font-family: Font Awesome 6 Free, FontAwesome !important;
font-weight: 900 !important;
font-size: 16px !important;
color: #fff !important;
text-indent: 0 !important;
line-height: 1 !important;
}
.ph-swiper-slideshow .swiper-button-prev::after,
.owl-prev::after {
content: f053 !important; /* fa-chevron-left */
}
.ph-swiper-slideshop .swiper-button-next::after,
.owl-next::after {
content: f054 !important; /* fa-chevron-right */
}
.ph-swiper-slideshow .swiper-button-next::after {
content: f054 !important;
}
}
/* CS-PATCH v14.2 arrow-glyphs-css-border-chevron (2026-07-09):
* FA6 font not rendering chevrons reliably. Draw chevrons with CSS
* border trick — pure geometry, no font dependency. */
@media (max-width: 767px) {
.ph-swiper-slideshow .swiper-button-prev::after,
.ph-swiper-slideshow .swiper-button-next::after,
.owl-prev::after,
.owl-next::after {
content: !important;
display: block !important;
width: 10px !important;
height: 10px !important;
border-top: 2.5px solid #fff !important;
border-right: 2.5px solid #fff !important;
border-left: 0 !important;
border-bottom: 0 !important;
border-radius: 0 !important;
position: absolute !important;
top: 50% !important;
text-indent: 0 !important;
background: none !important;
font-size: 0 !important;
}
.ph-swiper-slideshow .swiper-button-prev::after,
.owl-prev::after {
left: 55% !important;
right: auto !important;
transform: translate(-50%, -50%) rotate(-135deg) !important;
}
.ph-swiper-slideshow .swiper-button-next::after,
.owl-next::after {
left: 45% !important;
right: auto !important;
transform: translate(-50%, -50%) rotate(45deg) !important;
}
}
/* CS-PATCH v14.3 arrow-glyphs-fix (2026-07-09):
* v14.1 + v14.2 both broken by bash heredoc eating CSS escape chars.
* This clean version has no bash-escapable content. */
@media (max-width: 767px) {
.ph-swiper-slideshow .swiper-button-prev::after,
.ph-swiper-slideshow .swiper-button-next::after,
.owl-prev::after,
.owl-next::after {
content: "" !important;
display: block !important;
width: 10px !important;
height: 10px !important;
border-top: 3px solid #ffffff !important;
border-right: 3px solid #ffffff !important;
border-left: 0 !important;
border-bottom: 0 !important;
border-radius: 0 !important;
position: absolute !important;
top: 50% !important;
text-indent: 0 !important;
background: transparent !important;
font-size: 0 !important;
box-sizing: border-box !important;
}
.ph-swiper-slideshow .swiper-button-prev::after,
.owl-prev::after {
left: 55% !important;
right: auto !important;
transform: translate(-50%, -50%) rotate(-135deg) !important;
}
.ph-swiper-slideshow .swiper-button-next::after,
.owl-next::after {
left: 45% !important;
right: auto !important;
transform: translate(-50%, -50%) rotate(45deg) !important;
}
/* Remove overflow:hidden from owl arrows so rotated chevron isn't clipped */
.owl-prev,
.owl-next {
overflow: visible !important;
}
/* Hide Owl's default "prev"/"next" text via font-size + color trick */
.owl-prev,
.owl-next {
font-size: 0 !important;
color: transparent !important;
line-height: 0 !important;
}
}
/* CS-PATCH v14.4 owl-arrows-overflow-visible (2026-07-09):
* Match specificity of earlier .owl-buttons .owl-prev rule so
* overflow:visible wins the cascade. */
@media (max-width: 767px) {
.owl-buttons .owl-prev,
.owl-buttons .owl-next,
.owl-carousel .owl-buttons .owl-prev,
.owl-carousel .owl-buttons .owl-next {
overflow: visible !important;
}
}
/* CS-PATCH v14.5 owl-arrow-glyphs-guillemet (2026-07-09):
* Border-chevron approach was inconsistent between prev/next. Switch to
* Unicode guillemet characters — those render in any font, no dependency
* on Font Awesome. */
@media (max-width: 767px) {
.ph-swiper-slideshow .swiper-button-prev::after,
.ph-swiper-slideshow .swiper-button-next::after,
.owl-prev::after,
.owl-next::after {
display: block !important;
width: auto !important;
height: auto !important;
border: 0 !important;
border-radius: 0 !important;
position: absolute !important;
top: 50% !important;
left: 50% !important;
right: auto !important;
transform: translate(-50%, -50%) !important;
text-indent: 0 !important;
background: transparent !important;
font-size: 22px !important;
line-height: 1 !important;
color: #ffffff !important;
font-family: Arial, Helvetica, sans-serif !important;
font-weight: bold !important;
}
.ph-swiper-slideshow .swiper-button-prev::after,
.owl-prev::after {
content: "\2039" !important;
}
.ph-swiper-slideshow .swiper-button-next::after,
.owl-next::after {
content: "\203A" !important;
}
}
/* CS-PATCH v14.6 arrow-glyphs-heavier (2026-07-09):
* Guillemet chars (‹ ›) render too thin. Switch to U+276E and U+276F
* (HEAVY LEFT/RIGHT-POINTING ANGLE QUOTATION MARK ORNAMENT) — thicker
* chevron shape by design. */
@media (max-width: 767px) {
.ph-swiper-slideshow .swiper-button-prev::after,
.owl-prev::after {
content: "\276E" !important;
}
.ph-swiper-slideshow .swiper-button-next::after,
.owl-next::after {
content: "\276F" !important;
}
.ph-swiper-slideshow .swiper-button-prev::after,
.ph-swiper-slideshow .swiper-button-next::after,
.owl-prev::after,
.owl-next::after {
font-size: 20px !important;
font-weight: normal !important;
}
}
/* CS-PATCH v14.7 owl-before-hide-mobile (2026-07-09):
* .owl-prev/.owl-next have a ::before pseudo-element from template.css
* that draws the desktop-only sprite/border arrow art (30px wide block).
* On mobile it leaks through as a diagonal white line over my chip.
* Nuke ::before on mobile. */
@media (max-width: 767px) {
.ph-swiper-slideshow .swiper-button-prev::before,
.ph-swiper-slideshow .swiper-button-next::before,
.owl-prev::before,
.owl-next::before,
.owl-theme .owl-controls .owl-buttons .owl-prev::before,
.owl-theme .owl-controls .owl-buttons .owl-next::before {
content: none !important;
display: none !important;
background: none !important;
border: 0 !important;
width: 0 !important;
height: 0 !important;
}
}
/* =================================================================
* CS-PATCH v15 — David's site adjustments (2026-07-09)
* Handles custom images + non-demo module positions for
* les-harmos-de-david.
* ================================================================= */
/* -----------------------------------------------------------------
* CS-PATCH v15.1: mobile-hero-image-contain
*
* David's slideshow uses one custom image (slide-2024.jpg) that is
* wider than tall. `background-size: cover` crops the sides on mobile.
* Switch to `contain` on mobile so the full image is visible.
* Add a dark bg behind so the letterboxing doesn't look empty.
* ----------------------------------------------------------------- */
@media (max-width: 767px) {
.ph-swiper-slideshow .swiper-slide {
background-size: contain !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-color: #1a1a1a !important;
}
.ph-swiper-slideshow,
.ph-swiper-slideshow .swiper-wrapper,
.ph-swiper-slideshow .swiper-slide {
min-height: 260px !important;
}
}
/* -----------------------------------------------------------------
* CS-PATCH v15.2: footer-columns-flex-distribute
*
* David uses different module positions than the demo (span2 + span2 +
* a big custom module with no spanN class). The demo's fixed
* .span2 = 170px + .span4 = 370px pinning leaves his layout unbalanced.
* Switch the row to flex with justify-content: space-around so
* whatever columns exist distribute evenly.
* ----------------------------------------------------------------- */
#bottom-bg .tf-module.span12 > .row,
#bottom-bg .tf-module.span12 > .row-fluid,
#bottom-bg .tf-module > .row,
#bottom-bg .tf-module > .row-fluid {
display: flex !important;
flex-wrap: wrap !important;
justify-content: space-around !important;
align-items: flex-start !important;
gap: 20px !important;
}
#bottom-bg .moduletable {
flex: 0 1 auto !important;
max-width: 100% !important;
}
/* Preserve demo widths where they fit (170 span2, 370 span4)
* but let the flex row distribute them across the container. */
@media (max-width: 767px) {
/* On mobile, one column per row */
#bottom-bg .tf-module.span12 > .row,
#bottom-bg .tf-module.span12 > .row-fluid,
#bottom-bg .tf-module > .row,
#bottom-bg .tf-module > .row-fluid {
display: block !important;
}
}
/* -----------------------------------------------------------------
* CS-PATCH v15.3: footer-social-icons-tighten
*
* David has a custom social icons row (Facebook/Instagram/subscribe)
* that sits above #bottom-bg and leaves a big black gap before the
* column content starts. Reduce top padding on mobile #bottom-bg
* further, and center any social icons module by default.
* ----------------------------------------------------------------- */
@media (max-width: 767px) {
#bottom-bg {
padding-top: 8px !important;
}
#bottom-bg .inner-sep {
padding-top: 0 !important;
}
#bottom-bg .moduletable:first-child {
margin-top: 0 !important;
}
}
/* Center any social-links / share / social modules wherever they land */
.moduletable_social,
.moduletable[class*="social"],
.social-icons,
#social-links {
text-align: center !important;
}
/* CS-PATCH v16.1 mobile-hero-below-header (2026-07-09):
* #top-handler is position:absolute z:1010 with white bg + 130px tall.
* It sits on top of the slideshow's y=0..130 zone, covering the head/text
* portion of David's hero image. Push the slideshow down so the visible
* area starts BELOW the header. */
@media (max-width: 767px) {
#slideshow-handler,
#ph-camera-slideshow-handler {
margin-top: 130px !important;
}
/* Make the slideshow itself taller so the image renders bigger */
.ph-swiper-slideshow,
.ph-swiper-slideshow .swiper-wrapper,
.ph-swiper-slideshow .swiper-slide {
min-height: 320px !important;
aspect-ratio: auto !important;
}
}
/* CS-PATCH v16.2 david-social-icons-dark-band (2026-07-09):
* David's custom social icons module sits in #bottom-long (light bg)
* immediately above #socialModal (dark bg). Tim wants the icons visually
* inside the dark area. Give #bottom-long the same dark bg + white text
* so the icons appear on dark instead of light. Center the icons row. */
#bottom-long {
background-color: #1a1a1a !important;
color: #ffffff !important;
padding: 20px 0 !important;
}
#bottom-long a,
#bottom-long p,
#bottom-long .custom {
color: #ffffff !important;
text-align: center !important;
}
#bottom-long .tf-module,
#bottom-long .moduletable,
#bottom-long .module-content-handler,
#bottom-long .module-content,
#bottom-long .custom {
background: transparent !important;
text-align: center !important;
}
#bottom-long .custom p {
text-align: center !important;
margin: 0 auto !important;
}
/* On mobile the icons should stack or wrap centered */
@media (max-width: 767px) {
#bottom-long .custom p {
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
align-items: center !important;
gap: 12px !important;
}
#bottom-long .custom img {
max-width: 30% !important;
height: auto !important;
}
}
/* =================================================================
* CS-PATCH v17 — David's site refinements (2026-07-09)
* ================================================================= */
/* CS-PATCH v17.1 hero-margin-top-65 (2026-07-09):
* Tim's precise fix — 130px pushed the hero too low on mobile.
* 65px places the image just below the header row without dead space. */
@media (max-width: 767px) {
#slideshow-handler,
#ph-camera-slideshow-handler {
margin-top: 65px !important;
}
}
/* CS-PATCH v17.2 social-icons-clear-float-and-normalize (2026-07-09):
* YouTube JE M'ABONNE button has an inline float:left on the ![]()
that
* yanks it to the far-left of the container. Clear all floats inside
* #bottom-long and normalize icon heights so all three sit centered
* side-by-side. */
#bottom-long img,
#bottom-long a img,
#bottom-long .custom img {
float: none !important;
display: inline-block !important;
vertical-align: middle !important;
height: 60px !important;
width: auto !important;
max-width: none !important;
margin: 0 !important;
}
#bottom-long .custom p,
#bottom-long .custom {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
justify-content: center !important;
align-items: center !important;
gap: 16px !important;
text-align: center !important;
padding: 0 !important;
margin: 0 !important;
}
#bottom-long .custom a {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex: 0 0 auto !important;
margin: 0 !important;
padding: 0 !important;
float: none !important;
}
@media (max-width: 767px) {
#bottom-long .custom p {
gap: 12px !important;
}
#bottom-long img,
#bottom-long a img,
#bottom-long .custom img {
height: 48px !important;
}
}
/* CS-PATCH v17.3 footer-columns-broader-flex (2026-07-09):
* Earlier v15 targeted #bottom-bg .tf-module.span12 > .row, but David's
* DOM has .tf-module.span6 as direct children of #bottom-bg .row —
* no .span12 wrapper. Broaden the selector so any row inside #bottom-bg
* gets justify-content: space-around. */
#bottom-bg > .container > .row,
#bottom-bg > .container-fluid > .row,
#bottom-bg .container > .row,
#bottom-bg .container > .row-fluid,
#bottom-bg .inner-sep > .row,
#bottom-bg .inner-sep > .row-fluid,
#bottom-bg > .row,
#bottom-bg > .row-fluid {
display: flex !important;
flex-wrap: wrap !important;
justify-content: space-around !important;
align-items: flex-start !important;
gap: 20px !important;
}
/* CS-PATCH v17.4 footer-span6-flex-fit (2026-07-09):
* .tf-module.span6 pinned at 585px hardcoded. Two span6 + 20px gap = 1190
* which overflows the 1170 container, causing them to wrap to separate
* rows. Force flex sizing so they share the row cleanly. */
#bottom-bg .row > .tf-module.span6,
#bottom-bg .row-fluid > .tf-module.span6,
#bottom-bg > .container > .row > .tf-module.span6,
#bottom-bg .inner-sep > .row > .tf-module.span6 {
flex: 1 1 0 !important;
width: auto !important;
min-width: 0 !important;
max-width: 100% !important;
}
/* Same treatment for other spanN widths if they exist */
#bottom-bg .row > .tf-module.span4,
#bottom-bg .row > .tf-module.span3,
#bottom-bg .row > .tf-module.span2 {
flex: 1 1 auto !important;
width: auto !important;
min-width: 200px !important;
max-width: 100% !important;
}
@media (max-width: 767px) {
#bottom-bg .row > .tf-module.span6,
#bottom-bg .row > .tf-module.span4,
#bottom-bg .row > .tf-module.span3,
#bottom-bg .row > .tf-module.span2 {
flex: 0 0 100% !important;
width: 100% !important;
max-width: 100% !important;
}
}
/* CS-PATCH v17.5 footer-mobile-stack-specificity (2026-07-09):
* v17.4 desktop selector #bottom-bg > .container > .row > .tf-module.span6
* has higher specificity than the mobile rule. Bump mobile spec to match. */
@media (max-width: 767px) {
#bottom-bg > .container > .row > .tf-module.span6,
#bottom-bg > .container > .row > .tf-module.span4,
#bottom-bg > .container > .row > .tf-module.span3,
#bottom-bg > .container > .row > .tf-module.span2,
#bottom-bg .inner-sep > .row > .tf-module.span6,
#bottom-bg .inner-sep > .row > .tf-module.span4,
#bottom-bg .row > .tf-module.span6,
#bottom-bg .row > .tf-module.span4,
#bottom-bg .row > .tf-module.span3,
#bottom-bg .row > .tf-module.span2 {
flex: 0 0 100% !important;
width: 100% !important;
max-width: 100% !important;
}
}