/* CLXON24 A+ UI layer — landing pages, search, cart and account
   Visual only: commerce, auth and checkout logic remain untouched. */

:root {
  --clx-a-blue: #079fe8;
  --clx-a-blue-strong: #007cc2;
  --clx-a-ink: #101318;
  --clx-a-muted: #667085;
  --clx-a-line: #e5e9ef;
  --clx-a-soft: #f4f7fa;
  --clx-a-blue-soft: #eef9ff;
  --clx-a-shadow: 0 24px 70px rgba(15, 23, 42, .09);
  --clx-a-shadow-sm: 0 10px 32px rgba(15, 23, 42, .07);
}

/* ---------- A+ landing pages ---------- */
body.page-silo-premium,
body.page-dog-premium {
  background: #f4f7fa;
  color: var(--clx-a-ink);
}

body.page-silo-premium .silo-page,
body.page-dog-premium .dog-hub {
  width: min(1240px, calc(100% - 40px));
  margin: 0 auto;
  padding: 28px 0 96px;
}

body.page-silo-premium .silo-breadcrumb,
body.page-dog-premium .hub-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  margin: 0 0 18px;
  color: #7a8493;
  font-size: .82rem;
  font-weight: 650;
}

body.page-silo-premium .silo-breadcrumb a,
body.page-dog-premium .hub-breadcrumb a {
  color: #4d5b6d;
  text-decoration: none;
}

body.page-silo-premium .silo-breadcrumb a:hover,
body.page-dog-premium .hub-breadcrumb a:hover {
  color: var(--clx-a-blue-strong);
}

body.page-silo-premium .hero,
body.page-dog-premium .hub-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(340px, .92fr);
  gap: clamp(30px, 5vw, 68px);
  align-items: center;
  overflow: hidden;
  padding: clamp(34px, 5vw, 68px);
  border: 1px solid #e4e9ef;
  border-radius: 32px;
  background:
    radial-gradient(circle at 88% 8%, rgba(7,159,232,.12), transparent 32%),
    linear-gradient(145deg, #ffffff 0%, #fbfdff 62%, #f0f9ff 100%);
  box-shadow: var(--clx-a-shadow);
  color: var(--clx-a-ink);
}

body.page-silo-premium .hero::before,
body.page-dog-premium .hub-hero::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 34%;
  height: 4px;
  background: linear-gradient(90deg, var(--clx-a-blue), #55c8ff);
}

body.page-silo-premium .eyebrow,
body.page-dog-premium .eyebrow {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin: 0 0 14px;
  padding: 7px 10px;
  border: 1px solid #cdeeff;
  border-radius: 999px;
  background: var(--clx-a-blue-soft);
  color: #0078b8;
  font-size: .7rem;
  font-weight: 850;
  letter-spacing: .11em;
  line-height: 1;
  text-transform: uppercase;
  opacity: 1;
}

body.page-silo-premium .hero h1,
body.page-dog-premium .hub-hero h1 {
  max-width: 760px;
  margin: 0;
  color: #0e1116;
  font-size: clamp(2.45rem, 5.1vw, 4.9rem);
  font-weight: 850;
  letter-spacing: -.055em;
  line-height: .98;
}

body.page-silo-premium .hero-lead,
body.page-dog-premium .hub-hero p:not(.eyebrow) {
  max-width: 720px;
  margin: 22px 0 0;
  color: #5c6675;
  font-size: clamp(1rem, 1.6vw, 1.17rem);
  line-height: 1.68;
  opacity: 1;
}

body.page-silo-premium .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
  margin-top: 28px;
}

body.page-silo-premium .button {
  min-height: 50px;
  padding: 13px 19px;
  border-radius: 13px;
  font-size: .92rem;
  font-weight: 800;
  letter-spacing: -.01em;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}

body.page-silo-premium .button:hover {
  transform: translateY(-2px);
}

body.page-silo-premium .button-primary {
  border: 1px solid var(--clx-a-blue);
  background: linear-gradient(135deg, #11abf1, #078fda);
  color: #fff;
  box-shadow: 0 12px 26px rgba(7,159,232,.24);
}

body.page-silo-premium .button-secondary {
  border: 1px solid #d6dde6;
  background: rgba(255,255,255,.86);
  color: #202733;
}

body.page-silo-premium .hero-benefits {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  opacity: 1;
}

body.page-silo-premium .hero-benefits li {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid #e1e7ee;
  border-radius: 999px;
  background: #fff;
  color: #425066;
  font-size: .78rem;
  font-weight: 750;
}

body.page-silo-premium .hero-benefits li::before {
  content: "✓";
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-right: 6px;
  border-radius: 50%;
  background: #eaf9ff;
  color: #008dcc;
  font-size: .65rem;
  font-weight: 900;
}

body.page-silo-premium .hero-media,
body.page-dog-premium .hub-hero-media {
  position: relative;
  margin: 0;
  padding: 11px;
  border: 1px solid #e1e6ec;
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 20px 50px rgba(15,23,42,.12);
}

body.page-silo-premium .hero-media::after,
body.page-dog-premium .hub-hero-media::after {
  content: "Geplottete Vinylfolie";
  position: absolute;
  right: 20px;
  bottom: 20px;
  padding: 8px 11px;
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 999px;
  background: rgba(10,16,24,.78);
  color: #fff;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .03em;
  backdrop-filter: blur(8px);
}

body.page-silo-premium .hero-media img,
body.page-dog-premium .hub-hero-media img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  background: #f6f7f9;
  object-fit: cover;
}

