/* AUTOBOSS Product Reviews — shared + desktop. Tokens follow autoboss-taobao-detail (--abtd-*) when present,
   otherwise the Blocksy palette, so the module looks the same inside and outside the Taobao page.
   narrow.css (tablet + phone) and phone.css load with media attributes built from the shared breakpoints. */

.abrv {
	--abrv-text: var(--abtd-text, rgba(9, 9, 10, .92));
	--abrv-sub: var(--abtd-sub, rgba(9, 9, 10, .48));
	--abrv-weak: var(--abtd-weak, rgba(9, 9, 10, .24));
	--abrv-line: var(--abtd-line, rgba(31, 31, 51, .1));
	--abrv-split: var(--abtd-split, #ebebeb);
	--abrv-fill: var(--abtd-fill, rgba(31, 31, 51, .04));
	--abrv-fill-2: var(--abtd-fill-2, #f7f7f7);
	--abrv-green: var(--abtd-green, #00a67c);
	--abrv-ink: var(--theme-palette-color-4, #212529);
	--abrv-accent: var(--abtd-accent, var(--theme-palette-color-2, #fdb016));
	--abrv-price: var(--abtd-price, color-mix(in srgb, var(--theme-palette-color-2, #fdb016) 42%, #5a3300));
	--abrv-soft: var(--abtd-soft, color-mix(in srgb, var(--theme-palette-color-2, #fdb016) 12%, #fff));
	--abrv-cart: var(--abtd-cart, linear-gradient(90deg, var(--theme-palette-color-1, #fbbf47), var(--theme-palette-color-2, #fdb016)));
	--abrv-on-cart: var(--abtd-on-cart, var(--theme-palette-color-4, #212529));
	--abrv-star: var(--abrv-accent);
	--abrv-star-off: #e2e5ea;
	/* Semantic roles. Default scheme "neutral": black, white and greys like the rest of the detail page; only the
	   stars keep the theme colour. The "theme" and "custom" schemes re-point these from the inline settings CSS. */
	--abrv-btn: var(--abrv-ink);
	--abrv-on-btn: #fff;
	--abrv-on: var(--abrv-text);
	--abrv-on-bg: #fff;
	--abrv-on-line: var(--abrv-text);
	--abrv-bar: rgba(9, 9, 10, .72);
	--abrv-link: var(--abrv-text);
	--abrv-badge: var(--abrv-sub);
	--abrv-badge-bg: var(--abrv-fill);
	--abrv-avatar-bg: #eceef1;
	--abrv-avatar-fg: rgba(9, 9, 10, .6);
	--abrv-focus: var(--abrv-ink);
	--abrv-icon: var(--abrv-weak);
	--abrv-num: var(--abtd-num, var(--autoboss-font-mono, "IBM Plex Mono", ui-monospace, monospace));
	--abrv-radius: 12px;
	--abrv-btn-radius: 24px;
	--abrv-field-radius: 8px;
	--abrv-clamp: 4;
	--abrv-font: var(--abtd-font, var(--autoboss-font-sans, inherit));
	color: var(--abrv-text);
	font-family: var(--abrv-font);
	font-size: 14px;
	line-height: 22px;
	-webkit-font-smoothing: antialiased;
}
.abrv *, .abrv *::before, .abrv *::after, .abrv-lightbox * { box-sizing: border-box; }
.abrv [hidden], .abrv-lightbox [hidden] { display: none !important; }
:where(.abrv) :is(h2, h3, p) { margin: 0; padding: 0; font-family: inherit; letter-spacing: 0; text-transform: none; }
:where(.abrv, .abrv-lightbox) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; letter-spacing: normal; text-transform: none; min-height: 0; box-shadow: none; border-radius: 0; line-height: inherit; }
/* The child theme forces IBM Plex Mono 500 on every label (style.css "Semantic numeric content and labels", !important).
   Review forms are prose, so the body face wins back here, scoped to this module only. */
.abrv :is(label, input, textarea, select, button, .abrv-field, .abrv-hint, .abrv-msg) { font-family: var(--abrv-font) !important; }
.abrv :is(.abrv-hint, .abrv-msg, .abrv-input, .abrv-check, .abrv-upload-add, .abrv-sort select) { font-weight: 400 !important; }
.abrv :is(.abrv-label) { font-weight: 500 !important; }
.abrv .abrv-i { width: 16px; height: 16px; flex: none; }
.abrv :focus-visible { outline: 2px solid var(--abrv-text); outline-offset: 2px; }

/* ---------- Section ---------- */
.abrv-sec-head { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.abrv-sec-head h2 { flex: none; font-size: 20px; font-weight: 600; line-height: 28px; color: var(--abrv-text); }
.abrv-sec-head .abrv-dot { margin: 0 4px; color: var(--abrv-weak); }
.abrv .abrv-sec-more { display: flex; align-items: center; gap: 2px; margin-left: auto; font-size: 14px; color: var(--abrv-sub); }
.abrv .abrv-sec-more .abrv-i { width: 12px; height: 12px; }
.abrv .abrv-sec-more:hover { color: var(--abrv-text); }

.abrv-summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 28px; align-items: center; padding: 20px 24px; border-radius: var(--abrv-radius); background: var(--abrv-fill-2); }
.abrv-score { display: grid; justify-items: start; gap: 4px; min-width: 128px; }
.abrv-score b { font-family: var(--abrv-num); font-size: 44px; font-weight: 600; line-height: 48px; letter-spacing: -1px; color: var(--abrv-text); }
.abrv-score b small { font-size: 16px; font-weight: 500; letter-spacing: 0; color: var(--abrv-sub); }
.abrv-score > span:last-child { font-size: 12px; line-height: 18px; color: var(--abrv-sub); }
.abrv-stars { --r: 5; --s: 12px; display: inline-block; flex: none; width: calc((var(--s) + 2px) * 5); height: var(--s); background: linear-gradient(90deg, var(--abrv-star) calc(var(--r) * 20%), var(--abrv-star-off) 0); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.94 6.1 6.68.84-4.9 4.6 1.25 6.6L12 17.4l-5.97 3.24 1.25-6.6-4.9-4.6 6.68-.84z'/%3E%3C/svg%3E") 0 0 / calc(var(--s) + 2px) var(--s) repeat-x; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.94 6.1 6.68.84-4.9 4.6 1.25 6.6L12 17.4l-5.97 3.24 1.25-6.6-4.9-4.6 6.68-.84z'/%3E%3C/svg%3E") 0 0 / calc(var(--s) + 2px) var(--s) repeat-x; }
.abrv-bars { display: grid; gap: 6px; min-width: 0; }
.abrv .abrv-bar { display: grid; grid-template-columns: 28px minmax(0, 1fr) 40px; align-items: center; gap: 10px; width: 100%; font-size: 12px; line-height: 16px; color: var(--abrv-sub); text-align: left; }
.abrv .abrv-bar i { height: 6px; border-radius: 3px; background: var(--abrv-line); overflow: hidden; }
.abrv .abrv-bar i::before { content: ""; display: block; width: var(--w); height: 100%; border-radius: inherit; background: var(--abrv-bar); }
.abrv .abrv-bar em { font-style: normal; font-family: var(--abrv-num); text-align: right; }
.abrv button.abrv-bar:hover span { color: var(--abrv-text); }
.abrv-actions { display: grid; gap: 10px; min-width: 188px; }

.abrv .abrv-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 44px; padding: 0 22px; overflow: hidden; border-radius: var(--abrv-btn-radius); font-size: 15px; font-weight: 600; line-height: 1; white-space: nowrap; text-decoration: none; }
.abrv .abrv-btn::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: transparent; transition: background-color .15s; pointer-events: none; }
@media (hover: hover) { .abrv .abrv-btn:hover::after { background: rgba(255, 255, 255, .24); } .abrv .abrv-btn.is-ghost:hover::after { background: rgba(0, 0, 0, .04); } }
.abrv .abrv-btn:active::after { background: rgba(0, 0, 0, .08); }
.abrv .abrv-btn.is-primary { background: var(--abrv-btn); color: var(--abrv-on-btn); }
.abrv .abrv-btn.is-ghost { border: 1px solid var(--abrv-line); background: #fff; color: var(--abrv-text); font-weight: 500; }
.abrv .abrv-btn.is-block { width: 100%; }
.abrv .abrv-btn.is-lg { height: 48px; padding: 0 28px; font-size: 16px; }
.abrv .abrv-btn[disabled] { opacity: .6; cursor: default; }

.abrv-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 4px; }
.abrv .abrv-chip { display: inline-flex; flex: none; align-items: center; gap: 4px; height: 32px; padding: 0 14px; border: 1px solid transparent; border-radius: 16px; background: var(--abrv-fill); color: var(--abrv-text); font-size: 13px; white-space: nowrap; }
.abrv .abrv-chip em { font-style: normal; font-size: 12px; color: var(--abrv-sub); font-variant-numeric: tabular-nums; }
.abrv .abrv-chip .abrv-i { width: 14px; height: 14px; }
.abrv .abrv-chip.is-on { border-color: var(--abrv-on-line); background: var(--abrv-on-bg); color: var(--abrv-on); font-weight: 500; }
.abrv .abrv-chip.is-on em { color: inherit; }
@media (hover: hover) { .abrv .abrv-chip:not(.is-on):hover { background: rgba(31, 31, 51, .08); } }

/* ---------- Review ---------- */
.abrv-list { display: grid; }
.abrv-item { padding: 20px 0; border-bottom: 1px solid var(--abrv-split); }
.abrv-item:last-child { border-bottom: 0; }
.abrv-who { display: flex; align-items: center; gap: 12px; }
.abrv-avatar { position: relative; flex: none; display: grid; place-items: center; width: 42px; height: 42px; overflow: hidden; border-radius: 50%; background: var(--abrv-avatar-bg); color: var(--abrv-avatar-fg); font-size: 14px; font-weight: 600; letter-spacing: .5px; }
.abrv-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.abrv-who-main { flex: 1; min-width: 0; }
.abrv-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 14px; font-weight: 500; line-height: 22px; }
.abrv-verified { display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 6px; border-radius: 4px; background: var(--abrv-badge-bg); color: var(--abrv-badge); font-size: 12px; font-weight: 500; line-height: 20px; }
.abrv .abrv-verified .abrv-i { width: 12px; height: 12px; }
.abrv-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; font-size: 12px; line-height: 20px; color: var(--abrv-sub); }
.abrv-body { margin: 8px 0 0 54px; }
.abrv-title { margin-bottom: 2px !important; font-size: 15px; font-weight: 600; line-height: 22px; color: var(--abrv-text); }
.abrv-text { font-size: 14px; line-height: 22px; overflow-wrap: anywhere; }
.abrv-text p + p { margin-top: 6px; }
.abrv-sec .abrv-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--abrv-clamp); overflow: hidden; }
.abrv-sec .abrv-text.is-open { -webkit-line-clamp: none; }
.abrv .abrv-more { margin-top: 2px; font-size: 13px; color: var(--abrv-link); text-decoration: underline; text-underline-offset: 2px; }
.abrv-item-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.abrv-item-tags span { padding: 0 8px; border-radius: 4px; background: var(--abrv-fill); font-size: 12px; line-height: 22px; color: var(--abrv-sub); }
.abrv-photos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.abrv-photo { position: relative; display: block; width: 72px; height: 72px; overflow: hidden; border: 1px solid var(--abrv-line); border-radius: 8px; background: var(--abrv-fill-2); }
.abrv-photo img { width: 100%; height: 100%; object-fit: cover; }
.abrv-photo b { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, .45); color: #fff; font-size: 15px; font-weight: 600; }
.abrv-reply { margin-top: 10px; padding: 10px 12px; border-radius: 8px; background: var(--abrv-fill-2); font-size: 13px; line-height: 20px; color: var(--abrv-sub); }
.abrv-reply b { font-weight: 600; color: var(--abrv-text); }
.abrv-foot { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.abrv .abrv-vote { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px; border: 1px solid var(--abrv-line); border-radius: 14px; font-size: 12px; color: var(--abrv-sub); font-variant-numeric: tabular-nums; }
.abrv .abrv-vote .abrv-i { width: 14px; height: 14px; }
.abrv .abrv-vote.is-on { border-color: var(--abrv-on-line); background: var(--abrv-on-bg); color: var(--abrv-on); }
.abrv .abrv-vote.is-busy { opacity: .6; pointer-events: none; }
.abrv .abrv-report { margin-left: auto; font-size: 12px; color: var(--abrv-weak); }
@media (hover: hover) { .abrv .abrv-report:not([disabled]):hover { color: var(--abrv-sub); text-decoration: underline; } }
.abrv .abrv-report[disabled] { cursor: default; }
.abrv-show-all { display: flex; justify-content: center; margin-top: 8px; }

.abrv-empty { display: grid; justify-items: center; gap: 6px; padding: 28px 16px; border-radius: var(--abrv-radius); background: var(--abrv-fill-2); text-align: center; }
.abrv-empty .abrv-i { width: 28px; height: 28px; color: var(--abrv-icon); }
.abrv-empty b { font-size: 15px; font-weight: 600; }
.abrv-empty span { color: var(--abrv-sub); }
.abrv-empty .abrv-btn { margin-top: 8px; }
.abrv-empty.is-text { display: block; padding: 16px; color: var(--abrv-sub); }

/* ---------- Drawers (Taobao sheet contract) ---------- */
.abtd-sheet.abrv-sheet.abrv-sheet-view .abtd-sheet-box { width: min(var(--abrv-view-w, 760px), 100vw); }
.abtd-sheet.abrv-sheet.abrv-sheet-leave .abtd-sheet-box { width: min(var(--abrv-leave-w, 560px), 100vw); }
.abrv-sheet .abtd-sheet-head { border-bottom: 1px solid var(--abrv-split); margin-bottom: 0; }
.abrv-sheet .abtd-sheet-head h2 em { margin-left: 6px; font-style: normal; font-weight: 400; font-size: 14px; color: var(--abrv-sub); font-variant-numeric: tabular-nums; }
.abrv-sheet .abtd-sheet-body { padding: 0 24px 24px; }
.abrv-sheet-foot { flex: none; display: flex; gap: 12px; padding: 12px 24px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--abrv-split); background: #fff; }

.abrv-view-summary { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px; align-items: center; padding: 20px 0 16px; }
.abrv-toolbar { display: flex; align-items: center; gap: 12px; margin: 0 -24px; padding: 12px 24px; border-bottom: 1px solid var(--abrv-split); background: #fff; }
.abrv-toolbar.is-sticky { position: sticky; top: 0; z-index: 2; }
.abrv-toolbar .abrv-chips { flex: 1; min-width: 0; margin: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-mask: linear-gradient(90deg, #000 calc(100% - 24px), transparent); mask: linear-gradient(90deg, #000 calc(100% - 24px), transparent); padding-right: 16px; }
.abrv-toolbar .abrv-chips::-webkit-scrollbar { display: none; }
.abrv-sort { flex: none; position: relative; margin: 0; }
.abrv .abrv-sort select { appearance: none; -webkit-appearance: none; height: 32px; min-height: 0; margin: 0; padding: 0 28px 0 12px; border: 1px solid var(--abrv-line); border-radius: 16px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2309090A' stroke-opacity='.48' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 10px center / 12px no-repeat; box-shadow: none; color: var(--abrv-text); font: inherit; font-size: 13px; line-height: 30px; cursor: pointer; }
.abrv-sheet .abrv-list.is-loading { opacity: .45; transition: opacity .15s; }
.abrv-nomatch { padding: 40px 0; text-align: center; color: var(--abrv-sub); }
.abrv-load { display: flex; justify-content: center; padding: 16px 0 4px; }

/* ---------- Write a review ---------- */
.abrv-form { display: grid; gap: 20px; padding-top: 20px; }
.abrv-form-error { padding: 10px 12px; border-radius: 8px; background: #fff1f0; color: #c4320a; font-size: 13px; line-height: 20px; }
.abrv-product { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--abrv-radius); background: var(--abrv-fill-2); }
.abrv-product img { flex: none; width: 56px; height: 56px; object-fit: contain; border-radius: 8px; background: #fff; }
.abrv-product b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 14px; font-weight: 500; line-height: 20px; }
.abrv-product span { font-size: 12px; color: var(--abrv-sub); }
.abrv-field { display: grid; gap: 8px; margin: 0; }
.abrv .abrv-label { display: flex; align-items: baseline; gap: 4px; margin: 0; font-size: 14px; font-weight: 500; line-height: 20px; color: var(--abrv-text); text-transform: none; letter-spacing: 0; }
.abrv-label i { font-style: normal; color: #e5484d; }
.abrv-label small { margin-left: auto; font-size: 12px; font-weight: 400; color: var(--abrv-sub); font-variant-numeric: tabular-nums; }
.abrv-rate { display: flex; align-items: center; gap: 14px; }
.abrv-rate-stars { display: flex; gap: 6px; }
.abrv .abrv-rate-stars button { display: grid; place-items: center; width: 36px; height: 36px; color: var(--abrv-star-off); transition: transform .12s; }
.abrv .abrv-rate-stars button.is-on { color: var(--abrv-star); }
.abrv .abrv-rate-stars button:active { transform: scale(.9); }
.abrv .abrv-rate-stars .abrv-i { width: 32px; height: 32px; }
.abrv-rate-text { font-size: 14px; font-weight: 500; color: var(--abrv-text); }
.abrv .abrv-input { display: block; width: 100%; height: 44px; min-height: 0; margin: 0; padding: 0 14px; border: 1px solid transparent; border-radius: var(--abrv-field-radius); background: var(--abrv-fill-2); box-shadow: none; color: var(--abrv-text); font: inherit; font-size: 15px; line-height: 22px; outline: none; transition: border-color .15s, background-color .15s; }
.abrv .abrv-input::placeholder { color: var(--abrv-weak); opacity: 1; }
.abrv .abrv-input:focus { border-color: var(--abrv-focus); background: #fff; box-shadow: none; outline: none; }
.abrv textarea.abrv-input { height: 132px; padding: 12px 14px; resize: vertical; }
.abrv-field.is-error .abrv-input { border-color: #e5484d; background: #fff; }
.abrv-field.is-error .abrv-rate-stars button:not(.is-on) { color: color-mix(in srgb, #e5484d 30%, #fff); }
.abrv-msg { font-size: 12px; line-height: 18px; color: #e5484d; }
.abrv-msg:empty { display: none; }
.abrv-hint { font-size: 12px; line-height: 18px; color: var(--abrv-sub); }
.abrv-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.abrv-upload { display: flex; flex-wrap: wrap; gap: 10px; }
.abrv-upload > * { position: relative; width: 80px; height: 80px; border-radius: 8px; }
.abrv-upload-thumb img { width: 100%; height: 100%; object-fit: cover; border: 1px solid var(--abrv-line); border-radius: 8px; }
.abrv .abrv-upload-thumb button { position: absolute; top: -6px; right: -6px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(0, 0, 0, .7); color: #fff; }
.abrv .abrv-upload-thumb button .abrv-i { width: 12px; height: 12px; }
.abrv-upload-add { display: grid; place-items: center; align-content: center; gap: 2px; margin: 0; border: 1px dashed var(--abrv-weak); background: #fff; color: var(--abrv-sub); font-size: 11px; line-height: 14px; cursor: pointer; }
.abrv-upload-add .abrv-i { width: 22px; height: 22px; }
.abrv-upload-add input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.abrv-upload-add:focus-within { outline: 2px solid var(--abrv-text); outline-offset: 2px; }
.abrv-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.abrv .abrv-check { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 13px; font-weight: 400; line-height: 20px; color: var(--abrv-sub); cursor: pointer; }
.abrv .abrv-check input { flex: none; width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--abrv-ink); }
.abrv-as, .abrv-note { font-size: 12px; line-height: 18px; color: var(--abrv-sub); }
.abrv-note a { color: inherit; text-decoration: underline; }
.abrv-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.abrv-thanks, .abrv-blocked { display: grid; justify-items: center; gap: 10px; padding: 64px 12px; text-align: center; }
.abrv-thanks .abrv-i { width: 56px; height: 56px; color: var(--abrv-text); }
.abrv-blocked .abrv-i { width: 40px; height: 40px; color: var(--abrv-icon); }
.abrv-thanks b { font-size: 18px; font-weight: 600; }
.abrv-thanks span, .abrv-blocked p { max-width: 340px; color: var(--abrv-sub); }
.abrv-sheet.is-done .abrv-sheet-foot { display: none; }

/* ---------- Photo viewer ---------- */
.abrv-lightbox { position: fixed; inset: 0; z-index: 2147483000; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(0, 0, 0, .92); color: #fff; }
.abrv-lightbox[open] { display: grid; place-items: center; }
.abrv-lightbox::backdrop { background: transparent; }
.abrv-lightbox img { max-width: calc(100vw - 120px); max-height: calc(100dvh - 96px); object-fit: contain; }
.abrv-lightbox button { position: absolute; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: #fff; background: rgba(255, 255, 255, .12); cursor: pointer; border: 0; padding: 0; }
.abrv-lightbox .abrv-i { width: 22px; height: 22px; }
.abrv-lb-x { top: 16px; right: 16px; }
.abrv-lb-nav.is-prev { left: 16px; top: 50%; margin-top: -22px; }
.abrv-lb-nav.is-next { right: 16px; top: 50%; margin-top: -22px; }
.abrv-lb-count { position: absolute; bottom: calc(16px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); font-size: 13px; opacity: .8; font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) { .abrv *, .abrv-lightbox * { transition: none !important; } }