/* ==========================================================================
   Doktorfy — Startseiten-Hero und Produktkarten
   Eine Kartenkomponente fuer die ganze Seite. Alle Farben und Masse als
   Token im :root-Block. Keine Inline-Styles, keine Sonderregel je Seite.
   Das Theme faerbt a und h1-h6 global, deshalb tragen Farbregeln hier
   einen Elternselektor zur Spezifitaet statt !important.
   ========================================================================== */

:root {
  --dy-blue:        #33ccff;
  --dy-blue-dark:   #1a9fd4;
  --dy-blue-bg:     #eaf7fe;
  --dy-ink:         #0f2a36;
  --dy-text:        #3d5966;
  --dy-muted:       #71909d;
  --dy-line:        #e6edf1;
  --dy-surface:     #ffffff;
  --dy-canvas:      #f6f8f9;
  --dy-green:       #2f9e6b;

  --dy-radius:      14px;
  --dy-radius-sm:   9px;
  --dy-radius-pill: 999px;
  --dy-shadow:      0 1px 3px rgba(15, 42, 54, .07);
  --dy-shadow-lg:   0 18px 44px rgba(15, 42, 54, .14);

  --dy-fs-xs: 12px;
  --dy-fs-sm: 13px;
  --dy-fs-md: 15px;
  --dy-fs-lg: 18px;
  --dy-fs-xl: 24px;
  --dy-fs-2xl: 40px;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.dy-hero {
  background: var(--dy-surface);
  padding: 56px 0 64px;
}

.dy-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  gap: 56px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

.dy-hero .dy-hero-kicker {
  margin: 0 0 12px;
  font-size: var(--dy-fs-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dy-blue-dark);
}

.dy-hero h1.dy-hero-title {
  margin: 0 0 16px;
  font-size: var(--dy-fs-2xl);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -.015em;
  color: var(--dy-ink);
}

.dy-hero .dy-hero-intro {
  margin: 0 0 26px;
  max-width: 34em;
  font-size: var(--dy-fs-lg);
  line-height: 1.6;
  color: var(--dy-text);
}

.dy-hero ul.dy-hero-points {
  margin: 0 0 30px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.dy-hero li.dy-hero-point {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dy-hero-check {
  position: relative;
  flex-shrink: 0;
  width: 21px;
  height: 21px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--dy-blue-bg);
}
.dy-hero-check::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 7px;
  width: 5px;
  height: 9px;
  border: solid var(--dy-blue-dark);
  border-width: 0 2px 2px 0;
  transform: rotate(42deg);
}

.dy-hero .dy-hero-point-text {
  font-size: var(--dy-fs-md);
  line-height: 1.55;
  color: var(--dy-text);
}
.dy-hero .dy-hero-point-text strong { color: var(--dy-ink); font-weight: 700; }

.dy-hero .dy-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
}

.dy-hero a.dy-hero-cta {
  display: inline-block;
  padding: 15px 30px;
  border-radius: var(--dy-radius-pill);
  background: var(--dy-ink);
  color: var(--dy-surface);
  font-size: var(--dy-fs-md);
  font-weight: 700;
  text-decoration: none;
  transition: background .16s, transform .16s;
}
.dy-hero a.dy-hero-cta:hover {
  background: var(--dy-blue-dark);
  color: var(--dy-surface);
  transform: translateY(-1px);
}

.dy-hero a.dy-hero-alt {
  display: inline-block;
  padding: 15px 24px;
  border-radius: var(--dy-radius-pill);
  border: 1.5px solid var(--dy-line);
  background: var(--dy-surface);
  color: var(--dy-ink);
  font-size: var(--dy-fs-md);
  font-weight: 600;
  text-decoration: none;
  transition: border-color .16s, color .16s;
}
.dy-hero a.dy-hero-alt:hover { border-color: var(--dy-blue); color: var(--dy-blue-dark); }

.dy-hero .dy-hero-note {
  margin: 0;
  font-size: var(--dy-fs-sm);
  color: var(--dy-muted);
}

/* Rechte Spalte: Bild mit zwei Karten darueber */
.dy-hero-visual { position: relative; }

.dy-hero-figure {
  margin: 0;
  overflow: hidden;
  border-radius: 22px;
  background: var(--dy-canvas);
}
.dy-hero .dy-hero-image {
  display: block;
  width: 100%;
  height: 460px;
  object-fit: cover;
  /* Rechter Bildausschnitt: die Person rueckt dadurch nach links, rechts
     bleibt Platz fuer die Karten. */
  object-position: 100% center;
}

