/** Shopify CDN: Minification failed

Line 1913:5 Comments in CSS use "/* ... */" instead of "//"
Line 1914:4 Comments in CSS use "/* ... */" instead of "//"
Line 1915:4 Comments in CSS use "/* ... */" instead of "//"
Line 1916:5 Expected identifier but found "%"
Line 1916:21 Unexpected "("
Line 1917:13 Expected ":"
Line 1933:6 Unexpected "{"
Line 1933:7 Expected identifier but found "%"
Line 1934:3 Unexpected "("
Line 1935:9 Expected ":"

**/

/* Use this file to add custom css to the theme. */
.is-sticky {
  .fmp-logo {
    content: url("/cdn/shop/files/FMP_Floating_Header_Logo_Black.png?v=1699256059") !important;
    /* width: 19rem; */
    width: 15rem !important;
    display: block !important;
  }

  .header__row.three-segment {
    grid-template-columns: auto auto auto !important;
  }
}

.collection-banner__text-container {
  padding-top: 12rem !important;
}

.header {
  .header__image {
    content: url("/cdn/shop/files/FMP_Logo_Horizontal_Lockup_Black.png?v=1699359446") !important;
  }
}

.fmp-logo {
  display: none !important;
}

#shopify-section-header {
  position: unset !important;
}
.sticky-header-active {
  #shopify-section-header {
    position: sticky !important;
  }
}
 /* #shopify-section-header {
  min-height: 120px;
}

.sticky-header-active #shopify-section-header {
  position: sticky !important;
  top: 0;
} */


.custom__code {
  .image-hero__text-container {
    max-width: 1090px !important;
    width: 100% !important;
  }
  .image-hero__text-container-inner {
    width: 100% !important;
  }

  .custome__iframe {
    max-width: 1090px !important;
    height: 780px !important;
  }
}

/* Media queries */
@media screen and (max-width: 1150px) {
  .is-sticky {
    .fs-navigation-base {
      font-size: 14px !important;

      li {
        margin-right: 12px !important;
      }
    }
  }
}

@media (max-width: 959px) {
  .collection-banner__breadcrumbs {
    top: 45px !important;
  }
  .is-sticky {
    .fmp-logo {
      display: none !important;
    }

    .header__image {
      content: url("/cdn/shop/files/FMP_Logo_Horizontal_Lockup_Black.png?v=1699359446") !important;
    }
  }

  .collection-banner__text-container {
    padding-top: 1rem !important;
  }
}

@media screen and (max-height: 575px) and (orientation: landscape) {
  #shopify-section-1596642949266 {
    .content {
      padding-top: 4rem !important;
      padding-bottom: 0rem !important;
      .custome__iframe {
        height: 100vh !important;
      }
    }
  }
}

@media (max-width: 719px) {
  .collection-banner__text-container {
    padding-top: 5.5rem !important;
  }

  .collection-banner__breadcrumbs {
    top: 30px !important;
  }
}

@media screen and (max-width: 1024px) and (orientation: portrait) {
    .custome__iframe {
        height: 80vh !important;
    }
}

@media (max-width: 576px) and (orientation: portrait) {
  #shopify-section-1596642949266 {
    .content {
      /* padding-top: 4rem !important; */
      padding-top: 0 !important;
      padding-bottom: 0rem !important;
      .custome__iframe {
        max-width: 1090px !important;
        height: 50vh;
      }
    }
  }
}

/* Flagmaker app container (Note: These selectors gets changed every time when duplicate the theme) */
/* #shopify-section-template--23871503958341__50ce0a23-52d8-4358-b09f-4d2bbbe3799e, */
/* #shopify-section-template--23871504154949__custom_liquid_E7XwAh{ */
  #shopify-section-template--30453918204229__50ce0a23-52d8-4358-b09f-4d2bbbe3799e,
  #shopify-section-template--30660152426821__50ce0a23-52d8-4358-b09f-4d2bbbe3799e,
  #shopify-section-template--28516881531205__custom_liquid_E7XwAh,
  #shopify-section-template--29667864609093__custom_liquid_MRXyJ4,
  #shopify-section-template--29667865493829__custom_liquid_E7XwAh{ 
  
  .section {
    padding: unset !important;
    max-width: 100% !important;
    background:#222D3B;
    .app-iframe-container {
      background: url("/cdn/shop/files/FMPP_-_Atlantic_Canadian_Flag_Key_Art.png?v=1666972711") !important;

      width: 100% !important;
      height: 100% !important;

      .content {
        padding-top: 13rem ;
        padding-bottom: 4rem;

        .custome__iframe {
          max-width: 1090px;
          height: 780px;
          margin: auto !important;
        }
      }
    }
  }
}
 
  #shopify-section-template--30660152066373__custom_liquid_MRXyJ4,
  #shopify-section-template--30660152099141__custom_liquid_MRXyJ4,
  #shopify-section-template--30453917876549__custom_liquid_MRXyJ4,
  #shopify-section-template--30228717044037__custom_liquid_E7XwAh{ 
  
  .section {
    padding: unset !important;
    max-width: 100% !important;
    background:#222D3B;
    .app-iframe-container {
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center !important;
      width: 100% !important;
      height: 100% !important;

      .content {
        padding-top: 3rem ;
        padding-bottom: 4rem;

        .custome__iframe {
          max-width: 1090px;
          height: 780px;
          margin: auto !important;
        }
      }
    }
  }
}
.app-iframe-container.pirate-creator {
  background-image: url("/cdn/shop/files/Pirate_Flag_Creator-_Hero_Background_Image_-_v01-05.jpg?v=1776866971") !important;
}

