/*
 * bassaudio-overrides.css
 *
 * Fallback CSS for when BB-builder / UABB / Slick JS is intentionally absent
 * (auto-dropped by scripts/html-to-jsx.mjs to avoid React hydration conflicts).
 * These rules ensure JS-gated UI is visible as static layout.
 *
 * Loaded LAST in each generated route's <head> so it wins the cascade.
 */

/* 1. Defeat fl-animation opacity:0 when JS won't add fl-animated class.
 *    Per-node inline <style> blocks (.fl-node-XXX.fl-animation:not(.fl-animated))
 *    have specificity (0,0,3,0) but load after this file. Our selector reaches
 *    (0,0,4,1), so it wins on specificity regardless of source order. */
body.fl-no-js .fl-animation,
body.fl-no-js [class*='fl-node-'].fl-animation:not(.fl-animated) {
  opacity: 1;
}

/* 2. Carousels collapse to flex grid when Slick didn't initialize.
 *    Floated children orphan parent (height: 0) without Slick's .slick-track wrapper.
 *    Base rules from 11-layout.css are (0,0,1,0); our selectors are (0,0,2,0). */
.uabb-blog-posts-carousel:not(.slick-initialized),
.uabb-image-carousel:not(.slick-initialized) {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: flex-start;
}

.uabb-blog-posts-carousel:not(.slick-initialized) > .uabb-blog-posts-col-4 {
  float: none;
}

.uabb-image-carousel:not(.slick-initialized) > * {
  float: none;
}

/* 3. UABB image-carousel items default to display:none (Slick reveals them).
 *    Force-show them when Slick didn't init.
 *    Original (0,0,1,0) is beaten by our (0,0,3,0) selector. */
.uabb-image-carousel:not(.slick-initialized) .uabb-image-carousel-item {
  display: inline-block;
  float: none;
}

/* 4. fl-content-slider: BB-builder's own slider widget.
 *    Without JS, the wrapper has opacity:0, non-first slides are visibility:hidden,
 *    and slides are absolutely positioned on top of each other. Strategy: stack all
 *    slides vertically by overriding the absolute positioning and revealing them.
 *
 *    Per-node rules (.fl-node-XXX .fl-content-slider-wrapper { opacity: 0 }) in
 *    11-layout.css have specificity (0,0,2,0); our (0,0,3,0) selector beats them. */
.fl-content-slider:not(.fl-content-slider-loaded) .fl-content-slider-wrapper {
  opacity: 1;
}
.fl-content-slider:not(.fl-content-slider-loaded) .fl-slide {
  position: relative;
  visibility: visible;
  top: auto;
}
/* Hide nav arrows — they require JS to navigate */
.fl-content-slider:not(.fl-content-slider-loaded)
  .fl-content-slider-navigation {
  display: none;
}

/* Homepage hero carousel: React/Embla owns this one, so it must not use the
 * no-JS vertical-stack fallback above. */
.bass-hero-carousel,
.bass-hero-carousel .fl-content-slider-wrapper,
.bass-hero-carousel .fl-slide {
  min-height: 720px;
}

.bass-hero-carousel .fl-content-slider-wrapper {
  opacity: 1;
  overflow: hidden;
}

.bass-hero-carousel__container {
  display: flex;
  height: 720px;
  touch-action: pan-y pinch-zoom;
}

.bass-hero-carousel__slide {
  flex: 0 0 100%;
  min-width: 0;
  position: relative;
  visibility: visible;
}

.bass-hero-carousel .fl-slide-bg-photo {
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  bottom: 0;
  display: block;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}

.bass-hero-carousel__picture,
.bass-hero-carousel__image {
  display: block;
  height: 100%;
  width: 100%;
}

.bass-hero-carousel__image {
  object-fit: cover;
  object-position: 50% 50%;
}

.bass-hero-carousel .fl-slide-mobile-photo {
  display: none;
}

.bass-hero-carousel .fl-slide-foreground {
  position: relative;
  z-index: 2;
}

.bass-hero-carousel .fl-content-slider-navigation {
  display: block;
}

@media only screen and (max-width: 768px) {
  .bass-hero-carousel,
  .bass-hero-carousel .fl-content-slider-wrapper,
  .bass-hero-carousel .fl-slide,
  .bass-hero-carousel__container {
    height: 450px;
    min-height: 450px;
  }
}

/* Homepage horizontal carousels restored with Embla. */
.bass-new-arrivals-carousel,
.bass-latest-blog-carousel,
.bass-distributor-carousel {
  display: block !important;
  overflow: hidden;
  position: relative;
}

.bass-carousel-frame {
  align-items: center;
  column-gap: 12px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 38px;
}

.bass-carousel-frame > .bass-new-arrivals-carousel,
.bass-carousel-frame > .bass-latest-blog-carousel,
.bass-carousel-frame > .bass-distributor-carousel {
  min-width: 0;
}

.bass-new-arrivals-carousel {
  height: 519px;
}

.bass-new-arrivals-carousel__container,
.bass-distributor-carousel__container,
.bass-latest-blog-carousel .fl-post-slider-wrapper {
  display: flex;
  touch-action: pan-y pinch-zoom;
  width: 100%;
}

.bass-new-arrivals-carousel
  > .bass-new-arrivals-carousel__container
  > .uabb-blog-posts-col-4 {
  flex: 0 0 25%;
  float: none;
  min-width: 0;
  width: auto;
}

