/* Shared storefront header and footer. Existing menu and search hooks stay intact. */
.site-header { --header-ink: #203c4c; --header-muted: #647b8c; --header-border: #e3eaef; box-shadow: 0 4px 18px rgba(22,45,60,.035); }
.site-header .header-up { gap: 24px; height: 84px; }
.site-header .header-logo { height: 44px; max-width: 170px; }
.site-header .header-up > .search-container { max-width: 640px; height: 48px; }
.site-header .search-container { border-radius: 10px; border-color: #e3eaef; background: #f5f8fa; }
.site-header .search-container .search-input { font-size: 13px; }
.site-header .search-action { background: transparent; color: #456274; }
.site-header .search-icon { color: #456274; }
.site-header .header-up-left-content { gap: 8px; }
.site-header .header-up-left-content .header-signin { padding-inline: 14px; border: 1px solid #e3eaef; border-radius: 10px; background: #fff; color: #203c4c; font-size: 12px; }
.site-header .header-up-left-content .header-signin:hover { transform: none; border-color: #d7aab7; background: #fff5f7; color: #bd173f; }
.site-header .header-up-left-content .header-signin:active { transform: none; background: #fff0f4; color: #bd173f; }
.site-header .cart-button { border-radius: 10px; background: #f5f8fa !important; }
.site-header .cart-button .count { border-radius: 50%; top: -5px; right: -5px; font-size: 10px; }
.site-header .header-down { height: 48px; border-top-color: #edf1f4; }
.site-header .header-down-left-content { font-size: 11px; color: #647b8c; }
.site-header .search-recommendation { padding: 18px; border-top: 0; }
.site-header .search-recommendation-title { display: block; margin-bottom: 12px; color: #647b8c; font-size: 12px; font-weight: 700; }
.site-header .search-recommendation-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
.site-header .search-recommendation-item { display: flex; align-items: center; gap: 8px; min-height: 44px; margin: 0; padding: 10px; border: 1px solid #e3eaef; border-radius: 8px; background: #f5f8fa; color: #203c4c; font-size: 12px; text-align: start; }
.site-header .search-recommendation-item i { flex-shrink: 0; color: #8195a2; font-size: 14px; }
.site-header .search-recommendation-item bdi { overflow-wrap: anywhere; }
.site-header .search-recommendation-item:hover { border-color: #efb9c7; background: #fff5f7; color: #bd173f; }
.site-header .search-recommendation-item:hover i { color: #bd173f; }
.site-header .search-recommendation-item:focus-visible { outline: 2px solid #bd173f; outline-offset: 2px; }
@media (min-width: 992px) {
    .site-header .mega-menu-trigger { min-height: 40px; border-radius: 8px; background: #f3f7f9; color: #203c4c; font-size: 12px; font-weight: 700; }
    .site-header .mega-menu-trigger:hover,
    .site-header .mega-menu-trigger[aria-expanded="true"] { background: #fff0f4; color: #bd173f; }
    .site-header .mega-nav-link { font-size: 12px; color: #516d7e; }
}
.site-footer { --footer-ink: #f2f7fa; --footer-muted: #b1c4d0; --footer-border: #2b4657; --footer-accent: #ff9bb4; margin-top: 48px; padding-top: 32px; background: #142e3e; color: var(--footer-ink); border-top: 0; }
.site-footer__main { grid-template-columns: minmax(220px,1.1fr) minmax(0,2fr) minmax(130px,.6fr); gap: 32px; padding-bottom: 28px; }
.site-footer__brand-link { padding: 9px 12px; border-radius: 10px; background: #fff; }
.site-footer .footer-logo { max-width: 146px; height: 36px; }
.site-footer__about { margin-block: 16px 14px; font-size: 12px; color: var(--footer-muted); line-height: 2; }
.site-footer__detail { font-size: 12px; color: var(--footer-muted); overflow-wrap: anywhere; }
.site-footer__links h2,
.site-footer__trust h2 { margin-block-end: 12px; color: var(--footer-ink); font-size: 13px; }
.site-footer__links a { min-height: 36px; font-size: 12px; color: var(--footer-muted); }
.site-footer__navigation { gap: 22px; }
.site-footer__trust-content { width: fit-content; max-width: 100%; padding: 12px; border-radius: 12px; background: #fff; }
.site-footer__contact { gap: 20px; padding-block: 18px; border-top-color: var(--footer-border); }
.site-footer__support-icon { border: 1px solid #3b5566; background: #203e50; color: #ff9bb4; }
.site-footer__support a { color: var(--footer-ink); }
.site-footer__social-link { width: 40px; height: 40px; border-radius: 9px; border-color: #3b5566; background: transparent; color: #d1dfe7; }
.site-footer__social-link:hover { background: #254557; color: #fff; }
.site-footer__social h2 { color: var(--footer-muted); }
.site-footer__copyright { color: #98b0bf; border-top-color: var(--footer-border); font-size: 11px; }
.site-footer__copyright a { color: #d4e0e8; }
@media (max-width: 1199.98px) and (min-width: 768px) {
    .site-footer__main { grid-template-columns: minmax(0,1fr) minmax(0,2fr); }
    .site-footer__trust { grid-column: 1; }
}
@media (max-width: 991.98px) {
    .site-header .header-up { height: auto; gap: 12px; }
    .site-header .header-up > .search-container { max-width: none; height: 44px; }
    .site-header .header-up-left-content .header-signin { width: 44px; padding: 0; }
}
@media (max-width: 767.98px) {
    .site-header .search-recommendation { padding: 14px; }
    .site-header .search-recommendation-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .site-footer { padding-top: 24px; margin-top: 32px; }
    .site-footer__main { grid-template-columns: minmax(0,1fr); gap: 24px; padding-bottom: 22px; }
    .site-footer__brand { padding-bottom: 20px; border-bottom: 1px solid var(--footer-border); }
    .site-footer__about { max-width: 48ch; }
    .site-footer__navigation { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
    .site-footer__links a { min-height: 44px; }
    .site-footer__trust { display: flex; align-items: center; gap: 16px; }
    .site-footer__trust h2 { margin: 0; }
    .site-footer__trust-content { padding: 8px 12px; }
    .site-footer__contact { flex-direction: column; align-items: stretch; gap: 20px; }
    .site-footer__social-link { width: 44px; height: 44px; }
}

/* Support stays a light pill until asked for; the crimson disc is the only loud part, and the panel names each channel with its number. */
nav.site-support-dock { padding: 0; border: 0; border-radius: 999px; background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.site-support-dock__disclosure { position: relative; }
.site-support-dock__toggle { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 5px 5px 5px 16px; border: 1px solid #e3eaef; border-radius: 999px; background: #fff; color: #203c4c; box-shadow: 0 8px 24px rgba(32,60,76,.16); cursor: pointer; list-style: none; font-size: 12px; font-weight: 700; transition: border-color .15s; }
.site-support-dock__toggle::-webkit-details-marker { display: none; }
.site-support-dock__toggle:hover, .site-support-dock__disclosure[open] .site-support-dock__toggle { border-color: #d9a4b2; }
.site-support-dock__icon { display: grid; place-items: center; flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%; background: #bd173f; color: #fff; font-size: 18px; }
.site-support-dock__disclosure[open] .site-support-dock__icon { background: #203c4c; }
.site-support-dock__disclosure[open] .site-support-dock__icon::before { content: "\ea16"; }
.site-support-dock__toggle:focus-visible { outline: 2px solid #bd173f; outline-offset: 3px; }
.site-support-dock__links { position: absolute; inset-inline-start: 0; bottom: calc(100% + 10px); display: flex; flex-direction: column; gap: 2px; width: 264px; padding: 8px; border: 1px solid #e3eaef; border-radius: 14px; background: #fff; box-shadow: 0 12px 32px rgba(32,60,76,.18); transform-origin: bottom right; animation: support-dock-in .16s ease-out; }
.site-support-dock__links strong { padding: 6px 8px 8px; color: #203c4c; font-size: 13px; font-weight: 800; }
nav.site-support-dock .site-support-dock__links .fixed-btn { display: grid; grid-template-columns: 40px minmax(0,1fr); grid-template-rows: auto auto; align-items: center; gap: 0 12px; width: 100%; height: auto; min-height: 56px; padding: 8px; border-radius: 10px; background: transparent; text-decoration: none; }
nav.site-support-dock .site-support-dock__links .fixed-btn:hover { background: #f5f8fa; }
nav.site-support-dock .site-support-dock__links .fixed-btn:focus-visible { background: #f5f8fa; outline: 2px solid #203c4c; outline-offset: 0; }
nav.site-support-dock .site-support-dock__links .fixed-btn i { grid-row: 1 / 3; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; font-size: 20px; }
nav.site-support-dock .site-support-dock__links .whatsapp-btn i { background: #eaf8f0; color: #168c59; }
nav.site-support-dock .site-support-dock__links .call-btn i { background: #fff0f4; color: #bd173f; }
nav.site-support-dock .site-support-dock__links .fixed-btn span { position: static; grid-row: 1; align-self: end; width: auto; max-width: none; padding: 0; background: transparent; color: #203c4c; font-size: 12px; font-weight: 700; line-height: 1.7; box-shadow: none; opacity: 1; visibility: visible; transform: none; white-space: normal; overflow-wrap: anywhere; }
nav.site-support-dock .site-support-dock__links .fixed-btn:hover span { padding: 0; transform: none; }
nav.site-support-dock .site-support-dock__links .fixed-btn small { grid-row: 2; align-self: start; justify-self: start; color: #647b8c; font-size: 12px; line-height: 1.7; unicode-bidi: isolate; }
.fixed-btn > small { display: none; }
nav.site-support-dock .fixed-btn > small { display: block; }
@keyframes support-dock-in { from { opacity: 0; transform: translateY(6px) scale(.98); } }
@media (max-width: 767.98px) {
    .site-support-dock__toggle { gap: 0; padding: 4px; }
    .site-support-dock__toggle > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .site-support-dock__icon { flex-basis: 40px; width: 40px; height: 40px; }
    .site-support-dock__links { width: min(264px, calc(100vw - 24px)); }
}
@media (prefers-reduced-motion: reduce) {
    .site-support-dock__toggle { transition: none; }
    .site-support-dock__links { animation: none; }
}

/* Customer account shortcuts share the storefront's neutral surfaces. */
.site-header .storefront-account-menu {
    width: 280px;
    max-width: calc(100vw - 32px);
    padding: 8px;
    border: 1px solid #dfe7ed;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 12px 36px #142e3e1a;
    color: #203c4c;
}
.site-header .storefront-account-menu__identity {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
    padding: 12px;
    border-bottom: 1px solid #e8edf1;
}
.site-header .storefront-account-menu__avatar { display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; border: 1px solid #e2e9ee; border-radius: 12px; background: #f5f8fa; color: #527184; }
.site-header .storefront-account-menu__identity > span:last-child { min-width: 0; }
.site-header .storefront-account-menu__identity small { display: block; color: #64748b; font-size: 10px; margin-bottom: 4px; }
.site-header .storefront-account-menu__identity strong { display: block; font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
.site-header .storefront-account-menu .dropdown-item { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 12px; border-radius: 8px; color: #203c4c; font-size: 12px; white-space: normal; }
.site-header .storefront-account-menu .dropdown-item i { flex: 0 0 18px; color: #617e90; font-size: 17px; }
.site-header .storefront-account-menu .dropdown-item:hover { background: #f3f7f9; }
.site-header .storefront-account-menu .dropdown-item:focus-visible { outline: 2px solid #d7194b; outline-offset: -2px; background: #f3f7f9; }
.site-header .storefront-account-menu__balance { margin-inline-start: auto; padding: 3px 7px; border-radius: 6px; background: #f0f6f5; color: #326252; font-size: 10px; overflow-wrap: anywhere; }
.site-header .storefront-account-menu li:last-child { margin-top: 6px; padding-top: 6px; border-top: 1px solid #e8edf1; }
.site-header .storefront-account-menu .storefront-account-menu__logout, .site-header .storefront-account-menu .storefront-account-menu__logout i { color: #b71e43; }
.site-header .storefront-account-menu .storefront-account-menu__logout:hover { background: #fff1f5; }

/* Frosted surface lives on its own layer so fixed menus keep their viewport. */
.site-header { background: #fff; border-block-end-color: rgba(214, 226, 232, .8); box-shadow: 0 4px 24px rgba(25, 55, 72, .06), inset 0 1px 0 #fff; }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .site-header { background: transparent; }
    .site-header::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: rgba(255, 255, 255, .76); -webkit-backdrop-filter: blur(20px) saturate(135%); backdrop-filter: blur(20px) saturate(135%); }
    .site-header .search-container { background: rgba(245, 248, 250, .8); border-color: rgba(214, 226, 232, .85); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9); }
    .site-header .header-up-left-content .header-signin { background: rgba(255, 255, 255, .7); box-shadow: inset 0 1px 0 #fff; }
    .site-header .cart-button { background: rgba(245, 248, 250, .8) !important; box-shadow: inset 0 1px 0 #fff; }
    .site-header .header-down { border-block-start-color: rgba(227, 234, 239, .65); }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
    .site-header { background: #fff; border-block-end-color: #b9c8d1; }
    .site-header::before { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
    .site-header .search-container, .site-header .cart-button { background: #f5f8fa !important; }
    .site-header .header-up-left-content .header-signin { background: #fff; }
}

.site-support-dock__links > strong { order: -2; }
nav.site-support-dock .site-support-dock__links .support-ai-btn { border: 0; font: inherit; text-align: start; cursor: pointer; order: -1; }
nav.site-support-dock .site-support-dock__links .support-ai-btn i { background: #edf7f5; color: #167c6d; }
.support-chat { position: fixed; inset-block: auto 88px; inset-inline: 24px auto; inline-size: min(420px, calc(100vw - 32px)); block-size: min(650px, calc(100dvh - 112px)); max-inline-size: none; max-block-size: none; margin: 0; padding: 0; overflow: hidden; border: 1px solid #dce6e9; border-radius: 20px; background: #fff; color: #193748; box-shadow: 0 24px 80px #19374830; font-family: inherit; }
.support-chat[open] { display: grid; grid-template-rows: auto auto minmax(0,1fr) auto auto auto; }
.support-chat::backdrop { background: #19374830; }
.support-chat__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-block-end: 1px solid #e8eff1; }
.support-chat__header strong { display: block; font-size: 15px; }
.support-chat__header span { display: block; margin-block-start: 4px; font-size: 11px; color: #617885; }
.support-chat__header button { flex-shrink: 0; display: grid; place-items: center; inline-size: 44px; block-size: 44px; border: 1px solid #e3eaef; border-radius: 10px; background: #fff; color: #193748; font-size: 25px; cursor: pointer; }
.support-chat__notice { margin: 0; padding: 12px 20px; background: #f3f8f7; color: #49656d; font-size: 11px; line-height: 1.9; }
.support-chat__messages { min-block-size: 100px; overflow-y: auto; overscroll-behavior: contain; padding: 16px; }
.support-chat__empty { padding: 24px 10px; color: #617885; font-size: 13px; line-height: 2; text-align: center; }
.support-chat__empty strong { display: block; margin-block-end: 8px; color: #193748; font-size: 16px; }
.support-chat__message { max-inline-size: 92%; margin-block-end: 14px; padding: 12px 14px; border-radius: 12px; background: #f1f5f7; }
.support-chat__message--user { margin-inline-end: auto; background: #fff0f4; }
.support-chat__message--assistant { margin-inline-start: auto; }
.support-chat__message small { display: block; margin-block-end: 6px; color: #617885; font-size: 10px; }
.support-chat__message p { margin: 0; color: #193748; font-size: 13px; line-height: 2; white-space: pre-wrap; overflow-wrap: anywhere; }
.support-chat__waiting { color: #617885; font-size: 12px; }
.support-chat__error { margin: 0; padding: 10px 20px; color: #a7193d; background: #fff5f7; font-size: 12px; line-height: 1.8; }
.support-chat__form { display: flex; align-items: end; gap: 8px; padding: 14px 16px; border-block-start: 1px solid #e8eff1; }
.support-chat__form textarea { flex: 1; min-inline-size: 0; min-block-size: 52px; max-block-size: 110px; padding: 10px; resize: vertical; border: 1px solid #dce6e9; border-radius: 10px; background: #fff; color: #193748; font: inherit; font-size: 16px; line-height: 1.7; }
.support-chat__form button { min-block-size: 46px; padding: 10px 14px; border: 0; border-radius: 10px; background: #df174b; color: #fff; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.support-chat button:disabled { opacity: .5; cursor: not-allowed; }
.support-chat :is(button,a,textarea):focus-visible { outline: 2px solid #193748; outline-offset: 2px; }
.support-chat__human { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 10px 20px; border-block-start: 1px solid #edf2f4; color: #617885; font-size: 11px; }
.support-chat__human a { color: #193748; text-decoration: underline; text-underline-offset: 4px; }
@media (width <= 575.98px) { .support-chat { inset-inline: 12px; inset-block-end: max(12px, env(safe-area-inset-bottom)); inline-size: calc(100vw - 24px); block-size: min(650px, calc(100dvh - 24px)); } }

@media (height <= 540px) { .support-chat { inset-block: 12px; block-size: calc(100dvh - 24px); overflow-y: auto; } .support-chat[open] { display: block; } .support-chat__messages { block-size: 160px; } }

.support-chat__faqs{display:flex;gap:6px;flex-wrap:wrap;padding:10px 16px;border-bottom:1px solid #e6edf4;max-height:140px;overflow:auto;flex-shrink:0}
.support-chat__faqs small{width:100%;color:#526b82}
.support-chat__faqs button{border:1px solid #dce6ef;border-radius:14px;background:#fff;color:#203448;padding:7px 10px;font:inherit;font-size:12px;text-align:start}
.support-chat__faqs button:hover{border-color:#df174b;background:#fff5f8}
.support-chat__faqs button:focus-visible{outline:2px solid #df174b;outline-offset:2px}
.support-chat__waiting{color:#526b82;font-size:12px;padding:10px;border-inline-start:3px solid #df174b}
.site-footer__social-link.site-footer__social-link--brand { width:44px; height:44px; border:0; border-radius:11px; background:transparent; }
.site-footer__social-link--brand img { display:block; width:44px; height:44px; }
.site-footer__social-links { flex-wrap:wrap; gap:10px; }
.site-footer__social-link:focus-visible { outline:3px solid #fff !important; outline-offset:4px; }