html {
    box-sizing: border-box;
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }

*, *::before, *::after {
  box-sizing: inherit;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

:root {
  --bg: #fff;
  --site-content-max: 1200px;
  --site-gutter: 20px;
  --header-height: 80px;
  --config-bg-image: none;
  --config-bg-opacity: 1;
  --config-bg-size: auto;
  --config-bg-position: 0 0;
}

.content-container {
  max-width: var(--site-content-max);
  width: 100%;
  padding-left: var(--site-gutter);
  padding-right: var(--site-gutter);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

main {
  padding-left: var(--site-gutter);
  padding-right: var(--site-gutter);
  box-sizing: border-box;
}

main .content-container {
  padding-left: 0;
  padding-right: 0;
}

img:not([width]):not([height]){
  height:auto;
  max-width:100%;
}

.img-cover{
  width:100%;
  aspect-ratio:var(--ratio,4/3);
  object-fit:cover;
}

:root{--beadClamp: var(--beadSize-md);}

body {
  font-family: 'Open Sans', Arial, sans-serif;
  background: var(--light);
  color: var(--text);
  margin: 0;
    overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

body[data-page="produkte"] {
  --products-max-width: min(1100px, 100%);
}

body.config-bg-active {
  position: relative;
}

body.config-bg-active::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: var(--config-bg-image);
  background-repeat: repeat;
  background-size: var(--config-bg-size);
  background-position: var(--config-bg-position);
  opacity: var(--config-bg-opacity);
  pointer-events: none;
  z-index: -1;
}

body.no-scroll {
  position: fixed;
  overflow: hidden;
  width: 100%;
}

.top-bar {
  background: #eab4c3;
  color: var(--text);
  text-align: center;
  padding: 0.25rem 0;
  font-size: 0.85rem;
}

header.site-header {
  position: sticky;
  top: 0;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 80px;
  padding: 0 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  z-index: 60;
}
header.site-header h1{margin:0;display:flex;align-items:center;}
header.site-header nav{display:flex;align-items:center;height:100%;margin-left:auto;justify-content:flex-end;flex:1;position:relative;z-index:50;}
header.site-header nav ul{position:relative;}
header.site-header nav .nav-indicator{position:absolute;bottom:-6px;left:0;height:4px;border-radius:999px;background:var(--accent);transform:translateX(0);width:0;opacity:0;transition:transform .4s ease,width .4s ease,opacity .3s ease;pointer-events:none;}
header.site-header nav .nav-indicator.visible{opacity:1;}

@media (max-width:768px){
  :root{--header-height:60px;}
  header.site-header{
    min-height:60px;
    padding:0 10px;
  }
    #logo{
      max-height:40px;
    }
}

@media (min-width:769px){
  header.site-header{
    position:sticky;
  }
  header.site-header::before,
  header.site-header::after{
    content:'';
    position:absolute;
    top:0;
    left:50%;
    transform:translateX(-50%);
    width:100vw;
    height:100%;
    pointer-events:none;
  }
  header.site-header::before{
    background:var(--bg);
    mask-image:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent);
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent);
    mask-repeat:no-repeat;
    -webkit-mask-repeat:no-repeat;
    mask-size:cover;
    -webkit-mask-size:cover;
    z-index:-1;
  }
  header.site-header::after{
    background:linear-gradient(90deg,var(--bg) 0%,transparent 20%,transparent 80%,var(--bg) 100%);
    z-index:-2;
  }
}

header.hide {
  transform: translateY(-100%);
}

#logo {
  max-height: 50px;
  height: auto;
  display: block;
  margin-left: 5px;
}

#logo-text {
  margin-left: 0.5rem;
  font-family: 'Montserrat', sans-serif;
  display: none;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1rem;
  justify-content: center;
  align-items: center;
  height: 100%;
}

nav ul.show {
  z-index: 1000;
  position: relative;
}

nav ul.show li {
  z-index: 2000;
  position: relative;
}

nav a {
  text-decoration: none;
  color: var(--text);
  padding: 0.5rem 1rem;
  font-family: 'Montserrat', sans-serif;
}

h1, h2, h3 {
  font-family: 'Montserrat', sans-serif;
}

nav a:hover,
nav a.active {
  color: var(--accent);
}

nav a:visited {
  color: var(--text);
}
nav a[href="cart.html"]{
  transition:transform .3s;
  display:flex;
  align-items:center;
  gap:0.25rem;
  position:relative;
  text-indent:0;
  font-size:0;
  width:auto;
  padding:0.25rem;
}
@media (max-width:768px){
  header.site-header nav .nav-indicator{display:none;}
}
nav a[href="cart.html"]::before{
  content:"\1F6D2";
  font-size:1.75rem;
}
nav a[href="cart.html"]:hover{
  transform:scale(1.1);
}
nav a[href="cart.html"] .cart-count{
  transition:transform .3s;
  position:static;
  transform:none;
  font-size:0.9rem;
  margin-left:0.25rem;
}
  nav a[href="cart.html"]:hover .cart-count{ 
    transform:scale(1.2);
  }
  nav li { position: relative; height:100%; display:flex; align-items:center; }
  .cart-count {
    background: var(--accent);
    border-radius: 1rem;
    padding: 0 0.4rem;
    margin-left: 0.25rem;
    font-size: 0.8rem;
  }

  .menu-toggle{display:none;background:none;border:none;font-size:2rem;cursor:pointer;color:var(--text);z-index:60;}
  .menu-close{display:none;background:none;border:none;font-size:2rem;cursor:pointer;color:var(--text);z-index:60;}
  @media (max-width:768px){
    header.site-header{flex-wrap:wrap;}
    header.site-header nav{
      order:3;
      flex:1 0 100%;
      position:relative;
      height:auto;
      margin-left:0;
      display:flex;
      flex-direction:column;
      width:100%;
      max-height:0;
      overflow:hidden;
      background:#fff;
      transition:max-height .3s ease;
      align-items:center;
      justify-content:flex-start;
    }
    header.site-header.nav-open nav{max-height:80vh;}
    header.site-header nav ul{flex-direction:column;gap:2rem;width:100%;justify-content:flex-start;align-items:center;padding:1rem 0;}
    .menu-toggle{display:flex;align-items:center;height:40px;}
    header.site-header.nav-open .menu-close{display:block;position:absolute;top:0.5rem;right:0.5rem;}
  }

  .service{background:#fff;}
  .service .content-block-center{display:flex;justify-content:space-between;align-items:center;padding:0.25rem 20px;}
  .service-nav ul,.social-nav ul{display:flex;gap:1rem;list-style:none;margin:0;padding:0;}
  .social-nav img{width:24px;height:24px;}
  .menue-container{background:#fff;}
  .menue-container .head-container{display:flex;justify-content:space-between;align-items:center;}
  .menue-container .main-nav ul{display:flex;gap:1rem;}

.hero {
  width: 100%;
  height: auto;
  border-radius: 8px;
  margin-bottom: 1rem;
}

.slideshow {
  position: relative;
  overflow: hidden;
  display: flex;
}

.hero-slider {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 175px;
  mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-size: cover;
  -webkit-mask-size: cover;
}

body[data-page="index"] .hero-slider {
  height: 350px;
}
.hero-slider::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, var(--bg) 0%, transparent 20%, transparent 80%, var(--bg) 100%),
    linear-gradient(to bottom, transparent 0%, transparent 85%, var(--bg) 100%);
}
.slide {
  display: none;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  border-radius: 8px;
  transform: scale(1);
  will-change: transform;
  animation: heroZoom 10s ease-in-out infinite alternate;
}
.slide.active {
  display: block;
}