.bass-latest-blog-carousel .fl-post-slider-wrapper {
  margin: 0;
  padding: 0;
}

.bass-latest-blog-carousel .fl-post-slider-post {
  flex: 0 0 100%;
  min-width: 0;
  position: relative !important;
  transform: none !important;
  visibility: visible !important;
}

/* Blog slider thumbnails: restore BB Builder's `fl-photo-crop-landscape` intent —
 * one shared 4:3 image box (Crinear Daybreak's shape) for every slide, regardless of
 * the source image's aspect ratio. Square thumbnails are center-cropped (cover) rather
 * than rendering taller than the landscape ones, so the image band stays uniform. */
.bass-latest-blog-carousel .fl-post-slider-img .fl-photo-content {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.bass-latest-blog-carousel .fl-post-slider-img .fl-photo-content > a {
  display: block;
  height: 100%;
}
.bass-latest-blog-carousel .fl-post-slider-img .fl-photo-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bass-distributor-carousel .slick-list {
  width: 100%;
}

.bass-distributor-carousel__container {
  align-items: center;
  display: flex !important;
  touch-action: pan-y pinch-zoom;
  width: 100%;
}

.bass-distributor-carousel__container > .uabb-image-carousel-item {
  display: block !important;
  flex: 0 0 20% !important;
  float: none !important;
  min-width: 0;
  width: 20% !important;
}

.bass-carousel-arrow {
  align-items: center;
  background: rgba(239, 239, 239, 0.96);
  border: 0;
  border-radius: 999px;
  box-sizing: border-box !important;
  color: #171717;
  cursor: pointer;
  display: flex;
  font-size: 0;
  height: 38px !important;
  justify-content: center;
  line-height: 0;
  opacity: 1 !important;
  padding: 9px !important;
  position: static;
  transition:
    background-color 160ms ease,
    opacity 160ms ease;
  width: 38px !important;
  z-index: 3;
}

.bass-carousel-arrow::before,
.bass-carousel-arrow::after {
  content: none !important;
  display: none !important;
}

.bass-carousel-arrow:hover {
  background: rgba(224, 224, 224, 0.98);
}

.bass-carousel-arrow .bass-carousel-arrow__icon {
  color: #171717;
  display: block;
  flex: 0 0 auto;
  height: 100% !important;
  inset: auto !important;
  margin: 0;
  position: static !important;
  transform: none !important;
  width: 100% !important;
}

.bass-carousel-arrow svg {
  padding: 0 !important;
}

.bass-carousel-arrow path {
  fill: none !important;
}

.bass-hero-carousel .fl-content-slider-navigation > .bass-carousel-arrow {
  align-items: center !important;
  background: rgba(239, 239, 239, 0.96) !important;
  border-radius: 999px !important;
  color: #171717 !important;
  display: flex !important;
  justify-content: center !important;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.bass-hero-carousel
  .fl-content-slider-navigation
  > .bass-carousel-arrow--previous {
  left: 20px;
}

.bass-hero-carousel .fl-content-slider-navigation > .bass-carousel-arrow--next {
  right: 20px;
}

@media only screen and (max-width: 991px) {
  .bass-new-arrivals-carousel
    > .bass-new-arrivals-carousel__container
    > .uabb-blog-posts-col-4 {
    flex-basis: 50%;
  }

  .bass-distributor-carousel__container > .uabb-image-carousel-item {
    flex-basis: 33.3333% !important;
    width: 33.3333% !important;
  }
}

@media only screen and (max-width: 575px) {
  .bass-carousel-frame {
    display: grid;
    grid-template-columns: 1fr;
  }

  .bass-carousel-frame > .bass-carousel-arrow,
  .bass-carousel-frame > .bass-new-arrivals-carousel,
  .bass-carousel-frame > .bass-latest-blog-carousel,
  .bass-carousel-frame > .bass-distributor-carousel {
    grid-area: 1 / 1;
  }

  .bass-distributor-carousel__container > .uabb-image-carousel-item {
    flex-basis: 50% !important;
    width: 50% !important;
  }

  .bass-carousel-frame > .bass-carousel-arrow--previous {
    justify-self: start;
    margin-left: 8px;
  }

  .bass-carousel-frame > .bass-carousel-arrow--next {
    justify-self: end;
    margin-right: 8px;
  }

  .bass-new-arrivals-carousel
    > .bass-new-arrivals-carousel__container
    > .uabb-blog-posts-col-4 {
    flex-basis: 100%;
  }
}

/* Product detail gallery + related-products carousel restored with Embla. */
.bass-product-gallery {
  display: block;
  max-width: 100%;
}

.bass-product-gallery__viewport,
.bass-product-gallery__thumbs,
.bass-product-related-carousel {
  overflow: hidden;
}

.bass-product-gallery__container,
.bass-product-gallery__thumbs-container,
.bass-product-related-carousel__container {
  display: flex;
  touch-action: pan-y pinch-zoom;
  width: 100%;
}

.bass-product-gallery__slide {
  flex: 0 0 100%;
  min-width: 0;
}

.bass-product-gallery__thumb {
  appearance: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  display: block;
  flex: 0 0 25%;
  min-width: 0;
  opacity: 0.72;
  padding-top: 0;
  transition:
    opacity 160ms ease,
    transform 160ms ease;
}

.bass-product-gallery__thumb:hover,
.bass-product-gallery__thumb.is-selected {
  opacity: 1;
}

.bass-product-gallery__thumb.is-selected {
  transform: translateY(-1px);
}

.bass-product-gallery__thumb .ratio {
  outline: 2px solid transparent;
  outline-offset: -2px;
}

.bass-product-gallery__thumb.is-selected .ratio {
  outline-color: #171717;
}

.bass-product-related-carousel-frame {
  align-items: center;
  column-gap: 14px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 38px;
}

.bass-product-related-carousel-frame > .bass-product-related-carousel {
  min-width: 0;
}

.bass-product-related-carousel {
  display: block !important;
  position: relative;
}

.bass-product-related-carousel__container > .fl-post-column {
  flex: 0 0 25%;
  float: none;
  min-width: 0;
  width: auto;
}

.bass-product-related-carousel .fl-post-grid-post {
  height: 100%;
}

@media only screen and (max-width: 991px) {
  .bass-product-related-carousel__container > .fl-post-column {
    flex-basis: 50%;
  }
}

@media only screen and (max-width: 575px) {
  .bass-product-related-carousel-frame {
    display: grid;
    grid-template-columns: 1fr;
  }

  .bass-product-related-carousel-frame > .bass-carousel-arrow,
  .bass-product-related-carousel-frame > .bass-product-related-carousel {
    grid-area: 1 / 1;
  }

  .bass-product-related-carousel-frame > .bass-carousel-arrow--previous {
    justify-self: start;
    margin-left: 8px;
  }

  .bass-product-related-carousel-frame > .bass-carousel-arrow--next {
    justify-self: end;
    margin-right: 8px;
  }

  .bass-product-related-carousel__container > .fl-post-column {
    flex-basis: 100%;
  }
}

/* 5. Search submit button — mirror <a> styles for semantic <button type="submit">.
 *    The mirrored WP CSS bundles target only `a` elements, so browser default
 *    button styling (gray background, outset border, etc.) leaks through. */
.uabb-creative-button-wrap button[type='submit'] {
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  overflow: hidden;
  text-decoration: none;
  text-shadow: none;
  box-shadow: none;
  position: relative;
  transition: 200ms linear;
  background: rgb(250, 250, 250);
  border: 1px solid rgb(204, 204, 204);
  color: rgb(51, 51, 51);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.fl-builder-content
  [class*='fl-node-']
  .uabb-creative-button-wrap
  button[type='submit'] {
  padding: 10px;
  background: var(--fl-global-primary);
}

.fl-builder-content
  [class*='fl-node-']
  .uabb-module-content.uabb-creative-button-wrap
  button[type='submit'] {
  border-style: solid;
  border-width: 0px;
  background-clip: border-box;
  border-radius: 5px;
}

[class*='fl-node-'] .uabb-creative-button-wrap button[type='submit'] {
  font-size: 12px;
}

.fl-builder-content
  [class*='fl-node-']
  .uabb-creative-button-wrap
  button[type='submit']
  *,
.fl-builder-content
  [class*='fl-node-']
  .uabb-creative-button-wrap
  button[type='submit']
  *:visited {
  color: rgb(255, 255, 255);
}

/* 6. Mobile flyout panel (<=768px) — the only width where FL Builder turns the
 *    menu into an off-canvas flyout (on the live site the .fl-menu-mobile-flyout
 *    wrapper is injected by JS only at this breakpoint). Our static markup keeps
 *    the wrapper at all widths, so we scope its flyout styling to mobile to match;
 *    >=769px the inner ul.menu just renders as a horizontal bar (section 7).
 *    Base styles below are missing from our mirrored FL Builder CSS. React sets
 *    left:0/-250px inline to open/close; transition animates the slide. */
/* The flyout's close button belongs to the mobile panel only; hidden by default,
 * shown inside the mobile media query below. */
.fl-menu-mobile-close {
  display: none;
}

@media (max-width: 768px) {
  .fl-menu-mobile-flyout {
    position: fixed;
    top: 0;
    width: 250px;
    height: 100vh;
    background: rgb(23, 23, 23);
    z-index: 999999;
    overflow-y: auto;
    transition:
      left 0.2s,
      right 0.2s;
  }

  .fl-flyout-left .fl-menu-mobile-flyout {
    left: -250px;
  }

  .fl-menu-mobile-close {
    display: block;
    width: 100%;
    text-align: right;
    padding: 12px 16px;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    line-height: 1;
  }
}

/* Overlay that dims the page behind the open flyout panel (only rendered while
 * the flyout is open, which can only happen at mobile widths). */
.fl-menu-mobile-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999998;
}

/* 7. Desktop horizontal menu (>=769px). FL Builder hides the hamburger toggle
 *    here, expecting the inline ul.menu to render as a horizontal bar — which the
 *    mirrored FL CSS already lays out. The only thing in our way is theme.min.css's
 *    unconditional `.fl-menu .fl-menu-mobile-flyout { height: 100vh !important }`;
 *    !important is the only way to beat its !important. */
@media (min-width: 769px) {
  .fl-menu .fl-menu-mobile-flyout {
    height: auto !important;
  }

  /* Reveal the Product dropdown on hover. The closed submenu carries an inline
   * display:none (it drives the mobile flyout's click-toggle), which only
   * !important can override here — FL Builder's own desktop hover rule can't. */
  .fl-menu .fl-has-submenu:hover > .sub-menu {
    display: block !important;
  }
}

/* 8. Native commerce (Phase E1) — cart drawer (Aside), line items, summary,
 *    header toggle, and /cart page. The default Hydrogen app.css (which ships the
 *    .overlay/aside/.cart-* styles) is intentionally NOT loaded by this project, so
 *    those surfaces are styled here. Drawer rules are scoped to .bass-aside (the
 *    only <Aside> consumer) so the generic `aside`/`.overlay` selectors cannot leak
 *    into BeaverBuilder markup. CTA buttons are styled standalone (not via .fl-button,
 *    which is only present in per-route BB layout bundles) so they render on every
 *    route the drawer appears on. */
:root {
  --bass-aside-width: 400px;
  --bass-primary: #1c4e88;
  --bass-primary-hover: #163e6d;
}

/* Header cart toggle + count badge */
.bass-cart-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  color: #fff;
  padding: 8px;
}
.bass-cart-toggle:hover {
  color: #c7d2e0;
}
.bass-cart-count {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--bass-primary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Cart / account actions sit on the right of the nav (dark) bar, beside the menu.
 * Target the column that actually contains the actions (node-id agnostic) so this
 * survives BeaverBuilder regenerating node ids. */
.fl-col-content:has(> .bass-header-actions) {
  position: relative;
}
.bass-header-actions {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 4px;
  z-index: 2;
}

/* Drawer overlay + sliding panel */
html:has(.bass-aside.overlay.expanded) {
  overflow: hidden;
}
.bass-aside.overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 200ms ease-in-out;
}
.bass-aside.overlay.expanded {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.bass-aside .close-outside {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: calc(100% - min(var(--bass-aside-width), 100vw));
  background: transparent;
  border: none;
  cursor: default;
}
.bass-aside aside {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  height: 100dvh;
  width: min(var(--bass-aside-width), 100vw);
  background: #fff;
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.3);
  transform: translateX(100%);
  transition: transform 220ms ease-in-out;
  display: flex;
  flex-direction: column;
}
.bass-aside.overlay.expanded aside {
  transform: translateX(0);
}
.bass-aside aside > header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #e5e5e5;
}
.bass-aside aside > header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.bass-aside aside > header .close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  color: #666;
  padding: 4px 8px;
  border-radius: 4px;
  transition:
    color 150ms ease,
    background 150ms ease;
}
.bass-aside aside > header .close:hover {
  color: #111;
  background: #f3f4f6;
}
.bass-aside aside > main {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 16px 20px;
}

