/**
 * DomShop — Card redesign (Concept C)
 *
 * Riscrive il look delle .ds-card (home best seller, shop archive, search,
 * related products, ricerca) al nuovo design 2026: 4:5 portrait, rounded 22px,
 * shadow lift on hover, badge nero solid, wishlist pill bianca, due CTA
 * stacked (Aggiungi al carrello giallo #FFC107 + Acquista ora nero), verde
 * WhatsApp per contact-only, grigio disabled per esauriti.
 *
 * Caricato dopo style.css come dipendenza → vince per cascata, niente
 * modifiche ai template del tema.
 */

/* =========================================================================
   1) CARD CONTAINER — borderless + 4:5
   ========================================================================= */
.ds-card {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  display: flex !important;
  flex-direction: column;
  gap: 14px;
  padding: 0 !important;
  height: 100%;
}

/* MEDIA — 4:5 portrait, rounded 22px, hover lift */
.ds-card__media {
  position: relative !important;
  aspect-ratio: 4 / 5 !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  background: var(--ds-surface-2, #f1f1ec) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .06) !important;
  transition: transform .35s cubic-bezier(.16,1,.3,1),
              box-shadow .35s cubic-bezier(.16,1,.3,1) !important;
  flex: 0 0 auto !important;
}
.ds-card:hover .ds-card__media {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .12) !important;
}
.ds-card__imgLink {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}
.ds-card__img {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform .6s cubic-bezier(.16,1,.3,1) !important;
}
.ds-card:hover .ds-card__img { transform: scale(1.04); }

/* =========================================================================
   2) BADGE — pill nero solid top-left (BEST SELLER, NUOVO, ecc.)
   ========================================================================= */
