/** Shopify CDN: Minification failed

Line 188:17 Unexpected "{"
Line 188:26 Expected ":"
Line 188:33 Unexpected "{"
Line 189:16 Expected identifier but found whitespace
Line 189:23 Unexpected "{"
Line 189:32 Expected ":"
Line 190:21 Expected identifier but found whitespace
Line 190:23 Unexpected "{"
Line 190:32 Expected ":"
Line 191:21 Expected identifier but found whitespace
... and 13 more hidden warnings

**/
@media (min-width: 990px) {
    .product__grid {
        display: grid;
        grid-template-columns: minmax(492px, 50%) minmax(380px, 50%);
        gap: 48px;
        align-items: start;
    }
    .product__custom-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 20px;
    margin-bottom: 16px;
}
}

.main-product {
    padding: 2rem 0 4rem;
    background: #eef0f3;
}


.product-container{
    margin: 0 auto;
    background: white;
    border-radius: 16px;
    padding: 28px;
    padding-top: 0;
    box-shadow: 0 1px 2px rgba(20, 23, 28, 0.04), 0 12px 32px rgba(20, 23, 28, 0.06);
}

.swiper.product__media-main{
    border:0
}
.details h1 {
    font-size: 35px;
    line-height: 1.25;
    margin: 0 0 10px;
    letter-spacing: -.01em;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-weight: 700;
    text-align: left;
}

.botton-line::after {
    content: "";
    width: 60px;
    height: 4px;
    background: #00A6FF;
    position: absolute;
    left: 0;
    bottom: -13px;
    transform: none;
}

.product__price {
    font-size: 1.75rem;
    font-weight: 700;
    color: #000;
    margin-bottom: 0.5rem;
    padding: 15px;
}
.price {
    font-size: 35px;
    font-weight: 700;
    color: #00A6FF;
    font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif;
    margin: 0 0 22px;
}

.product__variants .product__variant {
  margin-bottom: 20px; 
}

.product__variant-select, .product__custom-field select {
    width: 100%;
    border: 1px solid #e2e5ea;
    background: #f6f7f9; 
    border-radius: 8px;
    padding: 17px 11px;
    font-size: 14px;
    color: #14171c;
    font-family: inherit;
}



select.form-control:not([size]):not([multiple]) {
    height: 3.2rem;
}

.product__custom-field input, .product__custom-field select, .product__custom-field textarea{
    line-height: 1.5;
    width: 100%;
    border: 1px solid #e2e5ea;
    background: #f6f7f9;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 14px;
    color: #14171c;
    font-family: inherit;
    height: 3.2rem;
}

.product__radio-label input[type=radio]{
    height:1.2rem
}

.product__actions-wrapper {
    display: flex;
    gap: 12px;
    margin-bottom: 18px;
}

.product__actions{
        flex: 1;
    display: flex;
    align-items: flex-end;
}

.product__actions button{
    height: 52px;
    border-radius: 10px;
}
.quantity-selector {
    max-width: 140px;
    display: flex;
    align-items: center;
    border: 1px solid #e2e5ea;
    border-radius: 8px;
    overflow: hidden;
    background: #f6f7f9;
}

.quantity-selector__btn {
    transition: .3s;
    cursor: pointer;
    width: 38px;
    height: 44px;
    background: #f6f7f9;
    border: none;
    font-size: 16px;
    cursor: pointer;
    color: #000;
}

.quantity-selector__input {
    margin: 0 -1px;
    width: 50px;
    height: 50px;
    text-align: center;
    border: none;
    border-left: 1px solid #e2e5ea;
    border-right: 1px solid #e2e5ea;
    font-size: 14px;
}





/* existing css  */

