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;
}

.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;
}

@media (max-width:480px){
  :root{--beadClamp: var(--beadSize-xs);}
}

@media (min-width:769px){
  :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);
}

.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;}

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

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);
  text-decoration: underline;
}

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;
}
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;
}

.hero-slider {
  position: relative;
  overflow: hidden;
  min-height: 350px;
}
.hero-slider img {
  width: 100%;
  display: block;
  border-radius: 8px;
  object-fit: cover;
  height: 350px;
}
.slide {
  display: none;
  position: relative;
}
.slide.active {
  display: block;
}

@media (max-width: 768px) {
  .hero-slider {
    min-height: auto;
    margin-bottom: 0.5rem;
  }
  .hero-slider img {
    width: 100%;
    height: auto;
    transform: scale(1.5);
    transform-origin: center;
  }
}
.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 .intro-wrapper{flex-direction:column;}
  #intro .intro-wrapper .intro-text,
  #intro .intro-wrapper .featured-slider{flex:1 0 100%;width:100%;}
}
.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%;opacity:0;}
.featured-slider .slide.active{opacity:1;}
.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;}
@media (max-width:600px){
  #intro{flex-direction:column;}
}

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;
}

.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;}

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

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

.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;
}

.product-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;}

/* product filter bar */
.filter-bar {
  position: sticky;
  top: var(--header-height, 80px);
  background: #fff;
  z-index: 40;
  padding: 0.5rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.filter-bar .chips {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.25rem;
}
.filter-bar button {
  border: 1px solid #ccc;
  background: #f5f5f5;
  padding: 0.25rem 0.75rem;
  border-radius: 16px;
  cursor: pointer;
}
.filter-bar button.active {
  background: #333;
  color: #fff;
}

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

.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));
  }
}

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%;}

@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;}
.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 .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){
  .product-popup .card{width:95vw;height:90vh;max-height:90vh;overflow-y:auto;}
  .product-popup .row{flex-direction:column;height:auto;}
  .product-popup #media .nav-btn{display:none;}
  .product-popup .info-col{margin-top:1rem;}
  .product-popup .quantity-actions{margin-top:1rem;justify-content:flex-start;}
}

.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}
#chain-preview{width:100%;max-width:100%;margin-inline:0;box-sizing:border-box;padding:0 10px;display:flex;justify-content:center;}
#chain-preview > *{max-width:100%;height:auto;}

@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));
  }
  #chain-preview > *{width:100%;}
}
.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;}
.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;}

#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;}