/** Shopify CDN: Minification failed

Line 346:0 Unexpected "}"

**/
/**
 * JULEPS FINE FOOD - Custom Styles
 * 
 * Styles personnalisés pour le thème Juleps.
 * Ce fichier contient les overrides et styles custom basés sur les variables.
 * 
 * Structure:
 * 1. Reset & Base
 * 2. Typographies
 * 3. Boutons
 * 4. Formulaires
 * 5. Composants custom
 */

/* ========================================
   1. RESET & BASE
   ======================================== */

* {
  box-sizing: border-box;
}

body {
  font-family: var(--juleps-font-primary);
  font-size: var(--juleps-font-size-body);
  font-weight: var(--juleps-font-weight-regular);
  line-height: var(--juleps-line-height-normal);
  color: var(--juleps-black);
  background-color: #FCF6F3 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Force background sur les containers Dawn */
#MainContent,
.shopify-section,
main {
  background-color: transparent !important;
}

/* ========================================
   2. TYPOGRAPHIES
   ======================================== */

h1,
.juleps-h1 {
  font-family: var(--juleps-font-primary);
  font-size: var(--juleps-font-size-h1);
  font-weight: var(--juleps-font-weight-semibold); /* Montserrat SemiBold */
  line-height: var(--juleps-line-height-tight);
  color: var(--juleps-black);
  margin: 0 0 var(--juleps-spacing-5) 0;
}

h2,
.juleps-h2 {
  font-family: var(--juleps-font-primary);
  font-size: var(--juleps-font-size-h2);
  font-weight: var(--juleps-font-weight-regular); /* Montserrat Regular */
  line-height: var(--juleps-line-height-tight);
  color: var(--juleps-black);
  margin: 0 0 var(--juleps-spacing-4) 0;
}

h3,
.juleps-h3 {
  font-family: var(--juleps-font-primary);
  font-size: var(--juleps-font-size-h3);
  font-weight: var(--juleps-font-weight-regular); /* Montserrat Regular */
  line-height: var(--juleps-line-height-tight);
  color: var(--juleps-black);
  margin: 0 0 var(--juleps-spacing-4) 0;
}

h4,
.juleps-h4 {
  font-family: var(--juleps-font-primary);
  font-size: var(--juleps-font-size-h4);
  font-weight: var(--juleps-font-weight-regular);
  line-height: var(--juleps-line-height-normal);
  color: var(--juleps-black);
  margin: 0 0 var(--juleps-spacing-3) 0;
}

p {
  margin: 0 0 var(--juleps-spacing-4) 0;
}

a {
  color: var(--juleps-green-dark);
  text-decoration: none;
  transition: color var(--juleps-transition-fast);
}

a:hover {
  color: var(--juleps-green-darker);
}

/* ========================================
   3. BOUTONS
   ======================================== */

.juleps-btn {
  display: inline-block;
  padding: var(--juleps-spacing-3) var(--juleps-spacing-6);
  font-family: var(--juleps-font-primary);
  font-size: var(--juleps-font-size-button);
  font-weight: var(--juleps-font-weight-semibold);
  line-height: 1;
  text-align: center;
  text-decoration: none;
  border: var(--juleps-border-width) solid transparent;
  border-radius: var(--juleps-radius-md);
  cursor: pointer;
  transition: all var(--juleps-transition-fast);
}

/* Bouton primaire - Vert */
.juleps-btn-primary {
  background-color: var(--juleps-green-dark);
  color: var(--juleps-white);
  border-color: var(--juleps-green-dark);
}

.juleps-btn-primary:hover {
  background-color: var(--juleps-green-darker);
  border-color: var(--juleps-green-darker);
  color: var(--juleps-white);
}

/* Bouton secondaire - Terracotta */
.juleps-btn-secondary {
  background-color: var(--juleps-orange);
  color: var(--juleps-white);
  border-color: var(--juleps-orange);
}

.juleps-btn-secondary:hover {
  background-color: var(--juleps-orange-dark);
  border-color: var(--juleps-orange-dark);
  color: var(--juleps-white);
}

/* Bouton outline */
.juleps-btn-outline {
  background-color: transparent;
  color: var(--juleps-green-dark);
  border-color: var(--juleps-green-dark);
}

.juleps-btn-outline:hover {
  background-color: var(--juleps-green-dark);
  color: var(--juleps-white);
}

/* ========================================
   4. FORMULAIRES
   ======================================== */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="search"],
textarea,
select {
  width: 100%;
  padding: var(--juleps-spacing-3) var(--juleps-spacing-4);
  font-family: var(--juleps-font-primary);
  font-size: var(--juleps-font-size-body);
  line-height: var(--juleps-line-height-normal);
  color: var(--juleps-black);
  background-color: var(--juleps-white);
  border: var(--juleps-border-width) solid var(--juleps-grey-light);
  border-radius: var(--juleps-radius-sm);
  transition: border-color var(--juleps-transition-fast);
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--juleps-green-dark);
}

::placeholder {
  color: var(--juleps-grey);
  opacity: 1;
}

/* ========================================
   5. COMPOSANTS CUSTOM
   ======================================== */

/* Container */
.juleps-container {
  max-width: var(--juleps-container-max-width);
  margin: 0 auto;
  padding-left: var(--juleps-container-padding);
  padding-right: var(--juleps-container-padding);
}

/* Section spacing */
.juleps-section {
  padding-top: var(--juleps-spacing-10);
  padding-bottom: var(--juleps-spacing-10);
}

@media (max-width: 989px) {
  .juleps-section {
    padding-top: var(--juleps-spacing-8);
    padding-bottom: var(--juleps-spacing-8);
  }
}

@media (max-width: 749px) {
  .juleps-section {
    padding-top: var(--juleps-spacing-6);
    padding-bottom: var(--juleps-spacing-6);
  }
}

/* Grid system */
.juleps-grid {
  display: grid;
  gap: var(--juleps-grid-gap);
}

.juleps-grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.juleps-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.juleps-grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 989px) {
  .juleps-grid-3,
  .juleps-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 749px) {
  .juleps-grid-2,
  .juleps-grid-3,
  .juleps-grid-4 {
    grid-template-columns: 1fr;
  }
}

/* Utility classes */
.juleps-text-center {
  text-align: center;
}

.juleps-text-left {
  text-align: left;
}

.juleps-text-right {
  text-align: right;
}

.juleps-hidden {
  display: none !important;
}

@media (max-width: 749px) {
  .juleps-hidden-mobile {
    display: none !important;
  }
}

@media (min-width: 750px) and (max-width: 989px) {
  .juleps-hidden-tablet {
    display: none !important;
  }
}

@media (min-width: 990px) {
  .juleps-hidden-desktop {
    display: none !important;
  }
}

/* Background colors */
.juleps-bg-cream {
  background-color: #FCF6F3;
}

.juleps-bg-green-light {
  background-color: var(--juleps-green-lightest);
}

.juleps-bg-orange-light {
  background-color: var(--juleps-orange-lightest);
}

.juleps-bg-yellow-light {
  background-color: var(--juleps-yellow-lightest);
}

/* ========================================
   6. ANIMATIONS
   ======================================== */

@keyframes juleps-fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes juleps-slideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.juleps-animate-fadeIn {
  animation: juleps-fadeIn var(--juleps-transition-normal);
}

.juleps-animate-slideUp {
  animation: juleps-slideUp var(--juleps-transition-normal);
}


}

.juleps-animate-slideUp {
  animation: juleps-slideUp var(--juleps-transition-normal);
}