/*
Theme Name: Sweet Paws
Theme URI: https://getpettag.co.uk
Author: Get Pet Tag
Description: Premium feminine boutique WooCommerce theme. Soft pastel palette, elegant typography.
Version: 1.9.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL v2 or later
Text Domain: sweetpaws
*/

/* ══════════════════════════════════════
   DESIGN TOKENS
══════════════════════════════════════ */
:root {
  /* ── Warm Petal palette ── */
  --rose:    #DC92B3;   --rose2:   #c87a9e;   --rose-l:  #fdf0f7;
  --blush:   #F4C1CB;   --blush2:  #e0a8b4;   --blush-l: #fff5f8;
  --mauve:   #CCA7C2;   --mauve2:  #b890ae;   --mauve-l: #f5eef4;
  --blue:    #A6C8E5;   --blue2:   #8ab4d4;   --blue-l:  #eef5fb;
  --dark:    #3d2e38;   --dark2:   #2d1f28;   /* deep plum replaces navy */
  --brown:   #C87941;   --caramel: #e8952a;   /* warm amber accents */
  --grape:   #7B5EA7;   --grape2:  #5c2d6e;   /* violet depth */
  --bg:      #FFFDF8;   --bg2:     #fff8f0;   --white:   #FFFFFF;
  --text:    #3d2e38;   --text2:   #6b4f62;   --muted:   #9e7a90;

  /* Borders & shadows — warm tinted */
  --bd:      rgba(61,46,56,.1);
  --bd2:     rgba(200,121,65,.25);
  --sh-xs:   0 2px 8px  rgba(61,46,56,.07);
  --sh-sm:   0 4px 16px rgba(61,46,56,.1);
  --sh-md:   0 8px 32px rgba(61,46,56,.12);
  --sh-lg:   0 16px 56px rgba(61,46,56,.15);
  --sh-xl:   0 24px 80px rgba(61,46,56,.19);

  /* Radius */
  --r-xs: 4px;  --r-sm: 8px;  --r-md: 16px;
  --r-lg: 24px; --r-xl: 36px; --r-pill: 9999px;

  /* Spacing scale */
  --sp-1: 4px;  --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px;  --sp-7: 48px;  --sp-8: 64px;
  --sp-9: 80px; --sp-10: 120px;

  /* Typography */
  --font-head: 'Cormorant Garamond', 'Georgia', serif;
  --font-body: 'DM Sans', 'Helvetica Neue', sans-serif;
  --font-accent: 'Playfair Display', serif;

  /* Transitions */
  --ease: cubic-bezier(.25,.46,.45,.94);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
}

/* ══════════════════════════════════════
   RESET & BASE
══════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--rose); text-decoration: none; transition: color .2s; }
a:hover { color: var(--rose2); }

/* ── Background: clean white + very subtle paw pattern ── */
body {
  background-color: #ffffff;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='%23A9B5FF' opacity='0.055'%3E%3Cellipse cx='90' cy='108' rx='18' ry='15'/%3E%3Cellipse cx='66' cy='80' rx='9' ry='11'/%3E%3Cellipse cx='85' cy='71' rx='9' ry='11'/%3E%3Cellipse cx='105' cy='71' rx='9' ry='11'/%3E%3Cellipse cx='114' cy='84' rx='8' ry='10'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 180px 180px;
  background-repeat: repeat;
}

body::before {
  content: '';
  position: fixed; inset: 0;
  background:
    radial-gradient(ellipse 65% 55% at 5% 8%,  rgba(169,181,255,.1) 0%, transparent 65%),
    radial-gradient(ellipse 55% 45% at 95% 92%, rgba(251,122,142,.07) 0%, transparent 60%);
  pointer-events: none; z-index: 0;
}

.site { position: relative; z-index: 1; }

/* ══════════════════════════════════════
   ANNOUNCEMENT BAR
══════════════════════════════════════ */
.announcement-bar {
  position: relative;
  z-index: 1001;
  background: linear-gradient(90deg, var(--dark), var(--blue2), var(--dark));
  background-size: 200% 100%;
  animation: shimmer 4s ease-in-out infinite;
  color: white;
  text-align: center;
  padding: 10px 20px;
  font-family: var(--font-body);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  position: relative; z-index: 200;
}
@keyframes shimmer {
  0%, 100% { background-position: 0% 50%; }
  50%       { background-position: 100% 50%; }
}
.announcement-bar a { color: white; text-decoration: underline; }

/* ══════════════════════════════════════
   HEADER
══════════════════════════════════════ */
.site-header {
  /* Frosted glass — tinted so it's visible on light backgrounds too */
  background: rgba(248, 240, 255, 0.72);
  backdrop-filter: blur(40px) saturate(200%) brightness(1.06);
  -webkit-backdrop-filter: blur(40px) saturate(200%) brightness(1.06);
  border-bottom: 1px solid rgba(255,255,255,0.6);
  box-shadow:
    0 1px 0 rgba(200,121,65,0.06),
    0 6px 24px rgba(61,46,56,0.08),
    inset 0 1px 0 rgba(255,255,255,0.85);
  position: sticky !important;
  top: 0 !important;
  z-index: 99999 !important;
}
.site-header::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.55) 0%,
    rgba(255,255,255,0.0) 100%
  );
  pointer-events: none;
  z-index: 0;
}
.header-inner {
  max-width: 1280px; margin: 0 auto;
  padding: 10px 40px;
  display: flex; align-items: center;
  justify-content: space-between; gap: 32px;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}

/* Nav — frosted glass container, links simple & clean */
.main-navigation {
  flex: 1;
  display: flex;
  justify-content: center;
}
.main-navigation ul {
  display: inline-flex;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 4px 0;
  background: none;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  position: relative;
}
.main-navigation ul::before { display: none; }
.main-navigation ul li a {
  display: block;
  padding: 7px 17px;
  font-size: .83rem;
  font-weight: 600;
  color: var(--dark, #3d2e38);
  text-decoration: none;
  letter-spacing: .02em;
  border-radius: 9999px;
  background: transparent;
  border: 1px solid transparent;
  transition: background .2s, color .2s, border-color .2s;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
}
/* Orange underline slide-in on hover */
.main-navigation ul li a::after {
  content: '';
  position: absolute;
  bottom: 5px;
  left: 17px;
  right: 17px;
  height: 2px;
  border-radius: 2px;
  background: var(--caramel, #C87941);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .22s cubic-bezier(.4,0,.2,1);
}
.main-navigation ul li a:hover {
  background: rgba(255,255,255,0.55);
  color: var(--caramel, #C87941);
}
.main-navigation ul li a:hover::after {
  transform: scaleX(1);
}
.main-navigation ul li.current-menu-item a,
.main-navigation ul li.current_page_item a,
.main-navigation ul li.current-menu-ancestor a {
  background: rgba(255,255,255,0.68);
  color: var(--caramel, #C87941);
  font-weight: 700;
  border-color: rgba(200,121,65,0.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85);
}
.main-navigation ul li.current-menu-item a::after,
.main-navigation ul li.current_page_item a::after,
.main-navigation ul li.current-menu-ancestor a::after {
  transform: scaleX(1);
}

/* Logo — centered, fully visible */
.site-branding {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.site-logo-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  line-height: 0;
}
.site-logo-img {
  height: 56px;
  width: auto;
  max-width: none;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 3px 12px rgba(0,0,0,.15));
  transition: transform .3s var(--ease);
}
.site-logo-img:hover { transform: scale(1.03); }
.site-logo-text {
  font-family: var(--font-head);
  font-size: 1.8rem; font-weight: 700;
  color: var(--dark); letter-spacing: -.01em;
  text-decoration: none;
}
.site-description { display: none; }

/* Navigation */
.main-navigation { flex: 1; display: flex; justify-content: center; }

/* Header actions */
.header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.header-icon-btn {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-pill); background: transparent;
  border: 1px solid var(--bd2); color: var(--text2);
  transition: all .22s; cursor: pointer; text-decoration: none;
  font-size: .9rem;
}
.header-icon-btn:hover { background: var(--rose-l); border-color: var(--rose); color: var(--rose); }

/* Header text action buttons */
/* Header text + icon buttons */
.hdr-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border-radius: 9999px;
  font-family: var(--font-body);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-decoration: none;
  transition: all .22s var(--ease);
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
}
.hdr-btn svg { flex-shrink: 0; transition: transform .22s var(--ease); }

/* Solid — Log In (primary CTA) */
.hdr-btn-solid {
  background: var(--rose);
  color: white;
  border: 2px solid var(--rose);
  box-shadow: 0 3px 12px rgba(251,122,142,.3);
}
.hdr-btn-solid:hover {
  background: var(--rose2, #e86070);
  border-color: var(--rose2, #e86070);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(251,122,142,.42);
  color: white;
}

/* Outline — Register / Log Out */
.hdr-btn-outline {
  background: transparent;
  color: var(--dark);
  border: 2px solid rgba(3,27,137,.2);
}
.hdr-btn-outline:hover {
  background: #f5c6d8;
  color: var(--dark, #3d2e38);
  border-color: rgba(192,90,130,.4);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(192,90,130,.25);
}

/* Ghost — My Pets (subtle) */
.hdr-btn-ghost {
  background: var(--lav-l, #eef0ff);
  color: var(--dark);
  border: 2px solid rgba(169,181,255,.35);
}
.hdr-btn-ghost:hover {
  background: #f5c6d8;
  color: var(--dark, #3d2e38);
  border-color: rgba(192,90,130,.4);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(192,90,130,.25);
}
.hdr-btn-ghost:hover svg { transform: scale(1.1); }


/* Mobile right */
#mobile-right { display: none; align-items: center; gap: 10px; flex-shrink: 0; }
.burger-btn {
  width: 40px; height: 40px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 5px;
  background: white; border: 1px solid var(--bd2);
  border-radius: var(--r-md); cursor: pointer;
  transition: all .22s; flex-shrink: 0;
}
.burger-btn:hover { background: var(--rose-l); border-color: var(--rose); }
.burger-btn span {
  display: block; width: 18px; height: 1.5px;
  background: var(--rose); border-radius: 2px;
  transition: all .3s var(--ease); transform-origin: center;
}
.burger-btn.active span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger-btn.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.burger-btn.active span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ══════════════════════════════════════
   MOBILE DRAWER
══════════════════════════════════════ */
.mobile-drawer { display: none; position: fixed; inset: 0; z-index: 100000; top: 0 !important; }
.mobile-drawer.open { display: block; }
.mobile-drawer-overlay {
  position: absolute; inset: 0;
  background: rgba(61,46,56,.5);
  backdrop-filter: blur(6px);
}
.mobile-drawer-panel {
  position: fixed;
  top: 0 !important;
  right: 0;
  bottom: 0;
  width: min(320px,90vw);
  background: var(--bg);
  transform: translateX(100%);
  transition: transform .35s var(--ease);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  border-left: 1px solid var(--bd);
  z-index: 100001;
  margin-top: 0 !important;
}
/* Overlay full screen */
.mobile-drawer-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 100000 !important;
}
.mobile-drawer.open .mobile-drawer-panel { transform: translateX(0); }
.drawer-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 22px;
  background: linear-gradient(135deg, var(--blue-l), var(--mauve-l));
  border-bottom: 1px solid var(--bd); flex-shrink: 0;
}
.drawer-brand {
  font-family: var(--font-head); font-size: 1.2rem;
  font-weight: 700; color: var(--dark);
}
.drawer-close {
  width: 32px; height: 32px; border-radius: 50%;
  background: white; border: 1px solid var(--bd2);
  color: var(--dark); cursor: pointer; font-size: .9rem;
  display: flex; align-items: center; justify-content: center;
}
.drawer-nav { padding: 8px 0; }
.drawer-menu { list-style: none; }
.drawer-menu li { border-bottom: 1px solid var(--bd); }
.drawer-menu a {
  display: block; padding: 15px 22px;
  font-size: .95rem; font-weight: 500; color: var(--text2);
  text-decoration: none; transition: all .18s;
  letter-spacing: .03em;
}
.drawer-menu a:hover { background: var(--rose-l); color: var(--rose); padding-left: 28px; }
.drawer-sep { height: 1px; background: var(--bd); margin: 6px 22px; }
.drawer-actions { padding: 16px 22px; display: flex; flex-direction: column; gap: 10px; }
.drawer-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 20px; border-radius: var(--r-pill);
  font-family: var(--font-body); font-size: .88rem; font-weight: 600;
  text-decoration: none; text-align: center; transition: all .22s;
  border: none; cursor: pointer; letter-spacing: .03em;
}
.drawer-btn-rose { background: var(--rose); color: white; box-shadow: 0 4px 14px rgba(251,122,142,.35); }
.drawer-btn-rose:hover { background: var(--rose2); color: white; transform: translateY(-1px); }
.drawer-btn-outline { background: transparent; color: var(--rose); border: 1.5px solid var(--rose); }
.drawer-btn-outline:hover { background: var(--rose-l); }
.drawer-footer {
  margin-top: auto; padding: 18px 22px;
  font-size: .78rem; font-weight: 500; color: var(--muted);
  text-align: center; border-top: 1px solid var(--bd);
  background: var(--blush-l); font-family: var(--font-head);
  font-style: italic; flex-shrink: 0;
}

/* ══════════════════════════════════════
   LAYOUT
══════════════════════════════════════ */
.sp-wrap { max-width: 1280px; margin: 0 auto; padding: 0 40px; }
.sp-section { padding: 56px 40px; }
.sp-section-sm { padding: var(--sp-8) 40px; }

/* Section label */
.sp-eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: .72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--blue2); margin-bottom: 10px;
}
.sp-eyebrow::before { content: '— '; opacity: .6; }
.sp-eyebrow::after  { content: ' —'; opacity: .6; }

/* Section headings */
.sp-h1 {
  font-family: var(--font-head);
  font-size: clamp(2.8rem, 6vw, 5rem);
  font-weight: 400; line-height: 1.1;
  color: var(--dark); letter-spacing: -.02em;
}
.sp-h2 {
  font-family: var(--font-head);
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 400; line-height: 1.15;
  color: var(--dark); letter-spacing: -.01em;
}
.sp-h3 {
  font-family: var(--font-head);
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 600; color: var(--dark);
}
.sp-lead {
  font-size: 1.05rem; color: var(--text2);
  font-weight: 400; line-height: 1.8; max-width: 560px;
}
.sp-center { text-align: center; }
.sp-center .sp-lead { margin: 0 auto; }

/* ══════════════════════════════════════
   BUTTONS
══════════════════════════════════════ */
.sp-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 32px; border-radius: var(--r-pill);
  font-family: var(--font-body); font-size: .85rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  cursor: pointer; border: none; transition: all .28s var(--ease);
  text-decoration: none; white-space: nowrap;
}
.sp-btn-primary {
  background: var(--rose);
  color: white;
  box-shadow: 0 4px 20px rgba(251,122,142,.4);
}
.sp-btn-primary:hover {
  background: var(--dark2);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(251,122,142,.5);
  color: white;
}
.sp-btn-outline {
  background: transparent; color: var(--dark);
  border: 1.5px solid var(--dark);
}
.sp-btn-outline:hover {
  background: var(--dark); color: white;
  transform: translateY(-1px);
}
.sp-btn-dark {
  background: var(--dark); color: white;
  box-shadow: 0 4px 16px rgba(42,31,38,.2);
}
.sp-btn-dark:hover { background: var(--text); transform: translateY(-1px); color: white; }
.sp-btn-sm { padding: 10px 22px; font-size: .78rem; }
.sp-btn-lg { padding: 17px 42px; font-size: .9rem; }

/* Hero outline buttons — reduced padding so all 3 fit on one row */
.sp-hero-btns .sp-btn-lg { padding: 15px 22px; font-size: .86rem; white-space: nowrap; }

/* "How it works" — blue accent */
.sp-btn-howitworks {
  border-color: #6198FE;
  color: #6198FE;
}
.sp-btn-howitworks:hover {
  background: #6198FE;
  border-color: #6198FE;
  color: white;
}

/* "Have a Self Register Tag?" — gold accent to distinguish from "How it works" */
.sp-btn-selfregister {
  border-color: #C87941;
  color: #C87941;
}
.sp-btn-selfregister:hover {
  background: #C87941;
  border-color: #C87941;
  color: white;
}

/* ══════════════════════════════════════
   HERO SECTION
══════════════════════════════════════ */
.sp-hero {
  min-height: calc(100vh - 120px);
  background: linear-gradient(135deg, var(--bg2) 0%, var(--blue-l) 40%, var(--mauve-l) 100%);
  display: grid; grid-template-columns: 1fr 1fr;
  align-items: center; gap: 0;
  overflow: hidden; position: relative;
}
.sp-hero::before {
  content: '';
  position: absolute; top: -100px; right: -100px;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(97,152,254,.25) 0%, transparent 70%);
  pointer-events: none;
}
.sp-hero::after {
  content: '';
  position: absolute; bottom: -80px; left: -80px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(169,181,255,.2) 0%, transparent 70%);
  pointer-events: none;
}
/* Mobile: clip pseudo-elements */
@media(max-width:900px){
  .sp-hero::before, .sp-hero::after { display: none; }
}
.sp-hero-text {
  padding: 80px 60px 80px 80px;
  position: relative; z-index: 1;
}
.sp-hero-pretitle {
  display: inline-block;
  font-family: var(--font-head); font-style: italic;
  font-size: 1rem; color: var(--blue);
  margin-bottom: 16px; opacity: .9;
}
.sp-hero h1 {
  font-family: var(--font-head);
  font-size: clamp(3rem, 6vw, 5.5rem);
  font-weight: 400; line-height: 1.08;
  color: var(--dark); letter-spacing: -.03em;
  margin-bottom: 24px;
}
.sp-hero h1 em { color: var(--rose); font-style: italic; }  /* keep rose for pop */
.sp-hero-desc {
  font-size: 1rem; color: var(--text2);
  line-height: 1.8; max-width: 440px;
  margin-bottom: 40px; font-weight: 400;
}
.sp-hero-btns { display: flex; gap: 14px; flex-wrap: wrap; }
.sp-hero-trust {
  display: flex; align-items: center; gap: 24px;
  margin-top: 52px; padding-top: 32px;
  border-top: 1px solid var(--bd);
}
.sp-hero-trust-item {
  display: flex; align-items: center; gap: 8px;
  font-size: .78rem; color: var(--muted); font-weight: 600;
  letter-spacing: .01em;
}
.sp-hero-trust-icon {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  background: linear-gradient(135deg, #dde6ff, #eef0ff);
  border-radius: 10px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(97,152,254,.15);
}
.sp-hero-trust-icon svg { display: block; }
.sp-hero-visual {
  position: relative; height: 100%;
  min-height: 600px;
  overflow: hidden;
  /* background color used by diagonal SVG */
  --hero-visual-bg: #EEF0FF;
}
.sp-hero-img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 8s ease;
}
.sp-hero:hover .sp-hero-img { transform: scale(1.03); }
.sp-hero-img-placeholder {
  width: 100%; height: 100%;
  background: linear-gradient(145deg, var(--blush-l), var(--mauve-l));
  display: flex; align-items: center; justify-content: center;
  font-size: 8rem;
}

/* ── Diagonal divider — clip-path on visual column ── */
.sp-hero-divider {
  display: none; /* hidden — using clip-path on visual instead */
}
.sp-hero-visual {
  clip-path: polygon(8% 0%, 100% 0%, 100% 100%, 0% 100%);
  -webkit-clip-path: polygon(8% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.sp-hero-badge {
  position: absolute; bottom: 40px; left: 40px;
  background: white; border-radius: var(--r-lg);
  padding: 16px 20px; box-shadow: var(--sh-md);
  border: 1px solid var(--bd);
  display: flex; align-items: center; gap: 12px;
  z-index: 2;
}
.sp-hero-badge-icon { font-size: 1.6rem; }
.sp-hero-badge-text strong {
  display: block; font-size: .88rem;
  font-weight: 700; color: var(--dark);
}
.sp-hero-badge-text span { font-size: .74rem; color: var(--muted); }

/* ══════════════════════════════════════
   FEATURES / SERVICES
══════════════════════════════════════ */
.sp-features-grid {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 24px;
}
.sp-feature-card {
  background: white; border-radius: var(--r-xl);
  padding: 36px 28px; text-align: center;
  border: 1px solid var(--bd); box-shadow: var(--sh-xs);
  transition: all .3s var(--ease); position: relative; overflow: hidden;
}
.sp-feature-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--rose), var(--blue), var(--dark));
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease);
}
.sp-feature-card:hover { transform: translateY(-6px); box-shadow: var(--sh-md); }
.sp-feature-card:hover::before { transform: scaleX(1); }
.sp-feature-icon {
  width: 64px; height: 64px; border-radius: 20px;
  background: linear-gradient(145deg, #eef1ff, #dde6ff);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px;
  box-shadow: 0 4px 16px rgba(3,27,137,.1);
  transition: all .3s var(--ease-spring);
}
.sp-feature-icon svg { display: block; }
.sp-feature-card:hover .sp-feature-icon { transform: scale(1.1) rotate(-4deg); box-shadow: 0 8px 24px rgba(3,27,137,.15); }
.sp-feature-card h3 {
  font-family: var(--font-head); font-size: 1.2rem;
  font-weight: 600; color: var(--dark); margin-bottom: 10px;
}
.sp-feature-card p { font-size: .84rem; color: var(--text2); line-height: 1.7; margin: 0; }

/* ══════════════════════════════════════
   ABOUT / STORY SECTION
══════════════════════════════════════ */
.sp-about {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 80px; align-items: center;
}
.sp-about-visual { position: relative; }
.sp-about-img {
  width: 100%; aspect-ratio: 4/5;
  object-fit: cover; border-radius: var(--r-xl);
  box-shadow: var(--sh-lg);
}
.sp-about-img-placeholder {
  width: 100%; aspect-ratio: 4/5;
  background: linear-gradient(145deg, var(--blush-l), var(--mauve-l));
  border-radius: var(--r-xl); box-shadow: var(--sh-lg);
  display: flex; align-items: center; justify-content: center;
  font-size: 6rem;
}
.sp-about-float {
  position: absolute; bottom: -24px; right: -24px;
  background: white; border-radius: var(--r-lg);
  padding: 20px 24px; box-shadow: var(--sh-md);
  border: 1px solid var(--bd); text-align: center;
}
.sp-about-float-num {
  font-family: var(--font-head); font-size: 2.4rem;
  font-weight: 700; color: var(--rose); line-height: 1;
}
.sp-about-float-label {
  font-size: .74rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: .08em;
}
.sp-about-text { padding: 20px 0; }
.sp-about-text .sp-h2 { margin-bottom: 20px; }
.sp-about-text .sp-lead { margin-bottom: 28px; }
.sp-about-features { margin: 28px 0; }
.sp-about-feature {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 0; border-bottom: 1px solid var(--bd);
}
.sp-about-feature:last-child { border: none; }
.sp-about-feature-icon {
  width: 48px; height: 48px; flex-shrink: 0;
  background: linear-gradient(145deg, #eef1ff, #dde6ff);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 10px rgba(3,27,137,.1);
}
.sp-about-feature-icon svg { display: block; }
.sp-about-feature-text strong {
  display: block; font-size: .9rem;
  font-weight: 700; color: var(--dark); margin-bottom: 3px;
}
.sp-about-feature-text span { font-size: .82rem; color: var(--text2); }

/* ══════════════════════════════════════
   PROMO BANNER
══════════════════════════════════════ */
.sp-promo-banner {
  background: linear-gradient(135deg, var(--rose), var(--dark));
  border-radius: var(--r-xl); padding: 64px 80px;
  display: grid; grid-template-columns: 1fr auto;
  align-items: center; gap: 40px;
  position: relative; overflow: hidden;
}
.sp-promo-banner::before {
  content: ''; position: absolute;
  top: -80px; right: -80px; width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(255,255,255,.15) 0%, transparent 70%);
  pointer-events: none;
}
.sp-promo-banner h2 {
  font-family: var(--font-head); font-size: 2.4rem;
  font-weight: 400; color: white; margin-bottom: 8px;
}
.sp-promo-banner p {
  font-size: .95rem; color: rgba(255,255,255,.85); margin: 0;
}
.sp-promo-btn {
  background: white; color: var(--rose);
  padding: 14px 32px; border-radius: var(--r-pill);
  font-family: var(--font-body); font-size: .85rem;
  font-weight: 700; letter-spacing: .04em;
  text-decoration: none; white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0,0,0,.15);
  transition: all .25s var(--ease);
}
.sp-promo-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.2); color: var(--rose); }

/* ══════════════════════════════════════
   PRODUCT GRID
══════════════════════════════════════ */
.sp-products-grid {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 28px;
}
.sp-product-card {
  background: white; border-radius: var(--r-xl);
  overflow: hidden; border: 1px solid var(--bd);
  box-shadow: var(--sh-xs); transition: all .32s var(--ease);
  position: relative; cursor: pointer;
}
.sp-product-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--sh-lg);
  border-color: var(--bd2);
}
.sp-product-img-wrap {
  position: relative; overflow: hidden;
  aspect-ratio: 3/4;
}
.sp-product-img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s var(--ease);
}
.sp-product-card:hover .sp-product-img { transform: scale(1.05); }
.sp-product-img-placeholder {
  width: 100%; height: 100%;
  background: linear-gradient(145deg, var(--blush-l), var(--mauve-l));
  display: flex; align-items: center; justify-content: center;
  font-size: 4rem;
}
.sp-product-badge {
  position: absolute; top: 14px; left: 14px;
  background: var(--dark); color: white;
  font-size: .68rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 10px; border-radius: var(--r-pill);
}
.sp-product-wishlist {
  position: absolute; top: 14px; right: 14px;
  width: 34px; height: 34px; border-radius: 50%;
  background: white; border: 1px solid var(--bd);
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem; cursor: pointer;
  opacity: 0; transform: translateY(-4px);
  transition: all .25s var(--ease);
}
.sp-product-card:hover .sp-product-wishlist { opacity: 1; transform: translateY(0); }
.sp-product-info { padding: 20px 22px 24px; }
.sp-product-cat {
  font-size: .7rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--rose); margin-bottom: 6px;
}
.sp-product-name {
  font-family: var(--font-head); font-size: 1.15rem;
  font-weight: 600; color: var(--dark); margin-bottom: 8px;
  line-height: 1.3;
}
.sp-product-price {
  font-size: 1rem; font-weight: 700; color: var(--dark);
  margin-bottom: 14px;
}
.sp-product-price del {
  color: var(--muted); font-weight: 400;
  font-size: .85rem; margin-left: 6px;
}
.sp-product-btn {
  display: block; width: 100%;
  padding: 11px; border-radius: var(--r-pill);
  background: var(--dark); color: white;
  font-family: var(--font-body); font-size: .78rem;
  font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; text-align: center;
  border: none; cursor: pointer;
  box-shadow: 0 3px 12px rgba(251,122,142,.3);
  transition: all .22s;
}
.sp-product-btn:hover {
  background: var(--dark2);
  transform: translateY(-1px);
  box-shadow: 0 5px 18px rgba(251,122,142,.45);
}

/* ══════════════════════════════════════
   TESTIMONIALS
══════════════════════════════════════ */
.sp-testimonials-bg {
  background: linear-gradient(135deg, var(--mauve-l), var(--bg2), var(--blue-l));
}
.sp-testimonials-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 24px;
}
.sp-testimonial-card {
  background: white; border-radius: var(--r-xl);
  padding: 32px 28px; box-shadow: var(--sh-xs);
  border: 1px solid var(--bd); transition: all .28s var(--ease);
}
.sp-testimonial-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.sp-testimonial-stars {
  color: var(--rose); font-size: .9rem;
  letter-spacing: 2px; margin-bottom: 16px;
}
.sp-testimonial-text {
  font-family: var(--font-head); font-style: italic;
  font-size: 1rem; color: var(--text2);
  line-height: 1.75; margin-bottom: 20px;
}
.sp-testimonial-author {
  display: flex; align-items: center; gap: 12px;
  padding-top: 16px; border-top: 1px solid var(--bd);
}
.sp-testimonial-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--rose-l); display: flex;
  align-items: center; justify-content: center;
  font-size: 1.2rem; flex-shrink: 0;
}
.sp-testimonial-name {
  font-weight: 700; font-size: .88rem; color: var(--dark);
}
.sp-testimonial-loc {
  font-size: .74rem; color: var(--muted); margin-top: 1px;
}

