/** Shopify CDN: Minification failed

Line 389:2 Unexpected "}"

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:404 (INDEX:0) */
.error-page {
    text-align: center;
    padding: 4rem max(var(--page-margin), 1.25rem);
  }
  .error-page__title {
    font-size: clamp(2.5rem, 8vw, 5rem);
    color: var(--color-accent);
  }
  .error-page__text {
    margin: 1rem 0 1.5rem;
  }
  .error-page__link {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background-color: var(--color-accent);
    color: var(--color-foreground);
    text-decoration: none;
    border-radius: var(--style-border-radius-inputs);
  }
/* END_SECTION:404 */

/* START_SECTION:announcement-bar (INDEX:1) */
.announcement-bar {
    background-color: var(--color-accent);
    color: var(--color-foreground);
    text-align: center;
    padding: 0.6rem max(var(--page-margin), 1.25rem);
    font-size: 0.85rem;
  }
  .announcement-bar a {
    color: inherit;
    text-decoration: none;
  }
  .announcement-bar p {
    margin: 0;
  }
/* END_SECTION:announcement-bar */

/* START_SECTION:article (INDEX:2) */
.page {
    max-width: 50rem;
    margin: 0 auto;
    padding: 2rem max(var(--page-margin), 1.25rem);
  }
  .page__title {
    text-align: center;
    margin: 1rem 0 1.5rem;
  }
  .article__back-link {
    display: inline-block;
    margin-bottom: 1.5rem;
    color: var(--color-foreground);
    text-decoration: none;
  }
  .article__back-link:hover {
    text-decoration: underline;
  }
  .article__image {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--style-border-radius-inputs);
    background-color: color-mix(in srgb, var(--color-foreground) 4%, transparent);
  }
  .article__image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .prose p {
    margin-bottom: 1em;
    line-height: 1.6;
  }
  .article__comment {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-foreground);
  }
  .article__comment-author {
    font-weight: bold;
  }
  .article__comment-date {
    font-size: 0.85rem;
    color: var(--color-foreground);
  }
  .contact-form__field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 1rem;
  }
  .contact-form__field input,
  .contact-form__field textarea {
    padding: 0.6rem;
    border: 1px solid var(--color-foreground);
    border-radius: var(--style-border-radius-inputs);
    font: inherit;
  }
  button[type="submit"] {
    padding: 0.75rem 1.75rem;
    background-color: var(--color-accent);
    color: var(--color-foreground);
    border: none;
    border-radius: var(--style-border-radius-inputs);
    cursor: pointer;
  }
/* END_SECTION:article */

/* START_SECTION:blog (INDEX:3) */
.blog-gallery {
    padding: 2rem max(var(--page-margin), 1.25rem);
  }
  .blog-gallery__title {
    text-align: center;
    margin-bottom: 2rem;
  }
  .blog-gallery__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
  .blog-gallery__item {
    display: block;
    color: var(--color-foreground);
    text-decoration: none;
  }
  .blog-gallery__item-image {
    aspect-ratio: 1 / 1;
    overflow: hidden;
  }
  .blog-gallery__item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
  }
  .blog-gallery__item:hover .blog-gallery__item-image img {
    transform: scale(1.05);
  }
  .blog-gallery__item-title {
    margin-top: 0.5rem;
  }

  @media screen and (min-width: 750px) {
    .blog-gallery__grid {
      grid-template-columns: repeat(4, 1fr);
    }
  }
/* END_SECTION:blog */

/* START_SECTION:cart-drawer (INDEX:4) */
.cart-drawer a {
    text-decoration: none;
    color: inherit;
  }
  .cart-drawer[open] {
    position: fixed;
    inset: 0 0 0 auto;
    height: 100%;
    max-height: 100%;
    width: min(28rem, 100%);
    margin: 0;
    border: none;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    background-color: var(--color-background);
    color: var(--color-foreground);
    transform: translateX(0);
    transition: transform 0.25s ease, display 0.25s allow-discrete, overlay 0.25s allow-discrete;
  }
  @starting-style {
    .cart-drawer[open] {
      transform: translateX(100%);
    }
  }
  .cart-drawer::backdrop {
    background: rgb(0 0 0 / 40%);
    transition: background-color 0.25s ease;
  }
  .cart-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
  }
  .cart-drawer__close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
  }
  .cart-drawer__items {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    flex: 1;
  }
  .cart-drawer__item {
    display: grid;
    grid-template-columns: 5rem 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
  }
  .cart-drawer__item-variant,
  .cart-drawer__item-property {
    font-size: 0.85rem;
    color: var(--color-foreground);
  }
  .cart-drawer__item-price {
    color: var(--color-foreground);
    font-weight: bold;
  }
  .cart-drawer__item-content form {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
  }
  .cart-drawer__item-content input[type="number"] {
    width: 4rem;
    padding: 0.3rem;
    border: 1px solid var(--color-foreground);
    border-radius: var(--style-border-radius-inputs);
  }
  .cart-drawer__footer {
    border-top: 1px solid var(--color-foreground);
    padding-top: 1rem;
  }
  .cart-drawer__subtotal {
    font-weight: bold;
    margin-bottom: 1rem;
  }
  .cart-drawer__view-cart,
  .cart-drawer__checkout {
    display: block;
    width: 100%;
    text-align: center;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    border-radius: var(--style-border-radius-inputs);
    font: inherit;
    cursor: pointer;
  }
  .cart-drawer__view-cart {
    border: 1px solid var(--color-foreground);
    background: none;
    color: var(--color-foreground);
  }
  .cart-drawer__checkout {
    border: none;
    background-color: var(--color-accent);
    color: var(--color-foreground);
  }
  .cart-drawer__express-checkout {
    margin-top: 0.75rem;
  }
