@font-face {
  font-family: Archivo;
  src: url('../fonts/archivo-latin.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: Archivo;
  src: url('../fonts/archivo-latin-ext.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0300-0303,U+0305-0307,U+0309-0328,U+032A-036F,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
:root {
  color-scheme: light;
  --paper: oklch(0.979 0.005 95);
  --ink: #0E0E0E;
  --red: #D10101;
  --green: #1A6309;
  --muted: oklch(0.43 0.012 110);
  --line: oklch(0.80 0.009 100);
  --mint: oklch(0.93 0.033 125);
  --gutter: clamp(20px, 3.35vw, 64px);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}
*, *::before, *::after { box-sizing: border-box; }
/* iOS studsar förbi dokumentets början och slut, och utan detta lyser en vit
   yta fram under den röda sidfoten. Två spärrar, för säkerhets skull:
   html-färgen målar canvasen, och body:s skugga målar en röd yta 100vh utanför
   varje kant. En yttre box-shadow klipps bort innanför elementets egen ram, så
   den kan aldrig täcka något av sidan, och den lägger inte till en enda pixel
   att rulla - scrollHeight är densamma med och utan den. Skuggan hör till
   sidans innehåll och följer därför med när studsen drar undan sidan. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 24px;
  background-color: var(--red);
}
body { margin: 0; background: var(--paper); box-shadow: 0 0 0 100vh var(--red); color: var(--ink); font-family: Archivo, Arial, sans-serif; font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, figure, dl, dd { margin: 0; }
h1, h2, h3 { font-weight: 750; line-height: 1.04; letter-spacing: -0.045em; }
a { color: inherit; text-underline-offset: 0.2em; }
img { display: block; width: 100%; height: auto; }
button, a { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 3px solid currentColor; outline-offset: 5px; }
::selection { background: var(--green); color: var(--paper); }
.skip-link { position: fixed; z-index: 20; top: 12px; left: 12px; padding: 12px 20px; background: var(--paper); color: var(--ink); transform: translateY(-200%); }
.skip-link:focus { transform: none; }
.visit-strip, .section, .inside, .footer { max-width: 1680px; margin-inline: auto; }
.header, .hero { --sido: max(var(--gutter), calc((100% - 1680px) / 2 + var(--gutter))); }
/* Sidhuvudet ligger ovanpå hjältefotot, inte ovanför det. Ljus text med skugga,
   så att namnet syns mot både himmel och plåtvägg. */
.header { position: absolute; inset: 0 0 auto; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 17px var(--sido); color: var(--paper); text-shadow: 0 1px 3px oklch(0.105 0.006 62 / 0.7), 0 1px 18px oklch(0.105 0.006 62 / 0.55); }
.brand { display: flex; align-items: center; gap: 9px; min-height: 44px; text-decoration: none; }
.brand img { width: 47px; height: auto; }
.brand__type { font-size: 25px; font-weight: 850; font-stretch: 110%; line-height: 0.95; letter-spacing: -0.05em; }
.brand__type > span { display: block; margin-top: 5px; font-size: 8px; font-stretch: 100%; letter-spacing: 0.16em; }
.nav { display: flex; align-items: center; gap: 32px; font-size: 15px; font-weight: 600; }
.nav a { display: none; align-items: center; min-height: 44px; text-decoration: none; }
.nav .nav__visit { display: flex; gap: 22px; border-bottom: 1px solid oklch(0.979 0.005 95 / 0.6); }
.nav__visit span { font-size: 22px; }
.eyebrow { font-size: 11px; line-height: 1.4; text-transform: uppercase; font-weight: 650; letter-spacing: 0.095em; }
/* Fasaden i helbild med texten ovanpå. Fotot är en vanlig <img> utan filter,
   utan genomskinlighet och utan något lager över själva bilden. Läsbarheten
   kommer från textskuggan och en mörkning som stannar i nedre halvan, där
   asfalten och den släta plåtväggen ligger. Himlen, taket och de röda
   skyltbokstäverna lämnas orörda. */
.hero { position: relative; isolation: isolate; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding: 104px var(--sido) 26px; }
.hero__photo { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--ink); }
.hero__photo img { position: absolute; inset: 0; height: 100%; object-fit: cover; object-position: 47% center; }
.hero__photo::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, oklch(0.105 0.006 62 / 0.64) 0%, oklch(0.105 0.006 62 / 0.38) 10%, oklch(0.105 0.006 62 / 0.14) 18%, transparent 28%),
    linear-gradient(to top, oklch(0.105 0.006 62 / 0.76) 0%, oklch(0.105 0.006 62 / 0.64) 14%, oklch(0.105 0.006 62 / 0.5) 30%, oklch(0.105 0.006 62 / 0.34) 44%, oklch(0.105 0.006 62 / 0.14) 56%, transparent 68%);
}
.hero__copy { color: var(--paper); }
.hero .eyebrow { display: inline-block; padding: 7px 11px 6px; background: var(--red); color: var(--paper); }
.hero h1 { margin-top: 18px; color: var(--paper); font-size: clamp(76px, 20.8vw, 118px); font-stretch: 72%; font-weight: 850; line-height: 0.82; letter-spacing: -0.045em; text-shadow: 0 0.012em 0.045em oklch(0.105 0.006 62 / 0.82), 0 0.02em 0.2em oklch(0.105 0.006 62 / 0.5); }
.hero h1 > span { display: block; }
.hero h1 .hero__lead { margin-bottom: 13px; font-size: 21px; font-weight: 550; font-stretch: 100%; letter-spacing: -0.035em; line-height: 1.2; }
.hero__welcome { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 27px; padding-top: 19px; border-top: 1px solid oklch(0.979 0.005 95 / 0.34); }
.hero__welcome p { max-width: 42ch; font-size: 14px; line-height: 1.5; text-shadow: 0 1px 3px oklch(0.105 0.006 62 / 0.75), 0 1px 16px oklch(0.105 0.006 62 / 0.6); }
.round-link { display: grid; place-items: center; flex: 0 0 46px; height: 46px; border: 1px solid oklch(0.979 0.005 95 / 0.66); border-radius: 50%; color: var(--paper); text-decoration: none; font-size: 25px; }
.visit-strip { display: grid; grid-template-columns: 1fr 1fr; background: var(--red); color: var(--paper); }
.visit-strip > a { min-height: 65px; padding: 12px 20px; display: flex; align-items: center; justify-content: space-between; gap: 14px; text-decoration: none; font-size: 15px; font-weight: 600; }
.visit-strip > .visit-strip__hours { grid-column: 1 / -1; justify-content: flex-start; min-height: 58px; border-bottom: 1px solid oklch(0.979 0.005 95 / 0.4); }
.visit-strip__hours > span:last-child { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 12px; }
.visit-strip strong { font-size: 14px; font-weight: 600; }
.visit-strip [data-hours-detail] { font-size: 11px; font-weight: 400; }
.visit-strip > a:last-child { border-left: 1px solid oklch(0.979 0.005 95 / 0.4); }
.status-dot { width: 8px; height: 8px; border: 1px solid currentColor; border-radius: 50%; flex: 0 0 8px; }
[data-open='true'] .status-dot { background: currentColor; }
.visit-strip__address, .visit-strip__number { display: none; }
.arrow { font-size: 24px; font-weight: 400; }

