/* Copyright 2026 Collaterate. All rights reserved. */
/* Product discovery defaults, in a stylesheet of their own so they reach every storefront.
   main.scss imports this into storefront.css straight after global.css, where these rules used to sit, so a
   site on the core CSS gets the same rules in the same order. A theme using
   [[ template_header no_core_css="true" ]] (every MOD theme cloned from site 443) never links
   storefront.css, so template_header.jsp links this file on its own for it: without that, the search,
   browse, typeahead and recommendation components render with no layout at all on those sites. */
/********************** PRODUCT DISCOVERY **************************/
/* ---------------------------------------------------------------------------
   Product discovery components: recommendations and semantic search results.

   DEFAULTS ONLY. Storefronts get their own stylesheets and override from here,
   so this is a floor rather than a design: a grid that wraps, images that do
   not overflow their card, and long product names that break instead of
   pushing the layout sideways. Deliberately silent on color, type and spacing
   scale, because every theme has its own and this must not fight them.

   Naming follows the c- component convention (see .c-data-profiles-*).
   productDiscoveryAnalytics.js selects on data-collaterate-* attributes and
   never on these classes, so a theme may rename or restyle any of them without
   touching reporting.

   .c-search-pager-prev and .c-search-pager-next are emitted but deliberately
   NOT styled here: they are ordinary links and should inherit whatever the
   theme already does to links, rather than being given an appearance by this
   file that every theme then has to undo.
   --------------------------------------------------------------------------- */
.c-recs { margin: 1.5rem 0; }
.c-recs-title { margin: 0 0 0.75rem; }
/* A grid of equal tracks, auto-FILL rather than a wrapping flex row: empty tracks keep their width, so a short last
   row (8 best sellers as 5 and 3) or a two-result search keeps cards the size of every other card instead of
   stretching them across the row. min(12rem, 100%) lets one card fill a column narrower than 12rem. */
.c-recs-grid,
.c-search-results-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(min(12rem, 100%)), 1fr)); gap: 1rem; }
.c-recs-item,
.c-search-result { min-width: 0; max-width: 100%; }
/* A square box per thumbnail, so cards line up whatever each product photo's shape, and the box holds its space
   before the image loads (the img tags are lazy). contain, not cover: a product photo must not be cropped. */
.c-recs-item-thumb,
.c-search-result-thumb { aspect-ratio: 1 / 1; }
.c-recs-item-link,
.c-search-result-name a { text-decoration: none; color: inherit; }
.c-recs-item-link { display: block; }
.c-recs-item-thumb img,
.c-search-result-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
.c-recs-item-name,
.c-search-result-name { margin-top: 0.5rem; overflow-wrap: anywhere; }

.c-search-results { margin: 1rem 0; }
.c-search-results-count { margin-bottom: 1rem; }
.c-search-results-empty,
.c-search-results-unavailable { margin: 1rem 0; }
.c-search-results-empty { display: grid; gap: 0.75rem; }
.c-search-results-empty-title, .c-search-results-empty-clear { margin: 0; }
.c-search-results-empty-form { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; max-width: 32rem; }
.c-search-results-empty-label { flex: 1 0 100%; }
.c-search-results-empty-input { flex: 1 1 12rem; min-width: 0; }
.c-search-pager { display: flex; gap: 1rem; margin-top: 1.5rem; }

/* Search-box typeahead. Same footing as the components above: a floor, not a design.
   The panel needs position/z-index defaults because a dropdown that renders inline
   pushes the header layout around, which is not a thing a theme should have to
   discover. Everything else is left to the theme.

   .c-search-typeahead-option carries aria-selected, so a theme highlights the
   active row with [aria-selected="true"] rather than a class -- the attribute is
   what drives keyboard navigation, so the two cannot drift apart.

   .c-search-typeahead-submit is deliberately NOT styled here: it also carries the
   universal `btn` class, so it inherits whatever the theme already does to
   buttons instead of being given an appearance every theme then has to undo. */
