/** Shopify CDN: Minification failed

Line 506:0 Unexpected "{"
Line 506:1 Expected identifier but found "%"
Line 506:46 Unexpected "/"
Line 509:65 Expected identifier but found "%"

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:matteos-builder-hero (INDEX:37) */
.mt-builder-hero { padding: 0 0 8px; }
.mt-builder-hero .mt-breadcrumbs { font-size: 13px; color: var(--espresso-soft); padding: 24px 0; }
.mt-builder-hero .mt-breadcrumbs a { color: var(--espresso-soft); text-decoration: none; }
.mt-builder-hero .mt-breadcrumbs a:hover { color: var(--burgundy); }
.mt-builder-hero .mt-bc-sep { margin: 0 10px; opacity: 0.5; }
.mt-bh-head { max-width: 760px; }
.mt-bh-head h1 { font-family: var(--typeHeaderPrimary, 'Fraunces'), serif; font-size: clamp(2.2rem, 5vw, 3.4rem); color: var(--espresso); margin: 0 0 16px; line-height: 1.05; }
.mt-bh-head h1 em { font-style: italic; color: var(--burgundy); }
.mt-bh-intro { font-size: 18px; line-height: 1.6; color: var(--espresso-mid); margin: 0; }
.mt-bh-price { display: inline-block; margin-top: 18px; background: var(--cream-deep); border-radius: 100px; padding: 10px 18px; font-size: 14px; font-weight: 600; color: var(--espresso); }
.mt-bh-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 36px 0 8px; }
@media (max-width: 760px) { .mt-bh-steps { grid-template-columns: 1fr; } }
.mt-bh-step { background: var(--cream-soft); border-radius: var(--radius-md); padding: 22px 24px; }
.mt-bh-num { font-family: var(--typeHeaderPrimary, 'Fraunces'), serif; font-style: italic; font-size: 22px; color: var(--gold); margin-bottom: 8px; }
.mt-bh-step h3 { font-size: 17px; color: var(--espresso); margin: 0 0 6px; }
.mt-bh-step p { font-size: 14px; line-height: 1.5; color: var(--espresso-mid); margin: 0; }
.mt-bh-widget-label { font-family: var(--typeHeaderPrimary, 'Fraunces'), serif; font-size: 24px; color: var(--espresso); margin: 36px 0 4px; }
/* The Recharge builder renders ~115px of its own empty top spacing above its
   "Build Your Own 6-Pack" heading. Pull the whole app section up so it sits
   tight under "Pick your six". Desktop only — mobile stacks fine as-is. */
@media (min-width: 761px) {
  .mt-section-wrap:has(.mt-builder-hero) + .shopify-section { margin-top: -96px; }
}
/* END_SECTION:matteos-builder-hero */

/* START_SECTION:matteos-catalog (INDEX:38) */
.mt-catalog .mt-cat-hero { background: var(--cream-deep); padding: 56px 0 48px; transition: background-color 0.45s ease; }
.mt-catalog .mt-cat-hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; }
.mt-catalog .mt-cat-hero-visual { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 14px; aspect-ratio: 1/1; background: rgba(42,24,16,0.04); border: 1px solid rgba(42,24,16,0.07); border-radius: var(--radius-lg); padding: 6%; }
.mt-catalog .mt-cat-hero-visual--photo { background: transparent; border: none; padding: 0; display: block; overflow: hidden; }
.mt-catalog .mt-cat-hero-photo { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-lg); display: block; }
.mt-catalog .mt-ch-tile { flex: 1 1 40%; min-width: 120px; max-width: 46%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: var(--cream-soft); border: 1px solid rgba(42,24,16,0.06); border-radius: var(--radius-md); padding: 22px 14px; cursor: pointer; font-family: inherit; transition: transform 0.2s, box-shadow 0.2s; }
.mt-catalog .mt-ch-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.mt-catalog .mt-ch-ico { width: 54px; height: 54px; color: var(--burgundy); display: flex; align-items: center; justify-content: center; }
.mt-catalog .mt-ch-ico svg { width: 100%; height: auto; display: block; }
.mt-catalog .mt-ch-label { font-family: var(--typeHeaderPrimary, 'Fraunces'), serif; font-size: 16px; color: var(--espresso); text-align: center; line-height: 1.15; }
.mt-catalog .mt-ch-static { cursor: default; border-color: var(--gold-soft); }
.mt-catalog .mt-ch-static:hover { transform: none; box-shadow: none; }
.mt-catalog .mt-ch-static .mt-ch-ico { color: var(--gold); }
@media (max-width: 900px) { .mt-catalog .mt-cat-hero-grid { grid-template-columns: 1fr; gap: 36px; } .mt-catalog .mt-cat-hero-visual { aspect-ratio: auto; } }
.mt-catalog .mt-breadcrumbs { font-size: 13px; color: var(--espresso-soft); margin-bottom: 20px; }
.mt-catalog .mt-breadcrumbs a { color: var(--espresso-mid); text-decoration: none; }
.mt-catalog .mt-breadcrumbs a:hover { color: var(--burgundy); }
.mt-catalog .mt-breadcrumbs .mt-sep { margin: 0 8px; color: var(--espresso-soft); }
.mt-catalog .mt-cat-hero h1 { font-family: var(--typeHeaderPrimary, 'Fraunces'), serif; font-size: clamp(34px, 5vw, 52px); color: var(--espresso); margin: 0 0 14px; }
.mt-catalog .mt-cat-hero p { max-width: 640px; font-size: 17px; line-height: 1.6; color: var(--espresso-mid); margin: 0; }

