.elementor-188 .elementor-element.elementor-element-7338e5c1{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-188 .elementor-element.elementor-element-7176642 .elementor-repeater-item-55c62a5 .swiper-slide-bg{background-color:#833ca3;background-image:url(https://validkala.ir/wp-content/uploads/2026/06/چای-کرک-زعفرانی-های-فایو-1-1024x439-1.webp);background-size:cover;}.elementor-188 .elementor-element.elementor-element-7176642 .elementor-repeater-item-61d650f .swiper-slide-bg{background-color:#833ca3;background-image:url(https://validkala.ir/wp-content/uploads/2026/06/5a8b3b3c-9a46-4bfd-886b-c09ba0b693b3.png);background-size:cover;}.elementor-188 .elementor-element.elementor-element-7176642 .elementor-repeater-item-aca4db6 .swiper-slide-bg{background-color:#833ca3;background-image:url(https://validkala.ir/wp-content/uploads/2026/06/e5486fd3-bd15-4c2c-a22b-59ebe186ede7.png);background-size:cover;}.elementor-188 .elementor-element.elementor-element-7176642 .swiper-slide{transition-duration:calc(5000ms*1.2);height:400px;}.elementor-188 .elementor-element.elementor-element-7176642{width:100%;max-width:100%;}.elementor-188 .elementor-element.elementor-element-7176642 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-188 .elementor-element.elementor-element-7176642 .swiper-slide-contents{max-width:98%;}.elementor-188 .elementor-element.elementor-element-7176642 .swiper-slide-inner{padding:0px 0px 0px 0px;text-align:center;}.elementor-widget-text-editor{color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-188 .elementor-element.elementor-element-fe0e558{--display:flex;}.elementor-188 .elementor-element.elementor-element-d9a488a{--display:flex;}.elementor-188 .elementor-element.elementor-element-b31712e{--spacer-size:36px;}.elementor-widget-heading .elementor-heading-title{color:var( --e-global-color-primary );}.elementor-188 .elementor-element.elementor-element-9e525b2{text-align:center;}.elementor-188 .elementor-element.elementor-element-9e525b2 .elementor-heading-title{font-size:16px;font-weight:normal;color:#690000;}.elementor-188 .elementor-element.elementor-element-b045c06{--swiper-slides-to-display:5;--swiper-slides-gap:10px;--arrow-prev-left-align:0%;--arrow-prev-translate-x:0px;--arrow-prev-left-position:0px;--arrow-prev-top-align:50%;--arrow-prev-translate-y:-50%;--arrow-prev-top-position:0px;--arrow-next-right-align:0%;--arrow-next-translate-x:0%;--arrow-next-right-position:0px;--arrow-next-top-align:50%;--arrow-next-translate-y:-50%;--arrow-next-top-position:0px;}.elementor-188 .elementor-element.elementor-element-b045c06 > .elementor-widget-container{margin:0px 0px 7px 0px;padding:-3px 0px 11px 0px;}.elementor-188 .elementor-element.elementor-element-b045c06 .swiper-slide > .elementor-element{height:100%;}.elementor-188 .elementor-element.elementor-element-d5c1daf{--display:flex;}.elementor-188 .elementor-element.elementor-element-c26d375{--spacer-size:16px;}.elementor-188 .elementor-element.elementor-element-6c32ae2{text-align:center;}.elementor-188 .elementor-element.elementor-element-6c32ae2 .elementor-heading-title{font-size:16px;color:#690101;}.elementor-188 .elementor-element.elementor-element-b1ccfe7{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:-10px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-188 .elementor-element.elementor-element-e206827{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );}.elementor-188 .elementor-element.elementor-element-ff10d17 img{opacity:1;border-radius:15px 15px 15px 15px;}.elementor-188 .elementor-element.elementor-element-ff10d17:hover img{opacity:0.52;}.elementor-188 .elementor-element.elementor-element-75cc34c{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-188 .elementor-element.elementor-element-f1b9496 img{opacity:1;border-radius:15px 15px 15px 15px;}.elementor-188 .elementor-element.elementor-element-f1b9496:hover img{opacity:0.52;}.elementor-188 .elementor-element.elementor-element-36364b6{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-188 .elementor-element.elementor-element-3f62066 img{opacity:1;border-radius:15px 15px 15px 15px;}.elementor-188 .elementor-element.elementor-element-3f62066:hover img{opacity:0.52;}body.elementor-page-188{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}@media(max-width:1024px){.elementor-188 .elementor-element.elementor-element-b045c06{--swiper-slides-to-display:2;}}@media(min-width:768px){.elementor-188 .elementor-element.elementor-element-7338e5c1{--content-width:1600px;}.elementor-188 .elementor-element.elementor-element-e206827{--width:50%;}.elementor-188 .elementor-element.elementor-element-75cc34c{--width:50%;}.elementor-188 .elementor-element.elementor-element-36364b6{--width:50%;}}@media(max-width:767px){.elementor-188 .elementor-element.elementor-element-7176642 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-188 .elementor-element.elementor-element-7176642 .swiper-slide{height:172px;}.elementor-188 .elementor-element.elementor-element-7176642 .swiper-slide-contents{max-width:98%;}.elementor-188 .elementor-element.elementor-element-7176642 .swiper-slide-inner{padding:0px 0px 0px 0px;}.elementor-188 .elementor-element.elementor-element-b045c06{--swiper-slides-to-display:2;}}/* Start custom CSS for html, class: .elementor-element-58c5421 */<!DOCTYPE html>
<html lang="fa">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>نوشیدنی‌های عشقم ❤️</title>
  <style>
    /* ===== استایل‌های کلی ===== */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background: #f5f0eb;
      padding: 40px 20px;
      direction: rtl;
    }

    .cat-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
      gap: 25px;
      max-width: 1200px;
      margin: 0 auto;
    }

    /* ===== استایل کارت‌ها ===== */
    .cat-card {
      position: relative;
      background: #ffffff;
      border-radius: 20px;
      padding: 20px 15px 15px;
      text-align: center;
      text-decoration: none;
      color: #2d2d2d;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
      transition: all 0.3s ease;
      border: 2px solid #e8e0d8;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
    }

    .cat-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
      border-color: #c4a882;
    }

    .cat-card img {
      width: 100%;
      max-width: 120px;
      height: auto;
      border-radius: 12px;
      display: block;
    }

    .cat-card span {
      font-size: 15px;
      font-weight: 600;
      color: #3d3d3d;
      line-height: 1.4;
    }

    .love-heart {
      position: absolute;
      top: 10px;
      left: 10px;
      font-size: 18px;
      color: #e74c6f;
      opacity: 0.7;
      transition: opacity 0.3s ease;
    }

    .cat-card:hover .love-heart {
      opacity: 1;
      transform: scale(1.2);
    }

    /* ===== نوار طلایی فقط در هاور (نسخه تضمینی) ===== */
    .cat-card::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 20px;
      z-index: 0;
      pointer-events: none;
      opacity: 0;
      transform: translateZ(0);
      background: conic-gradient(
        from 0deg,
        #ffd700, #ffec8b, #ffd700,
        #f0c000, #ffd700
      );
      background-size: 300% 300%;
      transition: opacity 0.25s ease;
      /* ماسک برای اینکه فقط حاشیه دیده بشه */
      -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      animation: none;
      padding: 0;
    }

    .cat-card:hover::after {
      opacity: 1;
      inset: -3px;
      border-radius: 22px;
      padding: 3px;
      animation: spinGold 2.5s linear infinite;
    }

    @keyframes spinGold {
      0% { background-position: 0% 50%; }
      100% { background-position: 100% 50%; }
    }

    /* ===== حذف نوار طلایی برای کارت active ===== */
    .cat-card.active::after {
      opacity: 0 !important;
      animation: none !important;
      display: none !important;
    }

    .cat-card.active:hover::after {
      opacity: 0 !important;
      animation: none !important;
      display: none !important;
    }

    /* ===== استایل مخصوص کارت active (اختیاری) ===== */
    .cat-card.active {
      border-color: #c4a882;
      background: #fcf9f6;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }

    /* خیلی مهم: اگر جایی هنوز ::before نوار می‌سازه، خاموشش کن */
    .cat-card::before {
      content: none !important;
      display: none !important;
    }

    /* ===== ریسپانسیو ===== */
    @media (max-width: 600px) {
      .cat-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 15px;
      }
      
      .cat-card {
        padding: 15px 10px 10px;
      }
      
      .cat-card span {
        font-size: 13px;
      }
    }
  </style>
