/*
Theme Name: Small Pet Select SG
Theme URI: https://www.smallpetselect.sg
Description: Standalone, modern, engaging WooCommerce storefront theme for Small Pet Select Singapore. Not a child theme — no parent theme required. Built to work with the sps-store-manager and sps-telegram-bot plugins (homepage banners, best sellers, animal-type filters, checkout order bumps, Telegram ordering bot).
Author: Small Pet Select SG
Version: 1.61.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: smallpetselect-sg
Tags: e-commerce, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* ==========================================================================
   Reset / base
   ========================================================================== */
*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; padding:0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px; line-height:1.6;
  color: var(--sps-ink);
  background:#fffdf8;
}
img{ max-width:100%; height:auto; display:block; }
ul{ margin:0; padding:0; list-style:none; }
a{ text-decoration:none; }
button, input, select, textarea{ font-family:inherit; font-size:1rem; }
.screen-reader-text{ position:absolute !important; clip:rect(1px,1px,1px,1px); overflow:hidden; height:1px; width:1px; }
.container{ max-width:1200px; margin:0 auto; padding:0 20px; }

/* ==========================================================================
   Design tokens
   ========================================================================== */
:root{
  --sps-green: #2f6d3a;
  --sps-green-dark: #1f4a27;
  --sps-cream: #fbf6ea;
  --sps-orange: #e98a2c;
  --sps-ink: #23291f;
  --sps-muted: #6c7566;
  --sps-line: #e7e2d2;
  --sps-radius: 14px;
  --sps-shadow: 0 6px 24px rgba(35,41,31,0.08);
  --sps-shadow-hover: 0 12px 32px rgba(35,41,31,0.14);
  --sps-mobile-nav-height: 60px; /* referenced by other fixed elements (Telegram FAB, order splash) to sit clear of the mobile app-nav bar */
}

a{ color: var(--sps-green); }
a:hover{ color: var(--sps-orange); }
h1,h2,h3,h4,h5,h6{ line-height:1.25; margin: 0 0 .5em; font-weight:700; }

/* ==========================================================================
   Buttons / WooCommerce button overrides
   ========================================================================== */
