/*
 * Lincs Lootcave — Single Product Mobile Buybar
 *
 * Single presentation owner for the mobile product purchase dock.
 * Commerce behaviour remains outside this stylesheet.
 */

@media (min-width: 768px) {
  body.single-product:not(.wp-admin) .llce-mobile-buybar {
    display: none !important;
  }
}

@media (max-width: 767px) {

  body.single-product:not(.wp-admin) {
    padding-bottom: calc(126px + env(safe-area-inset-bottom, 0px));
  }

  body.single-product:not(.wp-admin) .llce-mobile-buybar {
    display: none !important;
  }

  body.single-product:not(.wp-admin)
  .llce-mobile-buybar:not(.llce-mobile-buybar-disabled) {
    position: fixed !important;
    z-index: 2147482600 !important;

    display: grid !important;
    grid-template-columns: 60px minmax(0, 1fr) 116px !important;
    grid-template-areas: "thumb info actions" !important;
    align-items: center !important;

    left: max(12px, env(safe-area-inset-left, 0px)) !important;
    right: max(12px, env(safe-area-inset-right, 0px)) !important;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;

    min-height: 100px !important;

    gap: 11px !important;
    padding: 11px 12px 11px 11px !important;

    box-sizing: border-box !important;
    overflow: hidden !important;

    border: 1px solid rgba(212, 175, 55, 0.34) !important;
    border-radius: 26px !important;

    background:
      radial-gradient(
        circle at 8% 25%,
        rgba(138, 255, 0, 0.085),
        transparent 28%
      ),
      radial-gradient(
        circle at 92% 12%,
        rgba(118, 62, 190, 0.23),
        transparent 38%
      ),
      linear-gradient(
        145deg,
        rgba(17, 20, 31, 0.985),
        rgba(7, 10, 18, 0.99) 56%,
        rgba(4, 7, 13, 0.995)
      ) !important;

    box-shadow:
      0 22px 54px rgba(0, 0, 0, 0.62),
      0 5px 24px rgba(0, 0, 0, 0.30),
      0 0 30px rgba(118, 62, 190, 0.10),
      inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;

    backdrop-filter: blur(20px) saturate(115%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(115%) !important;

    transition:
      transform 190ms ease,
      opacity 190ms ease,
      border-color 190ms ease,
      box-shadow 190ms ease !important;
  }

  /*
   * Fine gold light across the top edge.
   */
  body.single-product:not(.wp-admin)
  .llce-mobile-buybar:not(.llce-mobile-buybar-disabled)::before {
    content: "";

    position: absolute;
    z-index: 0;
    top: 0;
    left: 12%;
    right: 12%;

    height: 1px;

    pointer-events: none;

    background:
      linear-gradient(
        90deg,
        transparent,
        rgba(240, 216, 121, 0.22) 18%,
        rgba(240, 216, 121, 0.68) 50%,
        rgba(240, 216, 121, 0.22) 82%,
        transparent
      );

    box-shadow:
      0 0 16px rgba(212, 175, 55, 0.15);
  }

  /*
   * Atmospheric depth behind the purchase side.
   */
  body.single-product:not(.wp-admin)
  .llce-mobile-buybar:not(.llce-mobile-buybar-disabled)::after {
    content: "";

    position: absolute;
    z-index: 0;
    top: -50%;
    right: -5%;

    width: 150px;
    height: 160px;

    pointer-events: none;

    background:
      radial-gradient(
        circle,
        rgba(118, 62, 190, 0.13),
        transparent 66%
      );
  }

  body.single-product:not(.wp-admin)
  .llce-mobile-buybar > * {
    position: relative;
    z-index: 1;
  }

  body.single-product:not(.wp-admin)
  .llce-mobile-buybar-bg {
    display: none !important;
  }

  /* -------------------------------------------------------
   * Product artwork
   * ----------------------------------------------------- */

  body.single-product:not(.wp-admin)
  .llce-mobile-buybar-thumb {
    grid-area: thumb !important;

    position: relative !important;

    width: 60px !important;
    height: 68px !important;

    align-self: center !important;
    box-sizing: border-box !important;
    overflow: hidden !important;

    padding: 4px !important;

    border: 1px solid rgba(212, 175, 55, 0.34) !important;
    border-radius: 17px !important;

    background:
      radial-gradient(
        circle at 50% 38%,
        rgba(138, 255, 0, 0.08),
        transparent 58%
      ),
      linear-gradient(
        180deg,
        rgba(14, 17, 27, 0.98),
        rgba(5, 8, 14, 0.98)
      ) !important;

    box-shadow:
      0 9px 22px rgba(0, 0, 0, 0.38),
      0 0 0 1px rgba(138, 255, 0, 0.055),
      inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
  }

  body.single-product:not(.wp-admin)
  .llce-mobile-buybar-thumb img {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;

    border-radius: 12px !important;

    object-fit: contain !important;
    object-position: center !important;
  }

  /* -------------------------------------------------------
   * Product identity
   * ----------------------------------------------------- */

  body.single-product:not(.wp-admin)
  .llce-mobile-buybar-main {
    grid-area: info !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;

    min-width: 0 !important;
    max-width: 100% !important;

    gap: 5px !important;

    padding-right: 1px !important;
  }

  body.single-product:not(.wp-admin)
  .llce-mobile-buybar-title {
    display: -webkit-box !important;

    min-width: 0 !important;
    max-width: 100% !important;
    max-height: 2.45em !important;

    margin: 0 !important;

    overflow: hidden !important;

    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;

    color: #f6f4ee !important;

    font-size: 12.8px !important;
    font-weight: 780 !important;
    line-height: 1.17 !important;
    letter-spacing: -0.012em !important;

    text-wrap: pretty !important;
  }

  body.single-product:not(.wp-admin)
  .llce-mobile-buybar-stock {
    display: inline-flex !important;
    align-items: center !important;

    width: max-content !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 3px 7px 3px 6px !important;

    border: 1px solid rgba(138, 255, 0, 0.20) !important;
    border-radius: 999px !important;

    background:
      linear-gradient(
        180deg,
        rgba(138, 255, 0, 0.095),
        rgba(138, 255, 0, 0.045)
      ) !important;

    color: #9dff40 !important;

    font-size: 8.4px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: 0.055em !important;
    text-transform: uppercase !important;

    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
  }

  body.single-product:not(.wp-admin)
  .llce-mobile-buybar-stock::before {
    content: "";

    display: inline-block;

    width: 5px;
    height: 5px;

    margin-right: 5px;

    flex: 0 0 auto;

    border-radius: 50%;

    background: #8aff00;

    box-shadow:
      0 0 7px rgba(138, 255, 0, 0.62);
  }

  /* -------------------------------------------------------
   * Variation control
   * ----------------------------------------------------- */

  body.single-product:not(.wp-admin)
  .llce-mobile-buybar-options {
    display: flex !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    gap: 5px !important;
    margin-top: 1px !important;

    overflow: visible !important;
  }

  body.single-product:not(.wp-admin)
  .llce-mobile-buybar-field {
    position: relative !important;

    display: block !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
  }

  body.single-product:not(.wp-admin)
  .llce-mobile-buybar-field > span {
    display: none !important;
  }

  body.single-product:not(.wp-admin)
  .llce-mobile-buybar-field select {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;
    height: 30px !important;
    min-height: 30px !important;

    box-sizing: border-box !important;

    padding: 0 28px 0 9px !important;

    border: 1px solid rgba(212, 175, 55, 0.26) !important;
    border-radius: 10px !important;

    outline: none !important;

    background:
      linear-gradient(
        180deg,
        rgba(14, 17, 27, 0.97),
        rgba(6, 9, 16, 0.98)
      ) !important;

    color: #f2eee2 !important;

    font-size: 10.7px !important;
    font-weight: 750 !important;
    line-height: 1 !important;

    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.025),
      inset 0 0 12px rgba(118, 62, 190, 0.07) !important;
  }

  body.single-product:not(.wp-admin)
  .llce-mobile-buybar-field
  select.llce-buybar-select-has-value {
    border-color: rgba(138, 255, 0, 0.52) !important;

    box-shadow:
      0 0 0 1px rgba(138, 255, 0, 0.06),
      0 0 13px rgba(138, 255, 0, 0.07),
      inset 0 0 12px rgba(118, 62, 190, 0.07) !important;
  }

  body.single-product:not(.wp-admin)
  .llce-mobile-buybar-has-selection
  .llce-mobile-buybar-field::after {
    content: "✓";

    position: absolute;
    top: 50%;
    right: 27px;

    transform: translateY(-50%);

    pointer-events: none;

    color: #8aff00;

    font-size: 9px !important;
    font-weight: 950 !important;

    text-shadow:
      0 0 8px rgba(138, 255, 0, 0.38);
  }

  /* -------------------------------------------------------
   * Price and action
   * ----------------------------------------------------- */

  body.single-product:not(.wp-admin)
  .llce-mobile-buybar-actions {
    grid-area: actions !important;

    position: relative !important;

    display: grid !important;
    align-items: center !important;

    width: 116px !important;
    min-width: 116px !important;

    gap: 8px !important;

    padding-left: 11px !important;

    box-sizing: border-box !important;
  }

  body.single-product:not(.wp-admin)
  .llce-mobile-buybar-actions::before {
    content: "";

    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 0;

    width: 1px;

    background:
      linear-gradient(
        180deg,
        transparent,
        rgba(212, 175, 55, 0.15) 24%,
        rgba(212, 175, 55, 0.20) 50%,
        rgba(212, 175, 55, 0.15) 76%,
        transparent
      );
  }

  body.single-product:not(.wp-admin)
  .llce-mobile-buybar-price {
    display: block !important;

    width: 100% !important;
    max-width: 105px !important;

    overflow: hidden !important;

    white-space: nowrap !important;
    text-align: center !important;
    text-overflow: ellipsis !important;

    color: #e8ca65 !important;

    font-family:
      Georgia,
      "Times New Roman",
      serif !important;

    font-size: 15.5px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: -0.025em !important;

    text-shadow:
      0 0 14px rgba(212, 175, 55, 0.10) !important;
  }

  body.single-product:not(.wp-admin)
  .llce-mobile-buybar-price .amount {
    color: inherit !important;
    font: inherit !important;
  }

  body.single-product:not(.wp-admin)
  .llce-mobile-buybar-button {
    position: relative !important;

    width: 100% !important;
    min-height: 40px !important;

    box-sizing: border-box !important;
    overflow: hidden !important;

    padding: 8px 7px !important;

    border: 1px solid rgba(255, 237, 159, 0.44) !important;
    border-radius: 12px !important;

    background:
      linear-gradient(
        180deg,
        #f7e28d 0%,
        #dfbd4f 40%,
        #c99f2d 72%,
        #ad811a 100%
      ) !important;

    color: #07090d !important;

    font-size: 9.1px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    letter-spacing: 0.045em !important;
    text-transform: uppercase !important;

    text-shadow:
      0 1px 0 rgba(255, 255, 255, 0.20) !important;

    box-shadow:
      0 8px 20px rgba(212, 175, 55, 0.20),
      0 2px 7px rgba(0, 0, 0, 0.22),
      inset 0 1px 0 rgba(255, 255, 255, 0.46),
      inset 0 -1px 0 rgba(83, 56, 4, 0.30) !important;

    cursor: pointer !important;

    transition:
      transform 145ms ease,
      filter 145ms ease,
      box-shadow 145ms ease,
      opacity 145ms ease !important;
  }

  body.single-product:not(.wp-admin)
  .llce-mobile-buybar-button::before {
    content: "";

    position: absolute;
    top: 0;
    left: -45%;

    width: 34%;
    height: 100%;

    pointer-events: none;

    transform: skewX(-18deg);

    background:
      linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.22),
        transparent
      );

    opacity: 0.42;
  }

  body.single-product:not(.wp-admin)
  .llce-mobile-buybar-button:not(:disabled):active {
    transform: translateY(1px) scale(0.985) !important;

    box-shadow:
      0 4px 12px rgba(212, 175, 55, 0.16),
      inset 0 1px 0 rgba(255, 255, 255, 0.36) !important;
  }

  /*
   * Deliberate locked/limit state.
   * Still feels like part of the gold system rather than a generic
   * browser-disabled grey button.
   */
  body.single-product:not(.wp-admin)
  .llce-mobile-buybar-button:disabled {
    opacity: 1 !important;

    cursor: default !important;

    border-color: rgba(212, 175, 55, 0.19) !important;

    background:
      linear-gradient(
        180deg,
        rgba(80, 74, 63, 0.98),
        rgba(49, 47, 43, 0.99)
      ) !important;

    color: rgba(239, 229, 203, 0.78) !important;

    text-shadow: none !important;

    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.045),
      inset 0 0 18px rgba(212, 175, 55, 0.025),
      0 5px 14px rgba(0, 0, 0, 0.20) !important;

    filter: none !important;
  }

  body.single-product:not(.wp-admin)
  .llce-mobile-buybar-button:disabled::before {
    opacity: 0 !important;
  }

  body.single-product:not(.wp-admin)
  .llce-mobile-buybar-button.llce-mobile-buybar-loading {
    pointer-events: none !important;

    opacity: 0.76 !important;
  }

  body.single-product:not(.wp-admin)
  .llce-mobile-buybar-button.llce-mobile-buybar-loading::after {
    content: " …";
  }

  /* -------------------------------------------------------
   * Interaction states
   * ----------------------------------------------------- */

  body.single-product:not(.wp-admin)
  .llce-mobile-buybar-attention {
    border-color: rgba(138, 255, 0, 0.44) !important;

    box-shadow:
      0 22px 54px rgba(0, 0, 0, 0.62),
      0 0 0 1px rgba(138, 255, 0, 0.055),
      0 0 25px rgba(138, 255, 0, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
  }

  body.single-product:not(.wp-admin)
  .llce-mobile-buybar-hidden {
    transform:
      translateY(
        calc(
          100%
          + 30px
          + env(safe-area-inset-bottom, 0px)
        )
      ) !important;

    opacity: 0 !important;
    pointer-events: none !important;
  }
}