/* ══════════════════════════════════════
   NEWSLETTER
══════════════════════════════════════ */
.sp-newsletter {
  background: linear-gradient(135deg, var(--dark), var(--dark2));
  border-radius: var(--r-xl); padding: 72px 80px;
  text-align: center; position: relative; overflow: hidden;
}
.sp-newsletter::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 20% 50%, rgba(251,122,142,.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 50%, rgba(97,152,254,.12) 0%, transparent 50%);
  pointer-events: none;
}
.sp-newsletter > * { position: relative; z-index: 1; }
.sp-newsletter .sp-eyebrow { color: var(--mauve); opacity: .9; }
.sp-newsletter h2 {
  font-family: var(--font-head); font-size: 2.8rem;
  font-weight: 400; color: white; margin-bottom: 14px;
}
.sp-newsletter p {
  font-size: .95rem; color: rgba(255,255,255,.65);
  margin-bottom: 36px; max-width: 480px; margin-left: auto; margin-right: auto;
}
.sp-newsletter-form {
  display: flex; gap: 0; max-width: 480px; margin: 0 auto;
  background: white; border-radius: var(--r-pill);
  padding: 6px; box-shadow: var(--sh-md);
}
.sp-newsletter-input {
  flex: 1; border: none; outline: none;
  padding: 10px 20px; background: transparent;
  font-family: var(--font-body); font-size: .88rem;
  color: var(--text);
}
.sp-newsletter-input::placeholder { color: var(--muted); }
.sp-newsletter-submit {
  padding: 11px 28px; border-radius: var(--r-pill);
  background: var(--rose); color: white; border: none;  /* coral CTA */
  font-family: var(--font-body); font-size: .82rem;
  font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  cursor: pointer; transition: background .2s; flex-shrink: 0;
}
.sp-newsletter-submit:hover { background: var(--rose2); }

/* ══════════════════════════════════════
   FOOTER
══════════════════════════════════════ */
.site-footer {
  background: var(--dark);
  padding: 72px 0 0; margin-top: 0;
  position: relative; overflow: hidden;
}
.site-footer::before {
  content: ''; position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--blue), var(--rose), transparent);
}
.footer-top {
  display: flex; gap: 72px; align-items: flex-start;
  max-width: 1280px; margin: 0 auto;
  padding: 0 40px 56px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  position: relative; z-index: 1;
}
.footer-brand-col { flex: 0 0 280px; display: flex; flex-direction: column; gap: 16px; }
.footer-logo-link { display: block; text-decoration: none; margin-bottom: 4px; }
.footer-logo-img { height: 52px; width: auto; }
.footer-logo-text {
  font-family: var(--font-head); font-size: 1.6rem;
  font-weight: 700; color: var(--mauve); text-decoration: none;
}
.footer-tagline {
  font-family: var(--font-head); font-style: italic;
  font-size: .95rem; color: var(--blush); opacity: .85;
}
.footer-desc {
  font-size: .84rem; color: rgba(255,255,255,.75);
  font-weight: 400; line-height: 1.8;
}
.footer-links-wrap {
  flex: 1; display: grid;
  grid-template-columns: repeat(3,1fr); gap: 40px;
}
.footer-col h4 {
  font-family: var(--font-body);
  font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .18em;
  color: rgba(255,255,255,.3);
  margin-bottom: 20px; padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: 11px; }
.footer-col a {
  font-size: .88rem; font-weight: 400;
  color: rgba(255,255,255,.55); text-decoration: none;
  transition: color .2s; display: block;
}
.footer-col a:hover { color: var(--blush); }
.footer-bottom {
  max-width: 1280px; margin: 0 auto;
  padding: 22px 40px;
  display: flex; align-items: center; justify-content: space-between;
  font-size: .78rem; color: rgba(255,255,255,.6);
  flex-wrap: wrap; gap: 12px;
  position: relative; z-index: 1;
}
.footer-bottom-links { display: flex; gap: 20px; }
.footer-bottom-links a {
  font-size: .75rem; color: rgba(255,255,255,.25);
  text-decoration: none; transition: color .2s;
}
.footer-bottom-links a:hover { color: var(--blush); }

/* ══════════════════════════════════════
   WOOCOMMERCE PRODUCT CARDS
══════════════════════════════════════ */
/* Global WooCommerce product grid — applies everywhere */
.woocommerce ul.products,
ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
  width: auto !important;
}
@media(max-width:960px){
  .woocommerce ul.products,
  ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }
}
@media(max-width:480px){
  .woocommerce ul.products,
  ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
}

/* Card */
.woocommerce ul.products li.product {
  background: white !important;
  border-radius: 24px !important;
  border: 1.5px solid rgba(169,181,255,.2) !important;
  box-shadow: 0 4px 24px rgba(3,27,137,.07) !important;
  padding: 0 !important;
  overflow: visible !important;  /* button overflows bottom */
  transition: transform .28s var(--ease), box-shadow .28s var(--ease) !important;
  float: none !important; width: auto !important; margin: 0 !important;
  position: relative !important;
  cursor: pointer;
  padding-bottom: 56px !important;
}
.woocommerce ul.products li.product:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 16px 48px rgba(3,27,137,.13) !important;
  border-color: var(--rose) !important;
}

/* Image — full bleed, no padding, proper aspect ratio */
.woocommerce ul.products li.product a.woocommerce-loop-product__link {
  display: block; text-decoration: none;
  overflow: hidden;
  border-radius: 22px 22px 0 0;
}
.woocommerce ul.products li.product a img {
  width: 100% !important;
  height: 250px !important;
  object-fit: cover !important;
  object-position: center top !important;
  border-radius: 0 !important;
  display: block !important;
  padding: 0 !important;
  transition: transform .5s var(--ease) !important;
}
/* On mobile: aspect-ratio so image never distorts on narrow cards */
@media(max-width:600px){
  .woocommerce ul.products li.product a img,
  ul.products li.product a img {
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
  }
}
.woocommerce ul.products li.product:hover a img {
  transform: scale(1.07) !important;
}

/* Wishlist heart — handled by sp-wishlist plugin (.spw-btn) */
.woocommerce ul.products li.product::before {
  display: none !important;
  content: none !important;
}

/* SALE badge */
.woocommerce ul.products li.product .onsale {
  position: absolute !important; top: 12px; right: 12px;
  background: var(--rose) !important; color: white !important;
  font-size: .62rem !important; font-weight: 800 !important;
  letter-spacing: .08em !important; text-transform: uppercase !important;
  padding: 4px 10px !important; border-radius: var(--r-pill) !important;
  border: none !important; margin: 0 !important; z-index: 3;
}

/* Title */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-body) !important;
  font-size: .95rem !important;
  font-weight: 700 !important;
  color: var(--dark) !important;
  padding: 14px 16px 2px !important;
  margin: 0 !important;
  line-height: 1.3 !important;
}

/* Stars */
.woocommerce ul.products li.product .star-rating {
  padding: 4px 16px 0 !important; margin: 0 !important;
  float: none !important; display: block !important;
}
.woocommerce ul.products li.product .star-rating::before,
.woocommerce ul.products li.product .star-rating span::before {
  color: #F5A623 !important;
}

/* Price */
.woocommerce ul.products li.product .price {
  padding: 6px 16px 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  line-height: 1 !important;
  flex-wrap: wrap !important;
}
.woocommerce ul.products li.product .price .woocommerce-Price-amount,
.woocommerce ul.products li.product .price .woocommerce-Price-amount bdi {
  font-size: 1.25rem !important;
  font-weight: 900 !important;
  color: var(--dark) !important;
  font-family: var(--font-body) !important;
  letter-spacing: -.02em !important;
}
.woocommerce ul.products li.product .price del .woocommerce-Price-amount {
  font-size: .82rem !important; font-weight: 400 !important;
  color: var(--muted) !important; opacity: .65 !important;
}
/* Linie verticala separator intre pretul vechi si cel redus */
.woocommerce ul.products li.product .price del {
  position: relative !important;
  padding-right: 10px !important;
  margin-right: 10px !important;
}
.woocommerce ul.products li.product .price del::after {
  content: '' !important;
  position: absolute !important;
  right: 0; top: 50% !important;
  transform: translateY(-50%) !important;
  width: 1px !important; height: 70% !important;
  background: var(--muted) !important;
  opacity: .35 !important;
}
.woocommerce ul.products li.product .price ins {
  text-decoration: none !important;
}
.woocommerce ul.products li.product .price ins .woocommerce-Price-amount {
  color: var(--rose) !important;
}

/* Cart button — pill overflowing bottom-right of card */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .button.add_to_cart_button {
  position: absolute !important;
  bottom: -16px !important; right: 16px !important;
  width: auto !important; height: 38px !important;
  padding: 0 18px !important; margin: 0 !important;
  border-radius: var(--r-pill) !important;
  background: var(--rose) !important; color: white !important;
  border: 3px solid white !important;
  font-size: 0 !important; font-weight: 700 !important;
  box-shadow: 0 4px 16px rgba(251,122,142,.5) !important;
  transition: all .22s !important;
  display: flex !important; align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  text-indent: -9999px !important;
  z-index: 10 !important;
  overflow: visible !important;
}
.woocommerce ul.products li.product .button::before {
  content: '🛒 Add to cart' !important;
  font-size: .72rem !important; font-weight: 700 !important;
  letter-spacing: .03em !important;
  text-indent: 0 !important; color: white !important;
  white-space: nowrap !important;
}
.woocommerce ul.products li.product .button::after { display: none !important; }
.woocommerce ul.products li.product .button.added {
  background: var(--mauve2, #7B6FA0) !important;
}
.woocommerce ul.products li.product .button.added::before { content: '✓ Added!' !important; }
.woocommerce ul.products li.product .button:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 22px rgba(251,122,142,.65) !important;
  background: var(--rose2, #e86070) !important;
}
.woocommerce ul.products li.product a.added_to_cart { display: none !important; }
.woocommerce-message { display: none !important; }


/* Single product */
.sp-sprod { display: grid; grid-template-columns: 1.1fr 1fr; gap: 60px; align-items: start; }
.woocommerce-product-gallery__trigger { display: none !important; }
.sp-sprod .product_title {
  font-family: var(--font-head) !important; font-weight: 400 !important;
  color: var(--dark) !important; font-size: 2.4rem !important;
  line-height: 1.2 !important; margin-bottom: 12px !important;
}
.sp-sprod p.price, .sp-sprod span.price {
  color: var(--rose) !important; font-size: 1.8rem !important; font-weight: 700 !important;
}
.sp-sprod .single_add_to_cart_button {
  background: var(--rose) !important; color: white !important;
  border: none !important; border-radius: var(--r-pill) !important;
  font-family: var(--font-body) !important;
  font-size: .88rem !important; font-weight: 600 !important;
  padding: 15px 36px !important; letter-spacing: .05em !important;
  text-transform: uppercase !important;
  box-shadow: 0 4px 18px rgba(251,122,142,.4) !important;
  transition: all .25s !important;
}
.sp-sprod .single_add_to_cart_button:hover {
  background: var(--rose2) !important;
  transform: translateY(-2px) !important;
}

/* Cart & checkout */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  border: 1.5px solid var(--bd2) !important;
  border-radius: var(--r-md) !important;
  padding: 12px 16px !important;
  font-family: var(--font-body) !important;
  font-size: .9rem !important;
  background: white !important; color: var(--text) !important;
}
.woocommerce form .form-row input.input-text:focus {
  border-color: var(--rose) !important; outline: none !important;
  box-shadow: 0 0 0 3px rgba(251,122,142,.12) !important;
}
/* ── Cart totals card (classic cart) ─────────────────────── */
.cart_totals,
.sp-ct {
  background: #fff !important;
  border-radius: 20px !important;
  border: 1px solid rgba(200,121,65,.14) !important;
  box-shadow: 0 4px 24px rgba(61,46,56,.07) !important;
  overflow: hidden !important;
  padding: 0 !important;
}

/* Header strip */
.sp-ct__head {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 14px 20px !important;
  background: linear-gradient(135deg,#f9f1fc 0%,#fff7f0 100%) !important;
  border-bottom: 1px solid rgba(200,121,65,.1) !important;
}
.sp-ct__head h2 {
  margin: 0 !important;
  font-family: var(--font-heading,'Cormorant Garamond',serif) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: #3d2e38 !important;
  letter-spacing: .01em !important;
}
.sp-ct__icon {
  width: 16px !important; height: 16px !important;
  flex-shrink: 0 !important;
  color: var(--caramel,#C87941) !important;
}

/* Rows */
.sp-ct__rows {
  padding: 4px 20px 16px !important;
}
.sp-ct__row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  gap: 12px !important;
  padding: 9px 0 !important;
  border-bottom: 1px solid rgba(61,46,56,.06) !important;
}
.sp-ct__row:last-child { border-bottom: none !important; }

.sp-ct__label {
  font-size: .82rem !important;
  color: #6b4f62 !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
}
.sp-ct__val {
  font-size: .9rem !important;
  color: #3d2e38 !important;
  font-weight: 600 !important;
  text-align: right !important;
}
.sp-ct__val--muted {
  font-size: .8rem !important;
  color: #9e7a90 !important;
  font-weight: 400 !important;
}
.sp-ct__val--discount { color: #2e7d32 !important; }

/* Total row */
.sp-ct__row--total {
  padding: 12px 0 6px !important;
  border-top: 2px solid rgba(200,121,65,.15) !important;
  border-bottom: none !important;
  margin-top: 2px !important;
}
.sp-ct__row--total .sp-ct__label {
  font-size: .88rem !important;
  font-weight: 700 !important;
  color: #3d2e38 !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
}
.sp-ct__val--total {
  font-size: 1.1rem !important;
  font-weight: 800 !important;
  color: #3d2e38 !important;
}

/* Shipping method list (multiple options) */
.sp-shipping-methods {
  list-style: none !important;
  margin: 0 !important; padding: 0 !important;
}
.sp-shipping-methods li { padding: 3px 0 !important; }
.sp-shipping-methods label {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  font-size: .84rem !important;
  color: #3d2e38 !important;
  cursor: pointer !important;
}
.sp-shipping-methods input[type="radio"] {
  accent-color: var(--caramel,#C87941) !important;
}
.sp-shipping-label {
  font-size: .88rem !important;
  color: #3d2e38 !important;
  font-weight: 500 !important;
}
.sp-shipping-pkg {
  display: block !important;
  font-size: .75rem !important;
  color: #9e7a90 !important;
  margin-top: 3px !important;
}

/* Coupon row */
.sp-ct__row--coupon .sp-ct__label a { color: #9e7a90 !important; font-size: .78rem !important; }

/* Proceed to checkout — classic cart */
.sp-checkout-btn,
.wc-proceed-to-checkout a.checkout-button {
  display: block !important; width: 100% !important;
  padding: 14px 20px !important;
  background: var(--rose,#DC92B3) !important; color: #fff !important;
  border: none !important; border-radius: 9999px !important;
  font-family: var(--font-body,'DM Sans',sans-serif) !important;
  font-size: .88rem !important; font-weight: 700 !important;
  letter-spacing: .06em !important; text-transform: uppercase !important;
  text-align: center !important; text-decoration: none !important;
  box-shadow: 0 4px 18px rgba(220,146,179,.45) !important;
  transition: background .22s, transform .22s, box-shadow .22s !important;
  cursor: pointer !important;
}
.sp-checkout-btn:hover,
.wc-proceed-to-checkout a.checkout-button:hover {
  background: var(--rose2,#c87a9e) !important;
  transform: translateY(-2px) !important;
  color: #fff !important;
  box-shadow: 0 8px 28px rgba(220,146,179,.55) !important;
}
.wc-proceed-to-checkout {
  padding: 0 20px 20px !important;
}

/* ── Mobile ──────────────────────────────────────────────── */
@media (max-width: 600px) {
  .sp-ct__head { padding: 12px 16px !important; }
  .sp-ct__rows { padding: 4px 16px 14px !important; }
  .wc-proceed-to-checkout { padding: 0 16px 16px !important; }
  .sp-ct__row { padding: 8px 0 !important; }
  .sp-ct__val--total { font-size: 1rem !important; }
}

/* ══════════════════════════════════════
   GENERIC CARD
══════════════════════════════════════ */
.sp-card {
  background: white; border-radius: var(--r-xl);
  border: 1px solid var(--bd); box-shadow: var(--sh-sm); padding: 32px;
}

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media(min-width:769px){
  #mobile-right { display: none !important; }
  .mobile-drawer { display: none !important; }
  .burger-btn { display: none !important; }
}

@media(max-width:1024px){
  .sp-hero { grid-template-columns: 1fr; min-height: auto; }
  .sp-hero-visual { display: none; }
  .sp-hero-text { padding: 60px 32px; text-align: center; }
  .sp-hero-btns { justify-content: center; }
  .sp-hero-trust { justify-content: center; }
  .sp-features-grid { grid-template-columns: repeat(2,1fr); }
  .sp-products-grid { grid-template-columns: repeat(2,1fr); }
  .sp-about { grid-template-columns: 1fr; gap: 40px; }
  .sp-about-float { right: 0; bottom: -16px; }
  .footer-top { flex-direction: column; gap: 40px; }
  .footer-brand-col { flex: none; }
  .footer-links-wrap { grid-template-columns: repeat(3,1fr); }
  .sp-promo-banner { grid-template-columns: 1fr; text-align: center; }
  .sp-newsletter { padding: 56px 40px; }
  .sp-section { padding: 48px 32px; }
}

@media(max-width:900px){
  .header-inner { padding: 0 20px; height: 68px; }
  #desktop-nav { display: none !important; }
  #desktop-actions { display: none !important; }
  #mobile-right { display: flex !important; }
  .sp-hero { min-height: auto; }
  .sp-hero-text { padding: 52px 28px; }
  .sp-hero h1 { font-size: clamp(2rem, 8vw, 3.2rem); }
  .sp-hero-desc { font-size: .92rem; max-width: 100%; margin-bottom: 28px; }
  .sp-hero-btns { flex-wrap: wrap; gap: 10px; }
  .sp-hero-trust { flex-wrap: wrap; gap: 14px; }
  .mobile-drawer { display: none; }
  .mobile-drawer.open { display: block !important; }
  .sp-features-grid { grid-template-columns: 1fr; }
  .sp-products-grid { grid-template-columns: repeat(2,1fr); gap: 16px; }
  .sp-testimonials-grid { grid-template-columns: 1fr; }
  .footer-links-wrap { grid-template-columns: 1fr 1fr; gap: 28px; }
  .footer-col { text-align: center; }
  .footer-col ul { padding: 0; margin: 0; display: flex; flex-direction: column; align-items: center; }
  .footer-col li { text-align: center; }
  .footer-top { padding: 0 20px 40px; }
  .footer-bottom { padding: 18px 20px; }
  .sp-section { padding: 40px 20px; }
  .sp-newsletter { padding: 48px 24px; border-radius: var(--r-xl); }
  .sp-newsletter-form { flex-direction: column; border-radius: var(--r-lg); padding: 12px; gap: 8px; }
  .sp-newsletter-submit { border-radius: var(--r-md); }
  .sp-promo-banner { padding: 44px 28px; border-radius: var(--r-xl); }
}

@media(max-width:480px){
  .header-inner { padding: 0 14px; height: 62px; }
  .site-logo-link img, .site-logo-text { max-height: 44px; }
  .sp-hero { min-height: auto; }
  .sp-hero-text { padding: 44px 20px 52px; text-align: center; }
  .sp-hero h1 { font-size: 2.2rem; line-height: 1.12; margin-bottom: 16px; }
  .sp-hero-desc { font-size: .92rem; margin-bottom: 28px; }
  .sp-hero-btns { flex-direction: column; align-items: center; gap: 10px; }
  .sp-hero-btns a, .sp-hero-btns button { width: 100%; max-width: 280px; justify-content: center; }
  .sp-hero-trust { flex-wrap: wrap; gap: 12px; justify-content: center; }
  .sp-products-grid { grid-template-columns: 1fr; }
  /* Footer — 3 coloane centrate pe mobil */
  .footer-links-wrap { grid-template-columns: repeat(3,1fr) !important; gap: 10px !important; }
  .footer-col { text-align: center !important; }
  .footer-col ul { padding: 0 !important; margin: 0 !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; }
  .footer-col li { text-align: center !important; margin-bottom: 6px !important; width: 100%; }
  .footer-col a { text-align: center !important; font-size: .72rem !important; display: block !important; }
  .footer-col h4 { font-size: .55rem !important; letter-spacing: .06em !important; margin-bottom: 8px !important; text-align: center !important; }
  .footer-top { padding: 0 12px 28px !important; gap: 20px !important; }
  .footer-brand-col { text-align: center !important; align-items: center !important; }
  .footer-bottom { padding: 12px !important; flex-direction: column !important; align-items: center !important; gap: 8px !important; text-align: center !important; }
  .sp-section { padding: 32px 16px; }
}


/* ══════════════════════════════════════
   SINGLE PRODUCT — layout as in screenshot
   [thumbs col] [main image] [info col]
══════════════════════════════════════ */
.sp-single-product {
  display: grid;
  grid-template-columns: 120px 1fr 1fr;
  gap: 32px;
  align-items: start;
  max-width: 1100px;
  margin: 0 auto;
}

/* Thumbnails column */
.sp-sprod-thumbs {
  display: flex; flex-direction: column; gap: 12px;
}
.sp-thumb {
  width: 110px; height: 110px;
  border-radius: var(--r-md);
  background-size: cover; background-position: center;
  border: 2px solid var(--bd);
  cursor: pointer; transition: all .2s;
  flex-shrink: 0;
}
.sp-thumb:hover { border-color: var(--rose); transform: scale(1.03); }
.sp-thumb.active { border-color: var(--rose); box-shadow: 0 0 0 3px rgba(251,122,142,.2); }

/* Main image */
.sp-sprod-main-img {
  border-radius: var(--r-xl);
  background: var(--bg2);
  overflow: hidden;
  aspect-ratio: 1;
  border: 1px solid var(--bd);
}
.sp-sprod-main-img img {
  width: 100%; height: 100%;
  object-fit: contain;
  transition: transform .4s var(--ease);
  padding: 20px;
}
.sp-sprod-main-img:hover img { transform: scale(1.04); }

/* Info column */
.sp-sprod-info { padding: 8px 0; }

.sp-sprod-title {
  font-family: var(--font-body) !important;
  font-size: 1.65rem !important; font-weight: 800 !important;
  color: var(--dark) !important; margin-bottom: 10px !important;
  line-height: 1.25 !important;
}
.sp-sprod-rating { margin-bottom: 10px; }
.sp-sprod-rating .star-rating { font-size: 1rem !important; }

.sp-sprod-sku {
  font-size: .82rem; color: var(--muted);
  margin-bottom: 12px; font-weight: 500;
}
.sp-sprod-sku span { font-weight: 700; color: var(--text2); }

.sp-sprod-price {
  margin-bottom: 16px;
}
.sp-sprod-price .price,
.sp-sprod-price p.price {
  font-size: 1.6rem !important; font-weight: 800 !important;
  color: var(--dark) !important;
}
.sp-sprod-price del { color: var(--muted) !important; font-size: 1rem !important; }

/* Promo pill */
.sp-sprod-promo {
  display: flex; align-items: center; gap: 12px;
  background: var(--rose-l); border-radius: var(--r-lg);
  padding: 12px 16px; margin-bottom: 18px;
  font-size: .84rem; color: var(--text2); font-weight: 500;
  border: 1px solid rgba(251,122,142,.2);
}
.sp-promo-icon {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--rose); color: white;
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem; font-weight: 900; flex-shrink: 0;
}

.sp-sprod-desc {
  font-size: .9rem; color: var(--text2);
  line-height: 1.75; margin-bottom: 20px;
  padding-bottom: 20px; border-bottom: 1px solid var(--bd);
}

/* Cart wrap — quantity + add to cart + wishlist heart */
.sp-sprod-cart-wrap {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 20px;
}
.sp-sprod-cart-wrap .quantity {
  flex-shrink: 0;
}
.sp-sprod-cart-wrap .quantity input {
  width: 80px !important; height: 50px !important;
  border: 2px solid var(--bd2) !important;
  border-radius: var(--r-pill) !important;
  text-align: center !important;
  font-family: var(--font-body) !important;
  font-size: 1rem !important; font-weight: 700 !important;
  background: var(--bg2) !important; color: var(--dark) !important;
}
.sp-sprod-cart-wrap .single_add_to_cart_button,
.sp-sprod-cart-wrap button.button {
  flex: 1 !important;
  height: 50px !important;
  padding: 0 24px !important;
  background: var(--dark) !important; color: white !important;
  border: none !important; border-radius: var(--r-pill) !important;
  font-family: var(--font-body) !important;
  font-size: .9rem !important; font-weight: 700 !important;
  letter-spacing: .04em !important; text-transform: uppercase !important;
  box-shadow: 0 4px 16px rgba(3,27,137,.3) !important;
  transition: all .25s !important; cursor: pointer !important;
  display: flex !important; align-items: center !important;
  justify-content: center !important; gap: 8px !important;
}
.sp-sprod-cart-wrap .single_add_to_cart_button:hover,
.sp-sprod-cart-wrap button.button:hover {
  background: var(--dark2) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(3,27,137,.4) !important;
}

/* Wishlist heart button */
.sp-sprod-wishlist {
  width: 50px; height: 50px; flex-shrink: 0;
  border-radius: 50%;
  background: white; border: 2px solid var(--bd2);
  color: var(--muted); font-size: 1.2rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .25s;
  box-shadow: var(--sh-xs);
}
.sp-sprod-wishlist:hover {
  border-color: var(--rose); color: var(--rose);
  box-shadow: 0 4px 14px rgba(251,122,142,.3);
  transform: scale(1.08);
}
.sp-sprod-wishlist.active {
  background: var(--rose-l); border-color: var(--rose);
  color: var(--rose);
}

/* Trust badges */
.sp-sprod-badges {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px;
}
.sp-sprod-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .72rem; font-weight: 600;
  padding: 5px 12px; border-radius: var(--r-pill);
  background: var(--blue-l); color: var(--dark);
  border: 1px solid var(--bd2);
}

/* WC meta styling */
.sp-sprod-info .product_meta {
  font-size: .82rem; color: var(--muted);
  padding-top: 12px; border-top: 1px solid var(--bd);
}

/* Responsive single product */
@media(max-width:900px){
  .sp-single-product { grid-template-columns: 80px 1fr; gap: 20px; }
  .sp-sprod-info { grid-column: 1 / -1; }
  .sp-thumb { width: 76px; height: 76px; }
}
@media(max-width:600px){
  .sp-single-product { grid-template-columns: 1fr; }
  .sp-sprod-thumbs { flex-direction: row; overflow-x: auto; }
  .sp-thumb { width: 70px; height: 70px; flex-shrink: 0; }
  .sp-sprod-main-img { aspect-ratio: 4/3; }
}







/* ══════════════════════════════════════
   SP_CATEGORIES SHORTCODE
   Dashed border cards, icon top-center
   "See Details" outline button
══════════════════════════════════════ */
.sp-cats-section { padding: var(--sp-9) 40px; }
.sp-cats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 28px;
  max-width: 1280px; margin: 0 auto;
}
.sp-cat-card {
  background: var(--white);
  border: 2px dashed rgba(169,181,255,.55);
  /* Sponge/squircle — organic rounded shape like reference */
  border-radius: 56% 44% 48% 52% / 52% 48% 52% 48%;
  padding: 44px 28px 36px;
  text-align: center;
  transition: border-radius .4s var(--ease), transform .32s var(--ease), box-shadow .32s var(--ease), border-color .2s;
  position: relative;
  cursor: pointer;
  aspect-ratio: .82;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.sp-cat-card:nth-child(2) { border-radius: 44% 56% 52% 48% / 48% 52% 48% 52%; }
.sp-cat-card:nth-child(3) { border-radius: 50% 50% 44% 56% / 56% 44% 56% 44%; }
.sp-cat-card:nth-child(4) { border-radius: 48% 52% 56% 44% / 44% 56% 44% 56%; }
.sp-cat-card:hover {
  border-color: var(--lavender);
  border-style: solid;
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 16px 48px rgba(3,27,137,.12);
  border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
}
.sp-cat-icon {
  width: 72px; height: 72px;
  background: linear-gradient(145deg, #eef1ff, #dde6ff);
  border-radius: 22px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px;
  box-shadow: 0 4px 18px rgba(3,27,137,.12);
  transition: all .32s var(--ease);
}
.sp-cat-icon svg { display: block; }
.sp-cat-card:hover .sp-cat-icon {
  background: linear-gradient(145deg, #ffeef2, #ffe0e8);
  transform: scale(1.08) rotate(-4deg);
  box-shadow: 0 8px 28px rgba(251,122,142,.2);
}
.sp-cat-card h3 {
  font-family: var(--font-body);
  font-size: 1rem; font-weight: 800;
  color: var(--dark); margin-bottom: 10px;
}
.sp-cat-card p {
  font-size: .84rem; color: var(--muted);
  line-height: 1.7; margin-bottom: 22px;
}
.sp-cat-link {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 22px;
  border: 1.5px solid var(--dark);
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: .78rem; font-weight: 700;
  color: var(--dark); text-decoration: none;
  transition: all .22s;
}
.sp-cat-link:hover {
  background: var(--dark); color: white;
}

/* ══════════════════════════════════════
   SP_TESTIMONIALS_V2 SHORTCODE
   Circle avatars with dashed border
   Paw print decorations above each
══════════════════════════════════════ */
.sp-testi-v2 { padding: var(--sp-9) 40px; }
.sp-testi-v2-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 40px;
  max-width: 1280px; margin: 32px auto 0;
}
.sp-testi-v2-card {
  text-align: center;
  position: relative;
  padding-top: 24px;
}
/* Paw dots above avatar */
.sp-testi-paw {
  display: flex; justify-content: center; gap: 5px;
  margin-bottom: 12px;
}
.sp-testi-paw span {
  width: 12px; height: 16px;
  background: var(--mauve);
  border-radius: 50%;
  opacity: .55;
}
.sp-testi-paw span:first-child { transform: rotate(-20deg) translateY(3px); }
.sp-testi-paw span:last-child  { transform: rotate(20deg)  translateY(3px); }
/* Circle avatar with dashed border */
.sp-testi-avatar {
  width: 160px; height: 160px;
  border-radius: 50%;
  border: 2px dashed rgba(169,181,255,.6);
  margin: 0 auto 18px;
  overflow: hidden;
  background: var(--mauve-l);
  display: flex; align-items: center; justify-content: center;
  font-size: 3rem;
  transition: border-color .25s;
}
.sp-testi-v2-card:hover .sp-testi-avatar { border-color: var(--rose); }
.sp-testi-avatar img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.sp-testi-name {
  font-family: var(--font-body);
  font-size: .92rem; font-weight: 800;
  color: var(--dark); margin-bottom: 3px;
}
.sp-testi-role {
  font-size: .75rem; color: var(--muted);
  font-weight: 500; margin-bottom: 14px;
}
.sp-testi-text {
  font-family: var(--font-head);
  font-style: italic;
  font-size: .95rem; color: var(--text2);
  line-height: 1.75;
}
.sp-testi-stars {
  color: #F5A623; font-size: .85rem;
  letter-spacing: 2px; margin-bottom: 10px;
}

/* ══════════════════════════════════════
   SVG DECORATIONS — bones, paws, pets
   Ultra low opacity, scattered
══════════════════════════════════════ */
.sp-deco {
  position: absolute;
  pointer-events: none;
  opacity: .055;
  z-index: 0;
}
.sp-section-decorated { position: relative; overflow: hidden; }

/* Responsive */
@media(max-width:768px) {
  .sp-cats-section { padding: 48px 20px; }
  .sp-cats-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .sp-testi-v2 { padding: 48px 20px; }
  .sp-testi-v2-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
}
@media(max-width:480px) {
  .sp-cats-grid { grid-template-columns: 1fr; }
  .sp-testi-v2-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════
   PETPAL PREMIUM DESIGN SYSTEM
   Warm, soft, elegant pet-care aesthetic
   ═══════════════════════════════════════════════════════ */

/* ── Extended Design Tokens ── */
:root {
  /* Warm palette override */
  --cream:     #FDF8F2;
  --warm:      #F5ECD8;
  --sand:      #E8D5B7;
  --caramel:   #C8956C;
  --caramel2:  #A87050;
  --soft-or:   #F5A55A;
  --blush-w:   #FAE8E0;
  --sage:      #8BAF88;
  --sage-l:    #EAF3E8;

  /* Premium shadows */
  --sh-card:   0 4px 24px rgba(200,149,108,.12), 0 1px 4px rgba(200,149,108,.08);
  --sh-hover:  0 12px 48px rgba(200,149,108,.22), 0 4px 12px rgba(200,149,108,.12);
  --sh-float:  0 20px 60px rgba(200,149,108,.18);

  /* Dashed border */
  --dash-bd:   2px dashed rgba(200,149,108,.3);

  /* Radius */
  --r-card:    28px;
  --r-icon:    20px;

  /* Spacing */
  --sec-pad:   96px 0;
  --sec-pad-sm:64px 0;
}

/* ═══════════════════════════
   CATEGORIES SECTION
   Dashed border cards, icon top, See Details button
   ═══════════════════════════ */
.sp-categories {
  padding: var(--sec-pad);
  background: var(--cream);
}
.sp-categories-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
}
.sp-cat-card {
  background: white;
  border-radius: var(--r-card);
  border: var(--dash-bd);
  padding: 44px 28px 36px;
  text-align: center;
  transition: all .35s cubic-bezier(.25,.46,.45,.94);
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.sp-cat-card::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(145deg, rgba(245,165,90,.06), transparent 60%);
  opacity: 0;
  transition: opacity .35s;
}
.sp-cat-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--sh-hover);
  border-color: rgba(200,149,108,.5);
}
.sp-cat-card:hover::before { opacity: 1; }

.sp-cat-icon-wrap {
  width: 88px; height: 88px;
  margin: 0 auto 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(245,165,90,.12), rgba(250,232,224,.4));
  display: flex; align-items: center; justify-content: center;
  transition: all .35s cubic-bezier(.34,1.56,.64,1);
  position: relative;
}
.sp-cat-icon-wrap::after {
  content: '';
  position: absolute; inset: -4px;
  border-radius: 50%;
  border: 1.5px dashed rgba(200,149,108,.25);
  transition: all .35s;
}
.sp-cat-card:hover .sp-cat-icon-wrap {
  transform: scale(1.1) rotate(-5deg);
  background: linear-gradient(135deg, rgba(245,165,90,.2), rgba(250,232,224,.6));
}
.sp-cat-card:hover .sp-cat-icon-wrap::after {
  border-color: rgba(200,149,108,.5);
  transform: rotate(45deg);
}
.sp-cat-icon { font-size: 1rem; }
.sp-cat-title {
  font-family: var(--font-body);
  font-size: 1.05rem; font-weight: 800;
  color: var(--dark); margin-bottom: 12px;
  letter-spacing: -.01em;
}
.sp-cat-desc {
  font-size: .84rem; color: var(--muted);
  line-height: 1.7; margin-bottom: 24px;
  font-weight: 400;
}
.sp-cat-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 22px;
  border: 1.5px solid rgba(200,149,108,.4);
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: .8rem; font-weight: 700;
  color: var(--caramel); text-decoration: none;
  transition: all .25s;
  letter-spacing: .02em;
}
.sp-cat-btn:hover {
  background: var(--caramel);
  color: white;
  border-color: var(--caramel);
  transform: translateX(3px);
}
.sp-cat-btn::after { content: '→'; }

/* ═══════════════════════════
   TESTIMONIALS — Circular photos + dashed border
   ═══════════════════════════ */
.sp-testimonials-v2 {
  padding: var(--sec-pad);
  background: white;
  position: relative;
  overflow: hidden;
}
.sp-testimonials-v2-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
  align-items: start;
}
.sp-testi-v2-card {
  text-align: center;
  position: relative;
  padding-top: 16px;
}
/* Dashed circle container */
.sp-testi-v2-img-wrap {
  position: relative;
  width: 200px; height: 200px;
  margin: 0 auto 28px;
}
.sp-testi-v2-img-wrap::before {
  content: '';
  position: absolute; inset: -6px;
  border-radius: 50%;
  border: 2px dashed rgba(200,149,108,.35);
  animation: rotateDash 20s linear infinite;
}
@keyframes rotateDash {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.sp-testi-v2-card:hover .sp-testi-v2-img-wrap::before {
  border-color: rgba(200,149,108,.7);
  animation-duration: 8s;
}
.sp-testi-v2-img {
  width: 200px; height: 200px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid white;
  box-shadow: var(--sh-card);
  transition: transform .4s cubic-bezier(.25,.46,.45,.94);
}
.sp-testi-v2-card:hover .sp-testi-v2-img {
  transform: scale(1.05);
}
/* Paw print dots above each image (like reference) */
.sp-testi-v2-img-wrap::after {
  content: '';
  position: absolute;
  top: -28px; left: 50%;
  transform: translateX(-20px);
  width: 42px; height: 18px;
  background: radial-gradient(circle at 25% 50%, rgba(200,149,108,.35) 6px, transparent 6px),
              radial-gradient(circle at 75% 50%, rgba(200,149,108,.25) 5px, transparent 5px);
  background-size: 100% 100%;
  pointer-events: none;
}
.sp-testi-v2-name {
  font-family: var(--font-body);
  font-size: 1rem; font-weight: 800;
  color: var(--dark); margin-bottom: 4px;
}
.sp-testi-v2-role {
  font-size: .76rem; color: var(--caramel);
  font-weight: 600; text-transform: uppercase;
  letter-spacing: .1em; margin-bottom: 14px;
}
.sp-testi-v2-stars {
  color: #F5A55A; font-size: .85rem;
  letter-spacing: 2px; margin-bottom: 12px;
}
.sp-testi-v2-text {
  font-size: .85rem; color: var(--muted);
  line-height: 1.75; font-style: italic;
  font-family: var(--font-head);
}
.sp-testi-v2-text::before { content: '"'; }
.sp-testi-v2-text::after  { content: '"'; }

/* ═══════════════════════════
   BACKGROUND DECORATIONS
   Sparse, low opacity, elegant
   ═══════════════════════════ */
.sp-deco-layer {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
/* Paw print */
.sp-deco-paw {
  font-size: 80px;
  opacity: .04;
  color: var(--caramel);
  transform: rotate(-25deg);
}
/* Bone SVG inline */
.sp-deco-bone {
  opacity: .035;
  fill: var(--caramel);
}

/* Global sparse decorations via ::before/::after on sections */
.sp-section-deco { position: relative; overflow: hidden; }
.sp-section-deco::before {
  content: '🐾';
  position: absolute;
  font-size: 180px;
  opacity: .03;
  top: -20px; right: -40px;
  pointer-events: none;
  transform: rotate(20deg);
}
.sp-section-deco-bone::after {
  content: '';
  position: absolute;
  width: 120px; height: 50px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 50'%3E%3Cellipse cx='15' cy='25' rx='14' ry='12' fill='%23C8956C' opacity='.08'/%3E%3Cellipse cx='105' cy='25' rx='14' ry='12' fill='%23C8956C' opacity='.08'/%3E%3Crect x='15' y='18' width='90' height='14' rx='7' fill='%23C8956C' opacity='.08'/%3E%3C/svg%3E") no-repeat center/contain;
  bottom: 20px; left: 30px;
  pointer-events: none;
  opacity: .6;
}

/* ═══════════════════════════
   SHORTCODE: [sp_categories_v2]
   ═══════════════════════════ */
/* handled via PHP shortcode in functions.php */

/* ═══════════════════════════
   UPDATED FEATURE CARDS — dashed border style
   ═══════════════════════════ */
.sp-feature-card {
  border: var(--dash-bd) !important;
  background: white !important;
}
.sp-feature-card:hover {
  border-color: rgba(200,149,108,.55) !important;
}

/* ═══════════════════════════
   RESPONSIVE
   ═══════════════════════════ */
@media(max-width:1024px){
  .sp-categories-grid     { grid-template-columns: repeat(2,1fr); gap:20px }
  .sp-testimonials-v2-grid{ grid-template-columns: repeat(2,1fr); gap:24px }
}
@media(max-width:768px){
  .sp-categories-grid     { grid-template-columns: 1fr; max-width:380px; margin:0 auto; padding:0 20px }
  .sp-testimonials-v2-grid{ grid-template-columns: 1fr; max-width:300px; margin:0 auto; padding:0 20px }
  .sp-cat-card            { padding:36px 24px 28px }
  .sp-testi-v2-img-wrap   { width:160px; height:160px }
  .sp-testi-v2-img        { width:160px; height:160px }
}

/* ══════════════════════════════════════
   PREMIUM PET CARE — New Component CSS
   Dashed-border cards, circle testimonials,
   decorative SVG backgrounds
══════════════════════════════════════ */

/* ── Design tokens ── */
:root {
  --cream:    #FFF9F0;
  --warm:     #F5ECD8;
  --brown:    #5C3D1E;
  --caramel:  #C87941;
  --soft-purple: #9B7EC8;
  --soft-purple-l: #F0EBF8;
  --dashed-color: rgba(155,126,200,.35);
}

/* ══ CATEGORIES CARDS — dashed border, rounded blob ══ */
.sp-cats-section {
  padding: var(--sp-9) 40px;
  position: relative;
  overflow: hidden;
}
.sp-cats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  max-width: 1200px;
  margin: 0 auto;
}
.sp-cat-card {
  background: white;
  border: 2px dashed var(--dashed-color);
  border-radius: 40px;
  padding: 44px 28px 36px;
  text-align: center;
  transition: all .32s var(--ease);
  position: relative;
  cursor: pointer;
}
.sp-cat-card:hover {
  transform: translateY(-8px);
  border-color: var(--soft-purple);
  box-shadow: 0 16px 48px rgba(155,126,200,.18);
  background: var(--soft-purple-l);
}
.sp-cat-icon-wrap {
  width: 88px; height: 88px;
  border-radius: 50%;
  background: var(--soft-purple-l);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 22px;
  font-size: 2.4rem;
  transition: all .3s var(--ease-spring);
  border: 2px dashed var(--dashed-color);
}
.sp-cat-card:hover .sp-cat-icon-wrap {
  transform: scale(1.1) rotate(-5deg);
  background: white;
  border-color: var(--soft-purple);
}
.sp-cat-title {
  font-family: var(--font-body);
  font-size: 1.05rem; font-weight: 800;
  color: var(--dark); margin-bottom: 10px;
}
.sp-cat-desc {
  font-size: .84rem; color: var(--muted);
  line-height: 1.65; margin-bottom: 22px;
}
.sp-cat-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .8rem; font-weight: 700;
  color: var(--dark);
  border: 1.5px solid rgba(3,27,137,.2);
  padding: 8px 20px; border-radius: var(--r-pill);
  text-decoration: none;
  transition: all .22s;
}
.sp-cat-link:hover {
  background: var(--dark); color: white;
  border-color: var(--dark);
  transform: translateX(3px);
}

