/********************
  Product Page Layout
********************/

* #wrapper {
  background : var(--color-white-default);
}

.product__grid {
  width  : 100%;
  margin : 0 auto;
}

/********************
  Product Header
********************/
.product-page__header {
  display        : flex;
  flex-direction : column;
  gap            : 16px;
  padding-top    : 24px;
  margin-bottom  : 12px;
}

.product-page__back-btn {
  display         : inline-flex;
  align-items     : center;
  gap             : 8px;
  font-size       : 0.875rem;
  font-weight     : 600;
  color           : var(--color-black-default);
  text-decoration : none;
  padding         : 8px 14px;
  border          : 2px solid hsl(210 20% 90%);
  border-radius   : 5px;
  transition      : all 0.2s ease;
  width           : fit-content;
  white-space     : nowrap;
}

.product-page__back-btn:hover {
  background   : var(--color-grey-default);
  border-color : var(--color-primary);
  color        : var(--color-primary);
}

.product-page__back-btn svg {
  transition : transform 0.2s ease;
}

.product-page__back-btn:hover svg {
  transform : translateX(-4px);
}

/********************
  Breadcrumb
********************/
.product-breadcrumb {
  margin-top : 30px;
}

.product-breadcrumb__list {
  display     : flex;
  align-items : center;
  flex-wrap   : wrap;
  gap         : 8px;
  list-style  : none;
  padding     : 0;
  margin      : 0;
  font-size   : 0.875rem;
}

.product-breadcrumb__item {
  display     : flex;
  align-items : center;
}

.product-breadcrumb__link {
  color           : var(--color-grey-font-default);
  text-decoration : none;
  transition      : color 0.2s ease;
}

.product-breadcrumb__link:hover {
  color : var(--color-primary);
}

.product-breadcrumb__link--active {
  color         : var(--color-black-default);
  font-weight   : 500;
  max-width     : 200px;
  overflow      : hidden;
  text-overflow : ellipsis;
  white-space   : nowrap;
}

.product-breadcrumb__separator {
  color : var(--color-grey-font-default);
}

/********************
  Product Images Gallery
********************/
.product__images__wrapper {
  position : relative;
  padding  : 0;
}

.product-gallery {
  position : relative;
}

.product-gallery__container {
  position       : relative;
  display        : flex;
  flex-direction : column;
  width          : 100%;
  align-items    : center;
}

.product-gallery__main {
  position      : relative;
  aspect-ratio  : 1 / 1;
  background    : var(--color-grey-default);
  border-radius : 12px;
  overflow      : hidden;
}

.product-cover {
  width  : 100%;
  height : 100%;
}

.product-gallery__image {
  width      : 100%;
  height     : 100%;
  object-fit : cover;
}

.product-gallery__discount {
  position        : absolute;
  z-index         : 3;
  left            : 10px;
  top             : 10px;
  display         : flex;
  justify-content : center;
  align-items     : center;
  font-weight     : 600;
  font-size       : 13px;
  background      : var(--color-primary);
  color           : var(--color-white-default);
  border-radius   : var(--radius-sm);
  width           : calc(40px + (45 - 40) * ((100vw - 320px) / (1920 - 320)));
  padding         : 4px 10px;
}

.product-gallery__nav {
  position        : absolute;
  top             : 50%;
  transform       : translateY(-50%);
  width           : 40px;
  height          : 40px;
  border-radius   : 50%;
  background      : rgba(255, 255, 255, 0.8);
  backdrop-filter : blur(4px);
  border          : none;
  cursor          : pointer;
  display         : flex;
  align-items     : center;
  justify-content : center;
  opacity         : 0;
  transition      : opacity 0.3s ease, background 0.2s ease;
  z-index         : 10;
}

.product-gallery__main:hover .product-gallery__nav {
  opacity : 1;
}

.product-gallery__nav:hover {
  background : var(--color-white-default);
}

.product-gallery__nav--prev {
  left : 12px;
}

.product-gallery__nav--next {
  right : 12px;
}

.product-gallery__counter {
  position        : absolute;
  bottom          : 16px;
  left            : 50%;
  transform       : translateX(-50%);
  background      : rgba(255, 255, 255, 0.8);
  backdrop-filter : blur(4px);
  padding         : 4px 12px;
  border-radius   : 20px;
  font-size       : 0.875rem;
  font-weight     : 500;
}

