/** Shopify CDN: Minification failed

Line 1120:0 Unexpected "}"

**/
/* Collection-page filter sidebar restyle (2026-05-13) -- Empire's stock
   .collection-filters__* markup styled to match Boost's .boost-sd__filter-*
   visual hierarchy on production. Two-class specificity per
   feedback_shopify_lazy_loaded_css_specificity.

   2026-05-13 root-cause fix: previous descendant scope `.collection-filters X`
   never matched in the DOM — Empire's sidebar markup uses
   `.collection-filters__*` BEM children (with `__` suffix) but no bare
   `.collection-filters` ancestor exists. Stock theme.css `.collection-filters__filter-link`
   was winning the cascade unopposed (display: flex but no
   justify-content/gap), and our slider rules were dead code. Scope reset to
   `.filter-form` (snippets/product-grid-faceted-filters.liquid:29), which IS
   a real ancestor on every collection sidebar.

   Source-of-truth screenshots:
   docs/superpowers/plans/2026-05-13-collection-parity-screens/
*/

/* Group container -- denser top spacing, subtle bottom rule */
.filter-form .collection-filters__filter-group {
  border-bottom: 1px solid rgba(69, 81, 97, 0.12);
  padding: 0.75rem 0;
  margin: 0;
}

/* Group heading -- Boost uses h3-equivalent weight + chevron-up */
.filter-form .collection-filters__filter-group-heading {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--of-slate-dark);
  letter-spacing: 0.01em;
  padding: 0.25rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background: transparent;
  border: 0;
}

/* Chevron -- icon starts pointing down. Expanded (aria-expanded="true") keeps
   it at 0deg (pointing down, matching production where the open panel sits
   below the heading). Collapsed rotates 180deg to point up as a "click to
   expand downward" affordance. Empire's generic [data-accordion-trigger] rules
   do NOT apply here (the filter trigger uses data-filter-group-trigger). */
.filter-form .collection-filters__filter-group-heading[aria-expanded="true"] .collection-filters__filter-icon {
  transform: rotate(0deg);
  transition: transform 0.18s ease;
}
.filter-form .collection-filters__filter-group-heading[aria-expanded="false"] .collection-filters__filter-icon {
  transform: rotate(180deg);
  transition: transform 0.18s ease;
}

/* Filter title -- denser */
.filter-form .collection-filters__filter-title {
  font-size: 0.9375rem;
  font-weight: 600;
}

/* List item + filter-link base styles moved to Item 5 block at end of file
   (tighter spacing, count right-justified). Interaction states kept here. */
.filter-form .collection-filters__filter-link:hover {
  color: var(--of-slate-dark);
}
.filter-form .collection-filters__filter-list-item--active .collection-filters__filter-link {
  color: var(--of-oxblood);
  font-weight: 600;
}

/* Per-group "Clear" link -- visible only when group has active values */
.filter-form .collection-filters__filter-group-clear {
  font-size: 0.75rem;
  color: var(--of-oxblood);
  text-decoration: underline;
  cursor: pointer;
  margin-left: auto;
  padding-left: 0.5rem;
}
.filter-form .collection-filters__filter-group-clear:hover {
  color: var(--of-oxblood-dark);
}

/* Rating filter -- 5 star buckets with counts. JS toggles card visibility
   on click. v1 has no URL state; tap a button to filter, tap again to clear. */
.of-rating-filter__list { list-style: none; padding: 0.25rem 0; margin: 0; }
.of-rating-filter__item { padding: 0; }
.of-rating-filter__button {
  display: flex; align-items: center; gap: 0.25rem;
  justify-content: space-between;
  background: transparent; border: 0;
  padding: 0.25rem 0;
  font-size: 0.875rem; color: var(--of-slate);
  cursor: pointer; width: 100%; text-align: left;
}
.of-rating-filter__button:hover { color: var(--of-slate-dark); }
.of-rating-filter__button--active { color: var(--of-oxblood); font-weight: 600; }
/* D2: keyboard focus ring for rating filter buttons -- sighted keyboard users
   need the same affordance as mouse hover. 2px oxblood outline, 2px offset
   so the ring clears the button border. border-radius: 2px matches the
   slight rounding used on other OF focus rings (bump button, Clear link). */
.of-rating-filter__button:focus-visible {
  outline: 2px solid var(--of-oxblood);
  outline-offset: 2px;
  border-radius: 2px;
}
.of-rating-filter__stars { display: inline-flex; }
.of-rating-filter__star {
  color: var(--of-gray-300); font-size: 1.125rem; line-height: 1; letter-spacing: -1px;
}
.of-rating-filter__star--filled { color: var(--of-oxblood); } /* oxblood per OF brand palette */
.of-rating-filter__count { color: var(--of-gray-500); font-size: 0.8125rem; }

/* Card surface -- white box against the tinted page background (#FBFBFC) for
   Baymard-style scannability. Subtle but cognitively meaningful boundary.
   Scoped to .productgrid--items so recently-viewed strips and PDP upsell
   carousels, which share .productitem, are not affected. */
.productgrid--items .productitem {
  background: #fff;
  border-radius: 8px;
  overflow: hidden; /* clip product image to the rounded corners */
}

