/* ============================================================
   Wazzanvet — design refresh (loads on listing page)
   Visual restyle of existing elements. No markup/JS/feature
   changes. Page background left as-is.
   ============================================================ */

/* ---------- LISTING product cards ---------- */
.rightcol .arrival-thumb{
  border:1px solid #e7dcc9 !important;
  border-radius:16px !important;
  box-shadow:0 6px 22px rgba(45,24,23,.10) !important;
  overflow:hidden !important;
  transition:transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s, border-color .28s !important;
}
.rightcol .arrival-thumb:hover{
  transform:translateY(-6px) !important;
  box-shadow:0 22px 46px rgba(45,24,23,.18) !important;
  border-color:#d8c5a5 !important;
}
.rightcol .arrival-img{border-radius:15px 15px 0 0 !important;overflow:hidden !important;aspect-ratio:1/1 !important;height:auto !important;padding:16px !important;position:relative !important}
.rightcol .arrival-img > a:not(.out-of-stock-btn){display:block !important;width:100% !important;height:100% !important;float:none !important;margin:0 !important}
/* bulletproof: image element fills the square box; the picture letterboxes centered inside it */
.rightcol .arrival-img > a:not(.out-of-stock-btn) img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  margin:0 auto !important;
  transform:none !important;
  transition:none !important;
}
.rightcol .arrival-thumb:hover .arrival-img img{transform:none !important}
/* hide the short description + "read more" (match preview) */
.rightcol .product-sub p{display:none !important}

/* Quick View: hover overlay on the image (not a persistent circle) */
.rightcol .arrival-kd-cart .quick-link-btn{
  position:absolute !important;
  left:50% !important;
  bottom:150px !important;
  transform:translate(-50%,10px) !important;
  float:none !important;
  width:auto !important;
  height:auto !important;
  border-radius:999px !important;
  padding:9px 20px !important;
  background:rgba(45,24,23,.92) !important;
  color:#fff !important;
  font-size:12.5px !important;
  line-height:1.2 !important;
  letter-spacing:.02em !important;
  white-space:nowrap !important;
  opacity:0 !important;
  pointer-events:none !important;
  transition:opacity .25s, transform .25s !important;
  z-index:6 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.rightcol .arrival-thumb:hover .quick-link-btn{
  opacity:1 !important;
  transform:translate(-50%,0) !important;
  pointer-events:auto !important;
}

/* add-to-cart micro-interaction */
.rightcol .arrival-kd-cart .add-to-cart{box-shadow:0 8px 18px rgba(231,52,47,.30);transition:transform .2s}
.rightcol .arrival-kd-cart .add-to-cart:hover{transform:translateY(-2px)}
.rightcol .favourite-btn:hover,.rightcol .favourite-btnlog:hover{filter:brightness(.94)}

/* ---------- LEFT SIDEBAR: red slabs -> clean white accordion ---------- */
.leftcol .catogories{
  background:#fff !important;
  border:1px solid #e7dcc9 !important;
  border-radius:16px !important;
  box-shadow:0 4px 16px rgba(45,24,23,.06) !important;
  padding:8px !important;
  overflow:visible !important;
}
.leftcol .catogories > h3{
  font-size:13px !important;
  letter-spacing:.16em !important;
  text-transform:uppercase !important;
  color:#2d1817 !important;
  padding:12px 12px 14px !important;
  margin:0 !important;
  border-bottom:1px solid #efe4d2 !important;
}
#accordian h3 a{
  background:transparent !important;
  color:#2d1817 !important;
  border-bottom:0 !important;
  font-size:15px !important;
  line-height:1.35 !important;
  padding:12px 14px !important;
  border-radius:11px !important;
  font-weight:600 !important;
  letter-spacing:0 !important;
  transition:background .18s, color .18s !important;
}
#accordian h3 a:hover{background:#efe6d6 !important;color:#2d1817 !important}
#accordian li.active h3 a{
  background:linear-gradient(100deg,#e7342f,#c2241f) !important;
  color:#fff !important;
  box-shadow:0 8px 18px rgba(231,52,47,.28) !important;
}
#accordian .menuLink i::after,#accordian .menuLink i::before{background:#b3a596 !important}
#accordian li.active .menuLink i::after,#accordian li.active .menuLink i::before{background:#fff !important}
#accordian ul ul li a{
  background:transparent !important;
  color:#5b4a41 !important;
  border-bottom:0 !important;
  font-size:13.5px !important;
  padding:9px 12px 9px 38px !important;
  border-radius:9px !important;
  transition:background .16s, color .16s, padding .16s !important;
}
#accordian ul ul li a:hover{background:#efe6d6 !important;color:#2d1817 !important}
#accordian ul li a.active,
#accordian ul ul li.active > a{background:#fdecec !important;color:#e7342f !important;font-weight:600 !important}
#accordian ul ul li a::after{left:18px !important;top:15px !important;border-bottom-color:#c9b49b !important;border-right-color:#c9b49b !important}
#accordian ul ul li a:hover::after,
#accordian ul ul li.active > a::after{border-bottom-color:#e7342f !important;border-right-color:#e7342f !important}
#accordian ul ul li a.SubMenuLink{background:transparent !important;color:#5b4a41 !important}
#accordian ul li.active .Menu01 .active .SubMenuLink{background:#fdecec !important}

