/* PetoFast store page — bright pet-shop theme */
:root {
	--o: #ff7a1a; --o2: #ff9a3c; --y: #ffc93c; --t: #14b8a6; --pk: #ff5c8a; --pu: #7c5cff;
	--bg: #fff8ee; --card: #ffffff; --ink: #2b2118; --mut: #7a6a5c; --line: #f1e4d3; --r: 22px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--ink); line-height: 1.5; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: "Baloo 2", "Nunito", system-ui, sans-serif; line-height: 1.15; margin: 0; }
a { color: inherit; }
img { max-width: 100%; display: block; }

/* Buttons */
.sp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; font-weight: 800; border-radius: 999px; padding: 12px 22px; background: linear-gradient(135deg, var(--o), var(--pk)); color: #fff; box-shadow: 0 8px 20px rgba(255, 92, 60, .35); transition: transform .2s, box-shadow .2s; cursor: pointer; border: 0; }
.sp-btn:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 12px 26px rgba(255, 92, 60, .45); }
.sp-btn:active { transform: scale(.97); }
.sp-btn-sm { padding: 8px 16px; font-size: 14px; }
.sp-btn-lg { padding: 16px 32px; font-size: 19px; animation: pulse 2.4s ease-in-out infinite; }
.sp-btn-lg .arrow { transition: transform .2s; }
.sp-btn-lg:hover .arrow { transform: translateX(4px); }
.sp-btn-block { width: 100%; padding: 10px 14px; font-size: 15px; }
.sp-btn-outline { background: #fff; color: var(--o); border: 2px solid var(--o); box-shadow: none; }
.sp-btn-outline:hover { background: var(--o); color: #fff; }
.sp-btn-light { background: #fff; color: var(--o); box-shadow: 0 8px 20px rgba(0,0,0,.15); }

/* Top bar */
.sp-top { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: calc(10px + env(safe-area-inset-top)) 18px 10px; background: rgba(255, 248, 238, .85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: box-shadow .2s; }
.sp-top.scrolled { box-shadow: 0 4px 18px rgba(80, 40, 0, .08); }
.sp-brand { font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 20px; text-decoration: none; color: var(--o); }

/* Hero */
.sp-hero { position: relative; overflow: hidden; padding: 40px 20px 110px; text-align: center; background: radial-gradient(circle at 20% 10%, #ffe1c2 0, transparent 45%), radial-gradient(circle at 85% 30%, #ffd6e4 0, transparent 40%), linear-gradient(160deg, #fff3e0 0%, #ffe9d6 55%, #fff8ee 100%); }
.sp-hero-in { position: relative; z-index: 2; max-width: 720px; margin: 0 auto; }
.sp-logo { width: 128px; height: 128px; margin: 0 auto 16px; border-radius: 50%; background: linear-gradient(135deg, var(--y), var(--o)); padding: 5px; box-shadow: 0 14px 34px rgba(255, 122, 26, .35); animation: pop .8s cubic-bezier(.2, 1.6, .4, 1) both; }
.sp-logo img, .sp-logo span { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: #fff; display: grid; place-items: center; font-family: "Baloo 2", sans-serif; font-size: 58px; font-weight: 800; color: var(--o); }
.sp-badge { display: inline-block; padding: 6px 14px; border-radius: 999px; background: #e6fbf8; color: #0f8a7e; font-weight: 800; font-size: 13px; animation: fadeUp .6s .15s both; }
.sp-hero h1 { font-size: clamp(34px, 8vw, 56px); margin: 12px 0 6px; background: linear-gradient(90deg, var(--o), var(--pk), var(--pu)); -webkit-background-clip: text; background-clip: text; color: transparent; animation: fadeUp .6s .25s both; }
.sp-area { margin: 0 0 8px; font-weight: 800; color: var(--mut); animation: fadeUp .6s .35s both; }
.sp-tag { font-size: 18px; color: var(--mut); max-width: 520px; margin: 0 auto 24px; animation: fadeUp .6s .45s both; }
.sp-hero .sp-btn-lg { animation: fadeUp .6s .55s both, pulse 2.4s 1.2s ease-in-out infinite; }
.sp-pets { display: flex; justify-content: center; gap: 14px; margin-top: 26px; font-size: 32px; }
.sp-pets span { display: inline-block; animation: bob 2.6s ease-in-out infinite; }
.sp-pets span:nth-child(2) { animation-delay: .3s; } .sp-pets span:nth-child(3) { animation-delay: .6s; }
.sp-pets span:nth-child(4) { animation-delay: .9s; } .sp-pets span:nth-child(5) { animation-delay: 1.2s; }
.sp-wave { position: absolute; bottom: -1px; left: 0; width: 100%; height: 90px; z-index: 1; }
.sp-wave path { fill: var(--bg); }

/* Floating paws + blobs */
.sp-paws { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.paw { position: absolute; bottom: -40px; font-size: 26px; opacity: .22; animation: floatUp 14s linear infinite; }
.p1 { left: 4%; animation-delay: 0s; } .p2 { left: 14%; animation-delay: 3s; font-size: 20px; } .p3 { left: 25%; animation-delay: 7s; }
.p4 { left: 37%; animation-delay: 1.5s; font-size: 18px; } .p5 { left: 50%; animation-delay: 9s; } .p6 { left: 61%; animation-delay: 4.5s; font-size: 22px; }
.p7 { left: 72%; animation-delay: 11s; } .p8 { left: 82%; animation-delay: 2s; font-size: 19px; } .p9 { left: 91%; animation-delay: 6s; } .p10 { left: 96%; animation-delay: 12s; font-size: 17px; }
.sp-blob { position: absolute; border-radius: 50%; filter: blur(40px); opacity: .55; z-index: 0; animation: drift 12s ease-in-out infinite alternate; }
.sp-blob.b1 { width: 260px; height: 260px; background: #ffd27a; top: -60px; left: -60px; }
.sp-blob.b2 { width: 220px; height: 220px; background: #ffb3cb; bottom: 20px; right: -50px; animation-delay: 3s; }

/* Trust strip */
.sp-trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 900px; margin: -36px auto 0; padding: 0 16px; position: relative; z-index: 3; }
.sp-trust div { background: var(--card); border-radius: 18px; padding: 14px 10px; text-align: center; box-shadow: 0 10px 26px rgba(120, 60, 0, .08); font-weight: 800; font-size: 14px; }
.sp-trust b { display: block; font-size: 26px; margin-bottom: 4px; }

/* Main */
.sp-main { max-width: 1080px; margin: 0 auto; padding: 36px 16px 20px; }
.sp-card { background: var(--card); border-radius: var(--r); padding: 22px; box-shadow: 0 10px 30px rgba(120, 60, 0, .07); border: 1px solid var(--line); }
.sp-card h2 { font-size: 24px; margin-bottom: 8px; }
.sp-card p { margin: 0; color: var(--mut); font-size: 16px; }
.sp-info { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; margin-bottom: 40px; }
.sp-about { border-top: 6px solid var(--o); }
.sp-hours { border-top: 6px solid var(--t); }

/* Products */
.sp-head { text-align: center; margin-bottom: 22px; }
.sp-kicker { display: inline-block; font-weight: 800; color: var(--pk); background: #ffe8ef; padding: 4px 12px; border-radius: 999px; font-size: 13px; }
.sp-head h2 { font-size: clamp(28px, 6vw, 40px); margin-top: 8px; }
.sp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.sp-product { display: flex; flex-direction: column; text-decoration: none; background: var(--card); border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); box-shadow: 0 8px 24px rgba(120, 60, 0, .06); transition: transform .25s, box-shadow .25s; }
.sp-product:hover { transform: translateY(-6px) rotate(-.3deg); box-shadow: 0 18px 40px rgba(255, 122, 26, .2); }
.sp-img { position: relative; aspect-ratio: 1; background: linear-gradient(135deg, #fff6e8, #ffeef3); overflow: hidden; }
.sp-img img { width: 100%; height: 100%; object-fit: contain; padding: 10px; transition: transform .4s; }
.sp-product:hover .sp-img img { transform: scale(1.08); }
.sp-sale { position: absolute; top: 12px; left: 12px; background: var(--pk); color: #fff; font-weight: 800; font-size: 12px; padding: 4px 10px; border-radius: 999px; animation: wiggle 2.5s ease-in-out infinite; }
.sp-pbody { padding: 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.sp-pbody h3 { font-family: "Nunito", sans-serif; font-weight: 800; font-size: 15px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em; }
.sp-price { font-weight: 800; color: var(--o); font-size: 17px; margin-top: auto; }
.sp-price del { color: #b8a898; font-weight: 600; font-size: 14px; margin-right: 4px; }
.sp-price ins { text-decoration: none; }
.sp-center { text-align: center; margin: 26px 0 44px; }

/* Location */
.sp-location { margin-bottom: 40px; }
.sp-address { margin-bottom: 14px !important; font-weight: 700; color: var(--ink) !important; }
#sp-map { height: 300px; border-radius: 16px; overflow: hidden; z-index: 0; }
.sp-pin span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--o); border: 3px solid #fff; box-shadow: 0 6px 14px rgba(255, 122, 26, .5); font-size: 20px; animation: bob 2.4s ease-in-out infinite; }

/* CTA band */
.sp-cta { margin-bottom: 30px; }
.sp-cta-in { display: flex; align-items: center; gap: 18px; padding: 24px; border-radius: var(--r); color: #fff; background: linear-gradient(120deg, var(--o) 0%, var(--pk) 60%, var(--pu) 100%); box-shadow: 0 16px 40px rgba(255, 92, 138, .35); }
.sp-cta-in h2 { font-size: 26px; }
.sp-cta-in p { margin: 4px 0 0; opacity: .9; }
.sp-cta-in > div { flex: 1; }
.sp-cta-emoji { font-size: 52px; animation: bob 2.4s ease-in-out infinite; }

/* Footer */
.sp-foot { text-align: center; padding: 26px 16px calc(36px + env(safe-area-inset-bottom)); color: var(--mut); font-size: 14px; }
.sp-foot p { margin: 4px 0; }
.sp-foot a { color: var(--o); font-weight: 800; text-decoration: none; }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .8, .2, 1); transition-delay: var(--d, 0ms); }
.reveal.in { opacity: 1; transform: none; }

/* Animations */
@keyframes pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes fadeUp { from { transform: translateY(18px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pulse { 0%, 100% { box-shadow: 0 8px 20px rgba(255, 92, 60, .35); } 50% { box-shadow: 0 8px 34px rgba(255, 92, 60, .6); } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes wiggle { 0%, 90%, 100% { transform: rotate(0); } 93% { transform: rotate(-8deg); } 96% { transform: rotate(8deg); } }
@keyframes floatUp { 0% { transform: translateY(0) rotate(0); opacity: 0; } 10% { opacity: .22; } 90% { opacity: .22; } 100% { transform: translateY(-520px) rotate(40deg); opacity: 0; } }
@keyframes drift { from { transform: translate(0, 0); } to { transform: translate(40px, 30px); } }

/* Responsive */
@media (max-width: 860px) {
	.sp-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.sp-info { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
	.sp-hero { padding: 26px 16px 100px; }
	.sp-logo { width: 104px; height: 104px; }
	.sp-trust { gap: 8px; }
	.sp-trust div { font-size: 12px; padding: 12px 6px; }
	.sp-pbody { padding: 10px; }
	.sp-pbody h3 { font-size: 14px; }
	.sp-cta-in { flex-direction: column; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
	.reveal { opacity: 1; transform: none; }
}

/* Services + WhatsApp */
.sp-services { margin-bottom: 40px; }
.sp-srv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.sp-srv { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 20px 16px; text-align: center; box-shadow: 0 8px 24px rgba(120, 60, 0, .06); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.sp-srv-emoji { font-size: 40px; width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #fff1dc, #ffe1ea); }
.sp-srv h3 { font-size: 20px; }
.sp-btn-wa { background: #25d366; box-shadow: 0 8px 20px rgba(37, 211, 102, .3); font-size: 14px; padding: 10px 16px; }
.sp-btn-wa:hover { box-shadow: 0 12px 26px rgba(37, 211, 102, .45); }
.sp-btn-wa-lg { font-size: 17px; padding: 14px 24px; margin-bottom: 14px; }

/* WooCommerce adds screen-reader text to sale prices ("Original price was… Current price is…").
   This standalone page has no theme CSS, so hide it visually (still read by screen readers). */
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.sp-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; }
.sp-price del, .sp-price ins { display: inline; }

/* =========================================================
   Catalogue cards — same design as the PetoFast home page
   ========================================================= */
.sp-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.sp-product { border-radius: 16px; border: 1px solid #f0e2cf; box-shadow: none; transition: border-color .15s, box-shadow .15s; }
.sp-product:hover { transform: none; border-color: #ffc9a0; box-shadow: 0 6px 18px rgba(120, 60, 0, .08); }
.sp-img { background: #fff; aspect-ratio: 1; }
.sp-img img { padding: 12px; transition: none; }
.sp-product:hover .sp-img img { transform: none; }
.sp-sale { top: 10px; left: 10px; padding: 4px 10px; font-size: 13px; animation: none; background: #ff5c8a; }
.sp-pbody { padding: 12px 14px 14px; gap: 6px; }
.sp-pbody h3 { font: 700 15px/1.35 "Nunito", system-ui, sans-serif; min-height: 2.7em; color: #2b2118; }
.sp-price { color: #2b2118; font: 800 17px/1.3 "Nunito", system-ui, sans-serif; }
.sp-price ins { color: #e5620a; }
.sp-price del { color: #7a6a5c; font-weight: 600; font-size: 14px; }
.sp-pbody .sp-btn-block { margin-top: 6px; padding: 11px 12px; font-size: 14px; border-radius: 999px; background: #ff7a1a; box-shadow: none; }
.sp-product:hover .sp-btn-block { background: #e5620a; transform: none; }

/* Phones: 2 columns, compact cards, no horizontal overflow */
@supports (overflow: clip) { html, body { overflow-x: clip; } }
.sp-main, .sp-hero-in { overflow-wrap: anywhere; }
@media (max-width: 1024px) { .sp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) { .sp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
@media (max-width: 520px) {
	.sp-pbody { padding: 10px; }
	.sp-pbody h3 { font-size: 14px; }
	.sp-price { font-size: 15px; }
	.sp-pbody .sp-btn-block { padding: 10px 8px; font-size: 13px; }
	.sp-trust { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.sp-srv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sp-cta-in .sp-btn { width: 100%; }
	.sp-top .sp-brand { font-size: 18px; }
}