body.page-silo-premium .trust-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 16px 0 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}

body.page-silo-premium .trust-strip > div {
  position: relative;
  min-height: 132px;
  padding: 22px 20px 18px;
  overflow: hidden;
  border: 1px solid #e5e9ef;
  border-radius: 19px;
  background: #fff;
  color: #161a21;
  box-shadow: 0 8px 26px rgba(15,23,42,.045);
}

body.page-silo-premium .trust-strip > div::before {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-bottom: 14px;
  border-radius: 9px;
  background: var(--clx-a-blue-soft);
  color: #008dcc;
  font-size: .72rem;
  font-weight: 900;
}
body.page-silo-premium .trust-strip > div:nth-child(1)::before { content: "01"; }
body.page-silo-premium .trust-strip > div:nth-child(2)::before { content: "02"; }
body.page-silo-premium .trust-strip > div:nth-child(3)::before { content: "03"; }
body.page-silo-premium .trust-strip > div:nth-child(4)::before { content: "04"; }

body.page-silo-premium .trust-strip strong {
  color: #161a21;
  font-size: .98rem;
  font-weight: 800;
}

body.page-silo-premium .trust-strip span {
  margin-top: 6px;
  color: #6a7483;
  font-size: .82rem;
  line-height: 1.5;
  opacity: 1;
}

body.page-silo-premium .configurator-shell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(280px, .72fr);
  gap: 28px;
  margin-top: 72px;
  padding: clamp(30px, 5vw, 56px);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 30px;
  background:
    radial-gradient(circle at 88% 16%, rgba(7,159,232,.28), transparent 34%),
    linear-gradient(135deg, #0b1119 0%, #0f1c29 55%, #102f43 100%);
  color: #fff;
  box-shadow: 0 26px 72px rgba(5,12,20,.2);
}

body.page-silo-premium .configurator-shell .eyebrow {
  border-color: rgba(97,205,255,.26);
  background: rgba(7,159,232,.13);
  color: #64cfff;
}

body.page-silo-premium .configurator-shell h2 {
  max-width: 740px;
  margin: 0;
  color: #fff;
  font-size: clamp(2rem, 4vw, 3.35rem);
  letter-spacing: -.045em;
  line-height: 1.04;
}

body.page-silo-premium .configurator-copy > p:not(.eyebrow) {
  max-width: 700px;
  margin: 17px 0 0;
  color: #b9c5d2;
  line-height: 1.65;
}

body.page-silo-premium .configurator-preview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 24px 0;
}

body.page-silo-premium .configurator-preview > div {
  padding: 15px 16px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  color: #fff;
}

body.page-silo-premium .configurator-preview span {
  margin-bottom: 5px;
  color: #8da1b5;
  font-size: .67rem;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: 1;
}

body.page-silo-premium .configurator-preview strong {
  color: #f6f9fc;
  font-size: .88rem;
  line-height: 1.35;
}

body.page-silo-premium .configurator-shell .button-dark,
body.page-silo-premium .configurator-shell .button-primary {
  border-color: #13acf3;
  background: #13acf3;
  color: #071019;
  box-shadow: 0 12px 30px rgba(7,159,232,.2);
}

body.page-silo-premium .configurator-note {
  align-self: stretch;
  padding: 24px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 21px;
  background: rgba(255,255,255,.065);
  color: #fff;
  backdrop-filter: blur(7px);
}