/* CartMain (aside layout): scrollable lines, pinned summary */
.bass-aside .cart-main {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  width: auto;
}
.bass-aside .cart-details {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
.bass-aside .cart-details > div {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
/* Line-item list: scoped to .cart-main (parent of both aside and page CartMain)
 * so the page version also loses the default <ul> disc. The drawer rule above
 * is now redundant; keeping it for explicit drawer semantics. */
.cart-main .cart-details ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Cart line item */
.cart-line {
  padding: 14px 0;
  border-bottom: 1px solid #f0f0f0;
}
.cart-line-inner {
  display: flex;
  gap: 12px;
}
.cart-line img {
  width: 72px;
  height: 72px;
  flex: 0 0 auto;
  object-fit: cover;
  border: 1px solid #eee;
  border-radius: 4px;
}
/* Page version: smaller line image (the drawer keeps 72px for compactness) */
.bass-cart-page .cart-line img {
  width: 88px;
  height: 88px;
}
.cart-line p {
  margin: 0 0 4px;
}
.cart-line a {
  color: #111;
  text-decoration: none;
}
.cart-line ul {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
}
.cart-line-quantity {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}
.cart-line-quantity button {
  width: 28px;
  height: 28px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  line-height: 1;
}
.cart-line-quantity button[disabled] {
  opacity: 0.4;
  cursor: default;
}
/* Cart line remove: square icon button, destructive (red) by default to read
 * as a delete action. Sized to match the qty stepper buttons so the row stays
 * visually balanced when the Hapus label is sr-only. */
.bass-cart-line-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-left: auto;
  padding: 0;
  background: #fff;
  border: 1px solid #fecaca;
  border-radius: 4px;
  color: #b3261e;
  cursor: pointer;
  transition:
    background 150ms ease,
    border-color 150ms ease;
}
.bass-cart-line-remove i {
  font-size: 13px;
  line-height: 1;
  color: #b3261e;
}
.bass-cart-line-remove:hover:not([disabled]) {
  background: #fef2f2;
  border-color: #b3261e;
}
.bass-cart-line-remove:hover:not([disabled]) i {
  color: #991b1b;
}
.bass-cart-line-remove[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Cart summary */
.cart-summary-aside {
  flex: 0 0 auto;
  border-top: 1px solid #e5e5e5;
  margin-top: 8px;
  padding-top: 12px;
}
.cart-summary-aside h4,
.cart-summary-page h4 {
  margin: 0 0 8px;
  font-size: 14px;
}
.cart-subtotal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 8px 0;
}
.cart-subtotal dt {
  font-weight: 600;
}
.cart-subtotal dd {
  margin: 0;
  font-weight: 700;
}

/* Discount + gift-card forms (cart summary, both drawer and page).
 * CartSummary renders each as <section><form><div>(label + input + button)</div></form>,
 * so the form's child <div> is the flex row (NOT section > div, which is empty). */
.cart-summary-aside section,
.cart-summary-page section {
  margin-top: 12px;
}
.cart-summary-aside section dt,
.cart-summary-page section dt {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 4px;
}
.cart-summary-aside form > div,
.cart-summary-page form > div {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.cart-summary-aside form input[type='text'],
.cart-summary-page form input[type='text'] {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 13px;
  min-width: 0;
  flex: 1 1 140px;
  background: #fff;
}
.cart-summary-aside form > div > button[type='submit'],
.cart-summary-page form > div > button[type='submit'] {
  flex: 0 0 auto;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #f5f5f5;
  padding: 8px 14px;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  color: #111;
}
.cart-summary-aside form > div > button[type='submit']:hover,
.cart-summary-page form > div > button[type='submit']:hover {
  background: #ebebeb;
}
/* Existing discount / gift-card chip (the "XCODE Hapus" row) */
.cart-discount {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}
.cart-discount code {
  background: #f3f4f6;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 13px;
}
.cart-discount button {
  background: none;
  border: none;
  padding: 0;
  color: var(--bass-primary);
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
}

/* Pre-order status — shared by product cards and the PDP */
.bass-product-card-media {
  position: absolute;
  inset: 0;
}
.bass-product-card-media > a {
  display: block;
  width: 100%;
  height: 100%;
}
.bass-preorder-badge {
  display: inline-flex;
  align-items: center;
  width: auto;
  height: auto;
  border: 1px solid #f4ca64;
  border-radius: 999px;
  background: #fff5d8;
  color: #7a4b00;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.bass-preorder-badge--overlay {
  position: absolute;
  z-index: 1;
  top: 8px;
  left: 8px;
  padding: 4px 9px;
  box-shadow: 0 2px 8px rgb(64 42 0 / 14%);
}
.bass-preorder-badge--pdp {
  margin-left: 10px;
  padding: 5px 10px;
  vertical-align: middle;
}
.bass-preorder-notice {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-bottom: 12px;
  padding: 14px 16px;
  border: 1px solid #f1ddb0;
  border-radius: 10px;
  background: #fffbf2;
  box-shadow: 0 3px 12px rgb(64 42 0 / 5%);
}
.bass-preorder-notice::before {
  content: '';
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  margin-top: 6px;
  border-radius: 50%;
  background: #e6a817;
  box-shadow: 0 0 0 4px #fff0c7;
}
.bass-preorder-notice-title {
  margin-bottom: 3px;
  color: #3d310f;
  font-weight: 700;
  line-height: 1.4;
}
.bass-preorder-notice-text {
  color: #6d6250;
  font-size: 0.875rem;
  line-height: 1.5;
}

/* Product options come directly from Shopify and support any option name/value. */
.bass-product-options {
  margin: 18px 20px 24px;
}
.bass-product-option {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.bass-product-option + .bass-product-option {
  margin-top: 16px;
}
.bass-product-option__name {
  float: none;
  width: auto;
  margin: 0 0 10px;
  padding: 0;
  color: #222;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.4;
}
.bass-product-option__values {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}
.bass-product-option__value {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  min-height: 62px;
  margin: 0;
  padding: 11px 13px;
  border: 1px solid #d2d8e0;
  border-radius: 6px;
  background: #fff;
  color: #222;
  cursor: pointer;
  transition:
    border-color 150ms ease,
    background 150ms ease,
    box-shadow 150ms ease,
    transform 150ms ease;
}
.bass-product-option__value:hover {
  border-color: var(--bass-primary);
  box-shadow: 0 3px 10px rgb(17 48 82 / 10%);
  transform: translateY(-1px);
}
.bass-product-option__value.is-selected {
  border-color: var(--bass-primary);
  background: var(--bass-primary);
  color: #fff;
  box-shadow: 0 4px 12px rgb(17 64 109 / 18%);
}
.bass-product-option__value.is-unavailable {
  color: #3f4854;
}
.bass-product-option__value.is-selected.is-unavailable {
  color: #fff;
}
.bass-product-option__value.is-disabled {
  background: #f4f5f6;
  color: #777;
  cursor: not-allowed;
  opacity: 0.7;
}
.bass-product-option__value input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
.bass-product-option__indicator {
  position: relative;
  width: 18px;
  height: 18px;
  border: 1.5px solid #9ca8b6;
  border-radius: 50%;
  flex: 0 0 auto;
}
.bass-product-option__value.is-selected .bass-product-option__indicator {
  border-color: #fff;
}
.bass-product-option__value.is-selected .bass-product-option__indicator::after {
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: #fff;
  content: '';
}
.bass-product-option__value
  input:focus-visible
  + .bass-product-option__indicator {
  outline: 3px solid rgb(35 100 160 / 28%);
  outline-offset: 3px;
}
.bass-product-option__copy {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}
.bass-product-option__label {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.25;
}
.bass-product-option__availability {
  display: inline-flex;
  padding: 2px 7px;
  border-radius: 999px;
  background: #eef0f3;
  color: #6b7480;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.4;
}
.bass-product-option__value.is-selected .bass-product-option__availability {
  background: rgb(255 255 255 / 16%);
  color: #fff;
}
@media (max-width: 540px) {
  .bass-product-options {
    margin-right: 10px;
    margin-left: 10px;
  }
  .bass-product-option__values {
    grid-template-columns: 1fr;
  }
}

/* Shared CTAs — checkout, empty-cart, add-to-cart */
.bass-cart-checkout {
  margin-top: 12px;
}
.bass-cart-checkout-btn,
.bass-cart-empty-cta,
button.bass-add-to-cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  background: var(--bass-primary);
  color: #fff;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background 150ms ease;
}
.bass-cart-checkout-btn:hover,
.bass-cart-empty-cta:hover,
button.bass-add-to-cart:hover {
  background: var(--bass-primary-hover);
  color: #fff;
}
.bass-cart-checkout-btn span,
.bass-cart-empty-cta span,
button.bass-add-to-cart span,
button.bass-add-to-cart i {
  color: #fff;
}
button.bass-add-to-cart[disabled] {
  background: #9aa7b8;
  cursor: not-allowed;
}
.bass-add-to-cart-module {
  margin-bottom: 4px;
}
/* Match the WhatsApp CTA's top margin to the add-to-cart bottom margin
   so the two PDP CTAs read as one action group instead of being split by
   the default Beaver Builder .fl-module 20px margin. */
.fl-node-5wngt10hvy8k {
  margin-top: 4px;
}
.bass-cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 32px 0;
  text-align: center;
}
.bass-cart-empty-cta {
  width: auto;
  padding: 12px 28px;
}
.bass-cart-error {
  margin: 0 0 16px;
  padding: 12px 16px;
  border-radius: 6px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
  font-size: 0.875rem;
}
.bass-cart-error p {
  margin: 0;
}
.bass-cart-error p + p {
  margin-top: 4px;
}
.bass-cart-loading {
  padding: 24px 0;
  text-align: center;
  color: #666;
}

/* /cart page */
/* Page <h1> — mirrors the BB .fl-node-gko93j28ercm.fl-module-heading rule
 * from the dec583 layout bundle (Poppins 700 30px uppercase). The <h1>
 * default `font-weight: 500` would otherwise fall back to default serif
 * because the site only loads Poppins 400/700. The border-bottom replaces
 * the BB separator module that sits below the heading on cloned pages. */
.bass-cart-page-title {
  font-family: Poppins, sans-serif;
  font-weight: 700;
  font-size: 30px;
  text-transform: uppercase;
  margin: 0 0 10px;
  padding-bottom: 13px;
  border-bottom: 1px solid #787868;
}
.bass-cart-page .cart-main {
  max-width: 720px;
}
.bass-cart-page .cart-line {
  padding: 18px 0;
  border-bottom: 1px solid #eee;
}
.bass-cart-page .cart-line:last-child {
  border-bottom: 0;
}
.bass-cart-page .cart-line a {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
}
.bass-cart-page .cart-line-price {
  display: inline-block;
  margin-top: 4px;
  font-size: 14px;
  color: #111;
}
.bass-cart-page .cart-line-quantity {
  margin-top: 10px;
  flex-wrap: wrap;
  row-gap: 8px;
}
.bass-cart-page .cart-summary-page {
  margin-top: 28px;
  background: #f8f8f8;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 18px 20px;
}
.bass-cart-page .cart-summary-page h4 {
  font-family: Poppins, sans-serif;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #666;
  margin: 0 0 10px;
}
.bass-cart-page .cart-subtotal {
  border-top: 1px solid #e5e5e5;
  margin: 10px 0 0;
  padding-top: 10px;
}
.bass-cart-page .cart-subtotal dt {
  font-size: 15px;
  font-weight: 700;
}
.bass-cart-page .cart-subtotal dd {
  font-size: 18px;
  font-weight: 700;
  color: var(--bass-primary);
}
.bass-cart-page .bass-cart-checkout {
  margin-top: 16px;
}
.bass-cart-empty {
  background: #f8f8f8;
  border: 1px dashed #d4d4d4;
  border-radius: 8px;
  padding: 56px 24px;
  text-align: center;
  color: #555;
}
.bass-cart-empty > p {
  margin: 0 0 20px;
  font-size: 16px;
  color: #111;
}

@media only screen and (min-width: 992px) {
  /* On wide viewports, lay the line-item list and summary side by side so the
   * page reads as a proper 2-column cart, matching common Indonesian e-commerce
   * layouts. Single-column is preserved on mobile/tablet (the cart-main max-width
   * keeps things readable on a narrow window). */
  .bass-cart-page .cart-details {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    column-gap: 32px;
    align-items: start;
  }
  .bass-cart-page .cart-details > div:first-child {
    min-width: 0;
  }
  .bass-cart-page .cart-summary-page {
    margin-top: 0;
    position: sticky;
    top: 16px;
  }
}

/* 9. Customer accounts (Phase E3). Scoped to .bass-account (the account layout
 *    wrapper) so generic element selectors can't leak into cloned WP pages.
 *    Account routes render their content inside the account layout's Outlet, so
 *    they all sit under .bass-account-content. */
.bass-account {
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 0 48px;
}
/* /account page <h1> — same `.fl-heading` typography as
 * .bass-cart-page-title (Poppins 700 30px uppercase + thin divider). */
.bass-account-heading {
  font-family: Poppins, sans-serif;
  font-weight: 700;
  font-size: 30px;
  text-transform: uppercase;
  margin: 0 0 10px;
  padding-bottom: 13px;
  border-bottom: 1px solid #787868;
}
.bass-account-menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid #e5e5e5;
  padding-bottom: 12px;
  margin-bottom: 24px;
}
.bass-account-menu a {
  color: #111;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
}
.bass-account-menu a:hover,
.bass-account-menu a.active {
  color: var(--bass-primary);
}
.bass-account-logout {
  margin: 0 0 0 auto;
}
.bass-account-logout button {
  background: none;
  border: none;
  padding: 0;
  color: var(--bass-primary);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}
