/*
 * The shell: the top line, the header, menus, the pin-code sheet, breadcrumbs, footer, phone tab bar, "Chat & FAQs".
 * SITE-1 (27 Oct 2026, his yes to mockups/website-2026-10-27): the header is drawn twice, for phones (under 990 px:
 * W1 the turning line, W5 the one sticky row, W4 the location line and its pop-over) and for desktop (W6 the navy bar,
 * the menu bar, W2's facts line). Values from the mock-up's assets/mock.css. The footer parts below are the shop's own
 * code, carried over.
 */

/* ---------- W1: one 32 px line, one message at a time; the dots say there are more ---------- */
.cp-announce { position: relative; height: 32px; overflow: hidden; background: #eaf3fa; color: var(--cp-navy); font-size: 12.5px; font-weight: 500; line-height: 32px; }
.cp-announce__in { display: grid; height: 32px; padding: 0 34px 0 12px; }
.cp-announce__msg { grid-area: 1 / 1; min-width: 0; margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: center; opacity: 0; visibility: hidden; }
.cp-announce__msg.is-on { opacity: 1; visibility: visible; }
.cp-announce__msg a, .cp-announce__msg span { color: var(--cp-navy); text-decoration: none; }
.cp-announce__msg b { color: #b23a0b; font-weight: 600; }
.cp-announce :focus-visible { outline: 2px solid var(--cp-navy); outline-offset: -2px; }
.cp-announce__dots { position: absolute; top: 14px; right: 10px; display: flex; gap: 3px; }
.cp-announce__dots i { width: 4px; height: 4px; border-radius: 2px; background: rgba(0, 54, 98, .28); }
.cp-announce__dots i.is-on { width: 10px; background: var(--cp-navy); }
@media (max-width: 379px) { .cp-announce { font-size: 12px; } }
@media (min-width: 990px) { .cp-announce { display: none; } }

/* ---------- W5: the phone header, one sticky 56 px row ---------- */
.cp-header { position: sticky; top: 0; z-index: 40; background: var(--cp-white); color: var(--cp-heading); }
.cp-header.is-stuck { box-shadow: 0 2px 10px rgba(0, 20, 40, .10); }
.cp-header__row { display: flex; align-items: center; gap: 6px; height: 56px; padding: 0 8px 0 4px; }
.cp-header__menu { flex: none; display: grid; place-items: center; width: 40px; height: 44px; padding: 0; border: 0; border-radius: 10px; background: none; color: var(--cp-heading); cursor: pointer; }
.cp-header__menu .cp-icon--close, .cp-header__menu[aria-expanded="true"] .cp-icon--menu { display: none; }
.cp-header__menu[aria-expanded="true"] .cp-icon--close { display: block; }
.cp-header__menu[aria-expanded="true"] { color: var(--cp-navy); }
.cp-header__logo { flex: none; display: block; line-height: 0; text-decoration: none; }
.cp-header__logo picture { display: block; }
.cp-header__logo-img { display: block; width: auto; height: 36px; }
.cp-header__logo-text { font-size: 17px; line-height: 36px; font-weight: 700; color: var(--cp-navy); white-space: nowrap; }
.cp-search { position: relative; flex: 1; min-width: 0; height: 40px; margin: 0; border: 1px solid var(--cp-line); border-radius: 10px; background: var(--cp-mist); }
.cp-search input { display: block; width: 100%; height: 100%; margin: 0; padding: 0 10px 0 36px; border: 0; border-radius: 10px; background: none; font: inherit; font-size: 16px; line-height: 1.2; letter-spacing: normal; color: var(--cp-heading); -webkit-appearance: none; appearance: none; }
.cp-search input::placeholder { color: transparent; }
.cp-search input::-webkit-search-cancel-button { display: none; }
.cp-search input:focus { outline: none; }
.cp-search:focus-within { border-color: var(--cp-navy); background: var(--cp-white); box-shadow: 0 0 0 1px var(--cp-navy); }
.cp-search__hint { position: absolute; top: 0; bottom: 0; left: 36px; right: 8px; display: flex; align-items: center; overflow: hidden; white-space: nowrap; color: var(--cp-caption); font-size: 14px; pointer-events: none; }
.cp-search__hint b { margin-left: 0; color: var(--cp-heading); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.cp-search__for { display: none; white-space: pre; }
.cp-search input:not(:placeholder-shown) ~ .cp-search__hint { visibility: hidden; }
.cp-search__go { position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 36px; height: 100%; padding: 0 0 0 4px; border: 0; background: none; color: var(--cp-navy); cursor: pointer; }
.cp-header__loc { display: none; }
.cp-header__icons { flex: none; display: flex; }
.cp-header__icon { position: relative; display: none; color: var(--cp-heading); text-decoration: none; }
.cp-header__icon--cart { display: grid; place-items: center; width: 40px; height: 44px; border-radius: 10px; }
.cp-header__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.cp-header__count { position: absolute; top: 4px; right: 0; display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border: 2px solid var(--cp-white); border-radius: 9px; background: var(--cp-action); color: #fff; font-size: 11px; line-height: 1; font-weight: 700; letter-spacing: 0; box-sizing: border-box; }
.cp-header__count[hidden] { display: none; }
@media (min-width: 400px) { .cp-search__for { display: inline; } .cp-search__hint b { margin-left: 0; } }
@media (min-width: 400px) and (max-width: 439px) { .cp-search__hint { font-size: 13.5px; } }
@media (max-width: 374px) { .cp-header__logo-img { height: 33px; } .cp-header__row { gap: 4px; padding-right: 6px; } .cp-search__hint { font-size: 13.5px; } }

/* ---------- W4: the slim location line under the row (phones) ---------- */
.cp-locline { display: flex; align-items: center; gap: 6px; width: 100%; height: 34px; margin: 0; padding: 0 12px; border: 0; border-bottom: 1px solid var(--cp-line); background: var(--cp-mist-deep); color: var(--cp-heading); font: inherit; font-size: 12.5px; letter-spacing: normal; text-align: left; cursor: pointer; }
.cp-locline > .cp-icon { color: var(--cp-navy); }
.cp-locline__t { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cp-locline__t b { font-weight: 600; }
.cp-locline__ch { flex: none; display: inline-flex; align-items: center; gap: 1px; color: var(--cp-navy); font-weight: 600; }
.cp-locline__ch [hidden] { display: none; }
.cp-locline:focus-visible { outline: 2px solid var(--cp-navy); outline-offset: -2px; }
@media (min-width: 990px) { .cp-locline { display: none; } }

/* The first-visit pop-over: points at the line (phones) or the location box (desktop); no dark cover. */
.cp-locpop { position: absolute; z-index: 45; top: var(--cp-pop-top, 100%); left: 10px; right: 10px; padding: 16px; border-radius: 14px; background: #fff; box-shadow: 0 12px 36px rgba(0, 20, 40, .22); color: var(--cp-heading); }
.cp-locpop[hidden] { display: none; }
.cp-locpop::before { content: ""; position: absolute; top: -7px; left: var(--cp-pop-arrow, 22px); width: 14px; height: 14px; border-radius: 2px; background: #fff; transform: rotate(45deg); }
.cp-locpop__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cp-locpop h2 { margin: 0; font-size: 16px; line-height: 1.3; font-weight: 700; letter-spacing: -.005em; color: var(--cp-heading); }
.cp-locpop__x { display: grid; place-items: center; width: 36px; height: 36px; margin: -8px -8px -8px 0; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--cp-caption); cursor: pointer; }
.cp-locpop__x:hover { background: var(--cp-mist); }
.cp-locpop p { margin: 4px 0 14px; font-size: 13.5px; line-height: 1.45; color: var(--cp-caption); }
.cp-locpop__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cp-locpop__btns.is-one { grid-template-columns: 1fr; }
.cp-locpop__geo, .cp-locpop__pin { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 44px; padding: 0 8px; border-radius: var(--cp-radius-btn); font: inherit; font-size: 14.5px; font-weight: 700; letter-spacing: normal; white-space: nowrap; cursor: pointer; }
.cp-locpop__geo { border: 0; background: var(--cp-action); color: #fff; }
.cp-locpop__geo:hover { background: var(--cp-action-hover); }
.cp-locpop__geo[aria-busy="true"] { opacity: .75; cursor: progress; }
.cp-locpop__pin { border: 1px solid var(--cp-line); background: #fff; color: var(--cp-navy); }
.cp-locpop__pin:hover { border-color: var(--cp-navy); }
.cp-locpop__btns.is-one .cp-locpop__pin { border: 0; background: var(--cp-action); color: #fff; }
.cp-locpop small { display: block; margin-top: 10px; font-size: 11.5px; line-height: 1.4; color: var(--cp-caption); }
@media (max-width: 374px) { .cp-locpop__btns { grid-template-columns: 1fr; } }
@media (min-width: 990px) { .cp-locpop { left: var(--cp-pop-left, auto); right: auto; width: 360px; } }

/* ---------- W6: the desktop header, its own design ---------- */
.cp-nav, .cp-strip { display: none; }
@media (min-width: 990px) {
	.cp-header { background: #fff; color: var(--cp-heading); border-bottom: 1px solid #e3e8ee; } /* his "A" of 31 Oct 2026: white bar, pale menu band */
	.cp-header.is-stuck { box-shadow: 0 4px 16px rgba(0, 30, 60, .1); }
	.cp-header .cp-wrap { max-width: calc(var(--cp-content, 1320px) + 2 * var(--cp-cw-gutter, 20px)); padding-inline: var(--cp-cw-gutter, 20px); } /* W9: the hero card's edges, as every row (.cp-cw) */
	.cp-header__row { height: 76px; gap: 28px; padding-block: 0; }
	.cp-header__menu { width: 0; margin: 0 -28px 0 0; overflow: hidden; opacity: 0; visibility: hidden; color: var(--cp-navy); }
	.cp-header.is-compact .cp-header__menu { width: 44px; margin: 0 -14px 0 -10px; opacity: 1; visibility: visible; }
	.cp-header__menu:hover { background: #edf3f8; }
	.cp-header__logo-img { height: 52px; }
	.cp-header__logo-text { color: var(--cp-navy); font-size: 22px; line-height: 52px; }
	.cp-search { height: 48px; border: 1px solid #bfcad6; border-radius: 10px; overflow: hidden; background: #fff; }
	.cp-search:focus-within { background: #fff; box-shadow: 0 0 0 3px rgba(0, 54, 98, .18); }
	.cp-search input { padding: 0 82px 0 18px; font-size: 15px; }
	.cp-search__hint { left: 18px; right: 80px; font-size: 15px; }
	.cp-search__hint b { margin-left: 0; }
	.cp-search__for { display: inline; }
	.cp-search__go { left: auto; right: 0; width: 64px; padding: 0; background: var(--cp-action); color: #fff; }
	.cp-search__go:hover { background: var(--cp-action-hover); }
	.cp-search__go:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
	.cp-header__loc { flex: none; display: flex; align-items: center; gap: 10px; width: 290px; height: 48px; padding: 0 12px 0 14px; border: 1px solid #bfcad6; border-radius: 10px; background: none; color: var(--cp-heading); font: inherit; letter-spacing: normal; text-align: left; cursor: pointer; }
	.cp-header__loc:hover, .cp-header__loc[aria-expanded="true"] { border-color: var(--cp-navy); background: #fff; }
	.cp-header__loc > .cp-icon--pin { color: var(--cp-navy); }
	.cp-header__loc-t { flex: 1; min-width: 0; }
	.cp-header__loc small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; line-height: 1.2; color: #5b6675; }
	.cp-header__loc strong { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14.5px; line-height: 1.3; font-weight: 600; }
	.cp-header__loc:focus-visible { outline: 2px solid var(--cp-navy); outline-offset: 2px; }
	.cp-header__icons { gap: 6px; }
	.cp-header__icon, .cp-header__icon--cart { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 66px; height: 56px; border-radius: 10px; color: var(--cp-navy); }
	.cp-header__icon:hover { background: #edf3f8; }
	.cp-header__icon:focus-visible { outline: 2px solid var(--cp-navy); outline-offset: 0; }
	.cp-header__label { position: static; width: auto; height: auto; overflow: visible; clip-path: none; font-size: 12px; line-height: 1.2; color: #34485c; }
	.cp-header__count { top: 0; right: 12px; border-color: #fff; }

	/* the menu bar: the shop's real menu, its panels, the offer at the right */
	.cp-nav { position: relative; display: block; max-height: 46px; background: #eaf3fa; }
	.cp-header.is-compact .cp-nav, .cp-header.is-compact .cp-strip { max-height: 0; opacity: 0; visibility: hidden; overflow: hidden; }
	.cp-nav__in { display: flex; align-items: center; height: 46px; }
	.cp-nav__list { display: flex; align-items: center; height: 46px; margin: 0 0 0 -14px; padding: 0; list-style: none; }
	.cp-nav__item { height: 46px; }
	.cp-nav__item--drop { position: relative; }
	.cp-nav__head { display: flex; align-items: center; height: 46px; }
	.cp-nav__link { display: flex; align-items: center; height: 46px; padding: 0 4px 0 14px; color: var(--cp-navy); font-size: 14.5px; font-weight: 500; text-decoration: none; white-space: nowrap; }
	.cp-nav__item:not(.has-panel) > .cp-nav__link { padding-right: 14px; }
	.cp-nav__caret { display: grid; place-items: center; width: 24px; height: 46px; margin-right: 6px; padding: 0; border: 0; background: none; color: #34485c; cursor: pointer; }
	.cp-nav__caret svg { width: 15px; height: 15px; }
	.cp-nav__item.is-open > .cp-nav__head, .cp-nav__item:hover > .cp-nav__head, .cp-nav__item > .cp-nav__link:hover { background: rgba(0, 54, 98, .08); }
	.cp-nav__link[aria-current] { box-shadow: inset 0 -3px 0 var(--cp-action); }
	.cp-nav__item.is-open .cp-nav__caret svg { transform: rotate(180deg); }
	.cp-nav__link:focus-visible, .cp-nav__caret:focus-visible, .cp-nav__hot:focus-visible { outline: 2px solid var(--cp-navy); outline-offset: -2px; }
	.cp-nav__hot { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 46px; margin-left: auto; padding: 0 2px 0 14px; color: #b23a0b; font-size: 14.5px; font-weight: 600; text-decoration: none; white-space: nowrap; }
	.cp-nav__hot:hover { color: #8f2e08; }
	.cp-nav__panel { position: absolute; top: 100%; left: 0; z-index: 2; background: #fff; color: var(--cp-text); opacity: 0; visibility: hidden; transform: translateY(-8px); pointer-events: none; }
	.cp-nav__item.is-open > .cp-nav__panel, .cp-nav:not(.is-js) .cp-nav__item:hover > .cp-nav__panel, .cp-nav:not(.is-js) .cp-nav__item:focus-within > .cp-nav__panel { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
	.cp-mega { right: 0; max-height: calc(100vh - 140px); overflow-y: auto; border-top: 1px solid var(--cp-line); box-shadow: 0 18px 40px rgba(0, 20, 40, .18); }
	.cp-mega > .cp-wrap { padding-block: 28px 30px; }
	.cp-mega__list { margin: 0; padding: 0; list-style: none; columns: 5 180px; column-gap: 32px; }
	.cp-mega__list > li { break-inside: avoid; padding-bottom: 18px; }
	.cp-mega__list ul { margin: 0; padding: 0; list-style: none; }
	.cp-mega__list--plain { columns: 4 200px; }
	.cp-mega__list--plain > li { padding-bottom: 0; }
	.cp-mega__link { display: block; padding: 4px 0; color: var(--cp-text); font-size: 14px; line-height: 1.45; text-decoration: none; }
	.cp-mega__link--head { margin-bottom: 4px; color: var(--cp-heading); font-weight: 700; }
	.cp-mega__link--sub { color: var(--cp-text); }
	.cp-mega__link:hover, .cp-drop__link:hover { color: var(--cp-navy); text-decoration: underline; text-underline-offset: 3px; }
	.cp-mega__all { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; color: var(--cp-navy); font-size: 14px; font-weight: 600; text-decoration: none; }
	.cp-mega__all:hover { text-decoration: underline; text-underline-offset: 3px; }
	.cp-drop { width: 250px; margin: 0; padding: 10px 0; list-style: none; border-radius: 0 0 10px 10px; box-shadow: 0 18px 40px rgba(0, 20, 40, .18); }
	.cp-drop__link { display: block; padding: 7px 18px; color: var(--cp-text); font-size: 14px; line-height: 1.45; text-decoration: none; }

	/* W2 on desktop: the slim light line of facts under the menu */
	.cp-strip { display: block; max-height: 40px; background: var(--cp-mist-deep); color: var(--cp-heading); }
	.cp-strip__row { display: flex; align-items: center; justify-content: center; gap: 36px; height: 40px; margin-block: 0; list-style: none; font-size: 14px; }
	.cp-strip__row li { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
	.cp-strip__row .cp-icon { color: var(--cp-navy); }
	.cp-strip__row b { font-weight: 600; }
}
@media (min-width: 990px) and (max-width: 1279px) {
	.cp-header__row { gap: 18px; }
	.cp-header__loc { width: 220px; }
	.cp-header__icon, .cp-header__icon--cart { width: 60px; }
	.cp-header__icons { gap: 0; }
	.cp-nav__link, .cp-nav__hot { font-size: 14px; }
	.cp-nav__link { padding-left: 10px; }
	.cp-nav__caret { margin-right: 2px; }
	.cp-strip__row { gap: 22px; font-size: 13px; }
	.cp-strip__row li:nth-child(4) { display: none; }
}
@media (min-width: 990px) and (max-width: 1149px) {
	.cp-header__icon--wa { display: none; }
	.cp-header__loc { width: 190px; }
	.cp-nav__hot { display: none; }
}

/* ---------- the pin-code sheet: from the bottom on phones, under the location box on desktop ---------- */
.cp-delivery-check { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; visibility: hidden; pointer-events: none; }
.cp-delivery-check.is-open { visibility: visible; pointer-events: auto; }
.cp-loc-back { position: fixed; inset: 0; background: rgba(10, 20, 35, .45); }
.cp-loc-back[hidden] { display: none; }
.cp-dc { position: relative; z-index: 1; max-height: 88vh; overflow-y: auto; padding: 10px 16px calc(22px + env(safe-area-inset-bottom)); border-radius: 18px 18px 0 0; background: #fff; color: var(--cp-text); box-shadow: 0 -8px 30px rgba(0, 0, 0, .15); transform: translateY(100%); transition: transform .22s ease; }
.cp-delivery-check.is-open .cp-dc { transform: none; }
.cp-loc-grab { display: block; width: 40px; height: 4px; margin: 0 auto 12px; border-radius: 2px; background: var(--cp-line); }
.cp-dc__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cp-dc__head h2 { margin: 0; font-size: 17px; line-height: 1.3; font-weight: 700; letter-spacing: -.005em; color: var(--cp-heading); }
.cp-loc-x { display: grid; place-items: center; width: 40px; height: 40px; margin: -8px -10px -8px 0; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--cp-caption); cursor: pointer; }
.cp-loc-x:hover { background: var(--cp-mist); }
.cp-dc__lead { margin: 2px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--cp-caption); }
.cp-dc__form { display: flex; gap: 8px; margin: 12px 0 0; }
.cp-dc__input { flex: 1; min-width: 0; height: 48px; margin: 0; padding: 0 14px; border: 2px solid var(--cp-navy); border-radius: 10px; background: #fff; color: var(--cp-heading); font: inherit; font-size: 18px; font-weight: 600; letter-spacing: .08em; }
.cp-dc__input::placeholder { font-size: 15px; font-weight: 400; letter-spacing: normal; color: var(--cp-caption); }
.cp-dc__input:focus { outline: none; box-shadow: 0 0 0 3px rgba(var(--cp-navy-rgb), .15); }
.cp-dc__btn { flex: none; height: 48px; padding: 0 22px; border: 0; border-radius: var(--cp-radius-btn); background: var(--cp-action); color: #fff; font: inherit; font-size: 15px; font-weight: 700; letter-spacing: normal; cursor: pointer; }
.cp-dc__btn:hover { background: var(--cp-action-hover); }
.cp-dc__err { margin: 8px 0 0; font-size: 13.5px; color: #b42318; }
.cp-dc__err[hidden] { display: none; }
.cp-dc__result:empty { display: none; }
.cp-res { display: flex; gap: 10px; margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: var(--cp-mist); }
.cp-res > .cp-icon { flex: none; color: var(--cp-navy); }
.cp-res b { display: block; font-size: 14.5px; line-height: 1.35; color: var(--cp-heading); }
.cp-res span { display: block; margin-top: 2px; font-size: 13px; line-height: 1.45; color: var(--cp-text); }
.cp-res a { color: var(--cp-navy); font-weight: 600; }
.cp-res--yes { background: var(--cp-green-bg); }
.cp-res--yes > .cp-icon { color: var(--cp-green); }
.cp-res--courier { background: #eaf1f8; }
.cp-res--no { background: var(--cp-mist); }
.cp-res--no > .cp-icon { color: var(--cp-caption); }
.cp-dc__geo { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 8px; padding: 0; border: 0; background: none; color: var(--cp-navy); font: inherit; font-size: 14px; font-weight: 600; letter-spacing: normal; cursor: pointer; }
.cp-dc__geo[hidden] { display: none; }
.cp-dc__geo[aria-busy="true"] { opacity: .7; cursor: progress; }
.cp-dc__keep { margin: 4px 0 0; font-size: 11.5px; line-height: 1.4; color: var(--cp-caption); }
html.cp-loc-open { overflow: hidden; }
@media (min-width: 990px) {
	.cp-delivery-check { left: var(--cp-sheet-left, auto); right: auto; top: var(--cp-sheet-top, 84px); bottom: auto; width: 400px; }
	.cp-loc-back { background: rgba(10, 20, 35, .18); }
	.cp-loc-grab { display: none; }
	.cp-dc { max-height: calc(100vh - 120px); padding: 18px 20px 18px; border-radius: 16px; box-shadow: 0 16px 40px rgba(22, 32, 43, .22); opacity: 0; transform: translateY(-8px); transition: transform .18s ease, opacity .18s ease; }
	.cp-delivery-check.is-open .cp-dc { opacity: 1; transform: none; }
	html.cp-loc-open { overflow: auto; }
}
@media (prefers-reduced-motion: reduce) {
	.cp-dc { transition: none !important; }
}
/* the shop's own checkout and sign-in screens stand alone (their plugins hide the header); nothing of it shows there */
body.cp-own-checkout .cp-locpop, body.cp-own-signin .cp-locpop { display: none; }

/* phones: the chat button a little smaller and lower, so it does not sit on the first boxes' headings (R-065) */
@media (max-width: 749px) {
	.cp-chat-btn { width: 46px; height: 46px; right: 12px; bottom: calc(64px + env(safe-area-inset-bottom) + 8px); }
	.cp-chat-btn svg { width: 25px; height: 25px; }
}

/* ---------- the slide-in menu ---------- */
/* On phones it opens under the header and stops above the tab bar, so its last rows are never covered. */
.cp-drawer { position: fixed; inset: var(--cp-drawer-top, 0px) 0 calc(60px + env(safe-area-inset-bottom)) 0; z-index: 39; visibility: hidden; pointer-events: none; color: var(--cp-text); font-size: 14px; }
.cp-drawer.is-open { visibility: visible; pointer-events: auto; }
.cp-drawer__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, .5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; }
.cp-drawer.is-open .cp-drawer__overlay { opacity: 1; }
.cp-drawer__panel { position: absolute; inset: 0 auto 0 0; display: flex; flex-direction: column; width: 70vw; max-width: 300px; overflow: hidden; background: var(--cp-white); border-right: 1px solid rgba(var(--cp-text-rgb), .1); transform: translateX(-100%); }
.cp-drawer.is-open .cp-drawer__panel { transform: none; }
.cp-drawer__top { display: none; }
.cp-drawer__scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 14px 0 10px; }
.cp-drawer__row { display: flex; align-items: center; width: 100%; padding: .575em 18px .575em 30px; border: 0; background: none; font: inherit; letter-spacing: inherit; text-align: left; color: var(--cp-text); text-decoration: none; cursor: pointer; }
.cp-drawer__row > span { flex: 1; min-width: 0; }
.cp-drawer__row .cp-icon { flex: none; }
.cp-drawer__row:hover, .cp-drawer__row:focus-visible, .cp-drawer__kid:hover, .cp-drawer__grand:hover { background: rgba(var(--cp-text-rgb), .04); }
.cp-drawer__row--second { color: var(--cp-caption); }
.cp-drawer__row--second, .cp-drawer__row--plain { padding-block: .46em; }
.drawer-png-icon { width: 24px; height: 24px; object-fit: contain; margin-right: 20px; flex-shrink: 0; display: inline-block; vertical-align: middle; }
.cp-drawer__rule { height: 1px; margin: 15px 30px; background: rgba(var(--cp-text-rgb), .1); }
.drawer-cats { padding: .6em 0 1.2em; }
.drawer-cats__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 0 20px; }
.drawer-cats__item { text-decoration: none; display: block; }
.drawer-cats__item img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; background: #fff; border: 1px solid rgba(var(--cp-text-rgb), .08); border-radius: 12px; display: block; padding: 12px; }
.cp-drawer__foot { flex: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 14px 24px; background: rgba(var(--cp-text-rgb), .04); border-top: 1px solid rgba(var(--cp-text-rgb), .08); }
.cp-drawer__foot a { display: grid; place-items: center; width: 34px; height: 34px; color: var(--cp-text); }
.cp-drawer__foot svg { width: 18px; height: 18px; fill: currentColor; }
.cp-drawer__sub { position: absolute; inset: 0; z-index: 1; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 20px; background: var(--cp-white); transform: translateX(100%); visibility: hidden; }
.cp-drawer__sub.is-open { transform: none; visibility: visible; }
.cp-drawer__back { display: flex; align-items: center; gap: 12px; width: 100%; padding: 17px 30px; border: 0; background: rgba(var(--cp-text-rgb), .05); font: inherit; letter-spacing: inherit; color: var(--cp-text); text-align: left; cursor: pointer; }
.cp-drawer__parent { display: block; margin-top: 10px; padding: 8px 30px; font-size: 16px; font-weight: 700; color: var(--cp-text); text-decoration: none; }
.cp-drawer__kid { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: .52em 26px .52em 30px; color: var(--cp-text); text-decoration: none; cursor: pointer; list-style: none; }
.cp-drawer__kid::-webkit-details-marker { display: none; }
.cp-drawer__fold[open] > summary .cp-icon { transform: rotate(180deg); }
.cp-drawer__fold > ul { padding: 2px 0 8px; }
.cp-drawer__grand { display: block; padding: .4em 26px .4em 44px; font-size: 13.5px; color: rgba(var(--cp-text-rgb), .8); text-decoration: none; }
.cp-drawer__grand--all { color: var(--cp-navy); text-decoration: underline; text-underline-offset: 3px; }
body.cp-drawer-open, body.cp-chat-open { overflow: hidden; }
@media (min-width: 750px) {
	.cp-drawer { inset: 0; z-index: 45; }
	.cp-drawer__panel { width: 375px; max-width: calc(100% - 50px); }
	.cp-drawer__top { display: flex; flex: none; justify-content: flex-end; height: 66px; padding: 0 12px; border-bottom: 1px solid rgba(var(--cp-text-rgb), .08); }
	.cp-drawer__close { display: grid; place-items: center; width: 44px; height: 100%; padding: 0; border: 0; background: none; color: var(--cp-text); cursor: pointer; }
	.cp-drawer__scroll { padding-top: 10px; }
	.cp-drawer__row { padding-block: 13px; }
	.cp-drawer__row--second, .cp-drawer__row--plain { padding-block: 10px; }
	.cp-drawer__kid { padding-block: .67em; }
}

/* ---------- breadcrumbs ---------- */
.cp-crumbs { background: var(--cp-white); padding-block: 13px; font-size: var(--cp-t5); line-height: 1.6; }
.cp-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; }
.cp-crumbs li { display: inline-flex; align-items: center; }
.cp-crumbs li:not(:last-child)::after { content: "/"; margin: 0 .4em; color: rgba(var(--cp-text-rgb), .8); }
.cp-crumbs--plain { background: none; }
.cp-crumbs--line { border-bottom: 1px solid rgba(var(--cp-text-rgb), .08); }
.cp-crumbs a { color: rgba(var(--cp-text-rgb), .8); text-decoration: none; }
.cp-crumbs a:hover { text-decoration: underline; }
.cp-crumbs a[aria-current] { color: var(--cp-heading); }
.cp-crumbs__home { flex: none; margin-right: 5px; color: rgba(var(--cp-text-rgb), .7); }
@media (max-width: 749px) {
	/* live (cp-pdp-enhance): on a phone the product's own name is left out of the trail */
	.single-product .cp-crumbs li:last-child:not(:first-child), .single-product .cp-crumbs li:nth-last-child(2)::after { display: none; }
}

/* ---------- cp-seo-footer (live settings) ---------- */
.cp-seo-footer { background: #0e1a2b; color: #d7dce3; padding: 48px 0 48px; }
.cp-seo-footer * { box-sizing: border-box; }
.cp-seo-footer .cpsf-wrap { max-width: 1700px; margin-inline: auto; padding-inline: 24px; }
.cp-seo-footer .cpsf-head { margin: 0 0 6px; font-weight: 700; letter-spacing: -.011em; font-size: 18px; color: #ffffff; }
.cp-seo-footer .cpsf-intro { margin: 0 0 22px; font-size: 14px; line-height: 1.6; opacity: .85; max-width: 120ch; }
.cp-seo-footer .cpsf-intro p { margin: 0 0 8px; }
.cp-seo-footer .cpsf-intro p:last-child { margin-bottom: 0; }
.cp-seo-footer .cpsf-intro a { color: #d7dce3; }
.cp-seo-footer .cpsf-cols { display: grid; gap: 28px 28px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cp-seo-footer .cpsf-col h3 { margin: 0 0 10px; font-weight: 600; letter-spacing: .02em; font-size: 13px; color: #ffffff; text-transform: uppercase; }
.cp-seo-footer .cpsf-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cp-seo-footer .cpsf-col a { color: #d7dce3; text-decoration: none; font-size: 14px; line-height: 1.45; }
.cp-seo-footer .cpsf-col a:hover { color: #f47d20; text-decoration: underline; }
/* A small heading inside a list (the three groups of "Popular searches"): quiet capitals in the footer's own white. */
.cp-seo-footer .cpsf-col .cpsf-sub { margin-top: 8px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #ffffff; opacity: .72; }
.cp-seo-footer .cpsf-col .cpsf-sub:first-child { margin-top: 0; }
.cp-seo-footer .cpsf-faq { margin-top: 60px; }
.cp-seo-footer .cpsf-faq > h3 { margin: 0 0 14px; font-weight: 700; letter-spacing: -.011em; font-size: 18px; color: #ffffff; }
.cp-seo-footer .cpsf-faq-list { display: grid; gap: 0 28px; grid-template-columns: repeat(1, minmax(0, 1fr)); }
.cp-seo-footer details { border-top: 1px solid #22304a; padding: 16px 0; }
.cp-seo-footer details:last-child { border-bottom: 1px solid #22304a; }
.cp-seo-footer summary { cursor: pointer; list-style: none; display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; font-weight: 600; font-size: 16px; line-height: 1.4; color: #ffffff; }
.cp-seo-footer summary::-webkit-details-marker { display: none; }
.cp-seo-footer summary::after { content: ''; flex: 0 0 12px; width: 12px; height: 12px; margin-top: 5px; background: currentColor; transition: transform .2s ease; clip-path: polygon(50% 0,58% 0,58% 42%,100% 42%,100% 58%,58% 58%,58% 100%,42% 100%,42% 58%,0 58%,0 42%,42% 42%,42% 0); }
.cp-seo-footer details[open] summary::after { transform: rotate(45deg); }
.cp-seo-footer .cpsf-a { margin: 10px 0 0; font-size: 14px; line-height: 1.6; opacity: .85; max-width: 80ch; }
.cp-seo-footer .cpsf-a p { margin: 0 0 8px; }
.cp-seo-footer .cpsf-a p:last-child { margin-bottom: 0; }
.cp-seo-footer .cpsf-a a { color: #d7dce3; }
@media (min-width: 750px) {
	.cp-seo-footer .cpsf-head { font-size: 22px; }
	.cp-seo-footer .cpsf-intro { font-size: 15px; margin-bottom: 28px; }
	.cp-seo-footer .cpsf-cols { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	/* The long list takes two of six parts and lays its links in two columns, each small heading across both. */
	.cp-seo-footer .cpsf-cols:has(.cpsf-col--wide) { grid-template-columns: 2fr repeat(4, minmax(0, 1fr)); }
	.cp-seo-footer .cpsf-col--wide ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 20px; }
	.cp-seo-footer .cpsf-col--wide .cpsf-sub { grid-column: 1 / -1; }
	.cp-seo-footer .cpsf-faq > h3 { font-size: 22px; }
	.cp-seo-footer .cpsf-faq-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- cp-footer (live settings) ---------- */
.cp-footer { background: #0e1a2b; color: #d7dce3; padding: 48px 0 0; font-size: 14px; line-height: 1.55; }
.cp-footer * { box-sizing: border-box; }
.cp-footer .cpf-wrap { max-width: 1700px; margin-inline: auto; padding-inline: 24px; }
.cp-footer .cpf-top { display: grid; gap: 32px; grid-template-columns: 1fr; padding-bottom: 36px; }
@media (min-width: 750px) {
	.cp-footer .cpf-top { grid-template-columns: 1.5fr repeat(3, 1fr) 1.2fr; gap: 40px; }
}
.cp-footer .cpf-brand-name { margin: 0 0 12px; font-weight: 700; font-size: 16px; color: #ffffff; letter-spacing: -.01em; }
.cp-footer address { font-style: normal; margin: 0 0 14px; opacity: .82; max-width: 34ch; }
.cp-footer address p { margin: 0; }
/* The two branches (10 Oct 2026): a name, where it stands, the address, and for the open one two links. */
.cp-footer .cpf-shop { margin: 0 0 16px; }
.cp-footer .cpf-shop + .cpf-shop { padding-top: 16px; border-top: 1px solid #22304a; }
.cp-footer .cpf-shop-name { margin: 0 0 6px; font-size: 15px; font-weight: 700; color: #ffffff; letter-spacing: -.01em; }
/* Where a shop stands: a plain line, no box (the owner, 12 Oct 2026: the tinted boxes looked machine-made). The open shop in white and bold, the closed one in the footer's quiet text. */
.cp-footer .cpf-state { margin: 0 0 6px; font-size: 13.5px; line-height: 1.5; }
.cp-footer .cpf-state--open { color: #ffffff; font-weight: 600; }
.cp-footer .cpf-state--soon { color: #d7dce3; font-weight: 400; opacity: .82; }
.cp-footer .cpf-shop address { margin: 0 0 4px; }
.cp-footer .cpf-shop-links { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 0; }
.cp-footer .cpf-shop-links a { display: inline-flex; align-items: center; min-height: 44px; color: #ffffff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.cp-footer .cpf-shop-links a:hover { color: #f47d20; }
.cp-footer .cpf-rows { display: flex; flex-direction: column; gap: 9px; margin: 0 0 16px; }
.cp-footer .cpf-row { display: flex; gap: 10px; align-items: flex-start; }
.cp-footer .cpf-row svg { flex: 0 0 16px; width: 16px; height: 16px; margin-top: 2px; fill: none; stroke: #f47d20; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cp-footer .cpf-row a { color: #d7dce3; text-decoration: none; }
.cp-footer .cpf-row a:hover { color: #f47d20; text-decoration: underline; }
.cp-footer .cpf-row span { opacity: .82; }
.cp-footer h2.cpf-h { margin: 0 0 14px; font-weight: 600; letter-spacing: .04em; font-size: 12px; color: #ffffff; text-transform: uppercase; }
.cp-footer ul.cpf-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.cp-footer ul.cpf-list a { color: #d7dce3; text-decoration: none; opacity: .82; }
.cp-footer ul.cpf-list a:hover { color: #f47d20; opacity: 1; }
.cp-footer .cpf-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; background: #25d366; color: #0e1a2b; border-radius: 8px; padding: 11px 18px; font-weight: 600; font-size: 14px; text-decoration: none; transition: transform .12s ease, opacity .15s ease; }
.cp-footer .cpf-cta:hover { transform: translateY(-1px); opacity: .94; }
.cp-footer .cpf-cta svg { width: 17px; height: 17px; fill: currentColor; }
.cp-footer .cpf-help { opacity: .82; margin: 0 0 12px; max-width: 32ch; }
.cp-footer .cpf-bottom { border-top: 1px solid #22304a; padding: 18px 0 24px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
.cp-footer .cpf-copy { opacity: .7; font-size: 12px; margin: 0; }
.cp-footer .cpf-social { display: flex; gap: 10px; align-items: center; }
.cp-footer .cpf-social a { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #d7dce3; border: 1px solid #22304a; transition: background .15s ease, color .15s ease, border-color .15s ease; }
.cp-footer .cpf-social a:hover { background: #f47d20; color: #0e1a2b; border-color: #f47d20; }
.cp-footer .cpf-social svg { width: 16px; height: 16px; fill: currentColor; }
.cp-footer .cpf-pay { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.cp-footer .cpf-pay svg { height: 24px; width: auto; border-radius: 3px; }
.cp-seo-footer :focus-visible, .cp-footer :focus-visible { outline-color: #fff; }
@media (max-width: 749.98px) {
	.cp-footer .cpf-bottom { justify-content: flex-start; }
	.cp-footer .cpf-top { gap: 26px; }
}

/* ---------- phones: footer link lists fold under their headings (js/shell.js adds .cp-foot-fold; live: cp-mobile-density, where the class is .cp-fold, a name the page sections here use for something else) ---------- */
@media (max-width: 749px) {
	.cp-foot-fold .cpsf-cols { display: block !important; }
	.cp-foot-fold .cpsf-col, .cp-foot-fold .cpf-col { border-bottom: 1px solid rgba(255, 255, 255, .14); margin: 0 !important; padding: 0 !important; }
	.cp-foot-fold .cpsf-col > h3, .cp-foot-fold .cpf-col > .cpf-h { display: flex; justify-content: space-between; align-items: center; margin: 0 !important; padding: 14px 0 !important; cursor: pointer; }
	.cp-foot-fold .cpsf-col > h3::after, .cp-foot-fold .cpf-col > .cpf-h::after { content: ""; width: 8px; height: 8px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg); transition: transform .2s; margin: -3px 4px 0 0; opacity: .8; }
	.cp-foot-fold .is-open > h3::after, .cp-foot-fold .is-open > .cpf-h::after { transform: rotate(-135deg); margin-top: 3px; }
	.cp-foot-fold .cpsf-col > ul, .cp-foot-fold .cpf-col > ul { display: none !important; padding-bottom: 12px !important; }
	.cp-foot-fold .is-open > ul { display: block !important; }
	.cp-foot-fold .cpsf-col > ul { columns: 2; column-gap: 16px; }
	/* The small headings of "Popular searches" run across both columns; the links of each group flow in two under theirs. */
	.cp-foot-fold .cpsf-col--wide .cpsf-sub { column-span: all; margin: 12px 0 6px; }
	.cp-foot-fold .cpsf-col--wide .cpsf-sub:first-child { margin-top: 0; }
	.cp-foot-fold .cpsf-intro, .cp-foot-fold .cpsf-intro p { font-size: 13px !important; line-height: 1.5 !important; }
}

/* ---------- phones: the fixed tab bar (the shop's own, from its layout) ---------- */
@media (max-width: 749px) {
	body { padding-bottom: calc(60px + env(safe-area-inset-bottom)) !important; }
	.mob-nav {
		position: fixed; bottom: 0; left: 0; right: 0;
		height: calc(60px + env(safe-area-inset-bottom));
		padding-bottom: env(safe-area-inset-bottom);
		background: var(--cp-mist);
		border-top: 1px solid rgba(var(--cp-text-rgb), .1);
		display: flex; align-items: center; justify-content: space-around;
		z-index: 100;
		box-shadow: 0 -2px 8px rgba(0, 0, 0, .08);
	}
	.mob-nav__btn {
		display: flex; flex-direction: column; align-items: center;
		gap: 3px; text-decoration: none;
		color: rgba(var(--cp-text-rgb), .5);
		font-size: 10px; font-weight: 500; line-height: 1.8;
		min-width: 60px; padding: 6px 4px;
		position: relative; transition: color .2s;
	}
	.mob-nav__btn--active { color: var(--cp-navy); }
	.mob-nav__btn svg { width: 22px; height: 22px; }
	.mob-nav__badge {
		position: absolute; top: 2px; right: 8px;
		background: var(--cp-navy);
		color: #fff;
		border-radius: 50%; min-width: 16px; height: 16px;
		font-size: 9px; font-weight: 700; line-height: 1;
		display: flex; align-items: center; justify-content: center; padding: 0 3px;
	}
	.mob-nav__badge[hidden] { display: none; }
}
@media (min-width: 750px) { .mob-nav { display: none; } }

/* ---------- "Chat & FAQs": the green button and its panel (the shop's own; sizes in px, the live theme's 1rem is 10px) ---------- */
/* The floating button is the shop's blue, not WhatsApp green (owner, 6 Oct 2026: "make it blue on our new website").
   It opens the Chat & FAQs panel; the WhatsApp link inside the panel keeps WhatsApp's own green. */
.cp-chat-btn { position: fixed; bottom: calc(70px + env(safe-area-inset-bottom) + 12px); right: 16px; width: 52px; height: 52px; padding: 0; background: var(--cp-navy); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 101; box-shadow: 0 4px 12px rgba(0, 0, 0, .25); border: none; }
.cp-chat-btn svg { width: 28px; height: 28px; fill: #fff; }
@media (min-width: 750px) { .cp-chat-btn { bottom: 24px; } }
.cp-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, .5); z-index: 300; align-items: flex-end; justify-content: center; padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
.cp-overlay.open { display: flex; }
@media (min-width: 750px) { .cp-overlay { align-items: flex-end; justify-content: flex-end; padding: 0 24px 90px; } }
.cp-modal { background: #fff; border-radius: 16px 16px 0 0; width: 100%; max-width: 420px; max-height: 80vh; display: flex; flex-direction: column; box-shadow: 0 -4px 24px rgba(0, 0, 0, .15); }
.cp-modal:focus { outline: none; }
@media (min-width: 750px) { .cp-modal { border-radius: 16px; } }
.cp-modal__head { padding: 18px 20px 10px; display: flex; justify-content: space-between; align-items: flex-start; flex-shrink: 0; }
.cp-modal__title { font-size: 18px; line-height: 1.8; font-weight: 700; color: #222; margin: 0; }
.cp-modal__line { display: block; width: 36px; height: 3px; background: var(--cp-navy); border-radius: 2px; margin-top: 6px; }
.cp-modal__close { background: none; border: none; font-size: 24px; color: #999; cursor: pointer; padding: 0; line-height: 1; }
.cp-modal__list { overflow-y: auto; padding: 0 20px; flex: 1; }
.cp-fi { border-bottom: 1px solid #f0f0f0; }
.cp-fi:last-child { border-bottom: none; }
.cp-fq { width: 100%; display: flex; justify-content: space-between; align-items: center; background: none; border: none; padding: 13px 0; cursor: pointer; font: inherit; font-size: 13px; line-height: 1.6; font-weight: 500; color: #222; text-align: left; gap: 8px; }
.cp-fq span:last-child { font-size: 20px; color: var(--cp-navy); flex-shrink: 0; line-height: 1; }
.cp-fa { font-size: 12px; color: #555; padding: 0 0 12px; line-height: 1.6; display: none; }
.cp-fa p { margin: 0; }
.cp-modal__foot { padding: 14px 20px 18px; border-top: 1px solid #f0f0f0; flex-shrink: 0; }
.cp-wa-link { display: flex; align-items: center; justify-content: center; gap: 8px; background: #25D366; color: #fff; padding: 13px; border-radius: 10px; font-size: 14px; line-height: 1.8; font-weight: 600; text-decoration: none; }
.cp-wa-link svg { width: 20px; height: 20px; flex-shrink: 0; fill: currentColor; }

/* ---------- motion: small and quick, off when the visitor asks for less ---------- */
@media (prefers-reduced-motion: no-preference) {
	.cp-announce__msg { transition: opacity .35s ease, visibility .35s; }
	.cp-announce__dots i { transition: width .25s ease, background-color .25s ease; }
	.cp-search__hint b { transition: opacity .2s ease; }
	.cp-search__hint.is-turning b { opacity: 0; }
	.cp-header { transition: box-shadow .2s ease; }
	.cp-header__menu { transition: width .3s ease, opacity .3s ease, margin .3s ease, visibility .3s; }
	.cp-nav, .cp-strip { transition: max-height .3s ease, opacity .3s ease, visibility .3s; }
	.cp-header__loc, .cp-header__icon, .cp-search__go, .cp-locpop__geo, .cp-dc__btn { transition: background-color .15s ease, border-color .15s ease; }
	.cp-nav__panel { transition: opacity .2s ease, transform .2s ease, visibility .2s; }
	.cp-nav__caret svg, .cp-drawer__fold .cp-icon { transition: transform .2s ease; }
	.cp-drawer { transition: visibility 0s .3s; }
	.cp-drawer.is-open { transition-delay: 0s; }
	.cp-drawer__overlay { transition: opacity .3s ease; }
	/* visibility switches at once on the way in (so the keyboard can land inside straight away) and after the slide on the way out */
	.cp-drawer__panel { transition: transform .3s ease; }
	.cp-drawer__sub { transition: transform .3s ease, visibility 0s .3s; }
	.cp-drawer__sub.is-open { transition: transform .3s ease, visibility 0s 0s; }
}
@media (prefers-reduced-motion: reduce) {
	.cp-seo-footer summary::after, .cp-footer .cpf-cta, .cp-footer .cpf-social a, .mob-nav__btn, .cp-foot-fold .cpsf-col > h3::after, .cp-foot-fold .cpf-col > .cpf-h::after { transition: none !important; }
	.cp-footer .cpf-cta:hover { transform: none; }
}

/* ---------- page not found ---------- */
.cp-404 { text-align: center; padding-block: 56px 72px; background: var(--cp-white, #fff); }
.cp-404__code { margin: 0; font-size: 14px; letter-spacing: .08em; color: var(--cp-caption, #6b7280); }
.cp-404__title { margin: 8px 0 24px; }