diff --git a/assets/base.css b/assets/base.css
index 91012cce3..354234c7b 100644
--- a/assets/base.css
+++ b/assets/base.css
@@ -78,6 +78,7 @@ select {
/* Editorial layout */
.resource-list:not(.hidden--desktop) .collection-card--flexible-aspect-ratio,
.resource-list:not(.hidden--desktop) .blog-post-card--flexible-aspect-ratio {
+
.collection-card__image,
.featured-blog-posts-card__image,
.blog-placeholder-svg {
@@ -168,6 +169,7 @@ select {
}
@media (any-pointer: fine) and (prefers-reduced-motion: no-preference) {
+
.card-hover-effect-lift .product-card:hover,
.card-hover-effect-lift .collection-card:hover,
.card-hover-effect-lift .resource-card:hover,
@@ -277,7 +279,7 @@ p:empty {
}
:first-child:is(p, h1, h2, h3, h4, h5, h6),
-:first-child:empty + :where(p, h1, h2, h3, h4, h5, h6) {
+:first-child:empty+ :where(p, h1, h2, h3, h4, h5, h6) {
margin-block-start: 0;
}
@@ -389,6 +391,7 @@ p:empty {
}
@media screen and (min-width: 750px) {
+
.page-width-wide,
.page-width-normal,
.page-width-narrow,
@@ -425,19 +428,14 @@ p:empty {
full-width background image even if the section content is constrained by the page width. Do not try
to rewrite this to max-width: --page-width; margin: 0 auto;, it doesn't work. */
.section {
- --full-page-grid-central-column-width: min(
- var(--page-width) - var(--page-margin) * 2,
- calc(100% - var(--page-margin) * 2)
- );
+ --full-page-grid-central-column-width: min(var(--page-width) - var(--page-margin) * 2,
+ calc(100% - var(--page-margin) * 2));
--full-page-grid-margin: minmax(var(--page-margin), 1fr);
- --full-page-grid-with-margins: var(--full-page-grid-margin) var(--full-page-grid-central-column-width)
- var(--full-page-grid-margin);
+ --full-page-grid-with-margins: var(--full-page-grid-margin) var(--full-page-grid-central-column-width) var(--full-page-grid-margin);
/* Utility variable gives the grid's first column width. Provides an offset width for components like carousels */
- --util-page-margin-offset: max(
- var(--page-margin),
- calc((100% - min(var(--page-content-width), 100% - var(--page-margin) * 2)) / 2)
- );
+ --util-page-margin-offset: max(var(--page-margin),
+ calc((100% - min(var(--page-content-width), 100% - var(--page-margin) * 2)) / 2));
/* Offset for full-width sections to account for the page margin,
used for Marquee — note that --util-page-margin-offset doesn't work here */
@@ -455,7 +453,7 @@ p:empty {
}
/* Place all direct children in the center column by default */
-.section > * {
+.section>* {
grid-column: 2;
}
@@ -476,28 +474,28 @@ p:empty {
}
/* For page-width sections, all content goes in the center column */
-.section--page-width > * {
+.section--page-width>* {
grid-column: 2;
}
/* For full-width sections, content spans all columns */
-.section--full-width > * {
+.section--full-width>* {
grid-column: 1 / -1;
}
@media screen and (max-width: 749px) {
- .section--mobile-full-width > * {
+ .section--mobile-full-width>* {
grid-column: 1 / -1;
}
}
/* Some page-width sections should still extend all the way to the right edge of the page, e.g. collection carousel */
-.section--page-width.section--full-width-right > * {
+.section--page-width.section--full-width-right>* {
grid-column: 2 / 4;
}
/* For full-width sections with margin, content still spans full width but with space on the sides */
-.section--full-width.section--full-width-margin > * {
+.section--full-width.section--full-width-margin>* {
grid-column: 1 / -1;
@media screen and (min-width: 750px) {
@@ -507,7 +505,7 @@ p:empty {
}
/* Some section content break out to full width of the page */
-.section > .force-full-width {
+.section>.force-full-width {
grid-column: 1 / -1;
}
@@ -542,6 +540,7 @@ p:empty {
}
@media screen and (max-width: 749px) {
+
.hidden--mobile,
.mobile\:hidden {
/* stylelint-disable-next-line declaration-no-important */
@@ -550,6 +549,7 @@ p:empty {
}
@media screen and (min-width: 750px) {
+
.hidden--desktop,
.desktop\:hidden {
/* stylelint-disable-next-line declaration-no-important */
@@ -623,11 +623,8 @@ p:empty {
@media screen and (min-width: 1400px) {
.grid {
grid-template-columns:
- 1fr repeat(
- var(--centered-column-number),
- minmax(0, calc((var(--page-width) - var(--page-margin) * 2) / var(--centered-column-number)))
- )
- 1fr;
+ 1fr repeat(var(--centered-column-number),
+ minmax(0, calc((var(--page-width) - var(--page-margin) * 2) / var(--centered-column-number)))) 1fr;
}
}
@@ -733,7 +730,7 @@ p:empty {
height: var(--icon-size-xs);
}
-.svg-wrapper > svg {
+.svg-wrapper>svg {
width: var(--icon-size-sm);
height: var(--icon-size-sm);
}
@@ -773,7 +770,7 @@ slideshow-component [data-placeholder='true'] * {
/* Base text and heading styles */
body,
.paragraph:not(.button),
-.paragraph > *,
+.paragraph>*,
.text-block.paragraph :is(h1, h2, h3, h4, h5, h6) {
font-family: var(--font-paragraph--family);
font-style: var(--font-paragraph--style);
@@ -787,6 +784,7 @@ body,
/* Ensure inputs with type presets maintain minimum 16px on mobile to prevent iOS zoom */
@media screen and (max-width: 1200px) {
+
input.paragraph.paragraph,
input.paragraph.paragraph:not([type]),
textarea.paragraph.paragraph,
@@ -795,7 +793,7 @@ body,
}
}
-.paragraph > small {
+.paragraph>small {
font-size: smaller;
}
@@ -803,7 +801,7 @@ body,
h1,
.h1.h1,
-.text-block.h1 > *,
+.text-block.h1>*,
.text-block.h1 :is(h1, h2, h3, h4, h5, h6) {
font-family: var(--font-h1--family);
font-style: var(--font-h1--style);
@@ -816,6 +814,7 @@ h1,
}
@media screen and (max-width: 1200px) {
+
input.h1.h1,
textarea.h1.h1,
select.h1.h1 {
@@ -825,7 +824,7 @@ h1,
h2,
.h2.h2,
-.text-block.h2 > *,
+.text-block.h2>*,
.text-block.h2 :is(h1, h2, h3, h4, h5, h6) {
font-family: var(--font-h2--family);
font-style: var(--font-h2--style);
@@ -838,6 +837,7 @@ h2,
}
@media screen and (max-width: 1200px) {
+
input.h2.h2,
textarea.h2.h2,
select.h2.h2 {
@@ -848,7 +848,7 @@ h2,
h3,
.h3,
.h3.h3,
-.text-block.h3 > *,
+.text-block.h3>*,
.text-block.h3 :is(h1, h2, h3, h4, h5, h6) {
font-family: var(--font-h3--family);
font-style: var(--font-h3--style);
@@ -861,6 +861,7 @@ h3,
}
@media screen and (max-width: 1200px) {
+
input.h3,
textarea.h3,
select.h3 {
@@ -870,7 +871,7 @@ h3,
h4,
.h4.h4,
-.text-block.h4 > *,
+.text-block.h4>*,
.text-block.h4 :is(h1, h2, h3, h4, h5, h6) {
font-family: var(--font-h4--family);
font-style: var(--font-h4--style);
@@ -883,6 +884,7 @@ h4,
}
@media screen and (max-width: 1200px) {
+
input.h4.h4,
textarea.h4.h4,
select.h4.h4 {
@@ -892,7 +894,7 @@ h4,
h5,
.h5.h5,
-.text-block.h5 > *,
+.text-block.h5>*,
.text-block.h5 :is(h1, h2, h3, h4, h5, h6) {
font-family: var(--font-h5--family);
font-style: var(--font-h5--style);
@@ -905,6 +907,7 @@ h5,
}
@media screen and (max-width: 1200px) {
+
input.h5.h5,
textarea.h5.h5,
select.h5.h5 {
@@ -914,7 +917,7 @@ h5,
h6,
.h6.h6,
-.text-block.h6 > *,
+.text-block.h6>*,
.text-block.h6 :is(h1, h2, h3, h4, h5, h6) {
font-family: var(--font-h6--family);
font-style: var(--font-h6--style);
@@ -927,6 +930,7 @@ h6,
}
@media screen and (max-width: 1200px) {
+
input.h6.h6,
textarea.h6.h6,
select.h6.h6 {
@@ -954,7 +958,7 @@ a {
color var(--animation-speed) var(--animation-easing);
}
-:is(h1, h2, h3, h4, h5, h6, p) > a:hover {
+:is(h1, h2, h3, h4, h5, h6, p)>a:hover {
--button-color: var(--color, var(--color-primary-hover));
}
@@ -983,7 +987,7 @@ details:not([open]) .summary-open {
display: none;
}
-details[open] > summary .icon-animated > svg {
+details[open]>summary .icon-animated>svg {
transform: rotate(180deg);
}
@@ -993,17 +997,17 @@ summary::-webkit-details-marker {
}
/* When header is transparent, pull the first main content section up to sit under the floating header */
-body:has(.header[transparent]) .content-for-layout > .shopify-section:first-child {
+body:has(.header[transparent]) .content-for-layout>.shopify-section:first-child {
margin-top: calc(var(--header-group-height) * -1);
}
-body:has(.header[transparent]) #header-group > .header-section {
+body:has(.header[transparent]) #header-group>.header-section {
z-index: var(--layer-sticky);
}
/* All other header group content should be beneath the floating header,
but above the rest of the page content */
-body:has(.header[transparent]) #header-group > *:not(.header-section) {
+body:has(.header[transparent]) #header-group>*:not(.header-section) {
z-index: calc(var(--layer-sticky) - 1);
}
@@ -1085,13 +1089,13 @@ body:has(.header[transparent]) #header-group > *:not(.header-section) {
}
}
-.product-grid__card .group-block > * {
+.product-grid__card .group-block>* {
@media screen and (max-width: 749px) {
flex-direction: column;
}
}
-ul[product-grid-view='zoom-out'] .product-grid__card > * {
+ul[product-grid-view='zoom-out'] .product-grid__card>* {
display: none;
}
@@ -1099,21 +1103,17 @@ ul[product-grid-view='zoom-out'] .product-grid__card .card-gallery {
display: block;
}
-[product-grid-view='zoom-out']
- .card-gallery
- > :is(quick-add-component, .product-badges, slideshow-component > slideshow-controls) {
+[product-grid-view='zoom-out'] .card-gallery> :is(quick-add-component, .product-badges, slideshow-component > slideshow-controls) {
display: none;
}
-ul[product-grid-view='zoom-out'] .card-gallery > img {
+ul[product-grid-view='zoom-out'] .card-gallery>img {
display: block;
}
[product-grid-view='zoom-out'] {
- --product-grid-columns-desktop: repeat(
- 10,
- minmax(clamp(50px, calc(100% - 9 * var(--product-grid-gap)) / 10, 80px), 1fr)
- );
+ --product-grid-columns-desktop: repeat(10,
+ minmax(clamp(50px, calc(100% - 9 * var(--product-grid-gap)) / 10, 80px), 1fr));
}
.product-grid-view-zoom-out--details {
@@ -1136,15 +1136,15 @@ ul[product-grid-view='zoom-out'] .card-gallery > img {
font-weight: 400;
}
-.product-grid-view-zoom-out--details > span.h6,
-.product-grid-view-zoom-out--details > div.h6 > product-price {
+.product-grid-view-zoom-out--details>span.h6,
+.product-grid-view-zoom-out--details>div.h6>product-price {
display: inline-block;
line-height: 0;
margin-top: var(--margin-2xs);
}
-.product-grid-view-zoom-out--details > span.h6 > *,
-.product-grid-view-zoom-out--details > div.h6 > * > * {
+.product-grid-view-zoom-out--details>span.h6>*,
+.product-grid-view-zoom-out--details>div.h6>*>* {
line-height: 1.2;
}
@@ -1242,18 +1242,18 @@ results-list[initialized] {
width: 100%;
}
-.text-block > *:first-child,
-.text-block > *:first-child:empty + * {
+.text-block>*:first-child,
+.text-block>*:first-child:empty+* {
margin-block-start: 0;
}
-.text-block > *:last-child,
-.text-block > *:has(+ *:last-child:empty) {
+.text-block>*:last-child,
+.text-block>*:has(+ *:last-child:empty) {
margin-block-end: 0;
}
/* This is to deal with the margin applied to the p when custom styles are enabled. The p isn't the first child anymore due to the style tag */
-.text-block > style + * {
+.text-block>style+* {
margin-block-start: 0;
}
@@ -1309,6 +1309,7 @@ results-list[initialized] {
--dialog-drawer-opening-animation: move-and-fade;
--dialog-drawer-closing-animation: move-and-fade;
}
+
/* stylelint-enable value-keyword-case */
.dialog-drawer[open] {
@@ -1524,8 +1525,7 @@ shopify-accelerated-checkout-cart {
--shopify-accelerated-checkout-button-block-size: var(--height-buy-buttons);
}
-.product-form-buttons:has(.add-to-cart-button.button-secondary)
- :is(shopify-accelerated-checkout, shopify-accelerated-checkout-cart) {
+.product-form-buttons:has(.add-to-cart-button.button-secondary) :is(shopify-accelerated-checkout, shopify-accelerated-checkout-cart) {
--shopify-accelerated-checkout-button-border-radius: var(--style-border-radius-buttons-secondary);
--shopify-accelerated-checkout-button-block-size: var(--height-buy-buttons);
}
@@ -1572,14 +1572,14 @@ summary .icon-plus :is(.horizontal, .vertical),
opacity: 1;
}
-details[open] > summary .icon-plus .horizontal,
-.details-open > summary .icon-plus .horizontal,
+details[open]>summary .icon-plus .horizontal,
+.details-open>summary .icon-plus .horizontal,
.show-more:where([data-expanded='true']) .show-more__button .icon-plus .horizontal {
transform: rotate(90deg);
}
-details[open] > summary .icon-plus .vertical,
-.details-open > summary .icon-plus .vertical,
+details[open]>summary .icon-plus .vertical,
+.details-open>summary .icon-plus .vertical,
.show-more:where([data-expanded='true']) .show-more__button .icon-plus .vertical {
transform: rotate(90deg);
opacity: 0;
@@ -1604,7 +1604,7 @@ media-gallery {
}
}
-:not(.dialog-zoomed-gallery) > .product-media-container {
+:not(.dialog-zoomed-gallery)>.product-media-container {
--slide-width: 100%;
display: flex;
@@ -1905,7 +1905,7 @@ zoom-dialog dialog {
}
/* If the product media is already providing an image cover, hide images provided by sibling deferred-media */
-.product-media__image ~ * .deferred-media__poster-image {
+.product-media__image~* .deferred-media__poster-image {
display: none;
}
@@ -1926,7 +1926,7 @@ zoom-dialog dialog {
product-model model-viewer,
/* Media that have a poster button sibling providing the size should be absolute-positioned.
Otherwise, it should be a block to rely on its own size */
-:is(deferred-media, product-model) > .deferred-media__poster-button ~ *:not(template) {
+:is(deferred-media, product-model)>.deferred-media__poster-button~*:not(template) {
display: block;
position: absolute;
top: 0;
@@ -1951,16 +1951,14 @@ slideshow-slide .shopify-model-viewer-ui__controls-area.shopify-model-viewer-ui_
}
@media screen and (max-width: 749px) {
- slideshow-component:has(:not(.mobile\:hidden) :is(.slideshow-controls__dots, .slideshow-controls__counter))
- .shopify-model-viewer-ui__controls-area {
+ slideshow-component:has(:not(.mobile\:hidden) :is(.slideshow-controls__dots, .slideshow-controls__counter)) .shopify-model-viewer-ui__controls-area {
/* Position the controls just above the counter */
bottom: calc(var(--minimum-touch-target) + var(--padding-sm));
}
}
@media screen and (min-width: 750px) {
- slideshow-component:has(:not(.desktop\:hidden) :is(.slideshow-controls__dots, .slideshow-controls__counter))
- .shopify-model-viewer-ui__controls-area {
+ slideshow-component:has(:not(.desktop\:hidden) :is(.slideshow-controls__dots, .slideshow-controls__counter)) .shopify-model-viewer-ui__controls-area {
/* Position the controls just above the counter */
bottom: calc(var(--minimum-touch-target) + var(--padding-sm));
}
@@ -1980,6 +1978,7 @@ slideshow-slide .shopify-model-viewer-ui__controls-area.shopify-model-viewer-ui_
}
deferred-media {
+
/* The overflow hidden in the deferred-media won't let the button show the focus ring */
&:has(:focus-visible) {
outline: var(--focus-outline-width) solid currentcolor;
@@ -2067,7 +2066,7 @@ deferred-media[class] :is(.deferred-media__poster-button img, .deferred-media__p
padding: var(--padding-md);
}
-.button-shopify-xr > svg {
+.button-shopify-xr>svg {
width: var(--icon-size-sm);
height: var(--icon-size-sm);
margin-inline-end: var(--margin-md);
@@ -2080,8 +2079,10 @@ deferred-media[class] :is(.deferred-media__poster-button img, .deferred-media__p
/* Swatches */
.swatch {
--color-border: rgb(var(--color-foreground-rgb) / var(--style-border-swatch-opacity));
- --min-width-unitless: 15.9999; /* want to avoid division by 0 */
- --min-height-unitless: 15.9999; /* want to avoid division by 0 */
+ --min-width-unitless: 15.9999;
+ /* want to avoid division by 0 */
+ --min-height-unitless: 15.9999;
+ /* want to avoid division by 0 */
--min-height: 16px;
--min-width: 16px;
@@ -2110,27 +2111,19 @@ deferred-media[class] :is(.deferred-media__poster-button img, .deferred-media__p
We also want the result to always be smaller than the input (pdp > everywhere else)
by some scaling factor.
*/
- --offset-scaled-width: calc(
- var(--scaling-factor) * var(--offset-swatch-width) / var(--offset-swatch-height) * var(--offset-max-swatch-size)
- );
- --offset-scaled-height: calc(
- var(--scaling-factor) * var(--offset-swatch-height) / var(--offset-swatch-width) * var(--offset-max-swatch-size)
- );
+ --offset-scaled-width: calc(var(--scaling-factor) * var(--offset-swatch-width) / var(--offset-swatch-height) * var(--offset-max-swatch-size));
+ --offset-scaled-height: calc(var(--scaling-factor) * var(--offset-swatch-height) / var(--offset-swatch-width) * var(--offset-max-swatch-size));
--offset-max-swatch-size: calc(var(--max-swatch-size) - var(--min-width));
/* width = min(m + sU, (m + s * W'/H' * M'), M) */
- --swatch-width: min(
- calc(var(--min-width) + var(--scaling-factor) * var(--offset-swatch-width) * 1px),
- calc(var(--min-width) + var(--offset-scaled-width)),
- var(--max-swatch-size)
- );
+ --swatch-width: min(calc(var(--min-width) + var(--scaling-factor) * var(--offset-swatch-width) * 1px),
+ calc(var(--min-width) + var(--offset-scaled-width)),
+ var(--max-swatch-size));
/* height = min(m + sV, (m + s * H'/W' * M'), M) */
- --swatch-height: min(
- calc(var(--min-height) + var(--scaling-factor) * var(--offset-swatch-height) * 1px),
- calc(var(--min-height) + var(--offset-scaled-height)),
- var(--max-swatch-size)
- );
+ --swatch-height: min(calc(var(--min-height) + var(--scaling-factor) * var(--offset-swatch-height) * 1px),
+ calc(var(--min-height) + var(--offset-scaled-height)),
+ var(--max-swatch-size));
display: block;
background: var(--swatch-background);
@@ -2201,7 +2194,7 @@ deferred-media[class] :is(.deferred-media__poster-button img, .deferred-media__p
--variant-option-padding-inline: var(--padding-md);
}
-.variant-option + .variant-option {
+.variant-option+.variant-option {
margin-top: var(--padding-lg);
}
@@ -2216,7 +2209,7 @@ deferred-media[class] :is(.deferred-media__poster-button img, .deferred-media__p
}
}
-.variant-option--swatches > overflow-list {
+.variant-option--swatches>overflow-list {
justify-content: var(--product-swatches-alignment);
@media screen and (max-width: 749px) {
@@ -2244,12 +2237,12 @@ deferred-media[class] :is(.deferred-media__poster-button img, .deferred-media__p
}
@media (prefers-reduced-motion: no-preference) {
+
.variant-option__button-label,
.variant-option__select-wrapper,
.variant-option__button-label::before,
.variant-option__button-label::after,
- .variant-option__button-label:has([data-previous-checked='true'], [data-current-checked='true'])
- .variant-option__button-label__pill,
+ .variant-option__button-label:has([data-previous-checked='true'], [data-current-checked='true']) .variant-option__button-label__pill,
.variant-option__button-label:not(.variant-option__button-label--has-swatch) svg line:last-of-type {
transition-duration: var(--animation-speed);
transition-timing-function: var(--animation-easing);
@@ -2263,8 +2256,7 @@ deferred-media[class] :is(.deferred-media__poster-button img, .deferred-media__p
transition-property: clip-path;
}
- .variant-option__button-label:has([data-previous-checked='true'], [data-current-checked='true'])
- .variant-option__button-label__pill {
+ .variant-option__button-label:has([data-previous-checked='true'], [data-current-checked='true']) .variant-option__button-label__pill {
transition-property: transform;
}
@@ -2357,8 +2349,8 @@ deferred-media[class] :is(.deferred-media__poster-button img, .deferred-media__p
}
}
- &:has([data-previous-checked='true']) ~ label:has([data-current-checked='true']),
- &:has(:checked) ~ label {
+ &:has([data-previous-checked='true'])~label:has([data-current-checked='true']),
+ &:has(:checked)~label {
.variant-option__button-label__pill {
left: 0;
right: unset;
@@ -2369,20 +2361,17 @@ deferred-media[class] :is(.deferred-media__poster-button img, .deferred-media__p
--pill-offset: calc(100% + 1px);
}
- &:has(:checked) ~ label {
+ &:has(:checked)~label {
--pill-offset: calc(-100% - 1px);
}
- &:has([data-current-checked='true']):first-of-type
- ~ label:last-of-type:not(.variant-option__button-label--has-swatch),
+ &:has([data-current-checked='true']):first-of-type~label:last-of-type:not(.variant-option__button-label--has-swatch),
&:not(:has(:checked)):has(~ label > :checked):not(.variant-option__button-label--has-swatch) {
--clip: 0 0 0 100%;
}
- &:not(:has([data-current-checked='true'])):first-of-type:has(~ label:last-of-type > :checked):not(
- .variant-option__button-label--has-swatch
- ),
- &:has(:checked) ~ label:not(.variant-option__button-label--has-swatch) {
+ &:not(:has([data-current-checked='true'])):first-of-type:has(~ label:last-of-type > :checked):not(.variant-option__button-label--has-swatch),
+ &:has(:checked)~label:not(.variant-option__button-label--has-swatch) {
--clip: 0 100% 0 0;
}
@@ -2399,13 +2388,11 @@ deferred-media[class] :is(.deferred-media__poster-button img, .deferred-media__p
/* the more complex selector rules here produce the wrap around effect for first/last variants */
.variant-option--buttons:has(:nth-of-type(3)) {
- .variant-option__button-label:has([data-current-checked='true']):first-of-type ~ label:last-of-type {
+ .variant-option__button-label:has([data-current-checked='true']):first-of-type~label:last-of-type {
--pill-offset: calc(100% + 1px);
}
- .variant-option__button-label:not(:has([data-current-checked='true'])):first-of-type:has(
- ~ label:last-of-type > :checked
- ) {
+ .variant-option__button-label:not(:has([data-current-checked='true'])):first-of-type:has(~ label:last-of-type > :checked) {
--pill-offset: calc(-100% - 1px);
}
}
@@ -2498,6 +2485,7 @@ deferred-media[class] :is(.deferred-media__poster-button img, .deferred-media__p
/* This triggers iOS < 16.4. The outline bug is not recognized as a lack of @supports */
@supports not (background-color: rgb(from red 150 g b / alpha)) {
+
/** There is a bug in safari < 16.4 that causes the outline to not follow the elements border radius. This is a workaround. **/
.variant-option__button-label--has-swatch:has(:checked),
.variant-option__button-label:has(:focus-visible) .swatch {
@@ -2578,8 +2566,9 @@ deferred-media[class] :is(.deferred-media__poster-button img, .deferred-media__p
}
@media screen and (min-width: 750px) {
+
.sticky-content--desktop,
- .sticky-content--desktop.full-height--desktop > .group-block {
+ .sticky-content--desktop.full-height--desktop>.group-block {
position: sticky;
top: var(--sticky-header-offset, 0);
z-index: var(--layer-flat);
@@ -2604,7 +2593,7 @@ deferred-media[class] :is(.deferred-media__poster-button img, .deferred-media__p
color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
}
-product-price.text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) > *:not(.tax-note) {
+product-price.text-block:is(.h1, .h2, .h3, .h4, .h5, .h6)>*:not(.tax-note) {
margin-block: 0;
}
@@ -2741,7 +2730,7 @@ product-price.text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) > *:not(.tax-note) {
/* Custom Typography style */
.custom-typography,
-.custom-typography > * {
+.custom-typography>* {
font-family: var(--font-family);
font-weight: var(--font-weight);
text-transform: var(--text-transform);
@@ -2767,12 +2756,12 @@ product-price.text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) > *:not(.tax-note) {
}
.custom-font-size,
-.custom-font-size > * {
+.custom-font-size>* {
font-size: var(--font-size);
}
.custom-font-weight,
-.custom-font-weight > * {
+.custom-font-weight>* {
font-weight: var(--font-weight);
}
@@ -2822,19 +2811,19 @@ product-price.text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) > *:not(.tax-note) {
.layout-panel-flex--row:not(.mobile-column) {
flex-wrap: var(--flex-wrap-mobile);
- > .menu {
+ >.menu {
flex: 1 1 min-content;
}
- > .text-block {
+ >.text-block {
flex: 1 1 var(--max-width--display-tight);
}
- > .image-block {
+ >.image-block {
flex: 1 1 var(--size-style-width-mobile-min);
}
- > .button {
+ >.button {
flex: 0 0 fit-content;
}
}
@@ -2906,7 +2895,7 @@ product-price.text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) > *:not(.tax-note) {
}
:first-child:is(p, h1, h2, h3, h4, h5, h6),
- :first-child:empty + :is(p, h1, h2, h3, h4, h5, h6) {
+ :first-child:empty+ :is(p, h1, h2, h3, h4, h5, h6) {
margin-block-start: 0;
}
@@ -3003,17 +2992,17 @@ product-price.text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) > *:not(.tax-note) {
outline: none;
}
- &:focus-visible + .checkbox__label .icon-checkmark {
+ &:focus-visible+.checkbox__label .icon-checkmark {
outline: var(--focus-outline-width) solid currentcolor;
outline-offset: var(--focus-outline-offset);
}
- &:checked + .checkbox__label .icon-checkmark {
+ &:checked+.checkbox__label .icon-checkmark {
background-color: var(--color-foreground);
border-color: var(--color-foreground);
}
- &:disabled + .checkbox__label .icon-checkmark {
+ &:disabled+.checkbox__label .icon-checkmark {
background-color: var(--input-disabled-background-color);
border-color: var(--input-disabled-border-color);
}
@@ -3049,7 +3038,7 @@ product-price.text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) > *:not(.tax-note) {
transition: opacity var(--animation-speed) var(--animation-easing);
}
-.checkbox__input:disabled + .checkbox__label {
+.checkbox__input:disabled+.checkbox__label {
color: var(--input-disabled-text-color);
}
@@ -3167,15 +3156,15 @@ input[type='radio'] {
}
/* Shared styles for radio buttons and checkboxes */
-:where(input[type='radio']) + label,
-:where(input[type='checkbox']) + label {
+:where(input[type='radio'])+label,
+:where(input[type='checkbox'])+label {
display: inline;
vertical-align: middle;
cursor: pointer;
}
-:where(input[type='radio']):disabled + label,
-:where(input[type='checkbox']):disabled + label {
+:where(input[type='radio']):disabled+label,
+:where(input[type='checkbox']):disabled+label {
color: var(--input-disabled-text-color);
cursor: not-allowed;
}
@@ -3394,7 +3383,7 @@ label:has(input[type='checkbox']:disabled) {
}
}
-.pills__pill > .svg-wrapper {
+.pills__pill>.svg-wrapper {
--close-icon-opacity: 0.4;
--icon-stroke-width: 1px;
@@ -3510,11 +3499,8 @@ fly-to-cart.fly-to-cart--sticky {
--facets-vertical-col-width: 6;
grid-template-columns:
- 1fr repeat(
- var(--centered-column-number),
- minmax(0, calc((var(--page-width) - var(--page-margin) * 2) / var(--centered-column-number)))
- )
- 1fr;
+ 1fr repeat(var(--centered-column-number),
+ minmax(0, calc((var(--page-width) - var(--page-margin) * 2) / var(--centered-column-number)))) 1fr;
}
@media screen and (min-width: 990px) {
@@ -3527,15 +3513,12 @@ fly-to-cart.fly-to-cart--sticky {
@media screen and (min-width: 750px) {
grid-column: 1 / -1;
grid-template-columns:
- minmax(var(--page-margin), 1fr) repeat(
- var(--centered-column-number),
- minmax(0, calc((var(--page-width) - var(--page-margin) * 2) / var(--centered-column-number)))
- )
- minmax(var(--page-margin), 1fr);
+ minmax(var(--page-margin), 1fr) repeat(var(--centered-column-number),
+ minmax(0, calc((var(--page-width) - var(--page-margin) * 2) / var(--centered-column-number)))) minmax(var(--page-margin), 1fr);
}
}
-.collection-wrapper:has(.facets--vertical) .facets-block-wrapper--vertical:not(.hidden) ~ .main-collection-grid {
+.collection-wrapper:has(.facets--vertical) .facets-block-wrapper--vertical:not(.hidden)~.main-collection-grid {
@media screen and (min-width: 750px) {
grid-column: var(--facets-vertical-col-width) / var(--full-width-column-number);
}
@@ -3548,18 +3531,14 @@ fly-to-cart.fly-to-cart--sticky {
}
}
-:is(.collection-wrapper--full-width, .collection-wrapper--full-width-on-mobile)
- [product-grid-view='default']
- .product-grid__card {
+:is(.collection-wrapper--full-width, .collection-wrapper--full-width-on-mobile) [product-grid-view='default'] .product-grid__card {
@media screen and (max-width: 749px) {
padding-inline-start: max(var(--padding-xs), var(--padding-inline-start));
padding-inline-end: max(var(--padding-xs), var(--padding-inline-end));
}
}
-:is(.collection-wrapper--full-width, .collection-wrapper--full-width-on-mobile)
- [product-grid-view='mobile-single']
- .product-grid__card {
+:is(.collection-wrapper--full-width, .collection-wrapper--full-width-on-mobile) [product-grid-view='mobile-single'] .product-grid__card {
@media screen and (max-width: 749px) {
padding-inline-start: max(var(--padding-xs), var(--padding-inline-start));
padding-inline-end: max(var(--padding-xs), var(--padding-inline-end));
@@ -3748,6 +3727,29 @@ fly-to-cart.fly-to-cart--sticky {
}
}
+/* ============================================================================
+ Mobile Performance - Disabled Animations Override
+ ============================================================================ */
+@media screen and (max-width: 749px) {
+ body.animations-disabled-mobile * {
+ /* Disable all CSS Scroll-Driven reveals (native feature used heavily in this theme) */
+ animation-timeline: none !important;
+ }
+
+ body.animations-disabled-mobile .slide__content {
+ /* Specifically prevent the slide reveal animation to load instantly */
+ animation: none !important;
+ opacity: 1 !important;
+ translate: 0 0 !important;
+ }
+
+ /* Disable costly View Transition animations on mobile */
+ body.animations-disabled-mobile::view-transition-old(*),
+ body.animations-disabled-mobile::view-transition-new(*) {
+ animation: none !important;
+ }
+}
+
@keyframes search-element-slide-out-bottom {
0% {
transform: translateY(0);
@@ -3773,6 +3775,7 @@ fly-to-cart.fly-to-cart--sticky {
}
@keyframes thumbnail-selected {
+
0%,
100% {
box-shadow: 0 0 0 2px transparent;
@@ -3863,7 +3866,8 @@ fly-to-cart.fly-to-cart--sticky {
position: absolute;
z-index: var(--layer-lowest);
inset: 0;
- clip-path: inset(-50px 0 0 0); /* stylelint-disable-line */
+ clip-path: inset(-50px 0 0 0);
+ /* stylelint-disable-line */
}
@media screen and (min-width: 750px) {
@@ -3878,7 +3882,8 @@ fly-to-cart.fly-to-cart--sticky {
position: absolute;
z-index: var(--layer-lowest);
inset: 0;
- clip-path: inset(0 0 -50px 0); /* stylelint-disable-line */
+ clip-path: inset(0 0 -50px 0);
+ /* stylelint-disable-line */
}
@media screen and (min-width: 750px) {
@@ -3894,11 +3899,11 @@ fly-to-cart.fly-to-cart--sticky {
aspect-ratio: var(--size-style-aspect-ratio, auto);
}
-:not(deferred-media) > .video-placeholder-wrapper {
+:not(deferred-media)>.video-placeholder-wrapper {
width: var(--video-placeholder-width);
}
-.video-placeholder-wrapper > * {
+.video-placeholder-wrapper>* {
width: 100%;
height: 100%;
object-fit: cover;
@@ -3941,7 +3946,8 @@ slideshow-component.slideshow--content-below-media slideshow-slide {
animation-timeline: var(--slideshow-timeline);
}
- @media (prefers-reduced-motion) {
+ @media screen and (max-width: 749px),
+ (prefers-reduced-motion) {
opacity: 1;
animation: none;
}
@@ -4059,12 +4065,10 @@ slideshow-slide.product-media-container--tallest {
}
@media screen and (max-width: 749px) {
+
/* Media gallery has a peeking slide on the right side always, and on the left side when the current slide is the last one */
- .media-gallery--hint
- :is(
- slideshow-slide:has(+ slideshow-slide[aria-hidden='false']:last-of-type),
- slideshow-slide[aria-hidden='false'] + slideshow-slide
- ) {
+ .media-gallery--hint :is(slideshow-slide:has(+ slideshow-slide[aria-hidden='false']:last-of-type),
+ slideshow-slide[aria-hidden='false'] + slideshow-slide) {
content-visibility: auto;
slideshow-component[actioned] & {
@@ -4078,11 +4082,8 @@ slideshow-slide.product-media-container--tallest {
* Card galleries preview the next or previous images on 'pointerenter', so we
* try to kick load them beforehand (they are lazy loaded otherwise).
*/
-:is(.resource-list__carousel, .card-gallery)
- :is(
- slideshow-slide:has(+ slideshow-slide[aria-hidden='false']),
- slideshow-slide[aria-hidden='false'] + slideshow-slide
- ) {
+:is(.resource-list__carousel, .card-gallery) :is(slideshow-slide:has(+ slideshow-slide[aria-hidden='false']),
+ slideshow-slide[aria-hidden='false'] + slideshow-slide) {
content-visibility: auto;
slideshow-component[actioned] & {
@@ -4094,7 +4095,7 @@ slideshow-slide.product-media-container--tallest {
* Be specific about HTML children structure to avoid targeting nested slideshows.
* Ensure that the content is 'visible' while scrolling instead of 'auto' to avoid issues in Safari.
*/
-slideshow-component:is([dragging], [transitioning], :hover) > slideshow-container > slideshow-slides > slideshow-slide {
+slideshow-component:is([dragging], [transitioning], :hover)>slideshow-container>slideshow-slides>slideshow-slide {
content-visibility: visible;
}
@@ -4167,13 +4168,13 @@ slideshow-container {
slideshow-component:is([autoplay]) {
&:is([paused]) {
- .icon-play > svg {
+ .icon-play>svg {
display: block;
}
}
&:not([paused]) {
- .icon-pause > svg {
+ .icon-pause>svg {
display: block;
}
}
@@ -4244,11 +4245,7 @@ slideshow-arrows .slideshow-control.slideshow-control--style-none {
}
}
-:not(.media-gallery--carousel)
- > :is(slideshow-component:hover, slideshow-component:focus-within):not(:has(slideshow-controls:hover))
- > slideshow-container
- > slideshow-arrows
- .slideshow-control {
+:not(.media-gallery--carousel)> :is(slideshow-component:hover, slideshow-component:focus-within):not(:has(slideshow-controls:hover))>slideshow-container>slideshow-arrows .slideshow-control {
animation: arrowsSlideIn var(--animation-speed) var(--animation-easing) forwards;
}
@@ -4301,11 +4298,10 @@ slideshow-arrows .slideshow-control.slideshow-control--style-none {
display: none;
}
-:where(.section-resource-list.section--full-width) product-card[data-product-transition] > .group-block,
-:where(.section-carousel.section--full-width) product-card[data-product-transition] > .group-block {
+:where(.section-resource-list.section--full-width) product-card[data-product-transition]>.group-block,
+:where(.section-carousel.section--full-width) product-card[data-product-transition]>.group-block {
@media screen and (max-width: 749px) {
- padding-inline: max(var(--padding-xs), var(--padding-inline-start))
- max(var(--padding-xs), var(--padding-inline-end));
+ padding-inline: max(var(--padding-xs), var(--padding-inline-start)) max(var(--padding-xs), var(--padding-inline-end));
}
}
@@ -4421,10 +4417,7 @@ slideshow-arrows .slideshow-control.slideshow-control--style-none {
@container resource-list-carousel (min-width: 750px) {
.resource-list__carousel .resource-list__slide {
- --section-slide-width: calc(
- (100% - (var(--resource-list-column-gap) * (var(--column-count) - 1)) - var(--peek-next-slide-size)) /
- var(--column-count)
- );
+ --section-slide-width: calc((100% - (var(--resource-list-column-gap) * (var(--column-count) - 1)) - var(--peek-next-slide-size)) / var(--column-count));
--fallback-slide-width: clamp(150px, var(--mobile-card-size, 60cqw), var(--slide-width-max));
--slide-width: var(--section-slide-width, var(--fallback-slide-width));
}
@@ -4477,15 +4470,15 @@ slideshow-arrows .slideshow-control.slideshow-control--style-none {
}
/* Flex behavior for width variants */
-.layout-panel-flex--row > .group-block--width-fit {
+.layout-panel-flex--row>.group-block--width-fit {
flex: 0;
}
-.layout-panel-flex--row > .group-block--width-fill {
+.layout-panel-flex--row>.group-block--width-fill {
flex: 1;
}
-.layout-panel-flex--row > .group-block--width-custom {
+.layout-panel-flex--row>.group-block--width-custom {
flex-basis: var(--size-style-width);
}
@@ -4500,20 +4493,21 @@ slideshow-arrows .slideshow-control.slideshow-control--style-none {
}
/* Flex behavior for height variants */
-.layout-panel-flex--column > .group-block--height-fit {
+.layout-panel-flex--column>.group-block--height-fit {
flex: 0 1 auto;
}
-.layout-panel-flex--column > .group-block--height-fill {
+.layout-panel-flex--column>.group-block--height-fill {
flex: 1;
}
-.layout-panel-flex--column > .group-block--height-custom {
+.layout-panel-flex--column>.group-block--height-custom {
flex-basis: var(--size-style-height);
}
accordion-custom {
details {
+
&::details-content,
.details-content {
block-size: 0;
@@ -4533,6 +4527,7 @@ accordion-custom {
}
&:not([open]) {
+
&::details-content,
.details-content {
padding-block: 0;
@@ -4540,6 +4535,7 @@ accordion-custom {
}
&[open] {
+
&::details-content,
.details-content {
opacity: 1;
@@ -4589,12 +4585,10 @@ text-component {
opacity: 0;
transition: opacity var(--animation-speed-slow) var(--animation-easing);
pointer-events: none;
- background-image: linear-gradient(
- -85deg,
- var(--shimmer-text-color) 10%,
- var(--shimmer-color-light) 50%,
- var(--shimmer-text-color) 90%
- );
+ background-image: linear-gradient(-85deg,
+ var(--shimmer-text-color) 10%,
+ var(--shimmer-color-light) 50%,
+ var(--shimmer-text-color) 90%);
background-clip: text;
background-size: 200% 100%;
background-position: 100% 0;
@@ -4715,6 +4709,7 @@ text-component {
/* Prevent iOS zoom on input focus by ensuring minimum 16px font size on mobile */
@media screen and (max-width: 1200px) {
+
input,
textarea,
select,
@@ -4943,4 +4938,4 @@ product-recommendations:has([data-has-recommendations='false']) {
opacity: var(--atc-opacity, 1);
translate: 0px var(--atc-destination, 0px);
}
-}
+}
\ No newline at end of file
diff --git a/assets/header.js b/assets/header.js
index a67565c26..90cab5a2b 100644
--- a/assets/header.js
+++ b/assets/header.js
@@ -192,7 +192,7 @@ class HeaderComponent extends Component {
this.#observeStickyPosition(stickyMode === 'always');
if (stickyMode === 'scroll-up' || stickyMode === 'always') {
- document.addEventListener('scroll', this.#handleWindowScroll);
+ document.addEventListener('scroll', this.#handleWindowScroll, { passive: true });
}
}
}
diff --git a/assets/localization.js b/assets/localization.js
index 6d47cbb96..e21cd5495 100644
--- a/assets/localization.js
+++ b/assets/localization.js
@@ -24,7 +24,7 @@ class LocalizationFormComponent extends Component {
this.refs.search && this.refs.search.addEventListener('keydown', this.#onSearchKeyDown);
this.refs.countryList && this.refs.countryList.addEventListener('keydown', this.#onContainerKeyDown);
- this.refs.countryList && this.refs.countryList.addEventListener('scroll', this.#onCountryListScroll);
+ this.refs.countryList && this.refs.countryList.addEventListener('scroll', this.#onCountryListScroll, { passive: true });
// Resizing the language input can be expensive for browsers that don't support field-sizing: content.
// Spliting it into separate tasks at least helps when there are multiple localization forms on the page.
@@ -515,7 +515,7 @@ class DrawerLocalizationComponent extends Component {
const countryList = localizationForm.querySelector('.country-selector-form__wrapper');
if (target.open) {
- if (countryList) countryList.addEventListener('scroll', this.#onCountryListScroll);
+ if (countryList) countryList.addEventListener('scroll', this.#onCountryListScroll, { passive: true });
onAnimationEnd(target, localizationForm.focusSearchInput);
} else {
countryList?.removeEventListener('scroll', this.#onCountryListScroll);
diff --git a/assets/scrolling.js b/assets/scrolling.js
index 57739db13..db39e6e1a 100644
--- a/assets/scrolling.js
+++ b/assets/scrolling.js
@@ -89,7 +89,7 @@ export class Scroller {
this.#onScrollEnd = options.onScrollEnd;
this.element = element;
- this.element.addEventListener('scroll', this.#handleScroll);
+ this.element.addEventListener('scroll', this.#handleScroll, { passive: true });
}
/**
@@ -342,25 +342,25 @@ export function scrollIntoView(element, { ancestor, behavior = 'smooth', block =
const scrollTop =
ancestor.scrollHeight > ancestor.clientHeight
? calculateScrollOffset(
- block,
- ancestorRect.top,
- ancestor.clientHeight,
- elemRect.top,
- elemRect.height,
- ancestor.scrollTop
- )
+ block,
+ ancestorRect.top,
+ ancestor.clientHeight,
+ elemRect.top,
+ elemRect.height,
+ ancestor.scrollTop
+ )
: ancestor.scrollTop;
const scrollLeft =
ancestor.scrollWidth > ancestor.clientWidth
? calculateScrollOffset(
- inline,
- ancestorRect.left,
- ancestor.clientWidth,
- elemRect.left,
- elemRect.width,
- ancestor.scrollLeft
- )
+ inline,
+ ancestorRect.left,
+ ancestor.clientWidth,
+ elemRect.left,
+ elemRect.width,
+ ancestor.scrollLeft
+ )
: ancestor.scrollLeft;
ancestor.scrollTo({ top: scrollTop, left: scrollLeft, behavior });
@@ -372,7 +372,7 @@ class ScrollHint extends HTMLElement {
#rafId = null;
connectedCallback() {
- this.addEventListener('scroll', this.#handleScroll);
+ this.addEventListener('scroll', this.#handleScroll, { passive: true });
this.#resizeObserver.observe(this);
}
diff --git a/assets/zoom-dialog.js b/assets/zoom-dialog.js
index acdff63ed..8fa54e27f 100644
--- a/assets/zoom-dialog.js
+++ b/assets/zoom-dialog.js
@@ -28,7 +28,7 @@ export class ZoomDialog extends Component {
connectedCallback() {
super.connectedCallback();
- this.refs.dialog.addEventListener('scroll', this.handleScroll);
+ this.refs.dialog.addEventListener('scroll', this.handleScroll, { passive: true });
}
disconnectedCallback() {
@@ -275,7 +275,7 @@ function getMostVisibleElement(elements) {
current.intersectionRatio > prev.intersectionRatio ? current : prev
);
observer.disconnect();
- resolve(/** @type {HTMLElement} */ (mostVisible.target));
+ resolve(/** @type {HTMLElement} */(mostVisible.target));
},
{
threshold: Array.from({ length: 100 }, (_, i) => i / 100),
diff --git a/commits.txt b/commits.txt
new file mode 100644
index 000000000..ba1570510
Binary files /dev/null and b/commits.txt differ
diff --git a/config/settings_schema.json b/config/settings_schema.json
index 9a27dce58..d299bd625 100644
--- a/config/settings_schema.json
+++ b/config/settings_schema.json
@@ -1403,6 +1403,13 @@
"label": "t:settings.add_to_cart_animation",
"default": true
},
+ {
+ "type": "checkbox",
+ "id": "disable_animations_mobile",
+ "label": "Disable animations on mobile",
+ "info": "Improves performance by disabling scroll reveals and page transitions on small screens.",
+ "default": true
+ },
{
"type": "select",
"id": "card_hover_effect",
diff --git a/layout/theme.liquid b/layout/theme.liquid
index 2b6b6a151..085987f94 100644
--- a/layout/theme.liquid
+++ b/layout/theme.liquid
@@ -38,7 +38,7 @@
{{ content_for_header }}
-
+
{% render 'skip-to-content-link', href: '#MainContent', text: 'accessibility.skip_to_text' %}
-
-
+
+
{% stylesheet %}
/* Search modal style */
.search-modal {
diff --git a/snippets/util-autofill-img-size-attr.liquid b/snippets/util-autofill-img-size-attr.liquid
index 08d0b8b0d..1a0e5af44 100644
--- a/snippets/util-autofill-img-size-attr.liquid
+++ b/snippets/util-autofill-img-size-attr.liquid
@@ -66,7 +66,7 @@
endif
assign sizes_attr = sizes_attr | append: '(min-width: ' | append: min_breakpoint | append: 'px) 50vw'
- assign sizes_attr = sizes_attr | append: ', 100vw'
+ assign sizes_attr = sizes_attr | append: ', 50vw'
# Echo the sizes attribute
echo sizes_attr
diff --git a/snippets/util-product-media-sizes-attr.liquid b/snippets/util-product-media-sizes-attr.liquid
index 8458af158..5b4f1b820 100644
--- a/snippets/util-product-media-sizes-attr.liquid
+++ b/snippets/util-product-media-sizes-attr.liquid
@@ -50,16 +50,16 @@
if calculate_single_column
# Default for carousel or single column grid (or first image in large_first_image mode)
if section.settings.equal_columns == false
- assign default_sizes = '(min-width: 750px) calc(100vw - 25rem - [gap_half]), 100vw' | replace: '[gap_half]', gap_half
+ assign default_sizes = '(min-width: 750px) calc(100vw - 25rem - [gap_half]), calc(100vw - 3rem)' | replace: '[gap_half]', gap_half
else
- assign default_sizes = '(min-width: 750px) calc(50vw - [gap_half]), 100vw' | replace: '[gap_half]', gap_half
+ assign default_sizes = '(min-width: 750px) calc(50vw - [gap_half]), calc(100vw - 3rem)' | replace: '[gap_half]', gap_half
endif
else
# Default for two column grid - includes image gap and quarter section gap
if section.settings.equal_columns == false
- assign default_sizes = '(min-width: 750px) calc((100vw - 25rem) / 2 - [gap_quarter] - [image_gap_half]), 100vw' | replace: '[gap_quarter]', gap_quarter | replace: '[image_gap_half]', image_gap_half
+ assign default_sizes = '(min-width: 750px) calc((100vw - 25rem) / 2 - [gap_quarter] - [image_gap_half]), calc(100vw - 3rem)' | replace: '[gap_quarter]', gap_quarter | replace: '[image_gap_half]', image_gap_half
else
- assign default_sizes = '(min-width: 750px) calc(50vw / 2 - [gap_quarter] - [image_gap_half]), 100vw' | replace: '[gap_quarter]', gap_quarter | replace: '[image_gap_half]', image_gap_half
+ assign default_sizes = '(min-width: 750px) calc(50vw / 2 - [gap_quarter] - [image_gap_half]), calc(100vw - 3rem)' | replace: '[gap_quarter]', gap_quarter | replace: '[image_gap_half]', image_gap_half
endif
endif
@@ -116,7 +116,7 @@
else
assign medium_size = 'calc([medium_base] - [page_margin] - [gap_quarter] - [image_gap_half])' | replace: '[medium_base]', medium_base | replace: '[page_margin]', page_margin | replace: '[gap_quarter]', gap_quarter | replace: '[image_gap_half]', image_gap_half
endif
- assign sizes = '(min-width: [breakpoint]) [large_size], (min-width: 750px) [medium_size], 100vw' | replace: '[breakpoint]', breakpoint | replace: '[large_size]', large_size | replace: '[medium_size]', medium_size
+ assign sizes = '(min-width: [breakpoint]) [large_size], (min-width: 750px) [medium_size], calc(100vw - 3rem)' | replace: '[breakpoint]', breakpoint | replace: '[large_size]', large_size | replace: '[medium_size]', medium_size
else
# Single column calculation
if block_settings.extend_media
@@ -130,7 +130,7 @@
else
assign medium_size = 'calc([medium_base] - [page_margin] - [gap_half] - [page_margin])' | replace: '[medium_base]', medium_base | replace: '[page_margin]', page_margin | replace: '[gap_half]', gap_half
endif
- assign sizes = '(min-width: [breakpoint]) [large_size], (min-width: 750px) [medium_size], 100vw' | replace: '[breakpoint]', breakpoint | replace: '[large_size]', large_size | replace: '[medium_size]', medium_size
+ assign sizes = '(min-width: [breakpoint]) [large_size], (min-width: 750px) [medium_size], calc(100vw - 3rem)' | replace: '[breakpoint]', breakpoint | replace: '[large_size]', large_size | replace: '[medium_size]', medium_size
endif
else
# Use default sizes
diff --git a/themes.txt b/themes.txt
new file mode 100644
index 000000000..46b134b19
--- /dev/null
+++ b/themes.txt
@@ -0,0 +1 @@
+ÿþ
\ No newline at end of file
diff --git a/themes_utf8.txt b/themes_utf8.txt
new file mode 100644
index 000000000..5f282702b
--- /dev/null
+++ b/themes_utf8.txt
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/tmp_diff.txt b/tmp_diff.txt
new file mode 100644
index 000000000..e69de29bb
diff --git a/tmp_log.txt b/tmp_log.txt
new file mode 100644
index 000000000..46b134b19
--- /dev/null
+++ b/tmp_log.txt
@@ -0,0 +1 @@
+ÿþ
\ No newline at end of file
diff --git a/tmp_log_utf8.txt b/tmp_log_utf8.txt
new file mode 100644
index 000000000..5f282702b
--- /dev/null
+++ b/tmp_log_utf8.txt
@@ -0,0 +1 @@
+
\ No newline at end of file