/* Title Bars */

:root {
    --default-title-bar-height: 42px;
}


/* Custom PC Pilihan */
/*  */
.custom-pc-pilihan-gradient>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1) {
    display: flex;
    height: var(--default-title-bar-height);
    padding: 4px 15px;
    justify-content: space-between;
    align-items: center;
    border-radius: 4px;
    color: white;
    font-weight: 500;
    background: rgb(242, 41, 73);
    background: linear-gradient(90deg, rgba(242, 41, 73, 1) 0%, rgba(243, 185, 23, 1) 100%);
}

.custom-pc-pilihan-gradient>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1) a {
    color: white;
}

.custom-pc-pilihan-gradient>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1) {
    font-size: 1.25rem;
}

.gaming-peripherals-gradient>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1) {
    display: flex;
    height: var(--default-title-bar-height);
    padding: 4px 15px;
    justify-content: space-between;
    align-items: center;
    border-radius: 4px;
    color: white;
    font-weight: 500;
    background: rgb(1,210,210);
    background: linear-gradient(90deg, rgba(1,210,210,1) 0%, rgba(1,99,210,1) 100%); 
}

.gaming-peripherals-gradient>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1) a {
    color: white;
}

.gaming-peripherals-gradient>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1) {
    font-size: 1.25rem;
}

.shop-by-brands-gradient>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1) {
    display: flex;
    height: var(--default-title-bar-height);
    padding: 4px 15px;
    justify-content: space-between;
    align-items: center;
    border-radius: 4px;
    color: white;
    font-weight: 500;
    background: rgb(243,185,23);
    background: linear-gradient(246deg, rgba(243,185,23,1) 0%, rgba(255,0,144,1) 100%); 
}
.shop-by-brands-gradient>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1) {
    font-size: 1.25rem;
}

.gaming-bundle-gradient>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1) {
    display: flex;
    height: var(--default-title-bar-height);
    padding: 4px 15px;
    justify-content: space-between;
    align-items: center;
    border-radius: 4px;
    color: white;
    font-weight: 500;
    background: rgb(242,41,73);
    background: linear-gradient(119deg, rgba(242,41,73,1) 0%, rgba(119,1,210,1) 100%); 
}

.gaming-bundle-gradient>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1) a {
    color: white;
}

.gaming-bundle-gradient>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1) {
    font-size: 1.25rem;
}

.rekomendasi-kamu-gradient>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1) {
    display: flex;
    height: var(--default-title-bar-height);
    padding: 4px 15px;
    justify-content: space-between;
    align-items: center;
    border-radius: 4px;
    color: white;
    font-weight: 500;
    background: rgb(242,41,73);
    background: linear-gradient(119deg, rgba(242,41,73,1) 0%, rgba(243,185,23,1) 100%); 
}

.rekomendasi-kamu-gradient>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1) {
    font-size: 1.25rem;
}

@media screen and (max-width: 768px) {
    .custom-pc-pilihan-gradient>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1),
    .gaming-peripherals-gradient>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1),
    .shop-by-brands-gradient>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1),
    .gaming-bundle-gradient>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1),
    .rekomendasi-kamu-gradient>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1) {
        font-size: 12px;
    }
    
    .custom-pc-pilihan-gradient>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(2),
    .gaming-peripherals-gradient>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(2),
    .shop-by-brands-gradient>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(2),
    .gaming-bundle-gradient>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(2),
    .rekomendasi-kamu-gradient>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(2) {
        font-size: 10px;
    }
    
}

/*  */


/* Carousel Content */
/* parent: carousel-product-card */

.carousel-product-card {
    display: flex;
    flex-direction: column;
    /* justify-content: space-between; */ /* Removed to allow content wrapper to grow naturally */
    align-content: space-between;
    background: #F8F8F8;
    border-top: 3px solid white;
    height: 100%; /* Make card fill the height allocated by the parent flex container (carousel row) */
}

.carousel-product-card:hover {
    /* transform: scale(0.95) */
    border-top: 3px solid blue;
}

.carousel-product-card .card-image-wrapper a,
.carousel-product-card .card-image-wrapper a img,
.carousel-product-card .card-image-wrapper {
    width: 100%;
}

.carousel-product-card .card-image-wrapper img {
    max-width: 100%;
    max-height: 260px;
    object-fit: cover;
    aspect-ratio: 300 / 258;
    background: #f4f4f4;
    transition: all 0.2s;
}

@media screen and (max-width: 768px) {
    .carousel-product-card .card-image-wrapper img {
        max-height: 260px;
    }

    /* .carousel-product-card { */ /* Removed fixed height */
        /* height: 455px; */
    /* } */
}

.carousel-product-card .card-content-wrapper {
    position: relative;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* height: 100%; */ /* Replaced with flex-grow */
    flex-grow: 1; /* Allow content wrapper to expand vertically */
}

.carousel-product-card .card-content-wrapper .card-title a {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.carousel-product-card .card-badge-ready {
  position: absolute;
  top: -16px;
  background: #00B712;
  padding: 2px 6px;
  border-radius: 4px;
  color: white;
  font-weight: bold;
}

.carousel-product-card .add_to_cart_inline del,
.carousel-product-card .add_to_cart_inline ins{
  display: none;
}

.carousel-product-card .card-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: end !important;
    height: 50px;
    margin-top: auto; /* Push actions to the bottom */
}

.carousel-product-card .card-actions p a,
.carousel-product-card .card-actions button {
    height: 40px !important;
    border-radius: 6px !important;
}

.carousel-product-card .card-actions p {
    display: flex;
    margin-bottom: 0px !important;
}

