/**
 * Global Watch Product Card Styles
 *
 * This stylesheet contains the global styles for watch product cards.
 * These styles are shared across all product displays:
 * - Sliders (4 per row)
 * - Collection/Category pages (grid layout)
 * - Featured products
 * - Similar products
 *
 * @package Onviqa
 * @since 1.0.0
 */

/* ==========================================================================
   Global Product Card
   ========================================================================== */

.ksq-product-card {
  position: relative;
  flex-shrink: 0;
  width: 100%;
  max-width: 342px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* In grid layouts, allow cards to fill available space */
.only-collection__products .ksq-product-card,
.ksq-product-grid .ksq-product-card {
  width: 100%;
  max-width: 100%;
}

.ksq-product-card__link {
  display: flex;
  flex-direction: column;
  gap: 20px;
  text-decoration: none !important;
  color: inherit;
}

.ksq-product-card__link:hover,
.ksq-product-card__link:focus,
.ksq-product-card__link:active,
.ksq-product-card__link:visited {
  text-decoration: none !important;
  color: inherit;
}

.ksq-product-card__link *,
.ksq-product-card__link:hover * {
  text-decoration: none !important;
}

.ksq-product-card__title,
.ksq-product-card__review-text,
.ksq-product-card__price-current,
.ksq-product-card__discount {
  text-decoration: none !important;
}

.ksq-product-card__price-regular {
  text-decoration: line-through !important;
}

/* ==========================================================================
   Card Image Container
   ========================================================================== */

.ksq-product-card__image {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  background: #000000;
  border-radius: 16px;
  overflow: hidden;
}

/* Ensure image doesn't block buttons */
.ksq-product-card__image img {
  pointer-events: none;
}

/* Bottom gradient overlay */
.ksq-product-card__image::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 105px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 1.26%, #000000 57.14%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 100ms ease-out;
  z-index: 2;
}

/* Blinking/Shimmer light sweep effect */
.ksq-product-card__image::before {
  content: "";
  position: absolute;
  top: -20px;
  left: -250px;
  width: 210px;
  height: 382px;
  background: rgba(255, 255, 255, 0.2);
  filter: blur(40px);
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  transition: opacity 100ms ease-out;
}

.ksq-product-card:hover .ksq-product-card__image::before {
  opacity: 1;
  animation: ksqShimmerSweep 1.5s ease-in-out infinite;
}

@keyframes ksqShimmerSweep {
  0% {
    left: -250px;
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    left: calc(100% + 50px);
    opacity: 0;
  }
}

.ksq-product-card:hover .ksq-product-card__image::after {
  opacity: 1;
}

.ksq-product-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 100ms ease-out;
}

.ksq-product-card:hover .ksq-product-card__image img {
  transform: scale(1.05);
}

/* ==========================================================================
   Bestseller Badge
   ========================================================================== */

.ksq-product-card__badge-bestseller {
  position: absolute;
  top: 16px;
  left: 16px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 8px 16px;
  gap: 8px;
  height: 32px;
  background: #444444;
  border-radius: 100px;
  font-family:
    "Roboto Flex",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  color: #ffffff;
  z-index: 5;
  box-sizing: border-box;
}

.ksq-product-card__badge-bestseller svg {
  flex-shrink: 0;
}

/* ==========================================================================
   Wishlist Button
   ========================================================================== */

.ksq-product-card__wishlist {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: none;
  border-radius: 50%;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  transition: all 100ms ease-out;
  z-index: 5;
  color: #111111;
  /* Reset the UA button padding so the icon centres in the circle. */
  padding: 0;
  line-height: 0;
  box-sizing: border-box;
  /* The heart SVG is intrinsically 29px wide. As a flex item it gets
     min-width: auto, so it cannot shrink below min-content and stretches
     the button wider than it is tall, rendering the circle as an oval. */
  min-width: 0;
}

.ksq-product-card__wishlist:hover {
  transform: scale(1.1);
  box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.16);
}

.ksq-product-card__wishlist svg {
  width: 24px;
  height: 24px;
  display: block;
  transition: all 100ms ease-out;
}

/* Active wishlist state - filled heart */
.ksq-product-card__wishlist.is-active {
  background: #ff5100;
  color: #ffffff;
}

.ksq-product-card__wishlist.is-active svg {
  fill: #ffffff;
}

.ksq-product-card__wishlist.is-active svg path {
  stroke: #ffffff;
  fill: #ffffff;
}

.ksq-product-card__wishlist.is-active:hover {
  background: #e54900;
}

/* ==========================================================================
   Mobile Add to Cart Icon Button
   Hidden on desktop, visible on mobile - positioned bottom-right of image
   ========================================================================== */

.ksq-product-card__mobile-cart {
  display: none; /* Hidden on desktop */
  position: absolute !important;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  background: #ff5100;
  border: none;
  border-radius: 42px;
  cursor: pointer !important;
  transition: all 0.2s ease;
  z-index: 100 !important;
  color: #ffffff;
  /* Allow button to receive clicks even when inside anchor */
  pointer-events: auto !important;
}

/* Increase clickable area without changing visual size */
.ksq-product-card__mobile-cart::before {
  content: "";
  position: absolute;
  top: -10px;
  right: -10px;
  bottom: -10px;
  left: -10px;
  border-radius: 50%;
  pointer-events: auto !important;
}

