/* The Patriot Collection storefront: white page, typewriter type, numbered items on grey cards, a system-dialog
   notice, a yellow SUPPORT tab. Loaded after shop.css (which still styles the cart drawer) and overrides it. */
:root { --hf-blue: #1414a8; --hf-yellow: #fff200; --hf-red: #e0141c; --hf-card: #d3d3d3; --hf-ink: #111;
        --hf-red-card: #a1000b;   /* --hf-red is 3.3:1 on the grey card; this is 5.2:1 */ }
body.hf { background: #fff; color: var(--hf-ink); font-family: 'Courier Prime', 'Courier New', Courier, monospace; }
body.hf a { color: var(--hf-blue); }
/* keyboard focus (2.4.7): the store runs a black bar over a white page over grey cards, so the
   ring is two-tone — the dark line reads on the light surfaces, the yellow halo on the black bar */
body.hf :focus-visible, body.world-page :focus-visible { outline: 3px solid #111; outline-offset: 2px; box-shadow: 0 0 0 6px var(--hf-yellow); }

/* header */
/* the banner: black, the sun mark, Official UFCR Merch, the collection filter, the three links.
   It sticks to the top and is the storefront's only chrome — the rail's .wbar is hidden the
   moment this half of the page takes over, so there is never a second bar behind it. */
.hf-banner { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 14px 18px; flex-wrap: wrap; background: #000; color: #fff; padding: 12px 22px; }
.hf-brand { display: flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; font-weight: 700; font-size: 1.15rem; text-transform: uppercase; letter-spacing: .06em; }
.hf-brand img { width: 38px; height: 38px; display: block; }
.hf-bnav { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 22px; font-size: .9rem; letter-spacing: .08em; text-transform: uppercase; }
body.hf .hf-banner a, body.hf .hf-brand { color: #fff; }        /* beats body.hf a — see the note above */
body.hf .hf-banner a.hf-learn { color: #000; }
.hf-bnav a { color: #fff; text-decoration: none; padding: 5px 0; border-bottom: 2px solid transparent;
  display: inline-flex; align-items: center; min-height: 24px; }   /* 2.5.8 */
.hf-bnav a:hover { border-bottom-color: var(--hf-yellow); }
.hf-bnav a.hf-learn { background: var(--hf-yellow); color: #000; padding: 6px 12px; font-weight: 700; }
.hf-bnav a.hf-learn:hover { background: #fff; border-bottom-color: transparent; }
.hf-fine { color: #666; font-size: .8rem; }
/* the cart button overlaps the right edge of the sticky bar, so the links stop short of it */
.hf-banner .hf-bnav { padding-right: 96px; }
/* the cart button that cart.js injects rides in the black banner, so it is set in white */
body.hf #cartFab { position: fixed !important; top: 16px !important; right: 18px !important; bottom: auto !important; left: auto !important; width: auto !important; height: auto !important;
  padding: 5px 2px !important; border-radius: 0 !important; background: transparent !important; color: #fff !important; box-shadow: none !important; border: 0 !important;
  font: 700 .85rem 'Courier Prime', 'Courier New', monospace !important; letter-spacing: .06em; text-transform: uppercase; z-index: 60; }
body.hf #cartFab i, body.hf #cartFab .cart-ico { display: none; }
body.hf #cartFab::before { content: 'Cart ('; } body.hf #cartFab::after { content: ')'; }
body.hf #cartFab #cartCount { position: static !important; display: inline !important; background: none !important; color: inherit !important; font: inherit !important; padding: 0 !important; min-width: 0 !important; border: 0 !important; box-shadow: none !important; }

/* a phone gets two rows, not three: the mark and the links, then the filter across the bottom */
@media (max-width: 640px) {
  .hf-banner { padding: 9px 14px; gap: 8px 12px; }
  /* the mark alone: the yellow OFFICIAL UFCR MERCH label sits right under the bar, so the
     wordmark here is a second copy of it and the room is better spent on the links */
  .hf-brand { font-size: .84rem; gap: 8px; }
  .hf-brand img { width: 26px; height: 26px; }
  .hf-brand > span { display: none; }
  body.hf #cartFab { font-size: .72rem !important; top: 11px !important; right: 14px !important; padding: 7px 2px !important; }
  /* "Cart 0" rather than "Cart ( 0 )": six characters is a gutter the links can be sized against
     whichever face the browser ends up using, where the bracketed form is not */
  body.hf #cartFab::before { content: 'Cart '; }
  body.hf #cartFab::after { content: ''; }
  .hf-bnav { gap: 4px 12px; font-size: .7rem; padding-right: 76px; }   /* clears the cart in the corner */
  .hf-bnav a.hf-learn { padding: 4px 8px; min-height: 24px; }
  .hf-banner .hf-tabs { order: 3; width: 100%; flex-wrap: nowrap; overflow-x: auto; }
  /* a page below the list carries no filter but one more link, so its links take the second row */
  .hf-banner-deep .hf-bnav { order: 3; width: 100%; padding-right: 0; }
}

/* the list */
.hf-wrap { max-width: 1180px; margin: 0 auto; padding: 0 18px 110px; }
.hf-label { display: inline-block; background: var(--hf-yellow); color: #111; font-size: 1.05rem; padding: 4px 8px; margin: 0 0 18px; letter-spacing: .02em; text-transform: uppercase; }
.hf-list { display: grid; grid-template-columns: 1fr; gap: 30px 22px; }
@media (min-width: 720px) { .hf-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .hf-list { grid-template-columns: repeat(3, 1fr); } }
.hf-item { background: var(--hf-card); padding: 0 0 18px; }
.hf-item > a { display: block; }
.hf-photo { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--hf-card); }
.hf-meta { display: grid; grid-template-columns: auto 1fr; gap: 2px 16px; align-items: baseline; padding: 14px 18px 0; }
.hf-num { color: #555; font-size: 1rem; grid-row: span 3; }                  /* 5.0:1 on the card */
.hf-name { color: var(--hf-blue); font-weight: 700; text-transform: uppercase; font-size: 1.05rem; text-decoration: none;
  display: inline-block; padding: 3px 0; }   /* 2.5.8: 24px minimum */
.hf-name:hover { text-decoration: underline; }
.hf-sub { color: #4f4f4f; font-size: .76rem; letter-spacing: .04em; }        /* 5.5:1 on the card */
.hf-price { color: var(--hf-blue); font-size: 1.05rem; margin-top: 4px; }
.hf-buy { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 14px 18px 0; }
.hf-sizes { display: flex; gap: 4px; flex-wrap: wrap; }
.hf-hint { display: block; margin-top: 8px; padding: 0 18px; font-size: .78rem; color: var(--hf-red-card); min-height: 1em; }

/* system buttons */
.w95 { font-family: inherit; font-size: .8rem; padding: 5px 10px; background: #e9e9e9; color: #111; border: 2px solid; border-color: #fff #6d6d6d #6d6d6d #fff;
  box-shadow: 1px 1px 0 #000; cursor: pointer; text-transform: uppercase; text-decoration: none; line-height: 1.2; letter-spacing: .04em; }
.w95:active { border-color: #6d6d6d #fff #fff #6d6d6d; background: #d0d0d0; }
/* the chosen one, not merely a lighter grey: 8.3:1 against the card, 12.5:1 for its label */
.w95.selected { border-color: #6d6d6d #fff #fff #6d6d6d; background: var(--hf-blue); color: #fff; font-weight: 700; }
.w95.primary { background: var(--hf-blue); color: #fff; font-weight: 700; }
.w95.primary:hover { background: #0d0d86; }

/* a flash on the card — MOST POPULAR and anything like it. Same bevel as the .w95
   buttons so it reads as part of the store, not a sticker from somewhere else.
   White on --hf-red-card is 8.3:1; --hf-red itself is 3.3:1 on the grey and fails. */
.hf-badge { display: inline-block; background: var(--hf-red-card); color: #fff;
  font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 8px; line-height: 1.2; border: 2px solid;
  border-color: #fff #6d6d6d #6d6d6d #fff; box-shadow: 1px 1px 0 #000; }
.pd-badge { margin: 0 0 8px; }
/* on a card the flash sits on the photo: .hf-meta is a three-row grid with .hf-num
   spanning all of it, so a fourth child there would break the rows. Not .hf-flash —
   that name is already the card's attention animation. */
.hf-badge-pic { position: absolute; top: 10px; left: 10px; z-index: 2; }

/* sizing / faq */
.hf-faq { margin-top: 70px; max-width: 640px; font-size: .92rem; line-height: 1.6; }
.hf-faq h2 { font-size: 1rem; color: var(--hf-blue); text-transform: uppercase; letter-spacing: .08em; margin: 0 0 14px; }
.hf-faq p { margin: 0 0 12px; }
.hf-faq b { color: #111; }

/* the notice window */
#hfNotice { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(255, 255, 255, .45); }
#hfNotice[hidden] { display: none; }
.hf-win { width: min(560px, 100%); background: #0c1fa8; color: #f6f1d8; border: 2px solid #fff; outline: 2px solid #000; box-shadow: 6px 6px 0 #000; font-size: 1rem; line-height: 1.55; }
.hf-title { background: #f7e26b; color: #0c1fa8; font-weight: 700; display: flex; align-items: center; justify-content: space-between; padding: 4px 8px; letter-spacing: .1em; text-transform: uppercase; }
.hf-title i { display: inline-block; width: 12px; height: 12px; border: 2px solid #0c1fa8; }
.hf-body { padding: 16px 18px 18px; }
.hf-body .hl { display: inline-block; background: #f7e26b; color: #0c1fa8; padding: 0 6px; font-weight: 700; margin-bottom: 12px; }
.hf-body p { margin: 0 0 12px; }
.hf-cursor::after { content: '_'; animation: hfblink 1s steps(2) infinite; }
@keyframes hfblink { to { opacity: 0; } }
.hf-ok { display: block; margin: 6px 0 0 auto; min-width: 110px; text-align: center; }

/* support tab */
.hf-support { position: fixed; right: 0; bottom: 0; z-index: 50; background: var(--hf-yellow); color: #111; font-weight: 700; padding: 8px 14px; text-transform: uppercase;
  text-decoration: none; font-size: .85rem; border: 2px solid #111; border-right: 0; border-bottom: 0; letter-spacing: .06em; }

/* shop.css sets these from --muted / --faint, which are white with alpha: on the dark shop they
   read, on this white page they were white on white. 1.4.3 needs them re-inked here. */
body.hf .meta-chip { color: #333; border-color: #b4b4b4; }
body.hf .meta-chip.warn { color: #7a4a00; border-color: #c89a3c; background: rgba(240, 168, 48, .16); }
body.hf .section-tag { color: var(--hf-blue); }
body.hf .product-desc, body.hf .faq-a, body.hf .shop-footer { color: #333; }
#cartDrawer #cartClose { min-width: 24px; min-height: 24px; }   /* 2.5.8 */

/* product page in the same clothes (shop.css still lays it out). It wears the storefront's
   banner now, which sits in the flow instead of the old fixed bar, so the page starts higher. */
body.hf .pd-wrap { padding-top: 34px; }
@media (max-width: 860px) { body.hf .pd-wrap { padding-top: 26px; } }
body.hf .pd-name { font-family: inherit; color: var(--hf-blue); text-transform: uppercase; letter-spacing: .02em; }
body.hf .pd-tag, body.hf .pd-story, body.hf .pd-details, body.hf .pd-details li, body.hf .pd-label, body.hf .pd-note, body.hf .pd-more h2 { color: #333; }
body.hf .pd-price { color: var(--hf-blue); font-family: inherit; }
body.hf .pd-media, body.hf .pd-media img, body.hf .pd-thumbs img { background: var(--hf-card); border-radius: 0; }
body.hf .btn, body.hf .size-btn { font-family: inherit; border-radius: 0; text-transform: uppercase; }
body.hf .btn-primary { background: var(--hf-blue); color: #fff; border: 2px solid; border-color: #fff #000 #000 #fff; box-shadow: 1px 1px 0 #000; }
body.hf .btn-ghost { background: #e9e9e9; color: #111; border: 2px solid; border-color: #fff #6d6d6d #6d6d6d #fff; box-shadow: 1px 1px 0 #000; }
body.hf .size-btn { background: #e9e9e9; color: #111; border: 2px solid; border-color: #fff #6d6d6d #6d6d6d #fff; box-shadow: 1px 1px 0 #000; }
body.hf .size-btn.selected { background: var(--hf-blue); color: #fff; border-color: #6d6d6d #fff #fff #6d6d6d; }
body.hf .pd-more { background: #fff; }
body.hf .pd-more .product-card { background: var(--hf-card); border: 0; border-radius: 0; }
body.hf .pd-more .product-name, body.hf .pd-more .product-price { color: var(--hf-blue); font-family: inherit; }
body.hf .pd-more .product-tag, body.hf .pd-more .product-desc, body.hf .pd-more .meta-chip { color: #444; }
body.hf .site-footer, body.hf .shop-footer { background: #fff; color: #444; }

/* the cart drawer in the same clothes, wherever this sheet is loaded */
#cartDrawer { background: #fff !important; color: #111 !important; font-family: 'Courier Prime', 'Courier New', Courier, monospace !important; border-left: 2px solid #111; }
#cartDrawer header { border-bottom: 1px solid #ddd !important; }
#cartDrawer header h2 { font-family: inherit !important; color: var(--hf-blue) !important; text-transform: uppercase; }
#cartClose { color: #111 !important; }
.cart-empty, .cart-sub, .cart-note { color: #555 !important; }
.cart-line { border-color: #e6e6e6 !important; }
.cart-line img, .cart-noimg { border-radius: 0 !important; background: var(--hf-card) !important; }
.cart-name, .cart-price, .cart-total, .cart-total strong { color: #111 !important; font-family: inherit !important; }
.cart-qty button { border-radius: 0 !important; background: #e9e9e9 !important; color: #111 !important; border: 2px solid !important; border-color: #fff #6d6d6d #6d6d6d #fff !important; box-shadow: 1px 1px 0 #000; }
.cart-qty .cart-del { color: var(--hf-red) !important; }
#cartFoot { border-top: 1px solid #ddd !important; }
.cart-go { background: var(--hf-blue) !important; color: #fff !important; border-radius: 0 !important; font-family: inherit !important; text-transform: uppercase; letter-spacing: .06em;
  border: 2px solid !important; border-color: #fff #000 #000 #fff !important; box-shadow: 1px 1px 0 #000; }
.cart-err { color: var(--hf-red) !important; }
#cartScrim { background: rgba(255, 255, 255, .55) !important; }
/* the donation ask, as a system dialog */
#cartDonate { background: rgba(255, 255, 255, .7) !important; backdrop-filter: none !important; }
.cart-donate-card { background: #fff !important; color: #111 !important; border: 2px solid #111 !important; border-radius: 0 !important; box-shadow: 4px 4px 0 #000 !important; font-family: inherit !important; }
.cart-donate-card h3 { font-family: inherit !important; color: var(--hf-blue) !important; }
.cart-donate-card p, .cart-donate-other, .cart-donation { color: #555 !important; }
.cart-donation strong { color: #111 !important; }
.cart-donate-amounts button, .cart-donate-other button { border-radius: 0 !important; background: #e9e9e9 !important; color: #111 !important; border: 2px solid !important; border-color: #fff #6d6d6d #6d6d6d #fff !important; box-shadow: 1px 1px 0 #000; font-family: inherit !important; }
.cart-donate-amounts button:hover, .cart-donate-other button:hover { background: var(--hf-yellow) !important; }
.cart-donate-other input { border-radius: 0 !important; border: 2px solid !important; border-color: #6d6d6d #fff #fff #6d6d6d !important; background: #fff !important; color: #111 !important; font-family: inherit !important; }
.cart-donate-other input.bad { border-color: var(--hf-red) !important; }
.cart-donate-skip, .cart-donation button { color: var(--hf-blue) !important; font-family: inherit !important; }
.cart-donate-main button, .cart-donate-ufrow button { border-radius: 0 !important; font-family: inherit !important; border: 2px solid !important; border-color: #fff #6d6d6d #6d6d6d #fff !important; box-shadow: 1px 1px 0 #000; }
.cart-donate-yes { background: var(--hf-blue) !important; color: #fff !important; }
.cart-donate-no, .cart-donate-ufrow button { background: #e9e9e9 !important; color: #111 !important; }
.cart-donate-ufrow input { border-radius: 0 !important; border: 2px solid !important; border-color: #6d6d6d #fff #fff #6d6d6d !important; background: #fff !important; color: #111 !important; font-family: inherit !important; }
.cart-donate-uf { color: #555 !important; }
.cart-tag { color: var(--hf-blue) !important; border-color: var(--hf-blue) !important; border-radius: 0 !important; }
.cart-suggest { border-radius: 0 !important; border-color: #6d6d6d !important; color: #444 !important; background: #f3f3f3; }
.cart-suggest b { color: #111 !important; } .cart-suggest a { color: var(--hf-blue) !important; }
.cart-suggest.is-on { border-color: var(--hf-blue) !important; background: #eef0ff; }
.cart-suggest button { border-radius: 0 !important; background: var(--hf-blue) !important; font-family: inherit !important; }

/* the mini rack at the top of the storefront: tap a piece and the page jumps to its card */
/* The rack breaks out of the 1180px reading column and runs nearly the full window: a clothes
   rail is a wide object, and boxing it into a text column was what made it look like a thumbnail.
   The cards underneath stay in the column, where lines of text belong. */
.mini-rack { position: relative; margin: 12px 0 28px; padding-bottom: 14px;
  width: min(96vw, 2000px); margin-left: 50%; transform: translateX(-50%);
  border-bottom: 1px solid #e2e2e2; }
.mini-rack canvas { display: block; width: 100%; height: clamp(230px, 24vw, 420px); cursor: pointer; }
.mini-hint { margin: 2px 0 0; text-align: center; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: #6f6f6f; }   /* 5.0:1 on white */
.hf-item.flash { animation: hf-flash 1.6s ease-out 1; }
@keyframes hf-flash { 0%, 100% { box-shadow: 0 0 0 0 rgba(20, 20, 168, 0); } 12% { box-shadow: 0 0 0 5px rgba(20, 20, 168, .9); } }
@media (max-width: 640px) { .mini-rack { width: 100vw; } .mini-rack canvas { height: 200px; } }

/* the listing photo turns over: the back print on hover, or while a finger is held on it */
.hf-pic { position: relative; display: block; }
.hf-photo-alt { position: absolute; inset: 0; opacity: 0; transition: opacity .28s ease; }
.hf-pic:hover .hf-photo-alt, .hf-pic.show-alt .hf-photo-alt { opacity: 1; }
@media (hover: none) { .hf-pic:hover .hf-photo-alt { opacity: 0; } .hf-pic.show-alt .hf-photo-alt { opacity: 1; } }

/* one heading per collection, and the Standard / Made in USA choice on a card */
.hf-series { margin: 30px 0 2px; font-size: 1.35rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--hf-blue); border-bottom: 2px solid #111; padding-bottom: 6px; }
.hf-collection:first-child .hf-series { margin-top: 4px; }
.hf-collection[hidden] { display: none !important; }
/* the collection filter, in the banner: the same clothes as the links beside it */
.hf-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.hf-tabs button { font-family: inherit; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
  background: transparent; color: #fff; border: 1px solid #767676; padding: 6px 12px; }   /* #767676 is 4.6:1 on black; #4a4a4a was 2.4:1 */
.hf-tabs button:hover { border-color: var(--hf-yellow); }
.hf-tabs button.on { background: var(--hf-yellow); color: #000; border-color: var(--hf-yellow); font-weight: 700; }
@media (max-width: 640px) { .hf-tabs button { font-size: .7rem; padding: 5px 9px; letter-spacing: .06em; } }

/* the collections stack down the page; the cards inside each one are the grid (.hf-list) */
/* One collection at a time, down the page: its rack, then its cards, then a rule, then the next.
   Never side by side — three racks and three grids abreast is the same information, three times
   as cluttered, and every column too narrow to read. */
.hf-collections { display: block; }
.hf-collection { padding-bottom: 56px; }
.hf-collection + .hf-collection { border-top: 2px solid #111; padding-top: 12px; }
.hf-collection:last-child { padding-bottom: 24px; }
.hf-opts { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.hf-opts button { font-size: .72rem; letter-spacing: .04em; padding: 4px 8px; }
.hf-opts button.selected { background: var(--hf-blue) !important; color: #fff; font-weight: 700; }