/** Shopify CDN: Minification failed

Line 346:19 Expected identifier but found whitespace
Line 346:20 Unexpected "0.0rem"
Line 375:1 Unexpected "/"

**/
/* ===============================
   CASA ROMANO – FINAL BALANCED STYLE (TIPPS + KAUFEN)
   =============================== */

.cr-article {
  max-width: 760px; /* 🔥 etwas breiter = besser für Shop */
  margin: 0 auto;
  padding: 50px 20px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #1f1f1f;
}

/* HERO IMAGE */
.cr-hero img {
  width: 100%;
  max-width: 460px;
  display: block;
  margin: 0 auto 40px;
}






/* SUBLINE */
.cr-subline {
  text-align: center;
  font-size: 15px;
  color: #666;
  margin-bottom: 20px;
}

.cr-intro {
  font-size: 16px;
  line-height: 1.85;
  text-align: left; /* 🔥 DAS ist die Änderung */
  margin: 0 auto 40px;
  color: #333;
  max-width: 520px;
}


/* SECTIONS */
.cr-section {
  margin-bottom: 30px;
}

.cr-section h2 {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 6px;
}

.cr-section p {
  font-size: 15.5px;
  line-height: 1.75;
  color: #444;
}

/* TIP */
.cr-tip {
  background: #f8f8f8;
  padding: 18px 22px;
  margin: 45px 0;
  border-left: 2px solid #111;
}

.cr-tip span {
  display: block;
  font-size: 12.5px;
  letter-spacing: 0.6px;
  color: #777;
  margin-bottom: 6px;
}

.cr-tip p {
  font-size: 15.5px;
  line-height: 1.75;
}

/* DIVIDER */
.cr-divider {
  height: 1px;
  background: #eee;
  margin: 45px auto;
  width: 60%; /* 🔥 eleganter */
}

/* CTA */
.cr-cta {
  text-align: center;
  margin-top: 15px;
}

.cr-cta a {
  font-size: 17px;
  text-decoration: none;
  border-bottom: 2px solid #111;
  color: #111;
  padding-bottom: 2px;
  letter-spacing: 0.3px;
  transition: 0.2s;
}

/* 🔥 Zweiter CTA (Tipps / Secondary) */
.cr-cta.secondary a {
  font-size: 14px;
  color: #666;
  border-bottom: 1px solid #aaa;
}

.cr-cta a:hover {
  opacity: 0.6;
}

/* Secondary CTA (kleiner Link darunter) */
.cr-cta.secondary {
  margin-top: 8px;
}

.cr-cta.secondary a {
  font-size: 14px; /* 🔥 kleiner */
  color: #777;     /* 🔥 dezenter */
  border-bottom: 1px solid #bbb;
  font-weight: 400;
}












/* Artikelboxen Preis mehr rechts und erwas höcher */
/* Textblock korrekt ausrichten */



/*Nr PC /* Textblock korrekt ausrichten */
@media screen and (min-width: 750px) {
  .card__information {
  padding: 16px 8px 16px 16px !important;
  text-align: left;
  }
 }  


@media (max-width: 749px) {
  .card__information {
  padding: 16px 0px 0px 0px !important;
  text-align: left;
  }
}





  
/* Titel Abstand sauber */
.card__information .card__heading {
  margin-left: 0 !important;
}


/* Preis nur leicht verschieben */
.card__information .price {
  margin-top:  18px !important;
  margin-left: 5px !important;
  font-weight: 600;
}







/* Artikelboxen Preis + Fett ändern */
/* Desktop */
.card__information .price .price-item {
  font-size: 17px !important;
  font-weight: 500 !important;
}

/* Mobile (unter 768px) */
@media screen and (max-width: 768px) {
  .card__information .price .price-item {
    font-size: 15px !important;
    font-weight: 500 !important;
  }
}








/* Desktop-Schriftgrösse Artikel Text: Mobile bleibt unverändert (unter 750px) */

@media screen and (min-width: 750px) {
  :root {
    --font-body-scale: 1.1;
  }
}









