/* ==========================================================================
   LATTOV — 3D Printed Jewelry
   Design system / storefront stylesheet
   Author: PCXX AI Expert
   No build step required. Plain CSS, modern features only.
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root {
  /* surfaces */
  --bg: #faf8f5;
  --bg-2: #f2eee9;
  --surface: #ffffff;
  --surface-2: #fbf9f6;

  /* ink */
  --ink: #17140f;
  --ink-2: #3d372f;
  --muted: #74695c;
  --muted-2: #9a9084;

  /* lines */
  --line: #e5dfd6;
  --line-2: #d4cabc;

  /* brand */
  --accent: #a5764a;
  --accent-strong: #8a5f38;
  --accent-soft: #f6eee4;
  --accent-ring: rgba(165, 118, 74, 0.35);

  /* semantic */
  --ok: #1b7a50;
  --ok-soft: #e9f5ee;
  --warn: #94620f;
  --warn-soft: #fdf3e0;
  --danger: #b4432b;
  --danger-soft: #fbebe7;

  /* shape */
  --r-sm: 8px;
  --r: 14px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* elevation */
  --sh-1: 0 1px 2px rgba(23, 20, 15, 0.05), 0 1px 3px rgba(23, 20, 15, 0.04);
  --sh-2: 0 4px 12px rgba(23, 20, 15, 0.07), 0 12px 32px rgba(23, 20, 15, 0.05);
  --sh-3: 0 18px 48px rgba(23, 20, 15, 0.14);

  /* rhythm */
  --wrap: 1240px;
  --gap: clamp(16px, 3vw, 32px);
  --sec-y: clamp(56px, 8vw, 112px);

  /* type */
  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman",
    serif;

  --header-h: 68px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- 2. Reset ----------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
* {
  margin: 0;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}
input,
button,
select,
textarea {
  font: inherit;
  color: inherit;
}
button {
  cursor: pointer;
  background: none;
  border: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
ul,
ol {
  list-style: none;
  padding: 0;
}
h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.015em;
  font-variation-settings: "SOFT" 0, "WONK" 0;
  text-wrap: balance;
}
p {
  text-wrap: pretty;
}

/* ---------- 3. Utilities ------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(18px, 4vw, 32px);
}
.wrap-narrow {
  max-width: 760px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 200;
  transform: translateY(-200%);
  background: var(--ink);
  color: #fff;
  padding: 10px 16px;
  border-radius: var(--r-sm);
  transition: transform 0.18s var(--ease);
}
.skip-link:focus {
  transform: translateY(0);
}
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
.eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}
.lede {
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  color: var(--ink-2);
  max-width: 62ch;
}
.muted {
  color: var(--muted);
}
.center {
  text-align: center;
}
.center .lede,
.center p {
  margin-inline: auto;
}
.stack > * + * {
  margin-top: var(--s, 16px);
}

/* ---------- 4. Buttons --------------------------------------------------- */
.btn {
  --btn-bg: var(--ink);
  --btn-fg: #fff;
  --btn-bd: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 0 24px;
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease),
    background 0.18s var(--ease), color 0.18s var(--ease),
    border-color 0.18s var(--ease);
  white-space: nowrap;
}
.btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--sh-2);
}
.btn:active {
  transform: translateY(0);
}
.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.5;
  pointer-events: none;
}
.btn--accent {
  --btn-bg: var(--accent);
  --btn-bd: var(--accent);
  --btn-fg: #fff;
}
.btn--accent:hover {
  --btn-bg: var(--accent-strong);
  --btn-bd: var(--accent-strong);
}
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-bd: var(--line-2);
}
.btn--ghost:hover {
  --btn-bd: var(--ink);
}
.btn--bare {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-bd: transparent;
  min-height: 40px;
  padding: 0 12px;
}
.btn--bare:hover {
  box-shadow: none;
  --btn-bg: var(--bg-2);
}
.btn--block {
  width: 100%;
}
.btn--sm {
  min-height: 40px;
  padding: 0 18px;
  font-size: 0.8125rem;
}
.btn--lg {
  min-height: 56px;
  padding: 0 32px;
  font-size: 0.9375rem;
}
.btn__spinner {
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* text link with animated underline */
.link-u {
  position: relative;
  display: inline-block;
  font-weight: 500;
}
.link-u::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.28s var(--ease);
}
.link-u:hover::after {
  transform: scaleX(1);
}

/* ---------- 5. Forms ----------------------------------------------------- */
.field {
  display: block;
}
.field + .field {
  margin-top: 14px;
}
.field__label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink-2);
  margin-bottom: 7px;
  letter-spacing: 0.01em;
}
.field__hint {
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 6px;
}
.input,
.select,
.textarea {
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  transition: border-color 0.16s var(--ease), box-shadow 0.16s var(--ease);
  appearance: none;
}
.input::placeholder,
.textarea::placeholder {
  color: var(--muted-2);
}
.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.input[aria-invalid="true"] {
  border-color: var(--danger);
}
.select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2374695c' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}
.textarea {
  min-height: 130px;
  resize: vertical;
  line-height: 1.55;
}
.field-error {
  display: block;
  color: var(--danger);
  font-size: 0.75rem;
  margin-top: 6px;
}
.field-row {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .field-row--2 {
    grid-template-columns: 1fr 1fr;
  }
  .field-row--3 {
    grid-template-columns: 1.2fr 1fr 1fr;
  }
}
.checkbox {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.875rem;
  color: var(--ink-2);
  cursor: pointer;
}
.checkbox input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex: none;
  accent-color: var(--accent);
}