/* A1: Empire theme.css.liquid (~line 16071) paints .productitem--info with the
   global {{ color_background }} token, which is #FBFBFC. This inner info panel
   therefore over-paints the white card surface with the tinted page background.
   Two-class specificity beats Empire's single-class rule without !important.
   Root fix per feedback_address_root_not_symptom. */
.productgrid--items .productitem .productitem--info {
  background-color: #fff;
}

/* Price pattern mirrors PDP "List Price:" treatment (snippets/of-price-block.liquid).
   Hide Empire's stock inline compare-at strikethrough above the current price;
   the .of-msrp--card block (rendered in product-grid-item.liquid below the
   current price) carries the explicit "List Price: $X" line instead. Other
   .productitem contexts (recently-viewed, PDP carousels) keep Empire's
   default strikethrough — this rule is scoped to .productgrid--items only. */
.productgrid--items .productitem .price__compare-at {
  display: none;
}

/* OF MSRP card variant — same vocabulary as PDP .of-msrp but tighter for
   card density. PDP version lives in of-pdp.css and is intentionally larger. */
.of-msrp--card {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-top: 2px;
  font-family: var(--element-text-font-family--body, "Nunito Sans", system-ui, sans-serif);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--of-slate);
  line-height: 1.3;
}
.of-msrp--card .of-msrp__label {
  font-weight: 600;
}
.of-msrp--card .of-msrp__amount {
  font-size: 0.8125rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--of-slate);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}

/* Price range -- dual-thumb slider. Two overlaid range inputs with a
   visual track between the thumbs. Hidden number inputs at form level
   stay in sync for Empire's filter submission. */
.filter-form .of-price-slider-form {
  padding: 0.75rem 0 0.5rem;
}
/* Empire's Accordion toggles display via [data-accordion-state] but our
   rules above tied on specificity. Scope display:block so it only fires
   when the accordion is open OR before JS has set any state -- Empire's
   `display: none` for [data-accordion-state="closed"] then wins cleanly. */
.filter-form .of-price-slider-form:not([data-accordion-state]),
.filter-form .of-price-slider-form[data-accordion-state="open"] {
  display: block;
}
.filter-form .of-price-slider {
  position: relative;
  width: 100%;
  height: 24px;
  margin-bottom: 0.5rem;
}
.filter-form .of-price-slider__track {
  position: absolute;
  top: 50%;
  left: 0; right: 0;
  height: 6px;
  background: rgba(69, 81, 97, 0.18);
  border-radius: 999px;
  transform: translateY(-50%);
  pointer-events: none;
}
.filter-form .of-price-slider__fill {
  position: absolute;
  top: 0; bottom: 0;
  background: var(--of-oxblood);
  border-radius: 999px;
}
.filter-form .of-price-slider__input {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 24px;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  pointer-events: none; /* track ignores clicks; thumbs catch them */
  margin: 0;
}
.filter-form .of-price-slider__input::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--of-oxblood);
  cursor: pointer;
  pointer-events: auto;
  position: relative; z-index: 2;
}
.filter-form .of-price-slider__input::-moz-range-thumb {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--of-oxblood);
  cursor: pointer;
  pointer-events: auto;
}
.filter-form .of-price-slider__readout {
  display: flex;
  justify-content: space-between;
  font-size: 0.875rem;
  color: var(--of-slate);
  font-weight: 500;
  margin-top: 0.25rem;
}
.filter-form .of-price-slider__readout-divider {
  color: var(--of-gray-500);
}
.filter-form .collection-filters__price-range-form .of-price-slider__hidden-input,
.filter-form .of-price-slider-form .of-price-slider__hidden-input {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  clip: rect(0, 0, 0, 0);
  overflow: hidden;
}

/* Color filter swatches -- circles instead of text+checkbox rows.
   display:flex scoped to open/uninitialized state so Empire's accordion
   can collapse via [data-accordion-state="closed"] { display: none }. */
.filter-form .collection-filters__filter-list--swatch {
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.5rem 0;
  list-style: none;
}
.filter-form .collection-filters__filter-list--swatch:not([data-accordion-state]),
.filter-form .collection-filters__filter-list--swatch[data-accordion-state="open"] {
  display: flex;
}
.filter-form .collection-filters__filter-list--swatch .collection-filters__filter-list-item {
  padding: 0;
}
.filter-form .collection-filters__filter-list--swatch .collection-filters__filter-link {
  display: inline-flex;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid transparent;
  position: relative;
  cursor: pointer;
}
.filter-form .collection-filters__filter-list--swatch .collection-filters__swatch-wrapper,
.filter-form .collection-filters__filter-list--swatch .collection-filters__swatch,
.filter-form .collection-filters__filter-list--swatch .collection-filters__swatch-inner {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: block;
}
.filter-form .collection-filters__filter-list-item--active .collection-filters__filter-link {
  border-color: var(--of-oxblood);
}
/* Tooltip using existing data-swatch-tooltip attribute.
   Bound to the <a> (.filter-link) so the full click target triggers it,
   not just the small wrapper div. :focus-visible gives keyboard parity. */
