/* WP EasyCart Admin — Settings › Checkout as a Store setup page ( 6.0.7 ): Store details' cards, Products' chips and switches and
   Accounts' previews ( setup-store-v2.css, setup-products-v2.css, setup-accounts-v2.css ), with the parts only this page has: a cart
   that follows its boxes, the policy pages as tiles, the payment step's ways to pay, order status chips and their drawer. Accent
   follows the admin colorizer through --ecsu-accent ( setup-v2.css ). */
.ecco [hidden] { display:none !important; }

/* a line that leads to another page */
.ecco-line { flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 12px; }
.ecco-sub { padding-left:14px; border-left:2px solid var(--ecv2-g100); }
.ecpr-group + .ecco-sub { padding-top:0; border-top:0; }
.ecco-short { max-width:260px; }
.ecco-inline { display:inline-flex; flex-wrap:wrap; align-items:center; gap:8px; }
.ecco-row { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; }

/* the store's own numbers under the steps */
.ecco-funnel { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; }
.ecco-funnel-tile { display:flex; flex-direction:column; gap:2px; padding:10px; border:1px solid var(--ecv2-g200); border-radius:8px; background:#fff; min-width:0; }
.ecco-funnel-tile b { font-size:18px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--ecv2-g900); }
.ecco-funnel-tile span { font-size:12px; color:var(--ecv2-g600); }

