/* =========================================================
   FEATURE: STICKY ADD-TO-CART BAR
   Enabled programmatically by the plugin (astra_get_option
   filter, only when Settings > Digiskyward > Sticky Bar is
   switched on) -- restyled here to match the brand instead of
   Astra's default theme-color bar.

   Desktop keeps the full bar: product thumbnail, title, price,
   and two buttons on a dark strip. Mobile drops the dark strip
   entirely (see the max-width:600px block) in favour of two
   full-bleed, edge-to-edge brand-colour buttons with nothing
   else in the row -- no product info, no background bar behind
   them, just two big tappable actions flush against the bottom
   of the screen.
   ========================================================= */

.ast-sticky-add-to-cart {
  background: var(--bbpb-black) !important;
  border-top: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 -8px 24px rgba(0,0,0,.18);
}

/* Astra wraps the bar's content in the theme's normal ~1200px
   page container, centred with wide empty margins on either
   side -- fine for body copy, but on a wide screen it makes a
   dark full-width bar read as lopsided, with the title/price/
   buttons cluster sitting off in a narrow strip rather than
   using the bar it's actually on. Widen it, but cap it (rather
   than truly 100%) so the title and the price/buttons cluster
   don't end up separated by an enormous dead gap on very wide
   monitors -- 1600px keeps the bar reading as one connected row
   at typical desktop widths without that blowing out further. */
.ast-sticky-add-to-cart .ast-container {
  max-width: 1600px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 40px !important;
  padding-right: 40px !important;
  box-sizing: border-box !important;
}

/* A little more breathing room than Astra's own 10px 0 default --
   the tight default padding combined with 42px-tall buttons was
   what made the whole bar read as cramped/shrunk. */
.ast-sticky-add-to-cart .ast-sticky-add-to-cart-content {
  padding: 14px 0 !important;
  min-height: 76px !important;
}

.ast-sticky-add-to-cart .ast-sticky-add-to-cart-title-wrap img {
  max-height: 56px !important;
  border-radius: var(--bbpb-radius);
}

.ast-sticky-add-to-cart .ast-sticky-add-to-cart-title {
  color: #FFFFFF !important;
  font-family: "Inter", sans-serif !important;
  font-weight: 800 !important;
  font-size: 16px !important;
}

/* The price belongs WITH the buttons rather than floating midway
   between the title and them. Astra's default right padding left
   it reading as part of the empty middle; tightening the gap
   groups price and actions into one decision cluster, and
   margin-left:auto pushes that whole cluster to the right edge
   so it never drifts on very wide screens. Tabular figures keep
   the price from shifting width as variations change it. */
.ast-sticky-add-to-cart .ast-sticky-add-to-cart-action-price {
  color: var(--bbpb-red) !important;
  font-family: "Inter", sans-serif !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  padding-right: 22px !important;
  margin-left: auto;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.ast-sticky-add-to-cart .ast-sticky-add-to-cart-action-price del {
  color: rgba(255,255,255,.45) !important;
}

.ast-sticky-add-to-cart .quantity .qty {
  height: 48px !important;
  border-color: rgba(255,255,255,.25) !important;
  background: rgba(255,255,255,.06) !important;
  color: #FFFFFF !important;
}

.ast-sticky-add-to-cart .single_add_to_cart_button:not(#btn-1cc-pdp) {
  min-height: 48px;
  padding: 12px 26px !important;
  font-size: 14px !important;
  /* See buttons.css: upstream .disabled styling adds opacity:.5
     on top of whatever colour this rule sets, so it has to be
     switched off here too or the "always full colour" setting
     never actually looks full colour. */
  opacity: 1 !important;
}

.ast-sticky-add-to-cart #btn-1cc-pdp {
  position: relative;
  overflow: hidden !important;
  isolation: isolate;

  min-height: 48px;
  padding: 12px 26px !important;
  font-size: 14px !important;
  background: var(--bbpb-black-soft) !important;
  color: #FFFFFF !important;
  border: 1.5px solid rgba(255,255,255,.35) !important;
  opacity: 1 !important;
}

