/* CRISTAL DE LA MAISON D'ITALIE - V3.8 Preview, incremental after V3.7. */
/* Restore the compact, six-across category cards from V3.4 (design-v1.css).
   V3.7 enlarged every image via 3 columns and min-height:240px. */
body.design-v2 .cdmi-category-grid {
  grid-template-columns:repeat(6,minmax(0,1fr)) !important;
  gap:12px !important;
}
body.design-v2 .cdmi-category-photo {
  aspect-ratio:1.03 !important;
  min-height:0 !important;
  height:auto !important;
  background:#eee6db;
}
body.design-v2 .cdmi-category-card .cdmi-no-photo {
  min-height:0 !important;
  aspect-ratio:1.03;
  font-size:clamp(12px,1vw,15px);
}
body.design-v2 .cdmi-category-photo img {
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
}
body.design-v2 .cdmi-category-label {
  min-height:0 !important;
  flex-direction:column !important;
  justify-content:center !important;
  align-items:center !important;
  gap:2px !important;
  text-align:center !important;
  padding:10px 3px !important;
  font-size:clamp(12px,1.1vw,16px) !important;
  line-height:1.3 !important;
}
body.design-v2 .cdmi-category-label span:first-child {
  overflow-wrap:break-word;
  hyphens:auto;
}
@media(max-width:1023px) {
  body.design-v2 .cdmi-category-grid {
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:9px !important;
  }
}
@media(max-width:640px) {
  body.design-v2 .cdmi-category-grid {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:9px !important;
  }
  body.design-v2 .cdmi-category-label {
    padding:9px 3px !important;
    font-size:14px !important;
  }
}
/* Forced-dark website mode may transform CSS but leave PNG pixels unchanged.
   The official gold motif is untouched. Add a small white halo to the black
   lettering layer of the EXISTING logo so it remains readable on both light
   and dark backgrounds. This does not redraw or replace the brand artwork. */
body.design-v2 #main-header .cdmi-official-logo-frame .cdmi-logo-ink,
body.design-v2 #page-loader .cdmi-official-logo-frame .cdmi-logo-ink {
  filter: brightness(0)
    drop-shadow(1px 0 0 rgba(255,255,255,.98))
    drop-shadow(-1px 0 0 rgba(255,255,255,.98))
    drop-shadow(0 1px 0 rgba(255,255,255,.98))
    drop-shadow(0 -1px 0 rgba(255,255,255,.98)) !important;
}
/* Stable contrast in the hero: no more light-on-light outlined button when
   browsers auto-darken page backgrounds. Visually distinct from golden CTA. */
body.design-v2 main .cdmi-hero .cdmi-hero-buttons .cdmi-btn-outline,
body.design-v2 main .cdmi-hero .cdmi-hero-buttons .cdmi-btn-outline:hover,
body.design-v2 main .cdmi-hero .cdmi-hero-buttons .cdmi-btn-outline:focus-visible {
  background-color:#4d3827 !important;
  border:2px solid #ffffff !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  text-decoration:none !important;
}
body.design-v2 main .cdmi-hero .cdmi-hero-buttons .cdmi-btn-outline span,
body.design-v2 main .cdmi-hero .cdmi-hero-buttons .cdmi-btn-outline:hover span {
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}
/* Fallback for native/browser dark theme detection. A user-agent that forces
   its own algorithm can still override site CSS (as the test-couleurs page showed). */
@media(prefers-color-scheme:dark) {
  body.design-v2 #main-header .cdmi-official-logo-frame .cdmi-logo-ink {
    filter: brightness(0)
      drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff)
      drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff) !important;
  }
}