/* The Droppe layer in Droppe's own identity (Shoppe tokens: app/styles/tokens.css): DM Sans, ink #141414,
   charcoal #2a2a2a buttons, white and #f7f7f5 surfaces, 8 px radius. Never recoloured to the brand. All classes are
   .dr-* so a site's own styles don't reach in, and the layer doesn't reach out. */
@font-face { font-family: 'Droppe Sans'; font-style: normal; font-weight: 100 1000; font-display: swap; src: url(dm-sans-latin.woff2) format('woff2'); }

.dr-bar, .dr-lockup, .dr-seller, .dr-foot, .dr-gpsr, .dr-bagwrap, .dr-buy, .dr-hdr, .dr-drawer, .dr-strip {
  --dr-ink: #141414; --dr-charcoal: #2a2a2a; --dr-muted: #6a6b6c; --dr-line: #e5e5ea; --dr-surface: #f7f7f5; --dr-ok: #009300;
  font-family: 'Droppe Sans', system-ui, -apple-system, sans-serif; letter-spacing: 0; text-transform: none; font-style: normal;
}
/* the site's own heading and button styles must not reach in (:is() carries a class, so it beats bare h2/button rules) */
:is(.dr-bar, .dr-lockup, .dr-seller, .dr-foot, .dr-gpsr, .dr-bagwrap, .dr-hdr, .dr-drawer, .dr-strip) :is(h1, h2, h3, p, b, small, a, button, span, li, dt, dd, summary, nav) {
  font-family: inherit; font-style: normal; letter-spacing: 0; text-transform: none;
}
.dr-logo { display: inline-block; height: 15px; width: auto; vertical-align: middle; }
.dr-logo--inv, .dr-lockup--inv .dr-logo, .dr-buy .dr-logo { filter: brightness(0) invert(1); }
.dr-logo--sm { height: 12px; }

