/* ========================================================================== Layout 1 — mobile-app style storefront. Loaded only by templates/layout/default1.php. Theme colours come from the vendor's Splash Colour, emitted as custom properties by default1.php. Nothing here hard-codes a brand colour. Class names deliberately contain no digits (so: .app-shell, not .layout1-*). ========================================================================== */ /* --- Shell -------------------------------------------------------------- */ /* Border-box for everything this layout owns. The default content-box makes `width:100%` plus horizontal padding overflow its parent by the padding — which is exactly what pushed the card's Add button past both card edges. Scoped to .app-shell and its descendants rather than a bare `*` reset so it cannot alter anything outside the layout-1 frame. */ .app-shell, .app-shell *, .app-shell *::before, .app-shell *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--app-backdrop); color: var(--app-ink); -webkit-font-smoothing: antialiased; /* The sidebar parks off-canvas at translateX(-100%), which otherwise widens the scrollable area and leaves a horizontal scrollbar on every page. */ overflow-x: hidden; } /* Soft theme-tinted shapes scattered over the backdrop either side of the app frame, as in the reference design. Pure CSS radial gradients — no image assets — and fixed so they don't scroll with the content. Hidden on a phone, where the frame fills the screen and they would never be visible anyway. */ body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(38% 26% at 12% 18%, var(--app-theme-soft), transparent 70%), radial-gradient(30% 22% at 88% 34%, var(--app-theme-soft), transparent 70%), radial-gradient(26% 20% at 6% 78%, var(--app-theme-soft), transparent 70%), radial-gradient(34% 24% at 94% 86%, var(--app-theme-soft), transparent 70%); } /* The whole storefront sits in one centred column. Deliberately far wider than a phone: on a desktop monitor a narrow strip wastes the screen. Width lives in a custom property because the fixed bottom nav has to match it exactly. */ :root { --app-width: 1100px; --app-nav-height: 58px; /* Section side padding, doubled (16px each side). Full-bleed children inside a section subtract this to stay within the frame, so the two must agree — hence one value rather than a repeated literal. */ --app-gutter: 32px; --app-pad: 16px; --app-ink: #1b1b1b; --app-muted: #6b7280; --app-backdrop: #f3f4f6; } .app-shell { max-width: var(--app-width); margin-inline: auto; background: #fff; min-height: 100vh; /* relative (so it paints above the decorative body::before shapes) but with NO z-index: a z-index here would make this a stacking context, and any Bootstrap modal inside it could then never rise above the .modal-backdrop appended to — 1050 would only compete within this element. */ position: relative; box-shadow: 0 0 0 1px rgba(0, 0, 0, .04); /* A flex column so the footer can be pushed to the bottom on a page whose content is shorter than the viewport. Without this the shell's min-height left white space below the footer on short pages (All Categories, an empty cart), which read as the footer stopping halfway down. No padding-bottom here any more: the footer's own bottom padding clears the fixed nav, and on a page with no footer .app-shell-spacer does. */ display: flex; flex-direction: column; } /* Everything the layout puts in the shell keeps its natural height; only the spacer grows. */ .app-shell > * { flex: 0 0 auto; } /* The one growing child. Collapses to zero on a page taller than the viewport and absorbs the remainder on a short one, which is what keeps the footer at the bottom instead of stopping partway down. Height stays 0 so it never adds a gap above the footer; clearing the fixed nav is handled by the footer's own bottom padding, and by .app-shell's padding below when no footer renders. */ .app-shell-spacer { flex: 1 1 auto; min-height: 0; } /* A vendor with nothing configured for the footer gets no .app-footer at all (footer_content1 returns early), and then nothing clears the fixed nav. This restores that clearance for exactly that case: a shell whose last child is the spacer rather than the footer. :has() is unsupported in older browsers, where this simply does not apply — the cost is the last section sitting under the nav on a footer-less page, which is the pre-existing behaviour rather than a new fault. */ .app-shell:not(:has(> .app-footer)) { padding-bottom: calc(var(--app-nav-height) + 16px); } /* Bottom padding as well as top: with none, a section's content sat directly against the next section's heading — the category row and the top-selling title were touching, which is most of what made the page read as cluttered. */ .app-section { padding: 20px var(--app-pad) 18px; } /* The product grid is inset further than the scrolling rows. A row is meant to run to the frame edge so the next card peeks and invites a swipe; a grid has no off-screen content, so the same flush edge just looks like a missing margin. */ .app-section > .app-grid { padding-inline: 8px; } .app-section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; } .app-section-title { font-size: 18px; font-weight: 700; letter-spacing: -.2px; color: var(--app-ink); margin: 0; } .app-section-link { font-size: 13px; font-weight: 600; color: var(--app-theme); text-decoration: none; white-space: nowrap; } /* Horizontal rows. Scrollbar hidden; snap keeps cards aligned after a swipe. The row is pulled out to the full frame width and given its own matching padding, so a scrolled row runs edge to edge instead of stopping at the section's padding. Without this the last card is sliced off flush against the frame edge with no gap, which reads as broken rather than scrollable. */ .app-row { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-inline: calc(var(--app-pad) * -1); padding-inline: var(--app-pad); padding-bottom: 4px; } .app-row::-webkit-scrollbar { display: none; } .app-row > * { scroll-snap-align: start; flex: 0 0 auto; } /* --- Header ------------------------------------------------------------- */ .app-header { position: sticky; top: 0; z-index: 30; /* No isolation:isolate here. It forces a stacking context, which trapped the location-picker modal rendered inside this header at z-index 30 — far below the .modal-backdrop Bootstrap appends to at 1040, so the backdrop covered the dialog and swallowed every click. position:sticky with a z-index already establishes the context the ::after wave needs. */ color: #fff; /* Flat solid theme colour and a square bottom edge, as in the reference. The gradient washes and the curved ::after wave that used to sit here were removed with it — the reference bar is one clean block of colour. */ background: var(--app-theme); /* The right-hand cluster is now two stacked lines (greeting over icons), so the padding is trimmed from 14px to keep the bar near its previous ~66px rather than letting the extra line push it past 80. */ padding: 8px var(--app-pad); } /* One row at every width: burger, location (or brand), then the icon cluster. The search expands inside the cluster rather than taking a row of its own. */ .app-header-top { display: flex; align-items: center; justify-content: flex-start; gap: 10px; } /* Sits directly after the burger, left-aligned. No white pill: vendor logos on this bar are light-on-dark already, and the pill only added bulk to a bar that needs to stay short. */ .app-header-logo { display: inline-flex; align-items: center; flex: 0 0 auto; padding: 0; text-decoration: none; /* An image-less vendor falls back to text, which must not wrap. */ min-width: 0; } /* Capped so a tall logo cannot stretch the bar. Raised with the bar's padding: the cap, not the logo's own size, is what sets the image height here. */ .app-header-logo img { display: block; max-height: 34px; max-width: 118px; width: auto; } /* White, not the theme colour: the logo now sits straight on the themed bar with no white pill behind it, so themed text would be invisible. */ .app-header-logo-text { font-size: 15px; font-weight: 700; color: #fff; white-space: nowrap; } /* Location picker + greeting stacked beside the logo. */ .app-header-brand { display: flex; flex-direction: column; gap: 2px; min-width: 0; /* Takes the slack between logo and icons, and may shrink before they do. */ flex: 1 1 auto; } /* The pin and chevron flank the location text. The text itself is allowed to shrink and ellipsis, so a long address cannot push the chevron off the row or squeeze the icon cluster. */ .app-header-loc { display: flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; background: none; border: 0; padding: 0; color: #fff; font: inherit; cursor: pointer; text-align: left; } /* Pin, then the two stacked lines, then the caret. The pin is sized up and aligned to the block rather than the first line, as in the reference. */ .app-header-loc-pin { flex: 0 0 auto; font-size: 17px; } .app-header-loc-caret { flex: 0 0 auto; /* Nudged onto the value line: the caret follows the address in the reference, not the caption above it. */ align-self: flex-end; margin-bottom: 2px; font-size: 10px; opacity: .9; } /* "Current Location" above the address. min-width:0 so the value inside can ellipsis — a flex child will not shrink below its content without it. */ .app-header-loc-text { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; line-height: 1.2; } .app-header-loc-label { display: block; font-size: 10.5px; font-weight: 500; opacity: .8; line-height: 1.3; } /* Shrinks to whatever the row leaves rather than a fixed 180px, so a short address is not truncated early on a wide frame and a long one still yields to the chevron instead of overflowing. min-width:0 is what lets a flex item ellipsis at all. */ /* max-width, not a flex basis: this is now a block inside the column, so it caps how much of a long address is shown before the ellipsis rather than competing with the caret for row space. */ .app-header-loc-value { display: block; max-width: 100%; font-size: 14px; font-weight: 700; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Wraps so the greeting can take a line of its own above the icons (it is flex-basis:100%, see .app-greeting). align-items:flex-end keeps the icon row itself right-aligned under it. */ .app-header-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 2px 6px; flex: 0 0 auto; } .app-icon-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; /* Must not be squeezed when the search field expands beside it. */ flex: 0 0 auto; border-radius: 50%; color: #fff; /* Bare icons on the bar, as in the reference — no translucent chip. The hover state below still gives a target for pointer users. */ background: none; text-decoration: none; font-size: 17px; /* Resets for the search toggle, which is a