/* =========================================================
   INSELRADIO FÖHR SHOP
   Core Design System
   Datei: irf-shop-core.css
   ========================================================= */


/* =========================================================
   1. DESIGN TOKENS
   ========================================================= */

:root {

  /* Brand Colors */
  --irf-shop-navy: #00253c;
  --irf-shop-blue: #003e5f;
  --irf-shop-cyan: #1ea4d2;
  --irf-shop-sky: #8edcf5;

  /* Backgrounds */
  --irf-shop-bg: #f5f8fa;
  --irf-shop-surface: #ffffff;

  /* Glass */
  --irf-shop-glass: rgba(255, 255, 255, 0.09);
  --irf-shop-glass-hover: rgba(255, 255, 255, 0.13);

  /* Text */
  --irf-shop-text: #15232c;
  --irf-shop-text-soft: #44535d;
  --irf-shop-muted: #71808a;
  --irf-shop-text-light: #ffffff;

  /* Borders */
  --irf-shop-border: rgba(0, 62, 95, 0.12);
  --irf-shop-border-light: rgba(255, 255, 255, 0.16);

  /* Status Colors */
  --irf-shop-success: #27875e;
  --irf-shop-warning: #d79a21;
  --irf-shop-danger: #c84a4a;

  /* Radius */
  --irf-shop-radius-sm: 10px;
  --irf-shop-radius: 18px;
  --irf-shop-radius-lg: 24px;
  --irf-shop-radius-pill: 999px;

  /* Shadows */
  --irf-shop-shadow-sm:
    0 6px 18px rgba(0, 37, 60, 0.08);

  --irf-shop-shadow:
    0 14px 35px rgba(0, 37, 60, 0.12);

  --irf-shop-shadow-hover:
    0 20px 45px rgba(0, 37, 60, 0.18);

  /* Layout */
  --irf-shop-container: 1180px;
  --irf-shop-container-wide: 1380px;

  /* Spacing */
  --irf-shop-space-xs: 6px;
  --irf-shop-space-sm: 12px;
  --irf-shop-space-md: 20px;
  --irf-shop-space-lg: 32px;
  --irf-shop-space-xl: 52px;
  --irf-shop-space-xxl: 80px;

  /* Animation */
  --irf-shop-transition: 180ms ease;
}


/* =========================================================
   2. GLOBAL BASIS
   ========================================================= */

html {
  box-sizing: border-box;
  scroll-behavior: smooth;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  background: var(--irf-shop-bg);
  color: var(--irf-shop-text);
}


/* =========================================================
   3. SHOP WRAPPER
   ========================================================= */

.irf-shop {
  width: 100%;
  color: var(--irf-shop-text);
}

.irf-shop-container {
  width: min(
    calc(100% - 32px),
    var(--irf-shop-container)
  );
  margin-inline: auto;
}

.irf-shop-container--wide {
  width: min(
    calc(100% - 32px),
    var(--irf-shop-container-wide)
  );
  margin-inline: auto;
}


/* =========================================================
   4. SECTIONS
   ========================================================= */

.irf-shop-section {
  position: relative;
  width: 100%;
  padding: var(--irf-shop-space-xxl) 0;
}

.irf-shop-section--small {
  padding: var(--irf-shop-space-xl) 0;
}

.irf-shop-section--white {
  background: var(--irf-shop-surface);
}

.irf-shop-section--dark {
  background:
    linear-gradient(
      135deg,
      var(--irf-shop-navy) 0%,
      var(--irf-shop-blue) 100%
    );

  color: var(--irf-shop-text-light);
}


/* =========================================================
   5. TYPOGRAFIE
   ========================================================= */

.irf-shop h1,
.irf-shop h2,
.irf-shop h3,
.irf-shop h4 {
  margin-top: 0;
  line-height: 1.15;
  color: inherit;
}

.irf-shop h1 {
  font-size: clamp(2rem, 5vw, 4rem);
}

.irf-shop h2 {
  font-size: clamp(1.7rem, 3vw, 2.7rem);
}

.irf-shop h3 {
  font-size: clamp(1.25rem, 2vw, 1.6rem);
}

.irf-shop p {
  margin-top: 0;
  line-height: 1.65;
}

.irf-shop-text-muted {
  color: var(--irf-shop-muted);
}

.irf-shop-section--dark .irf-shop-text-muted {
  color: rgba(255, 255, 255, 0.72);
}


/* =========================================================
   6. SECTION HEADER
   ========================================================= */

.irf-shop-section-header {
  max-width: 720px;
  margin-bottom: var(--irf-shop-space-lg);
}

