/* ================================
       KRUMMY — Custom Theme Overrides
       Palette : #8b5a3c (marron) / #EFD7C5 (beige) / #fafafa (fond)
       ================================ */

    :root{
      --kr-primary:#8b5a3c;
      --kr-primary-2:#6b4226;
      --kr-accent:#EFD7C5;
      --kr-bg:#fafafa;
      --kr-text:#333333;
    }

    /* Base */
    html,body{background:var(--kr-bg); color:var(--kr-text);}
    a{color:var(--kr-primary); text-decoration:none;}
    a:hover{color:var(--kr-primary-2);}

    /* -------- Header / Nav -------- */
    #header{ 
      background:linear-gradient(135deg,#ffffff,#fafafa);
      border-bottom:2px solid var(--kr-primary);
      box-shadow:0 2px 10px rgba(0,0,0,.07);
      position:sticky; top:0; z-index:1000;
    }
    #header .logo img{ 
      width:60px; height:60px; object-fit:cover;
      border-radius:50%; border:3px solid var(--kr-primary);
      box-shadow:0 4px 8px rgba(139,90,60,.3);
    }
    #header .header-nav,
    #header .header-top{padding:0.6rem 0;}
    /* Menu */
    #_desktop_top_menu .top-menu a,
    #mobile_top_menu_wrapper .top-menu a{
      color:var(--kr-primary); font-weight:600;
    }
    #_desktop_top_menu .top-menu a:hover{color:var(--kr-primary-2);}
    #header .material-icons, .header-nav .blockcart{color:var(--kr-primary);}

    /* Panier */
    .blockcart, .blockcart a{ color:var(--kr-primary); }
    .blockcart .cart-products-count{ 
      background:#dc3545; color:#fff; border-radius:50%;
      min-width:22px; height:22px; display:inline-flex; align-items:center; 
 justify-content:center;
      font-size:.75rem; font-weight:700; transform:translate(2px,-10px);
    }

    /* -------- Boutons -------- */
    .btn, .btn-primary, .btn-secondary, .btn-outline-primary{
      border-radius:25px; font-weight:700; transition:all .25s ease;
    }
    .btn-primary, .btn-primary:focus{
      background:linear-gradient(135deg,var(--kr-primary),var(--kr-primary-2));
      border:0; color:#fff; box-shadow:0 4px 8px rgba(139,90,60,.25);
    }
    .btn-primary:hover{ transform:translateY(-2px); box-shadow:0 6px 12px 
 rgba(139,90,60,.35); }

    .btn-secondary{
      background:transparent; color:var(--kr-primary);
      border:2px solid var(--kr-primary);
    }
    .btn-secondary:hover{ background:var(--kr-primary); color:#fff; }

    .btn-outline-primary{
      border:2px solid var(--kr-primary); color:var(--kr-primary); 
 background:#fff;
    }
    .btn-outline-primary:hover{ background:var(--kr-primary); color:#fff; }

    /* -------- Grilles produits -------- */
    .products, .featured-products, .product-accessories{gap:2rem;}
    .product-miniature{
      background:#fff; border:2px solid var(--kr-accent);
      border-radius:15px; overflow:hidden;
      box-shadow:0 5px 15px rgba(0,0,0,.08);
      transition:transform .2s ease, box-shadow .2s ease;
    }
    .product-miniature:hover{
      transform:translateY(-4px);
      box-shadow:0 10px 24px rgba(0,0,0,.14);
    }
    .product-miniature .thumbnail-container{border-bottom:0;}
    .product-miniature .product-thumbnail img{
      height:220px; object-fit:cover; width:100%;
    }
    .product-miniature .product-title a{
      color:var(--kr-primary); font-weight:700; font-size:1.05rem;
    }
    .product-miniature .product-description{
      padding:1rem 1.25rem; text-align:center;
    }
    .product-miniature .price{
      color:var(--kr-primary); font-weight:800; font-size:1.1rem;
      margin:.25rem 0 .75rem;
    }
    .product-miniature .highlighted-informations .quick-view{
      color:var(--kr-primary);
    }

    /* Bouton Ajouter au panier dans la carte */
    .product-miniature .add-to-cart, 
    .add-to-cart{
      width:100%;
      background:linear-gradient(135deg,var(--kr-primary),var(--kr-primary-2));
      color:#fff; border:0; padding:.7rem 1.2rem;
      border-radius:25px; font-weight:800;
      box-shadow:0 5px 15px rgba(139,90,60,.28);
    }
    .product-miniature .add-to-cart:hover{ transform:translateY(-2px); }

    /* -------- Badges / Flags -------- */
    .product-flags{left:10px; top:10px;}
    .product-flags .discount, .product-flags .on-sale{
      background:var(--kr-primary); color:#fff; border-radius:14px; 
 padding:.2rem .55rem;
      box-shadow:0 2px 8px rgba(0,0,0,.18);
    }
    /* Masquer “Neuf” */
    .product-flags .new{ display:none !important; }

    /* -------- Fiche produit -------- */
    .product-price{ color:var(--kr-primary); }
    .tabs .nav-tabs .nav-link{ color:var(--kr-primary); }
    .tabs .nav-tabs .nav-link.active{
      border-color:var(--kr-primary); color:var(--kr-primary-2); font-
 weight:700;
    }

    /* -------- Slider / Carrousel maison-look -------- */
    /* ps_imageslider (Swiper/Carousel) — styling doux */
    .homeslider-container, .swiper, .carousel{
      border-radius:20px; overflow:hidden;
      box-shadow:0 10px 30px rgba(0,0,0,.18);
      border:2px solid var(--kr-accent);
    }
    .homeslider-container .swiper-button-prev,
    .homeslider-container .swiper-button-next,
    .carousel .carousel-control{ 
      width:46px; height:46px; border-radius:50%;
      background:rgba(255,255,255,.92); color:var(--kr-primary);
      box-shadow:0 4px 10px rgba(0,0,0,.18);
    }
    .homeslider-container .swiper-pagination-bullet,
    .carousel .carousel-indicators li{
      background:rgba(255,255,255,.6);
    }
    .homeslider-container .swiper-pagination-bullet-active{ background:#fff; }

    /* -------- Briques de mise en avant (style cartes info) -------- */
    .kr-info-cards{ 
      display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
      gap:2rem; margin:2rem 0;
    }
    .kr-info-card{
      background:#fff; border:2px solid var(--kr-accent);
      border-radius:15px; padding:2rem; text-align:center;
      box-shadow:0 5px 15px rgba(0,0,0,.08);
      transition:transform .2s ease, box-shadow .2s ease;
    }
    .kr-info-card:hover{ transform:translateY(-4px); box-shadow:0 10px 24px 
 rgba(0,0,0,.14); }
    .kr-info-card h3{ color:var(--kr-primary); margin-bottom:.6rem; }

    /* -------- Form Inputs -------- */
    .form-control{
      border:2px solid var(--kr-accent); border-radius:10px; padding:.7rem 
 .9rem;
    }
    .form-control:focus{
      border-color:var(--kr-primary); box-shadow:0 0 0 .2rem 
 rgba(139,90,60,.12);
    }

    /* -------- Breadcrumb -------- */
    .breadcrumb{ background:transparent; }
    .breadcrumb li a{ color:var(--kr-primary); }
    .breadcrumb li a:hover{ color:var(--kr-primary-2); }

    /* -------- Footer -------- */
    #footer{
      background:linear-gradient(135deg,var(--kr-primary),var(--kr-primary-2));
      color:#fff; padding:3rem 0 1rem; text-align:center;
    }
    #footer a{ color:var(--kr-accent); }
    #footer a:hover{ color:#fff; }
    #footer .h3, #footer h3{ color:var(--kr-accent); }
    .footer-container{ border-top:1px solid rgba(239,215,197,.45); padding-
 top:1rem; }

    /* -------- Bannières/sections titre -------- */
    .section-title, .page-heading{
      text-align:center; color:var(--kr-primary);
      position:relative; margin-bottom:2rem;
    }
    .section-title::after, .page-heading:after{
      content:""; position:absolute; left:50%; transform:translateX(-50%);
      bottom:-10px; width:100px; height:3px;
      background:linear-gradient(135deg,var(--kr-accent),var(--kr-primary));
      border-radius:2px;
    }

    /* -------- Bloc "boîte personnalisée" (si tu l’ajoutes en page) -------- */
    .custom-box{
      background:#fff; border:3px dashed var(--kr-accent);
      border-radius:20px; padding:2rem; box-shadow:0 5px 15px rgba(0,0,0,.08);
    }
    .custom-box h3{ color:var(--kr-primary); text-align:center; }
    .flavors-grid{
      display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
      gap:1.2rem;
    }
    .flavor-option{
      background:#fdfaf7; border:2px solid var(--kr-accent); border-radius:15px;
  padding:1rem;
      transition:.2s; text-align:center;
    }
    .flavor-option:hover{ border-color:var(--kr-primary); box-shadow:0 5px 15px 
 rgba(0,0,0,.1); transform:translateY(-2px); }
    .quantity-btn{
      background:var(--kr-accent); color:var(--kr-primary); border:0; 
 width:34px; height:34px; border-radius:50%;
    }
    .quantity-btn:hover{ background:var(--kr-primary); color:#fff; }

    /* -------- Divers -------- */
    .alert-info, .alert-warning{ border-radius:12px; }
    .pagination .page-list li.current a{ background:var(--kr-primary); border-
 color:var(--kr-primary); }

/* Responsive tweaks */
    @media (max-width:768px){
      .product-miniature .product-thumbnail img{ height:250px; }
    }

/* ===================== Custom modifications added for Krummy store ===================== */

/*
 * Product listing tweaks
 * ----------------------
 * Toutes les listes de produits utilisent désormais une mise en page
 * flexbox avec retour à la ligne automatique et justification centrée.  Les
 * cartes ont une largeur fixe et sont espacées uniformément.  Un
 * espacement supérieur est ajouté pour éviter que les produits ne collent au
 * header.
 */

/* Add top padding to the product list so cards aren’t glued to the top edge */
#js-product-list .products {
  padding-top: 2rem;
}


/*
 * Mise en page universelle pour les listes de produits.
 * Toutes les listes `.products` sont transformées en flexbox avec retour à la ligne
 * automatique.  Chaque carte a une largeur fixe (300 px) et une marge
 * uniforme.  Le conteneur centre automatiquement les cartes, de sorte
 * qu’il reste de l’espace blanc égal de chaque côté lorsque la ligne
 * n’est pas complète.
 */
.products {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  padding-top: 2rem;
}

.products .product-miniature {
  flex: 0 0 300px;
  max-width: 300px;
  margin: 1rem;
}


/* Center the text inside product descriptions (title, price, etc.) */
.product-miniature .product-description {
  text-align: center;
}

/*
 * Restrict the width of product cards on listing pages.
 * The default Bootstrap grid classes (e.g. col-md-4) can force cards
 * to be very narrow. By explicitly setting a maximum width and centering
 * the cards within their grid column, we avoid the “skinny card” effect
 * seen on category pages.  The width stays fluid up to the max width.
 */
/*
 * Limit the width of all product cards (home page and listings) and
 * center them horizontally.  Without this, Bootstrap grid classes
 * (`col-` classes) can force cards to adopt a third of the row width,
 * making them too narrow and misaligned.  The max‑width ensures a
 * consistent, card‑like appearance on all pages.
 */
/*
 * Align product cards horizontally across all product grids.  The margin
 * ensures there is space between cards, while letting the CSS Grid
 * determine an appropriate width for each card based on the viewport.
 */

/*
 * Add inner padding to every product card so the image doesn’t touch
 * the border directly.  The border radius matches the card for a
 * cohesive design.
 */
.product-miniature {
  padding: 0.5rem;
}

.product-miniature .product-thumbnail img {
  border-radius: 12px;
}

/*
 * Colour palette integration
 * -------------------------
 * To ensure buttons and utility classes across the site use the Krummy brand
 * colours, we map Bootstrap-like CSS variables to our palette.  This way,
 * generic classes such as `.btn-primary` and `.text-primary` will
 * automatically pick up the correct colours without additional overrides.
 */

:root {
  --bs-primary: var(--kr-primary);
  --bs-primary-rgb: 139, 90, 60;
  --bs-secondary: var(--kr-accent);
  --bs-secondary-rgb: 239, 215, 197;
}

.text-primary,
a.text-primary {
  color: var(--kr-primary) !important;
}
.text-secondary,
a.text-secondary {
  color: var(--kr-accent) !important;
}
.btn-primary {
  background: linear-gradient(135deg, var(--kr-primary), var(--kr-primary-2)) !important;
  border-color: var(--kr-primary) !important;
  color: #fff !important;
}
.btn-primary:hover {
  background: var(--kr-primary) !important;
  color: #fff !important;
}
.btn-secondary {
  background: var(--kr-accent) !important;
  border-color: var(--kr-accent) !important;
  color: var(--kr-primary) !important;
}
.btn-secondary:hover {
  background: var(--kr-primary) !important;
  color: #fff !important;
}

/* ------------------------------------------------------------------
   Custom Krummy header adjustments for a large circular logo
   --------------------------------------------------------
   Enlarge the logo, move it up and add extra space below so the
   bottom border line doesn’t touch it. The !important flags ensure
   these rules take precedence over existing theme styles.
*/

#header .logo {
  width: 160px !important;
  height: 160px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  top: -20px !important;
  margin-bottom: 0.5rem !important;
}

#header .logo img {
  width: 160px !important;
  height: 160px !important;
  max-width: none !important;
  max-height: none !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 4px solid var(--kr-primary) !important;
  box-shadow: 0 4px 8px rgba(139, 90, 60, 0.3) !important;
}

#header .header-top,
#header .header-nav {
  padding-top: 1rem !important;
  padding-bottom: 3rem !important;
}

/* ================================
   FIX MAINTENANCE PAGE
   ================================ */
body#maintenance {
    background: #fafafa; /* Fond propre */
}

#maintenance .logo {
    margin: 0 auto 20px auto;
    max-width: 100%;
}

#maintenance .logo img {
    max-width: 300px !important; /* TAILLE IDÉALE DU LOGO */
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Optionnel : rend le texte plus joli */
#maintenance .maintenance-text {
    font-family: 'Arial', sans-serif;
    color: #8b5a3c; /* Votre couleur marron */
    max-width: 600px;
    margin: 0 auto;
}