/* Product card — default + hover (design: centered info, pill badges, hover ATC) */

.product-card.product-card-border-shadow {
  overflow: visible;
  background: transparent;
}

.product-card.product-card-border-shadow .product-card__image {
  border-radius: var(--product-card-border-radius, 12px);
}

.product-card.product-card-overflow-hidden .product-card__image {
  border-radius: var(--product-card-border-radius, 12px);
}

.product-card__image-wrapper {
  isolation: isolate;
}

.product-card__image {
  border-radius: var(--product-card-border-radius, 12px);
  background-color: #f2f2f2;
}

.product-card__image .media {
  border-radius: inherit;
  background-color: #f2f2f2;
}

/* White studio product shots → blend into gray card background */
.product-card__image .media:not(.media-secondary):not(.product-card__model) :is(img, svg.placeholder) {
  mix-blend-mode: multiply;
}

/* Lifestyle / secondary image keeps natural colors */
.product-card__image .media-secondary,
.product-card__image .media-secondary :is(img, svg) {
  mix-blend-mode: normal;
  background-color: transparent;
}

.product-card.block-product-card {
  display: flex;
  flex-direction: column;
  /* height: 100%; */
}

.card-grid > .product-card,
.card-grid > * > .product-card {
  height: 100%;
}

.product-card__info {
  color: rgb(var(--color-text));
}

.product-card__info--below {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1 auto;
  gap: 8px;
  padding-block-start: 12px;
  text-align: center;
}

.product-card__extras {
  width: 100%;
  min-width: 0;
}

.product-card__extras:empty,
.product-card__extras:not(:has(.product-card__icons-item)) {
  display: none;
}

.product-card__info--below > * {
  width: 100%;
  max-width: 100%;
}

/*
  Visual order inside info: title → rating → price.
  Buy button is rendered outside this container (see info.html).
*/
.product-card__info--below > .product-card__title {
  order: 2;
}

.product-card__info--below > .product-card__price {
  order: 3;
}

.product-card__info--below > .product-card__buy-buttons {
  order: 4;
}

/* Product icons should appear above title (matches online card) */
.product-card__info--below > .product-card__product-icons {
  order: 1;
}

.product-card__info--below > :is(
  [class*="ssr-plugin-comment"],
  [class*="plugin-comment"],
  .shopline-app-block
):not(.product-card__title):not(.product-card__price):not(.product-card__buy-buttons) {
  order: 2;
  display: flex;
  justify-content: center;
  width: 100%;
}

.product-card__info--below > :not(.product-card__product-icons):not(.product-card__title):not(.product-card__price):not(.product-card__buy-buttons) {
  order: 2;
  display: flex;
  justify-content: center;
  width: 100%;
}

/* No hover tooltip — button already shows label (fixes PC stray popover) */
.product-card__buy-buttons theme-popover-content {
  display: none !important;
}

/* Below-info ATC: hidden on desktop */
.product-card__buy-buttons--below {
  position: static;
  inset: auto;
  display: none;
  width: 100%;
  flex-shrink: 0;
  padding: 0;
  pointer-events: auto;
}

.product-card > .product-card__info:not(.product-card__info--overlay) > .product-card__title {
  order: 2;
}

.product-card > .product-card__info:not(.product-card__info--overlay) > .product-card__price {
  order: 3;
  margin-bottom: 10px;
}

.product-card > .product-card__info:not(.product-card__info--overlay) > .product-card__buy-buttons {
  order: 4;
}

.product-card > .product-card__info:not(.product-card__info--overlay) > .product-card__product-icons {
  order: 1;
}

.product-card > .product-card__info:not(.product-card__info--overlay) > :not(.product-card__product-icons):not(.product-card__title):not(.product-card__price):not(.product-card__buy-buttons) {
  order: 2;
  display: flex;
  justify-content: center;
  width: 100%;
}

/* Keep title block height consistent across cards */
.product-card__title.line-clamp-2 {
  min-height: calc(1.3em * 2);
}

.product-card__title.line-clamp-1 {
  min-height: 1.3em;
}

.product-card__title.line-clamp-3 {
  min-height: calc(1.3em * 3);
}

.product-card__info--overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.product-card__info--overlay .product-card__hover-actions,
.product-card__info--overlay .wishlist_button,
.product-card__info--overlay .product-card__icon-btn {
  pointer-events: auto;
}

/* Secondary / model image swap */
.product-card__image .media-secondary,
.product-card__model {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}