.button, .wp-block-button__link,
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce-page a.button{
  display:inline-block;
  background: var(--sps-green);
  color:#fff !important;
  border:0; border-radius: 999px;
  padding: 11px 26px;
  font-weight:600;
  cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.button:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover{
  background: var(--sps-orange);
  transform: translateY(-1px);
}
/* .woocommerce a.added_to_cart ("View cart", inserted by WooCommerce right
   after a successful add) gets its own polished pill treatment further
   down, alongside the rest of the "Add to cart" button polish — see the
   "Add to cart" / "Select options" button polish block. */

/* ==========================================================================
   Header / navigation
   ========================================================================== */
.sps-announcement-bar{
  background: var(--sps-green-dark); color:#fff; text-align:center;
  font-size:.85rem; letter-spacing:.02em; padding:8px 12px;
}
.sps-announcement-bar a{ color:#ffe7b8; text-decoration:underline; }

.site-header{
  background:#fff; box-shadow: 0 2px 10px rgba(0,0,0,.05);
  position: sticky; top:0; z-index: 100;
}
.site-header__inner{
  max-width:1200px; margin:0 auto; padding: 14px 20px;
  display:flex; align-items:center; justify-content:space-between; gap: 20px;
}
.site-branding a{ font-size:1.4rem; font-weight:800; color: var(--sps-green-dark); }
.site-branding img{ max-height:48px; }

.main-navigation{ flex:1; }
.main-navigation ul{ display:flex; gap: 22px; justify-content:center; flex-wrap:wrap; }
.main-navigation a{ color: var(--sps-ink); font-weight:600; display:inline-flex; align-items:center; }
.main-navigation a:hover{ color: var(--sps-orange); }

/* A small animated animal icon in front of each header nav link — see
   sps_nav_menu_animal_icons() in inc/content-pages.php, which inserts the
   <span class="sps-nav-animal"> this targets. Purely decorative
   (aria-hidden), so it's safe to leave static for anyone who's asked their
   OS/browser to reduce motion. */
.sps-nav-animal{
  display:inline-block; margin-right:6px; font-size:1.05em; line-height:1;
}
@media (prefers-reduced-motion: no-preference){
  .sps-nav-animal{ animation: sps-nav-animal-bounce 2.2s ease-in-out infinite; }
  /* Staggered per item so they don't all bounce in lockstep. */
  .main-navigation li:nth-child(2) .sps-nav-animal{ animation-delay: .25s; }
  .main-navigation li:nth-child(3) .sps-nav-animal{ animation-delay: .5s; }
  .main-navigation li:nth-child(4) .sps-nav-animal{ animation-delay: .75s; }
  .main-navigation li:nth-child(5) .sps-nav-animal{ animation-delay: 1s; }
  .main-navigation li:nth-child(6) .sps-nav-animal{ animation-delay: 1.25s; }
}
@keyframes sps-nav-animal-bounce{
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25%      { transform: translateY(-3px) rotate(-8deg); }
  50%      { transform: translateY(0) rotate(0deg); }
  75%      { transform: translateY(-2px) rotate(8deg); }
}

.header-actions{ display:flex; align-items:center; gap:16px; }
.header-cart{
  display:inline-flex; align-items:center; gap:6px;
  font-weight:700; color: var(--sps-ink);
}
.header-cart:hover{ color: var(--sps-orange); }
.header-cart__icon{ width:22px; height:22px; flex:0 0 22px; }
.header-cart .count{
  display:inline-flex; align-items:center; justify-content:center;
  background: var(--sps-orange); color:#fff; border-radius:999px;
  font-size:.7rem; line-height:1; min-width:18px; height:18px; padding:0 5px;
}
@media (max-width: 800px){
  /* The header's own dropdown menu (and its "Menu" toggle button next to
     the cart icon) was removed by request — primary navigation on phones
     now happens through the fixed bottom app-nav bar (see .sps-mobile-nav
     further down) instead of a second nav mechanism up here. The menu is
     simply hidden rather than removed from the page, so a nav menu still
     renders (and is crawlable) for anything not covered by the 5 bottom
     icons, and nothing breaks if the bar is ever turned off later. */
  .main-navigation{ display:none; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{ background: var(--sps-green-dark); color:#f2ede0; margin-top:60px; }
.site-footer .container{ padding: 44px 20px; display:grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap:28px; }
.site-footer h3{ color:#fff; font-size:1rem; }
.site-footer a{ color:#e6e0cf; }
.site-footer a:hover{ color:#fff; }
.footer-nav ul{ display:flex; flex-direction:column; gap:8px; padding-top:4px; }
.site-footer .footer-bottom{
  border-top:1px solid rgba(255,255,255,.15); text-align:center;
  padding: 16px 20px; font-size:.85rem; grid-column: 1 / -1;
}

/* ==========================================================================
   Hero
   ========================================================================== */
.sps-hero{
  position:relative; border-radius: var(--sps-radius); overflow:hidden;
  margin: 24px auto; max-width:1200px; min-height:380px;
  display:flex; align-items:center;
  background: linear-gradient(120deg, var(--sps-green) 0%, var(--sps-green-dark) 60%, var(--sps-green) 100%);
  background-size: 200% 200%;
  animation: sps-hero-gradient 10s ease-in-out infinite alternate;
  color:#fff;
}
@keyframes sps-hero-gradient{
  from{ background-position: 0% 50%; }
  to{ background-position: 100% 50%; }
}
.sps-hero__bg{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:.55; }
.sps-hero__content{ position:relative; padding: 48px 56px; max-width:560px; }
.sps-hero__content h1{ color:#fff; font-size: clamp(1.8rem, 3vw, 2.6rem); margin-bottom:12px; }
.sps-hero__content p{ font-size:1.05rem; opacity:.95; margin-bottom:22px; }
.sps-hero__cta{
  display:inline-block; background: var(--sps-orange); color:#fff;
  padding: 12px 28px; border-radius:999px; font-weight:600;
  transition: transform .15s ease, box-shadow .15s ease;
}
.sps-hero__cta:hover{ color:#fff; transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,.25); }

/* ==========================================================================
   Sections
   ========================================================================== */
.sps-section{ max-width:1200px; margin:0 auto; padding: 40px 20px; }
.sps-section__head{ display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:22px; flex-wrap:wrap; gap:10px; }
.sps-section__head h2{ margin:0; font-size:1.6rem; }
.sps-section__head a{ font-weight:600; font-size:.95rem; white-space:nowrap; }
/* When a section head has a critter race sitting between the heading and
   the "View all" link, center them on the same baseline instead of
   flex-end, so the hopping rabbit doesn't look glued to the floor. */
.sps-section__head:has(.sps-critter-race){ align-items:center; }

/* ==========================================================================
   Shop-by-pet
   ========================================================================== */
.sps-pet-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap:18px; }
.sps-pet-card{
  position:relative; border-radius: var(--sps-radius); overflow:hidden;
  aspect-ratio: 4/3; display:flex; align-items:flex-end;
  box-shadow: var(--sps-shadow); transition: transform .18s ease, box-shadow .18s ease;
}
.sps-pet-card:hover{ transform: translateY(-4px); box-shadow: var(--sps-shadow-hover); }
.sps-pet-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.sps-pet-card::after{ content:""; position:absolute; inset:0; background: linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,0)); }
.sps-pet-card span{ position:relative; z-index:1; color:#fff; font-weight:700; padding:14px; font-size:1.05rem; }

/* ==========================================================================
   Banners
   ========================================================================== */
.sps-banner-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap:18px; }
.sps-banner{
  border-radius: var(--sps-radius); padding:26px; min-height:150px;
  display:flex; flex-direction:column; justify-content:center; color:#fff;
  background-size:cover; background-position:center; position:relative; overflow:hidden;
}
.sps-banner::before{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.28); }
.sps-banner *{ position:relative; z-index:1; }
.sps-banner h3{ color:#fff; margin:0 0 6px; }
.sps-banner .sps-hero__cta{ margin-top:10px; padding:8px 20px; font-size:.9rem; }

/* ==========================================================================
   Product grid / cards
   ========================================================================== */
/* 4 across on desktop, not 3 — with a 1200px-wide container that put each
   product photo at ~370px square, noticeably larger and heavier-looking
   than a typical catalog thumbnail. 4 columns brings each photo down to
   a more standard ~270px while still reading clearly at a glance. */
ul.products{ display:grid !important; grid-template-columns: repeat(4, 1fr); gap:20px; align-items:stretch; }
/* WooCommerce's own default CSS gives ul.products a float-era clearfix
   (::before/::after with content:" "; display:table;), meant to contain
   floated li's. Once the container is display:grid instead, those two
   pseudo-elements stop being harmless and become actual grid items —
   the invisible ::before lands in the very first cell, pushing every
   real product over by one slot and leaving a permanent gap at the
   start of the first row (with ::after doing the same, harmlessly, at
   the very end). Removing their generated content excludes them from
   grid placement entirely. */
ul.products::before, ul.products::after{ content:none !important; display:none !important; }
ul.products li.product{
  background:#fff; border:1px solid var(--sps-line); border-radius: var(--sps-radius);
  padding: 12px !important; margin:0 !important; transition: transform .15s ease, box-shadow .15s ease;
  width:auto !important; float:none !important;
  display:flex !important; flex-direction:column; height:100%;
  overflow:hidden;
}
ul.products li.product:hover{ transform: translateY(-3px); box-shadow: var(--sps-shadow); }
/* On the shop/category archives (see .sps-shop-layout__main below and
   the IntersectionObserver block in main.js), cards pop in with a
   staggered reveal as they scroll into view instead of appearing all at
   once — the JS sets --sps-i per card and toggles .is-visible. Outside
   that context (best sellers, recently viewed, etc.) cards keep showing
   immediately, since is-visible is never toggled there. */
.sps-shop-layout__main ul.products > li.product{
  opacity:0; transform: translateY(20px) scale(.97);
  transition: opacity .5s ease, transform .5s cubic-bezier(.22,.9,.32,1.1), box-shadow .15s ease;
  transition-delay: calc(var(--sps-i, 0) * .07s);
}
.sps-shop-layout__main ul.products > li.product.is-visible{ opacity:1; transform:none; }
.sps-shop-layout__main ul.products > li.product.is-visible:hover{ transform: translateY(-3px); }
/* A gentle zoom on the product photo, and a little lift on the
   add-to-cart button, so hovering a card feels responsive rather than
   static — small touches that go a long way on an otherwise plain
   product grid. */
ul.products li.product img{ transition: transform .4s ease; }
ul.products li.product:hover img{ transform: scale(1.06); }
ul.products li.product a.button{ transition: transform .15s ease, box-shadow .15s ease; }
ul.products li.product a.button:hover{ transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0,0,0,.18); }
/* Every product card's link block (image + title + rating + price) grows
   to fill whatever space is left, so the "Add to cart"/"See options"
   button always lands in the same place along the bottom of the row —
   instead of trailing right after a short title on some cards and much
   lower on others. */
ul.products li.product > a{ display:flex !important; flex-direction:column; flex:1 1 auto; }
ul.products li.product > a.button{ display:block !important; flex:0 0 auto; }
/* Product photos vary a lot in their uploaded dimensions (portrait,
   landscape, square, wildly different pixel sizes) — cropping every one
   to the same square shape is what actually fixes cards looking "all
   over the place", regardless of what the storeowner uploads. */
ul.products li.product img{
  aspect-ratio: 1 / 1; width:100%; height:auto;
  object-fit:cover; object-position:center;
  border-radius:10px; flex:0 0 auto;
}
ul.products li.product a.button{ margin-top:auto; }
.sps-animal-badge{
  display:inline-block; font-size:.7rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; background: var(--sps-cream); color: var(--sps-green-dark);
  border-radius:999px; padding:3px 10px; margin-bottom:6px;
}
/* A smoother step down than jumping straight from 4 to 2 — a laptop-ish
   width still comfortably fits 3 photo-sized cards across. */
@media (max-width: 1100px){ ul.products{ grid-template-columns: repeat(3,1fr); } }
@media (max-width: 900px){ ul.products{ grid-template-columns: repeat(2,1fr); } }
/* Below 560px this used to drop to a single column, which made each
   product photo span the entire screen width — visually oversized, and
   it meant scrolling past one giant card at a time to reach the next
   product. Staying at 2 columns all the way down keeps photos a
   sensible thumbnail size and roughly doubles how many products fit in
   view without scrolling, which is how most mobile shopping grids
   behave. Padding, gap and text sizes are trimmed slightly at this
   width so two narrower cards still have room to breathe. */
@media (max-width: 560px){
  ul.products{ grid-template-columns: repeat(2,1fr); gap:10px; }
  ul.products li.product{ padding:8px !important; }
  ul.products li.product img{ border-radius:8px; }
  ul.products li.product h2,
  ul.products li.product .woocommerce-loop-product__title{ font-size:.85rem; line-height:1.3; margin:6px 0 2px; }
  ul.products li.product .price{ font-size:.85rem; }
  ul.products li.product .star-rating{ font-size:.75rem; }
  ul.products li.product a.button{ font-size:.8rem; padding:8px 10px !important; }
}

/* ==========================================================================
   Category showcase heading — each letter dances in a gentle, continuous
   wave to catch the eye (see sps_animated_heading_html()). Words stay
   intact across line-wraps; letters inside each word animate on their
   own staggered delay via --sps-i.
   ========================================================================== */
.sps-cat-heading{ margin:0; font-size:1.6rem; }
.sps-cat-heading__word{ display:inline-block; white-space:nowrap; }
.sps-cat-heading__letter{
  display:inline-block;
  animation: sps-heading-wave 1.8s ease-in-out infinite;
  animation-delay: calc(var(--sps-i, 0) * 0.045s);
}
@keyframes sps-heading-wave{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-8px); color: var(--sps-orange); }
}

/* ==========================================================================
   "Blog" heading — a moving highlight sweeps across the text on a loop
   (see sps_shimmer_heading_html()), instead of the dancing-letters wave
   used everywhere else, so it doesn't feel like every heading on the
   site does the exact same trick.
   ========================================================================== */
.sps-heading-shimmer{
  background-image: linear-gradient(100deg,
    var(--sps-ink) 0%, var(--sps-ink) 38%,
    var(--sps-orange) 50%,
    var(--sps-ink) 62%, var(--sps-ink) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  animation: sps-heading-shimmer-sweep 3.2s linear infinite;
}
@keyframes sps-heading-shimmer-sweep{
  0%{ background-position: 200% 0; }
  100%{ background-position: -50% 0; }
}

/* ==========================================================================
   Category showcase mascots — three little inline-SVG pets (rabbit,
   guinea pig, chinchilla) that bob, sway and wave beside the "Shop by
   Category" heading (see sps_render_pet_mascots()). Purely decorative.
   ========================================================================== */
.sps-cat-mascots{ display:flex; align-items:flex-end; gap:6px; }
.sps-mascot{
  width:64px; height:64px;
  animation: sps-mascot-bob 2.6s ease-in-out infinite, sps-mascot-sway 3.4s ease-in-out infinite;
  animation-delay: calc(var(--sps-i, 0) * -0.5s), calc(var(--sps-i, 0) * -0.5s);
  transform-origin: 50% 100%;
}
.sps-mascot__svg{ width:100%; height:100%; display:block; }
.sps-mascot__ear{ transform-box: fill-box; transform-origin: 50% 92%; animation: sps-mascot-ear 2.2s ease-in-out infinite; }
.sps-mascot__ear--r, .sps-mascot--rabbit .sps-mascot__ear:last-of-type{ animation-delay:.15s; }
.sps-mascot__paw{ transform-box: fill-box; transform-origin: 82% 15%; animation: sps-mascot-wave 1.8s ease-in-out infinite; }
.sps-mascot--guinea .sps-mascot__paw{ animation-delay:.3s; }
.sps-mascot--chinchilla .sps-mascot__paw{ animation-delay:.6s; }
.sps-mascot__eye{ animation: sps-mascot-blink 4.5s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 50%; }
.sps-mascot--guinea .sps-mascot__eye{ animation-delay: .8s; }
.sps-mascot--chinchilla .sps-mascot__eye{ animation-delay: 1.6s; }

@keyframes sps-mascot-bob{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-7px); }
}
@keyframes sps-mascot-sway{
  0%, 100%{ transform: rotate(-3deg); }
  50%{ transform: rotate(3deg); }
}
@keyframes sps-mascot-ear{
  0%, 100%{ transform: rotate(0deg); }
  50%{ transform: rotate(8deg); }
}
@keyframes sps-mascot-wave{
  0%, 100%{ transform: rotate(0deg); }
  20%{ transform: rotate(-22deg); }
  40%{ transform: rotate(14deg); }
  60%{ transform: rotate(-16deg); }
  80%{ transform: rotate(8deg); }
}
@keyframes sps-mascot-blink{
  0%, 92%, 100%{ transform: scaleY(1); }
  96%{ transform: scaleY(.15); }
}

@media (max-width: 640px){
  .sps-cat-mascots{ gap:2px; }
  .sps-mascot{ width:48px; height:48px; }
}

/* ==========================================================================
   Category showcase — a vibrant, animated grid of cards, one per
   top-level product category (see sps_render_category_showcase()).
   Each card pops in with a staggered "splash" entrance, reacts to
   hover/tap with a playful tilt + colored glow, and links straight to
   that category's shop page.
   ========================================================================== */
.sps-cat-grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap:20px;
}
.sps-cat-card{
  display:block; opacity:0;
  animation: sps-splash-in .7s cubic-bezier(.22,.9,.32,1.3) both;
  animation-delay: calc(var(--sps-i, 0) * .09s);
  perspective: 800px;
}
.sps-cat-card__frame{
  position:relative; display:block; aspect-ratio: 4/5; overflow:hidden;
  border-radius: var(--sps-radius); box-shadow: var(--sps-shadow);
  transition: transform .35s cubic-bezier(.22,.9,.32,1.1), box-shadow .35s ease;
  transform-style: preserve-3d;
}
.sps-cat-card:hover .sps-cat-card__frame,
.sps-cat-card:focus-visible .sps-cat-card__frame{
  transform: translateY(-6px) rotateX(4deg) rotateY(-4deg) scale(1.03);
  box-shadow: var(--sps-shadow-hover);
  box-shadow: 0 18px 34px -8px color-mix(in srgb, var(--sps-accent, var(--sps-green)) 55%, rgba(0,0,0,.35));
}
.sps-cat-card__bg{
  position:absolute; inset:0; background-size:cover; background-position:center;
  transition: transform .5s ease;
}
.sps-cat-card__bg--fallback{
  background-image: linear-gradient(150deg, var(--sps-accent, var(--sps-green)) 0%, var(--sps-green-dark) 100%);
}
.sps-cat-card:hover .sps-cat-card__bg,
.sps-cat-card:focus-visible .sps-cat-card__bg{ transform: scale(1.12); }
.sps-cat-card__scrim{
  position:absolute; inset:0;
  background: linear-gradient(0deg, rgba(0,0,0,.75) 0%, rgba(0,0,0,.05) 65%);
  background: linear-gradient(0deg, color-mix(in srgb, var(--sps-accent, var(--sps-green)) 65%, rgba(0,0,0,.7)) 0%, rgba(0,0,0,.05) 65%);
}
/* A soft diagonal sheen that sweeps across on hover — the bit of "shine"
   that reads as playful/lively rather than just a static photo card. */
.sps-cat-card__shine{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.35) 45%, transparent 60%);
  transform: translateX(-120%);
  transition: transform .7s ease;
}
.sps-cat-card:hover .sps-cat-card__shine,
.sps-cat-card:focus-visible .sps-cat-card__shine{ transform: translateX(120%); }
.sps-cat-card__badge{
  position:absolute; z-index:2; top:14px; left:14px;
  background: rgba(255,255,255,.94); color: var(--sps-green-dark);
  font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  padding:4px 10px; border-radius:999px;
}
.sps-cat-card__body{
  position:absolute; z-index:2; left:0; right:0; bottom:0; padding: 16px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.sps-cat-card__title{
  color:#fff; font-weight:800; font-size: clamp(1.05rem, 2.4vw, 1.3rem);
  text-shadow: 0 1px 6px rgba(0,0,0,.35);
}
.sps-cat-card__arrow{
  flex: 0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%; color:#fff;
  background: var(--sps-accent, var(--sps-orange));
  transition: transform .25s ease;
}
.sps-cat-card:hover .sps-cat-card__arrow,
.sps-cat-card:focus-visible .sps-cat-card__arrow{ transform: translateX(4px) scale(1.08); }

@media (max-width: 640px){
  .sps-cat-grid{ grid-template-columns: repeat(2, 1fr); gap:12px; }
  .sps-cat-card__frame{ aspect-ratio: 1/1; }
  .sps-cat-card__badge{ top:10px; left:10px; }
  .sps-cat-card__body{ padding:12px; }
}

/* ==========================================================================
   Shop layout: filter sidebar
   ========================================================================== */
.sps-shop-layout{ display:flex; gap:30px; max-width:1200px; margin:0 auto; padding:20px; align-items:flex-start; }
.sps-shop-layout__main{ flex:1 1 auto; min-width:0; }

/* -- Filter & Sort sidebar — modernized & animated ---------------------- */
.sps-filters{
  position:relative; overflow:hidden;
  flex: 0 0 270px; background: linear-gradient(180deg, #fff 0%, var(--sps-cream) 220%);
  border:1px solid var(--sps-line); border-radius: var(--sps-radius);
  padding:22px; padding-top:26px; position:sticky; top:90px;
  box-shadow: var(--sps-shadow);
  opacity:0; animation: sps-fade-up .5s ease .1s forwards;
}
/* A slow-moving gradient bar across the top — a small, constant bit of
   color/motion that immediately signals "this panel is alive" before a
   visitor even touches it. */
.sps-filters::before{
  content:""; position:absolute; top:0; left:0; right:0; height:4px;
  background: linear-gradient(90deg, var(--sps-green), var(--sps-orange), var(--sps-green));
  background-size:200% auto;
  animation: sps-hero-gradient 6s linear infinite;
}
.sps-filters h3{
  display:flex; align-items:center; gap:8px;
  font-size:1.05rem; margin:0 0 16px; padding-bottom:14px;
  border-bottom:1px solid var(--sps-line);
}
.sps-filters__icon{
  display:inline-block; font-size:1.15rem; transform-origin:70% 70%;
  animation: sps-mascot-wave 2.6s ease-in-out infinite;
}
.sps-filters fieldset{
  border:0; padding:0; margin:0 0 20px;
  opacity:0; animation: sps-fade-up .45s ease forwards;
  animation-delay: calc(var(--sps-i, 0) * .09s + .15s);
}
.sps-filters legend{
  display:flex; align-items:center; gap:7px;
  font-weight:700; margin-bottom:10px; font-size:.78rem;
  text-transform:uppercase; letter-spacing:.05em; color: var(--sps-green-dark);
}
.sps-filters__legend-icon{
  display:inline-block; font-size:.95rem; transform-origin:50% 90%;
  animation: sps-mascot-ear 2.4s ease-in-out infinite;
}
.sps-filters label{ font-size:.92rem; cursor:pointer; }
/* Category / Pet / Availability rows read as soft "chips" that highlight
   on hover and light up when checked — a lot friendlier than a bare
   checkbox + label row. */
.sps-filter-chip{
  display:flex !important; align-items:center; gap:9px;
  padding:8px 10px; margin:0 0 4px; border-radius:10px;
  transition: background .15s ease, transform .15s ease;
}
.sps-filter-chip:hover{ background: var(--sps-cream); transform: translateX(3px); }
.sps-filter-chip:has(input:checked){ background: var(--sps-cream); }
.sps-filter-chip--link a{ flex:1; color: var(--sps-ink); font-weight:600; transition: color .15s ease; }
.sps-filter-chip--link:hover a{ color: var(--sps-orange); }
/* Custom checkbox — a rounded box that fills in with a little "pop" when
   checked, instead of the plain OS default. */
.sps-filters input[type="checkbox"]{
  appearance:none; -webkit-appearance:none; flex-shrink:0;
  width:20px; height:20px; border:2px solid var(--sps-line); border-radius:6px;
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; transition: background .2s ease, border-color .2s ease, transform .1s ease;
}
.sps-filters input[type="checkbox"]:hover{ border-color: var(--sps-orange); }
.sps-filters input[type="checkbox"]:active{ transform: scale(.88); }
.sps-filters input[type="checkbox"]:checked{ background: var(--sps-green); border-color: var(--sps-green); }
.sps-filters input[type="checkbox"]:checked::after{
  content:"✓"; color:#fff; font-size:13px; font-weight:700; line-height:1;
  animation: sps-checkbox-pop .25s ease;
}
@keyframes sps-checkbox-pop{
  0%{ transform: scale(0); }
  60%{ transform: scale(1.25); }
  100%{ transform: scale(1); }
}
.sps-filters__price-row{ display:flex; gap:12px; }
.sps-filters__price-row label{ flex:1; display:flex; flex-direction:column; gap:5px; }
.sps-filters fieldset input[type="number"]{
  width:100%; border:1px solid var(--sps-line); border-radius:8px; padding:8px 10px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.sps-filters fieldset input[type="number"]:focus{
  border-color: var(--sps-orange); box-shadow: 0 0 0 3px rgba(233,138,44,.15); outline:none;
}
/* Apply Filters — a real button now (gradient fill + hover lift + a
   shine sweep on hover) instead of the plain default WooCommerce button. */
.sps-filters button[type="submit"]{
  position:relative; overflow:hidden; width:100%; margin-top:4px;
  padding:13px; border:0; border-radius:999px;
  background: linear-gradient(120deg, var(--sps-green) 0%, var(--sps-green-dark) 100%);
  color:#fff; font-weight:700; letter-spacing:.02em; cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.sps-filters button[type="submit"]:hover{
  transform: translateY(-2px); box-shadow: 0 10px 22px -6px rgba(47,109,58,.55);
}
.sps-filters button[type="submit"]::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.4) 45%, transparent 60%);
  transform: translateX(-120%); transition: transform .6s ease;
}
.sps-filters button[type="submit"]:hover::after{ transform: translateX(120%); }

