/** Shopify CDN: Minification failed

Line 536:138 Unexpected "/"
Line 2178:136 Unexpected "/"

**/
/* START_SECTION:church-custom-size-popup (INDEX:55) */
/* ── 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);
    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. */
  .chcsp-right { overflow-y: auto; }
  .chcsp-aside { overflow-y: auto; }
  .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:56) */
.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);
    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. */
  .chmrp-right { overflow-y: auto; }
  .chmrp-aside { overflow-y: auto; }
  .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:61) */
/* ── 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);
    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. */
  .csp-right { overflow-y: auto; }
  .csp-aside { overflow-y: auto; }
  .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:header-announcements (INDEX:71) */
.announcement-bar {
    border-block-end: var(--border-bottom-width) solid var(--color-border);
  }

  .announcement-bar__slider {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;

    @media screen and (max-width: 749px) {
      grid-column: 1 / -1;
    }
  }

  .announcement-bar__slides {
    display: grid;
    grid: [stack] auto / [stack] auto;
    width: calc(100% - var(--button-size) * 2);
    max-width: 680px;
    margin-inline: auto;
  }

  .announcement-bar__slides > * {
    grid-area: stack;
  }

  .announcement-bar__slide {
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
    content-visibility: visible;

    &[aria-hidden='true'] {
      opacity: 0;
      visibility: hidden;
    }
  }

  .announcement-bar__slider slideshow-arrows {
    padding: 0;
    mix-blend-mode: normal;
  }

  .announcement-bar__slider slideshow-arrows .slideshow-control {
    color: var(--color-foreground);
  }

  .announcement-bar__slider .slideshow-control {
    display: flex;
    padding: 0;
    width: var(--button-size);
    height: var(--button-size);
    align-items: center;
    justify-content: center;
    opacity: 1;
    animation: none;

    @media screen and (min-width: 750px) {
      --slideshow-control-offset: calc((var(--button-size) - var(--icon-size-xs)) / 2);

      .section--page-width &.slideshow-control--previous {
        transform: translateX(var(--slideshow-control-offset));
      }
    }
  }

  .announcement-bar__slider .slideshow-control .svg-wrapper {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .announcement-bar__slide {
    place-content: center;
  }

  .announcement-bar__text:first-child {
    margin: 0;
  }
  .announcement-bar__text {
    text-align: center;
  }

  .announcement-bar__link {
    position: absolute;
    inset: 0;
  }
/* END_SECTION:header-announcements */
/* START_SECTION:header (INDEX:73) */
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: 999px;
  }

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

  .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);
  }

  .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;
  }

  .header-inline-search {
    width: 100%;
    /* max-width: 360px;*/ 
    max-width: clamp(200px, 24vw, 360px);
    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;
  }

  .header-inline-search .search-page-input {
    padding-block: 10px;
    border-radius: 999px;
    background-color: #F5F5F5;
  }

  @media screen and (min-width: 750px) and (max-width: 768px) {
    .header-inline-search {
      width: 100%;
      max-width: 130px;
      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: 150px;
      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:how-to-order-section (INDEX:75) */
.how-to-order-section {
    background: #f0f0f2;
  }

  .how-to-order-section__inner {
    width: calc(100% - 40px);
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 330px 1fr;
    gap: 70px;
    align-items: center;
  }

  .how-to-order-section__intro h2 {
    margin: 0 0 26px;
    color: #1f2328;
    font-size: 40px;
    font-weight: 500;
    line-height: 50px;
    letter-spacing: -2px;
  }

  .how-to-order-section__arrows {
    display: flex;
    gap: 12px;
  }

  .how-to-order-section__arrows button {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #fff;
    color: #8c8c8c;
    font-size: 28px;
    border: 0;
    cursor: pointer;
    padding-bottom: 3px;
    transition: color 0.15s ease, background 0.15s ease;
  }

  .how-to-order-section__arrows button:hover {
    color: #1f2328;
  }

  .how-to-order-section__cards {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .how-to-order-section__cards::-webkit-scrollbar {
    display: none;
  }

  .how-to-order-section__card {
    flex: 0 0 calc((100% - 32px) / 3.3);
    min-height: 190px;
    border-radius: 8px;
    padding: 28px;
    background: var(--how-card-bg, #073a74);
    color: var(--how-card-text, #fff);
    scroll-snap-align: start;
  }

  .how-to-order-section__icon {
    margin-bottom: 20px;
    color: var(--how-card-text, #fff);
  }

  .how-to-order-section__icon svg {
    display: block;
  }

  .how-to-order-section__number {
    display: none;
    margin-bottom: 34px;
    font-size: 13px;
    opacity: 0.9;
  }

  .how-to-order-section__card h3 {
    margin: 0 0 10px;
    color: inherit;
    font-size: 16px;
    font-weight: 600;
  }

  .how-to-order-section__card p {
    margin: 0;
    color: rgb(255 255 255 / 0.72);
    line-height: 1.35;
  }

  @media screen and (max-width: 989px) {
    .how-to-order-section__inner {
      grid-template-columns: 1fr;
      gap: 28px;
    }
  }

  @media screen and (max-width: 749px) {
    .how-to-order-section {
      padding: 36px 20px 48px;
    }
    .how-to-order-section__inner {
      width: 100%;
    }

    .how-to-order-section__intro h2 {
      font-size: 28px;
      text-align: center;
    }

    .how-to-order-section__arrows {
      display: none;
    }

    .how-to-order-section__cards {
      flex-direction: column;
      overflow-x: visible;
      scroll-snap-type: none;
      position: relative;
      gap: 22px;
      padding-left: 64px;
    }

    /* Line segments between circles — stops exactly at the top of the next circle */
    .how-to-order-section__card:not(:last-child)::after {
      content: '';
      position: absolute;
      left: -40px; /* center X of the number circle */
      top: 68px;   /* bottom of number circle: top(20px) + height(48px) */
      height: calc(100% - 26px); /* card remaining + 22px gap + 20px to next circle top */
      width: 1px;
      background: #d6d6d6;
    }

    .how-to-order-section__card {
      flex: none;
      position: relative;
      min-height: 0;
      padding: 24px 18px;
      background: #fff;
      color: #1f2328;
      border: 1px solid #dedede;
    }
    .how-to-order-section__card h3 {
      font-weight: 500;
    }
    .how-to-order-section__icon {
      color: #1f2328;
      margin-bottom: 16px;
    }
    .how-to-order-section__icon svg path {
      fill: #000000;
    }

    .how-to-order-section__number {
      position: absolute;
      left: -64px;
      top: 20px;
      display: grid;
      place-items: center;
      width: 48px;
      height: 48px;
      border: 1px solid #d6d6d6;
      border-radius: 999px;
      background: #fff;
      color: #111;
      font-weight: 700;
      font-size: 12px;
      margin: 0;
      opacity: 1;
      z-index: 1;
    }

    .how-to-order-section__card.is-active .how-to-order-section__number,
    .how-to-order-section__card:first-child .how-to-order-section__number {
      background: #000;
      color: #fff;
      border-color: #000;
    }

    .how-to-order-section__card p {
      color: #767676;
    }
  }
/* END_SECTION:how-to-order-section */
/* START_SECTION:mockup-request-popup (INDEX:90) */
.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);
    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. */
  .mrp-right { overflow-y: auto; }
  .mrp-aside { overflow-y: auto; }
  .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:102) */
.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_SECTION:product-image-text (INDEX:104) */
.product-image-text {
    background: #F9F9F9;
    color: #fff;
  }

  .product-image-text__inner {
    max-width: 1000px;
    margin: 0 auto;
  }

  .product-image-text h2 {
    margin: 0 0 40px;
    text-align: center;
    font-size: 40px;
    line-height: 50px;
    font-weight: 500;
    margin-bottom: 0;
    white-space: nowrap;
  }
  .product-image-text__inner summary {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
  }
  .product-image-text__inner summary hr{
    height: 1px;
    width: 30%;
    background-color: #0a3161;
    border-width: medium;
    border-style: none;
    border-color: currentcolor;
    border-image: initial;
    flex-shrink: 1;
    margin: 10px;
  }
  .product-image-text__inner details span svg{
   color: #0a3161;
    width: 36px;
    height: 36px;
    margin-top: 8px;
    transition: transform 250ms;
  }
  .product-image-text__inner details[open] svg {
    transform: rotate(-180deg);
  }
  .product-image-text__inner_content {
    margin-top: 50px;
  }
  .product-image-text__row {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 20px;
    align-items: center;
    margin-bottom: 50px;
    background-color: #fff;
    border-radius: 24px;
    padding: 30px 20px;
  }

  .product-image-text__media,
  .product-image-text__copy {
    min-width: 0;
  }

  .product-image-text__row--reverse {
    grid-template-columns: 1fr 360px;
  }

  .product-image-text__row--reverse .product-image-text__media {
    order: 2;
  }

  .product-image-text__row--no-image {
    grid-template-columns: 1fr;
  }

  .product-image-text__media {
    overflow: hidden;
    border-radius: 12px;
    background: #f1f1f1;
  }

  .product-image-text__media img {
    display: block;
    width: 100%;
    aspect-ratio: 13 / 10;
    object-fit: cover;
  }

  .product-image-text__copy h2 {
    margin: 0 0 14px;
    color: #0A3161;
    font-size: 32px;
    line-height: 100%;
    letter-spacing: -1.5px;
    font-weight: 400;
    white-space: normal;
  }

  .product-image-text__copy .rte {
    color: #444748;
  }
   .product-image-text__table-wrap {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .product-image-text__table {
    width: 100%;
    margin-top: 20px;
    border-collapse: collapse;
    font-size: 14px;
  }

  .product-image-text__table th,
  .product-image-text__table td {
    text-align: left;
    padding: 8px 10px;
    border: 1px solid #E4E4E4;
  }

  .product-image-text__table th {
    background: #F7F7F7;
    color: #0A3161;
    font-weight: 600;
  }

  .product-image-text__table td {
    color: #444748;
  }
  @media screen and (max-width: 989px) {
    .product-image-text__inner {
      padding: 0 20px;
    }
  }

  @media screen and (max-width: 749px) {
    .product-image-text__inner {
      padding: 0 20px;
    }
    .product-image-text h2{
      font-size: 26px;
    }
    .product-image-text__inner summary hr {
      width: 7%;
      margin: 4px;
    }
    .product-image-text__row,
    .product-image-text__row--reverse {
      grid-template-columns: 1fr;
    }

    .product-image-text__row--reverse .product-image-text__media {
      order: 0;
    }
  }
/* END_SECTION:product-image-text */
/* START_SECTION:product-specs-tabs (INDEX:109) */
.product-specs-tabs {
    background: #F9F9F9;
    color: #073a74;
    padding: 84px var(--page-margin);
  }

  .product-specs-tabs__inner {
    max-width: 1200px;
    margin: 0 auto;
  }

  .product-specs-tabs h2 {
    text-align: center;
    font-size: 40px;
    line-height: 50px;
    font-weight: 500;
    margin-bottom: 40px;
  }

  .product-specs-tabs__nav {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    /* max-width: 820px; */
    margin: 0 auto 48px;
    padding: 10px;
    border-radius: 999px;
    background: #e9e9e9;
  }

  .product-specs-tabs__nav button {
    border: 0;
    border-radius: 999px;
    padding: 13px 18px;
    background: transparent;
    color: #6f6f6f;
    cursor: pointer;
    font-size: 16px;
    white-space: nowrap;
  }

  .product-specs-tabs__nav button.is-active {
    background: #fff;
    color: #222;
    box-shadow: 0 1px 8px rgb(0 0 0 / 0.08);
  }

  .product-specs-tabs__panel {
    display: none;
    padding: 40px 92px;
    border-radius: 24px;
    background: #fff;
    border: 1px solid #CFC4C5;
  }

  .product-specs-tabs__panel.is-active {
    display: block;
  }

  .product-specs-tabs__copy {
    max-width: 900px;
    margin: 0 auto 52px;
  }

  .product-specs-tabs__copy h3 {
    color: #073a74;
    font-size: 34px;
    font-weight: 500;
    text-align: center;
  }

  .product-specs-tabs__features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 52px 80px;
    border-top: 1px solid #eee;
    padding-top: 36px;
  }

  .product-specs-tabs__feature {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 22px;
  }

  .product-specs-tabs__icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 8px;
    background: #f0f0f2;
    color: #111;
  }

  .product-specs-tabs__feature h4 {
    color: #000000;
    font-size: 16px;
    font-weight: 500;
    line-height: 16px;
    margin-bottom: 0;
  }

  .product-specs-tabs__feature p,
  .product-specs-tabs__copy .rte {
    color: #444748;
    font-size: 16px;
    line-height: 140%;
    margin-top: 10px;
  }

  @media screen and (max-width: 999px) {
    .product-specs-tabs {
      padding: 64px 20px;
    }

    .product-specs-tabs h2 {
      font-size: 28px;
      margin-bottom: 30px;
    }

    .product-specs-tabs__nav {
      display: flex;
      overflow-x: auto;
      max-width: none;
      margin: 0 -20px 24px;
      padding: 0 20px;
      border-radius: 0;
      background: transparent;
      border-bottom: 1px solid #d4d4d4;
      scrollbar-width: none;
    }

    .product-specs-tabs__nav button {
      flex: 0 0 auto;
      border-radius: 0;
      color: #8f8f8f;
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      background: transparent;
      box-shadow: none;
      padding-inline: 22px;
      border-bottom: 2px solid transparent;
    }
       .product-specs-tabs__nav::-webkit-scrollbar { 
        display: none; 
      }

    .product-specs-tabs__nav button.is-active {
      background: transparent;
      box-shadow: none;
      border-bottom-color: #000000;
      color: #000000;
    }

    .product-specs-tabs__features {
      grid-template-columns: 1fr;
    }

    .product-specs-tabs__panel {
      padding: 32px 22px;
      border-radius: 8px;
      max-height: 400px;
      height: 100%;
      overflow-y: scroll;
    }
    .product-specs-tabs__copy {
      margin-bottom: 20px;
    }

    .product-specs-tabs__copy h3 {
      font-size: 18px;
    }
    .product-specs-tabs__feature p,
    .product-specs-tabs__copy p,
    .product-specs-tabs__copy--desc .rte ul li {
      font-size: 14px;
    } 
    
    .product-specs-tabs__copy--desc .rte table {
      display: block;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      border: 1px solid #eee;
    }

    .product-specs-tabs__copy--desc .rte table th,
    .product-specs-tabs__copy--desc .rte table td {
      white-space: nowrap;
      min-width: 120px;
      font-size: 14px;
    }

  }
/* END_SECTION:product-specs-tabs */
/* START_BLOCK:_announcement (INDEX:121) */
.text-block:not(.text-block--full-width).rte,
  .text-block:not(.text-block--full-width).paragraph {
    /* Safari doesn't support pretty, so fallback to balance */
    text-wrap: balance;
    text-wrap: pretty;
  }

  .text-block:not(.text-block--full-width).h1,
  .text-block:not(.text-block--full-width).h2,
  .text-block:not(.text-block--full-width).h3,
  .text-block:not(.text-block--full-width).h4,
  .text-block:not(.text-block--full-width).h5,
  .text-block:not(.text-block--full-width).h6 {
    text-wrap: balance;
  }

  /* Hide underline unless text is using paragraph styles. */
  .text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) a {
    text-decoration-color: transparent;
  }

  .text-block h1,
  .text-block.h1 > * {
    margin-block: var(--font-h1--spacing);
  }

  .text-block h2,
  .text-block.h2 > * {
    margin-block: var(--font-h2--spacing);
  }

  .text-block h3,
  .text-block.h3 > * {
    margin-block: var(--font-h3--spacing);
  }

  .text-block h4,
  .text-block.h4 > * {
    margin-block: var(--font-h4--spacing);
  }

  .text-block h5,
  .text-block.h5 > * {
    margin-block: var(--font-h5--spacing);
  }

  .text-block h6,
  .text-block.h6 > * {
    margin-block: var(--font-h6--spacing);
  }

  .text-block > *:first-child {
    margin-block-start: 0;
  }

  .text-block > *:last-child {
    margin-block-end: 0;
  }

  .text-block--align-center,
  .text-block--align-center > * {
    margin-inline: auto;
  }

  .text-block--align-right,
  .text-block--align-right > * {
    margin-inline-start: auto;
  }
/* END_BLOCK:_announcement */
/* START_BLOCK:_header-logo (INDEX:149) */
.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:150) */
.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(--header-padding, 0.7rem);
    margin-block: calc(-1 * var(--header-padding, 0.7rem));
  }

  .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);
    }
  }

  .menu-list__link-title {
    padding-inline: calc(var(--gap-xl) / 2);
  }
  [slot='overflow'] .menu-list__link-title {
    padding-inline: 0;
  }

   .menu-list__link-inner {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }

  .menu-list__link-icon {
    flex-shrink: 0;
    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: calc(var(--gap-xl) / 2);
    right: calc(var(--gap-xl) / 2);
    bottom: 0px;
    height: 2px;
    background: currentColor;
    transform: scaleX(0);
    transition: transform 0.15s;
  }

  .menu-list__link:hover .menu-list__link-inner::after,
  .menu-list__link[aria-expanded='true'] .menu-list__link-inner::after,
  .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)) {
    .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;
    grid-template-columns: minmax(auto, 200px) 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--xl);
      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: 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;
  }
    /*
    Constrain the menu row's content (not its full-bleed background) to
    match the design — the maroon bar still spans edge to edge, but the
    nav items themselves sit within a centered 1360px column.

    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 {
    max-width: 1360px;
    margin-inline: auto;
    padding: 10px var(--page-margin);
  }
/* END_BLOCK:_header-menu */
/* START_BLOCK:_header-utility-bar (INDEX:151) */
.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;
  }

  @media screen and (max-width: 749px) {
    /* The bar used to be hidden outright on mobile, which took the phone
       number and email address with it. It stays, carrying search, phone
       and email — the three things a phone visitor reaches for. */
    .header-utility-bar__inner {
      gap: 10px;
      padding: 7px 14px;
      font-size: 11px;
    }

    .header-utility-bar__right {
      gap: 14px;
    }

    .header-utility-bar__search {
      display: inline-flex;
    }

    /* "Our Work" is in the drawer menu; dropping it here buys the width the
       contact details need. */
    .header-utility-bar__link {
      display: none;
    }

    .header-utility-bar__contact {
      gap: 4px;
    }

    .header-utility-bar__contact svg {
      width: 13px;
      height: 13px;
    }

    /* The full address does not fit beside a phone number at this width, so
       the icon carries the meaning and the link still dials/opens mail. */
    .header-utility-bar__contact:not(.header-utility-bar__search) span {
      display: none;
    }
  }

  /* Narrow phones cannot take the word "Search" as well as two icons. */
  @media screen and (max-width: 400px) {
    .header-utility-bar__search span {
      display: none;
    }
  }