/* ══ TESTIMONIALS — circle photos + dashed ══ */
.sp-testi-v2-section {
  padding: var(--sp-9) 40px;
  position: relative;
}
.sp-testi-v2-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  max-width: 1200px;
  margin: 0 auto;
}
.sp-testi-v2-card {
  text-align: center;
  position: relative;
}
/* Paw dots above circle */
.sp-testi-v2-paws {
  display: flex;
  justify-content: center;
  gap: 5px;
  margin-bottom: 12px;
}
.sp-testi-v2-paw-dot {
  width: 12px; height: 16px;
  border-radius: 50%;
  background: var(--mauve);
  opacity: .5;
}
.sp-testi-v2-paw-dot:nth-child(2) {
  width: 10px; height: 14px;
  margin-top: 4px; opacity: .35;
}
.sp-testi-v2-paw-dot:nth-child(3) {
  width: 12px; height: 16px;
  opacity: .5;
}
/* Circle photo with dashed border */
.sp-testi-v2-img-wrap {
  width: 180px; height: 180px;
  border-radius: 50%;
  border: 2px dashed var(--dashed-color);
  padding: 6px;
  margin: 0 auto 18px;
  transition: all .3s var(--ease);
}
.sp-testi-v2-card:hover .sp-testi-v2-img-wrap {
  border-color: var(--soft-purple);
  transform: scale(1.04);
}
.sp-testi-v2-img {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.sp-testi-v2-img-placeholder {
  width: 100%; height: 100%;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--mauve-l), var(--blue-l));
  display: flex; align-items: center; justify-content: center;
  font-size: 3.5rem;
}
.sp-testi-v2-name {
  font-family: var(--font-body);
  font-size: .92rem; font-weight: 800;
  color: var(--dark); margin-bottom: 4px;
}
.sp-testi-v2-role {
  font-size: .74rem; color: var(--muted);
  font-weight: 500; margin-bottom: 12px;
}
.sp-testi-v2-text {
  font-size: .83rem; color: var(--text2);
  line-height: 1.7; font-style: italic;
}

/* ══ DECORATIVE SVG BACKGROUNDS ══ */
.sp-deco-bg {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  opacity: .045;
}
.sp-deco-bg.deco-tl { top: 40px;  left: 20px;  width: 80px; }
.sp-deco-bg.deco-tr { top: 20px;  right: 30px; width: 60px; transform: rotate(20deg); }
.sp-deco-bg.deco-bl { bottom: 30px; left: 40px; width: 70px; transform: rotate(-15deg); }
.sp-deco-bg.deco-br { bottom: 20px; right: 20px; width: 90px; }

/* Ensure content is above decorations */
.sp-cats-section > *:not(.sp-deco-bg),
.sp-testi-v2-section > *:not(.sp-deco-bg) {
  position: relative; z-index: 1;
}

/* ══ Section header center ══ */
.sp-sec-head {
  text-align: center;
  margin-bottom: 52px;
}
.sp-sec-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .16em;
  color: var(--soft-purple);
  background: var(--soft-purple-l);
  padding: 5px 16px; border-radius: var(--r-pill);
  margin-bottom: 14px;
}
.sp-sec-title {
  font-family: var(--font-head);
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 400; color: var(--dark);
  line-height: 1.2; letter-spacing: -.01em;
  margin-bottom: 14px;
}
.sp-sec-sub {
  font-size: .95rem; color: var(--muted);
  max-width: 520px; margin: 0 auto;
  line-height: 1.75;
}

/* Responsive */
@media(max-width:1024px){
  .sp-cats-grid, .sp-testi-v2-grid { grid-template-columns: repeat(2,1fr); }
}
@media(max-width:600px){
  .sp-cats-grid { grid-template-columns: 1fr; max-width:360px; margin:0 auto; }
  .sp-testi-v2-grid { grid-template-columns: repeat(2,1fr); gap:20px; }
  .sp-testi-v2-img-wrap { width:130px; height:130px; }
  .sp-cats-section, .sp-testi-v2-section { padding: 56px 16px; }
}

/* ═══════════════════════════════════════════════════
   PETPAL PREMIUM REDESIGN
   Design System: Warm Cream + Evening Sky accents
   Cards with dashed borders, soft shadows, decorative SVGs
═══════════════════════════════════════════════════ */

/* ── Extra tokens ── */
:root {
  --cream:    #FAF7F2; --cream2:  #F3EFE8;
  --warm:     #E8E0D8; --warm2:   #D4C9BC;
  --lavender: #A9B5FF; --lav-l:   #EEF0FF;
  --mauve-d:  #7B6F9E;
  --dashed:   rgba(169,181,255,.45);
  --card-bg:  #FFFFFF;
  --r-card:   28px;
  --sh-card:  0 4px 24px rgba(3,27,137,.07);
  --sh-hover: 0 12px 40px rgba(3,27,137,.13);
}

/* ════════════════════════════════
   SVG DECORATIONS (inline, CSS)
════════════════════════════════ */
.sp-deco-wrap { position: relative; }

/* Paw print — reusable pseudo element helper */
.sp-deco-paw::before,
.sp-deco-paw::after {
  content: '';
  position: absolute;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cellipse cx='30' cy='38' rx='14' ry='11' fill='%23A9B5FF' opacity='.18'/%3E%3Cellipse cx='13' cy='22' rx='7' ry='8' fill='%23A9B5FF' opacity='.18'/%3E%3Cellipse cx='30' cy='16' rx='7' ry='8' fill='%23A9B5FF' opacity='.18'/%3E%3Cellipse cx='47' cy='22' rx='7' ry='8' fill='%23A9B5FF' opacity='.18'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 0;
}

/* ════════════════════════════════
   CATEGORIES SECTION
   Dashed border cards like reference
════════════════════════════════ */
.sp-cats-section {
  padding: var(--sp-10) 40px;
  background: var(--bg2);
  position: relative;
  overflow: hidden;
}
/* Decorative paw top-right */
.sp-cats-section::before {
  content: '';
  position: absolute; top: -40px; right: -40px;
  width: 200px; height: 200px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cellipse cx='50' cy='62' rx='22' ry='18' fill='%23A9B5FF' opacity='.1'/%3E%3Cellipse cx='22' cy='38' rx='11' ry='13' fill='%23A9B5FF' opacity='.1'/%3E%3Cellipse cx='50' cy='28' rx='11' ry='13' fill='%23A9B5FF' opacity='.1'/%3E%3Cellipse cx='78' cy='38' rx='11' ry='13' fill='%23A9B5FF' opacity='.1'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
}
/* Bone bottom-left */
.sp-cats-section::after {
  content: '';
  position: absolute; bottom: 20px; left: 20px;
  width: 120px; height: 60px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60'%3E%3Crect x='30' y='22' width='60' height='16' rx='8' fill='%23FAA7B7' opacity='.15'/%3E%3Ccircle cx='22' cy='18' r='14' fill='%23FAA7B7' opacity='.12'/%3E%3Ccircle cx='22' cy='42' r='14' fill='%23FAA7B7' opacity='.12'/%3E%3Ccircle cx='98' cy='18' r='14' fill='%23FAA7B7' opacity='.12'/%3E%3Ccircle cx='98' cy='42' r='14' fill='%23FAA7B7' opacity='.12'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
}

.sp-cats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  max-width: 1200px;
  margin: 0 auto;
  position: relative; z-index: 1;
}

.sp-cat-card {
  background: var(--card-bg);
  /* Squircle / sponge shape — asymmetric big rounded corners */
  border-radius: 42% 58% 55% 45% / 48% 44% 56% 52%;
  border: 2px dashed var(--dashed);
  padding: 44px 32px 36px;
  text-align: center;
  transition: all .35s var(--ease);
  position: relative;
  cursor: pointer;
  box-shadow: var(--sh-card);
}
.sp-cat-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: var(--sh-hover);
  border-color: var(--lavender);
  border-style: dashed;
  /* Slightly different organic shape on hover */
  border-radius: 55% 45% 42% 58% / 52% 56% 44% 48%;
}
.sp-cat-icon-wrap {
  width: 80px; height: 80px;
  background: var(--lav-l);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px;
  font-size: 2rem;
  transition: all .3s var(--ease-spring);
}
.sp-cat-card:hover .sp-cat-icon-wrap {
  transform: scale(1.12) rotate(-5deg);
  background: var(--mauve-l);
}
.sp-cat-card h3 {
  font-family: var(--font-body);
  font-size: 1rem; font-weight: 800;
  color: var(--dark); margin-bottom: 10px;
}
.sp-cat-card p {
  font-size: .84rem; color: var(--muted);
  line-height: 1.65; margin-bottom: 20px;
}
.sp-cat-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 22px;
  border: 1.5px solid var(--dark);
  border-radius: var(--r-pill);
  font-size: .78rem; font-weight: 700;
  color: var(--dark); text-decoration: none;
  transition: all .22s;
  background: transparent;
  cursor: pointer;
}
.sp-cat-btn:hover {
  background: var(--dark); color: white;
}
.sp-cat-btn-arrow { font-size: .9rem; transition: transform .2s; }
.sp-cat-btn:hover .sp-cat-btn-arrow { transform: translateX(4px); }

/* ════════════════════════════════
   TESTIMONIALS — Circle photos + paw dots
════════════════════════════════ */
.sp-testi-section {
  padding: var(--sp-10) 40px;
  background: white;
  position: relative; overflow: hidden;
}
/* Paw dot decorations above each photo */
.sp-testi-paw-dot {
  width: 14px; height: 18px;
  background: var(--lavender);
  border-radius: 50%;
  opacity: .35;
  display: inline-block;
}

.sp-testi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  max-width: 1200px; margin: 0 auto;
  position: relative; z-index: 1;
}

.sp-testi-card {
  text-align: center;
  position: relative;
}
/* Paw dots above photo */
.sp-testi-paws {
  display: flex; justify-content: center; gap: 5px;
  margin-bottom: 10px; height: 20px;
  align-items: flex-end;
}
.sp-testi-paws span {
  background: var(--lavender);
  border-radius: 50%;
  opacity: .4;
}
.sp-testi-paws span:nth-child(1) { width:10px; height:13px; }
.sp-testi-paws span:nth-child(2) { width:12px; height:16px; }
.sp-testi-paws span:nth-child(3) { width:10px; height:13px; }

.sp-testi-photo-wrap {
  width: 160px; height: 160px;
  border-radius: 50%;
  border: 2.5px dashed var(--dashed);
  margin: 0 auto 18px;
  overflow: hidden;
  transition: all .3s var(--ease);
  position: relative;
}
.sp-testi-card:hover .sp-testi-photo-wrap {
  border-color: var(--lavender);
  border-style: solid;
  transform: scale(1.04);
}
.sp-testi-photo-wrap img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.sp-testi-photo-placeholder {
  width: 100%; height: 100%;
  background: linear-gradient(145deg, var(--lav-l), var(--mauve-l));
  display: flex; align-items: center; justify-content: center;
  font-size: 3rem;
}
.sp-testi-name {
  font-family: var(--font-body);
  font-size: .95rem; font-weight: 800;
  color: var(--dark); margin-bottom: 3px;
}
.sp-testi-role {
  font-size: .74rem; color: var(--muted);
  font-weight: 500; margin-bottom: 12px;
}
.sp-testi-stars {
  color: #F5A623; font-size: .88rem;
  letter-spacing: 2px; margin-bottom: 12px;
}
.sp-testi-quote {
  font-family: var(--font-head);
  font-style: italic;
  font-size: .9rem; color: var(--text2);
  line-height: 1.7;
  padding: 14px 18px;
  background: var(--lav-l);
  border-radius: 14px;
  border: 1px solid rgba(169,181,255,.2);
  position: relative;
}
.sp-testi-quote::before {
  content: '"';
  font-size: 2.5rem; line-height: 1;
  color: var(--lavender); opacity: .5;
  position: absolute; top: 4px; left: 12px;
  font-family: Georgia, serif;
}

/* ════════════════════════════════
   FEATURE CARDS — dashed border style
════════════════════════════════ */
.sp-feature-card {
  background: white;
  border-radius: var(--r-card) !important;
  border: 2px dashed var(--dashed) !important;
  padding: 36px 28px;
  text-align: center;
  box-shadow: none !important;
  transition: all .3s var(--ease) !important;
}
.sp-feature-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--sh-hover) !important;
  border-color: var(--lavender) !important;
  border-style: solid !important;
}
.sp-feature-icon {
  width: 64px; height: 64px;
  background: var(--lav-l) !important;
  border-radius: 50% !important;
  transition: all .3s var(--ease-spring) !important;
}
.sp-feature-card:hover .sp-feature-icon {
  transform: scale(1.12) rotate(-6deg) !important;
  background: var(--mauve-l) !important;
}

/* ════════════════════════════════
   ABOUT FEATURES — dashed style
════════════════════════════════ */
.sp-about-feature {
  border-bottom: 1px dashed var(--dashed) !important;
}
.sp-about-feature:last-child { border: none !important; }
.sp-about-feature-icon {
  background: var(--lav-l) !important;
  border-radius: 10px !important;
}

/* ════════════════════════════════
   GLOBAL DECORATIVE BACKGROUND ELEMENTS
════════════════════════════════ */
/* Dog head silhouette — very faint, top right of hero */
.sp-hero::before {
  background: radial-gradient(ellipse 60% 50% at 8% 12%, rgba(169,181,255,.18) 0%, transparent 70%) !important;
}

/* Scattered paw prints across sections */
.sp-section::after {
  content: none;
}

/* Cat silhouette bottom-left of testimonials */
.sp-testi-section::before {
  content: '';
  position: absolute; bottom: -20px; left: 60px;
  width: 160px; height: 160px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cellipse cx='50' cy='60' rx='28' ry='24' fill='%23A9B5FF' opacity='.07'/%3E%3Ccircle cx='50' cy='38' r='20' fill='%23A9B5FF' opacity='.07'/%3E%3Cpolygon points='35,24 28,10 42,20' fill='%23A9B5FF' opacity='.07'/%3E%3Cpolygon points='65,24 72,10 58,20' fill='%23A9B5FF' opacity='.07'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
}
.sp-testi-section::after {
  content: '';
  position: absolute; top: 40px; right: 40px;
  width: 100px; height: 100px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cellipse cx='30' cy='38' rx='14' ry='11' fill='%23FAA7B7' opacity='.12'/%3E%3Cellipse cx='13' cy='22' rx='7' ry='8' fill='%23FAA7B7' opacity='.12'/%3E%3Cellipse cx='30' cy='16' rx='7' ry='8' fill='%23FAA7B7' opacity='.12'/%3E%3Cellipse cx='47' cy='22' rx='7' ry='8' fill='%23FAA7B7' opacity='.12'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
}

/* ════════════════════════════════
   RESPONSIVE
════════════════════════════════ */
@media(max-width:1024px){
  .sp-cats-grid   { grid-template-columns: repeat(2,1fr); gap:20px }
  .sp-testi-grid  { grid-template-columns: repeat(2,1fr); gap:28px }
}
@media(max-width:640px){
  .sp-cats-grid   { grid-template-columns: 1fr; max-width:360px; margin:0 auto }
  .sp-testi-grid  { grid-template-columns: 1fr 1fr; gap:20px }
  .sp-testi-photo-wrap { width:120px; height:120px }
  .sp-cats-section { padding:52px 20px }
  .sp-testi-section{ padding:52px 20px }
}

/* ══════════════════════════════════════
   SHOP SECTION (homepage [sp_products])
══════════════════════════════════════ */
.sp-shop-section { padding: 80px 0; }

/* Header row: title centered */
.sp-shop-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 48px;
  text-align: center;
}
.sp-shop-head > div { text-align: center; }
.sp-shop-head .sp-eyebrow { margin-bottom: 6px; }
.sp-shop-head .sp-h2 { line-height: 1.1; }

.sp-shop-all-btn {
  flex-shrink: 0;
  font-size: .8rem !important;
  padding: 10px 22px !important;
  white-space: nowrap;
  margin-bottom: 6px; /* align with title baseline */
}