@keyframes heroZoom {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.05);
  }
}

@media (max-width: 768px) {
  .hero-slider {
    height: 100px;
    margin-bottom: 0.5rem;
  }
  body[data-page="index"] .hero-slider {
    height: 200px;
  }
}
.slide .caption {
  position: absolute;
  left: 10%;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text);
  background: rgba(255,255,255,0.8);
  padding: 1rem;
  border-radius: 8px;
}


section {
  margin-bottom: 2rem;
}
#intro{display:flex;flex-wrap:wrap;gap:1rem;align-items:stretch;background:none;padding:0;box-shadow:none;}
#intro .intro-wrapper{display:flex;gap:1rem;align-items:stretch;justify-content:space-between;}
#intro .intro-wrapper .intro-text,#intro .intro-wrapper .featured-slider{flex:1 0 50%;}
#intro .intro-wrapper .intro-text{text-align:left;}
@media (max-width:768px){
  #intro{display:block;}
  #intro .intro-wrapper{flex-direction:column;}
  #intro .intro-wrapper .intro-text,
  #intro .intro-wrapper .featured-slider{width:100%;flex:0 0 auto;}
}
.featured-slider{position:relative;width:100%;aspect-ratio:1/1;overflow:hidden;border-radius:8px;}
.featured-slider .slides{position:relative;width:100%;height:100%;}
.featured-slider .slide{position:absolute;top:0;left:0;width:100%;height:100%;display:block;opacity:0;transform:scale(1.05);pointer-events:none;cursor:pointer;transition:opacity .6s ease,transform .6s ease;}
.featured-slider .slide.active{opacity:1;transform:scale(1);pointer-events:auto;}
.featured-slider .slide .slide-banner{position:absolute;top:8px;left:8px;background:rgba(0,0,0,0.6);color:#fff;padding:4px 8px;border-radius:4px;font-size:.9rem;z-index:1;pointer-events:none;}
.featured-slider img{width:100%;height:100%;object-fit:cover;}
.featured-slider .prev,
.featured-slider .next{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,0.4);color:#fff;border:none;width:32px;height:32px;border-radius:50%;cursor:pointer;}
.featured-slider .prev{left:10px;}
.featured-slider .next{right:10px;}
.featured-slider .dots{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);display:flex;gap:5px;}
.featured-slider .dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,0.5);border:none;padding:0;cursor:pointer;}
.featured-slider .dot.active{background:#fff;}

label { display: block; margin-top: 0.5rem; }

button {
  background-color: var(--accent);
  border: none;
  padding: 0.5rem 1rem;
  cursor: pointer;}

button:hover {
  background-color: #eab4c3;
}

button:disabled,
button[aria-disabled="true"],
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.9;
  background-color: var(--accent, #f3cfd9);
  color: var(--text, #2a2a2a);
  cursor: not-allowed;
  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
  filter: saturate(80%);
}

button:disabled:hover,
button[aria-disabled="true"]:hover,
.btn:disabled:hover,
.btn[aria-disabled="true"]:hover {
  background-color: var(--accent, #f3cfd9);
  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}

.btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin-top: 0.5rem;
  background: var(--accent);
  padding: 0.5rem 1rem;
  text-decoration: none;
  color: var(--text);
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);  min-height: 2.4rem;
  box-sizing: border-box;
  width: 100%;
}

.btn:hover {
  background: #eab4c3;
  box-shadow: 0 4px 6px rgba(0,0,0,0.15);
}

@media (min-width: 769px) {
  .btn {
    width: auto;
  }
}

.btn-pink {
  background-color: #f8d7da;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  text-decoration: none;
  color: #000;
  font-weight: bold;
}
.btn-pink:hover {
  background-color: #f5c6cb;
}
.btn-pink.active {
  background-color: #f5c6cb;
}

#alt-message { color: #b00; display: none; }

#cart li { margin-bottom: 0.5rem; }
.cart-item{display:flex;gap:0.5rem;align-items:flex-start;}
.cart-item img{width:80px;height:80px;object-fit:cover;}
.cart-item input[type=number]{width:60px;}
.cart-item .actions{margin-left:auto;display:flex;flex-direction:column;gap:0.25rem;align-items:flex-end;text-align:right;}

@media (max-width:480px){
  .cart-item{flex-direction:column;align-items:center;}
  .cart-item .actions{width:100%;gap:0.5rem;margin-left:0;align-items:stretch;text-align:left;}
  .cart-item .actions .btn{width:100%;}
}

.product-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, 1fr);
  justify-content: flex-start;
}

body[data-page="produkte"] .product-grid {
  width: var(--products-max-width, min(1100px, 100%));
  max-width: var(--products-max-width, min(1100px, 100%));
  margin: 0 auto;
}

body[data-page="index"] .product-grid {
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  justify-content: center;
}

.product-tile {
  position: relative;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  padding: 1rem;
  box-sizing: border-box;
  text-align: center;
  display: flex;
  flex-direction: column;
}

.product-tile .img-wrap {
  width: 90%;
  aspect-ratio: 4/3;
  overflow: hidden;
  margin: 0 auto 0.5rem;
  position: relative;
}

body[data-page="index"] .product-tile {
  padding: 1.05rem 1.05rem 0.9rem;
}

body[data-page="index"] .product-tile .img-wrap {
  width: min(100%, 252px);
  aspect-ratio: 1;
  margin: 0 auto 0.7rem;
}

body[data-page="index"] .product-tile h3 {
  font-size: clamp(0.85rem, 1.26vw, 1.05rem);
}

body[data-page="index"] .product-tile .price {
  font-size: clamp(0.8rem, 1.12vw, 0.98rem);
}

body[data-page="index"] .product-tile p {
  font-size: clamp(0.7rem, 0.91vw, 0.75rem);
}

.product-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease, opacity 0.6s ease;
}

/* product filter navigation */
.filter-nav {
  --filter-max-width: var(--products-max-width, min(1100px, 100%));
  width: var(--filter-max-width);
  margin: 0 auto 2rem;
  padding: 0;
  box-sizing: border-box;
}

.filter-nav .menu {
  margin: 0;
}

.filter-menu {
  --menu-gap: 15px;
  --menu-surface: rgba(255, 255, 255, 0.94);
  --menu-shadow: 0 16px 34px rgba(51, 63, 82, 0.16);
  font-family: 'Montserrat', 'Open Sans', sans-serif;
  color: #3b4552;
}

.filter-menu > .menu-root {
  list-style: none;
  margin: calc(var(--menu-gap) * 1.5) 0;
  padding: 0;
}

