/* ==========================================================================
   Shop-Startseite v2 ([dogwalk_shop_v2]) — Produktauswahl im dw2-Look.
   --------------------------------------------------------------------------
   Übernimmt die Gestaltungssprache der Konfigurator-Seiten (src/styles/
   tokens.css + base.css): Handlee-Headlines, Lato-Fließtext, weiche Karten
   mit dezentem Hover-Lift, orange dw2-btn--primary-CTA.

   Self-contained: Die benötigten Design-Tokens sind hier gespiegelt, damit
   die Seite NICHT vom Vue-Bundle (dist/dogwalk-v2.css) abhängt — der Shop
   rendert statisch in PHP, ganz ohne JS. Werte sind identisch zu tokens.css;
   ändert sich dort die CI, hier nachziehen (oder langfristig tokens.css als
   eigene Datei ausliefern und einbinden).

   Alle Regeln sind auf .dw2-shop gescoped und kollidieren nicht mit Neve.
   Nur fonts.css (Handlee/Lato) muss zusätzlich geladen werden.
   ========================================================================== */

.dw2-shop {
  /* ------------------------------ Tokens ------------------------------ */
  --dw-orange: var(--wp--preset--color--dw-akzent, #f48301);
  --dw-blue: var(--wp--preset--color--dw-primaer, #008fcd);
  --dw-blue-head: #54b0d8;
  --dw-navy: #00364e;
  --dw-text: #333333;
  --dw-muted: #5a6b73;
  --dw-border: #e6e6e6;
  --dw-border-strong: #cccccc;

  --dw-font-hand: 'Handlee', cursive;
  --dw-font-sans: 'Lato', 'Source Sans Pro', Arial, Helvetica, sans-serif;

  --dw-fs-body: clamp(0.95rem, 0.9rem + 0.25vw, 1.05rem);
  --dw-fs-h1: clamp(1.7rem, 1.4rem + 1.2vw, 2.4rem);
  --dw-fs-tile: clamp(1.4rem, 1.2rem + 0.8vw, 1.85rem);

  --dw-radius: var(--wp--custom--dw-radius, 6px);
  --dw-gap: 16px;

  --dw-shadow-1: 0 1px 3px rgba(0, 20, 30, 0.08);
  --dw-shadow-2: 0 4px 14px rgba(0, 20, 30, 0.12);

  --dw-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dw-t-fast: 140ms;
  --dw-t-med: 260ms;

  font-family: var(--dw-font-sans);
  font-size: var(--dw-fs-body);
  color: var(--dw-text);
  line-height: 1.55;
  max-width: 1160px;
  margin: 0 auto;
  padding: clamp(24px, 3vw, 48px) var(--dw-gap);
}

@media (prefers-reduced-motion: reduce) {
  .dw2-shop { --dw-t-fast: 0ms; --dw-t-med: 0ms; }
}

/* ------------------------------- Slogan -------------------------------- */
.dw2-shop__slogan {
  text-align: center;
  max-width: 620px;
  margin: 0 auto clamp(28px, 4vw, 48px);
  padding: 0 16px;
  opacity: 0;
  animation: dw2ShopSloganIn 0.6s var(--dw-ease) forwards;
}

.dw2-shop__slogan-title {
  display: block;
  font-family: var(--dw-font-hand);
  font-weight: 400;
  font-size: var(--dw-fs-h1);
  color: var(--dw-blue-head);
  line-height: 1.15;
  margin-bottom: 10px;
}

.dw2-shop__slogan-text {
  display: block;
  color: var(--dw-muted);
  line-height: 1.65;
}

/* -------------------------------- Raster ------------------------------- */
.dw2-shop__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(var(--dw-gap) * 1.25);
}

/* -------------------------------- Kachel ------------------------------- */
.dw2-shop__tile {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--dw-border);
  border-radius: var(--dw-radius);
  overflow: hidden;
  text-decoration: none;
  box-shadow: var(--dw-shadow-1);
  transition:
    transform var(--dw-t-med) var(--dw-ease),
    box-shadow var(--dw-t-med) var(--dw-ease),
    border-color var(--dw-t-med) var(--dw-ease);
  /* Gestaffeltes Einblenden (animation-delay kommt inline aus shop.php) */
  opacity: 0;
  transform: translateY(16px);
  animation: dw2ShopTileIn 0.5s var(--dw-ease) forwards;
}