.product-card__image .media-secondary :is(img, svg) {
  object-fit: cover;
}

.product-card__model {
  transition: opacity 0.3s ease;
}

product-item{
  display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
}

@media (pointer: fine) {
  .product-card__image-wrapper .media-secondary {
    transition: opacity 0.3s ease;
  }

  .product-card__image-wrapper:hover .media-secondary {
    opacity: 1;
    pointer-events: auto;
  }
}

/* Title */
.product-card__title {
  line-height: 1.3;
}

.product-card__title .link {
  text-decoration: none;
  background-image: none;
  font-weight: 600;
  color: rgb(var(--color-text));
}

.product-card__title .link:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Price */
.product-card__price .product-price {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  color: rgb(var(--color-text));
}

.product-card__price .product-price__item {
  color: rgb(var(--color-text)) !important;
  font-weight: 600;
  display: inline !important;
}

.product-card__price .product-price__item--compare {
  color: rgb(var(--color-text) / 0.45) !important;
  font-weight: 400;
  text-decoration: line-through;
}

.product-card__price .product-price__item--compare::after {
  content: none;
}

.product-card__price .product-price:has(> .product-price__item--compare) .product-price__item {
  color: rgb(var(--color-text)) !important;
}

/* Badges — top-left pills */
.product-card__image-wrapper .product-card__badges {
  position: absolute;
  inset-block-start: 12px;
  inset-inline-start: 12px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  width: auto;
  max-width: calc(100% - 72px);
  pointer-events: none;
}

.product-card__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-block: 6px;
  padding-inline: 12px;
  border: none;
  border-radius: 4px;
  background-color: rgb(45, 50, 65);
  color: #fff;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.product-card__badge-bestseller {
  border-radius: 4px;
  background-color: #2d3241;
  color: #fff;
}

.product-card__badge-new {
  border-radius: 4px;
  background-color: #c47880;
  color: #fff;
}

.product-card__badge-discount {
  border-radius: 4px;
  background-color: #8b3232;
  color: #fff;
}

.product-card__badge-soldout {
  background-color: rgb(var(--color-text) / 0.75);
  color: #fff;
}

/* Swatches — bottom-left so they don't clash with hover icons */
.product-card__image-wrapper .product-card__swatches {
  position: absolute;
  inset-block-start: auto;
  inset-block-end: 12px;
  inset-inline-start: 12px;
  inset-inline-end: auto;
  z-index: 3;
  width: auto;
  pointer-events: auto;
}

@media (pointer: fine) {
  .product-card__image-wrapper:hover .product-card__swatches {
    opacity: 0;
    pointer-events: none;
  }
}

.product-card__swatches.swatches--color .color-swatch {
  --swatch-size: 12px;
}

@media (pointer: fine) {
  .product-card__swatches .color-swatch:hover::before {
    inset: calc(var(--swatch-offset) * -1);
  }
}

.product-card__layer > * {
  pointer-events: auto;
}

/* Buy buttons / hover chrome */
.product-card__buy-buttons {
  position: absolute;
  inset: 0;
  padding: 0;
  pointer-events: none;
}

.product-card__hover-actions {
  position: absolute;
  inset-block-start: 12px;
  inset-inline-end: 12px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}

.product-card__hover-cart {
  position: absolute;
  inset-inline: 16px;
  inset-block-end: 16px;
  z-index: 4;
  display: flex;
  justify-content: center;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}

.product-card__icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #fff;
  color: rgb(var(--color-text));
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.12);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  pointer-events: auto;
  position: relative;
}

.product-card__hover-actions .wishlist_button {
  display: inline-flex;
  pointer-events: auto;
  z-index: 5;
  position: relative;
}

.product-card__hover-actions .wishlist_button .wishlist_button__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #fff;
  color: inherit;
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.12);
  cursor: pointer;
  pointer-events: auto;
}

/* Prefer theme heart; hide wishlist-app overlay duplicate on the same card */
.product-card:has(.wishlist_button) .product-list-collect-btn {
  display: none !important;
}

.product-card__hover-actions .wishlist_button :is(button, .product-list-collect-btn) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #fff;
  color: rgb(var(--color-text));
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.12);
  cursor: pointer;
}

.product-card__hover-actions .wishlist_button[active] .icon-wishlist,
.product-card__hover-actions .wishlist_button.is-active .icon-wishlist,
.product-card__hover-actions .wishlist_button[active] .icon-wishlist path,
.product-card__hover-actions .wishlist_button.is-active .icon-wishlist path {
  fill: currentColor;
  stroke: currentColor;
  color: #8b3232;
}

