.aiz-thecore .rounded-75{
     border-radius: 0.75rem !important;
}

/* ── Price alignment: hide original price, reveal on card hover ── */
/* Keeps all product cards at equal height regardless of discount   */
.disc-amount {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.08s ease !important;
}
.aiz-card-box:hover .disc-amount {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.22s ease !important;
}

/* slider */
.thecore-square-box {
    width: 100%;
    border-radius: 0.5rem; 
}

.thecore-square-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;        /* crop the overflow */
    object-position: center;  /* keep centered */
}

/* Countdown Circle */
.aiz-count-down-circle {
    display: flex;
    justify-content: center;
    min-height: 100%;
    background-color: rgba(255, 255, 255, 0.6)!important;
    padding: 1rem;
    box-shadow: 0px 20px 30px rgba(0, 0, 0, 0.16);
}

.aiz-count-down-circle #time {
    display: flex;
}

.aiz-count-down-circle #time .circle {
    position: relative;
    width: 55px;
    height: 55px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.aiz-count-down-circle #time .circle svg {
    position: relative;
    width: 55px;
    height: 55px;
    transform: rotate(270deg);
}

.aiz-count-down-circle #time .circle svg circle {
    width: 100%;
    height: 100%;
    fill: transparent;
    stroke-width: 1;
    stroke: #f7f2f2;
    stroke-linecap: round;
    transform: translate(5px, 5px);
}

.aiz-count-down-circle #time .circle svg circle:nth-child(2) {
    stroke: #000000;
    stroke-width: 2;
    stroke-dasharray: 138;
    stroke-dashoffset: 138;
}



.aiz-count-down-circle #time div {
    position: absolute;
    text-align: center;
    font-weight: 700;
    color: #1b1b28;
    font-size: 14px;
}

.aiz-count-down-circle #time div span {
    position: absolute;
    transform: translateX(-50%) translateY(-10%);
    font-size: 8px;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

[dir="rtl"] .aiz-count-down-circle #time div span {
    transform: translateX(50%) translateY(-10%);
}

@media (max-width: 767px) {

     .aiz-count-down-circle {
        box-shadow: 0px 3px 20px rgb(0 0 0 / 16%);
    }

}


/* Hide arrows by default */
.hot-categories .carousel-arrow .slick-arrow {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
}

/* Show arrows on hover */
.hot-categories .carousel-arrow:hover .slick-arrow {
    opacity: 1;
    visibility: visible;
}
.aiz-carousel .slick-arrow {
    width: 24px !important;
    height: 64px !important;
    background: #ffffff00;
    box-shadow: 0 0 1px 1px rgba(255, 255, 255, 0), 0 3px 1px 0 rgba(255, 255, 255, 0);
}
.aiz-carousel .slick-arrow:hover{
    background:#ffffff;
    box-shadow: 0 0 1px 1px rgba(20, 23, 28, 0.1), 0 3px 1px 0 rgba(20, 23, 28, 0.1);
}
.aiz-thecore .featured-categories .aiz-carousel .slick-next {
    right: -15px !important;
}
.aiz-thecore .featured-categories .aiz-carousel .slick-prev {
    left: -15px !important;
}


/* carosel arrow btn */

