/* ============================================================
   NORDIC DIET, Homepage v2  ·  "Eldað við 90°"
   Brand: Off-white base · Oat cards · Icy blue sections ·
   Every colour means something. Off-white / oat = the page.
   Icy = beef. Turkey and fish colours = that recipe's card only.
   Yellow = action: buttons, the final CTA band, our comparison
   column. Dark = text only, never a surface or a button fill (the
   final CTA's button is slate, #2E4A4F).
   One display face, Fraunces, on every heading, the hero included;
   the handwritten script lives on only in the logo, which is an image.
   Body and UI: Poppins.
   ============================================================ */

:root{
  --offwhite:#FAF9F6;
  --oat:#F0ECE3;
  --oat-deep:#E6E0D2;
  --ink:#1A1F1E;
  --ink-soft:rgba(26,31,30,.68);
  --icy:#D4FBFF;
  --icy-soft:#EAFDFF;
  --yellow:#FFE7A0;
  --yellow-deep:#F5D678;
  --pink:#FFDDE6;
  --display:var(--serif);
  /* One width and one radius for every coloured section. Inset 0: every
     band runs the full width of the hero photo, edge to edge. */
  --section-inset:0px;
  /* How far a rounded block is pulled up over the one above it. */
  --section-overlap:56px;
  --section-radius:var(--radius-lg);
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  /* Approved by Breki, do not change: soft terminals, no swash letters. */
  --serif-axes:'SOFT' 100,'WONK' 0,'opsz' 48;
  --body:'Poppins',Arial,sans-serif;
  --radius:22px;
  --radius-lg:34px;
  --shadow:0 18px 44px -18px rgba(26,31,30,.16);
  --shadow-soft:0 10px 30px -14px rgba(26,31,30,.12);
  --max:1180px;
  /* The page has a ceiling. Past it the layout stops growing and sits
     centred on its own background, the way a shop or a paper does: zooming
     out then shows more margin, not a stretched hero with a thin column of
     text lost in the middle of it. Real monitors up to 1920 are untouched. */
  --page-max:1920px;
  --ease:cubic-bezier(.22,.8,.24,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--body);
  background:var(--offwhite);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  max-width:var(--page-max);margin-inline:auto;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}

.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}

/* ---------- type scale ---------- */
.display{
  font-family:var(--serif);
  font-weight:500;
  font-variation-settings:var(--serif-axes);
  line-height:1.06;
  letter-spacing:-.018em;
}
h1.display{font-size:clamp(3rem,7.2vw,5.6rem)}
h2.display{font-size:clamp(2rem,3.9vw,3.1rem);text-wrap:balance}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.78rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);
}
.eyebrow::before{content:'';width:26px;height:2px;background:var(--ink);opacity:.35;border-radius:2px}
.lede{font-size:clamp(1.02rem,1.6vw,1.2rem);color:var(--ink-soft);max-width:36em}
.section-head{max-width:640px;margin-bottom:clamp(36px,5vw,64px)}
.section-head .display{margin:14px 0 16px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-weight:600;font-size:1rem;
  padding:16px 30px;border-radius:999px;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s;
  will-change:transform;
}
.btn-primary{
  background:var(--yellow);color:var(--ink);
  box-shadow:0 12px 26px -12px rgba(245,214,120,.9);
}
.btn-primary:hover{background:var(--yellow-deep);transform:translateY(-2px);box-shadow:0 18px 34px -12px rgba(245,214,120,.95)}
.btn-primary svg{transition:transform .25s var(--ease)}
.btn-primary:hover svg{transform:translateX(4px)}
.btn-ghost{
  background:transparent;color:var(--ink);font-weight:600;
  padding:16px 6px;border-bottom:2px solid rgba(26,31,30,.18);border-radius:0;
}
.btn-ghost:hover{border-color:var(--ink)}
.btn:focus-visible,a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:3px solid #74c7d3;outline-offset:3px;border-radius:6px;
}

/* ---------- nav ---------- */
header{
  position:sticky;top:0;z-index:60;
  background:rgba(250,249,246,.86);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(26,31,30,.06);
}
.nav{
  max-width:var(--max);margin:0 auto;padding:14px 24px;
  display:flex;align-items:center;gap:28px;
}
/* The logo keeps its own width: the anchor is a flex item, and without
   these the global img{max-width:100%} let a tight row squash it. */
