/* ==========================================================
   VIVILIV — GOTOWE DANIA Z DOSTAWĄ GDAŃSK
   Unified site style — 0.9.21.1.8
   Wzorzec: główna / Jak zamówić / Kontakt / premium cards
   ========================================================== */

body.viviliv-seo-delivery-page-view,
body.viviliv-seo-delivery-page-view #page,
body.viviliv-seo-delivery-page-view #content,
body.viviliv-seo-delivery-page-view #primary,
body.viviliv-seo-delivery-page-view #main,
body.viviliv-seo-delivery-page-view .site-content,
body.viviliv-seo-delivery-page-view .content-area,
body.viviliv-seo-delivery-page-view .inside-article,
body.viviliv-seo-delivery-page-view .entry-content {
  background: #06150d !important;
}

body.viviliv-seo-delivery-page-view #right-sidebar,
body.viviliv-seo-delivery-page-view .entry-header {
  display: none !important;
}

body.viviliv-seo-delivery-page-view #primary,
body.viviliv-seo-delivery-page-view .content-area,
body.viviliv-seo-delivery-page-view .site-content.grid-container,
body.viviliv-seo-delivery-page-view .site.grid-container {
  width: 100% !important;
  max-width: none !important;
  float: none !important;
  margin: 0 !important;
}

body.viviliv-seo-delivery-page-view .inside-article,
body.viviliv-seo-delivery-page-view .entry-content {
  margin: 0 !important;
  padding: 0 !important;
}

.viviliv-seo-delivery-page {
  --vseo-bg: #06150d;
  --vseo-bg-deep: #031008;
  --vseo-green: #1a3f26;
  --vseo-green-rich: #0c2d1b;
  --vseo-gold: #d8b24a;
  --vseo-gold-light: #f3d77a;
  --vseo-cream: #fffdf6;
  --vseo-text: #f7f4ea;
  --vseo-muted: rgba(247,244,234,.74);
  --vseo-muted-soft: rgba(247,244,234,.56);
  --vseo-line: rgba(216,178,74,.44);
  --vseo-line-soft: rgba(216,178,74,.22);
  --vseo-radius: 28px;
  --vseo-card-radius: 24px;
  --vseo-card-border: 1px solid rgba(216,178,74,.60);
  --vseo-card-shadow: 0 22px 46px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.035);
  --vseo-surface-card: radial-gradient(circle at 82% 50%, rgba(216,178,74,.16), transparent 29%), linear-gradient(90deg, rgba(24,74,44,.96) 0%, rgba(6,28,17,.99) 50%, rgba(24,74,44,.96) 100%);
  --vseo-surface-card-soft: radial-gradient(circle at 82% 50%, rgba(216,178,74,.12), transparent 29%), linear-gradient(90deg, rgba(21,67,40,.96) 0%, rgba(6,26,15,.99) 50%, rgba(21,67,40,.96) 100%);
  --vseo-surface-panel: radial-gradient(circle at 84% 50%, rgba(216,178,74,.14), transparent 31%), linear-gradient(90deg, rgba(16,59,35,.98) 0%, rgba(5,22,13,.995) 50%, rgba(16,59,35,.98) 100%);

  width: 100%;
  color: var(--vseo-text);
  background:
    radial-gradient(circle at 50% 0%, rgba(216,178,74,.08), transparent 26%),
    linear-gradient(180deg, var(--vseo-bg) 0%, var(--vseo-bg-deep) 100%);
  font-family: "Montserrat", Arial, sans-serif;
  overflow: hidden;
}

.viviliv-seo-delivery-page *,
.viviliv-seo-delivery-page *::before,
.viviliv-seo-delivery-page *::after {
  box-sizing: border-box;
}

.viviliv-seo-delivery-page h1,
.viviliv-seo-delivery-page h2,
.viviliv-seo-delivery-page h3,
.viviliv-seo-delivery-page p {
  margin-top: 0;
}

/* ==========================================================
   HERO — spokojny, premium, zgodny z resztą VIVILIV
   ========================================================== */

.viviliv-seo-delivery-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(86px, 8vw, 126px) 24px clamp(66px, 6vw, 94px);
  border-bottom: 1px solid rgba(216,178,74,.18);
  background:
    radial-gradient(circle at 18% 18%, rgba(216,178,74,.13), transparent 27%),
    radial-gradient(circle at 83% 76%, rgba(26,63,38,.72), transparent 34%),
    linear-gradient(135deg, #071b11 0%, #06150d 56%, #041109 100%);
}

.viviliv-seo-delivery-hero::before,
.viviliv-seo-delivery-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(2px);
}

