*,
   *::before,
   *::after {
       box-sizing: border-box;
       margin: 0;
       padding: 0;
   }

   * {
       -webkit-user-select: none;
       user-select: none;
   }

   html,
   body {
       width: 100%;
       min-height: 100%;
       background: #5e5958;
       display: flex;
       justify-content: center;
       font-family: 'Red Hat Display', sans-serif;
       -webkit-font-smoothing: antialiased;
   }

   body.ov-lock {
       overflow: hidden;
       height: 100%;
   }

   .screen {
       width: 100%;
       min-height: 100svh;
       background: #5e5958;
       position: relative;
       overflow-x: hidden;
   }

   /* ══ HERO ══ */
   .hero {
       width: 100%;
       height: 400px;
       position: sticky;
       top: 0;
       z-index: 10;
       overflow: hidden;
       display: flex;
       flex-direction: column;
       justify-content: space-between;
   }

   .hero-bg {
       position: absolute;
       inset: 0;
       background:
           linear-gradient(180deg, rgba(0, 0, 0, 0) 44.48%, rgba(0, 0, 0, .68) 63.93%, #000 91.92%),
           url("../Images/Hero.png") center/cover no-repeat;
   }

   .hero-bg::before {
       content: '';
       position: absolute;
       inset: 0;
       background: url('https://www.figma.com/api/mcp/asset/ea6c8d4d-75d1-4140-9ac3-97eced0bcfec') center/cover no-repeat;
       opacity: .55;
   }

   .hero-nav {
       position: relative;
       z-index: 2;
       display: flex;
       align-items: center;
       justify-content: space-between;
       padding: 24px;
   }

   .back-btn {
       display: flex;
       align-items: center;
       gap: 8px;
       background: rgba(0, 0, 0, .7);
       backdrop-filter: blur(9.3px);
       border: none;
       border-radius: 32px;
       padding: 10px 20px 10px 14px;
       cursor: pointer;
       color: #fff;
       font-family: 'Red Hat Display', sans-serif;
       font-size: 14px;
       font-weight: 500;
       transition: opacity .2s;
       text-decoration: none;
   }

   .back-btn:active {
       opacity: .75;
   }

   .back-btn svg {
       width: 16px;
       height: 16px;
   }

   .nav-right {
       display: flex;
       align-items: center;
       gap: 12px;
   }

   .icon-btn {
       width: 36px;
       height: 36px;
       border-radius: 50%;
       background: #fff;
       border: none;
       display: flex;
       align-items: center;
       justify-content: center;
       cursor: pointer;
   }

   .icon-btn svg {
       width: 20px;
       height: 20px;
   }

   .cart-btn {
       display: flex;
       align-items: center;
       gap: 8px;
       background: #fff;
       border-radius: 500px;
       padding: 10px 12px;
       border: none;
       cursor: pointer;
       font-family: 'Red Hat Display', sans-serif;
       font-weight: 500;
       font-size: 12px;
       color: #000;
   }

   .cart-btn svg {
       width: 16px;
       height: 16px;
   }

   .hero-center {
       position: relative;
       z-index: 2;
       height: 232px;
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: space-between;
       padding: 0 24px 32px;
   }

   .cat-title-block {
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: 8px;
       padding-top: 24px;
   }

   .cat-title {
       font-family: Georgia, 'Times New Roman', serif;
       font-style: italic;
       font-size: 45.66px;
       font-weight: 600;
       color: #fff;
       white-space: nowrap;
       line-height: 1.31;
   }

   .cat-subtitle {
       font-size: 15px;
       font-weight: 400;
       color: rgba(255, 255, 255, .35);
       text-align: center;
       max-width: 258px;
       line-height: 1.47;
   }

   .cat-tabs {
       display: flex;
       align-items: center;
       gap: 9.8px;
       overflow-x: auto;
       scrollbar-width: none;
       width: 100%;
       padding: 0 18px;
   }

   .cat-tabs::-webkit-scrollbar {
       display: none;
   }

   .cat-pill {
       border: 1px solid rgba(255, 255, 255, .09);
       border-radius: 36.6px;
       padding: 3.6px 13.4px;
       font-size: 12.5px;
       font-weight: 600;
       color: rgba(255, 255, 255, .36);
       white-space: nowrap;
       cursor: pointer;
       flex-shrink: 0;
       transition: all .25s;
   }

   .cat-pill.active {
       background: rgba(255, 255, 255, .05);
       border: 0.89px solid rgba(255, 255, 255, .71);
       font-size: 16.1px;
       font-weight: 700;
       color: #fff;
       padding: 7.1px 23px;
   }

   .cat-pill.blur {
       filter: blur(1px);
   }

   /* ══ CONTENT CARD ══ */
   .content-card {
       background: #fff;
       border-radius: 12px 12px 0 0;
       position: relative;
       z-index: 5;
       margin-top: -12px;
       overflow: hidden;
   }

   .drag-row {
       display: flex;
       justify-content: center;
       padding: 9px 20px 22px;
   }

   .drag-handle {
       width: 52px;
       height: 4px;
       background: #e4e4e4;
       border-radius: 999px;
   }

   .dish-grid {
       display: flex;
       flex-direction: column;
       gap: 14px;
       padding: 0 20px;
   }

   .dish-row {
       display: flex;
       gap: 14px;
   }

   .dish-card {
       flex: 1;
       min-width: 0;
       display: flex;
       flex-direction: column;
       overflow: hidden;
       cursor: pointer;
       text-decoration: none;
       color: inherit;
       -webkit-tap-highlight-color: transparent;
       transition: transform .15s ease;
   }

   .dish-card:active {
       transform: scale(.97);
   }

   .dish-img {
       width: 100%;
       height: 178px;
       border-radius: 8px;
       overflow: hidden;
       position: relative;
       background: #f0f0f0;
       flex-shrink: 0;
   }

   .dish-img img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       display: block;
   }

   .dish-meta {
       padding: 12px 4px;
   }

   .dish-name {
       font-size: 16px;
       font-weight: 700;
       color: #111;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
   }

   .dish-tags {
       display: flex;
       align-items: center;
       gap: 8px;
       margin-top: 4px;
   }

   .veg-badge {
       display: flex;
       align-items: center;
       gap: 4px;
   }

   .veg-badge svg {
       width: 16px;
       height: 16px;
   }

   .veg-badge span {
       font-size: 12px;
       font-weight: 700;
       color: #2e7d32;
   }

   .non-badge span {
       color: #d32f2f;
   }

   .divider-dot {
       width: 1px;
       height: 11px;
       background: #ccc;
   }

   .dish-time {
       font-size: 12px;
       font-weight: 700;
       color: #5e5e5e;
   }

   .dish-price {
       font-size: 15px;
       font-weight: 800;
       color: #111;
       margin-top: 4px;
   }

   .footer {
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: 14px;
       padding: 34px 20px;
   }

   .footer-powered {
       font-size: 13px;
       color: rgba(0, 0, 0, .56);
   }

   .tapqr-logo-wrap {
       display: flex;
       align-items: center;
       gap: 13px;
   }

   .tapqr-line {
       width: 24px;
       height: 1px;
       background: rgba(0, 0, 0, .21);
   }

   .tapqr-word {
       font-family: Georgia, serif;
       font-size: 33px;
       color: #000;
       letter-spacing: -1px;
   }

   .tapqr-word strong {
       font-weight: 900;
   }

   .footer-url {
       font-size: 13px;
       color: rgba(0, 0, 0, .56);
   }

   /* ══ TRANSITION OVERLAY ══ */
   .transition-overlay {
       position: fixed;
       inset: 0;
       background: #000;
       z-index: 200;
       opacity: 0;
       pointer-events: none;
       transition: opacity .35s;
   }

   .transition-overlay.active {
       opacity: 1;
       pointer-events: all;
   }

   /* ═══════════════════════════════════════════════════════════════
   PRODUCT PREVIEW / FULL DETAIL OVERLAY
   ═══════════════════════════════════════════════════════════════ */

   /* Backdrop */
   .ov-backdrop {
       position: fixed;
       inset: 0;
       z-index: 60;
       background: rgba(0, 0, 0, 0);
       backdrop-filter: blur(0px);
       -webkit-backdrop-filter: blur(0px);
       opacity: 0;
       pointer-events: none;
       transition: background .32s ease, backdrop-filter .32s ease,
           -webkit-backdrop-filter .32s ease, opacity .32s ease;
   }

   .ov-backdrop.show {
       background: rgba(0, 0, 0, 0.61);
       backdrop-filter: blur(8px);
       -webkit-backdrop-filter: blur(8px);
       opacity: 1;
       pointer-events: auto;
   }

   /* Floating/expanding card */
   .ov-card {
       position: fixed;
       z-index: 61;
       background: #fff;
       overflow: hidden;
       display: flex;
       flex-direction: column;
       box-shadow: 0 32px 80px rgba(0, 0, 0, .38);
       visibility: hidden;
       will-change: left, top, width, height, border-radius;
   }

   .ov-card.visible {
       visibility: visible;
   }

   .ov-card.animate {
       transition:
           left .32s cubic-bezier(.22, .61, .36, 1),
           top .32s cubic-bezier(.22, .61, .36, 1),
           width .32s cubic-bezier(.22, .61, .36, 1),
           height .32s cubic-bezier(.22, .61, .36, 1),
           border-radius .32s cubic-bezier(.22, .61, .36, 1),
           box-shadow .32s ease;
   }

   /* Top bar */
   .ov-topbar {
       display: flex;
       align-items: center;
       justify-content: space-between;
       padding: 16px;
       border-bottom: 1.5px solid #f3f3f3;
       background: #fff;
       flex-shrink: 0;
       position: relative;
       z-index: 3;
   }

   .ov-pill {
       display: flex;
       align-items: center;
       gap: 8px;
       background: #f4f4f4;
       border: none;
       border-radius: 500px;
       padding: 10px 16px;
       cursor: pointer;
       font-family: 'Inter', sans-serif;
       font-weight: 500;
       color: #000;
   }

   .ov-pill.ov-close {
       font-size: 13px;
   }

   .ov-pill.ov-cart {
       font-size: 12px;
   }

   .ov-pill svg {
       flex-shrink: 0;
   }

   /* Category tabs (collapse when expanded) */
   .ov-tabs {
       display: flex;
       align-items: center;
       padding: 0 16px;
       overflow-x: auto;
       scrollbar-width: none;
       border-bottom: 1.5px solid #f3f3f3;
       background: #fff;
       flex-shrink: 0;
       max-height: 56px;
       overflow: hidden;
       transition: max-height .42s cubic-bezier(.22, .61, .36, 1),
           opacity .32s ease,
           border-color .38s ease,
           padding .38s ease;
   }

   .ov-tabs::-webkit-scrollbar {
       display: none;
   }

   .ov-tab {
       padding: 0 14.85px;
       height: 49.2px;
       flex-shrink: 0;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 14.85px;
       font-weight: 600;
       color: #5e5e5e;
       white-space: nowrap;
       position: relative;
       cursor: pointer;
   }

   .ov-tab.active {
       font-weight: 700;
       color: #111;
   }

   .ov-tab.active::after {
       content: '';
       position: absolute;
       bottom: 0;
       left: 14.85px;
       right: 14.85px;
       height: 3px;
       background: #000;
       border-radius: 18.5px 18.5px 0 0;
   }

   .ov-card.is-expanded .ov-tabs {
       max-height: 0;
       opacity: 0;
       border-bottom-color: transparent;
       padding-top: 0;
       padding-bottom: 0;
   }

   /* Image stage — height transitions as card expands */
   .ov-image-stage {
       position: relative;
       flex: 1 0 auto;
       min-height: 120px;
       display: flex;
       align-items: center;
       justify-content: center;
       overflow: hidden;
       margin: -16px -16px 0 -16px;
   }

   .ov-image-wrap {
       position: relative;
       width: 73%;
       max-width: 282px;
       aspect-ratio: 282/177;
   }

   .ov-glow {
       display: none;
   }

   .ov-img-blur {
       display: none;
   }

   .ov-img-sharp {
       position: absolute;
       left: 50%;
       top: 50%;
       width: 97.5%;
       height: 97.5%;
       transform: translate(-50%, -50%);
       border-radius: 5.2px;
       overflow: hidden;
       z-index: 2;
       box-shadow: 0 18px 40px rgba(0, 0, 0, .25);
   }

   .ov-img-sharp img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       display: block;
       transition: opacity .22s ease;
   }

   /* 3D model viewer — fills the full stage */
   .ov-image-stage.has-3d {
       align-items: stretch;
   }

   .ov-image-stage.has-3d .ov-image-wrap {
       width: 100%;
       max-width: 100%;
       aspect-ratio: unset;
       flex: 1;
   }

   .ov-image-stage.has-3d .ov-img-sharp {
       position: relative;
       left: unset;
       top: unset;
       width: 100%;
       height: 100%;
       transform: none;
       border-radius: 0;
       box-shadow: none;
   }

   /* Expanded state — tall immersive 3D view */
   .ov-card.is-expanded .ov-image-stage.has-3d {
       height: clamp(320px, 58vh, 500px) !important;
       flex-shrink: 0;
   }

   /* Drag handle hint */
   .ov-drag-hint {
       display: flex;
       justify-content: center;
       padding: 8px 0 4px;
       flex-shrink: 0;
       transition: opacity .2s, max-height .2s, padding .2s;
       max-height: 28px;
   }

   .ov-drag-hint span {
       width: 36px;
       height: 4px;
       background: #e4e4e4;
       border-radius: 99px;
   }

   .ov-card.is-expanded .ov-drag-hint {
       opacity: 0;
       max-height: 0;
       padding: 0;
       overflow: hidden;
   }

   /* Scrollable body */
   .ov-body {
       flex: 1 1 auto;
       min-height: 0;
       height: auto;
       overflow-y: hidden;
       -webkit-overflow-scrolling: touch;
       padding: 16px 16px 16px 16px;
       display: flex;
       flex-direction: column;
       gap: 18px;
       touch-action: none;
       background-color: #ffffff;
   }

   .ov-card.is-expanded .ov-body {
       flex: 1 1 auto;
       min-height: 0;
       overflow-y: auto;
       touch-action: pan-y;
       padding-bottom: 16px;
   }

   .ov-body::-webkit-scrollbar {
       display: none;
   }

   .ov-cube {
       width: 40px;
       height: 43px;
       flex-shrink: 0;
   }

   .ov-cube img {
       width: 100%;
       height: 100%;
       object-fit: contain;
       display: block;
   }

   .ov-title {
       font-size: 20px;
       font-weight: 700;
       color: #111;
       line-height: 1.25;
   }

   .ov-desc {
       font-family: 'Figtree', sans-serif;
       font-size: 14px;
       font-weight: 400;
       color: #676767;
       line-height: 1.5;
       max-height: 0;
       opacity: 0;
       overflow: hidden;
       transition: max-height .32s cubic-bezier(.22, .61, .36, 1), opacity .28s ease;
   }

   .ov-card.is-fully-expanded .ov-desc {
       max-height: 300px;
       opacity: 1;
   }

   .ov-tags {
       display: flex;
       align-items: center;
       gap: 8.7px;
   }

   .ov-tags .veg-badge {
       display: flex;
       align-items: center;
       gap: 4.4px;
   }

   .ov-tags .veg-badge svg {
       width: 17.5px;
       height: 17.5px;
   }

   .ov-tags .veg-badge span {
       font-size: 13.1px;
       font-weight: 700;
       color: #2e7d32;
   }

   .ov-tags .non-badge span {
       color: #d32f2f;
   }

   .ov-tags .ov-sep {
       width: 1px;
       height: 11.6px;
       background: #ccc;
       flex-shrink: 0;
   }

   .ov-tags .ov-time {
       font-size: 13.1px;
       font-weight: 700;
       color: #5e5e5e;
   }

   .ov-price-row {
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 16px;
       transition: gap .38s ease;
   }

   .ov-card.is-expanded .ov-price-row {
       flex-direction: column;
       align-items: stretch;
       gap: 8px;
   }

   .ov-price {
       font-family: 'Figtree', sans-serif;
       font-weight: 700;
       font-size: 27.8px;
       color: #000;
       white-space: nowrap;
       transition: opacity .3s ease, transform .3s ease;
   }

   .ov-card.is-expanded .ov-price {
       opacity: 0.7;
   }

   .ov-add-btn {
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 8px;
       background: #000;
       border: none;
       border-radius: 11px;
       padding: 13px 24px;
       font-family: 'Figtree', sans-serif;
       font-weight: 600;
       font-size: 16px;
       color: #fff;
       cursor: pointer;
       flex-shrink: 0;
       white-space: nowrap;
       align-self: stretch;
       transition: background .2s ease;
   }

   .ov-add-btn svg {
       width: 15.9px;
       height: 15.9px;
       flex-shrink: 0;
   }

   /* Expanded-only sections */
   .ov-extra {
       display: none;
       flex-direction: column;
       gap: 20px;
       max-height: 0;
       opacity: 0;
       overflow: hidden;
       transition: max-height .38s cubic-bezier(.22, .61, .36, 1), opacity .3s ease;
   }

   .ov-bottom-spacer {
       display: none;
   }

   .ov-card.is-expanded .ov-extra {
       display: flex;
       max-height: 3000px;
       opacity: 1;
       overflow: visible;
   }

   .ov-card.is-expanded .ov-bottom-spacer {
       display: block;
   }

   /* Social proof */
   .ov-social {
       display: flex;
       align-items: center;
       gap: 12px;
   }

   .ov-avatars {
       display: flex;
       align-items: center;
       flex-shrink: 0;
   }

   .ov-avatar {
       width: 44px;
       height: 44px;
       border-radius: 50%;
       border: 2.4px solid #fff;
       overflow: hidden;
       margin-right: -14.5px;
   }

   .ov-avatar:last-child {
       margin-right: 0;
   }

   .ov-avatar img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       display: block;
   }

   .ov-social-text {
       font-family: 'Figtree', sans-serif;
       font-weight: 600;
       font-size: 15px;
       line-height: 1.39;
       color: #000;
       max-width: 180px;
   }

   /* Prep time */
   .ov-prep {
       display: flex;
       align-items: center;
       gap: 10px;
   }

   .ov-prep-icon {
       width: 50px;
       height: 50px;
       border-radius: 60px;
       background: #f4f4f4;
       display: flex;
       align-items: center;
       justify-content: center;
       flex-shrink: 0;
   }

   .ov-prep-icon img {
       width: 24px;
       height: 24px;
       object-fit: contain;
   }

   .ov-prep-label {
       font-family: 'Figtree', sans-serif;
       font-weight: 500;
       font-size: 12.9px;
       color: #666;
       line-height: 2;
   }

   .ov-prep-value {
       font-family: 'Figtree', sans-serif;
       font-weight: 600;
       font-size: 16px;
       color: #1c1c1c;
       line-height: 1.6;
   }

   /* Section headers */
   .ov-section {
       display: flex;
       flex-direction: column;
       gap: 12px;
   }

   .ov-section-title {
       font-size: 18px;
       font-weight: 700;
       color: #000;
       line-height: 1.35;
   }

   .ov-section-header {
       display: flex;
       align-items: center;
       justify-content: space-between;
   }

   .ov-section-arrow {
       display: flex;
       align-items: center;
       justify-content: center;
       background: #f3f3f3;
       border: none;
       border-radius: 32px;
       padding: 10px 14px;
       backdrop-filter: blur(9.3px);
       cursor: pointer;
   }

   .ov-section-arrow svg {
       width: 20px;
       height: 20px;
   }

   /* Quantities */
   .ov-quantities {
       background: #fff;
       border: 1.5px solid #dfdfdf;
       border-radius: 10px;
       display: flex;
       align-items: center;
       justify-content: space-between;
       padding: 22px 18px;
   }

   .ov-qty-opt {
       font-family: 'Figtree', sans-serif;
       font-weight: 500;
       font-size: 12.9px;
       color: #666;
       white-space: nowrap;
       cursor: pointer;
       transition: color .2s, font-weight .2s;
       padding: 4px 8px;
       border-radius: 6px;
   }

   .ov-qty-opt.active {
       color: #000;
       font-weight: 700;
   }

   .ov-qty-sep {
       width: 1px;
       height: 7px;
       background: #dfdfdf;
       flex-shrink: 0;
   }

   /* Allergens */
   .ov-allergens {
       background: #fff;
       border: 1.5px solid #dfdfdf;
       border-radius: 10px;
       display: flex;
       align-items: center;
       justify-content: center;
       padding: 16px 12px;
   }

   .ov-allergens img {
       width: 100%;
       max-width: 240px;
       height: auto;
       object-fit: contain;
   }

   /* More dishes grid */
   .ov-more-grid {
       display: flex;
       flex-direction: column;
       gap: 14px;
   }

   .ov-more-row {
       display: flex;
       gap: 14px;
   }

   .ov-more-card {
       flex: 1;
       min-width: 0;
       display: flex;
       flex-direction: column;
       cursor: pointer;
       -webkit-tap-highlight-color: transparent;
       transition: transform .15s ease;
   }

   .ov-more-card:active {
       transform: scale(.97);
   }

   .ov-more-img {
       width: 100%;
       height: 190px;
       border-radius: 16px;
       overflow: hidden;
       background: #f0f0f0;
   }

   .ov-more-img img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       display: block;
   }

   .ov-more-meta {
       padding: 12px 4px;
       display: flex;
       flex-direction: column;
       gap: 4px;
   }

   .ov-more-name {
       font-size: 16px;
       font-weight: 700;
       color: #111;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
   }

   .ov-more-tags {
       display: flex;
       align-items: center;
       gap: 8px;
   }

   .ov-more-tags .veg-badge svg {
       width: 16px;
       height: 16px;
   }

   .ov-more-tags .veg-badge span {
       font-size: 12px;
       font-weight: 700;
       color: #2e7d32;
   }

   .ov-more-tags .non-badge span {
       color: #d32f2f;
   }

   .ov-more-tags .divider-dot {
       width: 1px;
       height: 11px;
       background: #ccc;
   }

   .ov-more-tags .ov-time {
       font-size: 12px;
       font-weight: 700;
       color: #5e5e5e;
   }

   .ov-more-price {
       font-size: 15.2px;
       font-weight: 800;
       color: #111;
   }

   /* ══ THUMBNAIL CAROUSEL ══ */
   .ov-carousel {
       position: fixed;
       left: 0;
       right: 0;
       bottom: 28px;
       z-index: 62;
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 14px;
       transition: opacity .28s ease, transform .28s ease;
       opacity: 0;
       transform: translateY(20px);
       pointer-events: none;
   }

   .ov-carousel.show {
       opacity: 1;
       transform: translateY(0);
       pointer-events: auto;
   }

   /* Swipe track */
   .ov-carousel-track {
       display: flex;
       align-items: center;
       gap: 14px;
       touch-action: none;
       user-select: none;
   }

   .ov-thumb {
       border-radius: 50%;
       overflow: hidden;
       border: 3px solid transparent;
       flex-shrink: 0;
       cursor: pointer;
       box-shadow: 0 6px 18px rgba(0, 0, 0, .32);
       transition: width .26s cubic-bezier(.22, .61, .36, 1),
           height .26s cubic-bezier(.22, .61, .36, 1),
           border-color .26s ease,
           opacity .26s ease,
           transform .26s cubic-bezier(.22, .61, .36, 1);
       will-change: transform;
   }

   .ov-thumb img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       display: block;
   }

   .ov-thumb.size-sm {
       width: 42px;
       height: 42px;
       opacity: .6;
   }

   .ov-thumb.size-md {
       width: 54px;
       height: 54px;
       opacity: .82;
   }

   .ov-thumb.size-lg {
       width: 72px;
       height: 72px;
       border-color: #fff;
       opacity: 1;
   }

   /* Pull-to-collapse indicator */
   .ov-pull-hint {
       position: absolute;
       top: 52px;
       left: 50%;
       transform: translateX(-50%);
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: 6px;
       opacity: 0;
       transition: opacity .2s ease;
       pointer-events: none;
       z-index: 4;
   }

   .ov-pull-hint span {
       font-family: 'Figtree', sans-serif;
       font-size: 12px;
       font-weight: 500;
       color: #888;
       white-space: nowrap;
   }

   .ov-pull-chevron {
       width: 16px;
       height: 16px;
       opacity: .5;
   }

   /* Divider for expanded page */
   .ov-divider {
       height: 1px;
       background: #f0f0f0;
       margin: 0 -16px;
   }

   /* ══ DISH SWITCH SLIDE ANIMATIONS ══ */
   @keyframes slideInFromRight {
       from {
           transform: translateX(36px);
           opacity: 0;
       }

       to {
           transform: translateX(0);
           opacity: 1;
       }
   }

   @keyframes slideInFromLeft {
       from {
           transform: translateX(-36px);
           opacity: 0;
       }

       to {
           transform: translateX(0);
           opacity: 1;
       }
   }

   .slide-in-right {
       animation: slideInFromRight 0.26s cubic-bezier(.22, .61, .36, 1) both;
   }

   .slide-in-left {
       animation: slideInFromLeft 0.26s cubic-bezier(.22, .61, .36, 1) both;
   }