/* WP EasyCart Admin — Settings › Products as a Store setup page ( 6.0.7 ): Store details' cards ( setup-store-v2.css ) with pages that
   follow what is switched on, chips for parts, radio cards for one question, searchable pickers. Accent follows the admin colorizer
   through --ecsu-accent ( setup-v2.css ). */
.ecpr [hidden] { display:none !important; }

/* a block of controls, a block under it, a line of help */
.ecpr-group { display:flex; flex-direction:column; gap:8px; min-width:0; scroll-margin-top:72px; }
.ecpr-group + .ecpr-group { padding-top:14px; border-top:1px solid var(--ecv2-g100); }
.ecpr-sub { display:flex; flex-direction:column; gap:8px; min-width:0; }
.ecpr-note { margin:0; font-size:12.5px; line-height:1.5; color:var(--ecv2-g600); }
.ecpr-note .ecsd2-link { margin-left:4px; }
.ecpr-note.is-warn { padding:8px 10px; border:1px solid #fde68a; border-radius:8px; background:#fffbeb; color:#92400e; }
.ecpr-row { display:grid; grid-template-columns:minmax(0,1fr); gap:14px; }
@container ecsd2 (min-width: 760px) {
	.ecpr-row { grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); }
	.ecpr-row > .ecpr-group + .ecpr-group { padding-top:0; border-top:0; }
}

