/* =============================================================
   Boutiques Block — boutiques_block.css
   Scoped to #boutiques-block — zero conflict with PS Classic.
   Uses --ldt-* tokens from the theme (with own fallbacks).
   ============================================================= */

#boutiques-block {
  --bb-ivory:      var(--ldt-soft-ivory,        #FFF9F2);
  --bb-sand:       var(--ldt-light-sand,         #F5E9D8);
  --bb-gold:       var(--ldt-desert-gold,        #D4A85A);
  --bb-bronze:     var(--ldt-soft-bronze,        #9C6F44);
  --bb-orange:     var(--ldt-warm-orange,        #F27A21);
  --bb-orange-h:   var(--ldt-warm-orange-hover,  #D96512);
  --bb-brown:      var(--ldt-cocoa-brown,        #5B4636);
  --bb-white:      var(--ldt-pure-white,         #FFFFFF);
  --bb-muted:      var(--ldt-text-muted,         #6C757D);
  --bb-black:      var(--ldt-rich-black,         #111111);
  --bb-border:     var(--ldt-border-light,       rgba(212,168,90,0.2));
  --bb-border-m:   var(--ldt-border-medium,      rgba(212,168,90,0.4));
  --bb-shadow-sm:  var(--ldt-shadow-sm,          rgba(0,0,0,0.05));
  --bb-shadow-md:  var(--ldt-shadow-md,          rgba(0,0,0,0.10));
  --bb-display:    var(--ldt-font-display,       'Playfair Display', Georgia, serif);
  --bb-body:       var(--ldt-font-body,          'Inter', sans-serif);
  --bb-pill:       var(--ldt-radius-pill,        40px);
  --bb-radius-lg:  var(--ldt-radius-lg,          1rem);
  --bb-radius-xl:  var(--ldt-radius-xl,          1.5rem);
  --bb-ease:       var(--ldt-ease-fast,          0.15s ease);

  background: var(--bb-ivory);
  padding: 2rem 0;
  width: 100%;
  font-family: var(--bb-body);
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--bb-brown);
  margin: 0 !important;
  box-sizing: border-box;
}

#boutiques-block *,
#boutiques-block *::before,
#boutiques-block *::after { box-sizing: border-box; }

#boutiques-block a { text-decoration: none; }

/* ===== INNER CONTAINER ===== */
.bb-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ===== HEADER ===== */
.bb-header {
  margin-bottom: 2rem;
}

.bb-breadcrumb {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  color: var(--bb-muted);
  margin-bottom: 0.75rem;
}

.bb-breadcrumb-home {
  color: var(--bb-muted);
  font-weight: 400;
}

.bb-breadcrumb-sep { color: var(--bb-border-m); }

.bb-title-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
  margin-top: 0.5rem;
}

.bb-title-icon {
  font-size: 2.4rem;
  color: var(--bb-orange);
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.bb-heading {
  font-family: var(--bb-display);
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--bb-brown);
  margin: 0;
  line-height: 1.2;
}

.bb-highlight {
  color: var(--bb-orange);
}

/* ===== ACCORDION ===== */
.bb-accordion {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.75rem;
}

.bb-accordion-item {
  border: none !important;
  background: transparent;
}

.bb-accordion-header {
  margin: 0;
}

#boutiques-block .bb-accordion-btn {
  background: var(--bb-white) !important;
  color: var(--bb-brown) !important;
  font-family: var(--bb-body);
  font-weight: 600;
  font-size: 0.92rem;
  padding: 0.9rem 1.4rem;
  border: 1px solid var(--bb-border-m) !important;
  border-radius: var(--bb-pill) !important;
  width: 100%;
  text-align: left;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  box-shadow: 0 3px 10px var(--bb-shadow-sm) !important;
  -webkit-transition: background var(--bb-ease);
          transition: background var(--bb-ease);
  outline: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

#boutiques-block .bb-accordion-btn[aria-expanded="true"] {
  background: var(--bb-sand) !important;
  color: var(--bb-bronze) !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-bottom-color: transparent !important;
}

#boutiques-block .bb-accordion-btn:focus-visible {
  outline: 2px solid var(--bb-gold);
  outline-offset: -2px;
  box-shadow: none !important;
}

#boutiques-block .bb-accordion-btn::after {
  content: '\F282';
  font-family: 'bootstrap-icons';
  margin-left: auto;
  -webkit-transition: -webkit-transform var(--bb-ease);
          transition: transform var(--bb-ease);
  font-weight: 400;
  font-size: 0.9rem;
  color: var(--bb-muted);
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

#boutiques-block .bb-accordion-btn[aria-expanded="true"]::after {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

.bb-region-icon {
  color: var(--bb-orange);
  font-size: 1rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.bb-badge {
  background: var(--bb-sand);
  color: var(--bb-brown);
  font-size: 0.7rem;
  padding: 0.2rem 0.75rem;
  border-radius: var(--bb-pill);
  font-weight: 700;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

/* ===== ACCORDION BODY ===== */
.bb-accordion-body {
  background: var(--bb-white);
  border: 1px solid var(--bb-border-m);
  border-top: none;
  border-bottom-left-radius: var(--bb-radius-lg);
  border-bottom-right-radius: var(--bb-radius-lg);
  padding: 1rem;
}

/* ===== BOUTIQUE GRID ===== */
.bb-grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (minmax(220px, 1fr))[auto-fill];
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.75rem;
}

/* ===== INDIVIDUAL SHOP CARD ===== */
.bb-shop {
  background: var(--bb-white);
  border-radius: var(--bb-radius-lg);
  padding: 0.9rem;
  border: 1px solid #f0dcc8;
  box-shadow: 0 2px 6px var(--bb-shadow-sm);
  -webkit-transition: border-color var(--bb-ease), background var(--bb-ease);
          transition: border-color var(--bb-ease), background var(--bb-ease);
}

.bb-shop:hover {
  border-color: var(--bb-gold);
  background: #fefaf6;
}

.bb-shop-head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.bb-shop-head .bi {
  font-size: 1.2rem;
  color: var(--bb-orange);
  background: var(--bb-sand);
  border-radius: 30%;
  padding: 5px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.bb-shop-head h4 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  color: var(--bb-brown);
  line-height: 1.2;
}

.bb-shop-head h4 small {
  font-size: 0.68rem;
  font-weight: 400;
  color: var(--bb-muted);
  display: block;
}

.bb-detail {
  font-size: 0.8rem;
  margin: 0.25rem 0;
  color: var(--bb-black);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: flex-start;
      -ms-flex-align: flex-start;
          align-items: flex-start;
  gap: 0.4rem;
}

.bb-detail .bi {
  color: var(--bb-gold);
  font-size: 0.85rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  margin-top: 1px;
}

.bb-actions {
  margin-top: 0.6rem;
  border-top: 1px dashed #eedbcb;
  padding-top: 0.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

/* ===== CALL BUTTON ===== */
.bb-btn-call {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.4rem;
  background: var(--bb-orange);
  color: #fff !important;
  border: none;
  border-radius: var(--bb-pill);
  padding: 0.45rem 1.1rem;
  font-family: var(--bb-body);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none !important;
  -webkit-transition: background var(--bb-ease);
          transition: background var(--bb-ease);
  cursor: pointer;
}

.bb-btn-call:hover {
  background: var(--bb-orange-h);
  color: #fff !important;
}

/* ===== CONTACT BAR ===== */
.bb-contact-bar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 1rem;
  margin-top: 1.75rem;
  padding: 1rem 1.5rem;
  background: var(--bb-sand);
  border-radius: var(--bb-radius-xl);
}

.bb-contact-info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.6rem;
  font-weight: 600;
  font-size: 1rem;
  color: var(--bb-brown);
}

.bb-contact-info .bi {
  font-size: 1.4rem;
  color: var(--bb-orange);
}

.bb-contact-phone {
  color: var(--bb-orange);
  text-decoration: none;
  font-weight: 700;
}

.bb-contact-phone:hover { text-decoration: underline; }

.bb-btn-write {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.4rem;
  border: 2px solid var(--bb-gold);
  color: var(--bb-brown) !important;
  background: var(--bb-white);
  border-radius: var(--bb-pill);
  padding: 0.5rem 1.4rem;
  font-family: var(--bb-body);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none !important;
  -webkit-transition: all var(--bb-ease);
          transition: all var(--bb-ease);
}

.bb-btn-write:hover {
  background: var(--bb-gold);
  color: #fff !important;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 991px) {
  .bb-grid {
    -ms-grid-columns: 1fr 1fr;
        grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 767px) {
  .bb-grid {
    -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
  }
  .bb-contact-bar {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    text-align: center;
  }
  .bb-btn-write {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 100%;
  }
  .bb-heading { font-size: 1.4rem; }
}

@media (max-width: 575px) {
  #boutiques-block { padding: 1.25rem 0; }
  .bb-inner { padding: 0 1rem; }
  .bb-heading { font-size: 1.2rem; }
  #boutiques-block .bb-accordion-btn { padding: 0.75rem 1rem; font-size: 0.87rem; }
}