h1 a {
  text-transform: uppercase;
  font-family: "Black Ops One", "Roboto Mono", mono, sans-serif !important;
}
/* A cart line's image is its design's band, a long strip of photos: shown whole across the top of the
   line, above its name and price, rather than cropped to a square beside them, in the flyout cart and
   the cart page alike. The cart page's wide layout is a table with a Product / Details / Total header;
   it lays out as the flyout does instead, without the header. The layout overrides the cart block's own,
   which is more specific. */
table.wc-block-cart-items,
table.wc-block-cart-items > tbody {
  display: block !important;
}
table.wc-block-cart-items > thead {
  display: none !important;
}
.wc-block-cart-items__row {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  column-gap: 16px;
}
.wc-block-cart-items__row > td {
  display: block;
}
/* The wide layout, 700px and up, rules a line along the top of every cell. None keeps it: on the band's
   cell it lay on the picture, and narrow screens have none, so spacing alone separates the lines. */
.wc-block-cart-items__row .wc-block-cart-item__image {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  padding: 0 0 8px 0 !important;
  border-top: 0 !important;
}
.wc-block-cart-items__row .wc-block-cart-item__product {
  grid-column: 1 !important;
  grid-row: 2 !important;
  border-top: 0 !important;
}
.wc-block-cart-items__row .wc-block-cart-item__total {
  grid-column: 2 !important;
  grid-row: 2 !important;
  border-top: 0 !important;
}
/* The band between its end tabs, as Made Of shows it: each tab a square as tall as the band, so a 5-photo
   band, the only kind sold, fills the middle five sevenths. Another photo count would need its own split.
   The tabs belong to the image's cell, not its link: for a product hidden from the catalogue, as the
   templates are, WooCommerce puts the image straight in the cell, and the flyout keeps a linked copy
   beside it marked hidden, which has to stay hidden. */
.wc-block-cart-items__row .wc-block-cart-item__image,
.wc-block-components-order-summary-item__image {
  display: grid !important;
  grid-template-columns: 1fr 5fr 1fr;
  align-items: center;
}
.wc-block-cart-item__image::before,
.wc-block-components-order-summary-item__image::before,
.wc-block-cart-item__image::after,
.wc-block-components-order-summary-item__image::after {
  content: "";
  aspect-ratio: 1 / 1;
  background: url("/wearshare-endtab-start.svg") center / contain no-repeat;
}
.wc-block-cart-item__image::after,
.wc-block-components-order-summary-item__image::after {
  background-image: url("/wearshare-endtab-end.svg");
}
.wc-block-cart-item__image [hidden] {
  display: none !important;
}
.wc-block-cart-item__image a {
  display: block;
}
/* A band's picture is 5:1, as is the processing strip. Set here, it holds the band's size while it loads,
   rather than the square WooCommerce's 80x80 size attributes give it. */
.wc-block-cart-item__image img {
  display: block;
  width: 100% !important;
  max-width: none;
  height: auto !important;
  max-height: none;
  aspect-ratio: 5 / 1;
  object-fit: contain;
}
/* Checkout's order summary the same way: the band across the line, its quantity badge on the band's corner. */
.wc-block-components-order-summary-item {
  flex-wrap: wrap;
}
.wc-block-components-order-summary-item__image {
  flex: 0 0 100% !important;
  width: 100% !important;
  margin-bottom: 8px;
}
.wc-block-components-order-summary-item__image > img {
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  aspect-ratio: 5 / 1;
  object-fit: contain;
}
.wc-block-components-order-summary-item__description {
  flex: 1 1 0;
  padding-left: 0 !important;
}
/* While the cart loads, WooCommerce shows two placeholder lines, each with a square grey picture, for at least
   two seconds. One placeholder instead, shaped like the band that replaces it: a grey strip between the end
   tabs, the band's own size, so the photos fill in where it was. A placeholder line is known by the
   placeholder in its picture's cell: the flyout's real lines have no cart item key either. */
