/* Salim Distro redesign: base components (Wave 1, 2026-09-22)
   Source: REDESIGN_MOCKUP_2026-09-22/styles.css + mockup.css (mockup.css wins).
   Rules for this sheet:
   - Every selector starts with .sdx-root (the body class) and contains an sdx- class.
     No bare element selectors, no WooCommerce class selectors.
   - Values come from sdx-tokens.css. Literal values are limited to font-weight,
     line-height, hairline border widths (1px/2px), percentages, grid fractions and
     layout keywords. Media queries use literal px because custom properties do not
     work inside @media; 640px / 980px are --sdx-bp-sm / --sdx-bp-lg.
   - Buttons: never give an .sdx-btn type="submit". The live child theme paints
     button[type=submit] orange with !important (style.css:53-62). A <button> with no
     type attribute still submits its form. */

/* ---------- layout helpers ---------- */
.sdx-root .sdx-shell {
  width: min(var(--sdx-shell-max), calc(100% - var(--sdx-shell-gutter)));
  margin-inline: auto;
  box-sizing: border-box;
}
.sdx-root .sdx-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.sdx-root .sdx-kicker {
  margin: 0 0 var(--sdx-space-18);
  color: var(--sdx-orange);
  font: 600 var(--sdx-text-11)/1.2 var(--sdx-mono);
  letter-spacing: var(--sdx-track-kicker);
  text-transform: uppercase;
}
.sdx-root .sdx-kicker--light { color: var(--sdx-kicker-light); }

/* ---------- buttons ---------- */
.sdx-root .sdx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sdx-space-8);
  box-sizing: border-box;
  min-height: var(--sdx-control-h);
  margin: 0;
  padding: 0 var(--sdx-space-24);
  border: 1px solid transparent;
  border-radius: var(--sdx-radius-crisp);
  background: transparent;
  box-shadow: none;
  color: var(--sdx-ink);
  font: 700 var(--sdx-text-16)/1.2 var(--sdx-sans);
  letter-spacing: var(--sdx-track-button);
  text-decoration: none;
  text-transform: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--sdx-dur-fast) ease, background var(--sdx-dur-fast) ease,
    color var(--sdx-dur-fast) ease, border-color var(--sdx-dur-fast) ease;
}
.sdx-root .sdx-btn:hover { transform: var(--sdx-btn-lift); text-decoration: none; }
.sdx-root .sdx-btn:focus-visible { outline: var(--sdx-focus-ring); outline-offset: var(--sdx-focus-offset); }
.sdx-root .sdx-btn[disabled],
.sdx-root .sdx-btn[aria-disabled="true"] { opacity: .5; cursor: default; transform: none; }

.sdx-root .sdx-btn--orange { background: var(--sdx-orange-btn); color: var(--sdx-on-accent); }
.sdx-root .sdx-btn--orange:hover { background: var(--sdx-orange-btn-hover); color: var(--sdx-on-accent); }
.sdx-root .sdx-btn--ink { background: var(--sdx-forest); color: var(--sdx-on-accent); }
.sdx-root .sdx-btn--ink:hover { background: var(--sdx-ink); color: var(--sdx-on-accent); }
.sdx-root .sdx-btn--paper { background: var(--sdx-paper); color: var(--sdx-forest); }
.sdx-root .sdx-btn--paper:hover { background: var(--sdx-white); color: var(--sdx-forest); }
.sdx-root .sdx-btn--line { border-color: var(--sdx-rule-on-dark-strong); color: var(--sdx-on-accent); }
.sdx-root .sdx-btn--line:hover { background: var(--sdx-on-accent); color: var(--sdx-forest); }
.sdx-root .sdx-btn--quiet { border-color: var(--sdx-line); color: var(--sdx-ink); }
.sdx-root .sdx-btn--quiet:hover { border-color: var(--sdx-ink); color: var(--sdx-ink); background: transparent; }
.sdx-root .sdx-btn--small {
  min-height: var(--sdx-control-h-sm);
  padding: 0 var(--sdx-space-16);
  font-size: var(--sdx-text-14);
}
.sdx-root .sdx-btn--wide { width: 100%; }