.ksq-product-card__mobile-cart:hover,
.ksq-product-card__mobile-cart:active {
  background: #e54900;
  transform: scale(1.05);
}

.ksq-product-card__mobile-cart svg {
  /* Do not alter SVG size - use original from SVG library */
}

/* Loading state */
.ksq-product-card__mobile-cart.is-loading {
  pointer-events: none;
}

.ksq-product-card__mobile-cart.is-loading svg {
  display: none;
}

.ksq-product-card__mobile-cart.is-loading::after {
  content: "";
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: mobileCartSpin 0.8s linear infinite;
}

@keyframes mobileCartSpin {
  to {
    transform: rotate(360deg);
  }
}

/* Added state - green (after clicking add to cart) */
.ksq-product-card__mobile-cart.is-added {
  background: #22c55e;
}

.ksq-product-card__mobile-cart.is-added:hover {
  background: #16a34a;
}

/* In cart state - green (product already in cart on page load) */
.ksq-product-card__mobile-cart.is-in-cart {
  background: #22c55e;
}

.ksq-product-card__mobile-cart.is-in-cart:hover,
.ksq-product-card__mobile-cart.is-in-cart:active {
  background: #16a34a;
}

/* ==========================================================================
   Buy Now Button (appears on hover)
   ========================================================================== */

.ksq-product-card__buy-now {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 302px;
  height: 48px;
  background: #ff5100;
  border-radius: 12px;
  font-family:
    "Roboto Flex",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 21px;
  color: #ffffff;
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  border: none;
  cursor: pointer;
  transition:
    transform 100ms ease-out,
    opacity 100ms ease-out;
}

.ksq-product-card:hover .ksq-product-card__buy-now {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.ksq-product-card__buy-now:hover {
  background: #e54900;
}

.ksq-product-card__buy-now svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

/* ==========================================================================
   Card Content (Below Image)
   ========================================================================== */

.ksq-product-card__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0;
  gap: 16px;
  width: 100%;
}

/* Brand + Title wrapper */
.ksq-product-card__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0;
  gap: 8px;
  width: 100%;
}

/* Reviews Row */
.ksq-product-card__reviews {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0;
  gap: 8px;
}

.ksq-product-card__stars {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0;
}

.ksq-product-card__star {
  width: 18px;
  height: 18px;
  color: #e0e0e0; /* Empty star color */
  flex-shrink: 0;
}

.ksq-product-card__star.filled {
  color: #ffa033; /* Gold filled star color */
}

.ksq-product-card__star.half {
  color: #ffa033;
  /* Half star using clip-path */
  clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
}

.ksq-product-card__review-text {
  font-family:
    "Roboto Flex",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  color: #444444;
}

/* Product Title - 2 lines max */
.ksq-product-card__title {
  margin: 0;
  width: 100%;
  font-family:
    "Roboto Flex",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 18px;
  /* 1.35 rather than a flat 22px: the clamp box is exactly
     line-height x 2, so a tight value shaved the descenders off the
     second line (the "y" in "Fully", the "W" in "Watch"). */
  line-height: 1.35;
  color: #222222;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ==========================================================================
   Prices Row
   ========================================================================== */

.ksq-product-card__prices {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0;
  gap: 16px;
}

.ksq-product-card__price-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0;
  gap: 8px;
}

/* Current price */
.ksq-product-card__price-current,
.ksq-product-card__price-current .woocommerce-Price-amount,
.ksq-product-card__price-current bdi {
  font-family:
    "Roboto Flex",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 20px;
  line-height: 23px;
  color: #ff5100;
  text-decoration: none !important;
}

/* Regular/strikethrough price */
.ksq-product-card__price-regular,
.ksq-product-card__price-regular .woocommerce-Price-amount,
.ksq-product-card__price-regular bdi {
  font-family:
    "Roboto Flex",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 23px;
  color: #888888;
  text-decoration: line-through !important;
}

/* Discount Badge */
.ksq-product-card__discount {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 4px 12px;
  gap: 8px;
  background: rgba(255, 160, 51, 0.12);
  border: 1px solid rgba(255, 160, 51, 0.8);
  border-radius: 60px;
  font-family:
    "Roboto Flex",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 14px;
  color: #4e2104;
}

/* ==========================================================================
   Product Slider Layout
   ========================================================================== */

.ksq-product-slider {
  position: relative;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  padding: 0;
  background: #ffffff;
  overflow: visible;
}

.ksq-product-slider__container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

.ksq-product-slider__title {
  margin: 0;
  align-self: stretch;
  font-family: "DM Serif Display", Georgia, serif;
  font-style: normal;
  font-weight: 400;
  font-size: 35px;
  line-height: normal;
  text-align: center;
  color: #111111;
}

.ksq-product-slider__wrapper {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
}

.ksq-product-slider__track-container {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  overflow: hidden;
}

.ksq-product-slider__track {
  display: flex;
  gap: 24px;
  transition: transform 0.4s ease;
}

/* Above 1540px no width media query applied, so cards fell back to the base
   max-width of 342px. Four of those plus three 24px gaps need 1440px, but the
   track container is only 1400px (1440px cap minus the 20px side padding on
   .ksq-product-slider__container), so the 4th card was sliced to ~88%.
   Size the card from the container instead of a fixed px value. Scoped to
   1201px and up so the 3-across rule below keeps its own sizing. */
