/**
 * Product Miniature Card Styles
 * Design based on Lovable mockup
 */

/********************
  Part - Card Container
********************/
.product-miniature {
  position : relative;
  margin   : 0;
  height   : 100%;
}

.product-miniature .thumbnail-container {
  height         : 100%;
  background     : var(--color-white-default);
  display        : flex;
  flex-direction : column;
  border-radius  : var(--radius-xl, 16px);
  overflow       : hidden;
  box-shadow     : 0 10px 30px rgba(9, 28, 52, 0.08);
  transition     : box-shadow 0.3s ease, transform 0.3s ease;
}

.product-miniature .thumbnail-container:hover {
  box-shadow : 0 20px 45px rgba(9, 28, 52, 0.12);
  transform  : translateY(-4px);
}

/********************
  Part - Image Wrapper
********************/
.product-miniature__image-wrapper {
  position     : relative;
  aspect-ratio : 1 / 1;
  overflow     : hidden;
  background   : var(--color-grey-default, #f3f5f7);
}

.product-miniature .thumbnail-container .product-thumbnail {
  position : relative;
  flex     : 0 0 auto;
  margin   : 0;
  display  : block;
  width    : 100%;
  height   : 100%;
}

.product-miniature img {
  display    : block;
  width      : 100%;
  height     : 100%;
  max-width  : 100%;
  object-fit : cover;
  transition : transform 0.5s ease;
}

.product-miniature .thumbnail-container:hover img {
  transform : scale(1.05);
}

.product-miniature .product-thumbnail.--lazyload {
  position       : relative;
  width          : 100%;
  height         : 100%;
  padding-bottom : 0;
}

.product-miniature .product-thumbnail.--lazyload picture {
  position : absolute;
  top      : 0;
  left     : 0;
  width    : 100%;
  height   : 100%;
}

/********************
  Part - Badges (top-left)
********************/
.product-miniature__badges {
  position  : absolute;
  top       : 12px;
  left      : 12px;
  z-index   : 5;
  display   : flex;
  flex-wrap : wrap;
  gap       : 6px;
}

.product-miniature .product-flags {
  display    : flex;
  flex-wrap  : wrap;
  gap        : 6px;
  margin     : 0;
  padding    : 0;
  list-style : none;
}

.product-miniature .product-flag {
  display        : inline-flex;
  align-items    : center;
  padding        : 4px 10px;
  font-size      : 0.75rem;
  font-weight    : 600;
  text-transform : initial;
  border-radius  : var(--radius-sm);
  background     : var(--color-primary);
  color          : var(--color-white-default);
}

.product-miniature .product-flag.new {
  background : var(--color-secondary);
}

.product-miniature .product-flag.on-sale,
.product-miniature .product-flag.discount {
  background : var(--color-primary);
  color      : var(--color-black-default, #091C34);
}

.product-miniature__badge {
  display       : inline-flex;
  align-items   : center;
  padding       : 4px 10px;
  font-size     : 0.75rem;
  font-weight   : 600;
  border-radius : var(--radius-sm);
}

.product-miniature__badge--promo {
  background : var(--color-primary);
  color      : var(--color-white-default);
}

/********************
  Part - Product Description
********************/
.product-miniature .product-description {
  flex           : 1 1 auto;
  position       : relative;
  background     : var(--color-white-default);
  width          : 100%;
  display        : flex;
  flex-direction : column;
  padding        : 1.25rem;
}

@media (max-width : 768px) {
  .product-miniature .product-description {
    padding : 0.75rem;
  }
}

/********************
  Part - Product Title
********************/
.product-miniature .product-title {
  text-align     : left;
  text-transform : none;
  padding        : 0;
  margin         : 0 0 0.5rem;
  line-height    : 1.35;
}

.product-miniature .product-title a {
  color              : var(--color-black-default, #091C34);
  font-size          : 0.825rem;
  text-decoration    : none;
  text-align         : left;
  font-weight        : 600;
  padding            : 0;
  display            : -webkit-box;
  -webkit-line-clamp : 2;
  -webkit-box-orient : vertical;
  overflow           : hidden;
  transition         : color 0.2s ease;
}

.product-miniature .thumbnail-container:hover .product-title a {
  color : var(--color-primary);
}

@media screen and (min-width : 640px) {
  .product-miniature .product-title a {
    font-size : 1rem;
  }
}

/********************
  Part - Manufacturer
********************/
.product-miniature .product-manufacturer {
  text-align    : left;
  margin-bottom : 0.5rem;
}

.product-miniature .product-manufacturer a {
  font-size       : 0.75rem;
  min-height      : auto;
  color           : var(--color-grey-font-default, #516765);
  text-transform  : uppercase;
  text-decoration : none;
  letter-spacing  : 0.05em;
  transition      : color 0.2s ease;
  padding         : 0;
}

.product-miniature .product-manufacturer a:hover {
  color : var(--color-primary);
}

/********************
  Part - Footer (Price + CTA)
********************/
.product-miniature__footer {
  margin-top     : auto;
  padding-top    : 1rem;
  border-top     : 1px solid hsl(210, 20%, 92%);
  display        : flex;
  flex-direction : column;
  gap            : 0.75rem;
}

/********************
  Part - Price
********************/
.product-miniature .product-price-and-shipping {
  margin     : 0;
  text-align : left;
  padding    : 0;
}

.product-miniature__prices {
  display        : flex;
  flex-direction : column;
  gap            : 2px;
}

.product-miniature .regular-price {
  font-size       : 0.8125rem;
  color           : var(--color-grey-font-default, #516765);
  text-decoration : line-through;
  opacity         : 0.8;
  font-weight     : 400;
}

.product-miniature .price {
  font-size   : 1.125rem;
  font-weight : 700;
  color       : var(--color-black-default);
}

.product-miniature .price--promo {
  color : var(--color-primary);
}

.product-miniature .price-tax-label {
  font-size   : 0.75rem;
  font-weight : 500;
  color       : var(--color-grey-font-default);
  margin-left : 0.25rem;
}

@media screen and (min-width : 640px) {
  .product-miniature .price {
    font-size : 1.25rem;
  }
}

.product-price-and-shipping .divided-format__price {
  position        : relative;
  color           : var(--color-black-default);
  font-size       : 1.25rem;
  font-weight     : 700;
  justify-content : flex-start;
  margin-top      : 0;
}

/********************
  Part - Add to Cart
********************/
.add-to-cart__wrapper {
  margin : 0;
}

.add-to-cart__wrapper form {
  font-size : 1rem;
  margin    : 0;
}

.add-to-cart-btn__wrapper {
  width : 100%;
}

.product-miniature .add-to-cart {
  display         : flex;
  justify-content : center;
  align-items     : center;
  gap             : 0.5rem;
  font-size       : 0.875rem;
  font-weight     : 600;
  text-transform  : none;
  line-height     : 1.5;
  text-align      : center;
  width           : 100%;
  padding         : 0.625rem 1rem;
  background      : var(--color-primary);
  color           : var(--color-white-default);
  border          : none;
  border-radius   : var(--radius-sm);
  cursor          : pointer;
  transition      : background 0.2s ease, transform 0.2s ease;
}

.add-to-cart:hover {
  background : var(--color-secondary);
}

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

.add-to-cart svg {
  width       : 16px;
  height      : 16px;
  flex-shrink : 0;
}

.add-to-cart-text {
  margin-left : 0;
}

.add-to-cart__wrapper .bwa__loader {
  font-size : 1.5rem;
}

/********************
  Part - See Combinations
********************/
.see-combinations__wrapper {
  margin : 0;
}

.see-combinations {
  display         : flex;
  justify-content : center;
  align-items     : center;
  font-size       : 0.875rem;
  font-weight     : 600;
  text-transform  : none;
  text-align      : center;
  padding         : 0.625rem 1rem;
  background      : transparent;
  color           : var(--color-primary);
  border          : 1px solid var(--color-primary);
  border-radius   : var(--radius-sm);
  text-decoration : none;
  transition      : background 0.2s ease;
}

.see-combinations:hover {
  background      : var(--color-secondary);
  text-decoration : none;
  color           : var(--color-white-default);
  border-color    : var(--color-secondary);
}

/********************
  Part - Highlighted Informations
********************/
.highlighted-informations {
  position        : absolute;
  bottom          : 0;
  left            : 0;
  right           : 0;
  padding         : 0.75rem;
  z-index         : 5;
  background      : rgba(255, 255, 255, 0.95);
  backdrop-filter : blur(4px);
  text-align      : center;
  transform       : translateY(100%);
  transition      : transform 0.3s ease;
  box-shadow      : 0 -4px 15px rgba(0, 0, 0, 0.1);
}

.product-miniature .thumbnail-container:hover .highlighted-informations {
  transform : translateY(0);
}

.highlighted-informations .quick-view {
  color           : var(--color-primary);
  font-size       : 0.875rem;
  font-weight     : 600;
  text-decoration : none;
}

.highlighted-informations .quick-view:hover {
  color : var(--color-secondary);
}

/********************
  Part - Variant Links
********************/
.variant-links {
  position   : relative;
  text-align : center;
  width      : 100%;
  padding    : 0.5rem 0;
  min-height : auto;
  background : transparent;
  top        : 0;
}

/********************
  Part - Second Image on Hover
********************/
@media (hover : none) {
  .product-miniature__img-secondary {
    display : none !important;
  }
}

@media (any-hover : hover) {
  .product-miniature .product-miniature__img-secondary {
    background : transparent;
    visibility : hidden;
    opacity    : 0;
    transition : opacity 0.4s ease;
    position   : absolute;
    top        : 0;
    left       : 0;
    width      : 100%;
    height     : 100%;
  }

  .product-miniature .thumbnail-container:hover .product-miniature__img-secondary {
    visibility : visible;
    opacity    : 1;
  }
}

/********************
  Part - Slider Images in Cover
********************/
.miniature-images {
  position : relative;
  width    : 100%;
  height   : 100%;
}

.miniature-images__container {
  display     : flex;
  align-items : center;
  width       : 100%;
  height      : 100%;
}

.swiper-miniature-images-btn {
  position      : absolute;
  top           : 50%;
  transform     : translateY(-50%);
  border-radius : 50%;
  height        : 32px;
  width         : 32px;
  z-index       : 2;
  visibility    : hidden;
  opacity       : 0;
  transition    : 0.3s ease;
  display       : none;
  background    : rgba(255, 255, 255, 0.9);
  border        : none;
  cursor        : pointer;
}

.swiper-miniature-images-btn.show-btn {
  display         : flex;
  align-items     : center;
  justify-content : center;
}

.swiper-miniature-images-prev {
  left : 8px;
}

.swiper-miniature-images-next {
  right : 8px;
}

.miniature-images__container:hover > .swiper-miniature-images-btn {
  visibility : visible;
  opacity    : 1;
}

.swiper-miniature-images-btn:hover {
  background : var(--color-white-default);
}

.product-miniature .product-thumbnail a {
  width   : 100%;
  height  : 100%;
  display : block;
}

/********************
  Part - Old discount container (hidden)
********************/
.discount-percentage-container {
  display : none;
}

.product-miniature .wishlist-button-add {
  display : none;
  margin  : 0 0 0 1.25rem;
}

.product-miniature:hover .wishlist-button-add {
  display : flex;
}

.wishlist-button-add {
  position   : absolute;
  margin     : 1.25rem;
  right      : 0;
  opacity    : 0.7;
  box-shadow : none !important;
}

.wishlist-button-add:hover {
  opacity : 1 !important;
  scale   : 1.1;
}

/********************
  Part - Wishlist Modal
********************/
.wishlist-modal .modal-dialog {
  max-width : 480px;
  margin    : 1rem auto;
}

.wishlist-modal .modal-content {
  border        : none;
  border-radius : var(--radius-lg);
  box-shadow    : 0 25px 50px rgba(var(--color-black-default-rgb, 9, 28, 52), 0.2);
  overflow      : hidden;
}

.wishlist-modal .modal-header {
  border-bottom : 1px solid var(--color-grey-default);
  padding       : 1.25rem 1.5rem;
  background    : var(--color-white-default);
}

.wishlist-modal .modal-header .modal-title {
  font-size      : 1.125rem;
  font-weight    : 700;
  color          : var(--color-black-default);
  text-transform : uppercase;
  letter-spacing : 0.5px;
  margin         : 0;
}

.wishlist-modal .modal-header .close {
  padding         : 0;
  margin          : 0;
  width           : 36px;
  height          : 36px;
  display         : flex;
  align-items     : center;
  justify-content : center;
  border-radius   : var(--radius-md);
  background      : var(--color-grey-default);
  color           : var(--color-grey-font-default);
  opacity         : 1;
  font-size       : 1.5rem;
  line-height     : 1;
  transition      : all 0.3s ease;
}

.wishlist-modal .modal-header .close:hover {
  background : var(--color-primary-90);
  color      : var(--color-primary);
}

.wishlist-modal .modal-body {
  padding    : 0;
  background : var(--color-white-default);
}

.wishlist-modal .modal-body .form-group {
  margin : 0;
}

.wishlist-modal .modal-body .form-control-label {
  display       : block;
  font-size     : 0.875rem;
  font-weight   : 600;
  color         : var(--color-black-default);
  margin-bottom : 0.5rem;
}

.wishlist-modal .modal-body .form-control {
  width         : 100%;
  padding       : 0.875rem 1rem;
  border        : 1px solid var(--color-grey-default);
  border-radius : var(--radius-md);
  font-size     : 0.9375rem;
  color         : var(--color-black-default);
  background    : var(--color-white-default);
  transition    : border-color 0.3s ease, box-shadow 0.3s ease;
}

.wishlist-modal .modal-body .form-control:focus {
  outline      : none;
  border-color : var(--color-primary);
  box-shadow   : 0 0 0 3px var(--color-primary-90);
}

.wishlist-modal .modal-body .form-control::placeholder {
  color : var(--color-grey-font-default);
}

/* Wishlist chooselist in modal */
.wishlist-modal .wishlist-chooselist {
  padding : 0;
}

.wishlist-modal .wishlist-list {
  list-style : none;
  margin     : 0;
  padding    : 0;
}

.wishlist-modal .wishlist-list-item {
  border-bottom : 1px solid var(--color-grey-default);
  transition    : background 0.3s ease;
}

.wishlist-modal .wishlist-list-item:last-child {
  border-bottom : none;
}

.wishlist-modal .wishlist-list-item:hover {
  background : var(--color-grey-default);
}

.wishlist-modal .wishlist-list-item p {
  margin     : 0;
  padding    : 1rem 1.5rem;
  font-size  : 0.9375rem;
  color      : var(--color-black-default);
  cursor     : pointer;
  transition : color 0.3s ease;
}

.wishlist-modal .wishlist-list-item:hover p {
  color : var(--color-primary);
}

.wishlist-modal .modal-footer {
  border-top      : 1px solid var(--color-grey-default);
  padding         : 1.25rem 1.5rem;
  background      : var(--color-grey-light);
  display         : flex;
  justify-content : flex-end;
  gap             : 0.75rem;
}

.wishlist-modal .modal-footer .btn {
  padding       : 0.75rem 1.5rem;
  border-radius : var(--radius-md);
  font-size     : 0.9375rem;
  font-weight   : 600;
  transition    : all 0.3s ease;
}

.wishlist-modal .modal-footer .btn-secondary,
.wishlist-modal .modal-footer .modal-cancel {
  background : var(--color-white-default);
  border     : 1px solid var(--color-grey-default);
  color      : var(--color-black-default);
}

.wishlist-modal .modal-footer .btn-secondary:hover,
.wishlist-modal .modal-footer .modal-cancel:hover {
  background   : var(--color-grey-default);
  border-color : var(--color-grey-default);
  color        : var(--color-black-default);
}

.wishlist-modal .modal-footer .btn-primary {
  background : var(--color-primary);
  border     : 1px solid var(--color-primary);
  color      : var(--color-white-default);
}

.wishlist-modal .modal-footer .btn-primary:hover {
  background   : var(--color-primary-40);
  border-color : var(--color-primary-40);
}

/* Add to new wishlist link in footer */
.wishlist-modal .modal-footer .wishlist-add-to-new {
  display         : inline-flex;
  align-items     : center;
  gap             : 0.5rem;
  padding         : 0;
  margin          : 0;
  background      : transparent;
  border          : none;
  color           : var(--color-primary);
  font-size       : 0.9375rem;
  font-weight     : 600;
  text-decoration : none;
  transition      : color 0.3s ease;
}

.wishlist-modal .modal-footer .wishlist-add-to-new:hover {
  color : var(--color-primary-40);
}

.wishlist-modal .modal-footer .wishlist-add-to-new i {
  font-size : 1.25rem;
}

/* Delete modal - danger state */
.wishlist-modal .btn-danger,
.wishlist-modal .modal-footer .btn-danger {
  background   : var(--color-tertiary);
  border-color : var(--color-tertiary);
  color        : var(--color-white-default);
}

.wishlist-modal .btn-danger:hover,
.wishlist-modal .modal-footer .btn-danger:hover {
  background   : #c0392b;
  border-color : #c0392b;
}

/* Modal backdrop */
.wishlist-modal.show {
  display         : flex !important;
  align-items     : center;
  justify-content : center;
}

.modal.wishlist-modal .modal-dialog {
  width : 100%;
}

/* Wishlist button heart colors */
.wishlist-button-add i {
  color      : #7a7a7a;
  transition : color 0.3s ease;
}

/* Active state (filled heart) - red */
.wishlist-button-add.--active i {
  color : #EF4343;
}

.wishlist-product-availability {
  display : none !important;
}

.wishlist-modal .modal-text {
  padding : 0.725rem 1.25rem;
}

@media (max-width : 575px) {
  .wishlist-modal .modal-dialog {
    margin : 0.5rem;
  }

  .wishlist-modal .modal-footer {
    flex-direction : column;
  }

  .wishlist-modal .modal-footer .btn,
  .wishlist-modal .modal-footer .wishlist-add-to-new {
    width           : 100%;
    justify-content : center;
  }
}