/* Public-only link roles. Loaded after page styles; no OMS bundle import. */
body.public-site {
  --ht-link-highlight:var(--ht-color-bg-selected);
  --ht-link-dark-highlight:rgb(255 255 255 / 14%);
  --ht-link-transition:color 160ms, background-color 160ms, border-color 160ms, box-shadow 160ms;
}
body.public-site a,
body.public-site a :is(span,strong,small,svg,use,i),
body.public-site a::before,
body.public-site a::after { text-decoration:none; }
body.public-site a { transition:var(--ht-link-transition); }
body.public-site :is(a,button,summary):focus-visible {
  outline:3px solid var(--ht-color-primary); outline-offset:3px;
  box-shadow:0 0 0 2px var(--ht-color-bg);
}

/* Standalone actions and navigation reserve their hit area before interaction. */
body.public-site .public-link-action {
  display:inline-flex; align-items:center; min-height:44px; min-width:44px; max-width:100%;
  padding:6px 8px; border-radius:var(--ht-radius-control); font-weight:600;
  white-space:normal; overflow-wrap:anywhere;
}
body.public-site :is(.nav a:not(.mobile-nav-only),.topbar a,.footer a:not(.brand),.sg-header nav a,.sg-footer a,
  .public-breadcrumb a,.sp-breadcrumb a,.hp-breadcrumb a,.cp-breadcrumb a,.sg-breadcrumb a,.sg-toc a) {
  display:inline-flex; align-items:center; min-height:44px; min-width:44px;
  padding:6px 8px; border-radius:var(--ht-radius-control);
}
body.public-site :is(.nav a,.sg-header nav a) { min-height:48px; }
body.public-site :is(.nav a.nav-link-active,.nav a[aria-current=page],.sg-toc a[aria-current],.sg-thickness-link[aria-current=page]) {
  color:var(--ht-color-primary-active); background:var(--ht-link-highlight); font-weight:600;
}
body.public-site :is(.nav a,.public-breadcrumb a,.sp-breadcrumb a,.hp-breadcrumb a,.cp-breadcrumb a,.sg-breadcrumb a,.sg-toc a):active {
  color:var(--ht-color-primary-active); background:var(--ht-link-highlight);
}

/* Prose stays inline and wraps naturally. The marker is a permanent non-color cue. */
body.public-site a.public-link-inline {
  display:inline; min-height:0; min-width:0; padding:0; margin:0; white-space:normal;
  color:var(--ht-color-primary); font-weight:600; border-radius:3px;
  overflow-wrap:anywhere; box-decoration-break:clone; -webkit-box-decoration-break:clone;
}
body.public-site .public-link-marker {
  display:inline-block; width:.85em; height:.85em; margin-inline-start:.18em;
  background:currentColor; vertical-align:-.08em;
  mask:url("/assets/public/link-marker-e7d14634.svg") center / contain no-repeat;
}
body.public-site a.public-link-inline:active { color:var(--ht-color-primary-active); background:var(--ht-link-highlight); }

/* Dark surfaces use the same roles with light contrast. */
body.public-site :is(.topbar,.footer,.sg-top,.sg-footer) a { color:var(--ht-color-bg); }
body.public-site :is(.topbar,.footer,.sg-top,.sg-footer,.sg-contact) :is(a,button):focus-visible {
  outline-color:var(--ht-color-accent); box-shadow:0 0 0 2px var(--ht-color-ink);
}
body.public-site :is(.topbar,.footer,.sg-top,.sg-footer) a:not(.brand):not(.sg-brand):active,
body.public-site .topbar a[aria-current=page] { background:var(--ht-link-dark-highlight); color:var(--ht-color-bg); }
body.public-site .footer a.nav-link-active { background:var(--ht-link-dark-highlight); font-weight:600; }
body.public-site .social-links a { min-height:48px; border-color:var(--ht-color-bg); }

/* Whole-card feedback only for cards that contain real anchors. */
body.public-site :is(.product-card,.support-card,.application-grid article,.guide-product,.guide-accessories,
  .contact-support-card,.sg-product-card,.sg-certificate,.ap-selection-card,.ap-fastener-card):has(a) {
  transition:var(--ht-link-transition);
}
body.public-site :is(.product-card,.support-card,.application-grid article,.guide-product,.guide-accessories,
  .contact-support-card,.sg-product-card,.sg-certificate,.ap-selection-card,.ap-fastener-card):has(a):focus-within {
  background-color:var(--ht-link-highlight); box-shadow:inset 0 0 0 2px var(--ht-color-primary);
}
body.public-site a:is(.guide-topic-card,.pol-quick-link):focus-visible { background-color:var(--ht-link-highlight); }
body.public-site a:is(.brand,.sg-brand) { background:transparent; }
body.public-site .public-skip:focus { z-index:1000; background:var(--ht-color-bg); outline:3px solid var(--ht-color-primary); outline-offset:3px; }

