/* =============================================================
   BIOVA THEME - Front Page Styles
   ============================================================= */


    .hero {
      position: relative;
      height: 100vh;
      min-height: 700px;
      max-height: 900px;
      display: flex;
      align-items: flex-end;
      overflow: hidden;
    }

    .hero-bg {
      position: absolute;
      inset: 0;
      background-size: cover;
      background-position: center center;
    }

    .hero-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(
        to top,
        rgba(43,42,46,0.78) 0%,
        rgba(43,42,46,0.4) 50%,
        rgba(43,42,46,0.1) 100%
      );
    }

    .hero-content {
      position: relative;
      z-index: 2;
      padding: 0 4rem 5.5rem;
      max-width: 780px;
    }

    .hero-intro {
      font-size: 0.88rem;
      color: rgba(242,237,230,0.88);
      line-height: 1.75;
      margin-bottom: 1.5rem;
      max-width: 580px;
    }

    .hero-title {
      font-family: 'Cormorant Garant', serif;
      font-size: clamp(3.2rem, 6.5vw, 6rem);
      font-weight: 300;
      line-height: 1.05;
      color: #fff;
      margin-bottom: 1.5rem;
    }

    .hero-title em {
      font-style: italic;
      color: var(--warm-beige);
    }

    .hero-sub {
      font-size: 0.95rem;
      color: rgba(255,255,255,0.9);
      margin-bottom: 2.5rem;
      max-width: 520px;
      line-height: 1.8;
    }

    .intro-wrap {
      max-width: 1200px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6rem;
      align-items: center;
    }

    .intro-body p {
      font-size: 0.93rem;
      line-height: 1.85;
      color: rgba(43,42,46,0.75);
      margin-bottom: 1.1rem;
    }

    .intro-visual {
      position: relative;
    }

    .intro-img {
      width: 100%;
      aspect-ratio: 3/4;
      object-fit: cover;
      display: block;
    }

    .intro-badge {
      position: absolute;
      bottom: -1.5rem;
      left: -1.5rem;
      background: var(--ivory);
      border: 1px solid var(--warm-beige);
      padding: 1.25rem 1.5rem;
      max-width: 220px;
    }

    .intro-badge-title {
      font-family: 'Cormorant Garant', serif;
      font-size: 1.6rem;
      font-weight: 300;
      color: var(--taupe);
      line-height: 1.1;
      margin-bottom: 0.4rem;
    }

    .intro-badge-sub {
      font-size: 0.72rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: rgba(43,42,46,0.5);
    }

    .products-section {
      background: var(--white);
    }

    .products-header {
      text-align: center;
      max-width: 560px;
      margin: 0 auto 4rem;
    }

    .products-grid {
      display: grid;
      grid-template-columns: repeat(4,1fr);
      gap: 2rem;
      max-width: 1200px;
      margin: 0 auto;
    }

    .product-card {
      display: flex;
      flex-direction: column;
      background: var(--ivory);
      text-decoration: none;
      color: inherit;
      transition: transform 0.3s;
      overflow: hidden;
    }

    .product-card:hover {
      transform: translateY(-6px);
    }

    .product-card-img {
      width: 100%;
      aspect-ratio: 4/5;
      object-fit: contain;
      background: #F2EDE6;
      display: block;
      transition: transform 0.5s;
      padding: 1.5rem 1rem;
    }

    .product-card:hover .product-card-img {
      transform: scale(1.03);
    }

    /* Dedicated image treatment for the Комплекти card.
       Keeps the same visual box as the other cards, while scaling
       the square bundle image down inside that space. */
    .komplekti-card-img-wrap {
     display: flex;
     align-items: center;
     justify-content: center;
     overflow: hidden;
     padding: 1.5rem 1rem;
    }

    .komplekti-card-img {
     width: 86%;
     height: auto;
     max-width: 100%;
     max-height: 100%;
     object-fit: contain;
     display: block;
    }

    .product-card-body {
      padding: 1.5rem 1.5rem 2rem;
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    .product-tag {
      font-size: 0.65rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--taupe);
      margin-bottom: 0.6rem;
    }

    .product-name {
      font-family: 'Cormorant Garant', serif;
      font-size: 1.6rem;
      font-weight: 400;
      line-height: 1.2;
      margin-bottom: 0.75rem;
    }

    .product-desc {
      font-size: 0.82rem;
      line-height: 1.7;
      color: rgba(43,42,46,0.62);
      flex: 1;
      margin-bottom: 1.5rem;
    }

    .product-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-top: 1px solid var(--warm-beige);
      padding-top: 1.25rem;
    }

    .product-price {
      font-family: 'Cormorant Garant', serif;
      font-size: 1.5rem;
      font-weight: 400;
    }

    .product-cta {
      font-size: 0.68rem;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--taupe);
      font-weight: 500;
      border-bottom: 1px solid var(--taupe);
      padding-bottom: 1px;
    }

    .order-section {
      background: var(--charcoal);
      color: var(--ivory);
    }

    .order-inner {
      max-width: 1000px;
      margin: 0 auto;
    }

    .order-section .section-eyebrow {
      color: var(--taupe);
    }

    .order-section .section-title {
      color: var(--ivory);
    }

    .order-section .section-title em {
      color: var(--warm-beige);
    }

    .order-steps {
      display: grid;
      grid-template-columns: repeat(4,1fr);
      gap: 2rem;
      margin-top: 4rem;
    }

    .order-step {
      border-top: 1px solid rgba(216,201,188,0.25);
      padding-top: 1.5rem;
    }

    .step-num {
      font-family: 'Cormorant Garant', serif;
      font-size: 2.5rem;
      font-weight: 300;
      color: var(--taupe);
      line-height: 1;
      margin-bottom: 1rem;
    }

    .step-title {
      font-size: 0.78rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--warm-beige);
      margin-bottom: 0.6rem;
      font-weight: 400;
    }

    .step-desc {
      font-size: 0.83rem;
      line-height: 1.7;
      color: rgba(242,237,230,0.55);
    }

    .trust-section {
      background: var(--warm-beige);
    }

    .trust-inner {
      max-width: 1100px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 5rem;
      align-items: center;
    }

    .trust-img {
      width: 100%;
      aspect-ratio: 2/3;
      object-fit: cover;
      display: block;
    }

    .trust-items {
      margin-bottom: 2.5rem;
    }

    .trust-item {
      display: flex;
      gap: 1rem;
      margin-bottom: 1.5rem;
      align-items: flex-start;
    }

    .trust-icon {
      width: 36px;
      height: 36px;
      flex-shrink: 0;
      background: rgba(43,42,46,0.08);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 2px;
    }

    .trust-icon svg {
      width: 16px;
      height: 16px;
      stroke: var(--charcoal);
      fill: none;
      stroke-width: 1.5;
    }

    .trust-item-title {
      font-size: 0.82rem;
      font-weight: 500;
      margin-bottom: 0.25rem;
    }

    .trust-item-text {
      font-size: 0.8rem;
      color: rgba(43,42,46,0.62);
      line-height: 1.65;
    }

    /* Intermediate step: 4 equal columns get too narrow between the
       mobile breakpoint and full desktop width, so fall back to a
       2x2 grid before collapsing to a single column below. */
    @media (max-width: 1100px) {
      .products-grid {
        grid-template-columns: repeat(2,1fr);
        max-width: 700px;
      }
    }

    @media (max-width: 900px) {
      .hero-content {
        padding: 0 1.5rem 4rem;
      }

      .intro-wrap {
        grid-template-columns: 1fr;
        gap: 3rem;
      }

      .intro-visual {
        order: -1;
      }

      .intro-badge {
        bottom: -1rem;
        left: 1rem;
      }

      .products-grid {
        grid-template-columns: 1fr;
        max-width: none;
      }

      .order-steps {
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
      }

      .trust-inner {
        grid-template-columns: 1fr;
        gap: 3rem;
      }
    }

    @media (max-width: 600px) {
      .order-steps {
        grid-template-columns: 1fr;
      }
    }


.hero-bg {
  background-image: url('../images/hero.webp');
}