/* Anordnung der beiden Karten im Bild.
   Sie liegen bei jeder Fensterbreite auf dem Foto, nie darueber oder darunter.
   Die Breite waechst stufenlos mit, damit keine Umschaltpunkte noetig sind.
   Die kompakte Darstellung steht am Dateiende, sonst gewinnen die
   allgemeinen Kartenregeln bei gleicher Spezifitaet. */
.dy-hero-cards {
  position: absolute;
  z-index: 2;
  /* Tief genug, dass das Gesicht frei bleibt */
  top: clamp(64px, 9vw, 132px);
  right: clamp(-18px, -1.4vw, -8px);
  display: flex;
  /* Ohne diese Zeile zieht der Flex-Container beide Karten auf dieselbe
     Unterkante — die versetzte Karte wird dadurch um ihren Versatz kuerzer
     und wirkt kleiner als die andere. */
  align-items: flex-start;
  gap: clamp(8px, 1vw, 13px);
  max-width: calc(100% - 24px);
}

/* --------------------------------------------------------------------------
   Produktkarte — die eine Komponente
   -------------------------------------------------------------------------- */
.dy-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--dy-surface);
  border: 1px solid var(--dy-line);
  border-radius: var(--dy-radius);
  box-shadow: var(--dy-shadow);
  transition: border-color .16s, box-shadow .16s, transform .16s;
}
.dy-card:hover {
  border-color: var(--dy-blue);
  box-shadow: 0 10px 28px rgba(15, 42, 54, .11);
  transform: translateY(-2px);
}
.dy-card.is-unavailable { opacity: .72; }

.dy-card-visual {
  position: relative;
  display: block;
  height: 168px;
  background: var(--dy-canvas);
  text-decoration: none;
}
.dy-card .dy-card-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dy-card-badge {
  position: absolute;
  top: 11px;
  left: 11px;
  z-index: 2;
  padding: 4px 11px;
  border-radius: var(--dy-radius-pill);
  font-size: var(--dy-fs-xs);
  font-weight: 700;
  line-height: 1.4;
}
.dy-card-badge.is-new    { background: var(--dy-blue-bg); color: var(--dy-blue-dark); }
.dy-card-badge.is-strong { background: #e8f4ff; color: #14618a; }
.dy-card-badge.is-deal   { background: #eaf7ef; color: var(--dy-green); }
.dy-card-badge.is-muted  { background: #eef1f3; color: var(--dy-muted); }

.dy-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 7px;
  padding: 15px 16px 16px;
}

.dy-card h3.dy-card-title {
  margin: 0;
  font-size: var(--dy-fs-md);
  font-weight: 700;
  line-height: 1.32;
  color: var(--dy-ink);
}
.dy-card h3.dy-card-title a { color: inherit; text-decoration: none; }
.dy-card h3.dy-card-title a:hover { color: var(--dy-blue-dark); }

.dy-card .dy-card-subtitle {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  font-size: var(--dy-fs-sm);
  line-height: 1.4;
  color: var(--dy-muted);
}

.dy-card .dy-card-values {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 6px;
  margin: 3px 0 0;
}
.dy-card-thc  { font-size: var(--dy-fs-xl); font-weight: 800; line-height: 1; color: var(--dy-ink); }
.dy-card-unit { font-size: var(--dy-fs-xs); font-weight: 700; letter-spacing: .04em; color: var(--dy-ink); }
.dy-card-cbd  { margin-left: 4px; font-size: var(--dy-fs-sm); white-space: nowrap; color: var(--dy-muted); }

.dy-card .dy-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 2px 0 0;
}
.dy-card-tag {
  padding: 3px 9px;
  border-radius: var(--dy-radius-pill);
  background: var(--dy-canvas);
  font-size: var(--dy-fs-xs);
  color: var(--dy-text);
}

.dy-card .dy-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 6px 0 0;
}
.dy-card-price { font-size: var(--dy-fs-lg); font-weight: 800; color: var(--dy-ink); }
.dy-card-per   { font-size: var(--dy-fs-xs); font-weight: 600; color: var(--dy-muted); }

.dy-card-stock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--dy-fs-xs);
  color: var(--dy-text);
}
.dy-card-stock::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--dy-green);
}
.dy-card-stock.is-out { color: var(--dy-muted); }
.dy-card-stock.is-out::before { background: var(--dy-muted); }

