/* ==================================================================
   Dalafisk cart panel — the design's `.korgpanel`
   ==================================================================
   Loaded by snippets/custom-header-style.liquid, after custom-header-style.css.
   Markup: snippets/dalafisk-cart-drawer.liquid.

   SHAPE. The design's cart is NOT a side drawer: `.korgpanel` shares its shell
   with `.sokpanel` — pinned to the tools pill, the pill acting as its top row,
   `position: fixed` on phones. app.css already gives `.cart-drawer`
   `position: absolute; right: 0; top: calc(100% + 10px)`, so this is a re-anchor
   rather than a change of positioning scheme.

   SPECIFICITY. custom-header-style.css already carries `.header.customHeaderStyle
   .product-cart-item` rules written for Pinnacle's drawer, and this markup keeps
   those class names so app.js still works. Row rules here are therefore scoped
   `.header.customHeaderStyle .dalafisk-cart …` (three classes) so they win
   regardless of file order.
   ================================================================== */

/* ---------- the panel ---------- */
.header.customHeaderStyle .dalafisk-cart {
	/* Anchored to the pill's TOP-RIGHT corner and grown leftward — NOT stretched
	   to the pill's box the way .dalafisk-search-empty is.

	   That difference is real, not an inconsistency. The pill GROWS to the search
	   panel's width while search is open (408px in the design, 414px here), so
	   the search panel can borrow it. Nothing grows the pill for the cart — it
	   stays at its resting 150px, measured — and the design's `.korgpanel`
	   carries its own width while sharing the pill's right edge.

	   -1px rather than 0 because absolute offsets resolve against the pill's
	   PADDING box; pulling out by the border width lands the panel on its border
	   box exactly and the panel's own 1px border takes its place. */
	top: -1px;
	left: auto;
	right: -1px;
	/* 89, not app.css's 92, and the same layer the search panel uses: the pill's
	   own icons are lifted to z-91 by custom-header-style.css so they sit ON the
	   open panel, which is what the design's 54px top row is. At 92 the panel
	   covered the account and cart icons instead. */
	z-index: 89;
	/* app.css caps its own dropdown at 420px; the design's panel is 408. Capped
	   to the viewport so a narrow desktop window cannot push it off the left. */
	width: 408px;
	max-width: calc(100vw - 70px);
	max-height: calc(100vh - 110px);
	/* THE PANEL DOES NOT SCROLL — the row list inside it does. The design scrolls
	   the whole `.korgpanel`, which takes the summary and the two buttons with
	   it: with enough lines in the basket, "Till kassan" was below the fold of a
	   panel that is itself the fold. The user asked for it pinned (2026-09-20).
	   So the panel is a bounded flex column, every part of it is `flex: none`,
	   and `.dalafisk-cart__rows` is the one item allowed to shrink and scroll.

	   `overflow-y: auto` is kept purely as the last resort, and in normal use it
	   never fires: the rows shrink first, so the panel only overflows once they
	   are at zero and the fixed parts still do not fit — a viewport under about
	   510px tall, which in practice means a phone held sideways. Without it the
	   summary would simply be cut off there, and "Till kassan" unreachable, which
	   is the very thing this change is for. */
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 0;
	background: var(--dalafisk-white);
	border: 1px solid var(--dalafisk-card-border);
	border-radius: 24px;
	box-shadow: 0 18px 44px rgba(26, 26, 26, .13);
}

/* The design rolls the panel out with clip-path. app.css hides the closed
   drawer with `.cart-drawer[inert] { display: none }`, which cannot transition,
   so the closed state is rebuilt here as an invisible-but-present box.
   `inert` still blocks focus and pointer events natively, so nothing is
   reachable while it is "hidden" — the attribute does the real work and this is
   only about how it looks getting there. */
