in an rte block,
this trims its bottom margin so it doesn’t add extra space */
.product__info-container .rte p{
margin-bottom: 6px !important;
}
/* =========================================================
PRICE ROW (centered, compare-at inline, promo pill tucked under)
========================================================= */
/* Kill any theme spacing around the whole price block */
.price.price--large{
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
border-radius: 0 !important;
text-align: left !important;
margin: 0 !important; /* IMPORTANT: Sense often adds margin */
}
/* The line that holds sale + compare-at */
.price.price--large .price__container{
display: flex !important;
flex-wrap: wrap;
align-items: baseline !important;
justify-content: left !important;
gap: 6px !important;
row-gap: 2px !important;
margin: 0 !important; /* IMPORTANT */
padding: 0 !important;
}
/* Sense sometimes adds margin to these inner wrappers */
.price.price--large .price__regular,
.price.price--large .price__sale{
margin: 0 !important;
padding: 0 !important;
}
/* NOT on sale (no compare-at): regular price big + green */
.price:not(.price--on-sale) .price-item--regular{
font-weight: 950;
font-size: 2.2rem;
color:rgb(0, 0, 0);
opacity: 1;
text-decoration: none;
line-height: 1.05;
letter-spacing: -0.01em;
margin: 0 !important;
}
/* On sale (compare-at exists): compare price muted + struck */
.price.price--on-sale .price-item--regular{
font-weight: 600;
font-size: 1.45rem;
color: #111;
opacity: 0.45;
text-decoration: line-through;
text-decoration-thickness: 2px;
text-decoration-color: rgb(0, 0, 0);
margin: 0 !important;
}
/* sale price */
.price-item--sale{
font-weight: 950;
font-size: 23px;
color: #111827;
line-height: 1.05;
letter-spacing: -0.01em;
margin: 4 !important;
}
/* Hide theme badge so we can place it exactly */
.price.price--large .price__badges,
.price.price--large .price__badge-sale,
.price.price--large .badge.price__badge-sale{
display: none !important;
}
/* =========================================================
PROMO PILL under price — In stock (subtle, smaller)
========================================================= */
/* Wrapper spacing (tucks it closer to price + less gap before Color:) */
.promo-pill-wrap{
text-align: left !important;
margin: -4px 0 10px !important; /* tighter overall than before */
padding: 0 !important;
}
/* If it sits right after the price block */
.price.price--large + .promo-pill-wrap{
margin-top: 2px !important;
}
/* Pill base */
.promo-pill{
display: inline-flex;
align-items: center;
justify-content: center;
gap: .35rem; /* slightly tighter */
padding: 6px 10px; /* smaller */
border-radius: 999px;
font-weight: 600; /* slightly softer */
font-size: 11.5px; /* smaller text */
line-height: 1;
letter-spacing: 0;
width: fit-content;
max-width: 100%;
margin: 0 !important;
text-transform: none !important; /* prevents ALL CAPS */
}
/* In-stock style */
.promo-pill--instock{
color: #0B3D20;
background: #E8F7EF;
border: 1px solid #008C3C;
box-shadow: none;
}
/* Pulsing dot (more subtle + smaller) */
.promo-pill__dot{
width: 8px;
height: 8px;
border-radius: 999px;
background: #008C3C;
opacity: .82;
box-shadow: 0 0 0 0 rgba(0, 140, 60, .14);
animation: instockPulse 2.4s ease-in-out infinite;
}
@keyframes instockPulse{
0% { transform: scale(1); opacity: .82; box-shadow: 0 0 0 0 rgba(0,140,60,.12); }
55% { transform: scale(1.05); opacity: .95; box-shadow: 0 0 0 5px rgba(0,140,60,.06); }
100% { transform: scale(1); opacity: .82; box-shadow: 0 0 0 0 rgba(0,140,60,.00); }
}
/* Even tighter on small phones */
@media (max-width: 480px){
.promo-pill{ padding: 5px 9px; font-size: 11px; }
.promo-pill-wrap{ margin: -4px 0 9px !important; }
}
/* Hide Watch Size picker (dropdown OR button/fieldset)
.product-form__input:has([name="options[Watch Size]"]),
fieldset.product-form__input:has([name*="Watch Size"]) {
display: none !important;
}*/
/* Hide KaChing "Color, Watch Size" labels above the selectors */
kaching-bundle .kaching-bundles__bar-variant-names{
display: none !important;
}
/* Hide KaChing crossed-out / original price */
kaching-bundle .kaching-bundles__bar-full-price{
display: none !important;
}
/* Keep title top-left and reserve space so it never hits the price
.product .product__info-wrapper .product__title {
margin: 0 !important;
padding-right: 190px !important; /* space for pinned price
text-align: left !important;
}*/
/* =========================================================
AppleSauce — Sense PDP Info Card (GLOBAL / ALL PRODUCTS)
Targets Sense’s actual wrapper: .product__info-wrapper
========================================================= */
/* Page background like Nomad (safe on product pages) */
#MainContent { background: #f1f2f3 !important; }
/* Make the RIGHT product info column a rounded white “card” */
.product .product__info-wrapper {
position: relative !important; /* anchor for pinned price */
text-align: left !important; /* fixes your centered title issue */
}
/* =========================================================
Product info card (RIGHT column) — Nomad-like shell
Targets the REAL white card: .as-card.as-card--info
========================================================= */
/* 1) Keep wrappers neutral (don’t paint the card here) */
.product .product__info-wrapper,
.product .product__info-wrapper .product__info-container{
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
border-radius: 0 !important;
overflow: visible !important;
}
/* 2) Style the actual card element */
.product .product__info-wrapper .as-card.as-card--info{
background: #fff !important;
border-radius: 28px !important;
/* IMPORTANT: don’t double-up borders */
border: 0 !important;
/* subtle surface depth (keep, but very soft) */
background: linear-gradient(180deg, #ffffff 0%, #fbfbfb 100%) !important;
box-shadow:
/* crisp edge (lighter like Nomad) */
0 0 0 1px rgba(0,0,0,.075),
/* subtle top highlight */
inset 0 1px 0 rgba(255,255,255,.78),
/* tight contact shadow (slightly softer) */
0 2px 6px rgba(0,0,0,.09),
/* mid separation */
0 10px 18px -12px rgba(0,0,0,.20),
/* lift */
0 24px 48px -30px rgba(0,0,0,.38) !important;
padding: 18px 15px 18px !important;
margin-bottom: 20px !important;
/* makes corners clip correctly */
overflow: hidden !important;
box-sizing: border-box !important;
width: 100%;
}
/* 4) Mobile padding (optional, keep if you like the spacing) */
@media (max-width: 749px){
.product .product__info-wrapper .product__info-container,
.product .product__info-wrapper .as-card.as-card--info{
padding: 18px !important;
}
}
@media (max-width: 749px){
/* keep your existing mobile padding rules */
.product .product__info-wrapper .product__info-container,
.product .product__info-wrapper .as-card.as-card--info{
padding: 18px !important;
}
/* ✅ tighten spacing under top card */
.product .product__info-wrapper .as-card.as-card--info{
margin-bottom: 20px !important;
}
/* ✅ remove extra top space on review snippet card */
.product .product__info-wrapper .as-card.as-card--snippet{
margin-top: 0px !important;
}
/* ✅ if spacing still feels big, reduce container gap */
.product .product__info-wrapper .product__info-container{
gap: 10px !important;
row-gap: 10px !important;
}
}
/* Pin ONLY the Shopify price block to the top-right */
.product .product__info-wrapper [id^="price-template"] {
position: absolute !important;
top: 18px !important;
right: 22px !important;
margin: 0 !important;
z-index: 50 !important;
white-space: nowrap !important;
}
/* Desktop: nudge pinned price down so it aligns with the title */
@media (min-width: 750px) {
.product .product__info-wrapper [id^="price-template"] {
transform: translateY(16px) !important; /* tweak 4–10px until perfect */
}
}
/* Keep title top-left and reserve space so it never hits the price */
.product .product__info-wrapper .product__title {
margin: 0 !important;
padding-right: 100px !important; /* space for pinned price */
text-align: left !important;
}
/* Mobile: allow up to 2 lines, prevent running into the pinned price */
@media (max-width: 749px) {
.product .product__info-wrapper .product__title{
padding-right: 130px !important; /* reserve room for price (tune 110–150) */
box-sizing: border-box !important;
}
.product .product__info-wrapper .product__title h1,
.product .product__info-wrapper .product__title .h1{
white-space: normal !important;
overflow: visible !important; /* key change */
text-overflow: unset !important; /* key change */
display: block !important;
overflow-wrap: anywhere !important;
}
}
/* Prevent the “g” / descenders from getting cut off */
.product .product__info-wrapper .product__title h1,
.product .product__info-wrapper .product__title .h1 {
margin: 0 !important;
line-height: 1.08 !important;
padding-top: 2px !important;
padding-bottom: 6px !important;
overflow: visible !important;
}
/* Optional: mobile single-line title */
@media (max-width: 749px) {
.product .product__info-wrapper .product__title h1,
.product .product__info-wrapper .product__title .h1 {
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
}
/* ===== Product title: consistent weight on mobile + desktop ===== */
.product .product__info-wrapper .product__title h1,
.product .product__info-wrapper .product__title .h1 {
line-height: 1.06 !important;
font-weight: 800 !important; /* add semicolon + force it */
}
/* Desktop / tablet */
@media (min-width: 750px){
.product .product__info-wrapper .product__title h1,
.product .product__info-wrapper .product__title .h1{
font-size: clamp(34px, 2.6vw, 70px) !important;
}
}
/* Mobile */
@media (max-width: 749px){
.product .product__info-wrapper .product__title h1,
.product .product__info-wrapper .product__title .h1{
font-size: clamp(26px, 7vw, 40px) !important;
letter-spacing: -0.02em; /* optional: makes it feel “bolder” */
}
}
/* Desktop: keep on one line */
@media (min-width: 750px) {
.product .product__info-wrapper .product__title h1,
.product .product__info-wrapper .product__title .h1 {
font-size: 35px !important;
}
}
/* Mobile: remove ellipsis/truncation */
@media (max-width: 749px) {
.product .product__info-wrapper .product__title h1,
.product .product__info-wrapper .product__title .h1 {
white-space: normal !important;
overflow: visible !important;
text-overflow: unset !important;
}
}
/* Hide compare-at price wherever the main product section exists */
#MainProduct-template--25220181623081__main s.price-item.price-item--regular,
[id^="MainProduct-template--"] s.price-item.price-item--regular {
display: none !important;
}
.product .product__info-wrapper .shopify-app-block {
margin-top: -2px !important; /* adjust -2 to -12 */
margin-bottom: 10px !important; /* adjust -2 to -12 */
}
/* Reduce space above the main product section on mobile */
@media (max-width: 749px) {
.template-product #MainContent > .shopify-section:first-child .page-width {
padding-top: 8px !important; /* try 0–12 */
}
}
/* =========================================
Split into two cards using wrapper divs
========================================= */
/* Stop the theme’s info container from being "the card" */
.product .product__info-wrapper .product__info-container {
border-radius: 0 !important;
padding: 0 !important;
}
/* Card base */
/* spacing between card 1 and card 2 */
.product .product__info-wrapper .as-card--offer {
margin-top: 16px !important;
}
@media (max-width: 749px) {
.product .product__info-wrapper .as-card {
padding: 16px 16px 18px !important;
}
.product .product__info-wrapper .as-card--offer {
margin-top: 14px !important;
}
}
/* =========================================================
AppleSauce — Dim NON-active thumbnails (Sense) (active = full)
IMPORTANT: dim the IMAGE, not the parent, so active can override
========================================================= */
/* 1) Make sure parents are never dimmed */
.product .thumbnail-list__item,
.product .thumbnail{
opacity: 1 !important;
}
/* 2) Dim all thumbnail images by default */
.product .thumbnail img,
.product .thumbnail-list__item img{
opacity: .30 !important;
transition: opacity .18s ease;
}
/* 3) Active/selected thumbnail images = fully visible */
.product .thumbnail[aria-current="true"] img,
.product .thumbnail[aria-selected="true"] img,
.product .thumbnail.is-active img,
.product .thumbnail-list__item[aria-current="true"] img,
.product .thumbnail-list__item[aria-selected="true"] img,
.product .thumbnail-list__item--active img,
.product .thumbnail-list__item--active .thumbnail img{
opacity: 1 !important;
}
/* 4) Hover (desktop) */
.product .thumbnail:hover img,
.product .thumbnail-list__item:hover img{
opacity: .75 !important;
}
/* Tighten gap under the Size dropdown (Dawn select wrapper) */
.product__info-container .product-form__input.product-form__input--dropdown{
margin-bottom: 10px !important; /* try 4–10px */
}
/* If your Watch Sizing Guide is in a Custom Liquid block, kill default margins */
.product__info-container .watch-sizing-guide{
margin-top: 0 !important;
margin-bottom: 40px !important; /* try 4–10px */
}
.product__info-container .watch-sizing-guide p{
margin: 0 !important;
}
/* =========================================================
AppleSauce — Thumbnail size tweak (Sense)
========================================================= */
/* Shrink thumbnail tiles (container) */
.product .thumbnail-list__item,
.product .thumbnail{
width: 60px !important; /* try 52–60 */
height: 60px !important; /* try 52–60 */
}
/* Make the image fit the smaller tile */
.product .thumbnail img,
.product .thumbnail-list__item img{
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
/* =========================================================
PRODUCT PAGE — Image with text sections as cards (Nomad-like)
Targets your actual section IDs + grid wrapper
========================================================= */
/* 1) Card shell (the whole Image-with-text block) */
[id^="shopify-section-template--"][id*="__image_with_text"] .image-with-text__grid{
background: #fff !important;
border-radius: 28px !important;
/* Nomad-like: subtle border + soft shadow */
border: 0 !important;
/* subtle surface depth (keep, but very soft) */
background: linear-gradient(180deg, #ffffff 0%, #fbfbfb 100%) !important;
box-shadow:
/* crisp edge (lighter like Nomad) */
0 0 0 1px rgba(0,0,0,.075),
/* subtle top highlight */
inset 0 1px 0 rgba(255,255,255,.78),
/* tight contact shadow (slightly softer) */
0 2px 6px rgba(0,0,0,.09),
/* mid separation */
0 10px 18px -12px rgba(0,0,0,.20),
/* lift */
0 24px 48px -30px rgba(0,0,0,.38) !important;
padding: 18px 15px 18px !important;
/* makes corners clip correctly */
overflow: hidden !important;
box-sizing: border-box !important;
}
/* 2) Prevent inner “double card” layers from overriding */
[id^="shopify-section-template--"][id*="__image_with_text"] .image-with-text__content{
background: transparent !important;
border-radius: 0 !important;
box-shadow: none !important;
border: 0 !important;
}
/* Some themes also apply styling to the media wrapper */
[id^="shopify-section-template--"][id*="__image_with_text"] .image-with-text__media,
[id^="shopify-section-template--"][id*="__image_with_text"] .image-with-text__media-item{
border-radius: 0 !important;
box-shadow: none !important;
}
/* =========================================================
PRICE PINNING (clean + conflict-free)
- Default: NOT pinned (safe for iPad / small desktop)
- Mobile + Large desktop: pinned top-right
=========================================================
/* 1) DEFAULT (all sizes): NOT pinned */
.product .product__info-wrapper [id^="price-template"]{
position: static !important;
top: auto !important;
right: auto !important;
left: auto !important;
bottom: auto !important;
transform: none !important;
margin: 0 !important;
white-space: nowrap !important;
}
/* Title does NOT reserve space unless pinned */
.product .product__info-wrapper .product__title{
padding-right: 0 !important;
}
/* 2) MOBILE: pin */
@media (max-width: 749px){
.product .product__info-wrapper{
position: relative !important;
}
.product .product__info-wrapper [id^="price-template"]{
position: absolute !important;
top: 23px !important; /* <- adjust this freely now */
right: 16px !important;
z-index: 50 !important;
transform: translateY(-1px) !important; /* tiny optical nudge */
}
.product .product__info-wrapper .product__title{
padding-right: 120px !important;
}
}
/* 2.5) TABLET / SMALL DESKTOP (iPad landscape etc): pin, but with safer spacing */
@media (min-width: 750px) and (max-width: 989px){
.product .product__info-wrapper{
position: relative !important;
}
.product .product__info-wrapper [id^="price-template"]{
position: absolute !important;
top: 30px !important; /* adjust if needed */
right: 18px !important; /* slightly tighter than desktop */
z-index: 50 !important;
transform: translateY(-1px) !important;
}
.product .product__info-wrapper .product__title{
padding-right: 210px !important; /* reserve space so title never hits price */
}
}
/* 3) LARGE DESKTOP: pin */
@media (min-width: 990px){
.product .product__info-wrapper{
position: relative !important;
}
.product .product__info-wrapper [id^="price-template"]{
position: absolute !important;
top: 35px !important; /* <- adjust this freely now */
right: 22px !important;
z-index: 50 !important;
transform: translateY(-1px) !important; /* no more translateY(16px) */
}
.product .product__info-wrapper .product__title{
padding-right: 190px !important;
}
}*/
/* PRICE FONT SIZE — Mobile / Tablet / Desktop */
/* 1) Mobile (0–749px) */
@media (max-width: 749px){
.product .product__info-wrapper [id^="price-template"] .price-item--sale,
.product .product__info-wrapper [id^="price-template"] .price-item--last,
.product .product__info-wrapper [id^="price-template"] .price-item{
font-size: 50px !important;
line-height: 1 !important;
font-weight: 800 !important;
}
}
/* 2) Tablet (750–989px) */
@media (min-width: 750px) and (max-width: 989px){
.product .product__info-wrapper [id^="price-template"] .price-item--sale,
.product .product__info-wrapper [id^="price-template"] .price-item--last,
.product .product__info-wrapper [id^="price-template"] .price-item{
font-size: 21px !important;
line-height: 1 !important;
font-weight: 800 !important;
}
}
/* 3) Desktop (990px+) */
@media (min-width: 990px){
.product .product__info-wrapper [id^="price-template"] .price-item--sale,
.product .product__info-wrapper [id^="price-template"] .price-item--last,
.product .product__info-wrapper [id^="price-template"] .price-item{
font-size: 25px !important;
line-height: 1 !important;
font-weight: 800 !important;
}
}
/* ================================
Image-with-text: tighter text card + better typography
================================ */
/* Text card padding (desktop default) */
.image-with-text__content.content-container,
.image-with-text__content.content-container.gradient{
padding: 44px 48px !important;
}
/* Tablet */
@media (min-width: 750px) and (max-width: 989px){
.image-with-text__content.content-container,
.image-with-text__content.content-container.gradient{
padding: 36px 40px !important;
}
}
/* Mobile (this is the big one for reducing wrapping) */
@media (max-width: 749px){
.image-with-text__content.content-container,
.image-with-text__content.content-container.gradient{
padding: 22px 16px !important; /* reduces left/right so lines fit */
}
}
/* Heading sizing (keeps it bold but less “huge” on mobile) */
.image-with-text__heading{
line-height: 1.05 !important;
letter-spacing: -0.02em !important;
}
/* Desktop/Tablet heading scale */
@media (min-width: 750px){
.image-with-text__heading{
font-size: clamp(34px, 3.4vw, 56px) !important;
}
}
/* Mobile heading scale */
@media (max-width: 749px){
.image-with-text__heading{
font-size: 34px !important; /* try 32–36 */
font-size: clamp(26px, 7vw, 52px) !important; /* auto scales: smaller on mobile, big on desktop */
line-height: 1.05 !important;
letter-spacing: -0.02em !important; /* slightly tighter so it fits */
word-break: normal !important;
overflow-wrap: normal !important;
}
}
/* Body text (slightly tighter + more “Nomad-ish”) */
.image-with-text__text{
line-height: 1.45 !important;
}
@media (min-width: 750px){
.image-with-text__text{
font-size: 18px !important;
}
}
@media (max-width: 749px){
.image-with-text__text{
font-size: 16px !important;
}
}
/* =========================================================
Loox Snippet (between your start/end wrappers)
Wrapper:
Goal: same width as other cards + Loox pill removed + centered
========================================================= */
/* 1) Make the wrapper match your other cards */
.product .as-card.as-card--snippet{
background: #fff !important;
border-radius: 28px !important;
border: 0 !important;
/* subtle surface depth (keep, but very soft) */
background: linear-gradient(180deg, #ffffff 0%, #fbfbfb 100%) !important;
box-shadow:
/* crisp edge (lighter like Nomad) */
0 0 0 1px rgba(0,0,0,.075),
/* subtle top highlight */
inset 0 1px 0 rgba(255,255,255,.78),
/* tight contact shadow (slightly softer) */
0 2px 6px rgba(0,0,0,.09),
/* mid separation */
0 10px 18px -12px rgba(0,0,0,.20),
/* lift */
0 24px 48px -30px rgba(0,0,0,.38) !important;
/* makes corners clip correctly */
overflow: hidden !important;
box-sizing: border-box !important;
/* spacing */
padding: 16px !important;
margin: 0px auto 0px !important;
/* center the widget */
display: flex !important;
align-items: center !important;
justify-content: center !important;
/* desktop/tablet width harmony */
width: 100% !important;
max-width: 750px !important;
}
/* Mobile: match the same gutters as your other cards */
@media (max-width: 749px){
.product .as-card.as-card--snippet{
width: calc(100% - 15px) !important; /* 16px each side */
margin: 18px auto 0 !important;
margin-top: 30px !important; /* more space from ATC card */
}
}
/* 2) Remove Loox snippet’s own “pill” look so the wrapper is the card */
.product .as-card.as-card--snippet .container,
.product .as-card.as-card--snippet .grid,
.product .as-card.as-card--snippet .shopify-app-block{
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
margin: 0 !important;
padding: -20 !important;
width: 100% !important;
}
/* 3) Center the actual snippet control (your Inspect showed quickview-button) */
.product .as-card.as-card--snippet button.quickview-button{
width: 100% !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
/* kill any extra framing Loox adds */
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
}
/* =========================================================
AppleSauce — LOOX Reviews wrapped in Nomad-ish card
FINAL FIX:
- Title NEVER overflows on iPhone/Safari
- Stays ONE LINE
- If screen is too narrow, it ellipses instead of breaking
========================================================= */
/* 1) Wrap the Shopify app block that contains #looxReviews */
.shopify-block.shopify-app-block:has(#looxReviews){
border-radius: 28px !important;
border: 0 !important;
background: linear-gradient(180deg, #ffffff 0%, #f9f9f9 100%) !important;
box-shadow:
0 0 0 1px rgba(0,0,0,.12),
inset 0 1px 0 rgba(255,255,255,.75),
0 2px 6px rgba(0,0,0,.12),
0 10px 18px -12px rgba(0,0,0,.22),
0 24px 48px -30px rgba(0,0,0,.40) !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 auto 24px !important;
padding: 22px 18px 22px !important;
position: relative !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
/* ✅ Reviews header (bulletproof on iPhone/Safari) */
.shopify-block.shopify-app-block:has(#looxReviews)::before{
content: "Reviews";
display: block;
font-weight: 900;
line-height: 1.05;
color: #111;
/* ✅ MUST for one line */
white-space: nowrap !important;
/* ✅ This is the REAL fix: force it to obey the card width */
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
/* ✅ If it ever gets too tight on small screens -> graceful fallback */
overflow: hidden !important;
text-overflow: ellipsis !important;
/* ✅ desktop size */
font-size: 30px !important;
letter-spacing: -0.6px !important;
/* Tight gap under title */
margin: 0 0 6px 0 !important;
}
/* ✅ Mobile: slightly smaller so it fits comfortably (no edge kissing) */
@media (max-width: 768px){
.shopify-block.shopify-app-block:has(#looxReviews)::before{
font-size: 23px !important;
letter-spacing: -0.45px !important;
}
}
/* ✅ Tiny phones safety */
@media (max-width: 390px){
.shopify-block.shopify-app-block:has(#looxReviews)::before{
font-size: 20px !important;
letter-spacing: -0.35px !important;
}
}
/* 3) Kill any extra top spacing the widget/iframe adds */
.shopify-block.shopify-app-block:has(#looxReviews) #looxReviews,
.shopify-block.shopify-app-block:has(#looxReviews) #looxReviews.loox-widget{
margin-top: 0 !important;
padding-top: 0 !important;
}
.shopify-block.shopify-app-block:has(#looxReviews) #looxReviewsFrame,
.shopify-block.shopify-app-block:has(#looxReviews) #looxReviews iframe{
display: block !important;
margin-top: 0 !important;
}
/* 4) Mobile tuning */
@media (max-width: 768px){
.shopify-block.shopify-app-block:has(#looxReviews){
border-radius: 24px !important;
padding: 18px 16px 18px !important;
}
.shopify-block.shopify-app-block:has(#looxReviews)::before{
font-size: 28px;
margin-bottom: 6px;
}
}
/* Slightly pull the widget upward inside the card (safe nudge) */
.shopify-block.shopify-app-block:has(#looxReviews) #looxReviews{
transform: translateY(-20px) !important;
}
/* Desktop only — make the entire Reviews CARD narrower */
@media (min-width: 990px) {
/* Try common "card" wrappers. One of these will match. */
.as-card:has(#looxReviews),
.card:has(#looxReviews),
.product__info-wrapper:has(#looxReviews),
.shopify-section:has(#looxReviews) {
max-width: 920px !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* Let Loox fill whatever width the card becomes */
#looxReviews.loox-widget {
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
}
/* =========================================================
AppleSauce — COLLECTION cards styled like PDP cards
Scoped to the exact collection product-grid section
FIXED: true centering + no extra gray “well”
========================================================= */
#shopify-section-template--25220180345129__main-collection-product-grid #product-grid .card-wrapper .card.card--card{
background: linear-gradient(180deg, #ffffff 0%, #fbfbfb 100%) !important;
border-radius: 28px !important;
border: 0 !important;
overflow: hidden !important;
box-sizing: border-box !important;
box-shadow:
0 0 0 1px rgba(0,0,0,.075),
inset 0 1px 0 rgba(255,255,255,.78),
0 2px 6px rgba(0,0,0,.09),
0 10px 18px -12px rgba(0,0,0,.20),
0 24px 48px -30px rgba(0,0,0,.38) !important;
}
/* Remove inner framing so only your shell shows */
#shopify-section-template--25220180345129__main-collection-product-grid #product-grid .card-wrapper .card__inner,
#shopify-section-template--25220180345129__main-collection-product-grid #product-grid .card-wrapper .card__content{
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
/* IMPORTANT: stop the extra “frame/well” padding that creates that extra box */
#shopify-section-template--25220180345129__main-collection-product-grid #product-grid .card-wrapper .card__inner{
padding: 0 !important;
}
/* IMPORTANT: your images already include their own background (like MagFit Air),
so do NOT add any background panel behind them */
#shopify-section-template--25220180345129__main-collection-product-grid #product-grid .card-wrapper .card__media,
#shopify-section-template--25220180345129__main-collection-product-grid #product-grid .card-wrapper .card__media .media{
background: transparent !important;
border-radius: 20px !important;
overflow: hidden !important;
}
/* ===== THE ACTUAL FIX: device-independent centering =====
Dawn makes the
![]()
absolute. We center it without translateX tuning:
- inset:0 gives all edges
- margin:auto centers the rendered box
- max-* prevents overflow
- object-fit contain keeps full product visible
*/
#shopify-section-template--25220180345129__main-collection-product-grid #product-grid .card-wrapper .card__media .media img{
top: 0 !important;
right: 0 !important;
bottom: 0 !important;
left: 0 !important;
margin: auto !important;
/* kill any old “translateX(14px)” style you were adjusting */
transform: none !important;
translate: 0 0 !important;
max-width: 100% !important;
max-height: 100% !important;
width: auto !important;
height: auto !important;
object-fit: contain !important;
object-position: 50% 50% !important;
}
/* Text padding like your PDP cards */
#shopify-section-template--25220180345129__main-collection-product-grid #product-grid .card-wrapper .card__content{
padding: 14px 16px 18px !important;
}
/* Title feel */
#shopify-section-template--25220180345129__main-collection-product-grid #product-grid .card-wrapper .card__heading,
#shopify-section-template--25220180345129__main-collection-product-grid #product-grid .card-wrapper .card__heading a{
font-weight: 600 !important;
letter-spacing: -0.02em !important;
line-height: 1.08 !important;
}
/* Price feel */
#shopify-section-template--25220180345129__main-collection-product-grid #product-grid .card-wrapper .price{
margin-top: 6px !important;
}
#shopify-section-template--25220180345129__main-collection-product-grid #product-grid .card-wrapper .price .price-item{
font-weight: 800 !important;
}
/* Keep SALE badge hidden */
#shopify-section-template--25220180345129__main-collection-product-grid #product-grid .card__badge{
display: none !important;
}
/* =========================================================
Collection hero title: force ONE line + shrink on small screens
Target = h1.collection-hero__title (your exact element)
========================================================= */
.collection-hero__title{
white-space: nowrap !important; /* never wrap */
overflow: visible !important; /* don't clip */
text-overflow: initial !important; /* don't truncate */
max-width: 100% !important;
/* tighter title feel */
line-height: 1.02 !important;
/* THIS controls the gap to the subtitle (bottom margin) */
margin: 6px 0 4px !important;
/* desktop default */
text-align: left;
}
/* That “Collection:” span should not force layout weirdness */
.collection-hero__title .visually-hidden{
display: inline !important;
}
/* Mobile: shrink text with viewport so it stays one line */
@media (max-width: 749px){
.collection-hero__title{
font-size: clamp(22px, 9.5vw, 46px) !important;
letter-spacing: -0.02em !important;
/* mobile centering */
text-align: center !important;
margin-left: auto !important;
margin-right: auto !important;
/* even snugger on mobile */
margin-bottom: 2px !important;
}
}
/* Optional: add a subtle subtitle style if you use the collection description */
.collection-hero__description{
max-width: 60ch;
opacity: .8;
/* THIS is the other half of the “snug” fix (remove default top margin) */
margin-top: 0 !important;
/* controlled tiny spacing from the title */
padding-top: 0 !important;
}
@media (max-width: 749px){
.collection-hero{
padding-top: 16px !important; /* try 8–18px */
}
.collection-hero__description{
text-align: center;
margin-left: auto;
margin-right: auto;
/* keep it tight on mobile too */
margin-top: 0 !important;
}
}
/* =========================================================
PDP tablet fix: stop title breaking into tiny chunks
(MagFit Air showing as M / ag / Fit / Ai / r)
========================================================= */
@media (min-width: 750px) and (max-width: 1200px){
/* Force sane word wrapping on the product title */
.product__info-wrapper h1,
.product__info-wrapper .product__title,
.product__info-container h1,
.product__info-container .product__title{
word-break: normal !important;
overflow-wrap: normal !important; /* kills "anywhere" behavior */
hyphens: none !important;
white-space: normal !important;
max-width: none !important;
}
/* If your title+price are in a flex row, allow wrapping instead of crushing the title */
.product__info-wrapper .product__title,
.product__info-container .product__title{
flex: 1 1 auto !important;
min-width: 0 !important;
}
/* Optional: if you created a custom title/price wrapper, this prevents squeeze */
.product__info-wrapper .title-price,
.product__info-container .title-price,
.product__info-wrapper .product-title-price,
.product__info-container .product-title-price{
flex-wrap: wrap !important;
row-gap: 6px !important;
}
}
/* =========================================================
AppleSauce — GLOBAL HEADER as a “connected” card (Sense)
Rounded ONLY on the bottom corners + soft PDP-style shadow
Paste this at the VERY BOTTOM of base.css
========================================================= */
:root{
--as-header-radius: 28px;
--as-header-bg: linear-gradient(180deg, #ffffff 0%, #fbfbfb 100%);
--as-header-shadow:
0 0 0 1px rgba(0,0,0,.075),
inset 0 1px 0 rgba(255,255,255,.78),
0 2px 6px rgba(0,0,0,.09),
0 10px 18px -12px rgba(0,0,0,.18),
0 20px 40px -28px rgba(0,0,0,.35);
}
/* 1) Kill any wrapper padding/margins that makes it “float” */
.shopify-section-header .header-wrapper,
.section-header .header-wrapper,
#shopify-section-header .header-wrapper{
padding: 0 !important;
margin: 0 !important;
background: transparent !important;
border: 0 !important;
overflow: visible !important; /* allow shadow to render */
}
/* 2) Apply the card look to the actual header bar */
.shopify-section-header .header-wrapper .header,
.section-header .header-wrapper .header,
#shopify-section-header .header-wrapper .header{
width: 100% !important;
max-width: none !important;
background: var(--as-header-bg) !important;
border: 0 !important;
/* Bottom-only rounding = “connected” */
border-radius: 0 0 var(--as-header-radius) var(--as-header-radius) !important;
box-shadow: var(--as-header-shadow) !important;
/* Keep it snug to the top (no floating gap) */
margin: 0 !important;
/* Keep Sense spacing, but slightly more “card-like” */
padding-top: 14px !important;
padding-bottom: 14px !important;
padding-left: clamp(16px, 4vw, 32px) !important;
padding-right: clamp(16px, 4vw, 32px) !important;
position: relative;
z-index: 20;
}
/* 3) Remove any theme “border line” below header that fights the look */
.shopify-section-header .header-wrapper,
.section-header .header-wrapper,
#shopify-section-header .header-wrapper{
box-shadow: none !important; /* shadow lives on .header above */
}
/* 4) Sticky header: keep the same card look (Sense uses these states) */
.shopify-section-header-sticky .header-wrapper .header,
.shopify-section-header-hidden .header-wrapper .header,
.shopify-section-header-reveal .header-wrapper .header{
border-radius: 0 0 var(--as-header-radius) var(--as-header-radius) !important;
box-shadow: var(--as-header-shadow) !important;
}
/* 5) Mobile polish: slightly tighter radius + padding so it feels premium */
@media (max-width: 749px){
:root{ --as-header-radius: 24px; }
.shopify-section-header .header-wrapper .header,
.section-header .header-wrapper .header,
#shopify-section-header .header-wrapper .header{
padding-top: 5px !important;
padding-bottom: 5px !important;
}
}
/* =========================================================
Header height controls (Desktop vs Mobile)
Keeps Theme Editor logo sizing working (no logo cap)
========================================================= */
/* -------------------------
DESKTOP (>= 750px)
------------------------- */
@media (min-width: 750px){
.header{
padding-top: 0px !important;
padding-bottom: 0px !important;
}
/* do NOT cap logo size */
.header__heading-logo{
max-height: none !important;
height: auto !important;
width: auto !important;
}
.header__icons{
align-items: center !important;
}
}
/* =========================================================
AppleSauce — Specs Accordion Card (Sizing + Included + Tech)
Matches your other cards exactly (border + shadow + rounding)
Works with your existing class names:
.as-acc-title / .as-acc-icon / .as-acc-content / .as-imgwrap / .as-note
========================================================= */
.as-specs-card{
border-radius: 28px !important;
border: 0 !important;
background: linear-gradient(180deg, #ffffff 0%, #fbfbfb 100%) !important;
box-shadow:
0 0 0 1px rgba(0,0,0,.075),
inset 0 1px 0 rgba(255,255,255,.78),
0 2px 6px rgba(0,0,0,.09),
0 10px 18px -12px rgba(0,0,0,.20),
0 24px 48px -30px rgba(0,0,0,.38) !important;
overflow: hidden !important;
width: 100%;
margin-top: 20px !important;
}
/* Each accordion row */
.as-specs-card .as-acc-item{
border-top: 1px solid rgba(0,0,0,.08);
margin: 0 !important;
padding: 0 !important;
}
.as-specs-card .as-acc-item:first-child{
border-top: 0 !important;
}
/* Clickable row (summary) */
.as-specs-card .as-acc-summary{
list-style: none !important;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 18px !important;
gap: 14px;
background: transparent !important;
}
/* Remove default arrow marker */
.as-specs-card .as-acc-summary::-webkit-details-marker{
display: none !important;
}
/* Row title text */
.as-specs-card .as-acc-title{
font-size: 18px !important;
font-weight: 800 !important;
letter-spacing: -0.2px !important;
color: #111827 !important;
}
/* Plus icon circle button */
.as-specs-card .as-acc-icon{
width: 34px !important;
height: 34px !important;
border-radius: 999px !important;
display: grid !important;
place-items: center !important;
background: #ffffff !important;
box-shadow:
0 0 0 1px rgba(0,0,0,.14),
0 1px 2px rgba(0,0,0,.10) !important;
flex: 0 0 auto !important;
}
/* Put the + inside the icon (your span is empty right now) */
.as-specs-card .as-acc-icon::before{
content: "+" !important;
font-size: 18px !important;
font-weight: 900 !important;
line-height: 1 !important;
color: #111827 !important;
transform: translateY(-1px);
}
/* When open, make + rotate into an X */
.as-specs-card details[open] .as-acc-icon::before{
transform: translateY(-1px) rotate(45deg);
}
/* Accordion content area */
.as-specs-card .as-acc-content{
padding: 0 18px 18px 18px !important;
color: #374151 !important;
font-size: 15px !important;
line-height: 1.55 !important;
}
/* Bullets inside content */
.as-specs-card .as-acc-content ul{
margin: 10px 0 0 18px !important;
padding: 0 !important;
}
.as-specs-card .as-acc-content li{
margin: 6px 0 !important;
}
/* Image wrap for sizing graphic */
.as-specs-card .as-imgwrap{
margin: 10px 0 12px 0 !important;
border: 1px solid rgba(0,0,0,.10) !important;
border-radius: 12px !important;
overflow: hidden !important;
background: #f9fafb !important;
}
.as-specs-card .as-imgwrap img{
display: block !important;
width: 100% !important;
height: auto !important;
}
/* Green note box (Series sizing note) */
.as-specs-card .as-note{
margin-top: 12px !important;
padding: 10px 12px !important;
border-left: 3px solid #008C3C !important;
background: #E8F7EF !important;
color: #0B3D20 !important;
border-radius: 12px !important;
}
/* =========================================================
AppleSauce - Comparison Card (Row-by-row side-by-side)
========================================================= */
.as-compare-card{
border-radius: 28px;
border: 0 !important;
background: linear-gradient(180deg, #ffffff 0%, #fbfbfb 100%) !important;
box-shadow:
0 0 0 1px rgba(0,0,0,.075),
inset 0 1px 0 rgba(255,255,255,.78),
0 2px 6px rgba(0,0,0,.09),
0 10px 18px -12px rgba(0,0,0,.20),
0 24px 48px -30px rgba(0,0,0,.38);
width: min(900px, calc(100% - 32px));
margin: 25px auto 24px;
padding: 20px 18px;
overflow: hidden;
box-sizing: border-box;
}
.as-compare-head{
padding-bottom: 14px;
border-bottom: 1px solid rgba(0,0,0,.08);
}
.as-compare-title{
margin: 0;
font-weight: 900;
font-size: 28px;
line-height: 1.08;
letter-spacing: -0.6px;
color: #111;
}
.as-compare-sub{
margin: 6px 0 0;
color: rgba(17,17,17,.62);
font-size: 15px;
line-height: 1.55;
}
/* Header pills */
.as-compare-header{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-top: 14px;
padding-bottom: 12px;
border-bottom: 1px solid rgba(0,0,0,.08);
}
.as-compare-pill{
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 12px;
border-radius: 999px;
font-weight: 800;
font-size: 15px;
letter-spacing: -0.2px;
border: 1px solid rgba(0,0,0,.08);
background: rgba(0,0,0,.03);
color: #111;
text-align: center;
white-space: nowrap;
}
.as-compare-pill--good{
background: rgba(0, 140, 60, .10);
border-color: rgba(0, 140, 60, .18);
}
.as-compare-pill--bad{
background: rgba(0,0,0,.04);
border-color: rgba(0,0,0,.10);
}
/* Rows */
.as-compare-rows{
margin-top: 6px;
}
.as-compare-row{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
padding: 14px 0;
border-bottom: 1px solid rgba(0,0,0,.08);
}
.as-compare-row > :first-child{
font-weight: 650;
}
.as-compare-row:last-child{
border-bottom: 0;
}
.as-compare-cell{
display: flex;
align-items: flex-start;
gap: 10px;
color: rgba(17,17,17,.76);
font-size: 15px;
line-height: 1.5;
}
.as-compare-dot{
width: 10px;
height: 10px;
border-radius: 999px;
margin-top: 8px;
flex: 0 0 10px;
background: rgba(0,0,0,.25);
}
.as-compare-dot--good{
background: rgba(0,140,60,.85);
}
.as-compare-dot--bad{
background: rgba(0,0,0,.35);
}
/* Mobile tightening (but still side-by-side) */
@media (max-width: 749px){
.as-compare-card{
padding: 18px 16px;
border-radius: 24px;
}
.as-compare-title{
font-size: 22px;
letter-spacing: -0.4px;
}
.as-compare-sub{
font-size: 14.5px;
}
.as-compare-pill{
font-size: 13.5px;
padding: 9px 10px;
}
.as-compare-row{
gap: 10px;
padding: 12px 0;
}
.as-compare-cell{
font-size: 13.5px;
line-height: 1.45;
}
}
/* =========================================
Comparison table: reduce desktop WIDTH
========================================= */
@media (min-width: 990px){
/* Make the entire card narrower and centered */
.as-compare-card{
width: min(680px, calc(100% - 32px)) !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* Tighten the gap between the two columns */
.as-compare-grid{
column-gap: 16px !important;
}
}
/* =========================================================
AppleSauce — Stack "In Stock" pill under the price (right)
(CSS-only, keeps your current blocks + layout intact)
========================================================= */
/* Make the top product info card a positioning context */
.product__info-container .as-card--info{
position: relative;
}
/* Ensure the price stays right-aligned */
.product__info-container .as-card--info .price{
text-align: right;
}
/* Move the pill to the top-right under the price */
.product__info-container .as-card--info .promo-pill-wrap{
position: absolute;
right: 18px;
top: 70px; /* <— adjust if needed */
width: 105px; /* makes pill “center” nicely under price */
display: flex;
justify-content: center; /* centers pill under price */
margin: 0;
padding: 0;
z-index: 5;
}
/* Mobile tweaks */
@media (max-width: 768px){
.product__info-container .as-card--info .promo-pill-wrap{
right: 16px;
top: 54px; /* <— adjust if needed */
width: 95px;
}
}
/* Mobile: prevent price/pill stack from overlapping subtitle */
@media (max-width: 420px){
.as-subtitle-wrap{
display: block;
width: 50%;
clear: both;
margin-top: 4px;
}
}
/* ================================
TABLET ONLY: tighten Price + In Stock alignment
(does NOT touch desktop or mobile)
================================ */
@media (min-width: 750px) and (max-width: 989px){
/* This keeps your current layout intact but makes the top row behave nicely */
.as-card--info{
display: flex !important;
flex-wrap: wrap !important;
align-items: flex-start !important;
}
/* Title stays left */
.as-card--info .product__title{
flex: 1 1 auto !important;
min-width: 0 !important;
}
/* Subtitle stays under title */
.as-card--info .as-subtitle-wrap{
flex: 1 1 60% !important;
order: 3 !important;
min-width: 0 !important;
}
/* TUNE THESE: */
margin-top: -10px !important; /* <- change this */
transform: translateX(13px) !important; /* <- or change this */
}
/* === iPad Mini / Tablet fix: keep price + In Stock from colliding === */
@media (min-width: 700px) and (max-width: 1024px){
/* Make the price block act like a vertical stack on tablets */
.product__info-container .price{
display: flex !important;
flex-direction: column !important;
align-items: flex-end !important;
gap: 0px !important;
}
/* Your In Stock pill wrapper */
.product__info-container .promo-pill-wrap{
margin: 0 !important;
display: flex !important;
justify-content: flex-end !important;
}
/* Slightly tighten the pill so it doesn't take extra height */
.product__info-container .promo-pill--instock{
white-space: nowrap !important;
line-height: 1 !important;
}
}
/* =========================================================
AppleSauce — Cart Drawer (Nomad-inspired)
- Rounded drawer panel (floating modal look)
- Soft depth + clean premium background
- Optional “cart item card” feel
- Checkout button matches ATC style
- Bigger trash icon (easier tapping on mobile)
========================================================= */
/* ---------- 0) Overlay / backdrop (premium modal feel) ---------- */
#CartDrawer-Overlay,
.cart-drawer__overlay{
background: rgba(0,0,0,.42) !important;
backdrop-filter: blur(2px);
}
/* ---------- 1) The actual drawer panel (THIS is the key target) ---------- */
#CartDrawer .drawer__inner{
background: linear-gradient(180deg, #ffffff 0%, #fbfbfb 100%) !important;
border-radius: 28px !important;
box-shadow:
0 0 0 1px rgba(0,0,0,.08),
0 10px 26px rgba(0,0,0,.16),
0 40px 80px rgba(0,0,0,.20) !important;
overflow: hidden !important;
}
/* ✅ Floating modal spacing (recommended) */
#CartDrawer .drawer__inner{
margin: 12px !important;
height: calc(100% - 24px) !important;
}
/* Mobile: slightly tighter margins */
@media (max-width: 749px){
#CartDrawer .drawer__inner{
margin: 10px !important;
height: calc(100% - 20px) !important;
border-radius: 26px !important;
}
}
/* ❌ If you ever decide you do NOT want floating modal:
Just comment out the “margin + height” block above. */
/* ---------- 2) Drawer header spacing cleanup ---------- */
#CartDrawer .drawer__header{
padding: 18px 18px 10px !important;
}
#CartDrawer .drawer__header h2,
#CartDrawer .drawer__header .h2{
letter-spacing: -0.4px !important;
}
/* ---------- 3) Cart list spacing ---------- */
#CartDrawer cart-drawer-items{
padding: 0 18px 16px !important;
}
/* Make the table feel like stacked “cards” without breaking layout */
#CartDrawer .cart-items{
border-collapse: separate !important;
border-spacing: 0 12px !important;
}
/* Each row becomes a soft card */
#CartDrawer .cart-items tr.cart-item{
background: #fff !important;
border-radius: 20px !important;
box-shadow:
0 0 0 1px rgba(0,0,0,.08),
0 6px 16px rgba(0,0,0,.10) !important;
overflow: hidden !important;
}
/* Remove harsh divider lines inside cart drawer */
#CartDrawer .cart-item td{
border: 0 !important;
}
/* Tighten item spacing inside the “card” */
#CartDrawer .cart-item__details{
padding-left: 12px !important;
}
/* Product title */
#CartDrawer .cart-item__name{
font-weight: 800 !important;
letter-spacing: -0.2px !important;
}
/* Variant text styling (smaller + softer) */
#CartDrawer .product-option{
font-size: 14px !important;
color: #4b5563 !important;
margin-top: 4px !important;
}
/* ---------- 4) Make trash/remove button bigger & easier to hit ---------- */
/* This hits most Sense remove controls (button or link) */
#CartDrawer .cart-remove-button,
#CartDrawer a.cart-remove-button,
#CartDrawer button.cart-remove-button{
width: 42px !important;
height: 42px !important;
border-radius: 999px !important;
display: grid !important;
place-items: center !important;
background: #fff !important;
box-shadow:
0 0 0 1px rgba(0,0,0,.12),
0 2px 8px rgba(0,0,0,.10) !important;
}
/* Make the icon bigger */
#CartDrawer .cart-remove-button svg{
width: 20px !important;
height: 20px !important;
}
/* ---------- 5) Drawer footer (subtotal area) ---------- */
#CartDrawer .drawer__footer{
padding: 14px 18px 18px !important;
background: transparent !important;
border-top: 0 !important;
}
/* Slight separation line above totals */
#CartDrawer .drawer__footer::before{
content: "" !important;
display: block !important;
height: 1px !important;
background: rgba(0,0,0,.08) !important;
margin: 0 0 14px 0 !important;
}
/* ---------- 6) Checkout button = EXACT same vibe as ATC ---------- */
#CartDrawer .cart__checkout-button,
#CartDrawer .cart-drawer__footer .button--primary{
position: relative !important;
overflow: hidden !important;
width: 100% !important;
background: linear-gradient(180deg,
#2f2f2f 0%,
#1a1a1a 45%,
#0b0b0b 100%
) !important;
color: #fff !important;
border: 1px solid rgba(255,255,255,.10) !important;
border-radius: 999px !important;
padding: 18px 22px !important;
font-weight: 800 !important;
font-size: 18px !important;
letter-spacing: .2px !important;
text-transform: none !important;
text-shadow: 0 1px 0 rgba(0,0,0,.45) !important;
box-shadow:
0 14px 30px rgba(0,0,0,.22),
inset 0 1px 0 rgba(255,255,255,.18),
inset 0 -3px 0 rgba(0,0,0,.55) !important;
}
/* Gloss overlay (Nomad-like sheen) */
#CartDrawer .cart__checkout-button::after,
#CartDrawer .cart-drawer__footer .button--primary::after{
content: "" !important;
position: absolute !important;
inset: 0 !important;
border-radius: inherit !important;
pointer-events: none !important;
background:
radial-gradient(120% 80% at 50% 0%,
rgba(255,255,255,.18) 0%,
rgba(255,255,255,0) 55%
),
linear-gradient(180deg,
rgba(255,255,255,.10) 0%,
rgba(255,255,255,0) 35%
) !important;
opacity: .55 !important;
}
#CartDrawer .cart__checkout-button:hover,
#CartDrawer .cart-drawer__footer .button--primary:hover{
filter: brightness(1.06) !important;
}
#CartDrawer .cart__checkout-button:active,
#CartDrawer .cart-drawer__footer .button--primary:active{
transform: translateY(1px) !important;
filter: brightness(0.98) !important;
}
/* ---------- 7) Secure Checkout lock icon (FIXED: always visible + aligned) ---------- */
#CartDrawer .cart__checkout-button{
position: relative !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
/* IMPORTANT: prevents pseudo elements from drifting / painting weird */
isolation: isolate !important;
}
/* Put gloss overlay BEHIND the text + lock */
#CartDrawer .cart__checkout-button::after{
z-index: 0 !important;
}
/* Keep text above gloss */
#CartDrawer .cart__checkout-button{
z-index: 1 !important;
}
/* Lock icon using inline SVG (no emoji) */
#CartDrawer .cart__checkout-button::before{
content: "" !important;
width: 18px !important;
height: 18px !important;
/* ✅ This is the key: force it to behave like a flex item */
display: inline-block !important;
flex: 0 0 18px !important;
/* ✅ Force it NOT to float top-left */
position: static !important;
inset: auto !important;
transform: none !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: contain !important;
z-index: 2 !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M17 9h-1V7a4 4 0 0 0-8 0v2H7a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-9a2 2 0 0 0-2-2Zm-7-2a2 2 0 1 1 4 0v2h-4V7Zm7 13H7v-9h10v9Z'/%3E%3C/svg%3E") !important;
}
/* ✅ Keep it stable even when pressed */
#CartDrawer .cart__checkout-button:active::before,
#CartDrawer .cart__checkout-button:focus::before,
#CartDrawer .cart__checkout-button:focus-visible::before{
opacity: 1 !important;
transform: none !important;
}
/* ---------- 8) Payment icons spacing (cleaner look) ---------- */
#CartDrawer .shopify-cleanslate{
margin-top: 10px !important;
}
/* =========================================================
AppleSauce — Cart Drawer Item Cards (spacing + containment)
Focus: each line item becomes its own rounded mini-card
========================================================= */
/* 1) Give the items area some breathing room inside the drawer */
#CartDrawer .cart-drawer__items,
#CartDrawer .drawer__cart-items-wrapper,
#CartDrawer #CartDrawer-CartItems{
padding: -10px -10px 0 !important;
box-sizing: border-box !important;
}
/* 2) Each cart item becomes its own card */
#CartDrawer .cart-item{
background: #ffffff !important;
border-radius: 22px !important;
border: 1px solid rgba(0,0,0,.08) !important;
box-shadow:
0 2px 6px rgba(0,0,0,.08),
0 12px 22px -16px rgba(0,0,0,.22) !important;
padding: 14px !important;
/* separation between items */
margin: 0 0 14px 0 !important;
/* keeps things from visually spilling out */
overflow: hidden !important;
}
/* 3) Make sure the table/row layout doesn't force weird edges */
#CartDrawer .cart-items,
#CartDrawer .cart-items tbody,
#CartDrawer .cart-items tr{
display: block !important;
width: 100% !important;
}
/* 4) Ensure each row/card uses full width */
#CartDrawer .cart-items tr.cart-item{
width: 100% !important;
}
/* 5) Product image stays contained nicely */
#CartDrawer .cart-item__media img{
border-radius: 16px !important;
}
/* 6) Stop tight “touching” inside the card */
#CartDrawer .cart-item__details{
padding-left: 12px !important;
}
/* 7) Make the trash can feel like it belongs (optional clean alignment) */
#CartDrawer .cart-remove-button{
align-self: center !important;
}
/* =========================================================
AppleSauce — Cart Drawer item card controls (MOBILE FIX)
Space qty selector + trash button on mobile only
========================================================= */
@media (max-width: 749px){
/* Make the quantity + remove area behave like a row with spacing */
cart-drawer .cart-item__quantity,
cart-drawer td.cart-item__quantity{
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 14px !important;
}
/* Keep the quantity selector from shrinking weirdly */
cart-drawer .cart-item__quantity .quantity,
cart-drawer td.cart-item__quantity .quantity{
flex: 0 0 auto !important;
}
/* Give the trash button breathing room */
cart-drawer .cart-item__quantity .cart-remove-button,
cart-drawer td.cart-item__quantity .cart-remove-button,
cart-drawer .cart-item__quantity a[href*="remove"],
cart-drawer td.cart-item__quantity a[href*="remove"],
cart-drawer .cart-item__quantity button[aria-label*="Remove"],
cart-drawer td.cart-item__quantity button[aria-label*="Remove"]{
margin-left: 10px !important;
}
}
/* =========================================================
AppleSauce — Hide "PRODUCT / TOTAL" headers in Cart Drawer only
========================================================= */
cart-drawer .cart-items thead{
display: none !important;
}
/* =========================================================
AppleSauce — Cart Drawer pricing clarity
Unit price = "each"
Right-side price = line total (updates w/ quantity)
========================================================= */
/* 1) Add "each" after the UNIT price under the product title */
cart-drawer .cart-item__price .price__regular .price-item--regular::after,
cart-drawer .cart-item__price .price__sale .price-item--sale::after,
cart-drawer .cart-item__price .price-item::after{
content: " each";
font-size: 12px;
font-weight: 600;
opacity: .65;
margin-left: 4px;
}
/* 2) Make the line total on the right look intentional */
cart-drawer .cart-item__totals{
text-align: right !important;
}
cart-drawer .cart-item__totals .price-item{
font-weight: 800 !important;
font-size: 18px !important;
}
/* 3) OPTIONAL: hide the compare-at/strikethrough on the RIGHT-side total
(keeps compare-at under the title, but cleans up the totals area) */
cart-drawer .cart-item__totals s,
cart-drawer .cart-item__totals .price-item--regular{
display: none !important;
}
/* =========================================================
AppleSauce — Cart Drawer Item Fixes (Sense-safe)
Fixes:
- trash overlapping qty (mobile)
- remove duplicate price (keep line total)
========================================================= */
/* 1) HARD RESET trash positioning (undo any old absolute code) */
cart-drawer cart-remove-button,
.cart-drawer cart-remove-button{
position: static !important;
inset: auto !important;
transform: none !important;
}
/* 2) Make the quantity row behave like a clean row */
cart-drawer .cart-item__quantity,
.cart-drawer .cart-item__quantity{
display: flex !important;
align-items: center !important;
gap: 14px !important;
flex-wrap: nowrap !important;
}
/* 3) Trash button size + spacing */
cart-drawer cart-remove-button button,
.cart-drawer cart-remove-button button{
width: 44px !important;
height: 44px !important;
border-radius: 999px !important;
display: grid !important;
place-items: center !important;
}
/* =========================================================
AppleSauce — Cart Drawer: Hide per-item price under title
Keep the big line total price on the right
========================================================= */
/* Hide the per-item price under the product title (details column) */
.cart-drawer .cart-item__details .cart-item__old-price,
.cart-drawer .cart-item__details .cart-item__final-price,
.cart-drawer .cart-item__details .cart-item__discounted-prices,
.cart-drawer .cart-item__details .product-option strong.cart-item__final-price {
display: none !important;
}
/* Make sure the big total price stays visible (totals column) */
.cart-drawer .cart-item__totals .cart-item__old-price,
.cart-drawer .cart-item__totals .cart-item__final-price,
.cart-drawer .cart-item__totals .cart-item__price-wrapper {
display: block !important;
}
/* =========================================
AppleSauce — Cart Drawer Item Layout Fix
Put Qty + Trash + Price on the SAME row
(without breaking title/variants spacing)
========================================= */
#CartDrawer .cart-items tbody tr.cart-item {
display: grid !important;
grid-template-columns: 110px 1fr;
grid-template-rows: auto auto;
grid-template-areas:
"media details"
"qty totals";
gap: 14px 16px;
align-items: start;
}
/* Remove default table-cell spacing/padding */
#CartDrawer .cart-items tbody tr.cart-item > td {
padding: 0 !important;
border: 0 !important;
display: block !important;
}
/* Assign grid areas */
#CartDrawer td.cart-item__media {
grid-area: media;
}
#CartDrawer td.cart-item__details {
grid-area: details;
min-width: 0;
}
#CartDrawer td.cart-item__quantity {
grid-area: qty;
display: flex !important;
align-items: center;
gap: 10px;
}
#CartDrawer td.cart-item__totals {
grid-area: totals;
display: flex !important;
justify-content: flex-end;
align-items: center;
text-align: right;
}
/* Make the price stronger/bolder */
#CartDrawer td.cart-item__totals .cart-item__price-wrapper,
#CartDrawer td.cart-item__totals .price,
#CartDrawer td.cart-item__totals .cart-item__final-price {
font-weight: 800 !important;
}
/* ====== Shrink the quantity selector so it doesn't hog the row ====== */
#CartDrawer td.cart-item__quantity .cart-item__quantity-wrapper {
display: flex !important;
align-items: center;
gap: 10px;
}
/* Quantity box sizing */
#CartDrawer td.cart-item__quantity .quantity {
width: 135px !important;
min-width: 135px !important;
border-radius: 14px !important;
}
/* Make +/- buttons slimmer */
#CartDrawer td.cart-item__quantity .quantity__button {
width: 40px !important;
}
/* Make input area slightly tighter */
#CartDrawer td.cart-item__quantity .quantity__input {
width: 55px !important;
padding: 0 !important;
}
#CartDrawer cart-remove-button button,
#CartDrawer cart-remove-button .button {
width: 38px !important;
height: 38px !important;
min-width: 38px !important;
min-height: 38px !important;
padding: 0 !important;
}
#CartDrawer cart-remove-button button svg,
#CartDrawer cart-remove-button .button svg {
width: 14px !important;
height: 14px !important;
}
/* ====== Mobile polish ====== */
@media (max-width: 480px) {
#CartDrawer .cart-items tbody tr.cart-item {
grid-template-columns: 96px 1fr;
gap: 12px 14px;
}
#CartDrawer td.cart-item__quantity .quantity {
width: 125px !important;
min-width: 125px !important;
}
}
/* --- Fix: keep qty + trash on one row --- */
#CartDrawer td.cart-item__quantity {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 12px !important;
}
#CartDrawer td.cart-item__quantity .cart-item__quantity-wrapper {
display: flex !important;
align-items: center !important;
gap: 12px !important;
flex-wrap: nowrap !important;
}
/* Make sure the trash button doesn't drop to a new line */
#CartDrawer td.cart-item__quantity cart-remove-button {
display: inline-flex !important;
margin: 0 !important;
}
#CartDrawer td.cart-item__quantity cart-remove-button .button {
margin: 0 !important;
}
/* Optional: shrink quantity width a bit more */
#CartDrawer td.cart-item__quantity .quantity {
width: 120px !important;
min-width: 120px !important;
}
/* =========================================
Cart Drawer – Nomad-style item layout
(qty + trash on left, price on right)
========================================= */
.cart-drawer .cart-items .cart-item {
display: grid !important;
grid-template-columns: 110px 1fr auto;
grid-template-rows: auto auto;
grid-template-areas:
"media details details"
"controls controls totals";
column-gap: 16px;
row-gap: 14px;
align-items: center;
}
/* place the 3 main cells */
.cart-drawer .cart-item__media {
grid-area: media;
}
.cart-drawer .cart-item__details {
grid-area: details;
}
.cart-drawer .cart-item__quantity {
grid-area: controls;
display: flex !important;
align-items: center;
gap: 14px;
width: 100%;
}
/* totals cell becomes the right-side price */
.cart-drawer .cart-item__totals {
grid-area: totals;
text-align: right;
align-self: center;
white-space: nowrap;
}
/* ✅ Make quantity selector NOT take over the whole row */
.cart-drawer quantity-input.quantity {
width: 140px !important;
max-width: 140px !important;
}
/* tighten the number input */
.cart-drawer .quantity__input {
width: 46px !important;
min-width: 46px !important;
text-align: center;
}
/* Make +/- buttons slightly tighter so everything fits nicely */
.cart-drawer .quantity__button {
width: 44px !important;
min-width: 44px !important;
}
/* ✅ Trash icon stays next to qty */
.cart-drawer cart-remove-button .button {
width: 44px !important;
height: 44px !important;
border-radius: 999px !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
}
/* ✅ Bold the current price (but keep compare-at lighter) */
.cart-drawer .cart-item__totals .price {
font-weight: 800 !important;
}
.cart-drawer .cart-item__totals .price--on-sale .price-item--regular {
opacity: 0.55;
font-weight: 600;
}
/* Mobile tightening */
@media (max-width: 749px) {
.cart-drawer .cart-items .cart-item {
grid-template-columns: 90px 1fr auto;
column-gap: 14px;
row-gap: 12px;
}
.cart-drawer quantity-input.quantity {
width: 125px !important;
max-width: 125px !important;
}
}
/* Hide Ka-ching "1 Strap / 2 Straps" line in cart drawer */
#CartDrawer .discounts {
display: none !important;
}
/* ================================
NOMAD-STYLE CART DRAWER TOTALS (CLEAN + FIXED)
Shipping + Estimated total aligned cleanly
Removes extra divider lines + fixes spacing
================================ */
/* Remove Shopify's extra divider line(s) above footer */
.cart-drawer__footer::before,
.drawer__footer::before {
display: none !important;
content: none !important;
}
/* Remove any
dividers in drawer footer */
.cart-drawer__footer hr,
.drawer__footer hr {
display: none !important;
}
/* Footer stacks totals above button */
.cart-drawer__footer {
display: flex;
flex-direction: column;
gap: 12px;
padding-top: 12px !important;
}
/* Order of sections */
.cart-drawer__footer .totals { order: 1; }
.cart-drawer__footer .cart__ctas { order: 2; }
/* Totals block (grid layout) */
.cart-drawer__footer .totals {
/* IMPORTANT: remove built-in border line */
border-top: none !important;
padding-top: 0 !important;
margin-top: 0 !important;
display: grid;
grid-template-columns: 1fr auto;
row-gap: 10px;
align-items: baseline;
}
/* Reset spacing on label/value */
.cart-drawer__footer .totals__total,
.cart-drawer__footer .totals__total-value {
margin: 0 !important;
line-height: 1.15;
}
/* Estimated total label/value styling */
.cart-drawer__footer .totals__total {
grid-column: 1;
font-size: 18px;
font-weight: 900;
}
.cart-drawer__footer .totals__total-value {
grid-column: 2;
justify-self: end;
font-size: 18px;
font-weight: 900;
}
/* Shipping row ABOVE Estimated total (FORCED ROW POSITION) */
.cart-drawer__footer .totals::before {
content: "Shipping";
grid-column: 1;
grid-row: 1;
font-size: 16px;
font-weight: 900;
color: rgba(0,0,0,0.55);
}
.cart-drawer__footer .totals::after {
content: "Free";
grid-column: 2;
grid-row: 1;
justify-self: end;
font-size: 16px;
font-weight: 900;
color: rgb(var(--color-base-accent-1));
}
/* Estimated total row (FORCED ROW POSITION) */
.cart-drawer__footer .totals__total {
grid-column: 1;
grid-row: 2;
}
.cart-drawer__footer .totals__total-value {
grid-column: 2;
grid-row: 2;
}
/* Checkout button = pill */
.cart-drawer__footer .cart__ctas button,
.cart-drawer__footer .cart__ctas .button {
border-radius: 999px !important;
padding: 18px 18px !important;
font-weight: 800 !important;
font-size: 16px !important;
}
/* Add space between totals and the Secure Checkout button */
.cart-drawer__footer .totals{
padding-bottom: 12px !important;
}
/* Move the footer divider line DOWN (closer to Shipping/Free) */
.cart-drawer__footer{
padding-top: 0px !important; /* removes space ABOVE the divider */
}
/* Pull the totals block UP toward the footer divider */
.cart-drawer__footer .totals{
margin-top: -30px !important; /* adjust this number to taste */
padding-top: 10px !important; /* keeps a little breathing room */
}
/* ================================
Gotham Bold (Headings + Titles)
Fixes collection card title sizing
================================ */
/* 1) Correct font-face weight */
@font-face {
font-family: "GothamOfficeBold";
src: url("/cdn/shop/files/GothamOffice-Bold.woff2?v=1768853163") format("woff2"),
url("/cdn/shop/files/GothamOffice-Bold.woff?v=1768853163") format("woff");
font-weight: 700;
font-style: normal;
font-display: swap;
}
/* 2) Headings + key titles */
h1, h2, h3, h4, h5, h6,
.heading,
.h0, .h1, .h2, .h3, .h4, .h5,
.product__title,
.drawer__heading,
.cart__heading,
.collection-hero__title,
.banner__heading,
.rich-text__heading {
font-family: "GothamOfficeBold", var(--font-heading-family), sans-serif !important;
font-weight: 700 !important;
}
/* 3) ✅ Collection product card titles (the circled area) */
.card__heading,
.card__heading a {
font-family: "GothamOfficeBold", var(--font-heading-family), sans-serif !important;
font-weight: 700 !important;
font-size: 19px !important; /* <-- bumps it back up */
line-height: 1.15 !important;
letter-spacing: -0.2px !important;
}
/* Optional: Desktop slight refinement */
@media (min-width: 750px) {
.card__heading,
.card__heading a {
font-size: 19px !important;
}
}
/* ================================
Product page title — Desktop only
(Keeps mobile the same)
================================ */
/* Desktop only */
@media (min-width: 750px) {
.product__title,
.product__title h1,
.product__title .h1 {
font-size: 100px !important; /* ← change this number */
line-height: 1.05 !important;
letter-spacing: -0.6px !important;
}
}
/* =========================================================
AppleSauce — Cart Drawer Quantity Pill (FINAL)
Fixes:
- Plus icon disappearing / being clipped
- Weird square segment look inside the pill
- Balanced - 1 + spacing (desktop + mobile)
========================================================= */
#CartDrawer quantity-input.quantity.cart-quantity{
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
width: 150px !important;
min-width: 150px !important;
max-width: 150px !important;
height: 44px !important;
border-radius: 999px !important;
overflow: hidden !important;
background: #fff !important;
border: 1px solid rgba(0,0,0,.30) !important;
box-shadow:
0 2px 8px rgba(0,0,0,.10) !important;
}
/* Remove any default pseudo borders/lines Shopify may add */
#CartDrawer quantity-input.quantity.cart-quantity::before,
#CartDrawer quantity-input.quantity.cart-quantity::after{
content: none !important;
display: none !important;
}
/* Minus + Plus buttons */
#CartDrawer quantity-input.quantity.cart-quantity .quantity__button{
flex: 0 0 50px !important;
width: 50px !important;
height: 44px !important;
display: grid !important;
place-items: center !important;
background: transparent !important;
border: 0 !important;
padding: 0 !important;
margin: 0 !important;
color: #111 !important; /* IMPORTANT: makes SVG visible */
}
/* Kill any weird inner overlays/dividers on buttons */
#CartDrawer quantity-input.quantity.cart-quantity .quantity__button::before,
#CartDrawer quantity-input.quantity.cart-quantity .quantity__button::after{
content: none !important;
display: none !important;
}
/* The SVG icons inside +/- buttons */
#CartDrawer quantity-input.quantity.cart-quantity .quantity__button svg{
width: 16px !important;
height: 16px !important;
display: block !important;
/* uses currentColor, so this ensures it's not white/invisible */
fill: currentColor !important;
}
/* Quantity number input (center) */
#CartDrawer quantity-input.quantity.cart-quantity .quantity__input{
flex: 1 1 auto !important;
width: auto !important;
min-width: 40px !important;
height: 44px !important;
line-height: 44px !important;
border: 0 !important;
background: transparent !important;
padding: 0 !important;
margin: 0 !important;
text-align: center !important;
font-size: 16px !important;
font-weight: 800 !important;
color: #111 !important;
box-shadow: none !important;
outline: none !important;
}
/* Optional: subtle separators (soft, not square blocks) */
#CartDrawer quantity-input.quantity.cart-quantity .quantity__button[name="minus"]{
box-shadow: inset -1px 0 0 rgba(0,0,0,.14) !important;
}
#CartDrawer quantity-input.quantity.cart-quantity .quantity__button[name="plus"]{
box-shadow: inset 1px 0 0 rgba(0,0,0,.14) !important;
}
/* Mobile: slightly tighter so it never feels chunky */
@media (max-width: 749px){
#CartDrawer quantity-input.quantity.cart-quantity{
width: 135px !important;
min-width: 135px !important;
max-width: 135px !important;
}
#CartDrawer quantity-input.quantity.cart-quantity .quantity__button{
flex: 0 0 44px !important;
width: 44px !important;
}
}
/* iPhone SE / very small screens */
@media (max-width: 390px){
#CartDrawer quantity-input.quantity.cart-quantity{
width: 122px !important;
min-width: 122px !important;
max-width: 122px !important;
}
#CartDrawer quantity-input.quantity.cart-quantity .quantity__button{
flex: 0 0 40px !important;
width: 40px !important;
}
#CartDrawer quantity-input.quantity.cart-quantity .quantity__input{
font-size: 15px !important;
}
}
/* ✅ Fix: Center + and - perfectly without making them bigger */
#CartDrawer quantity-input.quantity.cart-quantity .quantity__button{
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
}
#CartDrawer quantity-input.quantity.cart-quantity .quantity__button .svg-wrapper{
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
height: 100% !important;
}
/* ✅ Force the icon size to stay consistent (prevents random scaling) */
#CartDrawer quantity-input.quantity.cart-quantity .quantity__button svg{
width: 12px !important;
height: 12px !important;
}
/* Mobile: make ONLY the Size dropdown shorter + replace Optis arrow with clean chevron */
@media (max-width: 768px){
/* set the width of the Size dropdown */
.bss-se-variant.optis-variant-picker
.se-option[data-name="Size"]
.se-type-dropdown,
.bss-se-variant.optis-variant-picker
.se-option[data-name="Size"]
.se-dropdown{
width: 62% !important; /* adjust: 55%–70% */
max-width: 340px !important; /* optional */
}
/* main selected "pill" layout */
.bss-se-variant.optis-variant-picker
.se-option[data-name="Size"]
.se-dropdown-selected{
width: 100% !important;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 12px !important;
box-sizing: border-box !important;
/* IMPORTANT: give room for our custom chevron */
padding-right: 44px !important;
position: relative !important;
background-image: none !important;
-webkit-appearance: none !important;
appearance: none !important;
}
/* remove any built-in pseudo icons Optis may add */
.bss-se-variant.optis-variant-picker
.se-option[data-name="Size"]
.se-dropdown-selected::before{
content: none !important;
display: none !important;
}
/* hide Optis arrow element entirely (kills the “bracket” artifact) */
.bss-se-variant.optis-variant-picker
.se-option[data-name="Size"]
.se-dropdown-arrow{
display: none !important;
}
/* let the text take the space */
.bss-se-variant.optis-variant-picker
.se-option[data-name="Size"]
.se-dropdown-placeholder{
flex: 1 1 auto !important;
min-width: 0 !important;
}
/* draw our own clean chevron */
.bss-se-variant.optis-variant-picker
.se-option[data-name="Size"]
.se-dropdown-selected::after{
content: "" !important;
position: absolute !important;
right: 18px !important;
top: 50% !important;
width: 10px !important;
height: 10px !important;
border-right: 2px solid rgba(17,17,17,.75) !important;
border-bottom: 2px solid rgba(17,17,17,.75) !important;
transform: translateY(-60%) rotate(45deg) !important;
pointer-events: none !important;
}
}
/* =========================================================
AppleSauce — Put Size dropdown ABOVE Colour swatches
Applies to ALL products using Optis Variant Picker
========================================================= */
/* Make the option rows reorderable */
optis-variant-picker{
display: flex !important;
flex-direction: column !important;
}
/* Force Size first */
optis-variant-picker .se-option[data-name="Size"]{
order: 1 !important;
}
/* Force Colour/Color second */
optis-variant-picker .se-option[data-name="Colour"],
optis-variant-picker .se-option[data-name="Color"]{
order: 2 !important;
}