/** Shopify CDN: Minification failed

Line 1549:138 Unexpected "/"
Line 2120:138 Unexpected "/"
Line 3300:136 Unexpected "/"

**/
/* START_SECTION:article-author (INDEX:2) */
.art-author {
    background: var(--color-background);
    padding: 0 0 56px;
  }

  .art-author__inner {
    padding: 0 var(--page-margin);
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .art-author__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    border-top: 1px solid rgb(var(--color-foreground-rgb) / 0.1);
    padding-top: 24px;
  }

  .art-author__identity {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .art-author__avatar-wrap { flex-shrink: 0; }

  .art-author__avatar-img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
  }

  .art-author__avatar-fallback {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #1a3a5c;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
  }

  .art-author__name-wrap {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .art-author__name {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-foreground);
  }

  .art-author__role {
    font-size: 0.8rem;
    color: rgb(var(--color-foreground-rgb) / 0.55);
  }

  .art-author__follow {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: rgb(var(--color-foreground-rgb) / 0.6);
    text-decoration: none;
    transition: color 0.15s;
  }

  .art-author__follow:hover { color: #0a66c2; }
  .art-author__follow svg { color: #0a66c2; }

  .art-author__bio {
    font-size: 0.875rem;
    line-height: 1.7;
    color: rgb(var(--color-foreground-rgb) / 0.65);
    margin: 0;
  }

  @media screen and (max-width: 749px) {
    .art-author__inner {
      width: 100%;
    }
    .art-author__row { flex-direction: column; align-items: flex-start; }
    .art-author__follow { margin-top: 4px; }
  }
/* END_SECTION:article-author */
/* START_SECTION:article-content (INDEX:4) */
.art-content {
    background: var(--color-background);
    color: var(--color-foreground);
    padding: 40px 0 56px;
  }

  .art-content__inner {
    display: grid;
    grid-template-columns: 1fr 268px;
    gap: 48px;
    align-items: start;
    padding: 0 var(--page-margin);
  }

  /* ── Left column ──────────────────────────────────── */
  .art-content__main {
    display: flex;
    flex-direction: column;
    gap: 32px;
    min-width: 0;
  }

  /* Key Takeaways card */
  .art-takeaways__card {
    border: 1px solid rgba(179, 25, 66, 0.3);
    border-radius: 12px;
    padding: 24px 28px;
  }

  .art-takeaways__heading {
    font-size: 1rem;
    font-weight: 700;
    color: #000;
    margin: 0 0 16px;
  }

  .art-takeaways__content ul,
  .art-takeaways__content ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .art-takeaways__content li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.875rem;
    line-height: 1.6;
    color: rgb(var(--color-foreground-rgb) / 0.8);
  }

  .art-takeaways__content li::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #B31942;
    flex-shrink: 0;
    margin-top: 7px;
  }

  .art-takeaways__content p {
    font-size: 0.875rem;
    line-height: 1.6;
    color: rgb(var(--color-foreground-rgb) / 0.8);
    margin: 0 0 10px;
  }

  .art-takeaways__content a { color: #9b1c3c; }

  /* Article body rich text */
  .art-body__content.rte {
    font-size: 1.0625rem;
    line-height: 1.8;
    color: rgb(var(--color-foreground-rgb) / 0.85);
  }

  .art-body__content.rte h2 {
    font-size: 24px;
    font-weight: 600;
    color: #1A1C1C;
    margin: 10px 0;
    line-height: 100%;
    letter-spacing: -2%;
    scroll-margin-top: 90px;
  }

  .art-body__content.rte h3 {
    font-size: clamp(1.05rem, 2vw, 1.3rem);
    font-weight: 700;
    color: #1A1C1C;
    margin: 2em 0 0.6em;
    line-height: 1.3;
    scroll-margin-top: 90px;
  }

  .art-body__content.rte p { 
    margin: 0 0 1.4em;
    font-size: 16px;
 }

  .art-body__content.rte ul,
  .art-body__content.rte ol {
    margin: 0 0 1.4em 1.5em;
    padding: 0;
  }

  .art-body__content.rte li { margin-bottom: 0.5em; }

  .art-body__content.rte a {
    color: #9b1c3c;
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .art-content__inner .art-body__content.rte a:hover {
     color: #9b1c3c;
  }

  .art-body__content.rte blockquote {
    margin: 2em 0;
    padding: 18px 24px;
    border-left: 4px solid #9b1c3c;
    background: rgba(155, 28, 60, 0.04);
    border-radius: 0 8px 8px 0;
    font-style: italic;
    color: rgb(var(--color-foreground-rgb) / 0.75);
  }

  .art-body__content.rte img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    /* margin: 1.5em 0; */
    display: block;
  }

  .art-body__content.rte hr {
    border: none;
    border-top: 1px solid rgb(var(--color-foreground-rgb) / 0.12);
    margin: 2.5em 0;
  }

  /* ── Right column: sticky TOC ─────────────────────── */
  .art-content__sidebar {
    position: sticky;
    top: 80px;
    align-self: start;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    scrollbar-width: none;
  }

  .art-content__sidebar::-webkit-scrollbar { display: none; }

  .art-toc__card {
    border: 1.5px solid rgb(var(--color-foreground-rgb) / 0.1);
    border-radius: 12px;
    overflow: hidden;
  }

  .art-toc__header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 18px;
    font-size: 0.875rem;
    font-weight: 700;
    color: #1a3a5c;
    border-bottom: 1px solid rgb(var(--color-foreground-rgb) / 0.08);
  }

  .art-toc__list {
    list-style: none;
    margin: 0;
    padding: 6px 0;
  }

  .art-toc__item { display: block; }

  .art-toc__item--sub .art-toc__link {
    padding-left: 30px;
    font-size: 0.78rem;
  }

  li.art-toc__item:first-child {
    display: none;
  }

  .art-toc__link {
    display: block;
    padding: 7px 18px;
    font-size: 0.82rem;
    color: rgb(var(--color-foreground-rgb) / 0.6);
    text-decoration: none;
    line-height: 1.4;
    border-left: 3px solid transparent;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
  }

  .art-toc__link:hover {
    color: var(--color-foreground);
    background: rgb(var(--color-foreground-rgb) / 0.04);
  }

  .art-toc__link.is-active {
    color: #9b1c3c;
    border-left-color: #9b1c3c;
    font-weight: 600;
    background: rgba(155, 28, 60, 0.04);
  }

  .art-toc__cta {
    padding: 14px 18px;
    border-top: 1px solid rgb(var(--color-foreground-rgb) / 0.08);
  }

  .art-toc__cta-btn {
    width: 100%;
    background: #9b1c3c;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 11px 16px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    text-align: center;
  }

  .art-toc__cta-btn:hover { background: #7f1532; }

  /* ── Mobile ───────────────────────────────────────── */
  @media screen and (max-width: 989px) {
    .art-content__inner {
      grid-template-columns: 1fr;
      gap: 32px;
    }

    /* TOC collapses to a horizontal pill row on tablet/mobile */
    .art-content__sidebar {
      position: static;
      max-height: none;
      order: -1;
    }

    .art-toc__list {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      padding: 10px 12px;
    }

    .art-toc__item { display: inline; }
    .art-toc__item--sub .art-toc__link { padding-left: 10px; }

    .art-toc__link {
      border-left: none;
      border-radius: 999px;
      padding: 5px 12px;
      background: rgb(var(--color-foreground-rgb) / 0.05);
      font-size: 0.78rem;
      display: inline-block;
    }

    .art-toc__link.is-active {
      border-left: none;
      background: rgba(155, 28, 60, 0.1);
    }
    .art-body__content.rte p, .art-body__content.rte li { font-size: 14px;}
  }

  @media screen and (max-width: 749px) {
    .art-content { padding: 28px 0 40px; }
   .art-content__inner {
      width: 100%;
    }
    .art-takeaways__card { padding: 18px; }
    .art-body__content.rte { font-size: 1rem; }
    .art-body__content.rte p, .art-body__content.rte li { font-size: 14px;}
  }
/* END_SECTION:article-content */
/* START_SECTION:article-cta-banner (INDEX:5) */
.art-banner {
    padding: 0 0 56px;
    background: #FFFFFF;
  }

  .art-banner__inner {
    padding: 0 var(--page-margin);
  }

  .art-banner__box {
    background: #1a3a5c;
    border-radius: 20px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: stretch;
    min-height: 220px;
  }

  .art-banner__content {
    padding: 40px 48px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    justify-content: center;
  }

  .art-banner__heading {
    font-size: clamp(1.2rem, 2.5vw, 1.7rem);
    font-weight: 800;
    color: #fff;
    line-height: 1.25;
    margin: 0;
    max-width: 480px;
  }

  .art-banner__description {
    color: #484848;
  }

  /* Badges */
  .art-banner__badges {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .art-banner__badge-row {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
  }

  .art-banner__badge {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.75);
  }

  .art-banner__badge svg { color: rgba(255,255,255,0.6); flex-shrink: 0; }

  /* CTAs */
  .art-banner__ctas {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 2px;
  }

  .art-banner__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    padding: 12px 24px;
    white-space: nowrap;
  }

  .art-banner__cta--primary {
    background: #B31942;
    color: #fff;
    border: 1px solid #B31942;
  }

  .art-banner__cta--primary:hover { background: #B31942; border-color: #B31942; }

  .art-banner__cta--outline {
    background: transparent;
    color: #fff;
    border: 1.5px solid rgba(255,255,255,0.4);
  }

  .art-banner__cta--outline:hover { border-color: #fff; }

  /* Image */
  .art-banner__image-wrap {
    max-width: 500px;
    flex-shrink: 0;
    overflow: hidden;
    padding: 20px;
  }

  .art-banner__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  @media screen and (max-width: 749px) {
    .art-banner__inner {
      width: 100%;
      padding: 0 var(--page-margin);
    }
    .art-banner__box { grid-template-columns: 1fr; }
    .art-banner__image-wrap { width: 100%; height: 180px; }
    .art-banner__content { padding: 28px 24px; }
    .art-banner__ctas { flex-direction: column; }
    .art-banner__heading { font-size: 1.2rem; }
    .art-banner__badge-row { gap: 12px; }
  }
/* END_SECTION:article-cta-banner */
/* START_SECTION:article-hero (INDEX:6) */
.art-hero {
    background: var(--color-background);
    color: var(--color-foreground);
    padding: 40px 0 0;
  }

  .art-hero__inner {
    padding: 0 var(--page-margin);
  }

  /* Breadcrumb */
  .art-hero__breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: rgb(var(--color-foreground-rgb) / 0.5);
    flex-wrap: wrap;
    margin-bottom: 24px;
  }

  .art-hero__breadcrumb a {
    color: inherit;
    text-decoration: none;
    transition: color 0.15s;
  }

  .art-hero__breadcrumb a:hover { color: var(--color-foreground); }

  /* 2-column grid */
  .art-hero__grid {
    display: grid;
    grid-template-columns: 1fr 530px;
    gap: 48px;
    padding-bottom: 40px;
    padding-top: 12px;
  }

  /* Left content */
  .art-hero__content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: space-between;
  }

  .art-hero__tag {
    display: inline-block;
    color: #ffffff;
    background: #DD1F51;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 999px;
    align-self: flex-start;
  }

  .art-hero__title {
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 600;
    color: #000000;
    line-height: 1.15;
    margin: 0;
    padding-bottom: 26px;
  }

  /* Meta grid: Author / Last Update / Read Time */
  .art-hero__meta-grid {
    display: flex;
    align-items: center;
    gap: 0;
    flex-wrap: wrap;
    margin-top: 4px;
    border-top: 1px solid #CDCDCD;
    padding-top: 16px;
    justify-content: left;
  }

  .art-hero__meta-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-right: 20px;
  }
  .art-hero__meta-item.avatar-wrap {
    display: flex;
    flex-direction: row;
    gap: 10px;
  }
  .art-hero__meta__text-wrap {
    display: flex;
    flex-direction: column;
  }

  .art-hero__meta-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: rgb(var(--color-foreground-rgb) / 0.4);
  }

  .art-hero__meta-value {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-foreground);
  }

  .art-hero__meta-divider {
    width: 1px;
    height: 32px;
    background: rgb(var(--color-foreground-rgb) / 0.15);
    flex-shrink: 0;
    margin-right: 20px;
  }

  /* Right image */
  .art-hero__image-wrap {
    border-radius: 14px;
    overflow: hidden;
    aspect-ratio: 53 / 32;
    background: #f0f2f5;
    line-height: 0;
  }

  .art-hero__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  @media screen and (min-width: 990px) and (max-width: 1200px) {
    .art-hero__grid {
        grid-template-columns: 1fr 420px;
    }
  }
  @media screen and (max-width: 989px) {
    .art-hero__grid {
      grid-template-columns: 1fr;
      gap: 28px;
    }

    .art-hero__image-wrap { order: -1; aspect-ratio: 16 / 9; border-radius: 10px; }
  }
/* Mobile */
  @media screen and (max-width: 749px) {
    .art-hero { padding: 24px 0 0; }
    .art-hero__inner {
      width: 100%;
      padding: 0 var(--page-margin);
    }
    .art-hero__title { font-size: clamp(1.5rem, 6vw, 2rem); }
    .art-hero__meta-grid { gap: 12px; flex-wrap: wrap; }
    .art-hero__meta-divider { display: none; }
    .art-hero__meta-item { padding-right: 0; flex-direction: row; align-items: center; gap: 6px; }
    .art-hero__meta-label::after { content: ':'; }
  }
/* END_SECTION:article-hero */
/* START_SECTION:article-related (INDEX:8) */
.art-related {
    background: var(--color-background);
    padding: 48px 0 64px;
  }

  .art-related__inner {
    padding: 0 var(--page-margin);
  }

  /* ── Heading row ──────────────────────────────────── */
  .art-related__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
    gap: 16px;
  }

  .art-related__heading {
    font-size: clamp(1.3rem, 2.5vw, 1.75rem);
    font-weight: 700;
    color: #1a1a1a;
    margin: 0;
  }

  .art-related__nav {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
  }

  .art-related__arrow {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1.5px solid rgb(var(--color-foreground-rgb) / 0.18);
    background: var(--color-background);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--color-foreground);
    transition: border-color 0.15s, opacity 0.2s;
    flex-shrink: 0;
  }

  .art-related__arrow:hover:not(:disabled) {
    border-color: rgb(var(--color-foreground-rgb) / 0.5);
  }

  /* ── Carousel track ───────────────────────────────── */
  .art-related__track {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: 4px;
  }

  .art-related__track::-webkit-scrollbar { display: none; }

  /* ── Card ─────────────────────────────────────────── */
  .art-related__card {
    flex: 0 0 calc((100% - 48px) / 3);
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    background: transparent;
    border: none;
    min-width: 240px;
  }

  /* Image */
  .art-related__card-img {
    aspect-ratio: 4 / 3;
    border-radius: 12px;
    overflow: hidden;
    background: #e5e7eb;
    flex-shrink: 0;
  }

  .art-related__card-img-el {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
  }

  .art-related__card:hover .art-related__card-img-el { transform: scale(1.04); }

  .art-related__card-img-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #e5e7eb, #d1d5db);
  }

  /* Card body */
  .art-related__card-body {
    padding: 14px 0 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  /* Meta row: tag + read time on same line */
  .art-related__card-meta-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
  }

  /* Tag: solid red filled pill */
  .art-related__card-tag {
    display: inline-flex;
    align-items: center;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #fff;
    background: #DD1F51;
    padding: 4px 10px;
    border-radius: 999px;
    white-space: nowrap;
  }

  /* Read time */
  .art-related__card-read-time {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.78rem;
    font-weight: 500;
    color: rgb(var(--color-foreground-rgb) / 0.55);
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }

  /* Title */
  .art-related__card-title {
    font-size: 1rem;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.45;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    line-clamp: 3;
    overflow: hidden;
  }

  /* ── Responsive ───────────────────────────────────── */
  @media screen and (max-width: 989px) {
    .art-related__card {
      flex: 0 0 calc((100% - 24px) / 2);
    }
  }

  @media screen and (max-width: 749px) {
    .art-related { padding: 36px 0 48px; }
    .art-related__inner {
      width: 100%;
    }
    .art-related__card { flex: 0 0 78vw; }
    .art-related__card-img { border-radius: 10px; }
    .art-related__card-title { font-size: 0.9rem; }
  }
