/*
 * Darealmop_ClickAndCollect — storefront structural skeleton.
 *
 * STRUCTURE ONLY — this stylesheet ships NO appearance (CONVENTIONS §7). Every
 * painted value is a `--dm-click-collect-*` custom property declared with NO
 * literal fallback: a theme that sets no tokens gets unpainted-but-structurally
 * -sound markup, and a theme re-skins purely by setting tokens on :root. Only
 * structural literals (display, flex, gap/px sizing, radius) appear directly.
 *
 * TOKEN CONTRACT — `--dm-click-collect-*` (v0.1.0). Two surfaces, standard
 * waterfall (per-surface → module-family → nothing):
 *
 *   Family layer (set once to paint everything):
 *     --dm-click-collect-bg        --dm-click-collect-text
 *     --dm-click-collect-border    --dm-click-collect-radius
 *     --dm-click-collect-accent    --dm-click-collect-font
 *
 *   Notice surface (--dm-click-collect-notice-*, overrides family):
 *     --dm-click-collect-notice-bg     --dm-click-collect-notice-text
 *     --dm-click-collect-notice-border --dm-click-collect-notice-radius
 *     --dm-click-collect-notice-icon   (background of the leading icon dot)
 *
 *   Picker surface (--dm-click-collect-picker-*, overrides family):
 *     --dm-click-collect-picker-label-color
 *     --dm-click-collect-picker-field-bg   --dm-click-collect-picker-field-text
 *     --dm-click-collect-picker-field-border
 *     --dm-click-collect-picker-field-radius
 */

/* ---- Notice (PDP + cart) ---------------------------------------------- */
.dm-cc-notice {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: var(--dm-click-collect-notice-margin, 12px 0);
    padding: var(--dm-click-collect-notice-padding, 10px 12px);
    background: var(--dm-click-collect-notice-bg, var(--dm-click-collect-bg));
    color: var(--dm-click-collect-notice-text, var(--dm-click-collect-text));
    border: var(--dm-click-collect-notice-border, var(--dm-click-collect-border));
    border-radius: var(--dm-click-collect-notice-radius, var(--dm-click-collect-radius));
    font-family: var(--dm-click-collect-font, inherit);
    font-size: var(--dm-click-collect-notice-size, 14px);
    line-height: 1.4;
}

.dm-cc-notice__icon {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--dm-click-collect-notice-icon, var(--dm-click-collect-accent));
}

.dm-cc-notice__text {
    flex: 1 1 auto;
}

/* ---- Checkout branch picker ------------------------------------------- */
.dm-cc-picker {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: var(--dm-click-collect-picker-margin, 12px 0);
    font-family: var(--dm-click-collect-font, inherit);
}

.dm-cc-picker__label {
    font-size: var(--dm-click-collect-picker-label-size, 13px);
    font-weight: var(--dm-click-collect-picker-label-weight, 600);
    color: var(--dm-click-collect-picker-label-color, var(--dm-click-collect-text));
}

.dm-cc-picker__select,
.dm-cc-picker__input {
    width: 100%;
    box-sizing: border-box;
    padding: var(--dm-click-collect-picker-field-padding, 8px 10px);
    background: var(--dm-click-collect-picker-field-bg, var(--dm-click-collect-bg));
    color: var(--dm-click-collect-picker-field-text, var(--dm-click-collect-text));
    border: var(--dm-click-collect-picker-field-border, var(--dm-click-collect-border));
    border-radius: var(--dm-click-collect-picker-field-radius, var(--dm-click-collect-radius));
    font: inherit;
}