/* =====================================================================
   Newmarketkart — UI enhancements (additive, non-destructive).
   Loaded after all existing stylesheets in website.blade.php.
   Safe to remove by deleting the <link> tag in the layout.
   ===================================================================== */

/* ---------- Respect users who prefer reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .nmk-reveal,
  .nmk-reveal.nmk-in,
  .popular-products-wrap .popular-products-box,
  .popular-products-wrap .popular-products-box img,
  .shop-category-content-img,
  .deals-carousel-box,
  .banner-img img {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
}

/* ====================================================================
   1) Sticky, condensing header (Amazon-style)
   ==================================================================== */
.custom-header {
  position: sticky;
  top: 0;
  z-index: 1020;
  background-color: #fff;
  transition: box-shadow .25s ease;
  will-change: box-shadow;
}
.custom-header.nmk-scrolled {
  box-shadow: 0 2px 12px rgba(0, 0, 0, .08);
}
.custom-header .header-top {
  transition: max-height .25s ease, padding .25s ease, opacity .2s ease;
  max-height: 80px;
  overflow: hidden;
}
.custom-header.nmk-scrolled .header-top {
  max-height: 0;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  opacity: 0;
  border-bottom-color: transparent;
}

/* ====================================================================
   2) Search bar focus ring
   ==================================================================== */
.cus-search-form {
  transition: border-color .2s ease, box-shadow .2s ease;
}
.cus-search-form:focus-within {
  border-color: #f3a847;
  box-shadow: 0 0 0 3px rgba(243, 168, 71, .35);
}
.search-submit i {
  transition: transform .2s ease;
}
.search-submit:hover i {
  transform: scale(1.15) rotateY(180deg);
}

/* ====================================================================
   3) Product card hover lift + image zoom
   ==================================================================== */
.popular-products-wrap .popular-products-box,
.deals-carousel-box {
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  will-change: transform;
}
.popular-products-wrap .popular-products-box:hover,
.deals-carousel-box:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .10);
  border-color: #f3a847;
}
.popular-products-wrap .popular-products-box .popular-products-box-content {
  position: relative;
  z-index: 1;
  background: #fff;
}
.popular-products-wrap .popular-products-box img,
.deals-carousel-img img {
  transition: transform .35s ease;
}
.popular-products-wrap .popular-products-box:hover img,
.deals-carousel-box:hover .deals-carousel-img img {
  transform: scale(1.06);
}

/* keep the existing product-box-sign reveal in sync, just smoother */
.popular-products-wrap .popular-products-box .product-box-sign,
.deals-carousel-box .product-box-sign {
  transition: opacity .25s ease, right .25s ease, transform .25s ease;
  transform: translateY(-4px);
}
.popular-products-wrap .popular-products-box:hover .product-box-sign,
.deals-carousel-box:hover .product-box-sign {
  transform: translateY(0);
}

/* ====================================================================
   4) "Add to Cart" micro-pop on click
   ==================================================================== */
@keyframes nmkBtnPop {
  0%   { transform: scale(1); }
  40%  { transform: scale(.94); }
  100% { transform: scale(1); }
}
.nmk-btn-pop {
  animation: nmkBtnPop .25s ease;
}

/* ====================================================================
   5) Wishlist heart — idle heartbeat + hover lift + click burst
   ==================================================================== */
@keyframes nmkHeartBurst {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.45); color: #e0245e; }
  70%  { transform: scale(.92); }
  100% { transform: scale(1);  color: #e0245e; }
}
@keyframes nmkHeartBeat {
  0%, 28%, 70%, 100% { transform: scale(1); }
  14%                { transform: scale(1.18); }
  42%                { transform: scale(1.10); }
}

/* gentle idle pulse on every wishlist heart */
.btn.wishlist .fa-heart,
.popular-products-box .wishlist .fa-heart,
.product_delivery + .wishlist .fa-heart {
  display: inline-block;
  transform-origin: center;
  animation: nmkHeartBeat 2.6s ease-in-out infinite;
  color: #c2173d;
  will-change: transform;
}

