/* Direction 2's browser-extension demonstration, scoped for the original site.
   The host owns its red frame. A shared grid cell keeps both tabs the same size. */
[data-extension-demo] { min-width:0; width:100%; }
.sx-demo { --sx-red:#d91828; --sx-ink:#101114; --sx-muted:#696c63; --sx-rule:#e2e3db; --sx-tilt-x:0deg; --sx-tilt-y:0deg; --sx-product-x:0px; --sx-product-y:0px; position:relative; width:100%; color:var(--sx-ink); background:#fff; border:0; border-radius:0; box-shadow:6px 7px 0 #930f1d; overflow:hidden; container-type:inline-size; text-align:start; font-family:Manrope,Arial,sans-serif; font-size:12px; line-height:1.5; }
.sx-demo[dir=rtl] { font-family:SavrzArabic,Arial,sans-serif; }
.sx-demo *, .sx-demo *::before, .sx-demo *::after { box-sizing:border-box; }
.sx-demo button { font:inherit; border-radius:0; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.sx-demo button:focus-visible { outline:3px solid var(--sx-red); outline-offset:3px; position:relative; z-index:3; }
.sx-demo svg { display:block; }
.sx-demo img { display:block; }
.sx-demo bdi { unicode-bidi:isolate; }
.sx-demo-money { display:inline-flex; flex-direction:row; direction:rtl; align-items:baseline; gap:.24em; white-space:nowrap; }
.sx-demo-money > span { font:inherit!important; color:inherit!important; }
.sx-demo-chrome { display:flex; align-items:center; gap:12px; height:36px; padding:0 15px; color:#f1f0e8; background:#111210; direction:ltr; }
.sx-demo-window-dots { display:flex; gap:5px; }
.sx-demo-window-dots i { width:5px; height:5px; border-radius:50%; background:#cdd0c7; }
.sx-demo-address { display:flex; align-items:center; justify-content:center; gap:6px; flex:1; color:#e3e4dc; font-size:9px; letter-spacing:.015em; min-width:0; white-space:nowrap; }
.sx-demo-address svg { width:7px; height:9px; flex-shrink:0; }
.sx-demo-reset { width:28px; height:28px; flex:0 0 28px; display:grid; place-items:center; border:0; background:transparent; color:#e3e4dc; }
.sx-demo-reset:hover { color:#fff; background:#ffffff20; }
.sx-demo-reset svg { width:16px; height:16px; }
.sx-demo-stage { display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:20px; padding:18px; background:#f1f0e8; perspective:1100px; transform-style:preserve-3d; }
.sx-demo-product { position:relative; display:flex; flex-direction:column; min-width:0; padding:5px 8px 0; }
.sx-demo-eyebrow { font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:.035em; font-weight:500; color:var(--sx-muted); line-height:1.5; }
.sx-demo[dir=rtl] .sx-demo-eyebrow, .sx-demo[dir=rtl] .sx-demo-example { font-family:SavrzArabic,Arial,sans-serif; font-weight:700; letter-spacing:0; }
.sx-demo-product-label { text-align:center; }
.sx-demo-product-visual { position:relative; flex:1; display:grid; place-items:center; min-height:190px; }
.sx-demo-product-visual img { position:relative; z-index:1; width:100%; max-width:100%; height:210px; object-fit:contain; transform:translate3d(var(--sx-product-x),var(--sx-product-y),12px); transition:transform .65s cubic-bezier(.16,1,.3,1); }
.sx-demo[data-state=checking] .sx-demo-product-visual img { transform:translate3d(var(--sx-product-x),calc(var(--sx-product-y) - 4px),20px); }
.sx-demo-product-details { position:relative; z-index:1; padding-top:10px; }
.sx-demo-product h3 { margin:0; color:var(--sx-ink); font-family:inherit; font-size:18px; font-weight:800; letter-spacing:-.04em; line-height:1.3; text-transform:none; }
.sx-demo-product p { margin:5px 0 12px; font-size:11px; line-height:1.4; color:var(--sx-muted); }
.sx-demo-product-price { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:5px 12px; border-top:1px solid #d8dbd0; padding-top:12px; }
.sx-demo-product-price>span { color:var(--sx-muted); font-size:10px; }
.sx-demo-product-price strong { font-size:24px; line-height:1.15; letter-spacing:-.045em; font-weight:800; font-variant-numeric:tabular-nums; }
.sx-demo-scan { position:absolute; inset:8% 4% auto; height:2px; background:linear-gradient(90deg,transparent,#d91828 25%,#d91828 75%,transparent); box-shadow:0 -9px 23px 2px #d918282b; z-index:2; opacity:0; pointer-events:none; }
.sx-demo[data-state=checking] .sx-demo-scan { animation:sx-demo-scan .95s cubic-bezier(.2,.6,.3,1); }
.sx-demo-panel { position:relative; min-width:0; padding:14px; background:#fff; color:var(--sx-ink); border:1px solid #babeb1; box-shadow:4px 4px 0 #d3d6c9; display:flex; flex-direction:column; transform:rotateX(var(--sx-tilt-x)) rotateY(var(--sx-tilt-y)) translateZ(12px); transform-style:preserve-3d; transition:box-shadow .35s,border-color .35s; }
.sx-demo[data-state=checking] .sx-demo-panel { border-color:#d918287a; box-shadow:4px 4px 0 #d3d6c9,0 0 0 1px #d918281a; }
.sx-demo-panel-heading { display:flex; gap:12px; align-items:center; justify-content:space-between; min-height:30px; padding-bottom:12px; }
.sx-demo-panel-heading img { width:78px; height:auto; max-width:35%; object-fit:contain; }
.sx-demo-panel-heading span { font-size:9px; font-weight:600; color:var(--sx-muted); line-height:1.35; text-align:end; }
.sx-demo-tabs { display:grid; grid-template-columns:1fr 1fr; margin-bottom:8px; border-bottom:1px solid var(--sx-rule); }
.sx-demo-tabs button { display:grid; place-items:center; min-height:39px; padding:6px 3px; font-size:11px; font-weight:800; color:var(--sx-muted); border:0; background:none; border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap; }
.sx-demo-tabs button[aria-selected=true] { color:#fff; background:var(--sx-ink); border-bottom-color:var(--sx-red); }
.sx-demo-tabs button:hover:not([aria-selected=true]) { color:var(--sx-red); }
.sx-demo-views { display:grid; flex:1; min-width:0; }
.sx-demo-view { grid-area:1 / 1; min-height:231px; min-width:0; }
.sx-demo-view[hidden] { display:block!important; visibility:hidden; pointer-events:none; }
.sx-demo-store-row { position:relative; display:flex; gap:7px; align-items:center; min-height:49px; border-bottom:1px solid #eeefe9; padding:6px 4px; }
.sx-demo-store-no { width:22px; height:25px; display:grid; place-items:center; background:#f4f5f0; color:#83867b; font-family:'IBM Plex Mono',monospace; font-size:9px; flex-shrink:0; }
.sx-demo-store-name { display:flex; flex-direction:column; min-width:0; gap:2px; flex:1; }
.sx-demo-store-name strong { font-size:11px; font-weight:800; line-height:1.35; }
.sx-demo-store-name small { font-size:9px; color:var(--sx-muted); line-height:1.35; }
.sx-demo-row-price { opacity:0; transform:translateY(5px); margin-inline-start:auto; font-size:13px; font-weight:800; letter-spacing:-.035em; white-space:nowrap; font-variant-numeric:tabular-nums; transition:opacity .25s,transform .25s; }
.sx-demo-row-dash { position:absolute; inset-inline-end:5px; color:#b4b6ad; }
.sx-demo-store-row.is-revealed .sx-demo-row-price { opacity:1; transform:none; }
.sx-demo-store-row.is-revealed .sx-demo-row-dash { display:none; }
.sx-demo-best-mark { display:none; width:14px; flex:0 0 14px; color:var(--sx-red); }
.sx-demo-store-row.is-best { background:#ffe0e4; border-bottom-color:#f4d3d8; border-inline-start:3px solid var(--sx-red); padding-inline-start:1px; }
.sx-demo-store-row.is-best .sx-demo-store-no { color:var(--sx-red); background:transparent; }
.sx-demo-store-row.is-best .sx-demo-row-price { color:var(--sx-red); }
.sx-demo-store-row.is-best .sx-demo-best-mark { display:block; }
.sx-demo-result { margin:12px 0 0; display:flex; gap:7px; align-items:flex-start; overflow:hidden; }
.sx-demo-result-symbol { flex:0 0 15px; padding-top:2px; color:var(--sx-red); }
.sx-demo-result-symbol svg, .sx-demo-confirm-v { display:block; width:15px; height:15px; object-fit:contain; }
.sx-demo-result strong { display:block; font-size:12px; line-height:1.4; font-weight:800; }
.sx-demo-result p { font-size:11px; line-height:1.6; color:var(--sx-muted); margin:4px 0 0; }
.sx-demo-run { margin-top:11px; min-height:44px; padding:9px 11px; display:flex; align-items:center; justify-content:space-between; gap:10px; border:1px solid var(--sx-red); background:var(--sx-red); color:#fff; font-size:12px!important; font-weight:800!important; transition:background .2s; }
.sx-demo-run:hover { background:#bd1222; }
.sx-demo-run[aria-disabled=true] { cursor:wait; background:#b41a27; border-color:#b41a27; }
.sx-demo-run svg { width:17px; height:17px; flex-shrink:0; }
.sx-demo[dir=rtl] .sx-demo-run svg, .sx-demo[dir=rtl] .sx-demo-result-symbol svg { transform:scaleX(-1); }
.sx-demo-history { padding-top:5px; }
.sx-demo-history-value { display:flex; justify-content:space-between; align-items:flex-end; gap:12px; }
.sx-demo-history-value>div { display:flex; flex-direction:column; gap:7px; }
.sx-demo-history-value strong { font-size:24px; letter-spacing:-.055em; font-weight:800; line-height:1.1; font-variant-numeric:tabular-nums; }
.sx-demo-history-value>span { font-size:9px; line-height:1.4; color:var(--sx-muted); max-width:74px; text-align:end; }
.sx-demo-chart { margin-top:12px; }
.sx-demo-chart svg { width:100%; height:91px; overflow:visible; }
.sx-demo-chart-labels { display:flex; justify-content:space-between; font-size:9px; color:var(--sx-muted); line-height:1.4; margin-top:1px; }
.sx-demo-history-caption { padding-top:12px; }
.sx-demo-history-caption strong { font-size:12px; font-weight:800; }
.sx-demo-history-caption p { margin:4px 0 0; color:var(--sx-muted); font-size:11px; line-height:1.5; }
.sx-demo-foot { padding:10px 15px; display:flex; align-items:center; justify-content:space-between; gap:14px; border-top:1px solid var(--sx-rule); background:white; }
.sx-demo-example { display:flex; gap:6px; align-items:center; color:#666a60; font-family:'IBM Plex Mono',monospace; font-size:8px; letter-spacing:.015em; line-height:1.45; }
.sx-demo-example i { display:block; width:4px; height:4px; background:var(--sx-red); border-radius:50%; flex-shrink:0; }
.sx-demo-foot p { color:#666a60; font-size:8px; line-height:1.45; margin:0; text-align:end; max-width:48%; }
.sx-demo-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.sx-demo[dir=rtl] .sx-demo-product h3 { letter-spacing:0; font-weight:900; }
.sx-demo[dir=rtl] .sx-demo-store-name strong { font-family:Manrope,Arial,sans-serif; }
@keyframes sx-demo-scan { 0%{opacity:0;top:8%}15%{opacity:.8}80%{opacity:.8}100%{opacity:0;top:95%} }
@container (max-width:680px) {
  .sx-demo-stage { padding:15px; gap:15px; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); }
  .sx-demo-product { padding:4px 0 0; }
  .sx-demo-product-visual img { height:195px; }
  .sx-demo-product h3 { font-size:17px; }
  .sx-demo-product-price { flex-direction:column; gap:6px; }
  .sx-demo-panel { padding:12px; }
}
@container (max-width:540px) {
  .sx-demo-chrome { height:34px; padding:0 10px; gap:8px; }
  .sx-demo-address { font-size:8px; }
  .sx-demo-stage { grid-template-columns:1fr; gap:12px; padding:12px; }
  .sx-demo-product { display:grid; grid-template-columns:1fr 1.1fr; gap:4px 12px; align-items:center; padding:0; min-height:111px; }
  .sx-demo-product-label { display:none; }
  .sx-demo-product-visual { height:111px; min-height:0; grid-column:1; grid-row:1; }
  .sx-demo-product-visual img { height:111px; max-width:100%; }
  .sx-demo-product-details { grid-column:2; grid-row:1; padding:0; }
  .sx-demo-product h3 { font-size:16px; line-height:1.3; }
  .sx-demo-product p { margin:4px 0 7px; font-size:10px; }
  .sx-demo-product-price { padding-top:7px; gap:4px; }
  .sx-demo-product-price>span { font-size:9px; }
  .sx-demo-product-price strong { font-size:22px; }
  .sx-demo-panel { padding:12px; transform:none; }
  .sx-demo-panel-heading { min-height:28px; padding-bottom:8px; }
  .sx-demo-panel-heading img { width:80px; max-width:34%; }
  .sx-demo-tabs { margin-bottom:6px; }
  .sx-demo-tabs button { min-height:42px; font-size:12px; }
  .sx-demo-view { min-height:225px; }
  .sx-demo-store-row { min-height:48px; }
  .sx-demo-store-name strong { font-size:11px; }
  .sx-demo-store-name small { font-size:9px; }
  .sx-demo-result p { font-size:11px; }
  .sx-demo-run { margin-top:10px; }
  .sx-demo-history { padding-top:4px; }
  .sx-demo-chart svg { height:88px; }
  .sx-demo-history-caption { padding-top:11px; }
  .sx-demo-foot { flex-direction:column; align-items:flex-start; gap:3px; padding:9px 12px; }
  .sx-demo-example { font-size:8px; }
  .sx-demo-foot p { font-size:8px; text-align:start; max-width:none; }
}
@container (max-width:310px) {
  .sx-demo-stage { padding:10px; gap:10px; }
  .sx-demo-panel { padding:10px; }
  .sx-demo-product { gap:8px; min-height:108px; }
  .sx-demo-product-visual, .sx-demo-product-visual img { height:108px; }
  .sx-demo-product h3 { font-size:15px; }
  .sx-demo-store-row { gap:5px; }
  .sx-demo-store-no { width:17px; font-size:8px; }
  .sx-demo-store-name strong { font-size:10px; }
  .sx-demo-row-price { font-size:12px; }
  .sx-demo-store-name small { font-size:8px; }
  .sx-demo-best-mark { width:12px; flex-basis:12px; }
  .sx-demo-best-mark .sx-demo-confirm-v { width:12px; height:12px; }
}
@media (prefers-reduced-motion:reduce) {
  .sx-demo *, .sx-demo *::before, .sx-demo *::after { animation:none!important; transition:none!important; }
  .sx-demo-panel, .sx-demo-product-visual img { transform:none!important; }
}
[data-motion=paused] .sx-demo *, [data-motion=paused] .sx-demo *::before, [data-motion=paused] .sx-demo *::after { animation:none!important; transition:none!important; }
[data-motion=paused] .sx-demo-panel, [data-motion=paused] .sx-demo-product-visual img { transform:none!important; }