/*
Fil: catalog.css
v0.1 - 2026-10-22 - Første LOCAL-katalogforside med seks informationskort.
v0.2 - 2026-10-22 - Forenklet design: stor introduktion, seks kvadratiske billedfelter, korte kategorititler og kompakt kontakt. Kun LOCAL.
v0.3 - 2026-10-22 - Mindre top-/bundluft, mindre introtypografi, lys GRØNNE TING, knapagtig dybde på kvadrater og kortere footer. Kun LOCAL.
v0.5 - 2026-10-23 - Mere læsbar typografi, kompakte kategorier og sikker plads til hero-grafik.
v0.4 - 2026-10-22 - Mørkegrønt med holdning. og let dekorativ montage af faktisk Økobrella-foto, plakat-symbol og mulepose-stregtegning. Kun LOCAL.
*/
.catalog-home { --max: 1280px; }
.catalog-home .site-header {
  position: relative;
  z-index: 1;
}
.catalog-home .site-nav {
  display: flex;
  align-items: center;
  gap: clamp(0.8rem, 2.8vw, 2rem);
  font-size: 0.96rem;
  font-weight: 800;
}
.catalog-home .site-nav a {
  color: var(--dark-green);
  text-decoration: none;
  padding-block: 0.45rem;
  border-bottom: 2px solid transparent;
}
.catalog-home .site-nav a:hover {
  border-bottom-color: var(--jade);
}
.catalog-home a:focus-visible,
.catalog-home button:focus-visible {
  outline: 3px solid var(--jade);
  outline-offset: 4px;
}

/* Én klar introduktion uden ekstra salgstekst. */
.catalog-hero {
  background: var(--green);
}
.catalog-hero__inner {
  position: relative;
  isolation: isolate;
  padding-block: clamp(1.05rem, 2.6vw, 2.6rem);
}
.catalog-hero h1 {
  position: relative;
  z-index: 2;
  max-width: calc(100% - 275px);
  margin: 0;
  color: #073B29;
  font-size: clamp(2rem, 4.2vw, 4.2rem);
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -0.025em;
  overflow-wrap: break-word;
  text-wrap: balance;
}
.catalog-hero h1 .hero-emphasis {
  display: block;
  color: var(--white);
  white-space: nowrap;
}
.catalog-hero h1 .hero-tagline {
  display: block;
  margin-top: 0.03em;
  color: var(--dark-green);
  font-size: 0.78em;
  line-height: 1.06;
  letter-spacing: -0.025em;
}

/* En lille dekorativ collage. Kun Økobrella-delen er et fotografi.
   Plakat og pose er tydelige, stiliserede symboler, ikke produktfotos. */
.hero-potpourri {
  position: absolute;
  z-index: 1;
  right: clamp(0.2rem, 1.5vw, 1.1rem);
  bottom: clamp(0.15rem, 0.7vw, 0.8rem);
  width: clamp(166px, 19vw, 252px);
  height: clamp(138px, 16vw, 210px);
  pointer-events: none;
}
.hero-potpourri__poster {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  left: 3%;
  bottom: 5%;
  width: 48%;
  height: 85%;
  background: var(--cream);
  border: 3px solid var(--white);
  border-radius: 7px;
  transform: rotate(-16deg);
  box-shadow: 0 9px 22px rgba(14,65,46,0.17);
}
.hero-potpourri__poster-mark {
  color: var(--jade);
  font-weight: 800;
  font-size: clamp(2.7rem, 5vw, 4.7rem);
  line-height: 0.9;
}
.hero-potpourri__poster-line {
  width: 54%;
  height: 5%;
  margin-top: 12%;
  background: var(--lime);
  border-radius: 100px;
}
.hero-potpourri__bag {
  position: absolute;
  top: -8%;
  right: 0%;
  width: 59%;
  height: 83%;
  transform: rotate(15deg);
  filter: drop-shadow(0 7px 5px rgba(14,65,46,0.12));
}
.hero-potpourri__bag svg {
  display: block;
  width: 100%;
  height: 100%;
}
.hero-potpourri__umbrella {
  position: absolute;
  left: 39%;
  bottom: 1%;
  width: 45%;
  height: 70%;
  overflow: hidden;
  background: var(--sage);
  border: 4px solid var(--cream);
  border-radius: 10px;
  transform: rotate(9deg);
  box-shadow: 0 10px 26px rgba(14,65,46,0.22);
}
.hero-potpourri__umbrella picture {
  display: block;
  width: 100%;
  height: 100%;
}
.hero-potpourri__umbrella img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 50%;
}
.hero-potpourri__accent {
  position: absolute;
  right: 4%;
  bottom: 4%;
  width: 17%;
  aspect-ratio: 1;
  background: var(--lime);
  border: 3px solid var(--dark-green);
  border-radius: 50%;
  box-shadow: 0 4px 8px rgba(14,65,46,0.12);
}

