/* Single-product page: Bollypiano cream/orange/teal theme + fonts, matching the
   membership pages. Plus the compact audio-preview player. Scoped to product pages.
   v1: a first pass on background, fonts, title, price, tabs. Iterate visually. */

@font-face{font-family:"Fraunces";font-style:normal;font-weight:100 900;font-display:swap;src:url("fonts/fraunces.woff2") format("woff2")}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:100 900;font-display:swap;src:url("fonts/fraunces-italic.woff2") format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:100 900;font-display:swap;src:url("fonts/hanken-grotesk.woff2") format("woff2")}

:root{
  --bp-cream:#FBEED7; --bp-cream2:#FFF7EA; --bp-surface:#FFFBF3;
  --bp-ink:#001524; --bp-ink-soft:#33474F; --bp-muted:#566669;
  --bp-line:rgba(0,21,36,.12); --bp-line2:rgba(0,21,36,.22);
  --bp-accent:#FF7D00; --bp-accent-press:#E86E00; --bp-teal:#15616D; --bp-deep:#78290F;
}

/* ---- standard / premium pill (above the title) ---- */
.bp-ptag{display:inline-flex;align-items:center;font-size:.72rem;font-weight:600;letter-spacing:.02em;padding:3px 10px;border-radius:7px;font-family:"Hanken Grotesk",system-ui,sans-serif}
.bp-ptag--standard{background:rgba(0,21,36,.05);color:var(--bp-ink-soft);border:1px solid var(--bp-line2)}
.bp-ptag--premium{background:color-mix(in srgb,var(--bp-deep) 14%,transparent);color:var(--bp-deep);border:1px solid color-mix(in srgb,var(--bp-deep) 36%,transparent)}

/* ---- product subtitle metadata: one consistent muted line ---- */
body.single-product .bollypiano-product-attribute{
  font-family:"Hanken Grotesk",system-ui,sans-serif!important;
  font-size:.95rem!important;font-weight:400!important;color:var(--bp-muted)!important;
  line-height:1.5!important;margin:0!important;
}

/* ---- page theme ---- */
body.single-product{background:var(--bp-cream);font-family:"Hanken Grotesk",system-ui,-apple-system,sans-serif;color:var(--bp-ink);letter-spacing:-.005em}
/* let the cream body show through hello-elementor's content wrapper */
body.single-product main.site-main{background:transparent}

body.single-product .product_title{font-family:"Fraunces",Georgia,serif!important;font-weight:600!important;letter-spacing:-.015em;color:var(--bp-ink)}
body.single-product .woocommerce-Price-amount{font-family:"Fraunces",Georgia,serif!important;font-weight:600;color:var(--bp-ink)}

/* product tabs (Additional Information / Description) */
body.single-product .product-tabs-nav{font-family:"Fraunces",Georgia,serif}
body.single-product .product-details-tabs{color:var(--bp-ink-soft)}

/* ---- compact audio preview player ---- */
.bp-audio{
  display:flex;align-items:center;gap:11px;
  padding:6px 2px;
  font-family:"Hanken Grotesk",system-ui,sans-serif;
}
.bp-audio__play{
  flex:none;width:34px;height:34px;border-radius:50%;border:0;cursor:pointer;
  background:var(--bp-accent);color:var(--bp-ink);display:grid;place-items:center;
  transition:background .18s ease;padding:0;
}
.bp-audio__play:hover{background:var(--bp-accent-press)}
.bp-audio__play svg{width:15px;height:15px;display:block}
.bp-audio__i{display:grid;place-items:center;line-height:0}
.bp-audio__i--play{margin-left:2px}
.bp-audio__i--pause{display:none}
.bp-audio.is-playing .bp-audio__i--play{display:none}
.bp-audio.is-playing .bp-audio__i--pause{display:grid}
.bp-audio__bar{flex:1 1 auto;min-width:60px;height:5px;border-radius:3px;background:rgba(0,21,36,.13);position:relative;cursor:pointer;overflow:hidden}
.bp-audio__fill{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--bp-accent);border-radius:3px}
.bp-audio__time{flex:none;font-size:.78rem;color:var(--bp-muted);font-variant-numeric:tabular-nums;min-width:0;text-align:left;padding-left:2px}
.bp-audio__el{display:none}