/* Same reason as .c-search-answer[hidden] below: the panel ships hidden and is revealed by
   script, so a theme giving it a `display` value beats the browser's [hidden] and leaves an
   empty box under the search field on every page. Observed on site 518. */
.c-search-typeahead-panel[hidden] { display: none; }
.c-search-typeahead { position: relative; }
.c-search-typeahead-form { display: flex; gap: 0.5rem; }
.c-search-typeahead-input { flex: 1 1 auto; min-width: 0; }
.c-search-typeahead-panel {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 100;
	margin: 0.25rem 0 0;
	padding: 0;
	list-style: none;
	max-height: 20rem;
	overflow-y: auto;
	background: #fff;
	border: 1px solid #ccc;
}
/* Floating in the top layer (searchTypeahead.js, where the browser has the Popover API): placed against the
   viewport, with top, left and width set inline from the search box, so a header that clips the box cannot
   clip the panel. The rest undoes what the browser's own [popover] rules set that the rule above does not
   (they stretch the panel to the viewport's edges and give it their own text color). :where keeps this at the
   class's own specificity, so a theme's .c-search-typeahead-panel rule, loaded later, still wins. */
.c-search-typeahead-panel:where([popover]) {
	position: fixed;
	right: auto;
	bottom: auto;
	height: auto;
	color: inherit;
}
/* A row is a thumbnail beside a name and an optional description, not a bare text node. The
   thumbnail is OPTIONAL -- an empty imageLink is a REJECTED url, so the element is absent rather
   than empty, and there is nothing to reserve space for. */
