@charset "utf-8";

.prod-bar { background-color: var(--surface-callout); left: 0px; padding: 0.5rem 0px; position: fixed; top: 0px; transform: translateY(-200%); width: 100vw; z-index: 9; display: block !important; }

.prod-bar.is-active { transition: transform 0.4s; }

.prod-bar.is-visible, .prod-bar:has(.focus-visible) { transform: translateY(0px); }

.prod-bar__container { align-items: center; display: flex; flex-flow: wrap; justify-content: space-between; }

.prod-bar__actions, .prod-bar__header { width: 100%; }

.prod-bar__header { align-items: center; display: flex; flex: 1 1 0%; flex-direction: row; gap: 0.75rem; justify-content: flex-start; }

.prod-bar__header-text { display: grid; gap: 0.125rem; }

.prod-bar__actions { display: none; }

.prod-bar__options { align-items: stretch; display: flex; flex: 1 1 0%; flex-flow: wrap; gap: 0.5rem; justify-content: flex-start; }

.prod-bar__options > * { display: grid; flex: 1 1 auto; }

.prod-bar__image { border: .0625rem solid var(--border-subtle); border-radius: 0.125rem; height: 2.75rem; width: 2.75rem; }

.prod-bar__subtitle { font-size: 0.6875rem; font-weight: 500; line-height: 1.35; }

.prod-bar__link { font-size: 1rem; font-weight: 700; line-height: 1.1; position: relative; }

.prod-bar__link::before { background-color: var(--surface-cta); content: ""; display: block; left: 0px; position: absolute; transform: scaleX(0); transform-origin: left center; transition: transform 0.3s; width: 100%; }

.prod-bar__link.is-active::before, .prod-bar__link:active::before, .prod-bar__link:hover::before { transform: scaleX(1); }

.prod-bar__link::before { background-color: var(--border-brand); bottom: -0.1rem; height: 0.0625rem; }

.prod-bar__link.is-active::before, .prod-bar__link:active::before { height: 0.125rem; }

.prod-bar__actions .btn { white-space: nowrap; }

.prod-bar__actions .input-qty { --border-radius: 0.125rem; }

.prod-bar__price { align-items: center; display: flex; flex-direction: row; font-size: 0.875rem; font-weight: 700; gap: 0.25rem; justify-content: flex-start; line-height: 1.1; }

.prod-bar__price s { color: var(--text-accent); font-weight: 400; }

.prod-bar-modal { inset: 0px; display: none; height: auto; margin: 0px auto auto; opacity: 1; position: fixed; transform: translateY(-100%); transition: transform 0.4s; width: 100%; z-index: -10; justify-content: flex-start !important; }

.prod-bar-modal.is-active { align-items: center; display: flex; flex-direction: column; justify-content: center; pointer-events: none; z-index: 10; }

.prod-bar-modal > * { background-color: var(--surface-primary); overflow-y: scroll; pointer-events: auto; position: relative; width: 100%; }

.prod-bar-modal.is-visible { transform: translateY(0px); }

.prod-bar-modal > * { padding: 1.25rem; }

.prod-bar-modal__close { position: fixed; right: 0px; top: 0px; }

.prod-bar-modal__header { display: grid; gap: 0.5rem; }

.prod-bar-modal__title { font-size: 1.4375rem; font-weight: 700; line-height: 1.1; }

@media only screen and (min-width: 48em) {
  .prod-bar__actions, .prod-bar__header { width: auto; }
  .prod-bar__link { font-size: 1.125rem; }
  .prod-bar__price { font-size: 1rem; }
  .prod-bar-modal { max-height: 90dvh; }
  .prod-bar-modal__title { font-size: 1.8125rem; }
}

@media only screen and (min-width: 64em) {
  .prod-bar__actions { --font-size: 0.875rem; align-items: stretch; display: flex; flex-direction: row; gap: 0.5rem; justify-content: flex-start; }
  .prod-bar__actions .input-select { height: 100%; }
  .prod-bar__image { height: 3rem; width: 3rem; }
  .prod-bar__modal-trigger { display: none; }
}

@media only screen and (min-width: 80em) {
  .prod-bar__link { font-size: 1.125rem; }
  .prod-bar__price { font-size: 1rem; }
  .prod-bar-modal__title { font-size: 2.0625rem; }
}

.prod-bar.is-visible { border-bottom: 2px solid black; }