.irf-shop-section-header__eyebrow {
  display: inline-block;
  margin-bottom: 8px;

  color: var(--irf-shop-cyan);

  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.irf-shop-section-header__title {
  margin-bottom: 12px;
}

.irf-shop-section-header__text {
  margin-bottom: 0;
  color: var(--irf-shop-text-soft);
}

.irf-shop-section--dark
.irf-shop-section-header__text {
  color: rgba(255, 255, 255, 0.76);
}


/* =========================================================
   7. GRID
   ========================================================= */

.irf-shop-grid {
  display: grid;
  gap: var(--irf-shop-space-md);
}

.irf-shop-grid--2 {
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
}

.irf-shop-grid--3 {
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
}

.irf-shop-grid--4 {
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
}


/* =========================================================
   8. CARDS
   ========================================================= */

.irf-shop-card {
  position: relative;
  overflow: hidden;

  background: var(--irf-shop-surface);

  border:
    1px solid
    var(--irf-shop-border);

  border-radius:
    var(--irf-shop-radius);

  box-shadow:
    var(--irf-shop-shadow-sm);

  transition:
    transform var(--irf-shop-transition),
    box-shadow var(--irf-shop-transition),
    border-color var(--irf-shop-transition);
}

.irf-shop-card:hover {
  transform: translateY(-3px);

  box-shadow:
    var(--irf-shop-shadow-hover);

  border-color:
    rgba(30, 164, 210, 0.24);
}

.irf-shop-card__content {
  padding: var(--irf-shop-space-md);
}


/* =========================================================
   9. GLASS CARD
   ========================================================= */

.irf-shop-glass-card {
  background: var(--irf-shop-glass);

  border:
    1px solid
    var(--irf-shop-border-light);

  border-radius:
    var(--irf-shop-radius);

  box-shadow:
    0 14px 40px
    rgba(0, 0, 0, 0.14);

  backdrop-filter:
    blur(14px);

  -webkit-backdrop-filter:
    blur(14px);
}


/* =========================================================
   10. BUTTONS
   ========================================================= */

.irf-shop-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  min-height: 46px;
  padding: 11px 20px;

  border:
    1px solid transparent;

  border-radius:
    var(--irf-shop-radius-pill);

  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;

  text-decoration: none;
  cursor: pointer;

  transition:
    background var(--irf-shop-transition),
    color var(--irf-shop-transition),
    border-color var(--irf-shop-transition),
    transform var(--irf-shop-transition),
    box-shadow var(--irf-shop-transition);
}


/* Primary Button */

.irf-shop-button--primary {
  background:
    var(--irf-shop-cyan);

  color:
    #ffffff;

  box-shadow:
    0 8px 20px
    rgba(30, 164, 210, 0.24);
}

.irf-shop-button--primary:hover {
  background:
    #168fb9;

  color:
    #ffffff;

  transform:
    translateY(-1px);

  box-shadow:
    0 12px 26px
    rgba(30, 164, 210, 0.30);
}


/* Secondary Button */

.irf-shop-button--secondary {
  background:
    transparent;

  color:
    var(--irf-shop-blue);

  border-color:
    rgba(0, 62, 95, 0.22);
}

.irf-shop-button--secondary:hover {
  background:
    rgba(0, 62, 95, 0.05);

  border-color:
    rgba(0, 62, 95, 0.38);
}


/* Light Button */

.irf-shop-button--light {
  background:
    #ffffff;

  color:
    var(--irf-shop-blue);
}

.irf-shop-button--light:hover {
  background:
    var(--irf-shop-sky);

  color:
    var(--irf-shop-navy);
}


/* =========================================================
   11. BADGES
   ========================================================= */

.irf-shop-badge {
  display: inline-flex;
  align-items: center;

  padding: 6px 10px;

  border-radius:
    var(--irf-shop-radius-pill);

  background:
    rgba(30, 164, 210, 0.10);

  color:
    var(--irf-shop-blue);

  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.03em;
}

.irf-shop-badge--auction {
  background:
    rgba(215, 154, 33, 0.12);

  color:
    #9a6800;
}

.irf-shop-badge--sale {
  background:
    rgba(200, 74, 74, 0.10);

  color:
    var(--irf-shop-danger);
}

.irf-shop-badge--available {
  background:
    rgba(39, 135, 94, 0.10);

  color:
    var(--irf-shop-success);
}


/* =========================================================
   12. PRICE
   ========================================================= */

.irf-shop-price {
  color:
    var(--irf-shop-blue);

  font-size:
    1.35rem;

  font-weight:
    800;
}


/* =========================================================
   13. LINKS
   ========================================================= */

.irf-shop a {
  transition:
    color var(--irf-shop-transition);
}

.irf-shop-link {
  color:
    var(--irf-shop-cyan);

  font-weight:
    700;

  text-decoration:
    none;
}

.irf-shop-link:hover {
  color:
    var(--irf-shop-blue);
}


/* =========================================================
   14. UTILITY
   ========================================================= */

.irf-shop-center {
  text-align: center;
}

.irf-shop-hidden {
  display: none !important;
}

.irf-shop-full-width {
  width: 100%;
}


/* =========================================================
   15. ACCESSIBILITY
   ========================================================= */

.irf-shop-button:focus-visible,
.irf-shop a:focus-visible {
  outline:
    3px solid
    var(--irf-shop-sky);

  outline-offset:
    3px;
}


/* =========================================================
   16. RESPONSIVE
   ========================================================= */

@media (max-width: 1024px) {

  .irf-shop-grid--4 {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

}


@media (max-width: 768px) {

  .irf-shop-section {
    padding:
      var(--irf-shop-space-xl) 0;
  }

  .irf-shop-grid--2,
  .irf-shop-grid--3,
  .irf-shop-grid--4 {
    grid-template-columns:
      1fr;
  }

}


@media (max-width: 480px) {

  .irf-shop-container,
  .irf-shop-container--wide {
    width:
      min(
        calc(100% - 24px),
        var(--irf-shop-container)
      );
  }

  .irf-shop-card__content {
    padding:
      18px;
  }

  .irf-shop-button {
    min-height:
      44px;

    padding:
      10px 17px;
  }

}