/* SunnahSouq design tokens. Keep these values in sync with the Astro storefront. */
body.ssb-active {
  --ss-bg: #F8F6EF;
  --ss-surface: #FFFFFF;
  --ss-primary: #173D2B;
  --ss-primary-strong: #102D20;
  --ss-text: #222522;
  --ss-muted: #6E756E;
  --ss-sage: #809081;
  --ss-accent: #B38B4D;
  --ss-accent-soft: #F1E9DB;
  --ss-border: #E5E1D7;
  --ss-danger: #A5483F;
  --ss-danger-soft: #F8E9E6;
  --ss-success-soft: #E7F1EB;
  --ss-radius-sm: 10px;
  --ss-radius-md: 16px;
  --ss-radius-lg: 24px;
  --ss-shadow: 0 14px 40px rgba(23, 61, 43, .08);
  --ss-shell: 1240px;
  background: var(--ss-bg);
  color: var(--ss-text);
}

body.ssb-active,
body.ssb-active input,
body.ssb-active select,
body.ssb-active textarea,
body.ssb-active button {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body.ssb-active a { color: var(--ss-primary); }
body.ssb-active a:hover { color: var(--ss-primary-strong); }
body.ssb-active ::selection { background: var(--ss-primary); color: #fff; }

body.ssb-active input[type="text"],
body.ssb-active input[type="email"],
body.ssb-active input[type="tel"],
body.ssb-active input[type="password"],
body.ssb-active input[type="search"],
body.ssb-active input[type="number"],
body.ssb-active select,
body.ssb-active textarea {
  border: 1px solid var(--ss-border);
  border-radius: 12px;
  background: var(--ss-surface);
  color: var(--ss-text);
  min-height: 48px;
  box-shadow: none;
}

body.ssb-active input:focus,
body.ssb-active select:focus,
body.ssb-active textarea:focus {
  outline: 2px solid color-mix(in srgb, var(--ss-primary) 22%, transparent);
  outline-offset: 1px;
  border-color: var(--ss-primary);
}

body.ssb-active button,
body.ssb-active .button,
body.ssb-active input[type="submit"] {
  border-radius: 12px;
}

body.ssb-active .screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}

.ssb-shell {
  width: min(calc(100% - 40px), var(--ss-shell));
  margin-inline: auto;
}

@media (max-width: 720px) {
  .ssb-shell { width: min(calc(100% - 28px), var(--ss-shell)); }
}