.puppy-promotion {
    --promotion-bg: #edf4ea;
    --promotion-text: #243f2c;
    --promotion-border: #a1b99a;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px 24px;
    box-sizing: border-box;
    padding: 7px 16px;
    min-height: 38px;
    background: var(--promotion-bg);
    color: var(--promotion-text);
    border-bottom: 1px solid var(--promotion-border);
    font-weight: 500;
    font-size: 13px;
    line-height: 1.4;
    width: 100%;
}
.puppy-dark .puppy-promotion {
    --promotion-bg: #203528;
    --promotion-text: #f2f6ec;
    --promotion-border: #49614c;
}
.puppy-promotion__shipping, .puppy-promotion__coupon, .puppy-promotion__copy {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.puppy-promotion svg {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
}
.puppy-promotion button {
    color: inherit;
    font: inherit;
    cursor: pointer;
    margin: 0;
    min-height: 28px;
    box-shadow: none;
    border-radius: 5px;
}
.puppy-promotion__copy {
    border: 1px dashed var(--promotion-border);
    padding: 3px 8px;
    background: transparent;
}
.puppy-promotion__copy code {
    color: inherit;
    background: transparent;
    padding: 0;
    border: 0;
    font: 750 13px/1.4 monospace;
}
.puppy-promotion .puppy-promotion__apply {
    border: 1px solid var(--promotion-text);
    background: var(--promotion-text);
    color: var(--promotion-bg);
    padding: 4px 12px;
    font-weight: 650;
}
.puppy-promotion button:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.puppy-promotion button:disabled { opacity: .65; cursor: wait; }
.puppy-promotion__form { margin: 0; }
.puppy-promotion__applied { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; font-weight: 650; }
.puppy-promotion [hidden] { display: none !important; }
.puppy-promotion__status:empty { display: none; }
.puppy-promotion__status { font-size: 12px; }
@media (max-width: 600px) {
    .puppy-promotion { gap: 3px 12px; padding: 6px 10px; font-size: 12px; }
    .puppy-promotion__coupon { gap: 5px; }
}