/* =====================================================================
   product.css -- Broadtime Tuneportals product page
   (item.html + includes/item_product_region.html, shared by UltraModern
   and Responsive 2)

   Extracted from the inline <style> in item.html. NO Template Toolkit in
   this file: store colours arrive as custom properties set inline by
   item.html on .bt-product-page:
     --pri        store highlight colour (main_highlight_color)
     --pri-hover  same, reserved for a future hover shade
     --pri-text   text colour on --pri (main_highlight_color_txt)
   Keep this file pure ASCII. Bump ?v= in item.html on every change.
   ===================================================================== */

/* -- Static design tokens. Store colours (--pri, --pri-hover, --pri-text)
      are set inline by item.html on .bt-product-page. -- */
.bt-product-page {
  --pri-light: #e5e5e5;
  --ink:       #111111; /* text on the white cards; headings on the page itself use currentColor */
  --text:      #1a1a1a;
  --text-sec:  #3d3d3d;
  --muted:     #5a5a5a;
  /* Secondary text sitting on the page itself, not on a card: derived from
     the page's own text colour so light and dark stores both read.
     currentColor resolves where the var is used; without color-mix the
     declaration is invalid and the colour falls back to inherit. */
  --on-page-sec:   color-mix(in srgb, currentColor 80%, transparent);
  --on-page-muted: color-mix(in srgb, currentColor 70%, transparent);
  /* Links sitting on the page use the highlight colour, which stores pick as a
     button background. When that is unreadable on the page (black highlight
     on a black store), the script in item.html adds .bt-pri-low-contrast and
     the links take the page's own text colour instead. */
  --pri-on-page:   var(--pri);
  --border:    #e5e5e5;
  --border-lt: #e5e5e5;
  --success:   #15803d;
  --warn-bg:   #fffbeb;
  --warn-border:#e8d9a0;
  --warn-text: #7a5f00;
  --radius:    8px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 4px rgba(0,0,0,.07);
  --shadow-md: 0 4px 16px rgba(0,0,0,.09);
}

.bt-product-page * { box-sizing: border-box; }
.bt-product-page.bt-pri-low-contrast { --pri-on-page: currentColor; }

/* -- Breadcrumb -- */
.bt-breadcrumb {
  font-size: 12px; color: var(--on-page-muted); font-weight: 500;
  margin-bottom: 14px; padding-top: 18px; word-break: break-word;
}
.bt-breadcrumb a { color: inherit; text-decoration: none; }
.bt-breadcrumb a:hover { color: var(--pri-on-page); text-decoration: underline; }
.bt-breadcrumb .sep { margin: 0 5px; opacity: .35; }

/* -- Store notice -- */
.bt-store-notice {
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  border-radius: var(--radius);
  padding: 10px 16px;
  font-size: 13px;
  color: var(--warn-text);
  font-weight: 600;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}

/* -- Layout -- CSS Grid replacing Bootstrap columns -- */
.bt-product-page .container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }

.bt-product-grid {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 48px;
  align-items: start;
}

.bt-col-left {
  position: sticky;
  top: 80px;
}

.bt-col-right { min-width: 0; }

@media (max-width: 991px) {
  .bt-product-grid { grid-template-columns: 1fr; gap: 24px; }
  .bt-col-left { position: static; }
}

@media (max-width: 600px) {
  .bt-product-page .container { padding: 0 14px; }
  .bt-product-grid { gap: 16px; }
}

/* -- LEFT COLUMN -- */
.bt-art-card {
  position: relative;
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 20px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  margin-bottom: 20px;
  overflow: hidden;
}
.bt-art-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--pri);
}
.bt-art-card img,
.bt-art-card .coverimage {
  width: 100%; aspect-ratio: 1 / 1; object-fit: contain;
  display: block; border-radius: 6px;
  transition: transform .5s cubic-bezier(.22,1,.36,1);
}
.bt-art-card:hover img,
.bt-art-card:hover .coverimage { transform: scale(1.02); }

.bt-ribbon {
  position: absolute; top: 34px; left: -4px; z-index: 5;
}
.bt-ribbon-tag {
  background: var(--pri);
  color: var(--pri-text);
  font-size: 11px; font-weight: 800; padding: 7px 18px 7px 14px;
  letter-spacing: .05em; text-transform: uppercase;
  box-shadow: 0 2px 10px rgba(0,0,0,.2);
  position: relative; display: block;
}
.bt-ribbon-tag::after {
  content: '';
  position: absolute; right: -9px; top: 0; bottom: 0;
  border-top: 16px solid transparent;
  border-bottom: 16px solid transparent;
  border-left: 9px solid var(--pri);
}

