/* ==========================================================================
   Aqivo Storefront Design System  v2
   Soft grey canvas, white rounded cards, lime primary, black pill navigation
   Order: tokens > base > utilities > components > overrides
   ========================================================================== */

:root {
  --accent: #D8F29E;
  --accent-hover: #CBEA85;
  --accent-deep: #B7DB66;
  --accent-light: rgba(216, 242, 158, 0.35);
  --accent-ring: rgba(183, 219, 102, 0.45);
  --on-accent: #111111;

  --bg: #F1F1F1;
  --surface: #FFFFFF;
  --surface-soft: #F7F7F7;
  --field: #E8E8E8;
  --ink: #111111;
  --black: #050505;
  --muted: #6B6B6B;
  --subtle: #9A9A9A;
  --border: #EFEFEF;
  --border-strong: #E3E3E3;

  --danger: #E5484D;
  --danger-bg: #F9C9C9;

  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 26px;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 14px 34px rgba(0, 0, 0, 0.08);
  --shadow-float: 0 12px 28px rgba(0, 0, 0, 0.22);
  --shadow-sheet: 0 24px 60px rgba(0, 0, 0, 0.28);

  --font: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ==========================================================================
   Base (includes a preflight so .border utilities get a soft default colour
   instead of falling back to black)
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0 solid var(--border-strong);
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background-color: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}

