/* The search trigger shares the header, independently of the navigation panel. */
.v4-header-tools {
  display:flex;
  align-items:center;
  gap:6px;
  height:100%;
  margin-left:auto;
}
.v4-header .v4-search > summary { list-style:none; cursor:pointer; }
.v4-header .v4-search > summary::-webkit-details-marker { display:none; }
.v4-menu-toggle .v4-menu-icon-close { display:none; }
.v4-menu-toggle[aria-expanded="true"] .v4-menu-icon-open { display:none; }
.v4-menu-toggle[aria-expanded="true"] .v4-menu-icon-close { display:block; }
.v4-mobile-nav-intro,.v4-mobile-nav-footer { display:none; }

@media (max-width:900px) {
  html:has(.v4-navigation.is-open),
  body:has(.v4-navigation.is-open) { overflow:hidden; }
  .v4-header { --v4-mobile-header-height:78px; }
  /* Reduce the existing mobile logo by one third at each mobile breakpoint. */
  .v4-body .v4-brand { width:calc(202px * 2 / 3); }
  .v4-header-tools { gap:4px; }
  .v4-header .v4-search { position:static; margin:0; padding:0; }
  .v4-header .v4-search > summary,
  .v4-header .v4-menu-toggle {
    display:flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    padding:0;
    border:0;
    border-radius:50%;
    color:#555;
    background:transparent;
  }
  .v4-header .v4-search > summary > svg { width:22px; height:22px; }
  .v4-header .v4-search[open] > summary,
  .v4-header .v4-menu-toggle[aria-expanded="true"] {
    background:#fff0f3;
    color:var(--red);
  }
  .v4-header .v4-search > summary:focus-visible,
  .v4-header .v4-menu-toggle:focus-visible,
  .v4-header .v4-nav-dropdown > summary:focus-visible {
    outline:2px solid var(--red);
    outline-offset:2px;
  }
  .v4-header .v4-search form {
    position:absolute;
    top:100%;
    left:0;
    right:0;
    width:100%;
    gap:10px;
    padding:16px 5% 20px;
    border-top:1px solid #f0ecee;
    box-shadow:0 12px 20px #0001;
  }
  .v4-header .v4-search input {
    flex:1;
    min-height:44px;
    border:1px solid #e9e3e5;
    border-radius:6px;
    padding:10px 12px;
    font:inherit;
    font-size:16px;
    appearance:none;
  }
  .v4-header .v4-search button { min-height:44px; border-radius:6px; }
  .v4-header .v4-navigation {
    position:fixed;
    top:var(--v4-mobile-header-height);
    height:calc(100vh - var(--v4-mobile-header-height));
    height:calc(100dvh - var(--v4-mobile-header-height));
    max-height:none;
    padding:24px max(20px,calc((100vw - 560px) / 2)) calc(24px + env(safe-area-inset-bottom,0px));
    border-top:1px solid #f2e7e5;
    background:#fffaf7;
    box-shadow:none;
    color:#463b3d;
    font-family:var(--v4-ui-font);
    letter-spacing:0;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior:contain;
    scroll-padding-block:24px;
  }
  .v4-header .v4-navigation.is-open { display:flex; flex-direction:column; align-items:stretch; gap:0; }
  .v4-header .v4-navigation > * { flex-shrink:0; }
  .v4-header .v4-mobile-nav-intro {
    position:relative;
    display:flex;
    align-items:center;
    min-height:64px;
    padding-right:112px;
    margin-bottom:20px;
    overflow:hidden;
  }
  .v4-mobile-nav-intro > span { display:none; }
  /* Keep the hero's solid red/yellow pairing fully inside the menu heading. */
  .v4-mobile-nav-intro > img { position:absolute; height:auto; opacity:1; pointer-events:none; user-select:none; }
  .v4-mobile-nav-intro > .v4-mobile-nav-flower-red { width:56px; right:4px; top:4px; }
  .v4-mobile-nav-intro > .v4-mobile-nav-flower-yellow { width:28px; right:72px; top:4px; }
  .v4-header .v4-nav-dropdown,
  .v4-header .v4-nav-direct {
    width:100%;
    margin:0 0 12px;
    border:1px solid #efdfda;
    border-radius:14px;
    background:#fff;
  }
  .v4-header .v4-nav-dropdown > summary,
  .v4-header .v4-nav-direct {
    position:relative;
    display:flex;
    justify-content:flex-start;
    align-items:center;
    min-height:60px;
    padding:16px 56px 16px 20px;
    border-radius:13px;
    font-size:17px;
    font-weight:600;
    line-height:1.6;
    text-align:left;
    white-space:normal;
    overflow-wrap:anywhere;
  }
  .v4-header .v4-nav-dropdown.is-active { border-color:#eec4ce; }
  .v4-header .v4-nav-dropdown.is-active > summary,
  .v4-header .v4-nav-direct.is-active { background:#fff2f3; color:var(--red); }
  .v4-header .v4-nav-dropdown[open] { border-color:var(--red); }
  .v4-header .v4-nav-dropdown[open] > summary {
    border-radius:13px 13px 0 0;
    background:var(--red);
    color:#fff;
  }
  .v4-header .v4-nav-dropdown > summary:before {
    content:"";
    position:absolute;
    right:14px;
    top:50%;
    width:28px;
    height:28px;
    border-radius:50%;
    background:#faf2f0;
    transform:translateY(-50%);
  }
  .v4-header .v4-nav-dropdown[open] > summary:before { background:#ffffff24; }
  .v4-header .v4-nav-dropdown > summary:after {
    display:block;
    right:24px;
    width:7px;
    height:7px;
    opacity:1;
    transform:translateY(-70%) rotate(45deg);
  }
  .v4-header .v4-nav-dropdown[open] > summary:after {
    display:block;
    transform:translateY(-20%) rotate(225deg);
  }
  .v4-header .v4-nav-dropdown > div { padding:8px; box-shadow:none; background:#fff; border-radius:0 0 13px 13px; }
  .v4-header .v4-nav-dropdown > div > a {
    position:relative;
    display:flex;
    align-items:center;
    min-height:48px;
    padding:12px 28px 12px 16px;
    border-radius:8px;
    background:transparent;
    color:#62575a;
    font-family:var(--v4-ui-font);
    font-size:14px;
    font-weight:400;
    line-height:1.7;
    text-align:left;
    white-space:normal;
    overflow-wrap:anywhere;
  }
  .v4-header .v4-nav-dropdown > div > a + a { margin-top:2px; }
  .v4-header .v4-nav-dropdown > div > a[aria-current] { background:#fff0f3; color:var(--red); font-weight:600; }
  .v4-header .v4-nav-direct:after { content:""; position:absolute; right:26px; width:7px; height:7px; border:solid currentColor; border-width:0 1.3px 1.3px 0; transform:rotate(-45deg); opacity:.65; }
  .v4-header .v4-nav-dropdown > div > a:active,
  .v4-header .v4-nav-direct:active { background:#fff0f3; color:var(--red); }
  .v4-header .v4-mobile-nav-footer { display:none; }
  .v4-mobile-nav-footer > p { margin:0; color:#806a69; font-size:12px; line-height:1.8; letter-spacing:0; }
  .v4-header .v4-nav-dropdown > div > a:focus-visible,
  .v4-header .v4-nav-direct:focus-visible { outline:2px solid var(--red); outline-offset:-2px; }
}
@media (max-width:900px) and (prefers-reduced-motion:no-preference) {
  .v4-navigation.is-open { animation:v4-mobile-nav-enter .18s ease-out; }
  .v4-header .v4-nav-dropdown > summary:after { transition:transform .18s ease; }
}
@keyframes v4-mobile-nav-enter { from { opacity:0; } to { opacity:1; } }
@media (max-width:600px) {
  .v4-header { --v4-mobile-header-height:72px; }
  .v4-body .v4-brand { width:calc(187px * 2 / 3); }
}