.product-gallery__favorite {
  position        : absolute;
  top             : 16px;
  right           : 16px;
  width           : 40px;
  height          : 40px;
  border-radius   : 50%;
  background      : rgba(255, 255, 255, 0.8);
  backdrop-filter : blur(4px);
  border          : none;
  cursor          : pointer;
  display         : flex;
  align-items     : center;
  justify-content : center;
  transition      : all 0.2s ease;
  z-index         : 10;
}

.product-gallery__favorite:hover {
  background : var(--color-white-default);
  transform  : scale(1.1);
}

.product-gallery__favorite svg {
  color      : var(--color-black-default);
  transition : all 0.2s ease;
}

.product-gallery__favorite:hover svg,
.product-gallery__favorite.is-active svg {
  color : hsl(0, 65%, 50%);
  fill  : hsl(0, 65%, 50%);
}

/********************
  Product Thumbnails
********************/
.product-gallery__thumbnails {
  max-width      : 300px;
  margin-top     : 16px;
  padding-bottom : 8px;
}

.product-gallery__thumbnails-slide {
  width : 90px;
}

.product-gallery__thumb {
  flex-shrink   : 0;
  width         : 80px;
  height        : 80px;
  border-radius : 8px;
  overflow      : hidden;
  border        : 2px solid transparent;
  cursor        : pointer;
  padding       : 0;
  background    : var(--color-grey-default);
  transition    : all 0.2s ease;
}

.product-gallery__thumb:hover {
  border-color : var(--color-primary);
}

.product-gallery__thumb--active {
  border-color : var(--color-primary);
  box-shadow   : 0 0 0 3px rgba(var(--color-primary-base), 0.3);
}

.product-gallery__thumb img {
  width      : 100%;
  height     : 100%;
  object-fit : cover;
}

/********************
  Product Main Infos
********************/
.product__main-infos__wrapper {
  position : relative;
}

.product__main-infos {
  display        : flex;
  flex-direction : column;
}

.product__title {
  font-size   : 1.875rem;
  font-weight : 700;
  color       : var(--color-black-default);
  margin      : 0 0 8px;
  line-height : 1.2;
}

.product__reference {
  font-size      : 0.875rem;
  color          : var(--color-grey-font-default);
  text-transform : uppercase;
  letter-spacing : 0.1em;
  margin-bottom  : 16px;
  display        : block;
}

/********************
  Product Prices
********************/
.product-prices {
  padding        : 0;
  display        : flex;
  flex-direction : column;
  align-items    : flex-start;
  margin-bottom  : 24px;
}

.product-discount {
  margin-bottom : 8px;
}

.product-discount .regular-price {
  text-decoration : line-through;
  color           : var(--color-grey-font-default);
  font-size       : 1rem;
}

.product-price__current-price {
  display     : inline-block;
  color       : var(--color-black-default);
  font-size   : 1.875rem;
  line-height : normal;
  font-weight : 700;
}

.product-price__current-price .current-price-tax-label {
  font-size : 1rem;
}

#product .container-primary .swiper-container {
  width : 100%;
}

.has-discount .product-price__current-price {
  color : var(--color-primary);
}

.tax-shipping-delivery-label {
  font-size  : 0.8125rem;
  color      : var(--color-grey-font-default);
  margin-top : 8px;
}

/********************
  Product Description Short
********************/
.product__description-short {
  color         : var(--color-grey-font-default);
  font-size     : 0.9375rem;
  line-height   : 1.6;
  margin-bottom : 2rem;
}

/********************
  Product Variants
********************/
.product-variants {
  margin-bottom : 24px;
}

.product-variants-item {
  margin-bottom : 16px;
}

.product-variants-item .control-label {
  font-size     : 0.875rem;
  font-weight   : 600;
  color         : var(--color-black-default);
  margin-bottom : 8px;
  display       : block;
}

.product-variants-item select {
  width               : 100%;
  max-width           : 300px;
  padding             : 12px 40px 12px 16px;
  border              : 1px solid var(--color-grey-font-default);
  border-radius       : 5px;
  font-size           : 0.9375rem;
  background-color    : var(--color-white-default);
  background-image    : url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23516765' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position : right 12px center;
  background-repeat   : no-repeat;
  background-size     : 20px 20px;
  cursor              : pointer;
  appearance          : none;
  -webkit-appearance  : none;
  -moz-appearance     : none;
}

.product-variants-item select:focus {
  outline      : none;
  border-color : var(--color-primary);
}

