/** Shopify CDN: Minification failed

Line 117:36 Unexpected "{"
Line 121:38 Unexpected "{"

**/
/* ============================================================
   TeeInBlue Form – Custom CSS Overrides
   ============================================================ */

/* ============================================================
   Personalziation and List of Players – Figma spec
   ============================================================ */


.tee-field--template .tee-field__header {
  display: none;
}

.tee-form-inputs{
    padding: 0px !important;
}

.tee-field--template .tee-row {
  display: inline-flex;
  width: 100%;
  padding: 4px;
  background: white;
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  box-sizing: border-box;
  gap: 8px;
}

.tee-radio {
    position: relative;
    display: inline-flex;
    margin: 8px 8px 0 0;
    /* background: var(--tee-radio-bg, #fff); */
    outline: 0px !important;
    border-radius: 8px;
    color: var(--tee-radio-color, inherit);
    max-width: 100%;
}

.tee-radio .active {
    outline-color: white !important;
    color: black !important;
    outline-width: 0px  !important;
    box-shadow: none  !important;
}


.tee-field--template .tee-radio {
  flex: 1 1 0;
  margin: 0;
  padding: 0;
  border-radius: 8px !important;
}

.tee-field--template .tee-checkbox-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.tee-field--template .tee-radio-label {
  display: flex;
  flex: 1 1 0;
  justify-content: center;
  align-items: center;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
  background: transparent;
  border: none;
}

.tee-field--template .tee-radio-label span {
  flex: 1 1 0;
  text-align: center;
  font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--Content-text-primary, #151B1B);
}