/* -- Mobile "Filter & Sort" toggle --------------------------------------- */
.sps-filters-toggle{ display:none; }

@media (max-width: 900px){
  .sps-shop-layout{ flex-direction:column; }
  .sps-filters{ flex:1 1 auto; position:static; width:100%; }
  .sps-filters-toggle{
    display:inline-flex; align-items:center; gap:8px; margin-bottom:12px;
    background: linear-gradient(120deg, var(--sps-green), var(--sps-green-dark)); color:#fff;
    border:0; border-radius:999px; padding:10px 20px; font-weight:700;
    transition: transform .15s ease;
  }
  .sps-filters-toggle:active{ transform: scale(.96); }
  .sps-filters-toggle__chevron{ display:inline-block; transition: transform .25s ease; }
  .sps-filters-toggle.is-open .sps-filters-toggle__chevron{ transform: rotate(180deg); }
  /* A brief "look at me" pulse the first time the page loads, so the
     entry point to filtering doesn't get missed on mobile — stops on
     first tap (see the click handler in main.js, which removes this
     class) rather than pulsing forever. */
  .sps-filters-toggle--pulse{ animation: sps-filters-pulse 1.5s ease-in-out 3; }
  @keyframes sps-filters-pulse{
    0%, 100%{ box-shadow: 0 0 0 0 rgba(233,138,44,.5); }
    50%{ box-shadow: 0 0 0 9px rgba(233,138,44,0); }
  }
  .sps-filters.is-collapsed{ display:none; }
}

/* ==========================================================================
   Shop/category archive header, title, sort bar & pagination — these are
   WooCommerce's own default markup (no custom template override), which
   previously had no styling of its own at all beyond plain browser
   defaults. Given some shape here, plus the entrance animations, so a
   category page (e.g. /product-category/hay/) feels designed and lively
   rather than a bare list of products under a plain heading. The title's
   own letters dance via .sps-cat-heading__letter, injected by
   sps_animate_archive_title() in functions.php reusing the same helper
   as the homepage's "Shop by Category" heading.
   ========================================================================== */
.woocommerce-products-header{
  max-width:1200px; margin: 0 auto 8px; padding: 0 20px;
  opacity:0; animation: sps-fade-up .55s ease both;
}
.woocommerce-products-header__title.page-title{
  font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 20px 0 6px; color: var(--sps-green-dark);
}
.woocommerce-products-header .woocommerce-product-details__short-description,
.term-description{ color: var(--sps-muted); max-width:640px; margin-bottom:6px; }
.woocommerce-result-count,
.woocommerce-ordering{
  opacity:0; animation: sps-fade-up .5s ease .1s forwards;
}
.woocommerce-result-count{ color: var(--sps-muted); font-size:.92rem; }
.woocommerce-ordering select{
  border:1px solid var(--sps-line); border-radius:999px; padding:8px 16px;
  background:#fff; font-weight:600; cursor:pointer; transition: box-shadow .15s ease, border-color .15s ease;
}
.woocommerce-ordering select:hover,
.woocommerce-ordering select:focus{ border-color: var(--sps-orange); box-shadow: var(--sps-shadow); }
/* ==========================================================================
   Shop pagination
   ========================================================================== */
/* This whole block, and the extra "ul.page-numbers li a.page-numbers" /
   "ul.page-numbers li span.page-numbers" specificity below, exists because
   of a real bug found live (Sept 2026, theme v1.49.0): the plain, unstyled-
   looking pagination the user flagged as "ugly" wasn't actually unstyled —
   this theme's own CSS for it was being silently overridden by
   WooCommerce's own default pagination styling
   (woocommerce/assets/css/woocommerce.css), which uses a MORE specific
   selector (".woocommerce nav.woocommerce-pagination ul li a" — 2 classes
   + 4 element types) than the simpler one this file had before
   (".woocommerce-pagination .page-numbers a" — 2 classes + 1 element
   type). CSS specificity is compared by ID/class count first and element-
   type count only as a tie-breaker, so WooCommerce's rule won regardless
   of this stylesheet loading later in the page. Confirmed live via the
   browser's own computed styles (the flat grey/purple "#e9e6ed" /
   "#816f98" look traced directly to that WooCommerce CSS file) before
   writing this fix — every selector below repeats the "li a.page-numbers"
   / "li span.page-numbers" shape specifically to add one more class to
   the count and reliably outrank it, without needing `!important` anywhere.
   v1.50.0 briefly added a small animal sitting ON TOP of each number pill
   (via absolute positioning) — the user found it ugly and said it was
   covering the page number, so v1.51.0 removed it entirely. v1.52.0 tries
   again, differently on purpose: the animal is now a normal inline
   flex child sitting NEXT TO the number, inside the same pill/card, never
   overlapping it — like the animal is holding the number card up beside
   itself rather than standing on top of it. No absolute positioning
   anywhere in this version, specifically to avoid repeating the v1.50.0
   overlap problem. */
.woocommerce-pagination{ margin-top:32px; text-align:center; }
.woocommerce-pagination ul.page-numbers{
  display:inline-flex; flex-wrap:wrap; gap:10px; list-style:none; margin:0; padding:0;
  justify-content:center; border:0; white-space:normal;
}
.woocommerce-pagination ul.page-numbers li{
  list-style:none; display:inline-block; float:none; border:0; margin:0; padding:0;
}
.woocommerce-pagination ul.page-numbers li a.page-numbers,
.woocommerce-pagination ul.page-numbers li span.page-numbers{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:42px; height:42px; padding:0 12px; border-radius:999px;
  background:#fff; border:1px solid var(--sps-line); color: var(--sps-ink);
  font-weight:700; font-size:.95rem; line-height:1; text-decoration:none;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
.woocommerce-pagination ul.page-numbers li a.page-numbers:hover,
.woocommerce-pagination ul.page-numbers li a.page-numbers:focus{
  transform: translateY(-3px) scale(1.08); box-shadow: var(--sps-shadow);
  border-color: var(--sps-orange); color: var(--sps-orange); background:#fff;
}
.woocommerce-pagination ul.page-numbers li span.page-numbers.current{
  background: var(--sps-green); border-color: var(--sps-green); color:#fff;
}

/* Each numbered page pill (not Previous/Next, which keep their own
   hopping-arrow icon below) now shows a small animal riding alongside the
   number, as if it's holding that little "card" up next to itself — added
   as a normal flex child via ::before (NOT absolute-positioned, unlike the
   reverted v1.50.0 attempt), so it always sits beside the digit and can
   never sit on top of or cover it, at any pill width. The animal cycles
   through the site's 3 animals (rabbit/guinea pig/chinchilla) by position
   — purely decorative variety, it doesn't encode the number itself. */
.woocommerce-pagination ul.page-numbers li a.page-numbers:not(.prev):not(.next),
.woocommerce-pagination ul.page-numbers li span.page-numbers.current{
  gap:5px; min-width:58px; padding:0 14px 0 10px;
}
.woocommerce-pagination ul.page-numbers li a.page-numbers:not(.prev):not(.next)::before,
.woocommerce-pagination ul.page-numbers li span.page-numbers.current::before{
  content:"🐰";
  font-size:1.05rem; line-height:1; display:inline-block; flex-shrink:0;
}
.woocommerce-pagination ul.page-numbers li:nth-child(3n+1) a.page-numbers:not(.prev):not(.next)::before,
.woocommerce-pagination ul.page-numbers li:nth-child(3n+1) span.page-numbers.current::before{ content:"🐰"; }
.woocommerce-pagination ul.page-numbers li:nth-child(3n+2) a.page-numbers:not(.prev):not(.next)::before,
.woocommerce-pagination ul.page-numbers li:nth-child(3n+2) span.page-numbers.current::before{ content:"🐹"; }
.woocommerce-pagination ul.page-numbers li:nth-child(3n) a.page-numbers:not(.prev):not(.next)::before,
.woocommerce-pagination ul.page-numbers li:nth-child(3n) span.page-numbers.current::before{ content:"🐿️"; }
@media (prefers-reduced-motion: no-preference){
  .woocommerce-pagination ul.page-numbers li a.page-numbers:not(.prev):not(.next)::before,
  .woocommerce-pagination ul.page-numbers li span.page-numbers.current::before{
    animation: sps-page-card-wiggle 1.8s ease-in-out infinite;
  }
  .woocommerce-pagination ul.page-numbers li:nth-child(2n) a.page-numbers:not(.prev):not(.next)::before,
  .woocommerce-pagination ul.page-numbers li:nth-child(2n) span.page-numbers.current::before{
    animation-delay:.3s;
  }
  .woocommerce-pagination ul.page-numbers li:nth-child(3n) a.page-numbers:not(.prev):not(.next)::before,
  .woocommerce-pagination ul.page-numbers li:nth-child(3n) span.page-numbers.current::before{
    animation-delay:.6s;
  }
}
@keyframes sps-page-card-wiggle{
  /* Rotates/lifts only the animal glyph itself — this is transform on an
     inline-flex child, which never affects layout/position, so it cannot
     drift on top of the number next to it the way v1.50.0's absolutely
     positioned version could. */
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-2px) rotate(-8deg); }
}

/* The Previous/Next arrows get a small hopping animal instead of a plain
   "←"/"→" glyph — same spirit as the header nav's animated animal icons
   (see sps_nav_menu_animal_icons() in inc/content-pages.php), done here in
   pure CSS since these links are WooCommerce's own markup, not a menu this
   theme builds. The real "←"/"→" text is kept in the markup (screen
   readers and the aria-label WooCommerce already sets still say "Previous
   page"/"Next page") but visually hidden and replaced with the icon. */
.woocommerce-pagination ul.page-numbers li a.prev.page-numbers,
.woocommerce-pagination ul.page-numbers li a.next.page-numbers{
  font-size:0; position:relative; gap:0;
}
.woocommerce-pagination ul.page-numbers li a.prev.page-numbers::before,
.woocommerce-pagination ul.page-numbers li a.next.page-numbers::before{
  font-size:1.15rem; line-height:1; display:inline-block;
}
.woocommerce-pagination ul.page-numbers li a.prev.page-numbers::before{ content:"🐹"; }
.woocommerce-pagination ul.page-numbers li a.next.page-numbers::before{ content:"🐰"; }
@media (prefers-reduced-motion: no-preference){
  .woocommerce-pagination ul.page-numbers li a.prev.page-numbers::before{
    animation: sps-page-hop-prev 1.6s ease-in-out infinite;
  }
  .woocommerce-pagination ul.page-numbers li a.next.page-numbers::before{
    animation: sps-page-hop-next 1.6s ease-in-out infinite;
  }
}
@keyframes sps-page-hop-next{
  0%, 100% { transform: translateX(0) translateY(0); }
  50%      { transform: translateX(2px) translateY(-4px); }
}
@keyframes sps-page-hop-prev{
  0%, 100% { transform: translateX(0) translateY(0) scaleX(-1); }
  50%      { transform: translateX(-2px) translateY(-4px) scaleX(-1); }
}

/* ==========================================================================
   Checkout order bumps
   ========================================================================== */
.sps-order-bumps{ margin:18px 0; display:flex; flex-direction:column; gap:12px; }
.sps-order-bump{
  display:flex; gap:14px; align-items:center; background: var(--sps-cream);
  border:1px dashed var(--sps-orange); border-radius: var(--sps-radius); padding:14px 16px;
}
.sps-order-bump img{ width:56px; height:56px; object-fit:cover; border-radius:8px; flex-shrink:0; }
.sps-order-bump__body{ flex:1; }
.sps-order-bump__body strong{ display:block; }
.sps-order-bump__price{ color: var(--sps-green-dark); font-weight:700; }
.sps-order-bump input[type="checkbox"]{ width:20px; height:20px; }

