/* ul.products: griglia a tutta larghezza */
ul.products.columns-3,
ul.products.columns-4,
ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 6px !important;
  width: auto !important;
  max-width: calc(100% - 48px) !important;
  list-style: none !important;
  margin: 0 24px !important;
  padding: 0 !important;
  background: #e5ddd5 !important;
  float: none !important;
}
ul.products li.product {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #ffffff !important;
}

/* ================================================================
   FULL-WIDTH WOOCOMMERCE — rimuove sidebar Divi
   ================================================================ */
body.woocommerce #sidebar,
body.woocommerce-page #sidebar,
body.woocommerce #et_pb_sidebar_0,
body.woocommerce-page #et_pb_sidebar_0 {
  display: none !important;
}
body.woocommerce #left-area,
body.woocommerce-page #left-area {
  width: 100% !important;
  float: none !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
}
body.woocommerce .et_pb_gutters3 #left-area,
body.woocommerce-page .et_pb_gutters3 #left-area {
  width: 100% !important;
}
/* Container WooCommerce a piena larghezza */
body.woocommerce .et_pb_container,
body.woocommerce-page .et_pb_container {
  max-width: 100% !important;
  padding: 0 !important;
}
/* ── SCROLL FIX ── */
html { scroll-behavior: auto !important; overflow-x: hidden; }
body { overflow-x: hidden; overscroll-behavior: none; }
.et_pb_section, .et_pb_row, .et_pb_module, .et_pb_column {
  will-change: auto !important;
  backface-visibility: hidden;
}

/* ================================================================
   INTERNO77 RESTYLE — EXTRA CSS v3
   ================================================================ */

/* ── FONT HEADINGS ── */
h1, h2, h3, h4, h5, h6,
.et_pb_blurb_title, .woocommerce-loop-product__title,
.product_title, .entry-title,
.i77-card-title, .i77-cat-title, .i77-cat-title-plain,
.i77-single-product .product_title {
  font-family: "Outfit", system-ui, sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}
body, p, li, td, label, input, textarea, select,
.et_pb_text_inner, .et_pb_module_inner {
  font-family: "DM Sans", system-ui, sans-serif !important;
}

/* ── SCROLL: rimuovi smooth scroll e transizioni pesanti ── */
html { scroll-behavior: auto !important; }
.et_pb_section, .et_pb_row, .et_pb_module,
.et_pb_column, .et_pb_blurb {
  will-change: auto !important;
  transform: none !important;
  transition: none !important;
}
/* Mantieni solo hover su card (no sui layout) */
li.i77-product-card:hover,
li.i77-product-card:hover figure { transition: box-shadow 0.2s ease !important; }

/* ── GRID PRODOTTI ── */
ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 6px !important;
  list-style: none !important;
  margin: 0 24px !important;
  padding: 0 !important;
  background: var(--i77-warm-200) !important;
}
ul.products::after, ul.products::before { display: none !important; }
ul.products li.product {
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--i77-surface) !important;
  overflow: hidden !important;
}

/* ── IMMAGINE PRODOTTO: quadrata, riempie la card ── */
/* Approccio: contenitore block con altezza fissa, img assoluta */
ul.products li.product .woocommerce-loop-product__link,
ul.products li.product > a:first-of-type {
  display: block !important;
  width: 100% !important;
  position: relative !important;
  overflow: hidden !important;
  background: var(--i77-warm-100) !important;
  height: 260px !important; /* altezza fissa */
}
ul.products li.product .woocommerce-loop-product__link img,
ul.products li.product > a:first-of-type img,
ul.products li.product img.attachment-woocommerce_thumbnail,
ul.products li.product img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
  max-width: none !important;
}

/* ── CARD CUSTOM (mio template content-product.php) ── */
li.i77-product-card {
  display: flex !important;
  flex-direction: column !important;
}
a.i77-card-link { display: flex !important; flex-direction: column !important; height: 100% !important; color: inherit !important; text-decoration: none !important; }

figure.i77-card-image {
  display: block !important;
  width: 100% !important;
  height: 260px !important;
  overflow: hidden !important;
  position: relative !important;
  background: var(--i77-warm-100) !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}
