/* ========================================================================= Totana a la Carta - Desktop layout for the RESTAURANT DETAIL view ------------------------------------------------------------------------- Page-specific only. The shared chrome (top bar, footer) lives in desktop_shared.css, which must be loaded first. Everything sits inside @media (min-width: 1024px) and almost everything is scoped to .detail-desktop, a class the public view puts on . The QR / private view does not carry it, so that flow is untouched, and so is every mobile rendering. ========================================================================= */ /* Below 1024px the wrapper generates no box at all, so the mobile document flow is exactly what it was before the wrapper existed. */ .detail-layout { display: contents; } @media (min-width: 1024px) { /* Anchor jumps clear the top bar plus the sticky section nav. */ html { scroll-padding-top: calc(72px + var(--section-nav-height) + 16px); } .detail-desktop .header, .detail-desktop .detail-contact-bar { display: none !important; } .detail-desktop #section-nav { top: 72px !important; } /* --------------------------------------------------------------------- 1. Breadcrumb --------------------------------------------------------------------- */ .detail-breadcrumb { display: none !important; } /* --------------------------------------------------------------------- 2. Hero banner --------------------------------------------------------------------- */ .detail-desktop .restaurant-section { margin-top: 0; border-radius: 0; min-height: 300px; } .detail-desktop .restaurant-content { flex-direction: row; align-items: center; justify-content: flex-start; gap: 32px; width: 100%; max-width: none; padding: 40px var(--dsk-gutter); text-align: left; } .detail-desktop .restaurant-logo-circle { width: 140px; height: 140px; margin-bottom: 0; flex-shrink: 0; border-width: 4px; } .detail-desktop .restaurant-title { font-family: inherit; font-size: clamp(2.4rem, 3.2vw, 3.25rem); line-height: 1.08; letter-spacing: -0.02em; } /* --------------------------------------------------------------------- 3. Two-column body: sticky info card + content --------------------------------------------------------------------- */ .detail-desktop .detail-layout { display: grid; grid-template-columns: 360px minmax(0, 1fr); align-items: start; gap: 44px; width: 100%; padding: 36px var(--dsk-gutter) 72px; background-color: #f9f3ee; } .detail-desktop .detail-info-wrap { background: transparent !important; position: sticky; top: 96px; } .detail-desktop .content-section { top: 0; margin-bottom: 0; padding: 26px; border-radius: 20px; background: #fff; box-shadow: var(--dsk-shadow-sm); } .detail-desktop .info-item { margin-bottom: 1.1rem; } .detail-desktop .delivery-options { margin-top: 1.25rem; gap: .75rem; } .detail-desktop .delivery-option { background-color: #faf7f3; border: 1px solid var(--dsk-line); } /* Sidebar calls to action */ .detail-actions { display: flex !important; flex-direction: column; gap: 10px; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--dsk-line); } .detail-action { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: .85rem 1rem; border: 1px solid var(--dsk-line); border-radius: 12px; background: #fff; color: var(--dsk-ink); font-size: .95rem; font-weight: 600; text-decoration: none; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease; } .detail-action:hover { transform: translateY(-1px); box-shadow: var(--dsk-shadow-sm); background: #faf7f3; } .detail-action-primary { border-color: transparent; background: var(--dsk-ink); color: #fff; } .detail-action-primary:hover { background: #000; color: #fff; } .detail-action-whatsapp { border-color: transparent; background: #25d366; color: #fff; } .detail-action-whatsapp:hover { background: #1fb457; color: #fff; } .detail-action i { font-size: 1.05rem; } /* --------------------------------------------------------------------- 4. Content column --------------------------------------------------------------------- */ .detail-desktop main { max-width: none !important; width: 100%; margin: 0; padding: 0 0 1rem 0; padding-bottom: 0; background: transparent; } .detail-desktop .section-title { font-family: inherit; font-size: 1.9rem !important; letter-spacing: -0.01em; } .detail-desktop .section-title-hr { margin-bottom: 1.5rem; } /* Photographed menus, promos and the daily menu get more room than the phone build's max-w-xl, which is hard to read on a large screen. */ .detail-desktop main img.mx-auto.h-auto { max-width: 760px; } .detail-desktop .detail-ad { width: min(100%, 760px); margin: 1.5rem auto; } .detail-desktop .detail-ad-link { display: flex; width: 100%; min-height: 90px; max-height: 180px; align-items: center; justify-content: center; overflow: hidden; } .detail-desktop .detail-ad-image { width: auto !important; max-width: 100% !important; height: auto !important; max-height: 180px; object-fit: contain; } /* --------------------------------------------------------------------- 5. Dish gallery: the carousel gives way to the grid --------------------------------------------------------------------- */ .detail-desktop .gallery-swiper, .detail-desktop .gallery-swiper + .swiper-pagination, .detail-desktop .gallery-section .swiper-pagination { display: none !important; } .detail-desktop .gallery-section .max-w-6xl { max-width: none; } /* Four dishes per row reads better than the six the mobile build asks for. */ .detail-desktop .gallery-container > div.hidden { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } /* --------------------------------------------------------------------- 6. Menu sections in two columns --------------------------------------------------------------------- */ .detail-desktop .menu-section { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 20px; margin-bottom: 3rem; } .detail-desktop .menu-section-head, .detail-desktop .menu-section-info { grid-column: 1 / -1; } .detail-desktop .menu-section-head.h-64 { height: 260px; } .detail-desktop .menu-dish { margin-bottom: 0; height: auto; padding: 20px; align-self: stretch; } .detail-desktop .menu-section > .menu-dish { margin-bottom: 0; } /* --------------------------------------------------------------------- 7. Sticky section nav --------------------------------------------------------------------- */ .detail-desktop #section-nav { display: none !important; } .detail-desktop #section-nav-static { position: sticky; top: 72px; z-index: 39; margin: 0 0 2rem; padding: .75rem 0; background: #f9f3ee; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; box-shadow: 0 8px 14px -14px rgba(31, 27, 22, .45); } .detail-desktop #section-nav-static .flex { justify-content: flex-start; flex-wrap: nowrap; max-width: none; overflow-x: auto; padding: .25rem 2px; scrollbar-width: none; } .detail-desktop #section-nav-static .flex::-webkit-scrollbar { display: none; } } @media (min-width: 1024px) and (max-width: 1279px) { .detail-desktop .detail-layout { grid-template-columns: 310px minmax(0, 1fr); gap: 32px; } .detail-desktop .menu-section { grid-template-columns: minmax(0, 1fr); } }