body.page-silo-premium .configurator-note-badge {
  display: inline-flex;
  margin-bottom: 16px;
  padding: 7px 9px;
  border-radius: 999px;
  background: rgba(82,201,255,.12);
  color: #6ed5ff;
  font-size: .65rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

body.page-silo-premium .configurator-note > strong {
  display: block;
  color: #fff;
  font-size: 1.22rem;
  letter-spacing: -.02em;
}

body.page-silo-premium .configurator-note p {
  margin: 9px 0 20px;
  color: #afbdca;
  font-size: .86rem;
  line-height: 1.58;
  opacity: 1;
}

body.page-silo-premium .configurator-steps {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.page-silo-premium .configurator-steps li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #dce5ed;
  font-size: .82rem;
}

body.page-silo-premium .configurator-steps li > span {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: 8px;
  background: rgba(7,159,232,.16);
  color: #65d2ff;
  font-size: .7rem;
  font-weight: 900;
}

body.page-silo-premium .content-section {
  margin-top: 72px;
}

body.page-silo-premium .content-section-soft {
  padding: clamp(30px, 5vw, 52px);
  border: 1px solid #ddeef7;
  border-radius: 28px;
  background: linear-gradient(145deg, #f7fcff, #eef8fd);
}

body.page-silo-premium .section-heading {
  max-width: 850px;
  margin-bottom: 26px;
}

body.page-silo-premium .section-heading h2 {
  margin: 0;
  color: #12161d;
  font-size: clamp(1.9rem, 3.6vw, 3.05rem);
  font-weight: 830;
  letter-spacing: -.045em;
  line-height: 1.05;
}

body.page-silo-premium .section-heading > p:not(.eyebrow) {
  margin: 14px 0 0;
  color: #687383;
  font-size: 1rem;
  line-height: 1.68;
  opacity: 1;
}

body.page-silo-premium .feature-grid,
body.page-silo-premium .use-grid,
body.page-silo-premium .link-grid {
  display: grid;
  gap: 13px;
}

body.page-silo-premium .feature-grid,
body.page-silo-premium .use-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

body.page-silo-premium .link-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.page-silo-premium .product-link-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

body.page-silo-premium .feature-grid article,
body.page-silo-premium .use-grid article,
body.page-silo-premium .link-grid a {
  position: relative;
  min-height: 150px;
  padding: 22px;
  overflow: hidden;
  border: 1px solid #e4e9ef;
  border-radius: 19px;
  background: #fff;
  color: #171b21;
  box-shadow: 0 8px 24px rgba(15,23,42,.04);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

body.page-silo-premium .feature-grid article:hover,
body.page-silo-premium .use-grid article:hover,
body.page-silo-premium .link-grid a:hover {
  transform: translateY(-3px);
  border-color: #c7e8f8;
  box-shadow: 0 16px 34px rgba(15,23,42,.075);
}

body.page-silo-premium .feature-grid article::before,
body.page-silo-premium .use-grid article::before {
  content: "";
  display: block;
  width: 34px;
  height: 5px;
  margin-bottom: 17px;
  border-radius: 999px;
  background: var(--clx-a-blue);
}

body.page-silo-premium .feature-grid h3,
body.page-silo-premium .use-grid strong {
  margin: 0;
  color: #14181e;
  font-size: .98rem;
  font-weight: 820;
}

body.page-silo-premium .feature-grid p,
body.page-silo-premium .use-grid p {
  margin: 8px 0 0;
  color: #6c7684;
  font-size: .84rem;
  line-height: 1.58;
  opacity: 1;
}

body.page-silo-premium .link-grid a {
  min-height: 122px;
  padding-right: 50px;
  text-decoration: none;
}

body.page-silo-premium .link-grid a::after {
  content: "→";
  position: absolute;
  right: 18px;
  top: 18px;
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  border-radius: 9px;
  background: var(--clx-a-blue-soft);
  color: #0088c9;
  font-size: .85rem;
  font-weight: 900;
}

body.page-silo-premium .link-grid strong {
  color: #151a22;
  font-size: .95rem;
  font-weight: 820;
}

body.page-silo-premium .link-grid span {
  margin-top: 8px;
  color: #707a88;
  font-size: .82rem;
  line-height: 1.5;
  opacity: 1;
}

body.page-silo-premium .faq {
  max-width: 930px;
  margin-left: auto;
  margin-right: auto;
  padding: clamp(28px, 4vw, 42px);
  border: 1px solid #e4e9ef;
  border-radius: 26px;
  background: #fff;
  box-shadow: var(--clx-a-shadow-sm);
}

body.page-silo-premium .faq details {
  margin: 0;
  padding: 0;
  border: 0;
  border-top: 1px solid #e8ebef;
}

body.page-silo-premium .faq details:last-child {
  border-bottom: 1px solid #e8ebef;
}

body.page-silo-premium .faq summary {
  position: relative;
  padding: 19px 44px 19px 0;
  color: #181d24;
  font-size: .95rem;
  font-weight: 800;
  list-style: none;
  cursor: pointer;
}

body.page-silo-premium .faq summary::-webkit-details-marker { display: none; }
body.page-silo-premium .faq summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #f1f6f9;
  color: #238abe;
  transform: translateY(-50%);
}
body.page-silo-premium .faq details[open] summary::after { content: "−"; }

body.page-silo-premium .faq details p {
  max-width: 780px;
  margin: -3px 0 19px;
  color: #697483;
  font-size: .9rem;
  line-height: 1.65;
  opacity: 1;
}

/* ---------- Hunde hub ---------- */
body.page-dog-premium .hub-hero {
  align-items: center;
}

body.page-dog-premium .hub-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}

body.page-dog-premium .hub-facts span {
  padding: 8px 11px;
  border: 1px solid #e1e7ee;
  border-radius: 999px;
  background: #fff;
  color: #455268;
  font-size: .76rem;
  font-weight: 750;
}

body.page-dog-premium .hub-products,
body.page-dog-premium .hub-copy,
body.page-dog-premium .hub-links {
  margin-top: 72px;
}

body.page-dog-premium .section-heading {
  max-width: 820px;
  margin-bottom: 26px;
}

body.page-dog-premium .section-heading h2,
body.page-dog-premium .hub-copy h2 {
  margin: 0;
  color: #12161d;
  font-size: clamp(1.9rem, 3.6vw, 3.05rem);
  font-weight: 830;
  letter-spacing: -.045em;
  line-height: 1.05;
}

body.page-dog-premium .section-heading > p:not(.eyebrow) {
  margin: 14px 0 0;
  color: #687383;
  line-height: 1.68;
  opacity: 1;
}

body.page-dog-premium .product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

body.page-dog-premium .product-card {
  overflow: hidden;
  border: 1px solid #e3e8ee;
  border-radius: 21px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(15,23,42,.055);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

body.page-dog-premium .product-card:hover {
  transform: translateY(-4px);
  border-color: #c9e9f8;
  box-shadow: 0 18px 42px rgba(15,23,42,.09);
}

body.page-dog-premium .product-card-image {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #f5f7f9;
}

body.page-dog-premium .product-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}

body.page-dog-premium .product-card:hover .product-card-image img {
  transform: scale(1.025);
}

body.page-dog-premium .product-card-copy {
  padding: 19px 19px 20px;
}

body.page-dog-premium .product-card h3 a {
  color: #171b22;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 820;
}

body.page-dog-premium .product-card p {
  margin: 9px 0 17px;
  color: #707a88;
  font-size: .82rem;
  line-height: 1.55;
  opacity: 1;
}

body.page-dog-premium .product-card-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #008dcc;
  font-size: .82rem;
  font-weight: 820;
  text-decoration: none;
}
body.page-dog-premium .product-card-link::after { content: "→"; }

