/* E-shop landing page (builds on landing.css: hero, price card, FAQ, bk-* demo shell) */

.es-shot .lp-week__bar { border-radius: 0; }

/* ---------- Live shop demo (customer side) ---------- */
.es-app .bk-app__head { align-items: center; }
.es-cartbtn { position: relative; width: 38px; height: 34px; border-radius: 10px; border: 1px solid var(--line); background: #fff; font-size: 16px !important; }
.es-cartbtn i { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--pick); color: #fff; font: 700 10.5px/18px var(--font-b); font-style: normal; }
.es-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.es-prod { padding: 8px; border-radius: 14px; border: 1px solid var(--line); background: #fff; }
.es-prod__img { display: grid; place-items: center; height: 76px; border-radius: 10px; font-size: 34px; }
.es-prod__n { margin: 8px 0 0; font-size: 12.5px; font-weight: 700; line-height: 1.3; }
.es-prod__p { margin: 2px 0 8px; font-size: 13px; color: var(--soft); }
.es-add { width: 100%; padding: 7px 0; border-radius: 9px; border: 1px solid var(--pick); background: #fff; color: var(--pick); font-size: 12px !important; font-weight: 700 !important; transition: background .2s, color .2s; }
.es-add:hover:not(:disabled) { background: var(--pick); color: #fff; }
.es-add:disabled { border-color: var(--line); color: var(--soft); cursor: not-allowed; }
.es-sticky { width: 100%; margin-top: 12px; animation: bk-pop .35s var(--ease); }
.es-lines { margin-top: 12px; display: grid; gap: 6px; }
.es-line { display: grid; grid-template-columns: 1fr auto 56px; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 10px; background: #fff; border: 1px solid var(--line); font-size: 12.5px; }
.es-line > span:last-child { text-align: right; font-weight: 700; }
.es-qty { display: inline-flex; align-items: center; gap: 6px; }
.es-qty button { width: 24px; height: 24px; border-radius: 7px; border: 1px solid var(--line); background: #FAFAF7; color: var(--ink); font-size: 14px !important; line-height: 1; }
.es-qty button:disabled { opacity: .4; cursor: not-allowed; }
.es-free { margin: 10px 0 0; padding: 8px 10px; border-radius: 10px; background: #F1FFD0; font-size: 12px; color: #3B5200; }

/* ---------- Owner side ---------- */
.es-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0; }
.es-kpis div { padding: 10px 12px; border-radius: 12px; background: #fff; border: 1px solid var(--line); }
.es-kpis small { display: block; font-size: 11px; color: var(--soft); }
.es-kpis b { font: 800 18px var(--font-h); }
.es-orders { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; }
.es-order { display: grid; grid-template-columns: 1.3fr 1fr .8fr 1fr; gap: 8px; align-items: center; padding: 9px 12px; border-top: 1px solid var(--line); font-size: 12.5px; }
.es-order:first-child { border-top: 0; }
.es-order small { display: block; color: var(--soft); font-size: 11.5px; }
.es-order__pay { color: var(--soft); }
.es-order.is-mine { background: #F7FFE6; }
.es-order.is-fresh { animation: bk-fresh 1.6s var(--ease); }
.es-st { display: inline-block; padding: 3px 8px; border-radius: 99px; font: 700 10.5px var(--font-b); font-style: normal; }
.es-st--new { background: #16181D; color: #BCFF00; }
.es-st--pack { background: #FEF3C7; color: #92400E; }
.es-st--sent { background: #DCFCE7; color: #166534; }
.es-stockmini { display: flex; flex-wrap: wrap; gap: 6px; }
.es-stockmini span { padding: 6px 10px; border-radius: 99px; background: #fff; border: 1px solid var(--line); font-size: 12.5px; }
.es-stockmini span.is-low { border-color: #FCA5A5; background: #FEF2F2; color: #B91C1C; }

/* ---------- Feature tabs ---------- */
.es-tabs { display: grid; grid-template-columns: 250px 1fr; gap: 0; border-radius: 28px; background: var(--bg-2); border: 1px solid var(--border); overflow: hidden; }
.es-tabs__list { display: flex; flex-direction: column; gap: 4px; padding: 16px; border-right: 1px solid var(--border); }
.es-tabs__list button { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: 14px; border: 1px solid transparent; background: transparent; color: var(--muted); font: 700 15px var(--font-h); text-align: left; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.es-tabs__list button .ico { width: 18px; height: 18px; flex-shrink: 0; }
.es-tabs__list button:hover { color: var(--text); background: var(--surface); }
.es-tabs__list button[aria-selected="true"] { color: var(--text); background: var(--surface-2); border-color: rgba(188, 255, 0, .35); }
.es-tabs__list button[aria-selected="true"] .ico { color: var(--lime); }
.es-tabs__list button:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.es-panel { display: grid; grid-template-columns: 1fr 1.1fr; gap: 28px; align-items: center; padding: 30px; animation: es-in .35s var(--ease); }
.es-panel[hidden] { display: none; }
@keyframes es-in { from { opacity: 0; transform: translateY(8px); } }
.es-panel__copy h3 { margin: 0 0 10px; font-size: clamp(22px, 2.4vw, 28px); letter-spacing: -.02em; }
.es-panel__copy p { margin: 0 0 18px; color: var(--muted); }
.es-tabs > *, .es-panel > * { min-width: 0; }
/* Plain ticked list here (the site's checklist cards are too heavy next to a widget) */
.es-panel__copy .checklist { margin: 0; grid-template-columns: 1fr; gap: 8px; }
.es-panel__copy .checklist li { padding: 0; background: none; border: 0; border-radius: 0; font-size: 15px; color: #D4D4D8; }
.es-panel__copy .checklist .ico { color: var(--lime); }

.es-widget { --ink: #16181D; --soft: #6B6F7A; --line: #E6E7EB; --pick: #16324A; padding: 20px; border-radius: 20px; background: #FAFAF7; color: var(--ink); font-family: var(--font-b); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8); }
.es-widget button { font: inherit; cursor: pointer; }
.es-w__title { margin: 0 0 14px; font: 700 15px var(--font-h); }
.es-w__note { margin: 12px 0 0; font-size: 12px; color: var(--soft); }
.es-field { display: grid; gap: 6px; margin-top: 12px; font-size: 12.5px; font-weight: 700; }
.es-field input { padding: 11px 12px; border-radius: 10px; border: 1px solid #CDD0D6; background: #fff; color: var(--ink); font: 500 15px var(--font-b); min-width: 0; }
.es-field input:focus { outline: 2px solid var(--pick); outline-offset: 1px; }

/* range */
.es-range { display: grid; gap: 10px; font-size: 13.5px; }
.es-range input { --p: 50%; -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 99px; background: linear-gradient(90deg, var(--pick) var(--p), #E2E4E9 var(--p)); cursor: pointer; }
.es-range input::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 3px solid var(--pick); box-shadow: 0 3px 10px rgba(0, 0, 0, .2); }
.es-range input::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 3px solid var(--pick); }

/* tiers */
.es-sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 16px 0 12px; }
.es-sum div { padding: 10px 12px; border-radius: 12px; background: #fff; border: 1px solid var(--line); }
.es-sum small { display: block; font-size: 11px; color: var(--soft); }
.es-sum b { font: 800 19px var(--font-h); }
.es-sum .es-save { background: #F1FFD0; border-color: #D9F99D; }
.es-save b { color: #3B5200; }
.es-tiers { width: 100%; border-collapse: collapse; font-size: 13px; }
.es-tiers td { padding: 7px 10px; border-top: 1px solid var(--line); }
.es-tiers td:last-child { text-align: right; font-weight: 700; }
.es-tiers tr.is-on td { background: var(--pick); color: #fff; }
.es-tiers tr.is-on td:first-child { border-radius: 8px 0 0 8px; }
.es-tiers tr.is-on td:last-child { border-radius: 0 8px 8px 0; }

/* personalisation */
.es-tee { --tee: #111114; --ink: #fff; position: relative; display: grid; place-items: center; height: 200px; border-radius: 14px; background: radial-gradient(circle at 50% 40%, #fff, #ECEDF0); }
.es-tee svg { width: 190px; height: 190px; }
.es-tee__body { fill: var(--tee); stroke: rgba(0, 0, 0, .18); stroke-width: 1.5; transition: fill .3s; }
.es-tee__text { position: absolute; top: 46%; left: 50%; transform: translateX(-50%); max-width: 92px; font: 800 13px/1.15 var(--font-h); color: var(--ink); text-align: center; overflow-wrap: anywhere; transition: color .3s; }
.es-swatches { display: flex; gap: 8px; margin-top: 12px; }
.es-swatches button { width: 30px; height: 30px; border-radius: 50%; border: 2px solid #fff; background: var(--c); box-shadow: 0 0 0 1px #CDD0D6; }
.es-swatches button[aria-checked="true"] { box-shadow: 0 0 0 2px var(--pick); }

/* payments */
.es-toggles { display: flex; flex-wrap: wrap; gap: 6px; }
.es-toggles button { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 99px; border: 1px solid var(--line); background: #fff; color: var(--ink); font-size: 13px !important; font-weight: 600 !important; }
.es-toggles i { position: relative; width: 26px; height: 15px; border-radius: 99px; background: #D4D6DC; transition: background .2s; }
.es-toggles i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; border-radius: 50%; background: #fff; transition: transform .2s; }
.es-toggles [aria-checked="true"] i { background: #22A55A; }
.es-toggles [aria-checked="true"] i::after { transform: translateX(11px); }
.es-checkout { margin-top: 14px; padding: 14px; border-radius: 14px; background: #fff; border: 1px solid var(--line); }
.es-checkout > p { margin: 0 0 8px; font-size: 11.5px; color: var(--soft); text-transform: uppercase; letter-spacing: .06em; }
.es-checkout label { display: flex; align-items: center; gap: 8px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.es-checkout label:first-of-type { border-top: 0; }
.es-checkout small { margin-left: auto; color: var(--soft); }

/* shipping */
.es-progress { margin: 16px 0 12px; }
.es-progress__bar { height: 10px; border-radius: 99px; background: #E2E4E9; overflow: hidden; }
.es-progress__bar span { display: block; height: 100%; border-radius: 99px; background: var(--pick); transition: width .25s, background .25s; }
.es-progress__bar span.is-full { background: #22A55A; }
.es-progress p { margin: 8px 0 0; font-size: 13px; }
.es-ship { list-style: none; padding: 0; margin: 0; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.es-ship li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border-top: 1px solid var(--line); font-size: 13.5px; }
.es-ship li:first-child { border-top: 0; }
.es-ship small { display: block; font-size: 11.5px; color: var(--soft); }

/* invoice + VAT */
.es-seg { display: inline-flex; padding: 4px; border-radius: 12px; background: #ECEDF0; }
.es-seg button { padding: 8px 16px; border-radius: 9px; border: 0; background: transparent; color: var(--soft); font-size: 13.5px !important; font-weight: 700 !important; }
.es-seg [aria-checked="true"] { background: #fff; color: var(--ink); box-shadow: 0 2px 6px rgba(0, 0, 0, .08); }
.es-vat { display: flex; gap: 6px; }
.es-vat input { flex: 1; }
.es-vat button { padding: 0 16px; border-radius: 10px; border: 0; background: var(--pick); color: #fff; font-weight: 700 !important; font-size: 13.5px !important; }
.es-vat__res { display: grid; gap: 2px; margin-top: 10px; font-size: 13px; }
.es-vat__res:empty { display: none; }
.es-vat__res.is-loading { color: var(--soft); }
.es-vat__res.is-ok { padding: 12px; border-radius: 12px; background: #ECFDF3; color: #14532D; animation: bk-pop .3s var(--ease); }
.es-vat__res.is-bad { padding: 12px; border-radius: 12px; background: #FEF2F2; color: #991B1B; }
.es-vat__res small { color: #3F6B52; }

/* stock */
.es-stock { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.es-stock li { display: grid; grid-template-columns: 1fr 70px 82px auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: #fff; border: 1px solid var(--line); font-size: 13px; }
.es-stock__bar { height: 6px; border-radius: 99px; background: #E2E4E9; overflow: hidden; }
.es-stock__bar i { display: block; height: 100%; background: #22A55A; transition: width .3s; }
.es-stock li.is-low .es-stock__bar i { background: #F59E0B; }
.es-stock li.is-low b { color: #B45309; }
.es-stock li.is-out { opacity: .6; }
.es-stock li.is-out b { color: #B91C1C; }
.es-stock button { padding: 6px 10px; border-radius: 8px; border: 1px solid var(--pick); background: #fff; color: var(--pick); font-size: 12px !important; font-weight: 700 !important; }
.es-stock button:disabled { border-color: var(--line); color: var(--soft); cursor: not-allowed; }
.es-alert { margin-top: 12px; padding: 12px; border-radius: 12px; background: #16181D; color: #E4E4E7; font-size: 13px; animation: bk-pop .35s var(--ease); }
.es-alert b { color: #BCFF00; }

@media (max-width: 1080px) {
	.es-tabs { grid-template-columns: 1fr; }
	.es-tabs__list { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--border); }
	.es-tabs__list button { padding: 10px 12px; font-size: 14px; }
	.es-panel { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
	.es-tabs { border-radius: 22px; }
	.es-tabs__list { padding: 10px; gap: 6px; }
	.es-tabs__list button { flex: 1 1 calc(50% - 6px); gap: 8px; font-size: 13px; padding: 10px; }
	.es-panel { padding: 18px 14px; gap: 18px; }
	.es-panel__copy .checklist { display: none; }
	.es-widget { padding: 14px; }
	.es-sum b { font-size: 16px; }
	.es-order { grid-template-columns: 1.2fr .8fr 1fr; }
	.es-order__pay { display: none; }
	.es-stock li { grid-template-columns: 1fr auto auto; }
	.es-stock__bar { display: none; }
	.es-kpis b { font-size: 15px; }
}

/* The owner panel is busier here: keep the side popup below the orders table */
[data-shop-demo] .bk-fc--3 { top: auto; bottom: 110px; }