/* ── Product grid wrapper (homepage shortcode + any non-shop context) ── */
.sp-shop-grid-wrap { position: relative; }

/* Base grid — all column variants → 4 cols on desktop */
.sp-shop-grid-wrap ul.products,
.sp-shop-grid-wrap ul.products[class*="columns-"] {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.sp-shop-grid-wrap ul.products li.product {
  margin: 0 !important;
  float: none !important;
  width: auto !important;
}

/* Footer: centered CTA button */
.sp-shop-footer {
  display: flex;
  justify-content: center;
  margin-top: 52px;
}

@media(max-width:960px){
  .sp-shop-head { align-items: center; }
  .sp-shop-all-btn { display:none !important; }
  .sp-shop-grid-wrap ul.products,
  .sp-shop-grid-wrap ul.products[class*="columns-"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }
}
@media(max-width:480px){
  .sp-shop-grid-wrap ul.products,
  .sp-shop-grid-wrap ul.products[class*="columns-"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
}

/* ── Homepage [sp_products] shortcode — explicit 2-col on ALL mobile ── */
.sp-sec-products .sp-shop-grid-wrap ul.products,
.sp-sec-products .sp-shop-grid-wrap .woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
}
@media(max-width:960px){
  .sp-sec-products .sp-shop-grid-wrap ul.products,
  .sp-sec-products .sp-shop-grid-wrap .woocommerce ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }
}
@media(max-width:480px){
  .sp-sec-products .sp-shop-grid-wrap ul.products,
  .sp-sec-products .sp-shop-grid-wrap .woocommerce ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
}

