/* =====================================================================
   Quick-view modal — variable product variation picker.
   Opened from .bf-card__cta--options (see assets/js/quick-view.js). Mirrors
   the bf-atc confirmation modal's overlay/dialog treatment.
   ===================================================================== */

.bf-qv{ position:fixed; inset:0; z-index:100001; display:none; }
.bf-qv.is-open{ display:block; }
body.bf-qv-open{ overflow:hidden; }

.bf-qv__overlay{
  position:absolute; inset:0; background:rgba(20,40,30,.45);
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  opacity:0; transition:opacity .2s ease;
}
.bf-qv.is-open .bf-qv__overlay{ opacity:1; }

.bf-qv__dialog{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-46%);
  width:min(620px,calc(100vw - 32px)); max-height:calc(100vh - 48px); overflow:auto;
  box-sizing:border-box; background:#fff; border-radius:var(--bf-radius,12px);
  padding:26px; box-shadow:0 30px 70px -24px rgba(20,58,36,.5);
  opacity:0; transition:opacity .22s ease, transform .22s cubic-bezier(.4,0,.2,1);
}
.bf-qv.is-open .bf-qv__dialog{ opacity:1; transform:translate(-50%,-50%); }

.bf-qv__close{
  position:absolute; top:8px; right:12px; border:0; background:none; font-size:28px;
  line-height:1; color:#9aa79c; cursor:pointer; padding:4px; z-index:2;
}
.bf-qv__close:hover{ color:#15311f; }

/* ---- Loading / error ---- */
.bf-qv__loading{ display:flex; align-items:center; justify-content:center; min-height:220px; }
.bf-qv__spinner{
  width:30px; height:30px; border-radius:50%;
  border:3px solid #e2eadf; border-top-color:#2faa5a;
  animation:bf-qv-spin .7s linear infinite;
}
@keyframes bf-qv-spin{ to{ transform:rotate(360deg); } }
.bf-qv__error{ text-align:center; color:#8a5a5a; padding:40px 10px; margin:0; }

/* ---- Product layout: media + details ---- */
.bf-qv__product{ display:flex; gap:22px; align-items:flex-start; }
.bf-qv__media{
  flex:0 0 220px; max-width:220px; border-radius:var(--bf-radius,12px); overflow:hidden;
  background:#f5f9f2; border:1px solid var(--bf-hairline,#e6ebe1); aspect-ratio:3 / 4;
}
.bf-qv__media .bf-qv__img,
.bf-qv__media img{ display:block; width:100%; height:100%; object-fit:cover; margin:0; }
.bf-qv__main{ flex:1 1 auto; min-width:0; }

.bf-qv__title{
  margin:2px 0 8px; font-family:var(--wp--preset--font-family--heading,inherit);
  font-size:22px; line-height:1.2; color:#15311f;
}
.bf-qv__rating{ display:flex; align-items:center; gap:8px; margin:0 0 8px; }
.bf-qv__rating .bf-star{ color:#e0a93c; letter-spacing:1px; font-size:14px; }
.bf-qv__reviews{ font-size:12px; color:#7d8a7f; }

.bf-qv__price{ font-size:18px; font-weight:800; color:#15311f; margin:0 0 10px; }
.bf-qv__price .bf-price-prefix{ font-size:11px; font-weight:600; color:#7d8a7f; margin-right:4px; }
.bf-qv__price del{ color:#9aa79c; font-weight:600; margin-right:6px; }
.bf-qv__price ins{ text-decoration:none; }

.bf-qv__excerpt{ font-size:13.5px; line-height:1.55; color:#5a6b5e; margin:0 0 16px; }
.bf-qv__excerpt p{ margin:0 0 8px; }
.bf-qv__excerpt :last-child{ margin-bottom:0; }

/* ---- Native WooCommerce variations form, restyled ---- */
.bf-qv__form .variations{ width:100%; border:0; margin:0 0 6px; border-collapse:collapse; }
.bf-qv__form .variations th,
.bf-qv__form .variations td{ display:block; text-align:left; padding:0; border:0; }
.bf-qv__form .variations tr{ display:block; margin:0 0 12px; }
/* Only space BETWEEN attribute rows; the last row sits tight to the button
   (the table's own bottom margin handles that gap). */
.bf-qv__form .variations tr:last-child{ margin-bottom:0; }
.bf-qv__form .variations .label label{
  display:block; font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:#5a6b5e; margin:0 0 5px;
}
.bf-qv__form .variations select{
  width:100%; box-sizing:border-box; padding:11px 12px; font-size:14px; color:#15311f;
  background:#fff; border:1.5px solid var(--bf-hairline,#d2ddcf); border-radius:var(--bf-radius,10px);
  appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235a6b5e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center;
}
.bf-qv__form .variations select:focus{ outline:none; border-color:#2faa5a; }
/* WooCommerce toggles this "Clear" link with visibility:hidden, which still
   reserves a line of space below the select. Hide it outright (as the PDP does)
   — the "Choose an option" placeholder already lets shoppers deselect. */
.bf-qv__form .reset_variations{ display:none !important; }

/* WooCommerce injects a price/description/availability block after a valid
   selection — but the header price + the per-option dropdown labels (which also
   carry "(Out of stock)") already cover all of it, so hide it and collapse the
   space so the dropdown sits the same distance from the button as the sections
   above. */
.bf-qv__form .single_variation{ display:none !important; margin:0; }
.bf-qv__form .single_variation_wrap{ margin:0; }

/* qty + add-to-cart on ONE row (nowrap, like the PDP). The hidden inputs and
   <script> tags WooCommerce prints between them are display:none, so the only
   flex items are the stepper and the button. */
.bf-qv__form .woocommerce-variation-add-to-cart{ display:flex; gap:12px; align-items:stretch; flex-wrap:nowrap; }
.bf-qv__form .quantity{ flex:0 0 auto; }

/* Quantity stepper — mirrors the PDP bf-qty control (built by quick-view.js). */
.bf-qv .quantity.bf-qty{
  display:inline-flex; align-items:stretch; overflow:hidden;
  border:1px solid var(--bf-hairline,#e3e8dd); border-radius:var(--bf-radius,10px);
  background:var(--bf-white,#fff);
}
.bf-qv .quantity.bf-qty:focus-within{ outline:2px solid var(--bf-forest,#2faa5a); outline-offset:1px; }
.bf-qv .quantity.bf-qty .qty{
  width:54px; padding:10px 0; text-align:center; border:0; background:transparent;
  font-size:1rem; font-weight:700; color:var(--bf-graphite,#171716); -moz-appearance:textfield;
}
.bf-qv .quantity.bf-qty .qty:focus,
.bf-qv .quantity.bf-qty .qty:focus-visible{ outline:none; box-shadow:none; border:0; }
.bf-qv .quantity.bf-qty .qty::-webkit-outer-spin-button,
.bf-qv .quantity.bf-qty .qty::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.bf-qv .bf-qty__btn{
  width:42px; border:0; background:var(--bf-paper,#fafbf8); color:var(--bf-graphite,#171716);
  font-size:20px; line-height:1; cursor:pointer; transition:background .18s ease, color .18s ease;
}
.bf-qv .bf-qty__btn:hover{ color:var(--bf-forest,#2faa5a); }
.bf-qv__form .single_add_to_cart_button{
  flex:1 1 auto; width:auto; min-width:0; display:inline-flex; align-items:center; justify-content:center;
  padding:14px 18px; border:0; border-radius:var(--bf-radius,10px); cursor:pointer; white-space:nowrap;
  background:linear-gradient(135deg,#2faa5a,#1f8044); color:#fff;
  font-size:14px; font-weight:700; letter-spacing:.3px; text-decoration:none;
  transition:background .2s ease, opacity .2s ease;
}
.bf-qv__form .single_add_to_cart_button:hover{ background:linear-gradient(135deg,#3cc471,#249650); }
.bf-qv__form .single_add_to_cart_button.disabled,
.bf-qv__form .single_add_to_cart_button.wc-variation-selection-needed{ opacity:.45; cursor:not-allowed; }
.bf-qv__form .single_add_to_cart_button.loading{ pointer-events:none; opacity:.7; }
/* WooCommerce hides this until a variation is chosen; keep its own logic. */
.bf-qv__form .woocommerce-variation-add-to-cart-disabled .single_add_to_cart_button{ opacity:.45; }

.bf-qv__details{
  display:inline-block; margin-top:14px; font-size:13px; font-weight:600;
  color:#1f8044; text-decoration:underline; text-underline-offset:2px;
}
.bf-qv__details:hover{ color:#15311f; }

@media (max-width:560px){
  .bf-qv__dialog{ padding:20px; }
  .bf-qv__product{ flex-direction:column; gap:16px; }
  .bf-qv__media{ flex-basis:auto; max-width:160px; align-self:center; }
  .bf-qv__title{ font-size:20px; }
}

/* Tiny phones: not enough width to keep the stepper + button on one line
   without the label overflowing, so let the button take its own full row. */
@media (max-width:380px){
  .bf-qv__form .woocommerce-variation-add-to-cart{ flex-wrap:wrap; }
  .bf-qv__form .single_add_to_cart_button{ flex:1 1 100%; }
}

@media (prefers-reduced-motion:reduce){
  .bf-qv__overlay,.bf-qv__dialog,.bf-qv__spinner{ transition:none; animation:none; }
}