/* --- ZÁKLADNÉ NASTAVENIA --- */
    :root {
      --color-primary: #cf987e;      
      --color-dark: #282828;         
      --color-gray: #8a8a8a;         
      --color-light-gray: #e0e0e0;   
      
      /* Obnovené pôvodné farby z návrhu */
      --bg-card: #f5f3f3;       /* Farba produktových kariet */
      --bg-promo: #f9efe9;      /* Farba promo sekcie */
      --bg-tab: #eee8e3;        /* Farba aktívnych tabov */
      --white: #ffffff;         /* Čistá biela pre hlavné pozadie */
      
      --gap-desktop: 40px;
      --gap-mobile: 20px;
      --transition: all 0.3s ease;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }
    
    html { scroll-behavior: smooth; }

    body {
      background: var(--white); /* Čisté biele pozadie pre celý web */
      font-family: 'Montserrat', sans-serif;
      color: var(--color-gray);
      font-size: 14px; 
      -webkit-font-smoothing: antialiased;
    }

    .site-wrapper {
      overflow-x: hidden; 
    }

    h1, h2, h3, h4, h5, h6, strong {
      color: var(--color-dark);
      font-weight: 500;
    }

    a {
      text-decoration: none;
      color: inherit;
      transition: var(--transition);
    }

    /* --- KONTAJNERY --- */
    .container-boxed {
      width: 100%;
      max-width: 1230px; 
      margin: 0 auto;
      padding: 0 20px;
    }

    .container-fluid {
      width: 100%;
      max-width: 1600px;
      margin: 0 auto;
      padding: 0 var(--gap-desktop);
    }

    /* --- STICKY HLAVIČKA --- */
    .header-wrapper {
      position: sticky;
      top: 0;
      width: 100%;
      background: var(--white);
      z-index: 900;
      transition: background 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease;
    }

    .header-wrapper.scrolled {
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    }

    header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 25px 0; 
      width: 100%;
      transition: padding 0.3s ease;
    }

    .header-wrapper.scrolled header { padding: 15px 0; }

    /* Menu vľavo */
    .nav-links { display: flex; gap: 30px; flex: 1; justify-content: flex-start; }
    .nav-links a {
      color: var(--color-dark); font-size: 14px; 
      font-weight: 500; text-transform: uppercase; letter-spacing: 1px;
    }
    .nav-links a:hover { color: var(--color-primary); }

    /* Logo v strede */
    .logo {
      display: flex; align-items: center; flex: 1; justify-content: center;
    }
    .logo img {
      height: 55px;
      width: auto;
      transition: var(--transition);
    }
    .header-wrapper.scrolled .logo img { height: 42px; }

    /* Ikony vpravo */
    .header-icons { display: flex; gap: 20px; align-items: center; flex: 1; justify-content: flex-end; }
    .header-icons svg {
      width: 22px; height: 22px; stroke: var(--color-dark); stroke-width: 1.5; fill: none; cursor: pointer; transition: var(--transition);
    }
    .header-icons svg:hover { stroke: var(--color-primary); }

    .cart-wrapper { position: relative; cursor: pointer; display: flex; align-items: center;}
    .cart-badge {
      position: absolute; top: -8px; right: -10px; background: var(--color-primary); color: var(--white);
      font-size: 10px; font-weight: 600; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; border-radius: 50%;
    }

    .hamburger-btn { display: none; background: none; border: none; cursor: pointer; }
    .hamburger-btn svg { width: 26px; height: 26px; stroke: var(--color-dark); stroke-width: 1.5; fill: none;}

    /* --- HERO SEKCIA --- */
    .hero-wrapper { padding-top: 30px; }
    .hero {
  position: relative; width: 100%; height: 600px; border-radius: 20px; overflow: hidden; margin-bottom: 90px;
  display: flex; align-items: center; padding: 0 80px;
  background-image: url('../img/hero-fb-products.jpg');
  background-size: cover; background-position: center center;
  background-repeat: no-repeat;
}
.hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(to right, rgba(20, 16, 14, 0.62) 0%, rgba(20, 16, 14, 0.38) 38%, rgba(20, 16, 14, 0.12) 68%, rgba(20, 16, 14, 0.02) 100%);
      pointer-events: none;
    }