/* Pilar ritas som SVG. iOS ger U+2197 en emoji-presentation som blå ruta,
   och ett variantval räcker inte på alla enheter. */
.pil { display: block; width: 1em; height: 1em; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.section { padding: 68px var(--gutter); }
.section-intro { display: grid; gap: 23px; }
.section-intro .eyebrow { color: var(--red); }
h2 { font-size: clamp(37px, 6vw, 76px); font-stretch: 90%; }
.section-intro__text { max-width: 43ch; color: var(--muted); }
.photo-pair { display: grid; gap: 42px; margin-top: 34px; }
.department__copy { margin-top: 18px; }
h3 { font-size: 28px; font-stretch: 90%; }
.department__copy p { max-width: 39ch; margin-top: 10px; font-size: 15px; color: var(--muted); }
.shelves { margin-top: 48px; border-top: 1px solid var(--ink); }
.shelf { display: grid; gap: 13px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.shelf h3 { font-size: 29px; }
.shelf p { max-width: 36ch; color: var(--muted); font-size: 15px; }
.desktop-break, .shelf__aside { display: none; }
.stock-note { margin-top: 17px; max-width: 65ch; font-size: 12px; color: var(--muted); }
.inside { padding-top: 10px; }
.inside__heading { padding: 0 var(--gutter) 28px; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; }
.inside__heading h2 { color: var(--red); }
.inside__heading p { color: var(--muted); font-size: 14px; }
/* De två liknande interiörbilderna byts av med ett svep, inte en toning.
   En toning skulle göra fotot genomskinligt en stund och därmed ändra dess
   färg; ett svep visar alltid en av bilderna i sin helhet. */
.vaxlare { position: relative; overflow: hidden; }
.vaxlare__topp { position: absolute; inset: 0; height: 100%; object-fit: cover; clip-path: inset(0 0 0 100%); }
.vaxlare__topp.is-pa { clip-path: inset(0 0 0 0); }
.campaign { display: grid; gap: 25px; margin-top: 60px; padding-top: 40px; padding-bottom: 40px; background: var(--mint); color: var(--green); }
.campaign .eyebrow { margin-bottom: 22px; }
.campaign h2 { font-size: clamp(42px, 5.4vw, 72px); }
.campaign__copy > p:first-child { max-width: 41ch; }
.button { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 15px 20px; font-size: 14px; font-weight: 600; text-decoration: none; }
.button > span { font-size: 23px; line-height: 1; }
.button--green { background: var(--green); color: var(--paper); margin-top: 24px; }
.button--red { background: var(--red); color: var(--paper); }
.campaign__terms { margin-top: 14px; max-width: 50ch; font-size: 12px; }
.find { display: grid; gap: 28px; padding-top: 66px; }
.find__heading .eyebrow { margin-bottom: 22px; color: var(--red); }
.find__heading h2 { color: var(--red); font-stretch: 65%; font-size: clamp(42px, 11.7vw, 180px); line-height: 0.92; font-weight: 850; }
.find__heading > p:last-child { margin-top: 10px; font-size: 20px; letter-spacing: -0.025em; }
.find__details { align-self: start; }
.hours { scroll-margin-top: 24px; }
.hours h3 { margin-bottom: 17px; font-size: 26px; }
.hours dl { font-size: 16px; }
.hours dl > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 14px; padding-block: 12px; border-top: 1px solid var(--line); }
.hours dd { font-weight: 650; font-variant-numeric: tabular-nums; }
.hours__note { margin: 8px 0 24px; color: var(--muted); font-size: 12px; }
.contact-link { display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 20px 0 4px; text-decoration: none; }
.contact-link > span:first-child { font-size: 12px; color: var(--muted); }
.contact-link strong { grid-row: 2; font-size: 25px; font-weight: 550; letter-spacing: -0.03em; }
.contact-link > span:last-child { grid-column: 2; grid-row: 1 / 3; font-size: 26px; }
.footer { padding: 28px var(--gutter) 24px; background: var(--red); color: var(--paper); }
.footer__top { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 0 20px; font-size: 12px; }
.footer__top > p { flex-basis: 100%; font-weight: 650; margin-bottom: 10px; }
.footer__top a { display: inline-flex; align-items: center; min-height: 44px; gap: 12px; text-decoration: none; }
.footer__word { margin: 21px 0 15px -0.045em; font-size: clamp(70px, 22.5vw, 375px); font-stretch: 82%; font-weight: 850; letter-spacing: -0.06em; line-height: 0.8; }
.footer__bottom { border-top: 1px solid oklch(0.979 0.005 95 / 0.4); padding-top: 16px; font-size: 10px; }
@media (hover: hover) {
  .nav a:hover, .footer a:hover { text-decoration: underline; }
  .button:hover, .round-link:hover { background: var(--ink); color: var(--paper); }
  .visit-strip > a:hover { background: var(--ink); }
  .contact-link:hover strong { text-decoration: underline; text-underline-offset: 0.2em; }
}
@media (min-width: 760px) {
  .header { min-height: 106px; }
  .brand img { width: 63px; }
  .brand__type { font-size: 32px; }
  .brand__type > span { font-size: 10px; }
  .nav a { display: flex; }
  .hero { padding: clamp(104px, 16vh, 150px) var(--sido) 34px; }
  .hero h1 { margin-top: clamp(25px, 3.4vw, 55px); font-size: clamp(82px, 10.7vw, 180px); }
  .hero h1 .hero__lead { margin-bottom: 18px; font-size: clamp(23px, 2.1vw, 34px); }
  .hero__welcome { margin-top: clamp(38px, 5vw, 64px); padding-top: 24px; }
  .hero__welcome p { font-size: clamp(14px, 1.25vw, 18px); }
  .visit-strip { grid-template-columns: 1.15fr 1fr 0.95fr; padding-inline: var(--gutter); }
  .visit-strip > a { padding: 20px 26px; min-height: 96px; font-size: 18px; }
  .visit-strip > .visit-strip__hours { grid-column: auto; border-bottom: 0; padding-left: 0; }
  .visit-strip__hours > span:last-child { display: block; }
  .visit-strip strong { display: block; font-size: 17px; }
  .visit-strip [data-hours-detail] { font-size: 12px; }
  .visit-strip > a:nth-child(2) { border-left: 1px solid oklch(0.979 0.005 95 / 0.4); }
  .visit-strip > a:last-child { padding-right: 0; }
  .visit-strip__address, .visit-strip__number { display: block; font-size: 12px; font-weight: 400; margin-top: 3px; }
  .section { padding-block: 100px; }
  .section-intro { grid-template-columns: 1fr 1fr; column-gap: 60px; align-items: end; }
  .section-intro .eyebrow { grid-column: 1 / -1; }
  .section-intro__text { margin-left: auto; font-size: 18px; }
  .photo-pair { grid-template-columns: 1.52fr 1fr; gap: 5%; margin-top: 50px; }
  .department--produce { padding-top: 105px; }
  h3 { font-size: clamp(28px, 2.7vw, 42px); }
  .department__copy p { font-size: 16px; }
  .shelves { margin-top: 74px; }
  .shelf { grid-template-columns: 1.1fr 1fr; gap: 32px; align-items: center; padding-block: 30px; }
  .shelf h3 { font-size: clamp(30px, 3.2vw, 48px); }
  .shelf p { font-size: 17px; }
  .inside__heading { padding-bottom: 36px; }
  .inside__heading p { font-size: 17px; }
  .campaign { grid-template-columns: 1.1fr 1fr; gap: 60px; align-items: center; margin-top: 90px; padding-block: 66px; }
  .campaign__copy { max-width: 480px; }
  .campaign__copy > p:first-child { font-size: 18px; }
  .find { grid-template-columns: 1.52fr 1fr; gap: 48px 5%; }
  .find__heading { grid-column: 1 / -1; }
  .find__heading > p:last-child { margin-top: 20px; font-size: 27px; }
  .find__details { padding-top: 4px; }
  .footer { padding-top: 35px; }
  .footer__top { font-size: 14px; }
  .footer__top > p { flex-basis: auto; margin: 0; margin-right: auto; }
  .footer__top a:last-child { margin-left: 42px; }
  .footer__word { margin-block: 46px 34px; }
  .footer__bottom { font-size: 12px; }
}
@media (min-width: 1100px) {
  .round-link { flex-basis: 58px; height: 58px; }
  .shelf { grid-template-columns: 1.2fr 1fr 0.65fr; }
  .shelf__aside { display: block; text-align: right; color: var(--green); font-size: 12px; }
  .desktop-break { display: initial; }
  .find__details { padding: 12px 0 0 30px; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero h1 > span { animation: sign-in 700ms var(--ease) both; }
  .hero h1 > span:nth-child(2) { animation-delay: 70ms; }
  .hero h1 > span:nth-child(3) { animation-delay: 140ms; }
  .vaxlare__topp { transition: clip-path 1150ms var(--ease); }
  .round-link span, .button > span, .nav__visit span { transition: transform 250ms var(--ease); }
  .round-link:hover span { transform: translateY(3px); }
  .button:hover > span, .nav__visit:hover span { transform: translate(2px, -2px); }
  @keyframes sign-in { from { transform: translateY(16px); } to { transform: translateY(0); } }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}