.app-iframe-container.pride-creator {
  background-image: url("/cdn/shop/files/Pride_Flag_Creator-_Hero_Background_Image_-_v01-05.jpg?v=1780492070") !important;
}
/* Flag maker page */

.flag__maker-page {
  .template-index .main,
  .shopify-section.page-section {
    display: none !important;
  }
  .is-sticky {
    header {
      background: white !important;
      color: black !important;

      /* .header__image.image__img {
        content: url("/cdn/shop/files/FMP_Logo_Horizontal_Lockup_Black.png?v=1699359446") !important;
      } */
    }
  }
  header {
    position: absolute !important;
    width: 100% !important;
    background: transparent !important;
    color: white !important;

    span[data-js-cart-count] {
      background-color: white !important;
      color: black;
    }
  @media (min-width: 768px) {
      .header__image.image__img {
        content: url("/cdn/shop/files/FMP_Logo_Horizontal_Lockup_White.png?v=1699359447")!important;
      }
    }
  }

  header:hover {
    background: white !important;
    color: black !important;

    span[data-js-cart-count] {
      background-color: black !important;
      color: white !important;
    }

    .header__image.image__img {
      content: url("/cdn/shop/files/FMP_Logo_Horizontal_Lockup_Black.png?v=1699359446") !important;
    }
  }

  .is-sticky {
    /* header { */
    background: white !important;
    color: black !important;
    /* } */

    span[data-js-cart-count] {
      background-color: black !important;
      color: white !important;
    }
  }
    /* Styles for mobile devices */
  @media (max-width: 768px) {
    header {
      background: white !important; /* Override transparent background on mobile */
      color: black !important;
      
      span[data-js-cart-count] {
        background-color: black !important;
        color: white !important;
      }
    }


    /* .header__image.image__img {
      content: url("/cdn/shop/files/FMP_Logo_Horizontal_Lockup_Black.png?v=1699359446") !important;
    } */
    
.flag__maker-page header .header__image.image__img {
      content: url("/cdn/shop/files/FMP_Logo_Horizontal_Lockup_Black.png?v=1699359446") !important;
    }
  }
}

/* Collection page header */
/* .collection-section {
  height: 45vh;
} */

/* Global loader */

.loading-overlay {
  position: absolute !important;
  height: 100% !important;
  width: 100% !important;
  background-color: #2a2a2a !important;
  z-index: 99999 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;

  .loadingio-spinner-rolling {
    width: 200px;
    height: 200px;
    display: inline-block;
    overflow: hidden;
    background: rgba(255, 255, 255, 0);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    .loadingio-spinner-rolling__ldio {
      width: 100%;
      height: 100%;
      position: relative;
      transform: translateZ(0) scale(1);
      backface-visibility: hidden;
      transform-origin: 0 0;

      div {
        box-sizing: content-box;
        position: absolute;
        width: 120px;
        height: 120px;
        border: 20px solid #dc4243;
        border-top-color: transparent;
        border-radius: 50%;
        animation: ldio 0.9803921568627451s linear infinite;
        top: 100px;
        left: 100px;
      }
    }
  }
}

/* loader css */
.iframe-loader {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #1f1f1f;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.loader-wrapper {
position: relative;
width: 165px;
height: 165px;
}

.loader-logo {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
transform: translate(-50%, -50%);
z-index: 2;
}
.loading-text{
  margin-top: 24px !important;
font-size: 18px !important;
color: #ffffff;
font-family: Arial, sans-serif;
}
.loader-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    conic-gradient(
      #e53935 0deg 270deg, 
     rgba(31, 31, 31, 1)
 270deg 360deg
    );
  mask: radial-gradient(
    circle,
    transparent 58%,
    black 59%
  );
mask: radial-gradient(circle, transparent 50%, black 51%);
-webkit-mask: radial-gradient(circle, transparent 53%, black 51%);

  animation: spin 1.1s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg) !important;
}
}

/* ---------------loader css------- */
/* Shopify chat button fixes */
iframe#dummy-chat-button-iframe {
  /* width: 100px !important; */

  .button-position--bottom_right {
    body {
      div#shopify-chat-dummy {
        button#dummy-chat-button.chat-toggle {
          background: url("/cdn/shop/files/FMP_Chat_Help_Icon_bd81d30b-cc2d-4cea-84e2-216ac85b52b2.svg?v=1699251313")
            no-repeat !important;

          /* span {
            visibility: hidden;
          } */
        }
      }
    }
  }
}
.product__item {
  margin-bottom: 20px; 
}

