/* =====================================================================
   LAAS · the cart and the checkout (cart-v2.html, checkout-v2.html)
   Loaded after darkroom.css and buy.css: the voices, the nav capsule, the
   menu, the footer, the quantity stepper, the trust row and the payment
   marks come from there. White cards on Chalk, one Dark Green pill.
   Phone first: everything below is laid out for 375 px, then widened.
   ===================================================================== */

.shop-page [hidden] { display: none !important; }
.shop { --side: 400px; }

/* ------------------------------------------------------------ the head */
.shop__head { max-width: 1480px; margin: 0 auto; padding: 116px var(--gutter) 32px; }
.shop__head .void__index { margin-bottom: 18px; }
.shop__title { font-size: clamp(40px, 4.4vw, 64px); }
.shop__lead { margin-top: 16px; font-size: 17px; }
.crumb { color: var(--muted); display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin: -14px 0; }
.crumb::after { content: "→"; font-family: var(--body); letter-spacing: 0; }
.crumb:hover { color: var(--green); }

/* ------------------------------------------------------------ the grid */
.shop__grid { max-width: 1480px; margin: 0 auto; padding: 0 var(--gutter) clamp(64px, 7vw, 112px); display: grid; grid-template-columns: minmax(0, 1fr) var(--side); gap: 24px; align-items: start; }
.shop__main { display: grid; gap: 16px; min-width: 0; }
.shop__side { position: sticky; top: 100px; min-width: 0; }
.card { background: #FFFFFF; border-radius: 24px; padding: clamp(20px, 2vw, 28px); box-shadow: 0 1px 1px rgba(32, 47, 48, .04), 0 24px 60px -36px rgba(32, 47, 48, .3); }

/* the one button */
.pill-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 56px; padding: 0 28px; border-radius: 999px; background: var(--green); color: #FFFFFF; font: 600 17px/1.2 var(--display); letter-spacing: -0.01em; white-space: nowrap; transition: background-color .25s; cursor: pointer; border: 0; }
.pill-btn:hover { background: var(--ink); }
.pill-btn--wide { width: 100%; justify-content: space-between; padding: 0 8px 0 28px; }
.pill-btn--wide b { padding: 11px 14px; border-radius: 30px; background: rgba(255, 255, 255, .16); font-weight: 600; font-variant-numeric: tabular-nums; }
.pill-btn[aria-disabled="true"], .pill-btn:disabled { opacity: .5; cursor: not-allowed; }
.pill-btn[type="submit"].pill-btn--wide { justify-content: center; padding: 0 28px; }

/* ------------------------------------------------------------ the lines */
.lines { display: grid; }
.line { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto auto; align-items: center; gap: 8px 20px; padding: 18px 0; border-bottom: var(--dash); }
.line:first-child { padding-top: 0; }
.line:last-child { padding-bottom: 0; border-bottom: 0; }
.line__pic { width: 88px; aspect-ratio: 1; border-radius: 16px; overflow: hidden; background: #F4F4F2; box-shadow: inset 0 0 0 1px rgba(32, 47, 48, .06); }
.line__pic img { width: 100%; height: 100%; object-fit: cover; }
.line__name { font: 600 18px/1.2 var(--display); letter-spacing: -0.02em; }
.line__meta { margin-top: 4px; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.line__rm { display: inline-flex; align-items: center; min-height: 44px; margin: -6px 0 -12px; font-size: 14px; color: var(--muted); text-decoration: underline dashed; text-underline-offset: 4px; text-decoration-color: rgba(32, 47, 48, .35); }
.line__rm:hover { color: var(--stop); }
.line__qty button { width: 44px; height: 44px; }
.line__qty button:disabled { opacity: .3; cursor: default; background: none; }
.line__sum { min-width: 84px; text-align: right; font: 600 18px/1 var(--display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.lines--ro .line { grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; padding: 14px 0; }
.lines--ro .line__pic { width: 64px; border-radius: 12px; }
.lines--ro .line__name { font-size: 16px; }
.lines--ro .line__sum { font-size: 16px; min-width: 0; }

/* ------------------------------------------------------------ the offers */
.offer { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; align-items: center; gap: 16px 22px; }
.offer__pic { width: 112px; aspect-ratio: 1; border-radius: 16px; overflow: hidden; background: #F4F4F2; }
.offer__pic img { width: 100%; height: 100%; object-fit: cover; }
.offer__kicker { color: var(--muted); font-size: 11px; margin-bottom: 8px; }
.offer__h { font: 600 20px/1.2 var(--display); letter-spacing: -0.02em; }
.offer__p { margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--muted); max-width: 40em; }
.offer__add { min-height: 48px; padding: 0 6px 0 18px; gap: 10px; font: 500 15px/1 var(--display); background: #FFFFFF; }
.offer__add b { padding: 9px 12px; border-radius: 30px; background: rgba(155, 205, 208, .45); font-weight: 500; }
.offer__add:hover { border-color: var(--green); background: #FFFFFF; }
.offer--quiet { background: rgba(255, 255, 255, .55); box-shadow: inset 0 0 0 1px rgba(32, 47, 48, .08); }
.offer--quiet .offer__pic { background: #FFFFFF; }

/* ------------------------------------------------------------ the summary */
.summary { display: flex; flex-direction: column; gap: 18px; }
.summary__h { font: 600 22px/1.1 var(--display); letter-spacing: -0.02em; }
.meter { display: grid; gap: 10px; padding: 14px 16px; border-radius: 16px; background: var(--paper); }
.meter__label { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 14px; color: var(--ink-2); }
.meter__label .label { color: var(--muted); font-size: 11px; }
.meter__bar { position: relative; display: block; height: 6px; border-radius: 6px; background: rgba(32, 47, 48, .1); overflow: hidden; }
.meter__bar i { position: absolute; inset: 0 auto 0 0; width: var(--fill, 0%); border-radius: 6px; background: var(--green); transition: width .6s var(--ease); }
.sums { display: grid; }
.sums div { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 0; font-size: 15px; }
.sums dt { color: var(--muted); }
.sums dd { font-variant-numeric: tabular-nums; color: var(--ink); }
.sums .sums__total { margin-top: 8px; padding-top: 16px; border-top: 1px solid rgba(32, 47, 48, .12); }
.sums__total dt, .sums__total dd { font: 600 22px/1 var(--display); letter-spacing: -0.02em; color: var(--ink); }
.summary__vat, .summary__fine { font-size: 13.5px; }
.summary .trust-row { font-size: 13px; gap: 8px 16px; }

/* ------------------------------------------------------------ empty */
.empty { margin: 0 max(var(--gutter), calc((100% - 1480px) / 2 + var(--gutter))) clamp(64px, 7vw, 112px); display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 28px; align-items: center; }
.empty__pic { width: 160px; height: 160px; border-radius: 20px; background: #FFFFFF; object-fit: contain; box-shadow: inset 0 0 0 1px rgba(32, 47, 48, .06); }
.empty__h { font: 600 28px/1.1 var(--display); letter-spacing: -0.03em; }
.empty__p { margin: 8px 0 20px; color: var(--muted); font-size: 16px; }

/* ------------------------------------------------------------ checkout */
.co { grid-template-columns: minmax(0, 1fr) 420px; }
.co__main { grid-column: 1; grid-row: 1; }
.co__side { grid-column: 2; grid-row: 1; }
.co-block { margin: 0; border: 0; display: grid; gap: 14px; padding: 0 clamp(20px, 2vw, 28px) clamp(20px, 2vw, 28px); min-width: 0; }
.co-block__h { float: left; width: 100%; padding: clamp(20px, 2vw, 28px) 0 4px; font: 600 20px/1.2 var(--display); letter-spacing: -0.02em; }
.field { display: grid; gap: 6px; min-width: 0; }
.field label { font: 500 14px/1.3 var(--body); color: var(--ink-2); }
.field label span { font-weight: 400; color: var(--muted); }
.field input, .field select, .co-promo input {
  width: 100%; min-width: 0; height: 52px; padding: 0 16px; border-radius: 14px; border: 1px solid rgba(32, 47, 48, .32); background: #FFFFFF;
  font: 400 16px/1.2 var(--body); color: var(--ink); transition: border-color .2s, box-shadow .2s;
}
.field select { appearance: none; padding-right: 44px; background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23202F30' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 16px center / 16px no-repeat; }
.field input::placeholder, .co-promo input::placeholder { color: var(--muted); }
.field input:focus, .field select:focus, .co-promo input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(29, 95, 99, .16); }
.was-checked .field input:invalid { border-color: var(--stop); background: #FFFFFF; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.row2--narrow { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); }
.check { display: flex; align-items: center; gap: 12px; min-height: 44px; font-size: 15px; color: var(--ink-2); cursor: pointer; }
.check input, .method input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--green); }
.express { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.express__btn { min-height: 52px; padding: 0 10px; border-radius: 14px; background: var(--ink); color: var(--paper); font: 500 15px/1 var(--display); transition: background-color .2s; }
.express__btn:hover { background: var(--ink); }
.or-line { display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--muted); }
.or-line::before, .or-line::after { content: ""; flex: 1; border-top: var(--dash); }
.methods { display: grid; gap: 8px; }
.method { display: flex; align-items: center; gap: 14px; min-height: 58px; padding: 0 14px 0 16px; border-radius: 14px; border: 1px solid rgba(32, 47, 48, .2); cursor: pointer; transition: border-color .2s, background-color .2s, box-shadow .2s; }
.method:hover { border-color: rgba(32, 47, 48, .4); }
.method:has(input:checked) { border-color: var(--green); background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--green); }
.method:has(input:focus-visible) { outline: 2px solid var(--green); outline-offset: 2px; }
.method__name { flex: 1; font: 500 15px/1.2 var(--display); }
.method__marks { display: flex; gap: 6px; }
.method__marks img { width: 44px; height: 30px; padding: 5px 6px; border-radius: 6px; border: 1px solid rgba(32, 47, 48, .13); background: #FFFFFF; object-fit: contain; }
.method__marks--klarna img { background: #FFB3C7; border-color: #FFB3C7; }
.co-pay { display: grid; gap: 14px; padding: 8px 0 0; }
.co-msg { padding: 14px 16px; border-radius: 14px; background: rgba(176, 114, 73, .12); color: var(--ink); font-size: 15px; line-height: 1.45; }

.co-sum { gap: 0; }
.co-sum > * + * { margin-top: 16px; }
.co-sum__toggle { list-style: none; display: flex; align-items: center; gap: 12px; }
.co-sum__toggle::-webkit-details-marker { display: none; }
.co-sum__peek, .co-sum__toggle i { display: none; }
.co-sum__edit { font-size: 14px; }
.co-sum__edit { margin-top: 8px !important; }
.co-sum__edit .link { display: inline-block; padding: 12px 0; margin: -12px 0; border-bottom: 0; text-decoration: underline dashed var(--green); text-underline-offset: 4px; }
.co-promo { border-top: var(--dash); border-bottom: var(--dash); }
.co-promo summary { list-style: none; display: flex; align-items: center; min-height: 48px; font-size: 15px; color: var(--green); cursor: pointer; }
.co-promo summary::-webkit-details-marker { display: none; }
.co-promo summary::after { content: "+"; margin-left: auto; font: 500 18px/1 var(--display); }
.co-promo[open] summary::after { content: "−"; }
.co-promo__row { display: flex; gap: 8px; padding-bottom: 14px; }
.co-promo__row input { flex: 1; height: 48px; }
.co-promo__row .ghost { min-height: 48px; padding: 0 18px; font: 500 15px/1 var(--display); }
.co-promo .fine { padding-bottom: 14px; font-size: 14px; }

.after { max-width: 1480px; margin: 0 auto; padding: clamp(48px, 5vw, 80px) var(--gutter) clamp(64px, 7vw, 112px); border-top: var(--dash); }
.after__h { font-size: clamp(32px, 3.2vw, 48px); }
.after__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 32px; margin-top: 32px; }
.after__steps li { padding-top: 18px; border-top: 1px solid rgba(32, 47, 48, .12); }
.after__steps .label { color: var(--muted); }
.after__steps h3 { margin: 10px 0 8px; font: 600 19px/1.25 var(--display); letter-spacing: -0.02em; }
.after__steps p { font-size: 15px; line-height: 1.55; color: var(--muted); }

.paybar { display: none; }

/* ------------------------------------------------------------ mid widths */
@media (max-width: 1100px) {
  .shop { --side: 360px; }
  .co { grid-template-columns: minmax(0, 1fr) 380px; }
}
@media (max-width: 900px) and (min-width: 761px) {
  .line { grid-template-columns: 72px minmax(0, 1fr) auto; grid-template-areas: "pic what sum" "pic qty qty"; }
  .line__pic { grid-area: pic; width: 72px; } .line__what { grid-area: what; } .line__qty { grid-area: qty; justify-self: start; } .line__sum { grid-area: sum; }
}

/* ------------------------------------------------------------ phones */
@media (max-width: 760px) {
  .shop__head { padding: 84px var(--gutter) 20px; }
  .shop__head .void__index { margin-bottom: 10px; }
  .shop__title { font-size: clamp(34px, 9.6vw, 42px); }
  .shop__lead { font-size: 16px; margin-top: 10px; }

  .shop__grid, .co { display: flex; flex-direction: column; gap: 16px; padding-bottom: 48px; }
  .shop__main, .shop__side { width: 100%; }
  .shop__side { position: static; }
  .card { padding: 20px; border-radius: 20px; }

  /* a line: picture left, name over the stepper, the price on the right */
  .line { grid-template-columns: 72px minmax(0, 1fr) auto; grid-template-areas: "pic what what" "pic qty sum"; gap: 10px 14px; align-items: center; }
  .line__pic { grid-area: pic; width: 72px; align-self: start; border-radius: 14px; }
  .line__what { grid-area: what; }
  .line__qty { grid-area: qty; justify-self: start; }
  .line__sum { grid-area: sum; min-width: 0; font-size: 17px; }
  .line__name { font-size: 17px; }
  .lines--ro .line { grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-areas: none; }
  .lines--ro .line__pic, .lines--ro .line__what, .lines--ro .line__sum { grid-area: auto; }
  .lines--ro .line__pic { width: 56px; align-self: center; }

  .offer { grid-template-columns: 80px minmax(0, 1fr); gap: 14px 16px; align-items: start; }
  .offer__pic { width: 80px; border-radius: 14px; }
  .offer__h { font-size: 18px; }
  .offer__p { font-size: 14.5px; }
  .offer__add { grid-column: 1 / -1; justify-content: space-between; width: 100%; min-height: 50px; }

  .summary .pill-btn--wide { display: none; }   /* the bar at the bottom carries it */

  .empty { grid-template-columns: 1fr; justify-items: start; gap: 18px; margin: 0 var(--gutter) 64px !important; }
  .empty__pic { width: 120px; height: 120px; }
  .empty > div { width: 100%; }
  .empty .pill-btn { width: 100%; }

  /* checkout: the order folds into one line at the top */
  .co__side { order: -1; }
  .co-sum__toggle { min-height: 48px; margin: -6px 0; cursor: pointer; }
  .co-sum__peek { display: inline; margin-left: auto; font-size: 14px; color: var(--muted); white-space: nowrap; }
  .co-sum__peek b { color: var(--ink); font: 600 16px/1 var(--display); }
  .co-sum__toggle i { display: block; flex: none; position: relative; width: 32px; height: 32px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(32, 47, 48, .12); }
  .co-sum__toggle i::before { content: ""; position: absolute; left: 50%; top: 45%; width: 8px; height: 8px; border: solid var(--ink); border-width: 0 1.5px 1.5px 0; translate: -50% -50%; rotate: 45deg; transition: rotate .3s var(--ease), top .3s var(--ease); }
  .co-sum[open] .co-sum__toggle i::before { rotate: -135deg; top: 58%; }
  .co-sum .summary__h { font-size: 18px; }
  .co-block { padding: 0 20px 20px; }
  .co-block__h { padding-top: 20px; font-size: 18px; }
  .express__btn { font-size: 14px; padding: 0 6px; }
  .co-pay > .pill-btn { display: none; }
  .after { padding: 40px var(--gutter) 56px; }
  .after__steps { grid-template-columns: 1fr; margin-top: 20px; }

  /* the bar: the total and the one button, always in reach */
  .paybar:not([hidden]) {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 45;
    padding: 6px 6px 6px 20px; border-radius: 22px; border: 1px solid rgba(32, 47, 48, .1);
    background: color-mix(in srgb, var(--paper) 84%, transparent); -webkit-backdrop-filter: saturate(170%) blur(16px); backdrop-filter: saturate(170%) blur(16px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 14px 40px -20px rgba(32, 47, 48, .45);
  }
  .paybar__sum { display: grid; gap: 3px; }
  .paybar__sum span { font-size: 12px; color: var(--muted); }
  .paybar__sum b { font: 600 20px/1 var(--display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
  .paybar .pill-btn { min-height: 50px; padding: 0 24px; font-size: 16px; }
}

/* =====================================================================
   The cart (cart-v2.html): one narrow column. Each thing is its own white
   card with Ink type, the lock on a Chalk tile, Pale Teal only as the small accent on the tag (the lock on a light tile, name, finish, price, a tag, − n +);
   the sum and the one button sit in a white card below.
   ===================================================================== */
.cart__wrap { max-width: 520px; margin: 0 auto; padding: 112px var(--gutter) clamp(56px, 6vw, 96px); display: grid; gap: 12px; }
.cart__h { display: flex; align-items: baseline; gap: 12px; margin: 0 0 6px; font: 600 clamp(28px, 2.6vw, 34px)/1.1 var(--display); letter-spacing: -0.03em; }
.cart__h:focus { outline: none; }
.cart__n { font: 500 14px/1 var(--body); letter-spacing: 0; color: var(--muted); }
.items { display: grid; gap: 12px; }

.item { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 14px 16px 14px 14px; border-radius: 26px; background: #FFFFFF; color: #202F30; box-shadow: 0 1px 1px rgba(32, 47, 48, .04), 0 18px 40px -26px rgba(32, 47, 48, .35); }
.item__pic { width: 84px; aspect-ratio: 1; border-radius: 18px; background: #ECECEA; display: grid; place-items: center; overflow: hidden; }
.item__pic img { width: 88%; height: 88%; object-fit: contain; }
.item__name { font: 600 18px/1.15 var(--display); letter-spacing: -0.02em; margin-bottom: 4px; }
.item__meta { font: 500 14px/1.45 var(--body); color: #606A74; font-variant-numeric: tabular-nums; }
.item__tag { display: inline-block; margin-top: 8px; padding: 5px 11px; border-radius: 999px; background: #9BCDD0; font: 600 12px/1 var(--display); color: #202F30; }
.item__qty { display: flex; align-items: center; gap: 6px; }
.item__qty button { width: 38px; height: 38px; border-radius: 12px; background: #ECECEA; color: #202F30; font: 500 20px/1 var(--display); display: grid; place-items: center; position: relative; transition: background-color .2s; }
.item__qty button::before { content: ""; position: absolute; inset: -3px; }   /* a 44 px target */
.item__qty button:hover { background: #9BCDD0; }
.item__qty button:disabled { opacity: .4; cursor: default; background: #ECECEA; }
.item__qty svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.item__qty span { min-width: 22px; text-align: center; font: 600 17px/1 var(--display); font-variant-numeric: tabular-nums; }
.item--empty .item__name { font-size: 16px; }
.item__go { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; background: #1D5F63; color: #FFFFFF; font: 600 14px/1 var(--display); white-space: nowrap; }
.item__go:hover { background: var(--ink); }

/* the Flex Mount: one quiet line */
.addon { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 10px 10px 12px; border-radius: 18px; background: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(32, 47, 48, .06); }
.addon img { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; }
.addon p { font-size: 13px; line-height: 1.4; color: var(--muted); }
.addon b { color: var(--ink); font-weight: 600; }
.addon .link { white-space: nowrap; }
.addon__btn { min-height: 36px; padding: 0 14px; border-radius: 999px; background: #ECECEA; color: var(--ink); font: 600 13px/1 var(--display); white-space: nowrap; transition: background-color .2s; }
.addon__btn:hover { background: #D6D9D9; }

/* the sum and the button */
.cart .cart__card { padding: 18px 20px 20px; border-radius: 22px; }
.cart .sums div { padding: 5px 0; font-size: 14px; }
.cart .sums small { margin-left: 6px; font-size: 12px; color: var(--muted); opacity: .8; }
.cart .sums .sums__total { margin-top: 6px; padding-top: 12px; }
.cart .sums__total dt, .cart .sums__total dd { font-size: 18px; }
.cart .sums__total small { font: 400 12px/1 var(--body); letter-spacing: 0; }
.cart__go { width: 100%; min-height: 52px; margin-top: 14px; font-size: 16px; }
.cart__fine { margin-top: 12px; text-align: center; font-size: 12.5px; color: var(--muted); }
.cart .cart__pay { justify-content: center; margin-top: 10px !important; gap: 6px; }
.cart__pay li { width: 40px; height: 26px; padding: 4px 6px; }

@media (max-width: 760px) {
  .cart__wrap { padding-top: 84px; gap: 10px; }
  .item { grid-template-columns: 68px minmax(0, 1fr) auto; gap: 12px; padding: 12px; border-radius: 22px; }
  .item__pic { width: 68px; border-radius: 15px; }
  .item__name { font-size: 16px; }
  .item__meta { font-size: 13px; }
  .item__qty { gap: 4px; }
  .item__qty button { width: 34px; height: 34px; border-radius: 10px; font-size: 18px; }
  .item__qty button::before { inset: -5px; }
  .item--empty { grid-template-columns: 68px minmax(0, 1fr); }
  .item--empty .item__go { grid-column: 1 / -1; justify-content: center; }
  .addon { grid-template-columns: 40px minmax(0, 1fr); }
  .addon__btn { grid-column: 1 / -1; min-height: 44px; }
}

/* all of it in one white card: the lines, the Flex Mount, the sum and the button */
.cart__box { background: #FFFFFF; border-radius: 26px; padding: 6px 20px 20px; box-shadow: 0 1px 1px rgba(32, 47, 48, .04), 0 24px 60px -36px rgba(32, 47, 48, .3); }
.cart__box .items { gap: 0; }
.cart__box .item { background: none; box-shadow: none; border-radius: 0; padding: 16px 0; border-bottom: var(--dash); }
.cart__box .addon { margin-top: 14px; background: #ECECEA; box-shadow: none; }
.cart__box .addon__btn { background: #FFFFFF; }
.cart__sum { margin-top: 10px; }
@media (max-width: 760px) { .cart__box { padding: 4px 14px 16px; border-radius: 22px; } .cart__box .item { padding: 14px 0; } }

/* the two offers, half and half (one alone takes the whole width) */
.addons { display: flex; gap: 10px; margin-top: 14px; }
.addons:not(:has(.addon:not([hidden]))) { display: none; }
.cart__box .addons .addon { flex: 1 1 0; min-width: 0; margin: 0; grid-template-columns: 36px minmax(0, 1fr); grid-template-rows: auto auto; align-items: start; gap: 10px; padding: 12px; }
.addons .addon img { width: 36px; height: 36px; border-radius: 9px; object-fit: cover; background: #FFFFFF; }
#offer-second img { object-fit: contain; padding: 2px; }
.addons .addon p { font-size: 12.5px; }
.addons .addon__btn { grid-column: 1 / -1; width: 100%; min-height: 40px; }
@media (max-width: 760px) { .addons .addon__btn { min-height: 44px; } }

/* the second lock's finish: three small dots, as on the buy page */
.pick { display: flex; align-items: center; gap: 2px; margin: 6px 0 0 -6px; }
.pick button { position: relative; width: 32px; height: 32px; border-radius: 50%; }
.pick button::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); }
.pick button::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; box-shadow: 0 0 0 1px #202F30; opacity: 0; transition: opacity .2s; }
.pick button[aria-checked="true"]::after { opacity: 1; }
.pick__name { margin-left: 4px; font: 600 11px/1 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 760px) { .pick button { width: 36px; height: 36px; } .pick button::before { inset: 9px; } .pick button::after { inset: 5px; } }
/* the two offers line up: same height, the Add buttons on one line at the bottom */
.addons { align-items: stretch; }
.cart__box .addons .addon { grid-template-rows: 1fr auto; }
.addons .addon__btn { align-self: end; }
/* the dots: one size, a thin ring on the picked one, the focus ring tight to it */
.pick { gap: 4px; margin: 8px 0 0 -4px; }
.pick button, .pick button:hover { width: 28px; height: 28px; transform: none; }
.pick button::before { inset: 6px; }
.pick button::after { inset: 2px; box-shadow: 0 0 0 1.5px #202F30; }
.pick button:focus-visible { outline: 2px solid #1D5F63; outline-offset: 1px; }
@media (max-width: 760px) { .pick button { width: 32px; height: 32px; } .pick button::before { inset: 8px; } .pick button::after { inset: 4px; } }
/* the dots never squeeze: always round, the name gives way instead */
.pick { flex-wrap: nowrap; min-width: 0; }
.pick button { flex: none; aspect-ratio: 1; }
.pick__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* =====================================================================
   The checkout (checkout-v2.html): the cart's narrow column and one white
   card: the order, express pay, delivery, payment tabs and Pay.
   ===================================================================== */
.co2__crumb { margin: 0 0 -4px; font-size: 13px; }
.co2__box { padding: 4px 20px 20px; }
.co2__sec { padding: 18px 0; border-top: var(--dash); display: grid; gap: 12px; }
.co2__sec:first-child { border-top: 0; }
.co2__sec:last-child { padding-bottom: 0; }
.co2__h { display: flex; align-items: baseline; justify-content: space-between; font: 600 16px/1.2 var(--display); letter-spacing: -0.01em; }
.co2__edit { font: 500 13px/1 var(--body); }
.co2 .lines--ro .line { grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; padding: 8px 0; border: 0; }
.co2 .lines--ro .line__pic { width: 48px; border-radius: 10px; }
.co2 .lines--ro .line__pic img { object-fit: contain; }
.co2 .lines--ro .line__name { font-size: 14px; }
.co2 .lines--ro .line__meta { font-size: 12.5px; margin-top: 1px; }
.co2 .lines--ro .line__sum { font-size: 14px; }
.co2 .sums { margin-top: 0; padding-top: 4px; }
.co2 .co-promo { border: 0; }
.co2 .co-promo summary { min-height: 32px; font-size: 13px; }

/* express: three light pills */
.express2 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.express2 button { display: flex; align-items: center; justify-content: center; gap: 6px; height: 44px; border-radius: 12px; background: #ECECEA; font: 600 13px/1 var(--display); color: #202F30; transition: background-color .2s; }
.express2 button:hover { background: #D6D9D9; }
.express2 img { width: 34px; height: 20px; object-fit: contain; }
.express2 button:first-child img { width: 18px; }
.co2 .or-line { font-size: 12px; }

/* the fields: compact */
.co2 .field label { font-size: 12.5px; }
.co2 .field input, .co2 .field select { height: 46px; border-radius: 12px; font-size: 15px; padding: 0 14px; }
.co2 .row2 { gap: 10px; }
.co2 .check { min-height: 32px; font-size: 13.5px; }

/* payment: one row of small tabs */
.paytabs { display: flex; flex-wrap: wrap; gap: 6px; }
.paytabs label { position: relative; cursor: pointer; }
.paytabs input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.paytabs span { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 999px; background: #ECECEA; font: 600 13px/1 var(--display); color: #202F30; transition: background-color .2s, color .2s; }
.paytabs label:hover span { background: rgba(32, 47, 48, .1); }
.paytabs input:checked + span { background: #1D5F63; color: #FFFFFF; }
.paytabs input:focus-visible + span { outline: 2px solid #202F30; outline-offset: 2px; }
.co2__note { font-size: 12.5px; margin-top: -2px; }
.co2 .co-msg { font-size: 13.5px; padding: 12px 14px; }

@media (max-width: 760px) {
  .co2__box { padding: 2px 14px 16px; }
  .express2 button:first-child { font-size: 0; }
  .express2 button:first-child img { width: 22px; }
}

/* the payment tabs carry the marks; the picked one turns white with a Deep Teal ring, so every mark stays legible */
.paytabs span { gap: 7px; height: 40px; padding: 0 14px; background: #ECECEA; box-shadow: inset 0 0 0 1.5px transparent; }
.paytabs img { width: 36px; height: 22px; object-fit: contain; }
.paytabs span img + img { margin-left: -4px; }
.paytabs .paytabs__mp { width: 18px; }
.paytabs .paytabs__klarna { width: 50px; height: 26px; border-radius: 6px; background: #FFB3C7; }
.paytabs__card { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.paytabs input:checked + span { background: #FFFFFF; color: #202F30; box-shadow: inset 0 0 0 2px #1D5F63; }
.paytabs label:hover input:not(:checked) + span { background: rgba(32, 47, 48, .1); }
.paytabs { display: grid; grid-template-columns: repeat(5, auto); justify-content: start; gap: 6px; }
.paytabs span { width: 100%; justify-content: center; }
@media (max-width: 560px) { .paytabs { grid-template-columns: repeat(6, 1fr); } .paytabs label { grid-column: span 2; } .paytabs label:nth-child(n+4) { grid-column: span 3; } }

/* short pages (an empty cart): the footer still sits at the bottom of the screen, never halfway up */
.shop-page main.shop { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
.shop-page main.shop > .foot { margin-top: auto; }


/* an empty cart or checkout: the small card sits in the middle of the space above the footer */
html.is-empty .shop-page .cart__wrap { flex: 1; width: 100%; align-content: center; padding-bottom: 96px; }
.pick__name { letter-spacing: .08em; font-size: 11px; }
/* on a phone the ringed dot says which finish: the name would push the card wider than the screen */
@media (max-width: 760px) { .addons .pick__name { display: none; } .addon { min-width: 0; overflow: hidden; } }

/* the lock thumbnails: rendered straight on, on a transparent ground, so no tile behind them */
.item__pic, .cart-page .line__pic, .co2 .lines--ro .line__pic, .lines--ro .line__pic, .addons #offer-second img { background: none; box-shadow: none; }
.item__pic img, .line__pic img { width: 100%; height: 100%; object-fit: contain; }
#offer-second img { padding: 0; }

/* the terms of sale and the privacy policy: one narrow column of text on the page */
.legal__wrap { max-width: 680px; margin: 0 auto; padding: 112px var(--gutter) clamp(56px, 6vw, 96px); }
.legal__wrap h2 { margin: 40px 0 10px; font: 600 20px/1.25 var(--display); letter-spacing: -0.01em; color: var(--ink); }
.legal__wrap p { margin: 0 0 12px; font: 400 16px/1.6 var(--body); color: var(--ink-2); }
.legal__lead { font-size: 18px !important; color: var(--ink) !important; }
.legal__form { margin-top: 12px; padding: 20px 22px; border-radius: 20px; background: #FFFFFF; }
.legal__form p:last-child { margin: 0; line-height: 2; }
@media (max-width: 760px) { .legal__wrap { padding-top: 84px; } }

/* our promises: two cards, each with its badge, one sentence, three steps and the small print */
.pr { max-width: 860px; }
.pr__top { margin-bottom: 28px; }
.pr__kicker { color: var(--muted); margin-bottom: 10px; }
.pr__lead { margin-top: 12px; font-size: 18px; line-height: 1.5; color: var(--ink-2); max-width: 34em; }
.pr__card { margin-top: 20px; padding: clamp(24px, 4vw, 40px); border-radius: 28px; background: #FFFFFF; scroll-margin-top: 110px; }
.pr__head { display: grid; grid-template-columns: 132px 1fr; gap: 28px; align-items: center; }
.pr__badge { justify-items: center; justify-self: center; text-align: center; }
.pr__badge.badge--57 b { font-size: 64px; }
.pr__badge.badge--57 span { font-size: 13px; }
.pr__badge.badge--kym b { font-size: 22px; max-width: 6em; text-align: center; }
.pr__badge.badge--kym i { width: 70%; height: 4px; margin: 10px auto 8px; }
.pr__badge.badge--kym span { font-size: 13px; }
.pr__card h2 { margin: 0; font: 600 clamp(26px, 3.2vw, 36px)/1.08 var(--display); letter-spacing: -0.03em; color: var(--ink); }
.pr__sum { margin-top: 10px; font-size: 17px; line-height: 1.5; color: var(--ink-2); }
.pr__steps { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; counter-reset: none; }
.pr__steps li { display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: start; padding: 18px; border-radius: 18px; background: var(--paper, #ECECEA); }
.pr__steps li > b { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--green); color: #FFFFFF; font: 600 14px/1 var(--display); }
.pr__steps h3 { margin: 4px 0 4px; font: 600 16px/1.2 var(--display); color: var(--ink); letter-spacing: -0.01em; }
.pr__steps p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.pr__fine { margin-top: 18px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.pr__cta { margin: 32px 0 8px; }
.pr__cta .buy-btn { display: inline-flex; padding: 0 28px; }
@media (max-width: 760px) {
  .pr__head { grid-template-columns: 1fr; gap: 16px; }
  .pr__badge { justify-self: start; justify-items: start; text-align: left; }
  .pr__badge.badge--kym b { text-align: left; } .pr__badge.badge--kym i { margin-left: 0; }
  .pr__steps { grid-template-columns: 1fr; }
  .pr__lead { font-size: 16px; }
}
.pr__badge { align-content: center; gap: 0; height: auto; }
@media (max-width: 760px) { .pr__badge.badge--57 b { font-size: 52px; } .pr__head { gap: 12px; } }
.pr .cart__h { color: var(--ink); margin: 0; }
.pr__badge > b, .pr__badge > span { margin: 0; line-height: 1; display: block; }
.pr__badge.badge--57 span { margin-top: 4px; }
/* promises: tidier spacing (these beat the legal page's own paragraph rules) */
.pr .pr__kicker { margin: 0 0 10px; font: 500 12px/1 var(--display); letter-spacing: .12em; color: var(--muted); }
.pr .pr__lead { margin: 14px 0 0; font-size: 18px; line-height: 1.5; color: var(--ink-2); }
.pr .pr__sum { margin: 10px 0 0; font-size: 17px; line-height: 1.5; }
.pr .pr__steps p { margin: 0; font-size: 14px; line-height: 1.5; }
.pr .pr__fine { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--line-2); font-size: 13px; line-height: 1.55; color: var(--muted); }
.pr .pr__badge { margin: 0; }
.pr .pr__cta { margin: 28px 0 0; }
.pr__cta .buy-btn { gap: .35em; }
.pr__card + .pr__card { margin-top: 16px; }
.pr__steps { margin-top: 24px; gap: 10px; }
.pr__steps li { padding: 16px; gap: 12px; }
.pr__steps h3 { margin: 5px 0 4px; }
@media (max-width: 760px) {
  .pr__top { margin-bottom: 20px; }
  .pr .pr__lead { font-size: 16px; }
  .pr__card { padding: 22px 18px; border-radius: 24px; }
  .pr .pr__sum { font-size: 16px; }
  .pr__steps { margin-top: 18px; gap: 8px; }
  .pr__steps li { padding: 14px; grid-template-columns: 28px 1fr; gap: 10px; }
  .pr__steps li > b { width: 28px; height: 28px; font-size: 13px; }
  .pr__steps h3 { margin-top: 3px; font-size: 15px; }
  .pr .pr__cta .buy-btn { width: 100%; justify-content: center; }
}

/* the FAQ page: topic chips, then one card per topic with its questions */
.fq__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; }
.fq__chips .chip { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; font-size: 14px; color: var(--ink); text-decoration: none; }
.fq__group { scroll-margin-top: 96px; }
.fq__group h2 { margin: 0 0 6px !important; }
.pr .fq__group .qa summary { font-size: 17px; padding: 16px 0; }
.pr .fq__group .qa p { margin: 0 0 18px; max-width: 40em; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.fq__group .qa:first-child { border-top: 0; }
.fq__group .qa:last-child { border-bottom: 0; }
/* the shipping table */
.sh__table { width: 100%; margin-top: 20px; border-collapse: collapse; font-size: 15px; }
.sh__table th { text-align: left; padding: 0 12px 10px 0; font: 500 12px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.sh__table td { padding: 14px 12px 14px 0; border-top: 1px solid var(--line-2); color: var(--ink); vertical-align: top; }
.sh__table td:nth-child(2) { white-space: nowrap; }
.sh__table .sh__free td { font-weight: 600; color: var(--green); }
.pr__card h2 + .pr__sum { margin-top: 10px; }
.pr #shipping h2, .pr #returns h2, .pr #damaged h2, .pr [id$="-da"] > h2 { margin: 0; }
@media (max-width: 760px) {
  .fq__chips { gap: 6px; } .fq__chips .chip { min-height: 36px; padding: 0 12px; font-size: 13px; }
  .pr .fq__group .qa summary { font-size: 16px; }
  .sh__table { font-size: 14px; } .sh__table td:last-child { white-space: nowrap; }
}
/* the promise, FAQ and shipping pages: the column is centred and full width up to its max */
main.promise { display: block; width: 100%; }
main.promise .legal__wrap { width: 100%; box-sizing: border-box; }
.shop-page main.shop.promise { display: block; }
.shop-page main.promise .legal__wrap { width: 100%; max-width: 860px; margin-left: auto; margin-right: auto; }
main.shop.legal { max-width: none; font: inherit; letter-spacing: normal; }

/* the FAQ, tabbed (after 21st.dev "Tabbed FAQ Accordion"): topics on the left, their questions on the right,
   the open question lifted onto a white card */
.fq { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 40px; align-items: start; margin-top: 8px; }
.fq__tabs { position: sticky; top: 104px; display: grid; gap: 4px; }
.fq__tab { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 46px; padding: 0 14px; border-radius: 14px; text-align: left; font: 500 15px/1.2 var(--display); color: var(--muted); transition: background-color .2s, color .2s; }
.fq__tab svg { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.fq__tab:hover { color: var(--ink); background: rgba(255, 255, 255, .55); }
.fq__tab[aria-selected="true"] { color: var(--ink); background: #FFFFFF; box-shadow: 0 1px 0 rgba(32, 47, 48, .05); }
.fq__tab[aria-selected="true"] svg { color: var(--green); }
.fq__panel { display: grid; gap: 4px; }
.fq__panel[hidden] { display: none; }
.fq__q { border-radius: 20px; transition: background-color .25s, box-shadow .25s; }
.fq__q[open] { background: #FFFFFF; box-shadow: 0 1px 0 rgba(32, 47, 48, .05), 0 10px 30px -18px rgba(32, 47, 48, .3); }
.fq__q summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 22px; font: 600 18px/1.3 var(--display); letter-spacing: -0.01em; color: var(--ink); }
.fq__q summary::-webkit-details-marker { display: none; }
.fq__q summary:hover { color: var(--green); }
.fq__q summary i { flex: none; width: 10px; height: 10px; margin-right: 4px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; rotate: 45deg; translate: 0 -3px; transition: rotate .3s var(--ease), translate .3s var(--ease); }
.fq__q[open] summary i { rotate: -135deg; translate: 0 3px; }
.fq__q:not([open]) + .fq__q:not([open]) summary { box-shadow: inset 0 1px 0 var(--line-2); }
.fq__a { padding: 0 22px 20px; }
.pr .fq__a p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink-2); max-width: 44em; }
.pr .fq__a .fq__rate { display: flex; gap: 8px; margin-top: 16px; }
.fq__rate[hidden], .fq__thanks[hidden] { display: none !important; }
.fq__rate button { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 14px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); font: 500 14px/1 var(--display); color: var(--ink); transition: box-shadow .2s; }
.fq__rate button { position: relative; }
.fq__rate button::before { content: ""; position: absolute; inset: -3px 0; }   /* a 44 px target */
.fq__rate button:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.fq__rate svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.pr .fq__a .fq__thanks { margin-top: 14px; font-size: 14px; color: var(--green); }
.pr .fq__more { margin: 32px 0 0; font-size: 15px; color: var(--ink-2); }
@media (max-width: 760px) {
  .fq { grid-template-columns: 1fr; gap: 14px; }
  .fq__tabs { position: static; display: flex; gap: 6px; overflow-x: auto; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 4px; scrollbar-width: none; }
  .fq__tabs::-webkit-scrollbar { display: none; }
  .fq__tab { flex: none; width: auto; min-height: 44px; padding: 0 14px; border-radius: 999px; font-size: 14px; gap: 8px; background: rgba(255, 255, 255, .5); }
  .fq__tab svg { width: 17px; height: 17px; }
  .fq__q summary { padding: 16px 16px; font-size: 16px; }
  .fq__a { padding: 0 16px 16px; }
  .pr .fq__a p { font-size: 15px; }
}

/* shipping: four quick facts as cards, before the details */
.sh__feats { list-style: none; margin: 0 0 20px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.sh__feats li { display: grid; justify-items: center; align-content: start; gap: 6px; padding: 24px 16px 22px; border-radius: 22px; background: #FFFFFF; text-align: center; }
.sh__ic { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 8px; border-radius: 50%; background: var(--paper, #ECECEA); color: var(--green); }
.sh__ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sh__feats b { font: 600 16px/1.2 var(--display); letter-spacing: -0.01em; color: var(--ink); }
.sh__feats li > span:last-child { font-size: 14px; line-height: 1.45; color: var(--muted); }
@media (max-width: 860px) { .sh__feats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .sh__feats li { padding: 18px 12px; } }

/* FAQ, crisper: a search, popular shortcuts, smaller type, slimmer rows, pictures where they explain */
.fq__top .cart__h { font-size: clamp(30px, 3.4vw, 44px); }
.fq__search { position: relative; display: block; margin-top: 18px; max-width: 560px; }
.fq__search svg { position: absolute; left: 18px; top: 50%; translate: 0 -50%; width: 19px; height: 19px; fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-linecap: round; }
.fq__search input { width: 100%; height: 52px; padding: 0 18px 0 48px; border: 0; border-radius: 999px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--line-2); font: 400 16px/1 var(--body); color: var(--ink); }
.fq__search input:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--green); }
.pr .fq__pop { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 14px 0 0; font-size: 14px; color: var(--muted); }
.fq__pop a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.fq__pop a:hover { text-decoration-color: var(--ink); }
.pr .fq__none { margin: 18px 0 0; font-size: 15px; }
.fq { grid-template-columns: 210px minmax(0, 1fr); gap: 32px; margin-top: 28px; }
.fq__tab { min-height: 44px; padding: 0 12px; gap: 10px; border-radius: 12px; font-size: 14px; }
.fq__tab svg { width: 18px; height: 18px; }
.fq__tab em { margin-left: auto; font: 500 12px/1 var(--body); font-style: normal; color: var(--muted); }
.fq__help { display: grid; gap: 4px; margin-top: 18px; padding: 16px 14px; border-radius: 16px; background: #FFFFFF; font-size: 13px; line-height: 1.45; color: var(--muted); }
.fq__help b { font: 600 15px/1.2 var(--display); color: var(--ink); }
.fq__help a { width: max-content; color: var(--ink); }
.fq__h { margin: 0 0 8px !important; font: 500 12px/1 var(--display) !important; letter-spacing: .12em !important; text-transform: uppercase; color: var(--muted) !important; }
.fq__panel { gap: 2px; }
.fq.is-search .fq__panel + .fq__panel .fq__h { margin-top: 18px !important; }
.fq__q { border-radius: 16px; }
.fq__q[hidden] { display: none; }
.fq__q summary { padding: 15px 18px; font-size: 16px; font-weight: 600; }
.fq__q summary i { width: 8px; height: 8px; }
.fq__a { padding: 0 18px 16px; }
.pr .fq__a p { font-size: 15px; line-height: 1.55; }
.fq__img { display: block; width: 100%; max-height: 260px; margin-top: 14px; border-radius: 14px; object-fit: cover; background: #ECECEA; }
.fq__img[src$="varefakta-badge.webp"] { width: 96px; height: 96px; object-fit: contain; background: none; }
.pr .fq__a .fq__rate { align-items: center; gap: 6px; margin-top: 12px; font-size: 13px; color: var(--muted); }
.fq__rate span { margin-right: 4px; }
.fq__rate button { min-height: 30px; padding: 0 12px; border-radius: 999px; font-size: 13px; }
.pr .fq__a .fq__thanks { margin-top: 12px; font-size: 13px; }
@media (max-width: 760px) {
  .fq { grid-template-columns: 1fr; gap: 12px; margin-top: 20px; }
  .fq > * { min-width: 0; }
  .fq__help { display: none; }
  .fq__tab em { display: none; }
  .fq__search input { height: 48px; font-size: 16px; }
  .fq__q summary { padding: 14px 14px; font-size: 15px; }
  .fq__a { padding: 0 14px 14px; }
  .fq__img { max-height: 200px; }
}
.fq__img { max-height: 220px; }

/* ---------- reveal: rise and fade in, once ---------- */
.reveal-on [data-reveal]:not(.is-in) { opacity: 0; translate: 0 18px; }
.reveal-on [data-reveal] { transition: opacity .7s var(--ease), translate .7s var(--ease); }
.reveal-on .sh__feats:not(.is-in) li { opacity: 0; translate: 0 14px; }
.sh__feats li { transition: opacity .6s var(--ease) calc(var(--i, 0) * 90ms), translate .6s var(--ease) calc(var(--i, 0) * 90ms), box-shadow .3s, translate .3s; }
.reveal-on .sh__feats[data-reveal] { opacity: 1 !important; translate: none !important; }
.sh__feats li:hover { box-shadow: 0 14px 30px -20px rgba(32, 47, 48, .35); }

/* ---------- shipping: the route from Copenhagen to your door ---------- */
.sh__route { position: relative; height: 120px; margin: 4px 0 18px; }
.sh__route svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sh__road { fill: none; stroke: var(--line); stroke-width: 2; stroke-dasharray: 2 8; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.sh__road--draw { stroke: var(--green); stroke-dasharray: 1; stroke-dashoffset: 1; animation: sh-draw 2.4s var(--ease) .3s forwards; }
@keyframes sh-draw { to { stroke-dashoffset: 0; } }
.sh__end { position: absolute; display: inline-flex; align-items: center; gap: 8px; font: 500 12px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.sh__end i { width: 12px; height: 12px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px rgba(29, 95, 99, .14); }
.sh__end--a { left: 2%; top: 74%; }
.sh__end--b { right: 2%; top: 32%; flex-direction: row-reverse; }
.sh__end--b i { background: var(--copper, #B07249); box-shadow: 0 0 0 5px rgba(176, 114, 73, .16); }
.sh__parcel { position: absolute; left: 0; top: 0; width: 40px; height: 40px; margin: -20px 0 0 -20px; display: grid; place-items: center; border-radius: 12px; background: #FFFFFF; box-shadow: 0 8px 20px -10px rgba(32, 47, 48, .45);
  offset-path: path("M40 84 C 180 84, 200 30, 340 34 S 540 96, 680 60"); offset-rotate: 0deg; animation: sh-go 2.4s var(--ease) .3s both; }
.sh__parcel svg { width: 20px; height: 20px; fill: none; stroke: var(--green); stroke-width: 1.5; stroke-linejoin: round; }
@keyframes sh-go { from { offset-distance: 0%; } to { offset-distance: 100%; } }
.sh__route { container-type: inline-size; }
@supports not (offset-path: path("M0 0")) { .sh__parcel { display: none; } }

/* ---------- shipping: delivery times as bars over working days ---------- */
.sh__bars { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 4px; }
.sh__bars li { display: grid; grid-template-columns: minmax(0, 1.25fr) 52px minmax(0, 1.5fr) 132px; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line-2); font-size: 15px; color: var(--ink); }
.sh__fee { font-weight: 600; }
.sh__track { position: relative; height: 10px; border-radius: 99px; background: var(--paper, #ECECEA); overflow: hidden; }
.sh__track i { position: absolute; top: 0; bottom: 0; left: calc(var(--a) / 7 * 100%); width: calc((var(--b) - var(--a)) / 7 * 100%); border-radius: 99px; background: var(--green); transform-origin: left; transition: scale .9s var(--ease) calc(.2s + var(--i, 0) * .12s); }
.reveal-on .sh__bars:not(.is-in) .sh__track i { scale: 0 1; }
.sh__days { color: var(--muted); font-size: 14px; text-align: right; }
.sh__free { color: var(--green) !important; }
.sh__free .sh__fee, .sh__free .sh__where { color: var(--green); font-weight: 600; }
.sh__free .sh__track { background: none; }
.sh__scale { display: grid; grid-template-columns: minmax(0, 1.25fr) 52px repeat(8, 1fr) 132px; margin: 6px 0 0; font-size: 11px; color: var(--muted); column-gap: 0; }
.sh__scale span { grid-column: 3 / span 3; display: none; }
.sh__scale i { font-style: normal; text-align: left; }
.sh__scale i:first-of-type { grid-column: 3; }
/* the scale sits under the bar column: 8 marks across it */
.sh__scale { grid-template-columns: minmax(0, 1.25fr) 52px minmax(0, 1.5fr) 132px; column-gap: 14px; }
.sh__scale i { display: none; }
.sh__scale::after { content: ""; }
.sh__scale span { display: block; grid-column: 3; text-align: center; }

/* ---------- returns: four steps in a row, joined by a line ---------- */
.pr__steps--line { position: relative; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.pr__steps--line::before { content: ""; position: absolute; left: 32px; right: 32px; top: 32px; height: 2px; background: repeating-linear-gradient(90deg, var(--green) 0 6px, transparent 6px 12px); opacity: .35; transform-origin: left; transition: scale 1.2s var(--ease) .2s; }
.reveal-on .pr__steps--line:not(.is-in)::before { scale: 0 1; }
.pr__steps--line li { position: relative; grid-template-columns: 1fr !important; background: transparent !important; padding: 0 !important; gap: 12px !important; }
.pr__steps--line li > b { width: 40px !important; height: 40px !important; font-size: 15px !important; box-shadow: 0 0 0 6px #FFFFFF; transition: scale .5s var(--ease); }
.pr__steps--line li { transition: opacity .6s var(--ease), translate .6s var(--ease); }
.reveal-on .pr__steps--line:not(.is-in) li { opacity: 0; translate: 0 10px; }
.pr__steps--line li:nth-child(2) { transition-delay: .12s; } .pr__steps--line li:nth-child(3) { transition-delay: .24s; } .pr__steps--line li:nth-child(4) { transition-delay: .36s; }

/* ---------- FAQ: the illustration, smooth answers, a soft topic change ---------- */
.fq__top { position: relative; }
.fq__art { position: absolute; right: 0; top: -6px; width: 200px; height: auto; }
.fq__art .b1 { fill: #FFFFFF; } .fq__art .b2 { fill: var(--green); }
.fq__art text { font: 600 40px/1 var(--display); fill: var(--green); }
.fq__art .ring { fill: none; stroke: #FFFFFF; stroke-width: 2; opacity: .5; }
.fq__art .tick { fill: none; stroke: #FFFFFF; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 30; stroke-dashoffset: 30; animation: fq-tick .8s var(--ease) 1s forwards; }
.fq__art .b1, .fq__art text { animation: fq-pop .7s var(--ease) .2s both; transform-box: fill-box; transform-origin: bottom left; }
.fq__art .b2, .fq__art .ring { animation: fq-pop .7s var(--ease) .55s both; transform-box: fill-box; transform-origin: bottom right; }
@keyframes fq-pop { from { opacity: 0; scale: .6; } }
@keyframes fq-tick { to { stroke-dashoffset: 0; } }
:root { interpolate-size: allow-keywords; }
.fq__q::details-content { height: 0; overflow: clip; transition: height .35s var(--ease), content-visibility .35s allow-discrete; }
.fq__q[open]::details-content { height: auto; }
.fq__panel:not([hidden]) { animation: fq-in .4s var(--ease); }
@keyframes fq-in { from { opacity: 0; translate: 8px 0; } }
@media (max-width: 760px) {
  .fq__art { display: none; }
  .sh__route { height: 90px; }
  .sh__bars li { grid-template-columns: 1fr auto; row-gap: 8px; }
  .sh__track { grid-column: 1 / -1; grid-row: 2; }
  .sh__days { grid-column: 1 / -1; grid-row: 3; text-align: left; }
  .sh__scale { display: none; }
  .pr__steps--line { grid-template-columns: 1fr !important; gap: 18px !important; }
  .pr__steps--line::before { left: 19px; right: auto; top: 20px; bottom: 20px; width: 2px; height: auto; background: repeating-linear-gradient(180deg, var(--green) 0 6px, transparent 6px 12px); transform-origin: top; }
  .reveal-on .pr__steps--line:not(.is-in)::before { scale: 1 0; }
  .pr__steps--line li { grid-template-columns: 40px 1fr !important; }
}
@media (min-width: 761px) and (max-width: 980px) { .pr__steps--line { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .pr__steps--line::before { display: none; } }
@media (prefers-reduced-motion: reduce) { .sh__road--draw, .sh__parcel, .fq__art *, .fq__panel { animation: none !important; } .sh__road--draw { stroke-dashoffset: 0; } .sh__parcel { offset-distance: 100%; } .fq__art .tick { stroke-dashoffset: 0; } }
/* the route, drawn in the SVG itself so it scales as one picture */
.sh__route { height: auto; aspect-ratio: 6 / 1; max-height: 140px; }
.sh__route svg { position: absolute; inset: 0; }
.sh__road { vector-effect: none; stroke-width: 2.5; }
.sh__dot--a { fill: var(--green); } .sh__dot--b { fill: #B07249; }
.sh__parcel { position: static; width: auto; height: auto; margin: 0; offset-path: none; animation: none; background: none; box-shadow: none; }
.sh__parcel rect { fill: #FFFFFF; filter: drop-shadow(0 6px 10px rgba(32, 47, 48, .25)); }
.sh__parcel path { fill: none; stroke: var(--green); stroke-width: 1.8; stroke-linejoin: round; }
.sh__end { font-size: 11px; }
.sh__end i { display: none; }
.sh__end--a { left: 0; top: auto; bottom: -4px; }
.sh__end--b { right: 0; top: auto; bottom: 8px; }
/* the content fills the first screen, so the dark footer never peeks in as a strip at the bottom */
main.promise .legal__wrap { min-height: 100vh; min-height: 100svh; }

/* =====================================================================
   The checkout in three steps (checkout-v2.html + checkout.js): the order beside
   the steps on a computer, above them on a phone. A finished step folds to a
   short summary with Edit; the next one opens. Demo only: no payment provider.
   ===================================================================== */
.co3__wrap { max-width: 520px; }
.co3__head { display: grid; gap: 10px; }
.co3__form { display: grid; gap: 12px; }
.co3__sum { padding: 18px 20px 20px; }
@media (max-width: 760px) { .co3__sum { padding: 14px 14px 14px; } }
@media (min-width: 961px) {
  .co3__wrap { max-width: 1040px; grid-template-columns: minmax(0, 1fr) 380px; column-gap: 28px; align-items: start; }
  .co3__head, .co3__wrap > .item--empty { grid-column: 1 / -1; }
  .co3__form { grid-column: 1; grid-row: 2; }
  .co3__sum { grid-column: 2; grid-row: 2; position: sticky; top: 96px; }
  html.is-empty .co3__wrap { max-width: 520px; grid-template-columns: minmax(0, 1fr); }
}

/* the three steps, as a row of small marks under the heading */
.co-steps { list-style: none; margin: 2px 0 6px; padding: 0; display: flex; align-items: center; gap: 8px; }
.co-steps li { display: inline-flex; align-items: center; gap: 8px; font: 500 13px/1 var(--display); color: var(--muted); transition: color .3s; }
.co-steps li + li::before { content: ""; width: 22px; height: 1px; margin-right: 2px; background: var(--line); }
.co-steps b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line); font: 600 11px/1 var(--display); transition: background-color .3s, color .3s, box-shadow .3s; }
.co-steps li.is-current { color: var(--ink); }
.co-steps li.is-current b { background: var(--ink); color: #FFFFFF; box-shadow: none; }
.co-steps li.is-done { color: var(--ink-2); cursor: pointer; }
.co-steps li.is-done b { background: var(--green); color: transparent; box-shadow: none; position: relative; }
.co-steps li.is-done b::after { content: ""; position: absolute; left: 50%; top: 45%; width: 8px; height: 4px; border-left: 1.5px solid #FFFFFF; border-bottom: 1.5px solid #FFFFFF; translate: -50% -50%; rotate: -45deg; }

/* a step */
.co-step { padding: 18px 20px 20px; transition: opacity .3s; }
.co-step__h { display: flex; align-items: center; gap: 10px; margin: 0; font: 600 17px/1.2 var(--display); letter-spacing: -0.01em; color: var(--ink); }
.co-step__h [tabindex]:focus { outline: none; }
.co-step__h [tabindex]:focus-visible { outline: none; }
.co-step__n { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: #FFFFFF; font: 600 12px/1 var(--display); transition: background-color .3s; }
.co-step__edit { margin-left: auto; font: 500 13px/1 var(--body); min-height: 32px; display: inline-flex; align-items: center; }
.co-step__body { display: grid; gap: 12px; margin-top: 16px; }
.co-step__done { margin: 8px 0 0 34px; font-size: 14px; line-height: 1.5; color: var(--ink-2); overflow-wrap: anywhere; }
.co-step__why { margin-top: -6px; font-size: 12.5px; }
.co-step.is-done .co-step__n { background: var(--green); color: transparent; position: relative; }
.co-step.is-done .co-step__n::after { content: ""; position: absolute; left: 50%; top: 45%; width: 9px; height: 4.5px; border-left: 1.5px solid #FFFFFF; border-bottom: 1.5px solid #FFFFFF; translate: -50% -50%; rotate: -45deg; }
.co-step.is-later { opacity: .55; box-shadow: none; background: rgba(255, 255, 255, .5); }
.co-step.is-later .co-step__n { background: rgba(32, 47, 48, .35); }
.co-next { width: 100%; min-height: 52px; margin-top: 4px; font-size: 16px; }
/* the step that opens rises in: transform and opacity only */
.co-step.is-enter .co-step__body { animation: co-in .45s var(--ease) both; }
.co-step.is-enter .co-step__done { animation: co-in .35s var(--ease) both; }
@keyframes co-in { from { opacity: 0; transform: translateY(10px); } }

/* fields: a message under the field that needs it, a quiet tick on one that passes */
.field { position: relative; }
.field__err { display: flex; gap: 7px; align-items: baseline; margin: 0; font-size: 12.5px; line-height: 1.35; color: var(--ink-2); }
.field__err::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--stop); translate: 0 -1px; }
.field__err:empty { display: none; }
.field.is-bad input { border-color: var(--stop); }
.field.is-bad input:focus { box-shadow: 0 0 0 3px rgba(176, 114, 73, .18); }
.field.is-bad .field__err { animation: co-in .25s var(--ease) both; }
.field.is-ok input { padding-right: 38px; background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.4 3.4L15 7' fill='none' stroke='%231D5F63' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 12px center / 16px no-repeat; }
.co2 .check { align-items: flex-start; min-height: 44px; padding-top: 4px; line-height: 1.45; }
.co2 .check input { margin-top: 1px; }

/* the demo note: plain, never alarming */
.co-demo { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 12px 14px; border-radius: 14px; background: rgba(155, 205, 208, .28); font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.co-demo svg { flex: none; width: 18px; height: 18px; margin-top: 1px; fill: none; stroke: var(--green); stroke-width: 1.5; stroke-linecap: round; }
.co-demo b { color: var(--ink); font-weight: 600; }
.co-pay-btn { margin-top: 2px; }
/* Pay, while the order is placed: a small turning ring */
.pill-btn.is-busy { cursor: progress; opacity: 1 !important; }
.pill-btn.is-busy::before { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #FFFFFF; animation: spin .8s linear infinite; }
.co-promo .fine { margin: 0 0 10px; font-size: 13px; }

/* the bar at the bottom of a phone: the total and the next step (or Pay) */
.co-bar { display: none; }
@media (max-width: 760px) {
  .co-bar { position: fixed; z-index: 60; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 18px; border-radius: 22px; background: rgba(255, 255, 255, .96); box-shadow: 0 1px 0 rgba(32, 47, 48, .05), 0 18px 40px -16px rgba(32, 47, 48, .45); opacity: 0; transform: translateY(16px); transition: opacity .25s var(--ease), transform .3s var(--ease); }
  .co-bar.is-on { opacity: 1; transform: none; }
  .co-bar[hidden] { display: none; }
  .co-bar__sum { display: grid; gap: 2px; margin: 0; font-size: 11px; color: var(--muted); white-space: nowrap; }
  .co-bar__sum b { font: 600 17px/1 var(--display); color: var(--ink); font-variant-numeric: tabular-nums; }
  .co-bar__btn { flex: 1; min-width: 0; min-height: 48px; padding: 0 16px; font-size: 14.5px; white-space: normal; text-align: center; line-height: 1.15; }
  .co3 .cart__wrap { padding-bottom: 96px; }
  .co-step { padding: 16px 14px 16px; }
  .co-steps li span { font-size: 12px; }
  .co-steps li + li::before { width: 14px; }
}

/* =====================================================================
   The order confirmation (order-confirmed.html)
   ===================================================================== */
.oc { display: grid; gap: 12px; }
.oc__hero { display: grid; justify-items: center; gap: 8px; padding: 8px 0 6px; text-align: center; }
.oc__mark { width: 64px; height: 64px; margin-bottom: 6px; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.oc__ring { stroke: var(--green); stroke-width: 2; }
.oc__tick { stroke: var(--green); stroke-width: 2.6; }
.oc__kicker { color: var(--green); }
.oc__h { justify-content: center; flex-wrap: wrap; gap: 0 .3em; margin: 0; text-align: center; }
.oc__no { margin: 0; font-size: 14px; color: var(--muted); }
.oc__no b { margin-left: 4px; padding: 4px 10px; border-radius: 999px; background: #FFFFFF; font: 600 14px/1 var(--display); color: var(--ink); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.oc .lines--ro .line { grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; padding: 8px 0; border: 0; }
.oc .lines--ro .line__pic { width: 48px; }
.oc .lines--ro .line__name { font-size: 14px; }
.oc .lines--ro .line__meta { font-size: 12.5px; }
.oc .lines--ro .line__sum { font-size: 14px; }
.oc__box { padding: 18px 20px 20px; }
.oc__box .co2__h { margin-bottom: 4px; }
@media (max-width: 760px) { .oc__box { padding: 16px 14px; } }
.oc__box .co2__h .cart__n { margin-left: 8px; margin-right: auto; }
.oc__to { margin-top: 14px; padding-top: 14px; border-top: var(--dash); }
.oc__h3 { margin: 0 0 4px; font: 600 14px/1.2 var(--display); color: var(--ink); }
.oc__to p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.oc__next { padding: 18px 20px 20px; }
.oc__steps { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 14px; }
.oc__steps li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; }
.oc__steps li > b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #ECECEA; font: 600 12px/1 var(--display); color: var(--ink); }
.oc__steps p { margin: 3px 0 0; display: grid; gap: 2px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.oc__steps strong { font: 600 15px/1.3 var(--display); color: var(--ink); }
.oc__btns { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 22px; margin-top: 8px; }
.oc__btns .link { font-size: 14px; }
/* the success: the ring draws, the tick follows, then the rest rises in */
.oc .oc__ring { stroke-dasharray: 164; stroke-dashoffset: 0; }
.oc .oc__tick { stroke-dasharray: 34; stroke-dashoffset: 0; }
.oc.is-in .oc__ring { animation: oc-draw .7s var(--ease) both; }
.oc.is-in .oc__tick { animation: oc-tick .45s var(--ease) .55s both; }
.oc.is-in .oc__hero > :not(.oc__mark), .oc.is-in > :not(.oc__hero) { animation: co-in .5s var(--ease) both; }
.oc.is-in .oc__hero > :nth-child(2) { animation-delay: .5s; } .oc.is-in .oc__hero > :nth-child(3) { animation-delay: .58s; } .oc.is-in .oc__hero > :nth-child(4) { animation-delay: .66s; }
.oc.is-in > :nth-child(2) { animation-delay: .72s; } .oc.is-in > :nth-child(3) { animation-delay: .8s; } .oc.is-in > :nth-child(4) { animation-delay: .88s; } .oc.is-in > :nth-child(5) { animation-delay: .96s; }
@keyframes oc-draw { from { stroke-dashoffset: 164; } }
@keyframes oc-tick { from { stroke-dashoffset: 34; } }
@media (max-width: 760px) { .oc__next { padding: 16px 14px; } .oc__btns .pill-btn { width: 100%; } }

/* the cart and the checkout come in softly on arrival (once); nothing moves with reduced motion */
.cart-page .cart__wrap > *, .co-page .co3__wrap > * { animation: co-in .5s var(--ease) both; }
.cart-page .cart__wrap > :nth-child(2), .co-page .co3__wrap > :nth-child(2) { animation-delay: .06s; }
.cart-page .cart__wrap > :nth-child(3), .co-page .co3__wrap > :nth-child(3) { animation-delay: .12s; }
.co-page .co3__wrap > :nth-child(4) { animation-delay: .18s; }
.oc-page .cart__wrap > * { animation: none; }
/* small press feedback on the cart's own buttons */
.item__qty button, .addon__btn, .paytabs span, .pdp-faq__ask a, .item__go { transition: background-color .2s, transform .15s var(--ease); }
.item__qty button:active:not(:disabled), .addon__btn:active, .item__go:active { transform: scale(.94); }
.paytabs label:active span { transform: scale(.97); }
@media (prefers-reduced-motion: reduce) {
  .cart-page .cart__wrap > *, .co-page .co3__wrap > *, .co-step.is-enter .co-step__body, .co-step.is-enter .co-step__done,
  .field.is-bad .field__err, .oc.is-in *, .oc.is-in > * { animation: none !important; }
  .co-bar { transition: none; }
  .pill-btn.is-busy::before { animation-duration: 2.4s; }
}
/* FAQ: "Did this help? Yes No" wraps on a narrow phone (Danish ran 9 px past the edge) */
.pr .fq__a .fq__rate { flex-wrap: wrap; row-gap: 6px; }
.item__more { margin-top: 6px; font-size: 13px; }

/* loop round 1: the second lock's finish is shown as the lock itself, never as a flat colour (guide p. 56) */
.pick button::before { inset: 3px; border-radius: 0; box-shadow: none; background: center / contain no-repeat; }
.pick button[data-pick="steel"]::before { background-image: url("images/scenes/thumb-steel.webp"); }
.pick button[data-pick="copper"]::before { background-image: url("images/scenes/thumb-copper.webp"); }
.pick button[data-pick="black"]::before { background-image: url("images/scenes/thumb-black.webp"); }
/* on a phone each finish is a 44 px target; the render stays 26 px, the ring sits round it */
@media (max-width: 760px) {
  .pick { gap: 0; margin-left: -9px; }
  .pick button { width: 44px; height: 44px; }
  .pick button::before { inset: 9px; }
  .pick button::after { inset: 7px; }
}

/* FAQ answers from Marcus's FAQ (13 Oct): several paragraphs, numbered steps, small subheads, a "Full terms" link */
.pr .fq__a p + p, .pr .fq__a p + h3, .pr .fq__a ol + p, .pr .fq__a p + ol { margin-top: 10px; }
.pr .fq__a h3 { margin: 18px 0 4px; font: 600 16px/1.3 var(--display); letter-spacing: -0.01em; color: var(--ink); }
.pr .fq__a .fq__steps { display: grid; gap: 12px; margin: 0; padding-left: 1.3em; list-style: decimal outside; font-size: 15px; line-height: 1.55; color: var(--ink-2); max-width: 44em; }
.pr .fq__a .fq__steps li::marker { font-weight: 600; color: var(--ink); }
.pr .fq__a .fq__steps li p + p { margin-top: 4px; }
.pr .fq__a .fq__more-link { margin-top: 12px; }

/* review round 1: one type scale on the reading pages — every page title as large as the FAQ's, the card headings under it */
.cart__h { font: 600 clamp(30px, 3.4vw, 44px)/1.05 var(--display); }
.pr__card h2 { font-size: clamp(24px, 2.2vw, 30px); }
/* the four return steps start on one line */
.pr__steps--line li { align-content: start; }

/* round 4: on a phone the two add-on tiles stack, so all three finish swatches of the second lock fit and can be tapped */
@media (max-width: 760px) { .addons { flex-direction: column; } .cart__box .addons .addon { flex: none; } }


/* audit (17 Oct): the reading column keeps a normal inner padding on very wide screens, the trial card's
   title uses the whole card, and every page headline is Ink */
.legal__wrap { padding-left: min(var(--gutter), 32px); padding-right: min(var(--gutter), 32px); }
.pr__head.pr__head--text { grid-template-columns: 1fr; }
.legal__wrap .cart__h { color: var(--ink); }

/* design pass: info pages */
/* =====================================================================
   design pass: info pages (18 Oct)
   About, FAQ, promises, shipping, terms, privacy and 404 take the home page's light chapters as their pattern
   (the Set up once and Help & Guides chapters): the same gutter-to-gutter width, the heading on the left and
   the content on the right on a computer or a landscape tablet, the home page's heading and body sizes,
   white cards with the home page's 20 px corner and no shadow. Scoped to .legal-page, so cart and
   checkout are untouched.
   ===================================================================== */
.legal-page main.shop.legal .legal__wrap {
  width: 100%; max-width: none; min-height: 100vh; min-height: 100svh; box-sizing: border-box; margin: 0;
  padding: 148px var(--gutter) clamp(72px, 8vw, 128px);
}
/* the page title: the home page's chapter heading */
.legal-page .legal__wrap h1.cart__h, .legal-page .legal__wrap .fq__top h1.cart__h {
  margin: 0; font: 600 var(--fs-heading)/1 var(--display); letter-spacing: -0.04em; color: var(--ink); text-wrap: balance;
}
.legal-page .pr__top, .legal-page .ip__head { margin: 0; }
.legal-page .legal__wrap .pr__kicker { margin: 0 0 18px; font: 500 12px/1.2 var(--display); letter-spacing: .12em; color: var(--muted); }
/* the line under it: the home page's body voice */
.legal-page .legal__wrap .pr__lead, .legal-page .legal__wrap .legal__lead {
  margin: 22px 0 0 !important; max-width: 26em; font: 400 clamp(18px, 1.35vw, 21px)/1.38 var(--body) !important;
  letter-spacing: -0.012em; color: var(--ink-2) !important; text-wrap: pretty;
}
/* the body column: cards one rhythm apart */
.legal-page .ip__body { display: grid; gap: 16px; align-content: start; min-width: 0; container: ipbody / inline-size; }
.legal-page .ip__body > * { margin: 0 !important; min-width: 0; }
.legal-page .legal__wrap .pr__card { padding: clamp(24px, 2.6vw, 40px); border-radius: 20px; box-shadow: none; }
.legal-page .legal__wrap .pr__card h2 { font: 600 clamp(24px, 2.1vw, 32px)/1.1 var(--display); letter-spacing: -0.03em; color: var(--ink); }
.legal-page .legal__wrap .pr__sum { font-size: 17px; line-height: 1.55; }

/* a computer: the heading stays on the left while the content scrolls on the right (as Help & Guides) */
@media (min-width: 1101px) {
  .legal-page .ip, .legal-page .ip__grid:not(.ip__grid--faq) { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr); column-gap: clamp(32px, 5vw, 90px); align-items: start; }
  .legal-page .ip > .ip__head, .legal-page .ip > .pr__top, .legal-page .ip__grid:not(.ip__grid--faq) > .pr__top { grid-column: 1; }
  .legal-page .ip__body { grid-column: 2; min-width: 0; }
}
/* a landscape tablet keeps two columns, as the home page does */
@media (min-width: 761px) and (max-width: 1100px) and (min-aspect-ratio: 1/1) {
  .legal-page .ip, .legal-page .ip__grid:not(.ip__grid--faq) { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); column-gap: 40px; align-items: start; }
  .legal-page .ip > .ip__head, .legal-page .ip > .pr__top, .legal-page .ip__grid:not(.ip__grid--faq) > .pr__top { grid-column: 1; }
  .legal-page .ip__body { grid-column: 2; min-width: 0; }
  .legal-page main.shop.legal .legal__wrap { padding-top: 124px; }
}
/* a portrait tablet and a phone: one column, the heading on top */
@media (max-width: 1100px) and (max-aspect-ratio: 1/1), (max-width: 760px) {
  .legal-page .ip__body { margin-top: 36px; }
  .legal-page main.shop.legal .legal__wrap { padding-top: 124px; }
}
@media (max-width: 760px) {
  .legal-page main.shop.legal .legal__wrap { padding-top: 92px; padding-bottom: 64px; }
  .legal-page .legal__wrap h1.cart__h, .legal-page .legal__wrap .fq__top h1.cart__h { font-size: clamp(32px, 8.6vw, 40px); line-height: 1.04; }
  .legal-page .legal__wrap .pr__kicker { margin-bottom: 12px; }
  .legal-page .legal__wrap .pr__lead, .legal-page .legal__wrap .legal__lead { margin-top: 14px !important; font-size: 17px !important; }
  .legal-page .ip__body { margin-top: 28px; }
  .legal-page .ip__body { gap: 12px; }
  .legal-page .legal__wrap .pr__card { padding: 22px 18px; }
  .legal-page .legal__wrap .pr__card h2 { font-size: clamp(22px, 6.4vw, 26px); }
  .legal-page .legal__wrap .pr__sum { font-size: 16px; }
}

/* ---- terms and privacy: reading text, section heads in the card-heading voice */
.legal-page .ip--legal .ip__body h2 { margin: 48px 0 12px; font: 600 clamp(20px, 1.6vw, 24px)/1.25 var(--display); letter-spacing: -0.02em; color: var(--ink); }
.legal-page .ip--legal .ip__body [data-lang-block] > h2:first-child, .legal-page .ip--legal .ip__body > div > h2:first-child { margin-top: 0; }
.legal-page .ip--legal .ip__body p { max-width: 40em; margin: 0 0 12px; font: 400 17px/1.6 var(--body); color: var(--ink-2); }
.legal-page .ip--legal .legal__form { max-width: 680px; margin-top: 12px; padding: clamp(22px, 2.4vw, 32px); border-radius: 20px; }
.legal-page .ip--legal .legal__form p { font-size: 16px; }
@media (max-width: 760px) {
  .legal-page .ip--legal .ip__body h2 { margin-top: 36px; font-size: 20px; }
  .legal-page .ip--legal .ip__body p { font-size: 16px; }
  .legal-page .ip--legal .legal__form { padding: 20px 18px; }
}

/* ---- about: the founder photo and the cards in the right column */
.about-page .ab__hero { margin-top: 0; border-radius: 20px; }
.about-page .ab__pics figure { border-radius: 20px; }
.about-page .ab__card h2 { margin: 10px 0 14px; }
.about-page .ab__kicker { font-size: 12px !important; }
.about-page .ab__lead { font-size: 19px !important; }
.about-page .ab__card p { font-size: 17px; }
.about-page .ab__team { font-size: 19px !important; }
@media (max-width: 760px) {
  .about-page .ab__hero, .about-page .ab__pics figure { border-radius: 20px; }
  .about-page .ab__card p { font-size: 16px; }
  .about-page .ab__lead, .about-page .ab__team { font-size: 17px !important; }
}

/* ---- promises: the steps and the small print inside the wider card */
.promise-page .pr__steps li { border-radius: 16px; }
.promise-page .pr__terms { border-radius: 16px; }

/* ---- shipping: the four facts and the route, in the right column */
.shipping-page .sh__feats li { border-radius: 20px; }

/* ---- FAQ: the heading, the search and the topics on the left, the questions on the right */
/* the speech-bubble drawing stays at the top right of the heading column, smaller where that column is narrow */
.faq-page .fq__q[open] { box-shadow: none; }
.faq-page .fq__tab[aria-selected="true"] { box-shadow: none; }
/* a tablet keeps the FAQ in one column: heading on top, topics beside the questions below it */
@media (min-width: 761px) { .faq-page .fq { margin-top: 36px; } }
/* ---- 404: the home page's heading and button, in the middle of the first screen */
.legal-page .ip--short { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.legal-page .ip--short .legal__lead { margin-bottom: 32px !important; }
.legal-page .ip--short .pill-btn { min-height: 56px !important; font-size: 17px; }

/* ---- the right column is narrower than the old centred column on a landscape tablet or a laptop: there the
   delivery bars and the return steps fold the way they do on a portrait tablet (a phone keeps its own layout) */
@container ipbody (min-width: 481px) and (max-width: 640px) {
  .shipping-page .sh__feats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .shipping-page .sh__feats li { padding: 18px 12px; }
  .shipping-page .sh__bars li { grid-template-columns: 1fr auto; row-gap: 8px; }
  .shipping-page .sh__track { grid-column: 1 / -1; grid-row: 2; }
  .shipping-page .sh__days { grid-column: 1 / -1; grid-row: 3; text-align: left; }
  .shipping-page .sh__scale { display: none; }   /* round 3: no caption without its bar column (as on a phone) */
}
@container ipbody (min-width: 481px) and (max-width: 740px) {
  .shipping-page .pr__steps--line { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; row-gap: 24px !important; }
  .shipping-page .pr__steps--line::before { display: none; }
}
/* four steps in a row: the dashed line runs from the first number to the last, not past it */
@container ipbody (min-width: 741px) { .shipping-page .pr__steps--line::before { left: 20px; right: calc(25% - 28px); top: 20px; } }

/* the questions read like the home page's Help & Guides rows: Poppins Medium, larger, one hairline apart */
@media (min-width: 1101px) {
  .faq-page .ip__grid--faq .fq__q summary { padding: 20px 20px; font: 500 clamp(18px, 1.4vw, 21px)/1.25 var(--display); letter-spacing: -0.02em; }
  .faq-page .ip__grid--faq .fq__q summary i { width: 9px; height: 9px; }
  .faq-page .ip__grid--faq .fq__a { padding: 0 20px 20px; }
  .faq-page .ip__grid--faq .fq__a p { font-size: 16px; }
  .faq-page .ip__grid--faq .fq__q { border-radius: 20px; }
}
/* the line under "Ask away" stays clear of the drawing beside the heading */

/* ---- the order confirmation keeps the cart's centred column (it is the last step of the checkout); only its
   thank-you takes the home page's heading voice */
.oc-page .oc__h { font: 600 clamp(34px, 3.4vw, 48px)/1.02 var(--display); letter-spacing: -0.04em; }
@media (max-width: 760px) { .oc-page .oc__h { font-size: clamp(30px, 8.6vw, 36px); } }
/* three trial steps need about 800 px side by side (the email address is one long word: a 1280 px laptop clipped it),
   four shipping facts about 720 px */
@container ipbody (max-width: 800px) { .promise-page .pr__steps { grid-template-columns: 1fr; } }
@container ipbody (max-width: 720px) {
  .shipping-page .sh__feats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
}

/* no lonely last word in a heading, calmer rags in the copy */
.legal-page main h2, .legal-page main h3, .oc-page main h2 { text-wrap: balance; }
.legal-page .ip__body p, .legal-page .pr__steps p, .legal-page .fq__a p { text-wrap: pretty; }
/* the questions in one voice at every size: Poppins Medium, as the home page's Help & Guides rows */
.faq-page .fq__q summary { font-weight: 500; letter-spacing: -0.01em; }
@media (max-width: 1100px) { .faq-page .fq__q summary { font-size: 17px; } }
@media (max-width: 760px) { .faq-page .fq__q summary { font-size: 16px; } }
/* the smallest phones (320 px): the Danish "Forudbestilling:" is wider than a fact card at 16 px */
@media (max-width: 359px) { .shipping-page .sh__feats b { font-size: 14px; overflow-wrap: anywhere; } .shipping-page .sh__feats li { padding-inline: 8px; } }
/* critic round 2: even rags in the small cards, the About title on two lines on a landscape tablet,
   the parcel clear of YOUR DOOR on a phone (it sat on the label before this pass too) */
.shipping-page .sh__feats b, .shipping-page .sh__feats li > span:last-child, .faq-page .fq__help span { text-wrap: balance; }
.legal-page .pr__terms li, .legal-page .pr__steps p { text-wrap: pretty; }
@media (min-width: 761px) and (max-width: 1100px) and (min-aspect-ratio: 1/1) { .about-page .ip { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
@media (max-width: 760px) { .shipping-page .sh__end--b { bottom: -6px; } }

/* ===================================================================== design pass: shop pages (18 Oct)
   The cart and the checkout in the home page's voice: the page title at the home page's chapter size, and on a
   computer or a landscape tablet the home page's Help & Guides layout from gutter to gutter (the title on the
   left, the cart on the right). The quantity stepper is the buy card's white pill. Scoped to cart-v2.html
   (.cart-page without .oc-page) and checkout-v2.html (.co-page). */
.cart-page:not(.oc-page) .cart__h, .co-page .cart__h {
  flex-wrap: wrap; align-items: baseline; column-gap: 14px; row-gap: 6px; margin: 0 0 10px;
  font: 600 var(--fs-heading)/.98 var(--display); letter-spacing: -0.04em; color: var(--ink);
}
.cart-page:not(.oc-page) .cart__n, .co-page .cart__n { font: 500 15px/1 var(--body); letter-spacing: 0; color: var(--muted); }
/* the cart's card: the same white card and radius as the buy card */
.cart-page:not(.oc-page) .cart__box, .cart-page:not(.oc-page) .item--empty { border-radius: 24px; box-shadow: 0 1px 1px rgba(32, 47, 48, .04), 0 24px 60px -30px rgba(32, 47, 48, .35); }
.cart-page:not(.oc-page) .cart__box { padding: 8px 24px 24px; }
.cart-page:not(.oc-page) .cart__box .item { padding: 18px 0; }
/* the stepper as on the buy card: one white pill with a hairline, round buttons inside */
.cart-page:not(.oc-page) .item__qty { gap: 0; padding: 3px; border-radius: 999px; background: #FFFFFF; box-shadow: 0 0 0 1px var(--line-2, rgba(32, 47, 48, .16)); }
.cart-page:not(.oc-page) .item__qty button { width: 40px; height: 40px; border-radius: 999px; background: transparent; font: 500 20px/1 var(--display); }
.cart-page:not(.oc-page) .item__qty button:hover:not(:disabled) { background: #ECECEA; }
.cart-page:not(.oc-page) .item__qty button:disabled { background: transparent; }
.cart-page:not(.oc-page) .item__qty button::before { inset: -2px; }
.cart-page:not(.oc-page) .item__qty span { min-width: 24px; font-size: 16px; }
.cart-page:not(.oc-page) .item__tag { white-space: nowrap; }
/* the sum: the total in the price voice of the buy card */
.cart-page:not(.oc-page) .sums__total dd { font-size: clamp(24px, 2vw, 28px); letter-spacing: -0.03em; }
.cart-page:not(.oc-page) .cart__go { min-height: 54px; font-size: 17px; }
@media (max-width: 760px) {
  .cart-page:not(.oc-page) .cart__box { padding: 4px 16px 18px; border-radius: 22px; }
  .cart-page:not(.oc-page) .cart__box .item { padding: 14px 0; }
  .cart-page:not(.oc-page) .item__qty { padding: 2px; }
  .cart-page:not(.oc-page) .item__qty button { width: 34px; height: 34px; font-size: 18px; }
  .cart-page:not(.oc-page) .item__qty button::before { inset: -5px; }
  .cart-page:not(.oc-page) .item__qty span { min-width: 22px; }
}
/* a portrait tablet: one column across the page, as the home page's chapters */
@media (min-width: 761px) {
  .cart-page:not(.oc-page) .cart__wrap { max-width: none; width: 100%; margin: 0; padding: 120px var(--gutter) clamp(72px, 8vw, 120px); }
}
/* a computer and a landscape tablet: the title on the left, the cart on the right (the home page's .void--help grid) */
@media (min-width: 1101px), (min-width: 761px) and (min-aspect-ratio: 1/1) {
  .cart-page:not(.oc-page) .cart__wrap { grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr); column-gap: clamp(32px, 5vw, 90px); row-gap: 0; align-items: start; align-content: start; }
  .cart-page:not(.oc-page) .cart__wrap > * { grid-column: 2; width: 100%; }
  .cart-page:not(.oc-page) .cart__wrap > .cart__h { grid-column: 1; grid-row: 1 / span 2; max-width: none; justify-self: start; margin: 0; position: sticky; top: 120px; }
  html.is-empty .cart-page:not(.oc-page) .cart__wrap { align-content: center; }
}
@media (min-width: 761px) and (max-width: 1100px) and (min-aspect-ratio: 1/1) {
  .cart-page:not(.oc-page) .cart__wrap { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); column-gap: 40px; }
}
/* critic round 1 ---------------------------------------------------------------------------------------------------- */
/* the cart starts where the home page's (and the buy page's) content column starts */
@media (min-width: 1101px), (min-width: 761px) and (min-aspect-ratio: 1/1) {
  .cart-page:not(.oc-page) .cart__wrap > * { justify-self: stretch; max-width: none; }
  /* an empty cart: the title and the small card side by side in the middle of the space above the footer */
  html.is-empty .cart-page:not(.oc-page) .cart__wrap { align-items: center; }
  html.is-empty .cart-page:not(.oc-page) .cart__wrap > .cart__h { position: static; }
}
/* no lone words: the Flex-Mount link and the cancel line break where they balance */
.cart-page:not(.oc-page) .item__more, .cart-page:not(.oc-page) .cart__fine { text-wrap: balance; }
/* very wide screens: the home page's shared edge (darkroom.css pins the shop pages to 32 px) */
@media (min-width: 1600px) { body.cart-page:not(.oc-page) main, body.co-page main { --gutter: max(32px, calc((100vw - 1536px) / 2)); } }
/* ===================================================================== end of design pass: shop pages */

/* round 2 (Eric, 18 Oct: "text lies on top of other text"): a heading stays put while the page scrolls only where it has
   a column of its own and the screen is tall enough for it, never in a one-column layout. The FAQ heading on a landscape
   tablet stayed put over the topics before this. The FAQ topics stay put only where the whole list fits the screen. */
@media (min-width: 1101px) and (min-height: 620px), (min-width: 761px) and (max-width: 1100px) and (min-aspect-ratio: 1/1) and (min-height: 620px) {
  .legal-page .ip > .ip__head, .legal-page .ip > .pr__top, .legal-page .ip__grid:not(.ip__grid--faq) > .pr__top { position: sticky; top: 112px; }
}
@media (max-height: 759px) { .faq-page .fq__tabs { position: static; } }

/* ---- round 2: the order confirmation takes the cart's layout (the thank-you on the left, the order on the right), so the
   receipt is no longer a 460 px strip in the middle of a wide screen; a phone keeps the centred column */
@media (min-width: 761px) {
  .oc-page .cart__wrap { max-width: none; width: 100%; box-sizing: border-box; margin: 0; padding: 120px var(--gutter) clamp(72px, 8vw, 120px); }
  .oc-page .cart__wrap > .item--empty { justify-self: center; width: 100%; max-width: 520px; }
  .oc-page .cart__wrap:has(> .item--empty:not([hidden])) { flex: 1; align-content: center; }
  .oc-page .oc:not([hidden]) { max-width: 760px; width: 100%; justify-self: center; }
}
@media (min-width: 1101px), (min-width: 761px) and (min-aspect-ratio: 1/1) {
  .oc-page .oc:not([hidden]) { max-width: none; grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr); column-gap: clamp(32px, 5vw, 90px); row-gap: 16px; align-items: start; }
  .oc-page .oc > * { grid-column: 2; min-width: 0; }
  .oc-page .oc > .oc__hero { grid-column: 1; grid-row: 1 / span 5; justify-items: start; padding: 0; text-align: left; }
  .oc-page .oc__h { justify-content: flex-start; text-align: left; font-size: var(--fs-heading); line-height: 1.04; margin: 6px 0 10px; }
  .oc-page .oc > .oc__hero { gap: 12px; }
  .oc-page .oc__btns { justify-content: flex-start; }
}
@media (min-width: 761px) and (max-width: 1100px) and (min-aspect-ratio: 1/1) {
  .oc-page .oc:not([hidden]) { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); column-gap: 40px; }
}
@media (min-width: 1101px) and (min-height: 620px), (min-width: 761px) and (min-aspect-ratio: 1/1) and (min-height: 620px) {
  .oc-page .oc > .oc__hero { position: sticky; top: 120px; }
}
.oc-page .oc__box, .oc-page .oc__next { padding: clamp(20px, 2.4vw, 32px); border-radius: 20px; }
.oc-page .oc__steps p { font-size: 15px; }
/* the buttons at the 56 px standard; the FAQ link a full 44 px target */
.oc-page .oc__btns .pill-btn { min-height: 56px; padding: 0 28px; font-size: 17px; }
.oc-page .oc__btns .link { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; }
.oc-page .item--empty .pill-btn, .oc-page .item--empty .cart__go { min-height: 56px; font-size: 17px; }
/* the cart: Add · €9.99 / Add · €119 and Check out at the same 56 px as every other pill on the site */
.cart-page:not(.oc-page) .addons .addon__btn { min-height: 56px; font-size: 16px; }
.cart-page:not(.oc-page) .cart__go { min-height: 56px; }
.item--empty .item__go { min-height: 56px; padding: 0 26px; font-size: 16px; }
/* round 2 critic: "1–3" never splits across two lines; the four return steps start their text on one line; the FAQ
   topics column a little wider on a tablet so "Still stuck?" reads in two calm lines */
.nw { white-space: nowrap; }
@container ipbody (min-width: 741px) { .shipping-page .pr__steps--line h3 { min-height: 2.5em; } }
@media (min-width: 761px) and (max-width: 1100px) { .faq-page .fq { grid-template-columns: 232px minmax(0, 1fr); } }
@media (max-width: 400px) { .faq-page .fq__search input { text-overflow: ellipsis; } }

/* ---- round 3: from 1600 px the content keeps the home page's 1536 px measure and centres it, as home, buy and cart do
   (set on the content wrappers only, so the header and the footer inside <main> are untouched) */
@media (min-width: 1600px) {
  body.legal-page main .legal__wrap, body.oc-page main .cart__wrap { --gutter: max(32px, calc((100vw - 1536px) / 2)); }
}
/* ---- round 3: the order confirmation opened without an order is a page of its own, as the 404 is: the line in the
   home page's heading voice, the note under it in the body voice, the 56 px button, the lock beside it; middle of the
   first screen. No card: the words are the page. */
.oc-page .cart__wrap > .item--empty { background: none; box-shadow: none; border-radius: 0; padding: 0; }
.oc-page .item--empty .item__name { margin: 0; font: 600 var(--fs-heading)/1.02 var(--display); letter-spacing: -0.04em; color: var(--ink); text-wrap: balance; }
.oc-page .item--empty .item__meta { margin: 22px 0 0; max-width: 26em; font: 400 clamp(18px, 1.35vw, 21px)/1.38 var(--body); letter-spacing: -0.012em; color: var(--ink-2); text-wrap: pretty; }
.oc-page .item--empty .item__go { justify-self: start; margin-top: 32px; padding: 0 28px; font-size: 17px; }
.oc-page .item--empty .item__pic { width: 100%; max-width: 300px; aspect-ratio: 1; border-radius: 0; background: none; }
@media (min-width: 761px) {
  .oc-page .cart__wrap > .item--empty { justify-self: stretch; max-width: none; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr); grid-template-rows: auto auto; column-gap: clamp(32px, 5vw, 90px); align-items: center; }
  .oc-page .item--empty .item__what { grid-column: 1; grid-row: 1; align-self: end; }
  .oc-page .item--empty .item__go { grid-column: 1; grid-row: 2; align-self: start; }
  .oc-page .item--empty .item__pic { grid-column: 2; grid-row: 1 / span 2; justify-self: center; }
}
@media (max-width: 760px) {
  .oc-page .cart__wrap > .item--empty { grid-template-columns: 1fr; justify-items: start; gap: 0; margin-top: 8px; }
  .oc-page .item--empty .item__pic { max-width: 132px; margin-bottom: 20px; }
  .oc-page .item--empty .item__name { font-size: clamp(30px, 8.6vw, 36px); line-height: 1.04; }
  .oc-page .item--empty .item__meta { margin-top: 12px; font-size: 17px; }
  .oc-page .item--empty .item__go { margin-top: 28px; }   /* content-wide, as the 404's button */
}
/* (it fills the first screen and sits in its middle, so the footer starts below the fold, as on the 404) */
.oc-page .cart__wrap:has(> .item--empty:not([hidden])) { min-height: 100vh; min-height: 100svh; box-sizing: border-box; align-content: center; padding-top: 104px; padding-bottom: 72px; }
@media (max-width: 760px) { .oc-page .cart__wrap:has(> .item--empty:not([hidden])) { padding-top: 88px; } }
/* round 3 critic: where the delivery bars stack (a phone, a narrow column) the "Two or more locks" row has no bar, so it
   does not keep an empty bar row; the lock beside "No recent order" grows a little on wide screens (to its real 320 px) */
@media (max-width: 760px) { .shipping-page .sh__free .sh__track { display: none; } .shipping-page .sh__free .sh__days { grid-row: 2; } }
@container ipbody (min-width: 481px) and (max-width: 640px) { .shipping-page .sh__free .sh__track { display: none; } .shipping-page .sh__free .sh__days { grid-row: 2; } }
@media (min-width: 761px) { .oc-page .item--empty .item__pic { max-width: none; width: clamp(240px, 18vw, 320px); } }
@media (max-width: 760px) { .shipping-page .pr .sh__bars ~ .pr__fine { margin-top: 4px; } }
@container ipbody (min-width: 481px) and (max-width: 640px) { .shipping-page .pr .sh__bars ~ .pr__fine { margin-top: 4px; } }

/* ---- Eric, 18 Oct: the FAQ keeps the layout he liked at 1085 px at every width from a tablet up: the heading, the
   line, the search and Popular across the top with the drawing at its top right; below them the topics with Still stuck?
   beside the questions. The page keeps the 1536 px measure from 1600 px. A phone is unchanged. */
@media (min-width: 1101px) {
  .faq-page .fq { grid-template-columns: 260px minmax(0, 1fr); gap: 48px; margin-top: 44px; }
  .faq-page .fq__search { max-width: 560px; }
}

/* ---- the FAQ on a phone (Eric, 18 Oct: "unclear, unstructured, not clean"): one calm column in the home page's language.
   A header block (eyebrow, title, line, the search as the main action), Popular as a row of outlined pills, the eight
   topics as a two-column grid of white tiles (the picked one Deep Teal, its count beside it), the questions of a topic in
   one white card with hairlines, and Still stuck? as the closing card. Every edge on the same 16 px inset. */
@media (max-width: 760px) { .faq-page main.shop.legal .legal__wrap { padding-top: 104px; } }
@media (max-width: 1023px) {
  .faq-page .fq__search { margin-top: 22px; }
  .faq-page .fq__search input { height: 52px; box-shadow: inset 0 0 0 1px var(--line-2), 0 1px 0 rgba(32, 47, 48, .04); }

  /* Popular: a label on its own line, then the questions as outlined pills */
  .faq-page .pr .fq__pop { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; }
  .faq-page .fq__pop > span { flex-basis: 100%; margin: 0 0 2px; font: 500 13px/1.2 var(--display); color: var(--muted); }
  .faq-page .fq__pop a { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(32, 47, 48, .18); font: 500 14px/1.25 var(--display); color: var(--ink); text-decoration: none; }
  .faq-page .fq__pop a:active { background: #FFFFFF; }

  /* the topics: the tab list lays its tabs into the page grid, two to a row; Still stuck? goes to the end */
  .faq-page .fq { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 28px; }
  .faq-page .fq__tabs { display: contents; }
  .faq-page .fq__tab { order: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 0 14px; border-radius: 16px; background: #FFFFFF; color: var(--ink); font: 500 14.5px/1.2 var(--display); text-align: left; box-shadow: none; }
  .faq-page .fq__tab svg { width: 18px; height: 18px; color: var(--green); }
  .faq-page .fq__tab em { display: block; font: 500 12px/1 var(--body); font-style: normal; color: var(--muted); }
  .faq-page .fq__tab[aria-selected="true"] { background: var(--green); color: #FFFFFF; }
  .faq-page .fq__tab[aria-selected="true"] svg { color: #FFFFFF; }
  .faq-page .fq__tab[aria-selected="true"] em { color: rgba(255, 255, 255, .72); }
  .faq-page .fq.is-search .fq__tab[aria-selected="true"] { background: #FFFFFF; color: var(--ink); }
  .faq-page .fq.is-search .fq__tab[aria-selected="true"] svg { color: var(--green); }
  .faq-page .fq.is-search .fq__tab[aria-selected="true"] em { color: var(--muted); }
  .faq-page .fq__panels { order: 1; grid-column: 1 / -1; display: grid; gap: 12px; margin-top: 12px; }

  /* a topic's questions: one white card, hairlines between them, the topic name as its small heading */
  .faq-page .fq__panel:not([hidden]) { display: block; padding: 4px 0; border-radius: 20px; background: #FFFFFF; }
  .faq-page .fq__h { margin: 0 !important; padding: 14px 18px 6px; }
  .faq-page.faq-page .fq.is-search .fq__panel + .fq__panel .fq__h { margin-top: 0 !important; }
  .faq-page .fq__q, .faq-page .fq__q[open] { border-radius: 0; background: none; box-shadow: none; }
  .faq-page .fq__q:not([open]) + .fq__q:not([open]) summary { box-shadow: none; }
  .faq-page .fq__q + .fq__q { border-top: 1px solid var(--line-2); }
  .faq-page .fq__q summary { padding: 16px 18px; }
  .faq-page .fq__a { padding: 0 18px 18px; }

  /* Still stuck?: the closing card */
  .faq-page .fq__help { order: 2; grid-column: 1 / -1; display: grid; gap: 4px; margin-top: 12px; padding: 18px; border-radius: 20px; background: #FFFFFF; font-size: 14px; }
  .faq-page .fq__help b { font-size: 17px; margin-bottom: 2px; }
  .faq-page .fq__help a { display: inline-flex; align-items: center; min-height: 36px; font-size: 15px; }
}
@media (max-width: 359px) { .faq-page .fq__tab { padding: 0 10px; gap: 8px; font-size: 13.5px; } }
@media (max-width: 1023px) {
  /* Popular as a short list in a white card, one question per row with an arrow, as the home page's Help & Guides rows */
  .faq-page .pr .fq__pop { display: grid; gap: 0; margin: 18px 0 0; padding: 4px 0; border-radius: 20px; background: #FFFFFF; }
  .faq-page .fq__pop > span { margin: 0; padding: 12px 18px 4px; font: 500 12px/1.2 var(--display); letter-spacing: .04em; color: var(--muted); }
  .faq-page .fq__pop a { display: flex; justify-content: space-between; gap: 12px; min-height: 48px; padding: 12px 18px; border-radius: 0; box-shadow: none; font: 500 15px/1.3 var(--display); }
  .faq-page .fq__pop a + a { border-top: 1px solid var(--line-2); }
  .faq-page .fq__pop a::after { content: ""; flex: none; align-self: center; width: 7px; height: 7px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; rotate: 45deg; margin-right: 3px; color: var(--muted); }
  .faq-page .fq__pop a:active { background: rgba(32, 47, 48, .04); }

  /* topic tiles: the icon and the count on top, the name below on one line */
  .faq-page .fq__tab { grid-template-columns: 1fr auto; grid-template-areas: "ic ct" "nm nm"; align-content: space-between; align-items: center; row-gap: 10px; min-height: 76px; padding: 14px; }
  .faq-page .fq__tab svg { grid-area: ic; }
  .faq-page .fq__tab em { grid-area: ct; }
  .faq-page .fq__tab > span { grid-area: nm; text-wrap: balance; }
}
@media (max-width: 359px) { .faq-page .fq__tab { padding: 12px; font-size: 14px; } }
/* a portrait tablet and a large phone held sideways: the same structure, four topic tiles to a row, the search no wider
   than the Popular card */
@media (min-width: 600px) and (max-width: 1023px) {
  .faq-page .fq { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .faq-page .pr .fq__pop, .faq-page .fq__search { max-width: none; }
}
/* critic: while a search is typed the matches come straight under the search (Popular and the tiles step aside); tiles in
   a row share one height and keep two to a row until there is room for four; one 20 px rhythm between the blocks; the
   card labels in one eyebrow voice; text in tiles on the cards' 18 px inset; Yes/No and the Still stuck? links at 44 px */
@media (max-width: 1023px) {
  .faq-page .ip__grid--faq:has(.fq.is-search) .fq__pop { display: none; }
  .faq-page .fq.is-search .fq__tab { display: none; }
  .faq-page .fq.is-search .fq__panels { margin-top: 0; }
  .faq-page .fq { align-items: stretch; margin-top: 20px; }
  .faq-page .pr .fq__pop { margin-top: 20px; }
  .faq-page .fq__panels, .faq-page .fq__help { margin-top: 12px; }
  .faq-page .fq__tab { padding-inline: 18px; }
  .faq-page .fq__pop > span { font: 500 12px/1.2 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
  .faq-page .pr .fq__a .fq__rate button { min-height: 40px; padding: 0 16px; }
  .faq-page .fq__rate button::before { inset: -2px 0; }
  .faq-page .fq__help { justify-items: start; gap: 6px; }
  .faq-page .fq__help a { min-height: 44px; padding: 0 18px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(32, 47, 48, .18); border-bottom: 0; text-decoration: none; font: 500 15px/1 var(--display); color: var(--ink); }
  .faq-page .fq__help a:first-of-type { margin-top: 6px; }
}
@media (min-width: 600px) and (max-width: 719px) { .faq-page .fq { grid-template-columns: 1fr 1fr; } }
@media (max-width: 359px) { .faq-page .fq__tab { padding-inline: 12px; } }
/* the tactile family (tactile.css, Eric 18 Oct) on the phone FAQ: topic tiles are white keys with a hairline edge and a
   small lift; the open topic is the pressed dark key, as the chosen chip elsewhere (Deep Teal stays the one filled
   button); Still stuck?'s phone and email are white keys too. These win over tactile.css by being more specific. */
@media (max-width: 1023px) {
  .faq-page .fq__tab { border-radius: 12px; background: var(--t-chalk, #FFFFFF); box-shadow: var(--t-chalk-shadow, 0 0 0 1px rgba(32, 47, 48, .12)); transition: box-shadow .2s, background .2s, scale .1s; }
  .faq-page .fq__tab:hover { background: #FFFFFF; box-shadow: inset 0 1px 0 #FFFFFF, 0 0 0 1px var(--t-edge-2, rgba(32, 47, 48, .2)), var(--t-lift-hi, none); }
  .faq-page .fq__tab:active { scale: .985; }
  .faq-page .fq__tab[aria-selected="true"], .faq-page .fq__tab[aria-selected="true"]:hover {
    background: linear-gradient(180deg, #2C3D3E 0%, #202F30 100%); color: #ECECEA;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 0 0 1px #121c1d, 0 1px 2px rgba(0, 0, 0, .2);
  }
  .faq-page .fq__tab[aria-selected="true"] svg { color: #9BCDD0; }
  .faq-page .fq__tab[aria-selected="true"] em { color: rgba(236, 236, 234, .7); }
  .faq-page .fq__help a { border-radius: 10px; background: var(--t-chalk, #FFFFFF); box-shadow: var(--t-chalk-shadow, inset 0 0 0 1px rgba(32, 47, 48, .18)); }
  .faq-page .fq__help a:hover { background: #FFFFFF; box-shadow: inset 0 1px 0 #FFFFFF, 0 0 0 1px var(--t-edge-2, rgba(32, 47, 48, .2)), var(--t-lift-hi, none); }
}

/* phone centring (18 Oct): on a phone a lone call to action spans the column, and the short "nothing here" pages
   (404, order-confirmed without an order) sit centred, picture, words and button, instead of hugging the left edge */
@media (max-width: 760px) {
  .legal-page .ip--short, .oc-page .item--empty { text-align: center; }
  .legal-page .ip--short { align-items: stretch; }
  .legal-page .ip--short .cart__go { display: flex !important; justify-content: center; width: 100%; }
  .oc-page .item--empty { justify-items: center; }
  .oc-page .item--empty .item__pic { justify-self: center; margin-inline: auto; }
  .oc-page .item--empty .item__go { justify-self: stretch; justify-content: center; text-align: center; }
}

/* phone title size (18 Oct): the shop pages' page titles in the info and help pages' phone size (32 px at 375,
   up to 40), so a title is the same size wherever it is on a phone */
@media (max-width: 760px) {
  .cart-page:not(.oc-page) .cart__h, .co-page .cart__h, .oc-page .oc__h, .oc-page .item--empty .item__name { font-size: clamp(32px, 8.6vw, 40px); line-height: 1.04; }
}