/*A spending goal és ajándék goal Z-indexének módosítása, hogy a mobil menü alatt maradjon*/
@media (max-width: 768px) {
  .merchant-spending-goal-widget__regular,
  .merchant-free-gifts-widget {
    z-index: 100;
  }
}


/* Fentebb helyezi a Spending Goal widgetet, hogy ne ütközzön a mobil menüvel */
.merchant-spending-goal-widget__regular {
    bottom: 65px;
}

/*<------ Buy X get Y fixes ------->*/

/*Add to cart*/
button.button.merchant-bogo-add-to-cart {
    background-color: var(--dark);
    color: var(--light);
}

/*Padding fixes*/
.merchant-bogo-product-x {
    padding: 10px 10px 0px;
}

/*Terméknév stílusok*/
.merchant-bogo-product p a {
  font-family: "Poppins";
  font-weight: 700;
  text-transform: uppercase;
  color: var(--dark);
}

/*címke formázás*/
.merchant-bogo-product-label {
    border-radius: 0px;
}
/* ---- Ár sorrendjének megváltoztatása ---- */

/* A jobb oldali, csak árakat tartalmazó doboz flexbox beállításai */
.merchant-bogo-product-price {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* A bal oldali, címet és árakat is tartalmazó doboz */
.merchant-bogo-product-contents {
    display: flex;
    flex-wrap: wrap; /* Lehetővé teszi, hogy az elemek új sorba törjenek */
    row-gap: 5px;    /* Térköz a cím sora és az árak sora között */
    column-gap: 10px;/* Térköz az árak között */
}

/* A bal oldalon a CÍM-et 100% szélességűre állítjuk,
   hogy az árak mindenképpen alá kerüljenek. */
.merchant-bogo-product-contents {
    flex-basis: 100%; /* A cím elfoglalja a teljes rendelkezésre álló szélességet */
    order: 1;         /* 1. elem a sorrendben */
}

.woocommerce-loop-product__title {
    flex-basis: 100%; 
    order: -1; 
}

/* Az ÚJ ÁR (<ins>) stílusai és sorrendje mindkét oldalon */
.merchant-bogo-product-contents ins,
.merchant-bogo-product-price ins {
    order: 2; /* 2. elem a sorrendben (az árak közül az első) */
    color: var(--primary);
    font-weight: 700;
    text-decoration: none;
}

/* A RÉGI ÁR (<del>) sorrendje mindkét oldalon */
.merchant-bogo-product-contents del,
.merchant-bogo-product-price del {
    order: 3; /* 3. elem a sorrendben */
}

/*<------ Complementary items fixes ------->*/

.merchant-complementary-products-product-single-page.merchant-widget-layout-compact .product-checkbox input[type="checkbox"] {
    height: 26px;
    width: 26px;
}

.merchant-complementary-products-product-single-page {
    margin: 0 auto 0;
}

/* --- KIEGÉSZÍTŐ TERMÉKEK RÁCSOS ELRENDEZÉSE --- */

.merchant-complementary-products-product-single-page.merchant-widget-layout-compact .product-image a img {
    width: 50px;
}

.merchant-complementary-products-product-single-page.merchant-widget-layout-compact .product-title {
    font-family: "Poppins";
    font-weight: 700;
    text-transform: uppercase;
    color: var(--dark);
}
/* 1. A fő konténer (a sor) átalakítása grid-dé */
.merchant-complementary-products-product-single-page.merchant-widget-layout-compact .product-details {
    display: grid;
    grid-template-columns: max-content 1fr; /* 1. oszlop: a kép szélessége, 2. oszlop: a maradék hely */
    grid-template-rows: auto auto;          /* Két sor, automatikus magassággal */
    align-items: center;                    /* Elemek függőleges középre igazítása */
    column-gap: 15px;                       /* Térköz az oszlopok (kép és szöveg) között */
    row-gap: 2px;                           /* Térköz a sorok (cím és ár) között */
}

/* 2. A kép elhelyezése a rácsban */
.merchant-complementary-products-product-single-page.merchant-widget-layout-compact .product-image {
    grid-row: 1 / span 2; /* A kép átnyúlik mindkét soron */
    margin: 0;
}

/* 3. A cím elhelyezése (automatikusan jó helyre kerül) */
.merchant-complementary-products-product-single-page.merchant-widget-layout-compact .product-title {
    margin: 0;
    font-size: 15px;
}

/* 4. Az árak elrendezése és stílusai */
.merchant-complementary-products-product-single-page.merchant-widget-layout-compact .product-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

/* Akciós ár */
.merchant-complementary-products-product-single-page.merchant-widget-layout-compact .product-price ins {
    font-weight: 700;
    color: var(--primary);
    text-decoration: none;
}

/* Eredeti ár */
.merchant-complementary-products-product-single-page.merchant-widget-layout-compact .product-price del {
    font-size: 0.9em;
    color: #888;
}

/*Ne törjön meg mobilon*/
@media (max-width: 768px) {
  .merchant-complementary-products-product-single-page.merchant-widget-layout-compact .product-row {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
  }
}

.merchant-complementary-products-product-single-page.merchant-widget-layout-compact .product-title a:hover {
  color: var(--primary-80);
}


/*<------ Frequently Bought Together fixes ------->*/

/*Főcím*/

h3.merchant-frequently-bought-together-title {
    font-family: "Poppins";
    font-size: var(--text-xl);
}

/*Add to cart Gomb fix*/
  .merchant-frequently-bought-together-bundle-offer {
    max-width: 300px;
    gap: var(--space-2xs);
  }

  .merchant-add-bundle-to-cart {
  padding-top: var(--space-s)!important;
  padding-right: var(--space-m)!important;
  padding-bottom: var(--space-s)!important;
  padding-left: var(--space-m)!important;
  background-color: var(--dark)!important;
  color: var(--light)!important;;
}

/*Termékcím fix*/
.woocommerce-loop-product__title {
  font-family: "Poppins";
  font-weight: 700;
  text-transform: uppercase;
  font-size: var(--text-s);
}

.woocommerce-loop-product__title a {
    color: var(--dark);
}

.merchant-frequently-bought-together-bundle-product .include-product:checked {
    background: var(--dark);
}

/*Checkbox fix*/
.merchant-frequently-bought-together-bundle-product .include-product {
    width: 30px;
    height: 28px;
}

/*Termékár - Egyedülálló fix*/
div.merchant-frequently-bought-together-bundle-product-price {
    font-weight: 800;
    color: var(--dark-60);
    font-size: var(--text-m);
}

/*Csomag összesen cím*/
p.merchant-frequently-bought-together-bundle-total {
    font-family: "Poppins";
    font-weight: 700;
    text-transform: uppercase;
    font-size: var(--text-m);
    color: var(--dark);
}

/*Csomag ár*/
/* A szülő konténer beállítása */
p.merchant-frequently-bought-together-bundle-total-price {
  display: flex;
  align-items: baseline; /* A szövegeket az alapvonalukhoz igazítja */
  gap: 10px;             /* Térközt hoz létre az árak között */
}

/* Az akciós ár előre helyezése és kiemelése */
p.merchant-frequently-bought-together-bundle-total-price ins.mrc-fbt-total-discounted-price {
  order: -1; /* Ezzel kerül a sor elejére */
  color: var(--primary);
  font-weight: 700;
  text-decoration: none; /* Eltávolítja az alapértelmezett aláhúzást */
}

/* Az eredeti ár halványítása */
p.merchant-frequently-bought-together-bundle-total-price del.mrc-fbt-total-price {
  font-size: 0.9em;
  color:  var(--dark-60);
}

/* Megtakarítás */
.merchant-frequently-bought-together-bundle-save {
  color: var(--base-90);
  font-size: var(--text-xs);
  font-weight: 700;
  font-style: normal;
}

/* + jel javítása mobilon*/
@media (max-width: 767px) {

    /* 1. A BELSŐ plusz ikont visszaállítjuk a normál elrendezésbe */
    .merchant-frequently-bought-together-bundle .plus-icon .bundle-product-plus {
        position: static !important; /* Ezzel megszűnik az átfedés! */
    }

    /* 2. A KÜLSŐ plusz ikon konténerét pozicionáljuk és térközt adunk neki */
    .merchant-frequently-bought-together-bundle-products .plus-icon {
        width: 100%;         /* Biztosítja, hogy elfoglalja a teljes sort */
        padding-left: 28px;  /* A bal oldali behúzás, amit már beállítottál */
        margin: 15px 0;      /* Függőleges térköz, hogy ne érjen össze a termékekkel */
        text-align: left;    /* A + jel igazítása a konténeren belül */
    }
    
}