/* =========================================================
WAGGYMATE SHOP PAGE
Custom WooCommerce / Store API Shop
========================================================= */
.wmx-shop{
–brown:#3B1C10;
–brown-dark:#29140B;
–brown-soft:#5B3020;
–cream:#F7EFE5;
–soft:#FFF9F3;
–lavender:#DCCFE5;
–caramel:#C58A57;
–caramel-dark:#A96F40;
–line:#E7DCD2;
–muted:#806B5D;
–white:#FFFFFF;
–black:#151419;
width:100%;
max-width:100%;
overflow:hidden;
background:var(–soft);
color:var(–brown);
font-family:
Inter,
-apple-system,
BlinkMacSystemFont,
“Segoe UI”,
sans-serif;
box-sizing:border-box;
}
.wmx-shop *,
.wmx-shop *::before,
.wmx-shop *::after{
box-sizing:border-box;
}
.wmx-shop img{
display:block;
max-width:100%;
}
.wmx-shop a{
color:inherit;
text-decoration:none;
}
.wmx-shop button,
.wmx-shop input,
.wmx-shop select{
font:inherit;
}
.wmx-shop-container{
width:min(1240px,calc(100% – 48px));
max-width:1240px;
margin:0 auto;
min-width:0;
}
/* =========================================================
GLOBAL BUTTON
========================================================= */
.wmx-shop-btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
min-height:47px;
padding:0 22px;
border:0;
border-radius:999px;
background:var(–brown);
color:white!important;
font-size:12px;
font-weight:800;
cursor:pointer;
transition:
transform .25s ease,
background .25s ease;
}
.wmx-shop-btn:hover{
transform:translateY(-2px);
background:var(–brown-dark);
}
/* =========================================================
UNIVERSAL IMAGE STAGE
========================================================= */
.wmx-shop-tilt{
position:relative;
min-width:0;
perspective:1100px;
transform-style:preserve-3d;
}
.wmx-shop-stage{
position:relative;
width:100%;
max-width:100%;
overflow:hidden;
transform-style:preserve-3d;
–rx:0deg;
–ry:0deg;
–tx:0px;
–ty:0px;
–scale:1;
transform:
perspective(1100px)
rotateX(var(–rx))
rotateY(var(–ry))
translate3d(var(–tx),var(–ty),0)
scale(var(–scale));
will-change:transform;
transition:
transform .55s cubic-bezier(.16,.84,.24,1),
box-shadow .4s ease;
}
.wmx-shop-stage img{
width:100%;
height:100%;
max-width:none;
object-fit:cover;
transform:scale(1.001);
transition:
transform .8s cubic-bezier(.16,.84,.24,1);
}
.wmx-shop-tilt:hover .wmx-shop-stage img{
transform:scale(1.035);
}
/* =========================================================
HERO / VIDEO
========================================================= */
.wmx-shop-hero{
position:relative;
padding:18px;
background:var(–cream);
}
.wmx-shop-hero-video{
position:relative;
height:min(680px,78vh);
min-height:520px;
overflow:hidden;
border-radius:34px;
background:#211710;
}
.wmx-shop-hero-video video{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
transform:scale(1.01);
}
.wmx-shop-hero-video::after{
content:””;
position:absolute;
inset:0;
background:
linear-gradient(
90deg,
rgba(35,17,10,.76) 0%,
rgba(35,17,10,.38) 42%,
rgba(35,17,10,.08) 78%
);
}
.wmx-shop-hero-content{
position:absolute;
z-index:3;
left:clamp(28px,7vw,92px);
bottom:clamp(45px,8vw,85px);
max-width:640px;
color:white;
}
.wmx-shop-kicker{
display:inline-flex;
align-items:center;
gap:9px;
margin-bottom:16px;
font-size:10px;
font-weight:900;
letter-spacing:.18em;
text-transform:uppercase;
}
.wmx-shop-kicker::before{
content:””;
width:28px;
height:1px;
background:currentColor;
}
.wmx-shop-hero-title{
margin:0;
font-size:clamp(47px,6.5vw,88px);
line-height:.91;
letter-spacing:-.06em;
}
.wmx-shop-hero-copy{
max-width:500px;
margin:23px 0 28px;
font-size:16px;
line-height:1.7;
color:rgba(255,255,255,.88);
}
.wmx-shop-video-badge{
position:absolute;
z-index:4;
top:28px;
right:28px;
padding:9px 14px;
border-radius:999px;
background:rgba(255,255,255,.88);
color:var(–brown);
font-size:9px;
font-weight:900;
letter-spacing:.13em;
text-transform:uppercase;
}
/* =========================================================
BREADCRUMB
========================================================= */
.wmx-shop-breadcrumb{
padding:27px 0 0;
background:var(–soft);
}
.wmx-shop-breadcrumb-inner{
display:flex;
align-items:center;
gap:9px;
font-size:10px;
color:#927D70;
}
.wmx-shop-breadcrumb a:hover{
color:var(–brown);
}
.wmx-shop-breadcrumb-current{
color:var(–brown);
font-weight:800;
}
/* =========================================================
INTRO
========================================================= */
.wmx-shop-intro{
padding:60px 0 55px;
background:var(–soft);
}
.wmx-shop-intro-grid{
display:grid;
grid-template-columns:
minmax(0,1fr)
minmax(0,.8fr);
gap:80px;
align-items:end;
}
.wmx-shop-intro h1{
margin:0;
font-size:clamp(43px,5.5vw,72px);
line-height:.94;
letter-spacing:-.055em;
}
.wmx-shop-intro p{
max-width:520px;
margin:0;
font-size:15px;
line-height:1.8;
color:var(–muted);
}
/* =========================================================
CATEGORY NAV
========================================================= */
.wmx-shop-categories{
padding:0 0 80px;
background:var(–soft);
}
.wmx-shop-category-grid{
display:grid;
grid-template-columns:
repeat(6,minmax(0,1fr));
gap:15px;
}
.wmx-shop-category{
min-width:0;
text-align:center;
}
.wmx-shop-category .wmx-shop-stage{
aspect-ratio:1.12;
border-radius:23px;
background:#e9dfd5;
box-shadow:
0 11px 30px rgba(59,28,16,.08);
}
.wmx-shop-category h3{
margin:14px 0 5px;
font-size:13px;
line-height:1.25;
}
.wmx-shop-category span{
font-size:9px;
color:#8B7567;
}
/* =========================================================
PROMOTIONAL SPLIT
========================================================= */
.wmx-shop-promo{
padding:0 0 100px;
background:var(–soft);
}
.wmx-shop-promo-grid{
display:grid;
grid-template-columns:
minmax(0,1fr)
minmax(0,1fr);
gap:18px;
}
.wmx-shop-promo-card{
position:relative;
min-width:0;
}
.wmx-shop-promo-card .wmx-shop-stage{
height:400px;
border-radius:28px;
}
.wmx-shop-promo-card .wmx-shop-stage::after{
content:””;
position:absolute;
inset:0;
background:
linear-gradient(
transparent 38%,
rgba(34,17,10,.68)
);
}
.wmx-shop-promo-copy{
position:absolute;
z-index:3;
left:27px;
right:27px;
bottom:26px;
color:white;
}
.wmx-shop-promo-copy small{
display:block;
margin-bottom:7px;
font-size:9px;
font-weight:900;
letter-spacing:.15em;
text-transform:uppercase;
}
.wmx-shop-promo-copy h2{
margin:0 0 7px;
font-size:30px;
line-height:1;
letter-spacing:-.04em;
}
.wmx-shop-promo-copy p{
max-width:350px;
margin:0;
font-size:12px;
line-height:1.5;
color:rgba(255,255,255,.85);
}
/* =========================================================
PRODUCT AREA
========================================================= */
.wmx-shop-products{
padding:100px 0;
background:var(–cream);
}
.wmx-shop-products-head{
display:flex;
align-items:end;
justify-content:space-between;
gap:30px;
margin-bottom:34px;
}
.wmx-shop-products-head h2{
margin:0;
font-size:clamp(34px,4vw,53px);
line-height:1;
letter-spacing:-.045em;
}
.wmx-shop-product-count{
margin-top:10px;
font-size:11px;
color:#856F61;
}
/* =========================================================
FILTER BAR
========================================================= */
.wmx-shop-tools{
display:flex;
align-items:center;
justify-content:space-between;
gap:15px;
margin-bottom:30px;
padding:10px;
border:1px solid var(–line);
border-radius:18px;
background:rgba(255,255,255,.58);
}
.wmx-shop-filter-scroll{
display:flex;
align-items:center;
gap:7px;
overflow-x:auto;
scrollbar-width:none;
}
.wmx-shop-filter-scroll::-webkit-scrollbar{
display:none;
}
.wmx-shop-filter{
flex:0 0 auto;
min-height:36px;
padding:0 14px;
border:1px solid transparent;
border-radius:999px;
background:transparent;
color:#745F52;
font-size:10px;
font-weight:800;
cursor:pointer;
transition:
background .25s ease,
color .25s ease,
border .25s ease;
}
.wmx-shop-filter:hover{
border-color:var(–line);
}
.wmx-shop-filter.is-active{
background:var(–brown);
color:white;
}
.wmx-shop-sort{
flex:0 0 auto;
height:36px;
padding:0 13px;
border:1px solid var(–line);
border-radius:999px;
background:white;
color:var(–brown);
font-size:10px;
font-weight:800;
outline:none;
}
/* =========================================================
SEARCH
========================================================= */
.wmx-shop-search{
display:flex;
align-items:center;
gap:9px;
width:220px;
height:38px;
padding:0 13px;
border:1px solid var(–line);
border-radius:999px;
background:white;
}
.wmx-shop-search-icon{
font-size:13px;
}
.wmx-shop-search input{
width:100%;
border:0;
outline:0;
background:transparent;
color:var(–brown);
font-size:11px;
}
.wmx-shop-search input::placeholder{
color:#A29185;
}
/* =========================================================
PRODUCT GRID
========================================================= */
.wmx-shop-grid{
display:grid;
grid-template-columns:
repeat(4,minmax(0,1fr));
gap:26px 17px;
min-width:0;
}
.wmx-shop-product{
position:relative;
min-width:0;
color:var(–brown);
}
.wmx-shop-product-image{
position:relative;
aspect-ratio:1/1.08;
overflow:hidden;
border-radius:23px;
background:#EFE5DB;
box-shadow:
0 11px 27px rgba(59,28,16,.08);
}
.wmx-shop-product-image img{
width:100%;
height:100%;
object-fit:cover;
}
.wmx-shop-product-badge{
position:absolute;
z-index:4;
top:12px;
left:12px;
padding:7px 9px;
border-radius:999px;
background:white;
font-size:8px;
font-weight:900;
letter-spacing:.08em;
text-transform:uppercase;
box-shadow:
0 5px 15px rgba(0,0,0,.08);
}
.wmx-shop-product-heart{
position:absolute;
z-index:4;
top:10px;
right:10px;
width:34px;
height:34px;
display:grid;
place-items:center;
border:0;
border-radius:50%;
background:rgba(255,255,255,.9);
color:var(–brown);
cursor:pointer;
}
.wmx-shop-product-info{
padding:15px 3px 0;
}
.wmx-shop-product-category{
margin-bottom:6px;
font-size:8px;
font-weight:900;
letter-spacing:.13em;
text-transform:uppercase;
color:var(–caramel-dark);
}
.wmx-shop-product-name{
min-height:39px;
margin:0 0 7px;
font-size:14px;
line-height:1.35;
letter-spacing:-.015em;
}
.wmx-shop-product-price{
display:flex;
align-items:center;
gap:8px;
font-size:13px;
font-weight:900;
}
.wmx-shop-product-old{
color:#9D8C80;
font-size:11px;
font-weight:500;
text-decoration:line-through;
}
.wmx-shop-product-link{
display:inline-flex;
margin-top:10px;
font-size:9px;
font-weight:900;
letter-spacing:.08em;
text-transform:uppercase;
color:var(–brown);
border-bottom:1px solid var(–caramel);
}
/* =========================================================
LOADING
========================================================= */
.wmx-shop-loading{
grid-column:1/-1;
display:grid;
place-items:center;
min-height:280px;
border:1px solid var(–line);
border-radius:24px;
background:rgba(255,255,255,.4);
color:#806C60;
}
.wmx-shop-loader{
width:30px;
height:30px;
margin-bottom:12px;
border:2px solid #E1D4C9;
border-top-color:var(–brown);
border-radius:50%;
animation:wmxSpin .8s linear infinite;
}
@keyframes wmxSpin{
to{
transform:rotate(360deg);
}
}
.wmx-shop-empty{
grid-column:1/-1;
padding:70px 20px;
text-align:center;
color:#806C60;
}
/* =========================================================
LOAD MORE
========================================================= */
.wmx-shop-loadmore-wrap{
display:flex;
justify-content:center;
margin-top:45px;
}
.wmx-shop-loadmore{
min-width:150px;
}
/* =========================================================
MID-PAGE EDITORIAL
========================================================= */
.wmx-shop-editorial{
padding:110px 0;
background:var(–soft);
}
.wmx-shop-editorial-grid{
display:grid;
grid-template-columns:
minmax(0,.82fr)
minmax(0,1.18fr);
align-items:center;
gap:75px;
}
.wmx-shop-editorial-copy{
max-width:470px;
}
.wmx-shop-editorial-copy h2{
margin:0 0 22px;
font-size:clamp(39px,5vw,65px);
line-height:.95;
letter-spacing:-.055em;
}
.wmx-shop-editorial-copy p{
margin:0 0 17px;
font-size:15px;
line-height:1.8;
color:var(–muted);
}
.wmx-shop-editorial-image .wmx-shop-stage{
height:540px;
border-radius:30px;
box-shadow:
0 24px 55px rgba(59,28,16,.11);
}
/* =========================================================
TRUST STRIP
========================================================= */
.wmx-shop-trust{
padding:60px 0;
background:var(–lavender);
}
.wmx-shop-trust-grid{
display:grid;
grid-template-columns:
repeat(4,minmax(0,1fr));
gap:18px;
}
.wmx-shop-trust-item{
text-align:center;
}
.wmx-shop-trust-icon{
width:43px;
height:43px;
display:grid;
place-items:center;
margin:0 auto 13px;
border-radius:50%;
background:rgba(255,255,255,.6);
font-size:15px;
}
.wmx-shop-trust-item h3{
margin:0 0 6px;
font-size:13px;
}
.wmx-shop-trust-item p{
margin:0;
font-size:10px;
line-height:1.5;
color:#745E6A;
}
/* =========================================================
SEO / BOTTOM CONTENT
========================================================= */
.wmx-shop-bottom{
padding:85px 0 105px;
background:var(–soft);
}
.wmx-shop-bottom-inner{
max-width:850px;
margin:0 auto;
text-align:center;
}
.wmx-shop-bottom h2{
margin:0 0 18px;
font-size:32px;
letter-spacing:-.035em;
}
.wmx-shop-bottom p{
margin:0 auto 14px;
font-size:14px;
line-height:1.8;
color:#7D695C;
}
/* =========================================================
RESPONSIVE
========================================================= */
@media(max-width:1050px){
.wmx-shop-category-grid{
grid-template-columns:
repeat(3,minmax(0,1fr));
}
.wmx-shop-grid{
grid-template-columns:
repeat(3,minmax(0,1fr));
}
.wmx-shop-intro-grid{
gap:45px;
}
}
@media(max-width:800px){
.wmx-shop-container{
width:calc(100% – 32px);
}
.wmx-shop-hero{
padding:8px;
}
.wmx-shop-hero-video{
min-height:570px;
height:72vh;
border-radius:25px;
}
.wmx-shop-hero-content{
left:25px;
right:25px;
bottom:55px;
}
.wmx-shop-hero-title{
font-size:48px;
}
.wmx-shop-intro-grid{
grid-template-columns:1fr;
gap:22px;
}
.wmx-shop-promo-grid{
grid-template-columns:1fr;
}
.wmx-shop-products-head{
display:block;
}
.wmx-shop-tools{
align-items:stretch;
flex-direction:column;
}
.wmx-shop-search{
width:100%;
}
.wmx-shop-sort{
width:100%;
}
.wmx-shop-grid{
grid-template-columns:
repeat(2,minmax(0,1fr));
gap:25px 13px;
}
.wmx-shop-editorial-grid{
grid-template-columns:1fr;
gap:45px;
}
.wmx-shop-editorial-image .wmx-shop-stage{
height:460px;
}
.wmx-shop-trust-grid{
grid-template-columns:
repeat(2,minmax(0,1fr));
}
}
@media(max-width:560px){
.wmx-shop-container{
width:calc(100% – 28px);
}
.wmx-shop-hero-video{
min-height:570px;
}
.wmx-shop-hero-title{
font-size:42px;
}
.wmx-shop-hero-copy{
font-size:14px;
}
.wmx-shop-video-badge{
top:18px;
right:18px;
}
.wmx-shop-intro{
padding:50px 0 45px;
}
.wmx-shop-intro h1{
font-size:44px;
}
.wmx-shop-category-grid{
grid-template-columns:
repeat(2,minmax(0,1fr));
gap:25px 13px;
}
.wmx-shop-category .wmx-shop-stage{
border-radius:20px;
}
.wmx-shop-promo-card .wmx-shop-stage{
height:350px;
border-radius:23px;
}
.wmx-shop-products{
padding:75px 0;
}
.wmx-shop-grid{
grid-template-columns:
repeat(2,minmax(0,1fr));
gap:30px 12px;
}
.wmx-shop-product-image{
border-radius:18px;
}
.wmx-shop-product-name{
font-size:12px;
}
.wmx-shop-editorial{
padding:75px 0;
}
.wmx-shop-editorial-image .wmx-shop-stage{
height:390px;
border-radius:23px;
}
.wmx-shop-trust-grid{
gap:25px 10px;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media(prefers-reduced-motion:reduce){
.wmx-shop *,
.wmx-shop *::before,
.wmx-shop *::after{
animation-duration:.001ms!important;
animation-iteration-count:1!important;
transition-duration:.001ms!important;
}
}

Home

›
Shop

Walk & Safety

Leashes · Collars · Harnesses

Food & Treats

Treats · Feeding · Hydration

Enrichment

Play · Think · Discover

Comfort & Bedding

Beds · Rest · Relax

Dog Essentials

ID · Safety · Seasonal

Grooming

Clean · Fresh · Care

OUTDOOR ESSENTIALS

Ready when
they are.

Make every walk easier, safer
and a little more enjoyable.

PLAY & ENRICHMENT

Boredom
doesn’t belong here.

Give curious noses and busy brains
something fun to do.