.bass-account-logout button:hover {
  color: var(--bass-primary-hover);
}

/* Pre-checkout page <h1> — same .fl-heading typography as cart/account.
 * Phase 2 of the custom pre-checkout Draft Order bridge. */
.bass-checkout-page-title {
  font-family: Poppins, sans-serif;
  font-weight: 700;
  font-size: 30px;
  text-transform: uppercase;
  margin: 0 0 10px;
  padding-bottom: 13px;
  border-bottom: 1px solid #787868;
}

/* Account page content (profile / orders / addresses) */
.bass-account-content h2 {
  font-family: Poppins, sans-serif;
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 18px;
  color: #111;
  letter-spacing: 0.02em;
}
.bass-account-content h3 {
  font-family: Poppins, sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #666;
  margin: 24px 0 10px;
}
.bass-account-content legend {
  font-family: Poppins, sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #666;
  margin-bottom: 10px;
}
.bass-account-content label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin: 14px 0 4px;
  color: #111;
}
.bass-account-content input[type='text'],
.bass-account-content input[type='tel'],
.bass-account-content input[type='email'],
.bass-account-content input[type='search'] {
  width: 100%;
  max-width: 380px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 9px 12px;
  font-size: 14px;
  background: #fff;
  transition: border-color 150ms ease;
}
.bass-account-content input[type='text']:focus,
.bass-account-content input[type='tel']:focus,
.bass-account-content input[type='email']:focus,
.bass-account-content input[type='search']:focus {
  border-color: var(--bass-primary);
  outline: 2px solid rgba(28, 78, 136, 0.15);
  outline-offset: 0;
}
.bass-account-content input[type='checkbox'] {
  margin-right: 8px;
  vertical-align: middle;
}
.bass-account-content fieldset {
  border: none;
  padding: 0;
  margin: 0 0 20px;
}
.bass-account-content .account-profile fieldset {
  display: grid;
  grid-template-columns: minmax(0, 380px);
  gap: 0;
}
.bass-account-content button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 16px 8px 0 0;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  background: var(--bass-primary);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: background 150ms ease;
}
.bass-account-content button:hover {
  background: var(--bass-primary-hover);
}
.bass-account-content button[disabled] {
  background: #9aa7b8;
  cursor: not-allowed;
}
/* Destructive (delete address) button reads as outline-danger */
.bass-account-content button[formmethod='DELETE' i] {
  background: #fff;
  color: #b3261e;
  border: 1px solid #b3261e;
}
.bass-account-content button[formmethod='DELETE' i]:hover {
  background: #fdecea;
}
/* Profile + address error callout */
.bass-account-content mark {
  display: block;
  margin-top: 12px;
  padding: 10px 12px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 4px;
  color: #991b1b;
  font-size: 13px;
}
.bass-account-content hr {
  border: none;
  border-top: 1px solid #eee;
  margin: 28px 0;
}

