/* CLXON24 Silo UI System
   Unified commercial landing pages: compact hero, A+ content, subtle motion.
   Scoped to .page-silo-premium / .page-dog-premium. */

body.page-silo-premium,
body.page-dog-premium {
  --silo-blue: #08a5ef;
  --silo-blue-strong: #007fc2;
  --silo-ink: #0f141b;
  --silo-muted: #667281;
  --silo-line: #e2e8ee;
  --silo-soft: #f5f8fb;
  --silo-blue-soft: #eef9ff;
  --silo-dark: #0b121a;
  --silo-dark-2: #102838;
  --silo-shadow: 0 22px 70px rgba(15, 23, 42, .08);
  --silo-shadow-sm: 0 10px 34px rgba(15, 23, 42, .055);
  background:
    radial-gradient(circle at 92% 2%, rgba(8,165,239,.055), transparent 27rem),
    #f5f7f9;
  color: var(--silo-ink);
}

body.page-silo-premium .silo-page,
body.page-dog-premium .dog-hub {
  width: min(1220px, calc(100% - 36px)) !important;
  margin: 0 auto !important;
  padding: 22px 0 94px !important;
}

body.page-silo-premium .silo-breadcrumb,
body.page-dog-premium .hub-breadcrumb {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 0 0 15px !important;
  color: #7a8594 !important;
  font-size: .78rem !important;
  font-weight: 650 !important;
}

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

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

/* Hero: intentionally compact so no route starts with a full-screen slab. */
body.page-silo-premium .silo-page .hero,
body.page-dog-premium .dog-hub .hub-hero {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.12fr) minmax(310px, .88fr) !important;
  gap: clamp(28px, 4.4vw, 58px) !important;
  align-items: center !important;
  min-height: 0 !important;
  padding: clamp(30px, 4vw, 48px) !important;
  overflow: hidden !important;
  border: 1px solid #e0e7ed !important;
  border-radius: 29px !important;
  background:
    radial-gradient(circle at 91% 8%, rgba(8,165,239,.14), transparent 31%),
    linear-gradient(145deg, #ffffff 0%, #fbfdff 66%, #eff9ff 100%) !important;
  color: var(--silo-ink) !important;
  box-shadow: var(--silo-shadow) !important;
}

body.page-silo-premium .silo-page .hero::before,
body.page-dog-premium .dog-hub .hub-hero::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 auto auto 0 !important;
  width: min(34%, 390px) !important;
  height: 3px !important;
  background: linear-gradient(90deg, var(--silo-blue), #65d0ff) !important;
}

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

body.page-silo-premium .eyebrow,
body.page-dog-premium .eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  width: fit-content !important;
  margin: 0 0 13px !important;
  padding: 7px 10px !important;
  border: 1px solid #c9ecfc !important;
  border-radius: 999px !important;
  background: var(--silo-blue-soft) !important;
  color: #007ab8 !important;
  font-size: .66rem !important;
  font-weight: 850 !important;
  letter-spacing: .105em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  opacity: 1 !important;
}

body.page-silo-premium .silo-page .hero h1,
body.page-dog-premium .dog-hub .hub-hero h1 {
  max-width: 700px !important;
  margin: 0 !important;
  color: #0b1016 !important;
  font-size: clamp(2.35rem, 4.35vw, 4.15rem) !important;
  font-weight: 880 !important;
  letter-spacing: -.055em !important;
  line-height: .98 !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: manual !important;
  text-wrap: balance;
}

body.page-silo-premium .silo-page .hero-lead,
body.page-dog-premium .dog-hub .hub-hero p:not(.eyebrow) {
  max-width: 680px !important;
  margin: 18px 0 0 !important;
  color: #5f6c7e !important;
  font-size: clamp(.96rem, 1.25vw, 1.08rem) !important;
  line-height: 1.67 !important;
  opacity: 1 !important;
}

body.page-silo-premium .hero-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-top: 23px !important;
}

body.page-silo-premium .button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 47px !important;
  padding: 11px 17px !important;
  border-radius: 12px !important;
  text-decoration: none !important;
  font-size: .84rem !important;
  font-weight: 820 !important;
  letter-spacing: -.012em !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease !important;
}

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

