/* ==========================================================
   BLOOM & BARAKAH — brand styles
   ========================================================== */

:root{
  --bb-cream:#F7F1E6;
  --bb-cream-deep:#EFE4CF;
  --bb-ink:#1F1B18;
  --bb-ink-soft:#5C544A;
  --bb-line:#DCD2BE;
  --bb-white:#FFFDFA;
  --bb-navy:#2C3A52;
  --bb-navy-deep:#1C2739;
  --bb-sand:#A98F6D;
  --bb-sand-deep:#8A7358;
  --bb-red:#8B2E2A;
  --bb-font-display:'Fraunces', serif; /* swap for 'The Seasons' once licensed font is uploaded */
  --bb-font-sans:'Manrope', sans-serif; /* swap for 'Arial MT Pro' once licensed font is uploaded */
}

body, p, li, a, span, input, button, select, textarea{
  font-family: var(--bb-font-sans);
  color: var(--bb-ink);
}
h1, h2, h3, h4, .site-title, .woocommerce-loop-product__title, .product_title{
  font-family: var(--bb-font-display);
  font-weight: 500;
  color: var(--bb-ink);
}
body{ background: var(--bb-cream); }
a{ color: var(--bb-navy); }
a:hover{ color: var(--bb-navy-deep); }

/* Buttons site-wide */
.button, button, input[type="submit"], .woocommerce a.button, .woocommerce button.button,
.woocommerce #respond input#submit, .woocommerce-page a.button{
  background: var(--bb-navy);
  color: var(--bb-white);
  border: none;
  border-radius: 999px;
  font-family: var(--bb-font-sans);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.03em;
  padding: 14px 30px;
  transition: background 0.2s ease, transform 0.15s ease;
}
.button:hover, button:hover, input[type="submit"]:hover, .woocommerce a.button:hover,
.woocommerce button.button:hover, .woocommerce #respond input#submit:hover{
  background: var(--bb-navy-deep);
  color: var(--bb-white);
  transform: translateY(-1px);
}

/* ==========================================================
   PRODUCT CARD (shop / category grid + carousel widget)
   ========================================================== */
ul.products{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:22px; list-style:none; margin:0; padding:0; }
ul.products li.product{ margin:0 !important; padding:0 !important; }

.bb-card{
  background: var(--bb-cream-deep);
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  transition: box-shadow 0.2s ease;
  height: 100%;
  box-sizing: border-box;
}

.bb-card__img-wrap{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1/1;
  overflow: hidden;
  background: transparent;
}
.bb-card__img-wrap img{
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: none !important;
  object-fit: contain;
  padding: 22px;
  box-sizing: border-box;
}
.bb-card__sale{
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--bb-red);
  color: var(--bb-white);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  z-index: 2;
}

