/* One shared keyboard focus treatment, including portalled dialogs.
   Active selections keep their own filled state; focus adds an underline or marker. */
:root :focus {
  outline: none !important;
  box-shadow: none !important;
}

:root :is(.checkout-choice, .coffee-finder__choice, .coffee-finder__taste, .catalog-facet):focus-within {
  outline: none !important;
}

:root :is(.search-overlay__form, .catalog-filter-dialog__search, .catalog-header-search, .marketplace-search):focus-within {
  outline: none !important;
  box-shadow: none !important;
}

:root :is(a[href], button, summary, [role="button"], [role="tab"]):focus-visible {
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .22em;
}

/* Flex/grid children need their own decoration for a reliable visible underline. */
:root :is(a[href], button, summary, [role="button"], [role="tab"]):focus-visible > :is(span, strong, b) {
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .22em;
}

:root :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="hidden"]), textarea, select, [contenteditable="true"]):focus-visible {
  background-color: var(--bottega-surface-selected) !important;
  border-bottom-color: var(--bottega-accent-hover) !important;
  caret-color: var(--bottega-accent-hover);
}

:root label:has(> :is(input[type="checkbox"], input[type="radio"]):focus-visible) {
  text-decoration: underline 2px;
  text-underline-offset: .22em;
}

:root :is(button, a)[aria-label]:has(> .icon):not(:has(> span, > strong)):focus-visible {
  background-color: var(--bottega-surface-selected) !important;
  color: var(--bottega-accent-hover) !important;
}

:root .bottega-brand:focus-visible { border-radius: 12px; background: var(--bottega-surface-selected); opacity: 1; }
:root :is(a[href], button)[aria-label]:has(> img):focus-visible { background-color: var(--bottega-surface-selected); }

/* Image-only links and the stock indicator have no text to underline. */
:root :is(.bottega-product__media, .bottega-product__stock-trigger):focus-visible { position: relative; }
:root .bottega-product__media:focus-visible { background-color: var(--bottega-surface-selected); }
:root :is(.bottega-product__media, .bottega-product__stock-trigger):focus-visible::after {
  content: "";
  position: absolute;
  z-index: 3;
  right: 12px;
  bottom: 6px;
  left: 12px;
  height: 3px;
  border-radius: 999px;
  background: var(--bottega-accent-hover);
  pointer-events: none;
}

:root input[type="range"]:focus-visible::-webkit-slider-thumb { outline: none !important; box-shadow: none !important; background: var(--bottega-text); transform: scale(1.15); }
:root input[type="range"]:focus-visible::-moz-range-thumb { outline: none !important; box-shadow: none !important; background: var(--bottega-text); transform: scale(1.15); }

/* The horizontally scrollable comparison table is a keyboard target too. */
:root .compare-table-wrap:focus-visible { border-bottom-color: var(--bottega-accent-hover); border-bottom-width: 3px; }

/* The search form already marks focus with its surrounding border. */
:root .search-overlay .search-overlay__form input:focus-visible {
  background-color: transparent !important;
}