@media (min-width: 1201px) {
  .ksq-product-slider .ksq-product-card {
    width: calc((100% - 72px) / 4);
    max-width: none;
  }
}

/* Center products when fewer than visible count.
   "safe center" so that if the JS misjudges the visible-card count and the
   row is actually wider than its container, the overflow spills to the right
   (reachable) instead of both ways - plain "center" pushes the first card off
   the left edge where it can never be scrolled back into view. */
.ksq-product-slider__track.ksq-product-slider__track--centered {
  justify-content: safe center;
}

/* Navigation Arrows */
.ksq-product-slider__nav {
  position: absolute;
  top: 146px;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 1.5px solid #888888;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 10;
  color: #888888;
}

.ksq-product-slider__nav:hover {
  border-color: #111111;
  color: #111111;
}

.ksq-product-slider__nav:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.ksq-product-slider__nav--prev {
  left: -25px;
}

.ksq-product-slider__nav--next {
  right: -25px;
}

/* ==========================================================================
   Product Grid Layout (for collection/category pages)
   ========================================================================== */

.ksq-product-grid {
  position: relative;
  width: 100%;
  padding: 0;
  background: #ffffff;
}

.ksq-product-grid__container {
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

.ksq-product-grid__title {
  margin: 0 0 50px;
  font-family: "DM Serif Display", Georgia, serif;
  font-style: normal;
  font-weight: 400;
  font-size: 44px;
  line-height: normal;
  text-align: center;
  color: #111111;
}

.ksq-product-grid__items {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  justify-items: center;
}

.ksq-product-grid__items[data-columns="3"] {
  grid-template-columns: repeat(3, 1fr);
}

.ksq-product-grid__items[data-columns="2"] {
  grid-template-columns: repeat(2, 1fr);
}

/* ==========================================================================
   Responsive Styles
   ========================================================================== */

/* Below 1540px */
@media (max-width: 1540px) {
  /* .ksq-product-slider__container {
    padding: 0 50px !important;
  } */

  .ksq-product-slider__nav--prev {
    left: 0;
  }

  .ksq-product-slider__nav--next {
    right: 0;
  }

  .ksq-product-slider__nav {
    top: 50%;
    transform: translateY(-50%);
  }

  /* Cards in slider.
     min-width must stay below the narrowest 4-across card this range can
     produce, or it overrides the calc() and the 4th card gets clipped by the
     track container. At the 1201px floor of this range the container is
     1201 - 40 (padding) = 1161px, so each card is (1161 - 72) / 4 = 272px.
     A 280px floor clipped the 4th card between 1201px and ~1232px. */
  .ksq-product-slider .ksq-product-card {
    width: calc((100% - 72px) / 4);
    min-width: 0;
  }

  .ksq-product-slider .ksq-product-card__image {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
  }
}

/* Tablet landscape */
@media (max-width: 1200px) {
  .ksq-product-slider {
    margin-left: 0;
    width: 100%;
  }

  /* .ksq-product-slider__container {
    padding: 0 40px !important;
  } */

  .ksq-product-slider__title {
    font-size: 30px;
  }

  .ksq-product-slider .ksq-product-card {
    width: calc((100% - 48px) / 3);
    min-width: 280px;
  }

  .ksq-product-slider .ksq-product-card__image {
    height: auto;
    aspect-ratio: 1;
  }

  .ksq-product-slider__track {
    gap: 24px;
  }

  .ksq-product-slider__nav {
    display: none;
  }

  .ksq-product-slider__track-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0; /* Remove container padding - track handles the 20px */
  }

  .ksq-product-slider__track-container::-webkit-scrollbar {
    display: none;
  }

  /* .ksq-product-slider__track {
    padding-left: 20px;
    padding-right: 20px;
  } */

  /* Grid layout */
  .ksq-product-grid__items {
    grid-template-columns: repeat(3, 1fr);
  }

  .ksq-product-grid__items[data-columns="4"] {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Tablet portrait */
@media (max-width: 991px) {
  .ksq-product-slider {
    margin-left: 0;
    width: 100%;
  }

  /* .ksq-product-slider__container {
    padding: 0 !important;
  } */

  .ksq-product-slider__title {
    font-size: 28px;
  }

  .ksq-product-slider .ksq-product-card {
    width: 280px;
    min-width: 280px;
  }

  .ksq-product-slider .ksq-product-card__image {
    height: 280px;
  }

  .ksq-product-card__badge-bestseller {
    padding: 6px 12px;
    font-size: 12px;
  }

  .ksq-product-card__wishlist {
    width: 36px;
    height: 36px;
  }

  .ksq-product-card__wishlist svg {
    width: 20px;
    height: 20px;
  }

  .ksq-product-card__content {
    gap: 12px;
  }

  .ksq-product-card__info {
    gap: 6px;
  }

  .ksq-product-card__review-text {
    font-size: 14px;
  }

  .ksq-product-card__star {
    width: 16px;
    height: 16px;
  }

  .ksq-product-card__title {
    font-size: 16px;
  }

  .ksq-product-card__prices {
    gap: 12px;
  }

  .ksq-product-card__price-current,
  .ksq-product-card__price-current .woocommerce-Price-amount,
  .ksq-product-card__price-current bdi,
  .ksq-product-card__price-regular,
  .ksq-product-card__price-regular .woocommerce-Price-amount,
  .ksq-product-card__price-regular bdi {
    font-size: 18px;
  }

  .ksq-product-card__buy-now {
    width: calc(100% - 32px);
  }

  .ksq-product-slider__track {
    padding-left: 0;
  }

  /* Grid layout */
  .ksq-product-grid__items {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .ksq-product-grid__items[data-columns="4"],
  .ksq-product-grid__items[data-columns="3"] {
    grid-template-columns: repeat(2, 1fr);
  }

  .ksq-product-grid .ksq-product-card {
    width: 100%;
  }

  .ksq-product-grid .ksq-product-card__image {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
  }
}

/* Mobile */
@media (max-width: 600px) {
  .ksq-product-slider {
    margin-left: 0;
    width: 100%;
  }

  .ksq-product-slider__title {
    font-size: 24px;
  }

  .ksq-product-slider .ksq-product-card {
    width: 260px;
    min-width: 260px;
  }

  .ksq-product-slider .ksq-product-card__image {
    height: 260px;
  }

  .ksq-product-card__prices {
    flex-wrap: wrap;
    gap: 8px;
  }

  /* Grid layout - 2 columns on mobile */
  .ksq-product-grid__items {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .ksq-product-grid__items[data-columns="4"],
  .ksq-product-grid__items[data-columns="3"],
  .ksq-product-grid__items[data-columns="2"] {
    grid-template-columns: repeat(2, 1fr);
  }

  .ksq-product-grid .ksq-product-card {
    width: 100%;
    max-width: 100%;
    margin: 0;
  }

  .ksq-product-grid .ksq-product-card__image {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
  }

  /* ==========================================================================
	   Mobile Product Card - Figma Specs (162px reference width)
	   ========================================================================== */

  /* Card layout - 12px gap between image and content */
  .ksq-product-card {
    gap: 12px;
  }

  .ksq-product-card__link {
    gap: 12px;
  }

  /* Image container - square with 8px border radius */
  .ksq-product-card__image {
    border-radius: 8px;
  }

  /* Wishlist button - 24x24px, 10px from edges */
  .ksq-product-card__wishlist {
    width: 24px;
    height: 24px;
    top: 10px;
    right: 10px;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.12);
  }

  .ksq-product-card__wishlist svg {
    width: 14.4px;
    height: 14.4px;
  }

  /* Bestseller badge - Figma specs */
  .ksq-product-card__badge-bestseller {
    padding: 4px 8px;
    gap: 4px;
    height: 18px;
    top: 10px;
    left: 10px;
    font-size: 8px;
    line-height: 9px;
    border-radius: 100px;
  }

  .ksq-product-card__badge-bestseller svg {
    width: 10px;
    height: 10px;
  }

  /* Content section - 8px gap between elements */
  .ksq-product-card__content {
    gap: 8px;
  }

  /* Info section (reviews + title) - 4px gap */
  .ksq-product-card__info {
    gap: 4px;
  }

  /* Reviews row - 4px gap */
  .ksq-product-card__reviews {
    gap: 4px;
  }

  /* Stars - 11x11px */
  .ksq-product-card__star {
    width: 11px;
    height: 11px;
  }

  /* Reviews text - 10px font, 12px line-height, color #444444 */
  .ksq-product-card__review-text {
    font-size: 10px;
    line-height: 12px;
    color: #444444;
  }

  /* Title - weight 500, color #222222.
     Unitless line-height so the clamp box scales with whatever font-size
     wins the cascade; the old flat 14px was tighter than the rendered text
     and clipped the descenders on the second line. */
  .ksq-product-card__title {
    font-size: 14px;
    line-height: 1.35;
    font-weight: 500;
    color: #222222;
  }

  /* Prices row - 10px gap */
  .ksq-product-card__prices {
    gap: 10px;
    flex-wrap: nowrap;
  }

  .ksq-product-card__price-row {
    gap: 4px;
  }

  /* Current price - 12px font, weight 600, color #FF5100 */
  .ksq-product-card__price-current,
  .ksq-product-card__price-current .woocommerce-Price-amount,
  .ksq-product-card__price-current bdi {
    font-size: 12px;
    line-height: 14px;
    font-weight: 600;
    color: #ff5100;
  }

  /* Regular price - 12px font, weight 400, color #888888 */
  .ksq-product-card__price-regular,
  .ksq-product-card__price-regular .woocommerce-Price-amount,
  .ksq-product-card__price-regular bdi {
    font-size: 12px;
    line-height: 14px;
    font-weight: 400;
    color: #888888;
  }

  /* Discount badge - padding 3px 8px, 8px font, border-radius 60px */
  .ksq-product-card__discount {
    padding: 3px 8px;
    font-size: 8px;
    line-height: 9px;
    border-radius: 60px;
    background: rgba(255, 160, 51, 0.12);
    border: 1px solid rgba(255, 160, 51, 0.8);
    color: #4e2104;
  }

  /* Hide desktop Buy Now button on mobile */
  .ksq-product-card__buy-now {
    display: none !important;
  }

  /* Show mobile Add to Cart icon button */
  /* Button is OUTSIDE the anchor, positioned relative to article */
  /* Image is square (1:1), so image height = card width */
  /* Card width = (viewport - 2*padding - gap) / 2 */
  /* At 768px: padding=16px each side (32px total), horizontal gap=12px */
  /* Card width = (100vw - 32px - 12px) / 2 = (100vw - 44px) / 2 */
  /* Button top = card width - 10px margin - 32px button height */
  .ksq-product-card__mobile-cart {
    display: flex;
    right: 10px;
    bottom: auto;
    top: calc((100vw - 44px) / 2 - 42px);
  }
}

/* Small Mobile - under 480px - adjust cart button for smaller padding */
@media (max-width: 480px) {
  /* At 480px: padding=12px each side (24px total), horizontal gap=12px */
  /* Card width = (100vw - 24px - 12px) / 2 = (100vw - 36px) / 2 */
  .ksq-product-card__mobile-cart {
    top: calc((100vw - 36px) / 2 - 42px);
  }
}

/* Small Mobile - under 380px */
@media (max-width: 380px) {
  /* Keep Figma specs consistent - no changes from 600px breakpoint */
}

/* ==========================================================================
   Legacy Class Aliases (for backward compatibility)
   Map old ksq-similar-products classes to new ksq-product-card classes
   ========================================================================== */

/* Make similar products use the same card styles */
.ksq-similar-products .ksq-product-card {
  /* Cards in similar products section inherit slider styles */
}

/* Allow similar products section to use the global card */
.ksq-similar-products__card.ksq-product-card {
  /* Backward compatible with existing markup */
}

/* ==========================================================================
   WooCommerce Shop/Category Page Integration
   Overrides default WooCommerce product loop styles
   ========================================================================== */

/* WooCommerce product loop - uses our global card grid */
.woocommerce ul.products,
.woocommerce-page ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  justify-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
}

/* Reset WooCommerce default product li styles */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  clear: none !important;
}

/* Hide default WooCommerce product elements (replaced by our card) */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .star-rating,
.woocommerce ul.products li.product .onsale {
  /* These are handled by our global card template */
}

/* WooCommerce Shop Page Container */
.woocommerce .woocommerce-products-header {
  text-align: center;
  margin-bottom: 50px;
}

.woocommerce .woocommerce-products-header__title {
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 44px;
  font-weight: 400;
  color: #111111;
  margin: 0 0 16px;
}

/* WooCommerce Result Count & Ordering */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
  margin-bottom: 24px;
}