/*
 * Variable products can display a price range rather than a single price.
 * Keep the range comfortably inside the fixed purchase column without
 * reducing the stronger price treatment used by simple products.
 */
body.single-product.product-type-variable:not(.wp-admin)
.llce-mobile-buybar-price {
  max-width: 100% !important;

  font-size: 12.25px !important;
  letter-spacing: -0.035em !important;

  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* ---------------------------------------------------------
 * Small phones
 * ------------------------------------------------------- */

@media (max-width: 390px) {

  body.single-product:not(.wp-admin) {
    padding-bottom: calc(118px + env(safe-area-inset-bottom, 0px));
  }

  body.single-product:not(.wp-admin)
  .llce-mobile-buybar:not(.llce-mobile-buybar-disabled) {
    grid-template-columns: 52px minmax(0, 1fr) 102px !important;

    min-height: 94px !important;

    gap: 8px !important;
    padding: 9px !important;

    border-radius: 23px !important;
  }

  body.single-product:not(.wp-admin)
  .llce-mobile-buybar-thumb {
    width: 52px !important;
    height: 60px !important;

    padding: 3px !important;

    border-radius: 15px !important;
  }

  body.single-product:not(.wp-admin)
  .llce-mobile-buybar-thumb img {
    border-radius: 11px !important;
  }

  body.single-product:not(.wp-admin)
  .llce-mobile-buybar-title {
    font-size: 11.55px !important;
    line-height: 1.15 !important;
  }

  body.single-product:not(.wp-admin)
  .llce-mobile-buybar-stock {
    padding: 3px 6px !important;
    font-size: 7.9px !important;
  }

  body.single-product:not(.wp-admin)
  .llce-mobile-buybar-actions {
    width: 102px !important;
    min-width: 102px !important;

    gap: 7px !important;

    padding-left: 8px !important;
  }

  body.single-product:not(.wp-admin)
  .llce-mobile-buybar-price {
    max-width: 94px !important;

    font-size: 14px !important;
  }

  body.single-product:not(.wp-admin)
  .llce-mobile-buybar-button {
    min-height: 38px !important;

    padding-inline: 5px !important;

    font-size: 8.25px !important;
    letter-spacing: 0.025em !important;
  }

  body.single-product:not(.wp-admin)
  .llce-mobile-buybar-field select {
    height: 29px !important;
    min-height: 29px !important;

    font-size: 10px !important;
  }
}


/* =========================================================
   MOBILE BUYBAR — INLINE VALIDATION NOTICE
   Customer-facing errors belong to the purchase action that
   triggered them rather than leaking onto a later page.
========================================================= */

.llce-mobile-buybar-shell {
  position: relative;
}

.llce-mobile-buybar-shell .llce-mobile-buybar-notice {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: calc(100% + 8px);
  z-index: 8;

  box-sizing: border-box;

  padding: 11px 13px;

  border: 1px solid rgba(225, 191, 92, .30);
  border-radius: 10px;

  background:
    linear-gradient(
      180deg,
      rgba(25, 20, 25, .98),
      rgba(10, 11, 16, .99)
    );

  color: #f7f3ea;

  font-size: 12px;
  line-height: 1.45;
  font-weight: 700;

  box-shadow:
    0 14px 32px rgba(0, 0, 0, .42),
    inset 0 1px 0 rgba(255, 255, 255, .035);

  opacity: 0;
  transform: translateY(8px);

  transition:
    opacity .18s ease,
    transform .18s ease;

  pointer-events: none;
}

.llce-mobile-buybar-shell .llce-mobile-buybar-notice[hidden] {
  display: none !important;
}

.llce-mobile-buybar-shell .llce-mobile-buybar-notice.is-visible {
  opacity: 1;
  transform: translateY(0);
}


/* =========================================================
   MOBILE BUYBAR — QUANTITY CONTROL
========================================================= */

.llce-mobile-buybar .llce-mobile-buybar-quantity {
  display: inline-grid;
  grid-template-columns: 24px 32px 24px;
  align-items: center;

  width: 80px;
  height: 34px;

  border: 1px solid rgba(255,255,255,.10);
  border-radius: 8px;

  overflow: hidden;

  background: rgba(0,0,0,.20);
}

.llce-mobile-buybar .llce-mobile-buybar-qty-btn,
.llce-mobile-buybar .llce-mobile-buybar-qty-input {
  box-sizing: border-box;

  width: 100%;
  height: 100%;

  margin: 0;
  padding: 0;

  border: 0;
  border-radius: 0;

  background: transparent;

  color: #f7f3ea;

  font: inherit;
  text-align: center;
}

.llce-mobile-buybar .llce-mobile-buybar-qty-btn {
  cursor: pointer;

  color: #caff96;

  font-size: 16px;
  font-weight: 800;
}

.llce-mobile-buybar .llce-mobile-buybar-qty-btn:hover,
.llce-mobile-buybar .llce-mobile-buybar-qty-btn:focus-visible {
  background: rgba(138,255,0,.07);
  outline: none;
}

.llce-mobile-buybar .llce-mobile-buybar-qty-input {
  min-width: 0;

  border-left: 1px solid rgba(255,255,255,.08);
  border-right: 1px solid rgba(255,255,255,.08);

  font-size: 12px;
  font-weight: 800;

  appearance: textfield;
  -moz-appearance: textfield;
}

.llce-mobile-buybar .llce-mobile-buybar-qty-input::-webkit-outer-spin-button,
.llce-mobile-buybar .llce-mobile-buybar-qty-input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

@media (max-width: 390px) {
  .llce-mobile-buybar .llce-mobile-buybar-quantity {
    grid-template-columns: 22px 30px 22px;
    width: 74px;
  }
}


/* =========================================================
   MOBILE BUYBAR — OUTER POSITIONING SHELL
   The shell owns viewport positioning so validation messaging
   can float above the clipped visual buybar without affecting it.
========================================================= */

@media (min-width: 768px) {
  body.single-product:not(.wp-admin)
  .llce-mobile-buybar-shell {
    display: none !important;
  }
}

@media (max-width: 767px) {

  body.single-product:not(.wp-admin)
  .llce-mobile-buybar-shell {
    position: fixed !important;
    z-index: 2147482600 !important;

    left: max(12px, env(safe-area-inset-left, 0px)) !important;
    right: max(12px, env(safe-area-inset-right, 0px)) !important;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;

    width: auto !important;

    pointer-events: none !important;
  }

  /*
   * The visual bar now fills the positioned shell instead of
   * positioning itself against the viewport.
   */
  body.single-product:not(.wp-admin)
  .llce-mobile-buybar-shell
  .llce-mobile-buybar:not(.llce-mobile-buybar-disabled) {
    position: relative !important;

    left: auto !important;
    right: auto !important;
    bottom: auto !important;

    width: 100% !important;

    pointer-events: auto !important;
  }

  body.single-product:not(.wp-admin)
  .llce-mobile-buybar-shell
  .llce-mobile-buybar-notice {
    pointer-events: none !important;
  }
}