/* FINAL PURE BLACK HARD FIX — loaded LAST */
html,body{background:#000!important;color-scheme:dark!important}
body,main,#site-chrome,#site-footer,#ui-layer{background:#000!important}
main>section,main>div,
section,.section,.section.soft,.ab-section,.ab-white,.ab-black,.ab-video,
.page-hero,.story-hero,.custom-hero,.collection-titlebar,.utility-page,.product-page,
.collection-shell,.checkout-layout,.faq-shell,.story-block,.custom-panel,
.ab-hero,.ab-hero-media,.ab-hero-copy,.ab-editorial,.ab-editorial-copy,.ab-story,.ab-community,
.product-long,.detail-band,.brand-mini,.community,.product-community,
.story-stack,.story-row,.all-collections-grid,.collection-layout,
.cart-page,.checkout-page,.account-page,.wishlist-page,.search-page{
background:#000!important;
background-color:#000!important;
background-image:none!important;
}
/* dark surfaces only — never white page panels */
.site-header,.mega,.mega .feature,.product-card,.product-image,.gallery-main,.thumb,
.all-collection,.all-collection .media,.editorial-category,.similar-style,.cart-item,.mini-cart-item,
.summary-card,.checkout-card,.account-panel,.utility-card,.faq-item,.acc,.notice,.modal,.drawer,
.search-drawer,.cart-drawer,.country-drawer,.facet-panel,.select,.input,input,textarea,select,
.ab-products,.ab-products .product-card,.ab-products .product-image,.ab-stone-row,.ab-stone-row a,
.ab-video-grid,.ab-video-grid a,.ab-story-image,.ab-community-grid,.footer,.country-btn{
background-color:#050505!important;
color:#e8e8e8!important;
border-color:#1b1b1b!important;
}
/* product/media areas remain black behind images */
.product-image img,.gallery-main img,.ab-products .product-image img,.ab-collection-row img,
.ab-editorial-photo,.ab-story-image{background-color:#000!important}
/* remove original light/cream gradients */
.hero,.latest-card .editorial-mark,.editorial-category img{background:#000!important;background-image:none!important}
/* small intentional light controls only */
.btn.primary,.ab-hero .btn.primary{background:#050505!important;color:#B89552!important;border:1px solid #B89552!important}
/* prevent white browser canvas at bottom/overscroll */
html{min-height:100%;background:#000!important}
body{min-height:100vh;background:#000!important}
/* MOGO-GLOBAL-HEADER-LOCK-V1-START */
/*
GLOBAL HEADER MASTER
Applies to every page.
No DOM / HTML structure changes.
*/
/* ==========================================================
HEADER FRAME
========================================================== */
.site-header{
height:68px!important;
min-height:68px!important;
margin:0!important;
padding:0!important;
}
/*
Full-width Header only.
Page content containers remain untouched.
*/
.site-header .container.header-row{
width:100%!important;
max-width:none!important;
height:68px!important;
min-height:68px!important;
margin:0!important;
padding-left:44px!important;
padding-right:38px!important;
box-sizing:border-box!important;
display:grid!important;
grid-template-columns:
minmax(280px,1fr)
auto
minmax(280px,1fr)!important;
align-items:center!important;
gap:0!important;
}
/* ==========================================================
BRAND
========================================================== */
.site-header .brand{
justify-self:start!important;
width:max-content!important;
min-width:0!important;
display:inline-flex!important;
align-items:center!important;
margin:0!important;
/* Existing real red seal */
background-size:22px 22px!important;
background-position:left center!important;
background-repeat:no-repeat!important;
padding-left:31px!important;
gap:9px!important;
}
/* MOGO */
.site-header .brand:before{
font-size:20px!important;
line-height:1!important;
font-weight:600!important;
letter-spacing:.17em!important;
color:#f1f0ed!important;
}
/* EASTERN HANDWORK */
.site-header .brand:after{
font-size:7px!important;
line-height:1!important;
font-weight:500!important;
letter-spacing:.16em!important;
color:#66635f!important;
white-space:nowrap!important;
}
/* ==========================================================
CENTER NAV
Top-level only; Mega Menu text is NOT changed.
========================================================== */
.site-header .desktop-nav{
justify-self:center!important;
height:68px!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
gap:40px!important;
margin:0!important;
padding:0!important;
}
.site-header .desktop-nav > .nav-link,
.site-header .desktop-nav > .nav-item > .nav-link{
height:68px!important;
display:flex!important;
align-items:center!important;
margin:0!important;
padding:0!important;
color:#e7e5e1!important;
font-family:
Arial,
"Helvetica Neue",
sans-serif!important;
font-size:13px!important;
font-weight:500!important;
line-height:1!important;
letter-spacing:.11em!important;
text-transform:uppercase!important;
white-space:nowrap!important;
}
/* Mega menu follows new Header height */
.site-header .mega{
top:67px!important;
}
/* ==========================================================
RIGHT ACTIONS
========================================================== */
.site-header .header-actions{
justify-self:end!important;
height:68px!important;
display:flex!important;
align-items:center!important;
justify-content:flex-end!important;
gap:18px!important;
margin:0!important;
padding:0!important;
}
.site-header .header-actions .icon-btn{
position:relative!important;
width:20px!important;
min-width:20px!important;
height:68px!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
margin:0!important;
padding:0!important;
border:0!important;
background:transparent!important;
color:#deddd9!important;
font-size:17px!important;
line-height:1!important;
opacity:.90!important;
}
/* ==========================================================
COUNT BADGES
========================================================== */
.site-header .header-actions .count-badge{
top:10px!important;
right:-7px!important;
min-width:15px!important;
height:15px!important;
padding:0 3px!important;
border-radius:999px!important;
font-size:8px!important;
line-height:15px!important;
}
/* ==========================================================
HOVER
========================================================== */
.site-header .desktop-nav > .nav-link:hover,
.site-header .desktop-nav > .nav-item > .nav-link:hover,
.site-header .header-actions .icon-btn:hover{
color:#fff!important;
opacity:1!important;
}
/* ==========================================================
MEDIUM SCREEN
========================================================== */
@media(max-width:1200px){
.site-header .container.header-row{
padding-left:28px!important;
padding-right:26px!important;
grid-template-columns:
minmax(220px,1fr)
auto
minmax(220px,1fr)!important;
}
.site-header .desktop-nav{
gap:28px!important;
}
.site-header .desktop-nav > .nav-link,
.site-header .desktop-nav > .nav-item > .nav-link{
font-size:11px!important;
}
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:760px){
.site-header{
height:58px!important;
min-height:58px!important;
}
.site-header .container.header-row{
height:58px!important;
min-height:58px!important;
padding-left:16px!important;
padding-right:16px!important;
display:flex!important;
justify-content:space-between!important;
}
.site-header .desktop-nav{
display:none!important;
}
.site-header .brand{
background-size:19px 19px!important;
padding-left:26px!important;
gap:7px!important;
}
.site-header .brand:before{
font-size:17px!important;
}
.site-header .brand:after{
display:none!important;
}
.site-header .header-actions{
height:58px!important;
gap:13px!important;
}
.site-header .header-actions .icon-btn{
height:58px!important;
font-size:16px!important;
}
}
/* Product community: deliberate, controllable carousel. Cards remain unique. */
html body[data-page="product"] .product-community .community-viewport{
position:relative !important;
width:100% !important;
overflow:hidden !important;
}
html body[data-page="product"] .product-community .community-grid{
width:100% !important;
max-width:100% !important;
min-width:0 !important;
overflow-x:auto !important;
overscroll-behavior-x:contain !important;
scroll-snap-type:x mandatory !important;
scrollbar-width:none !important;
animation:none !important;
padding:0 7vw !important;
}
html body[data-page="product"] .product-community .community-grid::-webkit-scrollbar{display:none !important;}
html body[data-page="product"] .product-community .community-grid img{
scroll-snap-align:center !important;
}
html body[data-page="product"] .product-community .community-arrow{
position:absolute !important;
z-index:2 !important;
top:50% !important;
transform:translateY(-50%) !important;
width:48px !important;
height:48px !important;
border:1px solid rgba(244,234,216,.55) !important;
border-radius:50% !important;
background:rgba(0,0,0,.72) !important;
color:#f4ead8 !important;
font:36px/40px Georgia,serif !important;
cursor:pointer !important;
}
html body[data-page="product"] .product-community .community-arrow-prev{left:16px !important;}
html body[data-page="product"] .product-community .community-arrow-next{right:16px !important;}
@media(max-width:760px){
html body[data-page="product"] .product-community .community-grid{padding:0 12vw !important;}
html body[data-page="product"] .product-community .community-arrow{width:38px !important;height:38px !important;font-size:28px !important;line-height:31px !important;}
html body[data-page="product"] .product-community .community-arrow-prev{left:8px !important;}
html body[data-page="product"] .product-community .community-arrow-next{right:8px !important;}
}
/* MOGO-GLOBAL-HEADER-LOCK-V1-END */
/* MOGO-GLOBAL-PRO-ICONS-V3-START */
/*
GLOBAL PROFESSIONAL HEADER ICON SYSTEM
---------------------------------------------------------
Menu / Search / Account / Wishlist / Region / Shopping Bag
No HTML changes.
No JS changes.
Existing click behavior preserved.
*/
/* ==========================================================
RIGHT ACTION GROUP
========================================================== */
html body #site-chrome .site-header .header-actions{
display:flex!important;
align-items:center!important;
justify-content:flex-end!important;
height:68px!important;
gap:14px!important;
margin:0!important;
padding:0!important;
white-space:nowrap!important;
}
/* Force approved six-item desktop group */
html body #site-chrome .site-header .header-actions .mobile-toggle,
html body #site-chrome .site-header .header-actions .account-action,
html body #site-chrome .site-header .header-actions .wishlist-action,
html body #site-chrome .site-header .header-actions .country-action{
display:flex!important;
}
/* ==========================================================
UNIFORM ICON BOX
========================================================== */
html body #site-chrome .site-header .header-actions .icon-btn{
position:relative!important;
width:26px!important;
min-width:26px!important;
max-width:26px!important;
height:68px!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
flex:0 0 26px!important;
margin:0!important;
padding:0!important;
border:0!important;
outline:0!important;
background:transparent!important;
/* hide old unicode glyphs */
color:transparent!important;
font-size:0!important;
line-height:0!important;
text-decoration:none!important;
opacity:1!important;
cursor:pointer!important;
transform:none!important;
}
/* ==========================================================
COMMON PROFESSIONAL ICON
========================================================== */
html body #site-chrome .site-header .header-actions .icon-btn::before{
content:""!important;
display:block!important;
width:19px!important;
height:19px!important;
flex:0 0 19px!important;
margin:0!important;
padding:0!important;
background-repeat:no-repeat!important;
background-position:center!important;
background-size:19px 19px!important;
opacity:.92!important;
transform:none!important;
transition:
opacity .15s ease,
transform .15s ease!important;
pointer-events:none!important;
}
html body #site-chrome .site-header .header-actions .icon-btn:hover::before{
opacity:1!important;
transform:translateY(-1px)!important;
}
/* ==========================================================
1. MENU
========================================================== */
html body #site-chrome .site-header #mobile-menu::before{
width:18px!important;
height:18px!important;
background-size:18px 18px!important;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e8e7e4' stroke-width='1.75' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E")!important;
}
/* ==========================================================
2. SEARCH
========================================================== */
html body #site-chrome .site-header #search-action::before{
width:19px!important;
height:19px!important;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e8e7e4' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.3' cy='10.3' r='5.7'/%3E%3Cpath d='M14.7 14.7L20 20'/%3E%3C/svg%3E")!important;
}
/* ==========================================================
3. ACCOUNT
========================================================== */
html body #site-chrome .site-header .account-action::before{
width:19px!important;
height:19px!important;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e8e7e4' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='7.7' r='3.1'/%3E%3Cpath d='M5.6 19c.7-3.6 2.8-5.4 6.4-5.4s5.7 1.8 6.4 5.4'/%3E%3C/svg%3E")!important;
}
/* ==========================================================
4. WISHLIST
========================================================== */
html body #site-chrome .site-header .wishlist-action::before{
width:20px!important;
height:20px!important;
background-size:20px 20px!important;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e8e7e4' stroke-width='1.55' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.4 5.8a4.7 4.7 0 0 0-6.7 0L12 7.5l-1.7-1.7a4.7 4.7 0 0 0-6.7 6.7L12 21l8.4-8.5a4.7 4.7 0 0 0 0-6.7Z'/%3E%3C/svg%3E")!important;
}
/* ==========================================================
5. REGION / LANGUAGE
========================================================== */
html body #site-chrome .site-header .country-action::before{
width:19px!important;
height:19px!important;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e8e7e4' stroke-width='1.45' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.2'/%3E%3Cpath d='M3.8 12h16.4M12 3.8c2.15 2.2 3.25 4.95 3.25 8.2S14.15 18 12 20.2M12 3.8C9.85 6 8.75 8.75 8.75 12S9.85 18 12 20.2'/%3E%3C/svg%3E")!important;
}
/* ==========================================================
6. SHOPPING BAG
========================================================== */
html body #site-chrome .site-header #cart-action::before{
width:20px!important;
height:20px!important;
background-size:20px 20px!important;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e8e7e4' stroke-width='1.55' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.4 8.4h11.2l.8 11H5.6l.8-11Z'/%3E%3Cpath d='M9 8.8V6.7C9 5 10.15 4 12 4s3 1 3 2.7v2.1'/%3E%3C/svg%3E")!important;
}
/* ==========================================================
GOLD BADGES
========================================================== */
html body #site-chrome .site-header .header-actions .count-badge{
position:absolute!important;
top:9px!important;
right:-4px!important;
min-width:15px!important;
width:auto!important;
height:15px!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
padding:0 4px!important;
margin:0!important;
box-sizing:border-box!important;
border:0!important;
border-radius:999px!important;
background:#b5965c!important;
color:#0a0907!important;
font-family:
Arial,
Helvetica,
sans-serif!important;
font-size:9px!important;
font-weight:700!important;
line-height:15px!important;
z-index:8!important;
opacity:1!important;
pointer-events:none!important;
}
/* heart/bag badge micro alignment */
html body #site-chrome .site-header .wishlist-action .count-badge{
right:-5px!important;
}
html body #site-chrome .site-header #cart-action .count-badge{
right:-5px!important;
}
/* ==========================================================
MEDIUM
========================================================== */
@media(max-width:1200px){
html body #site-chrome .site-header .header-actions{
gap:11px!important;
}
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:760px){
html body #site-chrome .site-header .header-actions{
height:58px!important;
gap:10px!important;
}
html body #site-chrome .site-header .header-actions .icon-btn{
width:23px!important;
min-width:23px!important;
max-width:23px!important;
height:58px!important;
flex-basis:23px!important;
}
html body #site-chrome .site-header .header-actions .icon-btn::before{
width:17px!important;
height:17px!important;
flex-basis:17px!important;
background-size:17px 17px!important;
}
/* keep mobile usable */
html body #site-chrome .site-header .wishlist-action,
html body #site-chrome .site-header .country-action{
display:none!important;
}
html body #site-chrome .site-header .header-actions .count-badge{
top:7px!important;
right:-4px!important;
}
}
/* MOGO-GLOBAL-PRO-ICONS-V3-END */
/* MOGO-WORDMARK-REF-V1-START */
/*
Header MOGO wordmark only.
Reference: lower elegant M O G O typography.
Seal / subtitle / nav / icons are untouched.
*/
html body #site-chrome .site-header .brand:before{
font-family:
"Times New Roman",
Times,
serif!important;
font-size:22px!important;
font-style:normal!important;
font-weight:400!important;
line-height:1!important;
letter-spacing:.19em!important;
color:#f4f1eb!important;
text-rendering:optimizeLegibility!important;
-webkit-font-smoothing:antialiased!important;
transform:translateY(0px)!important;
}
/* keep subtitle relationship refined */
html body #site-chrome .site-header .brand{
gap:10px!important;
}
/* MOGO-WORDMARK-REF-V1-END */
/* MOGO-GLOBAL-TYPE-GOLD-V2-START */
/*
GLOBAL EDITORIAL TYPOGRAPHY V2
Brand colour logic:
- Cinnabar red: seal only
- Antique warm gold: editorial labels
- Off-white: titles
- Warm grey: body copy
No layout structure changes.
*/
/* ==========================================================
1. SMALL EDITORIAL LABELS — GLOBAL
========================================================== */
html body .eyebrow,
html body .subeyebrow,
html body .rating-line,
html body .ab-kicker,
html body .ab-center-kicker{
color:#9a815a!important;
font-family:
Arial,
"Helvetica Neue",
sans-serif!important;
font-size:12px!important;
font-weight:500!important;
line-height:1.35!important;
letter-spacing:.16em!important;
text-transform:uppercase!important;
}
/* ==========================================================
2. STORY MAIN TITLE
Previously too large — restrained to 44px.
========================================================== */
html body .story-hero h1{
color:#f1efeb!important;
font-family:
Georgia,
"Times New Roman",
serif!important;
font-size:44px!important;
font-weight:400!important;
line-height:1.08!important;
letter-spacing:-.015em!important;
margin-top:13px!important;
margin-bottom:18px!important;
max-width:720px!important;
}
/* ==========================================================
3. OTHER INNER PAGE MAIN TITLES
========================================================== */
html body .page-hero h1,
html body .custom-hero h1,
html body .collection-titlebar h1,
html body .utility-page h1{
color:#f1efeb!important;
font-family:
Georgia,
"Times New Roman",
serif!important;
font-size:42px!important;
font-weight:400!important;
line-height:1.10!important;
letter-spacing:-.012em!important;
}
/* ==========================================================
4. STORY SECTION TITLES
========================================================== */
html body .story-row h2,
html body .story-block h2{
color:#efede8!important;
font-family:
Georgia,
"Times New Roman",
serif!important;
font-size:30px!important;
font-weight:400!important;
line-height:1.18!important;
letter-spacing:-.01em!important;
margin-top:14px!important;
margin-bottom:18px!important;
}
/* ==========================================================
5. BODY COPY
========================================================== */
html body .story-hero p,
html body .story-row p,
html body .story-block p,
html body .page-hero p,
html body .custom-hero p,
html body .collection-titlebar p{
color:#9b9994!important;
font-family:
Arial,
"Helvetica Neue",
sans-serif!important;
font-size:14px!important;
font-weight:400!important;
line-height:1.75!important;
letter-spacing:.01em!important;
}
html body .story-hero p{
max-width:680px!important;
}
html body .story-row p{
max-width:560px!important;
}
/* ==========================================================
6. STORY RHYTHM
Existing grid is preserved.
========================================================== */
html body .story-hero{
padding-top:76px!important;
padding-bottom:70px!important;
}
html body .story-stack{
gap:84px!important;
}
html body .story-row{
gap:52px!important;
}
/* ==========================================================
7. MOBILE
========================================================== */
@media(max-width:760px){
html body .story-hero h1{
font-size:35px!important;
line-height:1.10!important;
}
html body .page-hero h1,
html body .custom-hero h1,
html body .collection-titlebar h1,
html body .utility-page h1{
font-size:34px!important;
line-height:1.12!important;
}
html body .story-row h2,
html body .story-block h2{
font-size:26px!important;
line-height:1.20!important;
}
html body .eyebrow,
html body .subeyebrow,
html body .rating-line,
html body .ab-kicker,
html body .ab-center-kicker{
font-size:11px!important;
letter-spacing:.15em!important;
}
html body .story-hero p,
html body .story-row p,
html body .story-block p,
html body .page-hero p,
html body .custom-hero p,
html body .collection-titlebar p{
font-size:13px!important;
line-height:1.72!important;
}
}
/* MOGO-GLOBAL-TYPE-GOLD-V2-END */
/* MOGO-GLOBAL-GOLD-LABEL-SIZE-UP-V1-START */
/*
全局暖金小标签统一放大：
白色大标题 → 灰色正文 → 暖金小标签
本次只把小标签从偏小调到更舒服的阅读尺寸
*/
html body .ab-kicker,
html body .section-kicker,
html body .story-kicker,
html body .story-eyebrow,
html body .eyebrow,
html body .section-label,
html body .minor-label,
html body .small-label,
html body .card-kicker,
html body .card-label,
html body .product-badge,
html body .badge,
html body .tag-badge,
html body .hero-badge,
html body .editorial-kicker,
html body .ab-center-kicker{
font-size:13px!important;
line-height:1.35!important;
font-weight:500!important;
letter-spacing:0.18em!important;
color:#9A815A!important;
text-transform:none!important;
}
/* 如果有描边小方框标签，一并微调 */
html body .product-badge,
html body .badge,
html body .tag-badge{
padding:6px 10px!important;
min-height:28px!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
border-color:#9A815A!important;
}
/* 移动端略收一点，避免挤压 */
@media(max-width:760px){
html body .ab-kicker,
html body .section-kicker,
html body .story-kicker,
html body .story-eyebrow,
html body .eyebrow,
html body .section-label,
html body .minor-label,
html body .small-label,
html body .card-kicker,
html body .card-label,
html body .product-badge,
html body .badge,
html body .tag-badge,
html body .hero-badge,
html body .editorial-kicker,
html body .ab-center-kicker{
font-size:12px!important;
letter-spacing:0.16em!important;
}
html body .product-badge,
html body .badge,
html body .tag-badge{
padding:5px 9px!important;
min-height:26px!important;
}
}
/* MOGO-GLOBAL-GOLD-LABEL-SIZE-UP-V1-END */
/* MOGO-LIMITED-PRO-CSS-V1-START */
/* ==========================================================
LIMITED COLLECTION — PROFESSIONAL MERCHANDISING LAYOUT
========================================================== */
body[data-page="limited"] .mogo-limited-shop{
width:100%;
max-width:none;
margin:0;
padding:0 28px 90px;
box-sizing:border-box;
}
/* ==========================================================
TOOLBAR
========================================================== */
body[data-page="limited"] .mogo-limited-toolbar{
min-height:58px;
display:flex;
align-items:center;
border-top:1px solid #202020;
border-bottom:1px solid #202020;
margin-bottom:30px;
}
body[data-page="limited"] .mogo-view-tools{
display:flex;
align-items:center;
height:58px;
border-right:1px solid #202020;
}
body[data-page="limited"] .mogo-view-btn{
width:42px;
height:58px;
display:grid;
place-items:center;
padding:0;
margin:0;
border:0;
border-right:1px solid #202020;
background:transparent;
color:#8d8d8d;
cursor:pointer;
}
body[data-page="limited"] .mogo-view-btn:hover,
body[data-page="limited"] .mogo-view-btn.active{
color:#f1eee8;
background:#101010;
}
body[data-page="limited"] .grid-icon{
width:15px;
height:15px;
display:grid;
gap:2px;
}
body[data-page="limited"] .grid-icon i{
display:block;
background:currentColor;
}
body[data-page="limited"] .grid-4{
grid-template-columns:repeat(4,1fr);
grid-template-rows:repeat(2,1fr);
}
body[data-page="limited"] .grid-3{
grid-template-columns:repeat(3,1fr);
grid-template-rows:repeat(2,1fr);
}
body[data-page="limited"] .grid-2{
grid-template-columns:repeat(2,1fr);
grid-template-rows:repeat(2,1fr);
}
body[data-page="limited"] .mogo-filter-toggle{
display:none;
height:40px;
padding:0 15px;
border:1px solid #343434;
background:#080808;
color:#ddd;
font-size:12px;
}
body[data-page="limited"] .mogo-limited-count{
margin-left:18px;
color:#777;
font-size:11px;
letter-spacing:.05em;
}
body[data-page="limited"] .mogo-limited-sort{
margin-left:auto;
display:flex;
align-items:center;
gap:10px;
}
body[data-page="limited"] .mogo-limited-sort label{
color:#777;
font-size:11px;
}
body[data-page="limited"] #sort-filter{
height:38px;
padding:0 32px 0 12px;
border:0;
background:#050505;
color:#cfcfcf;
font-size:11px;
outline:none;
cursor:pointer;
}
/* ==========================================================
MAIN LAYOUT
========================================================== */
body[data-page="limited"] .mogo-limited-layout{
display:grid;
grid-template-columns:
210px
minmax(0,1fr);
gap:34px;
align-items:start;
}
/* ==========================================================
FACETS
========================================================== */
body[data-page="limited"] .mogo-limited-facets{
position:sticky;
top:82px;
align-self:start;
}
body[data-page="limited"] .mogo-facet-head{
height:42px;
display:flex;
align-items:center;
justify-content:space-between;
border-bottom:1px solid #282828;
color:#c8c5bf;
font-size:12px;
letter-spacing:.08em;
}
body[data-page="limited"] #limited-facet-close{
display:none;
border:0;
background:transparent;
color:#aaa;
font-size:22px;
}
body[data-page="limited"] .mogo-limited-facets .facet{
padding:15px 0;
border-bottom:1px solid #242424;
}
body[data-page="limited"] .mogo-limited-facets .facet h4{
margin:0 0 10px;
color:#bdbab4;
font-size:12px;
font-weight:500;
}
body[data-page="limited"] .mogo-limited-facets .facet label{
display:flex;
align-items:center;
gap:8px;
padding:4px 0;
color:#858585;
font-size:11px;
}
body[data-page="limited"] .mogo-limited-facets input[type="checkbox"]{
accent-color:#9a815a;
}
body[data-page="limited"] .mogo-limited-facets .facet-price,
body[data-page="limited"] .mogo-limited-facets .price-fields{
display:grid;
grid-template-columns:1fr 1fr;
gap:7px;
}
body[data-page="limited"] .mogo-limited-facets input[type="number"]{
width:100%;
height:34px;
box-sizing:border-box;
border:1px solid #2d2d2d;
background:#070707;
color:#ddd;
padding:0 8px;
font-size:11px;
}
/* ==========================================================
PRODUCT GRID
========================================================== */
body[data-page="limited"] .mogo-limited-grid{
display:grid!important;
width:100%!important;
gap:34px 22px!important;
align-items:start!important;
}
/* Compact */
body[data-page="limited"] .mogo-limited-grid[data-view="4"]{
grid-template-columns:
repeat(4,minmax(0,1fr))!important;
}
/* Standard */
body[data-page="limited"] .mogo-limited-grid[data-view="3"]{
grid-template-columns:
repeat(3,minmax(0,1fr))!important;
}
/*
LARGE MODE
This is the missing "扩大" control.
*/
body[data-page="limited"] .mogo-limited-grid[data-view="2"]{
grid-template-columns:
repeat(2,minmax(0,1fr))!important;
gap:42px 28px!important;
}
/* Let product image fill available card width */
body[data-page="limited"] .mogo-limited-grid .product-card{
min-width:0!important;
border:0!important;
background:#050505!important;
}
body[data-page="limited"] .mogo-limited-grid .product-image{
position:relative;
overflow:hidden;
width:100%!important;
aspect-ratio:1 / 1!important;
background:#030303!important;
}
body[data-page="limited"] .mogo-limited-grid .product-image img{
width:100%!important;
height:100%!important;
object-fit:contain!important;
transform:scale(1);
transition:
transform .32s cubic-bezier(.22,.61,.36,1),
filter .25s ease;
}
@media(hover:hover) and (pointer:fine){
body[data-page="limited"] .mogo-limited-grid .product-card:hover .product-image img{
transform:scale(1.045);
filter:brightness(1.04);
}
}
body[data-page="limited"] .mogo-limited-grid .product-meta{
padding:
12px 4px 18px!important;
background:#050505!important;
}
body[data-page="limited"] .mogo-limited-grid .product-meta h3{
font-size:13px!important;
line-height:1.35!important;
}
body[data-page="limited"] .mogo-limited-grid .price,
body[data-page="limited"] .mogo-limited-grid .product-price{
font-size:12px!important;
}
/* ==========================================================
RESPONSIVE
========================================================== */
@media(max-width:1350px){
body[data-page="limited"] .mogo-limited-layout{
grid-template-columns:
190px
minmax(0,1fr);
gap:24px;
}
body[data-page="limited"] .mogo-limited-grid[data-view="4"]{
grid-template-columns:
repeat(3,minmax(0,1fr))!important;
}
}
@media(max-width:900px){
body[data-page="limited"] .mogo-limited-shop{
padding:
0 16px 70px;
}
body[data-page="limited"] .mogo-filter-toggle{
display:inline-flex;
align-items:center;
}
body[data-page="limited"] .mogo-limited-count{
display:none;
}
body[data-page="limited"] .mogo-limited-layout{
display:block;
}
body[data-page="limited"] .mogo-limited-facets{
position:fixed;
z-index:500;
top:0;
bottom:0;
left:0;
width:min(340px,88vw);
padding:20px;
box-sizing:border-box;
overflow:auto;
background:#080808;
transform:translateX(-105%);
transition:
transform .25s ease;
box-shadow:
20px 0 50px rgba(0,0,0,.55);
}
body[data-page="limited"] .mogo-limited-facets.open{
transform:translateX(0);
}
body[data-page="limited"] #limited-facet-close{
display:block;
}
body[data-page="limited"] .mogo-limited-grid[data-view="4"],
body[data-page="limited"] .mogo-limited-grid[data-view="3"]{
grid-template-columns:
repeat(2,minmax(0,1fr))!important;
}
body[data-page="limited"] .mogo-limited-grid[data-view="2"]{
grid-template-columns:
1fr!important;
}
}
@media(max-width:560px){
body[data-page="limited"] .mogo-view-tools{
display:none;
}
body[data-page="limited"] .mogo-limited-toolbar{
gap:10px;
}
body[data-page="limited"] .mogo-limited-sort label{
display:none;
}
body[data-page="limited"] #sort-filter{
max-width:150px;
}
body[data-page="limited"] .mogo-limited-grid,
body[data-page="limited"] .mogo-limited-grid[data-view="4"],
body[data-page="limited"] .mogo-limited-grid[data-view="3"],
body[data-page="limited"] .mogo-limited-grid[data-view="2"]{
grid-template-columns:
1fr!important;
}
}
/* MOGO-LIMITED-PRO-CSS-V1-END */
/* MOGO-COLLECTION-FULLBLEED-V1-START */
/*
COLLECTION FULL-BLEED RESPONSIVE SYSTEM
---------------------------------------
Only collection.html category pages.
Desktop:
full-width merchandising surface
sticky filters
responsive product wall
No HTML / JS changes.
*/
/* ==========================================================
1. FULL WIDTH COLLECTION SURFACE
========================================================== */
html body[data-page="collection"]{
overflow-x:hidden!important;
}
html body[data-page="collection"] .collection-shell{
width:100%!important;
max-width:none!important;
padding-bottom:80px!important;
background:#000!important;
}
/*
Remove the old max-width container restriction
only inside Collection.
*/
html body[data-page="collection"] .collection-shell > .container{
width:100%!important;
max-width:none!important;
margin:0!important;
padding-left:clamp(18px,1.8vw,36px)!important;
padding-right:clamp(18px,1.8vw,36px)!important;
box-sizing:border-box!important;
}
/* Title area also follows screen width cleanly */
html body[data-page="collection"] .collection-titlebar > .container{
width:100%!important;
max-width:none!important;
padding-left:clamp(24px,3vw,56px)!important;
padding-right:clamp(24px,3vw,56px)!important;
box-sizing:border-box!important;
}
/* ==========================================================
2. TOOLBAR — FULL WIDTH
========================================================== */
html body[data-page="collection"] .collection-toolbar{
position:relative!important;
width:100%!important;
max-width:none!important;
min-height:58px!important;
display:flex!important;
align-items:center!important;
gap:16px!important;
margin:0!important;
padding:0!important;
border-top:1px solid #171717!important;
border-bottom:1px solid #202020!important;
}
/* Filter stays left */
html body[data-page="collection"] .collection-toolbar .filter-toggle{
margin-right:auto!important;
color:#d3d0ca!important;
font-size:12px!important;
letter-spacing:.04em!important;
}
/* Product count visually centered */
html body[data-page="collection"] .collection-toolbar .product-count{
position:absolute!important;
left:50%!important;
top:50%!important;
transform:translate(-50%,-50%)!important;
margin:0!important;
color:#767676!important;
font-size:11px!important;
white-space:nowrap!important;
}
/* Sort on right */
html body[data-page="collection"] .collection-toolbar .select,
html body[data-page="collection"] .collection-toolbar select{
margin-left:0!important;
min-width:132px!important;
height:38px!important;
background:#070707!important;
color:#d2d2d2!important;
border:1px solid #262626!important;
font-size:11px!important;
}
/* ==========================================================
3. MAIN SHOP FLOOR
========================================================== */
html body[data-page="collection"] .collection-layout{
width:100%!important;
display:grid!important;
grid-template-columns:
clamp(205px,13.5vw,245px)
minmax(0,1fr)!important;
column-gap:clamp(14px,1.3vw,24px)!important;
align-items:start!important;
padding-top:20px!important;
background:#000!important;
}
html body[data-page="collection"] .collection-products{
min-width:0!important;
width:100%!important;
}
/* ==========================================================
4. STICKY FILTER COLUMN
========================================================== */
html body[data-page="collection"] .facet-panel{
position:sticky!important;
top:74px!important;
width:100%!important;
max-height:calc(100vh - 92px)!important;
overflow-y:auto!important;
overflow-x:hidden!important;
padding-right:18px!important;
border-right:1px solid #202020!important;
background:#000!important;
scrollbar-width:thin!important;
scrollbar-color:#323232 transparent!important;
}
html body[data-page="collection"] .facet-panel::-webkit-scrollbar{
width:4px!important;
}
html body[data-page="collection"] .facet-panel::-webkit-scrollbar-thumb{
background:#323232!important;
}
/* slightly tighter facet rhythm */
html body[data-page="collection"] .facet{
padding:14px 0!important;
border-bottom:1px solid #202020!important;
}
html body[data-page="collection"] .facet h4{
margin:0 0 9px!important;
color:#d8d6d1!important;
font-size:12px!important;
font-weight:500!important;
}
html body[data-page="collection"] .facet label{
margin:5px 0!important;
color:#828282!important;
font-size:11px!important;
}
/* ==========================================================
5. PRODUCT WALL
========================================================== */
html body[data-page="collection"] .collection-products .product-grid{
width:100%!important;
display:grid!important;
grid-template-columns:
repeat(4,minmax(0,1fr))!important;
column-gap:1px!important;
row-gap:34px!important;
margin:0!important;
padding:0!important;
align-items:start!important;
}
/*
Card takes 100% of each available column.
No fake max width.
*/
html body[data-page="collection"] .collection-products .product-card{
width:100%!important;
min-width:0!important;
max-width:none!important;
margin:0!important;
background:#000!important;
border:0!important;
overflow:visible!important;
}
/* Larger merchandising image plane */
html body[data-page="collection"] .collection-products .product-image{
width:100%!important;
aspect-ratio:1.12 / 1!important;
overflow:hidden!important;
background:#000!important;
}
html body[data-page="collection"] .collection-products .product-image img{
width:100%!important;
height:100%!important;
display:block!important;
object-fit:contain!important;
background:#000!important;
transform:scale(1)!important;
transition:
transform .32s cubic-bezier(.22,.61,.36,1),
filter .25s ease!important;
}
/* Product copy sits cleanly below each large plane */
html body[data-page="collection"] .collection-products .product-info{
min-height:54px!important;
padding:
10px 8px
14px!important;
text-align:center!important;
background:#000!important;
}
html body[data-page="collection"] .collection-products .product-title{
margin:0 0 3px!important;
color:#e4e2de!important;
font-size:clamp(12px,.72vw,14px)!important;
line-height:1.35!important;
font-weight:400!important;
}
html body[data-page="collection"] .collection-products .price{
color:#aaa39a!important;
font-size:clamp(11px,.64vw,13px)!important;
}
/* Premium subtle image movement */
@media(hover:hover) and (pointer:fine){
html body[data-page="collection"] .collection-products .product-card:hover .product-image img{
transform:scale(1.035)!important;
filter:brightness(1.04)!important;
}
}
/* ==========================================================
6. ULTRA-WIDE — 5 COLUMNS
========================================================== */
@media(min-width:2200px){
html body[data-page="collection"] .collection-products .product-grid{
grid-template-columns:
repeat(5,minmax(0,1fr))!important;
}
}
/* ==========================================================
7. STANDARD LAPTOP — 3 COLUMNS
========================================================== */
@media(max-width:1359px){
html body[data-page="collection"] .collection-layout{
grid-template-columns:
clamp(190px,15vw,220px)
minmax(0,1fr)!important;
column-gap:16px!important;
}
html body[data-page="collection"] .collection-products .product-grid{
grid-template-columns:
repeat(3,minmax(0,1fr))!important;
}
}
/* ==========================================================
8. TABLET / SMALL LAPTOP
Filters become drawer, products become 2 columns.
Existing JS filter-toggle still works.
========================================================== */
@media(max-width:980px){
html body[data-page="collection"] .collection-shell > .container{
padding-left:16px!important;
padding-right:16px!important;
}
html body[data-page="collection"] .collection-layout{
display:block!important;
padding-top:16px!important;
}
html body[data-page="collection"] .facet-panel{
display:none!important;
position:fixed!important;
z-index:300!important;
top:0!important;
bottom:0!important;
left:0!important;
width:min(350px,88vw)!important;
height:100vh!important;
max-height:none!important;
padding:22px!important;
border-right:1px solid #292929!important;
background:#050505!important;
overflow-y:auto!important;
}
html body[data-page="collection"] .facet-panel.open{
display:block!important;
}
html body[data-page="collection"] .facet-close{
display:block!important;
margin-left:auto!important;
color:#ddd!important;
font-size:26px!important;
}
html body[data-page="collection"] .collection-products .product-grid{
grid-template-columns:
repeat(2,minmax(0,1fr))!important;
column-gap:1px!important;
row-gap:26px!important;
}
}
/* ==========================================================
9. MOBILE
========================================================== */
@media(max-width:760px){
html body[data-page="collection"] .collection-titlebar > .container{
padding-left:16px!important;
padding-right:16px!important;
}
html body[data-page="collection"] .collection-toolbar{
min-height:54px!important;
}
html body[data-page="collection"] .collection-toolbar .product-count{
display:none!important;
}
html body[data-page="collection"] .collection-products .product-image{
aspect-ratio:1 / 1.08!important;
}
html body[data-page="collection"] .collection-products .product-info{
padding:
9px 5px
12px!important;
}
}
/* Very narrow phones */
@media(max-width:520px){
html body[data-page="collection"] .collection-products .product-grid{
grid-template-columns:
1fr!important;
row-gap:24px!important;
}
html body[data-page="collection"] .collection-products .product-image{
aspect-ratio:1.08 / 1!important;
}
}
/* accessibility */
@media(prefers-reduced-motion:reduce){
html body[data-page="collection"] .collection-products .product-image img{
transition:none!important;
}
}
/* MOGO-COLLECTION-FULLBLEED-V1-END */
/* MOGO-GLOBAL-CATALOG-FULLBLEED-V2-START */
/*
==============================================================
MOGO GLOBAL PRODUCT LISTING SYSTEM
==============================================================
Applies to:
- collection
- limited
- new
- search
- wishlist
- collections overview
Does NOT touch:
- homepage
- product detail
- account
- story
- custom
Wide screen:
4 products across by default
Responsive:
>=2200px : 5
1360-2199: 4
981-1359 : 3
521-980 : 2
<=520 : 1
*/
/* ==========================================================
01 — GLOBAL BLACK SHOP FLOOR
========================================================== */
html body:is(
[data-page="collection"],
[data-page="limited"],
[data-page="new"],
[data-page="search"],
[data-page="wishlist"],
[data-page="collections"]
){
overflow-x:hidden!important;
background:#000!important;
}
/* ==========================================================
02 — REMOVE NARROW MAX-WIDTH ONLY AROUND PRODUCT LISTS
========================================================== */
/* Collection */
html body[data-page="collection"]
.collection-shell > .container{
width:100%!important;
max-width:none!important;
margin:0!important;
padding-left:clamp(18px,1.8vw,36px)!important;
padding-right:clamp(18px,1.8vw,36px)!important;
box-sizing:border-box!important;
}
/* Search */
html body[data-page="search"]
main .container:has(.product-grid),
html body .search-page
.container:has(.product-grid){
width:100%!important;
max-width:none!important;
margin-left:0!important;
margin-right:0!important;
padding-left:clamp(18px,2vw,40px)!important;
padding-right:clamp(18px,2vw,40px)!important;
box-sizing:border-box!important;
}
/* Wishlist */
html body[data-page="wishlist"]
main .container:has(.product-grid),
html body .wishlist-page
.container:has(.product-grid){
width:100%!important;
max-width:none!important;
margin-left:0!important;
margin-right:0!important;
padding-left:clamp(18px,2vw,40px)!important;
padding-right:clamp(18px,2vw,40px)!important;
box-sizing:border-box!important;
}
/* Collection overview */
html body[data-page="collections"]
main .container:has(.all-collections-grid){
width:100%!important;
max-width:none!important;
padding-left:clamp(18px,2vw,40px)!important;
padding-right:clamp(18px,2vw,40px)!important;
box-sizing:border-box!important;
}
/* Limited already has its own professional wrapper */
html body[data-page="limited"]
.mogo-limited-shop{
width:100%!important;
max-width:none!important;
box-sizing:border-box!important;
}
/* ==========================================================
03 — COLLECTION FILTER + PRODUCT FLOOR
========================================================== */
html body[data-page="collection"]
.collection-layout{
width:100%!important;
grid-template-columns:
clamp(205px,13.2vw,240px)
minmax(0,1fr)!important;
column-gap:clamp(14px,1.2vw,22px)!important;
align-items:start!important;
background:#000!important;
}
html body[data-page="collection"]
.collection-products{
width:100%!important;
min-width:0!important;
}
html body[data-page="collection"]
.facet-panel{
position:sticky!important;
top:74px!important;
max-height:calc(100vh - 90px)!important;
overflow-y:auto!important;
background:#000!important;
}
/* ==========================================================
04 — COMMON PRODUCT GRID
NEW / SEARCH / WISHLIST
========================================================== */
html body[data-page="search"]
main .product-grid,
html body[data-page="wishlist"]
main .product-grid,
html body .search-page .product-grid,
html body .wishlist-page .product-grid{
display:grid!important;
width:100%!important;
grid-template-columns:
repeat(4,minmax(0,1fr))!important;
column-gap:1px!important;
row-gap:34px!important;
margin:0!important;
padding:0!important;
align-items:start!important;
}
/* ==========================================================
05 — COLLECTION DEFAULT GRID
Preserve functional 4 / 3 / 2 view controls.
========================================================== */
/* If view controls are not present */
html body[data-page="collection"]:not(:has(#mogo-view-4))
.collection-products .product-grid{
grid-template-columns:
repeat(4,minmax(0,1fr))!important;
}
/* Compact */
html body[data-page="collection"]:has(#mogo-view-4:checked)
.collection-products .product-grid{
grid-template-columns:
repeat(4,minmax(0,1fr))!important;
}
/* Standard */
html body[data-page="collection"]:has(#mogo-view-3:checked)
.collection-products .product-grid{
grid-template-columns:
repeat(3,minmax(0,1fr))!important;
}
/* Large */
html body[data-page="collection"]:has(#mogo-view-2:checked)
.collection-products .product-grid{
grid-template-columns:
repeat(2,minmax(0,1fr))!important;
row-gap:42px!important;
}
/* ==========================================================
06 — LIMITED
Keep its existing data-view switch.
Only ensure full-width floor.
========================================================== */
html body[data-page="limited"]
.mogo-limited-layout{
width:100%!important;
max-width:none!important;
}
html body[data-page="limited"]
.mogo-limited-results{
width:100%!important;
min-width:0!important;
}
html body[data-page="limited"]
.mogo-limited-grid{
width:100%!important;
max-width:none!important;
}
/* ==========================================================
07 — COLLECTIONS OVERVIEW
========================================================== */
html body[data-page="collections"]
.all-collections-grid{
width:100%!important;
grid-template-columns:
repeat(4,minmax(0,1fr))!important;
gap:18px!important;
}
/* ==========================================================
08 — COMMON PRODUCT CARDS
Only catalog/listing pages.
========================================================== */
html body:is(
[data-page="collection"],
[data-page="limited"],
[data-page="new"],
[data-page="search"],
[data-page="wishlist"]
)
.product-card{
width:100%!important;
min-width:0!important;
max-width:none!important;
margin:0!important;
background:#000!important;
border:0!important;
}
html body:is(
[data-page="collection"],
[data-page="limited"],
[data-page="new"],
[data-page="search"],
[data-page="wishlist"]
)
.product-image{
width:100%!important;
aspect-ratio:1.12 / 1!important;
overflow:hidden!important;
background:#000!important;
}
html body:is(
[data-page="collection"],
[data-page="limited"],
[data-page="new"],
[data-page="search"],
[data-page="wishlist"]
)
.product-image img{
width:100%!important;
height:100%!important;
object-fit:contain!important;
background:#000!important;
transform:scale(1)!important;
transition:
transform .32s cubic-bezier(.22,.61,.36,1),
filter .25s ease!important;
}
html body:is(
[data-page="collection"],
[data-page="limited"],
[data-page="new"],
[data-page="search"],
[data-page="wishlist"]
)
.product-info{
padding:
10px 8px
15px!important;
background:#000!important;
}
/* Premium subtle hover */
@media(hover:hover) and (pointer:fine){
html body:is(
[data-page="collection"],
[data-page="limited"],
[data-page="new"],
[data-page="search"],
[data-page="wishlist"]
)
.product-card:hover .product-image img{
transform:scale(1.035)!important;
filter:brightness(1.04)!important;
}
}
/* ==========================================================
09 — ULTRA WIDE >= 2200
========================================================== */
@media(min-width:2200px){
html body[data-page="search"] main .product-grid,
html body[data-page="wishlist"] main .product-grid,
html body .search-page .product-grid,
html body .wishlist-page .product-grid{
grid-template-columns:
repeat(5,minmax(0,1fr))!important;
}
html body[data-page="collections"]
.all-collections-grid{
grid-template-columns:
repeat(5,minmax(0,1fr))!important;
}
/* Collection compact can use 5 on very wide screen */
html body[data-page="collection"]:has(#mogo-view-4:checked)
.collection-products .product-grid,
html body[data-page="collection"]:not(:has(#mogo-view-4))
.collection-products .product-grid{
grid-template-columns:
repeat(5,minmax(0,1fr))!important;
}
}
/* ==========================================================
10 — LAPTOP 981–1359
========================================================== */
@media(max-width:1359px) and (min-width:981px){
html body[data-page="collection"]
.collection-layout{
grid-template-columns:
clamp(190px,15vw,215px)
minmax(0,1fr)!important;
column-gap:16px!important;
}
html body[data-page="search"] main .product-grid,
html body[data-page="wishlist"] main .product-grid,
html body .search-page .product-grid,
html body .wishlist-page .product-grid{
grid-template-columns:
repeat(3,minmax(0,1fr))!important;
}
html body[data-page="collections"]
.all-collections-grid{
grid-template-columns:
repeat(3,minmax(0,1fr))!important;
}
/* Compact 4 -> 3 automatically */
html body[data-page="collection"]:has(#mogo-view-4:checked)
.collection-products .product-grid,
html body[data-page="collection"]:not(:has(#mogo-view-4))
.collection-products .product-grid{
grid-template-columns:
repeat(3,minmax(0,1fr))!important;
}
}
/* ==========================================================
11 — TABLET 521–980
========================================================== */
@media(max-width:980px){
html body[data-page="collection"]
.collection-shell > .container{
padding-left:14px!important;
padding-right:14px!important;
}
html body[data-page="collection"]
.collection-layout{
display:block!important;
padding-top:16px!important;
}
html body[data-page="collection"]
.facet-panel{
display:none!important;
position:fixed!important;
z-index:300!important;
top:0!important;
bottom:0!important;
left:0!important;
width:min(350px,88vw)!important;
height:100vh!important;
max-height:none!important;
padding:22px!important;
background:#050505!important;
overflow-y:auto!important;
}
html body[data-page="collection"]
.facet-panel.open{
display:block!important;
}
html body[data-page="search"] main .product-grid,
html body[data-page="wishlist"] main .product-grid,
html body .search-page .product-grid,
html body .wishlist-page .product-grid,
html body[data-page="collection"]
.collection-products .product-grid{
grid-template-columns:
repeat(2,minmax(0,1fr))!important;
column-gap:1px!important;
row-gap:26px!important;
}
html body[data-page="collections"]
.all-collections-grid{
grid-template-columns:
repeat(2,minmax(0,1fr))!important;
}
}
/* ==========================================================
12 — PHONE <= 520
========================================================== */
@media(max-width:520px){
html body[data-page="search"] main .product-grid,
html body[data-page="wishlist"] main .product-grid,
html body .search-page .product-grid,
html body .wishlist-page .product-grid,
html body[data-page="collection"]
.collection-products .product-grid{
grid-template-columns:
1fr!important;
row-gap:24px!important;
}
html body[data-page="collections"]
.all-collections-grid{
grid-template-columns:
1fr!important;
}
html body:is(
[data-page="collection"],
[data-page="limited"],
[data-page="new"],
[data-page="search"],
[data-page="wishlist"]
)
.product-image{
aspect-ratio:1.08 / 1!important;
}
}
/* ==========================================================
13 — REDUCED MOTION
========================================================== */
@media(prefers-reduced-motion:reduce){
html body:is(
[data-page="collection"],
[data-page="limited"],
[data-page="new"],
[data-page="search"],
[data-page="wishlist"]
)
.product-image img{
transition:none!important;
}
}
/* MOGO-GLOBAL-CATALOG-FULLBLEED-V2-END */
/* MOGO-GLOBAL-CATALOG-HERO-V1-START */
/*
==============================================================
MOGO GLOBAL CATALOG PAGE HEADER
==============================================================
Unifies:
- New
- Collection
- Limited
- Search
- Wishlist
- Collections overview
Goal:
Same left edge
Same vertical rhythm
Same responsive behavior
Same typography hierarchy
*/
:root{
--mogo-catalog-edge:
clamp(24px,3vw,56px);
}
/* ==========================================================
01 — CATALOG HERO SURFACES
========================================================== */
html body:is(
[data-page="new"],
[data-page="collection"],
[data-page="limited"],
[data-page="search"],
[data-page="wishlist"],
[data-page="collections"]
)
:is(
.page-hero,
.collection-titlebar,
.collections-hero
){
width:100%!important;
max-width:none!important;
min-height:190px!important;
display:flex!important;
align-items:center!important;
padding:
44px 0
42px!important;
box-sizing:border-box!important;
background:#000!important;
border-bottom:
1px solid #202020!important;
color:#eee!important;
}
/* ==========================================================
02 — REMOVE NARROW CONTAINER INSIDE CATALOG HERO
========================================================== */
html body:is(
[data-page="new"],
[data-page="collection"],
[data-page="limited"],
[data-page="search"],
[data-page="wishlist"],
[data-page="collections"]
)
:is(
.page-hero,
.collection-titlebar,
.collections-hero
)
> .container{
width:100%!important;
max-width:none!important;
margin:0!important;
padding-left:
var(--mogo-catalog-edge)!important;
padding-right:
var(--mogo-catalog-edge)!important;
box-sizing:border-box!important;
text-align:left!important;
}
/* Some pages may nest the container one level deeper */
html body:is(
[data-page="new"],
[data-page="collection"],
[data-page="limited"],
[data-page="search"],
[data-page="wishlist"],
[data-page="collections"]
)
:is(
.page-hero,
.collection-titlebar,
.collections-hero
)
.container{
max-width:none!important;
text-align:left!important;
}
/* ==========================================================
03 — BREADCRUMBS
========================================================== */
html body:is(
[data-page="new"],
[data-page="collection"],
[data-page="limited"],
[data-page="search"],
[data-page="wishlist"],
[data-page="collections"]
)
.breadcrumbs{
margin:
0 0 15px!important;
color:#686868!important;
font-size:10px!important;
line-height:1.4!important;
}
/* ==========================================================
04 — SMALL GOLD LABEL
========================================================== */
html body:is(
[data-page="new"],
[data-page="collection"],
[data-page="limited"],
[data-page="search"],
[data-page="wishlist"],
[data-page="collections"]
)
:is(
.eyebrow,
.subeyebrow,
.ab-kicker,
.section-kicker,
.editorial-kicker
){
margin:
0 0 10px!important;
color:#9a815a!important;
font-size:12px!important;
font-weight:500!important;
line-height:1.3!important;
letter-spacing:.16em!important;
}
/* ==========================================================
05 — MAIN CATALOG TITLE
========================================================== */
html body:is(
[data-page="new"],
[data-page="collection"],
[data-page="limited"],
[data-page="search"],
[data-page="wishlist"],
[data-page="collections"]
)
:is(
.page-hero,
.collection-titlebar,
.collections-hero
)
h1{
margin:
0 0 13px!important;
max-width:none!important;
color:#f1efeb!important;
font-family:
Georgia,
"Times New Roman",
serif!important;
font-size:
clamp(34px,2.35vw,46px)!important;
font-weight:400!important;
line-height:1.08!important;
letter-spacing:-.015em!important;
}
/* ==========================================================
06 — DESCRIPTION
========================================================== */
html body:is(
[data-page="new"],
[data-page="collection"],
[data-page="limited"],
[data-page="search"],
[data-page="wishlist"],
[data-page="collections"]
)
:is(
.page-hero,
.collection-titlebar,
.collections-hero
)
p{
max-width:680px!important;
margin:0!important;
color:#888581!important;
font-size:13px!important;
line-height:1.7!important;
letter-spacing:.01em!important;
}
/* ==========================================================
07 — REMOVE OLD CENTERED COLLECTIONS HERO BEHAVIOR
========================================================== */
html body[data-page="collections"]
.collections-hero{
text-align:left!important;
}
html body[data-page="collections"]
.collections-hero *{
text-align:left!important;
}
/* ==========================================================
08 — SAME LEFT EDGE FOR CATALOG TOOLBAR BELOW HERO
========================================================== */
html body[data-page="collection"]
.collection-shell > .container,
html body[data-page="limited"]
.mogo-limited-shop{
padding-left:
var(--mogo-catalog-edge)!important;
padding-right:
var(--mogo-catalog-edge)!important;
}
/*
Search / Wishlist product areas use
the same global horizontal alignment.
*/
html body[data-page="search"]
main .container:has(.product-grid),
html body[data-page="wishlist"]
main .container:has(.product-grid){
padding-left:
var(--mogo-catalog-edge)!important;
padding-right:
var(--mogo-catalog-edge)!important;
}
/* ==========================================================
09 — TABLET
========================================================== */
@media(max-width:980px){
:root{
--mogo-catalog-edge:18px;
}
html body:is(
[data-page="new"],
[data-page="collection"],
[data-page="limited"],
[data-page="search"],
[data-page="wishlist"],
[data-page="collections"]
)
:is(
.page-hero,
.collection-titlebar,
.collections-hero
){
min-height:164px!important;
padding:
36px 0
34px!important;
}
}
/* ==========================================================
10 — MOBILE
========================================================== */
@media(max-width:620px){
:root{
--mogo-catalog-edge:16px;
}
html body:is(
[data-page="new"],
[data-page="collection"],
[data-page="limited"],
[data-page="search"],
[data-page="wishlist"],
[data-page="collections"]
)
:is(
.page-hero,
.collection-titlebar,
.collections-hero
){
min-height:148px!important;
padding:
30px 0
28px!important;
}
html body:is(
[data-page="new"],
[data-page="collection"],
[data-page="limited"],
[data-page="search"],
[data-page="wishlist"],
[data-page="collections"]
)
:is(
.page-hero,
.collection-titlebar,
.collections-hero
)
h1{
font-size:32px!important;
}
html body:is(
[data-page="new"],
[data-page="collection"],
[data-page="limited"],
[data-page="search"],
[data-page="wishlist"],
[data-page="collections"]
)
:is(
.page-hero,
.collection-titlebar,
.collections-hero
)
p{
font-size:12px!important;
line-height:1.65!important;
}
}
/* MOGO-GLOBAL-CATALOG-HERO-V1-END */
/* MOGO-GLOBAL-FOOTER-FULLBLEED-V1-START */
/*
==============================================================
MOGO GLOBAL FOOTER — FULL BLEED
==============================================================
Global on every page.
Does NOT change:
- Header
- Catalog
- Product
- Story
- Account
- HTML / JS structure
Visual:
- pure black
- full screen width
- warm gold micro accents
- no white subscribe block
*/
/* ==========================================================
01 — FOOTER SURFACE
========================================================== */
html body .footer{
width:100%!important;
max-width:none!important;
margin:0!important;
padding:
clamp(62px,5vw,96px)
0
28px!important;
box-sizing:border-box!important;
background:#020202!important;
background-image:none!important;
color:#e8e6e1!important;
border-top:1px solid #202020!important;
}
/* ==========================================================
02 — REMOVE OLD MAX-WIDTH CONTAINER
========================================================== */
html body .footer > .container,
html body .footer .container{
width:100%!important;
max-width:none!important;
margin-left:0!important;
margin-right:0!important;
padding-left:
clamp(34px,4.3vw,88px)!important;
padding-right:
clamp(34px,4.3vw,88px)!important;
box-sizing:border-box!important;
}
/* ==========================================================
03 — MAIN FOOTER GRID
========================================================== */
html body .footer-grid{
width:100%!important;
display:grid!important;
grid-template-columns:
minmax(230px,1.25fr)
minmax(120px,.72fr)
minmax(120px,.72fr)
minmax(150px,.8fr)
minmax(270px,1.3fr)!important;
column-gap:
clamp(34px,4vw,78px)!important;
row-gap:34px!important;
align-items:start!important;
}
/* ==========================================================
04 — BRAND COLUMN
========================================================== */
html body .footer-brand:before{
color:#f1eee8!important;
font-family:
Georgia,
"Times New Roman",
serif!important;
font-size:30px!important;
font-weight:400!important;
letter-spacing:.19em!important;
line-height:1!important;
margin-bottom:20px!important;
}
html body .footer-brand p{
max-width:330px!important;
color:#777571!important;
font-size:12px!important;
line-height:1.65!important;
}
/* ==========================================================
05 — COLUMN TITLES
========================================================== */
html body .footer h3,
html body .footer h4{
margin:
0 0 14px!important;
color:#eeeae4!important;
font-size:13px!important;
font-weight:500!important;
line-height:1.3!important;
}
/* ==========================================================
06 — LINKS
========================================================== */
html body .footer a{
color:#777571!important;
font-size:11px!important;
line-height:1.75!important;
text-decoration:none!important;
transition:
color .18s ease!important;
}
@media(hover:hover) and (pointer:fine){
html body .footer a:hover{
color:#b79a68!important;
}
}
/* ==========================================================
07 — NEWSLETTER COPY
========================================================== */
html body .footer .newsletter p{
margin-bottom:14px!important;
color:#777571!important;
font-size:11px!important;
line-height:1.6!important;
}
/* ==========================================================
08 — EMAIL FIELD
========================================================== */
html body .footer input,
html body .footer input[type="email"]{
width:100%!important;
height:44px!important;
margin:0!important;
padding:
0 14px!important;
box-sizing:border-box!important;
background:#070707!important;
color:#ddd9d2!important;
border:
1px solid #292929!important;
border-radius:0!important;
box-shadow:none!important;
outline:none!important;
font-size:11px!important;
}
html body .footer input::placeholder{
color:#595959!important;
}
html body .footer input:focus{
border-color:#9a815a!important;
box-shadow:
inset 0 0 0 1px
rgba(154,129,90,.28)!important;
}
/* ==========================================================
09 — SUBSCRIBE
REMOVE THE OLD WHITE BLOCK
========================================================== */
html body .footer .btn,
html body .footer .btn.primary,
html body .footer button,
html body .footer input[type="submit"]{
min-height:44px!important;
background:#080808!important;
color:#b89b68!important;
border:
1px solid #705b39!important;
border-radius:0!important;
box-shadow:none!important;
font-size:10px!important;
font-weight:500!important;
letter-spacing:.12em!important;
text-transform:uppercase!important;
transition:
background .18s ease,
color .18s ease,
border-color .18s ease!important;
}
@media(hover:hover) and (pointer:fine){
html body .footer .btn:hover,
html body .footer .btn.primary:hover,
html body .footer button:hover,
html body .footer input[type="submit"]:hover{
background:#b89b68!important;
color:#080808!important;
border-color:#b89b68!important;
}
}
/* ==========================================================
10 — COUNTRY / CURRENCY
========================================================== */
html body .footer .country-btn,
html body .footer .country-action{
background:#050505!important;
color:#aaa69f!important;
border:
1px solid #252525!important;
box-shadow:none!important;
}
/* ==========================================================
11 — FOOTER BOTTOM
========================================================== */
html body .footer-bottom{
width:100%!important;
display:flex!important;
align-items:center!important;
justify-content:space-between!important;
gap:24px!important;
margin-top:
clamp(42px,4vw,70px)!important;
padding-top:20px!important;
border-top:
1px solid #202020!important;
color:#575757!important;
font-size:10px!important;
}
/* ==========================================================
12 — LARGE DESKTOP
More breathing room but still full width.
========================================================== */
@media(min-width:1800px){
html body .footer > .container,
html body .footer .container{
padding-left:5.3vw!important;
padding-right:5.3vw!important;
}
html body .footer-grid{
column-gap:
clamp(54px,5vw,110px)!important;
}
}
/* ==========================================================
13 — LAPTOP
========================================================== */
@media(max-width:1200px){
html body .footer-grid{
grid-template-columns:
1.15fr
.8fr
.8fr
.8fr!important;
}
html body .footer .newsletter{
grid-column:
1 / -1!important;
max-width:520px!important;
}
}
/* ==========================================================
14 — TABLET
========================================================== */
@media(max-width:820px){
html body .footer > .container,
html body .footer .container{
padding-left:22px!important;
padding-right:22px!important;
}
html body .footer-grid{
grid-template-columns:
repeat(2,minmax(0,1fr))!important;
column-gap:30px!important;
row-gap:38px!important;
}
html body .footer-brand,
html body .footer .newsletter{
grid-column:
1 / -1!important;
}
html body .footer-bottom{
align-items:flex-start!important;
flex-direction:column!important;
}
}
/* ==========================================================
15 — MOBILE
========================================================== */
@media(max-width:520px){
html body .footer{
padding:
52px 0
24px!important;
}
html body .footer > .container,
html body .footer .container{
padding-left:16px!important;
padding-right:16px!important;
}
html body .footer-grid{
grid-template-columns:
1fr!important;
row-gap:32px!important;
}
html body .footer-brand,
html body .footer .newsletter{
grid-column:auto!important;
}
html body .footer .newsletter{
max-width:none!important;
}
html body .footer-bottom{
margin-top:40px!important;
}
}
/* MOGO-GLOBAL-FOOTER-FULLBLEED-V1-END */
/* MOGO-GLOBAL-WIDTH-MASTER-V1-START */
/*
==============================================================
MOGO GLOBAL WIDTH MASTER
==============================================================
Three width levels:
A — FULL BLEED
Product/catalog browsing
B — EDITORIAL / COMMERCE WIDE
Product detail / custom / cart / loyalty
C — READING WIDTH
FAQ / policies / support / checkout
Locked:
- Homepage
- Header
- Account
- Story
*/
:root{
--mogo-screen-edge:
clamp(22px,2.6vw,54px);
--mogo-wide-edge:
clamp(24px,3.2vw,68px);
--mogo-commerce-max:
1840px;
--mogo-editorial-max:
1720px;
--mogo-reading-max:
980px;
}
/* ==========================================================
A01 — FULL-BLEED CATALOG PAGES
========================================================== */
html body:is(
[data-page="collection"],
[data-page="new"],
[data-page="limited"],
[data-page="bundle"],
[data-page="collections"],
[data-page="search"],
[data-page="wishlist"]
){
width:100%!important;
max-width:none!important;
overflow-x:hidden!important;
background:#000!important;
}
/* ==========================================================
A02 — CATALOG HERO CONTAINERS
========================================================== */
html body:is(
[data-page="collection"],
[data-page="new"],
[data-page="limited"],
[data-page="bundle"],
[data-page="collections"]
)
:is(
.page-hero,
.collection-titlebar,
.collections-hero
)
.container{
width:100%!important;
max-width:none!important;
margin-left:0!important;
margin-right:0!important;
padding-left:
var(--mogo-screen-edge)!important;
padding-right:
var(--mogo-screen-edge)!important;
box-sizing:border-box!important;
}
/* ==========================================================
A03 — NEW / BUNDLE PRODUCT FLOOR
========================================================== */
html body:is(
[data-page="new"],
[data-page="bundle"]
)
.section > .container{
width:100%!important;
max-width:none!important;
margin-left:0!important;
margin-right:0!important;
padding-left:
var(--mogo-screen-edge)!important;
padding-right:
var(--mogo-screen-edge)!important;
box-sizing:border-box!important;
}
/* ==========================================================
A04 — COLLECTION
========================================================== */
html body[data-page="collection"]
.collection-shell > .container{
width:100%!important;
max-width:none!important;
margin:0!important;
padding-left:
var(--mogo-screen-edge)!important;
padding-right:
var(--mogo-screen-edge)!important;
box-sizing:border-box!important;
}
/* ==========================================================
A05 — LIMITED
Critical:
original outer .section > .container was still width-limited.
========================================================== */
html body[data-page="limited"]
.section > .container{
width:100%!important;
max-width:none!important;
margin-left:0!important;
margin-right:0!important;
padding-left:
var(--mogo-screen-edge)!important;
padding-right:
var(--mogo-screen-edge)!important;
box-sizing:border-box!important;
}
html body[data-page="limited"]
.mogo-limited-shop{
width:100%!important;
max-width:none!important;
margin:0!important;
box-sizing:border-box!important;
}
/* ==========================================================
A06 — COLLECTIONS OVERVIEW
========================================================== */
html body[data-page="collections"]
.section > .container{
width:100%!important;
max-width:none!important;
margin:0!important;
padding-left:
var(--mogo-screen-edge)!important;
padding-right:
var(--mogo-screen-edge)!important;
box-sizing:border-box!important;
}
/* ==========================================================
A07 — SEARCH
Search currently uses utility-page + container narrow.
On result pages it must become catalog-width.
========================================================== */
html body[data-page="search"]
.utility-page > .container{
width:100%!important;
max-width:none!important;
margin-left:0!important;
margin-right:0!important;
padding-left:
var(--mogo-screen-edge)!important;
padding-right:
var(--mogo-screen-edge)!important;
box-sizing:border-box!important;
}
/*
Keep actual search input readable.
Product results still use full width.
*/
html body[data-page="search"]
.search-large{
max-width:820px!important;
}
/* ==========================================================
A08 — WISHLIST
========================================================== */
html body[data-page="wishlist"]
.utility-page > .container{
width:100%!important;
max-width:none!important;
margin-left:0!important;
margin-right:0!important;
padding-left:
var(--mogo-screen-edge)!important;
padding-right:
var(--mogo-screen-edge)!important;
box-sizing:border-box!important;
}
/* ==========================================================
A09 — FULL PRODUCT WALL
========================================================== */
html body:is(
[data-page="new"],
[data-page="bundle"],
[data-page="search"],
[data-page="wishlist"]
)
.product-grid{
width:100%!important;
max-width:none!important;
grid-template-columns:
repeat(4,minmax(0,1fr))!important;
column-gap:1px!important;
row-gap:34px!important;
}
/* ==========================================================
B01 — PRODUCT DETAIL
Wider commerce layout, but NOT edge-to-edge.
========================================================== */
html body[data-page="product"]
.product-page > .container{
width:
min(
var(--mogo-commerce-max),
calc(100% - (var(--mogo-wide-edge) * 2))
)!important;
max-width:none!important;
margin-left:auto!important;
margin-right:auto!important;
}
/* ==========================================================
B02 — CUSTOM
Preserve existing design/grid.
Only normalize available width.
========================================================== */
html body[data-page="custom"]
.custom-hero .container,
html body[data-page="custom"]
.section > .container{
width:
min(
var(--mogo-editorial-max),
calc(100% - (var(--mogo-wide-edge) * 2))
)!important;
max-width:none!important;
margin-left:auto!important;
margin-right:auto!important;
}
/* ==========================================================
B03 — CART
========================================================== */
html body[data-page="cart"]
.utility-page > .container{
width:
min(
1600px,
calc(100% - (var(--mogo-wide-edge) * 2))
)!important;
max-width:none!important;
margin-left:auto!important;
margin-right:auto!important;
}
/* ==========================================================
B04 — LOYALTY
========================================================== */
html body[data-page="loyalty"]
.page-hero .container,
html body[data-page="loyalty"]
.section > .container{
width:
min(
1560px,
calc(100% - (var(--mogo-wide-edge) * 2))
)!important;
max-width:none!important;
margin-left:auto!important;
margin-right:auto!important;
}
/* ==========================================================
C01 — READING / SUPPORT PAGES
Surface remains full viewport.
Reading column stays intentionally restrained.
========================================================== */
html body:is(
[data-page="faq"],
[data-page="shipping"],
[data-page="returns"],
[data-page="repair"],
[data-page="care"],
[data-page="sizing"],
[data-page="contact"],
[data-page="terms"],
[data-page="privacy"],
[data-page="withdraw"],
[data-page="checkout"]
)
.utility-page{
width:100%!important;
max-width:none!important;
background:#000!important;
}
/*
Do NOT stretch legal/FAQ copy across a 2K monitor.
*/
html body:is(
[data-page="faq"],
[data-page="shipping"],
[data-page="returns"],
[data-page="repair"],
[data-page="care"],
[data-page="sizing"],
[data-page="contact"],
[data-page="terms"],
[data-page="privacy"],
[data-page="withdraw"]
)
.utility-page > .container.narrow{
width:
min(
var(--mogo-reading-max),
calc(100% - (var(--mogo-wide-edge) * 2))
)!important;
max-width:none!important;
margin-left:auto!important;
margin-right:auto!important;
}
/* Checkout needs more room than a legal document */
html body[data-page="checkout"]
.utility-page > .container.narrow{
width:
min(
1320px,
calc(100% - (var(--mogo-wide-edge) * 2))
)!important;
max-width:none!important;
margin-left:auto!important;
margin-right:auto!important;
}
/* ==========================================================
D01 — LOCK PREVIOUSLY APPROVED PAGES
Explicitly do NOT override their containers.
========================================================== */
/*
Homepage:
remains controlled by finetune-01.css
Story:
remains controlled by approved Story rules
Account:
remains controlled by approved MOGO auth rules
*/
/* ==========================================================
RESPONSIVE — 1360
========================================================== */
@media(max-width:1359px){
html body:is(
[data-page="new"],
[data-page="bundle"],
[data-page="search"],
[data-page="wishlist"]
)
.product-grid{
grid-template-columns:
repeat(3,minmax(0,1fr))!important;
}
}
/* ==========================================================
RESPONSIVE — TABLET
========================================================== */
@media(max-width:980px){
:root{
--mogo-screen-edge:16px;
--mogo-wide-edge:20px;
}
html body:is(
[data-page="new"],
[data-page="bundle"],
[data-page="search"],
[data-page="wishlist"]
)
.product-grid{
grid-template-columns:
repeat(2,minmax(0,1fr))!important;
row-gap:26px!important;
}
}
/* ==========================================================
RESPONSIVE — PHONE
========================================================== */
@media(max-width:520px){
:root{
--mogo-screen-edge:14px;
--mogo-wide-edge:16px;
}
html body:is(
[data-page="new"],
[data-page="bundle"],
[data-page="search"],
[data-page="wishlist"]
)
.product-grid{
grid-template-columns:
1fr!important;
row-gap:24px!important;
}
}
/* MOGO-GLOBAL-WIDTH-MASTER-V1-END */
/* MOGO-CATALOG-MASTER-V2-CSS-START */
/* =========================================================
MOGO CATALOG V2
Reference layout:
2K = 210px sidebar + 6 columns
Toolbar = true full width
========================================================= */
/* PAGE */
html body:is(
[data-page="new"],
[data-page="collection"],
[data-page="limited"]
){
background:#000!important;
color:#eee!important;
overflow-x:hidden!important;
}
/* HERO CENTER */
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"]) .collection-titlebar,
html body[data-page="limited"] .page-hero{
width:100%!important;
max-width:none!important;
min-height:170px!important;
margin:0!important;
padding:34px 24px!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
box-sizing:border-box!important;
text-align:center!important;
background:#000!important;
border-bottom:1px solid #242424!important;
}
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"]) .collection-titlebar>.container,
html body[data-page="limited"] .page-hero>.container{
width:100%!important;
max-width:none!important;
margin:0!important;
padding:0!important;
text-align:center!important;
}
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"]) .collection-titlebar h1,
html body[data-page="limited"] .page-hero h1{
margin:0 auto 14px!important;
font-size:clamp(30px,2vw,42px)!important;
line-height:1.08!important;
text-align:center!important;
}
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"]) .collection-titlebar p,
html body[data-page="limited"] .page-hero p{
width:min(720px,90vw)!important;
max-width:720px!important;
margin:0 auto!important;
color:#8e8b86!important;
text-align:center!important;
font-size:12px!important;
}
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"]) .breadcrumbs{
display:none!important;
}
/* DESTROY OUTER WIDTH LIMIT */
html body:is([data-page="collection"],[data-page="new"]) .collection-shell,
html body:is([data-page="collection"],[data-page="new"]) .collection-shell>.container,
html body[data-page="limited"] main>.section,
html body[data-page="limited"] main>.section>.container,
html body .mogo-catalog-v2-host{
width:100%!important;
max-width:none!important;
margin:0!important;
padding:0!important;
box-sizing:border-box!important;
background:#000!important;
}
/* ROOT */
html body .mogo-catalog-v2{
width:100%!important;
max-width:none!important;
margin:0!important;
background:#000!important;
}
/* TOOLBAR - EDGE TO EDGE */
html body .mogo-cat-toolbar{
width:100%!important;
max-width:none!important;
min-height:48px!important;
margin:0!important;
padding:0!important;
display:flex!important;
align-items:center!important;
box-sizing:border-box!important;
background:#000!important;
border-top:1px solid #242424!important;
border-bottom:1px solid #242424!important;
}
/* VIEW BUTTONS */
html body .mogo-cat-views{
height:48px!important;
padding:0 20px!important;
display:flex!important;
align-items:center!important;
gap:9px!important;
border-right:1px solid #242424!important;
}
html body .mogo-cat-view{
width:18px!important;
height:26px!important;
margin:0!important;
padding:0!important;
border:0!important;
background:transparent!important;
color:#5e5e5e!important;
display:grid!important;
place-items:center!important;
cursor:pointer!important;
}
html body .mogo-cat-view.active{
color:#eee!important;
}
html body .mogo-cat-icon{
width:15px!important;
height:15px!important;
display:grid!important;
gap:2px!important;
}
html body .icon-compact{
grid-template-columns:repeat(3,1fr)!important;
}
html body .icon-standard{
grid-template-columns:repeat(2,1fr)!important;
}
html body .mogo-cat-view.grid-large{
width:20px!important;
border:0!important;
outline:0!important;
box-shadow:none!important;
}
html body .mogo-cat-view.grid-large .icon-standard{
width:14px!important;
height:14px!important;
display:grid!important;
grid-template-columns:repeat(2,4px)!important;
grid-template-rows:repeat(2,4px)!important;
gap:3px!important;
place-content:center!important;
}
html body .mogo-cat-view.grid-large .icon-standard i{
width:4px!important;
height:4px!important;
min-width:4px!important;
min-height:4px!important;
border:0!important;
border-radius:0!important;
background:currentColor!important;
box-shadow:none!important;
}
html body .icon-large{
grid-template-columns:repeat(3,1fr)!important;
align-items:center!important;
}
html body .mogo-cat-icon i{
display:block!important;
min-width:2px!important;
min-height:2px!important;
background:currentColor!important;
}
/* COUNT HIDDEN LIKE REFERENCE */
html body .mogo-cat-count{
display:none!important;
}
/* SORT RIGHT */
html body .mogo-cat-sort{
height:48px!important;
margin-left:auto!important;
padding:0 17px!important;
display:flex!important;
align-items:center!important;
border-left:1px solid #242424!important;
}
html body .mogo-cat-sort label{
margin-right:7px!important;
color:#777!important;
font-size:10px!important;
}
html body .mogo-cat-sort select{
width:145px!important;
height:34px!important;
border:0!important;
outline:0!important;
background:#000!important;
color:#999!important;
font-size:10px!important;
}
/* MOBILE FILTER BUTTON */
html body .mogo-cat-filter-open{
display:none!important;
height:48px!important;
border:0!important;
background:transparent!important;
color:#ddd!important;
}
/* MAIN */
html body .mogo-cat-layout{
width:100%!important;
max-width:none!important;
margin:0!important;
display:grid!important;
grid-template-columns:210px minmax(0,1fr)!important;
gap:0!important;
background:#000!important;
}
/* SIDEBAR */
html body .mogo-cat-sidebar{
width:210px!important;
min-height:calc(100vh - 48px)!important;
padding:20px 28px 80px!important;
box-sizing:border-box!important;
border-right:1px solid #202020!important;
background:#000!important;
}
html body .mogo-cat-mobile-head{
display:none!important;
}
/* FACETS */
html body #mogo-cat-facets .facet{
width:100%!important;
margin:0!important;
padding:0!important;
border:0!important;
border-bottom:1px solid #242424!important;
background:#000!important;
}
html body #mogo-cat-facets .facet h4{
width:100%!important;
min-height:47px!important;
margin:0!important;
padding:0!important;
display:flex!important;
align-items:center!important;
justify-content:space-between!important;
font-family:Arial,Helvetica,sans-serif!important;
font-size:10px!important;
font-weight:400!important;
color:#c5c2bd!important;
cursor:pointer!important;
}
html body #mogo-cat-facets .facet h4::after{
content:"⌄"!important;
color:#777!important;
font-size:11px!important;
}
html body #mogo-cat-facets .facet:not(.open)>:not(h4){
display:none!important;
}
html body #mogo-cat-facets .facet.open{
padding-bottom:13px!important;
}
html body #mogo-cat-facets .facet.open label{
display:flex!important;
align-items:center!important;
gap:7px!important;
margin:7px 0!important;
color:#858585!important;
font-size:10px!important;
}
html body #mogo-cat-facets .facet-price{
display:grid!important;
grid-template-columns:1fr 1fr!important;
gap:6px!important;
}
html body #mogo-cat-facets .input{
width:100%!important;
min-width:0!important;
height:34px!important;
padding:5px!important;
box-sizing:border-box!important;
border:1px solid #303030!important;
background:#070707!important;
color:#ccc!important;
}
/* RESULTS */
html body .mogo-cat-results{
width:100%!important;
min-width:0!important;
margin:0!important;
padding:28px 13px 90px!important;
box-sizing:border-box!important;
background:#000!important;
}
html body .mogo-cat-grid{
width:100%!important;
max-width:none!important;
margin:0!important;
padding:0!important;
display:grid!important;
column-gap:clamp(12px,1.55vw,32px)!important;
row-gap:48px!important;
}
/* 2K */
@media(min-width:1800px){
html body .mogo-cat-grid[data-density="compact"]{
grid-template-columns:repeat(6,minmax(0,1fr))!important;
}
html body .mogo-cat-grid[data-density="standard"]{
grid-template-columns:repeat(5,minmax(0,1fr))!important;
}
html body .mogo-cat-grid[data-density="large"]{
grid-template-columns:repeat(4,minmax(0,1fr))!important;
}
}
/* 1500-1799 */
@media(min-width:1500px) and (max-width:1799px){
html body .mogo-cat-grid[data-density="compact"]{
grid-template-columns:repeat(5,minmax(0,1fr))!important;
}
html body .mogo-cat-grid[data-density="standard"]{
grid-template-columns:repeat(4,minmax(0,1fr))!important;
}
html body .mogo-cat-grid[data-density="large"]{
grid-template-columns:repeat(3,minmax(0,1fr))!important;
}
}
/* 1200-1499 */
@media(min-width:1200px) and (max-width:1499px){
html body .mogo-cat-layout{
grid-template-columns:200px minmax(0,1fr)!important;
}
html body .mogo-cat-sidebar{
width:200px!important;
}
html body .mogo-cat-grid[data-density="compact"]{
grid-template-columns:repeat(4,minmax(0,1fr))!important;
}
html body .mogo-cat-grid[data-density="standard"]{
grid-template-columns:repeat(3,minmax(0,1fr))!important;
}
html body .mogo-cat-grid[data-density="large"]{
grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
}
/* 981-1199 */
@media(min-width:981px) and (max-width:1199px){
html body .mogo-cat-layout{
grid-template-columns:190px minmax(0,1fr)!important;
}
html body .mogo-cat-sidebar{
width:190px!important;
padding-left:19px!important;
padding-right:19px!important;
}
html body .mogo-cat-grid[data-density="compact"],
html body .mogo-cat-grid[data-density="standard"]{
grid-template-columns:repeat(3,minmax(0,1fr))!important;
}
html body .mogo-cat-grid[data-density="large"]{
grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
}
/* PRODUCT CARDS */
html body .mogo-cat-grid .product-image{
width:100%!important;
aspect-ratio:1/1!important;
overflow:hidden!important;
background:#020202!important;
}
html body .mogo-cat-grid .product-image img{
width:100%!important;
height:100%!important;
display:block!important;
object-fit:contain!important;
}
html body .mogo-cat-grid .product-info{
padding:10px 3px 0!important;
text-align:center!important;
background:#000!important;
}
html body .mogo-cat-grid .product-title{
margin:0 0 3px!important;
color:#e4e0da!important;
font-size:11px!important;
}
html body .mogo-cat-grid .price{
color:#cfcbc5!important;
font-size:10px!important;
}
/* BLACK EMPTY STATE */
html body .mogo-cat-empty{
grid-column:1/-1!important;
min-height:470px!important;
display:grid!important;
place-content:center!important;
text-align:center!important;
background:#000!important;
color:#777!important;
}
html body .mogo-cat-empty h2{
color:#aaa!important;
font-size:18px!important;
}
/* MOBILE */
@media(max-width:980px){
html body .mogo-cat-layout{
grid-template-columns:1fr!important;
}
html body .mogo-cat-filter-open{
display:inline-flex!important;
align-items:center!important;
padding:0 14px!important;
}
html body .mogo-cat-sidebar{
position:fixed!important;
z-index:260!important;
left:0!important;
top:0!important;
bottom:0!important;
width:min(350px,88vw)!important;
height:100vh!important;
padding:18px 23px 60px!important;
overflow-y:auto!important;
background:#050505!important;
transform:translateX(-105%)!important;
transition:transform .2s ease!important;
}
html body .mogo-cat-sidebar.open{
transform:translateX(0)!important;
}
html body .mogo-cat-mobile-head{
min-height:48px!important;
display:flex!important;
align-items:center!important;
justify-content:space-between!important;
border-bottom:1px solid #292929!important;
}
html body #mogo-cat-filter-close{
border:0!important;
background:transparent!important;
color:#eee!important;
font-size:26px!important;
}
html body .mogo-cat-grid[data-density="compact"],
html body .mogo-cat-grid[data-density="standard"],
html body .mogo-cat-grid[data-density="large"]{
grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
}
@media(max-width:380px){
html body .mogo-cat-grid[data-density="compact"],
html body .mogo-cat-grid[data-density="standard"],
html body .mogo-cat-grid[data-density="large"]{
grid-template-columns:1fr!important;
}
}
/* MOGO-CATALOG-MASTER-V2-CSS-END */
/* MOGO-COUNTRY-ISO249-CSS-V1-START */
/* ==========================================================
CURRENT COUNTRY BUTTON
========================================================== */
html body
#footer-country.mogo-country-current{
min-height:42px!important;
display:inline-flex!important;
align-items:center!important;
gap:9px!important;
margin-top:12px!important;
padding:
8px 12px!important;
border:
1px solid #332b1f!important;
background:#050505!important;
color:#c8aa72!important;
cursor:pointer!important;
}
html body
.mogo-current-country-flag{
width:22px!important;
height:16px!important;
display:block!important;
flex:0 0 auto!important;
object-fit:cover!important;
border:
1px solid rgba(255,255,255,.12)!important;
}
html body
.mogo-current-country-label{
display:block!important;
color:#c8aa72!important;
font-size:11px!important;
line-height:1!important;
white-space:nowrap!important;
}
/* ==========================================================
COUNTRY DRAWER
========================================================== */
html body
.country-drawer.mogo-country-drawer{
position:fixed!important;
z-index:120!important;
top:0!important;
right:0!important;
bottom:0!important;
width:min(540px,94vw)!important;
height:100vh!important;
padding:
24px 24px 30px!important;
box-sizing:border-box!important;
overflow-y:auto!important;
background:#050505!important;
color:#e9e6e0!important;
border-left:
1px solid #242424!important;
}
html body
.mogo-country-head{
position:sticky!important;
top:-24px!important;
z-index:5!important;
min-height:82px!important;
margin:
-24px -24px 0!important;
padding:
24px 24px 16px!important;
background:#050505!important;
border-bottom:
1px solid #1e1e1e!important;
}
html body
.mogo-country-head h2{
margin:
3px 0 0!important;
color:#f0ede8!important;
font-size:25px!important;
line-height:1.1!important;
}
html body
.mogo-country-eyebrow{
color:#9a815a!important;
font-size:9px!important;
letter-spacing:.16em!important;
}
html body
.mogo-country-head > button{
width:36px!important;
height:36px!important;
padding:0!important;
border:
1px solid #292929!important;
background:#080808!important;
color:#aaa!important;
font-size:22px!important;
cursor:pointer!important;
}
/* ==========================================================
SEARCH
========================================================== */
html body
.mogo-country-search-wrap{
position:sticky!important;
top:74px!important;
z-index:4!important;
height:46px!important;
margin:
18px 0 10px!important;
display:grid!important;
grid-template-columns:
20px 1fr!important;
align-items:center!important;
gap:8px!important;
padding:
0 13px!important;
border:
1px solid #292929!important;
background:#080808!important;
}
html body
.mogo-country-search-wrap svg{
width:17px!important;
height:17px!important;
fill:none!important;
stroke:#777!important;
stroke-width:1.5!important;
}
html body
#mogo-country-search{
width:100%!important;
height:42px!important;
padding:0!important;
border:0!important;
outline:0!important;
background:transparent!important;
color:#e1ddd7!important;
font-size:12px!important;
}
html body
#mogo-country-search::placeholder{
color:#626262!important;
}
html body
.mogo-country-total{
padding:
4px 2px 10px!important;
color:#686868!important;
font-size:10px!important;
}
/* ==========================================================
249 COUNTRY LIST
========================================================== */
html body
.country-grid.mogo-country-grid{
width:100%!important;
display:grid!important;
grid-template-columns:
1fr!important;
gap:0!important;
background:#050505!important;
}
html body
.mogo-country-option{
width:100%!important;
min-height:58px!important;
display:grid!important;
grid-template-columns:
28px minmax(0,1fr) 20px!important;
align-items:center!important;
gap:11px!important;
padding:
8px 7px!important;
text-align:left!important;
border:0!important;
border-bottom:
1px solid #1b1b1b!important;
background:#050505!important;
color:#ddd!important;
cursor:pointer!important;
}
html body
.mogo-country-option:hover{
background:#0a0a0a!important;
}
html body
.mogo-country-option.selected{
background:#0b0a08!important;
}
html body
.mogo-country-option[hidden]{
display:none!important;
}
html body
.mogo-country-flag{
width:26px!important;
height:19px!important;
display:block!important;
object-fit:cover!important;
border:
1px solid rgba(255,255,255,.12)!important;
}
html body
.mogo-country-copy{
min-width:0!important;
display:flex!important;
flex-direction:column!important;
gap:3px!important;
}
html body
.mogo-country-copy b{
overflow:hidden!important;
color:#ddd9d2!important;
font-size:12px!important;
font-weight:400!important;
line-height:1.25!important;
text-overflow:ellipsis!important;
white-space:nowrap!important;
}
html body
.mogo-country-copy small{
overflow:hidden!important;
color:#676767!important;
font-size:9px!important;
line-height:1.3!important;
text-overflow:ellipsis!important;
white-space:nowrap!important;
}
html body
.mogo-country-check{
color:#b59a69!important;
font-size:12px!important;
text-align:center!important;
}
html body
.mogo-country-note{
margin-top:20px!important;
padding:
14px 0!important;
border-top:
1px solid #252525!important;
color:#666!important;
font-size:10px!important;
line-height:1.7!important;
}
/* ==========================================================
MOBILE
========================================================== */
@media(max-width:560px){
html body
.country-drawer.mogo-country-drawer{
width:100vw!important;
padding:
18px 16px 26px!important;
}
html body
.mogo-country-head{
top:-18px!important;
margin:
-18px -16px 0!important;
padding:
18px 16px 14px!important;
}
html body
.mogo-country-search-wrap{
top:68px!important;
}
}
/* MOGO-COUNTRY-ISO249-CSS-V1-END */
/* MOGO-GOOGLE-ICON-ONLY-V1-START */
.social-btn.google img,
.social-btn.google svg,
.google-btn img,
.google-btn svg,
.provider-google img,
.provider-google svg{
width:22px!important;
height:22px!important;
min-width:22px!important;
min-height:22px!important;
object-fit:contain!important;
}
/* MOGO-GOOGLE-ICON-ONLY-V1-END */
/* MOGO-GOOGLE-TEXT-ICON-V1-START */
.mogo-provider-icon.mogo-google{
width:24px!important;
height:24px!important;
min-width:24px!important;
min-height:24px!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
font-size:22px!important;
line-height:1!important;
font-weight:900!important;
}
/* MOGO-GOOGLE-TEXT-ICON-V1-END */
/* ==================================================
MOGO TEXT HOVER COLOR RESTORE V1
================================================== */
html body a,
html body .footer a,
html body .nav a,
html body nav a,
html body .menu a,
html body .dropdown a,
html body .mega a,
html body .product-card a{
color:rgba(245,232,208,.65);
}
html body a:hover,
html body a:focus,
html body .footer a:hover,
html body .footer a:focus,
html body .nav a:hover,
html body .nav a:focus,
html body nav a:hover,
html body nav a:focus,
html body .menu a:hover,
html body .menu a:focus,
html body .dropdown a:hover,
html body .dropdown a:focus,
html body .mega a:hover,
html body .mega a:focus,
html body .product-card a:hover,
html body .product-card a:focus{
color:#B89552!important;
}
html body a:active,
html body a.active,
html body .footer a:active,
html body .footer a.active,
html body .nav a:active,
html body .nav a.active,
html body nav a:active,
html body nav a.active{
color:#B89552!important;
}
html body h1,
html body h2,
html body h3,
html body h4{
color:#F5E8D0;
}
html body p{
color:rgba(245,232,208,.65);
}
/* END MOGO TEXT HOVER COLOR RESTORE V1 */
/* ==================================================
MOGO GLOBAL TEXT COLOR RESET
Restore white typography
================================================== */
/* footer all text */
html body .footer,
html body .footer *{
color:#EAE7DF!important;
}
/* footer headings */
html body .footer h1,
html body .footer h2,
html body .footer h3,
html body .footer h4,
html body .footer strong{
color:#F5F2EA!important;
}
/* footer links */
html body .footer a{
color:#EAE7DF!important;
}
/* hover only subtle gold */
html body .footer a:hover{
color:#B89552!important;
}
/* remove unwanted gold text */
html body .footer .active,
html body .footer .selected{
color:#EAE7DF!important;
}
/* keep subscribe button border */
html body .footer .btn,
html body .footer button{
color:#EAE7DF!important;
border-color:#B89552!important;
}
/* END TEXT RESET */
/* ==================================================
MOGO COLLECTION OUTER BORDER CLEAN V1
================================================== */
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"]) .collection-header,
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"]) .collection-toolbar,
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"]) .collection-grid-wrapper,
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"]) .collection-products,
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"]) .products-container,
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"]) .collection-shell,
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"]) .collection-shell > .container,
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"]) .mogo-catalog-v2,
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"]) .mogo-catalog-v2-host,
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"]) .mogo-cat-layout,
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"]) .mogo-cat-results,
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"]) .mogo-cat-grid{
border:none!important;
outline:none!important;
box-shadow:none!important;
}
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"]) .mogo-cat-toolbar{
border-top:none!important;
border-bottom:none!important;
border-left:none!important;
border-right:none!important;
}
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"]) .mogo-cat-views,
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"]) .mogo-cat-sort,
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"]) .mogo-cat-sidebar{
border-left:none!important;
border-right:none!important;
}
/* ==================================================
MOGO LISTING AURUM ALIGN V1
Shared listing only. Header/logo/footer untouched.
================================================== */
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) .collection-titlebar,
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) .collection-shell,
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) .collection-shell > .container,
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) .mogo-catalog-v2,
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) .mogo-catalog-v2-host{
width:100%!important;
max-width:none!important;
background:#050505!important;
}
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) .mogo-cat-toolbar{
min-height:58px!important;
display:grid!important;
grid-template-columns:auto auto 1fr auto!important;
align-items:center!important;
gap:22px!important;
padding:0 24px!important;
border-top:1px solid #1d1d1d!important;
border-bottom:1px solid #1d1d1d!important;
background:#050505!important;
}
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) .mogo-cat-layout{
display:grid!important;
grid-template-columns:210px minmax(0,1fr)!important;
gap:0!important;
width:100%!important;
max-width:none!important;
background:#050505!important;
}
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) .mogo-cat-sidebar{
width:210px!important;
min-width:210px!important;
padding:20px 28px 80px!important;
border-right:1px solid #1f1f1f!important;
background:#050505!important;
}
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) .mogo-cat-results{
width:100%!important;
min-width:0!important;
padding:28px 13px 90px!important;
background:#050505!important;
}
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) .mogo-cat-grid{
display:grid!important;
width:100%!important;
max-width:none!important;
margin:0!important;
padding:0!important;
column-gap:clamp(12px,1.55vw,32px)!important;
row-gap:48px!important;
}
@media(min-width:1800px){
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) .mogo-cat-grid[data-density="compact"]{grid-template-columns:repeat(6,minmax(0,1fr))!important}
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) .mogo-cat-grid[data-density="standard"]{grid-template-columns:repeat(4,minmax(0,1fr))!important}
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) .mogo-cat-grid[data-density="large"]{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media(min-width:1500px) and (max-width:1799px){
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) .mogo-cat-grid[data-density="compact"]{grid-template-columns:repeat(6,minmax(0,1fr))!important}
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) .mogo-cat-grid[data-density="standard"]{grid-template-columns:repeat(4,minmax(0,1fr))!important}
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) .mogo-cat-grid[data-density="large"]{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media(min-width:1200px) and (max-width:1499px){
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) .mogo-cat-layout{grid-template-columns:200px minmax(0,1fr)!important}
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) .mogo-cat-sidebar{width:200px!important;min-width:200px!important}
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) .mogo-cat-grid[data-density="compact"]{grid-template-columns:repeat(4,minmax(0,1fr))!important}
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) .mogo-cat-grid[data-density="standard"]{grid-template-columns:repeat(3,minmax(0,1fr))!important}
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) .mogo-cat-grid[data-density="large"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) .mogo-cat-grid .product-card{
width:100%!important;
min-width:0!important;
max-width:none!important;
border:none!important;
box-shadow:none!important;
background:#050505!important;
}
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) .mogo-cat-grid .product-image{
width:100%!important;
aspect-ratio:1/1!important;
overflow:hidden!important;
background:#020202!important;
}
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) .mogo-cat-grid .product-image img{
width:100%!important;
height:100%!important;
display:block!important;
object-fit:cover!important;
}
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) .mogo-cat-grid .product-info{
min-height:44px!important;
padding:10px 3px 0!important;
text-align:center!important;
background:#050505!important;
}
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) .mogo-cat-grid .product-title,
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) .mogo-cat-grid .price{
margin-left:0!important;
margin-right:0!important;
text-align:center!important;
}
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) .mogo-cat-grid .badge{
color:rgba(184,149,82,.7)!important;
border-color:rgba(184,149,82,.38)!important;
background:rgba(5,5,5,.45)!important;
}
/* END MOGO LISTING AURUM ALIGN V1 */
/* END MOGO COLLECTION OUTER BORDER CLEAN V1 */
/* ==================================================
MOGO LISTING VIEW COUNT FINAL V1
1st / 2nd / 3rd view buttons = 6 / 4 / 3 previews.
================================================== */
@media(min-width:1500px){
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) #mogo-cat-products.mogo-cat-grid[data-density="compact"],
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) .mogo-cat-grid[data-density="compact"]{
grid-template-columns:repeat(6,minmax(0,1fr))!important;
}
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) #mogo-cat-products.mogo-cat-grid[data-density="standard"],
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) .mogo-cat-grid[data-density="standard"]{
grid-template-columns:repeat(4,minmax(0,1fr))!important;
}
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) #mogo-cat-products.mogo-cat-grid[data-density="large"],
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) .mogo-cat-grid[data-density="large"]{
grid-template-columns:repeat(3,minmax(0,1fr))!important;
}
}
/* END MOGO LISTING VIEW COUNT FINAL V1 */
/* Keep the second view control semantically stable: it is always a four-card view.
Only the narrow mobile layout is allowed to collapse to two cards. */
@media (min-width:761px) and (max-width:1499px){
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) #mogo-cat-products.mogo-cat-grid[data-density="standard"],
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) .mogo-cat-grid[data-density="standard"]{
grid-template-columns:repeat(4,minmax(0,1fr))!important;
}
}
/* ==================================================
MOGO LISTING TOOLBAR FINAL ALIGN V1
View buttons left, sort control right. No layout jump.
================================================== */
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) .mogo-cat-toolbar{
width:100%!important;
min-height:58px!important;
display:flex!important;
align-items:center!important;
justify-content:space-between!important;
gap:24px!important;
padding:0 24px!important;
box-sizing:border-box!important;
background:#050505!important;
border-top:1px solid #1d1d1d!important;
border-bottom:1px solid #1d1d1d!important;
}
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) .mogo-cat-views{
flex:0 0 auto!important;
height:58px!important;
display:flex!important;
align-items:center!important;
gap:10px!important;
padding:0!important;
margin:0!important;
border:0!important;
}
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) .mogo-cat-filter-open,
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) .mogo-cat-count{
display:none!important;
}
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) .mogo-cat-sort{
flex:0 0 auto!important;
height:58px!important;
margin-left:auto!important;
padding:0!important;
display:flex!important;
align-items:center!important;
justify-content:flex-end!important;
gap:10px!important;
border:0!important;
}
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) .mogo-cat-sort label{
margin:0!important;
color:#8a8a8a!important;
font-size:11px!important;
line-height:1!important;
}
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) .mogo-cat-sort select{
width:150px!important;
height:38px!important;
margin:0!important;
padding:0 34px 0 14px!important;
background:#080808!important;
color:#F5E8D0!important;
border:1px solid rgba(245,232,208,.12)!important;
border-radius:0!important;
box-shadow:none!important;
outline:none!important;
}
/* END MOGO LISTING TOOLBAR FINAL ALIGN V1 */
/* ==================================================
MOGO CTA MATCH SUBSCRIBE FILLED V1
Rectangular CTA buttons use the newsletter subscribe effect.
Icon buttons and product action buttons are not targeted.
================================================== */
html body a.btn,
html body button.btn,
html body input.btn,
html body .btn.primary,
html body .btn.secondary,
html body .btn.light,
html body #newsletter-btn{
background:#b89b68!important;
color:#050505!important;
border:1px solid #b89b68!important;
border-radius:0!important;
box-shadow:none!important;
text-shadow:none!important;
filter:none!important;
opacity:1!important;
transition:background .18s ease,color .18s ease,border-color .18s ease!important;
}
html body a.btn:hover,
html body button.btn:hover,
html body input.btn:hover,
html body .btn.primary:hover,
html body .btn.secondary:hover,
html body .btn.light:hover,
html body #newsletter-btn:hover{
background:#080808!important;
color:#b89b68!important;
border-color:#705b39!important;
box-shadow:none!important;
text-shadow:none!important;
filter:none!important;
}
/* END MOGO CTA MATCH SUBSCRIBE FILLED V1 */
/* ==================================================
MOGO CTA SUBSCRIBE SHINE V1
Adds the subscribe-style light sweep to rectangular CTA buttons.
================================================== */
html body a.btn,
html body button.btn,
html body #newsletter-btn{
position:relative!important;
overflow:hidden!important;
isolation:isolate!important;
}
html body a.btn::after,
html body button.btn::after,
html body #newsletter-btn::after{
content:""!important;
position:absolute!important;
inset:-40% auto -40% -70%!important;
width:58%!important;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent)!important;
transform:skewX(-22deg) translateX(0)!important;
opacity:0!important;
pointer-events:none!important;
z-index:-1!important;
}
@media(hover:hover) and (pointer:fine){
html body a.btn:hover::after,
html body button.btn:hover::after,
html body #newsletter-btn:hover::after{
opacity:1!important;
animation:mogoSubscribeShine .72s ease-out 1!important;
}
}
@keyframes mogoSubscribeShine{
0%{
transform:skewX(-22deg) translateX(0);
}
100%{
transform:skewX(-22deg) translateX(360%);
}
}
/* END MOGO CTA SUBSCRIBE SHINE V1 */
/* ==================================================
MOGO LISTING SORT BORDER REMOVE V1
Remove the visible select box frame, keep sorting behavior.
================================================== */
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) .mogo-cat-sort select,
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) #sort-filter{
border:0!important;
outline:0!important;
box-shadow:none!important;
background:#050505!important;
}
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) .mogo-cat-sort select:focus,
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) #sort-filter:focus{
border:0!important;
outline:0!important;
box-shadow:none!important;
}
/* END MOGO LISTING SORT BORDER REMOVE V1 */
/* ==================================================
MOGO CTA SUBSCRIBE STATE CORRECT V2
Default: dark outline. Hover: filled gold like subscribe interaction.
================================================== */
html body a.btn,
html body button.btn,
html body input.btn,
html body .btn.primary,
html body .btn.secondary,
html body .btn.light,
html body #newsletter-btn{
background:#050505!important;
color:#b89b68!important;
border:1px solid #705b39!important;
border-radius:0!important;
box-shadow:none!important;
text-shadow:none!important;
filter:none!important;
opacity:1!important;
}
html body a.btn:hover,
html body button.btn:hover,
html body input.btn:hover,
html body .btn.primary:hover,
html body .btn.secondary:hover,
html body .btn.light:hover,
html body #newsletter-btn:hover{
background:#b89b68!important;
color:#050505!important;
border-color:#b89b68!important;
box-shadow:none!important;
text-shadow:none!important;
filter:none!important;
}
/* END MOGO CTA SUBSCRIBE STATE CORRECT V2 */
/* ==================================================
MOGO LISTING VIEW OUTLINE REMOVE V1
Remove outer frames from listing toolbar/view controls.
================================================== */
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) .mogo-cat-toolbar{
border-top:0!important;
border-bottom:0!important;
border-left:0!important;
border-right:0!important;
box-shadow:none!important;
outline:0!important;
}
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) .mogo-cat-view,
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) .mogo-cat-view.active,
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) .mogo-cat-view:focus,
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) .mogo-cat-view:focus-visible{
border:0!important;
outline:0!important;
box-shadow:none!important;
background:transparent!important;
}
/* END MOGO LISTING VIEW OUTLINE REMOVE V1 */
/* ==================================================
MOGO LISTING TOP LINE REMOVE V1
Remove the extra horizontal line above listing controls.
================================================== */
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) .collection-titlebar,
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) .collection-shell,
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) .collection-shell > .container,
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) .mogo-catalog-v2-host,
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) .mogo-catalog-v2{
border-top:0!important;
border-bottom:0!important;
box-shadow:none!important;
outline:0!important;
}
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) .collection-titlebar::before,
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) .collection-titlebar::after,
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) .collection-shell::before,
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) .collection-shell::after,
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) .mogo-cat-toolbar::before,
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) .mogo-cat-toolbar::after{
display:none!important;
content:none!important;
}
/* END MOGO LISTING TOP LINE REMOVE V1 */
/* ==================================================
MOGO CTA SUBSCRIBE SHINE TIMING V2
Slower, softer hover sweep. No default flashing.
================================================== */
html body a.btn::after,
html body button.btn::after,
html body #newsletter-btn::after{
width:42%!important;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.26),transparent)!important;
opacity:0!important;
}
@media(hover:hover) and (pointer:fine){
html body a.btn:hover::after,
html body button.btn:hover::after,
html body #newsletter-btn:hover::after{
opacity:1!important;
animation:mogoSubscribeShineSoft 1.35s cubic-bezier(.22,.61,.36,1) .08s 1!important;
}
}
@keyframes mogoSubscribeShineSoft{
0%{
transform:skewX(-22deg) translateX(-20%);
opacity:0;
}
18%{
opacity:.9;
}
100%{
transform:skewX(-22deg) translateX(430%);
opacity:0;
}
}
/* END MOGO CTA SUBSCRIBE SHINE TIMING V2 */
/* ==================================================
MOGO FILTER PANEL LINES REMOVE V1
Remove all divider lines inside listing filter sidebar.
================================================== */
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) .mogo-cat-sidebar,
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) #mogo-cat-sidebar,
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) #mogo-cat-facets,
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) #mogo-cat-facets .facet,
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) #mogo-cat-facets .facet h4,
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) .facet-panel,
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) .facet-panel .facet,
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) .facet{
border:0!important;
border-top:0!important;
border-right:0!important;
border-bottom:0!important;
border-left:0!important;
box-shadow:none!important;
outline:0!important;
}
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) #mogo-cat-facets .facet::before,
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) #mogo-cat-facets .facet::after,
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) .facet::before,
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) .facet::after,
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) .mogo-cat-sidebar::before,
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) .mogo-cat-sidebar::after{
display:none!important;
content:none!important;
}
/* END MOGO FILTER PANEL LINES REMOVE V1 */
/* ==================================================
MOGO FAQ TABS PUREBLACK V1
Remove white tab buttons on FAQ.
================================================== */
html body[data-page="faq"] .faq-tabs button{
min-height:42px!important;
padding:0 18px!important;
background:#050505!important;
color:#b89b68!important;
border:1px solid #705b39!important;
border-radius:0!important;
box-shadow:none!important;
text-shadow:none!important;
filter:none!important;
}
html body[data-page="faq"] .faq-tabs button.active,
html body[data-page="faq"] .faq-tabs button:hover{
background:#b89b68!important;
color:#050505!important;
border-color:#b89b68!important;
}
/* END MOGO FAQ TABS PUREBLACK V1 */
/* ==================================================
MOGO BUTTON HOVER ONLY STATE V1
Keep inactive/active buttons outlined. Filled gold only on hover.
================================================== */
html body .faq-tabs button,
html body .faq-tabs button.active,
html body .account-tabs button,
html body .account-tabs button.active{
background:#050505!important;
color:#b89b68!important;
border:1px solid #705b39!important;
border-radius:0!important;
box-shadow:none!important;
outline:0!important;
}
html body .faq-tabs button:hover,
html body .account-tabs button:hover{
background:#b89b68!important;
color:#050505!important;
border-color:#b89b68!important;
}
html body .faq-tabs button:focus,
html body .faq-tabs button:focus-visible,
html body .account-tabs button:focus,
html body .account-tabs button:focus-visible{
background:#050505!important;
color:#b89b68!important;
border-color:#705b39!important;
box-shadow:none!important;
outline:0!important;
}
/* END MOGO BUTTON HOVER ONLY STATE V1 */
/* ==================================================
MOGO FAQ ACTIVE NOT FILLED FINAL V2
Active tab must not fill. Filled gold only while hovering.
================================================== */
html body[data-page="faq"] .faq-tabs button,
html body[data-page="faq"] .faq-tabs button.active,
html body[data-page="faq"] .faq-tabs button.active:not(:hover),
html body[data-page="faq"] .faq-tabs button:focus,
html body[data-page="faq"] .faq-tabs button:focus-visible{
background:#050505!important;
color:#b89b68!important;
border:1px solid #705b39!important;
border-radius:0!important;
box-shadow:none!important;
outline:0!important;
}
html body[data-page="faq"] .faq-tabs button:hover,
html body[data-page="faq"] .faq-tabs button.active:hover{
background:#b89b68!important;
color:#050505!important;
border-color:#b89b68!important;
}
/* END MOGO FAQ ACTIVE NOT FILLED FINAL V2 */
/* ==================================================
MOGO SIZING FIT GUIDE PUREBLACK V1
Remove white cards from sizing fit guide.
================================================== */
html body[data-page="sizing"] .fit-guide > div{
background:#050505!important;
color:#F5E8D0!important;
border:1px solid #705b39!important;
border-radius:0!important;
box-shadow:none!important;
}
html body[data-page="sizing"] .fit-guide > div b{
color:#F5E8D0!important;
}
html body[data-page="sizing"] .fit-guide > div span{
color:rgba(245,232,208,.65)!important;
}
html body[data-page="sizing"] .fit-guide > div:hover{
border-color:#b89b68!important;
}
/* END MOGO SIZING FIT GUIDE PUREBLACK V1 */
/* ==================================================
MOGO LINK HOVER GOLD TONE FINAL V1
Unify hover text gold to the muted subscribe gold.
================================================== */
html body a:hover,
html body a:focus,
html body .footer a:hover,
html body .footer a:focus,
html body .support-nav a:hover,
html body .support-nav a:focus,
html body .nav a:hover,
html body nav a:hover,
html body .menu a:hover,
html body .dropdown a:hover,
html body .mega a:hover,
html body .product-card a:hover{
color:#b89b68!important;
}
html body a.active,
html body .footer a.active,
html body .support-nav a.active,
html body nav a.active{
color:#b89b68!important;
}
/* END MOGO LINK HOVER GOLD TONE FINAL V1 */
/* ==================================================
MOGO CARE GRID PUREBLACK V1
Remove white care cards.
================================================== */
html body[data-page="care"] .care-grid > div{
background:#050505!important;
color:#F5E8D0!important;
border:1px solid #705b39!important;
border-radius:0!important;
box-shadow:none!important;
}
html body[data-page="care"] .care-grid > div h2{
color:#F5E8D0!important;
}
html body[data-page="care"] .care-grid > div p{
color:rgba(245,232,208,.65)!important;
}
html body[data-page="care"] .care-grid > div:hover{
border-color:#b89b68!important;
}
/* END MOGO CARE GRID PUREBLACK V1 */
/* ==================================================
MOGO PRODUCT FILTER VISUAL FACETS V1
Product-aware sidebar: round thumbnails, counts, switch control.
================================================== */
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) #mogo-cat-facets .facet h4{
min-height:44px!important;
color:#F5E8D0!important;
font-size:12px!important;
font-weight:600!important;
letter-spacing:.14em!important;
text-transform:uppercase!important;
}
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) #mogo-cat-facets .facet h4::after{
content:"⌄"!important;
color:rgba(245,232,208,.7)!important;
font-size:14px!important;
line-height:1!important;
}
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) #mogo-cat-facets .facet.open h4::after{
content:"⌃"!important;
}
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) #mogo-cat-facets .facet.open label{
min-height:31px!important;
display:flex!important;
align-items:center!important;
gap:10px!important;
margin:5px 0!important;
color:rgba(245,232,208,.62)!important;
font-size:13px!important;
}
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) #mogo-cat-facets .facet-chip{
cursor:pointer!important;
}
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) #mogo-cat-facets .facet-chip input{
position:absolute!important;
opacity:0!important;
pointer-events:none!important;
}
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) #mogo-cat-facets .facet-thumb{
width:24px!important;
height:24px!important;
flex:0 0 24px!important;
border-radius:50%!important;
background-color:#111!important;
background-size:cover!important;
background-position:center!important;
border:1px solid rgba(245,232,208,.16)!important;
box-shadow:inset 0 0 0 1px rgba(0,0,0,.45)!important;
}
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) #mogo-cat-facets .facet-name{
color:rgba(245,232,208,.72)!important;
}
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) #mogo-cat-facets .facet-total{
color:rgba(245,232,208,.42)!important;
}
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) #mogo-cat-facets .facet-chip:hover .facet-name,
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) #mogo-cat-facets .facet-chip input:checked ~ .facet-name{
color:#b89b68!important;
}
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) #mogo-cat-facets .facet-chip input:checked ~ .facet-thumb{
border-color:#b89b68!important;
}
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) #mogo-cat-facets .facet-switch label input{
position:absolute!important;
opacity:0!important;
pointer-events:none!important;
}
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) #mogo-cat-facets .facet-toggle{
width:36px!important;
height:18px!important;
flex:0 0 36px!important;
border-radius:99px!important;
background:#1d1d1d!important;
position:relative!important;
}
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) #mogo-cat-facets .facet-toggle::after{
content:""!important;
position:absolute!important;
width:12px!important;
height:12px!important;
border-radius:50%!important;
left:3px!important;
top:3px!important;
background:#050505!important;
transition:transform .18s ease,background .18s ease!important;
}
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) #mogo-cat-facets .facet-switch input:checked + .facet-toggle{
background:#b89b68!important;
}
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) #mogo-cat-facets .facet-switch input:checked + .facet-toggle::after{
transform:translateX(18px)!important;
background:#050505!important;
}
/* END MOGO PRODUCT FILTER VISUAL FACETS V1 */
/* ==================================================
MOGO CUSTOM PAGE FINAL CLEAN V1
Luxury Handmade Atelier, scoped to custom.html
================================================== */
html body[data-page="custom"]{
background:#050505!important;
color:#F5E8D0!important;
}
html body[data-page="custom"] .custom-page{
background:#050505!important;
color:#F5E8D0!important;
overflow:hidden!important;
}
html body[data-page="custom"] .custom-container{
max-width:1680px!important;
width:calc(100% - 96px)!important;
margin:0 auto!important;
}
html body[data-page="custom"] .custom-kicker{
margin:0 0 28px!important;
color:#B89552!important;
font-size:12px!important;
letter-spacing:.24em!important;
text-transform:uppercase!important;
}
html body[data-page="custom"] .custom-hero{
min-height:calc(100vh - 78px)!important;
display:grid!important;
grid-template-columns:40% 60%!important;
background:#050505!important;
border-bottom:1px solid rgba(184,149,82,.16)!important;
}
html body[data-page="custom"] .custom-hero-copy{
min-height:860px!important;
display:flex!important;
flex-direction:column!important;
justify-content:center!important;
padding:110px 5vw 110px max(7.5vw,86px)!important;
position:relative!important;
z-index:2!important;
}
html body[data-page="custom"] .custom-hero-copy h1{
margin:0 0 42px!important;
color:#F5E8D0!important;
font-family:Georgia,'Times New Roman',serif!important;
font-size:clamp(68px,5.7vw,104px)!important;
font-weight:400!important;
line-height:1.04!important;
letter-spacing:0!important;
}
html body[data-page="custom"] .custom-lede{
max-width:620px!important;
margin:0!important;
color:rgba(245,232,208,.74)!important;
font-size:21px!important;
line-height:2.05!important;
letter-spacing:.02em!important;
}
html body[data-page="custom"] .custom-actions{
display:flex!important;
gap:18px!important;
margin-top:52px!important;
flex-wrap:wrap!important;
}
html body[data-page="custom"] .custom-hero-media{
position:relative!important;
min-height:860px!important;
margin:0!important;
overflow:hidden!important;
background:#050505!important;
}
html body[data-page="custom"] .custom-hero-media::before{
content:""!important;
position:absolute!important;
inset:0!important;
z-index:1!important;
pointer-events:none!important;
background:
linear-gradient(90deg,#050505 0%,rgba(5,5,5,.78) 22%,rgba(5,5,5,.24) 54%,rgba(5,5,5,.48) 100%),
radial-gradient(circle at 64% 46%,rgba(184,149,82,.12),rgba(5,5,5,0) 48%)!important;
}
html body[data-page="custom"] .custom-hero-media img{
width:112%!important;
height:112%!important;
object-fit:cover!important;
object-position:60% center!important;
transform:scale(.82)!important;
transform-origin:center!important;
filter:saturate(.86) contrast(1.08) brightness(.78)!important;
display:block!important;
}
html body[data-page="custom"] .custom-values{
padding:142px 0!important;
background:#050505!important;
border-bottom:1px solid rgba(184,149,82,.14)!important;
}
html body[data-page="custom"] .custom-value-grid{
display:grid!important;
grid-template-columns:repeat(3,minmax(0,1fr))!important;
gap:120px!important;
}
html body[data-page="custom"] .custom-value-grid article{
min-height:320px!important;
padding:18px 12px 0!important;
background:transparent!important;
border:0!important;
}
html body[data-page="custom"] .custom-value-grid article > span{
display:block!important;
margin-bottom:24px!important;
color:#B89552!important;
font-family:Georgia,'Times New Roman',serif!important;
font-size:20px!important;
line-height:1!important;
}
html body[data-page="custom"] .custom-value-grid small,
html body[data-page="custom"] .custom-process-grid small{
display:block!important;
color:rgba(184,149,82,.72)!important;
font-size:11px!important;
letter-spacing:.24em!important;
text-transform:uppercase!important;
}
html body[data-page="custom"] .custom-value-grid small{
margin-bottom:42px!important;
}
html body[data-page="custom"] .custom-value-grid h2{
margin:0 0 24px!important;
color:#F5E8D0!important;
font-family:Georgia,'Times New Roman',serif!important;
font-size:34px!important;
font-weight:400!important;
}
html body[data-page="custom"] .custom-value-grid p,
html body[data-page="custom"] .custom-process-grid p,
html body[data-page="custom"] .custom-request-story p{
margin:0!important;
color:rgba(245,232,208,.62)!important;
font-size:16px!important;
line-height:2!important;
}
html body[data-page="custom"] .custom-process{
padding:196px 0 208px!important;
background:#050505!important;
border-bottom:1px solid rgba(184,149,82,.16)!important;
}
html body[data-page="custom"] .custom-section-head{
display:grid!important;
grid-template-columns:1fr auto 1fr!important;
align-items:center!important;
gap:32px!important;
margin:0 0 112px!important;
}
html body[data-page="custom"] .custom-section-head span{
height:1px!important;
background:linear-gradient(90deg,rgba(184,149,82,0),rgba(184,149,82,.42),rgba(184,149,82,0))!important;
}
html body[data-page="custom"] .custom-section-head h2{
margin:0!important;
color:#B89552!important;
font-family:Georgia,'Times New Roman',serif!important;
font-size:28px!important;
font-weight:400!important;
letter-spacing:.18em!important;
text-transform:uppercase!important;
}
html body[data-page="custom"] .custom-block-title{
grid-column:1/-1!important;
display:grid!important;
grid-template-columns:1fr auto 1fr!important;
align-items:center!important;
gap:32px!important;
margin:0 0 18px!important;
}
html body[data-page="custom"] .custom-block-title span{
height:1px!important;
background:linear-gradient(90deg,rgba(184,149,82,0),rgba(184,149,82,.42),rgba(184,149,82,0))!important;
}
html body[data-page="custom"] .custom-block-title h2{
margin:0!important;
color:#B89552!important;
font-family:Georgia,'Times New Roman',serif!important;
font-size:28px!important;
font-weight:400!important;
letter-spacing:.18em!important;
text-transform:uppercase!important;
}
html body[data-page="custom"] .custom-process-grid{
position:relative!important;
display:grid!important;
grid-template-columns:repeat(5,minmax(0,1fr))!important;
gap:92px!important;
}
html body[data-page="custom"] .custom-process-grid::before{
content:""!important;
position:absolute!important;
left:0!important;
right:0!important;
top:54px!important;
height:1px!important;
background:linear-gradient(90deg,rgba(184,149,82,0),rgba(184,149,82,.38),rgba(184,149,82,0))!important;
}
html body[data-page="custom"] .custom-process-grid article{
min-height:390px!important;
position:relative!important;
z-index:1!important;
background:#050505!important;
border:0!important;
padding:0!important;
}
html body[data-page="custom"] .custom-process-grid strong{
display:inline-block!important;
margin-bottom:30px!important;
padding-right:20px!important;
background:#050505!important;
color:rgba(184,149,82,.94)!important;
font-family:Georgia,'Times New Roman',serif!important;
font-size:98px!important;
font-weight:400!important;
line-height:1!important;
}
html body[data-page="custom"] .custom-process-grid small{
margin-bottom:42px!important;
}
html body[data-page="custom"] .custom-process-grid h3{
margin:0 0 22px!important;
color:#F5E8D0!important;
font-family:Georgia,'Times New Roman',serif!important;
font-size:22px!important;
font-weight:400!important;
}
html body[data-page="custom"] .custom-request{
padding:0!important;
background:#070707!important;
border-top:1px solid rgba(184,149,82,.16)!important;
border-bottom:1px solid rgba(184,149,82,.16)!important;
}
html body[data-page="custom"] .custom-request-grid{
display:grid!important;
grid-template-columns:40% 60%!important;
min-height:840px!important;
}
html body[data-page="custom"] .custom-request-story{
display:grid!important;
grid-template-rows:64% 36%!important;
background:#050505!important;
overflow:hidden!important;
}
html body[data-page="custom"] .custom-request-story img{
width:100%!important;
height:100%!important;
object-fit:cover!important;
object-position:center!important;
display:block!important;
filter:saturate(.78) contrast(1.1) brightness(.58)!important;
}
html body[data-page="custom"] .custom-request-story > div{
display:flex!important;
flex-direction:column!important;
justify-content:center!important;
padding:74px 78px!important;
background:#050505!important;
}
html body[data-page="custom"] .custom-request-story h2{
margin:0 0 30px!important;
color:#F5E8D0!important;
font-family:Georgia,'Times New Roman',serif!important;
font-size:48px!important;
font-weight:400!important;
line-height:1.16!important;
}
html body[data-page="custom"] .custom-form{
width:100%!important;
max-width:none!important;
margin:0!important;
padding:104px 112px!important;
background:#070707!important;
border:0!important;
box-shadow:none!important;
}
html body[data-page="custom"] .custom-form label{
display:grid!important;
gap:10px!important;
margin:0 0 26px!important;
color:#F5E8D0!important;
font-size:14px!important;
letter-spacing:.04em!important;
}
html body[data-page="custom"] .custom-form .input,
html body[data-page="custom"] .custom-form .select,
html body[data-page="custom"] .custom-form textarea{
min-height:58px!important;
padding:0!important;
background:transparent!important;
border:0!important;
border-bottom:1px solid rgba(184,149,82,.32)!important;
border-radius:0!important;
color:#F5E8D0!important;
font-size:15px!important;
box-shadow:none!important;
}
html body[data-page="custom"] .custom-form textarea{
min-height:138px!important;
padding-top:18px!important;
}
html body[data-page="custom"] .custom-form .input:focus,
html body[data-page="custom"] .custom-form .select:focus,
html body[data-page="custom"] .custom-form textarea:focus{
border-bottom-color:#B89552!important;
outline:none!important;
}
html body[data-page="custom"] .custom-form button[type="submit"]{
min-height:60px!important;
margin-top:18px!important;
background:#B89552!important;
border:1px solid #B89552!important;
color:#050505!important;
box-shadow:none!important;
}
html body[data-page="custom"] .custom-form button[type="submit"]:hover{
background:#050505!important;
color:#B89552!important;
}
html body[data-page="custom"] .custom-gallery{
padding:196px 0 218px!important;
background:#050505!important;
}
html body[data-page="custom"] .custom-gallery-grid{
display:grid!important;
grid-template-columns:repeat(3,minmax(0,1fr))!important;
gap:78px 64px!important;
}
html body[data-page="custom"] .custom-gallery-grid figure{
height:520px!important;
margin:0!important;
background:radial-gradient(circle at 50% 45%,rgba(184,149,82,.07),rgba(5,5,5,0) 62%)!important;
border:0!important;
box-shadow:none!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
overflow:visible!important;
}
html body[data-page="custom"] .custom-gallery-grid img{
width:116%!important;
height:116%!important;
max-width:none!important;
object-fit:contain!important;
display:block!important;
filter:saturate(.94) contrast(1.05)!important;
transition:opacity .4s ease!important;
}
html body[data-page="custom"] .custom-gallery-grid figure:hover img{
opacity:.9!important;
}
html body[data-page="custom"] .custom-collections{
padding:126px 0 150px!important;
background:#050505!important;
border-top:1px solid rgba(184,149,82,.14)!important;
}
html body[data-page="custom"] .custom-collection-grid{
display:grid!important;
grid-template-columns:repeat(3,minmax(0,1fr))!important;
gap:36px!important;
}
html body[data-page="custom"] .custom-collection-grid a{
min-height:420px!important;
position:relative!important;
display:flex!important;
align-items:flex-end!important;
padding:34px!important;
overflow:hidden!important;
background:#050505!important;
text-decoration:none!important;
border:0!important;
}
html body[data-page="custom"] .custom-collection-grid img{
position:absolute!important;
inset:0!important;
width:100%!important;
height:100%!important;
object-fit:cover!important;
opacity:.62!important;
filter:saturate(.82) contrast(1.08) brightness(.7)!important;
transition:opacity .35s ease, transform .45s ease!important;
}
html body[data-page="custom"] .custom-collection-grid a::after{
content:""!important;
position:absolute!important;
inset:0!important;
background:linear-gradient(180deg,rgba(5,5,5,.05),rgba(5,5,5,.78))!important;
}
html body[data-page="custom"] .custom-collection-grid span{
position:relative!important;
z-index:1!important;
color:#F5E8D0!important;
font-family:Georgia,'Times New Roman',serif!important;
font-size:30px!important;
font-weight:400!important;
}
html body[data-page="custom"] .custom-collection-grid a:hover img{
opacity:.82!important;
transform:scale(1.03)!important;
}
@media(max-width:1200px){
html body[data-page="custom"] .custom-hero,
html body[data-page="custom"] .custom-request-grid{
grid-template-columns:1fr!important;
}
html body[data-page="custom"] .custom-hero-copy,
html body[data-page="custom"] .custom-hero-media{
min-height:620px!important;
}
html body[data-page="custom"] .custom-hero-media img{
width:100%!important;
height:100%!important;
transform:none!important;
}
html body[data-page="custom"] .custom-value-grid,
html body[data-page="custom"] .custom-gallery-grid,
html body[data-page="custom"] .custom-collection-grid{
grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
html body[data-page="custom"] .custom-process-grid{
grid-template-columns:repeat(3,minmax(0,1fr))!important;
}
html body[data-page="custom"] .custom-process-grid::before{
display:none!important;
}
}
@media(max-width:768px){
html body[data-page="custom"] .custom-container{
width:calc(100% - 32px)!important;
}
html body[data-page="custom"] .custom-hero-copy,
html body[data-page="custom"] .custom-form,
html body[data-page="custom"] .custom-request-story > div{
padding:52px 24px!important;
}
html body[data-page="custom"] .custom-value-grid,
html body[data-page="custom"] .custom-process-grid,
html body[data-page="custom"] .custom-gallery-grid,
html body[data-page="custom"] .custom-collection-grid{
grid-template-columns:1fr!important;
}
html body[data-page="custom"] .custom-gallery-grid figure{
height:420px!important;
}
}
/* END MOGO CUSTOM PAGE FINAL CLEAN V1 */
/* MOGO front-end final white-surface and button audit fix. */
html body[data-page="product"] .zoom-btn,
html body[data-page="product"] .fit-buttons button,
html body .payment-placeholder,
html body .empty-state,
html body .cart-summary,
html body .purchase-trust span,
html body .review-box,
html body .fit-guide > div,
html body .care-grid > div,
html body .steps-3 > div{
background:#050505!important;
background-color:#050505!important;
color:#e8e8e8!important;
border-color:#2a241b!important;
}
html body[data-page="product"] .fit-buttons button.active,
html body[data-page="product"] .fit-buttons button:hover,
html body[data-page="product"] .zoom-btn:hover{
background:#15120b!important;
color:#b89b68!important;
border-color:#b89b68!important;
}
html body .payment-placeholder{
border-color:rgba(184,155,104,.45)!important;
color:rgba(245,232,208,.72)!important;
}
html body .empty-state .btn,
html body .empty-state a.btn{
background:#050505!important;
color:#b89b68!important;
border-color:#705b39!important;
}
html body .empty-state .btn:hover,
html body .empty-state a.btn:hover{
background:#b89b68!important;
color:#050505!important;
border-color:#b89b68!important;
}
/* MOGO product hover preview pacing fix. */
html body .product-card .product-image img.primary-image{
transition:opacity .72s ease,transform 1.05s ease,filter .72s ease!important;
}
html body .product-card .product-image img.mogo-preview-fading{
opacity:.24!important;
}
@media(hover:hover) and (pointer:fine){
html body .product-card:hover .product-image img.primary-image{
transform:scale(1.012)!important;
filter:saturate(.96) contrast(1.04) brightness(.96)!important;
}
}
/* MOGO CTA button logic: outline by default, filled only on hover. */
html body .btn.primary,
html body button.btn.primary,
html body a.btn.primary,
html body input[type="submit"].btn,
html body[data-page="custom"] .custom-form button[type="submit"]{
background:#050505!important;
background-color:#050505!important;
color:#b89b68!important;
border:1px solid rgba(184,155,104,.72)!important;
box-shadow:none!important;
}
html body .btn.primary:hover,
html body button.btn.primary:hover,
html body a.btn.primary:hover,
html body input[type="submit"].btn:hover,
html body[data-page="custom"] .custom-form button[type="submit"]:hover,
html body .btn.primary:focus-visible,
html body button.btn.primary:focus-visible,
html body a.btn.primary:focus-visible{
background:#b89b68!important;
background-color:#b89b68!important;
color:#050505!important;
border-color:#b89b68!important;
}
/* MOGO STABLE V1: product card media preview must stay centered and contained. */
html body .product-card .product-image,
html body[data-page="index"] .ab-products .product-image,
html body[data-page="collection"] .collection-products .product-image,
html body[data-page="new"] .mogo-cat-grid .product-image,
html body[data-page="limited"] .mogo-cat-grid .product-image{
background:#050505!important;
overflow:hidden!important;
}
html body .product-card .product-image img.primary-image,
html body .product-card .product-image img[src],
html body[data-page="index"] .ab-products .product-image img.primary-image,
html body[data-page="index"] .ab-products .product-image img[src]{
width:100%!important;
height:100%!important;
object-fit:contain!important;
object-position:center!important;
background:#050505!important;
transform:none!important;
}
html body .product-card:hover .product-image img.primary-image,
html body[data-page="index"] .ab-products .product-card:hover .product-image img.primary-image{
opacity:1!important;
transform:none!important;
filter:saturate(.96) contrast(1.04) brightness(.96)!important;
}
/* MOGO P0 polish: product detail price should read as warm luxury gold, not sale red. */
html body[data-page="product"] .product-price,
html body[data-page="product"] #prod-price,
html body[data-page="product"] #sticky-price{
color:#b89b68!important;
}
/* MOGO FRONT TIER-3 TYPE READABILITY V1 */
html body:is([data-page="index"],[data-page="new"],[data-page="collection"],[data-page="limited"],[data-page="wishlist"]) .product-title,
html body:is([data-page="index"],[data-page="new"],[data-page="collection"],[data-page="limited"],[data-page="wishlist"]) .mogo-cat-grid .product-title,
html body:is([data-page="index"],[data-page="new"],[data-page="collection"],[data-page="limited"],[data-page="wishlist"]) .ab-products .product-title{
font-size:clamp(13px,.82vw,16px)!important;
line-height:1.5!important;
letter-spacing:.02em!important;
}
html body:is([data-page="index"],[data-page="new"],[data-page="collection"],[data-page="limited"],[data-page="wishlist"]) .price,
html body:is([data-page="index"],[data-page="new"],[data-page="collection"],[data-page="limited"],[data-page="wishlist"]) .mogo-cat-grid .price,
html body:is([data-page="index"],[data-page="new"],[data-page="collection"],[data-page="limited"],[data-page="wishlist"]) .ab-products .price{
font-size:clamp(12px,.72vw,14px)!important;
line-height:1.45!important;
}
html body:is([data-page="index"],[data-page="new"],[data-page="collection"],[data-page="limited"],[data-page="wishlist"]) .ab-collection-row a,
html body:is([data-page="index"],[data-page="new"],[data-page="collection"],[data-page="limited"],[data-page="wishlist"]) .ab-title-row>a,
html body:is([data-page="index"],[data-page="new"],[data-page="collection"],[data-page="limited"],[data-page="wishlist"]) .text-link,
html body:is([data-page="index"],[data-page="new"],[data-page="collection"],[data-page="limited"],[data-page="wishlist"]) .mogo-cat-sort label,
html body:is([data-page="index"],[data-page="new"],[data-page="collection"],[data-page="limited"],[data-page="wishlist"]) .mogo-cat-count,
html body:is([data-page="index"],[data-page="new"],[data-page="collection"],[data-page="limited"],[data-page="wishlist"]) .badge{
font-size:clamp(11px,.68vw,13px)!important;
line-height:1.5!important;
}
html body:is([data-page="index"],[data-page="new"],[data-page="collection"],[data-page="limited"],[data-page="wishlist"]) .ab-hero-copy p,
html body:is([data-page="index"],[data-page="new"],[data-page="collection"],[data-page="limited"],[data-page="wishlist"]) .ab-hero-points,
html body:is([data-page="index"],[data-page="new"],[data-page="collection"],[data-page="limited"],[data-page="wishlist"]) .collection-titlebar p{
font-size:clamp(14px,.82vw,16px)!important;
line-height:1.75!important;
}
html body:is([data-page="index"],[data-page="new"],[data-page="collection"],[data-page="limited"],[data-page="wishlist"]) .ab-kicker,
html body:is([data-page="index"],[data-page="new"],[data-page="collection"],[data-page="limited"],[data-page="wishlist"]) .eyebrow,
html body:is([data-page="index"],[data-page="new"],[data-page="collection"],[data-page="limited"],[data-page="wishlist"]) .subeyebrow{
font-size:clamp(12px,.7vw,14px)!important;
line-height:1.5!important;
}
/* MOGO PRODUCT GRID NARROW VIEW FIX V1 */
@media(max-width:760px){
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) .mogo-cat-grid,
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) #mogo-cat-products.mogo-cat-grid,
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) .mogo-cat-grid[data-density="compact"],
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) .mogo-cat-grid[data-density="standard"],
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) .mogo-cat-grid[data-density="large"]{
grid-template-columns:repeat(2,minmax(150px,1fr))!important;
gap:30px 18px!important;
width:100%!important;
}
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) .mogo-cat-grid .product-card{
min-width:0!important;
width:100%!important;
}
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) .mogo-cat-grid .product-image{
width:100%!important;
min-width:0!important;
aspect-ratio:1 / 1.12!important;
}
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) .mogo-cat-grid .product-title{
font-size:14px!important;
line-height:1.45!important;
word-break:keep-all!important;
overflow-wrap:normal!important;
}
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) .mogo-cat-grid .price{
font-size:13px!important;
}
}
@media(max-width:390px){
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) .mogo-cat-grid,
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) #mogo-cat-products.mogo-cat-grid{
grid-template-columns:1fr!important;
max-width:260px!important;
margin-left:auto!important;
margin-right:auto!important;
}
}
/* MOGO PRODUCT DETAIL PURE BLACK GALLERY V1 */
html body[data-page="product"] .gallery,
html body[data-page="product"] .gallery-main,
html body[data-page="product"] .gallery-main img,
html body[data-page="product"] .thumbs,
html body[data-page="product"] .thumb,
html body[data-page="product"] .thumb img{
background:#000!important;
border-color:#000!important;
box-shadow:none!important;
}
html body[data-page="product"] .gallery-main{
border:0!important;
outline:0!important;
}
html body[data-page="product"] .gallery::before,
html body[data-page="product"] .gallery::after,
html body[data-page="product"] .gallery-main::before,
html body[data-page="product"] .gallery-main::after{
content:none!important;
display:none!important;
}
/* MOGO PRODUCT DETAIL READABILITY TYPE V1 */
html body[data-page="product"] .product-copy h1{
font-size:clamp(34px,2.8vw,52px)!important;
line-height:1.12!important;
}
html body[data-page="product"] #prod-short,
html body[data-page="product"] .product-copy p,
html body[data-page="product"] .acc .body,
html body[data-page="product"] .rich-copy,
html body[data-page="product"] .spec-table,
html body[data-page="product"] .purchase-trust span{
font-size:clamp(15px,.9vw,17px)!important;
line-height:1.75!important;
}
html body[data-page="product"] .field-label,
html body[data-page="product"] .field label,
html body[data-page="product"] .qty-row label,
html body[data-page="product"] .eyebrow{
font-size:13px!important;
line-height:1.5!important;
letter-spacing:.1em!important;
}
html body[data-page="product"] .product-price{
font-size:clamp(24px,1.55vw,30px)!important;
line-height:1.35!important;
}
html body[data-page="product"] .btn,
html body[data-page="product"] .link-button,
html body[data-page="product"] .fit-buttons button,
html body[data-page="product"] .acc button{
font-size:15px!important;
line-height:1.45!important;
}
html body[data-page="product"] .similar-style{
width:64px!important;
height:64px!important;
}
html body[data-page="product"] .detail-two h2,
html body[data-page="product"] .carousel-heading h2,
html body[data-page="product"] .brand-mini h2{
font-size:clamp(32px,2.2vw,44px)!important;
line-height:1.16!important;
}
html body[data-page="product"] .product-grid.compact .product-title{
font-size:15px!important;
line-height:1.5!important;
}
html body[data-page="product"] .product-grid.compact .price{
font-size:13px!important;
}
@media(max-width:760px){
html body[data-page="product"] .product-copy h1{font-size:32px!important;}
html body[data-page="product"] #prod-short,
html body[data-page="product"] .product-copy p,
html body[data-page="product"] .acc .body,
html body[data-page="product"] .rich-copy,
html body[data-page="product"] .spec-table{font-size:15px!important;}
}
/* MOGO FRONT PRODUCT BADGE READABLE V1 */
html body .product-card .badge,
html body .ab-products .badge,
html body .mogo-cat-grid .badge,
html body .product-grid .badge{
font-size:12px!important;
line-height:1.4!important;
letter-spacing:.08em!important;
color:#f2f2f2!important;
background:transparent!important;
border:0!important;
box-shadow:none!important;
padding:0!important;
}
html body .product-card:hover .badge,
html body .ab-products .product-card:hover .badge,
html body .mogo-cat-grid .product-card:hover .badge,
html body .product-grid .product-card:hover .badge{
color:#b89b68!important;
}
@media(max-width:760px){
html body .product-card .badge,
html body .ab-products .badge,
html body .mogo-cat-grid .badge,
html body .product-grid .badge{
font-size:11px!important;
}
}
/* MOGO FRONT PRODUCT BADGE XL V2 */
html body .product-card .badge,
html body .ab-products .badge,
html body .mogo-cat-grid .badge,
html body .product-grid .badge{
font-size:28px!important;
line-height:1.15!important;
letter-spacing:.04em!important;
color:#f2f2f2!important;
background:transparent!important;
border:0!important;
box-shadow:none!important;
padding:0!important;
}
html body .product-card:hover .badge,
html body .ab-products .product-card:hover .badge,
html body .mogo-cat-grid .product-card:hover .badge,
html body .product-grid .product-card:hover .badge{
color:#b89b68!important;
}
@media(max-width:760px){
html body .product-card .badge,
html body .ab-products .badge,
html body .mogo-cat-grid .badge,
html body .product-grid .badge{
font-size:22px!important;
}
}
/* MOGO P0 CART CLICK SAFETY V1 */
html body[data-page="product"] .sticky-buy{
visibility:hidden!important;
pointer-events:none!important;
}
html body[data-page="product"] .sticky-buy.show{
visibility:visible!important;
pointer-events:auto!important;
}
html body[data-page="product"] #buy-btn,
html body[data-page="product"] #sticky-add{
cursor:pointer!important;
pointer-events:auto!important;
}
/* MOGO HEADER ICON SPACING FIX V1 */
html body #site-chrome .site-header .header-actions,
html body .site-header .header-actions{
display:flex!important;
align-items:center!important;
justify-content:flex-end!important;
gap:14px!important;
min-width:240px!important;
}
html body #site-chrome .site-header .header-actions .icon-btn,
html body .site-header .header-actions .icon-btn{
width:38px!important;
height:38px!important;
min-width:38px!important;
flex:0 0 38px!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
padding:0!important;
margin:0!important;
}
html body #site-chrome .site-header .header-actions .icon-btn::before,
html body .site-header .header-actions .icon-btn::before{
left:50%!important;
top:50%!important;
transform:translate(-50%,-50%)!important;
}
html body #site-chrome .site-header .header-actions .count-badge,
html body .site-header .header-actions .count-badge{
right:-5px!important;
top:-5px!important;
}
@media(max-width:1100px){
html body #site-chrome .site-header .header-actions,
html body .site-header .header-actions{
gap:10px!important;
min-width:auto!important;
}
}
@media(max-width:760px){
html body #site-chrome .site-header .header-actions,
html body .site-header .header-actions{
gap:8px!important;
}
html body #site-chrome .site-header .header-actions .icon-btn,
html body .site-header .header-actions .icon-btn{
width:34px!important;
height:34px!important;
min-width:34px!important;
flex-basis:34px!important;
}
}
/* MOGO HEADER ICON SPACING FIX V2 - reset legacy per-icon constraints */
html body #site-chrome .site-header .header-actions > *,
html body .site-header .header-actions > *{
position:relative!important;
left:auto!important;
right:auto!important;
top:auto!important;
bottom:auto!important;
transform:none!important;
margin:0!important;
order:initial!important;
}
html body #site-chrome .site-header .header-actions .icon-btn,
html body .site-header .header-actions .icon-btn{
width:38px!important;
min-width:38px!important;
max-width:38px!important;
height:38px!important;
min-height:38px!important;
max-height:38px!important;
flex:0 0 38px!important;
line-height:1!important;
}
html body #site-chrome .site-header .header-actions .mobile-toggle{order:1!important;}
html body #site-chrome .site-header #search-action{order:2!important;}
html body #site-chrome .site-header .account-action{order:3!important;}
html body #site-chrome .site-header .wishlist-action{order:4!important;}
html body #site-chrome .site-header .country-action{order:5!important;}
html body #site-chrome .site-header #cart-action{order:6!important;}
@media(max-width:760px){
html body #site-chrome .site-header .header-actions .icon-btn,
html body .site-header .header-actions .icon-btn{
width:34px!important;
min-width:34px!important;
max-width:34px!important;
height:34px!important;
min-height:34px!important;
max-height:34px!important;
flex-basis:34px!important;
}
}
/* MOGO CART BUTTON COLOR ALIGN V1 - match newsletter CTA logic */
html body[data-page="cart"] .empty-state .btn.primary,
html body[data-page="cart"] .cart-summary .btn.primary,
html body .cart-drawer .btn.primary{
background:#050505!important;
color:#b89b68!important;
border:1px solid #b89b68!important;
box-shadow:none!important;
}
html body[data-page="cart"] .empty-state .btn.primary:hover,
html body[data-page="cart"] .cart-summary .btn.primary:hover,
html body .cart-drawer .btn.primary:hover{
background:#b89b68!important;
color:#050505!important;
border-color:#b89b68!important;
}
/* MOGO HEADER ICON FIXED GAP V3 */
html body #site-chrome .site-header .header-actions,
html body .site-header .header-actions{
gap:14px!important;
}
html body #site-chrome .site-header .header-actions .icon-btn,
html body .site-header .header-actions .icon-btn{
width:38px!important;
min-width:38px!important;
max-width:38px!important;
height:38px!important;
min-height:38px!important;
max-height:38px!important;
flex:0 0 38px!important;
}
html body #site-chrome .site-header .header-actions .count-badge,
html body .site-header .header-actions .count-badge{
position:absolute!important;
right:-6px!important;
top:-5px!important;
transform:none!important;
}
@media(max-width:1100px){
html body #site-chrome .site-header .header-actions,
html body .site-header .header-actions{gap:14px!important;}
}
@media(max-width:760px){
html body #site-chrome .site-header .header-actions,
html body .site-header .header-actions{gap:14px!important;}
html body #site-chrome .site-header .header-actions .icon-btn,
html body .site-header .header-actions .icon-btn{
width:38px!important;
min-width:38px!important;
max-width:38px!important;
height:38px!important;
min-height:38px!important;
max-height:38px!important;
flex-basis:38px!important;
}
}
/* MOGO HEADER VERTICAL ALIGN V4 - keep fixed gap, align icons with nav text */
html body #site-chrome .site-header .header-row,
html body .site-header .header-row{
align-items:center!important;
}
html body #site-chrome .site-header .desktop-nav,
html body .site-header .desktop-nav,
html body #site-chrome .site-header .header-actions,
html body .site-header .header-actions{
height:100%!important;
display:flex!important;
align-items:center!important;
}
html body #site-chrome .site-header .nav-link,
html body .site-header .nav-link{
display:flex!important;
align-items:center!important;
height:100%!important;
padding-top:0!important;
padding-bottom:0!important;
line-height:1!important;
}
html body #site-chrome .site-header .header-actions .icon-btn,
html body .site-header .header-actions .icon-btn{
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
vertical-align:middle!important;
}
/* MOGO HEADER ICON VISUAL SCALE V5 - larger glyphs, fixed layout */
html body #site-chrome .site-header .header-actions .icon-btn::before,
html body .site-header .header-actions .icon-btn::before{
font-size:24px!important;
line-height:1!important;
transform:translate(-50%,-50%) scale(1.18)!important;
transform-origin:center!important;
}
html body #site-chrome .site-header .header-actions .mobile-toggle::before,
html body .site-header .header-actions .mobile-toggle::before{
font-size:26px!important;
}
html body #site-chrome .site-header #search-action::before,
html body .site-header #search-action::before,
html body #site-chrome .site-header .account-action::before,
html body .site-header .account-action::before,
html body #site-chrome .site-header .wishlist-action::before,
html body .site-header .wishlist-action::before,
html body #site-chrome .site-header .country-action::before,
html body .site-header .country-action::before,
html body #site-chrome .site-header #cart-action::before,
html body .site-header #cart-action::before{
font-size:24px!important;
}
/* MOGO HEADER ICON TRUE CENTER V6 - no translated glyphs */
html body #site-chrome .site-header .header-actions .icon-btn::before,
html body .site-header .header-actions .icon-btn::before{
width:24px!important;
height:24px!important;
flex:0 0 24px!important;
background-size:24px 24px!important;
background-position:center center!important;
transform:none!important;
margin:0!important;
}
html body #site-chrome .site-header #mobile-menu::before,
html body .site-header #mobile-menu::before{
width:24px!important;
height:24px!important;
flex-basis:24px!important;
background-size:24px 24px!important;
}
html body #site-chrome .site-header .wishlist-action::before,
html body .site-header .wishlist-action::before,
html body #site-chrome .site-header #cart-action::before,
html body .site-header #cart-action::before{
width:25px!important;
height:25px!important;
flex-basis:25px!important;
background-size:25px 25px!important;
}
html body #site-chrome .site-header .header-actions .icon-btn:hover::before,
html body .site-header .header-actions .icon-btn:hover::before{
transform:none!important;
}
/* MOGO HEADER ICON FINAL CENTER V7 */
html body #site-chrome .site-header #mobile-menu::before,
html body #site-chrome .site-header #search-action::before,
html body #site-chrome .site-header .account-action::before,
html body #site-chrome .site-header .wishlist-action::before,
html body #site-chrome .site-header .country-action::before,
html body #site-chrome .site-header #cart-action::before{
display:block!important;
width:24px!important;
height:24px!important;
flex:0 0 24px!important;
background-size:24px 24px!important;
background-position:center center!important;
transform:none!important;
}
/* MOGO MOBILE HEADER RECOVERY V8 - stop desktop nav overflow on phones */
@media(max-width:760px){
html,
body{
max-width:100%!important;
overflow-x:hidden!important;
}
html body #site-chrome .site-header,
html body .site-header{
height:68px!important;
overflow:visible!important;
}
html body #site-chrome .site-header .header-row,
html body .site-header .header-row{
width:calc(100% - 28px)!important;
max-width:100%!important;
display:flex!important;
align-items:center!important;
justify-content:space-between!important;
gap:12px!important;
margin:0 auto!important;
}
html body #site-chrome .site-header .brand,
html body .site-header .brand{
flex:0 0 auto!important;
min-width:0!important;
}
html body #site-chrome .site-header .brand img,
html body .site-header .brand img{
width:126px!important;
height:auto!important;
max-width:126px!important;
object-fit:contain!important;
}
html body #site-chrome .site-header .desktop-nav,
html body .site-header .desktop-nav,
html body #site-chrome .site-header .mega,
html body .site-header .mega{
display:none!important;
visibility:hidden!important;
pointer-events:none!important;
}
html body #site-chrome .site-header .header-actions,
html body .site-header .header-actions{
flex:0 0 auto!important;
min-width:0!important;
width:auto!important;
height:68px!important;
display:flex!important;
align-items:center!important;
justify-content:flex-end!important;
gap:14px!important;
}
html body #site-chrome .site-header .wishlist-action,
html body #site-chrome .site-header .country-action,
html body .site-header .wishlist-action,
html body .site-header .country-action{
display:none!important;
}
html body #site-chrome .site-header .header-actions .icon-btn,
html body .site-header .header-actions .icon-btn{
width:38px!important;
min-width:38px!important;
max-width:38px!important;
height:38px!important;
min-height:38px!important;
max-height:38px!important;
flex:0 0 38px!important;
}
}
/* MOGO MOBILE HEADER COMPACT V9 - stronger hide for secondary icons */
@media(max-width:760px){
html body #site-chrome .site-header .header-actions .icon-btn.wishlist-action,
html body #site-chrome .site-header .header-actions .icon-btn.country-action,
html body .site-header .header-actions .icon-btn.wishlist-action,
html body .site-header .header-actions .icon-btn.country-action{
display:none!important;
width:0!important;
min-width:0!important;
max-width:0!important;
flex:0 0 0!important;
margin:0!important;
padding:0!important;
overflow:hidden!important;
}
}
/* MOGO PRODUCT QUICK ICON CENTER V1 - keep circle size, enlarge inner glyph only */
html body .product-card .quick-add,
html body .product-card .quick-wish,
html body .mogo-cat-grid .product-card .quick-add,
html body .mogo-cat-grid .product-card .quick-wish,
html body .collection-products .product-card .quick-add,
html body .collection-products .product-card .quick-wish{
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
line-height: 1 !important;
text-align: center !important;
font-family: Arial, Helvetica, sans-serif !important;
}
html body .product-card .quick-wish,
html body .mogo-cat-grid .product-card .quick-wish,
html body .collection-products .product-card .quick-wish{
font-size: 18px !important;
font-weight: 400 !important;
}
html body .product-card .quick-add,
html body .mogo-cat-grid .product-card .quick-add,
html body .collection-products .product-card .quick-add{
font-size: 22px !important;
font-weight: 300 !important;
padding-bottom: 1px !important;
}
/* MOGO PRODUCT BADGE SCALE FIX V1 */
html body .product-card .badge,
html body .ab-products .product-card .badge,
html body .mogo-cat-grid .product-card .badge,
html body .product-grid .product-card .badge{
top: 14px !important;
left: 14px !important;
right: auto !important;
bottom: auto !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: auto !important;
height: auto !important;
min-width: 0 !important;
min-height: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
color: #f4efe5 !important;
font-size: 11px !important;
line-height: 1 !important;
font-weight: 600 !important;
letter-spacing: .08em !important;
text-transform: uppercase !important;
transform: none !important;
}
html body .product-card:hover .badge,
html body .ab-products .product-card:hover .badge,
html body .mogo-cat-grid .product-card:hover .badge,
html body .product-grid .product-card:hover .badge{
color: #b89b68 !important;
background: transparent !important;
border: 0 !important;
}
/* MOGO PRODUCT DETAIL LAYOUT BALANCE V1 */
html body[data-page="product"] .product-layout{
display: grid !important;
grid-template-columns: minmax(0, 1.12fr) minmax(460px, .88fr) !important;
gap: clamp(44px, 4vw, 72px) !important;
align-items: start !important;
overflow: visible !important;
}
html body[data-page="product"] .gallery,
html body[data-page="product"] .product-copy{
min-width: 0 !important;
}
html body[data-page="product"] .gallery-main{
width: 100% !important;
height: min(74vh, 820px) !important;
min-height: 620px !important;
aspect-ratio: auto !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
overflow: hidden !important;
}
html body[data-page="product"] .gallery-main img{
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
object-position: center center !important;
}
html body[data-page="product"] .product-copy{
width: 100% !important;
max-width: 640px !important;
justify-self: start !important;
}
html body[data-page="product"] .inline-input{
grid-template-columns: minmax(0,1fr) auto !important;
width: 100% !important;
}
html body[data-page="product"] .inline-input .input{
min-width: 0 !important;
}
html body[data-page="product"] .breadcrumbs{
gap: 10px !important;
}
@media(max-width:980px){
html body[data-page="product"] .product-layout{
grid-template-columns: 1fr !important;
gap: 28px !important;
}
html body[data-page="product"] .gallery-main{
height: auto !important;
min-height: 0 !important;
aspect-ratio: 1 / 1 !important;
}
html body[data-page="product"] .product-copy{
max-width: none !important;
}
}
/* MOGO MEGA MENU HOVER BUFFER V1 */
html body .nav-item{
position: relative !important;
}
html body .nav-item::after{
content: "" !important;
position: absolute !important;
left: -24px !important;
right: -24px !important;
top: 100% !important;
height: 24px !important;
display: block !important;
background: transparent !important;
pointer-events: auto !important;
}
html body .mega{
top: calc(100% + 14px) !important;
transition: opacity .22s ease, transform .22s ease, visibility 0s linear .18s !important;
visibility: hidden !important;
}
html body .nav-item:hover .mega,
html body .mega:hover{
opacity: 1 !important;
pointer-events: auto !important;
visibility: visible !important;
transform: translateX(-50%) translateY(0) !important;
transition-delay: 0s !important;
}
html body .nav-item:not(:hover) .mega:not(:hover){
opacity: 0 !important;
pointer-events: none !important;
visibility: hidden !important;
transform: translateX(-50%) translateY(8px) !important;
transition-delay: .16s !important;
}
/* MOGO MEGA MENU USABLE HOVER V2 - no right-click pin needed */
html body .desktop-nav .nav-item{
position: relative !important;
}
html body .desktop-nav .nav-item::after{
content: "" !important;
position: absolute !important;
left: -36px !important;
right: -36px !important;
top: 100% !important;
height: 56px !important;
display: block !important;
background: transparent !important;
pointer-events: auto !important;
z-index: 79 !important;
}
html body .desktop-nav .mega{
top: calc(100% + 2px) !important;
z-index: 90 !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
transform: translateX(-50%) translateY(8px) !important;
transition: opacity .2s ease .28s, transform .2s ease .28s, visibility 0s linear .28s !important;
}
html body .desktop-nav .nav-item:hover .mega,
html body .desktop-nav .nav-item:focus-within .mega,
html body .desktop-nav .mega:hover{
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
transform: translateX(-50%) translateY(0) !important;
transition-delay: 0s !important;
}
html body .desktop-nav .mega a,
html body .desktop-nav .mega button{
pointer-events: auto !important;
}
/* MOGO MEGA MENU USABLE HOVER V2B - override old hide rule */
html body .desktop-nav .nav-item:not(:hover) .mega:not(:hover):not(:focus-within){
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
transform: translateX(-50%) translateY(8px) !important;
transition: opacity .2s ease .32s, transform .2s ease .32s, visibility 0s linear .32s !important;
}
html body .desktop-nav .nav-item:hover::after,
html body .desktop-nav .nav-item:focus-within::after{
height: 70px !important;
}
/* MOGO HEADER BREATHING SPACE V1 */
html body .site-header{
height: 82px !important;
}
html body .header-row{
height: 82px !important;
align-items: center !important;
}
html body .desktop-nav{
height: 82px !important;
align-items: center !important;
}
html body .desktop-nav .nav-link{
padding-top: 0 !important;
padding-bottom: 0 !important;
height: 82px !important;
display: inline-flex !important;
align-items: center !important;
}
html body .header-actions{
height: 82px !important;
align-items: center !important;
}
html body .desktop-nav .mega{
top: calc(100% + 8px) !important;
}
html body .desktop-nav .nav-item::after{
top: 100% !important;
height: 64px !important;
}
/* MOGO HEADER BREATHING SPACE V2 - override compact header */
@media(min-width:761px){
html body .site-header{
height: 82px !important;
min-height: 82px !important;
}
html body .site-header > .container.header-row,
html body .site-header .header-row,
html body .container.header-row{
height: 82px !important;
min-height: 82px !important;
align-items: center !important;
}
html body .site-header .desktop-nav,
html body .site-header .header-actions{
height: 82px !important;
min-height: 82px !important;
align-items: center !important;
}
html body .site-header .desktop-nav .nav-link{
height: 82px !important;
min-height: 82px !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
display: inline-flex !important;
align-items: center !important;
}
html body .site-header .brand{
height: 82px !important;
display: flex !important;
align-items: center !important;
}
}
/* MOGO CUSTOM LUXURY PAGE V1 */
html body[data-page="custom"] .mogo-custom-luxury{
background:#000 !important;
color:#f4efe5 !important;
}
/* Dynamic community rail: feed-driven cards with real controls and native mouse/touch scrolling. */
html body[data-page="product"] .product-community{padding-left:0!important;padding-right:0!important;overflow:hidden!important}
html body[data-page="product"] .product-community::before,html body[data-page="product"] .product-community::after{display:none!important}
html body[data-page="product"] .product-community .community-viewport{position:relative;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;scroll-snap-type:x mandatory;scrollbar-width:none;padding:0 72px}
html body[data-page="product"] .product-community .community-viewport::-webkit-scrollbar{display:none}
html body[data-page="product"] .product-community .community-grid{display:flex!important;width:max-content!important;max-width:none!important;min-width:max-content!important;gap:12px!important;animation:none!important;transform:none!important}
html body[data-page="product"] .product-community .community-card{display:block;flex:0 0 calc((100vw - 176px) / 6);width:calc((100vw - 176px) / 6);scroll-snap-align:start;overflow:hidden}
html body[data-page="product"] .product-community .community-card img{display:block;width:100%!important;max-width:none!important;height:calc((100vw - 176px) / 6);object-fit:cover}
html body[data-page="product"] .product-community .community-arrow{position:sticky;top:50%;z-index:2;width:42px;height:42px;margin-top:calc((100vw - 176px) / -12);border:1px solid rgba(245,240,230,.9);border-radius:50%;background:rgba(0,0,0,.72);color:#f5f0e6;font:32px/36px Georgia,serif;cursor:pointer}
html body[data-page="product"] .product-community .community-arrow-prev{left:12px;transform:translateX(-60px)}
html body[data-page="product"] .product-community .community-arrow-next{right:12px;transform:translateX(60px)}
html body[data-page="product"] .product-community .community-arrow:hover,html body[data-page="product"] .product-community .community-arrow:focus-visible{background:#f5f0e6;color:#111;outline:2px solid #c79a43;outline-offset:2px}
@media(max-width:760px){html body[data-page="product"] .product-community .community-viewport{padding:0 42px}html body[data-page="product"] .product-community .community-card{flex-basis:78vw;width:78vw}html body[data-page="product"] .product-community .community-card img{height:78vw}html body[data-page="product"] .product-community .community-arrow-prev{transform:translateX(-34px)}html body[data-page="product"] .product-community .community-arrow-next{transform:translateX(34px)}}
/* Community gallery V3: three large, equal tiles per desktop view; controls stay outside the images. */
html body[data-page="product"] .product-community .community-viewport{overflow:visible;padding:0 88px}
html body[data-page="product"] .product-community .community-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));width:100%!important;min-width:0!important;gap:14px!important;transition:opacity .16s ease;animation:none!important;transform:none!important}
html body[data-page="product"] .product-community .community-grid.community-grid-changing{opacity:0}
html body[data-page="product"] .product-community .community-card{width:auto;min-width:0;display:block;aspect-ratio:1/1;overflow:hidden}
html body[data-page="product"] .product-community .community-card{position:relative;background:#0d0d0d;border:1px solid rgba(218,190,125,.18)}
html body[data-page="product"] .product-community .community-card img{width:100%!important;height:100%!important;object-fit:cover;object-position:center;transition:transform .55s ease,filter .55s ease}
html body[data-page="product"] .product-community .community-card-label{position:absolute;right:0;bottom:0;left:0;padding:28px 12px 10px;background:linear-gradient(transparent,rgba(0,0,0,.82));color:#f6efe3;font:11px/1.2 Arial,sans-serif;letter-spacing:.06em;opacity:0;transform:translateY(6px);transition:opacity .3s ease,transform .3s ease}
html body[data-page="product"] .product-community .community-card:hover img{transform:scale(1.04);filter:brightness(.82)}
html body[data-page="product"] .product-community .community-card:hover .community-card-label,html body[data-page="product"] .product-community .community-card:focus-visible .community-card-label{opacity:1;transform:none}
html body[data-page="product"] .product-community .community-arrow{position:absolute;top:50%;margin:0;transform:translateY(-50%);width:38px;height:38px;font-size:28px;line-height:32px}
html body[data-page="product"] .product-community .community-arrow-prev{left:22px}
html body[data-page="product"] .product-community .community-arrow-next{right:22px}
@media(max-width:760px){html body[data-page="product"] .product-community .community-viewport{padding:0 48px;overflow:hidden}html body[data-page="product"] .product-community .community-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}html body[data-page="product"] .product-community .community-card{width:auto;flex-basis:auto}html body[data-page="product"] .product-community .community-arrow-prev{left:8px;transform:translateY(-50%)}html body[data-page="product"] .product-community .community-arrow-next{right:8px;transform:translateY(-50%)}}
/* Product community: curated studio gallery without duplicated tiles. */
html body[data-page="product"] .product-community{
padding-left:0 !important;
padding-right:0 !important;
}
html body[data-page="product"] .product-community::before,
html body[data-page="product"] .product-community::after{
display:none !important;
}
html body[data-page="product"] .product-community .community-grid{
display:grid !important;
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
width:100% !important;
min-width:0 !important;
animation:none !important;
transform:none !important;
overflow:visible !important;
}
html body[data-page="product"] .product-community .community-grid img{
width:100% !important;
max-width:none !important;
height:clamp(240px,24vw,390px) !important;
}
@media(max-width:760px){
html body[data-page="product"] .product-community{
padding-left:0 !important;
padding-right:0 !important;
}
html body[data-page="product"] .product-community .community-grid{
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
}
html body[data-page="product"] .product-community .community-grid img{
height:48vw !important;
}
}
html body[data-page="custom"] .custom-container{
width:min(1520px, calc(100% - 96px)) !important;
margin:0 auto !important;
}
html body[data-page="custom"] .custom-atelier-hero{
min-height:calc(100vh - 82px) !important;
display:grid !important;
grid-template-columns:minmax(420px,.82fr) minmax(0,1.18fr) !important;
align-items:center !important;
gap:clamp(56px,6vw,120px) !important;
padding:clamp(76px,8vw,132px) clamp(48px,5vw,96px) !important;
border-bottom:1px solid rgba(184,155,104,.16) !important;
}
html body[data-page="custom"] .custom-atelier-copy{
max-width:620px !important;
justify-self:end !important;
}
html body[data-page="custom"] .custom-kicker{
color:#b89b68 !important;
font-size:13px !important;
letter-spacing:.22em !important;
text-transform:uppercase !important;
margin:0 0 24px !important;
}
html body[data-page="custom"] .custom-atelier-copy h1{
margin:0 !important;
font-family:Georgia,'Times New Roman',serif !important;
font-size:clamp(52px,5vw,92px) !important;
line-height:.98 !important;
font-weight:400 !important;
letter-spacing:0 !important;
}
html body[data-page="custom"] .custom-lede,
html body[data-page="custom"] .custom-editorial-copy p,
html body[data-page="custom"] .custom-request-story p{
color:#bdb6aa !important;
font-size:18px !important;
line-height:1.85 !important;
}
html body[data-page="custom"] .custom-atelier-media{
margin:0 !important;
height:min(72vh,760px) !important;
overflow:hidden !important;
background:#020202 !important;
}
html body[data-page="custom"] .custom-atelier-media img{
width:100% !important;
height:100% !important;
object-fit:cover !important;
object-position:center !important;
display:block !important;
}
html body[data-page="custom"] .luxury-link-row{
margin-top:42px !important;
display:flex !important;
gap:34px !important;
flex-wrap:wrap !important;
}
html body[data-page="custom"] .luxury-text-link{
color:#f4efe5 !important;
text-decoration:none !important;
text-transform:uppercase !important;
letter-spacing:.16em !important;
font-size:13px !important;
border-bottom:1px solid rgba(244,239,229,.72) !important;
padding-bottom:9px !important;
}
html body[data-page="custom"] .luxury-text-link:hover{
color:#b89b68 !important;
border-color:#b89b68 !important;
}
html body[data-page="custom"] .custom-signature-strip,
html body[data-page="custom"] .custom-process,
html body[data-page="custom"] .custom-request,
html body[data-page="custom"] .custom-gallery{
padding:clamp(72px,7vw,120px) 0 !important;
background:#000 !important;
border-bottom:1px solid rgba(184,155,104,.12) !important;
}
html body[data-page="custom"] .custom-signature-grid{
display:grid !important;
grid-template-columns:repeat(4,minmax(0,1fr)) !important;
gap:1px !important;
background:rgba(184,155,104,.16) !important;
}
html body[data-page="custom"] .custom-signature-grid article,
html body[data-page="custom"] .luxury-process-grid article{
background:#050505 !important;
padding:34px !important;
min-height:210px !important;
}
html body[data-page="custom"] .custom-signature-grid span,
html body[data-page="custom"] .luxury-process-grid strong{
color:#b89b68 !important;
font-family:Georgia,'Times New Roman',serif !important;
font-size:30px !important;
font-weight:400 !important;
}
html body[data-page="custom"] .custom-signature-grid b,
html body[data-page="custom"] .luxury-process-grid h3{
display:block !important;
margin:22px 0 10px !important;
color:#f4efe5 !important;
font-size:21px !important;
}
html body[data-page="custom"] .custom-signature-grid p,
html body[data-page="custom"] .luxury-process-grid p{
color:#aaa296 !important;
font-size:15px !important;
line-height:1.75 !important;
}
html body[data-page="custom"] .custom-editorial-split{
display:grid !important;
grid-template-columns:1.08fr .92fr !important;
min-height:760px !important;
background:#000 !important;
border-bottom:1px solid rgba(184,155,104,.12) !important;
}
html body[data-page="custom"] .custom-editorial-image img{
width:100% !important;
height:100% !important;
object-fit:cover !important;
display:block !important;
}
html body[data-page="custom"] .custom-editorial-copy{
padding:clamp(70px,7vw,128px) !important;
align-self:center !important;
}
html body[data-page="custom"] .custom-editorial-copy h2,
html body[data-page="custom"] .custom-request-story h2,
html body[data-page="custom"] .custom-section-head h2{
color:#f4efe5 !important;
font-family:Georgia,'Times New Roman',serif !important;
font-size:clamp(38px,3.4vw,64px) !important;
line-height:1.06 !important;
font-weight:400 !important;
margin:0 0 26px !important;
}
html body[data-page="custom"] .custom-editorial-copy ul{
margin:30px 0 0 !important;
padding:0 !important;
list-style:none !important;
}
html body[data-page="custom"] .custom-editorial-copy li{
border-top:1px solid rgba(184,155,104,.18) !important;
padding:15px 0 !important;
color:#d9d0c0 !important;
font-size:16px !important;
}
html body[data-page="custom"] .custom-section-head{
display:grid !important;
grid-template-columns:1fr auto 1fr !important;
align-items:center !important;
gap:28px !important;
margin-bottom:42px !important;
}
html body[data-page="custom"] .custom-section-head span{
height:1px !important;
background:rgba(184,155,104,.28) !important;
}
html body[data-page="custom"] .custom-section-head h2{
font-size:clamp(28px,2.4vw,44px) !important;
margin:0 !important;
white-space:nowrap !important;
}
html body[data-page="custom"] .luxury-process-grid{
display:grid !important;
grid-template-columns:repeat(5,minmax(0,1fr)) !important;
gap:1px !important;
background:rgba(184,155,104,.16) !important;
}
html body[data-page="custom"] .luxury-process-grid small{
display:block !important;
color:#8f7a55 !important;
margin-top:8px !important;
letter-spacing:.16em !important;
}
html body[data-page="custom"] .custom-request-grid{
display:grid !important;
grid-template-columns:minmax(0,.92fr) minmax(460px,.78fr) !important;
gap:clamp(48px,5vw,88px) !important;
align-items:start !important;
}
html body[data-page="custom"] .luxury-request-story{
border:1px solid rgba(184,155,104,.18) !important;
background:#050505 !important;
}
html body[data-page="custom"] .luxury-request-story img{
width:100% !important;
height:520px !important;
object-fit:cover !important;
display:block !important;
background:#000 !important;
}
html body[data-page="custom"] .luxury-request-story div{
padding:42px !important;
}
html body[data-page="custom"] .luxury-form{
background:#050505 !important;
border:1px solid rgba(184,155,104,.22) !important;
padding:42px !important;
}
html body[data-page="custom"] .luxury-form label{
color:#cfc5b6 !important;
font-size:13px !important;
letter-spacing:.08em !important;
text-transform:uppercase !important;
}
html body[data-page="custom"] .luxury-form .input,
html body[data-page="custom"] .luxury-form .select,
html body[data-page="custom"] .luxury-form textarea{
margin-top:9px !important;
background:#000 !important;
border:1px solid rgba(184,155,104,.22) !important;
color:#f4efe5 !important;
}
html body[data-page="custom"] .luxury-submit{
background:#000 !important;
border-color:#b89b68 !important;
color:#b89b68 !important;
min-height:56px !important;
}
html body[data-page="custom"] .luxury-submit:hover{
background:#b89b68 !important;
color:#050505 !important;
}
html body[data-page="custom"] .luxury-gallery-grid{
display:grid !important;
grid-template-columns:repeat(6,minmax(0,1fr)) !important;
gap:18px !important;
}
html body[data-page="custom"] .luxury-gallery-grid figure{
margin:0 !important;
background:#050505 !important;
}
html body[data-page="custom"] .luxury-gallery-grid img{
width:100% !important;
aspect-ratio:1 / 1.18 !important;
object-fit:contain !important;
display:block !important;
}
html body[data-page="custom"] .luxury-gallery-grid figcaption{
color:#d8cfbf !important;
text-align:center !important;
padding:14px 6px 20px !important;
font-size:14px !important;
}
@media(max-width:980px){
html body[data-page="custom"] .custom-atelier-hero,
html body[data-page="custom"] .custom-editorial-split,
html body[data-page="custom"] .custom-request-grid{
grid-template-columns:1fr !important;
}
html body[data-page="custom"] .custom-atelier-copy{
justify-self:start !important;
}
html body[data-page="custom"] .custom-signature-grid,
html body[data-page="custom"] .luxury-process-grid,
html body[data-page="custom"] .luxury-gallery-grid{
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
}
}
@media(max-width:620px){
html body[data-page="custom"] .custom-container{
width:calc(100% - 32px) !important;
}
html body[data-page="custom"] .custom-atelier-hero{
padding:48px 18px !important;
}
html body[data-page="custom"] .custom-signature-grid,
html body[data-page="custom"] .luxury-process-grid,
html body[data-page="custom"] .luxury-gallery-grid{
grid-template-columns:1fr !important;
}
html body[data-page="custom"] .custom-editorial-copy,
html body[data-page="custom"] .luxury-form,
html body[data-page="custom"] .luxury-request-story div{
padding:28px !important;
}
}
/* MOGO CUSTOM EUROPEAN EDITORIAL HERO V2 */
html body[data-page="custom"] .custom-atelier-hero{
grid-template-columns:minmax(560px,.92fr) minmax(0,1.08fr) !important;
gap:clamp(64px,7vw,138px) !important;
padding:clamp(82px,7.2vw,124px) clamp(72px,7vw,132px) !important;
}
html body[data-page="custom"] .custom-atelier-copy{
max-width:760px !important;
justify-self:center !important;
}
html body[data-page="custom"] .custom-atelier-copy h1{
color:#f6ead6 !important;
font-family:Georgia,'Times New Roman',serif !important;
font-size:clamp(72px,6.8vw,132px) !important;
line-height:.92 !important;
font-weight:700 !important;
letter-spacing:0 !important;
margin:0 0 24px !important;
}
html body[data-page="custom"] .custom-atelier-copy .custom-lede{
max-width:720px !important;
color:#f0e8dc !important;
font-size:clamp(18px,1.18vw,22px) !important;
line-height:1.55 !important;
margin:0 !important;
}
html body[data-page="custom"] .custom-cn-note{
margin:16px 0 0 !important;
color:#9e9588 !important;
font-size:15px !important;
line-height:1.7 !important;
letter-spacing:.02em !important;
}
html body[data-page="custom"] .custom-kicker{
color:#b89b68 !important;
font-size:14px !important;
letter-spacing:.28em !important;
font-weight:600 !important;
}
html body[data-page="custom"] .luxury-link-row{
margin-top:48px !important;
gap:42px !important;
}
html body[data-page="custom"] .luxury-text-link{
font-size:14px !important;
letter-spacing:.18em !important;
color:#fff !important;
border-bottom-color:rgba(255,255,255,.78) !important;
padding-bottom:10px !important;
}
html body[data-page="custom"] .custom-atelier-media{
height:min(76vh,820px) !important;
max-width:760px !important;
justify-self:start !important;
}
html body[data-page="custom"] .custom-atelier-media img{
object-fit:cover !important;
filter:contrast(1.04) saturate(1.02) !important;
}
@media(max-width:1180px){
html body[data-page="custom"] .custom-atelier-hero{
grid-template-columns:1fr !important;
padding:72px 42px !important;
}
html body[data-page="custom"] .custom-atelier-copy{
max-width:860px !important;
justify-self:start !important;
}
html body[data-page="custom"] .custom-atelier-media{
width:100% !important;
max-width:none !important;
height:520px !important;
}
}
@media(max-width:620px){
html body[data-page="custom"] .custom-atelier-copy h1{
font-size:clamp(48px,14vw,72px) !important;
line-height:.96 !important;
}
html body[data-page="custom"] .custom-atelier-copy .custom-lede{
font-size:17px !important;
}
html body[data-page="custom"] .luxury-link-row{
gap:22px !important;
}
html body[data-page="custom"] .luxury-text-link{
font-size:12px !important;
}
}
/* MOGO CUSTOM REFERENCE WORKS RAIL V1 */
html body[data-page="custom"] .custom-gallery{
overflow:hidden !important;
}
html body[data-page="custom"] .custom-gallery-rail-wrap{
position:relative !important;
width:100% !important;
}
html body[data-page="custom"] .luxury-gallery-grid{
display:flex !important;
grid-template-columns:none !important;
gap:28px !important;
overflow-x:auto !important;
overflow-y:hidden !important;
scroll-behavior:smooth !important;
scroll-snap-type:x mandatory !important;
padding:8px 0 18px !important;
scrollbar-width:none !important;
}
html body[data-page="custom"] .luxury-gallery-grid::-webkit-scrollbar{
display:none !important;
}
html body[data-page="custom"] .luxury-gallery-grid figure{
flex:0 0 clamp(260px, 22vw, 360px) !important;
scroll-snap-align:start !important;
background:#030303 !important;
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:flex-start !important;
overflow:hidden !important;
}
html body[data-page="custom"] .luxury-gallery-grid img{
width:100% !important;
height:clamp(340px, 31vw, 500px) !important;
aspect-ratio:auto !important;
object-fit:contain !important;
object-position:center bottom !important;
display:block !important;
background:#000 !important;
}
html body[data-page="custom"] .luxury-gallery-grid figcaption{
width:100% !important;
min-height:56px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
text-align:center !important;
color:#f0e8dc !important;
padding:16px 10px 20px !important;
font-size:15px !important;
line-height:1.25 !important;
letter-spacing:.02em !important;
}
html body[data-page="custom"] .custom-gallery-arrow{
position:absolute !important;
top:50% !important;
transform:translateY(-50%) !important;
z-index:5 !important;
width:46px !important;
height:80px !important;
border:0 !important;
background:transparent !important;
color:#fff !important;
font-size:46px !important;
line-height:1 !important;
cursor:pointer !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
opacity:.82 !important;
}
html body[data-page="custom"] .custom-gallery-arrow:hover{
color:#b89b68 !important;
opacity:1 !important;
}
html body[data-page="custom"] .custom-gallery-prev{
left:-58px !important;
}
html body[data-page="custom"] .custom-gallery-next{
right:-58px !important;
}
@media(max-width:980px){
html body[data-page="custom"] .custom-gallery-prev{left:4px !important;}
html body[data-page="custom"] .custom-gallery-next{right:4px !important;}
html body[data-page="custom"] .luxury-gallery-grid{
padding-left:54px !important;
padding-right:54px !important;
}
}
/* MOGO CUSTOM REFERENCE TITLE NO LINES V1 */
html body[data-page="custom"] .custom-gallery .custom-section-head{
display:block !important;
text-align:center !important;
margin-bottom:46px !important;
}
html body[data-page="custom"] .custom-gallery .custom-section-head span{
display:none !important;
}
html body[data-page="custom"] .custom-gallery .custom-section-head h2{
display:inline-block !important;
margin:0 !important;
padding:0 !important;
border:0 !important;
}
html body[data-page="custom"] .custom-gallery .custom-section-head h2::before,
html body[data-page="custom"] .custom-gallery .custom-section-head h2::after{
content:none !important;
display:none !important;
}
/* MOGO CUSTOM TYPE REFERENCE SWITCH V1 */
html body[data-page="custom"] #custom-reference-image{
transition: opacity .22s ease, transform .22s ease !important;
}
html body[data-page="custom"] #custom-reference-image.is-changing{
opacity:.28 !important;
transform:scale(.985) !important;
}
html body[data-page="custom"] #custom-reference-title,
html body[data-page="custom"] #custom-reference-desc{
transition: color .2s ease !important;
}
/* MOGO CUSTOM INQUIRY IMAGE NO FRAME V1 */
html body[data-page="custom"] .luxury-request-story,
html body[data-page="custom"] .custom-request-story{
border:0 !important;
outline:0 !important;
box-shadow:none !important;
background:#000 !important;
}
html body[data-page="custom"] .luxury-request-story img,
html body[data-page="custom"] .custom-request-story img,
html body[data-page="custom"] #custom-reference-image{
border:0 !important;
outline:0 !important;
box-shadow:none !important;
background:#000 !important;
}
html body[data-page="custom"] .luxury-request-story div,
html body[data-page="custom"] .custom-request-story div{
background:#000 !important;
border:0 !important;
box-shadow:none !important;
}
/* MOGO CUSTOM REMOVE SECTION HORIZONTAL LINES V1 */
html body[data-page="custom"] .custom-signature-strip,
html body[data-page="custom"] .custom-process,
html body[data-page="custom"] .custom-request,
html body[data-page="custom"] .custom-gallery,
html body[data-page="custom"] .custom-editorial-split,
html body[data-page="custom"] .custom-atelier-hero{
border-top:0 !important;
border-bottom:0 !important;
}
/* MOGO CUSTOM FORM NO OUTER FRAME V1 */
html body[data-page="custom"] .luxury-form,
html body[data-page="custom"] .custom-form{
border:0 !important;
outline:0 !important;
box-shadow:none !important;
background:#000 !important;
}
/* MOGO CUSTOM REFERENCE IMAGE CENTER V1 */
html body[data-page="custom"] .luxury-request-story,
html body[data-page="custom"] .custom-request-story{
display:flex !important;
flex-direction:column !important;
align-items:center !important;
}
html body[data-page="custom"] .luxury-request-story img,
html body[data-page="custom"] .custom-request-story img,
html body[data-page="custom"] #custom-reference-image{
width:100% !important;
height:520px !important;
object-fit:contain !important;
object-position:center center !important;
display:block !important;
margin-left:auto !important;
margin-right:auto !important;
}
html body[data-page="custom"] .luxury-request-story div,
html body[data-page="custom"] .custom-request-story div{
width:100% !important;
}
/* MOGO CUSTOM REFERENCE IMAGE SCALE V2 */
html body[data-page="custom"] .luxury-request-story img,
html body[data-page="custom"] .custom-request-story img,
html body[data-page="custom"] #custom-reference-image{
height:620px !important;
object-fit:cover !important;
object-position:center center !important;
}
@media(max-width:980px){
html body[data-page="custom"] .luxury-request-story img,
html body[data-page="custom"] .custom-request-story img,
html body[data-page="custom"] #custom-reference-image{
height:520px !important;
}
}
@media(max-width:620px){
html body[data-page="custom"] .luxury-request-story img,
html body[data-page="custom"] .custom-request-story img,
html body[data-page="custom"] #custom-reference-image{
height:420px !important;
}
}
/* MOGO CUSTOM SUBMIT MATCH NEWSLETTER V2 */
html body[data-page="custom"] .custom-form button[type="submit"],
html body[data-page="custom"] .luxury-submit,
html body[data-page="custom"] button.btn.primary.full.luxury-submit{
background:#050505 !important;
background-color:#050505 !important;
color:#b89b68 !important;
border:1px solid #705b39 !important;
border-radius:0 !important;
box-shadow:none !important;
text-shadow:none !important;
filter:none !important;
opacity:1 !important;
transition:background .18s ease,color .18s ease,border-color .18s ease !important;
}
html body[data-page="custom"] .custom-form button[type="submit"]:hover,
html body[data-page="custom"] .luxury-submit:hover,
html body[data-page="custom"] button.btn.primary.full.luxury-submit:hover{
background:#b89b68 !important;
background-color:#b89b68 !important;
color:#050505 !important;
border-color:#b89b68 !important;
box-shadow:none !important;
text-shadow:none !important;
filter:none !important;
}
/* MOGO CUSTOM REQUEST VISUAL BALANCE V1 */
html body[data-page="custom"] .custom-request{
padding-top:clamp(84px,7vw,132px) !important;
padding-bottom:clamp(84px,7vw,132px) !important;
}
html body[data-page="custom"] .custom-request-grid{
grid-template-columns:minmax(0, .96fr) minmax(520px, .78fr) !important;
gap:clamp(76px,7vw,132px) !important;
align-items:center !important;
max-width:1560px !important;
}
html body[data-page="custom"] .luxury-request-story,
html body[data-page="custom"] .custom-request-story{
max-width:760px !important;
justify-self:end !important;
}
html body[data-page="custom"] .luxury-request-story img,
html body[data-page="custom"] .custom-request-story img,
html body[data-page="custom"] #custom-reference-image{
height:min(58vh, 620px) !important;
min-height:500px !important;
object-fit:contain !important;
object-position:center center !important;
}
/* Homepage header: keep the black field continuous above the Hero. */
html body[data-page="home"] .site-header{
border-bottom:0 !important;
}
/* Shared site navigation: fixed consistently on every public page. */
html body[data-page] #site-chrome .site-header,
html body[data-page] .site-header{
position:fixed !important;
inset:0 0 auto 0 !important;
width:100% !important;
z-index:900 !important;
}
html body:not([data-page]) #site-chrome .site-header,
html body:not([data-page]) .site-header{
position:fixed !important;
inset:0 0 auto 0 !important;
width:100% !important;
z-index:900 !important;
}
html body[data-page] main{
padding-top:82px !important;
}
html body:not([data-page]) main{
padding-top:82px !important;
}
html{
scroll-padding-top:82px;
}
@media(max-width:760px){
html body[data-page] main,
html body:not([data-page]) main{
padding-top:58px !important;
}
html{
scroll-padding-top:58px;
}
}
html body[data-page="custom"] .luxury-request-story div,
html body[data-page="custom"] .custom-request-story div{
padding:34px 0 0 !important;
}
html body[data-page="custom"] .luxury-request-story .custom-kicker,
html body[data-page="custom"] .custom-request-story .custom-kicker{
margin-bottom:14px !important;
}
html body[data-page="custom"] .luxury-request-story h2,
html body[data-page="custom"] .custom-request-story h2,
html body[data-page="custom"] #custom-reference-title{
font-size:clamp(46px,4vw,72px) !important;
line-height:1.02 !important;
margin-bottom:22px !important;
}
html body[data-page="custom"] .luxury-request-story p,
html body[data-page="custom"] .custom-request-story p,
html body[data-page="custom"] #custom-reference-desc{
max-width:680px !important;
font-size:18px !important;
line-height:1.85 !important;
color:#c9c0b2 !important;
}
html body[data-page="custom"] .luxury-form,
html body[data-page="custom"] .custom-form{
max-width:640px !important;
justify-self:start !important;
padding-top:8px !important;
padding-bottom:8px !important;
}
html body[data-page="custom"] .luxury-form label{
margin-bottom:24px !important;
}
html body[data-page="custom"] #custom-product-reference-note{
display:block;
margin-top:2px;
color:#96866e;
font-size:12px;
line-height:1.5;
letter-spacing:.01em;
}
html body[data-page="custom"] .luxury-form .input,
html body[data-page="custom"] .luxury-form .select,
html body[data-page="custom"] .luxury-form textarea{
min-height:58px !important;
border-color:rgba(184,155,104,.34) !important;
}
html body[data-page="custom"] .luxury-form textarea{
min-height:86px !important;
}
html body[data-page="custom"] .luxury-form .form-grid{
gap:22px 18px !important;
}
html body[data-page="custom"] .luxury-submit{
margin-top:18px !important;
min-height:64px !important;
}
@media(max-width:980px){
html body[data-page="custom"] .custom-request-grid{
grid-template-columns:1fr !important;
gap:54px !important;
}
html body[data-page="custom"] .luxury-request-story,
html body[data-page="custom"] .custom-request-story,
html body[data-page="custom"] .luxury-form,
html body[data-page="custom"] .custom-form{
max-width:none !important;
justify-self:stretch !important;
}
}
/* MOGO GLOBAL FRONT CTA NEWSLETTER ALIGN FINAL V1 */
html body:not([data-admin]) main a.btn,
html body:not([data-admin]) main button.btn,
html body:not([data-admin]) main input.btn,
html body:not([data-admin]) .utility-page a.btn,
html body:not([data-admin]) .utility-page button.btn,
html body:not([data-admin]) .custom-form button[type="submit"],
html body:not([data-admin]) #newsletter-btn,
html body:not([data-admin]) .cart-summary .btn,
html body:not([data-admin]) .empty-state .btn,
html body:not([data-admin]) .checkout-grid .btn,
html body:not([data-admin]) .stack-form .btn{
background:#050505 !important;
background-color:#050505 !important;
color:#b89b68 !important;
border:1px solid #705b39 !important;
border-radius:0 !important;
box-shadow:none !important;
text-shadow:none !important;
filter:none !important;
opacity:1 !important;
text-transform:uppercase !important;
letter-spacing:.12em !important;
transition:background .18s ease,color .18s ease,border-color .18s ease !important;
}
html body:not([data-admin]) main a.btn:hover,
html body:not([data-admin]) main button.btn:hover,
html body:not([data-admin]) main input.btn:hover,
html body:not([data-admin]) .utility-page a.btn:hover,
html body:not([data-admin]) .utility-page button.btn:hover,
html body:not([data-admin]) .custom-form button[type="submit"]:hover,
html body:not([data-admin]) #newsletter-btn:hover,
html body:not([data-admin]) .cart-summary .btn:hover,
html body:not([data-admin]) .empty-state .btn:hover,
html body:not([data-admin]) .checkout-grid .btn:hover,
html body:not([data-admin]) .stack-form .btn:hover{
background:#b89b68 !important;
background-color:#b89b68 !important;
color:#050505 !important;
border-color:#b89b68 !important;
box-shadow:none !important;
text-shadow:none !important;
filter:none !important;
}
html body:not([data-admin]) .quick-add,
html body:not([data-admin]) .quick-wish,
html body:not([data-admin]) .icon-btn,
html body:not([data-admin]) .zoom-btn,
html body:not([data-admin]) .custom-gallery-arrow,
html body:not([data-admin]) .filter-toggle,
html body:not([data-admin]) .facet-close,
html body:not([data-admin]) .link-button{
text-transform:none !important;
letter-spacing:normal !important;
}
/* MOGO CART CTA MATCH NEWSLETTER FINAL V2 */
html body[data-page="cart"] .cart-summary .btn,
html body[data-page="cart"] .cart-summary button,
html body[data-page="cart"] .cart-summary a.btn,
html body[data-page="cart"] .empty-state .btn,
html body[data-page="cart"] .empty-state a.btn,
html body[data-page="checkout"] main .btn,
html body[data-page="checkout"] main button.btn{
background:#050505 !important;
background-color:#050505 !important;
color:#b89b68 !important;
border:1px solid #705b39 !important;
border-color:#705b39 !important;
border-radius:0 !important;
box-shadow:none !important;
}
html body[data-page="cart"] .cart-summary .btn:hover,
html body[data-page="cart"] .cart-summary button:hover,
html body[data-page="cart"] .cart-summary a.btn:hover,
html body[data-page="cart"] .empty-state .btn:hover,
html body[data-page="cart"] .empty-state a.btn:hover,
html body[data-page="checkout"] main .btn:hover,
html body[data-page="checkout"] main button.btn:hover{
background:#b89b68 !important;
background-color:#b89b68 !important;
color:#050505 !important;
border-color:#b89b68 !important;
}
/* MOGO CUSTOM FORM FIELD INNER SPACING V1 */
html body[data-page="custom"] .luxury-form .input,
html body[data-page="custom"] .luxury-form .select,
html body[data-page="custom"] .luxury-form input,
html body[data-page="custom"] .luxury-form textarea,
html body[data-page="custom"] .luxury-form select{
padding-left:18px !important;
padding-right:18px !important;
text-indent:0 !important;
}
html body[data-page="custom"] .luxury-form textarea{
padding-top:16px !important;
padding-bottom:16px !important;
}
html body[data-page="custom"] .luxury-form input[type="date"]{
padding-right:44px !important;
}
/* MOGO CUSTOM COUNTRY COMBOBOX V1 */
html body[data-page="custom"] .country-combobox-field{
position:relative !important;
}
html body[data-page="custom"] .country-combobox{
position:relative !important;
width:100% !important;
}
html body[data-page="custom"] .country-options{
position:absolute !important;
top:calc(100% + 8px) !important;
left:0 !important;
right:0 !important;
z-index:80 !important;
display:none !important;
max-height:292px !important;
overflow-y:auto !important;
background:#050505 !important;
border:1px solid rgba(112,91,57,.82) !important;
box-shadow:0 18px 44px rgba(0,0,0,.72) !important;
}
html body[data-page="custom"] .country-options.open{
display:block !important;
}
html body[data-page="custom"] .country-option{
width:100% !important;
min-height:42px !important;
display:grid !important;
grid-template-columns:32px 1fr 42px !important;
align-items:center !important;
gap:10px !important;
padding:0 16px !important;
margin:0 !important;
border:0 !important;
border-bottom:1px solid rgba(112,91,57,.28) !important;
background:#050505 !important;
color:#f5efe3 !important;
font-size:14px !important;
line-height:1 !important;
text-align:left !important;
cursor:pointer !important;
}
html body[data-page="custom"] .country-option:hover,
html body[data-page="custom"] .country-option:focus{
background:#14110b !important;
color:#b89b68 !important;
outline:0 !important;
}
html body[data-page="custom"] .country-flag{
font-size:20px !important;
line-height:1 !important;
}
html body[data-page="custom"] .country-code{
color:#8d806f !important;
font-size:11px !important;
letter-spacing:.12em !important;
text-align:right !important;
}
/* MOGO CUSTOM COUNTRY FLAG INLINE V1 */
html body[data-page="custom"] .country-combobox{
position:relative !important;
}
html body[data-page="custom"] .country-selected-flag{
position:absolute !important;
left:18px !important;
top:50% !important;
z-index:2 !important;
transform:translateY(-50%) !important;
width:28px !important;
height:28px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
font-size:20px !important;
line-height:1 !important;
pointer-events:none !important;
}
html body[data-page="custom"] #custom-country-input{
padding-left:54px !important;
}
/* MOGO CUSTOM COUNTRY SVG FLAG V1 */
html body[data-page="custom"] .country-selected-flag img,
html body[data-page="custom"] .country-flag img{
width:24px !important;
height:16px !important;
display:block !important;
object-fit:cover !important;
border:0 !important;
box-shadow:none !important;
}
html body[data-page="custom"] .country-selected-flag span{
color:#8d806f !important;
font-size:12px !important;
}
/* MOGO COUNTRY FIELD FINAL ALIGN V1 */
html body[data-page="custom"] .country-selected-flag.is-empty{
display:none !important;
}
html body[data-page="custom"] .country-selected-flag.is-empty + #custom-country-input{
padding-left:18px !important;
}
/* MOGO PRODUCT WISHLIST HEART CENTERED MASK V4 */
html body:not([data-admin]) .product-card .quick-wish,
html body:not([data-admin]) .mogo-cat-grid .product-card .quick-wish,
html body:not([data-admin]) .collection-products .product-card .quick-wish{
color:transparent !important;
font-size:0 !important;
line-height:0 !important;
position:absolute !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
padding:0 !important;
}
html body:not([data-admin]) .product-card .quick-wish::before,
html body:not([data-admin]) .mogo-cat-grid .product-card .quick-wish::before,
html body:not([data-admin]) .collection-products .product-card .quick-wish::before{
content:"" !important;
position:absolute !important;
left:50% !important;
top:50% !important;
width:14px !important;
height:13px !important;
background:#fff !important;
transform:translate(-50%,-50%) !important;
border-radius:0 !important;
box-shadow:none !important;
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 29'%3E%3Cpath fill='black' d='M23.6 0c-3.1 0-5.8 1.8-7.6 4.4C14.2 1.8 11.5 0 8.4 0 3.8 0 0 3.7 0 8.4 0 17.2 16 29 16 29S32 17.2 32 8.4C32 3.7 28.2 0 23.6 0z'/%3E%3C/svg%3E") center / contain no-repeat !important;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 29'%3E%3Cpath fill='black' d='M23.6 0c-3.1 0-5.8 1.8-7.6 4.4C14.2 1.8 11.5 0 8.4 0 3.8 0 0 3.7 0 8.4 0 17.2 16 29 16 29S32 17.2 32 8.4C32 3.7 28.2 0 23.6 0z'/%3E%3C/svg%3E") center / contain no-repeat !important;
}
html body:not([data-admin]) .product-card .quick-wish::after,
html body:not([data-admin]) .mogo-cat-grid .product-card .quick-wish::after,
html body:not([data-admin]) .collection-products .product-card .quick-wish::after{
content:none !important;
display:none !important;
}
/* MOGO PRODUCT DETAIL REDUCE HORIZONTAL LINES V1 */
html body[data-page="product"] .product-long .detail-band{
border-top:0 !important;
border-bottom:0 !important;
}
html body[data-page="product"] .product-long .detail-band + .detail-band{
border-top:1px solid rgba(184,155,104,.08) !important;
}
html body[data-page="product"] .spec-table{
border-top:0 !important;
}
html body[data-page="product"] .spec-row{
border-bottom:1px solid rgba(184,155,104,.12) !important;
}
html body[data-page="product"] .spec-row:last-child{
border-bottom:0 !important;
}
html body[data-page="product"] .review-box{
border:0 !important;
box-shadow:none !important;
}
html body[data-page="custom"] .country-options{
max-height:360px !important;
}
html body .footer #footer-country,
html body .footer #footer-country .mogo-current-country-label{
text-transform:none !important;
}
/* MOGO CUSTOM COUNTRY FLAG CENTER V1 */
html body[data-page="custom"] .country-combobox{
display:block !important;
}
html body[data-page="custom"] .country-selected-flag{
top:0 !important;
bottom:0 !important;
margin:auto 0 !important;
transform:none !important;
}
html body[data-page="custom"] #custom-country-input{
display:block !important;
height:58px !important;
line-height:58px !important;
padding-top:0 !important;
padding-bottom:0 !important;
}
html body[data-page="custom"] .country-selected-flag img{
width:24px !important;
height:16px !important;
display:block !important;
}
/* MOGO FINAL OVERRIDE - PRODUCT COMMUNITY ARROWS OUTSIDE V3 */
html body[data-page="product"] .product-community{
position:relative !important;
overflow:visible !important;
padding-left:72px !important;
padding-right:72px !important;
}
html body[data-page="product"] .product-community .community-grid{
width:100% !important;
max-width:none !important;
margin-left:auto !important;
margin-right:auto !important;
overflow:hidden !important;
}
html body[data-page="product"] .product-community::before,
html body[data-page="product"] .product-community::after{
top:58% !important;
z-index:20 !important;
color:#f5f0e6 !important;
opacity:.9 !important;
pointer-events:none !important;
}
html body[data-page="product"] .product-community::before{
left:24px !important;
}
html body[data-page="product"] .product-community::after{
right:24px !important;
}
@media(max-width:760px){
html body[data-page="product"] .product-community{
padding-left:42px !important;
padding-right:42px !important;
}
html body[data-page="product"] .product-community::before{
left:8px !important;
}
html body[data-page="product"] .product-community::after{
right:8px !important;
}
}
/* MOGO PRODUCT COMMUNITY ARROWS OUTSIDE FINAL V2 */
html body[data-page="product"] .product-community{
overflow:visible !important;
padding-left:72px !important;
padding-right:72px !important;
}
html body[data-page="product"] .product-community .community-grid{
width:100% !important;
margin-left:auto !important;
margin-right:auto !important;
overflow:hidden !important;
}
html body[data-page="product"] .product-community::before,
html body[data-page="product"] .product-community::after{
top:58% !important;
color:#f5f0e6 !important;
opacity:.9 !important;
z-index:8 !important;
}
html body[data-page="product"] .product-community::before{
left:26px !important;
}
html body[data-page="product"] .product-community::after{
right:26px !important;
}
@media(max-width:760px){
html body[data-page="product"] .product-community{
padding-left:42px !important;
padding-right:42px !important;
}
html body[data-page="product"] .product-community::before{
left:8px !important;
}
html body[data-page="product"] .product-community::after{
right:8px !important;
}
}
/* MOGO FOOTER SOCIAL PAYMENT BAR V1 */
html body .mogo-footer-commerce{
margin-top:42px !important;
padding-top:28px !important;
border-top:1px solid rgba(201,164,92,.16) !important;
display:grid !important;
grid-template-columns:minmax(220px,1fr) auto minmax(320px,1fr) !important;
align-items:center !important;
gap:28px !important;
}
html body .mogo-footer-social,
html body .mogo-footer-payments{
display:flex !important;
align-items:center !important;
gap:12px !important;
flex-wrap:wrap !important;
}
html body .mogo-footer-social{
justify-content:flex-start !important;
}
html body .mogo-footer-social a{
width:22px !important;
height:22px !important;
padding:0 !important;
color:rgba(245,240,230,.42) !important;
text-decoration:none !important;
border:0 !important;
background:transparent !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
}
html body .mogo-footer-social a:hover{
color:rgba(245,240,230,.78) !important;
}
html body .mogo-footer-social svg{
width:15px !important;
height:15px !important;
fill:currentColor !important;
display:block !important;
}
html body .mogo-footer-copy{
color:rgba(245,240,230,.56) !important;
font-size:11px !important;
letter-spacing:.18em !important;
text-transform:uppercase !important;
white-space:nowrap !important;
text-align:center !important;
}
html body .mogo-footer-payments{
justify-content:flex-end !important;
}
html body .mogo-footer-payments span{
min-width:42px !important;
height:22px !important;
padding:0 7px !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
border-radius:4px !important;
border:1px solid rgba(0,0,0,.08) !important;
background:#fff !important;
color:#111 !important;
font-size:8.5px !important;
font-weight:700 !important;
letter-spacing:.02em !important;
line-height:1 !important;
white-space:nowrap !important;
}
html body .mogo-footer-payments .pay-amex{background:#2374b9 !important;color:#fff !important;}
html body .mogo-footer-payments .pay-apple{font-size:10px !important;}
html body .mogo-footer-payments .pay-discover{color:#f47a20 !important;}
html body .mogo-footer-payments .pay-gpay{color:#4285f4 !important;}
html body .mogo-footer-payments .pay-klarna{background:#ffb3c7 !important;color:#111 !important;}
html body .mogo-footer-payments .pay-maestro{color:#d9242e !important;}
html body .mogo-footer-payments .pay-mastercard{color:#eb001b !important;}
html body .mogo-footer-payments .pay-paypal{color:#173f8f !important;}
html body .mogo-footer-payments .pay-shop{background:#5a31f4 !important;color:#fff !important;}
html body .mogo-footer-payments .pay-union{color:#d71920 !important;}
html body .mogo-footer-payments .pay-visa{background:#1a4f9b !important;color:#fff !important;}
html body .footer-bottom{
margin-top:18px !important;
padding-top:0 !important;
border-top:0 !important;
justify-content:center !important;
gap:18px !important;
color:rgba(245,240,230,.38) !important;
}
@media(max-width:980px){
html body .mogo-footer-commerce{
grid-template-columns:1fr !important;
justify-items:center !important;
gap:20px !important;
text-align:center !important;
}
html body .mogo-footer-social,
html body .mogo-footer-payments{
justify-content:center !important;
}
html body .mogo-footer-copy{
white-space:normal !important;
}
}
/* MOGO PRODUCT COMMUNITY ARROWS V1 */
html body[data-page="product"] .product-community{
position:relative !important;
}
html body[data-page="product"] .product-community::before,
html body[data-page="product"] .product-community::after{
position:absolute !important;
top:60% !important;
z-index:3 !important;
transform:translateY(-50%) !important;
color:#f5f0e6 !important;
font-family:Arial, Helvetica, sans-serif !important;
font-size:clamp(28px,2.2vw,42px) !important;
font-weight:300 !important;
line-height:1 !important;
opacity:.86 !important;
pointer-events:none !important;
}
html body[data-page="product"] .product-community::before{
content:"‹" !important;
left:clamp(18px,2.4vw,42px) !important;
}
html body[data-page="product"] .product-community::after{
content:"›" !important;
right:clamp(18px,2.4vw,42px) !important;
}
html body[data-page="product"] .product-community .community-grid{
width:min(1560px,calc(100vw - 220px)) !important;
margin-left:auto !important;
margin-right:auto !important;
}
@media(max-width:980px){
html body[data-page="product"] .product-community .community-grid{
width:calc(100vw - 72px) !important;
}
html body[data-page="product"] .product-community::before{
left:12px !important;
}
html body[data-page="product"] .product-community::after{
right:12px !important;
}
}
html body[data-page="product"] .product-community:hover::before,
html body[data-page="product"] .product-community:hover::after{
color:#C9A45C !important;
opacity:1 !important;
}
/* MOGO PRODUCT DETAIL FINAL COMPOSITION V1 */
html body[data-page="product"] .product-page{
padding-top:clamp(34px,4vw,70px) !important;
}
html body[data-page="product"] .product-layout{
width:min(1640px,calc(100vw - 96px)) !important;
margin:0 auto clamp(90px,8vw,150px) !important;
display:grid !important;
grid-template-columns:minmax(680px,1.42fr) minmax(430px,.58fr) !important;
gap:clamp(72px,6vw,128px) !important;
align-items:start !important;
}
html body[data-page="product"] .gallery{
display:grid !important;
grid-template-columns:minmax(0,1fr) 86px !important;
grid-template-areas:"main thumbs" !important;
gap:18px !important;
align-items:center !important;
min-width:0 !important;
background:transparent !important;
}
html body[data-page="product"] .gallery-main{
grid-area:main !important;
width:100% !important;
height:min(76vh,900px) !important;
min-height:640px !important;
max-height:900px !important;
background:#000 !important;
border:0 !important;
box-shadow:none !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
overflow:hidden !important;
}
html body[data-page="product"] .gallery-main img{
width:100% !important;
height:100% !important;
object-fit:contain !important;
object-position:center center !important;
display:block !important;
background:#000 !important;
}
html body[data-page="product"] .thumbs{
grid-area:thumbs !important;
width:86px !important;
height:min(76vh,900px) !important;
min-height:640px !important;
margin:0 !important;
padding:0 !important;
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
gap:14px !important;
overflow-y:auto !important;
overflow-x:hidden !important;
background:transparent !important;
scrollbar-width:none !important;
}
html body[data-page="product"] .thumbs::-webkit-scrollbar{
width:0 !important;
height:0 !important;
}
html body[data-page="product"] .thumb{
width:72px !important;
height:72px !important;
flex:0 0 72px !important;
padding:0 !important;
border:1px solid rgba(201,164,92,.24) !important;
background:#020202 !important;
opacity:.72 !important;
}
html body[data-page="product"] .thumb.active,
html body[data-page="product"] .thumb:hover{
border-color:rgba(245,238,222,.9) !important;
opacity:1 !important;
}
html body[data-page="product"] .thumb img{
width:100% !important;
height:100% !important;
object-fit:cover !important;
display:block !important;
}
html body[data-page="product"] .zoom-btn{
right:118px !important;
top:24px !important;
}
@media(max-width:1180px){
html body[data-page="product"] .product-layout{
width:min(100% - 34px,980px) !important;
grid-template-columns:1fr !important;
gap:34px !important;
}
html body[data-page="product"] .gallery{
grid-template-columns:1fr !important;
grid-template-areas:"main" "thumbs" !important;
gap:16px !important;
}
html body[data-page="product"] .gallery-main{
height:auto !important;
min-height:0 !important;
aspect-ratio:1/1 !important;
}
html body[data-page="product"] .thumbs{
width:100% !important;
height:auto !important;
min-height:0 !important;
flex-direction:row !important;
justify-content:center !important;
overflow-x:auto !important;
overflow-y:hidden !important;
}
html body[data-page="product"] .zoom-btn{
right:18px !important;
}
}
/* MOGO LISTING SORT TYPE BALANCE V1 */
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) .mogo-cat-sort{
align-items:center !important;
}
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) .mogo-cat-sort label,
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) .mogo-cat-sort select,
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) #sort-filter{
font-size:13px !important;
line-height:1.4 !important;
letter-spacing:.02em !important;
}
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) .mogo-cat-sort select,
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) #sort-filter{
min-height:24px !important;
padding-top:0 !important;
padding-bottom:0 !important;
}
/* MOGO HOME COMMUNITY IMAGE RAIL V1 */
html body[data-page="index"] .ab-community{
overflow:hidden !important;
background:#000 !important;
padding:clamp(46px,5vw,84px) 0 !important;
}
html body[data-page="index"] .ab-community-viewport{
width:100% !important;
overflow:hidden !important;
}
html body[data-page="index"] .ab-community-grid{
display:flex !important;
grid-template-columns:none !important;
gap:12px !important;
width:max-content !important;
animation:mogo-community-rail 42s linear infinite !important;
will-change:transform !important;
}
html body[data-page="index"] .ab-community:hover .ab-community-grid{
animation-play-state:paused !important;
}
html body[data-page="index"] .ab-community-grid img{
width:clamp(330px,24vw,520px) !important;
height:clamp(260px,22vw,430px) !important;
flex:0 0 auto !important;
object-fit:cover !important;
display:block !important;
border:0 !important;
outline:0 !important;
background:#000 !important;
}
@keyframes mogo-community-rail{
from{transform:translateX(0);}
to{transform:translateX(calc(-50% - 6px));}
}
@media(max-width:760px){
html body[data-page="index"] .ab-community-grid{
gap:8px !important;
animation-duration:36s !important;
}
html body[data-page="index"] .ab-community-grid img{
width:78vw !important;
height:58vw !important;
}
}
/* MOGO COMMUNITY RAIL GLOBAL OVERRIDE V2 */
html body .ab-community{
overflow:hidden !important;
background:#000 !important;
padding:clamp(48px,5vw,86px) 0 !important;
border:0 !important;
box-shadow:none !important;
}
html body .ab-community,
html body .ab-community *{
outline:0 !important;
}
html body .ab-community::before,
html body .ab-community::after,
html body .ab-community-viewport::before,
html body .ab-community-viewport::after,
html body .ab-community-grid::before,
html body .ab-community-grid::after{
display:none !important;
content:none !important;
}
html body .ab-community-viewport{
width:100% !important;
max-width:none !important;
overflow:hidden !important;
border:0 !important;
box-shadow:none !important;
background:#000 !important;
}
html body .ab-community-grid{
display:flex !important;
flex-wrap:nowrap !important;
grid-template-columns:none !important;
align-items:stretch !important;
gap:12px !important;
width:max-content !important;
min-width:max-content !important;
animation:mogo-community-rail 54s linear infinite !important;
will-change:transform !important;
border:0 !important;
box-shadow:none !important;
}
html body .ab-community:hover .ab-community-grid{
animation-play-state:paused !important;
}
html body .ab-community-grid img{
width:clamp(360px,25vw,540px) !important;
height:clamp(280px,22vw,430px) !important;
flex:0 0 auto !important;
object-fit:cover !important;
object-position:center !important;
display:block !important;
border:0 !important;
box-shadow:none !important;
background:#000 !important;
}
@media(max-width:760px){
html body .ab-community-grid{
gap:8px !important;
animation-duration:42s !important;
}
html body .ab-community-grid img{
width:78vw !important;
height:58vw !important;
}
}
/* MOGO LISTING SORT CENTERLINE V2 */
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) .mogo-cat-sort{
position:relative !important;
height:34px !important;
min-height:34px !important;
display:flex !important;
align-items:center !important;
gap:18px !important;
}
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) .mogo-cat-sort label{
display:flex !important;
align-items:center !important;
height:34px !important;
margin:0 !important;
padding:0 !important;
font-size:13px !important;
line-height:34px !important;
}
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) .mogo-cat-sort select,
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) #sort-filter{
appearance:none !important;
-webkit-appearance:none !important;
display:flex !important;
align-items:center !important;
height:34px !important;
min-height:34px !important;
padding:0 30px 0 0 !important;
margin:0 !important;
border:0 !important;
background:transparent !important;
font-size:13px !important;
line-height:34px !important;
color:#b89b68 !important;
}
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) .mogo-cat-sort::after{
content:"" !important;
position:absolute !important;
right:2px !important;
top:50% !important;
width:7px !important;
height:7px !important;
border-right:2px solid #f5ead8 !important;
border-bottom:2px solid #f5ead8 !important;
transform:translateY(-62%) rotate(45deg) !important;
pointer-events:none !important;
}
/* MOGO PRODUCT DETAIL THUMBNAIL GALLERY REFINEMENT V1 */
html body[data-page="product"] .thumbs{
display:flex !important;
flex-wrap:nowrap !important;
justify-content:center !important;
align-items:center !important;
gap:12px !important;
width:100% !important;
margin:18px auto 0 !important;
padding:0 !important;
}
html body[data-page="product"] .thumb{
width:72px !important;
height:72px !important;
flex:0 0 72px !important;
aspect-ratio:1 / 1 !important;
border:1px solid rgba(184,155,104,.18) !important;
background:#050505 !important;
opacity:.62 !important;
transition:opacity .18s ease, border-color .18s ease, transform .18s ease !important;
}
html body[data-page="product"] .thumb.active,
html body[data-page="product"] .thumb:hover{
opacity:1 !important;
border-color:rgba(184,155,104,.72) !important;
transform:translateY(-1px) !important;
}
html body[data-page="product"] .thumb img{
width:100% !important;
height:100% !important;
object-fit:cover !important;
object-position:center !important;
display:block !important;
}
@media(max-width:760px){
html body[data-page="product"] .thumbs{
justify-content:flex-start !important;
overflow-x:auto !important;
padding-bottom:4px !important;
}
html body[data-page="product"] .thumb{
width:58px !important;
height:58px !important;
flex-basis:58px !important;
}
}
/* MOGO PRODUCT DETAIL MAIN IMAGE NO BOX V1 */
html body[data-page="product"] .gallery{
background:transparent !important;
}
html body[data-page="product"] .gallery-main{
background:transparent !important;
border:0 !important;
box-shadow:none !important;
overflow:visible !important;
position:relative !important;
isolation:isolate !important;
}
html body[data-page="product"] .gallery-main::before{
content:"" !important;
position:absolute !important;
inset:5% 3% 0 !important;
z-index:-1 !important;
background:radial-gradient(circle at 50% 42%, rgba(255,255,255,.035), rgba(0,0,0,0) 58%) !important;
pointer-events:none !important;
}
html body[data-page="product"] .gallery-main img{
background:transparent !important;
width:100% !important;
height:100% !important;
object-fit:contain !important;
object-position:center center !important;
filter:drop-shadow(0 28px 52px rgba(0,0,0,.42)) !important;
}
html body[data-page="product"] .zoom-btn{
background:rgba(0,0,0,.28) !important;
border-color:rgba(184,155,104,.35) !important;
}
/* MOGO PRODUCT DETAIL LUXURY LAYOUT V1 */
html body[data-page="product"] .product-page{
padding:54px 0 0 !important;
background:#000 !important;
}
html body[data-page="product"] .product-page > .container{
width:min(1680px,calc(100% - 96px)) !important;
max-width:1680px !important;
}
html body[data-page="product"] .breadcrumbs{
margin:0 0 24px !important;
color:rgba(255,255,255,.46) !important;
font-size:12px !important;
letter-spacing:.02em !important;
}
html body[data-page="product"] .product-layout{
display:grid !important;
grid-template-columns:minmax(0,1.08fr) minmax(430px,.72fr) !important;
gap:clamp(54px,6vw,112px) !important;
align-items:start !important;
}
html body[data-page="product"] .gallery{
min-width:0 !important;
display:flex !important;
flex-direction:column !important;
align-items:center !important;
}
html body[data-page="product"] .gallery-main{
width:100% !important;
max-width:900px !important;
aspect-ratio:1 / 1.06 !important;
margin:0 auto !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
overflow:visible !important;
}
html body[data-page="product"] .gallery-main::before,
html body[data-page="product"] .gallery-main::after{
display:none !important;
content:none !important;
}
html body[data-page="product"] .gallery-main img{
width:100% !important;
height:100% !important;
max-width:100% !important;
max-height:100% !important;
object-fit:contain !important;
object-position:center !important;
background:transparent !important;
filter:drop-shadow(0 30px 56px rgba(0,0,0,.48)) !important;
}
html body[data-page="product"] .thumbs{
display:flex !important;
flex-wrap:nowrap !important;
justify-content:center !important;
align-items:center !important;
gap:12px !important;
width:100% !important;
margin:18px auto 0 !important;
padding:0 !important;
}
html body[data-page="product"] .thumb{
width:78px !important;
height:78px !important;
flex:0 0 78px !important;
border:1px solid rgba(184,155,104,.22) !important;
background:#030303 !important;
opacity:.58 !important;
padding:0 !important;
}
html body[data-page="product"] .thumb.active,
html body[data-page="product"] .thumb:hover{
opacity:1 !important;
border-color:rgba(184,155,104,.75) !important;
}
html body[data-page="product"] .thumb img{
width:100% !important;
height:100% !important;
object-fit:cover !important;
object-position:center !important;
display:block !important;
}
html body[data-page="product"] .zoom-btn{
top:18px !important;
right:18px !important;
width:44px !important;
height:44px !important;
background:rgba(0,0,0,.18) !important;
color:#f5efe3 !important;
border:1px solid rgba(184,155,104,.28) !important;
}
html body[data-page="product"] .product-copy{
position:sticky !important;
top:112px !important;
max-width:560px !important;
padding:8px 0 42px !important;
}
html body[data-page="product"] #prod-badges .badge,
html body[data-page="product"] .badge{
background:transparent !important;
color:#b89b68 !important;
border:1px solid rgba(184,155,104,.42) !important;
font-size:12px !important;
letter-spacing:.18em !important;
padding:8px 12px !important;
}
html body[data-page="product"] .product-copy h1{
font-size:clamp(46px,4.1vw,78px) !important;
line-height:.98 !important;
color:#f4ead8 !important;
margin:18px 0 16px !important;
letter-spacing:-.015em !important;
}
html body[data-page="product"] .product-price{
color:#b89b68 !important;
font-size:clamp(25px,1.8vw,34px) !important;
margin:0 0 22px !important;
}
html body[data-page="product"] .divider{
background:rgba(255,255,255,.42) !important;
margin:22px 0 !important;
}
html body[data-page="product"] .field-label,
html body[data-page="product"] .field label,
html body[data-page="product"] .qty-row label{
color:#f5efe3 !important;
font-size:13px !important;
letter-spacing:.14em !important;
}
html body[data-page="product"] #prod-short{
color:rgba(245,239,227,.62) !important;
font-size:17px !important;
line-height:1.7 !important;
max-width:520px !important;
}
html body[data-page="product"] .similar-style{
width:66px !important;
height:66px !important;
background:#030303 !important;
border:1px solid rgba(184,155,104,.2) !important;
}
html body[data-page="product"] .input,
html body[data-page="product"] .fit-buttons button{
background:#030303 !important;
color:#f5efe3 !important;
border-color:rgba(184,155,104,.24) !important;
}
html body[data-page="product"] .fit-buttons button.active{
color:#b89b68 !important;
border-color:#b89b68 !important;
background:rgba(184,155,104,.08) !important;
}
html body[data-page="product"] #buy-btn,
html body[data-page="product"] #wish-btn{
min-height:58px !important;
background:#050505 !important;
color:#b89b68 !important;
border-color:#705b39 !important;
font-size:13px !important;
letter-spacing:.16em !important;
}
html body[data-page="product"] #buy-btn:hover,
html body[data-page="product"] #wish-btn:hover{
background:#b89b68 !important;
color:#050505 !important;
}
html body[data-page="product"] .purchase-trust{
gap:8px !important;
}
html body[data-page="product"] .purchase-trust span{
background:rgba(255,255,255,.035) !important;
color:#f5efe3 !important;
font-size:14px !important;
padding:16px 8px !important;
}
html body[data-page="product"] .accordions{
border-top:1px solid rgba(255,255,255,.16) !important;
}
html body[data-page="product"] .acc{
border-bottom:1px solid rgba(255,255,255,.13) !important;
}
html body[data-page="product"] .acc button{
color:#f5efe3 !important;
font-size:18px !important;
}
html body[data-page="product"] .acc .body{
color:rgba(245,239,227,.62) !important;
}
html body[data-page="product"] .product-long{
margin-top:96px !important;
}
html body[data-page="product"] .product-long .detail-band{
border-top:0 !important;
padding:72px 0 !important;
}
html body[data-page="product"] .product-long .detail-band + .detail-band{
border-top:1px solid rgba(184,155,104,.14) !important;
}
html body[data-page="product"] .detail-two{
grid-template-columns:minmax(0,.85fr) minmax(0,1fr) !important;
gap:clamp(48px,6vw,110px) !important;
}
html body[data-page="product"] .detail-two h2,
html body[data-page="product"] .carousel-heading h2{
color:#f4ead8 !important;
font-size:clamp(34px,3vw,56px) !important;
line-height:1.05 !important;
}
html body[data-page="product"] .detail-two p,
html body[data-page="product"] .rich-copy,
html body[data-page="product"] .review-box p{
color:rgba(245,239,227,.68) !important;
font-size:17px !important;
line-height:1.8 !important;
}
html body[data-page="product"] .review-box{
background:rgba(255,255,255,.035) !important;
border:0 !important;
}
html body[data-page="product"] .spec-table{
border-top:1px solid rgba(184,155,104,.22) !important;
}
html body[data-page="product"] .spec-row{
border-bottom:1px solid rgba(184,155,104,.18) !important;
color:#f5efe3 !important;
}
html body[data-page="product"] .spec-row span{
color:rgba(245,239,227,.62) !important;
}
html body[data-page="product"] .brand-mini{
background:#000 !important;
}
html body[data-page="product"] .brand-mini > div{
padding-left:0 !important;
}
html body[data-page="product"] .brand-mini img{
height:clamp(360px,33vw,560px) !important;
object-fit:cover !important;
}
html body[data-page="product"] .product-community{
border-top:0 !important;
}
@media(max-width:980px){
html body[data-page="product"] .product-page > .container{
width:min(100% - 36px,1680px) !important;
}
html body[data-page="product"] .product-layout{
grid-template-columns:1fr !important;
gap:34px !important;
}
html body[data-page="product"] .product-copy{
position:static !important;
max-width:none !important;
}
html body[data-page="product"] .gallery-main{
max-width:100% !important;
aspect-ratio:1 / 1.08 !important;
}
}
@media(max-width:760px){
html body[data-page="product"] .product-page{
padding-top:32px !important;
}
html body[data-page="product"] .product-copy h1{
font-size:42px !important;
}
html body[data-page="product"] .thumbs{
justify-content:flex-start !important;
overflow-x:auto !important;
padding-bottom:6px !important;
}
html body[data-page="product"] .thumb{
width:62px !important;
height:62px !important;
flex-basis:62px !important;
}
html body[data-page="product"] .purchase-trust{
grid-template-columns:1fr !important;
}
}
/* MOGO PRODUCT COMMUNITY RAIL V1 */
html body[data-page="product"] .product-community{
overflow:hidden !important;
background:#000 !important;
padding:78px 0 88px !important;
border:0 !important;
}
html body[data-page="product"] .product-community .center-intro{
margin-bottom:42px !important;
}
html body[data-page="product"] .product-community .center-intro h2{
color:#f4ead8 !important;
font-size:clamp(36px,3vw,56px) !important;
}
html body[data-page="product"] .product-community .community-grid{
display:flex !important;
grid-template-columns:none !important;
flex-wrap:nowrap !important;
gap:12px !important;
width:max-content !important;
min-width:max-content !important;
animation:mogo-product-community-rail 48s linear infinite !important;
will-change:transform !important;
border:0 !important;
background:#000 !important;
}
html body[data-page="product"] .product-community:hover .community-grid{
animation-play-state:paused !important;
}
html body[data-page="product"] .product-community .community-grid img{
width:clamp(390px,25vw,560px) !important;
height:clamp(290px,22vw,430px) !important;
flex:0 0 auto !important;
object-fit:cover !important;
object-position:center !important;
display:block !important;
border:0 !important;
box-shadow:none !important;
background:#000 !important;
}
@keyframes mogo-product-community-rail{
from{transform:translateX(0);}
to{transform:translateX(calc(-50% - 6px));}
}
@media(max-width:760px){
html body[data-page="product"] .product-community .community-grid{
animation-duration:42s !important;
gap:8px !important;
}
html body[data-page="product"] .product-community .community-grid img{
width:78vw !important;
height:58vw !important;
}
}
/* MOGO PRODUCT THUMBS RIGHT SIDE V1 */
html body[data-page="product"] .gallery{
display:grid !important;
grid-template-columns:minmax(0,1fr) 92px !important;
grid-template-areas:"main thumbs" !important;
align-items:center !important;
column-gap:18px !important;
}
html body[data-page="product"] .gallery-main{
grid-area:main !important;
}
html body[data-page="product"] .thumbs{
grid-area:thumbs !important;
flex-direction:column !important;
justify-content:center !important;
align-items:center !important;
gap:12px !important;
width:92px !important;
max-height:560px !important;
margin:0 !important;
overflow-y:auto !important;
overflow-x:hidden !important;
padding:2px 0 !important;
scrollbar-width:thin !important;
}
html body[data-page="product"] .thumb{
width:76px !important;
height:76px !important;
flex:0 0 76px !important;
}
html body[data-page="product"] .zoom-btn{
right:118px !important;
}
@media(max-width:980px){
html body[data-page="product"] .gallery{
grid-template-columns:1fr !important;
grid-template-areas:"main" "thumbs" !important;
row-gap:16px !important;
}
html body[data-page="product"] .thumbs{
flex-direction:row !important;
justify-content:center !important;
width:100% !important;
max-height:none !important;
overflow-x:auto !important;
overflow-y:hidden !important;
margin:0 auto !important;
}
html body[data-page="product"] .zoom-btn{
right:18px !important;
}
}
/* MOGO CUSTOM DATE ICON POSITION V1 */
html body[data-page="custom"] input[type="date"].input{
padding-right:18px !important;
}
html body[data-page="custom"] input[type="date"].input::-webkit-calendar-picker-indicator{
margin-right:-6px !important;
padding:4px !important;
cursor:pointer !important;
}
/* MOGO CUSTOM COUNTRY FIELD COMPACT INLINE V3 */
html body[data-page="custom"] .country-combobox{
height:58px !important;
}
html body[data-page="custom"] #custom-country-input{
height:58px !important;
line-height:58px !important;
padding-left:52px !important;
font-size:14px !important;
font-weight:500 !important;
}
html body[data-page="custom"] .country-selected-flag{
left:18px !important;
top:50% !important;
width:22px !important;
height:15px !important;
transform:translateY(calc(-50% + 6px)) !important;
}
html body[data-page="custom"] .country-selected-flag img{
width:22px !important;
height:15px !important;
object-fit:cover !important;
}
html body[data-page="custom"] .country-selected-flag.is-empty + #custom-country-input{
padding-left:18px !important;
}
/* MOGO CUSTOM HERO IMAGE TEXT BALANCE V1 */
html body[data-page="custom"] .custom-atelier-hero{
grid-template-columns:minmax(0,0.9fr) minmax(520px,1.1fr) !important;
gap:clamp(84px,7vw,150px) !important;
}
html body[data-page="custom"] .custom-atelier-copy{
width:100% !important;
max-width:700px !important;
justify-self:end !important;
}
html body[data-page="custom"] .custom-atelier-copy h1{
max-width:700px !important;
font-size:clamp(68px,5.7vw,110px) !important;
line-height:.93 !important;
}
html body[data-page="custom"] .custom-atelier-media{
width:100% !important;
max-width:880px !important;
justify-self:start !important;
}
@media(max-width:1180px){
html body[data-page="custom"] .custom-atelier-hero{
grid-template-columns:1fr !important;
gap:44px !important;
}
html body[data-page="custom"] .custom-atelier-copy{
max-width:860px !important;
justify-self:start !important;
}
html body[data-page="custom"] .custom-atelier-copy h1{
max-width:860px !important;
}
html body[data-page="custom"] .custom-atelier-media{
max-width:none !important;
}
}
/* MOGO CUSTOM COUNTRY FLAG OPTICAL CENTER V2 */
html body[data-page="custom"] .country-selected-flag{
top:50% !important;
bottom:auto !important;
width:24px !important;
height:16px !important;
margin:0 !important;
transform:translateY(calc(-50% + 1px)) !important;
align-items:center !important;
justify-content:center !important;
}
html body[data-page="custom"] .country-selected-flag img{
width:24px !important;
height:16px !important;
display:block !important;
}
/* MOGO FINAL OVERRIDE - PRODUCT COMMUNITY ARROWS OUTSIDE V4 */
html body[data-page="product"] .product-community{
position:relative !important;
overflow:visible !important;
padding-left:72px !important;
padding-right:72px !important;
}
html body[data-page="product"] .product-community .community-grid{
width:100% !important;
max-width:none !important;
margin-left:auto !important;
margin-right:auto !important;
overflow:hidden !important;
}
html body[data-page="product"] .product-community::before,
html body[data-page="product"] .product-community::after{
top:58% !important;
z-index:20 !important;
color:#f5f0e6 !important;
opacity:.9 !important;
pointer-events:none !important;
}
html body[data-page="product"] .product-community::before{
left:24px !important;
}
html body[data-page="product"] .product-community::after{
right:24px !important;
}
@media(max-width:760px){
html body[data-page="product"] .product-community{
padding-left:42px !important;
padding-right:42px !important;
}
html body[data-page="product"] .product-community::before{
left:8px !important;
}
html body[data-page="product"] .product-community::after{
right:8px !important;
}
}
/* MOGO FINAL OVERRIDE - REAL FOOTER ICONS V1 */
html body .mogo-footer-commerce{
grid-template-columns:minmax(180px,1fr) auto minmax(420px,1fr) !important;
}
html body .mogo-footer-social{
gap:22px !important;
}
html body .mogo-footer-social a{
width:18px !important;
height:18px !important;
padding:0 !important;
border:0 !important;
background:transparent !important;
opacity:.48 !important;
}
html body .mogo-footer-social a:hover{
opacity:.82 !important;
}
html body .mogo-footer-social img{
width:16px !important;
height:16px !important;
display:block !important;
filter:invert(1) brightness(.72) !important;
}
html body .mogo-footer-payments{
gap:10px !important;
}
html body .mogo-footer-payments span{
min-width:44px !important;
width:auto !important;
height:24px !important;
padding:3px 7px !important;
border-radius:4px !important;
border:1px solid rgba(0,0,0,.12) !important;
background:#fff !important;
box-shadow:none !important;
}
html body .mogo-footer-payments img{
max-width:52px !important;
max-height:16px !important;
width:auto !important;
height:auto !important;
display:block !important;
object-fit:contain !important;
}
@media(max-width:980px){
html body .mogo-footer-commerce{
grid-template-columns:1fr !important;
}
}
/* MOGO FINAL OVERRIDE - CLEAN PAYMENT BADGES V2 */
html body .mogo-footer-payments{
gap:10px !important;
align-items:center !important;
}
html body .mogo-footer-payments .pay-card{
min-width:44px !important;
height:24px !important;
padding:0 8px !important;
border-radius:4px !important;
border:1px solid rgba(0,0,0,.12) !important;
background:#fff !important;
color:#111 !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
font-family:Arial, Helvetica, sans-serif !important;
font-size:9px !important;
font-weight:800 !important;
letter-spacing:0 !important;
line-height:1 !important;
text-transform:none !important;
white-space:nowrap !important;
}
html body .mogo-footer-payments .pay-amex{background:#1f74b7 !important;color:#fff !important;font-size:8px !important;}
html body .mogo-footer-payments .pay-apple{font-size:10px !important;font-weight:700 !important;}
html body .mogo-footer-payments .pay-discover{color:#f37021 !important;}
html body .mogo-footer-payments .pay-gpay b{color:#4285f4 !important;margin-right:2px !important;}
html body .mogo-footer-payments .pay-klarna{background:#ffb3c7 !important;color:#111 !important;}
html body .mogo-footer-payments .pay-paypal{color:#173f8f !important;}
html body .mogo-footer-payments .pay-shop{background:#5a31f4 !important;color:#fff !important;}
html body .mogo-footer-payments .pay-union{color:#d71920 !important;}
html body .mogo-footer-payments .pay-visa{background:#1a4f9b !important;color:#fff !important;}
html body .mogo-footer-payments .pay-maestro,
html body .mogo-footer-payments .pay-master{
min-width:42px !important;
gap:0 !important;
}
html body .mogo-footer-payments .pay-maestro i,
html body .mogo-footer-payments .pay-maestro em,
html body .mogo-footer-payments .pay-master i,
html body .mogo-footer-payments .pay-master em{
width:14px !important;
height:14px !important;
border-radius:50% !important;
display:block !important;
margin:0 -2px !important;
opacity:.92 !important;
}
html body .mogo-footer-payments .pay-maestro i{background:#e31b23 !important;}
html body .mogo-footer-payments .pay-maestro em{background:#1f62b6 !important;}
html body .mogo-footer-payments .pay-master i{background:#eb001b !important;}
html body .mogo-footer-payments .pay-master em{background:#f79e1b !important;}
/* MOGO FINAL OVERRIDE - CANCEL FOOTER ICON TEST AND STICKY BUY FIX V1 */
html body .mogo-footer-commerce,
html body .mogo-footer-social,
html body .mogo-footer-payments{
display:none !important;
}
html body .footer-bottom{
margin-top:28px !important;
padding-top:22px !important;
border-top:1px solid rgba(201,164,92,.14) !important;
display:flex !important;
justify-content:space-between !important;
align-items:center !important;
gap:24px !important;
width:100% !important;
max-width:100% !important;
box-sizing:border-box !important;
overflow:hidden !important;
color:rgba(245,240,230,.45) !important;
}
html body[data-page="product"]{
overflow-x:hidden !important;
}
html body[data-page="product"] .sticky-buy{
left:0 !important;
right:0 !important;
bottom:0 !important;
width:100% !important;
max-width:100vw !important;
box-sizing:border-box !important;
overflow:hidden !important;
display:grid !important;
grid-template-columns:48px minmax(0,1fr) auto !important;
align-items:center !important;
gap:12px !important;
padding:10px clamp(18px,5vw,88px) !important;
background:rgba(0,0,0,.94) !important;
border-top:1px solid rgba(245,240,230,.18) !important;
}
html body[data-page="product"] .sticky-buy img{
width:48px !important;
height:48px !important;
object-fit:cover !important;
display:block !important;
}
html body[data-page="product"] .sticky-buy > div{
min-width:0 !important;
display:flex !important;
flex-direction:column !important;
justify-content:center !important;
gap:2px !important;
}
html body[data-page="product"] .sticky-buy b,
html body[data-page="product"] .sticky-buy span{
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
html body[data-page="product"] .sticky-buy .btn{
width:auto !important;
min-width:132px !important;
height:44px !important;
padding:0 24px !important;
justify-self:end !important;
}
@media(max-width:720px){
html body .footer-bottom{
flex-direction:column !important;
align-items:flex-start !important;
gap:10px !important;
}
html body[data-page="product"] .sticky-buy{
grid-template-columns:42px minmax(0,1fr) !important;
padding:10px 16px !important;
}
html body[data-page="product"] .sticky-buy img{
width:42px !important;
height:42px !important;
}
html body[data-page="product"] .sticky-buy .btn{
grid-column:1 / -1 !important;
width:100% !important;
min-width:0 !important;
justify-self:stretch !important;
}
}
/* MOGO FINAL OVERRIDE - PRODUCT COMMUNITY NO PAGE OVERFLOW V1 */
html,
html body{
max-width:100% !important;
overflow-x:hidden !important;
}
html body[data-page="product"] .product-community{
overflow:hidden !important;
max-width:100vw !important;
box-sizing:border-box !important;
}
html body[data-page="product"] .product-community .community-grid{
width:100% !important;
max-width:100% !important;
min-width:0 !important;
overflow:visible !important;
box-sizing:border-box !important;
}
html body[data-page="product"] .product-community .community-grid img{
width:clamp(320px,24vw,520px) !important;
max-width:calc(100vw - 32px) !important;
}
/* Selected color SKU: visual state only; no layout or size changes. */
html body[data-page="product"] .similar-style.active{
border-color:#c79a43 !important;
box-shadow:inset 0 0 0 1px #c79a43 !important;
}
/* Community gallery: retain six unique images, while restoring the product-page rail. */
html body[data-page="product"] .product-community{
overflow:hidden !important;
}
html body[data-page="product"] .product-community .community-grid{
display:flex !important;
width:max-content !important;
max-width:none !important;
min-width:max-content !important;
gap:12px !important;
animation:mogo-product-community-unique-rail 32s linear infinite !important;
will-change:transform !important;
}
html body[data-page="product"] .product-community .community-grid img{
flex:0 0 clamp(320px,24vw,520px) !important;
width:clamp(320px,24vw,520px) !important;
max-width:none !important;
}
html body[data-page="product"] .product-community:hover .community-grid{
animation-play-state:paused !important;
}
@keyframes mogo-product-community-unique-rail{
from{transform:translateX(0)}
to{transform:translateX(calc(-100% + 100vw))}
}
@media(max-width:760px){
html body[data-page="product"] .product-community .community-grid{
animation-duration:26s !important;
}
html body[data-page="product"] .product-community .community-grid img{
flex-basis:78vw !important;
width:78vw !important;
}
}
/* Catalog view buttons are global controls: desktop always means 6 / 4 / 3,
including every ordinary product card and every product-family row. */
@media(min-width:761px){
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) #mogo-cat-products.mogo-cat-grid[data-density="compact"]{
grid-template-columns:repeat(6,minmax(0,1fr))!important;
}
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) #mogo-cat-products.mogo-cat-grid[data-density="standard"]{
grid-template-columns:repeat(4,minmax(0,1fr))!important;
}
html body:is([data-page="collection"],[data-page="new"],[data-page="limited"],[data-page="wishlist"]) #mogo-cat-products.mogo-cat-grid[data-density="large"]{
grid-template-columns:repeat(3,minmax(0,1fr))!important;
}
}
/* Final product wearing-gallery layout: this must remain last to override legacy rail styles. */
html body[data-page="product"] .product-community{overflow:hidden!important;padding:74px 0 86px!important}
html body[data-page="product"] .product-community .community-viewport{position:relative;display:block;width:100%;max-width:1280px;margin:0 auto;padding:0 88px;overflow:visible!important;box-sizing:border-box}
html body[data-page="product"] .product-community .community-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));width:100%!important;max-width:none!important;min-width:0!important;gap:16px!important;overflow:visible!important;animation:none!important;transform:none!important;will-change:auto!important}
html body[data-page="product"] .product-community .community-card{position:relative;display:block;min-width:0;width:auto!important;aspect-ratio:1/1;overflow:hidden;background:#111;border:1px solid rgba(218,190,125,.2)}
html body[data-page="product"] .product-community .community-card img{display:block;flex:none!important;width:100%!important;max-width:none!important;height:100%!important;object-fit:cover;object-position:center}
html body[data-page="product"] .product-community .community-arrow{position:absolute!important;top:50%!important;z-index:4;width:44px!important;height:44px!important;margin:0!important;transform:translateY(-50%)!important}
html body[data-page="product"] .product-community .community-arrow-prev{left:20px!important}
html body[data-page="product"] .product-community .community-arrow-next{right:20px!important}
@media(max-width:760px){html body[data-page="product"] .product-community .community-viewport{padding:0 50px}html body[data-page="product"] .product-community .community-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}html body[data-page="product"] .product-community .community-arrow-prev{left:7px!important}html body[data-page="product"] .product-community .community-arrow-next{right:7px!important}}
/* Story: no bamboo/landscape panel and no horizontal rules between the remaining sections. */
html body[data-page="story"] .site-header,
html body[data-page="story"] .story-hero,
html body[data-page="story"] main > .section,
html body[data-page="story"] .story-stack,
html body[data-page="story"] .story-row,
html body[data-page="story"] .brand-mini,
html body[data-page="story"] .detail-band{border:0!important}
/* Bamboo and landscape work is paused: remove its public navigation entry points, keep catalog data intact. */
html body .desktop-nav > .nav-item:nth-of-type(3),
html body #site-chrome a[href*="cat=bamboo"],
html body .footer a[href*="cat=bamboo"]{display:none!important}