/* LigniArt 2.9.8 · Einheitliche Typografie im öffentlichen Shop.
   Maßstab: Produktkarten. Schriftfamilien und Farben bleiben unverändert. */
:root{
  /* Produktbeschreibung = 1rem, Produkttitel = 1.6875rem.
     Daraus wird die komplette redaktionelle Hierarchie abgeleitet. */
  --la-type-body:1rem;
  --la-type-h1:clamp(2.15rem,2.7vw,2.75rem);
  --la-type-h2:clamp(1.85rem,2.1vw,2.2rem);
  --la-type-h3:clamp(1.45rem,1.65vw,1.6875rem);
  --la-type-component:clamp(1.45rem,1.65vw,1.6875rem);
  --la-type-display:clamp(2.35rem,3.5vw,3.25rem);
}

body{font-size:var(--la-type-body)}
h1{font-size:var(--la-type-h1)}
h2{font-size:var(--la-type-h2)}
h3{font-size:var(--la-type-h3)}

/* Große redaktionelle Überschriften folgen einer einzigen Hierarchie. */
.hero h1,
.la-cinema h1{font-size:var(--la-type-display)}

.page-intro h1,
.feature-copy h1,
.product-detail-copy h1,
.shop-product-copy h1,
.shop-page-head h1,
.shop-auth-narrow h1,
.shop-heading-inline h1,
.shop-legal h1,
.error-page h1{font-size:var(--la-type-h1)}

.intro-section h2,
.section-heading h2,
.feature-copy h2,
.occasion-section h2,
.story-copy h2,
.faq-split h2,
.idea-cta h2,
.editorial-text h2,
.cms-layout-page .feature-split .feature-copy h2,
.cms-product-group-content h2{font-size:var(--la-type-h2)}

.product-card-info h3,
.category-card h3,
.values-grid h3,
.cms-product-group-content h3{font-size:var(--la-type-h3)}

/* Funktions- und Panelüberschriften bleiben klar, aber nicht plakativ. */
.shop-panel h2,
.cart-summary>h2,
.dialog-top h2,
.contact-info>h2,
.shop-order-banner h2,
.drawer .shop-empty h2,
.empty-state h2,
.prose h2,
.atelier-panel h2,
.atelier-full-preview h2{font-size:var(--la-type-component)}

/* Fließtext: eine gemeinsame Basis im gesamten öffentlichen Shop. */
.hero-copy>p:not(.eyebrow),
.intro-section p:last-child,
.feature-copy p:not(.eyebrow),
.story-copy p:not(.eyebrow),
.faq-split>div:first-child>p:not(.eyebrow),
.page-intro>p:not(.eyebrow),
.editorial-text p:not(.eyebrow),
.values-grid p,
.prose,
.product-intro,
.contact-info>p,
.contact-detail,
.cms-layout-page .feature-split .feature-copy p:not(.eyebrow),
.cms-feature-more p,
.cms-product-group-content p,
.cms-product-group-content li{font-size:var(--la-type-body)}

/* FAQ und aufklappbare Detailbereiche verwenden dieselbe Leseschrift. */
.faq-list summary,
.faq-list details>div,
.cms-faq-list summary,
.cms-faq-list details>div,
.shop-product-details summary,
.shop-product-details details p,
.product-details summary,
.product-details>p{font-size:var(--la-type-body)}

/* Suchdialog und Warenkorb sollen die redaktionelle Skala nicht sprengen. */
.search-form>input{font-size:clamp(1.35rem,2vw,1.7rem)}
.shop-cart-row h3,
.drawer .shop-cart-row h3{font-size:var(--la-type-h3)}

@media(max-width:700px){
  :root{
    --la-type-body:1.0625rem;
    --la-type-h1:clamp(2rem,8vw,2.45rem);
    --la-type-h2:clamp(1.7rem,6.5vw,2rem);
    --la-type-h3:clamp(1.4rem,5.4vw,1.6rem);
    --la-type-component:clamp(1.4rem,5.4vw,1.6rem);
    --la-type-display:clamp(2.15rem,9vw,2.8rem);
  }
}


/* 2.9.8 · Produktgruppen-Landingpages: mehr Luft zu den Trennlinien.
   Der redaktionelle Inhalt bleibt im bestehenden Seitenraster. */
.cms-product-group-content{
  padding-block:clamp(42px,4vw,64px);
}
.cms-product-group-content > section:first-child > :first-child,
.cms-product-group-content > section:first-child > div > :first-child{
  margin-top:0;
}
.cms-product-group-content > section:last-child > :last-child,
.cms-product-group-content > section:last-child > div > :last-child{
  margin-bottom:0;
}
.cms-product-group-content > section + section{
  margin-top:clamp(34px,3.2vw,52px);
}
.cms-product-group-content p,
.cms-product-group-content li,
.cms-product-group-content details > div,
.cms-product-group-content details > p{
  line-height:1.65;
}

/* FAQ-Herz: ersetzt den nativen Dreieck-/Pfeilmarker links.
   Pfad identisch mit dem im Shop bereits verwendeten Herz-Icon. */
.cms-product-group-content details > summary{
  position:relative;
  list-style:none;
  padding-left:1.65rem;
}
.cms-product-group-content details > summary::-webkit-details-marker{display:none}
.cms-product-group-content details > summary::marker{content:''}
.cms-product-group-content details > summary::before{
  content:'';
  position:absolute;
  left:0;
  top:.38em;
  width:1rem;
  height:1rem;
  background-color:var(--olive);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1.1-1.1a5.5 5.5 0 0 0-7.8 7.8L12 21l8.8-8.6a5.5 5.5 0 0 0 0-7.8Z' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1.1-1.1a5.5 5.5 0 0 0-7.8 7.8L12 21l8.8-8.6a5.5 5.5 0 0 0 0-7.8Z' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.cms-product-group-content details[open] > summary::before{
  background-color:var(--olive-dark);
}

@media(max-width:700px){
  .cms-product-group-content{padding-block:36px 44px}
  .cms-product-group-content > section + section{margin-top:32px}
  .cms-product-group-content details > summary{padding-left:1.55rem}
}