/* END_SECTION:cart-drawer */

/* START_SECTION:cart (INDEX:5) */
.cart-page {
    max-width: 50rem;
    margin: 0 auto;
    padding: 2rem max(var(--page-margin), 1.25rem);
  }
  .cart-page__title {
    text-align: center;
    margin-bottom: 1.5rem;
  }
  .cart-page__empty {
    text-align: center;
    margin-bottom: 1rem;
  }
  .cart-page__continue-link {
    display: block;
    width: fit-content;
    margin: 0 auto;
    padding: 0.75rem 1.5rem;
    background-color: var(--color-accent);
    color: var(--color-foreground);
    text-decoration: none;
    border-radius: var(--style-border-radius-inputs);
  }
  .cart-page__items {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
  }
  .cart-page__item {
    display: grid;
    grid-template-columns: 6rem 1fr;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--color-foreground);
  }
  .cart-page__item a {
    color: var(--color-foreground);
  }
  .cart-page__item-variant,
  .cart-page__item-property {
    font-size: 0.85rem;
  }
  .cart-page__item-price {
    font-weight: bold;
    margin: 0.5rem 0;
  }
  .cart-page__item-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
  }
  .cart-page__item-actions input[type="number"] {
    width: 4.5rem;
    padding: 0.4rem;
    border: 1px solid var(--color-foreground);
    border-radius: var(--style-border-radius-inputs);
  }
  .cart-page__item-actions a {
    text-decoration: underline;
  }
  .cart-page__footer {
    text-align: right;
  }
  .cart-page__subtotal {
    font-weight: bold;
    margin-bottom: 1rem;
  }
  .cart-page__update,
  .cart-page__checkout {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: var(--style-border-radius-inputs);
    cursor: pointer;
    font: inherit;
    margin-left: 0.75rem;
  }
  .cart-page__update {
    background-color: transparent;
    border: 1px solid var(--color-foreground);
    color: var(--color-foreground);
  }
  .cart-page__checkout {
    background-color: var(--color-accent);
    color: var(--color-foreground);
  }
/* END_SECTION:cart */

/* START_SECTION:collection (INDEX:6) */
.collection {
    padding: 2rem max(var(--page-margin), 1.25rem);
  }
  .collection__title {
    text-align: center;
    margin-bottom: 2rem;
  }
  .collection__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
  .collection__item {
    display: block;
    color: var(--color-foreground);
    text-decoration: none;
  }
  .collection__item-image {
    aspect-ratio: 1 / 1;
    overflow: hidden;
  }
  .collection__item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
  }
  .collection__item:hover .collection__item-image img {
    transform: scale(1.05);
  }
  }
  .collection__item-title {
    margin-top: 0.5rem;
  }
  .collection__item-price {
    color: var(--color-foreground);
    font-weight: bold;
  }
  .collection__item-sold {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    background-color: color-mix(in srgb, var(--color-foreground) 12%, var(--color-background));
    color: var(--color-foreground);
    border-radius: var(--style-border-radius-inputs);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  @media screen and (min-width: 750px) {
    .collection__grid {
      grid-template-columns: repeat(4, 1fr);
    }
  }
/* END_SECTION:collection */

/* START_SECTION:collections (INDEX:7) */
.collections {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(var(--collection-card-size), 100%), 1fr));
    gap: var(--grid-gap);
  }
  .collections--compact {
    --collection-card-size: 160px;
  }
  .collections--full {
    --collection-card-size: 280px;
  }
  .collection-card {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
/* END_SECTION:collections */

/* START_SECTION:commissions-gallery (INDEX:8) */
.commissions-gallery {
    padding: 2rem max(var(--page-margin), 1.25rem);
  }
  .commissions-gallery__title {
    text-align: center;
  }
  .commissions-gallery__intro {
    max-width: 40rem;
    margin: 1rem auto 2rem;
    text-align: center;
  }
  .commissions-gallery__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
  .commissions-gallery__item {
    margin: 0;
  }
  .commissions-gallery__item-image {
    aspect-ratio: 1 / 1;
    overflow: hidden;
  }
  .commissions-gallery__item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .commissions-gallery__caption {
    margin-top: 0.5rem;
    text-align: center;
  }

  @media screen and (min-width: 750px) {
    .commissions-gallery__grid {
      grid-template-columns: repeat(4, 1fr);
    }
  }
/* END_SECTION:commissions-gallery */

/* START_SECTION:contact-page (INDEX:9) */
.contact a {
    color: var(--color-foreground);
    text-decoration: none;
  }
  .contact {
    display: grid;
    gap: 2.5rem;
    max-width: 70rem;
    margin: 0 auto;
    padding: 3rem max(var(--page-margin), 1.25rem);
  }
  .contact__intro {
    background-color: color-mix(in srgb, var(--color-accent) 12%, transparent);
    border-radius: var(--style-border-radius-inputs);
    padding: 2rem;
  }
  .contact__title {
    margin-bottom: 1rem;
  }
  .prose p {
    margin-bottom: 1em;
    line-height: 1.6;
  }
  .contact__email {
    display: inline-block;
    margin-top: 0.5rem;
    font-weight: 600;
  }
  .contact__email:hover {
    text-decoration: underline;
  }
  .contact__social {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
  }
  .contact__social svg {
    width: 1.5rem;
  }
  .contact-form__row {
    display: grid;
    gap: 1rem;
  }
  .contact-form__field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 1rem;
  }
  .contact-form__field input,
  .contact-form__field textarea {
    min-height: 3rem;
    padding: 0.6rem 0.85rem;
    border: 1px solid var(--color-foreground);
    border-radius: var(--style-border-radius-inputs);
    font: inherit;
  }
  .contact-form__field textarea {
    min-height: 8rem;
  }
  .contact-form__success {
    color: var(--color-foreground);
    font-weight: bold;
    margin-bottom: 1rem;
  }
  .contact-form__submit {
    min-height: 3rem;
    padding: 0 2rem;
    background-color: var(--color-accent);
    color: var(--color-foreground);
    border: none;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
  }
  .contact-form__submit:hover {
    opacity: 0.85;
  }

  /* 750px left the two-column layout genuinely too tight (confirmed
     overflowing by ~50px at exactly that width) - the intro panel and the
     side-by-side name/email fields need closer to 900px to actually fit
     without crowding. */
  @media screen and (min-width: 900px) {
    .contact {
      grid-template-columns: 1fr 1.2fr;
      align-items: start;
    }
    .contact-form__row {
      grid-template-columns: 1fr 1fr;
    }
  }
