/* ========================================================================== R16 — Købs-sheet. Delt på -niveau, ÉN pr. side. Erstatter .pc__buy-overlayet inde i produktkortet (slettet i plp.css). Hvorfor den ikke kunne blive i kortet: .pc har container-type: inline-size, som efter css-contain-3 også giver layout containment, og en layout containment box er containing block for BÅDE absolute og fixed. Panelet kunne derfor aldrig blive andet end absolute inde i kortet, og et absolute-panel i et 2-spors mobilgrid dækker nabokortet. Se plp.css. Basis = bundsheet (finger). Afvigelsen står i ÉN blok nederst, bag `@media not all and (pointer: coarse)`. Formuleringen er med vilje en negation og ikke `(pointer: fine)`. JS'en spørger `matchMedia('(pointer: coarse)')` og har en else-gren; den præcise negation af det er "ikke coarse", ikke "fine". På en enhed der rapporterer pointer: none (tastaturnavigation, nogle tv-browsere, en Chrome-fane uden pegeredskab) matchede `(pointer: fine)` ikke, mens JS'ens else-gren kørte alligevel — enheden fik desktop-logik og bundsheet-form på samme tid. Rettet i R17. Blokken nederst og plp.css' desktop-blok bruger nu samme formulering, og den skal blive ved med at matche JS'ens else-gren. R17 flyttede desuden selve VALGET ud af sheeten på mus: prisrækkerne på kortet er knapperne, og sheeten åbnes slet ikke af en musebruger. Det ankrede panel herunder er derfor kun i brug for en pointer:none-enhed og for sider der stadig kalder openSheet direkte (produktsiden). Se plp.css R17. Basis herunder = mobil. Desktop-afvigelserne står samlet nederst. ========================================================================== */ /* Nulstil UA-arket: dialog har egen margin:auto, border, padding, max-width og max-height (calc(100% - 6px - 2em)) — alt sammen i vejen for en bundsheet. */ .bs { margin: 0; padding: 0; border: 0; max-width: none; max-height: none; width: auto; background: none; color: inherit; overflow: visible; } /* ⚠️ BÆRENDE. UA-arkets `dialog:not([open]) { display: none }` taber til ENHVER forfatter-regel uanset specificitet — og .bs sætter display:flex nedenfor. Uden den her linje står sheeten åben, fuldskærm, på hver eneste sideindlæsning. Præcis samme fælde som .pc__buy[hidden]{display:none} lukkede i R14: en display-erklæring på selve elementet slår den skjulte standard ihjel. :not([open]) (0,2,0) er med vilje mere specifik end både basis- og desktop-reglen på .bs (0,1,0), så den ikke kan tabes i en senere override. */ .bs:not([open]) { display: none; } .bs::backdrop { background: rgba(13, 16, 25, 0.45); opacity: 0; transition: opacity var(--d-med) var(--ease); } .bs.is-open::backdrop { opacity: 1; } /* Mobil: dialogen fylder HELE viewporten og sheeten sidder i bunden af den. Det er ikke kosmetik — det er det der gør "tap uden for" muligt. En modal gør resten af dokumentet inert, og inerte elementer er slet ikke hit-testbare, så et klik i det mørke område rammer ingenting hvis dialogens egen boks kun er selve sheeten. Med inset:0 rammer klikket selv, og JS'ens `e.target === el` kan lukke. ::backdrop ligger bagved og mørkner. (closedby="any" ville gøre det samme, men mangler i iOS Safari.) */ .bs { position: fixed; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; z-index: 61; } .bs__inner { display: flex; flex-direction: column; min-height: 0; width: 100%; /* dvh frem for vh: vh er på iOS den STORE viewport, så 88vh ville stikke ned under kanten når adresselinjen er synlig og skubbe CTA'en ud af skærmen. */ max-height: min(88dvh, 720px); background: var(--snow); border-top: 1.5px solid var(--ink); /* translate frem for transform: kortets egen transform bruges til hover, og her holder vi de to adskilt så en fremtidig transform-tilføjelse ikke nulstiller indgangs-animationen. */ translate: 0 100%; transition: translate var(--d-med) var(--ease); } .bs.is-open .bs__inner { translate: 0 0; } /* ---- Hoved ---------------------------------------------------------- */ .bs__head { display: grid; grid-template-columns: 52px 1fr 44px; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1.5px solid var(--ink); } .bs__thumb { width: 52px; height: 52px; object-fit: cover; background: var(--stone); display: block; } .bs__id { min-width: 0; } .bs__title { margin: 0; font-size: var(--t-body); line-height: 1.25; /* Navnet må fylde to linjer og derefter klippes — et 4-linjers designnavn ville skubbe tier-listen ned uden at tilføje information. */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .bs__sku { margin: 2px 0 0; font-family: var(--font-mono); font-size: var(--t-mono-s); letter-spacing: 0.04em; color: var(--ink-mute); } .bs__x { width: 44px; height: 44px; border: 1.5px solid var(--ink); background: var(--snow); cursor: pointer; display: grid; place-items: center; font-size: 15px; line-height: 1; padding: 0; } /* ---- Længder (eneste scroll-region) --------------------------------- */ .bs__tiers { flex: 1 1 auto; min-height: 0; overflow-y: auto; /* Uden contain ruller baggrunden videre når listen rammer bunden. */ overscroll-behavior: contain; -webkit-overflow-scrolling: touch; display: grid; gap: 8px; padding: 12px 16px; align-content: start; } .bs__tier { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 12px; min-height: 64px; width: 100%; padding: 10px 12px; border: 1.5px solid var(--line); background: var(--paper); cursor: pointer; text-align: left; color: inherit; font: inherit; transition: border-color var(--d-fast) var(--ease), background var(--d-fast) var(--ease); } /* Marc, feedback 8: "I would like to keep fabric pieces for visual." Rullegrafikken er ikke bare bevaret — den er gået fra 20 til 40px, så den faktisk kan aflæses som stofstykke vs. hel rulle. */ .bs__tier img { width: 40px; height: 40px; object-fit: contain; display: block; } .bs__tier-id { min-width: 0; display: grid; gap: 2px; } .bs__tier-id b { font-weight: 500; font-size: var(--t-body-s); } .bs__tier-id small { font-size: var(--t-mono-s); color: var(--ink-mute); } .bs__tier-p { text-align: right; display: grid; gap: 2px; } .bs__tier-p b { font-family: var(--font-mono); font-size: var(--t-mono); font-weight: 500; font-variant-numeric: tabular-nums; } .bs__tier-p small { font-family: var(--font-mono); font-size: var(--t-mono-s); color: var(--ink-mute); font-variant-numeric: tabular-nums; } .bs__tier[aria-pressed="true"] { border-color: var(--cobalt); background: var(--cobalt-wash); box-shadow: inset 0 0 0 1px var(--cobalt); } .bs__tier[aria-pressed="true"] .bs__tier-id b { font-weight: 600; } /* Besparelsen står ved siden af tier-prisen, ikke som badge — badges er støj når 4 ud af 5 rækker har en. */ .bs__save { color: var(--moss); font-weight: 500; } /* ---- Fod (antal + sum + CTA) ---------------------------------------- */ .bs__foot { flex: 0 0 auto; border-top: 1.5px solid var(--ink); padding: 12px 16px 16px; display: grid; gap: 10px; background: var(--snow); } /* env() kun som EFTERFØLGENDE deklaration: uden viewport-fit=cover er alle safe-area-inset 0, og en env() uden gyldig værdi er invalid at computed-value time — så ville padding-bottom falde tilbage til initial (0), ikke til 16px. */ @supports (padding: max(0px)) { .bs__foot { padding-bottom: max(16px, env(safe-area-inset-bottom, 0px)); } } .bs__qtyrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .bs__qtylbl { font-size: var(--t-body-s); color: var(--ink-soft); } .bs__qty { display: flex; align-items: stretch; border: 1.5px solid var(--ink); background: var(--paper); } .bs__step { width: 48px; height: 48px; border: 0; background: none; cursor: pointer; font-size: 18px; line-height: 1; color: var(--ink); padding: 0; } .bs__step:disabled { color: var(--ink-faint); cursor: default; } .bs__input { width: 72px; height: 48px; border: 0; border-left: 1.5px solid var(--line); border-right: 1.5px solid var(--line); text-align: center; font-family: var(--font-mono); /* 16px er bærende: alt derunder får iOS Safari til at zoome ved fokus, og i en bundforankret sheet skubber zoomen CTA'en uden for skærmen. */ font-size: 16px; font-variant-numeric: tabular-nums; background: none; -moz-appearance: textfield; appearance: textfield; } .bs__input::-webkit-outer-spin-button, .bs__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .bs__sum { margin: 0; font-family: var(--font-mono); font-size: var(--t-mono); color: var(--ink-soft); font-variant-numeric: tabular-nums; display: flex; justify-content: space-between; gap: 12px; } .bs__sum b { font-weight: 600; color: var(--ink); } .bs__err { margin: 0; padding: 8px 10px; border: 1.5px solid var(--rust); color: var(--rust); font-size: var(--t-body-s); } .bs__err[hidden] { display: none; } .bs__add { height: 56px; width: 100%; border: 1.5px solid var(--cobalt); background: var(--cobalt); color: var(--snow); font-family: var(--font-sans); font-size: var(--t-body-s); font-weight: 500; letter-spacing: 0.01em; cursor: pointer; padding: 0 16px; } .bs__add[disabled] { opacity: 0.65; cursor: default; } .bs__add[data-state="ok"] { background: var(--moss); border-color: var(--moss); } /* Scrim under det ikke-modale desktop-panel. Findes ikke på mobil — dér giver showModal() os ::backdrop og inert baggrund gratis. */ .bs-scrim { position: fixed; inset: 0; z-index: 60; } /* ---- Toast (mobil kvittering i stedet for kurv-flyout) --------------- */ .jsl-toast { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 70; display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 16px; background: var(--ink); color: var(--snow); border: 1.5px solid var(--ink); opacity: 0; translate: 0 8px; transition: opacity var(--d-fast) var(--ease), translate var(--d-fast) var(--ease); } .jsl-toast[hidden] { display: none; } .jsl-toast.is-open { opacity: 1; translate: 0 0; } /* R17: på mus er toasten nu kvitteringen for HVERT køb (kurv-flyouten åbner sig ikke længere selv). En sort bjælke på 1408 px tværs over bunden af en 1440 px skærm er ikke en diskret kvittering — den er en afbrydelse, altså præcis den friktion vi lige fjernede. Bundet til højre hjørne, hvor kurv-ikonet i den sticky header også sidder, så øjet bevæger sig den vej varen er på vej. */ @media not all and (pointer: coarse) { .jsl-toast { left: auto; right: 20px; bottom: 20px; max-width: 360px; } } .jsl-toast__msg { flex: 1 1 auto; font-size: var(--t-body-s); } .jsl-toast__cta { flex: 0 0 auto; min-height: 44px; padding: 0 14px; border: 1.5px solid var(--snow); background: none; color: var(--snow); font: inherit; font-size: var(--t-body-s); cursor: pointer; } /* ========================================================================== Desktop: ankret panel i stedet for bundsheet. Placering (left/top/width) sættes af JS ud fra kortets rect — CSS'en her giver kun form. @position-try er fravalgt: første Safari-support er 26.0, og en fallback-sti ville alligevel skulle skrives i JS. R17: `(pointer: fine)` -> `not all and (pointer: coarse)`, så CSS-formen og JS'ens else-gren dækker nøjagtig samme mængde enheder. Se toppen af filen. ========================================================================== */ @media not all and (pointer: coarse) { .bs { /* JS sætter left/top/width inline ud fra kortets rect. Panelet er IKKE fuldskærm her: desktop bruger show() (ikke-modal), så baggrunden er ikke inert, og klik-uden-for fanges af .bs-scrim i stedet. */ inset: auto; top: 0; left: 0; width: 340px; max-height: min(70vh, 560px); justify-content: flex-start; box-shadow: 0 12px 32px rgba(13, 16, 25, 0.16); } .bs__inner { max-height: none; border: 1.5px solid var(--ink); translate: 0 -6px; opacity: 0; transition: translate var(--d-fast) var(--ease), opacity var(--d-fast) var(--ease); } .bs.is-open .bs__inner { translate: 0 0; opacity: 1; } .bs__head { grid-template-columns: 44px 1fr 36px; padding: 12px 14px; } .bs__thumb { width: 44px; height: 44px; } .bs__x { width: 36px; height: 36px; } .bs__tiers { padding: 10px 14px; gap: 6px; } .bs__tier { min-height: 52px; grid-template-columns: 32px 1fr auto; gap: 10px; padding: 8px 10px; } .bs__tier img { width: 32px; height: 32px; } .bs__tier:hover { border-color: var(--ink); } .bs__foot { padding: 10px 14px 14px; gap: 8px; } .bs__step { width: 40px; height: 40px; } .bs__input { width: 64px; height: 40px; } .bs__add { height: 44px; } .bs__add:hover:not([disabled]) { background: var(--cobalt-deep); border-color: var(--cobalt-deep); } }