/* style.css — no inline styles; state handled via classes */

:root {
  --xpv-text: #111;
  --xpv-muted: #6b7280;
  --xpv-gray-300: #d1d5db;
  --xpv-gray-400: #9ca3af;
  --xpv-gray-500: #9ca3af;
  --xpv-white: #fff;

  --xpv-orange-500: #f97316;
  --xpv-accent: #f97316;
  --xpv-accent-hover: #f97316;

  --xpv-bg-selected: #F8F8FA;

  --xpv-radius-sm: 0px;
  --xpv-radius-md: 0px;
  --xpv-radius-lg: 0px;
  --xpv-radius-full: 9999px;

  --xpv-space-2: 8px;
  --xpv-space-3: 12px;
  --xpv-space-4: 16px;
  --xpv-space-6: 24px;

  --xpv-text-sm: 14px;
  --xpv-text-base: 16px;
  --xpv-text-lg: 18px;

  --xpv-transition: all .2s ease-in-out;
}

/* layout + spacing */
.xpv-section { margin-bottom: var(--xpv-space-6); }
.xpv-mb-3 { margin-bottom: var(--xpv-space-3); }
.xpv-mb-4 { margin-bottom: var(--xpv-space-4); }

/* text styles */
.xpv-label {
  color: var(--xpv-muted);
  font-size: var(--xpv-text-base);
  margin-bottom: var(--xpv-space-2);
}
.xpv-desc {
  color: var(--xpv-gray-400);
  font-size: var(--xpv-text-sm);
  line-height: 1.5;
}

/* grids */
.xpv-grid { display: grid; gap: var(--xpv-space-3); width: 100%; }
.xpv-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.xpv-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.xpv-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 767px) {
  .xpv-grid-2-sm { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* interactive elements base */
.xpv-btn,
.xpv-card,
.xpv-row-card {
  position: relative;
  font-weight: 600;
  border-radius: var(--xpv-radius-md)!important;
  transition: var(--xpv-transition)!important;
  background: var(--xpv-white)!important;
  border: 1px solid var(--xpv-gray-300)!important;
  color: var(--xpv-text)!important;
  border-width: 2px!important;
  padding: 0!important;
}

/* modifiers */
.xpv-btn--compact {
  min-width: 80px;
  padding: 0.75rem 1rem!important;            /* 0.75rem 1rem */
  text-align: center;
  display: inline-block;
}

.xpv-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}


.xpv-card--pad { padding: 12px 16px; }

.xpv-card--scale.is-selected { transform: scale(1); }

.xpv-card-centered { align-items: center; }

.xpv-row-card {
  display: flex;
  align-items: center;
  padding: var(--xpv-space-4)!important;
  border-width: 2px!important;
  border-radius: var(--xpv-radius-lg)!important;
  margin-bottom: var(--xpv-space-3)!important;
}

/* state classes */
.is-hovered { border-color: var(--xpv-accent-hover); }
.is-selected {
  border-color: var(--xpv-accent)!important;
  background: var(--xpv-bg-selected)!important;
}
.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* media */
.xpv-img-square {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  
}
.xpv-thumb {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: var(--xpv-radius-sm);
  margin-right: var(--xpv-space-4);
}
.xpv-img {
  width: 100%;
  height: auto;
  border-radius: var(--xpv-radius-sm);
  margin-bottom: 8px;
}

/* text blocks */
.xpv-caption, .xpv-price {
  text-align: center;
  padding: 8px 0;
  font-size: var(--xpv-text-sm);
}
.xpv-caption {
    font-weight: 600;
}
.xpv-title { font-size: var(--xpv-text-base); font-weight: 600; }
.xpv-subdesc { font-size: var(--xpv-text-sm); color: var(--xpv-gray-400); margin-top: 6px; }


/* checkmark badge */
.xpv-badge {
  position: absolute;
  top: -1px;
  right: -1px;
  width: 26px;
  height: 26px;
  background: var(--xpv-orange-500);
  color: var(--xpv-white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--xpv-transition);

}

.xpv-check {
  width: 16px;
  height: 16px;
  display: block;
  pointer-events: none;
}

/* zoom function */

/* === template-j preview + zoom === */
.xpv-img-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: var(--xpv-radius-sm); /* keep image corners consistent */
}

