/* =========================
   Product Card (Woo Loop)
========================= */

.vcom-product-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  list-style: none;
  overflow: hidden;

  background: var(--vcom-bg);
  border: 1px solid var(--vcom-border);
  border-radius: var(--vcom-radius);

  transition: transform .2s ease, box-shadow .2s ease;
}

.vcom-product-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--vcom-shadow);
}

/* =========================
   Image
========================= */

.vcom-product-card__image {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #ffffff;;

  flex: 0 0 auto;
}

.vcom-product-card__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.vcom-product-card__image > a,
a.vcom-product-card__image {
  display: block;
  height: auto;
}

/* =========================
   Badges (layout only)
========================= */

.vcom-badges {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  z-index: 5;
  pointer-events: none;
}

/* =========================
   Body
========================= */

.vcom-product-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: 14px;

  position: relative;
  z-index: 2;
}

.vcom-product-card__category {
  font-size: .8rem;
  color: var(--vcom-muted);
}

.vcom-product-card__title {
  font-size: 1rem;
  margin: 0;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;

  min-height: 2.6em;
}

/* Produktkort */
.vcom-product-card__title a {
  color: var(--vcom-text);
  text-decoration: none;
}

.vcom-product-card__title a:hover {
  color: var(--vcom-text);
  text-decoration: underline;
}

/* =========================
   Price (layout only)
========================= */

.vcom-product-card__price {
  min-height: 2.6rem;
  display: flex;
  align-items: center;
}

.vcom-product-card__price .price {
  display: flex;
  flex-direction: row-reverse;
  gap: .45rem;
  align-items: baseline;
  line-height: 1.15;
  white-space: nowrap;
}

/* =========================
   Price (styling fix)
========================= */

/* Stoppa text-decoration-läckage */
.vcom-product-card__price .price,
.vcom-product-card__price .price * {
  text-decoration: none;
}

/* Ordinarie pris (del) */
.vcom-product-card__price del {
  color: var(--vcom-muted);
  opacity: .85;
  text-decoration: line-through;
}

/* Säkerställ line-through även i bdi/amount */
.vcom-product-card__price del *,
.vcom-product-card__price del bdi,
.vcom-product-card__price del .woocommerce-Price-amount {
  text-decoration: line-through;
}

/* Rea-pris */
.vcom-product-card__price ins {
  background: transparent;
  color: #d90429;
  font-weight: 700;
}

.vcom-product-card__price ins .woocommerce-Price-amount {
  color: inherit;
  font-weight: inherit;
}

/* Fallback om Woo skippar <ins> */
.vcom-product-card.on-sale
.vcom-product-card__price .woocommerce-Price-amount {
  color: var(--vcom-accent);
  font-weight: 700;
}

/* =========================
   Actions
========================= */

.vcom-product-card__actions {
  margin-top: auto;
  position: relative;
  z-index: 2;
}

.vcom-product-card__actions .button {
  width: 100%;
  text-align: center;
}

/* =========================
   Responsive
========================= */

@media (max-width: 480px) {
  .vcom-product-card__price {
    min-height: 2.2rem;
  }
}

/* Woo cleanup */
.woocommerce .products .product .woocommerce-loop-product__link {
  margin: 0;
}

/* =========================
   Sale – ALWAYS RED
========================= */

.vcom-product-card.on-sale {
  border: 2px solid #d90429 !important;
  box-shadow: 0 0 0 3px rgba(217,4,41,.15);
}
/* SALE PRICE – ALWAYS RED */
.vcom-product-card.on-sale ins .woocommerce-Price-amount {
  color: #d90429 !important;
}


/* =========================================
   PRODUCT CARD – TITLE TWEAK
========================================= */

.vcom-product-card__title,
.vcom-product-card__title a {
  font-family: var(--vcom-font) !important;
  font-weight: 650;
  letter-spacing: 0;
  line-height: 1.3;
}

/* ==========================================
   PRODUCT CARD – ADDED STATE
========================================== */

.vcom-product-card.is-added {
  box-shadow:
    0 0 0 2px var(--vcom-primary),
    0 8px 22px rgba(0,0,0,.12);
  transition: box-shadow .25s ease;
}

/* =========================
   ARTICLE CARD
========================= */

.vcom-article-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  list-style: none;
  overflow: hidden;

  background: var(--vcom-bg);
  border: 1px solid var(--vcom-border);
  border-radius: var(--vcom-radius);

  transition: transform .2s ease, box-shadow .2s ease;
}

.vcom-article-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--vcom-shadow);
}

/* =========================
   IMAGE
========================= */

.vcom-article-card__image {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  display: block;
}

.vcom-article-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =========================
   BODY
========================= */

.vcom-article-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: 16px;
}

.vcom-article-card__title {
  font-size: 1.1rem;
  margin: 0;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.vcom-article-card__title a {
  color: var(--vcom-text);
  text-decoration: none;
}

.vcom-article-card__title a:hover {
  text-decoration: underline;
}

.vcom-article-card__excerpt {
  font-size: .9rem;
  color: var(--vcom-muted);

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.vcom-article-card__actions {
  margin-top: auto;
}

/* =========================
   SLIDER LAYOUT
========================= */

.vcom-article-list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc(100% / 3 - 16px);
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 10px;
}

.vcom-article-card {
  scroll-snap-align: start;
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 1024px) {
  .vcom-article-list {
    grid-auto-columns: calc(100% / 2 - 12px);
  }
}

@media (max-width: 600px) {
  .vcom-article-list {
    grid-auto-columns: 85%;
    padding-left: 16px;
  }
}

.vcom-badges .badge {
  background: rgba(0,0,0,0.65);
  color: #fff;

  font-size: .75rem;
  font-weight: 600;

  padding: 6px 12px;
  border-radius: 999px;

  backdrop-filter: blur(6px);

  text-transform: uppercase;
  letter-spacing: .04em;
}