/* a cart that follows its boxes */
.ecco-cartpv { gap:8px; }
.ecco-line-item { display:grid; grid-template-columns:36px minmax(0,1fr) auto; align-items:center; gap:10px; padding-bottom:8px; border-bottom:1px solid var(--ecv2-g100); font-size:12.5px; }
.ecco-line-item b { display:block; font-weight:600; color:var(--ecv2-g900); }
.ecco-line-item i { font-style:normal; font-size:11.5px; color:var(--ecv2-g600); }
.ecco-line-item > span:last-child { font-variant-numeric:tabular-nums; }
.ecco-thumb { width:36px; height:36px; border-radius:7px; background:#eadbc8; }
.ecco-thumb.is-b { background:#dfe7ef; }
.ecco-box { display:flex; align-items:center; gap:6px; }
.ecco-box > span { flex:1 1 auto; min-height:30px; padding:6px 10px; border:1px solid var(--ecv2-g300); border-radius:6px; background:#fff; font-size:12px; color:var(--ecv2-g600); }
.ecco-box > b { padding:6px 10px; border:1px solid var(--ecv2-g300); border-radius:6px; background:#fff; font-size:12px; font-weight:600; color:var(--ecv2-g800); }
.ecco-tips { display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:12px; }
.ecco-tips > span { padding:2px 9px; border:1px solid var(--ecv2-g300); border-radius:999px; background:#fff; }
.ecco-tips > span.is-on { border:2px solid var(--ecv2-g900); padding:1px 8px; font-weight:600; }
.ecco-total { display:flex; justify-content:space-between; font-size:13px; }
.ecco-total b { font-variant-numeric:tabular-nums; }
.ecco-wide { align-self:stretch; text-align:center; padding-block:10px; }

/* the example form: a shopper's answers in the fields, a list's arrow; town, region and postcode in the country's order */
.ecco-form-head { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:2px 10px; }
.ecco-form-note { font-size:11.5px; color:var(--ecv2-g600); }
.ecac-field > span.ecco-v { display:block; height:auto; min-height:28px; box-sizing:border-box; padding:5px 8px; overflow:hidden; font-size:12px; line-height:16px; color:var(--ecv2-g800); white-space:nowrap; text-overflow:ellipsis; }
.ecac-field > span.ecco-v.is-hint { color:var(--ecv2-g500); letter-spacing:.02em; }
.ecac-field > span.ecco-v.is-tall { min-height:44px; white-space:normal; }
.ecac-field.ecco-select > .ecco-v { padding-right:24px; }
.ecac-field.ecco-select > .ecco-v::after { content:""; position:absolute; right:9px; top:50%; width:6px; height:6px; margin-top:-5px; border:solid var(--ecv2-g500); border-width:0 1.5px 1.5px 0; transform:rotate(45deg); }
.ecco-place { display:grid; gap:8px; grid-template-columns:minmax(0,1fr); }
.ecco-place.is-csz { grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,.8fr); }
.ecco-place.is-zc { grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr); }
.ecco-place.is-cz { grid-template-columns:minmax(0,1.6fr) minmax(0,.8fr); }
.ecco-place.is-cs { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.ecco-place.is-cs-nozip { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.ecco-place.is-zc > .ecco-p-region, .ecco-place.is-cz > .ecco-p-region, .ecco-place.is-cs > .ecco-p-postal { grid-column:1 / -1; }
@container ecsd2 (max-width: 520px) {
	.ecco-place.is-csz { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
	.ecco-place.is-csz > .ecco-p-city { grid-column:1 / -1; }
}

/* what checkout asks for */
.ecco-asks { flex-direction:row; flex-wrap:wrap; gap:14px 24px; }
.ecco-ask { display:flex; flex-direction:column; gap:6px; min-width:0; }

/* the policy pages */
.ecco-tiles { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:12px; }
.ecco-tile { display:flex; flex-direction:column; gap:8px; padding:14px; border:1px solid var(--ecv2-g200); border-radius:10px; background:#fff; min-width:0; }
.ecco-tile.is-bad { border-color:#fecaca; background:#fef8f8; }
.ecco-tile.is-warn { border-color:#fde68a; background:#fffcf5; }
.ecco-tile-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.ecco-tile-head b { font-size:13.5px; color:var(--ecv2-g900); }
.ecco-tile-text { font-size:12.5px; line-height:1.45; color:var(--ecv2-g600); overflow-wrap:anywhere; }
.ecco-tile .ecsu-actions { flex-wrap:wrap; }
.ecco-tile .ecsu-policy-pick { max-width:100%; min-height:32px; font-size:12.5px; }

/* the payment step: the question ( which way starts picked ) as radio tiles, then the step as shoppers see it: only the ways it
   offers, the one picked first open beneath with a Picked first chip. Each way of the preview holds a marker per value that opens it
   ( data-ecsu-when ), so it follows a new pick at once; without :has() the server's is-open class decides until the page draws again. */
.ecco-picks { grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); }
.ecco-pick.is-off .ecpr-tile-body > b { color:var(--ecv2-g600); }
.ecco-pay-warn[hidden] { display:none; }
.ecco-ways { display:flex; flex-direction:column; gap:8px; }
.ecco-way { display:flex; align-items:center; gap:10px; width:100%; min-height:46px; box-sizing:border-box; padding:0 12px; border:1px solid var(--ecv2-g300); border-radius:8px; background:#fff; color:var(--ecv2-g800); font:inherit; font-size:13px; text-align:left; cursor:default; }
.ecco-pv-open { display:none !important; }
.ecco-way-panel { display:none; }
.ecco-pv-first { display:none; flex:0 0 auto; padding:2px 8px; border-radius:999px; background:var(--ecsu-accent); color:#fff; font-size:11px; font-weight:700; line-height:16px; letter-spacing:.02em; white-space:nowrap; }
.ecco-pv-way:has(> .ecco-pv-open:not([hidden])) > .ecco-way { border:2px solid var(--ecsu-accent); border-bottom:1px solid var(--ecv2-g200); border-radius:8px 8px 0 0; padding:0 11px; background:var(--ecsu-accent-soft); font-weight:600; }
.ecco-pv-way:has(> .ecco-pv-open:not([hidden])) > .ecco-way .ecco-radio { border:5px solid var(--ecsu-accent); }
.ecco-pv-way:has(> .ecco-pv-open:not([hidden])) > .ecco-way .ecco-pv-first { display:inline-block; }
.ecco-pv-way:has(> .ecco-pv-open:not([hidden])) > .ecco-way-panel { display:flex; flex-direction:column; gap:8px; padding:12px 12px 14px; border:2px solid var(--ecsu-accent); border-top:0; border-radius:0 0 8px 8px; background:#fff; }
@supports not selector(:has(*)) {
	.ecco-pv-way.is-open > .ecco-way { border:2px solid var(--ecsu-accent); border-bottom:1px solid var(--ecv2-g200); border-radius:8px 8px 0 0; padding:0 11px; background:var(--ecsu-accent-soft); font-weight:600; }
	.ecco-pv-way.is-open > .ecco-way .ecco-radio { border:5px solid var(--ecsu-accent); }
	.ecco-pv-way.is-open > .ecco-way .ecco-pv-first { display:inline-block; }
	.ecco-pv-way.is-open > .ecco-way-panel { display:flex; flex-direction:column; gap:8px; padding:12px 12px 14px; border:2px solid var(--ecsu-accent); border-top:0; border-radius:0 0 8px 8px; background:#fff; }
}
.ecco-way-text { font-size:12.5px; line-height:1.45; color:var(--ecv2-g600); }
.ecco-radio { flex:0 0 auto; width:16px; height:16px; box-sizing:border-box; border:1.5px solid var(--ecv2-g400, #9ca3af); border-radius:50%; background:#fff; }
.ecco-way-name { flex:1 1 auto; min-width:0; }
.ecco-way-note { flex:0 1 auto; min-width:0; font-size:12px; font-weight:400; color:var(--ecv2-g600); text-align:right; }
.ecco-consent { padding:10px 12px; border:1px solid var(--ecv2-g200); border-radius:8px; background:var(--ecv2-g50, #f9fafb); align-items:flex-start; }

/* order statuses */
.ecco-statuses > li { gap:6px; }
.ecco-dot { width:8px; height:8px; border-radius:50%; flex:0 0 auto; }
.ecco-drawer { width:min(720px, calc(100vw - 32px)); max-width:none; height:100vh; max-height:100vh; margin:0 0 0 auto; border-radius:0; }
.ecco-drawer .ecsu-dialog-body { overflow:auto; max-height:calc(100vh - 70px); }

/* Checkout protection, one line */
.ecco-protect { flex-direction:row; flex-wrap:wrap; align-items:center; gap:10px 14px; padding-block:14px; }
.ecco-protect .ecac-list-text { flex:1 1 320px; }

/* 6.0.7: a terms or privacy address that is no page of this site. */
.ecco-url { display:flex; gap:6px; flex:1 1 100%; min-width:0; }
.ecco-url[hidden] { display:none; }
.ecco-url .ecsu-in { flex:1 1 auto; min-width:0; }