:root {
    --brand-primary: #008577;
    --brand-dark: #00665B;
    --brand-white: #FFFFFF;
    --swiper-theme-color: #008577;
    --swiper-pagination-color: #008577;
    --swiper-pagination-bullet-inactive-color: #00665B;
}

body { background-color: var(--brand-white); }
:where(*, ::before, ::after) { border-color: var(--brand-primary); }
:where(input, select, textarea, button) { accent-color: var(--brand-primary); }
:where(input, textarea)::placeholder { color: #94a3b8; opacity: 1; }
:where(a, button, input, select, textarea):focus-visible {
    outline: 2px solid var(--brand-dark);
    outline-offset: 3px;
}
:where(button, a)[class*="bg-brand-primary"]:hover { background-color: var(--brand-dark); }
:where(button, a)[class*="hover:bg-brand-dark"]:hover { color: var(--brand-white); }
:where(button):disabled { cursor: not-allowed; }
.storefront-brand-logo { width: 128px; height: 88px; object-fit: contain; }

.storefront-brand-logo-default { object-fit: cover; }

/* Third-party widgets inherit the same brand palette. */
#toast-container > div {
    background-color: var(--brand-dark) !important;
    color: var(--brand-white) !important;
    box-shadow: none !important;
    opacity: 1;
}
#toast-container .toast-progress { background-color: var(--brand-white); }
.swiper-pagination-bullet { opacity: 1; background: var(--brand-white); border: 1px solid var(--brand-primary); }
.swiper-pagination-bullet-active { background: var(--brand-primary); }
input[type="range"] { accent-color: var(--brand-primary); }

@media (max-width: 1023px) {
    .storefront-brand-logo { width: 104px; height: 72px; }
}