.nav-logo{flex-shrink:0}
.nav-logo img{height:30px;width:auto;max-width:none}
.nav-links{display:flex;gap:26px;font-size:.94rem;font-weight:500;margin-left:8px}
.nav-links a{opacity:.78;transition:opacity .2s}
.nav-links a:hover{opacity:1}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:16px}
.lang-toggle{
  display:flex;background:var(--oat);border-radius:999px;padding:3px;
}
.lang-toggle button{
  font-size:.78rem;font-weight:600;padding:6px 12px;border-radius:999px;
  color:var(--ink-soft);transition:all .2s;
}
.lang-toggle button.active{background:#fff;color:var(--ink);box-shadow:0 2px 8px rgba(26,31,30,.1)}
.nav-login{display:inline-flex;align-items:center;gap:7px;font-size:.9rem;font-weight:600;opacity:.8;transition:opacity .2s}
.nav-login:hover{opacity:1}
.nav .btn-primary{padding:11px 22px;font-size:.92rem}
.nav-burger{display:none;flex-direction:column;gap:5px;padding:8px}
.nav-burger span{width:22px;height:2px;background:var(--ink);border-radius:2px;transition:.3s}

/* ---------- hero ---------- */
/* The photo runs the full width of the viewport and the copy sits on it.
   min-height keeps a usable band on a wide screen, where 45% of the width
   would otherwise be taller than the fold. */
/* The photo runs the full width of the viewport and the copy sits on it.
   The band takes the picture's own 1442x667 shape, so on a desktop nothing is
   cropped and the dog stays whole; the min/max keep it sane on a phone and on
   an ultrawide. */
.hero{
  position:relative;overflow:hidden;isolation:isolate;
  aspect-ratio:1442/667;
  /*
   * min-height only ever bites on a narrow window, and every pixel it adds
   * there is a pixel cropped off the sides of the photo, which is the side
   * the dog is on. Let the band keep the picture's shape.
   *
   * max-height used to sit at 78vh, which on a tall or wide monitor stopped
   * the band from growing well before the aspect-ratio naturally would: the
   * photo visibly stopped scaling up while the rest of the page kept
   * growing around it. 100vh removes that false ceiling; the picture can
   * now grow all the way up to filling the viewport height, exactly as
   * wide-monitor testing asked for.
   */
  min-height:clamp(400px,48vh,540px);max-height:100vh;
  display:flex;align-items:flex-start;
  padding:clamp(34px,5vw,64px) 0;
  background:var(--icy-soft);
}
/* At the band's own shape nothing is cropped and these values do nothing. They
   are the insurance for the windows that do crop: y centred, so a short wide
   window loses sky and gravel rather than the dog; x well right, so a narrow
   window loses the far side of the fjord rather than the dog. */
.hero-pic{display:contents}
.hero-bg{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:78% 50%;
  z-index:-2;
}
/* The copy keeps the brand's dark ink, so the scrim is light. It is strongest
   at the top left where the words are and gone before it reaches the dog, who
   sits on the right and should stay a photograph. */
.hero::before{
  content:'';position:absolute;inset:0;z-index:-1;
  /* One gradient only. A second one along the bottom edge softened the join to
     the next section but washed out the dog.
     It has to stay solid out to about 44%: that is where the facts row ends,
     and that row runs across the rooftops of the bær. It then has to be gone
     by 58%, where the dog's tail begins. */
  background:linear-gradient(104deg,rgba(250,249,246,.96) 0%,rgba(250,249,246,.88) 30%,rgba(250,249,246,.6) 44%,rgba(250,249,246,.16) 53%,rgba(250,249,246,0) 60%);
}
.hero-inner{position:relative;width:100%}
/* A bit smaller than it was: the picture is doing the talking now. */
.hero-copy{max-width:min(520px,92%)}
/* The hero in the same Fraunces as every other heading. The spacing was
   tuned for the old handwritten face; these are the serif's own values. */
.hero-copy h1.display{font-family:var(--serif);font-weight:500;font-variation-settings:var(--serif-axes);line-height:1.04;letter-spacing:-.018em;font-size:clamp(2.1rem,4.1vw,3.3rem)}
/* Ink at 80%, not the 68% soft grey: on the hazy left of the photo the soft
   grey fell under WCAG AA. */
.hero-copy .lede{font-size:clamp(.95rem,1.2vw,1.04rem);max-width:28em;color:rgba(26,31,30,.8)}
/* The tick line runs across the rooftops of the bær, where the photo is
   busiest: full ink is what keeps it above 4.5:1 there. */
.hero-copy .hero-note{color:var(--ink)}
.hero-copy .display{margin:16px 0 18px}
.hero-copy .display>span{display:block;text-wrap:balance}
.hero-copy .display em{
  font-style:normal;position:relative;white-space:nowrap;z-index:0;display:inline-block;
}

.hero-ctas{display:flex;align-items:center;gap:26px;margin-top:26px;flex-wrap:wrap}
.hero-more{margin-top:18px;padding-top:4px;padding-bottom:4px;font-size:.92rem}
/* The first-purchase line: one sentence under the facts, no box. */
.hero-start{margin:14px 0 0;font-size:.9rem;font-weight:600;line-height:1.5}
.hero-note{margin-top:16px;font-size:.85rem;color:var(--ink-soft);display:flex;gap:14px;flex-wrap:wrap}
.hero-note span{display:inline-flex;align-items:center;gap:6px}
.hero-note svg{flex:none}
/* The four USPs under the buttons: one short line each, two per row. */
.hero-usp{list-style:none;margin-top:20px;padding:0;display:grid;grid-template-columns:repeat(2,max-content);column-gap:22px;row-gap:8px}
.hero-usp li{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.hero-usp svg{flex:none;color:var(--ink)}
/* Below 1100 the words cannot sit on the photo. The copy column is a fixed
   520px and the dog starts a little past halfway across the picture: the two
   meet, the USP row lands on the rooftops, and no scrim can carry the words
   without also erasing the dog.
   So the band splits into two normal-flow columns: copy on the left, the
   photograph on the right as its own rounded picture, cropped to the dog.
   Nothing is absolute any more, so there is no fixed-height strip and no
   empty offwhite field beside a narrow copy column. */
/* Tablet (iPad, 721–1100px) keeps the wide hero: photo full bleed, copy
   over it, exactly as on a desktop. It used to switch to a two-column grid
   with a framed 4:5 photo here, which looked like a different site. Only the
   headline steps down; the phone layout below still takes over at 720px. */
@media (max-width:1100px){
  .hero-copy h1.display{font-size:clamp(2.1rem,4.6vw,3rem)}
  /* With a fixed aspect ratio and a min-height, a narrow window lets the
     min-height win and the ratio then widens the band past the screen
     (1063px on a 768px iPad). Pin the width; the height crops instead. */
  .hero{width:100%}
  /* A narrower band crops the photo's sides; the dog sits on the right edge,
     so the crop is taken from the left, where the copy covers it anyway. */
  .hero-bg{object-position:96% 50%}
  /* The header fits on a tablet on one line: login is its icon, the gaps
     and the side padding close up, and no label wraps onto a second line. */
  .nav{gap:16px;padding-left:16px;padding-right:16px}
  .nav-links{gap:16px;margin-left:0}
  .nav-right{gap:10px}
  .nav-login span{display:none}
  .nav-links a,.nav .btn-primary{white-space:nowrap}
  .nav .btn-primary{padding:10px 16px}
}
/* On a phone the photograph leads. It fills most of the first screen,
   cropped to the dog, and the copy follows in an offwhite card whose rounded
   top is pulled up over the picture: dog and promise in one glance, with the
   brand's dark ink kept on its own light ground rather than on the photo. */
@media (max-width:720px){
  /* The desktop hero is a fixed-ratio band with the photo absolutely behind
     the copy and a scrim over it. The phone undoes all of that here, itself:
     it used to lean on the tablet block for half of it. */
  .hero{display:block;padding:0;background:var(--offwhite);aspect-ratio:auto;min-height:0;max-height:none}
  .hero::before{content:none}
  .hero-pic{display:block;order:0;min-width:0}
  .hero-bg{
    position:static;display:block;width:100%;height:58svh;min-height:340px;max-height:520px;
    aspect-ratio:auto;object-fit:cover;object-position:86% 42%;border-radius:0;
  }
  .hero-copy{max-width:none}
  /* A phone screen has room for the headline and the button, not the rest. */
  .hero-copy .lede,.hero-start{display:none}
  .hero-inner{
    position:relative;margin-top:-28px;padding:26px 24px 44px;max-width:none;
    background:var(--offwhite);border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  }
  .hero-copy h1.display{font-size:clamp(2.1rem,8.6vw,2.6rem)}
  .hero-copy .display{margin:12px 0 14px}
  .hero-ctas{margin-top:20px}
  .hero-ctas .btn-primary{width:100%;justify-content:center}
  .hero-usp{grid-template-columns:1fr;row-gap:6px;margin-top:22px}
  .hero-usp li{white-space:normal;align-items:flex-start;font-size:.82rem;line-height:1.35}
  .hero-usp svg{margin-top:2px}
  .hero-more{margin-top:18px}
}
@media (max-width:360px){.hero-usp{grid-template-columns:1fr}}

@keyframes float{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-14px) rotate(4deg)}}

