/* Knapparna ligger nu i headern, centreras och bryter rad.
   Egenskaper på .styled-button lämnas orörda. */
.produktgrupp-container{
  position: static;                 /* inte ovanpå hero-bilden längre */
  transform: none;
  left: auto; top: auto;

  display: flex;
  flex-wrap: wrap;
  justify-content: center;          /* centrerar även sista raden */
  gap: 10px;                        /* 10 px mellan knapparna */

  width: 100%;
  max-width: 980px;
  margin: 8px auto 0;               /* lite luft under rubriken */
  padding: 0 12px;
  box-sizing: border-box;
}


/* === 3D-konvexa knappar – lika stora ==================== */
/* Bredd minskad ~30px: 190px i stället för 220px */
.styled-button{
  width: 150px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  text-decoration: none;
  color: #4e473a;
  font-family: 'Playfair Display', serif;
  font-size: 0.95rem;                 /* lite mindre så längre ord får plats */
  font-weight: 600;
  letter-spacing: .1px;
  padding: 0 14px;

  border: 1px solid #e7d8c7;
  background: linear-gradient(180deg,#fffdf9 0%,#f2eadf 45%,#e8dfd2 46%,#f6efe6 100%);
  box-shadow:
    0 12px 18px rgba(0,0,0,.12),
    inset 0 2px 0 rgba(255,255,255,.95),
    inset 0 -4px 10px rgba(0,0,0,.10);
  position: relative;
  transition: transform .08s ease, box-shadow .12s ease, filter .12s ease;
}

/* Glans */
.styled-button::before{
  content:"";
  position:absolute; left:10px; right:10px; top:8px; height:38%;
  border-radius: 14px 14px 50% 50% / 14px 14px 40% 40%;
  background: radial-gradient(120% 70% at 50% 0%,
              rgba(255,255,255,.95) 0%,
              rgba(255,255,255,.55) 40%,
              rgba(255,255,255,0) 70%);
  pointer-events:none;
}

.styled-button:hover{
  transform: translateY(-2px);
  box-shadow:
    0 16px 26px rgba(0,0,0,.16),
    inset 0 2px 0 rgba(255,255,255,.97),
    inset 0 -5px 12px rgba(0,0,0,.12);
  filter: saturate(1.02);
}
.styled-button:active{
  transform: translateY(0);
  background: linear-gradient(180deg,#f6efe6 0%,#e8dfd2 42%,#e4d5c1 43%,#efe3d3 100%);
  box-shadow:
    0 8px 12px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -6px 14px rgba(0,0,0,.16);
}
.styled-button:focus-visible{
  outline: 2px solid #c2a68a;
  outline-offset: 2px;
}

.styled-button__label{
  display:block;
  text-align:center;
  color:#6b6253;
  text-shadow:0 1px 0 rgba(255,255,255,.9);
  line-height:1.15;
  white-space: nowrap;                /* håll texten på en rad */
  overflow: hidden;
  text-overflow: ellipsis;            /* … om det ändå blir för långt */
}

/* Tomt-läge om inga grupper finns */
.pg-empty{
  background:#fff; border:1px dashed #d9cbb9; border-radius:12px; color:#6b6253;
  padding:10px 14px; height:56px; display:flex; align-items:center; justify-content:center;
  width: 100%; max-width: 380px; margin: 0 auto;
}

/* === DH TEXT NAV 2026-07-29 === */
.produktgrupp-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 34px;
  width: auto;
  max-width: none;
  margin: 38px 0 0;
  padding: 0;
}

.styled-button,
.styled-button:visited {
  width: auto;
  height: auto;
  min-height: 0;
  display: inline;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--dh-ink-dark, #625642);
  font-family: 'Crimson Text', Georgia, serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
  text-shadow: none;
  transition: color .15s ease;
}

.styled-button::before { content: none; }

.styled-button:hover,
.styled-button.is-active {
  transform: none;
  box-shadow: none;
  filter: none;
  background: transparent;
  color: #3f382d;
}

.styled-button:active {
  transform: none;
  background: transparent;
  box-shadow: none;
}

@media (max-width: 760px) {
  .produktgrupp-container {
    display: grid;
    grid-template-columns: repeat(2, minmax(120px, 1fr));
    gap: 28px 12px;
    margin-top: 28px;
  }

  .styled-button,
  .styled-button:visited {
    text-align: center;
    font-size: 19px;
  }
}
/* === END DH TEXT NAV === */
/* === DH STARTPAGE NAV EXACT === */
.dh-startpage .produktgrupp-container {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
  gap: 34px !important;
  margin: 38px 0 0 0 !important;
  padding: 0 !important;
  width: auto !important;
  max-width: none !important;
}

.dh-startpage .styled-button,
.dh-startpage .styled-button:visited {
  display: inline !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  text-align: left !important;
}
/* === END DH STARTPAGE NAV EXACT === */
/* === DH TEXT NAV FORCE 2026-07-29 === */
.site-header .produktgrupp-container .styled-button,
.site-header .produktgrupp-container .styled-button:visited {
  display: inline !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--dh-ink-dark, #625642) !important;
  font-family: 'Crimson Text', Georgia, serif !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  text-align: left !important;
}

.site-header .produktgrupp-container .styled-button::before { content: none !important; }
/* === END DH TEXT NAV FORCE === */
/* === DH STARTPAGE COMPACT NAV FINAL 2026-07-29 === */
.dh-startpage .site-header .produktgrupp-container .styled-button,
.dh-startpage .site-header .produktgrupp-container .styled-button:visited {
  font-size: 17px !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  color: #625642 !important;
}
/* === END DH STARTPAGE COMPACT NAV FINAL === */
/* === DH REA NAV 2026-08-08 === */
.site-header .produktgrupp-container,
.dh-startpage .produktgrupp-container {
  flex-wrap: wrap !important;
  max-width: 320px !important;
}
.site-header .produktgrupp-container .styled-button.sale-link,
.site-header .produktgrupp-container .styled-button.sale-link:visited {
  color: rgba(145, 55, 48, 0.78) !important;
  text-transform: none;
}
.site-header .produktgrupp-container .styled-button.sale-link:hover,
.site-header .produktgrupp-container .styled-button.sale-link.is-active {
  color: rgba(125, 42, 37, 0.9) !important;
}
@media (max-width: 760px) {
  .site-header .produktgrupp-container,
  .dh-startpage .produktgrupp-container {
    max-width: none !important;
  }
}
/* === END DH REA NAV === */
/* === DH FOUR LINK ROWS 2026-08-08 === */
.site-header .produktgrupp-container,
.dh-startpage .site-header .produktgrupp-container {
  display: grid !important;
  grid-template-columns: repeat(4, max-content) !important;
  justify-content: flex-start !important;
  justify-items: start !important;
  align-items: baseline !important;
  column-gap: 36px !important;
  row-gap: 12px !important;
  max-width: none !important;
  width: max-content !important;
}
@media (max-width: 760px) {
  .site-header .produktgrupp-container,
  .dh-startpage .site-header .produktgrupp-container {
    grid-template-columns: repeat(4, max-content) !important;
    column-gap: 24px !important;
    row-gap: 12px !important;
    width: max-content !important;
    max-width: 100% !important;
  }
}
/* === END DH FOUR LINK ROWS === */

/* === DH SALE LINK COLOR ONLY 2026-08-09 === */
.site-header .produktgrupp-container .styled-button.sale-link,
.site-header .produktgrupp-container .styled-button.sale-link:visited,
.dh-startpage .site-header .produktgrupp-container .styled-button.sale-link,
.dh-startpage .site-header .produktgrupp-container .styled-button.sale-link:visited {
  font-family: 'Crimson Text', Georgia, serif !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  text-transform: none !important;
  color: rgba(145, 55, 48, 0.78) !important;
}
/* === END DH SALE LINK COLOR ONLY === */
/* === DH SALE LINK EXACT TYPO 2026-08-09 === */
.site-header .produktgrupp-container .styled-button.sale-link,
.site-header .produktgrupp-container .styled-button.sale-link:visited {
  font-family: 'Crimson Text', Georgia, serif !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: rgba(145, 55, 48, 0.78) !important;
}
.dh-startpage .site-header .produktgrupp-container .styled-button.sale-link,
.dh-startpage .site-header .produktgrupp-container .styled-button.sale-link:visited {
  font-family: 'Crimson Text', Georgia, serif !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
}
/* === END DH SALE LINK EXACT TYPO === */