.viviliv-seo-delivery-hero::before {
  width: 420px;
  height: 420px;
  left: -180px;
  top: -220px;
  border: 1px solid rgba(216,178,74,.11);
  box-shadow: 0 0 0 58px rgba(216,178,74,.018), 0 0 0 116px rgba(216,178,74,.012);
}

.viviliv-seo-delivery-hero::after {
  width: 520px;
  height: 520px;
  right: -300px;
  bottom: -360px;
  background: radial-gradient(circle, rgba(216,178,74,.08), transparent 67%);
}

.viviliv-seo-delivery-hero__inner,
.viviliv-seo-delivery-shell {
  position: relative;
  z-index: 1;
  width: min(1260px, calc(100% - 48px));
  margin-right: auto;
  margin-left: auto;
}

.viviliv-seo-delivery-hero__inner {
  max-width: 1030px;
  text-align: center;
}

.viviliv-seo-kicker,
.viviliv-seo-eyebrow {
  margin-bottom: 13px !important;
  color: var(--vseo-gold);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.viviliv-seo-delivery-hero h1 {
  max-width: 990px;
  margin: 0 auto 22px;
  color: var(--vseo-cream);
  font-size: clamp(38px, 4.7vw, 66px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.037em;
  text-wrap: balance;
}

.viviliv-seo-lead {
  max-width: 830px;
  margin: 0 auto 31px !important;
  color: rgba(247,244,234,.80);
  font-size: clamp(16px, 1.45vw, 20px);
  font-weight: 500;
  line-height: 1.66;
  text-wrap: pretty;
}

/* ==========================================================
   BUTTONS — wspólny język VIVILIV
   ========================================================== */

.viviliv-seo-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.viviliv-seo-actions--left {
  justify-content: flex-start;
}

.viviliv-seo-btn {
  min-width: 205px;
  min-height: 54px;
  padding: 14px 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.1;
  text-decoration: none !important;
  box-shadow: 0 14px 28px rgba(0,0,0,.24);
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.viviliv-seo-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 34px rgba(0,0,0,.30);
}

.viviliv-seo-btn--gold {
  border: 1px solid rgba(243,215,122,.92);
  background: linear-gradient(135deg, #f3d77a 0%, #d8b24a 58%, #c89c2b 100%);
  color: #06150d !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.20);
}

.viviliv-seo-btn--green {
  border: 1px solid rgba(216,178,74,.52);
  background: var(--vseo-surface-card-soft);
  color: var(--vseo-cream) !important;
}

.viviliv-seo-btn--green:hover {
  border-color: rgba(243,215,122,.78);
  background: radial-gradient(circle at 82% 50%, rgba(216,178,74,.18), transparent 29%), linear-gradient(90deg, rgba(27,80,48,.98) 0%, rgba(7,31,18,.99) 50%, rgba(27,80,48,.98) 100%);
}

/* ==========================================================
   MAIN SHELL / SECTION HEADINGS
   ========================================================== */

.viviliv-seo-delivery-shell {
  padding: clamp(44px, 5vw, 72px) 0 clamp(66px, 6vw, 92px);
}

.viviliv-seo-benefits,
.viviliv-seo-menu-section,
.viviliv-seo-order-section,
.viviliv-seo-faq {
  margin-bottom: clamp(48px, 5vw, 72px);
}

.viviliv-seo-section-head {
  max-width: 850px;
  margin: 0 auto 28px;
  text-align: center;
}

.viviliv-seo-section-head h2,
.viviliv-seo-intro-panel h2,
.viviliv-seo-info-panel h2,
.viviliv-seo-delivery-cta h2,
.viviliv-seo-final-cta h2 {
  margin-bottom: 0;
  color: var(--vseo-cream);
  font-size: clamp(27px, 3vw, 40px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.03em;
  text-wrap: balance;
}

.viviliv-seo-section-head > p:last-child:not(.viviliv-seo-eyebrow) {
  max-width: 760px;
  margin: 14px auto 0 !important;
  color: var(--vseo-muted);
  font-size: 15.5px;
  line-height: 1.7;
}

/* ==========================================================
   INTRO / INFO — styl panelu Kontakt
   ========================================================== */

.viviliv-seo-intro-panel,
.viviliv-seo-info-panel,
.viviliv-seo-delivery-cta,
.viviliv-seo-final-cta,
.viviliv-seo-faq__panel {
  border: var(--vseo-card-border);
  border-radius: var(--vseo-radius);
  background: var(--vseo-surface-panel);
  box-shadow: var(--vseo-card-shadow);
}

.viviliv-seo-intro-panel,
.viviliv-seo-info-panel {
  display: grid;
  grid-template-columns: minmax(260px, .86fr) minmax(0, 1.14fr);
  gap: clamp(30px, 5vw, 76px);
  align-items: center;
  margin-bottom: clamp(48px, 5vw, 72px);
  padding: clamp(30px, 4.2vw, 52px);
}

.viviliv-seo-intro-panel__copy p,
.viviliv-seo-info-panel > div:last-child p {
  margin-bottom: 16px !important;
  color: var(--vseo-muted);
  font-size: 15.5px;
  line-height: 1.76;
}

.viviliv-seo-intro-panel__copy p:last-child,
.viviliv-seo-info-panel > div:last-child p:last-child {
  margin-bottom: 0 !important;
}

/* ==========================================================
   NUMBER CARDS — styl „Jak zamówić?” z głównej
   ========================================================== */

.viviliv-seo-card-grid {
  display: grid;
  gap: 24px;
}

.viviliv-seo-card-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.viviliv-seo-number-card {
  position: relative;
  isolation: isolate;
  min-height: 204px;
  padding: 32px 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: var(--vseo-card-border);
  border-radius: var(--vseo-card-radius);
  background: var(--vseo-surface-card);
  box-shadow: var(--vseo-card-shadow);
}

.viviliv-seo-number-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,.02), transparent 38%, rgba(216,178,74,.04) 100%);
}

.viviliv-seo-number-card__number {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: rgba(216,178,74,.15);
  font-size: clamp(126px, 12vw, 188px);
  font-weight: 900;
  line-height: .78;
  letter-spacing: -.09em;
  user-select: none;
}

.viviliv-seo-number-card__content {
  position: relative;
  z-index: 1;
  max-width: 330px;
  text-align: center;
}

.viviliv-seo-number-card h3 {
  margin: 0 0 12px;
  color: var(--vseo-cream);
  font-size: clamp(18px, 1.55vw, 23px);
  font-weight: 850;
  line-height: 1.16;
  letter-spacing: -.02em;
  text-transform: uppercase;
  text-wrap: balance;
}

.viviliv-seo-number-card p {
  margin: 0 !important;
  color: rgba(247,244,234,.79);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.55;
  text-wrap: pretty;
}

/* ==========================================================
   MENU CARDS — premium feature cards
   ========================================================== */

.viviliv-seo-menu-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.viviliv-seo-menu-card {
  min-height: 340px;
  padding: clamp(32px, 4vw, 46px);
  display: flex;
  flex-direction: column;
  border: var(--vseo-card-border);
  border-radius: var(--vseo-radius);
  background: var(--vseo-surface-panel);
  box-shadow: var(--vseo-card-shadow);
}

.viviliv-seo-menu-card h3 {
  max-width: 560px;
  margin: 0;
  color: var(--vseo-cream);
  font-size: clamp(26px, 2.6vw, 38px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.03em;
  text-wrap: balance;
}

.viviliv-seo-menu-card > p:not(.viviliv-seo-eyebrow) {
  margin: 20px 0 28px !important;
  color: var(--vseo-muted);
  font-size: 15.5px;
  line-height: 1.72;
}

.viviliv-seo-card-cta {
  min-height: 48px;
  margin-top: auto;
  padding: 0 18px;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(216,178,74,.46);
  border-radius: 999px;
  background: rgba(6,21,13,.44);
  color: var(--vseo-gold-light) !important;
  font-size: 13.5px;
  font-weight: 800;
  line-height: 1.1;
  text-decoration: none !important;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.viviliv-seo-card-cta:hover {
  transform: translateY(-2px);
  border-color: rgba(243,215,122,.85);
  background: rgba(216,178,74,.08);
}

.viviliv-seo-card-cta span {
  transition: transform .18s ease;
}

.viviliv-seo-card-cta:hover span {
  transform: translateX(3px);
}

/* ==========================================================
   DELIVERY CTA / FINAL CTA
   ========================================================== */

.viviliv-seo-delivery-cta,
.viviliv-seo-final-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 34px;
  align-items: center;
  margin-bottom: clamp(48px, 5vw, 72px);
  padding: clamp(34px, 4.2vw, 54px);
}

.viviliv-seo-delivery-cta__copy,
.viviliv-seo-final-cta > div:first-child {
  max-width: 780px;
}

.viviliv-seo-delivery-cta p:not(.viviliv-seo-eyebrow),
.viviliv-seo-final-cta p:not(.viviliv-seo-eyebrow) {
  margin: 16px 0 0 !important;
  color: var(--vseo-muted);
  font-size: 15.5px;
  line-height: 1.72;
}

.viviliv-seo-final-cta {
  margin-bottom: 0;
  background: radial-gradient(circle at 18% 50%, rgba(243,215,122,.10), transparent 28%), var(--vseo-surface-panel);
}

/* ==========================================================
   FAQ
   ========================================================== */

.viviliv-seo-faq__panel {
  padding: 10px clamp(22px, 3vw, 38px);
}

.viviliv-seo-faq details {
  padding: 20px 0;
  border-top: 1px solid var(--vseo-line-soft);
}

.viviliv-seo-faq details:first-child {
  border-top: 0;
}

.viviliv-seo-faq summary {
  position: relative;
  padding-right: 44px;
  color: var(--vseo-cream);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
}

.viviliv-seo-faq summary::-webkit-details-marker {
  display: none;
}

.viviliv-seo-faq summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--vseo-gold-light);
  font-size: 26px;
  font-weight: 500;
  line-height: 1;
}

