/* Desktop polish only: preserves the established structure and visual system. */
@media (min-width:801px){
  .hero{padding-bottom:54px}.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 24% 54%,rgba(7,8,10,.3),transparent 43%),linear-gradient(90deg,rgba(5,6,8,.36),transparent 60%)}
  .hero-media{filter:brightness(1.08) saturate(.75) contrast(1.1) sepia(.08) !important;animation:desktopKenBurns 18s ease-in-out infinite alternate}.hero-media::after{background:linear-gradient(90deg,rgba(12,10,9,.82) 0%,rgba(12,10,9,.45) 45%,rgba(12,10,9,.08) 100%),radial-gradient(ellipse at center,transparent 35%,rgba(0,0,0,.32) 100%),linear-gradient(0deg,#100d0a 0%,transparent 45%) !important;}
  .hero .wrap{position:relative}.hero-main{max-width:650px}.hero h1{margin:15px 0 20px !important; line-height:.79 !important; animation: heroFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: 0.2s;}
  .hero-lead{max-width:570px !important; font-size: 15px !important; line-height:1.82 !important; margin-bottom:25px !important; animation: heroFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: 0.3s;}
  .hero-actions{align-items:flex-start; animation: heroFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: 0.4s;}
  .hero-primary-cta{width:min(400px,100%) !important; min-height:48px !important; height:48px !important; display: flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 8px 24px rgba(239, 189, 78, 0.25) !important;}
  .hero-secondary-ctas .button{min-height:48px !important; height:48px !important; display: flex !important; align-items: center !important; justify-content: center !important; background: rgba(255, 255, 255, 0.04) !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; color: #fff !important;}
  .hero-secondary-ctas .button:hover{background: rgba(255, 255, 255, 0.12) !important; border-color: rgba(255, 255, 255, 0.4) !important;}
  .button{transition:transform .22s ease,box-shadow .26s ease,background .26s ease,border-color .26s ease}.button:hover{transform:translateY(-4px);box-shadow:0 15px 42px rgba(239,189,78,.38) !important;}.button.secondary:hover{border-color:rgba(239,189,78,.72);background:rgba(255,255,255,.13);box-shadow:0 12px 34px rgba(239,189,78,.1)}.button span{display:inline-block;transition:transform .22s ease}.button:hover span{transform:translateX(4px)}
  .hero-orbit {
    border: 1px solid rgba(239, 189, 78, 0.12) !important;
    box-shadow: 0 0 60px rgba(239, 189, 78, 0.04) !important, inset 0 0 40px rgba(239, 189, 78, 0.02) !important;
  }
  .hero-ring-card {
    right: calc(8.5% + 17vw - 180px) !important;
    width: 360px !important;
    background: rgba(18, 16, 24, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    padding: 32px 34px !important;
    box-shadow: 0 20px 55px rgba(0,0,0,0.5) !important;
    animation: heroSlideIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) both, ringCardFloat 4s ease-in-out infinite 1.2s !important;
    animation-delay: 0.3s, 1.5s;
  }
  .ring-card-countdown {
    font-size: 54px !important;
  }
  .ring-card-stats {
    gap: 28px !important;
  }
  @keyframes heroFadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes heroSlideIn {
    from { opacity: 0; transform: translate3d(40px, 0, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
  }
  .trust-strip-scroll{gap:21px;padding:12px 22px;background:rgba(8,9,12,.58);backdrop-filter:blur(13px)}.trust-item{display:inline-flex;align-items:center;gap:4px;transition:transform .2s ease,color .2s ease}.trust-item:hover{transform:translateY(-3px);color:#fff}.trust-icon{font-size:14px}.trust-item strong{font-size:12px}
  .nav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 60px !important; /* Reduced from 68px for a tighter, premium feel */
    padding-left: 48px !important;
    padding-right: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: rgba(10, 10, 10, 0.75) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 0 !important;
    margin: 0 !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.15) !important;
    transition: background 0.3s ease, border-color 0.3s ease, backdrop-filter 0.3s ease, height 0.3s ease !important;
    z-index: 10002 !important;
  }
  .nav.scrolled {
    background: rgba(8, 9, 12, 0.95) !important;
    border-bottom: 1px solid rgba(239, 189, 78, 0.16) !important;
  }
  .brand {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    font: 800 20px var(--display) !important;
    letter-spacing: -1px !important;
    color: #fff !important;
    height: 100% !important;
  }
  .brand-mark {
    width: 44px !important; /* Logo: 44px */
    height: 44px !important; /* Logo: 44px */
    border-radius: 50% !important;
    background: var(--lime) !important;
    padding: 2px !important;
    vertical-align: middle !important;
    object-fit: contain !important; /* Prevent squeezing */
  }
  .nav-links {
    display: flex !important;
    align-items: center !important;
    gap: 36px !important; /* Gutter increased to 32-40px for breathing room */
    height: 100% !important;
  }
  .nav-links a {
    display: inline-flex !important;
    align-items: center !important;
    height: 100% !important;
    padding-bottom: 0 !important;
    color: #F7F2EA !important;
    font-size: 15px !important; /* Menu font: 15px */
    font-weight: 600 !important; /* SemiBold */
    transition: color 0.25s ease, text-shadow 0.25s ease !important;
    position: relative !important;
    text-decoration: none !important;
  }
  .nav-links a::after,
  .nav-links a::before,
  .nav-links a.active::before,
  .nav-links a.active::after {
    display: none !important;
    content: none !important;
    border-bottom: none !important;
  }
  .nav-links a:hover {
    color: #F5C64D !important;
    text-shadow: 0 0 10px rgba(245, 198, 77, 0.3) !important;
  }
  .nav-links a.active {
    color: #F5C64D !important;
    text-shadow: 0 0 15px rgba(245, 198, 77, 0.4) !important;
    font-weight: 700 !important;
    border-bottom: none !important;
  }
  .nav-book-link {
    background: #efbd4e !important;
    color: #000 !important;
    border-radius: 8px !important;
    padding: 8px 18px !important; /* Reduced button size by ~35% */
    height: auto !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(239, 189, 78, 0.25) !important;
    transition: all 0.2s ease !important;
    margin: 0 0 0 16px !important; /* Consistent spacing with navigation links */
    line-height: 1 !important;
  }
  .nav-book-link::after {
    display: none !important;
  }
  .nav-book-link:hover {
    background: var(--lime) !important;
    opacity: 1 !important;
    transform: translateY(-2px) scale(1.03) !important; /* Premium scaling and lift hover state */
    box-shadow: 0 8px 24px rgba(167, 255, 0, 0.35) !important;
    filter: brightness(1.05) !important;
  }
  .hero-live-card{position:absolute;right:0;top:50%;width:270px;transform:translateY(-48%);padding:19px;border:1px solid rgba(239,189,78,.42);background:linear-gradient(145deg,rgba(20,17,14,.78),rgba(11,12,15,.72));backdrop-filter:blur(17px);box-shadow:0 20px 55px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.08);z-index:2}.hero-live-card::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 85% 0,rgba(239,189,78,.2),transparent 38%);pointer-events:none}.hero-live-card>*{position:relative}.hero-live-card .live{display:block;margin-bottom:11px}.hero-live-card h3{font:700 26px/.9 var(--display);letter-spacing:-.07em;margin:0 0 7px}.hero-live-card p{font-size:12px;color:#c7bbb0;margin:0 0 18px}.hero-live-meta{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:12px 0;border-top:1px solid rgba(255,255,255,.13);border-bottom:1px solid rgba(255,255,255,.13);font:500 9px var(--mono);letter-spacing:.07em;color:#a89b8f;text-transform:uppercase}.hero-live-meta b{display:block;color:#fff;font:700 16px var(--display);letter-spacing:-.05em;margin-top:4px;text-transform:none}.hero-live-card a{display:inline-flex;margin-top:15px;color:var(--lime);font:700 10px var(--mono);letter-spacing:.08em;text-transform:uppercase}.hero-live-card a:hover{color:#fff}.hero-bottom{grid-template-columns:1fr 330px;margin-top:36px}
  .cursor-glow{position:fixed;z-index:9999;width:260px;height:260px;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(239,189,78,.09),transparent 64%);transform:translate(-50%,-50%);mix-blend-mode:screen;transition:left .12s ease,top .12s ease;opacity:0}.cursor-glow.active{opacity:1}.magnetic{will-change:transform}@keyframes desktopKenBurns{from{transform:scale(1.03)}to{transform:scale(1.09)}}
  .cafe-photo {
    background-position: 70% center !important;
  }
  .floating-avail-widget {
    width: 115px !important;
    background: rgba(10, 10, 10, 0.75) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4) !important;
    border-radius: 12px !important;
    padding: 10px !important;
  }
  .floating-avail-row {
    font-size: 10px !important;
    margin-bottom: 4px !important;
  }
  .floating-avail-btn {
    height: 32px !important;
    font-size: 9px !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .sticky-menu-shelf {
    top: 68px !important; /* Align perfectly with the 68px PC navbar */
  }
  /* Search bar styles live in assets/css/search-bar.css (loaded last) */
  .sticky-menu-shelf {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .menu-categories-row {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 28px !important;
    margin-bottom: 28px !important;
  }
  .menu-grid-view {
    margin-top: 32px !important;
    gap: 32px !important;
  }
}
@media (prefers-reduced-motion:reduce) and (min-width:801px){.hero-media{animation:none!important}.cursor-glow{display:none!important}.magnetic{transform:none!important}}

.premium-feature-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  padding: 10px 18px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #fff !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: default !important;
}
.premium-feature-chip:hover {
  border-color: #F5C64D !important;
  box-shadow: 0 0 15px rgba(245, 198, 77, 0.15) !important;
  transform: translateY(-2px) !important;
}

