/** Shopify CDN: Minification failed
Line 312:14 Expected identifier but found whitespace
Line 312:15 Unexpected "clamp("
Line 4400:113 Unexpected "<"
Line 4489:1 Unexpected "<"
Line 4560:1 Unexpected "<"
Line 5315:0 Unexpected "<"
Line 5349:0 Unexpected "<"
**/
:root{
--bg:#0b0b0c;
--panel:#0f0f12;
--text:#f3f3f5;
--muted:#b8b8c2;
--line:rgba(255,255,255,.10);
--shadow:0 12px 50px rgba(0,0,0,.35);
--radius:18px;
--max:1200px;
--pad:24px;
--font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}*{box-sizing:border-box}html,body{height:100%}body{
margin:0;
font-family:var(--font);
background:var(--bg);
color:var(--text);
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}button{font-family:inherit}.skip-to-content-link{
position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;
}.skip-to-content-link:focus{
left:12px;top:12px;width:auto;height:auto;padding:10px 12px;background:#111;border:1px solid var(--line);border-radius:12px;z-index:9999;
}.container{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}.btn{
display:inline-flex;align-items:center;justify-content:center;gap:10px;
padding:12px 16px;border-radius:999px;border:1px solid var(--line);
background:rgba(255,255,255,.04);
color:var(--text);
cursor:pointer;
transition:transform .15s ease, background .2s ease, border-color .2s ease, opacity .2s ease;
backdrop-filter: blur(10px);
}.btn:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16)}.btn:active{transform:translateY(1px)}.btn.primary{
background:rgba(255,255,255,.12);
border-color:rgba(255,255,255,.22);
}.pill{
display:inline-flex;align-items:center;gap:8px;
padding:8px 12px;border:1px solid var(--line);border-radius:999px;
background:rgba(255,255,255,.03);color:var(--muted);font-size:12px;letter-spacing:.08em;text-transform:uppercase
}.hero-shipping{
color:var(--muted);
font-size:12px;
letter-spacing:.14em;
text-transform:uppercase;
margin-bottom:12px;
}.header{
position:fixed;left:0;right:0;top:0;z-index:50;
padding:14px 0;
transition: background .25s ease, border-color .25s ease, transform .25s ease;
background:transparent;
}.header.is-solid{
background:rgba(10,10,12,.78);
border-bottom:1px solid var(--line);
backdrop-filter: blur(12px);
}.header-inner{
display:flex;align-items:center;justify-content:space-between;gap:16px;
}.brand{
font-weight:700;letter-spacing:.02em
}.nav{
display:flex;
align-items:center;
gap:10px;
flex-wrap:nowrap; /* <- keep one line */
white-space:nowrap; /* <- prevent wrapping */
justify-content:flex-end;
overflow:hidden;
}.nav a{font-size:14px;color:var(--muted);padding:8px 10px;border-radius:999px;border:1px solid transparent}.nav a:hover{color:var(--text);border-color:var(--line);background:rgba(255,255,255,.03)}.nav .cta{color:var(--text);border-color:var(--line);background:rgba(255,255,255,.04)}.nav .cta:hover{background:rgba(255,255,255,.07)}@media (max-width: 760px){.header{padding:10px 0}.nav{gap:6px}.nav a{font-size:13px;padding:7px 9px}}.intro-overlay{
position:fixed;inset:0;z-index:80;
background:#000;
display:flex;align-items:center;justify-content:center;
opacity:1;
}.intro-inner{text-align:center;transform:translateY(0)}.intro-title{
font-size:42px;font-weight:800;letter-spacing:.02em;margin:0;color:#fff;opacity:0;
}.intro-slogan{
margin:10px 0 0 0;color:#fff;opacity:0;
font-size:16px;font-weight:400;letter-spacing:.06em;text-transform:none;
}@media (max-width: 760px){.intro-title{font-size:36px}}.fullpage{
height:100vh;
overflow-y:auto;
scroll-snap-type:y mandatory;
scroll-behavior:smooth;
}.panel{
min-height:100vh;
scroll-snap-align:start;
display:flex;
}.panel.hero{
align-items:center;
padding-top:74px; /* header space */
}.hero-grid{
width:100%;
display:grid;
grid-template-columns: 1.05fr .95fr;
gap:26px;
align-items:center;
}.hero-left{
padding:16px 0;
}.hero-name{
font-size:44px;line-height:1.02;margin:0 0 10px 0;font-weight:800;
}.hero-slogan{
margin:0 0 18px 0;color:var(--muted);font-size:18px;letter-spacing:.02em;
}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}.hero-image{
border-radius:var(--radius);
border:1px solid var(--line);
background:linear-gradient(145deg, rgba(255,255,255,.06), rgba(255,255,255,0));
box-shadow:var(--shadow);
overflow:hidden;
min-height:420px;
position:relative;
}.hero-image img{width:100%;height:100%;object-fit:cover;opacity:.92}.hero-image::after{
content:"";
position:absolute;inset:0;
background:radial-gradient(900px 400px at 30% 20%, rgba(255,255,255,.12), transparent 55%),
radial-gradient(800px 500px at 70% 80%, rgba(255,255,255,.08), transparent 60%);
pointer-events:none;
}@media (max-width: 980px){.hero-grid{grid-template-columns:1fr;gap:16px}.hero-image{min-height:320px}.hero-name{font-size:40px}}@media (max-width: 760px){.panel.hero{padding-top:80px}.hero-name{font-size:36px}}.collections-panel{
width:100%;
padding:110px 0 90px; /* space for header + footer bar */
background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
}.section-title{
font-size:20px;margin:0 0 10px 0;font-weight:700;
}.section-subtitle{margin:0 0 22px 0;color:var(--muted);font-size:14px}.collection-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:14px;
}.collection-card{
border:1px solid var(--line);
border-radius:var(--radius);
background:rgba(255,255,255,.03);
overflow:hidden;
box-shadow: 0 10px 32px rgba(0,0,0,.25);
transition: transform .18s ease, border-color .2s ease, background .2s ease;
display:flex;flex-direction:column;
}.collection-card:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.045)}.collection-thumb{
aspect-ratio: 16/10;
background:#0a0a0a;
position:relative;
}.collection-thumb img{width:100%;height:100%;object-fit:cover;opacity:.92}.collection-body{padding:14px 14px 16px}.collection-title{margin:0 0 6px 0;font-weight:700;font-size:16px}.collection-desc{margin:0;color:var(--muted);font-size:13px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.collection-actions{margin-top:10px}.collection-actions .btn{width:100%}@media (max-width: 980px){.collection-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 760px){.collections-panel{padding:22px 0 22px}.collection-grid{grid-template-columns:1fr}}.product-grid{
padding:96px 0 40px;
}.grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:14px;
}@media (max-width: 1100px){.grid{grid-template-columns:repeat(3,1fr)}}@media (max-width: 860px){.grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 520px){.grid{grid-template-columns:1fr}}.product-card{
border:1px solid var(--line);
border-radius:var(--radius);
background:rgba(255,255,255,.03);
overflow:hidden;
transition: transform .18s ease, border-color .2s ease, background .2s ease;
}.product-card:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.045)}.product-thumb{aspect-ratio:1/1;background:#0a0a0a}.product-thumb img{width:100%;height:100%;object-fit:cover}.product-body{padding:12px 12px 14px}.product-title{line-height:1.25}.price{color:var(--muted);font-size:13px}.footer-bar{
position:fixed;left:0;right:0;bottom:0;
padding:12px 0;
border-top:1px solid var(--line);
background:rgba(10,10,12,.72);
backdrop-filter: blur(12px);
transition: transform .25s ease;
}.footer-bar.is-visible{transform: translateY(0)}.footer-inner{
display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
color:var(--muted);font-size:13px
}.footer-inner strong{color:var(--text);font-weight:700}.footer-bar{transform:translateY(0)!important}.header-mock{background:transparent;border-bottom:1px solid transparent}.header-mock.is-solid{background:rgba(0,0,0,.25);border-bottom:1px solid rgba(255,255,255,.06)}.header-center{justify-content:center}.nav.nav-center{
justify-content:center;
flex-wrap:nowrap;
white-space:nowrap;
gap: clamp(8px, 2vw, 14px);
overflow:hidden;
}.nav.nav-center a{
font-size: clamp(12px, 2.6vw, 14px);
padding: 8px clamp(6px, 1.4vw, 10px);
line-height: 1;
border-radius: 999px;
}@media (max-width: 360px){.nav.nav-center{ gap: 6px; }.nav.nav-center a{ font-size: 11px; padding: 8px 6px; }.nav.nav-center .sep{ font-size: 10px; }}.nav-center .sep{color:rgba(255,255,255,.55);font-size:14px;line-height:1}.footer-inner.footer-mock{width:100%}.footer-mock .dot{color:rgba(255,255,255,.9);margin-right:6px}.footer-mock .sq{color:rgba(255,255,255,.9);margin-right:8px}.footer-mock .foot-right{margin-left:auto}.hero-mock{
position:relative;
padding-top:64px;
padding-bottom:84px; /* gives breathing room above the fixed footer */
overflow:hidden;
}.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.72;filter:saturate(.9) contrast(1.05)}.hero-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(1100px 600px at 30% 20%, rgba(0,0,0,.30), rgba(0,0,0,.78)),linear-gradient(180deg, rgba(0,0,0,.65), rgba(0,0,0,.72))}.hero-mock-inner{
position:relative;
height:calc(100vh - 64px - 62px);
display:grid;
grid-template-rows: auto 1fr; /* <-- important */
gap:18px;
}.hero-left-rail{
grid-column:1;
grid-row:2;
max-width:340px;
padding-top:10px;
}.hero-brand{font-weight:700;font-size:26px;margin-bottom:18px}.hero-shipping-text{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.85)}.hero-center-copy{
grid-column:1 / span 2;
grid-row:1;
align-self:start;
}.hero-headline{margin:42px 0 14px 0;font-weight:300;letter-spacing:-.02em;font-size:clamp(54px,6.2vw,118px)}.hero-sub{font-size:22px;font-weight:500;margin:0}.hero-actions-rail{
/* tighter + looks “correct†*/
z-index:2;
}.hero-actions-rail .btn-pill{
/* equal button widths */
/* prevents weird wrapping */
letter-spacing:.02em; /* subtle, cleaner */
}.hero-actions-rail .btn-pill:hover{background:rgba(255,255,255,.22)}.hero-tiles{
grid-column:2;
grid-row:2;
align-self:start;
/* <-- prevents huge tile */
padding:0; /* <-- remove the padding-top trick */
}.tile{display:flex;align-items:center;justify-content:center;border-radius:22px;background:rgba(70,70,70,.70);border:1px solid rgba(255,255,255,.08);box-shadow:0 14px 70px rgba(0,0,0,.45);overflow:hidden}.tile-image{
right:0;
top:0;
width:100%;
height:56%;
}.tile-image img{opacity:.86}.tile-placeholder{color:rgba(255,255,255,.9);letter-spacing:.06em}.tile-collection{
position:absolute;
width:48%;
height:40%;
bottom:0;
}.tile-collection-1{left:0; transform:none;}.tile-collection-2{right:0; transform:none;}.tile-label{color:rgba(255,255,255,.92);font-size:22px;letter-spacing:.06em;text-transform:uppercase;text-align:center;padding:28px}.collections-mock{padding-top:64px;padding-bottom:62px}.collections-mock-inner{padding:40px 0}.collection-row{display:flex;gap:26px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:12px 8px 18px}.collection-row::-webkit-scrollbar{height:0}.collection-mock-card{flex:0 0 320px;min-width:320px;border-radius:26px;background:rgba(70,70,70,.72);border:1px solid rgba(255,255,255,.08)}.collection-mock-thumb{margin:26px 26px 0;border-radius:22px;overflow:hidden;aspect-ratio:1/1;background:#111}.collection-mock-thumb img{width:100%;height:100%;object-fit:cover}.collection-mock-body{padding:18px 26px 28px}.collection-mock-title{margin:0;font-size:34px;font-weight:500;color:#c9ff7a}.collection-mock-subtitle{margin-top:6px;font-size:22px;font-weight:700;color:#fff}.collection-mock-desc{margin-top:16px;font-size:16px;line-height:1.35;color:rgba(255,255,255,.90)}.mock-noimg{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.45)}.collection-carousel{position:relative}.bv-stagger{opacity:0;transform:translateY(22px)}body.bv-after-intro .bv-stagger{animation:bvIn .65s ease-out forwards}body.bv-after-intro .bv-delay-1{animation-delay:.05s}body.bv-after-intro .bv-delay-2{animation-delay:.18s}body.bv-after-intro .bv-delay-3{animation-delay:.32s}body.bv-after-intro .bv-delay-4{animation-delay:.46s}body.bv-after-intro .bv-delay-5{animation-delay:.60s}@keyframes bvIn{to{opacity:1;transform:translateY(0)}}@media (max-width:980px){.hero-mock-inner{grid-template-columns:1fr}.hero-left-rail{grid-column:1;grid-row:auto;max-width:100%}.hero-tiles{width:100%;height:min(520px,48vh);justify-self:stretch}.hero-actions-rail{left:24px;right:24px}}@media (max-width:760px){.hero-mock{padding-top:74px}.hero-headline{margin-top:26px;font-size:clamp(44px,10vw,70px)}.hero-actions-rail{position:static;margin-top:18px;margin-bottom:18px}.hero-tiles{position:relative;width:100%;height:520px}.tile-image{height:44%}.tile-label{font-size:18px}.collection-mock-card{flex:0 0 78vw;min-width:78vw}.collection-mock-title{font-size:28px}.collection-mock-subtitle{font-size:18px}.collection-mock-desc{font-size:14px}}.carousel-arrow{
position:absolute;
top:50%;
transform:translateY(-50%);
width:44px;height:44px;
border-radius:999px;
border:1px solid rgba(255,255,255,.12);
background:rgba(0,0,0,.35);
color:#fff;
display:flex;
align-items:center;
justify-content:center;
z-index:5;
cursor:pointer;
backdrop-filter: blur(10px);
}.carousel-arrow:hover{background:rgba(0,0,0,.48)}.carousel-arrow.left{left:10px}.carousel-arrow.right{right:10px}@media (max-width: 760px){.carousel-arrow{top:auto;bottom:14px;transform:none}}.hero-mock-inner{
/* keep your existing grid, but constrain the overall content width */
/* adjust 1100–1280 to taste */
margin: 0 auto; /* centers stage => even left/right space */
padding: 0 40px; /* equal breathing room both sides */
}.hero-center-copy{
justify-self: start;
text-align: left;
padding-left: 0;
}.hero-headline{
text-align: left;
margin-left: 0;
}.hero-left-rail{
justify-self: start;
align-self: start;
text-align: left;
}.hero-sub,
.hero-shipping-text{
text-align: left;
margin-left: 0;
}.hero-tiles{
/* keep right-side placement */
/* a bit smaller so right margin doesn’t feel huge */
}.hero-actions-rail{
position: absolute;
/* hug the left edge of the stage */
bottom: 110px; /* adjust if you want them higher/lower */
display: flex;
flex-direction: column; /* <-- stack */
gap: 12px;
align-items: flex-start;
}.hero-actions-rail .btn-pill{
min-width: 190px;
height: 42px;
padding: 0 18px;
display: inline-flex;
align-items: center;
justify-content: flex-start; /* left aligned text */
white-space: nowrap;
}.hero-mock-inner{
/* responsive gutter: ~14px on small screens, ~28px on large */
padding-left: clamp(14px, 2vw, 2px);
}.hero-tiles{
width: min(820px, 90%); /* keep similar look; doesn’t change its anchor */
height: min(500px, 62vh);
}.hero-left-rail{
padding-left: 0;
margin-left: 0;
}.hero-actions-rail{
left: 0; /* now this becomes close to the browser edge because stage padding is tiny */
}.hero-center-copy{
margin-top: 50px; /* move the whole headline row up a bit */
}.hero-headline{
margin-top: 0;
line-height: 1.3; /* slightly tighter to look more “premium†*/
}padding-left: clamp(8px, 1.2vw, 18px);
padding-right: clamp(8px, 1.2vw, 18px);
/* Add vertical breathing room between headline and tiles */
.hero-tiles{
margin-top: 28px; /* try 24px–48px to taste */
}.hero-mock-inner{
max-width: 100%;
padding-left: clamp(8px, 1vw, 16px); /* very small left gutter */
padding-right: clamp(8px, 1vw, 16px); /* very small right gutter */
}.hero-left-rail,
.hero-center-copy,
.hero-actions-rail{
margin-left: 0;
padding-left: 0;
}.hero-tiles{
justify-self: end;
margin-right: 0;
}.hero-mock-inner{
grid-template-columns: minmax(260px, 1fr) minmax(700px, 1.4fr);
}@media (min-width: 1400px){.hero-mock-inner{
grid-template-columns: minmax(300px, 1fr) minmax(900px, 1.6fr);
}}@media (max-width: 768px){.hero-mock{
/* no scroll inside hero */
}.hero-mock-inner{
/* compact but readable */
/* tiles area */
}.hero-center-copy{
}.hero-headline{
}.hero-left-rail{
}.hero-sub{
}.hero-shipping-text{
line-height: 1.1;
}.hero-actions-rail{
}.hero-actions-rail .btn-pill{
}.hero-tiles{
/* image row taller than collections row */
}.tile-image{
}.tile-collection{
}.tile-collection-1{
}.tile-collection-2{
}.tile-center{
}.tile{
padding: 12px;
}}@media (max-width: 768px){.hero-mock{
}.hero-mock-inner{
/* title block, tiny spacer, tiles block */
}.hero-center-copy{ }.hero-headline{
}.hero-left-rail{
}.hero-sub{ }.hero-shipping-text{ }.hero-tiles{
/* row3 reserved for bottom button */
}.tile-image{
}.tile-collection{
}.tile-collection-1{
}.tile-collection-2{
}.tile-center{
}.hero-actions-rail{
/* keeps above footer */
/* same width as left column */
}.hero-actions-rail .btn-pill{
/* small square-ish */
}.hero-actions-rail .btn-pill:last-child{
position: fixed;
left: 50%;
transform: translateX(-50%);
bottom: calc(62px + 14px); /* footer height + gap */
width: 120px;
height: 56px;
border-radius: 18px;
z-index: 9999;
}.hero-actions-rail .btn-pill,
.hero-actions-rail .btn-pill *{
white-space: nowrap;
word-break: keep-all;
}.hero-tiles{
/* reserves room for buttons above footer */
}}@media (max-width: 768px){.hero-mock{
}.hero-mock-inner{
/* tiles stretch => no empty bottom */
}.hero-center-copy{
margin: 0;
padding: 0;
}.hero-headline{
}.hero-left-rail{
margin: 0;
padding: 0;
}.hero-sub{
}.hero-shipping-text{
/* shrinks on small screens */
/* <- no wrapping */
}.hero-tiles{
padding: 0;
position: relative;
/* two rows, equal height */
}.tile-image{
position: relative;
/* fill */
}.tile-collection{
/* fill */
}.tile-collection-1{
left:auto; right:auto; transform:none;
}.tile-collection-2{
left:auto; right:auto; transform:none;
}.tile-center{
font-size: 12px;
letter-spacing: .12em;
padding: 12px;
text-align: center;
}.hero-actions-rail{
/* left column width (gap/2) */
}.hero-actions-rail .btn-pill{
}}@media (max-width: 768px){.hero-mock{
}.hero-mock-inner{
}.hero-center-copy,
.hero-left-rail,
.hero-tiles{
position: relative !important;
top: auto !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
transform: none !important;
margin: 0 !important;
}.hero-center-copy{ }.hero-left-rail{ }.hero-tiles{ }.hero-center-copy{ }.hero-headline{
font-size: clamp(30px, 7.6vw, 44px);
text-align: left;
}.hero-left-rail{ }.hero-sub{ font-size: 14px; }.hero-shipping-text{
}.hero-tiles{
align-items: stretch;
}.tile-image{
}.tile-collection{
}.tile-collection-1{ grid-row: 1; }.tile-collection-2{ grid-row: 2; }.hero-actions-rail{
}.hero-actions-rail .btn-pill{
}}@media (max-width: 768px){.hero-tiles{
/* pushes it to the right */
}.hero-tiles{
/* right column bigger */
}.tile-image,
.tile-collection{
width: 100%;
height: 100%;
}}@media (max-width: 768px){.hero-mock-inner{
/* add a 4th row for buttons */
}.hero-tiles{
}.hero-actions-rail{
/* Center them and create equal breathing room */
/* creates space above footer line */
flex-direction: row !important;
justify-content: space-between !important;
}.hero-actions-rail .btn-pill{
/* square size */
/* square box with rounded corners */
/* allow 2-line label if needed */
}.hero-actions-rail .btn-pill:last-child{
word-break: keep-all !important;
}.hero-tiles{
}}@media (max-width: 768px){.hero-tiles{
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}.hero-actions-rail{
position: relative !important;
/* center the whole row on screen */
/* guarantees no overlap */
/* place vertically in the middle between tiles and footer */
padding-top: 14px !important;
padding-bottom: 14px !important;
/* side-by-side */
left: auto !important;
right: auto !important;
top: auto !important;
bottom: auto !important;
transform: none !important;
z-index: 20 !important;
}.hero-actions-rail .btn-pill{
min-width: 0 !important;
/* BOLD */
/* never split letters like “Product s†*/
}.hero-actions-rail .btn-pill:first-child{ justify-self: start !important; }.hero-actions-rail .btn-pill:last-child{ justify-self: end !important; }}@media (max-width: 768px){.hero-mock{
}.hero-mock-inner{
/* visible margin left/right */
}.hero-center-copy,
.hero-left-rail,
.hero-tiles,
.hero-actions-rail{
}.hero-center-copy{ }.hero-left-rail{ }.hero-shipping-text{
}.hero-tiles{
/* Center the whole tile group on screen with small margins */
/* top image row auto by aspect, bottom fills */
/* centers vertically inside its row */
}.tile-image{
/* wider than tall (tweak 1.25–1.6) */
}.tile-image img{
}.tile-collection{
}.tile-collection-1{ }.tile-collection-2{ }.tile-label,
.tile-center{
font-size: 12px;
letter-spacing: .12em;
padding: 12px;
text-align: center;
}.hero-actions-rail{
/* align with tiles width */
/* Creates clean “middle band†between tiles and footer */
}.hero-actions-rail .btn-pill{
/* square */
/* dark gray box */
/* bold */
/* no weird splitting */
}.hero-actions-rail .btn-pill:last-child{
/* slightly smaller so it fits 1 line */
}}@media (max-width: 768px) {html, body { }body { overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; }.page {
min-height: 100svh;
display: grid;
grid-template-rows: auto 1fr auto; /* header / main / footer */
}header, .site-header {
position: sticky;
top: 0;
z-index: 50;
}footer, .site-footer {
position: static !important;
padding-bottom: calc(10px + env(safe-area-inset-bottom));
}main, .main, .hero {
min-height: 0;
}.hero {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between; /* removes the giant empty gap */
gap: 14px;
padding: 14px 16px 10px;
}.hero h1, .hero-title {
font-size: clamp(30px, 8.5vw, 44px);
line-height: 1.05;
margin: 0;
}.hero .brand, .hero-brand {
font-size: 14px;
margin-top: 6px;
}.hero .shipping, .hero-shipping {
font-size: 11px;
letter-spacing: 0.22em;
white-space: nowrap; /* keep on one line */
}.cta-row, .hero-ctas {
width: 100%;
display: flex;
gap: 12px;
justify-content: space-between;
/* kill common “offscreen†causes */
position: static !important;
left: auto !important;
right: auto !important;
transform: none !important;
margin: 0 !important;
}.cta-row > a, .cta-row > button,
.hero-ctas > a, .hero-ctas > button {
flex: 1 1 0;
min-width: 0;
}.cta-card, .square-btn {
width: 100%;
aspect-ratio: 1 / 1;
border-radius: 20px;
padding: 12px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-size: 13px;
}.below, .hero-below {
display: grid;
grid-template-columns: 1fr;
gap: 2px;
}.preview-image, .hero-image {
width: 100%;
max-height: 22vh;
object-fit: contain;
}.collection-row, .hero-collections {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}.collection-card {
aspect-ratio: 1 / 1;
}footer, .site-footer {
font-size: 12px;
padding: 10px 16px;
}}:root {
/* safe area helpers */
--safe-top: env(safe-area-inset-top, 0px);
--safe-bottom: env(safe-area-inset-bottom, 0px);
--safe-left: env(safe-area-inset-left, 0px);
--safe-right: env(safe-area-inset-right, 0px);
}@media (max-width: 820px) {html, body {
height: 100%;
}body {
margin: 0;
/* IMPORTANT: allow *controlled* no-scroll via layout, not overflow hacks */
overflow: hidden;
}.page, body {
min-height: 100svh;
display: grid;
grid-template-rows: auto 1fr auto;
}header, .site-header {
padding-top: var(--safe-top);
}footer, .site-footer {
padding-bottom: calc(10px + var(--safe-bottom));
}.hero {
min-height: 0;
padding: 14px calc(16px + var(--safe-left)) 12px calc(16px + var(--safe-right));
display: grid;
grid-template-rows: auto auto 1fr; /* top text / buttons+image / collections */
gap: clamp(10px, 2.2vh, 18px);
}.hero-title {
font-size: clamp(28px, 7.5vw, 44px);
line-height: 1.05;
margin: 0;
}.hero-brand {
font-size: clamp(12px, 3.2vw, 16px);
margin-top: 8px;
}.hero-shipping {
font-size: clamp(10px, 2.8vw, 12px);
letter-spacing: 0.22em;
white-space: nowrap; /* always single line */
opacity: 0.9;
}.hero-ctas {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(10px, 2.2vw, 14px);
align-items: stretch;
/* kill absolute centering that causes offscreen */
position: static !important;
transform: none !important;
left: auto !important;
right: auto !important;
margin: 0 !important;
width: 100%;
}.cta-card {
width: 100%;
aspect-ratio: 1 / 1;
border-radius: 18px;
padding: 12px;
display: grid;
place-items: center;
text-align: center;
font-size: clamp(12px, 3.1vw, 14px);
}.hero-mid {
display: grid;
gap: clamp(10px, 2.2vh, 16px);
}.hero-image {
width: 100%;
height: auto;
max-height: 26svh; /* keeps it from pushing footer off-screen */
object-fit: contain;
}.hero-collections {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(10px, 2.2vw, 14px);
}.collection-card {
aspect-ratio: 1 / 1;
border-radius: 18px;
padding: 10px;
font-size: clamp(11px, 2.9vw, 13px);
}@media (orientation: landscape) {body { overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; }.hero {
padding: 10px calc(14px + var(--safe-left)) 10px calc(14px + var(--safe-right));
gap: 10px;
grid-template-rows: auto 1fr; /* top text, then split area */
}.hero-mid {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 12px;
align-items: start;
min-height: 0;
}.hero-title {
font-size: clamp(22px, 4.6vw, 34px);
}.hero-shipping {
font-size: clamp(9px, 2.1vw, 11px);
}.hero-ctas {
grid-template-columns: 1fr 1fr;
gap: 10px;
}.cta-card {
border-radius: 16px;
font-size: clamp(11px, 2.4vw, 13px);
}.hero-image {
max-height: 40svh; /* landscape needs taller image */
}.hero-collections {
grid-template-columns: 1fr 1fr;
gap: 10px;
}.collection-card {
border-radius: 16px;
font-size: clamp(10px, 2.2vw, 12px);
}footer, .site-footer {
padding: 8px 14px calc(8px + var(--safe-bottom));
font-size: 11px;
}}}@media (max-width: 768px){.hero-mock{
}.hero-mock-inner{
/* title / brand / tiles / buttons */
}.hero-center-copy,
.hero-left-rail,
.hero-tiles,
.hero-actions-rail{
position: relative !important;
top: auto !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
transform: none !important;
margin: 0 !important;
}.hero-center-copy{ text-align: left; }.hero-left-rail{ text-align: left; }.hero-headline{
margin: 0;
line-height: 1.02;
font-weight: 300;
}.hero-sub{ margin: 0; line-height: 1.1; }.hero-shipping-text{
margin-top: 6px;
opacity: .9;
/* prevents weird overflow on tiny widths */
}.hero-tiles{
justify-content: center;
}.tile-image{
}.tile-image img{ }.tile-collection{
width: 100%;
position: relative !important;
bottom: auto !important;
}.tile-collection-1{ }.tile-collection-2{ }.hero-actions-rail{
z-index: 20;
}.hero-actions-rail .btn-pill{
line-height: 1.05 !important;
/* keep single-line by default */
}.hero-actions-rail .btn-pill:last-child{
}}@media (max-width: 768px) and (orientation: portrait){.hero-headline{
font-size: clamp(30px, 7.2vw, 44px);
}.hero-sub{
font-size: clamp(13px, 3.6vw, 15px);
}.hero-shipping-text{
font-size: clamp(9px, 2.6vw, 11px);
}.tile-image{
/* wider than tall */
}.hero-tiles{
/* image row then collections row */
}.tile-image{ }.tile-collection-1{ }.tile-collection-2{ }}@media (max-width: 768px) and (orientation: landscape){.hero-mock-inner{
}.hero-headline{
}.hero-sub{
}.hero-shipping-text{
}.hero-tiles{
}.tile-image{
/* let it fill the left column */
}.tile-collection-1{ }.tile-collection-2{ }.hero-actions-rail .btn-pill{
}.hero-actions-rail .btn-pill:last-child{
}}@media (max-width: 768px){.fullpage{
height: 100svh !important;
overflow-y: auto !important;
scroll-snap-type: y mandatory !important;
-webkit-overflow-scrolling: touch;
}.panel{
min-height: 100svh !important;
scroll-snap-align: start !important;
display: flex;
}.panel.hero{
padding-top: 64px !important; /* header */
padding-bottom: 62px !important; /* footer */
align-items: stretch;
}.hero-mock{
padding-top: 0 !important;
padding-bottom: 0 !important;
}.hero-mock-inner{
/* minimal but visible margins */
/* headline / brand+ship / tiles / buttons */
}.hero-center-copy{ }.hero-left-rail{ }.hero-tiles{ }.hero-actions-rail{ }.hero-shipping-text{
}.hero-actions-rail{
}.hero-actions-rail .btn-pill{
aspect-ratio: 1 / 1 !important;
text-align: center !important;
/* never split letters */
}.hero-actions-rail .btn-pill:last-child{
white-space: nowrap !important;
padding: 0 6px !important;
}}@media (max-width: 768px) and (orientation: portrait){.hero-tiles{
width: min(92vw, 520px) !important;
margin: 0 auto !important;
height: 100% !important;
display: grid !important;
gap: clamp(10px, 2.4vw, 14px) !important;
}.tile-image{
position: relative !important;
width: 100% !important;
height: auto !important;
}.tile-collection{
position: relative !important;
bottom: auto !important;
}.tile-collection-1{ grid-row: 2 !important; }.tile-collection-2{ grid-row: 2 !important; }}@media (max-width: 768px) and (orientation: landscape){.hero-mock-inner{
}.hero-headline{
font-size: clamp(22px, 4.6vw, 32px) !important;
line-height: 1.0 !important;
margin: 0 !important;
}.hero-sub{
font-size: clamp(12px, 2.6vw, 14px) !important;
}.hero-shipping-text{
font-size: clamp(8px, 2.0vw, 10px) !important;
}.hero-tiles{
margin: 0 auto !important;
height: 100% !important;
display: grid !important;
gap: clamp(8px, 2vw, 12px) !important;
}.tile-image{
width: 100% !important;
aspect-ratio: auto !important;
}.tile-collection-1{ }.tile-collection-2{ }.hero-actions-rail .btn-pill{
width: clamp(74px, 14vw, 96px) !important;
font-size: 11px !important;
}.hero-actions-rail .btn-pill:last-child{
font-size: 10px !important;
}}@media (max-width: 768px){.hero-mock{
}.hero-mock-inner{
/* text / brand / tiles / buttons */
}.hero-center-copy,
.hero-left-rail,
.hero-tiles,
.hero-actions-rail,
.tile-image,
.tile-collection{
}.hero-center-copy{ grid-row: 1 !important; }.hero-left-rail{ grid-row: 2 !important; }.hero-shipping-text{
}.hero-tiles{
/* <- prevents “tiles not visible†*/
}.hero-actions-rail{
grid-row: 4 !important;
}.hero-actions-rail .btn-pill{
/* keep “All Our Products†one line */
}}@media (max-width: 768px) and (orientation: portrait){.hero-tiles{
grid-template-columns: 1fr 1fr !important;
grid-template-rows: auto 1fr !important;
align-content: stretch !important;
}.tile-image{
grid-column: 1 / span 2 !important;
grid-row: 1 !important;
aspect-ratio: 1.35 / 1 !important; /* slightly wider than tall */
overflow: hidden !important;
border-radius: 28px !important;
}.tile-image img{
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center !important;
}.tile-collection{
grid-row: 2 !important;
height: 100% !important;
border-radius: 28px !important;
}.tile-collection-1{ grid-column: 1 !important; }.tile-collection-2{ grid-column: 2 !important; }}@media (max-width: 768px) and (orientation: landscape){.hero-mock-inner{
padding: 8px 10px !important;
gap: 6px !important;
}.hero-tiles{
width: min(94vw, 720px) !important;
grid-template-columns: 1.15fr 0.85fr !important;
grid-template-rows: 1fr 1fr !important;
}.tile-image{
grid-column: 1 !important;
grid-row: 1 / span 2 !important;
height: 100% !important;
border-radius: 26px !important;
overflow: hidden !important;
}.tile-image img{
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
background: rgba(0,0,0,.35); /* keeps edges clean if aspect differs */
}.tile-collection-1{ grid-column: 2 !important; grid-row: 1 !important; }.tile-collection-2{ grid-column: 2 !important; grid-row: 2 !important; }}@media (max-width: 768px){.hero-mock{
}.hero-mock-inner{
/* minimal but visible side margins */
/* text / brand / tiles / buttons */
}.hero-center-copy,
.hero-left-rail,
.hero-tiles,
.hero-actions-rail,
.tile-image,
.tile-collection{
}.hero-shipping-text{
}.hero-tiles{
/*
}.hero-tiles{
}.tile-image{
/* slightly wider than tall */
}.tile-image img{
}.tile-collection{
}.tile-collection-1{ }.tile-collection-2{ }.hero-actions-rail{
/* sits nicely between tiles + footer */
}.hero-actions-rail .btn-pill{
/* prevent “Product s†letter splitting */
}.hero-actions-rail .btn-pill:last-child{
/* keep “All Our Products†on one line */
}}@media (max-width: 768px) and (max-height: 460px){.hero-tiles{
}.tile-image{
}.tile-image img{
}.tile-collection-1{ }.tile-collection-2{ }.hero-actions-rail .btn-pill{
}.hero-actions-rail .btn-pill:last-child{ }}@media (max-width: 768px){.hero-mock{
height: calc(100svh - 64px - 62px) !important;
overflow: hidden !important;
padding: 0 !important;
}.hero-mock-inner{
height: 100% !important;
/* minimal but visible side margins */
padding: clamp(8px, 2vw, 14px) clamp(10px, 3vw, 16px) !important;
display: grid !important;
/* text / brand / tiles / buttons */
gap: clamp(6px, 1.3vh, 10px) !important;
}.hero-center-copy,
.hero-left-rail,
.hero-tiles,
.hero-actions-rail,
.tile-image,
.tile-collection{
position: relative !important;
top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
transform: none !important;
margin: 0 !important;
}.hero-shipping-text{
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: clip !important;
font-size: clamp(8px, 2.4vw, 11px) !important;
letter-spacing: .14em;
}.hero-tiles{
margin: 0 auto !important;
/* critical: make tiles actually visible on short heights */
min-height: min(46vh, 320px) !important;
height: 100% !important;
}.hero-tiles{
}.tile-image{
/* slightly wider than tall */
width: 100% !important;
border-radius: 28px;
}.tile-image img{
object-position: center !important;
}.tile-collection{
min-height: 0 !important;
border-radius: 28px;
}.tile-collection-1{ }.tile-collection-2{ }.hero-actions-rail{
width: min(92vw, 520px) !important;
margin: 0 auto !important;
grid-template-columns: 1fr 1fr !important;
gap: clamp(10px, 2.4vw, 14px) !important;
justify-items: center !important;
align-items: center !important;
/* sits nicely between tiles + footer */
padding: clamp(6px, 1.1vh, 10px) 0 !important;
}.hero-actions-rail .btn-pill{
width: clamp(82px, 18vw, 110px) !important;
height: clamp(82px, 18vw, 110px) !important;
background: rgba(70,70,70,.70) !important;
border: 1px solid rgba(255,255,255,.10) !important;
border-radius: 18px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
font-weight: 800 !important;
font-size: 12px !important;
/* prevent “Product s†letter splitting */
white-space: nowrap !important;
word-break: keep-all !important;
overflow-wrap: normal !important;
hyphens: none !important;
padding: 0 8px !important;
}.hero-actions-rail .btn-pill:last-child{
font-size: 11px !important; /* keep “All Our Products†on one line */
}}@media (max-width: 768px) and (max-height: 460px){.hero-tiles{
width: min(94vw, 720px) !important;
grid-template-columns: 1.15fr 0.85fr !important;
grid-template-rows: 1fr 1fr !important;
min-height: min(52vh, 260px) !important;
}.tile-image{
grid-column: 1 !important;
grid-row: 1 / span 2 !important;
aspect-ratio: auto !important;
height: 100% !important;
}.tile-image img{
object-fit: cover !important;
object-position: 50% 35% !important;
}.tile-collection-1{ grid-column: 2 !important; grid-row: 1 !important; }.tile-collection-2{ grid-column: 2 !important; grid-row: 2 !important; }.hero-actions-rail .btn-pill{
width: clamp(70px, 14vw, 96px) !important;
height: clamp(70px, 14vw, 96px) !important;
font-size: 11px !important;
}.hero-actions-rail .btn-pill:last-child{ font-size: 10px !important; }}@media (max-width: 768px){.hero-mock-inner{
grid-template-columns: 1fr !important;
grid-template-rows: auto auto 1fr auto !important; /* headline / brand / tiles / buttons */
min-height: 0 !important;
}.hero-tiles{
grid-column: 1 !important;
grid-row: 3 !important;
display: grid !important;
grid-template-columns: 1fr 1fr !important;
grid-template-rows: auto 1fr !important;
gap: 20px !important;
width: 1 !important;
min-height: 26px !important; /* KEY: prevents “invisible tiles†*/
height: 1 !important;
align-content: stretch !important;
}.tile,
.tile-image,
.tile-collection{
position: relative !important;
top: auto !important;
right: auto !important;
bottom: auto !important;
left: auto !important;
transform: none !important;
}.tile-image{
grid-column: 1 / -1 !important;
grid-row: 1 !important;
aspect-ratio: 1.35 / 1 !important; /* or 16/10 */
height: auto !important;
overflow: hidden !important;
}.tile-image img{
width: 10% !important;
height: 10% !important;
object-fit: cover !important;
}.tile-collection{
grid-row: 2 !important;
aspect-ratio: 1 / 1 !important;
height: auto !important;
}.tile-collection-1{ grid-column: 1 !important; }.tile-collection-2{ grid-column: 2 !important; }}@media (max-width: 768px){.hero-actions-rail{
display: none !important;
}}@media (max-width: 768px){.fullpage{
transform: translateX(1px); /* try -6px to -16px */
}}@media (max-width: 768px){html, body{
overflow-x: hidden !important;
}.fullpage{
overflow-x: hidden !important;
}}@media (max-width: 768px){.collection-row{
gap: 12px !important;
padding: 12px 12px 18px !important;
overflow-x: auto !important;
overflow-y: hidden !important;
scroll-snap-type: x mandatory !important;
-webkit-overflow-scrolling: touch;
/* allow left/right swipe ONLY here */
touch-action: pan-x !important;
}.collection-mock-card{
flex: 0 0 calc((100% - (12px * 2)) / 3) !important; /* 3 visible */
min-width: calc((100% - (12px * 2)) / 3) !important;
scroll-snap-align: start;
}.collection-mock-thumb{
aspect-ratio: 1 / 1; /* keeps thumbnail stable */
}.collection-mock-thumb img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}.collection-mock-title{ font-size: 18px !important; }.collection-mock-subtitle{ font-size: 14px !important; }.collection-mock-desc{ font-size: 12px !important; line-height: 1.3 !important; }}@media (max-width: 768px){.carousel-arrow{
display: none !important;
}}.fullpage::-webkit-scrollbar,
.collection-row::-webkit-scrollbar{
width: 0px;
height: 0px;
display: none;
}.fullpage,
.collection-row{
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE/old Edge */
}@media (min-width: 1024px){.collections-panel{
display: flex;
justify-content: center;
}.collections-panel .container{
max-width: 1400px; /* stage width — try 1200–1600 */
width: 100%;
}.collection-row{
justify-content: center; /* centers items if not overflowing */
padding: 24px 20px 32px;
gap: 28px;
}.collection-mock-card{
flex: 0 0 420px; /* card width — try 380–480 */
min-width: 420px;
}.collection-mock-thumb{
margin: 28px 28px 0;
border-radius: 26px;
}.collection-mock-title{
font-size: 40px;
}.collection-mock-subtitle{
font-size: 24px;
}.collection-mock-desc{
font-size: 17px;
line-height: 1.45;
}}.collections-mock .collections-panel{
position: relative;
padding-bottom: 220px; /* space for banner + footer overlap */
}.collections-banner{
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 180px; /* adjust to taste */
z-index: 0; /* behind content */
overflow: hidden;
pointer-events: none; /* never blocks clicks */
}.collections-banner-img{
width: 100%;
height: 100%;
display: block;
object-fit: cover; /* “background-like†*/
object-position: center;
opacity: .85; /* optional */
}.collections-mock .container,
.collections-mock .collection-carousel{
position: relative;
z-index: 2;
}.footer-bar{
z-index: 40;
}@media (min-width: 1024px){#collections .container{
max-width: 1600px; /* try 1500–1900 */
padding-left: 12px; /* smaller side padding = more visible cards */
padding-right: 12px;
}@media (min-width: 1400px){#collections .container{
max-width: 1800px;
}}}.tile-image{
display:block; /* anchors behave better as blocks */
}.tile-image img{
}.hero-tiles{ position:relative; }.tile-image{ z-index:3; }.tile-collection{ z-index:2; }.tile-image img{
}.tile-image{
}.tile-image img{
/* fills box, no distortion */
/* keeps it centered */
}@media (min-width: 1024px){.tile-image img{
/* shows whole image */
background: #000; /* letterbox bars if needed */
}}.tile-image{
position: relative;
overflow: hidden;
}.tile-image img{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
transform: scale(var(--tileZoom, 1));
transform-origin: center;
}@media (min-width: 1024px){.tile-image{ --tileZoom: .5; }}@media (max-width: 800px){.tile-image{ --tileZoom: 13; }}@media (max-width: 768px){.tile-image img{
transform: translate(180px, 135px) scale(11) !important; /* right, down */
transform-origin: center;
}}@media (min-width: 1024px){.tile-image{
--imgScale: 1; /* 1 = normal, 1.1 = bigger, 0.9 = smaller */
--imgX: 0px; /* + moves right, - moves left */
--imgY: 0px; /* + moves down, - moves up */
background: #000; /* shows as “letterbox†if image doesn't fill */
}.tile-image img{
width: 100%;
height: 100%;
display: block;
/* NO CROPPING */
object-fit: contain !important;
object-position: center !important;
/* your manual controls */
transform: translate(var(--imgX), var(--imgY)) scale(var(--imgScale));
transform-origin: center;
}}@media (min-width: 990px){.collection-row{
-webkit-overflow-scrolling: auto !important;
/* switch from flex row to grid */
}.collection-mock-card{
}.collection-mock-card{
}.collection-carousel{
max-width: 1200px;
margin: 0 auto;
}}@media (min-width: 990px){.collection-row{
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
/* Use viewport-height driven row size so everything fits */
grid-auto-rows: minmax(0, 1fr) !important;
overflow: visible !important;
scroll-snap-type: none !important;
padding: 0 !important;
}.collection-mock-card{
width: 100% !important;
min-width: 0 !important;
flex: unset !important;
aspect-ratio: 16 / 9 !important;
height: auto !important;
display: grid !important; /* allows inner layout to fill */
grid-template-rows: 1fr !important;
overflow: hidden !important;
}.collection-mock-thumb,
.collection-mock-body{
display: none !important;
}.collection-mock-card a.collection-mock-thumb{
display: block !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
border-radius: inherit !important;
overflow: hidden !important;
}.collection-mock-card a.collection-mock-thumb img{
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
}.collection-mock-card{
position: relative;
}.collection-mock-card::after{
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg,
rgba(0,0,0,.15),
rgba(0,0,0,.55)
);
pointer-events: none;
}.collection-mock-card .collection-mock-body{
display: block !important;
position: absolute !important;
left: 18px;
right: 18px;
bottom: 16px;
z-index: 2;
padding: 0 !important;
background: transparent !important;
}.collection-mock-title{
margin: 0 !important;
line-height: 1.1 !important;
color: #fff !important;
}.collection-mock-subtitle,
.collection-mock-desc{
display: none !important; /* keep it clean */
}.collection-carousel,
.collections-mock-inner .container{
max-width: min(92vw, 1500px);
margin: 0 auto;
}}@media (min-width: 990px){.carousel-arrow{
display: none !important;
}.collections-mock-inner .container,
.collection-carousel{
max-width: min(96vw, 1800px) !important; /* wider stage */
margin: 0 auto !important;
}.collection-row{
gap: clamp(20px, 2vw, 36px) !important;
}.collection-mock-card{
transform: scale(1.06); /* try 1.03 – 1.12 */
transform-origin: center;
}.collection-mock-title{
font-size: clamp(18px, 1.6vw, 26px) !important;
}}.product-grid{
padding-bottom: 14px;
}.product-page{
padding-top: 110px; /* header space */
padding-bottom: 160px; /* footer space */
color: #fff;
}.product-page-inner{
width: 100%;
max-width: 100%;
padding: 0 clamp(16px, 2vw, 48px); /* VERY wide layout */
}.product-layout{
display: grid;
grid-template-columns: 1fr 1fr; /* equal */
gap: clamp(24px, 3vw, 64px);
align-items: start;
}.product-main-image{
border-radius: 22px;
overflow: hidden;
background: rgba(255,255,255,.04);
}.product-main-image img{
width: 100%;
height: 100%;
display: block;
/* This prevents cropping while staying inside the max-height */
object-fit: contain;
}.product-thumbs{
display: flex;
gap: 12px;
margin-top: 14px;
}.product-thumbs a{
aspect-ratio: 1 / 1;
border-radius: 14px;
overflow: hidden;
border: 1px solid rgba(255,255,255,.12);
}.product-thumbs img{
width: 100%;
height: 100%;
object-fit: cover;
}.product-info{
color: #fff;
}.product-title{
font-size: clamp(28px, 3.4vw, 54px);
font-weight: 300;
margin: 0 0 14px 0;
color: #fff;
}.product-price{
font-size: 20px;
margin-bottom: 18px;
color: #fff;
}.product-compare{
margin-left: 12px;
text-decoration: line-through;
opacity: .6;
}.product-options label{
display: block;
margin: 14px 0 6px;
font-size: 13px;
opacity: .8;
}.product-options select{
width: 100%;
height: 44px;
border-radius: 999px;
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.2);
color: #fff;
padding: 0 16px;
}.product-buy{
width: 100%;
height: 52px;
margin-top: 18px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.25);
background: rgba(255,255,255,.18);
color: #fff;
font-size: 15px;
cursor: pointer;
}.product-buy:hover{
background: rgba(255,255,255,.28);
}.product-description{
}@media (max-width: 900px){.product-layout{
}}.product-description{
margin-top: 22px;
line-height: 1.7;
color: rgba(255,255,255,.95);
/* NEW: makes the text feel like it matches the image block */
max-width: 62ch;
}.product-thumbs a{
width: 72px; /* was 88px */
}.collection-card,
.collection-mock-card{
height: auto !important;
}.collection-thumb,
.collection-mock-thumb{
aspect-ratio: 16 / 9 !important;
height: auto !important;
}.collection-thumb img,
.collection-mock-thumb img{
width: 100% !important;
height: 100% !important;
object-fit: cover !important; /* original behavior */
}.product-page .product-title{
font-size: clamp(28px, 3.4vw, 54px);
font-weight: 300;
line-height: 1.05;
margin: 0 0 14px 0;
color: #fff;
}.product-grid .product-title,
.grid .product-title,
.product-card .product-title{
font-size: 14px !important;
font-weight: 650 !important;
line-height: 1.25 !important;
margin: 0 0 6px 0 !important;
color: #fff !important;
}.product-card h3,
.product-card h3 a{
font-size: 14px !important;
line-height: 1.25 !important;
color: #fff !important;
}@media (max-width: 900px){.product-page{
padding-top: 86px; /* less header gap feel */
padding-bottom: 150px; /* still clears fixed footer */
}.product-page-inner{
padding: 0 14px; /* less side padding than desktop */
}.product-layout{
grid-template-columns: 1fr !important;
gap: 14px !important;
}.product-main-image{
border-radius: 18px;
max-height: 42vh; /* key: prevents “zoomed†feeling */
}.product-main-image img{
object-fit: contain; /* no cropping */
}.product-thumbs{
gap: 10px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
padding-bottom: 6px;
}.product-thumbs a{
width: 64px;
flex: 0 0 auto;
}.product-page .product-title{
margin-bottom: 10px;
}.product-price{
font-size: 16px;
margin-bottom: 12px;
}.product-options label{
margin-top: 12px;
font-size: 12px;
}.product-options select{
height: 42px;
font-size: 14px;
}.product-buy{
height: 46px;
font-size: 14px;
margin-top: 14px;
}.product-description{
margin-top: 16px;
font-size: 14px;
line-height: 1.65;
max-width: 100%;
}}@media (max-width: 900px){body.template-product{
/* no side-to-side */
}body.template-product *{
max-width: 100%;
}body.template-product{
word-break: normal;
overflow-wrap: anywhere;
}}@media (max-width: 900px){body.template-product .product-page{
padding-top: 78px; /* smaller top space */
padding-bottom: 150px; /* clears fixed footer */
}body.template-product .product-page-inner{
/* slightly tighter */
}body.template-product .product-layout{
}body.template-product .product-main-image{
/* SMALLER = less “zoomed†*/
}body.template-product .product-main-image img{
width: 100% !important;
height: 100% !important;
object-position: center !important;
display: block;
}body.template-product .product-thumbs{
/* thumbs can scroll */
}body.template-product .product-thumbs a{
/* smaller */
}body.template-product .product-thumbs img{
width: 100%;
height: 100%;
object-fit: cover;
}body.template-product .product-page .product-title{
margin: 0 0 8px 0;
}body.template-product .product-price{
margin-bottom: 10px;
}body.template-product .product-options label{
margin: 10px 0 6px;
font-size: 11px;
opacity: .85;
}body.template-product .product-options select{
padding: 0 12px;
}body.template-product .product-buy{
margin-top: 12px;
}body.template-product .product-description{
margin-top: 14px;
max-width: 100%;
}}@media (max-width: 900px){body.template-product{
}body.template-product .product-page-inner{
max-width: 420px; /* <<< THIS is the main control knob */
margin: 0 auto;
padding: 0 10px; /* small gutters */
}body.template-product .product-layout{
grid-template-columns: 1fr !important;
gap: 10px !important;
}body.template-product .product-main-image{
max-height: 32vh; /* smaller visual footprint */
border-radius: 14px;
}body.template-product .product-main-image img{
object-fit: contain !important;
}body.template-product .product-thumbs a{
width: 52px;
}body.template-product .product-page .product-title{
font-size: 20px !important;
line-height: 1.15;
}body.template-product .product-price{
font-size: 14px !important;
}body.template-product .product-options select{
height: 36px;
font-size: 13px;
}body.template-product .product-buy{
height: 40px;
font-size: 13px;
}body.template-product .product-description{
font-size: 13px;
line-height: 1.55;
}}@media (max-width: 900px){body.template-product,
body.template-product html{
overflow-y: auto !important;
overflow-x: hidden !important;
height: auto !important;
}body.template-product{
position: static !important;
/* allow up/down only */
}body.template-product .fullpage,
body.template-product .panel,
body.template-product main,
body.template-product #MainContent{
height: auto !important;
min-height: 0 !important;
overflow: visible !important;
}}.collection-mock-thumb.collection-tile{
position: relative;
display: block;
overflow: hidden;
border-radius: 26px; /* keep your style */
}.collection-mock-thumb.collection-tile img{
width: 100% !important;
height: 100% !important;
display: block;
object-fit: cover !important; /* fills tile */
object-position: center !important;
}.collection-mock-thumb.collection-tile{
aspect-ratio: 16 / 9; /* desktop + mobile consistent */
background: #111;
}.collection-tile-title{
position: absolute;
left: 18px;
right: 18px;
bottom: 18px; /* <<< controls how "low" it sits */
padding: 12px 14px;
border-radius: 16px;
color: #fff;
font-weight: 700;
font-size: clamp(14px, 2vw, 18px);
letter-spacing: .06em;
text-transform: uppercase;
background: rgba(0,0,0,.35);
border: 1px solid rgba(255,255,255,.12);
backdrop-filter: blur(10px);
}@media (max-width: 768px){.collection-mock-thumb.collection-tile{
border-radius: 22px;
}.collection-tile-title{
left: 14px;
right: 14px;
bottom: 14px;
padding: 10px 12px;
font-size: 13px;
}}.collection-tap{
/* keep your card look, but make sure tap area is stable */
border-radius: 26px;
overflow: hidden;
}.collection-mock-link{
aspect-ratio: 16 / 9;
border-radius: 26px;
overflow: hidden;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}.collection-mock-link img{
width: 100% !important;
height: 100% !important;
display: block;
object-fit: cover !important;
object-position: center !important;
}.collection-title-overlay{
position: absolute;
left: 14px;
right: 14px;
bottom: 14px;
padding: 12px 14px;
border-radius: 16px;
color: #fff !important; /* FORCE WHITE */
font-weight: 700;
font-size: 14px;
letter-spacing: .08em;
text-transform: uppercase;
background: rgba(0,0,0,.38);
border: 1px solid rgba(255,255,255,.14);
backdrop-filter: blur(10px);
}@media (max-width: 768px){.collection-mock-link{
border-radius: 22px;
aspect-ratio: 16 / 9;
/* makes it feel easier to hit even with thumbs */
transform: translateZ(0);
}.collection-title-overlay{
bottom: 12px;
padding: 14px 14px;
font-size: 13px;
}}.collection-mock-link{
display: block !important;
position: relative !important;
width: 100% !important;
height: 100% !important;
}.collection-card,
.collection-tap{
position: relative;
}.collection-title-overlay{
pointer-events: none !important;
}.collection-mock-link img{
pointer-events: none !important;
}.product-card .product-thumb,
.grid .product-thumb,
.product-grid .product-thumb{
aspect-ratio: 1 / 1; /* <- change to 4/5 or 16/9 if you want */
width: 100%;
overflow: hidden;
background: #0a0a0a;
}.product-card .product-thumb img,
.grid .product-thumb img,
.product-grid .product-thumb img{
width: 100% !important;
height: 100% !important;
display: block;
object-fit: cover !important; /* consistent sizing */
object-position: center !important;
}.product-card .card__media,
.product-card .media,
.product-card .media img{
width: 100%;
}.product-card .card__media,
.product-card .media{
aspect-ratio: 1 / 1;
overflow: hidden;
}.product-card .card__media img,
.product-card .media img{
height: 100% !important;
object-fit: cover !important;
object-position: center !important;
}@media (min-width: 769px){.collections-mock{
/* your header is ~64px, footer ~62px */
/* vertical centering for all content */
}.collections-panel.collections-mock-inner{
}.collection-carousel{
align-content: center; /* centers inside the available height */
justify-items: center; /* centers horizontally */
row-gap: 18px; /* space between grid and banner (if used) */
}.collection-grid.collection-row{
/* If you’re using the 2 rows x 3 layout on desktop: */
display: grid !important;
/* vertical centering inside panel */
}.collection-mock-card{
height: auto;
}.collection-mock-thumb{
aspect-ratio: 16 / 9;
}.collection-mock-thumb img{
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}}@media (min-width: 769px){.collections-mock{
min-height: 100vh;
padding-top: 24px; /* header space */
padding-bottom: 62px;/* footer space */
display: flex;
align-items: center;
justify-content: center;
}.collections-panel.collections-mock-inner{
width: 100%;
padding: 0 !important;
display: flex;
align-items: center;
justify-content: center;
}.collection-carousel{
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}.collection-grid.collection-row{
width: min(1600px, 96vw); /* wider than before */
margin: 0 auto;
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: clamp(22px, 2.4vw, 40px) !important;
justify-content: center;
align-content: center;
}.collection-mock-card{
transform: scale(1.06); /* <<< main size control knob */
transform-origin: center;
}.collection-mock-link{
aspect-ratio: 16 / 14;
}.collection-title-overlay{
font-size: clamp(10px, 1.4vw, 16px);
padding: 14px 18px;
}}.cart-page .cart-list{
list-style:none;
padding:0;
margin:16px 0 0;
display:flex;
flex-direction:column;
gap:14px;
}.cart-page .cart-row{
display:flex;
gap:14px;
align-items:center;
padding:12px;
border-radius:16px;
background: rgba(255,255,255,.06);
}.cart-page .cart-thumb{
width:84px;
height:84px;
flex:0 0 84px;
border-radius:14px;
overflow:hidden;
display:block;
}.cart-page .cart-thumb img{
width:100%;
height:100%;
display:block;
object-fit:cover;
}.cart-page .cart-info{
flex:1;
min-width:0;
display:flex;
flex-direction:column;
gap:8px;
}.cart-page .cart-name{
color:#fff;
text-decoration:none;
font-size:16px;
line-height:1.2;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}.cart-page .cart-meta{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
color: rgba(255,255,255,.85);
font-size:14px;
}.cart-page .cart-price{
color:#fff;
font-weight:600;
}.cart-page .cart-footer{
margin-top:18px;
padding-top:14px;
border-top:1px solid rgba(255,255,255,.12);
}.cart-page .cart-subtotal{
display:flex;
justify-content:space-between;
align-items:center;
color:#fff;
margin-bottom:14px;
font-size:16px;
}.cart-page .cart-buttons{
display:flex;
gap:12px;
flex-wrap:wrap;
}.cart-page .cart-buttons .btn,
.cart-page .cart-checkout-form .btn{
border-radius:999px;
padding:12px 18px;
}@media (max-width: 768px){.cart-page .cart-thumb{ flex-basis:74px; }.cart-page .cart-buttons{ flex-direction:column; }.cart-page .cart-buttons .btn,
.cart-page .cart-checkout-form .btn{ width:100%; }}.header-3col{
align-items:center;
gap:16px;
}.header-left{min-height:1px;}.header-actions{
justify-self:end;
display:flex;
align-items:center;
gap:10px;
}.header-icon{
position:relative;
width:38px;
height:38px;
border-radius:999px;
display:flex;
align-items:center;
justify-content:center;
font-size:16px;
color:#fff;
background: rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.12);
text-decoration:none;
}.header-icon:hover{
background: rgba(255,255,255,.12);
}.cart-badge{
position:absolute;
top:-6px;
right:-6px;
min-width:18px;
height:18px;
border-radius:999px;
background:#fff;
color:#000;
font-size:11px;
font-weight:700;
display:flex;
align-items:center;
justify-content:center;
padding:0 5px;
}@media (max-width: 760px){.header-icon{width:34px;height:34px;font-size:15px;}.header-actions{gap:8px;}}.cart-actions-row{
margin-top: 6px;
display: flex;
justify-content: flex-end;
}.cart-remove-btn{
width: 36px;
height: 36px;
border-radius: 999px;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
font-size: 16px;
background: rgba(255, 0, 0, 0.12);
border: 1px solid rgba(255, 0, 0, 0.35);
color: #ff3b3b;
transition: background .15s ease, transform .1s ease;
}.cart-remove-btn:hover{
background: rgba(255, 0, 0, 0.22);
transform: scale(1.05);
}@media (max-width: 768px){html, body{ }.cart-page .container{
padding-left: 14px;
padding-right: 14px;
}.cart-page .cart-row{
width: 100%;
min-width: 0;
padding: 10px;
}.cart-page .cart-thumb{
width: 64px;
height: 64px;
flex: 0 0 64px;
}.cart-page .cart-info{
min-width: 0; /* allows ellipsis/wrap instead of overflow */
flex: 1 1 auto;
}.cart-page .cart-name{
white-space: normal; /* allow wrapping on mobile */
overflow: hidden;
text-overflow: ellipsis;
}.cart-page .cart-meta{
flex-wrap: wrap;
gap: 8px;
}.cart-page .cart-price{
margin-left: auto;
}.cart-page .cart-actions-row{
justify-content: flex-end;
}.cart-page .cart-remove-btn{
width: 34px;
height: 34px;
}}.cart-page{
padding-bottom: calc(62px + 18px + env(safe-area-inset-bottom));
}@media (max-width: 768px){.cart-page{
padding-bottom: calc(62px + 28px + env(safe-area-inset-bottom));
}}@media (max-width: 768px){html, body{
overflow-y: auto !important;
overflow-x: hidden !important;
height: auto !important;
max-width: 100% !important;
}body{
position: static !important; /* fixes some "locked scroll" setups */
touch-action: pan-y !important; /* allow up/down only */
}img, video, iframe, canvas, svg{
max-width: 100%;
height: auto;
}}@media (max-width: 768px){.cart-page{
padding-top: calc(64px + env(safe-area-inset-top)) !important;
}}@media (max-width: 768px){.collections-mock .collection-mock-card{
transform: scale(1);
transform-origin: center;
}.collections-mock .collection-row{
transform: translateY(-8px);
}}@media (max-width: 768px){.collections-mock .collection-carousel{
transform: scale(1.15); /* <<< SCALE FACTOR (1.2, 1.4, 1.6, 2, etc) */
transform-origin: center center;
}.collections-mock .collection-carousel{
position: relative;
top: -27px; /* <<< MOVE UP/DOWN (negative = up, positive = down) */
}.collections-mock .collections-panel,
.collections-mock .collections-mock-inner,
.collections-mock .panel,
.collections-mock{
overflow: visible !important;
}}@media (max-width: 768px){.collections-mock .collection-mock-link,
.collections-mock .collection-mock-thumb,
.collections-mock .collection-card{
width: 100%;
height: 100%;
}.collections-mock .collection-mock-link img,
.collections-mock .collection-card img{
/* <<< THIS REMOVES THE BORDER */
object-position: center center !important;
display: block;
}.collections-mock .collection-mock-thumb,
.collections-mock .collection-mock-link{
padding: 0 !important;
margin: 0 !important;
}}@media (max-width: 768px){.collections-mock .collection-mock-thumb,
.collections-mock .collection-mock-link,
.collections-mock .collection-card{
overflow: hidden !important;
}.collections-mock .collection-mock-link img,
.collections-mock .collection-card img{
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
/* ===== TUNING KNOBS ===== */
transform: scale(1); /* <<< increase to 1.2 / 1.3 / 1.4 */
object-position: 50% 50%; /* <<< move image: X% Y% */
}}@media (max-width: 768px){.collections-mock .collection-mock-card{
padding: 0 !important;
overflow: hidden !important;
}.collections-mock .collection-mock-thumb,
.collections-mock .collection-thumb{
margin: 0 !important; /* <-- kills the big inset border */
padding: 0 !important;
border-radius: 0 !important; /* optional: remove inner rounding */
width: 100% !important;
height: 100% !important;
display: block !important;
}.collections-mock .collection-mock-link{
display: block !important;
width: 100% !important;
height: 100% !important;
}.collections-mock .collection-mock-thumb img,
.collections-mock .collection-thumb img{
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
}}@media (max-width: 768px){:root{
--mobile-tile-radius: 12px; /* <<< CHANGE THIS: 0px, 6px, 10px, 16px, etc */
}.collections-mock .collection-mock-card,
.collections-mock .collection-mock-thumb,
.collections-mock .collection-mock-link,
.collections-mock .collection-mock-thumb img{
border-radius: var(--mobile-tile-radius) !important;
}}@media (max-width: 768px){.collections-mock .collection-title-overlay{
/* removes any label bg */
/* <<< move up/down */
/* <<< smaller/bigger */
/* force ONE line */
}.collections-mock .tile-label{
background: transparent !important;
}}@media (max-width: 768px){.collections-mock .collection-title-overlay{
background: transparent !important;
padding: 0 !important;
position: absolute !important;
left: 12px !important;
right: 12px !important;
bottom: 12px !important; /* <<< move up/down */
color: #fff !important;
font-size: 8.5px !important; /* <<< size control */
font-weight: 700 !important;
line-height: 1.05 !important;
/* CENTER THE TEXT */
text-align: center !important;
/* ONE LINE, NO ELLIPSIS */
white-space: nowrap !important;
overflow: visible !important;
text-overflow: clip !important;
text-shadow: 0 8px 18px rgba(0,0,0,.55);
}}@media (max-width: 768px){.header .container,
.header-mock .container{
padding-left: 0px !important;
padding-right: 12px !important;
}.nav.nav-center{
overflow-x: auto !important; /* was hidden */
overflow-y: hidden !important;
-webkit-overflow-scrolling: touch;
justify-content: flex-start !important;
padding: 0 6px !important; /* keeps first/last link visible */
scrollbar-width: none; /* Firefox hide */
}.nav.nav-center::-webkit-scrollbar{ /* Chrome/Safari hide */
height: 0;
}.nav.nav-center a,
.nav.nav-center .sep{
flex: 0 0 auto;
}}@media (min-width: 769px){.hero-mock-inner{
--left-wall: 40px; /* <<< adjust if you want tighter/looser */
}.hero-center-copy{
justify-self: start;
text-align: left;
padding-left: var(--left-wall) !important;
}.hero-left-rail{
justify-self: start;
text-align: left;
padding-left: var(--left-wall) !important;
}.hero-actions-rail{
left: var(--left-wall) !important; /* <<< lines up with text */
}.hero-headline,
.hero-sub,
.hero-shipping-text{
margin-left: 0 !important;
}}.hero-sub::before{
content: " ";
}.search-page{ padding: 110px 0 90px; }.search-inner{ max-width: 920px; }.search-title{
margin: 0 0 18px 0;
font-size: 28px;
font-weight: 700;
color: var(--text);
}.search-form{ margin: 0 0 14px 0; }.search-input{
width: 100%;
height: 56px;
border-radius: 16px;
border: 1px solid var(--line);
background: rgba(255,255,255,.04);
color: var(--text);
padding: 0 18px;
font-size: 16px;
outline: none;
}.search-input:focus{
border-color: rgba(255,255,255,.22);
background: rgba(255,255,255,.06);
}.search-hint{
color: var(--muted);
margin: 0 0 18px 0;
}.search-grid{ margin-top: 18px; }@media (max-width: 768px){.search-page{
padding: 86px 0 84px; /* room for fixed header/footer */
}.search-inner{
padding-left: 12px;
padding-right: 12px;
}.search-title{
font-size: 22px;
margin-bottom: 12px;
}.search-input{
height: 50px;
border-radius: 14px;
font-size: 16px; /* keep 16px to prevent iOS zoom */
padding: 0 14px;
}.search-hint{
font-size: 13px;
margin-bottom: 14px;
}.search-grid.grid{
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}@media (max-width: 360px){.search-grid.grid{
grid-template-columns: 1fr;
}}html, body{
overflow-x: hidden;
}}.tile.tile-collection .tile-bg-img{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover; /* change this */
object-position: center;
display: block;
}.product-page,
.product-page * {
font-family: var(--font) !important;
}.product-page{
--vspace: 1.5rem; /* <<< MAIN CONTROL: try 1.25rem, 1.5rem, 2rem */
}.product-page h1,
.product-page h2,
.product-page h3,
.product-page p,
.product-page form,
.product-page label,
.product-page select,
.product-page button,
.product-page .product-price,
.product-page .product-desc,
.product-page .product-description,
.product-page .qty-row,
.product-page .buy-now-row,
.product-page .product-media,
.product-page .product-info,
.product-page .product-thumbs{
margin-top: 0 !important;
margin-bottom: 0 !important;
}.product-page .product-info > *{
margin-bottom: var(--vspace) !important;
}.product-page .product-media{
margin-bottom: var(--vspace) !important;
}.product-page .product-thumbs{
margin-top: var(--vspace) !important;
}.product-page .product-form > *{
margin-bottom: var(--vspace) !important;
}.product-page .product-info > *:last-child,
.product-page .product-form > *:last-child{
margin-bottom: 0 !important;
}.product-page .product-desc,
.product-page .product-description{
margin-top: var(--vspace) !important;
}.product-page button,
.product-page .btn{
margin-top: 0 !important;
}.product-page .qty-row,
.product-page .variant-label,
.product-page .variant-select{
margin-bottom: calc(var(--vspace) * 0.6) !important;
}.product-page .product-desc p,
.product-page .product-description p {
margin-bottom: calc(var(--vspace) * 1) !important; /* 3rem */
}.product-page .product-desc > *,
.product-page .product-description > * {
margin-bottom: calc(var(--vspace) * 1) !important;
}.product-page .product-title {
margin-bottom: calc(var(--vspace) * 1) !important;
}.product-page .product-price {
margin-bottom: calc(var(--vspace) * 1) !important;
}.product-page .variant-label {
}.product-page .product-desc {
margin-top: calc(var(--vspace) * 1) !important;
}.product-page .product-info {
max-width: 100%;
}.product-page .product-controls,
.product-page .variant-select,
.product-page .qty-row input,
.product-page .qty-row,
.product-page .variant-label {
width: 100%;
}.product-page .variant-select,
.product-page .qty-row input {
display: block;
width: 100%;
background: #ffffff !important;
color: #000000 !important;
border: 1px solid rgba(0,0,0,0.15);
padding: 14px 16px;
font-size: 16px;
border-radius: 0;
box-sizing: border-box;
}.product-page .variant-label,
.product-page .qty-row label {
display: block;
margin-bottom: 0.5rem;
/* labels stay white */
}.product-page input[type=number]::-webkit-inner-spin-button,
.product-page input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}.product-page input[type=number] {
-moz-appearance: textfield;
}.product-page .product-title,
.product-page .product-controls,
.product-page .variant-select,
.product-page .qty-row input {
max-width: 100%;
}.product-page .product-form {
width: 100%;
}.product-page .variant-row,
.product-page .qty-row {
display: block;
margin: 0 !important;
padding: 0 !important;
}.product-page .variant-row label,
.product-page .qty-row label {
display: block;
margin: 0 0 0.5rem 0 !important;
padding: 0 !important;
line-height: 1.2;
}.product-page .variant-select,
.product-page .qty-row input {
margin: 0 !important;
}.product-page select,
.product-page input {
margin-top: 0 !important;
}.product-page .variant-select,
.product-page .qty-select {
display: block;
width: 100%;
background: #ffffff !important;
color: #000000 !important;
border: 1px solid rgba(0,0,0,0.15);
padding: 14px 16px;
font-size: 16px;
border-radius: 0;
box-sizing: border-box;
margin: 0 !important;
}.product-page .variant-select option,
.product-page .qty-select option {
color: #000000 !important;
background: #ffffff !important;
}.product-page .variant-label,
.product-page .qty-row label {
color: #ffffff !important;
}.product-page .variant-row,
.product-page .qty-row,
.product-page .variant-select,
.product-page .qty-select {
width: 100%;
}.product-page .variant-label {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}.product-page .variant-select {
margin-top: 0 !important;
}.product-page .qty-row label {
margin-bottom: 0 !important;
}.product-page .qty-select {
margin-top: 0 !important;
}@media (min-width: 990px) {.product-page .product-media {
}.product-page .product-secondary-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--vspace, 1.5rem);
width: 100%;
}.product-page .product-secondary-img {
}}@media (max-width: 989px) {.product-page .product-secondary-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--vspace, 1.5rem);
}.product-page .product-secondary-img {
width: 100%;
height: auto;
display: block;
}}@media (min-width: 990px) {.product-page .product-media {
display: flex;
flex-direction: column;
gap: var(--vspace, 1.5rem);
}.product-page .product-secondary-desktop {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--vspace, 1.5rem);
width: 100%;
}.product-page .product-secondary-img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
}}@media (min-width: 990px) {.product-page .product-secondary-mobile {
display: none !important;
}}@media (max-width: 989px) {.product-page .product-secondary-desktop {
display: none !important;
}}.product-page .product-form {
--control-space: 0.5rem;
}.product-page .product-form label {
display: block;
margin-bottom: var(--control-space) !important;
}.product-page .product-form select,
.product-page .product-form input {
display: block;
margin-bottom: var(--control-space) !important;
}.product-page .product-form .add-to-cart {
margin-top: var(--control-space) !important;
}.product-page .product-form .buy-now-row {
margin-top: var(--control-space) !important;
}.product-page .product-secondary-img {
cursor: pointer;
transition: opacity 0.2s ease, transform 0.2s ease;
}.product-page .product-secondary-img:hover {
opacity: 0.85;
transform: scale(0.995);
}.product-page .product-secondary-img.is-active {
outline: 2px solid rgba(255,255,255,0.6);
outline-offset: -2px;
}@media (min-width: 990px) {.product-page .product-info img {
display: none !important;
}}@media (max-width: 989px) {.product-page .product-secondary-grid.product-secondary-desktop {
display: flex !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
overflow-y: hidden !important;
-webkit-overflow-scrolling: touch;
gap: 8px; /* tiny spacing */
padding: 10px 0; /* space under main image */
margin-top: 10px;
scroll-snap-type: x mandatory;
}.product-page .product-secondary-grid.product-secondary-desktop::-webkit-scrollbar {
display: none;
}.product-page .product-secondary-grid.product-secondary-desktop .product-secondary-img {
flex: 0 0 auto !important;
width: 40px !important; /* fits at least 5 */
max-width: 72px; /* keeps them tiny */
height: auto !important; /* preserves shape */
display: block !important;
scroll-snap-align: start;
}}@media (max-width: 989px) {.product-page #ProductMainImage {
width: 100%;
height: 70vw; /* controls visual height */
max-height: 420px; /* safety cap */
object-fit: contain; /* keep whole image visible */
object-position: left center; /* <<< THIS MAKES IT HUG LEFT */
display: block;
}}@media (max-width: 900px){body.template-product{
/* page = vertical only */
}body.template-product .product-thumbs{
/* HUG LEFT */
align-items: center;
/* optional nice snap */
touch-action: pan-x !important; /* allow left/right ONLY here */
padding: 10px 0 6px 0; /* no extra left padding */
margin: 12px 0 0 0;
}body.template-product .product-thumbs a{
}body.template-product .product-thumbs::-webkit-scrollbar{ height: 0; }body.template-product .product-thumbs{ scrollbar-width: none; }}@media (max-width: 900px){body.template-product{
overflow-x: hidden !important;
touch-action: pan-y !important; /* vertical scroll allowed */
}body.template-product .product-thumbs{
display: flex !important;
flex-wrap: nowrap !important;
justify-content: flex-start !important; /* hugs the left */
gap: 10px !important;
overflow-x: auto !important;
overflow-y: hidden !important;
-webkit-overflow-scrolling: touch !important;
/* CRITICAL: re-enable horizontal gestures here */
/* allow vertical page scroll even if finger starts on a card */
touch-action: pan-x pan-y !important;
/* makes swiping feel better; prevents parent bounce */
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
padding-bottom: 6px;
}body.template-product .product-thumbs a{
flex: 0 0 auto !important;
scroll-snap-align: start;
}body.template-product .product-main-image,
body.template-product .product-page-inner,
body.template-product .product-layout{
overflow: visible !important;
}}@media (max-width: 900px) {body.template-index,
body.template-product {
overflow-x: hidden;
touch-action: pan-y;
}body.template-product .product-secondary-grid,
body.template-product .product-thumbs,
body.template-product .product-thumbs-mobile {
touch-action: pan-x;
}}@media (max-width: 989px) {.product-page .product-info .product-desc img {
display: none !important;
}}.product-page,
.product-page * {
color: #ffffff !important;
}::selection {
background: transparent;
color: #ffffff;
}::-moz-selection {
background: transparent;
color: #ffffff;
}* {
-webkit-tap-highlight-color: transparent;
}*:focus {
outline: none !important;
}@media (max-width: 900px) {.product-page .container {
padding-left: 16px !important;
padding-right: 16px !important;
}.product-page,
.product-page * {
max-width: 100% !important;
}.product-page .product-title,
.product-page .product-price,
.product-page .product-desc,
.product-page .product-desc * {
overflow-wrap: anywhere !important; /* breaks long words/URLs */
word-break: break-word !important;
hyphens: auto;
}.product-page .product-title { font-size: 20px !important; line-height: 1.15 !important; }.product-page .product-price { font-size: 16px !important; line-height: 1.2 !important; }.product-page .product-desc { font-size: 13px !important; line-height: 1.55 !important; }.product-page .product-layout { display: block !important; }.product-page .product-media,
.product-page .product-info { width: 100% !important; }.product-page .product-form {
width: 100% !important;
display: grid !important;
justify-items: center !important; /* centers each row */
}.product-page .variant-label,
.product-page .variant-select,
.product-page .qty-row,
.product-page .qty-row label,
.product-page .qty-row input,
.product-page .qty-select,
.product-page .add-to-cart,
.product-page .buy-now-row,
.product-page .buy-now-row * ,
.product-page .shopify-payment-button,
.product-page .shopify-payment-button__button,
.product-page .shopify-payment-button__more-options {
width: min(100%, 420px) !important; /* <<< ALL same width */
max-width: 420px !important;
box-sizing: border-box !important;
margin-left: auto !important;
margin-right: auto !important;
}.product-page .variant-label,
.product-page .qty-row label {
display: block !important;
text-align: left !important;
}.product-page .variant-select,
.product-page .qty-select,
.product-page .qty-row input,
.product-page .add-to-cart,
.product-page .shopify-payment-button__button,
.product-page .shopify-payment-button__more-options {
display: block !important;
padding: 12px 14px !important;
font-size: 15px !important;
line-height: 1.2 !important;
}.product-page .add-to-cart,
.product-page .shopify-payment-button__button,
.product-page .shopify-payment-button__more-options {
text-align: center !important;
}.product-page .shopify-payment-button__more-options {
padding: 12px 14px !important;
margin-top: 12px !important;
}.product-page .product-form label { margin: 0 0 10px 0 !important; }.product-page .product-form select,
.product-page .product-form input { margin: 0 0 14px 0 !important; }.product-page .add-to-cart { margin: 6px 0 14px 0 !important; }.product-page .buy-now-row { margin: 0 0 8px 0 !important; }}.product-page .product-desc,
.product-page .product-desc * {
}.product-page .product-desc::selection,
.product-page .product-desc *::selection {
}.product-page .product-desc::-moz-selection,
.product-page .product-desc *::-moz-selection {
}.product-page .product-desc,
.product-page .product-desc * {
}.product-page .product-desc *:focus {
}.product-page .product-desc,
.product-page .product-desc * {
color: #ffffff !important;
-webkit-tap-highlight-color: transparent !important;
user-select: none !important;
}.product-page .product-desc::selection,
.product-page .product-desc *::selection {
background: #000000 !important;
color: #ffffff !important;
}.product-page .product-desc::-moz-selection,
.product-page .product-desc *::-moz-selection {
background: #000000 !important;
color: #ffffff !important;
}.product-page .product-desc *:focus {
outline: none !important;
}.product-page .shopify-payment-button__button--shop-pay {
background: #ffffff !important;
color: #000000 !important;
border-radius: 999px !important; /* pill shape */
border: 1px solid rgba(0,0,0,0.2) !important;
font-weight: 600 !important;
letter-spacing: 0.3px;
}.product-page .shopify-payment-button__button--shop-pay:not([disabled]) {
background-image: none !important;
}.product-page .shopify-payment-button__button--shop-pay:hover {
background: #f2f2f2 !important;
}.product-page .shopify-payment-button__button {
border-radius: 999px !important;
}.product-page .shopify-payment-button__button span,
.product-page .shopify-payment-button__button {
color: #000000 !important;
}.bv-lightbox {
}.bv-lightbox.is-open {
/* blocks clicks to page underneath */
}.bv-lightbox__img {
}.bv-lightbox.is-open .bv-lightbox__img {
}body.bv-lightbox-open {
}.bv-lightbox {
position: fixed;
inset: 0;
z-index: 99999;
background: rgba(0,0,0,0.92);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
transition: opacity 220ms ease;
}.bv-lightbox.is-open {
opacity: 1;
pointer-events: auto; /* blocks clicks to page underneath */
}.bv-lightbox__stage {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
/* Prevent page from hijacking pinch/scroll while on the image */
touch-action: none;
}.bv-lightbox__img {
max-width: min(96vw, 1400px);
max-height: 92vh;
width: auto;
height: auto;
object-fit: contain;
transform: translate3d(0,0,0) scale(1);
transform-origin: center center;
transition: transform 220ms ease;
will-change: transform;
user-select: none;
-webkit-user-drag: none;
cursor: grab;
}.bv-lightbox.is-open .bv-lightbox__img {
transform: translate3d(0,0,0) scale(1);
}.bv-lightbox__img.is-grabbing {
cursor: grabbing;
}body.bv-lightbox-open {
overflow: hidden !important;
}.bv-collections-page{
}.bv-collections-head{
margin-bottom: 18px;
}.bv-collections-title{
}.bv-collections-subtitle{
margin: 0;
color: var(--muted);
font-size: 14px;
}.bv-collections-stack{
}.bv-collection-block{
border-top: 1px solid var(--line);
padding-top: 18px;
}.bv-collection-top{
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
margin-bottom: 12px;
}.bv-collection-name{
margin: 0;
font-size: 16px;
font-weight: 750;
}.bv-collection-desc{
margin-top: 6px;
color: var(--muted);
font-size: 13px;
line-height: 1.35;
max-width: 70ch;
}.bv-product-row{
}.bv-product-row::-webkit-scrollbar{ }.bv-product-card{
transition: transform .18s ease, border-color .2s ease, background .2s ease;
}.bv-product-card:hover{
transform: translateY(-2px);
border-color: rgba(255,255,255,.18);
background: rgba(255,255,255,.045);
}.bv-product-thumb{
}.bv-product-thumb img{
}.bv-product-body{
padding: 10px 12px 12px;
}.bv-product-title{
font-size: 13px;
font-weight: 650;
line-height: 1.25;
}.bv-product-price{
margin-top: 6px;
font-size: 12px;
color: var(--muted);
}@media (max-width: 760px){.bv-collections-page{ }.bv-product-card{ }}@media (max-width: 760px) {.site-header,
header,
.header,
.bv-header {
transform: scale(0.92);
transform-origin: top center;
}}.header-3col{
display: grid;
grid-template-columns: 1fr auto auto;
}.nav-center{
justify-self: start;
margin-left: -40px; /* adjust: -20px subtle, -60px more aggressive */
}.bv-collections-page{
padding-top: 96px;
padding-bottom: 80px;
}.bv-collections-title{
margin: 0 0 18px 0;
font-size: 22px;
font-weight: 800;
}.bv-collections-stack{
display: grid;
gap: 64px; /* LARGE GAP between collections */
}.bv-collection-title{
margin: 0 0 12px 0;
font-size: 16px;
font-weight: 850;
}.bv-collection-title a{
text-decoration: none;
}.bv-collection-divider{
height: 3px; /* bold separate line */
width: 100%;
background: rgba(255,255,255,.92);
border-radius: 999px;
opacity: .85;
}.bv-product-row{
display: flex;
gap: 14px;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
padding: 18px 16px 4px; /* gives breathing room */
}.bv-product-row::-webkit-scrollbar{ height: 0; }.bv-row-loading{
color: var(--muted);
padding-left: 8px;
}.bv-product-card{
position: relative;
flex: 0 0 260px;
min-width: 260px;
border-radius: var(--radius);
overflow: hidden;
border: 1px solid rgba(255,255,255,.14);
background: rgba(255,255,255,.03);
scroll-snap-align: start;
}.bv-product-thumb{
aspect-ratio: 1 / 1;
background: #0b0b0b;
}.bv-product-thumb img{
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}.bv-price-badge{
position: absolute;
left: 12px;
bottom: 12px;
font-weight: 900;
font-size: 14px;
color: #fff;
text-shadow: 0 1px 10px rgba(0,0,0,.65);
letter-spacing: .2px;
}.bv-see-more{
flex: 0 0 220px;
min-width: 220px;
border-radius: var(--radius);
border: 1px solid rgba(255,255,255,.18);
background: rgba(255,255,255,.02);
display: grid;
place-items: center;
scroll-snap-align: start;
text-decoration: none;
}.bv-see-more span{
color: #fff;
font-weight: 850;
letter-spacing: .3px;
opacity: .95;
}@media (min-width: 1000px){.bv-product-row{
padding-left: 24px;
padding-right: 24px;
}.bv-product-card{
flex-basis: 300px;
min-width: 300px;
}}@media (max-width: 760px){.bv-collections-page{ padding-top: 86px; padding-bottom: 64px; }.bv-collections-stack{ gap: 54px; }.bv-product-row{
gap: 12px;
padding: 16px 12px 4px;
}.bv-product-card{
flex-basis: 68vw;
min-width: 68vw;
}.bv-see-more{
flex-basis: 52vw;
min-width: 52vw;
}.bv-price-badge{
left: 10px;
bottom: 10px;
font-size: 13px;
}}.bv-collections-page-v3{
padding-top: 96px;
padding-bottom: 90px;
}.bv-page-title{
margin: 0 0 22px 0;
font-size: 22px;
font-weight: 900;
}.bv-collections-stack-v3{
display: grid;
gap: 74px; /* LARGE GAP between collections */
}.bv-collection-block-v3:nth-child(3){
margin-bottom: 40px;
}.bv-collection-title-v3{
}.bv-collection-line-v3{
}.bv-row-v3{
display: flex;
gap: 14px;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
padding: 18px 16px 4px;
}.bv-row-v3::-webkit-scrollbar{ height: 0; }.bv-card-v3{
position: relative;
flex: 0 0 300px; /* desktop wide */
min-width: 300px;
border-radius: var(--radius);
overflow: hidden;
border: 1px solid rgba(255,255,255,.14);
background: rgba(255,255,255,.03);
scroll-snap-align: start;
}.bv-thumb-v3{
aspect-ratio: 1 / 1; /* SQUARE */
background: #0b0b0b;
}.bv-thumb-v3 img{
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}.bv-price-v3{
position: absolute;
left: 12px;
bottom: 12px;
color: #fff;
font-weight: 950;
font-size: 14px;
text-shadow: 0 1px 12px rgba(0,0,0,.75);
}.bv-seemore-v3{
flex: 0 0 260px;
min-width: 260px;
border-radius: var(--radius);
border: 1px solid rgba(255,255,255,.18);
background: rgba(255,255,255,.02);
display: grid;
place-items: center;
scroll-snap-align: start;
text-decoration: none;
}.bv-seemore-v3 span{
color: #fff;
font-weight: 950;
letter-spacing: .3px;
}@media (max-width: 760px){.bv-collections-page-v3{ padding-top: 86px; padding-bottom: 70px; }.bv-collections-stack-v3{ gap: 62px; }.bv-row-v3{ gap: 12px; padding: 16px 12px 4px; }.bv-card-v3{
flex-basis: 64vw; /* smaller so you can get to far right quicker */
min-width: 64vw;
}.bv-seemore-v3{
flex-basis: 48vw;
min-width: 48vw;
}}.bv-collections-page-v3 .bv-collection-title-v3{
color: #fff !important;
font-weight: 900;
letter-spacing: .2px;
}.bv-collections-page-v3 .bv-collection-title-v3 a{
color: #fff !important;
text-decoration: none;
}.bv-collections-page-v3 .bv-collection-line-v3{
background: #fff !important;
opacity: .9;
}.bv-collections-page-v3{
/* guarantees contrast */
}.bv-collection-block-v3{
overflow: visible !important; /* prevent clipping */
}.bv-collection-block-v3 .container{
position: relative;
z-index: 5; /* put title/line above scroller */
padding-bottom: 10px; /* separation from row */
}.bv-collection-title-v3{
display: block !important;
line-height: 1.2;
}.bv-collection-line-v3{
}.bv-row-v3{
}.bv-collection-head-v3{
}.bv-collections-page-v3{
background: #000;
}.bv-collection-block-v3{
position: relative;
margin-bottom: 70px; /* bigger gap between collections */
}.bv-collection-head-v3{
position: relative;
z-index: 10;
padding-top: 12px;
padding-bottom: 14px;
}.bv-collection-title-v3{
color: #fff !important;
font-weight: 950 !important;
font-size: 18px;
margin: 0 0 12px 0;
}.bv-collection-line-v3{
display: block !important;
height: 4px !important;
background: rgba(255,255,255,.92) !important;
border-radius: 999px;
opacity: .9 !important;
}.bv-row-v3{
position: relative;
z-index: 1;
margin-top: 10px;
padding-top: 8px;
}@media (min-width: 990px){.bv-collections-page-v3{ padding-bottom: 0 !important; }.bv-collections-stack-v3[data-bv-halves]{
display: grid !important;
gap: 0 !important;
overflow-y: auto !important;
overflow-x: hidden !important;
scroll-snap-type: y mandatory !important;
}.bv-collections-half-v3{
min-height: calc(100vh - 96px) !important;
scroll-snap-align: start;
display: flex !important;
flex-direction: column !important;
}.bv-collections-half-v3 .bv-collection-block-v3{
flex: 1 1 0 !important;
margin-bottom: 0 !important;
display: flex !important;
flex-direction: column !important;
}.bv-collections-page-v3 .bv-collection-title-v3{ }.bv-collections-page-v3 .bv-collection-line-v3{ }.bv-collections-half-v3 .bv-row-v3{
flex: 1 1 0 !important;
align-items: stretch;
margin-top: 0 !important;
}.bv-card-v3{
}.bv-seemore-v3{
}}@media (min-width: 990px){.bv-collections-page-v3{
padding-top: 44px !important;
}.bv-collections-stack-v3[data-bv-halves]{
height: calc(100vh - 44px) !important;
}.bv-collections-half-v3{
gap: 10px !important; /* was too big */
padding: 10px 0 12px !important; /* tighter */
}.bv-collections-half-v3 .bv-collection-block-v3{
gap: 6px !important;
}.bv-collection-head-v3{
padding: 0 !important;
margin: 0 !important;
}.bv-collections-page-v3 .bv-collection-title-v3{
font-weight: 950 !important;
font-size: 18px !important;
line-height: 1.1 !important;
margin-bottom: 6px !important;
}.bv-collections-page-v3 .bv-collection-line-v3{
height: 4px !important;
margin: 0 0 10px 0 !important;
background: #fff !important;
opacity: 1 !important;
}.bv-collections-half-v3 .bv-row-v3{
padding: 0 10px 0 !important;
gap: 12px !important;
}.bv-card-v3{
flex: 0 0 220px !important;
min-width: 220px !important;
}.bv-thumb-v3{
height: 160px !important; /* bigger thumbnail */
}.bv-seemore-v3{
flex: 0 0 220px !important;
min-width: 220px !important;
}}@media (max-width: 989px){.bv-collection-title-v3{ }.bv-collection-line-v3{ height: 3px; }.bv-row-v3{ gap: 10px; }.bv-card-v3{ min-width: 170px; }.bv-thumb-v3{ height: 140px; }}.bv-collection-head-v3{
display: flex !important;
flex-direction: column !important;
/* hugs left */
}.bv-collection-title-v3{
width: 100% !important;
}.bv-collection-line-v3{
/* half the screen, capped */
/* never overflow container */
margin: 8px 0 10px 0 !important; /* consistent spacing */
}@media (min-width: 990px){.bv-collection-head-v3 .bv-collection-line-v3{
width: min(50vw, 700px) !important;
}}.bv-collection-head-v3{
margin-left: 0 !important;
padding-left: 0 !important;
align-items: flex-start !important;
text-align: left !important;
}.bv-collection-block-v3 .container{
padding-left: 0 !important;
}.bv-collection-title-v3{
margin-left: 0 !important;
padding-left: 16px !important; /* match row padding visually */
text-align: left !important;
}.bv-collection-line-v3{
margin-left: 16px !important; /* same as title */
width: min(50vw, 700px) !important; /* half screen width */
max-width: calc(100% - 16px) !important;
}@media (min-width: 990px){.bv-collection-title-v3{
padding-left: 24px !important;
}.bv-collection-line-v3{
margin-left: 24px !important;
}}@media (min-width: 990px){.bv-collection-block-v3 > .container{
width: 100vw !important;
max-width: 100vw !important;
margin-left: calc(0% - -2vw) !important; /* full-bleed breakout */
margin-right: 0 !important;
padding-left: 24px !important; /* control how close to edge */
padding-right: 24px !important;
}.bv-collection-head-v3{
align-items: flex-start !important;
text-align: left !important;
}.bv-collection-title-v3{
text-align: left !important;
margin: 0 !important;
padding: 0 !important;
}.bv-collection-line-v3{
margin: 8px 0 10px 0 !important;
width: min(50vw, 700px) !important; /* half screen */
max-width: 100% !important;
}}:root{
--bv-row-shift: 60px; /* 🔧 CONTROL
}@media (min-width: 990px){.bv-collection-block-v3 .bv-row-v3{
padding-left: calc(10px + var(--bv-row-shift)) !important;
padding-right: 10px !important;
}}:root{
--bv-collections-shift-y: 0px; /* 🔧 CONTROL KNOB: negative = move up, positive = move down */
}@media (min-width: 990px){.bv-collections-stack-v3[data-bv-halves]{
transform: translateY(var(--bv-collections-shift-y)) !important;
}}:root{
--bv-collections-header-scale: 5;
}@media (min-width: 990px){body.page-collections .site-header,
body.template-page.collections .site-header,
body.template-page--collections .site-header{
transform: scale(var(--bv-collections-header-scale)) !important;
transform-origin: top center !important;
}body.page-collections,
body.template-page.collections,
body.template-page--collections{
--bv-header-comp: calc((1 - var(--bv-collections-header-scale)) * 80px);
}body.page-collections .bv-collections-page-v3,
body.template-page.collections .bv-collections-page-v3,
body.template-page--collections .bv-collections-page-v3{
margin-top: calc(-1 * var(--bv-header-comp)) !important;
}}@media (min-width: 990px){body.page-collections .site-header .site-header__title,
body.template-page.collections .site-header .site-header__title,
body.template-page--collections .site-header .site-header__title,
body.page-collections .site-header h1,
body.template-page.collections .site-header h1,
body.template-page--collections .site-header h1{
margin: 0 !important;
padding: 0 !important;
line-height: 1 !important;
display: flex !important;
align-items: center !important;
}body.page-collections .site-header .site-header__inner,
body.template-page.collections .site-header .site-header__inner,
body.template-page--collections .site-header .site-header__inner{
display: grid !important;
grid-template-columns: auto 1fr auto !important;
align-items: center !important;
}body.page-collections .site-header .site-header__title,
body.template-page.collections .site-header .site-header__title,
body.template-page--collections .site-header .site-header__title{
justify-self: start !important;
align-self: center !important;
padding-left: 24px !important; /* 🔧 adjust this to micro-align */
}}body.page-collections .site-header .site-header__title,
body.template-page.collections .site-header .site-header__title,
body.template-page--collections .site-header .site-header__title,
body.page-collections .site-header h1,
body.template-page.collections .site-header h1,
body.template-page--collections .site-header h1{
display: none !important;
}body.template-page-collections .bv-page-title{
display: none !important;
}body.template-page-collections main h1{
display: none !important;
}body.template-page-collections .bv-card-v3{
position: relative !important;
overflow: hidden !important;
border-radius: 14px !important;
aspect-ratio: 1 / 1 !important; /* square card */
display: block !important;
}body.template-page-collections .bv-thumb-v3{
position: absolute !important;
inset: 0 !important;
height: auto !important;
width: auto !important;
}body.template-page-collections .bv-thumb-v3 img{
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
}body.template-page-collections .bv-price-v3{
position: absolute !important;
left: 10px !important;
bottom: 10px !important;
z-index: 2 !important;
/* readable on any image */
padding: 8px 10px !important;
border-radius: 999px !important;
font-weight: 800 !important;
line-height: 1 !important;
/* subtle glass look */
background: rgba(0,0,0,0.55) !important;
backdrop-filter: blur(8px) !important;
-webkit-backdrop-filter: blur(8px) !important;
color: #fff !important;
}body.template-page-collections .bv-card-v3::after{
content: "" !important;
position: absolute !important;
inset: 0 !important;
pointer-events: none !important;
background: linear-gradient(to top, rgba(0,0,0,0.28), rgba(0,0,0,0) 55%) !important;
}:root{
/* 🔧 bigger titles */
/* 🔧 bigger product squares */
/* 🔧 bigger price */
}@media (min-width: 990px){body.template-page-collections .bv-collections-stack-v3[data-bv-panels]{
display: grid !important;
gap: 0 !important;
height: calc(100vh - 44px) !important;
overflow-y: auto !important;
overflow-x: hidden !important;
scroll-snap-type: y mandatory !important;
}body.template-page-collections .bv-collections-panel-v3{
min-height: calc(100vh - 44px) !important;
scroll-snap-align: start !important;
display: flex !important;
flex-direction: column !important;
gap: var(--bv-panel-gap) !important;
padding: 14px 0 18px !important;
}body.template-page-collections .bv-collections-panel-v3 .bv-collection-block-v3{
flex: 1 1 0 !important;
display: flex !important;
flex-direction: column !important;
}body.template-page-collections .bv-collection-title-v3{
font-size: var(--bv-title-size) !important;
font-weight: 950 !important;
line-height: 1.08 !important;
}body.template-page-collections .bv-collection-line-v3{
width: min(50vw, 700px) !important;
height: 4px !important;
background: #fff !important;
opacity: 1 !important;
}body.template-page-collections .bv-card-v3{
flex: 0 0 var(--bv-card-size) !important;
min-width: var(--bv-card-size) !important;
aspect-ratio: 1/1 !important;
}body.template-page-collections .bv-price-v3{
font-size: var(--bv-price-size) !important;
font-weight: 900 !important;
}}body.template-page-collections ::-webkit-scrollbar{
width: 0;
height: 0;
}body.template-page-collections{
scrollbar-width: none;
-ms-overflow-style: none;
}:root{
--bv-collections-header-bottom-gap: 20x;
}@media (min-width: 0px){body.template-page-collections .site-header{
padding-bottom: var(--bv-collections-header-bottom-gap) !important;
}}:root{
--bv-collections-header-gap: 200x; /* 🔧 CONTROL KNOB */
}body.template-page-collections #shopify-section-header{
margin-bottom: var(--bv-collections-header-gap) !important;
}body.template-page-collections .shopify-section-group-header-group,
body.template-page-collections .header-wrapper,
body.template-page-collections header.header{
margin-bottom: var(--bv-collections-header-gap) !important;
}body.template-page-collections main,
body.template-page-collections #MainContent{
padding-top: var(--bv-collections-header-gap) !important;
}body.template-page-collections{
height: 100vh !important;
overflow: hidden !important; /* lock document scroll */
}body.template-page-collections *{
scrollbar-width: none; /* Firefox */
}body.template-page-collections *::-webkit-scrollbar{
width: 0 !important;
height: 0 !important;
}body.template-page-collections .bv-collections-stack-v3[data-bv-panels]{
height: calc(100vh - 44px) !important; /* match your collections page top padding / header offset */
overflow-y: auto !important;
overflow-x: hidden !important;
scroll-snap-type: y mandatory !important;
scroll-behavior: smooth !important;
overscroll-behavior: contain !important; /* prevent “bounceâ€/page scroll chaining */
}body.template-page-collections .bv-collections-panel-v3{
scroll-snap-align: start !important;
scroll-snap-stop: always !important; /* important: stop only on panels */
}:root{
--bv-title-size: clamp(16px, 2.2vw, 24px);
--bv-card-size: clamp(160px, 22vw, 340px);
--bv-price-size: clamp(12px, 1.6vw, 18px);
--bv-panel-gap: clamp(10px, 2vh, 24px);
}body.template-page-collections .bv-collections-stack-v3[data-bv-panels]{
max-height: 100vh;
}body.template-page-collections .bv-collections-panel-v3{
min-height: 100vh;
display: flex;
flex-direction: column;
gap: var(--bv-panel-gap);
box-sizing: border-box;
}body.template-page-collections .bv-collection-block-v3{
min-height: 0;
flex: 1 1 0;
}body.template-page-collections .bv-collection-title-v3{
font-size: var(--bv-title-size) !important;
line-height: 1.1;
}body.template-page-collections .bv-collection-line-v3{
width: min(50vw, 700px);
}body.template-page-collections .bv-row-v3{
min-height: 0;
flex: 1 1 0;
}body.template-page-collections .bv-card-v3{
flex: 0 0 var(--bv-card-size) !important;
min-width: var(--bv-card-size) !important;
max-width: var(--bv-card-size) !important;
aspect-ratio: 1 / 1;
}body.template-page-collections .bv-price-v3{
font-size: var(--bv-price-size) !important;
}@media (max-width: 1200px){body.template-page-collections .bv-collections-panel-v3{
padding-top: 12px;
padding-bottom: 16px;
}}@media (max-width: 900px){body.template-page-collections{
overflow: auto !important;
}body.template-page-collections .bv-collections-stack-v3[data-bv-panels]{
height: auto !important;
max-height: none !important;
scroll-snap-type: none !important;
overflow: visible !important;
}body.template-page-collections .bv-collections-panel-v3{
min-height: auto !important;
}}@media (max-width: 600px){:root{
--bv-card-size: clamp(140px, 60vw, 220px);
--bv-title-size: clamp(15px, 4vw, 18px);
}body.template-page-collections .bv-collection-line-v3{
width: 80vw; /* looks better on narrow screens */
}}.product-grid .grid{
display: grid !important;
grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
gap: 20px !important;
}@media (max-width: 1400px){.product-grid .grid{
grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}}@media (max-width: 1100px){.product-grid .grid{
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}}@media (max-width: 800px){.product-grid .grid{
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}}@media (max-width: 480px){.product-grid .grid{
grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
}}.product-grid .container{
max-width: 1800px !important; /* 🔧 MAIN WIDTH CONTROL */
padding-left: 24px !important; /* 🔧 SIDE MARGIN CONTROL */
padding-right: 24px !important;
}@media (min-width: 1600px){.product-grid .container{
max-width: 2000px !important;
padding-left: 20px !important;
padding-right: 20px !important;
}}@media (max-width: 1200px){.product-grid .container{
max-width: 1400px !important;
padding-left: 20px !important;
padding-right: 20px !important;
}}@media (max-width: 800px){.product-grid .container{
max-width: 100% !important;
padding-left: 16px !important;
padding-right: 16px !important;
}}.product-grid .bv-filters{
margin: 18px 0 22px;
}.product-grid .bv-filters-row{
display: flex;
gap: 12px;
flex-wrap: wrap;
align-items: flex-end;
}.product-grid .bv-filter{
display: flex;
flex-direction: column;
gap: 6px;
min-width: 160px;
}.product-grid .bv-filter-wide{ min-width: 260px; flex: 1 1 260px; }.product-grid .bv-filter label{
font-weight: 900;
font-size: 12px;
letter-spacing: .04em;
text-transform: uppercase;
}.product-grid .bv-filter input{
height: 40px;
border-radius: 12px;
border: 1px solid rgba(255,255,255,.18);
background: rgba(255,255,255,.04);
color: #fff;
padding: 0 12px;
}.product-grid .bv-filter-hint{
font-size: 12px;
opacity: .7;
}.product-grid .bv-filter-actions{
display: flex;
gap: 12px;
align-items: center;
}.product-grid .bv-filter-count{
}.product-grid .bv-checkboxes{
display: flex;
gap: 12px;
flex-wrap: wrap;
padding-top: 4px;
}.product-grid .bv-check{
opacity: .95;
}.product-grid .bv-filterbar{
margin: 16px 0 18px;
}.product-grid .bv-filterbar-top{
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}.product-grid .bv-filter-toggle{
white-space: nowrap;
}.product-grid .bv-filter-count{
font-weight: 900;
opacity: .85;
}.product-grid .bv-filterpanel{
margin-top: 12px;
padding: 14px;
border-radius: 16px;
border: 1px solid rgba(255,255,255,.16);
background: rgba(255,255,255,.04);
}.product-grid .bv-filtergrid{
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 14px 14px;
}.product-grid .bv-field{
display: flex;
flex-direction: column;
gap: 7px;
min-width: 0;
}.product-grid .bv-label{
font-weight: 900;
font-size: 12px;
letter-spacing: .04em;
text-transform: uppercase;
opacity: .92;
line-height: 1;
}.product-grid .bv-field input{
height: 42px;
border-radius: 14px;
border: 1px solid rgba(255,255,255,.18);
background: rgba(0,0,0,.22);
color: #fff;
padding: 0 12px;
outline: none;
}.product-grid .bv-field input::placeholder{
opacity: .6;
}.product-grid .bv-field-wide{
grid-column: span 2;
}.product-grid .bv-field-actions{
grid-column: span 1;
justify-content: flex-end;
}.product-grid .bv-field-full{
grid-column: 1 / -1;
}.product-grid .bv-checkgrid{
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 10px 12px;
}.product-grid .bv-check{
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: 14px;
border: 1px solid rgba(255,255,255,.14);
background: rgba(0,0,0,.18);
font-weight: 800;
line-height: 1.1;
min-width: 0;
}.product-grid .bv-check span{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}.product-grid .bv-check input{
width: 16px;
height: 16px;
}@media (max-width: 1200px){.product-grid .bv-filtergrid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }.product-grid .bv-checkgrid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }.product-grid .bv-field-wide{ grid-column: span 2; }}@media (max-width: 800px){.product-grid .bv-filtergrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }.product-grid .bv-checkgrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }.product-grid .bv-field-wide{ grid-column: 1 / -1; }.product-grid .bv-field-actions{ grid-column: 1 / -1; }}.product-grid .bv-action-row{
display:flex;
gap:12px;
align-items:center;
flex-wrap:wrap;
}.bv-filterpanel[hidden] { display: none !important; }.bv-filterpanel:not([hidden]) { display: block !important; }.bv-filterbar { position: relative; z-index: 50; }.bv-filterpanel { position: relative; z-index: 60; }@media (max-width: 749px){.product-grid .grid{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}.product-grid .grid .product-card{
width: 100%;
}}@media (max-width: 749px){[data-bv-pageinfo]{ display:none !important; }}@media (max-width: 989px){.bv-collections-stack-v3[data-bv-panels]{
}.bv-collections-panel-v3{
}.bv-collection-block-v3{
/* IMPORTANT so the row can scroll and not overflow */
}.bv-collection-head-v3{
}.bv-collection-title-v3{
}.bv-collection-line-v3{
}.bv-row-v3[data-bv-row]{
}.bv-card-v3{
}.bv-seemore-v3{
padding-right: 10px;
}}@media (max-width: 989px){.bv-collections-stack-v3[data-bv-panels]{
height: auto !important;
overflow: visible !important;
}.bv-collections-panel-v3{
height: auto !important;
/* removes the "panel" layout effect */
scroll-snap-align: none !important;
scroll-snap-stop: normal !important;
}.bv-collection-block-v3{
margin: 0 0 18px 0;
}.bv-row-v3[data-bv-row]{
}.bv-card-v3{
scroll-snap-align: start;
}.bv-seemore-v3{
}}@media (max-width: 989px){html, body{
}.bv-collections-stack-v3[data-bv-panels]{
position: relative;
height: 100vh !important;
max-height: 100vh !important;
overflow-y: auto !important;
overflow-x: hidden !important;
/*
}.bv-collections-panel-v3{
height: 100vh !important;
display: flex !important;
flex-direction: column !important;
scroll-snap-align: start !important;
scroll-snap-stop: always !important;
}.bv-collection-block-v3{
flex: 1 1 50% !important;
min-height: 0 !important;
flex-direction: column !important;
}.bv-collection-head-v3{
padding-top: 10px !important;
padding-bottom: 8px !important;
}.bv-collection-title-v3{
font-size: 18px !important;
line-height: 1.1 !important;
}.bv-collection-line-v3{
margin-top: 8px !important;
}.bv-row-v3[data-bv-row]{
flex: 1 1 auto !important;
min-height: 0 !important;
display: flex !important;
align-items: stretch !important;
overflow-x: auto !important;
overflow-y: hidden !important;
padding: 10px 14px 14px !important;
gap: 10px !important;
/* IMPORTANT: allow horizontal panning inside row */
touch-action: pan-x;
}.bv-card-v3{
flex: 0 0 auto !important;
}.bv-seemore-v3{
flex: 0 0 auto !important;
}}@media (max-width: 989px){html, body { }.bv-collections-stack-v3[data-bv-panels]{
height: 100vh !important;
overflow-y: auto !important;
overflow-x: hidden !important;
scroll-snap-type: none !important; /* IMPORTANT: no panel snapping */
}.bv-collections-panel-v3{
height: auto !important;
display: contents !important; /* IMPORTANT: removes grouped behavior */
}.bv-collection-block-v3{
}.bv-row-v3[data-bv-row]{
overflow-x: auto !important;
overflow-y: hidden !important;
padding: 10px 14px 14px !important;
gap: 10px !important;
/* helps keep sideways on the row */
}.bv-card-v3{
flex: 0 0 auto !important;
}.bv-seemore-v3{
flex: 0 0 auto !important;
white-space: nowrap !important;
}}@media (max-width: 989px){html, body{
height: 100%;
overflow: hidden !important; /* lock the phone screen */
}.bv-mobile-lock{
position: fixed;
inset: 0;
display: flex;
flex-direction: column;
background: transparent;
z-index: 1;
}.bv-mobile-titlebar{
position: sticky; /* stays at top inside the lock */
top: 0;
z-index: 10;
padding: 12px 0;
background: rgba(0,0,0,.92);
backdrop-filter: blur(8px);
border-bottom: 1px solid rgba(255,255,255,.08);
}.bv-collections-stack-v3[data-bv-panels]{
flex: 1 1 auto;
min-height: 0; /* IMPORTANT */
overflow-y: auto !important;
overflow-x: hidden !important;
overscroll-behavior-y: contain;
}.bv-collections-panel-v3{
display: contents !important;
height: auto !important;
min-height: 0 !important;
}.bv-collection-block-v3{
display: block !important;
padding: 18px 0 !important;
border-bottom: 1px solid rgba(255,255,255,.08);
}.bv-row-v3[data-bv-row]{
overflow-x: auto !important;
overflow-y: hidden !important;
overscroll-behavior-x: contain;
padding: 10px 14px 14px !important;
gap: 10px !important;
touch-action: pan-x;
}.bv-card-v3{
flex: 0 0 auto !important;
width: clamp(140px, 70vw, 260px) !important;
}}@media (max-width: 989px){.bv-collections-stack-v3[data-bv-panels]{
height: 100dvh;
overflow-y: auto;
overflow-x: hidden;
/* LOCKED scrolling: snap between panels */
scroll-snap-type: y mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
}.bv-collections-panel-v3{
height: 100dvh;
scroll-snap-align: start;
scroll-snap-stop: always;
display: flex;
flex-direction: column;
}.bv-collections-panel-v3 > .bv-collection-block-v3{
height: calc(100dvh / 3);
position: relative;
/* reserve space for the “locked-left title rail†*/
padding-left: min(42vw, 220px);
overflow: hidden;
}.bv-collection-block-v3 .container{
padding-left: 0;
padding-right: 0;
}.bv-collection-head-v3{
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
width: calc(min(42vw, 220px) - 24px);
z-index: 5;
/* keep it “hugging left†and clean */
display: flex;
flex-direction: column;
gap: 10px;
pointer-events: none; /* so swipes go to product row */
}.bv-collection-title-v3{
line-height: 1.1;
font-weight: 700;
}.bv-collection-line-v3{
width: 100%;
}.bv-row-v3[data-bv-row]{
height: 100%;
display: flex;
align-items: stretch;
gap: 12px;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
/* makes swipe feel “snappy†per card */
scroll-snap-type: x mandatory;
/* pad so cards don’t hide behind title rail */
padding: 14px 14px 14px 0;
}.bv-row-v3[data-bv-row] > *{
scroll-snap-align: start;
}.bv-card-v3{
flex: 0 0 70vw; /* big swipe cards */
max-width: 70vw;
height: 100%;
}.bv-seemore-v3{
flex: 0 0 50vw;
display: flex;
align-items: center;
justify-content: center;
}.bv-page-title{
margin: 14px 0 10px;
}}@media (max-width: 989px){body.template-page-collections .bv-collections-panel-v3{ outline: 3px solid red; }}
/* =========================
MOBILE ONLY OVERRIDES
- 2 products per screen (2-column grid)
- Titles stay visible (sticky rail)
- Easy position controls via CSS variables
========================= */
@media (max-width: 989px){
/* --- Adjust these 3 to move the title rail --- */
.bv-collections-page-v3{
--bv-title-left: 2000px; /* horizontal position of titles */
--bv-title-top: 14px; /* vertical position of titles */
--bv-rail-width: min(42vw, 276520px); /* width reserved for titles */
}
/* Hard lock horizontal page drift on mobile */
html, body{
}
/* Keep your panel stack behavior, but ensure vertical works */
.bv-collections-stack-v3[data-bv-panels]{
}
/* Each collection block: reserve space for the left title rail */
.bv-collections-panel-v3 > .bv-collection-block-v3{
padding-left: var(--bv-rail-width) !important;
}
/* --- TITLE RAIL: STICKY so it stays visible while you scroll the page --- */
.bv-collection-head-v3{
position: sticky !important;
left: var(--bv-title-left) !important;
top: var(--bv-title-top) !important;
transform: none !important;
width: calc(var(--bv-rail-width) - (var(--bv-title-left) * 1)) !important;
z-index: 50;
pointer-events: none; /* keep it non-interactive like you had */
}
/* =========================
ROW: convert to a 2-column grid (NO horizontal scroll)
========================= */
.bv-row-v3[data-bv-row]{
/* turn off horizontal carousel behavior */
overflow-x: hidden !important;
overflow-y: visible !important;
scroll-snap-type: none !important;
-webkit-overflow-scrolling: auto !important;
touch-action: pan-y !important;
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
padding: 12px 12px 12px 0 !important; /* keep your left edge aligned */
align-content: start;
}
/* Cards sized down: 2 per row */
.bv-card-v3{
width: 100% !important;
max-width: none !important;
flex: none !important;
}
/* Make images behave nicely inside the card */
.bv-thumb-v3{
aspect-ratio: 1 / 1; /* square thumbnails; change if you want */
overflow: hidden;
border-radius: 12px; /* optional – remove if you want sharp */
}
.bv-thumb-v3 img{
object-fit: cover;
display: block;
}
/* Price can be smaller so 2-up looks clean */
.bv-price-v3{
font-size: 12px;
margin-top: 6px;
}
/* Put See more full-width at the bottom (spans both columns) */
.bv-seemore-v3{
grid-column: 1 / -1;
width: 100%;
height: auto !important;
padding: 14px 0;
justify-content: center;
}
}
/* === Mobile scroll restore (site-wide) ===
Some templates were locked by earlier mobile layout rules.
This keeps horizontal overflow suppressed but restores vertical page scrolling. */
@media (max-width: 820px) {
html, body {
height: auto !important;
}
body {
overflow-x: hidden !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch;
overscroll-behavior-y: auto;
}
/* Ensure common theme wrappers don’t trap scroll */
.page, main, .main, #MainContent, .main-content, .shopify-section {
overflow: visible !important;
height: auto !important;
min-height: 0 !important;
}
}
/* =========================================================
MOBILE SCROLL RESTORE (non-home pages)
The theme contained a global mobile lock:
@media (max-width:989px){ html,body{height:100%; overflow:hidden!important;} }
That prevents ANY vertical scrolling on most templates.
Home (template-index) can keep its custom locked/snap behavior.
========================================================= */
@media (max-width: 989px) {
/* Allow normal document scrolling everywhere except the home page
(and except while the lightbox is open). */
body:not(.template-index):not(.bv-lightbox-open) {
height: auto !important;
overflow-x: hidden !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch;
overscroll-behavior-y: auto;
}
/* html sometimes inherits the lock as well */
body:not(.template-index):not(.bv-lightbox-open) {
position: static !important;
}
/* Remove template-specific scroll locks that trap the page */
body.template-page-collections:not(.bv-lightbox-open) {
height: auto !important;
overflow: visible !important;
}
/* If a page uses an internal scroller, don't force it to 100vh */
body.template-page-collections .bv-collections-stack-v3[data-bv-panels] {
height: auto !important;
max-height: none !important;
}
/* Ensure main content wrappers don't become fixed-height scroll traps */
body:not(.template-index) main,
body:not(.template-index) #MainContent,
body:not(.template-index) .main,
body:not(.template-index) .main-content,
body:not(.template-index) .page,
body:not(.template-index) .shopify-section {
height: auto !important;
min-height: 0 !important;
overflow: visible !important;
}
}
@media (max-width: 989px) {
/* Force html to be scrollable again (some rules lock html+body together) */
html {
height: auto !important;
overflow-x: hidden !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch;
}
/* Re-apply the lock ONLY on the homepage if you rely on fullpage/snap there */
body.template-index:not(.bv-lightbox-open) {
height: 100% !important;
overflow: hidden !important;
}
}
/* === Tighten spacing between title and divider line === */
.bv-collection-head-v3 .bv-collection-title-v3,
.bv-collection-head-v3 h2,
.bv-collection-head-v3 h3 {
margin-bottom: 6px !important; /* was probably 12–24px */
line-height: 1.05 !important;
}
.bv-collection-head-v3 .bv-collection-line-v3,
.bv-collection-head-v3 hr,
.bv-collection-head-v3 .divider {
margin-top: 0 !important;
margin-bottom: 10px !important; /* space before products */
}
/* === Move collections content up slightly === */
.bv-collections-page-v3 {
--bv-collections-vertical-nudge: -20px; /* adjust this number */
}
.bv-collections-panel-v3,
.bv-collection-head-v3,
.bv-collection-block-v3 {
transform: translateY(var(--bv-collections-vertical-nudge));
}
/* === Scale down products in collections page === */
.bv-collections-page-v3 {
--bv-product-scale: 0; /* try 0.92, 0.9, 0.85, 0.8 */
}
.bv-collections-page-v3 .product-card,
.bv-collections-page-v3 .bv-product-card,
.bv-collections-page-v3 .bv-collection-product,
.bv-collections-page-v3 .card,
.bv-collections-page-v3 .grid__item {
transform: scale(var(--bv-product-scale));
transform-origin: top left;
}
/* Fix layout gaps caused by scaling */
.bv-collections-page-v3 .product-card,
.bv-collections-page-v3 .bv-product-card,
.bv-collections-page-v3 .bv-collection-product,
.bv-collections-page-v3 .card,
.bv-collections-page-v3 .grid__item {
margin-right: calc((1 - var(--bv-product-scale)) * 20px);
margin-bottom: calc((1 - var(--bv-product-scale)) * 20px);
}
/* === Collections Page: Lock horizontal scroll, allow vertical === */
.bv-collections-page-v3,
body.page-collections,
body.template-page-collections {
overflow-x: hidden !important;
overscroll-behavior-x: none;
}
/* Make sure vertical scroll is allowed */
html, body {
overflow-y: auto !important;
-webkit-overflow-scrolling: touch;
}
/* Prevent any child from causing sideways overflow */
.bv-collections-page-v3 * {
max-width: 100vw;
}
.bv-collections-page-v3 .bv-collection-block-v3 .bv-products-row-v3,
.bv-collections-page-v3 .bv-collection-block-v3 .bv-products-v3,
.bv-collections-page-v3 .bv-collection-block-v3 .products,
.bv-collections-page-v3 .bv-collection-block-v3 .product-grid,
.bv-collections-page-v3 .bv-collection-block-v3 .grid {
transform: translateX(var(--bv-products-x-offset));
}
/* Move ONLY the products (the row that contains .bv-card-v3) */
@media (min-width: 990px){
.bv-collections-page-v3 .bv-row-v3[data-bv-row]{
transform: translateX(var(--bv-products-x-desktop)) !important;
}
}
@media (max-width: 989px){
.bv-collections-page-v3 .bv-row-v3[data-bv-row]{
transform: translateX(var(--bv-products-x-mobile)) !important;
}
}
/* === DESKTOP: make product scrolling feel smooth (no harsh snapping) === */
@media (min-width: 990px){
.bv-collections-page-v3 .bv-row-v3[data-bv-row]{
scroll-snap-type: x proximity !important; /* was mandatory */
scroll-behavior: smooth;
scroll-snap-stop: normal;
}
}
@media (min-width: 990px){
.bv-collections-page-v3 .bv-row-v3[data-bv-row]{
scroll-snap-type: x proximity !important;
scroll-snap-stop: normal;
}
}
/* MOBILE: prevent right-side clipping of product cards */
.bv-collections-page-v3 .bv-row-v3[data-bv-row]{
width: 100%;
box-sizing: border-box;
/* Give extra space so the last card can fully scroll into view */
padding-right: 28px !important;
scroll-padding-right: 28px;
}
/* Add an invisible spacer at the end of the row (best snap-friendly fix) */
.bv-collections-page-v3 .bv-row-v3[data-bv-row]::after{
content: "";
flex: 0 0 28px;
}
/* === FORCE: Products horizontal position via padding (NOT transform) === */
@media (min-width: 990px){
.bv-collections-page-v3 .bv-row-v3[data-bv-row]{
/* Move left with NEGATIVE margin, move right with positive */
margin-left: var(--bv-products-x-desktop) !important;
}
}
@media (max-width: 989px){
.bv-collections-page-v3 .bv-row-v3[data-bv-row]{
margin-left: var(--bv-products-x-mobile) !important;
}
}
@media (max-width: 989px){
.bv-collections-page-v3 .bv-row-v3[data-bv-row]{
padding-right: 28px !important;
scroll-padding-right: 28px;
}
.bv-collections-page-v3 .bv-row-v3[data-bv-row]::after{
content:"";
flex: 0 0 28px;
}
}
/* === FORCE: Products horizontal position via margin (most reliable) === */
@media (min-width: 990px){
.bv-collections-page-v3 .bv-row-v3[data-bv-row]{
margin-left: var(--bv-products-x-desktop) !important;
}
}
@media (max-width: 989px){
.bv-collections-page-v3 .bv-row-v3[data-bv-row]{
margin-left: var(--bv-products-x-mobile) !important;
}
}
@media (max-width: 989px){
.bv-collections-page-v3 .bv-row-v3[data-bv-row]{
margin-left: var(--bv-products-x-mobile) !important;
}
}
@media (max-width: 989px){
.bv-collections-page-v3 .bv-row-v3[data-bv-row]{
margin-left: var(--bv-products-x-mobile) !important;
}
}
@media (min-width: 990px){
.bv-collections-page-v3 .bv-row-v3[data-bv-row]{
margin-left: var(--bv-products-x-desktop) !important;
}
}
@media (min-width: 990px){
.bv-collections-page-v3 .bv-row-v3[data-bv-row]{
margin-left: var(--bv-products-x-desktop) !important;
}
}
@media (min-width: 990px){
.bv-collections-page-v3 .bv-row-v3[data-bv-row]{
margin-left: var(--bv-products-x-desktop) !important;
}
}
/* === DESKTOP: vertical position adjustment for entire collections page === */
@media (min-width: 990px){
.bv-collections-page-v3{
transform: translateY(var(--bv-collections-vertical-offset));
}
}
/* === DESKTOP: adjustable vertical gap between collections === */
@media (min-width: 990px){
.bv-collections-panel-v3 > .bv-collection-block-v3{
margin-bottom: var(--bv-collection-gap-desktop) !important;
padding-bottom: 0 !important;
}
}
/* === DESKTOP: MANUAL spacing between collections === */
@media (min-width: 990px){
.bv-collections-panel-v3 > .bv-collection-block-v3{
margin-bottom: 10px !important; /* <-- CHANGE THIS NUMBER */
padding-bottom: 0 !important;
}
}
/* === DESKTOP: shrink product cards without moving left edge === */
@media (min-width: 990px){
.bv-collections-page-v3 .bv-card-v3{
transform: scale(1.025); /* <-- CHANGE THIS NUMBER */
transform-origin: left center; /* anchor to left edge */
}
}
/* === FORCE all product images to 16:9 ratio === */
.bv-collections-page-v3 .bv-thumb-v3{
position: relative;
width: 100%;
aspect-ratio: 16 / 12;
overflow: hidden;
}
.bv-collections-page-v3 .bv-thumb-v3 img{
width: 100%;
height: 100%;
object-fit: cover; /* crop instead of stretch */
display: block;
}
/* === FORCE ENTIRE PRODUCT CARD to be 16:9 === */
.bv-collections-page-v3 .bv-card-v3{
position: relative;
width: 100%;
aspect-ratio: 16 / 12;
overflow: hidden;
}
/* Make the image fill the card */
.bv-collections-page-v3 .bv-thumb-v3{
position: absolute;
inset: 0;
}
.bv-collections-page-v3 .bv-thumb-v3 img{
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Overlay price neatly */
.bv-collections-page-v3 .bv-price-v3{
position: absolute;
bottom: 10px;
left: 12px;
right: 12px;
z-index: 2;
color: white;
font-weight: 600;
text-shadow: 0 2px 6px rgba(0,0,0,.6);
pointer-events: none;
}
/* === FORCE TRUE 16:9 PRODUCT CARDS (OVERRIDES EVERYTHING) === */
.bv-collections-page-v3 .bv-row-v3[data-bv-row]{
align-items: stretch !important;
}
/* Kill any fixed heights */
.bv-collections-page-v3 .bv-card-v3{
height: auto !important;
min-height: 0 !important;
max-height: none !important;
aspect-ratio: 16 / 9 !important;
position: relative !important;
overflow: hidden !important;
}
/* Force width-based sizing */
.bv-collections-page-v3 .bv-card-v3{
flex: 0 0 auto !important;
}
/* Make image fill card */
.bv-collections-page-v3 .bv-thumb-v3{
position: absolute !important;
inset: 0 !important;
}
.bv-collections-page-v3 .bv-thumb-v3 img{
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
}
/* Overlay price inside same 16:9 box */
.bv-collections-page-v3 .bv-price-v3{
position: absolute !important;
bottom: 10px !important;
left: 12px !important;
right: 12px !important;
z-index: 2 !important;
}
/* =========================================================
BV FORCE 16:9 PRODUCT CARDS (IMAGE + PRICE IN SAME BOX)
Put this at the VERY BOTTOM of your CSS (last style).
========================================================= */
/* 1) Do NOT let the row force square/tall cards */
.bv-collections-page-v3 .bv-row-v3[data-bv-row]{
align-items: flex-start !important;
}
/* 2) Make the card itself a true 16:9 box */
.bv-collections-page-v3 a.bv-card-v3{
position: relative !important;
display: block !important;
aspect-ratio: 16 / 12 !important;
/* KILL any theme-enforced heights */
height: auto !important;
min-height: 0 !important;
max-height: none !important;
overflow: hidden !important;
}
/* 3) IMPORTANT: don’t let mobile rule "height:100%" win */
@media (max-width: 989px){
.bv-collections-page-v3 .bv-card-v3{
height: auto !important;
}
}
/* 4) Make thumb fill the 16:9 card */
.bv-collections-page-v3 .bv-card-v3 .bv-thumb-v3{
position: absolute !important;
inset: 0 !important;
}
.bv-collections-page-v3 .bv-card-v3 .bv-thumb-v3 img{
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
}
/* 5) Price overlays inside the same 16:9 card */
.bv-collections-page-v3 .bv-card-v3 .bv-price-v3{
position: absolute !important;
left: 12px !important;
bottom: 10px !important;
z-index: 2 !important;
pointer-events: none !important;
}
@media (min-width: 990px){
.bv-collections-page-v3 .bv-row-v3[data-bv-row]{
padding-top: 2px !important; /* <-- adjust this */
}
}
@media (min-width: 990px){
/* Kill spacing under title/line block */
.bv-collections-page-v3 .bv-collection-head-v3{
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
/* Kill spacing added by container wrapper */
.bv-collections-page-v3 .bv-collection-block-v3 > .container{
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
/* Also ensure products row doesn't add top gap */
.bv-collections-page-v3 .bv-row-v3[data-bv-row]{
margin-top: 0 !important;
padding-top: 2px !important; /* tiny breathing room, set to 0 if you want touching */
}
}
@media (min-width: 990px){
/* Kill spacing between collection blocks */
.bv-collections-page-v3 .bv-collection-block-v3{
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
/* Also kill any top margin on the next block */
.bv-collections-page-v3 .bv-collection-block-v3 + .bv-collection-block-v3{
margin-top: 0 !important;
padding-top: 0 !important;
}
/* If panels are adding spacing */
.bv-collections-page-v3 .bv-collections-panel-v3{
gap: 0 !important;
}
}
/* === Collections page: make header shorter + transparent ONLY === */
body.template-page-collections header.header[data-header],
body.page-collections header.header[data-header]{
background: rgba(10,10,12,0.35) !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;
padding-top: 16px !important; /* <-- HEIGHT CONTROL */
padding-bottom: 0px !important;
min-height: 0 !important;
}
/* Tighten inner container so header actually shrinks */
body.template-page-collections .header-inner,
body.page-collections .header-inner{
padding-top: 0 !important;
padding-bottom: 0 !important;
min-height: 0 !important;
}
/* === Collections page: vertical offset control for ALL content === */
body.template-page-collections .bv-collections-page-v3,
body.page-collections .bv-collections-page-v3{
transform: translateY(89px); /* <-- MOVE EVERYTHING DOWN */
}
/* === Collections page: remove header background completely === */
body.template-page-collections header.header[data-header],
body.page-collections header.header[data-header]{
background: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
box-shadow: none !important;
border: none !important;
}
/* Also kill any pseudo background layers */
body.template-page-collections header.header[data-header]::before,
body.template-page-collections header.header[data-header]::after,
body.page-collections header.header[data-header]::before,
body.page-collections header.header[data-header]::after{
display: none !important;
content: none !important;
}
body.template-page-collections .header-inner,
body.page-collections .header-inner{
background: transparent !important;
}
/* =========================================================
Collections page ONLY — FORCE header fully transparent
(kills background on header + inner + containers + pseudos)
========================================================= */
/* Scope by presence of the collections page wrapper */
.bv-collections-page-v3 header.header[data-header],
.bv-collections-page-v3 header.header[data-header].is-solid,
.bv-collections-page-v3 header.header.header-mock,
.bv-collections-page-v3 header.header.header-mock.is-solid{
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
box-shadow: none !important;
border: 0 !important;
}
/* The background is often on inner wrappers */
.bv-collections-page-v3 header.header[data-header] .header-inner,
.bv-collections-page-v3 header.header[data-header] .container,
.bv-collections-page-v3 header.header[data-header] .header-3col{
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
box-shadow: none !important;
border: 0 !important;
}
/* Kill any pseudo “bar” layers */
.bv-collections-page-v3 header.header[data-header]::before,
.bv-collections-page-v3 header.header[data-header]::after,
.bv-collections-page-v3 header.header[data-header] .header-inner::before,
.bv-collections-page-v3 header.header[data-header] .header-inner::after{
content: none !important;
display: none !important;
}
/* If a 1px “line” is still visible, it’s usually a border-bottom somewhere */
.bv-collections-page-v3 header.header[data-header],
.bv-collections-page-v3 header.header[data-header] *{
border-bottom-color: transparent !important;
}
/* =========================================================
Collections page ONLY — make header fully transparent
(targets header AND header-inner container)
========================================================= */
.bv-collections-page-v3 header.header[data-header],
.bv-collections-page-v3 header.header[data-header].is-solid,
.bv-collections-page-v3 header.header.header-mock,
.bv-collections-page-v3 header.header.header-mock.is-solid{
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
box-shadow: none !important;
border: 0 !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
/* THIS is the main culprit: container/header-inner often has the bar */
.bv-collections-page-v3 header.header[data-header] .header-inner,
.bv-collections-page-v3 header.header[data-header] .container.header-inner{
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
box-shadow: none !important;
border: 0 !important;
}
/* Kill any pseudo background layers */
.bv-collections-page-v3 header.header[data-header]::before,
.bv-collections-page-v3 header.header[data-header]::after,
.bv-collections-page-v3 header.header[data-header] .header-inner::before,
.bv-collections-page-v3 header.header[data-header] .header-inner::after{
content: none !important;
display: none !important;
}
/* If a thin line remains, it's usually border-bottom */
.bv-collections-page-v3 header.header[data-header],
.bv-collections-page-v3 header.header[data-header] .header-inner{
border-bottom: 0 !important;
}
.bv-collections-page-v3 header.header[data-header]{
background: transparent !important;
}
.bv-collections-page-v3 header.header[data-header] *{
background: transparent !important;
}
/* =========================================================
Collections page ONLY — NUKE HEADER BACKGROUND COMPLETELY
Keep text/icons, delete EVERYTHING ELSE
========================================================= */
/* Make every layer transparent */
.bv-collections-page-v3 header.header,
.bv-collections-page-v3 header.header *,
.bv-collections-page-v3 header.header::before,
.bv-collections-page-v3 header.header::after{
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
box-shadow: none !important;
border: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
/* Remove any bar / container visuals */
.bv-collections-page-v3 header.header .container,
.bv-collections-page-v3 header.header .header-inner,
.bv-collections-page-v3 header.header .header-3col{
background: transparent !important;
box-shadow: none !important;
border: none !important;
}
/* Kill any pseudo-elements used as bars/lines */
.bv-collections-page-v3 header.header::before,
.bv-collections-page-v3 header.header::after,
.bv-collections-page-v3 header.header *::before,
.bv-collections-page-v3 header.header *::after{
display: none !important;
content: none !important;
}
/* Ensure only text/icons remain visible */
.bv-collections-page-v3 header.header{
mix-blend-mode: normal !important;
}
@media (min-width: 990px){
.bv-collections-page-v3 .bv-collection-block-v3{
margin-bottom: var(--bv-collection-gap-desktop) !important;
}
}
/***************************************************
Collections page — MOBILE ONLY vertical offset
****************************************************/
@media (max-width: 989px){
body.template-page-collections .bv-collections-page-v3,
body.page-collections .bv-collections-page-v3{
transform: translateY(89px); /* <-- MOVE EVERYTHING DOWN (MOBILE ONLY) */
}
}
/* =========================================================
Collections page — MOBILE ONLY image scale + title size
========================================================= */
@media (max-width: 989px){
/* 1) SCALE PRODUCT CARDS / IMAGES */
body.template-page-collections .bv-collections-page-v3 .bv-card-v3,
body.page-collections .bv-collections-page-v3 .bv-card-v3{
transform: scale(1); /* <-- IMAGE SCALE KNOB */
transform-origin: left center;
}
/* Prevent row clipping when scaled */
body.template-page-collections .bv-collections-page-v3 .bv-row-v3,
body.page-collections .bv-collections-page-v3 .bv-row-v3{
overflow: visible !important;
}
/* 2) INCREASE COLLECTION TITLE SIZE */
body.template-page-collections .bv-collections-page-v3 .bv-collection-title-v3,
body.page-collections .bv-collections-page-v3 .bv-collection-title-v3{
font-size: 16px !important; /* <-- TITLE SIZE KNOB */
line-height: 1 !important;
}
}
/* =========================================================
Collections page — MOBILE ONLY: close the gap between collections
(safe: does NOT change 100dvh/50dvh snap layout)
========================================================= */
@media (max-width: 989px){
/* KNOB: tighter = smaller number */
body.template-page-collections .bv-collections-page-v3,
body.page-collections .bv-collections-page-v3{
--bv-mobile-collection-gap-tight: 0px; /* try 0px, 4px, 8px */
}
/* Remove extra bottom space inside each collection block */
body.template-page-collections .bv-collections-page-v3 .bv-collection-block-v3,
body.page-collections .bv-collections-page-v3 .bv-collection-block-v3{
padding-bottom: var(--bv-mobile-collection-gap-tight) !important;
}
/* This is usually the biggest offender: row padding creates “gap” feel */
body.template-page-collections .bv-collections-page-v3 .bv-row-v3[data-bv-row],
body.page-collections .bv-collections-page-v3 .bv-row-v3[data-bv-row]{
padding-top: -6px !important; /* was 12px */
padding-bottom: 0px !important; /* kill bottom padding */
margin-bottom: 0 !important;
}
/* Tighten spacing under the title/line so content starts sooner */
body.template-page-collections .bv-collections-page-v3 .bv-collection-head-v3,
body.page-collections .bv-collections-page-v3 .bv-collection-head-v3{
row-gap: -664px !important; /* if it’s flex/column */
}
body.template-page-collections .bv-collections-page-v3 .bv-collection-line-v3,
body.page-collections .bv-collections-page-v3 .bv-collection-line-v3{
margin-top: 4px !important;
}
}
@media (min-width: 990px){
.bv-collections-panel-v3{
height: 100vh;
}
.bv-collections-panel-v3 > .bv-collection-block-v3{
height: calc(100vh / 3);
}
}
/* =========================================================
Collections Page — GLOBAL SCALE CONTROL
========================================================= */
body.template-page-collections .bv-collections-page-v3,
body.page-collections .bv-collections-page-v3{
--bv-collections-scale: 0.83; /* <-- CHANGE THIS */
transform: scale(var(--bv-collections-scale));
transform-origin: top center;
}
/* =========================================================
Collections Page — GLOBAL SCALE + POSITION TRANSFORM
========================================================= */
body.template-page-collections .bv-collections-page-v3,
body.page-collections .bv-collections-page-v3{
--bv-collections-scale: 0.98; /* <-- size of everything */
--bv-collections-move-x: 0px; /* <-- move left (-) / right (+) */
--bv-collections-move-y: 50px; /* <-- move up (-) / down (+) */
transform:
translate(var(--bv-collections-move-x), var(--bv-collections-move-y))
scale(var(--bv-collections-scale));
transform-origin: top center;
}
/* =========================================================
Collections Page — SPACE BETWEEN COLLECTIONS CONTROL
========================================================= */
body.template-page-collections .bv-collections-page-v3,
body.page-collections .bv-collections-page-v3{
/* 🎛️ CONTROL THIS VALUE */
--bv-collection-spacing: 80px; /* try: 0px, 4px, 8px, 12px, 20px */
}
/* Apply spacing between stacked collections */
body.template-page-collections .bv-collections-page-v3 .bv-collection-block-v3:not(:last-child),
body.page-collections .bv-collections-page-v3 .bv-collection-block-v3:not(:last-child){
margin-bottom: var(--bv-collection-spacing) !important;
}
@media (max-width: 989px){
/* The block was clipping everything (your code has overflow:hidden) */
body.template-page-collections .bv-collections-page-v3 .bv-collection-block-v3,
body.page-collections .bv-collections-page-v3 .bv-collection-block-v3{
overflow: visible !important; /* allow full card to show */
}
/* Add safe breathing room at the bottom of the row */
body.template-page-collections .bv-collections-page-v3 .bv-row-v3[data-bv-row],
body.page-collections .bv-collections-page-v3 .bv-row-v3[data-bv-row]{
padding-bottom: 18px !important; /* prevents price cutoff */
align-items: stretch; /* cards fill row cleanly */
}
/* Ensure the card’s layout can fit (image + price) inside its height */
body.template-page-collections .bv-collections-page-v3 .bv-card-v3,
body.page-collections .bv-collections-page-v3 .bv-card-v3{
height: auto !important;
display: flex;
flex-direction: column;
}
/* If your image container is hogging height, constrain it */
body.template-page-collections .bv-collections-page-v3 .bv-thumb-v3,
body.page-collections .bv-collections-page-v3 .bv-thumb-v3{
flex: 1 1 auto;
min-height: 0;
}
/* Keep the price always visible */
body.template-page-collections .bv-collections-page-v3 .bv-price-v3,
body.page-collections .bv-collections-page-v3 .bv-price-v3{
flex: 0 0 auto;
padding-top: 8px;
}
}
@media (max-width: 989px){
/* ensure nothing up the chain clips vertically */
body.template-page-collections .bv-collections-page-v3 .bv-collections-panel-v3,
body.page-collections .bv-collections-page-v3 .bv-collections-panel-v3,
body.template-page-collections .bv-collections-page-v3 .bv-collection-block-v3,
body.page-collections .bv-collections-page-v3 .bv-collection-block-v3{
overflow: visible !important;
}
/* row can scroll X, but must NOT clip Y */
body.template-page-collections .bv-collections-page-v3 .bv-row-v3[data-bv-row],
body.page-collections .bv-collections-page-v3 .bv-row-v3[data-bv-row]{
height: 100% !important;
overflow-x: auto !important;
overflow-y: visible !important;
align-items: flex-start !important;
padding-bottom: 22px !important; /* gives price room */
}
/* KEY: cards must NOT be 100% height (that pushes price out) */
body.template-page-collections .bv-collections-page-v3 .bv-card-v3,
body.page-collections .bv-collections-page-v3 .bv-card-v3{
height: auto !important;
align-self: flex-start !important;
display: flex !important;
flex-direction: column !important;
}
/* Make the thumb a real 16:9 box */
body.template-page-collections .bv-collections-page-v3 .bv-thumb-v3,
body.page-collections .bv-collections-page-v3 .bv-thumb-v3{
width: 100%;
aspect-ratio: 16 / 9 !important;
height: auto !important;
overflow: hidden;
border-radius: 12px; /* optional */
}
body.template-page-collections .bv-collections-page-v3 .bv-thumb-v3 img,
body.page-collections .bv-collections-page-v3 .bv-thumb-v3 img{
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* price always visible under image */
body.template-page-collections .bv-collections-page-v3 .bv-price-v3,
body.page-collections .bv-collections-page-v3 .bv-price-v3{
margin-top: 8px !important;
padding-bottom: 2px !important;
}
}
/* =========================================================
COLLECTIONS PAGE — MOBILE: Disable 3rd panel completely
========================================================= */
@media (max-width: 989px){
/* 1) Hide the bottom (3rd) panel entirely */
body.template-page-collections .bv-collections-page-v3 [data-bv-panel="bottom"],
body.page-collections .bv-collections-page-v3 [data-bv-panel="bottom"]{
display: none !important;
}
/* 2) Lock stack to exactly 2 screens */
body.template-page-collections .bv-collections-page-v3 .bv-collections-stack-v3[data-bv-panels],
body.page-collections .bv-collections-page-v3 .bv-collections-stack-v3[data-bv-panels]{
max-height: 200dvh !important; /* 2 panels only */
height: 200dvh !important;
overflow-y: auto !important;
}
/* 3) Each panel remains one full screen */
body.template-page-collections .bv-collections-page-v3 .bv-collections-panel-v3,
body.page-collections .bv-collections-page-v3 .bv-collections-panel-v3{
height: 100dvh !important;
}
}
@media (max-width: 989px){
/* Safety: never clip vertically on the row */
body.template-page-collections .bv-collections-page-v3 .bv-row-v3[data-bv-row],
body.page-collections .bv-collections-page-v3 .bv-row-v3[data-bv-row]{
overflow-x: auto !important;
overflow-y: visible !important;
padding-bottom: 0 !important;
align-items: flex-start !important;
}
/* Card becomes a TRUE square */
body.template-page-collections .bv-collections-page-v3 .bv-card-v3,
body.page-collections .bv-collections-page-v3 .bv-card-v3{
position: relative !important;
flex: 0 0 68vw !important; /* <-- size knob (width) */
width: 68vw !important; /* keep deterministic */
aspect-ratio: 1 / 1 !important;/* perfect square */
height: auto !important; /* do NOT force 100% height */
border-radius: 0 !important; /* NO ROUND CORNERS */
overflow: hidden !important; /* crop image to square */
display: block !important;
}
/* Thumb fills the square */
body.template-page-collections .bv-collections-page-v3 .bv-thumb-v3,
body.page-collections .bv-collections-page-v3 .bv-thumb-v3{
position: absolute !important;
inset: 0 !important;
border-radius: 0 !important; /* NO ROUND CORNERS */
overflow: hidden !important;
}
body.template-page-collections .bv-collections-page-v3 .bv-thumb-v3 img,
body.page-collections .bv-collections-page-v3 .bv-thumb-v3 img{
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
}
/* Price pinned bottom-left INSIDE the square */
body.template-page-collections .bv-collections-page-v3 .bv-price-v3,
body.page-collections .bv-collections-page-v3 .bv-price-v3{
position: absolute !important;
left: 10px !important;
bottom: 10px !important;
margin: 0 !important;
padding: 6px 10px !important;
border-radius: 0 !important; /* NO ROUND CORNERS */
z-index: 5 !important;
/* readable over image */
background: rgba(0,0,0,0.55) !important;
color: #fff !important;
line-height: 1 !important;
font-size: 14px !important; /* <-- price size knob */
pointer-events: none !important;
}
}
/* =========================================================
Collections Page (DESKTOP ONLY)
Square tiles + price pinned bottom-left + no rounding
Fix vertical cutoff/clipping
========================================================= */
@media (min-width: 990px){
/* Row must NOT clip vertically */
body.template-page-collections .bv-collections-page-v3 .bv-row-v3[data-bv-row],
body.page-collections .bv-collections-page-v3 .bv-row-v3[data-bv-row]{
overflow-x: auto !important;
overflow-y: visible !important; /* fixes bottom cutoff */
align-items: flex-start !important;
padding-bottom: 0 !important;
}
/* Card becomes a TRUE square tile */
body.template-page-collections .bv-collections-page-v3 .bv-card-v3,
body.page-collections .bv-collections-page-v3 .bv-card-v3{
position: relative !important;
flex: 0 0 320px !important; /* <-- DESKTOP TILE SIZE KNOB */
width: 320px !important; /* keep deterministic */
aspect-ratio: 1 / 1 !important; /* perfect square */
height: auto !important; /* do NOT force 100% height */
border-radius: 0 !important; /* NO ROUND CORNERS */
overflow: hidden !important; /* crop image to square */
display: block !important;
}
/* Thumb fills the square */
body.template-page-collections .bv-collections-page-v3 .bv-thumb-v3,
body.page-collections .bv-collections-page-v3 .bv-thumb-v3{
position: absolute !important;
inset: 0 !important;
border-radius: 0 !important; /* NO ROUND CORNERS */
overflow: hidden !important;
}
body.template-page-collections .bv-collections-page-v3 .bv-thumb-v3 img,
body.page-collections .bv-collections-page-v3 .bv-thumb-v3 img{
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
}
/* Price pinned bottom-left INSIDE the square */
body.template-page-collections .bv-collections-page-v3 .bv-price-v3,
body.page-collections .bv-collections-page-v3 .bv-price-v3{
position: absolute !important;
left: 12px !important;
bottom: 12px !important;
margin: 0 !important;
padding: 6px 10px !important;
border-radius: 0 !important; /* NO ROUND CORNERS */
z-index: 5 !important;
background: rgba(0,0,0,0.55) !important;
color: #fff !important;
line-height: 1 !important;
font-size: 14px !important; /* <-- PRICE SIZE KNOB */
pointer-events: none !important;
}
}
/* Two-page lock (top + bottom only) */
body.template-page-collections .bv-collections-stack-v3[data-bv-panels],
body.page-collections .bv-collections-stack-v3[data-bv-panels]{
max-height: 200vh !important; /* two full screens total */
overflow-x: hidden !important;
}
/* =========================================================
BV Collections Page V3 — Fix vertical squish (3 per panel)
Works on desktop + mobile
========================================================= */
.bv-collections-page-v3{
--bv-panel-height: 100vh; /* each page */
--bv-rows-per-panel: 3; /* 3 collections per panel */
--bv-collection-gap: 34px; /* <-- MAIN SPACING KNOB */
--bv-inner-pad-y: 18px; /* <-- TOP/BOTTOM breathing room */
}
/* The scroller that holds panels */
body.template-page-collections .bv-collections-page-v3 .bv-collections-stack-v3[data-bv-panels],
body.page-collections .bv-collections-page-v3 .bv-collections-stack-v3[data-bv-panels]{
height: var(--bv-panel-height) !important;
overflow-y: auto !important;
overflow-x: hidden !important;
}
/* Each panel = one screen */
body.template-page-collections .bv-collections-page-v3 .bv-collections-panel-v3,
body.page-collections .bv-collections-page-v3 .bv-collections-panel-v3{
height: var(--bv-panel-height) !important;
display: flex !important;
flex-direction: column !important;
gap: var(--bv-collection-gap) !important;
padding: var(--bv-inner-pad-y) 0 !important;
box-sizing: border-box !important;
}
/* Each collection block = exactly 1/3 of the panel (minus gaps) */
body.template-page-collections .bv-collections-page-v3 .bv-collections-panel-v3 > .bv-collection-block-v3,
body.page-collections .bv-collections-page-v3 .bv-collections-panel-v3 > .bv-collection-block-v3{
height: calc(
(var(--bv-panel-height) - (var(--bv-inner-pad-y) * 2) - (var(--bv-collection-gap) * (var(--bv-rows-per-panel) - 1)))
/ var(--bv-rows-per-panel)
) !important;
position: relative !important;
overflow: visible !important; /* prevents cut-off */
}
/* Remove any old "50dvh" rules that might still be winning */
@media (max-width: 989px){
body.template-page-collections .bv-collections-page-v3 .bv-collections-panel-v3 > .bv-collection-block-v3,
body.page-collections .bv-collections-page-v3 .bv-collections-panel-v3 > .bv-collection-block-v3{
height: calc(
(var(--bv-panel-height) - (var(--bv-inner-pad-y) * 2) - (var(--bv-collection-gap) * (var(--bv-rows-per-panel) - 1)))
/ var(--bv-rows-per-panel)
) !important;
}
}
/* === GLOBAL COLLECTION SCALE CONTROL === */
.bv-collection-block-v3{
--bv-collection-scale: 0.92; /* 🔧 change this number: 1 = normal, 0.9 = smaller, 0.85 = much smaller */
transform: scale(var(--bv-collection-scale));
transform-origin: left center;
}
/* === GLOBAL COLLECTION SCALE CONTROL === */
.bv-collection-block-v3{
--bv-collection-scale: 0.92; /* 🔧 change this number: 1 = normal, 0.9 = smaller, 0.85 = much smaller */
transform: scale(var(--bv-collection-scale));
transform-origin: left center;
}
/* === TIGHTEN SPACE BETWEEN COLLECTIONS === */
/* Desktop */
@media (min-width: 990px){
.bv-collections-panel-v3{
gap: 0px !important; /* 🔧 reduce this (0–12px range is good) */
}
.bv-collection-block-v3{
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
}
/* Mobile */
@media (max-width: 989px){
.bv-collections-panel-v3{
gap: 4px !important; /* 🔧 even tighter on mobile */
}
.bv-collection-block-v3{
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
}
/* ================================
FORCE COLLECTIONS TO PACK TIGHT
================================ */
/* Desktop */
@media (min-width: 990px){
.bv-collections-panel-v3{
display: flex !important;
flex-direction: column !important;
gap: 0px !important; /* 🔥 THIS is the main gap killer */
}
.bv-collections-panel-v3 > .bv-collection-block-v3{
height: auto !important; /* 🔥 remove fixed height */
min-height: 0 !important;
margin: 0 !important;
padding-bottom: 0 !important;
}
}
/* Mobile */
@media (max-width: 989px){
.bv-collections-panel-v3{
display: flex !important;
flex-direction: column !important;
gap: 0px !important;
}
.bv-collections-panel-v3 > .bv-collection-block-v3{
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
padding-bottom: 0 !important;
}
}
/* ================================
BV Collections: 3-per-panel + GAP KNOB
Put this at the VERY END (last CSS wins)
================================ */
.bv-collections-page-v3{
/* 🔧 KNOBS (edit these numbers) */
--bv-panel-gap: 0px; /* space BETWEEN collections */
--bv-panel-pad-y: 10px; /* top/bottom padding inside each panel */
--bv-scale-all: 1.0; /* slight overall scale down */
}
/* scale the whole section slightly */
.bv-collections-page-v3{
transform: scale(var(--bv-scale-all));
transform-origin: top center;
}
/* make stack the scroll container and kill horizontal scrolling */
.bv-collections-stack-v3[data-bv-panels]{
overflow-x: hidden !important;
overflow-y: auto !important;
}
/* EACH PANEL = one screen, packs 3 blocks with controllable gap */
.bv-collections-panel-v3{
height: 100dvh !important;
display: flex !important;
flex-direction: column !important;
gap: var(--bv-panel-gap) !important;
padding-top: var(--bv-panel-pad-y) !important;
padding-bottom: var(--bv-panel-pad-y) !important;
box-sizing: border-box !important;
}
/* 🔥 THIS is the line that actually UNLOCKS spacing:
remove your old hard lock height:50dvh by overriding it */
.bv-collections-panel-v3 > .bv-collection-block-v3{
height: calc(
(100dvh - (var(--bv-panel-pad-y) * 2) - (var(--bv-panel-gap) * 2)) / 3
) !important;
min-height: 0 !important;
margin: 0 !important;
padding-bottom: 0 !important;
overflow: hidden !important;
}
/* === Per-collection vertical nudges (edit the px values) === */
.bv-collections-page-v3{
--bv-row1-y: 18px;
--bv-row2-y: -60px;
--bv-row3-y: -140px;
--bv-row4-y: -90px;
--bv-row5-y: -90px;
--bv-row6-y: -90px;
}
/* applies in document order after your randomizeCollections runs */
.bv-collections-stack-v3 [data-bv-collection-block]:nth-of-type(1){ transform: translateY(var(--bv-row1-y)) !important; }
.bv-collections-stack-v3 [data-bv-collection-block]:nth-of-type(2){ transform: translateY(var(--bv-row2-y)) !important; }
.bv-collections-stack-v3 [data-bv-collection-block]:nth-of-type(3){ transform: translateY(var(--bv-row3-y)) !important; }
.bv-collections-stack-v3 [data-bv-collection-block]:nth-of-type(4){ transform: translateY(var(--bv-row4-y)) !important; }
.bv-collections-stack-v3 [data-bv-collection-block]:nth-of-type(5){ transform: translateY(var(--bv-row5-y)) !important; }
.bv-collections-stack-v3 [data-bv-collection-block]:nth-of-type(6){ transform: translateY(var(--bv-row6-y)) !important; }
/* ================================
MOBILE ONLY — 2-PAGE SNAP + HEIGHT KNOBS
================================ */
@media (max-width: 989px){
/* Your scroll container MUST be the snap container */
.bv-collections-stack-v3[data-bv-panels]{
height: 100dvh;
overflow-y: auto;
overflow-x: hidden;
/* lock to pages */
scroll-snap-type: y mandatory;
scroll-snap-stop: always;
-webkit-overflow-scrolling: touch;
overscroll-behavior-y: contain;
}
/* Each "panel" is a full page */
.bv-collections-panel-v3{
height: 100dvh;
scroll-snap-align: start;
scroll-snap-stop: always;
display: flex;
flex-direction: column;
/* IMPORTANT: prevent weird flex shrink */
min-height: 100dvh;
}
/* ---- MOBILE HEIGHT KNOBS (defaults) ----
You can edit these numbers directly (px or vh).
*/
.bv-collections-page-v3{
--bv-c1-h: 33.33vh;
--bv-c2-h: 33.33vh;
--bv-c3-h: 33.33vh;
--bv-c4-h: 33.33vh;
--bv-c5-h: 33.33vh;
--bv-c6-h: 33.33vh;
--bv-mobile-collection-gap: 0px; /* gap between collections inside a panel */
}
/* Apply per-collection heights by order */
.bv-collections-panel-v3[data-bv-panel="top"] > .bv-collection-block-v3:nth-of-type(1){ height: var(--bv-c1-h) !important; }
.bv-collections-panel-v3[data-bv-panel="top"] > .bv-collection-block-v3:nth-of-type(2){ height: var(--bv-c2-h) !important; }
.bv-collections-panel-v3[data-bv-panel="top"] > .bv-collection-block-v3:nth-of-type(3){ height: var(--bv-c3-h) !important; }
.bv-collections-panel-v3[data-bv-panel="mid"] > .bv-collection-block-v3:nth-of-type(1){ height: var(--bv-c4-h) !important; }
.bv-collections-panel-v3[data-bv-panel="mid"] > .bv-collection-block-v3:nth-of-type(2){ height: var(--bv-c5-h) !important; }
.bv-collections-panel-v3[data-bv-panel="mid"] > .bv-collection-block-v3:nth-of-type(3){ height: var(--bv-c6-h) !important; }
/* Make blocks stack tightly (no mystery margins) */
.bv-collections-panel-v3{
gap: var(--bv-mobile-collection-gap) !important;
}
.bv-collections-panel-v3 > .bv-collection-block-v3{
margin: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
position: relative;
overflow: hidden;
flex: 0 0 auto; /* respect the height we set */
}
}
/* =========================
MOBILE ONLY: Row Height Knobs (Row 1–6)
Adjust these numbers to change each collection's height.
NOTE: This applies by *position* (row order), not by specific collection handle.
========================= */
@media (max-width: 989px){
/* 🔧 KNOBS: edit these */
.bv-collections-page-v3{
--bv-row1-h: 33.3vh;
--bv-row2-h: 33.3vh;
--bv-row3-h: 33.4vh;
--bv-row4-h: 33.3vh;
--bv-row5-h: 33.3vh;
--bv-row6-h: 33.4vh;
/* optional: gap between rows (tighten here) */
--bv-row-gap: 0px;
}
/* Make panels stack rows with NO extra vertical whitespace */
.bv-collections-panel-v3{
gap: var(--bv-row-gap);
}
/* TOP panel rows 1–3 */
.bv-collections-panel-v3[data-bv-panel="top"] > .bv-collection-block-v3:nth-of-type(1){ height: var(--bv-row1-h) !important; }
.bv-collections-panel-v3[data-bv-panel="top"] > .bv-collection-block-v3:nth-of-type(2){ height: var(--bv-row2-h) !important; }
.bv-collections-panel-v3[data-bv-panel="top"] > .bv-collection-block-v3:nth-of-type(3){ height: var(--bv-row3-h) !important; }
/* MID panel rows 4–6 */
.bv-collections-panel-v3[data-bv-panel="mid"] > .bv-collection-block-v3:nth-of-type(1){ height: var(--bv-row4-h) !important; }
.bv-collections-panel-v3[data-bv-panel="mid"] > .bv-collection-block-v3:nth-of-type(2){ height: var(--bv-row5-h) !important; }
.bv-collections-panel-v3[data-bv-panel="mid"] > .bv-collection-block-v3:nth-of-type(3){ height: var(--bv-row6-h) !important; }
/* Ensure each block clips cleanly */
.bv-collection-block-v3{
min-height: 0 !important;
overflow: hidden;
}
/* Keep the product row filling the block */
.bv-row-v3[data-bv-row]{
height: 100%;
}
}
/* ================================
MOBILE: Crop header from BOTTOM ONLY
================================ */
@media (max-width: 989px){
header.header{
overflow: hidden !important;
}
header.header .header-inner{
max-height: -45434px; /* 👈 CHANGE THIS NUMBER */
overflow: hidden !important;
}
}
/* =========================================
Collections page ONLY — Mobile header crop
Crops from the BOTTOM by forcing a shorter height
========================================= */
@media (max-width: 989px){
body.template-page-collections header.header,
body.page-collections header.header{
height: var(--bv-collections-header-h, 44px) !important; /* 👈 KNOB */
min-height: 0 !important;
overflow: hidden !important;
}
body.template-page-collections header.header .header-inner,
body.page-collections header.header .header-inner{
height: 100% !important;
padding-top: 0 !important; /* keep top the same */
padding-bottom: 0 !important; /* remove bottom push */
overflow: hidden !important;
}
/* If your theme draws the header background with a pseudo-element */
body.template-page-collections header.header::before,
body.template-page-collections header.header::after,
body.page-collections header.header::before,
body.page-collections header.header::after{
max-height: 100% !important;
overflow: hidden !important;
}
}
/* =========================================
MOBILE: Shrink header bar but keep buttons same size
Collections page only
========================================= */
@media (max-width: 989px){
body.template-page-collections header.header,
body.page-collections header.header{
transform: scaleY(0.72); /* 👈 HOW SHORT THE HEADER BECOMES */
transform-origin: top;
}
/* Counter-scale the content so buttons/text stay same size */
body.template-page-collections header.header .header-inner,
body.page-collections header.header .header-inner{
transform: scaleY(1.3889); /* = 1 / 0.72 */
transform-origin: top;
}
}
/* =========================================
MOBILE + COLLECTIONS PAGE:
DELETE the black overlay brick above header
========================================= */
@media (max-width: 989px){
/* Kill any background layer on the header */
body.template-page-collections header.header,
body.page-collections header.header{
background: transparent !important;
box-shadow: none !important;
}
/* Kill pseudo-element overlays */
body.template-page-collections header.header::before,
body.template-page-collections header.header::after,
body.page-collections header.header::before,
body.page-collections header.header::after{
display: none !important;
content: none !important;
}
/* Kill any background wrapper inside header */
body.template-page-collections header.header [class*="bg"],
body.page-collections header.header [class*="bg"]{
display: none !important;
}
}
/* =========================================================
MOBILE + Collections page ONLY: kill the black overlay/bar
(works for Dawn + many Shopify themes)
========================================================= */
@media (max-width: 989px){
/* Match BOTH common body class styles */
body.template-page.page-collections,
body.template-page-collections,
body.page-collections {
/* 1) Announcement bar (often the “brick”) */
.announcement-bar,
.announcement-bar__message,
.shopify-section-announcement-bar,
#shopify-section-announcement-bar {
background: transparent !important;
box-shadow: none !important;
}
/* If the brick IS the announcement bar, just hide it */
.announcement-bar,
.shopify-section-announcement-bar,
#shopify-section-announcement-bar{
display: none !important;
}
/* 2) Header wrappers / sticky overlay layers */
.header-wrapper,
.header-wrapper--border-bottom,
.header-background,
.header__background,
.header__bg,
.header-bg,
.site-header__background,
.sticky-header,
.shopify-section-header,
#shopify-section-header{
background: transparent !important;
box-shadow: none !important;
border: 0 !important;
}
/* 3) The usual “overlay pseudo-elements” that create a bar */
header::before, header::after,
.header-wrapper::before, .header-wrapper::after,
#shopify-section-header::before, #shopify-section-header::after,
.shopify-section-header::before, .shopify-section-header::after{
content: none !important;
display: none !important;
}
/* 4) “background divs” inside header used only for color */
header [class*="bg"],
header [class*="background"],
header [class*="overlay"]{
background: transparent !important;
box-shadow: none !important;
}
}
}
/* MOBILE ONLY: move the entire BV Collections page group down (adjustable) */
@media (max-width: 989px){
body.template-page.page-collections .bv-collections-page-v3,
body.template-page-collections .bv-collections-page-v3,
body.page-collections .bv-collections-page-v3{
--bv-page-y: -10px; /* 🔧 KNOB: increase/decrease */
transform: translateY(var(--bv-page-y)) !important;
will-change: transform;
}
}
/* Collections page: faster-feeling scrolling while staying smooth */
body.template-page-collections .bv-collections-stack-v3[data-bv-panels],
body.page-collections .bv-collections-stack-v3[data-bv-panels]{
scroll-behavior: smooth; /* smooth snap */
scroll-snap-type: y mandatory;
scroll-snap-stop: always;
/* "faster" feel: less elastic + less chain */
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
body.template-page-collections .bv-collections-stack-v3[data-bv-panels],
body.page-collections .bv-collections-stack-v3[data-bv-panels]{
scroll-behavior: auto !important; /* instant */
}
/* MOBILE ONLY: vertical offset for collections stack (fix top crop) */
@media (max-width: 989px){
.bv-collections-page-v3{
--bv-mobile-top-offset: 2px; /* 🔧 KNOB: increase/decrease this */
}
.bv-collections-stack-v3[data-bv-panels]{
padding-top: var(--bv-mobile-top-offset) !important;
box-sizing: border-box;
}
}
@media (max-width: 989px){
.bv-collections-page-v3{
--bv-mobile-top-offset: 2px; /* 🔧 Global top push */
--bv-row-1-offset: 20px; /* 🔧 Row 1 push down */
--bv-row-3-offset: 20px; /* 🔧 Row 3 push down */
}
.bv-collections-stack-v3[data-bv-panels]{
padding-top: var(--bv-mobile-top-offset) !important;
box-sizing: border-box;
}
/* Row 1 */
.bv-collections-panel-v3 .bv-collection-block-v3:nth-child(1){
transform: translateY(var(--bv-row-1-offset));
}
/* Row 3 */
.bv-collections-panel-v3 .bv-collection-block-v3:nth-child(3){
transform: translateY(var(--bv-row-3-offset));
}
}
@media (max-width: 989px){
/* Make each product card a positioning context */
.bv-card-v3{
position: relative !important;
overflow: hidden !important;
}
/* Make the image/thumb fill the card */
.bv-thumb-v3{
position: absolute !important;
inset: 0 !important; /* top/right/bottom/left = 0 */
width: 100% !important;
height: 100% !important;
}
.bv-thumb-v3 img{
width: 100% !important;
height: 100% !important;
object-fit: cover !important; /* fills box, crops if needed */
display: block !important;
}
/* Price tag pinned bottom-left */
.bv-price-v3{
position: absolute !important;
left: 10px !important;
bottom: 10px !important;
z-index: 5 !important;
/* optional readability */
padding: 6px 10px !important;
border-radius: 0 !important;
}
}
/* DESKTOP ONLY: price tag overlay on bottom-left of product image */
@media (min-width: 990px){
.bv-card-v3{
position: relative; /* anchor for absolute price */
}
.bv-thumb-v3{
position: relative; /* ensures tag stays on the image area */
overflow: hidden;
}
.bv-price-v3{
position: absolute;
left: 12px;
bottom: 12px;
z-index: 5;
background: #fff;
color: #000;
padding: 6px 10px;
border-radius: 999px;
font-weight: 700;
font-size: 12px;
line-height: 1;
letter-spacing: .02em;
box-shadow: 0 8px 22px rgba(0,0,0,.22);
pointer-events: none; /* tag doesn't interfere with hover/scroll */
}
}
/* MOBILE: keep your current layout (no overlay) */
@media (max-width: 989px){
.bv-price-v3{
position: static;
}
}
/* DESKTOP ONLY: price tag overlay inside the image */
@media (min-width: 990px){
.bv-thumb-v3{
position: relative !important;
overflow: hidden;
}
.bv-price-v3{
position: absolute !important;
left: 12px;
bottom: 12px;
z-index: 10;
background: #fff;
color: #000;
padding: 6px 10px;
border-radius: 999px;
font-weight: 700;
font-size: 12px;
line-height: 1;
letter-spacing: .02em;
box-shadow: 0 8px 22px rgba(0,0,0,.22);
pointer-events: none;
}
}
/* MOBILE: hide tag entirely (since you said desktop only) */
@media (max-width: 989px){
.bv-price-v3{ display: none !important; }
}
@media (min-width: 990px){
.bv-thumb-v3{
position: relative !important;
overflow: hidden;
}
.bv-price-v3{
position: absolute !important;
left: 1px;
bottom: 48px; /* 👈 moved upward */
z-index: 10;
background: #fff;
color: #000;
padding: 6px 10px;
border-radius: 999px;
font-weight: 70000;
font-size: 129px;
line-height: 1;
letter-spacing: .02em;
box-shadow: 0 8px 22px rgba(0,0,0,.22);
pointer-events: none;
}
}
/* ===== FORCE DESKTOP PRICE TAG VISIBILITY ===== */
@media (min-width: 990px){
.bv-card-v3{
position: relative !important;
overflow: visible !important;
}
.bv-thumb-v3{
position: relative !important;
overflow: visible !important;
}
.bv-thumb-v3 img{
display: block !important;
}
.bv-price-v3{
display: block !important;
opacity: 1 !important;
visibility: visible !important;
position: absolute !important;
left: 14px !important;
bottom: 28px !important; /* adjust height here */
z-index: 9999 !important;
background: #ffffff !important;
color: #000000 !important;
padding: 7px 12px !important;
border-radius: 999px !important;
font-weight: 700 !important;
font-size: 120px !important;
line-height: 1 !important;
box-shadow: 0 6px 20px rgba(0,0,0,.25) !important;
pointer-events: none !important;
}
}
/* ===== DESKTOP: scale images smaller inside their cards ===== */
@media (min-width: 990px){
.bv-thumb-v3{
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: transparent;
}
.bv-thumb-v3 img{
width: auto !important;
height: auto !important;
max-width: 111% !important; /* 👈 scale amount */
max-height: 111% !important; /* 👈 scale amount */
object-fit: contain !important;
}
}
/* ===== UN-CROP ALL PRODUCT IMAGES ===== */
/* Desktop */
@media (min-width: 990px){
.bv-thumb-v3{
overflow: visible !important; /* stop clipping */
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.bv-thumb-v3 img{
width: auto !important;
height: auto !important;
max-width: 90% !important;
max-height: 90% !important;
object-fit: contain !important; /* 👈 THIS is the uncrop */
}
}
/* Mobile */
@media (max-width: 989px){
.bv-thumb-v3{
overflow: visible !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.bv-thumb-v3 img{
width: auto !important;
height: auto !important;
max-width: 111% !important;
max-height: 111% !important;
object-fit: contain !important; /* 👈 no crop */
}
}
/* ===== NUDGE IMAGES UP INSIDE CARDS ===== */
/* Desktop */
@media (min-width: 990px){
.bv-thumb-v3 img{
transform: translateY(-6%); /* 👈 move UP (try -4% to -10%) */
}
}
/* Mobile */
@media (max-width: 989px){
.bv-thumb-v3 img{
transform: translateY(-4%); /* slightly less on mobile */
}
}
/* ===== DESKTOP: make product boxes taller ===== */
@media (min-width: 990px){
.bv-card-v3{
height: 162% !important; /* 👈 increase vertical size */
}
}
.bv-collection-title-v3{
text-decoration: none;
color: inherit;
cursor: pointer;
}
.bv-collection-title-v3:hover{
text-decoration: underline; /* or remove if you want zero effect */
}
/* ===== MOBILE ONLY: extend product row so cards don't get cut off ===== */
@media (max-width: 989px){
/* give the products a little more vertical room */
.bv-row-v3[data-bv-row]{
height: 108% !important; /* extend row viewport */
padding-bottom: 22px !important; /* extra breathing room */
overflow-x: auto !important;
overflow-y: visible !important; /* allow card to show fully */
}
/* let the card itself breathe (prevents bottom cut) */
.bv-card-v3{
height: calc(100% - 8px) !important;
}
/* if the image wrapper was clipping */
.bv-thumb-v3{
overflow: visible !important;
}
}
/* ===== MOBILE ONLY: move ONLY the product rows (not title/line) ===== */
@media (max-width: 989px){
/* knob-controlled left padding so the row starts more to the right */
.bv-row-v3[data-bv-row]{
padding: 12px var(--bv-row-pad-right-mobile) 12px calc(12px + var(--bv-products-x-mobile)) !important;
transform: none !important; /* avoid translate clipping issues */
box-sizing: border-box !important;
}
/* keep cards the same size you chose */
.bv-card-v3{
flex: 0 0 70vw;
max-width: 70vw;
}
}
@media (max-width: 989px){
/* move ONLY the products row to the right (NOT title/line) */
.bv-row-v3[data-bv-row]{
gap: var(--bv-row-gap-mobile) !important;
/* shift the start position right so it clears the title rail */
padding: 12px var(--bv-row-pad-right-mobile) 12px calc(12px + var(--bv-products-x-mobile)) !important;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
touch-action: pan-x;
overscroll-behavior-x: contain;
}
/* key fix: make cards a fixed width (desktop-like), so many show at once */
.bv-card-v3{
flex: 0 0 var(--bv-card-w-mobile) !important;
max-width: var(--bv-card-w-mobile) !important;
height: var(--bv-card-h-mobile) !important;
}
/* keep see more consistent with card sizing */
.bv-seemore-v3{
flex: 0 0 var(--bv-card-w-mobile) !important;
max-width: var(--bv-card-w-mobile) !important;
}
}
@media (max-width: 989px){
/* IMPORTANT: stop clipping the horizontal scroller */
.bv-collections-panel-v3 > .bv-collection-block-v3{
overflow: visible !important; /* was hidden; this was clipping your row */
}
/* Expand the row viewport to the RIGHT only */
.bv-row-v3[data-bv-row]{
/* keep scrolling */
overflow-x: auto !important;
overflow-y: hidden !important;
-webkit-overflow-scrolling: touch;
/* Start position (left inset) */
padding-left: calc(12px + var(--bv-row-left-inset-mobile)) !important;
/* Normal right padding + extra viewport expansion */
padding-right: calc(var(--bv-row-right-pad-mobile) + var(--bv-row-expand-right-mobile)) !important;
/* The actual trick: make the row “wider” to the right */
width: calc(100% + var(--bv-row-expand-right-mobile)) !important;
/* Pull it back so it only expands RIGHT (not left) */
margin-left: 0 !important;
margin-right: calc(-1 * var(--bv-row-expand-right-mobile)) !important;
/* keep your spacing */
gap: var(--bv-row-gap-mobile, 12px) !important;
}
}
/* ===== MOBILE ONLY: force images to scale into a square (no crop) ===== */
@media (max-width: 989px){
/* Make each card a square */
.bv-card-v3{
aspect-ratio: 1 / 1 !important;
height: auto !important;
}
/* Make the image wrapper fill the square */
.bv-thumb-v3{
width: 100% !important;
height: 100% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
overflow: hidden !important;
}
/* Scale image to fit inside square WITHOUT cropping */
.bv-thumb-v3 img{
width: auto !important;
height: auto !important;
max-width: 120% !important;
max-height: 120% !important;
object-fit: contain !important; /* 👈 critical: NO crop */
}
}
/* ===== MOBILE ONLY: show FULL image inside the entire box (no bottom cut) ===== */
@media (max-width: 989px){
/* stop any parent clipping the card contents */
.bv-collections-panel-v3 > .bv-collection-block-v3,
.bv-row-v3[data-bv-row],
.bv-card-v3,
.bv-thumb-v3{
overflow: visible !important;
}
/* the card defines the box; keep it stable */
.bv-card-v3{
height: 100% !important;
aspect-ratio: auto !important; /* remove forced square/tall ratio if it caused clipping */
}
/* make the thumb be the visible box and allow image to fit */
.bv-thumb-v3{
width: 100% !important;
height: 100% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
margin: 0 !important;
/* IMPORTANT: the thumb is the box; don't hide anything */
overflow: visible !important;
}
/* image must fit entirely (no crop) */
.bv-thumb-v3 img{
width: 100% !important;
height: 100% !important;
object-fit: contain !important; /* 👈 full image always visible */
transform: none !important; /* remove any downward shift */
display: block !important;
}
}
/* ===== MOBILE ONLY: show price tag inside the image block ===== */
@media (max-width: 989px){
/* Make sure the image box can host overlays */
.bv-thumb-v3{
position: relative !important;
overflow: visible !important;
}
/* Price tag overlay */
.bv-price-v3{
display: block !important;
position: absolute !important;
left: 10px !important;
bottom: 10px !important;
z-index: 50 !important;
background: #ffffff !important;
color: #000000 !important;
padding: 6px 10px !important;
border-radius: 999px !important;
font-weight: 700 !important;
font-size: 12px !important;
line-height: 1 !important;
box-shadow: 0 6px 18px rgba(0,0,0,0.25) !important;
pointer-events: none !important;
white-space: nowrap !important;
}
}
/* ===== PRODUCT CARD: price in black block UNDER image ===== */
/* Make card a vertical stack */
.bv-card-v3{
display: flex !important;
flex-direction: column !important;
}
/* Image area */
.bv-thumb-v3{
flex: 1 1 auto !important;
position: relative !important;
}
/* Turn price into a footer bar */
.bv-price-v3{
position: static !important; /* NOT absolute */
transform: none !important;
display: block !important;
width: 100% !important;
margin: 0 !important;
padding: 10px 12px !important;
background: #000 !important;
color: #fff !important;
font-weight: 700 !important;
font-size: 14px !important;
line-height: 1 !important;
border-radius: 0 !important;
box-shadow: none !important;
text-align: left !important;
}
/* Visually move price OUT of image and into bottom bar */
.bv-thumb-v3 .bv-price-v3{
position: absolute !important;
left: 0;
right: 0;
bottom: -42px; /* 👈 pushes it below the image */
}
/* Make space for the price bar under the image */
.bv-card-v3{
padding-bottom: 42px !important; /* MUST match the height above */
}
/* ===== MOBILE ONLY: scale images to FIT the entire box (no crop) ===== */
@media (max-width: 989px){
/* The card defines the box */
.bv-card-v3{
display: flex !important;
flex-direction: column !important;
}
/* Image container fills available space */
.bv-thumb-v3{
flex: 1 1 auto !important;
width: 100% !important;
height: 100% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
overflow: hidden !important; /* box is the mask */
position: relative !important;
}
/* Image scales to fit ENTIRE box */
.bv-thumb-v3 img{
width: 100% !important;
height: 100% !important;
object-fit: contain !important; /* 👈 KEY: no crop, full image always visible */
display: block !important;
max-width: 100% !important;
max-height: 100% !important;
transform: none !important;
}
}
/* ===== MOBILE ONLY: image is bottom layer, ONLY price overlays it, no crop, no overscale ===== */
@media (max-width: 989px){
/* Ensure the card behaves predictably */
.bv-card-v3{
position: relative !important;
display: flex !important;
flex-direction: column !important;
}
/* Image container becomes the stacking context */
.bv-thumb-v3{
position: relative !important;
width: 100% !important;
height: 100% !important;
overflow: hidden !important; /* keep everything inside the box */
isolation: isolate !important; /* prevents outside z-index weirdness */
}
/* Put image BEHIND everything */
.bv-thumb-v3 img{
position: absolute !important;
inset: 0 !important;
z-index: 1 !important;
width: 100% !important;
height: 100% !important;
object-fit: contain !important; /* ✅ no crop */
object-position: center !important;
transform: none !important;
display: block !important;
max-width: 100% !important; /* ✅ no overscaling */
max-height: 100% !important; /* ✅ no overscaling */
}
/* Remove/disable any other overlays inside the thumb (if any ever exist) */
.bv-thumb-v3 > :not(img):not(.bv-price-v3){
display: none !important;
}
/* Price tag is the ONLY thing allowed on top of the image */
.bv-thumb-v3 .bv-price-v3{
display: block !important;
position: absolute !important;
left: 10px !important;
bottom: 10px !important;
z-index: 2 !important;
background: #fff !important;
color: #000 !important;
padding: 6px 10px !important;
border-radius: 999px !important;
font-weight: 700 !important;
font-size: 12px !important;
line-height: 1 !important;
box-shadow: 0 6px 18px rgba(0,0,0,.25) !important;
pointer-events: none !important;
white-space: nowrap !important;
transform: none !important;
}
}
@media (max-width: 989px){
.bv-collections-panel-v3 > .bv-collection-block-v3{
overflow: visible !important;
}
}
@media (max-width: 989px){
.bv-collections-panel-v3,
.bv-collection-block-v3,
.bv-collection-block-v3 .container{
overflow: visible !important;
}
}
@media (max-width: 989px){
/* IMPORTANT: stop clipping the horizontal scroller */
.bv-collections-panel-v3 > .bv-collection-block-v3{
overflow: visible !important; /* was hidden; this was clipping your row */
}
/* Expand the row viewport to the RIGHT only */
.bv-row-v3[data-bv-row]{
/* keep scrolling */
overflow-x: auto !important;
overflow-y: hidden !important;
-webkit-overflow-scrolling: touch;
/* Start position (left inset) */
padding-left: calc(12px + var(--bv-row-left-inset-mobile)) !important;
/* Normal right padding + extra viewport expansion */
padding-right: calc(var(--bv-row-right-pad-mobile) + var(--bv-row-expand-right-mobile)) !important;
/* The actual trick: make the row “wider” to the right */
width: calc(100% + var(--bv-row-expand-right-mobile)) !important;
/* Pull it back so it only expands RIGHT (not left) */
margin-left: 0 !important;
margin-right: calc(-1 * var(--bv-row-expand-right-mobile)) !important;
/* keep your spacing */
gap: var(--bv-row-gap-mobile, 12px) !important;
}
}
@media (max-width: 989px){
.bv-collections-panel-v3 > .bv-collection-block-v3{ overflow: visible !important; }
.bv-row-v3[data-bv-row]{ overscroll-behavior-x: contain; }
}
/* ===== MOBILE: allow vertical scroll ANYWHERE + horizontal row scroll when swiping sideways ===== */
@media (max-width: 989px){
/* The page can always scroll vertically */
.bv-collections-stack-v3[data-bv-panels]{
touch-action: pan-y !important;
}
/* Each product row can scroll horizontally, but DOES NOT block vertical scrolling */
.bv-row-v3[data-bv-row]{
touch-action: pan-x !important; /* sideways on row = row */
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
}
/* Avoid clipping that can make scroll feel “stuck” */
.bv-collections-panel-v3 > .bv-collection-block-v3{
overflow: visible !important;
}
}
@media (max-width: 989px){
.bv-collections-stack-v3[data-bv-panels]{
scroll-snap-type: y mandatory;
scroll-snap-stop: always;
/* THIS is the sensitivity control */
scroll-padding-top: 0px;
scroll-padding-bottom: 0px;
}
}
@media (max-width: 989px){
.bv-collections-stack-v3[data-bv-panels]{
scroll-snap-type: y proximity !important; /* 👈 slower, less aggressive snap */
scroll-behavior: smooth !important; /* 👈 flow */
-webkit-overflow-scrolling: touch;
}
.bv-collections-panel-v3{
scroll-snap-align: start;
scroll-snap-stop: normal; /* 👈 less “hard lock” */
}
}
@media (max-width: 989px){
.bv-collections-stack-v3[data-bv-panels]{
scroll-snap-type: y proximity !important; /* gentle snap */
scroll-behavior: smooth !important; /* smooth glide */
-webkit-overflow-scrolling: touch;
/* These two make it feel heavier */
scroll-padding-top: 12vh;
scroll-padding-bottom: 12vh;
}
.bv-collections-panel-v3{
scroll-snap-align: start;
scroll-snap-stop: normal;
}
}
/* make rows feel non-snappy + free */
.bv-row-v3[data-bv-row]{
scroll-snap-type: none !important; /* kill snap */
scroll-behavior: auto !important; /* JS handles smoothness */
overscroll-behavior-x: auto !important; /* no “hard boundary” feel */
-webkit-overflow-scrolling: touch;
}
/* allow page to feel free too */
.bv-collections-stack-v3[data-bv-panels]{
scroll-snap-type: none !important; /* kill vertical snap if you want “no boundaries” */
overscroll-behavior: auto !important; /* remove “contain” */
}
/* =========================================================
BV — FORCE HEADER TO MATCH HOME (MOBILE ONLY)
Applies only on /page/collections (page template)
========================================================= */
@media (max-width: 989px){
/* Target ONLY your collections page.
Shopify usually adds body classes like:
template-page, page-
*/
body.template-page.page-collections,
body.template-page.page-collections-v3,
body.template-page.page-collections-page,
body.template-page[class*="page-collections"]{
/* If your page CSS pushed everything down/up, neutralize it */
}
/* Force header wrapper to behave like Home */
body.template-page[class*="page-collections"] .header-wrapper,
body.template-page[class*="page-collections"] .section-header,
body.template-page[class*="page-collections"] header.header,
body.template-page[class*="page-collections"] .site-header{
position: sticky !important;
top: 0 !important;
z-index: 9999 !important;
/* Match “home feel” */
width: 100% !important;
transform: none !important;
margin: 0 !important;
}
/* Normalize the inner header sizing */
body.template-page[class*="page-collections"] header.header,
body.template-page[class*="page-collections"] .header{
min-height: 64px !important; /* adjust if home header is taller */
padding-top: 10px !important;
padding-bottom: 10px !important;
}
/* Make logo + icons consistent */
body.template-page[class*="page-collections"] .header__heading-logo,
body.template-page[class*="page-collections"] .header__heading img{
height: 26px !important; /* adjust to match home */
width: auto !important;
max-width: 160px !important;
object-fit: contain !important;
}
body.template-page[class*="page-collections"] .header__icon,
body.template-page[class*="page-collections"] .header__icon svg{
width: 22px !important;
height: 22px !important;
}
/* IMPORTANT: Ensure the page content starts under the sticky header */
body.template-page[class*="page-collections"] .bv-collections-page-v3{
padding-top: 74px !important; /* header height + breathing room */
}
}
/* =========================================================
BV — Header scale control (Collections page, MOBILE ONLY)
========================================================= */
@media (max-width: 989px){
/* ✅ KNOB: change this */
body.template-page[class*="page-collections"]{
--bv-header-scale-mobile: 0.8; /* 1.00 = normal, 0.85 smaller, 0.95 slightly smaller */
--bv-header-top-mobile: 0px; /* move up/down if needed */
}
/* Scale the whole header */
body.template-page[class*="page-collections"] .shopify-section-header,
body.template-page[class*="page-collections"] .header-wrapper,
body.template-page[class*="page-collections"] header.header{
transform: scale(var(--bv-header-scale-mobile)) !important;
transform-origin: top center !important;
top: var(--bv-header-top-mobile) !important;
z-index: 9999 !important;
}
/* Because scaling shrinks visually but not layout flow, we compensate height */
body.template-page[class*="page-collections"] .bv-collections-page-v3{
/* adjust this if your content overlaps the header */
padding-top: calc(74px * var(--bv-header-scale-mobile)) !important;
}
}
@media (max-width: 989px){
body.template-page[class*="page-collections"] header,
body.template-page[class*="page-collections"] .header-wrapper,
body.template-page[class*="page-collections"] .shopify-section-header{
transform: none !important;
}
}
/* =========================================================
BV — Proper header size control (Collections page, MOBILE)
No scaling. No squish. Real sizing.
========================================================= */
@media (max-width: 989px){
body.template-page[class*="page-collections"]{
/* ====== KNOBS ====== */
--bv-header-height: 56px; /* total header height */
--bv-header-pad-y: 6px; /* vertical padding inside */
--bv-logo-height: 22px; /* logo size */
--bv-icon-size: 20px; /* cart/menu icons */
}
/* Header wrapper */
body.template-page[class*="page-collections"] header.header,
body.template-page[class*="page-collections"] .header-wrapper,
body.template-page[class*="page-collections"] .shopify-section-header{
height: var(--bv-header-height) !important;
min-height: var(--bv-header-height) !important;
}
/* Inner header spacing */
body.template-page[class*="page-collections"] .header__inner,
body.template-page[class*="page-collections"] .header__content{
padding-top: var(--bv-header-pad-y) !important;
padding-bottom: var(--bv-header-pad-y) !important;
}
/* Logo */
body.template-page[class*="page-collections"] .header__heading-logo,
body.template-page[class*="page-collections"] .header__heading img{
height: var(--bv-logo-height) !important;
width: auto !important;
max-height: var(--bv-logo-height) !important;
}
/* Icons */
body.template-page[class*="page-collections"] .header__icon,
body.template-page[class*="page-collections"] .header__icon svg{
width: var(--bv-icon-size) !important;
height: var(--bv-icon-size) !important;
}
/* Push page content below header */
body.template-page[class*="page-collections"] .bv-collections-page-v3{
padding-top: calc(var(--bv-header-height) + 6px) !important;
}
}
/* =========================================================
FIX: Header is narrower horizontally ONLY on collections page
Mobile only — force full width, remove max-width constraints
========================================================= */
@media (max-width: 989px){
/* Target only the collections PAGE template */
body.template-page[class*="page-collections"] .shopify-section-header,
body.template-page[class*="page-collections"] header.header,
body.template-page[class*="page-collections"] .header-wrapper{
width: 100vw !important;
max-width: 100vw !important;
margin-left: 0 !important;
margin-right: 0 !important;
/* If any parent is centering/squeezing: */
left: 0 !important;
right: 0 !important;
}
/* If your theme uses a "page-width" container inside the header */
body.template-page[class*="page-collections"] .shopify-section-header .page-width,
body.template-page[class*="page-collections"] header.header .page-width,
body.template-page[class*="page-collections"] .header-wrapper .page-width,
body.template-page[class*="page-collections"] .shopify-section-header .container,
body.template-page[class*="page-collections"] header.header .container{
width: 100% !important;
max-width: 100% !important;
}
/* Safety: kill any accidental horizontal scaling */
body.template-page[class*="page-collections"] .shopify-section-header,
body.template-page[class*="page-collections"] header.header,
body.template-page[class*="page-collections"] .header-wrapper{
transform: none !important;
}
}
/* =========================================================
BV — Slightly smaller header (Collections page, MOBILE)
Proper sizing — no transform, no squish
========================================================= */
@media (max-width: 989px){
body.template-page[class*="page-collections"]{
/* ====== KNOBS (tune these) ====== */
--bv-header-height: 56px; /* try 52px – 60px */
--bv-header-pad-y: 6px; /* try 4px – 8px */
--bv-logo-height: 2px; /* try 20px – 24px */
--bv-icon-size: 20px; /* try 18px – 22px */
}
/* Header outer */
body.template-page[class*="page-collections"] .shopify-section-header,
body.template-page[class*="page-collections"] header.header,
body.template-page[class*="page-collections"] .header-wrapper{
height: var(--bv-header-height) !important;
min-height: var(--bv-header-height) !important;
}
/* Inner padding */
body.template-page[class*="page-collections"] .header__inner,
body.template-page[class*="page-collections"] .header__content{
padding-top: var(--bv-header-pad-y) !important;
padding-bottom: var(--bv-header-pad-y) !important;
}
/* Logo */
body.template-page[class*="page-collections"] .header__heading-logo,
body.template-page[class*="page-collections"] .header__heading img{
height: var(--bv-logo-height) !important;
max-height: var(--bv-logo-height) !important;
width: auto !important;
}
/* Icons */
body.template-page[class*="page-collections"] .header__icon,
body.template-page[class*="page-collections"] .header__icon svg{
width: var(--bv-icon-size) !important;
height: var(--bv-icon-size) !important;
}
/* Make sure content starts below header */
body.template-page[class*="page-collections"] .bv-collections-page-v3{
padding-top: calc(var(--bv-header-height) + 6px) !important;
}
}
@media (max-width: 989px){
/* The product row area (NOT the title rail) */
.bv-row-v3[data-bv-row]{
height: var(--bv-row-h-mobile) !important;
transform: translateY(var(--bv-row-y-mobile)) !important;
padding-top: var(--bv-row-pad-y-mobile) !important;
padding-bottom: var(--bv-row-pad-y-mobile) !important;
/* HARD LOCK: no vertical panning within the row */
overflow-y: hidden !important;
touch-action: pan-x !important; /* only horizontal gesture */
overscroll-behavior-y: none !important;
-webkit-overflow-scrolling: touch;
}
/* Make sure row children don't cause vertical drag */
.bv-row-v3[data-bv-row] *{
touch-action: pan-x !important;
}
}
/* MOBILE ONLY: make product rows use DEFAULT native horizontal scrolling */
@media (max-width: 989px){
.bv-row-v3[data-bv-row]{
overflow-x: auto !important;
overflow-y: hidden !important;
-webkit-overflow-scrolling: touch;
scroll-behavior: auto !important;
/* turn off any horizontal snap that feels "animated" */
scroll-snap-type: none !important;
/* native horizontal gesture */
touch-action: pan-x !important;
}
}
@media (max-width: 989px){
/* product row area sizing + vertical position (products only) */
.bv-collections-panel-v3 > .bv-collection-block-v3{
/* keep your existing block height logic, but row uses its own height below */
}
.bv-row-v3[data-bv-row]{
/* ✅ lock products from moving up/down inside the row */
overflow-x: auto !important;
overflow-y: hidden !important;
/* ✅ allow ONLY left/right gesture on the row */
touch-action: pan-x !important;
/* smooth native iOS momentum */
-webkit-overflow-scrolling: touch;
/* ✅ your vertical position knobs */
height: var(--bv-row-h-mobile) !important;
transform: translateY(var(--bv-row-y-mobile)) !important;
/* optional spacing knobs */
padding-top: var(--bv-row-pad-top-mobile) !important;
padding-bottom: var(--bv-row-pad-bottom-mobile) !important;
/* remove any snap/animation feeling */
scroll-snap-type: none !important;
scroll-behavior: auto !important;
}
/* Optional: keep the row anchored so it doesn’t “wiggle” vertically */
.bv-row-v3[data-bv-row]::-webkit-scrollbar{
height: 0px;
}
}
/* DESKTOP ONLY — make product rows behave like native horizontal scrollers */
@media (min-width: 990px){
.bv-row-v3[data-bv-row]{
overflow-x: auto !important;
overflow-y: hidden !important;
/* no snapping / no “script-feel” */
scroll-snap-type: none !important;
scroll-behavior: auto !important;
/* smoother native trackpad feel where supported */
overscroll-behavior-x: contain;
-webkit-overflow-scrolling: auto;
}
}
/* ===============================
FORCE ALL PRODUCT TILES SAME SIZE
=============================== */
/* Shared (desktop + mobile) */
.bv-row-v3[data-bv-row]{
align-items: stretch !important;
}
.bv-card-v3{
flex: 0 0 var(--bv-card-w-desktop, 260px);
width: var(--bv-card-w-desktop, 260px);
height: 100% !important;
display: flex;
}
.bv-thumb-v3{
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
/* Image always fits the box */
.bv-thumb-v3 img{
width: 100%;
height: 100%;
object-fit: contain; /* 👈 no cropping */
display: block;
}
/* ===============================
DESKTOP SIZE KNOBS
=============================== */
@media (min-width: 990px){
.bv-collections-page-v3{
--bv-card-w-desktop: 260px; /* 👈 DESKTOP TILE WIDTH */
--bv-card-h-desktop: 150%; /* rows control height */
}
.bv-card-v3{
height: var(--bv-card-h-desktop, 100%) !important;
}
}
/* ===============================
MOBILE SIZE KNOBS
=============================== */
/* ===============================
DESKTOP: MAKE TILES TALLER (KEEP WIDTH SAME)
=============================== */
@media (min-width: 990px){
.bv-collections-page-v3{
--bv-card-h-desktop: 4200px; /* 👈 CONTROL KNOB: increase this number */
}
.bv-card-v3{
height: var(--bv-card-h-desktop) !important;
}
/* Make row adopt the tallest card height */
.bv-row-v3[data-bv-row]{
align-items: stretch !important;
}
.bv-thumb-v3{
height: 100% !important;
}
}
/* =========================================
DESKTOP ONLY: FORCE TILE ASPECT RATIO
(keeps width the same, changes height)
========================================= */
@media (min-width: 990px){
/* 👇 KNOB: pick your ratio (taller = smaller first number OR larger second number)
Examples:
"1 / 1" = square
"4 / 5" = slightly tall
"3 / 5" = tall
"2 / 5" = very tall
*/
.bv-collections-page-v3{
--bv-card-ar-desktop: 3 / 5;
}
/* Force the card box itself to obey aspect-ratio */
.bv-row-v3[data-bv-row] .bv-card-v3{
aspect-ratio: var(--bv-card-ar-desktop) !important;
height: auto !important; /* important: let aspect-ratio control height */
align-self: flex-start; /* prevents stretching weirdness */
}
/* Make the image container fill the forced card box */
.bv-row-v3[data-bv-row] .bv-card-v3 .bv-thumb-v3{
width: 100% !important;
height: 100% !important;
}
/* Make the image respect the container size */
.bv-row-v3[data-bv-row] .bv-card-v3 .bv-thumb-v3 img{
width: 100% !important;
height: 100% !important;
/* keep your look:
- use "cover" if you want it to fill (may crop)
- use "contain" if you want no crop (may letterbox)
*/
object-fit: contain !important;
display: block;
}
}
/* =========================================================
FIX: Center product images inside tiles (all devices)
========================================================= */
/* Controls (optional knobs) */
.bv-collections-page-v3{
--bv-tile-img-y-desktop: 50%; /* 0% = top, 50% = center, 100% = bottom */
--bv-tile-img-y-mobile: 0%;
}
.bv-thumb-v3{
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
/* hard-center the content area */
display: flex;
align-items: center;
justify-content: center;
}
.bv-thumb-v3 img{
display: block;
width: 100%;
height: 100%;
/* makes the image fill the tile without “floating” to the top */
object-fit: cover;
/* THIS is the centering fix */
object-position: 50% var(--bv-tile-img-y-desktop);
}
/* Mobile knob */
@media (max-width: 989px){
.bv-thumb-v3 img{
object-position: 50% var(--bv-tile-img-y-mobile);
}
}
/* Make sure your price overlay stays pinned (optional but recommended) */
.bv-price-v3{
position: absolute;
left: 12px;
bottom: 12px;
z-index: 2;
}
/* =========================================================
BV Collections Page: Move image+price GROUP downward INSIDE tiles
Applies to all product tiles inside rows on bvcollectionspage
========================================================= */
.bv-collections-page-v3{
/* KNOBS */
--bv-tile-group-y-desktop: 18px; /* + down / - up */
--bv-tile-group-y-mobile: 12px; /* + down / - up */
}
/* Make sure tiles behave predictably */
.bv-collections-page-v3 .bv-row-v3[data-bv-row] .bv-card-v3{
box-sizing: border-box;
display: block; /* keep link as block */
height: 100%;
overflow: hidden; /* prevents any “bump” from bleeding outside */
}
/* DESKTOP: push the thumb group down inside the tile */
@media (min-width: 990px){
.bv-collections-page-v3 .bv-row-v3[data-bv-row] .bv-card-v3{
padding-top: var(--bv-tile-group-y-desktop);
}
.bv-collections-page-v3 .bv-row-v3[data-bv-row] .bv-card-v3 .bv-thumb-v3{
height: calc(100% - var(--bv-tile-group-y-desktop));
}
}
/* MOBILE: same idea with its own knob */
@media (max-width: 989px){
.bv-collections-page-v3 .bv-row-v3[data-bv-row] .bv-card-v3{
padding-top: var(--bv-tile-group-y-mobile);
}
.bv-collections-page-v3 .bv-row-v3[data-bv-row] .bv-card-v3 .bv-thumb-v3{
height: calc(100% - var(--bv-tile-group-y-mobile));
}
}
/* Ensure thumb is the positioning context for the price overlay */
.bv-collections-page-v3 .bv-row-v3[data-bv-row] .bv-thumb-v3{
position: relative;
width: 100%;
overflow: hidden;
}
/* Keep overlay anchored inside the (moved) thumb */
.bv-collections-page-v3 .bv-row-v3[data-bv-row] .bv-price-v3{
position: absolute;
left: 12px;
bottom: 12px;
}
/* =========================================================
BV Collections Page — Independent IMAGE position controls
Moves the image + price GROUP inside the tile
Desktop and Mobile have SEPARATE knobs
========================================================= */
.bv-collections-page-v3{
/* =========================
POSITION KNOBS
========================= */
--bv-img-offset-y-desktop: -24px; /* + = move image DOWN, - = move UP */
--bv-img-offset-y-mobile: 16px; /* + = move image DOWN, - = move UP */
/* Optional fine tuning */
--bv-img-scale-desktop: 1.0;
--bv-img-scale-mobile: 1.0;
}
/* Make sure tile is a stable frame */
.bv-collections-page-v3 .bv-row-v3[data-bv-row] .bv-card-v3{
position: relative;
overflow: hidden;
height: 100%;
}
/* Thumb is the moving GROUP (image + price) */
.bv-collections-page-v3 .bv-row-v3[data-bv-row] .bv-thumb-v3{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
/* Image itself */
.bv-collections-page-v3 .bv-row-v3[data-bv-row] .bv-thumb-v3 img{
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
/* Price stays attached to the image */
.bv-collections-page-v3 .bv-row-v3[data-bv-row] .bv-price-v3{
position: absolute;
left: 12px;
bottom: 12px;
z-index: 2;
}
/* =========================
DESKTOP
========================= */
@media (min-width: 990px){
.bv-collections-page-v3 .bv-row-v3[data-bv-row] .bv-thumb-v3{
transform:
translateY(var(--bv-img-offset-y-desktop))
scale(var(--bv-img-scale-desktop));
}
}
/* =========================
MOBILE
========================= */
@media (max-width: 989px){
.bv-collections-page-v3 .bv-row-v3[data-bv-row] .bv-thumb-v3{
transform:
translateY(var(--bv-img-offset-y-mobile))
scale(var(--bv-img-scale-mobile));
}
}
/* =========================================================
BV Collections Page — Force PRODUCT IMAGE to 4:3
(Does NOT change tile size, only the image box)
========================================================= */
.bv-collections-page-v3 .bv-card-v3{
position: relative;
overflow: hidden;
}
/* The image container becomes a 4:3 frame */
.bv-collections-page-v3 .bv-thumb-v3{
position: absolute;
left: 0;
right: 0;
/* 🔒 4:3 aspect ratio */
aspect-ratio: 4 / 3;
/* center it vertically inside the tile */
top: 50%;
transform: translateY(-50%);
/* optional: limit width so it doesn't overflow weirdly */
width: 100%;
}
/* The image fills the 4:3 frame */
.bv-collections-page-v3 .bv-thumb-v3 img{
width: 100%;
height: 100%;
object-fit: contain; /* use 'cover' if you want cropping instead */
display: block;
}
/* Price stays attached to the image */
.bv-collections-page-v3 .bv-price-v3{
position: absolute;
left: 12px;
bottom: -12px;
z-index: 2;
}
/* =========================
TILE ASPECT RATIO (stable)
- Keeps same ratio always
- Only card width changes by screen size
========================= */
.bv-row-v3[data-bv-row]{
align-items: stretch; /* keep row height behavior */
}
.bv-card-v3{
flex: 0 0 auto;
/* Width scales with screen size (adjust these if you want) */
width: clamp(180px, 28vw, 420px);
}
/* Ratio wrapper (forces consistent tile shape) */
.bv-card-v3 .bv-thumb-v3{
position: relative;
width: 100%;
aspect-ratio: 16 / 9; /* <<< set your desired ratio */
overflow: hidden;
border-radius: inherit; /* if your theme uses rounded cards */
}
/* Image fills the ratio box */
.bv-card-v3 .bv-thumb-v3 img{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover; /* keeps aspect ratio, crops if needed */
display: block;
}
/* Price overlay stays on top of the image */
.bv-card-v3 .bv-price-v3{
position: absolute;
left: 12px;
bottom: 12px;
z-index: 2;
}
/* =========================
Responsive scaling ONLY
========================= */
/* Desktop: slightly larger tiles */
@media (min-width: 990px){
.bv-card-v3{
width: clamp(220px, 22vw, 520px);
}
}
/* Mobile: smaller tiles */
@media (max-width: 989px){
.bv-card-v3{
width: clamp(160px, 70vw, 360px);
}
}
/* =========================
BIGGER PRODUCT TILES
========================= */
/* Base size */
.bv-card-v3{
width: clamp(260px, 34vw, 620px); /* ⬅️ bigger across the board */
}
/* Desktop: even bigger */
@media (min-width: 990px){
.bv-card-v3{
width: clamp(320px, 26vw, 720px);
}
}
/* Mobile: still big, but controlled */
@media (max-width: 989px){
.bv-card-v3{
width: clamp(240px, 80vw, 520px);
}
}
/* =========================================================
BV Collections: iPhone FIX — prevent double vertical scroll
One scroll container ONLY: .bv-collections-stack-v3
========================================================= */
@media (max-width: 989px){
/* Scope to your page template handle (adjust if your body class differs) */
body.template-page[class*="page-collections"],
body.template-page[class*="page-collections"] html{
height: 100%;
}
/* Kill BODY scroll on this page so iOS can't drift the whole document */
body.template-page[class*="page-collections"]{
overflow: hidden !important;
position: relative;
overscroll-behavior: none;
}
/* If any wrapper tries to scroll, stop it */
body.template-page[class*="page-collections"] main,
body.template-page[class*="page-collections"] #MainContent{
overflow: hidden !important;
}
/* Make the stack the ONLY vertical scroller */
body.template-page[class*="page-collections"] .bv-collections-stack-v3[data-bv-panels]{
overflow-y: auto !important;
overflow-x: hidden !important;
-webkit-overflow-scrolling: touch;
/* Snap between halves (panels) */
scroll-snap-type: y mandatory;
scroll-snap-stop: always;
/* Prevent scroll chaining/rubber-band from affecting the page */
overscroll-behavior: contain;
/* IMPORTANT: give it a constrained height (set below via --bv-header-h) */
height: calc(100dvh - var(--bv-header-h, 64px)) !important;
}
/* Ensure panels fill the stack viewport exactly */
body.template-page[class*="page-collections"] .bv-collections-panel-v3{
height: calc(100dvh - var(--bv-header-h, 64px)) !important;
scroll-snap-align: start;
}
}
/* =========================================
Collections page ONLY — Mobile header crop
Crops from the BOTTOM by forcing a shorter height
========================================= */
@media (max-width: 989px){
body.template-page-collections header.header,
body.page-collections header.header{
height: var(--bv-collections-header-h, 44px) !important; /* 👈 KNOB */
min-height: 0 !important;
overflow: hidden !important;
}
body.template-page-collections header.header .header-inner,
body.page-collections header.header .header-inner{
height: 100% !important;
padding-top: 0 !important; /* keep top the same */
padding-bottom: 0 !important; /* remove bottom push */
overflow: hidden !important;
}
/* If your theme draws the header background with a pseudo-element */
body.template-page-collections header.header::before,
body.template-page-collections header.header::after,
body.page-collections header.header::before,
body.page-collections header.header::after{
max-height: 100% !important;
overflow: hidden !important;
}
}
/* ===============================
FORCE SAME HEADER ON ALL PAGES (MOBILE)
=============================== */
@media (max-width: 989px){
header.header{
height: 56px !important; /* 🔧 unified header height */
min-height: 56px !important;
max-height: 56px !important;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
align-items: center !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
header.header .header-inner{
height: 100% !important;
min-height: 100% !important;
display: flex !important;
align-items: center !important;
padding: 0 10px !important; /* 🔧 horizontal breathing room */
box-sizing: border-box !important;
}
/* Kill any page-specific header stretching */
body header.header{
position: sticky !important;
top: 0 !important;
}
/* Normalize nav + icons vertically */
header.header nav,
header.header .header-actions{
height: 100% !important;
display: flex !important;
align-items: center !important;
}
}
/* =========================================================
MOBILE HEADER NORMALIZER (applies sitewide)
========================================================= */
@media (max-width: 768px) {
/* Make sure header isn't inheriting a scale/transform from page sections */
.header,
.header * {
transform: none !important;
}
header.header {
position: sticky;
top: 0;
z-index: 9999;
width: 100%;
max-width: 100vw;
left: 0;
right: 0;
}
header.header .header-inner {
width: 100%;
max-width: 100vw;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
/* Override any container scaling / strange padding on mobile */
header.header .container {
width: 100%;
max-width: 100vw !important;
padding-left: 14px !important;
padding-right: 14px !important;
}
/* Left placeholder should never steal space on mobile */
header.header .header-left {
display: none !important;
}
/* Center nav should wrap nicely instead of pushing off-screen */
header.header .nav.nav-center {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
line-height: 1.2;
text-align: center;
min-width: 0;
flex: 1 1 auto;
}
header.header .nav.nav-center a,
header.header .nav.nav-center .sep {
white-space: nowrap;
font-size: 13px;
}
/* Actions stay right and never expand the layout */
header.header .header-actions {
display: flex;
align-items: center;
gap: 1px;
flex: 0 0 auto;
min-width: 0;
}
header.header .header-icon {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 18px;
line-height: 1;
padding: 6px 6px;
}
/* Badge stays on top and doesn't force width changes */
header.header .cart-badge {
position: relative;
top: -6px;
margin-left: 4px;
font-size: 11px;
}
}
/* Overlay always above everything during intro */
.intro-overlay {
position: fixed;
inset: 0;
z-index: 999999; /* higher than header */
background: #000;
}
/* Header is normal and lower than overlay */
header.header {
position: sticky;
top: 0;
z-index: 1000;
}
/* =========================================================
MOBILE: shift the nav links (Home | Collections | Products | Account)
to the RIGHT, while keeping Search/Cart fixed
========================================================= */
@media (max-width: 768px) {
/* Keep the whole header layout stable */
header.header .header-inner{
display:flex;
align-items:center;
justify-content:space-between;
}
/* Make sure actions stay put (right side) */
header.header .header-actions{
flex: 0 0 auto;
margin-left: 0 !important;
}
/* Nav becomes the flexible middle area */
header.header .nav.nav-center{
flex: 1 1 auto;
min-width: 0;
display:flex;
justify-content:center; /* default center */
}
/* === YOUR CONTROL KNOB ===
Increase this value to move ONLY the nav buttons to the right
without affecting the search/cart.
*/
header.header .nav.nav-center{
padding-left: var(--bv-mobile-nav-shift, 0px);
}
}
@media (max-width: 768px) {
:root { --bv-mobile-nav-shift: 22px; }
}
@media (max-width: 768px) {
header.header .nav.nav-center{
flex-wrap: wrap;
gap: 8px;
}
}
/* =========================================================
HARD RESET HEADER ONLY ON COLLECTIONS PAGE
(prevents page CSS/scroll container from nudging it)
========================================================= */
.bv-collections-page-v3 ~ header.header,
.bv-collections-page-v3 header.header,
body header.header {
transform: none !important;
}
/* If your header is outside this section (normal), target it by body page template + your class.
This works even if the header is not inside bv-collections-page-v3. */
body:has(.bv-collections-page-v3) header.header{
left: 0 !important;
right: 0 !important;
width: 100% !important;
max-width: 100vw !important;
}
/* lock inner container widths so it matches other pages */
@media (min-width: 990px){
body:has(.bv-collections-page-v3) header.header .container{
width: min(1200px, calc(100vw - 64px)) !important; /* match your global header width */
margin-left: auto !important;
margin-right: auto !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
}
/* =========================================================
MOBILE: move page links (Home | Collections | Products | Account)
closer to Search/Cart (actions stay fixed)
========================================================= */
@media (max-width: 768px) {
/* --- YOUR CONTROL KNOB --- */
:root{
--bv-nav-to-actions-gap: 4px; /* smaller = closer */
--bv-nav-right-pull: 10px; /* bigger = nav moves closer to actions */
}
header.header .header-inner{
display:flex;
align-items:center;
justify-content:space-between;
gap: 10px; /* overall spacing */
}
/* Keep search/cart stable */
header.header .header-actions{
flex: 0 0 auto;
margin-left: 0 !important;
}
/* Nav takes remaining space */
header.header .nav.nav-center{
flex: 1 1 auto;
min-width: 0;
display:flex;
justify-content: flex-end; /* push nav toward actions */
margin-right: var(--bv-nav-to-actions-gap);
padding-right: var(--bv-nav-right-pull); /* pulls links closer to actions */
gap: 8px;
white-space: nowrap;
}
}
@media (max-width: 768px){
:root{
--bv-nav-to-actions-gap: 0px;
--bv-nav-right-pull: 18px;
}
}
/* =========================================================
MOBILE ONLY: move ONLY the center nav closer to the actions
(Search/Cart stay exactly where they are)
========================================================= */
@media (max-width: 768px){
/* ✅ ADJUST THIS */
:root{
--bv-mobile-nav-right-shift: 30px; /* increase = nav moves closer to icons */
}
/* Keep actions pinned (no movement) */
header.header .header-actions{
flex: 0 0 auto;
margin-left: 0 !important;
}
/* Make nav a flexible middle area, then nudge it RIGHT */
header.header .nav.nav-center{
flex: 1 1 auto;
min-width: 0;
/* this moves ONLY the nav content right */
transform: translateX(var(--bv-mobile-nav-right-shift)) !important;
/* keep your current look */
display: flex;
justify-content: center;
align-items: center;
white-space: nowrap;
}
}
/* =========================================================
MOBILE: Pull page content UP closer to the header
(Home + Products, without touching header)
========================================================= */
@media (max-width: 768px){
/* === YOUR CONTROL KNOB === */
:root{
--bv-mobile-content-pull-up: 18px; /* increase = closer to header */
}
/* Generic Shopify main content wrappers */
main,
#MainContent,
.main-content,
.shopify-section:first-child,
.page-width:first-child,
.template-index .shopify-section:first-child,
.template-collection .shopify-section:first-child,
.template-page .shopify-section:first-child,
.template-product .shopify-section:first-child {
margin-top: calc(var(--bv-mobile-content-pull-up) * -1) !important;
padding-top: 0 !important;
}
}
/* =========================================================
MOBILE: Move ONLY the Collections page slightly DOWN
========================================================= */
@media (max-width: 768px){
/* 🎛️ YOUR CONTROL KNOB */
:root{
--bv-mobile-collections-push-down: 16px; /* increase = move page down */
}
/* Target ONLY your custom collections page */
body:has(.bv-collections-page-v3) .bv-collections-page-v3{
margin-top: var(--bv-mobile-collections-push-down) !important;
}
}
/* =========================================================
MOBILE: Slightly SCALE UP the entire Collections page
========================================================= */
@media (max-width: 768px){
/* 🎛️ YOUR CONTROL KNOB */
:root{
--bv-mobile-collections-scale: 1.16; /* 1.02 = subtle, 1.05 = strong */
}
/* Only scale the collections page content (not header) */
body:has(.bv-collections-page-v3) .bv-collections-page-v3{
transform: scale(var(--bv-mobile-collections-scale)) !important;
transform-origin: top center;
}
/* Prevent horizontal overflow caused by scaling */
body:has(.bv-collections-page-v3){
overflow-x: hidden;
}
}
/* =========================================================
REMOVE ALL OUTLINES / BORDERS FROM COLLECTION TILES
(Desktop + Mobile)
========================================================= */
/* Product cards */
.bv-card-v3{
border: none !important;
outline: none !important;
box-shadow: none !important;
background: transparent !important;
}
/* Image container inside card */
.bv-card-v3 .bv-thumb-v3{
border: none !important;
outline: none !important;
box-shadow: none !important;
}
/* Kill focus outlines when tapping/clicking */
.bv-card-v3:focus,
.bv-card-v3:focus-visible,
.bv-card-v3:active{
outline: none !important;
box-shadow: none !important;
}
/* Also remove any outline from "See more" tile */
.bv-seemore-v3{
border: none !important;
outline: none !important;
box-shadow: none !important;
background: transparent !important;
}
.bv-seemore-v3:focus,
.bv-seemore-v3:focus-visible,
.bv-seemore-v3:active{
outline: none !important;
box-shadow: none !important;
}
/* =========================================================
MOBILE: Move ONLY the Products (All Products / Collection) page UP
========================================================= */
@media (max-width: 768px){
/* 🎛️ YOUR CONTROL KNOB */
:root{
--bv-mobile-products-pull-up: 50px; /* increase = closer to header */
}
/* Shopify collections / all-products page template */
body.template-collection main,
body.template-collection #MainContent,
body.template-collection .shopify-section:first-child{
margin-top: calc(var(--bv-mobile-products-pull-up) * -1) !important;
padding-top: 0 !important;
}
}
/* =========================================================
DESKTOP: Move ONLY the Products (All Products / Collection) page UP
========================================================= */
@media (min-width: 769px){
/* 🎛️ YOUR CONTROL KNOB */
:root{
--bv-desktop-products-pull-up: 140px; /* increase = closer to header */
}
/* Shopify collection / all-products template */
body.template-collection main,
body.template-collection #MainContent,
body.template-collection .shopify-section:first-child{
margin-top: calc(var(--bv-desktop-products-pull-up) * -1) !important;
padding-top: 0 !important;
}
}
/* =========================================================
DESKTOP: Slightly SCALE UP the entire Collections page
========================================================= */
@media (min-width: 990px){
/* 🎛️ YOUR CONTROL KNOB */
:root{
--bv-desktop-collections-scale: 1.0; /* 1.02 = subtle, 1.08 = big */
}
/* Only scale the collections page content (not header) */
body:has(.bv-collections-page-v3) .bv-collections-page-v3{
transform: scale(var(--bv-desktop-collections-scale)) !important;
transform-origin: top center;
}
/* Prevent overflow caused by scaling */
body:has(.bv-collections-page-v3){
overflow-x: hidden;
}
}
/* =========================================================
DESKTOP: Move the ENTIRE Collections page UP
========================================================= */
@media (min-width: 990px){
/* 🎛️ YOUR CONTROL KNOB */
:root{
--bv-desktop-collections-pull-up: 40px; /* increase = moves page up more */
}
/* Only affect your custom collections page */
body:has(.bv-collections-page-v3) .bv-collections-page-v3{
margin-top: calc(var(--bv-desktop-collections-pull-up) * -1) !important;
}
}
/* =========================================================
MOBILE: Move ENTIRE Collections page UP
========================================================= */
@media (max-width: 989px){
/* 🎛️ YOUR CONTROL KNOB */
:root{
--bv-mobile-collections-pull-up: 40px; /* increase = moves page up more */
}
/* Only affect your custom collections page */
body:has(.bv-collections-page-v3) .bv-collections-page-v3{
margin-top: calc(var(--bv-mobile-collections-pull-up) * -1) !important;
}
}
/* =========================================================
MOBILE: Move ENTIRE Collections page slightly LEFT
========================================================= */
@media (max-width: 989px){
/* 🎛️ YOUR CONTROL KNOB */
:root{
--bv-mobile-collections-shift-x: -112px; /* more negative = more left */
}
body:has(.bv-collections-page-v3) .bv-collections-page-v3{
/* Combine with your existing scale safely */
transform:
translateX(var(--bv-mobile-collections-shift-x))
scale(var(--bv-mobile-collections-scale, 1));
transform-origin: top center;
}
/* Prevent any horizontal overflow from the shift */
body:has(.bv-collections-page-v3){
overflow-x: hidden;
}
}
@media (max-width: 989px){
.bv-collections-page-v3{
transform: translateX(var(--bv-page-x-mobile));
}
}
@media (min-width: 990px){
.fullpage[data-fullpage]{
--bv-home-scale-desktop: 2.8; /* 1 = normal, 0.95 = slightly smaller, 1.05 = bigger */
transform: scale(var(--bv-home-scale-desktop));
transform-origin: top center;
}
}
/* DESKTOP ONLY — move the entire homepage up/down */
@media (min-width: 990px){
.fullpage[data-fullpage]{
--bv-home-y-desktop: -120px; /* negative = UP, positive = DOWN */
transform: translateY(var(--bv-home-y-desktop));
}
}
/* DESKTOP ONLY — scale the entire homepage */
/* DESKTOP ONLY: force images to fill the tile and crop overflow */
@media (min-width: 990px){
/* the clickable card */
.bv-card-v3{
display: block;
}
/* the image tile */
.bv-thumb-v3{
position: relative;
overflow: hidden; /* ✅ crops anything outside the tile */
width: 100%;
/* use your existing aspect ratio knob if present */
aspect-ratio: var(--bv-card-ar-desktop, 16 / 9);
}
/* the actual product image */
.bv-thumb-v3 > img{
width: 100%;
height: 100%;
display: block;
object-fit: cover; /* ✅ fills tile, crops excess */
object-position: center; /* optional: keeps crop centered */
}
/* keep your price overlay behaving */
.bv-thumb-v3 .bv-price-v3{
position: absolute;
left: 12px;
bottom: 12px;
z-index: 2;
}
}
/* =========================================================
DESKTOP ONLY — “EDGE-TO-EDGE IMAGE STRIP”
- remove black tile/padding
- images touch side-to-side (no gaps)
- fixed height, variable width (each image keeps its own ratio)
========================================================= */
@media (min-width: 990px){
/* kill any container padding that creates “black edges” */
.bv-collection-block-v3 .container{
padding-left: 0 !important;
padding-right: 0 !important;
}
/* row becomes a tight strip */
.bv-row-v3[data-bv-row]{
display: flex !important;
align-items: stretch !important;
gap: 0 !important; /* ✅ no gaps between tiles */
padding: 0 !important; /* ✅ no row padding */
margin: 0 !important;
overflow-x: auto !important;
overflow-y: hidden !important;
scroll-snap-type: none !important; /* optional: prevent snap gaps */
}
/* each card has NO background/padding/border/radius */
.bv-card-v3{
flex: 0 0 auto !important;
display: block !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
line-height: 0 !important; /* ✅ removes tiny inline gaps */
}
/* IMPORTANT: stop enforcing a fixed aspect ratio tile */
.bv-thumb-v3{
position: relative !important;
overflow: hidden !important;
height: var(--bv-strip-h-desktop, 260px) !important; /* 🔧 adjust strip height */
width: auto !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
display: flex !important;
align-items: stretch !important;
}
/* image drives the width (keeps its own aspect ratio), all same height */
.bv-thumb-v3 > img{
height: 100% !important;
width: auto !important; /* ✅ width follows intrinsic ratio */
display: block !important;
/* If some images still show “letterboxing”, cover will crop instead */
object-fit: cover !important;
object-position: center !important;
}
/* keep price overlay on top */
.bv-thumb-v3 .bv-price-v3{
position: absolute !important;
left: 12px !important;
bottom: 12px !important;
z-index: 5 !important;
line-height: normal !important;
}
}