/* =========================================================
   Cat Zone — custom CSS for the Salla "Raed" theme
   Brand: orange #f47a0b + teal #13858b, rounded "Baloo" headings.
   ========================================================= */
@import url("https://fonts.googleapis.com/css2?family=Baloo+Bhaijaan+2:wght@600;700;800&display=swap");

:root {
  --cz-orange: #f47a0b;
  --cz-orange-d: #d4650a;
  --cz-orange-l: #fff1e3;
  --cz-teal: #13858b;
  --cz-teal-d: #0d6a6f;
  --cz-teal-l: #e2f3f3;
  --cz-ink: #2b1d14;
  --cz-line: #f0e4d8;
  --cz-display: "Baloo Bhaijaan 2", "Tajawal", sans-serif;
  --cz-ease: cubic-bezier(.22, 1, .36, 1);
  --cz-back: cubic-bezier(.34, 1.56, .64, 1);
}

/* Typography */
.s-block h2, .s-slider-block__title-right h2, .right-side h2,
.s-product-card-price, .product-single__title, h1 {
  font-family: var(--cz-display) !important;
}

/* Top bar + header */
.top-navbar { background: linear-gradient(90deg, var(--cz-teal-d), var(--cz-teal)) !important; }
.top-navbar, .top-navbar a, .top-navbar button, .top-navbar i { color: #fff !important; }
.top-navbar input { background: rgba(255, 255, 255, .95) !important; color: var(--cz-ink) !important; }
.main-nav-container { transition: box-shadow .3s; }
.cz-scrolled .main-nav-container { box-shadow: 0 8px 24px -14px rgba(92, 50, 10, .35) !important; }
.main-nav-container a { transition: color .2s; }
.main-nav-container a:hover { color: var(--cz-orange) !important; }

/* Home slider */
.s-block--photos-slider .swiper-slide img,
.s-block--photos-slider .swiper-slide a { border-radius: 24px !important; overflow: hidden; }
.s-block--photos-slider .swiper-slide { transition: transform .5s var(--cz-ease); }

/* Section titles with a paw */
.right-side h2, .s-slider-block__title-right h2 { display: inline-flex; align-items: center; gap: 8px; font-size: 1.5rem !important; }
.right-side h2::before, .s-slider-block__title-right h2::before {
  content: ""; width: 26px; height: 26px; flex-shrink: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2313858b'%3E%3Cellipse cx='12' cy='16' rx='5.2' ry='4.4'/%3E%3Cellipse cx='5.2' cy='10' rx='2.2' ry='2.8'/%3E%3Cellipse cx='9.4' cy='5.6' rx='2.2' ry='2.9'/%3E%3Cellipse cx='14.6' cy='5.6' rx='2.2' ry='2.9'/%3E%3Cellipse cx='18.8' cy='10' rx='2.2' ry='2.8'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: rotate .6s var(--cz-back), scale .6s var(--cz-back);
}
.cz-rv:not(.cz-in) h2::before { rotate: -40deg; scale: .4; }

/* Product cards */
.s-product-card-entry {
  border-radius: 20px !important; border: 1px solid var(--cz-line) !important; background: #fff !important;
  transition: transform .35s var(--cz-ease), box-shadow .35s, border-color .3s !important; overflow: hidden;
}
.s-product-card-entry:hover { transform: translateY(-4px); box-shadow: 0 16px 34px -18px rgba(92, 50, 10, .4) !important; border-color: #f6cfa8 !important; }
.s-product-card-image img { transition: transform .6s var(--cz-ease) !important; }
.s-product-card-entry:hover .s-product-card-image img { transform: scale(1.06) rotate(-1.5deg); }
.s-product-card-content-title a { font-weight: 600; }
.s-product-card-price { color: var(--cz-ink) !important; font-size: 1.15rem !important; }
.s-product-card-entry .s-button-primary-outline {
  background: var(--cz-orange) !important; border-color: var(--cz-orange) !important; color: #fff !important;
  border-radius: 12px !important; font-weight: 700 !important; transition: background .2s, transform .15s !important;
}
.s-product-card-entry .s-button-primary-outline:hover { background: var(--cz-orange-d) !important; }
.s-product-card-entry .s-button-primary-outline:active { transform: scale(.96); }
.s-product-card-entry .s-button-primary-outline * { color: #fff !important; }

/* Store features */
.s-block--features__item { border-radius: 20px !important; transition: transform .3s var(--cz-ease), box-shadow .3s; }
.s-block--features__item:hover { transform: translateY(-4px); box-shadow: 0 14px 30px -18px rgba(19, 133, 139, .45); }
.s-block--features__item .feature-icon, .s-block--features__item i { color: var(--cz-teal) !important; }

/* Footer accent */
.store-footer { border-top: 4px solid transparent; border-image: linear-gradient(90deg, var(--cz-orange), var(--cz-teal)) 1; }

/* Scroll reveal (classes added by the custom JS) */
.cz-rv { opacity: 0; translate: 0 26px; transition: opacity .7s var(--cz-ease), translate .7s var(--cz-ease); transition-delay: calc(var(--cz-i, 0) * 70ms); }
.cz-rv.cz-in { opacity: 1; translate: 0 0; }

/* Running-cat scroll progress */
.cz-sp { position: fixed; top: 0; right: 0; left: 0; height: 3px; z-index: 9999; pointer-events: none; }
.cz-sp-bar { height: 100%; background: linear-gradient(270deg, #ffb36b, var(--cz-orange)); transform-origin: right; transform: scaleX(var(--p, 0)); }
.cz-sp-cat { position: absolute; top: -3px; right: 0; font-size: 18px; line-height: 1; transform: translateX(calc(var(--p, 0) * -1 * (100vw - 22px))); transition: opacity .3s; }
.cz-sp-cat.idle { opacity: 0; }

/* Peeking cat */
.cz-peek-host { position: relative; }
.cz-peek { position: absolute; top: 0; inset-inline-start: 8%; width: 120px; height: 66px; translate: 0 -100%; overflow: hidden; cursor: pointer; z-index: 3; }
.cz-peek svg { width: 120px; height: 90px; display: block; translate: 0 90px; transition: translate .9s var(--cz-back); }
.cz-peek.up svg { translate: 0 6px; }
.cz-peek:hover svg { translate: 0 0; }
.cz-peek .ear { transform-box: fill-box; transform-origin: bottom center; transition: rotate .25s; }
.cz-peek:hover .ear-l { rotate: -10deg; }
.cz-peek:hover .ear-r { rotate: 10deg; }
.cz-peek .lid { transform-box: fill-box; transform-origin: top; scale: 1 0; }
.cz-peek.blink .lid { animation: czBlink .22s ease-in-out; }
@keyframes czBlink { 50% { scale: 1 1; } }
.cz-peek .pupil { transition: translate .12s linear; }
.cz-bubble { position: absolute; top: -8px; inset-inline-start: calc(8% + 112px); translate: 0 -100%; background: #fff; color: var(--cz-ink); font-weight: 700; font-size: 14px; padding: 6px 12px; border-radius: 14px 14px 14px 4px; box-shadow: 0 10px 30px -12px rgba(92, 50, 10, .3); opacity: 0; scale: .6; transition: opacity .25s, scale .35s var(--cz-back); pointer-events: none; white-space: nowrap; z-index: 3; }
.cz-bubble.show { opacity: 1; scale: 1; }

/* Butterfly over the slider */
.cz-bfly { position: absolute; z-index: 5; width: 46px; height: 40px; top: 12%; left: 30%; cursor: pointer; animation: czFlight 18s ease-in-out infinite; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .18)); }
.cz-bfly svg { width: 100%; height: 100%; overflow: visible; }
.cz-bfly .wl, .cz-bfly .wr { transform-box: view-box; transform-origin: 50px 45px; animation: czFlapL .22s ease-in-out infinite alternate; }
.cz-bfly .wr { animation-name: czFlapR; }
@keyframes czFlapL { to { transform: scaleX(.25) skewY(4deg); } }
@keyframes czFlapR { to { transform: scaleX(.25) skewY(-4deg); } }
@keyframes czFlight {
  0% { translate: 0 0; rotate: 8deg; } 20% { translate: 160px 60px; rotate: 24deg; } 40% { translate: 380px 10px; rotate: -10deg; }
  60% { translate: 220px 140px; rotate: -24deg; } 80% { translate: -60px 90px; rotate: 12deg; } 100% { translate: 0 0; rotate: 8deg; }
}
@media (max-width: 768px) {
  .cz-bfly { width: 34px; height: 30px; }
  @keyframes czFlight { 0% { translate: 0 0; } 33% { translate: 90px 40px; } 66% { translate: 160px -10px; } 100% { translate: 0 0; } }
}

/* Fly-to-cart + confetti */
.cz-fly { position: fixed; z-index: 99999; pointer-events: none; border-radius: 16px; background: #fff; object-fit: contain; box-shadow: 0 12px 30px -8px rgba(92, 50, 10, .45); }
.cz-wiggle { animation: czWiggle .6s var(--cz-back); }
@keyframes czWiggle { 20% { rotate: -14deg; scale: 1.15; } 45% { rotate: 10deg; } 70% { rotate: -5deg; } 100% { rotate: 0; scale: 1; } }
.cz-confetti { position: fixed; z-index: 99999; pointer-events: none; width: 18px; height: 18px; }
.cz-confetti svg { width: 100%; height: 100%; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .cz-rv { opacity: 1 !important; translate: none !important; transition: none !important; }
  .cz-bfly, .cz-sp-cat { display: none !important; }
  .cz-peek svg { translate: 0 6px; transition: none; }
  .s-product-card-entry, .s-product-card-image img { transition: none !important; }
}

/* =========================================================
   v2 — closer to the Cat Zone website: colours, home sections,
   floating WhatsApp, and the grooming landing page.
   ========================================================= */
body { background: radial-gradient(circle at 100% 0, rgba(19,133,139,.07), transparent 420px), radial-gradient(circle at 0 35%, rgba(244,122,11,.06), transparent 460px), #fffaf5 !important; }
.s-block { position: relative; }
.s-slider-block__title-right, .right-side { position: relative; }

/* buttons */
.s-button-primary, .s-button-solid.s-button-primary { background: var(--cz-orange) !important; border-color: var(--cz-orange) !important; }
.s-button-primary:hover { background: var(--cz-orange-d) !important; }
.s-button-element { position: relative; overflow: hidden; }
.cz-ripple { position: absolute; border-radius: 50%; pointer-events: none; background: currentColor; opacity: .25; scale: 0; animation: czRipple .6s ease-out forwards; }
@keyframes czRipple { to { scale: 1; opacity: 0; } }

/* card tilt glare */
.s-product-card-entry { position: relative; }
.s-product-card-entry::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; opacity: 0; transition: opacity .3s; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 0%), rgba(255,255,255,.55), transparent 55%); }
.s-product-card-entry.cz-tilt::after { opacity: 1; }

/* quick category tiles */
.cz-quick { margin: 28px auto 8px; }
.cz-quick h2 { font-family: var(--cz-display); font-size: 1.6rem; margin: 0 0 14px; display: flex; align-items: center; gap: 8px; color: var(--cz-ink); }
.cz-tiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.cz-tile { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 8px 14px; border-radius: 22px; background: #fff; border: 1.5px solid var(--cz-line); text-align: center; color: var(--cz-ink) !important; text-decoration: none !important; transition: transform .3s var(--cz-back), border-color .2s, box-shadow .3s; }
.cz-tile:hover { transform: translateY(-5px); border-color: var(--cz-teal); box-shadow: 0 16px 30px -18px rgba(19,133,139,.5); }
.cz-tile i { font-style: normal; font-size: 34px; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--cz-orange-l); transition: transform .5s var(--cz-back); }
.cz-tile:nth-child(even) i { background: var(--cz-teal-l); }
.cz-tile:hover i { transform: rotate(-10deg) scale(1.1); }
.cz-tile b { font-weight: 700; font-size: 14.5px; }
.cz-tile.hot { background: linear-gradient(180deg, #fff6ec, #fff); border-color: #f6cfa8; }
.cz-tile.hot b { color: var(--cz-orange-d); }

/* grooming band on the home page */
.cz-band { margin: 56px auto 24px; border-radius: 28px; padding: 34px 32px; background: linear-gradient(135deg, var(--cz-teal) 0%, var(--cz-teal-d) 100%); color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; position: relative; overflow: visible; }
.cz-band::before { content: "🐾"; position: absolute; left: 4%; bottom: -10px; font-size: 120px; opacity: .1; rotate: -18deg; pointer-events: none; }
.cz-band .eb { display: inline-block; background: rgba(255,255,255,.14); padding: 5px 14px; border-radius: 999px; font-weight: 700; font-size: 13px; margin-bottom: 8px; }
.cz-band h3 { font-family: var(--cz-display); font-size: 2rem; margin: 0 0 6px; line-height: 1.25; }
.cz-band p { margin: 0; color: #def3f2; max-width: 560px; }
.cz-band .btns { display: flex; gap: 10px; flex-wrap: wrap; }
.cz-btn { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 12px 22px; font-weight: 800; text-decoration: none !important; transition: transform .2s var(--cz-back), background .2s, box-shadow .2s; }
.cz-btn:hover { transform: translateY(-2px); }
.cz-btn.or { background: var(--cz-orange); color: #fff !important; box-shadow: 0 10px 22px -10px var(--cz-orange); }
.cz-btn.wh { background: #fff; color: var(--cz-teal-d) !important; }
.cz-btn.wa { background: #1fae5b; color: #fff !important; }

/* floating WhatsApp */
.cz-wa { position: fixed; left: 18px; bottom: 18px; width: 56px; height: 56px; border-radius: 50%; background: #1fae5b; display: grid; place-items: center; z-index: 60; box-shadow: 0 10px 22px -8px rgba(0,0,0,.4); transition: transform .3s var(--cz-back); }
.cz-wa:hover { transform: scale(1.1) rotate(-8deg); }
.cz-wa svg { width: 30px; height: 30px; fill: #fff; }
.cz-wa::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #1fae5b; animation: czPulse 2.6s ease-out infinite; }
@keyframes czPulse { 0% { scale: 1; opacity: .7; } 70%, 100% { scale: 1.6; opacity: 0; } }
.is-sticky-product-bar .cz-wa { bottom: 88px; }

/* paw trail (desktop, slider only) */
.cz-paw { position: fixed; z-index: 50; width: 22px; height: 22px; pointer-events: none; color: var(--cz-orange); opacity: 0; animation: czPawFade 1.4s ease-out forwards; }
.cz-paw svg { width: 100%; height: 100%; fill: currentColor; }
@keyframes czPawFade { 10% { opacity: .4; } 100% { opacity: 0; scale: .7; } }

/* Grooming landing page */
.cz-g { width: 100%; }
.cz-g-hero { position: relative; border-radius: 28px; padding: 44px 36px; overflow: hidden; background: radial-gradient(ellipse at 12% 25%, rgba(19,133,139,.14), transparent 55%), radial-gradient(ellipse at 90% 90%, #ffe4c8, transparent 55%), #fff; display: grid; grid-template-columns: 1.3fr 1fr; gap: 24px; align-items: center; }
.cz-g-hero .eb { display: inline-flex; gap: 6px; background: var(--cz-orange-l); color: var(--cz-orange-d); font-weight: 700; padding: 6px 14px; border-radius: 999px; font-size: 13px; }
.cz-g-hero h1 { font-family: var(--cz-display) !important; font-size: clamp(32px, 5vw, 54px) !important; line-height: 1.15; margin: 12px 0 8px !important; color: var(--cz-ink); }
.cz-g-hero h1 span { color: var(--cz-teal); }
.cz-g-hero .sub { font-size: 20px; font-weight: 700; margin: 0 0 6px; }
.cz-g-hero p { color: #6b5a4e; margin: 0 0 20px; font-size: 16.5px; }
.cz-g-hero .btns { display: flex; gap: 10px; flex-wrap: wrap; }
.cz-g-art { position: relative; display: grid; place-items: center; min-height: 260px; }
.cz-g-art img { width: min(280px, 90%); border-radius: 32px; background: #fff; box-shadow: 0 30px 60px -28px rgba(92,50,10,.45), 0 0 0 8px rgba(255,255,255,.8); animation: czLogoIn 1s var(--cz-back) backwards, czFloat 7s ease-in-out 1s infinite; }
.cz-g-art::before { content: ""; position: absolute; width: min(330px, 100%); aspect-ratio: 1; border-radius: 50%; border: 3px dashed rgba(19,133,139,.35); animation: czSpin 40s linear infinite; }
@keyframes czLogoIn { from { opacity: 0; scale: .6; rotate: -14deg; } }
@keyframes czFloat { 50% { transform: translateY(-10px) rotate(1.5deg); } }
@keyframes czSpin { to { rotate: 360deg; } }
.cz-g-sec { margin-top: 40px; }
.cz-g-title { font-family: var(--cz-display); font-size: 1.8rem; margin: 0 0 18px; color: var(--cz-ink); }
.cz-pk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.cz-pk { position: relative; background: #fff; border: 1px solid var(--cz-line); border-radius: 22px; padding: 22px 20px 20px; display: flex; flex-direction: column; gap: 6px; transition: transform .4s var(--cz-ease), box-shadow .3s; }
.cz-pk:hover { transform: translateY(-6px); box-shadow: 0 18px 36px -20px rgba(92,50,10,.45); }
.cz-pk .n { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: var(--cz-teal-l); color: var(--cz-teal-d); }
.cz-pk:nth-child(odd) .n { background: var(--cz-orange-l); color: var(--cz-orange-d); }
.cz-pk h3 { font-family: var(--cz-display); font-size: 1.2rem; margin: 4px 0 0; }
.cz-pk .pr { font-family: var(--cz-display); font-size: 2rem; font-weight: 800; margin: 2px 0; color: var(--cz-ink); }
.cz-pk .pr small { font-size: .9rem; color: #6b5a4e; font-weight: 600; }
.cz-pk .pr s { font-size: 1.2rem; color: #b3a397; margin-inline-end: 6px; }
.cz-pk p { margin: 0; color: #6b5a4e; font-size: 14.5px; }
.cz-pk ul { list-style: none; padding: 0; margin: 8px 0 14px; display: grid; gap: 6px; flex: 1; align-content: start; }
.cz-pk li { position: relative; padding-inline-start: 26px; font-size: 14.5px; }
.cz-pk li::before { content: "✓"; position: absolute; right: 0; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--cz-teal); color: #fff; font-size: 11px; display: grid; place-items: center; }
.cz-pk.best { border: 2px solid var(--cz-orange); background: linear-gradient(180deg, #fff6ec, #fff 45%); }
.cz-pk.best li::before { background: var(--cz-orange); }
.cz-pk .rib { position: absolute; top: -13px; left: 18px; background: var(--cz-ink); color: #fff; font-size: 12.5px; font-weight: 700; padding: 4px 12px; border-radius: 999px; animation: czRib 2.4s ease-in-out infinite; }
@keyframes czRib { 10% { rotate: -6deg; } 20% { rotate: 5deg; } 30%, 100% { rotate: 0; } }
.cz-pk .go { margin-top: auto; text-align: center; justify-content: center; border: 1.5px solid var(--cz-teal); color: var(--cz-teal-d) !important; background: #fff; }
.cz-pk.best .go { background: var(--cz-orange); border-color: var(--cz-orange); color: #fff !important; }
.cz-g-why { margin-top: 40px; border-radius: 28px; padding: 32px; background: linear-gradient(135deg, var(--cz-teal), var(--cz-teal-d)); color: #fff; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center; }
.cz-g-why h2 { font-family: var(--cz-display); font-size: 1.8rem; margin: 0 0 8px; }
.cz-g-why p { color: #def3f2; margin: 0; }
.cz-g-why ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cz-g-why li { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 16px; padding: 14px; font-weight: 600; transition: transform .3s; }
.cz-g-why li:hover { transform: translateY(-3px); }
.cz-g-why li i { display: block; font-style: normal; font-size: 22px; margin-bottom: 4px; }
.cz-g-book { margin-top: 40px; display: grid; grid-template-columns: 1fr 1.3fr; gap: 24px; align-items: start; }
.cz-g-visit { background: #fff; border: 1px solid var(--cz-line); border-radius: 22px; padding: 22px; }
.cz-g-visit h3 { font-family: var(--cz-display); margin: 0 0 8px; }
.cz-g-visit p { margin: 0 0 6px; color: #6b5a4e; }
.cz-g-form { position: relative; background: #fff; border: 1px solid var(--cz-line); border-radius: 22px; padding: 22px; display: grid; gap: 12px; box-shadow: 0 16px 40px -24px rgba(92,50,10,.35); }
.cz-g-form label { display: grid; gap: 6px; font-weight: 700; font-size: 14px; }
.cz-g-form input, .cz-g-form select, .cz-g-form textarea { font: inherit; font-weight: 400; border: 1.5px solid var(--cz-line); background: #fffaf5; border-radius: 12px; padding: 10px 12px; width: 100%; transition: border-color .2s, box-shadow .2s; }
.cz-g-form input:focus, .cz-g-form select:focus, .cz-g-form textarea:focus { outline: 0; border-color: var(--cz-teal); box-shadow: 0 0 0 4px rgba(19,133,139,.14); background: #fff; }
.cz-g-form .f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cz-seg { display: flex; gap: 8px; }
.cz-seg label { flex: 1; display: block; cursor: pointer; }
.cz-seg input { position: absolute; opacity: 0; pointer-events: none; }
.cz-seg span { display: block; text-align: center; padding: 10px; border: 1.5px solid var(--cz-line); border-radius: 12px; font-weight: 700; background: #fffaf5; transition: all .2s; }
.cz-seg input:checked + span { border-color: var(--cz-teal); background: var(--cz-teal-l); color: var(--cz-teal-d); }
.cz-g-form .err { color: #c0392b; font-weight: 700; margin: 0; font-size: 14px; }
.cz-g-form .send { justify-content: center; border: 0; cursor: pointer; font-size: 16px; }
.cz-g-form.shake { animation: czShake .45s; }
@keyframes czShake { 20%, 60% { translate: 8px 0; } 40%, 80% { translate: -8px 0; } }
.cz-g-note { text-align: center; color: #6b5a4e; font-size: 13px; margin: 0; }
.cz-g .content-orig { display: none; }

@media (max-width: 991px) {
  .cz-tiles { grid-template-columns: repeat(3, 1fr); }
  .cz-g-hero, .cz-g-why, .cz-g-book { grid-template-columns: 1fr; }
  .cz-g-art { order: -1; min-height: 220px; }
}
@media (max-width: 560px) {
  .cz-tiles { gap: 8px; }
  .cz-tile { padding: 12px 6px; border-radius: 18px; }
  .cz-tile i { width: 52px; height: 52px; font-size: 26px; }
  .cz-tile b { font-size: 13px; }
  .cz-band { padding: 26px 20px; margin-top: 64px; }
  .cz-band h3 { font-size: 1.5rem; }
  .cz-g-hero { padding: 28px 20px; }
  .cz-g-form .f2, .cz-g-why ul { grid-template-columns: 1fr; }
  .cz-wa { width: 50px; height: 50px; }
}
@media (prefers-reduced-motion: reduce) {
  .cz-g-art img, .cz-g-art::before, .cz-pk .rib, .cz-wa::after { animation: none !important; }
  .cz-paw { display: none; }
}

/* =========================================================
   v3 — professional product grid + conversion details
   ========================================================= */
.s-products-list-horizontal-cards { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 16px !important; }
.s-products-list-horizontal-cards > * { width: auto !important; max-width: none !important; margin: 0 !important; }
.s-product-card-horizontal { flex-direction: column !important; height: 100% !important; }
.s-product-card-horizontal .s-product-card-image { width: 100% !important; max-width: none !important; height: auto !important; aspect-ratio: 1 / 1; flex: none !important; background: linear-gradient(180deg, #fff, #fffaf4); }
.s-product-card-horizontal .s-product-card-image a, .s-product-card-horizontal .s-product-card-image img { width: 100% !important; height: 100% !important; }
.s-product-card-horizontal .s-product-card-image img { object-fit: contain !important; padding: 14px; }
.s-product-card-horizontal .s-product-card-content { width: 100% !important; padding: 12px 14px 14px !important; display: flex !important; flex-direction: column !important; flex: 1; gap: 6px; border-top: 1px solid var(--cz-line); }
.s-product-card-horizontal .s-product-card-content-footer { margin-top: auto !important; }
.s-product-card-content-title a { display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.5 !important; min-height: 3em; font-size: 14.5px !important; }
.s-product-card-price { font-size: 1.25rem !important; }
.s-product-card-entry .s-button-primary-outline { min-height: 42px; }
.s-product-card-entry salla-button[shape="icon"] .s-button-element { border-radius: 12px !important; }
.cz-badge { position: absolute; top: 12px; right: 12px; z-index: 4; background: var(--cz-ink); color: #fff; font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 999px; box-shadow: 0 6px 14px -6px rgba(0,0,0,.4); }
.cz-badge.hot { background: linear-gradient(90deg, var(--cz-orange), #ff9a3d); }
.cz-trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.cz-trust div { background: var(--cz-teal-l); color: var(--cz-teal-d); border-radius: 14px; padding: 10px 8px; text-align: center; font-size: 12.5px; font-weight: 700; line-height: 1.4; }
.cz-trust i { display: block; font-style: normal; font-size: 18px; }
.cz-ask { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; padding: 11px; border-radius: 12px; border: 1.5px solid #1fae5b; color: #148a46 !important; font-weight: 800; text-decoration: none !important; transition: background .2s; }
.cz-ask:hover { background: #eafaf1; }
.cz-ask svg { width: 20px; height: 20px; fill: #1fae5b; }
@media (max-width: 991px) { .s-products-list-horizontal-cards { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (max-width: 640px) {
  .s-products-list-horizontal-cards { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  .s-product-card-horizontal .s-product-card-content { padding: 10px !important; }
  .s-product-card-content-title a { font-size: 13px !important; }
  .s-product-card-price { font-size: 1.05rem !important; }
  .cz-badge { top: 8px; right: 8px; font-size: 11px; }
}

/* Grooming entry points: button next to the cart + strip above the slider */
.cz-nav-groom { display: inline-flex; align-items: center; gap: 6px; margin-inline-end: 10px; background: var(--cz-orange); color: #fff !important; font-weight: 800; font-size: 14px; padding: 8px 16px; border-radius: 999px; white-space: nowrap; text-decoration: none !important; box-shadow: 0 8px 18px -8px var(--cz-orange); animation: czNudge 4s ease-in-out infinite; transition: background .2s; }
.cz-nav-groom:hover { background: var(--cz-orange-d); }
.cz-nav-groom i { font-style: normal; }
@keyframes czNudge { 0%, 86%, 100% { transform: none; } 90% { transform: rotate(-5deg) scale(1.06); } 95% { transform: rotate(4deg); } }
.cz-strip { display: flex !important; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 14px auto 10px; padding: 12px 18px; border-radius: 18px; background: linear-gradient(90deg, var(--cz-teal-d), var(--cz-teal)); color: #fff !important; text-decoration: none !important; box-shadow: 0 12px 26px -16px rgba(19,133,139,.7); transition: transform .3s var(--cz-back); }
.cz-strip:hover { transform: translateY(-2px); }
.cz-strip .tag { background: rgba(255,255,255,.16); padding: 4px 12px; border-radius: 999px; font-weight: 800; font-size: 13px; }
.cz-strip b { flex: 1; font-weight: 700; font-size: 15px; }
.cz-strip .go { background: var(--cz-orange); padding: 7px 16px; border-radius: 999px; font-weight: 800; font-size: 14px; white-space: nowrap; }
.s-block--features__item[data-cz-link] { outline: none; }
.s-block--features__item[data-cz-link]:hover, .s-block--features__item[data-cz-link]:focus-visible { border-color: var(--cz-orange) !important; box-shadow: 0 14px 30px -18px rgba(244,122,11,.6); }
@media (max-width: 640px) {
  .cz-nav-groom { padding: 7px 11px; font-size: 12.5px; margin-inline-end: 6px; }
  .cz-strip { padding: 10px 12px; gap: 8px; }
  .cz-strip b { font-size: 13px; flex-basis: 100%; order: 2; }
  .cz-strip .tag { order: 1; } .cz-strip .go { order: 3; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .cz-nav-groom { animation: none; } }

/* QA fixes: slim grooming strip on phones, WhatsApp button only raised above the product sticky bar */
.is-sticky-product-bar .cz-wa { bottom: 18px; }
body.product-single.is-sticky-product-bar .cz-wa { bottom: 88px; }
@media (max-width: 640px) {
  .cz-strip { flex-wrap: nowrap !important; margin: 10px 12px 8px !important; width: auto !important; padding: 9px 10px 9px 12px !important; border-radius: 14px; gap: 8px; }
  .cz-strip .tag { display: none; }
  .cz-strip b { order: 0 !important; flex: 1 1 auto !important; flex-basis: auto !important; font-size: 12.5px !important; line-height: 1.45; }
  .cz-strip .go { order: 0 !important; padding: 7px 12px; font-size: 12.5px !important; }
}
.cz-g { overflow-x: clip; }
.cz-g-art { overflow: hidden; }

/* ===== Pre-hydration: no stacked-slides flash / layout shift on first load ===== */
salla-slider.home-slider:not(.hydrated){display:block;overflow:hidden;padding-bottom:35px}
salla-slider.home-slider:not(.hydrated) [slot="items"]{display:flex;justify-content:center;gap:16px}
salla-slider.home-slider:not(.hydrated) [slot="items"]>.swiper-slide{flex:0 0 min(1178px,77%)}
salla-slider.home-slider:not(.hydrated) [slot="items"]>.swiper-slide:not(:first-child){display:none}
salla-products-slider:not(.hydrated){display:block;min-height:493px}
@media (max-width:767px){
  salla-slider.home-slider:not(.hydrated) [slot="items"]>.swiper-slide{flex-basis:89%}
  salla-products-slider:not(.hydrated){min-height:387px}
}

/* product sliders: keep cards in one row until Swiper initializes */
salla-products-slider .swiper:not(.swiper-initialized){overflow:hidden}
salla-products-slider .swiper:not(.swiper-initialized) .swiper-wrapper,
salla-products-slider .swiper:not(.swiper-initialized) .swiper-wrapper>div:not([class]){display:flex}
salla-products-slider .swiper:not(.swiper-initialized) .s-products-slider-card{flex:0 0 320px;width:320px}
@media (max-width:767px){salla-products-slider .swiper:not(.swiper-initialized) .s-products-slider-card{flex-basis:250px;width:250px}}