/* END_SECTION:contact-page */

/* START_SECTION:custom-artwork-product (INDEX:10) */
.product {
    display: grid;
    gap: 2rem;
    padding: 2rem max(var(--page-margin), 1.25rem);
  }
  .product__zoom-trigger {
    display: block;
    width: 100%;
    padding: 0;
    border: none;
    background: none;
    cursor: zoom-in;
  }
  .product__image {
    margin-bottom: 1rem;
  }
  .product__image--placeholder {
    aspect-ratio: 1 / 1;
  }
  /* Same deliberate spacing scale as sections/product.liquid: a tight
     internal gap for the title/price group, then one fixed 1.5rem gap
     everywhere else (group-to-form, form-to-description) instead of each
     element carrying its own separate, inconsistent margin. */
  .product__header {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 1.5rem;
  }
  .product__title {
    font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
    line-height: 1.15;
  }
  .product__price {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-accent);
  }
  .product__shipping-note {
    display: block;
    font-size: 0.85rem;
    color: var(--color-foreground);
  }
  .product__description {
    margin: 1.5rem 0;
  }
  .product__form {
    display: block;
  }
  .custom-artwork-form__intro {
    font-weight: bold;
    margin-bottom: 1rem;
  }
  .custom-artwork-form__field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 1rem;
  }
  .custom-artwork-form__field input {
    padding: 0.6rem;
    border: 1px solid var(--color-foreground);
    border-radius: var(--style-border-radius-inputs);
    font: inherit;
  }
  .custom-artwork-form__outro {
    font-style: italic;
    margin-bottom: 1rem;
  }
  .custom-artwork-form__turnaround {
    margin-top: 0.75rem;
    font-size: 0.85rem;
    color: var(--color-foreground);
  }
  .product-form__row {
    display: flex;
    align-items: stretch;
    gap: 0.75rem;
  }
  .quantity-stepper {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    border: 1px solid color-mix(in srgb, var(--color-foreground) 25%, transparent);
    border-radius: 999px;
    overflow: hidden;
  }
  .quantity-stepper__button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border: none;
    background: none;
    color: var(--color-foreground);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
  }
  .quantity-stepper__input {
    width: 2.75rem;
    height: 3rem;
    border: none;
    border-left: 1px solid color-mix(in srgb, var(--color-foreground) 15%, transparent);
    border-right: 1px solid color-mix(in srgb, var(--color-foreground) 15%, transparent);
    text-align: center;
    font: inherit;
    -moz-appearance: textfield;
  }
  .quantity-stepper__input::-webkit-outer-spin-button,
  .quantity-stepper__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  .product-form__submit {
    flex: 1;
    min-width: 0;
    min-height: 3rem;
    padding: 0 2rem;
    background-color: var(--color-accent);
    color: var(--color-foreground);
    border: none;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
  }
  .product-form__submit:hover:not(:disabled) {
    opacity: 0.85;
  }
  /* Deliberately NOT keyed off :disabled: see sections/product.liquid's
     matching comment - the same button is also disabled by product-form.js
     for the second or so an add-to-cart request is in flight, and that
     shouldn't show the same "sold out" look as a genuinely unavailable
     product. */
  .product-form__submit:disabled {
    opacity: 0.7;
    cursor: not-allowed;
  }
  .product-form__submit--sold {
    background-color: color-mix(in srgb, var(--color-foreground) 12%, var(--color-background));
  }
  .product-form__error {
    color: var(--color-foreground);
    font-weight: bold;
    margin-bottom: 1rem;
  }

  @media screen and (min-width: 750px) {
    .product {
      grid-template-columns: 1fr 1fr;
    }
  }
/* END_SECTION:custom-artwork-product */

/* START_SECTION:custom-section (INDEX:11) */
.custom-section {
    position: relative;
    overflow: hidden;
    width: 100%;
  }
  .custom-section__background {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
  }
  .custom-section__background img {
    position: absolute;
    width: 100%;
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .custom-section__content {
    display: grid;
    grid-template-columns: var(--content-grid);
  }
  .custom-section__content > * {
    grid-column: 2;
  }
/* END_SECTION:custom-section */

/* START_SECTION:featured-products (INDEX:12) */
.featured-products {
    padding: 3rem max(var(--page-margin), 1.25rem);
    text-align: center;
  }
  .featured-products__eyebrow {
    color: var(--color-foreground);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.85rem;
  }
  .featured-products__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-top: 2rem;
    text-align: left;
  }
  .featured-products__item {
    display: block;
    color: var(--color-foreground);
    text-decoration: none;
  }
  .featured-products__item-image {
    aspect-ratio: 1 / 1;
    overflow: hidden;
  }
  .featured-products__item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
  }
  .featured-products__item:hover .featured-products__item-image img {
    transform: scale(1.05);
  }
  .featured-products__item-title {
    margin-top: 0.5rem;
  }
  .featured-products__item-price {
    color: var(--color-foreground);
    font-weight: bold;
  }
  .featured-products__view-all {
    display: inline-block;
    margin-top: 2rem;
    padding: 0.75rem 1.5rem;
    border: 1px solid var(--color-foreground);
    color: var(--color-foreground);
    text-decoration: none;
    border-radius: var(--style-border-radius-inputs);
  }

  @media screen and (min-width: 750px) {
    .featured-products__grid {
      grid-template-columns: repeat(4, 1fr);
    }
  }