.header.customHeaderStyle .dalafisk-cart[inert] {
	/* `flex`, matching the open state — this rule exists only to beat app.css's
	   `.cart-drawer[inert] { display: none }`, and `block` here would have
	   swapped the panel's layout model on the same frame the reveal starts. */
	display: flex;
	opacity: 0;
	visibility: hidden;
	clip-path: inset(0 -70px 100% -70px round 24px);
	transition: clip-path .28s cubic-bezier(.4, 0, .6, 1), opacity .22s ease, visibility 0s .28s;
}
.header.customHeaderStyle .dalafisk-cart {
	opacity: 1;
	visibility: visible;
	clip-path: inset(0 -70px -70px -70px round 24px);
	transition: clip-path .6s cubic-bezier(.22, 1, .36, 1), opacity .34s ease, visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
	.header.customHeaderStyle .dalafisk-cart,
	.header.customHeaderStyle .dalafisk-cart[inert] {
		transition: none;
	}
}

.header.customHeaderStyle .dalafisk-cart .cart-drawer--inner {
	display: flex;
	flex-direction: column;
	/* Both of these carry the panel's height limit down to the row list: this
	   element is the panel's only child and app.js replaces its innerHTML on
	   every quantity change, so the scroll has to live one level further in.
	   `min-height: 0` overrides the automatic minimum size a flex item gets from
	   its content — without it nothing below can shrink and the panel grows past
	   its own max-height instead. */
	flex: 1 1 auto;
	min-height: 0;
}

/* ---------- title row ----------
   The pill's own icons sit ON this row — that is what the design's 54px height
   and large right inset are for. The inset must clear the WHOLE pill, which sits
   on this row's right end — derived, then confirmed against the design:
     1px border + 5px pill padding + 42 icon + 6 gap + 42 icon + 6 gap + 42 icon
     + 1px border = 150px (measured 150.0), plus 8px so the close button does not
     touch the cart icon — which lands exactly on the design's own 158px.
   If a fourth icon is ever added to the pill, this is the number that changes. */
.header.customHeaderStyle .dalafisk-cart__top {
	display: flex;
	align-items: center;
	/* The title is this row's only child now that the close button is gone; the
	   right inset still has to clear the pill's icons, which sit on this row. */
	gap: 10px;
	height: 54px;
	padding: 0 158px 0 18px;
	border-bottom: 1px solid #e2e2e2;
	flex: none;
}
.header.customHeaderStyle .dalafisk-cart__title {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--dalafisk-ink);
	/* The row is a fixed 54px and the panel does not grow to fit its title, so
	   anything unexpectedly long — a missing-translation string, a very long
	   shop name — would spill down over the rows below instead of being cut.
	   A flex item defaults to min-width:auto and refuses to shrink below its
	   content, which is what let that happen. */
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* ---------- shipping meter ---------- */
.header.customHeaderStyle .dalafisk-cart__shipping {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 16px 22px 0;
	flex: none;
}
.header.customHeaderStyle .dalafisk-cart__shipping-row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 13px;
	line-height: 1.4;
}
.header.customHeaderStyle .dalafisk-cart__shipping-row b {
	font-weight: 600;
}
.header.customHeaderStyle .dalafisk-cart__shipping-row span {
	color: var(--dalafisk-text-4);
}
.header.customHeaderStyle .dalafisk-cart__meter {
	height: 5px;
	background: #e4e4e4;
	border-radius: 3px;
	overflow: hidden;
}
.header.customHeaderStyle .dalafisk-cart__meter-fill {
	height: 100%;
	background: var(--dalafisk-ink);
	transition: width .3s;
}
@media (prefers-reduced-motion: reduce) {
	.header.customHeaderStyle .dalafisk-cart__meter-fill {
		transition: none;
	}
}

/* ---------- rows ----------
   THE ONLY SCROLLING PART OF THE PANEL. app.css caps `.cart-drawer--content` at
   a flat 310/320px and pads it 15/20px; that cap is dropped, because the list
   should use whatever height the panel has left after the title, the shipping
   meter and the summary — not a fixed number that is too short on a tall screen
   and too tall on a short one. The design pads the row list 22px.

   `flex: 0 1 auto` — shrink, never grow. With no items to speak of the panel is
   still only as tall as its contents and the summary sits straight under the
   last row; growing would push it to the bottom of an empty box. */