.dy-card a.dy-card-action {
  display: block;
  margin-top: auto;
  padding: 11px 14px;
  border: 1px solid var(--dy-ink);
  border-radius: var(--dy-radius-pill);
  background: var(--dy-ink);
  color: var(--dy-surface);
  font-size: var(--dy-fs-sm);
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  transition: background .16s, border-color .16s, color .16s;
}
.dy-card a.dy-card-action:hover {
  background: var(--dy-blue-dark);
  border-color: var(--dy-blue-dark);
  color: var(--dy-surface);
}
.dy-card a.dy-card-action.is-ghost {
  background: var(--dy-surface);
  border-color: var(--dy-line);
  color: var(--dy-ink);
}
.dy-card a.dy-card-action.is-ghost:hover { border-color: var(--dy-blue); color: var(--dy-blue-dark); }

/* --------------------------------------------------------------------------
   Produktreihe
   -------------------------------------------------------------------------- */
.dy-row {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  padding: 8px 24px 12px;
}

.dy-row-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.dy-row h2.dy-row-title {
  margin: 0;
  font-size: var(--dy-fs-xl);
  font-weight: 800;
  color: var(--dy-ink);
}
.dy-row a.dy-row-all {
  flex-shrink: 0;
  font-size: var(--dy-fs-sm);
  font-weight: 700;
  color: var(--dy-blue-dark);
  text-decoration: none;
}
.dy-row a.dy-row-all:hover { color: var(--dy-ink); }

