/**
 * SOCKAKI — canonical product cards (Phase 8 / visual pass)
 *
 * Woodmart owns the markup and interaction. These selectors establish a
 * stable, visible card rhythm around its native standard loop template.
 *
 * The product card is ONE shared component across all archives and homepage
 * product rails. Changes here are systemic.
 */

/* ═══════════════════════════════════════════════════════════════
   CARD SURFACE — clean editorial catalog tile
   ════════════════════════════════════════════════════════════ */

.wd-loop-builder-off .wd-product.wd-hover-standard {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--sk-brand-white);
  border: var(--sk-border-width) solid var(--sk-text);
  border-radius: 3px;
  box-shadow: 3px 4px 0 color-mix(in srgb, var(--sk-text) 8%, transparent);
  overflow: hidden;
  transition: box-shadow var(--sk-transition-fast), transform var(--sk-transition-fast);
}

.wd-loop-builder-off .wd-product.wd-hover-standard:hover {
  box-shadow: 2px 3px 0 color-mix(in srgb, var(--sk-text) 10%, transparent);
  transform: translate(1px, 1px);
}

/* ═══════════════════════════════════════════════════════════════
   IMAGE STAGE — dominant, stable aspect ratio
   ════════════════════════════════════════════════════════════ */

.wd-loop-builder-off .wd-product.wd-hover-standard .wd-product-thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--sk-aqua-xlight);
  border-radius: 0;
  overflow: hidden;
}

.wd-loop-builder-off .wd-product.wd-hover-standard .wd-product-img-link {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wd-loop-builder-off .wd-product.wd-hover-standard .wd-product-img-link img,
.wd-loop-builder-off .wd-product.wd-hover-standard .wd-product-img-hover img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

/* ═══════════════════════════════════════════════════════════════
   WISHLIST — top-right, intentionally integrated
   ════════════════════════════════════════════════════════════ */

.wd-loop-builder-off .wd-product.wd-hover-standard .wd-buttons.wd-pos-r-t {
  top: var(--sk-space-3);
  inset-inline-end: var(--sk-space-3);
  opacity: 1;
  visibility: visible;
  transform: none;
  border: 0;
  border-radius: var(--sk-radius-pill);
  background: transparent;
  box-shadow: none;
}

.wd-loop-builder-off .wd-product.wd-hover-standard .wd-wishlist-btn > a {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: var(--sk-border-width) solid var(--sk-border);
  border-radius: var(--sk-radius-full);
  background: var(--sk-brand-white);
  color: var(--sk-text);
  box-shadow: var(--sk-shadow-sm);
}

.wd-loop-builder-off .wd-product.wd-hover-standard .wd-wishlist-btn > a:hover {
  color: var(--sk-brand-pink);
  border-color: var(--sk-brand-pink);
  transform: translateY(-1px);
}

.wd-loop-builder-off .wd-product.wd-hover-standard .wd-wishlist-btn > a:focus-visible {
  outline: 2px solid var(--sk-border-focus);
  outline-offset: 3px;
}

/* ═══════════════════════════════════════════════════════════════
   BADGE ZONE — top-left, stacking without overlap
   ════════════════════════════════════════════════════════════ */

.wd-loop-builder-off .wd-product.wd-hover-standard .product-labels {
  position: absolute;
  top: var(--sk-space-3);
  inset-inline-start: var(--sk-space-3);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sk-space-1);
  z-index: 3;
}

.wd-loop-builder-off .wd-product.wd-hover-standard .product-labels > span {
  margin: 0;
}

/* ── SALE badge — yellow skewed sticker, designed ── */
.wd-loop-builder-off .wd-product.wd-hover-standard .product-labels .onsale {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.85rem;
  padding: 4px 8px 4px 9px;
  background: var(--sk-extended-yellow);
  color: var(--sk-text);
  border: var(--sk-border-width) solid var(--sk-text);
  border-radius: var(--sk-radius-sm);
  font-family: var(--sk-font-body);
  font-size: 11px;
  font-weight: var(--sk-fw-bold);
  line-height: 1.1;
  letter-spacing: .02em;
  text-transform: uppercase;
  transform: skewX(-3deg) rotate(-2deg);
  box-shadow: 1px 2px 0 var(--sk-text);
}

