/* Centro Botanico Moutan - foglio di stile per Bootstrap 5.3 (riscritto, non una traduzione del vecchio) */

:root {
  --cbm-green:      #7f9557;
  --cbm-green-dark: #5f7537;
  --cbm-text:       #5c5c5c;
  --cbm-footer:     #4c4e4f;
  --cbm-radius:     8px;
  --cbm-topbar-h:   36px;
  --header-h:       108px;   /* altezza totale dell'header fisso (mobile) */
  --bs-font-sans-serif: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bs-body-color: var(--cbm-text);
  --cbm-link:       #6a7f44;   /* verde dei link: un po' piu' scuro di --cbm-green */
  --cbm-link-hover: #4f6130;
  --bs-link-color: var(--cbm-link);
  --bs-link-color-rgb: 106, 127, 68;          /* Bootstrap 5 colora <a> con le versioni rgb */
  --bs-link-hover-color: var(--cbm-link-hover);
  --bs-link-hover-color-rgb: 79, 97, 48;
}
@media (min-width: 992px) { :root { --header-h: 124px; } }

html { scroll-padding-top: var(--header-h); }
body {
  padding-top: var(--header-h);          /* spazio per l'header fisso: nessun margine inline nelle pagine */
  font-weight: 400;
  line-height: 1.7;
}
a { text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4, h5, h6 { color: var(--cbm-green); font-weight: 300; }
h1 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2rem); margin: 1.25rem auto; }
h2 { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 1.9rem); margin: 1.25rem 0; }
h3 { font-size: 1.5rem; margin: .6rem 0; }
h5 { font-weight: 600; }

.section { margin-block: 2rem; }

/* ---- Pulsanti ---- */
.btn-peonio {
  --bs-btn-color: #fff; --bs-btn-bg: var(--cbm-green); --bs-btn-border-color: var(--cbm-green);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--cbm-green-dark); --bs-btn-hover-border-color: var(--cbm-green-dark);
  --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--cbm-green-dark); --bs-btn-active-border-color: var(--cbm-green-dark);
  --bs-btn-border-radius: 0;
}

/* ---- Header ---- */
#section_header { background: #fff; border-bottom: 3px solid var(--cbm-green); z-index: 1030; }

