/* Visual Menu — Fixed Digital Menu Artboard. Isolated presentation layer, scoped entirely under section.visual-menu-page so it cannot leak onto the existing product archive (section.list-product-featured) or any other template. Architecture: this is NOT a responsive web layout. Two independent fixed "artboards" (Artboard 1: ĐỒ UỐNG, Artboard 2: ĐỒ ĂN/BÁNH/TOPPING/SẢN PHẨM KHÁC) are each a fixed DESIGN-SPACE canvas at a 1920×1080 reference size — 5 fixed columns, positions computed ONCE server-side (see vm_pack_categories() in page-visual-menu.php), never reflowed by the browser. Scaling (reverted to JS — see js/visual-menu-flow.js): an earlier version of this milestone used CSS container query units (--vm-unit:calc(100cqw / 1920)) so nothing needed JS at all. That was abandoned after real-world testing on a desktop browser showed the artboard simply not responding to native browser zoom (Ctrl +/-) while every other element on the page did — container query sizing is a newer CSS feature (2022-2023) and this specific interaction with page zoom is not reliable across browsers today. Scaling is now back to a single JS-computed transform:scale() on .menu-artboard-inner (fixed 1920px design width, plain px throughout — no calc()/cqw anywhere below), with one important difference from the FIRST JS attempt: the resize handler now skips recalculating during a zoom-triggered resize (detected via window.devicePixelRatio changing) so the frozen scale value lets the browser's native zoom magnification apply uncontested, the same way it would to an ordinary image — only a genuine window resize recomputes it. See js/visual-menu-flow.js's header comment for the full mechanism. The row still carries .custom-post-product-item and keeps .price-wrapper nested inside .info (see template-parts/content-visual-product.php) purely so the existing body-delegated add-to-cart / Quick View handlers in cart.js fire unmodified — selectors below intentionally out-specify that inherited card styling without touching style.css. Row/header heights below are the SAME design-space constants ($vm_row_h, $vm_header_h, ...) the PHP packing algorithm uses to decide how many products fit in a column — CSS and PHP share the same numbers on purpose, so the pre-computed layout never overflows or leaves unexplained gaps relative to what was actually measured server-side. */ section.visual-menu-page{background:#f4f1ea;padding:32px 0;} /* Suppress the sitewide "added to cart" success toast on this page only. That toast (footer.php's .popup-notify-add-to-cart, toggled by cart.js's addToCart() via .addClass('show')) is global site chrome — cart.js itself is off-limits to edit, so this is a pure CSS class-based suppression scoped to this template's own body class. The add-to-cart action, cart state, and every other page's toast are completely unaffected — only the confirmation popup's visibility here. */ body.page-template-page-visual-menu .popup-notify-add-to-cart{display:none !important;} /* Page label + artboard wrapper. Two independent artboards stacked vertically (no page-flip animation, no admin, per this milestone's explicit scope) — a plain label above each ("TRANG 1 – ĐỒ UỐNG") makes the boundary unambiguous without needing a border/divider treatment. */ section.visual-menu-page .menu-page{margin:0 auto 40px;max-width:1920px;padding:0 24px;} section.visual-menu-page .menu-page-label{font-size:14px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#0d3b2e;margin:0 0 12px;text-align:center;} /* The Artboard frame — sized to fit the available width (js/visual-menu-flow.js reads its rendered clientWidth); overflow:hidden is the physical frame edge while the script hasn't run yet (or if it fails) — once it runs, the frame's own height is set to exactly match the scaled content, so nothing is actually clipped in normal operation. text-size-adjust:100% disables mobile browsers' automatic "boost small text on narrow viewports" behavior, which otherwise silently inflates font-size independently of this file's own sizing (see the Mobile Layout Engine investigation — this was one of two real bugs found there, alongside a style.css leak fixed further down). */ section.visual-menu-page .menu-artboard{ width:100%; max-width:1920px; margin:0 auto; overflow:hidden; position:relative; background:#fff; box-shadow:0 2px 10px rgba(23,20,10,.12); border-radius:4px; -webkit-text-size-adjust:100%; -moz-text-size-adjust:100%; text-size-adjust:100%; } /* height MUST stay auto (not fixed) here — js/visual-menu-flow.js measures this element's natural, content-driven height (at its real 1920px design width, before any transform) to compute the shrink factor and to size .menu-artboard's own box; pinning it would make every measurement just read back that same fixed number regardless of actual content. */ section.visual-menu-page .menu-artboard-inner{ width:1920px; transform-origin:top left; background:#fff; position:relative; } /* Hero Banner — Artboard 1 only, fixed design-space size (part of the $vm_banner_h=200px budget the PHP packing algorithm reserves before handing the rest of the 1080px canvas to the 5-column grid). Not sticky, does not repeat on Artboard 2. */ section.visual-menu-page .visual-menu-hero{box-sizing:border-box;height:70px;padding:0 24px;margin:16px 24px 0;background:#0d3b2e;border-radius:8px;display:flex;align-items:center;} section.visual-menu-page .visual-menu-hero .hero-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;} section.visual-menu-page .visual-menu-hero .hero-brand{display:flex;align-items:baseline;gap:14px;min-width:0;} section.visual-menu-page .visual-menu-hero .hero-logo{font-size:22px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#fff;white-space:nowrap;} section.visual-menu-page .visual-menu-hero .hero-tagline{font-size:14px;color:rgba(255,255,255,.72);font-weight:400;white-space:nowrap;} section.visual-menu-page .visual-menu-hero .hero-featured{display:flex;gap:10px;flex:0 0 auto;} section.visual-menu-page .visual-menu-hero .hero-featured-thumb{display:block;width:40px;height:40px;border-radius:50%;overflow:hidden;border:2px solid rgba(255,255,255,.35);flex:0 0 auto;} section.visual-menu-page .visual-menu-hero .hero-featured-thumb img{width:100%;height:100%;object-fit:cover;display:block;} /* Recommended / Selected Products strip — right under the banner, allowed to scroll horizontally, budgeted to ~6-10 products without taking much canvas height. js/visual-menu.js swaps this block's contents between "Đề xuất hôm nay" and "Sản phẩm đã chọn" (Selected Products Banner) — same wrapper classes, so one ruleset styles both states. */ section.visual-menu-page .visual-menu-recommended{box-sizing:border-box;height:104px;margin:10px 24px 0;} section.visual-menu-page .visual-menu-recommended .reco-title{font-size:14px;font-weight:700;color:#0d3b2e;text-transform:uppercase;letter-spacing:.08em;margin:0 0 8px;} section.visual-menu-page .visual-menu-recommended .reco-title .reco-total{margin-left:10px;font-size:12px;font-weight:700;letter-spacing:normal;text-transform:none;color:#0d3b2e;} section.visual-menu-page .visual-menu-recommended .reco-title .reco-checkout-link{margin-left:10px;font-size:12px;font-weight:700;letter-spacing:normal;text-transform:none;color:#af272e;text-decoration:underline;} section.visual-menu-page .visual-menu-recommended .reco-title .reco-checkout-link:hover{color:#8e1f25;} section.visual-menu-page .visual-menu-recommended .reco-list{display:flex;overflow-x:auto;gap:0 20px;height:64px;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;} section.visual-menu-page .visual-menu-recommended .reco-list li.visual-product-card{flex:0 0 200px;height:64px;border-bottom:none;scroll-snap-align:start;} section.visual-menu-page .visual-menu-recommended .reco-list .image{width:44px;height:44px;} section.visual-menu-page .visual-menu-recommended .reco-list .info-main h3{font-size:14px;} section.visual-menu-page .visual-menu-recommended .reco-list .price-wrapper p.price, section.visual-menu-page .visual-menu-recommended .reco-list .price-wrapper p.price-k{font-size:14px;} section.visual-menu-page .visual-menu-recommended .reco-list .add-to-cart a{width:28px;height:28px;font-size:12px;} /* Selected Products state — .selected-product-item is deliberately NOT .visual-product-card / .custom-post-product-item, so it can never be matched by any of cart.js's body-delegated add-to-cart/Quick View selectors (it's a read-only preview + remove action, not an add target). */ section.visual-menu-page .visual-menu-recommended .reco-list li.selected-product-item{position:relative;flex:0 0 200px;height:64px;display:flex;align-items:center;gap:10px;border-bottom:none;padding:0 24px 0 0;scroll-snap-align:start;} section.visual-menu-page .visual-menu-recommended .reco-list li.selected-product-item .image{flex:0 0 auto;width:44px;height:44px;border-radius:8px;overflow:hidden;background:#f4ede8;} section.visual-menu-page .visual-menu-recommended .reco-list li.selected-product-item .image img{width:100%;height:100%;object-fit:cover;display:block;} section.visual-menu-page .visual-menu-recommended .reco-list li.selected-product-item .info-main{flex:1;min-width:0;} section.visual-menu-page .visual-menu-recommended .reco-list li.selected-product-item .info-main h3{margin:0;font-size:14px;font-weight:600;color:#1c1c1c;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} section.visual-menu-page .visual-menu-recommended .reco-list li.selected-product-item .price-wrapper{display:flex;align-items:baseline;gap:6px;flex:0 0 auto;} section.visual-menu-page .visual-menu-recommended .reco-list li.selected-product-item .price-wrapper .price-k{font-size:14px;font-weight:600;color:#0d3b2e;white-space:nowrap;} section.visual-menu-page .visual-menu-recommended .reco-list li.selected-product-item .price-wrapper .qty{font-size:12px;color:#8a9088;white-space:nowrap;} section.visual-menu-page .visual-menu-recommended .reco-list li.selected-product-item .selected-remove{position:absolute;top:0;right:0;width:20px;height:20px;border-radius:50%;background:rgba(13,59,46,.08);color:#7a8189;display:flex;align-items:center;justify-content:center;font-size:10px;transition:background .15s ease,color .15s ease;} section.visual-menu-page .visual-menu-recommended .reco-list li.selected-product-item .selected-remove:hover{background:#af272e;color:#fff;} /* The 5-column grid. Fixed pixel tracks (NOT fr, NOT auto-fit/auto-fill) — this is the "never becomes 4, never wraps" requirement: column width is a hard number in a hard-sized (1920px) canvas, structurally incapable of responding to viewport width on its own — only the JS-driven transform:scale() on .menu-artboard-inner changes visual size, uniformly, never repacking anything. Column position in source order is fixed by vm_pack_categories() in PHP — this file only styles whatever that already-decided structure produces. */ section.visual-menu-page .menu-artboard-grid{ display:grid; grid-template-columns:repeat(5, 358px); column-gap:20px; align-content:start; padding:16px 24px 24px; box-sizing:border-box; width:1920px; } section.visual-menu-page .menu-artboard-column{display:flex;flex-direction:column;gap:12px;width:358px;} /* Category Panel — fixed width (matches the column track exactly), NOT a heavy UI card: light border, small radius, very subtle shadow, meant to read as a printed menu section. The tinted header banner (full-bleed, fixed height) is the "new category" signal — a distinct zone, not just bolder text among rows. */ section.visual-menu-page .item-cat-content{box-sizing:border-box;width:100%;background:#fff;border:1px solid rgba(13,59,46,.08);border-radius:6px;box-shadow:0 1px 2px rgba(23,20,10,.05);overflow:hidden;} section.visual-menu-page .item-cat-content .cat-section-header{box-sizing:border-box;height:48px;padding:0 14px;display:flex;align-items:center;background:rgba(13,59,46,.06);border-bottom:1px solid rgba(13,59,46,.10);} section.visual-menu-page .item-cat-content .cat-section-header h2{display:flex;align-items:center;gap:7px;font-size:15px;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase;color:#0d3b2e;font-weight:800;margin:0;letter-spacing:.03em;max-width:100%;} section.visual-menu-page .item-cat-content .cat-section-header h2 i.cat-icon{font-size:12px;color:#af272e;flex:0 0 auto;display:flex;align-items:center;} section.visual-menu-page .item-cat-content .cat-section-body{list-style:none;margin:0;padding:0 14px;} /* Category Hero (Milestone 3, optional). Renders only when page-visual-menu.php finds term meta set — always absent today, so this rule is inert until that data exists. */ section.visual-menu-page .item-cat-content .cat-hero{width:100%;height:70px;background-size:cover;background-position:center;background-color:#f4ede8;margin-bottom:8px;} /* Product row — Design Goal #12/#14: fixed height (matches the PHP packing constant $vm_row_h exactly), name prominent, price quieter and abbreviated ("45k", not "45.000đ" — see content-visual-product.php's existing .price-k). */ section.visual-menu-page .visual-product-card.custom-post-product-item{box-sizing:border-box;height:52px;position:relative;display:flex;align-items:center;gap:8px;margin:0;padding:0;border-bottom:1px solid #eee;background:none;box-shadow:none;border-radius:0;transition:background .15s ease;} section.visual-menu-page .item-cat-content .cat-section-body li.visual-product-card:last-child{border-bottom:none;} section.visual-menu-page .visual-product-card.custom-post-product-item:hover{background:#faf6f2;} /* Badge Area. Empty by default (no class = no width, no space taken); when present, positioned over the image's top-left. One badge per row — priority handled in PHP (content-visual-product.php), never CSS. */ section.visual-menu-page .visual-product-card .product-badge{display:none;} section.visual-menu-page .visual-product-card .product-badge.badge-new, section.visual-menu-page .visual-product-card .product-badge.badge-best-seller, section.visual-menu-page .visual-product-card .product-badge.badge-limited{ display:inline-block;position:absolute;top:0;left:0;z-index:3; font-size:8px;font-weight:700;letter-spacing:.03em;line-height:1.5; padding:1px 6px;border-radius:999px;color:#fff;white-space:nowrap; } section.visual-menu-page .visual-product-card .product-badge.badge-new{background:#2e7d46;} section.visual-menu-page .visual-product-card .product-badge.badge-best-seller{background:#af272e;} section.visual-menu-page .visual-product-card .product-badge.badge-limited{background:#1a2954;} section.visual-menu-page .visual-product-card .image{position:relative;flex:0 0 auto;width:36px;height:36px;border-radius:6px;overflow:hidden;background:#f4ede8;} section.visual-menu-page .visual-product-card .image img{width:100%;height:100%;object-fit:cover;display:block;} section.visual-menu-page .visual-product-card .image .discount-percent{position:absolute;top:-4px;left:-4px;z-index:2;background:#af272e;color:#fff;font-weight:600;font-size:9px;padding:1px 4px;border-radius:999px;} /* Product Information + Product Action — two independent children of .info (kept as one wrapper only because cart.js requires .price-wrapper to be a descendant of .info; see comment in content-visual-product.php). Text Centering refinement: .info-main/.price-wrapper stretch to the row's FULL height (height:100%) and center their own content within it, rather than centering as a shrink-wrapped block — guarantees name/price sit on the same visual centerline as the image regardless of row height. */ /* Style Isolation fix #1 (Mobile Layout Engine investigation): confirmed via headless-browser measurement (Playwright) that li.custom-post-product-item .info h3 in the SITEWIDE style.css — which still matches these rows, since they intentionally keep the .custom-post-product-item class for cart.js's delegated handlers — sets a hard, unscaled "min-height:22px". At small artboard sizes that floor became LARGER than the entire row's own height, visually spilling the name up into the category header above it and down into the next row. style.css's ".info{padding:10px 10px 15px}" is the same kind of leak. Both explicitly neutralized below — presentation-layer isolation only, no cart.js selector/behavior change. */ section.visual-menu-page .visual-product-card .info{flex:1;min-width:0;height:100%;padding:0;display:flex;align-items:center;justify-content:space-between;gap:10px;} section.visual-menu-page .visual-product-card .info-main{flex:1;min-width:0;height:100%;display:flex;align-items:center;} /* Style Isolation fix #2 (Z Fold 4 report — names appearing shifted up by one whole row, cascading down the panel): style.css's same rule also sets "display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient: vertical;white-space:initial;" (a legacy multi-line-clamp technique requiring white-space:normal to work) — this rule's own white-space:nowrap directly conflicts with that leaked -webkit-box mode, an undefined/inconsistent combination different Chrome builds are free to resolve differently. display:block fully disables the leaked -webkit-box mode (line-clamp only applies when display is -webkit-box/-webkit-inline-box), removing the conflict entirely. */ section.visual-menu-page .visual-product-card .info-main h3{display:block;font-size:14px;line-height:1.2;min-height:0;font-weight:600;color:#1c1c1c;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} section.visual-menu-page .visual-product-card .info-main h3 a{color:inherit;} section.visual-menu-page .visual-product-card .info-main h3 a:hover{color:#0d3b2e;} section.visual-menu-page .visual-product-card .info-main p.en-subtitle{display:none;} /* dropped at this density — name only, per Design Goal #12 */ section.visual-menu-page .visual-product-card .price-wrapper{position:static;flex:0 0 auto;height:100%;display:flex;align-items:center;gap:10px;min-height:0;padding-right:0;} section.visual-menu-page .visual-product-card .price-wrapper p.price{margin:0;font-size:13px;line-height:1;font-weight:600;color:#0d3b2e;white-space:nowrap;font-variant-numeric:tabular-nums;text-align:right;} section.visual-menu-page .visual-product-card .price-wrapper span.off{margin-left:6px;font-size:11px;font-weight:400;color:#999;text-decoration:line-through;} /* Price Display Format ("60.000đ" → "60k"): hide the original đ-formatted .price (still fully present in the DOM — cart.js reads it via .html() at add-to-cart time regardless of its CSS display, so mini-cart/Sticky Cart/Cart page/checkout totals are entirely unaffected by this rule) and show the new .price-k element instead. .price-empty is the "Đang cập nhật" fallback — exempted so it keeps showing exactly as before. */ section.visual-menu-page .visual-product-card .price-wrapper p.price:not(.price-empty){display:none;} section.visual-menu-page .visual-product-card .price-wrapper p.price-k{margin:0;font-size:13px;line-height:1;font-weight:600;color:#0d3b2e;white-space:nowrap;font-variant-numeric:tabular-nums;text-align:right;} section.visual-menu-page .visual-product-card .price-wrapper p.price-k span.off{margin-left:6px;font-size:11px;font-weight:400;color:#999;text-decoration:line-through;} /* Red stays reserved for an actual promotion/discount state — the existing .is-flash-sale modifier (set server-side, unchanged) is the real "this is a special price" signal. */ section.visual-menu-page .visual-product-card.is-flash-sale .price-wrapper p.price, section.visual-menu-page .visual-product-card.is-flash-sale .price-wrapper p.price-k{color:#af272e;} /* Add button (Design Goal #13 — "less prominent"): visible circle ~26 design units (vs a 34-unit tap target), thin border, a lighter/desaturated rest-state border color instead of solid brand red so it reads as quiet until touched. Selector, DOM position and cart.js wiring are completely unchanged — only the visual treatment of the existing is different. Style Isolation fix: style.css's li.custom-post-product-item ... .add-to-cart a still applies its OWN background (a pink icon-plus-cart.png image), padding, and box-shadow to this same (shared class for cart.js) — none of that was explicitly cancelled before, so it could paint behind/ around the ::before circle below as an unintended pink halo. Explicitly neutralized here since the visible circle is entirely drawn by ::before. */ section.visual-menu-page .visual-product-card.custom-post-product-item .info .price-wrapper .add-to-cart a{position:relative;transform:none;width:34px;height:34px;display:flex;align-items:center;justify-content:center;padding:0;background:none;box-shadow:none;} section.visual-menu-page .visual-product-card.custom-post-product-item .info .price-wrapper .add-to-cart a:hover{filter:none;} section.visual-menu-page .visual-product-card.custom-post-product-item .info .price-wrapper .add-to-cart a::before{ content:''; width:26px;height:26px; border-radius:50%; border:1px solid rgba(175,39,46,.45); background:#fff; position:absolute; top:50%;left:50%; transform:translate(-50%,-50%); transition:background .18s ease,border-color .18s ease; } section.visual-menu-page .visual-product-card.custom-post-product-item .info .price-wrapper .add-to-cart a i{position:relative;font-size:9px;color:#af272e;transition:color .18s ease;pointer-events:none;} section.visual-menu-page .visual-product-card.custom-post-product-item .info .price-wrapper .add-to-cart a:hover::before{background:#af272e;border-color:#af272e;} section.visual-menu-page .visual-product-card.custom-post-product-item .info .price-wrapper .add-to-cart a:hover i{color:#fff;} section.visual-menu-page .visual-product-card.custom-post-product-item .info .price-wrapper .add-to-cart a:active::before{background:#8e1f25;border-color:#8e1f25;} /* Sticky/Floating Cart (Phase 2) — mobile/tablet only, unrelated to the Artboard itself (fixed-position UI chrome layered on top of the page, not part of the fixed design canvas). js/visual-menu.js toggles .is-visible based on the existing localStorage miniCart state; this file only defines what "visible" looks like. */ .visual-menu-sticky-cart{display:none;} /* Mobile Review fix: bottom clearance for the Sticky Cart bar (position:fixed, bottom:0) so it doesn't sit directly over the bottom of the last artboard on mobile/tablet once it becomes visible. */ @media (max-width:1024px){ section.visual-menu-page{padding-bottom:96px;} .visual-menu-sticky-cart{position:fixed;left:0;right:0;bottom:0;z-index:999;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;background:#1a2954;color:#fff;box-shadow:0 -4px 16px rgba(0,0,0,.18);} .visual-menu-sticky-cart.is-visible{display:flex;} .visual-menu-sticky-cart .sticky-cart-info{display:flex;align-items:center;gap:8px;font-size:14px;white-space:nowrap;} .visual-menu-sticky-cart .sticky-cart-count{background:#af272e;color:#fff;font-weight:700;border-radius:999px;min-width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;padding:0 6px;} .visual-menu-sticky-cart .sticky-cart-total{font-size:14px;font-weight:600;flex:1;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .visual-menu-sticky-cart .sticky-cart-total span{color:#ffd166;} .visual-menu-sticky-cart .sticky-cart-view{background:#af272e;color:#fff;font-size:13px;font-weight:600;padding:9px 16px;border-radius:999px;white-space:nowrap;} .visual-menu-sticky-cart .sticky-cart-view:hover{background:#8e1f25;} } @media (max-width:480px){ .visual-menu-sticky-cart{padding:10px 12px;gap:8px;} .visual-menu-sticky-cart .sticky-cart-info{font-size:12px;} .visual-menu-sticky-cart .sticky-cart-total{font-size:12px;} .visual-menu-sticky-cart .sticky-cart-view{padding:8px 12px;font-size:12px;} }