.product-variants-item ul {
  display    : flex;
  flex-wrap  : wrap;
  gap        : 8px;
  list-style : none;
  padding    : 0;
  margin     : 0;
}

.product-variants-item .input-container {
  position : relative;
}

.product-variants-item .input-container label {
  display : block;
  cursor  : pointer;
}

.product-variants-item .input-container input {
  position : absolute;
  opacity  : 0;
  width    : 0;
  height   : 0;
}

.product-variants-item .color {
  display       : block;
  width         : 36px;
  height        : 36px;
  border-radius : 50%;
  border        : 2px solid var(--color-grey-default);
  cursor        : pointer;
  transition    : all 0.2s ease;
  box-shadow    : inset 0 0 0 2px var(--color-white-default);
}

.product-variants-item .color:hover {
  border-color : var(--color-grey-font-default);
}

.product-variants-item input:checked + .color {
  border-color : var(--color-primary);
  box-shadow   : inset 0 0 0 2px var(--color-white-default), 0 0 0 2px var(--color-primary);
}

/********************
  Product Add to Cart
********************/
.product-add-to-cart__row {
  display        : flex;
  flex-direction : column;
  gap            : 16px;
  width          : 100%;
  margin-bottom  : 32px;
}

.product-quantity {
  display         : flex;
  align-items     : center;
  justify-content : center;
}

.product-quantity__selector {
  display       : flex;
  align-items   : center;
  border        : 1px solid var(--color-grey-default);
  border-radius : 5px;
  overflow      : hidden;
  width         : min-content;
  background    : var(--color-white-default);
}

.product-quantity__btn:focus {
  outline : none;
}

.product-quantity__btn {
  width           : 48px;
  height          : 56px;
  display         : flex;
  align-items     : center;
  justify-content : center;
  background      : transparent;
  border          : none;
  cursor          : pointer;
  transition      : background 0.2s ease;
}

.product-quantity__btn:hover:not(:disabled) {
  background : var(--color-grey-default);
}

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

.product-quantity__btn svg {
  width  : 16px;
  height : 16px;
}

.product-quantity__input {
  width           : 56px;
  height          : 56px;
  text-align      : center;
  font-size       : 1.125rem;
  font-weight     : 600;
  border          : none;
  background      : transparent;
  -moz-appearance : textfield;
  padding         : 0;
}

.product-quantity__input:focus {
  outline : none;
}

.product-quantity__input::-webkit-outer-spin-button,
.product-quantity__input::-webkit-inner-spin-button {
  -webkit-appearance : none;
  margin             : 0;
}

/* Hide Bootstrap TouchSpin elements */
.bootstrap-touchspin,
.input-group-btn-vertical,
.bootstrap-touchspin-prefix,
.bootstrap-touchspin-postfix {
  display : none !important;
}

.input-group.bootstrap-touchspin {
  display : block !important;
}

.input-group.bootstrap-touchspin .product-quantity__input {
  display : block !important;
}

.add {
  flex : 1;
}

.add-to-cart {
  display         : flex;
  justify-content : center;
  align-items     : center;
  gap             : 10px;
  width           : 100%;
  padding         : 16px 32px;
  font-size       : 1rem;
  font-weight     : 600;
  background      : var(--color-primary);
  color           : var(--color-white-default);
  border          : none;
  border-radius   : 5px;
  cursor          : pointer;
  transition      : all 0.3s ease;
  box-shadow      : 0 4px 15px rgba(0, 0, 0, 0.15);
}

.add-to-cart:hover {
  background : var(--color-secondary);
  box-shadow : 0 10px 30px rgba(0, 0, 0, 0.25);
  transform  : translateY(-2px);
}

.add-to-cart:disabled {
  opacity   : 0.5;
  cursor    : not-allowed;
  transform : none;
}

.add-to-cart svg {
  flex-shrink : 0;
}

/********************
  Product Availability
********************/
#product-availability {
  margin-top  : 16px;
  display     : inline-flex;
  align-items : center;
  gap         : 8px;
  font-weight : 600;
  font-size   : 0.875rem;
}

#product-availability .material-icons {
  font-size : 1.25rem;
}

#product-availability .product-available {
  color : #4cbb6c;
}

#product-availability .product-last-items,
#product-availability .product-unavailable {
  color : #ff9a52;
}

/********************
  Product Reassurance
********************/
.product__reassurance {
  display               : grid;
  grid-template-columns : 1fr;
  gap                   : 16px;
  padding-top           : 24px;
  border-top            : 1px solid var(--color-grey-default);
  margin-top            : 32px;
}