.nav-upper { background: #f4f6ef; min-height: var(--cbm-topbar-h); font-size: .875rem; }
.nav-upper .nav-link { color: #333; padding: .35rem .75rem; }
.nav-upper .nav-link:hover, .nav-upper .active > .nav-link { color: var(--cbm-green-dark); }
.img-lng { width: 18px; height: 12px; vertical-align: -1px; }

.navbar-lower { padding-block: .35rem; }
.navbar-brand {
  display: block; width: 130px; height: 62px; margin: 0; padding: 0;
  background: url('/images/logo-cbm.png') left center / contain no-repeat;
  transition: width .25s ease, height .25s ease;
}
@media (min-width: 992px) { .navbar-brand { width: 170px; height: 82px; } }
body.scrolled .navbar-brand { width: 118px; height: 57px; }

.navbar-lower .navbar-nav .nav-link { color: #000; font-weight: 300; padding: .5rem .75rem; }
@media (min-width: 992px) { .navbar-lower .navbar-nav .nav-link { font-size: .94rem; padding: .5rem .6rem; } }
@media (min-width: 1200px) { .navbar-lower .navbar-nav .nav-link { font-size: 1rem; padding: .5rem .9rem; } }
.navbar-lower .navbar-nav .active > .nav-link,
.navbar-lower .navbar-nav .nav-link:hover { color: var(--cbm-green-dark); }
.navbar-lower .navbar-toggler { border: 0; }
.navbar-lower .navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(127, 149, 87, .35); }

.dropdown-menu { border: 0; border-radius: var(--cbm-radius); box-shadow: 0 8px 24px rgba(0, 0, 0, .12); }
.dropdown-item { font-size: .95rem; }
.dropdown-item:hover, .dropdown-item:focus, .dropdown-item.active { background: #eef2e6; color: #222; }

@media (min-width: 992px) {                    /* menu a comparsa al passaggio del mouse (desktop) */
  .navbar .dropdown:hover > .dropdown-menu { display: block; margin-top: 0; }
}
@media (max-width: 991.98px) {                 /* menu mobile scorrevole sotto l'header */
  #mainNav { max-height: calc(100vh - var(--header-h)); overflow-y: auto; padding-bottom: .75rem; }
}

/* ---- Home ---- */
.hero { margin-top: 1rem; }
.hero img { display: block; border-radius: var(--cbm-radius); }

.collezione-scroller {
  display: grid; grid-auto-flow: column; gap: 1rem;
  grid-auto-columns: calc((100% - 1rem) / 2);               /* 2 per riga su telefono */
  overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 0 .75rem; margin: 0 0 1.25rem;
  scrollbar-width: thin; scrollbar-color: var(--cbm-green) transparent;
}
@media (min-width: 600px) { .collezione-scroller { grid-auto-columns: calc((100% - 2rem) / 3); } }   /* 3 */
@media (min-width: 900px) { .collezione-scroller { grid-auto-columns: calc((100% - 5rem) / 6); } }   /* 6 */
.collezione-scroller li { scroll-snap-align: start; text-align: center; }
@media (hover: hover) and (pointer: fine) { .collezione-scroller { cursor: grab; } }
.collezione-scroller.is-drag { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.collezione-scroller a { display: block; color: var(--cbm-text); font-size: .9rem; }
.collezione-scroller img {
  display: block; width: 100%; aspect-ratio: 1; object-fit: cover; margin-bottom: .4rem;
  border-radius: var(--cbm-radius); transition: transform .25s ease, box-shadow .25s ease;
}
.collezione-scroller a:hover img { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(0, 0, 0, .15); }

.home-box { display: flex; flex-direction: column; height: 100%; text-align: center; }
.home-box:hover { text-decoration: none; }
/* da md in su il riquadro alto (Fioritura) non decide l'altezza della riga: riempie quella dei quattro a destra, cosi' i bordi sono allineati */
@media (min-width: 768px) { .home-boxes > .col-md-4 .home-box img { flex: 1 1 0; height: 0; } }
.home-box img { width: 100%; flex: 1 1 auto; min-height: 0; object-fit: cover; border-radius: var(--cbm-radius) var(--cbm-radius) 0 0; }
.box_home { margin: 0; padding: .9rem; color: #fff; font-size: 1.35rem; border-radius: 0 0 var(--cbm-radius) var(--cbm-radius); }
.home-box:hover .box_home { filter: brightness(1.06); }
.box_home-0 { background: rgba(127, 149, 87, .92); }
.box_home-1 { background: rgba(143, 31, 123, .92); }
.box_home-2 { background: rgba(117, 155, 56, .92); }
.box_home-3 { background: rgba(225, 212, 0, .92); color: #333; }
.box_home-4 { background: rgba(224, 106, 165, .92); }

.cta-banner { position: relative; }
.cta-banner img { border-radius: var(--cbm-radius); }
.cta-banner .btn { margin-top: .75rem; }
@media (min-width: 768px) { .cta-banner .btn { position: absolute; top: 100px; left: 33px; margin-top: 0; } }

/* ---- Newsletter ---- */
#box-newsletter { margin-block: 2rem; }
#box-newsletter .row {
  margin: 0; min-height: 92px; color: #fff; border-radius: var(--cbm-radius); padding-block: .75rem;
  background: #7f9557 url('/images/newsletter-bg.jpg') center / cover;
}
.box-nl-p1 h4 { color: #fff; font-size: 2.5rem; text-align: center; margin: 0; }
.box-nl-p1 h5 { color: #fff; font-size: 1rem; text-align: center; margin: 0; }
.box-nl-p2 p { color: #fff; font-size: .875rem; line-height: 1.35; margin: .5rem 0; }
.box-nl-p2 .big { font-size: 1.125rem; font-weight: 700; }
.box-nl-p3 form { margin: .25rem 0; }
.box-nl-p3 .form-control { border-radius: 0; margin-bottom: .25rem; }
/* spunta privacy: casella bianca arrotondata, segno verde quando e' attiva */
.nl-privacy { display: flex; align-items: flex-start; gap: .55rem; margin: .1rem 0 .5rem; font-size: .8rem; line-height: 1.3; color: #fff; }
.nl-privacy input { appearance: none; -webkit-appearance: none; flex: 0 0 1.25rem; width: 1.25rem; height: 1.25rem; margin: .05rem 0 0; background: #fff center / 80% no-repeat; border: 2px solid #fff; border-radius: .3rem; cursor: pointer; }
.nl-privacy input:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%236a7f44' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M3 8.5l3.2 3.2L13 4.8'/%3E%3C/svg%3E"); }
.nl-privacy input:focus-visible { outline: 3px solid rgba(255,255,255,.6); outline-offset: 2px; }
.nl-privacy label { cursor: pointer; }
.nl-privacy a { color: #fff; text-decoration: underline; }
#newsletter-error-msg { display: none; margin-bottom: .35rem; font-size: .85rem; font-weight: 600; }

/* ---- Footer ---- */
footer { background: var(--cbm-footer); padding: 1.25rem 0; }
footer p { font-size: .75rem; line-height: 1.5; color: #fff; }
footer a { color: #fff; font-weight: 300; font-size: .85rem; }
footer a:hover { color: #99ffaa; }
footer h5 { color: #fff; text-transform: uppercase; font-size: .95rem; margin-top: 1rem; }
#footer-bottom { margin-top: 1rem; border-top: 1px solid #666; padding-top: 1.25rem; }
.text-social a { font-size: 1.4rem; padding: 0 .6rem; }
a.ft-facebook:hover  { color: #3b5998; }
a.ft-instagram:hover { color: #e95950; }
a.ft-youtube:hover   { color: #ff0000; }
a.ft-pinterest:hover { color: #e60023; }

/* ---- Filtro varieta' ---- */
.filter-list { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; padding: 0; margin: 0 0 .75rem; }
.filter-box { border: 2px solid #dadada; border-radius: 30px; cursor: pointer; }
.filter-box:hover { border-color: #3ada3a; }
.filter-box img { width: 30px; height: 30px; display: block; }
.filter-active { border-color: #ff1a1a; }

/* ---- Breadcrumb ---- */
.breadcrumb { --bs-breadcrumb-divider-color: #999; --bs-breadcrumb-item-active-color: var(--cbm-text); font-size: .875rem; margin-bottom: 1rem; }
.breadcrumb a { color: var(--cbm-green-dark); }

/* ---- FAQ (accordion) ---- */
.accordion {
  --bs-accordion-active-bg: var(--cbm-green);
  --bs-accordion-active-color: #fff;
  --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(127, 149, 87, .35);
  --bs-accordion-border-radius: var(--cbm-radius);
  --bs-accordion-inner-border-radius: calc(var(--cbm-radius) - 1px);
}
.accordion-button:not(.collapsed)::after { filter: brightness(0) invert(1); }
.accordion-header { margin: 0; font-size: inherit; font-weight: inherit; color: inherit; }   /* l'h2 non eredita lo stile dei titoli di pagina */

/* ---- Mese per mese ---- */
.mese-card { display: block; }
.mese-card:hover { text-decoration: none; }
.mese-card img { width: 100%; border-radius: var(--cbm-radius) var(--cbm-radius) 0 0; }
.mese { margin: 0; padding: .6rem; background: #777; text-align: center; font-weight: 300; color: #fff; border-radius: 0 0 var(--cbm-radius) var(--cbm-radius); }
.mese-attivo { background: rgba(127, 149, 87, .92); }
.mese-card:hover .mese { filter: brightness(1.08); }

/* ---- Collezione (schede) ---- */
.collezione { margin-bottom: 2rem; padding-bottom: 2rem; border-bottom: 1px solid #e6e9df; }
.collezione:last-of-type { border-bottom: 0; }
.collezione img { border-radius: var(--cbm-radius); }

/* ---- Shop ---- */
.shop-intro { font-size: 1.05rem; font-weight: 300; color: var(--cbm-text); line-height: 1.7; margin: .5rem 0 1rem; }
.shopbox { padding-top: 1rem; border-top: 1px solid #bfcaab; }
.shopbox > h2 { font-size: 1.5rem; margin: 0 0 .5rem; }
.shopbox > h2 a { color: var(--cbm-green); }
.icone-classificazione { display: flex; flex-wrap: wrap; gap: .35rem; padding: 0; margin: 0 0 .75rem; }
.icone-classificazione img { width: 35px; height: 35px; }
.shopbox-body { display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 768px) {
  .shopbox-body { flex-direction: row; align-items: flex-start; }
  .shopbox-reverse { flex-direction: row-reverse; }
  .shopbox-img { flex: 0 0 41.666%; }
  .shopbox-text { flex: 1 1 0; }
}
.shopbox-img img { border-radius: var(--cbm-radius); }
.filter-chip { font-weight: 400; font-size: .85rem; padding: .45em .7em; }
.filter-chip .btn-close { width: .5em; height: .5em; margin-left: .4rem; vertical-align: middle; }

/* ---- Scheda prodotto ---- */
.box-specifiche { border: 1px solid #eaf1e3; border-radius: var(--cbm-radius); padding: 0 1.25rem 1rem; background: #fbfcf8; }
.box-specifiche h5 { padding-top: 1rem; }
.classificazione img { width: 45px; height: 45px; }
.acquisti { margin-bottom: .5rem; padding-block: .25rem; border-bottom: 1px solid #eef0e8; }
.btn-shop { white-space: nowrap; }

/* ---- Offerta e prodotto ---- */
.foto-scheda { max-width: 860px; margin: 0 auto 1.25rem; }
.foto-scheda img, .foto-scheda .carousel-inner { border-radius: var(--cbm-radius); }
.prezzo-vecchio { color: #999; text-decoration: line-through; }

/* ---- Carrello ---- */
.cart-intestazione { margin-bottom: 1rem; padding-bottom: .5rem; border-bottom: 2px solid var(--cbm-green); font-weight: 600; }
.cart-riga { margin-bottom: .6rem; padding-bottom: .6rem; border-bottom: 1px solid #d7dfc9; }
.cart-totali h3 { font-size: 1.25rem; }
.cart-descrizione { font-size: .875rem; color: #777; }
.cart-descrizione p { margin: 0 0 .35rem; }

/* ---- Cassa ---- */
.cassa-num { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; margin-right: .4rem; border-radius: 50%; background: var(--cbm-green); color: #fff; font-size: .85rem; font-weight: 600; }
.cassa-sezione, .cassa-riepilogo .card, .cassa-login { border-color: #d7dfc9; border-radius: var(--cbm-radius); }
.cassa-sezione h2, .cassa-riepilogo h2 { color: var(--cbm-green-dark); font-weight: 600; }
.cassa-riepilogo { top: calc(var(--header-h) + 1rem); }
.cassa-righe li { padding-block: .35rem; border-bottom: 1px solid #eef0e8; font-size: .9rem; }
.cassa-totali > div { display: flex; justify-content: space-between; padding-block: .25rem; }
.cassa-totali dt, .cassa-totali dd { margin: 0; font-weight: 400; }
.cassa-totali .cassa-totale { margin-top: .4rem; padding-top: .6rem; border-top: 2px solid var(--cbm-green); font-size: 1.2rem; }
.cassa-totali .cassa-totale dt, .cassa-totali .cassa-totale dd { font-weight: 600; }
.cassa-pay { margin-bottom: .75rem; }
.form-check-input:checked { background-color: var(--cbm-green); border-color: var(--cbm-green); }
.form-control:focus, .form-select:focus { border-color: var(--cbm-green); box-shadow: 0 0 0 .2rem rgba(127, 149, 87, .25); }

/* ---- Icone nella barra superiore: ricerca, account, carrello ---- */
.header-icons { display: flex; align-items: center; gap: .1rem; margin-left: .35rem; }
.header-icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; border: 0; background: none; color: #222; font-size: 1.1rem; border-radius: 50%; }
.header-icon:hover, .header-icon[aria-expanded="true"] { color: var(--cbm-green-dark); background: #eef2e6; text-decoration: none; }
.cart-badge { position: absolute; top: 0; right: -.1rem; min-width: 1.1rem; height: 1.1rem; padding: 0 .25rem; border-radius: .55rem; background: var(--cbm-green-dark); color: #fff; font-size: .68rem; font-weight: 600; line-height: 1.1rem; text-align: center; }
#searchBar { background: #f4f6ef; border-top: 1px solid #e3e8d8; }

/* ---- Area clienti ---- */
.account-voci a, .account-esci { display: flex; flex-direction: column; align-items: center; gap: .35rem; color: var(--cbm-link); font-size: .95rem; text-decoration: none; }
.account-voci a:hover, .account-esci:hover { color: var(--cbm-link-hover); text-decoration: none; }
.account-voci i { font-size: 2.6rem; color: var(--cbm-green); }
.account-esci { width: 100%; padding: 0; border: 0; }

/* Galleria delle pagine ([gallery id=N]): griglia di miniature + lightbox (GLightbox) */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .5rem; margin: 1.5rem 0; }
.gallery-grid .gallery-item { display: block; overflow: hidden; border-radius: var(--cbm-radius); background: #eef2e6; }
.gallery-grid .gallery-item img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .35s ease, opacity .2s; }
.gallery-grid .gallery-item:hover img, .gallery-grid .gallery-item:focus-visible img { transform: scale(1.06); opacity: .92; }
.gallery-grid .gallery-item:focus-visible { outline: 3px solid var(--cbm-green); outline-offset: 2px; }

/* Lightbox della galleria: frecce e chiusura grandi e sempre visibili.
   GLightbox su schermi touch (telefoni, tablet, portatili/monitor touch) NASCONDE le frecce fuori dallo schermo (top:-100%) e si affida allo swipe: qui le riportiamo sempre in vista.
   Selettori piu' specifici di quelli della libreria, cosi' vincono qualunque sia l'ordine dei CSS. */
.glightbox-container.glightbox-clean .gprev, .glightbox-container.glightbox-clean .gnext { width: 48px; height: 48px; top: calc(50% - 24px); border-radius: 50%; background-color: rgba(0, 0, 0, .6); border: 2px solid rgba(255, 255, 255, .85); opacity: 1; }
.glightbox-container.glightbox-clean .gprev { left: 12px; }
.glightbox-container.glightbox-clean .gnext { right: 12px; }
.glightbox-container.glightbox-clean .gprev svg, .glightbox-container.glightbox-clean .gnext svg { width: 22px; }
.glightbox-container.glightbox-clean .gprev:hover, .glightbox-container.glightbox-clean .gnext:hover { background-color: var(--cbm-green); border-color: #fff; }
.glightbox-container.glightbox-clean .gclose { width: 44px; height: 44px; top: 12px; right: 12px; border-radius: 50%; background-color: rgba(0, 0, 0, .6); border: 2px solid rgba(255, 255, 255, .85); opacity: 1; }
.glightbox-container.glightbox-clean .gclose:hover { background-color: var(--cbm-green); }

/* Carosello con i pallini SOTTO la foto (aggiungere la classe "carousel-dots" al carosello e mettere .carousel-indicators dopo .carousel-inner). Non tocca gli altri caroselli. */
.carousel-dots .carousel-indicators { position: static; margin: .85rem 0 0; justify-content: center; }
.carousel-dots .carousel-indicators [data-bs-target] { box-sizing: border-box; width: 12px; height: 12px; margin: 0 6px; padding: 0; border: 0; border-radius: 50%; background-color: #b4bfa4; opacity: 1; transition: background-color .2s, transform .2s; }
.carousel-dots .carousel-indicators [data-bs-target]:hover { background-color: #94a37f; }
.carousel-dots .carousel-indicators .active { background-color: var(--cbm-green); transform: scale(1.15); }