/* =========================
   ROOT & THEME VARIABLES
========================= */
:root {
  --dark-navy: #0B0C2A;
  --navy: hsl(240, 58%, 13%);
  --gold: #fda222;
  --cream: #FFF3E2;
  --orange: #F4A300;

  --radius-sm: 8px;
  --radius-md: 12px;

  --tr-fast: .2s ease;
  --tr-base: .3s ease;
}

/* html[data-theme='light'] {
  --bg-color: #d9dadb;
  --nav-color: #151640;
  --text-main: #000;
  --text-invert: #fff;
  --card-bg: #f8f9fa;
  --span-nav: var(--gold);
} */


:root{
  --bg-color: var(--navy);
  --nav-color: #d9dadb;
  --text-main: #fff;
  --text-invert: #000;
  --card-bg: #2c3e50;
  --span-nav: #000;
}

@font-face {
  font-family: 'Vazirmatn';
  src: url('../../extra/fonts/vazirmatn/fonts/webfonts/Vazirmatn[wght].woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
}

/* Estedad — Headings (fa) */
@font-face {
  font-family: 'Estedad';
  src: url('../../extra/fonts/Estedad/Estedad[wght].woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
}

/* Cairo — Headings (ar) */
@font-face {
  font-family: 'Cairo';
  src: url('../../extra/fonts/Cairo/Cairo-VariableFont_slnt%2Cwght.ttf') format('truetype-variations');
  font-weight: 200 900;
  font-display: swap;
}

/* Playfair Display — Headings (en) */
@font-face {
  font-family: 'Playfair Display';
  src: url('../../extra/fonts/Playfair_Display/PlayfairDisplay-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 400 900;
  font-display: swap;
}

/* Inter — Body (en) */
@font-face {
  font-family: 'Inter';
  src: url('../../extra/fonts/Inter/Inter-VariableFont_opsz%2Cwght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-display: swap;
}

html[lang='fa'] body { --font-heading: 'Estedad', 'Vazirmatn'; --font-body: 'Vazirmatn'; }
html[lang="ar"] body { --font-heading: 'Cairo', 'Vazirmatn';    --font-body: 'Vazirmatn'; }
html[lang="en"] body { --font-heading: 'Playfair Display', serif; --font-body: 'Inter', sans-serif; }

body        { font-family: var(--font-body), sans-serif; line-height: 1.8; } /* 1.8 = Persian needs taller line-height */
h1,h2,h3,h4,.mega-card__title { font-family: var(--font-heading); }

.price, .cart_pro-price { /* aligned digits */
  font-feature-settings: 'tnum' 1;
  font-variant-numeric: tabular-nums;
}

/* =========================
   BASE
========================= */
body {
  background: var(--bg-color);
  min-height: 100vh;
  display: flex;
  flex-direction: column;

}

img {
  max-width: 100%;
  display: block;
}

/* =========================
   TEXT HELPERS
========================= */
.text-gold { color: var(--gold); }
.text-main { color: var(--text-main); }
.text-invert { color: var(--text-invert); }

.span_nav {
  color: var(--span-nav);
  /* font-weight: 500; */
  /* font-size: ; */
}


/* =========================
   alert
========================= */


.alert-error{background-image:-webkit-linear-gradient(top,#d40101 0,#680303 100%);background-image:-o-linear-gradient(top,#f2dede 0,#e7c3c3 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#f2dede),to(#e7c3c3));background-image:linear-gradient(to bottom,#f2dede 0,#e7c3c3 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2dede', endColorstr='#ffe7c3c3', GradientType=0);background-repeat:repeat-x;border-color:#dca7a7}


a{
  text-decoration: none;
  color: none;
}
/* =========================
   NAVBAR
========================= */
.navbar-custom {
  background: var(--nav-color);
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--gold);
  transition: var(--tr-base);
}

.nav-link {
  color: var(--text-main);
  /* font-weight: 500; */
  border-radius: var(--radius-sm);
  transition: var(--tr-fast);
}

.nav-link:hover {
  color: var(--gold);
  background-color: rgba(253,162,34,0.1);
}

.nav-link:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.material-symbols-outlined {
  font-size: 20px;
}

/* =========================
   MEGA MENU (DESKTOP ONLY)
========================= */
@media (min-width: 992px) {

  .nav__item--mega {
    position: static;
  }

@media (min-width: 2550px ) {
  /* .fs-xfxl { */
      /* font-size: 0.1rem !important; */
  /* } */
  .margin-xfxl{
      margin-top: 50px;
  }
}


  .mega-menu {
    width: 100vw;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--bg-color);
    padding: 2rem;
    box-shadow: 0 8px 16px rgba(0,0,0,.15);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    content-visibility: auto;
    contain-intrinsic-size: 600px;
  }

  .mega-menu__content {
    max-width: 1200px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 20px;
  }

  .mega-menu__title {
    color: var(--gold);
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
    border-right: 3px solid var(--gold);
    padding-right: 10px;
  }

  /* Cards */
  .mega-card {
    background: var(--card-bg);
      color: #000;
    border-radius: var(--radius-sm);
    padding: 8px;
    display: flex;
    gap: 12px;
    border: 2px solid transparent;
    transition: border-color .2s ease, transform .2s ease;
    will-change: transform;
    border-color: #fda222;
  }

  .mega-card:hover {
    border-color: var(--gold);
    background: rgba(253,162,34,.05);
    transform: translate3d(0,-1px,0);
  }

  .mega-card__image img {
    width: 250px;
    height: 200px;
    object-fit: cover;
    border-radius: 6px;
    content-visibility: auto;
  }

  .mega-card__title {
    font-size: .9rem;
    margin: 0;
    color: var(--text-main);
    background: var(--card-bg);
    border-radius: 4px;
    display: inline-block;
    padding: 4px  10px ;

  }

  .mega-card__desc {
    font-size: .8rem;
    opacity: .85;
  }

  .mega-card__btn {
    display: inline-block;
    margin-top: .5rem;
    padding: 6px 16px;
    font-size: .8rem;
    font-weight: bold;
    background: var(--gold);
    color: var(--dark-navy);
    border-radius: 4px;
    text-decoration: none;
    transition: var(--tr-fast);
  }

  .mega-card__btn:hover {
    background: var(--orange);
    color: #fff;
  }

}

/* =========================
   SEARCH OVERLAY
========================= */

.overlay {
 position: fixed;
  inset: 0;
  width: 100vw;
  height: 100svh; 
  background: var(--bg-color);
  transform: translateY(100%);
  transition: transform .4s cubic-bezier(0.4,0,0.2,1);
  z-index: 9999;
}

.overlay.active {
  transform: translateY(0);
    visibility: visible;
    

}

.overlay-content {
  display: flex;
  justify-content: center;
  /* margin-top: 30px; */
}

.search-backdrop {
   position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  background: rgba(0,0,0,.35);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease;
  z-index: 9998;
}

.search-backdrop.active {
  opacity: 1;
  visibility: visible;
}

.body_lock {
  overflow: hidden;
  
}

/* =========================
   SEARCH INPUT
========================= */
.search-wrapper .input-group {
  background: var(--card-bg);
  border-radius: 50px;
  border: 1.5px solid var(--gold);
  transition: var(--tr-base);
}

.search-wrapper .input-group:focus-within {
  box-shadow: 0 0 12px rgba(253,162,34,.3);
}

.searchInput {
  background: transparent;
  border: none;
  padding: 10px 20px;
  color: var(--text-main);
}

.fake_search{
  border-radius: 20px;
  background-color: var(--gold);
}

.fake_search:focus{
  border: #0B0C2A;
  
}

.phoneSeachCustome{
  margin: 8px;
  width: 95%;
}
.phoneSeachCustomeInput{
  border-radius: 50px;
}
.result-seach-category{
  margin-top: 150px;
  background-color: #F4A300;
}
/* =========================
   BUTTONS
========================= */
.btn-gold {
  background: var(--gold);
  color: var(--dark-navy);
  font-weight: 600;
  border: none;
  transition: var(--tr-fast);
}

.btn-gold:hover {
  background: var(--orange);
  transform: translateY(-1px);
}

/* =========================
   FOOTER
========================= */
.footer-custom {
  background: var(--nav-color);
  border-top: 1px solid var(--gold);
  margin-top: auto;
}

/* =========================
   DARK THEME TWEAKS
========================= */

html[data-theme="dark"] .mega-card {
  background: rgba(255,255,255,.04);
  border-color: rgba(254,165,39,.18);
}

html[data-theme="dark"] .mega-card__desc {
  color: rgba(255,255,255,.8);
}
/* ########################## */

.bg-navy {
  background: var(--nav-color);
}

.bg-dark-navy {
  background: var(--dark-navy);
}

.text-color-in-white {
  color: var(--text-main);
}

.text-color-in-dark {
  color: var(--text-invert);
}

html[data-theme="dark"] .text-color-in-dark {
  color: var(--text-main);
    --card-bg: #ffffff;

}

html[data-theme="dark"] .text-color-in-white {
  color: var(--text-invert);
}



/* #######################################################################################################################################3 */
                        /* navbar_phon */

#navbar_phone {
  left: 0;
  height: 50.36px;
  z-index: 1000;
   border-top-left-radius: 12px;   
  border-top-right-radius: 12px;  
}

#navbar_phone a {
    float: left;
    display: flex;             /* تغییر به flex برای عمودی کردن آیکون و متن */
    flex-direction: column;    /* آیکون بالای متن */
    align-items: center;       /* مرکز چینش */
    justify-content: center;
    text-decoration-line:none ;
    text-align: center;
    padding: 4px 0;            /* کمی padding عمودی */
    width: 25%;
    box-sizing: border-box;
}
.span_size{
  font-size: 12px;
}

.nav-icon {
    font-size: 18px;           
    margin-bottom: 2px;        /* فاصله بین آیکون و متن */
}

/* Page content */
.content {
  padding: 16px;
    padding-bottom: 60px; /* فضا برای navbar در پایین */

}

/* ########################################################################################################################################## */
/* static/css/language-switcher.css */

.language-switcher {
    top: 10px;
    right: 10px;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.9);
    padding: 8px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.language-switcher .btn-group {
    gap: 2px;
}

.language-switcher .btn {
    padding: 5px 12px;
    font-size: 14px;
    transition: all 0.3s ease;
    border-radius: 6px !important;
}

.language-switcher .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* برای حالت RTL (عربی) */
[dir="rtl"] .language-switcher {
    right: auto;
    left: 10px;
}

/* ######################################################################################################################################## */
/* استایل مخصوص کارت نتایج دسکتاپ */

.searchResultsCard_desktop {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    background: white;
    border-radius: 16px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
    border: 1px solid rgba(244, 163, 0, 0.2);
    z-index: 10000;
    animation: slideDown 0.2s ease;
}

/* انیمیشن */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* استایل آیتم‌های داخلش */
.searchResultsCard_desktop .list-group-item {
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    padding: 12px 16px;
    transition: all 0.2s ease;
}

.searchResultsCard_desktop .list-group-item:hover {
    background: rgba(244, 163, 0, 0.05);
    transform: translateX(5px);
}

.searchResultsCard_desktop .list-group-item:last-child {
    border-bottom: none;
}

/* اسکرول بار */
.searchResultsCard_desktop #productsGriddesktop {
    scrollbar-width: thin;
    scrollbar-color: #F4A300 #f1f1f1;
}

.searchResultsCard_desktop #productsGriddesktop::-webkit-scrollbar {
    width: 6px;
}