.filter-form .collection-filters__filter-list--swatch .collection-filters__filter-link .collection-filters__swatch-wrapper[data-swatch-tooltip]::after,
.filter-form .collection-filters__filter-list--swatch .collection-filters__filter-link .collection-filters__image-wrapper[data-swatch-tooltip]::after {
  content: attr(data-swatch-tooltip);
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--of-slate-dark);
  color: #fff;
  font-size: 0.75rem;
  padding: 0.125rem 0.5rem;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}
/* Hover OR keyboard focus reveals the tooltip. Sighted keyboard users
   tabbing through swatches need parity with mouse users. */
.filter-form .collection-filters__filter-list--swatch .collection-filters__filter-link:hover .collection-filters__swatch-wrapper[data-swatch-tooltip]::after,
.filter-form .collection-filters__filter-list--swatch .collection-filters__filter-link:hover .collection-filters__image-wrapper[data-swatch-tooltip]::after,
.filter-form .collection-filters__filter-list--swatch .collection-filters__filter-link:focus-visible .collection-filters__swatch-wrapper[data-swatch-tooltip]::after,
.filter-form .collection-filters__filter-list--swatch .collection-filters__filter-link:focus-visible .collection-filters__image-wrapper[data-swatch-tooltip]::after {
  opacity: 1;
}

/* Volume-discount badge on collection grid card -- freeship pill design language
   (mirrors .of-pdp-freeship__pill in of-pdp.css: parchment bg, 4px left accent,
   right-rounded corners, Outfit/Inter typography).
   Per-rule colors from of_badge metaobject drive bg + accent border via CSS
   custom properties emitted by snippets/of-card-badge.liquid.
   Moved here from of-shared.css 2026-05-13 (collection-context-only). */
/* Card badge — fixed sizing. Free-shipping was the only label that overflowed;
   handled at the source via Liquid override (snippets/of-card-badge.liquid
   renders "Free Shipping" instead of the long PDP/cart marketing string for
   slug == 'free-shipping-item'). card_label metaobject field still wins if
   merchant sets it per rule. */
.of-badge.of-badge--card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 8px 8px;
  background: var(--of-badge-bg, var(--of-parchment));
  border-left: 4px solid var(--of-badge-accent, var(--of-khaki));
  border-radius: 0 4px 4px 0;
  margin: 6px 0 8px;
  font-family: var(--of-mega-ui-font, "Outfit", "Inter", system-ui, sans-serif);
  font-size: 12px;
  font-weight: 600;
  color: var(--of-badge-fg, var(--of-slate-dark));
  line-height: 1.4;
  max-width: 100%;
}
.of-badge.of-badge--card .of-badge__label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: inherit;
}

/* Filter list item -- count right-justified, row spacing tightened.
   Split label/count into separate spans in faceted-filter-group.liquid
   (Item 5, 2026-05-13). :hover and --active rules in existing block above
   are untouched. */
.filter-form .collection-filters__filter-list-item {
  padding: 0.0625rem 0;   /* was 0.125rem -- tightened to compensate for 2-line wrap rows */
  margin-top: 0;          /* override Empire's space_xx_small (~0.5rem) at theme.css.liquid */
}
.filter-form .collection-filters__filter-link {
  display: flex;
  align-items: center;
  gap: 0.375rem;            /* was 0.5rem -- tighter checkbox-to-label gap */
  justify-content: space-between;
  width: 100%; /* Empire only sets width:100% on .modal .filter-link;
                  desktop sidebar links are content-sized, so space-between
                  has no room to distribute. Force full width here. */
  font-size: 0.8125rem;     /* was 0.875rem -- 13px per Rhett's request */
  color: var(--of-slate);
  text-decoration: none;
}
.filter-form .collection-filters__filter-list-item-text {
  flex: 1 1 auto;
  min-width: 0;
  white-space: normal;        /* was: nowrap -- long names now wrap to 2 lines */
  overflow-wrap: break-word;
  line-height: 1.25;          /* tighter for 2-line cases */
}
.filter-form .collection-filters__filter-list-item-count {
  color: var(--of-gray-500);
  font-size: 0.75rem;        /* was 0.8125rem -- slightly smaller than label */
  flex-shrink: 0;
}

/* Color filter — grid of 28px swatch circles, no labels (name shown on
   hover via tooltip). Multi gets a conic-gradient. Bridges Empire's PDP
   color map (settings.swatches_custom_colors) via snippets/swatch-styles.
   Renders regardless of Shopify Search & Discovery's presentation flag. */
.filter-form .collection-filters__filter-list--color {
  grid-template-columns: repeat(auto-fill, minmax(32px, 1fr));
  gap: 8px;
  padding: 6px 2px 4px;
  list-style: none;
  margin: 0;
}
/* display:grid scoped so Empire's accordion can collapse it.
   See note on .of-price-slider-form above for the cascade rationale. */