/* ---------- 6. Header ---------------------------------------------------- */
.announce {
  background: var(--ink);
  color: #f4efe8;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
}
.announce__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 38px;
  padding-block: 6px;
  text-align: center;
}
.announce strong {
  color: #fff;
  font-weight: 600;
}
.announce__sep {
  color: rgba(255, 255, 255, 0.35);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(250, 248, 245, 0.88);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: var(--header-h);
}
.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  flex: none;
}
.brand__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
  transform: translateY(-8px);
}
.nav {
  display: none;
  gap: 4px;
  margin-inline: auto;
}
.nav a {
  position: relative;
  padding: 8px 14px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink-2);
  border-radius: var(--r-pill);
  transition: background 0.16s var(--ease), color 0.16s var(--ease);
}
.nav a:hover {
  background: var(--bg-2);
  color: var(--ink);
}
.nav a[aria-current="page"] {
  color: var(--ink);
  font-weight: 600;
}
.nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 2px;
  height: 1.5px;
  background: var(--accent);
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.currency-select {
  min-height: 38px;
  padding: 6px 32px 6px 12px;
  font-size: 0.8125rem;
  font-weight: 600;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-2);
  background-color: var(--surface);
  background-position: right 12px center;
  width: auto;
}
.icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: var(--ink);
  transition: background 0.16s var(--ease);
}
.icon-btn:hover {
  background: var(--bg-2);
}
.cart-count {
  position: absolute;
  top: 2px;
  right: 0;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  border-radius: var(--r-pill);
  font-family: var(--font-ui);
}
.cart-count[hidden] {
  display: none;
}
.cart-count.is-bump {
  animation: bump 0.4s var(--ease);
}
@keyframes bump {
  0% {
    transform: scale(1);
  }
  35% {
    transform: scale(1.45);
  }
  100% {
    transform: scale(1);
  }
}
.nav-toggle {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-left: -8px;
  border-radius: 50%;
}
.nav-toggle:hover {
  background: var(--bg-2);
}
.nav-toggle span {
  display: block;
  width: 18px;
  height: 1.6px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.24s var(--ease), opacity 0.16s var(--ease);
}
.nav-toggle span + span {
  margin-top: 5px;
}
body.nav-open .nav-toggle span:nth-child(1) {
  transform: translateY(6.6px) rotate(45deg);
}
body.nav-open .nav-toggle span:nth-child(2) {
  opacity: 0;
}
body.nav-open .nav-toggle span:nth-child(3) {
  transform: translateY(-6.6px) rotate(-45deg);
}

@media (min-width: 960px) {
  .nav {
    display: flex;
  }
  .nav-toggle {
    display: none;
  }
}
/* mobile drawer nav */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: var(--bg);
  padding: calc(var(--header-h) + 34px) clamp(18px, 4vw, 32px) 40px;
  transform: translateY(-12px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease),
    visibility 0.22s;
  overflow-y: auto;
}
body.nav-open .mobile-nav {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.mobile-nav a {
  display: block;
  padding: 16px 0;
  font-family: var(--font-display);
  font-size: 1.75rem;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 960px) {
  .mobile-nav {
    display: none;
  }
}

/* ---------- 7. Cart drawer ---------------------------------------------- */
.drawer-scrim {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(23, 20, 15, 0.42);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.24s var(--ease), visibility 0.24s;
}
body.cart-open .drawer-scrim {
  opacity: 1;
  visibility: visible;
}
.drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 101;
  display: flex;
  flex-direction: column;
  width: min(460px, 100%);
  height: 100dvh;
  background: var(--surface);
  box-shadow: var(--sh-3);
  transform: translateX(102%);
  transition: transform 0.32s var(--ease);
}
body.cart-open .drawer {
  transform: none;
}
.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px clamp(18px, 4vw, 26px);
  border-bottom: 1px solid var(--line);
}
.drawer__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
}
.drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 20px clamp(18px, 4vw, 26px);
}
.drawer__foot {
  border-top: 1px solid var(--line);
  padding: 18px clamp(18px, 4vw, 26px) max(18px, env(safe-area-inset-bottom));
  background: var(--surface-2);
}
.drawer-bar {
  display: flex;
  justify-content: space-between;
  font-size: 0.875rem;
  margin-bottom: 6px;
}
.drawer-bar--total {
  font-size: 1.0625rem;
  font-weight: 700;
  margin-block: 12px 16px;
}
.ship-meter {
  margin-top: 14px;
}
.ship-meter__track {
  height: 5px;
  background: var(--bg-2);
  border-radius: var(--r-pill);
  overflow: hidden;
  margin-top: 8px;
}
.ship-meter__fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--accent), #c79a6b);
  border-radius: inherit;
  transition: width 0.4s var(--ease);
}
.ship-meter__text {
  font-size: 0.8125rem;
  color: var(--ink-2);
}
.ship-meter__text b {
  color: var(--accent-strong);
}