.filter-menu button {
  font-family: inherit;
  appearance: none;
}

.filter-menu .menu-item {
  --accent-color: #f8a9b5;
  --gradient-color: #fbd6df;
  position: relative;
  background: var(--menu-surface);
  border-radius: 14px;
  border-left: 5px solid var(--gradient-color);
  margin-bottom: 6px;
  overflow: hidden;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.filter-menu .menu-item.menu-item--all {
  --accent-color: rgba(248, 169, 181, 0.75);
  --gradient-color: rgba(248, 169, 181, 0.38);
}

.filter-menu .menu-item.tone-1 { --accent-color: #f8a9b5; --gradient-color: #fbd6df; }
.filter-menu .menu-item.tone-2 { --accent-color: #8acdd3; --gradient-color: #d6f1f3; }
.filter-menu .menu-item.tone-3 { --accent-color: #f6d89e; --gradient-color: #fde9c4; }
.filter-menu .menu-item.tone-4 { --accent-color: #c6b7e4; --gradient-color: #e5dbf8; }
.filter-menu .menu-item.tone-5 { --accent-color: #b9e4c9; --gradient-color: #e0f7e8; }

.filter-menu .menu-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to left, var(--accent-color), var(--gradient-color));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s ease;
  z-index: 0;
  opacity: 0.95;
  pointer-events: none;
}

.filter-menu .menu-item:hover,
.filter-menu .menu-item:focus-within,
.filter-menu .menu-item.is-open,
.filter-menu .menu-item.is-active {
  box-shadow: var(--menu-shadow);
}

.filter-menu .menu-item:hover::after,
.filter-menu .menu-item:focus-within::after,
.filter-menu .menu-item.is-open::after,
.filter-menu .menu-item.is-active::after {
  transform: scaleX(1);
}

.filter-menu .menu-link {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  border: none;
  background: none;
  color: #3b4552;
  font-weight: 700;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  padding: calc(var(--menu-gap) * 0.9) calc(var(--menu-gap) * 1.25);
  font-size: 0.95rem;
  text-align: left;
  cursor: pointer;
  transition: color 0.35s ease;
}

.filter-menu .menu-item.menu-item--all > .menu-link {
  color: #c86c81;
}

.filter-menu .menu-item:hover > .menu-link,
.filter-menu .menu-item:focus-within > .menu-link,
.filter-menu .menu-item.is-open > .menu-link,
.filter-menu .menu-item.is-active > .menu-link {
  color: #ffffff;
}

.filter-menu .menu-link:focus-visible {
  outline: 3px solid rgba(248, 169, 181, 0.45);
  outline-offset: 3px;
}

.filter-menu .menu-item.has-children > .menu-link::before {
  content: "\25BE";
  position: absolute;
  right: calc(var(--menu-gap) * 0.9);
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.85rem;
  transition: transform 0.4s ease;
}

.filter-menu .menu-item.is-open > .menu-link::before,
.filter-menu .menu-item.has-children > .menu-link.is-active::before {
  transform: translateY(-50%) rotate(-180deg);
}

.filter-menu .sub-menu {
  list-style: none;
  margin: calc(var(--menu-gap) * 0.4) calc(var(--menu-gap) * 1.1);
  padding-left: calc(var(--menu-gap) * 0.6);
  border-left: 1px solid rgba(255, 255, 255, 0.6);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-8px);
  transition: max-height 0.45s ease, opacity 0.25s ease, transform 0.25s ease;
}

.filter-menu .menu-item.is-open > .sub-menu {
  max-height: 600px;
  opacity: 1;
  transform: translateY(0);
}

.filter-menu .sub-menu .menu-item {
  border: none;
  background: none;
  margin-bottom: 4px;
  border-left: none;
  box-shadow: none;
}

.filter-menu .sub-menu .menu-item::after {
  display: none;
}

.filter-menu .sub-link {
  display: block;
  width: 100%;
  border: none;
  background: none;
  padding: 0.55rem 0.75rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: #4d5a67;
  text-align: left;
  border-radius: 9px;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.filter-menu .sub-link:hover,
.filter-menu .sub-link:focus-visible,
.filter-menu .sub-link.is-active {
  background: rgba(248, 169, 181, 0.18);
  color: #c4607a;
}

.filter-menu .sub-link:focus-visible {
  outline: 2px solid rgba(248, 169, 181, 0.35);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .filter-nav {
    padding: 0 0.5rem;
  }

  .filter-menu > .menu-root {
    margin: calc(var(--menu-gap)) 0;
  }

  .filter-menu .menu-link {
    font-size: 0.9rem;
  }
}

@media (min-width: 700px) {
  .filter-nav {
    padding: 0;
  }

  .filter-menu > .menu-root {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    gap: var(--menu-gap);
    text-align: center;
    margin: calc(var(--menu-gap)) auto calc(var(--menu-gap) * 1.5);
    max-width: var(--filter-max-width);
  }

  .filter-menu > .menu-root > .menu-item {
    display: flex;
    flex-direction: column;
    width: clamp(140px, 16vw, 170px);
    border-left: 0;
    border-top: 5px solid var(--accent-color);
    margin-bottom: 0;
    margin-left: 0;
    vertical-align: top;
    border-radius: 16px;
  }

  .filter-menu > .menu-root > .menu-item::after {
    background: linear-gradient(to bottom, var(--accent-color), var(--gradient-color));
    transform-origin: top center;
  }

  .filter-menu > .menu-root > .menu-item:first-child {
    margin-left: 0;
  }

  .filter-menu > .menu-root > .menu-item:hover,
  .filter-menu > .menu-root > .menu-item:focus-within,
  .filter-menu > .menu-root > .menu-item.is-open,
  .filter-menu > .menu-root > .menu-item.is-active {
    transform: translateY(-4px);
  }

  .filter-menu .menu-link {
    text-align: center;
  }

  .filter-menu .sub-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, -8px);
    margin: 0;
    padding: calc(var(--menu-gap) * 0.85) calc(var(--menu-gap));
    border-left: 0;
    border-radius: 16px;
    min-width: clamp(180px, 18vw, 260px);
    box-shadow: 0 24px 38px rgba(46, 55, 65, 0.18);
    background: rgba(255, 255, 255, 0.97);
    z-index: 40;
  }

  .filter-menu .menu-item.is-open > .sub-menu {
    transform: translate(-50%, 4px);
  }

  .filter-menu .menu-item:not(.is-open) > .sub-menu {
    pointer-events: none;
  }

  .filter-menu .menu-item.is-open > .sub-menu {
    pointer-events: auto;
  }
}

.product-tile img.hover-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.product-tile .img-wrap:hover img.hover-img {
  opacity: 1;
}

.product-tile .img-wrap:hover img.single {
  transform: scale(1.1);
}

.product-tile h3 {
  min-height: 2.2em;
  margin: 0.5rem 0 0.25rem;
}
.product-tile .btn{width:100%;margin-top:auto;}

.price {
  font-weight: bold;
  margin: 0.5rem 0;
}
.actions{display:flex;gap:0.5rem;justify-content:center;margin-top:0.5rem;}
.actions .btn{flex:1;}

@media (min-width: 769px) {
  .product-grid {
    gap: 16px;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }
}

@media (min-width: 769px) {
  body[data-page="index"] .product-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }
}

body[data-page="index"] .product-tile {
  padding: 2rem 2rem 1.75rem;
}

body[data-page="index"] .product-tile .img-wrap {
  width: min(100%, 520px);
  margin-bottom: 1.25rem;
  aspect-ratio: 1;
}

body[data-page="index"] .product-tile h3 {
  font-size: clamp(1.4rem, 2vw, 1.8rem);
}

body[data-page="index"] .product-tile .price {
  font-size: clamp(1.2rem, 1.8vw, 1.6rem);
}

form label input,
form label textarea {
  width: 100%;
  box-sizing: border-box;
}

#product-list-admin button,
#size-list button {
  margin-left: 0.5rem;
}