/* END_BLOCK:_header-utility-bar */
/* START_BLOCK:_search-input (INDEX:168) */
.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:background-media (INDEX:219) */
@media (prefers-reduced-motion: reduce) {
    video-background-component video {
      display: none;
    }
  }
/* END_SNIPPET:background-media */
/* START_SNIPPET:buy-buttons-styles (INDEX:235) */
.buy-buttons-block {
    --buy-button-preferred-width: 185px;

    width: 100%;
  }

  .product-form-buttons {
    display: flex;
    flex-wrap: wrap;
  }

  .product-form-buttons:not(:has(.quantity-rules)) {
    gap: calc(var(--gap-sm) / 2);

    @media screen and (min-width: 750px) {
      gap: var(--gap-sm);
    }
  }

  .product-form-buttons
    > *:not(.quantity-selector-wrapper, .quantity-rules, .quantity-label, .volume-pricing, .product-form-text__error) {
    flex: 1 1 var(--buy-button-preferred-width, 0);
    min-width: fit-content;
  }

  .product-form-buttons--stacked
    > *:not(.quantity-selector-wrapper, .quantity-rules, .quantity-label, .volume-pricing, .product-form-text__error) {
    flex-basis: 51%;
  }

  .product-form-buttons button {
    width: 100%;
    padding-block: var(--padding-lg);
  }

  .quantity-selector {
    flex-grow: 0;
    flex-shrink: 0;
    height: var(--height-buy-buttons);
  }

  .quantity-label {
    flex: 1 0 100%;
    width: 100%;
    font-size: var(--font-size--sm);
    margin-block-end: var(--gap-xs);
  }

  .quantity-label__cart-count {
    color: var(--color-foreground-secondary);
  }

  .quantity-rules {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    row-gap: calc(var(--gap-xs) / 2);
    flex: 1 0 100%;
    width: 100%;
    font-size: var(--font-size--xs);
    color: var(--color-foreground-secondary);
    margin-block-start: var(--gap-xs);
    margin-block-end: var(--gap);
  }

  .product-form-buttons:has(~ .volume-pricing .volume-pricing__title) .quantity-rules {
    margin-block-end: var(--gap-md);
  }

  .quantity-rules__item {
    position: relative;
    display: inline-block;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .quantity-rules__item:not(:last-child) {
    padding-right: var(--padding-xl);
    margin-right: var(--margin-2xs);
  }

  .quantity-rules__item:not(:last-child)::after {
    content: '•';
    position: absolute;
    inset-inline-end: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.5em;
    line-height: 0;
  }

  .add-to-cart-button {
    height: var(--height-buy-buttons);
    text-transform: var(--button-text-case-primary);
  }

  .add-to-cart-button.button-secondary {
    text-transform: var(--button-text-case-secondary);
  }

  .product-form-text__error {
    display: flex;
    flex: 1 0 100%;
    align-items: flex-start;
    gap: var(--gap-xs);
    margin-block-end: var(--gap-xs);
  }

  .product__pickup-availabilities {
    width: 100%;
  }

  .pickup-availability__column {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  .pickup-availability__row {
    display: flex;
    gap: var(--padding-xs);
  }

  .pickup-availability__dialog-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }

  .pickup-availability__header-container {
    padding-block-end: var(--padding-2xl);
  }

  .pickup-location__wrapper {
    display: flex;
    flex-direction: column;
    padding-block: var(--padding-2xl);
    border-top: 1px solid var(--color-border);
    gap: var(--padding-xs);
  }

  .pickup-location__address-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--padding-md);
  }

  .pickup-location__dialog {
    padding: var(--padding-2xl);
    position: fixed;
    border-radius: 0;
    width: var(--sidebar-width);
    max-width: 95vw;
    height: 100%;
    margin: 0 0 0 auto;
    border: var(--style-border-drawer);
    box-shadow: var(--shadow-drawer);
    background-color: var(--color-background);
  }

  .pickup-location__dialog:modal {
    max-height: 100dvh;
  }

  .pickup-location__text-sm {
    font-size: var(--font-size--sm);
    margin: 0;
  }

  .pickup-location__text-xs {
    font-size: var(--font-size--xs);
    margin: 0;
  }

  .pickup-location__button {
    width: fit-content;
    color: var(--color-primary);
    font-size: var(--font-size--xs);
    font-family: var(--font-body--family);
    padding: 0;
    cursor: pointer;
    margin-block: var(--margin-xs);
  }

  .pickup-location__button:hover {
    color: var(--color-primary-hover);
  }

  .pickup-location__h4 {
    margin: 0;
  }

  .pickup-location__text-bold {
    font-size: var(--font-size--md);
    font-weight: 600;
    margin: 0;
  }

  .pickup-location__availability-wrapper {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    font-family: var(--font-paragraph--family);
  }

  .pickup-location__address {
    font-style: normal;
  }

  .pickup-location__close-button {
    top: calc(var(--padding-2xl) - (var(--icon-size-xs) / 2));
    right: calc(var(--padding-2xl) - var(--icon-size-xs));
  }

  .volume-pricing {
    display: block;
    width: 100%;
    margin-bottom: var(--gap);
  }

  .volume-pricing:not(:has(.volume-pricing__title)) {
    margin-top: 0;
    margin-bottom: 0;
  }

  .volume-pricing__title {
    display: block;
    margin-block-end: var(--gap-sm);
    font-size: var(--font-size--sm);
    font-weight: var(--font-body--weight);
    color: var(--color-foreground);
  }

  .volume-pricing__table {
    width: 100%;
  }

  .volume-pricing__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: var(--padding-sm);
    padding-inline: var(--padding-md);
    font-size: var(--font-size--sm);
  }

  .volume-pricing__row--even {
    background: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .volume-pricing__row--odd {
    background: var(--color-background);
  }

  .volume-pricing__collapsible-wrapper {
    block-size: 0;
    overflow-y: clip;
    opacity: 0;
    interpolate-size: allow-keywords;
    transition: opacity var(--animation-speed-slow) var(--animation-easing),
      block-size var(--animation-speed-slow) var(--animation-easing);
  }

  .volume-pricing__toggle {
    width: 100%;
    padding-bottom: 0;
    padding-inline: 0;
    text-align: left;
    color: var(--color-foreground-secondary);
    font-size: var(--font-size--xs);
    cursor: default;
    margin-block-start: 0;
    pointer-events: none;
  }

  button.volume-pricing__toggle {
    /* Need the extra specificity to override .product-form-buttons button */
    padding-block: var(--padding-sm);
  }

  .volume-pricing__toggle-text {
    cursor: pointer;
    display: inline-block;
    pointer-events: auto;
  }

  .volume-pricing__show-less {
    display: none;
  }

  .volume-pricing--expanded .volume-pricing__collapsible-wrapper {
    opacity: 1;
    block-size: auto;

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

  .volume-pricing--expanded .volume-pricing__show-more {
    display: none;
  }

  .volume-pricing--expanded .volume-pricing__show-less {
    display: inline;
  }

  /* Accelerated checkout styles — co-located here so they compile on pages
     where the quick-add modal can display buy buttons (e.g. collection pages). */
  .accelerated-checkout-block[data-shopify-visual-preview] {
    width: 300px;
  }

  more-payment-options-link {
    font-size: smaller;
  }

  more-payment-options-link a {
    --button-color: var(--color-primary);
  }

  more-payment-options-link a:hover {
    --button-color: var(--color-primary-hover);
  }

  .shopify-payment-button__more-options[aria-hidden='true'] {
    display: none;
  }
/* END_SNIPPET:buy-buttons-styles */
/* START_SNIPPET:cart-bubble (INDEX:237) */
.cart-bubble {
    --cart-padding: 0.2em;

    position: relative;
    width: 20px;
    aspect-ratio: 1;
    border-radius: 50%;
    border-width: 0;
    display: flex;
    line-height: normal;
    align-items: center;
    justify-content: center;
    color: var(--color-primary-button-text);
    padding-inline: var(--cart-padding);
  }

  .cart-bubble[data-maintain-ratio] {
    aspect-ratio: 1;
  }

  .cart-bubble[data-maintain-ratio] .cart-bubble__background {
    border-radius: var(--style-border-radius-50);
  }

  .cart-bubble__background {
    position: absolute;
    inset: 0;
    background-color:#0A3161;
    border-radius: var(--style-border-radius-lg);
  }

  .cart-bubble__text {
    font-size: var(--font-size--3xs);
    z-index: var(--layer-flat);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
/* END_SNIPPET:cart-bubble */
/* START_SNIPPET:header-actions (INDEX:261) */
.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 */
/* START_SNIPPET:header-drawer (INDEX:263) */
.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 */
/* START_SNIPPET:header-promo (INDEX:265) */
.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 (min-width: 750px) and (max-width: 768px) {
    .header-promo {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 4px 16px;
      margin-left: 0;
      font-size: 12px;
      flex-wrap: wrap;
    }
  }

  @media screen and (min-width: 769px) and (max-width: 990px) {
    .header-promo {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 4px 16px;
      margin-left: 0;
      font-size: 12px;
      flex-wrap: wrap;
    }
  }
  @media screen and (max-width: 749px) {
    .header-promo {
      display: none;
    }
  }
/* END_SNIPPET:header-promo */
/* START_SNIPPET:mega-menu-spotlight (INDEX:282) */
/*
    Defensive fix, scoped only to submenus using this spotlight layout
    (via :has(.mega-menu-spotlight), so it can't affect any other menu_style):
    every top-level item's .menu-list__submenu sits at the same absolute
    position/z-index (blocks/_header-menu.liquid), so while one is
    animating closed and another opens, the closing one can still be
    hit-tested and its own ":hover -> visibility:visible" rule can make it
    reappear if the pointer crosses it (most noticeable over the gaps
    between this layout's columns, where there's no link/button to
    otherwise "claim" the hover). Force only the genuinely-active one
    (its own top-level link has aria-expanded="true") to be interactive
    and painted on top; every other spotlight submenu is excluded from
    hit-testing entirely, so it can never be hit-tested back to visible.
  */
  .menu-list__submenu:has(.mega-menu-spotlight) {
    pointer-events: none;
  }

  .menu-list__list-item:has(> a[aria-expanded='true']) > .menu-list__submenu:has(.mega-menu-spotlight) {
    z-index: calc(var(--layer-header-menu) + 1);
    pointer-events: auto;
  }

  .mega-menu-spotlight__grid {
    display: grid;
    grid-template-columns: minmax(280px, 340px) 1fr minmax(260px, 300px);
    gap: 0 32px;
    align-items: stretch;
  }

  .mega-menu-spotlight__sidebar {
    background: #EBEFF2;
    border-radius: 12px;
    padding: 12px;
  }

  .mega-menu-spotlight__sidebar-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 16px;
    border-radius: 8px;
    color: #1a1a1a;
    font-weight: 500;
    font-size: 0.95rem;
    text-decoration: none;
  }

  .mega-menu-spotlight__sidebar-item svg {
    opacity: 0;
    flex-shrink: 0;
    transition: opacity 0.15s;
  }

  li[data-item-index].is-active .mega-menu-spotlight__sidebar-item {
    background: #ffffff;
    color: #0A3161;
  }

  li[data-item-index].is-active svg {
    opacity: 1;
    stroke: #0A3161;
  }

  .mega-menu-spotlight__panels {
    position: relative;
    display: grid;
    background: #FEF5F6;
    border-radius: 12px;
    padding: 10px;
  }

  .mega-menu-spotlight__panel {
    grid-area: 1 / 1;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.1s;
  }

  .mega-menu-spotlight__panel.is-active {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }

  .mega-menu-spotlight__panel-heading {
    display: block;
    color: #b31942;
    font-weight: 700;
    font-size: 1.05rem;
    text-decoration: none;
    margin-bottom: 16px;
    background-color: #FCF0F0;
    padding: 16px 20px;
    border-radius: 12px;
  }

  .mega-menu-spotlight__panel-columns {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px 32px;
    padding: 0 20px 20px;
  }

  .mega-menu-spotlight__panel-link {
    color: #484848;
    text-decoration: none;
    padding-block: 6px;
    font-size: 0.9rem;
    line-height: normal;
  }

  .mega-menu-spotlight__panel-link:hover {
    text-decoration: underline;
    color: #1A1A1A;
  }

  .mega-menu-spotlight__cta {
    display: block;
    border-radius: 12px;
    overflow: hidden;
    max-width: 300px;
    max-height: 300px;;
  }

  .mega-menu-spotlight__cta img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: transform 0.2s;
  }

  .mega-menu-spotlight__cta:hover img {
    transform: scale(1.03);
  }

  .mega-menu-spotlight__logos {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgb(0 0 0 / 0.08);
  }

  .mega-menu-spotlight__logos-heading {
    color: #0a3161;
    font-weight: 700;
    margin: 0;
    white-space: nowrap;
  }

  .mega-menu-spotlight__logos-marquee {
    flex: 1;
    min-width: 0;
    overflow: hidden;
  }

  /*
    Reusing snippets/logos-marquee-content.liquid (shared with
    sections/logos-marquee.liquid) here means it also brings that
    section's own full-page spacing (assets/custom.css) — override it to
    fit this compact single-row strip instead. No heading is passed to
    the shared snippet (we render our own .mega-menu-spotlight__logos-heading
    instead), so .bd-logos-marquee__heading never renders here.
  */
  .mega-menu-spotlight__logos-marquee .bd-logos-marquee__inner {
    padding: 0;
    max-width: none;
    margin: 0;
  }

  .mega-menu-spotlight__logos-marquee .bd-logos-marquee__logo img {
    height: 24px;
  }

  .mega-menu-spotlight__logos-link {
    color: #1a1a1a;
    text-decoration: none;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }

  @media screen and (max-width: 989px) {
    .mega-menu-spotlight__grid {
      grid-template-columns: 1fr;
    }

    .mega-menu-spotlight__cta {
      display: none;
    }
  }
/* END_SNIPPET:mega-menu-spotlight */
/* START_SNIPPET:product-badges-styles (INDEX:300) */
.product-badges {
    --badge-inset: max(var(--padding-xs), calc((var(--border-radius) + var(--padding-xs)) * (1 - cos(45deg))));

    position: absolute;
    z-index: var(--layer-flat);
  }

  .product-badges--bottom-left {
    bottom: calc(var(--badge-inset) + var(--padding-block-start));
    left: calc(var(--badge-inset) + var(--padding-inline-start));
  }

  .product-badges--top-left {
    top: calc(var(--badge-inset) + var(--padding-block-start));
    left: calc(var(--badge-inset) + var(--padding-inline-start));
  }

  .product-badges--top-right {
    top: calc(var(--badge-inset) + var(--padding-block-start));
    right: calc(var(--badge-inset) + var(--padding-inline-start));
  }

  .product-badges__badge {
    --badge-font-size: var(--font-size--xs);

    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--color-foreground);
    background: var(--color-background);
    font-size: var(--badge-font-size);
    font-family: var(--badge-font-family);
    font-weight: var(--badge-font-weight);
    text-transform: var(--badge-text-transform);
    border-radius: var(--badge-border-radius);
  }

  .product-badges__badge--rectangle {
    padding-block: var(--badge-rectangle-padding-block);
    padding-inline: var(--badge-rectangle-padding-inline);
  }