.ds-card__badge,
.ds-card__badge--bestseller,
.ds-sectionsell .ds-card__badge--bestseller {
  position: absolute !important;
  top: 14px !important;
  left: 14px !important;
  z-index: 3 !important;
  background: var(--ds-black, #2b2b2b) !important;
  color: #fff !important;
  border: none !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
}

/* =========================================================================
   3) WISHLIST — pill bianca top-right, attivo cuore rosso
   ========================================================================= */
.ds-wishlist-btn--card {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 999px !important;
  background: #fff !important;
  border: none !important;
  color: var(--ds-black, #2b2b2b) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .10) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  padding: 0 !important;
  transition: transform .2s, background .2s;
}
.ds-wishlist-btn--card:hover { transform: scale(1.05); }
.ds-wishlist-btn--card[data-in-wishlist="1"] { color: #e63946 !important; }
.ds-wishlist-btn--card svg { width: 18px; height: 18px; }

/* =========================================================================
   4) BODY — title, price chip, rating, CTA stack
   ========================================================================= */
.ds-card__body {
  background: transparent !important;
  padding: 0 2px !important;
  display: flex !important;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 auto;
}

.ds-card__title {
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: -.01em !important;
  margin: 0 !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.25em * 2);
}
.ds-card__title a {
  color: var(--ds-black, #2b2b2b) !important;
  text-decoration: none !important;
}
.ds-card__title a:hover { text-decoration: none !important; opacity: .8; }

/* Price as gray pill chip */
.ds-card__price {
  display: inline-flex !important;
  align-items: center;
  align-self: flex-start;
  background: var(--ds-surface-2, #f1f1ec) !important;
  padding: 5px 12px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--ds-black, #2b2b2b) !important;
  margin: 0 !important;
}
.ds-card__price .woocommerce-Price-amount { font-weight: 700; }
.ds-card__price del { opacity: .55; margin-right: 6px; font-weight: 500; }
.ds-card__price ins { text-decoration: none; }

/* Rating row */
.ds-card__rating {
  display: flex !important;
  align-items: center;
  gap: 8px;
  min-height: auto !important;
  font-size: 11px;
  color: var(--ds-muted, rgba(0, 0, 0, .6)) !important;
}
.ds-card__ratingText { font-weight: 500; font-size: 11px; }

/* CTA stack: bottoni verticali — `margin-top: auto` per spingere in fondo */
.ds-card__cta,
.ds-sectionsell .ds-card .ds-card__cta,
.ds-productcarousel .ds-card .ds-card__cta,
ul.products li.product .ds-card__cta {
  margin-top: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding-top: 6px;
}

/* =========================================================================
   EQUAL HEIGHT: forza tutti i flex container (carousel + grid prodotti)
   ad allungare le card alla altezza max. Combinato con margin-top:auto
   sul CTA, ogni bottone risulta sempre allineato in fondo qualsiasi sia
   il contenuto sopra (con/senza rating, titolo 1 o 2 righe, ecc.).
   ========================================================================= */
.ds-sectionsell__track,
.ds-sectionsell .products,
ul.products,
.ds-productcarousel .ds-sectionsell__track {
  align-items: stretch !important;
}
.ds-sectionsell__item,
.ds-sectionsell .ds-card,
ul.products li.product,
ul.products li.product.ds-card,
.ds-productcarousel .ds-card {
  align-self: stretch !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
}
.ds-card__ctaRow {
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  width: 100%;
}

/* =========================================================================
   5) CTA BUTTONS
   ========================================================================= */

/* Base shape per tutti i CTA dentro card */
.ds-card .add_to_cart_button,
.ds-card .ajax_add_to_cart,
.ds-card a.button.product_type_simple,
.ds-card .ds-btn--buy-now,
.ds-card .ds-btn--secondary,
.ds-card .ds-btn--whatsapp,
.ds-card .ds-btn--primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
  width: 100% !important;
  min-height: 44px;
  padding: 12px 16px !important;
  border: none !important;
  border-radius: 12px !important;
  font-family: var(--ds-font, "Inter", system-ui, sans-serif) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
  text-align: center !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: transform .15s, box-shadow .2s, background .2s, filter .2s;
  box-sizing: border-box !important;
  line-height: 1;
}
.ds-card .add_to_cart_button:hover,
.ds-card .ajax_add_to_cart:hover,
.ds-card .ds-btn--buy-now:hover,
.ds-card .ds-btn--whatsapp:hover,
.ds-card .ds-btn--secondary:hover,
.ds-card .ds-btn--primary:hover {
  transform: translateY(-1px);
}
.ds-card .add_to_cart_button:active,
.ds-card .ajax_add_to_cart:active,
.ds-card .ds-btn--buy-now:active,
.ds-card .ds-btn--whatsapp:active,
.ds-card .ds-btn--secondary:active,
.ds-card .ds-btn--primary:active {
  transform: translateY(0);
}

/* 1) Aggiungi al carrello — giallo #FFC107 */
.ds-card .add_to_cart_button,
.ds-card .ajax_add_to_cart,
.ds-card a.button.product_type_simple {
  background: #FFC107 !important;
  color: var(--ds-black, #2b2b2b) !important;
  box-shadow: 0 2px 8px rgba(255, 193, 7, .22);
}
.ds-card .add_to_cart_button:hover,
.ds-card .ajax_add_to_cart:hover,
.ds-card a.button.product_type_simple:hover {
  background: #ffb300 !important;
  box-shadow: 0 6px 16px rgba(255, 193, 7, .32);
}

/* WC mostra "Visualizza carrello" dopo l'add — manteniamo lo stesso look */
.ds-card .added_to_cart {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  margin-top: 4px;
  padding: 10px 14px !important;
  border: 1px solid var(--ds-border, rgba(0,0,0,.12)) !important;
  border-radius: 12px !important;
  background: #fff !important;
  color: var(--ds-black, #2b2b2b) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

/* 2) Acquista ora — nero */
.ds-card .ds-buy-now { margin: 0 !important; }
.ds-card .ds-btn--buy-now {
  background: var(--ds-black, #2b2b2b) !important;
  color: #fff !important;
}
.ds-card .ds-btn--buy-now:hover {
  background: #000 !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .20);
}

/* 3) Contattami — verde WhatsApp (contact-only) */
.ds-card .ds-btn--whatsapp,
.ds-card .ds-btn--primary.ds-btn--whatsapp {
  background: #25D366 !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(37, 211, 102, .25);
}
.ds-card .ds-btn--whatsapp:hover {
  background: #1ebe5d !important;
  box-shadow: 0 6px 16px rgba(37, 211, 102, .35);
}
.ds-card .ds-btn--whatsapp svg {
  width: 15px; height: 15px;
  fill: currentColor;
}

/* 4) Secondary (Visualizza prodotto fallback) */
.ds-card .ds-btn--secondary {
  background: var(--ds-black, #2b2b2b) !important;
  color: #fff !important;
}

/* Loading state WC */
.ds-card .add_to_cart_button.loading {
  opacity: .85;
  pointer-events: none;
}

/* =========================================================================
   6) STATI: out of stock, etc.
   ========================================================================= */
.ds-card.outofstock .ds-card__img,
.ds-card .outofstock .ds-card__img {
  filter: grayscale(.45) opacity(.85);
}
.ds-card.outofstock .add_to_cart_button,
.ds-card .button.disabled,
.ds-card .button[disabled] {
  background: var(--ds-surface-2, #f1f1ec) !important;
  color: var(--ds-muted, rgba(0, 0, 0, .6)) !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  pointer-events: none;
}
.ds-card.outofstock .add_to_cart_button:hover {
  transform: none;
}

/* =========================================================================
   7) Override specifici per .ds-sectionsell (home best seller carousel)
   ========================================================================= */
.ds-sectionsell .ds-card { height: 100% !important; }
.ds-sectionsell .ds-card__media { aspect-ratio: 4 / 5 !important; }
.ds-sectionsell .ds-card__title { min-height: calc(1.25em * 2); }

/* Il bottone fallback "Acquista la tua box" del sectionsell condivide stile buy-now */
.ds-sectionsell .ds-card .ds-btn.ds-btn--primary:not(.ds-btn--whatsapp) {
  background: #FFC107 !important;
  color: var(--ds-black, #2b2b2b) !important;
  box-shadow: 0 2px 8px rgba(255, 193, 7, .22);
}
.ds-sectionsell .ds-card .ds-btn.ds-btn--primary:not(.ds-btn--whatsapp):hover {
  background: #ffb300 !important;
  box-shadow: 0 6px 16px rgba(255, 193, 7, .32);
}

/* =========================================================================
   8) Mobile tweaks
   ========================================================================= */
@media (max-width: 640px) {
  .ds-card { gap: 10px; }
  .ds-card__title { font-size: 15px !important; }
  .ds-card .add_to_cart_button,
  .ds-card .ajax_add_to_cart,
  .ds-card .ds-btn--buy-now,
  .ds-card .ds-btn--whatsapp,
  .ds-card .ds-btn--secondary {
    font-size: 12px !important;
    padding: 11px 12px !important;
  }
  .ds-card__badge--bestseller,
  .ds-card__badge { font-size: 9px !important; padding: 5px 10px !important; }
  .ds-wishlist-btn--card { width: 34px !important; height: 34px !important; }
}


/* =========================================================================
   FIX MOBILE: testo "Aggiungi al carrello" non deve mai andare a capo
   nel grid 2-col mobile. Forziamo single line + riduciamo font/padding.
   ========================================================================= */
.ds-card .add_to_cart_button,
.ds-card .ajax_add_to_cart,
.ds-card a.button.product_type_simple {
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}

@media (max-width: 640px) {
	.ds-card .add_to_cart_button,
	.ds-card .ajax_add_to_cart,
	.ds-card a.button.product_type_simple {
		font-size: 12px !important;
		padding: 10px 8px !important;
		letter-spacing: 0 !important;
	}
	.ds-card .ds-btn--buy-now,
	.ds-card .ds-btn--secondary {
		font-size: 12px !important;
		padding: 10px 8px !important;
		letter-spacing: 0 !important;
	}
}

@media (max-width: 380px) {
	.ds-card .add_to_cart_button,
	.ds-card .ajax_add_to_cart,
	.ds-card a.button.product_type_simple,
	.ds-card .ds-btn--buy-now,
	.ds-card .ds-btn--secondary {
		font-size: 11px !important;
		padding: 9px 6px !important;
	}
}