/* WooCommerce Pagination */
.woocommerce nav.woocommerce-pagination {
  margin-top: 60px;
  text-align: center;
}

.woocommerce nav.woocommerce-pagination ul {
  display: inline-flex;
  gap: 8px;
  border: none;
}

.woocommerce nav.woocommerce-pagination ul li {
  border: none;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1.5px solid #888888;
  border-radius: 50%;
  font-family: "Roboto Flex", sans-serif;
  font-size: 16px;
  color: #888888;
  text-decoration: none;
  transition: all 0.2s ease;
}

.woocommerce nav.woocommerce-pagination ul li a:hover {
  border-color: #111111;
  color: #111111;
}

.woocommerce nav.woocommerce-pagination ul li span.current {
  background: #ff5100;
  border-color: #ff5100;
  color: #ffffff;
}

/* Responsive WooCommerce Grid */
@media (max-width: 1200px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    grid-template-columns: repeat(3, 1fr);
    padding: 0 20px;
  }
}

@media (max-width: 991px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .woocommerce .woocommerce-products-header__title {
    font-size: 32px;
  }
}

@media (max-width: 600px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .woocommerce ul.products li.product .ksq-product-card {
    width: 100%;
    max-width: 342px;
    margin: 0 auto;
  }

  .woocommerce .woocommerce-products-header__title {
    font-size: 28px;
  }
}