/* ==========================================================================
   Basic content pages (page.php / single.php / index.php)
   ========================================================================== */
.sps-content{ max-width:900px; margin:0 auto; padding: 40px 20px; }
.sps-content .entry-title{ font-size:2rem; }
.sps-content img{ border-radius: var(--sps-radius); }

/* ==========================================================================
   Announcement bar — multi-message rotation
   ========================================================================== */
.sps-announcement-bar{ position:relative; overflow:hidden; }
.sps-announcement-bar__msg{
  display:none; opacity:0; transition: opacity .4s ease;
}
.sps-announcement-bar__msg[data-active]{ display:inline; opacity:1; }

/* ==========================================================================
   Free-shipping progress bar
   ========================================================================== */
.sps-freeship-bar{
  background:#fff; border-bottom:1px solid var(--sps-line);
  padding:10px 20px; text-align:center;
}
.sps-freeship-bar__msg{ margin:0; font-size:.85rem; color: var(--sps-ink); }
.sps-freeship-bar__msg strong{ color: var(--sps-green-dark); }

/* ==========================================================================
   Scroll reveal
   ========================================================================== */
.sps-reveal{
  opacity:0; transform: translateY(24px);
  transition: opacity .6s cubic-bezier(.22,.9,.32,1.1), transform .6s cubic-bezier(.22,.9,.32,1.1);
}
.sps-reveal.is-visible{ opacity:1; transform:none; }

/* ==========================================================================
   Page-load entrance animation
   ========================================================================== *
   The scroll-reveal above only ever affects sections below the fold — on
   first paint the hero, header bars and trust strip all just "appear",
   which is what read as static. These play automatically on load,
   independent of scrolling, with a light stagger so the page feels like
   it's assembling itself rather than snapping in all at once.
   ========================================================================== */
@keyframes sps-fade-up{
  from{ opacity:0; transform: translateY(16px); }
  to{ opacity:1; transform:none; }
}
@keyframes sps-slide-down{
  from{ opacity:0; transform: translateY(-100%); }
  to{ opacity:1; transform:none; }
}
@keyframes sps-pop-in{
  0%{ opacity:0; transform: scale(.9) translateY(14px); }
  70%{ opacity:1; transform: scale(1.02) translateY(-2px); }
  100%{ opacity:1; transform:none; }
}
@keyframes sps-hero-pan{
  0%{ background-position: 50% 40%; }
  100%{ background-position: 55% 60%; }
}

.sps-announcement-bar{ animation: sps-slide-down .5s ease both; }
.sps-freeship-bar{ animation: sps-slide-down .5s ease .08s both; }

.sps-hero{ overflow:hidden; }
.sps-hero__bg{ animation: sps-hero-pan 14s ease-in-out infinite alternate; background-size:115% 115%; }
.sps-hero__content h1,
.sps-hero__content p,
.sps-hero__content .sps-hero__cta{
  opacity:0; animation: sps-fade-up .7s cubic-bezier(.22,.9,.32,1.1) forwards;
}
.sps-hero__content h1{ animation-delay:.1s; }
.sps-hero__content p{ animation-delay:.28s; }
.sps-hero__content .sps-hero__cta{ animation-delay:.46s; }

@keyframes sps-splash-in{
  0%{ opacity:0; transform: translateY(26px) scale(.85) rotate(-4deg); }
  60%{ opacity:1; transform: translateY(-4px) scale(1.04) rotate(1deg); }
  100%{ opacity:1; transform: translateY(0) scale(1) rotate(0); }
}
.sps-trust-item{
  opacity:0;
  animation: sps-splash-in .7s cubic-bezier(.22,.9,.32,1.3) both;
  animation-delay: calc(var(--sps-i, 0) * .14s + .1s);
}

.sps-pet-card{ opacity:0; animation: sps-pop-in .6s cubic-bezier(.22,.9,.32,1.1) both; }
.sps-pet-card:nth-child(1){ animation-delay:.05s; }
.sps-pet-card:nth-child(2){ animation-delay:.15s; }
.sps-pet-card:nth-child(3){ animation-delay:.25s; }
.sps-pet-card:nth-child(4){ animation-delay:.35s; }
.sps-pet-card:nth-child(5){ animation-delay:.45s; }
.sps-pet-card:nth-child(6){ animation-delay:.55s; }

.header-cart .count{ animation: sps-pop-in .4s ease both; }

@media (prefers-reduced-motion: reduce){
  .sps-reveal,
  .sps-announcement-bar, .sps-freeship-bar,
  .sps-hero, .sps-hero__bg,
  .sps-hero__content h1, .sps-hero__content p, .sps-hero__content .sps-hero__cta,
  .sps-trust-item, .sps-trust-item__icon-wrap, .sps-trust-strip__blob,
  .sps-pet-card, .header-cart .count,
  .sps-cat-card, .sps-cat-card__frame, .sps-cat-card__bg,
  .sps-cat-card__shine, .sps-cat-card__arrow,
  .sps-mascot, .sps-mascot__ear, .sps-mascot__paw, .sps-mascot__eye,
  .sps-cat-heading__letter,
  .sps-filters, .sps-filters::before, .woocommerce-products-header,
  .woocommerce-result-count, .woocommerce-ordering,
  .sps-shop-layout__main ul.products > li.product,
  ul.products li.product img,
  .sps-filters fieldset, .sps-filters__icon, .sps-filters__legend-icon,
  .sps-filter-chip, .sps-filters input[type="checkbox"]::after,
  .sps-filters button[type="submit"], .sps-filters button[type="submit"]::after,
  .sps-filters-toggle--pulse,
  .sps-product-row li.product, .sps-rank-badge, .sps-new-badge,
  .sps-new-post-badge{
    opacity:1; transform:none; transition:none; animation:none; color:inherit;
  }
  /* The critter race is nothing but motion, so for reduce-motion visitors
     it's hidden outright rather than left sitting frozen mid-hop. Same
     reasoning for the empty-cart hearts — a heart frozen mid-float partway
     up and partway faded reads as a rendering glitch, not a heart. */
  .sps-critter-race, .sps-hug__heart{ display:none; }
  /* The shimmer relies on an animated gradient text-clip — freezing that
     mid-sweep can leave part of the heading looking washed out/faded, so
     reduce-motion visitors get the heading in plain solid ink instead. */
  .sps-heading-shimmer{
    animation:none; background-image:none;
    -webkit-text-fill-color: currentColor; color: var(--sps-ink);
  }
}

/* ==========================================================================
   Trust strip — animated splash section
   ========================================================================== */
.sps-trust-strip{
  position:relative; overflow:hidden; isolation:isolate;
  padding: 46px 0;
  background: linear-gradient(135deg, var(--sps-cream) 0%, #fff 55%, var(--sps-cream) 100%);
  border-top:1px solid var(--sps-line); border-bottom:1px solid var(--sps-line);
}
.sps-trust-strip__blob{
  position:absolute; z-index:-1; border-radius:50%; filter: blur(40px); opacity:.35;
  animation: sps-blob-float 9s ease-in-out infinite alternate;
}
.sps-trust-strip__blob--a{
  width:220px; height:220px; top:-90px; left:-60px;
  background: var(--sps-green);
}
.sps-trust-strip__blob--b{
  width:260px; height:260px; bottom:-120px; right:-80px;
  background: var(--sps-orange); animation-delay:1.2s;
}
@keyframes sps-blob-float{
  from{ transform: translate(0,0) scale(1); }
  to{ transform: translate(18px,-14px) scale(1.12); }
}

.sps-trust-strip__grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(210px,1fr)); gap:8px;
  position:relative;
}
.sps-trust-item{
  position:relative; display:flex; align-items:center; gap:14px;
  padding: 14px 22px; text-align:left;
  transition: transform .25s cubic-bezier(.22,.9,.32,1.4);
}
.sps-trust-item:hover{ transform: translateY(-4px); }
.sps-trust-item:not(:last-child)::after{
  content:""; position:absolute; right:-4px; top:50%; height:60%;
  width:1px; background: var(--sps-line); transform: translateY(-50%);
}
@media (max-width: 800px){ .sps-trust-item:not(:last-child)::after{ display:none; } }

.sps-trust-item__icon-wrap{
  position:relative; flex:0 0 auto; width:56px; height:56px; border-radius:50%;
  background: linear-gradient(160deg, var(--sps-cream), #fff);
  background-repeat:no-repeat; background-position: center 62%; background-size:60%;
  box-shadow: var(--sps-shadow);
  display:flex; align-items:center; justify-content:center;
  animation: sps-icon-bob 3.4s ease-in-out infinite;
  animation-delay: calc(var(--sps-i, 0) * .25s);
}
/* Small, original (not photographic) pet silhouettes filling each badge —
   one per trust item, alternating the two brand colors — rather than a
   plain white circle. */
.sps-trust-item:nth-child(1) .sps-trust-item__icon-wrap{
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cellipse cx='32' cy='40' rx='16' ry='14' fill='%232f6d3a'/%3E%3Ccircle cx='32' cy='24' r='10' fill='%232f6d3a'/%3E%3Cellipse cx='24' cy='8' rx='4' ry='12' fill='%232f6d3a'/%3E%3Cellipse cx='40' cy='8' rx='4' ry='12' fill='%232f6d3a'/%3E%3C/svg%3E");
}
.sps-trust-item:nth-child(2) .sps-trust-item__icon-wrap{
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cellipse cx='32' cy='36' rx='22' ry='16' fill='%23e98a2c'/%3E%3Ccircle cx='14' cy='24' r='5' fill='%23e98a2c'/%3E%3Ccircle cx='50' cy='24' r='5' fill='%23e98a2c'/%3E%3C/svg%3E");
}
.sps-trust-item:nth-child(3) .sps-trust-item__icon-wrap{
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='34' r='20' fill='%232f6d3a'/%3E%3Ccircle cx='16' cy='16' r='8' fill='%232f6d3a'/%3E%3Ccircle cx='48' cy='16' r='8' fill='%232f6d3a'/%3E%3Ccircle cx='54' cy='46' r='9' fill='%232f6d3a'/%3E%3C/svg%3E");
}
.sps-trust-item:nth-child(4) .sps-trust-item__icon-wrap{
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cellipse cx='32' cy='42' rx='16' ry='13' fill='%23e98a2c'/%3E%3Ccircle cx='14' cy='22' r='7' fill='%23e98a2c'/%3E%3Ccircle cx='28' cy='12' r='7' fill='%23e98a2c'/%3E%3Ccircle cx='42' cy='12' r='7' fill='%23e98a2c'/%3E%3Ccircle cx='54' cy='24' r='7' fill='%23e98a2c'/%3E%3C/svg%3E");
}
.sps-trust-item:hover .sps-trust-item__icon-wrap{
  animation-play-state: paused;
  transform: scale(1.12) rotate(-6deg);
}
.sps-trust-item__icon-wrap{ transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
@keyframes sps-icon-bob{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-6px); }
}
/* The emoji becomes a small "sticker" badge in the corner of the circle,
   so the actual meaning (truck/vet/hay/flag) stays legible alongside the
   decorative animal art rather than competing with it. */
.sps-trust-item__icon{
  position:absolute; right:-4px; bottom:-4px; z-index:1;
  width:24px; height:24px; border-radius:50%; background:#fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
  display:flex; align-items:center; justify-content:center;
  font-size:.85rem; line-height:1;
}
.sps-trust-item__body{ display:flex; flex-direction:column; }
.sps-trust-item strong{ font-size:.98rem; }
.sps-trust-item span{ display:block; font-size:.82rem; color: var(--sps-muted); }

/* ==========================================================================
   Critter race — a single animal that sits inline in a section head, in
   the gap between the heading text and the "View all →" link (see
   sps_render_critter_race() in inc/homepage-sections.php), and moves back
   and forth across exactly that gap on a loop. It's a flex-grow child of
   .sps-section__head, so its width — and therefore the travel path — is
   always "from just after the heading to just before View all", however
   wide that ends up being. `left` is percentage-based against its own
   box, with a separate, faster bounce/jump animation layered on top:
   the rabbit (Best Sellers) does a big two-footed hop, the guinea pig
   (Latest) does a quick low running scurry, and the chinchilla (Blog)
   does a single bounding leap.
   ========================================================================== */
.sps-critter-race{ position:relative; flex:1 1 90px; min-width:60px; height:60px; overflow:hidden; align-self:center; }
.sps-critter-lane{ position:relative; height:100%; }
.sps-critter-mover{ position:absolute; top:14px; width:40px; height:40px; left:0; }
.sps-critter-mover--rabbit{ animation: sps-critter-sweep 4s linear infinite; }
.sps-critter-mover--guinea{ animation: sps-critter-sweep 3s linear infinite; }
.sps-critter-mover--chinchilla{ animation: sps-critter-sweep 3.5s linear infinite; }
@keyframes sps-critter-sweep{
  0%{ left:0; }
  100%{ left:calc(100% - 40px); }
}
.sps-critter__svg{ width:100%; height:100%; display:block; }
.sps-critter__ear{
  transform-box: fill-box; transform-origin:50% 90%;
  animation: sps-mascot-ear 1s ease-in-out infinite;
}
/* Rabbit — a proper big bunny hop: up, a little tilt mid-air, back down. */
.sps-critter-move--rabbit{ animation: sps-critter-hop .5s ease-in-out infinite; }
@keyframes sps-critter-hop{
  0%, 100%{ transform: translateY(0) rotate(0deg); }
  35%{ transform: translateY(-14px) rotate(-6deg); }
  55%{ transform: translateY(-14px) rotate(4deg); }
  75%{ transform: translateY(0) rotate(0deg); }
}
/* Guinea pig — a quick, low running scurry, no big air time. */
.sps-critter-move--guinea{ animation: sps-critter-run .28s ease-in-out infinite; }
@keyframes sps-critter-run{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-6px); }
}
/* Chinchilla — one bounding leap per cycle: a little crouch, a high
   arcing jump, then a soft squash on landing. */
