/* Chrome on phones and tablets changes the visible viewport height when its
   browser bars collapse. Keep every full-screen reader layer attached to that
   live height so the studio background cannot appear below the shadow. */
@supports (height: 100dvh) {
  .detail-page .detail-stage,
  .detail-page .scene,
  .detail-page .can-hit-targets {
    height: 100dvh;
  }
}

/* The native/browser splash already handles branding before the catalogue.
   Hiding this short-lived duplicate avoids a distracting partial logo flash
   while the public products request resolves. */
.catalog-state > img {
  display: none;
}

.catalog-product-loader {
  position: fixed;
  z-index: 1001;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 100svh;
  padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  color: #fffaf1;
  text-align: center;
  background:
    radial-gradient(circle at 50% 42%, rgb(255 121 45 / 10%), transparent 27%),
    #050505;
  opacity: 1;
  transition: opacity 280ms ease, transform 320ms cubic-bezier(.22, 1, .36, 1);
}

.catalog-product-loader.is-leaving {
  opacity: 0;
  transform: scale(1.02);
  pointer-events: none;
}

html.catalog-product-loading-active,
html.catalog-product-loading-active body {
  overflow: hidden;
}

.catalog-product-loader__copy {
  width: min(310px, 82vw);
}

.catalog-product-loader__copy h1 {
  font-size: clamp(34px, 8vw, 54px);
}

.catalog-product-loader__copy p {
  margin-top: 8px;
  color: #aaa;
  font-size: 13px;
}

.catalog-product-loader__track {
  position: relative;
  width: 100%;
  height: 2px;
  margin-top: 22px;
  overflow: hidden;
  background: rgb(255 255 255 / 13%);
}

.catalog-product-loader__track i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 42%;
  background: linear-gradient(90deg, transparent, #ff792d 30% 70%, transparent);
  animation: catalog-product-track 1.35s cubic-bezier(.45, 0, .55, 1) infinite;
}

@keyframes catalog-product-track {
  from { transform: translateX(-105%); }
  to { transform: translateX(345%); }
}

@media (prefers-reduced-motion: reduce) {
  .catalog-product-loader__track i {
    animation: none !important;
  }

  .catalog-product-loader__track i {
    width: 64%;
    background: #ff792d;
  }
}

.bsc-catalogue-preserved:not([hidden]) {
  display: contents;
}

html.catalog-loading-active,
html.catalog-loading-active body {
  overflow: hidden;
}

html.catalog-loading-active #root {
  visibility: hidden;
}

.catalog-beer-loader {
  --catalog-beer-fill: 10%;
  --catalog-beer-progress: 0%;
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(190px, 260px) minmax(280px, 520px);
  place-content: center;
  align-items: center;
  gap: clamp(42px, 8vw, 120px);
  min-height: 100svh;
  padding: max(32px, env(safe-area-inset-top)) max(28px, env(safe-area-inset-right)) max(32px, env(safe-area-inset-bottom)) max(28px, env(safe-area-inset-left));
  color: #fffaf1;
  background:
    radial-gradient(circle at 28% 54%, rgb(255 137 42 / 12%), transparent 26%),
    radial-gradient(circle at 74% 36%, rgb(255 211 139 / 7%), transparent 23%),
    #050505;
  opacity: 1;
  transition: opacity 360ms ease, transform 420ms cubic-bezier(.22, 1, .36, 1);
}

.catalog-beer-loader.is-leaving {
  opacity: 0;
  transform: scale(1.025);
  pointer-events: none;
}

.catalog-beer-loader__glass {
  position: relative;
  width: min(245px, 30vw);
  aspect-ratio: .72;
  filter:
    drop-shadow(0 32px 38px rgb(0 0 0 / 62%))
    drop-shadow(0 0 32px rgb(223 104 19 / 12%));
  transform: perspective(700px) rotateY(-4deg);
}

.catalog-beer-loader__glass::before,
.catalog-beer-loader__glass::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.catalog-beer-loader__glass::before {
  z-index: 9;
  top: 7px;
  right: 3%;
  left: 3%;
  height: 8px;
  border-top: 4px solid rgb(255 255 255 / 72%);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background: linear-gradient(90deg, rgb(255 255 255 / 26%), transparent 18% 78%, rgb(255 255 255 / 13%));
  box-shadow: inset 0 2px 0 rgb(255 255 255 / 13%);
  opacity: .88;
}