.btn--secondary--flagmaker {
     background: white;
    color: #000;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    border: 1.5px solid black;
    font-size: 11px;
}

.btn--secondary--flagmaker{
  position:relative;
  transition:color 0.2s ease, border-color 0.2s ease;
  overflow:hidden;
  z-index:1;
}
.btn--secondary--flagmaker::before{
    content:"";
    position:absolute;
    top:0;
    left:-15%;
    width:130%;
    height:100%;
    /* background:var(--color-background-outline-button-alpha); */
    background:#E9E9EF;
    z-index:-1;
    transform:translate3d(-100%, 0, 0) skew(30deg);
    transition:transform 500ms cubic-bezier(0.33, 0, 0, 1);
    transition:transform var(--duration-normal) var(--easing);
  }
.btn--secondary--flagmaker:hover:not([disabled])::before, .btn--secondary--flagmaker:focus:not([disabled])::before{
      transform:none;
      transform:initial;
    }
.btn--secondary--flagmaker .btn__loading-bar{
    background-color:white;
  }
.btn.btn--secondary--flagmaker.btn--overlay{
    color:var(
      --color-background-overlay-button,
      var(--color-background-button)
    );
    border-color:var(
      --color-background-overlay-button,
      var(--color-background-button)
    );
  }
.btn.btn--secondary--flagmaker.btn--overlay::before{
      background:var(--color-background-overlay-outline-button-alpha);
    }

.section {
  position: relative;
  max-width: calc(1400px + calc(3.3vw * 2));
  max-width: calc(var(--max-width) + calc(var(--space-outer) * 2));
  padding: calc(4px * 10) 3.3vw;
  padding: var(--spacing-10) var(--space-outer);
  margin-right: auto;
  margin-left: auto;
}

.show-fmp-logo {
  .header__logo {
    display: none !important;
  }
}
.header--transparent {
  position: absolute;
  width:100%;  
}

/* IMPORTANT */
body.header-transparent {
  --height-header: 0px;
}
/* new code  */

/* .shipping-timeline-wrapper { max-width:700px; margin:20px auto;} */
.timeline-step { text-align:center; position:relative; }
.timeline-date { font-size:12px; margin-top:2px;}
.timeline-line { position:absolute; top:15px; left:30px; right:35px; height:2px; background-color:#ccc; z-index:1; }
.timeline-note { font-size:17px; color:#333; margin-top:10px; }
.timeline-dot[data-tooltip]:hover::after { content: attr(data-tooltip); position:absolute; bottom:30px; left:50%; transform:translateX(-50%); background: #1a1a1a; color:#fff; padding:1em; border-radius:4px; font-size:12px; white-space:nowrap; z-index:10; }
.timeline-dot {
  width: 40px;
  height: 40px;
  background-color: #000;
  border-radius: 50%;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.shipping-timeline {
  display: flex;
  position: relative;
  justify-content: space-between;
  align-items: flex-start;
}

#timeline-note a {
  color: #D14B4B;    
  text-decoration: underline;
}

#timeline-note a:hover {
  text-decoration: underline;
}
.timeline-label {
  margin: 4px auto 0;
  display: inline-flex;
  align-items: center;
  gap: 1px;
  line-height: 1.2;
  word-break: break-word;
  white-space: normal;
  font-size: 12px;
  font-weight: bold;
}


@media (max-width: 768px) {

  .timeline-step {
    position: relative;
  }

  .timeline-step .tooltip-content {
    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%);
    width: 90vw;
    max-width: 360px;
  }

}
.tooltip-icon {
  position: relative;
  display: inline-block;
  cursor: pointer;
}


.tooltip-icon::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  background: #1a1a1a;
  color: #fff;
  padding:1em;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  width: 280px;
  max-width: 90vw;
  white-space: normal;
  z-index: 1000;
  text-align: left;
  line-height: 1.4;

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.tooltip-icon.active::after {
  opacity: 1;
  pointer-events: auto;
}
.tooltip-icon:hover::after {
  opacity: 1;
  pointer-events: auto;
}
.heading-with-tooltip .tooltip-icon::after {
  content: none !important;
}
.heading-with-tooltip-buy .tooltip-icon::after {
  content: none !important;
}


@media screen and (max-width:400px){
.timeline-label { font-size:10px;    font-weight:bold;
}
.timeline-date { font-size:10px;}


.timeline-note {
    font-size: 15px;}
} 

.tooltip-icon {
  position: relative;
  cursor: pointer;
  display: inline-flex;
}

.tooltip-icon img {
  width: 15px;
  height: 15px;
}
#timeline-note a {
  color: #D14B4B;    
  text-decoration: underline;
}

#timeline-note a:hover {
  text-decoration: underline;
}
.timeline-label {
  margin: 4px auto 0;
  display: inline-flex;
  align-items: center;
  gap: 1px;
  line-height: 1.2;
  word-break: break-word;
  white-space: normal;
  font-size: 12px;
  font-weight: bold;
}