.bb-card__body{ padding: 12px 16px 18px; position: relative; }
.bb-card__type{ font-size: 11px; color: var(--bb-ink-soft); margin: 0 0 2px; text-transform: capitalize; }
.bb-card__name-link{ text-decoration: none; }
.bb-card__name{
  font-family: var(--bb-font-sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--bb-ink);
  margin: 0 0 6px;
  max-width: var(--bb-title-max-width, 100%);
  min-height: calc(1.3em * var(--bb-title-lines, 2));
  display: -webkit-box;
  -webkit-line-clamp: var(--bb-title-lines, 2);
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bb-card__price{ font-family: var(--bb-font-sans); font-size: 13px; color: var(--bb-ink); margin: 0; }
.bb-card__price del{ color: var(--bb-ink-soft); font-weight: 400; margin-right: 6px; }
.bb-card__price ins{ text-decoration: none; }

/* --- actions cluster: cart + wishlist, stacked, wishlist reveals on hover --- */
.bb-card__actions{
  position: absolute !important;
  right: var(--bb-actions-offset, 16px);
  bottom: var(--bb-actions-offset, 16px);
  display: flex !important;
  flex-direction: column-reverse !important;
  align-items: center !important;
  gap: 8px;
  z-index: 3 !important;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}
.bb-card__actions.bb-pos-bottom-left{ right: auto; left: var(--bb-actions-offset, 16px); }
.bb-card__actions.bb-pos-top-right{ bottom: auto; top: var(--bb-actions-offset, 16px); flex-direction: column !important; }
.bb-card__actions.bb-pos-top-left{ bottom: auto; top: var(--bb-actions-offset, 16px); left: var(--bb-actions-offset, 16px); right: auto; flex-direction: column !important; }

.bb-card__cart{
  width: 36px; height: 36px;
  border-radius: 50% !important;
  background: var(--bb-navy);
  color: var(--bb-white);
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform 0.15s ease, background 0.2s ease !important;
  flex-shrink: 0 !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
  text-transform: none !important;
  box-shadow: none !important;
}
.bb-card__cart:hover{ transform: scale(1.08) !important; background: var(--bb-navy-deep); }
.bb-card__cart svg{ width: 16px; height: 16px; }
.bb-card__cart.added::after{ display: none; }
.bb-card__cart.loading{ opacity: 0.6; pointer-events: none; }

.bb-card__wishlist{
  width: 32px; height: 32px;
  border-radius: 50% !important;
  background: var(--bb-white);
  border: 1px solid var(--bb-line) !important;
  color: var(--bb-navy);
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  cursor: pointer;
  opacity: 0 !important;
  transform: scale(0.7) !important;
  pointer-events: none !important;
  transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
  text-transform: none !important;
  box-shadow: none !important;
}
.bb-card:hover .bb-card__wishlist,
.bb-card:focus-within .bb-card__wishlist{
  opacity: 1 !important;
  transform: scale(1) !important;
  pointer-events: auto !important;
}
.bb-card__wishlist:hover{ background: var(--bb-cream-deep); }
.bb-card__wishlist svg{ width: 14px; height: 14px; }
.bb-card__wishlist.active svg{ fill: var(--bb-red); stroke: var(--bb-red); }

.bb-no-wishlist .bb-card__wishlist{ display: none !important; }
.bb-no-sale-badge .bb-card__sale{ display: none; }
.bb-no-category .bb-card__type{ display: none; }

/* --- LAYOUT: LIST (image left, content right) --- */
.bb-layout-list .bb-card{ display: flex; flex-direction: row; align-items: stretch; }
.bb-layout-list .bb-card__img-wrap{ width: 140px; flex-shrink: 0; aspect-ratio: 1/1; }
.bb-layout-list .bb-card__body{ flex: 1; display: flex; flex-direction: column; justify-content: center; }
.bb-layout-list .bb-card__actions{ position: static !important; flex-direction: row-reverse !important; margin-top: 10px; right: auto; bottom: auto; }
.bb-layout-list .bb-card__wishlist{ opacity: 1 !important; transform: none !important; pointer-events: auto !important; }


/* ==========================================================
   SINGLE PRODUCT PAGE
   ========================================================== */
.woocommerce-breadcrumb{
  font-size: 12px;
  color: var(--bb-ink-soft);
  margin-bottom: 20px;
}
.woocommerce-breadcrumb a{ color: var(--bb-ink-soft); text-decoration: none; }

.bb-badge{
  display: inline-block;
  background: var(--bb-cream-deep);
  color: var(--bb-sand-deep);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 14px;
}

.product_title.entry-title{ font-size: clamp(28px, 3.4vw, 42px); margin-bottom: 12px; }

.woocommerce div.product p.price, .woocommerce div.product span.price{
  font-family: var(--bb-font-sans);
  font-size: 22px;
  color: var(--bb-ink);
  margin-bottom: 16px;
}

.woocommerce-product-details__short-description{
  font-size: 14px;
  line-height: 1.6;
  color: var(--bb-ink-soft);
  max-width: 520px;
  margin-bottom: 20px;
}

/* variation swatches (size/shade buttons) */
table.variations{ margin-bottom: 16px; }
table.variations select{
  border: 1.5px solid var(--bb-line);
  border-radius: 999px;
  padding: 10px 18px;
  font-family: var(--bb-font-sans);
  background: var(--bb-white);
}

.stock.in-stock{
  color: #2E7D46;
  font-size: 13px;
  font-weight: 600;
}
.stock.out-of-stock{
  color: var(--bb-red);
  font-size: 13px;
  font-weight: 600;
}

/* quantity + add to cart row */
form.cart{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom: 12px; }
.quantity .qty{
  width: 64px;
  padding: 12px 10px;
  border-radius: 999px;
  border: 1.5px solid var(--bb-line);
  text-align: center;
  font-family: var(--bb-font-sans);
}
.single_add_to_cart_button{
  background: var(--bb-ink) !important;
  color: var(--bb-white) !important;
  flex: 1;
  min-width: 180px;
}

.bb-buy-now-btn{
  display: block;
  width: 100%;
  background: var(--bb-sand);
  color: var(--bb-white);
  border: none;
  border-radius: 999px;
  font-family: var(--bb-font-sans);
  font-weight: 700;
  font-size: 14px;
  padding: 15px;
  margin: 10px 0 20px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.bb-buy-now-btn:hover{ background: var(--bb-sand-deep); }

/* trust badges row */
.bb-trust-row{
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--bb-line);
  padding-top: 20px;
  margin-top: 8px;
  text-align: center;
}
.bb-trust-item{
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--bb-ink-soft);
}
.bb-trust-icon{ font-size: 20px; }

/* ==========================================================
   STICKY / PERSISTENT CART BAR
   ========================================================== */