/* icon-only button (search, close) */
.sdx-root .sdx-icon-btn {
  width: var(--sdx-icon-btn);
  height: var(--sdx-icon-btn);
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--sdx-radius-0);
  background: transparent;
  box-shadow: none;
  color: inherit;
  cursor: pointer;
}
.sdx-root .sdx-icon-btn:hover { background: transparent; color: inherit; }
.sdx-root .sdx-icon-btn:focus-visible { outline: var(--sdx-focus-ring); outline-offset: var(--sdx-focus-offset); }
.sdx-root .sdx-icon-btn svg { width: var(--sdx-icon); height: var(--sdx-icon); fill: none; stroke: currentColor; stroke-width: 1.8; }

/* text link with an orange rule (mockup .text-link / .view-product) */
.sdx-root .sdx-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sdx-space-20);
  padding: 0 0 var(--sdx-space-4);
  border: 0;
  border-bottom: 2px solid var(--sdx-orange);
  background: transparent;
  color: var(--sdx-ink);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.sdx-root .sdx-link:hover { color: var(--sdx-orange-dark); }
.sdx-root .sdx-link:focus-visible { outline: var(--sdx-focus-ring); outline-offset: var(--sdx-focus-offset); }
.sdx-root .sdx-link__arrow { color: var(--sdx-orange); }
.sdx-root .sdx-link--light { color: var(--sdx-on-accent); }

/* count badge (cart, order lines) */
.sdx-root .sdx-count {
  min-width: var(--sdx-count);
  height: var(--sdx-count);
  display: inline-grid;
  place-items: center;
  box-sizing: border-box;
  padding: 0 var(--sdx-space-5);
  border-radius: var(--sdx-radius-badge);
  background: var(--sdx-orange);
  color: var(--sdx-on-accent);
  font: 600 var(--sdx-text-9)/1 var(--sdx-mono);
}

/* ---------- chips ---------- */
.sdx-root .sdx-chip {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  min-height: var(--sdx-chip-h);
  margin: 0;
  padding: 0 var(--sdx-space-14);
  border: 1px solid var(--sdx-line);
  border-radius: var(--sdx-radius-full);
  background: transparent;
  box-shadow: none;
  color: var(--sdx-ink);
  font: 400 var(--sdx-text-13)/1.2 var(--sdx-sans);
  text-decoration: none;
  cursor: pointer;
}
.sdx-root .sdx-chip:hover,
.sdx-root .sdx-chip[aria-pressed="true"],
.sdx-root .sdx-chip.sdx-is-active {
  border-color: var(--sdx-forest);
  background: var(--sdx-forest);
  color: var(--sdx-on-accent);
}
.sdx-root .sdx-chip:focus-visible { outline: var(--sdx-focus-ring); outline-offset: var(--sdx-focus-offset); }
.sdx-root .sdx-chips { display: flex; flex-wrap: wrap; gap: var(--sdx-space-7); }

/* ---------- cards ---------- */
/* Grid-hairline card (mockup .product-card): sits in a grid whose container draws the
   top/left rules; each card draws its own right + bottom rule. */
.sdx-root .sdx-card {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--sdx-ink);
  border-bottom: 1px solid var(--sdx-ink);
  background: var(--sdx-white);
  color: var(--sdx-ink);
  text-decoration: none;
  transition: transform var(--sdx-dur) ease, box-shadow var(--sdx-dur) ease;
}
.sdx-root .sdx-card--lift:hover,
.sdx-root .sdx-card--lift:focus-within {
  z-index: 2;
  transform: var(--sdx-card-lift);
  box-shadow: var(--sdx-shadow-card-hover);
}
.sdx-root .sdx-card__media {
  position: relative;
  height: var(--sdx-card-media-h);
  display: grid;
  place-items: center;
  padding: var(--sdx-space-18);
  overflow: hidden;
  background: var(--sdx-paper-2);
}
.sdx-root .sdx-card__media img {
  width: 94%;
  height: 94%;
  object-fit: contain;
}
.sdx-root .sdx-card__body { padding: var(--sdx-space-24); }
.sdx-root .sdx-card__meta {
  display: block;
  color: var(--sdx-muted);
  font: 500 var(--sdx-text-10)/1.4 var(--sdx-mono);
  text-transform: uppercase;
}
.sdx-root .sdx-card__title {
  margin: var(--sdx-space-10) 0 var(--sdx-space-20);
  color: var(--sdx-ink);
  font: 700 var(--sdx-text-21)/1.25 var(--sdx-sans);
  letter-spacing: 0;
}
/* Boxed panel (mockup .account-card / .legal-contact): four sides, white fill. */
.sdx-root .sdx-panel {
  min-width: 0;
  box-sizing: border-box;
  padding: var(--sdx-space-28);
  border: 1px solid var(--sdx-line);
  background: var(--sdx-white);
  color: var(--sdx-ink);
}
.sdx-root .sdx-panel--accent { border-color: var(--sdx-ink); border-left: 4px solid var(--sdx-orange); }

