/* ==== FRAMES-THIN 2026-10-24 — thin frames & focus, shop-wide (all routes, linked last from head.tpl) ====
   Owner: "too thick frame, it should be thin or nothing at all".  Fine-tune only: colours/layout unchanged.
   Rule: frames and rules max 1px ink; keyboard focus = 1px ink ring, 2px offset (WCAG 2.4.7 kept);
   text fields show focus by their OWN edge turning ink (no extra box = no double frame);
   mouse focus on buttons/links shows nothing.  Item numbers = owner accept/refuse list (FRAMES-THIN-20261024.md). */

/* F1  token: shadow-based focus rings 2px -> 1px */
:root { --shadow-focus: 0 0 0 1px var(--color-ink); }

/* F2  every keyboard focus ring 2px -> 1px (offset/colour unchanged) */
:focus-visible { outline-width: 1px !important; }
/* F2  rings drawn on a proxy element (label / chip / card) */
.js-wfl-swatch-input:focus-visible + label { outline: 1px solid var(--color-ink) !important; outline-offset: 2px !important; }
.fsbar-opt-label input:focus-visible + .fsbar-checkbox,
.wfl-filter-rail__swatches .wfl-swatch input:focus-visible ~ .wfl-swatch__chip,
.wfl-filter-sidebar .fsbar-swatch input:focus-visible + .fsbar-swatch__dot,
.wfl-filter-sidebar .fsbar-search:focus-within,
.wfl-pdp .wfl-pdp__swatch:focus-visible .wfl-pdp__swatch-chip,
.wfl-pdp__size-chip-input:focus-visible + .wfl-pdp__size-chip-label,
.wfl-pdp .deliv-card:has(input[type=radio]:focus-visible),
.wfl-delivery-guide .wfl-delivery-tab:has(input:focus-visible),
.wfl-delivery-upgrade:has(input:focus-visible),
.mm3-tile--all:focus-visible .mm3-tile-im,
.input-color__input:focus-visible + .input-color__label .color { outline-width: 1px !important; }

/* F3  no ring on mouse focus (buttons, links, swatches) */
:focus:not(:focus-visible) { outline: none; }

/* F4  no double rings: drop the extra box-shadow ring where an outline/border already marks focus */
.cb-btn:focus-visible,
.form-control:focus, .form-select:focus,
.form-check-input:focus,
.wfl-account__auth-form .form-control:focus, .wfl-account__auth-form .form-select:focus,
.wfl-contact-page .contact-form .form-control:focus, .wfl-contact-page .contact-form .form-select:focus,
.wfl-aux__input:focus,
.wfl-src-card:focus-visible, .wfl-src-viewall:focus-visible { box-shadow: none !important; }
.wfl-src-card:focus-visible, .wfl-src-viewall:focus-visible { outline: 1px solid var(--color-ink); outline-offset: 2px; }

/* F5  text fields: no box around the field — its own edge turns ink (mouse and keyboard) */
.h-search-input:focus-visible,
.wfl-search__form-input:focus-visible,
input[id^="wfl-foot-email"]:focus-visible,
.fsbar-price-input:focus-visible,
.fsbar-sort__select:focus-visible,
.form-control:focus-visible, .form-select:focus-visible,
.wfl-aux__input:focus-visible,
.cms-form input:not([type=checkbox]):not([type=radio]):focus-visible,
.cms-form select:focus-visible, .cms-form textarea:focus-visible,
.wfl-checkout__sections input:not([type=checkbox]):not([type=radio]):focus-visible,
.wfl-checkout__sections select:focus-visible, .wfl-checkout__sections textarea:focus-visible { outline: none !important; }
.h-search:focus-within .h-search-input,
.h-search-input:focus,
.form-control:focus, .form-select:focus,
.fsbar-sort__select:focus,
.fsbar-num:focus-within,
.form-check-input:focus,
.wfl-aux__input:focus { border-color: var(--color-ink); }
/* fields whose edge is already ink: the bottom edge doubles (inset, no layout shift) */
.wfl-foot__newsletter-row:focus-within { box-shadow: inset 0 -1px 0 var(--color-ink); }

/* F6  section rules 2px -> 1px (PDP section heads, related products, recently viewed, home delivery band) */
.wfl-pdp .v6-rail-head h2, .wfl-pdp .v6-section > h2,
.ps-categoryproducts .wfl-related-products__title, .wfl-pdp .ps-categoryproducts .wfl-related-products__title,
.wfl-pdp .wfl-rvp__header .wfl-eyebrow,
.wfl-pdp-features-section__title,
.wfl-tabs-block--stacked .wfl-tabs-block__stack-title { border-bottom-width: 1px; }
.wfl-rvp__header .wfl-eyebrow::after { border-bottom-width: 1px; }
.wfl-recovery__section,
body#index .wfl-home__delivery-grid, body.page-index .wfl-home__delivery-grid { border-top-width: 1px; }

/* F7  active-tab underlines 2px -> 1px (login/register tabs, account filters, CMS/journal tabs, PDP tabs) */
.wfl-account__auth-tab, .wfl-account__filter, .cms-tabs button, .wfl-ji-tab, .wfl-tabs-block__tab { border-bottom-width: 1px; }
.wfl-account__auth-tab:not(.wfl-account__auth-tab--active) { border-bottom-color: var(--color-hairline); }

/* F8  PDP colour swatches: 1px edge; selected = 1px ink edge + paper gap (no 2-3px outer ring) */
.wfl-pdp__swatch-chip { border-width: 1px; }
.wfl-pdp .wfl-pdp__swatch[data-wfl-selected=true] .wfl-pdp__swatch-chip { box-shadow: inset 0 0 0 3px var(--color-paper); }

/* F9  keyboard rings that a scroll/overflow container cut off: draw the same 1px ring inside the element
   (home category strip, PDP gallery thumbs, mega-menu room rail, breadcrumb first link). */
.wfl-home__collection:focus-visible,
.wfl-pdp__gallery-thumb:focus-visible,
.mm3-rail-item:focus-visible,
.breadcrumb-link:focus-visible { outline: 1px solid var(--color-ink) !important; outline-offset: -1px !important; }
/* F9  product-rail tiles: the photo layer paints over an inset outline, so the ring is an overlay instead */
.wfl-home__product-rail .wfl-tile__link { position: relative; }
.wfl-home__product-rail .wfl-tile__link:focus-visible { outline: none !important; }
.wfl-home__product-rail .wfl-tile__link:focus-visible::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  border: 1px solid var(--color-ink);
}
/* F9  PDP gallery thumbs: the selected thumb already has a 1px ink edge, so the ring sits 2px inside it */
.wfl-pdp__gallery-thumb:focus-visible { outline-offset: -4px !important; }

/* ==== F10 (r3, owner 2026-10-24: "yes" + thinner still) — hairlines + lighter line tone ====
   --wfl-line #888480: lightest warm grey that keeps WCAG 1.4.11 3:1 for field boundaries
   (3.55:1 on paper #FAFAF8, 3.17:1 on neutral #F0EDE6, 3.71:1 on white).
   Hairline = 1px on 1x screens; on >= 2dppx screens 0.5px (= one device pixel). Chromium snaps border-/outline-width
   0.5px up to 1px, so on 2dppx the line is a 0.5px inset box-shadow on a transparent 1px border (no layout change).
   Focus stays 1px ink (19:1) everywhere; keyboard rings unchanged (1px, 2px offset). */