.tooltip-icon.active::after {
  opacity: 1;
  pointer-events: auto;
}
@media screen and (max-width:400px){
.timeline-label { font-size:10px;    font-weight:bold;
}
.timeline-date { font-size:10px;}


.timeline-note {
    font-size: 15px;}
} 
heading-with-tooltip .tooltip-icon:hover~:after, .heading-with-tooltip:hover:after {
    opacity: 1;
    pointer-events: auto;
}
.heading-with-tooltip:after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translate(-50%);
    background: #1a1a1a;
    color: #fff;
    padding: 1em;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    width: 280px;
    max-width: 90vw;
    line-height: 1.4;
    text-align: left;
    white-space: normal;
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
}

.heading-with-tooltip {
    position: relative;
    display: flex;           
    align-items: center;
    gap: 6px;
    font-weight: 900;
    width: 100%;               
    text-align: center;
margin-top:3%;
}

/* .heading-with-tooltip-buy{
   display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 900;
  margin:8px 0 0 0;
  font-size:17px;
} */
.heading-with-tooltip-buy {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 900;
  font-size: 17px;
  cursor: pointer;
  text-align: center;
}

.heading-with-tooltip-buy::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 125%;     
  left: 50%;        
  transform: translateX(-50%);
  background: #1a1a1a;
  color: #fff;
  padding: 1em;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  width: 280px;
  max-width: 90vw;
  white-space: normal;
  line-height: 1.4;
  text-align: left;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 1000;
}

.heading-with-tooltip-buy:hover::after {
  opacity: 1;
  pointer-events: auto;
}

.heading-with-tooltip:hover:after {
    opacity: 0;
    pointer-events: none;
}
.heading-with-tooltip:has(.tooltip-icon:hover):after {
    opacity: 1;
    pointer-events: auto;
}

.tooltip-icon {
  position: relative;
  cursor: pointer;
  display: inline-flex;
}

.tooltip-icon img {
  width: 15px;
  height: 15px;
}

.timeline-info-icon {
  width: 14px;
  height: 14px;
  cursor: pointer;
}
.tooltip-icon::after,
[data-tooltip]::after {
  white-space: pre-line;
}
.tooltip {
  white-space: pre-line;
}
@media (max-width: 768px) {
  .timeline-step {
    position: relative;
  }
  .timeline-step:hover .tooltip-content,
  .timeline-step:focus-within .tooltip-content {
    display: block;
  }
}
.shipping-timeline-wrapper {
  position: relative;
  max-width: 700px;
  margin: 20px auto;
}

#timeline-tooltip {
  position: absolute;
  bottom: 105%;
  left: 50%;
  transform: translateX(-50%);
  background: #1a1a1a;
  color: #fff;
  padding: 1em;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.4;
    font-weight: 700;       
  text-align: left;
  max-width: 90%;
  width:280px;
  white-space: normal;
  word-break: break-word;
  z-index: 9999;
  display: none; 
}

#timeline-tooltip a {
  text-decoration: underline;
}

#timeline-tooltip a:hover {
  text-decoration: underline;
}

.option-label-scope {
  display: flex;
  align-items: center;
}
@media (max-width: 768px) {
  .option-label-scope {
    display: block; 
  }
}
.product__label-wrapper.option-label-scope {
  position: relative;
}

/* Keep label content inline */
.option-label-scope .option-label {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
    margin-right:3px !important;

}

/* Space between value and helper link */
/* .option-label-scope .option-selected-value {
  margin-right: 10px;
} */

/* Helper link container */
.option-label-scope .options-helper-link {
  flex-shrink: 0;
}

/* Red helper link */
.option-label-scope .option-help-link {
  font-weight: 400;
  color: #d0021b;
  text-decoration: underline;
  cursor: pointer;
  font-size:14px;
  white-space: nowrap;
}

.option-label-scope .option-help-link:hover {
  color: #a80014;
}
.option-help-link {
  position: relative;
  cursor: pointer;
}

 .option-help-link-wrapper {
  position: relative;
}

.options-helper-link {
    position: relative; 
}

.option-help-link-wrapper {
  position: relative;
  width: 100%;        
}

.tooltip-content {
  display: none;
  position: absolute;
  left: 50%;
  transform: translateX(-100%);
  bottom: 110%;       /* positions above the link */
  width: 280px;
  padding: 1em;
  background: rgba(0,0,0,0.9);
  color: #fff;
  font-size: 12px;
  border-radius: 4px;
  text-align: left;
  z-index: 9999;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  font-weight: 700;
}
.product__label-wrapper.option-label-scope {
    position: relative;
}


.option-help-link-wrapper:hover .tooltip-content,
.option-help-link-wrapper.active .tooltip-content {
  display: block;
}

.tooltip-content a {
  color: #fff;         
  text-decoration: underline; 
}

 @media (max-width: 768px) { 
  .tooltip-content {
  transform: translateX(-50%);
  }
}
.koala-deal__tier__quantity-container{
  background:#E4343D !important;
  padding:7px !important;
}
.koala-deal__quantity-label{
  color:white !important;
}
[data-live-text-setting="template--28516881957189__main__text_qeDdqi.custom_liquid"] {
font-size:20px !important;
background:#ffebe3 !important;
}

