Skip to main content

mommypetcare.com

Shop

/* =========================================================
MOMMY PET CARE SHOP — SCOPED INLINE CSS
Seluruh selector diawali #mpc-shop agar tidak bentrok
dengan theme/Elementor.
========================================================== */
#mpc-shop {
/* Palet utama mengikuti nuansa hangat dan natural Mommy Pet Care */
–mpc-primary: #1f6f68;
–mpc-primary-dark: #174f4a;
–mpc-primary-soft: #eaf5f2;
–mpc-accent: #e6a15a;
–mpc-accent-dark: #c77e35;
–mpc-accent-soft: #fff2df;
–mpc-secondary: #526963;
–mpc-ink: #17312e;
–mpc-muted: #64746f;
–mpc-border: #e7ded1;
–mpc-surface: #ffffff;
–mpc-bg: #fbf7ef;
–mpc-soft-green: #eef6f2;
–mpc-dark-surface: #153e3a;
–mpc-shadow: 0 16px 42px rgba(23, 49, 46, 0.10);
–mpc-radius-lg: 28px;
–mpc-radius-md: 18px;
–mpc-radius-sm: 12px;
width: 100%;
color: var(–mpc-ink);
background:
radial-gradient(circle at top left, rgba(230,161,90,.12), transparent 31%),
radial-gradient(circle at bottom right, rgba(31,111,104,.10), transparent 30%),
var(–mpc-bg);
font-family: inherit;
line-height: 1.65;
overflow: hidden;
}
#mpc-shop *,
#mpc-shop *::before,
#mpc-shop *::after {
box-sizing: border-box;
}
#mpc-shop a {
color: inherit;
}
#mpc-shop button,
#mpc-shop input {
font: inherit;
}
#mpc-shop ::selection {
background: var(–mpc-accent-soft);
color: var(–mpc-ink);
}
#mpc-shop [id] {
scroll-margin-top: 92px;
}
#mpc-shop .mpc-container {
width: min(1180px, calc(100% – 32px));
margin-inline: auto;
}
/* HERO */
#mpc-shop .mpc-hero {
position: relative;
padding: clamp(64px, 8vw, 112px) 0 42px;
}
#mpc-shop .mpc-hero-inner {
max-width: 860px;
margin-inline: auto;
text-align: center;
}
#mpc-shop .mpc-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0 0 16px;
padding: 8px 14px;
border: 1px solid rgba(31,111,104,.22);
border-radius: 999px;
background: rgba(255,255,255,.78);
color: var(–mpc-primary-dark);
font-size: 13px;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
box-shadow: 0 8px 24px rgba(65,45,38,.05);
}
#mpc-shop .mpc-eyebrow svg {
width: 17px;
height: 17px;
flex: 0 0 auto;
}
#mpc-shop .mpc-title {
margin: 0;
color: var(–mpc-ink);
font-size: clamp(34px, 5vw, 64px);
line-height: 1.08;
letter-spacing: -0.035em;
text-wrap: balance;
}
#mpc-shop .mpc-title-highlight {
color: var(–mpc-primary-dark);
}
#mpc-shop .mpc-intro {
max-width: 740px;
margin: 20px auto 0;
color: var(–mpc-muted);
font-size: clamp(16px, 2vw, 19px);
text-wrap: pretty;
}
#mpc-shop .mpc-trust-row {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px 18px;
margin-top: 24px;
color: var(–mpc-secondary);
font-size: 14px;
font-weight: 650;
}
#mpc-shop .mpc-trust-item {
display: inline-flex;
align-items: center;
gap: 7px;
}
#mpc-shop .mpc-trust-item svg {
width: 17px;
height: 17px;
color: var(–mpc-primary);
}
#mpc-shop .mpc-hero-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
margin-top: 30px;
}
#mpc-shop .mpc-button {
display: inline-flex;
min-height: 50px;
align-items: center;
justify-content: center;
gap: 9px;
padding: 12px 20px;
border: 1px solid transparent;
border-radius: 999px;
font-size: 14px;
font-weight: 800;
line-height: 1.2;
text-align: center;
text-decoration: none;
transition:
transform .18s ease,
background .18s ease,
border-color .18s ease,
color .18s ease,
box-shadow .18s ease;
}
#mpc-shop .mpc-button:hover {
transform: translateY(-2px);
}
#mpc-shop .mpc-button-primary {
border-color: var(–mpc-primary);
background: var(–mpc-primary);
color: #fff;
box-shadow: 0 12px 26px rgba(31,111,104,.22);
}
#mpc-shop .mpc-button-primary:hover {
border-color: var(–mpc-primary-dark);
background: var(–mpc-primary-dark);
color: #fff;
}
#mpc-shop .mpc-button-secondary {
border-color: var(–mpc-border);
background: rgba(255,255,255,.88);
color: var(–mpc-primary-dark);
box-shadow: 0 10px 24px rgba(23,49,46,.07);
}
#mpc-shop .mpc-button-secondary:hover {
border-color: rgba(31,111,104,.35);
background: #fff;
color: var(–mpc-primary-dark);
}
#mpc-shop .mpc-button-light {
border-color: rgba(255,255,255,.24);
background: #fff;
color: var(–mpc-primary-dark);
box-shadow: 0 12px 26px rgba(0,0,0,.10);
}
#mpc-shop .mpc-button-light:hover {
background: var(–mpc-accent-soft);
color: var(–mpc-primary-dark);
}
#mpc-shop .mpc-button-ghost-light {
border-color: rgba(255,255,255,.35);
background: rgba(255,255,255,.08);
color: #fff;
}
#mpc-shop .mpc-button-ghost-light:hover {
background: rgba(255,255,255,.16);
color: #fff;
}
#mpc-shop .mpc-button svg {
width: 18px;
height: 18px;
flex: 0 0 auto;
}
#mpc-shop .mpc-section {
padding: clamp(70px, 8vw, 112px) 0;
}
#mpc-shop .mpc-section-soft {
background: #fff;
}
#mpc-shop .mpc-section-heading {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(260px, .72fr);
align-items: end;
gap: 28px;
margin-bottom: 34px;
}
#mpc-shop .mpc-section-kicker {
margin: 0 0 10px;
color: var(–mpc-accent-dark);
font-size: 12px;
font-weight: 850;
letter-spacing: .08em;
text-transform: uppercase;
}
#mpc-shop .mpc-section-title {
margin: 0;
color: var(–mpc-ink);
font-size: clamp(30px, 4vw, 47px);
line-height: 1.12;
letter-spacing: -.03em;
text-wrap: balance;
}
#mpc-shop .mpc-section-copy {
margin: 0;
color: var(–mpc-muted);
font-size: 16px;
text-wrap: pretty;
}
/* FILTER PANEL */
#mpc-shop .mpc-filter-panel {
position: relative;
z-index: 2;
margin-bottom: 34px;
padding: 18px;
border: 1px solid rgba(234,223,218,.9);
border-radius: var(–mpc-radius-lg);
background: rgba(255,255,255,.90);
box-shadow: var(–mpc-shadow);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}
#mpc-shop .mpc-filter-top {
display: grid;
grid-template-columns: minmax(240px, 1fr) auto;
align-items: center;
gap: 16px;
}
#mpc-shop .mpc-search-wrap {
position: relative;
}
#mpc-shop .mpc-search-icon {
position: absolute;
left: 16px;
top: 50%;
width: 19px;
height: 19px;
color: var(–mpc-muted);
transform: translateY(-50%);
pointer-events: none;
}
#mpc-shop .mpc-search {
width: 100%;
min-height: 50px;
padding: 12px 48px 12px 46px;
border: 1px solid var(–mpc-border);
border-radius: 999px;
outline: none;
background: var(–mpc-bg);
color: var(–mpc-ink);
transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
#mpc-shop .mpc-search::placeholder {
color: #929b96;
}
#mpc-shop .mpc-search:focus {
border-color: rgba(31,111,104,.72);
background: #fff;
box-shadow: 0 0 0 4px rgba(31,111,104,.13);
}
#mpc-shop .mpc-clear-search {
position: absolute;
right: 9px;
top: 50%;
display: none;
width: 34px;
height: 34px;
padding: 0;
border: 0;
border-radius: 50%;
background: transparent;
color: var(–mpc-muted);
cursor: pointer;
transform: translateY(-50%);
}
#mpc-shop .mpc-clear-search:hover {
background: var(–mpc-primary-soft);
color: var(–mpc-primary-dark);
}
#mpc-shop .mpc-result-count {
margin: 0;
color: var(–mpc-muted);
font-size: 14px;
white-space: nowrap;
}
#mpc-shop .mpc-filter-scroll {
margin-top: 16px;
overflow-x: auto;
scrollbar-width: thin;
scrollbar-color: var(–mpc-border) transparent;
}
#mpc-shop .mpc-filter-buttons,
#mpc-shop .mpc-type-buttons {
display: flex;
width: max-content;
min-width: 100%;
gap: 9px;
}
#mpc-shop .mpc-filter-button,
#mpc-shop .mpc-type-button {
min-height: 42px;
padding: 9px 15px;
border: 1px solid var(–mpc-border);
border-radius: 999px;
background: #fff;
color: var(–mpc-muted);
font-size: 14px;
font-weight: 700;
white-space: nowrap;
cursor: pointer;
transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
#mpc-shop .mpc-filter-button:hover,
#mpc-shop .mpc-type-button:hover {
border-color: rgba(31,111,104,.45);
color: var(–mpc-primary-dark);
transform: translateY(-1px);
}
#mpc-shop .mpc-filter-button[aria-pressed=”true”] {
border-color: var(–mpc-primary);
background: var(–mpc-primary);
color: #fff;
box-shadow: 0 8px 20px rgba(31,111,104,.22);
}
#mpc-shop .mpc-type-filter {
display: none;
margin-top: 12px;
padding-top: 12px;
border-top: 1px dashed var(–mpc-border);
}
#mpc-shop .mpc-type-filter.is-visible {
display: block;
}
#mpc-shop .mpc-type-button[aria-pressed=”true”] {
border-color: rgba(89,107,98,.25);
background: var(–mpc-soft-green);
color: #415148;
}
/* PRODUCT GRID */
#mpc-shop .mpc-products-section {
padding: 0 0 clamp(72px, 9vw, 118px);
}
#mpc-shop .mpc-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 22px;
}
#mpc-shop .mpc-card {
display: flex;
min-width: 0;
flex-direction: column;
overflow: hidden;
border: 1px solid var(–mpc-border);
border-radius: var(–mpc-radius-md);
background: var(–mpc-surface);
box-shadow: 0 8px 24px rgba(65,45,38,.055);
transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
#mpc-shop .mpc-card:hover {
border-color: rgba(31,111,104,.34);
box-shadow: 0 18px 42px rgba(65,45,38,.11);
transform: translateY(-5px);
}
#mpc-shop .mpc-card-media {
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
background:
radial-gradient(circle at 25% 22%, rgba(230,161,90,.18), transparent 34%),
#f6f0e6;
}
#mpc-shop .mpc-card-image {
width: 100%;
height: 100%;
object-fit: contain;
padding: 18px;
transition: transform .35s ease;
}
#mpc-shop .mpc-card:hover .mpc-card-image {
transform: scale(1.035);
}
#mpc-shop .mpc-card-badges {
position: absolute;
top: 12px;
left: 12px;
display: flex;
flex-wrap: wrap;
gap: 7px;
max-width: calc(100% – 24px);
}
#mpc-shop .mpc-badge {
display: inline-flex;
align-items: center;
min-height: 27px;
padding: 5px 9px;
border: 1px solid rgba(255,255,255,.65);
border-radius: 999px;
background: rgba(255,255,255,.90);
color: var(–mpc-secondary);
font-size: 11px;
font-weight: 800;
line-height: 1;
box-shadow: 0 5px 14px rgba(65,45,38,.08);
backdrop-filter: blur(8px);
}
#mpc-shop .mpc-card-body {
display: flex;
flex: 1;
flex-direction: column;
padding: 20px;
}
#mpc-shop .mpc-card-category {
margin: 0 0 7px;
color: var(–mpc-accent-dark);
font-size: 12px;
font-weight: 800;
letter-spacing: .045em;
text-transform: uppercase;
}
#mpc-shop .mpc-card-title {
margin: 0;
color: var(–mpc-ink);
font-size: 19px;
line-height: 1.32;
letter-spacing: -0.018em;
}
#mpc-shop .mpc-card-subtitle {
margin: 7px 0 0;
color: var(–mpc-secondary);
font-size: 13px;
font-weight: 700;
line-height: 1.45;
}
#mpc-shop .mpc-card-description {
margin: 14px 0 0;
color: var(–mpc-muted);
font-size: 14px;
line-height: 1.65;
}
#mpc-shop .mpc-card-footer {
display: grid;
gap: 14px;
margin-top: auto;
padding-top: 20px;
}
#mpc-shop .mpc-price-label {
display: block;
margin-bottom: 2px;
color: #8a938f;
font-size: 11px;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
}
#mpc-shop .mpc-price {
display: block;
color: var(–mpc-ink);
font-size: 19px;
font-weight: 850;
line-height: 1.25;
}
#mpc-shop .mpc-product-link {
display: inline-flex;
min-height: 46px;
align-items: center;
justify-content: center;
gap: 9px;
padding: 11px 15px;
border: 1px solid var(–mpc-primary);
border-radius: 999px;
background: var(–mpc-primary);
color: #fff;
font-size: 14px;
font-weight: 800;
line-height: 1.2;
text-align: center;
text-decoration: none;
box-shadow: 0 8px 18px rgba(31,111,104,.22);
transition: background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
#mpc-shop .mpc-product-link:hover {
border-color: var(–mpc-primary-dark);
background: var(–mpc-primary-dark);
box-shadow: 0 10px 24px rgba(23,79,74,.24);
transform: translateY(-1px);
}
#mpc-shop .mpc-product-link svg {
width: 17px;
height: 17px;
flex: 0 0 auto;
}
/* EMPTY STATE + NOTICE */
#mpc-shop .mpc-empty {
display: none;
max-width: 640px;
margin: 36px auto 0;
padding: 30px;
border: 1px dashed var(–mpc-border);
border-radius: var(–mpc-radius-md);
background: rgba(255,255,255,.72);
text-align: center;
}
#mpc-shop .mpc-empty.is-visible {
display: block;
}
#mpc-shop .mpc-empty h2 {
margin: 0 0 8px;
font-size: 22px;
}
#mpc-shop .mpc-empty p {
margin: 0;
color: var(–mpc-muted);
}
#mpc-shop .mpc-note {
display: flex;
align-items: flex-start;
gap: 12px;
margin-top: 28px;
padding: 17px 18px;
border: 1px solid rgba(89,107,98,.18);
border-radius: var(–mpc-radius-sm);
background: rgba(237,245,239,.78);
color: #4d5c54;
font-size: 13px;
}
#mpc-shop .mpc-note svg {
width: 20px;
height: 20px;
flex: 0 0 auto;
margin-top: 2px;
color: var(–mpc-secondary);
}
#mpc-shop .mpc-toast {
position: fixed;
z-index: 99999;
left: 50%;
bottom: 24px;
max-width: calc(100% – 32px);
padding: 12px 17px;
border-radius: 999px;
background: var(–mpc-ink);
color: #fff;
font-size: 13px;
font-weight: 700;
box-shadow: 0 12px 30px rgba(39,50,45,.25);
opacity: 0;
pointer-events: none;
transform: translate(-50%, 18px);
transition: opacity .2s ease, transform .2s ease;
}
#mpc-shop .mpc-toast.is-visible {
opacity: 1;
transform: translate(-50%, 0);
}
/* HOME VISIT */
#mpc-shop .mpc-home-visit {
position: relative;
overflow: hidden;
background:
radial-gradient(circle at 90% 10%, rgba(230,161,90,.18), transparent 28%),
var(–mpc-dark-surface);
color: #fff;
}
#mpc-shop .mpc-home-visit-grid {
display: grid;
grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
align-items: center;
gap: clamp(30px, 6vw, 72px);
}
#mpc-shop .mpc-home-visit-media {
position: relative;
min-height: 510px;
overflow: hidden;
border: 1px solid rgba(255,255,255,.16);
border-radius: 30px;
background: rgba(255,255,255,.08);
box-shadow: 0 26px 70px rgba(0,0,0,.22);
}
#mpc-shop .mpc-home-visit-media img {
width: 100%;
height: 100%;
min-height: 510px;
object-fit: cover;
display: block;
}
#mpc-shop .mpc-home-visit-media::after {
position: absolute;
inset: 0;
content: “”;
background: linear-gradient(180deg, transparent 52%, rgba(8,31,29,.72));
pointer-events: none;
}
#mpc-shop .mpc-visit-card {
position: absolute;
z-index: 2;
right: 18px;
bottom: 18px;
left: 18px;
display: flex;
align-items: center;
gap: 12px;
padding: 15px 16px;
border: 1px solid rgba(255,255,255,.22);
border-radius: 18px;
background: rgba(255,255,255,.12);
color: #fff;
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}
#mpc-shop .mpc-visit-card svg {
width: 24px;
height: 24px;
flex: 0 0 auto;
color: #ffd9aa;
}
#mpc-shop .mpc-home-visit .mpc-section-kicker {
color: #ffd29e;
}
#mpc-shop .mpc-home-visit .mpc-section-title,
#mpc-shop .mpc-home-visit .mpc-section-copy {
color: #fff;
}
#mpc-shop .mpc-home-visit .mpc-section-copy {
margin-top: 18px;
color: rgba(255,255,255,.78);
}
#mpc-shop .mpc-benefit-list {
display: grid;
gap: 12px;
margin: 28px 0 0;
padding: 0;
list-style: none;
}
#mpc-shop .mpc-benefit-item {
display: flex;
align-items: flex-start;
gap: 12px;
color: rgba(255,255,255,.87);
font-size: 14px;
}
#mpc-shop .mpc-benefit-icon {
display: grid;
width: 28px;
height: 28px;
flex: 0 0 28px;
place-items: center;
border-radius: 50%;
background: rgba(230,161,90,.18);
color: #ffd29e;
}
#mpc-shop .mpc-benefit-icon svg {
width: 15px;
height: 15px;
}
#mpc-shop .mpc-home-visit-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 30px;
}
#mpc-shop .mpc-availability {
display: flex;
flex-wrap: wrap;
gap: 9px;
margin-top: 24px;
}
#mpc-shop .mpc-availability span {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 7px 10px;
border: 1px solid rgba(255,255,255,.14);
border-radius: 999px;
background: rgba(255,255,255,.07);
color: rgba(255,255,255,.78);
font-size: 12px;
font-weight: 700;
}
/* BLOG */
#mpc-shop .mpc-blog-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 22px;
}
#mpc-shop .mpc-blog-card {
overflow: hidden;
border: 1px solid var(–mpc-border);
border-radius: 22px;
background: var(–mpc-surface);
box-shadow: 0 10px 28px rgba(23,49,46,.065);
transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
#mpc-shop .mpc-blog-card:hover {
border-color: rgba(31,111,104,.30);
box-shadow: 0 18px 44px rgba(23,49,46,.11);
transform: translateY(-5px);
}
#mpc-shop .mpc-blog-image-link {
display: block;
aspect-ratio: 16 / 10;
overflow: hidden;
background: var(–mpc-primary-soft);
}
#mpc-shop .mpc-blog-image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .35s ease;
}
#mpc-shop .mpc-blog-card:hover .mpc-blog-image {
transform: scale(1.035);
}
#mpc-shop .mpc-blog-content {
padding: 21px;
}
#mpc-shop .mpc-blog-meta {
display: flex;
flex-wrap: wrap;
gap: 7px 12px;
margin-bottom: 10px;
color: var(–mpc-muted);
font-size: 12px;
font-weight: 700;
}
#mpc-shop .mpc-blog-category {
color: var(–mpc-accent-dark);
}
#mpc-shop .mpc-blog-title {
margin: 0;
color: var(–mpc-ink);
font-size: 20px;
line-height: 1.35;
letter-spacing: -.02em;
}
#mpc-shop .mpc-blog-title a {
text-decoration: none;
}
#mpc-shop .mpc-blog-title a:hover {
color: var(–mpc-primary);
}
#mpc-shop .mpc-blog-excerpt {
margin: 12px 0 0;
color: var(–mpc-muted);
font-size: 14px;
}
#mpc-shop .mpc-text-link {
display: inline-flex;
align-items: center;
gap: 7px;
margin-top: 18px;
color: var(–mpc-primary);
font-size: 14px;
font-weight: 850;
text-decoration: none;
}
#mpc-shop .mpc-text-link:hover {
color: var(–mpc-primary-dark);
}
#mpc-shop .mpc-text-link svg {
width: 16px;
height: 16px;
transition: transform .18s ease;
}
#mpc-shop .mpc-text-link:hover svg {
transform: translateX(3px);
}
#mpc-shop .mpc-blog-footer {
display: flex;
justify-content: center;
margin-top: 30px;
}
/* FINAL CTA */
#mpc-shop .mpc-final-cta-wrap {
padding: clamp(68px, 8vw, 108px) 0;
background: var(–mpc-bg);
}
#mpc-shop .mpc-final-cta {
position: relative;
overflow: hidden;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 28px;
padding: clamp(30px, 5vw, 58px);
border-radius: 30px;
background:
radial-gradient(circle at 92% 12%, rgba(255,255,255,.18), transparent 28%),
linear-gradient(135deg, var(–mpc-primary-dark), var(–mpc-primary));
color: #fff;
box-shadow: 0 24px 62px rgba(23,79,74,.22);
}
#mpc-shop .mpc-final-cta::before {
position: absolute;
width: 210px;
height: 210px;
right: -80px;
bottom: -115px;
border: 34px solid rgba(230,161,90,.20);
border-radius: 50%;
content: “”;
}
#mpc-shop .mpc-final-cta-content,
#mpc-shop .mpc-final-cta-actions {
position: relative;
z-index: 1;
}
#mpc-shop .mpc-final-cta-kicker {
margin: 0 0 9px;
color: #ffd29e;
font-size: 12px;
font-weight: 850;
letter-spacing: .08em;
text-transform: uppercase;
}
#mpc-shop .mpc-final-cta h2 {
max-width: 720px;
margin: 0;
color: #fff;
font-size: clamp(28px, 4vw, 44px);
line-height: 1.15;
letter-spacing: -.03em;
text-wrap: balance;
}
#mpc-shop .mpc-final-cta p {
max-width: 690px;
margin: 14px 0 0;
color: rgba(255,255,255,.80);
font-size: 15px;
}
#mpc-shop .mpc-final-cta-actions {
display: grid;
gap: 10px;
min-width: 220px;
}
/* FLOATING WHATSAPP */
#mpc-shop .mpc-floating-wa {
position: fixed;
z-index: 9998;
right: 20px;
bottom: 20px;
display: inline-flex;
min-height: 52px;
align-items: center;
gap: 9px;
padding: 12px 17px;
border: 1px solid rgba(255,255,255,.35);
border-radius: 999px;
background: #1f6f68;
color: #fff;
font-size: 13px;
font-weight: 850;
text-decoration: none;
box-shadow: 0 14px 34px rgba(23,79,74,.28);
transition: transform .18s ease, background .18s ease;
}
#mpc-shop .mpc-floating-wa:hover {
background: var(–mpc-primary-dark);
color: #fff;
transform: translateY(-2px);
}
#mpc-shop .mpc-floating-wa svg {
width: 20px;
height: 20px;
}
/* RESPONSIVE */
@media (max-width: 1024px) {
#mpc-shop .mpc-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
#mpc-shop .mpc-home-visit-grid {
grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
gap: 34px;
}
#mpc-shop .mpc-home-visit-media,
#mpc-shop .mpc-home-visit-media img {
min-height: 460px;
}
}
@media (max-width: 780px) {
#mpc-shop .mpc-container {
width: min(100% – 24px, 1180px);
}
#mpc-shop .mpc-hero {
padding-top: 56px;
}
#mpc-shop .mpc-filter-top {
grid-template-columns: 1fr;
}
#mpc-shop .mpc-section-heading,
#mpc-shop .mpc-home-visit-grid,
#mpc-shop .mpc-final-cta {
grid-template-columns: 1fr;
}
#mpc-shop .mpc-home-visit-media {
order: 2;
}
#mpc-shop .mpc-blog-grid {
grid-template-columns: 1fr 1fr;
}
#mpc-shop .mpc-final-cta-actions {
display: flex;
flex-wrap: wrap;
min-width: 0;
}
#mpc-shop .mpc-result-count {
padding-inline: 6px;
}
#mpc-shop .mpc-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
}
@media (max-width: 540px) {
#mpc-shop .mpc-grid,
#mpc-shop .mpc-blog-grid {
grid-template-columns: 1fr;
}
#mpc-shop .mpc-hero-actions,
#mpc-shop .mpc-home-visit-actions,
#mpc-shop .mpc-final-cta-actions {
display: grid;
}
#mpc-shop .mpc-button {
width: 100%;
}
#mpc-shop .mpc-home-visit-media,
#mpc-shop .mpc-home-visit-media img {
min-height: 390px;
}
#mpc-shop .mpc-floating-wa {
right: 12px;
bottom: 12px;
width: 50px;
height: 50px;
min-height: 50px;
justify-content: center;
padding: 0;
}
#mpc-shop .mpc-floating-wa span {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
}
#mpc-shop .mpc-filter-panel {
padding: 14px;
border-radius: 22px;
}
#mpc-shop .mpc-card-media {
aspect-ratio: 16 / 11;
}
#mpc-shop .mpc-card-body {
padding: 18px;
}
}
@media (prefers-reduced-motion: reduce) {
#mpc-shop *,
#mpc-shop *::before,
#mpc-shop *::after {
scroll-behavior: auto !important;
transition-duration: .01ms !important;
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
}
}


