/* ===== DentX supplies store — buyer front (owner 2026-11-02 «المتجر زي أمازون»), loaded by views/layouts/front.ejs for body.fx-store.
   Views: views/store/* (home, index, product, cart, checkout, checkout_done, compare, wishlist, orders, order, suppliers).
   Logical properties only (EN LTR / AR RTL). No transparency tricks needed for print — print hides the chrome. ===== */
.fx-store {
  --sx-ink: #0f1728; --sx-ink-2: #3b475c; --sx-mute: #667389; --sx-line: #e3e8f0; --sx-soft: #f6f8fb;
  --sx-dept: #0d2147; --sx-dept-2: #163266; --sx-link: #0b63d6; --sx-deal: #cc0c39; --sx-ok: #067d62; --sx-warn: #c45500;
  --sx-cart: #ffd814; --sx-cart-h: #f7ca00; --sx-buy: #ffa41c; --sx-buy-h: #fa8900;
}
body.fx-store { background: #eef1f6; }
.fx-store .fx-left, .fx-store .fx-strip { display: none !important; }
.fx-store .fx-shell { grid-template-columns: minmax(0, 1fr) !important; max-width: 1480px; padding-top: 0; }
.fx-store .fx-main { max-width: none; }
.fx-store a { color: inherit; }
.fx-store .sx-link, .fx-store a.sx-link { color: var(--sx-link); }
.fx-store .sx-link:hover { color: #c45500; text-decoration: underline; }

/* ---------- top bar search on store pages + suggestions ---------- */
.sx-topsearch input { background: #fff; border-color: #c9d3e1; }
.sx-sugg { position: absolute; inset-inline: 0; top: calc(100% + 4px); z-index: 1060; background: #fff; border: 1px solid var(--sx-line); border-radius: 12px; box-shadow: 0 .75rem 1.75rem rgba(15,23,40,.16); overflow: hidden; }
.sx-sugg a { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .55rem .9rem; color: var(--sx-ink); font-size: .92rem; }
.sx-sugg a:hover, .sx-sugg a.is-on { background: var(--sx-soft); }
.sx-sugg a i { color: var(--sx-mute); }
.sx-sugg .sx-sugg-p { color: var(--sx-ok); font-weight: 700; font-size: .82rem; white-space: nowrap; }
.sx-sugg .sx-sugg-h { padding: .45rem .9rem .2rem; font-size: .72rem; font-weight: 800; color: var(--sx-mute); text-transform: uppercase; letter-spacing: .03em; }
html[lang=ar] .sx-sugg .sx-sugg-h { text-transform: none; letter-spacing: 0; }
@media (max-width: 767.98px) {
  .fx-store .fx-top-in { flex-wrap: wrap; height: auto; padding-block: .5rem; row-gap: .45rem; }
  .fx-store .fx-top-in .fx-icons { margin-inline-start: auto; }
  .fx-store .sx-topsearch { order: 3; flex: 1 1 100%; max-width: none; }
}

/* ---------- department bar ---------- */
.sx-dept { background: linear-gradient(180deg, var(--sx-dept-2), var(--sx-dept)); color: #fff; border-radius: 0 0 14px 14px; display: flex; align-items: center; gap: .25rem; padding: .3rem .5rem; margin-bottom: 1rem; position: relative; z-index: 5; }
@media (min-width: 992px) { .sx-dept { position: sticky; top: calc(62px + var(--dx-sat, env(safe-area-inset-top, 0px))); z-index: 1010; } }
.sx-dept-all { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .4rem; border: 0; background: transparent; color: #fff; font-weight: 800; padding: .45rem .7rem; border-radius: 9px; font-size: .9rem; }
.sx-dept-all:hover, .sx-dept-all:focus-visible { background: rgba(255,255,255,.12); }
.sx-dept-scroll { flex: 1 1 auto; display: flex; gap: .15rem; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.sx-dept-scroll::-webkit-scrollbar { display: none; }
.sx-dept a.sx-dept-i { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .4rem; color: #e6edf8; padding: .45rem .65rem; border-radius: 9px; font-weight: 650; font-size: .88rem; white-space: nowrap; }
.sx-dept a.sx-dept-i:hover { background: rgba(255,255,255,.12); color: #fff; }
.sx-dept a.sx-dept-i.is-on { background: #fff; color: var(--sx-dept); }
.sx-dept a.sx-dept-i i { opacity: .85; }
.sx-dept a.sx-dept-i.is-deal { color: #ffd2dc; }
.sx-dept-end { flex: 0 0 auto; display: flex; gap: .15rem; border-inline-start: 1px solid rgba(255,255,255,.18); padding-inline-start: .3rem; }
@media (max-width: 991.98px) { .sx-dept { border-radius: 12px; margin-top: .6rem; } .sx-dept-end { display: none; } }
.sx-all .offcanvas-body { padding: 0; }
.sx-all-h { font-weight: 800; font-size: .95rem; padding: .9rem 1.1rem .4rem; color: var(--sx-ink); border-top: 1px solid var(--sx-line); }
.sx-all-h:first-child { border-top: 0; }
.sx-all a, .sx-all summary { display: flex; align-items: center; gap: .6rem; padding: .55rem 1.1rem; color: var(--sx-ink-2); font-weight: 600; cursor: pointer; }
.sx-all a:hover, .sx-all summary:hover { background: var(--sx-soft); color: var(--sx-ink); }
.sx-all summary { list-style: none; justify-content: space-between; }
.sx-all summary::-webkit-details-marker { display: none; }
.sx-all details[open] > summary .bi-chevron-down { transform: rotate(180deg); }
.sx-all details a { padding-inline-start: 2.6rem; font-weight: 500; font-size: .9rem; }
.sx-all .offcanvas-header { background: var(--sx-dept); color: #fff; }
.sx-all .offcanvas-header .btn-close { filter: invert(1) grayscale(1) brightness(2); }

/* ---------- blocks ---------- */
.sx-box { background: #fff; border: 1px solid var(--sx-line); border-radius: 16px; padding: 1rem 1.1rem; margin-bottom: 1rem; }
.sx-h { display: flex; align-items: baseline; gap: .75rem; margin-bottom: .75rem; flex-wrap: wrap; }
.sx-h h2, .sx-h .sx-h-t { font-size: 1.2rem; font-weight: 800; color: var(--sx-ink); margin: 0; }
.sx-h .sx-h-d { color: var(--sx-mute); font-size: .86rem; }
.sx-h .sx-h-all { margin-inline-start: auto; font-weight: 700; font-size: .88rem; color: var(--sx-link); white-space: nowrap; }
.sx-h .sx-h-all:hover { color: var(--sx-warn); }
.sx-crumbs { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; font-size: .84rem; color: var(--sx-mute); margin: 0 0 .7rem; }
.sx-crumbs a { color: var(--sx-link); }
.sx-crumbs a:hover { text-decoration: underline; }
.sx-crumbs i { font-size: .7rem; }

/* ---------- home hero (deals) ---------- */
.sx-hero { border-radius: 18px; padding: 1.3rem 1.4rem; margin-bottom: 1rem; color: #fff; position: relative; overflow: hidden;
  background: radial-gradient(120% 140% at 100% 0%, rgba(25,195,255,.45) 0%, transparent 55%), linear-gradient(135deg, #071430 0%, #0d2147 50%, #0b4fb3 100%); }
.sx-hero-t { color: #fff; font-size: 1.55rem; font-weight: 800; line-height: 1.25; margin: 0; }
.sx-hero p { color: #d4e2f6; margin: .35rem 0 .9rem; max-width: 40rem; }
.sx-hero-stats { display: flex; flex-wrap: wrap; gap: .5rem; }
.sx-hero-stats span { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: .3rem .8rem; font-size: .84rem; font-weight: 700; }
.sx-hero .btn { font-weight: 800; border-radius: 999px; }
.sx-hero .btn-light { color: #0f1728; }

/* category tiles */
.sx-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem; }
.sx-tile { display: flex; flex-direction: column; border: 1px solid var(--sx-line); border-radius: 14px; overflow: hidden; background: #fff; transition: box-shadow .15s, transform .15s; }
@media (hover: hover) { .sx-tile:hover { box-shadow: 0 .5rem 1.25rem rgba(15,23,40,.1); transform: translateY(-2px); } }   /* hover-only: a touch tap is never spent on a hover state */
.sx-tile-img { aspect-ratio: 4 / 3; background: linear-gradient(135deg, #f2f6fc, #e6eef9); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.sx-tile-img img { width: 100%; height: 100%; object-fit: contain; padding: .6rem; position: relative; }
.sx-tile-img > i { font-size: 2.4rem; color: #0b63d6; }
.sx-tile-img .sx-tile-ic { position: absolute; inset-block-end: .45rem; inset-inline-start: .45rem; width: 30px; height: 30px; border-radius: 9px; background: #fff; color: #0b63d6; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(15,23,40,.12); z-index: 1; }
.sx-tile-b { padding: .55rem .7rem .65rem; }
.sx-tile-b b { display: block; color: var(--sx-ink); font-size: .9rem; line-height: 1.3; }
.sx-tile-b small { color: var(--sx-mute); }
@media (max-width: 575.98px) { .sx-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; } .sx-tile-b { padding: .4rem .5rem .5rem; } .sx-tile-b b { font-size: .8rem; } .sx-tile-b small { display: none; } }

/* horizontal rails (carousels): scroll-snap + arrows on desktop, swipe on phones */
.sx-rail { position: relative; }
.sx-track { display: grid; grid-auto-flow: column; grid-auto-columns: 200px; gap: .75rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding: 2px 2px 6px; overscroll-behavior-x: contain; }
.sx-track::-webkit-scrollbar { display: none; }
.sx-track > * { scroll-snap-align: start; }
.sx-arrow { position: absolute; top: 38%; transform: translateY(-50%); z-index: 3; width: 42px; height: 64px; border: 1px solid var(--sx-line); background: rgba(255,255,255,.96); border-radius: 10px; box-shadow: 0 .25rem .9rem rgba(15,23,40,.15); color: var(--sx-ink); display: none; align-items: center; justify-content: center; font-size: 1.2rem; }
.sx-arrow:hover { background: #fff; color: var(--sx-link); }
.sx-arrow.is-prev { inset-inline-start: -8px; } .sx-arrow.is-next { inset-inline-end: -8px; }
.sx-arrow[disabled] { opacity: 0; pointer-events: none; }
@media (hover: hover) and (min-width: 768px) { .sx-rail.has-more .sx-arrow { display: inline-flex; } }
@media (max-width: 575.98px) { .sx-track { grid-auto-columns: 158px; gap: .55rem; } }

/* brand + supplier chips */
.sx-brands { display: flex; gap: .55rem; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.sx-brands::-webkit-scrollbar { display: none; }
.sx-brand-c { flex: 0 0 auto; min-width: 128px; border: 1px solid var(--sx-line); border-radius: 12px; padding: .7rem .9rem; background: linear-gradient(180deg, #fff, #f7f9fc); text-align: center; }
.sx-brand-c b { display: block; color: var(--sx-ink); font-size: .95rem; letter-spacing: .01em; }
.sx-brand-c small { color: var(--sx-mute); }
.sx-brand-c:hover { border-color: #9fb6d8; }
.sx-sup-c { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .3rem; border: 1px solid var(--sx-line); border-radius: 14px; padding: .9rem .6rem; background: #fff; height: 100%; }
.sx-sup-c:hover { border-color: #9fb6d8; box-shadow: 0 .35rem 1rem rgba(15,23,40,.08); }
.sx-sup-c .avatar-circle { width: 56px; height: 56px; font-size: 1.35rem; }
.sx-sup-c b { color: var(--sx-ink); font-size: .9rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sx-sup-c small { color: var(--sx-mute); font-size: .76rem; }

/* ---------- product card ---------- */
.sx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)); gap: .8rem; }
.sx-card { position: relative; display: flex; flex-direction: column; border: 1px solid var(--sx-line); border-radius: 14px; background: #fff; overflow: hidden; transition: box-shadow .15s; min-width: 0; }
.sx-card:hover { box-shadow: 0 .5rem 1.4rem rgba(15,23,40,.1); }
.sx-card .sx-img { display: block; aspect-ratio: 1 / 1; background: var(--sx-soft); position: relative; }
.sx-card .sx-img img { width: 100%; height: 100%; object-fit: contain; padding: .6rem; position: relative; background: var(--sx-soft); }
.sx-card .sx-img .ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 2.6rem; color: #b7c3d4; }
.sx-off { position: absolute; inset-block-start: .55rem; inset-inline-start: .55rem; background: var(--sx-deal); color: #fff; font-weight: 800; font-size: .76rem; border-radius: 6px; padding: .18rem .45rem; z-index: 1; }
.sx-wish { position: absolute; inset-block-start: .45rem; inset-inline-end: .45rem; z-index: 2; margin: 0; }
.sx-wish button, .sx-wish a { width: 36px; height: 36px; border-radius: 50%; padding: 0; border: 1px solid var(--sx-line); background: #fff; color: var(--sx-mute); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(15,23,40,.08); }
.sx-wish button.is-on { color: var(--sx-deal); }
.sx-card .sx-b { padding: .65rem .8rem .8rem; display: flex; flex-direction: column; gap: .22rem; flex: 1; min-width: 0; }
.sx-brand { font-size: .74rem; color: var(--sx-mute); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
html[lang=ar] .sx-brand { letter-spacing: 0; }
.sx-t { font-weight: 600; color: var(--sx-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; line-height: 1.3; font-size: .93rem; overflow-wrap: anywhere; }
a.sx-t:hover { color: var(--sx-warn); }
.sx-amt { display: inline-flex; align-items: baseline; gap: .25rem; color: var(--sx-ink); font-weight: 800; line-height: 1.1; }
.sx-amt .sx-n { font-size: 1.3rem; }
.sx-amt .sx-n sup { font-size: .62em; top: -.45em; font-weight: 700; }
.sx-amt .sx-cur { font-size: .74rem; font-weight: 700; color: var(--sx-ink-2); }
.sx-amt.is-lg .sx-n { font-size: 1.85rem; }
.sx-amt.is-sm .sx-n { font-size: 1rem; }
.sx-from { font-size: .74rem; color: var(--sx-mute); font-weight: 600; }
.sx-was { text-decoration: line-through; color: var(--sx-mute); font-size: .8rem; font-weight: 500; }
.sx-per { font-size: .74rem; color: var(--sx-mute); }
.sx-stock { font-size: .8rem; font-weight: 700; }
.sx-stock.is-ok { color: var(--sx-ok); } .sx-stock.is-low { color: var(--sx-warn); } .sx-stock.is-out { color: var(--sx-deal); }
.sx-ship { font-size: .78rem; color: var(--sx-ink-2); }
.sx-ship.is-no { color: var(--sx-mute); }
.sx-ship i { color: var(--sx-ok); } .sx-ship.is-no i { color: var(--sx-mute); }
.sx-seller { font-size: .76rem; color: var(--sx-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx-seller a:hover { color: var(--sx-link); }
.sx-stars { color: #f3a712; font-size: .8rem; letter-spacing: -.02em; }
.sx-rc { font-size: .78rem; color: var(--sx-link); }
.sx-card .sx-foot { margin-top: auto; padding-top: .35rem; display: flex; gap: .35rem; align-items: center; flex-wrap: wrap; }
.sx-card .sx-foot form { display: flex; gap: .35rem; flex: 1 1 auto; min-width: 0; margin: 0; }
.sx-cmp { font-size: .76rem; color: var(--sx-mute); display: inline-flex; align-items: center; gap: .25rem; cursor: pointer; margin: 0; }
.sx-cmp .form-check-input { margin: 0; }
.sx-badge-min { font-size: .7rem; color: var(--sx-ink-2); background: var(--sx-soft); border: 1px solid var(--sx-line); border-radius: 6px; padding: .05rem .35rem; }

/* buttons (Amazon-like) */
.btn.sx-btn-cart { background: var(--sx-cart); border: 1px solid #fcd200; color: #0f1111; font-weight: 700; border-radius: 999px; }
.btn.sx-btn-cart:hover, .btn.sx-btn-cart:focus { background: var(--sx-cart-h); border-color: #f2c200; color: #0f1111; }
.btn.sx-btn-buy { background: var(--sx-buy); border: 1px solid #ff8f00; color: #0f1111; font-weight: 700; border-radius: 999px; }
.btn.sx-btn-buy:hover, .btn.sx-btn-buy:focus { background: var(--sx-buy-h); color: #0f1111; }
.btn.sx-btn-soft { background: #fff; border: 1px solid #c9d3e1; color: var(--sx-ink); border-radius: 999px; font-weight: 600; }
.btn.sx-btn-soft:hover { background: var(--sx-soft); }

/* qty stepper */
.sx-step { display: inline-flex; align-items: stretch; border: 1px solid #c9d3e1; border-radius: 999px; overflow: hidden; background: #fff; flex: 0 0 auto; height: 32px; }
.sx-step button { border: 0; background: var(--sx-soft); width: 30px; color: var(--sx-ink); font-size: 1rem; line-height: 1; padding: 0; }
.sx-step button:hover { background: #e6ebf3; }
.sx-step input { width: 40px; border: 0; text-align: center; font-weight: 700; font-size: .9rem; padding: 0; background: #fff; color: var(--sx-ink); -moz-appearance: textfield; }
.sx-step input:focus { outline: none; }
.sx-step.is-lg { height: 40px; } .sx-step.is-lg button { width: 38px; } .sx-step.is-lg input { width: 54px; font-size: 1rem; }

/* list view */
.sx-list { grid-template-columns: 1fr; }
.sx-list .sx-card { flex-direction: row; }
.sx-list .sx-card .sx-img { width: 190px; flex: 0 0 190px; aspect-ratio: auto; min-height: 170px; }
.sx-list .sx-card .sx-t { -webkit-line-clamp: 2; min-height: 0; font-size: 1.02rem; }
@media (max-width: 575.98px) {
  .sx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .sx-card .sx-b { padding: .5rem .55rem .65rem; }
  .sx-amt .sx-n { font-size: 1.12rem; }
  .sx-list .sx-card .sx-img { width: 118px; flex-basis: 118px; min-height: 130px; }
  .sx-card .sx-foot .sx-step { display: none; }
  .sx-cmp span { display: none; }
}

/* ---------- results page ---------- */
.sx-res { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
@media (min-width: 992px) { .sx-res { grid-template-columns: 260px minmax(0, 1fr); } }
.sx-filters { background: #fff; border: 1px solid var(--sx-line); border-radius: 16px; padding: .4rem .9rem .9rem; position: sticky; top: calc(62px + 58px + var(--dx-sat, env(safe-area-inset-top, 0px))); max-height: calc(100vh - 140px); overflow-y: auto; scrollbar-width: thin; }
.sx-toolbar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; background: #fff; border: 1px solid var(--sx-line); border-radius: 14px; padding: .55rem .75rem; margin-bottom: .75rem; }
.sx-toolbar .sx-count { flex: 1 1 auto; color: var(--sx-ink-2); font-size: .9rem; min-width: 0; }
.sx-toolbar .sx-count b { color: var(--sx-ink); }
.sx-toolbar .form-select { border-radius: 10px; }
.sx-views { display: inline-flex; border: 1px solid #c9d3e1; border-radius: 10px; overflow: hidden; }
.sx-views a { padding: .3rem .6rem; color: var(--sx-ink-2); }
.sx-views a.is-on { background: var(--sx-dept); color: #fff; }
.sx-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .75rem; }
.sx-chips a { font-size: .8rem; background: #fff; border: 1px solid #c9d3e1; border-radius: 999px; padding: .2rem .65rem; color: var(--sx-ink-2); }
.sx-chips a:hover { border-color: var(--sx-deal); color: var(--sx-deal); }
.sx-chips a.is-clear { border: 0; background: none; color: var(--sx-link); }
.sx-facets .sx-fh { font-weight: 800; font-size: .88rem; margin-block: .95rem .35rem; display: flex; justify-content: space-between; color: var(--sx-ink); }
.sx-facets .sx-fh a { color: var(--sx-link); }
.sx-facets .sx-fl { list-style: none; padding: 0; margin: 0; max-height: 270px; overflow: auto; scrollbar-width: thin; }
.sx-facets .sx-fl li a { display: flex; justify-content: space-between; gap: .5rem; padding: .22rem .4rem; border-radius: 8px; color: var(--sx-ink-2); font-size: .88rem; }
.sx-facets .sx-fl li a:hover { background: var(--sx-soft); color: var(--sx-ink); }
.sx-facets .sx-fl li a.on { background: #e8f1ff; color: var(--sx-ink); font-weight: 700; }
.sx-facets .sx-fl li a .n { color: var(--sx-mute); font-size: .76rem; }
.sx-facets .sx-fl li a.zero { opacity: .45; }
.sx-facets .sx-sub { padding-inline-start: .9rem; }
.sx-facets .sx-fl .text-warning { color: #f3a712 !important; }
.sx-sheet.offcanvas-bottom { height: 86vh; border-radius: 18px 18px 0 0; }
.sx-sheet .offcanvas-header { border-bottom: 1px solid var(--sx-line); }
.sx-sheet .sx-grab { position: absolute; top: 6px; inset-inline: 0; margin: 0 auto; width: 44px; height: 5px; border-radius: 3px; background: #cdd5e1; }
.sx-sheet .offcanvas-body { padding-bottom: calc(var(--dx-sab, env(safe-area-inset-bottom, 0px)) + 1rem); }
.sx-fbtn { border-radius: 10px; font-weight: 700; }

/* storefront header */
.sx-sf { background: #fff; border: 1px solid var(--sx-line); border-radius: 18px; overflow: hidden; margin-bottom: 1rem; }
.sx-sf-cover { height: 110px; background: radial-gradient(90% 160% at 100% 0%, rgba(25,195,255,.5), transparent 60%), linear-gradient(120deg, #071430, #0d2147 55%, #0b8a6a 130%); }
.sx-sf-row { display: flex; flex-wrap: wrap; gap: .9rem; align-items: flex-end; padding: 0 1.1rem 1rem; margin-top: -42px; }
.sx-sf-row .avatar-circle { width: 92px; height: 92px; font-size: 2.1rem; border: 4px solid #fff; box-shadow: 0 .25rem .9rem rgba(15,23,40,.18); flex: 0 0 auto; background: #fff; }
.sx-sf-nm { font-size: 1.35rem; font-weight: 800; color: var(--sx-ink); margin: 0; line-height: 1.25; overflow-wrap: anywhere; }
.sx-sf-meta { display: flex; flex-wrap: wrap; gap: .3rem .9rem; font-size: .85rem; color: var(--sx-ink-2); margin-top: .2rem; }
.sx-sf-btns { margin-inline-start: auto; display: flex; flex-wrap: wrap; gap: .4rem; }
.sx-sf-btns .btn { border-radius: 999px; font-weight: 700; }
.sx-sf-bio { padding: 0 1.1rem 1rem; color: var(--sx-ink-2); font-size: .9rem; margin: 0; }
.sx-sf-cats { display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; padding: 0 1.1rem 1rem; }
.sx-sf-cats::-webkit-scrollbar { display: none; }
.sx-sf-cats a { flex: 0 0 auto; border: 1px solid #c9d3e1; border-radius: 999px; padding: .25rem .75rem; font-size: .84rem; font-weight: 600; color: var(--sx-ink-2); white-space: nowrap; }
.sx-sf-cats a.is-on { background: var(--sx-dept); border-color: var(--sx-dept); color: #fff; }
@media (max-width: 575.98px) { .sx-sf-btns { width: 100%; } .sx-sf-btns .btn { flex: 1 1 auto; } .sx-sf-cover { height: 84px; } .sx-sf-row .avatar-circle { width: 76px; height: 76px; } }

/* ---------- product page ---------- */
.sx-pp { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin-bottom: 1rem; }
@media (min-width: 992px) { .sx-pp { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } .sx-pp .sx-bb { grid-column: 2; } }
@media (min-width: 1200px) { .sx-pp { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) 320px; } .sx-pp .sx-bb { grid-column: auto; } .sx-pp .sx-gal { grid-row: span 2; } }
.sx-pp > div { min-width: 0; }
.sx-gal { display: flex; gap: .6rem; align-items: flex-start; position: relative; }
@media (min-width: 992px) { .sx-gal { position: sticky; top: calc(62px + 62px + var(--dx-sat, env(safe-area-inset-top, 0px))); } }
.sx-thumbs { display: flex; flex-direction: column; gap: .45rem; flex: 0 0 62px; max-height: 520px; overflow-y: auto; scrollbar-width: none; }
.sx-thumbs button { width: 62px; height: 62px; padding: 3px; border: 2px solid var(--sx-line); border-radius: 10px; background: #fff; }
.sx-thumbs button.is-on { border-color: #e77600; box-shadow: 0 0 0 2px rgba(231,118,0,.18); }
.sx-thumbs img { width: 100%; height: 100%; object-fit: contain; }
.sx-stage { flex: 1 1 auto; min-width: 0; position: relative; background: #fff; border: 1px solid var(--sx-line); border-radius: 16px; overflow: hidden; }
.sx-slides { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; aspect-ratio: 1 / 1; }
.sx-slides::-webkit-scrollbar { display: none; }
.sx-slide { flex: 0 0 100%; scroll-snap-align: center; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; }
.sx-slide img { max-width: 100%; max-height: 100%; object-fit: contain; padding: 1rem; transition: transform .08s ease-out; }
@media (hover: hover) and (min-width: 992px) { .sx-slide.is-zoom { cursor: zoom-in; } .sx-slide.is-zoom:hover img { transform: scale(2.1); } }
.sx-noimg { aspect-ratio: 1 / 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #b7c3d4; }
.sx-noimg i { font-size: 4rem; }
.sx-dots { position: absolute; inset-inline: 0; bottom: .55rem; display: flex; justify-content: center; gap: .35rem; }
.sx-dots span { width: 7px; height: 7px; border-radius: 50%; background: #c7d0dd; }
.sx-dots span.is-on { background: var(--sx-dept); width: 18px; border-radius: 4px; }
.sx-zoomhint { position: absolute; inset-block-end: .55rem; inset-inline-end: .7rem; font-size: .74rem; color: var(--sx-mute); background: rgba(255,255,255,.9); border-radius: 999px; padding: .1rem .55rem; }
@media (max-width: 991.98px) { .sx-thumbs { display: none; } .sx-zoomhint { display: none; } }
@media (min-width: 992px) { .sx-dots { display: none; } }
.sx-info h1 { font-size: 1.45rem; font-weight: 700; color: var(--sx-ink); line-height: 1.3; margin: .1rem 0 .35rem; overflow-wrap: anywhere; }
.sx-info .sx-brandlink { font-size: .88rem; color: var(--sx-link); font-weight: 600; }
.sx-info hr { margin: .75rem 0; border-color: var(--sx-line); opacity: 1; }
.sx-pricebox { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; }
.sx-pricebox .sx-off-l { color: var(--sx-deal); font-size: 1.5rem; font-weight: 300; }
.sx-deal-tag { display: inline-block; background: var(--sx-deal); color: #fff; font-weight: 800; font-size: .78rem; border-radius: 6px; padding: .15rem .5rem; margin-bottom: .35rem; }
.sx-opt-h { font-size: .88rem; color: var(--sx-ink-2); margin: .8rem 0 .35rem; }
.sx-opt-h b { color: var(--sx-ink); }
.sx-chipset { display: flex; flex-wrap: wrap; gap: .4rem; }
.sx-chipset label { border: 1px solid #c9d3e1; border-radius: 10px; padding: .4rem .75rem; background: #fff; cursor: pointer; font-size: .88rem; font-weight: 600; color: var(--sx-ink); display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.25; min-width: 70px; }
.sx-chipset label small { font-weight: 500; color: var(--sx-mute); font-size: .74rem; }
.sx-chipset input:checked + label { border-color: #e77600; box-shadow: 0 0 0 2px rgba(231,118,0,.25); background: #fffaf2; }
.sx-chipset input:disabled + label { opacity: .45; text-decoration: line-through; cursor: not-allowed; }
.sx-chipset input:focus-visible + label { outline: 2px solid var(--sx-link); outline-offset: 2px; }
.sx-about { padding-inline-start: 1.1rem; margin: 0; color: var(--sx-ink-2); font-size: .92rem; }
.sx-about li { margin-bottom: .2rem; }
.sx-bb { background: #fff; border: 1px solid var(--sx-line); border-radius: 16px; padding: 1rem 1.05rem; align-self: start; }
@media (min-width: 1200px) { .sx-bb { position: sticky; top: calc(62px + 62px + var(--dx-sat, env(safe-area-inset-top, 0px))); } }
.sx-bb .sx-bb-row { font-size: .87rem; color: var(--sx-ink-2); margin-top: .55rem; }
.sx-bb .sx-bb-row b { color: var(--sx-ink); }
.sx-bb .sx-total { font-size: .9rem; color: var(--sx-ink-2); }
.sx-bb .sx-total b { font-size: 1.05rem; color: var(--sx-ink); }
.sx-bb .btn { width: 100%; padding-block: .55rem; }
.sx-bb .sx-mini { display: grid; grid-template-columns: auto 1fr; gap: .15rem .7rem; font-size: .8rem; color: var(--sx-mute); margin-top: .7rem; }
.sx-bb .sx-mini dd { margin: 0; color: var(--sx-ink-2); overflow-wrap: anywhere; }
.sx-bb-acts { display: flex; flex-wrap: wrap; gap: .4rem .9rem; justify-content: center; margin-top: .7rem; font-size: .85rem; }
.sx-bb-acts button, .sx-bb-acts label { background: none; border: 0; padding: 0; color: var(--sx-link); font-weight: 600; display: inline-flex; align-items: center; gap: .3rem; cursor: pointer; }
.sx-bb-acts button.is-on { color: var(--sx-deal); }
.sx-sellercard { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; border-top: 1px solid var(--sx-line); margin-top: .9rem; padding-top: .9rem; }
.sx-sellercard .avatar-circle { width: 48px; height: 48px; font-size: 1.2rem; flex: 0 0 48px; }
.sx-sellercard b { color: var(--sx-ink); }
.sx-sellercard > .min-w-0 { flex: 1 1 150px; }
.sx-follow { border-radius: 999px; font-weight: 700; font-size: .8rem; padding: .2rem .7rem; }
.sx-follow.is-on { background: var(--sx-dept); color: #fff; border-color: var(--sx-dept); }
.sx-sec { background: #fff; border: 1px solid var(--sx-line); border-radius: 16px; padding: 1rem 1.15rem; margin-bottom: 1rem; scroll-margin-top: 140px; }
.sx-sec > h2 { font-size: 1.15rem; font-weight: 800; color: var(--sx-ink); margin: 0 0 .75rem; }
.sx-specs { width: 100%; border-collapse: collapse; font-size: .9rem; }
.sx-specs th, .sx-specs td { padding: .5rem .75rem; border-bottom: 1px solid var(--sx-line); vertical-align: top; overflow-wrap: anywhere; }
.sx-specs th { width: 36%; background: var(--sx-soft); font-weight: 700; color: var(--sx-ink); }
.sx-rev { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.2rem; }
@media (min-width: 768px) { .sx-rev { grid-template-columns: 260px minmax(0, 1fr); } }
.sx-rev-big { font-size: 1.1rem; font-weight: 700; color: var(--sx-ink); }
.sx-bars a, .sx-bars div.sx-bar-r { display: grid; grid-template-columns: 52px 1fr 40px; align-items: center; gap: .5rem; font-size: .84rem; color: var(--sx-link); margin-bottom: .4rem; }
.sx-bar { height: 18px; border-radius: 4px; background: #f0f2f2; border: 1px solid #d5d9d9; overflow: hidden; }
.sx-bar i { display: block; height: 100%; background: #f3a712; }
.sx-rv { border-bottom: 1px solid var(--sx-line); padding: .7rem 0; }
.sx-rv:last-child { border-bottom: 0; }
.sx-rv-who { display: flex; align-items: center; gap: .5rem; font-size: .88rem; font-weight: 600; color: var(--sx-ink); }
.sx-rv-who .avatar-circle { width: 30px; height: 30px; font-size: .85rem; }
.sx-vp { color: var(--sx-warn); font-size: .76rem; font-weight: 700; }
.sx-fbt-card { min-width: 0; }
.fx-store .fx-comments { border-radius: 16px; border-color: var(--sx-line); margin-bottom: 1rem; }

/* sticky add-to-cart (phones) */
.sx-sticky { position: fixed; inset-inline: 0; bottom: 0; z-index: 1033; background: #fff; border-top: 1px solid var(--sx-line); box-shadow: 0 -.5rem 1.2rem rgba(15,23,40,.1); padding: .55rem .8rem calc(.55rem + var(--dx-sab, env(safe-area-inset-bottom, 0px))); display: flex; align-items: center; gap: .6rem; transform: translateY(110%); transition: transform .2s ease, bottom .2s ease; }
.sx-sticky.is-on { transform: none; }
.sx-sticky .btn { flex: 0 0 auto; padding-inline: 1.1rem; }
.sx-sticky .sx-sticky-p { flex: 1 1 auto; min-width: 0; line-height: 1.15; }
.sx-sticky .sx-sticky-p small { display: block; color: var(--sx-mute); font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 991.98px) {
  .sx-sticky { bottom: var(--dx-bn-total, 64px); padding-bottom: .55rem; }
  html.dx-bn-down .sx-sticky { bottom: 0; padding-bottom: calc(.55rem + var(--dx-sab, env(safe-area-inset-bottom, 0px))); }
  body.fx-store.has-sticky .fx-foot { padding-bottom: calc(var(--dx-bn-total, 64px) + 5rem); }
}
@media (min-width: 992px) { .sx-sticky { display: none; } }

/* ---------- cart ---------- */
.sx-cartgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
@media (min-width: 992px) { .sx-cartgrid { grid-template-columns: minmax(0, 1fr) 320px; } }
.sx-cartgrid > div { min-width: 0; }
.sx-group { border: 1px solid var(--sx-line); border-radius: 14px; margin-bottom: 1rem; overflow: hidden; background: #fff; }
.sx-group > .sx-gh { background: var(--sx-soft); padding: .65rem .95rem; display: flex; flex-wrap: wrap; gap: .4rem .9rem; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--sx-line); }
.sx-group > .sx-gh b { color: var(--sx-ink); }
.sx-line { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: .85rem; padding: .85rem .95rem; border-top: 1px solid var(--sx-line); align-items: start; }
.sx-group > .sx-line:first-of-type { border-top: 0; }
.sx-line .sx-li { width: 96px; height: 96px; border-radius: 10px; background: var(--sx-soft); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.sx-line .sx-li img { width: 100%; height: 100%; object-fit: contain; padding: .3rem; mix-blend-mode: multiply; }
.sx-line .sx-li i { font-size: 2rem; color: #b7c3d4; }
.sx-line .sx-ln { font-weight: 600; color: var(--sx-ink); display: block; line-height: 1.3; overflow-wrap: anywhere; }
.sx-line .sx-ln:hover { color: var(--sx-warn); }
.sx-line .sx-lmeta { font-size: .8rem; color: var(--sx-mute); margin-top: .15rem; }
.sx-line .sx-lacts { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .8rem; margin-top: .45rem; font-size: .82rem; }
.sx-line .sx-lacts form { margin: 0; display: inline-flex; }
.sx-line .sx-lacts .btn-link { padding: 0; font-size: .82rem; color: var(--sx-link); text-decoration: none; }
.sx-line .sx-lacts .sep { color: #c9d3e1; }
.sx-line .sx-lt { text-align: end; font-weight: 800; color: var(--sx-ink); white-space: nowrap; }
.sx-gfoot { display: flex; flex-wrap: wrap; gap: .4rem .9rem; justify-content: flex-end; align-items: center; padding: .65rem .95rem; border-top: 1px solid var(--sx-line); font-size: .9rem; }
.sx-sum { background: #fff; border: 1px solid var(--sx-line); border-radius: 16px; padding: 1rem 1.05rem; }
@media (min-width: 992px) { .sx-sum { position: sticky; top: calc(62px + 62px + var(--dx-sat, env(safe-area-inset-top, 0px))); } }
.sx-sum dl { display: grid; grid-template-columns: 1fr auto; gap: .3rem .5rem; font-size: .9rem; margin: .5rem 0 .8rem; }
.sx-sum dt { font-weight: 500; color: var(--sx-ink-2); } .sx-sum dd { margin: 0; text-align: end; color: var(--sx-ink); }
.sx-sum .sx-sum-t { border-top: 1px solid var(--sx-line); padding-top: .45rem; font-weight: 800; color: var(--sx-ink); font-size: 1.02rem; }
.sx-sum .btn { width: 100%; padding-block: .6rem; }
@media (max-width: 575.98px) {
  .sx-line { grid-template-columns: 72px minmax(0, 1fr); }
  .sx-line .sx-li { width: 72px; height: 72px; }
  .sx-line .sx-lt { grid-column: 2; text-align: start; }
}

/* ---------- checkout ---------- */
.sx-steps { display: flex; align-items: center; gap: .4rem; list-style: none; padding: 0; margin: 0 0 1rem; flex-wrap: wrap; }
.sx-steps li { display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; color: var(--sx-mute); font-size: .9rem; }
.sx-steps li b { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #c9d3e1; display: inline-flex; align-items: center; justify-content: center; font-size: .82rem; background: #fff; }
.sx-steps li.is-on { color: var(--sx-ink); } .sx-steps li.is-on b { border-color: var(--sx-dept); background: var(--sx-dept); color: #fff; }
.sx-steps li.is-done { color: var(--sx-ok); } .sx-steps li.is-done b { border-color: var(--sx-ok); background: var(--sx-ok); color: #fff; }
.sx-steps .sx-steps-sep { flex: 0 0 28px; height: 2px; background: #c9d3e1; border-radius: 2px; }
.sx-ck-sec { background: #fff; border: 1px solid var(--sx-line); border-radius: 16px; margin-bottom: 1rem; overflow: hidden; }
.sx-ck-sec > .sx-ck-h { display: flex; align-items: center; gap: .6rem; padding: .8rem 1rem; border-bottom: 1px solid var(--sx-line); font-weight: 800; color: var(--sx-ink); }
.sx-ck-sec > .sx-ck-h .sx-ck-n { width: 26px; height: 26px; border-radius: 50%; background: var(--sx-dept); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; flex: 0 0 26px; }
.sx-ck-sec > .sx-ck-b { padding: 1rem; }
.sx-paychoice { display: flex; flex-wrap: wrap; gap: .5rem; }
.sx-paychoice label { border: 1px solid #c9d3e1; border-radius: 12px; padding: .55rem .8rem; cursor: pointer; display: flex; gap: .5rem; align-items: flex-start; flex: 1 1 220px; font-size: .88rem; }
.sx-paychoice input:checked + label { border-color: #e77600; background: #fffaf2; box-shadow: 0 0 0 2px rgba(231,118,0,.2); }

/* confirmation */
.sx-done { text-align: center; padding: 1.6rem 1rem 1rem; }
.sx-done .sx-done-ic { width: 72px; height: 72px; border-radius: 50%; background: #e3f6ef; color: var(--sx-ok); display: inline-flex; align-items: center; justify-content: center; font-size: 2.3rem; }
.sx-done h1 { font-size: 1.45rem; font-weight: 800; color: var(--sx-ink); margin: .7rem 0 .3rem; }
.sx-ord { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem 1rem; align-items: center; border: 1px solid var(--sx-line); border-radius: 14px; padding: .85rem 1rem; margin-bottom: .7rem; background: #fff; }
.sx-ord .sx-ord-thumbs { display: flex; gap: .35rem; margin-top: .45rem; flex-wrap: wrap; }
.sx-ord .sx-ord-thumbs span { width: 46px; height: 46px; border-radius: 8px; background: var(--sx-soft); display: inline-flex; align-items: center; justify-content: center; overflow: hidden; border: 1px solid var(--sx-line); }
.sx-ord .sx-ord-thumbs img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
@media (max-width: 575.98px) { .sx-ord { grid-template-columns: minmax(0, 1fr); } }

/* orders list (buyer) */
.sx-otabs { display: flex; gap: .35rem; overflow-x: auto; scrollbar-width: none; margin-bottom: .8rem; }
.sx-otabs::-webkit-scrollbar { display: none; }
.sx-otabs a { flex: 0 0 auto; border: 1px solid #c9d3e1; border-radius: 999px; padding: .3rem .8rem; font-size: .84rem; font-weight: 700; background: #fff; color: var(--sx-ink-2); white-space: nowrap; }
.sx-otabs a.is-on { background: var(--sx-dept); border-color: var(--sx-dept); color: #fff; }
.sx-otabs a span { opacity: .75; margin-inline-start: .2rem; }
.sx-oc { border: 1px solid var(--sx-line); border-radius: 14px; overflow: hidden; background: #fff; margin-bottom: .9rem; }
.sx-oc-h { background: var(--sx-soft); border-bottom: 1px solid var(--sx-line); padding: .6rem .95rem; display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; font-size: .8rem; color: var(--sx-mute); }
.sx-oc-h b { display: block; color: var(--sx-ink-2); font-size: .86rem; }
.sx-oc-h .sx-oc-no { margin-inline-start: auto; text-align: end; }
.sx-oc-b { padding: .85rem .95rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .8rem; }
.sx-oc-acts { display: flex; flex-direction: column; gap: .4rem; min-width: 190px; }
.sx-oc-acts .btn, .sx-oc-acts form .btn { width: 100%; border-radius: 999px; font-weight: 600; }
.sx-oc-acts form { margin: 0; }
@media (max-width: 767.98px) { .sx-oc-b { grid-template-columns: minmax(0, 1fr); } .sx-oc-acts { flex-direction: row; flex-wrap: wrap; min-width: 0; } .sx-oc-acts > * { flex: 1 1 140px; } .sx-oc-h .sx-oc-no { margin-inline-start: 0; text-align: start; } }

/* compare tray */
.sx-tray { position: fixed; inset-inline: 0; bottom: calc(var(--dx-sab, env(safe-area-inset-bottom, 0px)) + 1rem); z-index: 1040; display: flex; justify-content: center; pointer-events: none; }
.sx-tray > div { pointer-events: auto; background: var(--sx-dept); color: #fff; border-radius: 2rem; padding: .4rem .5rem .4rem 1rem; padding-inline: 1rem .5rem; display: flex; gap: .6rem; align-items: center; box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.25); }
@media (max-width: 991.98px) { .sx-tray { bottom: calc(var(--dx-bn-total, 64px) + .6rem); } body.has-sticky .sx-tray { bottom: calc(var(--dx-bn-total, 64px) + 4.6rem); } }
.sx-cmp-t { min-width: 640px; }
.sx-cmp-t th { position: sticky; inset-inline-start: 0; z-index: 1; }

@media print { .sx-tray, .sx-wish, .sx-dept, .sx-sticky, .sx-arrow { display: none !important; } }
.fx-store .table-responsive, .sx-track, .sx-dept-scroll, .sx-brands, .sx-sf-cats, .sx-otabs { position: relative; }
@media (max-width: 575.98px) { .sx-steps { gap: .3rem; } .sx-steps .sx-steps-sep { flex-basis: 14px; } .sx-steps li { font-size: .82rem; } }
@media (min-width: 576px) { .sx-sf-row > .min-w-0, .sx-sf-row > .sx-sf-btns { padding-top: 48px; } }

/* ---- store home polish (owner 2026-11-03): compact hero on phones, icon-only category scroller, rails that fit their item count ---- */
@media (max-width: 575.98px) {
  .sx-hero { padding: .95rem 1rem; border-radius: 14px; }
  .sx-hero-t { font-size: 1.15rem; }
  .sx-hero p { display: none; }
  .sx-hero-stats { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: .6rem -1rem .7rem !important; padding-inline: 1rem; }
  .sx-hero-stats::-webkit-scrollbar { display: none; }
  .sx-hero-stats span { flex: 0 0 auto; font-size: .76rem; padding: .25rem .65rem; }
  .sx-hero .btn { font-size: .85rem; padding: .35rem .9rem; }
  /* categories: one swipeable row of icon chips instead of a tall 3-column grid */
  .sx-tiles { display: flex; overflow-x: auto; gap: .5rem; scrollbar-width: none; scroll-snap-type: x proximity; margin-inline: -.25rem; padding: 2px .25rem 4px; }
  .sx-tiles::-webkit-scrollbar { display: none; }
  .sx-tile { flex: 0 0 88px; scroll-snap-align: start; border-radius: 14px; text-align: center; }
  .sx-tile-img { aspect-ratio: 1 / 1; }
  .sx-tile-img > i { font-size: 1.7rem; }
  .sx-tile-b { padding: .35rem .3rem .45rem; }
  .sx-tile-b b { font-size: .72rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.5em; }
}
.sx-tile-img > i { position: relative; }
.sx-few .sx-arrow { display: none !important; }
.sx-few .sx-track { grid-auto-flow: row; overflow: visible; scroll-snap-type: none; }
.sx-two .sx-track { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-columns: auto; }
@media (min-width: 768px) { .sx-two .sx-track { grid-template-columns: repeat(2, minmax(0, 260px)); } }
.sx-one .sx-track { grid-template-columns: minmax(0, 1fr); grid-auto-columns: auto; }
.sx-one .sx-card { flex-direction: row; }
.sx-one .sx-card .sx-img { width: 42%; flex: 0 0 42%; max-width: 220px; aspect-ratio: auto; min-height: 150px; }
.sx-one .sx-card .sx-b { flex: 1 1 auto; min-width: 0; }
@media (min-width: 768px) { .sx-one .sx-track { grid-template-columns: minmax(0, 560px); } }