/* ---------- ticker (orange rail) ---------- */
.sdx-root .sdx-ticker {
  position: relative;
  width: 100%;
  min-height: var(--sdx-ticker-h);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--sdx-orange);
  color: var(--sdx-on-accent);
  font: 600 var(--sdx-text-11)/1 var(--sdx-mono);
  letter-spacing: var(--sdx-track-label);
  text-transform: uppercase;
  user-select: none;
}
.sdx-root .sdx-ticker__track {
  flex-shrink: 0;
  min-width: 100%;
  min-height: var(--sdx-ticker-h);
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: var(--sdx-space-40);
  padding-right: var(--sdx-space-40);
  animation: sdx-ticker var(--sdx-ticker-dur) linear infinite;
  will-change: transform;
}
.sdx-root .sdx-ticker__unit {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--sdx-space-40);
  white-space: nowrap;
}
.sdx-root .sdx-ticker__dot { color: var(--sdx-forest); }
/* JS (sdx-shell.js) marks units fully inside the rail; the rest hide so no word is clipped. */
.sdx-root .sdx-ticker.sdx-is-measured .sdx-ticker__unit:not(.sdx-is-whole) { visibility: hidden; }
@keyframes sdx-ticker { to { transform: translateX(calc(-100% - var(--sdx-space-40))); } }
@media (prefers-reduced-motion: reduce) {
  .sdx-root .sdx-ticker__track { animation: none; }
}

/* ---------- form fields ---------- */
.sdx-root .sdx-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sdx-space-20);
}
.sdx-root .sdx-field {
  display: flex;
  flex-direction: column;
  margin: 0;
  color: var(--sdx-ink);
  font: 700 var(--sdx-text-12)/1.3 var(--sdx-sans);
}
.sdx-root .sdx-field--full { grid-column: 1 / -1; }
.sdx-root .sdx-field__hint {
  margin-left: var(--sdx-space-5);
  color: var(--sdx-muted);
  font: 500 var(--sdx-text-9)/1.3 var(--sdx-mono);
  letter-spacing: var(--sdx-track-control);
  text-transform: uppercase;
}
.sdx-root .sdx-input {
  width: 100%;
  box-sizing: border-box;
  min-height: var(--sdx-field-h);
  margin: var(--sdx-space-8) 0 0;
  padding: var(--sdx-space-13) var(--sdx-space-14);
  border: 1px solid var(--sdx-field-border);
  border-radius: var(--sdx-radius-0);
  background: var(--sdx-white);
  box-shadow: none;
  color: var(--sdx-ink);
  font: 400 var(--sdx-text-16)/1.4 var(--sdx-sans);
  outline: 0;
}
.sdx-root .sdx-input:focus {
  border-color: var(--sdx-orange);
  box-shadow: var(--sdx-field-focus);
  outline: 0;
}
.sdx-root .sdx-input:invalid:not(:placeholder-shown),
.sdx-root .sdx-input[aria-invalid="true"] { border-color: var(--sdx-field-invalid); }
.sdx-root .sdx-input--area { min-height: var(--sdx-field-area-h); resize: vertical; }
.sdx-root .sdx-field__error {
  margin: var(--sdx-space-6) 0 0;
  color: var(--sdx-field-invalid);
  font: 500 var(--sdx-text-12)/1.4 var(--sdx-sans);
}
@media (max-width: 640px) {
  .sdx-root .sdx-fields { grid-template-columns: 1fr; }
  .sdx-root .sdx-field--full { grid-column: auto; }
}