.filter-form .collection-filters__filter-list--color:not([data-accordion-state]),
.filter-form .collection-filters__filter-list--color[data-accordion-state="open"] {
  display: grid;
}
.filter-form .collection-filters__filter-list--color .collection-filters__filter-list-item {
  padding: 0;
}
.filter-form .collection-filters__filter-list--color .collection-filters__filter-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 50%;
  position: relative;
}
.filter-form .collection-filters__filter-list--color .collection-filters__filter-list-item--active .collection-filters__filter-link {
  outline: 2px solid var(--of-oxblood);
  outline-offset: 2px;
}
.filter-form .of-color-swatch {
  display: inline-block;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(69, 81, 97, 0.18);
  background-size: cover;
  background-position: center;
  position: relative;
}
/* "Multi" color value — conic gradient spanning a broad rainbow so the
   shopper reads it as "many colors" at a glance. */
.filter-form .of-color-swatch--multi {
  background-image: conic-gradient(
    from 90deg,
    var(--of-oxblood),
    #ECB22E,
    #2EB67D,
    #36C5F0,
    #7C3AED,
    var(--of-oxblood)
  );
}
/* Hover/focus tooltip showing the color name (text label is otherwise omitted
   in the grid). Uses the same data-swatch-tooltip attribute we set in Liquid. */
.filter-form .collection-filters__filter-list--color .of-color-swatch[data-swatch-tooltip]::after {
  content: attr(data-swatch-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--of-slate-dark);
  color: #fff;
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 2;
}

/* ROOT CAUSE for tooltip clipping: Empire's accordion stylesheet at
   theme.css.liquid declares overflow:hidden on every [data-accordion-content]
   element with a [data-accordion-state] attribute, and the open-state
   selector only overrides display + height — overflow:hidden stays in
   cascade even when the filter group is expanded. Absolute-positioned
   tooltips above the swatch then get clipped at the <ul> boundary,
   regardless of z-index.

   Fix: explicitly restore overflow:visible on the color filter list when
   it's in the open accordion state. Scoped to --color so other filter
   groups keep Empire's clipping behavior (which they want for the
   height transition). */
.filter-form .collection-filters__filter-list--color[data-accordion-content][data-accordion-state="open"] {
  overflow: visible;
}
.filter-form .collection-filters__filter-list--color .collection-filters__filter-link:hover .of-color-swatch[data-swatch-tooltip]::after,
.filter-form .collection-filters__filter-list--color .collection-filters__filter-link:focus-visible .of-color-swatch[data-swatch-tooltip]::after {
  opacity: 1;
}

/* Filter "Show N more" / "Show less" toggle.
   <summary> is required by HTML to be the first child of <details>, but
   visually we want it at the BOTTOM of the expanded list. Flexbox column
   layout + `order` lets us reorder visually without breaking DOM rules.
   Label text swap is done via two spans (display toggled on [open]) so
   we keep the dynamic "Show N more" count from Liquid. */
.filter-form .of-filter-show-more {
  list-style: none;
  padding: 0;
}
.filter-form .of-filter-show-more__details {
  display: flex;
  flex-direction: column;
}
.filter-form .of-filter-show-more__summary {
  order: 1;
  list-style: none;
  cursor: pointer;
  /* Slim centered button. Oxblood border, transparent fill; rounded
     enough to read as pill-y without going full pill. */
  align-self: center;
  margin: 6px auto 2px;
  padding: 3px 14px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--of-oxblood);
  background: transparent;
  border: 1px solid var(--of-oxblood);
  border-radius: 999px;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.filter-form .of-filter-show-more__summary::-webkit-details-marker {
  display: none; /* Hide native disclosure triangle (Safari + Chromium). */
}
.filter-form .of-filter-show-more__summary:hover {
  background: var(--of-oxblood);
  color: #fff;
}
.filter-form .of-filter-show-more__details[open] .of-filter-show-more__summary {
  order: 2; /* drops the toggle BELOW the revealed list when open */
}
.filter-form .of-filter-show-more__list {
  order: 1;
  list-style: none;
  padding: 0;
  margin: 0;
}
/* Dynamic text swap — "Show N more" when closed, "Show less" when open. */
.filter-form .of-filter-show-more__label--less {
  display: none;
}
.filter-form .of-filter-show-more__details[open] .of-filter-show-more__label--more {
  display: none;
}
.filter-form .of-filter-show-more__details[open] .of-filter-show-more__label--less {
  display: inline;
}


/* ==========================================================================
   OF simgym: card click-area + "View details" CTA improvements
   ========================================================================== */

/* Ensure the of-badge--card div never absorbs pointer events from the card.
   It sits in the info area and is decorative only; the title link above it
   is the interactive target. Without this, a tap landing squarely on the
   badge div on mobile does nothing visible -- pointer-events: none lets it
   pass through to any underlying element, and the cursor stays as-expected
   on desktop since the badge is in normal flow (not absolutely positioned). */
.of-badge.of-badge--card {
  pointer-events: none;
}

/* Always-visible "View details" link for cards without long descriptions.
   Re-uses the existing .productitem--link style (Empire theme) so it
   inherits the link color, underline behavior, and spacing already defined
   there. The extra class lets us add specificity without duplicating rules. */
.productgrid--items .productitem .of-card-view-details {
  display: inline-block;
  margin-top: 6px;
  font-size: 0.8125rem;   /* 13px -- compact, readable */
  font-weight: 500;
}