body.page-dog-premium .hub-copy {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

body.page-dog-premium .hub-copy article {
  padding: clamp(28px, 4vw, 42px);
  border: 1px solid #e4e9ef;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(15,23,42,.045);
}

body.page-dog-premium .hub-copy article:first-child {
  background: linear-gradient(145deg, #0d151f, #12354b);
  color: #fff;
  border-color: transparent;
}

body.page-dog-premium .hub-copy article:first-child h2,
body.page-dog-premium .hub-copy article:first-child a { color: #fff; }
body.page-dog-premium .hub-copy article:first-child p:not(.eyebrow) { color: #b8c7d3; }
body.page-dog-premium .hub-copy article:first-child .eyebrow {
  border-color: rgba(100,207,255,.22);
  background: rgba(7,159,232,.12);
  color: #69d2ff;
}

body.page-dog-premium .hub-copy p:not(.eyebrow) {
  color: #6d7785;
  line-height: 1.68;
  opacity: 1;
}

body.page-dog-premium .hub-copy a {
  color: #008dcc;
  font-weight: 820;
  text-decoration: none;
}

body.page-dog-premium .link-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px;
}

body.page-dog-premium .link-grid a {
  position: relative;
  min-height: 116px;
  padding: 20px 48px 20px 20px;
  border: 1px solid #e4e9ef;
  border-radius: 18px;
  background: #fff;
  color: #171b22;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(15,23,42,.04);
}

body.page-dog-premium .link-grid a::after {
  content: "→";
  position: absolute;
  right: 17px;
  top: 17px;
  color: #008dcc;
  font-weight: 900;
}

body.page-dog-premium .link-grid strong { font-weight: 820; }
body.page-dog-premium .link-grid span {
  margin-top: 7px;
  color: #707a88;
  font-size: .82rem;
  line-height: 1.5;
  opacity: 1;
}

/* ---------- Live search ---------- */
.search-modal.search-live {
  z-index: 1000;
}

.search-modal.search-live .search-live-bg {
  background: rgba(5,10,17,.58);
  backdrop-filter: blur(8px);
}

.search-modal.search-live .search-live-box {
  width: min(760px, calc(100% - 32px));
  max-height: min(760px, calc(100dvh - 64px));
  margin: 32px auto 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 26px;
  background: #fff;
  color: #11151c;
  box-shadow: 0 34px 100px rgba(4,10,18,.34);
}

.search-live-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 24px 14px;
}

.search-live-head > div {
  min-width: 0;
}

.search-live-kicker {
  margin: 0 0 6px;
  color: #008dcc;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.search-live-head h2 {
  margin: 0;
  color: #12161d;
  font-size: clamp(1.55rem, 3vw, 2rem);
  font-weight: 850;
  letter-spacing: -.04em;
}

.search-live-head span {
  display: block;
  margin-top: 6px;
  color: #758090;
  font-size: .82rem;
}

.search-live-head .search-live-close {
  flex: 0 0 auto;
  width: 39px;
  height: 39px;
  border: 1px solid #e2e7ed;
  border-radius: 11px;
  background: #f7f9fb;
  color: #5d6878;
  font-size: 1.25rem;
}

.search-modal.search-live .search-live-form {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin: 0 24px;
  padding: 9px 10px 9px 14px;
  border: 1px solid #dce3ea;
  border-radius: 15px;
  background: #f8fafc;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.search-modal.search-live .search-live-form:focus-within {
  border-color: #83d5fa;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(7,159,232,.09);
}

.search-live-icon {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  color: #6c7a8b;
}
.search-live-icon svg { width: 21px; height: 21px; }

.search-modal.search-live .search-live-form input {
  min-height: 38px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #141922;
  font-size: .98rem;
  font-weight: 600;
  outline: 0;
}

.search-live-submit {
  min-height: 38px;
  padding: 8px 14px;
  border: 1px solid #0699df;
  border-radius: 10px;
  background: #079fe8;
  color: #fff;
  font: inherit;
  font-size: .78rem;
  font-weight: 820;
  cursor: pointer;
}

.search-live-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 12px 24px 14px;
}

.search-live-quick a {
  padding: 7px 10px;
  border: 1px solid #e1e7ed;
  border-radius: 999px;
  background: #fff;
  color: #4f5b6b;
  font-size: .72rem;
  font-weight: 760;
  text-decoration: none;
}

.search-live-quick a:hover {
  border-color: #bee8fb;
  background: #f0faff;
  color: #007dbb;
}

.search-modal.search-live .search-live-results {
  display: grid;
  gap: 6px;
  max-height: min(470px, calc(100dvh - 270px));
  padding: 0 16px 18px;
  overflow: auto;
}

.search-live-start {
  display: grid;
  gap: 5px;
  padding: 18px;
  border: 1px solid #edf0f3;
  border-radius: 15px;
  background: linear-gradient(145deg, #fbfcfd, #f5f9fc);
}

.search-live-start strong {
  color: #252b34;
  font-size: .86rem;
}

.search-live-start span {
  color: #7a8491;
  font-size: .78rem;
  line-height: 1.5;
}

.search-modal.search-live .search-live-label {
  padding: 10px 8px 3px;
  color: #8a94a1;
  font-size: .62rem;
  font-weight: 850;
  letter-spacing: .1em;
}

.search-modal.search-live .search-live-hit {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 13px;
  align-items: center;
  padding: 9px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: #fff;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}

.search-modal.search-live .search-live-hit:hover {
  border-color: #d9edf7;
  background: #f6fbfe;
  transform: translateY(-1px);
}

.search-modal.search-live .search-live-media,
.search-modal.search-live .search-live-ph {
  width: 62px;
  height: 62px;
  border: 1px solid #e5e9ee;
  border-radius: 12px;
  background: #f5f7f9;
}

.search-modal.search-live .search-live-copy strong {
  color: #1b2028;
  font-size: .88rem;
  font-weight: 780;
}

.search-modal.search-live .search-live-copy small {
  margin-top: 3px;
  color: #778291;
  font-size: .72rem;
}

.search-modal.search-live .search-live-query,
.search-modal.search-live .search-live-more {
  border-radius: 11px;
}

.search-modal.search-live .search-live-more {
  margin-top: 3px;
  padding: 11px 13px;
  border: 1px solid #d9eef8;
  background: #f1faff;
  color: #007dbb;
}

/* ---------- Mini cart ---------- */
.mini-cart {
  z-index: 1010;
  width: min(480px, 100vw);
  grid-template-rows: auto auto minmax(0,1fr) auto;
  border: 0;
  background: #f6f8fa;
  color: #18202b;
  box-shadow: -30px 0 90px rgba(4,10,18,.28);
}

.mini-cart-head {
  align-items: center;
  padding: 22px 22px 17px;
  border-bottom: 1px solid #edf0f3;
  background: #fff;
  box-shadow: inset 0 4px 0 var(--clx-a-blue);
}

.mini-cart-brand { gap: 13px; }
.mini-cart-logo { height: 31px; }
.mini-cart-eyebrow {
  margin-bottom: 4px;
  color: #008dcc;
  font-size: .62rem;
  letter-spacing: .12em;
}
.mini-cart-head h2 {
  color: #161a20;
  font-size: 1.35rem;
  font-weight: 850;
  letter-spacing: -.035em;
}

.mini-cart-close {
  width: 39px;
  height: 39px;
  border: 1px solid #e1e6eb;
  border-radius: 11px;
  background: #f6f8fa;
  color: #596575;
  font-size: 1.2rem;
}
.mini-cart-close:hover {
  border-color: #bfe7fa;
  background: #edf9ff;
  color: #007ebc;
}

.mini-cart-trust {
  margin: 0;
  padding: 11px 22px;
  border-bottom: 1px solid #dff0f8;
  background: #effaff;
  color: #31546a;
  font-size: .72rem;
  font-weight: 740;
}
.mini-cart-trust svg { color: #079fe8; }

.mini-cart-list {
  align-content: start;
  gap: 11px;
  padding: 18px;
  background:
    radial-gradient(circle at 95% 5%, rgba(7,159,232,.06), transparent 18rem),
    #f6f8fa;
}

.mini-cart-list:has(.mini-cart-empty) {
  align-content: center;
}

.mini-cart-empty {
  max-width: 390px;
  margin: auto;
  padding: 30px 24px;
  border: 1px solid #e3e8ed;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 14px 42px rgba(15,23,42,.07);
}

.mini-cart-empty-icon {
  width: 54px;
  height: 54px;
  margin-bottom: 14px;
  border-radius: 15px;
  background: #edf9ff;
  color: #078fd3;
}

.mini-cart-empty h3 {
  margin-bottom: 7px;
  color: #171c23;
  font-size: 1.22rem;
  font-weight: 850;
}

.mini-cart-empty p {
  max-width: 300px;
  margin: 0 auto 18px;
  color: #74808f;
  font-size: .8rem;
  line-height: 1.55;
}

.mini-cart-empty .mini-cart-btn-primary,
.mini-cart-empty .mini-cart-btn-secondary {
  min-height: 45px;
  border-radius: 12px;
  font-size: .8rem;
}

.mini-cart-item {
  grid-template-columns: 74px minmax(0,1fr) auto;
  gap: 12px;
  padding: 12px;
  border: 1px solid #e3e8ed;
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 7px 22px rgba(15,23,42,.045);
}

.mini-cart-item:hover {
  border-color: #cceafa;
  transform: translateY(-1px);
}

.mini-cart-item h3 {
  color: #1d232c;
  font-size: .84rem;
}

.mini-cart-item-meta { color: #6f7b8c; }
.mini-cart-item-unit { color: #9aa3ae; }

.mini-cart-foot {
  padding: 16px 20px calc(18px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid #e4e9ee;
  background: #fff;
  box-shadow: 0 -10px 30px rgba(15,23,42,.055);
}

.mini-cart:has(.mini-cart-empty) .mini-cart-foot {
  display: none;
}

.mini-cart-totals { margin-bottom: 12px; }
.mini-cart-totals-row {
  padding: 6px 0;
  border-color: #eef1f4;
}
.mini-cart-totals-row dt {
  color: #6e7987;
  font-size: .78rem;
}
.mini-cart-totals-row dd {
  color: #263140;
  font-size: .82rem;
}
.mini-cart-totals-row--total dt {
  color: #171d25;
  font-size: .88rem;
}
.mini-cart-totals-row--total dd {
  color: #078fd3;
  font-size: 1.34rem;
}

.mini-cart-actions { gap: 8px; }
.mini-cart-btn-primary,
.mini-cart-btn-secondary {
  min-height: 47px;
  display: grid;
  place-items: center;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: .82rem;
  font-weight: 820;
  text-decoration: none;
}

.mini-cart-btn-primary {
  border-color: #079fe8;
  background: #079fe8;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(7,159,232,.2);
}

.mini-cart-btn-primary:hover {
  background: #078fd3;
  color: #fff !important;
}

.mini-cart-btn-secondary {
  border-color: #e0e5ea;
  background: #f8fafb;
  color: #344153 !important;
}

.mini-cart-overlay {
  z-index: 1009;
  background: rgba(5,10,17,.55);
  backdrop-filter: blur(6px);
}

/* ---------- Kundenkonto ---------- */
body.page-konto {
  --konto-accent: #079fe8;
  --konto-accent-strong: #0788cb;
  --konto-accent-soft: rgba(7,159,232,.10);
  --konto-radius: 21px;
  --konto-radius-sm: 13px;
  background:
    radial-gradient(circle at 90% 6%, rgba(7,159,232,.06), transparent 28rem),
    #f5f7f9;
}

body.page-konto::before {
  opacity: .13;
}

body.page-konto .konto-main {
  width: min(1320px, calc(100% - 36px));
  margin: 0 auto;
  padding: 34px 0 74px;
}

body.page-konto .konto-app:not([hidden]) {
  display: grid;
  grid-template-columns: 248px minmax(0,1fr);
  gap: 20px;
  align-items: start;
}

body.page-konto .konto-sidebar {
  position: sticky;
  top: 104px;
  min-height: 660px;
  overflow: hidden;
  border: 1px solid #172432;
  border-radius: 25px;
  background:
    radial-gradient(circle at 30% 0%, rgba(7,159,232,.18), transparent 16rem),
    linear-gradient(160deg, #0b1118, #101923 66%, #102637);
  color: #fff;
  box-shadow: 0 24px 60px rgba(7,16,26,.17);
}

body.page-konto .konto-sidebar-head {
  padding: 24px 20px 20px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

body.page-konto .konto-sidebar-avatar {
  box-shadow: 0 0 0 4px rgba(7,159,232,.12);
}

body.page-konto .konto-sidebar-name {
  color: #fff;
  font-size: .98rem;
  font-weight: 820;
}

body.page-konto .konto-sidebar-email {
  color: #9fb0c0;
  font-size: .72rem;
}

body.page-konto .konto-nav {
  gap: 5px;
  padding: 15px 12px;
}

body.page-konto .konto-nav-item {
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 12px;
  color: #bac6d2;
  font-size: .78rem;
  font-weight: 720;
}

body.page-konto .konto-nav-item:hover,
body.page-konto .konto-nav-item.is-active {
  background: rgba(255,255,255,.08);
  color: #fff;
}

body.page-konto .konto-nav-item.is-active {
  box-shadow: inset 3px 0 0 #20b8ff;
}

body.page-konto .konto-nav-icon {
  color: #79cfff;
}

body.page-konto .konto-sidebar-foot {
  padding: 14px 12px 16px;
  border-top-color: rgba(255,255,255,.08);
}

body.page-konto .konto-sidebar-action {
  min-height: 42px;
  border-radius: 11px;
  font-size: .75rem;
}

body.page-konto .konto-shell {
  min-width: 0;
}

body.page-konto .konto-topbar {
  min-height: 82px;
  padding: 16px 18px 16px 22px;
  border: 1px solid #e3e8ed;
  border-radius: 22px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 10px 30px rgba(15,23,42,.05);
  backdrop-filter: blur(10px);
}

body.page-konto .konto-top-kicker {
  color: #7d8794;
  font-size: .62rem;
  letter-spacing: .12em;
}

body.page-konto .konto-top-title {
  color: #171b22;
  font-size: 1.45rem;
  font-weight: 850;
  letter-spacing: -.035em;
}

body.page-konto .konto-secure-pill {
  border: 1px solid #d9eee5;
  background: #f1fbf7;
  color: #188158;
}

body.page-konto .konto-top-cta {
  min-height: 43px;
  border-radius: 11px;
  background: #11161d;
  color: #fff;
  box-shadow: none;
}

body.page-konto .konto-content {
  padding-top: 16px;
}

body.page-konto .konto-welcome {
  min-height: 126px;
  padding: 24px 28px;
  border: 1px solid #163248;
  border-radius: 24px;
  background:
    radial-gradient(circle at 92% 15%, rgba(7,159,232,.38), transparent 24rem),
    linear-gradient(135deg, #0c1219, #0f1c28 58%, #103047);
  box-shadow: 0 18px 50px rgba(7,17,27,.13);
}

body.page-konto .konto-welcome-text {
  color: #fff;
}

body.page-konto .konto-kpis {
  gap: 12px;
  margin-top: 12px;
}

body.page-konto .konto-kpi {
  min-height: 104px;
  padding: 18px;
  border: 1px solid #e3e8ed;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 7px 22px rgba(15,23,42,.045);
}

body.page-konto .konto-kpi::after {
  display: none;
}

body.page-konto .konto-kpi-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
}

body.page-konto .konto-kpi-body strong {
  color: #141922;
  font-size: 1.35rem;
  font-weight: 850;
}

body.page-konto .konto-kpi-body span {
  color: #7a8492;
  font-size: .72rem;
}

body.page-konto .konto-grid-2 {
  gap: 14px;
  margin-top: 14px;
}

body.page-konto .konto-card {
  border: 1px solid #e3e8ed;
  border-radius: 21px;
  background: #fff;
  box-shadow: 0 9px 28px rgba(15,23,42,.05);
}

body.page-konto .konto-order {
  margin-top: 9px;
  overflow: hidden;
  border: 1px solid #e5e9ee;
  border-radius: 16px;
  background: #fbfcfd;
}

body.page-konto .konto-order-head {
  padding: 15px 16px;
}

body.page-konto .konto-order-body {
  border-top-color: #e7ebef;
  background: #fff;
}

body.page-konto .konto-quick-actions {
  gap: 8px;
}

body.page-konto .konto-quick-link {
  min-height: 46px;
  border: 1px solid #e4e8ed;
  border-radius: 12px;
  background: #fafbfc;
  color: #252c36;
}

body.page-konto .konto-quick-link:hover {
  border-color: #cce9f7;
  background: #f2fbff;
}

body.page-konto .konto-login-stage {
  max-width: 1120px;
  margin: 26px auto 0;
  overflow: hidden;
  border: 1px solid #e2e7ec;
  border-radius: 30px;
  background: #fff;
  box-shadow: var(--clx-a-shadow);
}

body.page-konto .konto-login-visual {
  background:
    radial-gradient(circle at 20% 10%, rgba(7,159,232,.25), transparent 20rem),
    linear-gradient(155deg, #0b1118, #102536);
}

body.page-konto .konto-login-panel {
  background: #fff;
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  body.page-silo-premium .hero,
  body.page-dog-premium .hub-hero,
  body.page-silo-premium .configurator-shell {
    grid-template-columns: 1fr;
  }

  body.page-silo-premium .hero-media,
  body.page-dog-premium .hub-hero-media {
    max-width: 600px;
  }

  body.page-silo-premium .trust-strip,
  body.page-silo-premium .feature-grid,
  body.page-silo-premium .use-grid,
  body.page-silo-premium .product-link-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  body.page-silo-premium .link-grid,
  body.page-dog-premium .product-grid,
  body.page-dog-premium .link-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  body.page-konto .konto-app:not([hidden]) {
    grid-template-columns: 1fr;
  }

  body.page-konto .konto-sidebar {
    position: relative;
    top: auto;
    min-height: 0;
  }
}

@media (max-width: 680px) {
  body.page-silo-premium .silo-page,
  body.page-dog-premium .dog-hub {
    width: min(100% - 20px, 1240px);
    padding-top: 17px;
  }

  body.page-silo-premium .hero,
  body.page-dog-premium .hub-hero {
    gap: 26px;
    padding: 26px 18px;
    border-radius: 23px;
  }

  body.page-silo-premium .hero h1,
  body.page-dog-premium .hub-hero h1 {
    font-size: clamp(2.15rem, 12vw, 3.45rem);
  }

  body.page-silo-premium .hero-actions {
    display: grid;
  }

  body.page-silo-premium .hero-actions .button {
    width: 100%;
  }

  body.page-silo-premium .hero-media::after,
  body.page-dog-premium .hub-hero-media::after {
    right: 16px;
    bottom: 16px;
  }

  body.page-silo-premium .trust-strip,
  body.page-silo-premium .feature-grid,
  body.page-silo-premium .use-grid,
  body.page-silo-premium .product-link-grid,
  body.page-silo-premium .link-grid,
  body.page-silo-premium .configurator-preview,
  body.page-dog-premium .product-grid,
  body.page-dog-premium .hub-copy,
  body.page-dog-premium .link-grid {
    grid-template-columns: 1fr;
  }

  body.page-silo-premium .configurator-shell,
  body.page-silo-premium .content-section-soft,
  body.page-silo-premium .faq {
    padding: 24px 18px;
    border-radius: 22px;
  }

  body.page-silo-premium .content-section,
  body.page-dog-premium .hub-products,
  body.page-dog-premium .hub-copy,
  body.page-dog-premium .hub-links {
    margin-top: 52px;
  }

  .search-modal.search-live .search-live-box {
    width: calc(100% - 16px);
    max-height: calc(100dvh - 16px);
    margin: 8px auto 0;
    border-radius: 20px;
  }

  .search-live-head {
    padding: 18px 17px 12px;
  }

  .search-live-head span {
    display: none;
  }

  .search-modal.search-live .search-live-form {
    margin: 0 17px;
  }

  .search-live-submit {
    display: none;
  }

  .search-live-quick {
    padding: 10px 17px 12px;
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  .search-live-quick a {
    flex: 0 0 auto;
  }

  .search-modal.search-live .search-live-results {
    max-height: calc(100dvh - 210px);
    padding: 0 10px 12px;
  }

  .mini-cart {
    width: 100vw;
  }

  .mini-cart-head {
    padding: 18px 17px 14px;
  }

  .mini-cart-trust {
    padding: 10px 17px;
  }

  .mini-cart-list {
    padding: 13px;
  }

  .mini-cart-foot {
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  }

  body.page-konto .konto-main {
    width: min(100% - 20px, 1320px);
    padding-top: 18px;
  }

  body.page-konto .konto-topbar {
    padding: 14px;
    border-radius: 18px;
  }

  body.page-konto .konto-secure-pill {
    display: none;
  }

  body.page-konto .konto-welcome {
    padding: 22px 18px;
    border-radius: 20px;
  }

  body.page-konto .konto-kpis {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.page-silo-premium *,
  body.page-dog-premium *,
  .search-modal.search-live *,
  .mini-cart * {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}


/* ---------- 2026-10-07 contrast + cascade repair ----------
   Astro component-scoped styles carry extra specificity. These rules are
   intentionally explicit so every premium silo route renders consistently. */

body.page-silo-premium .silo-page .hero-copy,
body.page-dog-premium .dog-hub .hub-hero-copy {
  min-width: 0;
}

body.page-silo-premium .silo-page .hero h1,
body.page-dog-premium .dog-hub .hub-hero h1 {
  max-width: 100% !important;
  overflow-wrap: break-word;
  hyphens: auto;
  text-wrap: balance;
}

/* Trust cards: dark premium surface needs light typography. */
body.page-silo-premium .silo-page .trust-strip > div {
  border-color: #18232f !important;
  background: #0d1218 !important;
  color: #ffffff !important;
  box-shadow: 0 10px 28px rgba(5, 12, 20, .10) !important;
}

body.page-silo-premium .silo-page .trust-strip > div::before {
  background: #eef9ff !important;
  color: #007fc0 !important;
}

body.page-silo-premium .silo-page .trust-strip > div strong {
  color: #ffffff !important;
  opacity: 1 !important;
}

body.page-silo-premium .silo-page .trust-strip > div span {
  color: #aeb9c6 !important;
  opacity: 1 !important;
}

/* Configurator option tiles: keep white tiles but force readable dark copy. */
body.page-silo-premium .silo-page .configurator-preview > div {
  border-color: #e2e7ed !important;
  background: #ffffff !important;
  color: #18202a !important;
}

body.page-silo-premium .silo-page .configurator-preview > div span {
  color: #7d8998 !important;
  opacity: 1 !important;
}

body.page-silo-premium .silo-page .configurator-preview > div strong {
  color: #1d2733 !important;
  opacity: 1 !important;
}

/* Content cards: prevent scoped legacy opacity/background values from
   washing out text on the light A+ surfaces. */
body.page-silo-premium .silo-page .feature-grid article,
body.page-silo-premium .silo-page .use-grid article,
body.page-silo-premium .silo-page .link-grid a {
  border-color: #e2e7ed !important;
  background: #ffffff !important;
  color: #171c24 !important;
}

body.page-silo-premium .silo-page .feature-grid h3,
body.page-silo-premium .silo-page .use-grid strong,
body.page-silo-premium .silo-page .link-grid strong {
  color: #161b22 !important;
  opacity: 1 !important;
}

body.page-silo-premium .silo-page .feature-grid p,
body.page-silo-premium .silo-page .use-grid p,
body.page-silo-premium .silo-page .link-grid span {
  color: #687483 !important;
  opacity: 1 !important;
}

/* Soft section itself must remain visibly separated from the page. */
body.page-silo-premium .silo-page .content-section-soft {
  border-color: #cfe9f5 !important;
  background: linear-gradient(145deg, #f7fcff, #edf8fd) !important;
  color: #171c24 !important;
}

/* Configurator right-hand information panel. */
body.page-silo-premium .silo-page .configurator-note {
  border-color: rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.075) !important;
  color: #ffffff !important;
}

body.page-silo-premium .silo-page .configurator-note > strong {
  color: #ffffff !important;
}

body.page-silo-premium .silo-page .configurator-note p {
  color: #bec9d4 !important;
  opacity: 1 !important;
}

body.page-silo-premium .silo-page .configurator-steps li,
body.page-silo-premium .silo-page .configurator-steps li b {
  color: #edf4f8 !important;
}

/* FAQs on light surface. */
body.page-silo-premium .silo-page .faq {
  background: #ffffff !important;
  color: #171c24 !important;
}

body.page-silo-premium .silo-page .faq summary {
  color: #171c24 !important;
}

body.page-silo-premium .silo-page .faq details p {
  color: #687483 !important;
  opacity: 1 !important;
}

/* Dog hub gets the same contrast discipline. */
body.page-dog-premium .dog-hub .product-card,
body.page-dog-premium .dog-hub .hub-copy article:not(:first-child),
body.page-dog-premium .dog-hub .link-grid a {
  border-color: #e2e7ed !important;
  background: #ffffff !important;
  color: #171c24 !important;
}

body.page-dog-premium .dog-hub .product-card p,
body.page-dog-premium .dog-hub .hub-copy article:not(:first-child) p:not(.eyebrow),
body.page-dog-premium .dog-hub .link-grid span {
  color: #687483 !important;
  opacity: 1 !important;
}

@media (min-width: 981px) and (max-width: 1180px) {
  body.page-silo-premium .silo-page .hero h1,
  body.page-dog-premium .dog-hub .hub-hero h1 {
    font-size: clamp(2.35rem, 4.3vw, 4rem) !important;
  }
}