/* ============================================================
   theme.css — 开集「纸上集市」视觉精修层
   Owned by design-content. Loaded after base / components / pages.

   范围：字阶与纸感、商品卡与货架、焦点、状态、暗部层次。
   约束：不改页面栅格与置位；所有纹理均为 CSS 渐变；
         无外部字体、图片、网络请求。动效仅 transform / opacity。
   ============================================================ */

:root {
  --theme-paper-light: #fffaf2;
  --theme-ink-muted: #695b4d;
  --theme-frame: rgba(92, 68, 43, .14);
  --theme-frame-strong: rgba(92, 68, 43, .28);
  --theme-rule: rgba(112, 88, 61, .16);
  --theme-jade-ring: rgba(30, 111, 92, .15);
  --theme-honey-ring: rgba(231, 180, 87, .22);
  --theme-shadow-card: 0 24px 48px -38px rgba(55, 37, 20, .72);
  --theme-shadow-deep: 0 36px 86px -58px rgba(18, 28, 23, .9);
  --theme-grain-lines: repeating-linear-gradient(
    118deg,
    rgba(255, 250, 240, .018) 0 1px,
    transparent 1px 6px
  );
}

/* ---------- 1 · 纸面与字阶 ---------- */

body {
  background-color: var(--paper);
  background-image:
    radial-gradient(78ch 56ch at 8% -10%, rgba(255, 252, 245, .8), transparent 62%),
    radial-gradient(60ch 48ch at 102% 8%, rgba(231, 180, 87, .09), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, .13), transparent 32rem);
}

h1,
h2,
h3 {
  font-kerning: normal;
  font-feature-settings: "kern" 1;
}

p,
.home-hero__body,
.home-section-heading__desc,
.section-description,
.catalog-lede,
.pdp-details__lead,
.pdp-detail-section p,
.footer-brand p {
  text-wrap: pretty;
}

.product-card__title,
.home-group__grid .product-card__title {
  font-family: var(--font-display);
  font-weight: 620;
  letter-spacing: -.012em;
  line-height: 1.42;
}

.product-card__brand {
  letter-spacing: .07em;
}

.price {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.price .amount {
  letter-spacing: -.045em;
}

.rating-line,
.product-card__subtitle,
.product-card__delivery,
.product-card__meta {
  color: var(--theme-ink-muted);
}

.home-section-heading__desc,
.section-description,
.catalog-lede {
  letter-spacing: .005em;
}

.home-assurance__metric b,
.home-group__facts b,
.pdp-offer-stock,
.home-hero__price .amount {
  font-variant-numeric: tabular-nums;
}

/* ---------- 2 · 商品卡：纸相框与触感 ---------- */

.product-card {
  --theme-card-ease: cubic-bezier(.22, .8, .2, 1);
  transition: transform .26s var(--theme-card-ease);
}

.product-card__art {
  border: 1px solid var(--theme-frame);
  background-color: #e5d7c3;
  box-shadow:
    inset 0 0 0 1px rgba(255, 252, 244, .22),
    0 18px 34px -30px rgba(50, 34, 18, .72);
}

.product-card__art::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 250, 240, .1), transparent 34%),
    linear-gradient(0deg, rgba(46, 32, 20, .045), transparent 26%);
}

.product-card__badge-row,
.product-card__save {
  z-index: 2;
}

.product-card__save {
  border: 1px solid rgba(255, 252, 244, .58);
  box-shadow: 0 4px 12px -9px rgba(31, 21, 12, .55);
}

.product-card__badge-row .badge {
  box-shadow: 0 1px 0 rgba(255, 252, 244, .2) inset;
}

.product-card__group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  min-height: 22px;
  padding: 2px 8px;
  border: 1px solid rgba(174, 111, 38, .16);
  border-radius: 999px;
  background: rgba(248, 236, 207, .82);
  color: #78471c;
  font-variant-numeric: tabular-nums;
}

.product-card__delivery {
  border-top-color: var(--theme-rule);
}

.product-card__anchor:focus-visible {
  outline: 3px solid var(--jade);
  outline-offset: 4px;
}

.product-card:focus-within .product-card__art {
  border-color: var(--theme-frame-strong);
  box-shadow:
    inset 0 0 0 1px rgba(255, 252, 244, .24),
    0 0 0 3px var(--jade-soft),
    var(--theme-shadow-card);
}

@media (hover: hover) and (pointer: fine) {
  .product-card:hover {
    transform: translateY(-3px);
  }

  .product-card:hover .product-card__art {
    border-color: var(--theme-frame-strong);
    box-shadow:
      inset 0 0 0 1px rgba(255, 252, 244, .3),
      0 26px 50px -34px rgba(50, 34, 18, .8);
  }
}

/* ---------- 3 · 货架、分类柜台与浅色纸板 ---------- */

.home-shelf,
.home-arrivals {
  background-image: linear-gradient(
    180deg,
    transparent 0,
    rgba(255, 250, 242, .18) 18%,
    rgba(231, 180, 87, .045) 72%,
    transparent 100%
  );
}

