/* ==========================================================================
   Satya Since 1973 — Storefront reset and primitives
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  min-block-size: 100vh;
  font-family: var(--s-font-body);
  font-size: var(--s-text-md);
  line-height: 1.6;
  color: var(--s-ink);
  background-color: var(--s-cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  /* The phone's bottom navigation is fixed, so the last thing on every page
     would otherwise sit underneath it. */
  padding-block-end: var(--s-bottomnav-height);
}
@media (min-width: 62rem) { body { padding-block-end: 0; } }

img, picture, svg, video {
  display: block;
  max-inline-size: 100%;
}

input, button, textarea, select { font: inherit; color: inherit; }

button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--s-font-display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

p { text-wrap: pretty; }

/* Only the indent, not all four sides.

   This was `padding: 0`, and an attribute selector out-specifies a single
   class — so every component that set padding on a `ul[role="list"]` with one
   class lost silently, whatever the file order. The trust strip declared
   `padding-block` twice, in two stylesheets, and rendered with its text hard
   against the top and bottom edges of the maroon band for months. The reset
   exists to remove the browser's 40px list indent; that is all it should do. */
ul[role="list"], ol[role="list"] { list-style: none; padding-inline-start: 0; }

:focus-visible {
  outline: 2px solid var(--s-maroon-700);
  outline-offset: 2px;
  border-radius: 3px;
}

[hidden] { display: none !important; }

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */

.s-wrap {
  inline-size: 100%;
  max-inline-size: var(--s-max);
  margin-inline: auto;
  padding-inline: var(--s-gutter);
}

.s-section { padding-block: var(--s-10); }
@media (min-width: 48rem) { .s-section { padding-block: var(--s-16); } }

.s-stack { display: grid; gap: var(--s-4); align-content: start; }

.s-visually-hidden {
  position: absolute !important;
  inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap;
}

.s-skip {
  position: absolute;
  inset-inline-start: -9999px;
  z-index: 999;
}
.s-skip:focus {
  inset-inline-start: var(--s-4);
  inset-block-start: var(--s-4);
  padding: var(--s-3) var(--s-4);
  background-color: var(--s-maroon-700);
  color: var(--s-white);
  border-radius: var(--s-radius-sm);
}

/* --------------------------------------------------------------------------
   Section headings — the same shape everywhere
   -------------------------------------------------------------------------- */

.s-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-4);
  margin-block-end: var(--s-6);
}

.s-head__eyebrow {
  font-size: var(--s-text-2xs);
  font-weight: 600;
  letter-spacing: var(--s-tracking-caps);
  text-transform: uppercase;
  color: var(--s-gold-700);
  margin-block-end: var(--s-2);
}

.s-head__title {
  font-size: var(--s-text-2xl);
  color: var(--s-maroon-900);
}
@media (min-width: 48rem) { .s-head__title { font-size: var(--s-text-3xl); } }

.s-head__more {
  flex: none;
  font-size: var(--s-text-sm);
  font-weight: 600;
  color: var(--s-maroon-700);
  border-block-end: 1px solid currentColor;
  padding-block-end: 2px;
  white-space: nowrap;
}
.s-head__more:hover { color: var(--s-gold-700); }

/* A short gold rule under a heading — the one flourish the brand earns. */
.s-rule {
  inline-size: 3rem;
  block-size: 2px;
  border: 0;
  margin-block-start: var(--s-3);
  background-image: linear-gradient(90deg, var(--s-gold-500), var(--s-gold-300));
}
.s-head--centre { flex-direction: column; align-items: center; text-align: center; }
.s-head--centre .s-rule { margin-inline: auto; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.s-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-block-size: 2.875rem;
  padding-inline: var(--s-6);
  border: 1px solid transparent;
  border-radius: var(--s-radius-pill);
  font-size: var(--s-text-sm);
  font-weight: 600;
  letter-spacing: var(--s-tracking-wide);
  text-align: center;
  cursor: pointer;
  transition: background-color var(--s-fast) var(--s-ease),
              color var(--s-fast) var(--s-ease),
              border-color var(--s-fast) var(--s-ease),
              transform var(--s-fast) var(--s-ease),
              box-shadow var(--s-fast) var(--s-ease);
}

.s-btn:disabled, .s-btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none !important;
}

.s-btn--primary {
  background-color: var(--s-maroon-700);
  color: var(--s-white);
  box-shadow: var(--s-shadow-sm);
}
.s-btn--primary:hover:not(:disabled) {
  background-color: var(--s-maroon-600);
  transform: translateY(-1px);
  box-shadow: var(--s-shadow);
}

.s-btn--gold {
  background-image: linear-gradient(135deg, var(--s-gold-500), var(--s-gold-400));
  color: var(--s-maroon-900);
  box-shadow: var(--s-shadow-sm);
}
.s-btn--gold:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--s-shadow); }

