/* =====================================================================
   SHARED PRODUCT CARD — single source of truth for every product-card
   grid site-wide: Consumer Choice, Best Sellers, Product Listing,
   Related Products, Recently Viewed, and the Lifestyle page's related
   products. Loaded once globally in front/layout.blade.php. Do NOT
   duplicate these rules inside a component's own CSS file — add new
   product-card styling here instead.
===================================================================== */

/* ---- Card shell ---- */
.product-cart-wrap:not(.style-2) {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid #e4ddcd;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(36, 33, 29, 0.04), 0 12px 28px -14px rgba(36, 33, 29, 0.18);
}

.product-cart-wrap:not(.style-2):hover {
  border-color: #0b5568;
  box-shadow: 0 4px 10px rgba(36, 33, 29, 0.06), 0 24px 48px -18px rgba(11, 85, 104, 0.28);
}

/* ---- Image stage ---- */
.product-cart-wrap:not(.style-2) .product-img-action-wrap {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  padding: 0 !important;
  margin: 10px 10px 0 !important;
  border-radius: 10px;
  background: #ffffff;
}

.product-img-action-wrap .product-img {
  width: 100%;
  height: 100%;
}

.product-img-action-wrap .product-img img {
  aspect-ratio: 1 / 1;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.product-img-action-wrap .product-img a img.hover-img {
  display: none !important;
}

.product-img-action-wrap .product-img-zoom a img.default-img,
.product-cart-wrap:hover .product-img-zoom a img {
  transform: none !important;
}

/* ---- Edge action rail: wishlist / quick view / inquiry ---- */
.product-cart-wrap .product-img-action-wrap .product-action-1 {
  background: transparent;
  border: none;
  border-radius: 0;
}

/* Legacy responsive.min.css (CDN) still ships a @media (max-width:768px)
   rule forcing this rail to min-width:111px for its old horizontal-row
   layout. That min-width stretches our column-flex rail well past its
   32px icons, pushing them off-center on mobile. Match its selector
   specificity to reset it. */
.product-cart-wrap .product-img-action-wrap .product-action-1 {
  min-width: 0;
}

.product-cart-wrap .product-action-1 {
  position: absolute;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 6px;
  top: 10px;
  left: auto;
  right: -40px;
  bottom: auto;
  transform: none;
  opacity: 1;
  visibility: visible;
}

.product-cart-wrap:hover .product-action-1 {
  right: 10px;
}

/* Touch devices have no real hover: pin the rail at its resting spot
   instead of leaving it off-canvas / dependent on a :hover that never
   fires cleanly, which is what made it appear misplaced on mobile. */
@media (hover: none), (pointer: coarse) {
  .product-cart-wrap .product-action-1 {
    right: 10px;
  }
}

.product-cart-wrap .product-action-1 a.action-btn,
.product-cart-wrap .product-action-1 button {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  line-height: 32px;
  border-radius: 9px;
  border: 1px solid #e4ddcd;
  background: #ffffff;
  color: #756c5e;
}

.product-cart-wrap .product-action-1 a.action-btn i,
.product-cart-wrap .product-action-1 button i {
  font-size: 14px;
  line-height: 1;
  margin: 0;
}

.product-cart-wrap .product-action-1 a.action-btn:hover,
.product-cart-wrap .product-action-1 button:hover {
  background: #0b5568;
  border-color: #0b5568;
  color: #ffffff;
}

.product-cart-wrap .product-action-1 a.action-btn:hover i,
.product-cart-wrap .product-action-1 button:hover i {
  color: #ffffff !important;
}

/* Rail icons: hover shows only the icon fill, no aria-label tooltip bubble */
.product-cart-wrap .product-action-1 a.action-btn:after,
.product-cart-wrap .product-action-1 a.action-btn:before,
.product-cart-wrap .product-action-1 button:after,
.product-cart-wrap .product-action-1 button:before {
  content: none;
  display: none;
}

/* ---- Content ---- */
.product-cart-wrap .product-content-wrap {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding-top: 0px;
  padding-right: 10px;
  padding-bottom: 0px;
  padding-left: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.product-content-wrap h2 {
  flex-grow: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-title-limit {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  max-height: 2.8em;
  line-height: 1.4em;
}

.meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 2px;
  column-gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #a79c89;
}

.meta-row .meta-brand,
.meta-row .meta-sku {
  white-space: nowrap;
}

.meta-row .dot {
  width: 3px;
  height: 3px;
  flex: none;
  border-radius: 50%;
  background: #a79c89;
}

/* ---- Price ---- */
.product-cart-wrap .product-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.product-cart-wrap .product-price span:first-child,
.product-cart-wrap .product-price span.sale {
  color: #000000;
  font-weight: 700;
  font-size: 18px;
}

.product-cart-wrap .product-price span.old-price {
  color: #a79c89;
  text-decoration: line-through;
  text-decoration-color: #b5432e;
}

/* ---- Price + Add to Cart row ----
   margin-top: auto docks this to the bottom of the card regardless of how
   much content (color swatches, brand/SKU, 1 vs 2-line title) sits above it,
   so price + Add to Cart line up at the same height across every card in a
   row instead of leaving an inconsistent gap for products with less content. */
.product-cart-wrap .product-card-bottom {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 8px;
  margin-top: auto;
  min-height: 44px;
}

.product-cart-wrap .add-cart .add,
.product-cart-wrap .add-cart .add:hover,
.product-cart-wrap .add-cart .add:focus,
.product-cart-wrap .add-cart .add:active {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 12px 16px !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 15px !important;
  background-color: #0b5568 !important;
  border-color: #0b5568 !important;
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  box-shadow: none !important;
  transform: none !important;
}

.product-cart-wrap .add-cart .add i {
  font-size: 16px;
  line-height: 1;
  margin: 0 !important;
}

/* Override the site-wide 3px offset focus outline with a ring that hugs
   the pill shape instead of a squared-off box, so the button matches the
   reference UI at rest while staying keyboard-accessible. */
.product-cart-wrap .add-cart .add:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(11, 85, 104, 0.35) !important;
}

/* ---- Sale / promo badge ---- */
.promotopleft { position: absolute; top: 10px; left: 10px; max-width: calc(100% - 20px); z-index: 4; }
.promotopright { position: absolute; top: 10px; right: 10px; max-width: calc(100% - 20px); z-index: 4; }
.promobottomleft { position: absolute; bottom: 10px; left: 10px; max-width: calc(100% - 20px); z-index: 4; }
.promobottomright { position: absolute; bottom: 10px; right: 10px; max-width: calc(100% - 20px); z-index: 4; }

.badge-shape-rectangle {
  display: inline-block;
  max-width: 100%;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Admin picks background/text color independently (promotion ribbon settings),
     so they can end up identical or too close in contrast (e.g. same color for
     both) — this dual light+dark text-shadow keeps the label legible against
     almost any background color the admin chooses, without us knowing it in
     advance. Not a substitute for picking a readable color, just a safety net. */
  text-shadow:
    0 0 3px rgba(255, 255, 255, 0.85),
    0 0 5px rgba(255, 255, 255, 0.55),
    0 1px 2px rgba(0, 0, 0, 0.65);
}

.badge-shape-square {
  width: 100%;
  height: 40px;
  border-radius: 4px;
  font-size: 12px;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.badge-shape-circle {
  width: 100%;
  height: 40px;
  padding: 0 10px;
  border-radius: 50%;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  line-height: 1.2;
}

/* ---- Color variation swatches ---- */
.product-variations {
  display: flex;
  gap: 8px;
}

.variation-swatch {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid #cccccc;
  cursor: pointer;
  overflow: hidden;
}

.variation-swatch img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.variation-swatch.active {
  box-shadow: 0 0 0 2px var(--primary-color, #005f85);
}

/* ---- Shared loading overlay ---- */
.custom-loader-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.animate-spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  100% { transform: rotate(360deg); }
}