/* ========================================================= DOT 01 — COLLECTION HOVER SIZE SELECTOR Desktop only. Displays all available size options in one horizontal row. Automatically adjusts spacing for products with more sizes. ========================================================= */ @media screen and (min-width: 700px) { .product-list .product-card__floating-size-selector { display: grid !important; grid-template-columns: repeat( auto-fit, minmax(0, 1fr) ) !important; grid-auto-flow: column !important; grid-auto-columns: minmax(0, 1fr) !important; gap: 3px !important; } .product-list .floating-size-selector__button { min-width: 0 !important; width: 100% !important; height: 36px !important; padding: 0 1px !important; font-size: 11px !important; border-radius: 4px !important; box-sizing: border-box !important; } } /* ========================================================= DOT 02 — COLLECTION QUICK NAVIGATION Changes circular category thumbnails to rounded squares. Reduces vertical spacing around the navigation. ========================================================= */ .collection-quick-navigation { padding-top:24px!important; /* reduce space inside top */ padding-bottom:10px!important; /* reduce space inside bottom */ padding-left:14px!important; /* horizontal spacing for edges */ padding-right:14px!important; } .collection-quick-navigation__item .rounded-full { border-radius:6px!important; /* soft corners on squares */ } /* ========================================================= DOT 03 — COMPLEMENTARY PRODUCTS (WEAR WITH) Hides the quick-buy link. Keeps product titles and prices on a single line. Adjusts typography and spacing. ========================================================= */ scroll-carousel.complementary-products button.link.subheading.subheading-xs { display: none !important; } scroll-carousel.complementary-products a.heading, scroll-carousel.complementary-products price-list, scroll-carousel.complementary-products price-list * { display:block!important; max-width:100%!important; white-space:nowrap!important; overflow:hidden!important; text-overflow:clip!important; font-size:0.90em!important; /* 90% of whatever the theme sets */ line-height:1.7!important; } /* ========================================================= DOT 04 — SOLD-OUT SIZE STYLING Applies to collection hover sizes and product page sizes. Adds diagonal lines to unavailable sizes. Removes strikethrough text and adjusts opacity. ========================================================= */ /* Sold-out appearance */ .product-card .floating-size-selector__button:is( [disabled], [aria-disabled="true"], .is-disabled ), .variant-picker__option-values .block-swatch:is(.is-disabled, [aria-disabled="true"]), .variant-picker__option-values input[disabled] + .block-swatch { position: relative !important; overflow: hidden !important; text-decoration: none !important; opacity: var(--size-sold-out-opacity, 0.70) !important; } /* Remove text strikethrough */ .product-card .floating-size-selector__button:is( [disabled], [aria-disabled="true"], .is-disabled ) *, .variant-picker__option-values .block-swatch:is(.is-disabled, [aria-disabled="true"]) *, .variant-picker__option-values input[disabled] + .block-swatch * { text-decoration: none !important; } /* Remove alternate sold-out lines */ .product-card .floating-size-selector__button:is( [disabled], [aria-disabled="true"], .is-disabled )::before, .variant-picker__option-values .block-swatch:is(.is-disabled, [aria-disabled="true"])::before, .variant-picker__option-values input[disabled] + .block-swatch::before { content: none !important; } /* Shared diagonal */ .product-card .floating-size-selector__button:is( [disabled], [aria-disabled="true"], .is-disabled )::after, .variant-picker__option-values .block-swatch:is(.is-disabled, [aria-disabled="true"])::after, .variant-picker__option-values input[disabled] + .block-swatch::after { content: "" !important; position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; background: linear-gradient( to top right, transparent calc(50% - 0.5px), currentColor 50%, transparent calc(50% + 0.5px) ) !important; transform: none !important; opacity: 1 !important; pointer-events: none !important; } /* ========================================================= DOT 05 — PRODUCT PAGE SIZE APPEARANCE Controls available, selected, and sold-out size colors. Adjusts borders, opacity, and desktop font size. ========================================================= */ :where(.product-info) { --size-text-color: #353535; --size-selected-fill: #353535; --size-selected-text: #FFFFFF; --size-sold-out-opacity: 0.40; } /* Unselected size text and borders */ .product-info input:not(:checked) + .block-swatch { color: var(--size-text-color) !important; border-color: currentColor !important; } /* Selected size */ .product-info input:checked + .block-swatch { background: var(--size-selected-fill) !important; color: var(--size-selected-text) !important; border-color: var(--size-selected-fill) !important; box-shadow: none !important; } /* Labels inherit the box's text color */ .product-info .block-swatch * { color: inherit !important; } /* Available sizes */ .product-info .variant-picker__option-values .block-swatch { opacity: 1 !important; } /* Sold-out sizes: override the available-size opacity */ .product-info .variant-picker__option-values .block-swatch:is(.is-disabled, [aria-disabled="true"]), .product-info .variant-picker__option-values input[disabled] + .block-swatch { opacity: var(--size-sold-out-opacity) !important; } /* Match your existing desktop label size */ @media screen and (min-width: 750px) { .product-info .block-swatch span { font-size: 12px !important; } } /* ========================================================= DOT 06 — PRODUCT PAGE INVENTORY MESSAGING Controls inventory message positioning and spacing. Centers inventory notifications. Hides normal in-stock messages while preserving layout. ========================================================= */ :where(.product-info) { --inventory-row-height: 1px; --inventory-pull-top: -12px; --inventory-pull-bottom: -5px; } /* Keep the inventory block at a consistent height */ .product-info .product-info__block-item[data-block-type="inventory"] { min-height: var(--inventory-row-height) !important; height: var(--inventory-row-height) !important; margin-top: var(--inventory-pull-top) !important; margin-bottom: var(--inventory-pull-bottom) !important; padding-top: 0 !important; padding-bottom: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; } /* Center the inventory notification */ .product-info .product-info__block-item[data-block-type="inventory"] variant-inventory { min-height: var(--inventory-row-height) !important; height: var(--inventory-row-height) !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; text-align: center !important; color: inherit !important; } /* Keep inventory text tight and centered */ .product-info .product-info__block-item[data-block-type="inventory"] .inventory__text { margin: 0 !important; padding: 0 !important; line-height: 18px !important; text-align: center !important; color: inherit !important; } /* Hide the normal in-stock message while preserving its space */ .product-info .product-info__block-item[data-block-type="inventory"]:has( variant-inventory.text-success ) { visibility: hidden !important; } /* Remove the inventory status dot */ .product-info .product-info__block-item[data-block-type="inventory"] .inventory__text::before, .product-info .product-info__block-item[data-block-type="inventory"] .inventory__text::after { display: none !important; content: none !important; } /* Darker available, unselected sizes */ .product-info .variant-picker__option-values input:not(:disabled):not(:checked) + .block-swatch:not(.is-disabled):not([aria-disabled="true"]) { color: var(--size-available-color, #222222) !important; border-color: currentColor !important; } /* ========================================================= DOT 07 — PRODUCT PAGE SIZE PICKER LAYOUT Keeps size options in one evenly spaced horizontal row. Controls size box dimensions and mobile spacing. ========================================================= */ /* Size picker: one evenly spaced row */ .variant-picker__option-values { display: flex !important; flex-wrap: nowrap !important; gap: 6px !important; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; padding: 4px 0 8px; } /* Size boxes shrink equally to fit */ .variant-picker__option-values .block-swatch { flex: 1 1 0 !important; width: 0 !important; min-width: 0 !important; max-width: none !important; min-height: 44px; padding-inline: 2px !important; box-sizing: border-box; display: flex; align-items: center; justify-content: center; text-align: center; } /* Tighter spacing and smaller labels on phones */ @media (max-width: 749px) { .variant-picker__option-values { gap: 4px !important; } .variant-picker__option-values .block-swatch { font-size: 14px !important; } } /* Selected size: remove contrasting rim */ .variant-picker__option-values input:checked + .block-swatch { border-color: transparent !important; box-shadow: none !important; } /* Center the cart drawer's free-shipping message */ #cart-drawer .free-shipping-bar > span { width: 100% !important; text-align: center !important; justify-self: stretch !important; } /* ========================================================= DOT 09 — MOBILE COLLECTION PRODUCT CARD IMAGE SWIPE + SIZE AVAILABILITY ========================================================= */ @media screen and (max-width: 699px) { /* ========================================================= EASY CONTROLS ========================================================= Adjust these later if needed. */ .product-card { --dot-size-font-size: inherit; --dot-size-gap: 8px; --dot-size-available-opacity: 1; --dot-size-unavailable-opacity: 0.28; --dot-size-transition-speed: 220ms; } /* ========================================================= MOBILE IMAGE SWIPE ========================================================= */ .product-card__figure.dot-mobile-swipe { touch-action: pan-y; } /* IMAGE 2 Stretch normally hides image 2 on touch devices. Make it available and place it directly to the right. */ .product-card__figure.dot-mobile-swipe .product-card__image--secondary { display: block !important; opacity: 1 !important; transform: translate3d(100%, 0, 0) !important; transition: none !important; will-change: transform; } /* IMAGE 1 */ .product-card__figure.dot-mobile-swipe .product-card__image--primary { opacity: 1 !important; transition: none !important; will-change: transform; } /* Smooth snap after finger release. */ .product-card__figure.dot-mobile-swipe.dot-snap .product-card__image--primary, .product-card__figure.dot-mobile-swipe.dot-snap .product-card__image--secondary { transition: transform 260ms cubic-bezier(.22,.61,.36,1) !important; } /* ========================================================= PRODUCT INFO ========================================================= */ .product-card__info { position: relative; } /* ========================================================= SIZE AVAILABILITY LINE ========================================================= */ .dot-card-sizes { display: flex; align-items: center; justify-content: center; /* IMPORTANT: Sizes can NEVER move to a second line. */ flex-wrap: nowrap; white-space: nowrap; width: 100%; min-width: 0; gap: var(--dot-size-gap); /* Inherit the product card typography. This makes the size text match the price typography instead of creating a separate style. */ font-size: var(--dot-size-font-size); line-height: inherit; font-family: inherit; font-weight: inherit; letter-spacing: inherit; margin: 0; padding: 0; /* Hidden while image 1 is active. */ opacity: 0; visibility: hidden; transition: opacity var(--dot-size-transition-speed) ease, visibility var(--dot-size-transition-speed) ease; } /* INDIVIDUAL SIZE */ .dot-card-size { opacity: var(--dot-size-available-opacity); flex: 0 1 auto; min-width: 0; } /* SOLD OUT SIZE */ .dot-card-size.is-unavailable { opacity: var(--dot-size-unavailable-opacity); } /* ========================================================= PRICE ↔ SIZE POSITION ========================================================= The sizes are positioned over the same visual area occupied by the price. This means: IMAGE 1 $285 ↓ swipe IMAGE 2 30 31 32 33 34 36 without moving the title. */ .product-card .price-list { transition: opacity var(--dot-size-transition-speed) ease, visibility var(--dot-size-transition-speed) ease; } .product-card .dot-card-sizes { position: absolute; left: 0; right: 0; bottom: 1.15em; margin: 0; padding: 0; } /* ========================================================= IMAGE 1 STATE SHOW PRICE ========================================================= */ .product-card:not(.dot-show-sizes) .price-list { opacity: 1; visibility: visible; } .product-card:not(.dot-show-sizes) .dot-card-sizes { opacity: 0; visibility: hidden; } /* ========================================================= IMAGE 2 STATE SHOW SIZES ========================================================= */ .product-card.dot-show-sizes .price-list { opacity: 0; visibility: hidden; } .product-card.dot-show-sizes .dot-card-sizes { opacity: 1; visibility: visible; } /* ========================================================= PRODUCTS WITH MANY SIZES ========================================================= Automatically tighten spacing as the number of sizes increases. */ /* 8+ sizes */ .product-card .dot-card-sizes:has(.dot-card-size:nth-child(8)) { --dot-size-gap: 6px; } /* 10+ sizes */ .product-card .dot-card-sizes:has(.dot-card-size:nth-child(10)) { --dot-size-gap: 4px; } } /* ========================================================= DOT 10: MOBILE MENU SECONDARY NAVIGATION Match main menu typography ========================================================= */ @media screen and (max-width: 699px) { .menu-drawer__panel-body > ul:not(.faded-linklist) a.subheading { font-size: var(--text-h4) !important; font-family: var(--heading-font-family) !important; font-weight: var(--heading-font-weight) !important; line-height: var(--heading-line-height) !important; letter-spacing: var(--heading-letter-spacing) !important; text-transform: none !important; } } /* ========================================================= DOT 11 | MOBILE PRODUCT GALLERY PAGINATION DOTS ========================================================= */ @media screen and (max-width: 699px) { /* Inactive dots */ .shopify-section--main-product .scroll-marker { background-color: rgba(255, 255, 255, 0.4) !important; } /* Active dot */ .shopify-section--main-product .scroll-marker[aria-current="true"] { background-color: #FFFFFF !important; } }