/* END_SNIPPET:product-badges-styles */
/* START_SNIPPET:product-design-main-styles (INDEX:302) */
/* =========================================
    CONFIGURATOR
  ========================================= */
  .configurator {
    width: 100%;
    max-width: none;
    padding: 10px 0 15px 5px;
    box-sizing: border-box;
  }
  .config-container {
    width: 100%;
    border: 2px solid #e5e5e5;
    border-radius: 24px;
    overflow: hidden;
    background: #fff;
    box-sizing: border-box;
  }

  .product-design-dynamic-step h2 {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 600;
  }

  /* =========================================
    ROW
  ========================================= */
  .config-row {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    box-sizing: border-box;
  }

  /* =========================================
    CELL
  ========================================= */
  .config-cell {
    position: relative;
    min-width: 0;
    padding: 20px 32px 10px 24px;
    box-sizing: border-box;
  }
  /* =========================================
    VERTICAL DIVIDER
    Only between column 1 and column 2
  ========================================= */
  .config-row > .config-cell:nth-child(odd)::after {
    content: "";
    position: absolute;
    top: 18px;
    bottom: 20px;
    right: 0;
    width: 2px;
    background: #e5e5e5;
  }
  /* =========================================
    HORIZONTAL DIVIDER
    Between main rows
  ========================================= */
  .config-row:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 30px;
    right: 30px;
    bottom: 0;
    height: 2px;
    background: #e5e5e5;
    z-index: 2;
  }
  /* =========================================
    DYNAMIC 2 COLUMN ROW
  ========================================= */
  .config-row--dynamic {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 0;
    row-gap: 0;
    width: 100%;
  }
  .config-row--dynamic.option_row-config {
    grid-template-columns: 1fr;
  }
  /* =========================================
    HEADING
  ========================================= */
  .pdm-card__heading {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 20px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
  }
  .pdm-card__heading svg {
    width: 25px;
    height: 25px;
    flex-shrink: 0;
  }

  .config-icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    color: #C8102E;
  }
  .config-icon svg {
    width: 100%;
    height: 100%;
  }
  /* =========================================
    LABEL
  ========================================= */
  .config-cell label,
  .config-field label {
    display: block;
    margin-bottom: 10px;
    font-size: 15px;
    color: #666;
    font-weight: 500;
  }
  /* =========================================
    SELECT
  ========================================= */
  .select-wrapper {
    position: relative;
    width: 100%;
  }
  .select-wrapper select {
    display: block;
    width: 100%;
    height: 50px;
    padding: 0 45px 0 16px !important;
    border: 2px solid #e5e7eb;
    border-radius: 14px;
    background: #fff;
    font-size: 14px;
    color: #1f2937;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    outline: none;
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s;
    box-sizing: border-box;
   }
  .select-wrapper select:hover {
    border-color: #d1d5db;
  }
  .select-wrapper select:focus {
    border-color: #d1d5db;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, .05);
  }
  .select-wrapper {
  position: relative;
}

.select-arrow {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

  /* =========================================
    EVENT
  ========================================= */
  .config-event {
    margin-top: 24px;
  }
  /* =========================================
    OTHER CONFIG GRID
  ========================================= */
  .config-grid > * {
    padding: 25px 40px;
    position: relative;
    box-sizing: border-box;
  }
  .config-grid > *:nth-child(odd)::after {
    content: "";
    position: absolute;
    top: 30px;
    bottom: 30px;
    right: 0;
    width: 1px;
    background: #e5e5e5;
  }
  .config-grid > *:nth-child(-n+2) {
    border-bottom: 1px solid #e5e5e5;
  }

.quantity-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 120px 16px 10px;
}

.quantity-wrapper label {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 40px !important;
}

.quantity-wrapper .quantity-input {
  width: 64px;
  height: 40px;
  padding: 0 8px;
  border: 1px solid #e1e1e1;
  border-radius: 10px;
  text-align: center;
  font-size: 15px;
  box-sizing: border-box;

}