.header.customHeaderStyle .dalafisk-cart .dalafisk-cart__rows {
	max-height: none;
	flex: 0 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	display: flex;
	flex-direction: column;
	padding: 6px 22px 0;
}
/* The 12px that used to be the summary's `margin-top` lives here instead, so it
   scrolls WITH the list: as the summary's own top border, it left a bare white
   band between the divider and a row cut off mid-scroll. As bottom padding it
   is the last row's breathing room when the list is short and scroll runway
   when it is not. Not on the empty state, which brings its own 48px. */
.header.customHeaderStyle .dalafisk-cart:not(.cart-drawer--empty) .dalafisk-cart__rows {
	padding-bottom: 12px;
}
/* A GRID, NOT A FLEX ROW, and the stepper is why.

   The design lays the row out as `flex` with the quantity controls nested
   inside the text column (`.rad__mitt`), which gets whatever is left after the
   64px thumbnail and the price — 107px at a 375px viewport, 51px at 320. The
   controls need 137 (stepper 91 + gap 12 + "Ta bort" 34), and the stepper is
   `overflow: hidden`, so the surplus was cut off rather than wrapped: 82% of
   the "+" button was gone at 375 and the entire control at 320, where
   `elementFromPoint` over the plus returned its parent. You could lower a
   quantity but never raise it. Measured in the design at 320 as well — stepper
   squeezed from 87 to 26, plus 0% visible — so there is no reference layout to
   port; the mockup was never opened that narrow.

   The controls are a sibling of the text column now (see the comment in
   snippets/dalafisk-cart-drawer.liquid) and the row gives them a line of their
   own, the full width of the card:

     thumb | name     | price
     controls ————————————————    stepper hard left under the thumbnail,
                                  "Ta bort" pushed to the right edge

   The controls USED to start at the `info` column, which indented the stepper
   past the 64px thumbnail and left "Ta bort" floating beside it in the middle
   of the card. That was the design's arrangement; the merchant asked for the
   stepper under the image and the remove link out at the edge instead. The
   narrow-viewport override that already did exactly this below 360px is gone
   with it — one layout at every width now.

   `align-items: start` keeps the thumbnail at the top of its row. */
.header.customHeaderStyle .dalafisk-cart .dalafisk-cart__row {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr) auto;
	grid-template-areas:
		"thumb    info     price"
		"controls controls controls";
	align-items: start;
	column-gap: 12px;
	row-gap: 7px;
	padding: 14px 0;
	margin: 0;
	border-top: 1px solid #e2e2e2;
}
.header.customHeaderStyle .dalafisk-cart .dalafisk-cart__thumb {
	grid-area: thumb;
}
.header.customHeaderStyle .dalafisk-cart .dalafisk-cart__mid {
	grid-area: info;
}
.header.customHeaderStyle .dalafisk-cart .dalafisk-cart__price {
	grid-area: price;
}
.header.customHeaderStyle .dalafisk-cart .dalafisk-cart__controls {
	grid-area: controls;
}
.header.customHeaderStyle .dalafisk-cart .dalafisk-cart__row:first-child {
	border-top: 0;
}
.header.customHeaderStyle .dalafisk-cart .dalafisk-cart__thumb,
.header.customHeaderStyle .dalafisk-cart .dalafisk-cart__thumb a,
.header.customHeaderStyle .dalafisk-cart .dalafisk-cart__thumb img {
	width: 64px;
	height: 64px;
	min-width: 64px;
	border-radius: 14px;
	object-fit: cover;
}
.header.customHeaderStyle .dalafisk-cart .dalafisk-cart__thumb {
	position: relative;
	flex: none;
	overflow: hidden;
}
.header.customHeaderStyle .dalafisk-cart .dalafisk-cart__thumb-placeholder {
	width: 64px;
	height: 64px;
	border-radius: 14px;
	background: var(--dalafisk-hatch);
}
.header.customHeaderStyle .dalafisk-cart .dalafisk-cart__mid {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 5px;
}
/* The row badge is the product-card badge reused, at the design's smaller
   `.minipill` size — same icon and same collection-priority label.

   `position: static` FIRST, and it is not cosmetic: dalafisk-product-card.css
   gives the badge `position: absolute; top: 16px; left: 10px` so it can sit on
   a card's photo corner. Nothing in a cart row is positioned, so it resolved
   against the PANEL instead and every row's badge stacked on the title. Same
   family as the thumbnail rail on the product page — an absolute box with no
   intended ancestor silently finds a distant one. */