/* ---------- drawer shell ---------- */
/* Markup: <div class="sdx-scrim" data-sdx-scrim hidden></div>
           <aside class="sdx-drawer" id="…" role="dialog" aria-modal="true" aria-labelledby="…" hidden> …
   sdx-shell.js opens it from any [data-sdx-drawer-open="<id>"] and closes it on
   [data-sdx-drawer-close], the scrim, or Escape. Content (cart lines, quick order) is Wave 2. */
.sdx-root .sdx-scrim {
  position: fixed;
  inset: 0;
  z-index: var(--sdx-z-scrim);
  background: var(--sdx-scrim);
  opacity: 0;
  transition: opacity var(--sdx-dur) ease;
}
.sdx-root .sdx-scrim.sdx-is-open { opacity: 1; }
.sdx-root .sdx-drawer {
  position: fixed;
  z-index: var(--sdx-z-drawer);
  /* Starts under the WordPress admin bar when it shows (same variable as the header), so the bar
     never covers the drawer head (CEO 2026-09-26). 0 for buyers. */
  top: var(--wp-admin--admin-bar--height, 0px);
  right: 0;
  width: min(var(--sdx-drawer-w), 100%);
  height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background: var(--sdx-paper);
  box-shadow: var(--sdx-shadow-drawer);
  color: var(--sdx-ink);
  transform: translateX(104%);
  transition: transform var(--sdx-dur-drawer) var(--sdx-ease-drawer);
}
.sdx-root .sdx-drawer.sdx-is-open { transform: none; }
.sdx-root .sdx-drawer[hidden],
.sdx-root .sdx-scrim[hidden] { display: none; }
.sdx-root .sdx-drawer__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--sdx-space-16);
  padding: var(--sdx-space-30);
  padding-top: calc(var(--sdx-space-30) + 12px); /* kicker sat on the top edge (CEO 2026-09-26) */
  border-bottom: 1px solid var(--sdx-line);
}
.sdx-root .sdx-drawer__title {
  margin: 0;
  color: var(--sdx-ink);
  font: 400 var(--sdx-text-36)/1 var(--sdx-display);
  letter-spacing: var(--sdx-track-drawer);
}
.sdx-root .sdx-drawer__body { flex: 1; overflow: auto; padding: var(--sdx-space-22) var(--sdx-space-30) var(--sdx-space-30); }
.sdx-root .sdx-drawer__foot { padding: var(--sdx-space-20) var(--sdx-space-30); border-top: 1px solid var(--sdx-line); }
.sdx-root .sdx-drawer-close {
  flex-shrink: 0;
  width: var(--sdx-close-btn);
  height: var(--sdx-close-btn);
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 1px solid var(--sdx-line);
  border-radius: var(--sdx-radius-0);
  background: transparent;
  box-shadow: none;
  color: var(--sdx-ink);
  font: 400 var(--sdx-text-close)/1 var(--sdx-sans);
  cursor: pointer;
}
.sdx-root .sdx-drawer-close:hover { border-color: var(--sdx-ink); background: transparent; color: var(--sdx-ink); }
.sdx-root .sdx-drawer-close:focus-visible { outline: var(--sdx-focus-ring); outline-offset: var(--sdx-focus-offset-sm); }
@media (max-width: 640px) {
  .sdx-root .sdx-drawer__head { padding: calc(var(--sdx-space-20) + 10px) var(--sdx-space-18) var(--sdx-space-20); }
  .sdx-root .sdx-drawer__body { padding: var(--sdx-space-18); }
  .sdx-root .sdx-drawer__foot { padding: var(--sdx-space-18); }
}
@media (prefers-reduced-motion: reduce) {
  .sdx-root .sdx-drawer,
  .sdx-root .sdx-scrim { transition: none; }
}
/* page scroll lock while a drawer or the mobile menu is open (class set on <html> by sdx-shell.js) */
.sdx-lock { overflow: hidden; }
/* The WhatsApp float (salim-talk-to-team .sd-ttf) sat on top of open drawers and covered their
   footer links on phones (2026-09-26). It comes back when the drawer or menu closes. */
.sdx-lock .sd-ttf { display: none !important; }