/* Beautiful Food - premium menu hotfix v3
   Restores the menu styling that was accidentally removed by the v2 account/checkout patch. */

@media (min-width:768px) {
  .pet-nav-shell { overflow: visible !important; }
  .pet-navbar, .pet-main-nav { overflow: visible !important; }

  .pet-all-categories {
    position: relative !important;
  }

  .pet-all-categories > a {
    background: linear-gradient(135deg, var(--pet-primary), var(--pet-primary-2)) !important;
    color: #fff !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 20px rgba(109,40,217,.20) !important;
    position: relative;
    z-index: 2;
  }

  .pet-all-categories > a:hover,
  .pet-all-categories.open > a {
    background: linear-gradient(135deg,#5b21b6,#7c3aed) !important;
    color:#fff !important;
    box-shadow:0 10px 24px rgba(109,40,217,.28) !important;
  }

  #menu .pet-all-categories > .pet-all-menu {
    position: absolute !important;
    top: calc(100% - 5px) !important;
    left: 0 !important;
    right: auto !important;
    width: 660px !important;
    max-width: min(660px, 88vw) !important;
    max-height: 520px !important;
    overflow-y: auto !important;
    padding: 14px !important;
    margin: 0 !important;
    border: 1px solid #ece8f8 !important;
    border-radius: 0 16px 16px 16px !important;
    background: #fff !important;
    box-shadow: 0 22px 55px rgba(18,37,63,.18) !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 10px !important;
    z-index: 9999 !important;
  }

  #menu .pet-all-categories.open > .pet-all-menu {
    display: grid !important;
  }

  #menu .pet-all-menu .pet-all-group {
    min-width: 0 !important;
    padding: 11px 12px !important;
    border: 1px solid #f0edf8 !important;
    border-radius: 12px !important;
    background: linear-gradient(145deg,#fbfaff,#f8fafc) !important;
  }

  #menu .pet-all-menu .pet-all-group:hover {
    border-color: #ddd3fb !important;
    box-shadow: 0 8px 20px rgba(109,40,217,.07) !important;
  }

  #menu .pet-all-menu .pet-all-root {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    min-width: 0 !important;
    padding: 0 0 7px !important;
    margin: 0 !important;
    color: #17233a !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
    font-weight: 900 !important;
    border-bottom: 1px solid #eceaf3 !important;
    white-space: normal !important;
  }

  #menu .pet-all-menu .pet-all-root i {
    flex: 0 0 auto !important;
    margin: 0 !important;
    color: var(--pet-primary) !important;
  }

  #menu .pet-all-menu .pet-all-children {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px !important;
    margin-top: 9px !important;
  }

  #menu .pet-all-menu .pet-all-children a {
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 5px 8px !important;
    margin: 0 !important;
    border: 1px solid #ebe8f4 !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: #607086 !important;
    font-size: 10.5px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    white-space: normal !important;
  }

  #menu .pet-all-menu .pet-all-children a:hover {
    border-color: #cfc1f7 !important;
    background: #f6f2ff !important;
    color: var(--pet-primary) !important;
  }

  /* Normal top-level dropdowns stay clean and readable. */
  #menu .pet-mega-menu {
    min-width: 245px !important;
    padding: 10px !important;
    border: 1px solid #ece8f8 !important;
    background: #fff !important;
    z-index: 9998 !important;
  }
  #menu .pet-mega-menu .dropdown-inner {
    display: block !important;
  }
  #menu .pet-mega-menu .dropdown-inner ul {
    display: block !important;
    margin: 0 !important;
  }
  #menu .pet-mega-menu .dropdown-inner a {
    min-width: 220px !important;
    padding: 7px 9px !important;
    border-radius: 8px !important;
    line-height: 1.35 !important;
    white-space: normal !important;
  }
  #menu .pet-mega-menu .dropdown-inner a:hover {
    background: #f6f2ff !important;
    color: var(--pet-primary) !important;
  }
}

