@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400..900;1,9..144,400..600&family=Jost:wght@300..600&display=swap'); /* ===================================================================== liv-hydrate-summary.css — /hydrate/summary checkout Aesthetic: Botanical Spa Luxury (matches liv-hydrate.css exactly) Prefix: livhyd-sum- Scope: #livhyd-sum-shell (injected by JS) DNN root = 10px → all rem values authored against a 10px root. LAYOUT: "Amazon-true" — cart line items + form in the LEFT column, sticky totals rail on the RIGHT, fixed total bar on mobile. HARD RULES OBSERVED: · Never replace .angrid-simple-btn (or any grid button) innerHTML. Every button here is styled with CSS only — Angular bindings intact. · Tax is NEVER read from TotalTax (frozen at page load; observed holding a stale 5.27 while real tax was 0). JS computes it as TotalCC - SubTotal - ShipAmt. · Module IDs taken from LIVE rendered HTML (2541 grid / 2574 form), not from exports. ===================================================================== */ /* ===================================================================== 0 · BOOT GUARD (FOUC) --------------------------------------------------------------------- The JS cannot build #livhyd-sum-shell until ActionForm/Angular has hydrated (tryBoot() needs at least one #angrid2541 tr.angrid-item), so without this the browser paints the stock DNN pane layout first and the page visibly snaps when the panes are moved into the shell. WHY THE HIDE LIVES HERE AND NOT IN THE JS (decided 2026-08-11): the original fix direction was to add the hiding class from JS at script execution, so that a no-JS visitor was never affected. Measured on the live page, that cannot work — liv-hydrate-summary.js is loaded from HTML module 2854 at DOM index ~2064 of 2181 (the bottom of the page), while the panes it hides sit at index 194 / 325. By the time the script runs the panes have already painted, so a JS-applied hide yields visible → hidden → visible. This stylesheet is in , so hiding from here is the only thing that lands before the first paint. The JS therefore *removes* the hide by adding .livhyd-sum-ready to once the shell is built and the first refresh() has run. visibility (not display) so the panes keep their box and the page does not scroll-jump underneath the reveal. FAILSAFE — the reason hiding from CSS is safe: the 0s animation with a 3s delay + forwards fill restores visibility on its own. Pure CSS, so it fires even if the script 404s, JS is off, the script throws, hydration never completes, or the cart is empty (boot is skipped by design there). The page can never stay hidden; worst case is a 3s wait for an unstyled but fully functional page. Deliberately NOT covered by the reduced-motion block in section 7 — this is a safety net, not decoration. ===================================================================== */ html:not(.livhyd-sum-ready) #dnn_ctr2541_ContentPane, html:not(.livhyd-sum-ready) #dnn_ctr2574_ContentPane, html:not(.livhyd-sum-ready) .DnnModule-2540, html:not(.livhyd-sum-ready) .DnnModule-2549{ visibility:hidden; animation:livhydSumFailsafe 0s linear 3s forwards; } @keyframes livhydSumFailsafe{to{visibility:visible;}} /* ===================================================================== 1 · SHELL + TOKENS ===================================================================== */ /* Tokens are declared on BOTH roots on purpose. #livhyd-sum-mobilebar is appended to , i.e. OUTSIDE the shell, so it inherits nothing from it. Declaring the tokens only on the shell left every var() in the mobile-bar rules unresolved — the CTA gradient collapsed to `background:none`, rendering white text on a transparent button. */ #livhyd-sum-shell, #livhyd-sum-mobilebar{ --s-pine:#2f4a38; --s-sage:#5c7d62; --s-mist:#dce6dd; --s-cream:#f5f1e8; --s-gold:#c9a24b; --s-aqua:#1fb6c9; --s-lime:#7fc242; --s-ink:#3a4a3f; --s-line:rgba(47,74,56,.10); --s-shadow:0 24px 60px rgba(28,60,45,.13), 0 2px 5px rgba(28,60,45,.05); --s-radius:20px; } #livhyd-sum-shell{ font-family:'Jost',sans-serif; color:var(--s-ink); display:grid; grid-template-columns:minmax(0,1fr) 34rem; align-items:start; gap:3.2rem; max-width:132rem; margin:0 auto; padding:3.2rem 2rem 6rem; background: radial-gradient(900px 400px at 88% -6%, rgba(31,182,201,.07), transparent 62%), radial-gradient(700px 380px at -6% 104%, rgba(127,194,66,.08), transparent 62%); } #livhyd-sum-shell .livhyd-sum-main{min-width:0;display:flex;flex-direction:column;gap:2.8rem;} /* Page heading (module 2540), moved in as a full-width first row so it shares the shell's centre line instead of the old col-md-8's. */ #livhyd-sum-shell .livhyd-sum-pagehead{ grid-column:1 / -1; width:100%!important;float:none!important;margin:0 0 .8rem!important; } /* Section shell shared by cart + form */ #livhyd-sum-shell .livhyd-sum-card{ background:#fff; border:1px solid var(--s-line); border-radius:var(--s-radius); box-shadow:var(--s-shadow); overflow:hidden; } /* Slim bar — the page heading lives in HTML module 2540 above, so this carries the item count only (no duplicate title). */ #livhyd-sum-shell .livhyd-sum-cardhead{ display:flex;align-items:center;justify-content:flex-end;gap:1.2rem; padding:1.4rem 2.2rem 1.2rem; border-bottom:1px solid var(--s-line); } #livhyd-sum-shell .livhyd-sum-cardhead .count{ font-size:1.35rem;color:var(--s-sage);letter-spacing:.08em;text-transform:uppercase; } /* ===================================================================== 2 · CART GRID (#angrid2541) → line-item cards Table semantics are kept; only `display` is restyled, so every Angular binding and ng-click on the row buttons stays live. ===================================================================== */ #livhyd-sum-shell .livhyd-sum-cart{padding:.8rem 1.6rem 1.6rem;} /* ActionGrid carries its own 10px side margins; with the card already padded that stole 20px of row width on mobile. */ #livhyd-sum-shell #angrid2541{margin:0!important;} #livhyd-sum-shell #angrid2541 .table-responsive{overflow:visible!important;border:0!important;} /* Kill the DNN/bootstrap table chrome. `display:block` on the table itself is required: with a block-level tbody the table box otherwise shrink-wraps to its old column widths (measured 272px inside a 326px container) instead of filling it. */ #livhyd-sum-shell #angrid2541 table.angrid-grid{ display:block; width:100%!important;margin:0!important;border:0!important;background:none!important; table-layout:auto!important; } #livhyd-sum-shell #angrid2541 table.angrid-grid > thead{display:none;} /* labels move into the cards */ #livhyd-sum-shell #angrid2541 table.angrid-grid > tbody{display:block;width:100%;} /* ActionGrid ships `white-space:nowrap` on its cells. Left alone, a product name cannot wrap and is clipped by its grid column on narrow screens (measured: a 216px name inside a 178px column at 390px viewport). */ #livhyd-sum-shell #angrid2541 tbody tr.angrid-item > td, #livhyd-sum-shell #angrid2541 tbody tr.angrid-item .grid-field-value{ white-space:normal!important; overflow-wrap:anywhere; } #livhyd-sum-shell #angrid2541 table.table-striped > tbody > tr:nth-of-type(odd){background:none!important;} #livhyd-sum-shell #angrid2541 td, #livhyd-sum-shell #angrid2541 th{border:0!important;background:none!important;vertical-align:middle;} /* Each product row becomes a card */ #livhyd-sum-shell #angrid2541 tbody tr.angrid-item{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; grid-template-areas: "leaf name price" "leaf meta btns"; align-items:center; column-gap:1.6rem; row-gap:.6rem; padding:1.8rem 1.6rem; margin:1rem 0; border:1px solid var(--s-line); border-radius:14px; background:#fff; transition:box-shadow .25s ease, transform .25s ease, border-color .25s ease; } #livhyd-sum-shell #angrid2541 tbody tr.angrid-item:hover{ border-color:rgba(47,74,56,.18); box-shadow:0 10px 28px rgba(28,60,45,.09); transform:translateY(-1px); } /* Botanical leaf mark — decorative, CSS-only (the grid carries no imagery) */ #livhyd-sum-shell #angrid2541 tbody tr.angrid-item::before{ content:"";grid-area:leaf; width:4.4rem;height:4.4rem;border-radius:50%; background: radial-gradient(circle at 32% 30%, rgba(31,182,201,.30), rgba(127,194,66,.18) 58%, transparent 72%), var(--s-cream); border:1px solid rgba(47,74,56,.07); } /* Cell → area mapping (column order confirmed live: 1 Product · 2 Qty · 3 Store Price · 4 spacer · 5 buttons) */ #livhyd-sum-shell #angrid2541 tbody tr.angrid-item > td:nth-child(1){grid-area:name;padding:0!important;} #livhyd-sum-shell #angrid2541 tbody tr.angrid-item > td:nth-child(2){grid-area:meta;padding:0!important;} #livhyd-sum-shell #angrid2541 tbody tr.angrid-item > td:nth-child(3){grid-area:price;padding:0!important;text-align:right;} #livhyd-sum-shell #angrid2541 tbody tr.angrid-item > td:nth-child(4){display:none;} #livhyd-sum-shell #angrid2541 tbody tr.angrid-item > td.angrid-item-buttons{ grid-area:btns;padding:0!important;display:flex!important;justify-content:flex-end;gap:.7rem; } /* Product name */ #livhyd-sum-shell #angrid2541 tbody tr.angrid-item > td:nth-child(1) .grid-field-value{ font-family:'Fraunces',serif;font-weight:600;color:var(--s-pine); font-size:1.9rem;line-height:1.2;letter-spacing:-.005em; } /* Qty — label supplied by CSS so no markup is touched */ #livhyd-sum-shell #angrid2541 tbody tr.angrid-item > td:nth-child(2)::before{ content:"Qty ";color:var(--s-sage);font-size:1.35rem;letter-spacing:.06em;text-transform:uppercase; } #livhyd-sum-shell #angrid2541 tbody tr.angrid-item > td:nth-child(2) .grid-field-value{ font-weight:600;color:var(--s-ink);font-size:1.5rem; } /* Price */ #livhyd-sum-shell #angrid2541 tbody tr.angrid-item > td:nth-child(3) .grid-field-value{ font-family:'Fraunces',serif;font-weight:600;color:var(--s-pine);font-size:2.1rem; white-space:nowrap!important; /* must beat the name-wrapping rule above */ } /* A $0.00 row (FREE Membership) reads as a perk, not a charge */ #livhyd-sum-shell #angrid2541 tbody tr.angrid-item.livhyd-sum-free{ background:linear-gradient(180deg, rgba(127,194,66,.07), rgba(127,194,66,.03)); border-color:rgba(127,194,66,.28); } #livhyd-sum-shell #angrid2541 tbody tr.angrid-item.livhyd-sum-free > td:nth-child(3) .grid-field-value{ color:var(--s-lime); } /* Row +/−/trash buttons — CSS ONLY, innerHTML never touched */ #livhyd-sum-shell #angrid2541 td.angrid-item-buttons .btn{ width:3.6rem;height:3.6rem;min-width:0;padding:0!important; display:inline-flex;align-items:center;justify-content:center; border-radius:10px!important; border:1px solid var(--s-line)!important; background:var(--s-cream)!important; color:var(--s-pine)!important; opacity:1!important; box-shadow:none!important; transition:background .2s ease, border-color .2s ease, transform .12s ease; } #livhyd-sum-shell #angrid2541 td.angrid-item-buttons .btn:hover{ background:var(--s-mist)!important;border-color:rgba(47,74,56,.22)!important;transform:translateY(-1px); } #livhyd-sum-shell #angrid2541 td.angrid-item-buttons .btn:active{transform:translateY(0);} /* Trash (3rd control) reads destructive on hover only */ #livhyd-sum-shell #angrid2541 td.angrid-item-buttons .btn:nth-child(3):hover{ background:#fbeceb!important;border-color:rgba(176,58,46,.30)!important;color:#a8392f!important; } /* Grid footer (Total row) is redundant — the rail owns totals */ #livhyd-sum-shell #angrid2541 tbody tr.grid-footer{display:none!important;} /* Grid toolbar: Empty Cart / Keep Shopping — CSS only */ #livhyd-sum-shell #angrid2541 .angrid-simple-btn{ border-radius:100px!important; border:1px solid var(--s-line)!important; background:#fff!important; color:var(--s-sage)!important; padding:1rem 2rem!important; font-family:'Jost',sans-serif;font-size:1.4rem;letter-spacing:.04em; box-shadow:none!important; transition:background .2s ease,color .2s ease,border-color .2s ease; } #livhyd-sum-shell #angrid2541 .angrid-simple-btn:hover{ background:var(--s-cream)!important;color:var(--s-pine)!important;border-color:rgba(47,74,56,.22)!important; } /* ===================================================================== 3 · FORM (#pnlContent2574) ===================================================================== */ #livhyd-sum-shell #pnlContent2574{background:none!important;padding:2.4rem 2.6rem 2.8rem!important;} #livhyd-sum-shell #pnlContent2574 [class*="col-"]{padding-left:0!important;padding-right:0!important;} #livhyd-sum-shell #pnlContent2574 .row{margin-left:0!important;margin-right:0!important;} /* Hidden by JS: (a) the form's own Summary / TotalHTML blocks, which duplicate the rail, and (b) the emptied .DnnModule husks left behind when the panes are moved into the shell. Deliberately UNSCOPED — the husks sit outside the shell, so a scoped rule would never reach them. The prefix keeps it collision-safe. */ .livhyd-sum-hidden{display:none!important;} /* Section headings (PersonalInfoHTML / AddressHTML / CCInfo are HTML fields) */ #livhyd-sum-shell #pnlContent2574 h3, #livhyd-sum-shell #pnlContent2574 h2{ font-family:'Fraunces',serif;font-weight:600;color:var(--s-pine); font-size:2.1rem;line-height:1.2;margin:2.6rem 0 1.4rem; padding-bottom:1rem;border-bottom:1px solid var(--s-line); } #livhyd-sum-shell #pnlContent2574 .form-group{margin-bottom:1.4rem!important;} /* Inputs */ #livhyd-sum-shell #pnlContent2574 .form-control, #livhyd-sum-shell #pnlContent2574 input[type=text], #livhyd-sum-shell #pnlContent2574 input[type=email], #livhyd-sum-shell #pnlContent2574 input[type=number], #livhyd-sum-shell #pnlContent2574 input[type=tel], #livhyd-sum-shell #pnlContent2574 select{ height:auto!important;min-height:5.2rem!important; border:1px solid var(--s-line)!important; border-radius:12px!important; background:#fcfdfc!important; color:var(--s-ink)!important; padding:1.2rem 1.6rem!important; font-family:'Jost',sans-serif;font-size:1.6rem; box-shadow:none!important; transition:border-color .2s ease, box-shadow .2s ease, background .2s ease; } #livhyd-sum-shell #pnlContent2574 .form-control:focus, #livhyd-sum-shell #pnlContent2574 select:focus{ outline:none!important; background:#fff!important; border-color:var(--s-aqua)!important; box-shadow:0 0 0 3px rgba(31,182,201,.14)!important; } #livhyd-sum-shell #pnlContent2574 ::placeholder{color:#9aa79b;opacity:1;} /* intl-tel-input: the country flag/dropdown is absolutely positioned over the left edge of the field, so the input needs clearance for it. The generic 1.6rem padding above collides with the flag and overlaps the placeholder. */ #livhyd-sum-shell #pnlContent2574 .intl-tel-input{display:block;width:100%;} #livhyd-sum-shell #pnlContent2574 .intl-tel-input.allow-dropdown input, #livhyd-sum-shell #pnlContent2574 .intl-tel-input.allow-dropdown input[type=tel]{ padding-left:5.6rem!important;width:100%; } /* Shipping radios → pills (class toggled by JS on change) */ #livhyd-sum-shell #pnlContent2574 label.livhyd-sum-pill{ display:inline-flex;align-items:center;gap:.8rem; border:1px solid var(--s-line);border-radius:100px; padding:1.1rem 1.8rem;margin:0 1rem 1rem 0;cursor:pointer; font-size:1.5rem;color:var(--s-ink);background:#fff; transition:border-color .2s ease, background .2s ease, box-shadow .2s ease; } #livhyd-sum-shell #pnlContent2574 label.livhyd-sum-pill:hover{background:var(--s-cream);} #livhyd-sum-shell #pnlContent2574 label.livhyd-sum-pill.is-active{ border-color:var(--s-aqua);background:rgba(31,182,201,.08); box-shadow:0 0 0 3px rgba(31,182,201,.10);color:var(--s-pine);font-weight:500; } /* Primary submit inside the form (kept in place — the rail proxies to it) */ #livhyd-sum-shell #dnn2574ChargemyCard{ width:100%;border:0!important;border-radius:100px!important; background:linear-gradient(135deg,var(--s-aqua),var(--s-lime))!important; color:#fff!important;font-family:'Jost',sans-serif;font-weight:600; font-size:1.7rem;letter-spacing:.06em;text-transform:uppercase; padding:1.8rem 2.4rem!important; box-shadow:0 14px 30px rgba(31,182,201,.26)!important; transition:transform .18s ease, box-shadow .18s ease, filter .18s ease; } #livhyd-sum-shell #dnn2574ChargemyCard:hover{ transform:translateY(-2px);filter:saturate(1.06); box-shadow:0 20px 40px rgba(31,182,201,.32)!important; } #livhyd-sum-shell #dnn2574EmptyCart{ border-radius:100px!important;border:1px solid var(--s-line)!important; background:#fff!important;color:var(--s-sage)!important; padding:1.5rem 2.2rem!important;font-size:1.45rem;letter-spacing:.04em;box-shadow:none!important; } #livhyd-sum-shell #dnn2574EmptyCart:hover{background:var(--s-cream)!important;color:var(--s-pine)!important;} /* ===================================================================== 4 · STICKY TOTALS RAIL ===================================================================== */ #livhyd-sum-rail{ /* The theme's .header_inner is fixed at 60px tall — a smaller offset parks the rail underneath it when the page is scrolled. 60px + 24px breathing. */ position:sticky;top:8.4rem; border-radius:var(--s-radius); background:#fff; border:1px solid var(--s-line); box-shadow:var(--s-shadow); overflow:hidden; } #livhyd-sum-rail .livhyd-sum-railhead{ display:flex;align-items:center;justify-content:space-between;gap:1rem; padding:1.9rem 2.2rem; background:linear-gradient(135deg,var(--s-pine),#3d6349); color:#fff; } #livhyd-sum-rail .livhyd-sum-railhead .t{ font-family:'Fraunces',serif;font-weight:600;font-size:1.9rem;letter-spacing:-.005em; } #livhyd-sum-rail .livhyd-sum-edit{ font-size:1.35rem;color:#fff;text-decoration:none; border:1px solid rgba(255,255,255,.34);border-radius:100px;padding:.6rem 1.3rem; transition:background .2s ease,border-color .2s ease; } #livhyd-sum-rail .livhyd-sum-edit:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.6);} #livhyd-sum-rail .livhyd-sum-meta{ display:flex;align-items:center;justify-content:space-between;gap:1rem; padding:1.5rem 2.2rem;border-bottom:1px solid var(--s-line); } #livhyd-sum-rail .livhyd-sum-qty{font-size:1.5rem;color:var(--s-sage);} #livhyd-sum-rail .livhyd-sum-qty b{color:var(--s-pine);font-weight:600;} #livhyd-sum-rail .livhyd-sum-pv{ background:rgba(201,162,75,.14);color:#8a6c22;border:1px solid rgba(201,162,75,.32); border-radius:100px;padding:.5rem 1.2rem;font-size:1.3rem;font-weight:500;letter-spacing:.03em; } #livhyd-sum-rail .livhyd-sum-rows{padding:1.8rem 2.2rem .6rem;} #livhyd-sum-rail .livhyd-sum-row{ display:flex;align-items:baseline;justify-content:space-between;gap:1.2rem;margin-bottom:1.2rem; } #livhyd-sum-rail .livhyd-sum-row .l{font-size:1.5rem;color:var(--s-sage);} #livhyd-sum-rail .livhyd-sum-row .v{font-size:1.6rem;color:var(--s-ink);font-weight:500;white-space:nowrap;} #livhyd-sum-rail .livhyd-sum-freetag{color:var(--s-lime);font-weight:600;letter-spacing:.04em;} #livhyd-sum-rail .livhyd-sum-member{ margin:0 2.2rem 1.6rem;padding:1.1rem 1.4rem;border-radius:12px; background:linear-gradient(180deg, rgba(127,194,66,.10), rgba(127,194,66,.04)); border:1px solid rgba(127,194,66,.26); color:#456b2c;font-size:1.35rem;line-height:1.4; } #livhyd-sum-rail .livhyd-sum-total{ display:flex;align-items:baseline;justify-content:space-between;gap:1.2rem; padding:1.8rem 2.2rem;border-top:1px solid var(--s-line); background:linear-gradient(180deg,#fbfcfb,var(--s-cream)); } #livhyd-sum-rail .livhyd-sum-total .l{ font-family:'Fraunces',serif;font-weight:600;color:var(--s-pine);font-size:1.9rem; } #livhyd-sum-rail .livhyd-sum-total .v{ font-family:'Fraunces',serif;font-weight:700;color:var(--s-pine);font-size:3rem;letter-spacing:-.01em; } #livhyd-sum-rail .livhyd-sum-cta{ display:block;width:calc(100% - 4.4rem);margin:0 2.2rem 1.6rem; border:0;border-radius:100px;cursor:pointer; background:linear-gradient(135deg,var(--s-aqua),var(--s-lime)); color:#fff;font-family:'Jost',sans-serif;font-weight:600; font-size:1.6rem;letter-spacing:.06em;text-transform:uppercase; padding:1.7rem 2rem; box-shadow:0 14px 30px rgba(31,182,201,.26); transition:transform .18s ease, box-shadow .18s ease, filter .18s ease; } #livhyd-sum-rail .livhyd-sum-cta:hover{ transform:translateY(-2px);filter:saturate(1.06);box-shadow:0 20px 40px rgba(31,182,201,.32); } #livhyd-sum-rail .livhyd-sum-trust{ padding:0 2.2rem 2rem;color:var(--s-sage);font-size:1.28rem;line-height:1.6;text-align:center; } /* ===================================================================== 5 · MOBILE FIXED TOTAL BAR ===================================================================== */ #livhyd-sum-mobilebar{ display:none; position:fixed;left:0;right:0;bottom:0;z-index:1030; align-items:center;justify-content:space-between;gap:1.4rem; padding:1.2rem 1.6rem calc(1.2rem + env(safe-area-inset-bottom,0px)); background:rgba(255,255,255,.96); backdrop-filter:blur(10px); border-top:1px solid var(--s-line); box-shadow:0 -8px 28px rgba(28,60,45,.14); font-family:'Jost',sans-serif; } #livhyd-sum-mobilebar .mb-l{display:flex;flex-direction:column;gap:.2rem;min-width:0;} #livhyd-sum-mobilebar .mb-items{font-size:1.3rem;color:var(--s-sage);} #livhyd-sum-mobilebar .mb-total{ font-family:'Fraunces',serif;font-weight:700;color:var(--s-pine);font-size:2.2rem;line-height:1.1; } #livhyd-sum-mobilebar .mb-cta{ flex:0 0 auto;border:0;border-radius:100px;cursor:pointer; background:linear-gradient(135deg,var(--s-aqua),var(--s-lime)); color:#fff;font-weight:600;font-size:1.5rem;letter-spacing:.05em;text-transform:uppercase; padding:1.4rem 2.2rem;box-shadow:0 10px 24px rgba(31,182,201,.28); } /* ===================================================================== 6 · RESPONSIVE ===================================================================== */ @media(max-width:1024px){ #livhyd-sum-shell{grid-template-columns:1fr;gap:2.4rem;padding:2.4rem 1.6rem 4rem;} #livhyd-sum-rail{position:static;} } @media(max-width:760px){ /* Rail is replaced by the fixed bar; keep it visible but demoted */ #livhyd-sum-rail .livhyd-sum-cta{display:none;} #livhyd-sum-mobilebar{display:flex;} #livhyd-sum-shell{padding-bottom:11rem;} /* clear the fixed bar */ #livhyd-sum-shell #angrid2541 tbody tr.angrid-item{ grid-template-columns:auto minmax(0,1fr); grid-template-areas: "leaf name" "leaf price" "meta btns"; row-gap:.9rem; } #livhyd-sum-shell #angrid2541 tbody tr.angrid-item > td:nth-child(3){text-align:left;} #livhyd-sum-shell #pnlContent2574{padding:2rem 1.6rem 2.4rem!important;} #livhyd-sum-shell .livhyd-sum-cardhead{padding:2rem 1.8rem 1.4rem;} #livhyd-sum-shell .livhyd-sum-cart{padding:.4rem 1rem 1.2rem;} } @media(max-width:420px){ #livhyd-sum-mobilebar .mb-cta{padding:1.3rem 1.6rem;font-size:1.4rem;} } /* ===================================================================== 6.5 · EMPTY CART STATE --------------------------------------------------------------------- Reachable in normal use — the checkout form's own "Empty Cart" button lands the customer right back here with nothing in the cart, as does a bookmark or an expired session. The normal boot path is skipped when there are no rows (tryBoot needs at least one tr.angrid-item), so without this the FOUC guard's failsafe would reveal the raw, unstyled DNN page. buildEmpty() mounts this card instead and hides the grid + form modules outright: there is nothing to total and nothing to check out, so no rail and no mobile bar either. ===================================================================== */ #livhyd-sum-shell.livhyd-sum-isempty{ grid-template-columns:minmax(0,1fr); max-width:78rem; padding-bottom:8rem; } #livhyd-sum-shell .livhyd-sum-empty{ text-align:center; padding:6rem 3.2rem 5.4rem; } /* Mark — the aqua→lime accent of the funnel, held in a soft mist ring */ #livhyd-sum-shell .livhyd-sum-emptymark{ width:9.6rem;height:9.6rem;margin:0 auto 3rem; display:flex;align-items:center;justify-content:center; border-radius:50%; background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.9), transparent 58%), linear-gradient(140deg, rgba(31,182,201,.16), rgba(127,194,66,.18)); border:1px solid rgba(47,74,56,.10); box-shadow:inset 0 2px 10px rgba(255,255,255,.7), 0 12px 30px rgba(28,60,45,.08); } #livhyd-sum-shell .livhyd-sum-emptymark svg{width:4.4rem;height:4.4rem;display:block;} #livhyd-sum-shell .livhyd-sum-empty h2{ font-family:'Fraunces',serif;font-weight:600;color:var(--s-pine); font-size:3.4rem;line-height:1.15;letter-spacing:-.01em; margin:0 0 1.4rem;padding:0;border:0; } #livhyd-sum-shell .livhyd-sum-empty p{ font-family:'Jost',sans-serif;color:var(--s-sage); font-size:1.7rem;line-height:1.6; max-width:38rem;margin:0 auto 3.4rem; } /* CTA — same gradient pill as the rail's "Complete my order", so the two primary actions on this page read as one system. Anchor, not button: it navigates, and must stay usable if scripting later fails. */ #livhyd-sum-shell .livhyd-sum-emptycta{ display:inline-flex;align-items:center;gap:1.1rem; border:0;border-radius:100px;cursor:pointer;text-decoration:none; background:linear-gradient(135deg,var(--s-aqua),var(--s-lime)); color:#fff;font-family:'Jost',sans-serif;font-weight:600; font-size:1.6rem;letter-spacing:.06em;text-transform:uppercase; padding:1.7rem 3.4rem; box-shadow:0 14px 30px rgba(31,182,201,.26); transition:transform .18s ease, box-shadow .18s ease, filter .18s ease; } #livhyd-sum-shell .livhyd-sum-emptycta:hover, #livhyd-sum-shell .livhyd-sum-emptycta:focus{ transform:translateY(-2px);filter:saturate(1.06); box-shadow:0 20px 40px rgba(31,182,201,.32);color:#fff;text-decoration:none; } #livhyd-sum-shell .livhyd-sum-emptycta .arw{ transition:transform .18s ease;display:inline-block; } #livhyd-sum-shell .livhyd-sum-emptycta:hover .arw{transform:translateX(4px);} /* p.livhyd-sum-emptymeta, not .livhyd-sum-emptymeta: the rule above is id + class + TYPE, so a plain id + class selector loses to it and the meta line keeps a 3.4rem bottom margin, unbalancing the card's optical padding. */ /* margin-inline MUST stay `auto`: the rule above caps paragraphs at 38rem and centres them with auto margins. Overriding margin with a 0 inline value here left the meta as a 380px left-aligned box whose text centred inside itself, ~145px left of the card's centre line. Keep the `auto`. */ #livhyd-sum-shell .livhyd-sum-empty p.livhyd-sum-emptymeta{ margin:2.2rem auto 0;color:var(--s-sage);font-size:1.35rem;letter-spacing:.02em; } #livhyd-sum-shell .livhyd-sum-emptymeta b{color:var(--s-pine);font-weight:600;} @media(max-width:640px){ #livhyd-sum-shell .livhyd-sum-empty{padding:4.4rem 2.2rem 4rem;} #livhyd-sum-shell .livhyd-sum-empty h2{font-size:2.8rem;} #livhyd-sum-shell .livhyd-sum-emptycta{width:100%;justify-content:center;padding:1.7rem 2rem;} } /* ===================================================================== 7 · MOTION / A11Y ===================================================================== */ #livhyd-sum-shell .livhyd-sum-card, #livhyd-sum-rail{animation:livhydSumRise .5s cubic-bezier(.2,.7,.3,1) both;} #livhyd-sum-rail{animation-delay:.08s;} @keyframes livhydSumRise{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}} #livhyd-sum-shell :focus-visible, #livhyd-sum-rail :focus-visible, #livhyd-sum-mobilebar :focus-visible{ outline:3px solid var(--s-aqua);outline-offset:2px;border-radius:6px; } @media(prefers-reduced-motion:reduce){ #livhyd-sum-shell *,#livhyd-sum-rail *,#livhyd-sum-mobilebar *{ animation:none!important;transition:none!important; } #livhyd-sum-shell #angrid2541 tbody tr.angrid-item:hover{transform:none;} }