@media(min-width:760px){
  .product__variants {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

}

  /* ── Section-scoped design tokens from schema settings ── */
  #main-product-{{ section.id }} {
    --mp-accent:      {{ section.settings.accent_color      | default: '#00a6ff' }};
    --mp-accent-dark: {{ section.settings.arrow_hover_color | default: '#0088cc' }};
    --mp-arrow-color: {{ section.settings.arrow_color       | default: '#00a6ff' }};
    --mp-arrow-bg:    {{ section.settings.arrow_bg_color    | default: '#ffffff' }};
  }
  #main-product-{{ section.id }} .product__media-wrapper .swiper-button-next,
  #main-product-{{ section.id }} .product__media-wrapper .swiper-button-prev {
    color: var(--mp-arrow-color);
    background-color: var(--mp-arrow-bg);
  }
  #main-product-{{ section.id }} .product__media-wrapper .swiper-button-next:hover,
  #main-product-{{ section.id }} .product__media-wrapper .swiper-button-prev:hover {
    color: var(--mp-accent-dark);
  }
  /* Keep native select arrows visible always */
  .product__variant-select,
  .product__custom-field select {
    appearance: auto !important;
    -webkit-appearance: menulist !important;
    -moz-appearance: menulist !important;
    background-image: none !important;
  }
  /* Swiper core alignment */
  .swiper.product__media-main .swiper-wrapper { align-items: center; }
  .swiper.product__media-main .swiper-slide   { display: flex; align-items: center; justify-content: center; }
  .product__media-image                        { display: block; }
  .product-section .swiper                     { --swiper-navigation-size: 18px; }

  /* ── "WE CUSTOMIZE TO FIT YOUR BIKE" overlay badge ── */
  /* position:relative safety net — Swiper already sets this, belt-and-braces */
  .product__media-main .swiper-slide {
    position: relative;
  }
  
  .personalise-simplified-hide{ display: none; }

.product__customize-overlay {
  position: absolute;
  top: 2%;
  left: 3%;
  width: 49.5%;
  z-index: 2;
  pointer-events: none;
  line-height: 0;
  user-select: none;
}

.product__customize-overlay-img {
  width: 100%;
  height: auto;
  display: block;
  -webkit-user-drag: none;
  /* max-width: 210px; */
}

/* Never show on thumbnail strip */
.product__media-thumbs .product__customize-overlay {
  display: none !important;
}

@media (max-width: 749px) {
  .product__customize-overlay {
    width: 50%;
    top: 9%;
    left: 4%;
  }
}
  /* ── FIX B: keep Swiper nav above Fancybox transition layer ── */
  .product__media-main .swiper-button-next,
  .product__media-main .swiper-button-prev {
    z-index: 11;
  }


  /* ── Fix for image carousel whitespace ── */

/* 1. Lock the swiper container to a consistent height */
.swiper.product__media-main {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1; /* Creates a perfect square box */
  overflow: hidden;
  /* background: #f8f8f8; Light background while images load */
}

/* 2. Override align-items: center on the wrapper */
.swiper.product__media-main .swiper-wrapper {
  align-items: stretch !important; /* Force all slides to fill the container height */
  height: 120% !important; /* Ensure wrapper fills the container */
}

/* 3. Make each slide fill the container */
.swiper.product__media-main .swiper-slide {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100%;
  height: 100% !important; /* Fill the container */
}

/* 4. Make images fit inside without whitespace */
.swiper.product__media-main .product__media-image {
  width: 100%;
  height: 100% !important;
  object-fit: contain !important; /* Contain: shows entire image inside box */
  /* OR use object-fit: cover if you want it to fill without whitespace (will crop) */
  display: block;
}

/* 5. For videos, ensure they also fill */
.swiper.product__media-main .product__media-video {
  width: 100%;
  height: 100% !important;
}