/* promise bar: slim, always Droppe black */
.dr-bar { background: var(--dr-ink); color: #fff; font-size: 12.5px; line-height: 1; position: relative; z-index: 60; }
.dr-bar__in { display: flex; align-items: center; gap: 22px; max-width: 1440px; margin: 0 auto; padding: 9px 20px; min-height: 34px; box-sizing: border-box; }
.dr-bar ul { display: flex; gap: 22px; margin: 0; padding: 0; list-style: none; overflow: hidden; white-space: nowrap; }
.dr-bar li { display: flex; align-items: center; gap: 7px; }
.dr-bar li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #86da07; flex: none; }
@media (max-width: 47.99em) { .dr-bar li:not(:first-child) { display: none; } .dr-bar__in { justify-content: center; gap: 14px; } }

/* "at Droppe" lockup next to the brand's logo */
.dr-lockup { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: inherit; opacity: .9; white-space: nowrap; }
.dr-lockup .dr-logo { height: 13px; }

/* the buy button: like a Shop Pay button, it is Droppe's at the money moment */
.dr-buy { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border: 0; border-radius: 8px;
  background: var(--dr-charcoal); color: #fff; font-size: 16px; font-weight: 600; cursor: pointer; text-decoration: none; transition: background .15s; }
.dr-buy:hover { background: #343434; }
.dr-buy:focus-visible { outline: none; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--dr-ink); }
.dr-buy:disabled, .dr-buy[aria-disabled="true"] { background: #8e8e93; cursor: not-allowed; }
.dr-buy--block { width: 100%; }
.dr-buy .dr-logo { height: 14px; }
.dr-buy--ghost { background: #fff; color: var(--dr-ink); box-shadow: inset 0 0 0 1.5px var(--dr-ink); }
.dr-buy--ghost:hover { background: var(--dr-surface); }

/* seller line under the buy button */
.dr-seller { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 0; font-size: 13px; line-height: 1.45; color: var(--dr-muted); }
.dr-seller .dr-logo { margin-top: 3px; flex: none; }
.dr-seller b { color: var(--dr-ink); font-weight: 600; }

/* ---------- the co-brand frame ---------- */
.dr-cobrand { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.dr-cobrand img { display: block; width: auto; }
.dr-cobrand .dr-brandlogo { height: 18px; filter: brightness(0); }
.dr-cobrand .dr-logo { height: 17px; }
.dr-times { font-size: 17px; font-weight: 300; line-height: 1; opacity: .55; }
.dr-cobrand--lg .dr-brandlogo { height: 28px; }
.dr-cobrand--lg .dr-logo { height: 26px; }
.dr-cobrand--lg .dr-times { font-size: 26px; }
.dr-ico { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* floating header (Shoppe's pill: app/styles/critical.css .site-header): glass by default, clear at the top of a page
   whose body says data-dr-tone, away while scrolling down */
.dr-hdr { position: fixed; top: calc(var(--dr-off, 0px) + 12px); left: 0; right: 0; z-index: 2147482000; padding: 0 max(20px, calc((100vw - 1440px) / 2)); box-sizing: border-box;
  transition: transform .3s cubic-bezier(.2, .8, .2, 1); pointer-events: none; color: var(--dr-ink); }
.dr-hdr--away { transform: translateY(calc(-100% - 16px)); }
.dr-hdr__pill { pointer-events: auto; position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; height: 64px; padding: 0 12px 0 22px; border-radius: 32px;
  background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(0, 0, 0, .06); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 8px 24px rgba(0, 0, 0, .1); box-sizing: border-box;
  transition: background .35s, border-color .35s, box-shadow .35s, color .35s; }
.dr-hdr--clear .dr-hdr__pill { background: transparent; border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.dr-hdr--dark { color: #fff; }
.dr-hdr--dark .dr-cobrand :is(.dr-brandlogo, .dr-logo) { filter: brightness(0) invert(1); }
.dr-hdr .dr-hdr__pill:is(:hover, :focus-within) { background: rgba(255, 255, 255, .97); border-color: rgba(0, 0, 0, .06); box-shadow: 0 8px 24px rgba(0, 0, 0, .1); color: var(--dr-ink); }
.dr-hdr .dr-hdr__pill:is(:hover, :focus-within) .dr-cobrand :is(.dr-brandlogo, .dr-logo) { filter: brightness(0); }
.dr-hdr__left { display: flex; align-items: center; gap: 4px; min-width: 0; }
.dr-hdr__home { display: flex; align-items: center; justify-self: center; min-height: 44px; color: inherit; text-decoration: none; }
.dr-hdr__nav { display: none; align-items: center; gap: 2px; min-width: 0; margin-left: -10px; }
.dr-hdr__nav a { font-size: 14px; font-weight: 500; color: inherit; text-decoration: none; padding: 8px 12px; border-radius: 999px; white-space: nowrap; transition: background .15s; }
.dr-hdr__nav a:hover, .dr-hdr__nav a[aria-current="page"] { background: rgba(0, 0, 0, .08); }
.dr-hdr--dark .dr-hdr__nav a:hover, .dr-hdr--dark .dr-hdr__nav a[aria-current="page"] { background: rgba(255, 255, 255, .16); }
.dr-hdr__ctas { justify-self: end; display: flex; align-items: center; gap: 4px; }
.dr-hdr__btn { position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 999px; background: transparent; color: inherit; cursor: pointer; text-decoration: none; transition: background .15s; }
.dr-hdr__btn:hover { background: rgba(0, 0, 0, .07); }
.dr-hdr__btn:focus-visible, .dr-vat:focus-visible { outline: none; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--dr-ink); }
.dr-hdr__menu { margin-left: -10px; }
.dr-count { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--dr-charcoal); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; box-sizing: border-box; text-align: center; }
.dr-hdr--dark .dr-count { background: #fff; color: var(--dr-ink); }
.dr-vat { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: inherit; font: 600 13px/1 'Droppe Sans', system-ui, sans-serif; cursor: pointer; white-space: nowrap; }
.dr-vat:hover { background: rgba(0, 0, 0, .07); }
.dr-swap { width: 13px; height: 13px; }
.dr-market { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.dr-market img { border-radius: 2px; }
.dr-hdr-space { height: 88px; }
body[data-dr-overlay] .dr-hdr-space { display: none; }
@media (min-width: 72em) { .dr-hdr__nav { display: flex; } .dr-hdr__menu { display: none; } }
/* set by droppe.js when the brand menu doesn't fit beside the centred lockup */
.dr-hdr.dr-hdr--compact .dr-hdr__nav { display: none; }
.dr-hdr.dr-hdr--compact .dr-hdr__menu { display: inline-grid; }
.dr-hdr.dr-hdr--tight .dr-hdr__ctas :is(.dr-vat, .dr-market, .dr-hdr__account) { display: none; }
@media (max-width: 71.99em) { .dr-hdr__ctas .dr-vat, .dr-hdr__ctas .dr-market, .dr-hdr__account { display: none; } }
@media (max-width: 47.99em) {
  .dr-hdr { top: calc(var(--dr-off, 0px) + 8px); padding: 0 8px; }
  .dr-hdr__pill { height: 56px; padding: 0 6px 0 14px; gap: 6px; }
  .dr-hdr--clear .dr-hdr__pill { background: rgba(255, 255, 255, .9); border-color: rgba(0, 0, 0, .06); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); }
  .dr-hdr--dark { color: var(--dr-ink); }
  .dr-hdr--dark .dr-cobrand :is(.dr-brandlogo, .dr-logo) { filter: brightness(0); }
  .dr-cobrand { gap: 7px; } .dr-cobrand .dr-brandlogo { height: 15px; } .dr-cobrand .dr-logo { height: 14px; }
  .dr-hdr-space { height: 72px; }
}

/* discovery mode, laid out like the frame: the brand's menu on the left, the "<brand> × Droppe" lockup centred, then
   its tools, the market picker and one way to buy (droppe.com in Droppe's markets, the brand's channels elsewhere),
   under Droppe's strip in every market. The lockup stays centred at every width. No menu button: a menu that doesn't
   fit steps aside (dr-hdr--compact) and the footer carries the links; on phones the market picker takes the menu's
   place on the left. */
.dr-hdr--disc .dr-hdr__pill { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.dr-hdr--disc .dr-hdr__nav { grid-column: 1; }
.dr-hdr--disc .dr-hdr__home { grid-column: 2; }
.dr-hdr--disc .dr-hdr__ctas { grid-column: 3; }
.dr-hdr--disc .dr-brandlogo { display: block; height: 22px; width: auto; filter: brightness(0); transition: filter .35s; }
.dr-hdr--disc.dr-hdr--dark .dr-brandlogo { filter: brightness(0) invert(1); }
.dr-hdr--disc .dr-hdr__pill:is(:hover, :focus-within) .dr-brandlogo { filter: brightness(0); }
.dr-hdr--disc .dr-hdr__nav { display: flex; overflow: hidden; }
.dr-hdr--disc .dr-hdr__ctas .dr-market { display: inline-flex; }
.dr-hdr__cta { display: inline-flex; align-items: center; gap: 6px; height: 40px; margin-left: 6px; padding: 0 16px 0 18px; border-radius: 999px; background: var(--dr-charcoal); color: #fff;
  font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background .15s, color .15s; }
.dr-hdr__cta:hover { background: #000; }
.dr-hdr__cta:focus-visible, .dr-pick .dr-market:focus-visible { outline: none; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--dr-ink); }
.dr-hdr--dark .dr-hdr__cta { background: #fff; color: var(--dr-ink); }
.dr-hdr--dark .dr-hdr__pill:is(:hover, :focus-within) .dr-hdr__cta { background: var(--dr-charcoal); color: #fff; }
.dr-ico--sm { width: 16px; height: 16px; }
.dr-pick { position: relative; }
.dr-pick .dr-market { border: 0; border-radius: 999px; background: transparent; color: inherit; font-family: inherit; cursor: pointer; }
.dr-pick .dr-market:hover { background: rgba(0, 0, 0, .07); }
.dr-hdr--dark .dr-pick .dr-market:hover { background: rgba(255, 255, 255, .16); }
.dr-pick__panel { position: absolute; right: 0; top: calc(100% + 12px); display: grid; gap: 14px; width: 248px; padding: 16px; box-sizing: border-box; background: #fff; color: var(--dr-ink); border-radius: 16px; box-shadow: 0 12px 32px rgba(0, 0, 0, .18); }
.dr-pick__panel[hidden] { display: none; }
.dr-pick__panel label { display: grid; gap: 6px; font-size: 12px; font-weight: 600; color: var(--dr-muted); }
.dr-pick__panel select { width: 100%; height: 42px; padding: 0 10px; border: 1px solid var(--dr-line); border-radius: 8px; background: #fff; color: var(--dr-ink); font: 500 15px/1 'Droppe Sans', system-ui, sans-serif; }
@media (max-width: 47.99em) {
  .dr-hdr--disc .dr-hdr__pill { gap: 6px; padding: 0 6px 0 16px; }
  .dr-hdr--disc .dr-pick { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); }
  .dr-hdr--disc .dr-pick__panel { left: 0; right: auto; }
  .dr-hdr--disc .dr-brandlogo, .dr-hdr--disc.dr-hdr--dark .dr-brandlogo { height: 17px; filter: brightness(0); }
  .dr-hdr--disc .dr-hdr__nav { display: none; }
  .dr-hdr__cta, .dr-hdr--dark .dr-hdr__cta { height: 38px; margin-left: 2px; padding: 0 12px; font-size: 13px; background: var(--dr-charcoal); color: #fff; }
  .dr-hdr--disc .dr-pick .dr-market { padding: 0 6px; }
  .dr-hdr__cta .dr-ico { display: none; }
}
/* the button's short label on phones ("Shop", "Suppliers"), so the lockup fits beside it */
.dr-hdr__short { display: none; }
@media (max-width: 47.99em) { .dr-hdr__cta .dr-hdr__long { display: none; } .dr-hdr__cta .dr-hdr__short { display: inline; } }
/* the lockup at the same visual size (droppe.json "lockup", passed in as --dr-below and --dr-scale). --dr-h is the
   brand logo's height, --dr-below the share of it under its letters' baseline, --dr-scale Droppe's height against it
   (Sparco: .28 and 1.05, measured on the logos' ink and checked by eye). Droppe's wordmark has 24% of its height under
   its baseline (the p's). Both marks sit on that one baseline, and the × is centred on the brand's letters. */
.dr-cobrand--fit { --dr-h: 18px; align-items: baseline; gap: calc(var(--dr-h) * .5); }
.dr-cobrand--fit .dr-brandlogo, .dr-hdr--disc .dr-cobrand--fit .dr-brandlogo { height: var(--dr-h); margin-bottom: calc(var(--dr-h) * var(--dr-below) * -1); }
.dr-cobrand--fit .dr-logo { height: calc(var(--dr-h) * var(--dr-scale)); margin-bottom: calc(var(--dr-h) * var(--dr-scale) * -.24); }
.dr-cobrand--fit .dr-times { font-size: calc(var(--dr-h) * .75); transform: translateY(calc(var(--dr-h) * (1 - var(--dr-below)) / -2)); }
.dr-hdr--disc .dr-cobrand--fit { --dr-h: 20px; }
.dr-cobrand--lg.dr-cobrand--fit { --dr-h: 26px; }
@media (max-width: 47.99em) { .dr-hdr--disc .dr-cobrand--fit { --dr-h: 14px; } }
/* too tight: the site's own tools (search, sound) step aside before the market picker or the way to buy */
.dr-hdr--disc.dr-hdr--tight .dr-hdr__cta .dr-ico { display: none; }
.dr-hdr--disc.dr-hdr--tight .dr-hdr__ctas .dr-market { display: inline-flex; }
.dr-hdr--disc.dr-hdr--tight .dr-hdr__ctas > :not(.dr-pick):not(.dr-hdr__cta) { display: none; }

/* "Where to buy": a dropdown under the header's button. Small pictures; the facts that decide where to buy in
   aligned columns (chips on phones); trust under each shop; Droppe's on-demand row first in its markets. */
.dr-hdr__cta .dr-wb__i { width: 14px; height: 14px; transition: transform .2s; }
.dr-hdr__cta[aria-expanded="true"] .dr-wb__i { transform: rotate(180deg); }
.dr-wb { --dr-ink: #141414; --dr-muted: #6a6b6c; --dr-line: #ececf0; --dr-soft: #f5f5f2; position: absolute; z-index: 5; top: calc(100% + 8px); right: 6px; width: 480px; max-height: calc(100vh - 140px);
  display: flex; flex-direction: column; box-sizing: border-box; background: #fff; color: var(--dr-ink); border: 1px solid rgba(0, 0, 0, .06); border-radius: 20px; box-shadow: 0 18px 48px rgba(0, 0, 0, .22);
  font: 14px/1.35 'Droppe Sans', system-ui, sans-serif; text-align: left; overflow: hidden; pointer-events: auto; }
.dr-wb[hidden] { display: none; }
.dr-wb * { box-sizing: border-box; }
.dr-wb :is(h2, p, b, small, a, button, span, label, input, select) { font-family: inherit; font-style: normal; letter-spacing: 0; text-transform: none; }
.dr-wb a { color: inherit; text-decoration: none; }
.dr-wb__i { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; }
.dr-wb__top { padding: 12px 12px 0; }
.dr-wb__tabs { display: grid; grid-template-columns: repeat(3, 1fr); padding: 3px; border-radius: 12px; background: var(--dr-soft); }
.dr-wb__tabs button { padding: 9px 0; border: 0; border-radius: 9px; background: none; font-size: 13.5px; font-weight: 600; line-height: 1; color: var(--dr-muted); cursor: pointer; }
.dr-wb__tabs button[aria-selected="true"] { background: #fff; color: var(--dr-ink); box-shadow: 0 1px 4px rgba(0, 0, 0, .12); }
.dr-wb__tabs button:focus-visible, .dr-wb__at:focus-visible, .dr-wb__row:focus-visible { outline: 2px solid var(--dr-ink); outline-offset: 2px; }
.dr-wb__where { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 4px 8px; }
.dr-wb__at { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; font-size: 14px; font-weight: 700; color: var(--dr-ink); cursor: pointer; }
.dr-wb__at.is-on { color: #1f7a3f; }
.dr-wb__at:disabled { opacity: .6; cursor: progress; }
.dr-wb__cc { position: relative; display: inline-flex; align-items: center; color: var(--dr-muted); }
.dr-wb__cc select { appearance: none; -webkit-appearance: none; padding: 4px 18px 4px 0; border: 0; background: none; font-size: 13px; font-weight: 600; color: var(--dr-muted); cursor: pointer; }
.dr-wb__cc .dr-wb__i { position: absolute; right: 0; pointer-events: none; }
.dr-wb__body { overflow: auto; padding: 0 12px 6px; }
.dr-wb__none { margin: 14px 4px; color: var(--dr-muted); }
.dr-wb__find { margin: 4px 0 10px; }
.dr-wb__find input { width: 100%; height: 38px; padding: 0 14px; border: 0; border-radius: 12px; background: var(--dr-soft); font-size: 14px; color: var(--dr-ink); }
.dr-wb__cols { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; padding: 0 4px 6px; }
.dr-wb__cols > span:last-child, .dr-wb__facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.dr-wb__cols small { display: flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; color: var(--dr-muted); text-transform: uppercase; letter-spacing: .04em; line-height: 1.15; min-width: 0; overflow-wrap: anywhere; hyphens: manual; }
.dr-wb__row { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 4px 12px; padding: 12px 4px; }
.dr-wb__row + .dr-wb__row { border-top: 1px solid var(--dr-line); }
.dr-wb__row:hover .dr-wb__name { text-decoration: underline; text-underline-offset: 3px; }
.dr-wb__pic { position: relative; grid-row: span 3; width: 76px; height: 54px; border-radius: 10px; background: var(--dr-soft) center top / cover no-repeat; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .07); }
.dr-wb__pic--none { display: grid; place-items: center; background-color: #e9ece5; color: #6f746a; }
.dr-wb__logo { position: absolute; left: -6px; bottom: -8px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px #fff, 0 1px 5px rgba(0, 0, 0, .2); overflow: hidden; }
.dr-wb__logo img { max-width: 80%; max-height: 80%; object-fit: contain; }
.dr-wb__logo .dr-logo { max-width: 84%; height: auto; }
.dr-wb__logo b { font-size: 13px; color: #9a9a95; }
.dr-wb__head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dr-wb__name { font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dr-wb__badge { flex: none; padding: 3px 8px; border-radius: 999px; background: var(--dr-ink); color: #fff; font-size: 10.5px; font-weight: 700; }
.dr-wb__facts span { font-size: 12.5px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; } /* a long one ("Ships in 1-2 days") wraps, never cut */
.dr-wb__facts .dr-wb__i { display: none; }
.dr-wb__trust { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; color: var(--dr-muted); }
.dr-wb__trust span { display: inline-flex; align-items: center; gap: 4px; }
.dr-wb__ok { color: #1f7a3f; }
.dr-wb__row--droppe { background: var(--dr-soft); border-radius: 14px; padding: 12px 10px; margin: 2px 0 4px; }
.dr-wb__row--droppe + .dr-wb__row { border-top: 0; }
.dr-wb__foot { display: flex; align-items: center; gap: 6px; padding: 10px 16px 12px; border-top: 1px solid var(--dr-line); font-size: 12px; color: var(--dr-muted); }
.dr-wb__foot .dr-logo { height: 12px; vertical-align: -1px; }
@media (max-width: 47.99em) {
  .dr-wb { left: 0; right: 0; width: auto; top: calc(100% + 6px); max-height: calc(100vh - 130px); }
  /* columns don't fit a phone: the facts become chips */
  .dr-wb__cols { display: none; }
  .dr-wb__facts { display: flex; flex-wrap: wrap; gap: 5px; }
  .dr-wb__facts .dr-wb__no { display: none; }
  .dr-wb__facts span { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 8px; background: var(--dr-soft); font-size: 12px; }
  .dr-wb__facts .dr-wb__i { display: inline; }
  .dr-wb__row--droppe .dr-wb__facts span { background: #fff; }
}

/* announcement strip: one Droppe message at a time (Ciabatta Club's strip), in flow above the floating header */
.dr-strip { display: flex; align-items: center; justify-content: center; gap: 18px; height: 38px; background: #212121; color: #efebe5; font-size: 13.5px; line-height: 1; }
.dr-strip p { margin: 0; min-width: 0; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dr-strip button { width: 32px; height: 32px; border: 0; border-radius: 999px; background: transparent; color: inherit; font-size: 18px; line-height: 1; cursor: pointer; }
.dr-strip button:hover { background: rgba(255, 255, 255, .1); }
/* phones: a long message wraps to two lines rather than being cut (the header follows the strip's real height) */
@media (max-width: 47.99em) { .dr-strip { height: auto; min-height: 38px; padding: 4px 4px; gap: 4px; font-size: 13px; } .dr-strip p { white-space: normal; line-height: 1.3; overflow: visible; } .dr-strip button { flex: none; } }

/* mobile menu */
.dr-drawer { position: fixed; inset: 0; z-index: 2147482500; background: rgba(0, 0, 0, .3); opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; color: var(--dr-ink); }
.dr-drawer.is-open { opacity: 1; visibility: visible; }
.dr-drawer__panel { position: absolute; top: 0; left: 0; bottom: 0; width: min(420px, 100vw); background: #fff; padding: 14px 20px 24px; box-sizing: border-box; overflow-y: auto; display: flex; flex-direction: column; gap: 18px;
  transform: translateX(-100%); transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.dr-drawer.is-open .dr-drawer__panel { transform: none; }
.dr-drawer__head { display: flex; align-items: center; justify-content: space-between; min-height: 48px; }
.dr-drawer__nav { display: grid; }
.dr-drawer__nav a { font-size: 22px; font-weight: 600; color: var(--dr-ink); text-decoration: none; padding: 12px 0; border-bottom: 1px solid var(--dr-line); }
.dr-drawer__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dr-drawer__tools .dr-vat { background: var(--dr-surface); }
.dr-drawer__link { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; color: var(--dr-ink); text-decoration: none; font-size: 14px; font-weight: 600; border-radius: 999px; background: var(--dr-surface); }
.dr-drawer__link .dr-ico { width: 18px; height: 18px; }
.dr-promises { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; }
.dr-promises li { display: flex; align-items: center; gap: 8px; }
.dr-promises .dr-ico { width: 18px; height: 18px; color: var(--dr-ok); }

/* footer: Droppe's, co-branded, dark like Ciabatta Club's: lockup and one sentence on who sells, columns, promises, payment marks */
.dr-foot { background: #212121; color: #efebe5; }
.dr-foot__in { max-width: 1440px; margin: 0 auto; padding: 64px 20px 28px; box-sizing: border-box; display: grid; gap: 36px; font-size: 14.5px; line-height: 1.5; }
.dr-foot__top { display: grid; gap: 40px; grid-template-columns: minmax(260px, 1.3fr) 3fr; }
.dr-foot__id { display: grid; gap: 16px; align-content: start; }
.dr-foot .dr-cobrand :is(.dr-brandlogo, .dr-logo) { filter: brightness(0) invert(1); }
.dr-foot .dr-times { opacity: .6; }
.dr-foot__about { margin: 0; color: #c9c2b9; max-width: 36ch; }
.dr-foot__social { display: flex; flex-wrap: wrap; gap: 8px; }
.dr-foot__social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: #efebe5; }
.dr-foot__social a:hover { background: rgba(255, 255, 255, .16); }
.dr-foot__social svg { width: 20px; height: 20px; }
.dr-foot__cols { display: grid; gap: 28px 20px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.dr-foot__col { display: grid; gap: 2px; align-content: start; }
.dr-foot__col h3 { margin: 0 0 10px; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #a8a098; }
.dr-foot__col a { color: #efebe5; text-decoration: none; padding: 6px 0; }
.dr-foot__col a:hover { text-decoration: underline; text-underline-offset: 3px; }
.dr-promises--row { display: flex; flex-wrap: wrap; gap: 10px 28px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .12); }
.dr-foot .dr-promises .dr-ico { color: #86da07; }
.dr-foot__pay { display: flex; flex-wrap: wrap; gap: 8px; }
.dr-foot__pay img { height: 24px; width: auto; border-radius: 4px; background: #fff; }
.dr-foot__legal { display: grid; gap: 6px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .12); color: #c9c2b9; }
.dr-foot__legal p { margin: 0; max-width: 80ch; }
.dr-foot small { color: #a8a098; font-size: 12.5px; }
@media (max-width: 47.99em) { .dr-foot__top { grid-template-columns: 1fr; } .dr-foot__in { padding-top: 44px; } }

/* product safety (GPSR) */
.dr-gpsr { margin: 14px 0 0; border: 1px solid var(--dr-line); border-radius: 8px; background: #fff; color: var(--dr-ink); font-size: 13px; line-height: 1.5; }
.dr-gpsr summary { cursor: pointer; padding: 12px 14px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; }
.dr-gpsr summary::after { content: '+'; font-weight: 400; }
.dr-gpsr[open] summary::after { content: '−'; }
.dr-gpsr dl { margin: 0; padding: 0 14px 14px; display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; }
.dr-gpsr dt { color: var(--dr-muted); }
.dr-gpsr dd { margin: 0; }
.dr-gpsr a { color: var(--dr-ink); display: inline-block; padding: 8px 0; margin: -8px 0; } /* 32 px tap target, same line height */

/* bag drawer */
.dr-bagwrap { position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; color: var(--dr-ink); }
.dr-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .3); opacity: 0; transition: opacity .25s; }
.dr-bag { position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 100vw); background: #fff; display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .3s cubic-bezier(.2, .8, .2, 1), visibility 0s .3s; visibility: hidden; outline: none; }
.dr-bagwrap.is-open { pointer-events: auto; }
.dr-bagwrap.is-open .dr-scrim { opacity: 1; }
.dr-bagwrap.is-open .dr-bag { transform: none; visibility: visible; transition: transform .3s cubic-bezier(.2, .8, .2, 1); box-shadow: 0 0 50px rgba(0, 0, 0, .3); } /* no shadow while it waits off-screen */
html.dr-locked { overflow: hidden; }
.dr-bag__head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--dr-line); }
.dr-bag__head h2 { margin: 0; font-size: 18px; font-weight: 600; flex: 1; font-family: inherit; letter-spacing: 0; text-transform: none; color: var(--dr-ink); }
.dr-x { width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--dr-surface); font-size: 22px; line-height: 1; cursor: pointer; color: var(--dr-ink); }
.dr-bag__lines { flex: 1; overflow: auto; padding: 6px 20px; }
.dr-empty { color: var(--dr-muted); padding: 30px 0; margin: 0; }
.dr-line { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--dr-line); align-items: start; }
.dr-line img, .dr-line__ph { width: 64px; height: 64px; object-fit: contain; background: #f1f2f1; border-radius: 8px; display: block; }
.dr-line__main b { display: block; font-size: 14px; font-weight: 600; line-height: 1.3; }
.dr-line__main small { display: block; color: var(--dr-muted); font-size: 12.5px; margin-top: 2px; }
.dr-line__price { font-weight: 600; font-size: 14px; white-space: nowrap; }
.dr-qty { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 14px; }
.dr-qty button[data-dr-qty] { width: 30px; height: 30px; border: 1px solid var(--dr-line); border-radius: 8px; background: #fff; cursor: pointer; font-size: 16px; color: var(--dr-ink); }
.dr-qty button:disabled { opacity: .4; }
.dr-qty span { min-width: 18px; text-align: center; }
.dr-link { border: 0; background: none; color: var(--dr-muted); text-decoration: underline; cursor: pointer; font: inherit; font-size: 12.5px; margin-left: 6px; }
.dr-bag__foot { border-top: 1px solid var(--dr-line); padding: 14px 20px 18px; background: #fff; }
.dr-sum { display: flex; justify-content: space-between; font-size: 14px; padding: 3px 0; }
.dr-sum--total { font-size: 17px; font-weight: 700; padding: 8px 0 12px; }
.dr-sum--total small { font-weight: 400; font-size: 12px; color: var(--dr-muted); }
.dr-pay { margin: 8px 0 0; text-align: center; font-size: 12.5px; color: var(--dr-muted); }
.dr-bag__err { margin: 0 0 10px; padding: 10px 12px; border-radius: 8px; background: #fde9ef; color: #b00020; font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .dr-bag, .dr-scrim { transition: none; } }
/* engaged pill over a dark page: back to ink on white */
.dr-hdr .dr-hdr__pill:is(:hover, :focus-within) .dr-hdr__nav a:is(:hover, [aria-current="page"]) { background: rgba(0, 0, 0, .08); }
.dr-hdr .dr-hdr__pill:is(:hover, :focus-within) .dr-count { background: var(--dr-charcoal); color: #fff; }