/* Buy Now is the only button that shines, here and everywhere
   else -- Add to Cart stays plain so the shine reads as "this is
   the fast checkout path" instead of decoration on every button. */
.ast-sticky-add-to-cart #btn-1cc-pdp:not(.disabled)::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(
    110deg,
    transparent 0%,
    rgba(255,255,255,.45) 50%,
    transparent 100%
  );
  transform: skewX(-20deg);
  animation: bbpbShine 4.5s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

.ast-sticky-add-to-cart #btn-1cc-pdp:hover {
  background: #000000 !important;
  border-color: rgba(255,255,255,.5) !important;
}


/* ---- Two-button split (variable products) ----
   For a variable product Astra can only offer a "Select
   options" link here (it doesn't know which variation is
   picked) -- assets/js/premium-buttons.js replaces that link
   with these two real buttons, each one proxy-clicking the
   real Add to Cart / Buy Now button elsewhere on the page so
   the real WooCommerce and Razorpay click handlers run
   unmodified. This is what makes the sticky bar a full-width
   50/50 split instead of one button. ---- */

.bbpb-sticky-actions {
  display: flex;
  flex: 1 1 auto;
  gap: 10px;
}

.bbpb-sticky-btn {
  position: relative;
  overflow: hidden !important;
  isolation: isolate;

  /* 0 0 auto, not 1 1 50%: with a flex-basis of 50% the buttons
     stretch to fill the row and the horizontal padding below has
     no visible effect. Sizing to content lets the padding define
     the width, which is what makes them read as bigger. The
     mobile block still forces 1 1 50% for the full-bleed bar. */
  flex: 0 0 auto;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 0 !important;
  border-radius: var(--bbpb-radius) !important;

  font-family: "Inter", sans-serif !important;
  font-weight: 900 !important;
  font-size: 15px !important;
  letter-spacing: .01em;
  white-space: nowrap;

  min-height: 50px;
  /* Wider horizontal padding so the two actions read as
     substantial buttons rather than small chips in a wide bar.
     flex-basis stays auto below so they size to their padded
     content instead of stretching to fill the row. */
  padding: 13px 34px !important;
  opacity: 1 !important;

  cursor: pointer;
  transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}

/* Sized by ID because two other rules outrank the .bbpb-sticky-btn
   class here: this file's own
   ".ast-sticky-add-to-cart .single_add_to_cart_button" padding, and
   Astra's
   ".woocommerce div.ast-sticky-add-to-cart-action-wrap .button.single_add_to_cart_button
    { width: 100% }".
   The proxy Add to Cart carries the single_add_to_cart_button class
   (it has to, so WooCommerce styling and scripts treat it as the
   real thing), so it was inheriting width:100% while Buy Now sized
   to its content -- 278px against 137px, visibly lopsided. An ID
   selector settles both and lets the padding define the width. */
.ast-sticky-add-to-cart .bbpb-sticky-actions #bbpb-sticky-add.bbpb-sticky-btn,
.ast-sticky-add-to-cart .bbpb-sticky-actions #bbpb-sticky-buy.bbpb-sticky-btn {
  flex: 0 0 auto !important;
  width: auto !important;
  min-height: 50px !important;
  padding: 13px 34px !important;
  font-size: 15px !important;
}

.bbpb-sticky-btn-add {
  background: var(--bbpb-red) !important;
  color: #FFFFFF !important;
  box-shadow: 0 6px 16px rgba(226,28,33,.28);
}

.bbpb-sticky-btn-add:hover {
  background: var(--bbpb-red-dark) !important;
}

/* Buy Now here mirrors the main-page Buy Now redesign -- solid
   black fill, the one button in the pair that shines. */

.bbpb-sticky-btn-buy {
  background: var(--bbpb-black-soft) !important;
  color: #FFFFFF !important;
  border: 1.5px solid rgba(255,255,255,.35) !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.28);
}

