/* ==================================================================
   Dalafisk mobile menu — the design's `.menypanel`
   ==================================================================
   Loaded by snippets/custom-header-style.liquid.
   Markup: snippets/dalafisk-header-mobile-menu.liquid.

   The two-level slide is Pinnacle's (assets/header.js drives `details.link-container`
   and `ul.sub-menu` through .menu-opening / .submenu-open, and assets/mobile-menu.css
   owns the transform). Nothing here touches that mechanism — these rules restyle
   the rows, the header, the promo card and the account block, and add the glass
   backdrop the design uses.

   Scoped `.dalafisk-mobile-menu` throughout so Pinnacle's own drawer, which
   still serves every other header style, is unaffected.
   ================================================================== */

.dalafisk-mobile-menu {
	background: var(--dalafisk-white);
}

/* ---------- the panel covers the whole screen ----------
   The design's drawer is `position: fixed; top: 0; bottom: 0; z-index: 120` —
   it sits OVER the announcement bar and the header, which is why it carries a
   wordmark and a close X of its own.

   Pinnacle hangs it off the header instead: `.mobile-menu-drawer { position:
   absolute; top: 100% }` (app.css:1387) with
   `height: calc(100dvh - (100% + var(--header-offset)))`. Measured top 74px, so
   the announcement bar and the whole header stayed visible above the panel —
   and since the panel has its own brand row, the page showed two stacked header
   bars with two different marks.

   `inset` replaces Pinnacle's top/height in one declaration; `height: auto` is
   still needed because its `height` is set separately and would otherwise win
   over the inset. */
.dalafisk-mobile-menu.mobile-menu-drawer {
	position: fixed;
	inset: 0;
	height: auto;
	max-height: none;
	z-index: 120;
	border-top: 0;

	/* ---------- the open/close motion ----------
	   The design slides the panel in from the left edge:
	       .drawer    { transition: transform .38s cubic-bezier(.22,1,.36,1) }
	       .menypanel { transform: translateX(-100%) }
	       .menypanel[data-oppen="1"] { transform: none }
	   Pinnacle instead FADES it — `opacity 0 -> 1` over `.25s
	   cubic-bezier(.104,.204,.492,1)` (mobile-menu.css:17).

	   AND IT CANNOT ANIMATE AT ALL AS SHIPPED: `.mobile-menu-drawer` is
	   `display: none` (app.css:2507 and 1387), and a `display` switch skips the
	   first frame, so the opacity transition never runs — the panel just appears.
	   The element therefore has to stay `display: block` and be held inert by
	   `visibility` instead. Same fix the cart drawer needed for its clip-path.

	   Opacity stays at 1: the design does not fade the panel, and a fade is
	   invisible anyway while the panel is still off-screen. `visibility` is
	   delayed to the end of the slide on the way out so the panel does not
	   vanish mid-animation. */
	display: block;
	visibility: hidden;
	opacity: 1;
	transform: translateX(-100%);
	will-change: transform;
	transition: transform .38s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .38s;
}

details.mobile-toggle-wrapper[open] .dalafisk-mobile-menu.mobile-menu-drawer {
	visibility: visible;
	opacity: 1;
	transform: none;
	transition: transform .38s cubic-bezier(.22, 1, .36, 1), visibility 0s;
}

/* ---------- level 2 ----------
   Pinnacle parks the submenu a full panel-width away (`translateX(100%)`,
   mobile-menu.css:162) and slides it across. The design does not travel: the
   incoming level fades up from 26px — `@keyframes nivafram { from { opacity: 0;
   transform: translateX(26px) } }` over `.34s`. The 100% park is replaced with
   26px; `visibility` still does the hiding, so the closed submenu is inert
   exactly as before and Pinnacle's `.menu-opening` remains what opens it.

   Doubled class for weight: `.mobile-menu .sub-menu` is also (0,2,0), and
   mobile-menu.css is fetched with `media="print"` and flipped to `all` on load,
   so its position in the cascade is not worth betting a transition on. */
.dalafisk-mobile-menu.dalafisk-mobile-menu .sub-menu {
	transform: translateX(26px);
	opacity: 0;
	transition: transform .34s cubic-bezier(.22, 1, .36, 1), opacity .34s cubic-bezier(.22, 1, .36, 1);
}