.sps-critter-move--chinchilla{ animation: sps-critter-jump .8s ease-in-out infinite; }
@keyframes sps-critter-jump{
  0%, 100%{ transform: translateY(0) scaleY(1); }
  10%{ transform: translateY(3px) scaleY(0.85); }
  45%{ transform: translateY(-20px) scaleY(1.05); }
  80%{ transform: translateY(2px) scaleY(0.9); }
}

@media (max-width: 640px){
  /* Not enough room to squeeze a moving critter between the heading and
     "View all" on a phone-width line, so it drops to its own full-width
     line under them instead — still ending near the View all side, just
     stacked rather than inline. */
  .sps-critter-race{ flex:1 1 100%; order:3; height:46px; margin-top:4px; min-width:0; }
  .sps-critter-mover{ width:32px; height:32px; top:10px; }
  @keyframes sps-critter-sweep{
    0%{ left:0; }
    100%{ left:calc(100% - 32px); }
  }
  @keyframes sps-critter-hop{
    0%, 100%{ transform: translateY(0) rotate(0deg); }
    35%{ transform: translateY(-10px) rotate(-6deg); }
    55%{ transform: translateY(-10px) rotate(4deg); }
    75%{ transform: translateY(0) rotate(0deg); }
  }
  @keyframes sps-critter-run{
    0%, 100%{ transform: translateY(0); }
    50%{ transform: translateY(-4px); }
  }
  @keyframes sps-critter-jump{
    0%, 100%{ transform: translateY(0) scaleY(1); }
    10%{ transform: translateY(2px) scaleY(0.85); }
    45%{ transform: translateY(-14px) scaleY(1.05); }
    80%{ transform: translateY(1px) scaleY(0.9); }
  }
}

/* ==========================================================================
   Homepage product rows (Best Sellers / Latest — see sps_render_product_row()
   in inc/homepage-sections.php). Cards pop in one after another as the
   section scrolls into view, instead of the whole row just appearing —
   using nth-child delays rather than JS/IntersectionObserver-per-card
   since these rows are a small, fixed 8 items and the section itself
   already toggles .is-visible via the sitewide .sps-reveal observer in
   main.js, so this just rides that existing trigger.
   ========================================================================== */
.sps-product-row li.product{
  position:relative;
  opacity:0; transform: translateY(24px) scale(.94);
  transition: opacity .5s ease, transform .5s cubic-bezier(.22,.9,.32,1.1);
}
.sps-reveal.is-visible .sps-product-row li.product{ opacity:1; transform:none; }
.sps-product-row li.product:nth-child(1){ transition-delay:.05s; }
.sps-product-row li.product:nth-child(2){ transition-delay:.12s; }
.sps-product-row li.product:nth-child(3){ transition-delay:.19s; }
.sps-product-row li.product:nth-child(4){ transition-delay:.26s; }
.sps-product-row li.product:nth-child(5){ transition-delay:.33s; }
.sps-product-row li.product:nth-child(6){ transition-delay:.40s; }
.sps-product-row li.product:nth-child(7){ transition-delay:.47s; }
.sps-product-row li.product:nth-child(8){ transition-delay:.54s; }
/* "🔥 #1/#2/#3 Best Seller" ribbon — see sps_bestseller_rank_badge() in
   functions.php. A warm gradient chip with a slow pulsing glow so the
   top sellers stand out a little more than the rest of the row; #1 gets
   a gold-leaning gradient instead of the orange/red used for #2 and #3. */