.bbpb-sticky-btn-buy:hover {
  background: #000000 !important;
  border-color: rgba(255,255,255,.5) !important;
}

.bbpb-sticky-btn-buy:not(.disabled)::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(
    110deg,
    transparent 0%,
    rgba(255,255,255,.5) 50%,
    transparent 100%
  );
  transform: skewX(-20deg);
  animation: bbpbShine 4.5s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

.bbpb-sticky-btn.disabled {
  background: rgba(255,255,255,.12) !important;
  color: rgba(255,255,255,.5) !important;
  border-color: transparent !important;
  box-shadow: none !important;
  cursor: not-allowed;
}

.bbpb-sticky-btn.disabled::after {
  display: none;
}

/* Settings > Digiskyward > "Always show sticky buttons in
   full colour" -- when on, the sticky bar's two buttons never
   drop into the muted .disabled look, even before a variation
   is picked. The proxy-click JS logic is unaffected: clicking
   either button while no variation is selected still just
   scrolls up to the variation form, same as always -- this
   only changes how the buttons look, not what they do. */

/* IDs here, not classes -- the Add button also carries WooCommerce's
   own .single_add_to_cart_button class, and buttons.css's disabled
   rule for that class selects via :not(#btn-1cc-pdp), which counts
   an ID's worth of specificity even though it's a negation. A
   class-only override here would lose to it; matching by the sticky
   buttons' own #bbpb-sticky-add / #bbpb-sticky-buy ids wins outright. */

body.bbpb-sticky-full-color #bbpb-sticky-add.disabled {
  background: var(--bbpb-red) !important;
  color: #FFFFFF !important;
  border-color: transparent !important;
  box-shadow: 0 6px 16px rgba(226,28,33,.28) !important;
  cursor: pointer;
}

body.bbpb-sticky-full-color #bbpb-sticky-buy.disabled {
  background: var(--bbpb-black-soft) !important;
  color: #FFFFFF !important;
  border: 1.5px solid rgba(255,255,255,.35) !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.28) !important;
  cursor: pointer;
}

body.bbpb-sticky-full-color #bbpb-sticky-buy.disabled::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(
    110deg,
    transparent 0%,
    rgba(255,255,255,.5) 50%,
    transparent 100%
  );
  transform: skewX(-20deg);
  animation: bbpbShine 4.5s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
  display: block;
}


/* ---- "Select options" link
   The sticky bar shows a plain link back up to the variation
   form for variable products before JS upgrades it, or as a
   no-JS fallback -- a completely different element
   (.single_link_to_cart_button) that never inherited any of
   the button styling. ---- */

.single_link_to_cart_button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  border: 0 !important;
  border-radius: var(--bbpb-radius) !important;
  background: var(--bbpb-red) !important;
  color: #FFFFFF !important;

  font-family: "Inter", sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: .01em;
  text-decoration: none !important;
  white-space: nowrap;

  min-height: 48px;
  padding: 12px 26px !important;

  box-shadow: 0 8px 22px rgba(226,28,33,.28);
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}

.single_link_to_cart_button:hover {
  background: var(--bbpb-red-dark) !important;
  color: #FFFFFF !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(226,28,33,.34);
}

.ast-sticky-add-to-cart .single_add_to_cart_button:not(#btn-1cc-pdp),
.ast-sticky-add-to-cart #btn-1cc-pdp {
  white-space: nowrap;
}

/* ---- Astra's "scroll to top" button vs. this bar ----
   #ast-scroll-top is fixed at bottom:30px/right:30px sitewide,
   which is fine normally, but once this sticky bar is also
   fixed at the bottom of the same corner the two stack on top
   of each other -- the scroll-to-top circle ends up sitting
   inside the black bar, crowding the Buy Now button. Lift it
   clear of the bar (with a bit of breathing room above it)
   only while the bar is actually showing. */
body:has(.ast-sticky-add-to-cart.is-active) #ast-scroll-top {
  bottom: 105px !important;
}