/* END_SECTION:featured-products */

/* START_SECTION:footer (INDEX:13) */
/* A centered, stacked column reads as intentional regardless of how much
     is actually in it: an empty footer menu (or none set up yet), one
     social link vs two, any number of enabled payment methods, all still
     look balanced instead of a space-between row visibly lopsided by
     whichever piece happens to be short or missing. */
  .footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    margin-top: 2rem;
    /* Scoped to just the footer, not a site-wide change: the payment
       icons/copyright shouldn't sit flush against the screen edge, even
       though the rest of the site intentionally runs edge-to-edge. */
    padding: 2rem max(var(--page-margin), 1.25rem);
    border-top: 1px solid var(--color-foreground);
    text-align: center;
  }
  .footer a {
    text-decoration: none;
    color: var(--color-foreground);
  }
  .footer__links,
  .footer__social,
  .footer__payment {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1.25rem;
  }
  .footer__social svg {
    width: 1.25rem;
  }
  .footer__payment svg {
    /* Each brand's badge is a different native size/ratio (compare VISA to
       AMEX), so a fixed height + auto width keeps them visually consistent
       instead of a jumble of different sizes, without flattening their
       actual brand colors out. */
    height: 1.5rem;
    width: auto;
  }
  .footer__copyright {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.85rem;
  }
/* END_SECTION:footer */