.sps-rank-badge{
  position:absolute; top:10px; left:10px; z-index:2;
  display:inline-flex; align-items:center; gap:4px;
  background: linear-gradient(120deg, var(--sps-orange), #d9482c);
  color:#fff; font-size:.66rem; font-weight:800; letter-spacing:.02em;
  padding:5px 10px; border-radius:999px; white-space:nowrap;
  box-shadow: 0 4px 10px rgba(0,0,0,.18);
  animation: sps-rank-glow 2.2s ease-in-out infinite;
}
.sps-rank-badge--1{ background: linear-gradient(120deg, #f5c518, #e98a2c); }
@keyframes sps-rank-glow{
  0%, 100%{ box-shadow: 0 4px 10px rgba(0,0,0,.18), 0 0 0 0 rgba(233,138,44,.5); }
  50%{ box-shadow: 0 4px 10px rgba(0,0,0,.18), 0 0 0 6px rgba(233,138,44,0); }
}

@media (max-width: 560px){
  .sps-rank-badge{ font-size:.6rem; padding:4px 8px; top:6px; left:6px; }
}

/* "🆕 New" ribbon — see sps_new_arrival_badge() in functions.php. Same
   shape/position as the Best Seller ribbon (they never appear on the
   same card) but a fresh teal-green gradient instead of the warm
   orange/gold, so "just added" reads as a distinct kind of attention. */
.sps-new-badge{
  position:absolute; top:10px; left:10px; z-index:2;
  display:inline-flex; align-items:center; gap:4px;
  background: linear-gradient(120deg, #2f9d6e, var(--sps-green));
  color:#fff; font-size:.66rem; font-weight:800; letter-spacing:.02em;
  padding:5px 10px; border-radius:999px; white-space:nowrap;
  box-shadow: 0 4px 10px rgba(0,0,0,.18);
  animation: sps-rank-glow 2.2s ease-in-out infinite;
}
@media (max-width: 560px){
  .sps-new-badge{ font-size:.6rem; padding:4px 8px; top:6px; left:6px; }
}

/* ==========================================================================
   Horizontal scroll rows (recently viewed / reviews)
   ========================================================================== */
.sps-scroll-row{
  display:flex !important; gap:18px; overflow-x:auto; padding-bottom:8px;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling:touch;
}
.sps-scroll-row > *{ scroll-snap-align:start; flex: 0 0 auto; }
ul.products.sps-scroll-row li.product{ width:220px !important; }

/* This mobile override has to live down here, after the unconditional
   220px rule directly above — it was previously set inside the shared
   560px media query up near the rest of the mobile grid rules, but
   since a later same-specificity rule always wins the cascade
   regardless of which one sits inside a @media block, that earlier
   position meant this 150px width never actually applied: the
   unconditional 220px rule below it in the file always won, leaving
   every horizontal-scroll card (Recently Viewed, reviews) stuck at the
   full desktop width on phones — noticeably wider than the 2-column
   grid cards around it, and wide enough to spill past a narrow phone
   screen with just an awkward sliver of the next card peeking in. */
@media (max-width: 560px){
  ul.products.sps-scroll-row li.product{ width:150px !important; }
  .sps-scroll-row{ gap:10px; }
}

/* ==========================================================================
   Quiz widget
   ========================================================================== */
.sps-quiz{
  background: linear-gradient(135deg, var(--sps-cream), #fff);
  border:1px solid var(--sps-line); border-radius: var(--sps-radius);
  padding: 32px; text-align:center; max-width:720px; margin:0 auto;
  box-shadow: var(--sps-shadow);
}
.sps-quiz__intro h2{ margin-bottom:6px; }
.sps-quiz__intro p{ color: var(--sps-muted); margin-bottom:20px; }
.sps-quiz__question{ font-weight:700; margin-bottom:16px; }
.sps-quiz__choices{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-bottom:14px; }
.sps-quiz__choices button{
  background:#fff; border:2px solid var(--sps-line); border-radius:999px;
  padding: 12px 22px; font-weight:600; cursor:pointer;
  transition: border-color .15s ease, transform .15s ease, background .15s ease;
}
.sps-quiz__choices button:hover{
  border-color: var(--sps-orange); background: var(--sps-cream); transform: translateY(-2px);
}
.sps-quiz__back{
  background:none; border:0; color: var(--sps-muted); text-decoration:underline;
  cursor:pointer; margin-top:10px; font-size:.9rem;
}
.sps-quiz__result .sps-hero__cta{ display:inline-block; margin-bottom:4px; }

/* ==========================================================================
   Reviews carousel
   ========================================================================== */
.sps-review-card{
  width:280px; background:#fff; border:1px solid var(--sps-line);
  border-radius: var(--sps-radius); padding:20px; box-shadow: var(--sps-shadow);
  display:flex; flex-direction:column; gap:10px;
}
.sps-review-card__stars{ color: var(--sps-orange); letter-spacing:2px; }
.sps-review-card__quote{ margin:0; flex:1; color: var(--sps-ink); font-size:.95rem; }
.sps-review-card__author{ display:flex; align-items:center; gap:10px; }
.sps-review-card__avatar{
  width:36px; height:36px; border-radius:50%; background: var(--sps-green);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-weight:700; flex:0 0 36px;
}
.sps-review-card__author div{ display:flex; flex-direction:column; line-height:1.3; }
.sps-review-card__author a{ font-size:.82rem; }

/* ==========================================================================
   Blog / pet-care teaser
   ========================================================================== */
.sps-blog-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap:20px; }
.sps-blog-card{
  display:block; background:#fff; border:1px solid var(--sps-line);
  border-radius: var(--sps-radius); overflow:hidden; color: var(--sps-ink);
  transition: transform .18s ease, box-shadow .18s ease;
}
.sps-blog-card:hover{ transform: translateY(-4px); box-shadow: var(--sps-shadow-hover); color: var(--sps-ink); }
.sps-blog-card__thumb{ position:relative; aspect-ratio: 16/9; overflow:hidden; }
.sps-blog-card__thumb img{ width:100%; height:100%; object-fit:cover; }
.sps-blog-card__body{ padding:16px; }
.sps-blog-card__body h3{ font-size:1.05rem; margin:0 0 6px; }
.sps-blog-card__body p{ margin:0; font-size:.88rem; color: var(--sps-muted); }
/* "New" tag on a recently-published blog post (see sps_render_news_teaser()
   in inc/homepage-sections.php) — unlike the pulsing-glow ribbons used on
   Best Sellers/Latest product cards, this one slides in from the left
   with a little settling bounce as the section scrolls into view, tying
   into the section's own .sps-reveal/.is-visible toggle rather than
   animating continuously forever. */
.sps-new-post-badge{
  position:absolute; top:10px; left:10px; z-index:2;
  background: linear-gradient(120deg, #2f7d8c, #2f6d3a);
  color:#fff; font-size:.68rem; font-weight:800; letter-spacing:.02em;
  padding:5px 11px; border-radius:999px; white-space:nowrap;
  box-shadow: 0 4px 10px rgba(0,0,0,.18);
  opacity:0; transform: translateX(-22px);
  transition: opacity .45s ease, transform .5s cubic-bezier(.34,1.56,.64,1);
}
.sps-reveal.is-visible .sps-new-post-badge{ opacity:1; transform:none; }

/* ==========================================================================
   Product card polish (ratings, hover, badges)
   ========================================================================== */
ul.products li.product .star-rating{ margin: 4px 0; font-size:.85rem; }
ul.products li.product .star-rating span::before{ color: var(--sps-orange); }
ul.products li.product .price{ color: var(--sps-green-dark); font-weight:700; }
ul.products li.product a.button{ width:100%; text-align:center; }
ul.products li.product{ position:relative; }
ul.products li.product img{ transition: transform .3s ease; }
ul.products li.product:hover img{ transform: scale(1.03); }

/* ==========================================================================
   "Add to cart" / "Select options" button polish, and the "✓ In Cart"
   card badge — every product card, sitewide (shop/category archives,
   homepage rows, everywhere ul.products/li.product appears).

   Verified live against the real add-to-cart flow before writing this:
   WooCommerce's own core JS/CSS already renders a small checkmark via its
   icon font on a.add_to_cart_button.added (an ::after — nothing to
   duplicate here, just make it read clearly), so the fix here is about
   making that "added" moment obvious rather than inventing a new one:
   a noticeably darker green so the state change actually registers, plus
   turning the plain "View cart" text link WooCommerce inserts afterwards
   into a proper pill instead of leaving it looking like an afterthought.
   "Select options" (variable products) gets a small pointing-hand icon so
   it doesn't read as visually identical to a plain "Add to cart" button
   when the two sit side by side in the same row.
   ========================================================================== */
ul.products li.product a.button.product_type_variable{
  display:flex !important; flex-direction:row !important;
  align-items:center; justify-content:center; gap:6px;
}
ul.products li.product a.button.product_type_variable::before{
  content:"👉"; font-size:.85em; line-height:1;
}
/* Quick variation picker — replaces "Select options" for a variable
   product that actually has variations to choose from (see
   sps_variation_quick_add_link() in functions.php, hooked onto
   WooCommerce's own woocommerce_loop_add_to_cart_link filter): a size
   dropdown plus its own "Add to cart" button, right in the card, so
   picking a size no longer means leaving the grid for the single product
   page and coming back. The button keeps the ::before pointer-icon rule
   above as a fallback for the rare case where sps_variation_quick_add_link()
   defers to the plain "Select options" link instead (no variations
   available, or the product isn't purchasable). */
.sps-quick-variation{
  display:flex; flex-direction:column; gap:6px; width:100%;
  flex:0 0 auto; margin-top:auto;
}
.sps-quick-variation__select{
  width:100%; padding:8px 10px; border-radius:10px;
  border:1px solid var(--sps-line); background:#fff; color: var(--sps-ink);
  font-size:.85rem; font-family:inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.sps-quick-variation__select:focus{
  outline:none; border-color: var(--sps-green);
  box-shadow: 0 0 0 3px rgba(47,109,58,.15);
}
.sps-quick-variation__add{ width:100%; }
.sps-quick-variation__add:disabled{
  background: var(--sps-muted) !important; opacity:.55;
  cursor:not-allowed; transform:none !important;
}
.sps-quick-variation__add.loading{ opacity:.7; cursor:wait; }
.sps-quick-variation__add.added{ background: var(--sps-green-dark) !important; }
.sps-quick-variation__add.added::after{ content:" ✓"; }
@media (max-width:560px){
  .sps-quick-variation__select{ font-size:.78rem; padding:6px 8px; }
}
ul.products li.product a.add_to_cart_button.added{
  background: var(--sps-green-dark) !important;
}
.woocommerce a.added_to_cart{
  display:inline-flex !important; flex-direction:row !important;
  align-items:center; justify-content:center; gap:4px;
  margin:8px 0 0 !important; width:100%;
  background: var(--sps-cream); color: var(--sps-green-dark) !important;
  font-size:.78rem; font-weight:700;
  padding:7px 14px; border-radius:999px;
  border:1px solid var(--sps-line);
  text-decoration:none !important;
  transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.woocommerce a.added_to_cart::before{ content:"🛍️"; font-size:.85em; }
.woocommerce a.added_to_cart:hover{
  background:#fff; transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,.1);
}
/* "✓ In Cart" ribbon — see sps_in_cart_badge() in functions.php (and its
   AJAX-added twin in main.js). Top-RIGHT rather than top-left like the
   Best Seller/New ribbons, since a product can carry one of those *and*
   already be in the cart at the same time — confirmed live that the two
   never overlap. Now also names the specific size added (e.g. "In Cart
   (10 lb)"), so `white-space:nowrap` from the original plain "In Cart"
   version is dropped in favor of wrapping onto a second line — a size
   name (or, rarely, more than one, if a shopper added two different
   sizes of the same product) can otherwise run wider than the card. */
.sps-in-cart-badge{
  position:absolute; top:10px; right:10px; z-index:2;
  display:inline-flex; align-items:center; gap:4px;
  max-width: calc(100% - 20px);
  background: var(--sps-green); color:#fff;
  font-size:.66rem; font-weight:800; letter-spacing:.02em;
  padding:5px 10px; border-radius:999px;
  white-space:normal; text-align:center; line-height:1.3;
  box-shadow: 0 4px 10px rgba(0,0,0,.18);
}
@media (max-width: 560px){
  .sps-in-cart-badge{ font-size:.6rem; padding:4px 8px; top:6px; right:6px; }
  .woocommerce a.added_to_cart{ font-size:.72rem; padding:6px 10px; }
}

/* ==========================================================================
   Single product page polish (default WooCommerce template, no override)
   ========================================================================== */
.woocommerce div.product{ max-width:1200px; margin:0 auto; padding: 30px 20px; }
.woocommerce div.product .summary{ padding-left:10px; }
.woocommerce div.product .summary .price{ color: var(--sps-green-dark); font-size:1.4rem; }
.woocommerce div.product form.cart .button{ padding:13px 30px; }
.woocommerce div.product .woocommerce-product-rating{ margin-bottom:16px; }
.woocommerce #reviews h2{ font-size:1.4rem; }

/* ==========================================================================
   Floating Telegram button — fixed to the viewport, so it follows the
   visitor as they scroll rather than sitting in one spot on the page.
   ========================================================================== */
.sps-telegram-fab{
  position:fixed; right:20px; bottom:20px; z-index:200;
  width:56px; height:56px; border-radius:50%;
  background:#fff; box-shadow: 0 8px 22px rgba(0,0,0,.2), 0 0 0 0 rgba(38,165,228,.5);
  display:flex; align-items:center; justify-content:center;
  animation: sps-fab-in .5s cubic-bezier(.34,1.56,.64,1) both, sps-fab-bounce 2s ease-in-out .6s infinite;
  transition: box-shadow .2s ease;
}
.sps-telegram-fab:hover{
  box-shadow: 0 12px 28px rgba(0,0,0,.28);
  animation-play-state: paused;
  transform: translateY(-6px) scale(1.08);
}
@keyframes sps-fab-in{
  from{ opacity:0; transform: scale(.5) translateY(20px); }
  to{ opacity:1; transform:none; }
}
/* Keeps nudging up and down, like a chat-bubble launcher, so a first-time
   visitor's eye is drawn to it rather than it just sitting there — this
   is the "keep bouncing to alert the user" behavior, running continuously
   rather than a one-off entrance. */
@keyframes sps-fab-bounce{
  0%, 100%{ transform: translateY(0); box-shadow: 0 8px 22px rgba(0,0,0,.2), 0 0 0 0 rgba(38,165,228,.5); }
  15%{ transform: translateY(-12px); }
  30%{ transform: translateY(0); box-shadow: 0 8px 22px rgba(0,0,0,.2), 0 0 0 10px rgba(38,165,228,0); }
  45%{ transform: translateY(-6px); }
  60%, 100%{ transform: translateY(0); }
}
.sps-telegram-fab__caption{
  position:absolute; right:calc(100% + 14px); top:50%; transform:translateY(-50%);
  background:#fff; color: var(--sps-ink); font-weight:600; font-size:.85rem;
  white-space:nowrap; padding:9px 16px; border-radius:999px;
  box-shadow: var(--sps-shadow);
  opacity:0; animation: sps-caption-in .5s ease 1.1s both;
}
.sps-telegram-fab__caption::after{
  content:""; position:absolute; left:100%; top:50%; transform:translateY(-50%);
  border:6px solid transparent; border-left-color:#fff;
}
@keyframes sps-caption-in{
  from{ opacity:0; transform: translateY(-50%) translateX(8px); }
  to{ opacity:1; transform: translateY(-50%) translateX(0); }
}
@media (max-width: 768px){
  /* bottom raised clear of the mobile app-nav bar below (see
     .sps-mobile-nav) — its own height plus a little breathing room. */
  .sps-telegram-fab{ right:14px; bottom: calc(var(--sps-mobile-nav-height) + 14px); width:50px; height:50px; }
  .sps-telegram-fab svg{ width:22px; height:22px; }
  .sps-telegram-fab__caption{ font-size:.75rem; padding:7px 12px; right:calc(100% + 10px); max-width:46vw; white-space:normal; text-align:right; }
}
@media (prefers-reduced-motion: reduce){
  .sps-telegram-fab{ animation:none; }
  .sps-telegram-fab__caption{ opacity:1; animation:none; transform:translateY(-50%); }
}

/* ==========================================================================
   Cart / checkout polish (default WooCommerce templates)
   ========================================================================== */
.woocommerce-cart table.cart, .woocommerce-checkout table.shop_table{
  border-radius: var(--sps-radius); overflow:hidden; border:1px solid var(--sps-line);
}
.woocommerce-cart table.cart th, .woocommerce-checkout table.shop_table th{
  background: var(--sps-cream); color: var(--sps-green-dark);
}
.woocommerce table.shop_table td, .woocommerce table.shop_table th{ padding:12px 14px; }
.woocommerce-checkout #payment{ background: var(--sps-cream); border-radius: var(--sps-radius); }
.woocommerce-checkout #payment div.payment_box{ background:#fff; border-radius:10px; }

/* ==========================================================================
   Mobile app-style bottom navigation bar (phones only — hidden completely
   above the breakpoint below; desktop/tablet are untouched). Fixed 5-icon
   bar in the style of Instagram/Facebook's mobile app: Home, Shop, Cart
   (with a live badge), Blog, Account. Markup rendered by
   sps_render_mobile_bottom_nav() in functions.php.
   ========================================================================== */
.sps-mobile-nav{ display:none; }

@media (max-width: 768px){
  body{
    /* Stops the bar from covering the last bit of every page's content —
       the safe-area addition keeps it clear of the home-indicator strip
       on notched iPhones too. */
    padding-bottom: calc(var(--sps-mobile-nav-height) + env(safe-area-inset-bottom, 0px));
  }

  .sps-mobile-nav{
    display:flex; align-items:stretch; justify-content:space-around;
    position:fixed; left:0; right:0; bottom:0; z-index:400;
    height: var(--sps-mobile-nav-height);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background:#fff; border-top:1px solid var(--sps-line);
    box-shadow: 0 -4px 16px rgba(35,41,31,0.08);
  }
  .sps-mobile-nav__item{
    flex:1 1 0; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:2px; color: var(--sps-muted); text-decoration:none;
    -webkit-tap-highlight-color: transparent;
  }
  .sps-mobile-nav__item:hover{ color: var(--sps-muted); } /* prevents the sitewide link-hover orange from flashing on tap */
  .sps-mobile-nav__item.is-current{ color: var(--sps-green); }
  .sps-mobile-nav__icon-wrap{ position:relative; display:flex; }
  .sps-mobile-nav__item svg{ display:block; }
  .sps-mobile-nav__label{ font-size:.65rem; font-weight:600; line-height:1; }
  .sps-mobile-nav__badge{
    position:absolute; top:-6px; right:-9px;
    background: var(--sps-orange); color:#fff; font-size:.62rem; font-weight:700;
    min-width:16px; height:16px; border-radius:999px;
    display:flex; align-items:center; justify-content:center; padding:0 4px;
    line-height:1;
  }
  .sps-mobile-nav__badge.is-hidden{ display:none; }

  /* The theme's existing sitewide footer becomes redundant chrome once
     the bottom nav bar is the primary way to move around on a phone —
     kept in the DOM (so its links/widgets are still crawlable) but
     visually out of the way rather than stacking two navigation-ish
     blocks at the bottom of every page. */
  .site-footer{ padding-bottom: 8px; }
}

@media (prefers-reduced-motion: reduce){
  .sps-mobile-nav__item{ transition:none; }
}

/* ==========================================================================
   Cart & Checkout — these pages are just the bare WooCommerce Cart/
   Checkout blocks otherwise (plain form, plain table, default WooCommerce
   spacing), so this brings them in line with the rest of the site: a
   rabbit "hero" welcome banner (see sps_render_cart_hero() in
   inc/homepage-sections.php) plus card-style panels, better spacing, and
   the theme's own button/input styling applied over WooCommerce Blocks'
   default markup. Scoped to the body classes WooCommerce adds to these
   two pages specifically, so nothing else on the site is affected.
   ========================================================================== */

/* --- Rabbit hero banner -------------------------------------------------- */
.sps-cc-hero{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  background: linear-gradient(120deg, var(--sps-cream), #fff);
  border:1px solid var(--sps-line); border-radius: var(--sps-radius);
  padding: 28px 32px; margin-bottom:28px;
  box-shadow: var(--sps-shadow);
}
.sps-cc-hero__text h2{ margin:0 0 6px; font-size:1.5rem; }
.sps-cc-hero__text p{ margin:0; color: var(--sps-muted); }
.sps-cc-hero__art{ position:relative; flex:0 0 auto; width:120px; height:110px; }
.sps-cc-hero__basket{ position:absolute; left:0; bottom:0; width:78px; height:auto; }
.sps-cc-hero__rabbit{ position:absolute; right:0; bottom:18px; width:76px; height:76px; }
@media (max-width: 640px){
  .sps-cc-hero{ padding:20px; gap:14px; }
  .sps-cc-hero__text h2{ font-size:1.2rem; }
  .sps-cc-hero__art{ width:88px; height:84px; }
  .sps-cc-hero__basket{ width:58px; }
  .sps-cc-hero__rabbit{ width:56px; height:56px; bottom:14px; }
}
@media (max-width: 480px){
  .sps-cc-hero{ flex-direction:column; text-align:center; }
  .sps-cc-hero__art{ align-self:center; }
}

/* --- Shared card treatment for the main column + sidebar -----------------
   Deliberately NOT touching `gap` (or anything else) on
   .wc-block-components-sidebar-layout itself: WooCommerce Blocks sizes
   .wc-block-components-main/.wc-block-components-sidebar to fill that
   flex row exactly, with no slack for an added gap, so setting one here
   forces the sidebar to wrap onto its own line on desktop — confirmed by
   testing this live before shipping. The extra breathing room between
   the two columns comes from their own padding below instead. */
.woocommerce-cart .sps-content,
.woocommerce-checkout .sps-content{ max-width:1100px; }
.woocommerce-cart .wc-block-components-main,
.woocommerce-checkout .wc-block-components-main,
.woocommerce-cart .wc-block-components-sidebar,
.woocommerce-checkout .wc-block-components-sidebar{
  background:#fff; border:1px solid var(--sps-line); border-radius: var(--sps-radius);
  padding:24px 28px; box-shadow: var(--sps-shadow);
}
.woocommerce-checkout .wc-block-components-sidebar{ position:sticky; top:20px; }
@media (max-width: 780px){
  .woocommerce-cart .wc-block-components-main,
  .woocommerce-checkout .wc-block-components-main,
  .woocommerce-cart .wc-block-components-sidebar,
  .woocommerce-checkout .wc-block-components-sidebar{ padding:18px; }
  .woocommerce-checkout .wc-block-components-sidebar{ position:static; }
}

/* --- Cart item rows -------------------------------------------------- */
.woocommerce-cart .wc-block-cart-items__header{
  font-size:.72rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color: var(--sps-muted); border-bottom:2px solid var(--sps-line); padding-bottom:12px;
}
.woocommerce-cart .wc-block-cart-items__row{
  border-bottom:1px solid var(--sps-line); padding:18px 0;
  transition: background-color .15s ease;
}
.woocommerce-cart .wc-block-cart-items__row:last-child{ border-bottom:none; padding-bottom:6px; }
.woocommerce-cart .wc-block-cart-item__image img{
  border-radius:10px; border:1px solid var(--sps-line);
}
.woocommerce-cart .wc-block-components-product-name{
  color: var(--sps-ink); font-weight:600; text-decoration:none;
}
.woocommerce-cart .wc-block-components-quantity-selector{
  border-color: var(--sps-line); border-radius:999px; overflow:hidden;
}
.woocommerce-cart .wc-block-cart-item__remove-link{
  color: var(--sps-muted); font-weight:600;
  transition: color .15s ease;
}
.woocommerce-cart .wc-block-cart-item__remove-link:hover{ color:#c0392b; }

/* --- Totals / order summary ------------------------------------------ */
.woocommerce-cart .wc-block-components-sidebar .wc-block-components-totals-item,
.woocommerce-checkout .wc-block-components-checkout-order-summary__content .wc-block-components-totals-item{
  padding:10px 0;
}
.woocommerce-cart .wc-block-components-totals-item__label,
.woocommerce-checkout .wc-block-components-totals-item__label{ color: var(--sps-muted); }
.wc-block-components-totals-footer-item,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value{
  font-size:1.15rem; font-weight:800; color: var(--sps-ink) !important;
}

/* --- Checkout step headings ------------------------------------------- */
.woocommerce-checkout .wc-block-components-checkout-step__heading{
  border-bottom:2px solid var(--sps-line); padding-bottom:10px; margin-bottom:18px;
}
.woocommerce-checkout .wc-block-components-checkout-step__heading-content .wc-block-components-title{
  font-size:1.15rem; color: var(--sps-green-dark);
}

/* --- Inputs, selects, radios -------------------------------------------- */
.woocommerce-cart input[type="text"],
.woocommerce-cart input[type="email"],
.woocommerce-cart input[type="tel"],
.woocommerce-cart input[type="number"],
.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout input[type="number"],
.woocommerce-checkout select,
.woocommerce-checkout .wc-blocks-components-select__select{
  border-radius:10px !important; border-color: var(--sps-line) !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.woocommerce-checkout input:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout .wc-blocks-components-select__select:focus{
  border-color: var(--sps-green) !important;
  box-shadow: 0 0 0 3px rgba(47,109,58,.15) !important;
  outline:none;
}
.woocommerce-checkout .wc-block-components-radio-control__option{
  border-radius:10px !important; border-color: var(--sps-line) !important;
  transition: border-color .15s ease, background-color .15s ease;
}
.woocommerce-checkout .wc-block-components-radio-control__option:has(input:checked){
  border-color: var(--sps-green) !important; background: var(--sps-cream);
}

/* --- Buttons: match the site's pill-shaped, lifting CTA style --------- */
.woocommerce-cart .wc-block-components-button:not(.wc-block-components-button--link),
.woocommerce-checkout .wc-block-components-button:not(.wc-block-components-button--link){
  border-radius:999px !important; font-weight:700 !important;
  background: var(--sps-green) !important; color:#fff !important;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease !important;
}
.woocommerce-cart .wc-block-components-button:not(.wc-block-components-button--link):hover,
.woocommerce-checkout .wc-block-components-button:not(.wc-block-components-button--link):hover{
  transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,.18);
  background: var(--sps-green-dark) !important;
}

@media (prefers-reduced-motion: reduce){
  .sps-cc-hero__rabbit,
  .woocommerce-cart .wc-block-components-button,
  .woocommerce-checkout .wc-block-components-button{ transition:none; }
  .woocommerce-cart .wc-block-components-button:hover,
  .woocommerce-checkout .wc-block-components-button:hover{ transform:none; }
}

/* --- Empty cart state -----------------------------------------------------
   WooCommerce's default empty-cart pattern (icon + message + "New in
   store" upsell grid) had no styling of its own on this theme: a stark
   black sad-face icon sitting right under the cheerful rabbit hero (and
   contradicting it — see the is_empty() check in sps_render_cart_hero()),
   a plain-text "Browse store" link, and a completely unstyled product
   grid, since that "Product New" block uses its own markup/classes,
   entirely separate from the ul.products styling used everywhere else on
   the site. Confirmed live before shipping — including a real bug where
   switching this grid from WooCommerce's default flex layout to CSS grid
   left its old flex-only `max-width:25%` in place, which then recalculated
   against each grid cell instead of the row and shrank every card to a
   sliver; fixed by resetting it explicitly below. */
.wp-block-woocommerce-empty-cart-block{
  text-align:center; max-width:640px; margin-left:auto; margin-right:auto;
}
/* The sad-face icon duplicates the basket motif already established in
   the hero above and reads as an odd, downbeat note right under a
   friendly welcome — dropped rather than restyled. A warmer replacement
   (three mascots huddled together, "hugging") is cloned in above the
   title by main.js — see .sps-empty-cart-hug below and
   sps_empty_cart_hug_template() in functions.php.

   !important is required here: WooCommerce's own cart.css sets
   `display: block` on this exact same selector (verified live — same
   class list, same ::before), and since the two rules are tied on
   specificity, WooCommerce's stylesheet happens to load after ours, so
   without !important its `display: block` was winning and the sad face
   kept showing up right alongside our replacement instead of being
   replaced by it. */
.wc-block-cart__empty-cart__title.with-empty-cart-icon::before{ display:none !important; }
.wc-block-cart__empty-cart__title{
  font-size:1.4rem; margin:0 0 8px; color: var(--sps-ink);
}
/* "Hugs and kisses" empty-cart icon — three of the site's own mascots
   (same hand-drawn SVGs as sps_render_pet_mascots()) huddled close
   together with a couple of hearts drifting up between them, in place of
   WooCommerce's default sad face (hidden above). Reuses the existing
   .sps-mascot bob/sway/ear/paw/blink animations for free. */
.sps-empty-cart-hug{
  position:relative;
  display:flex; align-items:flex-end; justify-content:center;
  height:76px; margin:0 auto 14px;
}
.sps-hug__pet{ width:64px; height:64px; margin:0 -14px; }
.sps-hug__pet:nth-child(2){ z-index:1; transform:translateY(-4px); }
@media (max-width:480px){
  .sps-empty-cart-hug{ height:64px; }
  .sps-hug__pet{ width:52px; height:52px; margin:0 -10px; }
}
.sps-hug__heart{
  position:absolute; top:2px; font-size:1.1rem; line-height:1; opacity:0;
  animation: sps-hug-heart-float 2.6s ease-in infinite;
}
.sps-hug__heart--1{ left:calc(50% - 48px); animation-delay:.1s; }
.sps-hug__heart--2{ left:calc(50% - 6px); animation-delay:.9s; }
.sps-hug__heart--3{ left:calc(50% + 36px); animation-delay:1.7s; }
@keyframes sps-hug-heart-float{
  0%{ opacity:0; transform: translateY(0) scale(.6); }
  20%{ opacity:1; transform: translateY(-10px) scale(1); }
  80%{ opacity:1; transform: translateY(-30px) scale(1); }
  100%{ opacity:0; transform: translateY(-42px) scale(.8); }
}
.wp-block-woocommerce-empty-cart-block > p.wp-block-paragraph{ margin:0 0 28px; }
.wp-block-woocommerce-empty-cart-block > p.wp-block-paragraph a{
  display:inline-block; background: var(--sps-green); color:#fff;
  padding:10px 26px; border-radius:999px; font-weight:700; text-decoration:none;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.wp-block-woocommerce-empty-cart-block > p.wp-block-paragraph a:hover{
  color:#fff; background: var(--sps-green-dark);
  transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,.15);
}
.wp-block-woocommerce-empty-cart-block hr.wp-block-separator{
  border-top-color: var(--sps-line); max-width:120px; margin:32px auto;
}
.wp-block-woocommerce-empty-cart-block > h2:not(.wc-block-cart__empty-cart__title){
  font-size:1.4rem; margin-bottom:20px;
}
/* "New in store" upsell grid (the Product New block) — same card look as
   the rest of the site's product grids, applied to this block's own,
   differently-named classes. */
.wp-block-woocommerce-empty-cart-block .wc-block-grid.wp-block-product-new{ text-align:left; }
.wp-block-woocommerce-empty-cart-block .wc-block-grid__products{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:18px;
  list-style:none; margin:0; padding:0;
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product{
  /* Resets WooCommerce's own flex-basis/max-width:25% (meant for its
     default flex row) — left in place, it recomputes against each grid
     cell instead of the whole row and shrinks every card to a sliver. */
  max-width:none !important; flex-basis:auto !important; width:auto !important;
  background:#fff; border:1px solid var(--sps-line); border-radius: var(--sps-radius);
  padding:14px; transition: transform .18s ease, box-shadow .18s ease;
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product:hover{
  transform: translateY(-3px); box-shadow: var(--sps-shadow);
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-link{ text-decoration:none; color:inherit; display:block; }
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-image img{
  border-radius:10px; aspect-ratio:1/1; width:100%; height:auto; object-fit:cover;
  transition: transform .4s ease;
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product:hover img{ transform: scale(1.05); }
/* A product still waiting on real photography falls back to WooCommerce's
   default placeholder — a flat gray square with tiny "Placeholder" text —
   which looks broken and inconsistent sitting next to real product photos
   in the same row (a couple of newer supplement products don't have
   photos yet, which is what made this small "New in store" grid look
   messy). Rather than show that placeholder image, swap in a soft
   on-brand tile with a simple paw mark instead, so a missing photo reads
   as "on-brand" rather than "broken." Matched via [src*="placeholder"]
   since WooCommerce doesn't add a distinguishing class to the <img>
   itself. Scoped to .wc-block-grid__product-image specifically (a div
   that wraps *only* the image, nothing else) rather than the classic
   shop-grid's card-wide link element, so the paw-mark overlay can't ever
   spill over and cover a card's title/price too. */
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-image:has(img[src*="placeholder" i]){
  position:relative;
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-image:has(img[src*="placeholder" i]) img{
  opacity:0;
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-image:has(img[src*="placeholder" i])::after{
  content:"🐾";
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:2rem;
  background: var(--sps-cream);
  border-radius:10px;
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-title{
  font-size:.9rem; font-weight:600; margin-top:10px; color: var(--sps-ink);
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-price{
  font-size:.88rem; color: var(--sps-muted); margin-top:2px;
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart{ margin-top:10px; }
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart .wp-block-button__link{
  display:block; text-align:center; background: var(--sps-green); color:#fff !important;
  padding:8px 14px; border-radius:999px; font-weight:700; font-size:.82rem; text-decoration:none;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart .wp-block-button__link:hover{
  background: var(--sps-green-dark); transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0,0,0,.15);
}
@media (max-width: 900px){
  .wp-block-woocommerce-empty-cart-block .wc-block-grid__products{ grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   Subscribe for repeat delivery — product page option + dedicated
   subscription checkout form (see inc/subscriptions.php)
   ========================================================================== */
.sps-subscribe-option{
  border:1px solid var(--sps-line); border-radius: var(--sps-radius);
  padding:14px 16px; margin:16px 0; background: var(--sps-cream);
}
.sps-subscribe-option__choice{
  display:flex; align-items:center; gap:8px; font-weight:600;
  padding:6px 0; cursor:pointer;
}
.sps-subscribe-option__choice input{ margin:0; }
.sps-subscribe-option__frequency{
  margin:8px 0 0 24px; padding:10px 0 0; border-top:1px dashed var(--sps-line);
}
.sps-subscribe-option__frequency select{
  padding:6px 10px; border-radius:8px; border:1px solid var(--sps-line);
  font-family:inherit; font-size:.9rem; margin-left:6px;
}
.sps-subscribe-option__note{
  margin:8px 0 0; font-size:.8rem; color: var(--sps-muted);
}

.sps-sub-checkout{
  max-width:560px; margin:0 auto; background:#fff; border:1px solid var(--sps-line);
  border-radius: var(--sps-radius); padding:28px; box-shadow: var(--sps-shadow);
}
.sps-sub-checkout__summary{
  display:flex; align-items:center; gap:14px; padding-bottom:18px;
  margin-bottom:18px; border-bottom:1px solid var(--sps-line);
}
.sps-sub-checkout__summary img{ width:64px; height:64px; object-fit:cover; border-radius:10px; flex:0 0 auto; }
.sps-sub-checkout__summary h3{ margin:0 0 4px; font-size:1rem; }
.sps-sub-checkout__summary p{ margin:0; font-size:.88rem; color: var(--sps-muted); }
.sps-sub-checkout__form{ display:flex; flex-direction:column; gap:12px; }
.sps-sub-checkout__form label{
  display:flex; flex-direction:column; gap:5px; font-weight:600; font-size:.85rem;
}
.sps-sub-checkout__label--bare{ font-weight:400; }
.sps-sub-checkout__form input[type="text"],
.sps-sub-checkout__form input[type="email"],
.sps-sub-checkout__form input[type="tel"]{
  padding:10px 12px; border-radius:10px; border:1px solid var(--sps-line);
  font-family:inherit; font-size:.9rem; font-weight:400;
}
.sps-sub-checkout__note{ font-size:.8rem; color: var(--sps-muted); margin:4px 0 0; }
.sps-sub-checkout__submit{ margin-top:8px; }

/* Admin Subscriptions list (wp-admin) status pill */
.sps-sub-status{
  display:inline-block; padding:2px 9px; border-radius:999px;
  font-size:.75rem; font-weight:700; background: var(--sps-cream); color: var(--sps-ink);
}
.sps-sub-status--active{ background:#e2f3e6; color: var(--sps-green-dark); }
.sps-sub-status--cancelled,
.sps-sub-status--expired,
.sps-sub-status--setup_failed{ background:#fbe4e4; color:#a33; }
.sps-sub-status--pending_payment,
.sps-sub-status--paused{ background:#fdf0d5; color:#9a6b12; }

/* ==========================================================================
   "Free Care Guides" homepage section — glassmorphism-style buttons
   ========================================================================== */
.sps-guides{
  position:relative; overflow:hidden; isolation:isolate;
  padding: 56px 0 64px;
  background: linear-gradient(135deg, var(--sps-green) 0%, var(--sps-green-dark) 65%, var(--sps-green) 100%);
}
.sps-guides .sps-cat-heading,
.sps-guides .sps-section__head p{ color:#fff; }
.sps-guides .sps-section__head p{ color: rgba(255,255,255,.82); max-width:560px; margin:8px auto 0; }
.sps-guides__blob{
  position:absolute; z-index:0; border-radius:50%; filter: blur(50px); opacity:.35;
  animation: sps-blob-float 10s ease-in-out infinite alternate;
}
.sps-guides__blob--a{ width:260px; height:260px; top:-100px; left:-70px; background: var(--sps-orange); }
.sps-guides__blob--b{ width:300px; height:300px; bottom:-140px; right:-90px; background:#fff; animation-delay:1.4s; }

.sps-guides__grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap:18px;
  margin-top:34px;
}
.sps-guide-btn{
  position:relative; display:flex; align-items:center; gap:16px;
  padding: 20px 20px;
  border-radius: var(--sps-radius);
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.32);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 8px 28px rgba(15,30,18,.18), inset 0 1px 0 rgba(255,255,255,.25);
  color:#fff; text-decoration:none;
  opacity:0; transform: translateY(16px);
  transition: transform .3s cubic-bezier(.22,.9,.32,1.3), box-shadow .3s ease, background .3s ease, border-color .3s ease;
}
.sps-reveal.is-visible .sps-guide-btn{
  animation: sps-guide-in .5s ease forwards;
  animation-delay: calc(var(--sps-i, 0) * .08s);
}
@keyframes sps-guide-in{
  from{ opacity:0; transform: translateY(16px); }
  to{ opacity:1; transform: translateY(0); }
}
.sps-guide-btn:hover,
.sps-guide-btn:focus-visible{
  color:#fff;
  background: rgba(255,255,255,.22);
  border-color: rgba(255,255,255,.5);
  transform: translateY(-4px);
  box-shadow: 0 14px 36px rgba(15,30,18,.26), inset 0 1px 0 rgba(255,255,255,.35);
}
.sps-guide-btn__icon{
  flex:0 0 auto; width:48px; height:48px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:1.4rem;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.3);
}
.sps-guide-btn__body{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.sps-guide-btn__title{ font-weight:800; font-size:1rem; line-height:1.25; }
.sps-guide-btn__text{ font-size:.82rem; color: rgba(255,255,255,.82); line-height:1.35; }
.sps-guide-btn__arrow{
  margin-left:auto; flex:0 0 auto; font-size:1.1rem; opacity:.75;
  transition: transform .25s ease, opacity .25s ease;
}
.sps-guide-btn:hover .sps-guide-btn__arrow{ transform: translateX(4px); opacity:1; }

@media (prefers-reduced-motion: reduce){
  .sps-guide-btn{ opacity:1; transform:none; animation:none !important; }
  .sps-guides__blob{ animation:none; }
}

/* ==========================================================================
   Blog post "Shop the essentials" upsell card — see inc/blog-upsell.php.
   Light-mode card (plain content page, not the dark hero gradient used by
   .sps-guides above), matching the site's standard card look
   (--sps-cream / --sps-line / --sps-shadow tokens already used elsewhere).
   ========================================================================== */
.sps-post-shop-cta{
  margin: 40px 0 8px;
  padding: 22px 22px 20px;
  background: var(--sps-cream);
  border: 1px solid var(--sps-line);
  border-radius: var(--sps-radius);
  box-shadow: var(--sps-shadow);
}
.sps-post-shop-cta__label{
  margin: 0 0 14px;
  font-weight: 800;
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sps-muted);
}
.sps-post-shop-cta__grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
  gap: 14px;
}
.sps-post-shop-cta__item{
  position: relative;
  display: flex; align-items: center; gap: 14px;
  padding: 16px 16px;
  border-radius: calc(var(--sps-radius) - 4px);
  background: #fff;
  border: 1px solid var(--sps-line);
  color: var(--sps-ink);
  text-decoration: none;
  transition: transform .25s cubic-bezier(.22,.9,.32,1.3), box-shadow .25s ease, border-color .25s ease;
}
.sps-post-shop-cta__item:hover,
.sps-post-shop-cta__item:focus-visible{
  color: var(--sps-ink);
  border-color: var(--sps-green);
  box-shadow: var(--sps-shadow-hover);
  transform: translateY(-3px);
}
.sps-post-shop-cta__icon{
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
  background: rgba(47,109,58,.1);
}
.sps-post-shop-cta__body{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sps-post-shop-cta__title{ font-weight: 800; font-size: .95rem; line-height: 1.25; }
.sps-post-shop-cta__text{ font-size: .8rem; color: var(--sps-muted); line-height: 1.35; }
.sps-post-shop-cta__arrow{
  margin-left: auto; flex: 0 0 auto; font-size: 1.05rem; color: var(--sps-green); opacity: .75;
  transition: transform .25s ease, opacity .25s ease;
}
.sps-post-shop-cta__item:hover .sps-post-shop-cta__arrow{ transform: translateX(4px); opacity: 1; }

/* ==========================================================================
   Blog post breadcrumb trail (single.php) — matches the BreadcrumbList
   schema added in inc/seo.php's sps_blog_breadcrumb_schema().
   ========================================================================== */
.sps-breadcrumb{
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin: 0 0 14px;
  font-size: .82rem;
  color: var(--sps-muted);
}
.sps-breadcrumb a{ color: var(--sps-muted); text-decoration: none; }
.sps-breadcrumb a:hover,
.sps-breadcrumb a:focus-visible{ color: var(--sps-green); text-decoration: underline; }
.sps-breadcrumb span[aria-current]{ color: var(--sps-ink); }

/* ==========================================================================
   Bundles: automatic cross-category "Bundle & Save" boxes — rendered by
   sps-store-manager's SPS_Bundles class on product pages, the Shop page/
   homepage "Bundle Deals" row, and the dedicated /bundles/ page. All three
   placements share the same .sps-bundle-box markup.
   ========================================================================== */
.sps-bundle-section{ max-width:1200px; margin:0 auto; padding: 0 20px 40px; }
.sps-bundle-deals__grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:20px;
}
.sps-bundle-deals__grid--page{ max-width:1200px; margin:0 auto; padding:40px 20px; }
.sps-bundle-box{
  background:#fff; border:1px solid var(--sps-line); border-radius: var(--sps-radius);
  box-shadow: var(--sps-shadow); padding:18px; display:flex; flex-direction:column; gap:12px;
}
.sps-bundle-box__heading{ margin:0; font-size:1.05rem; }
.sps-bundle-box__items{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
.sps-bundle-box__item{
  display:flex; flex-direction:column; align-items:center; gap:6px; width:88px;
  text-align:center; color: var(--sps-ink); text-decoration:none;
}
.sps-bundle-box__item:hover{ color: var(--sps-orange); }
.sps-bundle-box__item img{ width:72px; height:72px; object-fit:cover; border-radius:8px; }
.sps-bundle-box__item-name{ font-size:.78rem; line-height:1.25; }
.sps-bundle-box__plus{ font-weight:800; color: var(--sps-muted); flex:0 0 auto; }
.sps-bundle-box__pricing{ display:flex; align-items:baseline; flex-wrap:wrap; gap:8px; }
.sps-bundle-box__was{ text-decoration:line-through; color: var(--sps-muted); font-size:.9rem; }
.sps-bundle-box__now{ color: var(--sps-green-dark); font-weight:800; font-size:1.15rem; }
.sps-bundle-box__save{
  background: var(--sps-cream); color: var(--sps-green-dark); font-weight:700;
  font-size:.78rem; padding:3px 8px; border-radius:999px;
}
.sps-bundle-box__add{ align-self:flex-start; }

/* ==========================================================================
   Reorder Offers: post-purchase "Order Again" cross-sell, rendered by
   sps-store-manager's SPS_Reorder_Offers class on the order-received
   (thank-you) page only.
   ========================================================================== */
.sps-reorder-offers{ max-width:1200px; margin:0 auto; padding: 20px 20px 40px; }
.sps-reorder-offers__grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:18px;
}
.sps-reorder-offers__item{
  background:#fff; border:1px solid var(--sps-line); border-radius: var(--sps-radius);
  box-shadow: var(--sps-shadow); padding:16px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.sps-reorder-offers__image img{ width:100px; height:100px; object-fit:cover; border-radius:8px; }
.sps-reorder-offers__name{ margin:0; font-weight:600; font-size:.92rem; color: var(--sps-ink); }
.sps-reorder-offers__pricing{ margin:0; display:flex; align-items:baseline; gap:8px; }
.sps-reorder-offers__was{ text-decoration:line-through; color: var(--sps-muted); font-size:.85rem; }
.sps-reorder-offers__now{ color: var(--sps-green-dark); font-weight:800; }
.sps-reorder-offers__cta{ margin-top:4px; width:100%; }

/* ==========================================================================
   Contact Us page (/contact-us/) — [sps_contact_page] shortcode in
   inc/contact-page.php: an "Email Us" card + a "Shipping" card, each with
   a hand-drawn illustration, plus a simple contact form.
   ========================================================================== */
.sps-contact-page{ max-width:1000px; margin:0 auto; padding:20px 20px 60px; }
.sps-contact-hero{ text-align:center; max-width:640px; margin:0 auto 36px; }
.sps-contact-hero h1{ margin:0 0 10px; font-size:2rem; }
.sps-contact-hero p{ margin:0; color: var(--sps-muted); }
.sps-contact-cards{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:24px; margin-bottom:40px;
}
.sps-contact-card{
  background:#fff; border:1px solid var(--sps-line); border-radius: var(--sps-radius);
  box-shadow: var(--sps-shadow); padding:26px 24px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:6px;
}
.sps-contact-illustration{ width:120px; height:110px; margin-bottom:6px; }
.sps-contact-illustration__svg{ width:100%; height:100%; }
.sps-contact-card h2{ margin:6px 0 0; font-size:1.2rem; }
.sps-contact-card p{ margin:0; color: var(--sps-muted); font-size:.95rem; }
.sps-contact-card__email{
  display:inline-block; margin-top:8px; font-weight:700; font-size:1.05rem;
  color: var(--sps-green-dark);
}
.sps-contact-card__email:hover{ color: var(--sps-orange); }
.sps-contact-card__note{ font-size:.85rem !important; color: var(--sps-green-dark) !important; font-weight:600; }
.sps-contact-form-wrap{
  background: var(--sps-cream); border-radius: var(--sps-radius); padding:32px;
  max-width:560px; margin:0 auto;
}
.sps-contact-form-wrap h2{ margin:0 0 18px; text-align:center; }
.sps-contact-form{ display:flex; flex-direction:column; gap:16px; }
.sps-contact-form label{ display:flex; flex-direction:column; gap:6px; font-weight:600; font-size:.92rem; }
.sps-contact-form input[type="text"],
.sps-contact-form input[type="email"],
.sps-contact-form textarea{
  font-family:inherit; font-size:1rem; padding:10px 12px; border:1px solid var(--sps-line);
  border-radius:8px; background:#fff;
}
.sps-contact-form textarea{ resize:vertical; }
.sps-contact-form__submit{ align-self:flex-start; margin-top:4px; }
.sps-contact-form__honeypot{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.sps-contact-form__notice{
  padding:12px 16px; border-radius:8px; margin-bottom:18px; font-size:.95rem;
}
.sps-contact-form__notice--success{ background:#e6f2e8; color: var(--sps-green-dark); }
.sps-contact-form__notice--error{ background:#fbe9e7; color:#a13a2a; }
@media (max-width: 600px){
  .sps-contact-form-wrap{ padding:22px; }
}