/* ==========================================================================
   Wishlist Page Grid
   ========================================================================== */

.wishlist-page__grid.ksq-product-grid__items {
  padding: 0;
  grid-template-columns: repeat(auto-fit, minmax(280px, 330px));
  justify-content: center;
}

@media (max-width: 768px) {
  .wishlist-page__grid.ksq-product-grid__items {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 12px;
    justify-content: center;
  }

  .wishlist-page__grid.ksq-product-grid__items > * {
    width: calc(50% - 6px);
  }

  .wishlist-page .ksq-product-card__mobile-cart {
    top: calc((100vw - 60px) / 2 - 42px);
  }

  .ksq-product-slider__container {
    padding: 0 0;
  }
}

@media (max-width: 480px) {
  .wishlist-page .ksq-product-card__mobile-cart {
    top: calc((100vw - 60px) / 2 - 42px);
  }
}

.wishlist-page .ksq-product-card {
  position: relative;
}

/* ==========================================================================
   "You Might Also Like" Section
   Hip Hop category products displayed below Similar Products
   ========================================================================== */

.ksq-you-might-also-like {
  /* Add 100px gap from Similar Products section */
  margin-top: 100px;
  padding-bottom: 80px;
}

.ksq-you-might-also-like .ksq-product-slider__title {
  /* Match the same style as Similar Products */
  font-style: normal;
}

@media (max-width: 1024px) {
  .ksq-you-might-also-like {
    margin-top: 80px;
    padding-bottom: 60px;
  }
}

@media (max-width: 768px) {
  .ksq-you-might-also-like {
    margin-top: 60px;
    padding-bottom: 50px;
  }
}