.dalafisk-mobile-menu.dalafisk-mobile-menu li .link-container[open].menu-opening > .sub-menu,
.no-js .dalafisk-mobile-menu.dalafisk-mobile-menu li .link-container[open] > .sub-menu {
	transform: none;
	opacity: 1;
}
.dalafisk-mobile-menu .dalafisk-mobile-menu__inner {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 0;
}

/* The design's phone drawer is full-width frosted glass rather than a panel
   with a visible right edge. */
@media (max-width: 767px) {
	.dalafisk-mobile-menu {
		width: 100vw;
		border-right: 0;
		background: rgba(255, 255, 255, .9);
		-webkit-backdrop-filter: blur(15px);
		backdrop-filter: blur(15px);
	}
}

/* ---------- title row ----------
   No bottom rule, unlike the cart panel's: `.menypanel .drawer__topp` clears
   the shared drawer border. */
.dalafisk-mobile-menu__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex: none;
	padding: 14px 18px;
}
/* `.marke` — the design's wordmark: the heading face, bold, uppercase, tracked
   out. `heading-font` is Pinnacle's own utility carrying the merchant's heading
   font (Prompt here), so this follows the theme setting rather than naming the
   family again.

   NOTE the TEXT is `{{ shop.name }}`, which on this store is
   "www.Dalafisk.se" — the design's mark reads "Dalafisk". Left as the shop name
   rather than hardcoded, so it cannot go stale; see the snippet. */
.dalafisk-mobile-menu__brand {
	font-size: 18px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--dalafisk-ink);
}
.dalafisk-mobile-menu__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 4px;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--dalafisk-ink);
	cursor: pointer;
}
.dalafisk-mobile-menu__close:hover {
	background: var(--dalafisk-canvas);
}