.koala-deal__quantity-button {
  font-size:30px !important;
    background-color:white !important;
  opacity:1 !important;
  justify-content:center;
  align-items:center;
  display:flex;
  color:#E4343D !important;
}

.koala-deal__quantity-input{
  color:white !important;
}
.timeline-step {
  position: relative;
}

.timeline-step:hover .tooltip-content {
  display: block;
}
@media (max-width: 600px) {
  .koala-deal__tier__variant-select {
    width: 100%;
    width: -webkit-fill-available;
  }

  .koala-deal__tier__variant.needsclick {
    width: 80%;
  }
}
.option-left {
  display: flex;
  align-items: center;
  gap: 6px;
}

.options-helper-link {
  margin-left: auto; 
}
body.template-index.header-transparent-on-home #main,

body.template-collection.header-transparent-on-collection #main,

body.template-password.header-transparent-on-home #main {

  margin-top: calc(var(--height-header) * -1);

}



html:not(.no-js)

  body.template-index:not([mobile-menu-open="true"]):not(

    [quick-search-open="true"]

  )

  header.header--transparent:not(.is-sticky):not(:hover):not(

    [focus-within]

  ):not(.dropdown-active),

html:not(.no-js)

  body.template-collection:not([mobile-menu-open="true"]):not(

    [quick-search-open="true"]

  )

  header.header--transparent:not(.is-sticky):not(:hover):not(

    [focus-within]

  ):not(.dropdown-active) {

  background-color: transparent;

  .image__img {

    content: url("/cdn/shop/files/FMP_Logo_Horizontal_Lockup_White.png?v=1699359447") !important;

  }

}
html:not(.no-js) body:not([mobile-menu-open="true"]):not([quick-search-open="true"])
    header.header--transparent:not(.is-sticky):not(:hover):not(
      :focus-within
    ):not(.dropdown-active) .header__inner a.featured-link{
          color:var(--color-text-featured-link);
        }