.hero-content { position: relative; z-index: 1; color: var(--color-dark); max-width: 520px; }
.hero-content h1 { font-size: 48px; font-weight: 400; line-height: 1.2; margin-bottom: 20px;  letter-spacing: -0.5px; 
      color: #f7efe8;
      text-shadow: 0 2px 18px rgba(0,0,0,0.18);
    }
.hero-content p { font-size: 16px; font-weight: 400; line-height: 1.6; margin-bottom: 40px;  opacity: 1; 
      color: rgba(248, 239, 232, 0.92);
      text-shadow: 0 2px 14px rgba(0,0,0,0.14);
    }

    
    .btn {
      background: var(--color-dark); color: var(--white); padding: 16px 40px;
      font-size: 13px; font-weight: 500; display: inline-block; transition: var(--transition);
      border: 1px solid var(--color-dark); cursor: pointer; text-transform: uppercase; letter-spacing: 1px; border-radius: 4px;
    }
    .btn:hover { background: var(--color-primary); border-color: var(--color-primary); color: var(--white); }
    .btn-hero { background: var(--white); color: var(--color-dark); border-color: var(--white); }
    .btn-hero:hover { background: var(--color-primary); border-color: var(--color-primary); color: var(--white); }

    /* --- PRODUKTY --- */
    .products-section { text-align: center; margin-bottom: 100px; }
    .section-title {
      font-size: 42px;
      font-weight: 400;
      margin-bottom: 30px;
      letter-spacing: -2px;
    }
    
    .tabs-wrap { display: flex; justify-content: center; gap: 30px; margin-bottom: 50px; }
    .tab {
      font-size: 15px;
      font-weight: 500;
      color: var(--color-gray);
      cursor: pointer;
      transition: var(--transition);
      padding: 10px 24px;
      border-radius: 999px;
      text-transform: none;
      letter-spacing: 0;
      background: transparent;
    }
    .tab.active {
      color: var(--color-dark);
      font-weight: 600;
      background: #f7eceb;
      border-bottom-color: transparent;
    }
    .tab:hover:not(.active) { color: var(--color-dark); }

    .cards-wrap { width: 100%; display: flex; justify-content: center; }
    .cards-grid { display: grid; grid-template-columns: repeat(3, 300px); gap: 30px; justify-content: center; text-align: left; width: 100%;}
    
    .product-card {
      background: var(--bg-card); /* Obnovená pôvodná farba z tvojho screenshotu */
      border-radius: 15px; padding: 30px 24px 24px;
      display: flex; flex-direction: column; transition: var(--transition); width: 100%;
    }
    .product-card:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0,0,0,0.06); }
    .image-frame { width: 100%; height: 220px; display: flex; align-items: center; justify-content: center; margin-bottom: 25px; }
    .product-svg { width: 100%; height: 100%; display: block; }
    
    .title-inner { font-size: 16px; line-height: 1.4; font-weight: 500; color: var(--color-dark); flex-grow: 1; }
    .subtitle { font-size: 10px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; color: var(--color-gray); display: block; margin-top: 6px; }
    .footer-frame { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; }
    .price { font-size: 16px; font-weight: 600; color: var(--color-dark); }
    
    .add-to-cart-btn {
      width: 40px; height: 40px; background: var(--white); border: none; border-radius: 50%;
      display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--transition);
      box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    }
    .add-to-cart-btn:hover { background: var(--color-dark); }
    .add-to-cart-btn:hover svg { stroke: var(--white); }
    .add-to-cart-btn svg { width: 18px; height: 18px; stroke: var(--color-gray); stroke-width: 1.8; fill: none; transition: var(--transition); pointer-events: none;}

    .show-all-wrapper { margin-top: 50px; text-align: center; }
    .show-all-btn {
      background: var(--bg-tab); color: var(--color-dark); font-size: 13px; text-transform: uppercase; letter-spacing: 1px;
      font-weight: 600; padding: 14px 40px; border: none;
      border-radius: 999px; display: inline-block; transition: var(--transition);
    }
    .show-all-btn:hover { background: #e3dad3; }

    /* --- PROMO SEKCIA --- */
    .promo {
      width: 100%;
      background: #ece8e4;
      border-radius: 20px;
      display: flex;
      align-items: stretch;
      padding: 0;
      margin-bottom: 60px;
      overflow: hidden;
    }
    .promo-text {
      flex: 1;
      padding: 80px 60px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      background: #ece8e4;
    }
    .promo-text h2 { font-size: 32px; font-weight: 400; margin-bottom: 20px; color: var(--color-dark); }
    .promo-text p { font-size: 14px; line-height: 1.7; margin-bottom: 40px; color: var(--color-dark); opacity: 0.8;}

    .social-icons { display: flex; gap: 20px; }
    .social-icons svg { width: 20px; height: 20px; fill: var(--color-dark); cursor: pointer; transition: var(--transition); }
    .social-icons svg:hover { fill: var(--color-primary); transform: translateY(-3px);}

    .promo-image {
      flex: 1.2;
      background-image: url('../img/promo-woman-cream.webp');
      background-size: cover;
      background-position: center center;
      background-repeat: no-repeat;
      min-height: 420px;
      border-radius: 300px 0 0 300px;
    }

    /* --- PÄTIČKA (FOOTER) --- */
    .site-footer {
      border-top: 1px solid #eaeaea;
      padding: 70px 0 30px;
      background: var(--white); /* Pätička má čisté biele pozadie */
    }
    
    .footer-logo-wrapper {
      text-align: center;
      margin-bottom: 50px;
    }
    .footer-logo-wrapper img {
      height: 45px;
    }

    .footer-widgets {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1.5fr;
      gap: 40px;
      margin-bottom: 70px;
    }
    
    .footer-col h4 {
      font-size: 16px;
      font-weight: 600;
      color: var(--color-dark);
      margin-bottom: 25px;
    }
    
    .footer-col ul { list-style: none; }
    .footer-col ul li { margin-bottom: 15px; }
    .footer-col ul li a {
      color: var(--color-gray);
      font-size: 14px;
      font-weight: 400;
    }
    .footer-col ul li a:hover { color: var(--color-primary); }

    /* Newsletter v Pätičke */
    .newsletter-title {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 16px;
      font-weight: 600;
      color: var(--color-dark);
      margin-bottom: 25px;
    }
    .newsletter-title svg { width: 20px; height: 20px; stroke: var(--color-dark); stroke-width: 1.5; fill: none; }
    
    .newsletter-form {
      display: flex; align-items: center; border-bottom: 1px solid #ccc; padding-bottom: 10px;
    }
    .newsletter-form input {
      flex: 1; border: none; outline: none; background: transparent; font-family: 'Montserrat', sans-serif; font-size: 14px; color: var(--color-dark);
    }
    .newsletter-form input::placeholder { color: #b3b3b3; }
    .newsletter-form button {
      background: none; border: none; cursor: pointer; color: var(--color-gray); transition: var(--transition); display: flex; align-items: center;
    }
    .newsletter-form button:hover { color: var(--color-primary); transform: translateX(3px); }
    .newsletter-form button svg { width: 24px; height: 24px; stroke: currentColor; stroke-width: 1.2; fill: none; }

    /* Spodná lišta pätičky */
    .footer-bottom {
      display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #eaeaea; padding-top: 30px; flex-wrap: wrap; gap: 20px;
    }
    
    .footer-social { display: flex; gap: 20px; }
    .footer-social svg { width: 16px; height: 16px; fill: var(--color-dark); transition: var(--transition); cursor: pointer; }
    .footer-social svg:hover { fill: var(--color-primary); }

    .footer-copyright { font-size: 13px; color: var(--color-gray); text-align: center; }
    .footer-copyright strong { color: var(--color-dark); font-weight: 600; cursor: pointer; transition: var(--transition); }
    .footer-copyright strong:hover { color: var(--color-primary); }

    .footer-payments { display: flex; gap: 10px; align-items: center; }
    .footer-payments span {
      background: #f0f0f0; color: var(--color-dark); font-size: 10px; font-weight: 600; padding: 5px 10px; border-radius: 4px; letter-spacing: 0.5px;
    }

    /* --- VYHĽADÁVANIE (OVERLAY) --- */
    .search-overlay {
      position: fixed; inset: 0; background: rgba(255, 255, 255, 0.98); z-index: 1000;
      display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: var(--transition);
    }
    .search-overlay.active { opacity: 1; pointer-events: all; }
    .search-close { position: absolute; top: 40px; right: 40px; background: none; border: none; font-size: 40px; font-weight: 300; color: var(--color-gray); cursor: pointer; transition: var(--transition); }
    .search-close:hover { color: var(--color-dark); transform: rotate(90deg); }
    .search-form-overlay { width: 80%; max-width: 800px; position: relative; display: flex; align-items: center;}
    .search-input { width: 100%; border: none; border-bottom: 2px solid var(--color-dark); background: transparent; font-family: 'Montserrat', sans-serif; font-size: 32px; font-weight: 300; padding: 15px 0; color: var(--color-dark); outline: none; }
    .search-input::placeholder { color: var(--color-gray); opacity: 0.5; }

    /* --- VYSÚVACÍ KOŠÍK A MENU --- */
    .sidebar-overlay-bg { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 998; opacity: 0; pointer-events: none; transition: var(--transition); }
    .sidebar-overlay-bg.active { opacity: 1; pointer-events: all; }
    
    .sidebar {
      position: fixed; top: 0; width: 400px; max-width: 100%; height: 100vh;
      background: var(--white); z-index: 999; box-shadow: 0 0 40px rgba(0,0,0,0.1);
      transition: var(--transition); display: flex; flex-direction: column;
    }
    .cart-sidebar { right: 0; transform: translateX(100%); }
    .cart-sidebar.active { transform: translateX(0); }
    .menu-sidebar { left: 0; transform: translateX(-100%); }
    .menu-sidebar.active { transform: translateX(0); }

    .sidebar-header { padding: 30px 40px; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; }
    .sidebar-header h3 { font-size: 20px; font-weight: 500; color: var(--color-dark); }
    .close-sidebar { background: none; border: none; font-size: 32px; font-weight: 300; cursor: pointer; color: var(--color-gray); transition: var(--transition); }
    .close-sidebar:hover { color: var(--color-dark); transform: rotate(90deg);}
    
    .sidebar-body { flex: 1; overflow-y: auto; padding: 40px; display: flex; flex-direction: column; gap: 25px; }
    
    .mobile-nav-links { display: flex; flex-direction: column; gap: 20px; }
    .mobile-nav-links a { font-size: 18px; font-weight: 500; text-transform: uppercase; color: var(--color-dark); transition: var(--transition);}
    .mobile-nav-links a:hover { color: var(--color-primary); }

    /* POLOŽKY KOŠÍKA */
    .empty-cart-msg { text-align: center; color: var(--color-gray); margin-top: 60px; font-size: 15px; }
    .cart-item { display: flex; gap: 20px; align-items: center; }
    .cart-item-img { width: 80px; height: 80px; background: var(--bg-card); border-radius: 8px; display: flex; align-items: center; justify-content: center; }
    .cart-item-img svg { width: 50px; height: 50px; }
    .cart-item-info { flex: 1; }
    .cart-item-title { font-size: 14px; font-weight: 600; color: var(--color-dark); margin-bottom: 5px; }
    .cart-item-price { font-size: 14px; font-weight: 500; color: var(--color-gray); }
    
    .qty-controls { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
    .qty-btn {
      width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--color-light-gray);
      background: var(--white); color: var(--color-dark); display: flex; align-items: center; justify-content: center;
      font-size: 14px; cursor: pointer; transition: var(--transition);
    }
    .qty-btn:hover { background: var(--color-dark); color: var(--white); border-color: var(--color-dark); }
    .qty-val { font-size: 14px; font-weight: 600; color: var(--color-dark); width: 16px; text-align: center;}

    .remove-item { background: none; border: none; color: var(--color-light-gray); font-size: 11px; font-weight: 500; text-decoration: underline; cursor: pointer; margin-top: 10px; transition: var(--transition);}
    .remove-item:hover { color: #d0021b; }
    
    .cart-footer { padding: 30px 40px; background: var(--bg-card); border-top: 1px solid #eee; }
    .cart-total { display: flex; justify-content: space-between; font-size: 18px; font-weight: 600; color: var(--color-dark); margin-bottom: 25px; }
    .checkout-btn { width: 100%; text-align: center; }

    /* --- TOAST NOTIFIKÁCIA --- */
    .toast {
      position: fixed; top: 100px; left: 50%; transform: translateX(-50%) translateY(-20px);
      background: var(--color-dark); color: var(--white); padding: 15px 30px; border-radius: 4px;
      font-size: 14px; font-weight: 500; opacity: 0; pointer-events: none; transition: var(--transition); z-index: 10000;
    }
    .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

    /* --- RESPONZIVITA --- */
    @media (max-width: 1024px) {
      .cards-grid { grid-template-columns: repeat(2, 1fr); }
      .promo-text { padding: 60px 40px; }
      .footer-widgets { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 850px) {
      .nav-links { display: none; } 
      .hamburger-btn { display: block; } 
      .hide-on-mobile { display: none; } 
      
      .logo { justify-content: flex-start; }
      .header-right { flex: unset; justify-content: flex-end; gap: 20px; }

      .hero { padding: 0 40px; height: 500px; margin-bottom: 60px;}
      .hero-content h1 { font-size: 40px; 
      color: #f7efe8;
      text-shadow: 0 2px 18px rgba(0,0,0,0.18);
    }
      
      .promo { flex-direction: column; border-radius: 20px; }
      .promo-image { height: 300px; border-radius: 0; }
    }
    @media (max-width: 600px) {
      .container-fluid { padding: 0 15px; }
      .cards-grid { grid-template-columns: 1fr; width: 100%; }
      .product-card { padding: 25px 20px; }
      .image-frame { height: 260px; } 
      
      .tabs-wrap { flex-direction: column; align-items: center; gap: 15px; margin-bottom: 40px;}
      .hero { padding: 0 25px; text-align: center; border-radius: 15px;}
      .hero-content { margin: 0 auto; }
      .promo-text { padding: 40px 25px; text-align: center; }
      .social-icons { justify-content: center; }
      
      .cart-sidebar, .menu-sidebar { width: 100%; } 
      .search-input { font-size: 24px; }
      
      .footer-widgets { grid-template-columns: 1fr; gap: 30px; text-align: center; }
      .newsletter-title, .newsletter-form { justify-content: center; }
      .footer-bottom { flex-direction: column; text-align: center; }
    }

.cart-item-product-link { color: inherit; text-decoration: none; }
.cart-item-product-link:hover { color: var(--color-primary); }

.product-card { position: relative; }
.card-link { position: absolute; inset: 0; z-index: 1; }
.add-to-cart-btn { position: relative; z-index: 2; }


/* --- HERO IMAGE OVERRIDE: TinoVision --- */
@media (max-width: 1024px) {
  .hero {
    background-position: 64% center;
  }
}
@media (max-width: 600px) {
  .hero {
    min-height: 560px;
    padding: 0 24px;
    background-position: 62% center;
  }
  .hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(to right, rgba(20, 16, 14, 0.62) 0%, rgba(20, 16, 14, 0.38) 38%, rgba(20, 16, 14, 0.12) 68%, rgba(20, 16, 14, 0.02) 100%);
      pointer-events: none;
    }
  .hero-content {
    max-width: 100%;
    text-align: left;
  }
  .hero-content h1 {
    font-size: 36px;
  
      color: #f7efe8;
      text-shadow: 0 2px 18px rgba(0,0,0,0.18);
    }
  .hero-content p {
    font-size: 15px;
    max-width: 340px;
  
      color: rgba(248, 239, 232, 0.92);
      text-shadow: 0 2px 14px rgba(0,0,0,0.14);
    }
}


.hero .btn-hero {
  background: rgba(247, 239, 232, 0.96);
  color: #2b2522;
  border-color: rgba(247, 239, 232, 0.96);
}
.hero .btn-hero:hover {
  background: #cf987e;
  border-color: #cf987e;
  color: #ffffff;
}




/* --- HOME PRODUKTOVÉ KARTY / SHOP STYLE --- */
.cards-grid--home {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 300px));
  gap: 40px 30px;
  justify-content: center;
  text-align: left;
  width: 100%;
}

.cards-grid--home .product-card {
  display: flex;
  flex-direction: column;
  text-align: left;
  background: transparent;
  border: none;
  padding: 0;
  position: relative;
  box-shadow: none;
  transform: none;
}

.cards-grid--home .image-frame {
  position: relative;
  background: var(--bg-card);
  border-radius: 15px;
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  overflow: hidden;
}

.cards-grid--home .product-media {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cards-grid--home .product-svg,
.cards-grid--home .product-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.cards-grid--home .product-card:hover .product-svg,
.cards-grid--home .product-card:hover .product-media img {
  transform: scale(1.05);
}

.cards-grid--home .card-link {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 15px;
}

.cards-grid--home .product-actions {
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%) translateX(20px);
  opacity: 0;
  visibility: hidden;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: var(--transition);
  z-index: 4;
}

.cards-grid--home .product-card:hover .product-actions {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
}

.cards-grid--home .action-btn {
  width: 40px;
  height: 40px;
  background: var(--white);
  border: 1px solid var(--white);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: 0 4px 10px rgba(0,0,0,0.06);
  color: var(--color-dark);
  position: relative;
  z-index: 5;
}

.cards-grid--home .action-btn:hover {
  background: var(--color-dark);
  color: var(--white);
  border-color: var(--color-dark);
}

.cards-grid--home .action-btn svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
  pointer-events: none;
}

.cards-grid--home .title-link {
  display: inline-block;
  position: relative;
  z-index: 3;
}

.cards-grid--home .title-inner {
  font-size: 15px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--color-dark);
  margin-bottom: 5px;
  flex-grow: 0;
}

.cards-grid--home .price {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-gray);
}

.cards-grid--home .footer-frame {
  display: none;
}

@media (max-width: 1024px) {
  .cards-grid--home {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .cards-grid--home {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .cards-grid--home .product-actions {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
  }
}


@media (max-width: 850px) {
  .promo {
    flex-direction: column;
    border-radius: 20px;
  }
  .promo-text {
    padding: 50px 32px;
  }
  .promo-image {
    min-height: 320px;
    height: 320px;
    border-radius: 0;
    background-position: center top;
  }
}

@media (max-width: 600px) {
  .promo-text {
    padding: 40px 25px;
    text-align: center;
  }
  .promo-image {
    min-height: 260px;
    height: 260px;
    border-radius: 0;
    background-position: center top;
  }
}