body.public-site :is(.public-link-action,
  .nav a,.sg-header nav a,.public-breadcrumb a,.sp-breadcrumb a,.hp-breadcrumb a,.cp-breadcrumb a,.sg-breadcrumb a,.sg-toc a):is(:active,:focus-visible) {
  background-color:var(--ht-link-highlight); color:var(--ht-color-primary-active);
}
@media (hover:hover) and (pointer:fine) {
  body.public-site :is(.public-link-action,
    .nav a,.sg-header nav a,.public-breadcrumb a,.sp-breadcrumb a,.hp-breadcrumb a,.cp-breadcrumb a,.sg-breadcrumb a,.sg-toc a):hover {
    background-color:var(--ht-link-highlight); color:var(--ht-color-primary-active);
  }
  body.public-site a.public-link-inline:hover { background:var(--ht-link-highlight); color:var(--ht-color-primary-active); }
  body.public-site :is(.topbar,.footer,.sg-top,.sg-footer) a:not(.brand):not(.sg-brand):hover {
    background:var(--ht-link-dark-highlight); color:var(--ht-color-bg);
  }
  body.public-site :is(.button,.sg-button,.pol-button,.qo-submit,.qo-information-button,.qo-group-button,.qo-process-button,.qo-faq-button):hover {
    filter:none;
  }
  body.public-site :is(.product-card,.support-card,.application-grid article,.guide-product,.guide-accessories,
    .contact-support-card,.sg-product-card,.sg-certificate,.ap-selection-card,.ap-fastener-card):has(a):hover {
    background-color:var(--ht-link-highlight); box-shadow:inset 0 0 0 2px var(--ht-color-primary);
  }
  body.public-site :is(.product-card,.support-card,.application-grid article,.guide-product,.guide-accessories,
    .contact-support-card,.sg-product-card,.sg-certificate,.ap-selection-card,.ap-fastener-card) a:not(.button):not(.sg-button):hover {
    background:transparent;
  }
  body.public-site a:is(.brand,.sg-brand):hover { background:transparent; }
}
@media (prefers-reduced-motion:reduce) {
  body.public-site a,
  body.public-site :is(.product-card,.support-card,.application-grid article,.guide-product,.guide-accessories,
    .contact-support-card,.sg-product-card,.sg-certificate,.ap-selection-card,.ap-fastener-card) { transition:none; }
}
/* The containing card owns feedback, including keyboard/touch interaction. */
body.public-site :is(.product-card,.support-card,.application-grid article,.guide-product,.guide-accessories,
  .contact-support-card,.sg-product-card,.sg-certificate,.ap-selection-card,.ap-fastener-card) a:not(.button):not(.sg-button):is(:active,:focus-visible) {
  background:transparent;
}
/* Policy navigation keeps its existing section rules and separator. */
body.public-site #ht-policies-page main :is(.pol-side-phone,.pol-side-zalo) {
  min-height:44px; padding:6px 8px; border-radius:var(--ht-radius-control); font-weight:600;
}
body.public-site #ht-policies-page main .pol-toc > a[aria-current=location] {
  background:var(--ht-link-highlight); color:var(--ht-color-primary-active); font-weight:600;
}
@media (hover:hover) and (pointer:fine) {
  body.public-site #ht-policies-page main :is(.pol-toc > a,.pol-side-phone,.pol-side-zalo):hover {
    background-color:var(--ht-link-highlight); color:var(--ht-color-primary-active);
  }
}
body.public-site .footer a { gap:.25em; }
/* Page IDs remain local layout hooks; these roles share the interaction contract. */
body.public-site #ht-policies-page main :is(.pol-toc > a,.pol-side-phone,.pol-side-zalo):is(:active,:focus-visible) {
  background-color:var(--ht-link-highlight); color:var(--ht-color-primary-active);
}