.dalafisk-mobile-menu__body {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

/* ---------- search row ---------- */
.dalafisk-mobile-menu__search {
	display: flex;
	align-items: center;
	gap: 10px;
	width: calc(100% - 36px);
	height: 42px;
	margin: 14px 18px;
	padding: 0 16px;
	border: 1.5px solid var(--dalafisk-ink);
	border-radius: 999px;
	background: none;
	font-size: 15px;
	color: #888;
	text-align: left;
	cursor: pointer;
}
.dalafisk-mobile-menu__search:hover {
	color: var(--dalafisk-ink);
}

/* ---------- rows ----------
   One rule serves the <summary> parent rows, the plain <a> rows and the
   "Visa allt i …" row, exactly as the design's single `.mrad` does. */
.dalafisk-mobile-menu .dalafisk-mobile-menu__list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.dalafisk-mobile-menu .dalafisk-mobile-menu__list > li:first-child > .dalafisk-mobile-menu__row,
.dalafisk-mobile-menu .dalafisk-mobile-menu__list > li:first-child > .link-container > .dalafisk-mobile-menu__row {
	border-top: 1px solid #e2e2e2;
}
.dalafisk-mobile-menu .dalafisk-mobile-menu__row {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 15px 18px;
	border-bottom: 1px solid #e2e2e2;
	font-size: 16px;
	line-height: 1.35;
	color: var(--dalafisk-ink);
	text-align: left;
	text-decoration: none;
	/* a <summary> shows a disclosure triangle in every engine */
	list-style: none;
	cursor: pointer;
}
.dalafisk-mobile-menu .dalafisk-mobile-menu__row::-webkit-details-marker,
.dalafisk-mobile-menu .dalafisk-mobile-menu__row::marker {
	display: none;
	content: '';
}
.dalafisk-mobile-menu .dalafisk-mobile-menu__row:hover {
	background: var(--dalafisk-footer-bg);
}
.dalafisk-mobile-menu .dalafisk-mobile-menu__row > svg {
	flex: none;
}
/* Both of these have to out-specify ONE Pinnacle rule, and it is worth naming
   because it is invisible from the markup:

     mobile-menu.css
     .mobile-menu li > a > span, .mobile-menu li summary > span {
       height: 100%; display: flex; align-items: center;
       line-height: 53px; flex-shrink: 0; margin-left: auto; }

   It targets any direct <span> child of a row — which is exactly what the label
   column and the chevron are. It was landing `line-height: 53px` on the label
   (rows measured 101.8px against the design's ~52) and `align-items: center` on
   a COLUMN flex, whose cross axis is horizontal, which centred every label.

   That selector is (0,1,2); a bare `.dalafisk-mobile-menu__text` is (0,1,0) and
   loses however the sheets are ordered. Scoping through the row makes it (0,3,0).
   Each inherited value is reset explicitly rather than left to chance. */
.dalafisk-mobile-menu .dalafisk-mobile-menu__row > .dalafisk-mobile-menu__text {
	flex: 1 1 auto;
	min-width: 0;
	height: auto;
	margin-left: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	line-height: 1.35;
}
.dalafisk-mobile-menu .dalafisk-mobile-menu__row > .dalafisk-mobile-menu__text small {
	font-size: 12px;
	line-height: 1.4;
	color: var(--dalafisk-text-5);
}
.dalafisk-mobile-menu .dalafisk-mobile-menu__row > .dalafisk-mobile-menu__chevron {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	height: auto;
	margin-left: 0;
	line-height: 1;
	color: var(--dalafisk-ink);
}

/* ---------- back row ----------
   The design's second-level `.drawer__topp` is the same row as the first
   level's: something on the left, the close X hard right. So this is a flex row
   with the back button taking the slack. */
.dalafisk-mobile-menu .parent-link-back {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 0 18px 0 0;
	border: 0;
}
.dalafisk-mobile-menu__back {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	flex: 1 1 auto;
	min-width: 0;
	padding: 14px 18px;
	border: 0;
	background: none;
	color: var(--dalafisk-ink);
	text-align: left;
	cursor: pointer;
}
/* Pinnacle gives buttons inside the drawer's lists `width: 100%`, which as a
   flex-basis made the X claim half the row — measured 173px wide, sitting mid-row
   instead of against the right edge. */
.dalafisk-mobile-menu .parent-link-back .dalafisk-mobile-menu__close {
	flex: none;
	width: auto;
}

.dalafisk-mobile-menu__back b {
	font-size: 16px;
	font-weight: 600;
}

/* ---------- promo card ---------- */
.dalafisk-mobile-menu__promo {
	display: flex;
	flex-direction: column;
	margin: 18px;
	overflow: hidden;
	background: var(--dalafisk-white);
	border: 1px solid var(--dalafisk-card-border);
	border-radius: 20px;
}
.dalafisk-mobile-menu__promo-media {
	height: 120px;
	background: var(--dalafisk-hatch);
}
.dalafisk-mobile-menu__promo-media img {
	width: 100%;
	height: 120px;
	object-fit: cover;
}
.dalafisk-mobile-menu__promo-text {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 14px;
}
.dalafisk-mobile-menu__promo-text b {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 16px;
	font-weight: 600;
}
.dalafisk-mobile-menu__promo-text span {
	font-size: 13px;
	color: var(--dalafisk-text-4);
}
.dalafisk-mobile-menu__promo-text .dalafisk-button {
	margin-top: 4px;
	/* app.css pins .button to height:46px; the design's card button is 9px of
	   padding tall. Same override the collection load-more needed. */
	height: auto;
	padding: 9px;
	font-size: 14px;
}

/* ---------- CTA ---------- */
.dalafisk-mobile-menu__cta {
	padding: 16px 18px;
}
.dalafisk-mobile-menu__cta .dalafisk-button {
	width: 100%;
	height: auto;
	padding: 13px;
	font-size: 16px;
}

/* ---------- account block ---------- */
.dalafisk-mobile-menu__account {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 14px 18px 24px;
	background: var(--dalafisk-footer-bg);
	border-top: 1px solid #e2e2e2;
}
/* The design lightens this block on phones so it does not break the glass at
   the drawer's bottom edge. */
@media (max-width: 767px) {
	.dalafisk-mobile-menu__account {
		background: rgba(247, 247, 247, .8);
	}
}
.dalafisk-mobile-menu__account ul {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 15px;
}
.dalafisk-mobile-menu__account li a {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--dalafisk-ink);
	text-decoration: none;
}
.dalafisk-mobile-menu__account li a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}
.dalafisk-mobile-menu__account ul:empty {
	display: none;
}
.dalafisk-mobile-menu__promise {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding-top: 6px;
	border-top: 1px solid #e2e2e2;
	font-size: 13px;
	color: var(--dalafisk-text-3);
}
/* With no account links above it the rule would be a stray line. */
.dalafisk-mobile-menu__account ul:empty + .dalafisk-mobile-menu__promise {
	padding-top: 0;
	border-top: 0;
}