/* Et rent gitter. Hver kategori er ét samlet kvadrat. */
.catalog-section {
  padding-block: clamp(1rem, 2.1vw, 1.85rem);
  background: var(--cream);
}
.catalog-heading {
  margin: 0 0 clamp(0.6rem, 1.2vw, 1rem);
  color: var(--dark-green);
  font-size: clamp(1.4rem, 2.3vw, 2rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.035em;
}
.catalog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.7rem, 1.8vw, 1.35rem);
}
.catalog-tile {
  position: relative;
  isolation: isolate;
  display: flex;
  min-width: 0;
  aspect-ratio: 1.35 / 1;
  align-items: flex-end;
  overflow: hidden;
  border-radius: clamp(16px, 2.1vw, 26px);
  color: var(--dark-green);
  background: var(--sage);
  border: 1px solid rgba(14, 65, 46, 0.16);
  box-shadow: 0 4px 0 rgba(14, 65, 46, 0.18), 0 9px 22px rgba(14, 65, 46, 0.12);
  text-decoration: none;
  transition: box-shadow 160ms ease, transform 160ms ease;
}
.catalog-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 7px 0 rgba(14, 65, 46, 0.19), 0 16px 30px rgba(14, 65, 46, 0.18);
}
.catalog-tile:active {
  transform: translateY(1px);
  box-shadow: 0 2px 0 rgba(14, 65, 46, 0.15), 0 5px 12px rgba(14, 65, 46, 0.12);
}
.catalog-tile__caption {
  position: relative;
  z-index: 2;
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.45rem;
  padding: clamp(1.05rem, 2.35vw, 1.85rem);
}
.catalog-tile__title {
  min-width: 0;
  font-size: clamp(1.7rem, 2.65vw, 2.55rem);
  font-weight: 800;
  line-height: 1.07;
  letter-spacing: -0.025em;
  overflow-wrap: break-word;
}
.catalog-tile__title small {
  display: block;
  margin-top: 0.14em;
  font-size: 0.60em;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.catalog-tile__arrow {
  flex: 0 0 auto;
  display: grid;
  width: 39px;
  height: 39px;
  place-items: center;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.24rem;
  line-height: 1;
}

/* Kun dette er et rigtigt produktfoto i den aktuelle LOCAL-billedmappe. */
.catalog-tile--photo {
  color: var(--white);
  background: var(--jade);
}
.catalog-tile--photo picture {
  position: absolute;
  inset: 0;
  display: block;
}
.catalog-tile--photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 44%;
  transition: transform 220ms ease;
}
.catalog-tile--photo:hover img {
  transform: scale(1.035);
}
.catalog-tile--photo::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(180deg, rgba(14, 65, 46, 0) 48%, rgba(14, 65, 46, 0.9) 100%);
  content: "";
}

/* Rene farvefelter, ikke opdigtede produktillustrationer. */
.catalog-tile--placeholder::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  border: 1px solid rgba(14, 65, 46, 0.10);
  border-radius: inherit;
  content: "";
}
.catalog-tile--regnslag   { background: var(--turquoise); }
.catalog-tile--magnetskilte { background: var(--sage); }
.catalog-tile--slogans    { color: var(--white); background: var(--dark-green); }
.catalog-tile--plakater   { background: var(--lime); }
.catalog-tile--muleposer  { background: linear-gradient(135deg, var(--cream), var(--sage)); }
.catalog-preview-note {
  max-width: 780px;
  margin: 1.05rem 0 0;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--jade);
}