</head>

<body>

<div class="cat-grid">
  <a class="cat-card" href="#">
    <img src="https://validkala.ir/wp-content/uploads/2026/07/اسپرسو-فوری.png" alt="اسپرسو فوری">
    <span>اسپرسو فوری</span>
    <div class="love-heart">❤️</div>
  </a>

  <a class="cat-card" href="#">
    <img src="https://validkala.ir/wp-content/uploads/2026/07/کافی-میکس-13.png" alt="کافی میکس 1×3">
    <span>کافی میکس ۱×۳</span>
    <div class="love-heart">❤️</div>
  </a>

  <a class="cat-card" href="#">
    <img src="https://validkala.ir/wp-content/uploads/2026/07/کاپوچینو.png" alt="کاپوچینو">
    <span>کاپوچینو</span>
    <div class="love-heart">❤️</div>
  </a>

  <!-- ===== حذف کلاس active از این کارت ===== -->
  <a class="cat-card" href="#">
    <img src="https://validkala.ir/wp-content/uploads/2026/07/هات-چاکلت.png" alt="هات چاکلت کلاسیک">
    <span>هات چاکلت کلاسیک</span>
    <div class="love-heart">❤️</div>
  </a>

  <!-- بقیه کارت‌ها -->
  <a class="cat-card" href="#">
    <img src="https://validkala.ir/wp-content/uploads/2026/07/ماسالا.png" alt="چای ماسالا">
    <span>چای ماسالا</span>
    <div class="love-heart">❤️</div>
  </a>

  <a class="cat-card" href="#">
    <img src="https://validkala.ir/wp-content/uploads/2026/07/کرک-زعفرانی.png" alt="چای کرک زعفرانی">
    <span>چای کرک زعفرانی</span>
    <div class="love-heart">❤️</div>
  </a>

  <a class="cat-card" href="#">
    <img src="https://validkala.ir/wp-content/uploads/2026/07/چاکرک-خلیجی.png" alt="چای کرک کلاسیک (خلیجی)">
    <span>چای کرک کلاسیک (خلیجی)</span>
    <div class="love-heart">❤️</div>
  </a>

  <a class="cat-card" href="#">
    <img src="https://validkala.ir/wp-content/uploads/2026/07/شیر-پسته.png" alt="شیر پسته">
    <span>شیر پسته</span>
    <div class="love-heart">❤️</div>
  </a>

  <a class="cat-card" href="#">
    <img src="https://validkala.ir/wp-content/uploads/2026/07/کافی-میکس-رژیمی.png" alt="کافی میکس رژیمی">
    <span>کافی میکس رژیمی</span>
    <div class="love-heart">❤️</div>
  </a>

  <a class="cat-card" href="#">
    <img src="https://validkala.ir/wp-content/uploads/2026/07/هات-چاکلت-رنگی.png" alt="هات چاکلت های رنگی">
    <span>هات چاکلت های رنگی</span>
    <div class="love-heart">❤️</div>
  </a>
