.lmd-dock-spacer,
.lmd-dock {
  --lmd-ink: #171716;
  --lmd-muted: #6d6963;
  --lmd-paper: #fffaf4;
  --lmd-neon: #dfff00;
  --lmd-whatsapp: #25d366;
  --lmd-gift-a: #ff4fc8;
  --lmd-gift-b: #804eff;
  display: none;
}

/*
 * Registered quick actions must remain reachable while one of their managed
 * overlays is open. The default dock layer stays deliberately low; it is
 * raised only for the independent WhatsApp, BOOM and Gifts surfaces.
 */
html:has(.owa-sheet:not([hidden])) .lmd-dock,
html:has(.lrb-modal:not([hidden])) .lmd-dock,
html.gpc-page-locked .lmd-dock {
  z-index: 2147483000;
}

@media (max-width: 767.98px) {
  body.page-product .product-btns {
    background: transparent;
    bottom: auto;
    box-shadow: none;
    left: auto;
    margin-top: 12px;
    max-height: none;
    padding: 0;
    position: static;
    right: auto;
    z-index: auto;
  }

  .lmd-dock-spacer {
    display: block;
    height: calc(82px + max(11px, env(safe-area-inset-bottom, 0px)));
    pointer-events: none;
    width: 100%;
  }

  .lmd-dock-spacer[data-mobile-empty="on"] {
    display: none;
  }

  .lmd-dock {
    --lmd-safe: max(11px, env(safe-area-inset-bottom, 0px));
    --lmd-height: calc(82px + var(--lmd-safe));
    align-items: end;
    bottom: 0;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(var(--lmd-mobile-count, 5), minmax(0, 1fr));
    height: var(--lmd-height);
    isolation: isolate;
    left: 0;
    padding: 13px max(10px, env(safe-area-inset-right, 0px)) var(--lmd-safe) max(10px, env(safe-area-inset-left, 0px));
    pointer-events: none;
    position: fixed;
    right: 0;
    width: 100%;
    z-index: 1038;
  }

  /* A top anchor avoids stale bottom-fixed browser-toolbar anchoring on iOS.
     The shared height includes the existing safe area; no extra blank strip. */
  .lmd-dock[data-lmd-viewport-anchor] {
    bottom: auto;
    top: calc(var(--lmd-viewport-bottom) - var(--lmd-height));
  }

  .lmd-dock[data-mobile-empty="on"] {
    display: none;
  }

  /* Keep each overlay's final content above the raised mobile navigation. */
  html:has(.lmd-dock:not([data-mobile-empty="on"])):has(.owa-sheet:not([hidden])) .owa-sheet__panel {
    padding-bottom: calc(82px + max(24px, env(safe-area-inset-bottom, 0px)));
  }

  html:has(.lmd-dock:not([data-mobile-empty="on"])):has(.lrb-modal:not([hidden])) .lrb-product-content {
    padding-bottom: calc(102px + env(safe-area-inset-bottom, 0px));
  }

  html.gpc-page-locked:has(.lmd-dock:not([data-mobile-empty="on"])) .gpc-popup__footer {
    padding-bottom: calc(82px + max(15px, env(safe-area-inset-bottom, 0px)));
  }

  .lmd-dock__bridge {
    -webkit-backdrop-filter: blur(18px) saturate(1.06);
    backdrop-filter: blur(18px) saturate(1.06);
    background: rgba(255, 255, 255, .91);
    border-top: 1px solid rgba(17, 17, 15, .08);
    bottom: 0;
    box-shadow: 0 -12px 35px rgba(20, 20, 18, .06);
    height: 100%;
    left: 0;
    pointer-events: auto;
    position: absolute;
    right: 0;
    z-index: -2;
  }

  .lmd-dock__action {
    -webkit-tap-highlight-color: transparent;
    align-items: center;
    appearance: none;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    box-sizing: border-box;
    color: var(--lmd-muted);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: 62px;
    justify-content: center;
    justify-self: stretch;
    margin: 0;
    min-height: 44px;
    min-width: 44px;
    order: var(--lmd-mobile-order, 999);
    overflow: visible;
    padding: 0 1px;
    pointer-events: auto;
    position: relative;
    text-decoration: none;
    touch-action: manipulation;
    transition: color .18s ease, filter .18s ease, transform .2s cubic-bezier(.2, .75, .25, 1);
    user-select: none;
  }

  .lmd-dock__action[data-lmd-mobile="off"] {
    display: none;
  }

  .lmd-dock__action:visited {
    color: var(--lmd-muted);
  }

  .lmd-dock__action:hover,
  .lmd-dock__action:focus {
    color: var(--lmd-ink);
    text-decoration: none;
  }

  .lmd-dock__icon {
    align-items: center;
    display: flex;
    height: 29px;
    justify-content: center;
    position: relative;
    width: 42px;
    z-index: 1;
  }

  .lmd-dock__icon svg {
    fill: none;
    height: 25px;
    overflow: visible;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
    vector-effect: non-scaling-stroke;
    width: 25px;
  }

  .lmd-dock__icon--whatsapp,
  .lmd-dock__icon--gifts {
    border: 0;
    border-radius: 12px;
    color: #fff;
    height: 31px;
    width: 40px;
  }

  .lmd-dock__icon--whatsapp {
    background: var(--lmd-whatsapp);
    box-shadow: 0 5px 13px rgba(37, 211, 102, .22);
  }

  .lmd-dock__icon--whatsapp svg {
    height: 20px;
    stroke-width: 1.8;
    width: 20px;
  }

  .lmd-dock__icon--whatsapp path {
    fill: currentColor;
  }

  .lmd-dock__icon--gifts {
    background: linear-gradient(135deg, #ee4b93 0%, var(--lmd-gift-b) 100%);
    box-shadow: 0 5px 14px rgba(128, 78, 255, .22);
  }

  .lmd-dock__icon--gifts svg {
    height: 20px;
    stroke-width: 1.8;
    width: 20px;
  }

  .lmd-dock__icon--ship_to {
    background: transparent;
    border: 0;
    border-radius: 12px;
    box-shadow: none;
    color: inherit;
    height: 31px;
    overflow: hidden;
    width: 40px;
  }

  .lmd-dock__destination-flag {
    align-items: center;
    display: flex;
    font-size: 28px;
    height: 100%;
    justify-content: center;
    line-height: 1;
    overflow: hidden;
    width: 100%;
  }

  .lmd-dock__destination-flag img {
    border-radius: inherit;
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
  }

  .lmd-dock__action--ship_to .lmd-dock__label {
    color: #3157ff;
    font-weight: 700;
  }

  .lmd-dock__action--boom {
    align-self: end;
    color: var(--lmd-ink);
    gap: 6px;
    transform: translateY(-29px);
    z-index: 2;
  }

  .lmd-dock__action--boom .lmd-dock__icon {
    background: #ddff00;
    border: 5px solid #fff;
    border-radius: 50%;
    box-shadow: 0 10px 27px rgba(70, 82, 0, .22);
    box-sizing: border-box;
    flex: 0 0 67px;
    height: 67px;
    overflow: hidden;
    width: 67px;
  }

  .lmd-dock__action--boom .lmd-dock__icon::after {
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .9) 46%, transparent 62%);
    content: "";
    inset: -35% -75%;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    transform: translateX(-44%) rotate(8deg);
  }

  .lmd-dock__action--boom .lmd-dock__icon svg {
    height: 25px;
    stroke-width: 2.25;
    width: 25px;
  }

  .lmd-dock__label {
    display: block;
    flex: 0 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    font-size: 8px;
    font-weight: 590;
    letter-spacing: .015em;
    line-height: 1.05;
    max-width: 100%;
    overflow: hidden;
    position: relative;
    text-overflow: ellipsis;
    white-space: nowrap;
    z-index: 1;
  }

  .lmd-dock__action--boom .lmd-dock__label {
    color: var(--lmd-ink);
    font-weight: 820;
    letter-spacing: .02em;
    max-width: 52px;
  }

  .lmd-dock__action:focus-visible {
    border-radius: 12px;
    outline: 2px solid var(--lmd-ink);
    outline-offset: 1px;
  }

  .lmd-dock__action--boom:focus-visible {
    outline: none;
  }

  .lmd-dock__action--boom:focus-visible .lmd-dock__icon {
    box-shadow: 0 0 0 2px var(--lmd-ink), 0 0 0 7px #fff, 0 10px 27px rgba(70, 82, 0, .22);
  }

  .lmd-dock[data-motion="on"] .lmd-dock__icon--whatsapp {
    animation: lmd-wa-pulse 6.4s ease-in-out infinite;
  }

  .lmd-dock[data-motion="on"] .lmd-dock__action--boom {
    animation: lmd-boom-breathe 4.9s ease-in-out infinite;
  }

  .lmd-dock[data-motion="on"] .lmd-dock__icon--gifts {
    animation: lmd-gift-tilt 6.8s ease-in-out -2.2s infinite;
  }

  .lmd-dock[data-motion="on"] .lmd-dock__action--boom .lmd-dock__icon::after {
    animation: lmd-sheen 8.4s ease-in-out 1.6s infinite;
  }

  .lmd-dock__action:active,
  .lmd-dock__action.is-pressed {
    filter: brightness(.98);
    transform: translate3d(0, 1px, 0) scale(.94) !important;
  }

  .lmd-dock__action--boom:active,
  .lmd-dock__action--boom.is-pressed {
    animation: none !important;
    transform: translateY(-27px) scale(.94) !important;
  }
}

