/** Shopify CDN: Minification failed
Line 635:20 Unexpected "{"
Line 635:29 Expected ":"
**/
/* START_SECTION:product-information (INDEX:44) */
/* ========================================================
OXBOW — breadcrumb (HuntEmUp style)
======================================================== */
.oxbow-crumb {
display: flex;
align-items: center;
gap: 0.6rem;
flex-wrap: wrap;
padding-block: 1.1rem 1.4rem;
font-size: 0.95rem;
line-height: 1.3;
}
.oxbow-crumb a {
color: var(--ox-crumb-accent, currentcolor);
text-decoration: none;
}
.oxbow-crumb a:hover {
text-decoration: underline;
text-underline-offset: 2px;
}
.oxbow-crumb__sep {
color: rgb(var(--color-foreground-rgb, 0 0 0) / 0.4);
}
.oxbow-crumb__cur {
color: rgb(var(--color-foreground-rgb, 0 0 0) / 0.6);
}
/* ========================================================
OXBOW — gallery, v6: thumbnails LEFT of the main image
======================================================== */
.oxbow-gallery {
width: 100%;
}
/* v9: image floats on the page like Mathews — panel only if chosen */
.oxbow-gallery[data-bg='panel'] .oxbow-gallery__main {
background: var(--ox-gallery-panel, #f4f2ef);
}
.oxbow-gallery[data-bg='none'] .oxbow-gallery__main {
background: transparent;
}
/* v9: media column stays in view while the options scroll */
.oxbow-gallery--sticky {
position: sticky;
top: calc(var(--pi-header-height, 0px) + 20px);
align-self: start;
}
@media screen and (max-width: 989px) {
.oxbow-gallery--sticky {
position: static;
}
}
/* left-thumbs layout (default) */
.oxbow-gallery[data-thumbs='left'] {
display: grid;
grid-template-columns: var(--pi-thumb-size, 72px) minmax(0, 1fr);
gap: 10px;
align-items: start;
}
.oxbow-gallery[data-thumbs='left'] .oxbow-gallery__thumbs {
grid-column: 1;
grid-row: 1;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
gap: 8px;
margin: 0;
padding: 0 2px 0 0;
list-style: none;
overflow-y: auto;
max-height: var(--pi-media-max-height, 75vh);
scrollbar-width: thin;
}
.oxbow-gallery[data-thumbs='left'] .oxbow-gallery__main {
grid-column: 2;
grid-row: 1;
}
/* bottom-thumbs layout (optional) */
.oxbow-gallery[data-thumbs='bottom'] {
display: flex;
flex-direction: column;
gap: 10px;
}
.oxbow-gallery[data-thumbs='bottom'] .oxbow-gallery__thumbs {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
}
.oxbow-gallery__main {
position: relative;
width: 100%;
aspect-ratio: var(--pi-gallery-aspect, 1);
max-height: var(--pi-media-max-height, 75vh);
background: var(--color-background);
overflow: hidden;
}
.oxbow-gallery__slide {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
}
.oxbow-gallery__slide[hidden] {
display: none;
}
.oxbow-gallery__slide :is(img, video, iframe, model-viewer) {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
.oxbow-gallery__thumb-item {
margin: 0;
flex: 0 0 auto;
}
.oxbow-gallery__thumb {
position: relative;
display: block;
width: var(--pi-thumb-size, 72px);
height: var(--pi-thumb-size, 72px);
padding: 2px;
border: 1px solid rgb(var(--color-foreground-rgb, 0 0 0) / 0.15);
border-radius: var(--style-border-radius-buttons-primary, 4px);
background: var(--color-background);
cursor: pointer;
transition: border-color 0.15s ease;
}
.oxbow-gallery__thumb img {
width: 100%;
height: 100%;
object-fit: contain;
}
.oxbow-gallery__thumb:hover {
border-color: rgb(var(--color-foreground-rgb, 0 0 0) / 0.45);
}
.oxbow-gallery__thumb.is-active {
border-color: rgb(var(--color-foreground-rgb, 0 0 0) / 0.9);
border-width: 2px;
padding: 1px;
}
.oxbow-gallery__thumb:focus-visible {
outline: 2px solid currentcolor;
outline-offset: 2px;
}
.oxbow-gallery__thumb-badge {
position: absolute;
inset-block-end: 2px;
inset-inline-end: 3px;
font-size: 9px;
line-height: 1;
padding: 2px 3px;
border-radius: 2px;
background: rgb(0 0 0 / 0.65);
color: #fff;
}
/* ========================================================
OXBOW — v7 MKC-style variant picker
======================================================== */
/* ========================================================
OXBOW — v9 merchandising slot (blurb + trust line)
======================================================== */
.oxbow-extras {
margin-block: 16px 0;
}
.oxbow-extras__blurb {
margin: 0;
max-width: 46ch;
font-size: 1.02rem;
line-height: 1.55;
}
.oxbow-extras__trust {
margin-block-start: 13px;
padding: 12px 16px;
background: #f6f3ee;
border-inline-start: 3px solid var(--ox-vp-accent, #e8571e);
font-size: 0.92rem;
line-height: 1.45;
font-weight: 500;
}
/* ========================================================
OXBOW — v8.2 In Store Only notice
======================================================== */
.oxbow-instore {
margin-block: 20px 0;
border: 2px solid var(--ox-vp-accent, #e8571e);
padding: 18px 20px 20px;
}
.oxbow-instore__badge {
display: inline-block;
background: var(--ox-vp-accent, #e8571e);
color: #fff;
padding: 8px 14px;
font-family: var(--font-heading--family);
font-size: 0.95rem;
letter-spacing: 0.08em;
text-transform: uppercase;
line-height: 1;
}
.oxbow-instore__text {
margin: 12px 0 0;
font-size: 0.98rem;
line-height: 1.55;
}
.oxbow-instore__btn {
display: inline-flex;
align-items: center;
justify-content: center;
margin-block-start: 14px;
padding: 14px 26px;
background: var(--ox-vp-accent, #e8571e);
color: #fff;
text-decoration: none;
font-weight: 700;
font-size: 0.9rem;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.oxbow-instore__btn:hover {
filter: brightness(0.9);
color: #fff;
}
.oxbow-vp-stack {
display: flex;
flex-direction: column;
gap: 4px;
margin-block: 4px 18px;
}
/* v8.1: variant-only mode — one photo, no strip */
.oxbow-gallery[data-variant-only='true'] .oxbow-gallery__thumbs {
display: none !important;
}
.oxbow-gallery[data-variant-only='true'][data-thumbs='left'] {
display: block;
}
.oxbow-vp {
margin-block: 16px 0;
}
.oxbow-vp__label {
font-family: var(--font-body--family);
font-size: 0.95rem;
font-weight: 700;
letter-spacing: 0.01em;
margin-block-end: 0.55rem;
color: currentcolor;
}
.oxbow-vp__label [data-oxbow-vp-current] {
font-weight: 500;
color: rgb(var(--color-foreground-rgb, 0 0 0) / 0.65);
}
.oxbow-vp__row {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
/* image swatches (Color / Finish) — MKC style */
.oxbow-vp__swatch {
width: var(--ox-vp-swatch-size, 64px);
height: var(--ox-vp-swatch-size, 64px);
padding: 0;
border: 1px solid rgb(var(--color-foreground-rgb, 0 0 0) / 0.2);
background: #f4f2ef;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
font: 600 10px/1.2 var(--font-body--family);
transition: border-color 0.12s ease;
}
.oxbow-vp__swatch img {
width: 100%;
height: 100%;
object-fit: var(--ox-swatch-fit, cover);
object-position: center;
}
.oxbow-vp__swatch:hover {
border-color: rgb(var(--color-foreground-rgb, 0 0 0) / 0.55);
}
.oxbow-vp__swatch[data-active='true'] {
border: 2px solid var(--ox-vp-accent, #e8571e);
}
/* pill buttons (Dexterity, Draw Weight, sizes…) */
.oxbow-vp__pill {
padding: 11px 20px;
border: 1px solid rgb(var(--color-foreground-rgb, 0 0 0) / 0.3);
background: #fff;
color: currentcolor;
cursor: pointer;
font-family: var(--font-body--family);
font-size: 0.95rem;
font-weight: 500;
line-height: 1;
transition: border-color 0.12s ease, background 0.12s ease;
}
.oxbow-vp__pill:hover {
border-color: rgb(var(--color-foreground-rgb, 0 0 0) / 0.7);
}
.oxbow-vp__pill[data-active='true'] {
border: 2px solid var(--ox-vp-accent, #e8571e);
padding: 10px 19px;
font-weight: 700;
}
.oxbow-vp__swatch[data-soldout='true'],
.oxbow-vp__pill[data-soldout='true'] {
opacity: 0.4;
position: relative;
}
.oxbow-vp__pill[data-soldout='true'] {
text-decoration: line-through;
}
@media screen and (max-width: 749px) {
.oxbow-vp__pill {
padding: 10px 15px;
font-size: 0.9rem;
}
}
/* ========================================================
OXBOW — description below the product
HuntEmUp layout: banner bar + inset white box with a full border.
data-style="banner" (default) | "plain"
======================================================== */
.oxbow-description-below {
grid-column: 1 / -1;
width: 100%;
margin-block-start: var(--margin-3xl, 4rem);
padding-block: var(--ox-desc-pad-top, 2rem) var(--ox-desc-pad-bottom, 3rem);
background: var(--ox-desc-bg, transparent);
text-align: var(--ox-desc-align, start);
}
.oxbow-description-below[data-divider='true'] {
border-block-start: 1px solid var(--ox-desc-divider-color, rgb(var(--color-foreground-rgb, 0 0 0) / 0.12));
}
/* Banner mode: the banner is the divider */
.oxbow-description-below[data-style='banner'][data-divider='true'] {
border-block-start: 0;
}
.oxbow-description-below__heading {
margin: 0 0 1rem;
font-family: var(--ox-desc-h-font, var(--font-heading--family));
font-size: var(--ox-desc-h-size, 1.5rem);
font-weight: var(--ox-desc-h-weight, 700);
letter-spacing: var(--ox-desc-h-track, 0);
line-height: 1.15;
color: var(--ox-desc-h-color, currentcolor);
}
.oxbow-description-below__heading[data-uppercase='true'] {
text-transform: uppercase;
}
/* --- HuntEmUp banner heading: extra bottom padding so the
inset box can tuck up into it --- */
.oxbow-description-below[data-style='banner'] .oxbow-description-below__heading {
margin: 0;
padding: 1.1rem 1.5rem 2.4rem;
background: var(--ox-banner-bg, #e8571e);
color: var(--ox-banner-color, #fff);
text-align: start;
}
/* --- HuntEmUp content box: white, bordered on ALL sides,
inset and overlapping the banner --- */
.oxbow-description-below[data-style='banner'] .oxbow-description-below__box {
border: 1px solid var(--ox-box-border, #c9c4bc);
background: var(--ox-box-bg, #fff);
padding: 2rem 1.9rem 2.5rem;
margin: -1.3rem 14px 0;
position: relative;
}
/* No banner heading? Then no overlap. */
.oxbow-description-below[data-style='banner'] .oxbow-description-below__box:first-child {
margin-top: 0;
}
.oxbow-description-below[data-style='plain'] .oxbow-description-below__box {
border: 0;
padding: 0;
margin: 0;
background: transparent;
}
.oxbow-description-below__wrap {
max-width: var(--pi-description-width, 80ch);
}
/* Banner mode uses the full box width like HuntEmUp */
.oxbow-description-below[data-style='banner'] .oxbow-description-below__wrap {
max-width: none;
}
/* Centered text needs a centered measure, or it looks off-axis */
.oxbow-description-below[data-align='center'] .oxbow-description-below__wrap {
margin-inline: auto;
}
.oxbow-description-below[data-align='right'] .oxbow-description-below__wrap {
margin-inline-start: auto;
}
.oxbow-description-below__inner {
font-size: var(--ox-desc-size, 1rem);
line-height: var(--ox-desc-leading, 1.6);
color: var(--ox-desc-color, currentcolor);
}
/* Two-column prose on desktop */
.oxbow-description-below[data-columns='2'] .oxbow-description-below__inner {
columns: 2;
column-gap: 3rem;
}
@media screen and (max-width: 989px) {
.oxbow-description-below[data-columns='2'] .oxbow-description-below__inner {
columns: 1;
}
}
.oxbow-description-below__inner > * + * {
margin-block-start: 1em;
}
.oxbow-description-below__inner :where(h2, h3, h4, h5) {
margin-block-start: 1.75em;
font-family: var(--ox-desc-h-font, var(--font-heading--family));
line-height: 1.2;
color: var(--ox-desc-accent, var(--ox-desc-h-color, currentcolor));
break-after: avoid;
}
/* HuntEmUp separates major sections with a thin rule */
.oxbow-description-below[data-style='banner'] .oxbow-description-below__inner :where(h2) {
padding-block-start: 1.25em;
border-block-start: 1px solid rgb(var(--color-foreground-rgb, 0 0 0) / 0.14);
}
.oxbow-description-below[data-style='banner'] .oxbow-description-below__inner :where(h2):first-child {
padding-block-start: 0;
border-block-start: 0;
margin-block-start: 0;
}
.oxbow-description-below__inner strong,
.oxbow-description-below__inner b {
font-weight: 700;
}
.oxbow-description-below__inner a {
color: var(--ox-desc-link, currentcolor);
text-decoration: underline;
text-underline-offset: 2px;
}
.oxbow-description-below__inner :where(ul, ol) {
padding-inline-start: 1.25em;
text-align: start;
}
.oxbow-description-below__inner li + li {
margin-block-start: 0.35em;
}
.oxbow-description-below__inner img {
max-width: 100%;
height: auto;
}
.oxbow-description-below__inner table {
width: 100%;
border-collapse: collapse;
text-align: start;
}
.oxbow-description-below__inner :is(th, td) {
padding: 0.5rem 0.75rem;
border-block-end: 1px solid rgb(var(--color-foreground-rgb, 0 0 0) / 0.12);
text-align: start;
}
/* ========================================================
OXBOW — utility classes for use INSIDE the product description.
In Shopify admin, open the description, click the <> HTML button,
and add these classes to any element. Example:
Built for bowhunters.
======================================================== */
.oxbow-description-below__inner .ox-left { text-align: left; }
.oxbow-description-below__inner .ox-center { text-align: center; }
.oxbow-description-below__inner .ox-right { text-align: right; }
.oxbow-description-below__inner .ox-caps {
text-transform: uppercase;
letter-spacing: 0.04em;
}
.oxbow-description-below__inner .ox-lead {
font-size: 1.25em;
line-height: 1.45;
font-weight: 500;
}
.oxbow-description-below__inner .ox-small {
font-size: 0.85em;
}
.oxbow-description-below__inner .ox-accent {
color: var(--ox-desc-accent, currentcolor);
}
.oxbow-description-below__inner .ox-muted {
opacity: 0.7;
}
.oxbow-description-below__inner .ox-bold {
font-weight: 700;
}
/* Bordered callout — good for "Made in the USA" or dealer-only notes */
.oxbow-description-below__inner .ox-callout {
padding: 1rem 1.25rem;
border-inline-start: 3px solid var(--ox-desc-accent, currentcolor);
background: rgb(var(--color-foreground-rgb, 0 0 0) / 0.04);
}
/* Horizontal rule you can drop between description sections */
.oxbow-description-below__inner .ox-divider {
height: 1px;
border: 0;
background: rgb(var(--color-foreground-rgb, 0 0 0) / 0.15);
margin-block: 2em;
}
/* Auto-fitting spec grid. Markup:
Axle-to-Axle33"
Brace Height6.25"
*/
.oxbow-description-below__inner .ox-specs {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 0;
margin-block-start: 1.5em;
text-align: start;
}
.oxbow-description-below__inner .ox-specs > div {
display: flex;
justify-content: space-between;
gap: 1rem;
padding: 0.65rem 0.25rem;
border-block-end: 1px solid rgb(var(--color-foreground-rgb, 0 0 0) / 0.12);
}
.oxbow-description-below__inner .ox-specs span {
opacity: 0.7;
}
/* Two-column block for a single element */
.oxbow-description-below__inner .ox-cols-2 {
columns: 2;
column-gap: 2.5rem;
}
@media screen and (max-width: 749px) {
.oxbow-description-below__inner .ox-cols-2 {
columns: 1;
}
}
/* Fallback sizing when the stock gallery is in use */
#shopify-section-{{ section.id }} :is(.product-media, .product-media-container, .media-gallery__item) img {
max-height: var(--pi-media-max-height, 78vh);
object-fit: contain;
}
@media screen and (max-width: 749px) {
.oxbow-crumb {
font-size: 0.85rem;
padding-block: 0.8rem 1rem;
}
.oxbow-crumb__cur {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 60vw;
}
/* mobile: thumbs drop back under the image as a horizontal strip */
.oxbow-gallery[data-thumbs='left'] {
display: flex;
flex-direction: column;
gap: 8px;
}
.oxbow-gallery[data-thumbs='left'] .oxbow-gallery__thumbs {
flex-direction: row;
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
max-height: none;
justify-content: flex-start;
scrollbar-width: none;
padding: 0 0 2px;
}
.oxbow-gallery[data-thumbs='left'] .oxbow-gallery__thumbs::-webkit-scrollbar {
display: none;
}
.oxbow-gallery[data-thumbs='bottom'] .oxbow-gallery__thumbs {
flex-wrap: nowrap;
overflow-x: auto;
justify-content: flex-start;
scrollbar-width: none;
padding-block-end: 2px;
}
.oxbow-gallery[data-thumbs='bottom'] .oxbow-gallery__thumbs::-webkit-scrollbar {
display: none;
}
.oxbow-gallery__main {
max-height: 60vh;
}
.oxbow-description-below {
margin-block-start: var(--margin-xl, 2rem);
}
.oxbow-description-below[data-style='banner'] .oxbow-description-below__box {
padding: 1.4rem 1.1rem 1.8rem;
margin: -1.1rem 8px 0;
}
}
/* ======= stock styles below, unchanged ======= */
.sticky-add-to-cart__bar {
position: fixed;
bottom: 20px;
left: 50%;
opacity: 0;
transform: translateX(-50%) translateY(calc(100% + 40px));
z-index: calc(var(--layer-sticky) - 1); /* Below sticky header */
display: block;
width: 600px;
border-radius: calc(
var(--style-border-radius-buttons-primary) + min(var(--padding-sm), var(--style-border-radius-buttons-primary))
);
box-shadow: var(--shadow-popover);
padding: var(--padding-sm);
/* Layout styling */
display: flex;
align-items: center;
gap: var(--gap-md);
@starting-style {
opacity: 0;
transform: translateX(-50%) translateY(calc(100% + 40px));
}
&::before {
--border: 2px;
content: '';
position: absolute;
inset: calc(var(--border) * -1);
background: linear-gradient(var(--color-background) 0 100%), linear-gradient(hsl(0 0% 0% / 0.15) 0 100%);
background-clip: content-box, border-box;
border: var(--border) solid #0000;
border-radius: inherit;
z-index: -1;
backdrop-filter: blur(20px) saturate(180%) brightness(1.5);
}
}
@media (prefers-reduced-motion: no-preference) {
.sticky-add-to-cart__bar {
transition-property: transform, opacity, display;
transition-duration: 0.3s;
transition-timing-function: var(--ease-out-quad);
transition-behavior: allow-discrete;
}
}
.sticky-add-to-cart__bar[data-stuck='true'] {
transform: translateX(-50%) translateY(0%);
opacity: 1;
}
sticky-add-to-cart:not([data-variant-available='true']) .sticky-add-to-cart__bar {
opacity: 0;
transform: translateX(-50%) translateY(calc(100% + 40px));
display: none;
}
.sticky-add-to-cart__info[data-has-image='false'] {
padding-left: var(--padding-lg);
}
.sticky-add-to-cart__image {
flex-shrink: 0;
aspect-ratio: 1;
height: var(--height-buy-buttons);
overflow: hidden;
border-radius: var(--style-border-radius-buttons-primary);
background: var(--color-background-secondary);
}
.sticky-add-to-cart__image-img {
width: 100%;
height: 100%;
object-fit: cover;
}
.sticky-add-to-cart__info {
flex: 1;
min-width: 0; /* Allow text truncation */
}
.sticky-add-to-cart__title {
font-size: var(--font-paragraph-medium--size);
font-weight: var(--font-weight-semibold);
line-height: var(--font-paragraph--line-height);
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sticky-add-to-cart__variant {
color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
font-size: var(--font-paragraph-small--size);
margin-top: var(--margin-3xs);
}
.sticky-add-to-cart__price {
font-weight: var(--font-weight-semibold);
}
.sticky-add-to-cart__button {
height: var(--height-buy-buttons);
position: relative;
}
/* Mobile adjustments */
@media screen and (max-width: 749px) {
.sticky-add-to-cart__bar {
bottom: 0;
width: 100%;
max-width: none;
border-radius: 0;
&::before {
--border: 1px;
}
}
.sticky-add-to-cart__bar .add-to-cart-text__content {
display: none;
}
.sticky-add-to-cart__info[data-has-image='false'] {
padding-left: 0;
}
.sticky-add-to-cart__title {
font-size: var(--font-paragraph--size);
}
.sticky-add-to-cart__button {
padding: var(--padding-lg);
}
.sticky-add-to-cart__price {
font-size: var(--font-paragraph-small--size);
}
.sticky-add-to-cart__button {
width: var(--height-buy-buttons);
}
sticky-add-to-cart:not([data-variant-available='true']) .add-to-cart-text__content {
display: initial;
}
sticky-add-to-cart:not([data-variant-available='true']) .sticky-add-to-cart__button {
width: auto;
}
}
/* Small mobile - hide text content and compare price */
@media screen and (max-width: 389px) {
.sticky-add-to-cart__bar {
.compare-at-price {
display: none;
}
}
.sticky-add-to-cart__title {
display: none;
}
/* For product with only default variant show title */
.sticky-add-to-cart__info[data-singleton='true'] .sticky-add-to-cart__title {
display: block;
}
/* For single variant show title and variant, truncate both. variant should be identifiable with truncation */
.sticky-add-to-cart__info[data-single-option='true'] .sticky-add-to-cart__title {
display: block;
}
.sticky-add-to-cart__info[data-single-option='true'] .sticky-add-to-cart__variant {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
/* END_SECTION:product-information */
/* START_BLOCK:_product-details (INDEX:98) */
/* Clear padding on mobile, if not full-width */
@media screen and (max-width: 749px) {
.product-information.section--page-width .product-details > .group-block {
padding-inline: 0;
}
}
.view-product-title {
display: none;
}
/* Container styles */
.product-details {
display: flex;
align-self: start;
justify-content: center;
}
@media screen and (min-width: 750px) {
.product-details > .group-block {
height: min-content;
}
.full-height--desktop {
height: 100%;
max-height: calc(100vh - var(--header-group-height, 0));
min-height: fit-content;
}
.full-height--desktop .group-block {
align-self: var(--details-position, 'flex-start');
}
}
/* END_BLOCK:_product-details */
/* START_SNIPPET:background-media (INDEX:151) */
@media (prefers-reduced-motion: reduce) {
video-background-component video {
display: none;
}
}
/* END_SNIPPET:background-media */
/* START_SNIPPET:buy-buttons-styles (INDEX:156) */
.buy-buttons-block {
--buy-button-preferred-width: 185px;
width: 100%;
}
.product-form-buttons {
display: flex;
flex-wrap: wrap;
}
.product-form-buttons:not(:has(.quantity-rules)) {
gap: calc(var(--gap-sm) / 2);
@media screen and (min-width: 750px) {
gap: var(--gap-sm);
}
}
.product-form-buttons
> *:not(.quantity-selector-wrapper, .quantity-rules, .quantity-label, .volume-pricing, .product-form-text__error) {
flex: 1 1 var(--buy-button-preferred-width, 0);
min-width: fit-content;
}
.product-form-buttons--stacked
> *:not(.quantity-selector-wrapper, .quantity-rules, .quantity-label, .volume-pricing, .product-form-text__error) {
flex-basis: 51%;
}
.product-form-buttons button {
width: 100%;
padding-block: var(--padding-lg);
}
.quantity-selector {
flex-grow: 0;
flex-shrink: 0;
height: var(--height-buy-buttons);
}
.quantity-label {
flex: 1 0 100%;
width: 100%;
font-size: var(--font-size--sm);
margin-block-end: var(--gap-xs);
}
.quantity-label__cart-count {
color: var(--color-foreground-secondary);
}
.quantity-rules {
display: flex;
flex-wrap: wrap;
gap: 0;
row-gap: calc(var(--gap-xs) / 2);
flex: 1 0 100%;
width: 100%;
font-size: var(--font-size--xs);
color: var(--color-foreground-secondary);
margin-block-start: var(--gap-xs);
margin-block-end: var(--gap);
}
.product-form-buttons:has(~ .volume-pricing .volume-pricing__title) .quantity-rules {
margin-block-end: var(--gap-md);
}
.quantity-rules__item {
position: relative;
display: inline-block;
color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
}
.quantity-rules__item:not(:last-child) {
padding-right: var(--padding-xl);
margin-right: var(--margin-2xs);
}
.quantity-rules__item:not(:last-child)::after {
content: '•';
position: absolute;
inset-inline-end: 0.5rem;
top: 50%;
transform: translateY(-50%);
font-size: 0.5em;
line-height: 0;
}
.add-to-cart-button {
height: var(--height-buy-buttons);
text-transform: var(--button-text-case-primary);
}
.add-to-cart-button.button-secondary {
text-transform: var(--button-text-case-secondary);
}
.product-form-text__error {
display: flex;
flex: 1 0 100%;
align-items: flex-start;
gap: var(--gap-xs);
margin-block-end: var(--gap-xs);
}
.product__pickup-availabilities {
width: 100%;
}
.pickup-availability__column {
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.pickup-availability__row {
display: flex;
gap: var(--padding-xs);
}
.pickup-availability__dialog-row {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.pickup-availability__header-container {
padding-block-end: var(--padding-2xl);
}
.pickup-location__wrapper {
display: flex;
flex-direction: column;
padding-block: var(--padding-2xl);
border-top: 1px solid var(--color-border);
gap: var(--padding-xs);
}
.pickup-location__address-wrapper {
display: flex;
flex-direction: column;
gap: var(--padding-md);
}
.pickup-location__dialog {
padding: var(--padding-2xl);
position: fixed;
border-radius: 0;
width: var(--sidebar-width);
max-width: 95vw;
height: 100%;
margin: 0 0 0 auto;
border: var(--style-border-drawer);
box-shadow: var(--shadow-drawer);
background-color: var(--color-background);
}
.pickup-location__dialog:modal {
max-height: 100dvh;
}
.pickup-location__text-sm {
font-size: var(--font-size--sm);
margin: 0;
}
.pickup-location__text-xs {
font-size: var(--font-size--xs);
margin: 0;
}
.pickup-location__button {
width: fit-content;
color: var(--color-primary);
font-size: var(--font-size--xs);
font-family: var(--font-body--family);
padding: 0;
cursor: pointer;
margin-block: var(--margin-xs);
}
.pickup-location__button:hover {
color: var(--color-primary-hover);
}
.pickup-location__h4 {
margin: 0;
}
.pickup-location__text-bold {
font-size: var(--font-size--md);
font-weight: 600;
margin: 0;
}
.pickup-location__availability-wrapper {
display: flex;
align-items: center;
gap: var(--gap-xs);
font-family: var(--font-paragraph--family);
}
.pickup-location__address {
font-style: normal;
}
.pickup-location__close-button {
top: calc(var(--padding-2xl) - (var(--icon-size-xs) / 2));
right: calc(var(--padding-2xl) - var(--icon-size-xs));
}
.volume-pricing {
display: block;
width: 100%;
margin-bottom: var(--gap);
}
.volume-pricing:not(:has(.volume-pricing__title)) {
margin-top: 0;
margin-bottom: 0;
}
.volume-pricing__title {
display: block;
margin-block-end: var(--gap-sm);
font-size: var(--font-size--sm);
font-weight: var(--font-body--weight);
color: var(--color-foreground);
}
.volume-pricing__table {
width: 100%;
}
.volume-pricing__row {
display: flex;
justify-content: space-between;
align-items: center;
padding-block: var(--padding-sm);
padding-inline: var(--padding-md);
font-size: var(--font-size--sm);
}
.volume-pricing__row--even {
background: rgb(var(--color-foreground-rgb) / var(--opacity-5));
}
.volume-pricing__row--odd {
background: var(--color-background);
}
.volume-pricing__collapsible-wrapper {
block-size: 0;
overflow-y: clip;
opacity: 0;
interpolate-size: allow-keywords;
transition: opacity var(--animation-speed-slow) var(--animation-easing),
block-size var(--animation-speed-slow) var(--animation-easing);
}
.volume-pricing__toggle {
width: 100%;
padding-bottom: 0;
padding-inline: 0;
text-align: left;
color: var(--color-foreground-secondary);
font-size: var(--font-size--xs);
cursor: default;
margin-block-start: 0;
pointer-events: none;
}
button.volume-pricing__toggle {
/* Need the extra specificity to override .product-form-buttons button */
padding-block: var(--padding-sm);
}
.volume-pricing__toggle-text {
cursor: pointer;
display: inline-block;
pointer-events: auto;
}
.volume-pricing__show-less {
display: none;
}
.volume-pricing--expanded .volume-pricing__collapsible-wrapper {
opacity: 1;
block-size: auto;
@starting-style {
block-size: 0;
opacity: 0;
overflow-y: clip;
}
}
.volume-pricing--expanded .volume-pricing__show-more {
display: none;
}
.volume-pricing--expanded .volume-pricing__show-less {
display: inline;
}
/* Accelerated checkout styles — co-located here so they compile on pages
where the quick-add modal can display buy buttons (e.g. collection pages). */
.accelerated-checkout-block[data-shopify-visual-preview] {
width: 300px;
}
more-payment-options-link {
font-size: smaller;
}
more-payment-options-link a {
--button-color: var(--color-primary);
}
more-payment-options-link a:hover {
--button-color: var(--color-primary-hover);
}
.shopify-payment-button__more-options[aria-hidden='true'] {
display: none;
}
/* END_SNIPPET:buy-buttons-styles */
/* START_SNIPPET:divider (INDEX:165) */
.divider {
align-self: stretch;
display: flex;
align-items: center;
justify-content: var(--divider-justify-content);
}
.divider__line {
border-bottom: var(--divider-border-thickness) solid var(--color-border);
border-right: var(--divider-border-thickness) solid var(--color-border);
border-radius: calc(var(--style-border-radius-sm) * var(--divider-border-rounded));
flex-basis: var(--divider-flex-basis);
min-height: var(--divider-flex-basis);
}
/* END_SNIPPET:divider */
/* START_SNIPPET:group (INDEX:176) */
.group-block__link {
position: absolute;
inset: 0;
}
.group-block__link ~ :is(.group-block-content, .group-block__media-wrapper) {
pointer-events: none;
:is(a, button, input, textarea, select) {
pointer-events: auto;
}
}
/* Needs the .group-block__link ~ to be specific enough to take effect. */
.group-block__link ~ .group-block-content--design-mode {
pointer-events: auto;
}
/* END_SNIPPET:group */
/* START_SNIPPET:product-badges-styles (INDEX:202) */
.product-badges {
--badge-inset: max(var(--padding-xs), calc((var(--border-radius) + var(--padding-xs)) * (1 - cos(45deg))));
position: absolute;
z-index: var(--layer-flat);
}
.product-badges--bottom-left {
bottom: calc(var(--badge-inset) + var(--padding-block-start));
left: calc(var(--badge-inset) + var(--padding-inline-start));
}
.product-badges--top-left {
top: calc(var(--badge-inset) + var(--padding-block-start));
left: calc(var(--badge-inset) + var(--padding-inline-start));
}
.product-badges--top-right {
top: calc(var(--badge-inset) + var(--padding-block-start));
right: calc(var(--badge-inset) + var(--padding-inline-start));
}
.product-badges__badge {
--badge-font-size: var(--font-size--xs);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: var(--color-foreground);
background: var(--color-background);
font-size: var(--badge-font-size);
font-family: var(--badge-font-family);
font-weight: var(--badge-font-weight);
text-transform: var(--badge-text-transform);
border-radius: var(--badge-border-radius);
}
.product-badges__badge--rectangle {
padding-block: var(--badge-rectangle-padding-block);
padding-inline: var(--badge-rectangle-padding-inline);
}
/* END_SNIPPET:product-badges-styles */
/* START_SNIPPET:product-information-content (INDEX:205) */
.product-information {
gap: var(--gap) 0;
}
/* Base grid layout */
.product-information__grid {
display: grid;
grid-template-columns: subgrid;
grid-column: 1 / -1;
}
/* Default column positions */
.product-details {
order: 1;
}
.product-information__media {
order: 0;
width: 0;
min-width: 100%;
}
.product-information__media .product-media-gallery__placeholder-image {
width: 100%;
height: 100%;
}
/* Mobile styles */
@media screen and (max-width: 749px) {
.product-information__media {
grid-column: 1 / -1;
}
.product-details {
grid-column: 2 / 3;
}
}
/* Desktop styles */
@media screen and (min-width: 750px) {
.product-information__grid {
grid-column: 2;
}
/* Position when there is no media */
.product-information__grid.product-information--media-none {
.product-details {
width: var(--narrow-content-width);
margin: 0 auto;
}
}
/* Position when there is media */
.product-information__grid:not(.product-information--media-none) {
/* Media on the left side */
&.product-information--media-left {
grid-template-columns: 1fr min(50vw, var(--sidebar-width));
.product-information__media {
padding-right: calc(var(--gap, 0) / 2);
}
.product-details {
padding-left: calc(var(--gap, 0) / 2);
}
&:has(.media-gallery--extend) {
grid-column: 1 / 3;
}
}
/* Media on the right side */
&.product-information--media-right {
grid-template-columns: min(50vw, var(--sidebar-width)) 1fr;
.product-information__media {
padding-left: calc(var(--gap, 0) / 2);
order: 1;
}
.product-details {
padding-right: calc(var(--gap, 0) / 2);
order: 0;
}
&:has(.media-gallery--extend) {
grid-column: 2 / -1;
}
}
/* Equal width columns */
&.product-information__grid--half,
&.product-information__grid--half:has(.media-gallery--extend) {
grid-column: 1 / -1;
grid-template-columns:
var(--full-page-grid-margin) calc(var(--full-page-grid-central-column-width) / 2) calc(
var(--full-page-grid-central-column-width) / 2
)
var(--full-page-grid-margin);
&.product-information--media-left {
.product-information__media {
grid-column: 2 / 3;
&:has(.media-gallery--extend) {
grid-column: 1 / 3;
}
}
.product-details {
grid-column: 3 / 4;
}
}
&.product-information--media-right {
.product-information__media {
grid-column: 3 / 4;
&:has(.media-gallery--extend) {
grid-column: 3 / -1;
}
}
.product-details {
grid-column: 2 / 3;
}
}
}
}
/* Handle full width section */
.section--full-width {
.product-information__grid:not(.product-information--media-none) {
&.product-information--media-left,
&.product-information--media-right {
grid-column: 1 / -1;
}
&.product-information--media-left .product-details {
padding-inline-end: var(--padding-lg);
}
&.product-information--media-right .product-details {
padding-inline-start: var(--padding-lg);
}
&.product-information__grid--half.product-information--media-left {
.product-information__media {
grid-column: 1 / 3;
}
.product-details {
grid-column: 3 / -1;
}
}
&.product-information__grid--half.product-information--media-right {
.product-information__media {
grid-column: 3 / -1;
}
.product-details {
grid-column: 1 / 3;
}
}
}
}
}
/* Wider sidebar for large screens */
@media screen and (min-width: 1200px) {
.product-information__grid:not(
.product-information__grid--half,
.product-information--media-none
).product-information--media-left {
grid-template-columns: 2fr 1fr;
}
.product-information__grid:not(
.product-information__grid--half,
.product-information--media-none
).product-information--media-right {
grid-template-columns: 1fr 2fr;
}
}
.product-information__grid--limit-details .product-details > .group-block {
--details-max-width: var(--sidebar-width);
max-width: var(--details-max-width);
}
@media screen and (min-width: 1600px) {
.product-information__grid--limit-details .product-details > .group-block {
--details-max-width: 32rem;
}
}
/* If the header is sticky, make product details content stick underneath the header */
body:has(#header-group #header-component[data-sticky-state='active']) .product-details.sticky-content--desktop {
--sticky-header-offset: var(--header-height);
}
/* END_SNIPPET:product-information-content */
/* START_SNIPPET:product-media-gallery-content-styles (INDEX:206) */
media-gallery:where(.media-gallery--grid) .media-gallery__grid {
display: none;
}
media-gallery.media-gallery--grid .media-gallery__grid .product-media-container {
/* Needed for safari to stretch to full grid height */
height: 100%;
}
@media screen and (min-width: 750px) {
.media-gallery--two-column .media-gallery__grid {
grid-template-columns: repeat(2, 1fr);
}
/* Display grid view as a carousel on mobile, grid on desktop */
media-gallery:is(.media-gallery--grid) slideshow-component {
display: none;
}
media-gallery:where(.media-gallery--grid) .media-gallery__grid {
display: grid;
}
}
.product-media-container__zoom-button {
position: absolute;
width: 100%;
height: 100%;
z-index: var(--layer-flat);
cursor: zoom-in;
background-color: transparent;
&:hover {
background-color: transparent;
}
}
slideshow-slide.product-media-container--tallest {
content-visibility: visible;
}
.product-media__drag-zoom-wrapper {
aspect-ratio: inherit;
min-height: inherit;
min-width: inherit;
display: inherit;
flex: inherit;
}
.media-gallery__mobile-controls {
grid-area: auto;
}
.product-media-container--zoomable.product-media-container--image {
cursor: zoom-in;
}
/* END_SNIPPET:product-media-gallery-content-styles */
/* START_SNIPPET:quantity-selector (INDEX:209) */
.quantity-selector-wrapper {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: calc(var(--gap-sm) / 2);
@media screen and (min-width: 750px) {
gap: var(--gap-sm);
}
}
.price-per-item {
display: block;
color: var(--color-foreground);
font-size: var(--font-size--sm);
font-weight: normal;
}
/* END_SNIPPET:quantity-selector */
/* START_SNIPPET:quick-add-modal-styles (INDEX:210) */
#quick-add-dialog {
display: contents;
}
@media screen and (min-width: 750px) {
.quick-add-modal {
width: var(--quick-add-modal-width);
height: var(--quick-add-modal-height);
max-width: none;
}
}
.quick-add-modal {
padding: 0;
border: var(--style-border-popover);
overflow: hidden;
box-shadow: 0 5px 30px rgb(0 0 0 / var(--opacity-15));
@media screen and (max-width: 749px) {
position: fixed;
margin: auto 0 0 0;
min-height: unset;
max-width: 100%;
border-radius: 0;
overflow: clip;
height: fit-content;
}
}
.quick-add-modal[open] {
@media screen and (max-width: 750px) {
border-top-left-radius: var(--style-border-radius-popover);
border-top-right-radius: var(--style-border-radius-popover);
}
}
.quick-add-modal[open] {
@media screen and (min-width: 750px) {
display: flex;
}
}
.quick-add-modal .view-more-details__wrapper {
@media screen and (max-width: 749px) {
display: none;
}
}
.quick-add-modal[open] {
animation: modalSlideInTop var(--animation-speed) var(--animation-easing) forwards;
}
.quick-add-modal.dialog-closing {
animation: modalSlideOutTop var(--animation-speed) var(--animation-easing) forwards;
}
.quick-add-modal__close {
position: absolute;
top: var(--margin-2xs);
right: var(--margin-2xs);
transition: transform 0.15s var(--animation-timing-bounce);
z-index: var(--layer-raised);
overflow: visible;
transform-origin: center;
}
.quick-add-modal__close:active {
transform: scale(0.99) translateY(1px);
}
.quick-add-modal__close {
&:focus-visible {
outline: none;
}
&:focus-visible::after {
content: '';
position: absolute;
inset: 0;
border-radius: calc(var(--style-border-radius-popover) - var(--margin-2xs));
outline: var(--focus-outline-width) solid currentColor;
}
}
.quick-add-modal__content {
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-template-rows: 100% 1fr;
position: relative;
overflow-y: auto;
max-height: 100vh;
flex-grow: 1;
@media screen and (max-width: 749px) {
grid-template-columns: repeat(4, 1fr);
grid-template-rows: auto;
padding-inline: var(--padding-xl);
padding-block: var(--padding-xl);
gap: var(--gap-lg);
flex: 1;
min-height: 0;
overflow-y: auto;
height: auto; /* Prevent a bug in Safari where height:fit-content is not respected */
max-height: 100vh;
}
}
.quick-add-modal__content .media-gallery--grid .media-gallery__grid {
grid-template-columns: 1fr;
}
.quick-add-modal__content .media-gallery--grid.media-gallery--two-column .product-media-container:first-child {
grid-column: auto;
}
.quick-add-modal__content {
/* One column */
.media-gallery--grid:not(.media-gallery--two-column) .product-media > *,
/* Two column, small first image */
.media-gallery--grid.media-gallery--two-column:not(.media-gallery--large-first-image)
.product-media-container:nth-of-type(odd)
.product-media > *,
/* Two column, large first image */
.media-gallery--grid.media-gallery--two-column.media-gallery--large-first-image
.product-media-container:is(:first-of-type, :nth-of-type(even))
.product-media > *,
/* Carousel */
.media-gallery--carousel slideshow-container {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
}
.quick-add-modal__content .view-more-details__wrapper {
display: flex;
justify-content: flex-start;
width: 100%;
}
.view-more-details__wrapper .view-more-details {
display: flex;
align-items: center;
width: fit-content;
}
.quick-add-modal__content .product-header {
@media screen and (max-width: 749px) {
display: flex;
flex-direction: column;
grid-column: 2 / -1;
grid-row: 1;
padding-right: var(--padding-2xl);
}
}
.quick-add-modal__content .product-header a:not(product-price *) {
@media screen and (max-width: 749px) {
font-size: var(--font-size--md);
font-weight: 500;
color: inherit;
width: fit-content;
}
}
.quick-add-modal__content variant-picker,
.quick-add-modal__content product-form-component {
@media screen and (max-width: 749px) {
grid-column: 1 / -1;
}
}
.quick-add-modal__content .product-media-container__zoom-button {
cursor: default;
}
.quick-add-modal__content .product-details {
grid-column: 4 / -1;
grid-row: 1 / span 2;
display: flex;
flex-direction: column;
justify-content: stretch;
height: 100%;
min-height: 0;
overflow-y: auto;
position: relative;
dialog[open] & {
animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
animation-delay: 0.1s;
}
@media screen and (max-width: 749px) {
grid-column: 2 / span 2;
grid-row: span 1;
max-height: 100%;
height: 100%;
}
}
@property --quick-add-modal-mask-start {
syntax: '';
initial-value: 0px;
inherits: false;
}
@property --quick-add-modal-mask-end {
syntax: '';
initial-value: 0px;
inherits: true;
}
@keyframes detect-scroll {
from,
to {
--can-scroll: ;
}
}
@supports (animation-timeline: scroll(self)) {
dialog[open] .quick-add-modal__content .product-details {
mask-image: linear-gradient(to bottom, transparent 0%, #000 var(--quick-add-modal-mask-start), #000 100%);
animation: 0.3s var(--animation-timing-fade-in) 0.1s both fadeSlideIn, scrollStart 1s linear both,
scrollEnd 1s linear both, detect-scroll 1ms linear none;
animation-timeline: auto, scroll(self), scroll(self), scroll(self);
animation-range: normal, 0px 48px, calc(100% - 48px) 100%, 0% 100%;
}
}
@keyframes scrollStart {
from {
--quick-add-modal-mask-start: 0px;
}
to {
--quick-add-modal-mask-start: 48px;
}
}
@keyframes scrollEnd {
from {
--quick-add-modal-mask-end: 0px;
}
to {
--quick-add-modal-mask-end: 48px;
}
}
.quick-add-modal__content .product-details > .group-block {
flex-grow: 1;
width: auto;
}
.quick-add-modal__content > * {
min-height: 0;
}
.quick-add-modal__content .product-details :is(.view-product-title, .buy-buttons-block) {
flex: 0 0 auto;
}
.quick-add-modal__content .product-details :is(.buy-buttons-block) {
margin-top: auto;
position: sticky;
bottom: 0;
padding-bottom: var(--padding-3xl);
background-color: var(--color-background);
z-index: var(--layer-raised);
&::before {
--quick-add-modal-mask-end-progressive-enhanced: 0px;
position: absolute;
content: '';
display: block;
inset: auto 0 100% 0;
pointer-events: none;
height: min(var(--gap-2xl), var(--gap));
background-color: inherit;
mask-image: linear-gradient(
to top,
#000 0%,
#000 calc(var(--gap-2xs)),
transparent calc(100% - var(--quick-add-modal-mask-end-progressive-enhanced)),
transparent
);
}
}
.quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form) {
position: static;
padding-bottom: 0;
flex-grow: 1;
display: flex;
flex-direction: column;
}
.quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form) > product-form-component {
flex-grow: 1;
display: flex;
flex-direction: column;
}
.quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form) form {
flex-grow: 1;
display: flex;
flex-direction: column;
}
.quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form)::before {
display: none;
}
.quick-add-modal__content .product-details .buy-buttons-block__bar {
display: block;
position: sticky;
bottom: 0;
margin-top: auto;
padding-block: var(--gap-md) var(--padding-3xl);
background-color: var(--color-background);
z-index: var(--layer-raised);
&::before {
--quick-add-modal-mask-end-progressive-enhanced: 0px;
position: absolute;
content: '';
display: block;
inset: auto 0 100% 0;
pointer-events: none;
height: min(var(--gap-2xl), var(--gap));
background-color: inherit;
mask-image: linear-gradient(
to top,
#000 0%,
#000 calc(var(--gap-2xs)),
transparent calc(100% - var(--quick-add-modal-mask-end-progressive-enhanced)),
transparent
);
}
}
@supports (animation-timeline: scroll(self)) {
.quick-add-modal__content .product-details :is(.buy-buttons-block)::before,
.quick-add-modal__content .product-details .buy-buttons-block__bar::before {
--mask-if-scroll: var(--can-scroll) var(--quick-add-modal-mask-end);
--mask-if-no-scroll: 48px;
--quick-add-modal-mask-end-progressive-enhanced: var(--mask-if-scroll, var(--mask-if-no-scroll));
height: calc(var(--gap-2xs) + 48px);
}
}
.quick-add-modal__content .product-details .variant-picker {
flex: 0 0 auto;
padding-block: min(var(--gap-2xl), var(--gap));
margin-block-end: calc(var(--focus-outline-offset) + var(--focus-outline-width));
}
.quick-add-modal__content .variant-option--swatches {
padding-inline-start: var(--padding-2xs);
}
.quick-add-modal__content .variant-option--swatches legend {
margin-inline-start: calc(-1 * var(--padding-2xs));
}
.quick-add-modal__content:not(:has(.product-information__media)) .product-details {
grid-column: 1 / -1;
}
.quick-add-modal__content .view-product-title {
display: flex;
padding-block: 0;
margin-block-end: 12px;
/* Prevent overlap between title and close button */
padding-inline-end: calc(var(--padding-2xl) + calc(var(--minimum-touch-target) / 2));
}
.quick-add-modal__content .view-product-title a {
color: inherit;
text-decoration: none;
text-align: left;
font-size: var(--font-size--2xl);
font-weight: 600;
line-height: 1.2;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
transition: color 0.2s var(--animation-easing);
}
.quick-add-modal__content .product-details product-price {
--text-align: left;
}
.quick-add-modal__content .product-details product-price.text-block--align-center {
margin-inline: 0;
}
.quick-add-modal__content .product-details product-price.text-center {
--text-align: left;
}
.quick-add-modal__content .product-details product-price > * {
text-align: left;
}
.quick-add-modal__content
.product-details
*:not(
.group-block,
.group-block-content,
.buy-buttons-block,
.buy-buttons-block *,
.view-product-title,
.view-product-title *,
variant-picker,
variant-picker *,
product-price,
product-price *,
product-inventory,
product-inventory *,
.view-more-details__wrapper,
.view-more-details__wrapper *
) {
@media screen and (min-width: 750px) {
/* stylelint-disable-next-line declaration-no-important */
display: none !important;
}
}
.quick-add-modal__content
.group-block:not(
:has(
.buy-buttons-block,
.buy-buttons-block *,
.view-product-title,
.view-product-title *,
variant-picker,
variant-picker *,
product-price,
product-price *,
product-inventory,
product-inventory *,
.view-more-details__wrapper,
.view-more-details__wrapper *
),
.buy-buttons-block
) {
display: none;
}
@media screen and (min-width: 750px) {
.quick-add-modal__content .group-block-content {
gap: 0;
}
.quick-add-modal__content .media-gallery__grid {
gap: min(var(--gap-2xs), var(--image-gap));
border-radius: var(--style-border-radius-popover, 0);
}
.quick-add-modal__content .media-gallery--grid .product-media img {
border-radius: 0;
}
}
.quick-add-modal__content .product-details > .group-block {
padding-block: var(--padding-3xl) 0;
}
.quick-add-modal__content :where(.product-details > .group-block > .group-block-content > *) {
padding-inline: var(--padding-3xl);
}
.quick-add-modal__content slideshow-slide:not([aria-hidden='false']) {
content-visibility: auto;
}
.quick-add-modal__content .product-information__media {
width: 100%;
grid-column: 1 / span 1;
grid-row: 1;
position: relative;
top: 0;
animation: fadeIn 0.4s var(--animation-timing-fade-in) both;
@media screen and (min-width: 750px) {
position: sticky;
grid-column: 1 / 4;
width: var(--quick-add-modal-gallery-width);
overflow-y: auto;
-ms-overflow-style: none;
scrollbar-width: none;
}
&::-webkit-scrollbar {
display: none;
}
}
.quick-add-modal__content .product-information__media media-gallery {
pointer-events: none;
@media screen and (min-width: 750px) {
position: absolute;
inset: 0;
}
}
.quick-add-modal media-gallery {
padding: 0;
}
.quick-add-modal__content .product-information__media slideshow-arrows {
display: none;
}
.quick-add-modal__content .product-information__media slideshow-container {
display: block;
}
.quick-add-modal__content .product-information__media slideshow-slides {
display: flex;
flex-direction: column;
gap: var(--gap-2xs);
overflow: visible;
scroll-snap-type: none;
}
.quick-add-modal__content .product-information__media slideshow-slide {
width: 100%;
flex: none;
scroll-snap-align: unset;
position: relative;
transform: none;
opacity: 1;
visibility: visible;
transition: opacity 0.3s var(--animation-easing);
}
.quick-add-modal__content .product-information__media slideshow-slide[aria-hidden='true'] {
@media screen and (max-width: 749px) {
display: none;
}
}
.quick-add-modal__content .product-information__media slideshow-slide:nth-child(1) {
animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
}
.quick-add-modal__content .product-information__media slideshow-slide:nth-child(2) {
animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
animation-delay: 0.05s;
}
.quick-add-modal__content .product-information__media slideshow-slide:nth-child(3) {
animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
animation-delay: 0.1s;
}
.quick-add-modal__content .product-information__media :is(slideshow-controls, slideshow-controls[thumbnails]) {
display: none;
}
.quick-add-modal__content .sticky-content,
.quick-add-modal__content .sticky-content--desktop {
top: 0;
}
.quick-add-modal__content .text-block.rte:not(product-price),
.quick-add-modal__content .view-more-details__wrapper {
display: none;
}
@keyframes fadeSlideIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* END_SNIPPET:quick-add-modal-styles */
/* START_SNIPPET:quick-add-styles (INDEX:212) */
/* Quick Add */
.quick-add {
--quick-add-offset: var(--padding-sm);
--quick-add-right: calc(var(--quick-add-offset) + var(--padding-inline-end));
--quick-add-bottom: calc(var(--quick-add-offset) + var(--padding-block-end));
position: absolute;
inset: 0;
z-index: var(--layer-raised);
pointer-events: none;
@media screen and (min-width: 750px) {
--quick-add-offset: var(--padding-md);
}
}
.quick-add .variant-option__button-label input[data-option-available='false'] {
cursor: not-allowed;
}
.quick-add[class*='color-scheme-'] {
background-color: #0000;
}
product-card:is(:hover, :focus-within) .quick-add__button {
opacity: 1;
}
.quick-add__button {
display: var(--quick-add-mobile-display, none);
align-items: center;
background: linear-gradient(var(--color-background) 0 100%) padding-box;
padding: 0;
border-radius: 50px;
border: 2px solid hsl(0 0% 0% / 0.15);
height: var(--button-size-md);
cursor: pointer;
opacity: var(--quick-add-mobile-opacity, 0);
overflow: hidden;
color: var(--color-foreground);
pointer-events: all;
position: absolute;
right: max(var(--quick-add-right), calc((var(--border-radius) + var(--quick-add-right)) * (1 - cos(45deg))));
bottom: max(var(--quick-add-bottom), calc((var(--border-radius) + var(--quick-add-bottom)) * (1 - cos(45deg))));
backdrop-filter: blur(20px) saturate(180%);
&:hover {
scale: 1.03;
/* Hover stabilizer: extends hit area to maintain hover state */
&::before {
content: '';
position: absolute;
inset: -10px;
z-index: -1;
}
}
&:active {
scale: 0.99;
}
.quick-add[stay-visible] & {
display: grid;
}
@media screen and (min-width: 750px) {
display: var(--quick-add-display, flex);
opacity: 0;
}
}
.quick-add__button.add-to-cart-button {
height: var(--button-size-md);
}
.quick-add__button .add-to-cart-text {
background: var(--color-background);
overflow: hidden;
border-radius: 50px;
height: 100%;
gap: 0;
}
.quick-add__button .svg-wrapper .checkmark-burst {
width: 22px;
height: 22px;
}
.quick-add__button .add-to-cart-icon {
/* account for border width */
height: 100%;
width: calc(var(--button-size-md) - 4px);
}
.quick-add__button .add-to-cart-text__content {
display: grid;
grid-template-columns: 0fr;
& > span {
min-width: 0;
span {
padding-right: var(--padding-sm);
opacity: 0;
display: inline-block;
filter: blur(2px);
translate: 0.5ch 0;
}
}
}
.quick-add__button[data-added='true'] .add-to-cart-text {
animation-name: atc-fade-out;
}
.quick-add__button[data-added='true'] .add-to-cart-text--added {
translate: 0 0;
animation-name: atc-fade-in;
}
.quick-add__product-form-component {
height: 100%;
}
.quick-add__product-form-component .shopify-product-form {
display: flex;
justify-content: flex-end;
align-items: flex-end;
container-type: inline-size;
height: 100%;
}
.quick-add-modal .product-media {
width: 100%;
height: 100%;
}
.quick-add-modal deferred-media {
display: none;
}
.quick-add-modal .media-gallery--carousel slideshow-component {
--cursor: default;
}
.quick-add__button:is(:hover, :focus-visible) {
.add-to-cart-text__content {
grid-template-columns: 1fr;
span span {
opacity: 1;
translate: 0 0;
filter: blur(0);
}
}
}
@media (prefers-reduced-motion: reduce) {
.quick-add__button .add-to-cart-text__content {
grid-template-columns: 1fr;
span span {
opacity: 1;
translate: 0 0;
filter: blur(0);
}
}
}
@media (prefers-reduced-motion: no-preference) {
.quick-add__button {
transition-property: scale, translate, opacity;
transition-duration: var(--animation-speed);
transition-timing-function: var(--ease-out-cubic);
}
.quick-add__button:is(:hover, :focus-visible) {
.add-to-cart-text__content,
.add-to-cart-text__content span span {
transition-delay: var(--animation-speed);
}
}
.quick-add__button .add-to-cart-text__content {
transition-property: grid-template-columns;
transition-duration: var(--animation-speed);
transition-timing-function: var(--ease-out-cubic);
span span {
transition-property: opacity, filter, translate;
transition-duration: var(--animation-speed-slow);
transition-timing-function: var(--ease-out-quad);
}
}
}
/* END_SNIPPET:quick-add-styles */
/* START_SNIPPET:resource-card (INDEX:214) */
.resource-card {
--resource-card-secondary-image-opacity: 0;
--resource-card-primary-image-opacity: calc(1 - var(--resource-card-secondary-image-opacity));
display: flex;
flex-direction: column;
row-gap: var(--padding-xs);
position: relative;
text-decoration: none;
height: 100%;
opacity: 0;
animation: fadeIn var(--animation-speed-medium) var(--animation-timing-fade-in) forwards;
}
.resource-card__link {
position: absolute;
inset: 0;
z-index: 1;
}
.resource-card__content {
display: flex;
flex-direction: column;
color: var(--color-foreground);
gap: var(--padding-3xs);
.price {
font-weight: 500;
}
.volume-pricing-note {
display: block;
margin-top: var(--padding-3xs);
font-family: var(--font-body--family);
font-weight: normal;
font-size: min(0.85em, var(--font-paragraph--size));
line-height: normal;
letter-spacing: normal;
text-transform: none;
color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
}
}
.resource-card[data-resource-type='article'] .resource-card__content,
.resource-card[data-resource-type='page'] .resource-card__content {
gap: var(--padding-xs);
}
.resource-card__image {
aspect-ratio: var(--resource-card-aspect-ratio, auto);
object-fit: cover;
border-radius: var(--resource-card-corner-radius);
opacity: var(--resource-card-primary-image-opacity);
}
.resource-card__image--secondary {
position: absolute;
top: 0;
opacity: var(--resource-card-secondary-image-opacity);
border-radius: var(--resource-card-corner-radius);
}
.resource-card__media:empty {
display: none;
}
.resource-card__image-placeholder {
padding: var(--padding-sm);
font-size: var(--font-size--lg);
line-height: var(--line-height--display-loose);
word-break: break-word;
background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
aspect-ratio: var(--resource-card-aspect-ratio, auto);
border-radius: var(--resource-card-corner-radius);
color: var(--color-foreground);
}
.resource-card__title {
margin-block: 0;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
line-height: 1.3;
word-break: break-word;
overflow-wrap: break-word;
}
.resource-card__title.paragraph {
line-height: 1.3;
}
.resource-card--overlay {
height: 100%;
&::before {
content: '';
position: absolute;
inset: 50% 0 0;
background: var(--gradient-image-overlay);
border-radius: var(--resource-card-corner-radius);
pointer-events: none;
z-index: var(--layer-flat);
}
}
.resource-card--overlay .resource-card__image {
height: 100%;
}
.resource-card--overlay .resource-card__content {
position: absolute;
inset: auto 0 0;
padding: var(--padding-lg) var(--padding-lg) var(--padding-sm);
z-index: var(--layer-raised);
}
.resource-card--overlay .resource-card__title {
color: var(--color-white);
}
/* Collection images */
.resource-card__image-wrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--gap-2xs);
}
.resource-card__collection-image {
aspect-ratio: 1 / 1;
object-fit: cover;
border-radius: calc(var(--card-corner-radius) - (var(--padding-xs) / 2));
}
.resource-card__subtext {
color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
margin-block-start: 0;
}
.resource-card__subtext.paragraph {
font-size: var(--font-size--body-sm);
line-height: var(--line-height--body-tight);
color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
}
.resource-card:has(.resource-card__image--secondary) {
&:hover,
&:focus {
--resource-card-secondary-image-opacity: 1;
}
}
/* END_SNIPPET:resource-card */
/* START_SNIPPET:search-modal (INDEX:219) */
/* Search modal style */
.search-modal {
--search-border-radius: var(--style-border-radius-popover);
--search-border-width: var(--style-border-width);
}
.search-modal__content {
/* Approx set the top so when the content is at max height, the modal is centered */
--modal-top-margin: calc(50dvh - var(--modal-max-height) / 2 - 2rem);
--modal-width: 66dvw;
padding: 0;
border: var(--style-border-popover);
@media screen and (min-width: 750px) {
width: var(--modal-width);
margin-block-start: var(--modal-top-margin);
overflow: hidden;
}
}
/* Hide the default dialog backdrop on small screens */
@media screen and (max-width: 749px) {
.search-modal__content::backdrop {
display: none;
}
}
.dialog-modal[open].search-modal__content {
transform-origin: bottom center;
animation: search-element-slide-in-bottom 300ms var(--ease-out-quad) forwards;
border-radius: var(--search-border-radius);
box-shadow: var(--shadow-popover);
@media screen and (max-width: 749px) {
border-radius: 0;
}
}
.dialog-modal.search-modal__content.dialog-closing {
animation: search-element-slide-out-bottom 200ms var(--ease-out-quad) forwards;
}
.search-modal__content[open] {
display: flex;
}
.search-modal__content :is(.predictive-search-dropdown, .predictive-search-form__content-wrapper) {
position: relative;
}
.dialog-modal
.predictive-search-form__header:has(
.predictive-search__reset-button:not(.predictive-search__reset-button[hidden])
)::before {
content: '';
position: absolute;
right: calc(var(--padding-sm) + var(--minimum-touch-target));
top: 0;
bottom: 0;
width: var(--border-width-sm);
background-color: var(--color-border);
}
.dialog-modal
.predictive-search-form__header:has(.predictive-search__reset-button:not(.predictive-search__reset-button[hidden]))
> .predictive-search__close-modal-button {
&::before {
content: none;
}
}
@media screen and (min-width: 750px) {
.dialog-modal
.predictive-search-form__header:has(
.predictive-search__reset-button:not(.predictive-search__reset-button[hidden])
)::before {
right: calc(var(--padding-2xl) * 2);
}
}
predictive-search-component {
--resource-card-corner-radius: var(--product-corner-radius);
display: flex;
width: 100%;
position: relative;
margin-inline: auto;
align-items: center;
background-color: var(--color-background);
z-index: var(--layer-heightened);
}
.predictive-search-form__footer {
display: none;
position: absolute;
bottom: 0;
left: 0;
right: 0;
@media screen and (min-width: 750px) {
--to-top-gradient-background: linear-gradient(
to top,
rgb(var(--color-background-rgb) / var(--opacity-90)),
rgb(var(--color-background-rgb) / var(--opacity-80)),
rgb(var(--color-background-rgb) / var(--opacity-40)),
transparent
);
padding-block: var(--padding-xs) var(--padding-lg);
background-image: var(--to-top-gradient-background);
}
}
predictive-search-component:has([data-search-results]):not(:has(.predictive-search-results__no-results))
.predictive-search-form__footer {
display: block;
}
.predictive-search-form {
position: relative;
width: 100%;
align-self: flex-start;
}
.predictive-search-form__content {
max-height: 50dvh;
overflow-y: auto;
background-color: var(--color-background);
/* Firefox */
scrollbar-width: none;
/* Webkit browsers */
&::-webkit-scrollbar {
display: none;
}
}
.predictive-search-form__content-wrapper {
position: absolute;
top: 100%;
width: 100%;
left: 0;
z-index: var(--layer-raised);
display: flex;
flex-direction: column;
border-radius: 0 0 var(--search-border-radius) var(--search-border-radius);
transition: box-shadow var(--animation-speed) var(--animation-easing);
transform: translateZ(0);
will-change: transform, opacity;
overflow: hidden;
@media screen and (max-width: 749px) {
border-radius: 0;
}
@media screen and (min-width: 750px) {
max-height: var(--modal-max-height);
}
}
/* Add new rule to apply bottom padding only when search button exists */
.predictive-search-form__content-wrapper:has([data-search-results]):not(:has(.predictive-search-results__no-results))
> .predictive-search-form__content {
padding-block-end: var(--padding-6xl);
}
.predictive-search-form__header-inner {
background: var(--color-background);
border: var(--search-border-width) solid var(--color-border);
color: var(--color-foreground);
border-radius: var(--style-border-radius-popover);
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
@media screen and (max-width: 749px) {
border-radius: var(--style-border-radius-inputs);
border: none;
}
}
.predictive-search-form__header-inner:focus-within {
outline-offset: var(--focus-outline-offset);
@media screen and (min-width: 750px) {
outline: var(--focus-outline-width) solid var(--color-primary);
}
}
.predictive-search-form__header {
display: flex;
position: sticky;
top: 0;
z-index: var(--layer-heightened);
width: 100%;
align-items: center;
background-color: var(--color-input-background);
border: var(--search-border-width) solid var(--color-border);
border-radius: var(--style-border-radius-inputs);
@media screen and (max-width: 749px) {
padding: var(--padding-2xs) var(--padding-sm);
}
}
.predictive-search-form__header:focus-within,
.predictive-search-form__header-inner:focus-within,
.predictive-search-form__header-inner:has(.search-input:is(:focus, :focus-visible)) {
outline: none;
box-shadow: none;
/* stylelint-disable-next-line declaration-no-important */
border-color: var(--color-border) !important;
}
input.search-input {
border-radius: var(--style-border-radius-inputs);
padding-block: var(--padding-sm);
font-size: var(--font-size--md);
width: 100%;
color: var(--color-foreground);
padding-inline: calc(var(--margin-lg) + var(--icon-size-lg)) 0;
background: transparent;
text-overflow: ellipsis;
overflow: hidden;
outline: none;
border: 0;
}
.search-input::placeholder {
color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
}
.search-input,
.search-input:is(:focus, :focus-visible, :focus-within),
.predictive-search-form__header *:is(:focus, :focus-visible) {
outline: none;
box-shadow: none;
}
.search-input:hover {
background-color: transparent;
}
.predictive-search__icon {
position: absolute;
left: var(--margin-xl);
top: auto;
width: var(--icon-size-lg);
height: var(--icon-size-lg);
color: rgb(var(--color-foreground-rgb) / var(--opacity-60));
@media screen and (min-width: 750px) {
left: var(--margin-md);
}
}
.predictive-search__icon > svg {
width: var(--icon-size-md);
height: var(--icon-size-md);
}
.predictive-search__reset-button {
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
min-width: var(--minimum-touch-target);
height: var(--minimum-touch-target);
padding: 0;
margin-inline-end: var(--margin-md);
background: transparent;
color: var(--color-foreground);
opacity: 0.68;
transition: opacity var(--animation-speed-medium) var(--animation-timing-fade-out),
visibility var(--animation-speed-medium) var(--animation-timing-fade-out);
&:hover {
color: var(--color-foreground);
}
&:active {
transform: scale(0.9);
transition: transform 100ms var(--animation-timing-active);
}
@media screen and (min-width: 750px) {
margin-inline-end: var(--margin-2xs);
}
}
.predictive-search__reset-button[hidden] {
opacity: 0;
pointer-events: none;
visibility: hidden;
}
.predictive-search__reset-button-icon {
display: flex;
align-items: center;
justify-content: center;
width: var(--icon-size-lg);
height: var(--icon-size-lg);
transition: background-color var(--animation-speed-medium) ease-in-out,
transform var(--animation-speed-medium) var(--animation-timing-bounce);
border-radius: 50%;
&:hover {
background-color: rgb(var(--color-primary-hover-rgb) / var(--opacity-8));
}
}
.predictive-search__reset-button:active .predictive-search__reset-button-icon {
transform: scale(0.85);
transition-timing-function: var(--animation-timing-active);
transition-duration: 100ms;
}
.predictive-search__reset-button svg {
width: var(--icon-size-md);
height: var(--icon-size-md);
}
.predictive-search__reset-button-text {
display: none;
}
.predictive-search__search-button {
margin: auto;
z-index: var(--layer-raised);
transition: transform var(--animation-speed-medium) var(--animation-timing-bounce),
box-shadow var(--animation-speed-medium) var(--animation-timing-hover);
transform-origin: center;
&:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgb(0 0 0 / var(--opacity-5));
}
&:active {
transform: scale(0.97);
transition: transform 100ms var(--animation-timing-active);
box-shadow: none;
}
}
.predictive-search__close-modal-button {
--button-color: var(--color-foreground);
--button-background-color: transparent;
display: flex;
justify-content: center;
align-items: center;
width: var(--minimum-touch-target);
height: var(--minimum-touch-target);
margin-inline-start: var(--margin-sm);
padding: 0;
box-shadow: none;
&:active {
transform: scale(0.8);
transition: transform 100ms var(--animation-timing-active);
}
.svg-wrapper,
svg {
width: var(--icon-size-xs);
height: var(--icon-size-xs);
}
}
.predictive-search__close-modal-button:hover {
--button-color: var(--color-foreground);
--button-background-color: transparent;
}
/* END_SNIPPET:search-modal */
/* START_SNIPPET:skip-to-content-link (INDEX:223) */
.skip-to-content-link {
position: absolute;
left: -99999px;
}
.skip-to-content-link:focus {
z-index: var(--layer-temporary);
overflow: auto;
width: auto;
height: auto;
padding: var(--padding-lg) var(--padding-4xl);
left: var(--margin-lg);
top: var(--margin-lg);
background-color: var(--color-background);
box-shadow: 0 0 0 var(--focus-outline-offset) var(--color-background);
}
/* END_SNIPPET:skip-to-content-link */
/* START_SNIPPET:text (INDEX:239) */
:root {
--text-align-default: left;
}
[style*='--horizontal-alignment: center'] .text-block {
--text-align-default: center;
}
[style*='--horizontal-alignment: flex-end'] .text-block {
--text-align-default: right;
}
[style*='--horizontal-alignment: flex-start'] > .text-block {
--text-align-default: left;
}
[style*='--horizontal-alignment: center'] > .text-block {
--text-align-default: center;
}
[style*='--horizontal-alignment: flex-end'] > .text-block {
--text-align-default: right;
}
.text-block {
width: var(--width);
max-width: 100%;
display: flex;
flex-direction: column;
align-items: var(--horizontal-alignment);
}
.text-block > * {
width: var(--width);
max-inline-size: min(100%, var(--max-width, 100%));
text-align: var(--text-align, var(--text-align-default));
text-wrap: var(--text-wrap);
}
.text-block:not(.text-block--full-width).rte,
.text-block:not(.text-block--full-width).paragraph {
/* Safari doesn't support pretty, so fallback to balance */
text-wrap: balance;
text-wrap: pretty;
}
.text-block:not(.text-block--full-width):is(.h1, .h2, .h3, .h4, .h5, .h6) {
text-wrap: balance;
}
/* Hide underline unless text is using paragraph styles. */
.text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) a {
text-decoration-color: transparent;
}
.text-block h1,
.text-block.h1 > * {
margin-block: var(--font-h1--spacing);
}
.text-block h2,
.text-block.h2 > * {
margin-block: var(--font-h2--spacing);
}
.text-block h3,
.text-block.h3 > * {
margin-block: var(--font-h3--spacing);
}
.text-block h4,
.text-block.h4 > * {
margin-block: var(--font-h4--spacing);
}
.text-block h5,
.text-block.h5 > * {
margin-block: var(--font-h5--spacing);
}
.text-block h6,
.text-block.h6 > * {
margin-block: var(--font-h6--spacing);
}
.text-block p,
.text-block.p > * {
margin-block: var(--font-paragraph--spacing);
}
.text-block > *:first-child {
margin-block-start: 0;
}
.text-block > *:last-child {
margin-block-end: 0;
}
.text-block--align-center,
.text-block--align-center > * {
margin-inline: auto;
}
.text-block--align-right,
.text-block--align-right > * {
margin-inline-start: auto;
}
.text-block--background {
background-color: var(--text-background-color);
border-radius: var(--text-corner-radius);
/* To avoid text being cropped when using a border radius we add a minimum padding. */
padding-block-start: max(var(--text-padding), var(--padding-block-start, 0));
padding-block-end: max(var(--text-padding), var(--padding-block-end, 0));
padding-inline-start: max(var(--text-padding), var(--padding-inline-start, 0));
padding-inline-end: max(var(--text-padding), var(--padding-inline-end, 0));
}
.custom-color,
.custom-color > :is(h1, h2, h3, h4, h5, h6, p, *) {
color: var(--color);
}
/* END_SNIPPET:text */
/* START_SNIPPET:variant-main-picker (INDEX:248) */
/* Variant picker container styles - unique to main variant picker */
.variant-picker {
width: 100%;
}
.variant-picker__form {
width: 100%;
}
.variant-picker[data-shopify-visual-preview] {
min-width: 300px;
padding-inline-start: max(4px, var(--padding-inline-start));
}
/* Dropdown variant option styles */
.variant-option__select-wrapper {
display: flex;
position: relative;
border: var(--style-border-width-inputs) solid var(--color-border);
border-radius: var(--style-border-radius-inputs);
align-items: center;
margin-top: var(--margin-2xs);
overflow: clip;
}
.variant-option__select-wrapper:has(.swatch) {
--variant-picker-swatch-width: 20px;
--variant-picker-swatch-height: 20px;
}
.variant-option__select-wrapper:hover {
border-color: var(--color-variant-hover-border);
}
.variant-option__select:focus-visible {
outline: var(--focus-outline-width) solid currentcolor;
outline-offset: var(--focus-outline-offset);
}
.variant-option__select {
padding-block: var(--padding-md);
padding-inline: var(--padding-lg) calc(var(--padding-lg) + var(--icon-size-2xs));
appearance: none;
border: 0;
width: 100%;
margin: 0;
cursor: pointer;
}
.variant-option__select-wrapper .icon {
position: absolute;
right: var(--padding-md);
top: 50%;
transform: translateY(-50%);
width: var(--icon-size-2xs);
height: var(--icon-size-2xs);
pointer-events: none;
}
.variant-option__select--has-swatch {
padding-inline-start: calc((2 * var(--padding-sm)) + var(--variant-picker-swatch-width));
}
.variant-option__select-wrapper .swatch {
position: absolute;
top: 50%;
left: var(--padding-md);
transform: translateY(-50%);
}
/* Variant picker alignment modifiers */
.variant-picker--center,
.variant-picker--center .variant-option {
text-align: center;
align-items: center;
justify-content: center;
width: 100%;
}
.variant-picker--right,
.variant-picker--right .variant-option {
text-align: right;
justify-content: right;
}
/* END_SNIPPET:variant-main-picker */