.searchResultsCard_desktop #productsGriddesktop::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.searchResultsCard_desktop #productsGriddesktop::-webkit-scrollbar-thumb {
    background: #F4A300;
    border-radius: 10px;
}


/* ########################################################################################################################################## */
@media(min-width:320px) and (max-width:427px) {
div.scrollmenu {
  background-color: #333;
  overflow: auto;
  white-space: nowrap;
  height: 280px; 

}

.carusor-Home{
  height:180px ;
  width: 354px;
  overflow: hidden;

}

.cart_pro-title {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 3px;
}

.cart_pro-body {
    color: var(--text-main, #333);
}

.cart_pro-description {
    font-size: 0.85rem;
    line-height: 1.5;
    opacity: 0.8;
}


.cart_pro-price {
    font-size: 14px;
    color: var(--gold, #F4A300);
}


.cart_pro-price small {
    font-size: 25rem;
}

}

/* ########################################################3 */
@media(min-width:426px) and (max-width:768px) {
  
.cart_pro-card {
    background: var(--card-bg, #ffffff);
    width: 130px; 
    height: 228px;
}

.cart_pro-title {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 3px;

}

.carusor-Home{
  height:180px ;
  width: 400px;

}

.cart_pro-body {
    color: var(--text-main, #333);
}

.cart_pro-description {
    font-size: 0.85rem;
    line-height: 1.5;
    opacity: 0.8;
}

}

/* ###################################################### */
@media (min-width:769px) and (max-width:1439px){
 
.cart_pro-card {
    background: var(--card-bg, #ffffff);
    width: 160px; 
    height: 254px;
}


.carusor-Home{
  height:256px ;
  width: 740px;

}
.cart_pro-title {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 3px;

}

.cart_pro-body {
    color: var(--text-main, #333);
    font-size: 20px;
}

.cart_pro-description {
    font-size: 0.85rem;
    line-height: 1.5;
    opacity: 0.8;
}

}

/* ###################################################3 */
@media (min-width:1440px) and (max-width:2560px){


.cart_pro-card {
    background: var(--card-bg, #ffffff);
    width: 250px; 
    height: 350px;
}


.carusor-Home{
  height:400px ;
  width: 1410px;

}

.cart_pro-title {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 3px;

}

.cart_pro-body {
    color: var(--text-main, #333);
    font-size: 20px;
}

.cart_pro-description {
    font-size: 0.85rem;
    line-height: 1.5;
    opacity: 0.8;
}

}


/* ########################################################################################################################################## */



/* ========== کلاس‌های اختصاصی cart_pro ========== */

/* کارت اصلی */

.overlay-child{
  min-width: max-content;
  background-color: #d18c00;
}  

.cart_pro-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important;
}

/* محفظه تصویر */
.cart_pro-image-wrapper {
    width: 100%;
    aspect-ratio: 1 / 0.90;
    overflow: hidden;
}

.cart_pro-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

.cart_pro-card:hover .cart_pro-img {
    transform: scale(1.05);
}



/* بخش پایین */
.cart_pro-footer {
    margin-top: auto;
}

/* قیمت */


/* دکمه قلب */
.cart_pro-favorite {
    cursor: pointer;
    transition: all 0.2s ease;
}

.cart_pro-favorite:hover i {
    transform: scale(1.1);
}

.cart_pro-favorite i {
    transition: all 0.2s ease;
}


.scrollmenu::-webkit-scrollbar {
    height: 4px;
}
.scrollmenu::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}
.scrollmenu::-webkit-scrollbar-thumb {
    background: var(--gold, #F4A300);
    border-radius: 10px;
}

/* ####################################################################################################3
*/
/* shine card ?  */
/* کارت های درخشان */
.card-shine {
    background: #f8f9fa;               /* سفید خیلی روشن - پایه صدفی */
    position: relative;                /* مهم: برای موقعیت‌دهی ::before */
    overflow: hidden;                  /* لایه اضافی بیرون نزنه */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-shine::before {
    content: "";                       /* همیشه لازم است برای فعال شدن pseudo-element */
    position: absolute;
    inset: 0;                          /* یعنی تمام عرض و ارتفاع والد (card) */
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.00) 30%,     /* شفاف */
        rgba(255, 255, 255, 0.35) 45%,     /* درخشش سفید ملایم */
        rgba(200, 220, 255, 0.20) 55%,     /* کمی آبی-بنفش برای حس iridescent */
        rgba(255, 255, 255, 0.00) 70%      /* دوباره شفاف */
    );
    opacity: 0.5;                      /* شدت درخشش اولیه */
    pointer-events: none;              /* کلیک رد بشه به لایه زیر */
    transition: opacity 0.4s ease, transform 0.6s ease;
    transform: translate(-50%, -50%) rotate(10deg);  /* موقعیت اولیه کمی کج و بالا-چپ */
}

.card-shine:hover::before {
    opacity: 0.85;                     /* در هاور درخشش بیشتر می‌شه */
    transform: translate(10%, 10%) rotate(10deg);   /* حرکت ملایم به سمت پایین-راست */
}

.card-shine:hover {
    transform: translateY(-4px);       /* کارت کمی بالا می‌ره */
    box-shadow: 0 12px 24px rgba(0,0,0,0.12) !important;  /* سایه قوی‌تر */
}


/* ##############################################3
 */
 .horizontal-scroller {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;          /* اسکرول نرم در iOS */
    scrollbar-width: thin;                      /* فایرفاکس */
    scrollbar-color: #fda222 #f1f3f5;           /* رنگ اسکرول بار */
    padding-bottom: 1rem;                       /* فضای زیر برای اسکرول بار */
}

.horizontal-scroller::-webkit-scrollbar {
    height: 6px;                                /* نازک و زیبا */
}

.horizontal-scroller::-webkit-scrollbar-track {
    background: #f1f3f5;                        /* پس‌زمینه اسکرول بار */
    border-radius: 10px;
}

.horizontal-scroller::-webkit-scrollbar-thumb {
    background: #fda222;                        /* رنگ طلایی/نارنجی تم تو */
    border-radius: 10px;
}

.horizontal-scroller::-webkit-scrollbar-thumb:hover {
    background: #e67e22;
}

/* اختیاری: کارت‌ها کمی snap داشته باشن (مدرن و خوش‌دست) */
.horizontal-scroller {
    scroll-snap-type: x proximity;              /* کارت نزدیک به لبه می‌چسبه */
}

.horizontal-scroller .card {
    scroll-snap-align: start;                   /* ابتدای کارت به لبه می‌چسبه */
    flex: 0 0 220px;                            /* عرض ثابت کارت‌ها */
    max-width: 240px;
}

/* در موبایل خیلی کوچک، کارت‌ها کمی کوچکتر بشن */
@media (max-width: 400px) {
    .horizontal-scroller .card {
        flex: 0 0 180px;
        max-width: 200px;
    }
}

/* ################################################################################# */


:root{
    font-size: 16px;
    font-family: "Raleway";
    --heading-color: hsl(0, 0%, 7%);
    --date-text-color: hsl(0, 0%, 51%);
    --previous-price-text-color: hsl(0, 98%, 44%);
    --current-price-text-color: hsla(0, 0%, 0%, 0.822);
    --liked-heart-icon-color: hsl(0, 98%, 44%);
    --heart-icon-color: whitesmoke;
    --pricing-font-weight: 800;
    --title-font-weight: 800;
    --date-font-weight: 550;

    /* Cards colors */
    --card-main-color : whitesmoke;
    /* --card-1-secondary-color: rgb(192, 82, 82); */
    /* --card-1-secondary-color: rgba(176, 0, 0, 0.835); */
    --card-2-secondary-color: rgb(67,53,27);
    --card-3-secondary-color: rgb(178,180,179);
    --card-1-secondary-color: rgb(96,109,117);
    /* --card-1-secondary-color: rgb(29, 57, 74); */
}



.container_card input{
    display: none;
}

.container_card{
    max-width: 100em;
    /* background-color: lightgreen; */
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-content: flex-start;
    margin: auto;
    min-height: 30em;
    padding: 3em 1em 1em 1em;
    box-sizing: border-box;
}

/* Card Styling */
.card-div{
    max-width: 20em;
    min-height: 20em;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-items: center;
    align-items: center;
    background-color: var(--card-main-color);
    margin: 0.6em;
    box-sizing: border-box;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    transition: transform 0.2s ease-in-out;
}

.card-div-custom{
    box-sizing: border-box;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    transition: transform 0.2s ease-in-out;
}

.card-div-custom:hover .img-div img{
    transform: translateY(7.5%) scale(1.2);
}

.card-div-custom:hover{
    transform: translate(0, -10px);
}


/* ======== General styling of all cards and heart divs ========== */
.img-div{
    width: 100%;
    height: 8em;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding-top: 1rem;
    z-index: 1;
    border-radius: 0 0 10px 10px;
}

.img-div img{
    transform-origin: bottom;
    transform: translateY(7.5%);
    transition: transform 0.3s ease-in-out
}

/* === Styling the like Icon ==== */
.like-icon-div{
    padding: 1em 1em 0 1em;
    width: 100%;
    box-sizing: border-box;
    text-align: right;
    font-size: 1.5em;
    color: var(--heart-icon-color);
    border-radius:10px 10px 0 0;
    display: flex;
    justify-content: flex-end;
}

.like-icon-div-child{
    /* background-color: yellow; */
    width: 1em;
    height: 1em;
    position: relative;
    z-index: 3;
    cursor: pointer;
}

.heart-empty{
    position: absolute;
    left: 0;
    opacity: 1;
}

.heart-fill{
    position: absolute;
    left: 0;
    opacity: 0;
    transform: scale(0);
    transition: transform 0.25s ease-in-out, opacity 0.2s ease-in-out;
}


/* God of war image and heart-background*/
.gow-img-div{
    background-color: var(--card-1-secondary-color);
}

.gow-img-div img{
    width: 65%;
    transform: translateY(7.5%);
    /* background-color: whitesmoke; */
}

.card-1 .like-icon-div{
    background-color: var(--card-1-secondary-color);
}


/* Sekiro image and heart-background */
.sekiro-img-div{
    background-color: var(--card-2-secondary-color);
}

.sekiro-img-div img{
    width: 45%;
    transform: translateY(7.5%);
}

.card-2 .like-icon-div{
    background-color: var(--card-2-secondary-color);
}


/* Dazai image and heart-background */
.dazai-img-div{
    background-color: var(--card-3-secondary-color);
}

.dazai-img-div img{
    width: 80%;
    transform: translateY(7.5%);
}

.card-3 .like-icon-div{
    background-color: var(--card-3-secondary-color);
    
}

/* U4 image and heart-background*/
.u4-img-div{
    background-color: var(--card-4-secondary-color);
}

.u4-img-div img{
    width: 50%;
    transform: translateY(7.5%);
}

.card-4 .like-icon-div{
    background-color: var(--card-4-secondary-color);
}

/* ======== text Container Styling general ======== */

.text-container{
    width: 100%;
    display: flex;
    flex-direction: column;
    /* background-color: yellow; */
    padding: 0 1.5em;
    padding-top: 7em;
    padding-bottom: 1em;
    box-sizing: border-box;
}

.text-container .item-name,
.text-container .date{
    margin: 0.25em 0;
    text-align: center;
}

.text-container .item-name{
    font-size: 1.2em;
    font-weight: var(--title-font-weight);
    color: var(--heading-color);
}

.text-container .date{
    font-size: 0.9em;
    font-weight: var(--date-font-weight);
    color: var(--date-text-color);
}

/* === Pricing and cart div  ===== */
.pricing-and-cart{
    /* background-color: wheat; */
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 0.25em 0 1em 0;
}

.pricing{
    display: flex;
    flex-direction: column;
    text-align: left;
}

.previous-price{
    font-size: 0.8rem;
    font-weight: var(--pricing-font-weight);
    color: var(--previous-price-text-color);
    text-decoration: line-through;
    /* background-color: whitesmoke; */
    text-align: left;
}

.current-price{
    color: var(--current-price-text-color);
    font-size: 1.3rem;
    font-weight: var(--pricing-font-weight);
    /* background-color: yellow; */
    margin: 0;
}

.pricing-and-cart{
    width: 100%;
}

.fa-shopping-cart{
    font-size: 1.3rem;
    top: 0;
    transform: translateY(50%);
}


/* ====== Hover effects ======= */
.card-div:hover .img-div img{
    transform: translateY(7.5%) scale(1.2);
}

.card-div:hover{
    transform: translate(0, -10px);
}

.like-icon-div-child:hover .heart-fill{
    opacity: 1;
    transform: scale(1);
}

.like-icon-div-child:hover .heart-empty{
    transition-delay: 0.25s;
    opacity: 0;
}

#card-1-like:checked ~ .heart-empty,
#card-2-like:checked ~ .heart-empty,
#card-3-like:checked ~ .heart-empty,
#card-4-like:checked ~ .heart-empty{ 
        opacity: 0;
}

#card-1-like:checked ~ .heart-fill,
#card-2-like:checked ~ .heart-fill,
#card-3-like:checked ~ .heart-fill,
#card-4-like:checked ~ .heart-fill{
    animation: like-animation 0.25s ease-in-out forwards;
}

#card-1-like:not(:checked) ~ .heart-fill,
#card-2-like:not(:checked) ~ .heart-fill,
#card-3-like:not(:checked) ~ .heart-fill,
#card-4-like:not(:checked) ~ .heart-fill{
    animation: unlike-animation 0.25s ease-in-out ;
}


@keyframes like-animation{
    0%{
        opacity: 1;
        transform: scale(1)
    }
    
    50%{
        opacity: 1;
        color: var(--liked-heart-icon-color);
        transform: scale(0.5);
    }

    100%{
        opacity: 1;
        color: var(--liked-heart-icon-color);
        transform: scale(1.0);
    }
}

@keyframes unlike-animation{
    0%{
        opacity: 1;
        transform: scale(1)
    }
    
    50%{
        opacity: 1;
        transform: scale(0.5);
    }

    100%{
        opacity: 1;
        color: var(--heart-icon-color);
        transform: scale(1.0);
    }
}