</div>

</body>
</html>/* End custom CSS */
/* Start custom CSS for loop-carousel, class: .elementor-element-b045c06 *//* ۱. تنظیمات ساختار اسلایدر و هم‌ترازی ارتفاع همه کارت‌ها */
.elementor-188 .elementor-element.elementor-element-b045c06 .elementor-loop-container,
.elementor-188 .elementor-element.elementor-element-b045c06 .swiper-wrapper {
    align-items: stretch !important;
}

/* ۲. ساختار اصلی کارت محصول */
.elementor-188 .elementor-element.elementor-element-b045c06 .elementor-loop-container .e-loop-item,
.elementor-188 .elementor-element.elementor-element-b045c06 .swiper-slide {
    background: #ffffff;
    border-radius: 15px;
    padding: 14px;
    transition: all 0.3s ease;
    border: 1px solid #f0f0f0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    margin-bottom: 20px;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    box-sizing: border-box;
}

.elementor-188 .elementor-element.elementor-element-b045c06 .elementor-loop-container .e-loop-item:hover,
.elementor-188 .elementor-element.elementor-element-b045c06 .swiper-slide:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    border-color: #e6e6e6;
}

/* ۳. استایل عکس محصول (مربع ۱:۱، بدون کراپ و دفرمه شدن با پس‌زمینه تمیز) */
.elementor-188 .elementor-element.elementor-element-b045c06 .e-loop-item img,
.elementor-188 .elementor-element.elementor-element-b045c06 .swiper-slide img {
    border-radius: 10px;
    transition: transform 0.3s ease;
    width: 100% !important;
    max-width: 300px !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
    background-color: #fafafa;
    margin: 0 auto 12px auto !important;
    display: block !important;
}