.viviliv-seo-faq details[open] summary::after {
  content: "−";
}

.viviliv-seo-faq details p {
  max-width: 900px;
  margin: 13px 0 0 !important;
  color: var(--vseo-muted);
  font-size: 14.5px;
  line-height: 1.7;
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (min-width: 2000px) {
  .viviliv-seo-delivery-hero__inner,
  .viviliv-seo-delivery-shell {
    width: min(1320px, calc(100% - 160px));
  }
}

@media (max-width: 1024px) {
  .viviliv-seo-card-grid--3 {
    grid-template-columns: 1fr;
  }

  .viviliv-seo-number-card {
    min-height: 188px;
  }

  .viviliv-seo-number-card__number {
    font-size: 160px;
  }

  .viviliv-seo-menu-grid,
  .viviliv-seo-intro-panel,
  .viviliv-seo-info-panel,
  .viviliv-seo-delivery-cta,
  .viviliv-seo-final-cta {
    grid-template-columns: 1fr;
  }

  .viviliv-seo-delivery-cta .viviliv-seo-actions,
  .viviliv-seo-final-cta .viviliv-seo-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 767px) {
  .viviliv-seo-delivery-hero {
    padding: 58px 12px 50px;
  }

  .viviliv-seo-delivery-hero__inner,
  .viviliv-seo-delivery-shell {
    width: min(100% - 20px, 1260px);
  }

  .viviliv-seo-delivery-hero h1 {
    font-size: clamp(31px, 9.6vw, 43px);
    line-height: 1.06;
  }

  .viviliv-seo-lead {
    font-size: 15.5px;
    line-height: 1.6;
  }

  .viviliv-seo-actions,
  .viviliv-seo-actions--left {
    width: 100%;
  }

  .viviliv-seo-btn {
    width: 100%;
    min-width: 0;
  }

  .viviliv-seo-delivery-shell {
    padding-top: 34px;
    padding-bottom: 48px;
  }

  .viviliv-seo-intro-panel,
  .viviliv-seo-info-panel,
  .viviliv-seo-menu-card,
  .viviliv-seo-delivery-cta,
  .viviliv-seo-final-cta,
  .viviliv-seo-faq__panel {
    padding: 24px 20px;
    border-radius: 22px;
  }

  .viviliv-seo-section-head {
    margin-bottom: 22px;
  }

  .viviliv-seo-card-grid,
  .viviliv-seo-menu-grid {
    gap: 14px;
  }

  .viviliv-seo-number-card {
    min-height: 176px;
    padding: 26px 20px;
    border-radius: 20px;
  }

  .viviliv-seo-number-card__number {
    font-size: 138px;
  }

  .viviliv-seo-number-card h3 {
    font-size: 18px;
  }

  .viviliv-seo-number-card p,
  .viviliv-seo-menu-card > p:not(.viviliv-seo-eyebrow),
  .viviliv-seo-intro-panel__copy p,
  .viviliv-seo-info-panel > div:last-child p,
  .viviliv-seo-delivery-cta p:not(.viviliv-seo-eyebrow),
  .viviliv-seo-final-cta p:not(.viviliv-seo-eyebrow) {
    font-size: 14px;
  }

  .viviliv-seo-menu-card {
    min-height: 0;
  }

  .viviliv-seo-menu-card h3 {
    font-size: clamp(25px, 7vw, 32px);
  }

  .viviliv-seo-card-cta {
    width: 100%;
    margin-top: 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .viviliv-seo-delivery-page *,
  .viviliv-seo-delivery-page *::before,
  .viviliv-seo-delivery-page *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}