/* ---------- promise band ---------- */
.promises{background:var(--offwhite);padding:clamp(40px,6vw,84px) 0}
.promise-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
}
.promise{
  background:var(--oat);border-radius:var(--radius);
  padding:30px 26px 28px;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.promise:hover{transform:translateY(-5px);box-shadow:var(--shadow-soft)}
.promise .p-icon{
  width:52px;height:52px;border-radius:16px;background:#fff;
  display:flex;align-items:center;justify-content:center;margin-bottom:18px;
}
.promise h3{font-size:1.04rem;font-weight:600;line-height:1.35;margin-bottom:8px}
.promise p{font-size:.9rem;color:var(--ink-soft)}

/* ---------- recipes ---------- */
.recipes{padding:clamp(64px,9vw,120px) 0}
.recipe-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.recipe{
  background:#fff;border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow-soft);display:flex;flex-direction:column;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.recipe:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.pack-window{
  position:relative;aspect-ratio:1/0.86;display:flex;align-items:flex-end;justify-content:center;
  overflow:hidden;
}
.recipe[data-flavor="beef"] .pack-window{background:linear-gradient(180deg,var(--icy),#f2feff)}
.recipe[data-flavor="fish"] .pack-window{background:linear-gradient(180deg,var(--pink),#fff3f6)}
.recipe[data-flavor="turkey"] .pack-window{background:linear-gradient(180deg,var(--yellow),#fff8e6)}
.pack-window .pack{
  width:56%;transform:translateY(14%) scale(.88);
  transition:transform .9s var(--ease);
  filter:drop-shadow(0 22px 26px rgba(26,31,30,.18));
}
.recipe.inview .pack-window .pack{transform:translateY(6%) scale(1)}
.recipe:hover .pack-window .pack{transform:translateY(4%) scale(1.05)}
.recipe-badge{z-index:2;
  position:absolute;top:18px;left:18px;background:#fff;border-radius:999px;
  font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  padding:7px 14px;box-shadow:0 4px 12px rgba(26,31,30,.1);
}
.recipe-badge{color:var(--ink)}
/* Available now in the brand yellow, so the one recipe you can order stands apart; coming soon stays grey. */
.recipe-badge:not(.soon){background:var(--yellow,#FFE7A0)}
.recipe-badge.soon{background:var(--oat)}
.recipe-body{padding:26px 26px 24px;display:flex;flex-direction:column;flex:1}
.recipe-body h3{font-size:1.3rem;font-weight:600}
.recipe-body .r-line{font-size:.95rem;font-weight:500;margin:4px 0 0}
.recipe-body .r-sub{font-size:.9rem;color:var(--ink-soft);margin:6px 0 16px}
/* "Sjá meira" sits on the card's floor, so three cards with lists of
   different length still line up. */
.recipe-body .nd-ing-open{margin-top:auto;align-self:flex-start}
.r-toggle{
  margin-top:auto;display:flex;align-items:center;justify-content:space-between;
  font-weight:600;font-size:.92rem;padding:14px 0 4px;
  border-top:1px solid rgba(26,31,30,.08);width:100%;text-align:left;color:var(--ink);
}
.r-toggle svg{transition:transform .3s var(--ease)}
.r-toggle[aria-expanded="true"] svg{transform:rotate(45deg)}
.r-panel{max-height:0;overflow:hidden;transition:max-height .5s var(--ease)}
.r-panel ul{padding:12px 0 4px;display:flex;flex-wrap:wrap;gap:8px}
.r-panel li{
  background:var(--oat);border-radius:999px;font-size:.78rem;font-weight:500;
  padding:6px 13px;
}
.r-panel .r-note{font-size:.76rem;color:var(--ink-soft);padding:8px 0 2px}
/* The card's accordion. Only one of the two labels shows, by open state. */
.r-toggle .r-when-open{display:none}
.r-toggle[aria-expanded="true"] .r-when-closed{display:none}
.r-toggle[aria-expanded="true"] .r-when-open{display:inline}
.r-panel-inner{padding:12px 0 4px}
.r-panel .r-label{font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 6px}
.r-panel .ingredients{margin-bottom:14px}
.r-panel .nutri{margin-bottom:14px}
/* A recipe that cannot be ordered yet: the pack sits back a little. */
/* Coming-soon packs used to be desaturated and faded; the photo is the product, it stays as shot. */


/* ---------- why fresh ---------- */
.why{background:var(--oat);padding:clamp(64px,9vw,120px) 0}
.why-band{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(32px,5vw,72px);align-items:center}
/* The first week, as a quiet card inside the section rather than a banner. */
/* The first purchase reads as the offer it is, not as a footnote: the brand
   yellow on a label and a hairline, the card lifted off the oat, and the fine
   print demoted under the line that actually matters. It stays white rather
   than going yellow all over, because the button right below it is yellow and
   two yellow blocks in a row read as one. */
.why-start{
  margin:22px 0 26px;padding:20px 24px 22px;
  border-radius:var(--radius);background:var(--offwhite);
  border:1px solid rgba(26,31,30,.12);
}
.why-tag{
  display:inline-flex;align-items:center;
  background:var(--oat);border-radius:999px;padding:5px 13px;
  font-size:.68rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
}
.why-start h3{font-size:1.22rem;font-weight:700;margin:12px 0 8px}
.why-start p{font-size:.94rem;line-height:1.55;color:var(--ink);margin:0}
.why-start p+p{margin-top:10px;font-size:.83rem;color:var(--ink-soft)}
.final-start{margin:16px 0 0;font-size:.9rem;font-weight:500;color:var(--ink)}
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:26px}
.why-card{background:var(--offwhite);border-radius:var(--radius);padding:32px 28px}
.why-card .strike{
  font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft);display:inline-block;margin-bottom:14px;
  text-decoration:line-through;text-decoration-color:rgba(26,31,30,.4);text-decoration-thickness:2px;
}
.why-card h3{font-size:1.1rem;font-weight:600;margin-bottom:8px}
.why-card p{font-size:.9rem;color:var(--ink-soft)}
.why-contrast{
  background:var(--icy);border-radius:var(--radius);
  padding:26px 32px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  font-weight:600;
}
.why-contrast .tick{
  width:40px;height:40px;border-radius:12px;background:#fff;flex:none;
  display:flex;align-items:center;justify-content:center;
}


/* ---------- recipe panel link ---------- */
.r-link{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.88rem;margin:10px 0 4px;border-bottom:2px solid var(--yellow);padding-bottom:2px}
.r-link svg{transition:transform .25s var(--ease)}
.r-link:hover svg{transform:translateX(4px)}

/* ---------- hollustan ---------- */
.holl{background:var(--oat);padding:clamp(64px,9vw,120px) 0}
.holl-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px);align-items:center}
/* Four numbered lines, the way .steps counts, but without the paragraphs. */
.holl-steps{list-style:none;margin:0 0 30px;padding:0;display:flex;flex-direction:column;gap:12px;counter-reset:holl}
.holl-steps li{display:flex;align-items:center;gap:14px;font-size:clamp(1rem,1.4vw,1.12rem);font-weight:500}
.holl-num{counter-increment:holl;flex:none;width:36px;height:36px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:500;font-variation-settings:var(--serif-axes);font-size:1.1rem}
.holl-num::before{content:counter(holl)}
.holl-photo .nd-photo,.why-photo .nd-photo{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius-lg)}
/* Kassamyndin er nánast ferköntuð en ramminn er 4:5, svo eitthvað verður
   að fara. Fókusinn er færður til hægri svo merkið á kassanum haldist
   heilt með hundinum á lógóinu, í stað þess að klippast af hægri brún. */
.holl-photo .nd-photo{object-position:62% 50%}
/* The photo is a companion to the three steps, not the subject of the
   section: capped, and set against the right edge of its column. */
.holl-photo{width:100%;max-width:420px;justify-self:end}
.holl-photo .photo-slot,.why-photo .photo-slot{min-height:clamp(300px,36vw,460px)}
/* ---------- nutrition bubbles (ND_Recipes::bubbles_html) ----------
   Mirrored in base.css: the front page loads app.css and every other page
   loads base.css, so shared components have to exist in both. */
/* Six analytical values sit as an even 3x2 inside a recipe card. */
.nutri{display:flex;gap:5px;flex-wrap:wrap;margin:0 0 12px}
.nutri-item{flex:1 1 calc(33.333% - 4px);background:var(--offwhite);border-radius:11px;padding:7px 4px;text-align:center;min-width:0}
.nutri-item b{display:block;font-family:var(--serif);font-weight:500;font-variation-settings:var(--serif-axes);font-size:1.05rem;line-height:1.1}
.nutri-item span{display:block;font-size:.55rem;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-soft);line-height:1.2}
.ingredients{margin:0;font-size:.86rem;line-height:1.55;color:var(--ink-soft)}
.ingredients-rest{margin:6px 0 0;font-size:.76rem;color:var(--ink-soft);opacity:.85}

.photo-slot{border:2px dashed rgba(26,31,30,.28);background:repeating-linear-gradient(-45deg,var(--offwhite),var(--offwhite) 14px,#F5F1E8 14px,#F5F1E8 28px);border-radius:var(--radius);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;color:var(--ink-soft);padding:24px;min-height:340px}
.photo-slot svg{opacity:.5}
.photo-slot b{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.photo-slot span{font-size:.82rem;max-width:26em}
.photo-slot i{font-style:normal;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;background:#fff;border-radius:999px;padding:4px 12px;margin-top:4px}

/* ---------- how it works ---------- */
/* offwhite between the oat "why" above and the oat FAQ below, so three
   blocks do not read as one. The cards inside had to stop being offwhite
   for that: they are white now. */
.how{padding:clamp(64px,9vw,120px) 0;background:var(--offwhite)}
.how-grid{display:grid;grid-template-columns:1fr .9fr;gap:clamp(36px,5vw,72px);align-items:center}
.steps{display:flex;flex-direction:column;gap:8px;counter-reset:step}
.step{
  display:flex;gap:22px;padding:26px 0;border-bottom:1px solid rgba(26,31,30,.1);
}
.step:last-child{border-bottom:none}
.step-num{
  counter-increment:step;flex:none;
  width:46px;height:46px;border-radius:50%;background:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-weight:500;font-variation-settings:var(--serif-axes);font-size:1.3rem;
}
.step-num::before{content:counter(step)}
.step h3{font-size:1.12rem;font-weight:600;margin-bottom:6px}
.step p{font-size:.92rem;color:var(--ink-soft);max-width:30em}

.plan-card{
  background:#fff;border-radius:var(--radius-lg);padding:34px;
  box-shadow:var(--shadow);position:relative;
}
.plan-head{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.plan-avatar{
  width:58px;height:58px;border-radius:50%;background:var(--icy);
  display:flex;align-items:center;justify-content:center;flex:none;
  font-family:var(--serif);font-weight:500;font-variation-settings:var(--serif-axes);font-size:1.5rem;
}
.plan-head h3{font-size:1.15rem;font-weight:600;line-height:1.2}
.plan-head span{font-size:.82rem;color:var(--ink-soft)}
.plan-rows{display:flex;flex-direction:column;gap:0}
.plan-row{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:13px 0;border-bottom:1px solid rgba(26,31,30,.08);font-size:.92rem;
}
.plan-row:last-child{border-bottom:none}
.plan-row b{font-weight:600}
.plan-row .hl{font-family:var(--serif);font-weight:500;font-variation-settings:var(--serif-axes);font-size:1.7rem}
/* "≈ X dl" beside the grams, only rendered once the formula supplies it. */
.plan-approx{display:block;font-family:var(--body);font-weight:500;font-size:.82rem;color:var(--ink-soft);text-align:right;line-height:1.3}
.plan-tag{
  position:absolute;top:-15px;left:34px;background:var(--oat);
  border-radius:999px;padding:7px 15px;font-size:.72rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;
}

/* ---------- faq ---------- */
.faq{padding:clamp(64px,9vw,110px) 0;background:var(--oat)}
.faq-list{max-width:760px}
.faq-item{border-bottom:1px solid rgba(26,31,30,.1)}
.faq-item summary{
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:24px 4px;font-weight:600;font-size:1.05rem;cursor:pointer;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary svg{flex:none;transition:transform .3s var(--ease)}
.faq-item[open] summary svg{transform:rotate(45deg)}
.faq-item .faq-a{padding:0 4px 26px;color:var(--ink-soft);font-size:.95rem;max-width:56em}

/* ---------- final cta: the yellow action block ---------- */
/* The one section yellow takes over, because it is the one that asks. The
   button is dark: yellow on yellow would disappear. Text left, the three
   packs right; on a phone the packs go first. */
.final{
  background:var(--yellow);
  margin-bottom:clamp(48px,6vw,80px);
  padding:clamp(56px,7vw,96px) 24px;overflow:hidden;
}
.final-inner{max-width:var(--max);margin:0 auto;padding:0 24px;display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,4vw,56px);align-items:center}
.final:not(.has-art) .final-inner{grid-template-columns:1fr;text-align:center}
.final h2.display{font-size:clamp(2rem,3.9vw,3.5rem);color:var(--ink);margin:0 0 14px}
.final-start{margin:0 0 30px;font-size:1.05rem;font-weight:500;color:var(--ink)}
.btn-dark{background:#2E4A4F;color:#FAF9F6;box-shadow:0 4px 14px rgba(46,74,79,.18)}
.btn-dark:hover{background:#3A5A60;transform:translateY(-2px);box-shadow:0 4px 14px rgba(46,74,79,.18)}
.btn-dark svg{transition:transform .25s var(--ease)}
.btn-dark:hover svg{transform:translateX(4px)}
.final-art{position:relative;display:flex;justify-content:center;align-items:flex-end;min-height:clamp(220px,26vw,360px)}
.final-pack{width:38%;height:auto;filter:drop-shadow(0 22px 26px rgba(26,31,30,.22))}
.final-pack.p0{transform:rotate(-7deg) translateX(14%);z-index:1}
.final-pack.p1{transform:translateY(-6%);z-index:2;width:42%}
.final-pack.p2{transform:rotate(7deg) translateX(-14%);z-index:1}
@media (max-width:860px){
  .final-inner{grid-template-columns:1fr}
  .final-art{order:-1;min-height:0}
  .final h2.display{font-size:2rem}
  .final{padding:40px 0 44px}
  .final .btn-dark{width:100%;justify-content:center}
}

/* ---------- footer ---------- */
footer{background:var(--offwhite);padding:0 0 44px}
.foot-grid{
  display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:40px;
  padding-top:8px;
}
.foot-logo img{height:64px;width:auto;margin-bottom:18px}
.foot-grid p{font-size:.88rem;color:var(--ink-soft);max-width:26em}
.foot-col h4{font-size:.78rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:16px}
.foot-col ul{display:flex;flex-direction:column;gap:10px;font-size:.92rem;font-weight:500}
.foot-col a{opacity:.8;transition:opacity .2s}
.foot-col a:hover{opacity:1}
.foot-bottom{
  margin-top:44px;padding-top:22px;border-top:1px solid rgba(26,31,30,.08);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:.8rem;color:var(--ink-soft);
}

/* ---------- reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}
body.no-motion .reveal{opacity:1;transform:none;transition:none}

/* ---------- responsive ---------- */
@media (max-width:1020px){
  .promise-grid{grid-template-columns:repeat(2,1fr)}
  .recipe-grid{grid-template-columns:1fr;max-width:480px;margin:0 auto}
  .why-grid{grid-template-columns:1fr}
  .why-band{grid-template-columns:1fr}
  .why-photo{order:2}
  .how-grid{grid-template-columns:1fr;gap:52px}
  .plan-card{max-width:460px;margin:0 auto}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  /* The same distance above the eyebrow as the hero card has above its own. */
  .holl{padding-top:26px}
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;background:var(--offwhite);
    flex-direction:column;gap:0;padding:10px 24px 20px;border-bottom:1px solid rgba(26,31,30,.08);
    box-shadow:0 20px 30px -20px rgba(26,31,30,.15)}
  .nav-links a{padding:12px 0}
  header.open .nav-links{display:flex}
  header.open .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  header.open .nav-burger span:nth-child(2){opacity:0}
  header.open .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .nav-burger{display:flex}
  /* Room for the logo: the login is its icon alone, the gaps close up. */
  .nav{padding:12px 16px;gap:14px}
  .nav-right{gap:10px}
  .nav-login span{display:none}
  .nav-login svg{width:22px;height:22px}
  .nav-login{padding:4px}
  .nav .btn-primary{display:none}
  /* On a phone the four promises are keywords in a strip, not four cards a
     screen tall each: the same short form the hero uses. The sentences are
     for a wider screen. */
  .promises{padding:18px 0 22px}
  .promise-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
  .promise{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px}
  .promise:hover{transform:none;box-shadow:none}
  .promise .p-icon{width:34px;height:34px;border-radius:10px;margin:0;flex:none}
  .promise .p-icon svg{width:18px;height:18px}
  .promise h3{font-size:.82rem;line-height:1.3;margin:0}
  .promise p{display:none}
  .foot-grid{grid-template-columns:1fr}
  }
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}

/* ---------- product band ---------- */
/* One photograph and one line, where the ingredient table used to be. The
   picture is the argument here; the figures live on Réttirnir, beside the
   recipe they belong to. */
.product{padding:clamp(64px,9vw,120px) 0;background:var(--oat)}
/* Same setup as hollustan: words on the left, photograph on the right. */
.product-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(32px,5vw,64px);align-items:center}
.product-grid .display{margin:16px 0 22px}
.product-grid .display>span{display:block;text-wrap:balance}
.product-points{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.product-points li{display:flex;align-items:center;gap:14px;font-size:clamp(1rem,1.4vw,1.12rem);font-weight:500}
.product-check{flex:none;width:36px;height:36px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;color:var(--ink)}
.product-check svg{width:18px;height:18px}
/* The photograph keeps its own shape. It is a flat lay: the ingredients around
   the bowl are the whole point, and a fixed height would crop them off the top
   and bottom edges. The empty slot borrows a 3:2 frame so the gap looks like
   the picture that is coming. */
/* Capped rather than filling the column. At the full 1180px this read as a
   banner, and a banner-sized food shot is the thing that makes a page look
   generated. At this size it reads as a photograph somebody placed. */
.product-photo{border-radius:var(--radius-lg);overflow:hidden}
/* Edge to edge on a phone, pulled back out over the wrap's 24px padding, and
   square-cornered: a rounded photograph touching both edges looks like a bug. */
/* On a phone the band is a title and a picture: the three points are the
   picture's caption on a wide screen and a list of the obvious on a small one. */
@media (max-width:860px){
  .product-grid{grid-template-columns:1fr;gap:22px}
  .product-grid .display{margin-bottom:0}
  .product-photo{border-radius:var(--radius-lg)}
}
.product-photo .nd-photo{width:100%;height:auto}
.product-photo .photo-slot{width:100%;aspect-ratio:3/2;min-height:0;border-radius:var(--radius-lg)}

/* ---------- recipe photograph, when one has been uploaded ---------- */
/* Falls back to the drawn pack when there is no image, so a card is never
   empty while the photography is still being shot. */
.pack-window .pack-photo{width:86%;height:auto;max-height:100%;object-fit:contain;border-radius:14px}

/* ---------- card brands in the footer ---------- */
.foot-pay{display:flex;align-items:center;gap:8px;margin-top:10px}
.pay-mark{display:inline-flex;align-items:center;justify-content:center;width:48px;height:32px;background:#fff;border-radius:5px;box-shadow:0 1px 3px rgba(26,31,30,.18)}
/* Scoped under .nd-pay-marks so these beat WooCommerce's own
   ".woocommerce img{height:auto;max-width:100%}", which is more specific than
   a bare class and was stretching the Mastercard mark to fill its box. */
.nd-pay-marks img{display:block}
.nd-pay-marks .pay-visa{width:32px;height:auto}
.nd-pay-marks .pay-mc{height:20px;width:auto}

.nd-pay-marks{display:inline-flex;align-items:center;gap:8px;vertical-align:middle}
.nd-checkout-paywrap{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:14px 0 0;font-size:.84rem;color:var(--ink-soft)}

/* ---------- ingredient dialog ---------- */
.nd-ing-open{display:inline-flex;align-items:center;gap:7px;border:0;background:none;padding:8px 0;font:inherit;font-size:.86rem;font-weight:600;color:var(--ink);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.nd-ing-open:hover{opacity:.7}
.nd-ing-open svg{transition:transform .2s var(--ease)}
.nd-ing-open:hover svg{transform:translateX(3px)}
/* display:flex on a class beats the browser's own [hidden]{display:none}, so
   without this every dialog on the page renders open at once and the close
   button appears to do nothing. Same trap as the cookie banner. */
.nd-ing[hidden]{display:none!important}
.nd-ing{position:fixed;inset:0;z-index:9998;background:rgba(26,31,30,.55);display:flex;align-items:center;justify-content:center;padding:20px;overflow-y:auto}
.nd-ing-box{position:relative;background:var(--offwhite);border-radius:var(--radius-lg);max-width:520px;width:100%;padding:0 0 28px;box-shadow:0 40px 80px -30px rgba(26,31,30,.6);outline:none;max-height:calc(100vh - 40px);overflow-y:auto}
.nd-ing-art{border-radius:var(--radius-lg) var(--radius-lg) 0 0;overflow:hidden;background:var(--oat)}
.nd-ing-art img{width:100%;height:auto;display:block}
.nd-ing-box h3{font-family:var(--serif);font-weight:500;font-variation-settings:var(--serif-axes);font-size:1.7rem;line-height:1.05;margin:24px 28px 0}
.nd-ing-box h4{margin:18px 28px 6px;font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.nd-ing-box .ingredients{margin:0 28px;font-size:.94rem;line-height:1.65}
.nd-ing-x{position:absolute;top:14px;right:14px;width:38px;height:38px;border:0;border-radius:50%;background:rgba(250,249,246,.92);color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 10px rgba(26,31,30,.18)}
.nd-ing-x:hover{background:#fff}
.nd-ing-x:focus-visible,.nd-ing-open:focus-visible{outline:3px solid #74c7d3;outline-offset:2px}
.recipe-more{margin-top:clamp(26px,3vw,40px);display:flex;justify-content:center}
@media (max-width:520px){.nd-ing-box h3{font-size:1.5rem;margin:20px 20px 0}.nd-ing-box h4,.nd-ing-box .ingredients{margin-left:20px;margin-right:20px}}

/* The dialog is a nutrition declaration: values, ingredients, additives. The
   value grid is fixed at three columns so six figures read as two tidy rows
   inside a narrow box, whichever page opened it. */
.nd-ing-nutri{margin:0 28px 4px}
.nd-ing-nutri .nutri{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0}
.nd-ing-nutri .nutri-item{background:#fff;border-radius:12px;padding:9px 6px;text-align:center;min-width:0;box-shadow:none;border:1px solid rgba(26,31,30,.08);flex:none}
.nd-ing-nutri .nutri-item b{display:block;font-family:var(--serif);font-weight:500;font-variation-settings:var(--serif-axes);font-size:1.05rem;line-height:1.1}
.nd-ing-nutri .nutri-item span{display:block;font-size:.56rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft);line-height:1.25}
.nd-ing-add{font-size:.82rem;color:var(--ink-soft)}
/* The short list under a picture: what is in the food, no percentages. */
.nd-short{margin:0 0 12px;font-size:.9rem;line-height:1.6;color:var(--ink-soft)}
@media (max-width:520px){.nd-ing-nutri{margin-left:20px;margin-right:20px}}
/* A list inside an answer: the delivery cadence is three facts, not a sentence. */
.faq-ul{margin:0 0 10px;padding-left:20px;list-style:disc}
.faq-ul li{margin:2px 0;list-style:disc}

/* Social icons in the footer. Sized to the card marks beside them so the two
   rows read as one block, and drawn in the footer's own ink rather than each
   network's brand colour: three brand colours in a footer corner is three
   logos competing with ours. */
.foot-social{display:flex;align-items:center;gap:14px;margin-top:12px}
.foot-social-link{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;color:inherit;opacity:.75;transition:opacity .2s var(--ease),transform .2s var(--ease)}
.foot-social-link svg{width:100%;height:100%;display:block}
.foot-social-link:hover{opacity:1;transform:translateY(-2px)}
.foot-social-link:focus-visible{outline:3px solid #74c7d3;outline-offset:3px;border-radius:4px;opacity:1}
@media (prefers-reduced-motion:reduce){.foot-social-link{transition:none}.foot-social-link:hover{transform:none}}

/* ---------- hollustan overlaps the hero ---------- */
/* The oat band is pulled up over the bottom of the photograph so its rounded
   corners sit on the picture. The hero keeps its full height underneath, so
   there is photo, not page, behind the curve. */
.holl{position:relative;z-index:2;margin-top:calc(-1 * var(--section-overlap))}
@media (max-width:720px){:root{--section-overlap:40px}}

/* ---------- hráefnin: a typical meal ---------- */
.product .display{margin:0 0 28px}
.meal-label{font-size:.78rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 10px}
/* Two parts, nothing else: terracotta for the meat or fish, sage for the
   rest. No black, no grey, no icy (icy means beef). */
.meal-bar{display:flex;gap:3px;height:22px;border-radius:999px;overflow:hidden}
.meal-seg{display:block;min-width:0}
.meal-seg.m0{background:#C97B5A}
.meal-seg.m1{background:#B9C9A0}
.meal-key{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.meal-key li{display:flex;align-items:flex-start;gap:10px}
.meal-key i{flex:none;width:14px;height:14px;border-radius:4px;margin-top:5px}
.meal-key-name{display:block;font-size:.98rem;font-weight:500}
.meal-key-name b{font-weight:600}
.meal-key-names{display:block;font-size:.88rem;color:var(--ink-soft);margin-top:2px}
.meal-note{font-size:.82rem;color:var(--ink-soft);margin:12px 0 0}
.meal{margin:0 0 26px}
.not-in{list-style:none;margin:0 0 30px;padding:0;display:flex;flex-direction:column;gap:10px}
.not-in li{display:flex;align-items:center;gap:12px;font-size:clamp(1rem,1.3vw,1.08rem);font-weight:500}
.not-x{flex:none;width:30px;height:30px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;color:var(--ink)}
.not-x svg{width:15px;height:15px}

/* ---------- samanburður, light (front page) ---------- */
/* Card styles for the plain variant live in compare.css (Réttirnir uses it
   too). On the front page it sits on the off-white page. */
.compare.is-plain{background:var(--offwhite)}

/* ---------- the starter, two lines ---------- */
.why-start{padding:16px 22px}
.why-start h3{margin:0 0 4px}

/* ---------- Kolka's plan, a little larger ---------- */
.how .plan-card{padding:clamp(34px,3.6vw,44px)}
.plan-head h3{font-size:1.3rem}
.plan-head .plan-avatar{font-size:1.5rem;color:var(--ink)}
.how .plan-row{font-size:.98rem;padding:15px 0}

/* ---------- section widths and corners: one rule set ---------- */
/* Every coloured block (oat, icy, yellow) is the same width: the same
   inset on both sides, at every breakpoint. Corners are deliberate: the
   first block after the hero is rounded on top (it overlaps the photo),
   every block after it is square so they read as one band, and the final
   CTA is rounded all round and pulled up over the FAQ, the same way the
   first block sits over the hero. */
.holl,.product,.why,.faq,.final{margin-left:var(--section-inset);margin-right:var(--section-inset)}
.holl{border-radius:var(--section-radius) var(--section-radius) 0 0}
.final{border-radius:var(--section-radius);position:relative;z-index:2;margin-top:calc(-1 * var(--section-overlap))}
/* The FAQ gives back the room the CTA covers. */
.faq{padding-bottom:calc(clamp(64px,9vw,110px) + var(--section-overlap))}
/* Text inside the inset bands lines up with text on the open page: the band
   moves in, its content padding gives the same amount back. */
.holl .wrap,.product .wrap,.why .wrap,.faq .wrap{padding-left:calc(24px - var(--section-inset));padding-right:calc(24px - var(--section-inset))}

/* ---------- phone: front page only ---------- */
@media (max-width:760px){
  /* The recipes scroll sideways, one card and the edge of the next, instead
     of three cards stacked a screen tall each. The row runs out to both
     edges of the screen and snaps card by card. */
  .recipes .recipe-grid{
    display:flex;max-width:none;gap:14px;
    margin:0 -24px;padding:6px 24px 22px;
    overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:24px;
    overscroll-behavior-x:contain;scrollbar-width:none;
  }
  .recipes .recipe-grid::-webkit-scrollbar{display:none}
  .recipes .recipe{flex:0 0 78%;scroll-snap-align:start}
  .recipes .recipe:hover{transform:none}
}
@media (max-width:720px){
  /* Room between the hero's last line and the oat band laid over it: the
     band covers --section-overlap of the hero, so the hero gives that back. */
  .hero-inner{padding-bottom:calc(44px + var(--section-overlap))}
  /* One column only on a phone; a tablet keeps words and photo side by
     side, where the photo stacked full width came out a screen tall. */
  .holl-grid{grid-template-columns:1fr}
  /* The photograph leads the section on a phone, the words follow. */
  .holl-photo{order:-1;max-width:none;justify-self:stretch}
}

/* ---------- Kolka's plan: a little life under the mouse ---------- */
/* The logo dog in the circle, as on the original card. */
.plan-avatar img{width:34px;height:auto;display:block;transform-origin:50% 90%;transition:transform .45s var(--ease)}
.how .plan-card{transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
/* Computers only: a phone has no hover, and a tap should not leave the card
   stuck half-lifted. The card lifts a little and the dog turns his head,
   six degrees, no more. */
@media (hover:hover) and (pointer:fine) and (min-width:761px){
  .how .plan-card:hover{transform:translateY(-6px) scale(1.015);box-shadow:0 28px 56px -22px rgba(26,31,30,.24)}
  .how .plan-card:hover .plan-avatar img{transform:rotate(-6deg)}
}
@media (prefers-reduced-motion:reduce){
  .how .plan-card,.plan-avatar img{transition:none}
  .how .plan-card:hover{transform:none}
  .how .plan-card:hover .plan-avatar img{transform:none}
}

/* ---------- hráefnin on a phone: the photo between the bar and the list ---
   The copy column dissolves into the section's own grid (display:contents),
   so the photograph can sit after "Auk viðbættra vítamína." and before the
   ✕ list instead of trailing under the button. */
@media (max-width:720px){
  .product-grid{gap:0}
  .product-copy{display:contents}
  .product-copy > .display{order:1}
  .product-copy > .meal{order:2;margin-bottom:22px}
  .product-grid > .product-photo{order:3;margin-bottom:26px}
  .product-copy > .not-in{order:4}
  .product-copy > .btn{order:5;justify-self:start}
}