.bt-gallery-thumbs { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.bt-gallery-thumb {
  width: 56px; height: 56px; border-radius: 6px; overflow: hidden;
  border: 2px solid transparent; cursor: pointer; flex-shrink: 0;
  padding: 0; background: none; -webkit-appearance: none; appearance: none;
}
.bt-gallery-thumb:focus-visible { outline: 2px solid var(--pri); outline-offset: 2px; }
.bt-gallery-thumb.active,
.bt-gallery-thumb:hover,
.bt-gallery-thumb:focus-visible { border-color: var(--pri); }
.bt-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.bt-details-card {
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 20px;
}
.bt-dc-hdr {
  padding: 10px 16px; font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .08em; color: var(--text-sec);
  background: #f5f4f1; border-bottom: 1px solid var(--border);
}
.bt-dc-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 9px 16px; border-bottom: 1px solid var(--border-lt); font-size: 13px;
}
.bt-dc-row:last-child { border-bottom: none; }
.bt-dc-label { color: var(--text-sec); font-weight: 600; }
.bt-dc-val { font-weight: 700; color: var(--ink); text-align: right; word-break: break-word; }

.bt-trust-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 28px; }
.bt-trust-item {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 6px; padding: 18px 14px; background: #fff;
  border: 1px solid var(--border-lt); border-radius: var(--radius);
}
.bt-trust-item svg { color: var(--pri); }
.bt-trust-item strong { display: block; color: var(--ink); font-weight: 700; font-size: 13px; }
.bt-trust-item span { font-size: 12px; color: var(--muted); font-weight: 500; line-height: 1.3; }


.bt-promo-slot {
  border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 14px;
  border: 1px solid var(--border); display: block;
  transition: transform .2s, box-shadow .2s;
}
.bt-promo-slot:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.bt-promo-slot img { width: 100%; display: block; }

.playart_info {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 14px; margin-bottom: 14px;
}
.playart_info img { display: block; max-width: 180px; width: 100%; height: auto; margin-bottom: 12px; }
.playart_info .btn { border-radius: var(--radius); font-weight: 700; background: #f1f1f1; border: 1px solid var(--border); color: #000; }
.playart_info .btn:hover { background: #333; color: #fff; }

/* -- RIGHT COLUMN -- */
.bt-artist-link { font-size: 15px; font-weight: 600; color: var(--on-page-sec); margin-bottom: 4px; }
.bt-artist-link a {
  color: var(--pri-on-page); text-decoration: none;
  border-bottom: 1.5px solid color-mix(in srgb, currentColor 30%, transparent); transition: border-color .2s;
}
.bt-artist-link a:hover { border-color: currentColor; }

.bt-product-title {
  font-size: 36px; line-height: 1.1; letter-spacing: -.02em;
  margin-bottom: 14px; font-weight: 700; word-break: break-word;
}

.bt-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 18px; }
.bt-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px; background: #fff; border: 1px solid var(--border);
  border-radius: 100px; font-size: 11px; font-weight: 700; color: var(--text-sec);
}
.bt-chip-hl {
  background: var(--pri);
  border-color: var(--pri);
  color: var(--pri-text);
  font-size: 12px; padding: 6px 14px; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}