/* line items */
.line {
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.line:first-child {
  padding-top: 0;
}
.line__img {
  width: 78px;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--r-sm);
  background: var(--bg-2);
}
.line__top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.line__title {
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.35;
}
.line__opt {
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 3px;
}
.line__price {
  font-weight: 600;
  font-size: 0.9375rem;
  white-space: nowrap;
}
.line__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
}
.qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  overflow: hidden;
  background: var(--surface);
}
.qty button {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  font-size: 1rem;
  color: var(--ink-2);
  transition: background 0.14s var(--ease);
}
.qty button:hover {
  background: var(--bg-2);
}
.qty input,
.qty .qty__val {
  width: 34px;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 600;
  border: 0;
  background: none;
  -moz-appearance: textfield;
}
.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.line__remove {
  font-size: 0.75rem;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.line__remove:hover {
  color: var(--danger);
}
.empty-state {
  text-align: center;
  padding: 48px 8px;
}
.empty-state__icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 18px;
  color: var(--muted-2);
}

/* ---------- 8. Toast ----------------------------------------------------- */
.toast-host {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 120;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
  width: min(420px, calc(100vw - 32px));
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px 16px;
  background: var(--ink);
  color: #f6f2ec;
  border-radius: var(--r);
  box-shadow: var(--sh-3);
  font-size: 0.875rem;
  pointer-events: auto;
  animation: toast-in 0.3s var(--ease);
}
.toast--ok {
  background: #14503a;
}
.toast--err {
  background: #7c2d1c;
}
.toast__icon {
  flex: none;
  margin-top: 1px;
}
@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.98);
  }
}

/* ---------- 9. Home: hero ----------------------------------------------- */
.hero {
  position: relative;
  padding-block: clamp(40px, 6vw, 84px) clamp(44px, 7vw, 96px);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  top: -30%;
  right: -12%;
  width: 62vw;
  height: 62vw;
  max-width: 900px;
  max-height: 900px;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(165, 118, 74, 0.13),
    transparent 62%
  );
  pointer-events: none;
}
.hero__grid {
  position: relative;
  display: grid;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
@media (min-width: 940px) {
  .hero__grid {
    grid-template-columns: 1.02fr 1fr;
  }
}
.hero__title {
  font-size: clamp(2.5rem, 6.2vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
}
.hero__title em {
  font-style: italic;
  color: var(--accent);
  font-variation-settings: "SOFT" 60, "WONK" 1;
}
.hero__body {
  margin-top: 22px;
  font-size: clamp(1rem, 1.5vw, 1.14rem);
  color: var(--ink-2);
  max-width: 46ch;
}
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}
.hero__proof {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 34px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 0.8125rem;
  color: var(--muted);
}
.hero__proof span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.stars {
  display: inline-flex;
  gap: 1.5px;
  color: var(--accent);
}
.stars svg {
  width: 14px;
  height: 14px;
}

.hero__media {
  position: relative;
}
.hero__figure {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-2);
  background: var(--bg-2);
}
.hero__figure img {
  width: 100%;
  aspect-ratio: 4 / 3.1;
  object-fit: cover;
}
.hero__chip {
  position: absolute;
  left: clamp(12px, 3vw, 22px);
  bottom: clamp(12px, 3vw, 22px);
  right: clamp(12px, 3vw, 22px);
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 16px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: var(--r);
  box-shadow: var(--sh-1);
}
.hero__chip img {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  object-fit: cover;
  flex: none;
}
.hero__chip strong {
  display: block;
  font-size: 0.875rem;
}
.hero__chip span {
  font-size: 0.75rem;
  color: var(--muted);
}
.hero__chip .btn {
  margin-left: auto;
}

/* ---------- 10. Trust bar ----------------------------------------------- */
.trustbar {
  border-block: 1px solid var(--line);
  background: var(--surface);
}
.trustbar__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
}
@media (min-width: 820px) {
  .trustbar__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
.trustbar__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px clamp(14px, 2.5vw, 26px);
  background: var(--surface);
  font-size: 0.8125rem;
  line-height: 1.4;
}
.trustbar__item svg {
  flex: none;
  color: var(--accent);
}
.trustbar__item b {
  display: block;
  font-size: 0.875rem;
}
.trustbar__item span {
  color: var(--muted);
}