/* END_SECTION:article-related */
/* START_SECTION:bd-exit-intent (INDEX:25) */
.bd-exit[hidden] {
    /* The attribute alone loses to the display below in the cascade. */
    display: none !important;
  }

  .bd-exit {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: grid;
    place-items: center;
    padding: 20px;
  }

  .bd-exit__backdrop {
    position: absolute;
    inset: 0;
    background: rgb(0 0 0 / 0.62);
  }

  .bd-exit__panel {
    position: relative;
    width: 100%;
    max-width: var(--bd-exit-max, 640px);
    animation: bd-exit-in 0.22s ease-out;
  }

  @keyframes bd-exit-in {
    from { opacity: 0; transform: translateY(8px) scale(0.985); }
    to   { opacity: 1; transform: none; }
  }

  .bd-exit__link,
  .bd-exit__img {
    display: block;
  }

  .bd-exit__img {
    width: 100%;
    height: auto;
    border-radius: 12px;
  }

  .bd-exit__media {
    position: relative;
  }

  /* Invisible by design — the button it covers is part of the artwork. */
  .bd-exit__hotspot {
    position: absolute;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  /* Never invisible to the keyboard, though. */
  .bd-exit__hotspot:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
    box-shadow: 0 0 0 6px rgb(0 0 0 / 0.45);
  }

  /* Setup aid — switched on from the section settings while lining the
     targets up against the artwork, and off again afterwards.

     The fill is deliberately faint: it only has to show where the target
     sits, and at a heavier tint it hides the very button being aimed at.
     The dashed edge does the actual work of showing the bounds. */
  .bd-exit__media.is-outlined .bd-exit__hotspot {
    outline: 2px dashed #00c2ff;
    outline-offset: -2px;
    background: rgb(0 194 255 / 0.08);
  }

  .bd-exit__copied {
    padding: 6px 14px;
    border-radius: 999px;
    background: #111;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    pointer-events: none;
  }

  .bd-exit__copied[hidden] { display: none; }

  .bd-exit__close {
    position: absolute;
    top: -14px;
    right: -14px;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: #111;
    cursor: pointer;
    box-shadow: 0 2px 10px rgb(0 0 0 / 0.28);
  }

  .bd-exit__close:hover { background: #f1f2f4; }

  .bd-exit__dismiss {
    display: block;
    margin: 14px auto 0;
    padding: 6px 12px;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 14px;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
  }

  body.bd-exit-open {
    overflow: hidden;
  }

  @media screen and (max-width: 749px) {
    .bd-exit { padding: 16px; }

    /* Clear of the edge, since there is no room to sit outside the panel. */
    .bd-exit__close {
      top: 8px;
      right: 8px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .bd-exit__panel { animation: none; }
  }
/* END_SECTION:bd-exit-intent */
/* START_SECTION:church-custom-size-popup (INDEX:86) */
/* ── Overlay — hidden until .is-open is added by JS ── */
  .chcsp-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,0.6);
    align-items: center;
    justify-content: center;
    padding: 20px;
  }
  .chcsp-overlay.is-open {
    display: flex;
  }

  /* ── Dialog shell — fixed design size ── */
  .chcsp-dialog {
    position: relative;
    display: grid;
    grid-template-columns: 310px 1fr;
    width: 958px;
    height: fit-content;
    max-width: calc(100vw - 40px);
    /* Cap to the viewport; .chcsp-right scrolls inside it. */
    max-height: calc(100dvh - 40px);
    /* Cap the ROW too: an auto row sizes to its tallest item's max-content and
       would grow straight past the max-height above, leaving the dialog to
       clip instead of its columns to scroll. */
    grid-template-rows: minmax(0, 1fr);
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 24px 80px rgba(0,0,0,0.3);
  }

  /* ── Close button ── */

  /* Capped dialog: each column scrolls rather than being clipped. */
  /* A grid item defaults to min-height:auto and will not shrink below its
     content, so overflow-y above never engages and the dialog clips instead
     of scrolling. This is what makes the submit button reachable on short
     screens. */
  .chcsp-left, .chcsp-right { overflow-y: auto; min-height: 0; }
  .chcsp-close {
    position: absolute;
    top: 12px;
    right: 14px;
    z-index: 10;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: none;
    border-radius: 50%;
    background: #00000012;
    color: #000000;
    cursor: pointer;
    transition: background 0.15s;
  }
  .chcsp-close:hover { background: rgba(255,255,255,0.32); }

  /* ── Left panel ── */
  .chcsp-left {
    background-color: var(--chcsp-panel-bg, #0B2A5F);
    background-size: cover;
    background-position: center;
    color: var(--chcsp-panel-text, #c8d8f0);
    padding: 32px 22px 28px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    /* overflow-y: auto; */
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.2) transparent;
  }

  /* Badge / laurel */
  .chcsp-badge { text-align: center; }
  .chcsp-badge__laurel {
    width: 160px;
    height: auto;
    display: block;
    margin: 0 auto 6px;
    color: var(--chcsp-panel-text, #c8d8f0);
  }
  /* .chcsp-badge__img {
    width: 120px;
    height: auto;
    display: block;
    margin: 0 auto 6px;
    object-fit: contain;
  } */
  .chcsp-badge__label {
    color: var(--chcsp-panel-text, #c8d8f0);
    font-size: 12px;
    margin: 0;
    line-height: 1.4;
    opacity: 0.85;
  }
  .chcsp-badge__years {
    display: none;
    font-size: 28px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
  }

  /* Trust list */
  .chcsp-trust {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 13px;
    border-top: 1px solid rgba(255,255,255,0.12);
    padding-top: 20px;
  }
  .chcsp-trust__item { display: flex; align-items: flex-start; gap: 10px; }
  .chcsp-trust__icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    display: flex;
    align-items: center;
    color: var(--chcsp-accent, #C0192B);
  }
  .chcsp-trust__icon svg, .chcsp-trust__icon img { display: block; }
  .chcsp-trust__item strong { display: block; color: #fff; font-size: 12px; font-weight: 600; }
  .chcsp-trust__item span  { display: block; color: var(--chcsp-panel-text, #c8d8f0); font-size: 11px; margin-top: 1px; opacity: 0.8; }

  /* Steps */
  .chcsp-steps { border-top: 1px solid rgba(255,255,255,0.12); padding-top: 20px; }
  .chcsp-steps h4 { color: #fff; font-size: 13px; font-weight: 600; margin: 0 0 12px; }
  .chcsp-steps ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
  .chcsp-steps li { display: flex; align-items: flex-start; gap: 10px; color: var(--chcsp-panel-text, #c8d8f0); font-size: 12px; line-height: 1.5; }
  .chcsp-steps li span {
    flex-shrink: 0;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--chcsp-accent, #C0192B);
    color: #fff;
    font-size: 10px; font-weight: 700;
    display: grid; place-items: center;
    margin-top: 1px;
  }

  /* ── Right panel ── */
  .chcsp-form-wrap { padding: 14px 36px 20px; }
  .chcsp-dialog h2 { font-size: 24px; font-weight: 700; color: #111; margin: 0 0 4px; }
  .chcsp-subtitle  { color: #777; font-size: 13px; margin: 0 0 20px; }

  /* Form */
  .chcsp-form { display: flex; flex-direction: column; gap: 4px; }
  /* Without this, `display: flex` above outranks the browser's own
     [hidden] rule and form.hidden = true is silently ignored, leaving the
     form on screen underneath the success panel. Same trap as .chcsp-success. */
  .chcsp-form[hidden] { display: none; }
  .chcsp-field { display: flex; flex-direction: column; gap: 2px; }
  .chcsp-field label { font-size: 13px; font-weight: 500; color: #333; }
  .chcsp-req { color: var(--chcsp-accent, #C0192B); margin-left: 1px; }

  .chcsp-field input,
  .chcsp-field select,
  .chcsp-field textarea {
    width: 100%;
    padding: 10px 13px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    color: #222;
    background: #fff;
    box-sizing: border-box;
    font-family: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
  }
  .chcsp-field input:focus,
  .chcsp-field select:focus,
  .chcsp-field textarea:focus {
    outline: none;
    border-color: var(--chcsp-focus, #0B2A5F);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--chcsp-focus, #0B2A5F) 12%, transparent);
  }
  .chcsp-field input.chcsp-invalid,
  .chcsp-field textarea.chcsp-invalid {
    border-color: #C0192B;
    background: #fff8f8;
  }
  .chcsp-field input.chcsp-invalid:focus,
  .chcsp-field textarea.chcsp-invalid:focus {
    box-shadow: 0 0 0 3px rgba(192,25,43,0.12);
  }
  .chcsp-field-error { font-size: 11px; color: #C0192B; min-height: 14px; line-height: 1.3; }
  .chcsp-field textarea { resize: none; }

  .chcsp-size-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
  }

  @media screen and (max-width: 749px) {
    .chcsp-size-grid { grid-template-columns: 1fr 1fr; }
    .chcsp-size-grid .chcsp-field:last-child { grid-column: 1 / -1; }
  }

  .phone_date_field .pdm-event-date {
    padding: 10px;
    gap: 6px;
  }
  .phone_date_field .pdm-event-date__text h3 {
    font-size: 13px;
    font-weight: 500;
  }
  .phone_date_field .pdm-event-date__text p,
  .phone_date_field .pdm-event-date__notice p {
    font-size: 12px;
  }
  .phone_date_field .pdm-event-date__notice svg {
    width: 16px;
  }
  .phone_date_field .pdm-event-date__notice strong {
    font-weight: 500;
  }
  .phone_date_field .pdm-event-date__btn {
    padding: 6px 14px;
  }
  .phone_date_field .pdm-event-date__notice {
    padding: 4px 12px;
  }

  /* Button */
  /* Off-screen rather than display:none: some bots skip hidden inputs,
     which is exactly the ones we want to catch. */
  .chcsp-honeypot {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .chcsp-submit {
    width: 100%;
    padding: 13px;
    background: var(--chcsp-btn-bg, #9B1D2A);
    color: var(--chcsp-btn-text, #fff);
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: filter 0.15s;
    letter-spacing: 0.01em;
  }
  .chcsp-submit:hover:not(:disabled) { filter: brightness(0.88); }
  .chcsp-submit:disabled { opacity: 0.6; cursor: not-allowed; }
  .chcsp-note { text-align: center; font-size: 12px; color: #aaa; margin: 0; }

  /* Success */
  /* Visibility is driven by the [hidden] attribute, which the submit handler
     toggles. A hardcoded `display: none` here beat that attribute, so removing
     `hidden` did nothing and the confirmation never appeared. */
  .chcsp-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 60px 28px 40px;
    gap: 12px;
  }
  .chcsp-success[hidden] { display: none; }

  .chcsp-success h3 { font-size: 22px; color: #111; margin: 0; }
  .chcsp-success p  { color: #666; font-size: 14px; line-height: 1.6; margin: 0; }

  /* ── Tablet (750–989px) ── */
  @media screen and (min-width: 750px) and (max-width: 989px) {
    .chcsp-dialog {
      grid-template-columns: 260px 1fr;
      width: 100%;
      height: 666px;
    }
    .chcsp-form-wrap { padding: 28px 24px; }
  }

  /* ── Mobile (<750px) — sheet from bottom ── */
  @media screen and (max-width: 749px) {
    .chcsp-overlay { padding: 0; align-items: flex-end; }
    .chcsp-dialog {
      grid-template-columns: 1fr;
      width: 100%;
      height: auto;
      min-height: 420px;
      max-height: 92dvh;
      border-radius: 20px;
      bottom: 4%;
    }
    .chcsp-left { display: none; }
    .chcsp-right { overflow-y: auto; }
    .chcsp-close { background: rgba(0,0,0,0.07); color: #444; }
    .chcsp-form-wrap { padding: 28px 20px 24px; }
    .chcsp-dialog h2 { font-size: 20px; }
  }
/* END_SECTION:church-custom-size-popup */
/* START_SECTION:church-mockup-popup (INDEX:88) */
.chmrp-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,0.6);
    align-items: center;
    justify-content: center;
    padding: 20px;
  }
  .chmrp-overlay.is-open { display: flex; }

  .chmrp-dialog {
    position: relative;
    display: grid;
    grid-template-columns: 310px 1fr;
    width: 958px;
    max-width: calc(100vw - 40px);
    /* Cap to the viewport; .chmrp-right scrolls inside it. */
    max-height: calc(100dvh - 40px);
    /* Cap the ROW too: an auto row sizes to its tallest item's max-content and
       would grow straight past the max-height above, leaving the dialog to
       clip instead of its columns to scroll. */
    grid-template-rows: minmax(0, 1fr);
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 24px 80px rgba(0,0,0,0.3);
  }


  /* Capped dialog: each column scrolls rather than being clipped. */
  /* A grid item defaults to min-height:auto and will not shrink below its
     content, so overflow-y above never engages and the dialog clips instead
     of scrolling. This is what makes the submit button reachable on short
     screens. */
  .chmrp-left, .chmrp-right { overflow-y: auto; min-height: 0; }
  .chmrp-close {
    position: absolute;
    top: 14px; right: 14px;
    z-index: 10;
    width: 32px; 
    height: 32px;
    display: grid; 
    place-items: center;
    border: none; 
    border-radius: 50%;
    background: #00000012;
    color: #000000; 
    cursor: pointer;
    transition: background 0.15s;
  }
  .chmrp-close:hover { background: rgba(255,255,255,0.32); }

  /* Left panel */
  .chmrp-left {
    background-color: var(--chmrp-panel-bg, #0B2A5F);
    background-size: cover; 
    background-position: center;
    color: var(--chmrp-panel-text, #c8d8f0);
    padding: 32px 22px 28px;
    display: flex; 
    flex-direction: column; 
    gap: 22px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.2) transparent;
  }
  .chmrp-badge { text-align: center; }
  .chmrp-badge__laurel { width: 160px; height: auto; display: block; margin: 0 auto 6px; color: var(--chmrp-panel-text, #c8d8f0); }
  /* .chmrp-badge__img    { width: 120px; height: auto; display: block; margin: 0 auto 6px; object-fit: contain; } */
  .chmrp-badge__label  { color: var(--chmrp-panel-text, #c8d8f0); font-size: 12px; margin: 0; line-height: 1.4; opacity: 0.85; }
  .chmrp-badge__years  { display: none; font-size: 28px; font-weight: 700; color: #fff; line-height: 1.2; }

  .chmrp-trust { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; border-top: 1px solid rgba(255,255,255,0.12); padding-top: 20px; }
  .chmrp-trust__item { display: flex; align-items: flex-start; gap: 10px; }
  .chmrp-trust__icon { flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px; display: flex; align-items: center; color: var(--chmrp-accent, #C0192B); }
  .chmrp-trust__icon svg, .chmrp-trust__icon img { display: block; }
  .chmrp-trust__item strong { display: block; color: #fff; font-size: 12px; font-weight: 600; }
  .chmrp-trust__item span   { display: block; color: var(--chmrp-panel-text, #c8d8f0); font-size: 11px; margin-top: 1px; opacity: 0.8; }

  .chmrp-steps { border-top: 1px solid rgba(255,255,255,0.12); padding-top: 20px; }
  .chmrp-steps h4 { color: #fff; font-size: 13px; font-weight: 600; margin: 0 0 12px; }
  .chmrp-steps ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
  .chmrp-steps li { display: flex; align-items: flex-start; gap: 10px; color: var(--chmrp-panel-text, #c8d8f0); font-size: 12px; line-height: 1.5; }
  .chmrp-steps li span { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--chmrp-accent, #C0192B); color: #fff; font-size: 10px; font-weight: 700; display: grid; place-items: center; margin-top: 1px; }

  /* Right panel */
  .chmrp-right { overflow-y: auto; }
  .chmrp-form-wrap { padding: 14px 36px 20px; }
  .chmrp-dialog h2 { font-size: 24px; font-weight: 700; color: #111; margin: 0 0 4px; }
  .chmrp-subtitle   { color: #777; font-size: 13px; margin: 0 0 16px; }

  .chmrp-form { display: flex; flex-direction: column; gap: 4px; }
  /* Without this the display above outranks the browser's [hidden] rule
     and form.hidden = true is silently ignored. */
  .chmrp-form[hidden] { display: none; }
  .chmrp-field { display: flex; flex-direction: column; gap: 2px; }
  .chmrp-field label { font-size: 13px; font-weight: 500; color: #333; }
  .chmrp-req { color: var(--chmrp-accent, #C0192B); margin-left: 1px; }

  .chmrp-field input,
  .chmrp-field select,
  .chmrp-field textarea {
    width: 100%; padding: 9px 12px;
    border: 1px solid #ddd; border-radius: 8px;
    font-size: 13px; color: #222; background: #fff;
    box-sizing: border-box; font-family: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
  }
  .chmrp-field input:focus,
  .chmrp-field select:focus,
  .chmrp-field textarea:focus {
    outline: none;
    border-color: var(--chmrp-focus, #0B2A5F);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--chmrp-focus, #0B2A5F) 12%, transparent);
  }
  .chmrp-field input.chmrp-invalid  { border-color: #C0192B; background: #fff8f8; }
  .chmrp-field input.chmrp-invalid:focus { box-shadow: 0 0 0 3px rgba(192,25,43,0.12); }
  .chmrp-field textarea { resize: none; }
  .chmrp-dimensions { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
  .chmrp-field-error { font-size: 11px; color: #C0192B; min-height: 14px; line-height: 1.3; }

  .chmrp-date-field .pdm-event-date {
    padding: 10px;
    gap: 6px;
    margin-top: 0;
  }
  .chmrp-date-field .pdm-event-date__text h3 {
    font-size: 13px;
    font-weight: 500;
  }
  .chmrp-date-field .pdm-event-date__text p,
  .chmrp-date-field .pdm-event-date__notice p {
    font-size: 12px;
  }
  .chmrp-date-field .pdm-event-date__notice svg {
    width: 16px;
  }
  .chmrp-date-field .pdm-event-date__notice strong {
    font-weight: 500;
  }
  .chmrp-date-field .pdm-event-date__btn {
    padding: 6px 14px;
  }
  .chmrp-date-field .pdm-event-date__notice {
    padding: 4px 12px;
  }

  /* Upload section */
  .chmrp-upload { display: flex; flex-direction: column; gap: 0; }
  .chmrp-upload__label { font-size: 13px; font-weight: 500; color: #333; margin: 0 0 8px; }

  .chmrp-upload__tabs {
    display: flex;
    border-radius: 8px 8px 0 0;
    overflow: hidden;
    border: 1px solid #ddd;
    border-bottom: none;
  }
  .chmrp-tab {
    flex: 1;
    display: flex; align-items: center; justify-content: center; gap: 5px;
    padding: 9px 10px;
    border: none; background: #f5f5f5;
    color: #555; font-size: 12px; font-weight: 500;
    cursor: pointer; font-family: inherit;
    transition: background 0.15s, color 0.15s;
    border-right: 1px solid #ddd;
  }
  .chmrp-tab:last-child { border-right: none; }
  .chmrp-tab.is-active { background: var(--chmrp-panel-bg, #0B2A5F); color: #fff; }

  .chmrp-upload__panels { border: 1px solid #ddd; border-radius: 0 0 8px 8px; }

  .chmrp-panel { padding: 12px; }

  /* Dropzone */
  .chmrp-dropzone {
    display: flex; flex-direction: column; align-items: center;
    gap: 6px;
    border: 1.5px dashed #ccc; border-radius: 8px;
    cursor: pointer; text-align: center;
    transition: border-color 0.15s, background 0.15s;
  }
  .chmrp-dropzone:hover,
  .chmrp-dropzone.is-over { border-color: var(--chmrp-panel-bg, #0B2A5F); background: #f0f4fb; }
  .chmrp-dropzone svg { color: #aaa; }
  .chmrp-dropzone__cta { font-size: 13px; color: #444; }
  .chmrp-dropzone__cta u { color: var(--chmrp-panel-bg, #0B2A5F); text-decoration-color: var(--chmrp-panel-bg, #0B2A5F); }
  .chmrp-dropzone__file { font-size: 13px; font-weight: 500; color: var(--chmrp-panel-bg, #0B2A5F); }
  .chmrp-dropzone small { font-size: 11px; color: #aaa; }
  .chmrp-file-input { display: none; }

  .chmrp-panel input[type="url"] {
    width: 100%; padding: 9px 12px;
    border: 1px solid #ddd; border-radius: 8px;
    font-size: 13px; box-sizing: border-box; font-family: inherit;
  }
  .chmrp-panel input[type="url"]:focus { outline: none; border-color: var(--chmrp-focus, #0B2A5F); }

  .chmrp-email-note { font-size: 13px; color: #555; line-height: 1.6; margin: 4px 0; }

  /* Button */
  /* Off-screen, not display:none - some bots skip hidden inputs. */
  .chmrp-honeypot {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .chmrp-submit {
    width: 100%; padding: 13px;
    background: var(--chmrp-btn-bg, #9B1D2A);
    color: var(--chmrp-btn-text, #fff);
    border: none; border-radius: 8px;
    font-size: 15px; font-weight: 600;
    cursor: pointer; font-family: inherit;
    transition: filter 0.15s; letter-spacing: 0.01em;
    margin-top: 4px;
  }
  .chmrp-submit:hover:not(:disabled) { filter: brightness(0.88); }
  .chmrp-submit:disabled { opacity: 0.6; cursor: not-allowed; }
  .chmrp-note { text-align: center; font-size: 12px; color: #aaa; margin: 0; }

  /* Success */
  /* /* Visibility comes from the [hidden] attribute the submit handler toggles;
     the hardcoded display:none that used to be here beat it, so the
     confirmation never appeared. */
  .chmrp-success[hidden] { display: none; }
  .chmrp-success { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 60px 28px 40px; gap: 12px; } */
  .chmrp-success h3 { font-size: 22px; color: #111; margin: 0; }
  .chmrp-success p  { color: #666; font-size: 14px; line-height: 1.6; margin: 0; }

  /* Tablet */
  @media screen and (min-width: 750px) and (max-width: 989px) {
    .chmrp-dialog { grid-template-columns: 260px 1fr; width: 100%; height: 666px; }
    .chmrp-form-wrap { padding: 24px 22px; }
  }

  /* Mobile */
  @media screen and (max-width: 749px) {
    .chmrp-overlay { padding: 0; align-items: flex-end; }
    .chmrp-dialog { grid-template-columns: 1fr; width: 100%; height: auto; min-height: 420px; max-height: 92dvh; border-radius: 20px; bottom: 10%; }
    .chmrp-left { display: none; }
    .chmrp-right { overflow-y: auto; }
    .chmrp-close { background: rgba(0,0,0,0.07); color: #444; }
    .chmrp-form-wrap { padding: 24px 20px 20px; }
    .chmrp-dialog h2 { font-size: 20px; }
    .chmrp-form {
        overflow-y: scroll;
        max-height: 500px;
    }
    .chmrp-dimensions { grid-template-columns: 1fr 1fr; }
    .chmrp-dimensions .chmrp-field:last-child { grid-column: 1 / -1; }

  }
/* END_SECTION:church-mockup-popup */
/* START_SECTION:custom-size-popup (INDEX:94) */
/* ── Overlay — hidden until .is-open is added by JS ── */
  .csp-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,0.6);
    align-items: center;
    justify-content: center;
    padding: 20px;
  }
  .csp-overlay.is-open {
    display: flex;
  }

  /* ── Dialog shell — fixed design size ── */
  .csp-dialog {
    position: relative;
    display: grid;
    grid-template-columns: 310px 1fr;
    width: 958px;
    height: fit-content;
    max-width: calc(100vw - 40px);
    /* Cap to the viewport; .csp-right scrolls inside it. */
    max-height: calc(100dvh - 40px);
    /* Cap the ROW too: an auto row sizes to its tallest item's max-content and
       would grow straight past the max-height above, leaving the dialog to
       clip instead of its columns to scroll. */
    grid-template-rows: minmax(0, 1fr);
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 24px 80px rgba(0,0,0,0.3);
  }

  /* ── Close button ── */

  /* Capped dialog: each column scrolls rather than being clipped. */
  /* A grid item defaults to min-height:auto and will not shrink below its
     content, so overflow-y above never engages and the dialog clips instead
     of scrolling. This is what makes the submit button reachable on short
     screens. */
  .csp-left, .csp-right { overflow-y: auto; min-height: 0; }
  .csp-close {
    position: absolute;
    top: 12px;
    right: 14px;
    z-index: 10;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: none;
    border-radius: 50%;
    background: #00000012;
    color: #000000;
    cursor: pointer;
    transition: background 0.15s;
  }
  .csp-close:hover { background: rgba(255,255,255,0.32); }

  /* ── Left panel ── */
  .csp-left {
    background-color: var(--csp-panel-bg, #0B2A5F);
    background-size: cover;
    background-position: center;
    color: var(--csp-panel-text, #c8d8f0);
    padding: 32px 22px 28px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    /* overflow-y: auto; */
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.2) transparent;
  }

  /* Badge / laurel */
  .csp-badge { text-align: center; }
  .csp-badge__laurel {
    width: 160px;
    height: auto;
    display: block;
    margin: 0 auto 6px;
    color: var(--csp-panel-text, #c8d8f0);
  }
  /* .csp-badge__img {
    width: 120px;
    height: auto;
    display: block;
    margin: 0 auto 6px;
    object-fit: contain;
  } */
  .csp-badge__label {
    color: var(--csp-panel-text, #c8d8f0);
    font-size: 12px;
    margin: 0;
    line-height: 1.4;
    opacity: 0.85;
  }
  .csp-badge__years {
    display: none;
    font-size: 28px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
  }

  /* Trust list */
  .csp-trust {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 13px;
    border-top: 1px solid rgba(255,255,255,0.12);
    padding-top: 20px;
  }
  .csp-trust__item { display: flex; align-items: flex-start; gap: 10px; }
  .csp-trust__icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    display: flex;
    align-items: center;
    color: var(--csp-accent, #C0192B);
  }
  .csp-trust__icon svg, .csp-trust__icon img { display: block; }
  .csp-trust__item strong { display: block; color: #fff; font-size: 12px; font-weight: 600; }
  .csp-trust__item span  { display: block; color: var(--csp-panel-text, #c8d8f0); font-size: 11px; margin-top: 1px; opacity: 0.8; }

  /* Steps */
  .csp-steps { border-top: 1px solid rgba(255,255,255,0.12); padding-top: 20px; }
  .csp-steps h4 { color: #fff; font-size: 13px; font-weight: 600; margin: 0 0 12px; }
  .csp-steps ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
  .csp-steps li { display: flex; align-items: flex-start; gap: 10px; color: var(--csp-panel-text, #c8d8f0); font-size: 12px; line-height: 1.5; }
  .csp-steps li span {
    flex-shrink: 0;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--csp-accent, #C0192B);
    color: #fff;
    font-size: 10px; font-weight: 700;
    display: grid; place-items: center;
    margin-top: 1px;
  }

  /* ── Right panel ── */
  .csp-form-wrap { padding: 14px 36px 20px; }
  .csp-dialog h2 { font-size: 24px; font-weight: 700; color: #111; margin: 0 0 4px; }
  .csp-subtitle  { color: #777; font-size: 13px; margin: 0 0 20px; }

  /* Form */
  .csp-form { display: flex; flex-direction: column; gap: 4px; }
  /* Without this, `display: flex` above outranks the browser's own
     [hidden] rule and form.hidden = true is silently ignored, leaving the
     form on screen underneath the success panel. Same trap as .csp-success. */
  .csp-form[hidden] { display: none; }
  .csp-field { display: flex; flex-direction: column; gap: 2px; }
  .csp-field label { font-size: 13px; font-weight: 500; color: #333; }
  .csp-req { color: var(--csp-accent, #C0192B); margin-left: 1px; }

  .csp-field input,
  .csp-field select,
  .csp-field textarea {
    width: 100%;
    padding: 10px 13px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    color: #222;
    background: #fff;
    box-sizing: border-box;
    font-family: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
  }
  .csp-field input:focus,
  .csp-field select:focus,
  .csp-field textarea:focus {
    outline: none;
    border-color: var(--csp-focus, #0B2A5F);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--csp-focus, #0B2A5F) 12%, transparent);
  }
  .csp-field input.csp-invalid,
  .csp-field textarea.csp-invalid {
    border-color: #C0192B;
    background: #fff8f8;
  }
  .csp-field input.csp-invalid:focus,
  .csp-field textarea.csp-invalid:focus {
    box-shadow: 0 0 0 3px rgba(192,25,43,0.12);
  }
  .csp-field-error { font-size: 11px; color: #C0192B; min-height: 14px; line-height: 1.3; }
  .csp-field textarea { resize: none; }

  .csp-size-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
  }

  @media screen and (max-width: 749px) {
    .csp-size-grid { grid-template-columns: 1fr 1fr; }
    .csp-size-grid .csp-field:last-child { grid-column: 1 / -1; }
  }

  .phone_date_field .pdm-event-date {
    padding: 10px;
    gap: 6px;
  }
  .phone_date_field .pdm-event-date__text h3 {
    font-size: 13px;
    font-weight: 500;
  }
  .phone_date_field .pdm-event-date__text p,
  .phone_date_field .pdm-event-date__notice p {
    font-size: 12px;
  }
  .phone_date_field .pdm-event-date__notice svg {
    width: 16px;
  }
  .phone_date_field .pdm-event-date__notice strong {
    font-weight: 500;
  }
  .phone_date_field .pdm-event-date__btn {
    padding: 6px 14px;
  }
  .phone_date_field .pdm-event-date__notice {
    padding: 4px 12px;
  }

  /* Button */
  /* Off-screen rather than display:none: some bots skip hidden inputs,
     which is exactly the ones we want to catch. */
  .csp-honeypot {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .csp-submit {
    width: 100%;
    padding: 13px;
    background: var(--csp-btn-bg, #9B1D2A);
    color: var(--csp-btn-text, #fff);
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: filter 0.15s;
    letter-spacing: 0.01em;
  }
  .csp-submit:hover:not(:disabled) { filter: brightness(0.88); }
  .csp-submit:disabled { opacity: 0.6; cursor: not-allowed; }
  .csp-note { text-align: center; font-size: 12px; color: #aaa; margin: 0; }

  /* Success */
  /* Visibility is driven by the [hidden] attribute, which the submit handler
     toggles. A hardcoded `display: none` here beat that attribute, so removing
     `hidden` did nothing and the confirmation never appeared. */
  .csp-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 60px 28px 40px;
    gap: 12px;
  }
  .csp-success[hidden] { display: none; }

  .csp-success h3 { font-size: 22px; color: #111; margin: 0; }
  .csp-success p  { color: #666; font-size: 14px; line-height: 1.6; margin: 0; }

  /* ── Tablet (750–989px) ── */
  @media screen and (min-width: 750px) and (max-width: 989px) {
    .csp-dialog {
      grid-template-columns: 260px 1fr;
      width: 100%;
      height: 666px;
    }
    .csp-form-wrap { padding: 28px 24px; }
  }

  /* ── Mobile (<750px) — sheet from bottom ── */
  @media screen and (max-width: 749px) {
    .csp-overlay { padding: 0; align-items: flex-end; }
    .csp-dialog {
      grid-template-columns: 1fr;
      width: 100%;
      height: auto;
      min-height: 420px;
      max-height: 92dvh;
      border-radius: 20px;
      bottom: 4%;
    }
    .csp-left { display: none; }
    .csp-right { overflow-y: auto; }
    .csp-close { background: rgba(0,0,0,0.07); color: #444; }
    .csp-form-wrap { padding: 28px 20px 24px; }
    .csp-dialog h2 { font-size: 20px; }
  }
/* END_SECTION:custom-size-popup */
/* START_SECTION:education-mockup-popup (INDEX:96) */
.edmrp-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,0.6);
    align-items: center;
    justify-content: center;
    padding: 20px;
  }
  .edmrp-overlay.is-open { display: flex; }

  .edmrp-dialog {
    position: relative;
    display: grid;
    grid-template-columns: 310px 1fr;
    width: 958px;
    max-width: calc(100vw - 40px);
    /* Cap to the viewport; .edmrp-right scrolls inside it. */
    max-height: calc(100dvh - 40px);
    /* Cap the ROW too: an auto row sizes to its tallest item's max-content and
       would grow straight past the max-height above, leaving the dialog to
       clip instead of its columns to scroll. */
    grid-template-rows: minmax(0, 1fr);
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 24px 80px rgba(0,0,0,0.3);
  }


  /* Capped dialog: each column scrolls rather than being clipped. */
  /* A grid item defaults to min-height:auto and will not shrink below its
     content, so overflow-y above never engages and the dialog clips instead
     of scrolling. This is what makes the submit button reachable on short
     screens. */
  .edmrp-left, .edmrp-right { overflow-y: auto; min-height: 0; }
  .edmrp-close {
    position: absolute;
    top: 14px; right: 14px;
    z-index: 10;
    width: 32px; 
    height: 32px;
    display: grid; 
    place-items: center;
    border: none; 
    border-radius: 50%;
    background: #00000012;
    color: #000000; 
    cursor: pointer;
    transition: background 0.15s;
  }
  .edmrp-close:hover { background: rgba(255,255,255,0.32); }

  /* Left panel */
  .edmrp-left {
    background-color: var(--edmrp-panel-bg, #0B2A5F);
    background-size: cover; 
    background-position: center;
    color: var(--edmrp-panel-text, #c8d8f0);
    padding: 32px 22px 28px;
    display: flex; 
    flex-direction: column; 
    gap: 22px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.2) transparent;
  }
  .edmrp-badge { text-align: center; }
  .edmrp-badge__laurel { width: 160px; height: auto; display: block; margin: 0 auto 6px; color: var(--edmrp-panel-text, #c8d8f0); }
  /* .edmrp-badge__img    { width: 120px; height: auto; display: block; margin: 0 auto 6px; object-fit: contain; } */
  .edmrp-badge__label  { color: var(--edmrp-panel-text, #c8d8f0); font-size: 12px; margin: 0; line-height: 1.4; opacity: 0.85; }
  .edmrp-badge__years  { display: none; font-size: 28px; font-weight: 700; color: #fff; line-height: 1.2; }

  .edmrp-trust { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; border-top: 1px solid rgba(255,255,255,0.12); padding-top: 20px; }
  .edmrp-trust__item { display: flex; align-items: flex-start; gap: 10px; }
  .edmrp-trust__icon { flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px; display: flex; align-items: center; color: var(--edmrp-accent, #C0192B); }
  .edmrp-trust__icon svg, .edmrp-trust__icon img { display: block; }
  .edmrp-trust__item strong { display: block; color: #fff; font-size: 12px; font-weight: 600; }
  .edmrp-trust__item span   { display: block; color: var(--edmrp-panel-text, #c8d8f0); font-size: 11px; margin-top: 1px; opacity: 0.8; }

  .edmrp-steps { border-top: 1px solid rgba(255,255,255,0.12); padding-top: 20px; }
  .edmrp-steps h4 { color: #fff; font-size: 13px; font-weight: 600; margin: 0 0 12px; }
  .edmrp-steps ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
  .edmrp-steps li { display: flex; align-items: flex-start; gap: 10px; color: var(--edmrp-panel-text, #c8d8f0); font-size: 12px; line-height: 1.5; }
  .edmrp-steps li span { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--edmrp-accent, #C0192B); color: #fff; font-size: 10px; font-weight: 700; display: grid; place-items: center; margin-top: 1px; }

  /* Right panel */
  .edmrp-right { overflow-y: auto; }
  .edmrp-form-wrap { padding: 14px 36px 20px; }
  .edmrp-dialog h2 { font-size: 24px; font-weight: 700; color: #111; margin: 0 0 4px; }
  .edmrp-subtitle   { color: #777; font-size: 13px; margin: 0 0 16px; }

  .edmrp-form { display: flex; flex-direction: column; gap: 4px; }
  /* Without this the display above outranks the browser's [hidden] rule
     and form.hidden = true is silently ignored. */
  .edmrp-form[hidden] { display: none; }
  .edmrp-field { display: flex; flex-direction: column; gap: 2px; }
  .edmrp-field label { font-size: 13px; font-weight: 500; color: #333; }
  .edmrp-req { color: var(--edmrp-accent, #C0192B); margin-left: 1px; }

  .edmrp-field input,
  .edmrp-field select,
  .edmrp-field textarea {
    width: 100%; padding: 9px 12px;
    border: 1px solid #ddd; border-radius: 8px;
    font-size: 13px; color: #222; background: #fff;
    box-sizing: border-box; font-family: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
  }
  .edmrp-field input:focus,
  .edmrp-field select:focus,
  .edmrp-field textarea:focus {
    outline: none;
    border-color: var(--edmrp-focus, #0B2A5F);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--edmrp-focus, #0B2A5F) 12%, transparent);
  }
  .edmrp-field input.edmrp-invalid  { border-color: #C0192B; background: #fff8f8; }
  .edmrp-field input.edmrp-invalid:focus { box-shadow: 0 0 0 3px rgba(192,25,43,0.12); }
  .edmrp-field textarea { resize: none; }
  .edmrp-dimensions { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
  .edmrp-field-error { font-size: 11px; color: #C0192B; min-height: 14px; line-height: 1.3; }

  .edmrp-date-field .pdm-event-date {
    padding: 10px;
    gap: 6px;
    margin-top: 0;
  }
  .edmrp-date-field .pdm-event-date__text h3 {
    font-size: 13px;
    font-weight: 500;
  }
  .edmrp-date-field .pdm-event-date__text p,
  .edmrp-date-field .pdm-event-date__notice p {
    font-size: 12px;
  }
  .edmrp-date-field .pdm-event-date__notice svg {
    width: 16px;
  }
  .edmrp-date-field .pdm-event-date__notice strong {
    font-weight: 500;
  }
  .edmrp-date-field .pdm-event-date__btn {
    padding: 6px 14px;
  }
  .edmrp-date-field .pdm-event-date__notice {
    padding: 4px 12px;
  }

  /* Upload section */
  .edmrp-upload { display: flex; flex-direction: column; gap: 0; }
  .edmrp-upload__label { font-size: 13px; font-weight: 500; color: #333; margin: 0 0 8px; }

  .edmrp-upload__tabs {
    display: flex;
    border-radius: 8px 8px 0 0;
    overflow: hidden;
    border: 1px solid #ddd;
    border-bottom: none;
  }
  .edmrp-tab {
    flex: 1;
    display: flex; align-items: center; justify-content: center; gap: 5px;
    padding: 9px 10px;
    border: none; background: #f5f5f5;
    color: #555; font-size: 12px; font-weight: 500;
    cursor: pointer; font-family: inherit;
    transition: background 0.15s, color 0.15s;
    border-right: 1px solid #ddd;
  }
  .edmrp-tab:last-child { border-right: none; }
  .edmrp-tab.is-active { background: var(--edmrp-panel-bg, #0B2A5F); color: #fff; }

  .edmrp-upload__panels { border: 1px solid #ddd; border-radius: 0 0 8px 8px; }

  .edmrp-panel { padding: 12px; }

  /* Dropzone */
  .edmrp-dropzone {
    display: flex; flex-direction: column; align-items: center;
    gap: 6px;
    border: 1.5px dashed #ccc; border-radius: 8px;
    cursor: pointer; text-align: center;
    transition: border-color 0.15s, background 0.15s;
  }
  .edmrp-dropzone:hover,
  .edmrp-dropzone.is-over { border-color: var(--edmrp-panel-bg, #0B2A5F); background: #f0f4fb; }
  .edmrp-dropzone svg { color: #aaa; }
  .edmrp-dropzone__cta { font-size: 13px; color: #444; }
  .edmrp-dropzone__cta u { color: var(--edmrp-panel-bg, #0B2A5F); text-decoration-color: var(--edmrp-panel-bg, #0B2A5F); }
  .edmrp-dropzone__file { font-size: 13px; font-weight: 500; color: var(--edmrp-panel-bg, #0B2A5F); }
  .edmrp-dropzone small { font-size: 11px; color: #aaa; }
  .edmrp-file-input { display: none; }

  .edmrp-panel input[type="url"] {
    width: 100%; padding: 9px 12px;
    border: 1px solid #ddd; border-radius: 8px;
    font-size: 13px; box-sizing: border-box; font-family: inherit;
  }
  .edmrp-panel input[type="url"]:focus { outline: none; border-color: var(--edmrp-focus, #0B2A5F); }

  .edmrp-email-note { font-size: 13px; color: #555; line-height: 1.6; margin: 4px 0; }

  /* Button */
  /* Off-screen, not display:none - some bots skip hidden inputs. */
  .edmrp-honeypot {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .edmrp-submit {
    width: 100%; padding: 13px;
    background: var(--edmrp-btn-bg, #9B1D2A);
    color: var(--edmrp-btn-text, #fff);
    border: none; border-radius: 8px;
    font-size: 15px; font-weight: 600;
    cursor: pointer; font-family: inherit;
    transition: filter 0.15s; letter-spacing: 0.01em;
    margin-top: 4px;
  }
  .edmrp-submit:hover:not(:disabled) { filter: brightness(0.88); }
  .edmrp-submit:disabled { opacity: 0.6; cursor: not-allowed; }
  .edmrp-note { text-align: center; font-size: 12px; color: #aaa; margin: 0; }

  /* Success */
  /* /* Visibility comes from the [hidden] attribute the submit handler toggles;
     the hardcoded display:none that used to be here beat it, so the
     confirmation never appeared. */
  .edmrp-success[hidden] { display: none; }
  .edmrp-success { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 60px 28px 40px; gap: 12px; } */
  .edmrp-success h3 { font-size: 22px; color: #111; margin: 0; }
  .edmrp-success p  { color: #666; font-size: 14px; line-height: 1.6; margin: 0; }

  /* Tablet */
  @media screen and (min-width: 750px) and (max-width: 989px) {
    .edmrp-dialog { grid-template-columns: 260px 1fr; width: 100%; height: 666px; }
    .edmrp-form-wrap { padding: 24px 22px; }
  }

  /* Mobile */
  @media screen and (max-width: 749px) {
    .edmrp-overlay { padding: 0; align-items: flex-end; }
    .edmrp-dialog { grid-template-columns: 1fr; width: 100%; height: auto; min-height: 420px; max-height: 92dvh; border-radius: 20px; bottom: 10%; }
    .edmrp-left { display: none; }
    .edmrp-right { overflow-y: auto; }
    .edmrp-close { background: rgba(0,0,0,0.07); color: #444; }
    .edmrp-form-wrap { padding: 24px 20px 20px; }
    .edmrp-dialog h2 { font-size: 20px; }
    .edmrp-form {
        overflow-y: scroll;
        max-height: 500px;
    }
    .edmrp-dimensions { grid-template-columns: 1fr 1fr; }
    .edmrp-dimensions .edmrp-field:last-child { grid-column: 1 / -1; }

  }
/* END_SECTION:education-mockup-popup */
/* START_SECTION:header (INDEX:108) */
body {
    --header-height: 60px;
    --header-group-height: var(--header-height);
    --transparent-header-offset-boolean: 0; /* stylelint-disable-line declaration-property-value-disallowed-list */
  }

  .header {
    /* Set header paddings based on height setting */
    --header-padding: var(--padding-sm);
    --font-paragraph--line-height: 1;
    --header-content-transition-timing: 0s;

    display: block;
    contain: layout style;
    background: transparent;

    a,
    .button,
    .button-secondary,
    .header-actions__action {
      /* reset style from base.css */
      transition: color var(--header-content-transition-timing), border-color var(--header-content-transition-timing);
    }
  }

  #header-component :is(.header-menu, .dropdown-localization) {
    display: none;
  }

  @media screen and (min-width: 750px) {
    #header-component[data-menu-style='menu'] :is(.header-menu, .dropdown-localization) {
      display: flex;
    }
  }

  #header-component[data-menu-style='drawer'] .header__column {
    display: contents;
  }

  @media screen and (min-width: 750px) {
    #header-component[data-menu-style='menu'] .header__navigation-bar-row {
      display: none;
    }
  }

  .header[transparent] {
    --language-button-background-color: transparent;
    --language-button-border-color: transparent;
    --header-content-transition-timing: calc(var(--submenu-animation-speed) - var(--animation-speed-fast))
      var(--animation-speed-fast) var(--ease-out-cubic);

    --closed-underlay-height: 0px;

    /* used to display the appropriate logo based on transparency state */
    --header-logo-display: none;
    --header-logo-inverse-display: block;

    position: absolute;
    top: 0;
    left: 0;
    right: 0;

    z-index: var(--layer-overlay);

    &[transparent='not-sticky'][data-sticky-state='active'],
    &:has(.menu-list__link:not([aria-haspopup]):hover) {
      --header-logo-display: unset;
      --header-logo-inverse-display: unset;
      --color-foreground: inherit;
      --color-foreground-rgb: inherit;
      --color-background: inherit;
      --color-background-rgb: inherit;
      --color-border: inherit;
      --color-border-rgb: inherit;
      --closed-underlay-height: 100%;
    }

    /** For transparent header, apply inherit to rows when menu is not hovered */
    &:not([data-sticky-state='active']):not(:has(.menu-list__link:is(:hover, [aria-expanded='true']))) .header__row {
      --color-foreground: inherit;
      --color-foreground-rgb: inherit;
      --color-border: inherit;
      --color-border-rgb: inherit;
      --color-primary-button-background: inherit;
      --color-primary-button-text: inherit;
    }

    /* Multiple selectors for performance: each simple :has() check is faster than one complex selector with multiple conditions */
    &:has(.mega-menu__list:hover),
    &:has(.menu-list__link:is(:hover, [aria-expanded='true'])),
    &:has(.menu-list__list-item[slot='overflow'] .menu-list__link:is(:hover, [aria-expanded='true'])) {
      --header-logo-display: unset;
      --header-logo-inverse-display: unset;
      --color-foreground: inherit;
      --color-foreground-rgb: inherit;
      --color-background: inherit;
      --color-background-rgb: inherit;
      --color-border: inherit;
      --color-border-rgb: inherit;
      --header-content-transition-timing: var(--submenu-animation-speed) var(--ease-out-cubic);
    }
  }

  /* When top row has transparent background, make it inherit colors from header component */
  [data-transparent-color-scheme='top']:hover .header__row--top,
  [data-transparent-color-scheme='top']:focus-within .header__row--top,
  [data-transparent-color-scheme='both']:hover .header__row--top,
  [data-transparent-color-scheme='both']:focus-within .header__row--top {
    --color-foreground: inherit;
    --color-foreground-rgb: inherit;
    --color-border: inherit;
    --color-border-rgb: inherit;
    --color-primary-button-background: inherit;
    --color-primary-button-text: inherit;
  }

  /* When bottom row has transparent background, make it inherit colors from header component */
  [data-transparent-color-scheme='bottom']:hover .header__row--bottom,
  [data-transparent-color-scheme='bottom']:focus-within .header__row--bottom,
  [data-transparent-color-scheme='both']:hover .header__row--bottom,
  [data-transparent-color-scheme='both']:focus-within .header__row--bottom {
    --color-foreground: inherit;
    --color-foreground-rgb: inherit;
    --color-border: inherit;
    --color-border-rgb: inherit;
    --color-primary-button-background: inherit;
    --color-primary-button-text: inherit;
  }

  .header-section {
    position: relative;
    z-index: var(--layer-heightened);
  }

  /* need default values for non-flash transitions on first overflow menu open */
  #header-component {
    --submenu-height: 0px;
    --full-open-header-height: 0px;
  }

  #header-group:has(#header-component[sticky]) {
    display: contents;
  }

  .header-section:has(> #header-component[sticky='always']),
  .header-section:has(> #header-component[sticky='scroll-up'][data-sticky-state='active']) {
    position: sticky;

    /* Use -1 instead of 0 so intersection observer can track sticky state */
    top: -1px;
    z-index: var(--layer-sticky);
  }

  .header[data-sticky-state] {
    transition: opacity var(--animation-speed) var(--animation-easing);
    opacity: 1;
  }

  .header[data-sticky-state='active'] {
    view-transition-name: sticky-header;
  }

  :active-view-transition-type(empty-cart-drawer) {
    .header[data-sticky-state='active'] {
      view-transition-name: none;
    }
  }

  .header[data-sticky-state='idle'] {
    opacity: 0;
  }

  /* ================================
     * Underlays
     * ================================ */
  .header__underlay {
    position: absolute;
    inset: 0;
  }

  .header__underlay-closed {
    height: var(--closed-underlay-height, 100%);
    z-index: var(--layer-lowest);
    background: linear-gradient(
      var(--color-scheme-top-row) 0 var(--top-row-height),
      var(--color-scheme-bottom-row) var(--top-row-height) var(--header-height)
    );
    transition: height var(--animation-speed-slow) var(--ease-out-cubic);
  }

  .header__underlay-open {
    height: var(--full-open-header-height);
    background: linear-gradient(
      var(--color-scheme-top-row) 0 var(--top-row-height),
      var(--color-scheme-bottom-row) var(--top-row-height) var(--header-height),
      var(--color-submenu) var(--header-height) 100%
    );
    /* header-height is updated via js, the transition works automagically */
    transition: height var(--submenu-animation-speed) var(--ease-out-cubic);
  }

  .header__underlay-open::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: var(--shadow-popover);
    clip-path: inset(var(--header-height) 0 -100px 0); /* stylelint-disable-line */
    transition: height var(--submenu-animation-speed) var(--ease-out-cubic);
  }

  /* When top row has transparent background, make underlay inherit colors from header component */
  [data-transparent-color-scheme='top']:hover,
  [data-transparent-color-scheme='top']:focus-within,
  [data-transparent-color-scheme='both']:hover,
  [data-transparent-color-scheme='both']:focus-within {
    :is(.header__underlay-open, .header__underlay-closed) {
      --color-scheme-top-row: var(--color-background);
    }
  }

  /* When bottom row has transparent background, make underlay inherit colors from header component */
  [data-transparent-color-scheme='bottom']:hover,
  [data-transparent-color-scheme='bottom']:focus-within,
  [data-transparent-color-scheme='both']:hover,
  [data-transparent-color-scheme='both']:focus-within {
    :is(.header__underlay-open, .header__underlay-closed) {
      --color-scheme-bottom-row: var(--color-background);
    }
  }

  [data-submenu-overlap-bottom-row] {
    .header__underlay-open {
      background: linear-gradient(
        var(--color-scheme-top-row) 0 var(--top-row-height),
        var(--color-submenu) var(--top-row-height) 100%
      );
    }

    .header__row--bottom {
      z-index: var(--layer-lowest);
    }
  }

  /* End Underlays ================ */

  .header__row {
    /* The account component uses a different color scheme, but we need to override it to inherit the color of the header row */
    --color-account-icon: var(--color-foreground);

    position: relative;

    /* Overwrite color from color scheme, background is controlled by the underlays */
    background-color: transparent;

    &:has(.mega-menu__list:hover),
    &:has(.menu-list__link[aria-haspopup]:is(:hover, [aria-expanded='true'])),
    &:has(.menu-list__list-item[slot='overflow'] .menu-list__link:is(:hover, [aria-expanded='true'])) {
      /* Only elevate the row when the submenu is open to avoid overlapping other elevated content */
      z-index: var(--layer-heightened);
    }
  }

  .header__row--top:not(.divider--page-width),
  .header__row--top.divider--page-width .header__columns,
  .header__row--bottom {
    border-bottom: var(--border-bottom-width) solid var(--color-border);
  }

  @media screen and (max-width: 749px) {
    .header__row--top:not(.divider--page-width),
    .header__row--top.divider--page-width .header__columns {
      border-bottom-width: var(--border-bottom-width-mobile);
    }
  }

  #header-component[data-menu-style='drawer'] .header__row--top:not(.divider--page-width),
  #header-component[data-menu-style='drawer'] .header__row--top.divider--page-width .header__columns {
    border-bottom-width: var(--border-bottom-width-mobile);
  }

  .header__row.divider--page-width:not(.section--page-width) .header__columns {
    @media screen and (min-width: 750px) {
      padding-inline-start: 0;
      padding-inline-end: 0;
      margin-inline-start: var(--page-margin);
      margin-inline-end: var(--page-margin);
    }
  }

  .header__column {
    display: flex;
    align-items: center;

    /* on mobile, header__column nodes are ignored to create a new grid-template-area based on all visible content */
    @media screen and (max-width: 749px) {
      display: contents;
    }
  }

  .header__column--left,
  .header__column--center {
    gap: var(--gap-xl);
    grid-area: left;
  }

  .header__column--center {
    justify-content: center;
    grid-area: center;

    header-menu:only-child .overflow-menu::part(list) {
      justify-content: center;
    }
  }

  .header__column--right {
    gap: var(--gap-xl);
    justify-content: flex-end;
    grid-area: right;

    .overflow-menu::part(list) {
      justify-content: flex-end;
    }
  }

  .header__columns {
    /* Three column layout */
    --header-left: 1fr;
    --header-center: auto;
    --header-right: 1fr;
    --header-template-columns: var(--header-left) var(--header-center) var(--header-right);

    /* Mobile layout */
    --header-mobile-bookend: 44px;

    display: grid;
    grid-template-areas: 'left center right';
    grid-gap: var(--gap-xl);
    grid-template-columns: var(--header-template-columns);

    /* If menu is in center column */
    &:has(.header__column--center header-menu) {
      --header-center: auto;
      --header-left: minmax(max-content, 1fr);
      --header-right: minmax(max-content, 1fr);
    }

    /* If there is no center column, make the column the menu is in grow eagerly */
    &:where(:not(:has(.header__column--center))) {
      @media screen and (min-width: 750px) {
        --header-template-columns: var(--header-left) var(--header-right);

        grid-template-areas: 'left right';
      }

      /* If the header-menu is in the right column */
      &:has(.header__column--right header-menu) {
        --header-right: auto;
        --header-left: minmax(max-content, 1fr);
      }

      /* If the header-menu is in the left column */
      &:has(.header__column--left header-menu) {
        --header-left: auto;
        --header-right: minmax(max-content, 1fr);
      }
    }

    @media screen and (max-width: 749px) {
      --header-template-columns: var(--header-mobile-bookend) var(--header-mobile-bookend) 1fr
        var(--header-mobile-bookend) var(--header-mobile-bookend);

      grid-template-areas: 'leftA leftB center rightA rightB';
      grid-column: span 3;
      column-gap: 0;
      align-items: center;
      padding-block: 0;
      padding-inline: 0 var(--padding-3xs);

      .header-logo {
        grid-area: center;
      }

      &:not(:has(header-actions)) .search-action {
        grid-area: leftB;
      }

      &:not(:has(shopify-account)) .search-action {
        grid-area: rightA;
      }

      .search-action {
        grid-area: leftB;
      }

      header-actions {
        grid-area: rightB;
      }
    }
  }

  /* not ideal but we need to duplicate these styles for when touch comes into play
    We could avoid the duplication using js to set the data-menu-style attribute on small screens instead of using @media queries */
  #header-component[data-menu-style='drawer'] .header__columns {
    --header-template-columns: var(--header-mobile-bookend) var(--header-mobile-bookend) 1fr
      var(--header-mobile-bookend) var(--header-mobile-bookend);

    grid-template-areas: 'leftA leftB center rightA rightB';
    grid-column: span 3;
    column-gap: 0;
    align-items: center;
    padding-block: 0;
    padding-inline: 0 var(--padding-3xs);

    .header-logo {
      grid-area: center;
    }

    &:not(:has(header-actions)) .search-action {
      grid-area: leftB;
    }

    &:not(:has(shopify-account)) .search-action {
      grid-area: rightA;
    }

    .search-action {
      grid-area: leftB;
    }

    header-actions {
      grid-area: rightB;
    }
  }

  /* Single column layout if there are no columns within */
  .header__columns:not(:has(.header__column)) {
    grid-template-columns: 1fr;
  }

  /* Check for hover support to avoid unnecessary expensive recalculations when tapping on mobile */
  @media (hover: hover) {
    /* Column-specific dimming effect when any interactive element is hovered
        Multiple selectors for performance: each simple :has() check is faster than one complex selector with multiple conditions */
    .header__column:has(header-menu:hover),
    .header__column:has(.header-actions__action:hover),
    .header__column:has(.header__icon--menu:hover) {
      header-menu:not(:hover),
      .header-actions__action:not(:hover),
      .header__icon--menu:not(:hover) {
        opacity: var(--opacity-subdued-text);
        transition: opacity var(--animation-speed) var(--animation-easing);
      }
    }
  }

  /* Ensure smooth transitions for all interactive elements */
  header-menu,
  .header-actions__action,
  .header__icon--menu {
    transition: opacity var(--animation-speed) var(--animation-easing);
  }

  /* Header action button styles */
  .header-actions__action {
    --button-color: var(--color-foreground);
    color: var(--button-color);
    cursor: pointer;
    display: flex;
    justify-content: center;

    &:hover {
      --button-color: var(--color-foreground);
    }
  }

  .header-actions__action:not(.account-button) .svg-wrapper {
    height: var(--button-size);
    width: var(--button-size);
  }

  .header-actions__action.action__cart {
    border: 1px solid #0A3161;
    border-radius: 10px;
  }

  @media screen and (min-width: 750px) {
    /* Logo keeps its width; the search + account/cart side takes the rest of the row */
    .header__row--top .header__columns:has(.header-inline-search) {
      grid-template-columns: auto minmax(0, 1fr);
      column-gap: 48px;
    }

    /* Cart link as a pill matching the account button: bag icon + "Cart" */
    .header-actions__action.action__cart {
      width: auto;
      height: 48px;
      padding: 0 18px;
      color: #0A3161;
    }

    .header-actions__action.action__cart:hover {
      background: rgb(10 49 97 / 0.06);
    }

    .header-actions__action.action__cart cart-icon {
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .header-actions__action.action__cart cart-icon > .svg-wrapper {
      width: 22px;
      height: 22px;
    }
  }

  /* Labels are hidden in this range: account and cart become matching 48px circles */
  @media screen and (min-width: 750px) and (max-width: 1280px) {
    .header-actions__action.action__cart,
    header-actions .account-button--pill shopify-account {
      justify-content: center;
      width: 48px;
      padding: 0;
    }
  }

@media screen and (max-width: 749px) {
  .header-actions__action.action__cart {
    border: none;
  }

  /* Phones: 24px thin-line account/cart icons on 40px tap targets, sitting closer together */
  header-actions .header-actions__action {
    --button-size: 40px;
    width: 40px;
    min-width: 40px;
  }

  header-actions .account-button svg,
  header-actions .header-actions__action .header-actions__cart-svg--mobile svg {
    width: 24px;
    height: 24px;
  }

  header-actions .account-button svg path {
    stroke-width: 1.45;
  }

  /* Three-line menu icon (assets/icon-menu.svg), drawn at 26px; the wrapper too, since svgs
     are capped at max-width: 100% of it */
  .header__icon--menu .header-drawer-icon.header-drawer-icon--open,
  .header__icon--menu .header-drawer-icon.header-drawer-icon--open svg {
    width: 26px;
    height: 26px;
  }
}

  .header-actions__action:not(.account-button) svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
    color: #0A3161;
  }

  .header:has(#Details-menu-drawer-container[open]) {
    contain: style;
  }

  .header.header--compact {
    --header-padding: var(--padding-2xs);
  }

  .header__columns {
    --padding-block-start: var(--header-padding);
    --padding-block-end: var(--header-padding);
  }

  .header:not(.header--compact) .header__row--bottom {
    --header-padding: var(--padding-xs);
  }

  /*
    Whole-pixel padding on the logo row. --padding-sm is 0.7rem (11.2px), which made the row
    78.39px tall, while utilities.js/header.js store --top-row-height/--header-height as rounded
    integers. The red menu bar is painted by the underlay gradient from those integers, so it sat
    0.39px above the real menu row and the hovered item's fill poked out under it.
  */
  .header__row--top .header__columns {
    padding-block: var(--header-padding);
    padding-block: round(nearest, var(--header-padding), 1px);
  }

  /*
    Phones hide the red menu row, but the underlay gradient still paints its color from
    --top-row-height to --header-height. Those JS values can go stale (e.g. after resizing from a
    desktop width), which showed a red strip under the logo row. Use the logo row's color instead.
  */
  @media screen and (max-width: 749px) {
    :is(.header__underlay-closed, .header__underlay-open) {
      --color-scheme-bottom-row: var(--color-scheme-top-row);
    }

    /*
      Hairline under the logo row on phones: the theme's own row border (scheme border color) at 1px.
      The header's "Border thickness" setting would also draw it under the red menu row on desktop,
      so only the phone width is set here (on the columns, which carry the border in this layout).
    */
    .header__row--top .header__columns {
      --border-bottom-width-mobile: 1px;
    }
  }

  .header--collapse-row-paddings {
    .header__row--top .header__columns {
      --padding-block-end: 0px;
    }

    .header__row--bottom .header__columns {
      --padding-block-start: 0px;
    }
  }

  /* When the header is transparent, add a margin to a potential header-section below it */
  .header-section:has(.header[transparent]) + .shopify-section {
    margin-top: var(--header-height);
  }

  /* When the header is transparent, and when there is no header-section below it, offset the first main-section with
     * the height of the header
     */

  main > .shopify-section:first-child .section:not(.disable-section-top-offset) {
    &.spacing-style,
    .spacing-style {
      --section-top-offset: calc(var(--header-height) * var(--transparent-header-offset-boolean));

      /* Any nested sections should not be offset */
      :is(.spacing-style, .inherit-spacing) {
        --section-top-offset: 0px;
      }
    }

    /* Make sticky content immediately stick to the top of the page */
    .sticky-content {
      margin-top: calc(var(--header-height) * var(--transparent-header-offset-boolean) * -1);
    }
  }

  /* Optimize layout performance for hidden menus */
  .header-menu .menu-list__submenu {
    content-visibility: auto;
    contain-intrinsic-size: 0px 500px;
  }

  /* Force visibility when open/animating and in overflow submenu to prevent layout issues */
  .header-menu details[open] .menu-list__submenu,
  .header-menu .menu-list__submenu[data-active],
  .header-menu .menu-list__list-item[slot='overflow'] .menu-list__submenu {
    content-visibility: visible;
  }

  /* Dropdown Localization Styles */
  .dropdown-localization__button {
    display: flex;
    position: relative;
    align-items: center;
    gap: 4px;
    font-family: var(--menu-localization-font);
    font-size: var(--menu-localization-font-size);
    font-weight: var(--menu-top-level-font-weight);
    padding-inline: var(--padding-2xs);
    margin-inline: calc(-1 * var(--padding-2xs));
  }

  .dropdown-localization__button .svg-wrapper.icon-caret {
    height: var(--icon-size-xs);
    width: var(--icon-size-xs);
    right: var(--margin-xs);
    top: calc(50% - var(--padding-2xs));
    flex-shrink: 0;
    transition: transform var(--animation-speed) var(--animation-easing);
  }

  .dropdown-localization__button .icon-flag {
    width: var(--menu-localization-font-size, var(--icon-size-sm));
    height: var(--menu-localization-font-size, var(--icon-size-sm));
    clip-path: circle(50%); /* stylelint-disable-line */
    background-position: center;
    background-size: cover;
    margin-inline-end: 4px;
    position: relative;
  }

  .dropdown-localization__button .icon-flag::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 var(--size-shadow) var(--color-shadow);
    border-radius: 50%;
  }

  .dropdown-localization__button[aria-expanded='true'] .icon-caret svg {
    transform: rotate(180deg);
  }

  .dropdown-localization__button,
  .dropdown-localization__button:hover {
    box-shadow: none;
    background-color: transparent;
    border-color: transparent;
  }

  dropdown-localization-component .localization-form__list {
    max-height: 20.5rem;
  }

  .localization-wrapper {
    position: fixed;
    z-index: var(--layer-raised);
    border-radius: var(--style-border-radius-popover);
    transition-property: display, opacity, translate;
    transition-duration: 0.3s;
    transition-timing-function: var(--ease-out-quad);
    transition-behavior: allow-discrete;
    translate: 0 20px;
    opacity: 0;
  }

  .localization-wrapper:not([hidden]) {
    translate: 0 0;
    opacity: 1;
  }

  @starting-style {
    .localization-wrapper:not([hidden]) {
      translate: 0 20px;
      opacity: 0;
    }
  }

  dropdown-localization-component {
    position: relative;
    background-color: transparent;
  }

  dropdown-localization-component .country-filter {
    position: relative;
    padding: 8px;
  }

  dropdown-localization-component .country-filter__input {
    border: none;
  }

  dropdown-localization-component .localization-form__list-item {
    margin-inline: 8px;
  }

  dropdown-localization-component .localization-wrapper {
    box-shadow: var(--shadow-popover);
    border: var(--style-border-popover);
    background-color: var(--color-background);
    max-height: 27.5rem;
    position: absolute;
    top: calc(100% + 10px);
    z-index: calc(var(--layer-header-menu) + 1);
  }

  dropdown-localization-component .localization-wrapper.right-bound {
    right: 0;
    left: unset;
  }

  dropdown-localization-component .localization-wrapper.left-bound {
    left: -8px;
    right: unset;
  }

  /* Additional specificity due to dropdown-localization-component getting a low score */
  dropdown-localization-component .language-selector.language-selector {
    padding: 10px 8px 10px 16px;
  }

  dropdown-localization-component .localization-form__currency {
    width: max-content;
    opacity: 0;
    visibility: hidden;
    transition: none;
  }

  dropdown-localization-component .localization-form__select:hover {
    background-color: rgb(var(--color-primary-hover-rgb) / var(--opacity-8));
  }

  dropdown-localization-component
    :is(
      .localization-form__list-item:hover,
      .localization-form__list-item[aria-selected='true'],
      .localization-form__list-item[aria-current='true']
    )
    .localization-form__currency {
    opacity: 1;
    color: var(--color-foreground-muted);
    transition: opacity var(--animation-speed-slow) var(--animation-easing);
    visibility: visible;
  }

  .dropdown-localization .language-selector:where(:not(.top-shadow)) {
    font-weight: var(--menu-top-level-font-weight);
  }

  .dropdown-localization:not(dropdown-localization-component) .language-selector {
    font-family: var(--menu-localization-font);
    font-size: var(--menu-localization-font-size);
  }

  /* ── New additions: promo pill + inline search bar ── */

  /* Let the column holding the inline search bar actually grow to fill
     the row, instead of collapsing to its content's min-width (the
     center column especially is normally sized for a nav menu, not an
     input). */
  .header__column:has(.header-inline-search) {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* The search takes all the room between the logo and the account/cart pills */
  .header-inline-search {
    width: 100%;
    max-width: none;
    margin-right: 12px;
  }
  
  /* Compacts the shared search-page-input-component for header use —
     its own file (blocks/_search-input.liquid) keeps its normal,
     roomier styling for the standalone search results page. */
  .header-inline-search .search-page-input-component {
    width: 100%;
    max-width: none;
    margin: 0;
  }

  /* A quiet field rather than another button: soft fill, light blue-grey border, smaller corners */
  .header-inline-search .search-page-input {
    height: 48px;
    padding-block: 0;
    border: 1px solid #c1cbd8;
    border-radius: 10px;
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
    font-size: 15px;
  }

  .header-inline-search .search-page-input::placeholder {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-50));
  }

  .header-inline-search .search-page-input:is(:focus, :focus-visible) {
    outline: none;
    box-shadow: inset 0 0 0 1.5px rgb(var(--color-foreground-rgb) / var(--opacity-20));
  }

  .header-inline-search search-page-input-component .search__icon {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-60));
  }

  @media screen and (min-width: 750px) and (max-width: 768px) {
    .header-inline-search {
      width: 100%;
      max-width: none;
      margin-right: 4px;
    }
    .header-promo__divider {
      display: none;
    }
    header-actions .account-button--pill .account-button__text {
      display: none;
    }
    header-actions .account-button--pill shopify-account {
      padding: 0;
    }
    search-page-input-component .search__icon {
      left: 7px;
    }
    .header-inline-search .search-page-input {
      padding-left: 36px;
      padding-right: 0;
    }
  }

  /* Tablet css */                                                                      
  @media screen and (min-width: 769px) and (max-width: 1280px) {                                                                         
    header-actions .account-button--pill .account-button__text {
      display: none;
    } 
    header-actions .account-button--pill shopify-account {
      padding: 0;
    }  
    .header-inline-search {
      width: 100%;
      max-width: none;
      margin-right: 4px;
    } 
    .header-inline-search .search-page-input {
      padding: 10px;
      padding-left: 46px;
    }
    search-page-input-component .search__icon {
      left: 7px;
    }                                                                                                                    
  }  

  @media screen and (max-width: 749px) {
    .header-inline-search {
      display: none;
    }
  }
/* END_SECTION:header */
/* START_SECTION:mockup-request-popup (INDEX:129) */
.mrp-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,0.6);
    align-items: center;
    justify-content: center;
    padding: 20px;
  }
  .mrp-overlay.is-open { display: flex; }

  .mrp-dialog {
    position: relative;
    display: grid;
    grid-template-columns: 310px 1fr;
    width: 958px;
    max-width: calc(100vw - 40px);
    /* Cap to the viewport; .mrp-right scrolls inside it. */
    max-height: calc(100dvh - 40px);
    /* Cap the ROW too: an auto row sizes to its tallest item's max-content and
       would grow straight past the max-height above, leaving the dialog to
       clip instead of its columns to scroll. */
    grid-template-rows: minmax(0, 1fr);
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 24px 80px rgba(0,0,0,0.3);
  }


  /* Capped dialog: each column scrolls rather than being clipped. */
  /* A grid item defaults to min-height:auto and will not shrink below its
     content, so overflow-y above never engages and the dialog clips instead
     of scrolling. This is what makes the submit button reachable on short
     screens. */
  .mrp-left, .mrp-right { overflow-y: auto; min-height: 0; }
  .mrp-close {
    position: absolute;
    top: 14px; right: 14px;
    z-index: 10;
    width: 32px; 
    height: 32px;
    display: grid; 
    place-items: center;
    border: none; 
    border-radius: 50%;
    background: #00000012;
    color: #000000; 
    cursor: pointer;
    transition: background 0.15s;
  }
  .mrp-close:hover { background: rgba(255,255,255,0.32); }

  /* Left panel */
  .mrp-left {
    background-color: var(--mrp-panel-bg, #0B2A5F);
    background-size: cover; 
    background-position: center;
    color: var(--mrp-panel-text, #c8d8f0);
    padding: 32px 22px 28px;
    display: flex; 
    flex-direction: column; 
    gap: 22px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.2) transparent;
  }
  .mrp-badge { text-align: center; }
  .mrp-badge__laurel { width: 160px; height: auto; display: block; margin: 0 auto 6px; color: var(--mrp-panel-text, #c8d8f0); }
  /* .mrp-badge__img    { width: 120px; height: auto; display: block; margin: 0 auto 6px; object-fit: contain; } */
  .mrp-badge__label  { color: var(--mrp-panel-text, #c8d8f0); font-size: 12px; margin: 0; line-height: 1.4; opacity: 0.85; }
  .mrp-badge__years  { display: none; font-size: 28px; font-weight: 700; color: #fff; line-height: 1.2; }

  .mrp-trust { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; border-top: 1px solid rgba(255,255,255,0.12); padding-top: 20px; }
  .mrp-trust__item { display: flex; align-items: flex-start; gap: 10px; }
  .mrp-trust__icon { flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px; display: flex; align-items: center; color: var(--mrp-accent, #C0192B); }
  .mrp-trust__icon svg, .mrp-trust__icon img { display: block; }
  .mrp-trust__item strong { display: block; color: #fff; font-size: 12px; font-weight: 600; }
  .mrp-trust__item span   { display: block; color: var(--mrp-panel-text, #c8d8f0); font-size: 11px; margin-top: 1px; opacity: 0.8; }

  .mrp-steps { border-top: 1px solid rgba(255,255,255,0.12); padding-top: 20px; }
  .mrp-steps h4 { color: #fff; font-size: 13px; font-weight: 600; margin: 0 0 12px; }
  .mrp-steps ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
  .mrp-steps li { display: flex; align-items: flex-start; gap: 10px; color: var(--mrp-panel-text, #c8d8f0); font-size: 12px; line-height: 1.5; }
  .mrp-steps li span { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--mrp-accent, #C0192B); color: #fff; font-size: 10px; font-weight: 700; display: grid; place-items: center; margin-top: 1px; }

  /* Right panel */
  .mrp-right { overflow-y: auto; }
  .mrp-form-wrap { padding: 14px 36px 20px; }
  .mrp-dialog h2 { font-size: 24px; font-weight: 700; color: #111; margin: 0 0 4px; }
  .mrp-subtitle   { color: #777; font-size: 13px; margin: 0 0 16px; }

  .mrp-form { display: flex; flex-direction: column; gap: 4px; }
  /* Without this the display above outranks the browser's [hidden] rule
     and form.hidden = true is silently ignored. */
  .mrp-form[hidden] { display: none; }
  .mrp-field { display: flex; flex-direction: column; gap: 2px; }
  .mrp-field label { font-size: 13px; font-weight: 500; color: #333; }
  .mrp-req { color: var(--mrp-accent, #C0192B); margin-left: 1px; }

  .mrp-field input,
  .mrp-field select,
  .mrp-field textarea {
    width: 100%; padding: 9px 12px;
    border: 1px solid #ddd; border-radius: 8px;
    font-size: 13px; color: #222; background: #fff;
    box-sizing: border-box; font-family: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
  }
  .mrp-field input:focus,
  .mrp-field select:focus,
  .mrp-field textarea:focus {
    outline: none;
    border-color: var(--mrp-focus, #0B2A5F);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mrp-focus, #0B2A5F) 12%, transparent);
  }
  .mrp-field input.mrp-invalid  { border-color: #C0192B; background: #fff8f8; }
  .mrp-field input.mrp-invalid:focus { box-shadow: 0 0 0 3px rgba(192,25,43,0.12); }
  .mrp-field textarea { resize: none; }
  .mrp-dimensions { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
  .mrp-field-error { font-size: 11px; color: #C0192B; min-height: 14px; line-height: 1.3; }

  .mrp-date-field .pdm-event-date {
    padding: 10px;
    gap: 6px;
    margin-top: 0;
  }
  .mrp-date-field .pdm-event-date__text h3 {
    font-size: 13px;
    font-weight: 500;
  }
  .mrp-date-field .pdm-event-date__text p,
  .mrp-date-field .pdm-event-date__notice p {
    font-size: 12px;
  }
  .mrp-date-field .pdm-event-date__notice svg {
    width: 16px;
  }
  .mrp-date-field .pdm-event-date__notice strong {
    font-weight: 500;
  }
  .mrp-date-field .pdm-event-date__btn {
    padding: 6px 14px;
  }
  .mrp-date-field .pdm-event-date__notice {
    padding: 4px 12px;
  }

  /* Upload section */
  .mrp-upload { display: flex; flex-direction: column; gap: 0; }
  .mrp-upload__label { font-size: 13px; font-weight: 500; color: #333; margin: 0 0 8px; }

  .mrp-upload__tabs {
    display: flex;
    border-radius: 8px 8px 0 0;
    overflow: hidden;
    border: 1px solid #ddd;
    border-bottom: none;
  }
  .mrp-tab {
    flex: 1;
    display: flex; align-items: center; justify-content: center; gap: 5px;
    padding: 9px 10px;
    border: none; background: #f5f5f5;
    color: #555; font-size: 12px; font-weight: 500;
    cursor: pointer; font-family: inherit;
    transition: background 0.15s, color 0.15s;
    border-right: 1px solid #ddd;
  }
  .mrp-tab:last-child { border-right: none; }
  .mrp-tab.is-active { background: var(--mrp-panel-bg, #0B2A5F); color: #fff; }

  .mrp-upload__panels { border: 1px solid #ddd; border-radius: 0 0 8px 8px; }

  .mrp-panel { padding: 12px; }

  /* Dropzone */
  .mrp-dropzone {
    display: flex; flex-direction: column; align-items: center;
    gap: 6px;
    border: 1.5px dashed #ccc; border-radius: 8px;
    cursor: pointer; text-align: center;
    transition: border-color 0.15s, background 0.15s;
  }
  .mrp-dropzone:hover,
  .mrp-dropzone.is-over { border-color: var(--mrp-panel-bg, #0B2A5F); background: #f0f4fb; }
  .mrp-dropzone svg { color: #aaa; }
  .mrp-dropzone__cta { font-size: 13px; color: #444; }
  .mrp-dropzone__cta u { color: var(--mrp-panel-bg, #0B2A5F); text-decoration-color: var(--mrp-panel-bg, #0B2A5F); }
  .mrp-dropzone__file { font-size: 13px; font-weight: 500; color: var(--mrp-panel-bg, #0B2A5F); }
  .mrp-dropzone small { font-size: 11px; color: #aaa; }
  .mrp-file-input { display: none; }

  .mrp-panel input[type="url"] {
    width: 100%; padding: 9px 12px;
    border: 1px solid #ddd; border-radius: 8px;
    font-size: 13px; box-sizing: border-box; font-family: inherit;
  }
  .mrp-panel input[type="url"]:focus { outline: none; border-color: var(--mrp-focus, #0B2A5F); }

  .mrp-email-note { font-size: 13px; color: #555; line-height: 1.6; margin: 4px 0; }

  /* Button */
  /* Off-screen, not display:none - some bots skip hidden inputs. */
  .mrp-honeypot {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .mrp-submit {
    width: 100%; padding: 13px;
    background: var(--mrp-btn-bg, #9B1D2A);
    color: var(--mrp-btn-text, #fff);
    border: none; border-radius: 8px;
    font-size: 15px; font-weight: 600;
    cursor: pointer; font-family: inherit;
    transition: filter 0.15s; letter-spacing: 0.01em;
    margin-top: 4px;
  }
  .mrp-submit:hover:not(:disabled) { filter: brightness(0.88); }
  .mrp-submit:disabled { opacity: 0.6; cursor: not-allowed; }
  .mrp-note { text-align: center; font-size: 12px; color: #aaa; margin: 0; }

  /* Success */
  /* /* Visibility comes from the [hidden] attribute the submit handler toggles;
     the hardcoded display:none that used to be here beat it, so the
     confirmation never appeared. */
  .mrp-success[hidden] { display: none; }
  .mrp-success { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 60px 28px 40px; gap: 12px; } */
  .mrp-success h3 { font-size: 22px; color: #111; margin: 0; }
  .mrp-success p  { color: #666; font-size: 14px; line-height: 1.6; margin: 0; }

  /* Tablet */
  @media screen and (min-width: 750px) and (max-width: 989px) {
    .mrp-dialog { grid-template-columns: 260px 1fr; width: 100%; height: 666px; }
    .mrp-form-wrap { padding: 24px 22px; }
  }

  /* Mobile */
  @media screen and (max-width: 749px) {
    .mrp-overlay { padding: 0; align-items: flex-end; }
    .mrp-dialog { grid-template-columns: 1fr; width: 100%; height: auto; min-height: 420px; max-height: 92dvh; border-radius: 20px; bottom: 10%; }
    .mrp-left { display: none; }
    .mrp-right { overflow-y: auto; }
    .mrp-close { background: rgba(0,0,0,0.07); color: #444; }
    .mrp-form-wrap { padding: 24px 20px 20px; }
    .mrp-dialog h2 { font-size: 20px; }
    .mrp-form {
        overflow-y: scroll;
        max-height: 500px;
    }
    .mrp-dimensions { grid-template-columns: 1fr 1fr; }
    .mrp-dimensions .mrp-field:last-child { grid-column: 1 / -1; }

  }
/* END_SECTION:mockup-request-popup */
/* START_SECTION:product-faq-metafields (INDEX:141) */
.product-faq-metafields {
    background: #f6f6f6;
  }

  .product-faq-metafields__inner {
    max-width: 900px;
    margin: 0 auto;
  }

  .product-faq-metafields h2 {
    color: var(--faq-heading-color);
    text-align: center;
    font-size: 40px;
    line-height: 50px;
    font-weight: 500;
    margin-bottom: 40px;
  }

  .product-faq-metafields__item {
    margin-bottom: 16px;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 4px 12px #1B1C1D0A;
    border: 1px solid #E8E8E8;
  }

  .product-faq-metafields__item summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 62px;
    padding: 10px 24px;
    cursor: pointer;
    font-weight: 500;
    list-style: none;
    font-size: 18px;
    color: #1A1A1A;
  }

  .product-faq-metafields__item summary span {
    font-size: 24px;
    color: #777777;
    display: inline-block;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .product-faq-metafields__item summary::-webkit-details-marker {
    display: none;
  }

  .product-faq-metafields__item[open] summary span {
    transform: rotate(45deg);
  }

  /* Wrapper — JS animates only this element's height */
  .product-faq-metafields__item .faq-body {
    display: block !important;
    overflow: hidden;
    height: 0;
  }

  /* Inner content — padding stays fixed, never animated */
  .product-faq-metafields__item .rte {
    padding: 0 24px 22px;
    color: #666;
  }

  @media screen and (max-width: 989px) {
    .product-faq-metafields__inner {
      padding: 0 20px;
    }
  }

  @media screen and (max-width: 749px) {
    .product-faq-metafields__inner {
      padding: 0 20px;
    }
  }
/* END_SECTION:product-faq-metafields */
/* START_BLOCK:_header-logo (INDEX:191) */
.header-logo {
    display: flex;
    height: 100%;
    font-size: var(--font-size--md);
    font-family: var(--font-family);
    font-weight: var(--font-weight);
    font-style: var(--font-style);
    color: var(--color-foreground);
    justify-content: center;
    align-items: center;
    text-decoration: none;

    &[data-hidden-on-home-page] {
      display: none;

      #header-component:is(
          [sticky='always']:not([data-scroll-direction='none']),
          [sticky='scroll-up'][data-scroll-direction='up']
        )
        & {
        display: flex;
      }
    }

    @media screen and (max-width: 749px) {
      padding: 0;
    }

    @media screen and (min-width: 750px) {
      flex-shrink: 0;
    }

    &:hover {
      text-decoration: none;
    }
  }

  .header-logo__image {
    object-fit: contain;
    height: var(--header-logo-image-height-mobile);
    width: var(--header-logo-image-width-mobile);

    @media screen and (min-width: 750px) {
      height: var(--header-logo-image-height);
      width: var(--header-logo-image-width);
    }
  }

  .header-logo:has(.header-logo__image-container--inverse) .header-logo__image-container--original {
    display: var(--header-logo-display, block);
  }

  .header-logo__image-container--inverse {
    display: var(--header-logo-inverse-display, none);
  }
/* END_BLOCK:_header-logo */
/* START_BLOCK:_header-menu (INDEX:192) */
.header__drawer {
    --header-drawer-min-height: 60px;
    display: flex;
    min-height: var(--header-drawer-min-height);
    align-items: center;
  }

  #header-component[data-menu-style='drawer'] .header__drawer {
    display: flex;
    min-height: var(--header-drawer-min-height);
  }

  @media screen and (min-width: 750px) {
    #header-component[data-menu-style='menu'] .header__drawer {
      display: none;
      min-height: 0;
    }
  }

  .header--compact .header__drawer {
    min-height: var(--minimum-touch-target);
  }

  .menu-list--mobile {
    &.menu-list {
      display: grid;
    }

    & .menu-list__list {
      width: max-content;
      margin-inline: auto;
      gap: var(--menu-horizontal-gap);
    }

    & li {
      width: max-content;
      padding-block: var(--padding-sm);
    }

    & li:first-of-type {
      padding-inline-start: var(--menu-horizontal-gap);
    }

    & li:last-of-type {
      padding-inline-end: var(--menu-horizontal-gap);
    }

    & a {
      color: var(--color-foreground);
    }
  }

  .menu-list__scroll-container {
    position: relative;
    overflow-x: auto;
    mask-image: linear-gradient(to right, transparent, #000 20px, #000 calc(100% - 20px), transparent);
    padding-block: var(--padding-2xs);
  }

  .menu-list {
    --menu-horizontal-gap: var(--gap-xl);
    --menu-vertical-gap: var(--gap-xl);

    display: flex;
    height: 100%;
  }

  .menu-list__list {
    display: flex;
    justify-content: var(--grid-area-alignment);
  }

  .menu-list__list-item {
    flex-shrink: 0;
    white-space: nowrap;
    display: block;
    align-items: center;
    height: 100%;
    padding: 0;

    /*
      Extends the real hoverable box to match the visually taller red bar
      (the bar has ~--header-padding of breathing room above/below the
      23px-tall .menu-list row that align-items: center adds no hit area
      for). Without this, a fast swipe from below can carry the pointer
      through the narrow real hit area fast enough to fire pointerenter
      then pointerleave within ~30ms, flashing the submenu open and shut
      before it's perceptible. box-sizing: content-box + negative margin
      keeps the flex layout identical while growing only the hit box.
    */
    box-sizing: content-box;
    padding-block: var(--menu-bar-padding-block, var(--header-padding, 0.7rem));
    margin-block: calc(-1 * var(--menu-bar-padding-block, var(--header-padding, 0.7rem)));
    transition: background-color 0.15s;
  }

  /* Filled tab on the hovered/open item, a darker shade of the bar's own color scheme */
  .header-menu {
    --menu-top-level-hover-background: color-mix(in srgb, var(--color-background) 80%, black);
    --menu-item-padding-inline: 13px;
  }

  .menu-list__list-item:not([slot='overflow']):is(:hover, :has(> .menu-list__link[aria-expanded='true'])) {
    background-color: var(--menu-top-level-hover-background);
  }

  .menu-list__list-item[aria-hidden='true'] {
    visibility: hidden;
  }

  .menu-list__link {
    font-family: var(--menu-top-level-font-family);
    font-style: var(--menu-top-level-font-style);
    font-weight: var(--menu-top-level-font-weight);
    font-size: var(--menu-top-level-font-size);
    line-height: var(--menu-top-level-font-line-height);
    text-transform: var(--menu-top-level-font-case);
    color: var(--menu-top-level-font-color);
    text-decoration: none;
    /*display: flex;*/
    flex-direction: column;
    justify-content: center;
    cursor: pointer;
    height: 100%;
    margin-block: 0;

    &::after {
      content: '';
      position: absolute;
      display: none;
      top: var(--header-padding);
      height: var(--box-height);
      left: 0;
      right: 0;
    }

    &[data-safety-box='true']::after {
      display: block;
    }

    &:hover,
    &:focus {
      color: var(--menu-top-level-font-color);
    }

    @media screen and (min-width: 750px) {
      font-size: var(--menu-top-level-font-size-desktop);
      /* Main menu labels only (submenu links keep their own settings): the theme's medium weight */
      font-weight: var(--font-subheading--weight);
      /* base.css antialiases site-wide, which renders these labels visibly thinner on macOS */
      -webkit-font-smoothing: auto;
      -moz-osx-font-smoothing: auto;
    }
  }

  .menu-list__link-title {
    padding-inline: var(--menu-item-padding-inline);
  }
  /* Main items pad label and arrow together (below), so the arrow stays with its label */
  .menu-list__link-inner > .menu-list__link-title,
  [slot='overflow'] .menu-list__link-title {
    padding-inline: 0;
  }

   .menu-list__link-inner {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding-inline: var(--menu-item-padding-inline);
    /* With the li's block padding this makes each item exactly as tall as the bar */
    min-block-size: calc(var(--menu-bar-height, 0px) - 2 * var(--menu-bar-padding-block, 0px));
  }
  [slot='overflow'] .menu-list__link-inner {
    padding-inline: 0;
    min-block-size: 0;
  }

  .menu-list__link-icon {
    flex-shrink: 0;
    /* 14px renders the 2-unit stroke at ~1.2px, crisper than the 1px it gets at 12px */
    width: 14px;
    height: 14px;
    transition: transform 0.15s;
  }

  .menu-list__link[aria-expanded='true'] .menu-list__link-icon {
    transform: rotate(180deg);
  }

  .menu-list__link-inner::after {
    content: '';
    position: absolute;
    left: var(--menu-item-padding-inline);
    right: var(--menu-item-padding-inline);
    bottom: 0px;
    height: 2px;
    background: currentColor;
    transform: scaleX(0);
    transition: transform 0.15s;
  }

  /* Hover/open state is the filled tab above; the underline only marks the current section */
  .menu-list__link--active .menu-list__link-inner::after,
  .menu-list__link[aria-current='page'] .menu-list__link-inner::after {
    transform: scaleX(1);
  }

  .menu-list__list-item:not([slot='overflow']) {
    flex-direction: column;
  }
  .menu-list__list-item:not([slot='overflow'])::after {
    content: '';
    width: 100%;
    height: var(--header-padding);
    margin-bottom: calc(-1 * var(--header-padding));
  }

  [slot='overflow'] > .menu-list__link::after {
    content: none;
  }

  /*
    High specificity selectors to subdue non-hovered links without javascript.
    If the need for js-generated `hovered` and `focused` classes arises for another reason we can simplify these.
  */
  .menu-list:where(:has(.menu-list__list-item:hover)),
  .menu-list:where(:has(.menu-list__list-item:focus-within)),
  .menu-list:where(:has(.menu-list__list-item:not([aria-hidden='true']) .menu-list__link--active)) {
    /* "More" dropdown labels only: main bar labels stay full colour, the filled tab marks the hovered one */
    [slot='overflow'] > .menu-list__link {
      color: rgb(var(--menu-top-level-font-color-rgb) / var(--opacity-subdued-text));
    }
  }

  /* stylelint-disable-next-line selector-max-specificity */
  .menu-list:not(:has(.menu-list__list-item:hover)) .menu-list__link--active,
  .menu-list .menu-list__list-item:where(:hover, :focus-within) .menu-list__link,
  .menu-list .menu-list__list-item[slot='overflow'] .menu-list__link[aria-expanded='true'] {
    color: var(--menu-top-level-font-color);
  }

  .overflow-menu::part(list) {
    /* Make sure focus outline is not cut off by overflow hidden */
    --focus-outline-size: calc(var(--focus-outline-offset) + var(--focus-outline-width));

    gap: 0;
    margin-inline: calc(-1 * var(--menu-horizontal-gap) / 2);
    height: fit-content !important;
  }

  .overflow-menu {
    background-color: transparent;
    padding: var(--focus-outline-size);
    margin: calc(-1 * var(--focus-outline-size));
  }

  /** mega menu **/
  .menu-list__submenu,
  .overflow-menu::part(overflow) {
    --submenu-padding-block-start: var(--padding-3xl);
    --submenu-padding-block-end: var(--padding-3xl);

    background-color: transparent;
  }

  .header__row[style*='--border-bottom-width: 0px'] {
    .menu-list__submenu.color-scheme-matches-parent,
    .overflow-menu.color-scheme-matches-parent::part(overflow) {
      --submenu-padding-block-start: 0px;
    }
  }

  .menu-list__list-item:where(:not([slot='overflow'])) > .menu-list__submenu,
  .overflow-menu::part(overflow) {
    --submenu-content-opacity: 0;
    --submenu-content-animation: opacity calc(var(--submenu-animation-speed) * 0.75) var(--animation-easing);

    visibility: hidden;
    position: absolute;
    width: 100%;
    left: 0;
    top: calc(100% - 1px + var(--border-bottom-width) - (var(--full-open-header-height) - var(--submenu-height)));
    z-index: var(--layer-header-menu);
    padding-inline: var(--padding-inline);
    /* Clip path starts at header height so it doesn't mess with the pointer events in the header */
    clip-path: rect(var(--header-height) 100% var(--full-open-header-height) 0); /* stylelint-disable-line */
    transition: clip-path var(--submenu-animation-speed) var(--ease-out-cubic); /* stylelint-disable-line */
  }

  [data-submenu-overlap-bottom-row] {
    .menu-list__list-item:where(:not([slot='overflow'])) > .menu-list__submenu,
    .overflow-menu::part(overflow) {
      clip-path: rect(var(--top-row-height) 100% var(--full-open-header-height) 0); /* stylelint-disable-line */
    }
  }

  /* Show the submenus on hover */
  .menu-list__list-item:has([aria-expanded='true']) > .menu-list__submenu,
  /* Show the overflow menu when a menu item is hovered */
  .overflow-menu:has([slot="overflow"] [aria-expanded='true'])::part(overflow-list),
  /* Keep the submenus open when they are hovered */
  .menu-list__submenu:is(:hover),
  .overflow-menu::part(overflow):hover {
    --submenu-content-opacity: 1;

    visibility: visible;
  }

  .overflow-menu::part(overflow) {
    --menu-top-level-font-size: var(--font-size--xlarge);

    display: grid;
    grid-template-columns: var(--full-page-grid-with-margins);
  }

  .overflow-menu::part(overflow-list) {
    position: relative;
    display: grid;
    /* minmax(0, …) so a wide panel (e.g. the spotlight logo strip) can't squeeze the label column */
    grid-template-columns: minmax(auto, 200px) minmax(0, 1fr);
    grid-template-areas: 'left right';
    grid-template-rows: max-content;
    grid-gap: 0;
    grid-column: 2;
  }

  .menu-list__list-item:is([slot='overflow']) {
    --menu-top-level-font-color: var(--color-foreground);
    --menu-top-level-font-color-rgb: var(--color-foreground-rgb);

    display: contents;
    white-space: normal;

    .menu-list__link {
      grid-area: left;
      grid-row: auto;
      height: min-content;
      font-size: var(--font-size--md);
      white-space: nowrap;
      transition: var(--submenu-content-animation);
    }

    .menu-list__submenu {
      visibility: hidden;
      grid-row: 1;
      grid-area: right;
      grid-row-end: span calc(var(--overflow-count) + 1);
      padding-inline-start: var(--menu-horizontal-gap);
    }

    .menu-list__submenu-inner {
      transform: none;
      grid-column: unset;
      padding-block: 0;
    }

    .menu-list__link[aria-expanded='true'] + .menu-list__submenu {
      visibility: visible;
    }
  }

  .header-menu {
    height: 100%;
  }

  .menu-list__submenu-inner {
    position: relative;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .menu-list__submenu-inner,
  .overflow-menu::part(overflow-list) {
    padding-block-start: var(--submenu-padding-block-start);
    padding-block-end: var(--submenu-padding-block-end);
    padding-inline: var(--section-padding-inline);
    opacity: var(--submenu-content-opacity);
    transition: var(--submenu-content-animation);
    transform: translateY(calc(var(--full-open-header-height) - var(--submenu-height)));

    /* Make overflow menu scrollable when content exceeds viewport */
    max-height: calc(86vh - var(--header-height));
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgb(var(--color-foreground-rgb) / var(--opacity-40)) transparent;
  }

  .mega-menu__link {
    font-family: var(--menu-child-font-family);
    font-style: var(--menu-child-font-style);
    font-weight: var(--menu-child-font-weight);
    font-size: var(--menu-child-font-size);
    line-height: var(--menu-child-font-line-height);
    text-transform: var(--menu-child-font-case);
    color: var(--menu-child-font-color);
    white-space: normal;
    text-decoration: none;
    display: inline-flex;
    padding: var(--padding-2xs) 0;

    &:hover {
      color: var(--menu-child-active-font-color);
    }
  }

  .mega-menu__link--parent {
    font-family: var(--menu-parent-font-family);
    font-style: var(--menu-parent-font-style);
    font-weight: var(--menu-parent-font-weight);
    font-size: var(--menu-parent-font-size);
    line-height: var(--menu-parent-font-line-height);
    text-transform: var(--menu-parent-font-case);
    color: var(--menu-parent-font-color);

    &:hover {
      color: var(--menu-parent-active-font-color);
    }
  }

  @media screen and (max-width: 989px) {
    .mega-menu__content-list-item--hidden-tablet {
      display: none;
    }
  }

  .mega-menu__link:has(.mega-menu__link-image) {
    display: flex;
    flex-direction: column;
    padding-inline: 0;
    padding-block: var(--padding-sm) 0;
  }

  .mega-menu__link-image {
    width: 100%;
    position: relative;
    aspect-ratio: 16 / 9;
    margin-bottom: var(--padding-sm);
    object-fit: cover;
    border-radius: var(--menu-image-border-radius);
  }

  /* Fix alignment for collection image mode links without images */

  /* Target only top-level links (direct children of column > div) in collection image mode */
  .mega-menu__grid:has(.mega-menu__link-image)
    .mega-menu__column
    > div
    > .mega-menu__link:not(:has(.mega-menu__link-image)) {
    display: flex;
    flex-direction: column;
    padding-inline: 0;
    padding-block: var(--padding-sm) 0;
  }

  .mega-menu__grid:has(.mega-menu__link-image)
    .mega-menu__column
    > div
    > .mega-menu__link:not(:has(.mega-menu__link-image))::before {
    content: '';
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin-bottom: var(--padding-sm);
    background-color: var(--color-foreground-muted);
    opacity: 0.1;
    border-radius: var(--menu-image-border-radius);
  }

  .mega-menu__grid {
    display: grid;
    grid-template-columns: repeat(var(--menu-columns-tablet), minmax(0, 1fr));
    gap: var(--menu-vertical-gap) var(--menu-horizontal-gap);
    width: 100%;

    @media screen and (min-width: 990px) {
      grid-template-columns: repeat(var(--menu-columns-desktop), minmax(0, 1fr));
    }
  }

  .mega-menu__column {
    grid-column: span 1;
  }

  .mega-menu__column--span-2 {
    grid-column: span 2;
  }

  .mega-menu__column--span-3 {
    grid-column: span 3;
  }

  .mega-menu__column--span-4 {
    grid-column: span 4;
  }

  .mega-menu__column--wide-collection-image {
    grid-column: span 1;

    @media screen and (min-width: 990px) {
      grid-column: span 2;
    }
  }

  .mega-menu__submenu .mega-menu__column--wide-collection-image {
    grid-column: span 1;
  }

  .mega-menu__content-list {
    display: grid;
    justify-content: end;
    gap: var(--menu-vertical-gap) var(--menu-horizontal-gap);
  }

  .mega-menu__content-list--products {
    grid-template-columns: repeat(var(--menu-content-columns-tablet), minmax(0, 1fr));

    @media screen and (min-width: 990px) {
      grid-template-columns: repeat(var(--menu-content-columns-desktop), minmax(0, 1fr));
    }
  }

  .mega-menu__content-list--collections {
    grid-template-columns: repeat(var(--menu-content-columns-tablet), minmax(0, 300px));

    @media screen and (min-width: 990px) {
      grid-template-columns: repeat(var(--menu-content-columns-desktop), minmax(0, 300px));
    }
  }

  .mega-menu__list {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: span var(--menu-columns-tablet);
    gap: var(--menu-vertical-gap) var(--menu-horizontal-gap);

    @media screen and (min-width: 990px) {
      grid-column: span var(--menu-columns-desktop);
    }
  }

  .mega-menu__content {
    grid-column: span var(--menu-content-columns-tablet) / -1;

    @media screen and (min-width: 990px) {
      grid-column: span var(--menu-content-columns-desktop) / -1;
    }
  }

  .menu-list__list-item[slot='overflow'] .section {
    grid-template-columns: minmax(0, 1fr);
  }

  .menu-list__list-item[slot='overflow'] .section .mega-menu__grid {
    grid-column: 1;
  }

  .mega-menu__content-list li {
    white-space: normal;
  }

  /* mega more menu */
  .mega-menu__more-list {
    --menu-child-font-size: var(--font-size--xl);

    width: 200px;
  }

  .mega-menu__submenu {
    /* preserves the inherited grid layout when this submenu wrapper is used */
    display: contents;
  }
    /*
    Give the menu row a centered 1360px content track (used by the
    dropdown panels' content) while the maroon bar still spans edge to
    edge. The nav items span the full bar instead (see below).

    sections/header.liquid's .header__row--bottom is itself a CSS grid
    (".section") whose own content-column width comes from the
    site-wide --page-width variable (Theme Settings > Layout > Page
    width — currently "narrow", --narrow-page-width: 80rem = 1280px).
    That track is narrower than 1360px, so max-width on .header__columns
    alone was a no-op — a max-width bigger than the space the parent
    grid already allows never gets a chance to apply. Overriding
    --page-width here, scoped to just this row, widens its own track
    without touching the site-wide setting used everywhere else.
  */
  .header__row--bottom {
    --page-width: calc(1360px + var(--page-margin) * 2);
  }
  
   .header__row--bottom .header__columns {
    /* Shared with .menu-list__list-item so its box (and hover fill) spans the full 46px bar */
    --menu-bar-height: 46px;
    --menu-bar-padding-block: 10px;

    /*
      The nav items themselves use the full bar (the dropdown panels still get the 1360px
      track above), with no gaps around the empty side columns. overflow-list needs room for
      all 7 items plus its "More" button before it shows them all, which this gives from 1366px.
    */
    grid-column: 1 / -1;
    column-gap: 0;
    padding: var(--menu-bar-padding-block) clamp(8px, 2vw, 24px);
  }
/* END_BLOCK:_header-menu */
/* START_BLOCK:_header-utility-bar (INDEX:193) */
.header-utility-bar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    max-width: 1360px;
    margin: 0 auto;
    padding: 10px var(--page-margin);
    font-size: 13px;
  }

  .header-utility-bar__link {
    color: currentColor;
    text-decoration: none;
  }

  .header-utility-bar__right {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-left: auto;
  }

  .header-utility-bar__contact,
  .header-utility-bar__account {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: currentColor;
    text-decoration: none;
    white-space: nowrap;
  }

  .header-utility-bar__dropdown {
    position: relative;
    line-height: 0;
  }

  .header-utility-bar__trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: currentColor;
    cursor: pointer;
    list-style: none;
    padding: 0;
  }

  .header-utility-bar__trigger::-webkit-details-marker {
    display: none;
  }

  .header-utility-bar__trigger svg {
    transition: transform 0.15s;
  }

  .header-utility-bar__dropdown[open] .header-utility-bar__trigger svg {
    transform: rotate(180deg);
  }

  .header-utility-bar__menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    min-width: 170px;
    max-height: 280px;
    overflow-y: auto;
    padding: 8px 0;
    background: #ffffff;
    color: #1a1a1a;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgb(0 0 0 / 0.15);
    z-index: 20;
  }

  .header-utility-bar__menu li a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
  }

  .header-utility-bar__menu li a:hover {
    background: rgb(0 0 0 / 0.05);
  }

  .header-utility-bar__flag {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
  }

  /* Desktop already has the inline search bar on the logo row. */
  .header-utility-bar__search {
    display: none;
  }

  /* Desktop with the promo in the bar: promo on the left; "Our Work" joins the contacts on the right */
  @media screen and (min-width: 750px) {
    .header-utility-bar__inner:has(> .header-promo) > .header-promo {
      order: -1;
    }

    .header-utility-bar__inner:has(> .header-promo) > .header-utility-bar__link {
      margin-left: auto;
    }

    .header-utility-bar__inner:has(> .header-promo) > .header-utility-bar__right {
      margin-left: 0;
    }
  }

  /* Desktop: "Our Work" in 500 weight without underline; email and number underlined like the number on phones */
  @media screen and (min-width: 750px) {
    .header-utility-bar__link {
      font-weight: 500;
      text-decoration: none;
    }

    .header-utility-bar__email,
    .header-utility-bar__phone {
      font-weight: 500;
      text-decoration: underline;
      text-decoration-thickness: 0px;
      text-decoration-color: #ffffff;
    }
  }

  @media screen and (max-width: 749px) {
    /* Phones: the number (icon + underline) leads on the left; email, country and search
       follow on the right, search last so it sits above the cart. The right group's children
       join the bar's own row (display: contents) so the phone link can be ordered first. */
    .header-utility-bar__inner {
      gap: 0;
      justify-content: flex-end;
      min-height: 44px;
      /* Right edge 10px, the same as the cart icon in the row below */
      padding: 0 10px 0 16px;
      font-size: 14px;
    }

    .header-utility-bar__right {
      display: contents;
    }

    /* "Our Work" is in the drawer menu */
    .header-utility-bar__link {
      display: none;
    }

    .header-utility-bar__contact {
      justify-content: center;
      min-height: 44px;
    }

    .header-utility-bar__contact svg {
      width: 22px;
      height: 22px;
      stroke-width: 1.75;
    }

    .header-utility-bar__phone {
      order: -1;
      margin-right: auto;
      gap: 8px;
      font-weight: 600;
      letter-spacing: 0.01em;
      text-decoration: underline;
      text-underline-offset: 3px;
      text-decoration-thickness: 1px;
    }

    .header-utility-bar__phone svg {
      width: 17px;
      height: 17px;
      stroke-width: 1.8;
    }

    /* Email, country and search: no padding of their own and an even 20px between them (the
       account-to-cart spacing below), so search sits right above the cart */
    .header-utility-bar__email {
      order: 1;
      width: auto;
    }

    /* Margins are set by the drawn icons, not their boxes: the chevron and the search glass sit
       inside their boxes with empty space, so equal box gaps looked uneven. These give 20px of
       visible space on both sides of the country selector. */
    .header-utility-bar__dropdown {
      order: 2;
      margin-left: 18px;
    }

    .header-utility-bar__trigger {
      height: 44px;
      gap: 4px;
      padding: 0;
    }

    .header-utility-bar__trigger .header-utility-bar__flag {
      width: 22px;
      height: 22px;
    }

    .header-utility-bar__trigger svg {
      width: 14px;
      height: 14px;
    }

    .header-utility-bar__search {
      display: inline-flex;
      order: 3;
      width: auto;
      margin-left: 13px;
    }

    /* Email and search are icon-only here; their links still carry an aria-label */
    .header-utility-bar__email span,
    .header-utility-bar__search span {
      display: none;
    }
  }
/* END_BLOCK:_header-utility-bar */
/* START_BLOCK:_search-input (INDEX:210) */
.search-page-input {
    width: 100%;
    max-width: var(--size-style-width);
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    padding-block: var(--padding-lg);
    padding-inline: calc(var(--icon-size-lg) + var(--margin-xl) * 1.5);
    text-overflow: ellipsis;
    overflow: hidden;
    border-radius: var(--style-border-radius-inputs);
    border: var(--style-border-width-inputs) solid var(--color-input-border);

    @media screen and (max-width: 749px) {
      padding-inline: calc(var(--margin-xs) + var(--icon-size-lg) + var(--padding-md));
    }
  }

  .search-page-input::placeholder {
    color: rgb(var(--color-input-text-rgb) / var(--opacity-subdued-text));
  }

  .search-page-input__parent {
    display: flex;
    flex-direction: column;
    align-items: var(--horizontal-alignment);
  }

  .search-results__no-results {
    opacity: var(--opacity-subdued-text);
  }

  search-page-input-component {
    position: relative;
    width: 100%;
    display: flex;
    top: 0;
    align-items: center;
    background-color: var(--color-background);
    /* margin: var(--margin-2xl) 0 var(--margin-md); */

    @media screen and (max-width: 749px) {
      max-width: 100%;
    }
  }

  search-page-input-component .search__icon,
  search-page-input-component .search__icon:hover,
  search-page-input-component .search__reset-button,
  search-page-input-component .search__reset-button:hover {
    background: transparent;
    position: absolute;
    top: auto;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
  }

  search-page-input-component .search__icon svg,
  search-page-input-component .search__reset-button svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  search-page-input-component .search__icon svg {
    color: var(--color-input-text);
  }

  search-page-input-component .search__icon {
    left: var(--margin-lg);

    @media screen and (max-width: 749px) {
      left: var(--margin-md);
    }
  }

  search-page-input-component .search__reset-button {
    border-radius: 100%;
    color: var(--color-input-text);
    right: var(--margin-lg);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--animation-speed) var(--animation-easing),
      visibility var(--animation-speed) var(--animation-easing);

    @media screen and (max-width: 749px) {
      right: var(--margin-md);
    }
  }

  search-page-input-component:has(.search-page-input:not(:placeholder-shown)) .search__reset-button {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  search-page-input-component .search__reset-button-icon {
    vertical-align: middle;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    transition: transform var(--animation-speed) var(--animation-easing);
  }

  search-page-input-component .search__reset-button:active .search__reset-button-icon {
    transform: scale(0.9);
  }

  search-page-input-component .search__reset-button-icon svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  search-page-input-component .search__reset-button--hidden {
    cursor: default;
    opacity: 0;
    transition: opacity var(--animation-speed) var(--animation-easing);
    pointer-events: none;
    visibility: hidden;
  }

  search-page-input-component .search__reset-button-text {
    display: none;
  }
/* END_BLOCK:_search-input */
/* START_SNIPPET:accordion-custom-component (INDEX:259) */
accordion-custom {
    details {
      &::details-content,
      .details-content {
        block-size: 0;
        overflow-y: clip;
        opacity: 0;
        interpolate-size: allow-keywords;
        transition: content-visibility var(--animation-speed-slow) allow-discrete,
          padding-block var(--animation-speed-slow) var(--animation-easing),
          opacity var(--animation-speed-slow) var(--animation-easing),
          block-size var(--animation-speed-slow) var(--animation-easing);
      }

      /* Disable transitions when the content toggle is not caused by the direct user interaction, e.g. opening the filters on mobile. */
      &:not(:focus-within)::details-content,
      &:not(:focus-within) .details-content {
        transition: none;
      }

      &:not([open]) {
        &::details-content,
        .details-content {
          padding-block: 0;
        }
      }

      &[open] {
        &::details-content,
        .details-content {
          opacity: 1;
          block-size: auto;

          @starting-style {
            block-size: 0;
            opacity: 0;
            overflow-y: clip;
          }

          &:focus-within {
            overflow-y: visible;
          }
        }
      }
    }
  }

  accordion-custom[data-disable-on-mobile='true'] summary {
    @media screen and (max-width: 749px) {
      cursor: auto;
    }
  }

  accordion-custom[data-disable-on-desktop='true'] summary {
    @media screen and (min-width: 750px) {
      cursor: auto;
    }
  }
/* END_SNIPPET:accordion-custom-component */
/* START_SNIPPET:bd-search-dropdown (INDEX:267) */
.header-inline-search {
    position: relative;
  }

  /* In the header the bar's clear control reads "Clear" (text, like the phone popup), and while the
     dropdown is open a ✕ closes it, with a thin divider between the two */
  .header-inline-search search-page-input-component .search__reset-button-icon {
    display: none;
  }

  .header-inline-search search-page-input-component .search__reset-button-text {
    display: inline;
    color: #0A3161;
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .header-inline-search search-page-input-component .search__reset-button:hover .search__reset-button-text {
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  /* The theme sizes this control like a 24px icon; as text it needs its own width, or "CLEAR"
     spills over the divider and ✕ */
  .header-inline-search search-page-input-component .search__reset-button,
  .header-inline-search search-page-input-component .search__reset-button:hover {
    display: inline-flex;
    align-items: center;
    width: auto;
    padding-inline: 2px;
  }

  /* The browser's own clear button (search inputs): the bar already has Clear and ✕ */
  .header-inline-search .search-page-input::-webkit-search-cancel-button,
  .header-inline-search .search-page-input::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
    display: none;
  }

  /* Clear ends 10px before the divider (the ✕ is 36px wide at 6px from the edge, the divider 7px
     left of it) */
  .header-inline-search.is-open search-page-input-component .search__reset-button {
    right: 59px;
  }

  .header-inline-search.is-open .search-page-input {
    padding-inline-end: 112px;
  }

  .bd-sd__close {
    position: absolute;
    top: 50%;
    right: 6px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--color-foreground);
    transform: translateY(-50%);
    cursor: pointer;
  }

  .bd-sd__close:hover {
    background: rgb(var(--color-foreground-rgb) / var(--opacity-8));
  }

  .bd-sd__close::before {
    content: '';
    position: absolute;
    left: -7px;
    top: 8px;
    bottom: 8px;
    width: 1px;
    background: rgb(var(--color-foreground-rgb) / var(--opacity-15));
  }

  .bd-sd__close[hidden] {
    display: none;
  }

  /* While open, the logo row sits above the menu bar */
  .header__row--top:has(.header-inline-search.is-open) {
    z-index: 5;
  }

  /* Dims the page below the header. Lives on <body> (custom.js adds it) because the header's
     `contain: layout` would trap a fixed layer inside it; --bd-sd-dim-z sits just under the header */
  .bd-sd-dim {
    position: fixed;
    inset: var(--bd-sd-dim-top, 0px) 0 0;
    z-index: var(--bd-sd-dim-z, 7);
    background: rgb(var(--color-foreground-rgb) / var(--opacity-30));
  }

  .bd-sd-dim[hidden] {
    display: none;
  }

  .bd-sd {
    position: absolute;
    top: calc(100% + 8px);
    left: var(--bd-sd-left, 0px);
    z-index: 30;
    width: var(--bd-sd-width, 100%);
    max-height: var(--bd-sd-max-height, 70vh);
    overflow-y: auto;
    box-sizing: border-box;
    border: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10));
    border-radius: 16px;
    background: var(--color-background);
    box-shadow: var(--shadow-popover);
    color: var(--color-foreground);
    text-align: start;
  }

  .bd-sd[hidden],
  .bd-sd [hidden] {
    display: none;
  }

  .bd-sd__panel {
    display: flex;
    gap: 32px;
    padding: 24px;
  }

  /* Suggestions stay in view while the products scroll */
  .bd-sd__side {
    position: sticky;
    top: 24px;
    align-self: flex-start;
    flex: none;
    width: 240px;
    max-height: calc(var(--bd-sd-max-height, 70vh) - 48px);
    overflow-y: auto;
    /* The scroll box clips overflow, so it gets 10px each side for the links' hover pill */
    margin-inline: -10px;
    padding-inline: 10px;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .bd-sd__main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-inline-start: 32px;
    border-inline-start: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-8));
  }

  .bd-sd__panel > .bd-sd__main:first-child {
    padding-inline-start: 0;
    border-inline-start: 0;
  }

  .bd-sd__group {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .bd-sd__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .bd-sd__label {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 1.4;
    text-transform: uppercase;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-60));
  }

  .bd-sd__list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .bd-sd__link {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 36px;
    padding: 6px 10px;
    margin: 0 -10px;
    box-sizing: border-box;
    border-radius: 8px;
    color: var(--color-foreground);
    font-size: 14px;
    line-height: 1.3;
    text-decoration: none;
  }

  .bd-sd__link:is(:hover, :focus-visible) {
    background: rgb(var(--color-foreground-rgb) / var(--opacity-5));
    outline: none;
  }

  .bd-sd__link svg {
    flex: none;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-50));
  }

  .bd-sd__link--category {
    justify-content: space-between;
    font-weight: 500;
  }

  .bd-sd__link mark {
    background: none;
    color: inherit;
    font-weight: 600;
  }

  .bd-sd__clear {
    padding: 2px 4px;
    margin-inline-end: 6px;
    border: 0;
    border-radius: 4px;
    background: none;
    color: #0A3161;
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
  }

  .bd-sd__clear:hover {
    background: rgb(10 49 97 / 0.06);
  }

  .bd-sd__all {
    color: var(--bd-sd-accent);
    font-size: 13px;
    font-weight: 500;
  }

  /* Three cards a row so they breathe; two when the panel is narrow (each card at least 150px) */
  .bd-sd__products {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(max(150px, calc((100% - 2 * 18px) / 3)), 1fr));
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .bd-sd .bd-product-card__content {
    gap: 4px;
    padding: 12px 14px 14px;
  }

  .bd-sd .bd-product-card__title {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
    -webkit-line-clamp: 2;
  }

  .bd-sd .bd-product-card__rating {
    font-size: 12px;
  }

  .bd-sd .bd-product-card__price {
    font-size: 15px;
  }

  .bd-sd__empty {
    margin: 0;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-70));
    font-size: 14px;
  }
/* END_SNIPPET:bd-search-dropdown */
/* START_SNIPPET:card-gallery (INDEX:293) */
.card-gallery {
    overflow: hidden;
    container-type: inline-size; /* Make card-gallery a container */
    container-name: card-gallery-container; /* Optional: name the container */
  }

  .card-gallery__placeholder svg {
    height: 100%;
    width: 100%;
  }

  .card-gallery svg {
    aspect-ratio: var(--gallery-aspect-ratio, var(--ratio));
  }

  .product-card-gallery__title-placeholder {
    padding: var(--padding-md);
    font-size: var(--font-size--2xl);
    line-height: var(--line-height--display-loose);
    word-break: break-word;
    color: var(--color-foreground);
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
    aspect-ratio: var(--gallery-aspect-ratio);
    border-radius: var(--product-corner-radius);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .product-card-gallery__title-placeholder a {
    color: var(--color-foreground);
  }

  @media screen and (min-width: 750px) {
    .product-grid[data-product-card-size='extra-large'] .product-card-gallery__title-placeholder {
      padding: var(--padding-3xl);
      font-size: var(--font-size--3xl);
    }

    .product-grid[data-product-card-size='large'] .product-card-gallery__title-placeholder {
      padding: var(--padding-2xl);
      font-size: var(--font-size--2xl);
    }

    .product-grid[data-product-card-size='medium'] .product-card-gallery__title-placeholder {
      padding: var(--padding-xl);
      font-size: var(--font-size--xl);
    }

    .product-grid[data-product-card-size='small'] .product-card-gallery__title-placeholder {
      padding: var(--padding-sm);
      font-size: var(--font-size--lg);
    }

    .product-grid[data-product-card-size='extra-large']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-3xl) + 50px);
    }

    .product-grid[data-product-card-size='large']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-2xl) + 50px);
    }

    .product-grid[data-product-card-size='medium']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-xl) + 50px);
    }

    .product-grid[data-product-card-size='small']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-sm) + 50px);
    }

    .product-grid[data-product-card-size='extra-large']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-3xl) + 40px);
    }

    .product-grid[data-product-card-size='large']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-2xl) + 40px);
    }

    .product-grid[data-product-card-size='medium']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-xl) + 40px);
    }

    .product-grid[data-product-card-size='small']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-sm) + 40px);
    }

    .product-grid[data-product-card-size='extra-large']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-3xl) + 40px);
    }

    .product-grid[data-product-card-size='large']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-2xl) + 40px);
    }

    .product-grid[data-product-card-size='medium']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-xl) + 40px);
    }

    .product-grid[data-product-card-size='small']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-sm) + 40px);
    }
  }

  @media screen and (max-width: 749px) {
    .product-card-gallery__title-placeholder {
      font-size: var(--font-size--xl);
      padding: var(--padding-md);
    }

    .product-grid[data-product-card-size]
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-sm) + 50px);
    }

    .product-grid[data-product-card-size]
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-sm) + 40px);
    }

    .product-grid[data-product-card-size]
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-sm) + 40px);
    }
  }

  [product-grid-view='zoom-out'] .card-gallery .product-card-gallery__title-placeholder {
    /* stylelint-disable-next-line declaration-no-important */
    padding: var(--padding-xs) !important;
    font-size: var(--font-size--xs);
  }

  [product-grid-view='zoom-out'] .card-gallery .slideshow-control {
    min-width: auto;
  }

  ul[product-grid-view='zoom-out'] .product-grid__card .card-gallery {
    display: block;
  }

  [product-grid-view='zoom-out']
    .card-gallery
    > :is(quick-add-component, .product-badges, slideshow-component > slideshow-controls) {
    display: none;
  }

  ul[product-grid-view='zoom-out'] .card-gallery > img {
    display: block;
  }

  .card-gallery slideshow-arrows .slideshow-control {
    /* Align icons with quick-add button */
    padding-inline: var(--padding-xl);

    @container (max-width: 249px) {
      padding-inline: 0 var(--padding-sm);
    }
  }

  /*
   * Card galleries preview the next or previous images on 'pointerenter', so we
   * try to kick load them beforehand (they are lazy loaded otherwise).
   */
  .card-gallery
    :is(
      slideshow-slide:has(+ slideshow-slide[aria-hidden='false']),
      slideshow-slide[aria-hidden='false'] + slideshow-slide
    ) {
    content-visibility: auto;

    slideshow-component[actioned] & {
      content-visibility: visible;
    }
  }
/* END_SNIPPET:card-gallery */
/* START_SNIPPET:header-actions-hulkapps-backup (INDEX:320) */
.header {
    --account-offset-top: calc(
      var(--header-group-height) + (var(--header-height) * var(--transparent-header-offset-boolean))
    );

    &[data-sticky-state='active'] {
      --account-offset-top: calc(var(--header-height) - 1px);
    }
  }

  .account-button {
    /* Remove the background color from the color scheme, we want to inherit the color of the header */
    background: transparent;
  }

  .account-button__icon,
  .account-button__text {
    color: var(--color-account-icon);
    transition: color var(--header-content-transition-timing);
    -webkit-font-smoothing: antialiased;
  }

  shopify-account {
    --shopify-account-font-heading: var(--font-heading--family);
    --shopify-account-font-heading-weight: var(--font-heading--weight);
    --shopify-account-font-body: var(--font-body--family);
    --shopify-account-font-body-weight: var(--font-body--weight);
    --shopify-account-radius-base: var(--style-border-radius-popover);
    --shopify-account-radius-button: var(--style-border-radius-buttons-primary);
    --shopify-account-radius-button-small: var(--style-border-radius-buttons-primary);
    --shopify-account-radius-input: var(--style-border-radius-buttons-primary);
    --shopify-account-color-background: var(--color-background);
    --shopify-account-color-text: var(--color-foreground);
    --shopify-account-color-accent: var(--color-primary-button-background);
    --shopify-account-color-accent-text: var(--color-primary-button-text);
    --shopify-account-dialog-position-top: var(--account-offset-top);

    &:not(:defined) {
      min-width: 44px;
      height: 44px;
      display: flex;
      justify-content: center;
      align-items: center;
      /* Match the line height of the other buttons */
      line-height: normal;
    }
  }

  .account-button__fallback {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: var(--shopify-account-color-accent, #0a142f);
  }

  .account-button--text shopify-account {
    color: inherit;
  }

  /* "Pill" display style — bordered rounded button, icon + text
     together (unlike 'text', which hides the icon on desktop). New
     addition, doesn't affect 'icon'/'text' styling above. */
  .account-button--pill shopify-account {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 20px;
    border: 1px solid #0A3161;
    border-radius: 999px;
    color: #0A3161;
  }

  .account-button--pill .account-button__text {
    font-size: 0.95rem;
    color: #0A3161;
  }

  .header__column cart-drawer-component {
    border: 1px solid #0A3161;
    border-radius: 999px;
    color: #0A3161;
  }

  @media screen and (max-width: 749px) {
    .account-button--pill shopify-account {
      height: 40px;
      padding: 0;
      gap: 6px;
      border: none;
    }

    .header__column cart-drawer-component {
      border: none;
    }
  }

  .cart-drawer {
    --cart-drawer-padding: var(--padding-xl) var(--padding-xl);
    --cart-drawer-padding-desktop: var(--padding-xl) var(--padding-2xl);

    @media screen and (min-width: 750px) {
      margin-inline-end: calc(var(--gap-xs) * -1);
    }
  }

  @media screen and (min-width: 750px) {
    .cart-drawer--text {
      display: flex;
      align-items: center;
    }
  }

  .cart-drawer__dialog {
    position: fixed;
    overflow: hidden;
    border-radius: 0;
    width: 100%;
    height: 100%;
    margin: 0 0 0 auto;
    padding: 0;
    border-left: var(--style-border-drawer);
    box-shadow: var(--shadow-drawer);
    background-color: var(--color-background);

    @media screen and (min-width: 750px) {
      width: var(--sidebar-width);
      max-width: 95vw;
    }
  }

  /* Needed to ensure the drawer is full height */
  .cart-drawer__dialog:modal {
    max-height: 100dvh;
    overflow-y: hidden;
  }

  .cart-drawer__inner {
    height: 100%;
    overflow: hidden;
  }

  .cart-drawer__content {
    height: calc(100% - var(--header-height));
    display: flex;
    flex-direction: column;
    padding: 0;
    background-color: var(--color-background);
    flex-grow: 1;
    overflow-y: auto;
  }

  .cart-drawer__heading {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    margin-bottom: 0;
  }

  .cart-drawer__close-button {
    margin-right: calc(var(--padding-sm) * -1);
    top: var(--margin-sm);

    @media screen and (max-width: 749px) {
      top: var(--margin-2xs);
    }
  }

  .cart-drawer--empty .cart-drawer__content {
    text-align: center;
    min-height: auto;
  }

  .cart-drawer--empty .cart-drawer__heading {
    margin-bottom: var(--margin-md);
  }

  .cart-drawer__items .cart-items__table-row {
    padding-bottom: var(--gap-xl);
    border-bottom: var(--style-border-width) solid var(--color-border);
    margin-bottom: var(--gap-xl);
  }

  .cart-drawer__items .cart-items__table-row:has(+ .cart-items__nested-line) {
    border-bottom: none;
    margin-bottom: 0;
  }

  .cart-drawer__items .cart-items__table-row:last-child {
    border-bottom: none;
  }

  .cart-drawer__summary {
    --cart-drawer-summary-padding: var(--padding-lg);

    position: sticky;
    bottom: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-xl);
    padding: var(--cart-drawer-summary-padding);
    margin-top: auto;
    background-color: var(--color-background);
    /* stylelint-disable-next-line color-named */
    mask-image: linear-gradient(to bottom, transparent, black var(--cart-drawer-summary-padding));

    @media screen and (min-width: 750px) {
      --cart-drawer-summary-padding: var(--padding-2xl);
    }
  }

  .cart-drawer__dialog[cart-summary-sticky='false'] .cart-drawer__summary {
    position: static;
    mask-image: none;
  }

  .cart-drawer__dialog[cart-summary-sticky='false'] .cart-drawer__items {
    overflow: unset;
  }

  .cart-actions summary {
    padding-inline: 0;
    padding-block: var(--padding-sm);
    line-height: 1.2;
    min-height: var(--minimum-touch-target);
  }

  .cart-drawer__summary .cart__summary-totals:not(:has(.cart__subtotal-container:empty)) {
    border-block-start: var(--style-border-width) solid var(--color-border);
    padding-block-start: var(--padding-2xl);
  }

  .cart-drawer__summary .cart-note {
    @media screen and (min-width: 750px) {
      margin-block-start: var(--margin-3xs);
    }
  }

  .cart-drawer__heading--empty {
    display: flex;
    justify-content: center;
  }

  .cart-drawer__items {
    display: flex;
    flex-direction: column;
    padding-inline: var(--cart-drawer-padding);
    overflow-y: auto;

    @media screen and (min-width: 750px) {
      padding-inline: var(--cart-drawer-padding-desktop);
    }
  }

  .cart-drawer__items .cart-items__table-row {
    padding-bottom: var(--gap-xl);
    border-bottom: var(--style-border-width) solid var(--color-border);
    margin-bottom: var(--gap-xl);
  }

  .cart-drawer__items .cart-items__table-row:last-child {
    border-bottom: none;
    padding-block-end: 0;
    margin-block-end: 0;
  }

  .cart-drawer--empty .cart-drawer__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100dvh;
    margin-top: 0;
  }

  .cart-drawer:not(:has(.cart-form)) .cart-drawer__content {
    justify-content: center;
  }

  .cart-drawer__header {
    background-color: var(--color-background);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--cart-drawer-padding);
    border-bottom: var(--style-border-width) solid none;
    position: sticky;
    top: 0;
    z-index: 1;

    @media screen and (min-width: 750px) {
      padding-inline: var(--cart-drawer-padding-desktop);
    }
  }

  .cart-drawer--empty .cart-drawer__header {
    justify-content: right;
    border-bottom: none;
    padding-bottom: 0;
  }

  .cart-drawer--empty .cart-drawer__heading {
    text-align: center;
  }

  header-actions {
    display: flex;
    gap: 10px;

    @media screen and (max-width: 749px) {
      justify-self: flex-end;
      gap: 4px;
    }
  }

  @media screen and (min-width: 750px) {
    .header-actions--text {
      gap: var(--gap-xl);
    }

    .header-actions__text-style {
      font-size: var(--header-actions-font-size);
      font-family: var(--header-actions-font-family);
      font-weight: var(--header-actions-font-weight);
      text-transform: var(--header-actions-text-case);
    }
  }

  #header-component[data-menu-style='drawer'] header-actions {
    justify-self: flex-end;
  }

  .header__column--right header-actions {
    margin-inline-start: calc(var(--gap-md) * -1);
  }

  .header-actions__cart-icon {
    --cart-bubble-size: 20px;
    --cart-bubble-top: 4.5px;
    --cart-bubble-right: 2.5px;

    position: relative;
  }

  .header-actions__cart-icon .cart-bubble {
    position: absolute;
    width: var(--cart-bubble-size, 20px);
    top: var(--cart-bubble-top);
    right: var(--cart-bubble-right);
  }

  @media screen and (min-width: 750px) {
    .header-actions__cart-icon--text.header-actions__cart-icon .cart-bubble {
      position: relative;
      top: 0;
    }
  }

  .cart-drawer__heading .cart-bubble {
    width: fit-content;
    border-radius: var(--style-border-radius-buttons-primary);
    aspect-ratio: auto;
    padding: var(--cart-padding);
  }

  .cart-drawer__heading .cart-bubble[data-maintain-ratio] {
    width: min(1lh, 22px);
    height: min(1lh, 22px);
  }

  .header-actions__cart-icon .cart-bubble__text,
  .cart-drawer__heading .cart-bubble__text {
    font-family: var(--font-paragraph--family);
    font-weight: var(--font-paragraph--weight);
  }

  .header-actions__cart-icon.header-actions__cart-icon--has-cart svg {
    /* Create donut mask where the cart bubble sits */
    mask: radial-gradient(
      calc(var(--cart-bubble-size) + 2px) at calc(100% - var(--cart-bubble-right)) var(--cart-bubble-top),
      transparent 45.45%,
      #fff 45.45%,
      #fff 100%
    );
  }

  .cart-drawer__heading .cart-bubble .cart-bubble__background {
    background-color: #0A3161;
  }

  .cart-drawer__heading .cart-bubble__text {
    color: var(--color-foreground);
    font-size: clamp(var(--font-size--3xs), 0.75em, var(--font-size--xs));
  }

  .cart-bubble.cart-bubble--animating .cart-bubble__background {
    animation: grow var(--animation-speed) var(--animation-easing);
  }

  .cart-bubble--animating .cart-bubble__text {
    --start-y: -1em;
    --start-opacity: 1;
    /* Set initial transform state before animation starts */
    transform: translate(0, var(--start-y, -1em));
    opacity: var(--start-opacity, 1);
    animation: move-and-fade var(--animation-speed) var(--animation-easing);
  }

  cart-icon:has(.cart-bubble__text-count:empty) {
    --cart-bubble-size: 10px;
    --cart-bubble-top: 9px;
    --cart-bubble-right: 9px;

    .svg-wrapper {
      --cart-bubble-top: 4px;
      --cart-bubble-right: 4px;
    }
  }

  @media screen and (min-width: 750px) {
    cart-icon.header-actions__cart-icon--text:has(.cart-bubble__text-count:empty) {
      --cart-bubble-right: 2.5px;
    }
  }

  @media screen and (prefers-reduced-motion: no-preference) {
    html:active-view-transition-type(empty-cart-drawer) {
      .cart-drawer__close-button {
        view-transition-name: cart-drawer-close-button;
      }
    }
  }

  :active-view-transition {
    .cart-drawer__header,
    .cart-drawer__content {
      background: transparent;
    }
  }

  ::view-transition-old(cart-drawer-content) {
    transform-origin: 50% 33%;
    animation: cart-contents-old var(--spring-d280-b0-duration) var(--spring-d280-b0-easing) forwards;
  }

  ::view-transition-new(cart-drawer-content) {
    transform-origin: top center;
    animation: cart-contents-new var(--spring-d280-b0-duration) var(--spring-d280-b0-easing) forwards;
  }

  @keyframes cart-contents-old {
    to {
      scale: 0.92;
      opacity: 0;
    }
  }

  @keyframes cart-contents-new {
    from {
      scale: 1.05;
      translate: 0 128px;
      filter: blur(1px);
      opacity: 0;
    }
  }
  .header-actions__text {
    display: flex;
    align-items: center;
  }

  @media screen and (min-width: 750px) {
    .header-actions__cart-icon--text {
      display: flex;
      align-items: center;
      gap: var(--gap-xs);
    }

    .header__column--right .header-actions--text {
      margin-inline-start: 0;
    }
  }
/* END_SNIPPET:header-actions-hulkapps-backup */
/* START_SNIPPET:header-drawer-hulkapps-backup (INDEX:322) */
.header__icon--menu {
    position: initial;
  }

  .menu-drawer-container .header__icon--summary {
    color: var(--color-foreground);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--padding-lg);
  }

  .header__icon--summary .header-drawer-icon {
    margin: auto;
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .menu-drawer__featured-content {
    z-index: var(--layer-base);
    container-type: inline-size;
  }

  .menu-drawer__featured-content--childlist {
    z-index: var(--layer-flat);
  }

  .menu-drawer__featured-content-list {
    display: flex;
    gap: 1em;
    overflow-x: auto;
    padding-block-end: var(--padding-lg);
  }

  .menu-drawer__featured-content-list-item {
    flex: 0 0 auto;
  }

  .menu-drawer__featured-content-list-item--product {
    width: 35cqi;
  }

  .menu-drawer__featured-content-list-item--collection img.resource-card__image {
    width: 80cqi;
  }

  .menu-drawer__featured-content-list-item:first-child {
    margin-inline-start: var(--margin-xl);
  }

  .menu-drawer__featured-content-list-item:last-child {
    margin-inline-end: var(--margin-xl);
  }

  .menu-drawer__navigation {
    margin: 0 6px;
    padding: 0;
    background-color: #EBEFF2;
    border-radius: 8px;

    @media screen and (min-width: 750px) {
      margin-top: var(--drawer-header-desktop-top);
    }
  }

  details:not(.menu-open) .header__icon--menu .header-drawer-icon--close {
    display: none;
  }

  details.menu-open .header__icon--menu .header-drawer-icon--close {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  details.menu-open .header__icon--menu .header-drawer-icon--open {
    display: none;

    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .menu-drawer {
    position: fixed;
    transform: translateX(-100%);
    visibility: hidden;
    height: var(--drawer-height);
    width: var(--drawer-width);
    max-width: var(--drawer-max-width);
    z-index: var(--layer-menu-drawer);
    left: 0;
    top: 0;
    padding: 0;
    background-color: var(--color-background);
    overflow: auto;
    display: flex;
    border-right: var(--style-border-drawer);
    box-shadow: var(--shadow-drawer);
    flex-direction: column;

    @media screen and (min-width: 750px) {
      width: 25rem;
    }
  }

  /* When opening a submenu we don't want the first-level menu to be scrollable, so we reset the overflow  */
  .menu-drawer.menu-drawer--has-submenu-opened {
    overflow: initial;
  }

  /* Mobile only: the L1 -> L2 submenu now expands inline (see the
     .menu-drawer__menu-container rules further down), so the drawer
     itself must stay scrollable while a submenu is open, instead of
     resetting to overflow: initial. */
  @media screen and (max-width: 749px) {
    .menu-drawer.menu-drawer--has-submenu-opened {
      overflow-y: auto;
    }
  }

  .menu-drawer__backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    backdrop-filter: brightness(0.75);
    z-index: var(--layer-heightened);
    opacity: 0;
    transition: opacity var(--drawer-animation-speed) ease;

    .menu-open & {
      opacity: 1;
    }
  }

  .menu-drawer,
  details[open] > .menu-drawer__submenu {
    transition: transform var(--drawer-animation-speed) ease, visibility var(--drawer-animation-speed) ease,
      opacity var(--drawer-animation-speed) ease;
  }

  .menu-open > .menu-drawer,
  .menu-open > .menu-drawer__submenu:not(.menu-drawer__menu--childlist) {
    transform: translateX(0);
    visibility: visible;
    opacity: 1;
    display: flex;
    flex-direction: column;
  }

  .menu-drawer__inner-container {
    position: relative;
    height: 100%;
  }

  .menu-drawer__navigation-container {
    display: grid;
    grid-template-rows: 1fr auto;
    align-content: space-between;
    overflow-y: auto;
    height: 100%;
  }

  .menu-drawer__inner-submenu {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;

    @media screen and (min-width: 750px) {
      margin-top: var(--drawer-header-desktop-top);
    }
  }

  .menu-drawer__nav-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .menu-drawer__menu {
    --menu-drawer-inline-padding: calc(var(--padding-sm) + 7px);

    list-style: none;
    padding-inline: var(--drawer-padding);
    margin-inline: 0;
    margin-block-start: 0;
    margin-block-end: 0 !important;
  }

  .menu-drawer__menu--grid {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 1fr;
    gap: var(--padding-sm);
    padding-inline-end: var(--menu-drawer-inline-padding);
    padding-block-start: var(--padding-xs);
  }

  .menu-drawer__menu--childlist:not(.menu-drawer__menu--grid) {
    flex-grow: 1;
  }

  .menu-drawer__menu.has-submenu,
  .menu-drawer__menu--childlist:not(:has(.menu-drawer__animated-element)) {
    margin-block-end: var(--margin-xs);

    @media screen and (min-width: 750px) {
      margin-block-end: 2.5rem;
    }
  }

  .menu-drawer__list-item--divider {
    border-block-end: 1px solid var(--color-border);
  }

  .menu-drawer__list-item--deep:not(.menu-drawer__list-item--divider) .menu-drawer__menu {
    margin-block-start: -0.3rem;
  }

  .menu-drawer__list-item--flat.menu-drawer__list-item--divider .menu-drawer__menu {
    margin-block-start: -0.4rem;
  }

  .menu-drawer__menu-container--divider {
    border-block-end: 1px solid var(--color-border);
  }

  .menu-drawer__menu > .menu-drawer__list-item {
    display: flex;
    min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs));
  }

  .menu-drawer__list-item--deep .menu-drawer__list-item,
  .menu-drawer__list-item--flat .menu-drawer__list-item {
    min-height: auto;
  }

  .menu-drawer__menu .menu-drawer__list-item--flat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-block-end: var(--margin-md);
  }

  .menu-drawer__menu--childlist .menu-drawer__list-item--flat {
    margin-block-end: var(--margin-sm);

    @media screen and (min-width: 750px) {
      margin-block-end: var(--margin-lg);
    }
  }

  .menu-drawer__menu--childlist .menu-drawer__list-item--flat.menu-drawer__list-item--divider {
    margin-block-end: 0;
  }

  .menu-drawer__list-item--flat .menu-drawer__menu--childlist {
    width: 100%;
    padding-inline: 0;
  }

  .menu-drawer-container[open] .menu-drawer__animated-element {
    animation: menu-drawer-nav-open var(--drawer-animation-speed) ease-in-out;
    animation-delay: calc(var(--drawer-animation-speed) + (var(--menu-drawer-animation-index) - 1) * 0.1s);
    animation-fill-mode: backwards;
  }

  .menu-drawer__menu accordion-custom .details-content--no-animation {
    animation: none;
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
    transition: none;
  }

  .menu-drawer__menu details,
  .menu-drawer__menu-item,
  .menu-drawer__menu accordion-custom {
    width: 100%;
  }

  .menu-drawer__list-item--divider .menu-drawer__menu-item:not(.menu-drawer__menu-item--child) {
    min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs));
  }

  .menu-drawer__menu-item--mainlist {
    min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs));
    font-family: var(--menu-top-level-font-family);
    font-style: var(--menu-top-level-font-style);
    font-weight: var(--menu-top-level-font-weight);
    font-size: var(--menu-top-level-font-size);
    line-height: var(--menu-top-level-font-line-height);
    text-transform: var(--menu-top-level-font-case);
    color: var(--menu-top-level-font-color);
    justify-content: space-between;

    &:hover {
      color: var(--menu-top-level-font-color);
    }
  }

  .menu-drawer__menu-item--parent {
    font-family: var(--menu-parent-font-family);
    font-style: var(--menu-parent-font-style);
    font-weight: var(--menu-parent-font-weight);
    font-size: var(--menu-parent-font-size);
    line-height: var(--menu-parent-font-line-height);
    text-transform: var(--menu-parent-font-case);
    color: var(--menu-parent-font-color);

    &:hover {
      color: var(--menu-parent-font-color);
    }
  }

  .menu-drawer__menu-item--child {
    font-family: var(--menu-child-font-family);
    font-style: var(--menu-child-font-style);
    font-weight: var(--menu-child-font-weight);
    font-size: var(--menu-child-font-size);
    line-height: var(--menu-child-font-line-height);
    text-transform: var(--menu-child-font-case);
    color: var(--menu-child-font-color);

    &:hover {
      color: var(--menu-child-font-color);
    }
  }

  .menu-drawer__menu--childlist summary.menu-drawer__menu-item {
    display: flex;
    width: 100%;
    padding-inline-end: 0;
  }

  .menu-drawer__list-item--deep .menu-drawer__menu,
  .menu-drawer__menu--grandchildlist {
    padding-inline: 0;
  }

  .menu-drawer__list-item--deep .menu-drawer__menu {
    padding-block-end: 0.5rem;
  }

  .menu-drawer__list-item--deep.menu-drawer__list-item--divider .menu-drawer__menu {
    padding-block-end: 0.3rem;
  }

  .menu-drawer__list-item--flat.menu-drawer__list-item--divider .menu-drawer__menu--grandchildlist {
    padding-block-end: 0.5rem;
  }

  .menu-drawer__menu-item {
    display: flex;
    padding: var(--padding-2xs) 0;
    position: relative;
    text-decoration: none;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgb(227, 227, 227);
  }

  .menu-drawer__menu-item:has(> .menu-drawer__link-image) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    row-gap: var(--padding-3xs);
    padding: 0;
  }

  .menu-drawer__link-image {
    width: 100%;
    position: relative;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }

  /* Fix alignment for collection image mode links without images in drawer */

  /* Target menu items in grids that have images */
  .menu-drawer__menu--grid:has(.menu-drawer__link-image) .menu-drawer__menu-item:not(:has(> .menu-drawer__link-image)) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    row-gap: var(--padding-3xs);
    padding: 0;
  }

  .menu-drawer__menu--grid:has(.menu-drawer__link-image)
    .menu-drawer__menu-item:not(:has(> .menu-drawer__link-image))::before {
    content: '';
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: var(--color-foreground-muted);
    opacity: 0.1;
    border-radius: var(--menu-image-border-radius);
  }

  .menu-drawer__close-button {
    position: relative;
    right: auto;
    top: auto;
    width: fit-content;
    height: fit-content;
    color: inherit;
    padding: var(--padding-lg);
    align-self: flex-end;
  }

  .menu-drawer__back-button {
    display: flex;
    width: 100%;
    padding: var(--padding-md) var(--padding-xl);
    border: none;
    align-items: center;
    color: var(--color-foreground);
    background-color: transparent;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    overflow-x: hidden;
    line-height: 1.2;
    box-shadow: none;
  }

  .menu-drawer__menu-item-text {
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 18px;
  }

  /** Styles when the country selector is hidden */
  .menu-drawer .language-selector:not(.menu-drawer__submenu *) {
    width: fit-content;
    padding-inline-start: 0;

    .localization-form__select {
      text-align: left;
    }
  }

  .menu-drawer__menu-item > .svg-wrapper {
    width: fit-content;
    height: fit-content;
    margin: 0;
    padding-block: var(--padding-lg);
    padding-inline-start: var(--padding-xl);
    flex-shrink: 0;
  }

  .menu-drawer__list-item--divider .menu-drawer__menu-item > .svg-wrapper {
    padding-block: var(--padding-md);
  }

  .menu-drawer svg {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .menu-drawer__submenu {
    position: absolute;
    width: 100%;
    top: 0;
    height: 100dvh;
    left: 0;
    background-color: var(--color-background);
    z-index: var(--layer-flat);
    transform: translateX(-5%);
    visibility: hidden;
    overflow-y: auto;
    opacity: 0;
  }

  /* Mobile only: turn the L1 -> L2 submenu from a separate sliding
     full-screen panel into an inline accordion within the same drawer.
     Scoped to .menu-drawer__menu-container so the shared
     .menu-drawer__submenu / .menu-drawer__nav-buttons classes used by
     the localization (language/country) drawer are left untouched. */
  @media screen and (max-width: 749px) {
    .menu-drawer__menu-container .menu-drawer__submenu {
      position: static;
      width: auto;
      height: auto;
      max-height: none;
      z-index: auto;
      transform: none;
      visibility: visible;
      overflow-y: visible;
      background-color: transparent;
      display: grid;
      grid-template-rows: 0fr;
      opacity: 0;
      transition: grid-template-rows var(--drawer-animation-speed) ease, opacity var(--drawer-animation-speed) ease;
    }

    .menu-drawer__menu-container.menu-open > .menu-drawer__submenu {
      display: grid;
      grid-template-rows: 1fr;
      opacity: 1;
    }

    .menu-drawer__menu-container .menu-drawer__inner-submenu {
      height: auto;
      min-height: 0;
      overflow: hidden;
    }

    .menu-drawer__menu-container .menu-drawer__nav-buttons {
      display: none;
    }

    .menu-drawer__menu-container.menu-open[open] .menu-drawer__menu-item--mainlist {
      border-bottom: none;
      font-weight: 500;
    }

    .menu-drawer__menu-container.menu-open[open] .menu-drawer__menu-item--mainlist .menu-drawer__menu-item-text{
      color: #0A3161;
    }

    /* L2 ("parent") and L3 ("child") items currently pull from very
       different typography tokens via the merchant's "submenu size"
       setting (parent: small, child: extra-large) — fine for the
       desktop mega menu's layout, but reversed/inconsistent for a
       nested mobile accordion. Make L3 visually match L2 so deeper
       nesting reads as "more of the same list" rather than a jump in
       size. L1's own typography (.menu-drawer__menu-item--mainlist)
       is untouched. */
    .menu-drawer__menu-item--child {
      font-family: var(--menu-parent-font-family);
      font-style: var(--menu-parent-font-style);
      font-weight: var(--menu-parent-font-weight);
      font-size: var(--menu-parent-font-size);
      line-height: var(--menu-parent-font-line-height);
      text-transform: var(--menu-parent-font-case);
      color: var(--menu-parent-font-color);

      &:hover {
        color: var(--menu-parent-font-color);
      }
    }
  }

  .menu-drawer__menu-item--child .menu-drawer__menu-item-text {
    color: #484848;
    font-size: 14px;
  }

  .menu-drawer__back-button > .svg-wrapper {
    margin-right: var(--padding-md);
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .menu-drawer__utility-links {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin-block: auto var(--padding-sm);
    margin-inline-start: var(--padding-xl);
    background-color: rgb(var(--color-foreground) 0.03);
  }

  .menu-drawer__account {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
    text-decoration: none;
    height: 44px;
    font-size: 1.4rem;
    color: rgb(var(--color-foreground));
  }

  .menu-drawer__account svg {
    height: var(--icon-size-sm);
    width: var(--icon-size-sm);
  }

  .menu-drawer__account shop-user-avatar {
    --shop-avatar-size: 2.4rem;

    margin-right: 0.55rem;
    margin-left: -0.45rem;
  }

  .menu-drawer__link-image,
  .menu-drawer__featured-product-image,
  .menu-drawer__featured-collection-image,
  .menu-drawer__featured-collection-link::before {
    border-radius: var(--menu-image-border-radius);
  }

  @keyframes menu-drawer-nav-open {
    0% {
      visibility: hidden;
      opacity: 0;
      transform: translateX(-0.5rem);
    }

    100% {
      visibility: visible;
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes menu-drawer-subnav-open {
    0% {
      visibility: visible;
      opacity: 1;
      transform: translateX(0);
    }

    100% {
      visibility: hidden;
      opacity: 0;
      transform: translateX(-1rem);
    }
  }

  /* Drawer Localization Styles */
  .drawer-localization__button .icon-flag {
    width: var(--menu-localization-font-size, var(--icon-size-sm));
    height: var(--menu-localization-font-size, var(--icon-size-sm));
    clip-path: circle(50%); /* stylelint-disable-line */
    background-position: center;
    background-size: cover;
    margin-inline-end: 4px;
    position: relative;
  }

  .drawer-localization__button .icon-flag::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 var(--size-shadow) var(--color-shadow);
    border-radius: 50%;
  }

  .drawer-localization .country-filter {
    padding-block: 8px;
  }

  .drawer-localization .drawer-localization__button {
    display: flex;
    padding: 0;
    position: relative;
    text-decoration: none;
    height: 44px;

    &:hover {
      color: var(--color-foreground);
    }
  }

  .drawer-localization .drawer-localization__button .icon-caret {
    width: fit-content;
    height: fit-content;
    margin: 0;
    padding: var(--padding-xl) var(--padding-xl) var(--padding-xl) var(--padding-xs);
  }

  .menu-drawer__localization:not(drawer-localization-component) .language-selector {
    font-family: var(--menu-localization-font);
    font-size: var(--menu-localization-font-size);
  }

  .menu-drawer__localization .language-selector.h5 {
    padding-inline-start: 0;
  }

  .drawer-localization {
    display: contents;
    color: var(--color-foreground);
  }

  .drawer-localization localization-form-component {
    position: relative;
    height: 100%;
  }

  .drawer-localization .mobile-localization,
  .drawer-localization .drawer-localization__button--label {
    display: flex;
    gap: var(--gap-xs);
    margin-block: 0;
    align-items: center;
  }

  .drawer-localization__button--label.h6 {
    font-family: var(--menu-localization-font);
  }

  .drawer-localization img {
    width: var(--icon-size-sm);
  }

  .drawer-localization .localization-button__icon,
  .drawer-localization .localization-button__icon svg {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .drawer-localization summary.is-disabled {
    pointer-events: none;
  }

  .drawer-localization .localization-wrapper {
    width: 100%;
  }

  .drawer-localization .localization-form {
    display: flex;
    flex-direction: column;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .drawer-localization .localization-form > * {
    padding-inline: var(--padding-xl);
  }

  .drawer-localization .language-selector .svg-wrapper.icon-caret {
    transform: translateY(-50%) rotate(0deg);
  }

  .drawer-localization .language-selector .svg-wrapper.icon-caret svg {
    transform: none;
  }

  .menu-drawer__menu-container.menu-open[open] .menu-drawer__inner-submenu {
    background-color: #FEF5F6;
    border-radius: 8px;
  }
  accordion-custom details[open] .menu-drawer__menu-item--parent{
    background-color: #FCF0F0;
    margin: 10px 0;
    padding: 0 8px;
    border-radius: 8px;
    border-bottom: none;
    color: #B31942;
    margin-left: -10px;
  }
  accordion-custom details[open] ul.menu-drawer__menu--grandchildlist li > a {
    padding: 8px 0;
  }
/* END_SNIPPET:header-drawer-hulkapps-backup */
/* START_SNIPPET:header-promo-hulkapps-backup (INDEX:324) */
.header-promo {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 24px;
    margin-left: 24px;
    border-radius: 999px;
    background: #FEF5F6;
    color: #333333;
    font-size: 14px;
    line-height: 1.3;
    white-space: nowrap;
    border: 1px solid rgb(0 0 0 / 0.13);
  }

  .header-promo__divider {
    opacity: 0.35;
  }

  .header-promo__code-label strong {
    font-weight: 700;
  }

  .header-promo__copy {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin-inline-start: 2px;
    border: none;
    background: transparent;
    color: inherit;
    opacity: 0.6;
    cursor: pointer;
    transition: opacity 0.15s;
    width: 20px;
  }

  .header-promo__copy:hover,
  .header-promo__copy.is-copied {
    opacity: 1;
  }

  .header-promo__copied-msg {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    padding: 4px 10px;
    border-radius: 6px;
    background: #1a1a1a;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s, transform 0.15s;
  }

  .header-promo__copied-msg::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: #1a1a1a;
  }

  .header-promo__copy.is-copied .header-promo__copied-msg {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }

  @media screen and (max-width: 989px) {
    .header-promo {
      display: none;
    }
  }
/* END_SNIPPET:header-promo-hulkapps-backup */
/* START_SNIPPET:search-modal (INDEX:397) */
/* Search modal style */
  .search-modal {
    --search-border-radius: var(--style-border-radius-popover);
    --search-border-width: var(--style-border-width);
  }

  .search-modal__content {
    /* Approx set the top so when the content is at max height, the modal is centered */
    --modal-top-margin: calc(50dvh - var(--modal-max-height) / 2 - 2rem);
    --modal-width: 66dvw;

    padding: 0;
    border: var(--style-border-popover);

    @media screen and (min-width: 750px) {
      width: var(--modal-width);
      margin-block-start: var(--modal-top-margin);
      overflow: hidden;
    }
  }

  /* Hide the default dialog backdrop on small screens */
  @media screen and (max-width: 749px) {
    .search-modal__content::backdrop {
      display: none;
    }
  }

  .dialog-modal[open].search-modal__content {
    transform-origin: bottom center;
    animation: search-element-slide-in-bottom 300ms var(--ease-out-quad) forwards;
    border-radius: var(--search-border-radius);
    box-shadow: var(--shadow-popover);

    @media screen and (max-width: 749px) {
      border-radius: 0;
    }
  }

  .dialog-modal.search-modal__content.dialog-closing {
    animation: search-element-slide-out-bottom 200ms var(--ease-out-quad) forwards;
  }

  .search-modal__content[open] {
    display: flex;
  }

  .search-modal__content :is(.predictive-search-dropdown, .predictive-search-form__content-wrapper) {
    position: relative;
  }

  .dialog-modal
    .predictive-search-form__header:has(
      .predictive-search__reset-button:not(.predictive-search__reset-button[hidden])
    )::before {
    content: '';
    position: absolute;
    right: calc(var(--padding-sm) + var(--minimum-touch-target));
    top: 0;
    bottom: 0;
    width: var(--border-width-sm);
    background-color: var(--color-border);
  }

  .dialog-modal
    .predictive-search-form__header:has(.predictive-search__reset-button:not(.predictive-search__reset-button[hidden]))
    > .predictive-search__close-modal-button {
    &::before {
      content: none;
    }
  }

  @media screen and (min-width: 750px) {
    .dialog-modal
      .predictive-search-form__header:has(
        .predictive-search__reset-button:not(.predictive-search__reset-button[hidden])
      )::before {
      right: calc(var(--padding-2xl) * 2);
    }
  }

  predictive-search-component {
    --resource-card-corner-radius: var(--product-corner-radius);

    display: flex;
    width: 100%;
    position: relative;
    margin-inline: auto;
    align-items: center;
    background-color: var(--color-background);
    z-index: var(--layer-heightened);
  }

  .predictive-search-form__footer {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;

    @media screen and (min-width: 750px) {
      --to-top-gradient-background: linear-gradient(
        to top,
        rgb(var(--color-background-rgb) / var(--opacity-90)),
        rgb(var(--color-background-rgb) / var(--opacity-80)),
        rgb(var(--color-background-rgb) / var(--opacity-40)),
        transparent
      );

      padding-block: var(--padding-xs) var(--padding-lg);
      background-image: var(--to-top-gradient-background);
    }
  }

  predictive-search-component:has([data-search-results]):not(:has(.predictive-search-results__no-results))
    .predictive-search-form__footer {
    display: block;
  }

  .predictive-search-form {
    position: relative;
    width: 100%;
    align-self: flex-start;
  }

  .predictive-search-form__content {
    max-height: 50dvh;
    overflow-y: auto;
    background-color: var(--color-background);

    /* Firefox */
    scrollbar-width: none;

    /* Webkit browsers */
    &::-webkit-scrollbar {
      display: none;
    }
  }

  .predictive-search-form__content-wrapper {
    position: absolute;
    top: 100%;
    width: 100%;
    left: 0;
    z-index: var(--layer-raised);
    display: flex;
    flex-direction: column;
    border-radius: 0 0 var(--search-border-radius) var(--search-border-radius);
    transition: box-shadow var(--animation-speed) var(--animation-easing);
    transform: translateZ(0);
    will-change: transform, opacity;
    overflow: hidden;

    @media screen and (max-width: 749px) {
      border-radius: 0;
    }

    @media screen and (min-width: 750px) {
      max-height: var(--modal-max-height);
    }
  }

  /* Add new rule to apply bottom padding only when search button exists */
  .predictive-search-form__content-wrapper:has([data-search-results]):not(:has(.predictive-search-results__no-results))
    > .predictive-search-form__content {
    padding-block-end: var(--padding-6xl);
  }

  .predictive-search-form__header-inner {
    background: var(--color-background);
    border: var(--search-border-width) solid var(--color-border);
    color: var(--color-foreground);
    border-radius: var(--style-border-radius-popover);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;

    @media screen and (max-width: 749px) {
      border-radius: var(--style-border-radius-inputs);
      border: none;
    }
  }

  .predictive-search-form__header-inner:focus-within {
    outline-offset: var(--focus-outline-offset);

    @media screen and (min-width: 750px) {
      outline: var(--focus-outline-width) solid var(--color-primary);
    }
  }

  .predictive-search-form__header {
    display: flex;
    position: sticky;
    top: 0;
    z-index: var(--layer-heightened);
    width: 100%;
    align-items: center;
    background-color: var(--color-input-background);
    border: var(--search-border-width) solid var(--color-border);
    border-radius: var(--style-border-radius-inputs);

    @media screen and (max-width: 749px) {
      padding: var(--padding-2xs) var(--padding-sm);
    }
  }

  .predictive-search-form__header:focus-within,
  .predictive-search-form__header-inner:focus-within,
  .predictive-search-form__header-inner:has(.search-input:is(:focus, :focus-visible)) {
    outline: none;
    box-shadow: none;
    /* stylelint-disable-next-line declaration-no-important */
    border-color: var(--color-border) !important;
  }

  input.search-input {
    border-radius: var(--style-border-radius-inputs);
    padding-block: var(--padding-sm);
    font-size: var(--font-size--md);
    width: 100%;
    color: var(--color-foreground);
    padding-inline: calc(var(--margin-lg) + var(--icon-size-lg)) 0;
    background: transparent;
    text-overflow: ellipsis;
    overflow: hidden;
    outline: none;
    border: 0;
  }

  .search-input::placeholder {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .search-input,
  .search-input:is(:focus, :focus-visible, :focus-within),
  .predictive-search-form__header *:is(:focus, :focus-visible) {
    outline: none;
    box-shadow: none;
  }

  .search-input:hover {
    background-color: transparent;
  }

  .predictive-search__icon {
    position: absolute;
    left: var(--margin-xl);
    top: auto;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-60));

    @media screen and (min-width: 750px) {
      left: var(--margin-md);
    }
  }

  .predictive-search__icon > svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  .predictive-search__reset-button {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    padding: 0;
    margin-inline-end: var(--margin-md);
    background: transparent;
    color: var(--color-foreground);
    opacity: 0.68;
    transition: opacity var(--animation-speed-medium) var(--animation-timing-fade-out),
      visibility var(--animation-speed-medium) var(--animation-timing-fade-out);

    &:hover {
      color: var(--color-foreground);
    }

    &:active {
      transform: scale(0.9);
      transition: transform 100ms var(--animation-timing-active);
    }

    @media screen and (min-width: 750px) {
      margin-inline-end: var(--margin-2xs);
    }
  }

  .predictive-search__reset-button[hidden] {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
  }

  .predictive-search__reset-button-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    transition: background-color var(--animation-speed-medium) ease-in-out,
      transform var(--animation-speed-medium) var(--animation-timing-bounce);
    border-radius: 50%;

    &:hover {
      background-color: rgb(var(--color-primary-hover-rgb) / var(--opacity-8));
    }
  }

  .predictive-search__reset-button:active .predictive-search__reset-button-icon {
    transform: scale(0.85);
    transition-timing-function: var(--animation-timing-active);
    transition-duration: 100ms;
  }

  .predictive-search__reset-button svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  .predictive-search__reset-button-text {
    display: none;
  }

  .predictive-search__search-button {
    margin: auto;
    z-index: var(--layer-raised);
    transition: transform var(--animation-speed-medium) var(--animation-timing-bounce),
      box-shadow var(--animation-speed-medium) var(--animation-timing-hover);
    transform-origin: center;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgb(0 0 0 / var(--opacity-5));
    }

    &:active {
      transform: scale(0.97);
      transition: transform 100ms var(--animation-timing-active);
      box-shadow: none;
    }
  }

  .predictive-search__close-modal-button {
    --button-color: var(--color-foreground);
    --button-background-color: transparent;

    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    margin-inline-start: var(--margin-sm);
    padding: 0;
    box-shadow: none;

    &:active {
      transform: scale(0.8);
      transition: transform 100ms var(--animation-timing-active);
    }

    .svg-wrapper,
    svg {
      width: var(--icon-size-xs);
      height: var(--icon-size-xs);
    }
  }

  .predictive-search__close-modal-button:hover {
    --button-color: var(--color-foreground);
    --button-background-color: transparent;
  }
/* END_SNIPPET:search-modal */