.tee-field--template .tee-radio.active .tee-radio-label,
.tee-field--template .tee-radio .tee-checkbox-input:checked + .tee-radio-label {
  background: var(--Fill-State-selected, #0A0C0D);
}

.tee-field--template .tee-radio.active .tee-radio-label span,
.tee-field--template .tee-radio .tee-checkbox-input:checked + .tee-radio-label span {
  color: var(--Content-text-primary-inverse, #FFFFFF);
}

.tee-field--template .tee-clipart-checkmark {
  display: none !important;
}

.tee-field--template .tee-radio:not(.active) .tee-radio-label:hover {
  background: rgba(10, 12, 13, 0.06);
}


/* ============================================================
   Name & Number Fields – Figma spec
   ============================================================ */

.s-personalization-name .tee-field, {
    flex: 0 0 68% !important;
}

.s-personalization-number .tee-field, {
    flex: 0 0 28% !important;
}

/* --- Labels --- */
.s-personalization-name .tee-field__heading span,
.s-personalization-number .tee-field__heading span {
  color: var(--Content-Components-Forms-text-label, #151B1B);
  font-size: 14px;
  font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 400;
  line-height: 20px;
}

/* --- Inputs --- */
.s-personalization-name .tee__input,
.s-personalization-number .tee__input {
  height: 28px;
  padding: 6px 12px;
  border: 1px solid rgba(10, 12, 13, 0.06);
  border-radius: 8px;
  outline: 0px solid rgba(255, 255, 255, 0);
  outline-offset: 0px;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  box-sizing: border-box;
  width: 100%;
}

.tee__input:focus-visible{
    outline: 0;
    box-shadow: 0 0 0 0px #fff, 0 0 0px 0px #4949494d;
}

.tee__input:focus, .tee__input:focus-visible {
    border-width: 0px;
    box-shadow: 0 0 0 0px #fff, 0 0 6px 2px #4949494d;
}

/* Placeholder */
.s-personalization-name .tee__input::placeholder,
.s-personalization-number .tee__input::placeholder {
  color: var(--Content-Components-Forms-text-placeholder, #8C9493);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

/* Hover */
.s-personalization-name .tee__input:hover,
.s-personalization-number .tee__input:hover {
  /*outline: 2px solid var(--Stroke-Surface-inverse-strong, white);
  outline-offset: -2px;*/
}

/* Focus */
.s-personalization-name .tee__input:focus,
.s-personalization-number .tee__input:focus {
  outline: 0px;
  outline-offset: 0px;
}

/* --- Hide character count (0/14) and range (1-99) --- */
.s-personalization-name .tee-field__total-characters,
.s-personalization-number .tee-field__total-characters {
  display: none;
}

/* --- Hide range hint "1 - 99" --- */
.s-personalization-number .tee-input-hint {
  display: none;
}

/* --- Hide max length warning --- */
.s-personalization-number .tee-maxlength-warning {
  display: none;
}

/* --- Helper text below Name field (+14,00€) --- */
.s-personalization-name .tee-field__input {
  position: relative;
}

.s-personalization-name .tee-field__input::after {
  content: '+14,90€';
  display: block;
  margin-top: 4px;
  color: var(--Content-text-tertiary, #6F7777);
  font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

/* --- Field spacing (gap between label and input) --- */
.s-personalization-name,
.s-personalization-number {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
}

.s-personalization-name .tee-field__header,
.s-personalization-number .tee-field__header {
  margin-bottom: 0 !important;
}

.s-personalization-name .tee-field__input,
.s-personalization-number .tee-field__input {
  width: 100%;
}

/* --- Remove spinner on number input --- */
.s-personalization-number .tee__input::-webkit-outer-spin-button,
.s-personalization-number .tee__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.s-personalization-number .tee__input[type='number'] {
  -moz-appearance: textfield;
}

/* ============================================================
   Badges Section – Figma spec (border on image)
   ============================================================ */

/* --- Section layout --- */
.s-personalization-badge {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
}

/* --- Label "Badges" --- */
.s-personalization-badge .tee-field__heading span {
  color: var(--Content-Components-Forms-text-label, #151B1B);
  font-size: 14px;
  font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 400;
  line-height: 20px;
}

.s-personalization-badge .tee-field__header {
  margin-bottom: 0;
}

/* --- Badge row --- */
.s-personalization-badge .tee-clipart-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 16px;
  row-gap: 12px;
}

/* --- Each badge column --- */
.s-personalization-badge .tee-clipart-col {
  flex: 0 0 80px !important;
  width: 80px !important;
  min-width: 80px !important;
  max-width: 80px !important;
  padding: 0;
}

.s-personalization-badge .tee-clipart {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
}

/* --- Hide radio input --- */
.s-personalization-badge .tee-checkbox-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* --- Label wrapper – transparent, just a column container --- */
.s-personalization-badge .tee-clipart-label {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 4px !important;
  width: 100% !important;
  background: none !important;
  border: none !important;
  outline: none !important;
  padding: 0 !important;
  cursor: pointer !important;
  position: unset !important;
}

/* --- Badge thumbnail – this gets the card styling --- */
.s-personalization-badge .tee-clipart-thumbnail {
  width: 80px !important;
  height: 80px !important;
  object-fit: contain;
  padding: 8px;
  background: var(--Fill-State-disabled-light, #F1F4F3);
  border-radius: 8px;
  box-sizing: border-box;
  transition: background 0.2s ease, outline 0.15s ease;
}

/* --- Badge label text (un-hide sr-only) --- */
.s-personalization-badge .tee-clipart-label__text {
  position: static !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  white-space: normal !important;
  display: block;
  align-self: stretch;
  /*color: #C4C9C8;*/
  font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  word-wrap: break-word;
}

/* --- Selected / active – image card --- */
.s-personalization-badge .tee-clipart.active .tee-clipart-thumbnail,
.s-personalization-badge .tee-clipart .tee-checkbox-input:checked + .tee-clipart-label .tee-clipart-thumbnail {
  /*background: var(--Fill-Surface-overlay, white);
  outline: 1px solid var(--Stroke-Components-Forms-focus, #0A0C0D);
  outline-offset: -1px;*/
}

/* --- Selected / active – label text --- */
.s-personalization-badge .tee-clipart.active .tee-clipart-label__text,
.s-personalization-badge .tee-clipart .tee-checkbox-input:checked + .tee-clipart-label .tee-clipart-label__text {
  color: var(--Content-Components-Forms-text-label, #151B1B);
}

/* --- Hide default checkmark SVG --- */
.s-personalization-badge .tee-clipart-checkmark {
  display: none !important;
}

/* --- Hover on unselected image --- */
.s-personalization-badge .tee-clipart:not(.active) .tee-clipart-thumbnail:hover {
  background: #E8EBEA;
}

/* --- Tooltip bubble – disable --- */
.s-personalization-badge .tee-clipart-bubble--enable::before,
.s-personalization-badge .tee-clipart-bubble--enable::after {
  display: none !important;
}


.s-personalization-badge .tee-clipart.active {
    border-color: white;
    border-width: 0px;
    box-shadow: var(--tee-clipart-active-box-shadow, 0 0 0px rgba(0, 0, 0, .2));
}

.s-personalization-badge .active img {
    border-color: var(--tee-active-color);
    border-width: var(--tee-clipart-active-border-width, 1px);
    box-shadow: var(--tee-clipart-active-box-shadow, 0 0 3px rgba(0, 0, 0, .2));
}

.s-personalization-badge .tee-clipart {
    border-radius: 3px !important; 
    border: 0px solid  #d6d6d6 !important;
}

.s-personalization-badge .tee-clipart:before{
  content: none !important;
}

.tee-campaign-form-footer{
  display:none;
}

.tee-price-addons {
    background-color: white !important;
    border: 0px solid white !important;
    border-radius: 0px !important;
    padding: 0px !important;
    margin-bottom: 10px !important;
}


/* ============================================================
   Badges Section – Figma spec (border on image)
   ============================================================ */

.s-personalization-hidden{
  display: none;
}

/* ============================================================
   Gallery slide height stabilization for the TeeInBlue slot
   ============================================================
   The 2nd PDP gallery slide always carries id="teeinblue-gallery"
   (see snippets/product-media.liquid). TIB injects a square mockup
   inside that slide, which is shorter than the surrounding portrait
   product images. Swiper runs with autoHeight: true (see
   assets/product-media.js), so the wrapper shrinks when the TIB
   slide becomes active. Pin every slide to the underlying media's
   aspect ratio so wrapper height stops depending on TIB, and float
   the TIB overlay so it can never re-shorten the slot. */

.m-product-media--item.media-type-image {
  aspect-ratio: var(--slide-aspect-ratio, 1);
}

#teeinblue-gallery {
  position: relative;
}

#teeinblue-gallery > .tee-gallery-content {
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
}

#teeinblue-gallery > .tee-gallery-content .tee-gallery,
#teeinblue-gallery > .tee-gallery-content .tee-slider,
#teeinblue-gallery > .tee-gallery-content .tee-slider__inner,
#teeinblue-gallery > .tee-gallery-content .tee-slider__track,
#teeinblue-gallery > .tee-gallery-content .tee-slide {
  width: 100% !important;
  height: 100% !important;
}

#teeinblue-gallery > .tee-gallery-content .tee-mockup-zoomable,
#teeinblue-gallery > .tee-gallery-content .tee-zoom-normal,
#teeinblue-gallery > .tee-gallery-content .tee-platform-mockup,
#teeinblue-gallery > .tee-gallery-content .tee-mockup-item {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}