/* r57 local preview: blue Home/Shop footer mark and homepage mobile purchase dock only.
   Load from site/assets after the r55/r56 preview styles. The logo mask is the
   same supplied bow artwork used by the existing r50 scoop-page footer. */
html[data-garden-theme="blue"] body:is(.r27-home, .r35-shop) .r28-footer .r15-footer-brand > a {
  position: relative;
  display: block;
  width: 136px;
  max-width: 100%;
  aspect-ratio: 958 / 628;
  color: var(--garden-ink, #146be1);
}

/* Keep the existing image's alt text and linked accessible name intact. */
html[data-garden-theme="blue"] body:is(.r27-home, .r35-shop) .r28-footer .r15-footer-brand > a > img {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: contain;
  opacity: 0;
}

html[data-garden-theme="blue"] body:is(.r27-home, .r35-shop) .r28-footer .r15-footer-brand > a::before {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  -webkit-mask: url("ribbelle-bow-logo-mask-r50.png") center / contain no-repeat;
  mask: url("ribbelle-bow-logo-mask-r50.png") center / contain no-repeat;
  pointer-events: none;
}

html[data-garden-theme="blue"] body:is(.r27-home, .r35-shop) .r28-footer .r15-footer-brand > a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
  border-radius: 4px;
}

@media (max-width: 899px) {
  html[data-garden-theme="blue"] body.r27-home {
    padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px));
  }

  html[data-garden-theme="blue"] body.r27-home .sticky {
    gap: 12px;
    padding: 5px 14px calc(5px + env(safe-area-inset-bottom, 0px));
    background: rgba(239, 248, 255, .97);
    border-top: 1px solid #c5dff3;
    box-shadow: 0 -2px 12px rgba(67, 126, 178, .05);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }

  html[data-garden-theme="blue"] body.r27-home .sticky .sticky-choose {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 8px;
    align-content: center;
    align-items: center;
    column-gap: 10px;
    row-gap: 1px;
    min-width: 0;
    min-height: 44px;
    font: 400 14px / 1.35 Arial, Helvetica, sans-serif;
    letter-spacing: 0;
    color: #146be1;
    text-align: start;
  }

  html[data-garden-theme="blue"] body.r27-home .sticky .sticky-choose span {
    grid-column: 1;
    grid-row: 2;
    margin: 0;
    font: 400 11px / 1.35 Arial, Helvetica, sans-serif;
    color: #4d6780;
    letter-spacing: 0;
  }

  html[data-garden-theme="blue"] body.r27-home .sticky .sticky-choose::after {
    content: "";
    grid-column: 2;
    grid-row: 1 / 3;
    width: 6px;
    height: 6px;
    border-top: 1.5px solid currentColor;
    border-inline-end: 1.5px solid currentColor;
    transform: rotate(45deg);
    justify-self: center;
  }

  html[data-garden-theme="blue"][dir="rtl"] body.r27-home .sticky .sticky-choose::after {
    transform: rotate(-45deg);
  }

  html[data-garden-theme="blue"] body.r27-home .sticky .basket-button {
    flex: 0 0 auto;
    gap: 5px;
    min-width: 66px;
    min-height: 44px;
    padding: 4px 8px;
    border: 1px solid #a6cff0;
    border-radius: 14px;
    background: #e0f0fc;
    color: #146be1;
    box-shadow: none;
  }

  html[data-garden-theme="blue"] body.r27-home .sticky .basket-button:hover {
    background: #d2e9fa;
    border-color: #76b7e7;
    color: #146be1;
  }

  html[data-garden-theme="blue"] body.r27-home .sticky .basket-button .site-basket-icon {
    width: 26px;
    height: 26px;
  }

  html[data-garden-theme="blue"] body.r27-home .sticky .basket-button [data-cart-count] {
    min-width: 19px;
    height: 19px;
    padding: 0 4px;
    border: 0;
    background: #146be1;
    color: #fff;
    font: 600 10px / 1 Arial, Helvetica, sans-serif;
  }

  html[data-garden-theme="blue"] body.r27-home .sticky :is(.sticky-choose, .basket-button):focus-visible {
    outline: 2px solid #146be1;
    outline-offset: 2px;
  }
}

@media (max-width: 600px) {
  html[data-garden-theme="blue"] body:is(.r27-home, .r35-shop) .r28-footer .r15-footer-brand > a {
    width: 124px;
  }
}