.product-card__icon-btn:hover,
.product-card__hover-actions .wishlist_button :is(button, .product-list-collect-btn):hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.16);
}

.product-card__icon-btn .button__spinner {
  position: absolute;
}

.product-card__icon-btn.loading,
.product-card__icon-btn[loading],
.product-card__icon-btn[aria-busy="true"] {
  pointer-events: none;
}

.product-card__add-btn,
.product-card__hover-cart .quickadd_button {
  --button-border-thickness: 0;
  --button-border-opacity: 0;
  --color-button-background: 255, 255, 255;
  --color-button-text: 17, 17, 17;
  width: 100%;
  max-width: 280px;
  min-height: 44px;
  height: auto;
  padding-block: 12px;
  padding-inline: 20px;
  margin: 0;
  border: none !important;
  border-radius: 8px;
  background: #fff !important;
  background-image: none !important;
  color: #111 !important;
  box-shadow: 0 2px 10px rgb(0 0 0 / 0.12);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  pointer-events: auto;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.product-card__add-btn:hover,
.product-card__add-btn:focus-visible,
.product-card__hover-cart .quickadd_button:hover,
.product-card__hover-cart .quickadd_button:focus-visible {
  --color-button-background: 0, 0, 0;
  --color-button-text: 255, 255, 255;
  background: #000 !important;
  background-image: none !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgb(0 0 0 / 0.2);
  transform: translateY(-1px);
}

.product-card__add-btn:hover *,
.product-card__add-btn:focus-visible *,
.product-card__hover-cart .quickadd_button:hover *,
.product-card__hover-cart .quickadd_button:focus-visible * {
  color: #fff !important;
}

.product-card__add-btn-label {
  display: inline;
}

.product-card__add-btn-icon {
  display: none;
}

.product-card__buy-buttons .product-list-collect-btn {
  position: absolute !important;
  inset: 0 !important;
  background: none;
  padding: 0;
}

.product-card__buy-buttons .product-list-collect-btn svg path {
  fill: currentColor;
}

.product-card__buy-buttons .compare_button .product-card__compare-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #111;
}

.product-card__buy-buttons .compare_button .icon-compare {
  display: block;
  width: 19px;
  height: 15px;
}

.product-card__buy-buttons .compare_button[active] .product-card__compare-icon,
.product-card__buy-buttons .compare_button[active] .icon-compare {
  color: #983940;
}

.product-card__buy-buttons .compare_button[active] .icon-compare path {
  stroke: currentColor;
}

.product-card__buy-buttons theme-popover-content {
  display: none !important;
}

.product-card__buy-buttons theme-popover-content::after {
  display: none !important;
}

/* Keep trigger button layout flat; do NOT flatten quick-add modal (breaks fullscreen popup). */
.product-card__buy-buttons :is(theme-popover, theme-product-form, theme-product-form > form) {
  display: contents;
}