/* one question, its choices as cards ( a radio group ) */
.ecpr-tiles { display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:12px 10px; padding-top:4px; }
.ecpr-tile { position:relative; display:flex; align-items:flex-start; gap:10px; padding:12px 13px; border:1px solid var(--ecv2-g300); border-radius:10px; background:#fff; color:var(--ecv2-g800); text-align:left; cursor:pointer; font:inherit; min-width:0; }
.ecpr-tile:hover { border-color:var(--ecv2-g500); background:var(--ecv2-g50, #f9fafb); }
.ecpr-tile:focus-visible { outline:2px solid var(--ecsu-accent); outline-offset:2px; }
.ecpr-tile.is-on { border:2px solid var(--ecsu-accent); padding:11px 12px; background:var(--ecsu-accent-soft); cursor:default; }
.ecpr-tile.is-on .ecsd2-radio { border-color:var(--ecsu-accent); background:radial-gradient(circle, var(--ecsu-accent) 0 4px, #fff 5px); }
.ecpr-tile[data-pr-custom] { cursor:pointer; }
.ecpr-tile-body { display:flex; flex-direction:column; gap:3px; min-width:0; }
.ecpr-tile-body > b { font-size:14px; font-weight:700; color:var(--ecv2-g900); }
.ecpr-tile-body > span { font-size:12.5px; line-height:1.45; color:var(--ecv2-g600); }
.ecpr-tile.is-on .ecpr-tile-body > span { color:var(--ecv2-g700); }
.ecpr-tiles-small .ecpr-tile { min-height:0; }
/* what shoppers would see with this choice */
.ecpr-who-demo { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:6px 10px; margin-top:8px; padding:8px 10px; border:1px solid var(--ecv2-g200); border-radius:8px; background:#fff; }
.ecpr-who-demo i { font-style:normal; font-size:12px; color:var(--ecv2-g700); min-width:0; overflow-wrap:anywhere; }
.ecpr-demo-btn { flex:0 0 auto; padding:3px 9px; border-radius:6px; background:var(--ecv2-g800); color:#fff; font-size:11.5px; font-weight:600; }
.ecpr-demo-btn.is-off { background:var(--ecv2-g100); color:var(--ecv2-g700); font-weight:500; }
.ecpr-who-panel { display:flex; flex-direction:column; gap:10px; padding:14px; border:1px solid var(--ecv2-g200); border-radius:10px; background:var(--ecv2-g50, #f9fafb); }

/* chips: a part shown or hidden ( pressed ) */
.ecpr-chips { display:flex; flex-wrap:wrap; gap:6px; }
.ecpr-chip { display:inline-flex; align-items:center; gap:6px; min-height:34px; padding:0 12px; border:1px solid var(--ecv2-g300); border-radius:999px; background:#fff; color:var(--ecv2-g700); font:inherit; font-size:13px; line-height:1.2; cursor:pointer; }
.ecpr-chip:hover { border-color:var(--ecv2-g500); }
.ecpr-chip:focus-visible { outline:2px solid var(--ecsu-accent); outline-offset:2px; }
.ecpr-chip-mark { position:relative; flex:0 0 auto; width:14px; height:14px; }
.ecpr-chip-mark::before, .ecpr-chip-mark::after { content:""; position:absolute; left:6px; top:1px; width:2px; height:12px; border-radius:1px; background:currentColor; }
.ecpr-chip-mark::after { transform:rotate(90deg); }
.ecpr-chip.is-on { border:2px solid var(--ecsu-accent); padding:0 11px; background:var(--ecsu-accent-soft); color:var(--ecv2-g900); font-weight:600; }
.ecpr-chip.is-on .ecpr-chip-mark::before { left:5px; top:1px; width:5px; height:9px; border-radius:0; background:none; border:solid var(--ecv2-g900); border-width:0 2px 2px 0; transform:rotate(45deg); }
.ecpr-chip.is-on .ecpr-chip-mark::after { display:none; }
.ecpr-chip em { font-style:normal; font-size:11px; font-weight:600; padding:0 6px; border-radius:999px; background:#fef3c7; color:#92400e; }
.ecpr-chip.is-warn.is-on { border-color:#d97706; background:#fffbeb; }
.ecpr-chip.is-locked { cursor:default; border-style:dashed; color:var(--ecv2-g500); }
.ecpr-plan { display:inline-block; margin-left:4px; padding:0 7px; border-radius:999px; background:var(--ecv2-plan-bg, #ede9fe); color:var(--ecv2-plan-fg, #5b21b6); font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; vertical-align:middle; line-height:18px; }

/* a switch with its words and a tip */
.ecpr-sw { display:flex; align-items:flex-start; gap:10px; min-width:0; scroll-margin-top:72px; }
.ecpr-sw .ecst-toggle { margin-top:1px; }
.ecpr-sw-text { flex:1 1 auto; display:flex; flex-direction:column; gap:2px; min-width:0; }
.ecpr-sw-text > label, .ecpr-sw-text > b { font-size:13.5px; font-weight:600; color:var(--ecv2-g900); cursor:pointer; line-height:1.4; }
.ecpr-sw-text > b { cursor:default; }
.ecpr-tip { font-size:12.5px; line-height:1.45; color:var(--ecv2-g600); }
.ecpr-sw-act { flex:0 0 auto; }
.ecpr-sw.is-locked .ecst-toggle { margin-top:2px; }
.ecpr-sub > .ecpr-sw, .ecpr-sub > .ecpr-note { margin-left:46px; }
.ecpr-group > .ecpr-sub { padding-left:0; }

/* the page beside the controls */
.ecpr-split { display:grid; grid-template-columns:minmax(0,1fr); gap:16px; align-items:start; }
.ecpr-controls { display:flex; flex-direction:column; gap:14px; min-width:0; }
@container ecsd2 (min-width: 820px) {
	.ecpr-split { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px; }
	/* the page stays in view while the controls beside it scroll ( no payment cover or fixed child in it ) */
	.ecpr-split > figure { position:sticky; top:72px; }
}

/* Fine-tune: the engine's advanced rows are what it holds, so they show ( as on Store details ) */
#ecsu[data-area="products"] .ecst-embed .ecst-row.is-advanced:not(.is-shown) { display:grid; }
#ecsu[data-area="products"] .ecst-embed .ecst-row.is-advanced[hidden] { display:none; }

/* a product page */
.ecpr-pp, .ecpr-sp { margin:0; padding:14px; border:1px solid var(--ecv2-g200); border-radius:12px; background:linear-gradient(180deg, var(--ecv2-g50, #f9fafb), #fff 40%); display:flex; flex-direction:column; gap:10px; min-width:0; }
.ecpr-pp-crumbs { font-size:11.5px; color:var(--ecv2-g500); overflow-wrap:anywhere; }
.ecpr-pp-body { position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:14px; align-items:start; }
/* 6.0.7 ( Matt's review ): the photo at its own shape and sharp ( the large copy ); it zooms and opens large as the store's does */
.ecpr-pp-pic { position:relative; display:block; width:100%; max-width:100%; margin:0; padding:0; border:1px solid var(--ecv2-g200); border-radius:10px; background:#fff; overflow:hidden; font:inherit; color:inherit; text-align:left; cursor:default; }
.ecpr-pp-pic img { display:block; width:100%; height:auto; max-height:440px; object-fit:contain; }
.ecpr-pp-pic.is-empty { aspect-ratio:1; border:0; background:var(--ecv2-g100); }
.ecpr-pp-pic.can-zoom { cursor:crosshair; }
.ecpr-pp-pic.can-open { cursor:zoom-in; }
.ecpr-pp-pic:focus-visible { outline:2px solid var(--ecsu-accent); outline-offset:2px; }
.ecpr-pp-mag { position:absolute; z-index:4; border:1px solid var(--ecv2-g300); border-radius:10px; background-color:#fff; background-repeat:no-repeat; box-shadow:0 12px 32px rgba(17,24,39,.2); pointer-events:none; }
.ecpr-pp-tags { position:absolute; left:6px; bottom:6px; display:flex; flex-wrap:wrap; gap:4px; }
.ecpr-pp-tags span { padding:2px 7px; border-radius:999px; background:rgba(17,24,39,.78); color:#fff; font-size:10.5px; font-weight:600; }
.ecpr-pp-info { display:flex; flex-direction:column; align-items:flex-start; gap:5px; min-width:0; }
.ecpr-pp-title { font-size:16px; line-height:1.3; color:var(--ecv2-g900); overflow-wrap:anywhere; }
.ecpr-pp-model { font-size:11.5px; color:var(--ecv2-g500); }
.ecpr-pp-price { font-size:16px; color:var(--ecv2-g900); font-variant-numeric:tabular-nums; }
.ecpr-pp-price s { margin-left:4px; font-size:13px; color:var(--ecv2-g500); }
.ecpr-pp-small { font-size:11.5px; line-height:1.4; color:var(--ecv2-g600); }
.ecpr-pp-stock { font-size:11.5px; font-weight:600; color:#b45309; }
.ecpr-pp-btn, .ecpr-pp-closed { margin:3px 0; padding:7px 14px; border-radius:8px; font-size:12.5px; font-weight:700; }
.ecpr-pp-btn { background:var(--ecv2-g900); color:#fff; }
.ecpr-pp-closed { background:var(--ecv2-g100); color:var(--ecv2-g700); font-weight:600; }
.ecpr-pp-share { display:flex; flex-wrap:wrap; gap:4px; }
.ecpr-pp-share > span { padding:1px 8px; border:1px solid var(--ecv2-g200); border-radius:999px; font-size:11px; color:var(--ecv2-g600); }
.ecpr-pp-share:not(:has(> span:not([hidden]))) { display:none; }
.ecpr-pp-tab { padding:2px 8px; border:1px solid var(--ecv2-g200); border-radius:6px; font-size:11px; color:var(--ecv2-g700); }
.ecpr-pp-tabs { display:flex; flex-wrap:wrap; gap:4px; padding-top:8px; border-top:1px solid var(--ecv2-g200); }
.ecpr-pp-tabs > span { padding:3px 10px; border:0; border-radius:6px; font-size:11.5px; color:var(--ecv2-g600); }
.ecpr-pp-tabs > span.is-on { background:var(--ecv2-g100); color:var(--ecv2-g900); font-weight:600; }
.ecpr-pp-buy { display:inline-flex; align-items:center; gap:8px; margin:3px 0; }
.ecpr-pp-buy .ecpr-pp-btn { margin:0; }

/* the store page */
.ecpr-sp-bar { display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px; font-size:11.5px; color:var(--ecv2-g600); }
.ecpr-sp-bar > span:first-child { margin-right:auto; }
.ecpr-sp-sort, .ecpr-sp-btn { padding:3px 8px; border:1px solid var(--ecv2-g200); border-radius:6px; background:#fff; color:var(--ecv2-g800); }
.ecpr-sp-body { display:flex; gap:10px; min-width:0; }
.ecpr-sp.is-right .ecpr-sp-body { flex-direction:row-reverse; }
.ecpr-sp-side { flex:0 0 30%; display:flex; flex-direction:column; gap:8px; padding:8px; border:1px solid var(--ecv2-g200); border-radius:8px; background:#fff; min-width:0; }
.ecpr-sp-search { padding:3px 6px; border:1px solid var(--ecv2-g200); border-radius:5px; font-size:10.5px; color:var(--ecv2-g500); }
.ecpr-sp-group { display:flex; flex-direction:column; gap:3px; }
.ecpr-sp-group b { font-size:10.5px; color:var(--ecv2-g800); }
.ecpr-sp-group i { display:block; height:5px; width:80%; border-radius:3px; background:var(--ecv2-g100); }
.ecpr-sp-group i + i { width:60%; }
.ecpr-sp-tiles { flex:1 1 auto; display:grid; grid-template-columns:repeat(auto-fill, minmax(90px, 1fr)); gap:8px; min-width:0; }
.ecpr-sp-tile { display:flex; flex-direction:column; gap:2px; min-width:0; font-size:11.5px; color:var(--ecv2-g700); }
.ecpr-sp-tile b { font-size:11.5px; color:var(--ecv2-g900); overflow-wrap:anywhere; }
.ecpr-sp-tile small { font-size:10.5px; line-height:1.35; color:var(--ecv2-g500); }
.ecpr-sp-pic { aspect-ratio:1; max-width:100%; border-radius:7px; background:var(--ecv2-g100); overflow:hidden; margin-bottom:3px; }
.ecpr-sp-pic img { width:100%; height:100%; object-fit:cover; }
.ecpr-sp-save { font-size:10.5px; font-weight:600; color:#15803d; }
.ecpr-sp-foot { text-align:center; font-size:11.5px; color:var(--ecv2-g600); letter-spacing:.04em; }
.ecpr-select { max-width:360px; }

/* the sidebar's filters and pickers */
.ecpr-filters { display:flex; flex-direction:column; gap:14px; padding-top:14px; border-top:1px solid var(--ecv2-g100); }
.ecpr-pickers { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:12px; }
.ecpr-picker-group, .ecpr-picker { display:flex; flex-direction:column; gap:8px; min-width:0; }
.ecpr-picker-group { padding:12px; border:1px solid var(--ecv2-g200); border-radius:10px; background:var(--ecv2-g50, #f9fafb); }
.ecpr-pickers > .ecpr-picker { padding:12px; border:1px solid var(--ecv2-g200); border-radius:10px; background:var(--ecv2-g50, #f9fafb); }
.ecpr-picker-group > .ecpr-picker { padding:0; border:0; background:none; }
.ecpr-picker .ecsd2-label { margin:0; }
.ecpr-picked { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.ecpr-picked li { margin:0; display:inline-flex; align-items:center; gap:2px; padding:2px 2px 2px 10px; border:1px solid var(--ecv2-g300); border-radius:999px; background:#fff; font-size:12.5px; color:var(--ecv2-g900); max-width:100%; }
.ecpr-picked li > span { min-width:0; overflow-wrap:anywhere; }
.ecpr-picked em { font-style:normal; color:var(--ecv2-g500); font-size:11.5px; }
.ecpr-unpick { flex:0 0 auto; width:24px; height:24px; border:0; border-radius:50%; background:transparent; color:var(--ecv2-g600); font-size:16px; line-height:1; cursor:pointer; }
.ecpr-unpick:hover, .ecpr-unpick:focus-visible { background:var(--ecv2-g100); color:var(--ecv2-g900); outline:none; }
.ecpr-unpick:focus-visible { box-shadow:0 0 0 2px var(--ecsu-accent); }
.ecpr-picked-none { margin:0; padding:7px 10px; border:1.5px dashed #d97706; border-radius:8px; background:#fffbeb; font-size:12.5px; color:#92400e; }
.ecpr-find { position:relative; }
.ecpr .ecpr-find-q { min-height:38px; padding:6px 10px 6px 34px; background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 10px center; }
.ecpr-find-list { position:absolute; z-index:30; left:0; right:0; top:calc(100% + 4px); margin:0; padding:4px; list-style:none; max-height:240px; overflow:auto; border:1px solid var(--ecv2-g200); border-radius:10px; background:#fff; box-shadow:0 10px 24px rgba(17,24,39,.14); }
.ecpr-find-opt { display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin:0; padding:7px 9px; border-radius:7px; cursor:pointer; font-size:13px; color:var(--ecv2-g900); }
.ecpr-find-opt small { font-size:11.5px; color:var(--ecv2-g500); white-space:nowrap; }
.ecpr-find-opt:hover, .ecpr-find-opt.is-active { background:var(--ecsu-accent-soft); }
.ecpr-find-opt.is-active { box-shadow:inset 3px 0 0 var(--ecsu-accent); }
.ecpr-find-none { margin:0; padding:8px 9px; font-size:12.5px; color:var(--ecv2-g600); }

/* the stand-in picture */
.ecpr-placeholder { display:flex; align-items:center; gap:12px; padding:10px; border:1px solid var(--ecv2-g200); border-radius:10px; background:#fff; }
.ecpr-placeholder.is-missing { border:1.5px dashed var(--ecv2-g300); }
.ecpr-placeholder-pic { flex:0 0 auto; width:52px; height:52px; border-radius:8px; background:var(--ecv2-g100); overflow:hidden; }
.ecpr-placeholder-pic img { width:100%; height:100%; object-fit:cover; }
.ecpr-placeholder-text { display:flex; flex-direction:column; gap:6px; font-size:12.5px; color:var(--ecv2-g700); min-width:0; }

/* prices */
.ecpr-price-demo { display:flex; flex-direction:column; gap:3px; padding:12px 14px; border:1px solid var(--ecv2-g200); border-radius:10px; background:linear-gradient(180deg, var(--ecv2-g50, #f9fafb), #fff 60%); }
.ecpr-price-demo .ecpr-pp-price { font-size:18px; }
.ecpr-price-demo .ecpr-sp-save, .ecpr-price-demo .ecpr-pp-small { font-size:12px; }

/* a sentence with fields in it */
.ecpr-sentence { flex-direction:row; flex-wrap:wrap; align-items:center; gap:8px; margin-left:46px; font-size:13px; color:var(--ecv2-g800); }
.ecpr .ecpr-num { width:84px; padding:4px 8px; min-height:34px; text-align:right; font-variant-numeric:tabular-nums; }
.ecpr-num-wrap { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--ecv2-g600); white-space:nowrap; }

/* search */
.ecpr-example { margin:0; padding:9px 12px; border-radius:8px; background:var(--ecv2-g50, #f9fafb); font-size:12.5px; line-height:1.5; color:var(--ecv2-g700); }
.ecpr-example.is-bad { background:#fef2f2; color:#991b1b; }

/* folds ( inquiry levels, Customize ) */
.ecpr-fold { display:block; }
.ecpr-fold > summary { cursor:pointer; font-size:13px; font-weight:600; color:var(--ecv2-g800); list-style-position:inside; }
.ecpr-fold > summary:focus-visible { outline:2px solid var(--ecsu-accent); outline-offset:2px; border-radius:4px; }
.ecpr-fold[open] > summary + * { margin-top:12px; }
.ecpr-fold > :not(summary) + :not(summary) { margin-top:12px; }
.ecpr-custom { margin-top:12px; padding:10px 12px; border:1px solid var(--ecv2-g200); border-radius:10px; background:var(--ecv2-g50, #f9fafb); }
.ecpr-table-wrap { overflow-x:auto; border:1px solid var(--ecv2-g200); border-radius:8px; background:#fff; }
.ecsu-wrap table.ecpr-table { width:100%; border-collapse:collapse; border:0; margin:0; font-size:12.5px; }
.ecsu-wrap table.ecpr-table th, .ecsu-wrap table.ecpr-table td { padding:7px 10px; border:0; border-top:1px solid var(--ecv2-g100); text-align:left; vertical-align:middle; font-variant-numeric:tabular-nums; background:none; }
.ecsu-wrap table.ecpr-table thead th { border-top:0; font-size:11.5px; font-weight:600; color:var(--ecv2-g600); background:var(--ecv2-g50, #f9fafb); }
.ecsu-wrap table.ecpr-table tbody th { font-weight:600; color:var(--ecv2-g800); }
.ecsu-wrap table.ecpr-table td:nth-child(2), .ecsu-wrap table.ecpr-table td:nth-child(3) { color:var(--ecv2-g600); white-space:nowrap; }

@container ecsd2 (max-width: 520px) {
	.ecpr-pp-body { grid-template-columns:minmax(0,1fr); }
	.ecpr-pp-pic img { max-height:320px; }
	.ecpr-sp:not(.is-slides) .ecpr-sp-side { display:none; }
	.ecpr-sub > .ecpr-sw, .ecpr-sub > .ecpr-note, .ecpr-sentence { margin-left:0; }
}

/* 6.0.7 ( D15 ): Page sizes and Price ranges, edited in dialogs ( their list screens' editors, settings-lists-v2.css ). */
.ecpr .ecpr-link-btn { padding:0; border:0; background:none; font-family:inherit; line-height:inherit; cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
.ecpr .ecpr-link-btn:focus-visible { outline:2px solid var(--ecsu-accent); outline-offset:2px; border-radius:3px; }
.ecpr-list-dialog.is-prices { width:min(920px, calc(100vw - 32px)); }
.ecpr-list-dialog .ecsl-wrap.is-embedded { margin:0; padding:0; max-width:none; }
.ecpr-list-dialog .ecsl-wrap.is-embedded .ecsl-panel:first-child { margin-top:0; }
.ecpr-list-dialog .ecpp-embed-foot { position:sticky; bottom:-16px; z-index:2; margin:0 -18px -16px; padding:12px 18px; background:#fff; border-top:1px solid var(--ecv2-g200); }
.ecpr-list-dialog .ecpp-unsaved { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-right:auto; font-size:13px; font-weight:600; color:#92400e; }
.ecpr-list-dialog .ecpp-unsaved[hidden] { display:none; }

/* 6.0.7 ( Matt's review of Settings › Products ) */

/* Who can shop: each choice a box ( the radio, and in Members only the roles it keeps ); a choice is confirmed in a dialog */
.ecpr-who-tiles { align-items:stretch; }
.ecpr-tile-box { position:relative; display:flex; flex-direction:column; min-width:0; border:1px solid var(--ecv2-g300); border-radius:10px; background:#fff; }
.ecpr-tile-box:hover { border-color:var(--ecv2-g500); background:var(--ecv2-g50, #f9fafb); }
.ecpr-tile-box.is-on { border-color:var(--ecsu-accent); box-shadow:0 0 0 1px var(--ecsu-accent); background:var(--ecsu-accent-soft); }
.ecpr-who-tiles .ecpr-tile, .ecpr-who-tiles .ecpr-tile.is-on, .ecpr-who-tiles .ecpr-tile:hover { flex:1 1 auto; border:0; padding:12px 13px; background:transparent; border-radius:10px; }
.ecpr-tile-roles { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 13px 12px 43px; padding-top:10px; border-top:1px solid rgba(17,24,39,.08); }
.ecpr-tile-roles-label { flex:1 1 100%; font-size:11.5px; font-weight:600; color:var(--ecv2-g600); }
.ecpr-role-chips { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:5px; flex:1 1 auto; min-width:0; }
.ecpr-role-chips li { margin:0; padding:3px 9px; border:1px solid var(--ecv2-g300); border-radius:999px; background:#fff; font-size:12.5px; font-weight:600; color:var(--ecv2-g900); overflow-wrap:anywhere; }
.ecpr-role-chips em { font-style:normal; font-weight:400; font-size:11.5px; color:var(--ecv2-g500); }
.ecpr-role-chips li.is-more { border-style:dashed; font-weight:500; color:var(--ecv2-g700); }
.ecpr-who-dialog { width:min(560px, calc(100vw - 32px)); }
.ecpr-confirm { width:min(480px, calc(100vw - 32px)); }
.ecpr-who-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.ecpr-who-list li { position:relative; margin:0; padding:8px 12px 8px 38px; border-radius:8px; background:var(--ecv2-g50, #f9fafb); font-size:13px; line-height:1.5; color:var(--ecv2-g800); }
.ecpr-who-list li::before { content:"•"; position:absolute; left:12px; top:9px; width:18px; height:18px; border-radius:50%; background:var(--ecv2-g200); color:var(--ecv2-g700); font-size:12px; font-weight:700; line-height:18px; text-align:center; }
.ecpr-who-list li.is-yes::before { content:"✓"; background:#dcfce7; color:#15803d; }
.ecpr-who-list li.is-no::before { content:"✕"; background:#fee2e2; color:#b91c1c; }
.ecpr-who-list li.is-warn::before { content:"!"; background:#fef3c7; color:#92400e; }
.ecpr-rolepick { display:flex; flex-direction:column; gap:8px; padding:12px; border:1px solid var(--ecv2-g200); border-radius:10px; background:var(--ecv2-g50, #f9fafb); }
.ecpr-rolepick .ecsd2-label { margin:0; }
.ecpr .ecpr-role-q { width:100%; min-height:38px; box-sizing:border-box; padding:6px 10px 6px 34px; background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 10px center; }
.ecpr-role-list { margin:0; padding:4px; min-inline-size:0; border:1px solid var(--ecv2-g200); border-radius:8px; background:#fff; max-height:248px; overflow:auto; display:flex; flex-direction:column; gap:2px; }
.ecpr-role-opt { display:flex; align-items:center; gap:10px; margin:0; padding:7px 9px; border-radius:7px; cursor:pointer; font-size:13px; }
.ecpr-role-opt:hover, .ecpr-role-opt:has(input:focus-visible) { background:var(--ecsu-accent-soft); }
.ecpr-role-opt input { flex:0 0 auto; margin:0; }
.ecpr-role-opt b { flex:1 1 auto; min-width:0; font-weight:600; color:var(--ecv2-g900); overflow-wrap:anywhere; }
.ecpr-role-opt small { font-size:12px; color:var(--ecv2-g500); white-space:nowrap; }
.ecpr-who-dialog .ecv2-btn-primary[disabled] { opacity:.55; cursor:not-allowed; }

/* the photo's large view */
.ecpr-pp-large { width:min(1100px, calc(100vw - 32px)); }
.ecpr-pp-large-stage { display:flex; align-items:center; justify-content:center; padding:16px; background:var(--ecv2-g50, #f9fafb); }
.ecpr-pp-large-stage img { display:block; max-width:100%; max-height:calc(100vh - 150px); width:auto; height:auto; object-fit:contain; }

/* a quantity box in the examples */
.ecpr-qty { display:inline-flex; align-items:center; border:1px solid var(--ecv2-g300); border-radius:7px; background:#fff; font-size:12.5px; color:var(--ecv2-g800); line-height:1.2; }
.ecpr-qty i { font-style:normal; padding:4px 7px; color:var(--ecv2-g500); }
.ecpr-qty b { min-width:14px; padding:4px 5px; font-weight:600; text-align:center; font-variant-numeric:tabular-nums; }

/* the store page's sidebar: a Filters button slides it in over the list */
button.ecpr-sp-filters { display:inline-flex; align-items:center; gap:5px; font:inherit; font-size:11.5px; line-height:1.4; cursor:pointer; }
button.ecpr-sp-filters:hover { border-color:var(--ecv2-g400, #9ca3af); }
button.ecpr-sp-filters:focus-visible, .ecpr-sp-x:focus-visible { outline:2px solid var(--ecsu-accent); outline-offset:2px; }
button.ecpr-sp-filters[aria-expanded="true"] { border-color:var(--ecsu-accent); background:var(--ecsu-accent-soft); }
.ecpr-sp-filters-ic { display:inline-block; width:12px; height:10px; background:linear-gradient(currentColor, currentColor) 0 0 / 12px 2px no-repeat, linear-gradient(currentColor, currentColor) 2px 4px / 8px 2px no-repeat, linear-gradient(currentColor, currentColor) 4px 8px / 4px 2px no-repeat; }
.ecpr-sp-body { position:relative; }
.ecpr-sp.is-slides .ecpr-sp-body { min-height:210px; overflow:hidden; border-radius:8px; }
.ecpr-sp.is-slides .ecpr-sp-side { position:absolute; z-index:2; top:0; bottom:0; left:0; width:min(64%, 220px); box-shadow:0 10px 28px rgba(17,24,39,.2); transform:translateX(calc(-100% - 14px)); visibility:hidden; transition:transform .3s ease, visibility 0s linear .3s; }
.ecpr-sp.is-slides.is-from-right .ecpr-sp-side { left:auto; right:0; transform:translateX(calc(100% + 14px)); }
.ecpr-sp.is-slides.is-open .ecpr-sp-side { transform:none; visibility:visible; transition:transform .3s ease; }
.ecpr-sp-scrim { position:absolute; inset:0; z-index:1; border-radius:8px; background:rgba(17,24,39,.28); opacity:0; pointer-events:none; transition:opacity .3s ease; }
.ecpr-sp.is-open .ecpr-sp-scrim { opacity:1; pointer-events:auto; }
.ecpr-sp.is-instant .ecpr-sp-side, .ecpr-sp.is-instant .ecpr-sp-scrim { transition:none; }
.ecpr-sp-side-head { display:flex; align-items:center; justify-content:space-between; gap:6px; font-size:11.5px; color:var(--ecv2-g900); }
.ecpr-sp-x { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; padding:0; border:0; border-radius:50%; background:transparent; color:var(--ecv2-g600); font-size:16px; line-height:1; cursor:pointer; }
.ecpr-sp-x:hover { background:var(--ecv2-g100); color:var(--ecv2-g900); }
.ecpr-sp-clear { font-size:10.5px; color:var(--ecv2-g600); text-decoration:underline; text-underline-offset:2px; }
@media (prefers-reduced-motion: reduce) {
	.ecpr-sp.is-slides .ecpr-sp-side, .ecpr-sp-scrim { transition:none; }
}

/* whether a switch acts on anything in this store */
.ecpr-applies { display:flex; align-items:flex-start; gap:7px; margin:-2px 0 2px 46px; font-size:12px; line-height:1.45; color:var(--ecv2-g700); }
.ecpr-applies-ic { flex:0 0 auto; width:8px; height:8px; margin-top:5px; border-radius:50%; background:#16a34a; }
.ecpr-applies.is-none { color:var(--ecv2-g600); }
.ecpr-applies.is-none .ecpr-applies-ic { background:transparent; box-shadow:inset 0 0 0 1.5px var(--ecv2-g400, #9ca3af); }

/* examples: a cart line, small store cards */
.ecpr-cart-demo { display:grid; grid-template-columns:44px minmax(0,1fr) auto; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--ecv2-g200); border-radius:10px; background:#fff; }
.ecpr-cart-pic { width:44px; height:44px; border-radius:7px; background:var(--ecv2-g100); overflow:hidden; }
.ecpr-cart-pic img { width:100%; height:100%; object-fit:cover; }
.ecpr-cart-text { display:flex; flex-direction:column; align-items:flex-start; gap:3px; min-width:0; }
.ecpr-cart-text > b { font-size:13px; color:var(--ecv2-g900); overflow-wrap:anywhere; }
.ecpr-cart-tag { display:inline-flex; align-items:center; gap:4px; padding:1px 8px 1px 6px; border-radius:999px; background:#ecfdf5; color:#15803d; font-size:11px; font-weight:600; }
.ecpr-cart-tag::before { content:""; width:10px; height:10px; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 12V3h9l11 11-9 9L2 12zm5-4a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z'/%3E%3C/svg%3E") center / contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 12V3h9l11 11-9 9L2 12zm5-4a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z'/%3E%3C/svg%3E") center / contain no-repeat; }
.ecpr-cart-none { font-size:11px; color:var(--ecv2-g500); }
.ecpr-cart-total { font-size:13px; font-weight:700; color:var(--ecv2-g900); font-variant-numeric:tabular-nums; }
.ecpr-mini-cards, .ecpr-example-row { display:flex; flex-wrap:wrap; gap:8px; }
.ecpr-mini-card { display:flex; flex-direction:column; align-items:flex-start; gap:3px; flex:1 1 150px; min-width:0; padding:10px 12px; border:1px solid var(--ecv2-g200); border-radius:10px; background:#fff; font-size:12px; color:var(--ecv2-g700); }
.ecpr-mini-card.is-wide { flex-basis:100%; }
.ecpr-mini-card > b { font-size:13px; color:var(--ecv2-g900); overflow-wrap:anywhere; }
.ecpr-mini-price { font-size:13px; font-weight:600; color:var(--ecv2-g900); font-variant-numeric:tabular-nums; }
.ecpr-mini-hidden { font-size:11.5px; font-style:italic; color:var(--ecv2-g500); }
.ecpr-mini-note { font-size:11.5px; font-weight:600; color:#b45309; }
.ecpr-mini-buy { display:flex; align-items:center; gap:6px; margin-top:4px; }
.ecpr-mini-line { display:inline-flex; align-items:center; gap:6px; margin-top:2px; font-size:12px; color:var(--ecv2-g700); }
.ecpr-mini-card .ecpr-demo-btn { margin-top:4px; }

/* reviews: one review as the store shows it, and what a signed-out shopper sees */
.ecpr-review-demo { display:flex; flex-direction:column; gap:10px; padding:12px 14px; border:1px solid var(--ecv2-g200); border-radius:10px; background:linear-gradient(180deg, var(--ecv2-g50, #f9fafb), #fff 60%); }
.ecpr-review { display:flex; flex-direction:column; gap:3px; padding-bottom:10px; border-bottom:1px solid var(--ecv2-g100); }
.ecpr-review-top { display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; }
.ecpr-stars { color:#b45309; font-size:13px; letter-spacing:1px; }
.ecpr-review-top b { font-size:13px; color:var(--ecv2-g900); overflow-wrap:anywhere; }
.ecpr-review-name { font-size:11.5px; font-weight:600; color:var(--ecv2-g700); }
.ecpr-review-text { font-size:12.5px; line-height:1.5; color:var(--ecv2-g700); }
.ecpr-review-form { display:flex; flex-direction:column; gap:6px; }
.ecpr-review-who { font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--ecv2-g600); }
.ecpr-review-signin { padding:8px 10px; border:1px dashed var(--ecv2-g300); border-radius:8px; background:#fff; font-size:12.5px; line-height:1.45; color:var(--ecv2-g700); }
.ecpr-review-fields { display:flex; flex-direction:column; align-items:flex-start; gap:5px; }
.ecpr-review-fields i { display:block; width:100%; box-sizing:border-box; padding:5px 8px; border:1px solid var(--ecv2-g200); border-radius:6px; background:#fff; font-style:normal; font-size:11.5px; color:var(--ecv2-g500); }
.ecpr-review-fields i.is-stars { width:auto; padding:0; border:0; background:none; color:#b45309; }
.ecpr-review-fields i.is-text { min-height:34px; }

@container ecsd2 (max-width: 520px) {
	.ecpr-tile-roles { margin-left:13px; }
	.ecpr-applies { margin-left:0; }
}
@media (max-width: 600px) {
	.ecpr-who-dialog, .ecpr-confirm, .ecpr-pp-large { width:100vw; }
}
/* Matt's decisions on the review: a made-up name in an example says so; no zoom on phones and tablets, as the store */
.ecpr-example-tag { display:inline-block; margin-left:4px; padding:0 6px; border-radius:999px; background:var(--ecv2-g100); color:var(--ecv2-g700); font-style:normal; font-size:10px; font-weight:700; letter-spacing:.04em; line-height:16px; text-transform:uppercase; vertical-align:1px; }
.ecpr-cart-tag .ecpr-example-tag { background:#fff; color:var(--ecv2-g700); }
.ecpr-chip-sub { font-size:11px; font-weight:400; color:var(--ecv2-g600); }
.ecpr-pp-pic.can-zoom[data-no-zoom] { cursor:default; }
.ecpr-pp-pic.can-zoom[data-no-zoom].can-open { cursor:zoom-in; }

/* 6.0.7: the example sidebar shows the store's own choices, in the store's order ( side_preview() ). */
.ecpr-sp-order, .ecpr-sp-groups { display:flex; flex-direction:column; gap:8px; min-width:0; }
.ecpr-sp-order[hidden], .ecpr-sp-groups[hidden], .ecpr-sp-group[hidden] { display:none; }
.ecpr-sp-line { display:block; font-style:normal; font-size:10px; line-height:1.35; color:var(--ecv2-g600); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ecpr-sp-line::before { content:""; display:inline-block; width:7px; height:7px; margin-right:5px; border:1px solid var(--ecv2-g300); border-radius:2px; vertical-align:-1px; }
.ecpr-sp-line.is-more, .ecpr-sp-line.is-empty { color:var(--ecv2-g500); }
.ecpr-sp-line.is-more::before, .ecpr-sp-line.is-empty::before { display:none; }
.ecpr-sp-pickup { color:var(--ecv2-g700); }