/* Mari Can Hair – Storefront V6 "Feinschliff"
   Additive layer on top of V4/V5/ui-redesign. Keeps the existing design language
   (Schwarz, Beige, Rosé, Gold) and only refines spacing, depth and motion.
   Motion lives behind .mch6-motion, which storefront-v6.js sets only when the
   visitor has not asked for reduced motion. */

:root {
  --mch6-gold: #a97936;
  --mch6-gold-light: #d8b47a;
  --mch6-rose: #b97863;
  --mch6-ink: #201c1a;
  --mch6-cream: #faf7f4;
  --mch6-ease: cubic-bezier(.22, .8, .24, 1);
  --mch6-ease-soft: cubic-bezier(.4, 0, .2, 1);
  --mch6-shadow: 0 18px 50px rgba(40, 30, 22, .08);
  --mch6-shadow-hover: 0 28px 70px rgba(40, 30, 22, .16);
}

/* ---------- Scroll progress ---------- */
.mch6-progress {
  position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 200; pointer-events: none;
  background: linear-gradient(90deg, var(--mch6-gold), var(--mch6-gold-light), var(--mch6-rose));
  transform-origin: 0 50%; transform: scaleX(var(--mch6-scroll, 0));
}

/* ---------- Header: glass + compact on scroll ---------- */
.site-header.premium-header {
  position: sticky; top: 0; z-index: 90;
  background: rgba(255, 253, 250, .86);
  -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px);
  transition: box-shadow .35s var(--mch6-ease-soft), background-color .35s var(--mch6-ease-soft);
}
.site-header.premium-header.is-scrolled { box-shadow: 0 10px 30px rgba(40, 30, 22, .08); background: rgba(255, 253, 250, .94); }
.site-header .premium-header-grid { transition: padding .35s var(--mch6-ease-soft); }
.site-header.is-scrolled .premium-header-grid { padding-top: 8px; padding-bottom: 8px; }

/* Primary navigation: animated gold underline */
.nav-row a { position: relative; }
.nav-row a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px;
  background: var(--mch6-gold); transform: scaleX(0); transform-origin: 50% 50%;
  transition: transform .35s var(--mch6-ease);
}
.nav-row a:hover::after, .nav-row a:focus-visible::after, .nav-row a[aria-current="page"]::after { transform: scaleX(1); }

/* Search: icon left, placeholder left, soft focus ring */
.site-header .header-search { display: flex !important; align-items: center !important; }
.site-header .header-search button { order: -1; flex: 0 0 auto !important; width: auto !important; padding: 0 4px 0 16px !important; background: transparent !important; display: grid; place-items: center; }
.site-header .header-search input { flex: 1 1 auto !important; width: auto !important; min-width: 0; text-align: left !important; padding-left: 10px !important; }
.site-header .header-search input::placeholder { text-align: left !important; }
.header-search { transition: box-shadow .3s var(--mch6-ease-soft), border-color .3s var(--mch6-ease-soft); }
.header-search:focus-within { box-shadow: 0 0 0 4px rgba(169, 121, 54, .14); border-color: rgba(169, 121, 54, .55); }

/* Header icons */
.icon-action svg { transition: transform .3s var(--mch6-ease); }
.icon-action:hover svg { transform: translateY(-2px); }

/* ---------- Topbar: one calm line; on phones the messages rotate ---------- */
.topbar-premium .topbar-grid span { white-space: nowrap; }
@media (max-width: 760px) {
  .topbar-premium .topbar-grid.mch6-ticker { display: flex !important; justify-content: center !important; }
  .topbar-premium .topbar-grid.mch6-ticker span { display: none !important; }
  .topbar-premium .topbar-grid.mch6-ticker span.is-active { display: inline-flex !important; animation: mch6-fade .6s var(--mch6-ease-soft); }
  .topbar-premium .topbar-grid.mch6-ticker span::after { display: none !important; }
}

