/* crione-native.css — native remarks only.
   Chris, 2026-10-02: "minimize all css down to native", "a pixel per pixel compliant site".
   Everything you see is Magento's own Luma CSS or the browser's default.
   This file adds nothing visual. It only holds the compliance remarks below,
   each one tied to the rule it keeps. It replaced crione-readable.css. */

/* readable text: nothing under 14px, header and footer included.
   Only text that comes out small is lifted, so larger text (headings, prices, the tag cloud) keeps its size:
   (1) the elements browsers and Luma draw small, */
:is(#maincontent, .category-description, .page-header, .nav-sections, .breadcrumbs, .page-footer) :is(small, code, kbd, samp),
.breadcrumbs :is(a, strong, span), .copyright, .page-footer :is(a, li, span) {
  font-size: max(14px, 1em) !important;
}
/* (2) and any size under 14px written into style="" by a page or a script. */
:is(#maincontent, .category-description) :is([style*="font-size:9px"], [style*="font-size:9."], [style*="font-size: 9px"], [style*="font-size: 9."], [style*="font-size:10px"], [style*="font-size:10."], [style*="font-size: 10px"], [style*="font-size: 10."], [style*="font-size:11px"], [style*="font-size:11."], [style*="font-size: 11px"], [style*="font-size: 11."], [style*="font-size:12px"], [style*="font-size:12."], [style*="font-size: 12px"], [style*="font-size: 12."], [style*="font-size:13px"], [style*="font-size:13."], [style*="font-size: 13px"], [style*="font-size: 13."], [style*="font-size:."], [style*="font-size:0."], [style*="font-size: ."], [style*="font-size: 0."]) {
  font-size: 14px !important;
}

/* form fields: 44px tap height, 16px text (no zoom on phones), an edge with 3:1 contrast */
:is(#maincontent, .category-description) :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select, textarea) {
  min-height: 44px;
  font-size: 16px;
  border-color: #767676;
  max-width: 100%;
  box-sizing: border-box;
}
:is(#maincontent, .category-description) :is(input[type=checkbox], input[type=radio]) { width: 20px; height: 20px; }

/* buttons: 44px tap height */
:is(#maincontent, .category-description) :is(button, input[type=submit], input[type=button], .action) { min-height: 44px; }

/* focus: always visible */
:is(#maincontent, .category-description) :focus-visible { outline: 3px solid; outline-offset: 2px; }

/* phones: no sideways scrolling */
@media (max-width: 767px) {
  :is(#maincontent, .category-description) { overflow-wrap: break-word; }
  :is(#maincontent, .category-description) :is(table, pre) { display: block; max-width: 100%; overflow-x: auto; }
  :is(#maincontent, .category-description) :is(img, video, canvas, iframe) { max-width: 100%; height: auto; }
  :is(#maincontent, .category-description) code { overflow-wrap: anywhere; }
}

/* Luma's own header, made compliant: the phone menu tabs (#575757 on #f0f0f0 is 4.35:1) */
.nav-sections-item-switch, .nav-sections-item-switch:visited { color: #333; }