@media (min-width: 768px) {
  body:has(.lmd-dock[data-desktop-actions="on"] [data-lmd-code="ochirly.gifts.open"][data-lmd-desktop="on"]) .gpc-popup-reopen,
  body:has(.lmd-dock[data-desktop-actions="on"] [data-lmd-code="ochirly.boom.open"][data-lmd-desktop="on"]) .lrb-widget > .lrb-button {
    display: none !important;
  }

  .lmd-dock[data-desktop-actions="on"]:not([data-desktop-empty="on"]) {
    -webkit-backdrop-filter: blur(14px) saturate(1.05);
    backdrop-filter: blur(14px) saturate(1.05);
    align-items: stretch;
    background: rgba(255, 250, 244, .91);
    border: 1px solid rgba(23, 23, 22, .1);
    border-radius: 29px;
    bottom: calc(var(--lmd-desktop-bottom, 28px) + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 15px 35px rgba(31, 24, 14, .16), inset 0 1px 0 rgba(255, 255, 255, .9);
    box-sizing: border-box;
    display: grid;
    gap: 7px;
    grid-template-columns: 1fr;
    isolation: isolate;
    padding: 10px 7px;
    position: fixed;
    right: calc(var(--lmd-desktop-right, 24px) + env(safe-area-inset-right, 0px));
    transform: scale(var(--lmd-desktop-scale, 1));
    transform-origin: right bottom;
    width: 78px;
    z-index: 1038;
  }

  .lmd-dock[data-desktop-actions="on"] .lmd-dock__bridge,
  .lmd-dock[data-desktop-actions="on"] .lmd-dock__action[data-lmd-desktop="off"] {
    display: none;
  }

  .lmd-dock[data-desktop-actions="on"] .lmd-dock__action {
    align-items: center;
    appearance: none;
    background: transparent;
    border: 0;
    border-radius: 16px;
    box-shadow: none;
    box-sizing: border-box;
    color: var(--lmd-muted);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 5px;
    justify-content: center;
    margin: 0;
    min-height: 62px;
    min-width: 44px;
    order: var(--lmd-desktop-order, 999);
    padding: 2px 0;
    position: relative;
    text-decoration: none;
    touch-action: manipulation;
    transition: color .18s ease, filter .18s ease, transform .18s ease;
    user-select: none;
  }

  .lmd-dock[data-desktop-actions="on"] .lmd-dock__action:hover,
  .lmd-dock[data-desktop-actions="on"] .lmd-dock__action:focus {
    color: var(--lmd-ink);
    text-decoration: none;
    transform: translateY(-1px);
  }

  .lmd-dock[data-desktop-actions="on"] .lmd-dock__action:active,
  .lmd-dock[data-desktop-actions="on"] .lmd-dock__action.is-pressed {
    filter: brightness(.98);
    transform: scale(.94);
  }

  .lmd-dock[data-desktop-actions="on"] .lmd-dock__action:focus-visible {
    outline: 2px solid var(--lmd-ink);
    outline-offset: 1px;
  }

  .lmd-dock[data-desktop-actions="on"] .lmd-dock__icon {
    align-items: center;
    border-radius: 12px;
    color: #fff;
    display: flex;
    height: 33px;
    justify-content: center;
    position: relative;
    width: 44px;
  }

  .lmd-dock[data-desktop-actions="on"] .lmd-dock__icon--neutral {
    color: var(--lmd-muted);
  }

  .lmd-dock[data-desktop-actions="on"] .lmd-dock__icon svg {
    fill: none;
    height: 21px;
    overflow: visible;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
    width: 21px;
  }

  .lmd-dock[data-desktop-actions="on"] .lmd-dock__icon--gifts {
    background: linear-gradient(135deg, var(--lmd-gift-a), var(--lmd-gift-b));
    box-shadow: 0 5px 14px rgba(128, 78, 255, .24);
  }

  .lmd-dock[data-desktop-actions="on"] .lmd-dock__icon--whatsapp {
    background: var(--lmd-whatsapp);
    box-shadow: 0 5px 13px rgba(37, 211, 102, .24);
  }

  .lmd-dock[data-desktop-actions="on"] .lmd-dock__icon--whatsapp path {
    fill: currentColor;
    stroke: none;
  }

  .lmd-dock[data-desktop-actions="on"] .lmd-dock__icon--ship_to {
    background: transparent;
    box-shadow: none;
    color: var(--lmd-muted);
    height: 33px;
    overflow: hidden;
    width: 44px;
  }

  .lmd-dock[data-desktop-actions="on"] .lmd-dock__destination-flag {
    align-items: center;
    display: flex;
    font-size: 28px;
    height: 100%;
    justify-content: center;
    line-height: 1;
    overflow: hidden;
    width: 100%;
  }

  .lmd-dock[data-desktop-actions="on"] .lmd-dock__destination-flag img {
    border-radius: inherit;
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
  }

  .lmd-dock[data-desktop-actions="on"] .lmd-dock__action--ship_to .lmd-dock__label {
    color: #3157ff;
    font-weight: 700;
  }

  .lmd-dock[data-desktop-actions="on"] .lmd-dock__action--boom {
    color: var(--lmd-ink);
    min-height: 78px;
  }

  .lmd-dock[data-desktop-actions="on"] .lmd-dock__action--boom .lmd-dock__icon {
    background: var(--lmd-neon);
    border: 5px solid var(--lmd-paper);
    border-radius: 50%;
    box-shadow: 0 9px 24px rgba(70, 82, 0, .25);
    box-sizing: border-box;
    color: var(--lmd-ink);
    height: 62px;
    overflow: hidden;
    width: 62px;
  }

  .lmd-dock[data-desktop-actions="on"] .lmd-dock__action--boom .lmd-dock__icon::after {
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .88) 46%, transparent 62%);
    content: "";
    inset: -35% -75%;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    transform: translateX(-44%) rotate(8deg);
  }

  .lmd-dock[data-desktop-actions="on"] .lmd-dock__action--boom .lmd-dock__icon svg {
    height: 24px;
    stroke-width: 2.25;
    width: 24px;
  }

  .lmd-dock[data-desktop-actions="on"] .lmd-dock__label {
    color: currentColor;
    display: block;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    font-size: 8px;
    font-weight: 590;
    letter-spacing: .01em;
    line-height: 1.05;
    max-width: 64px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .lmd-dock[data-desktop-actions="on"][data-motion="on"] .lmd-dock__icon--whatsapp {
    animation: lmd-wa-pulse 6.4s ease-in-out infinite;
  }

  .lmd-dock[data-desktop-actions="on"][data-motion="on"] .lmd-dock__icon--gifts {
    animation: lmd-gift-tilt 6.8s ease-in-out -2.2s infinite;
  }

  .lmd-dock[data-desktop-actions="on"][data-motion="on"] .lmd-dock__action--boom .lmd-dock__icon {
    animation: lmd-desktop-boom-breathe 4.9s ease-in-out infinite;
  }

  .lmd-dock[data-desktop-actions="on"][data-motion="on"] .lmd-dock__action--boom .lmd-dock__icon::after {
    animation: lmd-sheen 8.4s ease-in-out 1.6s infinite;
  }

  /*
   * :has() is required to hide the earlier header fallback based on a dock
   * rendered near the end of the document. On older browsers, keep that
   * working header trigger and suppress only the duplicate desktop dock item.
   */
  @supports not selector(body:has(.lmd-dock)) {
    .lmd-dock[data-desktop-actions="on"]
    .lmd-dock__action[data-lmd-code="ochirly.ship_to.open"][data-lmd-desktop="on"] {
      display: none !important;
    }
  }
}