/* Orders list + order detail tables */
.bass-account-content .orders > div {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.bass-account-content .orders fieldset {
  border: 1px solid #eee;
  border-radius: 6px;
  padding: 16px 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
  margin: 0;
  background: #fff;
  transition: border-color 150ms ease;
}
.bass-account-content .orders fieldset:hover {
  border-color: #d4d4d4;
}
.bass-account-content .orders fieldset > a:first-child {
  font-size: 15px;
  font-weight: 700;
  color: #111;
  text-decoration: none;
  margin-right: 4px;
}
.bass-account-content .orders fieldset > a:first-child:hover {
  color: var(--bass-primary);
}
.bass-account-content .orders fieldset p {
  margin: 0;
  font-size: 13px;
  color: #666;
}
.bass-account-content .orders fieldset > a:last-of-type {
  margin-left: auto;
  color: var(--bass-primary);
  text-decoration: none;
  font-weight: 600;
  font-size: 13px;
}
.bass-account-content .orders fieldset > a:last-of-type:hover {
  text-decoration: underline;
}
.bass-account-content .orders fieldset > br {
  display: none;
}
.bass-account-content .order-search-form {
  margin-bottom: 24px;
  padding: 16px 18px;
  background: #f8f8f8;
  border: 1px solid #eee;
  border-radius: 6px;
}
.bass-account-content .order-search-fieldset {
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}
.bass-account-content .order-search-legend {
  flex: 0 0 100%;
  font-family: Poppins, sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #666;
  margin-bottom: 4px;
}
.bass-account-content .order-search-inputs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  flex: 1 1 240px;
  min-width: 200px;
}
.bass-account-content .order-search-input {
  max-width: 220px;
  flex: 1 1 140px;
  background: #fff;
}
.bass-account-content .order-search-buttons {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
}
.bass-account-content .order-search-buttons button {
  margin: 0;
}
.bass-account-content .account-order {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 6px;
  padding: 18px;
  margin-bottom: 16px;
}
.bass-account-content .account-order h2 {
  margin-bottom: 4px;
}
.bass-account-content .account-order > p {
  margin: 0 0 16px;
  color: #666;
  font-size: 14px;
}
.bass-account-content .account-order table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin-top: 12px;
}
.bass-account-content .account-order thead th {
  background: #f8f8f8;
  font-weight: 600;
  color: #555;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 10px 12px;
  border-bottom: 1px solid #e5e5e5;
}
.bass-account-content .account-order tbody td {
  padding: 12px;
  border-bottom: 1px solid #f0f0f0;
  vertical-align: top;
}
.bass-account-content .account-order tfoot th,
.bass-account-content .account-order tfoot td {
  padding: 10px 12px;
  border-top: 1px solid #eee;
  font-weight: 600;
  text-align: right;
}
.bass-account-content .account-order tfoot td {
  font-weight: 700;
}
/* The upstream Hydrogen order-detail tfoot renders a duplicate <th> after the
 * colSpan=3 label cell (e.g. <th colSpan=3>Diskon</th> + <th>Diskon</th> + <td>…</td>),
 * producing 5 cells in a 4-column table. Hide the second th so the row lays out
 * cleanly. (Don't change the JSX — that's an upstream template bug and out of
 * scope for the visual polish pass.) */