.home-arrivals {
  border-top: 1px solid var(--theme-rule);
}

.home-shelf .product-grid,
.home-arrivals .product-grid {
  position: relative;
}

.home-shelf .product-grid::after,
.home-arrivals .product-grid::after {
  content: "";
  position: absolute;
  right: 1.5%;
  bottom: -15px;
  left: 1.5%;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(128, 95, 58, .24) 10%,
    rgba(231, 180, 87, .34) 50%,
    rgba(128, 95, 58, .24) 90%,
    transparent
  );
  box-shadow: 0 18px 28px -24px rgba(76, 52, 29, .55);
}

.home-section-link,
.section-link {
  text-underline-offset: 5px;
}

.home-category {
  background-image: linear-gradient(158deg, #fffaf3, #f5ebdd);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .65),
    var(--shadow-xs);
}

.home-category:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .7),
    var(--shadow-sm);
}

.home-assurance__panel,
.home-personal__recent,
.home-personal__recommended {
  background-image: linear-gradient(148deg, rgba(255, 252, 246, .94), rgba(245, 235, 221, .88));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .54),
    var(--shadow-sm);
}

/* ---------- 4 · 焦点：暖纸上的双层描边 ---------- */

:where(a[href], button:not(:disabled), input:not(:disabled), select:not(:disabled), textarea:not(:disabled), summary, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 3px solid var(--jade);
  outline-offset: 3px;
  box-shadow:
    0 0 0 1px rgba(255, 250, 242, .92),
    0 0 0 7px var(--theme-jade-ring);
}

.home-hero :focus-visible,
.home-group :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--honey);
  box-shadow:
    0 0 0 1px rgba(29, 41, 37, .82),
    0 0 0 7px var(--theme-honey-ring);
}

.pdp-group-box :focus-visible {
  box-shadow:
    0 0 0 1px rgba(255, 250, 242, .92),
    0 0 0 7px rgba(30, 111, 92, .14);
}

.icon-btn[aria-expanded="true"] {
  background: rgba(34, 27, 22, .065);
  box-shadow: inset 0 0 0 1px rgba(34, 27, 22, .08);
}

/* ---------- 5 · 状态：供给、筛选、空态与反馈 ---------- */

.btn:disabled,
.btn[aria-disabled="true"] {
  filter: saturate(.45);
}

.pdp-offer-option {
  background-image: linear-gradient(
    155deg,
    rgba(255, 251, 244, .82),
    rgba(244, 233, 219, .55)
  );
}