/* ==========================================================================
   FOOD DETAILS MODAL — Desktop layout
   (Mirrors the mobile-audit.css treatment, scoped for min-width:801px so
   the modal isn't unstyled/broken above the 800px mobile breakpoint.)
   ========================================================================== */
@media (min-width: 801px) {

  .food-modal-wrapper {
    height: 80vh !important;
    max-height: 650px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }
  #foodModalContent {
    height: 100% !important;
    overflow: hidden !important;
  }
  .food-modal-grid {
    display: grid !important;
    grid-template-columns: 1fr 1.15fr !important;
    height: 100% !important;
    min-height: 100% !important;
    overflow: hidden !important;
  }

  /* Left column: image */
  .food-modal-media {
    position: relative !important;
    height: 100% !important;
    min-height: 100% !important;
    background: #0c0d10 !important;
    overflow: hidden !important;
  }
  .food-modal-hero-img {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    background-size: cover !important;
    background-position: center !important;
  }
  .food-modal-media::after {
    content: '' !important;
    position: absolute !important; inset: 0 !important;
    background: linear-gradient(0deg, rgba(8,9,12,.9) 0%, transparent 45%) !important;
    pointer-events: none !important; z-index: 1 !important;
  }

  /* Badges + favourite heart, overlaid on the image */
  .modal-food-badge-wrap {
    position: absolute !important;
    bottom: 20px !important; left: 20px !important;
    z-index: 2 !important;
    display: flex !important; gap: 8px !important; flex-wrap: wrap !important;
  }
  .modal-food-badge.bestseller {
    background: #F5C64D !important; color: #000 !important;
    font: 800 10px var(--mono) !important;
    padding: 6px 12px !important; border-radius: 6px !important;
    text-transform: uppercase !important;
  }
  .modal-food-veg-badge {
    font: 800 10px var(--mono) !important;
    padding: 6px 12px !important; border-radius: 6px !important;
    text-transform: uppercase !important; color: #fff !important;
  }
  .modal-food-veg-badge.veg {
    background: rgba(0,219,120,.2) !important; border: 1px solid rgba(0,219,120,.4) !important;
  }
  .modal-food-veg-badge.nonveg {
    background: rgba(255,79,112,.2) !important; border: 1px solid rgba(255,79,112,.4) !important;
  }
  .modal-fav-btn {
    position: absolute !important; top: 16px !important; right: 16px !important;
    width: 40px !important; height: 40px !important; border-radius: 50% !important;
    background: rgba(0,0,0,.5) !important; backdrop-filter: blur(5px) !important;
    border: 1px solid rgba(255,255,255,.15) !important; z-index: 3 !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
  }

  /* Right column: content */
  .food-modal-body {
    padding: 40px !important;
    height: 100% !important;
    overflow-y: auto !important;
  }
  .food-modal-body::-webkit-scrollbar {
    width: 6px !important;
  }
  .food-modal-body::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2) !important;
    border-radius: 10px !important;
  }
  .food-modal-body::-webkit-scrollbar-thumb {
    background: rgba(245, 198, 77, 0.25) !important;
    border-radius: 10px !important;
  }
  .food-modal-body::-webkit-scrollbar-thumb:hover {
    background: rgba(245, 198, 77, 0.5) !important;
  }
  .food-modal-header-block { margin-bottom: 12px !important; }
  .food-modal-kicker {
    font: 700 10px var(--mono) !important; letter-spacing: .1em !important;
    text-transform: uppercase !important; color: var(--accent) !important;
    margin-bottom: 6px !important;
  }
  .food-modal-title {
    font: 700 30px var(--display) !important; color: #fff !important;
    letter-spacing: -.03em !important; margin: 0 0 10px !important;
  }
  .food-modal-price-rating { display: flex !important; align-items: center !important; gap: 12px !important; }
  .food-modal-price { font: 800 24px var(--mono) !important; color: #F5C64D !important; }
  .food-modal-rating {
    display: inline-flex !important; align-items: center !important; gap: 4px !important;
    background: #1fA855 !important; color: #fff !important;
    font: 800 12px var(--mono) !important;
    padding: 4px 9px !important; border-radius: 6px !important;
    box-shadow: 0 2px 8px rgba(31,168,85,.35) !important;
  }
  .food-modal-desc { color: rgba(255,255,255,.65) !important; line-height: 1.6 !important; margin: 14px 0 20px !important; }

  .food-stat-chips { display: flex !important; gap: 10px !important; margin-bottom: 24px !important; }
  .food-stat-chip {
    flex: 1 !important; display: flex !important; flex-direction: column !important; align-items: center !important; gap: 4px !important;
    background: rgba(255,255,255,.03) !important; border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 10px !important; padding: 12px !important; font: 700 13px var(--mono) !important; color: #fff !important;
  }
  .food-stat-chip .chip-label { font-size: 9px !important; color: rgba(255,255,255,.4) !important; text-transform: uppercase !important; }

  .modal-extra-section { margin-bottom: 24px !important; }
  .food-modal-section-title {
    font: 700 11px var(--mono) !important; text-transform: uppercase !important; letter-spacing: .06em !important;
    color: #fff !important; margin-bottom: 12px !important;
  }
  .food-ingredient-tags { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; }
  .food-ingredient-tag {
    font: 600 11px var(--mono) !important; color: #F5C64D !important;
    border: 1px solid rgba(245,198,77,.4) !important; border-radius: 99px !important; padding: 6px 14px !important;
  }

  /* Quantity + Add to Order: show desktop block, hide mobile sticky bar */
  .food-qty-section-desktop { display: block !important; }
  .food-add-sticky-wrap { display: none !important; }
  .food-qty-row { display: flex !important; align-items: center !important; justify-content: space-between !important; margin-bottom: 14px !important; }
  .food-qty-selector {
    display: inline-flex !important; align-items: center !important; gap: 4px !important;
    border: 1.5px solid var(--accent) !important; border-radius: 999px !important; padding: 4px !important;
    background: rgba(245,198,77,.06) !important;
  }
  .food-qty-btn {
    background: transparent !important; border: none !important; color: var(--accent) !important;
    font: 800 16px var(--mono) !important; cursor: pointer !important;
    width: 30px !important; height: 30px !important; border-radius: 50% !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    transition: background .2s ease !important;
  }
  .food-qty-btn:hover { background: rgba(245,198,77,.18) !important; }
  .food-qty-value { font: 700 15px var(--mono) !important; color: #fff !important; min-width: 20px !important; text-align: center !important; }
  .food-prep-live { font-size: 11px !important; color: rgba(255,255,255,.5) !important; }
  .food-add-btn {
    width: 100% !important; background: var(--accent) !important; color: #000 !important;
    border: none !important; border-radius: 999px !important; padding: 16px !important;
    font: 800 13px var(--mono) !important; letter-spacing: .04em !important; text-transform: uppercase !important; cursor: pointer !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    box-shadow: 0 8px 20px rgba(245,198,77,.25) !important;
    transition: transform .15s ease, box-shadow .15s ease !important;
  }
  .food-add-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 26px rgba(245,198,77,.35) !important;
  }

  /* "Customers Also Ordered" + "Recommended Pairing" — these had ZERO
     desktop rules anywhere in the codebase (only existed inside the
     max-width:800px mobile block in mobile-audit.css), so on desktop
     they rendered as raw unstyled browser defaults: full-resolution
     images, no card layout, no spacing — the source of the reported
     "empty spaces" / alignment issues in these two sections. */
  .food-related-scroll {
    display: flex !important;
    gap: 12px !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    padding: 4px 2px 10px !important;
    margin: 0 !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(245, 198, 77, .35) transparent !important;
  }
  .food-related-scroll::-webkit-scrollbar { height: 6px !important; }
  .food-related-scroll::-webkit-scrollbar-thumb {
    background: rgba(245, 198, 77, .3) !important;
    border-radius: 10px !important;
  }
  .food-related-card {
    flex: 0 0 132px !important;
    background: rgba(255, 255, 255, .03) !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    cursor: pointer !important;
    scroll-snap-align: start !important;
    transition: border-color .2s ease, transform .2s ease !important;
  }
  .food-related-card:hover {
    border-color: var(--accent) !important;
    transform: translateY(-3px) !important;
  }
  .food-related-card img {
    width: 100% !important;
    height: 90px !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }
  .food-related-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    padding: 10px !important;
  }
  .food-related-card .rel-name {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #fff !important;
    line-height: 1.3 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    margin: 0 !important;
  }
  .food-related-card .rel-meta {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .food-related-card .rel-price {
    font: 700 12px var(--mono) !important;
    color: #F5C64D !important;
  }
  .food-related-card .rel-add {
    width: 24px !important;
    height: 24px !important;
    border-radius: 6px !important;
    background: rgba(245, 198, 77, .12) !important;
    border: 1px solid rgba(245, 198, 77, .35) !important;
    color: #F5C64D !important;
    font-size: 13px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    transition: all .2s ease !important;
  }
  .food-related-card .rel-add:hover {
    background: #F5C64D !important;
    color: #000 !important;
  }

  .recommended-pairing-block {
    background: rgba(255, 255, 255, .03) !important;
    border: 1px dashed rgba(255, 255, 255, .15) !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
  }

  /* --- Reverted Category Pills layout on PC --- */
  .cafe-tabs {
    display: flex !important;
    gap: 8px !important;
    overflow-x: auto !important;
    padding: 8px 0 !important;
    scrollbar-width: none !important;
  }
  .cafe-tabs::-webkit-scrollbar {
    display: none !important;
  }
  .cafe-tabs .cafe-tab-btn {
    flex: 0 0 auto !important;
    min-height: 38px !important;
    padding: 8px 18px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 99px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.7) !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    transition: all 0.2s ease !important;
  }
  .cafe-tabs .cafe-tab-btn:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #fff !important;
  }
  .cafe-tabs .cafe-tab-btn.active {
    background: #F5C64D !important;
    color: #000 !important;
    border-color: #F5C64D !important;
    box-shadow: 0 4px 12px rgba(245, 198, 77, 0.25) !important;
  }
  .cafe-tabs .cafe-tab-btn .cat-pill-count {
    font-size: 10px !important;
    margin-left: 4px !important;
    opacity: 0.8 !important;
  }

  /* --- PC Section Sliders & Shelf Re-alignment --- */
  .cafe-items-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 64px !important;
    width: 100% !important;
  }
  .menu-category-section {
    width: 100% !important;
    box-sizing: border-box !important;
    transition: background 0.3s ease !important;
  }
  .menu-category-section:nth-child(even) {
    background: rgba(255, 255, 255, 0.012) !important;
    border-radius: 20px !important;
    padding: 28px 24px !important;
    margin-left: -24px !important;
    margin-right: -24px !important;
    border: 1px solid rgba(255, 255, 255, 0.03) !important;
  }
  .menu-horizontal-slider {
    display: flex !important;
    gap: 20px !important;
    overflow-x: auto !important;
    padding: 10px 4px 20px !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(245, 198, 77, 0.35) transparent !important;
  }
  .menu-horizontal-slider::-webkit-scrollbar {
    height: 6px !important;
  }
  .menu-horizontal-slider::-webkit-scrollbar-thumb {
    background: rgba(245, 198, 77, 0.3) !important;
    border-radius: 10px !important;
  }
  .menu-horizontal-slider .food-related-card {
    flex: 0 0 280px !important; /* Increased width by ~30% for premium feel */
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease !important;
  }
  .menu-horizontal-slider .food-related-card img {
    height: 175px !important; /* Image height upscaled so photography dominates */
    object-fit: cover !important;
    width: 100% !important;
  }
  .menu-horizontal-slider .food-related-card:hover {
    transform: translateY(-5px) !important;
    border-color: rgba(245, 198, 77, 0.5) !important;
    box-shadow: 0 12px 30px rgba(245, 198, 77, 0.15), 0 8px 24px rgba(0,0,0,0.5) !important;
  }
  .menu-item-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
    gap: 20px !important;
    padding: 10px 4px 20px !important;
  }
  .menu-item-grid .food-related-card {
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease !important;
  }
  .menu-item-grid .food-related-card img {
    height: 160px !important;
    object-fit: cover !important;
    width: 100% !important;
  }
  .menu-item-grid .food-related-card:hover {
    transform: translateY(-5px) !important;
    border-color: rgba(245, 198, 77, 0.5) !important;
    box-shadow: 0 12px 30px rgba(245, 198, 77, 0.15), 0 8px 24px rgba(0,0,0,0.5) !important;
  }
  /* Active pill underline indicators */
  .cafe-tabs .cafe-tab-btn.active {
    position: relative !important;
    padding-bottom: 10px !important;
    padding-top: 6px !important;
  }
  .cafe-tabs .cafe-tab-btn.active::after {
    content: '' !important;
    position: absolute !important;
    bottom: 4px !important;
    left: 25% !important;
    right: 25% !important;
    height: 2px !important;
    background: #000 !important;
    border-radius: 99px !important;
  }
}