/* S.K TRADERS — global UI polish (loaded last, layout-safe) */

body.ts-store {
  text-rendering: optimizeLegibility;
}

/* Soften dated stripe overlays on full-bleed page heroes.
   Exclude positioned orbs like .afh-hero-glow (size/position matter). */
[class*="-hero-slash"],
[class*="-hero-mesh"],
.afc-hero-glow,
.afp-miss-glow,
.afpi-hero-slash {
  background-image:
    radial-gradient(ellipse 70% 80% at 88% 8%, rgba(196, 92, 50, .22), transparent 58%),
    radial-gradient(ellipse 50% 60% at 8% 90%, rgba(31, 107, 99, .2), transparent 55%) !important;
}

/* Unified ink heroes — copper + botanical wash, extra air */
.afpi-hero,
.afc-hero,
.afx-hero,
.afa-hero,
.afp-miss,
.afco-hero,
.afpl-hero,
.afct-hero,
.afh-hero,
.aft-hero,
.afs-hero,
.afo-hero,
.afr-hero {
  padding-block: 56px 68px;
  background: linear-gradient(135deg, #12161C 0%, #1A222C 52%, #154A45 100%);
}

/* Extra section air */
.page-main > section {
  scroll-margin-top: 96px;
}
.afc-stage,
.afx-stage,
.afa-stage,
.afp-stage,
.afpi-stage,
.afco-stage,
.afpl-stage,
.afct-stage,
.aft-stage,
.afo-stage,
.afr-stage,
.afh-board {
  padding-bottom: 88px;
}

/* Drop cut-corner clip-paths on content cards — keep layout, modernize silhouette */
.afpi-spotlight,
.afp-plate,
.afpl-folio,
.afo-manifest,
.afct-console,
.afco-panel-story,
.afa-pass,
.afa-benefits,
.aft-panel,
.afh-card,
.afx-summary-card,
.afx-pass,
.afa-pass-card,
.afa-pass-mark,
.afco-panel,
.afpl-chapter,
.dual .panel,
.summary-box {
  clip-path: none !important;
}

/* Cards, docks, trays, legal panels */
.afpi-spotlight,
.afp-plate,
.afc-tray,
.afc-summary,
.afx-summary-card,
.afa-pass,
.afa-benefits,
.auth-split-gate,
.afco-panel,
.afpl-chapter,
.afpl-folio,
.afct-card,
.afct-console,
.aft-panel,
.afo-manifest,
.afh-card,
.dual .panel,
.summary-box,
.af-story-quote,
.afpi-dial,
.afx-pass,
.afa-pass-card {
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-soft);
}

.afp-plate,
.afpi-spotlight,
.afo-manifest,
.afpl-folio,
.afct-console,
.afco-panel-story {
  overflow: hidden;
}

.afc-thumb,
.afc-thumb img,
.afx-line-thumb,
.afx-line-thumb img,
.afp-media-frame img,
.af-mosaic-cell,
.af-mosaic-cell img {
  border-radius: var(--radius);
}

.afc-row {
  border-radius: var(--radius-sm);
  padding-block: 20px;
}

.afc-qty,
.afpi-view,
.afpi-search,
.pagination-btn,
.pagination-num {
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.afc-hero-stats div,
.afct-hero-meter,
.afpi-dial {
  border-radius: var(--radius);
}

.afa-pass-mark {
  border-radius: 12px;
}

/* Forms — elegant focus across page UIs */
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]),
select,
textarea {
  border-radius: var(--radius-sm);
  transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out), background .2s;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--ts-wine);
  box-shadow: var(--focus-ring);
}

.form-grid {
  gap: 20px;
}

/* Pill CTAs — skip icon/util/qty/view toggles */
.afc-btn,
.afx-btn,
.afa-btn,
.afo-btn,
.afr-btn,
.afco-btn,
.afh-dock-btn,
.ts-btn,
.btn {
  border-radius: 999px;
}
.afc-qty-btn,
.afpi-view-btn,
.afs-view-btn,
.afa-mode-btn,
.af-util-btn {
  border-radius: var(--radius-sm);
}
.af-account-btn {
  border-radius: 50%;
}