@media (max-width: 359.98px) {
  .lmd-dock {
    padding-left: max(4px, env(safe-area-inset-left, 0px));
    padding-right: max(4px, env(safe-area-inset-right, 0px));
  }

  .lmd-dock__action {
    padding-inline: 0;
  }

  .lmd-dock__label {
    font-size: 7.4px;
    letter-spacing: 0;
  }
}

@keyframes lmd-wa-pulse {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-1px) scale(1.025); }
}

@keyframes lmd-gift-tilt {
  0%, 100% { transform: translateY(0) rotate(0); }
  48% { transform: translateY(-1.5px) rotate(1.6deg); }
}

@keyframes lmd-boom-breathe {
  0%, 100% { transform: translateY(-29px) scale(1); }
  50% { transform: translateY(-31px) scale(1.012); }
}

@keyframes lmd-desktop-boom-breathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-1px) scale(1.012); }
}

@keyframes lmd-sheen {
  0%, 66%, 100% { opacity: 0; transform: translateX(-44%) rotate(8deg); }
  72% { opacity: .82; }
  82% { opacity: 0; transform: translateX(48%) rotate(8deg); }
}

@media print {
  .lmd-dock-spacer,
  .lmd-dock {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lmd-dock *,
  .lmd-dock *::before,
  .lmd-dock *::after {
    animation: none !important;
    transition-duration: .01ms !important;
  }
}