.pdp-offer-option:hover {
  background-image: linear-gradient(155deg, #fffaf2, #f4e9da);
}

.pdp-offer-option:has(input:checked),
.pdp-offer-option.is-selected {
  background-image: linear-gradient(158deg, #fffbf4, #fff0e6);
  box-shadow:
    inset 0 0 0 1px rgba(215, 70, 44, .16),
    0 10px 24px -22px rgba(159, 52, 31, .55);
}

.pdp-offer-option.is-soldout {
  filter: saturate(.42);
}

.pdp-kind-tag,
.pdp-offer-primary {
  letter-spacing: .02em;
}

.pdp-group-box {
  box-shadow:
    inset 0 0 0 1px rgba(30, 111, 92, .1),
    0 14px 32px -28px rgba(30, 111, 92, .5);
}

.pdp-sku.is-active {
  box-shadow: 0 8px 18px -14px rgba(34, 27, 22, .62);
}

.pdp-favorite.is-active {
  box-shadow: inset 0 0 0 1px rgba(215, 70, 44, .12);
}

.segmented button.is-active {
  box-shadow: inset 0 1px 0 rgba(255, 250, 242, .16);
}

.catalog-filter-chip.is-active {
  box-shadow:
    inset 0 0 0 1px rgba(255, 250, 242, .18),
    0 6px 16px -13px rgba(52, 35, 20, .35);
}

.empty-state {
  background-image: repeating-linear-gradient(
    135deg,
    rgba(255, 250, 242, .36) 0 10px,
    rgba(243, 234, 221, .2) 10px 20px
  );
  border-color: rgba(112, 88, 61, .24);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
}

.home-state__card,
.pdp-state__card,
.catalog-empty .empty-state {
  background-image:
    radial-gradient(100% 130% at 0 0, rgba(255, 252, 246, .9), transparent 60%),
    linear-gradient(150deg, var(--paper-raised), #f5eadb);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .62),
    var(--shadow-sm);
}

.form-error,
.error-inline,
.pdp-action-error {
  border-left: 3px solid var(--danger);
  background-color: #fff4ef;
}

.notice {
  border-left: 3px solid var(--jade);
  background-color: #edf5ef;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4);
}

.demo-note::before {
  color: var(--accent-deep);
}

.skeleton {
  background-color: #e8dcc9;
}

.skeleton::after {
  background: linear-gradient(90deg, transparent, rgba(255, 250, 242, .56), transparent);
}

.toast {
  border: 1px solid rgba(255, 250, 242, .12);
  box-shadow: 0 18px 42px -24px rgba(0, 0, 0, .56);
}

.toast--error {
  border-color: rgba(255, 189, 173, .26);
}

.pdp-highlight,
.pdp-spec-card,
.pdp-detail-figure {
  background-image: linear-gradient(152deg, #fffaf3, #f7eee2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55);
}

.pdp-story {
  background-image: linear-gradient(90deg, rgba(231, 180, 87, .075), transparent 70%);
  border-left-color: var(--accent-deep);
}

.pdp-buy {
  background-image:
    radial-gradient(140% 80% at 100% 0, rgba(231, 180, 87, .08), transparent 55%),
    linear-gradient(165deg, #fffaf3, #f8efe3);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .6),
    var(--shadow-sm);
}

.pdp-gallery__stage {
  background-color: #e7dac8;
  border-color: var(--theme-frame);
  box-shadow:
    inset 0 0 0 1px rgba(255, 252, 244, .4),
    var(--theme-shadow-card);
}

.catalog-search {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .7),
    0 14px 36px rgba(64, 42, 22, .07);
}

/* ---------- 6 · 暗部层次：暖光、纸纹与更深的夜 ---------- */

.home-hero__panel {
  box-shadow:
    inset 0 0 0 1px rgba(255, 246, 226, .06),
    var(--theme-shadow-deep);
}

.home-hero__figure {
  box-shadow:
    inset 0 0 0 12px rgba(255, 250, 242, .055),
    0 28px 54px -38px rgba(8, 14, 11, .9);
}

.home-deals__panel {
  box-shadow:
    inset 0 0 0 1px rgba(255, 252, 244, .48),
    0 30px 64px -52px rgba(112, 74, 30, .46);
}

.home-group__panel {
  box-shadow:
    inset 0 0 0 1px rgba(255, 246, 226, .08),
    0 34px 76px -52px rgba(14, 25, 21, .8);
}

.home-group__grid .product-card {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .65),
    0 16px 34px -28px rgba(0, 0, 0, .5);
}

.promo-bar {
  background-image:
    var(--theme-grain-lines),
    linear-gradient(90deg, #19241f, #223029 55%, #17211d);
  box-shadow: inset 0 -1px 0 rgba(246, 241, 232, .07);
}

.site-header {
  box-shadow: 0 16px 30px -30px rgba(64, 42, 22, .52);
}

.site-footer {
  position: relative;
  background-color: var(--night);
  background-image:
    var(--theme-grain-lines),
    radial-gradient(ellipse at 12% 0%, rgba(231, 180, 87, .12), transparent 48%),
    radial-gradient(ellipse at 92% 18%, rgba(30, 111, 92, .26), transparent 52%),
    linear-gradient(180deg, #1d2925 0%, #16211c 68%, #111a16 100%);
  box-shadow: inset 0 1px 0 rgba(246, 241, 232, .07);
}

.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  right: 8%;
  left: 8%;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(231, 180, 87, .5), transparent);
}

.footer-brand b em {
  text-shadow: 0 1px 0 rgba(0, 0, 0, .18);
}

.footer-column a {
  text-underline-offset: 4px;
  text-decoration-color: transparent;
  transition: color .2s, text-decoration-color .2s;
}

.footer-column a:hover {
  color: #fff9ed;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.modal {
  background-image:
    radial-gradient(120% 80% at 0 0, rgba(255, 252, 246, .82), transparent 55%),
    linear-gradient(160deg, var(--paper), #f4eadc);
  box-shadow:
    inset 0 0 0 1px rgba(255, 252, 244, .5),
    var(--shadow-lg);
}

/* ---------- 7 · 小件与品牌记号的纸感高光 ---------- */

.brand-mark {
  box-shadow:
    0 5px 0 #a8301c,
    inset 0 1px 0 rgba(255, 250, 242, .28);
}

.paint-strip {
  box-shadow:
    0 1px 0 rgba(255, 250, 242, .5),
    0 7px 18px -16px rgba(55, 37, 20, .5);
}

@media (prefers-contrast: more) {
  .product-card__art {
    border-color: rgba(34, 27, 22, .5);
  }

  .product-card__subtitle,
  .product-card__delivery,
  .product-card__meta,
  .rating-line {
    color: var(--ink-soft);
  }

  :where(a[href], button:not(:disabled), input:not(:disabled), select:not(:disabled), textarea:not(:disabled), summary, [tabindex]:not([tabindex="-1"])):focus-visible {
    outline-width: 4px;
    outline-color: var(--accent-deep);
  }
}

@media (forced-colors: active) {
  :where(a[href], button:not(:disabled), input:not(:disabled), select:not(:disabled), textarea:not(:disabled), summary, [tabindex]:not([tabindex="-1"])):focus-visible {
    outline: 3px solid Highlight;
    box-shadow: none;
  }

  .product-card__art,
  .pdp-gallery__stage {
    border: 1px solid CanvasText;
  }
}

@media (prefers-reduced-motion: reduce) {
  .product-card,
  .product-card:hover {
    transform: none;
  }
}