/* ============================================================
   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;
}

/* ===== v12: sidebar markers to match preview — left dot + right chevron ===== */
/* subcategory header: turn the +/- glyph into a small left dot */
#accordian .menuLink i{width:7px !important;height:7px !important;border-radius:2px !important;background:#d8c5a5 !important;transform:rotate(45deg) !important;margin-right:11px !important;transition:.18s !important}
#accordian .menuLink i::before,#accordian .menuLink i::after{display:none !important}
#accordian li.active .menuLink i{background:#fff !important}
#accordian h3 a:hover .menuLink i{background:#e7342f !important}
/* right chevron on the subcategory header (rotates when open) */
#accordian h3 a::after{content:"" !important;position:absolute !important;right:14px !important;top:50% !important;width:6px !important;height:6px !important;border-right:2px solid #9b8d80 !important;border-bottom:2px solid #9b8d80 !important;transform:translateY(-70%) rotate(45deg) !important;transition:.2s !important}
#accordian li.active h3 a::after{transform:translateY(-25%) rotate(-135deg) !important;border-color:#fff !important}
/* sub-items: left marker becomes a hollow dot (red when active/hover) */
#accordian ul ul li a::after{content:"" !important;left:16px !important;top:50% !important;width:6px !important;height:6px !important;border:1.5px solid #c9b49b !important;border-radius:50% !important;background:transparent !important;transform:translateY(-50%) !important}
#accordian ul ul li a:hover::after,#accordian ul ul li.active > a::after{border-color:#e7342f !important;background:#e7342f !important}

/* ===== inner-page banner: small L/R gap like home (not big gutters) ===== */
@media (min-width:1024px){
  .banner-main.inner-banner-main{max-width:none !important;margin-left:22px !important;margin-right:22px !important}
}

/* ===== v14: MOBILE — show product cards 2-up (was 1 per row) =====
   Listing card column is .col-lg-3.col-md-4.col-sm-4 (the sidebar is
   .col-md-3, so this combo is unique to product cards). Force 50% width
   on phones so the grid reads 2x2. Applies to all 4 listing paths since
   they share this markup; AJAX-swapped grids inherit it too. */
@media (max-width:767px){
  .rightcol .col-lg-3.col-md-4.col-sm-4{
    width:50% !important;flex:0 0 50% !important;max-width:50% !important;
    padding-left:7px !important;padding-right:7px !important;
  }
  .rightcol > .row,.rightcol .products-grid > .row{margin-left:-7px !important;margin-right:-7px !important}
  .rightcol .arrival-thumb{border-radius:14px !important}
  .rightcol .arrival-dtl h3,.rightcol .product-sub h3{font-size:13px !important;line-height:1.3 !important}
  .rightcol .arrival-kd-cart .price,.rightcol .price-kd,.rightcol .price{font-size:14px !important}
  .rightcol .arrival-img{padding:10px !important}
  /* quick-view hover pill is pointless on touch; hide to reduce clutter */
  .rightcol .arrival-kd-cart .quick-link-btn{display:none !important}
}

/* ===== v15: MOBILE — categories live in the header hamburger (☰); hide the
   on-page category sidebar so products fill the screen (per client). The
   full category tree is already inside the mobile slide-out menu. ===== */
@media (max-width:767px){
  .leftcol{display:none !important}
  .rightcol{width:100% !important;flex:0 0 100% !important;max-width:100% !important}
}

/* ===== v16: MOBILE — clean listing card (reference: Xcite): contained image,
   2-line name, price + cart tidy bottom row (matches home cards). ===== */