.dy-row-track {
  display: flex;
  gap: 16px;
  padding: 4px 2px 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.dy-row-track::-webkit-scrollbar { display: none; }
.dy-row-track > .dy-card { flex: 0 0 236px; scroll-snap-align: start; }

.dy-row-nav { display: flex; justify-content: flex-end; gap: 10px; }
.dy-row-btn {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--dy-line);
  border-radius: 50%;
  background: var(--dy-surface);
  color: var(--dy-ink);
  font-size: var(--dy-fs-lg);
  line-height: 1;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.dy-row-btn:hover { border-color: var(--dy-blue); background: var(--dy-blue-bg); color: var(--dy-blue-dark); }
.dy-row-btn:disabled { opacity: .35; cursor: default; }

/* --------------------------------------------------------------------------
   Schmale Ansichten
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   Kompakte Kartenform im Hero
   Steht bewusst am Ende: gleiche Spezifitaet wie die Grundregeln, spaetere
   Position entscheidet. Elementselektoren halten die Werte vergleichbar.
   -------------------------------------------------------------------------- */
.dy-hero-cards .dy-card {
  width: clamp(122px, 11.5vw, 168px);
  box-shadow: var(--dy-shadow-lg);
}
/* Die linke Karte sitzt tiefer, die rechte ragt oben heraus */
.dy-hero-cards .dy-card:first-child { margin-top: clamp(30px, 3.8vw, 54px); }
.dy-hero-cards .dy-card:hover { transform: none; }

.dy-hero-cards .dy-card .dy-card-visual { height: clamp(74px, 7vw, 104px); }
.dy-hero-cards .dy-card .dy-card-body   { gap: 4px; padding: clamp(8px, .9vw, 12px) clamp(9px, .9vw, 13px) clamp(10px, .9vw, 13px); }

.dy-hero-cards .dy-card h3.dy-card-title {
  font-size: var(--dy-fs-sm);
  /* Einzeilig: sonst macht ein laengerer Name eine Karte hoeher als die andere */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dy-hero-cards .dy-card .dy-card-thc     { font-size: var(--dy-fs-lg); }
.dy-hero-cards .dy-card .dy-card-price   { font-size: var(--dy-fs-md); }

.dy-hero-cards .dy-card .dy-card-subtitle,
.dy-hero-cards .dy-card .dy-card-tags,
.dy-hero-cards .dy-card .dy-card-cbd,
.dy-hero-cards .dy-card .dy-card-stock,
.dy-hero-cards .dy-card a.dy-card-action { display: none; }

.dy-hero-cards .dy-card .dy-card-meta { margin-top: 2px; }
.dy-hero-cards .dy-card .dy-card-badge { top: 9px; left: 9px; padding: 3px 9px; }

@media (max-width: 1040px) {
  .dy-hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .dy-hero .dy-hero-image { height: clamp(300px, 46vw, 430px); }
  /* Karten bleiben auch hier im Bild, nur etwas weiter oben */
  .dy-hero-cards { top: clamp(52px, 7vw, 96px); }
}

@media (max-width: 680px) {
  .dy-hero { padding: 34px 0 40px; }
  .dy-hero h1.dy-hero-title { font-size: 30px; }
  .dy-hero .dy-hero-intro { font-size: var(--dy-fs-md); }
  .dy-hero .dy-hero-image { height: clamp(300px, 78vw, 380px); }
  .dy-hero-cards { top: clamp(40px, 9vw, 70px); right: -6px; }
  .dy-hero-cards .dy-card .dy-card-visual { height: 66px; }
  .dy-hero a.dy-hero-cta,
  .dy-hero a.dy-hero-alt { width: 100%; text-align: center; }
  .dy-row-track > .dy-card { flex-basis: 212px; }
}

/* Sehr schmale Geraete: nur noch die vordere Karte, sonst wird es eng */
@media (max-width: 430px) {
  .dy-hero-cards .dy-card:first-child { display: none; }
  .dy-hero-cards .dy-card { width: clamp(132px, 38vw, 158px); }
}


/* --------------------------------------------------------------------------
   Shop-Uebersicht
   Das li.product bleibt als Rasterzelle erhalten, damit die Filterleiste
   weiter Eintraege ein- und ausblenden kann. Die Karte darin ist dieselbe
   Komponente wie ueberall sonst.
   -------------------------------------------------------------------------- */
.woocommerce ul.products,
ul.products {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after,
ul.products::before,
ul.products::after { display: none; }

.woocommerce ul.products li.product,
ul.products li.product {
  position: relative;
  float: none;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: visible;
  text-align: left;
}

/* Die Karte fuellt die Rasterzelle vollstaendig aus */
ul.products li.product > .dy-card { height: 100%; }

/* Versteckte Datenfelder der Filterleiste */
.dy-data { display: none; }

/* Huelle des Themes durchreichen, falls ein Pfad sie doch ausgibt */
ul.products li.product .inner_product,
ul.products li.product .inner_product_header,
ul.products li.product .inner_product_header_table,
ul.products li.product .inner_product_header_cell { display: contents; }

/* Reste der frueheren Kartenform */
ul.products li.product .thumbnail_container,
ul.products li.product .avia-arrow,
ul.products li.product .dy-card-stats,
ul.products li.product .dy-badges-tr,
ul.products li.product .dy-card-brand,
ul.products li.product .woocommerce-loop-product__title,
ul.products li.product .avia_cart_buttons,
ul.products li.product > a.woocommerce-LoopProduct-link,
ul.products li.product > .price,
ul.products li.product > .star-rating,
ul.products li.product > .onsale { display: none; }

/* Das Theme zentriert Kacheltexte; die Karte bleibt linksbuendig */
ul.products li.product .dy-card,
ul.products li.product .dy-card h3.dy-card-title,
ul.products li.product .dy-card .dy-card-subtitle,
ul.products li.product .dy-card .dy-card-values,
ul.products li.product .dy-card .dy-card-tags,
ul.products li.product .dy-card .dy-card-meta { text-align: left; }
ul.products li.product .dy-card a.dy-card-action { text-align: center; }

@media (max-width: 1100px) {
  .woocommerce ul.products,
  ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 840px) {
  .woocommerce ul.products,
  ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .woocommerce ul.products,
  ul.products { grid-template-columns: 1fr; gap: 14px; }
}


/* --------------------------------------------------------------------------
   Rezept-Konfigurator
   Die Kacheln bleiben klein, damit man sie ziehen kann, folgen aber derselben
   Formensprache wie die Produktkarte. Elternselektor, weil das Alt-Stylesheet
   des Konfigurators nach diesem hier ausgegeben wird.
   -------------------------------------------------------------------------- */
.czrk .czrk-tile {
  min-width: 132px;
  max-width: 132px;
  padding: 0 0 9px;
  overflow: hidden;
  background: var(--dy-surface);
  border: 1px solid var(--dy-line);
  border-radius: var(--dy-radius);
  box-shadow: var(--dy-shadow);
  text-align: left;
  transition: border-color .16s, box-shadow .16s, transform .16s;
}
.czrk .czrk-tile:hover {
  border-color: var(--dy-blue);
  box-shadow: 0 10px 28px rgba(15, 42, 54, .11);
  transform: translateY(-2px);
}
.czrk .czrk-tile.in-rezept { border-color: var(--dy-blue); background: var(--dy-blue-bg); }

.czrk .czrk-tile-img {
  width: 100%;
  height: 92px;
  margin: 0 0 9px;
  border-radius: 0;
  background: var(--dy-canvas);
}
.czrk .czrk-tile-img img {
  width: 100%;
  height: 100%;
  border-radius: 0;
  object-fit: cover;
}

.czrk .czrk-tile-name {
  padding: 0 10px;
  font-size: var(--dy-fs-sm);
  font-weight: 700;
  line-height: 1.3;
  color: var(--dy-ink);
}
.czrk .czrk-tile-brand {
  padding: 0 10px;
  margin-top: 2px;
  font-size: var(--dy-fs-xs);
  color: var(--dy-muted);
}
.czrk .czrk-tile-bot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  padding: 7px 10px 0;
}
.czrk .czrk-tile-thc {
  font-size: var(--dy-fs-md);
  font-weight: 800;
  color: var(--dy-ink);
}
.czrk .czrk-tile-price {
  font-size: var(--dy-fs-xs);
  font-weight: 700;
  color: var(--dy-muted);
}


/* Ablageflaeche: war 280 Pixel hoch, auch wenn nichts darin lag */
.czrk { margin: 0 auto; }

.czrk .czrk-rx {
  border: 2px dashed var(--dy-line);
  border-radius: var(--dy-radius);
  background: var(--dy-surface);
  transition: border-color .16s, background .16s;
}
.czrk .czrk-rx.over { border-color: var(--dy-blue); background: var(--dy-blue-bg); }

.czrk .czrk-rx-head {
  padding: 12px 16px;
  font-size: var(--dy-fs-md);
  font-weight: 700;
  color: var(--dy-ink);
}
.czrk .czrk-rx-count { font-size: var(--dy-fs-sm); font-weight: 600; color: var(--dy-muted); }

.czrk .czrk-rx-body {
  min-height: 118px;
  padding: 0 12px 14px;
  align-content: flex-start;
  gap: 8px;
}

.czrk .czrk-rx-hint {
  padding: 22px 0;
  font-size: var(--dy-fs-sm);
  color: var(--dy-muted);
}

.czrk .czrk-rx-item {
  border: 1px solid var(--dy-line);
  border-radius: var(--dy-radius-sm);
  background: var(--dy-surface);
}
.czrk .czrk-rx-item-name { font-size: var(--dy-fs-sm); font-weight: 700; color: var(--dy-ink); }
.czrk .czrk-rx-item-meta { font-size: var(--dy-fs-xs); color: var(--dy-muted); }

.czrk .czrk-submit {
  border-radius: var(--dy-radius-pill);
  background: var(--dy-ink);
  color: var(--dy-surface);
  font-weight: 700;
}
.czrk .czrk-submit:hover { background: var(--dy-blue-dark); color: var(--dy-surface); }

@media (max-width: 600px) {
  .czrk .czrk-rx-body { min-height: 96px; }
}


/* --------------------------------------------------------------------------
   Zusatz in der Karte: Uebereinstimmung als Balken
   -------------------------------------------------------------------------- */
.dy-card .dy-card-uebereinstimmung {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 0;
}
.dy-card-balken {
  flex: 1;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--dy-canvas);
}
.dy-card-balken-fuellung {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--dy-blue);
}
.dy-card-balken-text {
  flex-shrink: 0;
  font-size: var(--dy-fs-xs);
  font-weight: 600;
  color: var(--dy-muted);
}