/* ---------- page background: cream (this CSS only loads on the listing page) ---------- */
body{background:#faf6ef !important}

/* ---------- breadcrumb styled as the "Birds  Parrot" title (like preview) ---------- */
.rightcol .breadcrumb-ul li::after{display:none !important}
.rightcol .breadcrumb-ul li{padding:0 10px 0 0 !important}
.rightcol .breadcrumb-ul .bird-name a{
  font-family:'Merriweather',serif !important;
  font-weight:900 !important;
  font-size:30px !important;
  color:#2d1817 !important;
  letter-spacing:-.01em !important;
}
.rightcol .breadcrumb-ul .bird-cat-name a,
.rightcol .breadcrumb-ul .bird-cat-name,
.rightcol .breadcrumb-ul .bird-pro-name{
  font-size:15px !important;
  color:#9b8d80 !important;
  font-weight:500 !important;
}

/* ---------- Filter dropdown -> rounded pill ---------- */
.rightcol .filter-text{color:#5b4a41 !important;font-weight:500 !important}
.rightcol .filter-sub .form-control{
  border:1px solid #e6d9c2 !important;
  border-radius:999px !important;
  background:#fff !important;
  box-shadow:0 2px 10px rgba(45,24,23,.06) !important;
  padding:.55rem 2rem .55rem 1rem !important;
  color:#2d1817 !important;
}

/* ===== v8: image centering fix (neutralize style.css absolute-center trick) ===== */
.rightcol .arrival-img > a:not(.out-of-stock-btn){padding:0 !important}
.rightcol .arrival-img > a:not(.out-of-stock-btn) img{position:static !important;left:auto !important;top:auto !important}

/* ===== revert page background from cream to the original neutral grey ===== */
body{background:#efefef !important}

/* ===== v10: listing banner contained+rounded+gap (like home) + OOS greyscale (drop dark veil) + red OOS name ===== */
@media (min-width:1024px){
  .banner-main.inner-banner-main{
    max-width:1560px !important;
    margin:140px auto 26px auto !important;
    border-radius:22px !important;
    overflow:hidden !important;
    box-shadow:0 14px 34px rgba(45,24,23,.14) !important;
  }
}
/* out-of-stock: replace the 50% black veil with a light one so the greyscale image stays visible */
.rightcol .arrival-img.out-of-stock::before{background:rgba(255,255,255,0.14) !important}
/* out-of-stock product name -> red (like preview) */
.rightcol .arrival-img.out-of-stock ~ .arrival-dtl h3,
.rightcol .arrival-img.out-of-stock ~ .arrival-dtl h3 a{color:#e7342f !important}

/* ===== OOS bottom "Notify me" outline pill (v11/v8 2026-07-08) ===== */
.notify-pill,
.arrival-kd-cart a.notify-pill{
  float:right;
  display:inline-block;
  background:#fff;
  border:1.5px solid #e7342f;
  color:#e7342f;
  border-radius:999px;
  padding:9px 18px;
  font-size:12.5px;
  font-weight:600;
  font-family:inherit;
  line-height:normal;
  text-decoration:none;
  cursor:pointer;
  transition:.2s;
  width:auto;
  height:auto;
}
.notify-pill:hover,
.arrival-kd-cart a.notify-pill:hover{
  background:#e7342f;
  color:#fff;
}