.bb-sticky-cart{
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--bb-white);
  border: 1px solid var(--bb-line);
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(28,39,57,0.16);
  padding: 10px 10px 10px 20px;
  max-width: calc(100% - 32px);
}
.bb-sticky-cart__info{
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--bb-font-sans);
  font-size: 13px;
  color: var(--bb-ink);
  white-space: nowrap;
}
.bb-sticky-cart__count{
  background: var(--bb-navy);
  color: var(--bb-white);
  width: 22px; height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}
.bb-sticky-cart__btn{
  background: var(--bb-navy);
  color: var(--bb-white) !important;
  border-radius: 999px;
  padding: 10px 22px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.bb-sticky-cart__btn:hover{ background: var(--bb-navy-deep); }

@media(max-width:480px){
  .bb-sticky-cart{ left: 16px; right: 16px; transform: none; justify-content: space-between; }
}

/* ==========================================================
   RITUAL CAROUSEL — [bb_ritual_carousel] shortcode
   ========================================================== */
.bb-ritual{ padding: 40px 0; }
.bb-ritual__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 16px;
}
.bb-ritual__title{ font-family: var(--bb-font-display); font-size: clamp(24px,3vw,32px); color: var(--bb-ink); margin: 0; }
.bb-ritual__tabs{ display: flex; gap: 8px; }
.bb-ritual .bb-tab{
  font-family: var(--bb-font-sans) !important;
  font-size: 12px;
  font-weight: 600;
  padding: 8px 16px !important;
  border-radius: 999px !important;
  background: transparent !important;
  border: 1px solid var(--bb-line);
  color: var(--bb-ink-soft) !important;
  cursor: pointer;
  transition: all 0.2s ease;
}
.bb-ritual .bb-tab.active{ background: var(--bb-ink) !important; border-color: var(--bb-ink); color: var(--bb-white) !important; }

.bb-ritual__track{
  display: grid;
  gap: 20px;
  align-items: stretch;
}
.bb-ritual__track::-webkit-scrollbar{ display: none; }
.bb-ritual__track .bb-card{ margin: 0; }

.bb-ritual__footer{ display: flex; align-items: center; justify-content: space-between; margin-top: 24px; }
.bb-progress{ width: 120px; height: 2px; background: var(--bb-line); position: relative; }
.bb-progress__bar{ position: absolute; left: 0; top: 0; height: 100%; width: 35%; background: var(--bb-ink); transition: width 0.3s ease; }
.bb-arrows{ display: flex; gap: 8px; }
.bb-arrow{
  width: 34px; height: 34px;
  border-radius: 50% !important;
  border: 1px solid var(--bb-line);
  background: var(--bb-white);
  display: flex !important; align-items: center !important; justify-content: center !important;
  cursor: pointer;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
  text-transform: none !important;
  box-shadow: none !important;
}
.bb-arrow svg{ width: 14px; height: 14px; }

/* --- LAYOUT: GRID (auto-responsive) --- */
.bb-layout-grid .bb-ritual__track,
.bb-ritual__grid{
  display: grid !important;
  grid-auto-flow: row !important;
  grid-template-columns: repeat(var(--bb-columns, 4), 1fr);
  gap: 20px;
  overflow: visible !important;
}

/* Cap the column count as the screen shrinks, without ever exceeding
   what the user picked in "Columns per row" */
@media(max-width:900px){
  .bb-layout-grid .bb-ritual__track,
  .bb-ritual__grid{ grid-template-columns: repeat(min(3, var(--bb-columns, 4)), 1fr); }
}
@media(max-width:600px){
  .bb-layout-grid .bb-ritual__track,
  .bb-ritual__grid{ grid-template-columns: repeat(min(2, var(--bb-columns, 4)), 1fr); gap: 14px; }
}
@media(max-width:400px){
  .bb-layout-grid .bb-ritual__track,
  .bb-ritual__grid{ grid-template-columns: 1fr; }
}

/* --- LAYOUT: SLIDER (default, horizontal scroll) --- */
.bb-layout-slider .bb-ritual__track{
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: minmax(220px, 1fr);
  gap: 20px;
  overflow-x: auto;
  scroll-behavior: smooth;
}
@media(max-width:600px){
  .bb-layout-slider .bb-ritual__track{ grid-auto-columns: minmax(170px, 1fr); gap: 14px; }
}

/* --- LAYOUT: LIST (auto-responsive: stacks on small screens) --- */
@media(max-width:600px){
  .bb-layout-list .bb-card{ flex-direction: column; }
  .bb-layout-list .bb-card__img-wrap{ width: 100%; }
  .bb-layout-list .bb-card__actions{ flex-direction: row !important; margin-top: 12px; }
}

/* --- Head row + tabs wrap nicely on small screens --- */
@media(max-width:480px){
  .bb-ritual__head{ flex-direction: column; align-items: flex-start; }
  .bb-ritual__tabs{ flex-wrap: wrap; }
}