.c-search-typeahead-option { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; cursor: pointer; overflow-wrap: anywhere; }
.c-search-typeahead-option[aria-selected="true"] { background: #f0f0f0; outline: 2px solid currentColor; outline-offset: -2px; }
.c-search-typeahead-option-thumb { flex: 0 0 auto; width: 2.5rem; height: 2.5rem; object-fit: cover; }
/* min-width:0 so a long name wraps inside the flex row instead of pushing the panel wider. */
.c-search-typeahead-option-body { min-width: 0; }
.c-search-typeahead-option-desc { display: block; font-size: 0.8125rem; opacity: 0.7; }

/* A query completion: a search PHRASE, not a product, so it is a single line with no thumbnail and
   sits in its own section above the products. */
.c-search-typeahead-suggestion { padding: 0.5rem 0.75rem; cursor: pointer; overflow-wrap: anywhere; }
.c-search-typeahead-suggestion[aria-selected="true"] { background: #f0f0f0; outline: 2px solid currentColor; outline-offset: -2px; }

/* A facet value ("Postcards" in "Product type"): a single line like a completion, with the group label
   beside it. Choosing one opens the search page filtered by that value. */
.c-search-typeahead-facet { padding: 0.5rem 0.75rem; cursor: pointer; overflow-wrap: anywhere; }
.c-search-typeahead-facet[aria-selected="true"] { background: #f0f0f0; outline: 2px solid currentColor; outline-offset: -2px; }
.c-search-typeahead-facet-group { font-size: 0.8125rem; opacity: 0.7; }

/* Section heading. The panel is sectioned so query completions and article hits can arrive as data
   rather than as a restructure; today only the products section has a source. role="presentation",
   so it is not an option and the keyboard steps over it. */
.c-search-typeahead-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.5rem 0.75rem; }
.c-search-typeahead-heading-label { font-size: 0.75rem; letter-spacing: 0.05em; opacity: 0.7; }

/* The section's action: runs the search rather than opening a product, so it is deliberately not
   styled to look like the product rows below it. It sits on the heading and is still an option, so
   it takes the same selected treatment. */
.c-search-typeahead-all { cursor: pointer; font-size: 0.8125rem; }
.c-search-typeahead-all[aria-selected="true"] { text-decoration: underline; outline: 2px solid currentColor; outline-offset: 2px; }

/* The active row. The tint alone is about 1.1:1 against a white panel, which nobody can see, so every
   active option also gets a 2px outline in the text's own color: as visible as the text itself, on any
   theme's panel color. Forced colors (Windows High Contrast) drop the tint entirely, so there the outline
   takes the system Highlight color, the one that mode reserves for a selection. */
@media (forced-colors: active) {
	.c-search-typeahead-option[aria-selected="true"],
	.c-search-typeahead-suggestion[aria-selected="true"],
	.c-search-typeahead-facet[aria-selected="true"],
	.c-search-typeahead-all[aria-selected="true"] { outline-color: Highlight; }
}

/* Search AI answer. Same footing as the components above: a floor, not a design.

   The only rule here that is doing real work is the [hidden] one. This container
   ships hidden and is revealed by script, and a theme that gives
   .c-search-answer a `display` value would override the browser's default
   [hidden] styling and show an empty block on every search page -- with the
   AI-generated label over nothing, which reads as a broken feature rather than
   an absent one. Stating it explicitly here means a theme has to mean it.

   .c-search-answer-label is deliberately understated rather than badge-like: it
   is a disclosure, and a theme that wants it louder can say so. A theme may also
   ask for no label at all with [[ semantic_search_answer label="" ]], which is
   why :empty collapses it instead of leaving a gap.

   is-loading is an OPT-IN hook, not a state you get for free. The script sets it
   while the request is outstanding, but the container is hidden for that whole
   window, so nothing shows by default -- and that is the intent: a spinner that
   may resolve to nothing after a minute is worse than no block at all. A theme
   that wants a skeleton opts in explicitly, e.g.
     .c-search-answer.is-loading[hidden] { display: block; }
   and owns the layout shift that follows. */
.c-search-answer[hidden] { display: none; }
.c-search-answer { margin: 0 0 1.5rem; }
.c-search-answer-label { font-size: 0.8125rem; opacity: 0.7; margin-bottom: 0.25rem; }
.c-search-answer-label:empty { display: none; }
.c-search-answer-body { line-height: 1.5; overflow-wrap: anywhere; }

/* Search facet sidebar. Same footing as the components above: a floor, not a design.

   The list is unstyled -- no bullets, no indent -- because a facet sidebar is
   navigation, not prose, and every theme already has its own nav styling that
   these defaults must not fight.

   [aria-current="true"] is the ONLY hook for the selected value, never a class
   of this component's own. The tag handler's bones file sets that attribute
   from the same boolean that drives data-facet-selected, so the styling hook
   and the assistive-tech state can never drift apart the way a class could. */
.c-search-facets-group { margin: 0 0 1.5rem; }
.c-search-facets-group-label { font-weight: bold; margin-bottom: 0.5rem; }
.c-search-facets-list { list-style: none; margin: 0; padding: 0; }
.c-search-facets-link { text-decoration: none; color: inherit; }
.c-search-facets-link[aria-current="true"] { font-weight: bold; text-decoration: underline; }

/* Search facets. Same footing as the components above: a floor, not a design.

   The lists are unstyled (no bullets, no indent) because a facet sidebar is navigation, not prose, and
   every theme already has its own nav styling that these defaults must not fight.

   Selection is styled from the ARIA state, never from a class of this component's own: the bones set
   aria-checked from the same boolean that drives data-facet-selected, so the styling hook and the
   assistive-technology state cannot drift apart. aria-current stays for the legacy two-group markup.

   The checkbox box is drawn with borders, not a glyph, so it needs no icon font and no emoji. */
.c-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.c-search-facets { margin: 0 0 1.5rem; }
/* Floor for the defaults a section and an h3 carry: a theme that styles bare section or h3 elements must not
   shift this block, and the heading must not inherit a large top margin from the browser. */
.c-search-facets-group:not(.c-search-facets-group--legacy) { padding: 0; }
.c-search-facets-group:not(.c-search-facets-group--legacy) .c-search-facets-group-label { display: inline-block; margin: 0 0.75rem 0.5rem 0; padding: 0; font-size: 1rem; font-weight: bold; }
/* The legacy display keeps the look of the old div markup on the new section and h3 elements. */
.c-search-facets-group--legacy { padding: 0; }
.c-search-facets-group--legacy .c-search-facets-group-label { margin: 0 0 0.5rem; padding: 0; font-size: inherit; }
.c-search-facets-clear { font-size: 0.8125rem; }
.c-search-facets-list { list-style: none; margin: 0; padding: 0; }
.c-search-facets-tree .c-search-facets-children { list-style: none; margin: 0; padding: 0 0 0 1.25rem; }
/* Collapsed means the platform's hideIt class, toggled by searchFacets.js. hideIt is one class at the top of this
   file, so a theme rule that gives the list a display value beats it and leaves a collapsed branch open. Paired
   with the c- class here, as the returns defaults do for a.continueButton.hideIt. */
.c-search-facets-children.hideIt { display: none; }
.c-search-facets-item { margin: 0; padding: 0.125rem 0; }
.c-search-facets-node { position: relative; }
.c-search-facets-group:not(.c-search-facets-group--legacy) .c-search-facets-link { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; color: inherit; }
.c-search-facets-group:not(.c-search-facets-group--legacy) .c-search-facets-link::before { content: ""; flex: 0 0 auto; width: 0.875rem; height: 0.875rem; border: 1px solid currentColor; box-sizing: border-box; }
.c-search-facets-link[aria-checked="true"] { font-weight: bold; }
.c-search-facets-link[aria-checked="true"]::before { background: currentColor; box-shadow: inset 0 0 0 2px #fff; }
.c-search-facets-link[aria-checked="mixed"]::before { background: linear-gradient(currentColor, currentColor) center / 60% 2px no-repeat; }
.c-search-facets-link[aria-current="true"] { font-weight: bold; text-decoration: underline; }
.c-search-facets-group:not(.c-search-facets-group--legacy) .c-search-facets-link[aria-current="true"]::before { content: none; }
.c-search-facets-group:not(.c-search-facets-group--legacy) .c-search-facets-link--button::before, .c-search-facets-group:not(.c-search-facets-group--legacy) .c-search-facets-link--switch::before { content: none; }
.c-search-facets-item .c-search-facets-link[data-facet-depth="1"] { margin-left: 1rem; }
.c-search-facets-item .c-search-facets-link[data-facet-depth="2"] { margin-left: 2rem; }
.c-search-facets-list--buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.c-search-facets-link--button { padding: 0.25rem 0.75rem; border: 1px solid currentColor; border-radius: 0.25rem; }
.c-search-facets-link--button[aria-pressed="true"] { font-weight: bold; box-shadow: inset 0 0 0 2px currentColor; }
.c-search-facets-dropdown { position: relative; display: inline-block; }
.c-search-facets-dropdown-panel { margin: 0.25rem 0 0; padding: 0.5rem 0.75rem; border: 1px solid #ccc; background: #fff; }
/* The same pairing for a closed dropdown: hideIt alone loses to a theme rule that sets display on the panel. */
.c-search-facets-dropdown-panel.hideIt { display: none; }
.c-search-facets-link--switch::after { content: ""; order: -1; flex: 0 0 auto; width: 2rem; height: 1rem; box-sizing: border-box; border: 1px solid currentColor; border-radius: 1rem; background: radial-gradient(circle at 0.5rem 50%, currentColor 0.3rem, transparent 0.32rem); }
.c-search-facets-link--switch[aria-checked="true"] { font-weight: bold; }
.c-search-facets-link--switch[aria-checked="true"]::after { background: radial-gradient(circle at calc(100% - 0.5rem) 50%, currentColor 0.3rem, transparent 0.32rem); }
.c-search-facets-count { opacity: 0.7; font-weight: normal; }
.c-search-facets-toggles { display: block; }
.c-search-facets-toggle { display: inline-block; width: 1.25rem; height: 1.25rem; margin: 0 0.25rem 0 0; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; vertical-align: middle; }
.c-search-facets-toggle::before { content: ""; display: block; width: 0.45rem; height: 0.45rem; margin: 0.35rem auto 0; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.c-search-facets-toggle[aria-expanded="false"]::before { transform: rotate(-45deg); margin-top: 0.4rem; }
.c-search-facets-link:focus-visible, .c-search-facets-toggle:focus-visible, .c-search-facets-dropdown-toggle:focus-visible, .c-search-facets-clear:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* Applied filters. A chip is an a.button.secondary link with role button, so a theme's button styling applies and
   the rules below are only the floor; the cross is aria-hidden and the accessible name ("Remove Stock: Linen") comes
   from aria-label. A notice is a paragraph with a left rule, because a boxed alert would read as an error and
   neither notice is one. */
.c-search-applied { margin: 0 0 1rem; }
.c-search-applied-notice { margin: 0 0 0.75rem; padding: 0.5rem 0.75rem; border-left: 3px solid #9db8d6; background: #f4f7fb; color: #333; font-size: 0.875rem; }
.c-search-applied-notice--relaxed { border-left-color: #9db8d6; background: #f4f7fb; }
.c-search-applied-notice--rejected { border-left-color: #c9a227; background: #fbf7e6; }
/* The notices carry the platform's userMessages class so a theme's message styling applies, and on the platform that
   class is a banner fixed to the top of the window. These resets keep the notice in the page flow. */
.c-search-applied-notice.userMessages { position: static; z-index: auto; box-shadow: none; }
.c-search-applied-notice.userMessages:before { content: none; }
.c-search-applied-list { display: inline-flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0 0.75rem 0 0; padding: 0; vertical-align: middle; }
.c-search-applied-item { margin: 0; }
.c-search-applied-chip { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.25rem 0.625rem; border: 1px solid #ccc; border-radius: 1rem; background: #fff; color: inherit; text-decoration: none; font-size: 0.875rem; }
.c-search-applied-chip:hover { background: #f0f0f0; }
.c-search-applied-chip:focus-visible, .c-search-applied-clear:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.c-search-applied-clear { font-size: 0.875rem; }
/* Suggestions are offers, not state: a dashed outline marks a chip that has NOT been applied yet. */
.c-search-applied-suggestions { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0.5rem 0 0; padding: 0; }
.c-search-applied-suggestion { display: inline-block; padding: 0.25rem 0.625rem; border: 1px dashed currentColor; border-radius: 1rem; color: inherit; text-decoration: none; font-size: 0.875rem; }
.c-search-applied-suggestion:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
/* Size floors for the chips, Clear all and "Narrow to". They carry the theme's own button classes so they look
   native, and some themes size those for a hero call to action: 10px uppercase text in an 18px pill on the
   site 443 family. These pin a readable size and a 32px target (WCAG's floor is 24px) and leave color,
   border and font to the theme. The extra a and container raise them above a theme's generic .button and
   .button.secondary rules; restyle with .c-search-applied a.c-search-applied-chip or something stronger. */
.c-search-applied a.c-search-applied-chip,
.c-search-applied a.c-search-applied-clear,
.c-search-applied a.c-search-applied-suggestion {
	box-sizing: border-box;
	min-width: 0;
	min-height: 2rem;
	height: auto;
	font-size: 0.875rem;
	line-height: 1.25;
	letter-spacing: normal;
	text-transform: none;
	vertical-align: middle;
}
.c-search-applied a.c-search-applied-clear { display: inline-flex; align-items: center; padding: 0.25rem 0.625rem; }
.c-search-applied a.c-search-applied-suggestion { display: inline-flex; align-items: center; }
/* The group name is told apart by weight, not by fading it: 0.7 opacity on a theme's grey button was unreadable. */
.c-search-applied .c-search-applied-chip-group { opacity: 1; font-weight: 600; }

/* The phone filter disclosure (searchFacets.js shows it below 48em and collapses the groups behind it). A full-width
   control with the applied-filter count, so the first product sits under one button, not under every group. */
.c-search-facets-panel-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 2.75rem;
	margin: 0 0 0.75rem; padding: 0.5rem 0.75rem; border: 1px solid #ccc; border-radius: 0.25rem; background: #fff; color: inherit;
	font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.c-search-facets-panel-toggle.hideIt { display: none; }
.c-search-facets-panel-toggle::after { content: ""; width: 0.5rem; height: 0.5rem; margin-left: 0.75rem; border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.c-search-facets-panel-toggle[aria-expanded="true"]::after { transform: rotate(-135deg); }
.c-search-facets-panel-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.c-search-facets-panel-count { margin-left: 0.25rem; font-weight: 400; }
.c-search-facets-body.hideIt { display: none; }

/* A default search layout, the same shape browse already has: put the facets tag inside .c-search-layout-filters
   and the results tag inside .c-search-layout-results in search.html. Side by side when there is room, filters first
   when there is not, and on a phone the disclosure above keeps them to one button. */
.c-search-layout { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.c-search-layout-filters { flex: 1 1 14rem; min-width: 0; }
.c-search-layout-results { flex: 3 1 24rem; min-width: 0; }

/* Browse landing pages: the filters beside the grid, stacked on a narrow screen. The grid itself reuses the
   c-search-results-grid and c-search-result rules above. */
.c-browse { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.c-browse-filters { flex: 1 1 14rem; min-width: 0; }
.c-browse-results { flex: 3 1 24rem; min-width: 0; }
.c-browse-count { margin: 0 0 0.75rem; font-size: 0.875rem; opacity: 0.8; }
.c-browse-empty, .c-browse-unavailable { margin: 1rem 0; }
.c-browse-pager { display: flex; gap: 1rem; margin-top: 1.5rem; }
.c-browse-pager-prev:focus-visible, .c-browse-pager-next:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* The hidden holder of window.searchResultsGlobals (search and browse). Paired with hideIt for the same reason as the
   collapsing lists: a theme rule that sets display on a div would otherwise print the escaped JSON on the page. */
.c-search-results-globals.hideIt { display: none; }

/* Search article strip. Same footing as the components above: a floor, not a design.

   The list is unstyled -- no bullets, no indent -- and laid out with wrap/gap rather than a
   grid template, matching the product grid above: a theme that wants a fixed column count
   already restyles that grid and would restyle this one the same way.

   .c-search-articles-image gets an explicit width/height/object-fit because the thumbnail is
   OPTIONAL (see the bones file): when it is missing there is no element here at all, so there
   is nothing to reserve space for, and when it is present it must not distort the card. */
.c-search-articles { margin: 1.5rem 0; }
.c-search-articles-title { margin: 0 0 1rem; }
.c-search-articles-list { display: flex; flex-wrap: wrap; gap: 1rem; list-style: none; margin: 0; padding: 0; }
.c-search-articles-item { flex: 1 1 12rem; min-width: 0; max-width: 100%; }
.c-search-articles-link { display: block; text-decoration: none; color: inherit; }
.c-search-articles-image { display: block; width: 100%; height: auto; object-fit: cover; }
.c-search-articles-heading { display: block; margin-top: 0.5rem; overflow-wrap: anywhere; }
.c-search-articles-snippet { margin: 0.25rem 0 0; overflow-wrap: anywhere; }

/* Popular searches. Same footing as the components above: a floor, not a design.

   Global, so this renders in a header on every page as well as an empty-results state on
   search.html. The list is laid out inline, not stacked, because a header has width to spare and no
   height to spare -- the opposite tradeoff from the article strip above. */
.c-popular-searches { margin: 1rem 0; }
.c-popular-searches-title { margin: 0 0 0.5rem; }
.c-popular-searches-list { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; list-style: none; margin: 0; padding: 0; }
.c-popular-searches-link { text-decoration: none; color: inherit; }