/* 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. */

/* Image now sits flush against the card's top/left/right edges (no padding
   or margin of its own) - the card itself clips it to its border-radius via
   overflow:hidden, already set on every page that uses this component.
   object-fit:cover (not contain) so the artwork fills the full card width
   with no white letterboxing on the sides, cropping top/bottom as needed.
   The text content (title/weights/price/link) moved into .new_item-body,
   which is what carries the padding each page used to put directly on
   .new_item. */
/* Entrance reveal for cards inserted dynamically via JS (fetch +
   buildProductCardHTML() in theme/js/main.js). Cards used to rely on
   data-aos="zoom-in", which is a *scroll*-triggered reveal - it only
   played once AOS itself decided the card had scrolled into view.

   An earlier version of this fix played the reveal once, immediately,
   the instant the card was inserted into the DOM (a plain @keyframes
   animation with no data-aos). That removed the AOS race condition, but
   it also removed the scroll-triggered part of the effect: since the
   products fetch usually resolves within milliseconds of page load -
   long before a visitor has scrolled anywhere near the Products section,
   which sits well down the page - the animation had already finished
   playing before anyone could ever see it. It looked like the entrance
   animation was simply gone.

   This version keeps the "reveal on scroll" behavior AOS used to give,
   but drives it with a plain IntersectionObserver (see home/index.php's
   observeEntrance() and item-detail.php's equivalent) instead of AOS:
   .card-enter is the permanent hidden/offset starting state, and
   .card-visible is added by the observer the first time each card
   actually scrolls into the viewport, which triggers this transition.
   No library, and no dependency on fetch/script-load timing either way -
   the observer is attached after the cards exist, so it always sees
   their real, current position. */
.new_item.card-enter {
    opacity: 0;
    transform: scale(.94) translateY(18px);
    transition: opacity .5s ease, transform .5s ease;
}

.new_item.card-enter.card-visible {
    opacity: 1;
    transform: scale(1) translateY(0);
}

.new_item img {
    display: block;
    width: 100%;
    height: 266px;
    object-fit: cover;
    object-position: top;
    background: #fff;
    margin: 0;
}

.new_item-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    gap: 5px;
    min-height: 0;
}

.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 .widths .width span{
    font-weight: bold;
}

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

.new_item .price {
    color: var(--primary);
    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: var(--primary);
    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;
}