/* DigieSales Free Shipping Bar — frontend base styles */ .dsfsb { --dsfsb-bg: #111; --dsfsb-text: #fff; --dsfsb-link: #ffd166; --dsfsb-progress-bg: rgba(255,255,255,0.18); --dsfsb-progress-fill: #34d399; --dsfsb-progress-text: #fff; --dsfsb-radius: 0px; --dsfsb-shadow: 0 2px 6px rgba(0,0,0,0.08); --dsfsb-font-size: 13px; --dsfsb-text-align: center; position: sticky; top: 0; left: 0; right: 0; /* Stay just below the WordPress admin bar (#wpadminbar is z-index 99999) so its dropdown menus render on top of the bar for logged-in admins, while still sitting above typical theme headers. Do NOT raise to 99999+. */ z-index: 99990; background: var(--dsfsb-bg); color: var(--dsfsb-text); box-shadow: var(--dsfsb-shadow); border-radius: var(--dsfsb-radius); font-size: var(--dsfsb-font-size); text-align: var(--dsfsb-text-align); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; transform: translateY(0); transition: transform .3s ease, opacity .3s ease; } .dsfsb--position-top { top: 0; } .dsfsb--position-bottom { position: sticky; top: auto; bottom: 0; } .dsfsb.is-hidden { transform: translateY(-100%); opacity: 0; pointer-events: none; height: 0; min-height: 0; padding: 0; overflow: hidden; } .dsfsb--position-bottom.is-hidden { transform: translateY(100%); } .dsfsb__inner { display: flex; align-items: center; justify-content: var(--dsfsb-text-align); gap: 8px; padding: 18px 14px !important; min-height: 72px !important; line-height: 1.3; box-sizing: border-box; } .dsfsb__icon { font-size: 1em; line-height: 1; } .dsfsb__message { flex: 1; line-height: 1.3; } .dsfsb__message a { color: var(--dsfsb-link); text-decoration: underline; } .dsfsb__close { background: transparent; color: inherit; border: 0; font-size: 18px; line-height: 1; cursor: pointer; padding: 0 4px; opacity: .7; } .dsfsb__close:hover { opacity: 1; } /* Mini-cart variant */ .dsfsb--mini-cart { position: static; margin: 8px 0 12px; border-radius: 8px; } .dsfsb--mini-cart .dsfsb__inner { padding: 8px 12px; } /* Responsive */ @media (max-width: 600px) { .dsfsb__inner { padding: 8px 10px; gap: 6px; min-height: 40px; } } /* Sit below the WordPress admin bar when it is rendered on the storefront. JS handles dynamic positioning (it sets inline `top` based on the live admin bar height), but these rules give the correct offset before JS runs. */ body.admin-bar .dsfsb--position-top { top: 32px; } @media screen and (max-width: 782px) { body.admin-bar .dsfsb--position-top { top: 46px; } } @media screen and (max-width: 600px) { body.admin-bar .dsfsb--position-top { top: 0; } } /* When the bar is visible, JS pushes the first element child of down by the bar's height. The padding-on-body approach was abandoned because it exposed 's background color and created a visible dark gap between the fixed bar and the site header on dark-themed sites. */