/* Sales boosters (core/boost.php, assets/boost.js). Colours, font and corners come from the design's own variables
   (scoped to .bx-scope on one-page designs), so they follow every theme and the owner's colour choices. */
.bx-scope, .bx-fbt, .bx-alert, .bx-co, .bx-gc-page, .bx-points-card, .bx-earn {
  --bx-p: var(--primary, #111); --bx-on: var(--on-primary, #fff); --bx-tx: var(--text, #111); --bx-mu: var(--muted, #6b6b73);
  --bx-ln: var(--line, #e7e7ea); --bx-sf: var(--surface, #f5f5f7); --bx-bg: var(--bg, #fff); --bx-r: var(--radius, 12px);
  --bx-good: var(--good, #16a34a); --bx-bad: var(--bad, #dc2626); --bx-sale: var(--sale, #e11d48);
}
.bx-fbt [hidden], .bx-co [hidden], .bx-scope[hidden] { display: none !important; }
.bx-alert-msg { margin: 6px 0 0; font-size: 13.5px; min-height: 1em; }
.bx-alert-msg.good { color: var(--bx-good); }
.bx-alert-msg.bad { color: var(--bx-bad); }

/* Points under the buy box */
.bx-earn { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 0; padding: 10px 12px; border-radius: var(--bx-r); background: color-mix(in srgb, var(--bx-p) 8%, transparent); color: var(--bx-tx); font-size: 14px; line-height: 1.5; }
.bx-earn svg { color: var(--bx-p); flex: none; margin-top: 2px; }
.bx-earn small { color: var(--bx-mu); }

/* Frequently bought together */
.bx-fbt { margin: 32px 0 8px; padding: 22px; border: 1px solid var(--bx-ln); border-radius: calc(var(--bx-r) + 4px); background: var(--bx-bg); color: var(--bx-tx); min-width: 0; }
.bx-fbt-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 16px; }
.bx-fbt-head .sec-title { margin: 0; font-size: clamp(19px, 2.2vw, 24px); }
.bx-fbt-tag { display: inline-flex; padding: 5px 12px; border-radius: 99px; background: var(--bx-sale); color: #fff; font-weight: 700; font-size: 13px; }
.bx-fbt-body { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }
.bx-fbt-items { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; flex: 1 1 420px; min-width: 0; }
.bx-fbt-item { position: relative; display: flex; flex-direction: column; gap: 6px; width: 172px; max-width: calc(50% - 22px); transition: opacity .2s; }
.bx-fbt-item.off { opacity: .45; }
.bx-plus { position: absolute; inset-inline-start: -12px; top: 64px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--bx-p); color: var(--bx-on); font-weight: 700; z-index: 2; transform: translateX(-50%); }
[dir=rtl] .bx-plus { transform: translateX(50%); }
.bx-fbt-item + .bx-fbt-item { margin-inline-start: 14px; }
.bx-fbt-card { position: relative; display: flex; flex-direction: column; gap: 6px; cursor: pointer; }
.bx-fbt-card input { position: absolute; top: 8px; inset-inline-start: 8px; width: 20px; height: 20px; accent-color: var(--bx-p); z-index: 1; margin: 0; }
.bx-fbt-card img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--bx-r); background: var(--img-bg, var(--bx-sf)); display: block; }
.bx-fbt-name { font-size: 13.5px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bx-fbt-name small { display: block; color: var(--bx-mu); font-size: 12px; }
.bx-fbt-name a { color: inherit; text-decoration: none; }
.bx-fbt-price { font-size: 14px; }
.bx-fbt-price s { color: var(--bx-mu); font-weight: 400; font-size: 12.5px; }
.bx-fbt-opts { display: flex; flex-wrap: wrap; gap: 4px; }
.bx-fbt-opts select { max-width: 100%; font: inherit; font-size: 12.5px; padding: 4px 6px; border: 1px solid var(--bx-ln); border-radius: 8px; background: var(--bx-bg); color: var(--bx-tx); }
.bx-fbt-buy { display: grid; gap: 10px; flex: 0 1 260px; min-width: 0; }
.bx-fbt-sum { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.bx-fbt-sum small { flex-basis: 100%; color: var(--bx-mu); }
.bx-fbt-sum b { font-size: 24px; }
.bx-fbt-sum s { color: var(--bx-mu); }
.bx-fbt-sum em { flex-basis: 100%; font-style: normal; color: var(--bx-good); font-weight: 700; font-size: 14px; }
.bx-fbt-sum em:empty, .bx-fbt-sum s:empty { display: none; }
.bx-fbt-buy .btn { width: 100%; justify-content: center; }

/* Back in stock */
.bx-alert { display: grid; gap: 8px; padding: 14px; border: 1px dashed var(--bx-ln); border-radius: var(--bx-r); background: var(--bx-sf); color: var(--bx-tx); margin-top: 4px; }
.bx-alert-t { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 14px; }
.bx-alert-t svg { color: var(--bx-p); }
.bx-alert-t span { flex-basis: 100%; color: var(--bx-mu); font-size: 13.5px; }
.bx-alert-row { display: flex; gap: 8px; min-width: 0; }
.bx-alert-row input { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid var(--bx-ln); border-radius: var(--btn-radius, 10px); font: inherit; background: var(--bx-bg); color: var(--bx-tx); }
.bx-alert-row .btn { flex: none; white-space: nowrap; }

/* Checkout */
.bx-co .co-n svg { display: block; }
.bx-check { display: flex !important; flex-direction: row !important; align-items: flex-start; gap: 10px; padding: 12px; border: 1px solid var(--bx-ln); border-radius: var(--bx-r); cursor: pointer; margin-bottom: 10px; }
.bx-check input { width: 18px !important; height: 18px; margin: 3px 0 0 !important; flex: none; accent-color: var(--bx-p); }
.bx-check span { display: grid; gap: 2px; }
.bx-check small { color: var(--bx-mu); font-weight: 400; }
.bx-check.off { opacity: .6; cursor: default; }
.bx-wrap-f { margin-bottom: 8px; }
.bx-row dt { display: flex; align-items: center; gap: 6px; }
.bx-row-x { border: 0; background: none; color: var(--muted, #888); cursor: pointer; font-size: 12px; padding: 2px 4px; }
.bx-gc-link { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; font-size: 14px; color: var(--primary, inherit); text-decoration: none; font-weight: 600; }

/* Gift cards page */
.bx-gc-page { color: var(--bx-tx); padding-bottom: 40px; }
.bx-gc-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 28px; align-items: start; margin: 18px 0 24px; }
.bx-gc-card { position: relative; aspect-ratio: 1.6; border-radius: calc(var(--bx-r) + 10px); padding: 24px; display: flex; flex-direction: column; justify-content: space-between; color: #fff; overflow: hidden;
  background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--accent, #f59e0b) 75%, transparent), transparent 55%), linear-gradient(135deg, var(--bx-p), color-mix(in srgb, var(--bx-p) 55%, #000)); box-shadow: 0 24px 50px rgba(0,0,0,.18); }
.bx-gc-card::after { content: ''; position: absolute; inset-inline-end: -40px; bottom: -40px; width: 180px; height: 180px; border-radius: 50%; border: 22px solid rgba(255,255,255,.12); }
.bx-gc-store { font-weight: 800; font-size: 18px; letter-spacing: .02em; }
.bx-gc-ic { position: absolute; top: 22px; inset-inline-end: 22px; opacity: .9; }
.bx-gc-amount { font-size: clamp(32px, 6vw, 46px); line-height: 1; }
.bx-gc-to { opacity: .85; font-size: 14px; }
.bx-how { margin: 18px 0 0; padding-inline-start: 18px; color: var(--bx-mu); display: grid; gap: 6px; font-size: 14.5px; }
.bx-gc-form .page-title { margin-top: 0; font-size: clamp(22px, 3vw, 30px); }
.bx-gc-amounts { border: 0; padding: 0; margin: 0 0 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.bx-gc-amounts legend { font-weight: 600; margin-bottom: 8px; padding: 0; }
.bx-gc-check h2 { margin-top: 0; font-size: 18px; }
.bx-balance { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bx-balance input { flex: 1 1 200px; min-width: 0; padding: 10px 12px; border: 1px solid var(--bx-ln); border-radius: var(--btn-radius, 10px); font: inherit; letter-spacing: .05em; background: var(--bx-bg); color: var(--bx-tx); }
.bx-balance .bx-alert-msg { flex-basis: 100%; }

/* My account → My rewards */
.bx-points-card { display: flex; align-items: center; gap: 16px; padding: 20px; border-radius: calc(var(--bx-r) + 4px); background: linear-gradient(135deg, var(--bx-p), color-mix(in srgb, var(--bx-p) 60%, #000)); color: var(--bx-on); margin-bottom: 6px; }
.bx-points-card div { display: grid; }
.bx-points-card small { opacity: .85; }
.bx-points-card b { font-size: 34px; line-height: 1.1; }
.bx-points-card span { opacity: .9; font-size: 14px; }
.bx-points-ic { width: 54px; height: 54px; border-radius: 50%; display: grid !important; place-items: center; background: rgba(255,255,255,.16); flex: none; }
.bx-hist { margin-top: 18px; }
.bx-hist td.good { color: var(--bx-good); font-weight: 700; }
.bx-hist td.bad { color: var(--bx-bad); font-weight: 700; }
.bx-hist small { color: var(--bx-mu); font-weight: 400; }
.bx-h3 { display: flex; align-items: center; gap: 8px; margin: 28px 0 12px; }

/* The floating flash-sale countdown */
.bx-timer { position: fixed; z-index: 85; bottom: var(--bx-lift, 20px); inset-inline-start: 20px; display: flex; align-items: center; max-width: min(420px, calc(100vw - 110px)); background: var(--bx-sale); color: #fff; border-radius: 99px; box-shadow: 0 12px 30px rgba(0,0,0,.25); font-family: var(--font, system-ui, sans-serif); animation: bx-up .35s ease; }
.bx-timer-a { display: flex; align-items: center; gap: 10px; padding: 8px 6px 8px 14px; color: inherit; text-decoration: none; min-width: 0; }
[dir=rtl] .bx-timer-a { padding: 8px 14px 8px 6px; }
.bx-timer-ic { font-size: 20px; }
.bx-timer-t { display: grid; min-width: 0; line-height: 1.25; }
.bx-timer-t b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bx-timer-t small { font-size: 11.5px; opacity: .9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bx-timer-c { font-variant-numeric: tabular-nums; font-weight: 800; font-size: 15px; background: rgba(0,0,0,.22); padding: 6px 10px; border-radius: 99px; white-space: nowrap; direction: ltr; }
.bx-timer-x { border: 0; background: none; color: inherit; opacity: .8; cursor: pointer; width: 34px; height: 34px; border-radius: 50%; flex: none; font-size: 13px; }
.bx-timer-x:hover { opacity: 1; background: rgba(255,255,255,.15); }
@keyframes bx-up { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) { .bx-timer { animation: none; } }
.bx-toast { position: fixed; z-index: 300; bottom: 24px; left: 50%; transform: translate(-50%, 20px); background: #111; color: #fff; padding: 10px 18px; border-radius: 10px; opacity: 0; pointer-events: none; transition: .25s; font-family: var(--font, system-ui, sans-serif); max-width: calc(100vw - 32px); }
.bx-toast.on { opacity: 1; transform: translate(-50%, 0); }

.bx-admin-note { list-style: none; margin: 12px 0 0; padding: 12px 14px; border-radius: 10px; background: #f7f7f9; display: grid; gap: 6px; font-size: 13.5px; }
.bx-admin-note li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

@media (max-width: 720px) {
  .bx-fbt { padding: 16px; margin-top: 24px; }
  .bx-fbt-item { width: calc(50% - 22px); }
  .bx-fbt-items { flex-basis: 100%; }
  .bx-fbt-buy { flex-basis: 100%; }
  .bx-gc-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .bx-timer { inset-inline-start: 12px; max-width: calc(100vw - 92px); }
  .bx-timer-t small { display: none; }
  .bx-alert-row { flex-wrap: wrap; }
  .bx-alert-row .btn { flex: 1 1 auto; }
}
@media (max-width: 400px) {
  .bx-fbt-item { width: calc(50% - 16px); }
  .bx-timer-ic { display: none; }
}