.product-design-dynamic-step h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    color: #484848;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
}


  .product-design-dynamic-step select,
  .product-design-dynamic-step label {
     padding-top: 15px;
  }

  .product-design-main {
    background: var(--color-background);
    color: var(--color-foreground);
    padding: 24px 0 84px;
  }

  .product-design-main__inner {
    max-width: 1250px;
    margin: 0 auto;
    padding: 0 var(--page-margin);
  }

  .product-design-main__breadcrumbs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 48px;
    color: rgb(var(--color-foreground-rgb) / 0.55);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .product-design-main__breadcrumbs a {
    color: inherit;
    text-decoration: none;
  }

  .product-design-main__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(420px, 1.4fr);
    gap: 48px;
    align-items: start;
  }

  .product-design-main__media {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    position: sticky;
    top: calc(var(--bd-header-stuck-height, var(--header-height)) + var(--pdm-sticky-gap, 24px));
  }
  .product-design-main__media > :first-child {
    grid-row: 2;
  }

  .product-design-main__media > :last-child {
      grid-row: 1;
  }

  .product-design-main__thumbs {
    display: flex;
    gap: 14px;
    align-content: start;
    flex-wrap: wrap;
  }

  .product-design-main__thumb {
    width: 46px;
    aspect-ratio: 1;
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.14);
    border-radius: 3px;
    padding: 0;
    background: #fff;
    overflow: hidden;
    cursor: pointer;
  }

  .product-design-main__thumb.is-active {
    border-color: rgb(var(--color-foreground-rgb) / 0.75);
  }

  .product-design-main__thumb img,
  .product-design-main__image,
  .product-design-main__slider,
  .product-design-main__slide {
    width: 100%;
    height: 100%;
    object-fit: contain;
    aspect-ratio: 1;
  }

  .product-design-main__slider {
    position: relative;
  }

  .product-design-main__slide {
    display: none;
  }

  .product-design-main__slide.is-active {
    display: block;
  }

  .product-design-main__image-frame {
    display: grid;
    place-items: center;
    min-height: 420px;
    aspect-ratio: 1;
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.12);
    border-radius: 10px;
    padding: 20px;
    background: #fff;
    position: relative;
  }

  .product-design-main__dots {
    display: none;
  }

  .product-design-main__details h1 {
    margin: 0 0 18px;
    font-size: 38px;
    /* 1000 as specified. The heading font has to be variable, or with a
       static face the browser snaps this to the boldest weight it has. */
    font-weight: 1000;
    line-height: 56px;
    letter-spacing: 0;
  }

  /* Keeps title/rating/price/SKU pinned in view as the long details
     column (steps, cards, add-to-cart form) scrolls past underneath.
     Shares --pdm-sticky-gap with .product-design-main__media so the two
     sticky columns stay level with each other while scrolling. The gap is a
     setting because --header-height is measured once by an inline IIFE in
     theme.liquid, before the logo image and web fonts settle, so it can come
     back short and leave the pinned column tucked under the nav bar. Needs
     its own opaque background since scrolled-past content sits behind
     it once stuck, and a little bottom padding + divider so it doesn't
     look like it's touching the content below when pinned. */
  .product-header-sticky {
    position: sticky;
    /* Pinned flush to the header, with the gap supplied as padding rather
       than as a top offset. An offset leaves a transparent band that the
       content scrolling underneath shows through; padding is covered by
       this element's own background. The title still lands at
       header + gap, so it stays level with the media column.

       --bd-header-stuck-height, not --header-height: the latter is only
       <header-component>, so it misses both the USP strip and the navy
       utility bar above it — roughly 75px the title was ending up behind.
       custom.js measures what the pinned header actually paints. */
    top: var(--bd-header-stuck-height, var(--header-height));
    padding-top: var(--pdm-sticky-gap, 24px);
    z-index: 5;
    background: var(--color-background);
    margin-bottom: 16px;
    border-bottom: 1px solid #e1dede;
  }

  .product-design-main__eyebrow,
  .product-design-main__step > p,
  .product-design-main__card p,
  .product-design-main__meta {
    color: rgb(var(--color-foreground-rgb) / 0.58);
  }

  .product-design-main__rating {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 0;
    color: rgb(var(--color-foreground-rgb) / 0.62);
  }

  .product-design-main__rating span:first-child {
    color: #111;
    letter-spacing: 1px;
  }

  .product-design-main__price {
    display: flex;
    gap: 16px;
    align-items: baseline;
    margin-bottom: 12px;
  }

  .product-design-main__price strong {
    font-size: 28px;
    font-weight: 700;
    line-height: 42px;
  }

  .product-design-main__price s {
    color: rgb(var(--color-foreground-rgb) / 0.38);
  }

  .product-design-main__price span {
    color: #22a84a;
    font-weight: 700;
  }

  .product-design-main__meta {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-bottom: 10px;
    font-size: 10px;
    text-transform: uppercase;
  }

  .product-design-main__badge {
    background: #B31942;
    color: #fff;
    padding: 2px 8px;
    text-transform: none;
    font-size: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2px;
  }

  .product-design-main__step {
    border-top: 1px solid rgb(var(--color-foreground-rgb) / 0.65);
    padding: 22px 0 36px;
  }
  .product-design-main__step-guide {
    border-top: 1px solid rgb(var(--color-foreground-rgb) / 0.65);
    margin-top: 30px;
  }

  .product-design-main__step h2 {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 600;
  }
  .product-design-main__step p {
    font-size: 12px;
    color: #838484;
  }

  .product-design-main__cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 16px;
  }
  .product-design-main__step.step_2 .product-design-main__cards {
    grid-template-columns: 1fr;
  }

  .product-design-main__card {
    border: 1px solid #E4E4E4;
    border-radius: 10px;
    padding: 20px;
    background: #F7F7F7;
    display: flex;
    flex-direction: column;
  }
  .product-design-main__card:hover,
  .pdm-event-date:hover {
    background: #FFFFFF;
    box-shadow: 0px 16px 32px -12px #585C5F1A;
  }


  .product-design-main__card h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    color: #484848;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
  }

  .product-design-main__card label {
    display: block;
    margin: 12px 0 8px;
    color: rgb(var(--color-foreground-rgb) / 0.55);
    font-size: 12px;
  }

  .product-design-main__card.upload_design label{
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
  }

  .product-design-main__card select,
  .product-design-main__card input[type='number'] {
    width: 100%;
    height: 46px;
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.12);
    border-radius: 7px;
    padding: 0 14px;
    background: #fff;
  }

  .pdm-card__heading {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .pdm-card__heading-icon {
    flex-shrink: 0;
    display: block;
    color: rgb(var(--color-foreground-rgb) / 0.55);
  }

  .pdm-card__image {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 0;
  }

  .pdm-card__image img {
    max-width: 30%;
    max-height: 70px;
    object-fit: contain;
    display: block;
  }

  .pdm-card__note {
    text-align: center;
    font-size: 12px;
    color: rgb(var(--color-foreground-rgb) / 0.5);
    margin: 8px 0 0;
  }

  .product-design-main__outline-button {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    border: 1px solid #B31942;
    border-radius: 999px;
    background-color: #B31942;
    color: #fff;
    text-decoration: none;
    font-weight: 400;
    font-size: 13px;
    transition: background .2s ease, transform .2s ease;
  }

  .product-design-main__outline-button:hover {
     background-color: #a0173bff;
     transform: scale(1.03);
  }

  .product-design-main__upload {
    display: grid;
    place-items: center;
    gap: 10px;
    min-height: 176px;
    border: 1px dashed rgb(var(--color-foreground-rgb) / 0.14);
    color: rgb(var(--color-foreground-rgb) / 0.58);
    text-align: center;
    cursor: pointer;
  }

  .product-design-main__unavailable {
    margin: 0 0 12px;
    font-size: 13px;
    color: #B31942;
  }

  .product-design-main__add {
    position: relative;
    overflow: hidden;
    width: 100%;
    min-height: 56px;
    border-radius: 999px;
    background: #B31942;
    color: #fff;
  }

  .product-design-main__add:hover:not(:disabled) {
    background: #8f1433;
  }

  .product-design-main__add:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .product-design-main__guide {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 32px;
    padding: 18px;
    border-radius: 12px;
    background: #EEEEEE;
    color: inherit;
    text-decoration: none;
    font-weight: 500;
    font-size: 16px;
  }

  /* Tablet/mobile sticky purchase bar — see the markup comment above
     .pdm-sticky-bar for why this duplicates the Add to Cart button rather
     than forwarding clicks to the main one. Hidden above 1024px, where the
     grid is still two columns and the inline price/button are within
     reach. */
  .pdm-sticky-bar {
    display: none;
  }

  @media screen and (max-width: 1024px) {
    .product-design-main__grid,
    .product-design-main__cards {
      grid-template-columns: 1fr;
    }

    .product-design-main__media {
      position: static;
    }

    .product-header-sticky {
      position: static;
      background: none;
      padding-top: 0;
      padding-bottom: 0;
    }
    /* Room at the bottom of the page so the fixed bar never covers the
       last content (the step-guide link) once scrolled all the way down. */
    .product-design-main {
      padding-bottom: 96px;
    }

    .pdm-sticky-bar {
      display: flex;
      align-items: center;
      gap: 16px;
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 30;
      padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px));
      background: var(--color-background);
      border-top: 1px solid rgb(var(--color-foreground-rgb) / 0.12);
      box-shadow: 0 -8px 24px rgb(0 0 0 / 0.08);
    }

    .pdm-sticky-bar__price {
      display: flex;
      flex-direction: column;
      gap: 2px;
      flex-shrink: 0;
      white-space: nowrap;
    }

    .pdm-sticky-bar__price strong {
      font-size: 18px;
      font-weight: 700;
      line-height: 1.2;
    }

    .pdm-sticky-bar__price s {
      font-size: 12px;
      color: rgb(var(--color-foreground-rgb) / 0.4);
    }

    .pdm-sticky-bar add-to-cart-component{
      margin-left: 30%;
    }

    /* Overrides .product-design-main__add's width: 100% — this button sits
       in a flex row next to the price instead of filling it alone. */
    .pdm-sticky-bar__add {
      flex: 1 1 auto;
      width: auto;
      min-height: 48px;
    }
  }

  @media screen and (max-width: 749px) {
    .product-design-main {
      padding: 0 0 56px;
      background: var(--color-background);
    }

    .product-design-main__grid {
      gap: 0;
    }

    .product-design-main__inner {
      padding: 0 20px;
    }

    .product-design-main__breadcrumbs,
    .product-design-main__rating {
      display: none;
    }

    .product-design-main__media {
      grid-template-columns: 1fr;
      margin-inline: -20px;
    }

    .product-design-main__thumbs {
      display: none;
    }

    .product-design-main__image-frame {
      min-height: 292px;
      padding: 24px;
      border: 0;
      border-radius: 0;
      position: relative;
      overflow: hidden;
    }

    /*
    * Mobile product image slider
    * Allows users to swipe horizontally through
    * product images without opening the lightbox.
    */
    .product-design-main__slider {
      display: flex;
      width: 100%;
      overflow-x: auto;
      overflow-y: hidden;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
      -webkit-overflow-scrolling: touch;
      touch-action: pan-x;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }

    .product-design-main__slider::-webkit-scrollbar {
      display: none;
    }

    /*
    * Every slide takes exactly the full width
    * of the slider.
    */
    .product-design-main__slide {
      flex: 0 0 100%;
      width: 100%;
      scroll-snap-align: start;
      scroll-snap-stop: always;
      display: flex;
    }

    .product-design-main__image {
      display: block;
      width: 100%;
      height: auto;
      user-select: none;
      -webkit-user-drag: none;
    }

    .product-design-main__dots {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 66px;
      display: flex;
      justify-content: center;
      gap: 8px;
      z-index: 2;
    }

    .product-design-main__dots button {
      width: 8px;
      height: 8px;
      border: 1px solid #111;
      border-radius: 999px;
      padding: 0;
      background: transparent;
    }

    .product-design-main__dots button.is-active {
      background: #111;
    }

    .product-design-main__details h1 {
      font-size: 32px;
      line-height: 40px;
    }

    .product-design-main__card {
      color: #222;
    }

    .product-design-main__cards {
      gap: 16px;
    }

    .pdm-sticky-bar add-to-cart-component {
      margin-left: 28px;
    }
  }

  /* Event date block */
  .pdm-event-date {
    padding: 20px;
    border-top: 1px solid rgb(var(--color-foreground-rgb) / 0.1);
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: #F7F7F7;
    border: 1px solid #E4E4E4;
    border-radius: 10px;
    margin-top: 14px;

  }

  .pdm-event-date__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
  }

  .pdm-event-date__text h3 {
    font-size: 18px;
    font-weight: 700;
    color: #1a1c1c;
    margin: 0 0 4px;
  }

  .pdm-event-date__text p {
    color: rgb(var(--color-foreground-rgb) / 0.55);
    font-size: 13px;
    margin: 0;
  }

  .pdm-event-date__picker-wrap {
    position: relative;
  }

  .pdm-event-date__btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1.5px solid rgb(var(--color-foreground-rgb) / 0.22);
    border-radius: 10px;
    background: #fff;
    color: rgb(var(--color-foreground-rgb) / 0.5);
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.15s, color 0.15s;
  }

  .pdm-event-date__btn:hover {
    border-color: rgb(var(--color-foreground-rgb) / 0.4);
    color: rgb(var(--color-foreground-rgb) / 0.8);
  }

  .pdm-event-date__btn.has-date {
    color: #1a1c1c;
    border-color: rgb(var(--color-foreground-rgb) / 0.35);
  }

  .pdm-event-date__input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
  }

  .pdm-event-date__notice {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 16px;
    background: rgb(var(--color-foreground-rgb) / 0.06);
    border-radius: 10px;
    color: #1a1c1c;
    font-size: 13px;
    line-height: 1.5;
  }

  .pdm-event-date__notice svg {
    flex-shrink: 0;
    color: #B31942;
  }

  .pdm-event-date__notice strong {
    color: #B31942;
    font-weight: 600;
  }
  .pdm-event-date__notice p {
    margin-top: 0;
  }

  @media screen and (max-width: 749px) {
    .pdm-event-date__row {
      flex-direction: column;
      align-items: flex-start;
    }

    .pdm-event-date__picker-wrap {
      width: 100%;
    }

    .pdm-event-date__btn {
      width: 100%;
      justify-content: space-between;
    }
  }

  /* Lightbox */
  .product-design-main__image-frame {
    cursor: zoom-in;
  }

  .pdm-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9998;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .pdm-lightbox.is-open { display: flex; }

  .pdm-lightbox__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.93);
  }

  .pdm-lightbox__close {
    position: absolute;
    top: 16px; right: 16px;
    z-index: 2;
    display: grid; place-items: center;
    width: 40px; height: 40px;
    border: none; border-radius: 50%;
    background: rgba(255,255,255,0.12);
    color: #fff; cursor: pointer;
    transition: background 0.15s;
  }

  .pdm-lightbox__close:hover { background: rgba(255,255,255,0.22); }

  .pdm-lightbox__nav {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    z-index: 2;
    display: grid; place-items: center;
    width: 44px; height: 44px;
    border: none; border-radius: 50%;
    background: rgba(255,255,255,0.12);
    color: #fff; cursor: pointer;
    transition: background 0.15s;
  }

  .pdm-lightbox__nav:hover   { background: rgba(255,255,255,0.22); }
  .pdm-lightbox__nav--prev   { left: 20px; }
  .pdm-lightbox__nav--next   { right: 20px; }

  .pdm-lightbox__stage {
    position: relative;
    z-index: 1;
    width: 100%;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 80px 0;
    box-sizing: border-box;
  }

  .pdm-lightbox__slide {
    display: none;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
  }

  .pdm-lightbox__slide.is-active { display: flex; }

  .pdm-lightbox__slide img {
    max-width: 100%;
    max-height: calc(100vh - 200px);
    object-fit: contain;
    border-radius: 8px;
    user-select: none;
  }

  .pdm-lightbox__thumbs {
    position: relative;
    z-index: 2;
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    padding: 16px 20px;
    overflow-x: auto;
    scrollbar-width: none;
    max-width: 100%;
    flex-shrink: 0;
  }

  .pdm-lightbox__thumbs::-webkit-scrollbar { display: none; }

  .pdm-lightbox__thumb-btn {
    flex-shrink: 0;
    width: 64px; height: 64px;
    border: 2px solid transparent;
    border-radius: 6px;
    overflow: hidden;
    padding: 0;
    background: rgba(255,255,255,0.08);
    cursor: pointer;
    transition: border-color 0.15s, opacity 0.15s;
    opacity: 0.55;
  }

  .pdm-lightbox__thumb-btn.is-active { border-color: #fff; opacity: 1; }
  .pdm-lightbox__thumb-btn:hover     { opacity: 0.85; }

  .pdm-lightbox__thumb-btn img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
  }

  @media screen and (max-width: 749px) {
    .pdm-lightbox__nav--prev { left: 8px; }
    .pdm-lightbox__nav--next { right: 8px; }
    .pdm-lightbox__stage     { padding: 50px 56px 0; }
    .pdm-lightbox__thumb-btn { width: 48px; height: 48px; }
  }

  /* Artwork Upload Popup */

  .product-design-main__card.upload_design img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
  }
  .upload_design[data-artwork-upload] {
    cursor: pointer;
    transition: box-shadow 0.15s, border-color 0.15s;
  }

  .upload_design[data-artwork-upload]:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  }

  .upload_design[data-artwork-upload].has-artwork {
    border-color: #16a34a;
  }

  .pdm-artwork-card__desc {
    color: rgb(var(--color-foreground-rgb) / 0.6);
    font-size: 0.875rem;
    margin: 4px 0 0;
  }

  .pdm-artwork-popup {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
  }

  .pdm-artwork-popup.is-open { display: flex; }

  .pdm-artwork-popup__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
  }

  .pdm-artwork-popup__box {
    position: relative;
    z-index: 1;
    background: #fff;
    border-radius: 16px;
    width: 100%;
    max-width: 680px;
    max-height: 90dvh;
    overflow-y: auto;
    box-shadow: 0 24px 64px rgba(0,0,0,0.18);
    display: flex;
    flex-direction: column;
  }

  .pdm-artwork-popup__close {
    position: absolute;
    top: 14px; right: 14px;
    display: grid; place-items: center;
    width: 34px; height: 34px;
    border: none; border-radius: 50%;
    background: #f3f4f6;
    color: #374151;
    cursor: pointer;
    transition: background 0.15s;
  }

  .pdm-artwork-popup__close:hover { background: #e5e7eb; }

  .pdm-artwork-popup__title {
    font-size: 1.2rem;
    font-weight: 700;
    padding: 24px 24px 0;
    margin: 0;
    color: #111827;
  }

  .pdm-artwork-popup__tabs {
    display: flex;
    gap: 10px;
    background: #f3f4f6;
    border-radius: 12px;
    padding: 8px;
    margin: 18px 24px 0;
  }

  .pdm-artwork-popup__tab {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 12px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #374151;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
  }

  .pdm-artwork-popup__tab.is-active {
    background: #1a3a5c;
    color: #fff;
  }

  .pdm-artwork-popup__panels {
    padding: 16px 24px 0;
    flex: 1;
  }

  /* Direct Upload */
  .pdm-artwork-popup__dropzone {
    border: 2px dashed #d1d5db;
    border-radius: 12px;
    padding: 40px 24px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
  }

  .pdm-artwork-popup__dropzone.is-drag-over,
  .pdm-artwork-popup__dropzone:hover {
    border-color: #1a3a5c;
    background: #f0f4f8;
  }

  .pdm-artwork-popup__dropzone.is-invalid { border-color: #dc2626; }

  .pdm-artwork-popup__dropzone.has-file { border-color: #16a34a; background: #f0fdf4; }

  .pdm-artwork-popup__drop-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px; height: 72px;
    background: #e8eef5;
    border-radius: 16px;
    margin-bottom: 14px;
    color: #1a3a5c;
  }

  .pdm-artwork-popup__dropzone p {
    font-size: 0.95rem;
    color: #374151;
    margin: 0 0 6px;
  }

  .pdm-artwork-popup__click-link {
    background: none;
    border: none;
    padding: 0;
    color: #1a3a5c;
    text-decoration: underline;
    cursor: pointer;
    font-size: inherit;
    font-weight: 600;
  }

  .pdm-artwork-popup__dropzone small {
    color: #9ca3af;
    font-size: 0.8rem;
  }

  .pdm-artwork-popup__filename {
    font-size: 0.85rem;
    color: #16a34a;
    margin: 8px 0 0;
    min-height: 1.2em;
  }

  /* Link Upload */
  .pdm-artwork-popup__url-wrap {
    display: flex;
    align-items: center;
    border: 1.5px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    transition: border-color 0.15s;
  }

  .pdm-artwork-popup__url-wrap:focus-within { border-color: #1a3a5c; }

  .pdm-artwork-popup__url-icon {
    display: grid;
    place-items: center;
    width: 52px; height: 52px;
    background: #f3f4f6;
    color: #6b7280;
    flex-shrink: 0;
  }

  .pdm-artwork-popup__url-input {
    flex: 1;
    border: none;
    outline: none;
    padding: 14px 16px;
    font-size: 0.95rem;
    color: #111827;
    background: transparent;
  }

  .pdm-artwork-popup__url-input.is-invalid { background: #fef2f2; }

  .pdm-artwork-popup__url-input::placeholder { color: #9ca3af; }

  .pdm-artwork-popup__url-hint {
    font-size: 0.85rem;
    color: #6b7280;
    margin: 10px 0 12px;
  }

  .pdm-artwork-popup__services {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    background: #f9fafb;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 0.85rem;
  }

  .pdm-artwork-popup__services strong {
    color: #374151;
    margin-right: 4px;
  }

  .pdm-artwork-popup__services span {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 4px 10px;
    color: #374151;
    font-size: 0.8rem;
  }

  /* Email Later */
  .pdm-artwork-popup__email-box {
    background: #f9fafb;
    border-radius: 12px;
    padding: 20px;
  }

  .pdm-artwork-popup__email-box h3 {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 8px;
    color: #111827;
  }

  .pdm-artwork-popup__email-box p {
    font-size: 0.9rem;
    color: #374151;
    margin: 0 0 14px;
    line-height: 1.5;
  }

  .pdm-artwork-popup__email-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    color: #374151;
    font-weight: 500;
  }

  .pdm-artwork-popup__email-link {
    color: #1a3a5c;
    font-weight: 700;
    text-decoration: none;
  }

  .pdm-artwork-popup__copy-btn {
    display: grid; place-items: center;
    width: 30px; height: 30px;
    border: none; border-radius: 6px;
    background: #fee2e2;
    color: #b91c1c;
    cursor: pointer;
    transition: background 0.15s;
    flex-shrink: 0;
  }

  .pdm-artwork-popup__copy-btn.is-copied { background: #dcfce7; color: #15803d; }

  .pdm-artwork-popup__divider {
    border: none;
    border-top: 1px solid #e5e7eb;
    margin: 14px 0;
  }

  .pdm-artwork-popup__check-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-size: 0.875rem;
    color: #374151;
    line-height: 1.5;
  }

  .pdm-artwork-popup__check-label input[type="checkbox"] {
    margin-top: 2px;
    width: 16px; height: 16px;
    flex-shrink: 0;
    accent-color: #1a3a5c;
    cursor: pointer;
  }

  .pdm-artwork-popup__check-label.is-invalid { color: #dc2626; }

  /* Footer */
  .pdm-artwork-popup__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px 24px;
    margin-top: 18px;
    border-top: 1px solid #f3f4f6;
  }

  .pdm-artwork-popup__secure {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: #9ca3af;
  }

  .pdm-artwork-popup__save {
    padding: 12px 28px;
    border: none;
    border-radius: 10px;
    background: #9b1c3c;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
  }

  .pdm-artwork-popup__save:hover { background: #7f1532; }

  @media screen and (max-width: 749px) {
    .pdm-artwork-popup { padding: 0; align-items: flex-end; }
    .pdm-artwork-popup__box { border-radius: 20px 20px 0 0; max-height: 92dvh; }
    .pdm-artwork-popup__tabs { flex-direction: column; }
    .pdm-artwork-popup__tab { justify-content: flex-start; }
    .pdm-artwork-popup__footer { flex-direction: column; gap: 12px; align-items: stretch; }
    .pdm-artwork-popup__save { text-align: center; padding: 14px; }
  }

  @media screen and (max-width: 749px) {

  /* Main dynamic 2-column layout */
  .config-row--dynamic {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 0;
    row-gap: 28px;
    width: 100%;
  }

  /* Each column */
  .config-row--dynamic .config-cell {
    min-width: 0;
    width: 100%;
    padding: 0 14px;
    box-sizing: border-box;
  }

  /* Vertical divider between the 2 columns */
  .config-row--dynamic .config-cell:nth-child(odd) {
    border-right: 1px solid #ddd;
  }

  .config-row--dynamic .config-cell:nth-child(even) {
    border-right: 0;
  }

  /* Heading */
  .config-row--dynamic .pdm-card__heading {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 15px;
    line-height: 1.15;
    margin: 0 0 12px;
  }

  .config-row--dynamic .pdm-card__heading svg {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
  }

  /* Description */
  .config-row--dynamic p {
    font-size: 13px;
    line-height: 1.45;
    margin: 0 0 10px;
  }

  /* Select wrapper */
  .config-row--dynamic .select-wrapper {
    width: 100%;
    position: relative;
  }

  .config-row--dynamic select {
    width: 100%;
    min-width: 0;
    height: 44px;
    padding: 0 34px 0 12px;
    font-size: 14px;
    box-sizing: border-box;
  }

  .config-row--dynamic .select-arrow {
    right: 10px;
  }

}


@media screen and (max-width: 768px) {

  /* =========================================
     MAIN CONTAINER
  ========================================= */

  .configurator {
    width: 100%;
    padding: 12px 0 15px;
    box-sizing: border-box;
  }

  .config-container {
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
  }


  /* =========================================
     ALL ROWS = ONE COLUMN
  ========================================= */

  .config-row,
  .config-row--dynamic {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }


  /* =========================================
     IMPORTANT:
     REMOVE DESKTOP ROW SEPARATOR
  ========================================= */

  .config-row::after,
  .config-row:not(:last-child)::after,
  .config-row:first-child::after {
    display: none !important;
    content: none !important;
  }


  /* =========================================
     CELL
  ========================================= */

  .config-cell {
    position: relative;
    width: 100%;
    min-width: 0;
    padding: 20px 20px;
    box-sizing: border-box;
  }


  /* =========================================
     REMOVE DESKTOP VERTICAL DIVIDERS
  ========================================= */

  .config-row > .config-cell::after,
  .config-row > .config-cell:nth-child(odd)::after,
  .config-cell:first-child::after,
  .config-cell:nth-child(1)::after {
    display: none !important;
    content: none !important;
  }


  /* =========================================
     ADD HORIZONTAL DIVIDER BETWEEN CELLS
  ========================================= */

  .config-row--dynamic > .config-cell:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 0;
    height: 1px;
    background: #e5e5e5;
  }


  /* =========================================
     FIRST ROW CELLS
  ========================================= */

  .config-row:not(.config-row--dynamic) > .config-cell:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 0;
    height: 1px;
    background: #e5e5e5;
  }


  /* =========================================
     HEADING
  ========================================= */

  .pdm-card__heading {
    display: flex;
    align-items: center;
    gap: 9px;

    margin: 0 0 12px;

    font-size: 16px;
    line-height: 1.25;
    font-weight: 700;
  }

  .pdm-card__heading svg {
    width: 22px;
    height: 22px;
    min-width: 22px;
    flex: 0 0 22px;
  }


  /* =========================================
     DESCRIPTION / TEXT
  ========================================= */

  .config-cell p {
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.45;
    color: #666;
  }


  /* =========================================
     LABEL
  ========================================= */

  .config-cell label,
  .config-field label {
    display: block;
    margin-bottom: 8px;

    font-size: 14px;
    line-height: 1.4;
  }


  /* =========================================
     SELECT
  ========================================= */

  .select-wrapper {
    position: relative;
    width: 100%;
  }

  .select-wrapper select {
    display: block;

    width: 100%;
    height: 44px;

    padding: 0 40px 0 13px;

    border: 1px solid #e5e7eb;
    border-radius: 12px;

    background: #fff;

    font-size: 13px;
    line-height: 44px;
    color: #1f2937;

    box-sizing: border-box;
  }

  .select-arrow {
    position: absolute;
    right: 12px;
    top: 50%;

    width: 16px;
    height: 16px;

    transform: translateY(-50%);
    pointer-events: none;
  }


  /* =========================================
     CONFIG GRID
  ========================================= */

  .config-grid {
    grid-template-columns: 1fr;
  }

  .config-grid > * {
    padding: 20px;
  }

  .config-grid > *::after {
    display: none;
  }


  /* =========================================
     CUSTOM QUOTE BUTTON
  ========================================= */

  .config-cell button,
  .config-cell .custom-quote-button {
    width: 100%;
    max-width: 100%;
    min-width: 0;

    min-height: 44px;
    height: auto;

    padding: 10px 12px;

    font-size: 13px;
    line-height: 1.2;

    white-space: normal;
    box-sizing: border-box;
  }

}

@media(max-width:768px){
  .config-grid{
    grid-template-columns:1fr;
  }
}

@media screen and (max-width: 768px) {
  .config-container {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
  }
  .config-row,
  .config-row--dynamic,
  .config-cell {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  .select-wrapper {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  .select-wrapper select {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: 44px;
    padding: 0 38px 0 12px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    font-size: 13px;
    box-sizing: border-box;
  }

  }

  @media screen and (max-width: 768px) {
  .quantity-wrapper {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    padding: 0px 176px 10px 10px;
  }

  .quantity-wrapper label {
    flex: 1;
    margin: 0 !important;
    line-height: 40px;
  }

  .quantity-wrapper .quantity-input {
    width: 64px;
    height: 40px;
    flex: 0 0 64px;
  }
}

  /* =========================================
    VARIANT SWATCH ROW (product-vertical-default)
    Additive only — none of these classes are used by
    sections/product-design-main.liquid, so this has no effect there.
  ========================================= */
  .pdm-swatch-row {
    padding: 4px 0 22px;
  }

  .pdm-swatch-row__heading {
    margin: 0 0 14px;
    font-size: 16px;
    font-weight: 700;
    color: #1a1c1c;
  }

  .pdm-swatch-row__heading span {
    font-weight: 500;
    color: rgb(var(--color-foreground-rgb) / 0.6);
  }

  .pdm-swatch-list {
    --variant-picker-swatch-width: 44px;
    --variant-picker-swatch-height: 44px;

    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .pdm-swatch-list .variant-option__swatch {
    display: block;
  }

  .pdm-swatch-row .variant-option--buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-sm);
    padding: 14px 15px;
    box-sizing: border-box;
    width: 100%;
    background: #F7F7F7;
    border: 1px solid #E4E4E4;
    border-radius: 10px;
  }

  .pdm-swatch-list .swatch.swatch--variant-image {
    border-radius: 8px;
  }

  .pdm-swatch-list .variant-option__button-label--has-swatch:has(input[type=radio]) {
    border-radius: 8px;
  }

  @media screen and (max-width: 749px) {
    .pdm-swatch-list {
      --variant-picker-swatch-width: 38px;
      --variant-picker-swatch-height: 38px;
      gap: 8px;
    }
  }
/* END_SNIPPET:product-design-main-styles */
/* START_SNIPPET:quick-add-modal-styles (INDEX:309) */
#quick-add-dialog {
    display: contents;
  }

  @media screen and (min-width: 750px) {
    .quick-add-modal {
      width: var(--quick-add-modal-width);
      height: var(--quick-add-modal-height);
      max-width: none;
    }
  }

  .quick-add-modal {
    padding: 0;
    border: var(--style-border-popover);
    overflow: hidden;
    box-shadow: 0 5px 30px rgb(0 0 0 / var(--opacity-15));

    @media screen and (max-width: 749px) {
      position: fixed;
      margin: auto 0 0 0;
      min-height: unset;
      max-width: 100%;
      border-radius: 0;
      overflow: clip;
      height: fit-content;
    }
  }

  .quick-add-modal[open] {
    @media screen and (max-width: 750px) {
      border-top-left-radius: var(--style-border-radius-popover);
      border-top-right-radius: var(--style-border-radius-popover);
    }
  }

  .quick-add-modal[open] {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .quick-add-modal .view-more-details__wrapper {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .quick-add-modal[open] {
    animation: modalSlideInTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .quick-add-modal.dialog-closing {
    animation: modalSlideOutTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .quick-add-modal__close {
    position: absolute;
    top: var(--margin-2xs);
    right: var(--margin-2xs);
    transition: transform 0.15s var(--animation-timing-bounce);
    z-index: var(--layer-raised);
    overflow: visible;
    transform-origin: center;
  }

  .quick-add-modal__close:active {
    transform: scale(0.99) translateY(1px);
  }

  .quick-add-modal__close {
    &:focus-visible {
      outline: none;
    }

    &:focus-visible::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: calc(var(--style-border-radius-popover) - var(--margin-2xs));
      outline: var(--focus-outline-width) solid currentColor;
    }
  }

  .quick-add-modal__content {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: 100% 1fr;
    position: relative;
    overflow-y: auto;
    max-height: 100vh;
    flex-grow: 1;

    @media screen and (max-width: 749px) {
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: auto;
      padding-inline: var(--padding-xl);
      padding-block: var(--padding-xl);
      gap: var(--gap-lg);
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      height: auto; /* Prevent a bug in Safari where height:fit-content is not respected */
      max-height: 100vh;
    }
  }

  .quick-add-modal__content .media-gallery--grid .media-gallery__grid {
    grid-template-columns: 1fr;
  }

  .quick-add-modal__content .media-gallery--grid.media-gallery--two-column .product-media-container:first-child {
    grid-column: auto;
  }

  .quick-add-modal__content {
    /* One column */
    .media-gallery--grid:not(.media-gallery--two-column) .product-media > *,
      /* Two column, small first image */
      .media-gallery--grid.media-gallery--two-column:not(.media-gallery--large-first-image)
      .product-media-container:nth-of-type(odd)
      .product-media > *,
      /* Two column, large first image */
      .media-gallery--grid.media-gallery--two-column.media-gallery--large-first-image
        .product-media-container:is(:first-of-type, :nth-of-type(even))
        .product-media > *,
        /* Carousel */
      .media-gallery--carousel slideshow-container {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }

  .quick-add-modal__content .view-more-details__wrapper {
    display: flex;
    justify-content: flex-start;
    width: 100%;
  }

  .view-more-details__wrapper .view-more-details {
    display: flex;
    align-items: center;
    width: fit-content;
  }

  .quick-add-modal__content .product-header {
    @media screen and (max-width: 749px) {
      display: flex;
      flex-direction: column;
      grid-column: 2 / -1;
      grid-row: 1;
      padding-right: var(--padding-2xl);
    }
  }

  .quick-add-modal__content .product-header a:not(product-price *) {
    @media screen and (max-width: 749px) {
      font-size: var(--font-size--md);
      font-weight: 500;
      color: inherit;
      width: fit-content;
    }
  }

  .quick-add-modal__content variant-picker,
  .quick-add-modal__content product-form-component {
    @media screen and (max-width: 749px) {
      grid-column: 1 / -1;
    }
  }

  .quick-add-modal__content .product-media-container__zoom-button {
    cursor: default;
  }

  .quick-add-modal__content .product-details {
    grid-column: 4 / -1;
    grid-row: 1 / span 2;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    position: relative;

    dialog[open] & {
      animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
      animation-delay: 0.1s;
    }

    @media screen and (max-width: 749px) {
      grid-column: 2 / span 2;
      grid-row: span 1;
      max-height: 100%;
      height: 100%;
    }
  }

  @property --quick-add-modal-mask-start {
    syntax: '<length>';
    initial-value: 0px;
    inherits: false;
  }

  @property --quick-add-modal-mask-end {
    syntax: '<length>';
    initial-value: 0px;
    inherits: true;
  }

  @keyframes detect-scroll {
    from,
    to {
      --can-scroll: ;
    }
  }

  @supports (animation-timeline: scroll(self)) {
    dialog[open] .quick-add-modal__content .product-details {
      mask-image: linear-gradient(to bottom, transparent 0%, #000 var(--quick-add-modal-mask-start), #000 100%);
      animation: 0.3s var(--animation-timing-fade-in) 0.1s both fadeSlideIn, scrollStart 1s linear both,
        scrollEnd 1s linear both, detect-scroll 1ms linear none;
      animation-timeline: auto, scroll(self), scroll(self), scroll(self);
      animation-range: normal, 0px 48px, calc(100% - 48px) 100%, 0% 100%;
    }
  }

  @keyframes scrollStart {
    from {
      --quick-add-modal-mask-start: 0px;
    }
    to {
      --quick-add-modal-mask-start: 48px;
    }
  }

  @keyframes scrollEnd {
    from {
      --quick-add-modal-mask-end: 0px;
    }
    to {
      --quick-add-modal-mask-end: 48px;
    }
  }

  .quick-add-modal__content .product-details > .group-block {
    flex-grow: 1;
    width: auto;
  }

  .quick-add-modal__content > * {
    min-height: 0;
  }

  .quick-add-modal__content .product-details :is(.view-product-title, .buy-buttons-block) {
    flex: 0 0 auto;
  }
  .quick-add-modal__content .product-details :is(.buy-buttons-block) {
    margin-top: auto;
    position: sticky;
    bottom: 0;
    padding-bottom: var(--padding-3xl);
    background-color: var(--color-background);
    z-index: var(--layer-raised);

    &::before {
      --quick-add-modal-mask-end-progressive-enhanced: 0px;

      position: absolute;
      content: '';
      display: block;
      inset: auto 0 100% 0;
      pointer-events: none;
      height: min(var(--gap-2xl), var(--gap));
      background-color: inherit;
      mask-image: linear-gradient(
        to top,
        #000 0%,
        #000 calc(var(--gap-2xs)),
        transparent calc(100% - var(--quick-add-modal-mask-end-progressive-enhanced)),
        transparent
      );
    }
  }

  .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form) {
    position: static;
    padding-bottom: 0;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }

  .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form) > product-form-component {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }

  .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form) form {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }

  .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form)::before {
    display: none;
  }

  .quick-add-modal__content .product-details .buy-buttons-block__bar {
    display: block;
    position: sticky;
    bottom: 0;
    margin-top: auto;
    padding-block: var(--gap-md) var(--padding-3xl);
    background-color: var(--color-background);
    z-index: var(--layer-raised);

    &::before {
      --quick-add-modal-mask-end-progressive-enhanced: 0px;

      position: absolute;
      content: '';
      display: block;
      inset: auto 0 100% 0;
      pointer-events: none;
      height: min(var(--gap-2xl), var(--gap));
      background-color: inherit;
      mask-image: linear-gradient(
        to top,
        #000 0%,
        #000 calc(var(--gap-2xs)),
        transparent calc(100% - var(--quick-add-modal-mask-end-progressive-enhanced)),
        transparent
      );
    }
  }

  @supports (animation-timeline: scroll(self)) {
    .quick-add-modal__content .product-details :is(.buy-buttons-block)::before,
    .quick-add-modal__content .product-details .buy-buttons-block__bar::before {
      --mask-if-scroll: var(--can-scroll) var(--quick-add-modal-mask-end);
      --mask-if-no-scroll: 48px;
      --quick-add-modal-mask-end-progressive-enhanced: var(--mask-if-scroll, var(--mask-if-no-scroll));
      height: calc(var(--gap-2xs) + 48px);
    }
  }

  .quick-add-modal__content .product-details .variant-picker {
    flex: 0 0 auto;

    padding-block: min(var(--gap-2xl), var(--gap));
    margin-block-end: calc(var(--focus-outline-offset) + var(--focus-outline-width));
  }

  .quick-add-modal__content .variant-option--swatches {
    padding-inline-start: var(--padding-2xs);
  }

  .quick-add-modal__content .variant-option--swatches legend {
    margin-inline-start: calc(-1 * var(--padding-2xs));
  }

  .quick-add-modal__content:not(:has(.product-information__media)) .product-details {
    grid-column: 1 / -1;
  }

  .quick-add-modal__content .view-product-title {
    display: flex;
    padding-block: 0;
    margin-block-end: 12px;

    /* Prevent overlap between title and close button */
    padding-inline-end: calc(var(--padding-2xl) + calc(var(--minimum-touch-target) / 2));
  }

  .quick-add-modal__content .view-product-title a {
    color: inherit;
    text-decoration: none;
    text-align: left;
    font-size: var(--font-size--2xl);
    font-weight: 600;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s var(--animation-easing);
  }

  .quick-add-modal__content .product-details product-price {
    --text-align: left;
  }

  .quick-add-modal__content .product-details product-price.text-block--align-center {
    margin-inline: 0;
  }

  .quick-add-modal__content .product-details product-price.text-center {
    --text-align: left;
  }

  .quick-add-modal__content .product-details product-price > * {
    text-align: left;
  }

  .quick-add-modal__content
    .product-details
    *:not(
      .group-block,
      .group-block-content,
      .buy-buttons-block,
      .buy-buttons-block *,
      .view-product-title,
      .view-product-title *,
      variant-picker,
      variant-picker *,
      product-price,
      product-price *,
      product-inventory,
      product-inventory *,
      .view-more-details__wrapper,
      .view-more-details__wrapper *
    ) {
    @media screen and (min-width: 750px) {
      /* stylelint-disable-next-line declaration-no-important */
      display: none !important;
    }
  }

  .quick-add-modal__content
    .group-block:not(
      :has(
          .buy-buttons-block,
          .buy-buttons-block *,
          .view-product-title,
          .view-product-title *,
          variant-picker,
          variant-picker *,
          product-price,
          product-price *,
          product-inventory,
          product-inventory *,
          .view-more-details__wrapper,
          .view-more-details__wrapper *
        ),
      .buy-buttons-block
    ) {
    display: none;
  }

  @media screen and (min-width: 750px) {
    .quick-add-modal__content .group-block-content {
      gap: 0;
    }

    .quick-add-modal__content .media-gallery__grid {
      gap: min(var(--gap-2xs), var(--image-gap));
      border-radius: var(--style-border-radius-popover, 0);
    }

    .quick-add-modal__content .media-gallery--grid .product-media img {
      border-radius: 0;
    }
  }

  .quick-add-modal__content .product-details > .group-block {
    padding-block: var(--padding-3xl) 0;
  }

  .quick-add-modal__content :where(.product-details > .group-block > .group-block-content > *) {
    padding-inline: var(--padding-3xl);
  }

  .quick-add-modal__content slideshow-slide:not([aria-hidden='false']) {
    content-visibility: auto;
  }

  .quick-add-modal__content .product-information__media {
    width: 100%;
    grid-column: 1 / span 1;
    grid-row: 1;
    position: relative;
    top: 0;
    animation: fadeIn 0.4s var(--animation-timing-fade-in) both;

    @media screen and (min-width: 750px) {
      position: sticky;
      grid-column: 1 / 4;
      width: var(--quick-add-modal-gallery-width);
      overflow-y: auto;
      -ms-overflow-style: none;
      scrollbar-width: none;
    }

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .quick-add-modal__content .product-information__media media-gallery {
    pointer-events: none;

    @media screen and (min-width: 750px) {
      position: absolute;
      inset: 0;
    }
  }

  .quick-add-modal media-gallery {
    padding: 0;
  }

  .quick-add-modal__content .product-information__media slideshow-arrows {
    display: none;
  }

  .quick-add-modal__content .product-information__media slideshow-container {
    display: block;
  }

  .quick-add-modal__content .product-information__media slideshow-slides {
    display: flex;
    flex-direction: column;
    gap: var(--gap-2xs);
    overflow: visible;
    scroll-snap-type: none;
  }

  .quick-add-modal__content .product-information__media slideshow-slide {
    width: 100%;
    flex: none;
    scroll-snap-align: unset;
    position: relative;
    transform: none;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s var(--animation-easing);
  }

  .quick-add-modal__content .product-information__media slideshow-slide[aria-hidden='true'] {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .quick-add-modal__content .product-information__media slideshow-slide:nth-child(1) {
    animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
  }

  .quick-add-modal__content .product-information__media slideshow-slide:nth-child(2) {
    animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
    animation-delay: 0.05s;
  }

  .quick-add-modal__content .product-information__media slideshow-slide:nth-child(3) {
    animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
    animation-delay: 0.1s;
  }

  .quick-add-modal__content .product-information__media :is(slideshow-controls, slideshow-controls[thumbnails]) {
    display: none;
  }

  .quick-add-modal__content .sticky-content,
  .quick-add-modal__content .sticky-content--desktop {
    top: 0;
  }

  .quick-add-modal__content .text-block.rte:not(product-price),
  .quick-add-modal__content .view-more-details__wrapper {
    display: none;
  }

  @keyframes fadeSlideIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
/* END_SNIPPET:quick-add-modal-styles */
/* START_SNIPPET:quick-add-styles (INDEX:311) */
/* Quick Add */
  .quick-add {
    --quick-add-offset: var(--padding-sm);
    --quick-add-right: calc(var(--quick-add-offset) + var(--padding-inline-end));
    --quick-add-bottom: calc(var(--quick-add-offset) + var(--padding-block-end));

    position: absolute;
    inset: 0;
    z-index: var(--layer-raised);
    pointer-events: none;

    @media screen and (min-width: 750px) {
      --quick-add-offset: var(--padding-md);
    }
  }

  .quick-add .variant-option__button-label input[data-option-available='false'] {
    cursor: not-allowed;
  }

  .quick-add[class*='color-scheme-'] {
    background-color: #0000;
  }

  product-card:is(:hover, :focus-within) .quick-add__button {
    opacity: 1;
  }

  .quick-add__button {
    display: var(--quick-add-mobile-display, none);
    align-items: center;
    background: linear-gradient(var(--color-background) 0 100%) padding-box;
    padding: 0;
    border-radius: 50px;
    border: 2px solid hsl(0 0% 0% / 0.15);
    height: var(--button-size-md);
    cursor: pointer;
    opacity: var(--quick-add-mobile-opacity, 0);
    overflow: hidden;
    color: var(--color-foreground);
    pointer-events: all;
    position: absolute;
    right: max(var(--quick-add-right), calc((var(--border-radius) + var(--quick-add-right)) * (1 - cos(45deg))));
    bottom: max(var(--quick-add-bottom), calc((var(--border-radius) + var(--quick-add-bottom)) * (1 - cos(45deg))));
    backdrop-filter: blur(20px) saturate(180%);

    &:hover {
      scale: 1.03;

      /* Hover stabilizer: extends hit area to maintain hover state */
      &::before {
        content: '';
        position: absolute;
        inset: -10px;
        z-index: -1;
      }
    }

    &:active {
      scale: 0.99;
    }

    .quick-add[stay-visible] & {
      display: grid;
    }

    @media screen and (min-width: 750px) {
      display: var(--quick-add-display, flex);
      opacity: 0;
    }
  }

  .quick-add__button.add-to-cart-button {
    height: var(--button-size-md);
  }

  .quick-add__button .add-to-cart-text {
    background: var(--color-background);
    overflow: hidden;
    border-radius: 50px;
    height: 100%;
    gap: 0;
  }

  .quick-add__button .svg-wrapper .checkmark-burst {
    width: 22px;
    height: 22px;
  }

  .quick-add__button .add-to-cart-icon {
    /* account for border width */
    height: 100%;
    width: calc(var(--button-size-md) - 4px);
  }

  .quick-add__button .add-to-cart-text__content {
    display: grid;
    grid-template-columns: 0fr;

    & > span {
      min-width: 0;

      span {
        padding-right: var(--padding-sm);
        opacity: 0;
        display: inline-block;
        filter: blur(2px);
        translate: 0.5ch 0;
      }
    }
  }

  .quick-add__button[data-added='true'] .add-to-cart-text {
    animation-name: atc-fade-out;
  }

  .quick-add__button[data-added='true'] .add-to-cart-text--added {
    translate: 0 0;
    animation-name: atc-fade-in;
  }

  .quick-add__product-form-component {
    height: 100%;
  }

  .quick-add__product-form-component .shopify-product-form {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    container-type: inline-size;
    height: 100%;
  }

  .quick-add-modal .product-media {
    width: 100%;
    height: 100%;
  }

  .quick-add-modal deferred-media {
    display: none;
  }

  .quick-add-modal .media-gallery--carousel slideshow-component {
    --cursor: default;
  }

  .quick-add__button:is(:hover, :focus-visible) {
    .add-to-cart-text__content {
      grid-template-columns: 1fr;

      span span {
        opacity: 1;
        translate: 0 0;
        filter: blur(0);
      }
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .quick-add__button .add-to-cart-text__content {
      grid-template-columns: 1fr;

      span span {
        opacity: 1;
        translate: 0 0;
        filter: blur(0);
      }
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .quick-add__button {
      transition-property: scale, translate, opacity;
      transition-duration: var(--animation-speed);
      transition-timing-function: var(--ease-out-cubic);
    }

    .quick-add__button:is(:hover, :focus-visible) {
      .add-to-cart-text__content,
      .add-to-cart-text__content span span {
        transition-delay: var(--animation-speed);
      }
    }

    .quick-add__button .add-to-cart-text__content {
      transition-property: grid-template-columns;
      transition-duration: var(--animation-speed);
      transition-timing-function: var(--ease-out-cubic);

      span span {
        transition-property: opacity, filter, translate;
        transition-duration: var(--animation-speed-slow);
        transition-timing-function: var(--ease-out-quad);
      }
    }
  }
/* END_SNIPPET:quick-add-styles */
/* START_SNIPPET:resource-card (INDEX:314) */
.resource-card {
    --resource-card-secondary-image-opacity: 0;
    --resource-card-primary-image-opacity: calc(1 - var(--resource-card-secondary-image-opacity));

    display: flex;
    flex-direction: column;
    row-gap: var(--padding-xs);
    position: relative;
    text-decoration: none;
    height: 100%;
    opacity: 0;
    animation: fadeIn var(--animation-speed-medium) var(--animation-timing-fade-in) forwards;
  }

  .resource-card__link {
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  .resource-card__content {
    display: flex;
    flex-direction: column;
    color: var(--color-foreground);
    gap: var(--padding-3xs);

    .price {
      font-weight: 500;
    }

    .volume-pricing-note {
      display: block;
      margin-top: var(--padding-3xs);
      font-family: var(--font-body--family);
      font-weight: normal;
      font-size: min(0.85em, var(--font-paragraph--size));
      line-height: normal;
      letter-spacing: normal;
      text-transform: none;
      color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
    }
  }

  .resource-card[data-resource-type='article'] .resource-card__content,
  .resource-card[data-resource-type='page'] .resource-card__content {
    gap: var(--padding-xs);
  }

  .resource-card__image {
    aspect-ratio: var(--resource-card-aspect-ratio, auto);
    object-fit: cover;
    border-radius: var(--resource-card-corner-radius);
    opacity: var(--resource-card-primary-image-opacity);
  }

  .resource-card__image--secondary {
    position: absolute;
    top: 0;
    opacity: var(--resource-card-secondary-image-opacity);
    border-radius: var(--resource-card-corner-radius);
  }

  .resource-card__media:empty {
    display: none;
  }

  .resource-card__image-placeholder {
    padding: var(--padding-sm);
    font-size: var(--font-size--lg);
    line-height: var(--line-height--display-loose);
    word-break: break-word;
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
    aspect-ratio: var(--resource-card-aspect-ratio, auto);
    border-radius: var(--resource-card-corner-radius);
    color: var(--color-foreground);
  }

  .resource-card__title {
    margin-block: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    line-height: 1.3;
    word-break: break-word;
    overflow-wrap: break-word;
  }

  .resource-card__title.paragraph {
    line-height: 1.3;
  }

  .resource-card--overlay {
    height: 100%;

    &::before {
      content: '';
      position: absolute;
      inset: 50% 0 0;
      background: var(--gradient-image-overlay);
      border-radius: var(--resource-card-corner-radius);
      pointer-events: none;
      z-index: var(--layer-flat);
    }
  }

  .resource-card--overlay .resource-card__image {
    height: 100%;
  }

  .resource-card--overlay .resource-card__content {
    position: absolute;
    inset: auto 0 0;
    padding: var(--padding-lg) var(--padding-lg) var(--padding-sm);
    z-index: var(--layer-raised);
  }

  .resource-card--overlay .resource-card__title {
    color: var(--color-white);
  }

  /* Collection images */
  .resource-card__image-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap-2xs);
  }

  .resource-card__collection-image {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: calc(var(--card-corner-radius) - (var(--padding-xs) / 2));
  }

  .resource-card__subtext {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
    margin-block-start: 0;
  }

  .resource-card__subtext.paragraph {
    font-size: var(--font-size--body-sm);
    line-height: var(--line-height--body-tight);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .resource-card:has(.resource-card__image--secondary) {
    &:hover,
    &:focus {
      --resource-card-secondary-image-opacity: 1;
    }
  }
/* END_SNIPPET:resource-card */
/* START_SNIPPET:search-modal (INDEX:319) */
/* Search modal style */
  .search-modal {
    --search-border-radius: var(--style-border-radius-popover);
    --search-border-width: var(--style-border-width);
  }

  .search-modal__content {
    /* Approx set the top so when the content is at max height, the modal is centered */
    --modal-top-margin: calc(50dvh - var(--modal-max-height) / 2 - 2rem);
    --modal-width: 66dvw;

    padding: 0;
    border: var(--style-border-popover);

    @media screen and (min-width: 750px) {
      width: var(--modal-width);
      margin-block-start: var(--modal-top-margin);
      overflow: hidden;
    }
  }

  /* Hide the default dialog backdrop on small screens */
  @media screen and (max-width: 749px) {
    .search-modal__content::backdrop {
      display: none;
    }
  }

  .dialog-modal[open].search-modal__content {
    transform-origin: bottom center;
    animation: search-element-slide-in-bottom 300ms var(--ease-out-quad) forwards;
    border-radius: var(--search-border-radius);
    box-shadow: var(--shadow-popover);

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

  .dialog-modal.search-modal__content.dialog-closing {
    animation: search-element-slide-out-bottom 200ms var(--ease-out-quad) forwards;
  }

  .search-modal__content[open] {
    display: flex;
  }

  .search-modal__content :is(.predictive-search-dropdown, .predictive-search-form__content-wrapper) {
    position: relative;
  }

  .dialog-modal
    .predictive-search-form__header:has(
      .predictive-search__reset-button:not(.predictive-search__reset-button[hidden])
    )::before {
    content: '';
    position: absolute;
    right: calc(var(--padding-sm) + var(--minimum-touch-target));
    top: 0;
    bottom: 0;
    width: var(--border-width-sm);
    background-color: var(--color-border);
  }

  .dialog-modal
    .predictive-search-form__header:has(.predictive-search__reset-button:not(.predictive-search__reset-button[hidden]))
    > .predictive-search__close-modal-button {
    &::before {
      content: none;
    }
  }

  @media screen and (min-width: 750px) {
    .dialog-modal
      .predictive-search-form__header:has(
        .predictive-search__reset-button:not(.predictive-search__reset-button[hidden])
      )::before {
      right: calc(var(--padding-2xl) * 2);
    }
  }

  predictive-search-component {
    --resource-card-corner-radius: var(--product-corner-radius);

    display: flex;
    width: 100%;
    position: relative;
    margin-inline: auto;
    align-items: center;
    background-color: var(--color-background);
    z-index: var(--layer-heightened);
  }

  .predictive-search-form__footer {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;

    @media screen and (min-width: 750px) {
      --to-top-gradient-background: linear-gradient(
        to top,
        rgb(var(--color-background-rgb) / var(--opacity-90)),
        rgb(var(--color-background-rgb) / var(--opacity-80)),
        rgb(var(--color-background-rgb) / var(--opacity-40)),
        transparent
      );

      padding-block: var(--padding-xs) var(--padding-lg);
      background-image: var(--to-top-gradient-background);
    }
  }

  predictive-search-component:has([data-search-results]):not(:has(.predictive-search-results__no-results))
    .predictive-search-form__footer {
    display: block;
  }

  .predictive-search-form {
    position: relative;
    width: 100%;
    align-self: flex-start;
  }

  .predictive-search-form__content {
    max-height: 50dvh;
    overflow-y: auto;
    background-color: var(--color-background);

    /* Firefox */
    scrollbar-width: none;

    /* Webkit browsers */
    &::-webkit-scrollbar {
      display: none;
    }
  }

  .predictive-search-form__content-wrapper {
    position: absolute;
    top: 100%;
    width: 100%;
    left: 0;
    z-index: var(--layer-raised);
    display: flex;
    flex-direction: column;
    border-radius: 0 0 var(--search-border-radius) var(--search-border-radius);
    transition: box-shadow var(--animation-speed) var(--animation-easing);
    transform: translateZ(0);
    will-change: transform, opacity;
    overflow: hidden;

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

    @media screen and (min-width: 750px) {
      max-height: var(--modal-max-height);
    }
  }

  /* Add new rule to apply bottom padding only when search button exists */
  .predictive-search-form__content-wrapper:has([data-search-results]):not(:has(.predictive-search-results__no-results))
    > .predictive-search-form__content {
    padding-block-end: var(--padding-6xl);
  }

  .predictive-search-form__header-inner {
    background: var(--color-background);
    border: var(--search-border-width) solid var(--color-border);
    color: var(--color-foreground);
    border-radius: var(--style-border-radius-popover);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;

    @media screen and (max-width: 749px) {
      border-radius: var(--style-border-radius-inputs);
      border: none;
    }
  }

  .predictive-search-form__header-inner:focus-within {
    outline-offset: var(--focus-outline-offset);

    @media screen and (min-width: 750px) {
      outline: var(--focus-outline-width) solid var(--color-primary);
    }
  }

  .predictive-search-form__header {
    display: flex;
    position: sticky;
    top: 0;
    z-index: var(--layer-heightened);
    width: 100%;
    align-items: center;
    background-color: var(--color-input-background);
    border: var(--search-border-width) solid var(--color-border);
    border-radius: var(--style-border-radius-inputs);

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

  .predictive-search-form__header:focus-within,
  .predictive-search-form__header-inner:focus-within,
  .predictive-search-form__header-inner:has(.search-input:is(:focus, :focus-visible)) {
    outline: none;
    box-shadow: none;
    /* stylelint-disable-next-line declaration-no-important */
    border-color: var(--color-border) !important;
  }

  input.search-input {
    border-radius: var(--style-border-radius-inputs);
    padding-block: var(--padding-sm);
    font-size: var(--font-size--md);
    width: 100%;
    color: var(--color-foreground);
    padding-inline: calc(var(--margin-lg) + var(--icon-size-lg)) 0;
    background: transparent;
    text-overflow: ellipsis;
    overflow: hidden;
    outline: none;
    border: 0;
  }

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

  .search-input,
  .search-input:is(:focus, :focus-visible, :focus-within),
  .predictive-search-form__header *:is(:focus, :focus-visible) {
    outline: none;
    box-shadow: none;
  }

  .search-input:hover {
    background-color: transparent;
  }

  .predictive-search__icon {
    position: absolute;
    left: var(--margin-xl);
    top: auto;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-60));

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

  .predictive-search__icon > svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  .predictive-search__reset-button {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    padding: 0;
    margin-inline-end: var(--margin-md);
    background: transparent;
    color: var(--color-foreground);
    opacity: 0.68;
    transition: opacity var(--animation-speed-medium) var(--animation-timing-fade-out),
      visibility var(--animation-speed-medium) var(--animation-timing-fade-out);

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

    &:active {
      transform: scale(0.9);
      transition: transform 100ms var(--animation-timing-active);
    }

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

  .predictive-search__reset-button[hidden] {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
  }

  .predictive-search__reset-button-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    transition: background-color var(--animation-speed-medium) ease-in-out,
      transform var(--animation-speed-medium) var(--animation-timing-bounce);
    border-radius: 50%;

    &:hover {
      background-color: rgb(var(--color-primary-hover-rgb) / var(--opacity-8));
    }
  }

  .predictive-search__reset-button:active .predictive-search__reset-button-icon {
    transform: scale(0.85);
    transition-timing-function: var(--animation-timing-active);
    transition-duration: 100ms;
  }

  .predictive-search__reset-button svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  .predictive-search__reset-button-text {
    display: none;
  }

  .predictive-search__search-button {
    margin: auto;
    z-index: var(--layer-raised);
    transition: transform var(--animation-speed-medium) var(--animation-timing-bounce),
      box-shadow var(--animation-speed-medium) var(--animation-timing-hover);
    transform-origin: center;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgb(0 0 0 / var(--opacity-5));
    }

    &:active {
      transform: scale(0.97);
      transition: transform 100ms var(--animation-timing-active);
      box-shadow: none;
    }
  }

  .predictive-search__close-modal-button {
    --button-color: var(--color-foreground);
    --button-background-color: transparent;

    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    margin-inline-start: var(--margin-sm);
    padding: 0;
    box-shadow: none;

    &:active {
      transform: scale(0.8);
      transition: transform 100ms var(--animation-timing-active);
    }

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

  .predictive-search__close-modal-button:hover {
    --button-color: var(--color-foreground);
    --button-background-color: transparent;
  }
/* END_SNIPPET:search-modal */
/* START_SNIPPET:search (INDEX:320) */
.search-action {
    --search-border-radius: var(--style-border-radius-inputs);
    --search-border-width: var(--style-border-width-inputs);

    display: flex;
  }

  @media screen and (max-width: 749px) {
    .search-action--hidden-on-drawer {
      display: none;
    }
  }

  @media screen and (min-width: 750px) {
    [data-menu-style='drawer'] .search-action--hidden-on-drawer {
      display: none;
    }

    [data-menu-style='menu'] .search-action--hidden-on-menu {
      display: none;
    }
  }

  [data-menu-style='menu'] .header__column--left .search-action {
    @media screen and (min-width: 750px) {
      margin-inline: calc(var(--padding-lg) * -1);
    }
  }

  .header__column--right .search-action {
    @media screen and (min-width: 750px) {
      margin-inline: calc(var(--gap-md) * -1) calc(var(--gap-xs) * -1);
    }
  }

  @media screen and (min-width: 750px) {
    .header__column--right .search-action--text {
      margin-inline: 0;
    }

    [data-menu-style='menu'] .header__column--left .search-action--text {
      margin-inline: 0;
    }
  }
/* END_SNIPPET:search */
/* START_SNIPPET:section (INDEX:321) */
.section-wrapper {
    --section-height-offset: 0px;
  }

  .section[data-shopify-visual-preview] {
    min-height: var(--section-preview-height);
    padding-top: 0;
  }

  .section[data-shopify-visual-preview] .custom-section-background {
    display: none;
  }

  body:has(> #header-group > .header-section > #header-component[transparent]):not(
      :has(> #header-group > .header-section + .shopify-section)
    )
    > main
    > .section-wrapper:first-child {
    --section-height-offset: var(--header-group-height, 0);
  }

  .custom-section-background {
    grid-column: 1 / -1;
  }

  .custom-section-content {
    z-index: var(--layer-flat);
  }
/* END_SNIPPET:section */
/* START_SNIPPET:skip-to-content-link (INDEX:323) */
.skip-to-content-link {
    position: absolute;
    left: -99999px;
  }

  .skip-to-content-link:focus {
    z-index: var(--layer-temporary);
    overflow: auto;
    width: auto;
    height: auto;
    padding: var(--padding-lg) var(--padding-4xl);
    left: var(--margin-lg);
    top: var(--margin-lg);
    background-color: var(--color-background);
    box-shadow: 0 0 0 var(--focus-outline-offset) var(--color-background);
  }
/* END_SNIPPET:skip-to-content-link */
/* START_SNIPPET:text (INDEX:340) */
:root {
    --text-align-default: left;
  }

  [style*='--horizontal-alignment: center'] .text-block {
    --text-align-default: center;
  }

  [style*='--horizontal-alignment: flex-end'] .text-block {
    --text-align-default: right;
  }

  [style*='--horizontal-alignment: flex-start'] > .text-block {
    --text-align-default: left;
  }

  [style*='--horizontal-alignment: center'] > .text-block {
    --text-align-default: center;
  }

  [style*='--horizontal-alignment: flex-end'] > .text-block {
    --text-align-default: right;
  }

  .text-block {
    width: var(--width);
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: var(--horizontal-alignment);
  }

  .text-block > * {
    width: var(--width);
    max-inline-size: min(100%, var(--max-width, 100%));
    text-align: var(--text-align, var(--text-align-default));
    text-wrap: var(--text-wrap);
  }

  .text-block:not(.text-block--full-width).rte,
  .text-block:not(.text-block--full-width).paragraph {
    /* Safari doesn't support pretty, so fallback to balance */
    text-wrap: balance;
    text-wrap: pretty;
  }

  .text-block:not(.text-block--full-width):is(.h1, .h2, .h3, .h4, .h5, .h6) {
    text-wrap: balance;
  }

  /* Hide underline unless text is using paragraph styles. */
  .text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) a {
    text-decoration-color: transparent;
  }

  .text-block h1,
  .text-block.h1 > * {
    margin-block: var(--font-h1--spacing);
  }

  .text-block h2,
  .text-block.h2 > * {
    margin-block: var(--font-h2--spacing);
  }

  .text-block h3,
  .text-block.h3 > * {
    margin-block: var(--font-h3--spacing);
  }

  .text-block h4,
  .text-block.h4 > * {
    margin-block: var(--font-h4--spacing);
  }

  .text-block h5,
  .text-block.h5 > * {
    margin-block: var(--font-h5--spacing);
  }

  .text-block h6,
  .text-block.h6 > * {
    margin-block: var(--font-h6--spacing);
  }

  .text-block p,
  .text-block.p > * {
    margin-block: var(--font-paragraph--spacing);
  }

  .text-block > *:first-child {
    margin-block-start: 0;
  }

  .text-block > *:last-child {
    margin-block-end: 0;
  }

  .text-block--align-center,
  .text-block--align-center > * {
    margin-inline: auto;
  }

  .text-block--align-right,
  .text-block--align-right > * {
    margin-inline-start: auto;
  }

  .text-block--background {
    background-color: var(--text-background-color);
    border-radius: var(--text-corner-radius);

    /* To avoid text being cropped when using a border radius we add a minimum padding. */
    padding-block-start: max(var(--text-padding), var(--padding-block-start, 0));
    padding-block-end: max(var(--text-padding), var(--padding-block-end, 0));
    padding-inline-start: max(var(--text-padding), var(--padding-inline-start, 0));
    padding-inline-end: max(var(--text-padding), var(--padding-inline-end, 0));
  }

  .custom-color,
  .custom-color > :is(h1, h2, h3, h4, h5, h6, p, *) {
    color: var(--color);
  }
/* END_SNIPPET:text */