.dd-widget { display: flex; flex-direction: column; gap: 0.75rem; font-family: inherit; min-height: 3.5rem; /* reserves space before JS renders content, to avoid layout shift */ } /* Cart-page auto-injection (datetime-widget.ts's maybeAutoPlaceOnCart) lands the widget as a sibling immediately before the theme's own Checkout button, which can be inside a narrow flex/inline-sized wrapper — force full width and give it breathing room so it doesn't get visually squeezed regardless of that wrapper's own layout rules. */ .dd-widget--cart-injected { width: 100%; margin-block: 1rem; } .dd-widget__heading { font-size: 1rem; font-weight: 600; margin: 0; } .dd-widget__row { display: flex; flex-wrap: wrap; gap: 0.5rem; } .dd-widget__pill { border: 1px solid currentColor; border-radius: 999px; background: transparent; padding: 0.4rem 0.9rem; font-size: 0.875rem; cursor: pointer; color: inherit; } .dd-widget__pill[aria-pressed="true"] { background: currentColor; color: Canvas; } .dd-widget__status { font-size: 0.875rem; opacity: 0.75; margin: 0; } .dd-widget__confirmation { display: flex; align-items: center; gap: 0.75rem; font-size: 0.9rem; } .dd-widget__link { background: none; border: none; padding: 0; text-decoration: underline; cursor: pointer; color: inherit; font: inherit; } .dd-widget__input { border: 1px solid currentColor; border-radius: 4px; background: transparent; padding: 0.4rem 0.75rem; font-size: 0.875rem; color: inherit; font-family: inherit; min-width: 10rem; } .dd-widget__map { width: 100%; height: 220px; border-radius: 8px; overflow: hidden; } .dd-order-confirmation { border: 1px solid currentColor; border-radius: 8px; padding: 0.75rem 1rem; display: inline-flex; flex-direction: column; gap: 0.15rem; } .dd-order-confirmation__label { font-size: 0.75rem; opacity: 0.75; margin: 0; text-transform: uppercase; letter-spacing: 0.03em; } .dd-order-confirmation__value { font-size: 1rem; font-weight: 600; margin: 0; }