/* ---- preview toolbar: audio (left) + compact interactive-player button (right) ---- */
.bp-preview-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.bp-preview-bar .bp-audio{flex:1 1 200px;min-width:170px;padding:6px 0}
.bp-player-btn{
  flex:none;display:inline-flex;align-items:center;gap:7px;
  padding:8px 14px;border-radius:10px;white-space:nowrap;text-decoration:none;
  background:color-mix(in srgb,var(--bp-teal) 9%,transparent);
  border:1.5px solid var(--bp-teal);color:var(--bp-teal);
  font-weight:600;font-size:.88rem;transition:background .16s ease;
}
.bp-player-btn:hover{background:color-mix(in srgb,var(--bp-teal) 16%,transparent);color:var(--bp-teal)}
.bp-player-btn .bp-player-ico{flex:none}

/* locked teaser variant (non-members): muted, with a lock; links to the plans page */
.bp-player-btn--locked{background:transparent;border-color:var(--bp-line2);color:var(--bp-muted)}
.bp-player-btn--locked:hover{border-color:var(--bp-teal);color:var(--bp-teal);background:color-mix(in srgb,var(--bp-teal) 8%,transparent)}
.bp-player-btn--locked .bp-player-lock{flex:none}

/* ---- preview toolbar = the header strip of the score frame ----
   The frame itself (border + rounded corners + 0 gap) is set on the Elementor
   CONTAINER that holds the toolbar + image; here the toolbar just gets its cream
   surface and a divider line beneath it so it reads as the top of that frame. */
.bp-preview-bar{background:var(--bp-surface);border-bottom:1px solid var(--bp-line);padding:10px 14px;margin-bottom:0}

/* the self-contained framed preview unit ([product_preview]): toolbar header +
   score image in one bordered, rounded, clipped box (no Elementor dependency). */
.bp-preview{border:1px solid var(--bp-line);border-radius:14px;overflow:hidden;background:var(--bp-surface);max-width:100%}
.bp-preview__score{line-height:0}
.bp-preview__score img{display:block;width:100%;height:auto}

/* product subtitle: one consistent dot-separated muted line under the title */
body.single-product .bp-subtitle{font-family:"Hanken Grotesk",system-ui,sans-serif;font-size:.95rem;font-weight:400;color:var(--bp-muted);line-height:1.5;margin:6px 0 0}
body.single-product .bp-subtitle__sep{color:var(--bp-line2);margin:0 3px}

/* Pin the wishlist heart to the top-right, level with the product title (below the badge). */
body.single-product .elementor-widget.elementor-absolute:has(.bollypiano-wishlist-button){
  left:auto!important;right:0!important;top:40px!important;bottom:auto!important;width:auto!important;z-index:3;
}
/* Reserve the heart's space so a long title wraps instead of running under it. Padding on
   the title WIDGET (not the h1) reliably shrinks the available width so the h1 text wraps. */
body.single-product .elementor-widget-woocommerce-product-title{padding-right:3rem!important}

/* tighten the badge → title gap */
body.single-product .elementor-widget-shortcode:has(.bp-ptag){margin-bottom:2px!important}
body.single-product h1.product_title{margin-top:2px!important}

/* hide the bottom Product Meta entirely (category was a duplicate; tags move up as chips) */
body.single-product .product_meta{display:none!important}

/* tag chips (under the subtitle) */
body.single-product .bp-tags{display:flex;flex-wrap:wrap;gap:7px;margin:2px 0 0}
/* tighten the title → subtitle → tags vertical rhythm */
body.single-product .elementor-widget-shortcode:has(.bp-subtitle){margin-top:-16px!important;margin-bottom:0!important}
body.single-product .elementor-widget-shortcode:has(.bp-tags){margin-top:-10px!important}