.catalog-beer-loader__glass::after {
  z-index: 8;
  right: 19%;
  bottom: 1px;
  left: 19%;
  height: 22px;
  border-bottom: 5px solid rgb(255 255 255 / 34%);
  border-radius: 0 0 18px 18px / 0 0 8px 8px;
  background:
    linear-gradient(90deg, rgb(255 255 255 / 18%), rgb(255 255 255 / 4%) 22% 72%, rgb(255 255 255 / 15%)),
    linear-gradient(180deg, transparent, rgb(255 255 255 / 18%));
  box-shadow: inset 0 -7px 8px rgb(255 255 255 / 9%);
  clip-path: polygon(5% 0, 95% 0, 100% 72%, 86% 100%, 14% 100%, 0 72%);
}

.catalog-beer-loader__glass-body {
  position: absolute;
  inset: 9px 3px 6px;
  overflow: hidden;
  clip-path: polygon(2% 0, 98% 0, 82% 100%, 18% 100%);
  background:
    linear-gradient(82deg, rgb(255 255 255 / 45%) 0 1.8%, transparent 2.7% 95.8%, rgb(255 255 255 / 25%) 97.5% 100%),
    linear-gradient(90deg, rgb(255 255 255 / 12%), transparent 16% 73%, rgb(255 255 255 / 7%)),
    linear-gradient(180deg, rgb(255 255 255 / 12%), transparent 16% 82%, rgb(255 255 255 / 24%));
  box-shadow:
    inset 14px 0 24px rgb(255 255 255 / 8%),
    inset -17px 0 28px rgb(0 0 0 / 22%),
    inset 0 -18px 15px rgb(255 255 255 / 12%);
}

.catalog-beer-loader__glass-body::after {
  content: "";
  position: absolute;
  z-index: 6;
  right: 15%;
  bottom: 0;
  left: 15%;
  height: 20px;
  border-top: 1px solid rgb(255 255 255 / 17%);
  border-radius: 3px 3px 13px 13px;
  background:
    linear-gradient(90deg, rgb(255 255 255 / 21%), transparent 23% 74%, rgb(255 255 255 / 15%)),
    linear-gradient(180deg, rgb(255 255 255 / 4%), rgb(255 255 255 / 28%));
  box-shadow: inset 0 -4px 6px rgb(255 255 255 / 13%);
  pointer-events: none;
}

.catalog-beer-loader__glass-highlight {
  position: absolute;
  z-index: 7;
  top: 8%;
  bottom: 10%;
  left: 10%;
  width: 12%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgb(255 255 255 / 46%), rgb(255 255 255 / 12%) 38%, rgb(255 255 255 / 2%));
  filter: blur(.6px);
  opacity: .8;
  transform: skewX(-2deg);
  pointer-events: none;
}

.catalog-beer-loader__liquid {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: var(--catalog-beer-fill);
  background:
    linear-gradient(90deg, rgb(117 43 5 / 45%), transparent 20% 70%, rgb(91 30 2 / 52%)),
    linear-gradient(180deg, #f6a02c 0%, #d96a0b 34%, #9d3603 100%);
  box-shadow: 0 -15px 34px rgb(255 174 64 / 26%), inset 0 0 30px rgb(255 198 92 / 18%);
  transition: height 480ms cubic-bezier(.2, .75, .25, 1);
}

.catalog-beer-loader__liquid::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(102deg, transparent 0 18px, rgb(255 222 159 / 5%) 20px 22px);
  animation: catalog-beer-shimmer 2.8s linear infinite;
}

