/* Kuké — product carousel, matched to the shop archive card.
   Source images vary in ratio (many older uploads are 598x507 and cannot be
   cropped to 600x600 because WP will not upscale), so the square is enforced
   in the browser with aspect-ratio + object-fit rather than by image size. */

/* stretch every slide to the tallest in the row */
.eael-product-carousel-wrap .swiper-wrapper,
.eael-product-carousel-wrap .swiper-slide{ height:auto!important; }
.swiper-slide.product{ display:flex!important; height:auto!important; }

/* the card itself */
.eael-product-carousel{
 display:flex!important; flex-direction:column!important; width:100%;
 background:#F4F4F5; border-radius:12px; overflow:hidden;
}

/* square image frame — this is what equalises the cards */
.eael-product-carousel .product-image-wrap,
.eael-product-carousel .image-wrap{ width:100%; }
.eael-product-carousel .image-wrap{
 position:relative; aspect-ratio:1/1; overflow:hidden; background:#FFFFFF;
}
.eael-product-carousel .image-wrap > a{ display:block; width:100%; height:100%; }
.eael-product-carousel .image-wrap img{
 width:100%!important; height:100%!important;
 object-fit:cover!important; object-position:center!important;
 display:block; max-width:none;
}

/* details fill the remaining height so titles and prices line up */
.eael-product-carousel .product-details-wrap{
 flex:1 1 auto; display:flex; flex-direction:column; justify-content:flex-start;
 padding:18px 18px 22px; text-align:left;
}
.eael-product-carousel .eael-product-title h2,
.eael-product-carousel .eael-product-title a{
 font-family:'PT Serif',serif!important; font-weight:700!important;
 font-size:17px!important; line-height:1.4!important; color:#1A202C!important;
 margin:0 0 8px!important;
}
.eael-product-carousel .eael-product-price{
 margin-top:auto; font-family:'Nunito Sans',sans-serif!important;
 font-size:15px!important; color:#4A5568!important;
}
.eael-product-carousel .eael-product-price del{ opacity:.55; margin-right:6px; }
.eael-product-carousel .eael-product-price ins{ text-decoration:none; color:#1A202C!important; font-weight:700; }

/* sale badge: blush pill, top-right — same read as the shop archive */
.eael-product-carousel .eael-onsale{
 position:absolute!important; top:10px!important; right:10px!important;
 left:auto!important; bottom:auto!important;
 transform:none!important; rotate:none!important;
 width:auto!important; height:auto!important; min-width:0!important; min-height:0!important;
 padding:6px 12px!important; border-radius:4px!important;
 background:#F4BBAD!important; color:#1A202C!important;
 font-family:'Nunito Sans',sans-serif!important; font-weight:700!important;
 font-size:12px!important; line-height:1!important; letter-spacing:.02em;
 text-align:center!important; box-shadow:none!important; border:0!important;
}
.eael-product-carousel .eael-onsale::before,
.eael-product-carousel .eael-onsale::after{ display:none!important; content:none!important; }

@media (max-width:768px){
 .eael-product-carousel .product-details-wrap{ padding:14px 14px 18px; }
 .eael-product-carousel .eael-product-title h2,
 .eael-product-carousel .eael-product-title a{ font-size:15px!important; }
}
/* Reserve two lines for the title so a one-line name and a two-line name
   produce the same card height (5 Shades of Chocolate wraps, most do not). */
.eael-product-carousel .eael-product-title{
 min-height:2.8em;               /* 2 x 1.4 line-height */
 display:flex; align-items:flex-start;
}
.eael-product-carousel .eael-product-title a{ display:block; width:100%; }
.eael-product-carousel .eael-product-title h2{
 display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
 overflow:hidden;                /* never a third line */
}
@media (max-width:768px){
 .eael-product-carousel .eael-product-title{ min-height:2.8em; }
}
/* Range prices ("RM124.00 - RM198.00") wrap to two lines while single prices
   do not, which left a 16px height difference. Reserve two lines here too. */
.eael-product-carousel .eael-product-price{
 line-height:1.5!important;
 min-height:3em;                 /* 2 x 1.5 line-height */
 display:flex; flex-wrap:wrap; align-items:flex-start; align-content:flex-start; gap:0 4px;
}
/* Two-line titles measured 64px vs 48px for one line, so min-height:2.8em was
   too small. Fix the box to the two-line height (content is clamped to 2). */
.eael-product-carousel .eael-product-title{ min-height:64px!important; }
@media (max-width:768px){
 .eael-product-carousel .eael-product-title{ min-height:56px!important; }
}

/* Pagination dots: match the logo carousel exactly (12px circles, #ccc / black)
   instead of EAEL's default 20x4 purple dashes (#5F3AE0). */
.eael-product-carousel-wrap .swiper-pagination-bullet,
.swiper-pagination.dots-preset-1 .swiper-pagination-bullet{
 width:12px!important; height:12px!important;
 border-radius:50%!important; background:#CCCCCC!important;
 opacity:1!important; margin:0 6px!important; border:0!important;
}
.eael-product-carousel-wrap .swiper-pagination-bullet-active,
.swiper-pagination.dots-preset-1 .swiper-pagination-bullet-active{
 background:#000000!important; width:12px!important; height:12px!important;
 border-radius:50%!important; opacity:1!important;
}

/* EAEL ships WPDeveloper brand purple #5F3AE0 as its default accent. Kuke uses
   blush + grey only, so remap every purple surface in the carousel. */
.eael-product-carousel .icons-wrap,
.eael-product-carousel .icons-wrap.block-style,
.eael-product-carousel .image-hover-wrap .icons-wrap{
 background:#F4BBAD!important; border:0!important;
}
.eael-product-carousel .icons-wrap li,
.eael-product-carousel .icons-wrap li a,
.eael-product-carousel .icons-wrap a,
.eael-product-carousel .button,
.eael-product-carousel .add_to_cart_button,
.eael-product-carousel a.button,
.eael-product-carousel .eael-product-buy-now,
.eael-product-carousel .buy-now{
 background:#F4BBAD!important; background-color:#F4BBAD!important;
 color:#1A202C!important; border-color:#F4BBAD!important;
 font-family:'Nunito Sans',sans-serif!important; font-weight:700!important;
 box-shadow:none!important; border-radius:4px!important;
}
.eael-product-carousel .icons-wrap li a:hover,
.eael-product-carousel .button:hover,
.eael-product-carousel .add_to_cart_button:hover,
.eael-product-carousel .eael-product-buy-now:hover{
 background:#1A202C!important; background-color:#1A202C!important; color:#FFFFFF!important;
}
.eael-product-carousel .icons-wrap svg,
.eael-product-carousel .icons-wrap i,
.eael-product-carousel .icons-wrap li a i{ color:#1A202C!important; fill:#1A202C!important; }

/* NotificationX conv-theme-ten renders the product name in #5D3AB4 purple and
   its CTA in the same family. Theme meta is ignored (wrapper carries
   .no-advance-edit), so remap here. Kuke uses blush + grey only. */
.nx-notification .nx-second-row,
.nx-notification .nx-second-row span,
.nx-notification .nx-second-row a{
 color:#1A202C!important; font-weight:700!important;
}
.nx-notification .nx-first-row span{ color:#4A5568!important; }
.nx-notification a{ color:#1A202C!important; }
.nx-notification .notificationx-button,
.nx-notification .nx-button,
.nx-notification .button-link .notificationx-button,
.nx-notification [class*='button'] a,
.nx-notification a[class*='button']{
 background:#F4BBAD!important; background-color:#F4BBAD!important;
 color:#1A202C!important; border-color:#F4BBAD!important;
 border-radius:4px!important; font-weight:700!important; box-shadow:none!important;
}

/* The NotificationX CTA is .notificationx-link inside .notificationx-link-wrapper.
   Its background is #5612D6 (a fourth WPDeveloper purple). Setting only the text
   colour earlier left ink on purple at 1.91:1 - set BOTH here. Blush + ink = 9.66:1. */
.nx-notification .notificationx-link,
.notificationx-link-wrapper .notificationx-link,
a.notificationx-link{
 background:#F4BBAD!important; background-color:#F4BBAD!important;
 background-image:none!important;
 color:#1A202C!important;
 border:0!important; border-radius:4px!important;
 font-family:'Nunito Sans',sans-serif!important; font-weight:700!important;
 box-shadow:none!important; text-decoration:none!important;
}
.nx-notification .notificationx-link:hover,
a.notificationx-link:hover{
 background:#1A202C!important; background-color:#1A202C!important; color:#FFFFFF!important;
}

/* ---- Home "Curated List" category cards ----
   Whole card is one <a>, so the entire block is clickable, not just the title. */
.kuke-cat-card{
 display:flex; flex-direction:column; height:100%;
 background:#FFFFFF; border:1px solid #ECECEE; border-radius:12px;
 padding:28px 26px 24px; text-decoration:none!important;
 transition:box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}
.kuke-cat-card:hover{
 box-shadow:0 15px 25px -7px rgba(0,0,0,.10);
 transform:translateY(-3px); border-color:#F4BBAD;
}
.kuke-cat-card__title{
 font-family:'PT Serif',serif; font-weight:700; font-size:22px; line-height:1.35;
 color:#1A202C; margin:0 0 10px; display:block;
}
.kuke-cat-card__desc{
 font-family:'Nunito Sans',sans-serif; font-size:15px; line-height:1.7;
 color:#4A5568; margin:0 0 18px; display:block; flex:1 1 auto;
}
.kuke-cat-card__cta{
 font-family:'Nunito Sans',sans-serif; font-weight:700; font-size:14px;
 color:#1A202C; display:inline-flex; align-items:center; gap:8px; margin-top:auto;
 border-top:1px solid #F4F4F5; padding-top:14px;
}
.kuke-cat-card__cta span{ color:#F4BBAD; transition:transform .22s ease; display:inline-block; }
.kuke-cat-card:hover .kuke-cat-card__cta span{ transform:translateX(4px); }
.kuke-cat-card:focus-visible{ outline:2px solid #1A202C; outline-offset:3px; }
@media (max-width:768px){
 .kuke-cat-card{ padding:22px 20px 20px; }
 .kuke-cat-card__title{ font-size:19px; }
}
/* Cards must fill their column so a shorter description does not shrink the card. */
.elementor-column:has(.kuke-cat-card) .elementor-widget-wrap{ height:100%; align-content:stretch; }
.elementor-widget-html:has(.kuke-cat-card){ height:100%; }
.elementor-widget-html:has(.kuke-cat-card) > .elementor-widget-container{ height:100%; }
.kuke-cat-card{ min-height:200px; }

/* ---- NX CTA layout ----
   conv-theme-ten positions .notificationx-link absolutely, so it escapes the card:
   on desktop it lands over the footer, on mobile it is pushed out of view entirely.
   Put it back in flow so it sits inside the card on every screen. */
.nx-notification .notificationx-link-wrapper{
 position:static!important; display:block!important; margin:10px 0 0!important; width:auto!important;
}
.nx-notification .notificationx-link{
 position:static!important; display:inline-block!important;
 width:auto!important; height:auto!important;
 margin:0!important; padding:9px 16px!important;
 font-size:13px!important; line-height:1.2!important; white-space:nowrap;
}
.nx-notification .notificationx-inner{ align-items:flex-start!important; }

/* Card sizing: the notification is configured at 500px, which does not fit a phone. */
@media (max-width:600px){
 .nx-container .nx-notification{
  max-width:calc(100vw - 24px)!important; width:calc(100vw - 24px)!important;
  left:12px!important; right:12px!important; bottom:16px!important;
  transform:none!important; zoom:1!important;
 }
 .nx-notification .notificationx-content p{ font-size:14px!important; line-height:1.45!important; }
 .nx-notification .nx-second-row span{ font-size:15px!important; }
 .nx-notification .notificationx-image img{ width:52px!important; height:52px!important; }
 .nx-notification .notificationx-link{ padding:10px 18px!important; font-size:14px!important; }
}