.bass-account-content .account-order tfoot tr th[colspan='3'] + th {
  display: none;
}
.bass-account-content .account-order tfoot tr:last-child th,
.bass-account-content .account-order tfoot tr:last-child td {
  font-size: 16px;
  border-top: 2px solid #111;
  color: #111;
}
.bass-account-content .account-order td > div {
  display: flex;
  align-items: center;
  gap: 12px;
}
.bass-account-content .account-order td img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid #eee;
  flex: 0 0 auto;
}
.bass-account-content .account-order address {
  font-style: normal;
  color: #111;
  line-height: 1.5;
}
.bass-account-content .account-order address p {
  margin: 0;
}
.bass-account-content .account-order > div > p {
  margin: 0;
  padding: 4px 10px;
  background: #f3f4f6;
  border-radius: 999px;
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #555;
}

/* Addresses form: stack inputs into a sensible 1-col rhythm and tighten the
 * "default address" checkbox row. The AccountAddressForm already groups each
 * address inside its own <Form>, so scoping to .account-addresses keeps this from
 * affecting other pages. */
.bass-account-content .account-addresses {
  background: #fff;
}
.bass-account-content .account-addresses > div {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 18px;
}
.bass-account-content .account-addresses form {
  display: block;
  border: 1px solid #eee;
  border-radius: 6px;
  padding: 18px;
  background: #fafafa;
}
.bass-account-content .account-addresses form fieldset {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  column-gap: 18px;
  margin-bottom: 8px;
}
.bass-account-content .account-addresses form > div:last-child {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.bass-account-content .account-addresses form > div:last-child > button {
  margin: 0;
}
.bass-account-content .account-addresses form > div:last-child > label {
  margin: 0;
  font-weight: 500;
  color: #444;
  display: inline-flex;
  align-items: center;
}
@media only screen and (max-width: 575px) {
  .bass-account-content .account-addresses form fieldset {
    grid-template-columns: 1fr;
  }
}

/* Header account icon (sits in .bass-header-actions beside the cart, on the dark bar) */
.bass-account-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px;
  color: #fff;
  font-size: 18px;
  line-height: 1;
  text-decoration: none;
}
.bass-account-link:hover {
  color: #c7d2e0;
}
.bass-account-label {
  font-family: Poppins, sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .bass-account-label {
    display: inline-block;
    margin-left: 10px;
    vertical-align: middle;
    font-family: Poppins, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    text-transform: uppercase;
  }
}