@media (max-width: 600px) {
  /* The mobile bar is a full-bleed two-button strip with no
     spare room for a floating circle without it sitting on top
     of the Buy Now label -- hide it here instead of relocating
     it. Scroll-to-top is a low-priority convenience next to an
     always-visible purchase action, and mobile browsers already
     offer their own quick "scroll to top" gestures. */
  body:has(.ast-sticky-add-to-cart.is-active) #ast-scroll-top {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ast-sticky-add-to-cart #btn-1cc-pdp:not(.disabled)::after,
  .bbpb-sticky-btn-buy:not(.disabled)::after,
  body.bbpb-sticky-full-color #bbpb-sticky-buy.disabled::after {
    animation: none;
    display: none;
  }
}

@media (max-width: 600px) {

  /* No dark strip on mobile -- just two big, flush, edge-to-edge
     buttons sitting directly at the bottom of the screen (title,
     price and thumbnail are hidden below; see the reference brief:
     a plain two-button footer, not a bar with buttons floating
     inside it). Defensive !important + forced position/z-index for
     the same reason as before: some production caching/plugin
     setups can reorder stylesheets at this breakpoint. */
  /* The full-bleed desktop padding above is specific to the wide
     dark strip layout -- mobile has its own flush, no-padding
     design below and must not inherit it. */
  .ast-sticky-add-to-cart .ast-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .ast-sticky-add-to-cart {
    display: block !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 999999 !important;
    background: transparent !important;
    border-top: 0 !important;
    box-shadow: none !important;
  }

  .ast-sticky-add-to-cart .ast-sticky-add-to-cart-content {
    padding: 0 !important;
    min-height: auto !important;
    flex-wrap: nowrap !important;
  }

  /* Product thumbnail, title and price only exist to identify the
     item on the wide desktop bar -- on mobile the two CTAs are the
     whole point, so this info is dropped rather than squeezed in. */
  .ast-sticky-add-to-cart .ast-sticky-add-to-cart-title-wrap {
    display: none !important;
  }

  .ast-sticky-add-to-cart-action-wrap {
    flex: 1 1 100%;
    padding: 0 !important;
    width: 100%;
  }

  .ast-sticky-add-to-cart-action-wrap .ast-sticky-add-to-cart-action-price {
    display: none !important;
  }

  .ast-sticky-add-to-cart-action-wrap .quantity {
    display: none !important;
  }

  .ast-sticky-add-to-cart-action-wrap .cart,
  .bbpb-sticky-actions {
    display: flex !important;
    width: 100%;
    gap: 0;
  }

  /* Flush, square, full-bleed -- no rounded corners, no gap, no
     shadow between the two: they read as one continuous bar split
     into two colours, same as the reference. Safe-area inset is
     folded into each button's own bottom padding so the colour
     runs all the way to the true edge on notched phones instead of
     leaving a blank gap below. */
  /* Specificity must MATCH the desktop rule above, (1,3,0), or
     that rule keeps winning inside this media query -- media
     queries add no specificity of their own. Matching it and
     sitting later in the file is what makes mobile win. */
  .bbpb-sticky-btn,
  .ast-sticky-add-to-cart .bbpb-sticky-actions #bbpb-sticky-add.bbpb-sticky-btn,
  .ast-sticky-add-to-cart .bbpb-sticky-actions #bbpb-sticky-buy.bbpb-sticky-btn,
  .ast-sticky-add-to-cart .single_add_to_cart_button:not(#btn-1cc-pdp),
  .ast-sticky-add-to-cart #btn-1cc-pdp {
    flex: 1 1 50% !important;
    width: 50% !important;
    min-height: 60px !important;
    border-radius: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    font-size: 15px !important;
    padding: 14px 10px !important;
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0)) !important;
  }

  .single_link_to_cart_button {
    width: 100%;
    min-height: 60px;
    border-radius: 0 !important;
    font-size: 15px !important;
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0)) !important;
  }
}