/* Abstand zwischen Titel und Preis reduzieren */
.card-information {
  gap: 0 !important;
}







/* Vertikaler Abstand zwischen Produktkarten */
.product-grid {
  row-gap: 3rem;
}









/* ================================================
   IN DEN WARENKORB BUTTON – Produktraster
   ================================================ *

 /* Desktop-PC:  anpassen */
@media screen and (min-width: 750px) {
  .quick-add__submit {
    min-width: unset !important;
    min-height: unset !important;
    height: 3.7rem !important;
    width: 65% !important;
    margin: 0 auto !important;
    display: block !important;
    padding: 0.3rem 1rem !important;
    font-size: 1.4rem !important;
    line-height: 1 !important;
  }
} 


/* Mobile:  anpassen */
@media screen and (max-width: 749px) {
  .quick-add__submit {
    font-size: 1.25rem !important;
    min-height: unset !important;
    height: 3.9rem !important;
    line-height: 1 !important;
  }
}





/* Mobile:  Preis mehr nachh rechts anpassen */
@media screen and (max-width: 768px) {
  .card__information .price {
    transform: translateX(5px);
  }
}



@media screen and (max-width: 749px) {
  .card__information .price {
    margin-top: 36px !important;
  }
}




/* Color 16, das preise weiss werden wenn hintergrund schwarz ist jetzt asukommentiert */
/*
#shopify-section-template--25997394608393__featured_collection_3NRYj7 .price,
#shopify-section-template--25997394608393__featured_collection_3NRYj7 .price-item,
#shopify-section-template--25997394608393__featured_collection_3NRYj7 .price__regular,
#shopify-section-template--25997394608393__featured_collection_3NRYj7 .price__sale {
  color: #FFFFFF !important;
  --color-foreground: 255, 255, 255 !important;
}
*/






/* Announcement Bar Schrift anpassen */
.announcement-bar__message {
  font-size: 14px; /* z.B. 14px oder 16px */
  font-weight: 500; /* 400 = normal, 600 = kräftiger */
  letter-spacing: 0.3px; /* optional eleganter */
}









/* ============================================
   🖥️ CASA ROMANO – Kategorienboxen Grösse
   Nur die markierten Werte ändern
   ============================================ */


/*
:root {
  --kachel-hoehe: 260px;        /* ← Höhe der Boxen */
  --kachel-abstand: 0.0rem;     /* ← Abstand zwischen Boxen */
  --kachel-radius: 15px;        /* ← Abrundung der Ecken */
  --kachel-grid-breite: 1400px; /* ← Max. Gesamtbreite */
  --kachel-scale: 0.90;         /* ← NUR DIESE ZAHL: 1.0 = 100%, 0.90 = 90% */
}

@media screen and (min-width: 1024px) {

  .kachel-grid-casa {
    max-width: var(--kachel-grid-breite) !important;
    margin: 5px auto 2rem auto !important;
    gap: var(--kachel-abstand) !important;
    grid-template-columns: repeat(5, 1fr) !important;
  }

  .kachel-casa {
    height: var(--kachel-hoehe) !important;
    transform: scale(var(--kachel-scale)) !important;
    transform-origin: top center !important;
  }

  .kachel-casa img {
    border-radius: var(--kachel-radius) !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

}
*/






/* Titel Startseite oben Header */
#shopify-section-template--25997394247945__image_banner_mKhtBp .banner__heading {
  font-size: 2.5rem; /* Mobile */
}

@media (min-width: 750px) {
  #shopify-section-template--25997394247945__image_banner_mKhtBp .banner__heading {
    font-size: 3.2rem; /* Desktop */
  }
}


/* Untertitel oben Header*/
#shopify-section-template--25997394247945__image_banner_mKhtBp .banner__text {
  font-size: 2.0rem; /* Mobile */
}

@media (min-width: 750px) {
  #shopify-section-template--25997394247945__image_banner_mKhtBp .banner__text {
    font-size: 2.2rem; /* Desktop */
  }
}



/* FORCE 4 Spalten Desktop */
@media screen and (min-width: 990px) {
  .collection-list.grid--4-col-desktop {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}




