/* The few rules Bootstrap has no class for: live-table hooks and the toast. */
tr.fresh > * { animation: fresh 1.6s ease-out; }
@keyframes fresh { from { background: #ffe9a8; color: #1c1f26; } to { background: transparent; } }
tr.stale { outline: 2px dashed #c27b00; outline-offset: -2px; }
tr.off > * { opacity: .55; }
#toast { max-width: min(70vw, 28rem); z-index: 2000; }
.table input.form-control, .table select.form-select { min-width: 5rem; }
tr.diff > * { background: var(--bs-warning-bg-subtle); }

/* Shop */
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; }
.product-grid .thumb { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; background: var(--bs-bg-subtle, #f1f3f5); }
.product-grid .thumb.none { display: grid; place-items: center; font-size: 2rem; opacity: .4; }
.shop-cols { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 1.5rem; align-items: start; }
.shop-side { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: 1.5rem; align-items: start; }
@media (max-width: 52rem) { .shop-cols, .shop-side { grid-template-columns: 1fr; } }
.qty { width: 5.5rem; }
.totals td { padding: .25rem 0; }
.totals tr.sum td { font-weight: 600; border-top: 1px solid var(--bs-border-color, #dee2e6); padding-top: .5rem; }

/* DataTables Editor form in a native <dialog> (public/assets/dte-dialog.js) */
dialog.dte-dialog { width: min(34rem, 94vw); max-height: 90vh; padding: 0; border: 1px solid rgb(0 0 0 / .2); border-radius: .75rem; overflow: auto; }
dialog.dte-dialog::backdrop { background: rgb(0 0 0 / .45); }
.dte-dialog .DTE_Header { padding: .75rem 1rem; font-weight: 600; border-bottom: 1px solid rgb(0 0 0 / .12); }
.dte-dialog .DTE_Body { padding: 1rem; }
.dte-dialog .DTE_Footer { padding: .75rem 1rem; border-top: 1px solid rgb(0 0 0 / .12); }
.dte-dialog .DTE_Form_Buttons { display: flex; justify-content: flex-end; gap: .5rem; }
.dte-dialog .DTE_Field { margin-bottom: .75rem; }
.dte-dialog .DTE_Field > label { display: block; font-size: .875rem; margin-bottom: .25rem; }
.dte-dialog .DTE_Field_Message, .dte-dialog .DTE_Field_StateError { font-size: .8125rem; color: #b42318; }

/* ---- Storefront (marketplace-style header, product cards, product page, cart) ---- */
.shopui {
  --shop-accent: #f27a1a; --shop-accent-dark: #d96208; --shop-accent-soft: #fff3e8;
  --bs-primary-base: var(--shop-accent); --bs-primary-bg: var(--shop-accent); --bs-primary-contrast: #fff;
  --bs-primary-fg: light-dark(#c2570a, #ff9a4d); --bs-primary-fg-emphasis: light-dark(#8f3f05, #ffc08f);
  --bs-primary-bg-subtle: light-dark(#fff3e8, #3a2411); --bs-primary-bg-muted: light-dark(#ffe0c4, #55341a);
  --bs-primary-border: light-dark(#ffc08f, #8f4a12);
  --bs-primary-focus-ring: color-mix(in oklch, var(--shop-accent) 55%, transparent);
  background: light-dark(#f7f7f8, #15171a);
}
.shopui .btn-solid.theme-primary:hover { --bs-btn-hover-bg: var(--shop-accent-dark); --bs-btn-hover-border-color: var(--shop-accent-dark); }

.staffbar { background: #1c1f26; color: #d7dae0; font-size: .8125rem; padding: .35rem 0; }
.staffbar a { color: #d7dae0; text-decoration: none; }
.staffbar a:hover, .staffbar a.on { color: #fff; text-decoration: underline; }

.storebar { background: var(--bs-bg-body, #fff); border-bottom: 1px solid var(--bs-border-color, #dee2e6); position: sticky; top: 0; z-index: 1020; }
.storebar-row { display: flex; align-items: center; gap: 1rem; padding-block: .75rem; }
.storebar .brand { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; text-decoration: none; color: inherit; white-space: nowrap; }
.shopui .storebar .brand { color: var(--shop-accent); }
.storebar .search { flex: 1 1 auto; display: flex; max-width: 44rem; border: 1.5px solid var(--bs-border-color, #ced4da); border-radius: .75rem; background: light-dark(#f4f5f7, #22252b); overflow: hidden; }
.storebar .search:focus-within { border-color: var(--shop-accent, var(--bs-primary-base)); background: var(--bs-bg-body, #fff); }
.storebar .search input { flex: 1; border: 0; background: transparent; padding: .6rem .9rem; outline: 0; color: inherit; min-width: 0; }
.storebar .search button { border: 0; background: transparent; padding: 0 .9rem; color: inherit; opacity: .7; }
.storebar .actions { display: flex; align-items: center; gap: .25rem; margin-left: auto; }
.storebar .act { display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .25rem .6rem; border-radius: .5rem; font-size: .75rem; text-decoration: none; color: inherit; white-space: nowrap; }
.storebar .act:hover, .storebar .act.on { color: var(--shop-accent, var(--bs-primary-base)); background: var(--shop-accent-soft, transparent); }
.cart-ico { position: relative; display: inline-flex; }
.cart-n { position: absolute; top: -.35rem; right: -.6rem; min-width: 1.1rem; height: 1.1rem; padding: 0 .25rem; border-radius: 1rem; background: var(--shop-accent, #f27a1a); color: #fff; font-size: .68rem; font-weight: 700; display: grid; place-items: center; }
.catstrip { border-top: 1px solid var(--bs-border-color, #dee2e6); }
.catstrip .container { display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: none; }
.catstrip a { padding: .6rem .9rem; font-size: .9rem; white-space: nowrap; text-decoration: none; color: inherit; border-bottom: 3px solid transparent; }
.catstrip a:hover { color: var(--shop-accent, var(--bs-primary-base)); }
.catstrip a.on { color: var(--shop-accent, var(--bs-primary-base)); border-bottom-color: var(--shop-accent, var(--bs-primary-base)); font-weight: 600; }
@media (max-width: 40rem) {
  .storebar-row { flex-wrap: wrap; }
  .storebar .search { order: 3; flex-basis: 100%; max-width: none; }
  .storebar .act > span:last-child:not(.cart-ico) { display: none; }
}

.hero { background: linear-gradient(120deg, var(--shop-accent, #f27a1a), #ff9b4a 60%, #ffb67a); color: #fff; border-radius: 1rem; padding: 2rem; margin-bottom: 1.5rem; }
.hero h1 { font-size: clamp(1.4rem, 3vw, 2.1rem); font-weight: 800; margin: 0 0 .4rem; }
.hero p { margin: 0 0 1rem; opacity: .95; max-width: 38rem; }
.hero-btn { background: #fff; color: var(--shop-accent-dark, #d96208); font-weight: 700; border: 0; }
.hero-btn:hover { background: #fff3e8; color: var(--shop-accent-dark, #d96208); }

.listbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.listbar h2 { font-size: 1.15rem; margin: 0; font-weight: 700; }
.listbar h2 small { font-weight: 400; opacity: .6; font-size: .85rem; margin-left: .4rem; }
.sortbox select { min-width: 11rem; }

.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); gap: 1rem; }
.pcard { position: relative; display: flex; flex-direction: column; background: var(--bs-bg-body, #fff); border: 1px solid var(--bs-border-color, #e5e7eb); border-radius: .85rem; overflow: hidden; transition: box-shadow .15s, transform .15s, border-color .15s; }
.pcard:hover { box-shadow: 0 .6rem 1.4rem rgb(0 0 0 / .12); transform: translateY(-2px); border-color: var(--shop-accent, #f27a1a); }
.pimg { position: relative; aspect-ratio: 1; background: light-dark(#f1f3f5, #22252b); display: grid; place-items: center; }
.pimg img { width: 100%; height: 100%; object-fit: cover; }
.pimg .none, .pdp-img .none { font-size: 2.5rem; opacity: .3; }
.pcard.out .pimg img { opacity: .45; filter: grayscale(1); }
.tag { position: absolute; left: .6rem; top: .6rem; background: var(--shop-accent, #f27a1a); color: #fff; font-size: .72rem; font-weight: 700; padding: .2rem .5rem; border-radius: .4rem; }
.tag-out { background: #6b7280; }
.pbody { display: flex; flex-direction: column; gap: .15rem; padding: .75rem .85rem .4rem; flex: 1; }
.pname { color: inherit; text-decoration: none; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
.pname::after { content: ""; position: absolute; inset: 0; }
.psku, .punit { font-size: .78rem; opacity: .65; }
.pprice { font-size: 1.2rem; font-weight: 800; color: var(--shop-accent, var(--bs-primary-base)); margin-top: .3rem; }
.pprice.big { font-size: 2rem; margin-top: 0; }
.padd { position: relative; z-index: 2; padding: 0 .85rem .85rem; }
.pager { display: flex; gap: .75rem; align-items: center; justify-content: center; margin-top: 1.5rem; }

.crumbs { font-size: .85rem; margin-bottom: 1rem; opacity: .85; display: flex; flex-wrap: wrap; gap: .4rem; }
.crumbs a { text-decoration: none; }
.pdp { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 2rem; align-items: start; }
.pdp-img { background: var(--bs-bg-body, #fff); border: 1px solid var(--bs-border-color, #e5e7eb); border-radius: 1rem; aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; }
.pdp-img img { width: 100%; height: 100%; object-fit: contain; }
.pdp-info h1 { font-size: 1.6rem; font-weight: 700; margin: 0 0 .2rem; }
.buybox { background: var(--bs-bg-body, #fff); border: 1px solid var(--bs-border-color, #e5e7eb); border-radius: 1rem; padding: 1.25rem; display: flex; flex-direction: column; gap: .75rem; margin: 1rem 0; }
.buyform { display: flex; gap: .5rem; align-items: stretch; }
.buyform .qty { width: 6rem; }
.pdesc h2 { font-size: 1.05rem; font-weight: 700; }
@media (max-width: 52rem) { .pdp { grid-template-columns: 1fr; } }

.cartgrid { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: 1.5rem; align-items: start; }
.cart-thumb { width: 3.5rem; height: 3.5rem; object-fit: cover; border-radius: .5rem; }
.summary { background: var(--bs-bg-body, #fff); border: 1px solid var(--bs-border-color, #e5e7eb); border-radius: 1rem; padding: 1.25rem; position: sticky; top: 8.5rem; }
.summary h2 { font-size: 1.1rem; font-weight: 700; margin-bottom: .75rem; }
@media (max-width: 52rem) { .cartgrid { grid-template-columns: 1fr; } .summary { position: static; } }

.pdp-img { max-height: 32rem; }
.sortbox select { border: 1px solid var(--bs-border-color, #ced4da); border-radius: .5rem; padding: .35rem .6rem; background: var(--bs-bg-body, #fff); color: inherit; }

/* ---- DataTables Editor grids of the shop administration ---- */
.pf { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 1rem; }
.pf-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: .75rem; }
.pf .DTE_Field { margin-bottom: .6rem; }
.pf-img { width: 5rem; height: 5rem; border-radius: .5rem; object-fit: cover; }
@media (max-width: 40rem) { .pf { grid-template-columns: 1fr; } }
.child-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 1.5rem; padding: .5rem .25rem 1rem; }
.child-grid h3 { font-size: 1rem; font-weight: 700; margin: 0 0 .15rem; }
.dtcv-container .pa-card { display: flex; gap: .75rem; align-items: center; }
.pa-img img { width: 4rem; height: 4rem; object-fit: cover; border-radius: .5rem; }
.pa-body { display: flex; flex-direction: column; gap: .1rem; }
.pa-price { font-weight: 700; color: var(--shop-accent, inherit); }
.grid-toast { position: fixed; right: 1rem; bottom: 1rem; z-index: 3000; box-shadow: 0 .5rem 1.2rem rgb(0 0 0 / .2); }
td.dt-control, td.select-checkbox { cursor: pointer; }
.dt-container .dt-buttons { flex-wrap: wrap; }

.pf editor-field { display: none; }
dialog.dte-dialog { width: min(46rem, 96vw); }
.pf .DTE_Field_InputControl { width: 100%; }

.settings-dl { display: grid; grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); gap: .4rem 1rem; margin-bottom: 1rem; }
.settings-dl dt { font-weight: 500; opacity: .8; }
.settings-dl dd { margin: 0; font-weight: 600; word-break: break-word; }
@media (max-width: 40rem) { .settings-dl { grid-template-columns: 1fr; } }
td.reorder .drag { cursor: grab; opacity: .55; margin-right: .35rem; }
td.select-checkbox img { margin-left: 1.9rem; }
tr.diff > * { background: var(--bs-warning-bg-subtle); }