/* Woodmart adds .wd-shape-round which applies border-radius 50% — override it */
.wd-loop-builder-off .wd-product.wd-hover-standard .product-labels .onsale.wd-shape-round {
  border-radius: var(--sk-radius-sm) !important;
  width: auto !important;
  height: auto !important;
}

/* ── SOLD OUT badge — compact horizontal stamp ── */
.wd-loop-builder-off .wd-product.wd-hover-standard .product-labels .out-of-stock,
.wd-loop-builder-off .wd-product.wd-hover-standard .product-labels .sold-out {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 4.25rem;
  padding: 4px 9px;
  background: var(--sk-text);
  color: var(--sk-text-inverse);
  border: var(--sk-border-width) solid var(--sk-text);
  border-radius: var(--sk-radius-sm);
  font-family: var(--sk-font-body);
  font-size: 9px;
  font-weight: var(--sk-fw-bold);
  line-height: 1.1;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
}

/* Override wd-shape-round on SOLD OUT */
.wd-loop-builder-off .wd-product.wd-hover-standard .product-labels .out-of-stock.wd-shape-round {
  border-radius: var(--sk-radius-sm) !important;
  width: auto !important;
  height: auto !important;
}

/* ── NEW burst — compact pink sticker ── */
.wd-loop-builder-off .wd-product.wd-hover-standard .sk-new-burst-wrap {
  position: absolute;
  top: var(--sk-space-3);
  inset-inline-start: var(--sk-space-3);
  z-index: 5;
  pointer-events: none;
}

.wd-loop-builder-off .wd-product.wd-hover-standard .sk-badge--new-burst {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  background: var(--sk-brand-pink);
  color: var(--sk-text);
  border: 0;
  font-family: var(--sk-font-body);
  font-size: 9px;
  font-weight: var(--sk-fw-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: rotate(-5deg);
  filter: drop-shadow(1.5px 1.5px 0 var(--sk-text));
  -webkit-mask-image: none;
  mask-image: none;
  /* Compact irregular seal silhouette. */
  clip-path: polygon(
    12% 0%, 50% 5%, 88% 0%,
    100% 18%, 95% 50%, 100% 82%,
    88% 100%, 50% 95%, 12% 100%,
    0% 82%, 5% 50%, 0% 18%
  );
}

/* When burst is present, push native labels below it */
.wd-loop-builder-off .wd-product.wd-hover-standard:has(.sk-new-burst-wrap) .product-labels {
  top: calc(var(--sk-space-3) + 3rem + var(--sk-space-1));
  z-index: 3;
}

/* ═══════════════════════════════════════════════════════════════
   CARD CONTENT WRAPPER — Woodmart uses .wd-product-wrapper, not
   .product-element-bottom. Target the real container.
   ════════════════════════════════════════════════════════════ */

/* The real card content container (flex column, image then text nodes) */
.wd-loop-builder-off .wd-product.wd-hover-standard .wd-product-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0 !important;
  height: 100%;
}

/* The image (top) sits edge-to-edge — no padding above */
.wd-loop-builder-off .wd-product.wd-hover-standard .wd-product-thumb.product-element-top {
  flex-shrink: 0;
}

/* Everything after the thumb gets breathing room */
.wd-loop-builder-off .wd-product.wd-hover-standard .wd-entities-title,
.wd-loop-builder-off .wd-product.wd-hover-standard .price,
.wd-loop-builder-off .wd-product.wd-hover-standard .wd-add-btn {
  padding-inline: var(--sk-space-4);
}

/* First text element (title) gets top padding for breathing room */
.wd-loop-builder-off .wd-product.wd-hover-standard .wd-entities-title {
  padding-top: var(--sk-space-4);
}

/* CTA gets bottom padding so it doesn't clip the card edge */
.wd-loop-builder-off .wd-product.wd-hover-standard .wd-add-btn {
  padding-bottom: var(--sk-space-4);
  margin-top: 14px;
}

/* Title — cohesive with image, close to top */
.wd-loop-builder-off .wd-product.wd-hover-standard .wd-entities-title {
  min-height: 0;
  max-height: calc((2 * 1.28em) + var(--sk-space-4));
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  margin: 0 0 4px;
  color: var(--sk-text);
  font-family: var(--sk-font-body);
  font-size: .96875rem;
  font-weight: var(--sk-fw-medium);
  line-height: 1.28;
  text-align: left;
  overflow-wrap: break-word;
  hyphens: auto;
}

.wd-loop-builder-off .wd-product.wd-hover-standard .wd-entities-title a {
  color: inherit;
  text-decoration: none;
}