/* ---------- 11. Sections ------------------------------------------------- */
.section {
  padding-block: var(--sec-y);
}
.section--tight {
  padding-block: clamp(36px, 5vw, 64px);
}
.section--alt {
  background: var(--surface);
  border-block: 1px solid var(--line);
}
.section--ink {
  background: var(--ink);
  color: #f3efe9;
}
.section--ink .lede,
.section--ink .muted {
  color: rgba(243, 239, 233, 0.72);
}
.sec-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: clamp(26px, 4vw, 46px);
}
.sec-head__title {
  font-size: clamp(1.75rem, 3.6vw, 2.6rem);
}
.sec-head__sub {
  margin-top: 12px;
}
.sec-head--center {
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* ---------- 12. Product card & grid ------------------------------------- */
.grid-products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: clamp(16px, 2.4vw, 30px);
}
.card {
  position: relative;
  display: flex;
  flex-direction: column;
}
.card__media {
  position: relative;
  display: block;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--bg-2);
  aspect-ratio: 1;
}
.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.card:hover .card__media img {
  transform: scale(1.055);
}
.card__badges {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--sh-1);
}
.pill--sale {
  background: var(--danger);
  color: #fff;
}
.pill--new {
  background: var(--ink);
  color: #fff;
}
.pill--best {
  background: var(--accent);
  color: #fff;
}
.pill--soft {
  background: var(--accent-soft);
  color: var(--accent-strong);
  box-shadow: none;
}
.card__quick {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.24s var(--ease), transform 0.24s var(--ease);
}
.card:hover .card__quick,
.card:focus-within .card__quick {
  opacity: 1;
  transform: none;
}
.card__body {
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
}
.card__cat {
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.card__title {
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
}
.card__title a:hover {
  color: var(--accent-strong);
}
.card__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  color: var(--muted);
}
.price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 2px;
  font-weight: 700;
}
.price__now {
  font-size: 1rem;
}
.price__was {
  font-size: 0.8125rem;
  color: var(--muted-2);
  text-decoration: line-through;
  font-weight: 500;
}
.price--lg .price__now {
  font-size: clamp(1.5rem, 3vw, 1.9rem);
  font-family: var(--font-display);
  font-weight: 600;
}

/* category tiles */
.grid-cats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(12px, 2vw, 22px);
}
@media (min-width: 900px) {
  .grid-cats {
    grid-template-columns: repeat(4, 1fr);
  }
}
.cat-tile {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(180px, 26vw, 260px);
  padding: 20px;
  border-radius: var(--r);
  background: var(--bg-2);
  overflow: hidden;
  color: #fff;
}
.cat-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.cat-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(17, 14, 10, 0.72) 0%,
    rgba(17, 14, 10, 0.12) 58%,
    transparent 100%
  );
}
.cat-tile:hover img {
  transform: scale(1.06);
}
.cat-tile__label {
  position: relative;
  z-index: 1;
}
.cat-tile__label b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
}
.cat-tile__label span {
  font-size: 0.75rem;
  opacity: 0.85;
}

/* ---------- 13. Split / feature blocks --------------------------------- */
.split {
  display: grid;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
@media (min-width: 900px) {
  .split {
    grid-template-columns: 1fr 1fr;
  }
  .split--media-first > .split__media {
    order: -1;
  }
}
.split__figure {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-2);
  background: var(--bg-2);
}
.split__figure img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.steps {
  counter-reset: step;
  display: grid;
  gap: 20px;
  margin-top: 28px;
}
.step {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 16px;
}
.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  grid-column: 1;
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent-strong);
  background: var(--surface);
}
.step h4 {
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0;
}
.step p {
  grid-column: 2;
  font-size: 0.875rem;
  color: var(--muted);
  margin-top: 4px;
}
.spec-list {
  display: grid;
  gap: 0;
  margin-top: 26px;
  border-top: 1px solid var(--line);
}
.spec-list li {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.875rem;
}
.spec-list b {
  font-weight: 600;
}
.spec-list span {
  color: var(--muted);
  text-align: right;
}