/* Consistent hover color with the rest of the card link targets. */
.productgrid--items .productitem .of-card-view-details:hover,
.productgrid--items .productitem .of-card-view-details:focus-visible {
  color: var(--of-oxblood, #C04943);
  text-decoration: underline;
}

/* ==========================================================================
   OF native search (task/native-search): sort control top-right, scoped
   ONLY to the search results section (.search--section) via that
   section's own root class -- static-collection.liquid is untouched, so
   collection pages keep their existing utils-bar layout exactly as-is.
   ========================================================================== */

/* Rhett, 2026-07-25: "I liked Boost's placement -- sort control top-RIGHT
   above the results grid (not top-left above filters where it now sits)".
   .productgrid--utils-container already holds exactly two children at
   desktop widths (the filter-trigger div, then product-grid-sortby's own
   div) in that DOM order -- Empire's stock rule only gives it a width,
   no explicit display/justify, so they stack left-aligned by default.
   flex-end, not space-between (live-verified fix): the filter-trigger
   div is IN the DOM at desktop widths but Empire's own stock CSS
   collapses .utils-filter to zero size there (the filter TRIGGER BUTTON
   is mobile-only; desktop shows the always-visible sidebar instead), so
   a flex row with only one effectively-visible child and
   justify-content:space-between just left-aligns that one child --
   confirmed live, the sort control stayed at the far left. flex-end
   pushes it right regardless of the filter-trigger's collapsed size. */
@media screen and (min-width: 860px) {
  .search--section .productgrid--utils-container {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 12px;
  }
}

/* ==========================================================================
   Collection story band (2026-08-03, brands phase two)

   Renders from snippets/of-collection-band.liquid, which stands in for the
   standard masthead on templates/collection.brand.json. Two-class specificity
   throughout, per the lazy-loaded-stylesheet rule: theme.css is deferred and
   can land after this sheet, so nothing here may rely on source order.

   FOLD RESEARCH 2026-08-03 (NN/g eyetracking, Baymard category-page guidance,
   Google plus SearchPilot SEO tests). Every height below is load-bearing, not
   taste. Non-product content above the grid gets at most half the first
   viewport:

     desktop  target 400px, absolute ceiling 450px, measured 268px closed
     mobile   target 160 to 220px,                  measured 204px closed

   One decision comes straight out of that budget: the "why we carry it"
   panel ships closed inside a <details>. Open, with real two paragraph
   copy, it measured past the desktop ceiling, so the sanctioned fallback
   applies and the parchment moment survives as the slim closed strip.
   The story paragraph is NEVER clamped: an early build cut it to a three
   line teaser and Rhett read that as text trailing off with no way to
   read more (2026-08-03). The budget is held editorially instead, by
   keeping brand_story near 45 to 55 words. Anyone raising these numbers
   should re-measure the first product row, not just eyeball the band.
   ========================================================================== */

.of-cband {
  margin: 0 0 0.5rem;
}

/* Logo tile plus copy. Padding is deliberately asymmetric: nothing on top
   (the breadcrumbs already provide that space) and 20px below. */
.of-cband .of-cband__head {
  display: grid;
  grid-template-columns: 262px minmax(0, 1fr);
  gap: 40px;
  align-items: start;
  padding: 0 0 1.25rem;
}

/* No-logo collections (house labels without a mark): the head grid always
   reserves the 262px tile column, so without this modifier the body lands
   IN that narrow column and the story crams (Rhett 2026-08-03, "loaded
   incorrectly" on Value Line and Made in Japan). Single column instead. */
.of-cband .of-cband__head--no-logo {
  display: block;
}

/* 112px tile: the tallest element in the head row, and the number the
   desktop budget is built on. Raising it raises the whole band. */
.of-cband .of-cband__logo {
  display: grid;
  /* The explicit 100% track is load-bearing: with the default auto track,
     the img's percentage height cannot resolve (indefinite area), falls
     back to intrinsic ratio, and a square logo overflows the tile. */
  grid-template: 100% / 100%;
  place-items: center;
  width: 262px;
  height: 112px;
  padding: 18px 22px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(69, 81, 97, 0.16);
  border-radius: 6px;
}

/* width AND height 100% with object-fit is the only safe sizing here:
   the earlier height:auto + max-height chain let a square 678x678 logo
   render at its intrinsic ratio and clip against the tile (Badeco,
   2026-08-03, only a corner sliver visible). Both axes pinned to the
   tile's content box, contain letterboxes any aspect. */
.of-cband .of-cband__logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Vendor logos arrive as white-background JPEGs as often as as PNGs. */
  mix-blend-mode: multiply;
}