body.public-site .nav .product-submenu a { display:flex; align-items:stretch; }
/* Reserve outline clearance inside horizontal scrollports without changing slide pitch. */
body.public-site .sg-carousel-slide a { margin:6px; }
body.public-site .sg-carousel-thumbnails { padding-inline:6px; }
body.public-site :is(.sg-certificate,.sg-gallery figure) { overflow:visible; }
body.public-site :is(.sg-certificate > a,.sg-gallery img) { border-radius:var(--ht-radius-card); }
@media (hover:hover) and (pointer:fine) {
  body.public-site :is(.sg-gallery figure,.sg-documents figure):has(a):hover,
  body.public-site .sg-carousel-slide a:hover { box-shadow:inset 0 0 0 2px var(--ht-color-primary); }
}
body.public-site :is(.sg-gallery figure,.sg-documents figure):has(a):focus-within {
  box-shadow:inset 0 0 0 2px var(--ht-color-primary);
}
body.public-site .footer .social-links a { min-height:48px; }
/* Dark standalone actions keep their light palette after keyboard focus settles. */
body.public-site :is(.topbar,.footer,.sg-top,.sg-footer) a:not(.brand):not(.sg-brand):is(:focus-visible,:active) {
  color:var(--ht-color-bg); background:var(--ht-link-dark-highlight);
}

/* C3: state variables are consumed by variant defaults, including page-specific ones. */
body.public-site :is(.secondary,.ap-secondary,.pol-secondary,.sg-outline,.qo-group-button-outline,.public-icon-button) {
  transition:var(--ht-link-transition);
}
body.public-site .public-control-dark {
  --ht-control-hover-bg:var(--ht-link-dark-highlight);
  --ht-control-hover-text:var(--ht-color-bg);
  --ht-control-hover-border:var(--ht-color-bg);
}
@media (hover:hover) and (pointer:fine) {
  body.public-site :is(.secondary,.ap-secondary,.pol-secondary,.sg-outline,.qo-group-button-outline,.public-icon-button):not(:disabled):hover {
    --ht-control-bg:var(--ht-control-hover-bg, var(--ht-color-bg-selected));
    --ht-control-text:var(--ht-control-hover-text, var(--ht-color-ink));
    --ht-control-border:var(--ht-control-hover-border, var(--ht-color-primary));
  }
}
body.public-site :is(.secondary,.ap-secondary,.pol-secondary,.sg-outline,.qo-group-button-outline,.public-icon-button):not(:disabled):active {
  --ht-control-bg:var(--ht-color-bg-selected);
  --ht-control-text:var(--ht-color-primary-active);
  --ht-control-border:var(--ht-color-primary-active);
}
body.public-site :is(.secondary,.ap-secondary,.pol-secondary,.sg-outline,.qo-group-button-outline,.public-icon-button):disabled {
  --ht-control-bg:var(--ht-color-bg-subtle);
  --ht-control-text:var(--ht-color-text-muted);
  --ht-control-border:var(--ht-color-control-border);
  cursor:not-allowed;
}
body.public-site :is(.secondary,.ap-secondary,.pol-secondary,.sg-outline,.qo-group-button-outline,.public-icon-button)[aria-busy=true] { cursor:wait; }
body.public-site :is(.secondary,.ap-secondary,.pol-secondary,.sg-outline,.qo-group-button-outline):is(:active,:disabled) {
  background-color:var(--ht-control-bg);
  color:var(--ht-control-text);
  border-color:var(--ht-control-border);
}
body.public-site .public-icon-button:is(:active,:disabled) {
  background-color:var(--ht-control-bg);
  color:var(--ht-control-text);
  border-color:var(--ht-control-border);
  box-shadow:inset 0 0 0 1px var(--ht-control-border);
}
body.public-site .public-icon-button:focus-visible {
  box-shadow:inset 0 0 0 1px var(--ht-control-border, var(--ht-color-primary)), 0 0 0 2px var(--ht-color-bg);
}
@media (prefers-reduced-motion:reduce) {
  body.public-site :is(.secondary,.ap-secondary,.pol-secondary,.sg-outline,.qo-group-button-outline,.public-icon-button) { transition:none; }
}

@media (hover:hover) and (pointer:fine) {
body.public-site :is(.secondary,.ap-secondary,.pol-secondary,.sg-outline,.qo-group-button-outline):not(:disabled):hover {
  background-color:var(--ht-control-bg);
  color:var(--ht-control-text);
  border-color:var(--ht-control-border);
}
body.public-site .public-icon-button:not(:disabled):hover {
  background-color:var(--ht-control-bg);
  color:var(--ht-control-text);
  border-color:var(--ht-control-border);
  box-shadow:inset 0 0 0 1px var(--ht-control-border);
}
}