.wc-block-cart-items__row:has(> .wc-block-cart-item__image > .wc-block-components-skeleton__element)
  ~ .wc-block-cart-items__row:has(> .wc-block-cart-item__image > .wc-block-components-skeleton__element),
.wc-block-components-skeleton--cart-line-items-checkout .wc-block-components-order-summary-item ~ .wc-block-components-order-summary-item {
  display: none !important;
}
.wc-block-cart-item__image .wc-block-components-skeleton__element,
.wc-block-components-order-summary-item__image .wc-block-components-skeleton__element {
  width: auto !important;
  height: auto !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
  aspect-ratio: 5 / 1;
}
/* A design's line stops at 2 (wearshare.php), where its minus button is disabled: hidden there rather than
   greyed out, keeping its space so the quantity box keeps its shape. */
.wc-block-components-quantity-selector__button--minus:disabled {
  visibility: hidden;
}
.wrsr-iframe-shell {
  width: 100%;
}
#wrsriframe {
  width: 100%;
  height: 100vh;
  border: 0;
  display: block;
}
#wrsriframe.wrsr-iframe--overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  width: 100vw !important;
  height: 100dvh !important;
  max-width: none !important;
  border: 0;
}
/*
 * App-page embed (Make): the frame fills the viewport below the store header
 * and the Creator scrolls inside it, so `position: fixed` there resolves
 * against a real viewport.
 *
 * svh, not a measured pixel height. Safari on iOS collapses its address bar to
 * a pill that floats *over* the page - Chrome's bar shortens the viewport
 * instead - and window.innerHeight still counts the band underneath it, so a
 * frame sized from it ran to the bottom of the screen and put the dock under
 * the pill. The small viewport is the one with the browser's chrome expanded,
 * which is the shortest the page is ever given, so a frame sized to it clears
 * the toolbar in every state. The browser tracks the unit itself; JS supplies
 * only --wrsr-frame-top, the offset of the frame below the store header.
 *
 * The vh line is the fallback where svh is unsupported. With no JS at all the
 * offset falls back to 0 and the frame is simply a full viewport tall.
 */
.wrsr-iframe-shell--app {
  height: calc(100vh - var(--wrsr-frame-top, 0px));
  height: calc(100svh - var(--wrsr-frame-top, 0px));
}
#wrsriframe.wrsr-iframe--app {
  height: 100%;
}
/*
 * Nothing left for the store page to scroll; letting it would lift the frame,
 * and the dock fixed to its bottom edge, out of view. Added by wearshare.js.
 *
 * While the toolbar is collapsed the frame stops short of the screen by the
 * toolbar's height. That strip is painted the dock's own white so it reads as
 * the dock running to the edge rather than as a gap under it.
 */
html.wrsr-app-embed,
html.wrsr-app-embed body {
  overflow: hidden;
  background: #fff;
}
.wearshare_cart_discount_messaging {
  background: #ffaaf0;
  color: #676ff4;
  font-weight: bold;
  text-align: center;
  width: 96%;
  padding: 6px;
  border-radius: 10px;
}
/* The price breaks, folded under the discount message behind a small grey label and chevron, as Make's STATS. */
.wearshare_price_breaks {
  width: 96%;
  margin: -0.5em 0 1em;
  font-size: 12px;
}
.wearshare_price_breaks summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  cursor: pointer;
  list-style: none;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.6;
}
.wearshare_price_breaks summary:hover {
  opacity: 1;
}
/* The theme outlines anything focused; a tap to open it is not keyboard focus. */
.wearshare_price_breaks summary:focus:not(:focus-visible) {
  outline: none;
}
.wearshare_price_breaks summary::-webkit-details-marker {
  display: none;
}
.wearshare_price_breaks summary svg {
  width: 12px;
  height: 12px;
  transition: transform 0.3s;
}
.wearshare_price_breaks[open] summary svg {
  transform: rotate(180deg);
}
.wearshare_price_breaks ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.wearshare_price_breaks li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
}