/* =====================================================================
   Shop-page-only visual redesign for Daily Useful Tech
   Scope: linked ONLY from templates/shop.html. Mirrors the product-card
   treatment from css/new/home-redesign.css (shop.html renders the same
   product_details.html partial as the homepage, but doesn't load that
   homepage-only stylesheet) plus the hero-fade fix from product-redesign.css.
   ===================================================================== */

:root{
  --dut-navy:      #0b2545;
  --dut-navy-deep: #061530;
  --dut-blue:      #155ee0;
  --dut-cyan:      #1fc7ff;
  --dut-shadow:    0 20px 45px -15px rgba(11,37,69,.35);
}

body, h1, h2, h3, h4, h5, h6, p, a, span, li, button, select {
  font-family: 'Outfit', 'Poppins', 'Segoe UI', sans-serif !important;
}

@keyframes dutFadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes dutPop {
  0%   { opacity: 0; transform: translateY(18px) scale(.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Hero - animate the inner wrapper, not .blog-banner itself, since
   .blog-banner relies on a static transform for centering. */
.blog-banner-area .blog-banner .text-center{
  animation: dutFadeUp .8s ease both;
}

/* ---------- Product cards ---------- */
.shop-section .single-product{
  background-color: #ffffff !important;
  border: 1px solid #e7ecf3 !important;
  border-radius: 20px;
  box-shadow: 0 10px 26px -18px rgba(11,37,69,.25);
  transition: transform .4s ease, box-shadow .4s ease, border-color .4s ease;
  animation: dutPop .6s ease both;
}

.shop-section .single-product:hover{
  border-color: var(--dut-cyan) !important;
  box-shadow: 0 26px 48px -18px rgba(21,94,224,.35);
  transform: translateY(-10px);
}

.shop-section .single-product .product-img{
  border-radius: 14px;
  background: linear-gradient(160deg, #f3f8ff, #eef4ff);
}

.shop-section .single-product .product-img a img{
  transition: transform .6s ease;
}

.shop-section .single-product:hover .product-img a img{
  transform: scale(1.08) rotate(-1deg);
}

.shop-section .single-product .product-img .product-action{
  background: linear-gradient(135deg, var(--dut-cyan) 0%, var(--dut-blue) 55%, var(--dut-navy) 100%) !important;
  border-radius: 0 0 14px 14px;
}

.shop-section .single-product .product-img .product-action .product-btn:hover{
  background: transparent !important;
  color: #fff !important;
  letter-spacing: 2px;
}

.shop-section .single-product .product-content h3 a{
  color: var(--dut-navy);
  font-weight: 600;
  transition: color .3s ease;
}

.shop-section .single-product:hover .product-content h3 a{
  color: var(--dut-blue);
}

.shop-section .single-product .price .new{
  color: var(--dut-blue) !important;
  font-weight: 700;
}

.shop-section .pro-quantity select{
  border: 1px solid #dfe7f2;
  border-radius: 10px;
  padding-left: 14px;
  transition: border-color .3s ease, box-shadow .3s ease;
}

.shop-section .pro-quantity select:hover,
.shop-section .pro-quantity select:focus{
  border-color: var(--dut-blue);
  box-shadow: 0 0 0 3px rgba(21,94,224,.12);
}