@media (max-width:767px){
  .rightcol .arrival-thumb{display:flex !important;flex-direction:column !important;padding-top:0 !important}
  .rightcol .arrival-img{margin:0 !important;padding:12px 12px 6px !important;flex:0 0 auto !important}
  .rightcol .new-arrival-sticker::after{
    left:0 !important;top:8px !important;bottom:auto !important;right:auto !important;transform:none !important;writing-mode:horizontal-tb !important;
    font-size:10px !important;padding:3px 9px !important;border-radius:0 4px 4px 0 !important;line-height:1.3 !important;letter-spacing:.04em !important;
  }
  .rightcol .favourite-btn,.rightcol .favourite-btnlog{top:8px !important;right:8px !important}
  .rightcol .quick-btn{display:none !important}
  /* name lives in .product-sub which is position:absolute in the base theme;
     put it back in normal flow so it isn't collapsed by height:auto */
  .rightcol .arrival-dtl-sub{height:auto !important;padding:0 !important;position:static !important}
  .rightcol .product-sub{position:static !important;left:auto !important;top:auto !important;right:auto !important;height:auto !important;padding:0 !important;background:transparent !important}
  .rightcol .arrival-dtl h3,.rightcol .product-sub h3{
    font-size:13.5px !important;line-height:1.32 !important;height:auto !important;max-height:2.64em !important;min-height:2.64em !important;font-weight:600 !important;color:#2d1817 !important;
    display:-webkit-box !important;-webkit-line-clamp:2 !important;-webkit-box-orient:vertical !important;overflow:hidden !important;
    text-align:left !important;justify-content:flex-start !important;align-items:flex-start !important;padding:0 12px !important;margin:6px 0 0 !important;
  }
  .rightcol .arrival-kd-cart{
    display:flex !important;align-items:center !important;justify-content:space-between !important;
    padding:8px 12px 12px !important;margin-top:auto !important;
  }
  .rightcol .arrival-kd-cart .price{
    position:static !important;left:auto !important;right:auto !important;top:auto !important;bottom:auto !important;
    float:none !important;text-align:left !important;font-size:15px !important;font-weight:700 !important;color:#e7342f !important;line-height:1.2 !important;
  }
  .rightcol .arrival-kd-cart .add-to-cart{float:none !important;flex:0 0 auto !important;width:40px !important;height:40px !important;margin:0 !important}
}

/* ===== v18: Xcite-style CLEAR listing card — price on its own line + a
   full-width "Add to Cart" button (replaces the small red circle). All sizes.
   OOS cards keep the full-width "Notify me" pill (handled in header.css). ===== */
