/* Die Pale Depot quote list: floating button, drawer and quote-form lines. */

.pdp-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

:root {
  --pdpq-forest: var(--ds-color-primary, #0b4a34);
  --pdpq-canopy: var(--ds-color-primary-strong, #073526);
  --pdpq-heartwood: #a8743f;
  --pdpq-sapwood: #f3ead8;
  --pdpq-ink: var(--ds-color-ink, #0b3b2b);
  --pdpq-line: var(--ds-color-border, #cfe2d6);
  --pdpq-ease: cubic-bezier(.2, .8, .2, 1);
}

/* ---------- Add buttons in product tables ---------- */
.pdp-quote-button[data-pdp-add] { position: relative; min-width: 8.5rem; text-align: center; transition: background-color .2s var(--pdpq-ease), color .2s var(--pdpq-ease), box-shadow .2s var(--pdpq-ease); }
.pdp-quote-button[data-pdp-add].is-in-list { border-color: var(--pdpq-heartwood) !important; background: var(--pdpq-sapwood) !important; color: var(--pdpq-ink) !important; }
.pdp-quote-button[data-pdp-add].is-in-list::before { content: ""; display: inline-block; width: .5rem; height: .5rem; margin-right: .45rem; border-radius: 50%; background: var(--pdpq-heartwood); vertical-align: middle; }
.pdp-quote-button[data-pdp-add].is-just-added { border-color: var(--pdpq-canopy) !important; background: var(--pdpq-canopy) !important; color: #fff !important; }

/* ---------- Floating quote-list button ---------- */
.pdp-list-pill {
  position: fixed; z-index: 900; inset: auto auto max(1rem, env(safe-area-inset-bottom)) 1rem;
  display: inline-flex; align-items: center; gap: .55rem; padding: .7rem .8rem .7rem 1rem;
  border: 0; border-radius: 999px; background: var(--pdpq-forest); color: #fff;
  font: 600 .95rem/1 var(--ds-font-body, inherit); cursor: pointer;
  box-shadow: 0 .6rem 1.6rem rgb(7 53 38 / .35);
  transition: background-color .2s var(--pdpq-ease), translate .2s var(--pdpq-ease);
}
.pdp-list-pill:hover { background: var(--pdpq-canopy); translate: 0 -2px; }
.pdp-list-pill:focus-visible { outline: 3px solid var(--pdpq-heartwood); outline-offset: 3px; }
.pdp-list-pill__count { display: grid; place-items: center; min-width: 1.6rem; height: 1.6rem; padding: 0 .4rem; border-radius: 999px; background: var(--pdpq-sapwood); color: var(--pdpq-ink); font-size: .85rem; font-weight: 700; }
.pdp-list-pill.is-bumped .pdp-list-pill__count { animation: pdpq-bump .45s var(--pdpq-ease); }
@keyframes pdpq-bump { 0% { scale: 1; } 40% { scale: 1.35; background: var(--pdpq-heartwood); color: #fff; } 100% { scale: 1; } }

/* ---------- Drawer ---------- */
.pdp-drawer-open, .pdp-drawer-open body { overflow: hidden; }
.pdp-drawer { position: fixed; inset: 0; z-index: 1000; }
.pdp-drawer__backdrop { position: absolute; inset: 0; background: rgb(7 53 38 / .45); opacity: 0; transition: opacity .22s ease; }
.pdp-drawer__panel {
  position: absolute; inset: 0 0 0 auto; width: min(100%, 30rem); display: flex; flex-direction: column;
  background: #fff; box-shadow: -1rem 0 3rem rgb(7 53 38 / .25); translate: 100% 0; transition: translate .24s var(--pdpq-ease); outline: none;
}
.pdp-drawer.is-open .pdp-drawer__backdrop { opacity: 1; }
.pdp-drawer.is-open .pdp-drawer__panel { translate: 0 0; }
.pdp-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--pdpq-line); }
.pdp-drawer__head h2 { margin: 0; font-size: 1.5rem; }
.pdp-drawer__close { width: 2.5rem; height: 2.5rem; border: 0; border-radius: 50%; background: var(--pdpq-sapwood); color: var(--pdpq-ink); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.pdp-drawer__empty { padding: 1.25rem; color: var(--ds-color-muted, #587363); }
.pdp-drawer .pdp-lines__list { flex: 1; overflow-y: auto; padding: 0 1.25rem; }
.pdp-drawer__foot { display: grid; gap: .6rem; padding: 1.1rem 1.25rem max(1.1rem, env(safe-area-inset-bottom)); border-top: 1px solid var(--pdpq-line); background: #fbfaf6; }
.pdp-drawer__total { margin: 0; font-weight: 600; color: var(--pdpq-ink); }
.pdp-drawer__note { margin: 0; font-size: .88rem; color: var(--ds-color-muted, #587363); }
.pdp-drawer__go { display: block; padding: .95rem 1rem; border-radius: .6rem; background: var(--pdpq-forest); color: #fff; font-weight: 700; text-align: center; text-decoration: none; }
.pdp-drawer__go:hover { background: var(--pdpq-canopy); }
.pdp-drawer__secondary { display: flex; justify-content: space-between; gap: 1rem; font-size: .9rem; }
.pdp-drawer__secondary a, .pdp-drawer__secondary button { border: 0; background: none; padding: .3rem 0; color: var(--pdpq-forest); font: inherit; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }

/* ---------- Line rows (drawer and quote form) ---------- */
.pdp-lines__list { margin: 0; padding: 0; list-style: none; }
.pdp-line { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "info info" "qty remove"; gap: .55rem 1rem; align-items: center; padding: .9rem 0; border-bottom: 1px solid var(--pdpq-line); }
.pdp-line__info { grid-area: info; display: grid; gap: .15rem; }
.pdp-line__name { font-weight: 600; color: var(--pdpq-ink); }
.pdp-line__meta { font-size: .84rem; color: var(--ds-color-muted, #587363); white-space: pre; }
.pdp-line__remove { grid-area: remove; border: 0; background: none; color: #8a3c33; font: inherit; font-size: .88rem; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.pdp-qty { grid-area: qty; display: inline-flex; align-items: stretch; border: 1px solid var(--pdpq-line); border-radius: .55rem; overflow: hidden; width: max-content; }
.pdp-qty__btn { width: 2.4rem; border: 0; background: var(--pdpq-sapwood); color: var(--pdpq-ink); font-size: 1.15rem; cursor: pointer; }
.pdp-qty__btn:hover { background: #eadcc0; }
.pdp-qty__input { width: 4.2rem; border: 0; text-align: center; font: inherit; font-weight: 600; -moz-appearance: textfield; }
.pdp-qty__input::-webkit-outer-spin-button, .pdp-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
@media (min-width: 40rem) {
  .pdp-lines .pdp-line { grid-template-columns: 1fr auto auto; grid-template-areas: "info qty remove"; }
}

/* ---------- Quote form ---------- */
.pdp-lines { padding: 1rem 1.1rem; border: 1px solid var(--pdpq-line); border-radius: .8rem; background: #fbfaf6; }
.pdp-lines__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .25rem; }
.pdp-lines__browse { font-weight: 600; }
.pdp-lines__total { margin: .75rem 0 0; font-weight: 600; color: var(--pdpq-ink); }
.pdp-lines__extra-toggle { margin: .5rem 0 0; }
.pdp-link-button { border: 0; background: none; padding: 0; color: var(--pdpq-forest); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.pdp-single { display: contents; }
.pdp-single[hidden] { display: none; }
.pdp-review__multiline { white-space: pre-line; }

@media (prefers-reduced-motion: reduce) {
  .pdp-list-pill, .pdp-drawer__panel, .pdp-drawer__backdrop, .pdp-quote-button[data-pdp-add] { transition: none; }
  .pdp-list-pill.is-bumped .pdp-list-pill__count { animation: none; }
}