.header.customHeaderStyle .dalafisk-cart .dalafisk-cart__mid .dalafisk-product-card__badge {
	position: static;
	top: auto;
	left: auto;
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 1px 7px;
	border: 1px solid var(--dalafisk-pill-border);
	border-radius: 999px;
	background: var(--dalafisk-white);
	font-size: 10px;
	line-height: 1.5;
	color: var(--dalafisk-text-3);
}
.header.customHeaderStyle .dalafisk-cart .dalafisk-cart__name {
	font-size: 15px;
	line-height: 1.35;
	color: var(--dalafisk-ink);
	text-decoration: none;
}
.header.customHeaderStyle .dalafisk-cart .dalafisk-cart__name:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}
.header.customHeaderStyle .dalafisk-cart .dalafisk-cart__meta {
	font-size: 12px;
	line-height: 1.4;
	color: var(--dalafisk-text-4);
}
.header.customHeaderStyle .dalafisk-cart .dalafisk-cart__discounts {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 12px;
	color: var(--dalafisk-text-4);
}

/* ---------- stepper + remove ----------
   app.css positions `.quantity .minus` / `.plus` ABSOLUTELY into the control's
   `padding: 0 30px`, which collapses this pill exactly as it did on the product
   page. All three children are put back in flow. */
/* The stepper sits hard left, "Ta bort" is pushed to the opposite edge. */
.header.customHeaderStyle .dalafisk-cart .dalafisk-cart__controls {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.header.customHeaderStyle .dalafisk-cart .dalafisk-cart__stepper {
	display: inline-flex;
	align-items: center;
	width: auto;
	height: auto;
	min-height: 0;
	padding: 0;
	border: 1.5px solid var(--dalafisk-ink);
	border-radius: 999px;
	background: none;
	overflow: hidden;
	/* A step down from the product page's stepper: this one is a secondary
	   control on a 64px row, not the buy box. */
	font-size: 14px;
}
.header.customHeaderStyle .dalafisk-cart .dalafisk-cart__stepper .minus,
.header.customHeaderStyle .dalafisk-cart .dalafisk-cart__stepper .plus {
	position: static;
	width: auto;
	height: auto;
	padding: 5px 10px;
	border: 0;
	background: none;
	color: var(--dalafisk-ink);
	line-height: 1;
	cursor: pointer;
	transform: none;
	transition: background .15s;
}
/* A TINT, NOT A FILL. The design says `.stegare button:hover { background: ink;
   color: white }`, and inside a 999px pill with `overflow: hidden` that paints
   half the control solid black with a hard vertical edge down the middle — the
   rounded outer corner makes the straight inner one worse, not better. The
   cart PAGE already hovers on --dalafisk-canvas (dalafisk-cart-page.css); this
   is the same control, so it now reads the same. Porting the design's declared
   value here would keep two different answers to one question. */
.header.customHeaderStyle .dalafisk-cart .dalafisk-cart__stepper .minus:hover,
.header.customHeaderStyle .dalafisk-cart .dalafisk-cart__stepper .plus:hover {
	background: var(--dalafisk-canvas);
}
/* Disabled steppers must not look clickable. Pinnacle disables `minus` at 1. */
.header.customHeaderStyle .dalafisk-cart .dalafisk-cart__stepper .minus:disabled,
.header.customHeaderStyle .dalafisk-cart .dalafisk-cart__stepper .plus:disabled {
	color: var(--dalafisk-text-5);
	cursor: not-allowed;
}
.header.customHeaderStyle .dalafisk-cart .dalafisk-cart__stepper .minus:disabled:hover,
.header.customHeaderStyle .dalafisk-cart .dalafisk-cart__stepper .plus:disabled:hover {
	background: none;
}
.header.customHeaderStyle .dalafisk-cart .dalafisk-cart__stepper .minus svg,
.header.customHeaderStyle .dalafisk-cart .dalafisk-cart__stepper .plus svg {
	display: block;
	width: 10px;
	height: 10px;
}
/* A FIXED BOX, not `auto`. The design's counter is a `<span>` that shrink-wraps
   to `min-width: 18px`; this is an `<input type="number">`, and `width: auto` on
   one of those means its INTRINSIC size — about 110px. That was invisible while
   the row was squeezing the whole stepper flat, and the moment the row stopped
   squeezing it the pill blew out to 168px with the number adrift in the middle.
   26px is the design's 18px box plus its 8px of padding, so the pill draws the
   size it does there. */
.header.customHeaderStyle .dalafisk-cart .dalafisk-cart__stepper .qty {
	width: 24px;
	min-width: 18px;
	height: auto;
	padding: 5px 3px;
	border: 0;
	background: none;
	text-align: center;
	font-size: 14px;
	font-variant-numeric: tabular-nums;
	color: var(--dalafisk-ink);
	/* Number spinners would break the pill's 18px column. */
	-moz-appearance: textfield;
	appearance: textfield;
}
.header.customHeaderStyle .dalafisk-cart .dalafisk-cart__stepper .qty::-webkit-outer-spin-button,
.header.customHeaderStyle .dalafisk-cart .dalafisk-cart__stepper .qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
/* Pinnacle's remove control is a trash glyph; the design's is the word
   "Ta bort" with a hairline under it. */
.header.customHeaderStyle .dalafisk-cart .dalafisk-cart__remove {
	margin: 0;
	padding: 0;
	border: 0;
	border-bottom: 1px solid #bbb;
	border-radius: 0;
	background: none;
	font-size: 12px;
	line-height: 1.3;
	color: var(--dalafisk-text-5);
	text-decoration: none;
	/* "Ta bort" is two words in a narrow flex row and was breaking across two
	   lines, which made the row 32px tall instead of the design's 16px. */
	white-space: nowrap;
}
.header.customHeaderStyle .dalafisk-cart .dalafisk-cart__remove:hover {
	color: var(--dalafisk-ink);
	border-bottom-color: var(--dalafisk-ink);
}
.header.customHeaderStyle .dalafisk-cart .dalafisk-cart__remove svg {
	display: none;
}

/* ---------- line price ---------- */
.header.customHeaderStyle .dalafisk-cart .dalafisk-cart__price {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 4px;
	flex: none;
	text-align: right;
}
.header.customHeaderStyle .dalafisk-cart .dalafisk-cart__price b {
	font-size: 15px;
	font-weight: 600;
	white-space: nowrap;
}
.header.customHeaderStyle .dalafisk-cart .dalafisk-cart__price del {
	color: var(--dalafisk-text-5);
	font-weight: 400;
}
.header.customHeaderStyle .dalafisk-cart .dalafisk-cart__price span {
	font-size: 11px;
	color: var(--dalafisk-text-5);
	white-space: nowrap;
}

/* ---------- empty state ---------- */
.header.customHeaderStyle .dalafisk-cart .dalafisk-cart__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding: 48px 22px;
	text-align: center;
	color: var(--dalafisk-text-3);
}
.header.customHeaderStyle .dalafisk-cart .dalafisk-cart__empty-title {
	margin: 0;
	font-size: 17px;
	color: var(--dalafisk-ink);
}
.header.customHeaderStyle .dalafisk-cart .dalafisk-cart__empty-text {
	margin: 0;
	font-size: 14px;
}
.header.customHeaderStyle .dalafisk-cart .dalafisk-cart__empty-cta {
	margin-top: 6px;
}