svg { display: inline-block; vertical-align: middle; flex-shrink: 0; max-width: 100%; }
svg:not([width]) { width: 20px; height: 20px; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; background: transparent; color: inherit; }
input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--black); outline-offset: 2px; }

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ==== Utilities (generated, Tailwind-compatible subset) ==== */
.p-0{padding:0;}
.p-0\.5{padding:0.125rem;}
.p-1{padding:0.25rem;}
.p-1\.5{padding:0.375rem;}
.p-2{padding:0.5rem;}
.p-2\.5{padding:0.625rem;}
.p-3{padding:0.75rem;}
.p-3\.5{padding:0.875rem;}
.p-4{padding:1rem;}
.p-5{padding:1.25rem;}
.p-6{padding:1.5rem;}
.p-7{padding:1.75rem;}
.p-8{padding:2rem;}
.p-9{padding:2.25rem;}
.p-10{padding:2.5rem;}
.p-11{padding:2.75rem;}
.p-12{padding:3rem;}
.p-14{padding:3.5rem;}
.p-16{padding:4rem;}
.p-20{padding:5rem;}
.p-24{padding:6rem;}
.p-28{padding:7rem;}
.p-32{padding:8rem;}
.p-40{padding:10rem;}
.p-48{padding:12rem;}
.px-0{padding-left:0;padding-right:0;}
.px-0\.5{padding-left:0.125rem;padding-right:0.125rem;}
.px-1{padding-left:0.25rem;padding-right:0.25rem;}
.px-1\.5{padding-left:0.375rem;padding-right:0.375rem;}
.px-2{padding-left:0.5rem;padding-right:0.5rem;}
.px-2\.5{padding-left:0.625rem;padding-right:0.625rem;}
.px-3{padding-left:0.75rem;padding-right:0.75rem;}
.px-3\.5{padding-left:0.875rem;padding-right:0.875rem;}
.px-4{padding-left:1rem;padding-right:1rem;}
.px-5{padding-left:1.25rem;padding-right:1.25rem;}
.px-6{padding-left:1.5rem;padding-right:1.5rem;}
.px-7{padding-left:1.75rem;padding-right:1.75rem;}
.px-8{padding-left:2rem;padding-right:2rem;}
.px-9{padding-left:2.25rem;padding-right:2.25rem;}
.px-10{padding-left:2.5rem;padding-right:2.5rem;}
.px-11{padding-left:2.75rem;padding-right:2.75rem;}
.px-12{padding-left:3rem;padding-right:3rem;}
.px-14{padding-left:3.5rem;padding-right:3.5rem;}
.px-16{padding-left:4rem;padding-right:4rem;}
.px-20{padding-left:5rem;padding-right:5rem;}
.px-24{padding-left:6rem;padding-right:6rem;}
.px-28{padding-left:7rem;padding-right:7rem;}
.px-32{padding-left:8rem;padding-right:8rem;}
.px-40{padding-left:10rem;padding-right:10rem;}
.px-48{padding-left:12rem;padding-right:12rem;}
.py-0{padding-top:0;padding-bottom:0;}
.py-0\.5{padding-top:0.125rem;padding-bottom:0.125rem;}
.py-1{padding-top:0.25rem;padding-bottom:0.25rem;}
.py-1\.5{padding-top:0.375rem;padding-bottom:0.375rem;}
.py-2{padding-top:0.5rem;padding-bottom:0.5rem;}
.py-2\.5{padding-top:0.625rem;padding-bottom:0.625rem;}
.py-3{padding-top:0.75rem;padding-bottom:0.75rem;}
.py-3\.5{padding-top:0.875rem;padding-bottom:0.875rem;}
.py-4{padding-top:1rem;padding-bottom:1rem;}
.py-5{padding-top:1.25rem;padding-bottom:1.25rem;}
.py-6{padding-top:1.5rem;padding-bottom:1.5rem;}
.py-7{padding-top:1.75rem;padding-bottom:1.75rem;}
.py-8{padding-top:2rem;padding-bottom:2rem;}
.py-9{padding-top:2.25rem;padding-bottom:2.25rem;}
.py-10{padding-top:2.5rem;padding-bottom:2.5rem;}
.py-11{padding-top:2.75rem;padding-bottom:2.75rem;}
.py-12{padding-top:3rem;padding-bottom:3rem;}
.py-14{padding-top:3.5rem;padding-bottom:3.5rem;}
.py-16{padding-top:4rem;padding-bottom:4rem;}
.py-20{padding-top:5rem;padding-bottom:5rem;}
.py-24{padding-top:6rem;padding-bottom:6rem;}
.py-28{padding-top:7rem;padding-bottom:7rem;}
.py-32{padding-top:8rem;padding-bottom:8rem;}
.py-40{padding-top:10rem;padding-bottom:10rem;}
.py-48{padding-top:12rem;padding-bottom:12rem;}
.pt-0{padding-top:0;}
.pt-0\.5{padding-top:0.125rem;}
.pt-1{padding-top:0.25rem;}
.pt-1\.5{padding-top:0.375rem;}
.pt-2{padding-top:0.5rem;}
.pt-2\.5{padding-top:0.625rem;}
.pt-3{padding-top:0.75rem;}
.pt-3\.5{padding-top:0.875rem;}
.pt-4{padding-top:1rem;}
.pt-5{padding-top:1.25rem;}
.pt-6{padding-top:1.5rem;}
.pt-7{padding-top:1.75rem;}
.pt-8{padding-top:2rem;}
.pt-9{padding-top:2.25rem;}
.pt-10{padding-top:2.5rem;}
.pt-11{padding-top:2.75rem;}
.pt-12{padding-top:3rem;}
.pt-14{padding-top:3.5rem;}
.pt-16{padding-top:4rem;}
.pt-20{padding-top:5rem;}
.pt-24{padding-top:6rem;}
.pt-28{padding-top:7rem;}
.pt-32{padding-top:8rem;}
.pt-40{padding-top:10rem;}
.pt-48{padding-top:12rem;}
.pr-0{padding-right:0;}
.pr-0\.5{padding-right:0.125rem;}
.pr-1{padding-right:0.25rem;}
.pr-1\.5{padding-right:0.375rem;}
.pr-2{padding-right:0.5rem;}
.pr-2\.5{padding-right:0.625rem;}
.pr-3{padding-right:0.75rem;}
.pr-3\.5{padding-right:0.875rem;}
.pr-4{padding-right:1rem;}
.pr-5{padding-right:1.25rem;}
.pr-6{padding-right:1.5rem;}
.pr-7{padding-right:1.75rem;}
.pr-8{padding-right:2rem;}
.pr-9{padding-right:2.25rem;}
.pr-10{padding-right:2.5rem;}
.pr-11{padding-right:2.75rem;}
.pr-12{padding-right:3rem;}
.pr-14{padding-right:3.5rem;}
.pr-16{padding-right:4rem;}
.pr-20{padding-right:5rem;}
.pr-24{padding-right:6rem;}
.pr-28{padding-right:7rem;}
.pr-32{padding-right:8rem;}
.pr-40{padding-right:10rem;}
.pr-48{padding-right:12rem;}
.pb-0{padding-bottom:0;}
.pb-0\.5{padding-bottom:0.125rem;}
.pb-1{padding-bottom:0.25rem;}
.pb-1\.5{padding-bottom:0.375rem;}
.pb-2{padding-bottom:0.5rem;}
.pb-2\.5{padding-bottom:0.625rem;}
.pb-3{padding-bottom:0.75rem;}
.pb-3\.5{padding-bottom:0.875rem;}
.pb-4{padding-bottom:1rem;}
.pb-5{padding-bottom:1.25rem;}
.pb-6{padding-bottom:1.5rem;}
.pb-7{padding-bottom:1.75rem;}
.pb-8{padding-bottom:2rem;}
.pb-9{padding-bottom:2.25rem;}
.pb-10{padding-bottom:2.5rem;}
.pb-11{padding-bottom:2.75rem;}
.pb-12{padding-bottom:3rem;}
.pb-14{padding-bottom:3.5rem;}
.pb-16{padding-bottom:4rem;}
.pb-20{padding-bottom:5rem;}
.pb-24{padding-bottom:6rem;}
.pb-28{padding-bottom:7rem;}
.pb-32{padding-bottom:8rem;}
.pb-40{padding-bottom:10rem;}
.pb-48{padding-bottom:12rem;}
.pl-0{padding-left:0;}
.pl-0\.5{padding-left:0.125rem;}
.pl-1{padding-left:0.25rem;}
.pl-1\.5{padding-left:0.375rem;}
.pl-2{padding-left:0.5rem;}
.pl-2\.5{padding-left:0.625rem;}
.pl-3{padding-left:0.75rem;}
.pl-3\.5{padding-left:0.875rem;}
.pl-4{padding-left:1rem;}
.pl-5{padding-left:1.25rem;}
.pl-6{padding-left:1.5rem;}
.pl-7{padding-left:1.75rem;}
.pl-8{padding-left:2rem;}
.pl-9{padding-left:2.25rem;}
.pl-10{padding-left:2.5rem;}
.pl-11{padding-left:2.75rem;}
.pl-12{padding-left:3rem;}
.pl-14{padding-left:3.5rem;}
.pl-16{padding-left:4rem;}
.pl-20{padding-left:5rem;}
.pl-24{padding-left:6rem;}
.pl-28{padding-left:7rem;}
.pl-32{padding-left:8rem;}
.pl-40{padding-left:10rem;}
.pl-48{padding-left:12rem;}
.m-0{margin:0;}
.m-0\.5{margin:0.125rem;}
.m-1{margin:0.25rem;}
.m-1\.5{margin:0.375rem;}
.m-2{margin:0.5rem;}
.m-2\.5{margin:0.625rem;}
.m-3{margin:0.75rem;}
.m-3\.5{margin:0.875rem;}
.m-4{margin:1rem;}
.m-5{margin:1.25rem;}
.m-6{margin:1.5rem;}
.m-7{margin:1.75rem;}
.m-8{margin:2rem;}
.m-9{margin:2.25rem;}
.m-10{margin:2.5rem;}
.m-11{margin:2.75rem;}
.m-12{margin:3rem;}
.m-14{margin:3.5rem;}
.m-16{margin:4rem;}
.m-20{margin:5rem;}
.m-24{margin:6rem;}
.m-28{margin:7rem;}
.m-32{margin:8rem;}
.m-40{margin:10rem;}
.m-48{margin:12rem;}
.mx-0{margin-left:0;margin-right:0;}
.mx-0\.5{margin-left:0.125rem;margin-right:0.125rem;}
.mx-1{margin-left:0.25rem;margin-right:0.25rem;}
.mx-1\.5{margin-left:0.375rem;margin-right:0.375rem;}
.mx-2{margin-left:0.5rem;margin-right:0.5rem;}
.mx-2\.5{margin-left:0.625rem;margin-right:0.625rem;}
.mx-3{margin-left:0.75rem;margin-right:0.75rem;}
.mx-3\.5{margin-left:0.875rem;margin-right:0.875rem;}
.mx-4{margin-left:1rem;margin-right:1rem;}
.mx-5{margin-left:1.25rem;margin-right:1.25rem;}
.mx-6{margin-left:1.5rem;margin-right:1.5rem;}
.mx-7{margin-left:1.75rem;margin-right:1.75rem;}
.mx-8{margin-left:2rem;margin-right:2rem;}
.mx-9{margin-left:2.25rem;margin-right:2.25rem;}
.mx-10{margin-left:2.5rem;margin-right:2.5rem;}
.mx-11{margin-left:2.75rem;margin-right:2.75rem;}
.mx-12{margin-left:3rem;margin-right:3rem;}
.mx-14{margin-left:3.5rem;margin-right:3.5rem;}
.mx-16{margin-left:4rem;margin-right:4rem;}
.mx-20{margin-left:5rem;margin-right:5rem;}
.mx-24{margin-left:6rem;margin-right:6rem;}
.mx-28{margin-left:7rem;margin-right:7rem;}
.mx-32{margin-left:8rem;margin-right:8rem;}
.mx-40{margin-left:10rem;margin-right:10rem;}
.mx-48{margin-left:12rem;margin-right:12rem;}
.my-0{margin-top:0;margin-bottom:0;}
.my-0\.5{margin-top:0.125rem;margin-bottom:0.125rem;}
.my-1{margin-top:0.25rem;margin-bottom:0.25rem;}
.my-1\.5{margin-top:0.375rem;margin-bottom:0.375rem;}
.my-2{margin-top:0.5rem;margin-bottom:0.5rem;}
.my-2\.5{margin-top:0.625rem;margin-bottom:0.625rem;}
.my-3{margin-top:0.75rem;margin-bottom:0.75rem;}
.my-3\.5{margin-top:0.875rem;margin-bottom:0.875rem;}
.my-4{margin-top:1rem;margin-bottom:1rem;}
.my-5{margin-top:1.25rem;margin-bottom:1.25rem;}
.my-6{margin-top:1.5rem;margin-bottom:1.5rem;}
.my-7{margin-top:1.75rem;margin-bottom:1.75rem;}
.my-8{margin-top:2rem;margin-bottom:2rem;}
.my-9{margin-top:2.25rem;margin-bottom:2.25rem;}
.my-10{margin-top:2.5rem;margin-bottom:2.5rem;}
.my-11{margin-top:2.75rem;margin-bottom:2.75rem;}
.my-12{margin-top:3rem;margin-bottom:3rem;}
.my-14{margin-top:3.5rem;margin-bottom:3.5rem;}
.my-16{margin-top:4rem;margin-bottom:4rem;}
.my-20{margin-top:5rem;margin-bottom:5rem;}
.my-24{margin-top:6rem;margin-bottom:6rem;}
.my-28{margin-top:7rem;margin-bottom:7rem;}
.my-32{margin-top:8rem;margin-bottom:8rem;}
.my-40{margin-top:10rem;margin-bottom:10rem;}
.my-48{margin-top:12rem;margin-bottom:12rem;}
.mt-0{margin-top:0;}
.mt-0\.5{margin-top:0.125rem;}
.mt-1{margin-top:0.25rem;}
.mt-1\.5{margin-top:0.375rem;}
.mt-2{margin-top:0.5rem;}
.mt-2\.5{margin-top:0.625rem;}
.mt-3{margin-top:0.75rem;}
.mt-3\.5{margin-top:0.875rem;}
.mt-4{margin-top:1rem;}
.mt-5{margin-top:1.25rem;}
.mt-6{margin-top:1.5rem;}
.mt-7{margin-top:1.75rem;}
.mt-8{margin-top:2rem;}
.mt-9{margin-top:2.25rem;}
.mt-10{margin-top:2.5rem;}
.mt-11{margin-top:2.75rem;}
.mt-12{margin-top:3rem;}
.mt-14{margin-top:3.5rem;}
.mt-16{margin-top:4rem;}
.mt-20{margin-top:5rem;}
.mt-24{margin-top:6rem;}
.mt-28{margin-top:7rem;}
.mt-32{margin-top:8rem;}
.mt-40{margin-top:10rem;}
.mt-48{margin-top:12rem;}
.mr-0{margin-right:0;}
.mr-0\.5{margin-right:0.125rem;}
.mr-1{margin-right:0.25rem;}
.mr-1\.5{margin-right:0.375rem;}
.mr-2{margin-right:0.5rem;}
.mr-2\.5{margin-right:0.625rem;}
.mr-3{margin-right:0.75rem;}
.mr-3\.5{margin-right:0.875rem;}
.mr-4{margin-right:1rem;}
.mr-5{margin-right:1.25rem;}
.mr-6{margin-right:1.5rem;}
.mr-7{margin-right:1.75rem;}
.mr-8{margin-right:2rem;}
.mr-9{margin-right:2.25rem;}
.mr-10{margin-right:2.5rem;}
.mr-11{margin-right:2.75rem;}
.mr-12{margin-right:3rem;}
.mr-14{margin-right:3.5rem;}
.mr-16{margin-right:4rem;}
.mr-20{margin-right:5rem;}
.mr-24{margin-right:6rem;}
.mr-28{margin-right:7rem;}
.mr-32{margin-right:8rem;}
.mr-40{margin-right:10rem;}
.mr-48{margin-right:12rem;}
.mb-0{margin-bottom:0;}
.mb-0\.5{margin-bottom:0.125rem;}
.mb-1{margin-bottom:0.25rem;}
.mb-1\.5{margin-bottom:0.375rem;}
.mb-2{margin-bottom:0.5rem;}
.mb-2\.5{margin-bottom:0.625rem;}
.mb-3{margin-bottom:0.75rem;}
.mb-3\.5{margin-bottom:0.875rem;}
.mb-4{margin-bottom:1rem;}
.mb-5{margin-bottom:1.25rem;}
.mb-6{margin-bottom:1.5rem;}
.mb-7{margin-bottom:1.75rem;}
.mb-8{margin-bottom:2rem;}
.mb-9{margin-bottom:2.25rem;}
.mb-10{margin-bottom:2.5rem;}
.mb-11{margin-bottom:2.75rem;}
.mb-12{margin-bottom:3rem;}
.mb-14{margin-bottom:3.5rem;}
.mb-16{margin-bottom:4rem;}
.mb-20{margin-bottom:5rem;}
.mb-24{margin-bottom:6rem;}
.mb-28{margin-bottom:7rem;}
.mb-32{margin-bottom:8rem;}
.mb-40{margin-bottom:10rem;}
.mb-48{margin-bottom:12rem;}
.ml-0{margin-left:0;}
.ml-0\.5{margin-left:0.125rem;}
.ml-1{margin-left:0.25rem;}
.ml-1\.5{margin-left:0.375rem;}
.ml-2{margin-left:0.5rem;}
.ml-2\.5{margin-left:0.625rem;}
.ml-3{margin-left:0.75rem;}
.ml-3\.5{margin-left:0.875rem;}
.ml-4{margin-left:1rem;}
.ml-5{margin-left:1.25rem;}
.ml-6{margin-left:1.5rem;}
.ml-7{margin-left:1.75rem;}
.ml-8{margin-left:2rem;}
.ml-9{margin-left:2.25rem;}
.ml-10{margin-left:2.5rem;}
.ml-11{margin-left:2.75rem;}
.ml-12{margin-left:3rem;}
.ml-14{margin-left:3.5rem;}
.ml-16{margin-left:4rem;}
.ml-20{margin-left:5rem;}
.ml-24{margin-left:6rem;}
.ml-28{margin-left:7rem;}
.ml-32{margin-left:8rem;}
.ml-40{margin-left:10rem;}
.ml-48{margin-left:12rem;}
.gap-0{gap:0;}
.gap-0\.5{gap:0.125rem;}
.gap-1{gap:0.25rem;}
.gap-1\.5{gap:0.375rem;}
.gap-2{gap:0.5rem;}
.gap-2\.5{gap:0.625rem;}
.gap-3{gap:0.75rem;}
.gap-3\.5{gap:0.875rem;}
.gap-4{gap:1rem;}
.gap-5{gap:1.25rem;}
.gap-6{gap:1.5rem;}
.gap-7{gap:1.75rem;}
.gap-8{gap:2rem;}
.gap-9{gap:2.25rem;}
.gap-10{gap:2.5rem;}
.gap-11{gap:2.75rem;}
.gap-12{gap:3rem;}
.gap-14{gap:3.5rem;}
.gap-16{gap:4rem;}
.gap-20{gap:5rem;}
.gap-24{gap:6rem;}
.gap-28{gap:7rem;}
.gap-32{gap:8rem;}
.gap-40{gap:10rem;}
.gap-48{gap:12rem;}
.gap-x-0{column-gap:0;}
.gap-x-0\.5{column-gap:0.125rem;}
.gap-x-1{column-gap:0.25rem;}
.gap-x-1\.5{column-gap:0.375rem;}
.gap-x-2{column-gap:0.5rem;}
.gap-x-2\.5{column-gap:0.625rem;}
.gap-x-3{column-gap:0.75rem;}
.gap-x-3\.5{column-gap:0.875rem;}
.gap-x-4{column-gap:1rem;}
.gap-x-5{column-gap:1.25rem;}
.gap-x-6{column-gap:1.5rem;}
.gap-x-7{column-gap:1.75rem;}
.gap-x-8{column-gap:2rem;}
.gap-x-9{column-gap:2.25rem;}
.gap-x-10{column-gap:2.5rem;}
.gap-x-11{column-gap:2.75rem;}
.gap-x-12{column-gap:3rem;}
.gap-x-14{column-gap:3.5rem;}
.gap-x-16{column-gap:4rem;}
.gap-x-20{column-gap:5rem;}
.gap-x-24{column-gap:6rem;}
.gap-x-28{column-gap:7rem;}
.gap-x-32{column-gap:8rem;}
.gap-x-40{column-gap:10rem;}
.gap-x-48{column-gap:12rem;}
.gap-y-0{row-gap:0;}
.gap-y-0\.5{row-gap:0.125rem;}
.gap-y-1{row-gap:0.25rem;}
.gap-y-1\.5{row-gap:0.375rem;}
.gap-y-2{row-gap:0.5rem;}
.gap-y-2\.5{row-gap:0.625rem;}
.gap-y-3{row-gap:0.75rem;}
.gap-y-3\.5{row-gap:0.875rem;}
.gap-y-4{row-gap:1rem;}
.gap-y-5{row-gap:1.25rem;}
.gap-y-6{row-gap:1.5rem;}
.gap-y-7{row-gap:1.75rem;}
.gap-y-8{row-gap:2rem;}
.gap-y-9{row-gap:2.25rem;}
.gap-y-10{row-gap:2.5rem;}
.gap-y-11{row-gap:2.75rem;}
.gap-y-12{row-gap:3rem;}
.gap-y-14{row-gap:3.5rem;}
.gap-y-16{row-gap:4rem;}
.gap-y-20{row-gap:5rem;}
.gap-y-24{row-gap:6rem;}
.gap-y-28{row-gap:7rem;}
.gap-y-32{row-gap:8rem;}
.gap-y-40{row-gap:10rem;}
.gap-y-48{row-gap:12rem;}
.w-0{width:0;}
.w-0\.5{width:0.125rem;}
.w-1{width:0.25rem;}
.w-1\.5{width:0.375rem;}
.w-2{width:0.5rem;}
.w-2\.5{width:0.625rem;}
.w-3{width:0.75rem;}
.w-3\.5{width:0.875rem;}
.w-4{width:1rem;}
.w-5{width:1.25rem;}
.w-6{width:1.5rem;}
.w-7{width:1.75rem;}
.w-8{width:2rem;}
.w-9{width:2.25rem;}
.w-10{width:2.5rem;}
.w-11{width:2.75rem;}
.w-12{width:3rem;}
.w-14{width:3.5rem;}
.w-16{width:4rem;}
.w-20{width:5rem;}
.w-24{width:6rem;}
.w-28{width:7rem;}
.w-32{width:8rem;}
.w-40{width:10rem;}
.w-48{width:12rem;}
.h-0{height:0;}
.h-0\.5{height:0.125rem;}
.h-1{height:0.25rem;}
.h-1\.5{height:0.375rem;}
.h-2{height:0.5rem;}
.h-2\.5{height:0.625rem;}
.h-3{height:0.75rem;}
.h-3\.5{height:0.875rem;}
.h-4{height:1rem;}
.h-5{height:1.25rem;}
.h-6{height:1.5rem;}
.h-7{height:1.75rem;}
.h-8{height:2rem;}
.h-9{height:2.25rem;}
.h-10{height:2.5rem;}
.h-11{height:2.75rem;}
.h-12{height:3rem;}
.h-14{height:3.5rem;}
.h-16{height:4rem;}
.h-20{height:5rem;}
.h-24{height:6rem;}
.h-28{height:7rem;}
.h-32{height:8rem;}
.h-40{height:10rem;}
.h-48{height:12rem;}
.size-0{width:0;height:0;}
.size-0\.5{width:0.125rem;height:0.125rem;}
.size-1{width:0.25rem;height:0.25rem;}
.size-1\.5{width:0.375rem;height:0.375rem;}
.size-2{width:0.5rem;height:0.5rem;}
.size-2\.5{width:0.625rem;height:0.625rem;}
.size-3{width:0.75rem;height:0.75rem;}
.size-3\.5{width:0.875rem;height:0.875rem;}
.size-4{width:1rem;height:1rem;}
.size-5{width:1.25rem;height:1.25rem;}
.size-6{width:1.5rem;height:1.5rem;}
.size-7{width:1.75rem;height:1.75rem;}
.size-8{width:2rem;height:2rem;}
.size-9{width:2.25rem;height:2.25rem;}
.size-10{width:2.5rem;height:2.5rem;}
.size-11{width:2.75rem;height:2.75rem;}
.size-12{width:3rem;height:3rem;}
.size-14{width:3.5rem;height:3.5rem;}
.size-16{width:4rem;height:4rem;}
.size-20{width:5rem;height:5rem;}
.size-24{width:6rem;height:6rem;}
.size-28{width:7rem;height:7rem;}
.size-32{width:8rem;height:8rem;}
.size-40{width:10rem;height:10rem;}
.size-48{width:12rem;height:12rem;}
.space-y-0>*+*{margin-top:0}
.space-x-0>*+*{margin-left:0}
.space-y-0\.5>*+*{margin-top:0.125rem}
.space-x-0\.5>*+*{margin-left:0.125rem}
.space-y-1>*+*{margin-top:0.25rem}
.space-x-1>*+*{margin-left:0.25rem}
.space-y-1\.5>*+*{margin-top:0.375rem}
.space-x-1\.5>*+*{margin-left:0.375rem}
.space-y-2>*+*{margin-top:0.5rem}
.space-x-2>*+*{margin-left:0.5rem}
.space-y-2\.5>*+*{margin-top:0.625rem}
.space-x-2\.5>*+*{margin-left:0.625rem}
.space-y-3>*+*{margin-top:0.75rem}
.space-x-3>*+*{margin-left:0.75rem}
.space-y-3\.5>*+*{margin-top:0.875rem}
.space-x-3\.5>*+*{margin-left:0.875rem}
.space-y-4>*+*{margin-top:1rem}
.space-x-4>*+*{margin-left:1rem}
.space-y-5>*+*{margin-top:1.25rem}
.space-x-5>*+*{margin-left:1.25rem}
.space-y-6>*+*{margin-top:1.5rem}
.space-x-6>*+*{margin-left:1.5rem}
.space-y-7>*+*{margin-top:1.75rem}
.space-x-7>*+*{margin-left:1.75rem}
.space-y-8>*+*{margin-top:2rem}
.space-x-8>*+*{margin-left:2rem}
.space-y-9>*+*{margin-top:2.25rem}
.space-x-9>*+*{margin-left:2.25rem}
.space-y-10>*+*{margin-top:2.5rem}
.space-x-10>*+*{margin-left:2.5rem}
.space-y-11>*+*{margin-top:2.75rem}
.space-x-11>*+*{margin-left:2.75rem}
.space-y-12>*+*{margin-top:3rem}
.space-x-12>*+*{margin-left:3rem}
.space-y-14>*+*{margin-top:3.5rem}
.space-x-14>*+*{margin-left:3.5rem}
.space-y-16>*+*{margin-top:4rem}
.space-x-16>*+*{margin-left:4rem}
.space-y-20>*+*{margin-top:5rem}
.space-x-20>*+*{margin-left:5rem}
.space-y-24>*+*{margin-top:6rem}
.space-x-24>*+*{margin-left:6rem}
.space-y-28>*+*{margin-top:7rem}
.space-x-28>*+*{margin-left:7rem}
.space-y-32>*+*{margin-top:8rem}
.space-x-32>*+*{margin-left:8rem}
.space-y-40>*+*{margin-top:10rem}
.space-x-40>*+*{margin-left:10rem}
.space-y-48>*+*{margin-top:12rem}
.space-x-48>*+*{margin-left:12rem}
.top-0{top:0}
.right-0{right:0}
.bottom-0{bottom:0}
.left-0{left:0}
.inset-0{inset:0}
.top-1{top:0.25rem}
.right-1{right:0.25rem}
.bottom-1{bottom:0.25rem}
.left-1{left:0.25rem}
.inset-1{inset:0.25rem}
.top-2{top:0.5rem}
.right-2{right:0.5rem}
.bottom-2{bottom:0.5rem}
.left-2{left:0.5rem}
.inset-2{inset:0.5rem}
.top-3{top:0.75rem}
.right-3{right:0.75rem}
.bottom-3{bottom:0.75rem}
.left-3{left:0.75rem}
.inset-3{inset:0.75rem}
.top-4{top:1rem}
.right-4{right:1rem}
.bottom-4{bottom:1rem}
.left-4{left:1rem}
.inset-4{inset:1rem}
.top-5{top:1.25rem}
.right-5{right:1.25rem}
.bottom-5{bottom:1.25rem}
.left-5{left:1.25rem}
.inset-5{inset:1.25rem}
.top-6{top:1.5rem}
.right-6{right:1.5rem}
.bottom-6{bottom:1.5rem}
.left-6{left:1.5rem}
.inset-6{inset:1.5rem}
.top-8{top:2rem}
.right-8{right:2rem}
.bottom-8{bottom:2rem}
.left-8{left:2rem}
.inset-8{inset:2rem}
.top-10{top:2.5rem}
.right-10{right:2.5rem}
.bottom-10{bottom:2.5rem}
.left-10{left:2.5rem}
.inset-10{inset:2.5rem}
.top-12{top:3rem}
.right-12{right:3rem}
.bottom-12{bottom:3rem}
.left-12{left:3rem}
.inset-12{inset:3rem}
.mx-auto{margin-left:auto;margin-right:auto}.ml-auto{margin-left:auto}.mr-auto{margin-right:auto}.mt-auto{margin-top:auto}
.inset-x-0{left:0;right:0}.inset-y-0{top:0;bottom:0}
.w-1\/2{width:50.000000%}
.w-1\/3{width:33.333333%}
.w-2\/3{width:66.666667%}
.w-1\/4{width:25.000000%}
.w-3\/4{width:75.000000%}
.w-full{width:100%}.h-full{height:100%}.w-auto{width:auto}.h-auto{height:auto}.w-screen{width:100vw}.h-screen{height:100vh}.min-h-screen{min-height:100vh}.min-w-0{min-width:0}.w-fit{width:fit-content}
.max-w-xs{max-width:20rem}
.max-w-sm{max-width:24rem}
.max-w-md{max-width:28rem}
.max-w-lg{max-width:32rem}
.max-w-xl{max-width:36rem}
.max-w-2xl{max-width:42rem}
.max-w-3xl{max-width:48rem}
.max-w-4xl{max-width:56rem}
.max-w-5xl{max-width:64rem}
.max-w-6xl{max-width:72rem}
.max-w-7xl{max-width:80rem}
.max-w-full{max-width:100%}
@media (min-width:640px){
.sm\:p-0{padding:0!important;}
.sm\:p-1{padding:0.25rem!important;}
.sm\:p-2{padding:0.5rem!important;}
.sm\:p-3{padding:0.75rem!important;}
.sm\:p-4{padding:1rem!important;}
.sm\:p-5{padding:1.25rem!important;}
.sm\:p-6{padding:1.5rem!important;}
.sm\:p-8{padding:2rem!important;}
.sm\:p-10{padding:2.5rem!important;}
.sm\:p-12{padding:3rem!important;}
.sm\:p-14{padding:3.5rem!important;}
.sm\:p-16{padding:4rem!important;}
.sm\:px-0{padding-left:0!important;padding-right:0!important;}
.sm\:px-1{padding-left:0.25rem!important;padding-right:0.25rem!important;}
.sm\:px-2{padding-left:0.5rem!important;padding-right:0.5rem!important;}
.sm\:px-3{padding-left:0.75rem!important;padding-right:0.75rem!important;}
.sm\:px-4{padding-left:1rem!important;padding-right:1rem!important;}
.sm\:px-5{padding-left:1.25rem!important;padding-right:1.25rem!important;}
.sm\:px-6{padding-left:1.5rem!important;padding-right:1.5rem!important;}
.sm\:px-8{padding-left:2rem!important;padding-right:2rem!important;}
.sm\:px-10{padding-left:2.5rem!important;padding-right:2.5rem!important;}
.sm\:px-12{padding-left:3rem!important;padding-right:3rem!important;}
.sm\:px-14{padding-left:3.5rem!important;padding-right:3.5rem!important;}
.sm\:px-16{padding-left:4rem!important;padding-right:4rem!important;}
.sm\:py-0{padding-top:0!important;padding-bottom:0!important;}
.sm\:py-1{padding-top:0.25rem!important;padding-bottom:0.25rem!important;}
.sm\:py-2{padding-top:0.5rem!important;padding-bottom:0.5rem!important;}
.sm\:py-3{padding-top:0.75rem!important;padding-bottom:0.75rem!important;}
.sm\:py-4{padding-top:1rem!important;padding-bottom:1rem!important;}
.sm\:py-5{padding-top:1.25rem!important;padding-bottom:1.25rem!important;}
.sm\:py-6{padding-top:1.5rem!important;padding-bottom:1.5rem!important;}
.sm\:py-8{padding-top:2rem!important;padding-bottom:2rem!important;}
.sm\:py-10{padding-top:2.5rem!important;padding-bottom:2.5rem!important;}
.sm\:py-12{padding-top:3rem!important;padding-bottom:3rem!important;}
.sm\:py-14{padding-top:3.5rem!important;padding-bottom:3.5rem!important;}
.sm\:py-16{padding-top:4rem!important;padding-bottom:4rem!important;}
.sm\:gap-0{gap:0!important;}
.sm\:gap-1{gap:0.25rem!important;}
.sm\:gap-2{gap:0.5rem!important;}
.sm\:gap-3{gap:0.75rem!important;}
.sm\:gap-4{gap:1rem!important;}
.sm\:gap-5{gap:1.25rem!important;}
.sm\:gap-6{gap:1.5rem!important;}
.sm\:gap-8{gap:2rem!important;}
.sm\:gap-10{gap:2.5rem!important;}
.sm\:gap-12{gap:3rem!important;}
.sm\:gap-14{gap:3.5rem!important;}
.sm\:gap-16{gap:4rem!important;}
.sm\:mt-0{margin-top:0!important;}
.sm\:mt-1{margin-top:0.25rem!important;}
.sm\:mt-2{margin-top:0.5rem!important;}
.sm\:mt-3{margin-top:0.75rem!important;}
.sm\:mt-4{margin-top:1rem!important;}
.sm\:mt-5{margin-top:1.25rem!important;}
.sm\:mt-6{margin-top:1.5rem!important;}
.sm\:mt-8{margin-top:2rem!important;}
.sm\:mt-10{margin-top:2.5rem!important;}
.sm\:mt-12{margin-top:3rem!important;}
.sm\:mt-14{margin-top:3.5rem!important;}
.sm\:mt-16{margin-top:4rem!important;}
.sm\:mb-0{margin-bottom:0!important;}
.sm\:mb-1{margin-bottom:0.25rem!important;}
.sm\:mb-2{margin-bottom:0.5rem!important;}
.sm\:mb-3{margin-bottom:0.75rem!important;}
.sm\:mb-4{margin-bottom:1rem!important;}
.sm\:mb-5{margin-bottom:1.25rem!important;}
.sm\:mb-6{margin-bottom:1.5rem!important;}
.sm\:mb-8{margin-bottom:2rem!important;}
.sm\:mb-10{margin-bottom:2.5rem!important;}
.sm\:mb-12{margin-bottom:3rem!important;}
.sm\:mb-14{margin-bottom:3.5rem!important;}
.sm\:mb-16{margin-bottom:4rem!important;}
.sm\:w-0{width:0!important;}
.sm\:w-1{width:0.25rem!important;}
.sm\:w-2{width:0.5rem!important;}
.sm\:w-3{width:0.75rem!important;}
.sm\:w-4{width:1rem!important;}
.sm\:w-5{width:1.25rem!important;}
.sm\:w-6{width:1.5rem!important;}
.sm\:w-8{width:2rem!important;}
.sm\:w-10{width:2.5rem!important;}
.sm\:w-12{width:3rem!important;}
.sm\:w-14{width:3.5rem!important;}
.sm\:w-16{width:4rem!important;}
.sm\:h-0{height:0!important;}
.sm\:h-1{height:0.25rem!important;}
.sm\:h-2{height:0.5rem!important;}
.sm\:h-3{height:0.75rem!important;}
.sm\:h-4{height:1rem!important;}
.sm\:h-5{height:1.25rem!important;}
.sm\:h-6{height:1.5rem!important;}
.sm\:h-8{height:2rem!important;}
.sm\:h-10{height:2.5rem!important;}
.sm\:h-12{height:3rem!important;}
.sm\:h-14{height:3.5rem!important;}
.sm\:h-16{height:4rem!important;}
.sm\:size-0{width:0!important;height:0!important;}
.sm\:size-1{width:0.25rem!important;height:0.25rem!important;}
.sm\:size-2{width:0.5rem!important;height:0.5rem!important;}
.sm\:size-3{width:0.75rem!important;height:0.75rem!important;}
.sm\:size-4{width:1rem!important;height:1rem!important;}
.sm\:size-5{width:1.25rem!important;height:1.25rem!important;}
.sm\:size-6{width:1.5rem!important;height:1.5rem!important;}
.sm\:size-8{width:2rem!important;height:2rem!important;}
.sm\:size-10{width:2.5rem!important;height:2.5rem!important;}
.sm\:size-12{width:3rem!important;height:3rem!important;}
.sm\:size-14{width:3.5rem!important;height:3.5rem!important;}
.sm\:size-16{width:4rem!important;height:4rem!important;}
}
@media (min-width:1024px){
.lg\:px-0{padding-left:0!important;padding-right:0!important;}
.lg\:px-1{padding-left:0.25rem!important;padding-right:0.25rem!important;}
.lg\:px-2{padding-left:0.5rem!important;padding-right:0.5rem!important;}
.lg\:px-3{padding-left:0.75rem!important;padding-right:0.75rem!important;}
.lg\:px-4{padding-left:1rem!important;padding-right:1rem!important;}
.lg\:px-5{padding-left:1.25rem!important;padding-right:1.25rem!important;}
.lg\:px-6{padding-left:1.5rem!important;padding-right:1.5rem!important;}
.lg\:px-8{padding-left:2rem!important;padding-right:2rem!important;}
.lg\:px-10{padding-left:2.5rem!important;padding-right:2.5rem!important;}
.lg\:px-12{padding-left:3rem!important;padding-right:3rem!important;}
.lg\:px-14{padding-left:3.5rem!important;padding-right:3.5rem!important;}
.lg\:px-16{padding-left:4rem!important;padding-right:4rem!important;}
.lg\:py-0{padding-top:0!important;padding-bottom:0!important;}
.lg\:py-1{padding-top:0.25rem!important;padding-bottom:0.25rem!important;}
.lg\:py-2{padding-top:0.5rem!important;padding-bottom:0.5rem!important;}
.lg\:py-3{padding-top:0.75rem!important;padding-bottom:0.75rem!important;}
.lg\:py-4{padding-top:1rem!important;padding-bottom:1rem!important;}
.lg\:py-5{padding-top:1.25rem!important;padding-bottom:1.25rem!important;}
.lg\:py-6{padding-top:1.5rem!important;padding-bottom:1.5rem!important;}
.lg\:py-8{padding-top:2rem!important;padding-bottom:2rem!important;}
.lg\:py-10{padding-top:2.5rem!important;padding-bottom:2.5rem!important;}
.lg\:py-12{padding-top:3rem!important;padding-bottom:3rem!important;}
.lg\:py-14{padding-top:3.5rem!important;padding-bottom:3.5rem!important;}
.lg\:py-16{padding-top:4rem!important;padding-bottom:4rem!important;}
.lg\:gap-0{gap:0!important;}
.lg\:gap-1{gap:0.25rem!important;}
.lg\:gap-2{gap:0.5rem!important;}
.lg\:gap-3{gap:0.75rem!important;}
.lg\:gap-4{gap:1rem!important;}
.lg\:gap-5{gap:1.25rem!important;}
.lg\:gap-6{gap:1.5rem!important;}
.lg\:gap-8{gap:2rem!important;}
.lg\:gap-10{gap:2.5rem!important;}
.lg\:gap-12{gap:3rem!important;}
.lg\:gap-14{gap:3.5rem!important;}
.lg\:gap-16{gap:4rem!important;}
}
.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.hidden{display:none!important}.contents{display:contents}
.flex-col{flex-direction:column}.flex-row{flex-direction:row}.flex-wrap{flex-wrap:wrap}.flex-nowrap{flex-wrap:nowrap}.flex-1{flex:1 1 0%}.flex-none{flex:none}.grow{flex-grow:1}.shrink-0{flex-shrink:0}
.items-start{align-items:flex-start}.items-center{align-items:center}.items-end{align-items:flex-end}.items-baseline{align-items:baseline}.items-stretch{align-items:stretch}
.justify-start{justify-content:flex-start}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.justify-between{justify-content:space-between}
.self-start{align-self:flex-start}.self-center{align-self:center}.self-end{align-self:flex-end}.place-items-center{place-items:center}
.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.col-span-2{grid-column:span 2/span 2}.col-span-full{grid-column:1/-1}
.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.sticky{position:sticky}
.z-0{z-index:0}.z-10{z-index:10}.z-20{z-index:20}.z-30{z-index:30}.z-40{z-index:40}.z-50{z-index:50}.z-90{z-index:90}.z-100{z-index:100}
.overflow-hidden{overflow:hidden}.overflow-auto{overflow:auto}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}
.aspect-square{aspect-ratio:1/1}.aspect-video{aspect-ratio:16/9}.object-cover{object-fit:cover}.object-contain{object-fit:contain}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.whitespace-nowrap{white-space:nowrap}.break-words{overflow-wrap:break-word}
.line-clamp-1{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}.line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.line-clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pointer-events-none{pointer-events:none}.pointer-events-auto{pointer-events:auto}.cursor-pointer{cursor:pointer}.cursor-not-allowed{cursor:not-allowed}.select-none{user-select:none}.resize-none{resize:none}.outline-none{outline:2px solid transparent;outline-offset:2px}
.opacity-0{opacity:0}.opacity-50{opacity:.5}.opacity-60{opacity:.6}.opacity-75{opacity:.75}.opacity-100{opacity:1}
.translate-y-24{transform:translateY(6rem)}.rotate-180{transform:rotate(180deg)}
.fill-current{fill:currentColor}.stroke-current{stroke:currentColor}
.border{border-width:1px}.border-0{border-width:0}.border-2{border-width:2px}.border-t{border-top-width:1px}.border-b{border-bottom-width:1px}.border-l{border-left-width:1px}.border-r{border-right-width:1px}
.border-dashed{border-style:dashed}.border-solid{border-style:solid}.divide-y>*+*{border-top-width:1px}
.rounded-none{border-radius:0}.rounded-sm{border-radius:.125rem}.rounded{border-radius:.25rem}.rounded-md{border-radius:.375rem}.rounded-lg{border-radius:.5rem}.rounded-xl{border-radius:.75rem}.rounded-2xl{border-radius:1rem}.rounded-3xl{border-radius:1.5rem}.rounded-full{border-radius:9999px}
.rounded-t-3xl{border-radius:1.5rem 1.5rem 0 0}
.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.text-\[12px\]{font-size:12px}.text-\[13px\]{font-size:13px}
.text-xs{font-size:.75rem;line-height:1rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}
.font-normal{font-weight:400}.font-medium{font-weight:500}.font-semibold{font-weight:500}.font-bold{font-weight:600}.font-extrabold{font-weight:700}.font-black{font-weight:700}
.leading-none{line-height:1}.leading-tight{line-height:1.25}.leading-snug{line-height:1.375}.leading-normal{line-height:1.5}.leading-relaxed{line-height:1.625}
.tracking-tight{letter-spacing:-.02em}.tracking-normal{letter-spacing:0}.tracking-wide{letter-spacing:.025em}.tracking-wider{letter-spacing:.05em}.tracking-widest{letter-spacing:.1em}
.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}.normal-case{text-transform:none}.italic{font-style:italic}.underline{text-decoration:underline}.line-through{text-decoration:line-through}
.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.tabular-nums{font-variant-numeric:tabular-nums}
.bg-slate-50{background-color:#F7F7F7}.border-slate-50{border-color:#F7F7F7}
.text-slate-50{color:#F7F7F7}
.bg-slate-100{background-color:#F0F0F0}.border-slate-100{border-color:#F0F0F0}
.text-slate-100{color:#F0F0F0}
.bg-slate-200{background-color:#E6E6E6}.border-slate-200{border-color:#E6E6E6}
.text-slate-200{color:#E6E6E6}
.bg-slate-300{background-color:#D2D2D2}.border-slate-300{border-color:#D2D2D2}
.text-slate-300{color:#D2D2D2}
.bg-slate-400{background-color:#9A9A9A}.border-slate-400{border-color:#9A9A9A}
.text-slate-400{color:#9A9A9A}
.bg-slate-500{background-color:#6B6B6B}.border-slate-500{border-color:#6B6B6B}
.text-slate-500{color:#6B6B6B}
.bg-slate-600{background-color:#505050}.border-slate-600{border-color:#505050}
.text-slate-600{color:#505050}
.bg-slate-700{background-color:#2E2E2E}.border-slate-700{border-color:#2E2E2E}
.text-slate-700{color:#2E2E2E}
.bg-slate-800{background-color:#1C1C1C}.border-slate-800{border-color:#1C1C1C}
.text-slate-800{color:#1C1C1C}
.bg-slate-900{background-color:#111111}.border-slate-900{border-color:#111111}
.text-slate-900{color:#111111}
.bg-gray-50{background-color:#F7F7F7}.border-gray-50{border-color:#F7F7F7}
.text-gray-50{color:#F7F7F7}
.bg-gray-100{background-color:#F0F0F0}.border-gray-100{border-color:#F0F0F0}
.text-gray-100{color:#F0F0F0}
.bg-gray-200{background-color:#E6E6E6}.border-gray-200{border-color:#E6E6E6}
.text-gray-200{color:#E6E6E6}
.bg-gray-300{background-color:#D2D2D2}.border-gray-300{border-color:#D2D2D2}
.text-gray-300{color:#D2D2D2}
.bg-gray-400{background-color:#9A9A9A}.border-gray-400{border-color:#9A9A9A}
.text-gray-400{color:#9A9A9A}
.bg-gray-500{background-color:#6B6B6B}.border-gray-500{border-color:#6B6B6B}
.text-gray-500{color:#6B6B6B}
.bg-gray-600{background-color:#505050}.border-gray-600{border-color:#505050}
.text-gray-600{color:#505050}
.bg-gray-700{background-color:#2E2E2E}.border-gray-700{border-color:#2E2E2E}
.text-gray-700{color:#2E2E2E}
.bg-gray-800{background-color:#1C1C1C}.border-gray-800{border-color:#1C1C1C}
.text-gray-800{color:#1C1C1C}
.bg-gray-900{background-color:#111111}.border-gray-900{border-color:#111111}
.text-gray-900{color:#111111}
.bg-neutral-50{background-color:#F7F7F7}.border-neutral-50{border-color:#F7F7F7}
.text-neutral-50{color:#F7F7F7}
.bg-neutral-100{background-color:#F0F0F0}.border-neutral-100{border-color:#F0F0F0}
.text-neutral-100{color:#F0F0F0}
.bg-neutral-200{background-color:#E6E6E6}.border-neutral-200{border-color:#E6E6E6}
.text-neutral-200{color:#E6E6E6}
.bg-neutral-300{background-color:#D2D2D2}.border-neutral-300{border-color:#D2D2D2}
.text-neutral-300{color:#D2D2D2}
.bg-neutral-400{background-color:#9A9A9A}.border-neutral-400{border-color:#9A9A9A}
.text-neutral-400{color:#9A9A9A}
.bg-neutral-500{background-color:#6B6B6B}.border-neutral-500{border-color:#6B6B6B}
.text-neutral-500{color:#6B6B6B}
.bg-neutral-600{background-color:#505050}.border-neutral-600{border-color:#505050}
.text-neutral-600{color:#505050}
.bg-neutral-700{background-color:#2E2E2E}.border-neutral-700{border-color:#2E2E2E}
.text-neutral-700{color:#2E2E2E}
.bg-neutral-800{background-color:#1C1C1C}.border-neutral-800{border-color:#1C1C1C}
.text-neutral-800{color:#1C1C1C}
.bg-neutral-900{background-color:#111111}.border-neutral-900{border-color:#111111}
.text-neutral-900{color:#111111}
.bg-emerald-50{background-color:var(--accent-light)}.border-emerald-50{border-color:var(--accent-light)}
.text-emerald-50{color:var(--ink)}
.bg-emerald-100{background-color:var(--accent)}.border-emerald-100{border-color:var(--accent)}
.text-emerald-100{color:var(--ink)}
.bg-emerald-200{background-color:var(--accent-deep)}.border-emerald-200{border-color:var(--accent-deep)}
.text-emerald-200{color:var(--ink)}
.bg-emerald-500{background-color:var(--accent)}.border-emerald-500{border-color:var(--accent)}
.text-emerald-500{color:var(--ink)}
.bg-emerald-600{background-color:var(--accent-hover)}.border-emerald-600{border-color:var(--accent-hover)}
.text-emerald-600{color:var(--ink)}
.bg-emerald-700{background-color:var(--ink)}.border-emerald-700{border-color:var(--ink)}
.text-emerald-700{color:var(--ink)}
.bg-amber-50{background-color:#FEF6E0}.border-amber-50{border-color:#FEF6E0}
.text-amber-50{color:#FEF6E0}
.bg-amber-500{background-color:#E3A008}.border-amber-500{border-color:#E3A008}
.text-amber-500{color:#E3A008}
.bg-red-50{background-color:#FDECEC}.border-red-50{border-color:#FDECEC}
.text-red-50{color:#FDECEC}
.bg-red-500{background-color:var(--danger)}.border-red-500{border-color:var(--danger)}
.text-red-500{color:var(--danger)}
.bg-red-600{background-color:#C93A3F}.border-red-600{border-color:#C93A3F}
.text-red-600{color:#C93A3F}
.bg-white{background-color:#FFFFFF}.border-white{border-color:#FFFFFF}
.text-white{color:#FFFFFF}
.bg-black{background-color:var(--black)}.border-black{border-color:var(--black)}
.text-black{color:var(--black)}
.bg-transparent{background-color:transparent}.border-transparent{border-color:transparent}
.text-transparent{color:transparent}
.bg-white\/95{background-color:rgba(255,255,255,.95)}.bg-white\/20{background-color:rgba(255,255,255,.2)}.bg-black\/60{background-color:rgba(5,5,5,.65)}.bg-black\/50{background-color:rgba(5,5,5,.5)}
.text-\[\#0B1736\]{color:var(--ink)}.text-\[\#5B21F5\]{color:var(--ink)}.bg-\[\#5B21F5\]{background-color:var(--accent)}.bg-\[\#0B1736\]{background-color:var(--black)}.bg-\[\#F8FAFC\]{background-color:var(--bg)}
.shadow-sm{box-shadow:var(--shadow-sm)}.shadow,.shadow-md{box-shadow:var(--shadow-md)}.shadow-lg{box-shadow:var(--shadow-lg)}.shadow-xl{box-shadow:var(--shadow-float)}.shadow-none{box-shadow:none}
.backdrop-blur{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.backdrop-blur-md{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.transition-all{transition:all .15s cubic-bezier(.4,0,.2,1)}.transition-colors{transition:color .15s,background-color .15s,border-color .15s}.transition-transform{transition:transform .2s}
.group:hover .group-hover\:scale-105{transform:scale(1.05)}
.size-1\.5{width:6px;height:6px}
@media (min-width:640px){.sm\:block{display:block!important}.sm\:hidden{display:none!important}.sm\:flex{display:flex!important}.sm\:inline{display:inline!important}.sm\:inline-flex{display:inline-flex!important}.sm\:grid{display:grid!important}
.sm\:flex-row{flex-direction:row!important}.sm\:items-center{align-items:center!important}.sm\:justify-between{justify-content:space-between!important}
.sm\:text-sm{font-size:.875rem!important;line-height:1.25rem!important}.sm\:text-base{font-size:1rem!important;line-height:1.5rem!important}.sm\:text-lg{font-size:1.125rem!important;line-height:1.75rem!important}.sm\:text-xl{font-size:1.25rem!important;line-height:1.75rem!important}.sm\:text-2xl{font-size:1.5rem!important;line-height:2rem!important}
.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))!important}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))!important}.sm\:rounded-2xl{border-radius:1rem!important}.sm\:rounded-3xl{border-radius:1.5rem!important}}
@media (min-width:1024px){.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))!important}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))!important}.lg\:block{display:block!important}.lg\:hidden{display:none!important}.lg\:flex{display:flex!important}}

/* Fractional inset utilities */
.top-0\.5{top:.125rem}.top-1\.5{top:.375rem}.top-2\.5{top:.625rem}.top-3\.5{top:.875rem}.top-1\/2{top:50%}
.left-0\.5{left:.125rem}.left-1\.5{left:.375rem}.left-2\.5{left:.625rem}.left-3\.5{left:.875rem}
.right-0\.5{right:.125rem}.right-1\.5{right:.375rem}.right-2\.5{right:.625rem}.right-3\.5{right:.875rem}
.bottom-0\.5{bottom:.125rem}.bottom-1\.5{bottom:.375rem}.bottom-2\.5{bottom:.625rem}.bottom-3\.5{bottom:.875rem}
.-translate-y-1\/2{transform:translateY(-50%)}

/* ==========================================================================
   Announcement bar, container, header
   ========================================================================== */
#announcement-bar {
  background-color: var(--black);
  color: var(--accent);
  padding: 9px 16px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.store-container {
  width: 100%;
  max-width: 1140px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}
@media (min-width: 640px)  { .store-container { padding-left: 24px; padding-right: 24px; } }
@media (min-width: 1024px) { .store-container { padding-left: 32px; padding-right: 32px; } }

header.sticky {
  position: sticky;
  top: 0;
  z-index: 40;
  background-color: rgba(241, 241, 241, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

#store-logo {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--surface);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 18px;
  color: var(--ink);
  flex-shrink: 0;
  box-shadow: var(--shadow-md);
}
@media (min-width: 640px) { #store-logo { width: 54px; height: 54px; font-size: 20px; border-radius: var(--radius-lg); } }
#store-logo img { width: 100%; height: 100%; object-fit: cover; }

#store-name { font-size: 17px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.25; }
@media (min-width: 640px) { #store-name { font-size: 19px; } }
#store-tagline { font-size: 12.5px; color: var(--muted); font-weight: 500; }

.store-open-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: var(--on-accent);
  background: var(--accent);
  padding: 2px 9px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}
.store-open-pill .size-1\.5 { background: var(--black); border-radius: var(--radius-full); display: inline-block; }

#wa-btn {
  height: 40px;
  min-width: 40px;
  padding: 0 12px;
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
  font-weight: 600;
  font-size: 13px;
  transition: background 0.15s ease, transform 0.15s ease;
}
#wa-btn:hover { background: var(--accent); }
#wa-btn:active { transform: scale(0.96); }
#wa-btn svg, #wa-btn svg.size-4 { width: 18px; height: 18px; fill: currentColor; color: currentColor; }

/* Search: white pill, icon inset, soft lime focus ring */
#search-input, #search-input-mobile, input[type="search"] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 48px;
  padding: 0 46px 0 48px;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
#search-input::placeholder, #search-input-mobile::placeholder, input[type="search"]::placeholder { color: var(--subtle); font-weight: 400; }
#search-input:hover, #search-input-mobile:hover, input[type="search"]:hover { border-color: #D2D2D2; }
#search-input:focus, #search-input-mobile:focus, input[type="search"]:focus {
  border-color: var(--black);
  box-shadow: 0 0 0 4px var(--accent-ring), 0 6px 18px rgba(0, 0, 0, 0.06);
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; display: none; }

/* Icon and clear button sit inside the pill, vertically centred */
:where(div, label, form):has(> input[type="search"]) { position: relative; }
:where(div, label, form):has(> input[type="search"]) > svg:first-child,
:where(div, label, form):has(> input[type="search"]) > svg:not(:last-child) {
  position: absolute;
  left: 18px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  color: var(--subtle);
  pointer-events: none;
  z-index: 1;
  transition: color 0.2s ease;
}
:where(div, label, form):has(> input[type="search"]:focus) > svg:first-child { color: var(--ink); }

#search-clear-desktop, #search-clear-mobile, [class*="search-clear"] {
  position: absolute;
  right: 12px;
  top: 50%;
  width: 26px;
  height: 26px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: var(--field);
  color: var(--muted);
  font-size: 11px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background 0.15s ease, color 0.15s ease;
}
#search-clear-desktop:hover, #search-clear-mobile:hover, [class*="search-clear"]:hover { background: var(--accent); color: var(--on-accent); }
#search-clear-desktop.hidden, #search-clear-mobile.hidden, [class*="search-clear"].hidden { display: none !important; }

/* ==========================================================================
   Hero, catalogue nav, pills
   ========================================================================== */
.store-hero { margin-top: 4px; }
.store-hero-card { background: var(--surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); }
.store-hero-title { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; }
@media (min-width: 640px) { .store-hero-title { font-size: 24px; } }
.store-hero-sub { font-size: 13px; color: var(--muted); }

#items-count-badge { background: var(--surface); color: var(--muted); box-shadow: var(--shadow-sm); }

#category-pills { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0; -webkit-overflow-scrolling: touch; }

.cat-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 18px;
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease;
}
.cat-pill:hover { background: var(--accent-light); }
.cat-pill.active { background: var(--black) !important; color: var(--accent) !important; box-shadow: none; }
.cat-pill .pill-count { font-size: 11px; opacity: 0.7; margin-left: 4px; }

/* ==========================================================================
   Product grid and cards
   ========================================================================== */
.store-product-grid, #items-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 640px)  { .store-product-grid, #items-grid { gap: 16px; } }
@media (min-width: 820px)  { .store-product-grid, #items-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
@media (min-width: 1024px) { .store-product-grid, #items-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } }

.store-card, .product-card, [data-item-id] {
  background: var(--surface);
  border-radius: var(--radius-xl);
  padding: 10px 10px 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
@media (min-width: 640px) { .store-card, .product-card, [data-item-id] { padding: 12px 12px 16px; } }
.store-card:hover, .product-card:hover, [data-item-id]:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }

.item-img-wrap, [data-item-id] .aspect-square {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
  background: var(--surface-soft);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}
.item-img-wrap img, [data-item-id] img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; }
.store-card:hover img, .product-card:hover img, [data-item-id]:hover img { transform: scale(1.04); }

.item-title, [data-item-id] h3 {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: 4px;
  padding: 0 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (min-width: 640px) { .item-title, [data-item-id] h3 { font-size: 15px; } }

.item-desc, [data-item-id] p {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.45;
  margin-bottom: 10px;
  padding: 0 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.item-price { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
@media (min-width: 640px) { .item-price { font-size: 16px; } }
.item-compare { font-size: 11.5px; color: var(--subtle); text-decoration: line-through; font-weight: 500; }

/* Add to cart: compact black pill, lime on hover and when added.
   Icons inside the button are visually hidden because the label already
   carries the "+" and the "Added" text, so nothing doubles up or overlaps. */
.btn-add-cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 40px;
  min-width: 88px;
  padding: 0 18px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: var(--black);
  color: #FFFFFF !important;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14);
  transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.btn-add-cart * { font-size: inherit; font-weight: inherit; line-height: inherit; color: inherit; }
.btn-add-cart svg, .btn-add-cart i {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}
.btn-add-cart:hover { background: var(--accent); color: var(--on-accent) !important; box-shadow: 0 4px 12px rgba(183, 219, 102, 0.5); }
.btn-add-cart:active { transform: scale(0.96); }

/* Added state: lime with a drawn check mark */
.btn-add-cart.added, .btn-add-cart.is-added, .btn-add-cart.in-cart, .btn-add-cart.success,
.btn-add-cart[data-added="true"], .btn-add-cart[aria-pressed="true"] {
  background: var(--accent);
  color: var(--on-accent) !important;
  box-shadow: none;
}
.btn-add-cart.added::before, .btn-add-cart.is-added::before, .btn-add-cart.in-cart::before, .btn-add-cart.success::before,
.btn-add-cart[data-added="true"]::before, .btn-add-cart[aria-pressed="true"]::before {
  content: "";
  width: 5px;
  height: 10px;
  margin: -2px 4px 0 0;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ==========================================================================
   Service cards: big photo, soft "booking panel" with price, duration chip
   and a Book button. Applies to cards marked as services
   (.service-card or data-item-type/data-type/data-kind="service") and to every
   card on a store whose search placeholder mentions "services".
   ========================================================================== */
body:has(input[type="search"][placeholder*="ervice" i]) :is(.store-product-grid, #items-grid) {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 18px;
}

@keyframes svc-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

:is(.service-card, [data-item-type="service"], [data-type="service"], [data-kind="service"], body:has(input[type="search"][placeholder*="ervice" i]) [data-item-id]) {
  justify-content: flex-start;
  padding: 12px;
  border-radius: 30px;
  background: var(--surface);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
  animation: svc-rise 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
:is(.service-card, [data-item-type="service"], [data-type="service"], [data-kind="service"], body:has(input[type="search"][placeholder*="ervice" i]) [data-item-id]):hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.1); }
:is(.store-product-grid, #items-grid) > :nth-child(2) { animation-delay: 0.06s; }
:is(.store-product-grid, #items-grid) > :nth-child(3) { animation-delay: 0.12s; }
:is(.store-product-grid, #items-grid) > :nth-child(4) { animation-delay: 0.18s; }
:is(.store-product-grid, #items-grid) > :nth-child(n+5) { animation-delay: 0.24s; }

/* Photo: 4:3, inner ring and a soft fade at the bottom */
:is(.service-card, [data-item-type="service"], [data-type="service"], [data-kind="service"], body:has(input[type="search"][placeholder*="ervice" i]) [data-item-id]) .item-img-wrap, :is(.service-card, [data-item-type="service"], [data-type="service"], [data-kind="service"], body:has(input[type="search"][placeholder*="ervice" i]) [data-item-id]) .aspect-square {
  aspect-ratio: 4 / 3;
  margin-bottom: 0;
  border-radius: 22px;
  background: linear-gradient(135deg, var(--accent-light), var(--surface-soft));
}
:is(.service-card, [data-item-type="service"], [data-type="service"], [data-kind="service"], body:has(input[type="search"][placeholder*="ervice" i]) [data-item-id]) .item-img-wrap::after, :is(.service-card, [data-item-type="service"], [data-type="service"], [data-kind="service"], body:has(input[type="search"][placeholder*="ervice" i]) [data-item-id]) .aspect-square::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, 0.22));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
  pointer-events: none;
}

:is(.service-card, [data-item-type="service"], [data-type="service"], [data-kind="service"], body:has(input[type="search"][placeholder*="ervice" i]) [data-item-id]) h3, :is(.service-card, [data-item-type="service"], [data-type="service"], [data-kind="service"], body:has(input[type="search"][placeholder*="ervice" i]) [data-item-id]) .item-title {
  margin: 0;
  padding: 16px 6px 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

/* Booking panel: price and duration on the left, Book on the right */
:is(.service-card, [data-item-type="service"], [data-type="service"], [data-kind="service"], body:has(input[type="search"][placeholder*="ervice" i]) [data-item-id]) > :last-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding: 12px 12px 12px 18px;
  border: 0;
  border-radius: 22px;
  background: var(--surface-soft);
}
:is(.service-card, [data-item-type="service"], [data-type="service"], [data-kind="service"], body:has(input[type="search"][placeholder*="ervice" i]) [data-item-id]) > :last-child > :first-child {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
  white-space: nowrap;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
:is(.service-card, [data-item-type="service"], [data-type="service"], [data-kind="service"], body:has(input[type="search"][placeholder*="ervice" i]) [data-item-id]) > :last-child > :first-child > :not(.item-price):not(.item-compare):not(:first-child) {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  background: var(--accent-light);
  color: var(--ink);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
}

:is(.service-card, [data-item-type="service"], [data-type="service"], [data-kind="service"], body:has(input[type="search"][placeholder*="ervice" i]) [data-item-id]) .btn-add-cart { height: 46px; min-width: 108px; padding: 0 20px; font-size: 14px; }
:is(.service-card, [data-item-type="service"], [data-type="service"], [data-kind="service"], body:has(input[type="search"][placeholder*="ervice" i]) [data-item-id]) .btn-add-cart::after {
  content: "";
  width: 6px;
  height: 6px;
  margin-left: 2px;
  border: solid currentColor;
  border-width: 2px 2px 0 0;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
:is(.service-card, [data-item-type="service"], [data-type="service"], [data-kind="service"], body:has(input[type="search"][placeholder*="ervice" i]) [data-item-id]) .btn-add-cart:hover::after { transform: translateX(3px) rotate(45deg); }

/* Service card title (h4 in the generated markup) */
:is(.service-card, [data-item-type="service"], [data-type="service"], [data-kind="service"], body:has(input[type="search"][placeholder*="ervice" i]) [data-item-id]) h4 { margin: 0; padding: 16px 6px 0; font-size: 18px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; color: var(--ink); }
/* Price + compare price / duration */
.item-price-wrap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; min-width: 0; }
.item-price-wrap .item-price { white-space: nowrap; }

/* Empty state */
#empty-state { padding: 48px 16px; text-align: center; }
#empty-state .size-16 {
  border-radius: 50%;
  background: var(--surface);
  color: var(--subtle);
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
}
#empty-state .size-16 svg { width: 30px; height: 30px; }
#empty-state p.font-bold { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
#empty-state p.text-xs { font-size: 12.5px; color: var(--subtle); }
#empty-clear-btn { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
#empty-clear-btn:hover { background: var(--accent); }

/* ==========================================================================
   Floating cart bar. Compact black pill, hides while a sheet is open.
   ========================================================================== */
#cart-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 50;
  max-width: 400px;
  margin: 0 auto;
  padding: 0 16px;
  pointer-events: none;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
}
#cart-bar.translate-y-24,
body:has(.aqivo-modal-sheet.open) #cart-bar { transform: translateY(7rem); opacity: 0; }

#view-cart-btn {
  pointer-events: auto;
  width: 100%;
  height: 56px;
  border-radius: var(--radius-full);
  background: var(--black);
  color: #FFFFFF;
  box-shadow: var(--shadow-float);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 22px 0 6px;
  font-weight: 600;
  transition: transform 0.15s ease;
}
#view-cart-btn:active { transform: scale(0.98); }
#view-cart-btn > div:first-child {
  height: 44px;
  padding: 0 18px 0 7px;
  border-radius: var(--radius-full);
  background: var(--accent);
  color: var(--on-accent);
}
#cart-count {
  min-width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--black);
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}
#cart-total { font-size: 15px; font-weight: 700; color: #FFFFFF; }

/* ==========================================================================
   Footer: same colour as the page, separated by a hairline
   ========================================================================== */
.site-storefront-footer {
  background: var(--bg);
  color: var(--ink);
  padding: 40px 20px calc(110px + env(safe-area-inset-bottom, 0px));
  margin-top: 40px;
  border-top: 1px solid var(--border-strong);
  border-radius: 0;
}
.site-storefront-footer h2, .site-storefront-footer h3, .site-storefront-footer h4 { color: var(--ink); font-weight: 700; }
.site-storefront-footer p, .site-storefront-footer li, .site-storefront-footer small { color: var(--muted); font-size: 13px; }
.site-storefront-footer a { color: var(--muted); transition: color 0.15s ease; }
.site-storefront-footer a:hover { color: var(--ink); }

/* ==========================================================================
   Product / service detail pages
   ========================================================================== */
.pdp-content-grid { background: var(--surface); border-radius: 28px; box-shadow: var(--shadow-md); }
.pdp-visual-col .aspect-square { background: var(--surface-soft); border-radius: var(--radius-xl); }

.pdp-thumbnails-strip > * {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  padding: 6px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.pdp-thumbnails-strip > *.active, .pdp-thumbnails-strip > *[aria-current="true"] { border-color: var(--black); background: var(--surface-soft); }
.pdp-thumbnails-strip img { width: 100%; height: 100%; object-fit: contain; }

.pdp-back-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 14px 0 10px;
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.pdp-back-link:hover { background: var(--accent); color: var(--on-accent); }

.pdp-category-tag {
  background: var(--accent) !important;
  color: var(--on-accent) !important;
  border-radius: var(--radius-full) !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  padding: 4px 12px !important;
}
.pdp-prep-chip { background: var(--surface-soft) !important; color: var(--muted) !important; border-radius: var(--radius-full) !important; padding: 4px 12px !important; }
.pdp-item-title { font-weight: 700; letter-spacing: -0.02em; }
.pdp-price-bold { color: var(--ink) !important; font-weight: 700 !important; letter-spacing: -0.02em; }

.pdp-cta-add-bag {
  height: 56px !important;
  border-radius: var(--radius-lg) !important;
  background: var(--accent) !important;
  color: var(--on-accent) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  box-shadow: none !important;
  transition: background 0.15s ease, transform 0.15s ease;
}
.pdp-cta-add-bag:hover { background: var(--accent-hover) !important; }
.pdp-cta-add-bag:active { transform: scale(0.98); }

.pdp-trust-grid, .pdp-accordion-group { border-color: var(--border-strong) !important; }
.pdp-related-title { font-weight: 700; }

.pdp-options-section { margin-bottom: 20px; }
.pdp-option-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.pdp-option-title { font-size: 13px; font-weight: 700; }
.pdp-chips-grid { display: flex; flex-wrap: wrap; gap: 8px; }

.pdp-chip-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 16px;
  border-radius: var(--radius-full);
  background: var(--surface);
  font-size: 13px;
  font-weight: 600;
  border: 1.5px solid var(--border-strong);
  box-shadow: var(--shadow-sm);
  transition: all 0.15s ease;
}
.pdp-chip-btn:hover { border-color: var(--black); background: var(--surface-soft); }
.pdp-chip-btn.active { background: var(--black) !important; color: var(--accent) !important; border-color: var(--black) !important; }

.pdp-qty-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}

/* ==========================================================================
   Reusable components
   ========================================================================== */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: background 0.15s ease, transform 0.15s ease;
}
.icon-btn:hover { background: var(--accent); }
.icon-btn:active { transform: scale(0.95); }

.btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 56px;
  border-radius: var(--radius-lg);
  background: var(--accent);
  color: var(--on-accent);
  font-size: 15px;
  font-weight: 600;
  transition: background 0.15s ease, transform 0.15s ease;
}
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:active { transform: scale(0.98); }

.badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border-radius: var(--radius-full);
  background: var(--field);
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 600;
}
.badge--lime { background: var(--accent); color: var(--on-accent); }

/* Info card: guest checkout notice, store collection, delivery note */
.info-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1.5px solid var(--border-strong);
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
}
.info-card strong, .info-card-title { color: var(--ink); font-weight: 600; }
.info-card-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.info-card--lime { background: var(--accent-light); border-color: transparent; }

/* Cart line */
.cart-line {
  display: flex;
  gap: 14px;
  align-items: center;
  background: var(--surface);
  border-radius: var(--radius-xl);
  padding: 12px;
  box-shadow: var(--shadow-sm);
  position: relative;
}
.cart-line-img { width: 76px; height: 76px; flex-shrink: 0; border-radius: var(--radius-lg); background: var(--surface-soft); overflow: hidden; }
.cart-line-img img { width: 100%; height: 100%; object-fit: cover; }
.cart-line-title { font-size: 15px; font-weight: 600; }
.cart-line-meta { font-size: 12px; color: var(--subtle); }
.cart-line-price { font-size: 16px; font-weight: 600; }
.cart-line-delete {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--danger-bg);
  color: var(--danger);
  border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
}

/* Quantity stepper */
.qty-stepper {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: var(--radius-full);
  background: var(--surface);
  border: 2px solid var(--surface-soft);
  box-shadow: var(--shadow-sm);
}
.qty-stepper .qty-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  font-size: 18px;
  font-weight: 500;
  box-shadow: 0 0 0 1.5px var(--border-strong);
  transition: background 0.15s ease;
}
.qty-stepper .qty-btn:hover { background: var(--accent); box-shadow: none; }
.qty-stepper .qty-value { min-width: 28px; text-align: center; font-weight: 600; font-size: 15px; }

/* Promo field */
.promo-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 52px;
  padding: 0 18px;
  border-radius: var(--radius-lg);
  background: var(--field);
}
.promo-field input { flex: 1; min-width: 0; background: transparent; outline: none; font-size: 13.5px; }
.promo-field input::placeholder { color: var(--subtle); }
.promo-field button { font-size: 13px; font-weight: 600; }

/* Summary card and rows */
.summary-card { background: var(--surface); border-radius: var(--radius-lg); padding: 4px 18px; box-shadow: var(--shadow-sm); }
.summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  font-size: 13px;
  color: var(--muted);
  border-bottom: 1.5px dashed var(--border-strong);
}
.summary-row strong { color: var(--ink); font-weight: 600; font-size: 15px; }
.summary-row:last-child { border-bottom: 0; }
.summary-row.total strong { font-size: 17px; font-weight: 700; }

/* Bottom nav */
.bottom-nav {
  position: fixed;
  left: 0; right: 0;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  z-index: 50;
  max-width: 440px;
  margin: 0 auto;
  height: 64px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--black);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-float);
}
.bottom-nav .nav-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  min-width: 44px;
  padding: 0 12px;
  border-radius: var(--radius-full);
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 500;
  transition: background 0.15s ease, color 0.15s ease;
}
.bottom-nav .nav-item.active { background: var(--accent); color: var(--on-accent); padding: 0 18px; }

.price-row { display: flex; align-items: baseline; gap: 8px; }

/* ==========================================================================
   Cart and checkout sheet
   ========================================================================== */
.aqivo-modal-veil {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 90;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.aqivo-modal-veil.open { opacity: 1; pointer-events: auto; }

.aqivo-modal-sheet {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 100;
  max-width: 520px;
  margin: 0 auto;
  max-height: 92vh;
  background: var(--bg);
  border-radius: 28px 28px 0 0;
  box-shadow: var(--shadow-sheet);
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}
.aqivo-modal-sheet.open { transform: translateY(0); }

@media (min-width: 640px) {
  .aqivo-modal-sheet {
    bottom: auto;
    top: 50%;
    transform: translateY(-40%) scale(0.96);
    opacity: 0;
    pointer-events: none;
    border-radius: 28px;
    max-height: 86vh;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
  }
  .aqivo-modal-sheet.open { transform: translateY(-50%) scale(1) !important; opacity: 1 !important; pointer-events: auto !important; }
}

.aqivo-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.aqivo-sheet-title { font-size: 17px; font-weight: 700; letter-spacing: -0.015em; display: flex; align-items: center; gap: 10px; }

.aqivo-sheet-close,
.aqivo-sheet-header button[aria-label*="lose" i] {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  background: var(--bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}
.aqivo-sheet-close:hover,
.aqivo-sheet-header button[aria-label*="lose" i]:hover { background: var(--accent); }

.aqivo-sheet-back,
.aqivo-sheet-header button[aria-label*="ack" i] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 12px 0 8px;
  border-radius: var(--radius-md);
  font-size: 13.5px;
  font-weight: 600;
  transition: background 0.15s ease;
}
.aqivo-sheet-back:hover,
.aqivo-sheet-header button[aria-label*="ack" i]:hover { background: var(--bg); }

.aqivo-sheet-body {
  padding: 18px 20px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Safeguard: rows inside the scrolling body must never shrink to zero height */
.aqivo-sheet-body > * { flex-shrink: 0; }

/* Form labels get breathing room even when the markup lacks spacing utilities */
.aqivo-sheet-body label:not(.pay-card-option) {
  display: block;
  margin: 0 0 8px;
  padding-left: 4px;
  line-height: 1.3;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}
.aqivo-sheet-body label:not(.pay-card-option) span { font-weight: 500; color: var(--subtle); letter-spacing: 0.04em; }

.aqivo-sheet-footer {
  padding: 14px 20px calc(20px + env(safe-area-inset-bottom, 0px));
  background: var(--surface);
  border-top: 1px solid var(--border);
}
.aqivo-sheet-footer > button:only-child,
.aqivo-sheet-footer .btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 56px;
  border-radius: var(--radius-full);
  background: var(--accent);
  color: var(--on-accent);
  font-size: 15px;
  font-weight: 600;
  transition: background 0.15s ease, transform 0.15s ease;
}
.aqivo-sheet-footer > button:only-child:hover { background: var(--accent-hover); }
.aqivo-sheet-footer > button:only-child:active { transform: scale(0.98); }

.toggle-pills { display: flex; gap: 6px; background: var(--field); padding: 4px; border-radius: var(--radius-full); }
.toggle-pill-btn {
  flex: 1;
  height: 42px;
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  transition: all 0.15s ease;
}
.toggle-pill-btn.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }

.pay-card-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1.5px solid var(--border);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.pay-card-option.selected { border-color: var(--black); background: var(--surface-soft); }
.pay-card-option input[type="radio"] { accent-color: var(--black); width: 16px; height: 16px; margin-top: 2px; flex-shrink: 0; }

.checkout-input {
  display: block;
  width: 100%;
  height: 48px;
  padding: 0 16px;
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1.5px solid var(--border-strong);
  font-size: 14px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.checkout-input::placeholder { color: var(--subtle); }
.checkout-input:focus { border-color: var(--black); box-shadow: 0 0 0 3px var(--accent-ring); }
select.checkout-input { cursor: pointer; }
textarea.checkout-input { height: auto; min-height: 92px; padding: 12px 16px; line-height: 1.5; resize: vertical; }

/* ==========================================================================
   Booking flow (aqivo-booking.js): steps, date strip, time slots, confirmation
   ========================================================================== */
.btn-primary[disabled], .aqivo-sheet-footer > button:only-child[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; }

.bk-steps { display: flex; gap: 6px; list-style: none; font-size: 11.5px; font-weight: 600; color: var(--subtle); }
.bk-steps li { flex: 1; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.bk-steps i { width: 22px; height: 22px; flex: none; border-radius: 50%; background: var(--field); display: grid; place-items: center; font-style: normal; font-size: 11px; }
.bk-steps li.on { color: var(--ink); }
.bk-steps li.on i { background: var(--black); color: var(--accent); }
.bk-steps li.done i { background: var(--accent); color: var(--on-accent); }

.bk-label { margin: 0 0 8px 4px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.bk-staff { display: flex; flex-wrap: wrap; gap: 8px; }
.bk-chip { height: 40px; padding: 0 16px; border-radius: var(--radius-full); background: var(--surface); box-shadow: var(--shadow-sm); font-size: 13px; font-weight: 600; transition: background 0.15s ease, color 0.15s ease; }
.bk-chip:hover { background: var(--accent-light); }
.bk-chip.active { background: var(--black); color: var(--accent); }

.bk-dates { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; scroll-snap-type: x proximity; }
.bk-date {
  flex: none; width: 62px; padding: 10px 0; scroll-snap-align: start;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  border-radius: 20px; background: var(--surface); box-shadow: var(--shadow-sm);
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.bk-date span { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.bk-date b { font-size: 20px; font-weight: 700; line-height: 1.1; }
.bk-date small { font-size: 10.5px; color: var(--subtle); }
.bk-date:hover:not(:disabled) { background: var(--accent-light); }
.bk-date:active:not(:disabled) { transform: scale(0.96); }
.bk-date.active { background: var(--black); color: #FFFFFF; }
.bk-date.active span, .bk-date.active small { color: var(--accent); }
.bk-date:disabled { opacity: 0.45; cursor: not-allowed; background: transparent; box-shadow: none; border: 1.5px dashed var(--border-strong); }

.bk-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.bk-slot { height: 44px; border-radius: var(--radius-full); background: var(--surface); box-shadow: var(--shadow-sm); font-size: 13px; font-weight: 600; transition: background 0.15s ease, transform 0.15s ease; }
.bk-slot:hover { background: var(--accent-light); }
.bk-slot:active { transform: scale(0.96); }
.bk-slot.active { background: var(--accent); color: var(--on-accent); box-shadow: inset 0 0 0 2px var(--black); }

.bk-hint { padding: 16px; border: 1.5px dashed #D0D0D0; border-radius: var(--radius-lg); background: rgba(255, 255, 255, 0.6); color: var(--muted); font-size: 13px; text-align: center; }
.bk-error { padding: 12px 16px; border-radius: 16px; background: #FDECEC; color: #B3262B; font-size: 13px; font-weight: 600; }

.bk-done { text-align: center; padding: 8px 8px 4px; }
.bk-check { display: grid; place-items: center; width: 68px; height: 68px; margin: 0 auto 12px; border-radius: 50%; background: var(--accent); color: var(--on-accent); animation: bk-pop 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes bk-pop { from { transform: scale(0.4); opacity: 0; } to { transform: none; opacity: 1; } }
.bk-done h2 { margin-bottom: 4px; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.bk-done p { font-size: 13px; color: var(--muted); line-height: 1.5; }
.bk-done b { color: var(--ink); }
.bk-actions { display: flex; gap: 8px; }
.bk-btn { flex: 1; height: 48px; border-radius: var(--radius-full); background: var(--surface); box-shadow: var(--shadow-sm); font-size: 13px; font-weight: 600; transition: transform 0.15s ease, background 0.15s ease; }
.bk-btn:hover { background: var(--accent-light); }
.bk-btn:active { transform: scale(0.97); }
.bk-btn--dark { background: var(--black); color: #FFFFFF; box-shadow: none; }
.bk-btn--dark:hover { background: #1b1b1b; }
.bk-link { display: block; text-align: center; font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   Custom builder sections
   ========================================================================== */
#bz-custom-sections { max-width: 42rem; margin: 16px auto; padding: 0 16px; }
.sx-empty {
  padding: 14px 18px;
  margin: 12px 0;
  border: 1.5px dashed #D0D0D0;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.6);
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
  text-align: center;
}
.sx-sec { margin: 24px 0; }
.pgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.ctiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.ctile { background: var(--surface); border-radius: var(--radius-lg); padding: 14px; display: flex; flex-direction: column; gap: 4px; box-shadow: var(--shadow-sm); }
.insta-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.g-reviews { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.g-review { background: var(--surface); border-radius: var(--radius-lg); padding: 14px; font-size: 13px; color: #3A3A3A; box-shadow: var(--shadow-sm); }

/* ==========================================================================
   Overrides for markup that hardcodes the old purple and white-on-accent look
   ========================================================================== */
.bg-\[\#5B21F5\].text-white, .bg-emerald-500.text-white { color: var(--on-accent); }
.bg-\[\#5B21F5\].text-white:hover, .bg-emerald-500.text-white:hover { background-color: var(--accent-hover); }

#store-hero-wa-btn {
  height: 44px;
  padding: 0 20px;
  border-radius: var(--radius-lg);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  box-shadow: none;
}
#store-hero-wa-btn:hover { background: var(--accent-hover); }

::selection { background: var(--accent); color: var(--on-accent); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important; }
}