@import url('https://fonts.googleapis.com/css?family=Merriweather:700,900&display=swap');
/* ============================================================
   Wazzanvet — HOME page refresh (loaded only by index.php)
   Restyle of existing sections to match approved preview:
   hero, shop-by-category, product rows, offers. No markup/JS
   changes, no elements added/removed.
   ============================================================ */

/* page canvas: cream (home only) */
body{background:#faf6ef !important}

/* ---------- HERO banner: contained + rounded ---------- */
.banner-main{
  margin:88px clamp(16px,4vw,80px) 10px clamp(16px,4vw,80px) !important;
}
.banner-main .slideshow-container{
  border-radius:22px !important;
  overflow:hidden !important;
  box-shadow:0 14px 34px rgba(45,24,23,.14) !important;
}

/* ---------- section titles: serif, left, with rule line ---------- */
.pets-main h2,
.arrival-main h2,
.offers-main h2{
  font-family:'Merriweather',Georgia,serif !important;
  font-weight:900 !important;
  text-transform:none !important;
  text-align:left !important;
  font-size:clamp(22px,2.4vw,30px) !important;
  color:#2d1817 !important;
  letter-spacing:-.01em !important;
  padding-bottom:14px !important;
  margin-bottom:18px !important;
  border-bottom:1px solid #ecdfc9 !important;
}
/* VIEW ALL pill on the right of the titles */
.arrival-main h2 .button,
.offers-main h2 a{
  border-radius:999px !important;
  font-family:inherit;
  font-size:13px !important;
  padding:8px 18px !important;
  top:auto !important;
  box-shadow:0 6px 16px rgba(231,52,47,.25) !important;
}

/* ---------- Shop by category: grey strip -> cream, white tiles ---------- */
.pets-main{background:transparent !important;padding:28px 5% 26px 5% !important}
.pets-thumb{
  background:#fff !important;
  border:1px solid #e7dcc9 !important;
  border-radius:18px !important;
  box-shadow:0 4px 14px rgba(45,24,23,.06) !important;
  padding:16px 8px 14px !important;
  margin:10px 9px 4px 9px !important;
  transition:transform .25s, box-shadow .25s, border-color .25s !important;
}
.pets-thumb:hover{
  transform:translateY(-5px) !important;
  box-shadow:0 16px 34px rgba(45,24,23,.14) !important;
  border-color:#e7342f !important;
}
.pets-thumb:hover .pets-holder-img{transform:scale(1.05) !important}
.pets-thumb:hover .pets-img img{opacity:1 !important}
.pets-thumb h3{color:#2d1817 !important;font-weight:600 !important}

/* ---------- product sections as panels (New Arrivals / Most Viewed / Best Selling / Offers) ---------- */
.arrival-main{padding:6px clamp(12px,3vw,60px) !important}
.arrival-main > .container-fluid{
  background:linear-gradient(180deg,#ffffff,#fdf8ee) !important;
  border:1px solid #e7dcc9 !important;
  border-radius:24px !important;
  box-shadow:0 4px 16px rgba(45,24,23,.05) !important;
  padding:26px clamp(16px,2.4vw,38px) 30px !important;
  margin-bottom:22px !important;
}
.offers-main{background:transparent !important;padding:6px clamp(12px,3vw,60px) !important}
.offers-main > .container-fluid{
  background:linear-gradient(180deg,#ffffff,#fdf3f2) !important;
  border:1px solid #e7dcc9 !important;
  border-radius:24px !important;
  box-shadow:0 4px 16px rgba(45,24,23,.05) !important;
  padding:26px clamp(16px,2.4vw,38px) 30px !important;
  margin-bottom:22px !important;
}

/* ---------- home product cards: same treatment as listing ---------- */
.arrival-main .arrival-thumb,
.offers-main .arrival-thumb{
  border:1px solid #e7dcc9 !important;
  border-radius:16px !important;
  box-shadow:0 5px 18px rgba(45,24,23,.08) !important;
  overflow:hidden !important;
  background:#fff !important;
  transition:transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s, border-color .28s !important;
}
.arrival-main .arrival-thumb:hover,
.offers-main .arrival-thumb:hover{
  transform:translateY(-6px) !important;
  box-shadow:0 20px 42px rgba(45,24,23,.16) !important;
  border-color:#d8c5a5 !important;
}
/* image area: square box, picture letterboxed centered, no movement */
.arrival-main .arrival-img,
.offers-main .arrival-img{aspect-ratio:1/1 !important;height:auto !important;overflow:hidden !important;padding:16px !important;position:relative !important}
.arrival-main .arrival-img > a:not(.out-of-stock-btn),
.offers-main .arrival-img > a:not(.out-of-stock-btn){display:block !important;width:100% !important;height:100% !important;float:none !important;margin:0 !important}
.arrival-main .arrival-img > a:not(.out-of-stock-btn) img,
.offers-main .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;
}
.arrival-main .arrival-thumb:hover .arrival-img img,
.offers-main .arrival-thumb:hover .arrival-img img{transform:none !important}
/* hide any short description on home cards (match preview) */
.arrival-main .arrival-dtl p,
.offers-main .arrival-dtl p{display:none !important}
/* add-to-cart button lift */
.arrival-main .add-to-cart,
.offers-main .add-to-cart{box-shadow:0 8px 18px rgba(231,52,47,.30) !important;transition:transform .2s !important}
.arrival-main .add-to-cart:hover,
.offers-main .add-to-cart:hover{transform:translateY(-2px) !important}


/* ============================================================
   Shop by category — desktop full-width 7-col grid (v3)
   Overrides header.php inline flex rules (.pets-container ...)
   via higher specificity. Desktop only: below 1024px NOTHING
   changes (mobile scroll-snap behavior left untouched).
   ============================================================ */
@media (min-width:1024px){
  /* container: allow hover lift/shadows to escape */
  .pets-main .pets-container{overflow:visible !important;padding:0 !important}
  /* wrapper: flex cluster -> equal-width 7-col grid across full content width */
  .pets-main .pets-container .swiper-wrapper{
    display:grid !important;
    grid-template-columns:repeat(7,1fr) !important;
    gap:16px !important;
    width:100% !important;
    transform:none !important;
    overflow:visible !important;
    scroll-snap-type:none !important;
    padding:6px 2px 14px !important;
  }
  /* slides: drop fixed 150px width, fill their grid track */
  .pets-main .pets-container .swiper-slide{
    width:auto !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
  }
  /* card: fill slide, center contents; grid gap replaces margins */
  .pets-main .pets-thumb{
    margin:0 !important;
    height:100% !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    padding:18px 8px 16px !important;
  }
  /* circular image ~100px, centered */
  .pets-main .pets-container .pets-holder-img,
  .pets-main .pets-container .pets-img{width:100px !important;height:100px !important}
  /* name: normal case, dark, semibold */
  .pets-main .pets-thumb h3{
    text-transform:none !important;
    font-size:15px !important;
    line-height:1.25 !important;
    padding-top:14px !important;
    color:#2d1817 !important;
    font-weight:600 !important;
  }
  /* arrows never needed on desktop grid */
  .pets-main .pets-button-next,
  .pets-main .pets-button-prev{display:none !important}
}

/* ===== v4: image centering fix (neutralize style.css absolute-center trick) + tighter centered width ===== */
.arrival-main .arrival-img > a:not(.out-of-stock-btn),
.offers-main .arrival-img > a:not(.out-of-stock-btn){padding:0 !important}
.arrival-main .arrival-img > a:not(.out-of-stock-btn) img,
.offers-main .arrival-img > a:not(.out-of-stock-btn) img{position:static !important;left:auto !important;top:auto !important}
/* pull the home content in + center it on wide screens */
.banner-main{max-width:1560px !important;margin-left:auto !important;margin-right:auto !important}
.pets-main .container-fluid,
.arrival-main > .container-fluid,
.offers-main > .container-fluid{max-width:1560px !important;margin-left:auto !important;margin-right:auto !important}

/* ===== v5: one consistent background — kill the leftover grey #efefef band ===== */
.arrival-main,.brands-main{background:transparent !important}

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

/* ===== OOS greyscale (drop dark veil) + red name on home cards ===== */
.arrival-main .arrival-img.out-of-stock::before,
.offers-main .arrival-img.out-of-stock::before{background:rgba(255,255,255,0.14) !important}
.arrival-main .arrival-img.out-of-stock ~ .arrival-dtl h3,
.offers-main .arrival-img.out-of-stock ~ .arrival-dtl h3{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;
}

/* ===== v9: home cards — remove persistent eye, show "Quick view" pill on hover (like preview) ===== */
.arrival-main .arrival-thumb .quick-btn,
.offers-main .arrival-thumb .quick-btn{
  position:absolute !important;
  left:50% !important;right:auto !important;top:auto !important;
  bottom:150px !important;
  transform:translate(-50%,10px) !important;
  width:auto !important;height:auto !important;
  background:rgba(45,24,23,.92) !important;
  border-radius:999px !important;
  padding:9px 20px !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;
}
.arrival-main .arrival-thumb:hover .quick-btn,
.offers-main .arrival-thumb:hover .quick-btn{opacity:1 !important;transform:translate(-50%,0) !important;pointer-events:auto !important}
.arrival-main .arrival-thumb .quick-btn:hover,
.offers-main .arrival-thumb .quick-btn:hover{background:rgba(45,24,23,.92) !important}
/* hide the eye glyph, render "Quick view" text */
.arrival-main .quick-btn img,.offers-main .quick-btn img{display:none !important}
.arrival-main .quick-btn::after,.offers-main .quick-btn::after{content:"Quick view";color:#fff;font-size:12.5px;font-weight:500;white-space:nowrap;letter-spacing:.02em}
html[lang="ar"] .arrival-main .quick-btn::after,html[lang="ar"] .offers-main .quick-btn::after{content:"نظرة سريعة"}