/* ==========================================================================
   Colour wall - shared by the /benjamin-moore-varna landing page and the
   homepage.

   Everything is scoped under .cw. The landing page is standalone and loads
   only lp.css; the homepage loads bootstrap + style.css. A single unscoped
   rule here would wreck one of the two, so there are none - no bare `body`,
   `img`, `a` or `*` selectors, and the design tokens sit on .cw rather than
   on :root.

   --tint / --tint-rgb are deliberately NOT declared here. The landing page
   sets them on <body>, because its sticky bar, buttons and finish swatch all
   take the accent; the homepage sets them on .cw itself, so the tint stops at
   the section instead of bleeding into Bootstrap. Declaring them here would
   shadow the landing page's inherited value and freeze the section at the
   default. The usages below carry the default as a var() fallback instead.
   ========================================================================== */

.cw{
     --cw-paper: #F4F5F3;
     --cw-ink: #15171A;
     --cw-ink-2: #6A6F74;
     --cw-rule: #D6D8D2;

     --cw-wrap: 1240px;
     --cw-gut: clamp(20px, 5vw, 64px);

     --cw-display: "Spectral", Georgia, "Times New Roman", serif;
     --cw-body: "Golos Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

/* Homepage mount: take the host page's typeface instead of the landing page's.
   Both tokens are set to `inherit` rather than to Fira Sans by name, so this
   follows the site's font wherever it goes and never drifts out of sync with
   style.css. The substitution resolves as font-family:inherit on .cw, which
   picks up the page, and again on the headings, which pick up .cw.

   The tracking is relaxed at the same time: -0.022em was tuned for Spectral, a
   serif that sets tight, and it reads as cramped on a sans. */
.cw--host-type{
     --cw-display: inherit;
     --cw-body: inherit;
}
.cw--host-type .cw__h2{ letter-spacing: -0.01em; }
.cw--host-type .deck__name{ letter-spacing: 0; }

/* The section carries its own typographic ground rather than inheriting the
   host page's, so it reads the same on both. */
.cw,
.cw *,
.cw *::before,
.cw *::after{ box-sizing: border-box; }

.cw{
     padding: clamp(72px, 9vw, 128px) 0;
     border-top: 1px solid var(--cw-rule);
     background: var(--cw-paper);
     color: var(--cw-ink);
     font-family: var(--cw-body);
     font-size: 17px;
     line-height: 1.62;
     font-weight: 400;
     text-align: left;
     transition: background-color .55s ease;
}

.cw a{ color: inherit; text-decoration: none; }
.cw img{ max-width: 100%; height: auto; display: block; }
.cw button,
.cw input{ font: inherit; color: inherit; margin: 0; }
.cw :focus-visible{
     outline: 2px solid var(--tint, #434B56);
     outline-offset: 3px;
}

/* Choosing a family washes this section in that family's colour and takes the
   heading with it. This is the one place the tint is allowed to be loud: it is
   where the interaction happens, so it is the only place you would see it.
   The wash stays off for "Всички" - a default tint would just read as a
   coloured section rather than as a response.

   The wash is painted as a gradient layer over the paper rather than as a
   translucent background-color, so it composites against this section's own
   paper on either host page instead of against whatever sits behind it. */
.cw.is-tinted{
     background-image: linear-gradient(
          rgba(var(--tint-rgb, 67,75,86), .09),
          rgba(var(--tint-rgb, 67,75,86), .09)
     );
}
.cw .cw__h2,
.cw .deck__name{ transition: color .55s ease; }
/* every family tint clears 3:1, which is the bar for large text */
.cw.is-tinted .cw__h2,
.cw.is-tinted .deck__name{ color: var(--tint, #434B56); }

.cw__wrap{
     max-width: var(--cw-wrap);
     margin: 0 auto;
     padding: 0 var(--cw-gut);
}

/* `h2` alone would collide with Bootstrap's heading utility class on the
   homepage, so the wall's type helpers are prefixed. */
.cw .cw__h2{
     font-family: var(--cw-display);
     font-weight: 600;
     font-size: clamp(2rem, 4.4vw, 3.4rem);
     line-height: 1.02;
     letter-spacing: -0.022em;
     margin: 0 0 24px;
     color: inherit;
     text-transform: none;
}
.cw .cw__lede{
     max-width: 46ch;
     color: var(--cw-ink-2);
     margin: 0 0 44px;
}
.cw .cw__link{
     border-bottom: 1px solid var(--tint, #434B56);
     padding-bottom: 2px;
     font-weight: 500;
     transition: border-color .4s ease;
}
.cw .cw__link:hover{ border-bottom-width: 2px; }
.cw .cw__more{ margin: 0; }

/* Search runs over the whole catalogue, not just the chips rendered on the
   page. A designer arrives already knowing the code they want. */
.cw .find{ margin-bottom: 28px; max-width: 560px; }
.cw .cw__label{
     display: block;
     font-size: 0.7rem;
     font-weight: 600;
     letter-spacing: 0.14em;
     text-transform: uppercase;
     color: var(--cw-ink-2);
     margin: 0 0 10px;
}
.cw .find__box{ display: flex; gap: 8px; align-items: stretch; }
.cw .find__box input{
     flex: 1 1 auto;
     min-width: 0;
     background: transparent;
     border: 1px solid var(--cw-rule);
     border-radius: 0;
     padding: 14px 16px;
     height: auto;
     transition: border-color .2s ease;
     -webkit-appearance: none;
     appearance: none;
}
.cw .find__box input:focus{ border-color: var(--tint, #434B56); outline: none; box-shadow: none; }
.cw .find__box input::-webkit-search-cancel-button{ display: none; }
.cw .find__clear{
     background: none;
     border: 1px solid var(--cw-rule);
     border-radius: 0;
     padding: 0 16px;
     font-size: 0.72rem;
     font-weight: 600;
     letter-spacing: 0.1em;
     text-transform: uppercase;
     color: var(--cw-ink-2);
     cursor: pointer;
     white-space: nowrap;
}
.cw .find__clear:hover{ border-color: var(--cw-ink); color: var(--cw-ink); }
.cw .find__note{
     margin: 12px 0 0;
     font-size: 0.8rem;
     color: var(--cw-ink-2);
}

.cw .results{
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
     gap: 2px;
     margin-bottom: 44px;
     background: var(--cw-paper);
}
.cw .results .chip{ aspect-ratio: 1 / 1.16; }
/* you searched for a specific colour - its name and code stay on screen
   rather than hiding behind a hover you would have to hunt for */
.cw .results .chip__meta{ opacity: 1; }

.cw .fams{
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
     margin-bottom: 40px;
}
.cw .fam{
     display: inline-flex;
     align-items: center;
     gap: 8px;
     background: none;
     border: 1px solid var(--cw-rule);
     border-radius: 0;
     padding: 9px 16px;
     font-size: 0.82rem;
     line-height: 1.62;
     cursor: pointer;
     transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.cw .fam:hover{ border-color: var(--cw-ink); }
.cw .fam.is-on{ background: var(--cw-ink); color: var(--cw-paper); border-color: var(--cw-ink); }
/* the outline keeps the palest family swatches (White, Off-White) visible */
.cw .fam__dot{ width: 11px; height: 11px; display: block; box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); }

/* The default view is a colour card, not a wall of squares: one labelled band
   per family, so thousands of colours arrive as twelve readable lines instead
   of one undifferentiated block. */
.cw .deck{ margin-bottom: 44px; }
.cw .deck__row{
     display: grid;
     grid-template-columns: 180px minmax(0, 1fr);
     gap: 28px;
     align-items: center;
     padding: 14px 0;
     border-bottom: 1px solid var(--cw-rule);
}
.cw .deck__row:first-child{ border-top: 1px solid var(--cw-rule); }
.cw .deck__label{ margin: 0; display: flex; flex-direction: column; gap: 3px; }
.cw .deck__name{
     font-family: var(--cw-display);
     font-weight: 600;
     font-size: 1.18rem;
     letter-spacing: -0.01em;
     text-transform: none;
}
.cw .deck__count{
     font-size: 0.66rem;
     font-weight: 600;
     letter-spacing: 0.14em;
     text-transform: uppercase;
     color: var(--cw-ink-2);
}
/* The chips always sit on paper, never on the section wash. The 2px gaps show
   this background through, so on a tinted section the pale end of that very
   family would otherwise dissolve into it - the wash would hide the colours it
   is meant to be presenting. */
.cw .deck__strip{ display: flex; gap: 2px; background: var(--cw-paper); }
/* A square at every width. The width comes from flex, the height follows it -
   a fixed height instead made the chip a sliver whenever the strip was narrow
   (38px at iPad portrait) and a letterbox whenever it was wide. At full desktop
   width this resolves to 73.5px, which is what the fixed 74px was. */
.cw .deck__strip .chip{ flex: 1 1 0; height: auto; aspect-ratio: 1 / 1; }

.cw .chip{
     position: relative;
     display: flex;
     align-items: flex-end;
     overflow: hidden;
     transition: transform .22s ease;
}
.cw .chip:hover{ transform: translateY(-4px); z-index: 2; }
.cw .chip__meta{
     width: 100%;
     padding: 8px 9px 9px;
     background: var(--cw-paper);
     opacity: 0;
     transition: opacity .18s ease;
}
.cw .chip:hover .chip__meta,
.cw .chip:focus-visible .chip__meta{ opacity: 1; }
.cw .chip__name{
     display: block;
     font-size: 0.72rem;
     font-weight: 600;
     line-height: 1.2;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
}
.cw .chip__code{
     display: block;
     font-size: 0.66rem;
     letter-spacing: 0.08em;
     color: var(--cw-ink-2);
}

/* the card shows twelve per family on desktop, six on a phone (below that the
   chips become 37px slivers and read as a barcode); opening a family reveals
   the whole sample at any width */
.cw .chip[data-tier="2"]{ display: none; }
.cw .deck__row[hidden]{ display: none; }

/* the opened family drops the label to a heading and spreads into a grid */
.cw .deck.is-filtered .deck__row{
     grid-template-columns: minmax(0, 1fr);
     gap: 18px;
     padding: 4px 0 0;
     border: 0;
}
.cw .deck.is-filtered .deck__name{ font-size: clamp(1.6rem, 3vw, 2.2rem); }
.cw .deck.is-filtered .deck__strip{
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
     gap: 2px;
     background: var(--cw-paper);
}
.cw .deck.is-filtered .deck__strip .chip{ height: auto; aspect-ratio: 1 / 1.16; }
.cw .deck.is-filtered .chip[data-tier="1"],
.cw .deck.is-filtered .chip[data-tier="2"]{ display: flex; }

/* 1000px, not 700px. The label's 180px side column is what squeezes the strip,
   and at 768px - iPad portrait, or a half-screen window - twelve chips came out
   38px wide. This stylesheet already warned about that width ("the chips become
   37px slivers and read as a barcode"); the breakpoint was simply set below
   where the problem starts. Stacking the label hands the strip its full width
   back and the twelve land at ~56px. */
@media (max-width: 1000px){
     .cw .deck__row{ grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 18px 0; }
     .cw .deck__label{ flex-direction: row; align-items: baseline; gap: 10px; }
}

@media (max-width: 700px){
     /* twelve chips would be under 50px below this width, so the band halves to
        six and each one stays thumb-sized */
     .cw .chip[data-tier="1"]{ display: none; }
     .cw .deck.is-filtered .deck__strip{ grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
}

/* Touch devices have no hover, so a label can never be revealed on demand - it
   is either there from the start or not at all. It can only be there where the
   chip is big enough to hold it. In the closed band a chip is 53px on a phone
   and the label is 48px of that: the colour, which is the entire point of a
   swatch, is cut to a 5px sliver, and a name long enough to wrap buries it
   completely.

   So on touch the label appears on the big chips only - an opened family and
   the search results - and the closed band shows colour alone, which is what it
   shows on a desktop until you hover anyway. Tapping a family opens it, and
   that is where the names are legible. Nothing is lost to assistive technology:
   the name and code stay in the DOM and in each link's title. */
@media (hover: none){
     .cw .chip__meta{ background: rgba(244,245,243,.92); }
     .cw .deck.is-filtered .deck__strip .chip__meta{ opacity: 1; }
}

@media (prefers-reduced-motion: reduce){
     .cw *{ animation: none !important; transition: none !important; }
}