body.page-silo-premium .button-primary {
  border: 1px solid var(--silo-blue) !important;
  background: linear-gradient(135deg, #14acf2, #078ed7) !important;
  color: #fff !important;
  box-shadow: 0 12px 26px rgba(8,165,239,.23) !important;
}

body.page-silo-premium .button-secondary {
  border: 1px solid #d7dee6 !important;
  background: rgba(255,255,255,.92) !important;
  color: #222b37 !important;
  box-shadow: 0 5px 15px rgba(15,23,42,.035) !important;
}

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

body.page-silo-premium .hero-benefits li {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 31px !important;
  padding: 6px 9px !important;
  border: 1px solid #dde5ec !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.93) !important;
  color: #4c5b6f !important;
  font-size: .69rem !important;
  font-weight: 760 !important;
}

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

/* Product visual: fixed optical size across all source-image ratios. */
body.page-silo-premium .hero-media,
body.page-dog-premium .hub-hero-media {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --shift-x: 0px;
  --shift-y: 0px;
  position: relative !important;
  width: min(100%, 430px) !important;
  margin: 0 0 0 auto !important;
  padding: 9px !important;
  border: 1px solid #e0e5eb !important;
  border-radius: 23px !important;
  background: #fff !important;
  box-shadow: 0 18px 45px rgba(15,23,42,.115) !important;
  transform:
    perspective(1000px)
    translate3d(var(--shift-x), var(--shift-y), 0)
    rotateX(var(--tilt-x))
    rotateY(var(--tilt-y)) !important;
  transform-style: preserve-3d;
  transition: transform .22s ease, box-shadow .22s ease !important;
}

body.page-silo-premium .hero-media-frame,
body.page-dog-premium .hub-hero-media {
  overflow: hidden !important;
}

body.page-silo-premium .hero-media-frame {
  display: grid !important;
  place-items: center !important;
  height: clamp(290px, 31vw, 410px) !important;
  overflow: hidden !important;
  border-radius: 16px !important;
  background:
    linear-gradient(145deg, #f8fafc, #eef2f6) !important;
}

body.page-silo-premium .hero-media img,
body.page-dog-premium .hub-hero-media img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 410px !important;
  aspect-ratio: auto !important;
  border-radius: 15px !important;
  background: #fff !important;
  object-fit: contain !important;
  object-position: center !important;
}

body.page-silo-premium .hero-media figcaption {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding: 10px 5px 2px !important;
  color: #667383 !important;
  font-size: .66rem !important;
}

body.page-silo-premium .hero-media figcaption span {
  color: #0086c8 !important;
  font-weight: 850 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
}

body.page-silo-premium .hero-media figcaption strong {
  color: #27313f !important;
  font-size: .68rem !important;
}

/* Trust facts */
body.page-silo-premium .trust-strip {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0,1fr)) !important;
  gap: 11px !important;
  margin: 13px 0 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

body.page-silo-premium .trust-strip > article {
  position: relative !important;
  min-height: 118px !important;
  padding: 18px !important;
  border: 1px solid #e2e7ed !important;
  border-radius: 17px !important;
  background: #fff !important;
  color: #171c23 !important;
  box-shadow: 0 7px 24px rgba(15,23,42,.04) !important;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}

body.page-silo-premium .trust-strip > article:hover {
  transform: translateY(-3px) !important;
  border-color: #c7e9f9 !important;
  box-shadow: 0 15px 32px rgba(15,23,42,.075) !important;
}

body.page-silo-premium .trust-index {
  display: grid !important;
  place-items: center !important;
  width: 29px !important;
  height: 29px !important;
  margin-bottom: 12px !important;
  border-radius: 8px !important;
  background: var(--silo-blue-soft) !important;
  color: #0083c4 !important;
  font-size: .65rem !important;
  font-weight: 900 !important;
}

body.page-silo-premium .trust-strip strong {
  display: block !important;
  color: #171c23 !important;
  font-size: .89rem !important;
  font-weight: 830 !important;
  opacity: 1 !important;
}

body.page-silo-premium .trust-strip p {
  margin: 6px 0 0 !important;
  color: #727d8b !important;
  font-size: .75rem !important;
  line-height: 1.5 !important;
  opacity: 1 !important;
}

/* Search intent chips: visible, useful SEO context instead of hidden keyword stuffing. */
body.page-silo-premium .search-intents {
  display: flex !important;
  align-items: center !important;
  gap: 13px !important;
  margin: 15px 0 0 !important;
  padding: 13px 15px !important;
  overflow: hidden !important;
  border: 1px solid #e2e7ed !important;
  border-radius: 15px !important;
  background: rgba(255,255,255,.72) !important;
  box-shadow: 0 6px 20px rgba(15,23,42,.035) !important;
}