/* button hover: subtle lift + soft shadow */
.btn.wishlist {
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
}
.btn.wishlist:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(194, 23, 61, .18);
}
.btn.wishlist:hover .fa-heart {
  animation-duration: 1s;
}

/* click burst beats the heartbeat (higher specificity + duration ends quickly) */
.btn.wishlist .fa-heart.nmk-heart-burst,
.popular-products-box .fa-heart.nmk-heart-burst,
.fa-heart.nmk-heart-burst,
.nmk-heart-burst {
  animation: nmkHeartBurst .45s ease;
}

@media (prefers-reduced-motion: reduce) {
  .btn.wishlist .fa-heart,
  .popular-products-box .wishlist .fa-heart {
    animation: none !important;
  }
}

/* ====================================================================
   6) Hero carousel polish
   carousel-fade class added in markup; here we polish controls + dots.
   ==================================================================== */
section.hero-b .carousel-control-prev,
section.hero-b .carousel-control-next {
  opacity: 0;
  transition: opacity .25s ease;
}
section.hero-b:hover .carousel-control-prev,
section.hero-b:hover .carousel-control-next,
section.hero-b .carousel-control-prev:focus,
section.hero-b .carousel-control-next:focus {
  opacity: .85;
}
section.hero-b .carousel-indicators [data-bs-target] {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transition: width .25s ease, background-color .25s ease;
}
section.hero-b .carousel-indicators .active {
  width: 26px;
  border-radius: 12px;
  background-color: #f3a847;
}

/* ====================================================================
   7) Section reveal on scroll (opt-in via .nmk-reveal class)
   ==================================================================== */
.nmk-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s ease, transform .55s ease;
  will-change: opacity, transform;
}
.nmk-reveal.nmk-in {
  opacity: 1;
  transform: none;
}

/* ====================================================================
   8) Skeleton shimmer for lazy images that haven't loaded yet
   ==================================================================== */
@keyframes nmkShimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: 0 0; }
}
img.nmk-shimmer {
  background: linear-gradient(90deg, #f2f2f2 25%, #e9e9e9 37%, #f2f2f2 63%);
  background-size: 400% 100%;
  animation: nmkShimmer 1.4s ease infinite;
}

/* ====================================================================
   9) Category tiles — soft round + bounce
   The site's existing rule sets img to 170x120 with a !important-ish
   weight via specificity. We bump specificity carefully and only restyle
   inside the home owl carousel "shop-category" block.
   ==================================================================== */
.shop-category .shop-category-content .shop-category-content-img {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 140px !important;
  height: 140px !important;
  aspect-ratio: 1 / 1;
  max-width: 140px;
  border-radius: 50% !important;
  overflow: hidden;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #f3e6cf;
  box-shadow:
    0 0 0 4px #fff,
    0 0 0 5px rgba(194, 23, 61, .22),
    0 6px 14px rgba(0, 0, 0, .06);
  transition: transform .25s ease, box-shadow .25s ease;
}
.shop-category .shop-category-content .shop-category-content-img > a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  text-decoration: none;
}
.shop-category .shop-category-content .shop-category-content-img img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  border-radius: 50%;
  transition: transform .35s ease;
}
.shop-category .shop-category-content .shop-category-content-box:hover .shop-category-content-img {
  transform: translateY(-4px) scale(1.04);
  box-shadow:
    0 0 0 4px #fff,
    0 0 0 5px rgba(194, 23, 61, .45),
    0 12px 22px rgba(0, 0, 0, .10);
}
.shop-category .shop-category-content .shop-category-content-box:hover .shop-category-content-img img {
  transform: scale(1.05);
}
@media (max-width: 575px) {
  .shop-category .shop-category-content .shop-category-content-img {
    width: 110px !important;
    height: 110px !important;
    max-width: 110px;
  }
}

/* ====================================================================
   9b) Modern category icons (Lucide inline SVG)
   The Blade partial renders <span class="nmk-cat-icon">…<svg/>…</span>
   inside .shop-category-content-img, so we style the tile + the icon.
   ==================================================================== */
