/* XShop base — minimal reset + tokens wiring. Logical properties throughout. */
*, *::before, *::after { box-sizing: border-box; }
html { font-family: var(--xshop-font-sans); line-height: var(--xshop-leading); color: var(--xshop-text); background: var(--xshop-bg); -webkit-font-smoothing: antialiased; }
body { margin: 0; background: var(--xshop-bg); color: var(--xshop-text); }
a { color: var(--xshop-link); text-decoration: none; transition: color var(--xshop-transition); }
a:hover { color: var(--xshop-link-hover); }
a:focus-visible { outline: 2px solid var(--xshop-focus); outline-offset: 2px; }
img { max-width: 100%; height: auto; display: block; }
p { margin-block: 0 var(--xshop-space-4); }
h1, h2, h3, h4, h5, h6 { line-height: var(--xshop-leading-tight); margin-block: 0 var(--xshop-space-3); font-weight: var(--xshop-weight-bold); overflow-wrap: break-word; }
ul, ol { margin: 0; padding: 0; }

/* Container */
.xshop-container { max-width: var(--xshop-container); margin-inline: auto; padding-inline: var(--xshop-space-4); }
.xshop-container--narrow { max-width: var(--xshop-container-narrow); }

/* Skip link */
.xshop-skip-link { position: absolute; inset-inline-start: -9999px; inset-block-start: auto; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.xshop-skip-link:focus { inset-inline-start: var(--xshop-space-4); inset-block-start: var(--xshop-space-4); inline-size: auto; block-size: auto; overflow: visible; clip-path: none; white-space: normal; background: var(--xshop-card); color: var(--xshop-text); padding: var(--xshop-space-2) var(--xshop-space-4); border: 2px solid var(--xshop-focus); border-radius: var(--xshop-radius-sm); z-index: var(--xshop-z-modal); font-weight: var(--xshop-weight-medium); }

/* Focus */
:focus-visible { outline: 2px solid var(--xshop-focus); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }

/* Forms */
input, textarea, select, button { font: inherit; }
input[type="search"], input[type="text"], input[type="email"], input[type="password"], input[type="url"], input[type="tel"], textarea, select {
  background: var(--xshop-input-bg); color: var(--xshop-input-text); border: 1px solid var(--xshop-input-border);
  border-radius: var(--xshop-radius-sm); padding: var(--xshop-space-2) var(--xshop-space-3); inline-size: 100%;
}
input:focus, textarea:focus, select:focus { outline: 2px solid var(--xshop-focus); outline-offset: 0; border-color: var(--xshop-focus); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}