.fiona-mobile-search-toggle { display:none; }

/*
 * Fiona Kids — mobile header and topbar only.
 * Every declaration is scoped to max-width: 767px so desktop styling remains untouched.
 */
@media (max-width: 767px) {
  .fiona-topbar .fiona-topbar-inner {
    width:100% !important;
    max-width:none !important;
    min-height:0 !important;
    height:auto !important;
    padding:0 16px 5px !important;
    grid-template-columns:76px minmax(0,1fr) !important;
    grid-template-rows:40px 34px !important;
    gap:0 8px !important;
    box-sizing:border-box !important;
  }
  .fiona-social {
    grid-column:1 !important;
    grid-row:1 !important;
    justify-content:flex-start !important;
    gap:11px !important;
    min-width:0 !important;
  }
  .fiona-social a,.fiona-social span {
    width:20px !important;
    height:24px !important;
    font-size:17px !important;
  }
  .fiona-social svg {width:19px !important;height:19px !important}
  .fiona-topbar-welcome {
    grid-column:2 !important;
    grid-row:1 !important;
    text-align:right !important;
    padding-right:8px !important;
    padding-left:2px !important;
    white-space:nowrap !important;
    font-size:11px !important;
    gap:4px !important;
    min-width:0 !important;
  }
  .fiona-topbar-benefits {
    grid-column:1 / -1 !important;
    grid-row:2 !important;
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    gap:clamp(10px,3.2vw,20px) !important;
    width:100% !important;
    overflow:hidden !important;
    white-space:nowrap !important;
  }
  .fiona-topbar-benefits span {
    display:inline-flex !important;
    align-items:center !important;
    gap:5px !important;
    font-size:10px !important;
    line-height:1.2 !important;
    flex:0 0 auto !important;
  }
  .fiona-topbar-benefits .fiona-benefit-icon {
    width:16px !important;height:16px !important;flex:0 0 16px !important;
  }

  .site-header {
    height:auto !important;
    min-height:88px !important;
    overflow:visible !important;
  }
  .site-header .container {
    direction:ltr !important;
    display:grid !important;
    grid-template-columns:42px auto minmax(0,1fr) !important;
    grid-template-rows:76px !important;
    align-items:center !important;
    justify-content:initial !important;
    gap:0 9px !important;
    width:100% !important;
    max-width:none !important;
    height:76px !important;
    min-height:76px !important;
    margin:0 !important;
    padding:5px 13px !important;
    box-sizing:border-box !important;
  }
  .site-header .mobile-menu-toggle {
    grid-column:1 !important;
    grid-row:1 !important;
    order:initial !important;
    justify-self:start !important;
    align-self:center !important;
    display:flex !important;
    width:40px !important;height:46px !important;flex:0 0 40px !important;
    margin:0 !important;padding:0 !important;
  }
  .site-header .mobile-menu-toggle span {
    width:28px !important;height:3px !important;margin:3px auto !important;
    background:#ed2d91 !important;border-radius:5px !important;
  }
  .site-header .fiona-header-utilities {
    grid-column:2 !important;
    grid-row:1 !important;
    order:initial !important;
    display:flex !important;
    direction:ltr !important;
    justify-content:flex-start !important;
    align-items:center !important;
    gap:7px !important;
    width:auto !important;
    min-width:0 !important;
    margin:0 !important;
    position:relative !important;
  }
  .site-header .fiona-header-utilities .fiona-mobile-search-toggle {
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:40px !important;height:40px !important;flex:0 0 40px !important;
    padding:0 !important;
    border:1px solid #ffd0e5 !important;
    border-radius:50% !important;
    color:#e82b91 !important;
    background:#fff !important;
    box-shadow:0 3px 10px rgba(220,40,125,.10) !important;
    cursor:pointer !important;
  }
  .site-header .fiona-mobile-search-toggle svg {display:block !important;width:21px !important;height:21px !important}
  .site-header .fiona-header-utilities .header-cart {
    display:flex !important;
    width:42px !important;height:42px !important;flex:0 0 42px !important;
    border-radius:13px !important;
  }
  .site-header .fiona-header-utilities .header-cart .fiona-cart-svg {width:25px !important;height:25px !important;flex:0 0 25px !important}
  .site-header .fiona-header-utilities .header-notifications {
    display:flex !important;
    position:relative !important;
    width:42px !important;height:44px !important;flex:0 0 42px !important;
  }
  .site-header .fiona-header-utilities .header-notifications-toggle {
    display:grid !important;place-items:center !important;
    width:42px !important;height:42px !important;min-width:42px !important;min-height:42px !important;flex:0 0 42px !important;
    border:1px solid #ffd0e5 !important;border-radius:50% !important;
    background:linear-gradient(145deg,#fff,#fff0f8 75%,#f7e5ff) !important;
    box-shadow:inset 0 2px 0 #fff,0 3px 9px rgba(220,40,125,.10) !important;
  }
  .site-header .fiona-header-utilities .header-notifications-toggle .fiona-bell-svg {display:block !important;width:26px !important;height:26px !important}
  .site-header .fiona-header-utilities > .header-icon {display:none !important}
  .site-header .header-logo {
    grid-column:3 !important;
    grid-row:1 !important;
    order:initial !important;
    justify-self:end !important;
    align-self:center !important;
    min-width:0 !important;
    margin:0 !important;
    direction:rtl !important;
  }
  .site-header .header-logo a {justify-content:flex-end !important}
  .site-header .header-logo img {
    display:block !important;
    width:auto !important;
    height:68px !important;
    max-width:min(190px,34vw) !important;
    object-fit:contain !important;
  }
  .site-header .header-account {display:none !important}
  .site-header .header-search {
    display:none !important;
    position:absolute !important;
    top:calc(100% + 7px) !important;
    left:12px !important;right:12px !important;
    width:auto !important;max-width:none !important;min-width:0 !important;
    margin:0 !important;
    z-index:10020 !important;
    transform:none !important;
  }
  .site-header .header-search.is-mobile-open {display:block !important}
  .site-header .header-search form {
    height:48px !important;border:1px solid #f4c6dc !important;
    border-radius:25px !important;box-shadow:0 12px 28px rgba(120,45,95,.16) !important;
    background:#fff !important;
  }
  .site-header .header-search input {font-size:14px !important;padding:0 14px !important}
  .site-header .header-search button {height:46px !important;width:48px !important;flex-basis:48px !important}
  .site-header .header-search .search-category {display:none !important}

  /* Center the notification panel in the mobile viewport, not beside the bell. */
  .site-header .fiona-header-utilities .notifications-dropdown {
    position:fixed !important;
    top:50% !important;
    left:50% !important;
    right:auto !important;
    width: min(360px, calc(100vw - 24px)) !important;
    max-width:calc(100vw - 24px) !important;
    max-height:min(76vh,560px) !important;
    margin:0 !important;
    transform:translate(-50%,-50%) scale(.98) !important;
    transform-origin:center center !important;
    overflow:hidden !important;
    z-index:100500 !important;
  }
  .site-header .fiona-header-utilities .notifications-dropdown.is-open {
    transform:translate(-50%,-50%) scale(1) !important;
  }
  .site-header .notifications-dropdown-list {max-height: min(48vh,350px) !important}

  .mobile-offcanvas {
    width:min(380px,90vw) !important;
    padding:0 16px 28px !important;
    background:linear-gradient(180deg,#fff 0%,#fffafd 100%) !important;
    border-left:1px solid #f8cde1 !important;
  }
  .mobile-offcanvas-head {
    min-height:70px !important;
    border-bottom:1px solid #f7d9e8 !important;
    color:#7837d7 !important;
  }
  .mobile-offcanvas-head strong {color:#7837d7 !important;font-size:19px !important}
  .mobile-offcanvas-close {
    background:#fff0f7 !important;color:#e82b91 !important;border:1px solid #ffd4e7 !important;
  }
  .mobile-offcanvas-search input {border:1px solid #f5cfe0 !important;background:#fff8fc !important}
  .mobile-offcanvas-search button {background:linear-gradient(110deg,#f52c8b,#8b3bd8) !important}
  .mobile-offcanvas-links {gap:0 !important}
  .mobile-offcanvas-group {margin:8px 0 4px !important}
  .mobile-offcanvas-group-title {
    display:block !important;margin:12px 4px 5px !important;padding:8px 10px !important;
    color:#8b3bd8 !important;background:#fff0f7 !important;border-radius:10px !important;
    font-size:13px !important;font-weight:900 !important;
  }
  .mobile-offcanvas-links .mobile-offcanvas-link {
    min-height:46px !important;padding:8px 10px !important;
    border-bottom:1px solid #fae6ef !important;color:#17275e !important;
    font-size:14px !important;font-weight:700 !important;
  }
  .mobile-offcanvas-account-links {border-top:1px solid #f7d9e8 !important}
  .mobile-offcanvas-account-btn {background:linear-gradient(110deg,#f52c8b,#8b3bd8) !important;border:0 !important;color:#fff !important}
  .mobile-offcanvas-store-btn {background:#fff2f8 !important;border:1px solid #f7cde0 !important;color:#7837d7 !important}
}
@media (max-width:380px) {
  .fiona-topbar .fiona-topbar-inner {padding-inline:10px !important;grid-template-columns:68px minmax(0,1fr) !important}
  .fiona-topbar-welcome {font-size:10px !important;padding-right:5px !important}
  .fiona-topbar-benefits {gap:8px !important}
  .fiona-topbar-benefits span {font-size:9px !important}
  .site-header .container {grid-template-columns:38px auto minmax(0,1fr) !important;gap:0 6px !important;padding-inline:9px !important}
  .site-header .fiona-header-utilities {gap:5px !important}
  .site-header .fiona-header-utilities .header-cart,
  .site-header .fiona-header-utilities .header-notifications,
  .site-header .fiona-header-utilities .header-notifications-toggle,
  .site-header .fiona-header-utilities .fiona-mobile-search-toggle {width:37px !important;height:37px !important;flex-basis:37px !important;min-width:37px !important;min-height:37px !important}
  .site-header .header-logo img {height:62px !important;max-width:32vw !important}
}


/* Fiona Kids mobile visual refinement v2 — mobile viewport only. */
@media (max-width: 767px) {
  /* Keep social icons on the left and move the welcome message to the right. */
  .fiona-topbar .fiona-topbar-inner {
    direction:ltr !important;
    grid-template-columns:76px minmax(0,1fr) !important;
    padding-left:16px !important;
    padding-right:16px !important;
  }
  .fiona-topbar .fiona-social {
    direction:ltr !important;
    grid-column:1 !important;
    justify-content:flex-start !important;
  }
  .fiona-topbar .fiona-topbar-welcome {
    direction:rtl !important;
    grid-column:2 !important;
    justify-self:stretch !important;

    text-align:right !important;
    padding-right:10px !important;
    padding-left:0 !important;
  }
  .fiona-topbar .fiona-topbar-benefits {
    direction:rtl !important;
  }

  /* Premium, readable off-canvas navigation. */
  .mobile-offcanvas {
    direction:rtl !important;
    display:flex !important;
    flex-direction:column !important;
    gap:0 !important;
    padding:0 15px 26px !important;
    background:
      radial-gradient(circle at 100% 0%,rgba(245,44,139,.08),transparent 34%),
      linear-gradient(180deg,#fff 0%,#fffafd 100%) !important;
    border-left:1px solid #f5d4e5 !important;
    box-shadow:-18px 0 48px rgba(66,27,73,.18) !important;
  }
  .mobile-offcanvas-head {
    position:sticky !important;
    top:0 !important;
    z-index:2 !important;
    min-height:76px !important;
    padding:0 2px !important;
    background:rgba(255,255,255,.96) !important;
    backdrop-filter:blur(12px) !important;
    border-bottom:1px solid #f5dfeb !important;
  }
  .mobile-offcanvas-head strong {
    color:#7837d7 !important;
    font-size:20px !important;
    font-weight:900 !important;
    letter-spacing:-.3px !important;
  }
  .mobile-offcanvas-close {
    width:42px !important;
    height:42px !important;
    display:grid !important;
    place-items:center !important;
    border-radius:14px !important;
    background:linear-gradient(145deg,#fff0f7,#f7edff) !important;
    border:1px solid #f4cfe2 !important;
    color:#e52b91 !important;
    box-shadow:0 4px 12px rgba(229,43,145,.10) !important;
  }
  .mobile-offcanvas-search {
    display:flex !important;
    gap:9px !important;
    margin:16px 0 12px !important;
    padding:0 !important;
  }
  .mobile-offcanvas-search input {
    height:48px !important;
    min-width:0 !important;
    padding:0 15px !important;
    border:1px solid #f0cfe0 !important;
    border-radius:15px !important;
    background:#fff !important;
    color:#17275e !important;
    box-shadow:inset 0 2px 5px rgba(80,30,80,.035) !important;
    font-size:14px !important;
    outline:none !important;
  }
  .mobile-offcanvas-search input:focus {
    border-color:#d94aa7 !important;
    box-shadow:0 0 0 3px rgba(245,44,139,.10) !important;
  }
  .mobile-offcanvas-search button {
    width:48px !important;
    height:48px !important;
    flex:0 0 48px !important;
    display:grid !important;
    place-items:center !important;
    border:0 !important;
    border-radius:15px !important;
    background:linear-gradient(135deg,#f52c8b,#8738d6) !important;
    box-shadow:0 7px 16px rgba(186,48,157,.22) !important;
  }
  .mobile-offcanvas-search button img {
    width:21px !important;
    height:21px !important;
  }
  .mobile-offcanvas-title {
    margin:5px 2px 10px !important;
    color:#17275e !important;
    font-size:14px !important;
    font-weight:900 !important;
  }
  .mobile-offcanvas-links {
    display:flex !important;
    flex-direction:column !important;
    gap:13px !important;
    width:100% !important;
    min-width:0 !important;
  }
  .mobile-offcanvas-group {
    display:flex !important;
    flex-direction:column !important;
    gap:5px !important;
    width:100% !important;
    margin:0 !important;
    padding:10px !important;
    border:1px solid #f6dfeb !important;
    border-radius:17px !important;
    background:linear-gradient(145deg,#fff 0%,#fff9fc 100%) !important;
    box-shadow:0 5px 16px rgba(91,40,92,.045) !important;
  }
  .mobile-offcanvas-group-title {
    display:flex !important;
    align-items:center !important;
    gap:8px !important;
    margin:0 0 5px !important;
    padding:8px 10px !important;
    border-radius:11px !important;
    color:#8738d6 !important;
    background:linear-gradient(100deg,#fff0f7,#f7efff) !important;
    font-size:13px !important;
    font-weight:900 !important;
  }
  .mobile-offcanvas-group-title:before {
    content:"" !important;
    display:block !important;
    width:5px !important;
    height:17px !important;
    border-radius:5px !important;
    background:linear-gradient(180deg,#f52c8b,#8738d6) !important;
  }
  .mobile-offcanvas-links .mobile-offcanvas-link {
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:10px !important;
    width:100% !important;
    min-height:43px !important;
    margin:0 !important;
    padding:9px 10px !important;
    border:0 !important;
    border-bottom:1px solid #f8eaf1 !important;
    border-radius:9px !important;
    background:transparent !important;
    color:#26345f !important;
    text-align:right !important;
    text-decoration:none !important;
    font-size:13px !important;
    font-weight:750 !important;
    line-height:1.5 !important;
    box-sizing:border-box !important;
    transition:background .18s ease,color .18s ease,transform .18s ease !important;
  }
  .mobile-offcanvas-links .mobile-offcanvas-link:last-child {
    border-bottom:0 !important;
  }
  .mobile-offcanvas-links .mobile-offcanvas-link:before {
    content:"" !important;
    width:7px !important;
    height:7px !important;
    flex:0 0 7px !important;
    border-radius:50% !important;
    background:#f52c8b !important;
    box-shadow:0 0 0 4px rgba(245,44,139,.09) !important;
  }
  .mobile-offcanvas-links .mobile-offcanvas-link img {
    width:23px !important;
    height:23px !important;
    flex:0 0 23px !important;
    object-fit:contain !important;
  }
  .mobile-offcanvas-links .mobile-offcanvas-link:hover,
  .mobile-offcanvas-links .mobile-offcanvas-link:focus-visible {
    background:#fff0f7 !important;
    color:#8738d6 !important;
    transform:translateX(-2px) !important;
    outline:none !important;
  }
  .mobile-offcanvas-account-links {
    display:flex !important;
    flex-direction:column !important;
    gap:10px !important;
    margin-top:17px !important;
    padding-top:16px !important;
    border-top:1px solid #f3d8e7 !important;
  }
  .mobile-offcanvas-account-btn {
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:12px !important;
    width:100% !important;
    min-height:70px !important;
    margin:0 !important;
    padding:12px 16px !important;
    border:1px solid rgba(255,255,255,.38) !important;
    border-radius:17px !important;
    background:linear-gradient(115deg,#f52c8b 0%,#b42ec1 54%,#7837d7 100%) !important;
    color:#fff !important;
    text-decoration:none !important;
    box-shadow:0 10px 23px rgba(171,48,160,.22),inset 0 1px 0 rgba(255,255,255,.3) !important;
    box-sizing:border-box !important;
  }
  .mobile-offcanvas-account-btn img {
    display:block !important;
    width:30px !important;
    height:30px !important;
    flex:0 0 30px !important;
    object-fit:contain !important;
    filter:brightness(0) invert(1) !important;
  }
  .mobile-offcanvas-account-btn > div {
    display:flex !important;
    flex:1 1 auto !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:3px !important;
    min-width:0 !important;
    color:#fff !important;
  }
  .mobile-offcanvas-account-btn strong,
  .mobile-offcanvas-account-btn span {
    display:block !important;
    color:#fff !important;
    text-decoration:none !important;
    line-height:1.45 !important;
  }
  .mobile-offcanvas-account-btn strong {
    font-size:14px !important;
    font-weight:900 !important;
  }
  .mobile-offcanvas-account-btn span {
    font-size:11px !important;
    opacity:.9 !important;
  }

  /* Premium mobile notification panel; retain the existing centered placement. */
  .site-header .fiona-header-utilities .notifications-dropdown {
    width:min(390px,calc(100vw - 26px)) !important;
    max-width:calc(100vw - 26px) !important;
    border:1px solid #f3cfe2 !important;
    border-radius:23px !important;
    background:#fff !important;
    box-shadow:0 24px 70px rgba(47,25,76,.25),0 5px 20px rgba(245,44,139,.10) !important;
  }
  .site-header .notifications-dropdown-head {
    min-height:84px !important;
    padding:17px 19px !important;
    background:linear-gradient(125deg,#172b62 0%,#263d7b 60%,#7837d7 140%) !important;
    border-bottom:3px solid #f52c8b !important;
  }
  .site-header .notifications-eyebrow {
    color:#ffd66e !important;
    font-size:11px !important;
    font-weight:900 !important;
  }
  .site-header .notifications-dropdown-head h3 {
    margin:3px 0 0 !important;
    color:#fff !important;
    font-size:20px !important;
    font-weight:900 !important;
  }
  .site-header .notifications-dropdown-list {
    max-height:min(48vh,360px) !important;
    padding:13px !important;
    background:linear-gradient(180deg,#fff 0%,#fffafd 100%) !important;
  }
  .site-header .fiona-notifications-guest {
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    gap:10px !important;
    padding:22px 15px 20px !important;
    border:1px solid #f8deeb !important;
    border-radius:17px !important;
    background:linear-gradient(145deg,#fff7fb 0%,#fff 65%,#f9f3ff 100%) !important;
    text-align:center !important;
    color:#26345f !important;
  }
  .site-header .fiona-notifications-guest-icon {
    display:grid !important;
    place-items:center !important;
    width:54px !important;
    height:54px !important;
    border-radius:18px !important;
    background:linear-gradient(140deg,#ffe2ef,#f0e2ff) !important;
    color:#d72e98 !important;
    font-size:24px !important;
    box-shadow:0 7px 18px rgba(215,46,152,.13) !important;
  }
  .site-header .fiona-notifications-guest > strong {
    color:#d72e98 !important;
    font-size:17px !important;
    font-weight:900 !important;
    line-height:1.5 !important;
  }
  .site-header .fiona-notifications-guest p {
    margin:0 !important;
    color:#65708f !important;
    font-size:13px !important;
    line-height:1.8 !important;
  }
  .site-header .fiona-notifications-login {
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    min-height:45px !important;
    margin:3px 0 !important;
    border-radius:13px !important;
    background:linear-gradient(110deg,#f52c8b,#8738d6) !important;
    color:#fff !important;
    text-decoration:none !important;
    font-size:14px !important;
    font-weight:900 !important;
    box-shadow:0 7px 17px rgba(190,43,153,.2) !important;
  }
  .site-header .fiona-notifications-guest small {
    color:#8c82a0 !important;
    font-size:11px !important;
    line-height:1.6 !important;
  }
  .site-header .notifications-dropdown-foot {
    padding:10px 14px 13px !important;
    background:#fff8fc !important;
    border-top:1px solid #f5e1ec !important;
  }
  .site-header .notifications-dropdown-foot a {
    min-height:42px !important;
    border-radius:12px !important;
    background:#fff !important;
    color:#7837d7 !important;
    font-size:13px !important;
    font-weight:900 !important;
    box-shadow:0 3px 10px rgba(70,40,90,.05) !important;
    text-decoration:none !important;
  }
  .site-header .notifications-dropdown-foot a i {
    color:#f52c8b !important;
  }
}

@media (max-width: 380px) {
  .fiona-topbar .fiona-topbar-inner {
    grid-template-columns:68px minmax(0,1fr) !important;
    padding-left:10px !important;
    padding-right:10px !important;
  }
  .fiona-topbar .fiona-topbar-welcome {
    padding-right:7px !important;
    font-size:10px !important;
  }
  .mobile-offcanvas {width:min(380px,92vw) !important}
  .mobile-offcanvas-group {padding:8px !important}
  .mobile-offcanvas-links .mobile-offcanvas-link {font-size:12px !important;min-height:41px !important}
}