/** Shopify CDN: Minification failed Line 1556:36 Unexpected "*" **/ /* Bowsers custom font aliases to prevent Klaviyo font collision */ @font-face { font-family: 'BowsersPoppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('Poppins-Bold.ttf') format('truetype'); } @font-face { font-family: 'BowsersPoppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('Poppins-Bold.ttf') format('truetype'); } @font-face { font-family: 'BowsersPoppinsSemi'; font-style: normal; font-weight: 600; font-display: swap; src: url('Poppins-SemiBold.ttf') format('truetype'); } @media (min-width: 1000px) { .rendor-image .product-gallery__carousel { display: flex; flex-wrap: wrap; } .product-gallery__media.snap-center { width: calc(50% - 30px); overflow: hidden; } .product-gallery__media.snap-center img { width: 100%; height: auto; object-fit: cover; object-position: center; display: block; } /* .rendor-image[data-image-count="3"] .product-gallery__media.snap-center:nth-child(4), .rendor-image[data-image-count="5"] .product-gallery__media.snap-center:nth-child(4), .rendor-image[data-image-count="6"] .product-gallery__media.snap-center:nth-child(4), .rendor-image[data-image-count="6"] .product-gallery__media.snap-center:nth-child(7), .rendor-image[data-image-count="7"] .product-gallery__media.snap-center:nth-child(4), .rendor-image[data-image-count="7"] .product-gallery__media.snap-center:nth-child(7), .rendor-image[data-image-count="7"] .product-gallery__media.snap-center:nth-child(8), .rendor-image[data-image-count="8"] .product-gallery__media.snap-center:nth-child(4), .rendor-image[data-image-count="8"] .product-gallery__media.snap-center:nth-child(7), .rendor-image[data-image-count="9"] .product-gallery__media.snap-center:nth-child(4), .rendor-image[data-image-count="9"] .product-gallery__media.snap-center:nth-child(7), .rendor-image[data-image-count="9"] .product-gallery__media.snap-center:nth-child(10), .rendor-image[data-image-count="10"] .product-gallery__media.snap-center:nth-child(4), .rendor-image[data-image-count="10"] .product-gallery__media.snap-center:nth-child(7), .rendor-image[data-image-count="10"] .product-gallery__media.snap-center:nth-child(10), .rendor-image[data-image-count="10"] .product-gallery__media.snap-center:nth-child(11), .rendor-image[data-image-count="11"] .product-gallery__media.snap-center:nth-child(4), .rendor-image[data-image-count="11"] .product-gallery__media.snap-center:nth-child(7), .rendor-image[data-image-count="11"] .product-gallery__media.snap-center:nth-child(10), .rendor-image[data-image-count="12"] .product-gallery__media.snap-center:nth-child(4), .rendor-image[data-image-count="12"] .product-gallery__media.snap-center:nth-child(7), .rendor-image[data-image-count="12"] .product-gallery__media.snap-center:nth-child(10), .rendor-image[data-image-count="12"] .product-gallery__media.snap-center:nth-child(13), .rendor-image[data-image-count="13"] .product-gallery__media.snap-center:nth-child(4), .rendor-image[data-image-count="13"] .product-gallery__media.snap-center:nth-child(7), .rendor-image[data-image-count="13"] .product-gallery__media.snap-center:nth-child(10), .rendor-image[data-image-count="13"] .product-gallery__media.snap-center:nth-child(13), .rendor-image[data-image-count="13"] .product-gallery__media.snap-center:nth-child(14), .rendor-image[data-image-count="14"] .product-gallery__media.snap-center:nth-child(4), .rendor-image[data-image-count="14"] .product-gallery__media.snap-center:nth-child(7), .rendor-image[data-image-count="14"] .product-gallery__media.snap-center:nth-child(10), .rendor-image[data-image-count="14"] .product-gallery__media.snap-center:nth-child(13), .rendor-image[data-image-count="15"] .product-gallery__media.snap-center:nth-child(4), .rendor-image[data-image-count="15"] .product-gallery__media.snap-center:nth-child(7), .rendor-image[data-image-count="15"] .product-gallery__media.snap-center:nth-child(10), .rendor-image[data-image-count="15"] .product-gallery__media.snap-center:nth-child(13), .rendor-image[data-image-count="15"] .product-gallery__media.snap-center:nth-child(16), .rendor-image[data-image-count="16"] .product-gallery__media.snap-center:nth-child(4), .rendor-image[data-image-count="16"] .product-gallery__media.snap-center:nth-child(7), .rendor-image[data-image-count="16"] .product-gallery__media.snap-center:nth-child(10), .rendor-image[data-image-count="16"] .product-gallery__media.snap-center:nth-child(13), .rendor-image[data-image-count="16"] .product-gallery__media.snap-center:nth-child(16), .rendor-image[data-image-count="17"] .product-gallery__media.snap-center:nth-child(4), .rendor-image[data-image-count="17"] .product-gallery__media.snap-center:nth-child(7), .rendor-image[data-image-count="17"] .product-gallery__media.snap-center:nth-child(10), .rendor-image[data-image-count="17"] .product-gallery__media.snap-center:nth-child(13), .rendor-image[data-image-count="17"] .product-gallery__media.snap-center:nth-child(16), .rendor-image[data-image-count="18"] .product-gallery__media.snap-center:nth-child(4), .rendor-image[data-image-count="18"] .product-gallery__media.snap-center:nth-child(7), .rendor-image[data-image-count="18"] .product-gallery__media.snap-center:nth-child(10), .rendor-image[data-image-count="18"] .product-gallery__media.snap-center:nth-child(13), .rendor-image[data-image-count="18"] .product-gallery__media.snap-center:nth-child(16), .rendor-image[data-image-count="19"] .product-gallery__media.snap-center:nth-child(4), .rendor-image[data-image-count="19"] .product-gallery__media.snap-center:nth-child(7), .rendor-image[data-image-count="19"] .product-gallery__media.snap-center:nth-child(10), .rendor-image[data-image-count="19"] .product-gallery__media.snap-center:nth-child(13), .rendor-image[data-image-count="19"] .product-gallery__media.snap-center:nth-child(16), .rendor-image[data-image-count="19"] .product-gallery__media.snap-center:nth-child(19), .rendor-image[data-image-count="20"] .product-gallery__media.snap-center:nth-child(4), .rendor-image[data-image-count="20"] .product-gallery__media.snap-center:nth-child(7), .rendor-image[data-image-count="20"] .product-gallery__media.snap-center:nth-child(10), .rendor-image[data-image-count="20"] .product-gallery__media.snap-center:nth-child(13), .rendor-image[data-image-count="20"] .product-gallery__media.snap-center:nth-child(16), .rendor-image[data-image-count="20"] .product-gallery__media.snap-center:nth-child(19){ width: calc(100% - 30px)!important; max-width: 100%!important; aspect-ratio: 16/9; } */ .rendor-image .product-gallery[product-image-count="1"] .product-gallery__media:nth-child(1 of .gallery-image), .rendor-image .product-gallery[product-image-count="3"] .product-gallery__media:nth-child(1 of .gallery-image), .rendor-image .product-gallery[product-image-count="4"] .product-gallery__media:nth-child(1 of .gallery-image), .rendor-image .product-gallery[product-image-count="4"] .product-gallery__media:nth-child(4 of .gallery-image), .rendor-image .product-gallery[product-image-count="5"] .product-gallery__media:nth-child(1 of .gallery-image), .rendor-image .product-gallery[product-image-count="5"] .product-gallery__media:nth-child(4 of .gallery-image), .rendor-image .product-gallery[product-image-count="5"] .product-gallery__media:nth-child(5 of .gallery-image), .rendor-image .product-gallery[product-image-count="6"] .product-gallery__media:nth-child(1 of .gallery-image), .rendor-image .product-gallery[product-image-count="6"] .product-gallery__media:nth-child(4 of .gallery-image), .rendor-image .product-gallery[product-image-count="7"] .product-gallery__media:nth-child(1 of .gallery-image), .rendor-image .product-gallery[product-image-count="7"] .product-gallery__media:nth-child(4 of .gallery-image), .rendor-image .product-gallery[product-image-count="7"] .product-gallery__media:nth-child(7 of .gallery-image), .rendor-image .product-gallery[product-image-count="8"] .product-gallery__media:nth-child(1 of .gallery-image), .rendor-image .product-gallery[product-image-count="8"] .product-gallery__media:nth-child(4 of .gallery-image), .rendor-image .product-gallery[product-image-count="8"] .product-gallery__media:nth-child(7 of .gallery-image), .rendor-image .product-gallery[product-image-count="8"] .product-gallery__media:nth-child(8 of .gallery-image), .rendor-image .product-gallery[product-image-count="9"] .product-gallery__media:nth-child(1 of .gallery-image), .rendor-image .product-gallery[product-image-count="9"] .product-gallery__media:nth-child(4 of .gallery-image), .rendor-image .product-gallery[product-image-count="9"] .product-gallery__media:nth-child(7 of .gallery-image), .rendor-image .product-gallery[product-image-count="10"] .product-gallery__media:nth-child(1 of .gallery-image), .rendor-image .product-gallery[product-image-count="10"] .product-gallery__media:nth-child(4 of .gallery-image), .rendor-image .product-gallery[product-image-count="10"] .product-gallery__media:nth-child(7 of .gallery-image), .rendor-image .product-gallery[product-image-count="10"] .product-gallery__media:nth-child(10 of .gallery-image), .rendor-image .product-gallery[product-image-count="11"] .product-gallery__media:nth-child(1 of .gallery-image), .rendor-image .product-gallery[product-image-count="11"] .product-gallery__media:nth-child(4 of .gallery-image), .rendor-image .product-gallery[product-image-count="11"] .product-gallery__media:nth-child(7 of .gallery-image), .rendor-image .product-gallery[product-image-count="11"] .product-gallery__media:nth-child(10 of .gallery-image), .rendor-image .product-gallery[product-image-count="11"] .product-gallery__media:nth-child(11 of .gallery-image), .rendor-image .product-gallery[product-image-count="12"] .product-gallery__media:nth-child(1 of .gallery-image), .rendor-image .product-gallery[product-image-count="12"] .product-gallery__media:nth-child(4 of .gallery-image), .rendor-image .product-gallery[product-image-count="12"] .product-gallery__media:nth-child(7 of .gallery-image), .rendor-image .product-gallery[product-image-count="12"] .product-gallery__media:nth-child(10 of .gallery-image), .rendor-image .product-gallery[product-image-count="13"] .product-gallery__media:nth-child(1 of .gallery-image), .rendor-image .product-gallery[product-image-count="13"] .product-gallery__media:nth-child(4 of .gallery-image), .rendor-image .product-gallery[product-image-count="13"] .product-gallery__media:nth-child(7 of .gallery-image), .rendor-image .product-gallery[product-image-count="13"] .product-gallery__media:nth-child(10 of .gallery-image), .rendor-image .product-gallery[product-image-count="13"] .product-gallery__media:nth-child(13 of .gallery-image), .rendor-image .product-gallery[product-image-count="14"] .product-gallery__media:nth-child(1 of .gallery-image), .rendor-image .product-gallery[product-image-count="14"] .product-gallery__media:nth-child(4 of .gallery-image), .rendor-image .product-gallery[product-image-count="14"] .product-gallery__media:nth-child(7 of .gallery-image), .rendor-image .product-gallery[product-image-count="14"] .product-gallery__media:nth-child(10 of .gallery-image), .rendor-image .product-gallery[product-image-count="14"] .product-gallery__media:nth-child(13 of .gallery-image), .rendor-image .product-gallery[product-image-count="14"] .product-gallery__media:nth-child(14 of .gallery-image), .rendor-image .product-gallery[product-image-count="15"] .product-gallery__media:nth-child(1 of .gallery-image), .rendor-image .product-gallery[product-image-count="15"] .product-gallery__media:nth-child(4 of .gallery-image), .rendor-image .product-gallery[product-image-count="15"] .product-gallery__media:nth-child(7 of .gallery-image), .rendor-image .product-gallery[product-image-count="15"] .product-gallery__media:nth-child(10 of .gallery-image), .rendor-image .product-gallery[product-image-count="15"] .product-gallery__media:nth-child(13 of .gallery-image), .rendor-image .product-gallery[product-image-count="16"] .product-gallery__media:nth-child(1 of .gallery-image), .rendor-image .product-gallery[product-image-count="16"] .product-gallery__media:nth-child(4 of .gallery-image), .rendor-image .product-gallery[product-image-count="16"] .product-gallery__media:nth-child(7 of .gallery-image), .rendor-image .product-gallery[product-image-count="16"] .product-gallery__media:nth-child(10 of .gallery-image), .rendor-image .product-gallery[product-image-count="16"] .product-gallery__media:nth-child(13 of .gallery-image), .rendor-image .product-gallery[product-image-count="16"] .product-gallery__media:nth-child(16 of .gallery-image), .rendor-image .product-gallery[product-image-count="17"] .product-gallery__media:nth-child(1 of .gallery-image), .rendor-image .product-gallery[product-image-count="17"] .product-gallery__media:nth-child(4 of .gallery-image), .rendor-image .product-gallery[product-image-count="17"] .product-gallery__media:nth-child(7 of .gallery-image), .rendor-image .product-gallery[product-image-count="17"] .product-gallery__media:nth-child(10 of .gallery-image), .rendor-image .product-gallery[product-image-count="17"] .product-gallery__media:nth-child(13 of .gallery-image), .rendor-image .product-gallery[product-image-count="17"] .product-gallery__media:nth-child(16 of .gallery-image), .rendor-image .product-gallery[product-image-count="17"] .product-gallery__media:nth-child(17 of .gallery-image), .rendor-image .product-gallery[product-image-count="18"] .product-gallery__media:nth-child(1 of .gallery-image), .rendor-image .product-gallery[product-image-count="18"] .product-gallery__media:nth-child(4 of .gallery-image), .rendor-image .product-gallery[product-image-count="18"] .product-gallery__media:nth-child(7 of .gallery-image), .rendor-image .product-gallery[product-image-count="18"] .product-gallery__media:nth-child(10 of .gallery-image), .rendor-image .product-gallery[product-image-count="18"] .product-gallery__media:nth-child(13 of .gallery-image), .rendor-image .product-gallery[product-image-count="18"] .product-gallery__media:nth-child(16 of .gallery-image), .rendor-image .product-gallery[product-image-count="19"] .product-gallery__media:nth-child(1 of .gallery-image), .rendor-image .product-gallery[product-image-count="19"] .product-gallery__media:nth-child(4 of .gallery-image), .rendor-image .product-gallery[product-image-count="19"] .product-gallery__media:nth-child(7 of .gallery-image), .rendor-image .product-gallery[product-image-count="19"] .product-gallery__media:nth-child(10 of .gallery-image), .rendor-image .product-gallery[product-image-count="19"] .product-gallery__media:nth-child(13 of .gallery-image), .rendor-image .product-gallery[product-image-count="19"] .product-gallery__media:nth-child(16 of .gallery-image), .rendor-image .product-gallery[product-image-count="19"] .product-gallery__media:nth-child(19 of .gallery-image), .rendor-image .product-gallery[product-image-count="20"] .product-gallery__media:nth-child(1 of .gallery-image), .rendor-image .product-gallery[product-image-count="20"] .product-gallery__media:nth-child(4 of .gallery-image), .rendor-image .product-gallery[product-image-count="20"] .product-gallery__media:nth-child(7 of .gallery-image), .rendor-image .product-gallery[product-image-count="20"] .product-gallery__media:nth-child(10 of .gallery-image), .rendor-image .product-gallery[product-image-count="20"] .product-gallery__media:nth-child(13 of .gallery-image), .rendor-image .product-gallery[product-image-count="20"] .product-gallery__media:nth-child(16 of .gallery-image), .rendor-image .product-gallery[product-image-count="20"] .product-gallery__media:nth-child(19 of .gallery-image), .rendor-image .product-gallery[product-image-count="20"] .product-gallery__media:nth-child(20 of .gallery-image), .rendor-image .product-gallery[product-image-count="21"] .product-gallery__media:nth-child(1 of .gallery-image), .rendor-image .product-gallery[product-image-count="21"] .product-gallery__media:nth-child(4 of .gallery-image), .rendor-image .product-gallery[product-image-count="21"] .product-gallery__media:nth-child(7 of .gallery-image), .rendor-image .product-gallery[product-image-count="21"] .product-gallery__media:nth-child(10 of .gallery-image), .rendor-image .product-gallery[product-image-count="21"] .product-gallery__media:nth-child(13 of .gallery-image), .rendor-image .product-gallery[product-image-count="21"] .product-gallery__media:nth-child(16 of .gallery-image), .rendor-image .product-gallery[product-image-count="21"] .product-gallery__media:nth-child(19 of .gallery-image), .rendor-image .product-gallery[product-image-count="22"] .product-gallery__media:nth-child(1 of .gallery-image), .rendor-image .product-gallery[product-image-count="22"] .product-gallery__media:nth-child(4 of .gallery-image), .rendor-image .product-gallery[product-image-count="22"] .product-gallery__media:nth-child(7 of .gallery-image), .rendor-image .product-gallery[product-image-count="22"] .product-gallery__media:nth-child(10 of .gallery-image), .rendor-image .product-gallery[product-image-count="22"] .product-gallery__media:nth-child(13 of .gallery-image), .rendor-image .product-gallery[product-image-count="22"] .product-gallery__media:nth-child(16 of .gallery-image), .rendor-image .product-gallery[product-image-count="22"] .product-gallery__media:nth-child(19 of .gallery-image), .rendor-image .product-gallery[product-image-count="22"] .product-gallery__media:nth-child(22 of .gallery-image), .rendor-image .product-gallery[product-image-count="23"] .product-gallery__media:nth-child(1 of .gallery-image), .rendor-image .product-gallery[product-image-count="23"] .product-gallery__media:nth-child(4 of .gallery-image), .rendor-image .product-gallery[product-image-count="23"] .product-gallery__media:nth-child(7 of .gallery-image), .rendor-image .product-gallery[product-image-count="23"] .product-gallery__media:nth-child(10 of .gallery-image), .rendor-image .product-gallery[product-image-count="23"] .product-gallery__media:nth-child(13 of .gallery-image), .rendor-image .product-gallery[product-image-count="23"] .product-gallery__media:nth-child(16 of .gallery-image), .rendor-image .product-gallery[product-image-count="23"] .product-gallery__media:nth-child(19 of .gallery-image), .rendor-image .product-gallery[product-image-count="23"] .product-gallery__media:nth-child(21 of .gallery-image), .rendor-image .product-gallery[product-image-count="24"] .product-gallery__media:nth-child(1 of .gallery-image), .rendor-image .product-gallery[product-image-count="24"] .product-gallery__media:nth-child(4 of .gallery-image), .rendor-image .product-gallery[product-image-count="24"] .product-gallery__media:nth-child(7 of .gallery-image), .rendor-image .product-gallery[product-image-count="24"] .product-gallery__media:nth-child(10 of .gallery-image), .rendor-image .product-gallery[product-image-count="24"] .product-gallery__media:nth-child(13 of .gallery-image), .rendor-image .product-gallery[product-image-count="24"] .product-gallery__media:nth-child(16 of .gallery-image), .rendor-image .product-gallery[product-image-count="24"] .product-gallery__media:nth-child(19 of .gallery-image), .rendor-image .product-gallery[product-image-count="24"] .product-gallery__media:nth-child(22 of .gallery-image) { width: calc(100% - 30px)!important; max-width: 100%!important; aspect-ratio: 16/9; } .product-gallery__media.snap-center.first-image.variant-image { display: block !important; } .product-gallery__media.variant-image { display: none; } product-rerender .product {display: flex;} product-rerender .product .rendor-image {width: 65%} product-rerender .product .product-info {width: 35%} product-rerender .product .product-info .product-info--variant-changes-details {margin-bottom: 0} } @media screen and (max-width: 767px) { .product-gallery__image-list .product-gallery__carousel .product-gallery__media { height: 300px; min-height: 300px; max-height: 300px; overflow: hidden; } .product-gallery__image-list .product-gallery__carousel .product-gallery__media img { height: 100%; overflow: hidden; object-fit: cover; } } @media (max-width: 500px) { .header__secondary-nav { gap: 0.625rem 5px; } } /* * ---- V9B: keep hamburger/logo/search/cart on one row at 320-355px (Part 4) ---- * .header lays out primary-nav/logo/secondary-nav as a grid with symmetric * minmax(0,1fr) side columns (kept equal so the logo stays optically centered). At * 320px each side column only gets 45px, but search+cart together need 61px * (28+28+5), so they wrap onto a second row and header height jumps from ~63px to * ~98px. Trimming column-gap and side padding (not the shared --container-gutter, * so nothing else on the page is affected) frees enough room for both columns to * reach ~65px without touching icon size, logo width, or the symmetric layout. * 360px and up already have enough natural room and are unaffected. */ @media (max-width: 355px) { .header { column-gap: 8px; padding-inline-start: 12px; padding-inline-end: 12px; } } /* * ---- V10B: close the 999px navigation-breakpoint collision ---- * theme.css's @media (max-width:999px) rule for .md-max\:hidden silently fails * to match at exactly 999px (sub-pixel/scrollbar rounding puts the browser's * evaluated width a hair outside the boundary), so every .md-max\:hidden element * inside the header stays visible instead of hidden: the desktop primary-nav ul * (normally display:contents, unconditional in theme.css, wins the tie), the * dealer-login link, and the country/locale selector. That's what produces the * duplicate nav row, the oversized header, and the header-attributable overflow * at 999px. Restating display:none for these elements with a fractional upper * bound absorbs the rounding gap without touching .md-max\:hidden's behavior at * >=1000px, .contents' behavior anywhere else, or any element outside .header. */ @media (max-width: 999.98px) { .header .md-max\:hidden { display: none !important; } } /* Product page variant swatch hover */ .block_wrap_pdp_info, .swatch-items--wrapper {position: relative;} #variant-popup { position: absolute; top: 100%; /* below swatch */ left: 0; transform: translateX(calc(-1 * var(--swatch-offset, 0px))); width: 100%; /* expands relative to product-card */ opacity: 0; visibility: hidden; transition: all 0.25s ease; z-index: 10; pointer-events: none; background:#fff; font-size:13px; line-height:1.45; color:#111; border:1px solid #ddd; border-radius:10px; padding:10px 12px; box-shadow:0 8px 20px rgba(0,0,0,.18); } #closeSwatchBlock:hover {opacity: 1;} #variant-popup #vp-img { width:100%; height:150px; object-fit:cover; margin-bottom:8px; } #variant-popup #vp-title { font-size: 1.2rem; font-weight:700; margin-bottom:6px; } #variant-popup #vp-desc { margin-top:6px; } .swatch-items--wrapper:hover #variant-popup { opacity: 1; visibility: visible; pointer-events: auto; } span.show-hover-triangle { display: none; position: absolute; height: 0; width: 0; bottom: -10px; left: 50%; transform: translateX(-50%); border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #fff; } .swatch-items--wrapper:hover span.show-hover-triangle { display: block; z-index: 11; } .variant-picker__option-info legend {font-weight: 600} .product-info__block-item .variant-picker__option-values input:checked+.swatch-items--wrapper label.color-swatch {border: #33373c solid 2px !important;} @media screen and (max-width: 767px) { #variant-popup #vp-img { height: 100px; } } /* Product story styles */ .product-content-below-main .image-with-text video {width: 100%} @media screen and (min-width: 700px) { .product-content-below-main .image-with-text.image-with-text--reverse video {order: 999} } /* Lifestyle carousel (theme native scroll-carousel + arrows) */ .lifestyle-carousel-block { position: relative; } .lifestyle-carousel-items { margin: 0; padding: 0; list-style: none; } /* Horizontal carousel layout: flex row + scroll (scroll-area has overflow: auto hidden) */ .lifestyle-carousel-container .lifestyle-carousel-items.lifestyle-carousel-items--native { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 32px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; width: 100%; max-width: 100%; min-width: 0; } .lifestyle-carousel-items.lifestyle-carousel-items--native .lifestyle-carousel-item { flex: 0 0 auto; width: 100%; min-width: 100%; box-sizing: border-box; } @media screen and (min-width: 1400px) { .lifestyle-carousel-items.lifestyle-carousel-items--native .lifestyle-carousel-item { min-width: calc((100% - 32px) / 2); width: calc((100% - 32px) / 2); } } .lifestyle-carousel-items .lifestyle-carousel-item img { aspect-ratio: 930/524; object-fit: cover; width: 100%; height: auto; } .lifestyle-carousel-items .lifestyle-carousel-item-wrapper { position: relative; } .lifestyle-carousel-items .lifestyle_carousel-caption { position: absolute; width: 100%; height: 100%; top: 0; left: 0; display: flex; justify-content: center; align-items: center; background: rgba(0, 0, 0, 0.4); color: white; font-weight: 600; font-size: 16px; text-align: center; padding: 1rem; } /* Bowsers difference */ h2.bowsers-difference-heading { font-size: 3rem; padding-bottom: 3rem; } .bowsers-difference-container { display: flex; gap: 1.25rem; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; margin: 0; padding: 0; list-style: none } .bowsers-difference-container .bowsers-difference-item { width: 33.33%; max-width: 33.33%; padding: 2.5rem 1.25rem; } .bowsers-difference-container .bowsers-difference-item img { width: 5.5rem; height: auto; aspect-ratio: 1 / 1; margin-bottom: 1.5rem; } .bowsers-difference-container .bowsers-difference-item h3 { font-size: 2.5rem; line-height: 3rem; padding-bottom: .5rem; } .bowsers-difference-container .bowsers-difference-item p { font-size: 1.375rem; } @media screen and (max-width: 767px) { .bowsers-difference-container::-webkit-scrollbar { display: none; } .bowsers-difference-container .bowsers-difference-item { width: 100%; max-width: 100%; min-width: 75%; padding: 2rem 1.25rem; } h2.bowsers-difference-heading {font-size: 2rem} .bowsers-difference-container .bowsers-difference-item img {width: 5rem;} .bowsers-difference-container .bowsers-difference-item h3 { font-size: 2rem; padding-bottom: 1.5rem; line-height: 1.2; } .bowsers-difference-container .bowsers-difference-item p {font-size: 1.125rem;} } /* Recommended for you */ .shopify-section--related-products .section-header h2 { font-size: 40px; padding-bottom: 20px; } .shopify-section--related-products .floating-controls-container .product-list { justify-content: flex-start!important; } /* Universal padding for Rich Text sections when “Remove vertical spacing” is ON */ .shopify-section--rich-text .color-scheme:not(.section-spacing) { padding-top: 32px !important; padding-bottom: 24px !important; } /* Optional: tighter spacing between headline and subline inside Rich Text */ .shopify-section--rich-text .prose .h1 { margin-bottom: 8px; } /* Mobile adjustment */ @media (max-width: 749px){ .shopify-section--rich-text .color-scheme:not(.section-spacing) { padding-top: 20px !important; padding-bottom: 16px !important; } /* Bowsers difference: mobile headline height reserve (2 lines) Added: 2025-12-18 (Connor) */ .bowsers-difference-container .bowsers-difference-item > h3 { min-height: calc(2rem * 1.2 * 2); /* font-size 2rem, line-height 1.2, 2 lines */ } } /* =========================== Bowsers difference: align body copy across pillar cards Fix: reserve 2-line headline space + eliminate rich text margin collapse Added: 2025-12-18 (Connor) =========================== */ /* Reserve consistent headline block height */ .bowsers-difference-container .bowsers-difference-item > h3 { margin: 0; /* remove default H3 margins that vary by browser */ min-height: 6rem; /* desktop: 2 lines x your desktop line-height (3rem) */ padding-bottom: .5rem; /* keep your existing spacing intention */ } /* Prevent paragraph margin collapse and normalize spacing */ .bowsers-difference-container .bowsers-difference-item .metafield-rich_text_field { display: flow-root; /* stops margin-collapsing with child