footer {
  background: var(--light);
  padding: 1rem;
  color: var(--text);
  margin-top:16px;
}

.footer-cols {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 1200px;
  margin: 0 auto 1rem;
  align-items: center;
  text-align: center;
}

@media (min-width:769px){
  .footer-cols{flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;text-align:left;}
}

.footer-cols ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-cols a {
  text-decoration: none;
  color: var(--text);
  font-size: 0.9rem;
}

.footer-links {
  margin-bottom: 0.5rem;
  text-align: center;
}

.footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1rem;
}

.footer-links a {
  text-decoration: none;
  color: var(--text);
  font-size: 0.9rem;
}

.social {
  display: flex;
  gap: 0.5rem;
  margin: 0.5rem 0;
}
.social svg {
  width: 24px;
  height: 24px;
  fill: var(--text);
}
.social a:hover svg {
  fill: var(--accent);
}

.admin-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.admin-menu button {
  padding: 0.5rem 1rem;
  cursor: pointer;
  background: var(--accent);
  border: none;
  border-radius: 4px;
}
.status {
  margin-bottom: 1rem;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  color: #fff;
}
.status.ok { background:#4caf50; }
.status.err { background:#e53935; }
.admin-panel {
  display: none;
  margin-bottom: 1rem;
  background: var(--bg);
  padding: 1rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.row{display:flex;align-items:center;gap:0.5rem;margin-bottom:0.5rem;flex-wrap:wrap;}
.bead-preview{width:32px;height:32px;border-radius:50%;background:#ccc;box-shadow:0 1px 3px rgba(0,0,0,0.3);margin-bottom:0.5rem;}
.size-options label{margin-right:0.5rem;display:inline-flex;align-items:center;gap:0.25rem;font-size:0.9rem;}
.color-swatch{display:inline-block;width:20px;height:20px;border-radius:50%;margin-right:0.25rem;vertical-align:middle;box-shadow:0 1px 3px rgba(0,0,0,0.3);}
.color{display:inline-block;width:24px;height:24px;border-radius:50%;margin:0.25rem;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,0.3);} 
.admin-grid{display:flex;flex-wrap:wrap;gap:0.5rem;margin-top:1rem;}
.admin-grid .tile{width:80px;text-align:center;border:1px solid #ccc;border-radius:4px;padding:0.25rem;font-size:0.75rem;cursor:pointer;position:relative;}
.admin-grid .tile img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:4px;}
.admin-grid .tile button{position:absolute;top:2px;right:2px;font-size:0.7rem;padding:0 4px;}
.element-thumb{width:40px;height:40px;margin:0.25rem;cursor:pointer;}
.svgitem div{display:block;}
.svg-wrap .color-base{fill:var(--clip-color);}
.svg-wrap .color-dark{fill:var(--clip-color-dark);}
.svg-wrap .color-light{fill:var(--clip-color-light);}
.svg-wrap .color-gloss{fill:var(--clip-color-highlight);}
.svg-wrap{filter:drop-shadow(0 2px 4px rgba(0,0,0,0.2));}
.prod-flex{display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-start;}
.prod-fields{display:flex;flex-wrap:wrap;gap:0.5rem;flex:1;min-width:250px;}
.prod-fields label{display:flex;flex-direction:column;min-width:120px;}
.prod-fields label.full{flex:1 1 100%;}
.img-row{display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap;}
.img-row textarea{height:2.2em;min-height:2.2em;}
#prod-preview{width:100%;box-shadow:none;background:transparent;}
.range-row{display:flex;align-items:center;gap:0.5rem;margin:0.5rem 0;flex-wrap:wrap;}
.range-row input[type="range"]{flex:1;min-width:160px;}

@media (max-width: 600px) {
    header {
      flex-direction: row;
      align-items: center;
    }

    nav {
      margin-left: auto;
    }

    nav ul {
      flex-direction: column;
      justify-content: space-evenly;
      align-items: center;
      gap: 0;
    }
  }

.thumbs{display:flex;flex-direction:column;gap:0.5rem;max-height:340px;overflow:hidden;}
.thumbs-wrapper{display:flex;flex-direction:column;align-items:center;width:90px;}
.main-image{position:relative;flex:1 1 60%;border-radius:8px;box-shadow:0 2px 6px rgba(0,0,0,0.1);}
.main-image img{width:100%;display:block;max-height:66vh;object-fit:contain;}
.main-image button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.7);
  border: none;
  font-size: 1.5rem;
  padding: 0 0.5rem;
  cursor: pointer;
}
.main-image button.prev { left: 0.25rem; }
.main-image button.next { right: 0.25rem; }
.thumbs img{width:80px;height:80px;object-fit:contain;border-radius:4px;cursor:pointer;}
.thumb-scroll{font-size:1rem;padding:2px 0;background:rgba(255,255,255,0.7);border:none;width:100%;cursor:pointer;}
#header-img-list.thumb-list{display:flex;gap:0.5rem;flex-wrap:wrap;margin-top:0.5rem;}
.thumb-list .thumb{position:relative;}
.thumb-list img{width:80px;height:80px;object-fit:cover;border-radius:4px;}
.thumb-list button{position:absolute;top:2px;right:2px;background:var(--accent);border:none;font-size:0.7rem;padding:0 4px;cursor:pointer;}
.product-popup{max-width:1100px;margin:0 auto;--thumb-gap:0.5rem;}
.product-popup .card{background:#fff;padding:1.5rem;border-radius:8px;box-shadow:0 2px 6px rgba(0,0,0,0.1);width:95vw;max-width:1100px;height:auto;max-height:90vh;overflow-y:auto;display:flex;}
.product-popup .row{display:flex;gap:2rem;align-items:stretch;flex-wrap:nowrap;}
.product-popup .col-md-6{flex:1;display:flex;flex-direction:column;}
.product-popup #media{position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;min-height:150px;}
.product-popup #media .image-bg{position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:center;filter:blur(20px);transform:scale(1.1);}
.product-popup #media img{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity 0.3s ease;}
.product-popup #media img.loaded{opacity:1;}
.product-popup #media .zoom-lens{position:absolute;top:0;left:0;width:var(--zoom-size,160px);height:var(--zoom-size,160px);border-radius:50%;border:2px solid rgba(255,255,255,0.9);box-shadow:0 12px 25px rgba(31,41,55,0.25);pointer-events:none;opacity:0;transform:scale(0.95);transition:opacity 0.2s ease,transform 0.2s ease;z-index:3;background-repeat:no-repeat;background-position:center;background-size:200% 200%;mix-blend-mode:normal;}
.product-popup #media .zoom-lens.visible{opacity:1;transform:scale(1);}
.product-popup #media.zoom-enabled{cursor:zoom-in;}
.product-popup #media.zoom-enabled.zooming{cursor:move;}
.product-popup .thumb-track .thumb img{opacity:0;transition:opacity 0.3s ease;}
.product-popup .thumb-track .thumb img.loaded{opacity:1;}
.product-popup #media .nav-btn{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,0.6);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2;}
.product-popup #media .nav-btn:hover{background:rgba(255,255,255,0.9);}
.product-popup #media .nav-btn.prev{left:0.5rem;}
.product-popup #media .nav-btn.next{right:0.5rem;}
.product-popup .thumb-wrapper{display:flex;align-items:center;margin-top:0.5rem;gap:var(--thumb-gap);--thumb-size:calc((100% - 64px - 5*var(--thumb-gap))/4);}
.product-popup .thumb-viewport{flex:1;overflow:hidden;}
.product-popup .thumb-track{display:flex;gap:var(--thumb-gap);transition:transform 0.3s ease;}
.product-popup .thumb-track .thumb{border:none;padding:0;flex:0 0 var(--thumb-size);height:var(--thumb-size);aspect-ratio:1;cursor:pointer;border-radius:0;overflow:hidden;}
.product-popup .thumb-track .thumb img{width:100%;height:100%;object-fit:cover;}
.product-popup .thumb-track .thumb.active{outline:2px solid var(--accent);}
.product-popup .thumb-nav{width:32px;height:var(--thumb-size);border:none;background:rgba(0,0,0,0.1);display:flex;align-items:center;justify-content:center;border-radius:4px;cursor:pointer;}
.product-popup .thumb-nav:disabled{visibility:hidden;}
.product-popup .info-col{display:flex;flex-direction:column;}
.product-popup .product-number{color:#666;margin:0.25rem 0;font-size:0.9rem;}
.product-popup .product-price{font-size:1.25rem;font-weight:700;margin:0.5rem 0;}
.product-popup .quantity-actions{margin-top:auto;display:flex;gap:1rem;align-items:center;justify-content:flex-end;}
.product-popup .quantity-control{display:flex;align-items:center;gap:0.5rem;}
.product-popup .quantity-control input{width:50px;text-align:center;}
@media (max-height:700px) and (min-width:769px){
  .product-popup .row{gap:1rem;}
}

@media (max-width:768px){
  #detail-overlay{align-items:flex-start;overflow-y:auto;}
  .product-popup .card{width:95vw;max-height:90vh;height:auto;overflow-y:auto;overflow-x:hidden;}
  .product-popup .row{flex-direction:column;height:auto;flex-wrap:nowrap;gap:0.25rem;}
  .product-popup .col-md-6{width:100%;}
  .product-popup #media .nav-btn{display:none;}
  .product-popup .info-col{margin-top:0;}
  .product-popup .quantity-actions{margin-top:1rem;justify-content:flex-start;}
}

@media (max-width: 1024px), (pointer:coarse){
  .product-popup #media .zoom-lens{display:none !important;}
  .product-popup #media.zoom-enabled,.product-popup #media.zoom-enabled.zooming{cursor:default;}
}

@media (max-width:600px){
  /* Mobile popups fill the viewport and allow vertical scrolling */
  #detail-overlay{align-items:flex-start;justify-content:flex-start;}
  #detail-overlay .popup{width:100%;max-width:100%;padding-left:0;padding-right:0;overflow-y:auto;overflow-x:hidden;}
  #detail-overlay .close{font-size:2rem;width:2.5rem;height:2.5rem;top:1rem;right:1rem;display:flex;align-items:center;justify-content:center;}
  .container.product-popup{width:100%;padding-left:0;padding-right:0;}
  .product-popup{width:100%;}
  .product-popup .card{width:100%;max-width:none;overflow-y:auto;overflow-x:hidden;padding-left:10px;padding-right:10px;-webkit-overflow-scrolling:touch;}
  .product-popup .row{flex-direction:column;flex-wrap:nowrap;}
  .product-popup .info-col{margin-top:0;padding:0 1rem 1rem;}
  .product-popup .col-md-6{flex:0 0 100%;width:100%;margin-bottom:20px;}
  .product-popup .col-md-6.gallery-col{max-width:100%;width:100%;flex-basis:auto;}
}

.detail-list{list-style:none;margin:0;padding:0;}
.detail-list li{margin-bottom:0.25rem;}
.detail-list li strong{margin-right:0.25rem;}

.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff8f8;
  padding: 1rem;
  box-shadow: 0 -2px 4px rgba(0,0,0,0.1);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
  z-index: 20;
  font-size: 0.9rem;
}
.cookie-banner button {
  background: #ffd4d4;
  border-radius: 4px;
  border: none;
  padding: 0.3rem 0.7rem;
  margin: 0 0.25rem;
}

.summary-bar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  max-width:1200px;
  margin:1rem auto;
  gap:1rem;
}


.preview{overflow-x:auto;}
.chain{position:relative;display:flex;flex-wrap:nowrap;gap:0.5rem;padding:0.5rem;background:#f8f9fa;border-radius:16px;justify-content:flex-start;align-items:center;--row-h:120px;width:max-content;}
.chain::before{content:"";position:absolute;left:0;top:calc(var(--row-h)/2 - 2px);height:4px;width:var(--line-len,100%);background:repeating-linear-gradient(to right,var(--string-color,#ccc) 0 2px,transparent 2px 4px);z-index:0;}
.chain::after{content:"";position:absolute;width:10px;height:10px;border-radius:50%;background:var(--string-color,#ccc);left:calc(var(--line-len,0px));top:calc(var(--row-h)/2 - 5px);transform:translateX(-50%);z-index:1;}
.chain > *{position:relative;z-index:1;}
.bead,.letter,.clip,.svgitem div{display:flex;align-items:center;justify-content:center;user-select:none;background:none;box-shadow:inset 2px 2px 3px rgba(255,255,255,0.6),inset -2px -2px 3px rgba(0,0,0,0.3),0 2px 4px rgba(0,0,0,0.2);}
.bead.over{opacity:0.5}
.warning{color:#c00;font-weight:bold;margin-top:0.5rem}
.bead-small{width:24px;height:24px;border-radius:50%;}
.bead-medium{width:32px;height:32px;border-radius:50%;}
.bead-large{width:40px;height:40px;border-radius:50%;}
.square{border-radius:4px;}
.clip{width:120px;height:120px;border-radius:50%;}
.bead{border-radius:50%;}
.letter{
  border-radius:4px;
  background:#fff;
  border:1px solid #ccc;
  color:#000;
  font-size:1rem;
  font-weight:bold;
}


.new-banner {
  position: absolute;
  bottom: 8px;
  left: 8px;
  background: var(--accent);
  color: var(--text);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.8rem;
}

#detail-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 3000; /* above navigation overlays */
}
#detail-overlay .popup {
  background: none;
  padding: 0;
  border-radius: 0;
  width: auto;
  max-width: none;
  min-width: 260px;
  height: auto;
  display:flex;
  flex-direction:column;
  position: relative;
}
#detail-content {
  flex:1;
  overflow:auto;
}
#detail-overlay .close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  cursor: pointer;
  font-weight: bold;
  font-size: 1.2rem;
  z-index:10;
}

@media (max-width: 600px) {
  #detail-overlay .popup {
    max-width: 95vw;
    width: 95%;
  }
}

.html-editor {
  margin-bottom: 0.5rem;
}
.html-editor .ql-editor{
  min-height:150px;
}
#prod-desc-editor{width:100%;}
.color.sel{outline:2px solid #333;}

.palette{display:flex;flex-wrap:wrap;gap:0.25rem;margin-bottom:0.5rem;}
.palette-section{margin-bottom:0.5rem;display:flex;flex-wrap:wrap;gap:0.25rem;align-items:center}
.palette-section h4{font-size:0.9rem;margin:0 0 0.25rem;width:100%;cursor:pointer;display:flex;align-items:center;gap:0.25rem}
.palette-section.collapsed{gap:0.25rem 0;}
.palette-section.collapsed .palette-item{display:none;}
.palette-section .toggle-icon{font-size:0.9rem;display:inline-block;width:1rem;text-align:center}
.chain-canvas{display:flex;gap:0.25rem;min-height:400px;padding:0.5rem;background:#f0f0f0;border-radius:4px;margin-bottom:0.5rem}
.configurator-wrapper{display:flex;flex-direction:column;gap:12px}
@media (min-width:769px){.configurator-wrapper{flex-direction:row;align-items:stretch}}
#palette{min-width:400px;max-height:400px;overflow-y:auto;flex-grow:1}
.info-text{background-color:#f4f4f4;padding:8px;border-radius:6px;margin-bottom:8px}
.config-help summary{cursor:pointer;font-weight:600}
.config-help[open]>div{margin-top:8px}
#chain-preview{width:100%;max-width:100%;margin-inline:0;box-sizing:border-box;padding:0;overflow-x:auto;overflow-y:hidden;height:130px;touch-action:pan-x;}
#chain-preview > *{max-width:none;height:100%;}
#chain-grid{display:flex;align-items:center;gap:8px;height:100%;}
#chain-grid .grid-item{flex:0 0 auto;}
#chain-metrics{display:flex;gap:1rem;justify-content:center;font-weight:600;margin:8px 0;align-items:center;}
#chain-metrics .preview-btn{background:none;border:none;cursor:pointer;font-size:1.2rem;}
#chain-metrics .preview-btn svg{width:24px;height:24px;display:block;}

#chain-preview-overlay{position:fixed;inset:0;background:transparent;display:flex;align-items:center;justify-content:center;z-index:1000;}
#chain-preview-overlay[hidden]{display:none;}
#chain-preview-overlay .product-popup{position:relative;}
#chain-preview-overlay .product-popup .card{display:flex;flex-direction:column;align-items:center;padding:1.5rem;}
#chain-preview-overlay #chain-media{width:100%;display:flex;align-items:center;justify-content:center;}
#chain-preview-overlay img{max-width:100%;max-height:80vh;object-fit:contain;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.3));}
#chain-preview-overlay .share-actions{display:flex;gap:0.5rem;margin-top:1rem;justify-content:center;}
#chain-preview-overlay .close{position:absolute;top:10px;right:10px;background:none;border:none;font-size:1.5rem;cursor:pointer;}
#chain-preview-overlay #preview-loading{margin-top:1rem;text-align:center;}

@media (max-width:768px){
  #chain-preview,
  .cat-tabs,
  .cat-panel,
  #summary{
    width:100%;
    max-width:100%;
    margin-inline:0;
    padding-inline: max(5px, env(safe-area-inset-left)) max(5px, env(safe-area-inset-right));
  }
}
.palette-item{cursor:grab;display:flex;align-items:center;justify-content:center;}
.palette-item.bead{width:32px;height:32px;border-radius:50%;border:1px solid #ccc;background:#fff;}
.palette-item.bead.square{border-radius:4px;}
.palette-item:active{cursor:grabbing}
.text-add{display:flex;gap:0.25rem;margin-bottom:0.5rem}

.scan-results{font-size:0.8rem;color:#555;margin-bottom:0.5rem;}

.order-table{width:100%;border-collapse:collapse;margin-top:0.5rem}
.order-table th,.order-table td{padding:4px;border-bottom:1px solid #ccc}
.order-table th{text-align:left}

.warenkorb-vorschau{
  border-radius:8px;
  box-shadow:0 0 6px rgba(0,0,0,0.1);
}

.preview-wrap{position:relative;display:inline-block;cursor:pointer;width:80px;height:80px;overflow:hidden;}
.preview-wrap img{display:block;width:100%;height:100%;object-fit:contain;}
.preview-wrap::after{content:'\1F50D';position:absolute;right:4px;bottom:4px;background:rgba(255,255,255,0.8);border-radius:50%;padding:2px;font-size:12px;}
.img-modal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.8);display:none;justify-content:center;align-items:center;z-index:1000;}
.img-modal img{max-width:90%;max-height:90%;object-fit:contain;}
.img-modal .close{position:absolute;top:10px;right:20px;color:#fff;font-size:2rem;cursor:pointer;}

.flash-message{
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  background:rgba(0,0,0,0.7);
  color:#fff;
  padding:0.5rem 1rem;
  border-radius:4px;
  opacity:0;  z-index:10000;
}
.flash-message.visible{opacity:1;}

.grid-item.dragging{
  opacity:0.5;
  transform:scale(1.1);
}
.grid-item.drag-over{
  outline:2px dashed #333;
}
.grid-item, .grid-item .touch-shield {
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
}

#summary label.warn{
  position:relative;
  z-index:2;
}

.item-thumb{width:80px;height:80px;object-fit:contain;}

#recent-elements{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0 0 8px;}
#recent-elements .recent-title{font-size:0.85rem;font-weight:600;margin-right:6px;}
#recent-elements .recent-list{display:flex;gap:6px;flex-wrap:wrap;}
#recent-elements .recent-list img{width:32px;height:32px;object-fit:contain;cursor:pointer;}
#recent-elements .name-box{display:flex;align-items:center;gap:4px;}

:root{--tabsH:0px;}

#configurator-main{
  max-width:var(--content-max,1200px);
  width:100%;
  margin-inline:auto;
  padding-inline:clamp(12px,4vw,24px);
}

.cat-tabs{
  position:sticky;
  top:calc(var(--header-height)+env(safe-area-inset-top));
  z-index:20;
  background:var(--bg);
  margin-inline:0;
  width:100%;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.cat-tabs.cat-tiles .cat-tile{
  border:none;
  padding:8px;
  position:relative;
  aspect-ratio:1/1;
  min-height:72px;
  border-radius:6px;
  overflow:hidden;
  background:#ddd;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.cat-tabs.cat-tiles .cat-preview{display:flex;gap:2px;width:100%;height:100%;}
.cat-tabs.cat-tiles .cat-preview img{flex:1;width:100%;height:100%;object-fit:contain;}
.cat-tabs.cat-tiles .cat-tile span{
  position:absolute;
  inset:auto 0 0 0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:4px;
  background:rgba(0,0,0,0.4);
  color:#fff;
  font-weight:600;
  text-align:center;
}
.cat-tabs.cat-tiles .cat-tile[aria-selected="true"],
.cat-tabs.cat-tiles .cat-tile.active{outline:2px solid var(--accent);background:rgba(0,0,0,0.05);}
.sub-tabs{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(80px,1fr));
  gap:6px;
  margin:4px 0;
  font-size:0.9em;
  position:static;
}
.cat-tabs button{
  border:none;
  background:none;
  padding:4px 8px;
  cursor:pointer;
  white-space:nowrap;
  text-align:center;
  height:32px;
  line-height:1.2;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-grow:1;
  flex-basis:0;
}
.sub-tabs button{height:36px;padding:4px;}
.cat-tabs button[aria-selected="true"],
.cat-tabs button.active{border-bottom:2px solid var(--accent);font-weight:bold;}

/* layout tweaks for non-tile tab bars are no longer needed */

#catPanel,
.cat-panel{
  margin-top:calc(var(--tabsH) + 4px);
  display:grid;
  width:100%;
  max-width:100%;
  margin-inline:0;
  justify-content:center;
  align-content:start;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:8px;
  background:#fff;
}

.info-text,
.cat-tabs,
.cat-panel,
#summary{margin-bottom:8px;}

#summary{width:100%;max-width:100%;margin-inline:0;margin-bottom:0;position:sticky;bottom:0;z-index:30;display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:var(--bg);padding:8px;}
#summary .btn{margin:0;}
.cat-panel .pal-item{
  aspect-ratio:1/1;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  border:1px solid rgba(20,20,20,0.08);
  background:rgba(255,255,255,0.85);
  box-shadow:0 1px 2px rgba(15,15,15,0.05);
  transition:transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  will-change:transform;
}
.cat-panel .pal-item img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  opacity:0;
  margin:auto;
}
.cat-panel .pal-item img.is-loaded{opacity:1;}
.cat-panel .pal-item:hover,
.cat-panel .pal-item:focus-visible{
  transform:translateY(-3px) scale(1.03);
  box-shadow:0 10px 18px rgba(0,0,0,0.14);
  border-color:var(--accent,#f8a9b5);
}
.cat-panel .pal-item:active{
  transform:scale(0.97);
}
@media (prefers-reduced-motion: reduce){
  .cat-panel .pal-item{transition:none;}
  .cat-panel .pal-item:hover,
  .cat-panel .pal-item:focus-visible,
  .cat-panel .pal-item:active{transform:none;}
}

#catPanel.small-items{grid-template-columns:repeat(auto-fill,minmax(75px,1fr));}
#catPanel img{transform:none !important;}
#catPanel.medium-items{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));}

@media (max-width:480px){
  .cat-panel{grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:8px;}
  #catPanel.small-items{grid-template-columns:repeat(auto-fill,minmax(60px,1fr));}
  #catPanel.medium-items{grid-template-columns:repeat(auto-fill,minmax(70px,1fr));}
}


@media (max-width:768px){
  body{overflow-x:hidden;}
  .configurator-wrapper{align-items:center;}
}

.compact-cart{padding-block:0.5rem;}
.compact-cart h2{font-size:1.1rem;margin-bottom:0.25rem;}
#cart-summary{margin:0;font-size:0.9rem;}

img.shadow{box-shadow:0 2px 6px rgba(0,0,0,0.3);}
img.soft{border-radius:8px;}
img.float-left{float:left;margin:0 1rem 0.5rem 0;}
img.float-right{float:right;margin:0 0 0.5rem 1rem;}
#share-modal{position:fixed;inset:0;background:rgba(0,0,0,0.6);display:none;align-items:center;justify-content:center;z-index:4000;}
#share-modal .share-dialog{background:#fff;padding:1rem;border-radius:8px;max-width:300px;width:90%;text-align:center;}
#share-modal .share-options{display:flex;flex-wrap:wrap;gap:0.5rem;justify-content:center;margin:0.5rem 0;}
#share-modal .share-options a,#share-modal .share-options button{padding:0.5rem 0.75rem;border:1px solid #ccc;border-radius:4px;background:#f9f9f9;text-decoration:none;font-size:14px;}
#share-modal .share-email{display:flex;gap:0.5rem;margin-top:0.5rem;}
#share-modal .share-email input{flex:1;padding:0.25rem;}

.order{
  --primary:#ef4444;
  --primary-light:#f87171;
  --dark:#1c212e;
  --gray-dark:#3f4656;
  --gray:#6c7486;
  --gray-light:#cdd9ed;
  --white:#fff;
  --green:#16bf78;
  --sand:#fbbf24;
  --sand-light:#fbbf24;
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  border:0;
  background:var(--dark);
  position:relative;
  height:63px;
  width:240px;
  padding:0;
  outline:none;
  cursor:pointer;
  border-radius:32px;
  -webkit-mask-image:-webkit-radial-gradient(#fff,#000);
  -webkit-tap-highlight-color:transparent;
  overflow:hidden;
  transition:all;
  margin-top:0.5rem;
}

.order span{
  --o:1;
  position:absolute;
  left:0;
  right:0;
  text-align:center;
  top:19px;
  line-height:24px;
  color:var(--white);
  font-size:16px;
  opacity:var(--o);
  transition:opacity 0.3s ease;
}

.order span.default{
  transition-delay:0.3s;
}

.order span.success{
  --offset:16px;
  --o:0;
}

.order span.success svg{
  width:12px;
  height:10px;
  display:inline-block;
  vertical-align:top;
  fill:none;
  margin:7px 0 0 4px;
  stroke:var(--green);
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:16px;
  stroke-dashoffset:var(--offset);
  transition:stroke-dashoffset 0.3s ease;
}

.order:active{
  transform:scale(0.96);
}

.order .lines{
  opacity:0;
  position:absolute;
  height:3px;
  background:var(--white);
  border-radius:2px;
  width:6px;
  top:30px;
  left:100%;
  box-shadow:15px 0 0 var(--white),30px 0 0 var(--white),45px 0 0 var(--white),60px 0 0 var(--white),75px 0 0 var(--white),90px 0 0 var(--white),105px 0 0 var(--white),120px 0 0 var(--white),135px 0 0 var(--white),150px 0 0 var(--white),165px 0 0 var(--white),180px 0 0 var(--white),195px 0 0 var(--white),210px 0 0 var(--white),225px 0 0 var(--white),240px 0 0 var(--white),255px 0 0 var(--white),270px 0 0 var(--white),285px 0 0 var(--white),300px 0 0 var(--white),315px 0 0 var(--white),330px 0 0 var(--white);
}

.order .back,
.order .box{
  --start:var(--white);
  --stop:var(--gray-light);
  border-radius:2px;
  background:linear-gradient(var(--start),var(--stop));
  position:absolute;
}

.order .truck{
  width:60px;
  height:41px;
  left:100%;
  z-index:1;
  top:11px;
  position:absolute;
  transform:translateX(24px);
}

.order .truck::before,
.order .truck::after{
  --r:-90deg;
  content:"";
  height:2px;
  width:20px;
  right:58px;
  position:absolute;
  display:block;
  background:var(--white);
  border-radius:1px;
  transform-origin:100% 50%;
  transform:rotate(var(--r));
}

.order .truck::before{
  top:4px;
}

.order .truck::after{
  --r:90deg;
  bottom:4px;
}

.order .truck .back{
  left:0;
  top:0;
  width:60px;
  height:41px;
  z-index:1;
}

.order .truck .fronts{
  overflow:hidden;
  position:absolute;
  border-radius:2px 9px 9px 2px;
  width:26px;
  height:41px;
  left:60px;
}

.order .truck .fronts::before,
.order .truck .fronts::after{
  content:"";
  position:absolute;
  display:block;
}

.order .truck .fronts::before{
  height:13px;
  width:2px;
  left:0;
  top:14px;
  background:linear-gradient(var(--gray),var(--gray-dark));
}

.order .truck .fronts::after{
  border-radius:2px 9px 9px 2px;
  background:var(--primary);
  width:24px;
  height:41px;
  right:0;
}

.order .truck .fronts .window{
  overflow:hidden;
  border-radius:2px 8px 8px 2px;
  background:var(--primary-light);
  transform:perspective(4px) rotateY(3deg);
  width:22px;
  height:41px;
  position:absolute;
  top:0;
  z-index:1;
  transform-origin:0 50%;
}

.order .truck .fronts .window::before,
.order .truck .fronts .window::after{
  content:"";
  position:absolute;
  right:0;
}

.order .truck .fronts .window::before{
  top:0;
  bottom:0;
  width:14px;
  background:var(--dark);
}

.order .truck .fronts .window::after{
  width:14px;
  top:7px;
  height:4px;
  position:absolute;
  background:rgba(255,255,255,0.14);
  transform:skewY(14deg);
  box-shadow:0 7px 0 rgba(255,255,255,0.14);
}

.order .truck .light{
  width:3px;
  height:8px;
  left:83px;
  transform-origin:100% 50%;
  position:absolute;
  border-radius:2px;
  transform:scaleX(0.8);
  background:#f0dc5f;
}

.order .truck .light::before{
  content:"";
  height:4px;
  width:7px;
  opacity:0;
  transform:perspective(2px) rotateY(-15deg) scaleX(0.94);
  position:absolute;
  transform-origin:0 50%;
  left:3px;
  top:50%;
  margin-top:-2px;
  background:linear-gradient(90deg,#f0dc5f,rgba(240,220,95,0.7),rgba(240,220,95,0));
}

.order .truck .light.top{
  top:4px;
}

.order .truck .light.bottom{
  bottom:4px;
}

.order .box{
  --start:var(--sand-light);
  --stop:var(--sand);
  width:21px;
  height:21px;
  right:100%;
  top:21px;
}

.order .box::before,
.order .box::after{
  content:"";
  top:10px;
  position:absolute;
  left:0;
  right:0;
}

.order .box::before{
  height:3px;
  margin-top:-1px;
  background:rgba(0,0,0,0.1);
}

.order .box::after{
  height:1px;
  background:rgba(0,0,0,0.15);
}

.order.animate .default{
  --o:0;
  transition-delay:0s;
}

.order.animate .success{
  --offset:0;
  --o:1;
  transition-delay:7s;
}

.order.animate .success svg{
  transition-delay:7.3s;
}

.order.animate .truck{
  -webkit-animation:truck 10s ease forwards;
  animation:truck 10s ease forwards;
}

.order.animate .truck::before{
  -webkit-animation:door1 2.4s ease forwards 0.3s;
  animation:door1 2.4s ease forwards 0.3s;
}

.order.animate .truck::after{
  -webkit-animation:door2 2.4s ease forwards 0.6s;
  animation:door2 2.4s ease forwards 0.6s;
}

.order.animate .truck .light::before,
.order.animate .truck .light::after{
  -webkit-animation:light 10s ease forwards;
  animation:light 10s ease forwards;
}

.order.animate .box{
  -webkit-animation:box 10s ease forwards;
  animation:box 10s ease forwards;
}

.order.animate .lines{
  -webkit-animation:lines 10s ease forwards;
  animation:lines 10s ease forwards;
}

@-webkit-keyframes truck{
  10%,30%{transform:translateX(-164px);}
  40%{transform:translateX(-104px);}
  60%{transform:translateX(-224px);}
  75%,100%{transform:translateX(24px);}
}

@keyframes truck{
  10%,30%{transform:translateX(-164px);}
  40%{transform:translateX(-104px);}
  60%{transform:translateX(-224px);}
  75%,100%{transform:translateX(24px);}
}

@-webkit-keyframes lines{
  0%,30%{opacity:0;transform:scaleY(0.7) translateX(0);}
  35%,65%{opacity:1;}
  70%{opacity:0;}
  100%{transform:scaleY(0.7) translateX(-400px);}
}

@keyframes lines{
  0%,30%{opacity:0;transform:scaleY(0.7) translateX(0);}
  35%,65%{opacity:1;}
  70%{opacity:0;}
  100%{transform:scaleY(0.7) translateX(-400px);}
}

@-webkit-keyframes light{
  0%,30%{opacity:0;transform:perspective(2px) rotateY(-15deg) scaleX(0.88);}
  40%,100%{opacity:1;transform:perspective(2px) rotateY(-15deg) scaleX(0.94);}
}

@keyframes light{
  0%,30%{opacity:0;transform:perspective(2px) rotateY(-15deg) scaleX(0.88);}
  40%,100%{opacity:1;transform:perspective(2px) rotateY(-15deg) scaleX(0.94);}
}

@-webkit-keyframes door1{
  30%,50%{transform:rotate(32deg);}
}

@keyframes door1{
  30%,50%{transform:rotate(32deg);}
}

@-webkit-keyframes door2{
  30%,50%{transform:rotate(-32deg);}
}

@keyframes door2{
  30%,50%{transform:rotate(-32deg);}
}

@-webkit-keyframes box{
  8%,10%{transform:translateX(40px);opacity:1;}
  25%{transform:translateX(112px);opacity:1;}
  26%{transform:translateX(112px);opacity:0;}
  27%,100%{transform:translateX(0px);opacity:0;}
}

@keyframes box{
  8%,10%{transform:translateX(40px);opacity:1;}
  25%{transform:translateX(112px);opacity:1;}
  26%{transform:translateX(112px);opacity:0;}
  27%,100%{transform:translateX(0px);opacity:0;}
}