:host { display:block; position:relative; width:100%; border-radius: var(--radius-xl, 1rem); contain: content; }
.or-root { position: relative; display: block; box-sizing: border-box; }
.or-primary { position: relative; opacity: var(--or-primary-opacity, 1); transition: opacity 280ms ease; box-sizing: border-box; }
.or-overlay { position: absolute; inset: 0; transform: translateY(var(--or-overlay-translate-y, 100%)); transition: transform 280ms ease; z-index: 1; box-sizing: border-box; pointer-events: var(--or-overlay-pe, none); }
.or-overlay-fade { opacity: var(--or-overlay-opacity, 0); transition: opacity 280ms ease; visibility: var(--or-overlay-visibility, hidden); pointer-events: var(--or-overlay-pe, none); height: 100%; width: 100%; box-sizing: border-box; padding-bottom: calc(env(safe-area-inset-bottom) + 18px); display: flex; flex-direction: column; align-items: center; }
/* Make the Learn More button center across full width, even if grid is narrower */
::slotted([slot="overlay"]) p.text-center { width: 100%; display: flex; justify-content: center; }

/* Inner scrolling only when fully applied */
:host(.or-inner-scroll) .or-overlay-fade { display: flex; flex-direction: column; }
:host(.or-inner-scroll) .or-overlay-fade [data-or-grid] { flex: 1 1 auto; min-height: 0; }
/* Make overlay content scrollable only when fully applied */
/* pointer-events now controlled by --or-overlay-pe to allow clicks in fit mode too */
:host(.or-inner-scroll) .or-overlay-fade { overflow: auto; overscroll-behavior: auto; -webkit-overflow-scrolling: touch; }

/* Scroll hint for fit="scroll" mode when content is scrollable */
.or-scroll-hint {
  position: absolute;
  left: 50%;
  bottom: env(safe-area-inset-bottom);
  transform: translateX(-50%);
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(13, 106, 8, 0.557);;
  border: 1px solid rgba(255, 255, 255, 0.089);
  color: var(--bone, #e5e4d8);
  font-size: clamp(12px, 1.6vw, 14px);
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms ease;
  z-index: 3;
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
  backdrop-filter: blur(8px);
  will-change: transform, opacity;
}

:host(.or-hint-visible) .or-scroll-hint { opacity: 1; animation: or-breathe 2.4s ease-in-out infinite; }

/* Position when hinting upward (top edge), else bottom edge */
:host(.or-dir-up) .or-scroll-hint {
  top: env(safe-area-inset-top);
  bottom: auto;
}

/* Direction chevrons */
.or-scroll-hint::before {
  content: "";
  display: inline-block;
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  margin-right: 6px;
  vertical-align: middle;
}
:host(.or-dir-down) .or-scroll-hint::before { border-top: 8px solid #e5e4d8; border-bottom: none; }
:host(.or-dir-up) .or-scroll-hint::before { border-bottom: 8px solid #e5e4d8; border-top: none; }

@keyframes or-breathe {
  0%   { transform: translateX(-50%) scale(0.98); opacity: .75; }
  50%  { transform: translateX(-50%) scale(1.04); opacity: 1; }
  100% { transform: translateX(-50%) scale(0.98); opacity: .75; }
}

@media (prefers-reduced-motion: reduce) {
  :host(.or-hint-visible) .or-scroll-hint { animation: none; opacity: 1; }
}

/* Normalize slotted content to respect overlay borders */
::slotted([slot="primary"]),
::slotted([slot="overlay"]) { display:block; box-sizing:border-box; max-width:100%; padding-left: 4px; padding-right: 4px; }
::slotted([slot="overlay"] .learn-more-btn) { margin-left: auto; margin-right: auto; }
::slotted(img) { max-width:100%; height:auto; display:block; }

/* Grid helpers applied to slotted grids */
::slotted([data-or-grid]) { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 90vw), 1fr)); gap: var(--or-grid-gap, 1rem); margin: var(--or-grid-mt, 1rem) 0 var(--or-grid-mb, 1rem); box-sizing: border-box; max-width:100%; }