/* price with member saving surfaced: price row, then a savings pill below (Mobbin pattern) */
body.single-product .bp-price{display:flex;flex-direction:column;align-items:flex-start;gap:9px}
body.single-product .bp-price__row{display:flex;align-items:baseline;flex-wrap:wrap;gap:12px}
body.single-product .bp-price__now .woocommerce-Price-amount{font-family:"Fraunces",Georgia,serif!important;font-weight:600!important;font-size:2.1rem!important;color:var(--bp-ink)!important}
body.single-product .bp-price__was{text-decoration:line-through}
body.single-product .bp-price__was .woocommerce-Price-amount{font-family:"Hanken Grotesk",system-ui,sans-serif!important;font-weight:400!important;font-size:1.15rem!important;color:var(--bp-muted)!important}
body.single-product .bp-price__save{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;font-weight:600;padding:5px 12px;border-radius:20px;background:color-mix(in srgb,var(--bp-teal) 12%,transparent);color:var(--bp-teal);border:1px solid color-mix(in srgb,var(--bp-teal) 32%,transparent)}
body.single-product .bp-price__save svg{flex:none}
body.single-product .bp-price__save--sale{background:color-mix(in srgb,var(--bp-accent) 13%,transparent);color:var(--bp-deep);border-color:color-mix(in srgb,var(--bp-accent) 36%,transparent)}

/* Add-to-cart is the PRIMARY action by default (orange): members/legacy on any product, or
   a member who is out of credits. */
body.single-product button.single_add_to_cart_button{
  background:var(--bp-accent)!important;color:var(--bp-ink)!important;
  border:0!important;border-radius:12px!important;font-weight:700!important;
  box-shadow:0 10px 24px -12px rgba(255,125,0,.7)!important;
}
body.single-product button.single_add_to_cart_button:hover{
  background:var(--bp-accent-press)!important;color:var(--bp-ink)!important;
}
/* When a primary panel CTA sits above it (credit redeem / non-member radio), de-emphasise
   add-to-cart to a neutral secondary (Mobbin: one strong button). */
body.single-product .elementor-widget-woocommerce-product-add-to-cart:has(.bpr-cta) button.single_add_to_cart_button{
  background:transparent!important;color:var(--bp-ink)!important;
  border:1.5px solid var(--bp-line2)!important;box-shadow:none!important;
}
body.single-product .elementor-widget-woocommerce-product-add-to-cart:has(.bpr-cta) button.single_add_to_cart_button:hover{
  border-color:var(--bp-ink)!important;background:rgba(0,21,36,.03)!important;
}
body.single-product .bp-tag{
  display:inline-flex;align-items:center;font-size:.78rem;font-weight:500;
  padding:4px 11px;border-radius:20px;text-decoration:none;
  color:var(--bp-ink-soft);background:var(--bp-cream2);border:1px solid var(--bp-line);
  transition:border-color .15s ease,background .15s ease,color .15s ease;
}
body.single-product .bp-tag:hover{border-color:var(--bp-accent);background:color-mix(in srgb,var(--bp-accent) 8%,transparent);color:var(--bp-ink)}

/* ---- wishlist: an icon (heart), not a full-width button ---- */
body.single-product .bollypiano-wishlist-button{
  display:inline-flex;align-items:center;justify-content:center;
  width:auto!important;min-width:0!important;height:auto!important;padding:8px!important;
  border:0!important;background:none!important;box-shadow:none!important;border-radius:50%!important;
  cursor:pointer;color:var(--bp-ink);transition:background .15s ease;
}
body.single-product .bollypiano-wishlist-button:hover{background:color-mix(in srgb,var(--bp-ink) 6%,transparent)!important}
body.single-product .bollypiano-wishlist-button svg{margin:0!important;width:24px!important;height:24px!important}
body.single-product .bollypiano-wishlist-button svg path{stroke:var(--bp-ink)!important;transition:fill .15s ease,stroke .15s ease}
body.single-product .bollypiano-wishlist-button:hover svg path{stroke:var(--bp-accent)!important}
body.single-product .bollypiano-wishlist-button.in-wishlist svg path{fill:var(--bp-accent)!important;stroke:var(--bp-accent)!important}
body.single-product .bollypiano-wishlist-button .wishlist-button-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}