/* ============================================================================= JAZ Eats — storefront skin on top of Bootstrap 5. Brand colours are injected from the `theme` table as CSS variables in the layout ; the fallbacks below match the seeded values so the design holds even before the DB row loads. ============================================================================= */ :root { --jaz-bg: #f2f2f2; --jaz-topbar: #000000; --jaz-link: #ffffff; --jaz-hover: #f21f07; /* legacy menu_link_hover (red) */ --jaz-bar: #000000; /* section header bars */ --jaz-bar-text: #ffffff; --jaz-btn: #000000; --jaz-btn-text: #ffffff; --jaz-radius: 99px; /* pill buttons */ --jaz-accent: #f89520; /* jaz EATS orange */ } /* ---- base ---------------------------------------------------------------- */ /* offset all in-page anchor jumps (Top button, category links) by the height of the sticky top bar so the target isn't hidden behind it */ html { scroll-padding-top: 56px; scroll-behavior: smooth; } body { font-family: 'Open Sans', system-ui, -apple-system, sans-serif; font-size: 17px; background: var(--jaz-bg); color: #1a1a1a; } .jaz-display { font-family: 'Anton', 'Open Sans', sans-serif; font-weight: 400; letter-spacing: .5px; } a { color: #000; text-decoration: none; } a:hover { color: var(--jaz-hover); } /* ---- top bar ------------------------------------------------------------- */ .jaz-topbar { background: var(--jaz-topbar); color: var(--jaz-link); position: sticky; top: 0; z-index: 1030; } /* inner held to the same 1640px / 24px edge as the product rows, so the hamburger lines up with the product text */ .jaz-topbar-inner { width: 92%; max-width: 1640px; margin: 0 auto; padding: 10px 24px; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .jaz-topbar a { color: var(--jaz-link); } .jaz-topbar a:hover { color: var(--jaz-hover); } .jaz-burger { background: none; border: 0; padding: 0; color: var(--jaz-link); font-size: 2rem; line-height: 1; cursor: pointer; } .jaz-burger:hover { color: var(--jaz-hover); } .jaz-cart-link { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 1.1rem; } .jaz-topbar-right { display: flex; align-items: center; gap: 18px; font-size: 1.4rem; } .jaz-cart-badge { background: var(--jaz-accent); color: #3a2400; border-radius: 50%; font-size: 12px; font-weight: 700; padding: 1px 7px; margin-left: 4px; } /* ---- page container: one centred column so every side aligns ------------- */ /* 92% width keeps a visible side margin until ~1920, where it caps at 1640 (matching the 140px-margin desktop spec). */ .jaz-page { width: 92%; max-width: 1640px; margin: 0 auto; } /* ---- header banner ------------------------------------------------------- */ .jaz-banner img { width: 100%; height: auto; display: block; } /* ---- category icon strip ------------------------------------------------- */ .jaz-catstrip { background: var(--jaz-topbar); overflow-x: auto; white-space: nowrap; border-top: 1px solid #222; border-bottom: 4px solid #fff; -webkit-overflow-scrolling: touch; } .jaz-catstrip ul { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 10px 24px; justify-content: flex-start; } .jaz-cat-item { text-align: center; width: 96px; white-space: normal; } .jaz-cat-item a { color: var(--jaz-link); display: block; } .jaz-cat-item a:hover { color: var(--jaz-accent); } .jaz-cat-icon { display: block; width: 50px; height: 50px; border-radius: 50%; object-fit: cover; margin: 0 auto 8px; } .jaz-cat-icon.placeholder { display: flex; align-items: center; justify-content: center; background: #2a2a2a; color: var(--jaz-accent); font-size: 22px; } /* label always sits UNDER the icon, never beside */ .jaz-cat-label { display: block; font-family: 'Comic Sans MS', 'Comic Neue', cursive; font-size: 16px; line-height: 1.25; } /* Each label line stays on ONE line (max two lines total, ~10 chars each) so the icon strip keeps even heights on every device; overflow is clipped, never wrapped into a third line. Admins set the two short lines per category (max 10 each). */ .jaz-cat-line { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ---- category section + product rows ------------------------------------- */ .jaz-section { scroll-margin-top: 0; } /* full-width black header bar; name + description centred inside it */ .jaz-section-head { background: var(--jaz-bar); color: var(--jaz-bar-text); text-align: center; padding: 14px 12px; } .jaz-section-title { font-family: 'Open Sans', sans-serif; font-weight: 700; font-size: 40px; line-height: 1.1; margin: 0; } .jaz-section-sub { font-size: 16px; font-weight: 400; margin: 6px 0 0; color: #d8d8d8; } /* 12-column grid (rows fill the page container) */ .jaz-row { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 12px; align-items: center; background: #fff; padding: 14px 24px; border-bottom: 1px solid #eee; } .jaz-row:nth-child(even) { background: #fafafa; } /* product data + price = 5 columns (cols 1-5), left-justified */ .jaz-rinfo { grid-column: 1 / span 5; grid-row: 1; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; min-width: 0; } .jaz-rtext { min-width: 0; } .jaz-rtext .name { font-weight: 700; font-size: 22px; } .jaz-rtext .desc { color: #555; font-size: 16px; } .jaz-rprice { white-space: nowrap; font-weight: 700; font-size: 18px; } .jaz-old { color: #595959; text-decoration: line-through; font-weight: 400; font-size: 14px; } .jaz-sale { color: #b30000; } /* fixed accessible red (brand --jaz-hover fails WCAG contrast) */ /* col 6 is left empty as a gap; ORDER NOW = 3 columns (cols 7-9) */ .jaz-ract { grid-column: 7 / span 3; grid-row: 1; align-self: end; } /* product image sits just to the right of ORDER NOW on desktop (cols 10-12), with its BOTTOM edge aligned to the bottom of the ORDER NOW button (both pinned to the same grid row, bottom-aligned), and clear padding between them. */ .jaz-rimg { grid-column: 10 / span 3; grid-row: 1; align-self: end; display: flex; justify-content: flex-start; align-items: flex-end; padding-left: 28px; } .jaz-rimg img { max-height: 64px; max-width: 100%; height: auto; border-radius: 6px; } /* ---- buttons ------------------------------------------------------------- */ .btn-jaz { background: var(--jaz-btn); color: var(--jaz-btn-text); border: 1px solid var(--jaz-btn); border-radius: var(--jaz-radius); font-weight: 600; padding: 9px 26px; white-space: nowrap; } .btn-jaz:hover { background: #222; color: var(--jaz-btn-text); } .btn-jaz-order { display: block; width: 350px; max-width: 100%; margin: 0 auto; text-align: center; } /* ---- mobile: 4 icons/row, image on top, info, then ORDER NOW underneath -- */ /* Content is gutter-aligned to the burger icon: 24px left/right everywhere, matching .jaz-topbar-inner's padding so text/boxes line up with the menu icon. Banner stays full-bleed. */ @media (max-width: 575.98px) { .jaz-page { width: 100%; max-width: none; } .jaz-topbar-inner { width: 100%; } .jaz-catstrip { overflow-x: visible; } .jaz-catstrip ul { flex-wrap: wrap; min-width: 0; gap: 30px 0; padding: 18px 24px; } .jaz-cat-item { width: 25%; } .jaz-section-head { padding: 14px 24px; } .jaz-row { display: block; padding: 16px 24px; } .jaz-rimg { display: block; margin-bottom: 12px; padding-left: 0; } .jaz-rimg img { width: 100%; max-height: none; height: auto; border-radius: 8px; display: block; } .jaz-rinfo { display: flex; justify-content: space-between; gap: 12px; } .jaz-ract { margin-top: 12px; } .jaz-optbar { padding-left: 24px; padding-right: 24px; } .jaz-pd { padding-left: 24px; padding-right: 24px; } .jaz-cart { padding-left: 24px; padding-right: 24px; } } /* ---- footer -------------------------------------------------------------- */ .jaz-footer { background: #fff; border-top: 3px solid #000; text-align: center; padding: 26px 16px; margin-top: 32px; } .jaz-footer img { max-width: 200px; height: auto; } .jaz-footer p { margin: 10px 0 0; font-size: 14px; color: #555; } /* ---- back to top --------------------------------------------------------- */ .jaz-top-btn { position: fixed; bottom: 1.5rem; right: 1rem; background: var(--jaz-btn); color: var(--jaz-btn-text); border-radius: var(--jaz-radius); padding: 8px 14px; font-size: 14px; z-index: 1040; } .jaz-top-btn:hover { color: var(--jaz-accent); } /* ====================================================================== */ /* CART PREVIEW (mini-cart) — dropdown panel under the cart icon */ /* ====================================================================== */ .jaz-cart-wrap { position: relative; } .jaz-minicart { position: absolute; right: 0; top: calc(100% + 14px); width: 380px; max-width: 92vw; background: #f9f9f9; border: 1px solid #ddd; color: #333; z-index: 1050; box-shadow: -1px 8px 19px -8px #000; text-align: left; } .jaz-minicart[hidden] { display: none; } .jaz-minicart-head { background: var(--jaz-bar); color: var(--jaz-bar-text); display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; } .jaz-minicart-head h2 { font-size: 20px; font-weight: 700; margin: 0; } .jaz-minicart-close { background: none; border: 0; color: var(--jaz-bar-text); font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px; } .jaz-minicart-body { padding: 12px 14px; max-height: 70vh; overflow-y: auto; } .jaz-minicart table { width: 100%; border-collapse: collapse; font-size: 14px; } .jaz-minicart thead td { border-bottom: 1px solid #000; padding: 2px 4px; font-weight: 600; } .jaz-minicart tbody td { padding: 8px 4px; vertical-align: top; border-bottom: 1px solid #eee; } .jaz-minicart .mc-opts { list-style: none; margin: 2px 0 0; padding: 0; font-size: 12px; line-height: 1.3; color: #666; } .jaz-minicart .mc-actions a, .jaz-minicart .mc-actions button { color: #555; background: none; border: 0; padding: 0 3px; cursor: pointer; font-size: 14px; } .jaz-minicart .mc-actions a:hover, .jaz-minicart .mc-actions button:hover { color: var(--jaz-hover); } .jaz-minicart .mc-subtotal td { border-top: 1px solid #000; font-weight: 700; padding-top: 8px; } .jaz-minicart-btns { display: flex; gap: 8px; margin-top: 12px; } .jaz-minicart-btns .btn-jaz { flex: 1; text-align: center; padding: 8px 10px; } /* Ghost (Continue Shopping): same shape as btn-jaz but outlined, not filled. */ .btn-jaz-ghost { background: #fff; color: var(--jaz-btn); border: 1px solid var(--jaz-btn); } .btn-jaz-ghost:hover { background: #f1f1f1; color: var(--jaz-btn); } /* Continue Shopping is now an inside the topbar, where `.jaz-topbar a` forces white link text — which is invisible on the ghost's white fill. Restore the dark label with a more specific rule. */ .jaz-minicart-btns .btn-jaz-ghost, .jaz-minicart-btns .btn-jaz-ghost:hover { color: var(--jaz-btn); } /* Smaller secondary links: View Cart / Clear Cart — left-aligned with the Continue Shopping button. The form is display:contents so its button sits in the same flex row as the View Cart anchor (equal height, no extra box). */ .jaz-minicart-links { display: flex; gap: 18px; justify-content: flex-start; align-items: baseline; margin-top: 10px; } .jaz-minicart-links form { display: contents; } .jaz-minicart-links a, .jaz-minicart-links button { background: none; border: 0; color: #777; font: inherit; font-size: 12px; line-height: 1.4; cursor: pointer; padding: 0; margin: 0; text-decoration: underline; vertical-align: baseline; } .jaz-minicart-links a:hover, .jaz-minicart-links button:hover { color: var(--jaz-hover); } .jaz-minicart-empty { padding: 8px 4px; color: #666; } /* ---- After-add confirmation popup (mobile): legacy view-product.php flow ---- */ .jaz-addconfirm { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1060; background: rgba(0, 0, 0, 0.5); /* Box sits near the top of the page (below the sticky bar), not centered. */ display: flex; align-items: flex-start; justify-content: center; padding: 70px 16px 16px; } .jaz-addconfirm[hidden] { display: none; } .jaz-addconfirm-box { background: #fff; width: 100%; max-width: 360px; border-radius: 6px; padding: 22px 20px; text-align: center; } .jaz-addconfirm-name { font-size: 18px; font-weight: 700; margin: 0; } .jaz-addconfirm-check { color: #2ca02c; font-size: 34px; margin: 8px 0 4px; } .jaz-addconfirm-msg { margin: 0 0 18px; color: #333; } .jaz-addconfirm-btns { display: flex; flex-direction: column; gap: 10px; } .jaz-addconfirm-btns .btn-jaz { width: 100%; } /* ====================================================================== */ /* PRODUCT DETAIL (modal + full page) — legacy options.php layout */ /* ====================================================================== */ .jaz-pmodal .modal-content { position: relative; border: 0; border-radius: 8px; } .jaz-pmodal .modal-body { padding: 26px 28px 28px; } /* Round white close button, inset inside the modal's top-right corner. */ .jaz-pmodal-close { position: absolute; top: 12px; right: 12px; z-index: 5; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid #ccc; background: #fff; color: #000; font-size: 22px; line-height: 1; cursor: pointer; box-shadow: 0 1px 4px rgba(0, 0, 0, .2); } .jaz-pmodal-close:hover { color: var(--jaz-hover); } /* Black OPTIONS / Back To Menu bar on the full product page (legacy). */ .jaz-optbar { display: flex; align-items: center; justify-content: space-between; background: var(--jaz-bar); color: var(--jaz-bar-text); padding: 8px 16px; margin-bottom: 14px; } .jaz-optbar h1, .jaz-optbar h2 { font-size: 24px; font-weight: 700; margin: 0; } .jaz-optbar-back { color: var(--jaz-bar-text); font-size: 14px; text-decoration: underline; } .jaz-optbar-back:hover { color: var(--jaz-hover); } /* ---- Detail body (shared by the modal and the standalone product page) ---- */ .jaz-pd { max-width: 720px; } .jaz-pmodal .jaz-pd { max-width: none; } .jaz-pd-title { font-size: 30px; font-weight: 700; text-transform: uppercase; margin: 0 0 6px; line-height: 1.1; } .jaz-pd-price { font-size: 22px; font-weight: 600; margin-bottom: 12px; } .jaz-pd-price s { color: #888; font-weight: 400; } .jaz-pd-sale { color: #f21f07; font-weight: 700; } .jaz-pd-desc { font-size: 16px; margin-bottom: 12px; } .jaz-pd-details { color: #555; margin-bottom: 12px; } .jaz-pd-img img { width: 100%; } .jaz-pd-rule { border: 0; border-top: 2px solid #000; opacity: 1; margin: 16px 0 12px; } /* Option group box. */ .jaz-opt { border: 1px solid #000; padding: 8px 10px; margin-bottom: 6px; } .jaz-opt-head { margin-bottom: 4px; } .jaz-opt-head b { font-weight: 700; } .jaz-req { font-size: 14px; font-style: italic; color: #f21f07; margin-left: 2px; } .jaz-si { display: block; width: 100%; margin: 0; } .jaz-si textarea { margin-top: 4px; } /* Custom radio / checkbox — square black checkbox, round black radio. */ .jaz-control { display: block; position: relative; padding-left: 30px; margin: 8px 0 3px; font-size: 16px; cursor: pointer; } .jaz-control input { position: absolute; z-index: -1; opacity: 0; } .jaz-control .jaz-ind { position: absolute; top: 1px; left: 0; height: 20px; width: 20px; background: #fff; border: 1px solid #000; } .jaz-control-radio .jaz-ind { border-radius: 50%; } .jaz-control:hover input:not([disabled]) ~ .jaz-ind { background: #ccc; } .jaz-control input:checked ~ .jaz-ind { background: #000; } .jaz-control input:disabled ~ .jaz-ind { background: #e6e6e6; opacity: .6; } .jaz-control .jaz-ind:after { content: ''; position: absolute; display: none; } .jaz-control input:checked ~ .jaz-ind:after { display: block; } .jaz-control-ck .jaz-ind:after { left: 7px; top: 3px; width: 4px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } .jaz-control-radio .jaz-ind:after { left: 6px; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: #fff; } /* Qty stepper + add to cart. */ .jaz-qty { display: flex; align-items: center; gap: 6px; margin-bottom: 14px; } .jaz-qty-label { font-weight: 600; margin-right: 4px; } .jaz-qty-btn { width: 26px; height: 30px; background: var(--jaz-btn); color: var(--jaz-btn-text); border: 1px solid var(--jaz-btn); border-radius: 0; font-size: 16px; font-weight: 700; line-height: 1; cursor: pointer; } .jaz-qty-btn:hover { background: #222; } .jaz-qty-input { width: 56px; text-align: center; font-weight: 700; border: 1px solid #ccc; border-radius: 0; padding: 4px 2px; -moz-appearance: textfield; } .jaz-qty-input::-webkit-outer-spin-button, .jaz-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .jaz-addcart { width: 100%; font-size: 18px; padding: 12px; } @media (max-width: 575.98px) { .jaz-pmodal .modal-body { padding: 18px 16px 22px; } .jaz-pd-title { font-size: 26px; } } /* ====================================================================== */ /* SHOPPING CART — legacy showcart.php layout */ /* ====================================================================== */ .jaz-cart { padding-bottom: 28px; } .jaz-cart-empty { padding: 24px 0; } .jaz-cart-table { width: 100%; border-collapse: collapse; } .jaz-cart-table thead th { text-align: left; font-weight: 700; padding: 10px 8px; border-bottom: 1px solid #ddd; } .jaz-cart-table tbody td { padding: 14px 8px; vertical-align: top; border-bottom: 1px dotted #e2e2e2; } .jaz-cart-table th.jaz-cart-qty, .jaz-cart-table td.jaz-cart-qty { width: 1%; white-space: nowrap; } .jaz-cart-table th.jaz-cart-price, .jaz-cart-table td.jaz-cart-price { white-space: nowrap; font-weight: 600; } .jaz-cart-item .name { font-weight: 700; } .jaz-cart-opts { list-style: none; margin: 4px 0 0; padding: 0; font-size: 13px; line-height: 1.4; color: #666; } .jaz-cart-instr { font-size: 13px; color: #666; font-style: italic; margin-top: 4px; } .jaz-cart-actions { white-space: nowrap; text-align: right; } .jaz-cart-actions a, .jaz-cart-actions button { color: #000; background: none; border: 0; font-size: 18px; cursor: pointer; padding: 0 4px; } .jaz-cart-actions a:hover, .jaz-cart-actions button:hover { color: var(--jaz-hover); } /* Qty stepper: number box with + / − beneath (legacy). */ .jaz-cqty { display: inline-block; } .jaz-cqty-input { width: 54px; text-align: center; font-weight: 700; border: 1px solid #ccc; border-radius: 0; padding: 5px 2px; -moz-appearance: textfield; } .jaz-cqty-input::-webkit-outer-spin-button, .jaz-cqty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .jaz-cqty-btns { display: flex; gap: 3px; margin-top: 3px; } .jaz-cqty-btn { width: 26px; height: 26px; background: var(--jaz-btn); color: var(--jaz-btn-text); border: 1px solid var(--jaz-btn); border-radius: 0; font-size: 16px; font-weight: 700; line-height: 1; cursor: pointer; } .jaz-cqty-btn:hover { background: #222; } .jaz-cart-summary { border-top: 1px solid #000; margin-top: 6px; padding-top: 10px; } .jaz-cart-summary h3 { font-size: 16px; font-weight: 700; margin: 0 0 8px; } .jaz-cart-subtotal { display: flex; justify-content: space-between; align-items: baseline; } .jaz-cart-subtotal .amt { font-weight: 700; } .jaz-cart-note { color: #777; font-size: 13px; margin: 12px 0; } .jaz-cart-foot { border-top: 1px solid #000; padding-top: 14px; } .jaz-cart-checkout { display: block; width: 100%; max-width: 360px; text-align: center; font-size: 16px; padding: 12px 26px; } .jaz-cart-clear { margin-top: 10px; } .jaz-cart-clear button { background: none; border: 0; color: #333; font-size: 13px; text-decoration: underline; cursor: pointer; padding: 0; } .jaz-cart-clear button:hover { color: var(--jaz-hover); } /* ====================================================================== */ /* CHECKOUT — legacy single-column stacked layout */ /* ====================================================================== */ /* Match the banner's .jaz-page box so the black bars span the full width and the content left-aligns with the banner (no narrow centered column). */ .jaz-checkout { width: 92%; max-width: 1640px; margin: 0 auto; padding: 0 0 32px; } .jaz-co-bar { background: var(--jaz-bar); color: var(--jaz-bar-text); padding: 10px 16px; margin-top: 22px; } .jaz-co-bar h1, .jaz-co-bar h2 { font-size: 22px; font-weight: 700; margin: 0; display: inline-block; } .jaz-checkout > .jaz-co-bar:first-child { margin-top: 0; } /* flush under the banner */ .jaz-co-bar .jaz-co-bar-right { float: right; } .jaz-co-bar .jaz-co-bar-right a { color: var(--jaz-bar-text); font-size: 13px; text-decoration: underline; } .jaz-co-sec { padding: 18px 16px; border-top: 1px solid #000; } .jaz-co-sec:first-of-type { border-top: 0; } .jaz-co-sec > b { display: block; margin-bottom: 10px; font-size: 16px; } .jaz-co-note { font-size: 14px; font-style: italic; color: #555; } .jaz-co .form-control { border: 1px solid #000; border-radius: 0; } .jaz-co-or { text-align: left; display: block; margin: 14px 0; font-weight: 700; } /* tip buttons — black, orange when active/hover (legacy) */ .jaz-tips { display: flex; flex-wrap: wrap; gap: 6px; max-width: 360px; } .jaz-tip-btn { flex: 1 1 0; min-width: 70px; background: #000; color: #fff; border: 1px solid #000; border-radius: 0; padding: 9px 6px; font-weight: 600; cursor: pointer; text-align: center; } .jaz-tip-btn:hover { background: var(--jaz-accent); color: #000; } .jaz-tip-btn.is-active { background: var(--jaz-accent); color: #000; } .jaz-tip-custom { max-width: 360px; margin-top: 6px; } .jaz-tip-custom .form-control { border: 1px solid #000; border-radius: 0; } /* order total table */ .jaz-ot { width: 100%; max-width: 360px; border-collapse: collapse; } .jaz-ot td { padding: 4px 0; font-weight: 700; } .jaz-ot td.amt { text-align: right; white-space: nowrap; } .jaz-ot tr.jaz-ot-discount td { color: #138000; } .jaz-ot tr.jaz-ot-total td { font-size: 20px; padding-top: 6px; } .jaz-co-promo-applied { font-size: 14px; } .jaz-co-promo-applied .jaz-promo-x { display: inline-block; background: var(--jaz-btn); color: #fff; border-radius: 3px; padding: 0 7px; margin-left: 6px; text-decoration: none; font-size: 12px; } .jaz-co-continue { text-align: left; padding: 22px 0; } .jaz-co-continue .btn-jaz { min-width: 280px; padding: 12px 26px; font-size: 18px; } /* delivery (Stage 2a): fulfilment toggle + address + live quote */ .jaz-fulfil-choice .jaz-fulfil-opt { font-size: 24px; cursor: pointer; } .jaz-deliv-addr { font-size: 15px; } .jaz-deliv-addr-btn { padding: 8px 18px; } .jaz-deliv-msg { font-size: 14px; font-weight: 600; margin: 0; } /* Google Places suggestions must sit above the Bootstrap modal (z-index 1055). */ .pac-container { z-index: 2000; } @media (max-width: 575.98px) { /* Mobile add uses the confirmation popup, not the mini-cart. The dropdown only appears via the no-JS fallback, so keep it on-screen under the icon. */ .jaz-minicart { width: 92vw; right: -8px; left: auto; } .jaz-co-fields .col-12 { margin-bottom: 4px; } /* Checkout: full width (banner is full-bleed on mobile too) + larger type. */ .jaz-checkout { width: 100%; max-width: none; } .jaz-co label { font-size: 18px; } .jaz-co-note { font-size: 15px; } .jaz-co .form-control, .jaz-co .form-select { font-size: 17px; } .jaz-fulfil-choice .jaz-fulfil-opt { font-size: 28px; } .jaz-ot td { font-size: 16px; } .jaz-ot tr.jaz-ot-total td { font-size: 22px; } .jaz-co-or { font-size: 16px; } }