.product__reassurance-item {
  display     : flex;
  align-items : center;
  gap         : 12px;
  text-align  : left;
}

.product__reassurance-item svg {
  flex-shrink : 0;
  color       : var(--color-primary);
}

.product__reassurance-text {
  display        : flex;
  flex-direction : column;
  gap            : 2px;
}

.product__reassurance-title {
  font-size   : 1rem;
  font-weight : 600;
  color       : var(--color-black-default);
  margin      : 0;
}

.product__reassurance-subtitle {
  font-size : 0.75rem;
  color     : var(--color-grey-font-default);
  margin    : 0;
}

/********************
  Product Flags
********************/
.product__images__wrapper .product-flags {
  position       : absolute;
  top            : 10px;
  right          : 10px;
  z-index        : 5;
  display        : flex;
  flex-direction : column;
  gap            : 8px;
}

.product-flags .product-flag {
  display       : inline-flex;
  align-items   : center;
  padding       : 6px 12px;
  font-size     : 0.75rem;
  font-weight   : 600;
  border-radius : 5px;
  background    : var(--color-primary);
  color         : var(--color-white-default);
}

/********************
  Responsive - Desktop
********************/
@media screen and (min-width : 640px) {
  .product-page__header {
    flex-direction  : row;
    align-items     : center;
    justify-content : space-between;
    margin-bottom   : 32px;
  }

  .product-breadcrumb {
    margin-top : 0;
  }

  .product-add-to-cart__row {
    flex-direction : row;
    align-items    : center;
  }

  .product-quantity__selector {
    margin-right : auto;
  }

  .add {
    flex : 1;
  }

  .product__reassurance {
    grid-template-columns : repeat(3, 1fr);
    text-align            : center;
  }

  .product__reassurance-item {
    flex-direction : column;
    text-align     : center;
  }

  .product__reassurance-text {
    text-align : center;
  }
}

/********************
  Product Details Section - Dark Background Tabs
  Design based on Lovable mockup
********************/

.product-details-section {
  background : var(--color-secondary);
  padding    : 64px 0;
  margin-top : 48px;
}

/********************
  Tabs Container
********************/
.product-details-tabs {
  width : 100%;
}

/********************
  Tabs Navigation
********************/
.product-details-tabs__nav {
  display       : flex;
  align-items   : center;
  border-bottom : 1px solid rgba(255, 255, 255, 0.2);
  margin-bottom : 32px;
  gap           : 0;
}

.product-details-tabs__tab {
  display         : inline-flex;
  align-items     : center;
  justify-content : center;
  white-space     : nowrap;
  padding         : 16px 24px;
  font-size       : 1rem;
  font-weight     : 500;
  color           : rgba(255, 255, 255, 0.7);
  background      : transparent;
  border          : none;
  border-bottom   : 2px solid transparent;
  cursor          : pointer;
  transition      : all 0.2s ease;
  margin-bottom   : -1px;
}

.product-details-tabs__tab:focus {
  outline : none;
}

.product-details-tabs__tab:hover {
  color : rgba(255, 255, 255, 0.9);
}

.product-details-tabs__tab--active {
  color        : var(--color-white-default);
  border-color : var(--color-primary);
}

/********************
  Tabs Content
********************/
.product-details-tabs__content {
  margin-top : 0;
}

.product-details-tabs__panel {
  display : none;
}

.product-details-tabs__panel--active {
  display : block;
}

/********************
  Description Tab
********************/
.product-details-tabs__description {
  max-width : none;
}

.product-details-tabs__text {
  color       : rgba(255, 255, 255, 0.8);
  font-size   : 1.125rem;
  line-height : 1.7;
}

.product-details-tabs__text p {
  margin-bottom : 16px;
}

.product-details-tabs__text p:last-child {
  margin-bottom : 0;
}

.product-details-tabs__text--muted {
  color       : rgba(255, 255, 255, 0.6);
  margin-top  : 16px;
  font-size   : 1rem;
  line-height : 1.6;
}

/********************
  Features/Caracteristiques Tab
********************/
.product-details-tabs__features {
  width : 100%;
}

.product-details-tabs__features-grid {
  display               : grid;
  grid-template-columns : 1fr;
  gap                   : 0;
}

.product-details-tabs__features-col {
  display        : flex;
  flex-direction : column;
}