/* Floating contact controls: keep scroll-to-top above WhatsApp instead of
 * overlapping it, and render the scroll control as a circular icon button. */
.floating-footer.float-wa-right.float-scrolltop-right .floating-button {
  right: 0.75rem;
}

.floating-footer.float-wa-right.float-scrolltop-right
  .whatsapp-floating.floating-button {
  z-index: 14;
}

.floating-footer.float-wa-right.float-scrolltop-right
  .scroll-to-top.floating-button {
  align-items: center;
  background-color: var(--bs-primary, #dd3333);
  border: 0;
  border-radius: 50%;
  bottom: 4rem;
  color: #fff;
  display: inline-flex;
  height: 2.75rem;
  justify-content: center;
  line-height: 1;
  opacity: 0;
  padding: 0;
  pointer-events: none;
  transform: translateY(calc(100% + 0.75rem));
  transition:
    opacity 160ms ease,
    transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1),
    visibility 0s linear 240ms;
  visibility: hidden;
  width: 2.75rem;
  z-index: 13;
}

.floating-footer.float-wa-right.float-scrolltop-right
  .scroll-to-top.floating-button.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  transition-delay: 0s;
  visibility: visible;
}

.floating-footer.float-wa-right.float-scrolltop-right
  .scroll-to-top.floating-button
  svg {
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .floating-footer.float-wa-right.float-scrolltop-right
    .scroll-to-top.floating-button {
    transition: none;
  }
}