/* ---------- Hero: room for the button, image keeps its label ---------- */
body.storefront-body .hair-hero { overflow: hidden; }
@media (min-width: 900px) {
  body.storefront-body .hair-hero { height: clamp(400px, 31vw, 480px) !important; min-height: 0 !important; }
  body.storefront-body .hair-hero .hair-hero-copy { height: auto !important; padding-top: 40px !important; padding-bottom: 40px !important; }
}
body.storefront-body .hair-hero .hair-hero-media { position: relative; overflow: hidden; }
/* Hero and service strip share the content edges of the sections below */
@media (min-width: 900px) {
  body.storefront-body #main-content > .hair-hero.container, html body.storefront-body .service-strip.refined-services { width: calc(100% - 72px) !important; max-width: 1368px !important; margin-left: auto !important; margin-right: auto !important; }
}
@media (max-width: 899px) {
  body.storefront-body .service-strip.refined-services { margin-left: 16px !important; margin-right: 16px !important; width: auto !important; }
}
body.storefront-body .hair-hero .hero-product-label, body.storefront-body .hair-hero .hero-seal { z-index: 3; }
.hair-hero .hero-actions { margin-top: 28px; }
.hair-hero h1 em {
  background: linear-gradient(100deg, var(--mch6-rose) 0%, #c99a83 40%, var(--mch6-gold-light) 55%, var(--mch6-rose) 75%);
  background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hair-hero .hair-hero-media img { transform-origin: 60% 40%; }
.hair-hero .hero-seal { box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
@media (max-width: 760px) {
  .hair-hero { margin-left: 16px !important; margin-right: 16px !important; width: auto !important; }
}

/* ---------- Buttons: sheen + lift ---------- */
.button { position: relative; overflow: hidden; isolation: isolate; transition: transform .3s var(--mch6-ease), box-shadow .3s var(--mch6-ease), background-color .3s; }
.button::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%);
  transform: translateX(-120%);
}
.button:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(40, 30, 22, .18); }
.button:active { transform: translateY(0) scale(.98); }
.button span[aria-hidden="true"] { display: inline-block; transition: transform .3s var(--mch6-ease); }
.button:hover span[aria-hidden="true"] { transform: translate(3px, -3px); }

/* ---------- Category tiles ---------- */
.hair-category-card { overflow: hidden; isolation: isolate; box-shadow: var(--mch6-shadow); transition: transform .5s var(--mch6-ease), box-shadow .5s var(--mch6-ease); }
.hair-category-card::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(20, 14, 10, .05) 20%, rgba(20, 14, 10, .62) 100%);
}
.hair-category-card picture img { transition: transform 1.1s var(--mch6-ease); }
.hair-category-card .category-copy, .hair-category-card .category-index { z-index: 2; }
body.storefront-body .hair-category-card .category-index {
  top: 14px !important; left: auto !important; right: 14px !important; width: auto !important; line-height: 1; font-size: 10px; letter-spacing: .18em;
  padding: 4px 9px; border-radius: 999px; background: rgba(255, 255, 255, .18); color: #fff;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.hair-category-card .category-copy h3 { text-shadow: 0 2px 14px rgba(0, 0, 0, .35); letter-spacing: -.01em; }
.hair-category-card .category-copy p { color: rgba(255, 255, 255, .88) !important; }
.hair-category-card .category-copy b { transition: transform .4s var(--mch6-ease); }
.hair-category-card:hover { transform: translateY(-4px); box-shadow: var(--mch6-shadow-hover); }
.hair-category-card:hover picture img { transform: scale(1.07); }
.hair-category-card:hover .category-copy b { transform: translateX(6px); }

/* ---------- Service strip: aligned to container ---------- */
.service-strip.refined-services { border-radius: 18px; overflow: hidden; box-shadow: var(--mch6-shadow); }
.service-strip.refined-services svg { color: var(--mch6-gold); stroke: var(--mch6-gold); transition: transform .4s var(--mch6-ease); }
.service-strip.refined-services > div:hover svg { transform: translateY(-3px) rotate(-4deg); }

/* ---------- Section headings: gold rule draws in ---------- */
.section-head .eyebrow { position: relative; padding-left: 34px; }
.section-head .eyebrow::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 24px; height: 1px; background: var(--mch6-gold);
  transform-origin: 0 50%;
}