/* --------------------------------------------------------------------------
   Produktdetailseite an die Kartensprache angleichen
   -------------------------------------------------------------------------- */
.single-product .dy-similar,
.dy-section .dy-similar {
  display: flex;
  gap: 16px;
  padding: 4px 2px 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.single-product .dy-similar::-webkit-scrollbar,
.dy-section .dy-similar::-webkit-scrollbar { display: none; }
.dy-similar > .dy-card { flex: 0 0 214px; scroll-snap-align: start; }

/* Hauptknopf der Detailseite wie die Knoepfe auf den Karten.
   Das Theme haengt seine Farben an die Wrapper-Kennung #top; ohne diese
   im Selektor gewinnt es den Spezifitaetsvergleich. */
#top.single-product button.single_add_to_cart_button,
#top.single-product .single_add_to_cart_button,
#top .woocommerce button.single_add_to_cart_button,
body.single-product #top button.single_add_to_cart_button {
  padding: 14px 30px;
  background: var(--dy-ink);
  border: 1px solid var(--dy-ink);
  border-radius: 999px;
  color: var(--dy-surface);
  font-weight: 700;
  text-shadow: none;
}
#top.single-product button.single_add_to_cart_button:hover,
#top.single-product .single_add_to_cart_button:hover,
#top .woocommerce button.single_add_to_cart_button:hover,
body.single-product #top button.single_add_to_cart_button:hover {
  background: var(--dy-blue-dark);
  border-color: var(--dy-blue-dark);
  color: var(--dy-surface);
}