/* ---------- 14. Testimonials -------------------------------------------- */
.grid-quotes {
  display: grid;
  gap: clamp(16px, 2.4vw, 26px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
.quote {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(22px, 3vw, 30px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.quote p {
  font-size: 0.9375rem;
  color: var(--ink-2);
  flex: 1;
}
.quote__who {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 0.8125rem;
}
.avatar {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-weight: 700;
  font-size: 0.8125rem;
}
.quote__who b {
  display: block;
}
.quote__who span {
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 5px;
}

/* ---------- 15. Newsletter / CTA ---------------------------------------- */
.newsletter {
  display: grid;
  gap: 26px;
  align-items: center;
  padding: clamp(28px, 4vw, 52px);
  border-radius: var(--r-lg);
  background: var(--ink);
  color: #f3efe9;
  position: relative;
  overflow: hidden;
}
.newsletter::before {
  content: "";
  position: absolute;
  right: -60px;
  top: -60px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(165, 118, 74, 0.4), transparent 68%);
}
.newsletter > * {
  position: relative;
}
@media (min-width: 860px) {
  .newsletter {
    grid-template-columns: 1.1fr 1fr;
  }
}
.newsletter h2 {
  font-size: clamp(1.6rem, 3.2vw, 2.3rem);
}
.newsletter p {
  color: rgba(243, 239, 233, 0.75);
  margin-top: 12px;
  font-size: 0.9375rem;
}
.newsletter form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.newsletter .input {
  flex: 1 1 220px;
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}
.newsletter .input::placeholder {
  color: rgba(243, 239, 233, 0.5);
}
.newsletter .input:focus {
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.1);
}
.newsletter__note {
  font-size: 0.75rem;
  color: rgba(243, 239, 233, 0.55);
  margin-top: 12px;
}

/* ---------- 16. Footer --------------------------------------------------- */
.site-footer {
  background: var(--ink);
  color: rgba(243, 239, 233, 0.72);
  padding-top: clamp(44px, 6vw, 76px);
  font-size: 0.875rem;
}
.footer-grid {
  display: grid;
  gap: clamp(26px, 4vw, 44px);
  grid-template-columns: 1fr;
  padding-bottom: 40px;
}
@media (min-width: 680px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1000px) {
  .footer-grid {
    grid-template-columns: 1.6fr repeat(3, 1fr) 1.3fr;
  }
}
.footer-brand {
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 14px;
}
.footer-col h4 {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 16px;
  font-weight: 700;
}
.footer-col li + li {
  margin-top: 11px;
}
.footer-col a:hover {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 24px;
  align-items: center;
  justify-content: space-between;
  padding-block: 22px;
  border-top: 1px solid rgba(243, 239, 233, 0.14);
  font-size: 0.8125rem;
}
.paylogos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.paylogos span {
  display: grid;
  place-items: center;
  height: 26px;
  min-width: 42px;
  padding: 0 8px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.footer-note {
  font-size: 0.75rem;
  color: rgba(243, 239, 233, 0.45);
  padding-bottom: 30px;
  max-width: 78ch;
}

/* ---------- 17. Shop page ------------------------------------------------ */
.page-head {
  padding-block: clamp(28px, 4vw, 52px) clamp(20px, 3vw, 32px);
  border-bottom: 1px solid var(--line);
}
.page-head h1 {
  font-size: clamp(1.9rem, 4.4vw, 3rem);
}
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  color: var(--muted);
  margin-bottom: 14px;
}
.crumbs a:hover {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.crumbs span[aria-hidden] {
  color: var(--line-2);
}
.shop-layout {
  display: grid;
  gap: clamp(22px, 3vw, 40px);
  padding-block: clamp(26px, 4vw, 44px);
  align-items: start;
}
@media (min-width: 900px) {
  .shop-layout {
    grid-template-columns: 240px 1fr;
  }
}
.filters {
  position: sticky;
  top: calc(var(--header-h) + 18px);
}
.filters__group + .filters__group {
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.filters__title {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 14px;
}
.filters__list li + li {
  margin-top: 9px;
}
.shop-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-bottom: 22px;
}
.shop-toolbar__count {
  font-size: 0.8125rem;
  color: var(--muted);
  margin-right: auto;
}
.filters-toggle {
  display: inline-flex;
}
@media (min-width: 900px) {
  .filters-toggle {
    display: none;
  }
  .filters[hidden] {
    display: block !important;
  }
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent-strong);
}
.chip button {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(138, 95, 56, 0.16);
  font-size: 0.6875rem;
  line-height: 1;
}
.search-input {
  min-width: 200px;
  flex: 1 1 200px;
  max-width: 280px;
}

/* ---------- 18. Product detail ------------------------------------------ */
.pdp {
  display: grid;
  gap: clamp(28px, 4vw, 60px);
  padding-block: clamp(24px, 4vw, 48px);
  align-items: start;
}
@media (min-width: 960px) {
  .pdp {
    grid-template-columns: 1.08fr 1fr;
  }
  .pdp__gallery {
    position: sticky;
    top: calc(var(--header-h) + 20px);
  }
}
.pdp__main {
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg-2);
  box-shadow: var(--sh-1);
}
.pdp__main img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}
.thumbs {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}
.thumbs button {
  width: 68px;
  aspect-ratio: 1;
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 1.5px solid transparent;
  background: var(--bg-2);
  transition: border-color 0.16s var(--ease);
}
.thumbs button[aria-current="true"] {
  border-color: var(--accent);
}
.thumbs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pdp__title {
  font-size: clamp(1.75rem, 3.8vw, 2.6rem);
  margin-top: 8px;
}
.pdp__sub {
  color: var(--muted);
  margin-top: 12px;
  font-size: 0.9375rem;
}
.pdp__rating {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  font-size: 0.8125rem;
  color: var(--muted);
}
.pdp__price {
  margin-top: 20px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}
