/* Shared visual design for the `.new_item` product card component
   (rendered by buildProductCardHTML() in theme/js/main.js).

   Used by:
     - home/indexx.php        -> .new_items .new_item            (grid)
     - items/item-detaill.php -> .section_five .new_items .new_item (carousel)

   Only the card's own look (title, price/price-chip, old/new price,
   widths badge, image sizing, "Place Your Order" button) lives here.
   Anything about the surrounding container - grid vs horizontal
   carousel, fixed card height, hover/in-view reveal timing, mobile
   breakpoints - is intentionally kept in each page's own <style> block,
   since those differ on purpose between the two contexts. */

.new_item .widths {
    display: flex;
    align-items: center;
    gap: 10px;
}

.new_item .widths .width {
    border-radius: 50px;
    width: 63px;
    height: 32px;
    padding: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #e3e2e4b5;
}

.new_item img {
    width: 60%;
    align-self: center;
    margin: 10px 0 30px 0;
}

.new_item .title {
    font-size: 19px;
    font-weight: bold;
    color: var(--primaryText);
    margin: 0;
}

.new_item .price {
    color: #C1452E;
    font-size: 16px;
    font-weight: bold;
    margin: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 4px;
    column-gap: 14px;
}

/* Every weight variant's price is its own chip so several of them can sit
   side-by-side (wrapping only if the card is too narrow), instead of each
   variant stacking on its own line and growing the card taller. */
.new_item .price .price-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.new_item .price .price-chip:not(:first-child) {
    position: relative;
    padding-left: 14px;
}

.new_item .price .price-chip:not(:first-child)::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 16px;
    background: #d8d5d1;
}

.new_item .old-price {
    color: #999;
    text-decoration: line-through;
    font-size: 16px;
}

.new_item .new-price {
    color: #C1452E;
    font-size: 22px;
    font-weight: bold;
}

.new_item .link {
    position: relative;
    overflow: hidden;
    isolation: isolate;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    width: fit-content;
    height: 40px;
    padding: 10px 14px;

    background: #fff;
    color: var(--primary);
    border: 2px solid #fff;
    border-radius: 20px;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
}

.new_item .link span {
    position: relative;
    z-index: 2;
}

.new_item .link .angle {
    position: relative;
    z-index: 2;

    width: 30px;
    height: 30px;
    border-radius: 50%;

    display: flex;
    justify-content: center;
    align-items: center;

    background: var(--primary);
}

.new_item .link .angle svg {
    color: #fff;
}

.new_item .link::before {
    content: "";
    position: absolute;

    top: 50%;
    right: 15px;

    width: 30px;
    height: 30px;

    border-radius: 50%;
    background: var(--primary);

    transform: translateY(-50%) scale(0);
    transform-origin: center;

    z-index: 1;
}

.new_item .link:hover::before {
    transform: translateY(-50%) scale(12);
}

.new_item .link:hover span {
    color: #fff;
}