.bt-avail { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.bt-avail-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--success); flex-shrink: 0;
}
.bt-avail-dot.preorder { background: var(--pri); }
.bt-avail-dot.unavail  { background: #aaa; }
.bt-avail-text { font-size: 14px; font-weight: 700; color: var(--success); }
.bt-avail-text.preorder { color: var(--pri); }
.bt-avail-text.unavail  { color: #aaa; }

/* -- Inventory banner (graphic version of .bt-avail) --
   Renders in includes/item_product_region.html, not here -- this file only
   ships the styles. See that file for the IF/ELSIF markup. */
.bt-inv-banner {
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  margin-bottom: 16px;
  text-align: center;
}

.bt-inv-banner-head {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  margin-bottom: 6px;
}
.bt-inv-banner-head svg { flex-shrink: 0; margin-top: 1px; }
.bt-inv-banner-title {
  font-size: 17px;
  font-weight: 800;
}

.bt-inv-banner-sub {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  margin: 0;
}
.bt-inv-banner-sub svg { flex-shrink: 0; }

/* All states share the same green treatment now -- per-state color/icon
   distinction (amber warehouse, gray preorder/used/unavail) dropped in favor
   of one consistent look across all four. The --preorder / --used /
   --unavail / --warehouse classes stay in the markup for structure/
   semantics, but no longer carry their own colors -- they inherit these. */
.bt-inv-banner--instock,
.bt-inv-banner--preorder,
.bt-inv-banner--used,
.bt-inv-banner--unavail,
.bt-inv-banner--warehouse {
  background: #ecfdf5;
  border: 1px solid #bbead2;
}
.bt-inv-banner--instock .bt-inv-banner-title,
.bt-inv-banner--instock .bt-inv-banner-head svg,
.bt-inv-banner--preorder .bt-inv-banner-title,
.bt-inv-banner--preorder .bt-inv-banner-head svg,
.bt-inv-banner--used .bt-inv-banner-title,
.bt-inv-banner--used .bt-inv-banner-head svg,
.bt-inv-banner--unavail .bt-inv-banner-title,
.bt-inv-banner--unavail .bt-inv-banner-head svg,
.bt-inv-banner--warehouse .bt-inv-banner-title,
.bt-inv-banner--warehouse .bt-inv-banner-head svg { color: var(--success); }
.bt-inv-banner--instock .bt-inv-banner-sub,
.bt-inv-banner--preorder .bt-inv-banner-sub,
.bt-inv-banner--used .bt-inv-banner-sub,
.bt-inv-banner--unavail .bt-inv-banner-sub,
.bt-inv-banner--warehouse .bt-inv-banner-sub { color: #3d6e57; }

/* Not used by any v1 state (see inventory-availability-copy-deck.md: the
   richer "Want it shipped? / Want to pick it up?" layout is an opt-in for
   later, not v1). Kept here so it's ready to wire back in when that ships. */
.bt-inv-banner-detail {
  border-top: 1px solid var(--warn-border);
  margin-top: 14px;
  padding-top: 12px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--warn-text);
}
.bt-inv-banner-detail p { margin: 0 0 8px; }
.bt-inv-banner-detail p:last-child { margin-bottom: 0; }
.bt-inv-banner-detail strong { font-weight: 800; }

@media (max-width: 600px) {
  .bt-inv-banner { padding: 14px 16px; }
  .bt-inv-banner-title { font-size: 15px; }
}

/* -- PART 3: Format selector with itemscope microdata -- */
.bt-fmt-section { margin-bottom: 22px; }
.bt-fmt-label {
  font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .08em; color: var(--on-page-sec); margin-bottom: 8px;
}
.bt-fmt-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.bt-fmt {
  padding: 10px 16px; border: 2px solid var(--border); border-radius: var(--radius);
  text-align: center; cursor: pointer; transition: all .15s; background: #fff;
  text-decoration: none !important; color: var(--text); display: block; min-width: 120px;
}
.bt-fmt:hover { border-color: var(--ink); }
.bt-fmt.active {
  border-color: var(--pri);
  background: var(--pri-light, #e5e5e5);
  box-shadow: 0 0 0 1px var(--pri);
}
.bt-fmt-type {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; color: var(--muted); margin-bottom: 2px;
}
.bt-fmt.active .bt-fmt-type { color: var(--pri); }
/* The viewed variant is always shown as active, even when it cannot be bought;
   muted so it reads as "this is what you are looking at, and it is unavailable". */
.bt-fmt.bt-fmt-unavailable { background: #f5f4f1; cursor: default; }
.bt-fmt.bt-fmt-unavailable .bt-fmt-price { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.bt-fmt-price { font-size: 16px; font-weight: 800; color: var(--ink); }

/* Preorder announced before the label set a price. Distinct from
   .bt-fmt-unavailable: the record is coming, it just cannot be sold yet. */
.bt-fmt.bt-fmt-tba { cursor: default; }
.bt-fmt.bt-fmt-tba .bt-fmt-price {
  font-size: 12px; font-weight: 700; color: #8BCE5F;
  text-transform: uppercase; letter-spacing: .04em;
}
/* Long copy: override the 16px/800 button type so it stays on one or two lines
   inside the card instead of overflowing. */
a.bt-btn-cart.bt-btn-tba, span.bt-btn-cart.bt-btn-tba,
a.bt-mob-btn.bt-btn-tba, span.bt-mob-btn.bt-btn-tba {
  font-size: 13px; font-weight: 700; letter-spacing: .01em;
  text-align: center; line-height: 1.35; cursor: default;
}
.bt-mob-tba {
  font-size: 13px; font-weight: 800; color: #8BCE5F;
  text-transform: uppercase; letter-spacing: .04em;
}

.bt-buy-card {
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 24px; margin-bottom: 24px;
  box-shadow: var(--shadow-sm); position: relative; overflow: hidden;
}
.bt-buy-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--pri), color-mix(in srgb, var(--pri) 30%, transparent));
}
.bt-buy-price {
  font-size: 38px; font-weight: 800; color: var(--ink);
  letter-spacing: -.02em; line-height: 1; margin-bottom: 2px;
}
.bt-buy-price s { font-size: 22px; color: #999; margin-right: 8px; font-weight: 400; }
.bt-buy-edition { font-size: 14px; color: var(--text-sec); font-weight: 600; margin-bottom: 2px; }
.bt-buy-sub { font-size: 12px; color: var(--muted); margin-bottom: 18px; font-weight: 500; }
.bt-sale-badge {
  display: inline-block; margin-left: 8px; padding: 4px 10px; border-radius: 100px;
  background: var(--pri);
  color: var(--pri-text);
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; vertical-align: middle;
}

a.bt-btn-cart, button.bt-btn-cart {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 16px 32px;
  background: var(--pri);
  color: #ffffff !important;
  border: none; border-radius: var(--radius);
  font-size: 16px; font-weight: 800; cursor: pointer; transition: all .2s;
  letter-spacing: .02em; box-shadow: 0 4px 16px rgba(0,0,0,.2);
  text-decoration: none !important;
}
a.bt-btn-cart svg, button.bt-btn-cart svg { stroke: #ffffff !important; }
a.bt-btn-cart:hover, button.bt-btn-cart:hover {
  background: var(--pri);
  transform: translateY(-1px); box-shadow: 0 6px 24px rgba(0,0,0,.25); opacity: .92;
  color: #ffffff !important;
}
a.bt-btn-cart:active, button.bt-btn-cart:active { transform: translateY(0); }
a.bt-btn-cart.disabled, button.bt-btn-cart.disabled, span.bt-btn-cart.disabled {
  background: #e0e0e0 !important; color: #999 !important;
  box-shadow: none; transform: none; cursor: default;
}

/* -- Real <button>s for buy / wishlist (formerly javascript:void anchors) --
   Buttons don't inherit type from the page the way the old <a>s did, so
   hand them the page's font back. Cart and mobile buttons set their own
   letter-spacing; the others inherit it like the anchors did. */
button.bt-btn-cart, button.bt-mob-btn, button.bt-btn-ghost {
  font-family: inherit; line-height: inherit; text-transform: inherit;
  margin: 0; -webkit-appearance: none; appearance: none;
}
button.bt-mob-btn, button.bt-btn-ghost { letter-spacing: inherit; }
/* Visible keyboard focus. All three sit on white surfaces (buy card,
   mobile bar), so an --ink ring with a gap reads on every store colour,
   including the store's own highlight. */
.bt-btn-cart:focus-visible, .bt-mob-btn:focus-visible, .bt-btn-ghost:focus-visible {
  outline: 2px solid var(--ink); outline-offset: 2px;
}
.playart_info a.btn { text-decoration: none; }

.bt-btn-pair { display: flex; gap: 8px; margin-top: 10px; }
.bt-btn-ghost {
  flex: 1; padding: 10px; background: transparent;
  border: 1.5px solid var(--border); border-radius: var(--radius);
  font-size: 12px; font-weight: 700; cursor: pointer; transition: all .15s;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  color: var(--text-sec); text-decoration: none !important;
}
.bt-btn-ghost:hover { border-color: var(--ink); color: var(--ink); }

.bt-section { margin-bottom: 28px; }
.bt-section-heading {
  font-size: 22px; font-weight: 700; color: inherit;
  margin-bottom: 12px; padding-bottom: 10px;
  border-bottom: 2.5px solid currentColor; word-break: break-word;
}

.bt-copy { font-size: 15px; line-height: 1.8; color: inherit; }
.bt-copy p { margin-bottom: 14px; }
.bt-copy p:last-child { margin-bottom: 0; }
.bt-copy a { color: var(--pri-on-page); }

.bt-desc-callout {
  background: var(--pri-light, #e5e5e5);
  border-left: 4px solid var(--pri);
  padding: 14px 18px; border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 14px; color: var(--ink); font-weight: 700; margin: 18px 0; line-height: 1.6;
}

.bt-tl-meta {
  font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .08em; color: var(--on-page-sec); margin-bottom: 10px;
}
.bt-tracklist {
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
}
.bt-track-row {
  display: flex; align-items: center; padding: 10px 16px; gap: 14px;
  border-bottom: 1px solid var(--border-lt); font-size: 14px;
}
.bt-track-row:last-child { border-bottom: none; }
.bt-track-num { width: 26px; font-size: 13px; font-weight: 700; color: var(--muted); text-align: right; flex-shrink: 0; }
.bt-track-name { font-weight: 600; color: var(--text); flex: 1; }

.bt-review { padding: 14px 0; border-bottom: 1px solid var(--border-lt); }
.bt-review:first-child { padding-top: 0; }
.bt-review:last-child { border-bottom: none; padding-bottom: 0; }
.bt-review-author { display: inline-block; margin-top: 6px; color: var(--on-page-muted); font-style: italic; font-size: 13px; }

.bt-promo-item { padding: 14px 0; border-bottom: 1px solid var(--border-lt); }
.bt-promo-item:first-child { padding-top: 0; }
.bt-promo-item:last-child { border-bottom: none; padding-bottom: 0; }
.bt-promo-thumb { display: inline-block; margin-bottom: 10px; }
.bt-promo-thumb img { border-radius: 8px; max-width: 100%; height: auto; }
.bt-promo-title { font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.bt-promo-title a { color: var(--pri); text-decoration: none; }
.bt-downloads { margin-top: 10px; }
.bt-downloads strong { display: block; margin-bottom: 4px; font-size: 13px; }
.bt-downloads a { display: inline-block; margin-right: 10px; margin-bottom: 4px; font-weight: 700; font-size: 13px; }

.bt-video-frame {
  aspect-ratio: 16 / 9; width: 100%;
  border-radius: var(--radius-lg); overflow: hidden; background: #000;
}
.bt-video-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* -- MOBILE STICKY BUYBAR -- */
.bt-mobile-buybar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 99999;
  background: #fff; border-top: 2px solid #d8d4ce;
  box-shadow: 0 -4px 24px rgba(0,0,0,.15);
  padding: 12px 16px 16px;
}
@media (max-width: 767px) {
  .bt-mobile-buybar { display: block !important; }
  body { padding-bottom: 185px !important; }
}
.bt-mob-top {
  display: flex; align-items: center; gap: 12px; margin-bottom: 10px;
}
.bt-mob-art {
  width: 56px; height: 56px; border-radius: 6px; overflow: hidden;
  border: 1px solid var(--border-lt); flex-shrink: 0;
}
.bt-mob-art img,
.bt-mob-art .coverimage {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.bt-mob-info { flex: 1; min-width: 0; }
.bt-mob-artist { font-size: 11px; font-weight: 600; color: var(--muted); line-height: 1.2; }
.bt-mob-title {
  font-size: 15px; font-weight: 800; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3;
}
.bt-mob-variant {
  font-size: 11px; font-weight: 700;
  color: var(--pri);
  text-transform: uppercase; letter-spacing: .03em;
}
.bt-mob-price {
  font-size: 22px; font-weight: 800; color: var(--ink);
  flex-shrink: 0; white-space: nowrap; text-align: right;
}
a.bt-mob-btn, button.bt-mob-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 14px 24px;
  background: var(--pri);
  color: #ffffff !important;
  border: none; border-radius: var(--radius);
  font-size: 15px; font-weight: 800; cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,.2);
  text-decoration: none !important; transition: opacity .15s;
}
a.bt-mob-btn svg, button.bt-mob-btn svg { stroke: #ffffff !important; }
a.bt-mob-btn:hover, button.bt-mob-btn:hover,
a.bt-mob-btn:focus, button.bt-mob-btn:focus { opacity: .92; color: #ffffff !important; text-decoration: none !important; }
a.bt-mob-btn.disabled, button.bt-mob-btn.disabled, span.bt-mob-btn { background: #e0e0e0 !important; color: #999 !important; box-shadow: none; pointer-events: none; }

#bt-item-region { transition: opacity .15s ease; }
#bt-item-region.htmx-request { opacity: .45; pointer-events: none; }

/* -- RESPONSIVE -- */
@media (max-width: 767px) {
  #back-to-top { display: none!important; }
  .bt-mobile-buybar { display: block; }
  body { padding-bottom: 170px; }
  .bt-product-title { font-size: 26px; }
  .bt-buy-price { font-size: 30px; }
}
@media (min-width: 768px) {
  .bt-product-title { font-size: 42px; }
  .bt-buy-price { font-size: 42px; }
}
@media (min-width: 992px) {
  .bt-product-title { font-size: 36px; }
}