.dw2-shop__tile:hover,
.dw2-shop__tile:focus-visible {
  transform: translateY(-3px);
  border-color: var(--dw-border-strong);
  box-shadow: 0 0 0 1px var(--dw-border-strong), var(--dw-shadow-2);
  text-decoration: none;
}

.dw2-shop__tile:focus-visible {
  outline: 2px solid var(--dw-blue);
  outline-offset: 2px;
}

/* Bildbereich — Seitenverhältnis bleibt erhalten (kein Beschnitt) */
.dw2-shop__media {
  display: block;
  height: 230px;
  padding: 16px;
  background: #fff;
}

.dw2-shop__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: transform 0.35s var(--dw-ease);
}

.dw2-shop__tile:hover .dw2-shop__media img { transform: scale(1.04); }

/* Textbereich */
.dw2-shop__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 4px 18px 18px;
}

.dw2-shop__title {
  display: block;
  font-family: var(--dw-font-hand);
  font-weight: 400;
  color: var(--dw-blue-head);
  font-size: var(--dw-fs-tile);
  line-height: 1.2;
  margin-bottom: 6px;
}

.dw2-shop__desc {
  display: block;
  color: var(--dw-muted);
  line-height: 1.55;
  margin-bottom: 16px;
  flex: 1 1 auto;
}

/* CTA — visuell identisch zum Konfigurator-Button dw2-btn--primary */
.dw2-shop__btn {
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin-top: auto;
  padding: 12px 20px;
  background: var(--dw-orange);
  border: 1px solid var(--dw-orange);
  border-radius: var(--dw-radius);
  color: #fff;
  font-weight: 600;
  text-align: center;
  line-height: 1.4;
  box-shadow: var(--dw-shadow-1);
  transition: background var(--dw-t-fast) var(--dw-ease), box-shadow var(--dw-t-fast) var(--dw-ease);
}

.dw2-shop__tile:hover .dw2-shop__btn,
.dw2-shop__tile:focus-visible .dw2-shop__btn {
  background: color-mix(in srgb, var(--dw-orange) 88%, #000);
  box-shadow: var(--dw-shadow-2);
}

/* ------------------------- Betriebsferien-Banner ----------------------- */
.dw2-shop__ferien {
  border: 1px solid var(--dw-navy);
  border-radius: var(--dw-radius);
  overflow: hidden;
  background: #fff;
  text-align: center;
  padding: 0 16px 14px;
  margin: 0 auto clamp(24px, 3vw, 36px);
  max-width: 760px;
  box-shadow: var(--dw-shadow-1);
}

.dw2-shop__ferien strong {
  display: block;
  background: var(--dw-navy);
  color: #fff;
  padding: 10px 14px;
  margin: 0 -16px 12px;
  font-weight: 600;
}

.dw2-shop__ferien a { color: var(--dw-blue); }

/* ------------------------------ Keyframes ------------------------------ */
@keyframes dw2ShopTileIn {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes dw2ShopSloganIn {
  from { opacity: 0; transform: translateY(-24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .dw2-shop__tile { animation: none; opacity: 1; transform: none; }
  .dw2-shop__tile:hover { transform: none; }
  .dw2-shop__slogan { animation: none; opacity: 1; }
}

/* ------------------------------ Responsive ----------------------------- */
@media (max-width: 991px) {
  .dw2-shop__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 575px) {
  .dw2-shop__grid { grid-template-columns: 1fr; }
  .dw2-shop__media { height: 200px; }
}