/* START_SECTION:header (INDEX:14) */
.header {
    position: sticky;
    top: 0;
    z-index: 100;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    /* Deliberately not var(--page-margin): the header keeps its own fixed
       padding regardless of whether the rest of the site runs edge-to-edge. */
    padding: 1rem 1.25rem;
  }
  /* The glass effect lives on this decorative layer instead of directly on
     .header itself: backdrop-filter/filter on an element makes it the
     containing block for its own position: fixed descendants, which broke
     the mobile menu's full-viewport takeover (it was covering only the
     header bar's own height instead of the whole screen, since .header__menu
     lives inside .header). A sibling pseudo-element gets the same visual
     result without .header ever having the filter itself. */
  .header::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: color-mix(in srgb, var(--color-background) 88%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .header a {
    text-decoration: none;
    color: var(--color-foreground);
  }
  .header__zone {
    display: flex;
    align-items: center;
    gap: 1rem;
  }
  .header__zone--start {
    justify-self: start;
  }
  .header__zone--end {
    justify-self: end;
  }
  .header__logo {
    justify-self: center;
  }
  .header__logo-text {
    font-size: 1.5rem;
    font-weight: bold;
  }
  .header__logo img {
    display: block;
    height: auto;
    /* Keeps the logo from overwhelming a narrow screen even if a larger
       width is set in the theme editor. */
    max-width: 30vw;
  }
  /* Direct-child combinator on purpose: the hamburger's own <summary> and
     the nested "Store"-style submenu <summary> both live inside
     .header__mobile-toggle's DOM subtree, so a plain descendant selector
     here would style both identically (that's what centered "Store" text
     like the hamburger icon instead of a normal left-aligned row). */
  .header__mobile-toggle > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    justify-content: center;
  }
  .header__mobile-toggle > summary::-webkit-details-marker {
    display: none;
  }
  .header__mobile-toggle > summary svg {
    width: 1.5rem;
  }
  .header__menu ul,
  .header__menu-desktop ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  /* Mobile-only markup, shown by default; the desktop breakpoint below
     hides this and shows .header__menu-desktop's two split halves instead. */
  .header__menu-desktop {
    display: none;
  }
  .header__submenu-toggle summary {
    cursor: pointer;
    list-style: none;
  }
  .header__submenu-toggle summary::-webkit-details-marker {
    display: none;
  }
  .header__submenu-toggle summary svg {
    width: 1rem;
    transition: transform 0.15s ease;
  }
  .header__submenu-toggle[open] summary svg {
    transform: rotate(180deg);
  }
  .header__zone a {
    position: relative;
    display: flex;
    align-items: center;
    /* Icon alone is 24px (the accessibility minimum); this padding gives
       real thumbs a more comfortable tap target without changing the
       visual icon size. */
    padding: 0.5rem;
    margin: -0.5rem;
  }
  /* Wins the cascade over the plain class rule below regardless of source
     order (same origin, but an attribute selector on top of the same
     element beats a looser one), so the cart count badge actually
     disappears at zero instead of this display: flex silently defeating
     the browser's default [hidden] { display: none } behavior. */
  .header__zone a sup[hidden] {
    display: none;
  }
  .header__zone a sup {
    position: absolute;
    /* Offsets are measured from the padded tap-target box added above, not
       the icon itself, so they're adjusted by that same 0.5rem to keep the
       badge visually anchored to the icon rather than floating outward. */
    top: 0.1rem;
    right: -0.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 0.25rem;
    border-radius: 999px;
    background-color: #e02020;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 600;
    line-height: 1;
  }
  .header__zone svg {
    width: 1.5rem;
  }

  .search-dialog[open] {
    position: fixed;
    inset: 0 0 auto 0;
    width: 100%;
    max-width: 100%;
    margin: 0;
    border: none;
    padding: 1.5rem max(var(--page-margin), 1.25rem);
    background-color: var(--color-background);
    color: var(--color-foreground);
  }
  .search-dialog::backdrop {
    background: rgb(0 0 0 / 40%);
  }
  .search-dialog form {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }
  .search-dialog input[type="search"] {
    flex: 1;
    padding: 0.6rem;
    border: 1px solid var(--color-foreground);
    border-radius: var(--style-border-radius-inputs);
    font: inherit;
  }
  .search-dialog button[type="submit"] {
    padding: 0.6rem 1.25rem;
    background-color: var(--color-accent);
    color: var(--color-foreground);
    border: none;
    border-radius: var(--style-border-radius-inputs);
    cursor: pointer;
  }
  .search-dialog [data-search-close] {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
  }
  #predictive-search {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 0.5rem;
    background-color: var(--color-background);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    max-height: 60vh;
    overflow-y: auto;
  }
  #predictive-search:empty {
    display: none;
  }

  /* 750px looked fine when this only had to fit 4-5 short items, but with
     8 real items including "Custom Children's Name Artworks", the split
     nav actually needs close to 1400px to stay on one line without the
     cart icon getting squeezed out entirely (confirmed at 1024px and
     1200px) or the header overflowing the viewport outright (confirmed
     at 900px and below). Common laptop widths (1280-1366px) still don't
     have room for it, so this raises the threshold well past those too -
     anything under it reliably falls back to the mobile hamburger menu,
     which already works at any width or orientation. */
  @media screen and (min-width: 1300px) {
    /* The hamburger toggle and its full-screen panel are mobile-only
       markup now; desktop uses the two split .header__menu-desktop navs
       below instead, so there's nothing left for this to ever open here. */
    .header__mobile-toggle {
      display: none;
    }
    /* .header__zone a (below) sets display: flex at class+tag specificity,
       which otherwise beats this single-class rule regardless of source
       order - same issue hit before elsewhere in this file. */
    .header__zone a.header__search--mobile {
      display: none;
    }
    .header__menu-desktop {
      display: block;
    }
    .header__menu-desktop ul {
      display: flex;
      gap: 1.5rem;
    }
    .header__menu-item {
      position: relative;
    }
    .header__menu-link {
      display: flex;
      align-items: center;
      gap: 0.35rem;
    }
    .header__menu-desktop .header__submenu {
      position: absolute;
      top: 100%;
      left: 0;
      display: flex;
      gap: 1.25rem;
      background: var(--color-background);
      padding: 0.75rem 1.25rem;
      white-space: nowrap;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
      opacity: 0;
      pointer-events: none;
      transform: translateY(-4px);
      transition: opacity 0.15s ease, transform 0.15s ease;
    }
    .header__submenu-toggle[open] .header__submenu {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0);
    }
    /* Devices with a real mouse also get an instant hover reveal, in
       addition to the click toggle every device already gets from
       details/summary. Guarded by (hover: hover) so touchscreens, which
       don't have a true hover state, are unaffected and stay purely
       tap-to-toggle. */
    @media (hover: hover) {
      .header__submenu-toggle:hover .header__submenu {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
      }
    }
  }

  @media screen and (max-width: 1299px) {
    .header__zone a.header__search--desktop {
      display: none;
    }

    /* A small dropdown panel here used to clip or need its own internal
       scrolling gymnastics on short/landscape phone viewports. A full
       takeover instead just uses the whole viewport and scrolls its own
       content, so it behaves the same regardless of screen size or
       orientation. */
    .header__menu {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 150;
      flex-direction: column;
      background: var(--color-background);
      padding: 5rem 1.5rem calc(2rem + env(safe-area-inset-bottom));
      overflow-y: auto;
      opacity: 0;
      transition: opacity 0.2s ease, display 0.2s allow-discrete;
    }
    .header__mobile-toggle[open] .header__menu {
      display: flex;
      opacity: 1;
    }
    @starting-style {
      .header__mobile-toggle[open] .header__menu {
        opacity: 0;
      }
    }
    .header__menu-close {
      position: fixed;
      top: 1.25rem;
      right: 1.25rem;
      width: 3rem;
      height: 3rem;
      display: flex;
      align-items: center;
      justify-content: center;
      border: none;
      border-radius: 50%;
      background: color-mix(in srgb, var(--color-foreground) 6%, transparent);
      color: var(--color-foreground);
      font-size: 1.75rem;
      line-height: 1;
      cursor: pointer;
    }
    .header__menu > ul {
      display: flex;
      flex-direction: column;
    }
    .header__menu-item {
      border-bottom: 1px solid color-mix(in srgb, var(--color-foreground) 15%, transparent);
    }
    .header__menu-item:last-child {
      border-bottom: none;
    }
    .header__menu-link {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      min-height: 3rem;
      padding: 0.875rem 0;
      font-size: 1.1rem;
    }
    /* .header__menu ul (below) resets padding to 0 on every nested <ul>,
       including this one, at a higher specificity (class + tag beats a
       single class), so a plain .header__submenu rule here would silently
       lose to it regardless of source order. Two classes wins instead. */
    .header__menu .header__submenu {
      padding: 0 0 0.5rem 1rem;
    }
    .header__submenu-link {
      display: block;
      padding: 0.625rem 0;
      color: color-mix(in srgb, var(--color-foreground) 75%, transparent);
      font-size: 0.9em;
    }
  }
