/* Shown only when the live catalog could not be read and the storefront fell
   back to the snapshot packaged with this release. catalog-live-client.js
   creates the element and places it in the flow directly after the site header.
   It used to be a fixed band pinned to the top instead, which put it over the
   header: measured in Chrome, that made every header control unreachable at
   390px on all six pages, so the outage notice took away the menu, the search
   and the cart exactly when the customer needed them. No floating band fits
   here at all — the favourites sync notice holds the bottom edge, and on the
   product page so do the storage note and the mobile purchase bar — so the
   notice sits in the flow, where it cannot cover anything.
   Being in the flow means the content below moves down by the notice's height
   (71–125px, measured at 560–320px) at the moment the catalog read fails, a
   second or so after the page appears. That shift is the price of never covering a control; a band
   reserved in advance would show an empty strip on every healthy load.
   The message keeps a 280px minimum, room for two lines, and the button wraps under it whenever
   the two no longer fit side by side, at whatever width that happens. */
.catalog-state-notice { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; row-gap: 6px; column-gap: 18px; padding: 13px max(20px, env(safe-area-inset-right, 0px)) 13px max(20px, env(safe-area-inset-left, 0px)); border-bottom: 1px solid #d8cbb2; background: #fdf6e7; color: #6b5230; font: 400 14px/1.7 var(--font-display-sans); }
.catalog-state-notice[hidden] { display: none; }
.catalog-state-notice > span { flex: 1 1 280px; }
.catalog-state-notice button { flex: 0 0 auto; min-height: 44px; padding: 8px 0; border: 0; color: inherit; background: none; font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
@media(max-width:390px) { .catalog-state-notice { padding: 12px 15px; } }