.carousel-product-card .card-share-button {
    all: unset;
    height: 50px;
    padding: 0 22px;
    background: #E5E5E5;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.5s
}

.carousel-product-card .card-share-button:hover {
    background: #E1E5EC;
    transform: scale(1.1);
}

.carousel-product-card .card-price {
    display: flex;
    flex-direction: column;
    margin-top: -0px; /* This might need adjustment depending on desired spacing */
    line-height: 24px
  }

  .carousel-product-card .card-price ins {
    display: flex;
    background: transparent;
    color: black;
    font-weight: 500;
  }

  .carousel-product-card .card-price ins:after {
      content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14.5' height='24.5' viewBox='0 0 32.5 41.507'%3E%3Cg id='discount_tag' data-name='discount tag' transform='translate(-2.5, -5)'%3E%3Cg id='Group_894' data-name='Group 894' transform='translate(-1092 -577)'%3E%3Cg id='Icon_material-discount' data-name='Icon material-discount' transform='translate(1094.5 577)'%3E%3Cpath id='Path_1280' data-name='Path 1280' d='M22.171,34.694,4.5,16.815v3.653a3.612,3.612,0,0,0,1.065,2.575L19.626,37.269a3.587,3.587,0,0,0,5.108,0L35.944,25.928a3.69,3.69,0,0,0,0-5.168Z' transform='translate(-4.5 3.17)' fill='%23f3b917'/%3E%3Cpath id='Path_1281' data-name='Path 1281' d='M19.626,31.323a3.625,3.625,0,0,0,5.108,0L35.944,20.151a3.6,3.6,0,0,0,0-5.092L21.883,1.044A3.689,3.689,0,0,0,19.319,0H8.11A3.615,3.615,0,0,0,4.5,3.6V14.771a3.531,3.531,0,0,0,1.065,2.537ZM12.171,5.4A2.249,2.249,0,1,1,9.915,7.646,2.253,2.253,0,0,1,12.171,5.4Z' transform='translate(-4.5)' fill='%23f22949'/%3E%3C/g%3E%3Ctext id='_' data-name='%25' transform='translate(1104.946 599.964)' fill='%23fff' font-size='17' font-family='Rubik-Bold, Rubik' font-weight='700'%3E%3Ctspan x='0' y='0'%3E%25%3C/tspan%3E%3C/text%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
      /* line-height: 32px; */
      border-radius: 8px;
      text-align: center;
      margin: 0 7px;
  }

  .carousel-product-card .add_to_cart_button {
      background: #0163D2 !important;
      color: #FFFFFF !important;
      text-transform: uppercase !important;
      border-radius: 12px !important;
      padding: 0px 20px !important;
      height: 50px !important;
      justify-content: center;
      align-items: center;
      display: flex !important;
  }
/**/

/*  Footer Terakitan */
.footer-terakitan > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1)  {
    display: flex;
    flex-direction: column;
    color: white;
    gap: 12px;
    padding: 24px;
    background: rgb(1,59,126);
    background: linear-gradient(323deg, rgba(1,59,126,1) 0%, rgba(1,99,210,1) 100%); 
}
.footer-terakitan > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1)  h4,
.footer-terakitan > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1)  p
{
    margin: 0px;
    color: white;
}

.footer-terakitan > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1)  p {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 32px;
}

.footer-terakitan > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1)  p:before {
    content: "";
    display: flex;
    background: #F3B917;
    height: 82px;
    width: 16px;
}


/* Custom Discount Icon */
.price-box-inner ins:after {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14.5' height='24.5' viewBox='0 0 32.5 41.507'%3E%3Cg id='discount_tag' data-name='discount tag' transform='translate(-2.5, -5)'%3E%3Cg id='Group_894' data-name='Group 894' transform='translate(-1092 -577)'%3E%3Cg id='Icon_material-discount' data-name='Icon material-discount' transform='translate(1094.5 577)'%3E%3Cpath id='Path_1280' data-name='Path 1280' d='M22.171,34.694,4.5,16.815v3.653a3.612,3.612,0,0,0,1.065,2.575L19.626,37.269a3.587,3.587,0,0,0,5.108,0L35.944,25.928a3.69,3.69,0,0,0,0-5.168Z' transform='translate(-4.5 3.17)' fill='%23f3b917'/%3E%3Cpath id='Path_1281' data-name='Path 1281' d='M19.626,31.323a3.625,3.625,0,0,0,5.108,0L35.944,20.151a3.6,3.6,0,0,0,0-5.092L21.883,1.044A3.689,3.689,0,0,0,19.319,0H8.11A3.615,3.615,0,0,0,4.5,3.6V14.771a3.531,3.531,0,0,0,1.065,2.537ZM12.171,5.4A2.249,2.249,0,1,1,9.915,7.646,2.253,2.253,0,0,1,12.171,5.4Z' transform='translate(-4.5)' fill='%23f22949'/%3E%3C/g%3E%3Ctext id='_' data-name='%25' transform='translate(1104.946 599.964)' fill='%23fff' font-size='17' font-family='Rubik-Bold, Rubik' font-weight='700'%3E%3Ctspan x='0' y='0'%3E%25%3C/tspan%3E%3C/text%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
    line-height: 32px;
    border-radius: 8px;
    text-align: center;
    margin: 0 4px;
}

.price-box-inner {
    display: flex !important;
    flex-direction: column;
}

.price-box-inner ins {
    display: flex !important;
}

.card-content-wrapper .card-title {
    font-size: 1rem;
    font-weight: 400;
}