.pdp__price .price__now {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2rem);
  font-weight: 600;
}
.opt-group {
  margin-top: 24px;
}
.opt-group__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 11px;
}
.opt-group__name {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.opt-group__val {
  font-size: 0.8125rem;
  color: var(--muted);
}
.swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}
.swatch {
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: var(--surface);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink-2);
  transition: all 0.16s var(--ease);
}
.swatch:hover {
  border-color: var(--ink);
}
.swatch[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.swatch[disabled] {
  opacity: 0.4;
  text-decoration: line-through;
  pointer-events: none;
}
.pdp__buy {
  display: grid;
  gap: 12px;
  margin-top: 28px;
}
@media (min-width: 520px) {
  .pdp__buy {
    grid-template-columns: auto 1fr;
    align-items: center;
  }
}
.pdp__buy .qty {
  min-height: 48px;
}
.pdp__buy .qty button {
  width: 44px;
  height: 46px;
}
.assurance {
  display: grid;
  gap: 12px;
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 0.8125rem;
  color: var(--ink-2);
}
.assurance li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.assurance svg {
  flex: none;
  color: var(--accent);
  margin-top: 2px;
}
.accordion {
  margin-top: 26px;
  border-top: 1px solid var(--line);
}
.accordion details {
  border-bottom: 1px solid var(--line);
}
.accordion summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 17px 0;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.accordion summary::-webkit-details-marker {
  display: none;
}
.accordion summary::after {
  content: "";
  width: 11px;
  height: 11px;
  flex: none;
  border-right: 1.6px solid var(--muted);
  border-bottom: 1.6px solid var(--muted);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.24s var(--ease);
}
.accordion details[open] summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}
.accordion__body {
  padding-bottom: 20px;
  font-size: 0.875rem;
  color: var(--ink-2);
}
.accordion__body ul {
  display: grid;
  gap: 9px;
}
.accordion__body li {
  display: flex;
  gap: 10px;
}
.accordion__body li::before {
  content: "";
  width: 5px;
  height: 5px;
  margin-top: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--accent);
}
.sticky-buy {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px clamp(16px, 4vw, 28px)
    max(11px, env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  transform: translateY(110%);
  transition: transform 0.3s var(--ease);
}
.sticky-buy.is-visible {
  transform: none;
}
.sticky-buy__info {
  min-width: 0;
  flex: 1;
}
.sticky-buy__info b {
  display: block;
  font-size: 0.875rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sticky-buy__info span {
  font-size: 0.8125rem;
  color: var(--muted);
}
@media (min-width: 960px) {
  .sticky-buy {
    display: none;
  }
}

/* ---------- 19. Cart & checkout ----------------------------------------- */
.cart-layout {
  display: grid;
  gap: clamp(26px, 4vw, 48px);
  padding-block: clamp(26px, 4vw, 44px);
  align-items: start;
}
@media (min-width: 940px) {
  .cart-layout {
    grid-template-columns: 1.5fr 1fr;
  }
  .summary {
    position: sticky;
    top: calc(var(--header-h) + 20px);
  }
}
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(20px, 3vw, 28px);
}
.panel + .panel {
  margin-top: 22px;
}
.panel__title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.panel__title .stepnum {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: none;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 700;
}
.rows {
  display: grid;
  gap: 0;
}
.row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  font-size: 0.875rem;
  color: var(--ink-2);
}
.row--total {
  padding-top: 17px;
  margin-top: 9px;
  border-top: 1px solid var(--line);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--ink);
}
.row--total span:last-child {
  font-family: var(--font-display);
}
.row__muted {
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 3px;
}
.ship-option {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 16px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: border-color 0.16s var(--ease), background 0.16s var(--ease);
}
.ship-option + .ship-option {
  margin-top: 11px;
}
.ship-option:hover {
  border-color: var(--ink);
}
.ship-option:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.ship-option input {
  width: 18px;
  height: 18px;
  margin-top: 3px;
  flex: none;
  accent-color: var(--accent);
}
.ship-option__body {
  flex: 1;
}
.ship-option__body b {
  display: block;
  font-size: 0.875rem;
}
.ship-option__body span {
  font-size: 0.75rem;
  color: var(--muted);
}
.ship-option__price {
  font-weight: 700;
  font-size: 0.875rem;
  white-space: nowrap;
}
.notice {
  display: flex;
  gap: 11px;
  padding: 13px 15px;
  border-radius: var(--r-sm);
  font-size: 0.8125rem;
  line-height: 1.5;
}
.notice + .notice {
  margin-top: 12px;
}
.notice svg {
  flex: none;
  margin-top: 1px;
}
.notice--info {
  background: var(--accent-soft);
  color: var(--accent-strong);
}
.notice--ok {
  background: var(--ok-soft);
  color: var(--ok);
}
.notice--warn {
  background: var(--warn-soft);
  color: var(--warn);
}
.notice--err {
  background: var(--danger-soft);
  color: var(--danger);
}
.pay-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 16px;
}
.pay-badges span {
  display: grid;
  place-items: center;
  height: 28px;
  min-width: 46px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--ink-2);
}
.secure-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 0.75rem;
  color: var(--muted);
}
.btn-stripe {
  --btn-bg: #635bff;
  --btn-bd: #635bff;
  --btn-fg: #fff;
}
.btn-stripe:hover {
  --btn-bg: #5147e6;
  --btn-bd: #5147e6;
}
.divider-or {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 16px 0;
  font-size: 0.75rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.divider-or::before,
.divider-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
#paypal-buttons {
  min-height: 0;
}
.demo-banner {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 14px 16px;
  margin-bottom: 22px;
  border: 1px dashed var(--warn);
  background: var(--warn-soft);
  color: var(--warn);
  border-radius: var(--r-sm);
  font-size: 0.8125rem;
  line-height: 1.5;
}
#paypal-buttons:empty {
  display: none;
}

/* ---------- 20. Success / cancel ---------------------------------------- */
.result {
  max-width: 660px;
  margin-inline: auto;
  padding-block: clamp(48px, 8vw, 104px);
  text-align: center;
}
.result__icon {
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  margin: 0 auto 26px;
  border-radius: 50%;
}
.result__icon--ok {
  background: var(--ok-soft);
  color: var(--ok);
}
.result__icon--cancel {
  background: var(--warn-soft);
  color: var(--warn);
}
.result h1 {
  font-size: clamp(1.9rem, 4.4vw, 2.9rem);
}
.result__body {
  margin-top: 18px;
  color: var(--ink-2);
}
.order-card {
  margin-top: 34px;
  padding: clamp(22px, 3vw, 30px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  text-align: left;
}
.order-ref {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9375rem;
  font-weight: 700;
  background: var(--accent-soft);
  color: var(--accent-strong);
  padding: 3px 9px;
  border-radius: 6px;
}
.timeline {
  display: grid;
  gap: 22px;
  margin-top: 30px;
  text-align: left;
}
.timeline li {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 15px;
}
.timeline__dot {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: var(--surface);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent-strong);
}
.timeline b {
  display: block;
  font-size: 0.9375rem;
}
.timeline span {
  font-size: 0.8125rem;
  color: var(--muted);
}

