/** Shopify CDN: Minification failed
Line 2010:13 Unexpected "{"
Line 2010:22 Expected ":"
Line 2015:13 Unexpected "{"
Line 2015:22 Expected ":"
Line 2373:18 Unexpected "{"
Line 2373:27 Expected ":"
Line 2378:18 Unexpected "{"
Line 2378:27 Expected ":"
Line 2527:18 Unexpected "{"
Line 2527:27 Expected ":"
... and 6 more hidden warnings
**/
/* STEP 13 — GTA-style menu tabs */
/* Target the bottom navigation area */
.header__bottom,
.header__navigation {
padding: 0 !important;
}
/* Menu list */
.header__bottom nav ul,
.header__navigation nav ul,
.header__bottom .list-menu,
.header__navigation .list-menu {
display: flex !important;
width: 100%;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
border-top: 8px solid #000;
}
/* Each menu item becomes a tab */
.header__bottom nav ul > li,
.header__navigation nav ul > li,
.header__bottom .list-menu > li,
.header__navigation .list-menu > li {
flex: 1 1 0;
}
/* Tab links */
.header__bottom nav ul > li > a,
.header__navigation nav ul > li > a,
.header__bottom .list-menu > li > a,
.header__navigation .list-menu > li > a {
display: flex;
align-items: center;
justify-content: center;
height: 36px;
background: #000;
color: #fff;
text-transform: uppercase;
font-weight: 600;
letter-spacing: 0.05em;
text-decoration: none;
border-right: 2px solid #222;
}
/* Hover state */
.header__bottom a:hover,
.header__navigation a:hover {
background: #222;
}
/* STEP 14 — force the nav area to stretch full width */
.header__bottom nav,
.header__navigation nav,
.header__bottom .header__menu,
.header__navigation .header__menu {
width: 100% !important;
}
.header__bottom nav ul,
.header__navigation nav ul,
.header__bottom .list-menu,
.header__navigation .list-menu {
width: 100% !important;
}
/* If the theme wraps the menu in a container, remove its max width */
.header__bottom .container,
.header__navigation .container,
.header__bottom .page-width,
.header__navigation .page-width {
max-width: none !important;
width: 100% !important;
}
/* STEP 15 — make the tabs a single tight bar */
.header__bottom nav ul,
.header__navigation nav ul,
.header__bottom .list-menu,
.header__navigation .list-menu {
justify-content: stretch !important;
align-items: stretch !important;
gap: 0 !important;
}
.header__bottom nav ul > li,
.header__navigation nav ul > li,
.header__bottom .list-menu > li,
.header__navigation .list-menu > li {
margin: 0 !important;
padding: 0 !important;
}
.header__bottom nav ul > li > a,
.header__navigation nav ul > li > a,
.header__bottom .list-menu > li > a,
.header__navigation .list-menu > li > a {
margin: 0 !important;
width: 100% !important;
}
/* Apply the theme's container rules to the actual nav wrapper */
.header__bottom nav,
.header__navigation nav,
.header__bottom .header__menu,
.header__navigation .header__menu {
/* This is the key: make the nav wrapper behave like page-width--fixed */
margin-left: auto !important;
margin-right: auto !important;
padding-left: var(--page-padding, 24px) !important;
padding-right: var(--page-padding, 24px) !important;
box-sizing: border-box !important;
}
/* Active tab (theme-based, not aria-current) */
.header__bottom li.is-active > a,
.header__bottom li.active > a,
.header__bottom li.menu__item--active > a {
background: #fff !important;
color: #000 !important;
position: relative;
z-index: 2;
}
/* Active tab (normal links) */
.header__bottom a.menu__item[aria-current="page"] {
background: #fff !important;
color: #000 !important;
position: relative;
}
/* Active tab (dropdown parents) */
.header__bottom summary[data-current="page"] .menu__item {
background: #fff !important;
color: #000 !important;
position: relative;
}
/* GTA blue line (no clipping because it stays inside the tab) */
.header__bottom a.menu__item[aria-current="page"]::before,
.header__bottom summary[data-current="page"] .menu__item::before {
content: "";
position: absolute;
top: -6px; /* inside the tab */
left: 0;
right: 0;
height: 6px;
background: #0597ff;
border: 1px solid #000;
box-sizing: border-box;
}
.header__bottom,
.header__navigation {
padding-top: 8px !important;
}
/* Disable hover animations on GTA nav tabs only */
.header__bottom .menu__item,
.header__bottom .menu__item *,
.header__bottom .menu__item:hover,
.header__bottom .menu__item:hover * {
transition: none !important;
transform: none !important;
animation: none !important;
}
/* Kill reversed-link hover effects in GTA nav */
.header__bottom .reversed-link::before,
.header__bottom .reversed-link::after {
display: none !important;
}
/* Remove underline + any underline pseudo-elements in GTA nav */
.header__bottom .menu__item,
.header__bottom .menu__item:hover {
text-decoration: none !important;
}
.header__bottom .menu__item .reversed-link,
.header__bottom .menu__item .reversed-link:hover,
.header__bottom .menu__item .menu__item-text,
.header__bottom .menu__item .menu__item-text:hover {
text-decoration: none !important;
background-image: none !important; /* kills gradient-underlines */
box-shadow: none !important; /* kills shadow-underlines */
}
/* Kill underline pseudo-elements */
.header__bottom .reversed-link::before,
.header__bottom .reversed-link::after,
.header__bottom .menu__item-text::before,
.header__bottom .menu__item-text::after {
content: none !important;
display: none !important;
}
/* Lock header search styling */
.header__top .search__input.form-control,
.header__top .search__input.form-control:hover,
.header__top .search__input.form-control:focus {
background: #fff !important;
border: 1px solid #000 !important;
box-shadow: none !important;
outline: none !important;
}
@media (max-width: 640px) {
a.cart-icon img {
margin-left: 24px !important;
}
}
@media (max-width: 640px) {
.header__icons--right .header__buttons {
margin-left: 24px !important;
}
}
.boom-launcher.loloyal-launcher-wrapper {
display: none !important;
}
@media (max-width: 640px) {
.header__icons--right .cart-drawer-button .cart-count--absolute {
top: -6px !important;
right: -30px !important;
}
}
@media (max-width: 640px) {
.header__icons--right .header__buttons > a + a {
margin-right: 26px !important;
}
}
/* GTA blue line above search (always visible) */
.header__top .search__field {
position: relative;
padding-top: 8px; /* creates space so it doesn't clip */
}
.header__top .search__field::before {
content: "";
position: absolute;
top: 3px; /* sits in the added padding area */
left: 0;
right: 0;
height: 6px;
background: #0597ff;
border: 1px solid #000;
box-sizing: border-box;
}
/* Remove the white circle behind the cart icon */
a.cart-icon.cart-icon--solid {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
border-radius: 0 !important;
}
/* Some themes apply the circle via a pseudo-element */
a.cart-icon.cart-icon--solid::before,
a.cart-icon.cart-icon--solid::after {
content: none !important;
background: transparent !important;
box-shadow: none !important;
border: 0 !important;
}
a.cart-icon img {
width: 42px !important;
height: 42px !important;
}
/* Account icon – final size control */
.account-button .icon-account,
.account-button img.icon-account {
width: 70px !important;
height: 70px !important;
max-width: 36px !important;
max-height: 36px !important;
flex: 0 0 48px !important;
display: block !important;
object-fit: contain;
}
/* Normalize rewards icon to match header icons */
.header__icons .icon-rewards {
width: 36px;
height: 36px;
display: block;
margin-right: 6px;
}
.header__icons--right .cart-drawer-button img {
width: 28px;
height: 28px;
max-width: none;
display: block;
}
/* Disable hover animation for rewards icon */
.rewards-button,
.rewards-button:hover {
transform: none !important;
transition: none !important;
}
.rewards-button::before,
.rewards-button::after {
display: none !important;
}
.rewards-button.reversed-link {
background: none !important;
}
.header__icons .rewards-button {
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Reduce space between account + cart icons */
.header__buttons {
gap: 6px !important; /* try 4px–8px */
}
#shopify-section-template--26872769479002__promotion_banner_VCkmzP
.rich-text__subheading .text-subheading {
font-family: var(--font-body-family) !important;
font-weight: 300 !important;
font-size: clamp(36px, 4.5vw, 48px) !important;
line-height: 1.1 !important;
text-transform: uppercase;
}
/* Promotion banner gradient background */
#shopify-section-template--26872769479002__promotion_banner_VCkmzP
.promotion-banner {
background: linear-gradient(
90deg,
#6a6a6a 0%,
#0b0f12 50%,
#6a6a6a 100%
) !important;
}
#shopify-section-template--26872769479002__promotion_banner_VCkmzP
.promotion-banner__inner {
padding-top: 0px;
padding-bottom: 0px;
}
.promotion-banner .text-subheading {
color: #0597ff;
}
/* =========================================================
SHOP BY BRANDS (ONLY) — Blue circle + logo in middle
Scoped to: template--26872769479002__collection_list_Azm9te
========================================================= */
#shopify-section-template--26872769479002__collection_list_Azm9te {
--brand-blue: #0597ff;
--circle-size: clamp(120px, 9vw, 155px); /* change size here */
--logo-size: 72%; /* change logo size here */
}
/* Make card positioning context */
#shopify-section-template--26872769479002__collection_list_Azm9te .collection-card,
#shopify-section-template--26872769479002__collection_list_Azm9te .card {
position: relative;
text-align: center;
}
/* Turn media wrapper into a real fixed-size circle (kill aspect-ratio padding tricks) */
#shopify-section-template--26872769479002__collection_list_Azm9te .collection-card__image.media-wrapper {
width: var(--circle-size) !important;
height: var(--circle-size) !important;
padding: 0 !important; /* IMPORTANT: remove padding-aspect-ratio */
border-radius: 9999px !important;
overflow: hidden !important;
background: var(--brand-blue) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
position: relative !important;
}
/* Make the motion-element not do any weird positioning */
#shopify-section-template--26872769479002__collection_list_Azm9te .collection-card__image.media-wrapper motion-element,
#shopify-section-template--26872769479002__collection_list_Azm9te .collection-card__image.media-wrapper motion-element.block {
width: 100% !important;
height: 100% !important;
position: static !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* Force the image to be centered and visible */
#shopify-section-template--26872769479002__collection_list_Azm9te .collection-card__image.media-wrapper img {
display: block !important;
position: static !important; /* overrides theme absolute positioning */
inset: auto !important;
width: var(--logo-size) !important;
height: var(--logo-size) !important;
max-width: var(--logo-size) !important;
max-height: var(--logo-size) !important;
object-fit: contain !important;
background: transparent !important;
opacity: 1 !important;
visibility: visible !important;
/* OPTIONAL: uncomment if you want to force logos to white */
/* filter: brightness(0) invert(1) !important; */
}
/* Hide placeholder SVGs only */
#shopify-section-template--26872769479002__collection_list_Azm9te svg.placeholder-svg {
display: none !important;
}
/* Hide the title text completely */
#shopify-section-template--26872769479002__collection_list_Azm9te .collection-card__title,
#shopify-section-template--26872769479002__collection_list_Azm9te .card__heading,
#shopify-section-template--26872769479002__collection_list_Azm9te .card__heading a {
display: none !important;
}
/* Remove extra spacing where title/content normally sits */
#shopify-section-template--26872769479002__collection_list_Azm9te .collection-card__inner,
#shopify-section-template--26872769479002__collection_list_Azm9te .collection-card__content,
#shopify-section-template--26872769479002__collection_list_Azm9te .card__content {
padding-top: 0 !important;
margin-top: 0 !important;
}
/* Kill the hover caret/slider thing */
#shopify-section-template--26872769479002__collection_list_Azm9te .icon-caret-right {
display: none !important;
}
/* Remove category selector */
.header__search .search__types {
display: none !important;
}
/* Reclaim space taken by category selector */
.header__search .search__field {
padding-left: 0 !important;
}
/* Ensure input uses full width */
.header__search .search__input {
padding-left: 16px !important; /* adjust if needed */
}
/* Optional: center placeholder vertically & visually */
.header__search .search__input::placeholder {
text-align: left;
}
/* ===== FORCE REMOVE SHOP BY BRANDS BOX OUTLINES ===== */
/* Kill grid lines (pseudo elements) */
.collection-list__container::before,
.collection-list__container::after,
.collection-card::before,
.collection-card::after,
.collection-card__wrapper::before,
.collection-card__wrapper::after {
display: none !important;
content: none !important;
}
/* If grid-bordered is adding CSS variables */
.collection-list__container.grid-bordered {
--grid-border-width: 0px !important;
--border-width: 0px !important;
}
.bundle-options-grid__tile{
background: #0597ff;
}
/* --- Image card with product: “KILLA / FROM £2.99” bottom bar (REPLACE ALL OLD CSS WITH THIS) --- */
/* Hide the product title/price block entirely */
.custom-content-block--image_card_with_product .pr-img-card__product{
display:none !important;
}
/* Push remaining content to bottom */
.custom-content-block--image_card_with_product .pr-img-card__contents{
height:100%;
justify-content:flex-end;
}
/* Bottom bar */
.custom-content-block--image_card_with_product .pr-img-card__contents-header{
width:100%;
margin-top:auto;
padding:18px 18px 20px;
background: rgba(0,0,0,.35);
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:16px;
}
/* Left: brand name */
.custom-content-block--image_card_with_product .pr-img-card__contents-heading{
margin:0 !important;
order:1;
text-transform:uppercase;
line-height:1;
font-weight:800;
font-size:48px; /* tweak if needed */
font-family: var(--font-heading-family) !important;
}
/* Right: “FROM £2.99” (make bigger + match heading font) */
.custom-content-block--image_card_with_product .rich-text__subheading{
margin:0 !important;
order:2;
text-align:right;
white-space:nowrap;
text-transform:uppercase;
letter-spacing:.06em;
line-height:1.05;
font-weight:800;
font-family: var(--font-heading-family) !important;
font-size:22px; /* overall size (FROM + price) */
}
/* Make the number bigger than the “FROM” */
.custom-content-block--image_card_with_product .rich-text__subheading{
font-variant-numeric: tabular-nums;
}
.custom-content-block--image_card_with_product .rich-text__subheading{
/* if it’s plain text, this still helps readability */
text-shadow: 0 1px 0 rgba(0,0,0,.25);
}
/* If your theme wraps parts in spans (some do), this targets the last span as the price */
.custom-content-block--image_card_with_product .rich-text__subheading span:last-child{
font-size:28px !important;
letter-spacing:.02em;
}
/* --- FIX: Align brand name + FROM price on same baseline --- */
.custom-content-block--image_card_with_product .pr-img-card__contents-header{
width:100%;
margin-top:auto;
padding:18px 18px 20px;
background: rgba(0,0,0,.35);
display:flex;
align-items:baseline; /* 🔑 THIS IS THE FIX */
justify-content:space-between;
gap:16px;
}
/* Brand name (left) */
.custom-content-block--image_card_with_product .pr-img-card__contents-heading{
margin:0 !important;
text-transform:uppercase;
font-weight:800;
font-size:48px;
line-height:1;
font-family:var(--font-heading-family) !important;
}
/* FROM £X.XX (right) */
.custom-content-block--image_card_with_product .rich-text__subheading{
margin:0 !important;
white-space:nowrap;
text-transform:uppercase;
font-weight:800;
font-size:22px;
line-height:1; /* 🔑 force same baseline math */
font-family:var(--font-heading-family) !important;
letter-spacing:.06em;
font-variant-numeric: tabular-nums;
}
/* If theme wraps the price in spans, boost the number only */
.custom-content-block--image_card_with_product .rich-text__subheading span:last-child{
font-size:28px;
letter-spacing:.02em;
}
/* Paste this (it targets YOUR exact markup).
This forces a visible dark overlay even if other CSS is fighting it. */
.bundle-options-grid__left { position: relative !important; overflow: hidden; }
.bundle-options-grid__left-bg{
position: absolute !important;
inset: 0 !important;
z-index: 0 !important;
}
/* LEFT PANEL LAYERING (FINAL) */
#BundleOptionsGrid-template--26872769479002__bundle_options_grid_BryDG6 .bundle-options-grid__left{
position: relative;
overflow: hidden;
isolation: isolate;
}
/* Background layer fills the whole panel */
#BundleOptionsGrid-template--26872769479002__bundle_options_grid_BryDG6 .bundle-options-grid__left-bg{
position: absolute;
inset: 0;
z-index: 0;
}
/* Image fills the whole panel */
#BundleOptionsGrid-template--26872769479002__bundle_options_grid_BryDG6 .bundle-options-grid__left-img{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
z-index: 0;
}
/* Overlay fills the whole panel (compatible syntax) */
#BundleOptionsGrid-template--26872769479002__bundle_options_grid_BryDG6 .bundle-options-grid__left-overlay{
position: absolute;
inset: 0;
background: rgba(0,0,0,var(--bog-overlay)) !important;
opacity: 0.75 !important;
display: block !important;
visibility: visible !important;
z-index: 1;
pointer-events: none;
}
/* Content above overlay */
#BundleOptionsGrid-template--26872769479002__bundle_options_grid_BryDG6 .bundle-options-grid__left-content{
position: relative;
z-index: 2;
background: transparent; /* just in case theme sets one */
}
/* Brand options outer border */
.collection-list__container {
border: 1px solid #d6d6d6;
padding: 32px;
}
/* Individual brand card spacing stays clean */
.collection-card {
border: none;
background: transparent;
}
/* Prevent theme boxed styles interfering */
.collection-card--boxed {
box-shadow: none !important;
}
/* Optional: tighten mobile padding */
@media (max-width: 767px) {
.collection-list__container {
padding: 20px;
}
}
/* ===== FORCE THIS SECTION TO MATCH CANVA (exact ID from your screenshot) ===== */
#section-template--26872769479002__image_with_text_aXhRxw .image-with-text__wrapper{
align-items: stretch;
column-gap: 60px;
}
/* kill the spinning badge + icon list */
#section-template--26872769479002__image_with_text_aXhRxw .image-with-text__badge{
display: none !important;
}
#section-template--26872769479002__image_with_text_aXhRxw .rich-text__icon{
display: none !important;
}
/* make the image a wide rectangle with border like the design */
#section-template--26872769479002__image_with_text_aXhRxw .image-with-text__media .media-wrapper{
aspect-ratio: 16/9 !important;
border: 1px solid #bdbdbd;
background: #d9d9d9;
border-radius: 0;
overflow: hidden;
}
/* content column: top text, buttons at the bottom */
#section-template--26872769479002__image_with_text_aXhRxw .image-with-text__inner{
display: flex;
align-items: stretch;
}
#section-template--26872769479002__image_with_text_aXhRxw .image-with-text__content{
display: flex;
flex-direction: column;
height: 100%;
padding-top: 8px;
padding-bottom: 8px;
}
/* tagline + big heading */
#section-template--26872769479002__image_with_text_aXhRxw .rich-text__subheading{
font-size: 12px;
letter-spacing: .08em;
text-transform: uppercase;
margin-bottom: 10px;
}
#section-template--26872769479002__image_with_text_aXhRxw .rich-text__heading{
margin: 0 0 18px 0;
line-height: .95;
}
#section-template--26872769479002__image_with_text_aXhRxw .rich-text__heading *{
font-size: 56px;
font-weight: 800;
}
/* CTA row pinned to bottom + lifted slightly */
#section-template--26872769479002__image_with_text_aXhRxw .iwt-cta-row{
margin-top: auto;
display: flex;
gap: 14px;
align-items: center;
padding-top: 28px;
padding-bottom: 12px;
}
/* button sizing */
#section-template--26872769479002__image_with_text_aXhRxw .iwt-cta-row .btn{
border-radius: 0;
min-height: 46px;
padding: 12px 18px;
}
#section-template--26872769479002__image_with_text_aXhRxw .iwt-cta-row .btn--primary{
min-width: 360px;
justify-content: center;
}
#section-template--26872769479002__image_with_text_aXhRxw .iwt-cta-row .btn--secondary{
background: transparent !important;
border: 1px solid currentColor !important;
}
/* Subscribe & Save split section fixes */
#SubscribeSaveSplit-template--26872769479002__subscribe_save_split_EwVeaN .sss__grid{
align-items: stretch; /* ensure both columns stretch equally */
}
/* Make the text column as tall as the media column so bottom-align works */
#SubscribeSaveSplit-template--26872769479002__subscribe_save_split_EwVeaN .sss__text{
height: 100%;
min-height: var(--sss-media-minh);
align-self: stretch;
}
/* Use CTA itself as the "push to bottom" element (more reliable) */
#SubscribeSaveSplit-template--26872769479002__subscribe_save_split_EwVeaN .sss__spacer{
display: none;
}
#SubscribeSaveSplit-template--26872769479002__subscribe_save_split_EwVeaN .sss__cta{
margin-top: auto; /* pushes buttons to the bottom */
padding-top: 0; /* keep it tight to the bottom */
padding-bottom: 2px; /* tiny breathing room so it doesn't kiss the edge */
}
/* Button text styling only (keep your existing backgrounds/borders) */
#SubscribeSaveSplit-template--26872769479002__subscribe_save_split_EwVeaN .sss__btn{
font-family: var(--font-body-family, inherit);
font-style: var(--font-body-style, normal);
font-weight: 800;
font-size: 16px;
line-height: 1;
letter-spacing: 0.12em;
text-transform: uppercase;
}
/* Mobile: don't force tall left column */
@media (max-width: 989px){
#SubscribeSaveSplit-template--26872769479002__subscribe_save_split_EwVeaN .sss__text{
min-height: 0;
}
#SubscribeSaveSplit-template--26872769479002__subscribe_save_split_EwVeaN .sss__cta{
margin-top: 18px; /* normal flow on mobile */
}
}
#SubscribeSaveSplit-template--26872769479002__subscribe_save_split_EwVeaN .sss__btn{
font-family: var(--font-heading-family) !important;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .06em;
}
/* Remove the built-in gap above the CTA */
#SubscribeSaveSplit-template--26872769479002__subscribe_save_split_EwVeaN .sss__spacer{
display: none !important;
}
#SubscribeSaveSplit-template--26872769479002__subscribe_save_split_EwVeaN .sss__cta{
padding-top: 0 !important;
margin-top: auto; /* keep it pinned to bottom */
width: 100%;
display: grid;
grid-template-columns: 4fr 1fr; /* 80/20 */
gap: 14px;
}
/* Make buttons fill the row */
#SubscribeSaveSplit-template--26872769479002__subscribe_save_split_EwVeaN .sss__btn{
width: 100%;
}
#SubscribeSaveSplit-template--26872769479002__subscribe_save_split_EwVeaN .sss__btn--primary{
min-width: 0 !important;
}
/* Tighten the space between left content and the image */
#SubscribeSaveSplit-template--26872769479002__subscribe_save_split_EwVeaN .sss__grid{
gap: 48px !important; /* was 60px */
}
/* Remove the left column clamp so CTA can reach toward the image */
#SubscribeSaveSplit-template--26872769479002__subscribe_save_split_EwVeaN .sss__text{
max-width: none !important; /* was 620px */
width: 100%;
}
/* Keep text readable (so only the CTA stretches, not the paragraphs) */
#SubscribeSaveSplit-template--26872769479002__subscribe_save_split_EwVeaN .sss__body,
#SubscribeSaveSplit-template--26872769479002__subscribe_save_split_EwVeaN .sss__body-rich{
max-width: none;
}
/* CTA row layout */
.bundle-options-grid__cta-row{
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
flex-wrap: wrap; /* lets items wrap instead of crushing */
}
/* Keep the button from shrinking */
.bundle-options-grid__btn{
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto; /* no grow, no shrink */
white-space: nowrap; /* keep text on one line */
min-width: 110px; /* pick a value that matches your design */
}
/* Price stack should also not get crushed */
.bundle-options-grid__price-stack{
display: inline-flex;
flex: 0 0 auto; /* prevents weird compressing */
white-space: nowrap;
margin-left: auto; /* pushes it to the right when on same row */
}
/* On small widths, force a clean wrap layout */
@media (max-width: 520px){
.bundle-options-grid__btn{
width: 100%; /* button becomes full width */
min-width: 0;
}
.bundle-options-grid__price-stack{
width: 100%;
justify-content: flex-end;
}
}
/* Make the right panel a query container */
.bundle-options-grid__right{
container-type: inline-size;
}
/* Desktop: keep your current grid */
.bundle-options-grid__grid{
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--bog-gap, 0px);
}
/* Default: grid */
.bundle-options-grid__grid{
display: grid;
grid-template-columns: repeat(3, minmax(220px, 1fr)); /* prevents tiny cards */
gap: 0;
}
/* Make sure the RIGHT panel is actually a container */
.bundle-options-grid__right{
container-type: inline-size;
}
/* =========================================
Hover CTA bar: full-width, no price overlap
========================================= */
@media (hover: hover) and (pointer: fine) and (min-width: 984px){
.bundle-options-grid__card{
position: relative !important;
overflow: hidden !important;
padding-bottom: 48px !important; /* reserve space */
}
/* Price fixed bottom-right by default */
.bundle-options-grid__price-stack{
position: absolute !important;
right: 14px !important;
bottom: 14px !important;
z-index: 3 !important;
white-space: nowrap !important;
transition: opacity 160ms ease !important;
}
/* Full-width slide bar */
.bundle-options-grid__tile .bundle-options-grid__btn{
position: absolute !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important; /* correct anchor */
height: 56px !important; /* consistent bar height */
display: flex !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
box-sizing: border-box !important;
align-items: center !important;
justify-content: center !important;
background: #f0f0f0 !important;
border-top: 1px solid rgba(0,0,0,.25) !important;
z-index: 5 !important;
transform: translateY(100%) !important;
transition: transform 220ms ease !important;
}
/* Hover: slide bar up AND hide price so it can't overlap */
.bundle-options-grid__tile:hover .bundle-options-grid__btn{
transform: translateY(0) !important;
}
.bundle-options-grid__tile:hover .bundle-options-grid__price-stack{
opacity: 0 !important;
pointer-events: none !important;
}
}
.section-template--26872769479002__custom_content_HPgFTK
.pr-img-card__contents{
padding: 0 !important;
}
.section-template--26872769479002__custom_content_HPgFTK
.pr-img-card__contents-header{
padding: 10px 12px 4px !important; /* top, sides, bottom */
}
/* Kill fake spacing from typography */
.section-template--26872769479002__custom_content_HPgFTK
.pr-img-card__contents-header *{
margin: 0 !important;
line-height: 1.1 !important;
}
/* Lift ONLY the price line (From £2.99) */
.section-template--26872769479002__custom_content_HPgFTK
.pr-img-card__contents-header
motion-element.rich-text__subheading{
display: inline-block !important;
transform: translateY(-8px) !important; /* try -2px to -6px */
}
/* ================================
Product image square outline box
================================ */
.product__media-item-container{
border: 1px solid rgba(0,0,0,0.25); /* outline */
border-radius: 0 !important; /* square corners */
background: #fff;
padding: 24px; /* space between image and box */
aspect-ratio: 1 / 1; /* force square */
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
}
/* Ensure image fits nicely inside */
.product__media-item-container img{
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
/* Kill any theme rounding */
.product__media,
.media-wrapper,
.blocks-radius{
border-radius: 0 !important;
}
/* Optional: slightly lighter box on mobile */
@media (max-width: 768px){
.product__media-item-container{
padding: 16px;
}
}
/* ================================
Disable product image interaction
================================ */
/* Disable clicks on the media */
.product__media-item,
.product__media-item *{
pointer-events: none !important;
}
/* Hide zoom icon & zoom button */
.product__media-icon,
.product__media-zoom{
display: none !important;
}
/* Prevent cursor from implying interactivity */
.product__media-item-container,
.product__media-item-container img{
cursor: default !important;
}
/* =========================================
Main product: force true 50/50 on desktop
========================================= */
@media (min-width: 990px){
/* Scope ONLY the main product section */
.section-main-product .product{
flex-wrap: nowrap !important; /* stop stacking */
gap: 32px !important; /* spacing between columns */
align-items: flex-start !important;
}
.section-main-product .product__media-wrapper,
.section-main-product .product__info-wrapper{
width: 50% !important;
max-width: 50% !important;
flex: 0 0 50% !important;
}
}
/* =========================================================
PDP RIGHT COLUMN: remove unwanted bits + match your design
Scope: main product section only
========================================================= */
.section-main-product{
--tsl-blue: #0b84ff;
}
/* 1) Remove vendor/type line + the 3 tick “features” row */
.section-main-product .product__info-wrapper .product__text,
.section-main-product .product__info-wrapper .product__tags,
.section-main-product .product__info-wrapper .product__info-badges,
.section-main-product .product__info-wrapper .product__highlights,
.section-main-product .product__info-wrapper .product__list,
.section-main-product .product__info-wrapper .icon-with-text,
.section-main-product .product__info-wrapper .icon-with-text__wrapper{
display: none !important;
}
/* 2) Remove “Tax included / Shipping calculated…” line */
.section-main-product .product__info-wrapper .product__tax,
.section-main-product .product__info-wrapper .price__tax,
.section-main-product .product__info-wrapper .product__policies{
display: none !important;
}
/* 3) Remove the green “limited time offer” block */
.section-main-product .product__info-wrapper .shopify-block:has(.promo),
.section-main-product .product__info-wrapper .product__info-wrapper .promo,
.section-main-product .product__info-wrapper .product__info-wrapper .offer,
.section-main-product .product__info-wrapper .product__info-wrapper .announcement-bar,
.section-main-product .product__info-wrapper .product__info-wrapper .discount,
.section-main-product .product__info-wrapper .product__info-wrapper .upsell{
display: none !important;
}
/* Fallback for the common Shopify “Shopify block” promo container */
.section-main-product .product__info-wrapper .shopify-block--app:has(.shopify-app-block),
.section-main-product .product__info-wrapper .shopify-app-block{
/* don’t hide ALL apps — only hide if it’s that green offer bar */
}
.section-main-product .product__info-wrapper .shopify-app-block [class*="offer"],
.section-main-product .product__info-wrapper .shopify-app-block [class*="limited"],
.section-main-product .product__info-wrapper .shopify-app-block [style*="background: rgb(232, 245, 239)"],
.section-main-product .product__info-wrapper .shopify-app-block [style*="background: #e8f5ef"]{
display: none !important;
}
/* 5) Price larger + separated */
.section-main-product .product__info-wrapper .price{
margin-top: 6px !important;
}
.section-main-product .product__info-wrapper .price__regular .price-item,
.section-main-product .product__info-wrapper .price__sale .price-item{
font-size: 34px !important;
font-weight: 900 !important;
letter-spacing: -0.02em !important;
}
/* 6) Description spacing like design */
.section-main-product .product__info-wrapper .product__description,
.section-main-product .product__info-wrapper .rte{
margin-top: 12px !important;
font-size: 14px !important;
line-height: 1.6 !important;
opacity: .9 !important;
}
/* 7) Make quantity + add-to-cart row align cleaner */
.section-main-product .product__info-wrapper .product-form__quantity{
border: 1px solid rgba(0,0,0,.18) !important;
border-radius: 0 !important;
}
.section-main-product .product__info-wrapper .product-form__buttons .button{
border-radius: 0 !important;
}
/* 8) Style Buy Now button to match blue bar (if it exists) */
.section-main-product .product__info-wrapper .shopify-payment-button__button{
border-radius: 0 !important;
background: var(--tsl-blue) !important;
color: #fff !important;
font-weight: 800 !important;
text-transform: none !important;
}
/* Hide vendor and product type */
.product__block--meta {
display: none !important;
}
/* Disable slideshow zoom / motion effect */
.slideshow-wrapper motion-element,
.slideshow-wrapper [data-motion="zoom-out"]{
transform: scale(1) !important;
transition: none !important;
animation: none !important;
}
/* Extra safety: prevent image-level scaling */
.slideshow-wrapper img{
transform: none !important;
}
/* PDP Trustpilot: small + left, without cropping */
.product__info-wrapper .trustpilot-widget{
max-width: 240px !important;
margin: 0 0 6px 0 !important;
text-align: left !important;
margin-left: -16px !important;
}
/* Scale it down */
.product__info-wrapper .trustpilot-widget iframe{
display: block !important;
border: 0 !important;
/* Shrink visually */
transform: scale(1.25) !important;
transform-origin: left top !important;
/* IMPORTANT: keep enough height so it doesn't crop */
height: 64px !important; /* leave as the template height */
}
.tsl-pack__btn { cursor: pointer; }
.tsl-pack__btn:hover { border-color: #000; }
.tsl-pack__btn.is-active { background:#000; color:#fff; border-color:#000; }
/* Hide Kaching "Multi-Pack" title */
.kaching-bundles__block-title {
display: none !important;
}
/* =========================================================
Kaching: force 3 true table cells via absolute positioning
(most reliable with Kaching’s nested markup)
========================================================= */
/* Hide "Multi-Pack" title */
.kaching-bundles__block-title{ display:none !important; }
/* Make bars touch */
.kaching-bundles__bars{ gap:0 !important; }
/* Row container becomes a table row */
.kaching-bundles__bar-container{
position: relative !important;
display: block !important;
border: 1px solid #000 !important;
border-top: 0 !important;
border-radius: 0 !important;
background: #f3f3f3 !important;
padding: 0 !important;
min-height: 86px !important; /* tweak */
}
/* Top border for first row */
.kaching-bundles__bars > .kaching-bundles__bar:first-child .kaching-bundles__bar-container{
border-top: 1px solid #000 !important;
}
/* Vertical dividers at 1/3 and 2/3 */
.kaching-bundles__bar-container::before,
.kaching-bundles__bar-container::after{
content:"" !important;
position:absolute !important;
top:0 !important;
bottom:0 !important;
width:1px !important;
background:#000 !important;
pointer-events:none !important;
}
.kaching-bundles__bar-container::before{ left:33.333% !important; }
.kaching-bundles__bar-container::after{ left:66.666% !important; }
/* Flatten spacing + hide radio */
.kaching-bundles__bar-radio{ display:none !important; }
.kaching-bundles__bar-main{ padding:0 !important; }
.kaching-bundles__bar-wrapper{ padding:0 !important; }
/* --- Place each text into its “cell” --- */
/* LEFT cell: title */
.kaching-bundles__bar-title{
position:absolute !important;
left:0 !important;
top:50% !important;
transform: translateY(-50%) !important;
width:33.333% !important;
padding: 0 16px !important;
margin:0 !important;
font-size: 18px !important;
font-weight: 400 !important;
line-height: 1.1 !important;
}
/* MIDDLE cell: subtitle */
.kaching-bundles__bar-subtitle{
position:absolute !important;
left:33.333% !important;
top:50% !important;
transform: translateY(-50%) !important;
width:33.333% !important;
padding: 0 12px !important;
margin:0 !important;
text-align:center !important;
font-size: 18px !important;
font-weight: 400 !important;
line-height: 1.1 !important;
}
/* RIGHT cell: price */
.kaching-bundles__bar-price{
position:absolute !important;
left:66.666% !important;
top:50% !important;
transform: translateY(-50%) !important;
width:33.333% !important;
padding: 0 16px !important;
margin:0 !important;
text-align:right !important;
font-size: 18px !important;
font-weight: 500 !important;
line-height: 1.1 !important;
}
/* Hide compare-at (your mock doesn’t show it) */
.kaching-bundles__bar-full-price{ display:none !important; }
/* Keep Kaching internal blocks from adding extra height */
.kaching-bundles__bar-content,
.kaching-bundles__bar-pricing,
.kaching-bundles__bar-content-left,
.kaching-bundles__bar-first-line,
.kaching-bundles__bar-second-line{
position: static !important;
padding: 0 !important;
margin: 0 !important;
}
/* Selected row styling */
.kaching-bundles__bar--selected .kaching-bundles__bar-container{
background:#3f8ff5 !important;
}
.kaching-bundles__bar--selected .kaching-bundles__bar-container *{
color:#fff !important;
}
/* Most popular badge stays top-right */
.kaching-bundles__bar-container--most-popular{ position:relative !important; }
.kaching-bundles__bar-most-popular{ top:6px !important; right:6px !important; border-radius:0 !important; }
/* =========================================================
Subscription row: don’t use 3-col positioning
========================================================= */
.kaching-bundles__subscriptions__card.kaching-bundles__bar-container{
min-height: 86px !important;
background:#000 !important;
}
.kaching-bundles__subscriptions__card.kaching-bundles__bar-container::before,
.kaching-bundles__subscriptions__card.kaching-bundles__bar-container::after{
content:none !important;
}
/* Put subscription text back to normal flow */
.kaching-bundles__subscriptions__title,
.kaching-bundles__subscriptions__subtitle{
position: static !important;
transform: none !important;
width: auto !important;
padding: 0 !important;
text-align: left !important;
}
.kaching-bundles__subscriptions__card *{ color:#fff !important; }
/* Remove vertical gaps between bundle rows */
.kaching-bundles__bars { gap: 0 !important; }
.kaching-bundles__bar { margin: 0 !important; }
.kaching-bundles__bar-container { margin: 0 !important; }
/* If you still see gaps, it’s usually padding on the wrapper */
.kaching-bundles__bar-wrapper,
.kaching-bundles__bar-main {
padding: 0 !important;
margin: 0 !important;
}
.kaching-bundles__subscriptions__card.kaching-bundles__bar-container{
position: relative !important;
padding: 14px 16px 14px 24px !important; /* left padding for checkbox */
}
/* Ensure the bar label is the positioning context */
.kaching-bundles__bar-container--most-popular{
position: relative !important;
overflow: hidden !important;
}
/* The badge box */
.kaching-bundles__bar-most-popular.kaching-bundles__bar-most-popular--simple{
position: absolute !important;
top: 0 !important;
right: 0 !important;
left: auto !important;
bottom: auto !important;
background: #000 !important;
color: #fff !important;
border-radius: 0 !important;
padding: 0px 0px !important;
line-height: 1 !important;
z-index: 5 !important;
transform: none !important;
}
/* Text inside */
.kaching-bundles__bar-most-popular__content{
font-size: 12px !important;
font-weight: 700 !important;
letter-spacing: 0.6px !important;
text-transform: uppercase !important;
color: #fff !important;
white-space: nowrap !important;
}
/* Optional: add a tiny inset border like the mock */
.kaching-bundles__bar-most-popular.kaching-bundles__bar-most-popular--simple{
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15) !important;
}
.kaching-bundles__bar-container--most-popular{
position: relative !important;
}
/* MOST POPULAR – top-left of PRICE column */
.kaching-bundles__bar-most-popular.kaching-bundles__bar-most-popular--simple{
left: 66.666% !important; /* start of price column */
right: auto !important;
top: 0 !important;
transform: none !important;
}
/* ===== Resize the bundle “table” rows ===== */
/* Row height */
.kaching-bundles .kaching-bundles__bar-container{
min-height: 48px !important; /* change this number */
}
/* Text sizing (these control how tall it feels) */
.kaching-bundles .kaching-bundles__bar-title,
.kaching-bundles .kaching-bundles__bar-subtitle,
.kaching-bundles .kaching-bundles__bar-price{
font-size: 16px !important; /* change this number */
line-height: 1.05 !important;
padding: 0 12px !important; /* left/right padding inside cells */
}
/* If the row still looks tall, the vertical padding is effectively your TOP value */
.kaching-bundles .kaching-bundles__bar-title,
.kaching-bundles .kaching-bundles__bar-subtitle,
.kaching-bundles .kaching-bundles__bar-price{
top: 50% !important; /* keep centered */
transform: translateY(-50%) !important;
}
/* =================================================
Subscription checkbox: show checked state
================================================= */
/* default square (you already have similar) */
.kaching-bundles .kaching-bundles__subscriptions__checkbox{
background: transparent !important;
}
/* When subscription is selected, fill the square */
.kaching-bundles .kaching-bundles__subscriptions__card.kaching-bundles__bar-container.kaching-bundles__bar-container--selected
.kaching-bundles__subscriptions__checkbox,
.kaching-bundles .kaching-bundles__subscriptions__card.kaching-bundles__bar-container.kaching-bundles__bar-container--active
.kaching-bundles__subscriptions__checkbox,
.kaching-bundles .kaching-bundles__subscriptions__card.kaching-bundles__bar-container[aria-checked="true"]
.kaching-bundles__subscriptions__checkbox{
background: #fff !important; /* “checked” fill */
}
/* Optional: add a check mark */
.kaching-bundles .kaching-bundles__subscriptions__card.kaching-bundles__bar-container.kaching-bundles__bar-container--selected
.kaching-bundles__subscriptions__checkbox::after,
.kaching-bundles .kaching-bundles__subscriptions__card.kaching-bundles__bar-container.kaching-bundles__bar-container--active
.kaching-bundles__subscriptions__checkbox::after,
.kaching-bundles .kaching-bundles__subscriptions__card.kaching-bundles__bar-container[aria-checked="true"]
.kaching-bundles__subscriptions__checkbox::after{
content: "" !important;
position: absolute !important;
left: 5px !important;
top: 2px !important;
width: 6px !important;
height: 10px !important;
border-right: 2px solid #000 !important;
border-bottom: 2px solid #000 !important;
transform: rotate(45deg) !important;
}
/* Remove ALL padding from MOST POPULAR badge */
.kaching-bundles__bar-most-popular,
.kaching-bundles__bar-most-popular__content{
margin: 0 !important;
line-height: 1 !important;
}
/* =========================================
REMOVE blue tint / halo behind borders
========================================= */
/* Kill any box-shadow / outline Kaching adds */
.kaching-bundles__bar-container,
.kaching-bundles__bar,
.kaching-bundles__bar-container *,
.kaching-bundles__subscriptions__card{
box-shadow: none !important;
outline: none !important;
}
/* Force pure black borders everywhere */
.kaching-bundles__bar-container{
border-color: #000 !important;
}
/* Force pure black column dividers */
.kaching-bundles__bar-container::before,
.kaching-bundles__bar-container::after{
background: #000 !important;
}
/* Remove hover / focus visual effects */
.kaching-bundles__bar:hover .kaching-bundles__bar-container,
.kaching-bundles__bar:focus .kaching-bundles__bar-container,
.kaching-bundles__bar:focus-visible .kaching-bundles__bar-container{
box-shadow: none !important;
outline: none !important;
}
/* Remove any residual background bleed */
.kaching-bundles__bar{
background: transparent !important;
}
/* MAIN PRODUCT: stop right column overflow regardless of section id */
product-info .product > .product__media-wrapper,
product-info .product > .product__info-wrapper,
product-info .product__info-container {
min-width: 0 !important;
}
/* Ensure the right column can actually shrink */
product-info .product > .product__info-wrapper {
flex: 1 1 0% !important;
}
/* Kaching (common overflow source): force it to respect container width */
product-info kaching-bundle,
product-info .kaching-bundles,
product-info .kaching-bundles__block,
product-info .kaching-bundles__bars,
product-info .kaching-bundles__bar-container {
max-width: 100% !important;
width: 100% !important;
box-sizing: border-box !important;
}
/* If any inner row is causing horizontal overflow, contain it */
product-info .kaching-bundles__block {
overflow-x: hidden !important;
}
/* Gap between announcement banner (above) and this slideshow section */
#shopify-section-template--26872769479002__slideshow_WWizgw{
margin-top: 48px !important;
}
/* Add bottom padding to this FAQ section */
#shopify-section-template--26872769479002__176721194612d19788{
padding-bottom: 64px !important;
}
/* ===============================
TRUSTPILOT SECTION STYLING
=============================== */
/* Blue background container */
#shopify-section-template--26872769479002__custom_liquid_Hm7qm7
.section {
background: #0b5cff; /* adjust blue if needed */
}
/* Center + spacing */
#shopify-section-template--26872769479002__custom_liquid_Hm7qm7
.trustpilot-widget {
max-width: 1600px;
margin: 0 auto;
padding: 40px 40px 56px;
}
/* Square edges – iframe wrapper */
#shopify-section-template--26872769479002__custom_liquid_Hm7qm7
.trustpilot-widget iframe {
border-radius: 0 !important;
background: transparent;
}
/* Extra breathing room under cards before Trustpilot text */
#shopify-section-template--26872769479002__custom_liquid_Hm7qm7
.trustpilot-widget iframe {
margin-bottom: 24px;
}
/* Remove any inherited rounding from theme */
#shopify-section-template--26872769479002__custom_liquid_Hm7qm7
* {
border-radius: 0 !important;
}
/* Shop By Brands - show only first 8 items on mobile */
@media (max-width: 767px){
#shopify-section-template--26872769479002__collection_list_Azm9te
.collection-list__items > .f-column:nth-child(n+9){
display: none !important;
}
}
@media (max-width: 767px){
.section-template--26872769479002__custom_content_HPgFTK .custom-content__grid2{
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 12px !important;
}
.section-template--26872769479002__custom_content_HPgFTK .custom-content__grid2 > .f-column{
width: auto !important;
max-width: none !important;
flex: initial !important;
}
}
/* Hide the label text under each icon (this section only) */
#shopify-section-template--26872769479002__collection_list_slider_6qbNfj
.collection-card__inner,
#shopify-section-template--26872769479002__collection_list_slider_6qbNfj
.collection-card__title {
display: none !important;
}
/* Optional: remove the extra gap that was reserved for the title */
#shopify-section-template--26872769479002__collection_list_slider_6qbNfj
.collection-card__wrapper {
gap: 0 !important;
}
/* Hide the label text under each icon (this section only) */
.section-template--27417651380570__collection_list_XW3hTd .collection-card__inner,
.section-template--27417651380570__collection_list_XW3hTd .collection-card__title{
display: none !important;
}
/* Optional: remove the gap reserved for the title */
.section-template--27417651380570__collection_list_XW3hTd .collection-card__wrapper{
gap: 0 !important;
}
/* Image card with product - mobile/tablet text scaling */
@media (max-width: 989px) {
/* Heading (KILLA / PABLO / etc) */
#shopify-section-template--26872769479002__custom_content_HPgFTK
.pr-img-card__contents-heading{
font-size: clamp(22px, 7vw, 34px) !important;
line-height: 0.9 !important;
}
/* "From £x.xx" subheading */
#shopify-section-template--26872769479002__custom_content_HPgFTK
.pr-img-card__contents-header .rich-text__subheading{
font-size: clamp(12px, 3.6vw, 16px) !important;
line-height: 1.1 !important;
}
}
@media (max-width: 1024px) {
/* === GRID (keep your 2-col) === */
#shopify-section-template--26872769479002__most_wanted_btitc9 .most-wanted__strip,
#shopify-section-template--26872769479002__most_wanted_btitc9 .most-wanted__strip.swiper-wrapper{
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 12px !important;
width: 100% !important;
align-items: stretch !important;
}
#shopify-section-template--26872769479002__most_wanted_btitc9 .most-wanted__item{
width: auto !important;
max-width: none !important;
flex: none !important;
min-width: 0 !important;
height: 100% !important;
}
/* === FEATURE CARD: make the first one span both columns (big “main” card) === */
#shopify-section-template--26872769479002__most_wanted_btitc9 .most-wanted__item:first-child{
grid-column: 1 / -1 !important; /* spans 2 columns */
}
/* Make the featured card feel taller (optional) */
#shopify-section-template--26872769479002__most_wanted_btitc9 .most-wanted__item:first-child .most-wanted__circle img{
max-width: 78% !important;
}
/* === SCALE DOWN TEXT ON MOBILE/TABLET === */
#shopify-section-template--26872769479002__most_wanted_btitc9 .most-wanted__buy{
font-size: 14px !important;
line-height: 1.05 !important;
letter-spacing: 0.02em !important;
padding: 10px 10px !important;
}
#shopify-section-template--26872769479002__most_wanted_btitc9 .most-wanted__price{
font-size: 14px !important;
line-height: 1 !important;
padding: 10px 10px !important;
}
/* === FIX “BOTTOM LINE OFF” / BORDER ALIGNMENT ===
(forces the bar + its children to match widths and removes overflow gaps)
*/
#shopify-section-template--26872769479002__most_wanted_btitc9 .most-wanted__bar{
display: grid !important;
grid-template-columns: 1fr 1fr !important; /* buy + price halves */
width: 100% !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
#shopify-section-template--26872769479002__most_wanted_btitc9 .most-wanted__bar > *{
box-sizing: border-box !important;
width: 100% !important;
min-width: 0 !important;
}
/* If a thin border is showing misaligned, this usually fixes it */
#shopify-section-template--26872769479002__most_wanted_btitc9 .most-wanted__item{
overflow: hidden !important;
}
}
@media (max-width: 1024px) {
/* Put the bottom line on the BAR (one line), not on the two halves */
#shopify-section-template--26872769479002__most_wanted_btitc9 .most-wanted__bar{
border-bottom: 1px solid rgba(255,255,255,.25) !important;
}
/* Remove any borders/shadows that might be on the halves */
#shopify-section-template--26872769479002__most_wanted_btitc9 .most-wanted__buy,
#shopify-section-template--26872769479002__most_wanted_btitc9 .most-wanted__price{
border-bottom: 0 !important;
box-shadow: none !important;
}
/* Ensure both halves are exactly the same height so nothing misaligns */
#shopify-section-template--26872769479002__most_wanted_btitc9 .most-wanted__buy,
#shopify-section-template--26872769479002__most_wanted_btitc9 .most-wanted__price{
display: flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 56px !important; /* tweak if you want */
}
}
@media (max-width: 1024px) {
#shopify-section-template--26872769479002__most_wanted_btitc9 .most-wanted__bar,
#shopify-section-template--26872769479002__most_wanted_btitc9 .most-wanted__buy,
#shopify-section-template--26872769479002__most_wanted_btitc9 .most-wanted__price{
box-shadow: none !important;
background-image: none !important;
}
/* remove any “decorative line” pseudo elements */
#shopify-section-template--26872769479002__most_wanted_btitc9 .most-wanted__bar::before,
#shopify-section-template--26872769479002__most_wanted_btitc9 .most-wanted__bar::after,
#shopify-section-template--26872769479002__most_wanted_btitc9 .most-wanted__buy::before,
#shopify-section-template--26872769479002__most_wanted_btitc9 .most-wanted__buy::after,
#shopify-section-template--26872769479002__most_wanted_btitc9 .most-wanted__price::before,
#shopify-section-template--26872769479002__most_wanted_btitc9 .most-wanted__price::after{
content: none !important;
display: none !important;
}
/* keep only the single clean divider you want */
#shopify-section-template--26872769479002__most_wanted_btitc9 .most-wanted__bar{
border-bottom: 1px solid rgba(255,255,255,.25) !important;
}
}
@media (max-width: 1024px) {
/* Scope to this section only */
#shopify-section-template--26872769479002__most_wanted_btitc9 .most-wanted__strip,
#shopify-section-template--26872769479002__most_wanted_btitc9 .most-wanted__strip *{
background-image: none !important;
box-shadow: none !important;
border-image: none !important;
}
/* Kill ALL decorative pseudo-lines inside the strip */
#shopify-section-template--26872769479002__most_wanted_btitc9 .most-wanted__strip *::before,
#shopify-section-template--26872769479002__most_wanted_btitc9 .most-wanted__strip *::after{
content: none !important;
display: none !important;
}
/* Also kill any stray
if the theme uses it */
#shopify-section-template--26872769479002__most_wanted_btitc9 .most-wanted__strip hr{
display: none !important;
}
/* Re-apply the ONE divider you want (full width under the bar) */
#shopify-section-template--26872769479002__most_wanted_btitc9 .most-wanted__bar{
border-bottom: 1px solid rgba(255,255,255,.25) !important;
}
/* Prevent double dividers from children */
#shopify-section-template--26872769479002__most_wanted_btitc9 .most-wanted__buy,
#shopify-section-template--26872769479002__most_wanted_btitc9 .most-wanted__price{
border: 0 !important;
}
}
@media (max-width: 1024px) {
/* Remove gaps between cards */
#shopify-section-template--26872769479002__most_wanted_btitc9 .most-wanted__strip{
gap: 0 !important;
row-gap: 0 !important;
column-gap: 0 !important;
}
/* If flex-based */
#shopify-section-template--26872769479002__most_wanted_btitc9 .most-wanted__item{
margin: 0 !important;
}
/* Remove any internal spacing that can create fake dividers */
#shopify-section-template--26872769479002__most_wanted_btitc9 .most-wanted__bar{
margin-top: 0 !important;
}
}
@media (max-width: 1024px) {
/* First (featured) card */
#shopify-section-template--26872769479002__most_wanted_btitc9
.most-wanted__item:first-child{
grid-column: span 2;
}
/* Make the image fill the larger card */
#shopify-section-template--26872769479002__most_wanted_btitc9
.most-wanted__item:first-child .most-wanted__circle{
width: 100%;
max-width: none;
display: flex;
justify-content: center;
}
#shopify-section-template--26872769479002__most_wanted_btitc9
.most-wanted__item:first-child .most-wanted__circle img{
width: 75%; /* ← adjust this if you want bigger/smaller */
max-width: 260px; /* keeps it sane on small phones */
height: auto;
}
}
/* Bundle Options Grid: mobile/tablet = 1 big hero + 2x3 products */
@media (max-width: 989px){
/* overall layout becomes 2 columns */
#BundleOptionsGrid-template--26872769479002__bundle_options_grid_BryDG6 .bundle-options-grid__layout{
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 0 !important;
align-items: stretch !important;
}
/* hero panel spans both columns */
#BundleOptionsGrid-template--26872769479002__bundle_options_grid_BryDG6 .bundle-options-grid__left{
grid-column: 1 / -1 !important;
aspect-ratio: 16 / 9 !important; /* change if you want taller/shorter */
min-height: 0 !important;
}
/* product grid also spans both columns and becomes 2 cols */
#BundleOptionsGrid-template--26872769479002__bundle_options_grid_BryDG6 .bundle-options-grid__grid{
grid-column: 1 / -1 !important;
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 0 !important;
}
/* ensure tiles fill cleanly */
#BundleOptionsGrid-template--26872769479002__bundle_options_grid_BryDG6 .bundle-options-grid__tile{
width: 100% !important;
aspect-ratio: 1 / 1 !important;
}
/* scale down text a bit on smaller screens */
#BundleOptionsGrid-template--26872769479002__bundle_options_grid_BryDG6{
--bog-title-size: 14px;
--bog-btn-size: 12px;
}
/* avoid long names blowing up spacing */
#BundleOptionsGrid-template--26872769479002__bundle_options_grid_BryDG6 .bundle-options-grid__name{
font-size: var(--bog-title-size) !important;
line-height: 1.15 !important;
}
#BundleOptionsGrid-template--26872769479002__bundle_options_grid_BryDG6 .bundle-options-grid__price{
font-size: calc(var(--bog-btn-size) + 4px) !important;
}
}
/* Bundle Options Grid: mobile/tablet = 1 big hero + 2x3 products */
@media (max-width: 989px){
/* overall layout becomes 2 columns */
#BundleOptionsGrid-template--26872769479002__bundle_options_grid_BryDG6 .bundle-options-grid__layout{
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 0 !important;
align-items: stretch !important;
}
/* hero panel spans both columns */
#BundleOptionsGrid-template--26872769479002__bundle_options_grid_BryDG6 .bundle-options-grid__left{
grid-column: 1 / -1 !important;
aspect-ratio: 1 / 1 !important; /* change if you want taller/shorter */
min-height: 0 !important;
}
/* product grid also spans both columns and becomes 2 cols */
#BundleOptionsGrid-template--26872769479002__bundle_options_grid_BryDG6 .bundle-options-grid__grid{
grid-column: 1 / -1 !important;
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 0 !important;
}
/* ensure tiles fill cleanly */
#BundleOptionsGrid-template--26872769479002__bundle_options_grid_BryDG6 .bundle-options-grid__tile{
width: 100% !important;
aspect-ratio: 1 / 1 !important;
}
/* scale down text a bit on smaller screens */
#BundleOptionsGrid-template--26872769479002__bundle_options_grid_BryDG6{
--bog-title-size: 14px;
--bog-btn-size: 12px;
}
/* avoid long names blowing up spacing */
#BundleOptionsGrid-template--26872769479002__bundle_options_grid_BryDG6 .bundle-options-grid__name{
font-size: var(--bog-title-size) !important;
line-height: 1.15 !important;
}
#BundleOptionsGrid-template--26872769479002__bundle_options_grid_BryDG6 .bundle-options-grid__price{
font-size: calc(var(--bog-btn-size) + 4px) !important;
}
}
@media (max-width: 989px){
#SubscribeSaveSplit-template--26872769479002__subscribe_save_split_EwVeaN
.sss__cta{
margin-top: 32px;
}
}
/* Footer – remove blue dots on mobile */
@media (max-width: 989px){
.tnl-footer__dots{
display: none !important;
}
}
#MostWanted-{{ section.id }} .most-wanted__atc-form{
margin: 0;
width: 100%;
}
#MostWanted-{{ section.id }} .most-wanted__atc-form .most-wanted__buy{
width: 100%;
border: 0;
cursor: pointer;
appearance: none;
}
@media (min-width: 990px){
.tnl-footer__panel--top .tnl-footer__topgrid{
grid-template-columns: 1fr 1.075fr 1fr !important;
}
}
/* Make CTA area stretch AND force form/button to fill it */
.tsl-pcard__cta{
position: absolute;
inset: 0;
display: flex !important; /* was grid */
opacity: 0;
transform: translateY(8px);
transition: opacity .18s ease, transform .18s ease;
z-index: 5;
pointer-events: none;
}
.tsl-pcard__cta form{
flex: 1 1 auto !important;
width: 100%;
height: 100%;
margin: 0 !important;
display: flex !important;
}
.tsl-pcard__cta .most-wanted__buy{
flex: 1 1 auto !important;
width: 100%;
height: 100% !important;
margin: 0 !important;
padding: 0 !important; /* kill theme padding that can cause “stripe” look */
display: flex !important;
align-items: center;
justify-content: center;
}
.tsl-pcard__bottom{ padding: 0 !important; }
.tsl-pcard__bottom{
flex: 1 1 auto; /* key: eats the leftover space so there’s no blank gap */
}
.tsl-pcard__media{ flex: 0 0 auto; }
.product__media-wrapper {
position: relative;
}
.tsl-stats-overlay {
position: absolute;
top: 12px;
left: 12px;
width: 256px;
z-index: 5;
pointer-events: none;
}
@media (max-width: 749px) {
.tsl-stats-overlay {
top: 10px;
left: 10px;
width: 256px;
}
}
/* Sticky ATC bar — MOBILE ONLY bottom padding */
@media (max-width: 767px){
sticky-atc-bar-minimalist{
display: flex; /* override display: contents */
padding-bottom: 36px !important;
box-sizing: border-box;
}
}
/* Chatty (Avada FAQ Popup) — force SHARP corners everywhere */
#Avada_Faq_Popup-Container,
#Avada_Faq_Popup-Container * {
border-radius: 0 !important;
}
/* 1) Thin white border around the whole widget */
#Avada_Faq_Popup-Container .Avada-Faqs_Popup {
border: 1px solid rgba(0, 0, 0, 0.35) !important;
box-sizing: border-box;
}
/* Material UI specifics (cards/papers/buttons/inputs) */
#Avada_Faq_Popup-Container .MuiPaper-root,
#Avada_Faq_Popup-Container .MuiPaper-rounded,
#Avada_Faq_Popup-Container .MuiCard-root,
#Avada_Faq_Popup-Container .MuiButton-root,
#Avada_Faq_Popup-Container .MuiIconButton-root,
#Avada_Faq_Popup-Container .MuiInputBase-root,
#Avada_Faq_Popup-Container .MuiOutlinedInput-root,
#Avada_Faq_Popup-Container .MuiOutlinedInput-notchedOutline,
#Avada_Faq_Popup-Container fieldset {
border-radius: 0 !important;
}
#Avada_Faq_Popup-Container .MuiPaper-root,
#Avada_Faq_Popup-Container .MuiCard-root,
#Avada_Faq_Popup-Container .Avada-Faqs_Body,
#Avada_Faq_Popup-Container .Avada-Faqs_SectionPrimary,
#Avada_Faq_Popup-Container .Avada-Faqs_Footer-Container {
border: 1px solid rgba(0, 0, 0, 0.22) !important;
box-sizing: border-box;
}
#Avada_Faq_Popup-Container .Avada-List-Item {
border: 1px solid rgba(0, 0, 0, 0.14) !important;
border-radius: 0 !important;
}
/* 1) Thin white border around the whole widget */
#Avada_Faq_Popup-Container .Avada-Faqs_Popup {
border: 1px solid rgba(0, 0, 0, 0.35) !important;
box-sizing: border-box;
}
/* 2) Thin white border around all the “blocks” inside (cards/sections/footer) */
#Avada_Faq_Popup-Container .MuiPaper-root,
#Avada_Faq_Popup-Container .MuiCard-root,
#Avada_Faq_Popup-Container .Avada-Faqs_Body,
#Avada_Faq_Popup-Container .Avada-Faqs_SectionPrimary,
#Avada_Faq_Popup-Container .Avada-Faqs_Footer-Container {
border: 1px solid rgba(0, 0, 0, 0.22) !important;
box-sizing: border-box;
}
/* 3) Search input + its outline */
#Avada_Faq_Popup-Container .MuiInputBase-root,
#Avada_Faq_Popup-Container .MuiOutlinedInput-root,
#Avada_Faq_Popup-Container .MuiOutlinedInput-notchedOutline,
#Avada_Faq_Popup-Container fieldset {
border-radius: 0 !important;
border-color: rgba(0, 0, 0, 0.22) !important;
}
/* 4) List rows (FAQ items) */
#Avada_Faq_Popup-Container .Avada-List-Item {
border: 1px solid rgba(255,255,255,.14) !important;
border-radius: 0 !important;
}
/* 6) Launcher button (outside the main container in many installs) */
.Avada-Faqs_Button-Launcher .Avada-Launcher__ButtonCustom {
border-radius: 0 !important;
border: 1px solid rgba(0, 0, 0, 0.35) !important;
box-sizing: border-box;
}
/* 7) Close button (your SVG uses a ; replace with squared wrapper) */
.Avada-Faqs_Button-Close {
border-radius: 0 !important;
border: 1px solid rgba(0, 0, 0, 0.35) !important;
background: #2F2F31 !important;
box-sizing: border-box;
overflow: hidden !important; /* keeps it square */
}
/* Any chips/badges/overlays that might be circular */
#Avada_Faq_Popup-Container [class*="Circle"],
#Avada_Faq_Popup-Container [class*="circle"],
#Avada_Faq_Popup-Container [class*="rounded"] {
border-radius: 0 !important;
}
/* SVG rounded rectangles (your email button uses ) */
#Avada_Faq_Popup-Container svg rect {
rx: 0 !important;
ry: 0 !important;
}
/* Square ALL Chatty / Avada buttons (including close) */
#Avada_Faq_Popup-Container button,
#Avada_Faq_Popup-Container .MuiButton-root,
#Avada_Faq_Popup-Container .MuiIconButton-root,
#Avada_Faq_Popup-Container .Avada-Faqs_Primary-Button,
#Avada_Faq_Popup-Container .Avada-Faqs_Button-Item,
.Avada-Faqs_Button-Launcher .Avada-Launcher__ButtonCustom,
.Avada-Faqs_Button-Close {
border-radius: 0 !important;
}
/* Close button SVG is circular — remove the circle */
.Avada-Faqs_Button-Close svg circle {
display: none !important;
}
/* Close button wrapper — make it a rounded square */
.Avada-Faqs_Button-Close {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
background: #2F2F31; /* visible background */
border: 1px solid #fff; /* thin white border */
box-sizing: border-box;
}
/* Move the whole Chatty floating button left */
.Avada-Faqs_Button.bottom.right {
right: 22px !important;
}
/* Remove the circular SVG background */
.Avada-Faqs_Button-Close svg circle {
display: none !important;
}
/* Make the Chatty close button blue */
.Avada-Faqs_Button-Close svg circle {
fill: #1e6cff !important; /* blue */
}
/* Optional: keep the icon white */
.Avada-Faqs_Button-Close svg path {
fill: #ffffff !important;
}
/* Hide Account button in menu drawer */
.menu-drawer a.account-button {
display: none !important;
}
/* Sticky product media (desktop only) */
@media (min-width: 990px) {
/* Make the two columns act like one row and share the same height */
.product.product--large {
flex-wrap: nowrap; /* prevents columns stacking */
align-items: stretch; /* IMPORTANT: left column matches right column height */
}
.product.product--large .product__media-wrapper,
.product.product--large .product__info-wrapper {
align-self: stretch;
}
/* Sticky the media container inside the stretched left column */
.product.product--large .product__media-wrapper .product__media-container.sticky-element {
position: sticky;
top: calc(var(--header-height, 0px) + 16px); /* adjust offset */
}
/* Sticky won't work if any ancestor has overflow not visible */
.product.product--large,
.product.product--large .product__media-wrapper,
.product.product--large .product__media-container,
.product.product--large .product__info-wrapper {
overflow: visible !important;
}
}
/* Slideshow: remove/reduce bottom padding on tablet+mobile */
@media (max-width: 768px) {
/* if the padding is coming from the section wrapper */
#shopify-section-template--26872769479002__slideshow_q3U4Jn,
#shopify-section-template--26872769479002__slideshow_q3U4Jn .section,
#shopify-section-template--26872769479002__slideshow_q3U4Jn .section--padding {
padding-bottom: 0 !important;
}
/* if the padding/margin is on the slideshow itself */
#shopify-section-template--26872769479002__slideshow_q3U4Jn slideshow-component,
#shopify-section-template--26872769479002__slideshow_q3U4Jn .slideshow-wrapper {
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
}
/* Bundle Options Grid (NEW SECTION): mobile/tablet = hero spans full + 2-col products */
@media (max-width: 989px){
/* overall layout becomes grid */
#BundleOptionsGrid-template--26872769937754__bundle_options_grid_MTxJHP .bundle-options-grid__layout{
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 0 !important;
align-items: stretch !important;
}
/* hero spans both columns */
#BundleOptionsGrid-template--26872769937754__bundle_options_grid_MTxJHP .bundle-options-grid__left{
grid-column: 1 / -1 !important;
aspect-ratio: 1 / 1 !important; /* change if you want */
min-height: 0 !important;
}
/* product grid spans both columns and is 2 cols */
#BundleOptionsGrid-template--26872769937754__bundle_options_grid_MTxJHP .bundle-options-grid__grid{
grid-column: 1 / -1 !important;
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 0 !important;
}
/* tiles fill cleanly */
#BundleOptionsGrid-template--26872769937754__bundle_options_grid_MTxJHP .bundle-options-grid__tile{
width: 100% !important;
aspect-ratio: 1 / 1 !important;
}
/* scale down type a bit */
#BundleOptionsGrid-template--26872769937754__bundle_options_grid_MTxJHP{
--bog-title-size: 14px;
--bog-btn-size: 12px;
}
#BundleOptionsGrid-template--26872769937754__bundle_options_grid_MTxJHP .bundle-options-grid__name{
font-size: var(--bog-title-size) !important;
line-height: 1.15 !important;
}
#BundleOptionsGrid-template--26872769937754__bundle_options_grid_MTxJHP .bundle-options-grid__price{
font-size: calc(var(--bog-btn-size) + 4px) !important;
}
}
/* Slideshow: responsive top margin */
#shopify-section-template--26872769479002__slideshow_WWizgw{
margin-top: clamp(24px, 5vw, 48px) !important;
}
#shopify-section-template--26872769479002__rich_text_eLh3jx
.rich-text__text p{
font-size: clamp(4px, 3vw, 12px);
}
/* Offset anchor jump for "Read more" target */
#shopify-section-template--27415779279194__rich_text_dgPtDV{
scroll-margin-top: 256px; /* adjust this value */
}
/* Nudge this collection list slider 12px to the right */
.section-template--26872769479002__collection_list_slider_6qbNfj .section__container{
position: relative;
left: -8px;
}
/* Force product title to top-left of card */
#SimilarProducts-{{ section.id }} .similar-products__item{
position: relative;
padding-top: 56px; /* space reserved for title */
}
#SimilarProducts-{{ section.id }} .similar-products__name{
position: absolute;
top: 12px;
left: 12px;
right: auto;
max-width: calc(100% - 24px);
margin: 0;
padding: 0;
text-align: left !important;
font-family: var(--font-heading-family);
font-weight: 900;
font-size: 18px !important; /* NOTICEABLY bigger */
line-height: 1.15;
letter-spacing: .06em;
text-transform: uppercase;
color: #fff;
white-space: normal;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
z-index: 3;
}
/* Hide Subscribe & Save option only */
.shopify_subscriptions_app_block_label:has(input[data-radio-type="selling_plan_group"]) {
display: none !important;
}
/* Hide subscription policy text */
.shopify_subscriptions_app_policy,
#subscription-i18n {
display: none !important;
}
/* Hide entire Shopify Subscriptions app block */
.shopify-app-block .shopify_subscriptions_app_block_container,
#shopify-block-AaGVKRE9hK0ZLWWt0K__1768834845299682660 {
display: none !important;
}
/* Cart drawer: slightly wider on non-mobile */
@media (min-width: 768px) {
cart-drawer#CartDrawer > .drawer__inner {
width:520px !important;
max-width: 520px !important;
}
}
/* Fix Code Black Belt currency converter breaking Kaching Bundles "You save" alignment */
.kaching-bundles .kaching-bundles__bar-content {
display: grid !important;
grid-template-columns: 1fr 1fr 1fr !important;
align-items: center !important;
column-gap: 12px;
width: 100%;
}
/* Let the title + subtitle participate as grid items */
.kaching-bundles .kaching-bundles__bar-content-left {
display: contents !important;
}
/* Left column: pack title */
.kaching-bundles .kaching-bundles__bar-first-line {
grid-column: 1 / 2 !important;
justify-self: start !important;
}
/* Middle column: "You save ..." (works for both native and CBB-injected markup) */
.kaching-bundles .kaching-bundles__bar-second-line {
grid-column: 2 / 3 !important;
justify-self: center !important;
text-align: center !important;
width: 100% !important;
margin: 0 !important;
}
/* If CBB injected wrapper exists, keep it centered and non-wrapping */
.kaching-bundles .kaching-bundles__bar-second-line .currency-converter-wrapper-amount-box {
display: inline-flex !important;
justify-content: center !important;
align-items: center !important;
width: 100% !important;
white-space: nowrap !important;
float: none !important;
}
/* Right column: price */
.kaching-bundles .kaching-bundles__bar-pricing {
grid-column: 3 / 4 !important;
justify-self: end !important;
text-align: right !important;
}
.kaching-bundles
.currency-converter-wrapper-amount-box > span:first-child::after {
content: "";
display: inline-block;
width: 0px; /* adjust */
}
/* RESET text colour for NON-selected bundle rows */
.kaching-bundles .kaching-bundles__bar:not(.kaching-bundles__bar--selected) {
color: #000 !important;
}
/* Specifically reset inner text (important for injected currency spans) */
.kaching-bundles
.kaching-bundles__bar:not(.kaching-bundles__bar--selected)
.kaching-bundles__bar-second-line,
.kaching-bundles
.kaching-bundles__bar:not(.kaching-bundles__bar--selected)
.currency-converter-wrapper-amount-box,
.kaching-bundles
.kaching-bundles__bar:not(.kaching-bundles__bar--selected)
.currency-converter-wrapper-amount-box span {
color: #000 !important;
}
/* Remove struck-through CodeBlackBelt converted prices completely */
.currency-converter-wrapper-amount-box s.currency-converter-amount{
display: none !important;
}
/* Hide ONLY the crossed-out converted price (does not affect normal prices) */
.currency-converter-wrapper-amount-box s.currency-converter-amount{
display: none !important;
}
/* Also remove any spacing that wrapper might add when it only contains the */
.currency-converter-wrapper-amount-box:has(s.currency-converter-amount){
display: none !important;
}
/* Center currency converter price inside Similar Products bar */
#SimilarProducts-{{ section.id }} .currency-converter-wrapper-amount-box{
display: flex !important;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
text-align: center;
white-space: nowrap;
}
/* Remove tiny offsets that push it off-centre */
#SimilarProducts-{{ section.id }} .currency-converter-amount,
#SimilarProducts-{{ section.id }} .cbb-price-symbol,
#SimilarProducts-{{ section.id }} .cbb-price-digits{
margin: 0 !important;
padding: 0 !important;
float: none !important;
}
/* MOST WANTED — prevent base price duplication when CBB injects converted price */
#shopify-section-template--26872769479002__most_wanted_btitc9 .most-wanted__barRight{
display: flex;
align-items: center;
justify-content: center;
}
/* Never show the raw Shopify price inside Most Wanted (CBB will render the converted price) */
#shopify-section-template--26872769479002__most_wanted_btitc9 .most-wanted__price{
display: none !important;
}
/* Let CBB control desktop/mobile wrappers; just ensure neat alignment */
#shopify-section-template--26872769479002__most_wanted_btitc9 .currency-converter-wrapper-amount-box{
white-space: nowrap;
margin: 0 !important;
padding: 0 !important;
}
/* If CBB uses desktop/mobile view classes, enforce them correctly */
@media (max-width: 989px){
#shopify-section-template--26872769479002__most_wanted_btitc9 .currency-converter-wrapper-amount-box.cbb-desktop-view{
display: none !important;
}
#shopify-section-template--26872769479002__most_wanted_btitc9 .currency-converter-wrapper-amount-box.cbb-mobile-view{
display: inline-flex !important;
align-items: center;
justify-content: center;
}
}
#shopify-section-template--26872769479002__most_wanted_btitc9
.currency-converter-amount{
font-size: 22px !important;
}
/* Remove the 8px top padding from header bottom */
.header__bottom{
padding-top: 0 !important;
}
/* If it’s coming from the inner section padding */
.header__bottom .section--padding{
padding-top: 0 !important;
}
@media (max-width: 989px){
#MenuDrawer .menu-drawer__social-icons{
margin-bottom: 128px;
}
}
/* =========================================================
GLOBAL: SQUARE BUTTONS (site-wide)
Paste at the VERY BOTTOM of your custom CSS
========================================================= */
/* Try to zero any theme radius variables (safe if unused) */
:root{
--btn-radius: 0px;
--button-radius: 0px;
--buttons-radius: 0px;
--border-radius-button: 0px;
--radius-button: 0px;
--radius: 0px;
}
/* Hard override common button selectors */
button,
.button,
.btn,
a.btn,
a.button,
input[type="button"],
input[type="submit"],
input[type="reset"],
.shopify-payment-button__button,
.shopify-payment-button__more-options,
.product-form__submit,
.cart__checkout-button,
.drawer__footer .button{
border-radius: 0 !important;
}
/* If your theme uses “rounded” utility classes */
.rounded,
.rounded-sm,
.rounded-md,
.rounded-lg,
.rounded-xl,
.rounded-2xl,
[class*="rounded"]{
border-radius: 0 !important;
}
/* CART DRAWER – fix the two real problems:
1) the drawer body is stretching (creates the massive blank space)
2) FoxKit free-shipping sentence is being forced into weird line breaks
3) totals row is being broken into “ESTIMATED / TOTAL” */
#CartDrawer .drawer__body{
padding: 16px 18px 0 !important;
}
/* 1) STOP THE HUGE BLANK GAP (caused by flex-grow stretching the cart body) */
#CartDrawer #CartDrawerBody-sections--26872770134362__cart-drawer{
flex-grow: 0 !important;
}
#CartDrawer cart-items,
#CartDrawer cart-items.flex-grow{
flex-grow: 0 !important;
}
#CartDrawer cart-drawer-products-recommendation{
margin-top: 0 !important;
}
/* 2) FREE SHIPPING GOAL – force a normal inline sentence layout */
#CartDrawer free-shipping-goal.free-shipping-goal{
display: block !important;
padding: 0 0 14px !important;
margin: 0 0 14px !important;
border-bottom: 1px solid rgba(0,0,0,.08) !important;
}
/* This is the “Spend … more to reach …” line */
#CartDrawer free-shipping-goal .free-shipping-goal__label--default{
display: flex !important;
flex-wrap: wrap !important;
align-items: baseline !important;
gap: 4px !important;
white-space: normal !important;
text-align: left !important;
}
/* Make the CBB amount behave like a normal word (NOT full width / centered) */
#CartDrawer free-shipping-goal .currency-converter-wrapper-amount-box{
display: inline-flex !important;
width: auto !important;
max-width: none !important;
flex: 0 0 auto !important;
margin: 0 !important;
padding: 0 !important;
white-space: nowrap !important;
}
/* 3) TOTALS – force single-line “Estimated total” + amount */
#CartDrawer #CartDrawerFooter-sections--26872770134362__cart-drawer{
padding: 14px 18px 18px !important;
border-top: 1px solid rgba(0,0,0,.08) !important;
}
/* CART DRAWER — force TOTAL price hard-right */
#CartDrawer .totals{
display: flex !important;
align-items: center !important;
width: 100% !important;
}
/* Left label */
#CartDrawer .totals__subtotal{
flex: 1 1 auto !important;
white-space: nowrap !important;
text-align: left !important;
}
/* Right price wrapper (CBB injects this span) */
#CartDrawer .totals .currency-converter-wrapper-amount-box{
margin-left: auto !important; /* <<< key line */
display: inline-flex !important;
justify-content: flex-end !important;
text-align: right !important;
white-space: nowrap !important;
}
/* Inner amount alignment cleanup */
#CartDrawer .totals .currency-converter-amount-box,
#CartDrawer .totals .currency-converter-amount{
display: inline-flex !important;
align-items: baseline !important;
justify-content: flex-end !important;
white-space: nowrap !important;
}
/* Remove any line-height weirdness */
#CartDrawer .totals.h5{
line-height: 1.1 !important;
}
/* Hide free shipping goal ONLY when the empty-state block is visible */
#CartDrawer [id^="CartDrawerEmpty-"]:not([hidden]):not(.hidden) ~ .drawer__body .free-shipping-goal,
#CartDrawer [id^="CartDrawerEmpty-"]:not([hidden]):not(.hidden) ~ .drawer__body free-shipping-goal{
display: none !important;
}
#shopify-section-template--28010925556058__slideshow_q3U4Jn {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
/* FIX: remove bottom gap under slideshow (reserved space for controls/pagination) */
#shopify-section-template--28010925556058__slideshow_q3U4Jn .section--slideshow{
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
#shopify-section-template--28010925556058__slideshow_q3U4Jn slideshow-component.slideshow-wrapper{
padding-bottom: 0 !important;
margin-bottom: 0 !important;
display: block !important;
}
/* Kill ANY slider controls/pagination space (even if injected later) */
#shopify-section-template--28010925556058__slideshow_q3U4Jn .swiper-controls,
#shopify-section-template--28010925556058__slideshow_q3U4Jn .swiper-controls--bottom,
#shopify-section-template--28010925556058__slideshow_q3U4Jn .swiper-pagination,
#shopify-section-template--28010925556058__slideshow_q3U4Jn .swiper-button-prev,
#shopify-section-template--28010925556058__slideshow_q3U4Jn .swiper-button-next{
display: none !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
/* Ensure nothing is adding extra space inside */
#shopify-section-template--28010925556058__slideshow_q3U4Jn .slideshow__item-wrap,
#shopify-section-template--28010925556058__slideshow_q3U4Jn .slideshow__bg{
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
/* If the next section’s top padding looks like “a gap”, remove it */
#shopify-section-template--28010925556058__slideshow_q3U4Jn + .shopify-section{
margin-top: 0 !important;
padding-top: 0 !important;
}
/* Make the image-card overlay text smaller on mobile (this section only) */
@media (max-width: 767px) {
#shopify-section-template--28010925556058__custom_content_HPgFTK .pr-img-card__contents-heading{
font-size: 42px !important; /* was too big */
line-height: 0.88 !important;
letter-spacing: -0.02em !important;
}
#shopify-section-template--28010925556058__custom_content_HPgFTK .pr-img-card__contents-header .rich-text__subheading{
font-size: 16px !important;
line-height: 1 !important;
letter-spacing: 0.04em !important;
}
/* If the big brand word is the hd1 utility class in your theme */
#shopify-section-template--28010925556058__custom_content_HPgFTK .hd1{
font-size: 44px !important;
line-height: 0.88 !important;
}
}