Pilihan untuk Anabul

Rekomendasi Produk untuk
Kucing & Anjing

Jelajahi pilihan makanan, snack, dan produk perawatan yang dapat membantu
melengkapi kebutuhan harian anabul Anda. Gunakan filter untuk menemukan
kategori produk yang paling sesuai.


Jelajahi Produk



Konsultasi dengan Dokter


Informasi produk ringkas

Tetap konsultasikan kebutuhan medis

Terhubung ke halaman produk





Menampilkan 0 produk









Produk belum ditemukan

Coba gunakan kata kunci lain atau pilih kategori yang berbeda.



Kucing yang dapat diperiksa melalui layanan dokter hewan Home Visit Mommy Pet Care

Dokter datang ke lokasi Anda
Lebih praktis dan nyaman bagi anabul.

Layanan Home Visit

Perawatan dokter hewan langsung di rumah Anda.

Mommy Pet Care menyediakan pemeriksaan, konsultasi, vaksinasi, dan
perawatan ringan untuk kucing maupun anjing tanpa membuat anabul harus
menghadapi perjalanan yang menegangkan.


  • Mengurangi stres perjalanan. Anabul tetap berada di lingkungan yang sudah dikenalnya.

  • Jadwal lebih praktis. Keluhan, foto, video, dan titik lokasi dapat dikirim lebih dahulu.

  • Evaluasi sesuai kondisi pasien. Dokter memberikan arahan perawatan dan tindak lanjut yang dibutuhkan.

09.00–21.00 WIB
Senin–Minggu
By appointment
Sidoarjo & Surabaya

Pelajari Home Visit



Cek Jadwal via WhatsApp

Edukasi Pet Parents

Baca sebelum panik. Konsultasikan bila ragu.

Artikel pilihan untuk membantu Anda memahami makanan, perawatan,
gejala kesehatan, dan langkah yang lebih tepat untuk anabul.


Lihat Semua Artikel


Butuh Arahan?

Belum yakin produk atau perawatan mana yang sesuai untuk anabul?

Ceritakan jenis hewan, usia, kondisi, pola makan, atau keluhan yang
sedang dialami. Tim Mommy Pet Care akan membantu memberikan arahan
awal dan menentukan langkah berikutnya.


Konsultasi via WhatsApp


Lihat Home Visit



Konsultasi WhatsApp

Daftar produk memerlukan JavaScript agar dapat ditampilkan dan difilter.

Showing all 2 results