/* =========================================================
   Khuttwa product card
   Used by snippets/khuttwa-card.liquid (site-wide) and sections/products-cards.liquid.
   Every value comes from Theme settings → "Khuttwa product card" (CSS variables printed in layout/theme.liquid).
   ========================================================= */

.kc-wrap { height: 100%; }
.kc-wrap .spc-card { --spc-radius: var(--kc-radius, 18px); --spc-media-bg: var(--kc-media-bg, var(--kx-tile, #F5F4F1)); --spc-ratio: var(--kc-ratio, 1/1); }

/* Card */
.spc-card {
  display: flex; flex-direction: column; height: 100%;
  background: var(--kc-card-bg, var(--color-background));
  border: var(--kc-border-w, 1px) solid var(--kc-border, var(--color-border));
  border-radius: var(--spc-radius, 18px);
  padding: var(--kc-pad, 10px);
  text-align: var(--kc-align, start);
  transition: border-color .35s ease, box-shadow .35s ease, transform .35s ease;
}
.spc-card:hover {
  border-color: var(--kc-border-hover, rgba(var(--color-heading-rgb), .9));
  box-shadow: var(--kc-shadow, 0 18px 40px -22px rgba(0,0,0,.35));
  transform: translateY(var(--kc-lift, -3px));
}

/* Media */
.spc-card__link { position: absolute; inset: 0; z-index: 2; }
.spc-card__media { position: relative; display: block; aspect-ratio: var(--spc-ratio, 1/1); background: var(--spc-media-bg, var(--kx-tile, #F5F4F1)); border-radius: max(0px, calc(var(--spc-radius, 18px) - var(--kc-pad, 10px) + 4px)); overflow: hidden; }
.spc-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(var(--kc-img-scale, 1)); transition: transform .9s cubic-bezier(.2,.7,.2,1), opacity .5s ease; }
.kc-fit-contain .spc-card__img, .spc--fit-contain .spc-card__img { object-fit: contain; padding: var(--kc-contain-pad, 8%); mix-blend-mode: multiply; }
.spc-card__img--2 { opacity: 0; }
.spc-card:hover .spc-card__img--2 { opacity: 1; }
.spc-card:hover .spc-card__img--1:not(:only-of-type) { opacity: 0; }
.spc-card:hover .spc-card__img { transform: scale(calc(var(--kc-img-scale, 1) * var(--kc-hover-zoom, 1.05))); }
.spc-ph { opacity: .35; }
.spc-card.is-soldout .spc-card__img { opacity: var(--kc-soldout-opacity, .55); }
.spc-theme-badges { z-index: 3; }

/* Minimal badges (section only) */
.spc-card__badges { position: absolute; top: 12px; inset-inline-start: 12px; z-index: 3; display: flex; gap: 6px; }
.spc-card__badge { background: var(--color-background); color: var(--color-heading); font-size: 1.05rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 5px 10px; border-radius: 99px; line-height: 1.3; }
.spc-card__badge--sale { background: var(--kc-price-sale, var(--color-heading)); color: #fff; }
.spc-card__badge--dark { background: rgba(var(--color-heading-rgb), .75); color: var(--color-background); }

/* Wishlist / quick view */
.spc-card__actions { position: absolute; top: 10px; inset-inline-end: 10px; z-index: 4; display: flex; flex-direction: column; gap: 6px; }
.spc-card__actions.is-left { inset-inline-end: auto; right: auto; left: 10px; }
.spc-act {
  width: var(--kc-act-size, 38px); height: var(--kc-act-size, 38px); border-radius: 50%;
  background: var(--kc-heart-bg, var(--kx-paper, #fff)); color: var(--kc-heart-icon, var(--kx-dark-ink, #111));
  display: grid; place-items: center; cursor: pointer; position: relative;
  box-shadow: 0 6px 16px -8px rgba(0,0,0,.35);
  transition: background .25s ease, color .25s ease, transform .35s cubic-bezier(.2,.7,.2,1), opacity .35s ease;
}
.spc-act > svg { grid-area: 1 / 1; }
.spc-act:hover, .spc-act--wish.active { background: var(--kc-heart-active-bg, var(--kx-dark, #111)); color: var(--kc-heart-active-icon, #fff); }
.spc-act--wish:active { transform: scale(.9); }
.spc-act--hover { opacity: 0; transform: translateY(-6px); }
.spc-card:hover .spc-act--hover { opacity: 1; transform: none; }
@media (hover: none) { .spc-act--hover { display: none; } }
.spc-act .icon-load, .spc-card__cart .icon-load { opacity: 0; }
.spc-act.loading .icon-load, .spc-card__cart.loading .icon-load { opacity: 1; }
.spc-act.loading .hidden-on-load, .spc-card__cart.loading .hidden-on-load { opacity: 0; }

/* Sizes on hover */
.spc-card__sizes { position: absolute; inset-inline: 10px; bottom: 10px; z-index: 3; pointer-events: none; background: var(--kc-sizes-bg, rgba(255,255,255,.92)); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: 12px; padding: 10px 12px; opacity: 0; transform: translateY(14px); transition: opacity .4s ease, transform .5s cubic-bezier(.2,.7,.2,1); }
.spc-card:hover .spc-card__sizes { opacity: 1; transform: none; }
.spc-card__sizes-label { display: block; font-size: 1rem; letter-spacing: .2em; text-transform: uppercase; color: var(--kc-sizes-text, var(--kx-dark-ink, #111)); opacity: .6; margin-bottom: 6px; }
.spc-card__sizes-list { display: flex; flex-wrap: wrap; gap: 5px; }
.spc-size { min-width: 30px; padding: 4px 6px; text-align: center; font-size: 1.2rem; color: var(--kc-sizes-text, var(--kx-dark-ink, #111)); border: 1px solid currentColor; border-color: rgba(0,0,0,.15); border-radius: 8px; line-height: 1.2; }
.spc-size.is-off { opacity: .35; text-decoration: line-through; }
@media (hover: none) { .spc-card__sizes { display: none; } }

/* Info */
.spc-card__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; padding: 12px 4px 2px; margin-top: auto; }
.spc-card__meta { display: flex; flex-direction: column; min-width: 0; gap: 2px; flex: 1 1 auto; }
.spc-card__vendor { font-size: var(--kc-vendor-size, 1.05rem); color: var(--kc-vendor-color, inherit); opacity: var(--kc-vendor-opacity, .6); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spc-card__title { color: var(--kc-title-color, var(--color-heading)); font-size: var(--kc-title-size, 1.5rem); font-weight: var(--kc-title-weight, 500); text-transform: var(--kc-title-transform, none); text-decoration: none; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: var(--kc-title-lines, 2); -webkit-box-orient: vertical; overflow: hidden; }
.spc-card__title:hover { text-decoration: underline; text-underline-offset: 3px; }
.spc-card__price { display: flex; align-items: baseline; gap: 4px 8px; flex-wrap: wrap; margin-top: 4px; justify-content: var(--kc-justify, flex-start); }
.spc-card__now { font-size: var(--kc-price-size, 1.5rem); font-weight: var(--kc-price-weight, 600); color: var(--kc-price, var(--color-heading)); white-space: nowrap; }
.spc-card__now.is-sale { color: var(--kc-price-sale, var(--kx-accent-ink, #d0473e)); }
.spc-card__was { font-size: var(--kc-compare-size, 1.25rem); color: var(--kc-price-compare, #999); white-space: nowrap; }
.spc-card__was { display: var(--kc-compare-display, inline); }

/* Round button (cart / arrow) */
.spc-card__go {
  flex-shrink: 0; width: var(--kc-btn-size, 38px); height: var(--kc-btn-size, 38px); border-radius: 50%;
  border: 1px solid var(--kc-btn-border, var(--color-border));
  background: var(--kc-btn-bg, transparent); color: var(--kc-btn-icon, var(--color-heading));
  display: grid; place-items: center; padding: 0; cursor: pointer; font: inherit;
  transition: all .35s ease;
}
.spc-card__go > svg { grid-area: 1 / 1; }
.spc-card:hover .spc-card__go, .spc-card__go:hover { background: var(--kc-btn-hover-bg, var(--kx-dark, #111)); border-color: var(--kc-btn-hover-bg, var(--kx-dark-ink, #111)); color: var(--kc-btn-hover-icon, #fff); }
.spc-card:hover a.spc-card__go { transform: rotate(45deg); }
[dir="rtl"] .spc-card__go svg { transform: scaleX(-1); }
.spc-card__form, .spc-card__form form { margin: 0; display: contents; }
.spc-card__foot > .spc-card__go, .spc-card__foot > .spc-card__form > form > .spc-card__go { display: var(--kc-btn-display, grid); }

/* Mobile */
@media (max-width: 767px) {
  .spc-card { padding: var(--kc-pad-m, 7px); }
  .spc-card__actions { top: 7px; }
  .spc-card__actions.is-left { left: 7px; }
  .spc-card__actions:not(.is-left) { inset-inline-end: 7px; }
  .spc-act { width: var(--kc-act-size-m, 30px); height: var(--kc-act-size-m, 30px); }
  .spc-act svg { transform: scale(.85); }
  .spc-card__foot { padding: 10px 2px 2px; gap: 6px; }
  .spc-card__go { width: var(--kc-btn-size-m, 30px); height: var(--kc-btn-size-m, 30px); }
  .spc-card__go svg { transform: scale(.85); }
  .spc-card__title { font-size: var(--kc-title-size-m, 1.3rem); line-height: 1.3; }
  .spc-card__vendor { font-size: var(--kc-vendor-size-m, .9rem); letter-spacing: .12em; }
  .spc-card__price { gap: 2px 6px; margin-top: 2px; }
  .spc-card__now { font-size: var(--kc-price-size-m, 1.35rem); }
  .spc-card__was { font-size: var(--kc-compare-size-m, 1.1rem); }
  .spc-theme-badges { transform: scale(.85); transform-origin: top right; }
  .spc-card__foot > .spc-card__go, .spc-card__foot > .spc-card__form > form > .spc-card__go { display: var(--kc-btn-display-m, var(--kc-btn-display, grid)); }
}

@media (prefers-reduced-motion: reduce) {
  .spc-card, .spc-card__img, .spc-card__sizes { transition: none !important; }
}