/* ---------- summary ---------- */
.header.customHeaderStyle .dalafisk-cart .dalafisk-cart__summary {
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex: none;
	padding: 18px 22px 22px;
	border-top: 1px solid #e2e2e2;
	background: var(--dalafisk-white);
}
.header.customHeaderStyle .dalafisk-cart .dalafisk-cart__summary-rows {
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 14px;
}
.header.customHeaderStyle .dalafisk-cart .dalafisk-cart__summary-rows > div {
	display: flex;
	justify-content: space-between;
	gap: 12px;
}
.header.customHeaderStyle .dalafisk-cart .dalafisk-cart__summary-muted {
	color: var(--dalafisk-text-4);
}
.header.customHeaderStyle .dalafisk-cart .dalafisk-cart__summary-best {
	color: var(--dalafisk-ink);
}
.header.customHeaderStyle .dalafisk-cart .dalafisk-cart__summary-discount b {
	font-weight: 600;
}
.header.customHeaderStyle .dalafisk-cart .dalafisk-cart__summary-total {
	align-items: baseline;
	padding-top: 10px;
	border-top: 1px solid #e2e2e2;
}
.header.customHeaderStyle .dalafisk-cart .dalafisk-cart__summary-total b:first-child {
	font-size: 16px;
}
.header.customHeaderStyle .dalafisk-cart .dalafisk-cart__summary-total b:last-child {
	font-size: 20px;
}
.header.customHeaderStyle .dalafisk-cart .dalafisk-cart__summary form {
	margin: 0;
}
.header.customHeaderStyle .dalafisk-cart .dalafisk-cart__checkout,
.header.customHeaderStyle .dalafisk-cart .dalafisk-cart__delivery {
	/* app.css pins every .button to height:46px; these are padding-sized, as the
	   design's .btn is. Same fix the collection page's load-more needed. */
	width: 100%;
	height: auto;
	padding: 14px;
	font-size: 16px;
}
.header.customHeaderStyle .dalafisk-cart .dalafisk-cart__delivery {
	padding: 12px;
	font-size: 15px;
}
.header.customHeaderStyle .dalafisk-cart .dalafisk-cart--terms,
.header.customHeaderStyle .dalafisk-cart .cart-drawer--terms {
	margin: 0;
	font-size: 13px;
}