/* ---------- Product cards ---------- */
.product-card.premium-product-card { transition: transform .45s var(--mch6-ease), box-shadow .45s var(--mch6-ease); box-shadow: 0 1px 0 rgba(40, 30, 22, .04), var(--mch6-shadow); }
.product-card.premium-product-card:hover { transform: translateY(-6px); box-shadow: var(--mch6-shadow-hover); }
.product-card .product-card-media { overflow: hidden; }
.product-card .product-card-media img.product-image-primary { transition: transform .9s var(--mch6-ease); }
.product-card:hover .product-card-media img.product-image-primary { transform: scale(1.05); }
.product-card .product-media-action { transition: opacity .35s var(--mch6-ease), transform .35s var(--mch6-ease); }
.product-card .availability-pill i { animation: none; }
.product-card .product-price { font-variant-numeric: tabular-nums; }

/* "Neu & besonders": same 4-column rhythm as the rest instead of one giant card */
.latest-section .product-grid-compact { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 22px; }
@media (max-width: 1100px) { .latest-section .product-grid-compact { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (max-width: 760px) { .latest-section .product-grid-compact { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px; } }
.latest-section .product-grid-compact .product-card { max-width: none !important; }

/* ---------- Match + audience cards ---------- */
.match-visual .shade { transition: transform 1.2s var(--mch6-ease); will-change: transform; }
.audience-card { transition: transform .5s var(--mch6-ease), box-shadow .5s var(--mch6-ease); }
.audience-card:hover { transform: translateY(-4px); box-shadow: var(--mch6-shadow-hover); }

/* ---------- Footer links ---------- */
.site-footer a:not(.button) { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .35s var(--mch6-ease), color .25s; }
.site-footer a:not(.button):hover { background-size: 100% 1px; color: var(--mch6-gold-light); }

/* ---------- Back to top ---------- */
.mch6-top {
  position: fixed; right: 18px; bottom: 18px; z-index: 80; width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgba(169, 121, 54, .35); background: rgba(255, 253, 250, .92); color: var(--mch6-ink);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--mch6-shadow);
  display: grid; place-items: center; cursor: pointer; opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity .3s var(--mch6-ease-soft), transform .3s var(--mch6-ease);
}
.mch6-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.mch6-top:hover { transform: translateY(-3px); }
.mch6-top svg { width: 18px; height: 18px; }

/* ================= Motion (only with .mch6-motion) ================= */
.mch6-motion .hair-hero .hero-kicker-row,
.mch6-motion .hair-hero h1 > span,
.mch6-motion .hair-hero h1 > em,
.mch6-motion .hair-hero .hair-hero-copy > p,
.mch6-motion .hair-hero .hero-actions { opacity: 0; transform: translateY(16px); animation: mch6-rise .9s var(--mch6-ease) forwards; }
.mch6-motion .hair-hero h1 > span { animation-delay: .08s; }
.mch6-motion .hair-hero h1 > em { animation: mch6-rise .9s var(--mch6-ease) .2s forwards, mch6-shimmer 7s ease-in-out 1.4s infinite; }
.mch6-motion .hair-hero .hair-hero-copy > p { animation-delay: .32s; }
.mch6-motion .hair-hero .hero-actions { animation-delay: .44s; }
.mch6-motion .hair-hero .hair-hero-media img { animation: mch6-kenburns 18s ease-in-out infinite alternate; }
.mch6-motion .hair-hero .hero-seal { animation: mch6-float 6s ease-in-out infinite; }
.mch6-motion .button:hover::before { transform: translateX(120%); transition: transform .8s var(--mch6-ease-soft); }

.mch6-motion [data-mch6-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--mch6-ease), transform .9s var(--mch6-ease); transition-delay: var(--mch6-delay, 0s); }
.mch6-motion [data-mch6-reveal].is-in { opacity: 1; transform: none; }
.mch6-motion .section-head .eyebrow::before { transform: scaleX(0); transition: transform .9s var(--mch6-ease) .15s; }
.mch6-motion .section-head.is-in .eyebrow::before { transform: scaleX(1); }


@keyframes mch6-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes mch6-rise { to { opacity: 1; transform: none; } }
@keyframes mch6-shimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes mch6-kenburns { from { transform: scale(1); } to { transform: scale(1.08) translate(-1.2%, -1%); } }
@keyframes mch6-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

@media (prefers-reduced-motion: reduce) {
  .mch6-progress { display: none; }
  .button:hover, .product-card:hover, .hair-category-card:hover, .audience-card:hover { transform: none !important; }
}

/* Every product card (home, shop, related) gets the same inner spacing */
body.storefront-body .product-card.premium-product-card .product-card-body { padding: 13px 14px 14px !important; }