/* Logo – top centre, fixed */
.logo-fixed {
  position: fixed;
  top: calc(var(--spacing-m) - 15px);
  left: 50%;
  transform: translateX(-50%);
  transform-origin: 50% 0; /* scale from top-center so top edge stays put */
  z-index: 199; /* 1 below .page-content (z-index: 10) so text overlaps logo */
  line-height: 0;
  transition:
    opacity var(--transition-fast),
    transform var(--transition-medium);
}

.logo-fixed--scrolled {
  transform: translateX(-50%) scale(0.6);
}

.clickable-wrapper {
  display: block;
  pointer-events: auto !important; /* Ensure interactivity */
  cursor: pointer !important; /* Ensure hand icon for links */
}
.clickable-wrapper svg {
  display: block;
  pointer-events: none; /* Let clicks pass through to wrapper */
}

.logo-fixed:hover {
  opacity: 0.8;
  text-decoration: none;
}

.logo-img {
  width: clamp(var(--logo-min), var(--logo-size), var(--logo-max));
  height: auto;
  display: block;
}

.sticky-product-name {
  position: fixed;
  top: calc(var(--spacing-m) + 72px);
  left: 50%;
  z-index: 198;
  /*
  width: min(100vw, 520px);
  */
  width: 100%;
  padding: 0.42rem var(--spacing-m);
  box-sizing: border-box;
  color: var(--ci-highlight-color);
  text-align: center;
  pointer-events: none;
  opacity: 0;
  background: var(--ci-background-color);
  box-shadow: 0 12px 18px rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(6px);
  transform: translate(-50%, -8px);
  transition:
    opacity var(--transition-fast),
    transform var(--transition-medium),
    color var(--transition-medium);
}

.sticky-product-name.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.sticky-product-name h3 {
  display: inline-flex;
  max-width: 100%;
  margin: 0;
  padding: 0.36rem 0.95rem;
  color: inherit;
  font-size: clamp(0.78rem, 1.6vw, 1rem);
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Smooth fill transitions for the inlined SVG logo */
#siteLogo .c,
#siteLogo .e {
  transition: fill var(--transition-medium);
}

#bottleHeadline {
  margin-bottom: 50vh;
}

/* Hamburger & Cart icons – fixed top corners */
.nav-icon {
  position: fixed;
  top: var(--spacing-m);
  z-index: 200;
  background: none;
  border: none;
  padding: var(--spacing-s);
  color: var(--ci-highlight-color, #ffffff);
  cursor: pointer;
  line-height: 0;
  transition: color var(--transition-medium), opacity var(--transition-fast);
}

.nav-icon:hover {
  opacity: 0.75;
}

.nav-icon svg {
  width: 28px;
  height: 28px;
  display: block;
  pointer-events: none;
}

.nav-icon--hamburger {
  left: var(--spacing-m);
}

.nav-icon--cart {
  right: var(--spacing-m);
}

/* Circle Navigation – top right, fixed */
.nav-circles {
  z-index: 2000; /* Ensure circles stay above all content */
  bottom: var(--spacing-m);
  position: fixed;
  z-index: 1000; /* Ensure circles stay above page text */
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0; /* padding on each circle bridges gaps — no dead zones on hover */
  left: 50%;
  transform: translateX(-50%); /* Center align horizontally */
  background-color: rgba(255, 255, 255, 0.1); /* Very light white background */
  border-radius: 20px; /* Rounded bar look */
  padding: 0.5rem 1rem; /* Add some padding for the bar shape */
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.05); /* Subtle shadow for depth */  
  backdrop-filter: blur(6px);
}

/* Individual circle */
.circle {
  width: var(--circle-size);
  height: var(--circle-size);
  border-radius: var(--radius-full);
  background-color: var(--circle-color, #ccc);
  background-clip: content-box;   /* colour stays within the padding box */
  padding: 10px;                  /* transparent hit-area buffer — overlaps neighbours */
  box-sizing: content-box;        /* width/height describe the coloured dot only */
  cursor: pointer;
  border: none;
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
  flex-shrink: 0;
}

.circle.is-active {
  box-shadow: 0 0 0 3px white inset;
}