/* =========================
   EXTRAS.CSS - Spezielle Features
   Cart Flyout, Wishlist Template, etc.
   ========================= */



/* ============================
   Favoriten/Wishlist Template
   ============================ */
.ultra-wish-template .uw-hero {
  position: relative;
  aspect-ratio: 21/7;
  overflow: hidden;
}

.ultra-wish-template .uw-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ultra-wish-template .uw-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.25));
}

.ultra-wish-template .uw-hero__inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  padding: 24px;
}

.ultra-wish-template .uw-hero__title {
  font-size: clamp(28px, 3.2vw, 44px);
  margin: 0 0 6px;
}

.ultra-wish-template .uw-hero__subtitle {
  font-size: clamp(14px, 1.6vw, 18px);
  opacity: .95;
  margin: 0;
}

.ultra-wish-template .uw-pagehead {
  padding: 28px 0 12px;
  text-align: center;
}

.ultra-wish-template .uw-pagehead__title {
  margin: 0;
  font-size: clamp(24px, 3vw, 36px);
}

.ultra-wish-template .uw-content {
  max-width: 800px;
  margin: 18px auto 10px;
  padding: 0 16px;
}

/* Blocktitel für Wishlist Page */
.ultra-wish-page .ultra-block__title {
  font-weight: 700;
  font-size: clamp(18px, 2.2vw, 22px);
  margin: 22px auto 12px;
  max-width: 1200px;
  padding: 0 16px;
}

/* Grid Host (wird per Shortcode/JS mit [products] ersetzt) */
#ultra-wishlist-grid.uw-grid {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

/* Leerzustand (falls keine IDs) */
.uw-empty {
  display: grid;
  place-items: center;
  text-align: center;
  gap: 10px;
  padding: 40px 0;
}

.uw-empty__icon {
  width: 52px;
  height: 52px;
  background: #111;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23fff" d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 6 4 4 6.5 4c1.74 0 3.41.81 4.5 2.09C12.09 4.81 13.76 4 15.5 4 18 4 20 6 20 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>') center / contain no-repeat;
}

.uw-empty h3 {
  margin: .4em 0 .2em;
  font-size: 20px;
}

.uw-empty p {
  margin: 0 0 10px;
  color: #555;
}

.uw-empty__cta {
  border-radius: 10px;
  background: #111;
  color: #fff;
  padding: 10px 14px;
  text-decoration: none;
  display: inline-block;
}

.uw-empty__cta:hover {
  background: #000;
  text-decoration: none;
}



/* ============================
   Off-Canvas Generic
   ============================ */
.ultra-offc {
  position: fixed;
  inset: 0;
  z-index: 1100;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}

.ultra-offc.active {
  opacity: 1;
  pointer-events: auto;
}

.ultra-offc__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
}

.ultra-offc__panel {
  position: absolute;
  right: -10px;
  top: 0;
  bottom: 0;
  width: min(420px, 92vw);
  background: #fff;
  box-shadow: -10px 0 30px rgba(0,0,0,.25);
  padding: 16px;
  transform: translateX(10px);
  transition: transform .2s;
}

.ultra-offc.active .ultra-offc__panel {
  transform: translateX(0);
  right: 0;
}

/* ============================
   Utility Classes
   ============================ */
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}