/* clickable zoom overlay (can be a <div> or <button>) */
.xpv-zoom-icon-wrap {
  position: absolute;
  bottom: 2px;
  left: 0px;
  width: 26px;
  height: 26px;
  background: var(--xpv-white) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--xpv-transition);
  z-index: 1;                       /* sit above image */
  outline: none;
}

.xpv-zoom-icon {
  width: 16px;
  height: 16px;
  color: var(--xpv-text);
}

/* preview modal */
.xpv-preview-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  cursor: zoom-out; /* hint user can close */
}

.xpv-preview-inner {
  background: var(--xpv-white);
  padding: 8px;
  border-radius: var(--xpv-radius-md); /* small rounding for the frame */
}

.xpv-preview-inner .xpv-preview-img {
  max-width: 400px;
  width: 100%;
  height: auto;
  border-radius: var(--xpv-radius-sm);
}

/* === template-j preview caption === */
.xpv-preview-caption {
  text-align: center;
  margin-top: 10px;
}

.xpv-preview-label {
  font-weight: 600;
  font-size: 1rem;
  color: var(--xpv-text);
  margin-bottom: 4px;
}

.xpv-preview-desc {
  font-size: 0.875rem;
  color: var(--xpv-text-light);
}
/* navigation */

/* Ensure scrollable container */
.x-p-v .container:has(> .v-slide-group) {
  /*height: 100vh;  */
  overflow-y: auto!important;
  position: relative!important; /* Needed for sticky to work inside */
  padding: 0!important;
}

/* === STEP NAV CONTAINER === */
.v-slide-group {
  
  width: 100%;
  background-color: white; /* Prevent content bleed-through */
  padding: 20px 0;
  overflow-x: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* IE/Edge */
}

.v-slide-group::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}

div[role=tablist].v-slide-group {
  display: none;
}


/* === HORIZONTAL BUTTONS === */
.v-item-group .v-slide-group__content > .v-btn {
  padding: 0.5rem 1.75rem;
  border-radius: 0;
  font-size: 0.875rem; /* text-sm */
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease;
  background-color: #fff;
}
.v-slide-group__content .v-btn__content {
    color: #111;
}

.v-item-group .v-slide-group__content > .v-btn:before {
    background-color: unset;
}

.v-item-group .v-slide-group__content > button.v-btn:hover {
  background-color: #d1d5db!important; /* hover:bg-gray-300 */
}

/* === ACTIVE STEP BUTTON === */
.v-item-group .v-slide-group__content > .v-btn.v-btn--active {
  background-color: #537D98!important;
color: #fff!important;
}


.v-slide-group__content > .v-btn.v-btn--active:last-of-type {
  background-color: black;

}
.v-slide-group__content > .v-btn.v-btn--active span, .v-slide-group__content > .v-btn.v-btn--active:last-of-type span {
  color: #fff!important;
}

/* --- Style the left/right arrow buttons --- */
.v-item-group .v-slide-group__prev button,
.v-item-group .v-slide-group__next button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 40px!important;
  min-width: unset!important;
  height: 40px!important;
  border-radius: 9999px;
  background-color: black;
  border: 1px solid #dddddd;
  color: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}
.v-slide-group__prev svg path,
.v-slide-group__next svg path {
  fill: #fff;

}
.v-slide-group__prev button:hover,
.v-slide-group__next button:hover {
  background-color: #f0f0f0!important;
}
.v-slide-group__prev button:hover svg path,
.v-slide-group__next button:hover svg path {
  fill: #000;
}

