/* The page comes from the live store of the brand. The stylesheet of that
   store paints the header, the cards and the buttons. The rules here hold the
   parts that the old application built on the server: the grid of the cards,
   the bar of the preview and the rows of the cart. */

.cw-bar {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
  background: #111111;
  color: #ffffff;
  font-size: 13px;
  padding: 8px 24px;
}
/* The bar of the preview holds the state of the service and the two links.
   The header of each brand holds those two links at a wide window, so no
   reader needs the bar there. The header of a narrow window holds them
   inside a drawer, so the bar stands again under 760 pixels. */
.cw-bar { display: none !important; }
@media (max-width: 759px) {
  /* The bar stands in a column of the brand. That column stretches each
     child to the height of the page. The rules below hold one row at the
     top of that column. */
  .cw-bar {
    display: flex !important;
    width: 100%;
    /* The column of the brand is a row of flex. The bar therefore takes the
       whole width, so the content of the page keeps its own line. */
    flex: 1 1 100%;
    order: -1;
    align-self: flex-start;
    height: auto;
  }
}
.cw-bar a { color: #ffffff; }
.cw-bar__spacer { flex: 1 1 24px; }
#cwState { opacity: .75; }

.cw-mount { display: block; }

.cw-toolbar {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 16px;
}
.cw-toolbar__search { display: flex; gap: 8px; flex: 1 1 20rem; }
.cw-toolbar__search input { flex: 1 1 auto; padding: 8px; }
.cw-toolbar__count { font-size: 13px; opacity: .8; }

/* The strip of the categories scrolls sideways when the names pass the
   width of the page. The bar of that scroll stood open on the page, so the
   two rules below hide the bar and keep the scroll. */
.cw-cats {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 8px;
  margin-bottom: 16px;
  /* The thin bar gives the reader the cue of more content, and it
     holds none of the weight of the bar of the system. */
  scrollbar-width: thin;
  scrollbar-color: rgba(128, 128, 128, 0.5) transparent;
}
.cw-cats::-webkit-scrollbar { height: 6px; }
.cw-cats::-webkit-scrollbar-thumb { background: rgba(128, 128, 128, 0.5); }
.cw-cats__link { font-size: 13px; white-space: nowrap; }
.cw-cats__link[aria-current="true"] { font-weight: 700; text-decoration: underline; }

/* The listing page holds the filter rail at the left side and the cards at
   the right side, as the legacy page does. The legacy page of Trijicon
   holds four widths of that rail:
     under 760 pixels:     no rail, one column of the page.
     760 to 974 pixels:    rail 190, gutter 30, card padding 12.
     975 to 1399 pixels:   rail 250, gutter 30, card padding 12.
     1400 to 1599 pixels:  rail 250, gutter 30, card padding 16.
     1600 pixels and over: rail 340, gutter 30, card padding 20.
   The legacy page of Ameriglo holds another design, so the four widths
   below name the brand Trijicon. Every other brand keeps the earlier rail
   of 240 pixels. */
.cw-listing {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  box-sizing: border-box;
}
@media (max-width: 975px) {
  .cw-listing { grid-template-columns: minmax(0, 1fr); }
}
.cw-brand-trijicon .cw-listing {
  grid-template-columns: minmax(0, 1fr);
  gap: 30px;
  /* The legacy page holds 10 pixels at each side under 760 pixels. */
  padding-left: 10px;
  padding-right: 10px;
}
@media (min-width: 760px) {
  .cw-brand-trijicon .cw-listing {
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 20px;
    padding-left: 0;
    padding-right: 20px;
  }
}
@media (min-width: 975px) {
  .cw-brand-trijicon .cw-listing {
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 30px;
    padding-right: 30px;
  }
}
@media (min-width: 1600px) {
  .cw-brand-trijicon .cw-listing { grid-template-columns: 340px minmax(0, 1fr); }
}
/* The style of the brand gives the rail of the filters a width of its own.
   That width passes the column of the grid, so the rail covers the first
   card. The rail below takes the width of its column. */
.cw-listing .cw-filters {
  width: auto;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.cw-filters { font-size: 14px; line-height: 1.4; }
/* The preview holds one control that opens the filters where the page
   holds no rail. The page of Trijicon holds no rail under 760 pixels. The
   page of Ameriglo holds no rail under 976 pixels. */
.cw-filters__toggle { display: none; }
@media (max-width: 975px) {
  .cw-filters__toggle {
    display: block;
    width: 100%;
    margin-bottom: 12px;
    padding: 10px;
    background: none;
    border: 1px solid currentColor;
    color: inherit;
    font: inherit;
    cursor: pointer;
  }
  .cw-filters { display: none; }
  .cw-filters--open { display: block; }
}
@media (min-width: 760px) {
  .cw-brand-trijicon .cw-filters__toggle { display: none; }
}
/* The head of the deployed page holds an older copy of these rules. That
   copy hides the rail up to 975 pixels. The rule below names the rail
   inside the listing of Trijicon, so it beats that copy before the next
   deploy. */
@media (min-width: 760px) {
  .cw-brand-trijicon .cw-listing .cw-filters { display: block; }
}
.cw-filters__head { font-size: 16px; margin: 0 0 8px; text-transform: uppercase; }
.cw-filters__block { margin-top: 18px; border-top: 1px solid rgba(128, 128, 128, 0.4); padding-top: 12px; }
.cw-filters__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cw-filters__label { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; }
.cw-filters__current { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; }
.cw-filters__drop {
  background: none;
  border: 1px solid currentColor;
  padding: 4px 8px;
  cursor: pointer;
  color: inherit;
  font: inherit;
  text-align: left;
}
.cw-toolbar__sort { display: flex; gap: 8px; align-items: center; }
.cw-hide {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* The legacy page of Trijicon holds two cards in a row under 760 pixels,
   three cards from 760 to 974 pixels, and four cards at 975 pixels and
   over. The page of Ameriglo holds another design, so the three widths
   below name the brand Trijicon. */
.cw-cards {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
}
@media (max-width: 1024px) { .cw-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .cw-cards { grid-template-columns: minmax(0, 1fr); } }
.cw-brand-trijicon .cw-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 760px) {
  .cw-brand-trijicon .cw-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 975px) {
  .cw-brand-trijicon .cw-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* The legacy card of Trijicon holds a margin at each side, so the row holds
   an inset and a gap of the same value: 10 and 20 under 1400 pixels, 15 and
   30 from 1400 to 1599, 20 and 40 at 1600 and over. */
.cw-brand-trijicon .cw-cards {
  gap: 20px;
  padding-left: 10px;
  padding-right: 10px;
}
@media (min-width: 1400px) {
  .cw-brand-trijicon .cw-cards {
    gap: 30px;
    padding-left: 15px;
    padding-right: 15px;
  }
}
@media (min-width: 1600px) {
  .cw-brand-trijicon .cw-cards {
    gap: 40px;
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* The stylesheet of the brand sizes a card with a percent of its parent:
   `.product-card { width: calc(25% - 30px) }` above 1399 pixels. That parent
   was one wide row of the legacy page. The parent here is one cell of the
   grid, so that percent gives a strip of 39 pixels. Each card therefore
   takes the whole cell, and the margins of the legacy row go. */
.cw-cards .product-card {
  width: auto;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding: 16px;
}
/* The bar of the control of the legacy card holds a negative margin equal
   to the padding of that card. The card of the legacy page of Trijicon
   holds 12, 16 or 20 pixels of padding at the three widths. A margin of
   another value passes the card and the edge of the page. */
.cw-cards .product-card__btns {
  margin-left: -16px;
  margin-right: -16px;
  width: auto;
}
.cw-brand-trijicon .cw-cards .product-card { padding: 12px; }
.cw-brand-trijicon .cw-cards .product-card__btns {
  margin-left: -12px;
  margin-right: -12px;
}
@media (min-width: 1400px) {
  .cw-brand-trijicon .cw-cards .product-card { padding: 16px; }
  .cw-brand-trijicon .cw-cards .product-card__btns {
    margin-left: -16px;
    margin-right: -16px;
  }
}
@media (min-width: 1600px) {
  .cw-brand-trijicon .cw-cards .product-card { padding: 20px; }
  .cw-brand-trijicon .cw-cards .product-card__btns {
    margin-left: -20px;
    margin-right: -20px;
  }
}
/* The card of Trijicon stands on a white panel with dark text. The card of
   Ameriglo stands on a dark panel with white text, and that brand keeps its
   own colours. */
.cw-brand-trijicon .cw-cards .product-card {
  background: #ffffff;
  color: #333333;
}
.cw-cards .product-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; }
/* A product of the service can hold no picture. The card then shows one
   quiet block in place of that picture. The block of the media flexes, so
   the block below fills that height. A block of a smaller height leaves a
   white strip over the grey, and the tile then reads as unfinished. */
.product-card__img-wrapper:has(.cw-card__no-image),
.product-card__imgs:has(.cw-card__no-image) {
  display: flex;
  align-self: stretch;
  flex: 1 1 auto;
  /* The card of Ameriglo holds a padding at the top of that block, because
     the picture of the brand stands over it. The block below holds the
     words of the preview, so that padding leaves a white strip. */
  padding-top: 0;
}
.product-card__img-wrapper:has(.cw-card__no-image) > a,
.product-card__imgs:has(.cw-card__no-image) > a {
  display: flex;
  flex: 1 1 auto;
  width: 100%;
}
.cw-card__no-image {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 152px;
  text-decoration: none;
  background: #f2f2f2;
  color: #666666;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
/* The legacy card of Trijicon holds the natural ratio of the picture. The
   block of the media flexes, so the picture needs no ratio of its own. */
.cw-brand-trijicon .cw-cards .product-card img {
  width: auto;
  height: auto;
  max-width: 100%;
  aspect-ratio: auto;
}

.cw-pager { display: flex; gap: 16px; margin: 24px 0; }

.cw-detail { display: grid; gap: 24px; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
@media (max-width: 768px) { .cw-detail { grid-template-columns: minmax(0, 1fr); } }
.cw-gallery { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cw-gallery__img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: #ffffff; }
.cw-options label { display: block; font-size: 12px; margin: 12px 0 4px; }
.cw-options select, .cw-options input { width: 100%; padding: 8px; }

.cw-cart { background: #ffffff; color: #333333; padding: 16px; }
.cw-cart__row { display: flex; gap: 16px; align-items: center; justify-content: space-between;
                flex-wrap: wrap; border-bottom: 1px solid #cccccc; padding: 8px 0; }
.cw-cart__row > * { min-width: 0; overflow-wrap: anywhere; }
.cw-cart .cart__cell--price { font-weight: 700; }
.cw-cart .cart__photo-img { width: 72px; height: 54px; object-fit: contain; }
.cw-cart .cart__photo-and-descrip { display: flex; gap: 16px; align-items: center; }
.cw-sums { list-style: none; margin: 16px 0; padding: 0; max-width: 22rem; }
.cw-sums li { display: flex; justify-content: space-between; gap: 24px; padding: 4px 0; }
.cw-sums li.total { font-weight: 700; border-top: 1px solid #cccccc; margin-top: 8px; padding-top: 8px; }

.cw-checkout { background: #ffffff; color: #333333; padding: 16px; }
.cw-head { margin: 16px 0 8px; }
.cw-row { display: flex; gap: 16px; flex-wrap: wrap; }
.cw-row > div { flex: 1 1 13rem; }
.cw-row label { display: block; font-size: 12px; margin: 12px 0 4px; }
/* The list of the sums holds the code of the discount and the control that
   removes it. That row stands above the sums, and its control keeps the
   size of a quiet button of the brand. */
.cw-sums li.cw-sums__code {
  align-items: center;
  border-bottom: 1px solid #e3e3e3;
  padding-bottom: 8px;
  margin-bottom: 4px;
}
.cw-sums li.cw-sums__code button { margin: 0; padding: 6px 12px; font-size: 12px; }
.cw-row input, .cw-row select { width: 100%; padding: 8px; }
.cw-note { font-size: 13px; margin: 8px 0; }
/* The page of one brand holds a dark background, and the page of the other
   brand holds a light background. The fault therefore holds its own panel:
   white text on a red block. The contrast of that pair reads 5.9 to 1. */
.cw-fault {
  color: #ffffff;
  background-color: #a60016;
  border-left: 4px solid #ffffff;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  margin: 12px 0;
  padding: 10px 14px;
}

/* The old page holds filters and a sort list. The preview service answers
   none of them, so the pages of the preview hide those controls. The class
   cw-app names those pages. Every other page of the mirror keeps each block
   of the brand. The control of the comparison stays, because the preview
   holds the compare page of the brand.
   The block reefine holds the mount of the cards, so it stays. Its sidebar
   and its sort list go. */
.cw-app #reefine_sidebar,
.cw-app #models,
.cw-app .products__aside,
.cw-app .products__filters,
.cw-app .products__sort,
.cw-app .products__show-filters-phone-btn,
.cw-app .products__close-filters-phone-btn,
.cw-app .listbox__wrapper {
  display: none !important;
}

/* The search of the header and the finder answer nothing on a page of the
   preview, so they go there alone. Every other page of the mirror keeps those
   controls of the brand. */
/* The preview holds its own page of the search, so the field of the header
   stays on a page of the store. The product finder of the menu links to the
   listing page, so that control stays too. */

/* The row of the widgets of Ameriglo holds the links of the preview, so that
   row stays. Each control of the brand in that row answers nothing, so those
   controls go and the links stay. */
.cw-links .header__widget-btn--account,
.cw-links .header__widget-btn--cart,
.cw-links .header__widgets > [data-cw-native="cart"],
.cw-links .header__widgets > [data-cw-native="account"] {
  display: none !important;
}

/* A wide window shows the links in the header of the brand. A narrow window
   hides the row of the brand, so the bar shows its own copies. One cart link
   and one account link therefore stand at each width. */
@media (max-width: 759px) {
  .cw-global-link { display: none !important; }
}


/* The bar of the preview sits in the flow of the page, under the header of the
   brand. It covers no control. */
.cw-bar {
  position: relative;
  z-index: 40;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-top: 0;
  padding: 6px 16px;
  background: #111111;
  color: #ffffff;
  font-size: 12px;
}
.cw-bar a { color: #ffffff; white-space: nowrap; }
.cw-bar #cwAccountLink { font-weight: 700; }
.cw-bar__spacer { display: none; }

/* The loader measures the header of the brand and sets the room above the bar.
   No rule here holds a pixel value of a brand. */
/* The mount holds no content until the service answers. The header and the
   footer then stand together, and the footer moves at the first paint of the
   content. The mount therefore holds the room of a page in each state. A
   short view, such as an empty cart, keeps that room, so the footer never
   moves up either. */
.cw-mount { padding-top: 16px; min-height: 70vh; width: 100%; flex: 1 1 100%; }
/* The loader writes placeholder tiles into the mount before the first view.
   The listing tiles take the blocks of the real listing, so the content
   lands in the same place. The grid of the cards takes the gap and the
   columns of `.cw-cards`, and the image block takes the ratio 4 by 3 of a
   card image. The tiles hold no motion. */
.cw-skeleton { display: grid; gap: 24px; }
.cw-skeleton--card { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1024px) {
  .cw-skeleton--card { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .cw-skeleton--card { grid-template-columns: minmax(0, 1fr); }
}
/* The tiles of Trijicon hold the column count of the cards of that brand. */
.cw-brand-trijicon .cw-skeleton--card {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 760px) {
  .cw-brand-trijicon .cw-skeleton--card {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 975px) {
  .cw-brand-trijicon .cw-skeleton--card {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
/* The tiles hold the gap and the inset of the cards of that brand, so the
   cards land where the tiles stood. */
.cw-brand-trijicon .cw-skeleton--card {
  gap: 20px;
  padding-left: 10px;
  padding-right: 10px;
}
@media (min-width: 1400px) {
  .cw-brand-trijicon .cw-skeleton--card {
    gap: 30px;
    padding-left: 15px;
    padding-right: 15px;
  }
}
@media (min-width: 1600px) {
  .cw-brand-trijicon .cw-skeleton--card {
    gap: 40px;
    padding-left: 20px;
    padding-right: 20px;
  }
}
.cw-skeleton--row { gap: 0; }
/* The real card reads 465 pixels of height at a wide width, 272 pixels at
   two columns and 249 pixels at one column. Each tile holds that height, so
   the cards land where the tiles stood. */
.cw-skeleton__card {
  display: grid; gap: 10px; align-content: start; overflow: hidden;
  padding: 16px; background: #ffffff; height: 465px;
}
@media (max-width: 1024px) { .cw-skeleton__card { height: 272px; } }
@media (max-width: 480px) { .cw-skeleton__card { height: 249px; } }
.cw-skeleton__image { width: 100%; aspect-ratio: 4 / 3; background: #efefef; }
.cw-skeleton__line { height: 12px; width: 70%; background: #efefef; }
.cw-skeleton__line--wide { width: 100%; }
.cw-skeleton__line--short { width: 40%; }
.cw-skeleton__bar { height: 36px; flex: 1 1 20rem; background: #efefef; }
.cw-skeleton__chip { height: 13px; width: 90px; background: #efefef; }
.cw-skeleton__block { height: 64px; margin-top: 18px; background: #efefef; }
.cw-skeleton__row {
  display: flex; gap: 16px; align-items: center;
  padding: 12px; border-bottom: 1px solid #efefef;
}
.cw-skeleton__cell { height: 12px; width: 18%; background: #efefef; }
.cw-skeleton__cell--wide { width: 44%; }
.cw-skeleton__cell--short { width: 10%; }

/* The panel of the buy step and the rows of the action. */
.cw-buy {
  position: relative;
  z-index: 5;
  box-sizing: border-box;
  clear: both;
  width: 100%;
  max-width: 100%;
  margin: 16px 0;
  padding: 16px;
  background: #ffffff;
  color: #333333;
  border: 1px solid #cccccc;
}
.cw-buy__action,
.cw-checkout__action {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}
.cw-buy__price { font-weight: 700; }

/* The legacy cart of Ameriglo stands on the dark page of that brand, and the
   control KEEP SHOPPING holds the yellow of the brand. A white block under
   that control gives a contrast of 1.39, so the two blocks of Ameriglo keep
   the colours of the legacy page. */
.cw-brand-ameriglo .cw-cart,
.cw-brand-ameriglo .cw-checkout { background: #222222; color: #ffffff; }
.cw-brand-ameriglo .cw-cart .cart__header h1 { color: #ffffff; }
.cw-brand-ameriglo .cw-cart__row { border-bottom-color: #555555; }
.cw-brand-ameriglo .cw-sums li.total { border-top-color: #555555; }
/* The checkout of Ameriglo stands on a dark page and holds white text. The
   panel of the shipping method holds the light grey of the legacy page, so
   the white text stands on a light block. The panel therefore holds the
   dark text of the legacy page. */
.cw-brand-ameriglo .cw-method-panel,
.cw-brand-ameriglo .cw-method-panel h4,
.cw-brand-ameriglo .cw-method-panel label { color: #222222; }
/* The step tabs of the checkout of Ameriglo hold black text, and they stand
   on the dark grey block of that page. The tabs therefore hold white text.
   The buttons of that brand keep the black text of the legacy page, because
   a button holds the yellow gradient of the brand. */
.cw-brand-ameriglo .cw-checkout .font-condensed { color: #ffffff; }
.cw-brand-ameriglo .cw-method-panel .font-condensed { color: #222222; }
/* The header of Ameriglo stands fixed at the top of the page. The cart and
   the checkout of the preview start at the top, so the header covers their
   first rows. The page measures that header and writes --cw-headroom, and
   the two blocks hold the space of that value. */
.cw-brand-ameriglo .cw-cart,
.cw-brand-ameriglo .cw-checkout { padding-top: var(--cw-headroom, 0px); }

.cw-cart, .cw-checkout { display: flex; flex-direction: column; }
.cw-cart > *, .cw-checkout > * { min-width: 0; }
.cw-cart .cart__header { order: -2; }
.cw-cart .cart__header h1 { color: #111111; font-size: 24px; font-weight: 700; }
.cw-head { font-size: 24px; font-weight: 700; }
.cw-checkout input, .cw-checkout select, .cw-options input, .cw-options select {
  border: 1px solid #cccccc;
  border-radius: 2px;
  background: #ffffff;
  color: #333333;
}

/* The preview service answers no filter, no sort list and no compare list.
   Those controls go on the pages of the preview alone. The class cw-app names
   those pages, so every other page of the mirror keeps its blocks. */
.cw-app #reefine_sidebar,
.cw-app #models,
.cw-app .products__aside,
.cw-app .products__filters,
.cw-app .products__sort,
.cw-app .products__show-filters-phone-btn,
.cw-app .products__close-filters-phone-btn,
.cw-app .listbox__wrapper,
.cw-app .product-card__btn-divider,
.cw-app .product__add-to-cart-btn:not(#cwAdd),
/* The legacy page holds the same class on the add control and on the link of
   the dealers. The preview keeps that link, so the rule names the control
   alone. */
.cw-app button.sku__dealer-cart-btn:not(#cwAdd),
.cw-app .product-card__add-to-cart-btn,
.cw-app form.store_product_form button:not(#cwAdd),
.cw-app #product_cart-btn,
.cw-app #addition_options-cart-btn {
  display: none !important;
}

/* The column count of the cards stands with the grid of the cards above.
   The legacy page holds two, three or four cards in a row. */

@media (max-width: 768px) {
  .cw-detail { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 480px) {
  .cw-detail { gap: 16px; }
  .cw-mount { padding-top: 8px; padding-bottom: 32px; }

  /* The bar holds two rows. The links take the first row. The state of the
     service takes the second row. The name of the brand goes. */
  .cw-bar { gap: 6px 10px; font-size: 11px; padding: 6px 10px; }
  .cw-bar #cwBrand { display: none; }
  .cw-bar #cwState { flex: 1 1 100%; white-space: normal; }

  /* The price and the add control follow the options of the product. */
  .cw-buy { padding: 12px; }
  .cw-buy__action { flex-wrap: wrap; margin-top: 8px; }
  .cw-buy__action button { flex: 1 1 auto; }

  /* The reader meets the title, then the items, then the total. The cart
     keeps the gutter of the brand, because the table of the cart holds a
     margin of -20px at this width. A smaller gutter pushes that table past
     the edge of the window. */
  .cw-checkout { padding: 12px; }
  /* The table of the cart holds a margin of -20px at this width, and the
     gutter of the brand holds 16px. The wrapper clips those 4px, so the page
     holds no sideways scroll and the table keeps the bleed of the brand. */
  .cw-cart { overflow-x: clip; }
  .cw-cart #cwCartRows { order: -1; }
  .cw-cart .cart__overall-subtotal { order: 1; margin-top: 12px; }
  .cw-cart__row { gap: 8px; }
  .cw-cart .cart__photo-img { width: 56px; height: 42px; }
  .cw-sums { max-width: none; }

  /* The action of the checkout follows the fields of the address and of the
     account. */
  .cw-checkout__action { position: static; margin: 16px 0 0; }
  .cw-checkout__action button { width: 100%; }
  .cw-sums-box { margin-bottom: 12px; }
}

/* Placement of the preview blocks.
   1. A block of the preview follows the furniture of the brand in the order of
      reading: the header, then the title, then our controls.
   2. A block of the preview holds the flow of the page. No block holds a fixed
      position, so no block covers a field, a label or the footer.
   3. The loader measures the header of the brand. The bar of the preview takes
      the room under that header. */
.cw-holder { padding: 0 16px; }
.cw-bar { z-index: 2147482500; }
.cw-buy__action,
.cw-checkout__action {
  position: static;
  margin-top: 12px;
  padding: 0;
  background: none;
  border-top: 0;
  box-shadow: none;
}
.cw-buy { margin: 12px 0; padding: 12px; }
.cw-buy .cw-options label { margin: 6px 0 2px; }
.cw-cart .cart__overall-subtotal { display: flex; flex-wrap: wrap; gap: 12px; }
.cw-cart .cart__overall-subtotal-right { flex: 1 1 100%; }
.cw-cart .cart__product-sku { overflow-wrap: normal; word-break: keep-all; font-size: 11px; }

@media (max-width: 480px) {
  .cw-cart .cart__overall-subtotal-right a { display: block; text-align: center; }
  .cw-checkout__action button { width: 100%; white-space: normal; }
}



/* A narrow reader meets the options of the product, then the price and the
   add control. The legacy page of each brand holds that order, and the
   preview holds it too. */
@media (max-width: 480px) {
  .cw-buy { display: flex; flex-direction: column; }
  .cw-buy .cw-options { order: 0; }
  .cw-buy__action { order: 1; margin: 8px 0 0; }
  .cw-buy .cw-fault { order: 2; }
}


/* The field of Trijicon holds the floating label of the brand. The script of
   the preview sets the class of the brand, so the stylesheet of the brand
   moves the label. */
.cw-checkout .floating-label-input__input { width: 100%; }

/* The controls of a line of the cart stand in the cell of the price. */
.cw-cart__controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cw-cart__controls input { width: 64px; }


/* The sums of the order stand under the form, with the spacing of a panel of
   the brand. A narrow reader then meets the first field under the step bar. */
.cw-checkout .cw-sums-box { margin: 16px 0 0; padding: 0; }
.cw-checkout .cw-step { margin-top: 12px; }
@media (max-width: 480px) {
  .cw-checkout .cw-step { margin-top: 8px; }
  .cw-checkout .cw-sums-box { margin-top: 12px; }
  .cw-checkout h1 { font-size: 20px; margin-bottom: 8px; }
}


/* The payment step holds its own control for each card value. The legacy
   markup of a card field holds a floating label and a hidden list box, and
   that markup breaks inside a grid. The grid below gives the card number
   and the name of the card one whole line each. The month, the year and
   the security code take one cell each. A narrow window holds one cell on
   each line. */
.cw-card-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 0 0 16px;
}
.cw-card-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.cw-card-field--number,
.cw-card-field--name { grid-column: 1 / -1; }
.cw-card-label {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: inherit;
}
.cw-card-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid #cccccc;
  background: #ffffff;
  color: #222222;
  font-size: 16px;
  line-height: 1.4;
}
@media (max-width: 480px) {
  .cw-card-row { grid-template-columns: minmax(0, 1fr); }
}


/* The name of an order holds 36 characters. The heading breaks that name at a
   narrow width, so no part of it leaves the window. */
.cw-cart .cart__header h1 { overflow-wrap: anywhere; word-break: break-word; }


/* The name of an order holds 36 characters. The header of the cart and its
   title break that name, so a narrow window holds no sideways scroll. */
.cw-cart,
.cw-cart .cart__header,
.cw-cart .cart__header h1 {
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.cw-cart .cart__product-title { min-width: 0; overflow-wrap: anywhere; }


/* The page of the confirmation names a short reference of the order. The full
   name stands under it in a small line. */
.cw-receipt__number { overflow-wrap: anywhere; }
.cw-receipt__note { margin: 8px 0; }
.cw-receipt__full { font-size: 11px; overflow-wrap: anywhere; opacity: .8; }


/* The stylesheet of Ameriglo holds the step bar at every width. The preview
   adds no rule, because the legacy bar stays as the brand built it. */


/* The stylesheet of Trijicon holds the step bar at every width. The preview
   adds no rule, because the legacy bar stays as the brand built it. */


/* The menu of the bar holds the three links. A wide window shows them in one
   row, and the control of the menu stays out of sight. */
.cw-bar__menu { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.cw-bar__menu > summary { list-style: none; cursor: pointer; }
.cw-bar__menu > summary::-webkit-details-marker { display: none; }
@media (min-width: 481px) {
  .cw-bar__menu > summary { display: none; }
}
@media (max-width: 480px) {
  .cw-bar__menu { display: block; }
  .cw-bar__menu > summary { display: block; font-weight: 700; }
  .cw-bar__menu > a, .cw-bar__menu > span { display: block; margin-top: 4px; }
}

/* The payment step of the legacy store holds the card and the summary side by
   side. A narrow window holds one column. */
.cw-checkout__grid { display: block; }
@media (min-width: 900px) {
  .cw-checkout__grid.cw-checkout--two-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 24px;
    align-items: start;
  }
}


/* The step bar holds four steps on two rows of two at a narrow width. */
@media (max-width: 480px) {
  .cw-checkout .inline-grid,
  .cw-checkout .checkout__steps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 8px;
  }
  .cw-checkout .icon-arrow-right { display: none; }
}


/* The control of the menu holds a tap area of 44 pixels at a narrow width. */
@media (max-width: 480px) {
  .cw-bar { padding: 0; }
  .cw-bar__menu > summary {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 0 12px;
  }
  .cw-bar__menu > a, .cw-bar__menu > span {
    min-height: 40px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    margin-top: 0;
  }
}


/* The checkout of Ameriglo holds the dark panel of the brand. The white of the
   preview stops at that panel. */
.cw-checkout--dark { background: none; }
.cw-checkout--dark .bg-333 { background: #333333; color: #ffffff; }
.cw-checkout--dark .bg-444 { background: #444444; }
.cw-checkout--dark .cw-head,
.cw-checkout--dark .cw-note,
.cw-checkout--dark label { color: #ffffff; }
.cw-checkout--dark input,
.cw-checkout--dark select { color: #333333; }


/* The bar of the preview holds one control at a narrow width. The rule of the
   brand hides the name of the preview, so this rule shows it again. The links
   of the menu stay out of sight while the menu holds no open state. */
@media (max-width: 480px) {
  .cw-bar #cwBrand,
  .cw-bar__menu > summary {
    display: flex !important;
    align-items: center;
    min-height: 44px;
    padding: 0 12px;
    font-weight: 700;
  }
  .cw-bar__menu:not([open]) > a,
  .cw-bar__menu:not([open]) > span {
    display: none !important;
  }
  .cw-bar__menu[open] > a,
  .cw-bar__menu[open] > span {
    display: flex !important;
    align-items: center;
    min-height: 40px;
    padding: 0 12px;
  }
}


/* The links of the bar hold a space between them at a wide width. */
@media (min-width: 481px) {
  .cw-bar__menu { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
  .cw-bar__menu > a, .cw-bar__menu > span { margin: 0; }
}

/* The two columns of the payment step hold their content at the top. The dark
   panel of Ameriglo holds no empty block under that content. */
.cw-checkout__grid.cw-checkout--two-columns > * { align-self: start; }
.cw-checkout--dark .bg-333 { padding-bottom: 16px; }
.cw-checkout--dark .cw-sums li { color: #ffffff; }
.cw-checkout--dark .cw-sums li.total { font-weight: 700; }
.cw-checkout--dark .cart__product-title,
.cw-checkout--dark .cart__product-sku { color: #ffffff; }


/* The links of the bar hold one block. A wide window shows that block in one
   row with a space between the links. A narrow window shows it as a list
   under the control of the menu. */
.cw-bar__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
}
@media (max-width: 480px) {
  .cw-bar__links { display: block; }
  .cw-bar__links > a,
  .cw-bar__links > span {
    display: flex;
    align-items: center;
    min-height: 40px;
    padding: 0 12px;
  }
  .cw-bar__menu:not([open]) .cw-bar__links { display: none; }
}


/* The help of the code holds one control under the card fields. The text of
   that help opens on a click, so it covers no label. */
.cw-tooltip { clear: both; display: block; margin: 8px 0 0; font-size: 12px; }
.cw-tooltip > summary { cursor: pointer; text-decoration: underline; }
.cw-tooltip > p { margin: 4px 0 0; }


/* The image of the cards holds one block above the fields of the card. The
   fields then start under that image. */
.cw-cards-image {
  display: block;
  clear: both;
  float: none;
  margin: 0 0 20px;
  min-height: 32px;
}
.cw-cards-image img { display: block; max-height: 40px; width: auto; }

/* The payment step names the cards that the store takes. The legacy picture
   cut the mark of one card, so the step holds text marks. */
.cw-cards-accept {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 20px;
  font-size: 12px;
}
.cw-cards-accept__lead { text-transform: uppercase; letter-spacing: 0.04em; }
.cw-cards-accept__name {
  border: 1px solid #cccccc;
  padding: 4px 8px;
  font-weight: 600;
  white-space: nowrap;
}
/* The name of the brand of a card stands beside the label of the field. */
.cw-card-brand { font-weight: 400; opacity: .8; }


/* The row of the image holds the whole width, so the fields of the card start
   under that image. */
.cw-cards-image { flex: 1 1 100%; width: 100%; }


/* The label of a field of Trijicon floats above its box. The row after the
   image of the cards holds room for that label. */
.cw-checkout .flexer--standard:has(.cw-cards-image) { margin-bottom: 8px; }
.cw-checkout .flexer--standard:has(.cw-cards-image) + .flexer--standard { margin-top: 32px; }


/* The head of the summary names each column of the lines of the order. */
.cw-sums__title { font-weight: 700; margin: 0 0 8px; }
.cw-cart__head { font-size: 11px; font-weight: 700; text-transform: uppercase; }
.cw-cart__head > div { padding: 4px 0; }


/* The summary of the order holds four columns at a wide width: the product,
   the quantity, the price and the subtotal. A narrow window stacks the cells
   of each line. */
.cw-sums-box .cw-cart__head,
.cw-sums-box .cw-cart__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px 96px 104px;
  gap: 8px;
  align-items: center;
}
/* The value of the price and the value of the subtotal stay on one line. */
.cw-sums-box .cart__cell--price,
.cw-sums-box .cart__cell--subtotal-and-remove,
.cw-sums-box .cart__subtotal { white-space: nowrap; }
.cw-sums-box .cw-cart__head > div,
.cw-sums-box .cw-cart__row > div { min-width: 0; }
/* A narrow window stacks the cells of the cart. Each cell then holds its own
   line, and the name of the cell stands beside the value. */
@media (max-width: 480px) {
  .cw-cart__row .cart__cell {
    display: block;
    width: 100%;
    padding: 2px 0;
  }
}
.cw-sums-box .checkout__qty-cell,
.cw-sums-box .cart__cell--price,
.cw-sums-box .cart__cell--subtotal-and-remove { text-align: right; }
.cw-sums-box .cw-sums__title { grid-column: 1 / -1; }
@media (max-width: 480px) {
  .cw-sums-box .cw-cart__head { display: none; }
  .cw-sums-box .cw-cart__row {
    grid-template-columns: minmax(0, 1fr);
    text-align: left;
  }
  .cw-sums-box .checkout__qty-cell,
  .cw-sums-box .cart__cell--price,
  .cw-sums-box .cart__cell--subtotal-and-remove { text-align: left; }
}


/* The removal control stands after the subtotal of the line. */
.cart__cell--subtotal-and-remove [data-remove] { margin-left: 12px; }
@media (max-width: 480px) {
  .cart__cell--subtotal-and-remove [data-remove] { margin: 6px 0 0; display: block; }
}


/* The header of the mirror holds the first screen of a narrow window. The buy
   panel then stays compact, so the options, the price and the add control
   stand together in one screen. */
@media (max-width: 480px) {
  .cw-detail img, .cw-gallery img { max-height: 220px; object-fit: contain; }
  .cw-detail .cw-gallery { margin-bottom: 8px; }
  .cw-buy { padding: 12px; }
  .cw-buy .cw-options > div { margin-bottom: 6px; }
  .cw-buy .cw-options label { font-size: 11px; margin-bottom: 2px; display: block; }
  .cw-buy .cw-options select, .cw-buy .cw-options input { padding: 6px; }
  .cw-buy__price { margin: 6px 0; }
}

/* The confirmation of Ameriglo holds the details beside the summary of the
   order at a wide width. A narrow window stacks the two columns. */
.cw-receipt__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 24px; }
@media (max-width: 768px) {
  .cw-receipt__grid { grid-template-columns: minmax(0, 1fr); }
}


/* The legacy template of the checkout holds the photo of the mast. The style
   below repeats the two rules of that template, and the mirror now holds both
   images. The brand keeps every other rule of the mast. */
.mast--this-page {
  background-image: url(/cw-preview-assets/fpo-acog-mast--phone.jpg);
}
@media (min-width: 760px) {
  .mast--this-page {
    background-image: url(/cw-preview-assets/fpo-acog-mast--desktop.jpg);
  }
}


/* The legacy shipping step holds the method inside a grey panel. The style
   below repeats the background of that template. */
.cw-method-panel { background-color: #f1f1f1; padding: 24px; margin-top: 40px; }
.cw-method-panel h4 { margin: 0 0 20px; }
.checkout__shipping-method-flexer { display: flex; flex-wrap: wrap; gap: 16px; }


/* The legacy form holds a small note under the field of the address. */
.cw-small-note { display: block; font-size: 10px; margin: 2px 0 0; line-height: 1.3; }
.floating-label-input + .cw-small-note { margin-top: 2px; }

/* The mirror holds the rule word-break: break-word for the page. The cells of
   the cart then break the price of a line letter by letter. The two cells of
   the money hold one line each, as the legacy table holds them. */
.cw-cart .cart__cell { word-break: normal; }
.cw-cart .cart__cell--price,
.cw-cart .cart__row--headers .cart__cell,
.cw-cart .cart__subtotal { white-space: nowrap; }

/* The compare page holds the reticle of a product under the photo of that
   product. The block of the brand carries a place of its own, so the preview
   holds the reticle in a block with no place and no float. */
.cw-compare__reticle {
  position: static;
  max-width: 180px;
  margin: 12px auto 0;
}
.cw-compare__reticle-img { display: block; width: 100%; height: auto; }

/* The header of the brand holds the cart and the account at a wide width. The
   bar then hides its own copy of those two links. A narrow window hides the
   row of the brand, so the copy in the bar shows. */
@media (min-width: 760px) {
  .cw-bar__narrow { display: none; }
}

/* The footer of Trijicon holds an angled panel that reaches above its own top
   edge. The lower control of the cart therefore keeps clearance under it. */
/* The footer of Trijicon holds an angled panel of 210 pixels that reaches
   above the top edge of the footer. The wrapper of the cart therefore keeps
   150 pixels under its last row, and that row stands above the panel. */
.cw-brand-trijicon .cw-cart { padding-bottom: 150px; }
.cw-brand-trijicon .cw-cart .ta-r { position: relative; z-index: 2; }

/* The row of the discount of Ameriglo holds a field and a control. The row
   stretches both blocks, so the control stands higher than the field. The
   rules below hold one height for each block. The control keeps its width
   and its label on one line, so APPLY never wraps one letter on each line. */
.cw-discount-row { align-items: center; }
.cw-discount-row #promo_code { height: 52px; align-self: center; }
.cw-discount-row #cwApplyCode {
  height: 52px; align-items: center; align-self: center;
  flex-shrink: 0; white-space: nowrap;
}

/* The cart names the goods and the discount above the block of the subtotal.
   The panel stands under the field of the code, at the right of the cart,
   with the rules of the list of the sums. */
.cw-discount-panel { margin: 12px 0 12px auto; max-width: 360px; text-align: left; }
.cw-discount-panel__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 4px;
}
.cw-discount-panel .cw-note { margin: 8px 0 0; }
/* The block of the subtotal holds a top margin of 50 pixels. The panel and
   that block then stand apart, and the two read as two regions. The rule
   below holds one group of the sums. */
.cw-discount-panel ~ .cart__overall-subtotal { margin-top: 16px; }

/* The notice of the shipping stands between the lines of the cart and the
   sums. At a small width that block takes most of the view and breaks the
   path from the lines to the amount. The rules below hold it smaller. */
.cw-cart-notice h4 { margin: 12px 0; }
@media (max-width: 640px) {
  .cw-cart-notice { padding-left: 12px !important; padding-right: 12px !important;
    padding-bottom: 12px !important; }
  .cw-cart-notice h4 { font-size: 14px; line-height: 1.4; margin: 10px 0; }
}

/* The page of the results holds one row for each entry. */
.cw-search-row { padding: 12px 0; border-bottom: 1px solid rgba(128, 128, 128, 0.4); }
.cw-search-row__title { margin: 0 0 4px; font-size: 18px; }
.cw-search-row__price { margin: 4px 0 0; font-weight: 600; }
.cw-pages { margin: 20px 0; display: flex; gap: 10px; flex-wrap: wrap; }

/* The page of the staff reuses the legacy template
   `admin-utilities/lookuporders` of the client: the wrapper of the content,
   the grey panel, the grey buttons and a plain table. Every tool of the page
   renders through the same three blocks: the shell, the form of the search
   and the control of the export. The rules below hold those three blocks, so
   no single tool needs a rule of its own.

   The legacy templates `pricing-lookup` and `products-exporter` hold a rule
   around each cell. The two screens of the design contract hold a light
   surface, a quiet grey head and one rule between rows. The tables below
   hold that form with the palette of the brand. */
/* The page of one brand holds white text on a dark page. The panel of the
   staff holds a light surface, so every word of that panel takes a dark
   colour here. Without this pair the text of the panel disappears. */
.cw-staff {
  color: #222222;
  background: #ffffff;
  padding-top: 24px;
  padding-bottom: 24px;
}
.cw-staff h1, .cw-staff h2, .cw-staff h3, .cw-staff h4 { color: #111111; }
.cw-staff p, .cw-staff li, .cw-staff label, .cw-staff .cw-note { color: #222222; }
.cw-staff table, .cw-staff table td, .cw-staff table th { color: #222222; }
.cw-staff table thead th, .cw-staff table tr.cw-head td { color: #111111; }
.cw-staff input, .cw-staff select, .cw-staff textarea {
  color: #222222; background: #ffffff; border: 1px solid #c9c9c9;
}
/* The list of the orders of Ameriglo comes from the legacy page. That page
   stands on a dark surface, so each second row holds the grey 444, each
   link holds the yellow of the brand and each word holds white. Those three
   colours fail on the light panel of the staff. The rules below give the
   row, the link and the word a colour of this panel. */
.cw-staff [class*="bg-444"] { background-color: #f5f5f5; }
.cw-staff [class*="bg-333"], .cw-staff [class*="bg-222"] { background-color: #efefef; }
.cw-staff [class*="text-white"] { color: #222222; }
.cw-staff [class*="text-yellow"] { color: #1f1f1f; text-decoration: underline; }
.cw-staff [class*="border-444"], .cw-staff [class*="divide-444"] {
  border-color: #dcdcdc;
}

.cw-staff table {
  width: 100%; border-collapse: collapse; background: #fff;
  border: 1px solid #c9c9c9; font-size: 13px; line-height: 1.45;
  font-variant-numeric: tabular-nums;
}
.cw-staff table td, .cw-staff table th {
  padding: 7px 12px; text-align: left; border: 1px solid #e3e3e3;
  vertical-align: top;
}
.cw-staff table thead th, .cw-staff table thead td,
.cw-staff table tr.cw-head td {
  font-weight: 700; background: #efefef; border-bottom: 1px solid #c9c9c9;
  white-space: nowrap;
}
.cw-staff table tbody tr:nth-child(even) { background: #fafafa; }
/* The link of a row and the link of a page keep the dark text of the brand.
   Each link of a page holds the target size of 24 pixels. */
.cw-staff table a, .cw-staff .order-history__cell a { color: #333; text-decoration: underline; }
.cw-staff .cw-pages a {
  display: inline-block; min-width: 24px; min-height: 24px;
  padding: 2px 8px; text-align: center;
  /* The brand paints a link of a page with the yellow of the logo. That
     yellow on the white panel gives a ratio of 1.4 to 1. The colour below
     holds the same panel and a ratio over 12 to 1. */
  color: #1f1f1f; text-decoration: underline;
}
/* The header of the mirror needs a script for the menu and for the search.
   The page of the staff holds no script of the mirror, so `loader.js` binds
   the two controls of the menu drawer. The rule below gives the control of
   the search a size that a reader can hit at each width. */
.cw-view-staff .header__desktop-search-go-btn,
.cw-view-staff .header__search-submit-btn {
  min-width: 24px; min-height: 24px;
}
/* The mirror holds a transition of more than 200 ms on the header and on
   each control, and it holds one animation on an icon of the footer. A
   reader who asks for less motion must meet none of them. The class of the
   preview arrives with the loader, so these rules hold at the first paint. */
@media (prefers-reduced-motion: reduce) {
  a.skipnav, .skipnav {
    transition: none !important; animation: none !important;
  }
  .cw-view-staff header, .cw-view-staff .btn, .cw-view-staff button,
  .cw-view-staff a, .cw-view-staff svg, .cw-view-staff [class*="transition"] {
    transition: none !important; animation: none !important;
  }
}
.cw-staff .btn { margin: 0 8px 8px 0; }
/* The panel holds eight tabs. A row of the legacy button then wraps into
   many tall rows. The block below holds one row at a wide window and two
   columns at a narrow window. */
.cw-staff__tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.cw-staff__tabs a {
  margin: 0; padding: 10px 14px; font-size: 13px; white-space: nowrap;
}
@media (max-width: 640px) {
  .cw-staff__tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .cw-staff__tabs a { width: 100%; text-align: center; padding: 10px 6px; }
}
/* The control of the export stands on its own line, under the words of the
   list. The legacy panel holds each control under its own table. */
.cw-staff__export { display: block; margin: 10px 0 16px; }
/* Each field of the form of the search stands beside the button. The field
   holds the width of a code, not the width of the page. */
.cw-staff #cwStaffFind, .cw-staff #cwFlagFilter {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end;
  margin: 0 0 20px;
}
.cw-staff .cw-field { display: flex; flex-direction: column; gap: 4px; }
.cw-staff .cw-field label { font-size: 12px; margin: 0; }
.cw-staff .cw-field input { width: 220px; max-width: 100%; padding: 8px; }
.cw-staff h2.h2--standard { margin: 28px 0 10px; }
.cw-staff .cw-note { margin: 0 0 12px; }
/* A narrow window holds less width for each cell. The cells then keep a
   smaller padding, and the field of the search holds the full width. */
@media (max-width: 480px) {
  .cw-staff table td, .cw-staff table th { padding: 6px 8px; }
  .cw-staff .cw-field input { width: 100%; }
}
/* The script of the staff page wraps every table in a box, and that box
   owns the scroll. A second scroll on the table paints a second bar for one
   table, so the two legacy tables hold no scroll of their own. */
.cw-staff .order-history__table, .cw-staff .checkout__cart-table {
  max-width: 100%;
  /* A table of the automatic layout grows with its widest cell, and the
     maximum width then holds nothing. The fixed layout keeps the table
     inside the page, and the words of a long cell break. */
  table-layout: fixed;
  width: 100%;
}
/* A refused order names the words of the provider in its status cell. Those
   words made the row wider than the page, and the page then scrolled
   sideways. The rows therefore stay inside the page, and the words break. */
.cw-staff .order-history__row {
  max-width: 100%;
  flex-wrap: wrap;
}
.cw-staff .order-history__cell {
  min-width: 0;
  /* The legacy stylesheet holds each cell on one line, so a long status ran
     into the next column. */
  white-space: normal;
  overflow-wrap: anywhere;
}
/* The box of a table scrolls sideways at a narrow width. The bar of that
   scroll stood open on the page, so the rules below hide the bar alone. */
.cw-staff__table-wrap {
  max-width: 100%;
  overflow-x: auto;
  margin: 0 0 40px;
  /* The thin bar gives the reader the cue of more content, and it
     holds none of the weight of the bar of the system. */
  scrollbar-width: thin;
  scrollbar-color: rgba(128, 128, 128, 0.5) transparent;
}
.cw-staff__table-wrap::-webkit-scrollbar { height: 6px; }
.cw-staff__table-wrap::-webkit-scrollbar-thumb { background: rgba(128, 128, 128, 0.5); }
.cw-staff__table-wrap table.mb40 { margin-bottom: 0; }
/* A panel of 288 pixels holds a table of three columns. Each cell of that
   table then wraps over three lines, and the table grows very tall. The
   width below holds one line in each cell, and the box of that table
   scrolls sideways. */
@media (max-width: 640px) {
  .cw-staff__table-wrap table { min-width: 420px; }
  /* The summary of the states holds three short cells. That table fits a
     screen of 390 pixels, so it takes the width of the screen. A wider
     table clipped the cell of the value at the right edge. */
  .cw-staff__table-wrap table.mb40 {
    min-width: 0;
    width: 100%;
    table-layout: fixed;
  }
  .cw-staff__table-wrap table.mb40 th,
  .cw-staff__table-wrap table.mb40 td { overflow-wrap: anywhere; }
  /* The list of the orders of the legacy page holds one block for each
     order at this width. A rule under each block separates the orders. */
  .cw-staff [class*="lg:table-row"] { border-bottom: 1px solid #e3e3e3; }
}

/* The row of the featured products holds one line. The two controls of that
   row call scrollBy, so the row keeps its scroll. The bar of that scroll
   stood open on the page, so the rules below hide the bar alone. */
#cwFeaturedRows {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 16px 20px 24px;
  /* The thin bar gives the reader the cue of more content, and it
     holds none of the weight of the bar of the system. */
  scrollbar-width: thin;
  scrollbar-color: rgba(128, 128, 128, 0.5) transparent;
}
#cwFeaturedRows::-webkit-scrollbar { height: 6px; }
#cwFeaturedRows::-webkit-scrollbar-thumb { background: rgba(128, 128, 128, 0.5); }
.cw-featured__card { flex: 0 0 180px; display: block; text-decoration: none; }
.cw-featured__card img { width: 100%; height: 120px; object-fit: contain; }
.cw-featured__name { display: block; font-size: 13px; margin-top: 8px; }
.cw-featured__price { display: block; font-weight: 600; margin-top: 4px; }

/* The page of the results holds the filter of the category and the sort list
   above the rows. */
.cw-search-controls { display: flex; gap: 20px; flex-wrap: wrap; margin: 16px 0; }
.cw-search-controls label { display: grid; gap: 4px; font-size: 12px; }
.cw-search-controls select { padding: 8px; min-width: 200px; color: #111; }