/* ===== Hide SKU everywhere ===== */
.product-sku {
  display: none !important;
}

/* ===== Color Swatches ===== */
ul[name="Color"] li.color-swatch {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  padding: 0 !important;
  border: 2px solid #e5e7eb !important;
  position: relative !important;
  overflow: hidden !important;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease !important;
}

ul[name="Color"] li.color-swatch span {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
}

ul[name="Color"] li.color-swatch:hover {
  transform: scale(1.15) !important;
  border-color: #9ca3af !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

ul[name="Color"] li.color-swatch.active {
  border-color: #111827 !important;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #111827 !important;
}

ul[name="Color"] li.color-swatch::after {
  content: attr(data-color-name);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #1f2937;
  color: #fff;
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 10;
}

ul[name="Color"] li.color-swatch:hover::after {
  opacity: 1;
}

/* White / very light color swatches need an inner shadow for visibility */
ul[name="Color"] li.color-swatch.swatch-light {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12) !important;
}

ul[name="Color"] li.color-swatch.swatch-light.active {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12), 0 0 0 2px #fff, 0 0 0 4px #111827 !important;
}

/* ===== Add to Cart / Buy it now buttons =====
   Theme's Tailwind utilities live inside a CSS @layer, so their !important
   wins over unlayered !important regardless of selector specificity.
   background-image (painted on top of background-color) and
   -webkit-text-fill-color (painted on top of color) sidestep that fight
   since the theme's layered rules don't touch those properties. */