/* ---------- phones ----------
   Fixed, not absolute, for the same reason the search panel is: the pill's own
   contents must not be able to push the panel off the right edge. 35px matches
   the design's page inset, and the pill sits on the panel's top row exactly as
   it does on desktop. */
@media (max-width: 920px) {
	.header.customHeaderStyle .dalafisk-cart {
		position: fixed;
		/* `--dalafisk-header-top`, not `--dalafisk-chrome-top`: the latter is where
		   the header row sits AT REST, so opening the cart on a scrolled page left
		   this panel 40px below the pill it is supposed to hang from. Same fix as
		   the two search panels — see the token's note in custom-header-style.css. */
		top: calc(var(--dalafisk-header-top) + 14px);
		left: 35px;
		right: 35px;
		width: auto;
		/* `dvh` so the panel ends where the screen does, address bar and all. */
		max-height: calc(100vh - var(--dalafisk-header-top) - 40px);
		max-height: calc(100dvh - var(--dalafisk-header-top) - 40px);
		border: 0;
		box-shadow: 0 18px 44px rgba(26, 26, 26, .16);
	}
	/* Every icon in the pill sits over the panel's top row, which is what the
	   design's `.topp[data-korg="1"] .verktyg { position: relative; z-index: 131 }`
	   achieves there. Only `.thb-secondary-area` was already positioned, so the
	   account and cart icons came out on top while the hamburger and the search
	   toggle — both static — were painted over by `.dalafisk-cart__top`;
	   elementFromPoint over each of them returned the panel. That is the
	   "hamburger meny, sök ikon försvinner när cart öppnas" note: the buttons
	   were never hidden, they were buried.

	   The CHILDREN and not the pill, because custom-header-style.liquid renders
	   the drawer as a child of `.dalafisk-header__tools` (see the comment in
	   snippets/dalafisk-header-secondary-area.liquid). Lifting the pill would
	   take the panel up with it and change nothing inside. */
	.header.customHeaderStyle[data-dalafisk-cart] .thb-header-mobile-left,
	.header.customHeaderStyle[data-dalafisk-cart] .dalafisk-header__search-toggle,
	.header.customHeaderStyle[data-dalafisk-cart] .thb-secondary-area {
		position: relative;
		z-index: 131;
	}
	/* …so the panel's heading has to clear all four of them, not three. The pill
	   is right-aligned with the panel, so its own width is the inset: four 34px
	   icon boxes, three 5px gaps and 5px of pill padding on each side. */
	.header.customHeaderStyle .dalafisk-cart__top {
		padding-right: 166px;
	}
	/* The design folds the hanging sign away while the cart is open — its
	   `.topp[data-korg="1"] .marke { visibility: hidden }` — so the panel's top
	   row reads clean. It matters only here: on desktop the panel starts at
	   x=997 and never reaches the logo, but at 390 it spans 35→355 and the sign
	   sat across "Varukorg (3)". Mirrors what the search already does with
	   `[data-dalafisk-search] .logolink`. */
	.header.customHeaderStyle[data-dalafisk-cart] .logolink {
		display: none;
	}
	.header.customHeaderStyle .dalafisk-cart .dalafisk-cart__rows,
	.header.customHeaderStyle .dalafisk-cart .dalafisk-cart__shipping {
		padding-left: 18px;
		padding-right: 18px;
	}
	.header.customHeaderStyle .dalafisk-cart .dalafisk-cart__summary {
		padding: 16px 18px 20px;
	}
}