.shop-category .shop-category-content .shop-category-content-img.nmk-cat-icon-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #fff7ec 0%, #fff 100%);
  border: 1px solid #f3e6cf;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .04);
}
.shop-category .shop-category-content .shop-category-content-img.nmk-cat-icon-tile a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  text-decoration: none;
}
.shop-category .shop-category-content .shop-category-content-img.nmk-cat-icon-tile .nmk-cat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  color: #c2173d;
  transition: transform .35s ease, color .25s ease;
}
.shop-category .shop-category-content .shop-category-content-img.nmk-cat-icon-tile .nmk-cat-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.shop-category .shop-category-content .shop-category-content-box:hover .shop-category-content-img.nmk-cat-icon-tile .nmk-cat-icon {
  transform: scale(1.08) rotate(-3deg);
  color: #f3a847;
}
@media (max-width: 575px) {
  .shop-category .shop-category-content .shop-category-content-img.nmk-cat-icon-tile .nmk-cat-icon {
    width: 52px;
    height: 52px;
  }
}

/* ====================================================================
   10) Countdown — gentle pulse on the seconds digit
   The Blade uses #seconds for the seconds counter.
   ==================================================================== */
@keyframes nmkTick {
  0%, 100% { transform: none; }
  50%      { transform: scale(1.10); color: #e74c3c; }
}
.counter__box #seconds {
  display: inline-block;
  animation: nmkTick 1s steps(1) infinite;
  transform-origin: center;
}

/* ====================================================================
   Bonus: domestic-service tiles get the same lift treatment.
   ==================================================================== */
.emergency-service-box {
  transition: transform .2s ease, box-shadow .2s ease;
}
.emergency-service-box:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .08);
}

/* ====================================================================
   12) Wishlist / cart-list card image — strictly contained.
   The legacy rule used `width: auto !important; max-width: 260px` which
   doesn't follow the card's actual width on smaller viewports, letting
   wide product photos blow out of the card. Lock it inside a fixed
   220px-tall flex box with object-fit: contain.
   ==================================================================== */
.cart_list .cartlist_card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.cart_list .cartlist_card .cartlist_img {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 220px;
  background: #fff;
  overflow: hidden;
  padding: 8px;
  flex: 0 0 auto;
}
.cart_list .cartlist_card .cartlist_img img {
  width: auto !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  margin: 0 !important;
  display: block;
}
.cart_list .cartlist_card .cartlist_content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.cart_list .cartlist_card .cartlist_content .cartproduct_price {
  margin-top: auto;
}

/* ====================================================================
   11) Equal-height product cards with bottom-pinned action row.
   Fixes ragged price/CTA/Same-Day-Delivery alignment on cards that
   show full info (Previously Ordered, Similar Products, etc.).
   Scoped to sections WITHOUT .home-products, since the home variant
   hides rating/cart/delivery via display:none and uses a different
   compact layout we don't want to touch.
   ==================================================================== */
section:not(.home-products) .popular-products-wrap .popular-products-box {
  display: flex;
  flex-direction: column;
}
section:not(.home-products) .popular-products-wrap .popular-products-box > a:first-child {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 220px;
  padding: 6px 8px;
  background: #fff;
  overflow: hidden;
}
section:not(.home-products) .popular-products-wrap .popular-products-box > a:first-child img {
  width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
  margin: 0;
  padding: 0;
}
section:not(.home-products) .popular-products-wrap .popular-products-box .popular-products-box-content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
}

/* Title: clamp to 2 lines so every card reserves the same vertical space. */
section:not(.home-products) .popular-products-wrap .popular-products-box .popular-products-box-content .popular-products-heading {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.35;
  min-height: calc(1.35em * 2);
  margin-bottom: 8px;
}