/* END_SECTION:header */

/* START_SECTION:hero (INDEX:15) */
.hero {
    position: relative;
    display: grid;
  }
  .hero__image {
    grid-area: 1 / 1;
    width: 100%;
    height: 60svh;
    max-height: 40rem;
    object-fit: cover;
  }
  .hero__scrim {
    grid-area: 1 / 1;
    /* Darkens the bottom half of whatever photo is chosen so the heading
       stays readable regardless of how busy/bright that photo is. */
    background: linear-gradient(to top, rgb(0 0 0 / 45%), rgb(0 0 0 / 0%) 60%);
  }
  .hero__content {
    grid-area: 1 / 1;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    text-align: center;
    padding: 2rem 1rem;
  }
  .hero__heading {
    font-size: clamp(1.75rem, 4vw, 3rem);
    color: #fff;
    text-shadow: 0 1px 8px rgb(0 0 0 / 60%);
  }
  .hero__button {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background-color: var(--color-accent);
    color: var(--color-foreground);
    text-decoration: none;
    border-radius: var(--style-border-radius-inputs);
  }
/* END_SECTION:hero */

/* START_SECTION:instagram-feed (INDEX:16) */
.instagram-feed {
    text-align: center;
    padding: 2rem max(var(--page-margin), 1.25rem);
  }
  .instagram-feed__heading {
    margin-bottom: 1.5rem;
  }
  .instagram-media {
    margin: 0 auto !important;
    max-width: 540px;
  }
  .instagram-feed__tagembed {
    width: 100%;
  }
  .instagram-feed__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
  }
  .instagram-feed__item {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    display: block;
  }
  .instagram-feed__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .instagram-feed__follow-button {
    display: inline-block;
    margin-top: 1.5rem;
    padding: 0.75rem 1.5rem;
    background-color: var(--color-accent);
    color: var(--color-foreground);
    text-decoration: none;
    border-radius: var(--style-border-radius-inputs);
  }

  @media screen and (min-width: 750px) {
    .instagram-feed__grid {
      grid-template-columns: repeat(6, 1fr);
    }
  }
/* END_SECTION:instagram-feed */

/* START_SECTION:newsletter (INDEX:17) */
.newsletter {
    text-align: center;
    padding: 3rem max(var(--page-margin), 1.25rem);
    background-color: var(--color-background);
  }
  .newsletter__text {
    max-width: 40rem;
    margin: 0.5rem auto 1.5rem;
  }
  .newsletter__form {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    max-width: 30rem;
    margin: 0 auto;
  }
  .newsletter__form input[type="email"] {
    flex: 1;
    min-width: 12rem;
    padding: 0.75rem;
    border: 1px solid var(--color-foreground);
    border-radius: var(--style-border-radius-inputs);
  }
  .newsletter__form button {
    padding: 0.75rem 1.5rem;
    background-color: var(--color-accent);
    color: var(--color-foreground);
    border: none;
    border-radius: var(--style-border-radius-inputs);
    cursor: pointer;
  }
/* END_SECTION:newsletter */

/* START_SECTION:page (INDEX:18) */
.page {
    max-width: 50rem;
    margin: 0 auto;
    padding: 2rem max(var(--page-margin), 1.25rem);
  }
  .page__title {
    text-align: center;
    margin-bottom: 1.5rem;
  }
  .prose :is(h1, h2, h3, h4, h5, h6) {
    margin-top: 1.5em;
    margin-bottom: 0.5em;
  }
  .prose p {
    margin-bottom: 1em;
    line-height: 1.6;
  }
  .prose :is(ul, ol) {
    margin-bottom: 1em;
    padding-left: 1.5em;
  }
  .prose a {
    color: var(--color-foreground);
    text-decoration: underline;
  }
  .prose img {
    margin: 1.5em 0;
  }
/* END_SECTION:page */

/* START_SECTION:policy (INDEX:20) */
.page {
    max-width: 50rem;
    margin: 0 auto;
    padding: 2rem max(var(--page-margin), 1.25rem);
  }
  .page__title {
    text-align: center;
    margin-bottom: 1.5rem;
  }
  .prose :is(h1, h2, h3, h4, h5, h6) {
    margin-top: 1.5em;
    margin-bottom: 0.5em;
  }
  .prose p {
    margin-bottom: 1em;
    line-height: 1.6;
  }
  .prose :is(ul, ol) {
    margin-bottom: 1em;
    padding-left: 1.5em;
  }
  .prose a {
    color: var(--color-foreground);
    text-decoration: underline;
  }
/* END_SECTION:policy */

/* START_SECTION:predictive-search (INDEX:21) */
.predictive-search__item a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
  }
  .predictive-search__item img {
    width: 3rem;
    flex-shrink: 0;
  }
  .predictive-search__view-all,
  .predictive-search__no-results {
    display: block;
    padding: 0.75rem 1rem;
  }
/* END_SECTION:predictive-search */

