/* ==========================================================================
   Shopping and navigation: quick add on product cards and its picker, the note after adding, the bottom bar on
   phones, the header that steps aside while scrolling, the phone menu by levels, breadcrumbs on phones.
   Scripts: static/js/quick-add.js and static/js/nav.js. Plain font everywhere, no italics.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Quick add button on product cards
   -------------------------------------------------------------------------- */
.product-card__media > .quick-add {
  position: absolute; right: 8px; bottom: 8px; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 42px; height: 42px; border-radius: 50%;
  background: rgb(255 255 255 / 0.94); color: var(--c-ink);
  box-shadow: 0 6px 18px -8px rgb(42 36 33 / 0.45), 0 0 0 1px rgb(42 36 33 / 0.04);
  font-family: var(--font-body); font-style: normal; font-size: var(--fs-s); font-weight: 700; line-height: 1;
  text-decoration: none; white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast), opacity var(--t-med) var(--ease);
}
.product-card__media > .quick-add .icon { width: 21px; height: 21px; flex: none; }
.quick-add .quick-add__label { display: none; }
.quick-add .quick-add__done { display: none; }
.product-card__media > .quick-add:hover { background: var(--c-ink); color: #fff; }
.product-card__media > .quick-add:active { transform: scale(0.94); }
.product-card__media > .quick-add.is-added { background: var(--c-success); color: #fff; }
.product-card__media > .quick-add.is-added .quick-add__icon { display: none; }
.product-card__media > .quick-add.is-added .quick-add__done { display: inline-block; }
.product-card__media > .quick-add.is-loading { pointer-events: none; }
.product-card__media > .quick-add.is-loading .icon { visibility: hidden; }
.product-card__media > .quick-add.is-loading::after {
  content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent; animation: spin 0.7s linear infinite;
}
/* Computers with a mouse: a wide button over the bottom of the photo, shown on hover or keyboard focus */
@media (hover: hover) and (pointer: fine) and (min-width: 900px) {
  .product-card__media > .quick-add {
    left: 10px; right: 10px; bottom: 10px; width: auto; height: 44px; border-radius: var(--radius-pill);
    padding: 0 16px; opacity: 0; transform: translateY(8px);
    backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px);
  }
  .product-card__media > .quick-add .icon { width: 19px; height: 19px; }
  .quick-add .quick-add__label { display: inline; }
  .product-card:hover .quick-add, .product-card__media > .quick-add:focus-visible, .product-card__media > .quick-add.is-loading, .product-card__media > .quick-add.is-added { opacity: 1; transform: none; }
  .product-card__media > .quick-add:active { transform: scale(0.98); }
  .product-card__media > .quick-add.is-loading .quick-add__label { visibility: hidden; }
}

/* --------------------------------------------------------------------------
   The picker: a popover on a computer, a bottom sheet on a phone
   -------------------------------------------------------------------------- */
dialog.qa-dialog {
  padding: 0; border: 0; margin: 0;
  background: var(--c-bg); color: var(--c-ink);
  box-shadow: var(--shadow-l);
  overflow: hidden;
  max-width: calc(100vw - 24px);
  max-height: calc(100dvh - 24px);
}
dialog.qa-dialog[open] { display: flex; flex-direction: column; }
dialog.qa-dialog::backdrop { background: rgb(26 22 20 / 0.32); }
.qa-dialog__content { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.qa-dialog__grip { display: none; }

dialog.qa-dialog.is-popover {
  position: fixed; inset: auto; width: min(400px, calc(100vw - 24px));
  border-radius: var(--radius-l); border: 1px solid var(--c-line);
  transform-origin: var(--origin-x, 50%) 0;
  animation: qa-pop 200ms var(--ease);
}
dialog.qa-dialog.is-popover[data-from="bottom"] { transform-origin: var(--origin-x, 50%) 100%; }
dialog.qa-dialog.is-popover::backdrop { background: rgb(26 22 20 / 0.14); }
dialog.qa-dialog.is-popover.is-closing { animation: qa-pop-out 180ms var(--ease) forwards; }
@keyframes qa-pop { from { opacity: 0; transform: scale(0.96) translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes qa-pop-out { to { opacity: 0; transform: scale(0.97); } }

dialog.qa-dialog.is-sheet {
  position: fixed; inset: auto 0 0 0; width: 100%; max-width: 100%; max-height: 90dvh;
  border-radius: var(--radius-l) var(--radius-l) 0 0;
  padding-bottom: env(safe-area-inset-bottom);
  transform: translateY(var(--drag, 0px));
  animation: qa-sheet 300ms var(--ease);
}
dialog.qa-dialog.is-sheet.is-closing { animation: qa-sheet-out 200ms var(--ease) forwards; }
dialog.qa-dialog.is-sheet .qa-dialog__grip {
  display: block; flex: none; height: 22px; position: relative; cursor: grab; touch-action: none;
}
dialog.qa-dialog.is-sheet .qa-dialog__grip::before {
  content: ""; position: absolute; left: 50%; top: 9px; width: 44px; height: 5px; margin-left: -22px;
  border-radius: 5px; background: var(--c-line-strong);
}
@keyframes qa-sheet { from { transform: translateY(100%); } to { transform: translateY(var(--drag, 0px)); } }
@keyframes qa-sheet-out { from { transform: translateY(var(--drag, 0px)); } to { transform: translateY(100%); } }

.qa { display: grid; font-family: var(--font-body); font-style: normal; }
.qa__head {
  display: grid; grid-template-columns: 68px minmax(0, 1fr) auto; gap: 14px; align-items: start;
  padding: 16px 10px 14px 16px; border-bottom: 1px solid var(--c-line);
}
.is-sheet .qa__head { padding-top: 2px; }
.qa__thumb { display: block; width: 68px; aspect-ratio: var(--ratio); border-radius: var(--radius-s); overflow: hidden; background: var(--c-surface-2); }
.qa__thumb img { width: 100%; height: 100%; object-fit: cover; }
.qa__info { display: grid; gap: 6px; align-content: center; min-height: 100%; min-width: 0; }
.qa__title { font-family: var(--font-body); font-style: normal; font-size: var(--fs-m); font-weight: 700; line-height: 1.3; letter-spacing: 0; }
.qa__title a { text-decoration: none; }
.qa__title a:hover { color: var(--c-accent); }
.qa__price .price__now { font-size: var(--fs-l); }
.qa__close { margin: -4px 0 0; }
.qa__body { display: grid; gap: 18px; padding: 16px 16px 18px; }
.qa__group .option-group__label { font-weight: 700; }
.qa__group .option-values { gap: 8px; }
.qa .stock-line { min-height: 1.6em; }
.qa .stock-line.is-missing { color: var(--c-danger); font-weight: 700; }
.qa__buy { display: flex; gap: 10px; align-items: stretch; }
.qa__buy .qty { height: 52px; flex: none; }
.qa__add { flex: 1; min-height: 52px; padding-inline: 1em; font-size: var(--fs-m); }
.qa__add[disabled] { opacity: 0.55; }
.qa__error { margin-top: -6px; color: var(--c-danger); font-size: var(--fs-s); font-weight: 700; }
.qa__more {
  justify-self: center; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding-inline: 8px;
  color: var(--c-ink-2); font-size: var(--fs-s); font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
}
.qa__more:hover { color: var(--c-accent); }
@media (max-width: 379px) {
  .qa__buy .qty button { width: 38px; }
  .qa__buy .qty input { width: 36px; }
}

/* --------------------------------------------------------------------------
   The note after adding: photo, product, "View cart" and "Check out"
   -------------------------------------------------------------------------- */
.toast--cart { padding: 12px; gap: 12px; align-items: flex-start; }
.toast__thumb {
  flex: none; width: 56px; aspect-ratio: var(--ratio); border-radius: var(--radius-s); overflow: hidden;
  background: rgb(255 255 255 / 0.1); display: grid; place-items: center; color: #9fd3ad;
}
.toast__thumb img { width: 100%; height: 100%; object-fit: cover; }
.toast__title { display: flex; align-items: center; gap: 6px; color: #fff; font-weight: 800; }
.toast__title .icon { color: #9fd3ad; }
.toast__item {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  margin-top: 2px; color: rgb(243 236 227 / 0.78); font-weight: 500;
}
/* `.toast__text a` paints links white; a button inside keeps its own colours */
.toast__actions .btn { color: var(--btn-fg); min-height: 40px; }
.toast--cart .toast__actions { flex-wrap: wrap; }
.toast--cart .toast__actions .btn { min-height: 40px; padding-inline: 1.05em; }
.toast--cart .toast__actions .btn--light { --btn-bg: transparent; --btn-fg: #fff; --btn-border: rgb(255 255 255 / 0.35); }
.toast--cart .toast__actions .btn--light:hover { --btn-bg: rgb(255 255 255 / 0.1); --btn-border: #fff; }
.toast--cart .toast__close { width: 36px; height: 36px; margin: -8px -8px 0 0; }

/* Cart counters say "one more" */
@keyframes count-bump { 0% { transform: scale(1); } 35% { transform: scale(1.4); } 100% { transform: scale(1); } }
[data-cart-count].is-bumped { animation: count-bump 450ms var(--ease); }

/* --------------------------------------------------------------------------
   Bottom navigation bar (phones and small tablets)
   -------------------------------------------------------------------------- */
.bottom-nav { display: none; }
@media (max-width: 899px) {
  body:has(> .bottom-nav) { --bottom-nav-h: 60px; padding-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom)); }
  .bottom-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: calc(var(--z-drawer) - 4);
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
    height: calc(var(--bottom-nav-h, 60px) + env(safe-area-inset-bottom));
    padding: 0 max(4px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(4px, env(safe-area-inset-left));
    background: rgb(255 255 255 / 0.94);
    backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
    border-top: 1px solid var(--c-line);
    box-shadow: 0 -8px 24px -18px rgb(42 36 33 / 0.35);
    transition: transform var(--t-med) var(--ease);
  }
  /* The product page's own "Add to cart" bar and the on-screen keyboard take its place */
  body.has-sticky-buy .bottom-nav, body.is-typing .bottom-nav { transform: translateY(110%); }
  .bottom-nav__item {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-width: 0; height: var(--bottom-nav-h, 60px); padding: 6px 2px 4px;
    color: var(--c-ink-3); text-decoration: none; font-family: var(--font-body); font-style: normal;
    -webkit-tap-highlight-color: transparent;
  }
  .bottom-nav__item .icon { width: 24px; height: 24px; transition: transform var(--t-fast) var(--ease); }
  .bottom-nav__item:active .icon { transform: scale(0.9); }
  .bottom-nav__label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; font-weight: 700; line-height: 1.2; letter-spacing: 0.01em; }
  .bottom-nav__item[aria-current="page"], .bottom-nav__item[aria-expanded="true"] { color: var(--c-ink); }
  .bottom-nav__item[aria-current="page"] .icon { color: var(--c-accent); }
  .bottom-nav__item[aria-current="page"]::before {
    content: ""; position: absolute; top: 0; left: 50%; width: 28px; height: 3px; margin-left: -14px;
    border-radius: 0 0 3px 3px; background: var(--c-accent);
  }
  .bottom-nav__count {
    position: absolute; top: 5px; left: calc(50% + 6px);
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-pill);
    background: var(--c-accent); color: #fff; box-shadow: 0 0 0 2px #fff;
    font-size: 10.5px; font-weight: 800; line-height: 18px; text-align: center;
  }
  .bottom-nav__count:empty, .bottom-nav__count[data-count="0"] { display: none; }

  /* Floating things sit above the bar */
  body:has(> .bottom-nav) .toasts { bottom: calc(var(--bottom-nav-h) + 12px + env(safe-area-inset-bottom)); }
  body:has(> .bottom-nav) .cookie-banner { bottom: calc(var(--bottom-nav-h) + 10px + env(safe-area-inset-bottom)); }
  body:has(> .bottom-nav):not(.has-sticky-buy) .contact-fab,
  body:has(> .bottom-nav):not(.has-sticky-buy) .back-to-top { bottom: calc(var(--bottom-nav-h) + 14px + env(safe-area-inset-bottom)); }
  body.has-sticky-buy .toasts { bottom: calc(84px + env(safe-area-inset-bottom)); }
  /* The page's end no longer needs the extra room the floating buttons had */
  body:has(> .bottom-nav) .footer-legal { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
}
@media print { .bottom-nav, .quick-add { display: none !important; } }

/* --------------------------------------------------------------------------
   Header: steps aside while scrolling down (nav.js, SiteSettings.hide_header_on_scroll)
   -------------------------------------------------------------------------- */
.site-header.is-hidden { transform: translateY(-100%); box-shadow: none; }
html.header-hidden { --sticky-top: 0px; }
@media (min-width: 900px) {
  .toasts { transition: top var(--t-med) var(--ease); }
  .gallery, .summary--sticky, .checkout-aside, .account-nav, .reviews__summary, .toc { transition: top var(--t-med) var(--ease); }
}

/* --------------------------------------------------------------------------
   Phone menu by levels: a category opens its own screen
   -------------------------------------------------------------------------- */
.drill-host { position: relative; }
.drill-host.is-drilled { overflow: hidden; }
.mobile-nav__drill {
  width: 100%; min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 0; text-align: left; font-weight: 700; font-size: 1.05rem; line-height: 1.3; color: var(--c-ink);
}
.mobile-nav__drill .icon { color: var(--c-ink-3); flex: none; transition: transform var(--t-fast); }
.mobile-nav__drill:hover .icon { transform: translateX(3px); }
.mobile-nav__drill.is-highlight { color: var(--c-berry); }
.mobile-nav--drill > li > a { min-height: 54px; }
.drill-panel {
  position: absolute; inset: 0; z-index: 1; overflow-y: auto; overscroll-behavior: contain;
  padding: 8px 22px 28px; background: var(--c-bg);
  transform: translateX(100%); visibility: hidden;
  transition: transform 300ms var(--ease), visibility 0s linear 300ms;
}
.drill-panel.is-open { transform: none; visibility: visible; transition-delay: 0s; }
.drill-panel__back {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px 0 6px; margin-left: -8px;
  border-radius: var(--radius-pill); font-weight: 700; font-size: var(--fs-s); color: var(--c-ink-2);
}
.drill-panel__back:hover { background: var(--c-surface-2); color: var(--c-ink); }
.drill-panel__title { margin: 8px 0 6px; font-family: var(--font-body); font-size: 1.4rem; font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; color: var(--c-ink); }
.drill-panel__list { list-style: none; padding: 0; margin: 0; }
.drill-panel__list a {
  display: flex; align-items: center; min-height: 52px; padding: 12px 0;
  border-bottom: 1px solid var(--c-line); text-decoration: none; font-weight: 600; font-size: 1.02rem; color: var(--c-ink);
}
.drill-panel__list a:hover { color: var(--c-accent); }
.drill-panel__list strong { font-weight: 800; }

/* --------------------------------------------------------------------------
   Breadcrumbs on phones: one line you can slide, ending where you are
   -------------------------------------------------------------------------- */
@media (max-width: 699px) {
  .breadcrumbs ol { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
  .breadcrumbs ol::-webkit-scrollbar { display: none; }
  .breadcrumbs li { flex: none; white-space: nowrap; }
  .breadcrumbs a { display: inline-flex; align-items: center; min-height: 40px; }
  .breadcrumbs li[aria-current] span { display: block; max-width: 70vw; overflow: hidden; text-overflow: ellipsis; line-height: 40px; }
}

/* Breadcrumbs above the title of account and order pages */
.page-head .breadcrumbs { margin-bottom: -4px; }

/* "You recently viewed" under the cart */
.cart-recent { margin-top: clamp(32px, 5vw, 64px); }
.cart-recent .section-head { margin-bottom: 20px; }