/* Bookzilla fixes + responsiveness layer.
   Loads after bookzilla-refresh.css AND the combined-design plugin, so it wins
   without !important wars. Rollback: disable bookzilla-refresh-theme.php. */

/* ---------- 1. sticky header must clear the WordPress admin bar ----------
   The header parks above the viewport by the height of the announce bar
   (--rf-top, set by bookzilla-header-refresh.js). When an admin is logged in,
   the fixed admin bar covers the top 32px (46px on narrow screens), which
   was cutting the logo row in half. */
html body.bookzilla-site.bookzilla-site.admin-bar header.xpro-theme-builder-header{top:calc(var(--rf-top,-43px) + var(--wp-admin--admin-bar--height,32px))}
@media(max-width:782px){
  html body.bookzilla-site.bookzilla-site.admin-bar header.xpro-theme-builder-header{top:calc(var(--rf-top,-43px) + var(--wp-admin--admin-bar--height,46px))}
}
@media(max-width:600px){
  /* WordPress un-fixes the admin bar on small phones, so it scrolls away */
  html body.bookzilla-site.bookzilla-site.admin-bar header.xpro-theme-builder-header{top:var(--rf-top,-43px)}
}
html.bz-has-admin-bar{scroll-padding-top:calc(172px + var(--wp-admin--admin-bar--height,32px))}

/* ---------- 2. Account details: "Password change" sits inside its box ----------
   A <legend> normally straddles the fieldset's top border, which looked like it
   was neither above nor inside the card. Floating it takes it out of the border
   and puts it at the top of the card's content. */
