/** * AKSRT Product Page — zibll-aligned * * 包含:商品详情页 + 前台商品编辑器 */ .aksrt-product-page, .aksrt-product-editor { padding: 28px 0 56px; } .aksrt-product-page__layout, .aksrt-product-page__detail-grid, .aksrt-product-editor__layout, .aksrt-product-editor__columns, .aksrt-product-page__details, .aksrt-product-page__actions { display: grid; gap: 20px; } .aksrt-product-page__layout, .aksrt-product-editor__layout { grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr); align-items: start; } .aksrt-product-page__detail-grid { grid-template-columns: minmax(0, 1fr) 320px; margin-top: 24px; } /* ===== Panel surfaces ===== */ .aksrt-product-page__panel, .aksrt-product-editor__panel { background: var(--surface-1); border: none; box-shadow: var(--shadow-sm); border-radius: var(--radius-2xl, 16px); padding: 20px; } .aksrt-product-page__title, .aksrt-product-editor__title { margin: 0 0 10px; font-size: 30px; line-height: 1.1; font-weight: 700; color: var(--color-ink); } .aksrt-product-page__gallery, .aksrt-product-editor__main, .aksrt-product-editor__sidebar, .aksrt-product-page__summary, .aksrt-product-page__side-panels { display: grid; gap: 18px; } /* ===== Gallery ===== */ .aksrt-product-page__primary-image, .aksrt-product-page__placeholder { border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-2); } .aksrt-product-page__primary-image img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; } .aksrt-product-page__placeholder { display: flex; align-items: center; justify-content: center; min-height: 360px; font-size: 56px; color: var(--color-ink-4); } .aksrt-product-page__thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 10px; } .aksrt-product-page__thumb { border: 1px solid var(--color-line); border-radius: var(--radius); padding: 0; background: var(--surface-1); overflow: hidden; cursor: pointer; transition: border-color var(--dur-fast) var(--ease); } .aksrt-product-page__thumb:hover, .aksrt-product-page__thumb.is-active { border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-line, #e5e7eb)); } .aksrt-product-page__thumb img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; } .aksrt-product-page__service-strip { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 4px; } .aksrt-product-page__service-strip span { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; background: var(--surface-4); color: var(--color-ink-3); font-size: 12px; font-weight: 500; } .aksrt-product-page__price-row, .aksrt-product-page__quantity, .aksrt-product-page__term-list, .aksrt-product-editor__actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .aksrt-product-page__badge, .aksrt-product-page__term { display: inline-flex; align-items: center; border-radius: var(--radius-pill); padding: 6px 12px; background: var(--surface-4); color: var(--color-ink-2); font-size: 12px; font-weight: 500; } .aksrt-product-page__badge--promo { background: rgba(239, 68, 68, 0.12); color: var(--color-error); } .aksrt-product-page__price { font-size: 30px; font-weight: 800; color: var(--color-error); line-height: 1; } .aksrt-product-page__sales { font-size: 13px; color: var(--color-ink-4); } /* ===== Sticky buybox (zibll-aligned) ===== */ .aksrt-product-page__summary { position: sticky; top: calc(var(--nav-height) + 16px); } /* ===== Meta info blocks ===== */ .aksrt-product-page__meta, .aksrt-product-page__info-list { display: grid; gap: 12px; margin: 0; } .aksrt-product-page__meta div, .aksrt-product-page__detail-block { padding: 14px; border: 1px solid var(--color-line); border-radius: var(--radius-lg); background: var(--surface-4); } .aksrt-product-page__meta dt { font-size: 12px; color: var(--color-ink-4); margin-bottom: 4px; } .aksrt-product-page__meta dd { margin: 0; font-size: 14px; color: var(--color-ink); font-weight: 500; } /* ===== Form fields ===== */ .aksrt-product-page__field, .aksrt-product-editor__field { display: grid; gap: 8px; } .aksrt-product-page__input, .aksrt-product-editor__input, .aksrt-product-editor__textarea { width: 100%; border: 1px solid var(--color-line); border-radius: var(--radius); padding: 11px 14px; background: var(--surface-1); font-size: 14px; color: var(--color-ink); transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); } .aksrt-product-page__input:focus, .aksrt-product-editor__input:focus, .aksrt-product-editor__textarea:focus { outline: none; border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-line, #e5e7eb)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent); } /* ===== Quantity controls ===== */ .aksrt-product-page__qty-btn { width: 36px; height: 36px; border: 1px solid var(--color-line); border-radius: var(--radius-sm); background: var(--surface-1); color: var(--color-ink-2); cursor: pointer; transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); } .aksrt-product-page__qty-btn:hover { border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-line, #e5e7eb)); background: var(--color-primary-softer); } .aksrt-product-page__qty-input { width: 90px; border: 1px solid var(--color-line); border-radius: var(--radius-sm); padding: 8px 12px; text-align: center; font-size: 14px; color: var(--color-ink); } /* ===== Content ===== */ .aksrt-product-page__content { line-height: 1.8; color: var(--color-ink-2); } .aksrt-product-page__content img { max-width: 100%; border-radius: var(--radius); } /* ===== Empty state ===== */ .aksrt-product-page__empty, .aksrt-product-editor__empty { text-align: center; padding: 48px 20px; } .aksrt-product-page__empty i, .aksrt-product-editor__empty i { display: block; font-size: 44px; color: var(--color-ink-4); margin-bottom: 12px; } .aksrt-product-editor__checkbox { display: flex; gap: 10px; align-items: center; } .aksrt-product-editor__sidebar { position: sticky; top: 24px; } /* ===== Responsive ===== */ @media (max-width: 980px) { .aksrt-product-page__layout, .aksrt-product-page__detail-grid, .aksrt-product-editor__layout, .aksrt-product-editor__columns, .aksrt-product-page__details { grid-template-columns: 1fr; } .aksrt-product-page__summary { position: static; } .aksrt-product-editor__sidebar { position: static; } } @media (max-width: 767px) { .aksrt-product-page__title, .aksrt-product-editor__title { font-size: 22px; } .aksrt-product-page__thumbs { gap: 6px; } .aksrt-product-page__spec-values { flex-wrap: wrap; } .aksrt-product-page__actions { grid-template-columns: 1fr; } .aksrt-product-page__actions .btn-lg, .aksrt-product-editor__actions .btn-lg { width: 100%; } } @media (max-width: 480px) { .aksrt-product-page, .aksrt-product-editor { padding: 16px 0 40px; } .aksrt-product-page__price { font-size: 24px; } .aksrt-product-page__meta { grid-template-columns: 1fr; } } /* ===== Dark mode ===== */ html.dark .aksrt-product-page__badge--promo, html.dark .aksrt-product-page__badge--promo { background: rgba(239, 68, 68, 0.18); } html.dark .aksrt-product-page__placeholder, html.dark .aksrt-product-page__placeholder { background: var(--surface-2); } html.dark .aksrt-product-page__thumb, html.dark .aksrt-product-page__thumb { border-color: var(--color-line); } html.dark .aksrt-product-page__content img, html.dark .aksrt-product-page__content img { opacity: 0.92; } /* ============================================================ * SKU 规格选择器 * ============================================================ */ .aksrt-product-page__sku-selector { margin: 16px 0; padding: 16px; background: var(--surface-4); border: 1px solid var(--color-line); border-radius: var(--radius-lg); } .aksrt-product-page__spec-group { margin-bottom: 12px; } .aksrt-product-page__spec-group:last-child { margin-bottom: 0; } .aksrt-product-page__spec-label { display: block; font-size: 13px; font-weight: 600; color: var(--color-ink-2); margin-bottom: 8px; } .aksrt-product-page__spec-values { display: flex; flex-wrap: wrap; gap: 8px; } .aksrt-product-page__spec-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; height: 32px; padding: 0 12px; font-size: 13px; font-weight: 500; color: var(--color-ink-2); background: var(--surface-1); border: 1px solid var(--color-line); border-radius: 6px; cursor: pointer; transition: all var(--dur-fast) var(--ease); } .aksrt-product-page__spec-btn:hover { border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-line, #e5e7eb)); color: var(--color-primary); } .aksrt-product-page__spec-btn.is-active { background: var(--color-primary-soft); border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-line, #e5e7eb)); color: var(--color-primary); font-weight: 600; } .aksrt-product-page__spec-btn:disabled { opacity: 0.4; cursor: not-allowed; text-decoration: line-through; } /* SKU 信息区 */ .aksrt-product-page__sku-info { margin-top: 12px; padding: 10px 12px; background: var(--surface-1); border-radius: 6px; display: flex; align-items: center; gap: 12px; } .aksrt-product-page__sku-price { font-size: 18px; font-weight: 700; color: var(--color-error); } .aksrt-product-page__sku-stock { font-size: 13px; color: var(--color-ink-3); } /* Product detail shell — align with single content stream */ .content-shell--product .content-wrap { padding-top: 8px; } .content-shell--product .aksrt-product-page { width: 100%; } .aksrt-product-page__related { margin-top: 28px; padding-top: 8px; } .aksrt-product-page__related-title { margin: 0 0 14px; font-size: 18px; font-weight: 700; color: var(--color-ink, #1f2937); } .aksrt-product-page__related-grid.aksrt-product-archive__grid { margin: 0; } .aksrt-product-page__merchant-link { display: inline-block; margin-top: 4px; }