.mt-catalog .mt-filter-bar { position: sticky; top: 0; z-index: 5; background: var(--cream-soft); border-bottom: 1px solid rgba(42,24,16,0.08); box-shadow: var(--shadow-sm); }
.mt-catalog .mt-filter-inner { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-top: 14px; padding-bottom: 14px; flex-wrap: wrap; }
.mt-catalog .mt-filter-pills { display: flex; gap: 10px; flex-wrap: wrap; }
.mt-catalog .mt-fpill { background: transparent; border: 1.5px solid rgba(42,24,16,0.15); color: var(--espresso-mid); padding: 9px 18px; border-radius: 100px; font-family: var(--typeBasePrimary, 'Hanken Grotesk'), sans-serif; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.mt-catalog .mt-fpill:hover { border-color: var(--espresso); color: var(--espresso); }
.mt-catalog .mt-fpill.active { background: var(--burgundy); border-color: var(--burgundy); color: var(--cream-soft); }
.mt-catalog .mt-filter-meta { font-size: 13px; color: var(--espresso-soft); }
.mt-catalog .mt-filter-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.mt-catalog .mt-sort { display: inline-flex; align-items: center; gap: 8px; }
.mt-catalog .mt-sort-label { font-size: 13px; color: var(--espresso-soft); font-weight: 600; }
.mt-catalog .mt-sort-select { appearance: none; -webkit-appearance: none; background: transparent; border: 1.5px solid rgba(42,24,16,0.15); color: var(--espresso); padding: 9px 34px 9px 16px; border-radius: 100px; font-family: var(--typeBasePrimary, 'Hanken Grotesk'), sans-serif; font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color 0.2s; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%235A3A28' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
.mt-catalog .mt-sort-select:hover { border-color: var(--espresso); }
.mt-catalog .mt-sort-select:focus { outline: none; border-color: var(--burgundy); }
.mt-catalog .mt-filter-toggle { display: inline-flex; align-items: center; gap: 8px; background: transparent; border: 1.5px solid rgba(42,24,16,0.15); color: var(--espresso); padding: 9px 16px; border-radius: 100px; font-family: var(--typeBasePrimary, 'Hanken Grotesk'), sans-serif; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.mt-catalog .mt-filter-toggle:hover { border-color: var(--espresso); }
.mt-catalog .mt-filter-toggle.is-open { background: var(--espresso); border-color: var(--espresso); color: var(--cream-soft); }
.mt-catalog .mt-ft-count { font-weight: 700; color: var(--burgundy); }
.mt-catalog .mt-filter-toggle.is-open .mt-ft-count { color: var(--gold-soft); }

.mt-catalog .mt-filter-panel { background: var(--cream-soft); border-bottom: 1px solid rgba(42,24,16,0.08); padding: 28px 0; }
.mt-catalog .mt-fp-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.mt-catalog .mt-fp-col h4 { font-family: var(--typeBasePrimary, 'Hanken Grotesk'), sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--espresso-soft); margin: 0 0 14px; }
.mt-catalog .mt-fp-opt { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 14px; color: var(--espresso); cursor: pointer; }
.mt-catalog .mt-fp-opt input { width: 16px; height: 16px; accent-color: var(--burgundy); cursor: pointer; flex: none; }
.mt-catalog .mt-fp-occ, .mt-catalog .mt-fp-fam { columns: 2; column-gap: 24px; }
.mt-catalog .mt-fp-occ h4, .mt-catalog .mt-fp-fam h4 { column-span: all; }
.mt-catalog .mt-fp-occ .mt-fp-opt, .mt-catalog .mt-fp-fam .mt-fp-opt { break-inside: avoid; }
.mt-catalog .mt-fp-search { width: 100%; box-sizing: border-box; padding: 10px 14px; border: 1.5px solid rgba(42,24,16,0.15); border-radius: 100px; font-family: inherit; font-size: 14px; color: var(--espresso); background: var(--cream); margin-bottom: 12px; }
.mt-catalog .mt-fp-search:focus { outline: none; border-color: var(--burgundy); }
.mt-catalog .mt-fp-flavlist { max-height: 260px; overflow-y: auto; padding-right: 8px; }
.mt-catalog .mt-fp-foot { grid-column: 1 / -1; display: flex; justify-content: flex-end; border-top: 1px solid rgba(42,24,16,0.08); padding-top: 18px; }
.mt-catalog .mt-fp-clear { background: transparent; border: none; color: var(--burgundy); font-family: var(--typeBasePrimary, 'Hanken Grotesk'), sans-serif; font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.mt-catalog .mt-fp-clear:hover { color: var(--burgundy-dark); }
@media (max-width: 900px) { .mt-catalog .mt-fp-inner { grid-template-columns: 1fr; gap: 24px; } .mt-catalog .mt-fp-occ, .mt-catalog .mt-fp-fam { columns: 2; } }

.mt-catalog .mt-catalog-body { padding: 48px 0 80px; }
.mt-catalog .mt-occ-group { margin-bottom: 56px; }
.mt-catalog .mt-occ-group:last-child { margin-bottom: 0; }
.mt-catalog .mt-occ-label { display: flex; align-items: baseline; gap: 16px; margin-bottom: 28px; }
.mt-catalog .mt-occ-label h2 { font-family: var(--typeHeaderPrimary, 'Fraunces'), serif; font-size: 28px; color: var(--espresso); margin: 0; }
.mt-catalog .mt-occ-count { font-size: 13px; color: var(--espresso-soft); white-space: nowrap; }
.mt-catalog .mt-occ-line { flex: 1; height: 1px; background: rgba(42,24,16,0.12); }

.mt-catalog .mt-pgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 1000px) { .mt-catalog .mt-pgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .mt-catalog .mt-pgrid { grid-template-columns: 1fr; } }

.mt-catalog .mt-card { background: var(--cream-soft); border-radius: var(--radius-md); overflow: hidden; display: flex; flex-direction: column; text-decoration: none; transition: transform 0.3s, box-shadow 0.3s; }
.mt-catalog .mt-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.mt-catalog .mt-pimg { aspect-ratio: 1/1; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--cream-deep); }
.mt-catalog .mt-pimg-photo { width: 100%; height: 100%; object-fit: contain; }
.mt-catalog .mt-mb { width: 38%; height: 75%; background: linear-gradient(180deg, #2A1810, #1A0E08); border-radius: 8px 8px 4px 4px; position: relative; box-shadow: 0 12px 30px rgba(0,0,0,0.25); }
.mt-catalog .mt-mb::before { content: ""; position: absolute; top: -14px; left: 38%; right: 38%; height: 18px; background: var(--espresso); border-radius: 4px; }
.mt-catalog .mt-ml { position: absolute; inset: 22% 12% 18%; background: var(--cream-soft); border-radius: 3px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8%; text-align: center; }
.mt-catalog .mt-ml-b { font-family: var(--fontWordmark, 'Oswald'), sans-serif; font-weight: 700; font-size: 11px; color: var(--burgundy); text-transform: uppercase; letter-spacing: 0.04em; }
.mt-catalog .mt-ml-f { font-family: var(--typeHeaderPrimary, 'Fraunces'), serif; font-size: 12px; color: var(--espresso); margin-top: 4px; line-height: 1.1; }
.mt-catalog .mt-ml-a { width: 12px; height: 1.5px; background: var(--gold); margin: 5px auto 4px; }
.mt-catalog .mt-ml-m { font-size: 5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--burgundy); font-weight: 600; }
.mt-catalog .mt-ptag { position: absolute; top: 16px; left: 16px; background: var(--cream-soft); color: var(--espresso); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; padding: 6px 10px; border-radius: 100px; text-transform: uppercase; }
.mt-catalog .mt-pinfo { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.mt-catalog .mt-pflavor { font-family: var(--typeHeaderPrimary, 'Fraunces'), serif; font-size: 20px; color: var(--espresso); margin-bottom: 4px; }
.mt-catalog .mt-pflavor a { color: var(--espresso); text-decoration: none; }
.mt-catalog .mt-pmeta { font-size: 13px; color: var(--espresso-soft); margin-bottom: 12px; }
.mt-catalog .mt-pprice-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.mt-catalog .mt-pprice { font-size: 17px; font-weight: 600; color: var(--espresso); }
.mt-catalog .mt-prating { font-size: 12px; color: var(--espresso-mid); display: flex; align-items: center; gap: 6px; }
.mt-catalog .mt-prating .mt-stars { font-size: 14px; }
.mt-catalog .mt-add-row { display: flex; gap: 8px; margin-top: auto; }
.mt-catalog .mt-cardform { flex: 1; margin: 0; }
.mt-catalog .mt-card-add { width: 100%; display: block; background: var(--burgundy); color: var(--cream-soft); padding: 12px; border: none; border-radius: 100px; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; transition: all 0.2s; text-align: center; text-decoration: none; cursor: pointer; }
.mt-catalog .mt-card-add:hover { background: var(--burgundy-dark); }
.mt-catalog .mt-card-add:disabled { opacity: 0.45; cursor: not-allowed; }
.mt-catalog .mt-card-detail { padding: 12px 16px; border: 1.5px solid rgba(42,24,16,0.15); border-radius: 100px; font-size: 13px; font-weight: 600; color: var(--espresso-mid); transition: all 0.2s; text-decoration: none; white-space: nowrap; }
.mt-catalog .mt-card-detail:hover { border-color: var(--espresso); color: var(--espresso); }
.mt-catalog .mt-grid-empty { color: var(--espresso-soft); font-style: italic; }

/* Quick view trigger (reuses the detail-button look) */
.mt-catalog .mt-qv-open { background: transparent; font-family: var(--typeBasePrimary, 'Hanken Grotesk'), sans-serif; cursor: pointer; }

/* Quick view modal */
.mt-qv-modal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; }
.mt-qv-modal[hidden] { display: none; }
.mt-qv-overlay { position: absolute; inset: 0; background: rgba(42,24,16,0.55); }
.mt-qv-dialog { position: relative; z-index: 1; background: var(--cream-soft); border-radius: var(--radius-lg); width: calc(100% - 40px); max-width: 760px; max-height: calc(100vh - 56px); overflow: auto; box-shadow: var(--shadow-lg); }
.mt-qv-close { position: absolute; top: 12px; right: 14px; z-index: 2; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(42,24,16,0.12); background: var(--cream); color: var(--espresso); font-size: 22px; line-height: 1; cursor: pointer; }
.mt-qv-close:hover { background: var(--cream-deep); }
.mt-qv-loading { padding: 64px 24px; text-align: center; color: var(--espresso-mid); }
.mt-qv-loading a { color: var(--burgundy); }
.mt-qv { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; padding: 28px; }
@media (max-width: 640px) { .mt-qv { grid-template-columns: 1fr; gap: 18px; padding: 22px; } }
.mt-qv-media { display: flex; flex-direction: column; gap: 12px; }
.mt-qv-main { display: block; background: var(--cream-deep); border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 1/1; }
.mt-qv-photo { width: 100%; height: 100%; object-fit: contain; padding: 8%; }
.mt-qv-thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.mt-qv-thumb { width: 58px; height: 58px; padding: 0; border: 1.5px solid rgba(42,24,16,0.12); border-radius: 8px; background: var(--cream-deep); overflow: hidden; cursor: pointer; transition: border-color 0.15s; }
.mt-qv-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 8%; display: block; }
.mt-qv-thumb:hover { border-color: var(--espresso-soft); }
.mt-qv-thumb.mt-active { border-color: var(--burgundy); }
.mt-qv-eyebrow { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--burgundy); font-weight: 700; margin-bottom: 6px; }
.mt-qv .mt-qv-title { font-family: var(--typeHeaderPrimary, 'Fraunces'), serif; font-size: 26px; margin: 0 0 8px; line-height: 1.1; }
.mt-qv-title a { color: var(--espresso); text-decoration: none; }
.mt-qv-rating { font-size: 13px; color: var(--espresso-mid); margin-bottom: 8px; }
.mt-qv-stars { color: var(--gold); letter-spacing: 2px; }
.mt-qv-sub { font-size: 14px; color: var(--espresso-mid); margin: 0 0 14px; line-height: 1.5; }
.mt-qv-price { font-size: 24px; font-weight: 600; color: var(--espresso); margin-bottom: 16px; }
.mt-qv-price s { color: var(--espresso-soft); font-weight: 400; font-size: 16px; margin-left: 8px; }
.mt-qv-variant { margin-bottom: 12px; }
.mt-qv-vlabel { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--espresso-soft); margin-bottom: 6px; }
.mt-qv-select { width: 100%; padding: 11px 14px; border: 1.5px solid rgba(42,24,16,0.15); border-radius: 10px; font-family: inherit; font-size: 14px; color: var(--espresso); background: var(--cream); }
.mt-qv-buyrow { display: flex; gap: 10px; margin-bottom: 14px; }
.mt-qv-qty { width: 64px; padding: 11px; border: 1.5px solid rgba(42,24,16,0.15); border-radius: 10px; font-family: inherit; font-size: 14px; text-align: center; color: var(--espresso); background: var(--cream); }
.mt-qv-add { flex: 1; background: var(--burgundy); color: var(--cream-soft); border: none; border-radius: 100px; padding: 14px; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; transition: background 0.2s; }
.mt-qv-add:hover { background: var(--burgundy-dark); }
.mt-qv-add:disabled { opacity: 0.45; cursor: not-allowed; }
.mt-qv-ptoggle { display: flex; flex-direction: column; gap: 8px; margin: 0 0 14px; }
.mt-qv-popt { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: var(--cream-deep); border: 1.5px solid rgba(42,24,16,0.14); border-radius: 10px; padding: 11px 14px; cursor: pointer; font-family: inherit; transition: border-color .15s, background .15s; }
.mt-qv-popt[hidden] { display: none; }
.mt-qv-popt.mt-active { border-color: var(--burgundy); background: var(--cream); }
.mt-qv-radio { flex-shrink: 0; width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(42,24,16,0.3); position: relative; }
.mt-qv-popt.mt-active .mt-qv-radio { border-color: var(--burgundy); }
.mt-qv-popt.mt-active .mt-qv-radio::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--burgundy); }
.mt-qv-popt-main { flex: 1; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.mt-qv-popt-t { font-size: 13px; font-weight: 600; color: var(--espresso); }
.mt-qv-popt-meta { display: block; font-size: 11px; font-weight: 400; color: var(--espresso-soft); margin-top: 1px; }
.mt-qv-popt-p { font-size: 14px; font-weight: 700; color: var(--espresso); white-space: nowrap; }
.mt-qv-subnudge { display: block; background: var(--cream-deep); border-radius: var(--radius-md); padding: 12px 16px; text-decoration: none; margin-bottom: 16px; }
.mt-qv-subtag { display: block; font-weight: 700; color: var(--burgundy); font-size: 13px; margin-bottom: 2px; }
.mt-qv-subtxt { font-size: 13px; color: var(--espresso-mid); }
.mt-qv-full { font-size: 14px; font-weight: 600; color: var(--burgundy); text-decoration: none; }
.mt-qv-full:hover { text-decoration: underline; }
/* END_SECTION:matteos-catalog */

/* START_SECTION:matteos-category-hero (INDEX:39) */
.mt-clp-hero { position: relative; overflow: hidden; padding: 64px 0; color: var(--cream-soft); }
.mt-theme-cocktail { background: linear-gradient(135deg, #7A3845, #4A1422); }
.mt-theme-fruit { background: linear-gradient(135deg, #C2533D, #7A2A1E); }
.mt-theme-electrolyte { background: linear-gradient(135deg, #3A5870, #1F3346); }
.mt-theme-coffee { background: linear-gradient(135deg, #5A3A28, #2A1810); }
/* Gift theme = light cream hero. Scoped with .mt-theme-gift.mt-clp-hero so these
   win over the generic dark-theme rules below (equal-specificity, later-in-source). */
.mt-theme-gift { background: linear-gradient(160deg, var(--cream-soft), var(--cream)); }
.mt-theme-gift.mt-clp-hero { color: var(--espresso); }
.mt-theme-gift.mt-clp-hero .mt-eyebrow { color: var(--burgundy); }
.mt-theme-gift.mt-clp-hero h1 { color: var(--espresso); }
.mt-theme-gift.mt-clp-hero h1 em { color: var(--gold); }
.mt-theme-gift.mt-clp-hero p { color: var(--espresso-mid); }
.mt-theme-gift.mt-clp-hero .mt-clp-badge { background: var(--cream-soft); color: var(--espresso); border: 1px solid var(--gold-soft); }
.mt-theme-gift .mt-clp-visual { background: var(--cream-soft); box-shadow: var(--shadow-md); border: 1px solid rgba(42,24,16,0.06); }
.mt-clp-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; }
.mt-clp-hero--photo .mt-clp-grid { grid-template-columns: 1fr 1.15fr; }
.mt-clp-hero .mt-eyebrow { color: var(--gold-soft); }
.mt-clp-hero h1 { margin-bottom: 20px; }
.mt-clp-hero:not(.mt-theme-gift) h1 { color: var(--cream-soft); }
.mt-clp-hero h1 em { font-style: italic; color: var(--gold-soft); }
.mt-clp-hero p { font-size: 18px; color: rgba(251,247,239,0.85); line-height: 1.55; max-width: 480px; margin-bottom: 28px; }
.mt-clp-badges { display: flex; gap: 12px; flex-wrap: wrap; }
.mt-clp-badge { background: rgba(251,247,239,0.14); color: var(--cream-soft); padding: 8px 16px; border-radius: 100px; font-size: 13px; font-weight: 600; }
.mt-clp-visual { aspect-ratio: 1/1; border-radius: var(--radius-lg); background: rgba(251,247,239,0.08); display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 10%; overflow: hidden; }
.mt-clp-photo { grid-column: 1 / -1; grid-row: 1 / -1; width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-md); }
/* Photo mode: full landscape image (e.g. product lineup) — no cropping square, no tile backdrop */
.mt-clp-visual--photo { aspect-ratio: auto; background: transparent; padding: 0; display: block; border: none; box-shadow: none; }
.mt-clp-visual--photo .mt-clp-photo { position: static; width: 100%; height: auto; object-fit: contain; }
.mt-clp-visual .mt-q { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: rgba(251,247,239,0.07); border-radius: var(--radius-md); padding: 10%; text-decoration: none; transition: background 0.2s, transform 0.2s; }
.mt-clp-visual a.mt-q:hover { background: rgba(251,247,239,0.16); transform: translateY(-3px); }
.mt-theme-gift .mt-clp-visual a.mt-q:hover { background: rgba(42,24,16,0.09); }
.mt-clp-visual .mt-q-media { display: flex; align-items: center; justify-content: center; width: 100%; }
.mt-clp-visual .mt-q-ico { color: var(--cream-soft); width: 30%; max-width: 52px; display: flex; }
.mt-clp-visual .mt-q-ico svg { width: 100%; height: auto; display: block; }
.mt-clp-visual .mt-q-photo { width: auto; height: auto; max-width: 84%; max-height: 96px; object-fit: contain; }
.mt-clp-visual .mt-q-label { font-family: var(--typeHeaderPrimary, 'Fraunces'), serif; font-size: 14px; color: var(--cream-soft); text-align: center; line-height: 1.15; }
.mt-theme-gift .mt-clp-visual .mt-q { background: rgba(42,24,16,0.05); }
.mt-theme-gift .mt-clp-visual .mt-q-ico { color: var(--burgundy); }
.mt-theme-gift .mt-clp-visual .mt-q-label { color: var(--espresso); }
@media (max-width: 900px) { .mt-clp-grid, .mt-clp-hero--photo .mt-clp-grid { grid-template-columns: 1fr; gap: 40px; } }
/* END_SECTION:matteos-category-hero */

/* START_SECTION:matteos-category-products (INDEX:40) */
.mt-catprod .mt-phead { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 44px; flex-wrap: wrap; gap: 20px; }
.mt-catprod-pills { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 32px; }
.mt-catprod .mt-fpill { background: transparent; border: 1.5px solid rgba(42,24,16,0.15); color: var(--espresso-mid); padding: 9px 18px; border-radius: 100px; font-family: var(--typeBasePrimary, 'Hanken Grotesk'), sans-serif; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.mt-catprod .mt-fpill:hover { border-color: var(--espresso); color: var(--espresso); }
.mt-catprod .mt-fpill.active { background: var(--burgundy); border-color: var(--burgundy); color: var(--cream-soft); }
.mt-filter-meta { font-size: 13px; color: var(--espresso-soft); }
.mt-catprod .mt-pgrid { display: grid; gap: 24px; }
.mt-catprod .mt-cols3 { grid-template-columns: repeat(3, 1fr); }
.mt-catprod .mt-cols4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .mt-catprod .mt-pgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .mt-catprod .mt-pgrid { grid-template-columns: 1fr; } }
.mt-catprod .mt-card { background: var(--cream-soft); border-radius: var(--radius-md); overflow: hidden; display: flex; flex-direction: column; transition: transform 0.3s, box-shadow 0.3s; }
.mt-catprod .mt-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.mt-catprod .mt-pimg { aspect-ratio: 1/1; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--cream-deep); }
.mt-catprod .mt-pimg-photo { width: 100%; height: 100%; object-fit: cover; }
.mt-catprod .mt-mb { width: 38%; height: 75%; background: linear-gradient(180deg, #2A1810, #1A0E08); border-radius: 8px 8px 4px 4px; position: relative; box-shadow: 0 12px 30px rgba(0,0,0,0.25); }
.mt-catprod .mt-mb::before { content: ""; position: absolute; top: -14px; left: 38%; right: 38%; height: 18px; background: var(--espresso); border-radius: 4px; }
.mt-catprod .mt-ml { position: absolute; inset: 22% 12% 18%; background: var(--cream-soft); border-radius: 3px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8%; text-align: center; }
.mt-catprod .mt-ml-b { font-family: var(--fontWordmark, 'Oswald'), sans-serif; font-weight: 700; font-size: 11px; color: var(--burgundy); text-transform: uppercase; letter-spacing: 0.04em; }
.mt-catprod .mt-ml-f { font-family: var(--typeHeaderPrimary, 'Fraunces'), serif; font-size: 12px; color: var(--espresso); margin-top: 4px; line-height: 1.1; }
.mt-catprod .mt-ml-a { width: 12px; height: 1.5px; background: var(--gold); margin: 5px auto 4px; }
.mt-catprod .mt-ml-m { font-size: 5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--burgundy); font-weight: 600; }
.mt-catprod .mt-ptag { position: absolute; top: 16px; left: 16px; background: var(--cream-soft); color: var(--espresso); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; padding: 6px 10px; border-radius: 100px; text-transform: uppercase; }
.mt-catprod .mt-pinfo { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.mt-catprod .mt-pflavor { font-family: var(--typeHeaderPrimary, 'Fraunces'), serif; font-size: 20px; margin-bottom: 4px; }
.mt-catprod .mt-pflavor a { color: var(--espresso); text-decoration: none; }
.mt-catprod .mt-pmeta { font-size: 13px; color: var(--espresso-soft); margin-bottom: 12px; }
.mt-catprod .mt-pprice-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.mt-catprod .mt-pprice { font-size: 17px; font-weight: 600; }
.mt-catprod .mt-prating { font-size: 12px; color: var(--espresso-mid); display: flex; align-items: center; gap: 6px; }
.mt-catprod .mt-prating .mt-stars { font-size: 14px; }
.mt-add-row { display: flex; gap: 8px; margin-top: auto; }
.mt-cardform { flex: 1; margin: 0; }
.mt-card-add { width: 100%; display: block; background: var(--burgundy); color: var(--cream-soft); padding: 12px; border: none; border-radius: 100px; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; transition: all 0.2s; text-align: center; text-decoration: none; cursor: pointer; }
.mt-card-add:hover { background: var(--burgundy-dark); }
.mt-card-add:disabled { opacity: 0.45; cursor: not-allowed; }
.mt-card-detail { padding: 12px 16px; border: 1.5px solid rgba(42,24,16,0.15); border-radius: 100px; font-size: 13px; font-weight: 600; color: var(--espresso-mid); transition: all 0.2s; text-decoration: none; white-space: nowrap; }
.mt-card-detail:hover { border-color: var(--espresso); color: var(--espresso); }
.mt-grid-empty { color: var(--espresso-soft); font-style: italic; }
/* END_SECTION:matteos-category-products */

/* START_SECTION:matteos-category-story (INDEX:41) */
.mt-clp-story { background: var(--cream-soft); }
.mt-clp-story-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
@media (max-width: 800px) { .mt-clp-story-grid { grid-template-columns: 1fr; } }
.mt-clp-story-card .mt-num { font-family: var(--typeHeaderPrimary, 'Fraunces'), serif; font-style: italic; font-size: 40px; color: var(--burgundy); line-height: 1; margin-bottom: 16px; }
.mt-clp-story-card h3 { margin-bottom: 12px; font-size: 22px; }
.mt-clp-story-card p { color: var(--espresso-mid); font-size: 15px; line-height: 1.6; }
/* END_SECTION:matteos-category-story */

/* START_SECTION:matteos-category-tiles (INDEX:42) */
.mt-catblock { background: var(--cream-soft); }
.mt-cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 900px) { .mt-cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .mt-cat-grid { grid-template-columns: 1fr; } }
.mt-cat-tile { border-radius: var(--radius-lg); overflow: hidden; cursor: pointer; position: relative; aspect-ratio: 3/4; display: flex; flex-direction: column; justify-content: flex-end; padding: 28px; color: var(--cream-soft); transition: transform 0.3s, box-shadow 0.3s; box-shadow: var(--shadow-sm); text-decoration: none; }
.mt-cat-tile:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); color: var(--cream-soft); }
.mt-cat-tile:hover h3 { color: #fff; }
.mt-cat-tile:hover p, .mt-cat-tile:hover .mt-ct-tag, .mt-cat-tile:hover .mt-ct-link { color: var(--cream-soft); }
.mt-cat-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(42,24,16,0.05) 30%, rgba(42,24,16,0.78)); z-index: 1; }
.mt-cat-tile > * { position: relative; z-index: 2; }
.mt-ct-coffee { background: linear-gradient(135deg, #8B5A3C, #5A3422); }
.mt-ct-cocktail { background: linear-gradient(135deg, #9A5566, #5E1B2E); }
.mt-ct-fruit { background: linear-gradient(135deg, #D07850, #A23A2A); }
.mt-ct-electrolyte { background: linear-gradient(135deg, #6B8DA5, #3A5870); }
.mt-ct-ico { position: absolute; top: 42%; left: 50%; transform: translate(-50%, -50%); width: 200px; height: 200px; display: flex; align-items: center; justify-content: center; }
.mt-ct-ico .mt-mega-ico { width: 132px; height: 132px; color: #fff; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.28)); }
@media (max-width: 900px) { .mt-ct-ico { width: 170px; height: 170px; } .mt-ct-ico .mt-mega-ico { width: 112px; height: 112px; } }
.mt-ct-tag { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; opacity: 0.85; margin-bottom: 8px; }
.mt-catblock .mt-cat-tile h3 { color: #fff; font-size: 26px; margin-bottom: 8px; line-height: 1.05; }
.mt-cat-tile p { font-size: 13px; opacity: 0.9; line-height: 1.4; margin-bottom: 16px; color: var(--cream-soft); }
.mt-ct-link { font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
/* END_SECTION:matteos-category-tiles */

/* START_SECTION:matteos-cta-band (INDEX:43) */
.mt-cta-band.mt-bg-cream-soft { background: var(--cream-soft); }
.mt-cta-band.mt-bg-cream { background: var(--cream); }
.mt-cta-band.mt-bg-cream-deep { background: var(--cream-deep); }
.mt-cta-band-btnwrap { text-align: center; }
/* END_SECTION:matteos-cta-band */

/* START_SECTION:matteos-faq (INDEX:44) */
.mt-faq-wrap { max-width: 820px; margin: 0 auto; }
.mt-faq-item { border-bottom: 1px solid rgba(42,24,16,0.12); padding: 24px 0; }
.mt-faq-q { display: flex; justify-content: space-between; align-items: center; gap: 20px; font-family: var(--typeHeaderPrimary, 'Fraunces'), serif; font-size: 20px; line-height: 1.3; color: var(--espresso); cursor: pointer; list-style: none; }
.mt-faq-q::-webkit-details-marker { display: none; }
.mt-plus { color: var(--burgundy); font-weight: 300; font-size: 26px; line-height: 1; transition: transform 0.3s; flex-shrink: 0; }
.mt-faq-item[open] .mt-plus { transform: rotate(45deg); }
.mt-faq-a { color: var(--espresso-mid); font-size: 15px; line-height: 1.7; margin-top: 14px; }
/* END_SECTION:matteos-faq */

/* START_SECTION:matteos-founder (INDEX:45) */
.mt-founder { background: var(--cream-soft); border-top: 1px solid rgba(42,24,16,0.06); border-bottom: 1px solid rgba(42,24,16,0.06); scroll-margin-top: 100px; }
.mt-founder-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 72px; align-items: center; }
.mt-founder-img { aspect-ratio: 4/5; border-radius: var(--radius-lg); background: var(--cream-deep); background-image: radial-gradient(circle at 30% 30%, rgba(191,166,112,0.15), transparent 55%), radial-gradient(circle at 70% 70%, rgba(94,27,35,0.08), transparent 55%); position: relative; overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid rgba(42,24,16,0.06); display: flex; align-items: center; justify-content: center; padding: 10%; }
.mt-founder-logo { width: 85%; height: auto; filter: drop-shadow(0 8px 24px rgba(42,24,16,0.18)); }
.mt-founder-img--photo { padding: 0; background: var(--cream-deep); }
.mt-founder-photo { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }
.mt-founder-quote { font-family: var(--typeHeaderPrimary, 'Fraunces'), serif; font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1.3; color: var(--espresso); margin-bottom: 28px; }
.mt-founder-quote em { font-style: italic; color: var(--burgundy); }
.mt-founder-body { font-size: 17px; color: var(--espresso-mid); line-height: 1.7; margin-bottom: 28px; }
.mt-founder-sig { font-family: var(--typeHeaderPrimary, 'Fraunces'), serif; font-style: italic; font-size: 22px; color: var(--espresso); }
.mt-founder-role { font-size: 13px; color: var(--espresso-soft); letter-spacing: 0.05em; }
@media (max-width: 900px) { .mt-founder-grid { grid-template-columns: 1fr; gap: 40px; } }
/* END_SECTION:matteos-founder */

/* START_SECTION:matteos-gift-feature (INDEX:46) */
.mt-giftfeat { background: var(--cream-deep); }
.mt-giftfeat-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items: center; }
@media (max-width: 900px) { .mt-giftfeat-grid { grid-template-columns: 1fr; gap: 36px; } }
.mt-giftfeat-visual { aspect-ratio: 4/3; background: var(--cream-soft); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; overflow: hidden; box-shadow: var(--shadow-md); }
.mt-giftfeat-photo { width: 100%; height: 100%; object-fit: contain; padding: 5%; }
.mt-giftfeat-box { width: 60%; height: 72%; }
.mt-giftfeat-copy h2 { margin-bottom: 16px; }
.mt-giftfeat-body { font-size: 17px; color: var(--espresso-mid); line-height: 1.6; max-width: 480px; margin-bottom: 22px; }
.mt-giftfeat-copy .mt-gs-flavors { margin-bottom: 26px; max-width: 360px; }
.mt-giftfeat-foot { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.mt-giftfeat-all { font-size: 14px; font-weight: 600; color: var(--espresso); border-bottom: 1px solid var(--espresso); padding-bottom: 3px; text-decoration: none; white-space: nowrap; }
/* END_SECTION:matteos-gift-feature */

/* START_SECTION:matteos-gift-sets (INDEX:47) */
.mt-giftsets { background: var(--cream-soft); }
.mt-eyebrow-gold { color: var(--gold); }
.mt-gs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
@media (max-width: 900px) { .mt-gs-grid { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; } }
.mt-gs-card { background: var(--cream); border: 1px solid var(--cream-deep); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); transition: transform 0.3s, box-shadow 0.3s; }
.mt-gs-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.mt-gs-img { position: relative; aspect-ratio: 4/3; background: var(--cream-deep); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.mt-gs-photo { width: 100%; height: 100%; object-fit: contain; padding: 6%; }
.mt-gs-box { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 62%; height: 74%; background: linear-gradient(180deg, #FBF7EF, #E8DDC9); border-radius: 8px; box-shadow: 0 12px 30px rgba(42,24,16,0.18); border: 1px solid rgba(42,24,16,0.08); text-align: center; padding: 10%; }
.mt-gs-box-brand { font-family: var(--fontWordmark, 'Oswald'), sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--burgundy); font-size: 15px; }
.mt-gs-box-set { font-family: var(--typeHeaderPrimary, 'Fraunces'), serif; font-style: italic; color: var(--gold); font-size: 18px; }
.mt-gs-box-meta { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--espresso-soft); }
.mt-gs-box-ico { color: var(--gold); width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; }
.mt-gs-box-ico svg { width: 100%; height: 100%; display: block; }
.mt-gs-badge { position: absolute; top: 14px; left: 14px; background: var(--gold); color: var(--espresso); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 6px 11px; border-radius: 100px; }
.mt-gs-info { padding: 26px 26px 28px; display: flex; flex-direction: column; flex-grow: 1; }
.mt-gs-title { font-family: var(--typeHeaderPrimary, 'Fraunces'), serif; font-size: 24px; margin-bottom: 4px; }
.mt-gs-sub { font-size: 13px; color: var(--gold); font-style: italic; margin-bottom: 14px; }
.mt-gs-flavors { list-style: none; padding: 0; margin: 0 0 22px; display: flex; flex-direction: column; gap: 8px; }
.mt-gs-flavors li { position: relative; padding-left: 20px; font-size: 14px; color: var(--espresso-mid); line-height: 1.4; }
.mt-gs-flavors li::before { content: ""; position: absolute; left: 0; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.mt-gs-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.mt-gs-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mt-gs-price { font-family: var(--typeHeaderPrimary, 'Fraunces'), serif; font-size: 22px; font-weight: 600; color: var(--espresso); }
.mt-gs-cta { white-space: nowrap; }
.mt-gs-note { margin-top: 36px; font-size: 14px; color: var(--espresso-soft); }
/* END_SECTION:matteos-gift-sets */

/* START_SECTION:matteos-giftset-pdp (INDEX:48) */
.mt-gpdp-crumbs { font-size: 13px; color: var(--espresso-soft); margin-bottom: 28px; }
.mt-gpdp-crumbs a { color: var(--espresso-soft); text-decoration: none; }
.mt-gpdp-crumbs a:hover { color: var(--burgundy); }
.mt-gpdp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
@media (max-width: 900px) { .mt-gpdp-grid { grid-template-columns: 1fr; gap: 36px; } }
.mt-gpdp-main { position: relative; aspect-ratio: 1/1; background: var(--cream-soft); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 6%; }
.mt-gpdp-photo { width: 100%; height: 100%; object-fit: contain; }
.mt-gpdp-box { width: 64%; height: 72%; }
.mt-gpdp-badge { position: absolute; top: 18px; left: 18px; }
.mt-gpdp-thumbs { display: flex; gap: 12px; margin-top: 14px; }
.mt-gpdp-thumb { width: 72px; height: 72px; object-fit: contain; border-radius: var(--radius-sm); background: var(--cream-deep); }
.mt-gpdp-title { font-size: clamp(1.9rem, 3.4vw, 2.8rem); line-height: 1.05; margin-bottom: 10px; }
.mt-gpdp-sub { font-size: 17px; color: var(--espresso-mid); line-height: 1.5; margin-bottom: 16px; }
.mt-gpdp-rating { font-size: 14px; color: var(--espresso-mid); margin-bottom: 20px; }
.mt-gpdp-rating .mt-stars { color: var(--gold); letter-spacing: 1px; }
.mt-gpdp-inside { background: var(--cream-soft); border: 1px solid var(--cream-deep); border-radius: var(--radius-md); padding: 20px 22px; margin-bottom: 22px; }
.mt-gpdp-inside-h { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); font-weight: 700; margin-bottom: 12px; }
.mt-gpdp-benefits { list-style: none; padding: 0; margin: 0 0 26px; display: flex; flex-direction: column; gap: 10px; }
.mt-gpdp-benefits li { position: relative; padding-left: 26px; font-size: 15px; color: var(--espresso); line-height: 1.45; }
.mt-gpdp-benefits li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--burgundy); font-weight: 700; }
.mt-gpdp-buybox { border-top: 1px solid var(--cream-deep); border-bottom: 1px solid var(--cream-deep); padding: 24px 0; margin-bottom: 22px; }
.mt-gpdp-price-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.mt-gpdp-price { font-family: var(--typeHeaderPrimary, 'Fraunces'), serif; font-size: 30px; font-weight: 600; }
.mt-gpdp-was { font-size: 18px; color: var(--espresso-soft); text-decoration: line-through; }
.mt-gpdp-pnote { font-size: 13px; color: var(--espresso-soft); }
.mt-gpdp-actions { display: flex; gap: 14px; align-items: stretch; }
.mt-gpdp-qty input { width: 72px; height: 100%; min-height: 52px; text-align: center; border: 1px solid var(--cream-deep); border-radius: var(--radius-sm); background: var(--cream-soft); font-size: 16px; color: var(--espresso); }
.mt-gpdp-add { flex-grow: 1; }
.mt-gpdp-ship { font-size: 13px; color: var(--forest); font-weight: 600; margin-top: 14px; }
.mt-gpdp-giftnote { font-size: 13px; color: var(--espresso-mid); margin-top: 8px; }
.mt-gpdp-gift-ico { color: var(--gold); }
.mt-gpdp-dietary { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.mt-gpdp-diet { background: var(--cream-deep); color: var(--espresso-mid); font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 100px; }
.mt-gpdp-howto-h { font-family: var(--typeHeaderPrimary, 'Fraunces'), serif; font-size: 18px; margin-bottom: 8px; }
.mt-gpdp-howto-b { font-size: 15px; color: var(--espresso-mid); line-height: 1.6; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* END_SECTION:matteos-giftset-pdp */

/* START_SECTION:matteos-hero (INDEX:49) */
.mt-hero { padding: 64px 0 84px; position: relative; overflow: hidden; }
.mt-hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: center; }
.mt-hero-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--gold); color: var(--espresso); padding: 6px 14px; border-radius: 100px; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 20px; }
.mt-hero-badge::before { content: "\2605"; }
.mt-hero h1 { margin-bottom: 22px; }
.mt-hero-sub { font-size: 18px; line-height: 1.55; color: var(--espresso-mid); max-width: 500px; margin-bottom: 34px; }
.mt-hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.mt-hero-meta { margin-top: 34px; display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--espresso-mid); flex-wrap: wrap; }
.mt-hero-meta strong { color: var(--espresso); font-weight: 600; }
.mt-hero-sep { opacity: 0.4; }
.mt-hero-visual { position: relative; aspect-ratio: 4/5; }
.mt-hero-frame { position: absolute; inset: 0; border-radius: var(--radius-lg); overflow: hidden; background: linear-gradient(135deg, #6B4226, #8B5A3C 50%, #A8714D); box-shadow: var(--shadow-lg); }
.mt-hero-frame::before { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(circle at 30% 15%, rgba(255,220,180,0.18), transparent 50%), radial-gradient(circle at 70% 70%, rgba(94,27,35,0.3), transparent 50%); }
.mt-hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mt-ftag { position: absolute; background: var(--cream-soft); color: var(--espresso); padding: 13px 18px; border-radius: 100px; box-shadow: var(--shadow-md); font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 8px; z-index: 2; }
.mt-ftag-ic { width: 22px; height: 22px; border-radius: 50%; background: var(--burgundy); color: var(--cream-soft); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.mt-ftag-1 { top: 10%; left: -6%; animation: mt-fa 6s ease-in-out infinite; }
.mt-ftag-2 { bottom: 16%; right: -8%; animation: mt-fb 7s ease-in-out infinite; }
@keyframes mt-fa { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes mt-fb { 0%,100% { transform: translateY(0); } 50% { transform: translateY(8px); } }
/* Placeholder bottle */
.mt-bottle { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 50%; height: 78%; }
.mt-bottle-shape { width: 100%; height: 100%; background: linear-gradient(180deg, #2A1810, #1A0E08); border-radius: 14px 14px 8px 8px; position: relative; box-shadow: inset -20px 0 40px rgba(0,0,0,0.5), 0 30px 80px rgba(0,0,0,0.5); }
.mt-bottle-shape::before { content: ""; position: absolute; top: -24px; left: 38%; right: 38%; height: 32px; background: var(--espresso); border-radius: 6px 6px 2px 2px; }
.mt-bottle-label { position: absolute; inset: 25% 8% 18%; background: var(--cream-soft); border-radius: 4px; padding: 10% 8%; display: flex; flex-direction: column; justify-content: space-between; text-align: center; }
.mt-bm { font-family: var(--fontWordmark, 'Oswald'), sans-serif; font-weight: 700; font-size: clamp(18px,3vw,26px); color: var(--burgundy); text-transform: uppercase; letter-spacing: 0.02em; }
.mt-fl { font-family: var(--typeHeaderPrimary, 'Fraunces'), serif; font-size: clamp(16px,2.8vw,22px); color: var(--espresso); line-height: 1.05; margin: 8% 0; }
.mt-mt { font-size: clamp(7px,1.1vw,9px); letter-spacing: 0.18em; text-transform: uppercase; color: var(--burgundy); font-weight: 600; }
.mt-acc { width: 24px; height: 2px; background: var(--gold); margin: 0 auto; }
@media (max-width: 900px) { .mt-hero-grid { grid-template-columns: 1fr; gap: 48px; } .mt-hero { padding: 40px 0 64px; } .mt-ftag-1 { left: -2%; } .mt-ftag-2 { right: -2%; } }
/* END_SECTION:matteos-hero */

/* START_SECTION:matteos-pdp (INDEX:50) */
.mt-pdp { padding-top: 0; }
.mt-breadcrumbs { font-size: 13px; color: var(--espresso-soft); padding: 24px 0; }
.mt-breadcrumbs a { color: var(--espresso-soft); text-decoration: none; }
.mt-breadcrumbs a:hover { color: var(--burgundy); }
.mt-bc-sep { margin: 0 10px; opacity: 0.5; }
.mt-pdp-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; padding-bottom: 40px; }
@media (max-width: 900px) { .mt-pdp-grid { grid-template-columns: 1fr; gap: 32px; } }
.mt-pdp-gallery { position: sticky; top: 100px; align-self: flex-start; }
.mt-pdp-singleimg { aspect-ratio: 4/5; border-radius: var(--radius-lg); overflow: hidden; position: relative; margin-bottom: 16px; display: flex; align-items: center; justify-content: center; padding: 12%; box-shadow: var(--shadow-md); background: var(--cream-deep); }
.mt-pdp-singleimg.mt-has-photo { padding: 6%; background: var(--cream-soft); }
.mt-pdp-mainimg { width: 100%; height: 100%; object-fit: contain; }
.mt-big-bottle { width: 44%; height: 82%; background: linear-gradient(180deg, #2A1810, #1A0E08); border-radius: 14px 14px 8px 8px; position: relative; box-shadow: inset -20px 0 40px rgba(0,0,0,0.5), 0 30px 70px rgba(0,0,0,0.4); }
.mt-big-bottle::before { content: ""; position: absolute; top: -22px; left: 40%; right: 40%; height: 28px; background: var(--espresso); border-radius: 6px 6px 2px 2px; }
.mt-big-label { position: absolute; inset: 24% 14% 16%; background: var(--cream-soft); border-radius: 4px; padding: 10% 8%; display: flex; flex-direction: column; justify-content: space-between; text-align: center; }
.mt-big-label .mt-bm { font-family: var(--fontWordmark, 'Oswald'), sans-serif; font-weight: 700; font-size: 22px; color: var(--burgundy); text-transform: uppercase; letter-spacing: 0.02em; }
.mt-big-label .mt-fl { font-family: var(--typeHeaderPrimary, 'Fraunces'), serif; font-size: 26px; color: var(--espresso); line-height: 1.05; margin: 6% 0; }
.mt-big-label .mt-acc { width: 28px; height: 2px; background: var(--gold); margin: 0 auto; }
.mt-big-label .mt-mt { font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--burgundy); font-weight: 600; }
.mt-pdp-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.mt-pdp-thumb { aspect-ratio: 1/1; border-radius: var(--radius-sm); cursor: pointer; border: 2px solid transparent; overflow: hidden; padding: 0; background: var(--cream-deep); }
.mt-pdp-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.mt-pdp-thumb.mt-active { border-color: var(--burgundy); }
.mt-pdp-buy h1 { font-size: clamp(2rem, 3.4vw, 2.8rem); margin-bottom: 12px; }
.mt-pdp-sub { font-size: 17px; color: var(--espresso-mid); margin-bottom: 20px; line-height: 1.55; }
.mt-pdp-rating { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; font-size: 14px; flex-wrap: wrap; }
.mt-pdp-rating .mt-stars { font-size: 16px; letter-spacing: 2px; }
.mt-pdp-rating a { color: var(--espresso-mid); border-bottom: 1px solid var(--espresso-mid); text-decoration: none; }
.mt-jdgm-badge .jdgm-prev-badge__stars { color: var(--gold); }
.mt-jdgm-badge .jdgm-prev-badge__text { color: var(--espresso-mid); font-size: 14px; }
.mt-benefit-bullets { list-style: none; margin: 22px 0 4px; padding: 0; }
.mt-benefit-bullets li { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; font-size: 15px; color: var(--espresso); line-height: 1.4; }
.mt-benefit-bullets li .mt-bb { color: var(--burgundy); font-weight: 700; margin-top: 1px; }
.mt-pack-inside { margin: 22px 0 4px; padding-top: 18px; border-top: 1px solid rgba(42,24,16,0.08); }
.mt-pack-inside-title { font-size: 13px; font-weight: 600; color: var(--espresso-mid); margin-bottom: 10px; }
.mt-pack-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.mt-pack-list a { display: inline-flex; align-items: center; gap: 6px; background: var(--cream-deep); color: var(--espresso); padding: 8px 14px; border-radius: 100px; font-size: 14px; font-weight: 600; text-decoration: none; transition: background 0.2s, color 0.2s; }
.mt-pack-list a:hover { background: var(--burgundy); color: var(--cream-soft); }
.mt-pack-arrow { font-size: 12px; }
.mt-pdp-pblock { background: var(--cream-soft); border-radius: var(--radius-md); padding: 28px; margin-top: 28px; }
.mt-pdp-prow { display: flex; align-items: baseline; gap: 14px; margin-bottom: 4px; flex-wrap: wrap; }
.mt-pdp-price { font-family: var(--typeHeaderPrimary, 'Fraunces'), serif; font-size: 40px; font-weight: 500; }
.mt-pdp-was { color: var(--espresso-soft); text-decoration: line-through; font-size: 18px; }
.mt-pdp-was[hidden] { display: none; }
.mt-pdp-ship { font-size: 13px; color: var(--espresso-mid); margin-top: 4px; }
.mt-pdp-ship strong { color: var(--forest); }
.mt-pdp-form { margin: 0; display: flex; flex-direction: column; }
{%- comment -%} Recharge injects its subscribe/one-time widget (.rc-container-wrapper) as the FIRST child of the
   product form. Reorder via flexbox so it sits below the size selector and above Add to Cart. Note: Chromium
   ignores `order` on <button>, so we leave the CTA at the default order:0 and push the other rows ahead of it
   with negative orders rather than ordering the button itself. {%- endcomment -%}
.mt-pdp-form .mt-variant-row { order: -3; }
.mt-pdp-form .rc-container-wrapper { display: none; } /* native subscribe toggle below replaces Recharge's auto-injected widget */
.mt-pdp-form .mt-pdp-ptoggle { order: -2; display: flex; flex-direction: column; gap: 10px; margin: 16px 0 4px; }
.mt-pdp-form .mt-qty-row { order: -1; }
.mt-pdp-popt { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: var(--cream-soft); border: 1.5px solid rgba(42,24,16,0.15); border-radius: var(--radius-md); padding: 13px 16px; cursor: pointer; font-family: inherit; transition: border-color .15s, background .15s; }
.mt-pdp-popt[hidden] { display: none; }
.mt-pdp-popt.mt-active { border-color: var(--burgundy); background: var(--cream); }
.mt-pdp-radio { flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(42,24,16,0.3); position: relative; }
.mt-pdp-popt.mt-active .mt-pdp-radio { border-color: var(--burgundy); }
.mt-pdp-popt.mt-active .mt-pdp-radio::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--burgundy); }
.mt-pdp-popt-main { flex: 1; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.mt-pdp-popt-t { font-size: 14px; font-weight: 600; color: var(--espresso); }
.mt-pdp-popt-meta { display: block; font-size: 12px; font-weight: 400; color: var(--espresso-soft); margin-top: 2px; }
.mt-pdp-popt-p { font-size: 15px; font-weight: 700; color: var(--espresso); white-space: nowrap; }
.mt-variant-row { margin: 18px 0 4px; }
.mt-variant-label { display: block; font-size: 13px; font-weight: 600; color: var(--espresso-mid); margin-bottom: 6px; }
.mt-variant-select { width: 100%; padding: 12px 14px; border: 1.5px solid rgba(42,24,16,0.18); border-radius: var(--radius-md); font-size: 15px; font-family: var(--typeBasePrimary, 'Hanken Grotesk'), sans-serif; background: #fff; color: var(--espresso); }
.mt-qty-row { display: flex; align-items: center; gap: 16px; margin: 16px 0 4px; flex-wrap: wrap; }
.mt-qty-ctrl { display: flex; align-items: center; border: 1.5px solid rgba(42,24,16,0.18); border-radius: 100px; overflow: hidden; }
.mt-qty-ctrl button { width: 42px; height: 42px; font-size: 18px; color: var(--espresso); background: none; border: none; cursor: pointer; }
.mt-qty-ctrl input { width: 46px; height: 42px; text-align: center; font-weight: 600; border: none; background: none; font-size: 15px; color: var(--espresso); -moz-appearance: textfield; }
.mt-qty-ctrl input::-webkit-outer-spin-button, .mt-qty-ctrl input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mt-qty-note { font-size: 13px; color: var(--espresso-soft); }
.mt-pdp-cta { width: 100%; padding: 22px; margin-top: 24px; background: var(--burgundy); color: var(--cream-soft); border: none; border-radius: 100px; font-size: 16px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; transition: all 0.2s; cursor: pointer; }
.mt-pdp-cta:hover { background: var(--burgundy-dark); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.mt-pdp-cta:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.mt-price-ladder { margin-top: 18px; border: 1px solid rgba(42,24,16,0.12); border-radius: var(--radius-md); overflow: hidden; }
.mt-pl-title { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--espresso-soft); font-weight: 600; padding: 11px 16px; background: var(--cream-deep); }
.mt-pl-row { display: flex; justify-content: space-between; align-items: center; padding: 13px 16px; border-top: 1px solid rgba(42,24,16,0.08); font-size: 14px; text-decoration: none; color: var(--espresso); }
.mt-pl-q { font-weight: 600; color: var(--espresso); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mt-pl-p { font-weight: 600; color: var(--espresso); white-space: nowrap; }
.mt-pl-p em { font-style: normal; font-weight: 400; color: var(--espresso-soft); font-size: 12px; }
.mt-pl-clickable { cursor: pointer; transition: background 0.15s; }
.mt-pl-clickable:hover { background: var(--cream-soft); }
.mt-pl-tag { font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; background: rgba(42,24,16,0.08); color: var(--espresso-mid); padding: 3px 8px; border-radius: 100px; }
.mt-pl-tag.mt-best { background: var(--forest); color: var(--cream-soft); }
.mt-pl-best { background: rgba(74,93,63,0.06); }
.mt-diet-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(42,24,16,0.08); }
.mt-diet-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--cream-deep); color: var(--espresso); font-size: 12px; font-weight: 600; padding: 7px 13px; border-radius: 100px; }
.mt-diet-badge .mt-db { color: var(--forest); font-weight: 700; }
.mt-pdp-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 10px; margin-top: 28px; padding-top: 28px; border-top: 1px solid rgba(42,24,16,0.08); }
.mt-pdp-trust-item { flex: 1 1 80px; text-align: center; font-size: 12px; color: var(--espresso-mid); line-height: 1.4; }
.mt-pdp-trust-item .mt-ico { display: block; font-size: 22px; margin-bottom: 6px; color: var(--burgundy); }
.mt-pdp-trust-item strong { color: var(--espresso); display: block; font-weight: 600; font-size: 13px; margin-bottom: 2px; }
.mt-pdp-startcta { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 28px; padding: 15px 20px; background: var(--cream-deep); border: 1px solid rgba(94,27,35,0.18); border-radius: var(--radius-md); text-decoration: none; color: var(--burgundy); transition: background 0.2s, border-color 0.2s; }
.mt-pdp-startcta:hover { background: var(--cream-soft); border-color: var(--burgundy); }
.mt-pdp-startcta-text { font-size: 14px; line-height: 1.45; color: var(--espresso-mid); }
.mt-pdp-startcta-text strong { color: var(--burgundy); font-weight: 700; }
.mt-pdp-startcta-arrow { font-size: 18px; flex-shrink: 0; line-height: 1; color: var(--burgundy); }
/* Nutrition band */
.mt-nutri-band { background: var(--cream-soft); padding: 72px 0; }
.mt-nutri-grid { display: grid; grid-template-columns: 330px 1fr; gap: 48px; align-items: start; }
@media (max-width: 820px) { .mt-nutri-grid { grid-template-columns: 1fr; gap: 32px; } }
.mt-nutri-panel { background: #fff; border: 2px solid var(--espresso); border-radius: 4px; padding: 16px 18px; max-width: 330px; }
/* Real per-product nutrition/ingredients label image */
.mt-nutri-grid--solo { grid-template-columns: 1fr; }
.mt-nutri-grid--img { grid-template-columns: minmax(320px, 480px) 1fr; }
@media (max-width: 820px) { .mt-nutri-grid--img { grid-template-columns: 1fr; } }
.mt-nutri-labelimg { display: block; background: #fff; border: 1px solid rgba(42,24,16,0.12); border-radius: var(--radius-md); padding: 12px; box-shadow: var(--shadow-md); text-decoration: none; }
.mt-nutri-photo { width: 100%; height: auto; display: block; border-radius: var(--radius-sm); }
.mt-nutri-cap { display: block; text-align: center; font-size: 12px; color: var(--espresso-soft); margin-top: 10px; letter-spacing: 0.02em; }
.mt-nutri-labelimg { cursor: zoom-in; }
.mt-nutri-labelimg:hover .mt-nutri-cap { color: var(--burgundy); }
.mt-nutri-modal { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; }
.mt-nutri-modal[hidden] { display: none; }
.mt-nutri-overlay { position: absolute; inset: 0; background: rgba(42,24,16,0.6); cursor: zoom-out; }
.mt-nutri-dialog { position: relative; z-index: 1; max-width: 92vw; max-height: 90vh; display: flex; }
.mt-nutri-full { max-width: 92vw; max-height: 90vh; width: auto; height: auto; object-fit: contain; border-radius: var(--radius-md); background: #fff; box-shadow: var(--shadow-lg); }
.mt-nutri-close { position: absolute; top: -16px; right: -16px; z-index: 2; width: 38px; height: 38px; border-radius: 50%; border: none; background: var(--cream); color: var(--espresso); font-size: 24px; line-height: 1; cursor: pointer; box-shadow: var(--shadow-md); }
.mt-nutri-close:hover { background: var(--cream-deep); }
@media (max-width: 600px) { .mt-nutri-close { top: 8px; right: 8px; } }
.mt-nt { font-family: var(--typeBasePrimary, 'Hanken Grotesk'), sans-serif; font-size: 30px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; border-bottom: 1px solid var(--espresso); padding-bottom: 6px; margin-bottom: 4px; }
.mt-nutri-serving { font-size: 13px; padding: 3px 0; border-bottom: 9px solid var(--espresso); }
.mt-nutri-serving b { font-weight: 700; }
.mt-nutri-cal { display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 5px solid var(--espresso); padding: 6px 0 4px; }
.mt-nutri-cal .mt-l { font-weight: 800; font-size: 15px; }
.mt-nutri-cal .mt-v { font-weight: 800; font-size: 34px; line-height: 0.9; }
.mt-nutri-dv { text-align: right; font-size: 11px; font-weight: 700; padding: 3px 0; border-bottom: 1px solid rgba(42,24,16,0.3); }
.mt-nutri-row { display: flex; justify-content: space-between; font-size: 13px; padding: 4px 0; border-bottom: 1px solid rgba(42,24,16,0.2); }
.mt-nutri-row.mt-ind { padding-left: 18px; }
.mt-nutri-row.mt-ind2 { padding-left: 34px; }
.mt-nutri-row b { font-weight: 700; }
.mt-nutri-row .mt-dv { font-weight: 700; }
.mt-nutri-row.mt-thick { border-bottom: 5px solid var(--espresso); }
.mt-nutri-foot { font-size: 10px; color: var(--espresso-mid); margin-top: 8px; line-height: 1.4; }
.mt-ing-block h3 { margin-bottom: 12px; font-size: 24px; }
.mt-ing-text { font-size: 15px; color: var(--espresso-mid); line-height: 1.7; margin-bottom: 8px; }
.mt-ing-note { font-size: 13px; color: var(--espresso-soft); font-style: italic; margin-bottom: 28px; }
.mt-howto h3 { font-size: 24px; margin-bottom: 8px; }
.mt-dose { font-size: 15px; color: var(--espresso); background: var(--cream-deep); border-radius: var(--radius-md); padding: 14px 18px; margin-bottom: 18px; }
.mt-dose b { color: var(--burgundy); }
.mt-howto ul { list-style: none; padding: 0; }
.mt-howto li { padding: 11px 0; border-bottom: 1px solid rgba(42,24,16,0.08); font-size: 15px; color: var(--espresso-mid); }
.mt-howto li b { color: var(--espresso); }
/* END_SECTION:matteos-pdp */

/* START_SECTION:matteos-product-grid (INDEX:51) */
.mt-phead { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 44px; flex-wrap: wrap; gap: 20px; }
.mt-phead h2 { max-width: 560px; }
.mt-view-all { font-size: 14px; font-weight: 600; border-bottom: 1px solid var(--espresso); padding-bottom: 4px; color: var(--espresso); text-decoration: none; white-space: nowrap; }
.mt-pgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 1000px) { .mt-pgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .mt-pgrid { grid-template-columns: 1fr; } }
.mt-card { background: var(--cream-soft); border-radius: var(--radius-md); overflow: hidden; transition: transform 0.3s, box-shadow 0.3s; display: flex; flex-direction: column; color: var(--espresso); }
.mt-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.mt-pimg { aspect-ratio: 1/1; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--cream-deep); }
.mt-pimg-photo { width: 100%; height: 100%; object-fit: cover; }
.mt-mb { width: 38%; height: 75%; background: linear-gradient(180deg, #2A1810, #1A0E08); border-radius: 8px 8px 4px 4px; position: relative; box-shadow: 0 12px 30px rgba(0,0,0,0.25); }
.mt-mb::before { content: ""; position: absolute; top: -14px; left: 38%; right: 38%; height: 18px; background: var(--espresso); border-radius: 4px; }
.mt-ml { position: absolute; inset: 22% 12% 18%; background: var(--cream-soft); border-radius: 3px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8%; text-align: center; }
.mt-ml-b { font-family: var(--fontWordmark, 'Oswald'), sans-serif; font-weight: 700; font-size: 11px; color: var(--burgundy); text-transform: uppercase; letter-spacing: 0.04em; }
.mt-ml-f { font-family: var(--typeHeaderPrimary, 'Fraunces'), serif; font-size: 12px; color: var(--espresso); margin-top: 4px; line-height: 1.1; }
.mt-ml-a { width: 12px; height: 1.5px; background: var(--gold); margin: 5px auto 4px; }
.mt-ml-m { font-size: 5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--burgundy); font-weight: 600; }
.mt-ptag { position: absolute; top: 16px; left: 16px; background: var(--cream-soft); color: var(--espresso); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; padding: 6px 10px; border-radius: 100px; text-transform: uppercase; }
.mt-pinfo { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.mt-pflavor { font-family: var(--typeHeaderPrimary, 'Fraunces'), serif; font-size: 22px; margin-bottom: 6px; }
.mt-grid-section .mt-pflavor a { color: inherit; text-decoration: none; }
.mt-grid-section .mt-pflavor a:hover { color: var(--burgundy); }
.mt-grid-section .mt-add-row { display: flex; gap: 8px; margin-top: auto; padding-top: 18px; }
.mt-grid-section .mt-card-add { flex: 1; display: block; background: var(--burgundy); color: var(--cream-soft); padding: 12px; border: none; border-radius: 100px; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; text-align: center; text-decoration: none; cursor: pointer; transition: background 0.2s; }
.mt-grid-section .mt-card-add:hover { background: var(--burgundy-dark); }
.mt-grid-section .mt-card-add:disabled { opacity: 0.45; cursor: not-allowed; }
.mt-pmeta { font-size: 13px; color: var(--espresso-soft); margin-bottom: 14px; }
.mt-pprice-row { display: flex; justify-content: space-between; align-items: center; }
.mt-pprice { font-size: 18px; font-weight: 600; }
.mt-prating { font-size: 12px; color: var(--espresso-mid); display: flex; align-items: center; gap: 6px; }
.mt-prating .mt-stars { font-size: 14px; }
.mt-grid-empty { color: var(--espresso-soft); font-style: italic; }
/* END_SECTION:matteos-product-grid */

/* START_SECTION:matteos-reviews (INDEX:53) */
.mt-rev-head { text-align: center; margin-bottom: 52px; }
.mt-rev-sum { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 22px; font-size: 16px; flex-wrap: wrap; }
.mt-rev-sum .mt-bs { color: var(--gold); font-size: 22px; letter-spacing: 4px; }
.mt-rev-sum strong { color: var(--espresso); font-weight: 600; }
.mt-rev-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
@media (max-width: 900px) { .mt-rev-grid { grid-template-columns: 1fr; } }
.mt-rev-card { background: var(--cream-soft); padding: 36px; border-radius: var(--radius-md); display: flex; flex-direction: column; }
.mt-rev-card .mt-stars { font-size: 16px; letter-spacing: 3px; margin-bottom: 18px; }
.mt-rev-card blockquote { font-family: var(--typeHeaderPrimary, 'Fraunces'), serif; font-size: 19px; line-height: 1.45; color: var(--espresso); margin: 0 0 22px; flex: 1; }
.mt-rev-auth { font-size: 14px; color: var(--espresso-mid); font-weight: 500; }
.mt-rev-auth .mt-v { color: var(--burgundy); font-weight: 600; }
.mt-jdgm-widget { margin-top: 8px; }
/* END_SECTION:matteos-reviews */

/* START_SECTION:matteos-sixpack-feature (INDEX:54) */
.mt-featured { background: var(--espresso); color: var(--cream); }
.mt-feat-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 72px; align-items: center; }
.mt-featured h2 { color: var(--cream); }
.mt-featured h2 em { font-style: italic; color: var(--gold-soft); }
.mt-featured .mt-eyebrow { color: var(--gold-soft); }
.mt-featured p { color: rgba(244,237,224,0.78); font-size: 17px; line-height: 1.65; margin: 22px 0 32px; }
.mt-feat-list { list-style: none; margin: 0 0 36px; padding: 0; }
.mt-feat-list li { padding: 14px 0; border-bottom: 1px solid rgba(244,237,224,0.12); font-size: 15px; display: flex; align-items: center; gap: 14px; color: var(--cream); }
.mt-feat-list li:first-child { border-top: 1px solid rgba(244,237,224,0.12); }
.mt-ck { color: var(--gold-soft); font-weight: 600; }
.mt-feat-price-row { display: flex; align-items: baseline; gap: 16px; margin-bottom: 12px; flex-wrap: wrap; }
.mt-feat-price { font-family: var(--typeHeaderPrimary, 'Fraunces'), serif; font-size: 48px; line-height: 1; color: var(--cream); }
.mt-feat-was { color: rgba(244,237,224,0.4); text-decoration: line-through; font-size: 18px; }
.mt-feat-save { background: var(--burgundy); color: var(--cream-soft); padding: 6px 12px; border-radius: 100px; font-size: 12px; font-weight: 700; }
.mt-feat-savings { color: rgba(244,237,224,0.6); font-size: 13px; margin-bottom: 28px; }
.mt-feat-btn { background: var(--cream-soft); color: var(--espresso); }
.mt-feat-btn:hover { background: var(--gold); color: var(--espresso); }
.mt-feat-visual { position: relative; aspect-ratio: 1/1; border-radius: var(--radius-lg); background: linear-gradient(135deg, #6B4226, #3E2218); overflow: hidden; box-shadow: var(--shadow-lg); padding: 8%; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; }
.mt-feat-vislink { position: absolute; inset: 0; display: block; z-index: 2; }
.mt-feat-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; padding: 0; }
.mt-q { border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; }
.mt-qb { width: 50%; height: 80%; background: linear-gradient(180deg, #2A1810, #1A0E08); border-radius: 6px 6px 3px 3px; position: relative; box-shadow: 0 8px 20px rgba(0,0,0,0.3); }
.mt-qb::before { content: ""; position: absolute; top: -10px; left: 38%; right: 38%; height: 14px; background: var(--espresso); border-radius: 3px; }
.mt-ql { position: absolute; inset: 22% 12% 18%; background: var(--cream-soft); border-radius: 2px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 4%; }
.mt-ql span { font-family: var(--typeHeaderPrimary, 'Fraunces'), serif; font-size: 9px; color: var(--espresso); line-height: 1.1; }
@media (max-width: 900px) { .mt-feat-grid { grid-template-columns: 1fr; gap: 48px; } .mt-feat-price { font-size: 38px; } }
/* END_SECTION:matteos-sixpack-feature */

/* START_SECTION:matteos-sixpack-pdp (INDEX:55) */
.mt-sixpack { padding-top: 0; }
.mt-sixpack .mt-breadcrumbs { font-size: 13px; color: var(--espresso-soft); padding: 24px 0; }
.mt-sixpack .mt-breadcrumbs a { color: var(--espresso-soft); text-decoration: none; }
.mt-sixpack .mt-breadcrumbs a:hover { color: var(--burgundy); }
.mt-sixpack .mt-bc-sep { margin: 0 10px; opacity: 0.5; }
.mt-sp-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; padding-bottom: 56px; }
@media (max-width: 900px) { .mt-sp-grid { grid-template-columns: 1fr; gap: 32px; } }

.mt-sp-gallery { position: sticky; top: 100px; align-self: flex-start; }
.mt-sp-bottles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; background: linear-gradient(135deg, #C9986A, #8B6240); border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow-md); }
.mt-sp-tile { aspect-ratio: 3/4; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); overflow: hidden; }
.mt-sp-tile.mt-has-photo { background: rgba(255,255,255,0.12); }
.mt-sp-photo { width: 100%; height: 100%; object-fit: contain; }
.mt-sp-cap { text-align: center; font-size: 13px; color: var(--espresso-soft); margin-top: 14px; }
.mt-sixpack .mt-mb { width: 56%; height: 88%; background: linear-gradient(180deg, #2A1810, #1A0E08); border-radius: 8px 8px 4px 4px; position: relative; box-shadow: 0 12px 30px rgba(0,0,0,0.3); }
.mt-sixpack .mt-mb::before { content: ""; position: absolute; top: -12px; left: 38%; right: 38%; height: 16px; background: var(--espresso); border-radius: 4px; }
.mt-sixpack .mt-ml { position: absolute; inset: 22% 12% 16%; background: var(--cream-soft); border-radius: 3px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8%; text-align: center; }
.mt-sixpack .mt-ml-b { font-family: var(--fontWordmark, 'Oswald'), sans-serif; font-weight: 700; font-size: 10px; color: var(--burgundy); text-transform: uppercase; letter-spacing: 0.03em; }
.mt-sixpack .mt-ml-f { font-family: var(--typeHeaderPrimary, 'Fraunces'), serif; font-size: 12px; color: var(--espresso); margin-top: 3px; line-height: 1.05; }
.mt-sixpack .mt-ml-a { width: 11px; height: 1.5px; background: var(--gold); margin: 4px auto 3px; }
.mt-sixpack .mt-ml-m { font-size: 5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--burgundy); font-weight: 600; }

.mt-sp-buy h1 { font-size: clamp(2rem, 3.4vw, 2.8rem); margin-bottom: 12px; }
.mt-sp-sub { font-size: 17px; color: var(--espresso-mid); margin-bottom: 20px; line-height: 1.55; }
.mt-sp-rating { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; font-size: 14px; flex-wrap: wrap; }
.mt-sp-rating .mt-stars { font-size: 16px; letter-spacing: 2px; }
.mt-sp-rating a { color: var(--espresso-mid); border-bottom: 1px solid var(--espresso-mid); text-decoration: none; }
.mt-jdgm-badge .jdgm-prev-badge__stars { color: var(--gold); }

.mt-sp-pblock { background: var(--cream-soft); border-radius: var(--radius-md); padding: 28px; margin-top: 22px; }
.mt-sp-prow { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.mt-sp-price { font-family: var(--typeHeaderPrimary, 'Fraunces'), serif; font-size: 40px; font-weight: 500; }
.mt-sp-was { color: var(--espresso-soft); text-decoration: line-through; font-size: 18px; }
.mt-sp-save { background: var(--burgundy); color: var(--cream-soft); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; padding: 5px 11px; border-radius: 100px; text-transform: uppercase; }
.mt-sp-ship { font-size: 13px; color: var(--espresso-mid); margin: 8px 0 0; }
.mt-sp-ship strong { color: var(--forest); }
.mt-sp-form { margin: 0; }

.mt-ptoggle { margin: 20px 0 0; display: flex; flex-direction: column; gap: 12px; }
.mt-popt { display: flex; gap: 14px; align-items: flex-start; text-align: left; width: 100%; background: #fff; border: 1.5px solid rgba(42,24,16,0.15); border-radius: var(--radius-md); padding: 16px 18px; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; }
.mt-popt:hover { border-color: var(--espresso-soft); }
.mt-popt.mt-active { border-color: var(--burgundy); box-shadow: 0 0 0 1px var(--burgundy); }
.mt-radio { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(42,24,16,0.3); margin-top: 2px; position: relative; }
.mt-popt.mt-active .mt-radio { border-color: var(--burgundy); }
.mt-popt.mt-active .mt-radio::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--burgundy); }
.mt-popt-info { flex: 1; }
.mt-popt-title { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-weight: 600; color: var(--espresso); }
.mt-popt-badge { font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; background: var(--forest); color: var(--cream-soft); padding: 3px 8px; border-radius: 100px; margin-left: 8px; }
.mt-popt-price { white-space: nowrap; }
.mt-popt-meta { display: block; font-size: 13px; color: var(--espresso-mid); margin-top: 5px; line-height: 1.45; }
.mt-sp-devnote { font-size: 12px; color: var(--burgundy); background: rgba(94,27,35,0.06); border-radius: var(--radius-sm); padding: 10px 12px; margin: 12px 0 0; line-height: 1.4; }

.mt-sp-cta { width: 100%; padding: 22px; margin-top: 18px; background: var(--burgundy); color: var(--cream-soft); border: none; border-radius: 100px; font-size: 16px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; transition: all 0.2s; cursor: pointer; }
.mt-sp-cta:hover { background: var(--burgundy-dark); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.mt-sp-cta:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

.mt-sns-nudge { display: flex; gap: 14px; align-items: flex-start; background: rgba(94,27,35,0.05); border: 1px solid rgba(94,27,35,0.2); border-radius: var(--radius-md); padding: 16px 18px; margin-top: 20px; }
.mt-nudge-ic { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--burgundy); color: var(--cream-soft); display: flex; align-items: center; justify-content: center; font-size: 18px; }
.mt-sns-nudge h4 { font-size: 15px; margin: 0 0 3px; color: var(--espresso); }
.mt-sns-nudge p { font-size: 13px; color: var(--espresso-mid); margin: 0 0 8px; line-height: 1.45; }
.mt-nudge-link { font-size: 13px; font-weight: 600; color: var(--burgundy); border-bottom: 1px solid var(--burgundy); text-decoration: none; }

.mt-sp-trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 24px; padding-top: 24px; border-top: 1px solid rgba(42,24,16,0.08); }
.mt-sp-trust-item { text-align: center; font-size: 12px; color: var(--espresso-mid); line-height: 1.4; }
.mt-sp-trust-item .mt-ico { display: block; font-size: 22px; margin-bottom: 6px; color: var(--burgundy); }
.mt-sp-trust-item strong { color: var(--espresso); display: block; font-weight: 600; font-size: 13px; margin-bottom: 2px; }
/* END_SECTION:matteos-sixpack-pdp */

/* START_SECTION:matteos-sns-cta (INDEX:56) */
.mt-subcta { background: var(--burgundy); color: var(--cream-soft); text-align: center; padding: 76px 0; }
.mt-subcta h2 { margin-bottom: 16px; }
.mt.mt-subcta h2 { color: var(--cream-soft); }
.mt-subcta h2 em { font-style: italic; color: var(--cream-soft); }
.mt-subcta p { font-size: 17px; color: var(--cream-soft); margin: 0 auto 30px; max-width: 540px; }
.mt-subcta-eyebrow { color: var(--cream-soft); }
.mt-subcta .mt-btn-primary { background: var(--cream-soft); color: var(--espresso); }
.mt-subcta .mt-btn-primary:hover { background: var(--gold); color: var(--espresso); }
/* END_SECTION:matteos-sns-cta */

/* START_SECTION:matteos-trust-bar (INDEX:57) */
.mt-trust { background: var(--espresso); color: var(--cream); padding: 26px 0; }
.mt-trust-track { display: flex; gap: 44px; align-items: center; flex-wrap: wrap; justify-content: center; }
.mt-trust-item { display: flex; align-items: center; gap: 12px; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; color: var(--cream); }
.mt-trust-ic { color: var(--gold-soft); font-size: 14px; }
@media (max-width: 768px) { .mt-trust-track { gap: 20px 28px; } }
/* END_SECTION:matteos-trust-bar */

/* START_SECTION:shoppable-hero (INDEX:69) */
.kit-shoppable-hero__hotspots {
    position: relative;
    pointer-events: none;
    z-index: 3;
  }

  .kit-shoppable-hero__hotspot {
    position: absolute;
    top: var(--hotspot-top-mobile, var(--hotspot-top));
    left: var(--hotspot-left-mobile, var(--hotspot-left));
    transform: translate(-50%, -50%);
    pointer-events: auto;
  }

  .kit-shoppable-hero__product-card {
    color: inherit;
    text-decoration: inherit;
    display: block;
    min-width: calc(2rem * 4.2360679775); /* 4.2360679775 = φ^3 */
  }

  @media (min-width: 700px) {
    .kit-shoppable-hero__hotspot {
      top: var(--hotspot-top);
      left: var(--hotspot-left);
    }

    .kit-content-over-media__content {
      max-width: calc(61.803% + (var(--kit-section-gutter) * 2)); /* 61.803% = 100% - 1/φ, compensate for padding */
    }

    .kit-shoppable-hero__content .kit-text {
      color: var(--colorHeroText);
      pointer-events: none;
    }
  }

  @media (min-width: 1024px) {
    .kit-content-over-media__content {
      max-width: calc(50% + (var(--kit-section-gutter) * 2));
    }
  }
/* END_SECTION:shoppable-hero */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:customer-account (INDEX:105) */
.site-nav__account-link {
    display: inline-flex;
    align-items: center;
    color: inherit;
  }

  .site-nav .site-nav__account-link {
    color: var(--colorNavText);
  }

  .is-light .site-nav .site-nav__account-link {
    color: #fff;
  }
/* END_SNIPPET:customer-account */

/* START_SNIPPET:element.badge (INDEX:107) */
.element-badge {
    /* Layout & Typography */
    --_radius: var(--element-badge-radius, var(--chip-radius, var(--radius-xs)));
    --_px: var(--element-badge-px, var(--size-3));
    --_py: var(--element-badge-py, var(--size-1));
    --_border-width: var(--element-badge-border-width, var(--size-0-25));
    --_font-family: var(
      --element-badge-font-family,
      var(--element-text-font-family--body),
      var(--element-text-font-family-fallback--body)
    );
    --_font-size: var(--element-badge-font-size, var(--element-text-font-size--body-sm));
    --_letter-spacing: var(--element-badge-letter-spacing, var(--element-text-letter-spacing--body-sm));
    --_line-height: var(--element-badge-line-height, var(--element-text-line-height--body-sm));

    /* Colors */
    --_base-primary: var(--color-secondary);
    --_base-secondary: var(--color-primary);
    --_color-primary: var(--_base-primary);
    --_color-secondary: var(--_base-secondary);
    --_color-background: var(--_color-primary);
    --_color-text: var(--_color-secondary);
    --_color-border: var(--_color-secondary);
    --_shade-inset-box-shadow: var(--element-badge-shade-inset-box-shadow, 12%);
    --_inset-box-shadow: inset 0 0 0 var(--_border-width)
      color-mix(in srgb, var(--_color-border) var(--_shade-inset-box-shadow), transparent);

    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--_radius);
    padding-inline: var(--_px);
    padding-block: var(--_py);
    font-family: var(--_font-family);
    font-size: var(--_font-size);
    letter-spacing: var(--_letter-spacing);
    background-color: var(--_color-background);
    color: var(--_color-text);
    box-shadow: var(--_inset-box-shadow);
    text-transform: uppercase;
    width: fit-content;
    white-space: nowrap;
  }

  .element-badge--inverted {
    --_color-primary: var(--_base-secondary);
    --_color-secondary: var(--_base-primary);

    & > * {
      --color-primary: currentColor;
    }
  }

  .element-badge--sale {
    --_base-primary: var(--color-sale-tag-text);
    --_base-secondary: var(--color-sale-tag);
  }
/* END_SNIPPET:element.badge */

/* START_SNIPPET:element.button (INDEX:108) */
:root {
    /* Base Layout Variables */
    --element-button-display: inline-flex;
    --element-button-width: fit-content;
    --element-button-height: auto;
    --element-button-radius: var(--radius-xs);
    --element-button-flex-direction: row;
    --element-button-gap: var(--size-2);
    --element-button-justify-content: center;
    --element-button-align-items: center;
    --element-button-white-space: nowrap;

    /* Base Spacing Variables */
    --element-button-padding-block: var(--size-3);
    --element-button-padding-inline: var(--size-5);
    --element-button-border-width: var(--size-0-25);

    /* Base Color Variables */
    --element-button-color-primary: initial;
    --element-button-color-secondary: initial;
    --element-button-shade-background: 0%;
    --element-button-shade-text: 0%;
    --element-button-shade-border: 20%;

    /* Typography Overrides */
    /* By default, the button will inherit the typography styles from element.text. Set these to other values to override. */
    /* --element-button-font-family: initial; */
    /* --element-button-font-family-fallback: initial; */
    /* --element-button-font-weight: initial; */
    /* --element-button-letter-spacing: initial; */
    /* --element-button-text-transform: initial; */
    /* --element-button-line-height: initial; */
    /* --element-button-color: initial; */

    /* Base Effect Variables */
    --element-button-box-shadow: initial;
    --element-button-transition-duration: 200ms;
    --element-button-transition-timing: ease;
    --element-button-transform: none;
    --element-button-backdrop-filter: none;
    --element-button-opacity: 1;

    /* Hover State Variables */
    --element-button-shade-background--hover: 8%;
    --element-button-shade-border--hover: 30%;

    /* Focus State Variables */
    --element-button-color-focus: var(--color-focus);
    --element-button-border-width--focus: var(--size-0-5);

    /* Active State Variables */
    --element-button-shade-background--active: 16%;
    --element-button-shade-border--active: var(--element-button-shade-border);

    /* Disabled State Variables */
    --element-button-shade-background--disabled: 12%;
    --element-button-shade-text--disabled: 70%;
    --element-button-shade-border--disabled: 12%;
  }

  /* Component Implementation */
  .element-button,
  .element-button--shopify-payment-wrapper .shopify-payment-button .shopify-payment-button__button--unbranded {
    /* Base Layout */
    --_display: var(--element-button-display);
    --_width: var(--element-button-width);
    --_height: var(--element-button-height);
    --_radius: var(--element-button-radius);
    --_flex-direction: var(--element-button-flex-direction);
    --_gap: var(--element-button-gap);
    --_justify-content: var(--element-button-justify-content);
    --_align-items: var(--element-button-align-items);
    --_white-space: var(--element-button-white-space);

    /* Base Spacing */
    --_padding-block: var(--element-button-padding-block);
    --_padding-inline: var(--element-button-padding-inline);
    --_border-width: var(--element-button-border-width);

    /* Base Colors */
    --_color-primary: var(--element-button-color-primary, var(--color-primary));
    --_color-secondary: var(--element-button-color-secondary, var(--color-secondary));
    --_color-focus: var(--element-button-color-focus, var(--color-focus, #4a9afc));
    --_color-text: var(--_color-secondary);
    --_color-background: var(--_color-primary);
    --_outline: none;
    --_border: none;
    --_shade-background: var(--element-button-shade-background);
    --_shade-text: var(--element-button-shade-text);
    --_shade-border: var(--element-button-shade-border);
    --_box-shadow: var(--element-button-box-shadow, inset 0 0 0 var(--_border-width) color-mix(in srgb, var(--_color-text) var(--_shade-border), transparent));

    /* Base Effects */
    --_transition-duration: var(--element-button-transition-duration);
    --_transition-timing: var(--element-button-transition-timing);
    --_transform: var(--element-button-transform);
    --_backdrop-filter: var(--element-button-backdrop-filter);
    --_opacity: var(--element-button-opacity);

    /* Text Styles */
    --element-text-font-family: var(--element-button-font-family);
    --element-text-font-family-fallback: var(--element-button-font-family-fallback);
    --element-text-font-weight: var(--element-button-font-weight);
    --element-text-letter-spacing: var(--element-button-letter-spacing);
    --element-text-text-transform: var(--element-button-text-transform);
    --element-text-line-height: var(--element-button-line-height);
    --element-text-color: var(--element-button-color);
    --element-text-font-size: var(--element-button-font-size);

    /* Icon Styles */
    --element-icon-size: var(--element-text-font-size--body-md);

    /* Base Styles */
    display: var(--_display);
    width: var(--_width);
    height: var(--_height);
    justify-content: var(--_justify-content);
    align-items: var(--_align-items);
    white-space: var(--_white-space);
    flex-direction: var(--_flex-direction);
    gap: var(--_gap);
    padding-block: var(--_padding-block);
    padding-inline: var(--_padding-inline);
    border-radius: var(--_radius);
    background-color: color-mix(in srgb, var(--_color-text) var(--_shade-background), var(--_color-background));
    color: color-mix(in srgb, var(--_color-background) var(--_shade-text), var(--_color-text));
    box-shadow: var(--_box-shadow);
    outline: var(--_outline);
    border: var(--_border);
    transform: var(--_transform);
    backdrop-filter: var(--_backdrop-filter);
    opacity: var(--_opacity);
    transition: all var(--_transition-duration) var(--_transition-timing);
    cursor: pointer;

    &:is(button.shopify-payment-button__button--unbranded) {
      width: 100%;
      line-height: var(--element-text-line-height--body-md);
      min-height: 32px;
    }

    &:has(> svg:only-child) {
      --_padding-inline: var(--_padding-block);
      --_display: flex;
    }

    /* Hover State */
    &:hover {
      --_shade-background: var(--element-button-shade-background--hover);
      --_shade-border: var(--element-button-shade-border--hover);
    }

    /* Focus State */
    &:focus-visible,
    input[type='radio']:focus-visible + & {
      --_border-width: var(--element-button-border-width--focus);
      --_box-shadow: inset 0 0 0 var(--_border-width) var(--_color-focus);
    }

    /* Disabled State */
    &:disabled,
    input[type='radio']:disabled + &,
    .disabled > input[type='radio'] + &,
    shopify-buy-it-now-button[disabled] > & {
      --_shade-background: var(--element-button-shade-background--disabled);
      --_shade-text: var(--element-button-shade-text--disabled);
      --_shade-border: var(--element-button-shade-border--disabled);

      &:is(:disabled),
      shopify-buy-it-now-button[disabled] > & {
        cursor: not-allowed;
      }
    }

    /* Active State */
    &:active,
    input[type='radio']:checked + & {
      --_shade-background: var(--element-button-shade-background--active);
      --_shade-border: var(--element-button-shade-border--active);
    }

    /* Variants */
    &.element-button--size-sm {
      --_padding-block: var(--size-2);
      --_padding-inline: var(--size-4);
    }

    &.element-button--size-lg {
      --_padding-block: var(--size-4);
      --_padding-inline: var(--size-6);
    }

    &.element-button--inverted {
      --_color-text: var(--_color-primary);
      --_color-background: var(--_color-secondary);
    }

    &.element-button--transparent {
      --_color-background: transparent;

      &:disabled {
        --_shade-border: var(--element-button-shade-border--disabled);
        --_shade-background: 0%;
      }

      &:disabled:active {
        --_border-width: var(--element-button-border-width);
        --_shade-border: var(--element-button-shade-border--disabled);
      }
    }

    &:is(.shopify-payment-button__button--unbranded):hover:not([disabled]) {
      background-color: color-mix(in srgb, var(--_color-secondary) var(--_shade-background), var(--_color-primary));
      color: color-mix(in srgb, var(--_color-background) var(--_shade-text), var(--_color-text));
    }
  }

  .element-button--shopify-payment-wrapper {
    --_radius: var(--element-button-radius);
    --_padding-block: var(--element-button-padding-block);
    --_line-height: var(--element-button-line-height, var(--element-text-line-height--body));
    --_font-size: var(--element-button-font-size, var(--element-text-font-size--body-md));

    --shopify-accelerated-checkout-button-border-radius: var(--_radius);
    --shopify-accelerated-checkout-button-block-size: calc((2 * var(--_padding-block)) + (var(--_line-height) * var(--_font-size)));

    font-family: var(--element-button-font-family, var(--element-text-font-family));
  }
/* END_SNIPPET:element.button */

/* START_SNIPPET:element.checkbox (INDEX:109) */
.element-checkbox {
    /* Layout & Typography */
    --_size: var(--element-checkbox-size, var(--size-5));
    --_icon-size: var(--element-checkbox-icon-size, var(--size-3-5));
    --_radius: var(--element-checkbox-radius, 1px);
    --_gap: var(--element-checkbox-gap, var(--size-2));
    --_outline-width: var(--element-checkbox-outline-width, 1px);
    --_outline-width-active: var(--element-checkbox-outline-width-active, 2px);
    --_font-family: var(
      --element-checkbox-font-family,
      var(--element-text-font-family--body),
      var(--element-text-font-family-fallback--body)
    );
    --_font-size: var(--element-checkbox-font-size, var(--element-text-font-size--body-md));
    --_letter-spacing: var(--element-checkbox-letter-spacing, var(--element-text-letter-spacing--body));
    --_line-height: var(--element-checkbox-line-height, var(--element-text-line-height--body));
    --_font-weight: var(--element-checkbox-font-weight, normal);

    /* Colors */
    --_color-primary: var(--color-primary);
    --_color-secondary: var(--color-secondary);
    --_color-active: var(--color-focus);
    --_color-shadow: var(
      --element-checkbox-shadow-color,
      color-mix(in srgb, var(--root-color-primary) var(--_outline-shade), var(--root-color-secondary))
    );
    --_color-background: var(--root-color-secondary);
    --_color-text: var(--_color-primary);
    --_outline-shade: var(--element-checkbox-outline-shade, 12%);
    --_shadow-inset: var(--element-checkbox-shadow-inset, inset);
    --_shadow-h-offset: var(--element-checkbox-shadow-horizontal-offset, 0);
    --_shadow-v-offset: var(--element-checkbox-shadow-vertical-offset, 0);
    --_shadow-blur: var(--element-checkbox-shadow-blur-radius, 0);
    --_shadow-spread: var(--element-checkbox-shadow-spread-radius, var(--_outline-width));
    --_icon-opacity: var(--element-checkbox-icon-opacity, 0);

    @media (max-width: 768px) {
      --_size: var(--element-checkbox-size, var(--size-4));
      --_icon-size: var(--element-checkbox-icon-size, var(--size-3));
    }

    position: relative;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--_gap);
    color: var(--_color-text);
    font-family: var(--_font-family);
    font-size: var(--_font-size);
    letter-spacing: var(--_letter-spacing);
    line-height: var(--_line-height);
    font-weight: var(--_font-weight);
    cursor: pointer;

    input[type='checkbox'] {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }

    &:hover {
      --_color-background: color-mix(in srgb, var(--_color-primary) 4%, var(--_color-secondary));
    }

    &:hover:has(input[type='checkbox']:checked) {
      --_color-shadow: color-mix(in srgb, var(--_color-secondary) 12%, var(--_color-primary));
      --_color-background: color-mix(in srgb, var(--_color-secondary) 4%, var(--_color-primary));
    }

    &:has(input[type='checkbox']:checked) {
      --_icon-opacity: 1;
      --_color-background: var(--_color-primary);
      --_color-shadow: var(--_color-primary);
    }

    &:has(input[type='checkbox']:focus-visible) {
      --_color-shadow: var(--_color-active);
      --_outline-width: var(--_outline-width-active);
    }

    &:not(.element-checkbox--with-icon):has(input[type='checkbox']:focus-visible) {
      outline: 3px solid var(--color-focus);
    }

    &:has(input[type='checkbox']:disabled) {
      --_color-background: color-mix(in srgb, var(--_color-primary) 8%, var(--_color-secondary));
      --_color-shadow: color-mix(in srgb, var(--_color-primary) 8%, var(--_color-secondary));
    }
  }

  .element-checkbox__icon {
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: var(--_size);
    height: var(--_size);
    border-radius: var(--_radius);
    box-shadow: var(--_shadow-inset) var(--_shadow-h-offset) var(--_shadow-v-offset) var(--_shadow-blur)
      var(--_shadow-spread) var(--_color-shadow);
    background-color: var(--_color-background);

    .element-icon {
      width: var(--_icon-size);
      height: var(--_icon-size);
      color: var(--_color-secondary);
      opacity: var(--_icon-opacity);
    }
  }
/* END_SNIPPET:element.checkbox */

/* START_SNIPPET:element.divider (INDEX:110) */
.element-divider {
    /* Layout & Typography */
    --_width: var(--element-divider-width, 100%);
    --_margin: var(--element-divider-margin, 0);
    --_border-width: var(--element-divider-border-width, var(--size-0-25));

    /* Colors */
    --_color-primary: var(--color-primary);
    --_color-secondary: var(--color-secondary);
    --_shade-border: var(--element-divider-border-shade, var(--shade-12));
    --_border-color: var(
      --element-divider-border-color,
      color-mix(in srgb, var(--_color-primary) var(--_shade-border), var(--_color-secondary))
    );

    width: var(--_width);
    margin: var(--_margin) auto;
    border: 0;
    border-top: var(--_border-width) solid var(--_border-color);
  }

  .element-divider--small {
    --_margin: var(--size-4);
  }

  .element-divider--medium {
    --_margin: var(--size-7-5);
  }

  .element-divider--large {
    --_margin: var(--size-7-5);

    @media (min-width: 769px) {
      --_margin: calc(var(--size-7-5) * 1.5);
    }
  }
/* END_SNIPPET:element.divider */

/* START_SNIPPET:element.icon (INDEX:111) */
:root {
    --element-icon-size: 20px;
    --element-icon-width: initial;
    --element-icon-height: initial;
    --element-icon-stroke-width: 2px;
    --element-icon-stroke-linejoin: miter;
    --element-icon-color: inherit;
    --element-icon-opacity: 1;
  }

  .element-icon {
    /* Layout & Typography */
    --_size: var(--element-icon-size);
    --_width: var(--element-icon-width, var(--_size));
    --_height: var(--element-icon-height, var(--_size));
    --_stroke-width: var(--element-icon-stroke-width);
    --_stroke-linejoin: var(--element-icon-stroke-linejoin);

    /* Colors */
    --_color: var(--element-icon-color);
    --_opacity: var(--element-icon-opacity);

    display: inline-block;
    vertical-align: middle;
    width: var(--_width);
    height: var(--_height);
    color: var(--_color);
    opacity: var(--_opacity);

    &.element-icon--line {
      stroke-width: var(--_stroke-width);
      stroke-linejoin: var(--_stroke-linejoin);
    }
  }
/* END_SNIPPET:element.icon */

/* START_SNIPPET:element.input (INDEX:114) */
:root {
    /* Base Layout Variables */
    --element-input-width: auto;
    --element-input-height: auto;
    --element-input-radius: var(--radius-xs);
    --element-input-padding-inline: var(--size-3);
    --element-input-padding-block: var(--size-3);

    --element-input-font-family: var(--element-text-font-family--body), var(--element-text-font-family-fallback--body);
    --element-input-font-size: var(--element-text-font-size--body-md);
    --element-input-line-height: var(--element-text-line-height--body);
    --element-input-letter-spacing: var(--element-text-letter-spacing--body-md);

    /* Base Outline Variables */
    --element-input-box-shadow-horizontal-offset: 0;
    --element-input-box-shadow-vertical-offset: 0;
    --element-input-box-shadow-blur-radius: 0;
    --element-input-box-shadow-spread-radius: 1px;

    /* Base Colors Variables */
    --element-input-color-primary: initial;
    --element-input-color-secondary: initial;
    --element-input-box-shadow-shade: 12%;
    --element-input-background-shade: 0%;
    --element-input-text-shade: 70%;
    --element-input-text-shade-placeholder: 50%;

    /* Active State Variables */
    --element-input-box-shadow-spread-radius--active: 2px;
    --element-input-box-shadow-shade--active: var(--element-input-box-shadow-shade);
    --element-input-background-shade--active: var(--element-input-background-shade);
    --element-input-text-shade--active: 100%;
    --element-input-box-shadow-color--active: var(--color-focus, #4a9afc);

    /* Focus State Variables */
    --element-input-box-shadow-spread-radius--focus: 2px;
    --element-input-box-shadow-shade--focus: var(--element-input-box-shadow-shade);
    --element-input-background-shade--focus: var(--element-input-background-shade);
    --element-input-text-shade--focus: var(--element-input-text-shade);
    --element-input-box-shadow-color--focus: var(--color-focus, #4a9afc);

    /* Hover State Variables */
    --element-input-box-shadow-spread-radius--hover: 2px;
    --element-input-box-shadow-shade--hover: var(--element-input-box-shadow-shade);
    --element-input-background-shade--hover: 4%;
    --element-input-text-shade--hover: 100%;

    /* Disabled State Variables */
    --element-input-box-shadow-spread-radius--disabled: 2px;
    --element-input-box-shadow-shade--disabled: 8%;
    --element-input-background-shade--disabled: 8%;
    --element-input-text-shade--disabled: 20%;

    /* Error State Variables */
    --element-input-box-shadow-spread-radius--error: 2px;
    --element-input-box-shadow-shade--error: 8%;
    --element-input-background-shade--error: initial;
    --element-input-text-shade--error: 100%;
    --element-input-box-shadow-color--error: var(--color-error, #ff0000);
  }

  .element-input {
    /* Base Layout*/
    --_width: var(--element-input-width);
    --_height: var(--element-input-height);
    --_radius: var(--element-input-radius);
    --_padding-inline: var(--element-input-padding-inline);
    --_padding-block: var(--element-input-padding-block);

    /* Base Typography */
    --_font-family: var(--element-input-font-family);
    --_font-size: var(--element-input-font-size);
    --_line-height: var(--element-input-line-height);
    --_letter-spacing: var(--element-input-letter-spacing);

    /* Base Colors */
    --_color-primary: var(--element-input-color-primary, var(--root-color-primary, #000));
    --_color-secondary: var(--element-input-color-secondary, var(--root-color-secondary, #fff));
    --_color-error: var(--element-input-color-error);
    --_color-active: var(--element-input-color-active);
    --_shade-box-shadow: var(--element-input-box-shadow-shade);
    --_shade-background: var(--element-input-background-shade);
    --_shade-text: var(--element-input-text-shade);
    --_shade-text-placeholder: var(--element-input-text-shade-placeholder);

    --_color-background: color-mix(in srgb, var(--_color-primary) var(--_shade-background), var(--_color-secondary));
    --_color-text: color-mix(in srgb, var(--_color-primary) var(--_shade-text), var(--_color-secondary));
    --_color-text-placeholder: color-mix(
      in srgb,
      var(--_color-primary) var(--_shade-text-placeholder),
      var(--_color-secondary)
    );
    --_color-box-shadow: color-mix(in srgb, var(--_color-primary) var(--_shade-box-shadow), var(--_color-secondary));

    /* Base Outline */
    --_box-shadow-horizontal-offset: var(--element-input-box-shadow-horizontal-offset);
    --_box-shadow-vertical-offset: var(--element-input-box-shadow-vertical-offset);
    --_box-shadow-blur-radius: var(--element-input-box-shadow-blur-radius);
    --_box-shadow-spread-radius: var(--element-input-box-shadow-spread-radius);
    --_box-shadow: inset var(--_box-shadow-horizontal-offset) var(--_box-shadow-vertical-offset)
      var(--_box-shadow-blur-radius) var(--_box-shadow-spread-radius) var(--_color-box-shadow);

    display: flex;
    align-items: center;
    position: relative;
    border: none;
    outline: none;
    padding-inline: var(--_padding-inline);
    padding-block: var(--_padding-block);
    width: var(--_width);
    height: var(--_height);
    border-radius: var(--_radius);
    box-shadow: var(--_box-shadow);
    background-color: var(--_color-background);
    color: var(--_color-text);
    font-family: var(--_font-family);
    font-size: var(--_font-size);
    line-height: var(--_line-height);
    letter-spacing: var(--_letter-spacing);

    &::placeholder {
      color: var(--_color-text-placeholder);
    }

    &:hover:not(:disabled) {
      --_box-shadow-spread-radius: var(--element-input-box-shadow-spread-radius--hover);
      --_shade-box-shadow: var(--element-input-box-shadow-shade--hover);
      --_shade-background: var(--element-input-background-shade--hover);
      --_shade-text: var(--element-input-text-shade--hover);
    }

    &:active {
      --_box-shadow-spread-radius: var(--element-input-box-shadow-spread-radius--active);
      --_shade-box-shadow: var(--element-input-box-shadow-shade--active);
      --_shade-background: var(--element-input-background-shade--active);
      --_shade-text: var(--element-input-text-shade--active);
      --_color-box-shadow: var(--element-input-box-shadow-color--active);
    }

    &:focus {
      --_box-shadow-spread-radius: var(--element-input-box-shadow-spread-radius--focus);
      --_shade-box-shadow: var(--element-input-box-shadow-shade--focus);
      --_shade-background: var(--element-input-background-shade--focus);
      --_shade-text: var(--element-input-text-shade--focus);
      --_color-box-shadow: var(--element-input-box-shadow-color--focus);
    }

    &:disabled {
      --_box-shadow-spread-radius: var(--element-input-box-shadow-spread-radius--disabled);
      --_shade-box-shadow: var(--element-input-box-shadow-shade--disabled);
      --_shade-background: var(--element-input-background-shade--disabled);
      --_shade-text: var(--element-input-text-shade--disabled);
      cursor: not-allowed;
    }

    &[aria-invalid='true'] {
      --_box-shadow-spread-radius: var(--element-input-box-shadow-spread-radius--error);
      --_shade-box-shadow: var(--element-input-box-shadow-shade--error);
      --_shade-background: var(--element-input-background-shade--error);
      --_shade-text: var(--element-input-text-shade--error);
      --_color-box-shadow: var(--element-input-box-shadow-color--error);
    }

    & ~ button {
      --element-button-height: 100%;
    }
  }

  .element-input--inverted {
    --_color-secondary: var(--element-input-color-primary, var(--color-primary, #000));
    --_color-primary: var(--element-input-color-secondary, var(--color-secondary, #fff));
  }

  .element-input--transparent {
    --_color-primary: var(--element-input-color-primary, var(--color-primary, #000));
    --_color-secondary: transparent;
  }

  .element-input--inverted.element-input--transparent {
    --_color-primary: var(--element-input-color-secondary, var(--rootcolor-secondary, #fff));
    --_color-secondary: transparent;
  }

  .element-input--inline {
    --_radius: var(--radius-none);
    --_box-shadow: inset 0 calc(var(--_box-shadow-spread-radius) * -1) 0 0 var(--_color-box-shadow);
  }

  .element-input--full {
    --_width: 100%;
  }

  /* Date input specific styles */
  .element-input[type="date"] {
    text-align: left;
    padding-right: var(--size-8); /* Space for calendar icon */
  }

  .element-input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute;
    right: var(--_padding-inline);
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    width: var(--size-4);
    height: var(--size-4);
  }

  .element-input[type="date"]::-webkit-datetime-edit {
    width: 100%;
  }

  .element-input[type="date"]::-webkit-datetime-edit-fields-wrapper {
    width: 100%;
  }
/* END_SNIPPET:element.input */

/* START_SNIPPET:element.placeholder (INDEX:116) */
.element-placeholder {
    fill: #999;
    background-color: #e1e1e1;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    display: block;
    padding: 30px 0;
  }

  .element-placeholder--no-padding {
    padding: 0;
  }
/* END_SNIPPET:element.placeholder */

/* START_SNIPPET:element.quantity-selector (INDEX:117) */
.element-quantity-selector {
    --element-input-color-primary: var(--color-primary, #000);
    --element-input-color-secondary: var(--color-secondary, #fff);

    width: fit-content;
    display: inline-block;
    position: relative;
    overflow: visible;
    pointer-events: auto;

    &.is-loading {
      opacity: 0.5;
      pointer-events: none;
    }
  }

  .element-quantity-selector__input {
    --element-input-radius: var(--element-button-radius);
    --element-input-padding-inline: calc(
      var(--element-input-line-height) * var(--element-input-font-size) + 2 * var(--element-input-padding-block)
    );
    --element-input-width: max(calc(var(--digit-count, 1ch) + 2 * var(--size-1)), 32px);
    box-sizing: content-box;
    text-align: center;
  }

  .element-quantity-selector__button {
    --element-button-border-width: 0;
    --element-button-color-primary: var(--element-input-color-primary, var(--root-color-primary, #000));
    --element-button-color-secondary: var(--element-input-color-secondary, var(--root-color-secondary, #fff));

    position: absolute;
    top: 0;
    height: 100%;
    aspect-ratio: 1;
    border: 1px solid transparent;
    background-clip: padding-box;
    z-index: 1;

    &:has(+ .element-quantity-selector__input:focus),
    .element-quantity-selector__input:focus + & {
      border-width: var(--element-input-box-shadow-spread-radius--hover);
    }

    &:is(.element-quantity-selector__button--minus) {
      border-radius: var(--element-button-radius) 0 0 var(--element-button-radius);
      left: 0;
    }

    &:is(.element-quantity-selector__button--plus) {
      border-radius: 0 var(--element-button-radius) var(--element-button-radius) 0;
      right: 0;
    }
  }
/* END_SNIPPET:element.quantity-selector */

/* START_SNIPPET:element.radio (INDEX:118) */
:root {
    --element-radio-size: var(--size-5);
    --element-radio-dot-size: var(--size-2-5);
    --element-radio-dot-opacity: 0;
    --element-radio-radius: 50%;
    --element-radio-gap: var(--size-2);
    --element-radio-border-width: 1px;
    --element-radio-border-width--focus: 2px;

    --element-radio-color-primary: initial;
    --element-radio-color-secondary: initial;
    --element-radio-color-focus: var(--color-focus);
    --element-radio-shade-background: 0%;
    --element-radio-shade-background--hover: 4%;
    --element-radio-shade-background--checked: 100%;
    --element-radio-shade-background--disabled: 8%;
    --element-radio-shade-border: 12%;
    --element-radio-shade-border--disabled: 8%;
  }

  .element-radio {
    /* Layout & Typography */
    --_size: var(--element-radio-size);
    --_dot-size: var(--element-radio-dot-size);
    --_dot-opacity: var(--element-radio-dot-opacity);
    --_radius: var(--element-radio-radius);
    --_gap: var(--element-radio-gap);
    --_border-width: var(--element-radio-border-width);

    /* Colors */
    --_color-primary: var(--element-radio-color-primary, var(--color-primary));
    --_color-secondary: var(--element-radio-color-secondary, var(--color-secondary));
    --_color-focus: var(--element-radio-color-focus, var(--color-focus, #4a9afc));
    --_shade-background: var(--element-radio-shade-background);
    --_shade-border: var(--element-radio-shade-border);

    --_box-shadow: 0 0 0 var(--_border-width) color-mix(in srgb, var(--_color-primary) var(--_shade-border), var(--_color-secondary));

    @media (max-width: 768px) {
      --_size: var(--radio-size, var(--size-4));
      --_dot-size: var(--radio-dot-size, var(--size-2));
    }

    position: relative;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--_gap);
    cursor: pointer;

    input[type='radio'] {
      position: absolute;
      opacity: 0;
      inset: 0;
      cursor: pointer;
    }

    &:hover {
      --_shade-background: var(--element-radio-shade-background--hover);
    }

    &:has(input[type='radio']:checked) {
      --_dot-opacity: 1;
      --_shade-background: var(--element-radio-shade-background--checked);
    }

    &:has(input[type='radio']:focus-visible) {
      --_border-width: var(--element-radio-border-width--focus);
      --_box-shadow: 0 0 0 var(--_border-width) var(--_color-focus);
    }

    &:has(input[type='radio']:disabled) {
      --_shade-background: var(--element-radio-shade-background--disabled);
      --_shade-border: var(--element-radio-shade-border--disabled);
      cursor: not-allowed;
    }
  }

  .element-radio__icon {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--_size);
    height: var(--_size);
    border-radius: var(--_radius);
    box-shadow: var(--_box-shadow);
    background-color: color-mix(in srgb, var(--_color-primary) var(--_shade-background), var(--_color-secondary));

    &::before {
      content: '';
      width: var(--_dot-size);
      height: var(--_dot-size);
      background-color: var(--_color-secondary);
      border-radius: 50%;
      opacity: var(--_dot-opacity);
    }
  }
/* END_SNIPPET:element.radio */

/* START_SNIPPET:element.select (INDEX:119) */
element-select {
    display: inline-block;
    position: relative;
  }

  /* Ensure the custom element inherits the wrapper styles */
  element-select.element-select__wrapper {
    position: relative;
    display: inline-block;
  }

  element-select.element-select__wrapper select {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
    /* Ensure the select is focusable and visible to screen readers */
    pointer-events: auto;
  }

  /* Focus state for the wrapper */
  element-select.element-select__wrapper--focused .element-button {
    --_box-shadow: 0 0 0 var(--element-input-box-shadow-spread-radius--focus) color-mix(in srgb, var(--color-primary) var(--element-input-box-shadow-shade--focus), transparent);
  }

  element-select select:focus-visible + .element-button {
    --_border-width: var(--element-input-box-shadow-spread-radius--focus);
    --_box-shadow: inset 0 0 0 var(--_border-width) var(--_color-focus);
  }

  /* Ensure the button takes full width */
  element-select .element-button {
    width: 100%;
    justify-content: space-between;
  }
/* END_SNIPPET:element.select */

/* START_SNIPPET:element.swatch (INDEX:120) */
.element-swatch {
    /* Layout */
    --_size-small: var(--element-swatch-size-small, var(--size-4));
    --_size-large: var(--element-swatch-size-large, var(--size-8));
    --_size-mobile-ratio: var(--element-swatch-size-mobile-ratio, 0.875); /* 3.5/4 for small, 6/8 for large (0.75) */
    --_size: var(--_size-small);
    --_radius: var(--element-swatch-radius, var(--radius-full));
    --_border-width: var(--element-swatch-border-width, var(--size-0-25));
    --_outline-width: var(--element-swatch-outline-width, 3px);
    --_line-disabled-width: var(
      --element-swatch-line-disabled-width,
      max(var(--size-0-25), calc(var(--_size) * 0.0625))
    );

    /* Colors */
    --_color-primary: var(--color-primary, #000);
    --_color-secondary: var(--color-secondary, #fff);
    --_color-background: var(--element-swatch-color-background, var(--_color-primary));
    --_color-background-image: var(--element-swatch-color-background-image, none);
    --_color-border: var(--element-swatch-color-border, var(--_color-primary));
    --_color-disabled: var(--element-swatch-color-disabled, none);
    --_color-focus: var(--element-swatch-color-focus, var(--color-focus, #4a9afc));
    --_shade-inset: var(--element-swatch-shade-inset, 16%);
    --_shade-outer: var(--element-swatch-shade-outer, 0%);
    --_shade-outer-hover: var(--element-swatch-shade-outer-hover, 20%);
    --_shade-outer-selected: var(--element-swatch-shade-outer-selected, 100%);

    display: inline-block;
    background: var(--_color-disabled), var(--_color-background-image) center / cover, var(--_color-background);
    width: var(--_size);
    height: var(--_size);
    border-radius: var(--_radius);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--_color-secondary) 100%, transparent),
      0 0 0 var(--_outline-width) color-mix(in srgb, var(--_color-primary) var(--_shade-outer), transparent),
      inset 0 0 0 var(--_border-width) color-mix(in srgb, var(--_color-border) var(--_shade-inset), transparent);
    outline: 0;

    @media only screen and (max-width: 768px) {
      --_size: calc(var(--_size-small) * var(--_size-mobile-ratio));
    }

    label:hover &,
    &:hover {
      --_outline-width: 4px;
      --_shade-outer: var(--_shade-outer-hover);
    }

    &:focus,
    input:checked ~ &,
    .element-swatch--selected {
      --_shade-outer: var(--_shade-outer-selected);
    } 

    /* Focus State */
    &:focus-visible,
    input[type='radio']:focus-visible ~ & {
      --_color-primary: var(--_color-focus);
      --_outline-width: 4px;
    }
  }

  .element-swatch--large {
    --_size: var(--_size-large);

    @media only screen and (max-width: 768px) {
      --_size: calc(var(--_size-large) * var(--_size-mobile-ratio));
    }
  }

  .element-swatch--disabled,
  .disabled > input[type='radio'] ~ &,
  input:disabled + & {
    --_color-disabled: linear-gradient(
      to bottom right,
      transparent calc(50% - var(--_line-disabled-width)),
      var(--color-secondary) calc(50% - var(--_line-disabled-width)) calc(50% + var(--_line-disabled-width)),
      transparent calc(50% + var(--_line-disabled-width))
    );
  }
/* END_SNIPPET:element.swatch */

/* START_SNIPPET:element.text--body (INDEX:121) */
/* Public Body Variables */
  :root {
    /* Body Font Styles */
    --element-text-font-family--body: 'Arial';
    --element-text-font-family-fallback--body: 'sans-serif';
    --element-text-font-weight--body: var(--font-weight-400);
    --element-text-letter-spacing--body: var(--letter-space-md);
    --element-text-text-transform--body: none;
    
    /* Body Color */
    --element-text-color--body: initial;
    
    /* Body Font Sizes */
    --element-text-font-size--body: initial;
    --element-text-font-size--body-xs: var(--text-size-3);
    --element-text-font-size--body-sm: var(--text-size-3-5);
    --element-text-font-size--body-md: var(--text-size-4);
    --element-text-font-size--body-lg: var(--text-size-4-5);
    
    /* Body Line Heights */
    --element-text-line-height--body: var(--line-height-md);
    --element-text-line-height--body-xs: initial;
    --element-text-line-height--body-sm: initial;
    --element-text-line-height--body-md: initial;
    --element-text-line-height--body-lg: initial;
  }

  .element-text:is([class*="element-text--body"]) {
    /* Body Font Styles */
    --_font-family--body: var(--_font-family, var(--element-text-font-family--body));
    --_font-family-fallback--body: var(--_font-family-fallback, var(--element-text-font-family-fallback--body));
    --_font-weight--body: var(--_font-weight, var(--element-text-font-weight--body));
    --_letter-spacing--body: var(--_letter-spacing, var(--element-text-letter-spacing--body));
    --_text-transform--body: var(--_text-transform, var(--element-text-text-transform--body));

    /* Body Color */
    --_color--body: var(--_color, var(--element-text-color--body, currentColor));

    /* Body Font Sizes */
    --_font-size--body: var(--_font-size, var(--element-text-font-size--body));
    --_font-size--body-xs: var(--_font-size--body, var(--element-text-font-size--body-xs));
    --_font-size--body-sm: var(--_font-size--body, var(--element-text-font-size--body-sm));
    --_font-size--body-md: var(--_font-size--body, var(--element-text-font-size--body-md));
    --_font-size--body-lg: var(--_font-size--body, var(--element-text-font-size--body-lg));

    /* Body Line Heights */
    --_line-height--body: var(--_line-height, var(--element-text-line-height--body));
    --_line-height--body-xs: var(--element-text-line-height--body-xs, var(--_line-height--body));
    --_line-height--body-sm: var(--element-text-line-height--body-sm, var(--_line-height--body));
    --_line-height--body-md: var(--element-text-line-height--body-md, var(--_line-height--body));
    --_line-height--body-lg: var(--element-text-line-height--body-lg, var(--_line-height--body));

    font-family: var(--_font-family--body), var(--_font-family-fallback--body);
    font-weight: var(--_font-weight--body);
    letter-spacing: var(--_letter-spacing--body);
    text-transform: var(--_text-transform--body);
    color: var(--_color--body);

    &:where(.element-text--body-xs) {
      --_font-size: var(--_font-size--body-xs); 
      line-height: var(--_line-height--body-xs);
    }

    &:where(.element-text--body-sm) {
      font-size: var(--_font-size--body-sm);
      line-height: var(--_line-height--body-sm);
    }

    &:where(.element-text--body-md) {
      font-size: var(--_font-size--body-md);
      line-height: var(--_line-height--body-md);
    } 

    &:where(.element-text--body-lg) {
      font-size: var(--_font-size--body-lg);
      line-height: var(--_line-height--body-lg);
    }
  }
/* END_SNIPPET:element.text--body */

/* START_SNIPPET:element.text--heading (INDEX:122) */
/* Public Heading Variables */
  :root {
    /* Heading Font Styles */
    --element-text-font-family--heading: 'Arial';
    --element-text-font-family-fallback--heading: 'sans-serif';
    --element-text-font-weight--heading: var(--font-weight-700);
    --element-text-letter-spacing--heading: var(--letter-space-md);
    --element-text-text-transform--heading: none;
    
    /* Heading Color */
    --element-text-color--heading: initial;
    
    /* Heading Font Sizes */
    --element-text-font-size--heading: initial;
    --element-text-font-size--heading-2xl: var(--text-size-12);
    --element-text-font-size--heading-xl: var(--text-size-8);
    --element-text-font-size--heading-lg: var(--text-size-6);
    --element-text-font-size--heading-md: var(--text-size-5);
    --element-text-font-size--heading-sm: var(--text-size-4-5);
    --element-text-font-size--heading-xs: var(--text-size-4);
    --element-text-font-size--heading-2xs: var(--text-size-3-5);
    
    /* Heading Line Heights */
    --element-text-line-height--heading: var(--line-height-md);
    --element-text-line-height--heading-2xl: initial;
    --element-text-line-height--heading-xl: initial;
    --element-text-line-height--heading-lg: initial;
    --element-text-line-height--heading-md: initial;
    --element-text-line-height--heading-sm: initial;
    --element-text-line-height--heading-xs: initial;
    --element-text-line-height--heading-2xs: initial;
  } 

  .element-text:is([class*="element-text--heading"]) {
    /* Heading Font Styles */
    --_font-family--heading: var(--_font-family, var(--element-text-font-family--heading));
    --_font-family-fallback--heading: var(--_font-family-fallback, var(--element-text-font-family-fallback--heading));
    --_font-weight--heading: var(--_font-weight, var(--element-text-font-weight--heading));
    --_letter-spacing--heading: var(--_letter-spacing, var(--element-text-letter-spacing--heading));
    --_text-transform--heading: var(--_text-transform, var(--element-text-text-transform--heading));

    /* Heading Color */
    --_color--heading: var(--_color, var(--element-text-color--heading, currentColor));

    /* Heading Font Sizes */
    --_font-size--heading: var(--_font-size, var(--element-text-font-size--heading));
    --_font-size--heading-2xl: var(--_font-size--heading, var(--element-text-font-size--heading-2xl));
    --_font-size--heading-xl: var(--_font-size--heading, var(--element-text-font-size--heading-xl));
    --_font-size--heading-lg: var(--_font-size--heading, var(--element-text-font-size--heading-lg));
    --_font-size--heading-md: var(--_font-size--heading, var(--element-text-font-size--heading-md));
    --_font-size--heading-sm: var(--_font-size--heading, var(--element-text-font-size--heading-sm));
    --_font-size--heading-xs: var(--_font-size--heading, var(--element-text-font-size--heading-xs));

    /* Heading Line Heights */
    --_line-height--heading: var(--_line-height, var(--element-text-line-height--heading));
    --_line-height--heading-2xl: var(--element-text-line-height--heading-2xl, var(--_line-height--heading));
    --_line-height--heading-xl: var(--element-text-line-height--heading-xl, var(--_line-height--heading));
    --_line-height--heading-lg: var(--element-text-line-height--heading-lg, var(--_line-height--heading));
    --_line-height--heading-md: var(--element-text-line-height--heading-md, var(--_line-height--heading));
    --_line-height--heading-sm: var(--element-text-line-height--heading-sm, var(--_line-height--heading));
    --_line-height--heading-xs: var(--element-text-line-height--heading-xs, var(--_line-height--heading));

    font-family:var(--_font-family--heading), var(--_font-family-fallback--heading);
    font-weight: var(--_font-weight--heading);
    letter-spacing: var(--_letter-spacing--heading);
    text-transform: var(--_text-transform--heading);
    color: var(--_color--heading);

    &:where(.element-text--heading-2xs) {
      font-size: var(--_font-size--heading-2xs);
      line-height: var(--_line-height--heading-2xs);
    }
  
    &:where(.element-text--heading-xs) {
      font-size: var(--_font-size--heading-xs);
      line-height: var(--_line-height--heading-xs);
    }

    &:where(.element-text--heading-sm) {
      font-size: var(--_font-size--heading-sm);
      line-height: var(--_line-height--heading-sm);
    }

    &:where(.element-text--heading-md) {
      font-size: var(--_font-size--heading-md);
      line-height: var(--_line-height--heading-md);
    }

    &:where(.element-text--heading-lg) {
      font-size: var(--_font-size--heading-lg);
      line-height: var(--_line-height--heading-lg);
    }

    &:where(.element-text--heading-xl) {
      font-size: var(--_font-size--heading-xl);
      line-height: var(--_line-height--heading-xl);
    }

    &:where(.element-text--heading-2xl) {
      font-size: var(--_font-size--heading-2xl);
      line-height: var(--_line-height--heading-2xl);
    }
  }
/* END_SNIPPET:element.text--heading */

/* START_SNIPPET:element.text--rte (INDEX:123) */
/* Public RTE Variables */
  :root {
    /* Body Font Stack */
    --element-text-font-family--rte-body: var(--element-text-font-family--body);
    --element-text-font-family-fallback--rte-body: var(--element-text-font-family-fallback--body);
    --element-text-font-weight--rte-body: var(--element-text-font-weight--body);
    --element-text-letter-spacing--rte-body: var(--element-text-letter-spacing--body);
    --element-text-line-height--rte-body: var(--element-text-line-height--body);
    --element-text-text-transform--rte-body: var(--element-text-text-transform--body);

    /* Body Font Sizes */
    --element-text-font-size--rte-body: var(--element-text-font-size--body-md);
    --element-text-line-height--rte-body: var(--element-text-line-height--body);

    /* Heading Font Stack */
    --element-text-font-family--rte-heading: var(--element-text-font-family--heading);
    --element-text-font-family-fallback--rte-heading: var(--element-text-font-family-fallback--heading);
    --element-text-font-weight--rte-heading: var(--element-text-font-weight--heading);
    --element-text-letter-spacing--rte-heading: var(--element-text-letter-spacing--heading);
    --element-text-text-transform--rte-heading: var(--element-text-text-transform--heading);

    /* Heading Font Sizes */
    --element-text-font-size--rte-heading-h1: var(--element-text-font-size--heading-xl);
    --element-text-line-height--rte-heading-h1: var(--element-text-line-height--heading-xl);
    --element-text-font-size--rte-heading-h2: var(--element-text-font-size--heading-lg);
    --element-text-line-height--rte-heading-h2: var(--element-text-line-height--heading-lg);
    --element-text-font-size--rte-heading-h3: var(--element-text-font-size--heading-md);
    --element-text-line-height--rte-heading-h3: var(--element-text-line-height--heading-md);
    --element-text-font-size--rte-heading-h4: var(--element-text-font-size--heading-sm);
    --element-text-line-height--rte-heading-h4: var(--element-text-line-height--heading-sm);
    --element-text-font-size--rte-heading-h5: var(--element-text-font-size--heading-xs);
    --element-text-line-height--rte-heading-h5: var(--element-text-line-height--heading-xs);
    --element-text-font-size--rte-heading-h6: var(--element-text-font-size--heading-xs);
  }

  .element-text.element-text--rte {
    /* Body Font Stack */
    --_font-family--rte-body: var(--element-text-font-family--rte-body);
    --_font-family-fallback--rte-body: var(--element-text-font-family-fallback--rte-body);
    --_font-weight--rte-body: var(--element-text-font-weight--rte-body);
    --_letter-spacing--rte-body: var(--element-text-letter-spacing--rte-body);
    --_text-transform--rte-body: var(--element-text-text-transform--rte-body);

    /* Body Font Sizes */
    --_line-height--rte-body: var(--element-text-line-height--rte-body);
    --_font-size--rte-body: var(--element-text-font-size--rte-body);

    /* Heading Font Stack */
    --_font-family--rte-heading: var(--element-text-font-family--rte-heading);
    --_font-family-fallback--rte-heading: var(--element-text-font-family-fallback--rte-heading);
    --_font-weight--rte-heading: var(--element-text-font-weight--rte-heading);
    --_letter-spacing--rte-heading: var(--element-text-letter-spacing--rte-heading);
    --_text-transform--rte-heading: var(--element-text-text-transform--rte-heading);

    /* Heading Font Sizes */
    --_font-size--rte-heading-h1: var(--element-text-font-size--rte-heading-h1);
    --_line-height--rte-heading-h1: var(--element-text-line-height--rte-heading-h1);
    --_font-size--rte-heading-h2: var(--element-text-font-size--rte-heading-h2);
    --_line-height--rte-heading-h2: var(--element-text-line-height--rte-heading-h2);
    --_font-size--rte-heading-h3: var(--element-text-font-size--rte-heading-h3);
    --_line-height--rte-heading-h3: var(--element-text-line-height--rte-heading-h3);
    --_font-size--rte-heading-h4: var(--element-text-font-size--rte-heading-h4);
    --_line-height--rte-heading-h4: var(--element-text-line-height--rte-heading-h4);
    --_font-size--rte-heading-h5: var(--element-text-font-size--rte-heading-h5);
    --_line-height--rte-heading-h5: var(--element-text-line-height--rte-heading-h5);
    --_font-size--rte-heading-h6: var(--element-text-font-size--rte-heading-h6);
    --_line-height--rte-heading-h6: var(--element-text-line-height--rte-heading-h6);

    font-size: var(--_font-size--rte-body);
    font-family: var(--_font-family--rte-body), var(--_font-family-fallback--rte-body);
    font-weight: var(--_font-weight--rte-body);
    letter-spacing: var(--_letter-spacing--rte-body);
    text-transform: var(--_text-transform--rte-body);
    line-height: var(--_line-height--rte-body);

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      font-family: var(--_font-family--rte-heading), var(--_font-family-fallback--rte-heading);
      font-weight: var(--_font-weight--rte-heading);
      letter-spacing: var(--_letter-spacing--rte-heading);
      text-transform: var(--_text-transform--rte-heading);
      margin: 0 0 var(--size-4);

      @media only screen and (min-width: 769px) {
        margin: 0 0 var(--size-5);
      }
    }

    h6 {
      font-size: var(--_font-size--rte-heading-h6);
      line-height: var(--_line-height--rte-heading-h6);
    }

    h5 {
      font-size: var(--_font-size--rte-heading-h5);
      line-height: var(--_line-height--rte-heading-h5);
    }

    h4 {
      font-size: var(--_font-size--rte-heading-h4);
      line-height: var(--_line-height--rte-heading-h4);
    }

    h3 {
      font-size: var(--_font-size--rte-heading-h3);
      line-height: var(--_line-height--rte-heading-h3);
    }

    h2 {
      font-size: var(--_font-size--rte-heading-h2);
      line-height: var(--_line-height--rte-heading-h2);
    }

    h1 {
      font-size: var(--_font-size--rte-heading-h1);
      line-height: var(--_line-height--rte-heading-h1);
    }

    a {
      text-decoration: underline;
    }

    p {
      margin-bottom: var(--size-8);

      &:last-child {
        margin-bottom: 0;
      }
    }

    & table {
      @media only screen and (max-width: 768px) {
        & td,
        & th {
          padding: 6px 8px;
        }
      }
    }

    .table-wrapper {
      max-width: 100%;
      overflow: auto;
      -webkit-overflow-scrolling: touch;
    }

    .video-wrapper {
      position: relative;
      overflow: hidden;
      max-width: 100%;
      padding-bottom: 56.25%;

      & iframe,
      & video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
    }
  }
/* END_SNIPPET:element.text--rte */

/* START_SNIPPET:element.text (INDEX:124) */
:root {
    --element-text-font-family: initial;
    --element-text-font-family-fallback: initial;
    --element-text-font-weight: initial;
    --element-text-letter-spacing: initial;
    --element-text-text-transform: initial;
    --element-text-line-height: initial;
    --element-text-color: initial;
    --element-text-font-size: initial;
  }

  .element-text {
    /* Base Typography Variables */
    --_font-family: var(--element-text-font-family);
    --_font-family-fallback: var(--element-text-font-family-fallback);
    --_font-weight: var(--element-text-font-weight);
    --_letter-spacing: var(--element-text-letter-spacing);
    --_text-transform: var(--element-text-text-transform);
    --_line-height: var(--element-text-line-height);
    --_color: var(--element-text-color, currentColor);
    --_font-size: var(--element-text-font-size);

    font-family: var(--_font-family), var(--_font-family-fallback);
    font-weight: var(--_font-weight);
    letter-spacing: var(--_letter-spacing);
    text-transform: var(--_text-transform);
    line-height: var(--_line-height);
    color: var(--_color);
    font-size: var(--_font-size);
    margin: 0;
    -webkit-font-smoothing: antialiased;

    &.element-text--price {
      sup {
        top: -0.5em;
        font-size: 60%;
      }
    }

    &.element-text--align-start {
      text-align: start;
    }

    &.element-text--align-center {
      text-align: center;
    }

    &.element-text--align-end {
      text-align: end;
    }

    &.element-text--align-justify {
      text-align: justify;
    }

    &.element-text--break-word {
      word-break: break-word;
    }

    &.element-text--truncate {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    &.element-text--visually-hidden {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      border: 0;
    }

    &.element-text--line-through {
      text-decoration: line-through;
    }

    &.element-text--line-through.element-text--price-superscript {
      text-decoration: none;

      span {
        text-decoration: line-through;
      }
      
      sup {
        text-decoration: line-through;
        position: relative;
        top: -0.5em;
        font-size: 60%;
      }
    }

    &.element-text--underline {
      text-decoration: underline;
    }

    &.element-text--uppercase {
      text-transform: uppercase;
    }

    &.element-text--lowercase {
      text-transform: lowercase;
    }

    &.element-text--capitalize {
      text-transform: capitalize;
    }
  }
/* END_SNIPPET:element.text */

/* START_SNIPPET:element.video (INDEX:125) */
video-media {
    --default-aspect-ratio: 16 / 9;

    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: var(--aspect-ratio, var(--default-aspect-ratio));
  }

  video-media > :is(video, iframe, img, svg) {
    border-radius: inherit;
    width: 100%;
    height: 100%;
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
  }

  video-media > img,
  video-media > svg,
  video-media > video:not(:fullscreen) {
    object-fit: cover;
    object-position: center;
  }

  .element-video[data-background='true'] > video-media,
  .element-video[data-background='true'] > .element-placeholder {
    position: absolute;
    height: 100%;
    width: 100%;
  }

  .element-video.aspect-ratio--square {
    --aspect-ratio: 1 / 1;
    aspect-ratio: 1 / 1;
  }

  .element-video.aspect-ratio--portrait {
    --aspect-ratio: 9 / 16;
    aspect-ratio: 9 / 16;
  }

  .element-video.aspect-ratio--landscape,
  .element-video.aspect-ratio--16-9 {
    --aspect-ratio: 16 / 9;
    aspect-ratio: 16 / 9;
  }

  video-media:not([loaded]) > :is(video, iframe),
  video-media[loaded] > img,
  video-media[loaded] > svg {
    visibility: hidden;
    opacity: 0;
  }
/* END_SNIPPET:element.video */

/* START_SNIPPET:form.product (INDEX:132) */
.product-form__submit-button--pulsing {
    animation: product-form-pulse 1.5s ease-in-out infinite;
    pointer-events: none;
    opacity: 0.6;
  }
  
  @keyframes product-form-pulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
  }
/* END_SNIPPET:form.product */

/* START_SNIPPET:form.product.messages (INDEX:133) */
product-form-messages {
    display: inline;
  }

  product-form-messages.hide {
    display: none;
  }
/* END_SNIPPET:form.product.messages */

/* START_SNIPPET:kit.button (INDEX:146) */
.kit-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    font-family: var(--kit-font-family-body);
    border-radius: var(--kit-radius-md);
    cursor: pointer;
    text-decoration: none;
    border: none;
    transition: background var(--kit-transition-normal);
    line-height: var(--kit-body-line-height);
    letter-spacing: var(--kit-body-letter-spacing);
    background: var(--kit-button-color-background);
    color: var(--kit-button-color-text);
    box-shadow: inset 0 0 0 1px var(--kit-button-color-border);
  }

  /* Variants */
  .kit-button--primary {
    --kit-button-color-background: var(--kit-color-primary-button, var(--kit-color-primary));
    --kit-button-color-text: var(--kit-color-on-primary-button, var(--kit-color-secondary));
    --kit-button-color-border: var(--kit-color-primary-button-border, var(--kit-button-color-background));
  }

  .kit-button--secondary {
    --kit-button-color-background: var(--kit-color-secondary-button, var(--kit-color-secondary));
    --kit-button-color-text: var(--kit-color-on-secondary-button, var(--kit-color-primary));
    --kit-button-color-border: var(--kit-color-secondary-button-border, var(--kit-button-color-text));
  }

  .kit-button--transparent {
    --kit-button-color-background: transparent;
    --kit-button-color-text: var(--kit-color-on-secondary-button, var(--kit-color-primary));
    --kit-button-color-border: transparent;
  }

  /* Sizes */
  .kit-button--sm {
    padding: 0.375rem 0.75rem;
    font-size: var(--kit-font-size-sm);
  }

  .kit-button--md {
    padding: 0.5rem 1.25rem;
    font-size: var(--kit-font-size-base);
  }

  .kit-button--lg {
    padding: 0.75rem 1.75rem;
    font-size: var(--kit-font-size-lg);
  }

  .kit-button--icon-only.kit-button--sm { padding: 0.375rem; }
  .kit-button--icon-only.kit-button--md { padding: 0.5rem; }
  .kit-button--icon-only.kit-button--lg { padding: 0.75rem; }

  /* States */
  .kit-button:hover {
    background: color-mix(in srgb, var(--kit-button-color-text) var(--kit-color-mix-hover), var(--kit-button-color-background));
  }

  .kit-button:active,
  .kit-button:focus-visible {
    background: color-mix(in srgb, var(--kit-button-color-text) var(--kit-color-mix-active), var(--kit-button-color-background));
  }

  .kit-button--full-width {
    width: 100%;
  }

  .kit-button--disabled {
    opacity: var(--kit-opacity-disabled);
    pointer-events: none;
  }

  /* Loading — toggled via JS:
     el.classList.add('kit-button--loading');
     el.disabled = true;                          // <button>
     el.setAttribute('aria-disabled', 'true');    // <a>
  */
  .kit-button.kit-button--loading {
    position: relative;
    pointer-events: none;
  }

  .kit-button--loading::before {
    content: '';
    position: absolute;
    inset: 1px;
    background: inherit;
    border-radius: inherit;
  }

  .kit-button.kit-button--loading::before {
    background: var(--kit-button-color-background);
  }

  .kit-button--transparent.kit-button--loading::before {
    background: var(--kit-color-secondary);
  }

  .kit-button--loading::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: kit-button-spin 0.6s linear infinite;
  }

  @keyframes kit-button-spin {
    to {
      transform: rotate(360deg);
    }
  }
/* END_SNIPPET:kit.button */

/* START_SNIPPET:kit.content-over-media (INDEX:147) */
.kit-content-over-media {
    display: grid;
    overflow: hidden;
    position: relative;

    /* Layout state — default: overlay */
    --_cols: 1fr min(var(--kit-page-width), 100%) 1fr;
    --_rows: 1fr;
    --_content-col: 2;
    --_content-row: 1;
    --_content-place: var(--com-place);
    --_content-align: var(--com-text-align);
    --_media-row: 1;
    --_overlay: '';

    grid-template-columns: var(--_cols);
    grid-template-rows: var(--_rows);

    /* Break inheritance chain for nested instances */
    --com-layout: initial;
    --com-layout-md: initial;
    --com-layout-lg: initial;
    --com-layout-xl: initial;
    --com-place: initial;
    --com-place-md: initial;
    --com-place-lg: initial;
    --com-place-xl: initial;
    --com-text-align: initial;
    --com-text-align-md: initial;
    --com-text-align-lg: initial;
    --com-text-align-xl: initial;
  }

  .kit-content-over-media__media {
    grid-column: 1 / -1;
    grid-row: var(--_media-row);
    display: grid;
  }

  .kit-content-over-media > .kit-content-over-media__media > *,
  .kit-content-over-media__media > picture > img {
    grid-area: 1 / 1;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
  }

  .kit-content-over-media--overlay::after {
    content: var(--_overlay);
    grid-column: 1 / -1;
    grid-row: var(--_media-row);
    background: color-mix(in srgb, var(--kit-color-tint) var(--kit-color-mix-tint-overlay), transparent);
    z-index: 1;
    pointer-events: none;
  }

  .kit-content-over-media__content {
    grid-column: var(--_content-col);
    grid-row: var(--_content-row);
    z-index: 2;
    padding: var(--kit-section-gutter);
    place-self: var(--_content-place);
    text-align: var(--_content-align);
  }

  /* Stacking — base */
  .kit-content-over-media[style*='--com-layout: stack-below'],
  .kit-content-over-media[style*='--com-layout: stack-above'] {
    --_cols: 1fr;
    --_rows: auto auto;
    --_content-col: 1;
    --_content-row: 2;
    --_content-place: auto;
    --_media-row: 1;
    --_overlay: none;
  }

  .kit-content-over-media[style*='--com-layout: stack-above'] {
    --_content-row: 1;
    --_media-row: 2;
  }

  @media (min-width: 700px) {
    .kit-content-over-media[style*='--com-layout-md: overlay'] {
      --_cols: 1fr min(var(--kit-page-width), 100%) 1fr;
      --_rows: 1fr;
      --_content-col: 2;
      --_content-row: 1;
      --_content-place: var(--com-place);
      --_content-align: var(--com-text-align);
      --_media-row: 1;
      --_overlay: '';
    }

    .kit-content-over-media[style*='--com-layout-md: stack-below'],
    .kit-content-over-media[style*='--com-layout-md: stack-above'] {
      --_cols: 1fr;
      --_rows: auto auto;
      --_content-col: 1;
      --_content-row: 2;
      --_content-place: auto;
      --_media-row: 1;
      --_overlay: none;
    }

    .kit-content-over-media[style*='--com-layout-md: stack-above'] {
      --_content-row: 1;
      --_media-row: 2;
    }

    .kit-content-over-media[style*='--com-place-md'] {
      --_content-place: var(--com-place-md);
      --_content-align: var(--com-text-align-md);
    }
  }

  @media (min-width: 1024px) {
    .kit-content-over-media[style*='--com-layout-lg: overlay'] {
      --_cols: 1fr min(var(--kit-page-width), 100%) 1fr;
      --_rows: 1fr;
      --_content-col: 2;
      --_content-row: 1;
      --_content-place: var(--com-place);
      --_content-align: var(--com-text-align);
      --_media-row: 1;
      --_overlay: '';
    }

    .kit-content-over-media[style*='--com-layout-lg: stack-below'],
    .kit-content-over-media[style*='--com-layout-lg: stack-above'] {
      --_cols: 1fr;
      --_rows: auto auto;
      --_content-col: 1;
      --_content-row: 2;
      --_content-place: auto;
      --_media-row: 1;
      --_overlay: none;
    }

    .kit-content-over-media[style*='--com-layout-lg: stack-above'] {
      --_content-row: 1;
      --_media-row: 2;
    }

    .kit-content-over-media[style*='--com-place-lg'] {
      --_content-place: var(--com-place-lg);
      --_content-align: var(--com-text-align-lg);
    }
  }

  @media (min-width: 1200px) {
    .kit-content-over-media[style*='--com-layout-xl: overlay'] {
      --_cols: 1fr min(var(--kit-page-width), 100%) 1fr;
      --_rows: 1fr;
      --_content-col: 2;
      --_content-row: 1;
      --_content-place: var(--com-place);
      --_content-align: var(--com-text-align);
      --_media-row: 1;
      --_overlay: '';
    }

    .kit-content-over-media[style*='--com-layout-xl: stack-below'],
    .kit-content-over-media[style*='--com-layout-xl: stack-above'] {
      --_cols: 1fr;
      --_rows: auto auto;
      --_content-col: 1;
      --_content-row: 2;
      --_content-place: auto;
      --_media-row: 1;
      --_overlay: none;
    }

    .kit-content-over-media[style*='--com-layout-xl: stack-above'] {
      --_content-row: 1;
      --_media-row: 2;
    }

    .kit-content-over-media[style*='--com-place-xl'] {
      --_content-place: var(--com-place-xl);
      --_content-align: var(--com-text-align-xl);
    }
  }
/* END_SNIPPET:kit.content-over-media */

/* START_SNIPPET:kit.image (INDEX:148) */
.kit-image {
    display: block;
    max-width: 100%;
    height: auto;
  }

  .kit-image--ratio {
    width: 100%;
  }

  .kit-image--fill {
    width: 100%;
    height: 100%;
  }
/* END_SNIPPET:kit.image */

/* START_SNIPPET:kit.placeholder (INDEX:150) */
.kit-placeholder {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .kit-placeholder svg {
    width: 100%;
    height: 100%;
    display: block;
  }

  .kit-placeholder--outline {
    fill: currentColor;
    opacity: 0.3;
  }
/* END_SNIPPET:kit.placeholder */

/* START_SNIPPET:kit.popover (INDEX:151) */
.kit-popover {
    position: absolute;
    inset: auto;
    margin: 0;
    padding: var(--kit-space-md);
    border: none;
    border-radius: var(--kit-radius-md);
    box-shadow: var(--kit-shadow-md);
    background-color: var(--kit-color-secondary);
    color: var(--kit-color-primary);
    font-family: var(--kit-font-family-body);
    font-size: var(--kit-font-size-base);
    line-height: var(--kit-body-line-height);
    letter-spacing: var(--kit-body-letter-spacing);
  }

  .kit-popover:popover-open {
    animation: kit-popover-show 150ms ease;
  }

  @keyframes kit-popover-show {
    from {
      opacity: 0;
      scale: 0.96;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .kit-popover:popover-open {
      animation: none;
    }
  }

  @media (forced-colors: active) {
    .kit-popover {
      border: solid 1px;
    }
  }
/* END_SNIPPET:kit.popover */

/* START_SNIPPET:kit.section (INDEX:152) */
.kit-section {
    width: 100%;
  }

  .kit-section__content {
    max-width: var(--kit-page-width);
    margin-inline: auto;
    padding-inline: var(--kit-section-gutter);
  }

  .kit-section--full-width > .kit-section__content {
    max-width: none;
    padding-inline: 0;
  }

  .kit-section--padding-top {
    padding-top: var(--kit-section-spacing);
  }

  .kit-section--padding-bottom {
    padding-bottom: var(--kit-section-spacing);
  }
/* END_SNIPPET:kit.section */

/* START_SNIPPET:kit.stack (INDEX:153) */
.kit-stack {
    display: flex;
    flex-direction: var(--stack-direction, column);
    gap: var(--stack-gap, 0);
    margin: 0;
    padding: 0;

    /* Break inheritance chain for nested stacks */
    --stack-direction: initial;
    --stack-direction-md: initial;
    --stack-direction-lg: initial;
    --stack-direction-xl: initial;
    --stack-gap: initial;
    --stack-gap-md: initial;
    --stack-gap-lg: initial;
    --stack-gap-xl: initial;
  }

  /* Wrap */
  .kit-stack--wrap {
    flex-wrap: wrap;
  }

  /* Align (cross-axis) */
  .kit-stack--align-start {
    align-items: flex-start;
  }

  .kit-stack--align-center {
    align-items: center;
  }

  .kit-stack--align-end {
    align-items: flex-end;
  }

  .kit-stack--align-stretch {
    align-items: stretch;
  }

  .kit-stack--align-baseline {
    align-items: baseline;
  }

  /* Justify (main-axis) */
  .kit-stack--justify-start {
    justify-content: flex-start;
  }

  .kit-stack--justify-center {
    justify-content: center;
  }

  .kit-stack--justify-end {
    justify-content: flex-end;
  }

  .kit-stack--justify-between {
    justify-content: space-between;
  }

  /* Responsive */
  @media (min-width: 700px) {
    .kit-stack[style*='--stack-direction-md'] {
      flex-direction: var(--stack-direction-md);
    }

    .kit-stack[style*='--stack-gap-md'] {
      gap: var(--stack-gap-md);
    }
  }

  @media (min-width: 1024px) {
    .kit-stack[style*='--stack-direction-lg'] {
      flex-direction: var(--stack-direction-lg);
    }

    .kit-stack[style*='--stack-gap-lg'] {
      gap: var(--stack-gap-lg);
    }
  }

  @media (min-width: 1200px) {
    .kit-stack[style*='--stack-direction-xl'] {
      flex-direction: var(--stack-direction-xl);
    }

    .kit-stack[style*='--stack-gap-xl'] {
      gap: var(--stack-gap-xl);
    }
  }
/* END_SNIPPET:kit.stack */

/* START_SNIPPET:kit.text (INDEX:154) */
.kit-text {
    font-family: inherit;
    font-size: var(--kit-font-size-base);
    font-weight: var(--kit-font-weight-normal);
    line-height: var(--kit-body-line-height);
    letter-spacing: var(--kit-body-letter-spacing);
    color: inherit;
    margin: 0;
  }

  /* Heading variants */
  .kit-text--heading-xl {
    font-family: var(--kit-font-family-heading);
    font-size: var(--kit-heading-font-size-xl);
    font-weight: var(--kit-heading-font-weight);
    line-height: var(--kit-heading-line-height);
    letter-spacing: var(--kit-heading-letter-spacing);
    text-transform: var(--kit-heading-text-transform);
  }

  .kit-text--heading-lg {
    font-family: var(--kit-font-family-heading);
    font-size: var(--kit-heading-font-size-lg);
    font-weight: var(--kit-heading-font-weight);
    line-height: var(--kit-heading-line-height);
    letter-spacing: var(--kit-heading-letter-spacing);
    text-transform: var(--kit-heading-text-transform);
  }

  .kit-text--heading-md {
    font-family: var(--kit-font-family-heading);
    font-size: var(--kit-heading-font-size-md);
    font-weight: var(--kit-heading-font-weight);
    line-height: var(--kit-heading-line-height);
    letter-spacing: var(--kit-heading-letter-spacing);
    text-transform: var(--kit-heading-text-transform);
  }

  .kit-text--heading-sm {
    font-family: var(--kit-font-family-heading);
    font-size: var(--kit-heading-font-size-sm);
    font-weight: var(--kit-heading-font-weight);
    line-height: var(--kit-heading-line-height);
    letter-spacing: var(--kit-heading-letter-spacing);
    text-transform: var(--kit-heading-text-transform);
  }

  /* Body variants */
  .kit-text--body-sm {
    font-size: var(--kit-font-size-sm);
  }

  .kit-text--caption {
    font-size: var(--kit-font-size-xs);
    color: color-mix(in srgb, var(--kit-color-primary) var(--kit-color-mix-text-subdued), var(--kit-color-secondary));
  }

  /* Alignment */
  .kit-text--align-start {
    text-align: start;
  }

  .kit-text--align-center {
    text-align: center;
  }

  .kit-text--align-end {
    text-align: end;
  }

  /* Utilities */
  .kit-text--balance {
    text-wrap: balance;
  }
/* END_SNIPPET:kit.text */

/* START_SNIPPET:kit.tokens (INDEX:155) */
@layer kit {
    :root {
      /* Base colors */
      --kit-color-primary: #000;
      --kit-color-secondary: #fff;
      --kit-color-tint: #000; /* for shadows, overlays, etc. */

      /* Absolute colors */
      --kit-color-focus: #4a9afc;
      --kit-color-border: initial; /* takes precedence over --kit-color-mix-border when set */
      --kit-color-links: currentColor;
      --kit-color-icons: currentColor;
      --kit-color-success: #16a34a;
      --kit-color-error: #dc2626;
      --kit-color-info: #3b82f6;
      --kit-color-warning: #f59e0b;
      --kit-color-sale: #980606;
      --kit-color-sale-contrast: #fff;
      --kit-color-sold-out: #000;
      --kit-color-sold-out-contrast: #fff;

      /* Primary/secondary: for color-mix(in srgb, var(--kit-color-primary) [%], var(--kit-color-secondary)); */
      --kit-color-mix-off-background: 4%;
      --kit-color-mix-border: 16%;
      --kit-color-mix-text-subdued: 60%;
      --kit-color-mix-hover: 12%;
      --kit-color-mix-active: 16%;
      --kit-color-mix-disabled: 8%;
      --kit-color-mix-on-disabled: 30%;

      /* Tint: for color-mix(in srgb, var(--kit-color-tint) [%], transparent) */
      --kit-color-mix-tint-shadow: 8%;
      --kit-color-mix-tint-overlay-light: 15%;
      --kit-color-mix-tint-overlay: 50%;

      /* Opacity */
      --kit-opacity-disabled: 0.5;

      /* Typography — Families */
      --kit-font-family-body: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
      --kit-font-family-heading: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

      /* Typography — Sizes (mobile-first) */
      --kit-font-size-xs: 0.75rem;
      --kit-font-size-sm: 0.75rem;
      --kit-font-size-base: 0.875rem;
      --kit-font-size-lg: 1rem;
      --kit-font-size-xl: 1.125rem;
      --kit-font-size-2xl: 1.25rem;
      --kit-font-size-3xl: 1.5rem;

      /* Typography — Weights */
      --kit-font-weight-normal: 400;
      --kit-font-weight-semibold: 600;
      --kit-font-weight-bold: 700;

      /* Typography — Heading sizes (mobile-first, independent from shared scale) */
      --kit-heading-font-size-sm: 1rem;
      --kit-heading-font-size-md: 1.125rem;
      --kit-heading-font-size-lg: 1.25rem;
      --kit-heading-font-size-xl: 1.5rem;

      /* Typography — Headings */
      --kit-heading-font-weight: 700;
      --kit-heading-line-height: 1.2;
      --kit-heading-letter-spacing: -0.025em;
      --kit-heading-text-transform: none;

      /* Typography — Body */
      --kit-body-font-style: normal;
      --kit-body-line-height: 1.5;
      --kit-body-letter-spacing: normal;

      /* Spacing */
      --kit-space-2xs: 0.25rem;
      --kit-space-xs: 0.5rem;
      --kit-space-sm: 0.75rem;
      --kit-space-md: 1rem;
      --kit-space-lg: 1.5rem;
      --kit-space-xl: 2rem;
      --kit-space-2xl: 3rem;

      /* Border radius */
      --kit-radius-sm: 0.25rem;
      --kit-radius-md: 0.5rem;
      --kit-radius-lg: 1rem;
      --kit-radius-full: 9999px;

      /* Shadows */
      --kit-shadow-inner: inset 0 0 0 1px
        color-mix(in srgb, var(--kit-color-tint) var(--kit-color-mix-tint-overlay-light), transparent);
      --kit-shadow-xs: 0 0.5px 0.5px 3px
        color-mix(in srgb, var(--kit-color-tint) var(--kit-color-mix-tint-shadow), transparent);
      --kit-shadow-sm: 0 1px 2px 0
        color-mix(in srgb, var(--kit-color-tint) var(--kit-color-mix-tint-shadow), transparent);
      --kit-shadow-md: 0 2px 4px -1px color-mix(in srgb, var(--kit-color-tint) var(--kit-color-mix-tint-shadow), transparent);
      --kit-shadow-lg: 0 8px 16px -4px color-mix(in srgb, var(--kit-color-tint) var(--kit-color-mix-tint-shadow), transparent);

      /* Transitions */
      --kit-transition-fast: 75ms ease;
      --kit-transition-normal: 150ms ease;
      --kit-transition-slow: 300ms ease;

      /* Focus */
      --kit-focus-ring: 2px solid var(--kit-color-focus);
      --kit-focus-ring-offset: 0;

      /* Icons */
      --kit-icon-stroke-width: 1px;

      /* Layout */
      --kit-page-width: 1500px;
      --kit-section-spacing: 2rem;
      --kit-section-gutter: var(--kit-space-md);
    }

    @media (min-width: 700px) {
      :root {
        --kit-font-size-sm: 0.875rem;
        --kit-font-size-base: 1rem;
        --kit-font-size-lg: 1.125rem;
        --kit-font-size-xl: 1.25rem;
        --kit-font-size-2xl: 1.5rem;
        --kit-font-size-3xl: 1.875rem;

        --kit-heading-font-size-sm: 1.125rem;
        --kit-heading-font-size-md: 1.25rem;
        --kit-heading-font-size-lg: 1.5rem;
        --kit-heading-font-size-xl: 1.875rem;
      }
    }

    /* Global focus style for kit interactive elements */
    [class^='kit-']:focus-visible,
    [class*=' kit-']:focus-visible {
      outline: var(--kit-focus-ring);
      outline-offset: var(--kit-focus-ring-offset);
    }
  }
/* END_SNIPPET:kit.tokens */

/* START_SNIPPET:layout.grid (INDEX:157) */
/* Public Layout Grid Tokens */
  :root {
    /* Layout Grid Gap Sizes - These are assigned by the value passed to the 'gap' param */
    --layout-grid-gap-size-none: 0px;
    --layout-grid-gap-size-3xs: var(--gap-size-3xs);
    --layout-grid-gap-size-2xs: var(--gap-size-2xs);
    --layout-grid-gap-size-xs: var(--gap-size-xs);
    --layout-grid-gap-size-sm: var(--gap-size-sm);
    --layout-grid-gap-size-md: var(--gap-size-md);
    --layout-grid-gap-size-lg: var(--gap-size-lg);
    --layout-grid-gap-size-xl: var(--gap-size-xl);
    --layout-grid-gap-size-2xl: var(--gap-size-2xl);

    /* Layout Grid Line Sizes - These are assigned by the value passed to the 'lines' param */
    --layout-grid-line-size-none: 0px;
    --layout-grid-line-size-xs: var(--line-size-xs);
    --layout-grid-line-size-sm: var(--line-size-sm);
    --layout-grid-line-size-md: var(--line-size-md);
    --layout-grid-line-size-lg: var(--line-size-lg);
    --layout-grid-line-size-xl: var(--line-size-xl);

    --layout-grid-line-color-shade: 12%;
  }
/* END_SNIPPET:layout.grid */

/* START_SNIPPET:layout.section (INDEX:158) */
:root {
    --layout-section-max-inline-size: var(--page-width, 1500px);

    --layout-section-padding-inline: var(--size-4);
    --layout-section-padding-inline--xs: initial;
    --layout-section-padding-inline--sm: initial;
    --layout-section-padding-inline--md: initial;
    --layout-section-padding-inline--lg: initial;
    --layout-section-padding-inline--xl: initial;

    --layout-section-padding-block: var(--size-8);
    --layout-section-padding-block--xs: initial;
    --layout-section-padding-block--sm: initial;
    --layout-section-padding-block--md: initial;
    --layout-section-padding-block--lg: initial;
    --layout-section-padding-block--xl: initial;

    --layout-section-color: initial;
    --layout-section-background: initial;
  }

  .layout-section {
    --_max-inline-size: var(--layout-section-max-inline-size);

    --_padding-inline--xs: var(--layout-section-padding-inline--xs, var(--layout-section-padding-inline));
    --_padding-inline--sm: var(--layout-section-padding-inline--sm, var(--_padding-inline--xs));
    --_padding-inline--md: var(--layout-section-padding-inline--md, var(--_padding-inline--sm));
    --_padding-inline--lg: var(--layout-section-padding-inline--lg, var(--_padding-inline--md));
    --_padding-inline--xl: var(--layout-section-padding-inline--xl, var(--_padding-inline--lg));
    --_padding-inline: var(--_padding-inline--xs);

    --_padding-block--xs: var(--layout-section-padding-block--xs, var(--layout-section-padding-block));
    --_padding-block--sm: var(--layout-section-padding-block--sm, var(--_padding-block--xs));
    --_padding-block--md: var(--layout-section-padding-block--md, var(--_padding-block--sm));
    --_padding-block--lg: var(--layout-section-padding-block--lg, var(--_padding-block--md));
    --_padding-block--xl: var(--layout-section-padding-block--xl, var(--_padding-block--lg));
    --_padding-block: var(--_padding-block--xs);

    --_color: var(--layout-section-color, var(--color-primary, #000));
    --_background: var(--layout-section-background, var(--color-secondary, #fff));

    display: flex;
    width: 100%;
    position: relative;
    justify-content: center;
    background: var(--_background);
    color: var(--_color);
    padding-inline: var(--_padding-inline);
    padding-block: var(--_padding-block);

    & > .layout-section__content {
      display: block;
      max-inline-size: var(--_max-inline-size);
      z-index: 1;
      width: 100%;
      flex-grow: 1;
    }

    &.layout-section--full-width > .layout-section__content {
      max-inline-size: 100%;
    }

    &.layout-section--padding-none {
      padding-block: 0;
    }

    &.layout-section--padding-top {
      padding-block-end: 0;
    }

    &.layout-section--padding-bottom {
      padding-block-start: 0;
    }
  }
/* END_SNIPPET:layout.section */

/* START_SNIPPET:layout.stack (INDEX:159) */
/* Public Layout Stack Tokens */
  :root {
    /* Layout Stack Gap Sizes - These are assigned by the value passed to the 'gap' param */
    --layout-stack-gap-size-none: 0px;
    --layout-stack-gap-size-3xs: var(--gap-size-3xs);
    --layout-stack-gap-size-2xs: var(--gap-size-2xs);
    --layout-stack-gap-size-xs: var(--gap-size-xs);
    --layout-stack-gap-size-sm: var(--gap-size-sm);
    --layout-stack-gap-size-md: var(--gap-size-md);
    --layout-stack-gap-size-lg: var(--gap-size-lg);
    --layout-stack-gap-size-xl: var(--gap-size-xl);
    --layout-stack-gap-size-2xl: var(--gap-size-2xl);

    /* Layout Stack Default Layout */
    --layout-stack-margin: 0;
  }
/* END_SNIPPET:layout.stack */

/* START_SNIPPET:layout.sticky-scroller (INDEX:160) */
:root {
    --layout-sticky-scroller-top: 20px;
  }

	sticky-scroller {
	  --_top: var(--layout-sticky-scroller-top);
	
	  display: block;
	  position: sticky;
	  top: var(--_top);
	}
/* END_SNIPPET:layout.sticky-scroller */

/* START_SNIPPET:overlay.drawer (INDEX:176) */
:root {
  --overlay-drawer-size: 480px;
  --overlay-drawer-gutter: var(--gap-size-none); /* better name? */
  --overlay-drawer-label-margin-bottom: var(--size-4);

  --overlay-drawer-padding-inline: var(--size-4);
  --overlay-drawer-padding-inline--xs: initial;
  --overlay-drawer-padding-inline--sm: initial;
  --overlay-drawer-padding-inline--md: initial;
  --overlay-drawer-padding-inline--lg: initial;
  --overlay-drawer-padding-inline--xl: initial;

  --overlay-drawer-padding-block: var(--size-8);
  --overlay-drawer-padding-block--xs: initial;
  --overlay-drawer-padding-block--sm: initial;
  --overlay-drawer-padding-block--md: initial;
  --overlay-drawer-padding-block--lg: initial;
  --overlay-drawer-padding-block--xl: initial;

  --overlay-drawer-background: initial;
  --overlay-drawer-overlay-color: rgba(0, 0, 0, 0.5);

  --overlay-drawer-z-index: 9999;
  --overlay-drawer-transition-duration: 0.3s;
  --overlay-drawer-transition-timing-function: ease-in-out;
}

/* Scroll lock when drawer is open */
body:has(.overlay-drawer[open='true']) {
  overflow: hidden;
}

.overlay-drawer {
  --_width: calc(100% - var(--overlay-drawer-gutter));
  --_max-width: var(--overlay-drawer-size);

  --_padding-inline--xs: var(--overlay-drawer-padding-inline--xs, var(--overlay-drawer-padding-inline));
  --_padding-inline--sm: var(--overlay-drawer-padding-inline--sm, var(--_padding-inline--xs));
  --_padding-inline--md: var(--overlay-drawer-padding-inline--md, var(--_padding-inline--sm));
  --_padding-inline--lg: var(--overlay-drawer-padding-inline--lg, var(--_padding-inline--md));
  --_padding-inline--xl: var(--overlay-drawer-padding-inline--xl, var(--_padding-inline--lg));
  --_padding-inline: var(--_padding-inline--xs);

  --_padding-block--xs: var(--overlay-drawer-padding-block--xs, var(--overlay-drawer-padding-block));
  --_padding-block--sm: var(--overlay-drawer-padding-block--sm, var(--_padding-block--xs));
  --_padding-block--md: var(--overlay-drawer-padding-block--md, var(--_padding-block--sm));
  --_padding-block--lg: var(--overlay-drawer-padding-block--lg, var(--_padding-block--md));
  --_padding-block--xl: var(--overlay-drawer-padding-block--xl, var(--_padding-block--lg));
  --_padding-block: var(--_padding-block--xs);

  --_background: var(--overlay-drawer-background, var(--color-secondary, #fff));

  display: block;
  position: fixed;
  inset: 0;
  height: 100%;
  width: 100%;
  transition-property: background-color;
  transition-duration: var(--overlay-drawer-transition-duration);
  transition-timing-function: var(--overlay-drawer-transition-timing-function);
  cursor: pointer;
  z-index: var(--overlay-drawer-z-index);

  &[open='false'] {
    pointer-events: none;
  }

  &[open='true'] {
    background-color: var(--overlay-drawer-overlay-color);
  }
}

.overlay-drawer__inner {
  background: var(--_background);
  cursor: initial;
  position: absolute;
  width: var(--_width);
  max-width: var(--_max-width);
  top: 0;
  transition-property: transform;
  transition-duration: var(--overlay-drawer-transition-duration);
  transition-timing-function: var(--overlay-drawer-transition-timing-function);
  height: 100%;
  overflow-y: auto;
  padding-inline: var(--_padding-inline);
  padding-block: var(--_padding-block);

  .overlay-drawer--start & {
    left: max(calc(-1 * var(--_width)), calc(-1 * var(--_max-width)));
  }

  .overlay-drawer--start[open='true'] & {
    transform: translateX(100%);
  }

  .overlay-drawer--end & {
    right: max(calc(-1 * var(--_width)), calc(-1 * var(--_max-width)));
  }

  .overlay-drawer--end[open='true'] & {
    transform: translateX(-100%);
  }
}

.overlay-drawer__header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-block-end: var(--overlay-drawer-label-margin-bottom);

  &:has(.overlay-drawer__label) {
    justify-content: space-between;
  }
}

.overlay-drawer__close-button {
  line-height: 0;
}
/* END_SNIPPET:overlay.drawer */

/* START_SNIPPET:overlay.lightbox (INDEX:177) */
overlay-lightbox {
    display: contents;
  }

  .overlay-lightbox__trigger {
    display: contents;
    cursor: pointer;
  }

  .overlay-lightbox__overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.95);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
  }

  .overlay-lightbox__overlay--open {
    opacity: 1;
    visibility: visible;
  }

  .overlay-lightbox__content {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .overlay-lightbox__content img {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  .overlay-lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }

  .overlay-lightbox__nav--prev {
    left: 1rem;
  }

  .overlay-lightbox__nav--next {
    right: 1rem;
  }

  /* Hide navigation buttons when there's only one item in the group */
  .overlay-lightbox__overlay--single-item .overlay-lightbox__nav {
    display: none;
  }

  .lightbox-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
  }
/* END_SNIPPET:overlay.lightbox */

/* START_SNIPPET:product.hot-reload (INDEX:189) */
product-hot-reload {
    contain: layout style paint;
  }

  .product-hot-reload--loading {
    opacity: 0.6;
    animation: pulse 1.5s ease-in-out infinite;
  }

  @keyframes pulse {
    0%, 100% { 
      opacity: 1;
    }
    50% { 
      opacity: 0.6;
    }
  }

  /* View Transitions API support */
  @supports (view-transition-name: none) {
    product-hot-reload {
      view-transition-name: product-content;
    }
  }
/* END_SNIPPET:product.hot-reload */

/* START_SNIPPET:section.flex-pdp.gift-recipient (INDEX:208) */
gift-recipient-form {
	  display: block;
	  position: relative;
	
	  & .recipient-fields {
	    display: none;
	  }
	}
/* END_SNIPPET:section.flex-pdp.gift-recipient */

/* START_SNIPPET:section.flex-pdp.media-gallery (INDEX:212) */
.media-gallery {
    --media-gallery-thumb-size: 80px;
    --media-gallery-thumb-gap: var(--gap-size-xs);

    display: block;
    position: relative;
    overflow: hidden;
  }

  .media-gallery__main {
    position: relative;
    width: 100%;
    flex: 1;
    overflow: hidden;
    min-height: 400px;
    aspect-ratio: 1;
    touch-action: pan-y pinch-zoom;
    transition: height 0.3s ease-in-out;
  }

  /* Disable transition when setting height programmatically */
  .media-gallery__main--no-transition {
    transition: none;
  }

  .media-gallery__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    opacity: 0.7;
    transition: opacity 0.2s ease;
  }

  .media-gallery__main:hover .media-gallery__nav {
    opacity: 1;
  }

  .media-gallery__nav--prev {
    left: var(--gap-size-sm);
  }

  .media-gallery__nav--next {
    right: var(--gap-size-sm);
  }

  .media-gallery__nav:focus-visible {
    opacity: 1;
  }

  .media-gallery__slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 1;
  }

  .media-gallery__slide--is-animating {
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
  }

  .media-gallery__slide--active {
    opacity: 1;
    transform: translateX(0);
    z-index: 2;
  }

  .media-gallery__slide--prev {
    transform: translateX(-100%);
  }

  .media-gallery__slide--next {
    transform: translateX(100%);
  }

  .media-gallery__slide img:not(.overlay-lightbox__overlay img) {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .media-gallery__thumbnails {
    display: block;
    width: fit-content;
    max-width: 100%;

    max-height: 650px;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
  }

  .media-gallery__thumbnails--top,
  .media-gallery__thumbnails--bottom {
    overflow-x: auto;
  }

  .media-gallery__thumbnails--left,
  .media-gallery__thumbnails--right {
    overflow-y: auto;
  }

  /* Webkit scrollbar styling */
  .media-gallery__thumbnails::-webkit-scrollbar {
    height: 4px;
    width: 4px;
  }

  .media-gallery__thumbnails::-webkit-scrollbar-track {
    background: transparent;
  }

  .media-gallery__thumbnails::-webkit-scrollbar-thumb {
    background: var(--color-border);
  }

  .media-gallery__thumbnails::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-muted);
  }

  .media-gallery__thumb {
    position: relative;
    border: 2px solid transparent;
    background: none;
    padding: 0;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.2s ease;
    flex-shrink: 0;
    width: var(--media-gallery-thumb-size);
    height: var(--media-gallery-thumb-size);
  }

  .media-gallery__thumb--active {
    border-color: var(--color-primary);
  }

  .media-gallery__thumb:hover {
    border-color: var(--color-primary);
    opacity: 0.8;
  }

  .media-gallery__thumb:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
  }

  .media-gallery__thumb-image {
    position: relative;
    width: 100%;
    max-width: var(--media-gallery-thumb-size);
    max-height: var(--media-gallery-thumb-size);
    height: var(--media-gallery-thumb-size);
    aspect-ratio: 1;
  }

  .media-gallery__thumb-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .media-gallery__thumb-icon {
    display: flex;
    position: absolute;
    top: var(--gap-size-2xs);
    right: var(--gap-size-2xs);
    background: var(--color-primary);
    color: var(--color-secondary);
    border-radius: 0;
    padding: var(--gap-size-2xs);
    z-index: 1;
  }

  .media-gallery__thumb-icon .element-icon {
    width: 12px;
    height: 12px;
  }


  .media-gallery .shopify-model-viewer-ui,
  .media-gallery .shopify-model-viewer-ui model-viewer {
      width: 100%;
      height: 100%;
  }

  /* Responsive adjustments */
  @media (max-width: 768px) {
    .media-gallery__main {
      min-height: 300px;
    }


    .media-gallery__nav {
      opacity: 1;
    }
  }
/* END_SNIPPET:section.flex-pdp.media-gallery */

/* START_SNIPPET:section.flex-pdp.media-grid (INDEX:213) */
.media-grid {
    overflow-x: auto;
    overflow-y: hidden;
  }

  .media-grid__container {
    min-width: 350px;
    flex: 1 1 300px;

    & img:not(.overlay-lightbox__overlay img) {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .media-grid .shopify-model-viewer-ui,
  .media-grid .shopify-model-viewer-ui model-viewer {
    width: 100%;
    height: 100%;
  }
/* END_SNIPPET:section.flex-pdp.media-grid */

/* START_SNIPPET:section.flex-pdp.pick-up (INDEX:214) */
.element-icon-in-stock {
	  fill: var(--success-green, #56ad6a);
	}
	
	.element-icon-out-of-stock {
	  fill: var(--color-error, #ba4444);
	}

	.element-text__store-address p {
	  margin: 0;
	}
/* END_SNIPPET:section.flex-pdp.pick-up */

/* START_SNIPPET:style.normalize (INDEX:227) */
/*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */

  /*
  Document
  ========
  */

  /**
  Use a better box model (opinionated).
  */

  *,
  ::before,
  ::after {
    box-sizing: border-box;
  }

  /**
  1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
  2. Correct the line height in all browsers.
  3. Prevent adjustments of font size after orientation changes in iOS.
  4. Use a more readable tab size (opinionated).
  */

  html {
    font-family:
      system-ui,
      'Segoe UI',
      Roboto,
      Helvetica,
      Arial,
      sans-serif,
      'Apple Color Emoji',
      'Segoe UI Emoji'; /* 1 */
    line-height: 1.15; /* 2 */
    -webkit-text-size-adjust: 100%; /* 3 */
    tab-size: 4; /* 4 */
  }

  /*
  Sections
  ========
  */

  /**
  Remove the margin in all browsers.
  */

  body {
    margin: 0;
  }

  /*
  Text-level semantics
  ====================
  */

  /**
  Add the correct font weight in Chrome and Safari.
  */

  b,
  strong {
    font-weight: bolder;
  }

  /**
  1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
  2. Correct the odd 'em' font sizing in all browsers.
  */

  code,
  kbd,
  samp,
  pre {
    font-family:
      ui-monospace,
      SFMono-Regular,
      Consolas,
      'Liberation Mono',
      Menlo,
      monospace; /* 1 */
    font-size: 1em; /* 2 */
  }

  /**
  Add the correct font size in all browsers.
  */

  small {
    font-size: 80%;
  }

  /**
  Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
  */

  sub,
  sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }

  sub {
    bottom: -0.25em;
  }

  sup {
    top: -0.5em;
  }

  /*
  Tabular data
  ============
  */

  /**
  Correct table border color inheritance in Chrome and Safari. (https://issues.chromium.org/issues/40615503, https://bugs.webkit.org/show_bug.cgi?id=195016)
  */

  table {
    border-color: currentcolor;
  }

  /*
  Forms
  =====
  */

  /**
  1. Change the font styles in all browsers.
  2. Remove the margin in Firefox and Safari.
  */

  button,
  input,
  optgroup,
  select,
  textarea {
    font-family: inherit; /* 1 */
    font-size: 100%; /* 1 */
    line-height: 1.15; /* 1 */
    margin: 0; /* 2 */
  }

  /**
  Correct the inability to style clickable types in iOS and Safari.
  */

  button,
  [type='button'],
  [type='reset'],
  [type='submit'] {
    -webkit-appearance: button;
  }

  /**
  Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
  */

  legend {
    padding: 0;
  }

  /**
  Add the correct vertical alignment in Chrome and Firefox.
  */

  progress {
    vertical-align: baseline;
  }

  /**
  Correct the cursor style of increment and decrement buttons in Safari.
  */

  ::-webkit-inner-spin-button,
  ::-webkit-outer-spin-button {
    height: auto;
  }

  /**
  1. Correct the odd appearance in Chrome and Safari.
  2. Correct the outline style in Safari.
  */

  [type='search'] {
    -webkit-appearance: textfield; /* 1 */
    outline-offset: -2px; /* 2 */
  }

  /**
  Remove the inner padding in Chrome and Safari on macOS.
  */

  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  /**
  1. Correct the inability to style clickable types in iOS and Safari.
  2. Change font properties to 'inherit' in Safari.
  */

  ::-webkit-file-upload-button {
    -webkit-appearance: button; /* 1 */
    font: inherit; /* 2 */
  }

  /*
  Interactive
  ===========
  */

  /*
  Add the correct display in Chrome and Safari.
  */

  summary {
    display: list-item;
  }
/* END_SNIPPET:style.normalize */

/* START_SNIPPET:style.primitive-tokens (INDEX:228) */
:root {
    /* Core Sizes */
    --size-0-25: 0.0625rem; /* 1px */
    --size-0-5: 0.125rem; /* 2px */
    --size-1: 0.25rem; /* 4px */
    --size-1-5: 0.375rem; /* 6px */
    --size-2: 0.5rem; /* 8px */
    --size-2-5: 0.625rem; /* 10px */
    --size-3: 0.75rem; /* 12px */
    --size-3-5: 0.875rem; /* 14px */
    --size-4: 1rem; /* 16px */
    --size-4-5: 1.125rem; /* 18px */
    --size-5: 1.25rem; /* 20px */
    --size-5-5: 1.375rem; /* 22px */
    --size-6: 1.5rem; /* 24px */
    --size-6-5: 1.625rem; /* 26px */
    --size-7: 1.75rem; /* 28px */
    --size-7-5: 1.875rem; /* 30px */
    --size-8: 2rem; /* 32px */
    --size-8-5: 2.125rem; /* 34px */
    --size-9: 2.25rem; /* 36px */
    --size-9-5: 2.375rem; /* 38px */
    --size-10: 2.5rem; /* 40px */
    --size-11: 2.75rem; /* 44px */
    --size-12: 3rem; /* 48px */
    --size-14: 3.5rem; /* 56px */
    --size-16: 4rem; /* 64px */
    --size-18: 4.5rem; /* 72px */
    --size-20: 5rem; /* 80px */
    --size-24: 6rem; /* 96px */
    --size-28: 7rem; /* 112px */
    --size-32: 8rem; /* 128px */

    /* Text Sizes */
    --text-size-2: 0.5rem; /* 8px */
    --text-size-2-5: 0.625rem; /* 10px */
    --text-size-3: 0.75rem; /* 12px */
    --text-size-3-5: 0.875rem; /* 14px */
    --text-size-4: 1rem; /* 16px */
    --text-size-4-5: 1.125rem; /* 18px */
    --text-size-5: 1.25rem; /* 20px */
    --text-size-5-5: 1.375rem; /* 22px */
    --text-size-6: 1.5rem; /* 24px */
    --text-size-6-5: 1.625rem; /* 26px */
    --text-size-7: 1.75rem; /* 28px */
    --text-size-7-5: 1.875rem; /* 30px */
    --text-size-8: 2rem; /* 32px */
    --text-size-8-5: 2.125rem; /* 34px */
    --text-size-9: 2.25rem; /* 36px */
    --text-size-9-5: 2.375rem; /* 38px */
    --text-size-10: 2.5rem; /* 40px */
    --text-size-11: 2.75rem; /* 44px */
    --text-size-12: 3rem; /* 48px */
    --text-size-14: 3.5rem; /* 56px */
    --text-size-16: 4rem; /* 64px */
    --text-size-18: 4.5rem; /* 72px */
    --text-size-20: 5rem; /* 80px */
    --text-size-24: 6rem; /* 96px */
    --text-size-28: 7rem; /* 112px */
    --text-size-32: 8rem; /* 128px */

    /* Line */
    --line-size-none: 0px;
    --line-size-xs: 0.5px;
    --line-size-sm: 1px;
    --line-size-md: 2px;
    --line-size-lg: 4px;
    --line-size-xl: 8px;

    /* Gap */
    --gap-size-none: 0px;
    --gap-size-3xs: var(--size-0-5);
    --gap-size-2xs: var(--size-1);
    --gap-size-xs: var(--size-2);
    --gap-size-sm: var(--size-4);
    --gap-size-md: var(--size-8);
    --gap-size-lg: var(--size-12);
    --gap-size-xl: var(--size-16);
    --gap-size-2xl: var(--size-24);

    /* Radius */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-2xl: 32px;
    --radius-none: 0px;
    --radius-full: 999px;

    /* Dropshadow */
    --shadow-none: 0px 0px 0px 0px rgba(0, 0, 0, 0);
    --shadow-sm: 0px 1px 2px 0px rgba(0, 0, 0, 0.08);
    --shadow-md: 0px 2px 4px -1px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0px 8px 16px -4px rgba(0, 0, 0, 0.08);
    --shadow-xl: 0px 16px 32px -6px rgba(0, 0, 0, 0.12);
    --shadow-2xl: 0px 16px 64px -12px rgba(0, 0, 0, 0.22);

    /* Font Weights */
    --font-weight-100: 100;
    --font-weight-200: 200;
    --font-weight-300: 300;
    --font-weight-400: 400;
    --font-weight-500: 500;
    --font-weight-600: 600;
    --font-weight-700: 700;
    --font-weight-800: 800;
    --font-weight-900: 900;

    /* Letter Spacings */
    --letter-space-2xs: -0.05em;
    --letter-space-xs: -0.03em;
    --letter-space-sm: -0.015em;
    --letter-space-md: 0em;
    --letter-space-lg: 0.015em;
    --letter-space-xl: 0.03em;
    --letter-space-2xl: 0.05em;
    --letter-space-3xl: 0.08em;
    --letter-space-4xl: 0.12em;

    /* Line Heights */
    --line-height-2xs: 0.9;
    --line-height-xs: 1;
    --line-height-sm: 1.1;
    --line-height-md: 1.2;
    --line-height-lg: 1.5;
    --line-height-xl: 1.7;
    --line-height-2xl: 2;

    /* Color Shades */
    --shade-0: 0%;
    --shade-4: 4%;
    --shade-8: 8%;
    --shade-12: 12%;
    --shade-16: 16%;
    --shade-20: 20%;
    --shade-30: 30%;
    --shade-40: 40%;
    --shade-50: 50%;
    --shade-60: 60%;
    --shade-70: 70%;
    --shade-80: 80%;
    --shade-90: 90%;
    --shade-100: 100%;
  }
/* END_SNIPPET:style.primitive-tokens */

/* START_SNIPPET:utility.color-scheme-texture (INDEX:238) */
.scheme-image,
	.scheme-darken,
	.scheme-squiggle,
	.scheme-swirl,
	.scheme-dots,
	.scheme-notebook,
	.scheme-wave,
	.scheme-minimal-wave,
	.scheme-plants,
	.scheme-cold-blur,
	.scheme-warm-blur,
	.scheme-custom-texture-1,
	.scheme-custom-texture-2,
	.scheme-custom-texture-3 {
	  position: absolute;
	  width: 100%;
	  height: 100%;
	  top: 0;
	  left: 0;
	  z-index: 0;
	}
	
	[data-animate].scheme-image {
	  object-fit: cover;
	  pointer-events: none;
	  mix-blend-mode: multiply;
	  opacity: 1;
	
	  /*Specific styles on some textures*/
	
	  &[data-texture='space.jpg'] {
	    mix-blend-mode: screen;
	  }
	}
	
	[data-animate].scheme-texture--linen,
	[data-animate].scheme-texture--sand,
	[data-animate].scheme-texture--stone,
	[data-animate].scheme-texture--wildflower {
	  opacity: 0.24;
	}
	
	/*Darken is CSS, not image*/
	.scheme-darken {
	  --z-index-overlay: 1;
	  z-index: 1;
	  pointer-events: none;
	
	  &:after {
	    background-color: rgba(0, 0, 0, 0.027);
	    pointer-events: none;
	  }
	}
	
	/*
	  SVG images as backgrounds
	    - larger images are cached external assets that are only loaded when used
	 */
	.scheme-swirl {
	  background-image: url(swirl.svg);
	  opacity: 0.12;
	}
	
	.scheme-squiggle {
	  background: url("data:image/svg+xml,%3Csvg width='150' height='75' viewBox='0 0 52 26' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.17'%3E%3Cpath d='M10 10c0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6h2c0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4v2c-3.314 0-6-2.686-6-6 0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6zm25.464-1.95l8.486 8.486-1.414 1.414-8.486-8.486 1.414-1.414z' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
	}
	
	.scheme-dots {
	  background-image: radial-gradient(rgba(0, 0, 0, 0.15) 0.5px, transparent 2px);
	  background-size: 16px 16px;
	}
	
	.scheme-notebook {
	  background-image: url(notebook.svg);
	  opacity: 0.5;
	}
	
	.scheme-wave {
	  background-image: url(wave.svg);
	  background-size: cover;
	  opacity: 0.5;
	}
	
	.scheme-minimal-wave {
	  background-image: url(minimal-wave.svg);
	  opacity: 0.5;
	  background-size: cover;
	}
	
	.scheme-plants {
	  background-image: url(plants.svg);
	  background-size: cover;
	}
	
	.scheme-cold-blur {
	  background-image: url(cold-blur.svg);
	  background-size: cover;
	}
	
	.scheme-warm-blur {
	  background-image: url(warm-blur.svg);
	  background-size: cover;
	}
	
	.scheme-custom-texture-1 {
	  background-image: url(custom-texture-1.svg);
	  background-size: cover;
	}
	
	.scheme-custom-texture-2 {
	  background-image: url(custom-texture-2.svg);
	  background-size: cover;
	}
	
	.scheme-custom-texture-3 {
	  background-image: url(custom-texture-3.svg);
	  background-size: cover;
	}
/* END_SNIPPET:utility.color-scheme-texture */