/* START_SECTION:product-recommendations (INDEX:22) */
.related-products {
    display: block;
    padding: 2rem max(var(--page-margin), 1.25rem);
  }
  .related-products__heading {
    text-align: center;
    margin-bottom: 2rem;
  }
  .related-products__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
  .related-products__item {
    display: block;
    color: var(--color-foreground);
    text-decoration: none;
  }
  .related-products__item-image {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--style-border-radius-inputs);
  }
  .related-products__item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
  }
  .related-products__item:hover .related-products__item-image img {
    transform: scale(1.05);
  }
  .related-products__item-title {
    margin-top: 0.5rem;
  }
  .related-products__item-price {
    color: var(--color-foreground);
    font-weight: bold;
  }
  .related-products__item-sold {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    background-color: color-mix(in srgb, var(--color-foreground) 12%, var(--color-background));
    color: var(--color-foreground);
    border-radius: var(--style-border-radius-inputs);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  @media screen and (min-width: 750px) {
    .related-products__grid {
      grid-template-columns: repeat(4, 1fr);
    }
  }
/* END_SECTION:product-recommendations */

/* START_SECTION:product (INDEX:23) */
.product {
    display: grid;
    gap: 2rem;
    padding: 2rem max(var(--page-margin), 1.25rem);
  }
  .product__slider-viewport {
    position: relative;
  }
  .product__slider {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    border-radius: var(--style-border-radius-inputs);
  }
  .product__slider::-webkit-scrollbar {
    display: none;
  }
  .product__slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
    aspect-ratio: 1 / 1;
    background-color: color-mix(in srgb, var(--color-foreground) 4%, transparent);
  }
  .product__zoom-trigger {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: none;
    background: none;
    cursor: zoom-in;
  }
  .product__slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .product__slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border: none;
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-background) 90%, transparent);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
    cursor: pointer;
  }
  .product__slider-arrow:hover {
    background: var(--color-background);
  }
  .product__slider-arrow svg {
    width: 1.1rem;
  }
  .product__slider-arrow--prev {
    left: 0.75rem;
  }
  .product__slider-arrow--prev svg {
    transform: rotate(90deg);
  }
  .product__slider-arrow--next {
    right: 0.75rem;
  }
  .product__slider-arrow--next svg {
    transform: rotate(-90deg);
  }
  .product__thumbnails {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
    overflow-x: auto;
  }
  .product__thumbnail {
    flex: 0 0 4rem;
    aspect-ratio: 1 / 1;
    padding: 0;
    border: 2px solid transparent;
    border-radius: var(--style-border-radius-inputs);
    overflow: hidden;
    background: none;
    cursor: pointer;
  }
  .product__thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .product__thumbnail--active {
    border-color: var(--color-accent);
  }
  /* One deliberate spacing scale for the whole info column instead of
     each element guessing its own margin: a tight internal gap for the
     title/price/badge group (they read as one unit), then a single fixed
     gap of the same size everywhere else on the page (1.5rem, matching
     .product__description below) separates that group from the form,
     and the form from the description. */
  .product__header {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 1.5rem;
  }
  .product__title {
    font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
    line-height: 1.15;
  }
  .product__price {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-accent);
  }
  .product__original-badge {
    color: color-mix(in srgb, var(--color-foreground) 65%, transparent);
    font-size: 0.85rem;
  }
  .product__sold-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background-color: color-mix(in srgb, var(--color-foreground) 12%, var(--color-background));
    color: var(--color-foreground);
    border-radius: var(--style-border-radius-inputs);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .product__description {
    margin: 1.5rem 0;
  }
  .product__form {
    display: block;
  }
  .product__form select {
    display: block;
    width: 100%;
    max-width: 20rem;
    min-height: 3rem;
    padding: 0.6rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid var(--color-foreground);
    border-radius: var(--style-border-radius-inputs);
    font: inherit;
  }
  .product-form__row {
    display: flex;
    align-items: stretch;
    gap: 0.75rem;
  }
  .quantity-stepper {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    border: 1px solid color-mix(in srgb, var(--color-foreground) 25%, transparent);
    border-radius: 999px;
    overflow: hidden;
  }
  .quantity-stepper__button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border: none;
    background: none;
    color: var(--color-foreground);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
  }
  .quantity-stepper__input {
    width: 2.75rem;
    height: 3rem;
    border: none;
    border-left: 1px solid color-mix(in srgb, var(--color-foreground) 15%, transparent);
    border-right: 1px solid color-mix(in srgb, var(--color-foreground) 15%, transparent);
    text-align: center;
    font: inherit;
    -moz-appearance: textfield;
  }
  .quantity-stepper__input::-webkit-outer-spin-button,
  .quantity-stepper__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  .product-form__submit {
    flex: 1;
    /* Flex items default to min-width: auto, which refuses to shrink below
       the button's own content width. On a narrow screen that silently
       pushes the whole row past the container's right edge instead of
       actually filling just the remaining space next to the stepper. */
    min-width: 0;
    min-height: 3rem;
    padding: 0 2rem;
    background-color: var(--color-accent);
    color: var(--color-foreground);
    border: none;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
  }
  .product-form__submit:hover:not(:disabled) {
    opacity: 0.85;
  }
  /* Deliberately NOT keyed off :disabled: product-form.js also disables
     this button for the second or so an add-to-cart request is in flight,
     to stop a double-click double-submitting, and that transient loading
     state was showing the exact same lime "sold out" look as a genuinely
     unavailable product - every successful add looked like it had failed.
     This class is only ever set by Liquid at render time from
     product.available, never toggled by JS, so it now only ever shows for
     an actual sold-out product. */
  .product-form__submit:disabled {
    opacity: 0.7;
    cursor: not-allowed;
  }
  .product-form__submit--sold {
    background-color: color-mix(in srgb, var(--color-foreground) 12%, var(--color-background));
  }
  .product-form__error {
    color: var(--color-foreground);
    font-weight: bold;
    margin-bottom: 1rem;
  }

  @media screen and (min-width: 750px) {
    .product {
      grid-template-columns: 1fr 1fr;
    }
  }
/* END_SECTION:product */