.catalog-beer-loader__foam {
  position: absolute;
  z-index: 4;
  top: -29px;
  right: -5px;
  left: -5px;
  height: 58px;
  border-radius: 50% 50% 46% 44% / 45% 48% 54% 52%;
  background:
    radial-gradient(circle at 7% 58%, #fffdf3 0 10px, transparent 11px),
    radial-gradient(circle at 18% 32%, #fff9e4 0 14px, transparent 15px),
    radial-gradient(circle at 31% 63%, #fffdf3 0 16px, transparent 17px),
    radial-gradient(circle at 45% 27%, #fff8dd 0 17px, transparent 18px),
    radial-gradient(circle at 60% 61%, #fffdf4 0 18px, transparent 19px),
    radial-gradient(circle at 76% 31%, #fff7dc 0 16px, transparent 17px),
    radial-gradient(circle at 91% 58%, #fffdf3 0 14px, transparent 15px),
    linear-gradient(180deg, #fffdf3 0%, #f8e9bf 58%, #e9bd69 100%);
  box-shadow:
    inset 0 9px 11px rgb(255 255 255 / 48%),
    inset 0 -8px 13px rgb(198 126 31 / 17%),
    0 7px 15px rgb(255 233 184 / 18%);
  filter: drop-shadow(0 2px 2px rgb(113 54 5 / 20%));
  animation: catalog-beer-foam 2.4s ease-in-out infinite alternate;
}

.catalog-beer-loader__foam::before {
  content: "";
  position: absolute;
  inset: 7px 10px 17px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 11% 33%, rgb(187 139 67 / 23%) 0 1.5px, transparent 2px),
    radial-gradient(circle at 25% 67%, rgb(187 139 67 / 18%) 0 2px, transparent 2.5px),
    radial-gradient(circle at 42% 29%, rgb(187 139 67 / 20%) 0 1px, transparent 1.6px),
    radial-gradient(circle at 58% 65%, rgb(187 139 67 / 18%) 0 1.8px, transparent 2.3px),
    radial-gradient(circle at 73% 31%, rgb(187 139 67 / 20%) 0 1.4px, transparent 2px),
    radial-gradient(circle at 89% 61%, rgb(187 139 67 / 17%) 0 2px, transparent 2.6px);
}

.catalog-beer-loader__foam::after {
  content: "";
  position: absolute;
  right: 9%;
  bottom: -16px;
  left: 9%;
  height: 26px;
  background:
    radial-gradient(ellipse at 9% 0, #f6e3b6 0 5px, transparent 6px),
    radial-gradient(ellipse at 25% 0, #fff6dc 0 8px, transparent 9px),
    radial-gradient(ellipse at 48% 0, #f4dca8 0 5px, transparent 6px),
    radial-gradient(ellipse at 70% 0, #fff7df 0 9px, transparent 10px),
    radial-gradient(ellipse at 91% 0, #f1d79e 0 6px, transparent 7px);
  opacity: .92;
}

.catalog-beer-loader__liquid > span {
  position: absolute;
  z-index: 2;
  bottom: -16px;
  width: 5px;
  height: 5px;
  border: 1px solid rgb(255 244 205 / 78%);
  border-radius: 50%;
  box-shadow: inset 0 0 2px rgb(255 255 255 / 52%);
  animation: catalog-beer-bubble 2.6s linear infinite;
}

.catalog-beer-loader__liquid > span:nth-of-type(1) { left: 18%; animation-delay: -.4s; }
.catalog-beer-loader__liquid > span:nth-of-type(2) { left: 32%; width: 3px; height: 3px; animation-delay: -1.7s; animation-duration: 2.1s; }
.catalog-beer-loader__liquid > span:nth-of-type(3) { left: 47%; animation-delay: -2.2s; animation-duration: 3.1s; }
.catalog-beer-loader__liquid > span:nth-of-type(4) { left: 63%; width: 4px; height: 4px; animation-delay: -.9s; }
.catalog-beer-loader__liquid > span:nth-of-type(5) { left: 76%; width: 3px; height: 3px; animation-delay: -2.8s; animation-duration: 2.3s; }
.catalog-beer-loader__liquid > span:nth-of-type(6) { left: 86%; animation-delay: -1.3s; animation-duration: 3.4s; }

.catalog-beer-loader__copy {
  max-width: 500px;
}

.catalog-beer-loader__copy .eyebrow {
  color: #cdbda9;
  margin-bottom: 18px;
}

.catalog-beer-loader__copy h1 {
  margin: 0;
  font-size: clamp(43px, 6.8vw, 86px);
  line-height: .92;
  text-transform: uppercase;
}

.catalog-beer-loader__copy p {
  min-height: 1.5em;
  margin: 24px 0 17px;
  color: #d7ccbd;
  font-size: clamp(13px, 1.2vw, 16px);
  line-height: 1.5;
}

.catalog-beer-loader__progress {
  width: min(100%, 420px);
  height: 5px;
  overflow: hidden;
  background: #33271e;
  border-radius: 999px;
  box-shadow: inset 0 1px 2px rgb(0 0 0 / 55%);
}

.catalog-beer-loader__progress i {
  display: block;
  width: var(--catalog-beer-progress);
  height: 100%;
  background: linear-gradient(90deg, #c75507, #ffb13d 72%, #fff0b8);
  border-radius: inherit;
  box-shadow: 0 0 16px rgb(255 154 42 / 55%);
  transition: width 420ms ease;
}

.catalog-beer-loader__copy strong {
  display: block;
  margin-top: 12px;
  color: #fff3dc;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

@keyframes catalog-beer-bubble {
  0% { transform: translate3d(0, 0, 0) scale(.7); opacity: 0; }
  12% { opacity: .8; }
  82% { opacity: .65; }
  100% { transform: translate3d(8px, -320px, 0) scale(1.15); opacity: 0; }
}

@keyframes catalog-beer-foam {
  from { transform: translateY(1px) scaleX(1.01); }
  to { transform: translateY(-2px) scaleX(.99); }
}

@keyframes catalog-beer-shimmer {
  to { transform: translateX(42px); }
}

@media (max-width: 700px) {
  .catalog-beer-loader {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 25px;
    padding: max(22px, env(safe-area-inset-top)) max(22px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(22px, env(safe-area-inset-left));
    text-align: center;
  }

  .catalog-beer-loader__glass {
    width: min(154px, 40vw);
    margin: 0 auto;
  }

  .catalog-beer-loader__copy .eyebrow {
    justify-content: center;
    margin-bottom: 11px;
  }

  .catalog-beer-loader__copy h1 {
    font-size: clamp(37px, 11vw, 54px);
  }

  .catalog-beer-loader__copy p {
    min-height: 3em;
    margin: 15px auto 12px;
    max-width: 31ch;
    font-size: 13px;
  }

  .catalog-beer-loader__progress {
    margin: 0 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .catalog-beer-loader,
  .catalog-beer-loader__liquid,
  .catalog-beer-loader__progress i {
    transition: none;
  }

  .catalog-beer-loader__foam,
  .catalog-beer-loader__liquid::after,
  .catalog-beer-loader__liquid > span {
    animation: none;
  }
}

/* Capacitor iOS renders the WebView edge to edge. Keep the studio backgrounds
   full bleed, but move every fixed navigation control below the system bars. */
html.catalog-native-app {
  --catalog-safe-top: env(safe-area-inset-top, 0px);
  --catalog-safe-right: env(safe-area-inset-right, 0px);
  --catalog-safe-bottom: env(safe-area-inset-bottom, 0px);
  --catalog-safe-left: env(safe-area-inset-left, 0px);
}

html.catalog-native-app .nav {
  height: calc(108px + var(--catalog-safe-top));
  padding-top: calc(20px + var(--catalog-safe-top));
  padding-right: calc(var(--gutter) + var(--catalog-safe-right));
  padding-left: calc(var(--gutter) + var(--catalog-safe-left));
}

html.catalog-native-app .hero-title {
  top: calc(140px + var(--catalog-safe-top));
  left: calc(var(--gutter) + var(--catalog-safe-left));
  right: calc(var(--gutter) + var(--catalog-safe-right));
}

html.catalog-native-app .menu-panel {
  top: calc(107px + var(--catalog-safe-top));
  right: calc(var(--gutter) + var(--catalog-safe-right));
}

html.catalog-native-app .detail-header {
  height: calc(clamp(66px, 10svh, 99px) + var(--catalog-safe-top));
  padding-top: calc(11px + var(--catalog-safe-top));
  padding-right: calc(var(--edge) + var(--catalog-safe-right));
  padding-left: calc(var(--edge) + var(--catalog-safe-left));
}

html.catalog-native-app .detail-header .travel-line {
  top: calc(9px + var(--catalog-safe-top));
  left: calc(var(--edge) + var(--catalog-safe-left));
  right: calc(var(--edge) + var(--catalog-safe-right));
}

html.catalog-native-app .reader-rail {
  right: calc(var(--edge) + var(--catalog-safe-right));
}

html.catalog-native-app .hero-bottom {
  bottom: calc(64px + var(--catalog-safe-bottom));
}

html.catalog-native-app footer {
  padding-bottom: calc(24px + var(--catalog-safe-bottom));
}

@media (max-width: 700px) and (orientation: portrait) {
  html.catalog-native-app .detail-header {
    height: calc(62px + var(--catalog-safe-top));
    padding-top: calc(8px + var(--catalog-safe-top));
  }

  html.catalog-native-app .reader-rail {
    right: calc(5px + var(--catalog-safe-right));
  }
}

/* Keep the visible arrow compact while giving mouse and touch users a
   forgiving target around it. */
.arrow {
  width: 64px;
  height: 64px;
  margin-top: -10px;
  background: transparent;
  border: 0;
}

.arrow::before {
  content: "";
  position: absolute;
  inset: 10px;
  background: var(--ink);
  border: 1px solid #777;
  border-radius: 6px;
  transition: background .2s, border-color .2s;
}

.arrow svg {
  position: relative;
  z-index: 1;
  pointer-events: none;
}

.arrow:hover,
.arrow:focus-visible {
  color: #000;
  background: transparent;
}

.arrow:hover::before,
.arrow:focus-visible::before {
  background: #fff;
  border-color: #fff;
}

.arrow.prev {
  left: calc(var(--gutter) - 10px);
}

.arrow.next {
  right: calc(var(--gutter) - 10px);
}

@media (max-width: 700px) {
  .arrow {
    width: 56px;
    height: 56px;
    margin-top: -6px;
  }

  .arrow::before {
    inset: 6px;
  }

  .arrow.prev {
    left: 10px;
  }

  .arrow.next {
    right: 10px;
  }
}

/* Arrows and direct can selection are the carousel navigation. The numbered
   pagination duplicated those controls and pushed the product action down. */
.carousel-pagination {
  display: none !important;
}

/* The arrows and the cans already communicate the current selection. */
.collection-caption {
  display: none !important;
}

/* Automatic rotation is part of the catalogue presentation. Keep the useful
   "Face" reset on larger screens, but remove the redundant pause control. */
.hero .rotation-tools > button:first-child {
  display: none !important;
}

/* The product passport now owns the story and composition. Keep the catalogue
   focused on the carousel, the original label and the club without retaining
   two empty viewport-sized scroll stages. */
.story-section,
.inside-section {
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  visibility: hidden !important;
  overflow: hidden !important;
}

.menu-panel > button:nth-of-type(2),
.menu-panel > button:nth-of-type(3) {
  display: none !important;
}

#root {
  transition: opacity 180ms ease, transform 180ms ease;
}

html.catalog-passport-transition #root {
  opacity: 0;
  transform: scale(.985);
}

@media (prefers-reduced-motion: reduce) {
  #root {
    transition: none;
  }
}

.nav-inner.catalog-has-exit {
  grid-template-columns: 1fr auto auto auto;
  gap: 18px;
}

.catalog-exit {
  order: 4;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: #fff;
  font-size: 28px;
  font-weight: 300;
  line-height: 1;
  background: transparent;
  border: 1px solid rgb(255 255 255 / 42%);
  border-radius: 50%;
}

.catalog-exit:hover,
.catalog-exit:focus-visible {
  color: #050505;
  background: #fff;
  border-color: #fff;
}

@media (max-width: 700px) {
  .nav-inner.catalog-has-exit {
    gap: 10px;
  }
}

.reader-rail .reader-step-control {
  font-size: 19px;
  font-weight: 600;
  line-height: 1;
}

.reader-rail .reader-step-control span {
  transform: translateY(-1px);
}

.reader-rail .reader-step-control:disabled {
  opacity: .28;
  cursor: default;
}

.hero-bottom {
  bottom: 64px;
}

@media (max-width: 700px) and (orientation: portrait) {
  .hero-bottom {
    bottom: max(
      22px,
      calc(env(safe-area-inset-bottom) + 22px),
      calc(760px - 100svh + 16px)
    );
  }

  html.catalog-native-app .hero-bottom {
    bottom: max(
      calc(var(--catalog-safe-bottom) + 22px),
      calc(760px - 100svh + 16px + var(--catalog-safe-bottom))
    );
  }
}