/* Storefront component styles shared by every theme.
 * These used to be inline <style> blocks inside the page body, which is invalid HTML (W3C Nu validator). Link this file
 * once in each layout <head>; do not add <style> blocks to partials. */

/* ---- Floating WhatsApp button (_whatsapp_button.html.twig) ---- */
.sf-whatsapp { position: fixed; right: 20px; bottom: 20px; z-index: 1050; width: 56px; height: 56px; border-radius: 50%; background: #25D366; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0, 0, 0, .28); text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.sf-whatsapp:hover { transform: scale(1.07); box-shadow: 0 6px 18px rgba(0, 0, 0, .32); color: #fff; }
.sf-whatsapp:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px #128C7E; }
/* While the cookie notice is open it sits along the bottom edge: float above it instead of over its Accept button. */
html.sf-cookie-open .sf-whatsapp { bottom: 96px; }
@media (max-width: 575.98px) { html.sf-cookie-open .sf-whatsapp { bottom: 120px; } }


/* ---- Highlights ticker (_highlights_ticker.html.twig) ---- */
.sf-ticker { color: var(--sf-ticker-fg); overflow: hidden; line-height: 1; position: relative; }
.sf-ticker-track { display: flex; width: max-content; animation: sf-ticker-slide var(--sf-ticker-seconds) linear infinite; }
.sf-ticker:hover .sf-ticker-track, .sf-ticker:focus-within .sf-ticker-track { animation-play-state: paused; }
.sf-ticker-list { display: flex; flex: 0 0 auto; min-width: 100vw; justify-content: space-around; align-items: center; gap: 3rem; margin: 0; padding: .6rem 1.5rem; list-style: none; }
.sf-ticker-list li { white-space: nowrap; margin: 0; padding: 0; }
.sf-ticker-list a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.sf-ticker-list .is-gift { font-weight: 700; }
@keyframes sf-ticker-slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* top strip */
.sf-ticker--top { background: var(--sf-ticker-bg); font-size: .92rem; z-index: 1030; }
.sf-ticker--top .sf-ticker-list li { font-weight: 600; }
.sf-ticker--top .sf-ticker-list li + li::before { content: "•"; margin-right: 3rem; opacity: .6; }

/* animated band under the home banner */
.sf-ticker--band { display: flex; align-items: stretch; font-size: 1.12rem; box-shadow: 0 6px 22px rgba(0, 0, 0, .14);
    background: var(--sf-ticker-bg); background-image: linear-gradient(100deg, var(--sf-ticker-bg) 0%, color-mix(in srgb, var(--sf-ticker-bg) 62%, #ff9f1c) 50%, var(--sf-ticker-bg) 100%); background-size: 250% 100%; animation: sf-band-in .9s cubic-bezier(.2, .8, .2, 1) both, sf-band-shift 9s ease-in-out infinite; }
/* a soft light sweeping across the band */
.sf-ticker--band::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .38) 50%, transparent 62%); transform: translateX(-120%); z-index: 0; animation: sf-band-sweep 4.5s ease-in-out 1.2s infinite; }
/* Readable on ANY brand colour: every headline is a white pill with dark text (the moving gradient and light sweep only
   ever show BEHIND the pills), and the badge forces white text on a dark overlay. */
.sf-ticker--band .sf-ticker-list { padding: .7rem 1.5rem; gap: 1.25rem; }
.sf-ticker--band .sf-ticker-list li { background: #fff; color: #212529; font-weight: 700; letter-spacing: .01em; padding: .5rem 1.1rem; border-radius: 999px; box-shadow: 0 2px 8px rgba(0, 0, 0, .2); text-shadow: none; }
.sf-ticker--band .sf-ticker-list li::before { content: "✦"; display: inline-block; margin-right: .55rem; color: var(--sf-ticker-bg); animation: sf-band-twinkle 1.6s ease-in-out infinite; }
.sf-ticker--band .sf-ticker-list a { color: #212529; text-decoration-color: var(--sf-ticker-bg); }
.sf-ticker--band .sf-ticker-list .is-gift { background: #fff3bf; animation: sf-band-pop 2.4s ease-in-out infinite; transform-origin: center; }
.sf-band-badge { position: relative; z-index: 2; flex: 0 0 auto; display: flex; align-items: center; gap: .5rem; padding: 0 1.1rem 0 1rem; font-weight: 800; font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); background: rgba(0, 0, 0, .5); box-shadow: 6px 0 14px rgba(0, 0, 0, .18); }
.sf-band-dot { position: relative; width: .7rem; height: .7rem; border-radius: 50%; background: #ffd43b; }
.sf-band-dot::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #ffd43b; animation: sf-band-ring 1.6s ease-out infinite; }
.sf-ticker--band .sf-ticker-viewport { flex: 1 1 auto; min-width: 0; overflow: hidden; position: relative; z-index: 1; }
.sf-ticker--band .sf-ticker-list { min-width: 100%; }
@keyframes sf-band-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes sf-band-shift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes sf-band-sweep { 0% { transform: translateX(-120%); } 55%, 100% { transform: translateX(120%); } }
@keyframes sf-band-twinkle { 0%, 100% { transform: scale(.7) rotate(0); opacity: .55; } 50% { transform: scale(1.25) rotate(90deg); opacity: 1; } }
@keyframes sf-band-pop { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes sf-band-ring { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(3.2); opacity: 0; } }

@media (max-width: 575.98px) { .sf-ticker--band { font-size: 1rem; } .sf-band-badge .sf-band-text { display: none; } }
@media (prefers-reduced-motion: reduce) {
    .sf-ticker, .sf-ticker *, .sf-ticker::after { animation: none !important; }
    .sf-ticker--top { overflow-x: auto; }
    .sf-ticker--band .sf-ticker-viewport { overflow-x: auto; }
    .sf-ticker-list[aria-hidden="true"] { display: none; }
}


/* ---- "Check delivery to your PIN code" box (_delivery_check.html.twig) ---- */
.sf-pin { margin: 1rem 0; padding: .9rem 1rem; border: 1px solid rgba(128, 128, 128, .35); border-radius: .75rem; background: rgba(128, 128, 128, .06); max-width: 28rem; }
.sf-pin label { display: block; font-weight: 700; margin: 0 0 .5rem; }
.sf-pin-row { display: flex; gap: .5rem; }
.sf-pin-row input { flex: 1 1 auto; min-width: 0; padding: .55rem .75rem; border: 1px solid rgba(128, 128, 128, .5); border-radius: .5rem; background: #fff; color: #212529; font: inherit; letter-spacing: .08em; }
.sf-pin-row button { flex: 0 0 auto; padding: .55rem 1.1rem; border: 0; border-radius: .5rem; background: var(--bs-primary, #212529); color: var(--sf-on-primary, #fff); font: inherit; font-weight: 700; cursor: pointer; }
.sf-pin-result { margin: .6rem 0 0; font-size: .95rem; }
.sf-pin-result.is-good { color: #146c43; }
.sf-pin-result.is-bad { color: #b02a37; }


/* ---- Checkout payment method picker (_payment_methods.html.twig) ---- */
.sf-pay { border: 0; margin: 0 0 1rem; padding: 0; min-width: 0; }
.sf-pay legend { font-weight: 700; font-size: 1rem; margin-bottom: .6rem; padding: 0; float: none; width: auto; }
.sf-pay-option { display: block; position: relative; margin: 0 0 .6rem; cursor: pointer; font-weight: 400; }
.sf-pay-option input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.sf-pay-card { display: flex; align-items: center; gap: .85rem; padding: .85rem 1rem; border: 1.5px solid #ced4da; border-radius: .65rem; background: #fff; color: #212529; transition: border-color .12s, box-shadow .12s, background .12s; }
.sf-pay-option:hover .sf-pay-card { border-color: #8a8f95; }
.sf-pay-icon { flex: 0 0 auto; width: 40px; height: 40px; border-radius: .5rem; background: #f1f3f5; display: inline-flex; align-items: center; justify-content: center; color: #343a40; }
.sf-pay-text { flex: 1; min-width: 0; line-height: 1.3; }
.sf-pay-title { display: block; font-weight: 600; }
.sf-pay-hint { display: block; font-size: .85rem; color: #5c636a; margin-top: .1rem; }
.sf-pay-dot { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #adb5bd; display: inline-flex; align-items: center; justify-content: center; background: #fff; }
.sf-pay-dot svg { opacity: 0; }
.sf-pay-option input:checked + .sf-pay-card { border-color: #212529; background: #f8f9fa; box-shadow: 0 0 0 1.5px #212529; }
.sf-pay-option input:checked + .sf-pay-card .sf-pay-dot { background: #212529; border-color: #212529; }
.sf-pay-option input:checked + .sf-pay-card .sf-pay-dot svg { opacity: 1; }
.sf-pay-option input:focus-visible + .sf-pay-card { outline: 3px solid #0d6efd; outline-offset: 2px; }

/* ---- Checkout delivery address picker (_address_picker.html.twig) ---- */
.sf-addr { border: 0; margin: 0; padding: 0; min-width: 0; }
.sf-addr legend { font-weight: 700; margin: 0 0 .5rem; padding: 0; float: none; width: auto; font-size: 1rem; }
.sf-addr-option { display: block; position: relative; margin: 0 0 .55rem; cursor: pointer; font-weight: 400; }
.sf-addr-option input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.sf-addr-card { display: flex; align-items: flex-start; gap: .8rem; padding: .8rem 1rem; border: 1.5px solid rgba(128, 128, 128, .45); border-radius: .7rem; background: #fff; color: #212529; transition: border-color .12s, box-shadow .12s, background .12s; }
.sf-addr-option:hover .sf-addr-card { border-color: #8a8f95; }
.sf-addr-dot { flex: 0 0 auto; width: 22px; height: 22px; margin-top: .1rem; border-radius: 50%; border: 2px solid #adb5bd; display: inline-flex; align-items: center; justify-content: center; background: #fff; }
.sf-addr-dot::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #fff; }
.sf-addr-text { flex: 1; min-width: 0; line-height: 1.4; }
.sf-addr-text strong { display: block; }
.sf-addr-text > span { font-size: .94rem; opacity: .85; }
.sf-addr-badge { display: inline-block; margin-left: .4rem; padding: .05rem .5rem; border-radius: 99px; background: #212529; color: #fff; font-size: .72rem; font-weight: 700; vertical-align: middle; }
.sf-addr-option input:checked + .sf-addr-card { border-color: #212529; background: #f8f9fa; box-shadow: 0 0 0 1.5px #212529; }
.sf-addr-option input:checked + .sf-addr-card .sf-addr-dot { background: #212529; border-color: #212529; }
.sf-addr-option input:focus-visible + .sf-addr-card { outline: 3px solid #0d6efd; outline-offset: 2px; }

/* ---- Contact page (contact.html.twig) ---- */
.contact-details { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; margin-top: 1.25rem; }
.contact-detail { padding: 1rem 1.1rem; border: 1px solid rgba(128, 128, 128, .25); border-radius: .9rem; }
.contact-detail h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .07em; margin: 0 0 .35rem; opacity: .7; }
.contact-detail p, .contact-detail a { margin: 0; font-size: 1.02rem; word-break: break-word; }
.contact-detail .contact-sub { display: block; font-size: .85rem; margin-top: .25rem; }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; align-items: stretch; margin-top: 1.5rem; }
.contact-grid > .card { margin: 0; max-width: none; }
.contact-map { padding: 0; overflow: hidden; display: flex; flex-direction: column; min-height: 420px; }
.contact-map iframe { border: 0; width: 100%; flex: 1 1 auto; min-height: 340px; display: block; }
.contact-map-foot { padding: .8rem 1.1rem; display: flex; flex-wrap: wrap; gap: .5rem 1rem; justify-content: space-between; align-items: center; border-top: 1px solid rgba(128, 128, 128, .25); }
.contact-form textarea { min-height: 150px; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } .contact-map { min-height: 360px; } }


/* ---- Wishlist heart, active state (default theme header) ---- */
.sf-wish.is-active { color: #dc3545; border-color: #dc3545; }

/* ---- Cookie notice (default theme; Bloom and Electro style .sf-cookie in their own CSS) ---- */
.sf-cookie-default { position: fixed; left: 0; right: 0; bottom: 0; background: var(--color-text); color: #fff; padding: 1rem 1.25rem; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; z-index: 1000; }
/* The hidden attribute must win over the display above, or the notice could never be dismissed. */
.sf-cookie-default[hidden] { display: none; }
.sf-cookie-default :focus-visible { outline-color: #fff; }

/* ---- Accessibility additions shared by every theme (WCAG 2.2 AA) ---- */
/* 1.4.1: links inside running text are underlined, not told apart by colour alone. */
main p a:not(.btn), main li a:not(.btn), main td a:not(.btn), main dd a:not(.btn) { text-decoration: underline; text-underline-offset: 2px; }
/* 2.4.11: keyboard focus is never hidden behind the sticky header or the cookie notice. */
html { scroll-padding-top: 6rem; scroll-padding-bottom: 7rem; }
/* 2.5.8: icon-only controls are at least 24 by 24 CSS pixels. */
.sf-wish, .btn-sm, .btn-icon, .sf-lightbox-bar button { min-width: 24px; min-height: 24px; }
/* 2.3.3 / 2.2.2: with "reduce motion" on, the ticker is a static list instead of a moving marquee. */
@media (prefers-reduced-motion: reduce) {
    .sf-ticker-track { animation: none !important; width: auto; flex-wrap: wrap; justify-content: center; }
    .sf-ticker-list[aria-hidden="true"] { display: none; }
    .sf-ticker-list { min-width: 0; flex-wrap: wrap; justify-content: center; white-space: normal; }
    .sf-ticker--band, .sf-ticker--band::after, .sf-ticker--band .sf-ticker-list li, .sf-ticker--band .sf-ticker-list li::before, .sf-band-dot::before { animation: none !important; }
}

/* ---- Highlights ticker: pause control (WCAG 2.2.2) ---- */
.sf-ticker-pause { position: absolute; right: .6rem; top: 50%; transform: translateY(-50%); z-index: 5; display: inline-flex; align-items: center; justify-content: center; min-width: 28px; min-height: 28px; padding: 0 .35rem; border: 2px solid #fff; border-radius: 999px; background: #212529; color: #fff; font-size: .7rem; line-height: 1; cursor: pointer; }
.sf-ticker-pause:hover { background: #000; }
.sf-ticker-pause:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px #212529; }
.sf-ticker.is-paused .sf-ticker-track, .sf-ticker.is-paused, .sf-ticker.is-paused *, .sf-ticker.is-paused *::before, .sf-ticker.is-paused::after { animation-play-state: paused !important; }

/* 1.4.10 reflow: Bootstrap's wide gutter (g-5 = 3rem) makes a .row poke 12px past a phone-sized screen. */
@media (max-width: 575.98px) {
    .container > .row.g-5, .container-fluid > .row.g-5 { --bs-gutter-x: 1.5rem; }
}

/* Shopper filters (Sort / Brand / Category / On sale): on a phone each control gets the full width and the actions sit
   in one tidy row, instead of a half-width select floating in a large empty card. */
@media (max-width: 575.98px) {
    .sf-filters { padding: .85rem !important; }
    .sf-filters .row { --bs-gutter-y: .6rem; row-gap: .6rem; margin: 0; }
    .sf-filters .row > * { padding-top: 0; padding-bottom: 0; }
    .sf-filters .col-6 { flex: 0 0 100%; max-width: 100%; width: 100%; }
    .sf-filters select { width: 100%; max-width: 100%; }
    .sf-filters .btn { flex: 1 1 auto; text-align: center; }
}

/* A table wider than a phone scrolls inside its own card instead of widening the whole page (WCAG 1.4.10). */
.card:has(table) { overflow-x: auto; }

/* Order lists on a phone: one stacked block per order instead of a five-column table. */
@media (max-width: 575.98px) {
    table.sf-stack, table.sf-stack tbody, table.sf-stack tr, table.sf-stack td { display: block; width: 100%; }
    table.sf-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    table.sf-stack tr { padding: .75rem 0; border-bottom: 1px solid rgba(0, 0, 0, .1); }
    table.sf-stack tr:last-child { border-bottom: 0; }
    table.sf-stack td { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .2rem 0; border: 0; text-align: right; }
    table.sf-stack td[data-label]::before { content: attr(data-label); font-weight: 600; text-align: left; color: inherit; opacity: .75; }
    table.sf-stack td:last-child { justify-content: flex-end; padding-top: .5rem; }
}

/* Saved addresses: label on its own line, actions in one even row below it. Margins are forced because the themes'
   compatibility layer puts spacing on forms and buttons, which left big gaps between the button rows. */
.sf-address-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem .75rem; }
.sf-address-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.sf-address-actions form { margin: 0 !important; padding: 0 !important; display: block; }
.sf-address-actions .btn { margin: 0 !important; white-space: nowrap; min-height: 2.25rem; padding-top: .35rem; padding-bottom: .35rem; display: inline-flex; align-items: center; justify-content: center; }
.sf-address .sf-address-head + p { margin-top: .5rem !important; }
@media (max-width: 575.98px) {
    .sf-address-head { flex-direction: column; align-items: stretch; gap: .5rem; }
    .sf-address-actions { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; gap: .5rem; }
    .sf-address-actions .btn { width: 100%; }
    .sf-address-actions > form:has(.btn:not(.btn-secondary)) { grid-column: 1 / -1; }
}

/* Quantity, Add to cart and Wishlist on a product/service page: on a phone the quantity and Add to cart share one row
   (Add to cart takes the rest), and Wishlist sits full width below as a real outline button — it used to be a second
   solid red button the same as Add to cart, with ragged gaps between the rows. */
.sf-buy .sf-wish { background: #fff; color: var(--sf-primary-strong, var(--bs-primary)); border: 2px solid var(--sf-primary-strong, var(--bs-primary)); }
.sf-buy .sf-wish:hover, .sf-buy .sf-wish[aria-pressed="true"] { background: color-mix(in srgb, var(--sf-primary-strong, var(--bs-primary)) 14%, #fff); color: var(--sf-primary-on-tint, var(--sf-primary-strong, var(--bs-primary))); filter: none; }
.sf-buy .btn, .sf-buy input[type=number] { margin: 0; }
@media (max-width: 575.98px) {
    .sf-buy { gap: .6rem !important; align-items: stretch !important; }
    .sf-buy input[type=number] { width: 5rem !important; flex: 0 0 5rem; }
    .sf-buy button[type=submit] { flex: 1 1 0; min-width: 0; padding: .75rem 1rem !important; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; }
    .sf-buy .sf-wish { flex: 1 1 100%; padding: .7rem 1rem !important; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; }
}

/* Cart on a phone: each line is a block — item first, then price / quantity (with Update) / total, then Remove —
   with quantity field, Update and Remove buttons all the same height. */
@media (max-width: 575.98px) {
    table.sf-cart td:first-child { display: block; text-align: left; padding-bottom: .5rem; }
    table.sf-cart td[data-label="Quantity"] form { margin: 0; justify-content: flex-end; align-items: center; flex-wrap: nowrap; gap: .5rem; }
    table.sf-cart input[type=number] { width: 4.5rem !important; height: 2.5rem; margin: 0; padding: .25rem .5rem; }
    table.sf-cart td form .btn { margin: 0 !important; height: 2.5rem; min-height: 2.5rem; padding: 0 1rem !important; display: inline-flex; align-items: center; justify-content: center; }
    table.sf-cart td.sf-cart-remove .btn, table.sf-cart td:last-child form .btn[aria-label] { width: 2.5rem; padding: 0 !important; border-radius: 50% !important; }
    table.sf-cart td:last-child form { margin: 0; }
}

/* Cart (all screen sizes): everything in a line is centred on one horizontal axis, and the quantity field, Update and
   Remove share one control height; Remove is a true circle; the checkout button is a normal-height, centred button. */
table.sf-cart td { vertical-align: middle; }
table.sf-cart td[data-label="Quantity"] form { display: flex; align-items: center; gap: .5rem; margin: 0; }
table.sf-cart input[type=number] { width: 5rem; height: 2.5rem; margin: 0; padding: .25rem .6rem; }
table.sf-cart td form .btn { margin: 0 !important; height: 2.5rem; min-height: 2.5rem; padding: 0 1.1rem !important; display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
table.sf-cart td form .btn[aria-label] { width: 2.5rem; padding: 0 !important; border-radius: 50% !important; }
table.sf-cart td:last-child form { margin: 0; }
.sf-proceed { display: flex; align-items: center; justify-content: center; gap: .4rem; text-align: center; min-height: 3rem; padding-top: .6rem !important; padding-bottom: .6rem !important; }