/* ---------- the level's own entrance ----------
   The design animates the LEVEL as one block — `[data-niva]` gets `nivafram`,
   opacity 0 and 26px to the right, easing home over .34s, on top of the panel's
   own slide — AND THEN staggers the rows inside it:

     .menypanel[data-oppen="1"] .msok, .mrad, .mgrupp, .mcta, .mkonto, .mpromo
       { animation: radin .3s cubic-bezier(.22,1,.36,1) backwards }
     @keyframes radin { from { opacity:0; transform:translateY(7px) } }

   with a per-row delay written from JS — `bas + Math.min(i, 11) * 24` ms, where
   `bas` is 200ms on open (so the rows wait for the drawer to finish sliding in)
   and 0 on a level change inside it. That is the "i html skissen är det
   staggering animation när meny öppnas" note; an earlier read of this file
   concluded the design's rows do not animate individually, which is wrong —
   `stegraRader()` in HTMLdesigns is exactly that stagger.

   dalafisk-header.js writes the delays. The 200ms default below keeps the
   sequence sane if it never runs.

   ALL ARE GATED ON THE DRAWER BEING OPEN, and the design says why in its own
   comment: "annars hinner de spelas medan lådan fortfarande står utanför
   skärmen och första öppningen blir stum" — otherwise they finish playing while
   the panel is still off-screen and the first open looks dead. */
@keyframes dalafisk-menu-level-in {
	from { opacity: 0; transform: translateX(26px); }
	to { opacity: 1; transform: none; }
}
@keyframes dalafisk-menu-row-in {
	from { opacity: 0; transform: translateY(7px); }
	to { opacity: 1; transform: none; }
}
details.mobile-toggle-wrapper[open] .dalafisk-mobile-menu__inner {
	animation: dalafisk-menu-level-in .34s cubic-bezier(.22, 1, .36, 1) backwards;
}
/* Level 1's rows, in the order they read: the search button, every top-level
   item, the CTA and the account block. `> li` is deliberate — a sub-menu is a
   `ul.sub-menu.dalafisk-mobile-menu__list` nested inside one of these `li`s and
   is staggered on its own when it opens, not from here. */
details.mobile-toggle-wrapper[open] .dalafisk-mobile-menu__search,
details.mobile-toggle-wrapper[open] .dalafisk-mobile-menu__body > .dalafisk-mobile-menu__list > li,
details.mobile-toggle-wrapper[open] .dalafisk-mobile-menu__cta,
details.mobile-toggle-wrapper[open] .dalafisk-mobile-menu__account,
details.mobile-toggle-wrapper[open] .dalafisk-mobile-menu__list .sub-menu > li:not(.parent-link-back),
details.mobile-toggle-wrapper[open] .dalafisk-mobile-menu__promo {
	animation: dalafisk-menu-row-in .3s cubic-bezier(.22, 1, .36, 1) backwards;
	animation-delay: 200ms;
}
@media (prefers-reduced-motion: reduce) {
	/* The OPEN-state selector re-declares the transition at (0,4,1), so resetting
	   only the base rule left the slide running — measured `transitionDuration:
	   0.38s` with reduced motion on. Both states have to be listed. */
	.dalafisk-mobile-menu.mobile-menu-drawer,
	details.mobile-toggle-wrapper[open] .dalafisk-mobile-menu.mobile-menu-drawer,
	.dalafisk-mobile-menu.dalafisk-mobile-menu .sub-menu {
		transition: none;
	}
	details.mobile-toggle-wrapper[open] .dalafisk-mobile-menu__inner,
	details.mobile-toggle-wrapper[open] .dalafisk-mobile-menu__search,
	details.mobile-toggle-wrapper[open] .dalafisk-mobile-menu__body > .dalafisk-mobile-menu__list > li,
	details.mobile-toggle-wrapper[open] .dalafisk-mobile-menu__cta,
	details.mobile-toggle-wrapper[open] .dalafisk-mobile-menu__account,
	details.mobile-toggle-wrapper[open] .dalafisk-mobile-menu__list .sub-menu > li:not(.parent-link-back),
	details.mobile-toggle-wrapper[open] .dalafisk-mobile-menu__promo {
		animation: none;
	}
}