/* ============================================================================
   Squishora · Strawberry Cream & Butter — shared theme
   ----------------------------------------------------------------------------
   Fonts + the few component styles the Tailwind CDN can't express inline.
   Loaded on every page after tailwind.css.
   ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

:root {
  --sq-primary: #fb7185;
  --sq-primary-deep: #a93349;
  --sq-butter: #fde047;
  --sq-lavender: #e9d5ff;
  --sq-mint: #a7f3d0;
  --sq-ink: #38282e;
  --sq-muted: #7c626c;
  --sq-bg: #fff7f8;
  --sq-cream: #fffafb;
  --sq-blush: #fae8eb;
}

body { background: var(--sq-bg); color: var(--sq-ink); font-family: "Plus Jakarta Sans", system-ui, sans-serif; }
* { -webkit-tap-highlight-color: transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--sq-blush); border-radius: 999px; }
::-webkit-scrollbar-track { background: transparent; }

/* Material Symbols font family must be applied to the icon spans */
.material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-weight: normal; font-style: normal; line-height: 1;
  letter-spacing: normal; text-transform: none; white-space: nowrap;
  word-wrap: normal; direction: ltr; font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 48;
  -webkit-font-feature-settings: "liga"; font-feature-settings: "liga"; -webkit-font-smoothing: antialiased;
}

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

/* Tactile product card */
.sq-card { background: var(--sq-cream); border: 1px solid rgba(251,113,133,.15);
  box-shadow: 0 8px 24px -4px rgba(251,113,133,.12), 0 2px 6px -1px rgba(56,40,46,.03); }
.sq-card:hover { transform: translateY(-4px);
  box-shadow: 0 16px 36px -6px rgba(251,113,133,.2), 0 4px 12px -2px rgba(56,40,46,.05); }
.sq-card { transition: transform .3s ease, box-shadow .3s ease; }

/* Pill input shell */
.sq-input { background: var(--sq-blush); border: 1.5px solid transparent; border-radius: 9999px;
  color: var(--sq-ink); height: 48px; box-shadow: inset 0 2px 4px 0 rgba(56,40,46,.04); }
.sq-input:focus { background:#fff; border-color: var(--sq-primary); outline:none;
  box-shadow: 0 0 0 4px rgba(251,113,133,.2); }
.sq-input::placeholder { color: var(--sq-muted); }

/* Primary button */
.sq-btn { background: var(--sq-primary); color:#fff; border-radius:9999px;
  box-shadow: 0 8px 20px -6px rgba(251,113,133,.4); transition: all .18s ease; }
.sq-btn:hover { background: var(--sq-primary-deep); transform: translateY(-2px); }
.sq-btn:active { transform: scale(.97); }
.sq-btn:disabled { opacity:.5; cursor:not-allowed; transform:none; }

/* skeleton shimmer */
.sq-skel { background: linear-gradient(90deg, var(--sq-blush) 25%, #fff 37%, var(--sq-blush) 63%);
  background-size: 400% 100%; animation: sqshimmer 1.4s ease infinite; border-radius: 16px; }
@keyframes sqshimmer { 0%{background-position:100% 0} 100%{background-position:-100% 0} }