/* Home page pieces: product rows that reuse the shop card, and "Shop by pet and need".
   Markup: includes/buy-now/class-home-kit.php. Palette follows the store. */

/* ── product row: the shop's card in a 4-up grid ───────────────────────── */
.wd-sp.wd-sp--home { background: transparent !important; padding: 0 !important; }
.wd-sp--home .wd-sp__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 1100px) { .wd-sp.wd-sp--home .wd-sp__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
@media (max-width: 820px) { .wd-sp.wd-sp--home .wd-sp__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }
@media (max-width: 520px) { .wd-sp.wd-sp--home .wd-sp__grid { grid-template-columns: minmax(0, 1fr); gap: 18px; } }

/* ── shop by pet and need ───────────────────────────────────────────────── */
.wd-hs { --hs-deep: var(--theme-palette-color-2, #0e3d27); --hs-leaf: var(--theme-palette-color-1, #1e7a4c); --hs-soft: var(--theme-palette-color-6, #e4f2e8); --hs-line: var(--theme-palette-color-5, #d3e6d9); --hs-amber: #f5a524; font-family: inherit; }
.wd-hs *, .wd-hs *::before, .wd-hs *::after { box-sizing: border-box; }
.wd-hs a { text-decoration: none; }

.wd-hs__pets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.wd-hs__pet { position: relative; display: block; min-height: 340px; overflow: hidden; border-radius: 30px; background: linear-gradient(135deg, var(--hs-deep), var(--hs-leaf)); color: #fff; isolation: isolate; box-shadow: 0 26px 40px -30px rgba(14, 61, 39, .7); transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s; }
.wd-hs__pet:hover { transform: translateY(-5px); box-shadow: 0 34px 50px -30px rgba(14, 61, 39, .75); }
.wd-hs__pet-img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
.wd-hs__pet:hover .wd-hs__pet-img { transform: scale(1.06); }
.wd-hs__pet-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8, 36, 22, 0) 38%, rgba(8, 36, 22, .62) 72%, rgba(8, 36, 22, .9) 100%); }
.wd-hs__pet-txt { position: absolute; left: 26px; right: 26px; bottom: 74px; display: grid; gap: 4px; }
.wd-hs__pet-txt strong { font-size: 30px; line-height: 1.1; font-weight: 800; letter-spacing: -.01em; }
.wd-hs__pet-txt span { font-size: 15px; line-height: 1.45; opacity: .92; }
.wd-hs__pet-go { position: absolute; left: 26px; bottom: 22px; display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; background: var(--hs-amber); color: #1a1a17; font-size: 14px; font-weight: 800; transition: gap .25s, background .2s; }
.wd-hs__pet:hover .wd-hs__pet-go { gap: 13px; background: #ffb93c; }

.wd-hs__cats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin-top: 22px; }
.wd-hs__cat { position: relative; display: grid; justify-items: center; align-content: start; gap: 6px; padding: 26px 14px 20px; text-align: center; background: #fff; border: 1.5px solid var(--hs-line); border-radius: 24px; color: var(--hs-deep); transition: transform .25s cubic-bezier(.2, .8, .2, 1), border-color .2s, box-shadow .25s; }
.wd-hs__cat:hover { transform: translateY(-5px); border-color: var(--hs-leaf); box-shadow: 0 22px 32px -24px rgba(14, 61, 39, .55); }
.wd-hs__cat-ic { display: grid; place-items: center; width: 74px; height: 74px; margin-bottom: 8px; border-radius: 50%; background: var(--hs-soft); color: var(--hs-deep); transition: background .25s, color .25s, transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.wd-hs__cat-ic svg { width: 34px; height: 34px; }
.wd-hs__cat:hover .wd-hs__cat-ic { background: var(--hs-deep); color: #fff; transform: scale(1.08) rotate(-4deg); }
.wd-hs__cat strong { font-size: 16px; line-height: 1.3; font-weight: 800; }
.wd-hs__cat-sub { font-size: 13px; line-height: 1.4; color: #6b7a72; }

@media (max-width: 1100px) { .wd-hs__cats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
	.wd-hs__pets { gap: 14px; }
	.wd-hs__pet { min-height: 260px; border-radius: 24px; }
	.wd-hs__pet-txt { left: 18px; right: 18px; bottom: 66px; }
	.wd-hs__pet-txt strong { font-size: 23px; }
	.wd-hs__pet-txt span { font-size: 13.5px; }
	.wd-hs__pet-go { left: 18px; bottom: 16px; padding: 9px 15px; font-size: 13px; }
	}
@media (max-width: 640px) {
	.wd-hs__pets { grid-template-columns: minmax(0, 1fr); }
	.wd-hs__pet { min-height: 230px; }
	.wd-hs__cats { display: flex; gap: 12px; margin: 6px -20px -4px; padding: 14px 20px 14px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
	.wd-hs__cats::-webkit-scrollbar { display: none; }
	.wd-hs__cat { flex: 0 0 156px; scroll-snap-align: start; padding: 20px 12px 16px; }
	.wd-hs__cat-ic { width: 64px; height: 64px; }
}
@media (prefers-reduced-motion: reduce) { .wd-hs__pet, .wd-hs__pet-img, .wd-hs__cat, .wd-hs__cat-ic, .wd-hs__pet-go { transition: none; } .wd-hs__pet:hover, .wd-hs__cat:hover { transform: none; } }

/* the theme colours every link on hover/focus/visited; keep our own text colours in every state */
.wd-hs a.wd-hs__pet, .wd-hs a.wd-hs__pet:hover, .wd-hs a.wd-hs__pet:focus, .wd-hs a.wd-hs__pet:focus-visible, .wd-hs a.wd-hs__pet:visited { color: #fff !important; }
.wd-hs a.wd-hs__pet .wd-hs__pet-txt strong, .wd-hs a.wd-hs__pet .wd-hs__pet-txt span { color: #fff !important; }
.wd-hs a.wd-hs__pet .wd-hs__pet-go, .wd-hs a.wd-hs__pet:hover .wd-hs__pet-go, .wd-hs a.wd-hs__pet:focus .wd-hs__pet-go { color: #1a1a17 !important; }
.wd-hs a.wd-hs__cat, .wd-hs a.wd-hs__cat:hover, .wd-hs a.wd-hs__cat:focus, .wd-hs a.wd-hs__cat:focus-visible, .wd-hs a.wd-hs__cat:visited { color: var(--hs-deep) !important; }
.wd-hs a.wd-hs__cat strong { color: var(--hs-deep) !important; }
.wd-hs a.wd-hs__cat .wd-hs__cat-sub { color: #5d6c64 !important; }
.wd-hs a.wd-hs__cat:hover .wd-hs__cat-ic, .wd-hs a.wd-hs__cat:focus-visible .wd-hs__cat-ic { color: #fff !important; }
.wd-hs a:focus-visible { outline: 3px solid var(--hs-amber); outline-offset: 3px; }

/* phones: two category tiles in the middle, a round arrow in the gutter on each side (never on a tile) */
.wd-hs__catbox { position: relative; }
.wd-hs__arr { display: none; }
@media (max-width: 640px) {
	.wd-hs__catbox { margin: 16px -20px 0; }
	.wd-hs__cats { margin: -8px 38px -4px; padding: 16px 2px 14px; gap: 12px; scroll-snap-type: x mandatory; scroll-padding-left: 2px; align-items: stretch; }
	.wd-hs__cat { flex: 0 0 calc((100% - 12px) / 2); min-width: 0; scroll-snap-align: start; padding: 20px 8px 16px; }
	.wd-hs__cat strong { font-size: 14.5px; }
	.wd-hs__cat-sub { font-size: 12px; }
	.wd-hs__cat-ic { width: 58px; height: 58px; }
	.wd-hs__cat-ic svg { width: 28px; height: 28px; }
	.wd-hs__arr { position: absolute; top: 50%; z-index: 3; display: grid; place-items: center; width: 30px; height: 30px; margin-top: -3px; transform: translateY(-50%); padding: 0; border: 1px solid var(--hs-line); border-radius: 50%; background: #fff; color: var(--hs-deep); box-shadow: 0 6px 12px -6px rgba(14, 61, 39, .5); cursor: pointer; transition: opacity .18s; }
	.wd-hs__arr svg { display: block; width: 16px; height: 16px; margin: 0; }
	.wd-hs__arr--l { left: 4px; }
	.wd-hs__arr--r { right: 4px; }
	.wd-hs__arr.is-off { opacity: .28; pointer-events: none; }
	.wd-hs__catbox.is-static .wd-hs__arr { display: none; }
}
/* "mobile" attribute: on phones and tablets a row can show only its first 2 / 4 / 6 cards (the View all button covers the rest) */
@media (max-width: 820px) {
	.wd-sp--home[data-m="2"] .wd-sp__card:nth-child(n+3),
	.wd-sp--home[data-m="4"] .wd-sp__card:nth-child(n+5),
	.wd-sp--home[data-m="6"] .wd-sp__card:nth-child(n+7) { display: none; }
}
/* readable secondary text, bigger tap area on the phone arrows */
.wd-hs__cat-sub { color: #5d6c64 !important; }
.wd-sp--home .wd-sp__cat { font-size: 12px; }
@media (max-width: 640px) { .wd-hs__arr::after { content: ""; position: absolute; inset: -8px -3px; } }