body.page-silo-premium .search-intents > span {
  flex: 0 0 auto !important;
  color: #778392 !important;
  font-size: .64rem !important;
  font-weight: 850 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

body.page-silo-premium .search-intents > div {
  display: flex !important;
  gap: 7px !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  scrollbar-width: none;
}

body.page-silo-premium .search-intents > div::-webkit-scrollbar { display: none; }

body.page-silo-premium .search-intents a {
  flex: 0 0 auto !important;
  padding: 6px 9px !important;
  border: 1px solid #dce7ed !important;
  border-radius: 999px !important;
  background: #f7fbfd !important;
  color: #4c6170 !important;
  font-size: .68rem !important;
  font-weight: 720 !important;
  text-decoration: none !important;
}

body.page-silo-premium .search-intents a:hover {
  border-color: #bfe7fa !important;
  background: #edf9ff !important;
  color: #007ebd !important;
}

/* Configurator contrast section */
body.page-silo-premium .configurator-shell {
  display: grid !important;
  grid-template-columns: minmax(0, 1.3fr) minmax(270px, .7fr) !important;
  gap: 24px !important;
  margin-top: 64px !important;
  padding: clamp(28px, 4vw, 46px) !important;
  overflow: hidden !important;
  border: 1px solid #173346 !important;
  border-radius: 27px !important;
  background:
    radial-gradient(circle at 88% 10%, rgba(8,165,239,.29), transparent 31%),
    linear-gradient(135deg, #0a1119, #0e1c28 58%, #11384f) !important;
  color: #fff !important;
  box-shadow: 0 24px 66px rgba(6,15,24,.16) !important;
}

body.page-silo-premium .configurator-shell .eyebrow {
  border-color: rgba(104,210,255,.22) !important;
  background: rgba(8,165,239,.11) !important;
  color: #69d4ff !important;
}

body.page-silo-premium .configurator-shell h2 {
  max-width: 680px !important;
  margin: 0 !important;
  color: #fff !important;
  font-size: clamp(1.9rem, 3.35vw, 3rem) !important;
  font-weight: 850 !important;
  letter-spacing: -.045em !important;
  line-height: 1.04 !important;
}

body.page-silo-premium .configurator-copy > p:not(.eyebrow) {
  max-width: 700px !important;
  margin: 15px 0 0 !important;
  color: #bdc9d4 !important;
  font-size: .91rem !important;
  line-height: 1.65 !important;
  opacity: 1 !important;
}

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

body.page-silo-premium .configurator-preview > div {
  min-height: 64px !important;
  padding: 13px 14px !important;
  border: 1px solid #dde4ea !important;
  border-radius: 12px !important;
  background: #fff !important;
  color: #1b2530 !important;
}

body.page-silo-premium .configurator-preview span {
  display: block !important;
  margin-bottom: 5px !important;
  color: #8090a1 !important;
  font-size: .62rem !important;
  font-weight: 820 !important;
  letter-spacing: .085em !important;
  text-transform: uppercase !important;
  opacity: 1 !important;
}

body.page-silo-premium .configurator-preview strong {
  display: block !important;
  color: #202a36 !important;
  font-size: .78rem !important;
  font-weight: 760 !important;
  line-height: 1.4 !important;
  opacity: 1 !important;
}

body.page-silo-premium .button-dark {
  border: 1px solid var(--silo-blue) !important;
  background: var(--silo-blue) !important;
  color: #061019 !important;
  box-shadow: 0 11px 25px rgba(8,165,239,.18) !important;
}

body.page-silo-premium .configurator-note {
  align-self: stretch !important;
  padding: 22px !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  border-radius: 19px !important;
  background: rgba(255,255,255,.07) !important;
  color: #fff !important;
  backdrop-filter: blur(8px);
}

body.page-silo-premium .configurator-note-badge {
  display: inline-flex !important;
  margin-bottom: 14px !important;
  padding: 6px 9px !important;
  border-radius: 999px !important;
  background: rgba(8,165,239,.14) !important;
  color: #6bd4ff !important;
  font-size: .6rem !important;
  font-weight: 880 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

body.page-silo-premium .configurator-note > strong {
  display: block !important;
  color: #fff !important;
  font-size: 1.1rem !important;
  font-weight: 830 !important;
}

body.page-silo-premium .configurator-note p {
  margin: 8px 0 17px !important;
  color: #bcc9d5 !important;
  font-size: .77rem !important;
  line-height: 1.58 !important;
  opacity: 1 !important;
}

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

body.page-silo-premium .configurator-steps li {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  color: #ecf3f8 !important;
  font-size: .72rem !important;
}

body.page-silo-premium .configurator-steps li > span {
  display: grid !important;
  place-items: center !important;
  width: 25px !important;
  height: 25px !important;
  border-radius: 7px !important;
  background: rgba(8,165,239,.16) !important;
  color: #65d0ff !important;
  font-size: .62rem !important;
  font-weight: 900 !important;
}

body.page-silo-premium .configurator-steps b {
  color: #edf4f8 !important;
  font-weight: 760 !important;
}

/* Reusable A+ sections */
body.page-silo-premium .content-section {
  margin-top: 66px !important;
}

body.page-silo-premium .content-section-soft {
  padding: clamp(27px, 4vw, 43px) !important;
  border: 1px solid #cfe8f4 !important;
  border-radius: 25px !important;
  background: linear-gradient(145deg, #f8fcff, #edf8fd) !important;
  color: var(--silo-ink) !important;
}

body.page-silo-premium .section-heading {
  max-width: 800px !important;
  margin-bottom: 23px !important;
}

body.page-silo-premium .section-heading h2 {
  margin: 0 !important;
  color: #11161d !important;
  font-size: clamp(1.8rem, 3vw, 2.75rem) !important;
  font-weight: 850 !important;
  letter-spacing: -.045em !important;
  line-height: 1.06 !important;
  text-wrap: balance;
}

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

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

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

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

body.page-silo-premium .feature-grid article,
body.page-silo-premium .use-grid article,
body.page-silo-premium .link-grid a {
  position: relative !important;
  min-height: 132px !important;
  padding: 19px !important;
  overflow: hidden !important;
  border: 1px solid #e2e7ed !important;
  border-radius: 17px !important;
  background: #fff !important;
  color: #171c23 !important;
  box-shadow: 0 7px 24px rgba(15,23,42,.04) !important;
  transition: transform .19s ease, box-shadow .19s ease, border-color .19s ease !important;
}

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(-4px) !important;
  border-color: #c5e8f8 !important;
  box-shadow: 0 16px 38px rgba(15,23,42,.075) !important;
}

body.page-silo-premium .card-accent {
  display: block !important;
  width: 31px !important;
  height: 4px !important;
  margin-bottom: 15px !important;
  border-radius: 999px !important;
  background: var(--silo-blue) !important;
}

body.page-silo-premium .feature-grid h3,
body.page-silo-premium .use-grid strong {
  display: block !important;
  margin: 0 !important;
  color: #171c23 !important;
  font-size: .9rem !important;
  font-weight: 830 !important;
  opacity: 1 !important;
}

body.page-silo-premium .feature-grid p,
body.page-silo-premium .use-grid p {
  margin: 7px 0 0 !important;
  color: #707c8b !important;
  font-size: .77rem !important;
  line-height: 1.56 !important;
  opacity: 1 !important;
}

body.page-silo-premium .link-grid a {
  min-height: 115px !important;
  padding: 18px 47px 18px 18px !important;
  text-decoration: none !important;
}

body.page-silo-premium .link-grid .link-arrow {
  position: absolute !important;
  top: 15px !important;
  right: 15px !important;
  display: grid !important;
  place-items: center !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 8px !important;
  background: var(--silo-blue-soft) !important;
  color: #0086c7 !important;
  font-size: .78rem !important;
  font-weight: 900 !important;
}

body.page-silo-premium .link-grid strong {
  display: block !important;
  color: #171c23 !important;
  font-size: .88rem !important;
  font-weight: 830 !important;
  opacity: 1 !important;
}

body.page-silo-premium .link-grid > a > span:last-child {
  display: block !important;
  margin-top: 7px !important;
  color: #727e8d !important;
  font-size: .75rem !important;
  line-height: 1.5 !important;
  opacity: 1 !important;
}

/* FAQ */
body.page-silo-premium .faq {
  max-width: 900px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: clamp(25px, 3.5vw, 38px) !important;
  border: 1px solid #e2e7ed !important;
  border-radius: 23px !important;
  background: #fff !important;
  color: #171c23 !important;
  box-shadow: var(--silo-shadow-sm) !important;
}

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

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

body.page-silo-premium .faq summary {
  position: relative !important;
  padding: 17px 42px 17px 0 !important;
  color: #1a2028 !important;
  font-size: .88rem !important;
  font-weight: 820 !important;
  list-style: none !important;
  cursor: pointer !important;
}

body.page-silo-premium .faq summary::-webkit-details-marker { display: none !important; }

body.page-silo-premium .faq summary::after {
  content: "+" !important;
  position: absolute !important;
  right: 2px !important;
  top: 50% !important;
  display: grid !important;
  place-items: center !important;
  width: 27px !important;
  height: 27px !important;
  border-radius: 8px !important;
  background: #f0f8fc !important;
  color: #1288c0 !important;
  transform: translateY(-50%) !important;
}

body.page-silo-premium .faq details[open] summary::after { content: "−" !important; }

body.page-silo-premium .faq details p {
  max-width: 760px !important;
  margin: -2px 0 17px !important;
  color: #697685 !important;
  font-size: .83rem !important;
  line-height: 1.65 !important;
  opacity: 1 !important;
}

/* Dogs hub uses same visual language while keeping dynamic product cards. */
body.page-dog-premium .hub-hero {
  align-items: center !important;
}

body.page-dog-premium .hub-facts {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
  margin-top: 20px !important;
}

body.page-dog-premium .hub-facts span {
  padding: 6px 9px !important;
  border: 1px solid #dce5ec !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #526174 !important;
  font-size: .69rem !important;
  font-weight: 750 !important;
}

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

body.page-dog-premium .section-heading {
  max-width: 800px !important;
  margin-bottom: 23px !important;
}

body.page-dog-premium .section-heading h2,
body.page-dog-premium .hub-copy h2 {
  margin: 0 !important;
  color: #11161d !important;
  font-size: clamp(1.8rem, 3vw, 2.75rem) !important;
  font-weight: 850 !important;
  letter-spacing: -.045em !important;
  line-height: 1.06 !important;
}

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

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

body.page-dog-premium .product-card {
  overflow: hidden !important;
  border: 1px solid #e2e7ed !important;
  border-radius: 19px !important;
  background: #fff !important;
  box-shadow: 0 8px 26px rgba(15,23,42,.05) !important;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease !important;
}

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

body.page-dog-premium .product-card-image {
  display: grid !important;
  place-items: center !important;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
  background: #f4f7f9 !important;
}

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

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

body.page-dog-premium .product-card-copy { padding: 17px !important; }

body.page-dog-premium .product-card h3 {
  margin: 0 !important;
}

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

body.page-dog-premium .product-card p {
  margin: 8px 0 15px !important;
  color: #707c8b !important;
  font-size: .76rem !important;
  line-height: 1.55 !important;
  opacity: 1 !important;
}

body.page-dog-premium .product-card-link {
  color: #0088ca !important;
  font-size: .76rem !important;
  font-weight: 820 !important;
  text-decoration: none !important;
}

body.page-dog-premium .product-card-link::after {
  content: " →" !important;
}

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

body.page-dog-premium .hub-copy article {
  padding: clamp(25px, 3.5vw, 37px) !important;
  border: 1px solid #e2e7ed !important;
  border-radius: 21px !important;
  background: #fff !important;
  box-shadow: 0 8px 28px rgba(15,23,42,.045) !important;
}

body.page-dog-premium .hub-copy article:first-child {
  border-color: #173346 !important;
  background:
    radial-gradient(circle at 92% 9%, rgba(8,165,239,.27), transparent 17rem),
    linear-gradient(145deg, #0b121a, #11334a) !important;
  color: #fff !important;
}

body.page-dog-premium .hub-copy article:first-child h2,
body.page-dog-premium .hub-copy article:first-child a { color: #fff !important; }

body.page-dog-premium .hub-copy article:first-child p:not(.eyebrow) {
  color: #bdc9d4 !important;
}

body.page-dog-premium .hub-copy p:not(.eyebrow) {
  color: #707c8b !important;
  font-size: .83rem !important;
  line-height: 1.65 !important;
  opacity: 1 !important;
}

body.page-dog-premium .hub-copy a {
  color: #0088ca !important;
  font-size: .8rem !important;
  font-weight: 820 !important;
  text-decoration: none !important;
}

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

body.page-dog-premium .link-grid a {
  position: relative !important;
  min-height: 108px !important;
  padding: 18px 45px 18px 18px !important;
  border: 1px solid #e2e7ed !important;
  border-radius: 17px !important;
  background: #fff !important;
  color: #171c23 !important;
  text-decoration: none !important;
  box-shadow: 0 7px 24px rgba(15,23,42,.04) !important;
}

body.page-dog-premium .link-grid a::after {
  content: "↗" !important;
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  color: #0088ca !important;
  font-weight: 900 !important;
}

body.page-dog-premium .link-grid strong {
  color: #171c23 !important;
  font-size: .88rem !important;
  font-weight: 820 !important;
}

body.page-dog-premium .link-grid span {
  margin-top: 6px !important;
  color: #727e8d !important;
  font-size: .75rem !important;
  line-height: 1.5 !important;
  opacity: 1 !important;
}

/* React-enhanced reveal motion. Content stays visible before hydration. */
.silo-motion-ready [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity .55s cubic-bezier(.22,1,.36,1) var(--reveal-delay, 0ms),
    transform .55s cubic-bezier(.22,1,.36,1) var(--reveal-delay, 0ms);
}

.silo-motion-ready [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Focus accessibility */
body.page-silo-premium .button:focus-visible,
body.page-silo-premium a:focus-visible,
body.page-dog-premium a:focus-visible,
body.page-silo-premium summary:focus-visible {
  outline: 3px solid rgba(8,165,239,.33) !important;
  outline-offset: 3px !important;
}

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

  body.page-silo-premium .hero-media,
  body.page-dog-premium .hub-hero-media {
    width: min(100%, 520px) !important;
    margin: 0 !important;
  }

  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-dog-premium .product-grid {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }

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

@media (max-width: 640px) {
  body.page-silo-premium .silo-page,
  body.page-dog-premium .dog-hub {
    width: min(100% - 18px, 1220px) !important;
    padding-top: 15px !important;
  }

  body.page-silo-premium .silo-page .hero,
  body.page-dog-premium .dog-hub .hub-hero {
    gap: 23px !important;
    padding: 24px 17px !important;
    border-radius: 22px !important;
  }

  body.page-silo-premium .silo-page .hero h1,
  body.page-dog-premium .dog-hub .hub-hero h1 {
    font-size: clamp(2.05rem, 11vw, 3.15rem) !important;
  }

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

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

  body.page-silo-premium .hero-media-frame {
    height: min(78vw, 355px) !important;
  }

  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:not(.product-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 !important;
  }

  body.page-silo-premium .search-intents {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  body.page-silo-premium .search-intents > div {
    width: 100% !important;
  }

  body.page-silo-premium .configurator-shell,
  body.page-silo-premium .content-section-soft,
  body.page-silo-premium .faq {
    padding: 23px 17px !important;
    border-radius: 21px !important;
  }

  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: 50px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.page-silo-premium *,
  body.page-dog-premium * {
    scroll-behavior: auto !important;
    animation: none !important;
    transition-duration: .01ms !important;
  }

  .silo-motion-ready [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}


/* Dog search-intent row shares the Silo SEO/navigation language. */
body.page-dog-premium .search-intents {
  display: flex !important;
  align-items: center !important;
  gap: 13px !important;
  margin: 15px 0 0 !important;
  padding: 13px 15px !important;
  overflow: hidden !important;
  border: 1px solid #e2e7ed !important;
  border-radius: 15px !important;
  background: rgba(255,255,255,.72) !important;
  box-shadow: 0 6px 20px rgba(15,23,42,.035) !important;
}

body.page-dog-premium .search-intents > span {
  flex: 0 0 auto !important;
  color: #778392 !important;
  font-size: .64rem !important;
  font-weight: 850 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

body.page-dog-premium .search-intents > div {
  display: flex !important;
  gap: 7px !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  scrollbar-width: none;
}

body.page-dog-premium .search-intents > div::-webkit-scrollbar { display: none; }

body.page-dog-premium .search-intents a {
  flex: 0 0 auto !important;
  padding: 6px 9px !important;
  border: 1px solid #dce7ed !important;
  border-radius: 999px !important;
  background: #f7fbfd !important;
  color: #4c6170 !important;
  font-size: .68rem !important;
  font-weight: 720 !important;
  text-decoration: none !important;
}

body.page-dog-premium .search-intents a:hover {
  border-color: #bfe7fa !important;
  background: #edf9ff !important;
  color: #007ebd !important;
}

@media (max-width: 640px) {
  body.page-dog-premium .search-intents {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  body.page-dog-premium .search-intents > div {
    width: 100% !important;
  }
}