.swiper.product__media-main .product__media-video video,
.swiper.product__media-main .product__media-video iframe {
  width: 100%;
  height: 100% !important;
  object-fit: contain;
}
.upload-preview-row{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.upload-preview-chip{
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--panel-2);
  flex: 0 0 44px;
}
.upload-preview-chip img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.upload-preview-chip .file-ext{
  display:flex;
  align-items:center;
  justify-content:center;
  height: 100%;
  font-size: 9px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .02em;
}
.upload-preview-remove{
  position: absolute;
  top: -5px;
  right: -5px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #1a1a1a;
  color: #fff;
  border: 1.5px solid #fff;
  font-size: 11px;
  line-height: 1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor: pointer;
  padding: 0;
}
.upload-preview-remove:hover{ background: #d43b3b; }

.tracker-step.is-skipped .tracker-bubble{ opacity:.35; }
.tracker-step.is-skipped .tracker-label{ opacity:.35; }
.tracker-na{ font-weight:400; font-size:10px; }


.colorpicker-group{ display:flex; flex-direction:column; gap:7px; }
.colorpicker{
  display:flex;
  align-items:center;
  gap: 14px;
}
.colorpicker-option{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 8px;
  flex-shrink:0;
}
.colorpicker-option-label{
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-align:center;
  white-space: nowrap;
}
.colorpicker-swatch-box{
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  border: 1.5px solid var(--line);
  background: var(--panel-2);
  cursor: pointer;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.colorpicker-swatch-box:hover,
.colorpicker-swatch-box:focus-within{
  border-color: var(--blue);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(30,111,224,.15);
}
.colorpicker-native{
  width: 100%;
  height: 100%;
  padding: 4px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  background: transparent;
}
.colorpicker-native::-webkit-color-swatch-wrapper{ padding: 0; border-radius: 9px; }
.colorpicker-native::-webkit-color-swatch{ border: none; border-radius: 9px; }

.colorpicker-badge{
  position: absolute;
  bottom: -7px;
  right: -7px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  pointer-events: none;
  box-shadow: 0 2px 5px rgba(16,17,20,.15);
}

.colorpicker-tooltip{
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: #16171b;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
  z-index: 5;
}
.colorpicker-tooltip::after{
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #16171b;
}
.colorpicker-swatch-box:hover .colorpicker-tooltip,
.colorpicker-swatch-box:focus-within .colorpicker-tooltip,
.colorpicker-swatch-box.is-tapped .colorpicker-tooltip{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.colorpicker-divider{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--muted-2);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  flex-shrink: 0;
}
.colorpicker-divider::before,
.colorpicker-divider::after{
  content: '';
  width: 1px;
  height: 14px;
  background: var(--line);
}
.colorpicker-divider span{ margin: 6px 0; }

.colorpicker-option-text{
  flex: 1;
  align-items: stretch;
}
.colorpicker-text-input{
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 14px;
  width: 100%;
  outline: none;
  transition: border-color .15s ease;
}
.colorpicker-text-input:focus{ border-color: var(--blue); }

@media (max-width: 420px){
  .colorpicker-option-label{ display:none; }
}

.payment-icon
 {
    height: 15px;
    width: auto;
}


.resume-card{
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: linear-gradient(180deg, #eef4ff 0%, #f5f8ff 100%);
  border: 1px solid #c9dcfc;
  border-radius: 16px;
  padding: 20px 22px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(30,111,224,.08);
}

.resume-card-top{
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.resume-icon{
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
}

.resume-card-text{ flex: 1; min-width: 0; }

.resume-title{
  font-size: 16px;
  font-weight: 800;
  color: var(--white);
  letter-spacing: -.01em;
}

.resume-subtitle{
  font-size: 13.5px;
  font-weight: 700;
  color: var(--blue);
  margin-top: 2px;
}

.resume-saved-time{
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 8px;
}
.resume-saved-time svg{ flex-shrink: 0; }

.resume-upload-note{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.5;
  padding-top: 14px;
  border-top: 1px solid rgba(30,111,224,.15);
}
.resume-upload-note svg{ flex-shrink: 0; margin-top: 1px; color: var(--blue); }

.resume-card-actions{
  display: flex;
  gap: 12px;
}

.resume-btn-primary{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--blue);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 13px 16px;
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
  transition: background .15s ease;
}
.resume-btn-primary:hover{ background: #1a63c9; }

.resume-btn-secondary{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #fff;
  color: var(--blue);
  border: 1.5px solid var(--blue);
  border-radius: 10px;
  padding: 13px 16px;
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
  transition: background .15s ease;
}
.resume-btn-secondary:hover{ background: var(--blue-soft); }

@media (max-width: 480px){
  .resume-card-actions{ flex-direction: column; }
  .product__info.product-main-wrapper {
    border:0!important
  }
  .product__info {
    padding:0
  }
}


.info-tabs-card{
      margin-top: 0px;
    margin-bottom: 30px;
    padding-top: 15px;
    border-top: 1px solid var(--line-soft);
}

.info-tabs-nav{
 display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 4px;
}
.info-tabs-nav::-webkit-scrollbar{ display: none; }

.info-tab-btn{
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--muted);
  border-radius: 10px;
  padding: 12px 10px;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.3;
  white-space: normal;
  cursor: pointer;
  transition: all .15s ease;
}
.info-tab-btn:hover{ border-color: #c3cad6; color: var(--ink, #16171b); }
.info-tab-btn.is-active{
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

.info-tab-panel{ display: none; }
.info-tab-panel.is-active{ display: block; animation: infoFadeIn .2s ease; }
@keyframes infoFadeIn{ from{ opacity:0; transform: translateY(4px); } to{ opacity:1; transform: translateY(0); } }

.info-tab-heading{
  font-size: 18px;
  font-weight: 800;
  color: var(--white);
  margin: 0 0 10px;
  letter-spacing: -.01em;
}
.info-tab-body p{
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.6;
  margin: 0 0 14px;
}

/* Checklist (Why Choose Un4seen) */
.info-checklist{
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.info-checklist li{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  color: var(--white);
  line-height: 1.5;
}
.info-checklist svg{ flex-shrink: 0; margin-top: 2px; }

/* Process steps (Design Process) */
.info-process-list{
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  counter-reset: info-step;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.info-process-list li{
  counter-increment: info-step;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 13.5px;
  color: var(--white);
  line-height: 1.5;
}
.info-process-list li::before{
  content: counter(info-step);
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.info-callout{
  display: flex;
  gap: 10px;
  background: var(--blue-soft);
  border: 1px solid rgba(30,111,224,.2);
  border-radius: var(--radius-sm);
  padding: 13px 15px;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.55;
  margin-bottom: 12px;
}
.info-callout svg{ flex-shrink: 0; margin-top: 1px; color: var(--blue); }

/* Shipping columns */
.info-shipping-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 18px;
}
@media (max-width: 560px){
  .info-shipping-grid{ grid-template-columns: 1fr; }
}
.info-shipping-col{
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 16px;
}
.info-shipping-col-title{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--white);
  margin-bottom: 10px;
}
.info-shipping-col ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.info-shipping-col li{
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.5;
  padding-left: 14px;
  position: relative;
}
.info-shipping-col li::before{
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--blue);
}

.info-rush-box{
  background: linear-gradient(180deg, #eef4ff 0%, #f5f8ff 100%);
  border: 1px solid #c9dcfc;
  border-radius: var(--radius-sm);
  padding: 18px;
}
.info-rush-title{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 800;
  color: var(--white);
  margin-bottom: 8px;
}
.info-rush-box p{ font-size: 12.5px; color: var(--muted); margin: 0 0 8px; line-height: 1.55; }
.info-rush-box p:last-child{ margin-bottom: 0; }
@media (max-width: 480px){
  .info-tab-btn{ font-size: 11.5px; padding: 11px 6px; }
}
/* ---------- Trust bar (sits above the tabs) ---------- */
.trust-bar {
    display: flex;
    align-items: center;
    border: 1.5px solid var(--blue);
    border-radius: 12px;
    padding: 6px 10px;
    margin-bottom: 22px;
    gap: 5px;
}
.trust-bar-item{
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.trust-bar-item svg {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}
.trust-bar-item svg path {
    fill:#59b6fa;
}
.trust-bar-text{
  font-size: 10px;
  font-weight: 700;
  color: var(--white);
  line-height: 1.3;
}
.trust-bar-divider{
  width: 1px;
  align-self: stretch;
  background: var(--line);
  flex-shrink: 0;
}
@media (max-width: 480px){
  .trust-bar{ padding: 12px 10px; gap: 6px; }
  .trust-bar-text{ font-size: 10.5px; }
  .trust-bar-item svg{ width: 20px; height: 20px; }
}

/* ---------- Tabs: card style with chevron ---------- */
.info-tabs-nav{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 4px;
}

.info-tab-btn{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  background: var(--panel-2);
  border: none;
  color: var(--white);
  border-radius: 12px;
  padding: 16px 10px 12px;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.3;
  white-space: normal;
  cursor: pointer;
  transition: background .15s ease;
}
.info-tab-btn:hover{ background: #e8eaf0; }
.info-tab-btn.is-active{
  background: var(--blue-soft);
}

.info-tab-chevron{
  display: flex;
  transition: transform .2s ease;
  color: var(--blue);
}
.info-tab-btn.is-active .info-tab-chevron{
  transform: rotate(180deg);
}

@media (max-width: 480px){
  .info-tab-btn{ font-size: 11px; padding: 13px 6px 10px; }
}



/* customizer css  */
/* ── Main product preview ── */
.main-preview .media {
  max-width: 600px;  /* or 100% to fill the container */
  aspect-ratio: 12 / 9; /* or 2 / 1 for a wider look */
}

.main-preview .sc-layer {
  object-fit: cover; /* or contain – try both to see what looks best */
}

@media (min-width: 768px) {
  .main-preview .media {
    max-width: 700px; /* even bigger on desktop */
  }
}

@media (min-width: 1024px) {
  .main-preview .media {
    max-width: 860px; /* hero size */
  }
}
.main-preview .media {
  max-width: 100%;
  aspect-ratio: 11 / 9; /* adjust as needed */
}
.product__grid.main__product_template_grid{
  padding-top:30px
}

/* ── Preview trust icons ── */
.preview-trust-row {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.preview-trust-item {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  gap: 4px;
}

.preview-trust-item svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

img.seat-logo {
    width: 160px;
    position: absolute;
    top: 10px;
    left: 10px;
}

.product__gallery{
  position:relative
}