.wd-loop-builder-off .wd-product.wd-hover-standard .wd-entities-title a:hover {
  color: var(--sk-aqua-interactive);
}

/* Price — immediately below title, tight coupling */
.wd-loop-builder-off .wd-product.wd-hover-standard .price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 5px;
  margin: 0;
  padding-inline: var(--sk-space-4);
  color: var(--sk-text);
  font-family: var(--sk-font-body);
  font-size: 1.075rem;
  font-weight: var(--sk-fw-bold);
  line-height: var(--sk-lh-snug);
  text-align: left;
}

.wd-loop-builder-off .wd-product.wd-hover-standard .price del {
  color: var(--sk-text-subtle);
  font-size: .82em;
  font-weight: var(--sk-fw-regular);
  text-decoration: line-through;
}

.wd-loop-builder-off .wd-product.wd-hover-standard .price ins {
  text-decoration: none;
  color: var(--sk-text);
  font-weight: var(--sk-fw-bold);
}

/* ═══════════════════════════════════════════════════════════════
   CTA SYSTEM — three explicit states
   ════════════════════════════════════════════════════════════ */

.wd-loop-builder-off .wd-product.wd-hover-standard .wd-add-btn {
  min-height: 0;
  width: 100%;
  margin-top: 14px;
}

.wd-loop-builder-off .wd-product.wd-hover-standard .wd-add-btn > a,
.wd-loop-builder-off .wd-product.wd-hover-standard .wd-add-btn > button {
  width: 100%;
  height: 46px;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--sk-space-3);
  border: var(--sk-border-width) solid var(--sk-text);
  border-radius: 2px;
  font-family: var(--sk-font-body);
  font-size: var(--sk-fs-sm);
  font-weight: var(--sk-fw-semibold);
  line-height: 1.2;
  text-transform: none;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--sk-transition-fast), background-color var(--sk-transition-fast), box-shadow var(--sk-transition-fast);
}

/* SIMPLE — aqua fill, dark text, confident CTA */
.wd-loop-builder-off .wd-product.wd-hover-standard .wd-add-btn > a.product_type_simple,
.wd-loop-builder-off .wd-product.wd-hover-standard .wd-add-btn > button.product_type_simple {
  background: var(--sk-brand-aqua);
  color: var(--sk-text);
  border-color: var(--sk-text);
  box-shadow: 2px 2px 0 var(--sk-text);
}

.wd-loop-builder-off .wd-product.wd-hover-standard .wd-add-btn > a.product_type_simple:hover,
.wd-loop-builder-off .wd-product.wd-hover-standard .wd-add-btn > button.product_type_simple:hover {
  background: var(--sk-brand-white);
  box-shadow: 1px 1px 0 var(--sk-text);
  transform: translate(2px, 2px);
}

/* VARIABLE — paper/outline secondary action */
.wd-loop-builder-off .wd-product.wd-hover-standard .wd-add-btn > a.product_type_variable,
.wd-loop-builder-off .wd-product.wd-hover-standard .wd-add-btn > a.product_type_grouped,
.wd-loop-builder-off .wd-product.wd-hover-standard .wd-add-btn > a.product_type_external,
.wd-loop-builder-off .wd-product.wd-hover-standard .wd-add-btn > button.product_type_variable {
  background: var(--sk-paper);
  color: var(--sk-text);
  border-color: var(--sk-text);
  box-shadow: none;
}

.wd-loop-builder-off .wd-product.wd-hover-standard .wd-add-btn > a.product_type_variable:hover,
.wd-loop-builder-off .wd-product.wd-hover-standard .wd-add-btn > button.product_type_variable:hover {
  background: var(--sk-brand-white);
  border-color: var(--sk-aqua-interactive);
  color: var(--sk-aqua-interactive);
}

/* FOCUS */
.wd-loop-builder-off .wd-product.wd-hover-standard .wd-add-btn > a:focus-visible,
.wd-loop-builder-off .wd-product.wd-hover-standard .wd-add-btn > button:focus-visible {
  outline: 2px solid var(--sk-border-focus);
  outline-offset: 3px;
}

/* OUT OF STOCK — muted, inactive */
.wd-loop-builder-off .wd-product.wd-hover-standard.outofstock .wd-add-btn > a,
.wd-loop-builder-off .wd-product.wd-hover-standard.outofstock .wd-add-btn > button {
  background: var(--sk-paper);
  color: var(--sk-text-muted);
  border-color: var(--sk-border-strong);
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
}