.s-btn--ghost {
  background-color: transparent;
  border-color: var(--s-line);
  color: var(--s-ink);
}
.s-btn--ghost:hover:not(:disabled) { border-color: var(--s-maroon-700); color: var(--s-maroon-700); }

.s-btn--onDark {
  background-color: transparent;
  border-color: rgb(255 255 255 / 0.4);
  color: var(--s-white);
}
.s-btn--onDark:hover:not(:disabled) { background-color: var(--s-white); color: var(--s-maroon-800); }

.s-btn--block { inline-size: 100%; }
.s-btn--sm { min-block-size: 2.25rem; padding-inline: var(--s-4); font-size: var(--s-text-xs); }

/* A busy button says so, and cannot be pressed twice. */
.s-btn.is-busy { position: relative; color: transparent !important; pointer-events: none; }
.s-btn.is-busy::after {
  content: "";
  position: absolute;
  inline-size: 1.05rem; block-size: 1.05rem;
  border: 2px solid currentColor;
  border-block-start-color: transparent;
  border-radius: 50%;
  color: var(--s-white);
  animation: s-spin 640ms linear infinite;
}
.s-btn--ghost.is-busy::after, .s-btn--gold.is-busy::after { color: var(--s-maroon-700); }

@keyframes s-spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   Icon buttons and badges
   -------------------------------------------------------------------------- */

.s-icon-btn {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: 50%;
  color: inherit;
  transition: background-color var(--s-fast) var(--s-ease), color var(--s-fast) var(--s-ease);
}
.s-icon-btn:hover { background-color: rgb(93 0 3 / 0.07); color: var(--s-maroon-700); }
.s-icon-btn svg { inline-size: 1.375rem; block-size: 1.375rem; }

.s-icon-btn__count {
  position: absolute;
  inset-block-start: 0.25rem;
  inset-inline-end: 0.15rem;
  min-inline-size: 1.15rem;
  block-size: 1.15rem;
  padding-inline: 0.25rem;
  display: grid;
  place-items: center;
  border-radius: var(--s-radius-pill);
  background-color: var(--s-gold-500);
  color: var(--s-maroon-900);
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1;
}

.s-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.6rem;
  border-radius: var(--s-radius-pill);
  font-size: var(--s-text-2xs);
  font-weight: 700;
  letter-spacing: var(--s-tracking-wide);
  text-transform: uppercase;
}
.s-tag--sale { background-color: var(--s-maroon-700); color: var(--s-white); }
.s-tag--new { background-image: linear-gradient(135deg, var(--s-gold-500), var(--s-gold-300)); color: var(--s-maroon-900); }
.s-tag--out { background-color: var(--s-ink); color: var(--s-white); }
.s-tag--soft { background-color: var(--s-sage-100); color: var(--s-sage-600); }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.s-input, .s-select, .s-textarea {
  inline-size: 100%;
  min-block-size: 2.875rem;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--s-line);
  border-radius: var(--s-radius-sm);
  background-color: var(--s-surface);
  font-size: var(--s-text-md);
  transition: border-color var(--s-fast) var(--s-ease), box-shadow var(--s-fast) var(--s-ease);
}
.s-input:focus, .s-select:focus, .s-textarea:focus {
  outline: none;
  border-color: var(--s-maroon-700);
  box-shadow: 0 0 0 3px rgb(93 0 3 / 0.10);
}
.s-textarea { min-block-size: 6rem; resize: vertical; }

.s-label {
  display: block;
  margin-block-end: var(--s-2);
  font-size: var(--s-text-sm);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Skeletons — shown while something is genuinely loading, never as decoration
   -------------------------------------------------------------------------- */

.s-skeleton {
  border-radius: var(--s-radius-sm);
  background-image: linear-gradient(90deg, var(--s-line-soft) 25%, var(--s-line) 37%, var(--s-line-soft) 63%);
  background-size: 400% 100%;
  animation: s-shimmer 1.3s ease-in-out infinite;
}
@keyframes s-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) { .s-skeleton { animation: none; } }

/* --------------------------------------------------------------------------
   Scrim, shared by the drawer, the modal and the mobile menu
   -------------------------------------------------------------------------- */

.s-scrim {
  position: fixed;
  inset: 0;
  z-index: var(--s-z-scrim);
  background-color: rgb(28 0 1 / 0.5);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity var(--s-base) var(--s-ease);
}
.s-scrim.is-open { opacity: 1; }

/* Stops the page behind a drawer or modal scrolling away under the finger. */
body.s-locked { overflow: hidden; }

/* The page itself too. Phone browsers scroll the root element, so a lock on the
   body alone let the page behind an open menu move under the finger and take
   the swipe meant for the menu. */
html:has(body.s-locked) { overflow: hidden; overscroll-behavior: none; }