/* * LIFF Desktop Layout Enhancements * --------------------------------------------------------------------------- * Applies ONLY when has class "liff-desktop" AND viewport >= 1024px. * Mobile (<1024px) is completely unaffected. * * REVERT TO ORIGINAL MOBILE-ONLY UI: * 1. In templates/liff/base_liff.html set LIFF_DESKTOP_LAYOUT = False * (or remove class "liff-desktop" from and unlink this CSS) * 2. Collectstatic / restart if needed * --------------------------------------------------------------------------- */ @media (min-width: 1024px) { /* ---- Shell: constrain width, center content ---- */ body.liff-desktop { background: #f3efe9; } body.liff-desktop .liff-shell { --liff-shell-max: 1120px; max-width: var(--liff-shell-max); margin: 0 auto; min-height: 100vh; background: #f8f6f3; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 12px 40px rgba(0, 0, 0, 0.04); } /* Keep leftover fixed bottom bars aligned to the centered shell */ body.liff-desktop .liff-shell .fixed.bottom-0.left-0.right-0:not(.liff-cart-summary):not(.liff-bottom-bar) { left: max(0px, calc((100vw - var(--liff-shell-max)) / 2)); right: max(0px, calc((100vw - var(--liff-shell-max)) / 2)); } body.liff-desktop .liff-shell > header.sticky { border-radius: 0; } body.liff-desktop .liff-shell > header .px-4, body.liff-desktop .liff-shell > main.px-4, body.liff-desktop .liff-shell > div.px-4, body.liff-desktop .liff-page-pad { padding-left: 1.5rem; padding-right: 1.5rem; } /* Wider search on home / list headers */ body.liff-desktop .liff-search-wide { max-width: 420px; } /* ---- Brand / subcategory card grids ---- */ body.liff-desktop .liff-card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; } body.liff-desktop .liff-card-grid.gap-3 { gap: 1rem; } body.liff-desktop .liff-card-grid > a { display: flex; flex-direction: column; } body.liff-desktop .liff-card-grid > a .aspect-square { aspect-ratio: 1 / 1; } body.liff-desktop .liff-card-grid .col-span-2 { grid-column: 1 / -1; } /* ---- Product list / search: vertical cards in grid ---- */ body.liff-desktop .liff-product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } body.liff-desktop .liff-product-grid > :not([hidden]) ~ :not([hidden]) { margin-top: 0; } body.liff-desktop .liff-product-grid > a.liff-product-card { flex-direction: column; height: 100%; } body.liff-desktop .liff-product-grid > a.liff-product-card > .liff-product-thumb { width: 100%; height: auto; aspect-ratio: 1 / 1; flex-shrink: 0; } body.liff-desktop .liff-product-grid > a.liff-product-card:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); transform: translateY(-2px); } /* Empty states spanning full grid */ body.liff-desktop .liff-product-grid > .liff-grid-empty, body.liff-desktop .liff-card-grid > .liff-grid-empty { grid-column: 1 / -1; } /* ---- Product detail: two columns ---- */ body.liff-desktop .liff-product-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.75rem; align-items: start; padding: 1.25rem 1.5rem 2rem; padding-bottom: 2rem !important; } body.liff-desktop .liff-pd-gallery { border-radius: 1.25rem; overflow: hidden; position: sticky; top: 5.5rem; max-height: calc(100vh - 7rem); } body.liff-desktop .liff-pd-buy { display: flex; flex-direction: column; min-width: 0; } body.liff-desktop .liff-pd-buy .liff-pd-section { padding-left: 0; padding-right: 0; } body.liff-desktop .liff-product-detail .liff-bottom-bar { position: static; left: auto; right: auto; bottom: auto; border-top: none; background: transparent; padding: 0.75rem 0 0; margin-top: 0.5rem; } body.liff-desktop .liff-product-detail .liff-bottom-bar button { max-width: 100%; } /* Capacity / checkout / reorder sheets: centered dialog on desktop */ body.liff-desktop .liff-sheet { left: 50% !important; right: auto !important; bottom: auto !important; top: 50% !important; transform: translate(-50%, -50%) !important; width: min(420px, calc(100vw - 2rem)); border-radius: 1.5rem !important; max-height: min(90vh, 640px); overflow: auto; animation: none !important; } /* ---- Cart: items + sticky summary sidebar ---- */ body.liff-desktop .liff-cart-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.5rem; align-items: start; padding-bottom: 2rem !important; } body.liff-desktop .liff-cart-primary { min-width: 0; } body.liff-desktop .liff-cart-summary { position: sticky !important; top: 5.5rem; left: auto !important; right: auto !important; bottom: auto !important; border: 1px solid #ece7e0; border-radius: 1.25rem; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06); overflow: hidden; } body.liff-desktop .liff-cart-layout:has(.liff-cart-empty) { display: block; } /* Checkout confirm sheet */ body.liff-desktop #checkout-confirm-modal .liff-sheet { width: min(480px, calc(100vw - 2rem)); } /* ---- Order / profile pages: comfortable reading width ---- */ body.liff-desktop .liff-content-narrow { max-width: 720px; margin-left: auto; margin-right: auto; } /* Toast stays centered on shell */ body.liff-desktop #toast { max-width: 1120px; } } @media (min-width: 1280px) { body.liff-desktop .liff-shell { --liff-shell-max: 1200px; max-width: var(--liff-shell-max); } body.liff-desktop .liff-card-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } body.liff-desktop .liff-product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }