/* select66 — site-wide Samsung dotted selection ring (LIVE shop 50 /en/)
   Mirrors cards64 .c64-selected::after / Samsung .co73-feature-cards__link:focus:after:
   outline: 2px dotted #000 + box-shadow: 0 0 0 2px #fff (white gap).
   Applies on focus / active / selected — NEVER hover-only.
   Shop 50 /en/ only when deployed. Does not edit tgstudio.
   British spelling in comments. */

:root {
  --s66-dot: 2px dotted #000;
  --s66-gap: 0 0 0 2px #fff;
  --s66-inset: 3px;
  --s66-radius-card: 10px; /* cards64 12px − ~2 */
  --s66-radius-field: 9px; /* fields59 12px − 3 */
  --s66-radius-search: 9px;
}

/* Shared inset ring (host must be position:relative) */
html.s66 .s66-ring-host,
body.s66-proto .s66-ring-host {
  position: relative;
}

html.s66 .s66-ring-host.s66-on::after,
body.s66-proto .s66-ring-host.s66-on::after {
  content: "";
  position: absolute;
  top: var(--s66-inset);
  right: var(--s66-inset);
  bottom: var(--s66-inset);
  left: var(--s66-inset);
  border-radius: inherit;
  outline: var(--s66-dot);
  box-shadow: var(--s66-gap);
  pointer-events: none;
  z-index: 500;
}

/* ===== SEARCH (.ma .ma-s) — focus-within =====
   Keep fields59 / menu metrics: height 46px, 1.5px #111, radius 12px.
   overflow stays hidden; ring is inset so it is not clipped badly. */
html.s66 .ma .ma-s,
body.s66-proto .ma .ma-s {
  position: relative;
  z-index: 1;
}

html.s66 .ma .ma-s:focus-within,
body.s66-proto .ma .ma-s:focus-within,
html.s66 .ma .ma-s.s66-force,
body.s66-proto .ma .ma-s.s66-force {
  z-index: 3;
}

html.s66 .ma .ma-s:focus-within::after,
body.s66-proto .ma .ma-s:focus-within::after,
html.s66 .ma .ma-s.s66-force::after,
body.s66-proto .ma .ma-s.s66-force::after {
  content: "";
  position: absolute;
  top: var(--s66-inset);
  right: var(--s66-inset);
  bottom: var(--s66-inset);
  left: var(--s66-inset);
  border-radius: var(--s66-radius-search);
  outline: var(--s66-dot);
  box-shadow: var(--s66-gap);
  pointer-events: none;
  z-index: 500;
}

/* Kill native focus glow on the inner search input — ring is on the form */
html.s66 .ma .ma-s input[name="s"]:focus,
html.s66 .ma .ma-s input[name="s"]:focus-visible,
body.s66-proto .ma .ma-s input[name="s"]:focus,
body.s66-proto .ma .ma-s input[name="s"]:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* ===== FORM FIELDS (.tg-f + #tgc / .tgq / .tgbq) — focus-within =====
   Do not change height 46px / padding / border from fields59.
   Replace soft grey focus glow with dotted ring on the wrapper. */
html.s66 .tg-f:focus-within,
body.s66-proto .tg-f:focus-within,
html.s66 .tg-f.s66-force,
body.s66-proto .tg-f.s66-force,
html.s66 #tgc .f:focus-within,
html.s66 .tgq .f:focus-within,
html.s66 .tgbq .f:focus-within,
body.s66-proto #tgc .f:focus-within {
  z-index: 2;
}

html.s66 .tg-f:focus-within::after,
body.s66-proto .tg-f:focus-within::after,
html.s66 .tg-f.s66-force::after,
body.s66-proto .tg-f.s66-force::after,
html.s66 #tgc .f:focus-within::after,
html.s66 .tgq .f:focus-within::after,
html.s66 .tgbq .f:focus-within::after,
body.s66-proto #tgc .f:focus-within::after {
  content: "";
  position: absolute;
  top: var(--s66-inset);
  right: var(--s66-inset);
  bottom: var(--s66-inset);
  left: var(--s66-inset);
  border-radius: var(--s66-radius-field);
  outline: var(--s66-dot);
  box-shadow: var(--s66-gap);
  pointer-events: none;
  z-index: 500;
}

html.s66 .tg-f input:focus,
html.s66 .tg-f select:focus,
html.s66 .tg-f textarea:focus,
html.s66 .tg-f .form-control:focus,
html.s66 .tg-f .elementor-field-textual:focus,
html.s66 #tgc .f input:focus,
html.s66 #tgc .f select:focus,
html.s66 #tgc .f textarea:focus,
html.s66 .tgq .f input:focus,
html.s66 .tgbq .f input:focus,
body.s66-proto .tg-f input:focus,
body.s66-proto .tg-f select:focus,
body.s66-proto .tg-f textarea:focus {
  border-color: #111 !important;
  box-shadow: none !important; /* ring lives on wrapper */
  outline: none !important;
  background: #fff !important;
}

/* ===== BUTTONS / PILLS — :active, :focus-visible, selected =====
   Outer ring (negative inset) so black filled pills stay readable.
   Does not change pills65 black fill / white outline system. */
html.s66 .tg-pill__btn,
html.s66 .lc-pills button,
html.s66 .tg-btn,
html.s66 .lc-cta,
html.s66 a.lc-cta,
html.s66 .tg-acc a.tg-q,
html.s66 button.btn,
html.s66 a.btn,
html.s66 .btn-primary,
html.s66 .btn-secondary,
html.s66 input[type="submit"],
html.s66 input[type="button"],
body.s66-proto .tg-pill__btn,
body.s66-proto .lc-pills button,
body.s66-proto .tg-btn,
body.s66-proto .demo-btn {
  position: relative;
}

/* Pressed / keyboard focus / selected — outer dotted ring */
html.s66 .tg-pill__btn:active::after,
html.s66 .tg-pill__btn:focus-visible::after,
html.s66 .tg-pill__btn[aria-pressed="true"]::after,
html.s66 .lc-pills button:active::after,
html.s66 .lc-pills button:focus-visible::after,
html.s66 .lc-pills button[aria-pressed="true"]::after,
html.s66 .lc-pills button.is-active::after,
html.s66 .lc-pills button.active::after,
html.s66 .tg-btn:active::after,
html.s66 .tg-btn:focus-visible::after,
html.s66 .tg-btn[aria-pressed="true"]::after,
html.s66 .tg-btn.is-active::after,
html.s66 .tg-btn.active::after,
html.s66 .lc-cta:active::after,
html.s66 .lc-cta:focus-visible::after,
html.s66 a.lc-cta:active::after,
html.s66 a.lc-cta:focus-visible::after,
html.s66 .tg-acc a.tg-q:active::after,
html.s66 .tg-acc a.tg-q:focus-visible::after,
html.s66 .tg-acc a.tg-q[aria-current="page"]::after,
html.s66 .tg-acc a.tg-q.is-active::after,
html.s66 .tg-acc a.tg-q.active::after,
html.s66 button.btn:active::after,
html.s66 button.btn:focus-visible::after,
html.s66 a.btn:active::after,
html.s66 a.btn:focus-visible::after,
html.s66 .btn-primary:active::after,
html.s66 .btn-primary:focus-visible::after,
html.s66 .btn-secondary:active::after,
html.s66 .btn-secondary:focus-visible::after,
html.s66 input[type="submit"]:active::after,
html.s66 input[type="submit"]:focus-visible::after,
html.s66 input[type="button"]:active::after,
html.s66 input[type="button"]:focus-visible::after,
body.s66-proto .tg-pill__btn:active::after,
body.s66-proto .tg-pill__btn:focus-visible::after,
body.s66-proto .tg-pill__btn[aria-pressed="true"]::after,
body.s66-proto .tg-pill__btn.s66-force::after,
body.s66-proto .lc-pills button:active::after,
body.s66-proto .lc-pills button[aria-pressed="true"]::after,
body.s66-proto .lc-pills button.s66-force::after,
body.s66-proto .tg-btn:active::after,
body.s66-proto .tg-btn[aria-pressed="true"]::after,
body.s66-proto .tg-btn.s66-force::after,
body.s66-proto .demo-btn:active::after,
body.s66-proto .demo-btn.s66-force::after,
body.s66-proto .demo-btn[aria-pressed="true"]::after,
body.s66-proto .lc-cta.s66-force::after,
html.s66 .lc-cta.s66-force::after,
html.s66 a.lc-cta.s66-force::after {
  content: "";
  position: absolute;
  top: -5px;
  right: -5px;
  bottom: -5px;
  left: -5px;
  border-radius: inherit;
  outline: var(--s66-dot);
  box-shadow: var(--s66-gap);
  pointer-events: none;
  z-index: 500;
}

/* Override pill63 red focus-visible so site ring is consistent */
html.s66 .ma .tg-pill__btn:focus-visible,
body.s66-proto .ma .tg-pill__btn:focus-visible {
  outline: none;
  outline-offset: 0;
}

/* ===== PRODUCT CARDS — keep cards64 behaviour (selected only, not hover) =====
   Reaffirm ring so select66 load order cannot wipe it; identical tokens. */
html.s66 .tg5 .pc.c64-selected,
html.s66 .ce-product-grid .elementor-362170150.c64-selected,
html.s66 .ce-product-grid > [data-elementor-type="product-miniature"].c64-selected,
body.s66-proto .pc.c64-selected,
body.s66-proto .c64-ce-card.c64-selected {
  z-index: 2;
}

html.s66 .tg5 .pc.c64-selected::after,
html.s66 .ce-product-grid .elementor-362170150.c64-selected::after,
html.s66 .ce-product-grid > [data-elementor-type="product-miniature"].c64-selected::after,
body.s66-proto .pc.c64-selected::after,
body.s66-proto .c64-ce-card.c64-selected::after {
  content: "";
  position: absolute;
  top: 3px;
  right: 3px;
  bottom: 3px;
  left: 3px;
  border-radius: var(--s66-radius-card);
  outline: var(--s66-dot);
  box-shadow: var(--s66-gap);
  pointer-events: none;
  z-index: 500;
}

/* Explicitly no hover ring (owner: select only) */
html.s66 .tg5 .pc:hover:not(.c64-selected)::after,
html.s66 .ce-product-grid .elementor-362170150:hover:not(.c64-selected)::after,
body.s66-proto .pc:hover:not(.c64-selected)::after,
html.s66 .tg-btn:hover:not(:active):not([aria-pressed="true"]):not(.is-active):not(.active):not(:focus-visible)::after,
html.s66 .lc-pills button:hover:not(:active):not([aria-pressed="true"]):not(.is-active):not(.active):not(:focus-visible)::after {
  content: none;
  display: none;
}

/* ===== EXCLUSIONS — do not restyle Tees Studio / qty / footer chrome ===== */
html.s66 .tees-studio *:focus,
html.s66 .tees-studio *:focus-visible,
html.s66 .tees-studio *:active,
html.s66 [class*="tees-studio"] *:focus,
html.s66 [class*="tg-studio"] *:focus,
html.s66 .product-quantity input:focus,
html.s66 .bootstrap-touchspin input:focus,
html.s66 input[type="checkbox"]:focus,
html.s66 input[type="radio"]:focus,
html.s66 input[type="range"]:focus,
html.s66 input[type="file"]:focus,
html.s66 input[type="color"]:focus,
html.s66 .ma .ma-bn *:focus-visible::after,
html.s66 footer *:focus-visible::after,
html.s66 .foot_white *:focus-visible::after {
  /* leave studio / qty / footer alone — no select66 ::after */
}

html.s66 .tees-studio button::after,
html.s66 .tees-studio a::after,
html.s66 [class*="tees-studio"] button::after,
html.s66 [class*="tg-studio"] button::after,
html.s66 .ma .ma-bn a::after,
html.s66 .ma .ma-bn button::after {
  content: none !important;
  display: none !important;
}