*/ } .bowsers-difference-container .bowsers-difference-item .metafield-rich_text_field > p { margin: 0; /* remove default p margins so spacing is consistent */ } /* Optional: hide the empty first paragraph Shopify outputs */ .bowsers-difference-container .bowsers-difference-item .metafield-rich_text_field > p:empty { display: none; } /* =========================== Bowsers difference: vertically center 1-line headlines within the 2-line reserve Note: makes single-line headings sit nicer next to 2-line headings Added: 2025-12-18 (Connor) =========================== */ .bowsers-difference-container .bowsers-difference-item > h3 { display: flex; align-items: center; /* vertical centering inside the reserved min-height */ } /* =========================== Bowsers Custom: Mega Menu Chevrons =========================== */ .mega-menu__header-link { position: relative; display: inline-block !important; padding-right: 18px; white-space: nowrap; text-decoration: none; } .mega-menu__header-link::after { content: ""; position: absolute; top: 50%; right: 0; width: 12px; height: 12px; transform: translate(0,-50%); background: currentColor; transition: transform 0.18s ease, background-color 0.18s ease; -webkit-mask: url('data:image/svg+xml;utf8,') center / contain no-repeat; mask: url('data:image/svg+xml;utf8,') center / contain no-repeat; } .mm-hover > .mega-menu__header-link::after, .mega-menu__header-link.mm-hover::after { transform: translate(3px,-50%); background: #BCA89E; } @media (max-width: 999px) { .mega-menu__header-link { padding-right: 0; } .mega-menu__header-link::after { display: none !important; } } /* =========================== Bowsers Custom CSS Mega Menu Typography =========================== */ /* 1) Headers: Poppins Bold, 15–16px, slight letter spacing */ .mega-menu li > a.mega-menu__header-link { font-family: 'BowsersPoppins', sans-serif; font-weight: 700; font-size: 16px; /* switch to 15px if you prefer tighter */ letter-spacing: 0.4px; line-height: 1.25; color: #343739; /* Charcoal */ text-transform: none; } /* If the theme’s h6 class is fighting you, keep these two lines */ .mega-menu li > a.mega-menu__header-link.h6 { font-size: 16px !important; font-weight: 700 !important; } /* 2) Subcategories: Inter Regular or Medium, 14px, muted color */ .mega-menu .mega-menu__linklist.unstyled-list a:not(.mega-menu__header-link), .mega-menu .v-stack.gap-2\.5.unstyled-list a:not(.mega-menu__header-link), .mega-menu .v-stack.gap-2\.5.unstyled-list .link-faded { font-family: 'Inter', sans-serif; font-weight: 500; /* change to 500 if you want a touch more presence */ font-size: 14px; line-height: 1.35; color: #6F6F6F; /* muted grey */ text-decoration: none; } .mega-menu .mega-menu__linklist.unstyled-list a:not(.mega-menu__header-link):hover, .mega-menu .v-stack.gap-2\.5.unstyled-list a:not(.mega-menu__header-link):hover, .mega-menu .v-stack.gap-2\.5.unstyled-list .link-faded:hover { color: #343739; } /* 3) All Products header row: same style as other headers + chevron */ .mega-menu__all-products-top { margin: 0 0 6px 0; padding: 0; } .mega-menu__all-products-top .mega-menu__header-link { font-family: 'BowsersPoppins', sans-serif; font-weight: 700; font-size: 16px; letter-spacing: 0.4px; line-height: 1.25; color: #343739; text-transform: none; position: relative; } .mega-menu__all-products-top .mega-menu__header-link::after { content: '›'; margin-left: 6px; font-size: 14px; vertical-align: middle; } /* Hide "… View All" subcategories on desktop, show on mobile */ @media (min-width: 1000px) { .mega-menu [data-view-all-sub="true"] { display: none !important; } } /* =========================== Bowsers Mega Menu promo background Connor added for promo column styling =========================== */ .mega-menu__promo.promo-bg { background-color: #F5F3F0; /* Classic Linen */ /* If you prefer Pale Stone use #EDEBE8 */ height: 100%; } .promo-bg__inner { padding: 20px; /* breathing room around the image/text */ height: 100%; display: flex; align-items: center; /* center vertically */ justify-content: center; /* center horizontally */ } /* Ensure both columns stretch to equal height */ .mega-menu { align-items: stretch; } /* Keep images neat inside the promo column */ .mega-menu__promo.promo-bg .media, .mega-menu__promo.promo-bg picture, .mega-menu__promo.promo-bg img { max-width: 100%; height: auto; display: block; } /* Desktop only spacing tune-up if needed */ @media (min-width: 1000px) { .mega-menu__promo.promo-bg .promo-bg__inner { padding: 28px; } } /* Connor edit: visually underline promo subheader text */ .mega-menu__promo .smallcaps.text-xs.text-subdued { text-decoration: underline; cursor: pointer; } .mega-menu__promo .smallcaps.text-xs.text-subdued:hover { opacity: 0.85; } /* =========================== Bowsers Editorial Mega Menu — Shop grid + About split V5A visual refinement pass =========================== */ .mega-menu-shop, .mega-menu-about { display: grid; gap: var(--mega-menu-gap, 2.5rem); align-items: stretch; width: 100%; } .mega-menu-shop { grid-template-columns: 65fr 35fr; /* * Row-gap decoupled from --mega-menu-gap (which still drives the column-gap between the category grid and * the fabric card, unchanged) so the browse-row-to-grid transition has its own fixed rhythm instead of * inheriting the wider gap meant for the grid/card split. */ row-gap: 3.125rem; } .mega-menu-shop--full { grid-template-columns: 1fr; } .mega-menu-about { grid-template-columns: 45fr 55fr; } .mega-menu-about--full { grid-template-columns: 1fr; } /* ---- Shop category grid ---- */ .mega-menu-shop__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, auto); column-gap: 2.5rem; row-gap: 1.5rem; } .mega-menu-shop__cell { display: flex; flex-direction: column; gap: 0.75rem; padding: 0; } .mega-menu-shop__heading-row { display: flex; align-items: center; gap: 0.625rem; text-decoration: none; color: rgb(var(--text-color)); } .mega-menu-shop__icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 36px; width: 36px; color: rgb(var(--text-color)); opacity: 0.82; transition: opacity 200ms ease; } .mega-menu-shop__icon svg { display: block; } .mega-menu-shop__heading-group { display: inline-flex; align-items: center; gap: 9px; min-width: 0; } .mega-menu-shop__heading-text { opacity: 0.9; transition: opacity 200ms ease; } .mega-menu-shop__chevron { display: inline-flex; flex: 0 0 auto; opacity: 0.5; transition: transform 200ms ease, opacity 200ms ease; } .mega-menu-shop__heading-row:hover .mega-menu-shop__icon, .mega-menu-shop__heading-row:focus-visible .mega-menu-shop__icon { opacity: 1; } .mega-menu-shop__heading-row:hover .mega-menu-shop__heading-text, .mega-menu-shop__heading-row:focus-visible .mega-menu-shop__heading-text { opacity: 1; } .mega-menu-shop__heading-row:hover .mega-menu-shop__chevron, .mega-menu-shop__heading-row:focus-visible .mega-menu-shop__chevron { transform: translateX(4px); opacity: 0.85; } .mega-menu-shop__heading-row:focus-visible { outline: 2px solid rgb(var(--text-color)); outline-offset: 3px; border-radius: 2px; } .mega-menu-shop__links { flex: 1 1 auto; } .mega-menu-shop__link { text-decoration: none; transition: color 200ms ease; } .mega-menu-shop__link:hover, .mega-menu-shop__link:focus-visible { text-decoration: underline; } .mega-menu-shop__link:focus-visible { outline: 2px solid rgb(var(--text-color)); outline-offset: 2px; border-radius: 2px; } /* ---- Shop browse row: flat children with no sub-links, above the category grid ---- */ .mega-menu-shop__browse { grid-column: 1 / -1; } .mega-menu-shop__browse-row { display: flex; flex-wrap: wrap; align-items: center; gap: 2.5rem; /* Matches the .mega-menu padding-block-start above the row, so the row reads as an even band. */ padding-bottom: 2.5rem; } .mega-menu-shop__browse-link { flex: 0 0 auto; } .mega-menu-shop__divider { height: 1px; background-color: rgb(var(--border-color)); /* Spacing below the divider now comes solely from .mega-menu-shop's row-gap; no separate margin here. */ margin-bottom: 0; } /* ---- About heritage card: full-image editorial card (V6B) ---- */ /* * Mirrors the Shop fabric card's structural pattern (image + layered overlay + overlaid copy inside one * clickable element) but is defined independently under its own class names, so the two cards can be tuned * separately without coupling Shop and About together. */ .mega-menu-about__panel { position: relative; } .mega-menu-about__card { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 6px; background-color: #ece6dc; color: #ffffff; text-decoration: none; transform: translateY(0); transition: transform 250ms ease; } .mega-menu-about__card-image { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; object-position: var(--card-object-position, 50% 50%); transform: scale(1); transition: transform 250ms ease; } .mega-menu-about__card-overlay { position: absolute; inset: 0; background: linear-gradient( to top right, rgba(18, 13, 8, 0.82) 0%, rgba(18, 13, 8, 0.55) 22%, rgba(18, 13, 8, 0.18) 45%, rgba(18, 13, 8, 0) 65% ); } .mega-menu-about__card-content { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 40px 36px 36px; max-width: 380px; } .mega-menu-about__card-heading { margin: 0; color: #ffffff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55); } .mega-menu-about__card-body { margin: 0.5rem 0 0; color: rgba(255, 255, 255, 0.9); max-width: 32ch; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55); } .mega-menu-about__card-cta { display: inline-flex; align-items: center; gap: 0.375rem; margin-top: 0.625rem; width: fit-content; font-weight: 600; color: #ffffff; } .mega-menu-about__card-cta-chevron { display: inline-flex; opacity: 0.75; transition: transform 200ms ease, opacity 200ms ease; } .mega-menu-about__card:hover, .mega-menu-about__card:focus-visible { transform: translateY(-2px); } .mega-menu-about__card:hover .mega-menu-about__card-image, .mega-menu-about__card:focus-visible .mega-menu-about__card-image { transform: scale(1.015); } .mega-menu-about__card:hover .mega-menu-about__card-cta-chevron, .mega-menu-about__card:focus-visible .mega-menu-about__card-cta-chevron { transform: translateX(4px); opacity: 1; } .mega-menu-about__card:focus-visible { outline: 2px solid #ffffff; outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .mega-menu-about__card, .mega-menu-about__card-image, .mega-menu-about__card-cta-chevron { transition: none; } .mega-menu-about__card:hover, .mega-menu-about__card:focus-visible { transform: none; } .mega-menu-about__card:hover .mega-menu-about__card-image, .mega-menu-about__card:focus-visible .mega-menu-about__card-image { transform: none; } .mega-menu-about__card:hover .mega-menu-about__card-cta-chevron, .mega-menu-about__card:focus-visible .mega-menu-about__card-cta-chevron { transform: none; } } /* ---- About brand navigation: two labeled groups of descriptive rows (V6B) ---- */ .mega-menu-about__nav { display: flex; flex-direction: column; justify-content: center; gap: 2.5rem; height: 100%; } .mega-menu-about__group-label { margin: 0 0 0.875rem; font-family: var(--heading-font-family); font-weight: var(--heading-font-weight); font-size: 0.75rem; letter-spacing: var(--heading-letter-spacing); text-transform: uppercase; color: rgb(var(--text-color)); opacity: 0.7; } .mega-menu-about__group-list { display: flex; flex-direction: column; } .mega-menu-about__row + .mega-menu-about__row { border-top: 1px solid rgba(var(--text-color), 0.08); } .mega-menu-about__row-link { display: block; padding: 0.875rem 0.5rem; text-decoration: none; color: rgb(var(--text-color)); } .mega-menu-about__row-head { display: flex; align-items: center; gap: 0.5rem; } .mega-menu-about__row-title { opacity: 0.92; transition: opacity 200ms ease; } .mega-menu-about__row-chevron { display: inline-flex; flex: 0 0 auto; opacity: 0.5; transition: transform 200ms ease, opacity 200ms ease; } .mega-menu-about__row-desc { display: block; margin-top: 0.25rem; max-width: 40ch; transition: color 200ms ease; } .mega-menu-about__row-link:hover .mega-menu-about__row-title, .mega-menu-about__row-link:focus-visible .mega-menu-about__row-title { opacity: 1; } .mega-menu-about__row-link:hover .mega-menu-about__row-desc, .mega-menu-about__row-link:focus-visible .mega-menu-about__row-desc { color: rgb(var(--text-color) / 0.85); } .mega-menu-about__row-link:hover .mega-menu-about__row-chevron, .mega-menu-about__row-link:focus-visible .mega-menu-about__row-chevron { transform: translateX(4px); opacity: 0.85; } .mega-menu-about__row-link:focus-visible { outline: 2px solid rgb(var(--text-color)); outline-offset: -2px; } @media (prefers-reduced-motion: reduce) { .mega-menu-about__row-chevron { transition: none; } .mega-menu-about__row-link:hover .mega-menu-about__row-chevron, .mega-menu-about__row-link:focus-visible .mega-menu-about__row-chevron { transform: none; } } /* * ---- About brand navigation: two coordinated group columns at wide desktop (V6E) ---- * Below 1280px the two groups stay stacked (base rule above). At 1280px+ the nav becomes a single 3-row x * 2-column grid shared by BOTH groups, not two independently-sized columns: .mega-menu-about__group and * .mega-menu-about__group-list go display:contents so each group's label/row-1/row-2 become direct grid * children, and grid-auto-flow:column (with exactly 3 explicit rows) fills column 1 top-to-bottom with * "About Bowsers"'s [label, Our Story, Our Dogs], then column 2 with "The Bowsers Standard"'s [label, * Our Quality, Our Manufacturing] — landing each pair in the same grid row. CSS grid then sizes every row * track to its tallest cell and (via align-items:stretch) stretches both cells in that row to match, so a * shorter description in one column can no longer cause its row to start earlier than its counterpart's — * this was the structural cause of "Our Manufacturing begins lower than Our Dogs" at wide viewports, where * the two groups' descriptions wrap to a different number of lines. row-gap:0 avoids double-spacing on top * of the row-link's own padding (the base rule's "gap: 2.5rem" shorthand also sets row-gap, so it must be * reset explicitly rather than left to inherit). Padding is tuned so the About card lands ~20-30px taller * than the Shop card at this breakpoint, per the approved wide-desktop reference height. */ @media (min-width: 1280px) { .mega-menu-about__nav { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto; grid-auto-flow: column; column-gap: 2.5rem; row-gap: 0; align-items: stretch; height: auto; padding: 73px 0; } .mega-menu-about__group, .mega-menu-about__group-list { display: contents; } } /* ---- Shop editorial panel: full-image fabric card (V5D) ---- */ /* * One unified card: the fabric photo, a layered warm-neutral overlay, and the text all live inside a * single (mega-menu-shop__fabric-card). Perspective lives on the stable panel wrapper, not the card * itself, per the standard CSS 3D-transform pattern — a transformed element can't also host the * perspective it's viewed through. */ .mega-menu-shop__panel { position: relative; /* * Nudges the panel's top edge down to align with the cap height of the row's category headings (e.g. * "Sleep") rather than their taller line box; align-items:stretch keeps the bottom flush with the grid. */ margin-top: 3px; } .mega-menu-shop__fabric-card { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 6px; background-color: #ece6dc; color: #ffffff; text-decoration: none; transform: translateY(0); transition: transform 250ms ease; } .mega-menu-shop__fabric-card-image { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; object-position: var(--fabric-card-object-position, 50% 50%); transform: scale(1); transition: transform 250ms ease; } /* * Layered warm-neutral wash: a light unifying tint over the whole photo, deepening toward the bottom * so the heading/body/CTA always sit on a dark-enough ground, without ever reading as a flat opaque box. */ .mega-menu-shop__fabric-card-overlay { position: absolute; inset: 0; background: linear-gradient( to top right, rgba(18, 13, 8, 0.82) 0%, rgba(18, 13, 8, 0.55) 22%, rgba(18, 13, 8, 0.18) 45%, rgba(18, 13, 8, 0) 65% ); transition: background-color 250ms ease; } .mega-menu-shop__fabric-card-content { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 40px 32px 36px; max-width: 280px; } .mega-menu-shop__fabric-card-heading { margin: 0; color: #ffffff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55); } .mega-menu-shop__fabric-card-body { margin: 0.375rem 0 0; color: rgba(255, 255, 255, 0.88); max-width: 30ch; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55); } .mega-menu-shop__fabric-card-cta { display: inline-flex; align-items: center; gap: 0.375rem; margin-top: 0.625rem; width: fit-content; font-weight: 600; color: #ffffff; } .mega-menu-shop__fabric-card-cta-chevron { display: inline-flex; opacity: 0.75; transition: transform 200ms ease, opacity 200ms ease; } .mega-menu-shop__fabric-card:hover, .mega-menu-shop__fabric-card:focus-visible { transform: translateY(-2px); } .mega-menu-shop__fabric-card:hover .mega-menu-shop__fabric-card-image, .mega-menu-shop__fabric-card:focus-visible .mega-menu-shop__fabric-card-image { transform: scale(1.015); } .mega-menu-shop__fabric-card:hover .mega-menu-shop__fabric-card-cta-chevron, .mega-menu-shop__fabric-card:focus-visible .mega-menu-shop__fabric-card-cta-chevron { transform: translateX(4px); opacity: 1; } .mega-menu-shop__fabric-card:focus-visible { outline: 2px solid #ffffff; outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .mega-menu-shop__fabric-card, .mega-menu-shop__fabric-card-image, .mega-menu-shop__fabric-card-cta-chevron { transition: none; } .mega-menu-shop__fabric-card:hover, .mega-menu-shop__fabric-card:focus-visible { transform: none; } .mega-menu-shop__fabric-card:hover .mega-menu-shop__fabric-card-image, .mega-menu-shop__fabric-card:focus-visible .mega-menu-shop__fabric-card-image { transform: none; } .mega-menu-shop__fabric-card:hover .mega-menu-shop__fabric-card-cta-chevron, .mega-menu-shop__fabric-card:focus-visible .mega-menu-shop__fabric-card-cta-chevron { transform: none; } } /* ---- Mobile / tablet drawer: compact horizontal editorial card ---- */ .mega-menu-images__card { display: flex; align-items: stretch; text-decoration: none; color: rgb(var(--text-color)); background-color: #F5F3F0; overflow: hidden; border-radius: 6px; min-height: 135px; max-height: 165px; margin-block: 0.75rem; } .mega-menu-images__card-media { flex: 0 0 40%; position: relative; overflow: hidden; } .mega-menu-images__card-image { width: 100%; height: 100%; display: block; object-fit: cover; } .mega-menu-images__card-content { flex: 1 1 60%; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 0.25rem; padding: 0.875rem 1rem; text-align: left; } .mega-menu-images__card-heading { margin: 0; } .mega-menu-images__card-body { margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* * ---- V9B: fix horizontal-card overflow/alignment at 600-999px (Part 1) ---- * The card previously carried its own margin-inline (1rem each side) on top of a flex * min-width:100% inherited from .header-sidebar__promo > *:only-child, so it was pushed * ~16px further right than the scroller's own 20px padding — crowding the right edge * (measured: 36px left inset vs 4px right inset). margin-block above already removed the * horizontal margin so the card now fills its container flush, matching the accordion * rows' inset exactly. This block tunes the image/text split and lets body copy wrap * instead of being clamped to 2 lines with an ellipsis-causing overflow:hidden. */ @media (min-width: 600px) and (max-width: 999px) { .mega-menu-images__card { max-height: none; } .mega-menu-images__card-media { flex-basis: 36%; } .mega-menu-images__card-content { flex-basis: 64%; } .mega-menu-images__card-body { display: block; -webkit-line-clamp: unset; overflow: visible; } } /* * ---- V9B: compact full-image card below 600px (Part 2) ---- * Below 600px the horizontal split leaves too little room for both image and readable * text, so the card switches to a full-bleed image with an overlaid gradient and white * heading/CTA at the bottom-left, matching the desktop Shop/About editorial-card pattern * without reusing their frozen classes. Markup is unchanged — image, heading, CTA label, * and destination all still come from the same block settings; only presentation differs. */ @media (max-width: 599px) { .mega-menu-images__card { display: block; position: relative; min-height: 160px; max-height: 180px; } .mega-menu-images__card-media { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; } .mega-menu-images__card::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; height: 70%; background: linear-gradient(180deg, rgba(22, 15, 10, 0) 0%, rgba(22, 15, 10, 0.72) 100%); z-index: 1; pointer-events: none; } .mega-menu-images__card-content { position: absolute; inset-inline: 0; inset-block-end: 0; z-index: 2; padding: 20px 22px; justify-content: flex-end; } .mega-menu-images__card-heading { color: #ffffff; } .mega-menu-images__card-body { display: none; } .mega-menu-images__card-cta { color: #ffffff; } } .mega-menu-images__card-cta { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; margin-top: 0.125rem; width: fit-content; text-decoration: none; } .mega-menu-images__card-cta-chevron { display: inline-flex; transition: transform 200ms ease; } .mega-menu-images__card:hover .mega-menu-images__card-cta, .mega-menu-images__card:focus-visible .mega-menu-images__card-cta { text-decoration: underline; } .mega-menu-images__card:hover .mega-menu-images__card-cta-chevron, .mega-menu-images__card:focus-visible .mega-menu-images__card-cta-chevron { transform: translateX(4px); } .mega-menu-images__card:focus-visible { outline: 2px solid rgb(var(--text-color)); outline-offset: 2px; } /* ---- Reduced motion: keep the state changes, drop the movement ---- */ @media (prefers-reduced-motion: reduce) { .mega-menu-shop__heading-row, .mega-menu-shop__icon, .mega-menu-shop__chevron, .mega-menu-images__card-cta-chevron { transition: none; } .mega-menu-shop__heading-row:hover .mega-menu-shop__chevron, .mega-menu-shop__heading-row:focus-visible .mega-menu-shop__chevron, .mega-menu-images__card:hover .mega-menu-images__card-cta-chevron, .mega-menu-images__card:focus-visible .mega-menu-images__card-cta-chevron { transform: none; } } /* ---- Responsive safety across desktop breakpoints ---- */ /* * Below 1100px the fabric card's column shrinks to ~310px: the heading wraps to three lines, the CTA wraps * to two, and object-fit: cover crops the image so tightly the subject is obscured. Stacking the card below * the grid isn't viable either — the panel already nearly fills a 768px-tall viewport at this width. Hiding * the card and letting the category grid take the full panel width is the least-bad option; the card is * fully unchanged at 1100px and above. */ @media (max-width: 1099px) { .mega-menu-shop__panel { display: none; } .mega-menu-shop__grid { grid-column: 1 / -1; } } @media (min-width: 1000px) and (max-width: 1149px) { .mega-menu-shop__grid { column-gap: 1.25rem; row-gap: 1.5rem; } .mega-menu-shop__heading-row { gap: 0.5rem; } .mega-menu-shop__heading-group { gap: 8px; } .mega-menu-shop__icon { flex-basis: 34px; width: 34px; } .mega-menu-shop__icon svg { width: 34px !important; height: 34px !important; } .mega-menu-shop__heading-text { font-size: 1.0625rem; line-height: 1.25; } /* Panel is only ~265px wide at this breakpoint; tighten the fabric card's text inset to match. */ .mega-menu-shop__fabric-card-content { padding: 0 20px 20px 22px; max-width: 200px; } .mega-menu-shop__browse-row { gap: 1.5rem; } } @media (min-width: 1150px) and (max-width: 1279px) { .mega-menu-shop__grid { column-gap: 2rem; } .mega-menu-shop__heading-group { gap: 8px; } .mega-menu-shop__browse-row { gap: 2rem; } } @media (min-width: 1280px) { .mega-menu-shop__heading-text { white-space: nowrap; } .mega-menu-shop__fabric-card-heading { white-space: nowrap; } /* * V7B: the shared .mega-menu base rule (theme.css) widens --mega-menu-gap to 6.25rem (100px) at its own * min-width:1400px breakpoint, which — combined with the 65:35 split leaving the category grid with most * of the growth room — made the gap between the category grid and the fabric card read as an unintentional * void once the category icons were removed. Overriding --mega-menu-gap here (scoped to .mega-menu-shop * only, so About/Support's gap is untouched) replaces that jump with a fixed, moderate gap, and widening * the card's share of the fr-space narrows that void further without touching the category grid itself. */ .mega-menu-shop { grid-template-columns: 3fr 2fr; --mega-menu-gap: 64px; } } /* =========================== Bowsers Editorial Mega Menu — Support service columns (V8A) Compact, service-oriented desktop mega menu: two directory columns (Help & Policies, Customer Services) plus a neutral Customer Care panel. Deliberately does not reuse .mega-menu-shop*/.mega-menu-about* selectors so Shop/About remain fully independent. =========================== */ .mega-menu-support { display: grid; grid-template-columns: 60fr 40fr; gap: var(--mega-menu-gap, 2.5rem); align-items: stretch; width: 100%; } /* ---- Support directory: two labeled columns of descriptive rows ---- */ .mega-menu-support__directory { display: grid; grid-template-columns: 55fr 45fr; column-gap: 2rem; } .mega-menu-support__group-label { margin: 0 0 0.625rem; font-family: var(--heading-font-family); font-weight: var(--heading-font-weight); font-size: 0.75rem; letter-spacing: var(--heading-letter-spacing); text-transform: uppercase; color: rgb(var(--text-color)); opacity: 0.7; } .mega-menu-support__group-list { display: flex; flex-direction: column; } .mega-menu-support__row + .mega-menu-support__row { border-top: 1px solid rgba(var(--text-color), 0.08); } .mega-menu-support__row-link { display: block; padding: 0.4375rem 0.375rem; text-decoration: none; color: rgb(var(--text-color)); } .mega-menu-support__row-head { display: flex; align-items: center; gap: 0.5rem; } .mega-menu-support__row-title { font-family: var(--heading-font-family); font-weight: var(--heading-font-weight); font-size: 0.9375rem; line-height: 1.3; opacity: 0.88; transition: opacity 200ms ease; } .mega-menu-support__row-chevron { display: inline-flex; flex: 0 0 auto; opacity: 0.5; transition: transform 200ms ease, opacity 200ms ease; } .mega-menu-support__row-desc { display: block; margin-top: 0.1875rem; font-size: 0.8125rem; line-height: 1.4; max-width: 34ch; transition: color 200ms ease; } .mega-menu-support__row-link:hover .mega-menu-support__row-title, .mega-menu-support__row-link:focus-visible .mega-menu-support__row-title { opacity: 1; } .mega-menu-support__row-link:hover .mega-menu-support__row-desc, .mega-menu-support__row-link:focus-visible .mega-menu-support__row-desc { color: rgb(var(--text-color) / 0.85); } .mega-menu-support__row-link:hover .mega-menu-support__row-chevron, .mega-menu-support__row-link:focus-visible .mega-menu-support__row-chevron { transform: translateX(4px); opacity: 0.85; } .mega-menu-support__row-link:focus-visible { outline: 2px solid rgb(var(--text-color)); outline-offset: -2px; } /* ---- Support Customer Care panel: neutral, no photograph ---- */ .mega-menu-support__care-wrap { height: 100%; } .mega-menu-support__care { position: relative; display: flex; flex-direction: column; justify-content: center; height: 100%; border-radius: 6px; background-color: #F5F3F0; color: rgb(var(--text-color)); text-decoration: none; padding: 28px 32px; transition: background-color 200ms ease; } .mega-menu-support__care-eyebrow { margin: 0 0 0.5rem; font-family: var(--heading-font-family); font-weight: var(--heading-font-weight); font-size: 0.6875rem; letter-spacing: var(--heading-letter-spacing); text-transform: uppercase; color: rgb(var(--text-color)); opacity: 0.6; } .mega-menu-support__care-heading { margin: 0; color: rgb(var(--text-color)); } .mega-menu-support__care-body { margin: 0.5rem 0 0; color: rgb(var(--text-color) / 0.75); max-width: 34ch; } .mega-menu-support__care-cta { display: inline-flex; align-items: center; gap: 0.375rem; margin-top: 0.875rem; width: fit-content; font-weight: 600; color: rgb(var(--text-color)); } .mega-menu-support__care-cta-chevron { display: inline-flex; opacity: 0.6; transition: transform 200ms ease, opacity 200ms ease; } .mega-menu-support__care:hover, .mega-menu-support__care:focus-visible { background-color: #EFEAE2; } .mega-menu-support__care:hover .mega-menu-support__care-cta-chevron, .mega-menu-support__care:focus-visible .mega-menu-support__care-cta-chevron { transform: translateX(4px); opacity: 1; } .mega-menu-support__care:focus-visible { outline: 2px solid rgb(var(--text-color)); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .mega-menu-support__row-chevron, .mega-menu-support__care-cta-chevron { transition: none; } .mega-menu-support__row-link:hover .mega-menu-support__row-chevron, .mega-menu-support__row-link:focus-visible .mega-menu-support__row-chevron, .mega-menu-support__care:hover .mega-menu-support__care-cta-chevron, .mega-menu-support__care:focus-visible .mega-menu-support__care-cta-chevron { transform: none; } } /* ---- Support responsive safety across desktop breakpoints ---- */ @media (min-width: 1000px) and (max-width: 1279px) { .mega-menu-support { grid-template-columns: 68fr 32fr; } .mega-menu-support__directory { grid-template-columns: 60fr 40fr; column-gap: 1.25rem; } .mega-menu-support__care { padding: 22px 22px; } } @media (min-width: 1280px) { /* * Scoped override, same reasoning as .mega-menu-shop above: the shared .mega-menu base rule widens * --mega-menu-gap to 6.25rem (100px) at 1400px+, which would read as an oversized void between three * compact columns. Keep a fixed, moderate gap instead so the composition stays "compact" per spec. */ .mega-menu-support { --mega-menu-gap: 56px; } .mega-menu-support__care { padding: 32px 36px; } } /* =========================== Badge Styling Connor added =========================== */ /* Bowsers badge styling */ .badge-list { position: absolute; top: 10px; left: 10px; gap: 6px; display: flex; flex-direction: column; z-index: 2; } .product-card__figure { position: relative; /* ensures the absolute badge-list sits inside the card */ } /* Base badge */ .badge { background-color: #4A4A48; /* Warm Graphite */ color: #F5F3F0; /* Classic Linen */ font-family: 'BowsersPoppins', sans-serif; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; font-size: 12px; line-height: 1; padding: 6px 10px; border-radius: 999px; /* pill shape */ } /* Sold out variant */ .badge--sold-out { background-color: #343739; /* Charcoal */ color: #EDEBE8; /* Pale Stone */ border: 1px solid #4A4A48; /* subtle edge */ } /* Optional hover polish on product cards */ .product-card:hover .badge { transform: translateY(-1px); transition: transform 160ms ease, box-shadow 160ms ease; box-shadow: 0 2px 6px rgb(0 0 0 / 10%); } /* If badges stack too close on mobile, add spacing */ @media (max-width: 699px) { .badge-list { top: 8px; left: 8px; gap: 4px; } .badge { font-size: 11px; padding: 5px 9px; } } /* =========================== Product Title Styling Connor added =========================== */ /* Bowsers Product Title Styling */ .shopify-section--main-product .product-title { font-family: 'BowsersPoppins', sans-serif; font-weight: 600; /* stronger than normal, but not too heavy */ /* font-size: 18px; */ /* make it more pronounced */ font-size: 40px; letter-spacing: 0.5px; /* refined spacing */ color: #343739; /* Charcoal, ties to brand palette */ text-transform: none; /* keep clean case */ line-height: 1.4; transition: color 160ms ease; } @media (max-width: 699px) { .product-title {font-size: 30px;} } /* =========================== Product card title styling (collections, related products, etc.) =========================== */ /* Keep PDP title styling as-is, but restore card titles */ .product-card .product-title, .product-card__title, .product-card__title a, .product-item__title, .product-item__title a { font-family: 'BowsersPoppins', sans-serif; font-weight: 600; font-size: 18px; letter-spacing: 0.5px; color: #343739; text-transform: none; line-height: 1.4; } /* Optional: tighten spacing if the title block got tall */ .product-card__info, .product-card__content { row-gap: 6px; } /* Fix: scope the mobile title size change so it only affects the PDP */ @media (max-width: 699px) { .shopify-section--main-product .product-title { font-size: 30px; } .product-card .product-title, .product-card__title, .product-card__title a, .product-item__title, .product-item__title a { font-size: 16px; } } /* =========================== Bowsers Collection Pills: Page background: #F5F3F0 =========================== */ /* Remove theme divider above the grid (but keep toolbar dividers) */ .template-collection .collection-filters, .template-collection .section--collection::before { border-top: none !important; background: #F5F3F0 !important; box-shadow: none !important; content: none !important; } /* Restore the toolbar divider lines (view icons, product count, sort) */ .template-collection .collection-toolbar { border-top: 1px solid rgba(52,55,57,0.12) !important; border-bottom: 1px solid rgba(52,55,57,0.12) !important; box-shadow: none !important; } /* Tight vertical rhythm under the intro copy */ .collection-intro, .section--collection .rte { margin-bottom: 8px; } .pills-block { margin: 6px 0 12px; } /* Layout */ .collection-pills { display: flex; flex-wrap: wrap; gap: 20px; } /* Base pill: white chip on a linen page */ .pill { display: inline-block; padding: 12px 20px; /* generous */ border-radius: 9999px; background: #FFFFFF; /* unselected pill is white */ color: #343739; /* charcoal text */ text-decoration: none; font-weight: 600; font-size: 16px; line-height: 1; border: 2px solid transparent; /* allows press border without layout shift */ transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease; } /* Hover: soft stone grey (still clear against linen background) */ .pill:hover { background: #E0DFDC; /* slightly darker than #F5F3F0 */ color: #343739; /* keep charcoal text */ } /* Press feedback: show a charcoal ring briefly before navigation */ .pill:active { border-color: #343739; } /* Selected after navigation: filled dark grey */ .pill.is-active { background: #343739; /* filled state */ color: #FFFFFF; border-color: transparent; /* no ring once active */ } /* Mobile tweaks */ @media (max-width: 768px) { .collection-pills { gap: 10px; } .pill { padding: 9px 14px; font-size: 14px; } .pills-block { margin: 8px 0 10px; } } /* =========================== Collection Intro Styling Generic for collection rich text =========================== */ /* Title */ .template-collection .shopify-section--rich-text .prose.text-start .h1 { font-size: clamp(32px, 3.6vw, 44px) !important; line-height: 1.15 !important; font-weight: 700 !important; letter-spacing: 0.01em !important; margin: 0 0 10px 0 !important; color: #343739 !important; } /* Body text (description) */ .template-collection .shopify-section--rich-text .prose.text-start > div > p, .template-collection .shopify-section--rich-text .prose.text-start p:not(.h1) { font-size: 20px !important; line-height: 1.6 !important; color: #343739 !important; max-width: 100% !important; margin: 0 0 14px 0 !important; } /* Bold inside collection intro */ .template-collection .shopify-section--rich-text .prose.text-start :is(strong, b) { font-weight: 700 !important; } /* Allow synthetic bold if the loaded webfont doesn't include 700 */ .template-collection .shopify-section--rich-text .prose.text-start { font-synthesis: weight; } .template-collection .shopify-section--rich-text .prose.text-start strong, .template-collection .shopify-section--rich-text .prose.text-start b { font-weight: 700; } .template-collection .shopify-section--rich-text .prose.text-start p strong, .template-collection .shopify-section--rich-text .prose.text-start p b { font-weight: 600 !important; } /* Ensure block aligns nicely */ .template-collection .shopify-section--rich-text .prose.text-start { margin-left: 0 !important; } /* =========================== Tighten spacing between intro and pills =========================== */ /* Remove excess padding from the rich-text section wrapper */ .shopify-section--rich-text .container { padding-bottom: 0 !important; } /* Reduce spacing below the intro text */ .shopify-section--rich-text .prose p { margin-bottom: 4px !important; } /* Pull pills closer to text */ .collection-pills { margin-top: 6px !important; margin-bottom: 18px; /* leave some breathing room */ } /* =========================== Squeeze gap between intro copy and pills =========================== */ /* Kill hidden bottom padding on the rich text section */ .template-collection .shopify-section--rich-text, .template-collection .shopify-section--rich-text .color-scheme, .template-collection .shopify-section--rich-text .container, .template-collection .shopify-section--rich-text .container.container--sm { padding-bottom: 0 !important; margin-bottom: 0 !important; } /* Remove extra margins inside the prose wrapper */ .template-collection .shopify-section--rich-text .prose { margin-bottom: 0 !important; } .template-collection .shopify-section--rich-text .prose p { margin-bottom: 6px !important; /* description bottom margin */ } /* Pull the pills up tighter */ .pills-block { margin-top: 0 !important; } .collection-pills { margin-top: 4px !important; /* reduce the gap above pills */ margin-bottom: 16px !important; /* keep a little air before the toolbar */ } /* If you still see a faint gap, uncomment the line below for a micro pull-up */ .pills-block { margin-top: -4px !important; } /* Mobile: make pills a horizontal scroller */ @media (max-width: 768px) { .pills-block { margin-top: 0 !important; margin-bottom: 12px !important; } .collection-pills { display: flex; flex-wrap: nowrap; /* keep on one line */ gap: 10px; overflow-x: auto; /* enable swipe */ overflow-y: hidden; -webkit-overflow-scrolling: touch; /* momentum scrolling */ scroll-snap-type: x proximity; /* gentle snap */ padding-bottom: 6px; /* prevents text clipping */ } .collection-pills .pill { flex: 0 0 auto; /* prevent shrinking */ scroll-snap-align: start; white-space: nowrap; /* keep labels on one line */ } /* Hide default scrollbar on WebKit */ .collection-pills::-webkit-scrollbar { display: none; } } /* Bowsers – remove the dark divider line under the collection banner on desktop */ .template-collection .shopify-section--collection-banner, .template-collection .shopify-section--collection-banner .collection-banner, .template-collection .shopify-section--collection-banner .content-over-media, .template-collection .shopify-section--collection-banner .color-scheme { border-bottom: 0 !important; box-shadow: none !important; } /* Kill any pseudo-element dividers as well */ .template-collection .shopify-section--collection-banner::before, .template-collection .shopify-section--collection-banner::after, .template-collection .shopify-section--collection-banner .collection-banner::before, .template-collection .shopify-section--collection-banner .collection-banner::after, .template-collection .shopify-section--collection-banner .content-over-media::before, .template-collection .shopify-section--collection-banner .content-over-media::after, .template-collection .shopify-section--collection-banner .color-scheme::before, .template-collection .shopify-section--collection-banner .color-scheme::after { content: none !important; border: 0 !important; box-shadow: none !important; } /* Bowsers – kill divider between collection intro (rich text) and pills (custom liquid) */ /* Remove any bottom border/shadow from the rich text section */ .template-collection .shopify-section--rich-text, .template-collection .shopify-section--rich-text .section-spacing, .template-collection .shopify-section--rich-text .color-scheme, .template-collection .shopify-section--rich-text .container { border-bottom: 0 !important; box-shadow: none !important; } /* Remove any top border/shadow from the custom liquid section that holds the pills */ .template-collection .shopify-section--custom-liquid, .template-collection .shopify-section--custom-liquid .section-spacing, .template-collection .shopify-section--custom-liquid .color-scheme, .template-collection .shopify-section--custom-liquid .container { border-top: 0 !important; box-shadow: none !important; } /* Also kill pseudo-element dividers, just in case */ .template-collection .shopify-section--rich-text::after, .template-collection .shopify-section--custom-liquid::before, .template-collection .shopify-section--custom-liquid::after, .template-collection .shopify-section--custom-liquid .section-spacing::before, .template-collection .shopify-section--custom-liquid .section-spacing::after, .template-collection .shopify-section--custom-liquid .color-scheme::before, .template-collection .shopify-section--custom-liquid .color-scheme::after, .template-collection .shopify-section--custom-liquid .container::before, .template-collection .shopify-section--custom-liquid .container::after { content: none !important; border: 0 !important; box-shadow: none !important; } /* =========================== Breadcrumbs, desktop only =========================== */ /* Support either wrapper: our custom section or Prestige's class */ .bowsers-breadcrumbs, .shopify-section--breadcrumbs { background: #F5F3F0; padding: 16px 0; border-top: 1px solid rgba(52,55,57,0.08); border-bottom: 0; } /* Container widths stay theme-driven */ /* Typography and layout */ .bowsers-breadcrumbs .breadcrumb, .shopify-section--breadcrumbs .breadcrumb { font-size: 13px; letter-spacing: 0; text-transform: none; /* not caps locked */ line-height: 1.25; } .bowsers-breadcrumbs .breadcrumb__list, .shopify-section--breadcrumbs .breadcrumb__list { display: flex; flex-wrap: wrap; align-items: center; gap: 0; /* separators will handle spacing */ margin: 0; padding: 0; list-style: none; } .bowsers-breadcrumbs .breadcrumb__list-item, .shopify-section--breadcrumbs .breadcrumb__list-item { color: #343739; font-weight: 400; } /* Chevron separator */ .bowsers-breadcrumbs .breadcrumb__list-item + .breadcrumb__list-item::before, .shopify-section--breadcrumbs .breadcrumb__list-item + .breadcrumb__list-item::before { content: "›"; display: inline-block; margin: 0 8px; color: #343739; opacity: 0.45; } .bowsers-breadcrumbs .breadcrumb__list-item a, .shopify-section--breadcrumbs .breadcrumb__list-item a { color: #343739; text-decoration: none; transition: color .2s ease; } .bowsers-breadcrumbs .breadcrumb__list-item a:hover, .shopify-section--breadcrumbs .breadcrumb__list-item a:hover { text-decoration: underline; } .bowsers-breadcrumbs [aria-current="page"], .shopify-section--breadcrumbs [aria-current="page"] { font-weight: 500; } /* On collection pages, remove the breadcrumb top divider (this is the line under the banner) */ .template-collection .bowsers-breadcrumbs, .template-collection .shopify-section--breadcrumbs { border-top: 0 !important; } /* Tighten collection page vertical rhythm: banner -> breadcrumbs -> title */ .template-collection .bowsers-breadcrumbs, .template-collection .shopify-section--breadcrumbs { padding: 8px 0 !important; /* was 16px */ margin: 0 !important; } /* Tighten the space between breadcrumbs and the collection header section */ .template-collection .bowsers-breadcrumbs + .shopify-section, .template-collection .shopify-section--breadcrumbs + .shopify-section { margin-top: 0 !important; padding-top: 0 !important; } /* =========================== Mobile behavior and divider fix =========================== */ @media (max-width: 749px) { /* Hide breadcrumbs section on phones */ .bowsers-breadcrumbs, .shopify-section--breadcrumbs { display: none !important; } /* Remove any divider between the banner and the next section */ .shopify-section--collection-banner, .shopify-section--collection-banner .collection-banner, .shopify-section--collection-banner .content-over-media, .shopify-section--collection-banner .color-scheme { border-bottom: 0 !important; box-shadow: none !important; } .shopify-section--collection-banner::before, .shopify-section--collection-banner::after, .shopify-section--collection-banner .collection-banner::before, .shopify-section--collection-banner .collection-banner::after, .shopify-section--collection-banner .content-over-media::before, .shopify-section--collection-banner .content-over-media::after, .shopify-section--collection-banner .color-scheme::before, .shopify-section--collection-banner .color-scheme::after { content: none !important; display: none !important; } .shopify-section--collection-banner + .shopify-section, .shopify-section--collection-banner + .shopify-section .section-spacing, .shopify-section--collection-banner + .shopify-section .color-scheme, .shopify-section--collection-banner + .shopify-section .container { border-top: 0 !important; box-shadow: none !important; } /* Last resort: paint any remaining hairline to match the background */ .shopify-section--collection-banner + .shopify-section { border-top-color: #F5F3F0 !important; } } /* Product swatch hover hide modal on mobile and display correct variant image */ @media (max-width: 999px) { .swatch-items--wrapper #variant-popup, .swatch-items--wrapper .show-hover-triangle {display: none!important} } /* Fix predictive search products title too big on mobile */ @media (max-width: 767px) { .predictive-search__products .product-title { font-size: 16px; font-weight: 700 !important; } } /* =========================== Bowsers Global Section Headings Keep PDP unchanged Refined heading styling without affecting Klaviyo forms =========================== */ .shopify-section:not(.shopify-section--main-product):not(.klaviyo-form):not([class*="klaviyo"]) :is(.h0, .h1, .h2, .h3, .h4) { font-family: 'BowsersPoppins', sans-serif !important; font-weight: 600 !important; letter-spacing: 0.5px !important; text-transform: none !important; line-height: 1.2 !important; } .shopify-section:not(.shopify-section--main-product):not(.klaviyo-form):not([class*="klaviyo"]) :is(.smallcaps, .text-subdued, .section-header__subheading) { font-family: 'Inter', sans-serif !important; } .shopify-section:not(.shopify-section--main-product):not(.klaviyo-form):not([class*="klaviyo"]) .smallcaps { letter-spacing: 0.12em !important; } /* =========================== Homepage headings: size only (no alignment) =========================== */ .template-index :is(h1, h2, h3, h4).h2 { font-size: clamp(30px, 3vw, 46px) !important; line-height: 1.15 !important; } /* Increase product card title size only */ .product-card .product-title { font-size: 1.4rem; line-height: 1.25; } /* PDP spec table: reset any accidental global font sizing */ .product .product-attribute-specs-table, .product .product-attribute-specs-table th, .product .product-attribute-specs-table td, .product .product-attribute-specs-table p { font-size: 14px !important; line-height: 1.4 !important; } .product .product-attribute-specs-table th { font-weight: 600 !important; } .product .product-attribute-specs-table td { font-weight: 400 !important; } /* If the richtext inside cells got oversized */ .product .product-attribute-specs-table .metafield-rich_text_field, .product .product-attribute-specs-table .metafield-rich_text_field p { margin: 0 !important; font-size: 14px !important; line-height: 1.4 !important; } /* Optional: slightly smaller on mobile if it still feels big */ @media (max-width: 699px) { .product .product-attribute-specs-table, .product .product-attribute-specs-table th, .product .product-attribute-specs-table td, .product .product-attribute-specs-table p { font-size: 13px !important; } } /* Button sizing (keeps theme colors), excludes PDP */ body:not(.template-product) :where(a.button, button.button) { font-family: Inter, sans-serif; /* Typography rhythm */ font-size: 18px; line-height: 27px; font-weight: 450; font-variation-settings: "wght" 450; letter-spacing: normal; text-transform: capitalize; /* Shape + sizing */ height: 52px; padding: 0 24px; border-radius: 9999px; /* Center text perfectly (works for and