.product-card__buy-buttons theme-quick-add-modal,
.product-card__buy-buttons theme-quick-add-modal > details {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.product-card__buy-buttons theme-quick-add-modal > details > summary {
  width: 100%;
  max-width: 280px;
  margin-inline: auto;
  list-style: none;
}

.product-card__buy-buttons theme-quick-add-modal > details > summary::-webkit-details-marker {
  display: none;
}

/* Hide overlay on the in-card trigger details only; body-mounted modal keeps its backdrop. */
.product-card__buy-buttons theme-quick-add-modal > details:not([data-mount-modal])::before {
  content: none;
}

@media (pointer: fine) {
  .product-card__image-wrapper:hover .product-card__hover-actions,
  .product-card__image-wrapper:focus-within .product-card__hover-actions {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .product-card__image-wrapper:hover .product-card__hover-cart,
  .product-card__image-wrapper:focus-within .product-card__hover-cart {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
}

/* Mobile add-to-cart — dedicated button below card info */
.product-card__mobile-atc {
  display: none;
  width: 100%;
}

.product-card__mobile-atc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 40px;
  padding-block: 10px;
  padding-inline: 12px;
  border: none !important;
  border-radius: 4px;
  background: #35513D !important;
  background-image: none !important;
  color: #fff !important;
  box-shadow: none;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}

.product-card__mobile-atc-btn:hover,
.product-card__mobile-atc-btn:focus-visible {
  background: #2a4030 !important;
  color: #fff !important;
}

.product-card__mobile-atc-btn--soldout {
  opacity: 0.65;
  pointer-events: none;
}

.product-card__mobile-atc theme-quick-add-modal,
.product-card__mobile-atc theme-product-form,
.product-card__mobile-atc theme-product-form > form,
.product-card__mobile-atc theme-quick-add-modal > details {
  display: block;
  width: 100%;
}

.product-card__mobile-atc theme-quick-add-modal summary {
  list-style: none;
  width: 100%;
  position: relative;
}

.product-card__mobile-atc theme-quick-add-modal summary::-webkit-details-marker {
  display: none;
}

.product-card__mobile-atc .button__spinner {
  position: absolute;
}

.product-card__mobile-atc-btn.loading .product-card__mobile-atc-label,
.product-card__mobile-atc-btn[loading] .product-card__mobile-atc-label,
.product-card__mobile-atc-btn[aria-busy="true"] .product-card__mobile-atc-label {
  opacity: 0;
}

/* Touch / small screens: image icons + info, then mobile ATC */
@media (max-width: 959px), (pointer: coarse) {
  .product-card.block-product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .product-card__image-wrapper {
    position: relative;
    flex-shrink: 0;
  }

  .product-card__image-wrapper .product-card__badges {
    position: absolute;
    inset-block-start: 8px;
    inset-inline-start: 8px;
    z-index: 3;
    gap: 4px;
    max-width: calc(100% - 56px);
  }

  .product-card__badge {
    padding-block: 4px;
    padding-inline: 8px;
    font-size: 10px;
  }

  /* Image overlay: keep wishlist/compare only; hide overlay ATC */
  .product-card__info--overlay .product-card__buy-buttons {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  .product-card__info--overlay .product-card__hover-cart,
  .product-card__info--overlay .product-card__add-btn,
  .product-card__info--overlay .quickadd_button {
    display: none !important;
  }

  .product-card__hover-actions {
    opacity: 1;
    transform: none;
    pointer-events: auto;
    inset-block-start: 8px;
    inset-inline-end: 8px;
    gap: 6px;
  }

  .product-card__icon-btn,
  .product-card__hover-actions .wishlist_button :is(button, .product-list-collect-btn),
  .product-card__hover-actions .wishlist_button .wishlist_button__trigger {
    width: 32px;
    height: 32px;
  }

  .product-card__info--below,
  .product-card > .product-card__info:not(.product-card__info--overlay) {
    flex: 1 1 auto;
    gap: 6px;
    padding-block-start: 10px;
  }

  /* Dedicated mobile ATC below info — hide legacy below buy-buttons block */
  .product-card__mobile-atc {
    display: block;
    margin-block-start: 10px;
    margin-top: auto;
  }

  .product-card__info--below .product-card__buy-buttons--below {
    display: none !important;
  }

  .product-card__title {
    font-size: 16px;
    line-height: 1.5;
  }

  .product-card__title.line-clamp-2 {
    min-height: calc(1.5em * 2);
  }

  .product-card__title.line-clamp-1 {
    min-height: 1.5em;
  }

  .product-card__title.line-clamp-3 {
    min-height: calc(1.5em * 3);
  }

  .product-card__title .link {
    font-size: 16px;
    font-weight: 700;
  }

  .product-card__price .product-price {
    gap: 6px;
  }

  .product-card__price .product-price__item {
    font-size: 1rem;
  }

  .product-card__price .product-price__item--compare {
    font-size: 0.875rem;
  }

  .product-card__add-btn-label {
    display: inline;
  }

  .product-card__add-btn-icon {
    display: none;
  }

  .product-card__image-wrapper .product-card__swatches {
    inset-block-end: 8px;
    inset-inline-start: 8px;
  }

  .product-card__buy-buttons theme-popover-content {
    display: none !important;
  }
}

/* Desktop: hover ATC on image; hide below duplicate */
@media (min-width: 960px) {
  .product-card__buy-buttons--below {
    display: none !important;
  }
}

/* Fallback: legacy layouts without --overlay / --below modifiers */
.product-card > .product-card__info:not(.product-card__info--overlay) {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: unset;
  gap: 8px;
  padding-block-start: 12px;
  text-align: center;
}

.product-card > .product-card__info:not(.product-card__info--overlay) > * {
  width: 100%;
  max-width: 100%;
}

.product-card__image-wrapper > .product-card__info:not(.product-card__info--overlay):not(.product-card__info--below) {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}