/**
 * CraftMarket – product cards (template-parts/cards/product.php), shared by the homes, the shop,
 * related products, the mega menu and widgets. One markup for every skin; the skins only adjust
 * the look. Prefix: .craftmarket-card.
 */

/* ---------- Grid of cards ---------- */
.craftmarket-cards,
.craftmarket-products--grid {
  --cards-cols: 4;
  display: grid;
  grid-template-columns: repeat(var(--cards-cols), minmax(0, 1fr));
  gap: 24px;
}
.craftmarket-cards--2, .craftmarket-products--cols-2 { --cards-cols: 2; }
.craftmarket-cards--3, .craftmarket-products--cols-3 { --cards-cols: 3; }
.craftmarket-cards--5, .craftmarket-products--cols-5 { --cards-cols: 5; }
.craftmarket-products--list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
@media (max-width: 1100px) {
  .craftmarket-cards,
  .craftmarket-products--grid { --cards-cols: 3 !important; }
}
@media (max-width: 860px) {
  .craftmarket-cards,
  .craftmarket-products--grid { --cards-cols: 2 !important; gap: 16px; }
}

/* ---------- Card ---------- */
.craftmarket-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: var(--card-radius);
  background: var(--bg-card);
  transition: box-shadow .25s ease, transform .25s ease;
}
.craftmarket-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }

.craftmarket-card__media { position: relative; overflow: hidden; background: var(--bg-subtle); }
/* Same ratio as the WooCommerce catalog image (600 × 600, cropped 1:1): a taller frame cropped the
   square again and cut bowl rims and vase necks. */
.craftmarket-card__img { display: block; aspect-ratio: 1; }
.craftmarket-card .craftmarket-card__photo { display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity .35s ease, transform .6s ease; }
.craftmarket-card .craftmarket-card__photo--alt { position: absolute; inset: 0; opacity: 0; }
.craftmarket-card:hover .craftmarket-card__photo { transform: scale(1.03); }
.craftmarket-card:hover .craftmarket-card__photo--alt { opacity: 1; }

.craftmarket-card__badges { position: absolute; top: 12px; left: 12px; display: flex; flex-wrap: wrap; gap: 6px; pointer-events: none; }
.craftmarket-card__size {
  position: absolute;
  bottom: 10px;
  left: 10px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .9);
  color: var(--text-heading);
  font-size: 12px;
  font-weight: 500;
}

/* Wishlist heart (shared with the product page) */
.craftmarket-wish {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--text-heading);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  transition: color .2s ease, transform .2s ease;
}
.craftmarket-wish:hover { color: var(--color-primary); transform: scale(1.06); }
.craftmarket-wish[aria-pressed="true"] { color: var(--color-primary); }
.craftmarket-wish[aria-pressed="true"] svg { fill: currentColor; }
.craftmarket-card__wish { position: absolute; top: 10px; right: 10px; z-index: 1; }

.craftmarket-card__body {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "title title"
    "meta meta"
    "price swatches"
    "actions actions"
    "tags tags";
  grid-template-rows: min-content min-content min-content auto min-content; /* only the button row (auto) stretches, so buttons line up across a row of cards */
  gap: 4px 10px;
  padding: 14px 16px 16px;
}
.craftmarket-card__title {
  grid-area: title;
  margin: 0;
  color: var(--text-heading);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.craftmarket-card__title a { display: inline-block; padding-block: 2px; color: inherit; } /* 24px touch target */
.craftmarket-card__title a:hover { color: var(--color-primary); }
.craftmarket-card__meta { grid-area: meta; margin: 0; color: var(--text-secondary); font-size: 13px; }
.craftmarket-card__meta a { color: inherit; }
.craftmarket-card__meta a:hover { color: var(--color-primary); }
.craftmarket-card__rating { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; margin: 2px 0 0; color: var(--text-secondary); font-size: 13px; }
.craftmarket-card__swatches { grid-area: swatches; align-self: center; flex-wrap: nowrap; gap: 5px; margin-top: 8px; }
.craftmarket-card__swatches .craftmarket-swatch { --swatch-size: 18px; }
.craftmarket-card__excerpt { grid-column: 1 / -1; color: var(--text-body); font-size: 14px; }
.craftmarket-card__excerpt p { margin: 6px 0 0; }

/* The foot holds price + actions; its children join the body grid. */
.craftmarket-card__foot { display: contents; }
.craftmarket-card__price { grid-area: price; align-self: center; margin-top: 8px; color: var(--text-heading); font-family: var(--font-heading); font-size: 19px; font-weight: 600; line-height: 1.2; }
.craftmarket-card__price del { margin-inline-end: 6px; color: var(--text-muted); font-family: var(--font-body); font-size: 14px; font-weight: 400; }
.craftmarket-card__price ins { text-decoration: none; }
.craftmarket-card__price small { color: var(--text-secondary); font-size: 12px; font-weight: 400; }
/* Cards inside page content (wishlist shortcode) keep their own spacing, not the .entry-content heading margins. */
.entry-content .craftmarket-card :is(h2, h3, p) { margin: 0; }
.craftmarket-card__actions { grid-area: actions; align-self: end; display: grid; gap: 8px; margin-top: 12px; }

a.craftmarket-cart-btn.button, /* = .woocommerce a.button, wins by order */
.craftmarket-cart-btn.button,
.craftmarket-card .craftmarket-cart-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 44px; /* touch target */
  padding: 8px 16px;
  border: 1px solid var(--color-primary);
  border-radius: var(--btn-radius);
  background: transparent; /* outline: one solid button per section, the grids stay light */
  color: var(--color-primary);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  transition: background .2s ease, border-color .2s ease;
}
.craftmarket-cart-btn:hover,
a.craftmarket-cart-btn.button:hover { border-color: var(--color-primary); background: var(--color-primary); color: var(--color-primary-fg); }
.craftmarket-cart-btn .craftmarket-icon { display: none; }
.craftmarket-cart-btn.loading { opacity: .7; pointer-events: none; }
.craftmarket-cart-btn.added .craftmarket-icon { display: inline; }
/* The popup (theme.js) links to the cart instead. */
.added_to_cart.wc-forward { display: none; }