@media (max-width: 576px) {
    .aiz-thecore .featured-categories .slick-list {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .aiz-thecore .featured-categories .aiz-carousel .slick-next,
    .aiz-thecore .featured-categories .aiz-carousel .slick-prev{
        display: none!important;
    }
}
.aiz-thecore .featured-categories .slick-list {
    margin-left: 3rem;
    margin-right: 3rem;
}

.aiz-thecore .todays-deal .slick-list {
    margin-left: 3rem !important;
    margin-right: 3rem !important;
}

.aiz-thecore .featured-categories .aiz-carousel .slick-next,
.aiz-thecore .todays-deal .aiz-carousel .slick-next {
    border-radius: 5px 0 0 5px !important;
}

.aiz-thecore .featured-categories .aiz-carousel .slick-prev,
.aiz-thecore .todays-deal .aiz-carousel .slick-prev {
    border-radius: 0 5px 5px 0 !important;
}

.aiz-thecore .featured-categories .aiz-carousel .slick-next i,
.aiz-thecore .todays-deal .aiz-carousel .slick-next i {
    display: inline-block;
    margin-right: 1rem !important;
    transition: transform 0.3s ease;
}

.aiz-thecore .featured-categories .aiz-carousel .slick-next:hover i,
.aiz-thecore .todays-deal .aiz-carousel .slick-next:hover i {
    transform: translateX(5px);
}

.aiz-thecore .featured-categories .aiz-carousel .slick-prev i,
.aiz-thecore .todays-deal .aiz-carousel .slick-prev i {
    display: inline-block;
    margin-left: 0.8rem !important; 
    transition: transform 0.3s ease;
}

.aiz-thecore .featured-categories .aiz-carousel .slick-prev:hover i,
.aiz-thecore .todays-deal .aiz-carousel .slick-prev:hover i {
    transform: translateX(-8px); 
}

/* Hover animation for products */
.hov-animate-outline-2 {
    position: relative;
    border-radius: 0.25rem;
    overflow: hidden;
    /* z-index: 0 creates a stacking context so ::before/::after z-index: 1
       ensures the border always paints on top of any child element that has
       a transform or z-index (e.g. discount badge, wishlist icons). Without
       this, those stacking-context children paint over the right border. */
    z-index: 0;
}

.hov-animate-outline-2::before,
.hov-animate-outline-2::after {
    content: "";
    position: absolute;
    border: 2px solid transparent;
    width: 0;
    height: 0;
    top: 0;
    left: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 1; /* always above children so the border outline is never obscured */
}

.hov-animate-outline-2:hover::before {
    border-top-color: black;
    border-right-color: black;
    width: 100%;
    height: 100%;
    transition:
        width 0.3s ease-out,
        height 0.3s ease-out 0.3s;
}

.hov-animate-outline-2:hover::after {
    border-bottom-color: black;
    border-left-color: black;
    width: 100%;
    height: 100%;
    transition:
        height 0.3s ease-out,
        width 0.3s ease-out 0.3s;
}

/* ---------------------------------------------------------------------------
   Newest Products section — Sale-card hover overflow fix (root cause)
   ---------------------------------------------------------------------------
   Bug: On product cards that carry a sale/discount badge, the wishlist &
   compare icons leak ~3px past the card's right border on hover, and the
   "Ajouter au panier" bar overflows the card by ~8px on each side.

   Root cause (NOT the badge itself — coincidence):
   .carousel-box has flex: 0 1 auto with no explicit width, so it sizes to
   its image content. Sale products happen to be stored as 500x500 webp,
   while non-sale products use 680px+ images. Browser flex min-content
   sizing with images + max-height: 100% resolves the sale-card
   .carousel-box to ~244px, while the parent .product-card is 228px —
   so the absolutely-positioned hover icons (right:5px) and the w-100
   cart button render against a 244px container that overflows the card.

   Fix: constrain .carousel-box to the width of its parent .product-card.
   Scoped to .hov-animate-outline-2 (the home-page newest-products cards)
   so the dashboard, classified, seller-side, and refund/warranty/shipping
   note carousels — which also use .carousel-box — are not affected.
   box-sizing keeps the .aiz-carousel.gutters-N padding inside the 100%. */
.hov-animate-outline-2 .carousel-box {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
}

/* ---------------------------------------------------------------------------
   Newest Products section — Wishlist/Compare icon spacing fix (desktop only)
   ---------------------------------------------------------------------------
   home_product_box.blade.php places the discount badge inside a full-bleed
   absolute wrapper (top:0; left:0; right:0; bottom:0) that flex-centers the
   pill. That wrapper has no z-index/transform on purpose — without it the
   badge would paint over the .hov-animate-outline-2 right border.
   But when that wrapper is present, the implicit shrink-to-fit width of the
   sibling .absolute-top-right.aiz-p-hov-icon container collapses, and its
   children (the icons) land flush against the card's right border instead
   of the expected 5px gap.
   Fix: force explicit top/right offset on the icon container and zero the
   icon margins, while preserving the 5px gap between the two stacked icons.
   This produces visually identical output to non-sale cards, but the
   positioning is now explicit so sale cards land at the same place.
   Mobile (d-none d-sm-block hides this container under 576px) uses a
   different icon block and is unaffected. */
@media (min-width: 576px) {
    /* Scope: any product card inside .hov-animate-outline-2 (the newest-products
       cards). Not scoped to #newest-products-list because that ID lives on a
       container that gets re-injected via AJAX — safer to scope to the card
       wrapper class that lives directly on every card in this section. */
    .hov-animate-outline-2 .aiz-card-box .absolute-top-right.aiz-p-hov-icon {
        top: 5px !important;
        right: 5px !important;
        /* Explicit width so the shrink-to-fit calculation cannot collapse it.
           36px (icon width) — the icons sit flush against this container's
           edges, and the container itself sits 5px in from the card edge. */
        width: 36px !important;
    }
    .hov-animate-outline-2 .aiz-card-box .absolute-top-right.aiz-p-hov-icon a {
        margin-top: 0 !important;
        margin-right: 0 !important;
    }
    /* Preserve the 5px gap between the wishlist and compare icons */
    .hov-animate-outline-2 .aiz-card-box .absolute-top-right.aiz-p-hov-icon a + a {
        margin-top: 5px !important;
    }
}

/* ---------------------------------------------------------------------------
   Today's Deal — keep the featured card from stretching
   ---------------------------------------------------------------------------
   Today's Deal reuses home_product_box (same card as newest-products) inside a
   single-item carousel (data-items=1) that sits in a narrow column. Without a
   width cap the one card stretches to fill the whole column (~400px on desktop,
   full width on mobile), so the contained image floats in a wide-but-short box
   and the cart bar spans the full width — which reads as unbalanced.

   Fix: cap the card to a normal product-card width and centre it, so Today's
   Deal shows one properly-proportioned card (same look as a Best Selling card)
   instead of a stretched one. Applies at every breakpoint. Scoped to
   .todays-deal so newest-products and Best Selling cards are not affected. */
.todays-deal .hov-animate-outline-2 {
    max-width: 220px;
    margin-left: auto;
    margin-right: auto;
}
.todays-deal .hov-animate-outline-2 .carousel-box {
    max-width: 220px;
}

/* ---------------------------------------------------------------------------
   Compact product card — product-detail sliders only
   ---------------------------------------------------------------------------
   Used by Related Products, Frequently Bought Together, Products from this
   Seller (home_product_box_compact.blade.php). Lighter than the homepage card:
   no full-width "Add to Cart" bar — a small round cart icon sits in the image
   corner (always visible, so it works on touch too). The homepage cards are a
   different partial and are NOT affected by these rules. */
.compact-card {
    overflow: hidden;
    border-radius: 0.25rem;
}
.compact-card .compact-img {
    height: 130px;
}
@media (min-width: 768px) {
    .compact-card .compact-img {
        height: 160px;
    }
}
.compact-card .compact-img img {
    object-fit: contain;
    width: 100%;
    height: 100%;
}
/* Swipeable image gallery inside the card */
.compact-gallery {
    display: flex;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.compact-gallery::-webkit-scrollbar {
    display: none;
}
.compact-slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    scroll-snap-align: start;
    display: block;
}
/* Gallery arrows — a paired control at bottom-centre. Always visible on touch
   (usable directly, without first tapping the card, so nothing is hit by
   accident); on desktop they fade in on card hover to keep things clean. */
.compact-navs {
    position: absolute;
    left: 50%;
    bottom: 8px;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 6;
}
.compact-nav {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    color: #dc3545;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
}
.compact-nav i {
    font-size: 0.95rem;
    line-height: 1;
}
@media (hover: hover) and (pointer: fine) {
    .compact-navs {
        opacity: 0;
        transition: opacity 0.2s ease;
    }
    .compact-card:hover .compact-navs {
        opacity: 1;
    }
}
/* When a card is tapped open (mobile), hide the gallery arrows so they don't
   overlap the revealed cart / compare / wishlist icons. */
.compact-card.compact-revealed .compact-navs {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
/* Action icons (always visible): cart + compare stacked bottom-right,
   wishlist on its own top-right. */
.compact-actions {
    position: absolute;
    right: 8px;
    bottom: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 5;
}
.compact-ic-wish {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 5;
}
[dir="rtl"] .compact-actions,
[dir="rtl"] .compact-ic-wish {
    right: auto;
    left: 8px;
}
.compact-ic {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #111;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22);
    transition: background 0.2s ease;
}
.compact-ic:hover {
    background: var(--primary);
    color: #fff;
}
.compact-ic i {
    font-size: 0.9rem;
    line-height: 1;
}
/* Icons are hidden by default so the cards stay clean and easy on the eyes.
   They are revealed either on hover (mouse / desktop) or on tap (touch), where
   the .compact-revealed class is toggled by JS — see the script in the layout. */
.compact-actions,
.compact-ic-wish {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}
@media (hover: hover) and (pointer: fine) {
    .compact-card:hover .compact-actions,
    .compact-card:hover .compact-ic-wish {
        opacity: 1;
        visibility: visible;
    }
}
.compact-card.compact-revealed .compact-actions,
.compact-card.compact-revealed .compact-ic-wish {
    opacity: 1;
    visibility: visible;
}
/* Name: reserve 2 lines so cards align even with short titles */
.compact-card .compact-name {
    min-height: 36px;
}
/* Price: allow long prices to wrap instead of overflowing the narrow card */
.compact-card .compact-price {
    line-height: 1.3;
    word-break: break-word;
}
.compact-card .compact-price-old {
    color: #9a9a9a;
}

/* ====== Listing-page card hover: animated black outer box ======
   Shop / Search / Category / Brand / Seller-shop wrap each card cell in
   .hov-shadow-out, whose default AizCommerce hover is a big drop-shadow that
   reads like the cart popup. Remove that shadow and draw the SAME animated
   black border the homepage cards use, hugging the whole card: the top+right
   edges grow first, then the bottom+left edges complete the box. Scoped to
   .hov-shadow-out so the homepage cards (which animate on .hov-animate-outline-2)
   are untouched. Added 2026-05-30. */
.hov-shadow-out:hover,
.hov-shadow-out:focus-within {
    box-shadow: none !important;
}
.hov-shadow-out .compact-card {
    position: relative;
    z-index: 0;
}
.hov-shadow-out .compact-card::before,
.hov-shadow-out .compact-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border: 2px solid transparent;
    border-radius: inherit;
    box-sizing: border-box;
    pointer-events: none;
    z-index: 4;
}
.hov-shadow-out:hover .compact-card::before,
.hov-shadow-out.mobile-shadow-active .compact-card::before {
    width: 100%;
    height: 100%;
    border-top-color: #000;
    border-right-color: #000;
    transition: width 0.3s ease-out, height 0.3s ease-out 0.3s;
}
.hov-shadow-out:hover .compact-card::after,
.hov-shadow-out.mobile-shadow-active .compact-card::after {
    width: 100%;
    height: 100%;
    border-bottom-color: #000;
    border-left-color: #000;
    transition: height 0.3s ease-out, width 0.3s ease-out 0.3s;
}

/* ====== Listing-page grid lines: remove the divider borders ======
   Shop / Search / Category / Brand / Seller-shop / Best-selling / In-house /
   Today's deal / Flash-deal grids draw thin divider lines: each card cell has
   border-right + border-bottom and the row has border-top + border-left. Every
   product cell carries .hov-shadow-out, so we clear those borders in one place.
   The :has() rule removes the row's top/left line. Added 2026-05-30. */
.hov-shadow-out {
    border: 0 !important;
}
.row:has(> .hov-shadow-out) {
    border: 0 !important;
}