/* ── Review CTA & Form ── */
.sp-review-cta {
    text-align: center;
    margin-top: 48px;
    padding-top: 40px;
    border-top: 1px solid var(--bd);
}
.sp-review-pending {
    display: inline-flex; align-items: center; gap: 14px;
    background: #fff8e1;
    border: 1.5px solid #ffe082;
    border-radius: 14px;
    padding: 16px 24px;
    color: #856404;
    font-size: .88rem;
}
.sp-review-pending strong { display:block; font-size:.92rem; color:#5d4037; }
.sp-review-pending p { margin:2px 0 0; opacity:.8; }
#sp-review-form { display:none; }

/* ══════════════════════════════════════
   TESTIMONIALS + REVIEW FORM
══════════════════════════════════════ */
.sp-testi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px; margin-bottom: 48px;
}
.sp-testi-card {
    background: white; border-radius: 20px;
    padding: 28px; border: 1px solid rgba(169,181,255,.2);
    box-shadow: 0 4px 24px rgba(3,27,137,.07);
    display: flex; flex-direction: column; gap: 14px;
    transition: transform .25s, box-shadow .25s;
}
.sp-testi-card:hover { transform: translateY(-4px); box-shadow: 0 12px 36px rgba(3,27,137,.12); }
.sp-testi-stars { font-size: 1.1rem; letter-spacing: 2px; }
.sp-testi-text { font-size: .92rem; line-height: 1.75; color: var(--text2); flex: 1; font-style: italic; }
.sp-testi-author { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.sp-testi-avatar {
    width: 40px; height: 40px; border-radius: 50%;
    background: linear-gradient(135deg, var(--blue), var(--mauve));
    color: white; font-weight: 800; font-size: 1rem;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.sp-testi-author strong { display: block; font-size: .88rem; color: var(--dark); }
.sp-testi-loc { font-size: .78rem; color: var(--muted); }

/* Review form */
.sp-review-form-wrap {
    max-width: 620px; margin: 0 auto;
    background: white; border-radius: 24px;
    padding: 36px; border: 1px solid rgba(169,181,255,.2);
    box-shadow: 0 4px 24px rgba(3,27,137,.07);
}
.sp-review-form-title {
    font-family: var(--font-head); font-size: 1.5rem;
    font-weight: 400; color: var(--dark);
    margin: 0 0 24px; text-align: center;
}
/* Star picker */
.sp-review-stars-pick {
    display: flex; justify-content: center; flex-direction: row-reverse;
    gap: 6px; margin-bottom: 24px;
}
.sp-review-stars-pick input { display: none; }
.sp-review-stars-pick label {
    font-size: 2rem; color: #ddd; cursor: pointer;
    transition: color .15s, transform .15s;
}
.sp-review-stars-pick input:checked ~ label,
.sp-review-stars-pick label:hover,
.sp-review-stars-pick label:hover ~ label { color: #F5A623; transform: scale(1.15); }

.sp-review-fields { display: flex; flex-direction: column; gap: 14px; }
.sp-review-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sp-review-input {
    width: 100%; padding: 12px 16px; box-sizing: border-box;
    border: 1.5px solid rgba(169,181,255,.35); border-radius: 12px;
    font-family: var(--font-body); font-size: .9rem; color: var(--dark);
    background: #fafbff; transition: border-color .2s, box-shadow .2s;
    outline: none;
}
.sp-review-input:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(97,152,254,.15);
}
.sp-review-textarea { resize: vertical; min-height: 110px; }
.sp-review-form .sp-btn { width: 100%; justify-content: center; margin-top: 4px; }

/* Messages */
.sp-review-msg {
    padding: 14px 20px; border-radius: 12px;
    font-size: .88rem; font-weight: 600; margin-bottom: 24px; text-align: center;
}
.sp-review-msg--ok  { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.sp-review-msg--err { background: #fff3cd; color: #856404; border: 1px solid #ffc107; }
.sp-review-login-note { text-align: center; margin-top: 24px; }

@media(max-width: 640px) {
    .sp-testi-grid { grid-template-columns: 1fr; }
    .sp-review-row { grid-template-columns: 1fr; }
    .sp-review-form-wrap { padding: 24px 18px; }
}








/* ══════════════════════════════════════
   WARM PALETTE + VISUAL STORY
══════════════════════════════════════ */
:root {
  --dark:    #3d2e38;  --dark2:   #2d1f28;
  --brown:   #C87941;  --caramel: #e8952a;
  --grape:   #7B5EA7;  --grape2:  #5c2d6e;
  --rose:    #DC92B3;  --rose2:   #c87a9e;   --rose-l:   #fdf0f7;
  --blush:   #F4C1CB;  --blush2:  #e0a8b4;   --blush-l:  #fff5f8;
  --mauve:   #CCA7C2;  --mauve2:  #b890ae;   --mauve-l:  #f5eef4;
  --blue:    #A6C8E5;  --blue2:   #8ab4d4;   --blue-l:   #eef5fb;
  --bg:      #FFFDF8;  --bg2:     #fff8f0;   --white:    #FFFFFF;
  --text:    #3d2e38;  --text2:   #6b4f62;   --muted:    #9e7a90;
  --bd:      rgba(61,46,56,.1);
  --bd2:     rgba(200,121,65,.25);
  --sh-xs:   0 2px 8px  rgba(61,46,56,.07);
  --sh-sm:   0 4px 16px rgba(61,46,56,.1);
  --sh-md:   0 8px 32px rgba(61,46,56,.12);
  --sh-lg:   0 16px 56px rgba(61,46,56,.15);
  --sh-xl:   0 24px 80px rgba(61,46,56,.19);
}

/* ── Section padding ── */
.sp-section { padding: 80px 0; }

/* ── 1. HERO ── */
.sp-hero {
  background: linear-gradient(150deg, #fdf5ff 0%, #f5eeff 45%, #fff0f7 100%) !important;
}

/* ── 2. FEATURES ── */
.sp-sec-features {
  background: linear-gradient(180deg, #fffdf8 0%, #fff6f0 100%) !important;
  position: relative; overflow: hidden;
}

/* ── 3. PRODUCTS ── */
.sp-sec-products {
  background: linear-gradient(180deg, #fff0f7 0%, #fdf5ff 100%) !important;
  position: relative; overflow: hidden;
}

/* ── 4. HOW IT WORKS ── */
.sp-sec-hiw {
  background: linear-gradient(160deg, #f5eeff 0%, #eee0f5 60%, #fdf0f7 100%) !important;
  position: relative; overflow: hidden;
}

/* ── 5. PROMO ── */
.sp-sec-promo {
  background: linear-gradient(135deg, #5c2d6e 0%, #7B5EA7 55%, #C87941 100%) !important;
  position: relative; overflow: hidden;
}
.sp-sec-promo .sp-promo-banner { display: none !important; }
.sp-promo-inner { padding: 64px 0; position: relative; z-index: 1; }

/* ── 6. TESTIMONIALS ── */
.sp-testi-section {
  background: linear-gradient(180deg, #fdf0f7 0%, #fff8fa 60%, #fffdf8 100%) !important;
  position: relative; overflow: hidden;
}

/* ── Decorative paw SVG ── */
/* Decorative animal/paw pseudo-elements — removed */
.sp-sec-features::after,
.sp-sec-products::before,
.sp-sec-hiw::before,
.sp-sec-hiw::after,
.sp-sec-promo::before,
.sp-testi-section::after {
  display: none !important;
}

/* ── Content above decorations ── */
.sp-sec-features .sp-wrap,
.sp-sec-products .sp-wrap,
.sp-sec-hiw .sp-wrap,
.sp-sec-promo .sp-wrap,
.sp-testi-section .sp-wrap { position: relative; z-index: 2; }

/* ── Buttons warm ── */
.sp-btn-primary {
  background: linear-gradient(135deg,#C87941,#e8952a) !important;
  box-shadow: 0 4px 20px rgba(200,121,65,.35) !important;
}
.sp-btn-primary:hover { background: linear-gradient(135deg,#b86c33,#d4821e) !important; }
.sp-btn-outline { border-color: var(--dark) !important; color: var(--dark) !important; }
.sp-eyebrow { color: var(--brown) !important; }

/* ── Feature icons ── */
.sp-feat-icon { background: linear-gradient(145deg,#fdf5ff,#fff0f7) !important; }
.sp-about-feature-icon { background: linear-gradient(145deg,#fdf5ff,#fff0f7) !important; }
.sp-cat-icon { background: linear-gradient(145deg,#fdf5ff,#fff5ec) !important; }
.sp-hero-trust-icon { background: linear-gradient(135deg,#fdf5ff,#fff0f7) !important; }

/* ── Promo content colors ── */
.sp-promo-title { color: white !important; }
.sp-promo-sub   { color: rgba(255,255,255,.85) !important; }
.sp-promo-badge { background: rgba(255,255,255,.18) !important; color: white !important; border-color: rgba(255,255,255,.3) !important; }
.sp-promo-trust span { color: rgba(255,255,255,.9) !important; }
.sp-promo-btn-new { background: white !important; color: #5c2d6e !important; }
.sp-promo-btn-new:hover { background: #fff0f7 !important; }
.sp-promo-cta-note { color: rgba(255,255,255,.6) !important; }

/* ── Reviews ── */
.sprev-avatar { background: linear-gradient(135deg,#7B5EA7,#DC92B3) !important; }
.sprev-submit { background: linear-gradient(135deg,#5c2d6e,#7B5EA7) !important; }

/* ── Footer ── */
.sp-footer { background: linear-gradient(180deg,#2d1f35 0%,#1f1428 100%) !important; }

/* ── Mobile ── */
@media(max-width:768px) { .sp-section { padding: 60px 0 !important; } }

/* ── Promo inner layout fix ── */
.sp-promo-inner {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  align-items: center !important;
  gap: 48px !important;
  padding: 72px 0 !important;
  position: relative !important;
}
.sp-promo-deco {
  display: none !important; /* hide absolute SVGs, use ::before instead */
}
.sp-promo-content { grid-column: 1; }
.sp-promo-cta     { grid-column: 2; text-align: center; }

/* Features section — ensure no legacy styles break it */
.sp-sec-features .sp-features-row,
.sp-sec-features .sp-features-grid {
  position: relative; z-index: 2;
}

@media(max-width: 768px) {
  .sp-promo-inner {
    grid-template-columns: 1fr !important;
    text-align: center !important;
    padding: 52px 0 !important;
  }
  .sp-promo-trust { justify-content: center !important; }
}

/* ── Mobile overflow + logo + admin bar fixes ── */
@media(max-width:900px){
  /* Ensure header always on top */
  .site-header { z-index: 9999 !important; }
  .announcement-bar { z-index: 9998 !important; position: relative !important; }
  .sp-hero { z-index: 1 !important; }
  #page, .site { overflow-x: hidden; }
  body { overflow-x: hidden; max-width: 100%; }
  #spw-panel { max-width: 100vw !important; }
  .sp-hero { overflow: hidden; max-width: 100%; }
  .site-header { max-width: 100%; }
  .header-inner { max-width: 100%; box-sizing: border-box; }

  /* Announcement bar */
  .announcement-bar { font-size: .78rem; padding: 6px 16px; white-space: normal; text-align: center; }
  /* Admin bar compensation */
  .admin-bar .site-header { top: 46px; }
}
/* WordPress admin bar mobile 46px breakpoint */
@media screen and (max-width: 782px) {
  .admin-bar .site-header { top: 46px; }
  html.admin-bar { margin-top: 46px !important; }
}

/* ═══════════════════════════════════════════════════
   CHECKOUT — Sweet Paws Design v1.8.0
   ═══════════════════════════════════════════════════ */

/* 1. Sparge containerele temei */
body.woocommerce-checkout .sp-card {
    all: unset !important;
    display: block !important;
    width: 100% !important;
}
body.woocommerce-checkout .sp-wrap {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}
body.woocommerce-checkout .wp-block-woocommerce-checkout {
    max-width: 100% !important;
    padding: 0 !important;
}

/* 2. Fundal */
body.woocommerce-checkout {
    background: #f6f3fb !important;
}

/* 3. H1 "Checkout" — header section frumos */
body.woocommerce-checkout h1 {
    display: block !important;
    max-width: 1180px !important;
    margin: 0 auto !important;
    padding: 0 32px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    background: transparent !important;
    /* Reset — nu afisam H1 default */
    font-size: 0 !important;
    line-height: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Header decorativ deasupra layout-ului */
body.woocommerce-checkout .wc-block-components-sidebar-layout {
    position: relative !important;
}
body.woocommerce-checkout .wc-block-components-sidebar-layout::before {
    display: none !important;
}
/* Titlu integrat in primul step */
body.woocommerce-checkout .wp-block-woocommerce-checkout-contact-information-block .wc-block-components-checkout-step__heading {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
}
body.woocommerce-checkout .wp-block-woocommerce-checkout-contact-information-block .wc-block-components-checkout-step__heading::before {
    content: '🐾 Checkout' !important;
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 2rem !important;
    font-weight: 400 !important;
    color: #3d2e38 !important;
    letter-spacing: .01em !important;
    line-height: 1.1 !important;
    display: block !important;
    margin-bottom: 8px !important;
    padding-bottom: 8px !important;
    width: 100% !important;
}

/* 4. Layout flex */
body.woocommerce-checkout .wc-block-components-sidebar-layout {
    flex-wrap: nowrap !important;
    max-width: 1180px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 32px 32px 80px !important;
    gap: 28px !important;
    align-items: start !important;
    box-sizing: border-box !important;
}

/* H1 wrapper (div senza classe) — scos din flow */
body.woocommerce-checkout .wc-block-components-sidebar-layout > div:not([class]) {
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    flex: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Main */
body.woocommerce-checkout .wc-block-components-main,
body.woocommerce-checkout .wc-block-checkout__main {
    flex: 1 1 0% !important;
    width: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
}

/* Sidebar */
body.woocommerce-checkout .wc-block-checkout__sidebar,
body.woocommerce-checkout .wc-block-components-sidebar {
    flex: 0 0 380px !important;
    width: 380px !important;
    min-width: 380px !important;
    max-width: 380px !important;
    padding: 0 !important;
    position: sticky !important;
    top: 96px !important;
    align-self: start !important;
}

/* 5. Step cards */
body.woocommerce-checkout .wc-block-components-checkout-step {
    background: #ffffff !important;
    border-radius: 20px !important;
    border: 1.5px solid rgba(200,121,65,.12) !important;
    box-shadow: 0 4px 24px rgba(61,46,56,.07) !important;
    padding: 28px 32px !important;
    margin-bottom: 16px !important;
}
body.woocommerce-checkout .wc-block-checkout__add-note,
body.woocommerce-checkout .wc-block-checkout__terms,
body.woocommerce-checkout .wc-block-checkout__actions {
    background: #fff !important;
    border-radius: 16px !important;
    border: 1.5px solid rgba(200,121,65,.1) !important;
    padding: 20px 26px !important;
    margin-bottom: 14px !important;
    box-shadow: 0 2px 10px rgba(61,46,56,.04) !important;
}

/* 6. Step heading */
body.woocommerce-checkout .wc-block-components-checkout-step__heading {
    margin-bottom: 20px !important;
    padding-bottom: 14px !important;
    border-bottom: 1px solid rgba(61,46,56,.07) !important;
}
body.woocommerce-checkout .wc-block-components-checkout-step__title {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 1.15rem !important;
    font-weight: 500 !important;
    color: #3d2e38 !important;
}

/* 7. Inputuri — floating label fix */
/* Label floating deasupra inputului */
body.woocommerce-checkout .wc-block-components-text-input {
    position: relative !important;
    margin-bottom: 16px !important;
}
body.woocommerce-checkout .wc-block-components-text-input label {
    position: absolute !important;
    top: 50% !important;
    left: 14px !important;
    transform: translateY(-50%) !important;
    font-size: .85rem !important;
    font-weight: 500 !important;
    color: #9e7a90 !important;
    pointer-events: none !important;
    transition: all .18s ease !important;
    background: transparent !important;
    padding: 0 4px !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    z-index: 1 !important;
}
/* Label floated up when has value or focused */
body.woocommerce-checkout .wc-block-components-text-input.is-active label,
body.woocommerce-checkout .wc-block-components-text-input input:focus ~ label,
body.woocommerce-checkout .wc-block-components-text-input input:not(:placeholder-shown) ~ label {
    top: 0 !important;
    transform: translateY(-50%) !important;
    font-size: .68rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .07em !important;
    color: #C87941 !important;
    background: white !important;
}
body.woocommerce-checkout .wc-block-components-text-input input,
body.woocommerce-checkout .wc-block-components-select select,
body.woocommerce-checkout .wc-block-components-combobox input {
    background: #fdf9ff !important;
    border: 1.5px solid rgba(123,94,167,.2) !important;
    border-radius: 12px !important;
    padding: 18px 16px 10px !important;
    font-size: .9rem !important;
    color: #3d2e38 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    transition: border-color .2s, box-shadow .2s !important;
    outline: none !important;
    height: 56px !important;
}
body.woocommerce-checkout .wc-block-components-text-input input:focus,
body.woocommerce-checkout .wc-block-components-select select:focus {
    border-color: #C87941 !important;
    box-shadow: 0 0 0 3px rgba(200,121,65,.13) !important;
    background: #fffdf8 !important;
}
/* Combobox labels */
body.woocommerce-checkout .wc-block-components-combobox label,
body.woocommerce-checkout .wc-block-components-country-input label,
body.woocommerce-checkout .wc-block-components-state-input label {
    font-size: .69rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .09em !important;
    color: #9e7a90 !important;
    margin-bottom: 5px !important;
    position: static !important;
    transform: none !important;
}

/* 8. Payment options */
body.woocommerce-checkout .wc-block-components-radio-control-accordion-option {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-bottom: 10px !important;
}
body.woocommerce-checkout .wc-block-components-radio-control__option {
    background: #fdf9ff !important;
    border: 1.5px solid rgba(123,94,167,.2) !important;
    border-radius: 14px !important;
    padding: 16px 18px !important;
    margin-bottom: 0 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    transition: all .2s !important;
}
body.woocommerce-checkout .wc-block-components-radio-control-accordion-option--checked-option-highlighted .wc-block-components-radio-control__option {
    border-color: #C87941 !important;
    background: #fffaf4 !important;
    border-radius: 14px 14px 0 0 !important;
}
body.woocommerce-checkout .wc-block-components-radio-control-accordion-content {
    background: #fffaf4 !important;
    border: 1.5px solid #C87941 !important;
    border-top: none !important;
    border-radius: 0 0 14px 14px !important;
    padding: 12px 18px !important;
    font-size: .85rem !important;
    color: #6b4f62 !important;
}
body.woocommerce-checkout .wc-block-components-radio-control__input {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    border-radius: 50% !important;
    border: 2px solid rgba(200,121,65,.4) !important;
    background: white !important;
    flex-shrink: 0 !important;
    outline: none !important;
    cursor: pointer !important;
    transition: all .2s !important;
    box-shadow: none !important;
}
body.woocommerce-checkout .wc-block-components-radio-control__input:checked {
    border-color: #C87941 !important;
    background: white !important;
    box-shadow: inset 0 0 0 4px #C87941 !important;
}
body.woocommerce-checkout input[type="radio"] { accent-color: #C87941 !important; }
body.woocommerce-checkout input[type="checkbox"] { accent-color: #C87941 !important; }
body.woocommerce-checkout .wc-block-components-payment-method-label {
    font-weight: 600 !important; color: #3d2e38 !important;
}

/* 9. Place Order */
body.woocommerce-checkout .wc-block-components-checkout-place-order-button {
    background: linear-gradient(135deg, #C87941 0%, #e8952a 100%) !important;
    border: none !important;
    border-radius: 99px !important;
    color: #fff !important;
    font-size: .98rem !important;
    font-weight: 700 !important;
    padding: 15px 32px !important;
    width: 100% !important;
    box-shadow: 0 6px 24px rgba(200,121,65,.45) !important;
    transition: transform .2s, box-shadow .2s !important;
    cursor: pointer !important;
    margin-top: 6px !important;
}
body.woocommerce-checkout .wc-block-components-checkout-place-order-button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 32px rgba(200,121,65,.55) !important;
}
body.woocommerce-checkout .wc-block-checkout__actions a {
    color: #9e7a90 !important; font-size: .83rem !important; text-decoration: none !important;
}
body.woocommerce-checkout .wc-block-checkout__actions a:hover { color: #C87941 !important; }

/* 10. Order Summary */
body.woocommerce-checkout .wc-block-components-notices {
    background: transparent !important; border: none !important;
    box-shadow: none !important; padding: 0 !important; margin: 0 !important;
}
body.woocommerce-checkout .wc-block-components-notices__snackbar,
body.woocommerce-checkout .wc-block-components-notice-snackbar-list {
    background: transparent !important; border: none !important;
    box-shadow: none !important; padding: 0 !important; width: auto !important;
    position: fixed !important; bottom: 24px !important; right: 24px !important;
    left: auto !important; top: auto !important; z-index: 9999 !important;
}
body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block {
    background: #fff !important;
    border-radius: 20px !important;
    border: 1.5px solid rgba(200,121,65,.12) !important;
    box-shadow: 0 4px 24px rgba(61,46,56,.07) !important;
    padding: 24px 26px !important;
    overflow: hidden !important;
}
/* Order summary title */
body.woocommerce-checkout .wc-block-components-order-summary__toggle-text,
body.woocommerce-checkout .wc-block-checkout__sidebar h2 {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 1.15rem !important;
    font-weight: 500 !important;
    color: #3d2e38 !important;
}
body.woocommerce-checkout .wc-block-components-order-summary-item {
    padding: 13px 0 !important;
    border-bottom: 1px solid rgba(61,46,56,.06) !important;
}
body.woocommerce-checkout .wc-block-components-order-summary-item:last-child { border-bottom: none !important; }
body.woocommerce-checkout .wc-block-components-order-summary-item__image img { border-radius: 10px !important; }
body.woocommerce-checkout .wc-block-components-order-summary-item__subtitle { color: #9e7a90 !important; font-size: .8rem !important; }
body.woocommerce-checkout .wc-block-components-totals-wrapper {
    border-top: 1px solid rgba(61,46,56,.08) !important; margin-top: 10px !important; padding-top: 10px !important;
}
body.woocommerce-checkout .wc-block-components-totals-item { padding: 8px 0 !important; }
body.woocommerce-checkout .wc-block-components-totals-item__label { color: #6b4f62 !important; font-size: .88rem !important; }
body.woocommerce-checkout .wc-block-components-totals-item--total {
    border-top: 2px solid rgba(61,46,56,.1) !important; margin-top: 6px !important; padding-top: 14px !important;
}
body.woocommerce-checkout .wc-block-components-totals-item--total .wc-block-components-totals-item__label,
body.woocommerce-checkout .wc-block-components-totals-item--total .wc-block-components-totals-item__value {
    font-weight: 700 !important; font-size: 1.08rem !important; color: #3d2e38 !important;
}
body.woocommerce-checkout .wc-block-components-totals-coupon__button {
    background: transparent !important;
    border: 1.5px solid rgba(200,121,65,.4) !important;
    border-radius: 99px !important;
    color: #C87941 !important;
    font-weight: 700 !important;
    padding: 7px 16px !important;
    cursor: pointer !important;
    font-size: .8rem !important;
    transition: all .2s !important;
}
body.woocommerce-checkout .wc-block-components-totals-coupon__button:hover {
    background: #C87941 !important; color: #fff !important;
}

/* 11. Notices */
body.woocommerce-checkout .wc-block-components-notice-banner {
    border-radius: 12px !important;
    border: none !important;
    border-left: 4px solid #C87941 !important;
    background: rgba(200,121,65,.08) !important;
    color: #3d2e38 !important;
    padding: 13px 18px !important;
    margin-bottom: 16px !important;
}
body.woocommerce-checkout .wc-block-components-notice-banner.is-error {
    border-left-color: #e74c3c !important;
    background: rgba(231,76,60,.07) !important;
}

/* 12. Order Summary title — stilizeaza elementul WC existent (nu adaugam duplicat) */
body.woocommerce-checkout .wc-block-components-checkout-order-summary__title-text {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 1.15rem !important;
    font-weight: 500 !important;
    color: #3d2e38 !important;
}
body.woocommerce-checkout .wc-block-components-checkout-order-summary__title-text::before {
    content: '🛍️ ' !important;
}

/* Pet-friendly icons pe step titles */
body.woocommerce-checkout .wp-block-woocommerce-checkout-contact-information-block .wc-block-components-checkout-step__title::before {
    content: '✉️ ' !important;
}
body.woocommerce-checkout .wp-block-woocommerce-checkout-shipping-address-block .wc-block-components-checkout-step__title::before,
body.woocommerce-checkout .wp-block-woocommerce-checkout-billing-address-block .wc-block-components-checkout-step__title::before {
    content: '📍 ' !important;
}
body.woocommerce-checkout .wp-block-woocommerce-checkout-payment-block .wc-block-components-checkout-step__title::before {
    content: '💳 ' !important;
}

/* Mobile */
@media (max-width: 900px) {

    /* Layout — coloana pe mobil */
    body.woocommerce-checkout .wc-block-components-sidebar-layout {
        flex-direction: column !important;
        flex-wrap: wrap !important;
        padding: 12px 12px 60px !important;
        gap: 16px !important;
        margin: 0 auto !important;
    }

    /* Main — full width */
    body.woocommerce-checkout .wc-block-components-main,
    body.woocommerce-checkout .wc-block-checkout__main {
        flex: 1 1 100% !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    /* Sidebar — full width, nu sticky */
    body.woocommerce-checkout .wc-block-checkout__sidebar,
    body.woocommerce-checkout .wc-block-components-sidebar {
        flex: 1 1 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        position: static !important;
    }

    /* Step cards — padding mai mic */
    body.woocommerce-checkout .wc-block-components-checkout-step {
        padding: 18px 16px !important;
        border-radius: 14px !important;
        margin-bottom: 12px !important;
    }
    body.woocommerce-checkout .wc-block-checkout__add-note,
    body.woocommerce-checkout .wc-block-checkout__terms,
    body.woocommerce-checkout .wc-block-checkout__actions {
        padding: 14px 16px !important;
        border-radius: 12px !important;
        margin-bottom: 10px !important;
    }

    /* Titlu Checkout mai mic */
    body.woocommerce-checkout .wp-block-woocommerce-checkout-contact-information-block .wc-block-components-checkout-step__heading::before {
        font-size: 1.6rem !important;
        margin-bottom: 6px !important;
    }

    /* Inputuri full width */
    body.woocommerce-checkout .wc-block-components-text-input input,
    body.woocommerce-checkout .wc-block-components-select select,
    body.woocommerce-checkout .wc-block-components-combobox input {
        font-size: .88rem !important;
        height: 52px !important;
    }

    /* Order Summary card */
    body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block {
        border-radius: 14px !important;
        padding: 16px !important;
    }

    /* Place Order button */
    body.woocommerce-checkout .wc-block-components-checkout-place-order-button {
        padding: 14px 24px !important;
        font-size: .92rem !important;
    }

    /* H1 wrapper — asigura-te ca nu ocupa spatiu */
    body.woocommerce-checkout .wc-block-components-sidebar-layout > div:not([class]) {
        display: none !important;
    }

    /* Order summary — forteaza sa fie mereu vizibil pe mobil */
    body.woocommerce-checkout .wc-block-components-checkout-order-summary__content {
        display: block !important;
        height: auto !important;
        overflow: visible !important;
        visibility: visible !important;
        opacity: 1 !important;
        max-height: none !important;
    }
    /* Ascunde sageata toggle — nu mai e nevoie */
    body.woocommerce-checkout .wc-block-components-checkout-order-summary__title-icon {
        display: none !important;
    }
    /* Title price — mai mic pe mobil */
    body.woocommerce-checkout .wc-block-components-checkout-order-summary__title-price {
        display: none !important;
    }
}

@media (max-width: 480px) {
    body.woocommerce-checkout .wc-block-components-sidebar-layout {
        padding: 8px 8px 60px !important;
    }
    body.woocommerce-checkout .wc-block-components-checkout-step {
        padding: 14px 12px !important;
    }
    body.woocommerce-checkout .wc-block-components-checkout-step__title {
        font-size: 1rem !important;
    }
}

/* ── Edit Account — remove fieldset border around password change ── */
.woocommerce-EditAccountForm fieldset {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.woocommerce-EditAccountForm fieldset legend {
    font-weight: 700;
    color: #3d2e38;
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 16px;
    padding: 0;
}


/* ══════════════════════════════════════════════════════════
   CONTACT PAGE — CF7 Pet-Friendly Design
   Palette: --dark:#3d2e38 --brown:#C87941 --grape:#7B5EA7
             --rose:#DC92B3 --blush:#F4C1CB --mauve:#CCA7C2
   ══════════════════════════════════════════════════════════ */

/* ── Page layout ── */
.page-id-32 .entry-content,
.page-template-default:has(.wpcf7) .entry-content {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 20px 80px;
}

/* ── Hide default page title ── */
.page-id-32 .entry-title { display: none !important; }

/* ── Contact header ── */
.sp-contact-header {
    text-align: center;
    padding: 60px 0 40px;
}
.sp-contact-header-emoji {
    font-size: 3.2rem;
    display: block;
    margin-bottom: 14px;
    line-height: 1;
}
.sp-contact-header h1 {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 2.8rem !important;
    font-weight: 400 !important;
    color: #3d2e38 !important;
    margin: 0 0 12px !important;
    line-height: 1.1 !important;
}
.sp-contact-header p {
    color: #9e7a90;
    font-size: .95rem;
    max-width: 440px;
    margin: 0 auto !important;
    line-height: 1.7;
}

/* ── Trust badges ── */
.sp-contact-trust {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px 28px;
    flex-wrap: wrap;
    margin: 0 0 36px;
}
.sp-contact-trust-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .8rem;
    font-weight: 700;
    color: #9e7a90;
    letter-spacing: .02em;
}
.sp-contact-trust-item::before {
    content: '';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: linear-gradient(135deg, #C87941, #e8952a);
    border-radius: 50%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6l3 3 5-5' stroke='white' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px;
    flex-shrink: 0;
}

/* ── Form card ── */
.pet-contact-form {
    background: #fff;
    border-radius: 24px;
    border: 1.5px solid rgba(200,121,65,.12);
    box-shadow: 0 8px 48px rgba(61,46,56,.08), 0 2px 12px rgba(200,121,65,.06);
    padding: 48px 52px;
    position: relative;
    overflow: hidden;
}
.wpcf7-form {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    position: static;
    overflow: visible;
}
/* ── CF7 form inside card — remove duplicate borders ── */
.pet-contact-form .wpcf7-form {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    overflow: visible !important;
}
.pet-contact-form .wpcf7-form::before {
    display: none !important;
}
.pet-contact-form::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, #C87941, #DC92B3, #7B5EA7);
    border-radius: 24px 24px 0 0;
}

/* ── Form inner header ── */
.pet-contact-form h3 {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 1.8rem !important;
    font-weight: 400 !important;
    color: #3d2e38 !important;
    margin: 0 0 6px !important;
}
.pet-contact-form > p {
    color: #9e7a90;
    font-size: .88rem;
    margin: 0 0 32px !important;
    line-height: 1.6;
}

/* ── Fields ── */
.pet-field {
    margin-bottom: 20px !important;
}
.pet-field p { margin: 0 !important; }

/* Labels */
.pet-field label,
.wpcf7 label {
    display: block !important;
    font-size: .71rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .1em !important;
    color: #9e7a90 !important;
    margin-bottom: 7px !important;
}

/* Input / Textarea / Select */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea,
.wpcf7 select {
    width: 100% !important;
    background: #fdf9ff !important;
    border: 1.5px solid rgba(123,94,167,.18) !important;
    border-radius: 12px !important;
    padding: 13px 16px !important;
    font-size: .92rem !important;
    font-family: inherit !important;
    color: #3d2e38 !important;
    box-sizing: border-box !important;
    transition: border-color .2s, box-shadow .2s !important;
    outline: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 input[type="tel"]:focus,
.wpcf7 textarea:focus,
.wpcf7 select:focus {
    border-color: #C87941 !important;
    box-shadow: 0 0 0 3px rgba(200,121,65,.1) !important;
    background: #fffdf8 !important;
}
.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder { color: #cca7c2 !important; opacity: 1 !important; }

/* Textarea */
.wpcf7 textarea {
    min-height: 130px !important;
    resize: vertical !important;
    line-height: 1.65 !important;
}

/* Select arrow */
.wpcf7-form-control-wrap:has(select)::after {
    content: '';
    position: absolute;
    right: 14px; top: 50%;
    transform: translateY(-50%);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #9e7a90;
    pointer-events: none;
}
.wpcf7-form-control-wrap:has(select) { position: relative; display: block; }

/* ── Submit button ── */
.wpcf7 input[type="submit"],
.wpcf7-submit {
    width: 100% !important;
    padding: 15px 32px !important;
    background: linear-gradient(135deg, #C87941 0%, #e8952a 100%) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 99px !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    font-family: inherit !important;
    cursor: pointer !important;
    box-shadow: 0 6px 24px rgba(200,121,65,.38) !important;
    transition: transform .2s, box-shadow .2s !important;
    letter-spacing: .02em !important;
    margin-top: 8px !important;
}
.wpcf7 input[type="submit"]:hover,
.wpcf7-submit:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 32px rgba(200,121,65,.5) !important;
}

/* ── Response messages ── */
.wpcf7-response-output {
    margin-top: 20px !important;
    padding: 14px 18px !important;
    border-radius: 0 12px 12px 0 !important;
    font-size: .88rem !important;
    font-weight: 600 !important;
    border: none !important;
    border-left: 4px solid transparent !important;
}
.wpcf7-form.sent .wpcf7-response-output {
    background: rgba(59,109,17,.07) !important;
    color: #3B6D11 !important;
    border-left-color: #3B6D11 !important;
}
.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.failed .wpcf7-response-output {
    background: rgba(200,121,65,.07) !important;
    color: #854F0B !important;
    border-left-color: #C87941 !important;
}

/* Inline validation errors */
.wpcf7-not-valid {
    border-color: #e74c3c !important;
    box-shadow: 0 0 0 3px rgba(231,76,60,.1) !important;
}
.wpcf7-not-valid-tip {
    font-size: .75rem !important;
    color: #e74c3c !important;
    margin-top: 4px !important;
    display: block !important;
}

/* ── Pet icons on labels ── */
.pet-field:nth-child(1) label::before { content: '👤 '; }
.pet-field:nth-child(2) label::before { content: '✉️ '; }
.pet-field:nth-child(3) label::before { content: '📞 '; }
.pet-field:nth-child(4) label::before { content: '🐾 '; }
.pet-field:nth-child(5) label::before { content: '💬 '; }

/* ── Submit area ── */
.pet-submit { margin-top: 12px; }

/* ── Mobile ── */
@media (max-width: 640px) {
    .pet-contact-form, .wpcf7-form { padding: 32px 22px !important; border-radius: 18px !important; }
    .sp-contact-header h1 { font-size: 2.2rem !important; }
    .sp-contact-header { padding: 40px 0 28px; }
    .sp-contact-trust { gap: 8px 16px; }
}


/* ══════════════════════════════════════════════════════════
   CHECKOUT — Payment methods radio fix
   ══════════════════════════════════════════════════════════ */

/* Fix radio button pozitionat absolute de WC Blocks */
body.woocommerce-checkout .wc-block-components-radio-control__option {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 16px 18px 16px 50px !important;
}

body.woocommerce-checkout .wc-block-components-radio-control__option input[type="radio"] {
    position: absolute !important;
    left: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    accent-color: #C87941 !important;
    cursor: pointer !important;
}

/* Label — lasa spatiu pentru radio */
body.woocommerce-checkout .wc-block-components-radio-control__option label {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    flex: 1 !important;
    font-size: .92rem !important;
    color: #3d2e38 !important;
    font-weight: 500 !important;
}

/* Label title si description */
body.woocommerce-checkout .wc-block-components-radio-control__option-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
}

body.woocommerce-checkout .wc-block-components-radio-control__option-checked-icon {
    display: none !important;
}

/* Elimina chenarele inutile de pe accordion si payment block */
body.woocommerce-checkout .wc-block-components-radio-control-accordion-option {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-bottom: 10px !important;
}

body.woocommerce-checkout .wc-block-components-radio-control-accordion-content {
    border: none !important;
    background: #fdf9ff !important;
    border-radius: 0 0 14px 14px !important;
    padding: 12px 18px !important;
    margin-top: -4px !important;
    font-size: .85rem !important;
    color: #9e7a90 !important;
}

/* Chenar pe option selectata */
body.woocommerce-checkout .wc-block-components-radio-control__option:has(input:checked) {
    border-color: #C87941 !important;
    background: #fffdf8 !important;
    box-shadow: 0 0 0 3px rgba(200,121,65,.08) !important;
}

/* Payment block container — sterge chenar extra */
body.woocommerce-checkout .wp-block-woocommerce-checkout-payment-block,
body.woocommerce-checkout .wc-block-checkout__payment-method {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Title sectiune payment */
body.woocommerce-checkout .wc-block-components-title.wc-block-checkout__payment-method-title {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 1.15rem !important;
    color: #3d2e38 !important;
    margin-bottom: 14px !important;
}


/* ══════════════════════════════════════════════════════════
   ORDER RECEIVED — Payment method display fix
   ══════════════════════════════════════════════════════════ */

/* Li-ul payment method — inline flex */
.woocommerce-order-overview__payment-method.method {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}

/* Strong care înveleste logo-ul — inline */
.woocommerce-order-overview__payment-method.method strong {
    display: inline-flex !important;
    align-items: center !important;
}

/* Wrapper-ul cu logo + nr card */
.wc-payment-gateway-method-logo-wrapper {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0 !important;
    line-height: 1 !important;
}

/* Logo card (Visa, Mastercard etc) */
.wc-payment-gateway-method-logo-wrapper img {
    display: inline-block !important;
    width: auto !important;
    height: 22px !important;
    max-height: 22px !important;
    max-width: 44px !important;
    vertical-align: middle !important;
    object-fit: contain !important;
}

/* Textul "••• 0000" */
.wc-payment-card-logo {
    font-size: .9rem !important;
    color: #3d2e38 !important;
    letter-spacing: .04em !important;
}


/* ── Order received: payment logo în sp-order-info ── */
.sp-order-info-item__value .wc-payment-gateway-method-logo-wrapper {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 0 !important;
    font-size: .88rem !important;
    color: #3d2e38 !important;
}
.sp-order-info-item__value .wc-payment-gateway-method-logo-wrapper img {
    height: 20px !important;
    width: auto !important;
    max-width: 40px !important;
    object-fit: contain !important;
    display: inline-block !important;
    vertical-align: middle !important;
}


/* ══════════════════════════════════════════════════════════
   ADVANCED SEARCH MODAL — v1.9.0
   ══════════════════════════════════════════════════════════ */

.sp-search-modal {
  position: fixed; inset: 0; z-index: 999999;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 80px;
}
.sp-search-modal[hidden] { display: none !important; }

.sp-search-backdrop {
  position: absolute; inset: 0;
  background: rgba(30, 10, 25, 0.55);
  backdrop-filter: blur(4px);
  animation: sp-fade-in .18s ease;
}

.sp-search-panel {
  position: relative; z-index: 1;
  background: #fff;
  border-radius: 18px;
  width: 100%; max-width: 680px;
  margin: 0 16px;
  box-shadow: 0 24px 80px rgba(50, 20, 40, .22), 0 2px 8px rgba(0,0,0,.08);
  overflow: hidden;
  animation: sp-slide-down .22s cubic-bezier(.34,.96,.44,1);
  max-height: calc(100vh - 100px);
  display: flex; flex-direction: column;
}

@keyframes sp-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes sp-slide-down {
  from { opacity: 0; transform: translateY(-18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Search header */
.sp-search-header {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--rose-l, #fce4e8);
  flex-shrink: 0;
}
.sp-search-input-wrap {
  flex: 1; display: flex; align-items: center; gap: 10px;
  background: var(--bg-soft, #fdf5f7);
  border: 1.5px solid #efd8de;
  border-radius: 12px;
  padding: 10px 14px;
  transition: border-color .2s;
}
.sp-search-input-wrap:focus-within { border-color: var(--rose, #FB7A8E); }
.sp-search-icon { color: #b08090; flex-shrink: 0; }
.sp-search-input {
  flex: 1; border: none; background: none; outline: none;
  font-size: 1rem; color: var(--dark, #3d2e38); font-family: inherit;
}
.sp-search-input::placeholder { color: #c0a0aa; }
.sp-search-clear {
  background: none; border: none; cursor: pointer;
  color: #b08090; font-size: .85rem; padding: 2px 4px;
  border-radius: 4px; transition: color .15s;
}
.sp-search-clear:hover { color: var(--rose, #FB7A8E); }
.sp-search-close {
  background: none; border: none; cursor: pointer;
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #b08090; transition: background .15s, color .15s;
  flex-shrink: 0;
}
.sp-search-close:hover { background: #fce4e8; color: var(--rose, #FB7A8E); }

/* Filters */
.sp-search-filters {
  padding: 14px 20px;
  border-bottom: 1px solid var(--rose-l, #fce4e8);
  display: flex; flex-direction: column; gap: 12px;
  flex-shrink: 0;
}
.sp-filter-group { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.sp-filter-label {
  font-size: .72rem; font-weight: 700; color: #b08090;
  text-transform: uppercase; letter-spacing: .04em;
  min-width: 72px; padding-top: 5px; white-space: nowrap;
}
.sp-filter-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sp-chip {
  background: #fdf5f7; border: 1.5px solid #efd8de;
  border-radius: 20px; padding: 4px 12px;
  font-size: .82rem; color: var(--dark, #3d2e38);
  cursor: pointer; transition: all .15s; font-family: inherit;
  white-space: nowrap;
}
.sp-chip:hover { border-color: var(--rose, #FB7A8E); color: var(--rose, #FB7A8E); }
.sp-chip-active {
  background: var(--rose, #FB7A8E) !important;
  border-color: var(--rose, #FB7A8E) !important;
  color: #fff !important;
}

/* Price range */
.sp-filter-price { display: flex; flex-direction: column; gap: 6px; }
.sp-price-label { font-size: .82rem; color: var(--dark, #3d2e38); font-weight: 600; }
.sp-price-range-wrap { display: flex; gap: 8px; align-items: center; }
.sp-range {
  flex: 1; -webkit-appearance: none; height: 4px;
  background: #efd8de; border-radius: 2px; outline: none; cursor: pointer;
}
.sp-range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 16px;
  background: var(--rose, #FB7A8E); border-radius: 50%;
  border: 2px solid #fff; box-shadow: 0 1px 4px rgba(251,122,142,.4);
  cursor: pointer;
}

/* Results area */
.sp-search-results { flex: 1; overflow-y: auto; min-height: 0; }

.sp-search-default, .sp-search-no-results {
  padding: 28px 24px; text-align: center;
}
.sp-search-hint { color: #b08090; font-size: .95rem; margin: 0 0 16px; }
.sp-search-popular { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; }
.sp-search-popular-label { font-size: .8rem; color: #b08090; font-weight: 600; }
.sp-popular-tag {
  background: #fdf5f7; border: 1px solid #efd8de; border-radius: 14px;
  padding: 4px 12px; font-size: .82rem; color: var(--dark, #3d2e38);
  text-decoration: none; transition: all .15s;
}
.sp-popular-tag:hover { background: var(--rose, #FB7A8E); color: #fff; border-color: var(--rose, #FB7A8E); }
.sp-search-no-results p { color: #b08090; font-size: .95rem; }
.sp-search-no-results a { color: var(--rose, #FB7A8E); font-weight: 600; }

/* Loading spinner */
.sp-search-loading { display: flex; justify-content: center; padding: 32px; }
.sp-search-spinner {
  width: 28px; height: 28px; border: 2.5px solid #efd8de;
  border-top-color: var(--rose, #FB7A8E); border-radius: 50%;
  animation: sp-spin .6s linear infinite;
}
@keyframes sp-spin { to { transform: rotate(360deg); } }

/* Result items */
.sp-search-items { padding: 8px 0; }
.sp-result-item {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 20px; text-decoration: none; color: inherit;
  transition: background .15s; border-bottom: 1px solid #fdf5f7;
}
.sp-result-item:hover { background: #fdf5f7; }
.sp-result-img {
  width: 52px; height: 52px; border-radius: 10px; overflow: hidden;
  background: #fce4e8; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 1.4rem;
}
.sp-result-img img { width: 100%; height: 100%; object-fit: cover; }
.sp-result-info { flex: 1; min-width: 0; }
.sp-result-name { font-size: .95rem; font-weight: 600; color: var(--dark, #3d2e38); margin-bottom: 2px; }
.sp-result-name mark { background: #fce4e8; color: var(--rose, #FB7A8E); border-radius: 2px; }
.sp-result-price { font-size: .85rem; color: var(--rose, #FB7A8E); font-weight: 700; }
.sp-result-arrow { color: #c0a0aa; flex-shrink: 0; }

/* Footer */
.sp-search-footer {
  padding: 12px 20px; border-top: 1px solid var(--rose-l, #fce4e8);
  text-align: center; flex-shrink: 0;
}
.sp-search-view-all {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .88rem; font-weight: 700; color: var(--rose, #FB7A8E);
  text-decoration: none; transition: gap .15s;
}
.sp-search-view-all:hover { gap: 10px; }


/* ══════════════════════════════════════════════════════════
   FAQ SECTION — [sp_faq] v1.9.0
   ══════════════════════════════════════════════════════════ */

.sp-sec-faq { background: #fdf5f7; }

.sp-faq-list {
  max-width: 760px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 0;
  border-radius: 16px; overflow: hidden;
  border: 1.5px solid #efd8de;
}

.sp-faq-item { background: #fff; border-bottom: 1.5px solid #efd8de; }
.sp-faq-item:last-child { border-bottom: none; }

.sp-faq-question {
  width: 100%; background: none; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 24px; text-align: left;
  font-size: 1rem; font-weight: 600; color: var(--dark, #3d2e38);
  font-family: inherit; transition: background .15s;
}
.sp-faq-question:hover { background: #fdf5f7; }
.sp-faq-question[aria-expanded="true"] { color: var(--rose, #FB7A8E); }
.sp-faq-question[aria-expanded="true"] .sp-faq-icon { transform: rotate(45deg); }

.sp-faq-icon { flex-shrink: 0; transition: transform .22s cubic-bezier(.34,.96,.44,1); color: var(--rose, #FB7A8E); }

.sp-faq-answer {
  padding: 0 24px 20px 24px;
  font-size: .97rem; line-height: 1.7; color: #6b4e5e;
  animation: sp-fade-in .18s ease;
}
.sp-faq-answer p { margin: 0; }

/* ── Search modal mobile ── */
@media (max-width: 600px) {
  .sp-search-modal { padding-top: 0; align-items: flex-end; }
  .sp-search-panel { border-radius: 18px 18px 0 0; margin: 0; max-height: 92vh; }
  .sp-search-filters { display: none; } /* hide filters on mobile to save space, keep search bar */
}



/* ══════════════════════════════════════════════════════════
   HOW IT WORKS PAGE — [sp_hiw_page] v1.9.0
   ══════════════════════════════════════════════════════════ */

/* ── 1. Hero ── */
.sp-hiw-hero {
  background: linear-gradient(135deg, #fdf0f7 0%, #eee0f5 55%, #e8eeff 100%);
  padding: 80px 0 70px;
  overflow: hidden;
}
.sp-hiw-hero-inner {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 60px;
}
.sp-hiw-hero-text { max-width: 600px; }
.sp-hiw-hero-h1 {
  font-family: var(--font-head, 'Cormorant Garamond'), serif;
  font-size: clamp(2.6rem, 5vw, 3.8rem);
  font-weight: 600; color: var(--dark, #3d2e38);
  line-height: 1.1; margin: 12px 0 18px;
}
.sp-hiw-hero-h1 em { color: var(--rose, #FB7A8E); font-style: normal; }
.sp-hiw-hero-lead {
  font-size: 1.12rem; color: #6b4e5e; line-height: 1.7; margin-bottom: 32px;
}
.sp-hiw-hero-btns { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 36px; }
.sp-hiw-hero-stats {
  display: flex; align-items: center; gap: 0; flex-wrap: wrap;
  background: rgba(255,255,255,.65); backdrop-filter: blur(8px);
  border: 1px solid rgba(251,122,142,.2); border-radius: 14px;
  padding: 14px 20px; gap: 4px;
}
.sp-hiw-stat { display: flex; flex-direction: column; align-items: center; padding: 0 16px; }
.sp-hiw-stat strong { font-size: 1.5rem; font-weight: 800; color: var(--rose, #FB7A8E); line-height: 1; }
.sp-hiw-stat span  { font-size: .72rem; color: #b08090; text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }
.sp-hiw-stat-sep   { color: #efd8de; font-size: 1.4rem; padding: 0 4px; }

/* Phone mockup in hero */
.sp-hiw-hero-visual { flex-shrink: 0; }
.sp-hiw-phone-mockup {
  width: 220px; position: relative;
  background: #fff; border-radius: 28px;
  box-shadow: 0 24px 60px rgba(50,20,40,.18), 0 2px 8px rgba(0,0,0,.06);
  padding: 12px;
  border: 2px solid #efd8de;
}
.sp-hiw-phone-screen { background: #fdf5f7; border-radius: 18px; overflow: hidden; }
.sp-hiw-phone-profile { padding: 20px 16px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.sp-hiw-phone-avatar { font-size: 2.8rem; background: #fce4e8; border-radius: 50%; width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }
.sp-hiw-phone-name { font-weight: 800; font-size: 1.1rem; color: var(--dark, #3d2e38); }
.sp-hiw-phone-breed { font-size: .72rem; color: #b08090; text-align: center; }
.sp-hiw-phone-tags { display: flex; flex-direction: column; gap: 4px; width: 100%; margin-top: 4px; }
.sp-hiw-phone-tags span { background: #fce4e8; border-radius: 8px; padding: 4px 8px; font-size: .7rem; color: #6b4e5e; text-align: center; }
.sp-hiw-phone-call, .sp-hiw-phone-loc {
  display: block; width: 100%; text-align: center; border-radius: 10px; padding: 9px 0;
  font-size: .78rem; font-weight: 700; cursor: pointer; border: none; margin-top: 4px;
}
.sp-hiw-phone-call { background: var(--rose, #FB7A8E); color: #fff; }
.sp-hiw-phone-loc  { background: #fff; color: var(--blue, #6198FE); border: 1.5px solid var(--blue, #6198FE); }
.sp-hiw-nfc-badge {
  position: absolute; top: -12px; right: -12px;
  background: var(--rose, #FB7A8E); color: #fff;
  border-radius: 12px; padding: 6px 10px;
  font-size: .72rem; font-weight: 800; letter-spacing: .04em;
  display: flex; align-items: center; gap: 5px;
  box-shadow: 0 4px 12px rgba(251,122,142,.4);
}

/* ── 2. Steps ── */
.sp-hiw-steps-section { background: #fff; }
.sp-hiw-steps { display: flex; flex-direction: column; gap: 0; max-width: 820px; margin: 0 auto; }

.sp-hiw-step {
  display: grid; grid-template-columns: 52px 28px 1fr;
  align-items: flex-start; gap: 0; position: relative;
}
.sp-hiw-step-num {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--rose, #FB7A8E); color: #fff;
  font-size: 1.3rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; box-shadow: 0 4px 16px rgba(251,122,142,.35);
  position: relative; z-index: 1;
}
.sp-hiw-step-connector {
  width: 2px; background: linear-gradient(180deg, #FB7A8E 0%, #efd8de 100%);
  min-height: 100%; margin-left: 25px; margin-top: 52px;
  position: absolute; left: 25px; top: 0; bottom: -24px;
}
.sp-hiw-step-connector--last { display: none; }

.sp-hiw-step-card {
  background: #fdf5f7; border: 1.5px solid #efd8de; border-radius: 16px;
  padding: 24px 28px; margin-left: 20px; margin-bottom: 24px;
  display: grid; grid-template-columns: 56px 1fr; gap: 20px; align-items: flex-start;
}
.sp-hiw-step-icon {
  width: 56px; height: 56px; border-radius: 14px;
  background: rgba(255,255,255,.8); border: 1.5px solid currentColor;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sp-hiw-step-content h3 {
  font-family: var(--font-head, 'Cormorant Garamond'), serif;
  font-size: 1.35rem; font-weight: 700; color: var(--dark, #3d2e38);
  margin: 0 0 10px;
}
.sp-hiw-step-content p { font-size: .97rem; color: #6b4e5e; line-height: 1.65; margin: 0 0 14px; }
.sp-hiw-step-detail { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.sp-hiw-step-detail span { font-size: .85rem; color: #5c4060; }
.sp-hiw-step-link {
  font-size: .88rem; font-weight: 700; color: var(--rose, #FB7A8E); text-decoration: none;
  transition: gap .15s;
}
.sp-hiw-step-link:hover { text-decoration: underline; }

/* ── 3. Lost Pet Flow ── */
.sp-hiw-flow-section { background: linear-gradient(135deg, #f5eeff 0%, #fdf0f7 100%); }
.sp-hiw-flow {
  display: flex; align-items: flex-start; gap: 0;
  overflow-x: auto; padding-bottom: 12px;
}
.sp-hiw-flow-step {
  flex: 1; min-width: 160px; display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 0 12px;
}
.sp-hiw-flow-icon {
  width: 64px; height: 64px; border-radius: 50%;
  background: #fff; border: 2px solid #efd8de;
  font-size: 1.8rem; display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px; box-shadow: 0 4px 16px rgba(251,122,142,.12);
  flex-shrink: 0;
}
.sp-hiw-flow-body h4 { font-size: .95rem; font-weight: 700; color: var(--dark, #3d2e38); margin: 0 0 6px; }
.sp-hiw-flow-body p  { font-size: .82rem; color: #6b4e5e; line-height: 1.55; margin: 0; }
.sp-hiw-flow-arrow {
  font-size: 1.8rem; color: var(--rose, #FB7A8E); padding: 0 4px; margin-top: 16px; flex-shrink: 0;
}
.sp-hiw-flow-note {
  margin-top: 36px; background: rgba(255,255,255,.7); backdrop-filter: blur(6px);
  border: 1.5px solid #efd8de; border-radius: 14px; padding: 16px 22px;
  display: flex; align-items: flex-start; gap: 12px;
  font-size: .92rem; color: #6b4e5e; line-height: 1.6;
}
.sp-hiw-flow-note svg { flex-shrink: 0; color: var(--blue, #6198FE); margin-top: 2px; }

/* ── 4. Profile section ── */
.sp-hiw-profile-section { background: #fff; }
.sp-hiw-profile-split { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
.sp-hiw-profile-left .sp-h2 { margin-bottom: 16px; }
.sp-hiw-profile-left .sp-lead { margin-bottom: 30px; }
.sp-hiw-profile-items { display: flex; flex-direction: column; gap: 16px; }
.sp-hiw-profile-item {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 18px; background: #fdf5f7;
  border: 1px solid #efd8de; border-radius: 12px;
}
.sp-hiw-profile-item-icon { font-size: 1.4rem; flex-shrink: 0; width: 32px; text-align: center; margin-top: 2px; }
.sp-hiw-profile-item strong { display: block; font-size: .95rem; color: var(--dark, #3d2e38); margin-bottom: 2px; }
.sp-hiw-profile-item span  { font-size: .82rem; color: #6b4e5e; line-height: 1.4; }

/* Profile mockup (browser) */
.sp-hiw-profile-mockup {
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 20px 60px rgba(50,20,40,.15), 0 2px 8px rgba(0,0,0,.06);
  border: 1.5px solid #efd8de;
}
.sp-hiw-pm-bar {
  background: #f5f5f5; padding: 10px 14px;
  display: flex; align-items: center; gap: 6px; border-bottom: 1px solid #e8e8e8;
}
.sp-hiw-pm-dot { width: 11px; height: 11px; border-radius: 50%; background: #ddd; }
.sp-hiw-pm-dot:nth-child(1){ background: #ff6b6b; }
.sp-hiw-pm-dot:nth-child(2){ background: #ffd93d; }
.sp-hiw-pm-dot:nth-child(3){ background: #6bcb77; }
.sp-hiw-pm-url { flex: 1; background: #fff; border-radius: 6px; padding: 4px 10px; font-size: .72rem; color: #888; margin-left: 8px; }
.sp-hiw-pm-body { background: #fdf5f7; padding: 24px; }
.sp-hiw-pm-header { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.sp-hiw-pm-avatar { font-size: 2.4rem; background: #fce4e8; border-radius: 50%; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; }
.sp-hiw-pm-info h3 { font-family: var(--font-head), serif; font-size: 1.5rem; font-weight: 700; color: var(--dark); margin: 0 0 4px; }
.sp-hiw-pm-info p  { font-size: .82rem; color: #6b4e5e; margin: 0; }
.sp-hiw-pm-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.sp-hiw-pm-tags span { background: #fff; border: 1px solid #efd8de; border-radius: 20px; padding: 4px 10px; font-size: .78rem; color: #6b4e5e; }
.sp-hiw-pm-note { background: #fff8e1; border: 1px solid #ffe082; border-radius: 10px; padding: 10px 14px; font-size: .82rem; color: #6b4e5e; margin-bottom: 14px; }
.sp-hiw-pm-call, .sp-hiw-pm-loc {
  display: block; width: 100%; border: none; border-radius: 12px;
  padding: 12px; font-size: .9rem; font-weight: 700; cursor: pointer;
  margin-bottom: 8px; font-family: inherit;
}
.sp-hiw-pm-call { background: var(--rose, #FB7A8E); color: #fff; }
.sp-hiw-pm-loc  { background: #fff; color: var(--blue, #6198FE); border: 1.5px solid var(--blue, #6198FE); }

/* ── 5. Compare table ── */
.sp-hiw-compare-section { background: #fdf5f7; }
.sp-hiw-compare-table { border-radius: 16px; overflow: hidden; border: 1.5px solid #efd8de; }
.sp-hiw-ct-row { display: grid; grid-template-columns: 2fr 1.2fr 1fr 1fr; }
.sp-hiw-ct-header { background: var(--dark, #3d2e38); }
.sp-hiw-ct-header .sp-hiw-ct-cell { color: #fff; font-weight: 700; font-size: .88rem; }
.sp-hiw-ct-header .sp-hiw-ct-highlight { background: var(--rose, #FB7A8E); color: #2D0010; }
.sp-hiw-ct-cell {
  padding: 14px 18px; font-size: .88rem; color: #6b4e5e;
  border-bottom: 1px solid #efd8de; border-right: 1px solid #efd8de;
  display: flex; align-items: center;
}
.sp-hiw-ct-row:last-child .sp-hiw-ct-cell { border-bottom: none; }
.sp-hiw-ct-cell:last-child { border-right: none; }
.sp-hiw-ct-label { font-weight: 600; color: var(--dark, #3d2e38); background: #fff; }
.sp-hiw-ct-highlight { background: #fff5f7; font-weight: 700; color: var(--dark, #3d2e38); }
.sp-hiw-ct-row:nth-child(even) .sp-hiw-ct-cell { background: rgba(255,255,255,.5); }
.sp-hiw-ct-row:nth-child(even) .sp-hiw-ct-highlight { background: #fce4e8; }

/* ── 6. Testimonials ── */
.sp-hiw-testi-section { background: #fff; }
.sp-hiw-testi-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.sp-hiw-testi-card {
  background: #fdf5f7; border: 1.5px solid #efd8de; border-radius: 16px; padding: 24px;
  transition: box-shadow .2s;
}
.sp-hiw-testi-card:hover { box-shadow: 0 8px 32px rgba(251,122,142,.15); }
.sp-hiw-testi-stars { color: var(--rose, #FB7A8E); font-size: 1rem; margin-bottom: 12px; }
.sp-hiw-testi-quote { font-size: .97rem; color: #6b4e5e; line-height: 1.65; margin: 0 0 18px; font-style: italic; }
.sp-hiw-testi-author { display: flex; align-items: center; gap: 10px; }
.sp-hiw-testi-pet { font-size: 1.5rem; background: #fce4e8; border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sp-hiw-testi-author strong { display: block; font-size: .92rem; color: var(--dark, #3d2e38); }
.sp-hiw-testi-author span  { font-size: .8rem; color: #b08090; }

/* ── 7. CTA ── */
.sp-hiw-cta-section {
  background: linear-gradient(135deg, var(--dark, #3d2e38) 0%, #2d1f28 100%);
  padding: 80px 0;
}
.sp-hiw-cta-inner { text-align: center; max-width: 680px; margin: 0 auto; }
.sp-hiw-cta-icon { font-size: 3rem; margin-bottom: 20px; }
.sp-hiw-cta-inner h2 {
  font-family: var(--font-head), serif; font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 600; color: #fff; margin: 0 0 16px;
}
.sp-hiw-cta-inner p { font-size: 1.05rem; color: rgba(255,255,255,.75); margin-bottom: 32px; line-height: 1.6; }
.sp-hiw-cta-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 28px; }
.sp-hiw-cta-trust {
  display: flex; gap: 18px; justify-content: center; flex-wrap: wrap;
  font-size: .82rem; color: rgba(255,255,255,.6);
}
.sp-hiw-cta-trust span::before { content: ''; }

/* Button 2 în CTA — outline alb explicit, garantat vizibil pe orice fundal întunecat */
.sp-hiw-cta-btn2 {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 14px 28px !important;
  border-radius: 99px !important;
  font-weight: 700 !important;
  font-size: .95rem !important;
  text-decoration: none !important;
  color: #ffffff !important;
  background: transparent !important;
  border: 2px solid rgba(255,255,255,.65) !important;
  transition: background .2s, border-color .2s !important;
  white-space: nowrap !important;
}
.sp-hiw-cta-btn2:hover {
  background: rgba(255,255,255,.12) !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .sp-hiw-hero-inner { grid-template-columns: 1fr; }
  .sp-hiw-hero-visual { display: none; }
  .sp-hiw-profile-split { grid-template-columns: 1fr; gap: 40px; }
  .sp-hiw-testi-grid { grid-template-columns: 1fr; }
  .sp-hiw-ct-row { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
}
@media (max-width: 680px) {
  .sp-hiw-steps { max-width: 100%; }
  .sp-hiw-step { grid-template-columns: 40px 16px 1fr; }
  .sp-hiw-step-num { width: 40px; height: 40px; font-size: 1rem; }
  .sp-hiw-step-connector { left: 19px; }
  .sp-hiw-step-card { grid-template-columns: 1fr; padding: 18px; margin-left: 12px; }
  .sp-hiw-step-icon { width: 44px; height: 44px; }
  .sp-hiw-flow { flex-direction: column; align-items: flex-start; }
  .sp-hiw-flow-arrow { transform: rotate(90deg); margin: 0 auto; }
  .sp-hiw-flow-step { flex-direction: row; text-align: left; gap: 14px; width: 100%; }
  .sp-hiw-flow-icon { margin-bottom: 0; flex-shrink: 0; }
  .sp-hiw-ct-row { grid-template-columns: 1.2fr 1fr; }
  .sp-hiw-ct-cell:nth-child(3),
  .sp-hiw-ct-cell:nth-child(4) { display: none; }
  .sp-hiw-ct-header .sp-hiw-ct-cell:nth-child(3),
  .sp-hiw-ct-header .sp-hiw-ct-cell:nth-child(4) { display: none; }
  .sp-hiw-hero-stats { gap: 8px; }
  .sp-hiw-stat { padding: 0 8px; }
}


/* ── HIW Steps FIXES — content visibility ── */
.sp-hiw-step {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 0 !important;
  position: relative !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
.sp-hiw-step-num {
  position: relative !important;
  z-index: 2 !important;
  flex-shrink: 0 !important;
  margin-top: 0 !important;
}
.sp-hiw-step-connector {
  position: absolute !important;
  left: 25px !important;
  top: 52px !important;
  bottom: -28px !important;
  width: 2px !important;
  z-index: 1 !important;
  background: linear-gradient(180deg, #FB7A8E 0%, #efd8de 100%) !important;
}
.sp-hiw-step:last-child .sp-hiw-step-connector { display: none !important; }
.sp-hiw-step-card {
  margin-left: 20px !important;
  margin-bottom: 32px !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: row !important;
  gap: 20px !important;
  align-items: flex-start !important;
  min-width: 0 !important;
}
.sp-hiw-step-icon {
  flex-shrink: 0 !important;
  min-width: 56px !important;
}
.sp-hiw-step-content {
  flex: 1 !important;
  min-width: 0 !important;
}
.sp-hiw-step-content h3 {
  font-size: 1.2rem !important;
  margin: 0 0 10px !important;
  line-height: 1.3 !important;
}
.sp-hiw-step-content p {
  margin: 0 0 12px !important;
  font-size: .93rem !important;
  line-height: 1.65 !important;
}
.sp-hiw-step-detail {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  margin-bottom: 12px !important;
}
.sp-hiw-step-detail span {
  font-size: .83rem !important;
  color: #5c4060 !important;
  line-height: 1.4 !important;
}

@media (max-width: 640px) {
  .sp-hiw-step-card {
    flex-direction: column !important;
    gap: 12px !important;
    padding: 16px !important;
  }
  .sp-hiw-step-num { width: 38px !important; height: 38px !important; font-size: .95rem !important; }
  .sp-hiw-step-connector { left: 18px !important; top: 38px !important; }
  .sp-hiw-steps { max-width: 100% !important; padding: 0 4px !important; }
}

/* ══ BREADCRUMBS ══ */
.sp-breadcrumbs-wrap {
    background: var(--bg, #fffdf8);
    border-bottom: 1px solid rgba(200,121,65,.1);
    padding: 10px 0;
}
.sp-breadcrumbs-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 40px;
}
.sp-breadcrumbs,
.sp-breadcrumbs-wrap nav,
.breadcrumbs,
#breadcrumbs {
    font-size: .8rem;
    color: var(--muted, #9e7a90);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}
.sp-breadcrumbs a,
.sp-breadcrumbs-wrap nav a,
.breadcrumbs a {
    color: var(--muted, #9e7a90);
    text-decoration: none;
    transition: color .15s;
}
.sp-breadcrumbs a:hover,
.sp-breadcrumbs-wrap nav a:hover { color: var(--caramel, #C87941); }
.sp-breadcrumbs span,
.sp-breadcrumbs-wrap nav span { color: var(--dark, #3d2e38); font-weight: 600; }
.sp-breadcrumbs .breadcrumb_last { color: var(--dark, #3d2e38); font-weight: 600; }
@media(max-width:768px) {
    .sp-breadcrumbs-inner { padding: 0 16px; }
    .sp-breadcrumbs-wrap { padding: 8px 0; }
}

/* ══ PAGE TITLE BAR (full-width pages cu titlu) ══ */
.sp-page-title-bar {
    background: linear-gradient(135deg, #fdf5ff 0%, #f5eeff 100%);
    border-bottom: 1px solid rgba(200,121,65,.1);
    padding: 40px 0 32px;
}
.sp-page-title-full {
    font-family: var(--font-head, 'Cormorant Garamond', serif);
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 400;
    color: var(--dark, #3d2e38);
    margin: 0;
    line-height: 1.2;
}
@media(max-width:768px) {
    .sp-page-title-bar { padding: 28px 0 20px; }
}

/* ══ Elimină spațiul dintre ultimul shortcode și footer ══ */
.site-main > section:last-of-type,
.site-main > .sp-section:last-of-type,
.site-main > [class*="sp-"]:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}
.site-main > .sp-wrap:last-child {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* ══════════════════════════════════════
   FIX 2 — FAQ cu layout 2 coloane
══════════════════════════════════════ */
.sp-faq-layout {
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: stretch;
}
/* sp-faq-left override kept for pet card only */
.sp-faq-left { display: flex; flex-direction: column; gap: 28px; }
.sp-faq-eyebrow-wrap .sp-h2 { margin-bottom: 12px; }
.sp-faq-eyebrow-wrap .sp-lead { font-size: .9rem; }

/* Pet card */
.sp-faq-pet-card {
    background: linear-gradient(135deg, #7B5EA7 0%, #5c2d6e 100%);
    border-radius: 24px;
    padding: 28px 24px;
    color: white;
    position: relative;
    overflow: hidden;
}
.sp-faq-pet-emoji {
    font-size: 2.5rem;
    margin-bottom: 12px;
    display: block;
}
.sp-faq-pet-title {
    font-family: var(--font-head, 'Cormorant Garamond', serif);
    font-size: 1.3rem;
    font-weight: 500;
    color: white;
    margin: 0 0 8px;
}
.sp-faq-pet-text {
    font-size: .82rem;
    color: rgba(255,255,255,.75);
    line-height: 1.6;
    margin: 0 0 20px;
}
.sp-faq-pet-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: white;
    color: #5c2d6e;
    font-weight: 700;
    font-size: .82rem;
    padding: 9px 18px;
    border-radius: 99px;
    text-decoration: none;
    transition: all .2s;
    margin-bottom: 20px;
}
.sp-faq-pet-btn:hover { background: #f5eeff; transform: translateY(-2px); }
.sp-faq-pet-stats {
    display: flex;
    align-items: center;
    gap: 0;
    background: rgba(255,255,255,.12);
    border-radius: 12px;
    overflow: hidden;
}
.sp-faq-pet-stat {
    flex: 1;
    padding: 10px 12px;
    text-align: center;
}
.sp-faq-pet-stat span {
    display: block;
    font-size: 1.1rem;
    font-weight: 700;
    color: white;
}
.sp-faq-pet-stat small {
    font-size: .65rem;
    color: rgba(255,255,255,.6);
    text-transform: uppercase;
    letter-spacing: .06em;
}
.sp-faq-pet-stat-div {
    width: 1px;
    height: 32px;
    background: rgba(255,255,255,.2);
}
/* Floating pet decorations */
.sp-faq-deco {
    position: absolute;
    font-size: 1.8rem;
    opacity: .15;
    pointer-events: none;
}
.sp-faq-deco-1 { top: 12px; right: 16px; transform: rotate(15deg); }
.sp-faq-deco-2 { bottom: 48px; right: 20px; transform: rotate(-10deg); }
.sp-faq-deco-3 { top: 50%; right: 14px; transform: translateY(-50%) rotate(5deg); }

/* FAQ right column — remove old centered heading */
.sp-faq-right .sp-faq-list { margin-top: 0; }

/* Mobile FAQ */
@media (max-width: 860px) {
    .sp-faq-layout { grid-template-columns: 1fr; gap: 32px; }
    .sp-faq-left { flex-direction: column-reverse; }
    .sp-faq-pet-card { padding: 20px; }
}


/* ══════════════════════════════════════
   FIX 3 — NFC Banner creativ
══════════════════════════════════════ */
.sp-hiw-nfc-banner {
    margin-top: 40px;
    background: linear-gradient(135deg, #5c2d6e 0%, #7B5EA7 60%, #C87941 100%);
    border-radius: 20px;
    overflow: hidden;
}
.sp-hiw-nfc-banner-inner {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 40px;
    align-items: center;
    padding: 32px 36px;
}
/* Phones + signal animation */
.sp-hiw-nfc-phones {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.sp-hiw-nfc-phone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: rgba(255,255,255,.15);
    border: 1.5px solid rgba(255,255,255,.25);
    border-radius: 14px;
    padding: 12px 14px;
    min-width: 60px;
}
.sp-hiw-nfc-phone span { font-size: 1.8rem; line-height: 1; }
.sp-hiw-nfc-phone small {
    font-size: .6rem;
    font-weight: 700;
    color: rgba(255,255,255,.7);
    text-transform: uppercase;
    letter-spacing: .07em;
}
/* Signal waves */
.sp-hiw-nfc-signal {
    display: flex;
    align-items: center;
    gap: 3px;
}
.sp-hiw-nfc-signal span {
    display: block;
    width: 3px;
    border-radius: 99px;
    background: rgba(255,255,255,.5);
    animation: sp-signal-pulse 1.2s ease-in-out infinite;
}
.sp-hiw-nfc-signal span:nth-child(1) { height: 8px;  animation-delay: 0s; }
.sp-hiw-nfc-signal span:nth-child(2) { height: 14px; animation-delay: .15s; }
.sp-hiw-nfc-signal span:nth-child(3) { height: 20px; animation-delay: .3s; }
.sp-hiw-nfc-signal--r span { animation-direction: reverse; }
@keyframes sp-signal-pulse {
    0%, 100% { opacity: .25; }
    50%       { opacity: 1; }
}
/* NFC chip center */
.sp-hiw-nfc-chip {
    background: rgba(255,255,255,.18);
    border: 2px solid rgba(255,255,255,.4);
    border-radius: 50%;
    width: 52px; height: 52px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
/* Text side */
/* badge moved to end of file with !important overrides */
.sp-hiw-nfc-text p {
    font-size: .9rem;
    color: rgba(255,255,255,.85);
    line-height: 1.65;
    margin: 0;
}
.sp-hiw-nfc-text strong { color: white; }

@media (max-width: 680px) {
    .sp-hiw-nfc-banner-inner {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 24px 20px;
    }
    .sp-hiw-nfc-phones { justify-content: center; }
}


/* ══════════════════════════════════════
   FIX 4 — Profile mockup full height
══════════════════════════════════════ */
.sp-hiw-profile-split { align-items: stretch !important; }

.sp-hiw-profile-right--stretch {
    display: flex;
    flex-direction: column;
}
.sp-hiw-profile-mockup--full {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.sp-hiw-profile-mockup--full .sp-hiw-pm-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* ══ Profile trust cards (Fix 3) ══ */
.sp-hiw-profile-trust {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
}
.sp-hiw-profile-trust-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #fdf5f7;
    border: 1px solid #efd8de;
    border-radius: 12px;
    padding: 12px 16px;
}
.sp-hiw-profile-trust-icon {
    font-size: 1.3rem;
    flex-shrink: 0;
    width: 28px;
    text-align: center;
    margin-top: 1px;
}
.sp-hiw-profile-trust-card strong {
    display: block;
    font-size: .88rem;
    color: #3d2e38;
    margin-bottom: 2px;
}
.sp-hiw-profile-trust-card span {
    font-size: .78rem;
    color: #6b4e5e;
    line-height: 1.4;
}

/* Profile mockup — nu mai stretch, dimensiune naturala */
.sp-hiw-profile-split { align-items: start !important; }
.sp-hiw-profile-mockup--full { flex: none; }
.sp-hiw-profile-mockup--full .sp-hiw-pm-body {
    flex: none;
    display: block;
}

/* Mobile profile */
@media (max-width: 860px) {
    .sp-hiw-profile-trust { margin-top: 12px; }
}

/* ══ FAQ fixes (Fix 4) ══ */
.sp-faq-left { flex-direction: column; gap: 24px; }
.sp-faq-eyebrow-wrap { order: -1; }
.sp-faq-pet-card { margin-top: 0; }

/* Scoate stats rămase dacă există */
.sp-faq-pet-stats { display: none !important; }
.sp-faq-pet-stat-div { display: none !important; }

/* Mobile FAQ — titlu sus, card jos */
@media (max-width: 860px) {
    .sp-faq-left { flex-direction: column; }
    .sp-faq-eyebrow-wrap { order: 0; }
}

/* ══════════════════════════════════════
   STEPS v3 — Professional pet-friendly
══════════════════════════════════════ */
.sp-steps3-intro { margin-bottom: 52px; }

/* Row — flex, arrows between */
.sp-steps3-row {
    display: flex;
    align-items: stretch;
    gap: 0;
}

/* ── Card ── */
.sp-steps3-card {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 36px 28px 28px;
    background: white;
    border-radius: 24px;
    border: 1px solid rgba(200,121,65,.12);
    box-shadow: 0 2px 0 rgba(200,121,65,.08), 0 8px 32px rgba(61,46,56,.07);
    transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s;
    overflow: hidden;
}
.sp-steps3-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--step-color, #C87941);
    border-radius: 24px 24px 0 0;
}
.sp-steps3-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 2px 0 rgba(200,121,65,.08), 0 20px 48px rgba(61,46,56,.12);
}

/* Step number — absolute top right */
.sp-steps3-num {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--step-bg, #FFF8F0);
    border: 1.5px solid var(--step-border, #FAC775);
    display: flex; align-items: center; justify-content: center;
    font-size: .7rem; font-weight: 900;
    color: var(--step-color, #C87941);
    letter-spacing: -.01em;
    flex-shrink: 0;
}

/* Emoji icon */
.sp-steps3-emoji {
    font-size: 2.6rem;
    width: 80px; height: 80px;
    border-radius: 22px;
    background: var(--step-bg, #FFF8F0);
    border: 1.5px solid var(--step-border, #FAC775);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 20px;
    flex-shrink: 0;
    box-shadow: 0 4px 16px rgba(0,0,0,.06);
}

.sp-steps3-title {
    font-family: var(--font-head,'Cormorant Garamond',serif);
    font-size: 1.25rem;
    font-weight: 600;
    color: #3d2e38;
    margin: 0 0 10px;
    line-height: 1.2;
}

.sp-steps3-desc {
    font-size: .84rem;
    color: #9e7a90;
    line-height: 1.7;
    margin: 0;
    flex: 1;
}

/* Tags strip */
.sp-steps3-tags {
    list-style: none;
    margin: 20px 0 0; padding: 18px 0 0;
    display: flex; flex-direction: column; gap: 6px;
    width: 100%;
    border-top: 1px solid rgba(0,0,0,.06);
}
.sp-steps3-tags li {
    font-size: .72rem;
    font-weight: 700;
    display: flex; align-items: center; gap: 6px;
    justify-content: center;
    color: var(--step-color, #C87941);
    letter-spacing: .01em;
}
.sp-steps3-tags li svg {
    flex-shrink: 0;
    color: var(--step-color, #C87941);
}

/* ── Arrow connector ── */
.sp-steps3-arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0 4px;
    flex-shrink: 0;
    margin-top: 0;
    align-self: center;
}
.sp-steps3-arrow svg {
    filter: drop-shadow(0 2px 4px rgba(200,121,65,.25));
}
.sp-steps3-arrow-label {
    font-size: .58rem;
    font-weight: 800;
    color: #8B5E35;
    text-transform: uppercase;
    letter-spacing: .12em;
}

/* ── Progress bar ── */
.sp-steps3-progress { margin-top: 36px; }
.sp-steps3-progress-track {
    height: 3px;
    background: rgba(200,121,65,.1);
    border-radius: 99px;
    overflow: hidden;
}
.sp-steps3-progress-fill {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, #6198FE 0%, #DC92B3 33%, #C87941 66%, #1D9E75 100%);
}
.sp-steps3-progress-paws {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    padding: 0 2px;
}
.sp-steps3-paw { font-size: .85rem; opacity: .25; }
.sp-steps3-paw:last-child { opacity: 1; }

/* ── Mobile ── */
@media (max-width: 860px) {
    .sp-steps3-row { flex-direction: column; gap: 12px; }
    .sp-steps3-card { border-radius: 20px !important; }
    .sp-steps3-arrow {
        margin: 0 auto;
        padding: 4px 0;
        flex-direction: row;
        gap: 6px;
    }
    .sp-steps3-arrow svg { transform: rotate(90deg); }
    .sp-steps3-arrow-label { display: none; }
}
@media (max-width: 560px) {
    .sp-steps3-card { padding: 28px 20px 22px; }
    .sp-steps3-emoji { width: 68px; height: 68px; font-size: 2.2rem; border-radius: 18px; }
}


/* ══════════════════════════════════════
   Luna-style profile mockup (Fix 4)
══════════════════════════════════════ */
.sp-hiw-profile-intro { margin-bottom: 52px; }

.sp-hiw-profile-split2 {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 60px;
    align-items: start;
}

/* Luna profile card */
.sp-luna-profile {
    background: #FEF9F5;
    border-radius: 24px;
    overflow: hidden;
    border: 1.5px solid #f0d8c8;
    box-shadow: 0 16px 48px rgba(61,46,56,.1);
}
.sp-luna-banner {
    background: #B71C1C;
    color: white;
    text-align: center;
    padding: 12px 16px;
    font-size: .85rem;
    font-weight: 800;
    letter-spacing: .05em;
}
.sp-luna-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 28px 24px 16px;
    background: #FEF9F5;
}
.sp-luna-photo-wrap {
    width: 110px; height: 110px;
    border-radius: 50%;
    border: 3.5px solid #C87941;
    padding: 3px;
    background: white;
    margin-bottom: 12px;
}
.sp-luna-photo {
    width: 100%; height: 100%;
    border-radius: 50%;
    background: #FFF3E0;
    display: flex; align-items: center; justify-content: center;
    font-size: 3rem;
}
.sp-luna-name {
    font-family: var(--font-head,'Cormorant Garamond',serif);
    font-size: 2rem;
    font-weight: 700;
    color: #C87941;
    margin: 0;
}
.sp-luna-fields {
    padding: 8px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sp-luna-field {
    background: white;
    border-radius: 14px;
    border: 1px solid #f0d8c8;
    padding: 12px 16px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.sp-luna-field-icon {
    font-size: 1.3rem;
    flex-shrink: 0;
    width: 28px;
    text-align: center;
}
.sp-luna-field-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sp-luna-field-label {
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .1em;
    color: #6d4060;
    text-transform: uppercase;
}
.sp-luna-field-val {
    font-size: .9rem;
    font-weight: 500;
    color: #3d2e38;
    line-height: 1.4;
}
.sp-luna-btns {
    padding: 0 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sp-luna-call, .sp-luna-loc {
    width: 100%;
    border: none;
    border-radius: 14px;
    padding: 14px;
    font-size: .92rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: opacity .2s;
}
.sp-luna-call { background: #9D5E2A; color: white; }
.sp-luna-loc  { background: white; color: #1A5FD4; border: 1.5px solid #1A5FD4; }
.sp-luna-call:hover, .sp-luna-loc:hover { opacity: .85; }

/* Mobile profile */
@media (max-width: 900px) {
    .sp-hiw-profile-split2 {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    .sp-luna-profile { max-width: 420px; margin: 0 auto; }
}


/* ══════════════════════════════════════
   FAQ redesign (Fix 5) — title centered, 2 blocks
══════════════════════════════════════ */
/* ══ FAQ full-width centered fix ══ */
.sp-faq-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 40px !important;
    width: 100% !important;
    align-items: stretch !important;
}
.sp-faq-header {
    text-align: center !important;
    width: 100% !important;
}
.sp-faq-header .sp-h2 { margin-bottom: 12px; }
.sp-faq-header .sp-lead { max-width: 560px; margin: 0 auto; }

.sp-faq-body {
    display: grid !important;
    grid-template-columns: 280px 1fr !important;
    gap: 40px !important;
    align-items: start !important;
    width: 100% !important;
}
.sp-faq-left { display: flex; flex-direction: column; gap: 0; }
.sp-faq-eyebrow-wrap { display: none; }

@media (max-width: 780px) {
    .sp-faq-body { grid-template-columns: 1fr !important; }
    .sp-faq-left { order: 2; }
    .sp-faq-right { order: 1; }
}

/* ══ NFC Badge solid white — max contrast ══ */
.sp-hiw-nfc-text .sp-hiw-nfc-badge {
    display: inline-flex !important;
    position: static !important;
    align-items: center !important;
    gap: 6px !important;
    background: white !important;
    border: none !important;
    border-radius: 99px !important;
    font-size: .8rem !important;
    font-weight: 800 !important;
    padding: 8px 18px !important;
    margin-bottom: 14px !important;
    color: #5c2d6e !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.2) !important;
    top: auto !important;
    right: auto !important;
}

/* ══ Profile — equal 1fr 1fr columns, responsive ══ */
.sp-hiw-profile-split2 {
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start;
}
.sp-luna-profile {
    width: 100%;
    max-width: 100%;
}
@media (max-width: 900px) {
    .sp-hiw-profile-split2 {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }
    .sp-luna-profile { max-width: 420px !important; margin: 0 auto !important; }
}
@media (max-width: 560px) {
    .sp-luna-profile { max-width: 100% !important; }
    .sp-luna-hero { padding: 20px 16px 12px; }
    .sp-luna-fields { padding: 6px 14px 16px; gap: 6px; }
    .sp-luna-field { padding: 10px 12px; }
    .sp-luna-btns { padding: 0 14px 18px; }
}


/* ══════════════════════════════════════
   NFC Banner contrast fix (Fix 3)
══════════════════════════════════════ */
.sp-hiw-nfc-banner { box-shadow: 0 8px 32px rgba(92,45,110,.25); }
/* Badge — fundal alb solid, text violet — contrast maxim pe orice gradient */
.sp-hiw-nfc-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: white !important;
    border: none !important;
    border-radius: 99px !important;
    font-size: .78rem !important;
    font-weight: 800 !important;
    padding: 7px 16px !important;
    margin-bottom: 14px !important;
    color: #5c2d6e !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.15) !important;
    letter-spacing: .01em !important;
}
.sp-hiw-nfc-text p { color: rgba(255,255,255,.92) !important; font-size: .92rem !important; }
.sp-hiw-nfc-phone {
    background: rgba(255,255,255,.2) !important;
    border: 2px solid rgba(255,255,255,.4) !important;
}
.sp-hiw-nfc-phone svg { color: white; }
.sp-hiw-nfc-phone small { color: rgba(255,255,255,.85) !important; }

/* ══════════════════════════════════════
   TESTIMONIALS — 3 visible + paginated scroll
══════════════════════════════════════ */
.sp-testi-header { margin-bottom: 40px; }
.sp-testi-stars-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
    font-size: 1.1rem;
    color: #C87941;
}
.sp-testi-rating-text {
    font-size: .82rem;
    font-weight: 600;
    color: #9e7a90;
    font-family: var(--font-body, 'DM Sans', sans-serif);
}

/* Track — flex row, cards side by side */
.sp-testi-scroll-wrap { overflow: hidden; }
.sp-testi-track {
    display: flex;
    gap: 20px;
    transition: none;
}

/* Individual card */
.sp-testi-card {
    flex: 1;
    min-width: 0;
    background: white;
    border: 1.5px solid rgba(200,121,65,.12);
    border-radius: 20px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: 0 4px 20px rgba(61,46,56,.06);
    transition: box-shadow .25s, transform .25s;
    animation: sp-testi-in .4s ease both;
}
.sp-testi-card:hover {
    box-shadow: 0 8px 32px rgba(61,46,56,.1);
    transform: translateY(-2px);
}
@keyframes sp-testi-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.sp-testi-card-top {
    display: flex;
    align-items: center;
    gap: 12px;
}
.sp-testi-avatar {
    font-size: 1.8rem;
    width: 48px; height: 48px;
    background: #fdf5f7;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    border: 2px solid rgba(200,121,65,.15);
}
.sp-testi-meta { flex: 1; min-width: 0; }
.sp-testi-name {
    font-weight: 700;
    font-size: .88rem;
    color: #3d2e38;
}
.sp-testi-loc {
    font-size: .75rem;
    color: #9e7a90;
    margin-top: 1px;
}
.sp-testi-stars {
    color: #C87941;
    font-size: .85rem;
    letter-spacing: 2px;
    flex-shrink: 0;
}
.sp-testi-text {
    font-family: var(--font-head, 'Cormorant Garamond', serif);
    font-size: 1.05rem;
    font-style: italic;
    color: #3d2e38;
    line-height: 1.6;
    margin: 0;
    flex: 1;
}

/* Controls */
.sp-testi-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 28px;
}
.sp-testi-btn {
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 1.5px solid rgba(200,121,65,.3);
    background: white;
    color: #C87941;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: all .2s;
    flex-shrink: 0;
}
.sp-testi-btn:hover:not(:disabled) {
    background: #C87941;
    color: white;
    border-color: #C87941;
}
.sp-testi-btn:disabled {
    opacity: .3;
    cursor: default;
}
.sp-testi-dots {
    display: flex;
    gap: 6px;
    align-items: center;
}
.sp-testi-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(200,121,65,.25);
    border: none;
    cursor: pointer;
    transition: all .2s;
    padding: 0;
}
.sp-testi-dot--active {
    background: #C87941;
    width: 24px;
    border-radius: 4px;
}

/* Mobile — 1 card visible */
@media (max-width: 640px) {
    .sp-testi-track { gap: 0; }
    .sp-testi-card { padding: 18px; }
    .sp-testi-text { font-size: .95rem; }
}

/* ══ FOOTER MOBILE CENTERING — override tot ══ */
@media (max-width: 900px) {
    .footer-col,
    .footer-col h4,
    .footer-col ul,
    .footer-col li,
    .footer-col a {
        text-align: center !important;
    }
    .footer-col ul {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    .footer-brand-col {
        text-align: center !important;
        align-items: center !important;
    }
}

/* ══════════════════════════════════════
   MOBILE NAV — redesign complet centrat
══════════════════════════════════════ */

.sp-mob-nav {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100000;
}
.sp-mob-nav.open { display: block; }

/* Overlay — blur puternic, fara background solid */
.sp-mob-nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 8, 30, 0.30);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    z-index: 100000;
}

/* Panel — right-side drawer, ingust, FIXED, fara background solid */
.sp-mob-nav-panel {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: 76vw !important;
    max-width: 300px !important;
    z-index: 100001;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    animation: sp-mob-slide-right .3s cubic-bezier(.16,1,.3,1);
    /* Glass — background cu opacitate MICA ca sa se vada blur */
    background: rgba(255,255,255,0.18) !important;
    backdrop-filter: blur(40px) saturate(220%) brightness(1.12) !important;
    -webkit-backdrop-filter: blur(40px) saturate(220%) brightness(1.12) !important;
    border-left: 1px solid rgba(255,255,255,0.45);
    box-shadow: -8px 0 40px rgba(61,46,56,0.18), inset 1px 0 0 rgba(255,255,255,0.6);
}
/* Specular highlight stanga */
.sp-mob-nav-panel::before {
    content: '';
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 1px;
    background: linear-gradient(180deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.2) 50%, transparent 100%);
    pointer-events: none;
    z-index: 0;
}
@keyframes sp-mob-slide-right {
    from { transform: translateX(100%); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}

/* Top bar */
.sp-mob-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 16px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.25);
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}
.sp-mob-logo img { height: 30px; width: auto; display: block; }
.sp-mob-logo span { font-family: var(--font-head,'Cormorant Garamond',serif); font-size: .9rem; font-weight: 700; color: #3d2e38; }
.sp-mob-close {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: rgba(255,255,255,0.35);
    border: 1px solid rgba(255,255,255,0.5);
    color: #3d2e38;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-size: .8rem;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    flex-shrink: 0;
}

/* Links — o singura coloana */
.sp-mob-links {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 12px 0;
    position: relative;
    z-index: 1;
    /* NO flex:1 — permite CTA să fie imediat dedesubt */
}
.sp-mob-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    text-decoration: none;
    color: rgba(30,15,35,0.82);
    font-family: var(--font-body,'DM Sans',sans-serif);
    font-size: .9rem;
    font-weight: 600;
    border-radius: 12px;
    background: rgba(255,255,255,0.22);
    border: 1px solid rgba(255,255,255,0.4);
    transition: all .18s;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.sp-mob-link:hover, .sp-mob-link:active {
    background: rgba(255,255,255,0.45);
    border-color: rgba(200,121,65,0.4);
    color: #3d2e38;
}
.sp-mob-link-icon { font-size: 1.05rem; flex-shrink: 0; }
.sp-mob-link-text { flex: 1; }
.sp-mob-link-arr { color: rgba(200,121,65,0.5); font-size: .75rem; }

/* CTA — imediat sub linkuri, separator subtil */
.sp-mob-cta {
    padding: 10px 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
    z-index: 1;
    margin-top: 6px;
    border-top: 1px solid rgba(255,255,255,0.28);
}
.sp-mob-cta-primary {
    display: block; width: 100%;
    padding: 11px 16px;
    border-radius: 99px;
    background: linear-gradient(135deg, #C87941, #e8952a);
    color: white; font-weight: 700; font-size: .84rem;
    text-align: center; text-decoration: none;
    box-shadow: 0 4px 16px rgba(200,121,65,.4);
}
.sp-mob-cta-sec {
    display: block; width: 100%;
    padding: 9px 16px;
    border-radius: 99px;
    background: rgba(255,255,255,0.25);
    color: #3d2e38;
    border: 1px solid rgba(255,255,255,0.5);
    font-weight: 600; font-size: .82rem;
    text-align: center; text-decoration: none;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Tagline */
.sp-mob-tagline {
    padding: 8px 16px 20px;
    text-align: center;
    font-family: var(--font-head,'Cormorant Garamond',serif);
    font-style: italic;
    font-size: .75rem;
    color: rgba(61,46,56,0.45);
    position: relative;
    z-index: 1;
}



/* ══════════════════════════════════════
   SHOP PAGE — Hero + Filters + Mid Banner
══════════════════════════════════════ */
.sp-shop-hero {
    background: linear-gradient(135deg, #fdf5ff 0%, #fff0f7 50%, #fff8f0 100%);
    border-bottom: 1px solid rgba(200,121,65,.1);
    padding: 56px 0 48px;
}
.sp-shop-hero-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 40px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 48px;
    align-items: center;
}
.sp-shop-hero-text .sp-eyebrow { margin-bottom: 8px; }
.sp-shop-hero-text .sp-h2 { margin-bottom: 12px; font-size: clamp(1.8rem,3.5vw,2.8rem); }
.sp-shop-hero-text .sp-lead { margin-bottom: 24px; color: #9e7a90; }
.sp-shop-hero-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.sp-shop-hero-trust span {
    background: white;
    border: 1px solid rgba(200,121,65,.2);
    border-radius: 99px;
    padding: 6px 14px;
    font-size: .78rem;
    font-weight: 600;
    color: #3d2e38;
}
/* Visual cards */
.sp-shop-hero-visual {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.sp-shop-hero-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: white;
    border-radius: 16px;
    padding: 14px 20px;
    border: 1.5px solid rgba(200,121,65,.15);
    box-shadow: 0 4px 16px rgba(61,46,56,.07);
    min-width: 200px;
    transition: transform .2s;
}
.sp-shop-hero-card:hover { transform: translateX(-4px); }
.sp-shop-hero-card span:first-child { font-size: 1.6rem; }
.sp-shop-hero-card strong { flex: 1; font-size: .9rem; color: #3d2e38; }
.sp-shop-hero-price { font-size: .78rem; font-weight: 700; color: #C87941; }
.sp-shop-hero-card--1 { border-color: rgba(97,152,254,.2); }
.sp-shop-hero-card--2 { border-color: rgba(220,146,179,.2); }
.sp-shop-hero-card--3 { border-color: rgba(200,121,65,.2); }

/* Filter pills */
.sp-shop-filters {
    background: white;
    border-bottom: 1px solid rgba(200,121,65,.08);
    padding: 16px 0;
    position: sticky;
    top: 70px;
    z-index: 100;
}
.sp-shop-filters-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}
.sp-shop-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 99px;
    border: 1.5px solid rgba(200,121,65,.2);
    background: white;
    font-size: .82rem;
    font-weight: 600;
    color: #6b4e5e;
    text-decoration: none;
    transition: all .18s;
    cursor: pointer;
}
.sp-shop-filter-pill:hover {
    border-color: #C87941;
    color: #C87941;
    background: #fff8f0;
}
.sp-shop-filter-pill.active {
    background: #C87941;
    color: white;
    border-color: #C87941;
}
.sp-shop-filter-count {
    background: rgba(255,255,255,.3);
    border-radius: 99px;
    padding: 1px 7px;
    font-size: .7rem;
}
.sp-shop-filter-pill.active .sp-shop-filter-count { background: rgba(255,255,255,.25); }

/* Mid-page banner */
.sp-shop-mid-banner {
    background: linear-gradient(135deg, #5c2d6e 0%, #7B5EA7 100%);
    padding: 28px 0;
    margin: 0;
}
.sp-shop-mid-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}
.sp-shop-mid-icon { font-size: 2rem; flex-shrink: 0; }
.sp-shop-mid-text {
    flex: 1;
    color: rgba(255,255,255,.9);
    font-size: .9rem;
    line-height: 1.5;
}
.sp-shop-mid-text strong { color: white; display: block; margin-bottom: 2px; }
.sp-shop-mid-btn {
    flex-shrink: 0;
    background: white;
    color: #5c2d6e;
    font-weight: 700;
    font-size: .82rem;
    padding: 10px 20px;
    border-radius: 99px;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity .2s;
}
.sp-shop-mid-btn:hover { opacity: .9; }

/* Mobile shop */
@media (max-width: 900px) {
    .sp-shop-hero-inner { grid-template-columns: 1fr; gap: 28px; }
    .sp-shop-hero-visual { flex-direction: row; flex-wrap: wrap; }
    .sp-shop-hero-card { min-width: calc(50% - 5px); flex: 1; }
    .sp-shop-hero { padding: 36px 0 28px; }
    .sp-shop-filters { top: 62px; }
    .sp-shop-filters-inner { padding: 0 16px; }
    .sp-shop-mid-inner { padding: 0 20px; }
    .sp-shop-hero-inner { padding: 0 20px; }
}
@media (max-width: 560px) {
    .sp-shop-hero-visual { display: none; }
    .sp-shop-hero { padding: 28px 0 20px; }
    .sp-shop-hero-inner { padding: 0 16px; }
}


/* ══════════════════════════════════════
   PRODUCT PAGE — Social Proof + Tabs + Finder + FAQ + Upsell
══════════════════════════════════════ */

/* Social proof near price */
.sp-sprod-social-proof {
    background: linear-gradient(135deg, #f5eeff, #fdf0f7);
    border: 1.5px solid rgba(123,94,167,.15);
    border-radius: 14px;
    padding: 16px 20px;
    margin: 16px 0;
}
.sp-sprod-sp-stars { color: #C87941; font-size: 1rem; margin-bottom: 6px; letter-spacing: 2px; }
.sp-sprod-sp-quote {
    font-family: var(--font-head,'Cormorant Garamond',serif);
    font-style: italic;
    font-size: 1rem;
    color: #3d2e38;
    margin-bottom: 6px;
    line-height: 1.5;
}
.sp-sprod-sp-author { font-size: .75rem; color: #9e7a90; font-weight: 600; }
.sp-sprod-sp-author span { color: #1D9E75; }

/* Tabs */
.sp-sprod-extras { background: #fffdf8; }
.sp-sprod-tabs {
    margin-top: 48px;
    margin-bottom: 56px;
    position: relative;
    clear: both;
}

/* ── Frost Glass nav — același stil ca meniul mobil ── */
.sp-sprod-tab-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 5px;
    margin-bottom: 0;
    background: rgba(255,255,255,0.18);
    backdrop-filter: blur(40px) saturate(220%) brightness(1.12);
    -webkit-backdrop-filter: blur(40px) saturate(220%) brightness(1.12);
    border-radius: 16px 16px 0 0;
    border: 1px solid rgba(255,255,255,0.45);
    border-bottom: none;
    box-shadow: 0 -2px 16px rgba(61,46,56,0.06), inset 0 1px 0 rgba(255,255,255,0.7);
    position: relative;
    isolation: isolate;
}
.sp-sprod-tab-nav::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 14px 14px 0 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.1) 35%, transparent 65%);
    pointer-events: none;
    z-index: 0;
}

/* ── Fiecare tab — chenar propriu frost glass ── */
.sp-sprod-tab-btn {
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    padding: 9px 18px;
    font-family: var(--font-body,'DM Sans',sans-serif);
    font-size: .83rem;
    font-weight: 600;
    color: rgba(61,46,56,0.62);
    background: rgba(255,255,255,0.22);
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 11px;
    cursor: pointer;
    transition: all .22s cubic-bezier(.16,1,.3,1);
    white-space: nowrap;
    letter-spacing: .01em;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.sp-sprod-tab-btn:hover {
    color: #C87941;
    background: rgba(255,255,255,0.42);
    border-color: rgba(200,121,65,0.35);
}
.sp-sprod-tab-btn.active {
    color: #3d2e38;
    font-weight: 700;
    background: rgba(255,255,255,0.88);
    border: 1px solid rgba(200,121,65,0.30);
    box-shadow: 0 2px 10px rgba(61,46,56,0.10), inset 0 1px 0 rgba(255,255,255,1);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

/* ── Panel — chenar conectat la nav ── */
.sp-sprod-tab-panel { display: none; }
.sp-sprod-tab-panel.active {
    display: block;
    animation: sp-tab-in .3s cubic-bezier(.16,1,.3,1);
    background: white;
    border: 1px solid rgba(255,255,255,0.45);
    border-top: none;
    border-radius: 0 0 16px 16px;
    padding: 32px 28px 32px 40px;
    box-shadow: 0 8px 32px rgba(61,46,56,0.07);
    overflow: visible;
    width: 100%;
    box-sizing: border-box;
    contain: layout;
}
@keyframes sp-tab-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

.sp-sprod-details-content {
    font-size: .93rem; color: #6b4f62; line-height: 1.9;
    max-width: 100%; word-break: break-word; overflow-wrap: break-word;
}
.sp-sprod-details-content h2,.sp-sprod-details-content h3 { font-family: 'Cormorant Garamond',serif; color: #3d2e38; margin-bottom: 12px; }
.sp-sprod-details-content p { margin-bottom: 14px; }
.sp-sprod-details-content ol { padding-left: 24px; margin-bottom: 14px; }
.sp-sprod-details-content ul { padding-left: 24px; margin-bottom: 14px; }
.sp-sprod-details-content li { margin-bottom: 4px; }
.sp-sprod-details-content table,.sp-sprod-tab-panel table {
    width: 100%; max-width: 100%; border-collapse: collapse; font-size: .85rem;
}
.sp-sprod-details-content table td,.sp-sprod-details-content table th,
.sp-sprod-tab-panel table td,.sp-sprod-tab-panel table th {
    padding: 8px 10px; border: 1px solid rgba(200,121,65,0.15);
    word-break: break-word; vertical-align: top;
}
.sp-sprod-details-content,.sp-sprod-tab-panel > * { max-width: 100%; box-sizing: border-box; }

@media (max-width: 900px) {
    .sp-sprod-tab-nav { gap: 4px; padding: 4px; }
    .sp-sprod-tab-btn { padding: 8px 13px; font-size: .8rem; border-radius: 9px; }
    .sp-sprod-tab-panel.active { padding: 24px 20px; }
    .sp-sprod-details-content table,.sp-sprod-tab-panel table {
        display: block; overflow-x: auto; -webkit-overflow-scrolling: touch;
    }
}
@media (max-width: 600px) {
    .sp-sprod-tabs { margin-bottom: 36px; }
    .sp-sprod-tab-nav { gap: 4px; padding: 4px; border-radius: 12px 12px 0 0; }
    .sp-sprod-tab-btn {
        padding: 8px 10px; font-size: .74rem; border-radius: 8px;
        flex: 1 1 calc(50% - 4px); text-align: center;
        justify-content: center; white-space: normal; line-height: 1.3;
    }
    .sp-sprod-tab-panel.active { padding: 20px 16px; border-radius: 0 0 12px 12px; }
}



/* What's Included grid */
.sp-sprod-included-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 12px;
}
.sp-sprod-included-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    background: white;
    border: 1.5px solid rgba(200,121,65,.1);
    border-radius: 14px;
}
.sp-sprod-included-icon { font-size: 1.5rem; flex-shrink: 0; width: 32px; text-align: center; }
.sp-sprod-included-item strong { display: block; font-size: .9rem; color: #3d2e38; margin-bottom: 3px; }
.sp-sprod-included-item span { font-size: .78rem; color: #9e7a90; line-height: 1.4; }

/* How It Works mini-steps */
.sp-sprod-how-steps {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 16px;
    text-align: center;
}
.sp-sprod-how-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px 16px;
    background: white;
    border-radius: 16px;
    border: 1.5px solid rgba(200,121,65,.08);
}
.sp-sprod-how-num {
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 1.5px solid;
    display: flex; align-items: center; justify-content: center;
    font-size: .72rem; font-weight: 900;
}
.sp-sprod-how-emoji { font-size: 2rem; }
.sp-sprod-how-step strong { font-size: .88rem; }
.sp-sprod-how-step p { font-size: .75rem; color: #9e7a90; margin: 0; line-height: 1.4; }

/* Reviews */
.sp-sprod-reviews-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 16px;
}
.sp-sprod-review-card {
    background: white;
    border: 1.5px solid rgba(200,121,65,.1);
    border-radius: 16px;
    padding: 20px;
}
.sp-sprod-review-top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.sp-sprod-review-avatar {
    width: 42px; height: 42px;
    background: #fdf5f7;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}
.sp-sprod-review-name { font-size: .82rem; font-weight: 700; color: #3d2e38; }
.sp-sprod-review-stars { color: #C87941; font-size: .8rem; margin-top: 1px; }
.sp-sprod-review-badge {
    margin-left: auto;
    background: #f0fdf4;
    color: #1D9E75;
    font-size: .65rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 99px;
    border: 1px solid #9FE1CB;
    flex-shrink: 0;
}
.sp-sprod-review-text {
    font-family: var(--font-head,'Cormorant Garamond',serif);
    font-style: italic;
    font-size: .92rem;
    color: #6b4e5e;
    line-height: 1.6;
    margin: 0;
}

/* What Your Finder Sees */
.sp-sprod-finder {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 60px;
    align-items: center;
    background: linear-gradient(135deg, #fdf5ff 0%, #fff0f7 100%);
    border-radius: 24px;
    padding: 48px;
    margin-bottom: 56px;
}
.sp-sprod-finder-text .sp-eyebrow { margin-bottom: 8px; }
.sp-h3 { font-family: var(--font-head,'Cormorant Garamond',serif); font-size: 1.8rem; font-weight: 500; color: #3d2e38; margin: 0 0 12px; }
.sp-sprod-finder-text .sp-lead { margin-bottom: 20px; color: #9e7a90; }
.sp-sprod-finder-list {
    list-style: none;
    padding: 0; margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sp-sprod-finder-list li { font-size: .88rem; font-weight: 600; color: #3d2e38; }

/* Product FAQ */
.sp-sprod-faq { margin-bottom: 56px; }
.sp-sprod-faq-list { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 8px; }
.sp-sprod-faq-item {
    background: white;
    border: 1.5px solid rgba(200,121,65,.1);
    border-radius: 14px;
    overflow: hidden;
}
.sp-sprod-faq-q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    background: none;
    border: none;
    font-family: var(--font-body,'DM Sans',sans-serif);
    font-size: .92rem;
    font-weight: 600;
    color: #3d2e38;
    cursor: pointer;
    text-align: left;
    transition: color .15s;
}
.sp-sprod-faq-q:hover { color: #C87941; }
.sp-sprod-faq-q[aria-expanded="true"] { color: #C87941; }
.sp-sprod-faq-q svg { flex-shrink: 0; transition: transform .25s; }
.sp-sprod-faq-q[aria-expanded="true"] svg { transform: rotate(45deg); }
.sp-sprod-faq-a { padding: 0 20px 16px; }
.sp-sprod-faq-a p { font-size: .85rem; color: #9e7a90; line-height: 1.6; margin: 0; }

/* Upsell */
.sp-sprod-upsell { margin-bottom: 16px; }
.sp-sprod-upsell-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 16px;
}
.sp-sprod-upsell-card {
    display: block;
    text-decoration: none;
    background: white;
    border: 1.5px solid rgba(200,121,65,.1);
    border-radius: 16px;
    overflow: hidden;
    transition: all .25s;
    box-shadow: 0 2px 12px rgba(61,46,56,.06);
}
.sp-sprod-upsell-card:hover { transform: translateY(-4px); box-shadow: 0 8px 28px rgba(61,46,56,.1); border-color: #C87941; }
.sp-sprod-upsell-card img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.sp-sprod-upsell-info { padding: 12px 14px; }
.sp-sprod-upsell-info strong { display: block; font-size: .82rem; color: #3d2e38; margin-bottom: 4px; }
.sp-sprod-upsell-info span { font-size: .82rem; font-weight: 700; color: #C87941; }

/* Mobile product extras */
@media (max-width: 900px) {
    .sp-sprod-included-grid { grid-template-columns: 1fr; }
    .sp-sprod-how-steps { grid-template-columns: repeat(2,1fr); }
    .sp-sprod-reviews-grid { grid-template-columns: 1fr; }
    .sp-sprod-finder { grid-template-columns: 1fr; gap: 32px; padding: 28px 20px; }
    .sp-sprod-finder-phone { max-width: 360px; margin: 0 auto; }
    .sp-sprod-upsell-grid { grid-template-columns: repeat(2,1fr); }
    .sp-sprod-extras { padding-left: 16px !important; padding-right: 16px !important; }
}
@media (max-width: 560px) {
    .sp-sprod-tab-btn { /* handled above */ }
    .sp-sprod-how-steps { grid-template-columns: 1fr; }
}

/* ══ Shop hero h1 ══ */
.sp-h1-shop {
    font-family: var(--font-head,'Cormorant Garamond',serif);
    font-size: clamp(1.8rem,3.5vw,2.8rem);
    font-weight: 400;
    color: var(--dark,#3d2e38);
    line-height: 1.15;
    margin: 0 0 12px;
}
.sp-shop-hero-lead {
    color: #9e7a90;
    font-size: .95rem;
    line-height: 1.65;
    margin-bottom: 24px;
    max-width: 460px;
}
.sp-shop-hero-card em {
    font-style: normal;
    font-size: .75rem;
    font-weight: 700;
    color: #C87941;
}

/* ══════════════════════════════════════════════════════════
   HEADER — Standalone Search Button (outside glass pill)
   ══════════════════════════════════════════════════════════ */
.sp-hdr-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.sp-hdr-standalone-search {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: var(--dark, #3d2e38);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .18s, color .18s;
}
.sp-hdr-standalone-search:hover {
  background: rgba(200,121,65,0.1);
  color: var(--caramel, #C87941);
}

.sp-hdr-search-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 340px;
  background: var(--white);
  border: 1.5px solid var(--bd2);
  border-radius: var(--r-md);
  box-shadow: var(--sh-md);
  z-index: 99990;
  overflow: hidden;
}

.sp-hdr-search-form {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--bd);
}

.sp-hdr-search-input {
  flex: 1;
  border: none;
  outline: none;
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: .88rem;
  color: var(--dark);
  background: transparent;
}

.sp-hdr-search-input::placeholder {
  color: var(--muted);
}

.sp-hdr-search-submit {
  padding: 10px 14px;
  background: var(--caramel);
  border: none;
  color: #fff;
  cursor: pointer;
  transition: background .2s;
  display: flex;
  align-items: center;
}

.sp-hdr-search-submit:hover {
  background: var(--brown);
}

/* Live suggestions dropdown */
.sp-hdr-suggestions {
  max-height: 320px;
  overflow-y: auto;
}

.sp-hdr-sugg-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  text-decoration: none;
  color: var(--dark);
  transition: background .15s;
  border-bottom: 1px solid var(--bd);
}

.sp-hdr-sugg-item:last-child {
  border-bottom: none;
}

.sp-hdr-sugg-item:hover {
  background: var(--bg2);
}

.sp-hdr-sugg-img {
  width: 38px;
  height: 38px;
  border-radius: var(--r-sm);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--rose-l);
  display: flex;
  align-items: center;
  justify-content: center;
}

.sp-hdr-sugg-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sp-hdr-sugg-icon {
  font-size: 1.1rem;
}

.sp-hdr-sugg-info {
  flex: 1;
  min-width: 0;
}

.sp-hdr-sugg-name {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sp-hdr-sugg-name mark {
  background: #fff3c4;
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
}

.sp-hdr-sugg-price {
  display: block;
  font-size: .75rem;
  color: var(--caramel);
  font-weight: 700;
  margin-top: 2px;
}

.sp-hdr-sugg-arr {
  color: var(--muted);
  flex-shrink: 0;
}

.sp-hdr-sugg-empty {
  padding: 14px;
  font-size: .82rem;
  color: var(--muted);
  text-align: center;
}

@media (max-width: 600px) {
  .sp-hdr-search-panel {
    width: calc(100vw - 32px);
    right: -8px;
  }
}

/* ══════════════════════════════════════════════════════════
   SHOP ADVANCED SEARCH WIDGET
   ══════════════════════════════════════════════════════════ */
.sp-shop-search-widget {
  background: var(--white);
  border: 1.5px solid var(--bd2);
  border-radius: var(--r-lg);
  padding: 24px 28px;
  margin: 0 0 32px;
  box-shadow: var(--sh-sm);
  box-sizing: border-box;
}

.sp-ssw-form {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-end;
}

/* Simplified form: label + input, then button below — all within card width */
.sp-ssw-form--simple {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
}

.sp-ssw-form--simple .sp-ssw-keyword {
  min-width: 0;
  width: 100%;
  flex: none;
}

.sp-ssw-form--simple .sp-ssw-input-wrap {
  width: 100%;
  box-sizing: border-box;
}

.sp-ssw-form--simple .sp-ssw-input {
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
}

.sp-ssw-form--simple .sp-ssw-actions {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  gap: 8px;
}

.sp-ssw-form--simple .sp-ssw-submit {
  flex: 1;
  justify-content: center;
}

.sp-ssw-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sp-ssw-keyword {
  flex: 1 1 220px;
  min-width: 180px;
}

.sp-ssw-label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
}

/* Keyword input with icon */
.sp-ssw-input-wrap {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--bd2);
  border-radius: var(--r-sm);
  background: var(--bg);
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}

.sp-ssw-input-wrap:focus-within {
  border-color: var(--caramel);
  box-shadow: 0 0 0 3px rgba(200,121,65,.12);
}

.sp-ssw-input-wrap svg {
  margin-left: 10px;
  color: var(--muted);
  flex-shrink: 0;
}

.sp-ssw-input {
  flex: 1;
  border: none;
  outline: none;
  padding: 9px 10px;
  font-family: var(--font-body);
  font-size: .85rem;
  color: var(--dark);
  background: transparent;
}

.sp-ssw-input::placeholder {
  color: var(--muted);
}

/* Category select */
.sp-ssw-select {
  border: 1.5px solid var(--bd2);
  border-radius: var(--r-sm);
  padding: 9px 10px;
  font-family: var(--font-body);
  font-size: .85rem;
  color: var(--dark);
  background: var(--bg);
  cursor: pointer;
  min-width: 140px;
  outline: none;
  transition: border-color .2s;
}

.sp-ssw-select:focus {
  border-color: var(--caramel);
  box-shadow: 0 0 0 3px rgba(200,121,65,.12);
}

/* Price range */
.sp-ssw-price {
  flex: 0 0 auto;
}

.sp-ssw-price-inputs {
  display: flex;
  align-items: center;
  gap: 6px;
}

.sp-ssw-price-input {
  width: 72px;
  border: 1.5px solid var(--bd2);
  border-radius: var(--r-sm);
  padding: 9px 8px;
  font-family: var(--font-body);
  font-size: .85rem;
  color: var(--dark);
  background: var(--bg);
  outline: none;
  text-align: center;
  transition: border-color .2s;
}

.sp-ssw-price-input:focus {
  border-color: var(--caramel);
  box-shadow: 0 0 0 3px rgba(200,121,65,.12);
}

.sp-ssw-price-sep {
  color: var(--muted);
  font-size: .85rem;
}

/* Pet tag pills */
.sp-ssw-pet {
  flex: 0 0 auto;
}

.sp-ssw-tag-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sp-ssw-pill {
  padding: 6px 14px;
  border: 1.5px solid var(--bd2);
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  background: var(--bg);
  color: var(--dark);
  transition: border-color .15s, background .15s, color .15s;
  line-height: 1;
}

.sp-ssw-pill:hover {
  border-color: var(--caramel);
  background: var(--bg2);
}

.sp-ssw-pill.active {
  background: var(--caramel);
  border-color: var(--caramel);
  color: #fff;
}

/* Actions */
.sp-ssw-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  width: 100%;
  margin-top: 4px;
}

.sp-ssw-submit {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 22px;
  background: var(--caramel);
  color: #fff;
  border: none;
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s, transform .15s;
}

.sp-ssw-submit:hover {
  background: var(--brown);
  transform: translateY(-1px);
}

.sp-ssw-clear-btn {
  font-size: .8rem;
  color: var(--muted);
  text-decoration: none;
  padding: 6px 2px;
  transition: color .15s;
}

.sp-ssw-clear-btn:hover {
  color: var(--dark);
}

/* Active filter badges */
.sp-ssw-active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  margin-top: 4px;
}

.sp-ssw-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: var(--rose-l);
  border: 1px solid var(--blush);
  border-radius: var(--r-pill);
  font-size: .75rem;
  font-weight: 600;
  color: var(--dark);
}

.sp-ssw-badge a {
  color: var(--muted);
  text-decoration: none;
  font-weight: 700;
  line-height: 1;
}

.sp-ssw-badge a:hover {
  color: var(--rose2);
}

@media (max-width: 700px) {
  .sp-shop-search-widget {
    padding: 18px 16px;
  }

  .sp-ssw-form {
    flex-direction: column;
  }

  .sp-ssw-keyword,
  .sp-ssw-price,
  .sp-ssw-pet {
    width: 100%;
    flex: none;
  }

  .sp-ssw-price-inputs {
    width: 100%;
  }

  .sp-ssw-price-input {
    flex: 1;
  }
}

/* ══════════════════════════════════════════════════════════
   SHOP SIDEBAR LAYOUT
   ══════════════════════════════════════════════════════════ */

/* Two-column layout: sidebar left + products right */
.sp-shop-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 32px;
  align-items: start;
  padding-top: 32px;
  padding-bottom: 64px;
}

.sp-shop-sidebar {
  position: sticky;
  top: 100px; /* below sticky header */
}

/* Widget inside sidebar — no bottom margin needed */
.sp-shop-sidebar .sp-shop-search-widget {
  margin-bottom: 0;
}

/* Product grid within content area — reset old full-width overrides */
.sp-shop-content .sp-shop-grid-wrap {
  position: relative;
}

.sp-shop-content .sp-shop-grid-wrap ul.products,
.sp-shop-content .sp-shop-grid-wrap ul.products[class*="columns-"] {
  display: grid !important;
  gap: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  /* column count is injected by sp_shop_columns_css() via wp_head */
  grid-template-columns: repeat(4, 1fr) !important; /* default, overridden inline */
}

/* Filter pills — in content area */
.sp-shop-content .sp-shop-filters {
  margin-bottom: 20px;
}

/* Responsive: reorder shop — search → self-register → products → bottom widgets */
@media (max-width: 960px) {
  .sp-shop-layout {
    display: flex;
    flex-direction: column;
  }

  .sp-shop-sidebar {
    display: contents; /* children become direct flex items */
  }

  .sp-sidebar-search          { order: 1; width: 100%; }
  .sp-sidebar-widgets         { order: 2; width: 100%; }
  .sp-shop-content            { order: 3; }
  .sp-sidebar-widgets-bottom  { order: 4; width: 100%; }

  .sp-sidebar-search .sp-shop-search-widget {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 0;
  }
}

/* ══════════════════════════════════════════════════════════
   SHOP WIDGET — Live Suggestions Dropdown
   ══════════════════════════════════════════════════════════ */

.sp-ssw-keyword {
  position: relative;
}

.sp-ssw-suggestions {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--white);
  border: 1.5px solid var(--bd2);
  border-radius: var(--r-sm);
  box-shadow: var(--sh-md);
  z-index: 9999;
  max-height: 300px;
  overflow-y: auto;
}

.sp-ssw-sugg-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  text-decoration: none;
  color: var(--dark);
  border-bottom: 1px solid var(--bd);
  transition: background .15s;
}

.sp-ssw-sugg-item:last-child {
  border-bottom: none;
}

.sp-ssw-sugg-item:hover {
  background: var(--bg2);
}

.sp-ssw-sugg-img {
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--rose-l);
  display: flex;
  align-items: center;
  justify-content: center;
}

.sp-ssw-sugg-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sp-ssw-sugg-icon {
  font-size: 1.1rem;
}

.sp-ssw-sugg-info {
  flex: 1;
  min-width: 0;
}

.sp-ssw-sugg-name {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sp-ssw-sugg-name mark {
  background: #fff3c4;
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
}

.sp-ssw-sugg-price {
  display: block;
  font-size: .75rem;
  color: var(--caramel);
  font-weight: 700;
  margin-top: 2px;
}

.sp-ssw-sugg-empty {
  padding: 12px;
  font-size: .82rem;
  color: var(--muted);
  text-align: center;
}

/* ══════════════════════════════════════════════════════════
   SHOP SIDEBAR CONTENT — column count controlled by sp_shop_columns_css()
   This selector is MORE specific than .sp-shop-grid-wrap above,
   so it wins for the /shop/ page. Homepage shortcode uses the rule above.
   ══════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════
   MOBILE PRODUCT CARDS — compact 2-column layout
   Applies to BOTH shop page AND homepage shortcode
   ══════════════════════════════════════════════════════════ */
@media(max-width:600px){
  /* Tighter card */
  .woocommerce ul.products li.product,
  ul.products li.product {
    border-radius: 14px !important;
    padding-bottom: 24px !important; /* space for bigger button */
  }

  /* Compact title */
  .woocommerce ul.products li.product .woocommerce-loop-product__title,
  ul.products li.product .woocommerce-loop-product__title {
    font-size: .75rem !important;
    padding: 8px 8px 2px !important;
    line-height: 1.3 !important;
  }

  /* Compact price */
  .woocommerce ul.products li.product .price,
  ul.products li.product .price {
    font-size: .78rem !important;
    padding: 0 8px !important;
  }

  /* Add-to-cart: bigger & fully visible on mobile */
  .woocommerce ul.products li.product .button,
  .woocommerce ul.products li.product .button.add_to_cart_button,
  ul.products li.product .button,
  ul.products li.product .button.add_to_cart_button {
    position: absolute !important;
    bottom: -14px !important;
    right: 8px !important;
    left: 8px !important;        /* stretch full card width */
    width: auto !important;
    height: 36px !important;
    font-size: .72rem !important;
    padding: 0 10px !important;
    border-radius: 20px !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Image border-radius matches card */
  .woocommerce ul.products li.product a.woocommerce-loop-product__link,
  ul.products li.product a.woocommerce-loop-product__link {
    border-radius: 12px 12px 0 0 !important;
  }

  /* Sidebar stacks above on mobile — reorder: search → self-register → products → bottom widgets */
  .sp-shop-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    padding-top: 16px !important;
  }

  /* Make aside transparent so its children become direct flex items of the layout */
  .sp-shop-sidebar {
    display: contents !important;
  }

  .sp-sidebar-search          { order: 1; width: 100%; }
  .sp-sidebar-widgets         { order: 2; width: 100%; }
  .sp-shop-content            { order: 3; }
  .sp-sidebar-widgets-bottom  { order: 4; width: 100%; }

  .sp-sidebar-search .sp-shop-search-widget {
    width: 100%;
    box-sizing: border-box;
  }

  /* Shop page: 2 cols always */
  .sp-shop-content .sp-shop-grid-wrap ul.products,
  .sp-shop-content .sp-shop-grid-wrap ul.products[class*="columns-"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
}

/* ══════════════════════════════════════════════════════════
   DESKTOP HEADER — Frosted Glass Pill Bar
   ══════════════════════════════════════════════════════════ */

/* The pill container */
.sp-hdr-glass-bar {
  display: inline-flex;
  align-items: center;
  gap: 0;
  height: 40px;
  padding: 0 6px;
  border-radius: 9999px;
  background: rgba(248, 240, 255, 0.55);
  backdrop-filter: blur(40px) saturate(200%) brightness(1.06);
  -webkit-backdrop-filter: blur(40px) saturate(200%) brightness(1.06);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow:
    0 2px 12px rgba(61,46,56,0.08),
    inset 0 1px 0 rgba(255,255,255,0.85),
    inset 0 -1px 0 rgba(61,46,56,0.04);
  position: relative;
  /* specular edge highlight */
}
.sp-hdr-glass-bar::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.45) 0%,
    rgba(255,255,255,0.0) 60%
  );
  pointer-events: none;
}

/* Separator */
.sp-hdr-glass-sep {
  display: block;
  width: 1px;
  height: 18px;
  background: rgba(200,121,65,0.2);
  margin: 0 2px;
  flex-shrink: 0;
}

/* Icon-only buttons (search, wishlist, logout) */
.sp-hdr-glass-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9999px;
  border: none;
  background: transparent;
  color: var(--dark, #3d2e38);
  cursor: pointer;
  transition: background .18s, color .18s, transform .18s;
  flex-shrink: 0;
  position: relative;
}
.sp-hdr-glass-icon-btn:hover {
  background: rgba(255,255,255,0.55);
  color: var(--caramel, #C87941);
  transform: scale(1.1);
}
.sp-hdr-glass-icon-btn svg { pointer-events: none; }

/* My Account — icon + text link */
.sp-hdr-glass-account {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px 0 8px;
  height: 34px;
  border-radius: 9999px;
  text-decoration: none;
  color: var(--dark, #3d2e38);
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .02em;
  transition: background .18s, color .18s;
  white-space: nowrap;
}
.sp-hdr-glass-account:hover {
  background: rgba(255,255,255,0.55);
  color: var(--caramel, #C87941);
}
.sp-hdr-glass-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--rose, #DC92B3), var(--caramel, #C87941));
  color: white;
  flex-shrink: 0;
}

/* Log Out — subtle icon */
.sp-hdr-glass-logout {
  color: var(--muted, #9e7a90) !important;
}
.sp-hdr-glass-logout:hover {
  color: #e05050 !important;
  background: rgba(224,80,80,0.08) !important;
}

/* Log In — solid CTA pill inside the glass bar */
.sp-hdr-glass-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  height: 30px;
  border-radius: 9999px;
  background: linear-gradient(135deg, var(--caramel, #C87941), #e8952a);
  color: white !important;
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(200,121,65,.35);
  transition: transform .18s, box-shadow .18s, filter .18s;
}
.sp-hdr-glass-cta:hover {
  transform: scale(1.04);
  box-shadow: 0 4px 16px rgba(200,121,65,.5);
  filter: brightness(1.06);
}

/* Register — ghost text link */
.sp-hdr-glass-register {
  padding: 0 12px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: .76rem;
  font-weight: 600;
  color: var(--dark, #3d2e38);
  text-decoration: none;
  border-radius: 9999px;
  transition: background .18s, color .18s;
  white-space: nowrap;
}
.sp-hdr-glass-register:hover {
  background: rgba(255,255,255,0.55);
  color: var(--caramel, #C87941);
}

/* Account & guest wrapper spans must be inline-flex so the
   internal display:block separator doesn't stack children vertically */
.sp-hdr-account,
.sp-hdr-guest {
  display: inline-flex;
  align-items: center;
}

/* Search panel anchor point */
.sp-hdr-search-wrap {
  position: relative;
}

/* ══════════════════════════════════════════════════════════
   MOBILE DRAWER — Enhanced Frosted Glass
   ══════════════════════════════════════════════════════════ */

/* Richer overlay blur */
.sp-mob-nav-overlay {
  background: rgba(15, 5, 22, 0.25) !important;
  backdrop-filter: blur(24px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
}

/* Panel — deeper glass */
.sp-mob-nav-panel {
  background: rgba(255, 255, 255, 0.16) !important;
  backdrop-filter: blur(48px) saturate(240%) brightness(1.1) !important;
  -webkit-backdrop-filter: blur(48px) saturate(240%) brightness(1.1) !important;
  border-left: 1px solid rgba(255,255,255,0.4) !important;
  box-shadow:
    -12px 0 60px rgba(61,46,56,0.22),
    inset 1px 0 0 rgba(255,255,255,0.65) !important;
}

/* Panel inner specular shine */
.sp-mob-nav-panel::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 120px;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.18) 0%,
    transparent 100%
  );
  pointer-events: none;
  border-radius: inherit;
}

/* Top bar — stronger glass */
.sp-mob-topbar {
  background: rgba(255,255,255,0.12);
  border-bottom: 1px solid rgba(255,255,255,0.22) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Close button — glass pill */
.sp-mob-close {
  background: rgba(255,255,255,0.28) !important;
  border: 1px solid rgba(255,255,255,0.5) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  transition: background .18s, transform .18s !important;
}
.sp-mob-close:hover {
  background: rgba(255,255,255,0.5) !important;
  transform: scale(1.08);
}

/* Nav links — richer glass items */
.sp-mob-link {
  background: rgba(255,255,255,0.18) !important;
  border: 1px solid rgba(255,255,255,0.35) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  transition: background .2s, border-color .2s, transform .15s !important;
}
.sp-mob-link:hover,
.sp-mob-link:active {
  background: rgba(255,255,255,0.42) !important;
  border-color: rgba(200,121,65,0.5) !important;
  transform: translateX(3px) !important;
}

/* Active page highlight */
.sp-mob-link.current {
  background: rgba(200,121,65,0.18) !important;
  border-color: rgba(200,121,65,0.45) !important;
}

/* CTA buttons — keep as is but refine */
.sp-mob-cta {
  border-top: 1px solid rgba(255,255,255,0.2) !important;
  padding-top: 12px !important;
}

.sp-mob-cta-primary {
  box-shadow:
    0 4px 20px rgba(200,121,65,.45),
    inset 0 1px 0 rgba(255,255,255,0.3) !important;
  transition: transform .18s, box-shadow .18s !important;
}
.sp-mob-cta-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 28px rgba(200,121,65,.55) !important;
}

.sp-mob-cta-sec {
  background: rgba(255,255,255,0.22) !important;
  border: 1px solid rgba(255,255,255,0.45) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  transition: background .18s, transform .18s !important;
}
.sp-mob-cta-sec:hover {
  background: rgba(255,255,255,0.4) !important;
  transform: translateY(-1px) !important;
}

/* Tagline */
.sp-mob-tagline {
  color: rgba(61,46,56,0.4) !important;
  border-top: 1px solid rgba(255,255,255,0.15) !important;
  padding-top: 12px !important;
}

/* ══════════════════════════════════════════════════════════
   BLOCK CART — Receipt card + zigzag (v2, fixed selectors)
   ══════════════════════════════════════════════════════════ */

/* ── Page shell ─────────────────────────────────────────── */
body.woocommerce-cart {
  background: #f5eef8 !important;
}

/* Blow out ALL content-area width restrictions on cart page */
body.woocommerce-cart .site-main,
body.woocommerce-cart main,
body.woocommerce-cart .entry-content,
body.woocommerce-cart .woocommerce,
body.woocommerce-cart .page-content,
body.woocommerce-cart article,
body.woocommerce-cart .wp-block-post-content {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  float: none !important;
}

/* Outer cart block: full width, centred with padding */
.wp-block-woocommerce-cart {
  max-width: 1120px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 32px 24px 100px !important;
  box-sizing: border-box !important;
}

/* Hide WooCommerce "Basket totals" h2 inside sidebar */
.wp-block-woocommerce-cart .wc-block-cart__sidebar h2,
.wp-block-woocommerce-cart .wc-block-cart__sidebar .wc-block-cart__sidebar-totals-title {
  display: none !important;
}

/* ── Cart layout: 2 columns desktop ────────────────────── */
.wp-block-woocommerce-cart .wc-block-cart {
  display: grid !important;
  grid-template-columns: 1fr 340px !important;
  gap: 28px !important;
  align-items: start !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Override WooCommerce's own flex widths on children */
.wp-block-woocommerce-cart .wc-block-cart__main {
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  flex: none !important;
}
.wp-block-woocommerce-cart .wc-block-cart__sidebar {
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  flex: none !important;
}

/* ══════════════════════════════════════════════════════════
   UNIFIED CARD — items (left) + totals (right) = one card
   ══════════════════════════════════════════════════════════ */
.wp-block-woocommerce-cart .wc-block-cart {
  background: #fff !important;
  border-radius: 20px !important;
  border: 1px solid rgba(220,146,179,.14) !important;
  box-shadow: 0 6px 40px rgba(61,46,56,.1), 0 2px 10px rgba(61,46,56,.05) !important;
  overflow: hidden !important;
  gap: 0 !important;
}

/* ── LEFT: items column ─────────────────────────────────── */
.wp-block-woocommerce-cart .wc-block-cart__main {
  background: transparent !important;
  border: none !important;
  border-right: 1px solid rgba(61,46,56,.07) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Hide "PRODUCT / TOTAL" header bar */
.wc-block-cart-items__header,
.wc-block-cart-items thead,
.wc-block-cart-items th {
  display: none !important;
}

/* Table resets */
.wc-block-cart-items table {
  width: 100% !important;
  border-collapse: collapse !important;
}
.wc-block-cart-items .wc-block-cart-items__row,
.wc-block-cart-items tr {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Item row */
.wc-block-cart-item {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 18px 22px !important;
  border-bottom: 1px solid rgba(61,46,56,.055) !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: background .15s !important;
}
.wc-block-cart-item:last-child { border-bottom: none !important; }
.wc-block-cart-item:hover { background: rgba(253,246,255,.6) !important; }

/* Product image */
.wc-block-cart-item__image { flex-shrink: 0 !important; width: 78px !important; }
.wc-block-cart-item__image img {
  width: 78px !important; height: 78px !important;
  object-fit: cover !important; border-radius: 12px !important;
  display: block !important; box-shadow: 0 2px 10px rgba(61,46,56,.1) !important;
}

/* Product info */
.wc-block-cart-item__product { flex: 1 !important; min-width: 0 !important; }
.wc-block-cart-item__product-name,
.wc-block-cart-item__product a {
  font-size: .9rem !important; font-weight: 600 !important; color: #3d2e38 !important;
  text-decoration: none !important; display: block !important; margin-bottom: 4px !important;
  white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
}
.wc-block-cart-item__product-metadata {
  font-size: .74rem !important; color: #9e7a90 !important; margin-bottom: 8px !important;
}

/* Hide both prices on the product row — shown in totals already */
.wc-block-cart-item__prices,
.wc-block-cart-item .wc-block-components-product-price {
  display: none !important;
}

/* Quantity stepper */
.wc-block-components-quantity-selector {
  display: inline-flex !important; align-items: center !important;
  border: 1.5px solid rgba(200,121,65,.22) !important;
  border-radius: 9999px !important; overflow: hidden !important;
  height: 32px !important; background: #fff !important;
}
.wc-block-components-quantity-selector__button {
  background: transparent !important; border: none !important;
  width: 32px !important; height: 32px !important; font-size: 1.1rem !important;
  color: #C87941 !important; cursor: pointer !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  transition: background .15s !important; line-height: 1 !important;
}
.wc-block-components-quantity-selector__button:hover { background: rgba(200,121,65,.08) !important; }
.wc-block-components-quantity-selector__input {
  width: 34px !important; border: none !important; text-align: center !important;
  font-size: .85rem !important; font-weight: 600 !important; color: #3d2e38 !important;
  background: transparent !important; padding: 0 !important;
  box-shadow: none !important; outline: none !important;
}

/* Remove link */
.wc-block-cart-item__remove-link {
  font-size: .7rem !important; color: #c9a0b8 !important;
  text-decoration: none !important; margin-top: 6px !important;
  display: inline-block !important; transition: color .15s !important;
}
.wc-block-cart-item__remove-link:hover { color: #a0406a !important; }

/* ── RIGHT: totals column ───────────────────────────────── */
.wp-block-woocommerce-cart .wc-block-cart__sidebar {
  background: #fdfaf9 !important;
  border-radius: 0 20px 20px 0 !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
  position: relative !important;
  overflow: hidden !important;
}

/* "Order Summary" header — sidebar::before, appears ONCE */
.wp-block-woocommerce-cart .wc-block-cart__sidebar::before {
  content: '🧾  Order Summary' !important;
  display: block !important;
  padding: 16px 22px 13px !important;
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 1rem !important; font-weight: 600 !important;
  color: #3d2e38 !important; letter-spacing: .02em !important;
  background: linear-gradient(120deg, #fdf0f8 0%, #fff9f0 100%) !important;
  border-bottom: 1px solid rgba(220,146,179,.16) !important;
  border-radius: 0 20px 0 0 !important;
}

/* Totals wrappers: transparent, flat */
.wc-block-cart__sidebar .wc-block-components-totals-wrapper {
  background: transparent !important; border: none !important;
  border-radius: 0 !important; box-shadow: none !important;
  padding: 0 !important; margin: 0 !important;
}

/* Flatten all totals rows */
.wc-block-components-totals-coupon,
.wc-block-components-totals-item,
.wc-block-components-totals-footer-item {
  background: transparent !important; border: none !important;
  border-radius: 0 !important; box-shadow: none !important; margin: 0 !important;
}

/* Regular totals row */
.wc-block-components-totals-item {
  display: flex !important; justify-content: space-between !important; align-items: center !important;
  padding: 10px 22px !important;
  border-bottom: 1px solid rgba(61,46,56,.05) !important;
}
.wc-block-components-totals-item__label {
  font-size: .81rem !important; font-weight: 500 !important; color: #6b4f62 !important;
}
.wc-block-components-totals-item__value,
.wc-block-components-formatted-money-amount {
  font-size: .88rem !important; font-weight: 600 !important; color: #3d2e38 !important;
}

/* Coupon row */
.wc-block-components-totals-coupon {
  padding: 10px 22px !important; border-bottom: 1px solid rgba(61,46,56,.05) !important;
}
.wc-block-components-panel__button,
.wc-block-components-totals-coupon__form-toggle {
  font-size: .79rem !important; font-weight: 600 !important; color: #C87941 !important;
  background: transparent !important; border: none !important; padding: 0 !important;
  cursor: pointer !important; display: flex !important; align-items: center !important; gap: 6px !important;
}
.wc-block-components-totals-coupon__input input {
  border: 1.5px solid rgba(200,121,65,.28) !important; border-radius: 10px !important;
  padding: 8px 12px !important; font-size: .83rem !important;
  background: #fffdf8 !important; color: #3d2e38 !important;
  width: 100% !important; box-sizing: border-box !important; outline: none !important;
}
.wc-block-components-totals-coupon__input input:focus {
  border-color: #C87941 !important; box-shadow: 0 0 0 3px rgba(200,121,65,.1) !important;
}
.wc-block-components-totals-coupon__button {
  background: #C87941 !important; color: #fff !important;
  border: none !important; border-radius: 9999px !important;
  padding: 8px 16px !important; font-size: .78rem !important; font-weight: 700 !important;
  cursor: pointer !important; white-space: nowrap !important; transition: background .2s !important;
}
.wc-block-components-totals-coupon__button:hover { background: #a8622e !important; }

/* Total row */
.wc-block-components-totals-footer-item {
  display: flex !important; justify-content: space-between !important; align-items: center !important;
  padding: 14px 22px 16px !important;
  border-top: 1px solid rgba(61,46,56,.1) !important; margin-top: 2px !important;
  background: rgba(220,146,179,.06) !important;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
  font-size: .84rem !important; font-weight: 700 !important;
  text-transform: uppercase !important; letter-spacing: .05em !important; color: #3d2e38 !important;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item .wc-block-components-formatted-money-amount {
  font-size: 1.15rem !important; font-weight: 800 !important; color: #3d2e38 !important;
}

/* Submit button — no zigzag */
.wc-block-cart__submit-container {
  padding: 16px 22px 22px !important;
  background: transparent !important;
}
.wc-block-cart__submit-container::before { display: none !important; }

.wc-block-cart__submit-button,
.wp-block-woocommerce-cart .wc-block-cart__submit-button {
  display: block !important; width: 100% !important; padding: 15px 24px !important;
  background: linear-gradient(135deg, #DC92B3 0%, #c87a9e 100%) !important;
  color: #fff !important; border: none !important; border-radius: 9999px !important;
  font-family: var(--font-body,'DM Sans',sans-serif) !important;
  font-size: .87rem !important; font-weight: 700 !important;
  letter-spacing: .07em !important; text-transform: uppercase !important; text-align: center !important;
  box-shadow: 0 6px 22px rgba(200,100,158,.38) !important;
  transition: transform .22s, box-shadow .22s !important;
  cursor: pointer !important; -webkit-appearance: none !important; appearance: none !important;
}
.wc-block-cart__submit-button:hover,
.wp-block-woocommerce-cart .wc-block-cart__submit-button:hover {
  background: linear-gradient(135deg, #c87a9e 0%, #b0628a 100%) !important;
  color: #fff !important; transform: translateY(-2px) !important;
  box-shadow: 0 10px 28px rgba(200,100,158,.48) !important;
}

/* ══════════════════════════════════════════════════════════
   MOBILE — ≤ 768px: stack vertically, still one card
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .wp-block-woocommerce-cart {
    padding: 16px 14px 80px !important;
  }
  .wp-block-woocommerce-cart .wc-block-cart {
    display: flex !important; flex-direction: column !important;
    gap: 0 !important; width: 100% !important;
  }
  .wp-block-woocommerce-cart .wc-block-cart__main {
    width: 100% !important; max-width: 100% !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(61,46,56,.07) !important;
  }
  .wp-block-woocommerce-cart .wc-block-cart__sidebar {
    width: 100% !important; max-width: 100% !important;
    border-radius: 0 0 20px 20px !important;
  }
  .wp-block-woocommerce-cart .wc-block-cart__sidebar::before {
    border-radius: 0 !important; padding: 14px 18px 12px !important;
  }
  .wc-block-cart-item { padding: 14px 16px !important; gap: 12px !important; }
  .wc-block-cart-item__image, .wc-block-cart-item__image img { width: 64px !important; height: 64px !important; }
  .wc-block-cart-item__product-name, .wc-block-cart-item__product a { font-size: .84rem !important; }
  .wc-block-components-totals-item, .wc-block-components-totals-coupon { padding: 9px 18px !important; }
  .wc-block-components-totals-footer-item { padding: 12px 18px 14px !important; }
  .wc-block-cart__submit-container { padding: 14px 18px 20px !important; }
}

/* ══════════════════════════════════════════════════════════
   MOBILE — ≤ 480px
   ══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .wp-block-woocommerce-cart { padding: 12px 10px 70px !important; }
  .wc-block-cart-item { padding: 12px 14px !important; gap: 10px !important; }
  .wc-block-cart-item__image, .wc-block-cart-item__image img {
    width: 56px !important; height: 56px !important; border-radius: 10px !important;
  }
  .wc-block-cart-item__product-name, .wc-block-cart-item__product a {
    font-size: .8rem !important; white-space: normal !important;
  }
  .wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
  .wc-block-components-totals-footer-item .wc-block-components-formatted-money-amount {
    font-size: 1.05rem !important;
  }
  .wc-block-cart__submit-button, .wp-block-woocommerce-cart .wc-block-cart__submit-button {
    padding: 14px 16px !important; font-size: .82rem !important;
  }
}

/* ── Header cart icon & badge ─────────────────────────────────────────────── */
.sp-hdr-cart-count {
  position: absolute;
  top: -5px; right: -5px;
  background: #DC92B3;
  color: #fff;
  border-radius: 50%;
  width: 16px; height: 16px;
  font-size: .55rem;
  font-weight: 900;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  line-height: 1;
  pointer-events: none;
}

/* Mobile cart button (next to burger) */
.sp-mob-cart-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 38px; height: 38px;
  color: inherit;
  text-decoration: none;
}
.sp-mob-cart-btn svg {
  display: block;
}