/* Buttons used by page skins */
[class*="-btn"],
.ts-nav-close,
.af-menu-toggle,
.btn {
  transition: transform .25s var(--ease-out), background .2s, color .2s, border-color .2s, box-shadow .2s;
}
a[class*="-btn-primary"]:hover,
button[class*="-btn-primary"]:hover,
.afc-btn-primary:hover,
.afx-btn-primary:hover,
.afa-btn-primary:hover,
.afo-btn-primary:hover,
.afr-btn-primary:hover,
.afco-btn-primary:hover,
.btn-primary:hover,
.ts-btn:hover {
  transform: translateY(-1px) scale(1.02);
}

/* Auth gate */
.auth-split-gate {
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.auth-split-panel.is-focused {
  box-shadow: inset 0 0 0 2px rgba(196, 92, 50, .16);
}

/* Catalog / product media stamps */
.afpi-card-badge,
.afp-chip-sku,
.afco-registered {
  border-radius: 999px;
}

/* Company / policy legal cells */
.afco-legal-cell,
.contact-card,
.afpl-cell {
  border-radius: var(--radius);
}

/* ── Contrast lock ──
   Headings inherit body ink. Dark surfaces must force light type
   so titles/copy never disappear on ink, tally, dock, or overlay cards. */
body.ts-store :is(
  .af-hero,
  .af-hero-copy,
  .af-look-copy,
  .af-look-overlay,
  .af-promo-overlay,
  .af-info-strip,
  .af-announce,
  .af-footer,
  .afpi-hero,
  .afpi-spotlight,
  .afc-hero,
  .afc-tally-card,
  .afx-hero,
  .afx-summary-card,
  .afx-pass,
  .afa-hero,
  .afa-benefits,
  .afa-pass-card,
  .afp-miss,
  .afp-dock,
  .afp-media,
  .afco-hero,
  .afco-panel-legal,
  .afpl-hero,
  .afpl-rail-dark,
  .afct-hero,
  .afct-legal,
  .afh-hero,
  .afh-dock,
  .aft-hero,
  .aft-strip,
  .afo-hero,
  .afo-rail-dark,
  .afr-hero,
  .afr-desk-card,
  .afs-hero,
  .auth-split-tabs
) :is(h1, h2, h3, h4) {
  color: #F4F7FA;
}

body.ts-store .af-look-copy p,
body.ts-store .af-promo-overlay,
body.ts-store .af-info-strip,
body.ts-store .afh-dock > p,
body.ts-store .afa-benefits-lede,
body.ts-store .afc-tally-card,
body.ts-store .afx-summary-card,
body.ts-store .afco-panel-legal,
body.ts-store .afpl-rail-dark,
body.ts-store .afo-rail-dark {
  color: #F4F7FA;
}

body.ts-store .af-look-copy p {
  color: rgba(255, 255, 255, .88);
}

/* Readable placeholders; dark-field searches stay light */
body.ts-store ::placeholder {
  color: var(--ts-muted);
  opacity: 1;
}
body.ts-store :is(.afpi-search, .afh-search, .afs-search) input,
body.ts-store :is(.afpi-search, .afh-search, .afs-search) input::placeholder {
  color: rgba(255, 255, 255, .88);
}
body.ts-store :is(.afpi-search, .afh-search, .afs-search) input::placeholder {
  color: rgba(255, 255, 255, .72);
}

@media (min-width: 981px) {
  .af-dock-nav { border-radius: 999px; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media (max-width: 640px) {
  .container {
    width: min(var(--container), calc(100% - 28px));
  }
  .afpi-hero,
  .afc-hero,
  .afx-hero,
  .afa-hero,
  .afp-miss,
  .afco-hero,
  .afpl-hero,
  .afct-hero,
  .afh-hero,
  .aft-hero,
  .afo-hero,
  .afr-hero {
    padding-block: 40px 48px;
  }
}