.product-details-tabs__feature-row {
  display         : flex;
  justify-content : space-between;
  align-items     : center;
  padding         : 12px 0;
  border-bottom   : 1px solid rgba(255, 255, 255, 0.1);
}

.product-details-tabs__feature-label {
  color     : rgba(255, 255, 255, 0.6);
  font-size : 0.9375rem;
}

.product-details-tabs__feature-value {
  color       : var(--color-white-default);
  font-weight : 500;
  font-size   : 0.9375rem;
  text-align  : right;
}

/********************
  Attachments Tab
********************/
.product-details-tabs__attachments {
  display        : flex;
  flex-direction : column;
  gap            : 24px;
}

.product-details-tabs__attachment {
  padding       : 16px;
  background    : rgba(255, 255, 255, 0.05);
  border-radius : 8px;
}

.product-details-tabs__attachment-title {
  margin : 0 0 8px;
}

.product-details-tabs__attachment-title a {
  color           : var(--color-white-default);
  text-decoration : none;
  font-weight     : 600;
}

.product-details-tabs__attachment-title a:hover {
  color : var(--color-primary);
}

.product-details-tabs__attachment-desc {
  color         : rgba(255, 255, 255, 0.7);
  font-size     : 0.875rem;
  margin-bottom : 12px;
}

.product-details-tabs__attachment-link {
  color           : var(--color-primary);
  text-decoration : none;
  font-size       : 0.875rem;
  font-weight     : 500;
}

.product-details-tabs__attachment-link:hover {
  text-decoration : underline;
}

/********************
  Responsive - Tablet and up
********************/
@media screen and (min-width : 768px) {
  .product-details-tabs__features-grid {
    grid-template-columns : 1fr 1fr;
    gap                   : 0 48px;
  }

  .product-details-tabs__tab {
    padding : 16px 24px;
  }
}

/********************
  Responsive - Desktop
********************/
@media screen and (min-width : 1024px) {
  .product-details-section {
    padding    : 80px 0;
    margin-top : 64px;
  }

  .product-details-tabs__nav {
    margin-bottom : 40px;
  }
}


/********************
  Product Accessories Section
********************/
.product-accessories-section {
  padding-top : 80px;
  background  : var(--color-white-default);
}

.product-accessories__title {
  font-size   : 1.5rem;
  font-weight : 700;
  color       : #1a1a1a;
}

.product-accessories-slider {
  position : relative;
  padding  : 32px 0 80px;
}

/* Add to Cart Button */
.product-card-accessory__add-form {
  width : 100%;
}

.product-card-accessory__add-btn {
  width           : 100%;
  display         : inline-flex;
  align-items     : center;
  justify-content : center;
  gap             : 8px;
  padding         : 10px 12px;
  font-size       : 0.875rem;
  font-weight     : 600;
  border-radius   : 8px;
  border          : none;
  cursor          : pointer;
  background      : var(--color-accent, #f59e0b);
  color           : #fff;
  transition      : all 0.3s ease;
  box-shadow      : 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.product-card-accessory__add-btn:hover {
  transform  : translateY(-2px);
  box-shadow : 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.product-card-accessory__add-btn:disabled {
  opacity        : 0.5;
  cursor         : not-allowed;
  pointer-events : none;
}

.product-card-accessory__add-btn svg {
  width  : 16px;
  height : 16px;
}

/* Navigation Buttons */
.product-accessories-slider__navigation {
  position        : absolute;
  top             : 50%;
  left            : 0;
  right           : 0;
  transform       : translateY(-50%);
  display         : flex;
  justify-content : space-between;
  pointer-events  : none;
  z-index         : 10;
}

.product-accessories-slider__btn {
  width           : 44px;
  height          : 44px;
  border-radius   : 50%;
  background      : #fff;
  border          : 1px solid var(--color-border, #e5e7eb);
  cursor          : pointer;
  display         : flex;
  align-items     : center;
  justify-content : center;
  transition      : all 0.3s ease;
  pointer-events  : auto;
  box-shadow      : 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  color           : var(--color-foreground, #1a1a1a);
}

.product-accessories-slider__btn:hover {
  background   : var(--color-primary);
  color        : #fff;
  border-color : var(--color-primary);
}

.product-accessories-slider__btn--prev {
  margin-left : -5%;
}

.product-accessories-slider__btn--next {
  margin-right : -5%;
}

.product-accessories-slider__btn.swiper-button-disabled {
  opacity        : 0.3;
  cursor         : not-allowed;
  pointer-events : none;
}