/* ---------- 21. Prose (legal / info pages) ------------------------------ */
.prose {
  max-width: 74ch;
}
.prose > * + * {
  margin-top: 1.05em;
}
.prose h2 {
  font-size: clamp(1.35rem, 2.6vw, 1.7rem);
  margin-top: 2.1em;
  padding-top: 1.5em;
  border-top: 1px solid var(--line);
}
.prose h2:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.prose h3 {
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0;
  margin-top: 1.7em;
}
.prose p,
.prose li {
  color: var(--ink-2);
  font-size: 0.9375rem;
}
.prose ul,
.prose ol {
  padding-left: 1.3em;
}
.prose ul li {
  list-style: disc;
}
.prose ol li {
  list-style: decimal;
}
.prose li + li {
  margin-top: 0.5em;
}
.prose a {
  color: var(--accent-strong);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.prose strong {
  color: var(--ink);
}
.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  margin-top: 1.4em;
}
.prose th,
.prose td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.prose th {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  font-weight: 700;
  white-space: nowrap;
}
.prose td:first-child {
  white-space: nowrap;
  font-weight: 600;
}
.prose .table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.toc {
  padding: 20px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  margin-bottom: 40px;
}
.toc h2 {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 12px;
  padding: 0;
  border: 0;
}
.toc ol {
  display: grid;
  gap: 8px;
  padding: 0;
  counter-reset: toc;
}
.toc li {
  list-style: none !important;
  font-size: 0.875rem;
}
.toc a:hover {
  color: var(--accent-strong);
}

/* FAQ */
.faq-group + .faq-group {
  margin-top: 44px;
}
.faq-group > h2 {
  font-size: clamp(1.3rem, 2.4vw, 1.6rem);
  margin-bottom: 8px;
}

/* contact */
.contact-grid {
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  padding-block: clamp(30px, 5vw, 56px);
  align-items: start;
}
@media (min-width: 900px) {
  .contact-grid {
    grid-template-columns: 1fr 1.15fr;
  }
}
.contact-cards {
  display: grid;
  gap: 16px;
}
.contact-card {
  display: flex;
  gap: 14px;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.contact-card svg {
  flex: none;
  color: var(--accent);
}
.contact-card b {
  display: block;
  font-size: 0.9375rem;
}
.contact-card p {
  font-size: 0.8125rem;
  color: var(--muted);
  margin-top: 3px;
}

/* ---------- 22. 404 ------------------------------------------------------ */
.err-page {
  display: grid;
  place-items: center;
  min-height: 68dvh;
  text-align: center;
  padding-block: 60px;
}
.err-code {
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 18vw, 9rem);
  line-height: 0.9;
  color: var(--accent);
  letter-spacing: -0.04em;
}

