/* ============================================================
   BlancOne catalog additions + clinic selector
   Loaded on index.html (product groups) and pasutit.html (clinic).
   Standalone file — does not touch the original minified CSS.
   ============================================================ */

/* ---- Product group headings (index.html) ---- */
.productGroup {
   width: 100%;
   margin: 48px 0 8px;
   text-align: center;
}
.productGroup h2 {
   color: #191760;
   font-weight: 400;
   margin: 0;
}
.productGroup h2 strong { color: #00aeef; }
.productGroup p.groupLead {
   color: #6c757d;
   max-width: 640px;
   margin: 8px auto 0;
}

/* ---- Styled placeholder for products without a photo yet ---- */
.imgPlaceholder {
   width: 100%;
   min-height: 240px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   text-align: center;
   padding: 32px 24px;
   border: 2px dashed #bcd8ea;
   border-radius: 16px;
   background: linear-gradient(135deg, #f2f9fd 0%, #e6f4fb 100%);
   color: #191760;
}
.imgPlaceholder .phName {
   font-size: 1.4rem;
   font-weight: 700;
   color: #00aeef;
}
.imgPlaceholder .phNote {
   font-size: .8rem;
   color: #90a4ae;
   margin-top: 8px;
}

/* ---- Product CTAs (buy + brochure) ---- */
.productCtas {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   margin-top: 16px;
   align-items: center;
}
/* Make <button class="blancBtn"> match the <a class="blancBtn"> look */
button.blancBtn {
   border: none;
   cursor: pointer;
   font-family: inherit;
   -webkit-appearance: none;
   appearance: none;
}

/* ---- Cart nav badge ---- */
.cartNavItem .nav-link { white-space: nowrap; }
.cartNavItem .cartCount {
   display: inline-block;
   min-width: 20px;
   padding: 0 6px;
   margin-left: 2px;
   border-radius: 999px;
   background: #cfd8dc;
   color: #fff;
   font-size: .85em;
   text-align: center;
   transition: background .15s;
}
.cartNavItem.hasItems .cartCount { background: #00aeef; }

/* ---- Add-to-cart toast ---- */
.cartToast {
   position: fixed;
   left: 50%;
   bottom: 28px;
   transform: translateX(-50%) translateY(20px);
   background: #191760;
   color: #fff;
   padding: 12px 22px;
   border-radius: 999px;
   font-size: .95rem;
   box-shadow: 0 6px 20px rgba(0, 0, 0, .2);
   opacity: 0;
   pointer-events: none;
   transition: opacity .2s, transform .2s;
   z-index: 1080;
}
.cartToast.show {
   opacity: 1;
   transform: translateX(-50%) translateY(0);
}

/* ---- RITUALS design chips ---- */
.designChips {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin-top: 12px;
}
.designChips span {
   font-size: .78rem;
   background: #eaf6fd;
   color: #00799f;
   border-radius: 999px;
   padding: 4px 12px;
}

/* ============================================================
   Clinic selector (pasutit.html)
   ============================================================ */
.clinicPicker {
   display: flex;
   flex-wrap: wrap;
   gap: 20px;
}
.clinicMapWrap { flex: 1 1 340px; min-width: 280px; }
#clinicMap {
   width: 100%;
   height: 360px;
   border-radius: 12px;
   border: 1px solid #d8e3ec;
   z-index: 0;              /* keep Leaflet panes under the site nav */
}
.clinicList {
   flex: 1 1 260px;
   min-width: 240px;
   max-height: 360px;
   overflow-y: auto;
   display: flex;
   flex-direction: column;
   gap: 8px;
}
.clinicRow {
   text-align: left;
   border: 1px solid #d8e3ec;
   border-radius: 10px;
   padding: 12px 14px;
   background: #fff;
   cursor: pointer;
   transition: border-color .15s, box-shadow .15s;
}
.clinicRow:hover { border-color: #7fc6ea; }
.clinicRow.selected {
   border-color: #00aeef;
   box-shadow: 0 0 0 2px rgba(0, 174, 239, .25);
}
.clinicRow strong { display: block; color: #191760; }
.clinicRow small { color: #6c757d; }
.selectedClinicName {
   margin-top: 12px;
   font-size: .9rem;
   color: #191760;
}
.selectedClinicName b { color: #00aeef; }
.clinicPlaceholderNote {
   width: 100%;
   font-size: .8rem;
   color: #b06a00;
   background: #fff7e6;
   border: 1px solid #ffe0a3;
   border-radius: 8px;
   padding: 8px 12px;
   margin-bottom: 12px;
}