/* Kontakt står samlet og let tilgængeligt uden endnu en tung produktkort-opsætning. */
.catalog-contact {
  padding-block: clamp(1.35rem, 2.7vw, 2.6rem);
  background: var(--white);
}
.catalog-contact__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  align-items: center;
  column-gap: clamp(1.5rem, 5vw, 5rem);
}
.catalog-contact .section-kicker {
  color: var(--jade);
}
.catalog-contact h2 {
  margin: 0 0 0.75rem;
  color: var(--dark-green);
  font-size: clamp(2rem, 3.4vw, 3.3rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.025em;
}
.catalog-contact__text p:last-child {
  max-width: 670px;
  margin: 0;
  font-size: 1.07rem;
  line-height: 1.5;
}
.catalog-contact__actions {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.7rem;
}
.catalog-contact__actions .email-result {
  overflow-wrap: anywhere;
}
.catalog-contact__actions p {
  margin: 0;
  color: var(--dark-green);
  font-size: 1rem;
}
.catalog-home .site-footer {
  padding-block: 0.8rem;
  border-top: 1px solid rgba(14,65,46,0.12);
}
.catalog-home .footer-inner p {
  font-size: 0.86rem;
}
.catalog-home #produkter,
.catalog-home #kontakt {
  scroll-margin-top: 0.6rem;
}
@media (max-width: 900px) {
  .catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .catalog-tile__title {
    font-size: clamp(1.7rem, 4vw, 2.4rem);
  }
}
@media (max-width: 680px) {
  .catalog-contact__inner {
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }
  .catalog-contact__actions {
    gap: 0.65rem;
  }
  .catalog-hero__inner {
    padding-block: clamp(1.15rem, 3.2vw, 1.8rem);
  }
  .catalog-hero h1 {
    font-size: clamp(1.95rem, 6.4vw, 3rem);
  }
  .hero-potpourri {
    right: 0;
    bottom: 0.35rem;
    width: clamp(110px, 28vw, 160px);
    height: clamp(104px, 24vw, 143px);
  }
  .hero-potpourri__poster { border-width: 2px; }
  .hero-potpourri__poster-mark { font-size: clamp(1.9rem, 7vw, 3.6rem); }
  .hero-potpourri__umbrella { border-width: 3px; }
}
@media (max-width: 500px) {
  .catalog-home .site-nav {
    gap: 0.8rem;
    font-size: 0.85rem;
  }
  .catalog-home .brand {
    font-size: 1.06rem;
    gap: 0.5rem;
  }
  .catalog-home .brand img {
    width: 32px;
    height: 32px;
  }
  .catalog-grid {
    gap: 0.65rem;
  }
  .catalog-tile {
    border-radius: 15px;
  }
  .catalog-tile__caption {
    gap: 0.18rem;
    padding: 0.85rem 0.66rem;
  }
  .catalog-tile__title {
    font-size: clamp(1.02rem, 4.5vw, 1.52rem);
    line-height: 1.12;
    letter-spacing: -0.025em;
  }
  .catalog-tile__title small {
    font-size: 0.65em;
    letter-spacing: -0.01em;
  }
  .catalog-tile__arrow {
    width: 27px;
    height: 27px;
    border-width: 1px;
    font-size: 0.92rem;
  }
  .catalog-tile--photo::after {
    background: linear-gradient(180deg, transparent 37%, rgba(14,65,46,0.87) 100%);
  }
}
@media (max-width: 385px) {
  .hero-potpourri { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .catalog-tile,
  .catalog-tile--photo img {
    transition: none;
  }
}

/* v0.5: tomme billedfelter fylder mindre, mens hele kortet forbliver klikbart. */
@media (max-width: 900px) {
  .catalog-hero h1 { max-width: calc(100% - 205px); font-size: clamp(2rem,4.2vw,3.4rem); }
  .hero-potpourri { width: 180px; height: 155px; }
}
@media (max-width: 680px) {
  .catalog-hero h1 { max-width: 100%; font-size: clamp(1.75rem,6.4vw,2.8rem); line-height: 1.1; }
  .hero-potpourri { display: none; }
  .catalog-tile { aspect-ratio: 1.15; }
  .catalog-tile__title { letter-spacing: -.02em; }
}
@media (max-width: 350px) {
  .catalog-home .header-inner { gap: .5rem; }
  .catalog-home .brand { gap: .35rem; font-size: 1rem; }
  .catalog-home .site-nav { gap: .65rem; }
}

/* v0.6 - 2026-10-25: actual product photos in every category. */
.catalog-tile--product{display:grid;grid-template-rows:minmax(0,1fr) auto;align-items:stretch;aspect-ratio:1.08}
.catalog-tile--paraplyer{background:#d4e8af}
.catalog-tile--product .catalog-tile__media{display:flex;align-items:center;justify-content:center;gap:8px;min-width:0;min-height:0;padding:14px 16px 4px;overflow:hidden}
.catalog-tile--product .catalog-tile__media>img{display:block;width:100%;height:100%;min-height:0;object-fit:contain;transition:transform 180ms ease}
.catalog-tile--product:hover .catalog-tile__media>img{transform:scale(1.025)}
.catalog-tile--product .catalog-tile__caption{align-items:center;padding:14px 18px 18px;gap:10px}
.catalog-tile--product .catalog-tile__title{font-size:clamp(1.25rem,2.1vw,2rem);line-height:1.08}
.catalog-tile--product .catalog-tile__title small{font-size:clamp(.8rem,1.1vw,.98rem);font-weight:500;line-height:1.25;margin-top:6px;letter-spacing:0}
.catalog-tile--product .catalog-tile__title small strong{font-weight:800}
.catalog-tile--product .catalog-tile__media--magnets>img{width:30%;height:auto;max-height:100%;border-radius:50%;object-fit:contain}
.catalog-tile--product .catalog-tile__media--posters>img{width:31%;height:100%;object-fit:contain}
.catalog-tile--slogans .catalog-tile__media{margin:14px 14px 0;padding:14px;background:var(--cream);border-radius:12px}
.catalog-tile--muleposer .catalog-tile__media{padding:12px 12px 0}
.hero-potpourri__poster img,.hero-potpourri__bag img{display:block;width:100%;height:100%;object-fit:contain}
.hero-potpourri__bag{overflow:hidden;border:3px solid var(--cream);border-radius:8px;background:#f2ece3;box-shadow:0 7px 20px #0e412e25}
.hero-potpourri__umbrella{left:33%;bottom:0;width:65%;height:51%;background:#fff}
.hero-potpourri__umbrella img{object-fit:contain}
@media(max-width:680px){
 .catalog-tile--product{aspect-ratio:.95}
 .catalog-tile--product .catalog-tile__media{padding:10px 10px 0;gap:5px}
 .catalog-tile--product .catalog-tile__caption{padding:10px 10px 12px;gap:5px}
 .catalog-tile--product .catalog-tile__title{font-size:clamp(1.02rem,4vw,1.5rem)}
 .catalog-tile--product .catalog-tile__title small{font-size:clamp(.7rem,2.9vw,.9rem);line-height:1.2;margin-top:4px}
 .catalog-tile--slogans .catalog-tile__media{margin:10px 10px 0;padding:8px}
 .catalog-tile--product .catalog-tile__arrow{width:25px;height:25px}
}
@media(prefers-reduced-motion:reduce){.catalog-tile--product .catalog-tile__media>img{transition:none}}

/* v0.7 - 2026-10-25: account navigation wraps inside the mobile header. */
@media(max-width:600px){.catalog-home .header-inner{flex-wrap:wrap;gap:.3rem;padding-block:.5rem}.catalog-home .brand{white-space:nowrap}.catalog-home .site-header .sh-main-nav{min-width:0}}

/* v0.8 - 2026-10-25: upright original campaign behind the three product images. */
.hero-campaign{position:absolute;z-index:0;top:clamp(1.05rem,2.6vw,2.6rem);right:clamp(85px,10vw,130px);height:calc(100% - 2 * clamp(1.05rem,2.6vw,2.6rem));width:auto;max-width:none;object-fit:contain;border-radius:9px;box-shadow:0 7px 20px #0e412e20}
@media(min-width:681px){.hero-potpourri{z-index:1}}
@media(max-width:900px){.hero-campaign{top:clamp(1.05rem,2.6vw,2.6rem);height:calc(100% - 2 * clamp(1.05rem,2.6vw,2.6rem));right:90px}}
@media(max-width:680px){.hero-campaign{display:none}}

/* v0.9 - 2026-10-25: scale the full montage with the actual title height. */
@media(min-width:681px){
 .hero-potpourri{width:auto;aspect-ratio:1.2;height:calc((100% - 2 * clamp(1.05rem,2.6vw,2.6rem)) * .78);bottom:clamp(1.05rem,2.6vw,2.6rem)}
 .hero-potpourri>.hero-campaign{top:auto;right:auto;bottom:0;left:-25%;height:128.205%;width:auto;max-width:none;z-index:0}
 .hero-potpourri__poster,.hero-potpourri__bag,.hero-potpourri__umbrella{z-index:1}
}

/* v0.10 - 2026-10-25: yellow news ribbon in reserved space above original umbrella photo. */
.catalog-tile--product .catalog-tile__media--news{display:grid;grid-template-rows:auto minmax(0,1fr);gap:10px;padding-top:14px}
.catalog-umbrella-news{justify-self:center;background:#ffe341;color:#123d2c;font-size:clamp(.58rem,1.2vw,.95rem);font-weight:900;line-height:1.2;letter-spacing:.015em;padding:.45em .7em;transform:rotate(-3deg);box-shadow:2px 3px 0 #123d2c}
.catalog-tile--paraplyer .catalog-tile__title{font-size:clamp(1.1rem,1.9vw,1.8rem)}
@media(max-width:680px){.catalog-tile--product .catalog-tile__media--news{gap:7px;padding-top:10px}.catalog-umbrella-news{font-size:clamp(.48rem,2vw,.78rem)}.catalog-tile--paraplyer .catalog-tile__title{font-size:clamp(.96rem,3.5vw,1.4rem)}}