.btn-add-to-cart {
  background-image: linear-gradient(#ffffff, #ffffff) !important;
  border: 2px solid #111111 !important;
}

.btn-add-to-cart,
.btn-add-to-cart span,
.btn-add-to-cart i {
  -webkit-text-fill-color: #111111 !important;
}

.btn-add-to-cart:hover {
  background-image: linear-gradient(#f3f4f6, #f3f4f6) !important;
  border-color: #111111 !important;
}

.product-buttons .btn-buy-now {
  background-image: linear-gradient(#111111, #111111) !important;
  border: 2px solid #ffffff !important;
}

.product-buttons .btn-buy-now,
.product-buttons .btn-buy-now span,
.product-buttons .btn-buy-now i {
  -webkit-text-fill-color: #ffffff !important;
}

.product-buttons .btn-buy-now:hover {
  background-image: linear-gradient(#2a2a2a, #2a2a2a) !important;
  border-color: #ffffff !important;
}

/* ===== Add to Cart beside quantity selector =====
   Look Stan.js moves .btn-add-to-cart into .product-quantity so it can
   sit next to the stepper on the same row; this just lays out that row. */
.product-quantity {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 12px !important;
}

.product-quantity > span {
  flex: 0 0 100% !important;
}

.product-quantity .select-quantity-div {
  flex: 0 0 auto !important;
}

.product-quantity .btn-add-to-cart {
  /* flex-basis 0% (not auto) makes flex sizing win over the theme's
     "!w-full" utility, which otherwise forces this button to 100% width
     and pushes it onto its own line on mobile. */
  flex: 1 1 0% !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

/* Hide the cart icon so "Add to Cart" always fits on one line */
.btn-add-to-cart .ph-shopping-cart-simple {
  display: none !important;
}

/* ===== Desktop: put Buy now beside the quantity/Add to Cart row =====
   .product-quantity and .product-buttons are sibling containers, so this
   needs :has() to reach the shared parent <form> and switch it from a
   column stack to a row at the desktop breakpoint.

   display:contents unwraps BOTH containers so their children (stepper,
   Add to Cart, Buy now) become direct flex items of the form itself,
   all on one flat level. Keeping them as nested flex containers instead
   (flex row inside a flex row) hits a real browser quirk: a flex
   container that both auto-sizes AND has a flex-wrap:wrap child (the
   "Quantity:" label, forced to its own line via flex-basis:100%) can
   compute an intrinsic width far wider than its content actually needs,
   which was ballooning "Add to Cart" and shoving "Buy now" away with a
   large gap. Flattening to one level sidesteps that entirely.

   Mobile (below 768px) is unaffected — this block only fires at 768px+. */
@media (min-width: 768px) {
  form:has(> .product-quantity) {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 12px !important;
  }

  .product-quantity {
    display: contents !important;
  }

  .product-buttons {
    display: contents !important;
  }

  .product-quantity > span {
    flex: 0 0 100% !important;
  }

  .select-quantity-div {
    flex: 0 0 auto !important;
  }

  /* Equal flex-basis + equal grow makes both buttons share the row's
     remaining width (after the fixed 150px stepper) evenly. */
  .btn-add-to-cart {
    flex: 1 1 0% !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  .btn-buy-now {
    flex: 1 1 0% !important;
    width: auto !important;
    min-width: 0 !important;
  }
}

/* ===== Product listing cards (category pages, home page) =====
   Look Stan.js hides the merchant text badge and injects a computed
   "-N%" pill instead, moves the cart button into the image (stacked
   under the wishlist heart), and appends a swatch row under the price. */
.badge-name {
  display: none !important;
}

.product-card__badge {
  display: none !important;
}

.ls-discount-badge {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 40;
  background: #111111;
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  line-height: 1.3;
}

.product-card__cta-wrapper {
  display: none !important;
}

/* Wishlist heart sits higher, cart icon sits lower, both circular over the image */
.add-to-wishlist {
  bottom: 48px !important;
}

.product-card__image-wrapper .product-card__cta {
  position: absolute !important;
  z-index: 40;
  right: 8px;
  bottom: 8px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  height: 32px !important;
  width: 32px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  color: #111111 !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.product-card__cta i {
  font-size: 16px !important;
}

.ls-card-swatches {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.ls-card-swatches .ls-swatch {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid #e5e7eb;
  flex: 0 0 auto;
}

.ls-card-swatches .ls-swatch-light {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
}

.ls-card-swatches .ls-swatch-more {
  font-size: 11px;
  color: #6b7280;
  margin-left: 2px;
}

/* ===== Size Chart custom field =====
   Look Stan.js hides the original inline image (rendered far down in the
   Description tab) and turns it into a "Size Chart" text link placed
   below the size option boxes, left-aligned to match "Size". Applies to
   any product that has a metafield named "Size Chart". */
.ls-size-chart-link {
  display: block !important;
  text-align: left !important;
  margin-top: 8px !important;
  font-size: 14px;
  color: #6b7280;
  text-decoration: underline;
  cursor: pointer;
  white-space: nowrap;
}

.ls-size-chart-link:hover {
  color: #111111;
}

.ls-size-chart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.ls-size-chart-overlay.open {
  display: flex;
}

.ls-size-chart-modal {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  background: #ffffff;
  border-radius: 12px;
  padding: 16px;
  overflow: auto;
}

.ls-size-chart-modal img {
  max-width: 100%;
  max-height: 80vh;
  display: block;
  border-radius: 6px;
}

.ls-size-chart-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #111111;
  color: #ffffff;
  border: none;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ===== Product page USPs =====
   Look Stan.js appends this row right after the Add to Cart / Buy now
   buttons on every product page. Icons are inline SVG rather than the
   site's icon font — the loaded Phosphor subset only includes icons
   already used elsewhere in the theme, and none of the glyphs needed
   here are in that subset.

   Laid out as a 3-column grid (icon on top, label below) rather than a
   single horizontal row of icon+text pairs — at mobile widths a row of
   three "icon  Exchange and Refund | icon  Original Hollister | ..."
   pairs doesn't fit on one line and wraps awkwardly. The grid stays on
   one row at any width since each column only needs to fit a short
   label, not a full phrase beside its icon.

   Circles are outlined (not filled/shadowed) with a full-height divider
   between columns, matching a plainer, more editorial reference look. */
.ls-usp-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
  box-sizing: border-box;
  margin-top: 24px;
  padding: 24px 0;
}

.ls-usp-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  padding: 0 10px;
  position: relative;
}

.ls-usp-item:not(:first-child)::before {
  content: "";
  position: absolute;
  left: 0;
  top: -4px;
  bottom: -4px;
  width: 1px;
  background: #e2ded6;
}

.ls-usp-item span:last-child {
  font-size: 12px;
  font-weight: 700;
  color: #111111;
  letter-spacing: 0.6px;
  line-height: 1.5;
  text-transform: uppercase;
}

.ls-usp-item .ls-usp-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.ls-usp-item .ls-usp-icon img {
  width: 56px;
  height: 56px;
  object-fit: contain;
}