html body.bookzilla-site.bookzilla-site .woocommerce-EditAccountForm fieldset{position:relative;margin:.4rem 0 1.3rem;padding:1.15rem 1.2rem .35rem;border:1px solid var(--bz-line);border-radius:var(--bz-r);background:var(--bz-surface,#f4f7fb);min-width:0}
html body.bookzilla-site.bookzilla-site .woocommerce-EditAccountForm fieldset>legend{float:left;width:100%;padding:0;margin:0 0 .9rem;font-family:var(--bz-ff-d);font-size:1.05rem;font-weight:800;letter-spacing:-.01em;line-height:1.3;color:var(--bz-ink)}
html body.bookzilla-site.bookzilla-site .woocommerce-EditAccountForm fieldset>legend+*{clear:both}
html body.bookzilla-site.bookzilla-site .woocommerce-EditAccountForm fieldset::after{content:"";display:table;clear:both}

/* ---------- 3. snappier feel ---------- */
/* no 300ms tap delay, and no accidental double-tap zoom on controls */
html body.bookzilla-site a,html body.bookzilla-site button,html body.bookzilla-site input,html body.bookzilla-site select,html body.bookzilla-site label,html body.bookzilla-site summary,html body.bookzilla-site [role="button"]{touch-action:manipulation}
/* tap highlight off; the hover/active states already give feedback */
html body.bookzilla-site{-webkit-tap-highlight-color:transparent}
/* instant press feedback */
html body.bookzilla-site .bz-btn:active,html body.bookzilla-site .rf-btn:active,html body.bookzilla-site ul.products li.product a.button:active,html body.bookzilla-site .bz-act:active{transform:scale(.97);transition-duration:.06s}
/* shorter hover/transition times so the UI answers faster */
html body.bookzilla-site .bz-btn,html body.bookzilla-site .bz-act,html body.bookzilla-site .bz-pill,html body.bookzilla-site .bz-catnav a,html body.bookzilla-site .bz-mega__col a,html body.bookzilla-site ul.products li.product{transition-duration:.14s}
/* the mega menu fades in quickly instead of lingering */
html body.bookzilla-site .bz-mega{transition-duration:.12s}
/* images never shift the layout while loading */
html body.bookzilla-site ul.products li.product img{aspect-ratio:2/3;height:auto}
/* smooth anchor jumps stay, but respect reduced motion */
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ---------- 4. Favourite heart (product cards: home, shop, categories, related) ----------
   Saved look = white circle, gold ring, filled gold heart. The new homepage rules
   turned a saved heart red and left it an outline; these win on every grid. */
:root{
  --bz-fav:#f5b82e;
  --bz-heart-fill:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1.1-1.1a5.5 5.5 0 0 0-7.8 7.8L12 21l8.9-8.6a5.5 5.5 0 0 0-.1-7.8Z'/%3E%3C/svg%3E");
  --bz-heart-line:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1.1-1.1a5.5 5.5 0 0 0-7.8 7.8L12 21l8.9-8.6a5.5 5.5 0 0 0-.1-7.8Z'/%3E%3C/svg%3E");
}
@keyframes bz-fav-pop{0%{transform:scale(.7)}55%{transform:scale(1.22)}100%{transform:scale(1)}}

/* saved (confirmed by the plugin, or just clicked and waiting for it) */
html body.bookzilla-site.bookzilla-site.bookzilla-site ul.products li.product a.tinvwl_add_to_wishlist_button:is(.tinvwl-product-in-list,.bz-fav-on):not(.bz-fav-off){
  color:var(--bz-fav)!important;background:#fff!important;border:1.5px solid var(--bz-fav)!important;box-sizing:border-box!important;
}
html body.bookzilla-site.bookzilla-site.bookzilla-site ul.products li.product a.tinvwl_add_to_wishlist_button:is(.tinvwl-product-in-list,.bz-fav-on):not(.bz-fav-off)::before{
  background:currentColor!important;
  -webkit-mask:var(--bz-heart-fill) center/contain no-repeat!important;mask:var(--bz-heart-fill) center/contain no-repeat!important;
}
/* just un-saved, plugin still confirming: show the outline straight away */
html body.bookzilla-site.bookzilla-site.bookzilla-site ul.products li.product a.tinvwl_add_to_wishlist_button.bz-fav-off{
  color:#5a6b82!important;background:rgba(255,255,255,.95)!important;border:1px solid #dbe3ee!important;box-sizing:border-box!important;
}
html body.bookzilla-site.bookzilla-site.bookzilla-site ul.products li.product a.tinvwl_add_to_wishlist_button.bz-fav-off::before{
  background:currentColor!important;
  -webkit-mask:var(--bz-heart-line) center/contain no-repeat!important;mask:var(--bz-heart-line) center/contain no-repeat!important;
}
/* hovering an unsaved heart previews the gold (it was red on the homepage) */
html body.bookzilla-site.bookzilla-site.bookzilla-site ul.products li.product a.tinvwl_add_to_wishlist_button:hover:not(.tinvwl-product-in-list):not(.bz-fav-on),
html body.bookzilla-site.bookzilla-site.bookzilla-site ul.products li.product a.tinvwl_add_to_wishlist_button.bz-fav-off:hover{
  color:var(--bz-fav)!important;border-color:var(--bz-fav)!important;background:#fff!important;
}
/* a little pop when it is saved */
html body.bookzilla-site.bookzilla-site.bookzilla-site ul.products li.product a.tinvwl_add_to_wishlist_button.bz-fav-pop::before{animation:bz-fav-pop .4s cubic-bezier(.22,.8,.3,1) both}
@media(prefers-reduced-motion:reduce){html body.bookzilla-site ul.products li.product a.tinvwl_add_to_wishlist_button.bz-fav-pop::before{animation:none}}

/* 5. Wishlist badge: no "0" bubble. The number is kept in data-count by
      bookzilla-header-refresh.js; the bubble only shows when there is something to show. */
html body.bookzilla-site.bookzilla-site .bz-act__count.bz-wishlist-count[data-count="0"] { display: none !important; }

/* 6. Product page: quantity box, Add to cart and wishlist button sit on one even row.
      Variable products wrapped them in a plain block, so WooCommerce's float:left on the button pushed it flush
      against the quantity box and the three drifted out of line (the wishlist plugin also adds a 15px top margin to
      its button). The wrapper now uses the same flex row and gap as simple products, and the three controls share one
      height. The :not(#bzo) lifts the button rule above the combined design's id-bearing :is() selector. */
html body.bookzilla-site.bookzilla-site.single-product div.product form.cart .woocommerce-variation-add-to-cart { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; }
html body.bookzilla-site.bookzilla-site.single-product div.product form.cart .tinv-wraper { margin: 0; }
html body.bookzilla-site.bookzilla-site.single-product div.product form.cart .tinv-wraper .tinvwl_add_to_wishlist_button { margin: 0; }
html body.bookzilla-site.bookzilla-site.single-product div.product form.cart .single_add_to_cart_button:not(#bzo),
html body.bookzilla-site.bookzilla-site.single-product div.product form.cart .tinv-wraper .tinvwl_add_to_wishlist_button { min-height: 50px; }

/* 7. Product page tabs (a white card): equal space above and below the tab pills (they used to touch the top edge of the card),
      and the panel text gets side padding so it no longer sits on the card edge (1.75rem = strip padding + pill padding, so the
      heading lines up under the first tab label; 1rem on phones). */
html body.bookzilla-site.bookzilla-site.single-product div.product .woocommerce-tabs ul.tabs { padding: .7rem; }
html body.bookzilla-site.bookzilla-site.single-product div.product .woocommerce-tabs .woocommerce-Tabs-panel { padding: 0 clamp(1rem, 4vw, 1.75rem); }

/* 8. Variation swatches: no grey box behind them. Hello Elementor stripes odd table rows with a 7% grey and the variations table has a single
      row, so the swatches sat in a full-width grey slab (no left padding, plus an empty strip underneath where the hidden Clear link lives).
      The cells go plain and Clear sits beside the swatches (or under them when they wrap, via the flex gap) as a small outlined button (same white fill, hairline border and rounded corners as the
      wishlist button; 28px high, so it clears the 24px minimum target size). Only design tokens are used, no new colours. */
html body.bookzilla-site.bookzilla-site.single-product div.product form.cart table.variations :is(td, th) { background: none; border: 0; padding: 0; }
html body.bookzilla-site.bookzilla-site.single-product div.product form.cart table.variations tr:not(:last-child) td { padding-bottom: .6rem; }
html body.bookzilla-site.bookzilla-site.single-product div.product form.cart table.variations td.value { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; line-height: 1.3; }
html body.bookzilla-site.bookzilla-site.single-product div.product form.cart table.variations .cfvsw-swatches-container { max-width: 100%; }
html body.bookzilla-site.bookzilla-site.single-product div.product form.cart table.variations a.reset_variations { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; min-height: 28px; padding: 0 .85rem; border: 1px solid var(--bz-line); border-radius: var(--bz-r-sm); background: var(--bz-white); color: var(--bz-ink); font-size: .75rem; font-weight: 600; line-height: 1; text-decoration: none; cursor: pointer; transition: border-color .15s ease, color .15s ease; }
html body.bookzilla-site.bookzilla-site.single-product div.product form.cart table.variations a.reset_variations:hover { border-color: var(--bz-blue); color: var(--bz-blue); }

/* 9. Instant header counts (see bookzilla-instant-counts.js): a short pop when a badge changes, and the busy state of the product page
      Add to cart while its form is being posted (the page then reloads; the button is not disabled, because a disabled button would not be sent with the form). */
@keyframes bz-count-pop { 0% { transform: scale(1); } 40% { transform: scale(1.3); } 100% { transform: scale(1); } }
html body.bookzilla-site .bz-act__count.bz-count-pop { animation: bz-count-pop .32s ease-out; }
@media (prefers-reduced-motion: reduce) { html body.bookzilla-site .bz-act__count.bz-count-pop { animation: none; } }
html body.bookzilla-site.bookzilla-site form.cart .single_add_to_cart_button.bz-adding { opacity: .72; cursor: progress; pointer-events: none; }

/* 10. Busy state of plain forms (see bookzilla-form-busy.js): after Send message, Log in, Create an account, Save changes or a search button is pressed the
      button dims, shows a spinner and a short label, and a second press is ignored. The button is never disabled (a disabled submit button is left out of the form's data). */
@keyframes bz-turn { to { transform: rotate(360deg); } }
html body .bz-sending { cursor: progress; pointer-events: none; opacity: .78; }
html body form[data-bz-sending] { cursor: progress; }
html body .bz-spin { display: inline-block; width: .95em; height: .95em; margin-right: .55em; vertical-align: -.12em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: bz-turn .75s linear infinite; }
html body .bz-sending--icon { position: relative; }
html body .bz-sending--icon > svg { opacity: .2; }
html body .bz-sending--icon::after { content: ""; position: absolute; inset: 0; margin: auto; width: 1em; height: 1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: bz-turn .75s linear infinite; }
@media (prefers-reduced-motion: reduce) { html body .bz-spin, html body .bz-sending--icon::after { animation-duration: 2.4s; } }

/* 11. Instant cart (see bookzilla-instant-cart.js): a drawer line that is on its way out collapses, a table row that is on its way out is hidden, money that cannot be worked out
      on the page waits (dimmed) for the server, a failed save shows a short message, and WooCommerce's own veil over the cart / wishlist is lightened while the page already shows the result. */
html body.bookzilla-site.bookzilla-site .bz-citem { transition: opacity .2s ease, max-height .22s ease, padding .22s ease, border-color .22s ease; }
html body.bookzilla-site.bookzilla-site .bz-citem.bz-gone { max-height: 0 !important; padding-top: 0; padding-bottom: 0; border-bottom-width: 0; opacity: 0; overflow: hidden; pointer-events: none; }
html body tr.bz-leaving { display: none !important; }
html body .bz-money-pending { opacity: .45; transition: opacity .15s ease; }
html body .bz-drawer__err { flex: 0 0 auto; margin: 12px 20px 0; padding: 10px 12px; border-radius: 10px; background: #fff1f2; color: #9f1239; font-size: 13px; line-height: 1.4; }
html body form.woocommerce-cart-form[data-bz-opt] .blockUI.blockOverlay,
html body .cart_totals[data-bz-opt] .blockUI.blockOverlay,
html body .tinv-wishlist[data-bz-opt] .blockUI.blockOverlay { background: rgba(255, 255, 255, .3) !important; }
@media (prefers-reduced-motion: reduce) { html body.bookzilla-site.bookzilla-site .bz-citem { transition: none; } }