.elementor-188 .elementor-element.elementor-element-b045c06 .e-loop-item:hover img,
.elementor-188 .elementor-element.elementor-element-b045c06 .swiper-slide:hover img {
    transform: scale(1.03);
}

/* ۴. عنوان محصول (محدود به ۲۰ کاراکتر، تک‌خط و وسط‌چین) */
.elementor-188 .elementor-element.elementor-element-b045c06 .e-loop-item h3, 
.elementor-188 .elementor-element.elementor-element-b045c06 .e-loop-item .elementor-heading-title,
.elementor-188 .elementor-element.elementor-element-b045c06 .swiper-slide h3,
.elementor-188 .elementor-element.elementor-element-b045c06 .swiper-slide .elementor-heading-title {
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: #333333 !important;
    text-align: center !important;
    margin: 0 auto 10px auto !important;
    max-width: 20ch !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
    height: 22px !important;
}

/* ۵. استایل بخش قیمت‌ها (کامل، زیر هم و وسط‌چین با ارتفاع رزرو شده) */
.elementor-188 .elementor-element.elementor-element-b045c06 .e-loop-item .price, 
.elementor-188 .elementor-element.elementor-element-b045c06 .e-loop-item .elementor-price,
.elementor-188 .elementor-element.elementor-element-b045c06 .swiper-slide .price,
.elementor-188 .elementor-element.elementor-element-b045c06 .swiper-slide .elementor-price {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    min-height: 46px !important;
    margin-bottom: 12px !important;
    gap: 2px;
    direction: rtl;
}

/* قیمت خط‌خورده (اصلی قبل تخفیف) */
.elementor-188 .elementor-element.elementor-element-b045c06 .e-loop-item del,
.elementor-188 .elementor-element.elementor-element-b045c06 .swiper-slide del {
    color: #8c8c8c !important;
    font-size: 12px !important;
    font-weight: normal !important;
    text-decoration: line-through;
    opacity: 0.85;
}

/* قیمت فروش نهایی / با تخفیف */
.elementor-188 .elementor-element.elementor-element-b045c06 .e-loop-item ins,
.elementor-188 .elementor-element.elementor-element-b045c06 .e-loop-item .price > .woocommerce-Price-amount,
.elementor-188 .elementor-element.elementor-element-b045c06 .swiper-slide ins,
.elementor-188 .elementor-element.elementor-element-b045c06 .swiper-slide .price > .woocommerce-Price-amount {
    color: #8b0000 !important;
    font-size: 15px !important;
    font-weight: bold !important;
    text-decoration: none !important;
}

