/* Shared public purchase-UI compatibility layer.
 * This file is the single source used by normal article rendering and the size-diagnosis iframe.
 * Keep common purchase UI refinements here so both surfaces stay in sync.
 */
/* Keep the purchase-footer helpful prompt right aligned without changing
   assets/css/front.css, which is frozen into the running experiment hash. */
.snilabo-price-compare .spc-helpful {
  text-align:right;
}
.snilabo-price-compare .spc-helpful [data-helpful-choices],
.snilabo-price-compare .spc-helpful [data-helpful-thanks] {
  justify-content:flex-end;
}
/* Shared supplemental action: keep every sticky-bar candidate visually secondary
   to the primary shop CTA without changing the frozen Design Box renderer. */
.spc-sticky-bar .spc-sticky-compare:not(.is-loading):not(.is-unavailable) {
  background:#EAECED;
  color:#444A50;
}
/* v0.13.210: return the ordinary article shop rows to content-driven height.
   Amazon/Rakuten no longer borrow the two-line official-shop minimum height;
   every ordinary/control row gets equal 5px vertical padding and lets its own
   one-line/two-line content determine the final height. Experimental challenger
   purchase rows are excluded from this new override, so their v0.13.209 rendering
   is left untouched. */
.snilabo-price-compare[data-spc-mode="normal"] .spc-price-row:not(.spc-ab-purchase),
.snilabo-price-compare[data-spc-mode="normal"] .spc-price-row.spc-ab-control-purchase,
.snilabo-price-compare[data-spc-mode="diagnosis"] .spc-price-row:not(.spc-ab-purchase),
.snilabo-price-compare[data-spc-mode="diagnosis"] .spc-price-row.spc-ab-control-purchase {
  padding-top:5px;
  padding-bottom:5px;
}
.snilabo-price-compare[data-spc-mode="normal"][data-spc-flow-variant="A"] .spc-price-row.amazon:not(.spc-ab-purchase),
.snilabo-price-compare[data-spc-mode="normal"][data-spc-flow-variant="A"] .spc-price-row.rakuten:not(.spc-ab-purchase),
.snilabo-price-compare[data-spc-mode="normal"][data-spc-flow-variant="A"] .spc-price-row.amazon.spc-ab-control-purchase,
.snilabo-price-compare[data-spc-mode="normal"][data-spc-flow-variant="A"] .spc-price-row.rakuten.spc-ab-control-purchase,
.snilabo-price-compare[data-spc-mode="diagnosis"][data-spc-flow-variant="A"] .spc-price-row.amazon:not(.spc-ab-purchase),
.snilabo-price-compare[data-spc-mode="diagnosis"][data-spc-flow-variant="A"] .spc-price-row.rakuten:not(.spc-ab-purchase),
.snilabo-price-compare[data-spc-mode="diagnosis"][data-spc-flow-variant="A"] .spc-price-row.amazon.spc-ab-control-purchase,
.snilabo-price-compare[data-spc-mode="diagnosis"][data-spc-flow-variant="A"] .spc-price-row.rakuten.spc-ab-control-purchase {
  min-height:0;
}
/* Keep the previous removal of the historical 1px shop-label nudge. */
.snilabo-price-compare .spc-price-row .spc-shop {
  top:auto;
}
/* v0.13.211: standardize every public-facing right-direction UI indicator on
   the adopted rounded Chevron SVG geometry. The frozen renderer still emits its
   historical glyphs, but these renderer-hash-exempt rules suppress the font
   glyph and draw the same SVG path with currentColor instead. Contexts keep
   only their appropriate size; the Chevron shape itself is identical. */
.snilabo-price-compare .spc-go-icon,
.snilabo-price-compare .spc-campaign-go,
.snilabo-price-compare .spc-ab-promo-main > i,
.snilabo-price-compare .spc-ab-button-copy > span[aria-hidden="true"],
.snilabo-price-compare .spc-ab-visit > span[aria-hidden="true"],
.snilabo-price-compare .spc-gallery-nav > span[aria-hidden="true"],
.spc-sticky-bar .spc-sticky-arrow,
.snilabo-price-compare .spc-ui-rounded-chevron {
  font-size:0!important;
  line-height:0!important;
}
.snilabo-price-compare .spc-campaign-go,
.snilabo-price-compare .spc-ab-promo-main > i,
.snilabo-price-compare .spc-ab-button-copy > span[aria-hidden="true"],
.snilabo-price-compare .spc-ab-visit > span[aria-hidden="true"],
.snilabo-price-compare .spc-gallery-nav > span[aria-hidden="true"],
.snilabo-price-compare .spc-ui-rounded-chevron {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  vertical-align:middle;
}
.snilabo-price-compare .spc-go-icon::before,
.snilabo-price-compare .spc-campaign-go::before,
.snilabo-price-compare .spc-ab-promo-main > i::before,
.snilabo-price-compare .spc-ab-button-copy > span[aria-hidden="true"]::before,
.snilabo-price-compare .spc-ab-visit > span[aria-hidden="true"]::before,
.snilabo-price-compare .spc-gallery-nav > span[aria-hidden="true"]::before,
.spc-sticky-bar .spc-sticky-arrow::before,
.snilabo-price-compare .spc-ui-rounded-chevron::before {
  content:"";
  display:block;
  width:var(--spc-rounded-chevron-size,16px);
  height:var(--spc-rounded-chevron-size,16px);
  flex:0 0 var(--spc-rounded-chevron-size,16px);
  background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22%3E%3Cpath d=%22M5.75 3.5L10.25 8l-4.5 4.5%22 fill=%22none%22 stroke=%22%23fff%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22%3E%3Cpath d=%22M5.75 3.5L10.25 8l-4.5 4.5%22 fill=%22none%22 stroke=%22%23fff%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E") center/contain no-repeat;
  pointer-events:none;
}
.snilabo-price-compare .spc-go-icon { --spc-rounded-chevron-size:16px; }
.snilabo-price-compare .spc-campaign-go,
.snilabo-price-compare .spc-ab-promo-main > i { --spc-rounded-chevron-size:14px; }
.snilabo-price-compare .spc-ab-button-copy > span[aria-hidden="true"] { --spc-rounded-chevron-size:16px; }
.snilabo-price-compare .spc-ab-visit > span[aria-hidden="true"] { --spc-rounded-chevron-size:14px; }
.spc-sticky-bar .spc-sticky-arrow { --spc-rounded-chevron-size:16px; }
.snilabo-price-compare .spc-gallery-nav > span[aria-hidden="true"] { --spc-rounded-chevron-size:20px; }
.snilabo-price-compare .spc-gallery-prev > span[aria-hidden="true"]::before { transform:rotate(180deg); }
.snilabo-price-compare .spc-report-link.spc-report-chevron-compat {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:3px;
}
.snilabo-price-compare .spc-report-link .spc-ui-rounded-chevron {
  --spc-rounded-chevron-size:12px;
  color:inherit;
}
/* v0.13.204: keep the existing reopen control geometry, plus icon and shadow,
   but neutralize only its label/icon color so it reads less like an ad CTA. */