/* ---------- page lock ----------
   The design locks the page behind every open header panel:
     body[data-last="1"] { overflow: hidden }
   set whenever the search, the cart or the mobile menu is open.

   Without it the cart panel is `position: fixed` while the header that anchors
   it is not, so scrolling with the cart open slid the bar and the tools pill up
   the page and left the panel hanging in mid-air — the "om man öppnar cart och
   sen skrollar ner åker navbar upp men cart stannar kvar" note.

   assets/dalafisk-cart.js sets the class off the same `inert` observer that
   drives [data-dalafisk-cart], so it can never be left behind on a close path
   that does not fire an event. */
body.dalafisk-cart-locked {
	overflow: hidden;
}

/* ---------- add-to-cart motion ----------
   The design flies a few dots from the button into the cart icon, pops the
   count badge and jolts the icon. assets/dalafisk-cart.js creates the dots;
   everything else is these three rules. Motion only — no layout depends on it. */
.dalafisk-cart-fly {
	position: fixed;
	z-index: 200;
	width: 13px;
	height: 13px;
	margin: -6.5px 0 0 -6.5px;
	border-radius: 50%;
	background: var(--dalafisk-ink);
	pointer-events: none;
	will-change: transform, opacity;
}
.dalafisk-header__tools .thb-secondary-cart .thb-secondary-area--item-count {
	transition: transform .2s;
}
.dalafisk-header__tools .thb-secondary-cart .thb-secondary-area--item-count.dalafisk-cart-pop {
	transform: scale(1.35);
}
.dalafisk-header__tools .thb-secondary-cart.dalafisk-cart-hit {
	animation: dalafisk-cart-hit .34s cubic-bezier(.22, 1, .36, 1);
}
@keyframes dalafisk-cart-hit {
	0% { transform: scale(1); }
	38% { transform: scale(1.22); }
	100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
	.dalafisk-header__tools .thb-secondary-cart .thb-secondary-area--item-count,
	.dalafisk-header__tools .thb-secondary-cart.dalafisk-cart-hit {
		transition: none;
		animation: none;
	}
}

/* ---------- no focus ring on the panel itself ----------
   app.js `open()` calls `this.focus()` on <cart-drawer tabindex="-1"> so that
   keyboard and screen-reader users land inside the panel. With no rule of its
   own the element takes the browser's default `outline: auto`, and Chrome
   colours that with the OS accent colour — a green frame around the whole
   cart on one Mac, orange on another (reported 2026-09-22). The panel is a
   container, not a control: focus lands on it programmatically and there is
   nothing to "activate", so the ring only reads as a glitch. The close button,
   the quantity steppers, the postcode field and the links keep their own
   focus styles, which is where keyboard users actually need them. */
#Cart-Drawer:focus,
#Cart-Drawer:focus-visible {
	outline: none;
}