/* Rating row: lock height so "0" vs "18" reviews / TRUSTED-or-not cards align. */
section:not(.home-products) .popular-products-wrap .popular-products-box .popular-products-box-content .products-rating {
  min-height: 38px;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
}
section:not(.home-products) .popular-products-wrap .popular-products-box .popular-products-box-content .products-rating ul {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  margin: 0;
  padding: 0;
}
section:not(.home-products) .popular-products-wrap .popular-products-box .popular-products-box-content .products-rating ul li {
  list-style: none;
  display: inline-flex;
}
section:not(.home-products) .popular-products-wrap .popular-products-box .popular-products-box-content img.trusted-img {
  margin-top: 0 !important;
  margin-left: 6px;
  align-self: center;
}

/* Pin price + cart + delivery to the bottom of every card. */
section:not(.home-products) .popular-products-wrap .popular-products-box .popular-products-box-content h4.price {
  margin-top: auto;
  margin-bottom: 8px;
}

/* Cart row: tidy gap between "Add to Cart" and Wishlist so all cards match. */
section:not(.home-products) .popular-products-wrap .popular-products-box .popular-products-box-content .cart-box {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  margin-bottom: 6px;
}
section:not(.home-products) .popular-products-wrap .popular-products-box .popular-products-box-content .cart-box .popular-products-btn,
section:not(.home-products) .popular-products-wrap .popular-products-box .popular-products-box-content .cart-box .addToCartButtonHome {
  flex: 0 0 auto;
}
section:not(.home-products) .popular-products-wrap .popular-products-box .popular-products-box-content .cart-box .btn.wishlist {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Same-day-delivery row: consistent baseline across cards. */
section:not(.home-products) .popular-products-wrap .popular-products-box .popular-products-box-content .product_delivery {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 22px;
  margin-top: 0;
}



/* Product card alignment: keep image, info rows, price, and actions on stable rails. */
section:not(.home-products):not(.explore-product) .popular-products-wrap .item {
  display: flex;
}
section:not(.home-products):not(.explore-product) .popular-products-wrap .popular-products-box {
  width: 100%;
  min-height: 520px;
  height: auto !important;
  padding: 8px 30px 18px !important;
  overflow: hidden;
}
section:not(.home-products):not(.explore-product) .popular-products-wrap .popular-products-box > a:first-child {
  height: 285px;
  margin: 0 0 8px;
}
section:not(.home-products):not(.explore-product) .popular-products-wrap .popular-products-box .popular-products-box-content {
  padding: 0;
  background: transparent;
}
section:not(.home-products):not(.explore-product) .popular-products-wrap .popular-products-box .popular-products-box-content .popular-products-heading {
  font-size: 19px !important;
  line-height: 1.35;
  min-height: 52px;
  margin-bottom: 6px !important;
}
section:not(.home-products):not(.explore-product) .popular-products-wrap .popular-products-box .popular-products-box-content .variation_box {
  min-height: 28px;
  margin: 0 0 8px;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}
section:not(.home-products):not(.explore-product) .popular-products-wrap .popular-products-box .popular-products-box-content .products-rating {
  min-height: 38px;
  padding: 6px 0;
  gap: 8px;
  justify-content: space-between;
  overflow: hidden;
}
section:not(.home-products):not(.explore-product) .popular-products-wrap .popular-products-box .popular-products-box-content .products-rating ul {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}
section:not(.home-products):not(.explore-product) .popular-products-wrap .popular-products-box .popular-products-box-content img.trusted-img {
  flex: 0 0 96px;
  width: 96px !important;
  max-width: 96px;
  height: auto !important;
  margin-left: 4px !important;
  object-fit: contain;
}
section:not(.home-products):not(.explore-product) .popular-products-wrap .popular-products-box .popular-products-box-content h4.price {
  min-height: 40px;
  margin-top: 8px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
section:not(.home-products):not(.explore-product) .popular-products-wrap .popular-products-box .popular-products-box-content .cart-box {
  min-height: 50px;
  margin-top: auto;
  margin-bottom: 0;
  align-items: center;
  gap: 12px;
}
section:not(.home-products):not(.explore-product) .popular-products-wrap .popular-products-box .popular-products-box-content .cart-box .wishlist {
  white-space: nowrap;
  flex: 0 0 auto;
}

/* ====================================================================
   13) /categories-all — Square photo tiles with brand-red hairline ring
       Matches the homepage "Shop by Category" decoration for visual
       consistency. Scoped to .category_card so we don't touch other
       legacy uses of .category_card elsewhere.
   ==================================================================== */
.category-section .category_card {
  height: auto !important;
  margin: 18px 0 !important;
  text-align: center;
}
.category-section .category_card .nmk-cat-img-wrap {
  display: block;
  width: 100%;
  max-width: 240px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #f3e6cf;
  box-shadow:
    0 0 0 4px #fff,
    0 0 0 5px rgba(194, 23, 61, .22),
    0 6px 14px rgba(0, 0, 0, .06);
  transition: transform .25s ease, box-shadow .25s ease;
}
.category-section .category_card .nmk-cat-img-wrap img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  display: block;
  border-radius: 16px;
  transition: transform .35s ease;
}
.category-section .category_card:hover .nmk-cat-img-wrap {
  transform: translateY(-4px);
  box-shadow:
    0 0 0 4px #fff,
    0 0 0 5px rgba(194, 23, 61, .45),
    0 12px 22px rgba(0, 0, 0, .10);
}
.category-section .category_card:hover .nmk-cat-img-wrap img {
  transform: scale(1.05);
}
.category-section .category_card h4 {
  margin-top: 14px;
}
@media (max-width: 575.98px) {
  .category-section .category_card .nmk-cat-img-wrap {
    max-width: 160px;
  }
}

/* ====================================================================
   15) Mobile bottom navigation bar.
       Fixed at bottom of viewport on phones (< 768px); 5 evenly-spaced
       tabs with brand-red active accent and a live cart-count badge.
       Hide-on-scroll-down behaviour (Amazon style) is driven by
       ui-enhancements.js toggling .nmk-mob-nav--hidden.
   ==================================================================== */
.nmk-mob-nav { display: none; }

@media (max-width: 767.98px) {
  .nmk-mob-nav {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1040; /* above sticky elements but under modals */
    background: #fff;
    border-top: 1px solid #ececec;
    box-shadow: 0 -6px 16px rgba(0, 0, 0, .06);
    padding-bottom: env(safe-area-inset-bottom, 0);
    transform: translateY(0);
    transition: transform .25s ease;
  }
  .nmk-mob-nav--hidden {
    transform: translateY(110%);
  }

  .nmk-mob-nav__item {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 8px 4px 9px;
    text-decoration: none;
    color: #5a5a5a;
    background: transparent;
    border: 0;
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color .2s ease, transform .2s ease;
  }
  .nmk-mob-nav__item:active {
    transform: scale(.94);
  }
  .nmk-mob-nav__item.is-active,
  .nmk-mob-nav__item:focus-visible {
    color: #c2173d;
    outline: none;
  }

  .nmk-mob-nav__icon-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .nmk-mob-nav__icon {
    width: 22px;
    height: 22px;
    stroke-width: 2;
  }
  .nmk-mob-nav__item.is-active .nmk-mob-nav__icon {
    transform: translateY(-1px);
  }

  .nmk-mob-nav__label {
    font-weight: 600;
    letter-spacing: .2px;
  }
  .nmk-mob-nav__item.is-active .nmk-mob-nav__label {
    font-weight: 700;
  }

  /* Live cart-count badge — synced by JS via .cartProductsCount class. */
  .nmk-mob-nav__badge {
    position: absolute;
    top: -7px;
    right: -10px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: #c2173d;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 18px;
    border-radius: 999px;
    text-align: center;
    border: 2px solid #fff;
    box-sizing: content-box;
    transition: transform .2s ease;
  }
  .nmk-mob-nav__badge.is-empty {
    display: none;
  }

  /* Lift body content above the fixed nav so footer/CTAs aren't hidden. */
  body {
    padding-bottom: calc(60px + env(safe-area-inset-bottom, 0));
  }
}

@media (prefers-reduced-motion: reduce) {
  .nmk-mob-nav,
  .nmk-mob-nav__item,
  .nmk-mob-nav__badge {
    transition: none !important;
  }
}