:root { --wfl-line: #888480; }

/* F10a  boxed form fields: hairline grey at rest, 1px ink on focus (mouse or keyboard) */
.form-control, .form-select, .fsbar-sort__select, .fsbar-num, .wfl-aux__input, .wfl-foot__newsletter-row,
.wfl-account__auth-form .form-control, .wfl-account__auth-form .form-select,
.wfl-contact-page .contact-form .form-control, .wfl-contact-page .contact-form .form-select,
.cms-form input:not([type=checkbox]):not([type=radio]), .cms-form select, .cms-form textarea,
.wfl-checkout__sections input:not([type=checkbox]):not([type=radio]), .wfl-checkout__sections select, .wfl-checkout__sections textarea {
  border-width: 1px !important; border-style: solid; border-color: var(--wfl-line) !important;
}
.form-control:focus, .form-select:focus, .fsbar-sort__select:focus, .fsbar-num:focus-within, .wfl-aux__input:focus, .wfl-foot__newsletter-row:focus-within,
.wfl-account__auth-form .form-control:focus, .wfl-account__auth-form .form-select:focus,
.wfl-contact-page .contact-form .form-control:focus, .wfl-contact-page .contact-form .form-select:focus,
.cms-form input:not([type=checkbox]):not([type=radio]):focus, .cms-form select:focus, .cms-form textarea:focus,
.wfl-checkout__sections input:not([type=checkbox]):not([type=radio]):focus, .wfl-checkout__sections select:focus, .wfl-checkout__sections textarea:focus {
  border-color: var(--color-ink) !important; box-shadow: none !important;
}

/* F10b  search results page field: underline in line grey at rest (focus keeps its terracotta underline) */
.wfl-search__form-input:not(:focus) { border-bottom-color: var(--wfl-line); }

/* F10c  decorative rules -> line grey (PDP section heads, related, recently viewed, home delivery band, recovery) */
.wfl-pdp .v6-rail-head h2, .wfl-pdp .v6-section > h2,
.ps-categoryproducts .wfl-related-products__title, .wfl-pdp .ps-categoryproducts .wfl-related-products__title,
.wfl-pdp .wfl-rvp__header .wfl-eyebrow,
.wfl-pdp-features-section__title,
.wfl-tabs-block--stacked .wfl-tabs-block__stack-title,
.wfl-rvp__header .wfl-eyebrow::after { border-bottom-color: var(--wfl-line); }
.wfl-recovery__section,
body#index .wfl-home__delivery-grid, body.page-index .wfl-home__delivery-grid { border-top-color: var(--wfl-line); }

/* F10d  tabs: inactive underline line grey; ACTIVE keeps 1px in its colour (state indicator) */
.wfl-account__auth-tab:not(.wfl-account__auth-tab--active) { border-bottom-color: var(--wfl-line); }

/* F10e  (dropped in r3 review: a grey edge on every PDP swatch read as MORE frame, not less; swatches keep F8) */

/* F10f  >= 2dppx: the same lines at 0.5px (one device pixel) */
@media (min-resolution: 2dppx) {
  .form-control, .form-select, .fsbar-sort__select, .fsbar-num, .wfl-aux__input, .wfl-foot__newsletter-row,
  .wfl-account__auth-form .form-control, .wfl-account__auth-form .form-select,
  .wfl-contact-page .contact-form .form-control, .wfl-contact-page .contact-form .form-select,
  .cms-form input:not([type=checkbox]):not([type=radio]), .cms-form select, .cms-form textarea,
  .wfl-checkout__sections input:not([type=checkbox]):not([type=radio]), .wfl-checkout__sections select, .wfl-checkout__sections textarea {
    border-color: transparent !important; box-shadow: inset 0 0 0 0.5px var(--wfl-line);
  }
  .wfl-search__form-input:not(:focus) { border-bottom-color: transparent; box-shadow: inset 0 -0.5px 0 var(--wfl-line); }
  .wfl-pdp .v6-rail-head h2, .wfl-pdp .v6-section > h2,
  .ps-categoryproducts .wfl-related-products__title, .wfl-pdp .ps-categoryproducts .wfl-related-products__title,
  .wfl-pdp .wfl-rvp__header .wfl-eyebrow,
  .wfl-pdp-features-section__title,
  .wfl-tabs-block--stacked .wfl-tabs-block__stack-title,
  .wfl-rvp__header .wfl-eyebrow::after,
  .wfl-account__auth-tab:not(.wfl-account__auth-tab--active) { border-bottom-color: transparent; box-shadow: inset 0 -0.5px 0 var(--wfl-line); }
  .wfl-recovery__section,
  body#index .wfl-home__delivery-grid, body.page-index .wfl-home__delivery-grid { border-top-color: transparent; box-shadow: inset 0 0.5px 0 var(--wfl-line); }
}

/* F11  checkout < 1024px: the fixed total/"Weiter" bar (69px) covered the focused field or link when Tab scrolled it
   into view (WCAG 2.4.11). Keep focused elements above the bar. */
@media (max-width: 1023px) {
  html:has(.wfl-checkout__footer-cta) { scroll-padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
}

/* F12  cart cross-sell cards (core product miniatures): image link + quick-view rings were cut by their containers */
.product-miniature__image-link:focus-visible,
.product-miniature__quickview-button:focus-visible { outline: 1px solid var(--color-ink) !important; outline-offset: -1px !important; }

/* T51  header search panel (owner 2026-11-10). Desktop: 24px inner padding on all sides and "Alle Ergebnisse anzeigen"
   on the same 24px line as the grid (it sat flush on the panel edge, focus ring clipped). Drawer (<=1024px): the
   results panel was a fixed full-drawer layer over the drawer's own search field; it now sits in the drawer's flow
   below the field (16px padding, footer on the grid line) and stands in for the menu while open. 768-1024px: the
   drawer was display:none!important, so the header search + menu icons opened nothing. Long queries wrap. */
.wfl-src-inner { padding: 24px 24px 16px; }
.wfl-src-footer { margin-top: 0; padding: 14px 24px; }
.wfl-src-status { overflow-wrap: anywhere; }
.mm-v2-drawer > .wfl-src-overlay--mobile { position: static; flex: 1 1 auto; min-height: 0; z-index: auto; border: 0; border-top: 1px solid var(--color-hairline); box-shadow: none; }
.mm-v2-drawer:has(> .wfl-src-overlay--mobile:not([hidden])) > .mm-v2-drawer-body { display: none; }
@media (min-width: 768px) and (max-width: 1024px) {
  .mm-v2-drawer-wrap:not([hidden]) { display: block !important; }
}