/* ---------- 23. Reveal animation --------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
[data-reveal].is-in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* ---------- 24. Skeleton ------------------------------------------------ */
.skeleton {
  background: linear-gradient(90deg, #eeeae4 25%, #f6f3ef 50%, #eeeae4 75%);
  background-size: 200% 100%;
  animation: shimmer 1.3s infinite linear;
  border-radius: var(--r-sm);
}
@keyframes shimmer {
  to {
    background-position: -200% 0;
  }
}

/* ---------- 25. 移动端 / 触屏优化 --------------------------------------- */
/*
 * 移动端流量占多数，这一节是专门为触屏做的集中适配。四条硬约束：
 *
 *   1. 触屏没有 hover。任何"悬停才出现"的东西，在手机上等于不存在。
 *   2. 可点区域不小于 44×44px（Apple HIG 与 Material 的共同下限）。
 *      手指的落点精度远低于鼠标，小目标会直接产生误触和放弃。
 *   3. 输入控件字号不小于 16px，否则 iOS Safari 聚焦时会自动放大整页，
 *      页面被推歪后用户很难点回原位。
 *   4. 底部固定栏必须给 iPhone 的 home indicator 留安全区，
 *      否则按钮会和系统手势条叠在一起。
 *
 * 手机上"看得清、点得中、不用来回找"比"一屏塞更多信息"重要。
 */

/* ---- 25.1 触屏设备（按能力判定，平板同样适用，不依赖屏幕宽度）---- */
@media (hover: none) {
  /* 商品卡的"快速加购"原本只在 hover 时浮现 —— 触屏永远触发不了，
     等于把这颗转化按钮整颗藏起来了。触屏上改为常显。 */
  .card__quick {
    opacity: 1;
    transform: none;
  }
  /* 图片放大是 hover 触发的，触屏点完会"卡"在放大状态，一并关掉。 */
  .card:hover .card__media img {
    transform: none;
  }
}

/* 快速加购按钮浮在商品图上，加一点阴影和毛玻璃保证任何底色上都读得清 */
.card__quick .btn {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 6px 18px rgba(28, 25, 23, 0.22);
}

/* ---- 25.2 手机（<768px）---- */
@media (max-width: 767px) {
  /* 触屏点击时不要有 300ms 延迟与双击缩放，且给出视觉反馈 */
  a,
  button,
  [role="button"],
  label,
  summary,
  input,
  select,
  textarea {
    touch-action: manipulation;
  }
  a,
  button,
  [role="button"],
  label,
  summary {
    -webkit-tap-highlight-color: rgba(165, 118, 74, 0.16);
  }
  .btn:active,
  .card .btn:active,
  .swatch:active,
  .chip:active,
  .pill:active {
    transform: scale(0.975);
  }
  .card__media a:active img {
    transform: scale(1.015);
  }

  /* --- 命中区：全部提到 ≥46px（比 44 留一点余量）--- */
  .btn,
  .btn--sm,
  .btn--lg {
    min-height: 46px;
  }
  /* 纯文字按钮视觉上仍是一行字，但把可点高度撑开 */
  .btn--bare {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
  }
  .nav-toggle,
  .icon-btn {
    width: 46px;
    height: 46px;
  }
  .brand {
    min-height: 46px;
    align-items: center;
  }
  .swatch {
    min-height: 46px;
    padding-block: 10px;
  }
  .chip {
    min-height: 44px;
    padding-block: 10px;
  }
  .card__title a {
    display: inline-block;
    /* 标题链接本身约 20px 高。用 padding 把可点区域撑到 44px，
       再用等量负外边距把多占的空间收回去 —— 命中区变大了，
       商品卡的视觉间距完全不变。 */
    padding-block: 12px;
    margin-block: -12px;
  }
  .pdp__buy .qty button {
    width: 48px;
    height: 48px;
  }
  .pdp__qty button,
  .qty button {
    min-width: 44px;
    min-height: 44px;
  }
  /* 页脚导航与面包屑：链接原本只有 17px 高，手指按不准。
     撑到 44px 行高，同时去掉列表项之间的额外间距，行距看起来是一致的。 */
  .footer-col li a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .footer-col li + li {
    margin-top: 0;
  }
  .crumbs a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .crumbs {
    margin-bottom: 4px;
  }

  /* --- 输入控件：字号锁 16px，iOS 不再自动放大整页 --- */
  input,
  select,
  textarea,
  .input,
  .select,
  .textarea {
    font-size: 16px;
  }
  .currency-select {
    min-height: 44px;
    font-size: 16px;
    padding: 8px 34px 8px 14px;
  }
  .newsletter .input,
  #footer-email {
    font-size: 16px;
  }

  /* 勾选框：整个 <label> 是可点区域（点文字也能勾选），所以把 label 撑到
     46px 即可。原生 checkbox 加 padding 并不会扩大命中区，视觉上放大到 24px
     让它更好认、更好点。 */
  .checkbox {
    min-height: 46px;
    align-items: center;
    font-size: 0.9375rem;
    line-height: 1.5;
  }
  .checkbox input {
    width: 24px;
    height: 24px;
    margin-top: 0;
  }

  /* --- 可读性：把 11px 级别的小字提到 12px 以上 --- */
  .eyebrow {
    font-size: 0.75rem;
    letter-spacing: 0.13em;
  }
  .pill,
  .card__cat,
  .pay-badges span,
  .paylogos span,
  .badge {
    font-size: 0.75rem;
  }
  .secure-line,
  .newsletter__note {
    font-size: 0.8125rem;
  }

  /* --- 正文排版：手机上放宽行高更易读 --- */
  .prose p,
  .prose li {
    line-height: 1.75;
  }

  /* 独占一行的邮箱链接（页脚、联系页）撑到 44px。
     夹在句子中间的（FAQ 正文）保持内联，否则会把行高撑破。 */
  p > a[href^="mailto:"]:only-child,
  li > a[href^="mailto:"]:only-child {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* 宽表格靠横向滑动查看，这里收紧内边距让滑动距离短一些 */
  .prose th,
  .prose td {
    padding: 10px 12px;
  }

  /* 正文开头的目录（FAQ / 物流页）是页内跳转的主入口，
     原本一行只有 18px 高，撑到 44px 方便点。 */
  .toc a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .toc ol {
    gap: 0;
  }

  /* --- 购物车抽屉全屏，侧滑条在窄屏上反而更难用 --- */
  .drawer {
    width: 100%;
  }
  .drawer__body {
    overscroll-behavior: contain;
  }

  /* --- 区块间距收紧，减少无谓的滑动距离 --- */
  .section {
    padding-block: clamp(40px, 9vw, 64px);
  }

  /* --- 锚点跳转时不要被固定头部盖住 --- */
  section[id],
  h2[id],
  h3[id],
  [id]:target {
    scroll-margin-top: calc(var(--header-h) + 12px);
  }
}

/* ---- 25.3 底部固定栏：给内容尾部留出让位空间 ---- */
/* 固定栏浮在底部，会盖住页面最后一屏内容；用 :has 精确地在它出现时补白 */
@media (max-width: 959px) {
  body:has(.sticky-buy.is-visible) .site-footer,
  body:has(.sticky-buy.is-visible) .footer {
    padding-bottom: calc(86px + env(safe-area-inset-bottom));
  }
}

/* ---------- 26. Print ---------------------------------------------------- */
@media print {
  .site-header,
  .site-footer,
  .announce,
  .sticky-buy,
  .drawer,
  .drawer-scrim,
  .toast-host,
  .btn {
    display: none !important;
  }
  body {
    background: #fff;
  }
}