.shopify-section.main-product-section ~ section{
    overflow:hidden;
  }
    /* ------------------Bespoke CSS MOBILE--------------------- */

  /* ─── OVERLAY ─── */
  .cfm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 999998;
    display: none;
  }
  .cfm-overlay.active { display: block; }

  /* ─── BOTTOM SHEET ─── */
  .cfm-sheet {
    height:94%;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: #fff;
    z-index: 999999;
    max-height: 95vh;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform .3s ease;
  }
  .cfm-sheet.active { transform: translateY(0); }

  /* ─── HEADER ─── */
  .cfm-header {
    padding: 20px 16px 14px;
    border-bottom: 2px solid black;
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
  }
  .cfm-header-left {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex: 1;
  }
  .cfm-back {
    background: none;
    border: none;
    font-size: 33px;
    cursor: pointer;
    padding: 0;
    color: #111;
    flex-shrink: 0;
    line-height: 1.3;
    display: none;
    font-weight:900;
  }
  .cfm-header h2 {
    font-size: 17px;
    font-weight: 800;
    text-transform: uppercase;
    margin-top:3px;
    line-height: 1.3;
    letter-spacing: 0.2px;
    font-family:'Montserrat'
  }
  .cfm-close {
    background: none;
    border: none;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    color: #111;
    flex-shrink: 0;
    margin-top: 2px;
  }

  /* ─── SCROLLABLE BODY ─── */
  .cfm-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 16px 20px;
  }
  .cfm-body::-webkit-scrollbar { display: none; }

  /* ─── PANELS ─── */
  .cfm-panel { display: none; }
  .cfm-panel.active { display: block; }

  /* ─── INTRO TEXT ─── */
  .cfm-intro {
    font-size: 15px;
    color: #333;
    line-height: 1.6;
    padding: 16px 0 12px;
    margin-bottom: 20px;
  }
  .cfm-intro a {
    color: #ef3340;
    font-weight: 600;
    text-decoration: underline;
  }

  /* ─── SECTION LABELS ─── */
  .cfm-section-label {
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #111;
    margin: 0 0 12px;
        font-family:'Montserrat'

  }

  /* ─── SIZE ROW ─── */
  .cfm-size-row {
    display: flex;
    gap: 10px;
    margin-bottom: 24px;
  }
  .cfm-size-field {
    flex: 1;
    position: relative;
  }
  .cfm-size-field input {
    width: 100%;
    padding: 14px 28px 14px 12px;
    border: 1px solid #ccc;
    font-size: 16px;
    box-sizing: border-box;
    border-radius: 0;
    -webkit-appearance: none;
    background: #fff;
  }
  .cfm-size-field input:focus { outline: none; border-color: #111; }
  .cfm-unit-hint {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: #aaa;
    pointer-events: none;
  }
  .cfm-unit-select {
    flex: 1.2;
    position: relative;
  }
  .cfm-unit-select select {
    width: 100%;
    padding: 14px 32px 14px 12px;
    border: 1px solid #ccc;
    font-size: 15px;
    box-sizing: border-box;
    border-radius: 0;
    -webkit-appearance: none;
    background: #fff;
    cursor: pointer;
  }
  .cfm-unit-select select:focus { outline: none; border-color: #111; }
  .cfm-unit-select::after {
    content: '▾';
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    color: #888;
    pointer-events: none;
  }

  /* ─── SHAPE SLIDER ─── */
  .cfm-shape-section { margin-bottom: 20px; }
  .cfm-shape-row {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .cfm-shapes {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    flex: 1;
    scrollbar-width: none;
    padding: 4px 2px;
  }
  .cfm-shapes::-webkit-scrollbar { display: none; }
  .cfm-shape {
    min-width: 72px;
    height: 56px;
    border: 1.5px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    background: #DDDDDDB2;
    transition: border-color .15s, background .15s;
    padding: 6px;
    box-sizing: border-box;
  }
  .cfm-shape.active {
    background: black;
  }
  .cfm-shape img {
    max-width: 52px;
    max-height: 40px;
    object-fit: contain;
  }
  .cfm-arrow {
    border: none;
    background: transparent;
    font-size: 28px;
    cursor: pointer;
    padding: 0 2px;
    color: #444;
    flex-shrink: 0;
    line-height: 1;
  }

  /* ─── TEXTAREA ─── */
  .cfm-textarea {
    width: 100%;
    padding: 14px 12px;
    border: 1px solid #ccc;
    font-size: 16px;
    border-radius: 0;
    box-sizing: border-box;
    resize: none;
    margin-bottom: 13px;
    line-height: 1.5;
    color: #111;
    font-family: inherit;
  }
  .cfm-textarea:focus { outline: none; border-color: #111; }

  /* ─── TEXT INPUT ─── */
  .cfm-text-input {
    width: 100%;
    padding: 14px 12px;
    border: 1px solid #ccc;
    font-size: 16px;
    border-radius: 0;
    box-sizing: border-box;
    -webkit-appearance: none;
    font-family: inherit;
    margin-bottom: 20px;
  }
  .cfm-text-input:focus { outline: none; border-color: #111; }

  /* ─── STEP 2: IMAGE UPLOAD ─── */
  .cfm-upload-intro {
    font-size: 15px;
    color: #333;
    line-height: 1.6;
    padding: 16px 0 12px;
    margin-bottom: 20px;
  }
  .cfm-image-grid {
  display: none; /* hidden initially */
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 16px;
  min-height: 90px;
}

.cfm-image-grid.has-images {
  display: grid;
}
  .cfm-image-thumb img {
    width: 90px;
    height: 90px;
    object-fit: cover;
    display: block;

  }
   .cfm-image-thumb {
        position: relative;
height:90px;
margin-right:2%;
  }
  .cfm-image-thumb .cfm-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    background: #111;
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }
  .cfm-upload-btn-wrap {
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 16px;
    text-align: center;
    margin-bottom: 12px;
  }
  .cfm-upload-trigger {
    background: none;
    border: none;
    color: #ef3340;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
  }
  .cfm-upload-status {
    font-size: 13px;
    color: #888;
    text-align: center;
    min-height: 18px;
  }

  /* ─── STEP 3: CONFIRMATION ─── */
  .cfm-confirm-intro {
    font-size: 14px;
    color: #333;
    line-height: 1.6;
    padding: 16px 0 16px;
    margin-bottom: 16px;
  }
  .cfm-shipping-banner {
    background: #f0f7f0;
    border-radius: 6px;
    padding: 12px 14px;
    font-size: 14px;
    font-weight: 600;
    color: #2e7d32;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .cfm-product-row {
    display: flex;
    gap: 14px;
    padding-bottom: 16px;
    margin-bottom: 16px;
    align-items: flex-start;
  }
  .cfm-product-img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    flex-shrink: 0;
    border-radius: 2px;
  }
  .cfm-product-info {
    flex: 1;
  }
  .cfm-product-info h4 {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0 0 4px;
    line-height: 1.3;
  }
  .cfm-product-info .cfm-variant {
    font-size: 12px;
    color: #666;
    margin: 0 0 6px;
    line-height: 1.4;
  }
  .cfm-product-info .cfm-price {
    font-size: 14px;
    font-weight: 600;
    color: #111;
    margin: 0 0 10px;
  }

  /* ─── QUANTITY SELECTOR ─── */
  .cfm-qty-row {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 4px;
  }
  .cfm-qty-btn {
    width: 36px;
    height: 36px;
    border: 1px solid #ccc;
    background: #fff;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #111;
    flex-shrink: 0;
  }
  .cfm-qty-input {
    width: 44px;
    height: 36px;
    border: 1px solid #ccc;
    border-left: none;
    border-right: none;
    text-align: center;
    font-size: 15px;
    font-family: inherit;
    -webkit-appearance: none;
  }
  .cfm-qty-input:focus { outline: none; }
  .cfm-remove-link {
    display: block;
    font-size: 12px;
    color: #666;
    text-decoration: underline;
    margin-top: 6px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
  }

  /* ─── REFERENCE THUMBNAILS (step 3) ─── */
  .cfm-ref-section {
    margin: 10px 0 16px 0;
  }
  .cfm-ref-thumbs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
  }
  .cfm-ref-thumb {
    width: 64px;
    height: 64px;
    object-fit: cover;
  }

  /* ─── FOOTER ─── */
  .cfm-footer {
    padding: 12px 16px 20px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .cfm-btn-primary {
    width: 100%;
    padding: 16px;
    background: #ef3340;
    color: #fff;
    border: none;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: inherit;
  }
  .cfm-btn-primary:disabled {
    background: #ccc;
    cursor: not-allowed;
  }
  /* .cfm-btn-secondary {
    width: 100%;
    padding: 15px;
    background: #fff;
    color: #111;
    border: 2px solid #111;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  } */
   .cfm-btn-secondary {
    width: 100%;
    padding: 15px;
    background: #fff;
    color: #111;
    border: 2px solid #111;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: .3px;
    font-family: inherit;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    text-align: center;
    white-space: normal;
}
.cfm-upload-trigger {
  background: none;
  border: none;
  color: #ef3340;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;

  display: inline-flex;
  align-items: center;
  gap: 8px;
}
    /* ------------------Bespoke CSS DESKTOP--------------------- */
  .custom-flag-body {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
  }

  .custom-flag-body::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
  }
    .btn__loading-bar{
      width:100%;
      height:2px;
      border-radius:2px;
      animation:loaderLine 1.4s ease-in-out infinite;
    }
    .desk-hidden {
      display: none !important;
    }
    .text-info{
      font-size:17px;
    }
    .custom-flag-footer {
      border-top: 2px solid #111;
      padding-top: 20px;
      margin-top: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-shrink: 0;
    }
    .size-row input,
    .size-row select {
      font-size: 12px;
    }
    .size-row input::placeholder {
      font-size: 12px;
      color: #999;
    }
    .product-block-custom-liquid hr {
      display: none !important;
    }
    .size-row select option {
      font-size: 12px;
    }
    .flagmaker-btn {
      background: white;
      border: 2px solid #111;
      padding: 10.8px 22px;
      font-size: 15px;
      font-weight: 500;
      cursor: pointer;
    }
    .next-btn {
      background: #ef3340;
      color: white;
      border: none;
      padding: 16px 34px;
      font-size: 15px;
      font-weight: 500;
      cursor: pointer;
      text-transform: uppercase;
    }
    .custom-flag-modal {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,.7);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 999999;
      padding: 20px;
    }
    .custom-flag-popup {
      position: relative;
      display: flex;
      flex-direction: column;
      background: #fff;
      width: 100%;
      max-width: 1200px;
      padding: 30px;
      max-height: 90vh;
      overflow: hidden;
      z-index:999999;
    }
    /* NEW: scrollable middle area */
    .custom-flag-body {
      display: grid;
      grid-template-columns: 360px 1fr;
      gap: 15px;
      overflow-y: auto;
      flex: 1;
      padding: 10px 0;
    }
    .custom-flag-left {
      background: #f8eded;
      padding: 25px;
    }
    .custom-flag-left h3 {
      margin-top: 0;
    }
    .custom-flag-right h4 {
      margin-bottom: 12px;
      font-size:17px;
    }
    .size-row select {
      font-size: 12px;
      padding-right: 22px;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 20 20' fill='gray'%3E%3Cpath d='M5 7l5 5 5-5H5z'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 8px center;
      background-size: 10px;
    }
    .size-row {
      display: flex;
      gap: 12px;
      margin-bottom: 10px;
      height:6%;
    }
    .custom-flag-header {
      border-bottom: 2px solid #111;
      padding-bottom: 14px;
      margin-bottom: 10px;
      flex-shrink: 0;
    }
    .custom-flag-header h2 {
      margin: 0;
      font-size: 18px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    .size-row input,
    .size-row select,
    .custom-flag-right textarea {
      width: 100%;
      padding: 8px;
      border: 1px solid #ddd;
    }
    .shape-grid {
      display: flex;
      gap: 12px;
    }
    .shape-box {
      border: 1px solid #ddd;
      padding: 18px;
      cursor: pointer;
      border-radius: 6px;
      transition: .2s ease;
    }
    .shape-box input {
      display: none;
    }
    .shape-box:has(input:checked) {
      border-color: red;
    }
    .custom-flag-right textarea {
      /* min-height: 120px; */
      margin-bottom: 7px;
    }
    .custom-submit-btn {
      background: #e63946;
      color: white;
      border: none;
      padding: 14px 28px;
      cursor: pointer;
      width: 100%;
      font-weight: bold;
      border-radius: 6px;
    }
    .custom-flag-modal__close {
      position: absolute;
      top: 12px;
      right: 16px;
      font-size: 32px;
      border: none;
      background: none;
      cursor: pointer;
      line-height: 1;
    }
    @media screen and (max-width: 768px) {
      .custom-flag-body {
        grid-template-columns: 1fr;
      }
    }
  .custom-flag-desktop { display: block; }
  .custom-flag-mobile  { display: none;  }

  @media (max-width: 768px) {
    .custom-flag-desktop { display: none;  }
    .custom-flag-mobile  { display: block; }
  }
    /* SECOND MODAL */
    .preview-popup {
      position: relative;
      background: #fff;
      width: 100%;
      max-width: 1200px;
      padding: 30px;
      max-height: 90vh;
      min-height:90vh;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 20px;
    }
    .preview-header {
      border-bottom: 2px solid #111;
      padding-bottom: 15px;
    }
    .preview-header h2 {
      font-size: 18px;
      font-weight: 800;
      margin: 0;
      text-transform: uppercase;
    }
    .preview-body {
      display: grid;
      grid-template-columns: 380px 1fr;
      gap: 24px;
      flex: 1;
    }
    .preview-left {
      background: #f8eded;
      padding: 25px;
      line-height: 1.6;
    }
    .preview-right {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }
    .shipping-banner {
      background: #edf7ed;
      padding: 14px;
      font-weight: 600;
      color: #2e7d32;
      border-radius: 4px;
    }
    .preview-product {
      display: flex;
      gap: 20px;
      border-bottom: 1px solid #ddd;
      padding-bottom: 20px;
    }
    .preview-image img {
      width: 120px;
      height: auto;
      object-fit: cover;
    }
    .preview-info h3 {
      margin: 0 0 8px;
      font-size: 16px;
      font-weight: 400;
      font-family:'Montserrat';
    }
    .preview-info p {
      margin: 4px 0;
      font-size: 14px;
      color: #555;
    }
    .preview-price {
      font-size: 14px;
      font-weight:bold;
    }
    .reference-section h4 {
      margin-bottom: 12px;
      font-size: 14px;
      font-weight: 400;
          font-family:'Montserrat';

      text-transform: uppercase;
    }
    .reference-grid {
      display: flex;
      gap: 12px;
    }
    .reference-item {
      width: 80px;
      height: 80px;
      background: #eee;
    }
    .product__policies {
      display: none !important;
    }
    .preview-footer {
      border-top: 2px solid #111;
      padding-top: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-shrink: 0;
      margin-top: auto;
    }
  .shape-grid {
  display: flex;
  align-items: stretch;
  margin-top: 10px;
  background: #DDDDDDB2;
}
.shape-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 10px 10px;
  border: none;
  transition: background-color 0.2s;
  min-width: 70px;
}
.shape-box input[type="radio"] {
  display: none;
}
.shape-box .shape-img.active { display: none; }
.shape-box .shape-img.idle   { display: block; }
.shape-box input[type="radio"]:checked ~ .shape-img.idle   { display: none; }
.shape-box input[type="radio"]:checked ~ .shape-img.active { display: block; }
.shape-box:has(input[type="radio"]:checked) {
  background: #000;
  border-radius:0;
}
.shape-img {
  width: 60px;
  height: 48px;
  object-fit: contain;
}
.shape-label {
  font-size: 11px;
  margin-top: 6px;
  color: #555;
  text-align: center;
}
    .checkout-btn {
      background: #ef3340;
      color: #fff;
      border: none;
      padding: 16px 32px;
      font-weight: 500;
          font-family:'Montserrat';

      cursor: pointer;
      text-transform: uppercase;
      font-size: 15px;
    }
    @media (max-width: 768px) {
      .preview-body {
        grid-template-columns: 1fr;
      }
    }
     // ─────────────────────────────────────────────────────────────
    // OPEN FIRST MODAL
    // ─────────────────────────────────────────────────────────────
    {% comment %} if (openBtn) {
      openBtn.addEventListener('click', function (event) {
        const selectedVariant = document.querySelector('select[name="id"]')
          ?.selectedOptions[0]
          ?.textContent
          .trim();

        const isCustomVariant = selectedVariant?.toLowerCase().includes('custom');

        if (!isCustomVariant) return;

        event.preventDefault();
        event.stopPropagation();
        modal.classList.remove('desk-hidden');
        document.body.style.overflow = 'hidden';
        hideHeader();
      });
    } {% endcomment %}
if (openBtn) {
  openBtn.addEventListener('click', function (event) {
    const selectedVariant = document.querySelector('select[name="id"]')
      ?.selectedOptions[0]
      ?.textContent
      .trim();

    const productTitle = document.querySelector('.sticky-atc-bar__meta h5')
      ?.textContent
      ?.trim() || '';

    const isCustomVariant =
      selectedVariant?.toLowerCase().includes('custom') ||
      productTitle.toLowerCase().includes('custom');

    if (!isCustomVariant) return;

    event.preventDefault();
    event.stopPropagation();
    modal.classList.remove('desk-hidden');
    document.body.style.overflow = 'hidden';
    hideHeader();
  });
}