figure.i77-card-image .i77-img-main,
figure.i77-card-image .i77-img-hover {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
}
.i77-img-main { z-index: 1 !important; }
.i77-img-hover { z-index: 2 !important; opacity: 0 !important; transition: opacity 0.3s ease !important; }
li.i77-product-card:hover .i77-img-hover { opacity: 1 !important; }
li.i77-product-card:hover .i77-img-main { transform: scale(1.03) !important; transition: transform 0.4s ease !important; }

.i77-badge-sale {
  position: absolute !important; top: 12px !important; left: 12px !important; z-index: 10 !important;
  background: var(--i77-accent) !important; color: #fff !important;
  font-family: "DM Sans", sans-serif !important; font-size: 9px !important;
  font-weight: 700 !important; letter-spacing: .1em !important; text-transform: uppercase !important;
  padding: 4px 10px !important; border-radius: 2px !important;
}

.i77-card-info { padding: 16px 18px 18px !important; flex: 1 !important; display: flex !important; flex-direction: column !important; gap: 6px !important; }
.i77-card-title {
  font-family: "Outfit", sans-serif !important;
  font-size: 13px !important; font-weight: 500 !important;
  line-height: 1.4 !important; margin: 0 !important;
  color: var(--i77-text) !important;
  overflow: hidden !important;
  display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important;
}
.i77-card-price { font-family: "DM Sans", sans-serif !important; font-size: 14px !important; font-weight: 500 !important; color: var(--i77-text) !important; margin: 0 !important; }
.i77-card-price ins { text-decoration: none !important; color: var(--i77-accent) !important; }
.i77-card-price del { color: var(--i77-warm-300) !important; font-size: 12px !important; }
.i77-btn-card {
  display: inline-block !important; margin-top: 8px !important;
  font-family: "DM Sans", sans-serif !important; font-size: 9px !important;
  font-weight: 700 !important; letter-spacing: .12em !important; text-transform: uppercase !important;
  color: var(--i77-text-mute) !important; border-bottom: 1px solid var(--i77-warm-200) !important;
  padding-bottom: 1px !important;
}
li.i77-product-card:hover .i77-btn-card { color: var(--i77-accent) !important; border-color: var(--i77-accent) !important; }

/* WooCommerce default titoli/prezzi (fallback) */
.woocommerce-loop-product__title {
  font-family: "Outfit", sans-serif !important; font-size: 13px !important;
  font-weight: 500 !important; padding: 14px 16px 4px !important; line-height: 1.4 !important;
  overflow: hidden !important; display: -webkit-box !important;
  -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important;
}
ul.products li.product .price {
  font-family: "DM Sans", sans-serif !important; font-size: 14px !important;
  font-weight: 500 !important; padding: 4px 16px 14px !important; color: var(--i77-text) !important;
}
ul.products li.product .price ins { color: var(--i77-accent) !important; text-decoration: none !important; }
ul.products li.product .price del { color: var(--i77-warm-300) !important; font-size: 12px !important; }

/* Sale badge WooCommerce default */
.woocommerce span.onsale {
  background: var(--i77-accent) !important; border-radius: 2px !important;
  font-family: "DM Sans", sans-serif !important; font-size: 9px !important;
  font-weight: 700 !important; top: 10px !important; left: 10px !important; right: auto !important;
}