/* khaki-dark, not khaki: 12px at weight 800 needs the 4.5:1 pass on white. */
.of-cband .of-cband__eyebrow {
  margin: 0 0 0.5rem;
  color: var(--of-khaki-dark, #6E6A3D);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Capped at 2.75rem rather than the mockup's 3.5rem: the difference is 12px
   of band height and no legibility (fold research 2026-08-03). */
.of-cband .of-cband__title {
  margin: 0;
  color: var(--of-slate-dark, #2F3946);
  font-size: clamp(1.75rem, 3.2vw, 2.75rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

/* No measure cap and no clamp: the story fills its column and shows every
   word (Rhett 2026-08-03: a 64ch cap read as the band stopping short of
   the page, and the teaser clamp read as text trailing off). */
.of-cband .of-cband__story {
  margin: 0.75rem 0 0;
  font-size: 1rem;
  line-height: 1.5;
}

.of-cband .of-cband__facts {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.375rem 1.375rem;
  margin: 0.75rem 0 0;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(69, 81, 97, 0.16);
  color: var(--of-khaki-dark, #6E6A3D);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.of-cband .of-cband__facts b {
  color: var(--of-slate-dark, #2F3946);
  font-variant-numeric: tabular-nums;
}


/* Tablet: the logo tile shrinks. */
@media screen and (max-width: 900px) {
  .of-cband .of-cband__head {
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 24px;
  }

  .of-cband .of-cband__logo {
    width: 200px;
    height: 86px;
    padding: 14px 16px;
  }
}

/* Phone. The 160 to 220px budget is the binding one (fold research
   2026-08-03: a band near 300px puts the whole grid below the fold, which
   Baymard classes as a navigation failure). The logo tile is what gives:
   it costs ~100px and the h1 already carries the identity. The story stays
   whole here too (never clamped, Rhett 2026-08-03); short authored copy is
   what keeps the phone band honest, so a long story is a copy bug. */
@media screen and (max-width: 620px) {
  .of-cband .of-cband__head {
    display: block;
    padding-bottom: 0.875rem;
  }

  .of-cband .of-cband__logo {
    display: none;
  }

  .of-cband .of-cband__story {
    margin-top: 0.5rem;
    font-size: 0.9375rem;
  }

  .of-cband .of-cband__facts {
    margin-top: 0.625rem;
    padding-top: 0.625rem;
    gap: 0.25rem 1rem;
    font-size: 0.78125rem;
  }
}

/* ==========================================================================
   Collection and search toolbar restyle (2026-08-03)

   Rhett, on the brands phase two mockup: "I liked how the Sort by looked in
   the mockup more then I do our current one. same as the View As. I'd like to
   adopt that. probably need a chevron next to staff picks though so people
   know there is options."

   Styling only. The sort control stays Empire's native <select> with its
   existing data-productgrid-trigger-sort hook and its full click target, and
   the view toggle stays the same two buttons with the same data-collection-
   view values; only the paint changes. The chevron is the theme's own
   icon-chevron-down-small, which was already in the markup at 8x6 inside a
   borderless control and read as decoration. Inside a bordered pill at 10x7
   it reads as a menu.

   Every rule below outweighs the theme rule it replaces on specificity
   rather than on order, because theme.css is deferred and can land last.
   Nothing sets `display` outside the breakpoint the theme sets it in: the
   desktop select wrapper and the mobile sort button are each other's
   fallback, and swapping one on at the wrong width shows both.
   ========================================================================== */

/* The segmented view toggle, both breakpoints. */
.utils-view-container .utils-viewtoggle {
  gap: 4px;
}

.utils-view-container .utils-viewtoggle .utils-viewtoggle-button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  color: var(--of-slate, #455161);
  background: #ffffff;
  border: 1px solid rgba(69, 81, 97, 0.22);
  border-radius: 4px;
  transition: color 120ms ease, background-color 120ms ease, border-color 120ms ease;
}

.utils-view-container .utils-viewtoggle .utils-viewtoggle-button svg {
  display: block;
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.utils-view-container .utils-viewtoggle .utils-viewtoggle-button:hover {
  color: var(--of-slate-dark, #2F3946);
  border-color: rgba(69, 81, 97, 0.4);
}

.utils-view-container .utils-viewtoggle .utils-viewtoggle-button.active {
  color: #ffffff;
  background: var(--of-slate-dark, #2F3946);
  border-color: var(--of-slate-dark, #2F3946);
}

.utils-view-container .utils-viewtoggle .utils-viewtoggle-button:focus-visible {
  box-shadow: 0 0 0 2px rgba(69, 81, 97, 0.3);
}

/* The quiet labels. Sort by is font-size:0 below 860px on purpose (the theme
   hides it that way and shows the modal button instead), so its size is set
   inside the desktop query only, never here. */
.productgrid--utils .utils-sortby-title,
.utils-view-container .utils-viewtoggle-label {
  color: var(--of-khaki-dark, #6E6A3D);
  font-weight: 700;
  letter-spacing: 0.01em;
}

@media screen and (min-width: 860px) {
  .productgrid--utils .utils-sortby-title {
    font-size: 0.8125rem;
  }

  .utils-view-container .utils-viewtoggle-label {
    font-size: 0.8125rem;
  }

  /* The pill is the wrapper, so the chevron sits inside the border. */
  .utils-sortby .utils-sortby-select--wrapper {
    display: inline-flex;
    align-items: center;
    background: #ffffff;
    border: 1px solid rgba(69, 81, 97, 0.22);
    border-radius: 6px;
    transition: border-color 120ms ease, box-shadow 120ms ease;
  }

  .utils-sortby .utils-sortby-select--wrapper:hover {
    border-color: rgba(69, 81, 97, 0.4);
  }

  .utils-sortby .utils-sortby-select--wrapper:focus-within {
    border-color: var(--of-slate, #455161);
    box-shadow: 0 0 0 2px rgba(69, 81, 97, 0.18);
  }

  /* appearance:none is already on .form-field-select; this keeps the full
     select as the click target and just repaints it. */
  .utils-sortby .utils-sortby-select--wrapper .utils-sortby-select {
    height: auto;
    padding: 0.5rem 1.75rem 0.5rem 0.6875rem;
    color: var(--of-slate-dark, #2F3946);
    background-color: transparent;
    border: 0;
    box-shadow: none;
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.25;
  }

  .utils-sortby .utils-sortby-select--wrapper .utils-sortby-select:hover,
  .utils-sortby .utils-sortby-select--wrapper .utils-sortby-select:focus {
    background-color: transparent;
    border: 0;
    box-shadow: none;
  }

  .utils-sortby .utils-sortby-select--wrapper svg {
    top: 50%;
    right: 0.625rem;
    width: 10px;
    height: 7px;
    margin-top: 0;
    transform: translateY(-50%);
    color: var(--of-slate-dark, #2F3946);
  }
}

/* ==========================================================================
   OF filter UI treatments, phase 1 (2026-08-27): toggle chip, segmented
   ladder, metal tint dots. Rendered by faceted-filter-group.liquid when a
   group resolves a treatment (store-wide defaults + collection metafield
   custom.filter_ui). All treatments restyle the same data-filter-input
   anchors Empire's filter JS already binds to; the stock checkbox list is
   the fallback whenever a treatment cannot render.
   Spec: docs/filter-ui-enhancement-research-2026-08.md
   ========================================================================== */

/* Toggle chip (Stock Status, future booleans) */
.filter-form .of-filter-toggle-list {
  padding: 4px 0 2px;
}
.filter-form .of-filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid #c6cad1;
  border-radius: 999px;
  padding: 5px 14px 5px 10px;
  font-size: 13px;
  color: #455161;
  background: #fff;
  text-decoration: none;
  cursor: pointer;
}
.filter-form .of-filter-toggle__knob {
  width: 28px;
  height: 16px;
  background: #d5d8dd;
  border-radius: 999px;
  position: relative;
  flex: none;
  transition: background 0.15s ease;
}
.filter-form .of-filter-toggle__knob::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  top: 2px;
  left: 2px;
  transition: left 0.15s ease;
}
.filter-form .of-filter-toggle--on {
  border-color: #C04943;
  color: #C04943;
  font-weight: 600;
}
.filter-form .of-filter-toggle--on .of-filter-toggle__knob {
  background: #C04943;
}
.filter-form .of-filter-toggle--on .of-filter-toggle__knob::after {
  left: 14px;
}
.filter-form .of-filter-toggle[data-disabled] {
  opacity: 0.45;
  pointer-events: none;
}
.filter-form .of-filter-toggle:focus-visible {
  outline: 2px solid #C04943;
  outline-offset: 2px;
}

/* Segmented ladder (graded scales: saw gauge, file cut).
   Grid, not flex wrap: every chip fills an equal-width cell so the rows
   read as a tidy scale; long labels span two cells and step the font
   down instead of stretching their box. */
.filter-form .of-filter-ladder-list {
  /* Empire's accordion writes inline display/height here; keep it a
     plain block and put the grid on the inner .of-filter-ladder li. */
  list-style: none;
}
.filter-form .of-filter-ladder {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
  gap: 5px;
  padding: 4px 0 2px;
  list-style: none;
}
.filter-form .of-filter-ladder__item {
  display: block;
  margin: 0;
  min-width: 0;
}
.filter-form .of-filter-ladder__item--wide {
  grid-column: span 2;
}
.filter-form .of-filter-ladder__item--wide .of-filter-chip {
  font-size: 11px;
}
.filter-form .of-filter-chip {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #c6cad1;
  border-radius: 6px;
  font-size: 13px;
  color: #455161;
  background: #fff;
  text-decoration: none;
  cursor: pointer;
}
.filter-form .of-filter-chip:hover {
  border-color: #9aa1ab;
}
.filter-form .of-filter-chip--on {
  background: #C04943;
  border-color: #C04943;
  color: #fff;
  font-weight: 600;
}
.filter-form .of-filter-chip--zero {
  opacity: 0.35;
}
.filter-form .of-filter-chip:focus-visible {
  outline: 2px solid #C04943;
  outline-offset: 2px;
}
/* Metal tint dots */
.filter-form .of-metal-dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  flex: none;
  border: 1px solid rgba(0, 0, 0, 0.12);
  margin-right: 2px;
}

/* Second toggle row (negative value), same pill, small stack gap */
.filter-form .of-filter-toggle-row {
  margin-top: 6px;
}

/* AJAX swap loading state (of-filter-ajax.js) */
.shopify-section.of-filters-loading .productgrid--items,
.shopify-section.of-filters-loading .filter-form {
  opacity: 0.45;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

/* Toolbar Stock Status toggles (of-toolbar-stock-toggle.liquid): a
   single row of buttons styled to match the View As controls next to
   them (bordered squares, active state fills dark). Outside .filter-form
   so they carry their own scope. */
.of-toolbar-stock {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}
.of-toolbar-stock .of-filter-toggle {
  display: inline-flex;
  align-items: center;
  border: 1px solid #e3e5e9;
  border-radius: 4px;
  padding: 8px 14px;
  font-size: 13px;
  color: #455161;
  background: #fff;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1;
}
.of-toolbar-stock .of-filter-toggle:hover {
  border-color: #9aa1ab;
}
.of-toolbar-stock .of-filter-toggle--on {
  background: #2F3946;
  border-color: #2F3946;
  color: #fff;
}
.of-toolbar-stock .of-filter-toggle[data-disabled] {
  opacity: 0.45;
  pointer-events: none;
}
.of-toolbar-stock .of-filter-toggle:focus-visible {
  outline: 2px solid #C04943;
  outline-offset: 2px;
}
@media (max-width: 719px) {
  .of-toolbar-stock .of-filter-toggle {
    padding: 7px 10px;
    font-size: 12px;
  }
}
}

/* Pictorial value icons (icons treatment): monoline glyph before the
   label, inherits row color so active rows tint it for free. */
.filter-form .of-value-icon {
  display: inline-flex;
  flex: none;
  width: 20px;
  height: 20px;
  margin-right: 2px;
  color: #6b7280;
}
.filter-form .collection-filters__filter-list-item--active .of-value-icon {
  color: #C04943;
}
.filter-form .of-value-icon svg {
  display: block;
}

/* Segmented control (Voltage): one joined button group, boolean-like */
.filter-form .of-filter-segmented-list {
  list-style: none;
}
.filter-form .of-filter-segmented {
  /* Rhett: equal-size boxes, full width. Stacked rows, one per value. */
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 0 2px;
  list-style: none;
}
.filter-form .of-filter-segment {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  border: 1px solid #c6cad1;
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 13px;
  color: #455161;
  background: #fff;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.filter-form .of-filter-segment:hover {
  border-color: #9aa1ab;
}
.filter-form .of-filter-segment--on {
  background: #2F3946;
  border-color: #2F3946;
  color: #fff;
}
.filter-form .of-filter-segment[data-disabled] {
  opacity: 0.45;
  pointer-events: none;
}
.filter-form .of-filter-segment:focus-visible {
  outline: 2px solid #C04943;
  outline-offset: 2px;
  z-index: 1;
}

/* ==========================================================================
   Find-a-value input on long filter groups (of-filter-search.js)
   ==========================================================================
   The <li> is injected as the FIRST CHILD of the [data-accordion-content]
   ul, never as a sibling before it, so Empire's inline accordion writes
   keep owning that ul and the field hides and shows with its group.
   flex-basis 100% keeps it a full-width row inside the swatch grid, which
   is the one list layout that wraps its children. */
.filter-form .of-filter-find {
  list-style: none;
  width: 100%;
  flex: 0 0 100%;
  margin: 0;
  padding: 2px 0 8px;
}
.filter-form .of-filter-find__input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 7px 10px;
  border: 1.5px solid #c6cad1;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.3;
  color: #2F3946;
  background: #fff;
  -webkit-appearance: none;
  appearance: none;
}
.filter-form .of-filter-find__input::placeholder {
  color: #8b929c;
}
.filter-form .of-filter-find__input:focus {
  outline: none;
  border-color: #C04943;
}
.filter-form .of-filter-find__empty {
  display: block;
  padding: 6px 2px 0;
  font-size: 12px;
  color: #6b7280;
}
.filter-form .of-filter-find__empty[hidden] {
  display: none;
}

/* Rows filtered out by the field. !important because Empire's stock
   .collection-filters__filter-list-item sets display in theme.css and the
   swatch grid sets it again. */
.filter-form .of-filter-find-hidden {
  display: none !important;
}

/* While a query is live the show-more disclosure is forced open by the
   script, so its toggle would only offer to hide matches. Hide the toggle
   for the duration; it comes back the moment the field is cleared. */
.filter-form .of-filter-find-active .of-filter-show-more__summary {
  display: none;
}

/* Show-more opens like a drawer instead of an instant jump. Modern
   engines (interpolate-size + ::details-content) animate the height;
   everywhere else the details toggles instantly, exactly as before. */
.filter-form .of-filter-show-more__details {
  interpolate-size: allow-keywords;
}
.filter-form .of-filter-show-more__details::details-content {
  block-size: 0;
  overflow-y: clip;
  transition: block-size 0.28s ease, content-visibility 0.28s allow-discrete;
}
.filter-form .of-filter-show-more__details[open]::details-content {
  block-size: auto;
}
@media (prefers-reduced-motion: reduce) {
  .filter-form .of-filter-show-more__details::details-content {
    transition: none;
  }
}

/* Letters matched by the find-a-value field, highlighted in place. */
.filter-form .of-filter-find__hl {
  background: rgba(192, 73, 67, 0.16);
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
}