@media (max-width: 480px) {
  .ksq-you-might-also-like {
    margin-top: 40px;
    padding-bottom: 40px;
  }
}

/* ==========================================================================
   Cross-Category Slider Section
   Styles moved to pdp-summary.css for proper specificity
   ========================================================================== */

/* ==========================================================================
   Recently Viewed Products Section
   Matches Similar Products block styling:
   - 1440px container for 4 products (342px × 4 + 24px × 3 = 1440px)
   - Arrows half inside container, half outside
   - 60px gap between title and products
   ========================================================================== */

.ksq-recently-viewed-section {
  margin-top: 100px;
  padding-bottom: 0;
}

/* Main section - full viewport width, allows arrow overflow */
.ksq-recently-viewed {
  position: relative;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  padding: 0;
  background: #ffffff;
  overflow: visible;
}

/* Container - 1440px centered, holds title and slider */
.ksq-recently-viewed .ksq-product-slider__container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px; /* 60px gap between title and products */
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
}

/* Section Title */
.ksq-recently-viewed .ksq-product-slider__title {
  margin: 0;
  align-self: stretch;
  font-family: "DM Serif Display", Georgia, serif;
  font-style: normal;
  font-weight: 400;
  font-size: 44px;
  line-height: 60px;
  text-align: center;
  color: #111111;
}

/* Slider wrapper - full width of container, arrows positioned here */
.ksq-recently-viewed .ksq-product-slider__wrapper {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
}

/* Track container - 1440px to fit exactly 4 cards */
.ksq-recently-viewed .ksq-product-slider__track-container {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  overflow: hidden;
}

/* Product track */
.ksq-recently-viewed .ksq-product-slider__track {
  display: flex;
  gap: 24px;
  transition: transform 0.4s ease;
}

/* Navigation Arrows - Half inside 1440px container, half outside */
/* Vertically centered on 342px product image: (342 - 50) / 2 = 146px */
.ksq-recently-viewed .ksq-product-slider__nav {
  position: absolute;
  top: 146px;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 1.5px solid #888888;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 10;
  color: #888888;
}

.ksq-recently-viewed .ksq-product-slider__nav:hover {
  border-color: #111111;
  color: #111111;
}

.ksq-recently-viewed .ksq-product-slider__nav:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Arrow positions: 50% inside 1440px container, 50% outside */
.ksq-recently-viewed .ksq-product-slider__nav--prev {
  left: -25px;
}

.ksq-recently-viewed .ksq-product-slider__nav--next {
  right: -25px;
}

/* Product cards - fixed 342px for 4-per-row in 1440px container */
.ksq-recently-viewed .ksq-product-card {
  width: 342px;
  flex-shrink: 0;
}

.ksq-recently-viewed .ksq-product-card__image {
  width: 342px;
  height: 342px;
}

/* ==========================================================================
   Responsive Styles for Recently Viewed
   ========================================================================== */

/* Below 1540px - add padding for arrows to be visible */
@media (max-width: 1540px) {
  .ksq-recently-viewed-section {
    margin-top: 80px;
  }

  /* Keep the full-bleed (100vw) breakout so this section is NOT boxed inside
     the PDP's .woocommerce-container (24px padding). Without this it inherited
     24px from the container PLUS its own 20px = 44px, unlike the sibling
     sliders (similar-products) which stay full-bleed. The base rule already
     sets width:100vw + margin-left:calc(-50vw + 50%); we just don't cancel it. */
  .ksq-recently-viewed {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
  }

  .ksq-recently-viewed .ksq-product-slider__container {
    max-width: 100%;
    padding: 0 20px !important;
  }

  .ksq-recently-viewed .ksq-product-slider__nav--prev {
    left: 0;
  }

  .ksq-recently-viewed .ksq-product-slider__nav--next {
    right: 0;
  }

  .ksq-recently-viewed .ksq-product-slider__nav {
    top: 50%;
    transform: translateY(-50%);
  }

  .ksq-recently-viewed .ksq-product-card {
    width: calc((100% - 72px) / 4);
    min-width: 280px;
  }

  .ksq-recently-viewed .ksq-product-card__image {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
  }
}

/* Tablet landscape - 3 cards visible */
@media (max-width: 1200px) {
  .ksq-recently-viewed-section {
    margin-top: 60px;
    padding-bottom: 0;
  }

  /* Arrows are hidden here and the track scrolls, so the TRACK owns the 20px
     side gap (see rule below). Container padding is 0 so the two don't stack
     to 40px. Title needs its own inset since the container has none. */
  .ksq-recently-viewed .ksq-product-slider__container {
    gap: 40px;
    padding: 0 !important;
  }

  .ksq-recently-viewed .ksq-product-slider__title {
    font-size: 36px;
    line-height: 1.3;
    padding: 0 20px;
  }

  /* Hide arrows on tablet - use swipe */
  .ksq-recently-viewed .ksq-product-slider__nav {
    display: none;
  }

  .ksq-recently-viewed .ksq-product-slider__track-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0; /* Remove container padding - track handles the 20px */
  }

  .ksq-recently-viewed .ksq-product-slider__track-container::-webkit-scrollbar {
    display: none;
  }

  .ksq-recently-viewed .ksq-product-slider__track {
    padding-left: 20px;
    padding-right: 20px;
  }

  .ksq-recently-viewed .ksq-product-card {
    width: 280px;
    min-width: 280px;
  }

  .ksq-recently-viewed .ksq-product-card__image {
    width: 280px;
    height: 280px;
  }
}

