html {
scroll-behavior: smooth;
}
/* =====================================================
GLOBAL RESET
===================================================== */
* {
box-sizing: border-box;
}
html {
width: 100%;
margin: 0;
padding: 0;
overflow-x: clip;
scroll-behavior: smooth;
}
body {
width: 100%;
min-height: 100vh;
margin: 0;
padding: 0;
overflow-x: clip;
background: #F6F3EE;
color: #1C1C1C;
}
img,
video {
display: block;
max-width: 100%;
}
button,
input,
textarea,
select {
font: inherit;
}
a {
color: inherit;
}
main,
section,
header,
footer {
max-width: 100%;
}
/* =====================================================
SHARED HEADER
===================================================== */
.site-header {
position: fixed;
top: var(--announcement-bar-height, 0px);
left: 0;
z-index: 1000;
width: 100%;
height: 96px;
padding:
0 28px;
display: grid;
grid-template-columns:
1fr auto 1fr;
align-items: center;
background:
rgba(20, 20, 20, 0.42);
border-bottom:
1px solid
rgba(255, 255, 255, 0.08);
backdrop-filter:
saturate(180%) blur(22px);
-webkit-backdrop-filter:
saturate(180%) blur(22px);
transition:
top 0.25s ease,
height 0.35s ease,
background 0.35s ease,
backdrop-filter 0.35s ease,
border-color 0.35s ease;
}
.site-header.scrolled {
height: 76px;
background:
rgba(18, 18, 18, 0.72);
backdrop-filter:
saturate(200%) blur(28px);
-webkit-backdrop-filter:
saturate(200%) blur(28px);
border-bottom:
1px solid
rgba(255,255,255,.08);
}
.site-header.scrolled
.site-logo-circle {
width: 43px;
height: 43px;
}
.site-header.scrolled
.site-brand-name {
font-size: 6px;
letter-spacing: 1.6px;
}
/* =====================================================
MENU BUTTON
===================================================== */
.menu-open-button {
width: 42px;
height: 42px;
padding: 0;
display: flex;
flex-direction: column;
justify-content: center;
gap: 7px;
justify-self: start;
border: 0;
background: transparent;
cursor: pointer;
}
.menu-open-button span {
width: 24px;
height: 1px;
display: block;
background: #F6F3EE;
transition:
width 0.3s ease,
transform 0.3s ease;
}
.menu-open-button span:last-child {
width: 17px;
}
.menu-open-button:hover span:last-child {
width: 24px;
}
/* =====================================================
CENTER BRAND
===================================================== */
.site-brand {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
justify-self: center;
color: #F6F3EE;
text-align: center;
text-decoration: none;
}
.site-logo-circle {
width: 53px;
height: 53px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
overflow: hidden;
background: #F6F3EE;
border:
1px solid
rgba(255, 255, 255, 0.35);
box-shadow:
0 7px 20px
rgba(0, 0, 0, 0.18);
}
.site-logo {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
.site-brand-name {
font-family:
'Montserrat',
sans-serif;
font-size: 7px;
font-weight: 600;
line-height: 1.15;
letter-spacing: 2px;
text-transform: uppercase;
color: #F6F3EE;
}
/* =====================================================
HEADER ACTIONS
===================================================== */
.header-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 18px;
}
.header-action-link {
position: relative;
min-width: 34px;
min-height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #F6F3EE;
text-decoration: none;
}
/* ================= WISHLIST ================= */
.wishlist-header-link {
width: 36px;
height: 36px;
}
.wishlist-heart-icon {
font-family:
'Cormorant Garamond',
serif;
font-size: 29px;
line-height: 1;
color: #F6F3EE;
transition:
color 0.3s ease,
transform 0.3s ease;
}
.wishlist-header-link.has-items
.wishlist-heart-icon {
color: #B52D48;
transform: scale(1.04);
}
.wishlist-indicator {
position: absolute;
top: 2px;
right: 1px;
width: 7px;
height: 7px;
border-radius: 50%;
background: #B52D48;
border:
1px solid
rgba(246, 243, 238, 0.9);
box-shadow:
0 0 0 2px
rgba(28, 28, 28, 0.35);
}
/* ================= BAG ================= */
.bag-header-link {
gap: 6px;
padding:
0 4px;
}
.bag-icon {
width: 20px;
height: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.bag-icon svg {
width: 100%;
height: 100%;
fill: none;
stroke: currentColor;
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
}
.bag-label {
font-family:
'Montserrat',
sans-serif;
font-size: 9px;
font-weight: 500;
letter-spacing: 1.7px;
}
/* ================= BAG COUNT ================= */
.header-counter {
position: absolute;
top: -2px;
right: -7px;
min-width: 17px;
height: 17px;
padding:
0 4px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #7A2638;
color: #FFFFFF;
font-family:
'Montserrat',
sans-serif;
font-size: 8px;
font-weight: 600;
line-height: 1;
border:
1px solid
rgba(246, 243, 238, 0.85);
}
/* =====================================================
WISHLIST ANIMATION
===================================================== */
.wishlist-heart-icon.animate {
animation:
wishlistHeartPop
0.42s ease;
}
.wishlist-indicator {
transform: scale(0);
opacity: 0;
transition:
transform 0.25s ease,
opacity 0.25s ease;
}
.wishlist-indicator.is-visible {
transform: scale(1);
opacity: 1;
}
@keyframes wishlistHeartPop {
0% {
transform: scale(0.9);
}
55% {
transform: scale(1.15);
}
100% {
transform: scale(1);
}
}
/* =====================================================
BAG BADGE ANIMATION
===================================================== */
.header-counter {
transform: scale(0);
opacity: 0;
transition:
transform 0.25s ease,
opacity 0.25s ease;
}
.header-counter.is-visible {
transform: scale(1);
opacity: 1;
}
.header-counter.animate {
animation:
bagBadgePop
0.35s ease;
}
@keyframes bagBadgePop {
0% {
transform: scale(0.8);
}
55% {
transform: scale(1.18);
}
100% {
transform: scale(1);
}
}
/* =====================================================
MENU OVERLAY
===================================================== */
.menu-overlay {
position: fixed;
inset: 0;
z-index: 1090;
visibility: hidden;
opacity: 0;
background:
rgba(10, 9, 8, 0.56);
backdrop-filter:
blur(4px);
transition:
opacity 0.4s ease,
visibility 0.4s ease;
}
.menu-overlay.visible {
visibility: visible;
opacity: 1;
}
/* =====================================================
HAMBURGER MENU
===================================================== */
.site-menu {
position: fixed;
top: 0;
left: 0;
z-index: 1100;
width:
min(480px, 100%);
height: 100vh;
height: 100dvh;
display: flex;
flex-direction: column;
color: #F6F3EE;
background:
radial-gradient(
circle at 15% 10%,
rgba(122, 38, 56, 0.22),
transparent 35%
),
linear-gradient(
145deg,
#171514,
#27211E
);
transform:
translateX(-102%);
transition:
transform 0.48s
cubic-bezier(
0.22,
1,
0.36,
1
);
}
.site-menu.open {
transform:
translateX(0);
}
.menu-top {
min-height: 82px;
padding:
0 30px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom:
1px solid
rgba(255, 255, 255, 0.1);
}
.menu-title {
margin: 0;
font-family:
'Montserrat',
sans-serif;
font-size: 10px;
letter-spacing: 3px;
}
.menu-close-button {
width: 42px;
height: 42px;
padding: 0;
border: 0;
color: #F6F3EE;
background: transparent;
font-family:
'Cormorant Garamond',
serif;
font-size: 35px;
line-height: 1;
cursor: pointer;
}
.menu-content {
flex: 1;
padding:
35px 30px;
overflow-y: auto;
}
.menu-section {
margin-bottom: 34px;
}
.menu-section-title {
margin:
0 0 12px;
font-family:
'Montserrat',
sans-serif;
font-size: 8px;
letter-spacing: 3px;
color:
rgba(246, 243, 238, 0.5);
}
.menu-link {
padding:
11px 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
border-bottom:
1px solid
rgba(255, 255, 255, 0.08);
color: #F6F3EE;
font-family:
'Cormorant Garamond',
serif;
font-size: 25px;
line-height: 1.1;
text-decoration: none;
transition:
color 0.3s ease,
padding-left 0.3s ease;
}
/* =====================================================
MENU LOGOUT BUTTON
===================================================== */
.menu-logout-button {
width: 100%;
appearance: none;
-webkit-appearance: none;
padding:
11px 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
border: 0;
border-bottom:
1px solid
rgba(255, 255, 255, 0.08);
border-radius: 0;
background: transparent;
color: #F6F3EE;
font-family:
'Cormorant Garamond',
serif;
font-size: 25px;
line-height: 1.1;
text-align: left;
cursor: pointer;
transition:
color 0.3s ease,
padding-left 0.3s ease;
}
.menu-logout-button:hover {
padding-left: 7px;
background: transparent;
color: #D8B9AE;
}
.menu-logout-button:hover
.menu-link-arrow {
transform:
translateX(5px);
}
.menu-link:hover {
padding-left: 7px;
color: #D8B9AE;
}
.menu-link-arrow {
font-family:
'Montserrat',
sans-serif;
font-size: 16px;
transition:
transform 0.3s ease;
}
.menu-link:hover
.menu-link-arrow {
transform:
translateX(5px);
}
.menu-bottom {
padding:
22px 30px 30px;
border-top:
1px solid
rgba(255, 255, 255, 0.1);
}
.menu-shop-button {
width: 100%;
min-height: 54px;
padding:
0 20px;
display: flex;
align-items: center;
justify-content: space-between;
background: #F6F3EE;
color: #1C1C1C;
font-family:
'Montserrat',
sans-serif;
font-size: 9px;
font-weight: 600;
letter-spacing: 2px;
text-decoration: none;
transition:
background 0.3s ease,
color 0.3s ease;
}
.menu-shop-button:hover {
background: #7A2638;
color: #FFFFFF;
}
.menu-is-open {
overflow: hidden;
}
/* =====================================================
COMPACT FOOTER
===================================================== */
.site-footer {
color: #F6F3EE;
background:
linear-gradient(
135deg,
#171514,
#211D1B
);
}
.footer-brand-heading {
max-width: 760px;
margin: 0 auto;
padding:
58px 25px 34px;
text-align: center;
}
.footer-brand-name {
display: inline-block;
font-family:
'Cormorant Garamond',
serif;
font-size:
clamp(35px, 4vw, 52px);
font-weight: 600;
line-height: 0.9;
letter-spacing: 3px;
text-transform: uppercase;
color: #F6F3EE;
text-decoration: none;
}
.footer-brand-message {
max-width: 480px;
margin:
22px auto 0;
font-family:
'Montserrat',
sans-serif;
font-size: 11px;
line-height: 1.8;
color:
rgba(246, 243, 238, 0.62);
}
.footer-main {
max-width: 760px;
margin: 0 auto;
padding:
0 25px 45px;
display: grid;
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap: 40px;
text-align: center;
}
.footer-links-column {
display: flex;
flex-direction: column;
align-items: center;
}
.footer-column-title {
margin:
0 0 18px;
font-family:
'Montserrat',
sans-serif;
font-size: 8px;
letter-spacing: 2.5px;
text-transform: uppercase;
color:
rgba(246, 243, 238, 0.46);
}
.footer-links-column a {
width: max-content;
margin-bottom: 10px;
display: block;
color:
rgba(246, 243, 238, 0.82);
font-family:
'Montserrat',
sans-serif;
font-size: 10px;
line-height: 1.5;
text-decoration: none;
transition:
color 0.3s ease;
}
.footer-links-column a:hover {
color: #FFFFFF;
}
.footer-bottom {
max-width: 1050px;
margin: 0 auto;
padding:
19px 25px 22px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
border-top:
1px solid
rgba(255, 255, 255, 0.08);
}
.footer-bottom p {
margin: 0;
font-family:
'Montserrat',
sans-serif;
font-size: 8px;
line-height: 1.6;
letter-spacing: 0.5px;
color:
rgba(246, 243, 238, 0.46);
}
/* =====================================================
AUTHENTICATION MODAL
===================================================== */
.auth-modal-open {
overflow: hidden;
}
.authentication-modal {
position: fixed;
inset: 0;
z-index: 1300;
visibility: hidden;
opacity: 0;
transition:
opacity 0.35s ease,
visibility 0.35s ease;
}
.authentication-modal.visible {
visibility: visible;
opacity: 1;
}
.authentication-backdrop {
position: absolute;
inset: 0;
background:
rgba(13, 11, 10, 0.68);
backdrop-filter:
blur(8px);
-webkit-backdrop-filter:
blur(8px);
}
.authentication-panel {
position: absolute;
top: 50%;
left: 50%;
border-radius: 20px;
width:
min(460px, calc(100% - 36px));
max-height:
calc(100vh - 40px);
padding:
48px 42px 38px;
overflow-y: auto;
transform:
translate(-50%, -46%)
scale(0.97);
background:
radial-gradient(
circle at 15% 10%,
rgba(122, 38, 56, 0.12),
transparent 36%
),
linear-gradient(
145deg,
#F8F5F0,
#ECE4D9
);
border:
1px solid
rgba(120, 100, 80, 0.18);
box-shadow:
0 35px 90px
rgba(0, 0, 0, 0.3);
transition:
transform 0.4s
cubic-bezier(
0.22,
1,
0.36,
1
);
}
.authentication-modal.visible
.authentication-panel {
transform:
translate(-50%, -50%)
scale(1);
}
.authentication-close {
position: absolute;
top: 15px;
right: 18px;
width: 38px;
height: 38px;
padding: 0;
border: 0;
color: #2A2521;
background: transparent;
font-family:
'Cormorant Garamond',
serif;
font-size: 34px;
line-height: 1;
cursor: pointer;
}
.authentication-label {
margin:
0 0 15px;
font-family:
'Montserrat',
sans-serif;
font-size: 8px;
letter-spacing: 3px;
text-transform: uppercase;
color: #7A7068;
}
.authentication-panel h2 {
margin:
0 0 15px;
font-family:
'Cormorant Garamond',
serif;
font-size: 46px;
line-height: 1;
font-weight: 600;
color: #2A2521;
}
.authentication-description {
margin:
0 0 28px;
font-family:
'Montserrat',
sans-serif;
font-size: 11px;
line-height: 1.75;
color: #665F59;
}
.authentication-form {
display: flex;
flex-direction: column;
gap: 18px;
}
.authentication-field {
display: flex;
flex-direction: column;
gap: 8px;
}
.authentication-field label {
font-family:
'Montserrat',
sans-serif;
font-size: 8px;
font-weight: 600;
letter-spacing: 1.8px;
text-transform: uppercase;
color: #514B46;
}
.authentication-field input {
width: 100%;
height: 48px;
padding:
0 14px;
border:
1px solid
rgba(110, 90, 75, 0.2);
border-radius: 12px;
outline: none;
background:
rgba(255, 255, 255, 0.64);
color: #2A2521;
font-family:
'Montserrat',
sans-serif;
font-size: 12px;
transition:
border-color 0.25s ease,
background 0.25s ease,
box-shadow 0.25s ease;
}
.authentication-field input:focus {
border-color: #7A2638;
background: #FFFFFF;
box-shadow:
0 0 0 3px
rgba(122, 38, 56, 0.08);
}
.authentication-message {
margin: 0;
padding:
11px 12px;
font-family:
'Montserrat',
sans-serif;
font-size: 10px;
line-height: 1.6;
}
.authentication-message.error {
background:
rgba(122, 38, 56, 0.08);
color: #7A2638;
}
.authentication-message.success {
background:
rgba(63, 88, 71, 0.1);
color: #3F5847;
}
.authentication-submit {
min-height: 50px;
padding:
0 20px;
border: 0;
background: #7A2638;
color: #FFFFFF;
font-family:
'Montserrat',
sans-serif;
font-size: 9px;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
cursor: pointer;
border-radius: 12px;
transition:
background 0.3s ease,
transform 0.3s ease;
}
.authentication-submit:hover {
background: #5F1D2C;
transform:
translateY(-1px);
}
.authentication-submit:disabled {
opacity: 0.6;
cursor: wait;
transform: none;
}
.authentication-switch {
width: auto;
margin: 0;
padding: 0;
border: 0;
background: transparent;
color: #7A2638;
font-family:
'Montserrat',
sans-serif;
font-size: 9px;
font-weight: 600;
cursor: pointer;
text-decoration: underline;
text-underline-offset: 4px;
}
/* =====================================================
AUTH MODE TRANSITIONS
===================================================== */
.authentication-panel h2,
.authentication-description,
.authentication-form,
.authentication-switch-row {
transition:
opacity 0.18s ease,
transform 0.18s ease;
}
.authentication-panel.switching-mode h2,
.authentication-panel.switching-mode
.authentication-description,
.authentication-panel.switching-mode
.authentication-form,
.authentication-panel.switching-mode
.authentication-switch-row {
opacity: 0;
transform:
translateY(7px);
}
.authentication-panel.mode-entering h2,
.authentication-panel.mode-entering
.authentication-description,
.authentication-panel.mode-entering
.authentication-form,
.authentication-panel.mode-entering
.authentication-switch-row {
animation:
authenticationModeEnter
0.3s ease;
}
@keyframes authenticationModeEnter {
from {
opacity: 0;
transform:
translateY(8px);
}
to {
opacity: 1;
transform:
translateY(0);
}
}
/* =====================================================
NAME FIELD TRANSITION
===================================================== */
#customerNameField:not([hidden]) {
animation:
authenticationNameEnter
0.3s ease;
}
@keyframes authenticationNameEnter {
from {
opacity: 0;
transform:
translateY(-8px);
}
to {
opacity: 1;
transform:
translateY(0);
}
}
/* =====================================================
FORGOT PASSWORD LINK
===================================================== */
.authentication-forgot {
width: max-content;
align-self: center;
margin:
-4px auto 0;
padding:
2px 0;
border: 0;
background: transparent;
color: #7A2638;
font-family:
'Montserrat',
sans-serif;
font-size: 9px;
font-weight: 500;
letter-spacing: 0.3px;
cursor: pointer;
text-decoration: none;
border-bottom:
1px solid
rgba(122, 38, 56, 0.35);
transition:
color 0.25s ease,
border-color 0.25s ease;
}
.authentication-forgot:hover {
color: #4F1724;
border-bottom-color:
#4F1724;
}
/* =====================================================
AUTH BUTTON LOADER
===================================================== */
.authentication-submit {
position: relative;
}
.authentication-submit-loader {
min-height: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
}
.authentication-submit-loader[hidden] {
display: none;
}
.authentication-submit-loader span {
width: 5px;
height: 5px;
border-radius: 50%;
background: #FFFFFF;
animation:
authenticationDot
0.9s infinite ease-in-out;
}
.authentication-submit-loader span:nth-child(2) {
animation-delay:
0.15s;
}
.authentication-submit-loader span:nth-child(3) {
animation-delay:
0.3s;
}
@keyframes authenticationDot {
0%,
60%,
100% {
opacity: 0.35;
transform:
translateY(0);
}
30% {
opacity: 1;
transform:
translateY(-4px);
}
}
/* =====================================================
MOBILE
===================================================== */
@media (max-width: 700px) {
.site-header {
height: 84px;
padding:
0 16px;
}
.site-logo-circle {
width: 45px;
height: 45px;
}
.site-brand {
gap: 4px;
}
.site-brand-name {
font-size: 6px;
letter-spacing: 1.5px;
}
.header-actions {
gap: 10px;
}
.header-action-link {
min-width: 27px;
}
/* ================= MOBILE WISHLIST ================= */
.wishlist-heart-icon {
font-size: 26px;
}
.wishlist-indicator {
top: 3px;
right: 2px;
width: 6px;
height: 6px;
}
/* ================= MOBILE BAG ================= */
.bag-header-link {
gap: 4px;
}
.bag-icon {
width: 18px;
height: 18px;
}
.bag-label {
font-size: 8px;
}
.header-counter {
top: -1px;
right: -6px;
min-width: 16px;
height: 16px;
font-size: 7px;
}
/* ================= MOBILE SCROLLED NAVBAR ================= */
.site-header.scrolled {
height: 70px;
}
.site-header.scrolled
.site-logo-circle {
width: 39px;
height: 39px;
}
.site-header.scrolled
.site-brand-name {
font-size: 5.5px;
letter-spacing: 1.3px;
}
/* ================= MOBILE MENU ================= */
.site-menu {
width: 100%;
}
.menu-top {
min-height: 70px;
padding:
0 21px;
}
.menu-content {
padding:
30px 22px;
}
.menu-section {
margin-bottom: 29px;
}
.menu-link {
padding:
10px 0;
font-size: 23px;
}
.menu-bottom {
padding:
18px 22px 24px;
}
.menu-logout-button {
padding:
10px 0;
font-size: 23px;
}
/* ================= MOBILE FOOTER ================= */
.footer-brand-heading {
padding:
48px 22px 28px;
}
.footer-brand-name {
font-size: 37px;
letter-spacing: 2px;
}
.footer-brand-message {
max-width: 330px;
margin-top: 18px;
font-size: 10px;
}
.footer-main {
padding:
0 22px 36px;
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap:
28px 18px;
}
.footer-column-title {
margin-bottom: 15px;
}
.footer-links-column a {
margin-bottom: 9px;
font-size: 9px;
}
.footer-bottom {
padding:
18px 22px 21px;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
text-align: center;
}
.footer-bottom p {
max-width: 300px;
text-align: center;
}
/* ================= MOBILE AUTHENTICATION ================= */
.authentication-panel {
width:
calc(100% - 24px);
max-height:
calc(100dvh - 24px);
padding:
42px 24px 30px;
}
.authentication-panel h2 {
font-size: 39px;
}
.authentication-description {
margin-bottom: 23px;
font-size: 10px;
}
.authentication-field input {
height: 46px;
}
}
.authentication-phone-row {
display: grid;
grid-template-columns: 82px minmax(0, 1fr);
gap: 9px;
}
.authentication-phone-row input:first-child {
width: 100%;
height: 48px;
padding: 0 10px;
border: 1px solid #D8D0C8;
border-radius: 8px;
outline: none;
background: #FAF8F5;
color: #514B46;
font-family: 'Montserrat', sans-serif;
font-size: 10px;
}
.authentication-phone-row input:first-child:focus {
border-color: #7A2638;
background: #FFFFFF;
box-shadow: 0 0 0 3px rgba(122, 38, 56, .07);
}
@media (max-width: 420px) {
.authentication-phone-row {
grid-template-columns: 76px minmax(0, 1fr);
}
}
/* Shared delivery-location picker */
.location-picker-overlay{position:fixed;inset:0;z-index:9000;display:grid;place-items:center;padding:20px;background:rgba(25,21,19,.55);backdrop-filter:blur(7px)}.location-picker-dialog{position:relative;width:min(720px,100%);max-height:92vh;overflow:auto;padding:30px;border-radius:20px;background:#FCFAF7;box-shadow:0 30px 90px rgba(0,0,0,.25)}.location-picker-close{position:absolute;right:16px;top:14px;width:38px;height:38px;border:0;border-radius:50%;background:#EEE7E0;color:#463F3A;font-size:26px;cursor:pointer}.location-picker-label{margin:0 0 8px;color:#857A72;font:600 9px 'Montserrat',sans-serif;letter-spacing:2px}.location-picker-dialog h2{margin:0 42px 8px 0;color:#2A2521;font:600 36px/1 'Cormorant Garamond',serif}.location-picker-copy{margin:0 0 18px;color:#706861;font:400 10px/1.65 'Montserrat',sans-serif}.location-search-form{display:grid;grid-template-columns:1fr auto;gap:8px}.location-search-form input{min-width:0;height:46px;padding:0 13px;border:1px solid #DCD3CA;border-radius:9px;background:#FFF;outline:none;font:400 11px 'Montserrat',sans-serif}.location-search-form button,.location-current-button{min-height:46px;padding:0 17px;border:0;border-radius:9px;background:#7A2638;color:#FFF;font:600 9px 'Montserrat',sans-serif;cursor:pointer}.location-current-button{width:100%;margin-top:9px;border:1px solid rgba(122,38,56,.25);background:#FFF;color:#7A2638}.location-picker-message{min-height:17px;margin:9px 0;color:#756D67;font:400 9px/1.5 'Montserrat',sans-serif}.location-picker-message.error{color:#A43B3B}.location-picker-message.success{color:#246B4B}.location-search-results{display:grid;gap:6px;margin-bottom:9px}.location-search-results button{padding:10px 12px;border:1px solid #E1D9D1;border-radius:8px;background:#FFF;color:#514B46;font:400 9px/1.5 'Montserrat',sans-serif;text-align:left;cursor:pointer}.location-picker-map{height:330px;overflow:hidden;border:1px solid #DED5CD;border-radius:12px;background:#EAE4DD}.location-map-help,.location-attribution{margin:8px 0 0;color:#817870;font:400 8px/1.5 'Montserrat',sans-serif}.location-picker-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:17px}.location-picker-actions button{min-height:42px;padding:0 17px;border-radius:8px;font:600 9px 'Montserrat',sans-serif;cursor:pointer}.location-picker-cancel{border:1px solid #D9D0C8;background:#FFF;color:#514B46}.location-picker-confirm{border:0;background:#7A2638;color:#FFF}.location-attribution{text-align:right}.location-picker-open{overflow:hidden}
@media(max-width:600px){.location-picker-overlay{padding:0;place-items:end center}.location-picker-dialog{max-height:95vh;padding:25px 15px 18px;border-radius:19px 19px 0 0}.location-picker-dialog h2{font-size:31px}.location-search-form{grid-template-columns:1fr}.location-search-form button{width:100%}.location-picker-map{height:285px}.location-picker-actions button{flex:1}}
.location-picker-overlay{z-index:12000}.location-picker-close,.location-picker-actions{position:relative;z-index:12001;pointer-events:auto}