.rightcol .arrival-kd-cart{
  display:flex !important;flex-direction:column !important;align-items:stretch !important;gap:10px !important;
  padding:10px 14px 16px !important;position:static !important;margin-top:auto !important;overflow:visible !important;
}
.rightcol .arrival-kd-cart .price{
  position:static !important;left:auto !important;right:auto !important;top:auto !important;bottom:auto !important;
  float:none !important;text-align:left !important;font-size:17px !important;font-weight:700 !important;color:#e7342f !important;line-height:1.2 !important;display:block !important;padding:0 !important;
}
.rightcol .arrival-kd-cart .price del{color:#9b8d80 !important;font-weight:400 !important;font-size:13px !important;margin-right:6px !important}
.rightcol .arrival-kd-cart .add-to-cart{
  float:none !important;width:100% !important;height:auto !important;min-height:0 !important;margin:0 !important;
  background:#e7342f !important;border:0 !important;border-radius:10px !important;padding:12px !important;
  display:flex !important;align-items:center !important;justify-content:center !important;box-shadow:0 6px 14px rgba(231,52,47,.22) !important;transition:transform .18s, background .18s !important;
}
.rightcol .arrival-kd-cart .add-to-cart:hover{background:#c2241f !important;transform:translateY(-2px) !important}
.rightcol .arrival-kd-cart .add-to-cart img{display:none !important}
.rightcol .arrival-kd-cart .add-to-cart:not(.atc-done)::after{content:"Add to Cart" !important;color:#fff !important;font-weight:700 !important;font-size:13.5px !important;letter-spacing:.03em !important}
html[lang="ar"] .rightcol .arrival-kd-cart .add-to-cart:not(.atc-done)::after{content:"أضف إلى العربة" !important}
.rightcol .arrival-kd-cart .add-to-cart.atc-done{background:#2e7d54 !important}

/* ===== v19: center name + price; reveal "Add to Cart" on hover (desktop),
   always visible on phones (per client). ===== */
.rightcol .arrival-dtl h3,.rightcol .product-sub h3,.rightcol .arrival-dtl-sub h3{text-align:center !important}
.rightcol .arrival-kd-cart .price{text-align:center !important}
.rightcol .arrival-kd-cart{align-items:center !important}
@media (min-width:1024px){
  .rightcol .arrival-kd-cart .add-to-cart{
    opacity:0 !important;visibility:hidden !important;transform:translateY(6px) !important;transition:opacity .22s ease, transform .22s ease !important;
  }
  .rightcol .arrival-thumb:hover .arrival-kd-cart .add-to-cart{opacity:1 !important;visibility:visible !important;transform:translateY(0) !important}
}

/* ============================================================
   v20 (2026-07-13): MOBILE listing cleanup + subcategory pill slider.
   The left sidebar is hidden on phones, so subcategories were
   unreachable. Adds a horizontal, scrollable pill strip of the
   category's subcategories (taps AJAX-switch the grid), hides the
   redundant "Birds / Canary / Food" breadcrumb title, and compacts
   the filter/sort row. Desktop (>=1024) keeps the sidebar; the
   slider stays hidden there.
   ============================================================ */
.subcat-slider{display:none}
@media (max-width:1023px){
  /* --- pill strip --- */
  .subcat-slider{
    display:flex !important;gap:8px !important;align-items:center !important;
    overflow-x:auto !important;-webkit-overflow-scrolling:touch !important;
    padding:12px 12px 4px !important;margin:0 -12px !important;
    scroll-snap-type:x proximity !important;scrollbar-width:none !important;
  }
  .subcat-slider::-webkit-scrollbar{display:none !important}
  .subcat-slider .subcat-pill{
    flex:0 0 auto !important;white-space:nowrap !important;scroll-snap-align:center !important;
    padding:8px 15px !important;border-radius:999px !important;
    background:#fff !important;border:1px solid #e6d9c2 !important;
    color:#5b4a41 !important;font-size:13px !important;font-weight:600 !important;
    line-height:1 !important;text-decoration:none !important;
    box-shadow:0 1px 3px rgba(45,24,23,.06) !important;
    transition:background .15s,color .15s,border-color .15s !important;
  }
  .subcat-slider .subcat-pill.active{
    background:#e7342f !important;border-color:#e7342f !important;color:#fff !important;
    box-shadow:0 4px 12px rgba(231,52,47,.28) !important;
  }
  /* --- hide the messy breadcrumb title (pills + banner convey location) --- */
  .rightcol .breadcrumb-sub{display:none !important}
  /* --- compact filter/sort row: slim, right-aligned --- */
  .rightcol .breadcrumb-filter{display:block !important;padding:0 !important;margin:0 0 10px !important;border:0 !important;background:transparent !important}
  .rightcol .filter-div{width:100% !important;margin:0 !important;padding:0 12px !important}
  .rightcol .filter-cont{display:flex !important;align-items:center !important;justify-content:flex-end !important;gap:8px !important;padding:0 !important;margin:0 !important}
  .rightcol .filter-text{font-size:12.5px !important;color:#8a7a6d !important;margin:0 !important;white-space:nowrap !important}
  .rightcol .filter-sub{margin:0 !important}
  .rightcol .filter-sub .form-control{
    height:34px !important;line-height:normal !important;font-size:12.5px !important;
    padding:5px 30px 5px 14px !important;width:auto !important;min-width:0 !important;max-width:200px !important;
    box-shadow:0 1px 4px rgba(45,24,23,.06) !important;
  }
  /* --- tighten card text a touch --- */
  .rightcol .arrival-dtl h3,.rightcol .product-sub h3{font-size:12.5px !important;line-height:1.3 !important}
  .rightcol .arrival-kd-cart .price,.rightcol .price{font-size:13.5px !important}
}