/* Tablet portrait */
@media (max-width: 991px) {
  .ksq-recently-viewed .ksq-product-slider__container {
    gap: 32px;
    padding: 0 !important; /* Remove container padding - track handles the 20px */
  }

  .ksq-recently-viewed .ksq-product-slider__title {
    font-size: 32px;
  }

  .ksq-recently-viewed .ksq-product-card {
    width: 260px;
    min-width: 260px;
  }

  .ksq-recently-viewed .ksq-product-card__image {
    width: 260px;
    height: 260px;
  }
}

/* Mobile - Figma specs: 200px cards */
@media (max-width: 600px) {
  .ksq-recently-viewed-section {
    margin-top: 40px;
    padding-bottom: 0;
  }

  .ksq-recently-viewed .ksq-product-slider__container {
    gap: 24px;
    padding: 0 !important; /* Remove container padding - track handles the 20px */
  }

  .ksq-recently-viewed .ksq-product-slider__title {
    font-family: "DM Serif Display", serif;
    font-size: 22px;
    line-height: 26px;
    font-weight: 400;
    color: #111111;
    text-align: center;
  }

  .ksq-recently-viewed .ksq-product-slider__track {
    padding-left: 20px;
    padding-right: 20px;
    gap: 12px;
  }

  /* Card width - Figma specs (200px) */
  .ksq-recently-viewed .ksq-product-card {
    width: 200px !important;
    min-width: 200px !important;
    gap: 12px !important;
  }

  .ksq-recently-viewed .ksq-product-card__image {
    width: 200px !important;
    height: 200px !important;
    border-radius: 8px;
  }

  /* Bestseller badge - Figma: #444444 background */
  .ksq-recently-viewed .ksq-product-card__badge-bestseller {
    padding: 4px 8px;
    gap: 4px;
    height: 20px;
    font-size: 10px;
    line-height: 12px;
    font-weight: 400;
    border-radius: 100px;
    background: #444444;
    color: #ffffff;
    top: 10px;
    left: 10px;
  }

  .ksq-recently-viewed .ksq-product-card__badge-bestseller svg {
    width: 12px;
    height: 12px;
  }

  .ksq-recently-viewed .ksq-product-card__wishlist {
    width: 24px;
    height: 24px;
    top: 10px;
    right: 10px;
  }

  .ksq-recently-viewed .ksq-product-card__wishlist svg {
    width: 14.4px;
    height: 14.4px;
  }

  /* Cart button - Figma: top: 156px */
  .ksq-recently-viewed .ksq-product-card__mobile-cart {
    display: flex !important;
    position: absolute !important;
    top: 156px !important; /* 200px image - 32px button - 12px margin */
    bottom: auto !important;
    right: 12px !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 42px;
  }

  .ksq-recently-viewed .ksq-product-card__mobile-cart svg {
    width: 16px;
    height: 16px;
  }

  .ksq-recently-viewed .ksq-product-card__buy-now {
    display: none !important;
  }

  /* Content - 12px gap */
  .ksq-recently-viewed .ksq-product-card__content {
    gap: 12px !important;
  }

  /* Info - 6px gap */
  .ksq-recently-viewed .ksq-product-card__info {
    gap: 6px !important;
  }

  /* Stars - 14x14px, color #FFA033 */
  .ksq-recently-viewed .ksq-product-card__star {
    width: 14px !important;
    height: 14px !important;
    color: #ffa033 !important;
  }

  /* Review text - 12px font */
  .ksq-recently-viewed .ksq-product-card__review-text {
    font-size: 12px !important;
    line-height: 14px !important;
    color: #444444 !important;
  }

  /* Title - 14px font */
  .ksq-recently-viewed .ksq-product-card__title {
    font-size: 14px !important;
    line-height: 16px !important;
    font-weight: 500;
    color: #222222 !important;
  }

  /* Prices - Figma: row direction, 12px gap, nowrap */
  .ksq-recently-viewed .ksq-product-card__prices {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    padding: 0 !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 200px !important;
  }

  .ksq-recently-viewed .ksq-product-card__price-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    padding: 0 !important;
    gap: 6px !important;
    flex: none !important;
  }

  /* Current price - 16px font */
  .ksq-recently-viewed .ksq-product-card__price-current,
  .ksq-recently-viewed
    .ksq-product-card__price-current
    .woocommerce-Price-amount,
  .ksq-recently-viewed .ksq-product-card__price-current bdi {
    font-size: 16px !important;
    line-height: 19px !important;
    font-weight: 600;
    color: #ff5100 !important;
  }

  /* Regular price - 16px font */
  .ksq-recently-viewed .ksq-product-card__price-regular,
  .ksq-recently-viewed
    .ksq-product-card__price-regular
    .woocommerce-Price-amount,
  .ksq-recently-viewed .ksq-product-card__price-regular bdi {
    font-size: 16px !important;
    line-height: 19px !important;
    font-weight: 400;
    color: #888888 !important;
  }

  /* Discount badge - Figma: 53x18px */
  .ksq-recently-viewed .ksq-product-card__discount {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 3px 8px !important;
    gap: 8px !important;
    height: 18px !important;
    font-size: 10px !important;
    line-height: 12px !important;
    border-radius: 60px;
    flex: none !important;
    white-space: nowrap !important;
  }
}