/* --- Position the buttons --- */
.v-slide-group__prev {
  position: absolute;
  left: 0.25rem; /* Adjust as needed */
}

.v-slide-group__next {
  position: absolute;
  right: 0.25rem; /* Adjust as needed */
}

/* --- Ensure container has relative positioning --- */
.v-slide-group {
  /*position: relative;*/
}

.v-tabs.v-tabs--grow {

}

/* --- Optional: prevent hidden overflow --- */
.v-slide-group__wrapper {
  overflow-x: auto;
  scroll-behavior: smooth;
  position: relative;
    /* Hide scrollbar for Chrome, Safari, and Opera */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

.v-slide-group__wrapper::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

/* === Remove inner margin from buttons (if exists) === */
.v-slide-group__content {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* website specific */




.xpv-desc, .xpv-label {
    color: var(--xpx-text)!important;
}
.xpv-label {
    font-weight: 600;
    }

.title-rating-price.xpv_price_top {
    display: none;
}



.theme--light.v-application, .theme--light.v-tabs-items {
    background: unset!important;
    }
    
.theme--light.v-application *, .theme--light.v-tabs-items * {
    
    }
    
.v-slide-group {
    background: unset!important;
    }
    
#xpv_request_pdf_btn {
    
    }

/* === Footer Navigation (xpv-footer) === */
.xpv-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}

.xpv-spacer {
  flex: 1;
}

.xpv-icon {
  width: 18px;
  height: 18px;
}

.xpv-btn-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  border-radius: var(--xpv-radius-md);
  transition: var(--xpv-transition);
  border: 1px solid var(--xpv-gray-300);
  background: var(--xpv-white);
  color: var(--xpv-text);
  cursor: pointer;
}

.xpv-btn-nav:hover {
  background: var(--xpv-bg-selected);
}

.xpv-btn-prev svg {
  transform: none;
}

.xpv-btn-next {
  border-color: var(--xpv-accent);
  color: var(--xpv-accent);
}

.xpv-btn-next:hover {
  background: var(--xpv-accent-hover);
  color: var(--xpv-white);
}

.xpv-btn-finish {
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  border: none;
  border-radius: var(--xpv-radius-md);
  background: #059669; /* emerald-600 */
  color: var(--xpv-white);
  cursor: pointer;
  transition: var(--xpv-transition);
}

.xpv-btn-finish:hover {
  background: #047857; /* emerald-700 */
}


/* options */

    
@media only screen and (max-width: 767px) {
  .xpv-grid-4 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}    

@media only screen and (max-width: 600px) {
    
    
    /* website specific */
    .expivi-product .product-entry-wrapper {
        min-width: unset!important;
        width: 100%;
    }
    .expivi_viewer_outer_container {
        width: 100%!important;
        height: 40vh!important;
        margin-bottom: 10px!important;
    }

    #viewer-container {
        height:40vh!important;
        max-height: 100%!important;
        
    }
    /* options container */
    #main .ct-container-full {
        padding-top: 0;
    }
    .v-application--wrap .x-p-v .container:has(> .v-slide-group), .v-application--wrap .x-p-v {

        overflow: visible!important; /* Needed for sticky to work inside */

}
    .v-slide-group {
        position: sticky!important;
        top: calc(40vh - 1px)!important;
        background-color: #fff!important;
        z-index:99!important;
    }
    
    .expivi-product .product-entry-wrapper .entry-summary {
    margin-inline-start: unset;
    width: 100%;
    }
    
    .single_add_to_cart_button, #xpv_request_pdf_btn {

    font-size: 0.8rem!important;
    }
     #xpv_request_pdf_btn {
         margin-left: 10px!important;
         padding: 5px 15px!important;
     }
    
    /* options */

    .xpv-preview-inner {
      max-width: 90vw;
      width: 90%;
      height: auto;
    }
}