/* Restore refinements lost in the previous patch. */
.pet-topbar-right { display:flex; gap:18px; align-items:center; }
.pet-topbar-right a { white-space:nowrap; }
.pet-brand-strip { padding:12px 0 8px; background:#fff; }
.pet-brand-track { min-height:62px; border-top:1px solid #edf1f6; border-bottom:1px solid #edf1f6; display:flex; align-items:center; justify-content:space-between; gap:22px; overflow-x:auto; white-space:nowrap; padding:0 8px; scrollbar-width:none; }
.pet-brand-track::-webkit-scrollbar { display:none; }
.pet-brand-track span { font-weight:900; letter-spacing:.08em; color:#7b21ff; font-size:17px; }
.pet-brand-track b { font-size:16px; color:#34465a; letter-spacing:.02em; opacity:.82; }
.pet-promo-card { position:relative; overflow:hidden; min-height:235px; display:flex !important; align-items:flex-end !important; padding:24px !important; }
.pet-promo-copy { position:relative; z-index:2; max-width:67%; }
.pet-promo-product { position:absolute; right:-12px; bottom:-6px; width:48%; height:76%; display:flex; align-items:flex-end; justify-content:flex-end; z-index:1; }
.pet-promo-product:before { content:""; position:absolute; width:145px; height:145px; border-radius:50%; background:rgba(255,255,255,.65); right:8px; bottom:8px; }
.pet-promo-product img { position:relative; z-index:2; max-width:100%; max-height:100%; object-fit:contain; filter:drop-shadow(0 12px 10px rgba(10,28,44,.15)); }
.pet-promo-card .pet-promo-icon { margin-bottom:13px; }
.pet-promo-card h3 { font-size:21px !important; }
.pet-promo-card p { min-height:42px; }

@media (max-width:767px) {
  .pet-topbar-right a:first-child { display:none; }
  .pet-promo-card { min-height:195px; }
  .pet-promo-copy { max-width:70%; }
  .pet-promo-product { width:44%; height:68%; }
}


/* === Beautiful Food mobile navigation v4 === */
@media (max-width:767px) {
  .pet-nav-shell {
    position: relative !important;
    z-index: 1000 !important;
    padding: 6px 0 !important;
    border-top: 1px solid #f0edf8 !important;
    border-bottom: 1px solid #f0edf8 !important;
    background: #fff !important;
  }
  .pet-navbar {
    min-height: 0 !important;
    margin: 0 !important;
    border: 0 !important;
  }
  .pet-navbar .navbar-header,
  .pet-navbar .navbar-collapse,
  .pet-navbar .pet-main-nav {
    display: none !important;
  }
  .pet-mobile-nav {
    display: block !important;
    width: 100% !important;
    position: relative !important;
  }
  .pet-mobile-menu-toggle {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    height: 46px;
    border: 0;
    border-radius: 12px;
    padding: 0 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #fff;
    background: linear-gradient(135deg,#6d28d9,#8b5cf6);
    box-shadow: 0 8px 22px rgba(109,40,217,.20);
    font-size: 13px;
    font-weight: 900;
    text-align: left;
  }
  .pet-mobile-menu-toggle span {
    display: inline-flex;
    align-items: center;
    gap: 9px;
  }
  .pet-mobile-menu-toggle .pet-mobile-menu-icon {
    width: 29px;
    height: 29px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.15);
    transition: .2s ease;
  }
  .pet-mobile-menu-toggle.is-open .pet-mobile-menu-icon {
    transform: rotate(90deg);
    background: rgba(255,255,255,.23);
  }
  .pet-mobile-menu-panel {
    display: none;
    position: absolute;
    top: calc(100% + 7px);
    left: 0;
    right: 0;
    max-height: 68vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #fff;
    border: 1px solid #ece8f8;
    border-radius: 15px;
    padding: 7px;
    box-shadow: 0 22px 55px rgba(18,37,63,.20);
    z-index: 10050;
  }
  .pet-mobile-menu-panel.is-open { display: block; }
  .pet-mobile-group {
    border-bottom: 1px solid #f0edf8;
    padding: 2px 0;
  }
  .pet-mobile-group:last-child { border-bottom: 0; }
  .pet-mobile-root-row {
    min-height: 46px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .pet-mobile-root-link {
    flex: 1 1 auto;
    min-width: 0;
    padding: 11px 10px;
    color: #17233a !important;
    font-size: 13px;
    line-height: 1.25;
    font-weight: 900;
  }
  .pet-mobile-sub-toggle {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    margin-right: 3px;
    border: 0;
    border-radius: 10px;
    background: #f5f1ff;
    color: #6d28d9;
  }
  .pet-mobile-sub-toggle i { transition: transform .2s ease; }
  .pet-mobile-group.is-open .pet-mobile-sub-toggle i { transform: rotate(180deg); }
  .pet-mobile-children {
    display: none;
    padding: 0 8px 10px;
    gap: 6px;
    flex-wrap: wrap;
  }
  .pet-mobile-group.is-open .pet-mobile-children { display: flex; }
  .pet-mobile-children a {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 7px 10px;
    border: 1px solid #ece8f8;
    border-radius: 9px;
    background: #fbfaff;
    color: #607086 !important;
    font-size: 11px;
    line-height: 1.2;
    font-weight: 800;
  }
  .pet-mobile-children .pet-mobile-see-all {
    color: #6d28d9 !important;
    background: #f1ebff;
    border-color: #ddd0ff;
  }

  /* Prevent old Bootstrap/OpenCart mobile menu rules from rendering large tiles. */
  #menu .navbar-nav > li,
  #menu .navbar-nav > li > a { float: none !important; width: auto !important; }
}