/* ==========================================================================
   Skeleton Loading Cards
   Animated placeholder cards shown while products are loading
   ========================================================================== */

.ksq-product-card--skeleton {
  flex-shrink: 0;
  width: 342px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  pointer-events: none;
}

.ksq-product-card--skeleton .ksq-product-card__image-wrapper {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 16px;
  overflow: hidden;
}

.ksq-skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.5s ease-in-out infinite;
  border-radius: 4px;
}

.ksq-skeleton--image {
  width: 100%;
  height: 100%;
  border-radius: 16px;
}

.ksq-product-card--skeleton .ksq-product-card__content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Reviews skeleton - stars + text */
.ksq-skeleton--reviews {
  width: 140px;
  height: 18px;
}

/* Title skeleton - 2 lines */
.ksq-skeleton--title {
  width: 100%;
  height: 40px;
}

/* Price skeleton - price + discount */
.ksq-skeleton--price {
  width: 140px;
  height: 18px;
}

@keyframes skeletonShimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Skeleton card loading additional cards (appended to track) */
.ksq-product-card--loading {
  opacity: 0;
  animation: fadeInCard 0.3s ease forwards;
}

@keyframes fadeInCard {
  to {
    opacity: 1;
  }
}

/* Responsive skeleton cards */
@media (max-width: 1200px) {
  .ksq-product-card--skeleton,
  .ksq-product-card--skeleton .ksq-product-card__image-wrapper {
    width: 280px;
  }

  .ksq-product-card--skeleton .ksq-product-card__image-wrapper {
    height: 280px;
  }
}

@media (max-width: 768px) {
  /* Skeleton cards should fill grid cell width */
  .ksq-product-card--skeleton {
    width: 100%;
    max-width: 100%;
  }

  .ksq-product-card--skeleton .ksq-product-card__image-wrapper {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
  }
}

/* Mobile skeleton - match Figma product card specs */
@media (max-width: 600px) {
  .ksq-product-card--skeleton {
    width: 100%;
    gap: 12px; /* Figma: 12px gap between image and content */
  }

  .ksq-product-card--skeleton .ksq-product-card__image-wrapper {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    border-radius: 8px; /* Figma: 8px border radius */
  }

  .ksq-skeleton--image {
    border-radius: 8px;
  }

  .ksq-product-card--skeleton .ksq-product-card__content {
    gap: 8px; /* Figma: 8px gap in content */
  }

  /* Reviews skeleton - Figma: stars (55px) + gap (4px) + text */
  .ksq-skeleton--reviews {
    width: 100%;
    max-width: 141px; /* Figma: 141px total width */
    height: 12px; /* Figma: 12px line-height */
  }

  /* Title skeleton - Figma: 12px font, 14px line-height, 2 lines max */
  .ksq-skeleton--title {
    width: 100%;
    height: 28px; /* 2 lines × 14px */
  }

  /* Price skeleton - Figma: prices row with discount */
  .ksq-skeleton--price {
    width: 100%;
    max-width: 136px; /* Figma: 136px width */
    height: 15px; /* Figma: 15px height */
  }
}

/* ==========================================================================
   Add to Cart Button (for Wishlist page)
   ========================================================================== */

.ksq-product-card__add-to-cart-wrap {
  padding: 0 16px 16px;
  margin-top: -8px;
}

.ksq-product-card__add-to-cart {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 48px;
  background: #ff5100;
  border: none;
  border-radius: 12px;
  font-family:
    "Roboto Flex",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  color: #ffffff;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    transform 0.15s ease;
  text-decoration: none;
}

.ksq-product-card__add-to-cart:hover {
  background: #e54900;
  transform: translateY(-1px);
}

.ksq-product-card__add-to-cart:active {
  transform: translateY(0);
}

.ksq-product-card__add-to-cart:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.ksq-product-card__add-to-cart svg {
  flex-shrink: 0;
}

/* Loading state */
.ksq-product-card__add-to-cart.is-loading {
  pointer-events: none;
}

.ksq-product-card__add-to-cart.is-loading span {
  display: none;
}

.ksq-product-card__add-to-cart.is-loading::after {
  content: "";
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: addToCartSpin 0.8s linear infinite;
}

@keyframes addToCartSpin {
  to {
    transform: rotate(360deg);
  }
}

/* Added state */
.ksq-product-card__add-to-cart.is-added {
  background: #22c55e;
}

.ksq-product-card__add-to-cart.is-added:hover {
  background: #16a34a;
}

/* Select Options variant (for variable products) */
.ksq-product-card__add-to-cart--options {
  background: #1a1a1a;
}

.ksq-product-card__add-to-cart--options:hover {
  background: #333333;
}

/* Responsive */
@media (max-width: 768px) {
  .ksq-product-card__add-to-cart-wrap {
    padding: 0 12px 12px;
  }

  .ksq-product-card__add-to-cart {
    height: 44px;
    font-size: 14px;
    gap: 8px;
  }

  .ksq-product-card__add-to-cart svg {
    width: 16px;
    height: 16px;
  }
}