.wd-loop-builder-off .wd-product.wd-hover-standard.outofstock .wd-product-img-link {
  opacity: .72;
}

/* ═══════════════════════════════════════════════════════════════
   CARD GRID — responsive columns
   ════════════════════════════════════════════════════════════ */

.products.elements-grid.wd-loop-builder-off {
  --wd-col-lg: 4;
  --wd-col-md: 3;
  --wd-col-sm: 2;
  row-gap: var(--sk-space-8);
  column-gap: var(--sk-space-5);
}

@media (max-width: 1024px) {
  .products.elements-grid.wd-loop-builder-off {
    row-gap: var(--sk-space-6);
    column-gap: var(--sk-space-4);
  }
}

@media (max-width: 767px) {
  .products.elements-grid.wd-loop-builder-off {
    column-gap: var(--sk-space-3);
    row-gap: var(--sk-space-5);
  }

  /* Mobile card rhythm */
  /* Mobile: tighter padding on content block */
  .wd-loop-builder-off .wd-product.wd-hover-standard .wd-entities-title,
  .wd-loop-builder-off .wd-product.wd-hover-standard .price,
  .wd-loop-builder-off .wd-product.wd-hover-standard .wd-add-btn {
    padding-inline: var(--sk-space-2);
  }

  .wd-loop-builder-off .wd-product.wd-hover-standard .wd-entities-title {
    padding-top: var(--sk-space-2);
    min-height: 0;
    max-height: calc((2 * 1.25em) + var(--sk-space-2));
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 13px;
    line-height: 1.25;
    margin-bottom: 3px;
  }

  .wd-loop-builder-off .wd-product.wd-hover-standard .wd-add-btn {
    padding-bottom: var(--sk-space-2);
    margin-top: 10px;
  }

  .wd-loop-builder-off .wd-product.wd-hover-standard .price {
    font-size: 13.5px;
    margin-bottom: 0;
  }

  .wd-loop-builder-off .wd-product.wd-hover-standard .wd-add-btn > a,
  .wd-loop-builder-off .wd-product.wd-hover-standard .wd-add-btn > button {
    height: 42px;
    min-height: 42px;
    padding-inline: var(--sk-space-2);
    font-size: var(--sk-fs-xs);
  }

  /* Smaller badges on mobile */
  .wd-loop-builder-off .wd-product.wd-hover-standard .product-labels {
    top: var(--sk-space-2);
    inset-inline-start: var(--sk-space-2);
  }

  .wd-loop-builder-off .wd-product.wd-hover-standard .product-labels .onsale {
    min-width: 2.5rem;
    padding: 2px var(--sk-space-1);
    font-size: 9px;
  }

  .wd-loop-builder-off .wd-product.wd-hover-standard .product-labels .out-of-stock,
  .wd-loop-builder-off .wd-product.wd-hover-standard .product-labels .sold-out {
    min-width: 3.5rem;
    padding: 2px var(--sk-space-1);
    font-size: 8px;
  }

  .wd-loop-builder-off .wd-product.wd-hover-standard .sk-badge--new-burst {
    width: 2.6rem;
    height: 2.6rem;
    font-size: 8px;
  }

  .wd-loop-builder-off .wd-product.wd-hover-standard:has(.sk-new-burst-wrap) .product-labels {
    top: calc(var(--sk-space-2) + 2.6rem + 2px);
  }

  .wd-loop-builder-off .wd-product.wd-hover-standard .wd-buttons.wd-pos-r-t {
    top: var(--sk-space-2);
    inset-inline-end: var(--sk-space-2);
  }

  .wd-loop-builder-off .wd-product.wd-hover-standard .wd-wishlist-btn > a {
    width: 36px;
    height: 36px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wd-loop-builder-off .wd-product.wd-hover-standard {
    transition: none;
    transform: none;
  }

  .wd-loop-builder-off .wd-product.wd-hover-standard:hover {
    transform: none;
  }

  .wd-loop-builder-off .wd-product.wd-hover-standard .wd-wishlist-btn > a,
  .wd-loop-builder-off .wd-product.wd-hover-standard .wd-add-btn > a,
  .wd-loop-builder-off .wd-product.wd-hover-standard .wd-add-btn > button {
    transition: none;
    transform: none;
  }
}