@media (max-width: 700px) { header:has(> nav a.lock-heart) { position: sticky; top: 0; z-index: 50; } header:has(> nav a.lock-heart) > nav { display: grid !important; grid-template-columns: 56px 1fr 60px; align-items: center; height: 88px; padding: 0 12px !important; gap: 0 !important; box-sizing: border-box; } header:has(> nav a.lock-heart) > nav > div:first-of-type { display: none !important; } header:has(> nav a.lock-heart) > nav > div:last-of-type > a:not(.lock-heart) { display: none !important; } header:has(> nav a.lock-heart) > nav > div:last-of-type { display: flex !important; justify-content: flex-end; grid-column: 3; grid-row: 1; padding: 0 !important; margin: 0 !important; } header:has(> nav a.lock-heart) > nav > a:not(.cf-burger):not(.lock-heart) { grid-column: 2; grid-row: 1; justify-self: center; display: flex !important; justify-content: center; align-items: center; } header:has(> nav a.lock-heart) > nav > a:not(.cf-burger):not(.lock-heart) > span { width: 196px !important; max-width: 100%; } header:has(> nav a.lock-heart) .lock-heart { width: 56px; height: 56px; border-radius: 999px; background: #fbe9e5; display: flex !important; align-items: center; justify-content: center; padding: 0 !important; margin: 0 !important; flex: none; transition: background .2s; } header:has(> nav a.lock-heart) .lock-heart:hover, header:has(> nav a.lock-heart) .lock-heart:active { background: #f6d3cc; } header:has(> nav a.lock-heart) .lock-heart svg.lh-heart { width: 42px !important; height: 42px !important; left: 7px !important; top: 7px !important; } header:has(> nav a.lock-heart) .lock-heart svg.lh-lock { width: 15px !important; height: 15px !important; } .cf-burger { grid-column: 1; grid-row: 1; width: 44px; height: 44px; border: 0; border-radius: 999px; background: transparent; cursor: pointer; padding: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; -webkit-tap-highlight-color: transparent; } .cf-burger:hover, .cf-burger:focus-visible { background: #e8e8d8; outline: none; } .cf-burger span { width: 24px; height: 2.5px; border-radius: 2px; background: #4f4f38; transition: transform .25s, opacity .25s; } .cf-open .cf-burger span:nth-child(1) { transform: translateY(8.5px) rotate(45deg); } .cf-open .cf-burger span:nth-child(2) { opacity: 0; } .cf-open .cf-burger span:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); } .cf-shade { position: absolute; top: 100%; left: 0; right: 0; height: 100vh; background: rgba(40,40,25,.35); opacity: 0; pointer-events: none; transition: opacity .25s; z-index: 1; } .cf-panel { position: absolute; top: 100%; left: 0; right: 0; z-index: 2; background: #f2f2e9; border-radius: 0 0 28px 28px; padding: 12px 28px 16px; box-shadow: 0 18px 30px rgba(60,55,30,.18); display: flex; flex-direction: column; transform: translateY(-110%); visibility: hidden; transition: transform .3s, visibility 0s linear .3s; } .cf-open .cf-shade { opacity: 1; pointer-events: auto; } .cf-open .cf-panel { transform: translateY(0); visibility: visible; transition: transform .3s; } .cf-panel a.cf-item { font: 600 24px/1.2 'Playfair Display', Georgia, serif; padding: 14px 0; text-decoration: none; color: #4f4f38; display: flex; justify-content: space-between; align-items: center; } .cf-panel a.cf-item:hover { color: #c0392b; } .cf-panel a.cf-item i { font-style: normal; color: #c0392b; font-size: 18px; } } .cf-login { display: none; } @media (max-width: 700px) { .cf-login { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 12px; box-sizing: border-box; background: rgba(40,40,25,.5); opacity: 0; visibility: hidden; transition: opacity .25s, visibility 0s linear .25s; } .cf-login.cf-on { opacity: 1; visibility: visible; transition: opacity .25s; } .cf-login-card { position: relative; width: 100%; max-width: 440px; height: min(86vh, 720px); height: min(86dvh, 720px); background: #f2f2e9; border-radius: 24px; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,.3); display: flex; flex-direction: column; transform: translateY(16px) scale(.98); transition: transform .25s; } .cf-login.cf-on .cf-login-card { transform: none; } .cf-login-card iframe { flex: 1; width: 100%; border: 0; background: #f2f2e9; } .cf-login-close { position: absolute; top: 10px; right: 10px; z-index: 2; width: 40px; height: 40px; border: 0; border-radius: 999px; cursor: pointer; background: rgba(242,242,233,.92); color: #4f4f38; font: 400 26px/1 Georgia, serif; box-shadow: 0 2px 8px rgba(60,55,30,.2); } .cf-login-close:hover { background: #e8e8d8; } .cf-login-alt { padding: 10px 16px 12px; text-align: center; background: #f2f2e9; border-top: 1px solid #e0decf; font: 500 14px 'Playfair Display', Georgia, serif; } .cf-login-alt a { color: #c0392b; text-decoration: underline; } } @media (min-width: 701px) { .cf-burger, .cf-shade, .cf-panel, .cf-login { display: none !important; } } @media (prefers-reduced-motion: reduce) { .cf-burger span, .cf-shade, .cf-panel, .cf-login, .cf-login-card { transition: none !important; } }
@media (max-width:700px){header:has(> nav a.lock-heart):not(.cf-ready) > nav::before{content:"";grid-column:1;grid-row:1;width:44px;height:44px;background:linear-gradient(#4f4f38,#4f4f38) 50% calc(50% - 8.5px)/24px 2.5px no-repeat,linear-gradient(#4f4f38,#4f4f38) 50% 50%/24px 2.5px no-repeat,linear-gradient(#4f4f38,#4f4f38) 50% calc(50% + 8.5px)/24px 2.5px no-repeat}header.cf-ready > nav::before{content:none}}