/* Add to quote (wholesale) */
.craftmarket-quote-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--btn-radius);
  background: transparent;
  color: var(--text-heading);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}
.craftmarket-quote-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.craftmarket-quote-btn.is-added { border-color: var(--color-success); color: var(--color-success); }
/* As a filled-on-hover button (wholesale table): keep the label readable on the fill. */
.craftmarket-quote-btn.craftmarket-btn { transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.craftmarket-quote-btn.craftmarket-btn--outline:hover { border-color: var(--color-primary); background: var(--color-primary); color: var(--color-primary-fg); }
.craftmarket-quote-btn.craftmarket-btn--outline.is-added:hover { border-color: var(--color-success); background: var(--color-success); color: #FFFFFF; }
.craftmarket-card .craftmarket-quote-btn { white-space: nowrap; }
/* Wholesale request on the photo (products that can also be bought): a frosted bar along the bottom,
   shown on hover / focus on desktop, always on touch screens. */
.craftmarket-card__over { position: absolute; right: 10px; bottom: 10px; left: 10px; z-index: 1; transition: opacity .2s ease, transform .2s ease; }
.craftmarket-card__over .craftmarket-quote-btn { min-height: 38px; border: 0; background: rgba(255, 255, 255, .92); box-shadow: var(--shadow-sm); color: var(--text-heading); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.craftmarket-card__over .craftmarket-quote-btn:hover { background: var(--color-primary); color: var(--color-primary-fg); }
.craftmarket-card__over .craftmarket-quote-btn.is-added { background: var(--color-success); color: #FFFFFF; }
.craftmarket-card__size { transition: opacity .2s ease; }
/* Touch screens show the photo button all the time: the size sits above it. */
@media (hover: none) {
  .craftmarket-card__media:has(.craftmarket-card__over) .craftmarket-card__size { bottom: 56px; }
}
@media (hover: hover) {
  .craftmarket-card__over { opacity: 0; transform: translateY(8px); }
  .craftmarket-card:hover .craftmarket-card__over,
  .craftmarket-card:focus-within .craftmarket-card__over,
  .craftmarket-card__over:has(.is-added) { opacity: 1; transform: none; }
  /* The size stays at the bottom and gives way to the button while it shows. */
  .craftmarket-card:is(:hover, :focus-within) .craftmarket-card__media:has(.craftmarket-card__over) .craftmarket-card__size,
  .craftmarket-card__media:has(.craftmarket-card__over .is-added) .craftmarket-card__size { opacity: 0; }
}

.craftmarket-card__tags { grid-area: tags; display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }

/* ---------- List style ---------- */
.craftmarket-card--list { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); }
.craftmarket-card--list .craftmarket-card__img { height: 100%; aspect-ratio: auto; min-height: 220px; }
/* Reading order: name, maker, rating, price + swatches, excerpt, then the buttons; centred beside the photo. */
.craftmarket-card--list .craftmarket-card__body {
  grid-template-columns: max-content minmax(0, 1fr);
  grid-template-areas:
    "title title"
    "meta meta"
    "rating rating"
    "price swatches"
    "excerpt excerpt"
    "actions actions"
    "tags tags";
  grid-template-rows: none;
  align-content: center;
  padding: 24px 28px;
}
.craftmarket-card--list .craftmarket-card__rating { grid-area: rating; }
.craftmarket-card--list .craftmarket-card__swatches { justify-self: start; }
.craftmarket-card--list .craftmarket-card__excerpt { grid-area: excerpt; max-width: 70ch; }
.craftmarket-card--list .craftmarket-card__actions { grid-template-columns: repeat(auto-fit, minmax(160px, max-content)); margin-top: 16px; }
:root[data-skin="jewelry"] .craftmarket-card--list .craftmarket-card__body { padding-block: 12px; padding-inline: 36px 0; } /* the skin drops the side padding of grid cards */
@media (max-width: 600px) {
  .craftmarket-card--list { grid-template-columns: minmax(0, 1fr); }
  .craftmarket-card--list .craftmarket-card__img { min-height: 0; aspect-ratio: 4 / 3; }
  .craftmarket-card--list .craftmarket-card__body { padding: 16px; }
  :root[data-skin="jewelry"] .craftmarket-card--list .craftmarket-card__body { padding-inline: 0; }
}

/* ---------- Skins ---------- */
:root[data-skin="jewelry"] .craftmarket-card { border-color: transparent; border-radius: 0; background: transparent; }
:root[data-skin="jewelry"] .craftmarket-card:hover { box-shadow: none; transform: none; }
:root[data-skin="jewelry"] .craftmarket-card__title { font-family: var(--font-heading); font-size: 20px; font-weight: var(--heading-weight); line-height: 1.2; }
:root[data-skin="jewelry"] .craftmarket-card__price { font-family: var(--font-body); font-size: 15px; font-weight: 500; letter-spacing: .02em; }
:root[data-skin="jewelry"] .craftmarket-card__body { padding-inline: 0; }
:root[data-skin="jewelry"] .craftmarket-cart-btn { border-color: var(--text-heading); background: transparent; color: var(--text-heading); font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
:root[data-skin="jewelry"] .craftmarket-cart-btn:hover { background: var(--text-heading); color: var(--bg-card); }

:root[data-skin="rattan"] .craftmarket-card { border-color: transparent; box-shadow: var(--shadow-xs); }

:root[data-skin="trade"] .craftmarket-card { border-radius: var(--radius-sm); }
:root[data-skin="trade"] .craftmarket-card:hover { transform: none; }
:root[data-skin="trade"] .craftmarket-card__price { font-family: var(--font-body); font-size: 17px; font-weight: 700; }
:root[data-skin="trade"] .craftmarket-card__body { padding: 12px 14px 14px; }

@media (max-width: 600px) {
  .craftmarket-card__body { grid-template-areas: "title" "meta" "price" "swatches" "actions" "tags"; grid-template-columns: minmax(0, 1fr); grid-template-rows: min-content min-content min-content min-content auto min-content; padding: 12px; }
  .craftmarket-card__wish { top: 8px; right: 8px; }
  .craftmarket-wish { width: 30px; height: 30px; }
  .craftmarket-wish svg { width: 15px; height: 15px; }
  .craftmarket-card__swatches { margin-top: 2px; }
  .craftmarket-card__title { font-size: 15px; }
  .craftmarket-card__price { font-size: 17px; }
  .craftmarket-card .craftmarket-quote-btn { gap: 4px; padding-inline: 8px; font-size: 12px; }
  /* Two cards a row: the photo keeps the status badge, the size chip and the wishlist only. The quote
     button on the photo would cover half of it (the product page still has "Add to Quote"). */
  .craftmarket-card--grid .craftmarket-card__over { display: none; }
  .craftmarket-card--grid .craftmarket-card__media .craftmarket-card__size { bottom: 8px; left: 8px; padding: 2px 8px; font-size: 11px; }
  .craftmarket-card--grid .craftmarket-card__badges { top: 8px; left: 8px; }
  .craftmarket-card--grid .craftmarket-card__price { font-size: 16px; line-height: 1.3; }
}

/* ---------- Artisan card (template-parts/cards/artisan.php: Home 1, artisan archive) ---------- */
.cma-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--bg-page); transition: box-shadow .25s ease, transform .25s ease; }
.cma-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.cma-card__img { display: block; aspect-ratio: 3 / 4; overflow: hidden; background: var(--bg-subtle); }
.cma-card__img img,
.cma-card__img .craftmarket-placeholder { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.cma-card:hover .cma-card__img img { transform: scale(1.04); }
.cma-card__body { display: grid; justify-items: start; gap: 4px; padding: 18px 18px 20px; }
.cma-card__country { margin: 0 0 2px; color: var(--color-primary); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.cma-card__name { margin: 0; font-size: 22px; line-height: 1.2; overflow-wrap: anywhere; }
.cma-card__name a { color: inherit; }
.cma-card__name a:hover { color: var(--color-primary); }
.cma-card__special { margin: 0; color: var(--text-secondary); font-size: 13px; }
.cma-card__body .craftmarket-link-arrow { gap: 6px; margin-top: 10px; color: var(--color-primary); font-size: 13px; font-weight: 600; }
.cma-card__body .craftmarket-link-arrow svg { width: 14px; height: 14px; }
@media (max-width: 600px) {
  .cma-card__body { padding: 12px; }
  .cma-card__name { font-size: 18px; }
  .cma-card__country { font-size: 11px; }
}