/* START_SECTION:search (INDEX:24) */
.search-page {
    padding: 2rem max(var(--page-margin), 1.25rem);
  }
  .search-page__title {
    text-align: center;
    margin-bottom: 1.5rem;
  }
  .search-page__form {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    max-width: 30rem;
    margin: 0 auto 2rem;
  }
  .search-page__form input[type="search"] {
    flex: 1;
    padding: 0.6rem;
    border: 1px solid var(--color-foreground);
    border-radius: var(--style-border-radius-inputs);
    font: inherit;
  }
  .search-page__form button {
    padding: 0.6rem 1.25rem;
    background-color: var(--color-accent);
    color: var(--color-foreground);
    border: none;
    border-radius: var(--style-border-radius-inputs);
    cursor: pointer;
  }
  .search-page__status {
    text-align: center;
    margin-bottom: 1.5rem;
  }
  .search-page__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
  .search-page__item {
    display: block;
    color: var(--color-foreground);
    text-decoration: none;
  }
  .search-page__item-image {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background-color: color-mix(in srgb, var(--color-foreground) 6%, transparent);
  }
  .search-page__item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
  }
  .search-page__item:hover .search-page__item-image img {
    transform: scale(1.05);
  }
  .search-page__item-title {
    margin-top: 0.5rem;
  }
  .search-page__item-price {
    color: var(--color-foreground);
    font-weight: bold;
  }
  .search-page__item-sold {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    background-color: color-mix(in srgb, var(--color-foreground) 12%, var(--color-background));
    color: var(--color-foreground);
    border-radius: var(--style-border-radius-inputs);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  @media screen and (min-width: 750px) {
    .search-page__grid {
      grid-template-columns: repeat(4, 1fr);
    }
  }
/* END_SECTION:search */

/* CSS from block stylesheet tags */
/* START_BLOCK:group (INDEX:25) */
.group {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    width: 100%;
  }

  .group--horizontal {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 var(--padding);
  }

  .group--vertical {
    flex-direction: column;
    align-items: var(--alignment);
    padding: var(--padding) 0;
  }
/* END_BLOCK:group */

/* START_BLOCK:text (INDEX:26) */
.text {
    text-align: var(--text-align);
  }
  .text--title {
    font-size: 2rem;
    font-weight: 700;
  }
  .text--subtitle {
    font-size: 1.5rem;
  }
/* END_BLOCK:text */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:image-placeholder (INDEX:29) */
.image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;
    text-align: center;
    font-family: var(--font-heading--family);
  }
  .image-placeholder__icon {
    font-size: 2rem;
    line-height: 1;
  }
  .image-placeholder__text {
    font-size: 0.9rem;
  }
  /* Kept subtle (12%, matching the tint used elsewhere like the contact
     page's intro panel) rather than a full pastel wash, which read as too
     candy-bright/clashing against the rest of the muted neutral grid. */
  .image-placeholder--accent {
    background-color: color-mix(in srgb, var(--color-accent) 12%, transparent);
  }
  /* Lime is a light, low-contrast color to begin with, so the same 12%
     used for the others washes it out to a dull khaki instead of a clean
     pastel - needs more of it to actually read as color. */
  .image-placeholder--accent-secondary {
    background-color: color-mix(in srgb, var(--color-accent-secondary) 22%, transparent);
  }
  .image-placeholder--accent-tertiary {
    background-color: color-mix(in srgb, var(--color-accent-tertiary) 12%, transparent);
  }
  .image-placeholder--accent-quaternary {
    background-color: color-mix(in srgb, var(--color-accent-quaternary) 12%, transparent);
  }
  .image-placeholder--accent-quinary {
    background-color: color-mix(in srgb, var(--color-accent-quinary) 12%, transparent);
  }
/* END_SNIPPET:image-placeholder */

/* START_SNIPPET:image (INDEX:30) */
.image {
    display: block;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: auto;
  }

  .image > img {
    width: 100%;
    height: auto;
  }
/* END_SNIPPET:image */

/* START_SNIPPET:product-zoom-dialog (INDEX:32) */
.product-zoom-dialog {
    border: none;
    padding: 0;
    max-width: 100vw;
    max-height: 100vh;
    width: 100%;
    height: 100%;
    background: var(--color-background);
  }
  .product-zoom-dialog[open] {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
  }
  .product-zoom-dialog::backdrop {
    background: rgba(0, 0, 0, 0.85);
  }
  .product-zoom-dialog__close {
    position: fixed;
    top: 1.25rem;
    right: 1.25rem;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-background) 90%, transparent);
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
    z-index: 1;
  }
  .product-zoom-dialog img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    cursor: zoom-out;
  }
/* END_SNIPPET:product-zoom-dialog */

/* START_SNIPPET:sticky-add-to-cart (INDEX:33) */
.sticky-add-to-cart {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 120;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1.25rem calc(0.75rem + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--color-background) 96%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
    transform: translateY(100%);
    transition: transform 0.25s ease;
  }
  .sticky-add-to-cart[data-visible] {
    transform: translateY(0);
  }
  .sticky-add-to-cart__info {
    flex: 1;
    min-width: 0;
  }
  .sticky-add-to-cart__title {
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .sticky-add-to-cart__price {
    font-weight: 700;
  }
  .sticky-add-to-cart .product-form__submit {
    flex: 0 0 auto;
    width: auto;
    min-height: 2.75rem;
    padding: 0 1.5rem;
  }

  /* Desktop already keeps the real button in view the whole time (it sits
     in the fixed-width info column, not below a long scrolling
     description), so there's nothing for this to stand in for there. */
  @media screen and (min-width: 750px) {
    .sticky-add-to-cart {
      display: none;
    }
  }
/* END_SNIPPET:sticky-add-to-cart */