/* Two-color focus and persistent phone selection marks, using the approved theme tokens. */
html[data-skin] body[data-typography="madge"] :is(button,a,input,select,textarea):focus-visible {
  outline:3px solid var(--skin-ink);
  outline-offset:3px;
  box-shadow:0 0 0 3px var(--skin-paper);
}
@media(max-width:760px) {
  html[data-skin] body[data-typography="madge"] .shop-first .product-list[data-compact-gallery=true] .mobile-product-select[aria-pressed=true] {
    box-shadow:inset 0 0 0 2px var(--skin-ink),inset 0 0 0 4px var(--skin-paper);
  }
  /* Selection has a persistent mark; focus has an additional inset ring.
     The illustration container clips outside outlines, hence the inset treatment. */
  html[data-skin] body[data-typography="madge"] .shop-first .product-list[data-compact-gallery=true] .mobile-product-select[aria-pressed=true]::after {
    content:"✓";
    position:absolute;
    right:4px;
    bottom:4px;
    display:grid;
    place-items:center;
    width:20px;
    height:20px;
    border:1px solid var(--skin-paper);
    background:var(--skin-ink);
    color:var(--skin-paper);
    font:700 16px/1 var(--font-reading);
    pointer-events:none;
  }
  html[data-skin] body[data-typography="madge"] .shop-first .product-list[data-compact-gallery=true] .mobile-product-select:focus-visible {
    outline:3px solid var(--skin-ink);
    outline-offset:-3px;
    box-shadow:inset 0 0 0 6px var(--skin-paper);
  }
}
@media(forced-colors:active) {
  html[data-skin] body[data-typography="madge"] :is(button,a,input,select,textarea):focus-visible {
    outline-color:Highlight;
  }
  html[data-skin] body[data-typography="madge"] .shop-first .product-list[data-compact-gallery=true] .mobile-product-select[aria-pressed=true]::after {
    background:Highlight;
    color:HighlightText;
    border-color:CanvasText;
  }
}

/* Keep unavailable and saving controls readable. The native disabled attribute
   still prevents activation; a quiet paper fill distinguishes them from CTAs. */
html[data-skin] body[data-typography="madge"] :is(.checkout-button,.notify-submit,.bottle-notify,.bottle-availability-bar button,.manager-page button):disabled {
  opacity:1;
  background:var(--skin-paper-alt);
  color:var(--skin-ink);
  border:1px solid var(--skin-line);
  box-shadow:none;
}
@media(forced-colors:active) {
  html[data-skin] body[data-typography="madge"] :is(.checkout-button,.notify-submit,.bottle-notify,.bottle-availability-bar button,.manager-page button):disabled {
    background:Canvas;
    color:GrayText;
    border-color:GrayText;
  }
}