.spc-sticky-reopen {
  color:#555;
}
/* v0.13.203: replace the promotional-looking floating ranking tab with the
   adopted selected-color status row without touching the frozen renderer files.
   The original 27px overhang + 8px top padding is traded for one 34px in-flow
   row, so the shared sticky bar keeps essentially the same viewport footprint. */
.spc-sticky-bar .spc-sticky-inner {
  padding-top:0;
}
.spc-sticky-bar .spc-sticky-ranking-tab {
  position:relative;
  left:auto;
  top:auto;
  z-index:6;
  display:flex;
  align-items:center;
  width:auto;
  max-width:none;
  height:34px;
  min-height:34px;
  margin:0 -12px;
  padding:0 42px 0 35px;
  border:0;
  border-bottom:1px solid #edf0f2;
  border-radius:0;
  background:transparent;
  color:#333;
  box-shadow:none;
  font-size:10.5px;
  font-weight:800;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  pointer-events:none;
}
.spc-sticky-bar .spc-sticky-ranking-tab::before {
  content:"";
  position:absolute;
  left:12px;
  top:50%;
  display:block;
  width:15px;
  height:15px;
  border:2px solid #fff;
  border-radius:50%;
  background:#2b6cb0 url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 10 10%22%3E%3Cpolyline points=%221.8%2C5.3%204.1%2C7.6%208.3%2C2.8%22 fill=%22none%22 stroke=%22%23fff%22 stroke-width=%221.8%22 stroke-linecap=%22square%22 stroke-linejoin=%22miter%22/%3E%3C/svg%3E") center/10px 10px no-repeat;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
  pointer-events:none;
  transform:translateY(-50%);
}
.spc-sticky-bar .spc-sticky-ranking-tab::after {
  display:none;
}
.spc-sticky-bar .spc-sticky-selected-copy-compat {
  display:block;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.spc-sticky-bar .spc-sticky-selected-sku-compat {
  margin-left:5px;
  color:#8a949c;
  font-size:8.5px;
  font-weight:700;
}
.spc-sticky-bar .spc-sticky-selected-sku-compat[hidden] {
  display:none!important;
}
/* v0.13.208: keep the adopted 25px half-out close-button geometry, but
   render the X as a centered SVG instead of a font glyph. This removes the
   font-baseline drift seen on Android without changing the button footprint. */
.spc-sticky-bar .spc-sticky-close {
  top:-12.5px;
  right:8px;
  z-index:8;
  display:flex;
  align-items:center;
  justify-content:center;
  width:25px;
  height:25px;
  padding:0;
  border:1px solid #dfe3e7;
  border-radius:50%;
  background:#fff;
  color:transparent;
  box-shadow:0 1px 4px rgba(0,0,0,.12);
  font-size:0;
  font-weight:400;
  line-height:0;
  text-shadow:none;
}
.spc-sticky-bar .spc-sticky-close::before {
  content:"";
  display:block;
  flex:0 0 15px;
  width:15px;
  height:15px;
  background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22%3E%3Cpath d=%22M3 3L13 13M13 3L3 13%22 fill=%22none%22 stroke=%22%237a848e%22 stroke-width=%221.65%22 stroke-linecap=%22round%22/%3E%3C/svg%3E") center/15px 15px no-repeat;
  pointer-events:none;
}
@media (max-width:390px) {
  .spc-sticky-bar[data-spc-flow-variant="A"] .spc-sticky-actions:has(.spc-sticky-size:not(:disabled)) {
    grid-template-columns:80px minmax(0,1fr);
  }
  .spc-sticky-bar[data-spc-flow-variant="A"] .spc-sticky-actions:has(.spc-sticky-size:not(:disabled)) .spc-sticky-purchase-group:not(.is-single-shop) {
    grid-template-columns:84px minmax(0,1fr);
  }
  .spc-sticky-bar[data-spc-flow-variant="A"] .spc-sticky-actions:has(.spc-sticky-size:not(:disabled)) .spc-sticky-size {
    white-space:nowrap;
  }
}