/* ── ARCHIVE HEADER ── */
.i77-cat-hero { position: relative !important; height: 320px !important; background-size: cover !important; background-position: center !important; display: flex !important; align-items: flex-end !important; }
.i77-cat-hero::after { content: "" !important; position: absolute !important; inset: 0 !important; background: linear-gradient(to top, rgba(0,0,0,.6) 0%, transparent 60%) !important; }
.i77-cat-hero-inner { position: relative !important; z-index: 1 !important; padding: 36px 5% !important; color: #fff !important; }
.i77-cat-title { font-family: "Outfit", sans-serif !important; font-size: clamp(26px,4vw,48px) !important; font-weight: 600 !important; color: #fff !important; margin: 0 0 10px !important; }
.i77-cat-desc { font-size: 14px !important; color: rgba(255,255,255,.85) !important; max-width: 540px !important; margin: 0 !important; }
.i77-cat-header { padding: 40px 5% 28px !important; border-bottom: 1px solid var(--i77-warm-200) !important; }
.i77-cat-title-plain { font-family: "Outfit", sans-serif !important; font-size: clamp(22px,3vw,38px) !important; font-weight: 600 !important; margin: 0 0 6px !important; }

/* ── ARCHIVE TOOLBAR ── */
.i77-archive-wrap { background: var(--i77-bg) !important; }
.i77-archive-container { max-width: 1400px !important; margin: 0 auto !important; padding: 0 !important; }
.i77-archive-toolbar { display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 20px 24px !important; border-bottom: 1px solid var(--i77-warm-200) !important; font-family: "DM Sans", sans-serif !important; font-size: 12px !important; color: var(--i77-text-mute) !important; }
.woocommerce-result-count { margin: 0 !important; font-family: "DM Sans", sans-serif !important; font-size: 12px !important; }
.woocommerce-ordering select { font-family: "DM Sans", sans-serif !important; font-size: 12px !important; border: 1px solid var(--i77-warm-200) !important; border-radius: 2px !important; padding: 8px 12px !important; background: #fff !important; }

/* ── PAGINAZIONE ── */
.woocommerce-pagination ul { display: flex !important; justify-content: center !important; gap: 6px !important; list-style: none !important; padding: 32px 0 !important; margin: 0 !important; }
.woocommerce-pagination ul li a, .woocommerce-pagination ul li span { font-family: "DM Sans", sans-serif !important; font-size: 13px !important; padding: 7px 13px !important; border: 1px solid var(--i77-warm-200) !important; border-radius: 2px !important; }
.woocommerce-pagination ul li a:hover { background: var(--i77-text) !important; color: #fff !important; }
.woocommerce-pagination ul li span.current { background: var(--i77-accent) !important; color: #fff !important; border-color: var(--i77-accent) !important; }

/* ── SCHEDA PRODOTTO ── */
.i77-single-wrap { background: var(--i77-bg) !important; min-height: 60vh !important; }
.i77-single-grid { display: grid !important; grid-template-columns: 1fr 420px !important; gap: 56px !important; max-width: 1280px !important; margin: 0 auto !important; padding: 48px 5% !important; align-items: start !important; }
.i77-gallery-stage { width: 100% !important; aspect-ratio: 1/1 !important; overflow: hidden !important; background: var(--i77-warm-100) !important; border-radius: 4px !important; position: relative !important; }
.i77-gallery-stage img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; display: block !important; }
.i77-gallery-strip { display: flex !important; gap: 8px !important; margin-top: 10px !important; flex-wrap: wrap !important; }
.i77-thumb { width: 72px !important; height: 72px !important; overflow: hidden !important; cursor: pointer !important; border: 2px solid transparent !important; border-radius: 2px !important; background: var(--i77-warm-100) !important; }
.i77-thumb.active, .i77-thumb:hover { border-color: var(--i77-text) !important; }
.i77-thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
.i77-single-info { position: sticky !important; top: 88px !important; }
.i77-product-brand { font-family: "DM Sans", sans-serif !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: .14em !important; text-transform: uppercase !important; color: var(--i77-text-mute) !important; margin-bottom: 8px !important; }
.i77-product-brand a { color: inherit !important; }
.i77-single-product .product_title { font-size: clamp(20px,2.2vw,30px) !important; font-weight: 600 !important; margin: 0 0 18px !important; }
.i77-single-price { font-size: 22px !important; font-weight: 600 !important; margin-bottom: 20px !important; padding-bottom: 20px !important; border-bottom: 1px solid var(--i77-warm-200) !important; font-family: "DM Sans", sans-serif !important; }
.i77-single-price ins { text-decoration: none !important; color: var(--i77-accent) !important; }
.i77-single-price del { color: var(--i77-warm-300) !important; font-size: 17px !important; }
.i77-single-excerpt { font-size: 14px !important; color: var(--i77-text-mute) !important; line-height: 1.75 !important; margin-bottom: 24px !important; }
.i77-single-excerpt p { font-size: 14px !important; color: var(--i77-text-mute) !important; margin-bottom: 8px !important; }
.i77-cart-form { margin-bottom: 20px !important; }
.i77-qty-row { display: flex !important; gap: 10px !important; align-items: stretch !important; }
.i77-qty-row .quantity input { width: 64px !important; text-align: center !important; font-size: 15px !important; border: 1px solid var(--i77-warm-200) !important; border-radius: 2px !important; padding: 0 8px !important; }
.i77-add-to-cart { flex: 1 !important; background: var(--i77-text) !important; color: #fff !important; font-family: "DM Sans", sans-serif !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: .1em !important; text-transform: uppercase !important; border: none !important; border-radius: 2px !important; cursor: pointer !important; padding: 0 24px !important; min-height: 50px !important; }
.i77-add-to-cart:hover { background: var(--i77-accent) !important; }
.i77-trust-block { display: flex !important; flex-direction: column !important; gap: 10px !important; margin-top: 20px !important; border: 1px solid var(--i77-warm-200) !important; border-radius: 4px !important; padding: 18px !important; background: var(--i77-warm-100) !important; }
.i77-trust-item { display: flex !important; align-items: center !important; gap: 10px !important; font-size: 13px !important; color: var(--i77-text-mute) !important; font-family: "DM Sans", sans-serif !important; }
.i77-trust-item svg { flex-shrink: 0 !important; color: var(--i77-accent) !important; }
.i77-trust-item strong { color: var(--i77-text) !important; }
.i77-tabs-wrap { max-width: 1280px !important; margin: 0 auto !important; padding: 0 5% 56px !important; }

/* ── MOBILE ── */
@media (max-width: 980px) {
  .i77-single-grid { grid-template-columns: 1fr !important; gap: 28px !important; padding: 28px 5% !important; }
  .i77-single-info { position: static !important; }
  ul.products { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 767px) {
  ul.products { grid-template-columns: repeat(2, 1fr) !important; }
  figure.i77-card-image,
  ul.products li.product .woocommerce-loop-product__link,
  ul.products li.product > a:first-of-type { height: 200px !important; }
}

/* ================================================================
   DIVI et_shop_image FIX — immagini prodotto loop
   Divi wraps img in <span class="et_shop_image"> che collassa a 0px
   quando img ha position:absolute. Fix: dare altezza esplicita allo span.
   ================================================================ */
ul.products li.product .et_shop_image {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 1/1 !important;
  height: auto !important;
  overflow: hidden !important;
  background: var(--i77-warm-100) !important;
  flex-shrink: 0 !important;
}
ul.products li.product .et_shop_image img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
  max-width: none !important;
  transition: transform 0.4s ease !important;
}
ul.products li.product:hover .et_shop_image img {
  transform: scale(1.03) !important;
}
/* Rimuovi overlay Divi che copre le immagini */
ul.products li.product .et_overlay {
  display: none !important;
}
/* Fix: il link non serve come contenitore immagine ora che et_shop_image ha altezza */
ul.products li.product > a:first-of-type,
ul.products li.product .woocommerce-loop-product__link {
  height: auto !important;
  overflow: visible !important;
  display: block !important;
}

/* ================================================================
   LOAD MORE — bottone stile Kave Home
   ================================================================ */
.woocommerce-pagination { display: none !important; }
#i77-load-more-wrap { text-align: center !important; padding: 44px 0 !important; }
#i77-load-more {
  display: inline-block !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  background: var(--i77-text) !important;
  color: #fff !important;
  border: none !important;
  padding: 15px 56px !important;
  cursor: pointer !important;
  border-radius: 2px !important;
  transition: background .2s ease !important;
  min-width: 220px !important;
}
#i77-load-more:hover { background: var(--i77-accent) !important; }
#i77-load-more:disabled { opacity: .5 !important; cursor: default !important; }

/* ================================================================
   GRIGLIA: margini laterali + larghezza corretta (override finale)
   ================================================================ */
ul.products.columns-3,
ul.products.columns-4,
ul.products {
  width: auto !important;
  max-width: calc(100% - 144px) !important;
  margin-left: 72px !important;
  margin-right: 72px !important;
  gap: 12px !important;
}
@media (max-width: 980px) {
  ul.products.columns-3,
  ul.products.columns-4,
  ul.products { max-width: calc(100% - 96px) !important; margin-left: 48px !important; margin-right: 48px !important; gap: 10px !important; }
}
@media (max-width: 767px) {
  ul.products.columns-3,
  ul.products.columns-4,
  ul.products { max-width: calc(100% - 48px) !important; margin-left: 24px !important; margin-right: 24px !important; gap: 8px !important; }
}

/* ================================================================
   HOMEPAGE — griglia Top Sellers allineata ai box categoria
   Rimuove i margini fissi delle pagine categoria, usa il layout Divi
   ================================================================ */
.et_pb_shop ul.products.columns-4,
.et_pb_shop ul.products {
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  gap: 12px !important;
}
/* Font e stile card anche nella homepage */
.et_pb_shop ul.products li.product .et_shop_image {
  aspect-ratio: 1/1 !important;
}