@charset "utf-8";
/* YOUNISONO: Oberflächen, Typografie und responsive Produktdarstellung. */

.ys-skip-link { position: fixed; top: 0.75rem; left: 1rem; z-index: 2000; padding: 0.75rem 1rem; color: #343e40; background: #f4efe6; border: 2px solid #59676d; border-radius: 3px; transform: translateY(-200%); }
.ys-skip-link:focus { transform: none; color: #343e40; }
#main-content { scroll-margin-top: var(--navbar-height); }

.ys-cookie-modal .modal-dialog { max-width: 560px; }
.ys-cookie-modal .modal-content {
  color: #465052;
  background: #f0ece4 url('../images/nature/faserpapier.webp') center / 720px;
  border: 1px solid rgba(86, 96, 96, .16);
  border-radius: 3px;
  padding: clamp(1rem, 4vw, 2rem);
  box-shadow: 0 20px 70px rgba(30, 42, 42, .15);
}
.ys-cookie-modal .modal-header, .ys-cookie-modal .modal-footer { border: 0; }
.ys-cookie-modal .modal-header { justify-content: flex-start !important; }
.ys-cookie-modal .modal-title { font-family: 'Fraunces', serif; font-size: clamp(1.8rem, 5vw, 2.6rem); font-weight: 300; line-height: 1.18; }
.ys-cookie-modal .modal-body { line-height: 1.65; }
.ys-cookie-modal .form-check { margin-top: 1.25rem; }
.ys-cookie-modal .form-check-input:checked { background-color: #687c79; border-color: #687c79; }
.ys-cookie-modal a { color: inherit; text-underline-offset: .2em; }
.ys-cookie-modal .btn { min-height: 44px; padding: .7rem 1.5rem; border-radius: 2px; background: #65737b; border-color: #65737b; }
.ys-cookie-modal .btn:hover { background: #505f66; border-color: #505f66; }

/* Kontogestaltung, aktiviert über customerAccountV01.ui.pageClass. */
.ys-account-paper { color: #495052; font-family: 'BarlowSemiCondensed', sans-serif; }
.customer-account-page.ys-account-paper { padding: clamp(1rem, 4vw, 3rem) 0 5rem; min-height: 85vh; background: linear-gradient(rgba(229, 233, 229, .62), rgba(229, 233, 229, .62)), url('../images/nature/faserpapier.webp') center / 850px; }
.ys-account-paper h1, .ys-account-paper .modal-title { font-family: 'Fraunces', Georgia, serif; font-weight: 300; font-size: clamp(2rem, 5vw, 3.1rem); letter-spacing: -.035em; line-height: 1.18; }
.ys-account-paper h2, .ys-account-paper h3, .ys-account-paper h4, .ys-account-paper h5 { font-family: 'Fraunces', Georgia, serif; font-weight: 300; }
.ys-account-paper .modal-dialog { max-width: 540px; }
.ys-account-paper .modal-content, .ys-account-paper .bg-white, .ys-account-paper .border.rounded-3 { background: linear-gradient(rgba(245, 242, 236, .5), rgba(245, 242, 236, .5)), url('../images/nature/faserpapier.webp') center / 720px !important; border: 1px solid #d6d5cd !important; border-radius: 5px !important; box-shadow: none !important; }
.ys-account-paper .modal-content { padding: clamp(.6rem, 3vw, 1.5rem); }
.ys-account-paper .modal-header { border: 0; padding-bottom: 1.5rem; }
.ys-account-paper .modal-title { font-size: clamp(2rem, 5vw, 2.6rem); }
.ys-account-paper .modal-body { padding-bottom: 1.5rem; line-height: 1.6; }
.ys-account-paper .form-control, .ys-account-paper .form-select { color: #414a4b; background-color: #fffdf8; border-color: #c9ccc4; border-radius: 3px; min-height: 46px; max-width: 100% !important; }
.ys-account-paper .form-control:focus, .ys-account-paper .form-select:focus { border-color: #7e928e; box-shadow: 0 0 0 .2rem rgba(109, 137, 128, .14); }
.ys-account-paper .form-label { font-weight: 500; }
.ys-account-paper .btn:not(.btn-link) { border-radius: 3px; min-height: 44px; padding: .65rem 1.1rem; font-size: 1rem; }
.ys-account-paper .btn-primary { --bs-btn-bg: #64767b; --bs-btn-border-color: #64767b; --bs-btn-hover-bg: #51676d; --bs-btn-hover-border-color: #51676d; --bs-btn-active-bg: #51676d; --bs-btn-active-border-color: #51676d; }
.ys-account-paper .btn-outline-secondary { --bs-btn-color: #52696c; --bs-btn-border-color: #8d9d9b; --bs-btn-hover-bg: #64767b; --bs-btn-hover-border-color: #64767b; }
.ys-account-paper .btn-link, .ys-account-paper a { color: #536b70; text-underline-offset: .2em; }
.ys-account-paper .nav-link { padding: .75rem .9rem; border-radius: 3px; }
.ys-account-paper .nav-link.active { background: #d8e1de; color: #3b5759; }
.ys-account-paper .text-danger { color: #875570 !important; }
.ys-account-paper .alert { border-radius: 3px; }
.ys-account-paper .alert-info, .ys-account-paper .alert-success { background: #e0e8e1; border-color: #c8d6cb; color: #3f5951; }
.ys-account-paper .alert-danger, .ys-account-paper .alert-warning { background: #efe3e7; border-color: #dcc7d0; color: #784a61; }
.ys-account-paper .table { --bs-table-color: #495052; --bs-table-bg: transparent; }
.ys-account-paper td { overflow-wrap: anywhere; }
.ys-account-paper .text-muted { color: #66706e !important; }
@media (max-width: 575.98px) {
  .ys-account-paper .modal-dialog { margin: .75rem; }
  .ys-account-paper .nav { gap: .25rem !important; }
  .ys-account-paper .nav-link { padding: .65rem; }
}

/* =========================================
   ROOT VARIABLEN & GLOBAL THEME
   ========================================= */
:root {
  /* Navbar */
  --navbar-height: 54px;
  --ys-navbar-bg: #f2ecdf;  /* warmes Naturpapier */

  /* YOUNISONO Theme */
  --ys-body-bg: var(--ys-navbar-bg);    /* warmes Naturpapier */
  --ys-section-bg-dark: #d5d4d4;       /* dunkler Lila-Ton */
  --ys-section-bg-soft: #f3f3f3;        /* etwas weicherer Lila-Ton */

  --ys-card-bg: #ffffff;               /* Karten (Produkte) */
  --ys-card-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);

  --ys-text-main: #202020;
  --ys-text-muted: #797979;

  --ys-accent: #0e0e0e;
  --ys-accent-soft: rgba(27, 27, 27, 0.18);


  --ys-section-bg-rose: #ab6faf; 
  --ys-section-bg-lila: #54336a; 
  --ys-section-bg-deep: #454458; 

  /* YOUNISONO Footer */
  --ys-footer-bg: #162630; 
  --ys-footer-text: #e3ddd3; 
}

/* BACKGROUND COLORS */
.younisono-navbar-bg { 
  background-color: var(--ys-navbar-bg);
}
/* Heller Inhaltsbereich vor dem dunklen Seiten-Untergrund */
.younisono-main-view-bg { 
  background-color: var(--ys-body-bg);
}

/* Dunkler Untergrund bleibt auch am Scrollrand hinter dem Footer sichtbar */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: var(--ys-footer-bg);
}
body {
  color: var(--ys-text-main);
  font-family: 'BarlowSemiCondensed', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Main wird unter die Navbar geschoben */
main {
  padding-top: var(--navbar-height);
}


/* GLOBALER OFFSET für SCROLL TO ITEM */
html{
  scroll-padding-top: 110px; /* Navbar-Höhe */
  scroll-behavior: smooth;  /* optional */
}




/* ================================
   Number input – native steppers ausblenden
   ================================ */

/* Firefox */
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* Chrome, Edge, Safari */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}





/* ================= YOUNISONO FOOTER ================= */
.ys-footer {
  background: linear-gradient(rgba(12, 24, 33, 0.72), rgba(12, 24, 33, 0.72)), var(--ys-footer-bg) url('../images/nature/naturpapier-nachtblau.webp') center / 900px auto;
  color: var(--ys-footer-text);
  border-top: 3px solid #b9afa4;
  padding: clamp(4rem, 7vw, 6rem) 0 2rem;
  font-family: 'BarlowSemiCondensed', sans-serif;
}
.ys-footer__logo { display: inline-flex; flex-direction: column; align-items: center; gap: 1rem; margin-bottom: 1.75rem; }
.ys-footer__sign { width: 40px; height: auto; }
.ys-footer__wordmark { width: 180px; height: auto; filter: brightness(0) invert(1); opacity: 0.86; }
.ys-footer__brand p { color: #c4c7c7; font-size: 1.05rem; line-height: 1.7; margin: 0; }
.ys-footer__heading { color: #f4eee5; font-family: inherit; font-size: 0.85rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; margin: 0 0 1rem; }
.ys-footer nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0.4rem 0; color: var(--ys-footer-text); font-size: 1.05rem; line-height: 1.4; text-decoration: none; }
.ys-footer nav a:hover { color: #fffaf2; text-decoration: underline; text-underline-offset: 0.3em; text-decoration-color: #9caaaF; }
.ys-footer a:focus-visible { outline: 2px solid #e3d5c4; outline-offset: 4px; border-radius: 2px; }
.ys-footer__service { margin-top: 3rem; }
.ys-footer__legal { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(227, 221, 211, 0.18); color: #b5bec2; font-size: 0.85rem; line-height: 1.6; }
.ys-footer__legal p { margin: 0 0 0.35rem; }
.ys-footer__withdrawal-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.58rem 1.05rem;
  border: 1px solid #8c9ba4;
  border-radius: 2px;
  background: rgba(227, 221, 211, 0.07);
  color: #f4eee5;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.4;
  text-decoration: none;
}

.ys-footer__withdrawal-button:hover,
.ys-footer__withdrawal-button:focus-visible {
  background: rgba(227, 221, 211, 0.16);
  color: #fffaf2;
  text-decoration: none;
}


/* ================= YOUNISONO SECTIONS ================= */
.ys-section-dark {
  background-color: var(--ys-section-bg-dark);
  color: var(--ys-text-main);
  padding: 4rem 0;
}

.ys-section-soft {
  background-color: var(--ys-section-bg-soft);
  color: var(--ys-text-main);
  padding: 4rem 0;
}

.ys-section-rose {
  background-color: var(--ys-section-bg-rose);
  color: var(--ys-text-main);
}

.ys-section-lila {
  background-color: var(--ys-section-bg-lila);
  color: var(--ys-text-main);
}

.ys-section-deep {
  background-color: var(--ys-section-bg-deep);
  color: white;
}


.ys-bg-grey-soft{
  background-color: var( --ys-section-bg-soft);
}
.ys-bg-grey-dark{
  background-color: var( --ys-section-bg-dark);
}




/* Text in Sektionen */
.ys-section-dark .text-muted,
.ys-section-soft .text-muted {
  color: var(--ys-text-muted) !important;
}

/* „Panel“ im Abschnitt (z.B. Inhalt mit Schatten) */
.ys-panel {
  background-color: transparent; /* bei Bedarf auf var(--ys-section-bg-soft) oder weiß ziehen */
  border-radius: 1.5rem;
}

/* Produktkarten weiterhin weiß und schwebend */
.ys-product-card {
  background-color: var(--ys-card-bg);
  border-radius: 1rem;
  box-shadow: var(--ys-card-shadow);
  border: none;
}


/* ================= YOUNISONO SIDEBARS ================= */
.ys-drawer {
  --bs-offcanvas-width: min(28rem, 100vw);
  --ys-drawer-paper: 225, 219, 207;
  --ys-drawer-ink: #554b48;
  --ys-drawer-accent: #716255;
  --ys-drawer-edge: rgba(85, 75, 72, 0.18);
  color: var(--ys-drawer-ink);
  background: linear-gradient(rgba(var(--ys-drawer-paper), 0.84), rgba(var(--ys-drawer-paper), 0.84)), url('../images/nature/faserpapier.webp') center / 750px auto;
  font-family: 'BarlowSemiCondensed', sans-serif;
  font-size: 1.05rem;
  line-height: 1.6;
  border: 0 !important;
}
.ys-drawer-wishlist { --ys-drawer-paper: 235, 221, 233; --ys-drawer-ink: #584452; --ys-drawer-accent: #88517e; --ys-drawer-edge: rgba(112, 69, 102, 0.18); }
.ys-drawer-cart { --ys-drawer-paper: 225, 228, 226; --ys-drawer-ink: #405652; --ys-drawer-accent: #516f68; --ys-drawer-edge: rgba(64, 86, 82, 0.18); }
.ys-drawer .offcanvas-header { padding: 2rem 1.75rem 1.5rem; gap: 0.75rem; }
.ys-drawer .offcanvas-title { font-family: 'Fraunces', Georgia, serif; font-weight: 300; font-size: clamp(2rem, 6vw, 2.6rem); letter-spacing: -0.045em; line-height: 1.2; }
.ys-drawer .offcanvas-title .badge { vertical-align: middle; font-family: 'BarlowSemiCondensed', sans-serif; font-size: 0.9rem; letter-spacing: 0; padding: 0.4em 0.65em; }
.ys-drawer .badge { color: var(--ys-drawer-ink); background: var(--ys-drawer-edge) !important; border-radius: 2px; font-weight: 400; }
.ys-drawer .btn-close { flex-shrink: 0; width: 44px; height: 44px; padding: 0; margin: 0 -0.5rem 0 0; background-size: 14px; opacity: 0.65; }
.ys-drawer .offcanvas-body { padding: 0 1.75rem 2rem; }
.ys-drawer .offcanvas-footer { padding: 1rem 1.75rem max(1.25rem, env(safe-area-inset-bottom)); border-top: 1px solid var(--ys-drawer-edge); }
.ys-drawer a:not(.btn), .ys-drawer .nav-link { color: var(--ys-drawer-ink); }
.ys-drawer a:not(.btn):hover, .ys-drawer .nav-link:hover { color: var(--ys-drawer-accent); }
.ys-drawer :is(a, button):focus-visible { outline: 2px solid var(--ys-drawer-accent); outline-offset: 3px; box-shadow: none; }
.ys-drawer-navigation > li:first-child .nav-link { padding: 0.5rem 0; }
.ys-drawer-category { margin-top: 1.75rem; }
.ys-drawer-category-title { display: block; font-family: 'Fraunces', Georgia, serif; font-size: 2rem; font-weight: 300; letter-spacing: -0.04em; line-height: 1.2; }
.ys-drawer-series { display: block; margin-top: 0.5rem; color: var(--ys-drawer-accent); font-size: 0.8rem; letter-spacing: 0.09em; text-transform: uppercase; }
.ys-drawer .ys-sidebar-submenu a { display: flex; align-items: center; min-height: 44px; padding: 0.35rem 0; font-size: 1.05rem; font-style: normal; color: var(--ys-drawer-ink); }
.ys-drawer .ys-sidebar-submenu a:hover { color: var(--ys-drawer-accent); text-decoration: underline; text-underline-offset: 0.25em; }
.ys-drawer-company { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--ys-drawer-edge); }
.ys-drawer-company .nav-link, .ys-drawer .offcanvas-footer a { min-height: 44px; display: flex; align-items: center; }
.ys-drawer .mini-scroll { max-height: none; overflow: visible; }
.ys-drawer .list-group-item { padding: 1.25rem 0; color: inherit; background: transparent; border: 0; border-bottom: 1px solid var(--ys-drawer-edge); border-radius: 0; }
.ys-drawer-product, .ys-drawer-copy { min-width: 0; }
.ys-drawer-product-name { font-size: 1.15rem; font-weight: 500; line-height: 1.4; overflow-wrap: anywhere; }
.ys-drawer-meta { margin-top: 0.45rem; font-size: 0.9rem; line-height: 1.6; overflow-wrap: anywhere; }
.ys-drawer-prices { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; margin-top: 0.75rem; font-size: 1.15rem; line-height: 1.5; font-variant-numeric: tabular-nums; }
.ys-drawer-prices small { display: block; font-size: 0.8rem; font-weight: 400; }
.ys-drawer-prices span { white-space: nowrap; }
.ys-drawer-prices sup { font-size: 0.65em; top: -0.4em; }
.ys-drawer-line-total { text-align: right; font-weight: 600; }
.ys-drawer-image, .ys-drawer .cart-thumb { flex-shrink: 0; width: 76px; height: 88px; display: grid; place-items: center; object-fit: contain; background: #fff; border-radius: 2px; overflow: hidden; }
.ys-drawer-image img { object-fit: contain; max-width: 100%; max-height: 100%; }
.ys-drawer .btn:not(.btn-close) { min-height: 44px; border-radius: 2px; font-size: 1rem; }
.ys-drawer-add { padding: 0.4rem 0; color: var(--ys-drawer-accent); border: 0; text-align: left; text-decoration: underline; text-underline-offset: 0.25em; }
.ys-drawer-add:hover { color: var(--ys-drawer-ink); }
.ys-drawer-remove { width: 44px; padding: 0; color: var(--ys-drawer-accent); border: 0; }
.ys-drawer-remove:hover { color: var(--ys-drawer-ink); background: var(--ys-drawer-edge); }
.ys-drawer .alert-info { --bs-alert-color: var(--ys-drawer-ink); --bs-alert-bg: rgba(255, 255, 255, 0.24); --bs-alert-border-color: var(--ys-drawer-edge); border-radius: 2px; line-height: 1.65; }
.ys-drawer-cart .alert-info { --bs-alert-bg: rgba(194, 215, 201, 0.65); --bs-alert-border-color: #a0b5aa; border-left: 3px solid #718d7d; }
.ys-drawer .btn-dark { --bs-btn-bg: var(--ys-drawer-accent); --bs-btn-border-color: var(--ys-drawer-accent); --bs-btn-hover-bg: var(--ys-drawer-ink); --bs-btn-hover-border-color: var(--ys-drawer-ink); }
.ys-drawer-cart .btn-dark { --bs-btn-bg: #606f78; --bs-btn-border-color: #606f78; --bs-btn-hover-bg: #4d5d67; --bs-btn-hover-border-color: #4d5d67; --bs-btn-active-bg: #4d5d67; --bs-btn-active-border-color: #4d5d67; }
.ys-drawer .btn-warning { --bs-btn-color: var(--ys-drawer-ink); --bs-btn-bg: rgba(255, 255, 255, 0.2); --bs-btn-border-color: var(--ys-drawer-accent); --bs-btn-hover-color: var(--ys-drawer-ink); --bs-btn-hover-bg: rgba(255, 255, 255, 0.4); --bs-btn-hover-border-color: var(--ys-drawer-accent); --bs-btn-active-bg: var(--ys-drawer-edge); --bs-btn-active-border-color: var(--ys-drawer-accent); }
.ys-drawer-empty { padding: 3rem 0; text-align: center; color: var(--ys-drawer-accent); }
.ys-drawer-empty > .bi { display: block; font-size: 2.5rem; margin-bottom: 1.25rem; }
.ys-drawer-empty p { margin: 0; font-size: 1.2rem; }
@media (max-width: 575.98px) {
  .ys-drawer .offcanvas-header { padding: 1.5rem 1.25rem 1rem; }
  .ys-drawer .offcanvas-body { padding: 0 1.25rem 1.5rem; }
  .ys-drawer .offcanvas-footer { padding-left: 1.25rem; padding-right: 1.25rem; }
  .ys-drawer-image, .ys-drawer .cart-thumb { width: 60px; height: 76px; }
}

.ys-drawer-cart .offcanvas-body { padding-bottom: calc(4rem + env(safe-area-inset-bottom)); }

.ys-sidebar-dark {
  background-color: var(--ys-section-bg-dark);
  color: var(--ys-text-main);
}
.ys-sidebar-soft {
  background-color: var(--ys-section-bg-soft);
  color: var(--ys-text-main);
}
/* Text in SIDEBARS */
.ys-sidebar-dark .text-muted,
.ys-sidebar-soft .text-muted {
  color: var(--ys-text-muted) !important;
}



/* --- Sidebar Submenu (Kerzen) --- */
.ys-sidebar-submenu {
	list-style: none;
	padding-left: 0rem; /* schöne Einrückung */
	margin-bottom: 0;
}

.ys-sidebar-submenu li {
  color: var(--ys-text-main);
	line-height: 1.4;
}

.ys-sidebar-submenu a {
	display: block;
	font-size: 0.95rem;
  font-style:italic;
	color: var(--ys-text-main);
	text-decoration: none;
	padding: 0.15rem 0;
	transition: color 0.2s ease, transform 0.2s ease;
}

.ys-sidebar-submenu a:hover {
	color: var(--ys-text-main);
}





/* ALT
/********************************************
 * YOUNISONO HERO / SWIPER IM FRAME
 ********************************************/

/* ======================================
   HERO · Fullcover Swiper unter Navbar
   ====================================== */
.swiper.fullscreen-swiper {
  width: 100%;
  height: calc(100vh - var(--navbar-height));  /* direkt unter Navbar */
  position: relative;
  overflow: hidden;
  background-color: var(--ys-body-bg);         /* falls das Bild nicht 100% füllt */
}

/* Alles im Hero auf volle Höhe */
.swiper.fullscreen-swiper .swiper-wrapper,
.swiper.fullscreen-swiper .swiper-slide,
.swiper.fullscreen-swiper .slide-content {
  width: 100%;
  height: 100%;
}

/* Hintergrundbild: echtes Full-Cover */
.swiper.fullscreen-swiper .slide-image {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

/* Text im Hero */
.swiper.fullscreen-swiper .slide-text {
  position: absolute;
  z-index: 2;
  color: #ffffff;
  text-align: left;
  max-width: 520px;
}

/* Mobile / Default */
.swiper.fullscreen-swiper .slide-text {
  top: 20%;
  left: 8%;
}

/* Größere Screens leicht nach rechts/unten setzen */
@media (min-width: 768px) {
  .swiper.fullscreen-swiper .slide-text {
    top: 24%;
    left: 12%;
  }
}
@media (min-width: 1200px) {
  .swiper.fullscreen-swiper .slide-text {
    top: 26%;
    left: 15%;
  }
}

/* Pfeile im Hero */
.swiper.fullscreen-swiper .swiper-button-next,
.swiper.fullscreen-swiper .swiper-button-prev {
  color: #d0cfe4 !important;
  opacity: 0.3;
  transform: scale(0.5);
  font-size: 0.7rem;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.swiper.fullscreen-swiper .swiper-button-next:hover,
.swiper.fullscreen-swiper .swiper-button-prev:hover {
  opacity: 0.7;
  transform: scale(0.6);
}

/* Pagination (falls wieder aktiv) */
.swiper.fullscreen-swiper .swiper-pagination-bullet {
  width: 9px !important;
  height: 9px !important;
  margin: 0 7px !important;
  background: #bbb7e4 !important;
  opacity: 1 !important;
}
.swiper.fullscreen-swiper .swiper-pagination-bullet-active {
  background: #ffffff !important;
}

/* Scroll-Down-Hinweis am unteren Rand */
.swiper.fullscreen-swiper .swiper-scroll-down {
  opacity: 0.5;
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.7rem;
  font-weight: 500;
  color: #c3bbdd;
  cursor: pointer;
  z-index: 11;
  transition: color 0.3s ease;
}
.swiper.fullscreen-swiper .swiper-scroll-down:hover {
  opacity: 0.8;
  color: #ffffff;
}
/*



/********************************************
 * YOUNISONO HERO / SWIPER IM FRAME
 * + WebP/Picture Support (ohne Background-Look zu verlieren)
 ********************************************/

/* ======================================
   HERO · Fullcover Swiper unter Navbar
   ====================================== */
.swiper.fullscreen-swiper {
  width: 100%;
  height: calc(100vh - var(--navbar-height));  /* direkt unter Navbar */
  position: relative;
  overflow: hidden;
  background-color: var(--ys-body-bg);         /* falls das Bild nicht 100% füllt */
}

/* Alles im Hero auf volle Höhe */
.swiper.fullscreen-swiper .swiper-wrapper,
.swiper.fullscreen-swiper .swiper-slide,
.swiper.fullscreen-swiper .slide-content {
  width: 100%;
  height: 100%;
}

/* slide-content ist die Referenz für absolute Layer */
.swiper.fullscreen-swiper .slide-content {
  position: relative;
  overflow: hidden; /* wichtig für cover-look */
}

/* --------------------------------------
   IMAGE LAYER
   A) Alt: background-image auf .slide-image
   B) Neu: <picture><img> als Full-Cover
   -------------------------------------- */

/* A) Background-Layer (bestehende Variante) */
.swiper.fullscreen-swiper .slide-image {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}

/* B) Picture/Image-Layer (empfohlen) */
.swiper.fullscreen-swiper .slide-picture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Manche Browser behandeln <picture> wie inline -> block erzwingen */
.swiper.fullscreen-swiper picture.slide-picture {
  display: block;
}

/* Das echte Bild verhält sich wie background-size:cover */
.swiper.fullscreen-swiper .slide-picture .slide-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 50%;
  transform: translateZ(0); /* minimiert Jitter bei Animation/Swipe */
}

/* Wenn du beides (A + B) im Markup hast: Picture gewinnt */
.swiper.fullscreen-swiper .slide-picture ~ .slide-image {
  display: none;
}

/* Optional: leichte Verdunklung für bessere Lesbarkeit (falls gewünscht)
   -> einfach pro Slide eine Klasse setzen: .has-hero-overlay */
.swiper.fullscreen-swiper .swiper-slide.has-hero-overlay .slide-content::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1; /* unter Text, über Bild */
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.10) 0%,
    rgba(0,0,0,0.25) 55%,
    rgba(0,0,0,0.18) 100%
  );
}

/* --------------------------------------
   TEXT LAYER
   -------------------------------------- */
.swiper.fullscreen-swiper .slide-text {
  position: absolute;
  z-index: 2; /* über Overlay */
  color: #ffffff;
  text-align: left;
  max-width: 520px;
}

/* Mobile / Default */
.swiper.fullscreen-swiper .slide-text {
  top: 20%;
  left: 8%;
}

/* Größere Screens leicht nach rechts/unten setzen */
@media (min-width: 768px) {
  .swiper.fullscreen-swiper .slide-text {
    top: 24%;
    left: 12%;
  }
}
@media (min-width: 1200px) {
  .swiper.fullscreen-swiper .slide-text {
    top: 26%;
    left: 15%;
  }
}





/********************************************
 * YOUNISONO · IMAGE STRIP
 * (Grid-basierter Bildstreifen)
 ********************************************/

/* Container */
.image-strip {
  display: grid;
  width: 100%;
  background-color: #000;        /* füllt evtl. Lücken sauber */
  gap: 0;
}

/* Default: XS → 3 Spalten */
.image-strip {
  grid-template-columns: repeat(3, 1fr);
}

/* MD → 2 Spalten */
@media (min-width: 768px) {
  .image-strip {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* LG+ → eine Zeile, Bilder nebeneinander */
@media (min-width: 992px) {
  .image-strip {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }
}

/* Einzelne Kachel */
.image-strip-item {
  position: relative;
  width: 100%;
  min-height: 250px;             /* Grundhöhe */
  overflow: hidden;
}

/* Picture-Wrapper (für WebP/JPG) */
.image-strip-item picture {
  position: absolute;
  inset: 0;
  display: block;
}

/* Bild selbst */
.image-strip-item img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 50%;
}

/* Optional: leicht ruhiger Hover (falls gewünscht) */
.image-strip-item img {
  transition: transform 0.4s ease;
}
.image-strip-item:hover img {
  transform: scale(1.03);
}

/* Optional: Höhenanpassung für größere Screens */
@media (min-width: 1200px) {
  .image-strip-item {
    min-height: 300px;
  }
}

/* XS / Mobile: nur 3 Bilder anzeigen */
.image-strip-item:nth-child(4) {
  display: none;
}

/* LG+ (Desktop): alle Bilder anzeigen */
@media (min-width: 992px) {
  .image-strip-item:nth-child(4) {
    display: block;
  }
}








/* --------------------------------------
   NAV / CONTROLS
   -------------------------------------- */

/* Pfeile im Hero */
.swiper.fullscreen-swiper .swiper-button-next,
.swiper.fullscreen-swiper .swiper-button-prev {
  color: #d0cfe4 !important;
  opacity: 0.3;
  transform: scale(0.5);
  font-size: 0.7rem;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 12; /* über Bild/Overlay/Text */
}
.swiper.fullscreen-swiper .swiper-button-next:hover,
.swiper.fullscreen-swiper .swiper-button-prev:hover {
  opacity: 0.7;
  transform: scale(0.6);
}

/* Pagination (falls wieder aktiv) */
.swiper.fullscreen-swiper .swiper-pagination {
  z-index: 12;
}
.swiper.fullscreen-swiper .swiper-pagination-bullet {
  width: 9px !important;
  height: 9px !important;
  margin: 0 7px !important;
  background: #bbb7e4 !important;
  opacity: 1 !important;
}
.swiper.fullscreen-swiper .swiper-pagination-bullet-active {
  background: #ffffff !important;
}

/* Scroll-Down-Hinweis am unteren Rand */
.swiper.fullscreen-swiper .swiper-scroll-down {
  opacity: 0.5;
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.7rem;
  font-weight: 500;
  color: #c3bbdd;
  cursor: pointer;
  z-index: 12;
  transition: color 0.3s ease, opacity 0.3s ease;
}
.swiper.fullscreen-swiper .swiper-scroll-down:hover {
  opacity: 0.8;
  color: #ffffff;
}

/* --------------------------------------
   OPTIONAL: Reduziere Motion für User, die es wünschen
   -------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .swiper.fullscreen-swiper .swiper-button-next,
  .swiper.fullscreen-swiper .swiper-button-prev,
  .swiper.fullscreen-swiper .swiper-scroll-down {
    transition: none !important;
  }
}






/* ======================================
   BRILLINI HERO · Floating Image-Card
   ====================================== */

.brillini-hero-card {
  width: 100%;
  max-width: 100%;
  margin: 2.5rem auto 0;              /* Abstand nach oben */
  padding: 0;
  border-radius: 1.5rem;              /* gleiche Rundung wie Candelini-Card */
  background-color: var(--ys-card-bg);/* weiß */
  box-shadow: var(--ys-card-shadow);  /* starker Shadow wie bei Produkten/Swiper */
  overflow: hidden;                   /* Bild sauber clippen */
  position: relative;
}

/* Bild füllt die komplette Card, wie ein Swiper-Slide */
.brillini-hero-img {
  width: 100%;
  height: clamp(300px, 50vh, 850px);  /* ähnliche Höhe wie Candelini-Slider */
  display: block;
  object-fit: contain;                  /* echtes Cover */
  object-position: 50% 50%;     /* mittig ausrichten */
  transform-origin: center center;
  transition: transform 0.45s ease-out;

    /* Default-Fallbacks */
  --ys-scale-xs: 1;
  --ys-scale-sm: 1;
  --ys-scale-md: 1;
  --ys-scale-lg: 1;
  --ys-scale-xl: 1;
  --ys-scale-xxl: 1;
}

  /* XS: <576px */
  @media (max-width: 575.98px) {
    .brillini-hero-img {
      transform: scale(var(--ys-scale-xs));
      height:400px;
    }
  }

  /* SM: 576–767px */
  @media (min-width: 576px) and (max-width: 767.98px) {
    .brillini-hero-img {
      transform: scale(var(--ys-scale-sm));
    }
  }

  /* MD: 768–991px */
  @media (min-width: 768px) and (max-width: 991.98px) {
    .brillini-hero-img{
      transform: scale(var(--ys-scale-md));
    }
  }

  /* LG: 992–1199px */
  @media (min-width: 992px) and (max-width: 1199.98px) {
    .brillini-hero-img{
      transform: scale(var(--ys-scale-lg));
    }
  }

  /* XL: 1200–1399px */
  @media (min-width: 1200px) and (max-width: 1399.98px) {
    .brillini-hero-img {
      transform: scale(var(--ys-scale-xl));
    }
  }

  /* XXL: ≥1400px */
  @media (min-width: 1400px) {
    .brillini-hero-img {
      transform: scale(var(--ys-scale-xxl));
      height:800px;
    }
  }










/* ================= Warenkorb Desktop (Card-Zeilen) ================= */
.table-cart{
  border-collapse: separate;          /* nötig für Radius/Abstand */
  border-spacing: 0 .75rem;           /* vertikaler Abstand zwischen den "Karten" */
  width: 100%;
}

/* Kopfzeile */
.table-cart thead th{
  background: #cecece;                /* Grau der Bildbühne */
  border: 0;
  padding: .75rem;
  font-weight: 600;
}

/* Kopf-Radius */
.table-cart thead th:first-child{ border-top-left-radius: .5rem; }
.table-cart thead th:last-child { border-top-right-radius: .5rem; }
.table-cart thead th:first-child{ border-bottom-left-radius: .5rem; }
.table-cart thead th:last-child { border-bottom-right-radius: .5rem; }


/* Zeileninhalte als "Card" */
.table-cart tbody td{
  background: #e6e5e5;                /* hellgrau wie mobile */
  border: 0 !important;               /* alle Tabellenlinien sicher aus */
  padding: 1rem .75rem;
  vertical-align: middle;
  background-clip: padding-box;       /* verhindert Bleeding an Kanten */
}

/* Eckenradius pro Zeile (nur äußere Zellen abrunden) */
.table-cart tbody tr td:first-child{
  border-top-left-radius: .75rem;
  border-bottom-left-radius: .75rem;
  padding-left: 1.25rem;
}
.table-cart tbody tr td:last-child{
  border-top-right-radius: .75rem;
  border-bottom-right-radius: .75rem;
  padding-right: 1.25rem;
}

/* Haarlinie fixen (linke Kante jeder Zelle ab Spalte 2 "übermalen") */
.table-cart tbody td + td{
  box-shadow: -1px 0 0 #e6e5e5 inset; /* gleiche Farbe wie Hintergrund */
}

/* Hover-Zustand: Hintergrund + Kantenfarbe konsistent */
.table-cart tbody tr:hover td{
  background: #ecebeb;
  transition: background-color .15s ease;
}
.table-cart tbody tr:hover td + td{
  box-shadow: -1px 0 0 #ecebeb inset;
}

/* Globaler Border-Killer als Zusatzsicherheit (Bootstrap Tabellenreset) */
.table.table-cart > :not(caption) > * > *{
  border: 0 !important;
}

/* etwas mehr Luft auf großen Screens */
@media (min-width: 992px){
  .table-cart tbody tr td{ padding: 1rem 1rem; }
}








/* =================  CHECKOUT WARENKORB ================== */
.checkout-text-grey{
  color:#888888;
}
.checkout-progress {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 2rem 0 1.5rem;
}

/* --- Grundlinie (grauer Hintergrund) --- */
.checkout-progress::before {
  content: "";
  position: absolute;
  top: 30%;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: rgba(200, 198, 198, 0.7); /* gray-300 */
  transform: translateY(-50%);
  z-index: 0; /* unter alles */
}

/* --- Step-Container --- */
.checkout-step {
  position: relative;
  flex: 1;
  text-align: center;
  z-index: 2; /* über der Linie */
}

/* --- Step-Kreis (Zahl oder Icon) --- */
.checkout-step .circle {
  position: relative; /* nötig, damit z-index greift */
  z-index: 3;         /* über allen Linien */
  width: 46px;
  height: 46px;
  line-height: 46px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 400;
  font-size: 1.3rem;
  background-color: #fff;
  border: 3px solid #dee2e6;
  color: #6c757d;
  transition: all 0.25s ease;
}

/* --- Erledigte Steps (grün) --- */
.checkout-step.done .circle {
  background-color: #5b2d85; /* Bootstrap success */
  border-color: #5b2d85;
  color: #fff;
}

/* --- Aktiver Step (gelb) --- */
.checkout-step.active .circle {
  background-color: #b833cd; /* Bootstrap warning */
  border-color: #b833cd;
  color: #ffffff;
}

/* --- Step-Label unterhalb des Kreises --- */
.checkout-step .label {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: #6c757d;
  white-space: normal;
}

/* --- Verbindungslinie zwischen erledigten Steps (grün) --- */
.checkout-step.done::after {
  content: "";
  position: absolute;
  top: 30%;
  left: 50%;
  width: 100%;
  height: 4px;
  background-color: #5b2d85;
  transform: translateY(-50%);
  z-index: 1; /* unterhalb der Kreise, oberhalb der grauen Linie */
}

/* --- Responsive Anpassung für kleine Screens --- */
@media (max-width: 576px) {
  .checkout-step .label {
    font-size: 0.75rem;
  }
  .checkout-step .circle {
    width: 38px;
    height: 38px;
    line-height: 38px;
    font-size: 0.85rem;
  }
}

/* =================  CHECKOUT WARENKORB ================== */






/* SHADOWS */
.shadow-strong {
  box-shadow: 2px 4px 20px rgba(0, 0, 0, 0.4); /* Stronger shadow */
}

.text-shadow {
  text-shadow: 2px 4px 12px rgba(0,0,0,0.6);
}
.text-shadow-small {
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}







/*  BUTTONS In der Seite */
.btn-mehrentdecken-site {
  background-color: rgba(243, 243, 243, 0.1); /* halbtransparent weiß */
  color: rgba(255, 255, 255, 0.8);            /* helle, gut lesbare Schrift */
  border: 1px solid rgba(255, 255, 255, 0.6); /* subtile Linie */
  border-radius: 9px;
  font-size: 0.75rem;
  padding: 9px 18px;
  text-transform: uppercase;
  margin-top: 0px;
  transition: all 0.25s ease;
}
/* Hover-Effekt */
.btn-mehrentdecken-site:hover {
  background-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 1.0);
  border-color: rgba(255, 255, 255, 1.0);
}




/* BACKGROUNDS */
.bg-light-grey {
  background-color: #eeeeee;
}
.bg-pink {
  background: radial-gradient(
    circle at center,
    #e84393 0%,
    #c23672 42%,
    #6d214f 88%
  );
  color: white;
}
.bg-grey-gradient {
  background: radial-gradient(
    circle at center,
    #ffffff 0%,
    #eaeaea 32%,
    #c8c8c8 88%
  );
  color: white;
}


/* PARALLAX BACKGROUNDS */
.wildblumen-section {
  background-image: url("../images/backgrounds/wildblumen-4.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;   /* „Überflug“-Effekt */
  min-height: 55vh;
}

.kerzengruppe-section {
  width: 100vw;
  min-height: 35vh;
  background-image: url("../images/backgrounds/kerzen-gruppe-1.jpg");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% auto;
}















/* SECTION Elements */
.section-headline-text {
  font-size:3.2rem;
  line-height:2.6rem;
}
.section-subline-text {
  font-size:1.7rem;
}
.section-h3-headline-text {
  font-size:2.8rem;
  line-height:2.4rem;
}
.section-h3-subline-text {
  font-size:1.5rem;
}



.section-button-mehr-entdecken {
  font-size:0.72rem;
  padding-left:28px;
  padding-right:28px;
  padding-top:10px;
  padding-bottom:10px;
  background-color: rgba(243, 243, 243, 0.102); 
}
.section-button-mehr-entdecken:hover {
  font-size:0.72rem;
  padding-left:28px;
  padding-right:28px;
  padding-top:10px;
  padding-bottom:10px;
  background-color: rgba(243, 243, 243, 0.276); 
}
@media (min-width: 1900px) { 
  .section-headline-text {
    font-size:3.6rem;
    line-height:2.8rem;
  } 
  .section-subline-text {
    font-size:2.0rem;
  }
}













/* ================= NAVBAR ================= */
.custom-navbar {
  min-height: 54px;
  height: 54px;
  padding-top: 0;
  padding-bottom: 0;
  display: flex;
  align-items: center;
}

/* LOGOS */
.younisono-logo {
  height: 100px;
  width: auto;
  display: block;
}
.younisono-typo-logo {
  width: clamp(112px, 13.6vw, 128px);
  height: auto;
  display: block;
}

.custom-search-icon {
  transform: none !important;
}

/* TEXTS SETTINGS */
.text-anthrazit {
  color: rgb(75, 75, 75) !important; 
}

/* PRODUCT GROUPS */
.product-group-image {
  height: clamp(260px, 24vw, 350px);
  overflow: hidden;
  border-radius: 8px;
}
.product-group-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* Header: ruhige Symbole und papierfarbene aktive Zustände. */
.icon-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.custom-navbar .icon-btn { min-width: clamp(26px, 8vw, 36px); min-height: 44px; border: 0; border-radius: 50%; color: #655e58; }
.custom-navbar .icon-btn .bi { font-size: 1.35rem; color: #655e58 !important; }
.custom-navbar .icon-btn:hover,
.custom-navbar .icon-btn.heart-active,
.custom-navbar .icon-btn.cart-active,
.custom-navbar .icon-btn.user-auth { background: linear-gradient(rgba(225, 221, 213, 0.8), rgba(225, 221, 213, 0.8)), url('../images/nature/faserpapier.webp') center / 600px auto; }
.custom-navbar .icon-btn.cart-active .bi,
.custom-navbar .icon-btn.user-auth .bi { color: #4b7e35 !important; }
.custom-navbar .icon-btn.heart-active .bi { color: #a13b92 !important; }
.custom-navbar .icon-btn:focus-visible { outline: 2px solid #81747b; outline-offset: 2px; box-shadow: none; }
.icon-badge { position: absolute; top: 0; right: -0.2rem; min-width: 1rem; padding: 0.15rem 0.25rem; border-radius: 1rem; background: #ddd5ce; color: #514943; font-size: 0.65rem; line-height: 1; text-align: center; }
.cart-active .icon-badge { background-color: #d8e7cd; color: #3e692f; }
.heart-active .icon-badge { background-color: #ead7e7; color: #783168; }
@media (max-width: 575.98px) {
  .custom-navbar > .container-fluid > .d-flex > .d-flex { gap: 0.125rem !important; }
}





/********************************************
 * YOUNISONO · COVER IMAGE
 * full width · reduzierte Höhe
 ********************************************/

.younisono-cover-frame{
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* Responsive Höhe der Bildbühne */
.cover-65{
  height: 65vh;        /* Höhe relativ zum Viewport */
}

/* Bild-Layer */
.younisono-cover-picture{
  position: absolute;
  inset: 0;
  display: block;
}

/* entspricht:
   background-size: cover;
   background-position: 50% 50%;
*/
.younisono-cover-img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 50%;
}









/* Typo im Hero und Buttons responsiv */
.younisono-headline-1 {
  font-size: 2.4rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "liga", "kern";
}
.younisono-subline-1 {
  font-size: 1.3rem;
  margin-left:4px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "liga", "kern";
}
.younisono-cover-text{
  top:7%; 
  left:50%; 
  transform:translateX(-50%);
  z-index:10; 
}



.btn-mehrentdecken {
  background-color: rgba(255, 255, 255, 0.085); /* halbtransparent weiß */
  color: rgba(255, 255, 255, 0.953);            /* helle, gut lesbare Schrift */
  border: 1px solid rgba(255, 255, 255, 0.726); /* subtile Linie */
  border-radius: 7px;
  font-size: 0.70rem;
  padding: 8px 20px;
  text-transform: uppercase;
  margin-top: 18px;
  transition: all 0.25s ease;
}
/* Hover-Effekt */
.btn-mehrentdecken:hover {
  background-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 1.0);
  border-color: rgba(255, 255, 255, 1.0);
}



/* Small (≥576px) */
@media (min-width: 576px) {
  .custom-navbar {
    min-height: 54px;
    height: 54px;
  }
  .younisono-headline-1 {
    font-size: 2.5rem;
  }
  .younisono-subline-1 {
    font-size: 1.4rem;
    margin-left:4px;
  }
  .younisono-cover-image{
    background-position:50% 50%; 
    background-size:cover;
  }
  .younisono-cover-text{
    top:7%; 
  }
  .btn-mehrentdecken {
    font-size: 0.7rem;
    padding: 8px 18px;
    margin-top:20px;
  }
}

/* Medium (≥768px) */
@media (min-width: 768px) {
  .custom-navbar {
    min-height: 54px;
    height: 54px;
  }
  .younisono-headline-1 {
    font-size: 2.5rem;
  }
  .younisono-subline-1 {
    font-size: 1.45rem;
    margin-left:4px;
  }
  .younisono-cover-text{
    top:5%; 
  }
  .btn-mehrentdecken {
    font-size: 0.7rem;
    padding: 8px 18px;
    margin-top:20px;
  }
}

/* Large (≥992px) */
@media (min-width: 992px) {
  :root {
    --navbar-height: 56px;
  }
  .custom-navbar {
    min-height: 56px;
    height: 56px;
  }
  .younisono-headline-1 {
    font-size: 2.7rem;
  }
  .younisono-subline-1 {
    font-size: 1.5rem;
  }
  .btn-mehrentdecken {
    font-size: 0.73rem;
    padding: 8px 18px;
    margin-top: 22px;
  }
}

/* Extra Large (≥1200px) */
@media (min-width: 1200px) {
  .custom-navbar {
    min-height: 56px;
    height: 56px;
  }
  .younisono-headline-1 {
    font-size: 3.0rem;
  }
  .younisono-subline-1 {
    font-size: 1.6rem;
  }
  .younisono-cover-text{
    top:18%; 
  }
  .btn-mehrentdecken {
    font-size: 0.74rem;
    padding: 9px 18px;
    margin-top: 24px;
  }
}

/* Optional: Remove default navbar-brand spacing */
.navbar-brand {
  margin: 0;
  padding: 0;
}
.navbar-toggler {
  border: none;
  outline: none;
}
.navbar-toggler:focus,
.navbar-toggler:active {
  outline: none;
  box-shadow: none;
}
.navbar-toggler-icon {
  transform: scale(1.00);
  color:black;
}








/* =========================================================
   ARTICLES · UNIQUES · CART/WISHLIST (scoped)
   ========================================================= */
.articles-uniques {
  --au-gray-100: #ffffff;
  --au-gray-200: #f8f9fa;
  --au-gray-300: #e7e8e8ff;
  --au-gray-700: #505050ff;
  --au-dark:     #212529;
  --au-success:  #198754;
  --au-danger:   #dc3545;
  --au-pink:     #f6d6f5ff;
}

/* Utilities */
.articles-uniques .articles-uniques-bg-pink{ background-color: var(--au-pink) !important; }

/* Produktkarte & Bildbox */
.articles-uniques .articles-uniques-card{
  position: relative;
  background-color: var(--au-gray-300);
  border: none;
  border-radius: .6rem;
}
.articles-uniques .articles-uniques-square{
  aspect-ratio: 1 / 1;
  position: relative;
  background-color: var(--au-gray-100);
  border-radius: .85rem;
  overflow: hidden;
}
.articles-uniques .articles-uniques-square > img{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
}

/* Auswahl-Toggles (Bootstrap .btn-check) */
.articles-uniques .btn-check + .btn{ transition: all .1s ease-in-out; }
.articles-uniques .btn-check:checked + .btn{
  background-color: var(--au-gray-700) !important;
  border-color: #000 !important;
  color: #fff !important;
}
.articles-uniques .btn-check + .btn:hover{
  box-shadow: 0 .5rem .5rem rgba(0,0,0,.3);
}

/* Swiper Controls (floating) */
.articles-uniques .articles-uniques-swiper-controls{
  position: absolute;
  left: 0; right: 0; bottom: -8px;
  display: flex; align-items: center; justify-content: center;
  gap: .5rem; padding: 0 .5rem;
  z-index: 5; pointer-events: none;
}
.articles-uniques .articles-uniques-swiper-controls .swiper-button-prev,
.articles-uniques .articles-uniques-swiper-controls .swiper-button-next,
.articles-uniques .articles-uniques-swiper-controls .swiper-pagination{
  pointer-events: auto;
}
.articles-uniques .articles-uniques-swiper-controls .swiper-button-prev,
.articles-uniques .articles-uniques-swiper-controls .swiper-button-next{
  position: static; width: auto; height: auto; margin: 0; padding: 0 40px;
  transform: translateY(-8px);
}
.articles-uniques .articles-uniques-swiper-controls .swiper-button-prev:after,
.articles-uniques .articles-uniques-swiper-controls .swiper-button-next:after{
  color: rgba(79,79,79,.40); font-size: 14px; font-weight: 700;
}
.articles-uniques .articles-uniques-swiper-controls .swiper-pagination{
  position: static; display: flex; align-items: center; justify-content: center;
}
.articles-uniques .articles-uniques-swiper-controls .swiper-pagination-bullet{
  width: 6px; height: 6px; background: #6c757d; opacity: .45; margin: 0 3px !important;
  transition: opacity .2s ease;
}
.articles-uniques .articles-uniques-swiper-controls .swiper-pagination-bullet-active{
  background: rgba(79,79,79,.72); opacity: 1;
}

/* Warenkorb-Steuerbox */
.articles-uniques .articles-uniques-cartbox{
  display: flex; align-items: center; gap: 4px;
  height: 40px; padding: 0 12px;
  border: 1px solid var(--au-dark);
  border-radius: .375rem;
  background: #fff;
  transition: background-color .15s ease-in-out, border-color .15s ease-in-out;
}
.articles-uniques .articles-uniques-cartbox:hover{ background: var(--au-dark); }

/* PLUS / MINUS */
.articles-uniques .articles-uniques-step{
  display: flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; font-size: .7rem; font-weight: 500;
  border: 1px solid rgba(0,0,0,.25); border-radius: .25rem;
  background: #fff; color: var(--au-dark); padding: 0; cursor: pointer;
}

/* Anzahl-Eingabe */
.articles-uniques .articles-uniques-qty{
  width: 38px; height: 30px;
  text-align: center; font-size: 1rem; font-weight: 600;
  border: 0; background: transparent; color: var(--au-dark);
  outline: none; box-shadow: none; appearance: textfield; -webkit-appearance: textfield;
}
.articles-uniques .articles-uniques-qty::-webkit-outer-spin-button,
.articles-uniques .articles-uniques-qty::-webkit-inner-spin-button{
  -webkit-appearance: none; margin: 0;
}

/* Hover-Invert */
.articles-uniques .articles-uniques-cartbox:hover .articles-uniques-qty{ color:#fff; }

/* Submit-Icon */
.articles-uniques .articles-uniques-submit{
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 36px; margin-left: 8px;
  border: 0; background: transparent; color: var(--au-dark); cursor: pointer; padding: 0;
}
.articles-uniques .articles-uniques-cartbox:hover .articles-uniques-submit{ color:#fff; }
.articles-uniques .articles-uniques-submit i{ font-size: 1.4rem; }

/* Status: bereits im Warenkorb */
.articles-uniques .articles-uniques-cartbox.is-in-cart{
  background: var(--au-success); border-color: var(--au-success);
}
.articles-uniques .articles-uniques-cartbox.is-in-cart .articles-uniques-qty,
.articles-uniques .articles-uniques-cartbox.is-in-cart .articles-uniques-submit{ color:#fff; }
.articles-uniques .articles-uniques-cartbox.is-in-cart .articles-uniques-step{
  background:#fff; color: var(--au-dark);
}

/* „Reserviert“ sichtbar rot */
.articles-uniques .btn-intocart[disabled],
.articles-uniques .btn-intocart:disabled{
  background-color: var(--au-danger) !important;
  border-color: var(--au-danger) !important;
  color:#fff !important; opacity: 1 !important; cursor: not-allowed;
}

/* Micro-Feedback */
.articles-uniques .articles-uniques-step:active{ transform: scale(.96); }
.articles-uniques .btn-intocart:active{ transform: scale(.98); }







/* STANDARD ARTICLES */
.ys-standard-cart-step {
    flex: 0 0 3rem;
}








/* FONTS local loaded */
@font-face {
  font-family: 'Marvel';
  src: url('../fonts/Marvel-Regular.ttf') format('truetype');
  font-weight: normal;
}
.font-marvel {
  font-family: 'Marvel', sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "liga", "kern";
}
@font-face {
  font-family: 'Marvel';
  src: url('../fonts/Marvel-Bold.ttf') format('truetype');
  font-weight: bold;
}

/* BARLOW FONT  */
@font-face {
  font-family: 'BarlowSemiCondensed';
  src: url('../fonts/BarlowSemiCondensed-ExtraLight.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: 'BarlowSemiCondensed';
  src: url('../fonts/BarlowSemiCondensed-ExtraLightItalic.ttf') format('truetype');
  font-weight: 200;
  font-style: italic;
}
@font-face {
  font-family: 'BarlowSemiCondensed';
  src: url('../fonts/BarlowSemiCondensed-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'BarlowSemiCondensed';
  src: url('../fonts/BarlowSemiCondensed-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'BarlowSemiCondensed';
  src: url('../fonts/BarlowSemiCondensed-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: 'BarlowSemiCondensed';
  src: url('../fonts/BarlowSemiCondensed-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'BarlowSemiCondensed';
  src: url('../fonts/BarlowSemiCondensed-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
}
@font-face {
  font-family: 'BarlowSemiCondensed';
  src: url('../fonts/BarlowSemiCondensed-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
}
@font-face {
  font-family: 'BarlowSemiCondensed';
  src: url('../fonts/BarlowSemiCondensed-ExtraBoldItalic.ttf') format('truetype');
  font-weight: 800;
  font-style: italic;
}
@font-face {
  font-family: 'BarlowSemiCondensed';
  src: url('../fonts/BarlowSemiCondensed-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: 'BarlowSemiCondensed';
  src: url('../fonts/BarlowSemiCondensed-BlackItalic.ttf') format('truetype');
  font-weight: 900;
  font-style: italic;
}
/* Optional helper classes */


/* GLORY FONT COMPLETE SET */

/* Thin (100) */
@font-face {
  font-family: 'glory';
  src: url('../fonts/Glory-Thin.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: 'glory';
  src: url('../fonts/Glory-ThinItalic.ttf') format('truetype');
  font-weight: 100;
  font-style: italic;
}

/* ExtraLight (200) */
@font-face {
  font-family: 'glory';
  src: url('../fonts/Glory-ExtraLight.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: 'glory';
  src: url('../fonts/Glory-ExtraLightItalic.ttf') format('truetype');
  font-weight: 200;
  font-style: italic;
}

/* Light (300) */
@font-face {
  font-family: 'glory';
  src: url('../fonts/Glory-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display:swap;
}
@font-face {
  font-family: 'glory';
  src: url('../fonts/Glory-LightItalic.ttf') format('truetype');
  font-weight: 300;
  font-style: italic;
  font-display:swap;
}

/* Regular (400) */
@font-face {
  font-family: 'glory';
  src: url('../fonts/Glory-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'glory';
  src: url('../fonts/Glory-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
}

/* Medium (500) */
@font-face {
  font-family: 'glory';
  src: url('../fonts/Glory-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'glory';
  src: url('../fonts/Glory-MediumItalic.ttf') format('truetype');
  font-weight: 500;
  font-style: italic;
}

/* SemiBold (600) */
@font-face {
  font-family: 'glory';
  src: url('../fonts/Glory-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: 'glory';
  src: url('../fonts/Glory-SemiBoldItalic.ttf') format('truetype');
  font-weight: 600;
  font-style: italic;
}

/* Bold (700) */
@font-face {
  font-family: 'glory';
  src: url('../fonts/Glory-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'glory';
  src: url('../fonts/Glory-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
}

/* ExtraBold (800) */
@font-face {
  font-family: 'glory';
  src: url('../fonts/Glory-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
}
@font-face {
  font-family: 'glory';
  src: url('../fonts/Glory-ExtraBoldItalic.ttf') format('truetype');
  font-weight: 800;
  font-style: italic;
}

/* Glory utilities */
.font-glory-light {
  font-family: 'glory', sans-serif;
  font-weight: 300;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "liga", "kern";
}
.font-glory-light-italic {
  font-family: 'glory', sans-serif;
  font-weight: 300;
  font-style: italic;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "liga", "kern";
}
.font-glory-medium {
  font-family: 'glory', sans-serif;
  font-weight: 500;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "liga", "kern";
}

.ys-wishlist-button {
  --bs-btn-hover-color: #212529;
  --bs-btn-hover-bg: #faeef1;
  --bs-btn-hover-border-color: #faeef1;
  --bs-btn-active-color: #212529;
  --bs-btn-active-bg: #faeef1;
  --bs-btn-active-border-color: #faeef1;
  --bs-btn-focus-shadow-rgb: 250, 238, 241;
}


/* ================= HOMEPAGE · CANDELINI STORY ================= */
.home-candle-story {
  --home-cream: #f7f1e8;
  --home-sand: #e8dccb;
  --home-sage: #8d9a83;
  --home-rose: #b98986;
  --home-ink: #302d2b;
  --home-night: #17322b;
  color: var(--home-ink);
  overflow: clip;
}

.home-story-container {
  max-width: 1320px;
  padding-left: clamp(1.5rem, 4vw, 4.5rem);
  padding-right: clamp(1.5rem, 4vw, 4.5rem);
}

.home-story-intro,
.home-story-making {
  padding: clamp(5.5rem, 10vw, 10rem) 0;
}

.home-story-orientation {
  background: #edf1e8;
  padding: clamp(7rem, 13vw, 13rem) 0;
}

.home-story-orientation-content {
  margin: 0 auto;
  max-width: 68rem;
}

.home-story-orientation h2 {
  color: var(--home-ink);
  font-size: clamp(3rem, 7vw, 6.8rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 0.98;
  margin: 0 auto clamp(1.5rem, 3vw, 2.4rem);
  max-width: 14ch;
}

.home-story-orientation p {
  color: #6f625d;
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  line-height: 1.55;
  margin: 0 auto;
  max-width: 42rem;
}

.home-story-intro {
  background: var(--home-cream);
}

.home-story-making {
  background: #fffdf9;
}

.home-story-eyebrow {
  color: #84665e;
  font-family: 'glory', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  margin-bottom: 1.25rem;
  text-transform: uppercase;
}

.home-story-title {
  color: var(--home-ink);
  font-size: clamp(2.6rem, 5vw, 5.2rem);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 0.98;
  margin-bottom: 1.75rem;
  max-width: 11ch;
}

.home-story-copy,
.home-making-notes {
  font-size: clamp(1.15rem, 1.55vw, 1.45rem);
  line-height: 1.6;
  max-width: 31rem;
}

.home-story-copy {
  margin-bottom: 2rem;
}

.home-story-link {
  align-items: center;
  border-bottom: 1px solid rgba(48, 45, 43, 0.45);
  color: var(--home-ink);
  display: inline-flex;
  font-family: 'glory', sans-serif;
  font-size: 1.05rem;
  font-weight: 500;
  gap: 0.75rem;
  letter-spacing: 0.04em;
  padding: 0.35rem 0;
  text-decoration: none;
  transition: border-color 240ms ease, color 240ms ease, gap 240ms ease;
}

.home-story-link:hover,
.home-story-link:focus-visible {
  border-color: var(--home-rose);
  color: #76504d;
  gap: 1rem;
}

.home-intro-images {
  min-height: clamp(28rem, 52vw, 43rem);
  position: relative;
}

.home-intro-image {
  display: block;
  overflow: hidden;
  position: absolute;
}

.home-intro-image img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.home-intro-image-main {
  height: 82%;
  left: 0;
  top: 0;
  width: 78%;
}

.home-intro-image-main img {
  object-position: 56% 50%;
}

.home-intro-image-detail {
  border: 0.75rem solid var(--home-cream);
  bottom: 0;
  height: 47%;
  right: 0;
  width: 45%;
}

.home-making-swiper {
  width: 100%;
}

.home-making-swiper .swiper-slide {
  height: clamp(28rem, 44vw, 39rem);
  overflow: hidden;
}

.home-making-swiper .swiper-slide img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.home-making-carousel .home-making-pagination {
  margin-top: 1.25rem;
  position: static;
  transform: none;
  width: 100%;
}

.home-making-pagination .swiper-pagination-bullet {
  background: #8f9a86;
  height: 0.42rem;
  margin: 0 0.35rem !important;
  opacity: 0.42;
  transition: opacity 240ms ease, transform 240ms ease;
  width: 0.42rem;
}

.home-making-pagination .swiper-pagination-bullet-active {
  opacity: 1;
  transform: scale(1.25);
}

.home-making-notes {
  margin-bottom: 2rem;
}

.home-making-notes p {
  border-left: 1px solid rgba(141, 154, 131, 0.65);
  margin: 0 0 1.15rem;
  padding-left: 1.25rem;
}

.home-story-burn {
  background:
    radial-gradient(circle at 18% 35%, rgba(213, 164, 105, 0.16), transparent 32rem),
    linear-gradient(145deg, #1c3b32 0%, var(--home-night) 58%, #10241f 100%);
  color: #f5eee4;
  padding: clamp(6rem, 10vw, 10rem) 0 clamp(5rem, 8vw, 8rem);
}

.home-story-burn .home-story-eyebrow {
  color: #c9a29b;
}

.home-story-burn .home-story-title {
  color: #f7f0e7;
  max-width: 13ch;
}

.home-burn-heading .home-story-copy {
  color: rgba(247, 240, 231, 0.72);
  max-width: 34rem;
}

.home-burn-layout {
  min-height: 175vh;
  position: relative;
}

.home-burn-scene {
  position: sticky;
  top: var(--navbar-height);
  z-index: 1;
}

.home-burn-columns {
  display: grid;
  gap: clamp(3rem, 7vw, 7rem);
  grid-template-columns: minmax(0, 1.15fr) minmax(18rem, 0.85fr);
}

.home-burn-stage {
  align-self: start;
}

.home-burn-heading {
  margin-bottom: 1.75rem;
}

.home-burn-heading .home-story-title {
  font-size: clamp(2.8rem, 4.4vw, 4.8rem);
  margin-bottom: 1.25rem;
}

.home-burn-heading .home-story-copy {
  margin-bottom: 0;
}

.home-burn-visual {
  height: min(50vh, 34rem);
  min-height: 25rem;
  position: relative;
}

.home-burn-image-wrap {
  border-radius: 1.25rem;
  box-shadow: 0 1.5rem 5rem rgba(218, 158, 93, 0.14);
  height: 100%;
  overflow: hidden;
  position: relative;
}

.home-burn-image {
  height: 100%;
  inset: 0;
  object-fit: cover;
  opacity: 0;
  position: absolute;
  transform: scale(1.025);
  transition: opacity 700ms ease, transform 1400ms ease;
  width: 100%;
}

.home-burn-image.is-active {
  opacity: 1;
  transform: scale(1);
  z-index: 1;
}

.home-burn-progress {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  justify-content: center;
  margin-top: 0;
  position: absolute;
  right: -4vw;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

.home-burn-progress::before {
  content: none;
}

.home-burn-progress span {
  background: #8b8b88;
  border: 0;
  border-radius: 50%;
  display: block;
  height: 0.5rem;
  position: relative;
  transition: background-color 350ms ease, transform 350ms ease;
  width: 0.5rem;
  z-index: 1;
}

.home-burn-progress span.is-active {
  background: #ffffff;
  transform: scale(1.35);
}

.home-burn-copy-stage {
  align-self: start;
  display: flex;
  flex-direction: column;
  height: min(50vh, 34rem);
  min-height: 25rem;
}

.home-burn-steps {
  height: 100%;
  position: relative;
}

.home-burn-step {
  display: flex;
  flex-direction: column;
  inset: 0;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transform: translateY(0.75rem);
  transition: opacity 550ms ease, transform 550ms ease;
}

.home-burn-step.is-active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.home-burn-step-image {
  display: none;
}

.home-burn-step-number {
  color: #c9a29b;
  font-family: 'glory', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  margin-bottom: 1.2rem;
}

.home-burn-step h3 {
  color: #f7f0e7;
  font-size: clamp(2.4rem, 4vw, 4.25rem);
  font-weight: 400;
  line-height: 1;
  margin-bottom: 1.25rem;
}

.home-burn-step p {
  color: rgba(247, 240, 231, 0.72);
  font-size: clamp(1.1rem, 1.4vw, 1.35rem);
  line-height: 1.55;
  margin: 0;
  max-width: 27rem;
}

.home-burn-cta {
  margin-top: 2.25rem;
}

.home-burn-cta-desktop {
  margin-top: 4.2rem;
}

.home-burn-cta-desktop .btn-mehrentdecken {
  margin-top: 0;
}

.home-burn-cta-mobile {
  display: none;
}

.home-burn-scroll-track {
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  inset: 15rem 0 30rem;
  pointer-events: none;
  position: absolute;
}

.home-story-link-light {
  border-color: rgba(247, 240, 231, 0.55);
  color: #f7f0e7;
}

.home-story-link-light:hover,
.home-story-link-light:focus-visible {
  border-color: #d5a8a0;
  color: #e8bdb5;
}

@media (min-width: 992px) {
  .home-story-burn {
    padding-top: 0;
  }

  .home-burn-scene {
    padding-top: clamp(5.5rem, 10vw, 10rem);
  }

  .home-burn-progress {
    top: calc(50% + clamp(2.75rem, 5vw, 5rem));
  }
}

.home-motion-ready .home-reveal {
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity 700ms ease var(--home-reveal-delay, 0ms), transform 700ms ease var(--home-reveal-delay, 0ms);
}

.home-motion-ready .home-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 991.98px) {
  .home-story-orientation {
    padding: 7rem 0;
  }

  .home-story-intro,
  .home-story-making {
    padding: 5.5rem 0;
  }

  .home-story-title {
    max-width: 13ch;
  }

  .home-intro-images,
  .home-making-swiper .swiper-slide {
    min-height: clamp(25rem, 100vw, 39rem);
  }

  .home-burn-layout {
    display: block;
    min-height: 0;
  }

  .home-burn-scene {
    position: static;
  }

  .home-burn-columns {
    display: block;
  }

  .home-burn-stage {
    position: static;
  }

  .home-burn-copy-stage {
    display: block;
    height: auto;
    position: static;
  }

  .home-burn-heading {
    margin-bottom: 4rem;
    text-align: center;
  }

  .home-burn-heading .home-story-title,
  .home-burn-heading .home-story-copy {
    margin-left: auto;
    margin-right: auto;
  }

  .home-burn-visual {
    display: none;
  }

  .home-burn-progress,
  .home-burn-cta-desktop {
    display: none;
  }

  .home-burn-step {
    inset: auto;
    min-height: 0;
    opacity: 1;
    padding: 0 0 5.5rem;
    pointer-events: auto;
    position: static;
    transform: none;
    justify-content: flex-start;
  }

  .home-burn-step-image {
    display: block;
    margin-bottom: 2rem;
    width: 100%;
  }

  .home-burn-steps {
    height: auto;
    min-height: 0;
  }

  .home-burn-cta-mobile {
    display: block;
    margin-top: 0;
    text-align: center;
  }

  .home-burn-scroll-track {
    display: none;
  }
}

@media (max-width: 575.98px) {
  .home-story-title {
    font-size: clamp(2.65rem, 13vw, 3.6rem);
  }

  .home-intro-image-main {
    height: 76%;
    width: 86%;
  }

  .home-intro-image-detail {
    height: 42%;
    width: 54%;
  }

  .home-story-burn {
    padding-top: 5.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-story-link,
  .home-making-pagination .swiper-pagination-bullet,
  .home-burn-image,
  .home-burn-progress span,
  .home-burn-step,
  .home-motion-ready .home-reveal {
    transition: none !important;
  }

  .home-motion-ready .home-reveal,
  .home-motion-ready .home-reveal.is-visible {
    opacity: 1;
    transform: none;
  }

  .home-burn-image,
  .home-burn-image.is-active {
    transform: none;
  }

  .home-burn-step,
  .home-burn-step.is-active {
    transform: none;
  }
}

/* ================= HOMEPAGE · NATURPAPIER UND HERO ================= */
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/Fraunces-Variable.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

.younisono-navbar-bg {
  border-bottom: 1px solid rgba(72, 58, 63, 0.12);
}

.home-nature-hero {
  background: #f5efe4;
  color: #39444a;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(3rem, 6vw, 6rem) 0;
  position: relative;
}

.home-nature-hero::before,
.home-nature-discovery::before,
.home-nature-making::before {
  background: url('../images/nature/faserpapier.webp') center / cover;
  content: '';
  inset: 0;
  opacity: 0.25;
  position: absolute;
  z-index: -1;
}

.home-nature-container {
  max-width: 1440px;
  padding-left: clamp(1.5rem, 5vw, 5rem);
  padding-right: clamp(1.5rem, 5vw, 5rem);
}

.home-nature-hero .row {
  min-height: min(44rem, calc(100svh - var(--navbar-height) - 12rem));
}

.home-nature-copy {
  padding: 2rem 0;
  position: relative;
  z-index: 2;
}

.home-nature-eyebrow {
  color: #75656d;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.17em;
  margin-bottom: 2rem;
}

.home-nature-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(3.6rem, 6.5vw, 6.4rem);
  font-weight: 300;
  font-variation-settings: 'SOFT' 20, 'WONK' 0;
  letter-spacing: -0.045em;
  line-height: 1.08;
  margin: 0 0 1.7rem;
}

.home-nature-title span,
.ys-account-paper .ca-login-title span {
  display: block;
  transform: scaleX(0.78);
  transform-origin: left center;
  width: 128.2%;
}

.home-nature-description {
  color: #675e5a;
  font-size: clamp(1.15rem, 1.65vw, 1.4rem);
  font-weight: 400;
  line-height: 1.6;
  margin-bottom: 2.25rem;
  max-width: 24rem;
}

.home-nature-button {
  --bs-btn-color: #fffaf2;
  --bs-btn-bg: #685260;
  --bs-btn-border-color: #685260;
  --bs-btn-hover-color: #fffaf2;
  --bs-btn-hover-bg: #51414b;
  --bs-btn-hover-border-color: #51414b;
  --bs-btn-active-color: #fffaf2;
  --bs-btn-active-bg: #51414b;
  --bs-btn-active-border-color: #51414b;
  --bs-btn-focus-shadow-rgb: 104, 82, 96;
  border-radius: 2px;
  font-size: 1.1rem;
  padding: 0.8rem 1.35rem;
}

.home-nature-button span { margin-left: 1.4rem; }

.home-nature-discover {
  color: #594f53;
  font-size: 1rem;
  padding: 0.65rem 0;
  text-decoration-color: #afa09e;
  text-underline-offset: 0.35em;
}

.home-nature-discover:hover { color: #685260; }
.home-nature-discover span { margin-left: 0.5rem; }

.home-nature-stage {
  aspect-ratio: 1 / 1;
  isolation: isolate;
  margin: 0 -1.5rem 0 1.5rem;
  position: relative;
}

.home-nature-stage::before {
  background: #dfd2d6 url('../images/nature/faserpapier.webp') center / cover;
  background-blend-mode: multiply;
  content: '';
  inset: 4% -50vw 7% -5%;
  opacity: 0.52;
  position: absolute;
  z-index: -1;
}

.home-nature-candle {
  height: auto;
  position: absolute;
  filter: drop-shadow(5px 7px 5px rgba(66, 48, 41, 0.13));
}

.home-nature-candle-large { bottom: 15%; right: 0; width: 65%; }
.home-nature-candle-small { bottom: 9%; left: 2%; width: 45%; }

.home-nature-flower {
  background: #9a7e91;
  position: absolute;
  mask: url('../images/nature/wildblume-111.svg') center / contain no-repeat;
}

.home-nature-flower-tall { height: 82%; left: 15%; opacity: 0.4; top: -12%; width: 29%; }
.home-nature-flower-fine {
  background: #776d81;
  height: 47%;
  mask-image: url('../images/nature/wildblume-94.svg');
  opacity: 0.4;
  right: -9%;
  top: -2%;
  width: 25%;
}

.home-nature-stage figcaption {
  bottom: 0;
  color: #75656d;
  font-size: 0.95rem;
  left: 17%;
  position: absolute;
}

@media (prefers-reduced-motion: no-preference) {
  .home-nature-copy { animation: home-nature-arrive 700ms ease both; }
  .home-nature-stage { animation: home-nature-arrive 900ms 100ms ease both; }
}

@keyframes home-nature-arrive {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 991.98px) {
  .home-nature-hero { padding: 2rem 0 3rem; }
  .home-nature-hero .row { min-height: 0; }
  .home-nature-copy { padding: 0 0 3rem; }
  .home-nature-title { font-size: clamp(3.4rem, 9.5vw, 5.5rem); }
  .home-nature-description { max-width: 29rem; }
  .home-nature-stage { margin: 2rem auto 0; max-width: 34rem; }
}

@media (max-width: 575.98px) {
  .home-nature-eyebrow { font-size: 0.7rem; margin-bottom: 1.25rem; }
  .home-nature-title { font-size: clamp(2.8rem, 11.5vw, 4rem); }
  .home-nature-description { font-size: 1.15rem; margin-bottom: 1.5rem; }
  .home-nature-actions { gap: 0.5rem 1.5rem !important; }
  .home-nature-stage { margin-top: 1rem; }
  .home-nature-stage figcaption { font-size: 0.85rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ================= HOMEPAGE · BLUETEN IM DETAIL ================= */
.home-nature-discovery,
.home-nature-making {
  background: #eee7db;
  color: #39444a;
  isolation: isolate;
  padding: clamp(5rem, 9vw, 9rem) 0;
  position: relative;
}

.home-nature-discovery::before,
.home-nature-making::before {
  background-image: url('../images/nature/naturpapier-creme.webp');
  opacity: 0.28;
}

.home-discovery-figure { margin: 0; }

.home-discovery-detail {
  aspect-ratio: 4 / 5;
  background: #f5efe4;
  overflow: hidden;
}

.home-discovery-detail img {
  display: block;
  height: 100%;
  object-fit: cover;
  transform: scale(1.65);
  transform-origin: 50% 58%;
  width: 100%;
}

.home-discovery-figure figcaption {
  color: #75656d;
  font-size: 0.95rem;
  margin-top: 1rem;
}

.home-discovery-copy .home-nature-eyebrow,
.home-making-copy .home-nature-eyebrow { text-transform: uppercase; }
.home-discovery-copy .home-nature-title,
.home-making-copy .home-nature-title { font-size: clamp(3.4rem, 5.8vw, 5.6rem); }
.home-discovery-copy .home-nature-description { max-width: 25rem; }

.home-motion-ready .home-nature-discovery .home-reveal,
.home-motion-ready .home-nature-making .home-reveal,
.home-motion-ready .home-nature-burn .home-reveal,
.home-motion-ready .home-nature-family .home-reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 700ms ease var(--home-reveal-delay, 0ms), transform 700ms ease var(--home-reveal-delay, 0ms);
}
.home-motion-ready .home-nature-discovery .home-reveal.is-visible,
.home-motion-ready .home-nature-making .home-reveal.is-visible,
.home-motion-ready .home-nature-burn .home-reveal.is-visible,
.home-motion-ready .home-nature-family .home-reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 991.98px) {
  .home-nature-discovery,
  .home-nature-making { padding: 4.5rem 0; }
  .home-discovery-detail { aspect-ratio: 1 / 1; }
  .home-discovery-copy .home-nature-description { max-width: 32rem; }
  .home-discovery-copy .home-nature-title,
  .home-making-copy .home-nature-title { font-size: clamp(3.2rem, 10vw, 5rem); }
}

@media (prefers-reduced-motion: reduce) {
  .home-motion-ready .home-nature-discovery .home-reveal,
  .home-motion-ready .home-nature-making .home-reveal,
  .home-motion-ready .home-nature-burn .home-reveal,
  .home-motion-ready .home-nature-family .home-reveal { opacity: 1; transform: none; transition: none; }
}

/* ================= HOMEPAGE · VON HAND ================= */
.home-nature-making { background: #e7dde1; }
.home-making-copy .home-nature-description { max-width: 22rem; }
.home-nature-making .home-making-swiper { width: 100%; }

.home-nature-making .swiper-slide {
  aspect-ratio: 3 / 2;
  height: auto;
  min-height: 0;
  overflow: hidden;
}

.home-nature-making .swiper-slide img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.home-nature-making .home-making-pagination {
  margin-top: 1.25rem;
  position: static;
  transform: none;
  width: 100%;
}

.home-nature-making .swiper-pagination-bullet {
  background: transparent;
  height: 1.5rem;
  margin: 0 0.25rem !important;
  opacity: 0.4;
  width: 1.5rem;
}

.home-nature-making .swiper-pagination-bullet::before {
  background: #627b8b;
  content: '';
  display: block;
  height: 0.875rem;
  margin: 0.3125rem;
  mask: url('../images/nature/bluete-34.svg') center / contain no-repeat;
  width: 0.875rem;
}

.home-nature-making .swiper-pagination-bullet:focus-visible { outline: 1px solid #627b8b; }

.home-nature-making .swiper-pagination-bullet-active { opacity: 1; transform: none; }

@media (max-width: 991.98px) {
  .home-making-copy .home-nature-description { max-width: 32rem; }
}

/* ================= HOMEPAGE · LICHT DAS BLEIBT ================= */
.ys-guide-night,
.home-nature-burn,
.ys-detail-afterglow {
  background: linear-gradient(rgba(11, 23, 35, 0.48), rgba(11, 23, 35, 0.48)),
    #243746 url('../images/nature/naturpapier-nachtblau.webp') center / cover;
  color: #f5eee4;
  padding: clamp(5rem, 9vw, 9rem) 0;
}

.home-nature-burn .home-nature-eyebrow { color: #bdc6cf; text-transform: uppercase; }
.home-nature-burn .home-nature-title { font-size: clamp(2.6rem, 4vw, 4rem); margin-bottom: 0; }
.home-nature-burn .home-nature-description { color: #d4d9dc; font-size: 1.1rem; margin-bottom: 0; max-width: 30rem; }
.home-light-heading { margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }

.home-light-image {
  aspect-ratio: 4 / 5;
  height: auto;
  display: block;
  filter: drop-shadow(0 8px 6px rgba(0, 0, 0, 0.2));
  object-fit: contain;
  object-position: center bottom;
  width: 100%;
}

.home-light-step { text-align: center; }
.home-light-step h3 {
  font-family: 'BarlowSemiCondensed', sans-serif;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.3;
  margin-top: 1.5rem;
  margin-bottom: 0.65rem;
}
.home-light-description { color: #d4d9dc; font-size: 1.05rem; line-height: 1.5; margin: 0 auto; max-width: 23ch; }
.home-light-footer { margin-top: clamp(2.5rem, 5vw, 4rem); text-align: center; }
.home-nature-burn .home-nature-discover { color: #e9e1d3; text-decoration-color: #95a4b2; }
.home-nature-burn .home-nature-discover:hover { color: #fffaf2; }

@media (max-width: 575.98px) {
  .home-nature-burn { padding: 4.5rem 0; }
  .home-light-step { margin-bottom: 1.5rem; }
  .home-light-image { margin: 0 auto; max-width: 18rem; }
}


/* ================= HOMEPAGE · KERZENFAMILIE ================= */
.home-nature-family {
  background: #e6dfe6;
  color: #49434b;
  isolation: isolate;
  padding: clamp(5rem, 9vw, 9rem) 0;
  position: relative;
}

.home-nature-family::before {
  background: url('../images/nature/naturpapier-creme.webp') center / cover;
  content: '';
  inset: 0;
  opacity: 0.25;
  position: absolute;
  z-index: -1;
}

.home-nature-family .home-nature-eyebrow { text-transform: uppercase; }
.home-nature-family .home-nature-title { font-size: clamp(2.8rem, 4.8vw, 4.8rem); margin-bottom: 0; }
.home-nature-family .home-nature-description { font-size: 1.15rem; margin-bottom: 0; max-width: 27rem; }
.home-family-heading { margin-bottom: clamp(3rem, 6vw, 5rem); }
.home-family-item { color: inherit; display: block; text-align: center; text-decoration: none; }
.home-family-item:hover { color: #685260; }
.home-family-item:hover h3 { text-decoration: underline; text-underline-offset: 0.25em; }
.home-family-item:focus-visible { outline: 1px solid #685260; outline-offset: 8px; }

.home-family-stage {
  align-items: flex-end;
  display: flex;
  height: clamp(8rem, 18vw, 15rem);
  justify-content: center;
  margin-bottom: 1.75rem;
}

.home-family-stage img {
  display: block;
  filter: drop-shadow(0 7px 5px rgba(66, 48, 41, 0.13));
  height: 100%;
  width: auto;
}

/* Relative Bildhoehen aus der finalen A5-Preisliste. */
.home-family-stage .home-family-round-small { height: 84.56%; }
.home-family-stage .home-family-square-large { height: 97.97%; }
.home-family-stage .home-family-square-small { height: 80.11%; }
.home-family-item h3 { font-family: 'BarlowSemiCondensed', sans-serif; font-size: 1.25rem; font-weight: 500; margin-bottom: 0.5rem; }
.home-family-size { color: #706570; font-size: 0.95rem; font-weight: 400; line-height: 1.5; margin: 0; }
.home-family-footer { margin-top: clamp(3rem, 5vw, 4.5rem); text-align: center; }

@media (max-width: 575.98px) {
  .home-nature-family { padding: 4.5rem 0; }
  .home-nature-family .home-nature-title { font-size: clamp(2.3rem, 10vw, 2.8rem); }
  .home-family-stage { height: clamp(6rem, 28vw, 10rem); margin-bottom: 1.25rem; }
  .home-family-item { padding-bottom: 1rem; }
  .home-family-item h3 { font-size: clamp(0.95rem, 4vw, 1.1rem); }
  .home-family-size { font-size: 0.85rem; }
}

/* ================= KERZEN · AUSWAHL UND DETAILS ================= */
.ys-jewelry-shop,
.ys-candle-shop,
.ys-jewelry-detail,
.ys-candle-detail {
  --ys-text-muted: #746c66;
  color: #49434b;
  background: #eee7db;
}

.ys-jewelry-detail,
.ys-candle-detail {
  background-image: linear-gradient(rgba(238, 235, 229, 0.93), rgba(238, 235, 229, 0.93)), url('../images/nature/faserpapier.webp');
  background-size: auto, 1400px auto;
}

.ys-jewel-chapter {
  padding: clamp(4rem, 8vw, 7rem) 0;
  color: #514c48;
  background: linear-gradient(rgba(231, 225, 228, 0.76), rgba(231, 225, 228, 0.76)), url('../images/nature/faserpapier.webp') center / 600px auto;
}
.ys-jewel-chapter .home-nature-eyebrow { text-transform: uppercase; }
.ys-jewel-chapter .home-nature-title { margin-bottom: 0; }
.ys-jewelry-intro {
  background: linear-gradient(rgba(243, 241, 235, 0.75), rgba(243, 241, 235, 0.75)), url('../images/nature/faserpapier.webp') center / 600px auto;
  color: #514c48;
}
.ys-jewel-hero { overflow: clip; }
.ys-jewel-listing-hero { overflow: clip; padding: clamp(3rem, 6vw, 6rem) 0 clamp(3rem, 6vw, 6rem); }
.ys-jewel-listing-hero .home-nature-eyebrow { text-transform: uppercase; }
.ys-jewel-listing-hero .home-nature-title { font-size: clamp(3.2rem, 5vw, 5rem); max-width: 34rem; margin: 0 auto; }
.ys-jewel-lineup { position: relative; left: 50%; transform: translateX(-50%); width: max(56rem, 110%); display: flex; align-items: center; justify-content: space-between; padding: 3rem 0 1rem; mix-blend-mode: multiply; }
.ys-jewel-lineup img { width: 11%; height: auto; object-fit: contain; transform: translateY(-0.7rem) rotate(-9deg); }
.ys-jewel-lineup img:nth-child(even) { transform: translateY(0.8rem) rotate(8deg); }
.ys-jewel-pin { padding: clamp(1rem, 3vw, 3rem) 0; mix-blend-mode: multiply; }
.ys-jewel-stage {
  --jewel-step: 30deg;
  width: clamp(34rem, 66vw, 54rem);
  aspect-ratio: 1;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  mix-blend-mode: multiply;
}
.ys-jewel-orbit { position: absolute; inset: 0; transform: rotate(var(--jewel-turn, 0deg)); pointer-events: none; }
.ys-jewel-orbit-item { position: absolute; inset: 0; transform: rotate(calc(var(--jewel-index) * var(--jewel-step))); }
.ys-jewel-orbit-item img { position: absolute; left: 40%; top: 0; width: 20%; height: 20%; object-fit: contain; }
.ys-jewel-title {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 58%;
  margin: 0;
  text-align: center;
  font-size: clamp(3.4rem, 6vw, 6rem);
  line-height: 1.08;
}
.ys-jewel-discovery { display: flex; align-items: center; justify-content: center; gap: clamp(2rem, 7vw, 7rem); padding-block: clamp(4rem, 8vw, 8rem); }
.ys-jewel-discovery-copy { max-width: 34rem; }
.ys-jewel-discovery .home-nature-eyebrow { text-transform: uppercase; }
.ys-jewel-discovery .home-nature-description { margin-bottom: 0; }
.ys-jewel-botanicals { position: relative; width: clamp(8rem, 20vw, 18rem); height: clamp(12rem, 26vw, 22rem); flex-shrink: 0; }
.ys-jewel-botanical { position: absolute; mask: url('../images/nature/wildblume-111.svg') center / contain no-repeat; opacity: 0.55; }
.ys-jewel-botanical-rose { left: 0; bottom: 4%; width: 42%; height: 74%; background: #b28e9e; mask-image: url('../images/nature/wildblume-110.svg'); transform: rotate(-9deg); }
.ys-jewel-botanical-lavender { left: 29%; bottom: 0; width: 45%; height: 100%; background: #9b94af; }
.ys-jewel-botanical-sage { right: 0; bottom: 8%; width: 39%; height: 62%; background: #92a58f; mask-image: url('../images/nature/wildblume-94.svg'); transform: rotate(12deg); }
.ys-jewel-categories { max-width: 72rem; }
.ys-jewel-series-footer { padding-block: clamp(3rem, 6vw, 5rem) clamp(5rem, 8vw, 8rem); }
.ys-jewel-category {
  --jewel-paper: rgba(231, 225, 228, 0.76);
  display: flex; flex-direction: column; height: 100%;
  color: #514c48; text-decoration: none; border-radius: 3px;
  background: linear-gradient(var(--jewel-paper), var(--jewel-paper)), url('../images/nature/faserpapier.webp') center / 600px auto;
}
.ys-jewel-category-drops { --jewel-paper: rgba(225, 229, 223, 0.76); }
.ys-jewel-category-image { display: grid; place-items: center; aspect-ratio: 4 / 3; }
.ys-jewel-category-image img { width: 78%; height: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.ys-jewel-category-drops .ys-jewel-category-image img { width: 62%; }
.ys-jewel-category-copy { padding: 1rem clamp(1.5rem, 4vw, 3.5rem) clamp(2rem, 4vw, 3.5rem); display: flex; flex-direction: column; flex-grow: 1; }
.ys-jewel-category .home-nature-eyebrow { text-transform: uppercase; margin-bottom: 1rem; }
.ys-jewel-category .home-nature-title { font-size: clamp(2.8rem, 4.2vw, 4.3rem); margin-bottom: 1.5rem; }
.ys-jewel-category-description { font-size: 1.15rem; line-height: 1.6; max-width: 23rem; margin-bottom: 2rem; }
.ys-jewel-category-link { margin-top: auto; text-decoration: underline; text-underline-offset: 0.4em; text-decoration-color: #aba1a5; }
.ys-jewel-category-link span { display: inline-block; margin-left: 0.7rem; }
.ys-jewel-category:hover { color: #514c48; }
.ys-jewel-category:hover .ys-jewel-category-link { text-decoration-color: currentColor; }
.ys-jewel-category:focus-visible { outline: 2px solid #82758b; outline-offset: 5px; }
.ys-jewelry-shop .ys-unique-item { width: 50%; }
@media (min-width: 768px) {
  .ys-jewelry-shop .ys-unique-item { width: 33.333333%; }
}
@media (min-width: 992px) {
  .ys-jewelry-shop .ys-unique-item { width: 25%; }
}
.ys-jewelry-shop .ys-jewel-categories { padding-bottom: clamp(4rem, 8vw, 8rem); }
@media (max-width: 991.98px) {
  .ys-jewel-stage { --jewel-step: 45deg; width: max(34rem, 90vw); }
  .ys-jewel-orbit-item:nth-child(n+9) { display: none; }
}
@media (max-width: 575.98px) {
  .ys-jewel-stage { --jewel-step: 60deg; }
  .ys-jewel-orbit-item:nth-child(n+7) { display: none; }
  .ys-jewel-orbit-item img { left: 35%; width: 30%; height: 30%; }
  .ys-jewel-discovery { gap: 0.5rem; padding-inline: 1.5rem; }
  .ys-jewel-discovery .home-nature-title { font-size: 2.5rem; }
  .ys-jewel-botanicals { width: 4rem; height: 10rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ys-jewel-orbit { transform: none !important; }
}
@media (prefers-reduced-motion: no-preference) and (min-height: 640px) {
  .ys-jewel-motion-ready { height: calc(210svh - var(--navbar-height)); }
  .ys-jewel-motion-ready .ys-jewel-pin {
    position: sticky; top: var(--navbar-height);
    height: calc(100svh - var(--navbar-height));
    display: flex; align-items: center;
  }
  .ys-jewel-motion-ready .ys-jewel-stage { flex-shrink: 0; width: min(clamp(34rem, 66vw, 54rem), calc(100svh - var(--navbar-height) - 6rem)); }
  .ys-jewel-motion-ready .ys-jewel-title { font-size: clamp(3rem, min(6vw, 8svh), 6rem); }
}
@media (prefers-reduced-motion: no-preference) and (min-height: 640px) and (max-width: 991.98px) {
  .ys-jewel-motion-ready .ys-jewel-stage { width: min(max(34rem, 90vw), calc(100svh - var(--navbar-height) - 4rem)); }
}

.ys-shop-intro {
  background: linear-gradient(rgba(246, 242, 236, 0.58), rgba(246, 242, 236, 0.58)), url('../images/nature/faserpapier.webp') center / 1200px auto;
  padding: 2.5rem 0 4rem; overflow: clip;
}
.ys-shop-nav { display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; margin-bottom: 3.5rem; }
.ys-shop-nav a { color: #75656d; padding: 0.5rem 0; text-decoration: none; }
.ys-shop-nav a[aria-current="page"] { border-bottom: 1px solid #685260; color: #49434b; }
.ys-shop-nav a:hover { color: #49434b; text-decoration: underline; text-underline-offset: 0.4em; }
.ys-shop-intro .home-nature-eyebrow { margin-bottom: 1.5rem; text-transform: uppercase; }
.ys-shop-intro .home-nature-title { font-size: clamp(3rem, 5.4vw, 5.3rem); }
.ys-shop-intro .home-nature-description { font-size: 1.2rem; margin-bottom: 0; max-width: 30rem; }
.ys-shop-family { align-items: flex-end; display: flex; justify-content: flex-start; gap: 1rem; padding-right: 4rem; height: clamp(9rem, 14vw, 13rem); position: relative; isolation: isolate; }
.ys-shop-silhouette {
  position: absolute; right: 10%; bottom: 8%; width: 22%; height: 105%; z-index: -1; pointer-events: none;
  background: #82758b; opacity: 0.32;
  mask: url('../images/nature/wildblume-111.svg') center / contain no-repeat;
}
.ys-shop-silhouette-fine { right: -3%; bottom: 25%; width: 24%; height: 74%; background: #788798; mask-image: url('../images/nature/wildblume-94.svg'); }
.ys-shop-silhouette-bloom { right: 0; bottom: 3%; width: 14%; height: 26%; background: #a78390; mask-image: url('../images/nature/bluete-34.svg'); }
.ys-shop-family img { flex-shrink: 0; height: 100%; width: auto; filter: drop-shadow(0 8px 6px rgba(66, 48, 41, 0.12)); }
.ys-shop-family .ys-shop-rund-klein { height: 84.56%; }
.ys-shop-family .ys-shop-quadratisch-gross { height: 97.97%; }
.ys-shop-family .ys-shop-quadratisch-klein { height: 80.11%; }
.ys-shop-family.ys-shop-family-all { height: auto; aspect-ratio: 2.25; max-width: 34rem; padding-right: 0; gap: 6%; }
.ys-shop-family-pair { position: relative; flex: 0 0 47%; height: 100%; }
.ys-shop-family-all .ys-shop-family-pair img { position: absolute; right: 0; bottom: 10%; width: 80%; height: auto; }
.ys-shop-family-all .ys-shop-family-pair .ys-shop-rund-klein,
.ys-shop-family-all .ys-shop-family-pair .ys-shop-quadratisch-klein { left: 0; bottom: 0; width: 55%; z-index: 1; }
.ys-shop-title-group { display: flex; align-items: center; margin-bottom: 1.7rem; }
.ys-shop-title-group .home-nature-title { flex: 0 0 auto; margin-bottom: 0; }
.ys-shop-title-botanicals { position: relative; isolation: isolate; flex: 0 0 clamp(2.5rem, 6vw, 6rem); height: clamp(5rem, 11vw, 10rem); transform: scale(1.4); transform-origin: left bottom; }
.ys-shop-title-botanicals .ys-shop-silhouette-tall { right: 25%; bottom: 0; width: 75%; height: 100%; mask-image: url('../images/nature/wildblume-110.svg'); transform: scale(0.9, 1.2); transform-origin: center bottom; }
.ys-shop-sizebar {
  position: sticky; top: var(--navbar-height); z-index: 1010;
  background: linear-gradient(rgba(222, 218, 213, 0.88), rgba(222, 218, 213, 0.88)), url('../images/nature/faserpapier.webp') center / 1200px auto;
  border-block: 1px solid #cbc5be;
}
.ys-shop-sizes { display: flex; gap: 1rem 3rem; padding-block: 0.65rem; }
.ys-shop-sizes a { align-items: center; color: #6f6864; display: inline-flex; padding-block: 0.3rem; border-bottom: 2px solid transparent; text-decoration: none; }
.ys-shop-sizes a[aria-current="location"] { color: #49434b; border-bottom-color: #81747b; }
.ys-shop-sizes a:hover { text-decoration: underline; text-underline-offset: 0.3em; }
.ys-shop-sizes span { display: none; }
.ys-shop-selection {
  background: linear-gradient(rgba(238, 235, 229, 0.93), rgba(238, 235, 229, 0.93)), url('../images/nature/faserpapier.webp') center / 1400px auto;
  padding: 1rem 0 4rem;
}
.ys-jewelry-shop .ys-selection-heading,
.ys-candle-shop .ys-selection-heading { text-align: left; padding-top: clamp(4rem, 7vw, 7rem) !important; }
.ys-jewelry-shop .ys-selection-heading[id],
.ys-candle-shop .ys-selection-heading[id] { scroll-margin-top: 1rem; }
.ys-candle-shop #article-30101 h2 { position: relative; width: fit-content; }
.ys-candle-shop #article-30101 h2::after {
  content: ''; position: absolute; left: calc(100% + 2rem); top: -0.5rem; width: 5rem; height: 4rem;
  background: #858398; opacity: 0.65; transform: rotate(65deg);
  mask: url('../images/nature/wildblume-94.svg') center / contain no-repeat;
}
.ys-jewelry-shop .ys-selection-heading h2,
.ys-candle-shop .ys-selection-heading h2 { font-family: 'Fraunces', Georgia, serif; font-size: clamp(2rem, 3vw, 2.8rem); font-weight: 300 !important; text-align: left !important; letter-spacing: -0.035em; }
.ys-jewelry-shop .ys-selection-heading h3,
.ys-candle-shop .ys-selection-heading h3 { color: #75656d; font-family: 'BarlowSemiCondensed', sans-serif; font-size: 1.1rem !important; text-align: left !important; }
.ys-jewelry-shop .ys-selection-group,
.ys-candle-shop .ys-selection-group { margin: 0 0 1rem; padding-left: 0; padding-right: 0; }
.ys-jewelry-shop .ys-unique-item,
.ys-candle-shop .ys-unique-item { padding: 0.75rem !important; margin-bottom: 0.5rem !important; }
.ys-jewelry-shop .ys-unique-card,
.ys-candle-shop .ys-unique-card { background: transparent; border: 0; border-radius: 0 !important; box-shadow: none !important; }
.ys-jewelry-shop .ys-unique-card .card-body,
.ys-candle-shop .ys-unique-card .card-body { padding: 0; }
.ys-jewelry-shop .ys-unique-item .ys-unique-card,
.ys-candle-shop .ys-unique-item .ys-unique-card {
  background: linear-gradient(rgba(216, 214, 212, 0.55), rgba(216, 214, 212, 0.55)), url('../images/nature/faserpapier.webp') center / 600px auto;
  border: 1px solid rgba(113, 102, 89, 0.08);
  border-radius: 3px !important;
}
.ys-jewelry-shop .ys-selection-picture,
.ys-candle-shop .ys-selection-picture { order: -1; margin-bottom: 1.5rem; }
.ys-jewelry-shop .ys-unique-item .ys-selection-picture,
.ys-candle-shop .ys-unique-item .ys-selection-picture { margin-bottom: 0; padding-bottom: 0 !important; }
.ys-candle-shop .ys-unique-card .ys-unique-media { aspect-ratio: 1 / 1; background: #f2ece2; border-radius: 2px; margin: 0; padding: 1rem; width: 100%; }
.ys-jewelry-shop .ys-unique-card .ys-unique-media { aspect-ratio: 4 / 3; --ys-jewel-image-width: 100%; --ys-jewel-image-ratio: 4 / 3; display: grid; place-items: center; background: #fff; border-radius: 2px; width: calc(100% - 2.5rem); margin: 3rem 1.25rem 1.25rem; padding: 0; }
.ys-jewelry-shop #article-40101 + .ys-selection-group .ys-unique-media { aspect-ratio: 4 / 5; --ys-jewel-image-width: 90%; --ys-jewel-image-ratio: 1; }
.ys-jewelry-shop .ys-unique-media > :not(button) { width: var(--ys-jewel-image-width) !important; height: auto !important; aspect-ratio: var(--ys-jewel-image-ratio); }
.ys-candle-shop .ys-unique-item .ys-unique-media { background: transparent; }
.ys-jewelry-shop .ys-unique-heading,
.ys-candle-shop .ys-unique-heading { margin: 0 !important; padding: 0 1.25rem; }
.ys-jewelry-shop .ys-unique-heading .fs-2,
.ys-candle-shop .ys-unique-heading .fs-2 { min-height: 2.6em; line-height: 1.3; align-items: flex-start !important; overflow-wrap: anywhere; }
.ys-jewelry-shop .ys-unique-heading .bi-info-circle,
.ys-candle-shop .ys-unique-heading .bi-info-circle,
.ys-jewelry-shop .ys-unique-type,
.ys-candle-shop .ys-unique-type,
.ys-jewelry-shop .ys-unique-serial,
.ys-candle-shop .ys-unique-serial { display: none; }
.ys-jewelry-shop .ys-unique-purchase,
.ys-candle-shop .ys-unique-purchase { padding: 0.75rem 1.25rem 1.25rem !important; }
.ys-jewelry-shop .ys-unique-pricing,
.ys-candle-shop .ys-unique-pricing { text-align: left !important; }
.ys-jewelry-shop .ys-selection-price sup,
.ys-candle-shop .ys-selection-price sup { font-size: 0.55em; top: -0.55em; }
.ys-jewelry-shop .ys-unique-actions,
.ys-candle-shop .ys-unique-actions { padding-top: 1rem !important; }
.ys-jewelry-shop .ys-unique-wishlist,
.ys-candle-shop .ys-unique-wishlist { position: absolute !important; top: 0.4rem; right: 0.4rem; z-index: 5; }
.ys-jewelry-shop .ys-unique-wishlist .ys-wishlist-button,
.ys-candle-shop .ys-unique-wishlist .ys-wishlist-button {
  display: grid; place-items: center; width: 44px !important; height: 44px; padding: 0;
  color: #75656d; border: 0; border-radius: 50%; background: transparent;
}
.ys-jewelry-shop .ys-unique-wishlist .ys-wishlist-button:hover,
.ys-candle-shop .ys-unique-wishlist .ys-wishlist-button:hover { background: rgba(104, 82, 96, 0.08); color: #51414b; }
.ys-jewelry-shop .ys-unique-wishlist .bi,
.ys-candle-shop .ys-unique-wishlist .bi { margin: 0 !important; }
.ys-jewelry-shop .ys-unique-wishlist .bi-heart-fill,
.ys-candle-shop .ys-unique-wishlist .bi-heart-fill { color: #a13b92 !important; }
.ys-jewelry-shop .ys-wishlist-button:has(.bi-heart-fill),
.ys-candle-shop .ys-wishlist-button:has(.bi-heart-fill) { background: rgba(234, 215, 231, 0.55); }
.ys-jewelry-shop .ys-wishlist-label,
.ys-candle-shop .ys-wishlist-label { display: none; }
.ys-jewelry-shop .ys-unique-item .ys-unique-actions .js-cart-button,
.ys-candle-shop .ys-unique-item .ys-unique-actions .js-cart-button {
  --bs-btn-color: #594f53; --bs-btn-bg: transparent; --bs-btn-border-color: #b8aaa9;
  --bs-btn-hover-color: #49434b; --bs-btn-hover-bg: #e6deda; --bs-btn-hover-border-color: #9c8996;
  min-height: 44px; padding: 0.5rem; font-size: 1rem !important; white-space: nowrap;
}
.ys-jewelry-shop .ys-unique-actions .js-cart-button:hover,
.ys-candle-shop .ys-unique-actions .js-cart-button:hover { background: linear-gradient(rgba(230, 222, 218, 0.75), rgba(230, 222, 218, 0.75)), url('../images/nature/faserpapier.webp') center / 600px auto; }
.ys-cart-status { display: flex; align-items: center; justify-content: center; gap: 0.3rem; min-height: 44px; padding: 0.5rem 2.25rem 0.5rem 0.5rem; border: 1px solid #a4bc92; border-radius: 3px; color: #487335; background: linear-gradient(rgba(216, 231, 205, 0.82), rgba(216, 231, 205, 0.82)), url('../images/nature/faserpapier.webp') center / 600px auto; font-size: 0.95rem; line-height: 1.3; text-align: center; }
.ys-cart-status-reserved { padding: 0.5rem; border-color: #c6beb4; color: #6b6258; background-image: linear-gradient(rgba(226, 220, 211, 0.82), rgba(226, 220, 211, 0.82)), url('../images/nature/faserpapier.webp'); }
.ys-cart-status .bi-check2,
.ys-jewelry-shop .btn-success .bi-check2,
.ys-candle-shop .btn-success .bi-check2 { flex-shrink: 0; font-size: 1.25em; line-height: 1; }
.ys-cart-remove { width: 32px; min-height: 40px; padding: 0.25rem; color: #626653; border: 0; background: transparent; }
.ys-cart-remove:hover { color: #544149; background: rgba(104, 82, 96, 0.08); }
.ys-cart-remove:focus-visible { outline: 2px solid #81747b; outline-offset: -2px; }
.modal[id^="removeUniqueFrom"] .modal-content { color: #49434b; border: 1px solid #d0c7bd; border-radius: 6px; background: linear-gradient(rgba(246, 242, 236, 0.65), rgba(246, 242, 236, 0.65)), url('../images/nature/faserpapier.webp') center / 900px auto; box-shadow: 0 1.5rem 4rem rgba(55, 47, 42, 0.18); font-family: 'BarlowSemiCondensed', sans-serif; }
.modal[id^="removeUniqueFrom"] .modal-header { align-items: flex-start; gap: 1rem; padding: 1.75rem 1.5rem 1rem; border: 0; }
.modal[id^="removeUniqueFrom"] .modal-title { font-family: 'Fraunces', Georgia, serif; font-size: clamp(1.55rem, 4vw, 2rem); font-weight: 300; letter-spacing: -0.035em; line-height: 1.2; }
.modal[id^="removeUniqueFrom"] .modal-body { padding: 0 1.5rem 0.75rem; color: #675e5a; font-size: 1.1rem; line-height: 1.5; text-align: left !important; }
.modal[id^="removeUniqueFrom"] .modal-footer { gap: 0.5rem; padding: 0.75rem 1.5rem 1.5rem; border: 0; }
.modal[id^="removeUniqueFrom"] .modal-footer .btn { min-height: 44px; padding: 0.5rem 1.25rem; border-radius: 3px; }
.modal[id^="removeUniqueFrom"] .btn-secondary { --bs-btn-color: #615a54; --bs-btn-bg: transparent; --bs-btn-border-color: #bcb3a9; --bs-btn-hover-color: #49434b; --bs-btn-hover-bg: #e4ddd4; --bs-btn-hover-border-color: #a69a91; --bs-btn-active-bg: #e4ddd4; --bs-btn-active-color: #49434b; --bs-btn-active-border-color: #a69a91; --bs-btn-focus-shadow-rgb: 129, 116, 123; }
.modal[id^="removeUniqueFrom"] .btn-danger { --bs-btn-color: #65485d; --bs-btn-bg: #e2d4dd; --bs-btn-border-color: #c5afbd; --bs-btn-hover-color: #51384a; --bs-btn-hover-bg: #d4bfce; --bs-btn-hover-border-color: #ad91a3; --bs-btn-active-bg: #d4bfce; --bs-btn-active-color: #51384a; --bs-btn-active-border-color: #ad91a3; --bs-btn-focus-shadow-rgb: 129, 116, 123; }
.ys-shipping-popover { --bs-popover-max-width: min(340px, calc(100vw - 24px)); --bs-popover-bg: #eee8e0; --bs-popover-border-color: #cfc5ba; --bs-popover-border-radius: 4px; --bs-popover-inner-border-radius: 3px; --bs-popover-header-bg: transparent; --bs-popover-header-color: #49434b; --bs-popover-body-color: #675e5a; --bs-popover-header-padding-x: 1.35rem; --bs-popover-header-padding-y: 1.1rem; --bs-popover-body-padding-x: 1.35rem; --bs-popover-body-padding-y: 1.1rem; font-family: 'BarlowSemiCondensed', sans-serif; background: linear-gradient(rgba(246, 242, 236, 0.65), rgba(246, 242, 236, 0.65)), url('../images/nature/faserpapier.webp') center / 600px auto; box-shadow: 0 0.6rem 1.8rem rgba(55, 47, 42, 0.14); }
.ys-shipping-popover .popover-header { border-bottom: 0; padding-bottom: 0; font-family: 'Fraunces', Georgia, serif; font-size: 1.65rem; font-weight: 300; letter-spacing: -0.035em; }
.ys-shipping-popover .popover-body { font-size: 1.05rem; line-height: 1.6; }
.ys-shipping-popover .popover-body strong { font-weight: 500; color: #65555f; }
.ys-jewelry-shop .js-cart-button:disabled,
.ys-candle-shop .js-cart-button:disabled { opacity: 1; color: #6b6258; border-color: #c6beb4; background: #e7e1d8; }
.ys-jewelry-shop .ys-unique-item .ys-unique-actions .btn-success,
.ys-candle-shop .ys-unique-item .ys-unique-actions .btn-success { color: #487335; border-color: #a4bc92; background: linear-gradient(rgba(216, 231, 205, 0.82), rgba(216, 231, 205, 0.82)), url('../images/nature/faserpapier.webp') center / 600px auto; }
.ys-jewelry-shop .ys-unique-media img { object-fit: cover; }
.ys-candle-shop .ys-unique-media img { object-fit: contain; }
/* Lokale Kerzenfreisteller: Motivbreite pro Typ, gemeinsame Standlinie. */
.ys-candle-cutout {
  --ys-cutout-width: 58%;
  --ys-cutout-bottom: 18%;
  position: relative;
}
.ys-candle-cutout[data-cutout-type="30101"],
.ys-candle-cutout[data-cutout-type="30201"] {
  --ys-cutout-width: 68%;
}
.ys-candle-cutout::before,
.ys-candle-cutout::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.ys-candle-cutout::before {
  left: 50%;
  bottom: calc(var(--ys-cutout-bottom) - 0.3%);
  width: var(--ys-cutout-width);
  height: 10%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse closest-side, rgba(65, 51, 44, 0.30) 50%, rgba(65, 51, 44, 0.14) 82%, transparent 100%);
  filter: blur(1.2px);
}
.ys-candle-cutout::after {
  left: calc(50% + var(--ys-cutout-width) * 0.276);
  bottom: calc(var(--ys-cutout-bottom) - 4%);
  width: 32%;
  height: 15%;
  transform: rotate(-25deg);
  transform-origin: left center;
  background: radial-gradient(ellipse closest-side, rgba(65, 51, 44, 0.105), rgba(65, 51, 44, 0.046) 48%, transparent 100%);
  filter: blur(8px);
}
.ys-candle-cutout[data-cutout-type^="302"]::before {
  height: 13%;
  border-radius: 0;
  background: url("../images/kerzen-freisteller/contact-30201.svg") center / 100% 100% no-repeat;
}
.ys-candle-cutout[data-cutout-type="30202"]::before {
  height: 11%;
  background-image: url("../images/kerzen-freisteller/contact-30202.svg");
}
.ys-candle-shop .ys-candle-cutout img,
.ys-candle-detail .ys-candle-cutout img {
  position: absolute;
  left: 50%;
  bottom: var(--ys-cutout-bottom);
  width: var(--ys-cutout-width);
  height: auto;
  max-height: none;
  transform: translateX(-50%);
  z-index: 1;
}
.ys-jewelry-shop .ys-unique-card .font-marvel,
.ys-candle-shop .ys-unique-card .font-marvel { font-family: 'BarlowSemiCondensed', sans-serif; font-weight: 400 !important; }
.ys-jewelry-shop .ys-unique-card .fs-2,
.ys-candle-shop .ys-unique-card .fs-2 { font-size: 1.5rem !important; }
.ys-jewelry-shop .ys-unique-card .fs-5,
.ys-candle-shop .ys-unique-card .fs-5 { font-size: 1.05rem !important; }
.ys-jewelry-shop .ys-unique-card .fs-6,
.ys-candle-shop .ys-unique-card .fs-6 { font-size: 0.85rem !important; }
.ys-jewelry-shop .ys-unique-card .text-black,
.ys-candle-shop .ys-unique-card .text-black { color: #49434b !important; }
.ys-jewelry-shop .ys-unique-card .col-9,
.ys-candle-shop .ys-unique-card .col-9 { padding-right: 0.75rem; }
.ys-jewelry-shop .ys-unique-card .text-nowrap,
.ys-candle-shop .ys-unique-card .text-nowrap { font-size: 1.15rem !important; white-space: normal !important; }
.ys-jewelry-shop .ys-selection-price,
.ys-candle-shop .ys-selection-price { color: #49434b; font-size: 1.7rem !important; }
.ys-jewelry-shop .ys-unique-card .small,
.ys-candle-shop .ys-unique-card .small { font-size: 0.8rem; }
.ys-jewelry-shop .ys-unique-card .text-primary,
.ys-candle-shop .ys-unique-card .text-primary { color: #8a7685 !important; }
.ys-jewelry-shop .ys-card-swiper-prev,
.ys-candle-shop .ys-card-swiper-prev,
.ys-jewelry-shop .ys-card-swiper-next,
.ys-candle-shop .ys-card-swiper-next { top: clamp(6rem, 12vw, 12rem); color: #75656d; }
.ys-jewelry-shop .ys-show-more-uniques,
.ys-candle-shop .ys-show-more-uniques { background: transparent; border: 1px solid #9c8996; border-radius: 2px !important; color: #594f53; padding: 0.7rem 1.5rem; }
.ys-jewelry-shop .ys-show-more-uniques:hover,
.ys-candle-shop .ys-show-more-uniques:hover { background: #ded2db; }
.ys-jewelry-shop .btn-dark,
.ys-candle-shop .btn-dark,
.ys-candle-detail .btn-dark { --bs-btn-bg: #685260; --bs-btn-border-color: #685260; --bs-btn-hover-bg: #51414b; --bs-btn-hover-border-color: #51414b; --bs-btn-active-bg: #51414b; --bs-btn-active-border-color: #51414b; border-radius: 2px; padding: 0.7rem 1rem; }
.ys-jewelry-shop .ys-wishlist-button,
.ys-candle-shop .ys-wishlist-button,
.ys-candle-detail .ys-wishlist-button { --bs-btn-color: #685260; --bs-btn-border-color: #ac98a6; --bs-btn-hover-bg: #e2d6de; --bs-btn-hover-color: #51414b; --bs-btn-hover-border-color: #8a7685; border-radius: 2px; }
.ys-jewelry-shop a:focus-visible,
.ys-candle-shop a:focus-visible,
.ys-jewelry-shop button:focus-visible,
.ys-candle-shop button:focus-visible,
.ys-candle-detail a:focus-visible,
.ys-candle-detail button:focus-visible { outline: 2px solid #685260; outline-offset: 4px; }
.ys-shop-note {
  padding: 3.5rem 0;
  background: linear-gradient(rgba(234, 230, 224, 0.72), rgba(234, 230, 224, 0.72)), url('../images/nature/faserpapier.webp') center / 1200px auto;
}
.ys-shop-note p { font-size: 1.2rem; margin-bottom: 1rem; }

.ys-candle-detail .ys-details-header { padding-top: 3rem !important; margin-bottom: 2rem; }
.ys-jewelry-detail h1,
.ys-candle-detail h1 { color: #49434b; font-family: 'Fraunces', Georgia, serif; font-size: clamp(2.5rem, 4.8vw, 4.5rem) !important; font-weight: 300; letter-spacing: -0.04em; line-height: 1.15; }
.ys-candle-detail .ys-details-header h2 { font-family: 'BarlowSemiCondensed', sans-serif; font-size: 1.3rem !important; color: #75656d; }
.ys-candle-detail .ys-details-meta-line { color: #75656d; font-size: 0.9rem; margin-top: 0.75rem; }
.ys-candle-detail .ys-details-card { background: #e8e0e5; border-radius: 2px; box-shadow: none !important; }
.ys-candle-detail .ys-details-card .card-body { padding: clamp(1rem, 3vw, 2.5rem) !important; }
.ys-candle-detail .ys-details-image { aspect-ratio: auto; border-radius: 0; }
.ys-candle-detail .ys-details-image img { height: auto; }
.ys-candle-detail .ys-details-image.ys-candle-cutout { aspect-ratio: 1 / 1; }
.ys-candle-detail .ys-magnifier-lens { border-color: #cec8c1; background-color: #e1dfda; box-shadow: 0 8px 24px rgba(66, 48, 41, 0.18); }
.ys-candle-detail .ys-zoom-hint { color: #75656d; font-size: 0.75rem; }
.ys-candle-detail .ys-purchase-panel { padding: 1.5rem 2rem 2rem; }
.ys-purchase-eyebrow { color: #75656d; font-size: 0.75rem; letter-spacing: 0.13em; text-transform: uppercase; }
.ys-purchase-intro { font-size: 1.2rem; line-height: 1.6; margin-bottom: 2rem; }
.ys-candle-detail .ys-purchase-panel .font-marvel { font-family: 'BarlowSemiCondensed', sans-serif; font-weight: 400 !important; }
.ys-candle-detail .ys-info-block { border-top: 1px solid #cfc2c4; margin-top: 4rem; max-width: none; }
.ys-candle-detail .ys-info-block h3,
.ys-candle-detail .ys-product-details h3 { font-family: 'Fraunces', Georgia, serif; font-size: clamp(1.8rem, 2.7vw, 2.4rem) !important; font-weight: 300 !important; letter-spacing: -0.03em; }
.ys-candle-detail .ys-info-text { font-family: 'BarlowSemiCondensed', sans-serif; font-size: 1.2rem; max-width: 65ch; }
.ys-candle-detail .ys-detail-key,
.ys-candle-detail .ys-detail-value,
.ys-candle-detail .ys-safety-list { font-family: 'BarlowSemiCondensed', sans-serif; font-size: 1.05rem; line-height: 1.6; }
.ys-candle-detail .ys-detail-row { border-color: #cfc2c4; padding-bottom: 0.9rem; }
.ys-candle-detail .ys-detail-key { font-weight: 500; }
.ys-candle-detail .link-primary,
.ys-candle-detail .ys-info-text a,
.ys-candle-detail .ys-detail-value a { color: #685260 !important; text-underline-offset: 0.25em; }
.ys-candle-detail .btn-outline-light { color: #685260; border-color: #ac98a6; border-radius: 2px !important; }

/* Bestellbestätigung: bestehende Wildblumen, rein dekorativ. */
.ys-checkout-confirmation-layout { align-items: center; gap: clamp(2rem, 5vw, 5rem); }
.ys-checkout-botanicals { position: relative; flex: 1 1 18rem; max-width: 22rem; height: 32rem; pointer-events: none; }
.ys-checkout-botanicals span { position: absolute; bottom: 0; width: 60%; height: 100%; mask: url('../images/nature/wildblume-110.svg') center bottom / contain no-repeat; background: #7d9190; opacity: 0.5; }
.ys-checkout-botanicals span + span { right: 0; height: 76%; mask-image: url('../images/nature/wildblume-94.svg'); background: #a18b9a; transform: rotate(8deg); transform-origin: center bottom; }
@media (max-width: 991.98px) {
  .ys-checkout-confirmation-layout { flex-direction: column; }
  .ys-checkout-botanicals { flex: none; width: 13rem; height: 15rem; }
}

/* Standardartikel: dieselbe Papierwelt, mit normaler Mengensteuerung. */
.ys-candle-shop .ys-accessory-group { margin-top: clamp(3rem, 6vw, 6rem); scroll-margin-top: 2rem; }
.ys-candle-shop .ys-standard-copy { padding: 1.5rem 1.25rem 0.25rem; }
.ys-candle-shop .ys-standard-title { color: #49434b; border: 0; border-radius: 0; }
.ys-candle-shop .ys-standard-title h3 { font-family: 'BarlowSemiCondensed', sans-serif; font-size: 1.4rem; font-weight: 400; line-height: 1.35; margin: 0 0 0.5rem; }
.ys-candle-shop .ys-standard-meta { color: #746c66; font-size: 0.9rem; line-height: 1.5; margin: 0; }
.ys-candle-shop .ys-standard-item .ys-standard-media { width: calc(100% - 2.5rem); margin: 1.25rem 1.25rem 0; padding: 0; aspect-ratio: 4 / 3; background: #fff; }
.ys-candle-shop .ys-standard-media img { width: 100%; height: 100%; object-fit: contain; }
.ys-candle-shop .ys-standard-item .ys-unique-actions { padding-top: 1rem !important; }
:is(.ys-candle-shop, .ys-standard-detail) .js-standard-cart-form .btn { border-radius: 2px; font-size: 1rem !important; }
:is(.ys-candle-shop, .ys-standard-detail) .js-standard-cart-form .btn-group { border: 1px solid #a4bc92; border-radius: 2px; background: linear-gradient(rgba(216, 231, 205, 0.82), rgba(216, 231, 205, 0.82)), url('../images/nature/faserpapier.webp') center / 600px auto; }
:is(.ys-candle-shop, .ys-standard-detail) .js-standard-cart-form .btn-group > .btn-success { min-height: 44px; color: #487335; background: transparent; border: 0; padding: 0.5rem 0.25rem; display: flex; align-items: center; justify-content: center; }
:is(.ys-candle-shop, .ys-standard-detail) .js-standard-cart-form .ys-standard-cart-step { flex: 0 0 44px; font-size: 1.35rem !important; }
:is(.ys-candle-shop, .ys-standard-detail) .js-standard-cart-form .ys-standard-cart-step:hover { background: rgba(115, 151, 95, 0.14); }
:is(.ys-candle-shop, .ys-standard-detail) .js-standard-cart-form .ys-standard-cart-label { min-width: 0; white-space: nowrap; }
.ys-standard-detail .ys-detail-stage { max-width: 32rem; width: 100%; justify-self: center; margin-top: 1.5rem; }
.ys-standard-detail-image { display: block; width: 100%; aspect-ratio: 4 / 3; padding: clamp(1.5rem, 3vw, 3rem); object-fit: contain; background: #fff; }
.ys-standard-detail .ys-detail-stage figcaption { display: block; padding: 1rem 1.25rem; }
.ys-standard-purchase-note { margin-top: 1.25rem; max-width: 38ch; color: #746c66; font-size: 0.95rem; line-height: 1.6; }
.ys-standard-care { margin-top: 1.75rem; max-width: 48ch; font-size: 1.05rem; line-height: 1.6; }

@media (max-width: 767.98px) {
  .ys-candle-shop .ys-standard-item:not(:last-child) { margin-bottom: 2rem !important; }
}

/* Firma und Rechtliches: ruhige Lesespalte auf hellem Faserpapier. */
.ys-info-page {
  color: #49434b;
  background: linear-gradient(rgba(244, 241, 235, 0.86), rgba(244, 241, 235, 0.86)), url('../images/nature/faserpapier.webp') center / 1000px auto;
  font-family: 'BarlowSemiCondensed', sans-serif;
  font-size: 1.125rem;
  line-height: 1.75;
  padding: clamp(3.5rem, 7vw, 7rem) 0 clamp(5rem, 9vw, 9rem);
  overflow-wrap: anywhere;
}
.ys-info-content { max-width: 50rem; }
.ys-info-page h1.home-nature-title { font-size: clamp(2.6rem, 5vw, 4.6rem); margin-bottom: 3rem; hyphens: auto; }
.ys-info-page h2, .ys-info-page h3, .ys-info-page h4 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 300;
  font-variation-settings: 'SOFT' 20, 'WONK' 0;
  letter-spacing: -0.035em;
  line-height: 1.25;
  margin: 2.75rem 0 1.25rem;
  hyphens: auto;
}
.ys-info-page h2 { font-size: clamp(1.7rem, 2.8vw, 2.25rem); }
.ys-info-page h3, .ys-info-page h4 { font-size: clamp(1.4rem, 2.2vw, 1.75rem); }
.ys-info-page h5 { font-size: 1.2rem; line-height: 1.5; font-weight: 500; margin-bottom: 1rem; }
.ys-info-page p { margin-bottom: 1.25rem; }
.ys-info-page li { margin-bottom: 0.5rem; }
.ys-info-page strong { font-weight: 600; }
.ys-info-page a:not(.btn) { color: #685260; text-decoration-color: #b4a6af; text-underline-offset: 0.2em; }
.ys-info-page a:not(.btn):hover { color: #493b46; text-decoration-color: currentColor; }
.ys-info-page a:focus-visible { outline: 2px solid #95808e; outline-offset: 4px; }
.ys-info-page .btn-link { color: #685260; text-underline-offset: 0.2em; }
.ys-info-page .table { --bs-table-bg: transparent; --bs-table-color: #49434b; --bs-table-striped-bg: rgba(104, 82, 96, 0.045); --bs-table-border-color: #d6cec9; }
.ys-info-page .table > :not(caption) > * > * { padding: 0.9rem; }
.ys-info-page .form-control, .ys-info-page .form-select { background-color: rgba(255, 253, 249, 0.65); border-color: #c9c0bb; border-radius: 2px; font-size: 1rem; }
.ys-info-page .form-control:focus, .ys-info-page .form-select:focus { border-color: #95808e; box-shadow: 0 0 0 0.2rem rgba(104, 82, 96, 0.12); }
.ys-info-page .btn-dark { --bs-btn-bg: #65545f; --bs-btn-border-color: #65545f; --bs-btn-hover-bg: #493b46; --bs-btn-hover-border-color: #493b46; border-radius: 2px; padding: 0.65rem 1.25rem; }
.ys-info-about { font-size: 1.25rem; }
.ys-info-facts { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: 0.4rem 1.5rem; margin-bottom: 2rem; }
.ys-info-facts dt { font-weight: 400; color: #75656d; }
.ys-info-facts dd { margin: 0; }
@media (max-width: 575.98px) {
  .ys-info-facts { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ys-info-facts dd { margin-bottom: 0.8rem; }
}
.ys-info-about .ys-info-subline { color: #75656d; margin-top: -1.5rem; font-size: 1.4rem; }
@media print {
  .ys-info-page { background: #fff; color: #000; padding: 0; font-size: 11pt; }
  .ys-info-content { max-width: none; }
}

/* Kerzenwissen: Herstellung und Weiterleuchten im gemeinsamen Papierstil. */
.ys-candle-guide { color: #49434b; font-family: 'BarlowSemiCondensed', sans-serif; background: linear-gradient(rgba(238, 235, 229, 0.88), rgba(238, 235, 229, 0.88)), url('../images/nature/faserpapier.webp') center / 1200px auto; overflow: clip; }
.ys-candle-guide .home-nature-eyebrow { text-transform: uppercase; }
.ys-candle-guide h1.home-nature-title { font-size: clamp(3.3rem, 5.4vw, 5.6rem); }
.ys-candle-guide h2.home-nature-title { font-size: clamp(2.6rem, 3.8vw, 3.8rem); margin-bottom: 2rem; }
.ys-candle-guide p:not(.home-nature-eyebrow) { font-size: 1.15rem; line-height: 1.65; }
.ys-candle-guide .ys-guide-lead { font-size: clamp(1.2rem, 1.6vw, 1.4rem); max-width: 38ch; margin-bottom: 0; }
.ys-guide-hero { padding-top: clamp(2rem, 4vw, 4rem); padding-bottom: clamp(4rem, 8vw, 8rem); }
.ys-guide-photo { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 3px; }
.ys-guide-hero figcaption { color: #756d69; font-size: 0.9rem; margin-top: 0.9rem; }
.ys-guide-band, .ys-guide-section { padding-top: clamp(4rem, 8vw, 8rem); padding-bottom: clamp(4rem, 8vw, 8rem); }
.ys-guide-band { background: linear-gradient(rgba(230, 225, 228, 0.8), rgba(230, 225, 228, 0.8)), url('../images/nature/faserpapier.webp') center / 900px auto; }
.ys-guide-night .home-nature-eyebrow { color: #bdc6cf; }
.ys-guide-night p:not(.home-nature-eyebrow) { color: #d4d9dc; max-width: 42ch; }
.ys-guide-night .ys-detail-text-link { color: #f5eee4; text-decoration-color: #a2aea0; }
.ys-guide-light-intro .home-nature-title span { transform-origin: center; margin-left: -14.1%; }
.ys-guide-light-image { width: 100%; max-width: 19rem; height: auto; display: block; margin: 0 auto; }
.ys-guide-light-step { margin: 0; text-align: center; }
.ys-guide-light-step .ys-guide-light-image { height: 22rem; object-fit: contain; object-position: center bottom; }
.ys-guide-light-step figcaption { margin-top: 2rem; }
.ys-guide-light-step h2.home-nature-title { font-size: clamp(2.2rem, 3vw, 3rem); margin-bottom: 1.25rem; }
.ys-guide-light-step .home-nature-title span { transform-origin: center; margin-left: -14.1%; }
.ys-guide-light-step p { margin: 0 auto; }
.ys-guide-light-grid { --bs-gutter-y: clamp(4rem, 7vw, 7rem); }
.ys-guide-return { padding-top: clamp(4rem, 7vw, 6rem); padding-bottom: clamp(6rem, 10vw, 10rem); }
.ys-guide-intro-copy, .ys-guide-light-intro, .ys-guide-care { position: relative; isolation: isolate; }
.ys-guide-botanical { position: absolute; right: 0; top: -2rem; width: 5rem; height: 15rem; background: #9a8eaa; opacity: 0.28; mask: url('../images/nature/wildblume-110.svg') center / contain no-repeat; pointer-events: none; z-index: -1; }
.ys-guide-light-intro .ys-guide-botanical { right: 9%; top: 3rem; height: 18rem; background: #85998d; }
.ys-guide-blossom { display: block; width: 3rem; height: 3rem; margin-bottom: 1.5rem; background: #a78390; opacity: 0.65; mask: url('../images/nature/bluete-34.svg') center / contain no-repeat; }
@media (max-width: 575.98px) {
  .ys-candle-guide h1.home-nature-title { font-size: clamp(2.8rem, 11vw, 3.5rem); }
  .ys-candle-guide h2.home-nature-title { font-size: 2.5rem; }
  .ys-guide-light-image { max-width: 16rem; }
  .ys-guide-light-step .ys-guide-light-image { height: 19rem; }
  .ys-guide-botanical { width: 3rem; height: 10rem; }
  .ys-guide-light-intro .ys-guide-botanical { right: -0.5rem; top: 1rem; height: 12rem; opacity: 0.2; }
}

/* Kerzen-Detail: Produktbühne, Handarbeit und Weiterleuchten. */
.ys-jewelry-detail,
.ys-candle-product { padding: 0 0 clamp(6rem, 10vw, 10rem); font-family: 'BarlowSemiCondensed', sans-serif; }
.ys-detail-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; padding: 2rem 0; color: #746c66; font-size: 0.95rem; }
.ys-detail-back { --bs-btn-color: #65555f; --bs-btn-border-color: #c8bcc3; --bs-btn-hover-color: #49434b; --bs-btn-hover-border-color: #95808e; --bs-btn-active-color: #49434b; --bs-btn-active-border-color: #95808e; --bs-btn-focus-shadow-rgb: 104, 82, 96; display: inline-flex; align-items: center; gap: 0.7rem; min-height: 44px; padding: 0.45rem 1rem; border-radius: 2px; font-size: 1rem; background: linear-gradient(rgba(231, 224, 227, 0.8), rgba(231, 224, 227, 0.8)), url('../images/nature/faserpapier.webp') center / 600px auto; }
.ys-detail-back span { font-size: 1.65rem; line-height: 1; }
.ys-detail-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-areas: 'image title' 'image buy'; grid-template-rows: auto 1fr; gap: 1.25rem clamp(2rem, 5vw, 5rem); }
.ys-detail-title { grid-area: title; padding-top: clamp(1rem, 2vw, 2rem); }
.ys-jewelry-detail h1,
.ys-candle-product h1 { font-size: clamp(2.25rem, 3.8vw, 3.6rem) !important; margin: 0 0 1.5rem; }
.ys-jewelry-detail h2,
.ys-candle-product h2 { font-size: clamp(2.25rem, 3.5vw, 3.4rem); margin: 0 0 clamp(2rem, 3vw, 3rem); }
.ys-jewelry-detail .ys-purchase-eyebrow,
.ys-candle-product .ys-purchase-eyebrow { color: #756d69; font-size: 0.78rem; margin-bottom: 1rem; }
.ys-detail-size { color: #756d69; font-size: 1.1rem; margin: 0; }
.ys-detail-unique-name { color: #75616f; font-size: 1.2rem; line-height: 1.4; margin: -0.25rem 0 1rem; }
.ys-detail-stage { grid-area: image; align-self: start; position: relative; margin: 0; background: linear-gradient(rgba(205, 202, 199, 0.35), rgba(205, 202, 199, 0.35)), url('../images/nature/faserpapier.webp') center / 600px auto; border: 1px solid rgba(95, 87, 80, 0.09); border-radius: 3px; }
.ys-candle-product .ys-detail-stage .ys-details-image { margin: 0; aspect-ratio: 1 / 1; }
.ys-candle-product .ys-detail-stage .ys-candle-cutout { --ys-cutout-width: 64.96%; --ys-cutout-bottom: 12%; }
.ys-candle-product .ys-detail-stage .ys-candle-cutout[data-cutout-type="30101"],
.ys-candle-product .ys-detail-stage .ys-candle-cutout[data-cutout-type="30201"] { --ys-cutout-width: 76.16%; }
.ys-candle-product .ys-detail-stage .ys-details-image:not(.ys-candle-cutout) img { width: 100%; height: 100%; object-fit: contain; }
.ys-detail-stage figcaption { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: end; gap: 0.75rem; padding: 0 1.25rem 1.25rem; color: #746c66; font-size: 0.82rem; }
.ys-detail-zoom-hint { text-align: right; }
.ys-detail-zoom-hint .bi { display: block; margin-bottom: 0.35rem; color: #65555f; font-size: 1.5rem; line-height: 1; }
.ys-detail-image-missing { display: grid; place-items: center; aspect-ratio: 1; color: #746c66; }
.ys-detail-buy { grid-area: buy; min-width: 0; }
.ys-detail-intro { max-width: 42ch; font-size: 1.15rem; line-height: 1.6; margin-bottom: clamp(2rem, 3vw, 2.75rem); }
.ys-detail-price { font-size: 2.4rem; line-height: 1.2; }
.ys-detail-price sup { font-size: 0.53em; top: -0.6em; }
.ys-detail-tax { color: #746c66; margin: 0.5rem 0 1.5rem; }
.ys-detail-tax a { color: inherit; text-underline-offset: 0.2em; }
.ys-detail-actions { max-width: 25rem; }
.ys-jewelry-detail .js-cart-button,
.ys-candle-product .js-cart-button { font-size: 1.05rem !important; min-height: 48px; background: linear-gradient(rgba(99, 85, 96, 0.94), rgba(99, 85, 96, 0.94)), url('../images/nature/faserpapier.webp') center / 600px auto; }
.ys-jewelry-detail .js-cart-button:hover,
.ys-candle-product .js-cart-button:hover { background-color: #51414b; background-image: none; }
.ys-jewelry-detail .ys-unique-wishlist .btn,
.ys-candle-product .ys-unique-wishlist .btn { min-height: 44px; font-size: 1rem !important; }
.ys-jewelry-detail .ys-unique-wishlist .btn-outline-secondary,
.ys-candle-product .ys-unique-wishlist .btn-outline-secondary { border-color: transparent; color: #75616f; }
.ys-jewelry-detail .ys-unique-wishlist .btn-outline-dark,
.ys-candle-product .ys-unique-wishlist .btn-outline-dark { border-color: transparent; color: #783168; background: rgba(234, 215, 231, 0.35); }
.ys-jewelry-detail .ys-unique-wishlist .text-danger,
.ys-candle-product .ys-unique-wishlist .text-danger { color: #a13b92 !important; }
.ys-detail-afterlight { margin: 2.5rem 0 0; color: #756d69; font-size: 0.95rem; line-height: 1.6; }
.ys-detail-afterlight a { color: #65555f; text-decoration: none; text-underline-offset: 0.25em; }
.ys-detail-afterlight a:hover, .ys-detail-afterlight a:focus-visible { text-decoration: underline; }
.ys-detail-making { padding: clamp(6rem, 14vw, 14rem) 0 clamp(4rem, 8vw, 8rem); }
.ys-detail-closeups { max-width: 70rem; margin: 0 auto; padding-top: clamp(5rem, 10vw, 10rem); }
.ys-detail-closeups figcaption { margin-top: 0.75rem; color: #756d69; font-size: 0.9rem; }
.ys-detail-crop { overflow: hidden; aspect-ratio: 4 / 3; border-radius: 3px; background: url('../images/nature/faserpapier.webp') center / 600px auto; }
.ys-detail-crop-image { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(2.2); }
.ys-detail-crop-left .ys-detail-crop-image { transform-origin: 30% 40%; }
.ys-detail-crop-right .ys-detail-crop-image { transform-origin: 70% 40%; }
.ys-detail-crop-left-lower .ys-detail-crop-image { transform-origin: 30% 78%; }
.ys-detail-crop-right-lower .ys-detail-crop-image { transform-origin: 70% 78%; }
.ys-detail-closeups + .ys-detail-making { padding-top: clamp(5rem, 10vw, 10rem); }
.ys-detail-making p:not(.ys-purchase-eyebrow), .ys-detail-afterglow p:not(.ys-purchase-eyebrow) { font-size: 1.15rem; line-height: 1.65; max-width: 43ch; margin-bottom: 1.5rem; }
.ys-detail-making-image { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 3px; }
.ys-detail-text-link { color: #65555f; text-decoration: underline; text-underline-offset: 0.35em; text-decoration-color: #b1a3ac; }
.ys-detail-text-link:hover { color: #49434b; text-decoration-color: currentColor; }
.ys-detail-afterglow { padding: clamp(1.5rem, 4vw, 3.5rem); border-radius: 3px; scroll-margin-top: 6rem; }
.ys-detail-afterglow img { width: 100%; display: block; border-radius: 3px; }
.ys-detail-afterglow .home-light-image { max-width: 20rem; margin: 0 auto; }
.ys-candle-product .ys-detail-afterglow .ys-purchase-eyebrow, .ys-detail-afterglow figcaption { color: #bdc6cf; }
.ys-detail-afterglow figcaption { margin-top: 0.75rem; font-size: 0.8rem; }
.ys-detail-afterglow .ys-detail-text-link { color: #f0ece5; text-decoration-color: #a2aea0; }
.ys-detail-facts { padding: clamp(4rem, 8vw, 8rem) 0 3rem; }
.ys-detail-specs { margin: 0; font-size: 1.05rem; }
.ys-detail-specs > div { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 1rem; padding: 0.85rem 0; border-bottom: 1px solid #d6cec6; }
.ys-detail-specs dt { font-weight: 400; color: #756d69; }
.ys-detail-specs dd { margin: 0; overflow-wrap: anywhere; }
.ys-detail-safety p, .ys-detail-safety li { font-size: 1.05rem; line-height: 1.6; }
.ys-detail-safety ul { padding-left: 1.1rem; }
.ys-detail-safety li { padding-left: 0.35rem; margin-bottom: 0.65rem; }
.ys-detail-return { padding-top: 2rem; text-align: center; font-size: 1.15rem; }
.ys-jewelry-detail .ys-detail-stage { width: 100%; max-width: 27rem; justify-self: center; }
.ys-jewelry-detail .ys-details-image { display: grid; place-items: center; aspect-ratio: auto; min-height: 25rem; padding: 2rem 0; background: #fff; border-radius: 2px; }
.ys-jewelry-detail .ys-details-image img { width: 82%; max-width: 21rem; height: auto; aspect-ratio: 1; object-fit: cover; }
.ys-jewelry-detail .ys-detail-stage figcaption { padding-top: 1.25rem; }
.ys-detail-pair-label { color: #756d69; font-size: 0.95rem; margin-bottom: 0.35rem; }
.ys-jewelry-pack-note { max-width: 40ch; margin: 1.75rem 0 0; color: #756d69; font-size: 1rem; line-height: 1.6; }
.ys-jewelry-detail-story p:not(.ys-purchase-eyebrow) { font-size: 1.15rem; line-height: 1.65; max-width: 43ch; }
@media (min-width: 992px) {
  .ys-jewelry-detail .ys-detail-stage { max-width: 30rem; margin-top: clamp(1rem, 2vw, 2rem); }
  .ys-jewelry-detail .ys-details-image img { max-width: 23.5rem; }
}
@media (max-width: 991.98px) {
  .ys-detail-hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'title' 'image' 'buy'; gap: 1.5rem; }
  .ys-detail-title { padding: 0; }
  .ys-detail-stage { width: 100%; max-width: 38rem; margin: 0 auto; }
  .ys-detail-actions, .ys-detail-intro { max-width: none; }
  .ys-detail-buy { padding-top: 0.5rem; }
}
@media (max-width: 575.98px) {
  .ys-detail-breadcrumb { font-size: 0.85rem; padding: 1.5rem 0; gap: 0.25rem 0.5rem; }
  .ys-jewelry-detail h1,
  .ys-candle-product h1 { font-size: clamp(2rem, 8.5vw, 2.75rem) !important; }
  .ys-jewelry-detail .ys-details-image { min-height: 19rem; padding: 1.5rem 0; }
  .ys-jewelry-detail .ys-details-image img { max-width: 17rem; }
  .ys-detail-size { font-size: 1rem; }
  .ys-detail-stage figcaption { font-size: 0.75rem; padding: 0 1rem 1rem; }
  .ys-detail-specs > div { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; }
  .ys-detail-specs dt { font-size: 0.9rem; }
  .ys-detail-afterglow { padding: 1.5rem; }
}

@media (min-width: 1200px) {
  .ys-shop-selection > .container { max-width: 1680px; width: 92%; }
  .ys-jewelry-shop .ys-unique-item,
  .ys-candle-shop .ys-unique-item { padding: 1.25rem !important; }
}

@media (prefers-reduced-motion: no-preference) {
  .ys-jewelry-shop .ys-card-waiting,
  .ys-candle-shop .ys-card-waiting {
    opacity: 0.88;
    transform: translateY(-10px);
    transition: opacity 1100ms ease-out, transform 1100ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .ys-jewelry-shop .ys-card-waiting.ys-card-arrive,
  .ys-candle-shop .ys-card-waiting.ys-card-arrive { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html:has(.ys-jewelry-shop),
  html:has(.ys-candle-shop) { scroll-behavior: auto; }
}

@media (max-width: 991.98px) {
  .ys-shop-nav { margin-bottom: 2.5rem; }
  .ys-shop-family { height: clamp(6rem, 29vw, 12rem); margin-top: 4rem; gap: 0.75rem; }
  .ys-candle-shop #article-30101 h2::after { left: calc(100% + 1rem); width: 3rem; height: 3rem; }
  .ys-candle-detail .ys-purchase-panel { padding: 1rem 0.75rem; }
}

@media (max-width: 575.98px) {
  .ys-jewelry-shop .ys-cart-status,
  .ys-candle-shop .ys-cart-status { padding: 0.5rem 2rem 0.5rem 0.25rem; gap: 0.125rem; font-size: 0.85rem; white-space: nowrap; }
  .ys-jewelry-shop .ys-cart-status-reserved,
  .ys-candle-shop .ys-cart-status-reserved { padding-inline: 0.25rem; }
  .ys-shop-intro { padding-top: 1.5rem; }
  .ys-shop-nav { gap: 0.4rem 1.2rem; font-size: 0.95rem; }
  .ys-shop-intro .home-nature-title { font-size: 2.8rem; }
  .ys-shop-sizes { gap: 0.75rem; padding: 0.55rem 1rem; font-size: 0.85rem; }
  .ys-shop-sizes a { flex: 1; justify-content: center; text-align: center; line-height: 1.3; min-height: 44px; }
  .ys-candle-shop #article-30101 h2::after { display: none; }
  .ys-jewelry-shop .ys-unique-item,
  .ys-candle-shop .ys-unique-item { padding: 0.3rem !important; }
  .ys-jewelry-shop .ys-selection-group,
  .ys-candle-shop .ys-selection-group { margin-left: 0; margin-right: 0; }
  .ys-jewelry-shop .ys-unique-heading,
  .ys-candle-shop .ys-unique-heading { padding: 0 0.65rem; }
  .ys-jewelry-shop .ys-unique-heading .fs-2,
  .ys-candle-shop .ys-unique-heading .fs-2 { min-height: 2.4em; font-size: 1.15rem !important; line-height: 1.2; }
  .ys-jewelry-shop .ys-unique-purchase,
  .ys-candle-shop .ys-unique-purchase { padding: 0.65rem !important; }
  .ys-jewelry-shop .ys-selection-price,
  .ys-candle-shop .ys-selection-price { font-size: 1.5rem !important; }
  .ys-jewelry-shop .ys-unique-card .small,
  .ys-candle-shop .ys-unique-card .small { font-size: 0.7rem; line-height: 1.35; }
  .ys-jewelry-shop .ys-cart-prefix,
  .ys-candle-shop .ys-cart-prefix { display: none; }
  .ys-jewelry-shop .ys-unique-wishlist,
  .ys-candle-shop .ys-unique-wishlist { top: 0; right: 0; }
  .ys-candle-shop .ys-candle-cutout { --ys-cutout-width: 66%; --ys-cutout-bottom: 12%; }
  .ys-candle-shop .ys-candle-cutout[data-cutout-type="30101"],
  .ys-candle-shop .ys-candle-cutout[data-cutout-type="30201"] { --ys-cutout-width: 76%; }
  .ys-jewelry-shop .ys-card-swiper-prev,
  .ys-candle-shop .ys-card-swiper-prev,
  .ys-jewelry-shop .ys-card-swiper-next,
  .ys-candle-shop .ys-card-swiper-next { top: 9rem; }
  .ys-candle-detail .ys-details-header { padding-top: 2rem !important; }
  .ys-candle-detail .ys-headline-wrap { gap: 1.5rem; }
}