/* ۶. استایل دکمه مشاهده محصول (هم‌تراز در کف کارت) */
.elementor-188 .elementor-element.elementor-element-b045c06 .e-loop-item .elementor-button,
.elementor-188 .elementor-element.elementor-element-b045c06 .swiper-slide .elementor-button {
    background: linear-gradient(135deg, #8b0000 0%, #d80000 100%) !important;
    border-radius: 50px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(139, 0, 0, 0.25) !important;
    transition: all 0.3s ease !important;
    border: none !important;
    padding: 8px 15px !important;
    width: 100% !important;
    text-align: center !important;
    margin-top: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 42px !important;
    box-sizing: border-box;
}

.elementor-188 .elementor-element.elementor-element-b045c06 .e-loop-item .elementor-button:hover,
.elementor-188 .elementor-element.elementor-element-b045c06 .swiper-slide .elementor-button:hover {
    background: linear-gradient(135deg, #d80000 0%, #a00000 100%) !important;
    box-shadow: 0 6px 16px rgba(216, 0, 0, 0.35) !important;
    transform: translateY(-2px);
}

/* ۷. ریسپانسیو و بهینه‌سازی اختصاصی برای موبایل */
@media (max-width: 767px) {
    .elementor-188 .elementor-element.elementor-element-b045c06 .elementor-loop-container .e-loop-item,
    .elementor-188 .elementor-element.elementor-element-b045c06 .swiper-slide {
        padding: 10px !important;
        border-radius: 12px !important;
        margin-bottom: 12px !important;
    }
    
    .elementor-188 .elementor-element.elementor-element-b045c06 .e-loop-item img,
    .elementor-188 .elementor-element.elementor-element-b045c06 .swiper-slide img {
        max-width: 100% !important;
        aspect-ratio: 1 / 1 !important;
        object-fit: contain !important;
        margin-bottom: 8px !important;
        padding: 2px;
    }

    .elementor-188 .elementor-element.elementor-element-b045c06 .e-loop-item h3, 
    .elementor-188 .elementor-element.elementor-element-b045c06 .e-loop-item .elementor-heading-title,
    .elementor-188 .elementor-element.elementor-element-b045c06 .swiper-slide h3,
    .elementor-188 .elementor-element.elementor-element-b045c06 .swiper-slide .elementor-heading-title {
        font-size: 12px !important;
        max-width: 18ch !important;
        height: 18px !important;
        margin-bottom: 6px !important;
    }

    .elementor-188 .elementor-element.elementor-element-b045c06 .e-loop-item .price, 
    .elementor-188 .elementor-element.elementor-element-b045c06 .e-loop-item .elementor-price,
    .elementor-188 .elementor-element.elementor-element-b045c06 .swiper-slide .price,
    .elementor-188 .elementor-element.elementor-element-b045c06 .swiper-slide .elementor-price {
        min-height: 38px !important;
        margin-bottom: 8px !important;
    }

    .elementor-188 .elementor-element.elementor-element-b045c06 .e-loop-item del,
    .elementor-188 .elementor-element.elementor-element-b045c06 .swiper-slide del {
        font-size: 10px !important;
    }

    .elementor-188 .elementor-element.elementor-element-b045c06 .e-loop-item ins,
    .elementor-188 .elementor-element.elementor-element-b045c06 .e-loop-item .price > .woocommerce-Price-amount,
    .elementor-188 .elementor-element.elementor-element-b045c06 .swiper-slide ins,
    .elementor-188 .elementor-element.elementor-element-b045c06 .swiper-slide .price > .woocommerce-Price-amount {
        font-size: 13px !important;
    }

    .elementor-188 .elementor-element.elementor-element-b045c06 .e-loop-item .elementor-button,
    .elementor-188 .elementor-element.elementor-element-b045c06 .swiper-slide .elementor-button {
        font-size: 12px !important;
        min-height: 36px !important;
        padding: 6px 10px !important;
    }
}

/* حذف لایه‌های اضافی المنتور */
.elementor-188 .elementor-element.elementor-element-b045c06 .elementor-background-overlay {
    display: none !important;
}/* End custom CSS */